@charset "UTF-8";

html, body {
	/* background-color: #404040; #404040 #001a33 */
	font-family: """Noto Sans Japanese""";
	width: 100%;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
 
	background: linear-gradient(-45deg, #4d2e00, #262626, #082a45);
	background-size: 1000%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.header {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	z-index: 150;
	grid-area: header;
	align-self: start;
	justify-self: start;
}


/* -- navbar --------------------------------------------------------------- */
nav {
  width: 100%;
  position: fixed; 
  top: 0;
}

.nav-container {
	font-family: "Avenir";
	font-size: 14px;
  	text-align: left;
  	line-height: 2;
	position: relative;
	color: grey;
	margin: 1em 1em 0.5em 0;
	padding: 1em;
	opacity: 0.7;
}
.nav-container ul li {
  	list-style: none;
  	display: inline-block;
  	margin: 0 10px;
}
.nav-container ul li a {
  	padding: 8px 0;
  	color: black;
  	font-size: 1.3em;
  	text-decoration: none;
  	transition: all 0.3s ease;
}
.nav-container ul li a:hover{
	color: black;
	opacity: 0.8;
}

/* 現代 */
.nav-container ul li a#n0 span{
	content: "2017";
}
.nav-container ul li a#n0:hover span{
	display: none;
}
.nav-container ul li a#n0:hover:after{
	content: "現代";
	margin: 0 2px 0 2px;
	font-weight: bold;
}
.nav-container ul li #n0.selected span{
	display: none;
}
.nav-container ul li #n0.selected:after{
	content: "現代";
	margin: 0 2px 0 2px;
	font-weight: bold;
}

/* 中世 */
.nav-container ul li a#n6 span{
	content: "1603-1185";
	margin: 0 2px 0 2px;
}
.nav-container ul li a#n6:hover span{
	display: none;
}

.nav-container ul li a#n6:hover:after{
	content: "中世";
	margin: 0 27px 0 27px;
	font-weight: bold;
}
.nav-container ul li #n6.selected span{
	display: none;
}
.nav-container ul li #n6.selected:after{
	content: "中世";
	margin: 0 27px 0 27px;
	color: #f0ce1e;
	font-weight: bold;
}

/* 飛鳥・奈良時代 */
.nav-container ul li a#n1 span{
	content: "792-592";
	margin: 0 30px 0 30px;
}
.nav-container ul li a#n1:hover span{
	display: none;
}
.nav-container ul li a#n1:hover:after{
	content: "飛鳥・奈良・平安";
	margin: 0 -4px 0 -4px;
	font-weight: bold;
}
.nav-container ul li #n1.selected span{
	display: none;
}
.nav-container ul li #n1.selected:after{
	content: "飛鳥・奈良・平安";
	margin: 0 -4px 0 -4px;
	color: #a010b5;
	font-weight: bold;
}

/* 古墳時代 */
.nav-container ul li a#n2 span{
	content: "600-250";
	margin: 0 2px 0 2px;
}
.nav-container ul li a#n2:hover span{
	display: none;
}
.nav-container ul li a#n2:hover:after{
	content: "古墳時代";
	margin: 0 -1px 0 -1px;
	font-weight: bold;
}
.nav-container ul li #n2.selected span{
	display: none;
}
.nav-container ul li #n2.selected:after{
	content: "古墳時代";
	margin: 0 -1px 0 -1px;
	color: #ff3333;
	font-weight: bold;
}

/* 弥生時代 */
.nav-container ul li a#n3 span{
	content: "250AD-300BC";
	margin: 0 30px 0 30px;
}
.nav-container ul li a#n3:hover span{
	display: none;
}

.nav-container ul li a#n3:hover:after{
	content: "弥生時代";
	margin: 0 51.7px 0 51.7px;
	font-weight: bold;
}
.nav-container ul li #n3.selected span{
	display: none;
}
.nav-container ul li #n3.selected:after{
	content: "弥生時代";
	margin: 0 51.7px 0 51.7px;
	color: #ffddbb;
	font-weight: bold;
}

/* 縄文時代 */
.nav-container ul li a#n4 span{
	content: "300BC-14,000BC";
	margin: 0 2px 0 2px;
}
.nav-container ul li a#n4:hover span{
	display: none;
}

