@charset "utf-8";


/* --------------------------------------------------- */
/* #guide */
/* --------------------------------------------------- */
#guide .usher + .usher { margin-top: 4.0em; }
#guide .breadcrumbs ul li:last-child *::before { content: attr(data-num)'.'; }
.guideboard { margin-top: 56px;  }
.guideboard .contents { padding-top:56px; }
.guideboard .numtitle {
	position: relative;
	margin-top: -1.5em;
	margin-bottom:2.0em;
}
.guideboard .numtitle h1 {
	position: relative;
	z-index: 2;
	font-family: 'Noto Serif JP', serif;
	font-size: 3.6rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}
.guideboard .numtitle::before {
	content: attr(data-num)'';
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 240px;
	height: 120px;
	background-color: #fff;
	border-radius: 50%;
	font-family: 'Noto Serif JP', serif;
	font-size: 3.6rem;
	line-height: 2.2;
	font-weight: 600;
	text-align: center;
	transform: translate(-50%, -66%);
}
.guideboard .numtitle h1 rt {
	display: none;
}
.guideboard ruby[data-rt] { position: relative; text-align: justify; }
.guideboard ruby[data-rt]::before {
	content: attr(data-rt)'';
	position: absolute;
	left: 50%;
	bottom: 75%;
	font-weight: 400;
	line-height: 1.0;
	text-align: center;
	white-space: nowrap;
	transform: translateX(-50%) scale(0.5);
}

@media screen and (max-width: 767px) {
	.guideboard { margin-top: 42px;  }
	#guide .usher + .usher { margin-top: 10%; }
	.guideboard .numtitle { margin-bottom: 1.5em; }
	.guideboard .numtitle h1,
	.guideboard .numtitle::before { font-size: 3.2rem; }
	.guideboard .numtitle::before {
		width: 180px;
		height: 90px;
		transform: translate(-50%, -75%);
	}
}
@media screen and (max-width: 420px) {
	.guideboard { margin-top: 36px;  }
	.guideboard .numtitle { margin-bottom: 1.0em; }
	.guideboard .numtitle h1,
	.guideboard .numtitle::before { font-size: 2.8rem; }
	.guideboard .numtitle::before {
		width: 160px;
		height: 80px;
		transform: translate(-50%, -75%);
	}
}



.separate { width: 100%; }
@media screen and (max-width: 1060px) {
	.separate { width: 100%; }
}


/* --------------------------------------------------- */
/* .signboard */
/* --------------------------------------------------- */
.signboard {
	position: relative;
	width: 100%;
}