.nav-container ul li a#n4:hover:after{
	content: "縄文時代";
	margin: 0 35.5px 0 35.5px;
	font-weight: bold;
}
.nav-container ul li #n4.selected span{
	display: none;
}
.nav-container ul li #n4.selected:after{
	content: "縄文時代";
	margin: 0 35.5px 0 35.5px;
	color: #19382c;
	font-weight: bold;
}

/* 旧石器時代 */
.nav-container ul li a#n5 span{
	content: "14,000BC-";
	margin: 0 30px 0 30px;
}
.nav-container ul li a#n5:hover span{
	display: none;
}

.nav-container ul li a#n5:hover:after{
	content: "旧石器時代";
	margin: 0 27.5px 0 27.5px;
	font-weight: bold;
}
.nav-container ul li #n5.selected span{
	display: none;
}
.nav-container ul li #n5.selected:after{
	content: "旧石器時代";
	margin: 0 27.5px 0 27.5px;
	color: #736357;
	font-weight: bold;
}


/* mobile:hidden */
@media screen and (max-width: 768px){
	.content{
	min-height: 1200px;
	}

	section{
		visibility: hidden;
	}
}
/* --------------------------------------------------------------- navbar -- */


/* -- scroll down button --------------------------------------------------- */
section{
  	position: absolute;
  	width: 100%;
  	height: 100%;
}
section::after{
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 80%;
}
#section01 a {
	padding-top: 60px;
}
/* #section01 a span {
  	position: absolute;
  	color: #ff9999;
    text-align: center;
  	bottom: 0;
  	left: 0;
 	width: 0;
	height: 0;
	margin: 0 0  5% 85%;
	border: 0 solid transparent;
	border-left-width: 50px;
	border-right-width: 50px;
	border-top: 50px solid ;
	box-sizing: border-box;
  	z-index: 200;
} */

#section01 a span {
	background-image: url("../img/svg/markers/scrolldown.svg") !important;
	background-position: center;
	background-repeat: no-repeat;
  	position: absolute;
  	color: #ff9999;
    text-align: center;
  	bottom: 0;
  	left: 0;
 	width: 15%;
	height: 15%;
	margin: 0 0 3% 85%;
  	z-index: 200;
}

#section01 a span:hover{
	opacity: 0.7;
	-webkit-animation: sdb04 1.5s infinite;
  	animation: sdb04 1.5s infinite;
}

@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(0, 20px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 20px);
  }
  40% {
    transform: translate(0, 0);
  }
}

/* --------------------------------------------------- scroll down button -- */


/* -- layout --------------------------------------------------------------- */
.container .container-whole{
}
.content-top{
	position: relative;
	display: flex;
	padding: 280px 30px 0px 30px;
	margin-bottom: 100px;
}

/* .content-top{
	position: relative;
	display: flex;
	padding: 150px 0px 0px 30px;
	margin-bottom: 100px;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
} */

.content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center; //center
	align-items: center; //center
	width: 100%;
	height: 100vh;
	min-height: 1000px;
	pointer-events: none;
}

.content--layout {
	position: relative;
	display: grid;
	pointer-events: auto;
	justify-content: right;
	align-content: right;
	width: 100%;
	padding: 0 5% 0 5%;
	margin-right: 5%;
	grid-template-areas:	"... title title title"
							"desc desc ... period"
							"link link ... period";
}

@media screen and (max-width: 768px){
	.content--layout {
		position: relative;
		width: 100%;
		margin: 0 0 0 9%;
	}
}

.content__desc {
	text-align: left;
}

.content__link {
	justify-self: end;
}

.content__period {
	justify-self: end;
	align-self: start;
}

.content__img {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	height: 500px;
	opacity: 1;
	z-index: 200;
	box-shadow: -1px 1px 0px 2px #262626;
}

.content__img-xs {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	height: 500px;
	opacity: 1;
	z-index: 200;
	box-shadow: -50px 0px 0px 0px #404040;
	border: #404040 solid;
	border-top-width: 1px;
	border-bottom-width: 2px;
}

.content__title {
	grid-area: title;
	letter-spacing: -0.025em;
	font-size: 32px;
	margin: 0;
	text-transform: lowercase;
	cursor: default;
  	z-index: 250;
}

.content__link {
	pointer-events: auto;
	grid-area: link;
	align-self: end;
	justify-self: start;
	z-index: 10;
	padding: 0 1em 0.15em;
}

.content__period {
	grid-area: period;
	color: #e6e6e6;
	margin: 0;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	text-align: right;
	cursor: default;
}


/* --------------------------------------------------------------- layout -- */


/* -- map ------------------------------------------------------------------ */
#m0{
	position : fixed;
	width: 110%;
	height: auto;
	margin-top: -5%;
  	left: 0;
  	display: none;
    opacity: 0.2;
  	/* filter: drop-shadow( 2px 2px 7px #404040 ); */
}

#m1, #m2, #m3, #m4, #m5, #m6{
	position : fixed;
	width: 110%;
	height: auto;
	margin-top: -5%;
  	left: 0;
  	display: none;
  	/* filter: drop-shadow( 1px 1px 7px #404040 ); */
}

#m0a{
	position : fixed;
	width: 110%;
	height: auto;
	margin-top: -5%;
  	left: 0;
  	display: none;
  	opacity: 0.10;
  	/* filter: drop-shadow( 1px 1px 7px #404040 ); */
}
#m0b{
	position : fixed;
	width: 110%;
	height: auto;
	margin-top: -5%;
  	left: 0;
  	display: none;
  	opacity: 0.5;
  	z-index: 20;
  	/* filter: drop-shadow( 1px 1px 7px #404040 ); */
}

#m0c{
	position : fixed;
	width: 110%;
	height: auto;
	margin-top: -5%;
  	left: 0;
  	display: none;
  	opacity: 0;
  	z-index: 100;
  	/* filter: drop-shadow( 1px 1px 7px #404040 ); */
}


.places{
	position: absolute;
    text-align: center;
	font-weight: bold;
	display: none;
}
.places-color{
	color: red;
}
/* .okayama{
	position: fixed;
	color: black;
	font-size: 8vw;
	margin: 8% 0 0 37%;
	top: 0;
	left: 0;
	opacity: 0.15;
}
.kurashiki{
	position: fixed;
	color: black;
	font-size: 6vw;
	margin: 20% 0 0 13%;
	top: 0;
	left: 0;
	opacity: 0.15;
}
.soja{
	position: fixed;
	color: black;
	font-size: 4vw;
	margin: 5% 0 0 14%;
	top: 0;
	left: 0;
	opacity: 0.15;
}
.tamano{
	position: fixed;
	color: black;
	font-size: 3vw;
	margin: 32% 0 0 42%;
	top: 0;
	left: 0;
	opacity: 0.15;
} */
.okayamaeki{
	position: fixed;
	color: white;
	font-size: 1vw;
	margin: 12.5% 0 0 44.5%;
	top: 0;
	left: 0;
	opacity: 1;
}
.koukokan{
	position: fixed;
	color: white;
	font-size: 1vw;
	margin: 22% 0 0 28%;
	top: 0;
	left: 0;
	opacity: 1;
}
.kibitsujinja{
	position: fixed;
	color: white;
	font-size: 1vw;
	margin: 12% 0 0 37%;
	top: 0;
	left: 0;
	opacity: 1;
}
.tsurajima{
	position: fixed;
	color: black;
	font-size: 1vw;
	margin: 28.2% 0 0 20.9%;
	top: 0;
	left: 0;
	opacity: 0.5;
}
.hayashima{
	position: fixed;
	color: black;
	font-size: 1vw;
	margin: 19.5% 0 0 35%;
	top: 0;
	left: 0;
	opacity: 0.5;
}
.kojima{
	position: fixed;
	color: black;
	font-size: 1vw;
	margin: 33% 0 0 32%;
	top: 0;
	left: 0;
	opacity: 0.5;
}
/* ------------------------------------------------------------------ map -- */


/* -- title ---------------------------------------------------------------- */
.logo{
	width: 700px;
	margin: 100px 30px 30px 30px;
}
.col-xs-12 .logo{
	width: 100%;
	margin: -50px 0 50px 0;
}

/* 現代 */
.title0 {
	font-size: 100px;
	color: #ff9999;
	line-height: 1;
}