@media screen and (max-width: 1023px) {
	.signboard::before {
		content: '';
		display: block;
		width: 100%;
		padding-top: 640px;
	}
	.signboard > div  figure {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		overflow-x: auto;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
	.signboard > div figure img { width: auto; height: 100%; }
}
@media screen and (max-width: 767px) {
	.signboard::before { padding-top: 480px; }
}
@media screen and (max-width: 420px) {
	.signboard::before { padding-top: 420px; }
}


/* --------------------------------------------------- */
/* .location */
/* --------------------------------------------------- */
.location {
	display: flex;
	gap: 1.5em 3%;
	margin-top: 2.0em;
}
.location h2 {
	margin-bottom: 0.75em;
	border-bottom: 1px solid ;
	font-size: 2.8rem;
	font-weight: 600;
}
.location figure {
	display: block;
	width: 320px; 
	background-image: url('../image/ainu/onmap.png');
	background-repeat: no-repeat; 
	background-size: 100% auto;
	
}
.location .inner { width: 100%; }
.location .inner.onmap { width: calc(97% - 320px); }
.location .history, .location .relay, .location .adapt {
	display: table;
	width: 100%;
	margin-bottom: 0.75em;
}
.location .history > *, .location .adapt > * { margin-left : 4.5em; }
.location .relay > * { margin-left : 9.5em;  }
.location a { text-decoration: underline; }
.location .history::before {
	content: '時代';
	display: inline-block;
	padding: 0 0.75em;
	background-color: #1f233f;
	border: 1px solid;
	color: #fff;
	font-weight: 500;
	line-height: 1.8;
	float: left;
}
.location .relay::before {
	content: '関連のある場所';
	display: inline-block;
	padding: 0 0.75em;
	background-color: #1f233f;
	border: 1px solid;
	color: #fff;
	font-weight: 500;
	line-height: 1.8;
	float: left;
}
.location .adapt::before {
	content: '関連';
	display: inline-block;
	padding: 0 0.75em;
	border: 1px solid;
	font-weight: 500;
	line-height: 1.8;
	float: left;
}

@media screen and (max-width: 960px) {
	.location figure { width: 240px;  }
	.location .inner.onmap { width: calc(97% - 240px); }
}
@media screen and (max-width: 767px) {
	.location {
		flex-direction: column;
		gap: 1.5em 0;
		margin-top: 2.0em;
	}
	.location figure { margin: 0 auto;  width: 240px;  }
	.location .inner.onmap { width: 100%; }
	.location h2 { font-size: 2.4rem; }
}
@media screen and (max-width: 640px) {
	.location .history, .location .relay, .location .adapt {
		display: table;
		width: 100%;
		margin-bottom: 1.25em;
	}
	.location .history::before,
	.location .relay::before,
	.location .adapt::before { margin-bottom: 0.3em; float: none; }
	.location .history > *,
	.location .adapt > *,
	.location .relay > * { margin-left : 0;  }

}
@media screen and (max-width: 420px) {
	.location {
		flex-direction: column;
		gap: 1.0em 0;
		margin-top: 2.0em;
	}
	.location h2 { font-size: 2.0rem; }
}


/* --------------------------------------------------- */
/* .spot */
/* --------------------------------------------------- */
.spot {
	margin-top: 3.0em;
	display: flex;
	width: 100%;
	min-height: 560px;
	border: 1px solid;
}
.spot .gmap { position: relative; width: 50%;}
.spot .gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.spot .nearby {
	position: relative;
	width: 50%;
	border-left: 1px solid;
}
.spot .nearby::before {
	content: attr(data-label)'';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 128px;
	background-color: #1f233f;
	color: #fff;
	text-align: center;
}
.spot .nearby .btn-gmap {
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	width: 128px;
}
.spot .nearby .btn-gmap a {
	display: block;
	background-color: #95100a;
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
}
.spot .nearby .btn-gmap span{
	padding-right: 1.4em;
	background-image: url('../image/common/marker.png');
	background-repeat: no-repeat;
	background-position: 100% 75%;
	background-size: auto 80%;
}
.spot .nearby .inner {
	margin: 0 auto;
	padding: 12% 0;
	width: 90%;
}
.spot .nearby figure {
	margin: 1.0em 0;
	border: 1px solid;
}
.spot .nearby address {
	margin: 1.0em 0;
	padding-bottom: 1.0em;
	border-bottom: 1px solid #b5b3ae;
}
.spot .nearby address + p {
	font-size: 1.4rem;
	font-weight: 400;
}

@media screen and (max-width: 767px) {
	.spot {
		flex-direction: column-reverse;
		min-height: initial;
	}
	.spot .gmap { position: relative; width: 100%;}
	.spot .gmap::before { content:''; display: block; width: 100%; padding-top: 75%; }
	.spot .nearby {
		position: relative;
		width: 100%;
		border-left: none;
		border-bottom: 1px solid;
	}

}
@media screen and (max-width: 420px) {
	.spot .gmap::before { padding-top: 100%; }
	.spot .nearby .inner {
		padding: 15% 0;
		width: 92%;
	}
}


/* --------------------------------------------------- */
/* .knowledge */
/* --------------------------------------------------- */
.knowledge {
	margin: 0 auto;
	max-width: 960px;
}
.knowledge .inner {
	margin: 0 auto 5.0em;
	max-width: 780px;
}
.knowledge .inner:last-child {
	margin: 0 auto 2.0em;
}
.knowledge h3 {
	margin-bottom: 1.0em;
	padding-left: 1.0em;
	text-indent: -1.0em;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.4;
}
.knowledge h4 {
	margin-top: 2.0em;
	color: #95100a;
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1.4;
}
.knowledge h3::before {
	content: attr(data-head)'';
	color: #95100a;
}
.knowledge .phdata { margin-top: 1.5em; }
.knowledge .phdata + p  { margin-top: 2.0em; }
.knowledge  p +  h3 { margin-top: 2.0em; }
.knowledge .phdata .panoramic { position: relative; }
.knowledge .phdata .panoramic::before {
	content: '';
	display: block;
	width: 100%;
	padding-top: 480px;
}
.knowledge .phdata .panoramic figure {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow-x: auto;
}
.knowledge .phdata .panoramic figure img { width: auto; height: 100%; }
.knowledge .ainu-lang {
	display: flex;
	flex-wrap: wrap;
	gap: 3.0em 6%;
}
.knowledge .ainu-lang > div { width: 47.0%; }
.knowledge .ainu-lang h4 {
	color: #95100a;
	font-family: 'Noto Serif JP', serif;
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1.4;
}
.knowledge .ainu-lang h4::before { content: attr(data-num)'.'; }

.knowledge .ainu-lang p { font-size: 1.6rem; }
.knowledge .ainu-lang p:nth-child(3) {
	margin-top: 0.75em;
	padding-top: 0.75em;
	border-top: 1px solid;
	font-weight: 600;
}
.knowledge .spdisp { display: none; }

@media screen and (max-width: 939px) {
	.knowledge .spdisp { display: inline; }
}
@media screen and (max-width: 767px) {
	.knowledge h3 { font-size: 2.1rem; }
	.knowledge .phdata .panoramic::before { padding-top: 70%; }
	.knowledge .ainu-lang {
		display: flex;
		flex-wrap: wrap;
		gap: 2.5em 0;
	}
	.knowledge .ainu-lang > div { width: 100.0%; }
}
@media screen and (max-width: 420px) {
	.knowledge h3 { font-size: 1.8rem; }
	.knowledge .phdata .panoramic::before { padding-top: 100%; }
	.knowledge .ainu-lang h4 { font-size: 1.8rem; }
}


/* --------------------------------------------------- */
/* .folklore */
/* --------------------------------------------------- */
.folklore {
	margin: -72px auto 0;
	padding: 8% 5%;
	max-width: 960px;
	background-image: url('../image/ainu/folklore.jpg');
	background-size: cover;
	background-position: 50% 50%;
	box-sizing: border-box;
}
.folklore .inner {
	margin: 0 auto;
	max-width: 780px;
}
.folklore h3 {
	margin-bottom: 1.0em;
	padding-left: 1.0em;
	text-indent: -1.0em;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.4;
}
.folklore h3::before {
	content: attr(data-head)'';
	color: #95100a;
}
.folklore .phdata { margin-top: 1.5em; }
.folklore .phdata + p  { margin-top: 2.0em; }
.folklore  p +  h3 { margin-top: 2.0em; }
.folklore p + p  { margin-top: 1.5em; }
.folklore + .knowledge { margin-top: 4.0em; }

@media screen and (max-width: 1060px) {
	.folklore {
		margin: -7.5% auto 0;
		padding: 8% 5%;
	}
}
@media screen and (max-width: 767px) {
	.folklore {
		margin: -10.75% auto 0;
		padding: 8% 4%;
	}
	.folklore h3 { font-size: 2.1rem; }
	.folklore + .knowledge { margin-top: 15%; }
}
@media screen and (max-width: 420px) {
	.folklore {
		margin: -11.75% auto 0;
		padding: 8% 5%;
	}
	.folklore h3 { font-size: 1.8rem; }
}


/* --------------------------------------------------- */
/* .addition */
/* --------------------------------------------------- */
.addition {
	position: relative;
	margin: 4.0em auto 0;
	padding: 5.0em 0 3.0em;
	max-width: 960px;
	border: 10px solid #95100a;
	border-radius: 0 32px 32px 32px;
}
.addition::before {
	content: 'もうちょっと解説';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 360px;
	background-color: #95100a;
	border-radius: 0 180px 180px 0;
	box-sizing: border-box;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 2.2;
	text-indent: 1.0em;
}
.addition .inner {
	margin: 0 auto;
	width: 90%;
	max-width: 780px;
}
.addition h3 {
	margin-bottom: 1.0em;
	padding-left: 1.0em;
	text-indent: -1.0em;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.4;
}
.addition h3::before {
	content: attr(data-head)'';
	color: #95100a;
}
.addition * + h3 {
	margin-top: 2.0em;
}
.addition .phdata { margin-top: 1.5em; }

@media screen and (max-width: 767px) {
	.addition {
		margin: 0 auto 5.0em;
		padding: 4.0em 0 2.0em;
		border: 7px solid #95100a;
		border-radius: 0 24px 24px 24px;
	}
	.addition::before {
		width: 280px;
		font-size: 2.1rem;
	}
	.addition h3 { font-size: 2.1rem; }
}
@media screen and (max-width: 420px) {
	.addition {
		margin: 0 auto 5.0em;
		padding: 4.0em 0 2.0em;
		border: 5px solid #95100a;
		border-radius: 0 18px 18px 18px;
	}
	.addition::before {
		width: 210px;
		font-size: 1.8rem;
	}
	.addition h3 { font-size: 1.8rem; }
}


/* --------------------------------------------------- */
/* .explanation */
/* --------------------------------------------------- */
.explanation {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 3.0em 5%;
	max-width: 780px;
	border: 10px solid #95100a;
	border-radius: 32px;
	box-sizing: border-box;
	background-color: #fff;
}
.explanation::before {
	content: '解説';
	display: block;
	width: 196px;
	background-color: #95100a;
	border-radius: 0 180px 180px 0;
	box-sizing: border-box;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 2.2;
	text-indent: 1.0em;
}
.explanation p { margin-top: 2.0em; }
.explanation:last-child { margin-bottom: 0; }

@media screen and (max-width: 767px) {
	.explanation {
		padding: 8% 5%;
		border: 7px solid #95100a;
		border-radius: 24px;
	}
	.explanation::before {
		width: 180px;
		font-size: 2.1rem;
	}
	.explanation p { margin-top: 1.5em; }
}
@media screen and (max-width: 420px) {
	.explanation {
		padding: 6% 4%;
		border: 5px solid #95100a;
		border-radius: 18px;
	}
	.explanation::before { font-size: 1.8rem; }
	.explanation p { margin-top: 1.0em; }
}


/* --------------------------------------------------- */
/* .tbl */
/* --------------------------------------------------- */
.knowledge .tbl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 3%;
}
.knowledge .tbl dt {
	padding: 0.8em 0;
	width: 144px;
	border-bottom: 1px solid #95100a;
}
.knowledge .tbl dd {
	padding: 0.8em 0;
	width: calc(97% - 144px);
	border-bottom: 1px solid #1f233f;
}
.knowledge .tbl dt h4,
.knowledge .tbl dd p {
	margin: 0;
	font-size: 2.0rem;
	font-weight: 500;
}

@media screen and (max-width: 767px) {
	.knowledge .tbl dt h4, .knowledge .tbl dd p { font-size: 1.8rem; }
}
@media screen and (max-width: 640px) {
	.knowledge .tbl {
		flex-direction: column;
		gap: 0;
	}
	.knowledge .tbl dt {
		padding: 0.8em 0;
		width: 100%;
	}
	.knowledge .tbl dd {
		padding: 0.8em 0;
		width: 100%;
	}
	.knowledge .tbl dd + dt { margin-top: 4%; }
}
@media screen and (max-width: 420px) {
	.knowledge .tbl dt h4, .knowledge .tbl dd p { font-size: 1.6rem; }

}




/* --------------------------------------------------- */
/* BasicBreakPoint */
/* --------------------------------------------------- */
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 420px) {
}