/* 飛鳥・奈良時代 */
.title1 { 
	/* box-shadow: -1px 1px 5px 1px #404040; */
}
.title1a{
	color: grey;
	font-weight: bold;
	position: relative;
	background-color: #d2d2e0;
	border-style: solid;
	border-color: #d2d2e0;
	border-width: 20px;
	padding: 0 0 0 35px;
	margin-left: 10px;
}

/* 平安時代 */
.title1b{
	color: grey;
	font-weight: bold;
	background-color: #d2d2e0;
	border-style: solid;
	border-color: #d2d2e0;
	border-width: 20px;
	padding: 0 15px 0 0;
	margin-left: -10px;
}

/* 古墳時代 */
.title2 {
	color: white;
	font-weight: bold;
	background-color: #ff3333;
	border-style: solid;
	border-color: #ff3333;
	border-width: 20px;
	padding: 0 35px 0 35px;
	margin-left: 10px;
}

/* 弥生時代 */
.title3 {
	color: #404040;
	font-weight: bold;
	background-color: #ffddbb;
	border-style: solid;
	border-color: #ffddbb;
	border-width: 20px;
	padding: 0 35px 0 35px;
	margin-left: 10px;
}

/* 縄文時代 */
.title4 {
	color: #ffddbb;
	font-weight: bold;
	background-color: #19382c;
	border-style: solid;
	border-color: #19382c;
	border-width: 20px;
	padding: 0 35px 0 35px;
	margin-left: 10px;
}

/* 旧石器時代 */
.title5 {
	color: #e6e6e6;
	font-weight: bold;
	background-color: #736357;
	border-style: solid;
	border-color: #736357;
	border-width: 20px;
	padding: 0 35px 0 35px;
	margin-left: 10px;
}

/* 中世 */
.title6{
	color: #f0ce1e;
	font-weight: bold;
	background-color: #000;
	border-style: solid;
	border-color: #000;
	border-width: 20px;
	padding: 0 45px 0 45px;
	margin-left: 10px;
}
.desc1.selected{
	color: black;
	opacity: 1;
}
/* ---------------------------------------------------------------- title -- */


/* -- description ---------------------------------------------------------- */
.content__desc0 {
	color: white;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1.5;
	text-align: justify;
	margin: 15px;
	z-index: 200;
}
.content__desc0a{
	font-size: 20px;
	color: white;
	letter-spacing: 2px;
	margin: 15px;
}
.content__desc0a p{
	margin: 5px;
}

.content__desc0.col-xs-12 {
	font-size: 24px;
	margin: 0;
	padding: 0;
	text-align: justify;
}
.content__desc0a.col-xs-12 {
	font-size: 18px;
	margin: 20px 0 0 0;
	text-align: justify;
}

.content__desc1 {
	color: black; /* #d1d1e0; */
	font-size: 16px;
	text-align: justify;
	grid-area: desc;
	margin: 0;
	z-index: 10;
	width: 400px;
	padding: 50px 40px 0 40px;
	cursor: default;
}

.content__desc2 {
	color: black; /* #ff4d4d; */
	font-size: 16px;
	text-align: justify;
	grid-area: desc;
	margin: 0;
	z-index: 10;
	width: 400px;
	padding: 50px 40px 0 40px;
	cursor: default;
}

.content__desc3 {
	color: black; /* #f2f2f2; */
	font-size: 16px;
	text-align: justify;
	grid-area: desc;
	margin: 0;
	z-index: 10;
	width: 400px;
	padding: 50px 40px 0 40px;
	cursor: default;
}

.content__desc4 {
	color: black; /* #ffff99; */
	font-size: 16px;
	text-align: justify;
	grid-area: desc;
	margin: 0;
	z-index: 10;
	width: 400px;
	padding: 50px 40px 0 40px;
	cursor: default;
	/* text-shadow: 2px 2px 10px black; */
}

.content__desc5 {
	color: black;
	font-size: 16px;
	text-align: justify;
	grid-area: desc;
	margin: 0;
	z-index: 10;
	width: 400px;
	padding: 40px 40px 0 40px;
	cursor: default;
}

.content__desc6 {
	color: black; /* #ffff99; */
	font-size: 16px;
	text-align: justify;
	grid-area: desc;
	margin: 0;
	z-index: 10;
	width: 400px;
	padding: 50px 40px 0 40px;
	cursor: default;
}
/* ---------------------------------------------------------- description -- */


/* -- artifacts ------------------------------------------------------------ */
.slide1, .slide2, .slide3, .slide4, .slide5, .slide6 {
    display:none;
    z-index: 200;
}

.active {
    display: block;
}

.tab1, .tab2, .tab3, .tab4, .tab5, .tab6 {
	position: fixed;
    cursor: pointer;
    text-align: center;
  	display: none;
	top: 0;
	left: 0;
	z-index: 150;
}

.tab1:hover, 
.tab2:hover,
.tab3:hover,
.tab4:hover,
.tab5:hover,
.tab6:hover{
	background-image: url("../img/svg/markers/pin-selected.svg") !important;
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
  	animation: bounce 1s infinite;
  	-webkit-animation: bounce 1s infinite;
}
@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	20% {
		-webkit-transform: translateY(-5px);
		-ms-transform:     translateY(-5px);
		transform:         translateY(-5px)
	}
}

.red{
	background-image: url("../img/svg/markers/pin-red.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}
.pinselected{
	background-image: url("../img/svg/markers/pin-selected.svg") !important;
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}
.pin-asuka{
	background-image: url("../img/svg/markers/pin-asuka.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}
.pin-heian{
	background-image: url("../img/svg/markers/pin-heian.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}
.pin-chusei{
	background-image: url("../img/svg/markers/pin-chusei.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}
.pin-yayoi{
	background-image: url("../img/svg/markers/pin-yayoi.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}
.pin-jomon{
	background-image: url("../img/svg/markers/pin-jomon.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}
.pin-kyusekki{
	background-image: url("../img/svg/markers/pin-kyusekki.svg");
	background-position: center;
	background-repeat: no-repeat;
	width: 3vw;
	height: 3vw;
}

/* .red{
	color: red;
	border: 0 solid transparent;
	border-left-width: 15px;
	border-right-width: 15px;
	border-bottom: 15px solid ;
} */


/* 中世 */
#m6tab1{ /* 亀山古窯跡群 */
	margin-top: 24.5%;
	margin-left: 13%;
}
#m6tab2{ /* 吉備津神社 */
	margin-top: 10%;
	margin-left: 36%;
}
#m6tab3{ /* 城が端遺跡 */
	margin-top: 26.5%;
	margin-left: 29%;
}


/* 飛鳥・奈良・平安 */
#m1tab1{ /* 天平宝字七(763)年銘　富比売墓地買地券推定出土地 */
	margin-top: 16%;
	margin-left: 14%;
}
#m1tab2{ /* 広江小陶棺出土地 */
	margin-top: 31%;
	margin-left: 30%;
}
#m1tab3{ /* 内山池火葬墓群 */
	margin-top: 15%;
	margin-left: 12%;
}
#m1tab4{ /* 備中国分尼寺跡 */
	margin-top: 11%;
	margin-left: 28%;
}
#m1tab5{ /* 矢部遺跡 */
	margin-top: 11%;
	margin-left: 31%;
}
#m1tab6{ /* 二子古窯跡 */
	margin-top: 14%;
	margin-left: 30%;
}
#m1tab7{ /* 日畑廃寺跡 */
	margin-top: 12%;
	margin-left: 33%;
}
#m1tab8{ /* 下道氏墓地 */
	margin-top: 17%;
	margin-left: 8%;
}
#m1tab9{ /* 箭田廃寺(吉備寺) */
	margin-top: 15.5%;
	margin-left: 16%;
}
#m1tab10{ /* 賞田廃寺跡 */
	margin-top: 5%;
	margin-left: 49%;
}
#m1tab11{ /* 八高廃寺跡 */
	margin-top: 18%;
	margin-left: 13%;
}
#m1tab12{ /* 備中国分寺跡 */
	margin-top: 11.3%;
	margin-left: 26%;
}
#m1tab13{ /* 幡多廃寺塔跡 */
	margin-top: 8%;
	margin-left: 48%;
}
#m1tab14{ /* 安養寺瓦経塚 */
	margin-top: 15%;
	margin-left: 24%;
}
#m1tab15{ /* 酒津八幡山 */
	margin-top: 17.5%;
	margin-left: 22%;
}


/* 古墳時代 */
#m2tab1{ /* 金蔵山古墳 */
	margin-top: 10.5%;
	margin-left: 49.5%;
}
#m2tab2{ /* 法蓮古墳群 */
	margin-top: 8.5%;
	margin-left: 27%;
}
#m2tab3{ /* 随庵古墳 */
	margin-top: 4.5%;
	margin-left: 26.5%;
}
#m2tab4{ /* 造山古墳 */
	margin-top: 9%;
	margin-left: 29.5%;
}
#m2tab5{ /* 金浜古墳 */
	margin-top: 36.3%;
	margin-left: 26%;
}
#m2tab6{ /* 神宮寺山古墳 */
	margin-top: 8%;
	margin-left: 44.5%;
}
#m2tab7{ /* 宿ささら谷古墳 */
	margin-top: 12%;
	margin-left: 27.5%;
}
#m2tab8{ /* 作山古墳 */
	margin-top: 10%;
	margin-left: 24%;
}
#m2tab9{ /* 王墓山古墳群 */
	margin-top: 12%;
	margin-left: 32.5%;
}
#m2tab10{ /* 六口島牛が首遺跡 */
	margin-top: 45.4%;
	margin-left: 25%;
}
#m2tab11{ /* 千足古墳 */
	margin-top: 10%;
	margin-left: 28.5%;
}
#m2tab12{ /* 王墓山古墳 */
	margin-top: 11%;
	margin-left: 31%;
}
#m2tab13{ /* 勝負砂古墳 */
	margin-top: 17%;
	margin-left: 18.7%;
}
#m2tab14{ /* 二万大塚古墳 */
	margin-top: 18%;
	margin-left: 17.5%;
}
#m2tab15{ /* 天狗山古墳 */
	margin-top: 16.5%;
	margin-left: 20.3%;
}
#m2tab16{ /* 寒田古窯跡群 */
	margin-top: 22%;
	margin-left: 15%;
}
#m2tab17{ /* こうもり塚古墳 */
	margin-top: 9.5%;
	margin-left: 26%;
}
#m2tab18{ /* 中山茶臼山古墳 */
	margin-top: 11%;
	margin-left: 37.5%;
}
#m2tab19{ /* 中山茶臼山古墳 */
	margin-top: 38%;
	margin-left: 27%;
}
#m2tab20{ /* 熊坂古窯址群 */
	margin-top: 32%;
	margin-left: 31%;
}
#m2tab21{ /* 都月坂１号墳 */
	margin-top: 7%;
	margin-left: 42%;
}
#m2tab22{ /* 唐人塚古墳 */
	margin-top: 4%;
	margin-left: 49%;
}
#m2tab23{ /* 備前車塚古墳 */
	margin-top: 3%;
	margin-left: 52%;
}
#m2tab24{ /* 網浜茶臼山古墳 */
	margin-top: 12.5%;
	margin-left: 46%;
}
#m2tab25{ /* 湊茶臼山古墳 */
	margin-top: 12%;
	margin-left: 48%;
}
#m2tab26{ /* 箭田大塚古墳 */
	margin-top: 15.5%;
	margin-left: 15.5%;
}


/* 弥生時代 */
#m3tab1{ /* 酒津遺跡 */
	margin-top: 18.3%;
	margin-left: 22.3%;
}
#m3tab2{ /* 芋岡山遺跡 */
	margin-top: 20%;
	margin-left: 6%;
}
#m3tab3{ /* 黒宮大塚 */
	margin-top: 16%;
	margin-left: 13%;
}
#m3tab4{ /* 津島遺跡 */
	margin-top: 7%;
	margin-left: 42%;
}
#m3tab5{ /* 南方遺跡 */
	margin-top: 9%;
	margin-left: 43.5%;
}
#m3tab6{ /* 上東遺跡 */
	margin-top: 13%;
	margin-left: 33%;
}
#m3tab7{ /* 女男岩・辻山田遺跡 */
	margin-top: 12%;
	margin-left: 30%;
}
#m3tab8{ /* 種松山銅鐸出土地 */
	margin-top: 27%;
	margin-left: 29%;
}
#m3tab9{ /* 白江遺跡 */
	margin-top: 21%;
	margin-left: 5%;
}
#m3tab10{ /* 仁伍遺跡 */
	margin-top: 39%;
	margin-left: 29%;
}
#m3tab11{ /* 由加銅剣出土地 */
	margin-top: 33%;
	margin-left: 36.5%;
}
#m3tab12{ /* 上の町保育園(池尻)遺跡 */
	margin-top: 36%;
	margin-left: 33%;
}
#m3tab13{ /* 下津井神道山遺跡 */
	margin-top: 42%;
	margin-left: 30%;
}
#m3tab14{ /* 楯築遺跡 */
	margin-top: 10%;
	margin-left: 31.5%;
}
#m3tab15{ /* 百間川原尾島遺跡 */
	margin-top: 9.5%;
	margin-left: 49%;
}
#m3tab16{ /* 妹の銅鐸 */
	margin-top: 15.5%;
	margin-left: 11%;
}
#m3tab17{ /* 雄町遺跡 */
	margin-top: 4%;
	margin-left: 51%;
}
#m3tab18{ /* 百間川兼基遺跡 */
	margin-top: 9%;
	margin-left: 51.5%;
}
#m3tab19{ /* 鹿田遺跡 */
	margin-top: 12.5%;
	margin-left: 43%;
}
#m3tab20{ /* 天瀬遺跡 */
	margin-top: 11%;
	margin-left: 45%;
}
#m3tab21{ /* 兼基銅鐸出土地 */
	margin-top: 10%;
	margin-left: 50.5%;
}


/* 縄文時代 */
#m4tab1{ /* 広江・浜遺跡 */
	margin-top: 33%;
	margin-left: 27.5%;
}
#m4tab2{ /* 里木貝塚 */
	margin-top: 21%;
	margin-left: 18%;
}
#m4tab3{ /* 涼松貝塚 */
	margin-top: 22%;
	margin-left: 16%;
}
#m4tab4{ /* 船元貝塚 */
	margin-top: 26.5%;
	margin-left: 28%;
}
#m4tab5{ /* 福田貝塚 */
	margin-top: 27%;
	margin-left: 25.5%;
}
#m4tab6{ /* 羽島貝塚 */
	margin-top: 21%;
	margin-left: 29%;
}
#m4tab7{ /* 彦崎貝塚 */
	margin-top: 28%;
	margin-left: 34.5%;
}
#m4tab8{ /* 島地貝塚 */
	margin-top: 29%;
	margin-left: 12.5%;
}
#m4tab9{ /* 中津貝塚 */
	margin-top: 32%;
	margin-left: 9%;
}
#m4tab10{ /* 磯の森貝塚 */
	margin-top: 27%;
	margin-left: 30%;
}
#m4tab11{ /* 舟津原貝塚 */
	margin-top: 28%;
	margin-left: 31%;
}
#m4tab12{ /* 阿津走出遺跡 */
	margin-top: 41%;
	margin-left: 30%;
}
#m4tab13{ /* 津島岡大遺跡 */
	margin-top: 9.5%;
	margin-left: 40.5%;
}
#m4tab14{ /* 朝寝鼻貝塚 */
	margin-top: 9%;
	margin-left: 42.3%;
}
#m4tab15{ /* 百間川沢田遺跡 */
	margin-top: 10%;
	margin-left: 49%;
}
#m4tab16{ /* 西岡貝塚 */
	margin-top: 17%;
	margin-left: 25%;
}
#m4tab17{ /* 船倉貝塚 */
	margin-top: 21.3%;
	margin-left: 27.5%;
}


/* 旧石器時代 */
#m5tab1{ /* 鷲羽山遺跡 */
	margin-top: 44.3%;
	margin-left: 31.5%;
}
#m5tab2{ /* 櫃石島遺跡 */
	margin-top: 46%;
	margin-left: 30.2%;
}
#m5tab3{ /* 竪場島遺跡 */
	margin-top: 42.3%;
	margin-left: 35.9%;
}
#m5tab4{ /* 釜島遺跡 */
	margin-top: 46.3%;
	margin-left: 33.1%;
}
/* ------------------------------------------------------------ artifacts -- */


/* -- artifact description ------------------------------------------------- */
.arti-title{
	text-align: left;
	font-size: 30px;
	font-weight: bold;
	padding-bottom: 10px;
}

.arti-subtitle{
	color: grey;
}
.arti-location{
	color: grey;
}
.arti-img{
	position: absolute;
	margin-left: -250px;
}
.arti-img2{
	width: 200px;
	border: 3px #262626 solid;
	margin: 2px 0 2px 0;
	display: block;
}
.arti-img3{
	width: 200px;
	margin-top: 5px;
}
.arti-desc{
	font-size: 16px;
	margin-top: 25px;
}
.arti-link{
	font-size: 14px;
	color: #666666;
	text-align: left;
	margin-top: 20px;
}
.arti-link a, .google-maps a{
	text-decoration: none;
}
.arti-link a:hover{
	text-decoration: underline;
}
.google-maps{
	font-family: Avenir;
	font-size: 14px;
	color: #666666;
	text-align: left;
	margin-top: 10px;
}
/* ------------------------------------------------- artifact description -- */


/* -- scroll top button ---------------------------------------------------- */
.page-top{
	position: relative;
	display: block;
	margin: auto;
	height: 80px;
	margin-bottom: -101px;
	margin-right: 160px;
}
.page-top:hover{
	opacity: 0.8;
	-webkit-animation: page-top 1.5s;
  	animation: page-top 1.5s;
}
@-webkit-keyframes page-top {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(0, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes page-top {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 10px);
  }
  40% {
    transform: translate(0, 0);
  }
}

.page-top-xs{
	position: relative;
	display: block;
	margin: auto;
	height: 80px;
	margin-bottom: -101px;
}
.page-top-xs:hover{
	opacity: 0.8;
	-webkit-animation: page-top 1.5s;
  	animation: page-top 1.5s;
}
/* ---------------------------------------------------- scroll top button -- */


/* -- footer --------------------------------------------------------------- */
footer{
	position: relative;
	background-color: white;
	font-family: Avenir;
	width: 100%;
	margin-top: 100px;
	padding: 8% 0 8% 0;
	color: #ffffff;
	border: 5px #cebd67 solid;
	border-left-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
}

.row{
	margin: 0;
}
/* -- footer-left -- */
.col-xs-11.footer-left{
	margin: 0 20px 30px 10px;
}
.kouko-logo{
	color: #404040;
	font-size: 12px;
	text-align: center;
}

.kouko-logo a img{
	height: 70px;
	margin: 40px 0 10px 0;
}

/* -- footer-center -- */
.col-xs-11.footer-center{
	margin: 50px 20px 10px 10px;
}
.thanks{
	color: #404040;
	font-size: 14px;
}
.thanks-head{
	color: #000;
	font-size: 18px;
	margin-bottom: -10px;
}

/* -- footer-right -- */
.footer-right{
	color: #404040;
	font-size: 12px;
	text-align: right;
}
.col-xs-11.footer-right{
	text-align: left;
	margin: 50px 20px 10px 10px;
}
.geikadai{
	font-size: 14px;
}
.geikadai p br{
	line-height: 2;
}
.copyright{
	color: #404040;
	font-size: 12px;
	text-align: right;
}
/* --------------------------------------------------------------- footer -- */


/* -- IE10 & 11 ------------------------------------------------------------ */
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	html, body{
		background-color: #404040;
	}
	#m0 img[src*=".svg"], 
	#m1 img[src*=".svg"], 
	#m2 img[src*=".svg"], 
	#m3 img[src*=".svg"], 
	#m4 img[src*=".svg"], 
	#m5 img[src*=".svg"], 
	#m6 img[src*=".svg"]{
		width: 100%;
	}
	#m0a img[src*=".svg"]{
		width: 100%;
		opacity: 0.10;
	}
	.content{
	}
	.content--layout{
		float: right;
		background-color: #fff;
		width: 400px;
		line-height: 1.5;
    	margin-right: 2%;
		padding: 0 0 10px 0;
		border: 2px solid #262626;
	}
    .content__img{
    	float: right;
    	display: none;
    }

    .content__desc1,
    .content__desc2,
    .content__desc3,
    .content__desc4,
    .content__desc5,
    .content__desc6 {
    	margin: -20px 0 30px 0;
	}

}
/* ------------------------------------------------------------ IE10 & 11 -- */


/* -- Edge ----------------------------------------------------------------- */
@supports (display:-ms-grid) {
	.content-top{
		height: 1500px;
	}
	.content__desc0, .content__desc0a{
		top: -1200px;
	}
}
/* ----------------------------------------------------------------- Edge -- */