@charset "utf-8";


/* --------------------------------------------------- */
/* .columns */
/* --------------------------------------------------- */
.columns {
	margin: 0 auto;
	width: 90%;
	max-width: 960px;
}
.columns ul {
	display: flex;
	flex-wrap: wrap;
	gap: 3.0em 3.5%;
	font-size: 1.6rem;
}
.columns ul li { width: 31%; }

.columns h3 {
	margin-top: 0.75em;
	font-family: 'Noto Serif JP', serif;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.4;
}
.columns .numlist h3::before { content: attr(data-num)'.'; }



@media screen and (min-width: 961px) {
	.columns.museum ul { gap: 3.0em 5%; }
	.columns.museum ul li { width: 47.5%; }
}
@media screen and (max-width: 960px) {
	.columns ul { gap: 3.0em 5%; }
	.columns ul li { width: 47.5%; }
}
@media screen and (max-width: 767px) {
	.columns h3 { font-size: 2.1rem; }
}
@media screen and (max-width: 640px) {
	.columns ul { gap: 3.0em 0; }
	.columns ul li { width: 100%; }
}
@media screen and (max-width: 420px) {
	.columns h3 { font-size: 1.8rem; }
}



/* --------------------------------------------------- */
/* #pinmap */
/* --------------------------------------------------- */
#pinmap .contents {
	margin: 0 auto;
	width: 90%;
	max-width: 960px;
}
#pinmap ul {
	display: flex;
	margin-top: 1.0em;
	font-size: 1.6rem;
} 
#pinmap ul li {
	width: 20%;
	text-align: center;
}
#pinmap ul li a {
	display: block;
	height: 36px;
	color: #fff;
	font-weight: 500;
	line-height: 36px;
}
#pinmap ul li a:hover { opacity: 0.5; }
#pinmap a.tab1 { background-color: #1f233f; }
#pinmap a.tab2 { background-color: #e3007f; }
#pinmap a.tab3 { background-color: #1eaa39; }
#pinmap a.tab4 { background-color: #e95504; }
#pinmap a.tab5 { background-color: #95100a; }
 #pinmap #yakumomap { padding: 3px; box-sizing: border-box; }
.type1.type2.type3  #pinmap #yakumomap { background-color: #1f233f; }
.type1  #pinmap #yakumomap { background-color: #e3007f; }
.type2  #pinmap #yakumomap { background-color: #1eaa39; }
.type3  #pinmap #yakumomap { background-color: #e95504; }
.type4  #pinmap #yakumomap { background-color: #95100a; }
#pointmap #signboard,
#pointmap #legend,
#pointmap #museum { opacity: 0.0; transition: all .5s; }
.type1 #pointmap #signboard,
.type2 #pointmap #legend,
.type3  #pointmap #museum { opacity: 1.0;  }
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
	#pinmap #yakumomap {
		height: 426px;
	}
	#pinmap #yakumomap figure {
		width: 100%;
		height: 420px;
		overflow-x: scroll;
	}
	#pinmap #yakumomap figure svg,
	#pinmap #yakumomap figure img { width: 594px; height: 420px; }
	
	#pinmap ul li a span { display: none; }
	#pinmap ul li a {
		display: block;
		height: 42px;
		background-repeat: no-repeat;
		background-size: auto 32px;
		background-position: 50% 50%;
	}
	#pinmap ul li a.tab1 { background-image: url('../image/ainu/icon01.png'); }
	#pinmap ul li a.tab2 { background-image: url('../image/ainu/icon02.png'); }
	#pinmap ul li a.tab3 { background-image: url('../image/ainu/icon03.png'); }
	#pinmap ul li a.tab4 { background-image: url('../image/ainu/icon04.png'); }
	#pinmap ul li a.tab5 { background-image: url('../image/ainu/icon05.png'); }
}
@media screen and (max-width: 420px) {
	#pinmap ul li a {
		height: 36px;
		background-size: auto 28px;
	}
}


/* --------------------------------------------------- */
/* .guidepoint */
/* --------------------------------------------------- */
.guidepoint {
	margin: 2.0em auto;
	width: 90%;
	max-width: 960px;
	border-top: 5px solid;
	border-bottom: 5px solid;
	background-color: #fff;
	box-sizing: border-box;
}
.guidepoint .contents {
	margin: 0 auto;
	padding: 3% 0;
	width: 94%;
}
.guidepoint h2 {
	position: relative;
	padding-left: 2.0em;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.4;
}
.guidepoint h2::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 1.6em;
	height: 1.6em;
	background-color: #ddd;
	background-size: 90% auto;
	background-position: 50% 50%;
	transform: translateY(-50%);
}
.guidepoint ul {
	display: flex;
	margin-top: 2%;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 1.8rem;
	line-height: 1.4;
}
.guidepoint ul li {
	display: block;
	position: relative;
	padding: 0.5em 0 0.5em 1.75em;
	width: 48%;
	border-bottom: 1px solid;
	box-sizing: border-box;
}
.guidepoint ul li a { font-weight: 500; }
.guidepoint a:hover { opacity: 0.5; }
.guidepoint ul li a::before {
	content: attr(data-num)'';
	position: absolute;
	top: 0.7em;
	left: 0;
	display: block;
	width: 1.6em;
	height: 1.6em;
	border: 2px solid;
	border-radius: 50%;
	font-size: 75%;
	font-weight: 500; 
	line-height: 1.6em;
	letter-spacing: -0.05em;
	text-align: center;
}
#signboard.guidepoint,
#signboard.guidepoint ul li { border-color: #e3007f; }
#signboard.guidepoint h2,
#signboard.guidepoint ul li a { color: #e3007f; }
#signboard.guidepoint h2::before { background-image: url('../image/ainu/icon02.png'); background-color: #e3007f;}
#legend.guidepoint,
#legend.guidepoint ul li { border-color: #1eaa39; }
#legend.guidepoint h2,
#legend.guidepoint ul li a { color: #1eaa39; }
#legend.guidepoint h2::before { background-image: url('../image/ainu/icon03.png'); background-color: #1eaa39;}
#museum.guidepoint,
#museum.guidepoint ul li { border-color: #e95504; }
#museum.guidepoint h2,
#museum.guidepoint ul li a { color: #e95504; }
#museum.guidepoint h2::before { background-image: url('../image/ainu/icon04.png'); background-color: #e95504;}
#placename.guidepoint,
#placename.guidepoint ul li { border-color: #007bc6; }
#placename.guidepoint h2,
#placename.guidepoint ul li a { color: #007bc6; }
#placename.guidepoint h2::before { background-image: url('../image/ainu/icon06.png'); background-color: #007bc6;}


@media screen and (max-width: 767px) {
	.guidepoint .contents {
		padding: 4% 0;
		width: 92%;
	}
	.guidepoint h2 {
		padding-left: 2.0em;
		font-size: 2.1rem;
	}
	.guidepoint ul { font-size: 1.6rem; }
	.guidepoint ul li a::before {
		top: 0.6em;
		font-size: 80%;
	}
}
@media screen and (max-width: 640px) {
	.guidepoint ul li {
		padding: 0.7em 0 0.7em 1.75em;
		width: 100%;
	}
	.guidepoint ul li a::before {
		top: 0.85em;
	}
}
@media screen and (max-width: 420px) {
	.guidepoint .contents {
		padding: 6% 0;
	}
}



/* --------------------------------------------------- */
/* #edoera */
/* --------------------------------------------------- */
#edoera {
	margin: 0 auto;
	width: 90%;
	max-width: 780px;
}
#edoera h2 {
	padding: 0 0 0.5em 1.0em;
	text-indent: -1.0em;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.4;
}
#edoera h2::before {
	content: '';
	display: inline-block;
	margin: 0.2em 0.2em 0 0;
	width: 0.8em;
	height: 0.8em;
	background-color: #95100a;
	border-radius: 50%;
}



/* --------------------------------------------------- */
/* #landmap */
/* --------------------------------------------------- */
#landmap {
	margin: 0 auto;
	width: 90%;
	max-width: 960px;
}
#landmap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 1.6rem;
}
#landmap ul li {
	margin-top: 4.0em;
	width: 47.5%;
	
}
#landmap h3 {
	margin-top: 0.75em;
	font-family: 'Noto Serif JP', serif;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.4;
}
#landmap h3::before { content: attr(data-num)'.'; }

@media screen and (max-width: 767px) {
	#landmap h3 { font-size: 2.1rem; }
}
@media screen and (max-width: 640px) {
	#landmap ul li {
		margin-top: 15%;
		width: 100%;
	}
}
@media screen and (max-width: 420px) {
}



/* --------------------------------------------------- */
/* show / hide */
/* --------------------------------------------------- */
#signboard { display: none; }
.type1 #signboard { display: block; }
#legend { display: none; }
.type2 #legend { display: block; }
#museum { display: none; }
.type3 #museum { display: block; }
#edoera { display: none; }
.type4 #edoera { display: block; }
#placename { display: none; }
.type1.type2.type3 #placename { display: block; }
#yakumomap #pointmap,
#yakumomap #edomap { display: none; }
.type1 #yakumomap #pointmap,
.type2 #yakumomap #pointmap,
.type3 #yakumomap #pointmap { display: block; }
.type4 #yakumomap #edomap { display: block; }



/* --------------------------------------------------- */
/* #pinmap */
/* --------------------------------------------------- */
#pinmap #placemap { 
	margin-top: 1.0em;
	padding: 3px;
	box-sizing: border-box;
	background-color: #007bc6;
}
.type5 #placename { display: block; }
.footnote {
	margin: 0 auto;
	width: 90%;
	max-width: 960px;
}
@media screen and (max-width: 640px) {
	#pinmap #placemap { height: 426px; }
	#pinmap #placemap figure {
		width: 100%;
		height: 420px;
		overflow-x: scroll;
	}
	#pinmap #placemap figure svg,
	#pinmap #placemap figure img { width: 594px; height: 420px; }
}




/* --------------------------------------------------- */
/* #submode */
/* --------------------------------------------------- */
#submode {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.70);
	z-index: 8888;
}
#submode .btn-close {
	position: absolute;
	top: 2%;
	right: 2%;
}
#submode .btn-close a {
	display: block;
	width: 36px;
	height: 36px;
}
#submode .btn-close a::before,
#submode .btn-close a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
}
#submode .btn-close a::before { transform: rotate(45deg); }
#submode .btn-close a::after { transform: rotate(-45deg); }
#submode .modal {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84%;
	max-width: 480px;
	padding: 32px 36px;
	background-color: #fff;
	border-radius: 48px;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}
#submode .modal > div { display: none; }
#submode .modal > div.dispon { display: block; }



/* --------------------------------------------------- */
/* .modal > */
/* --------------------------------------------------- */
#submode .modal > div {
	padding-bottom: 0.75em;
	border-bottom: 1px solid #1f233f;
	text-align: center;
}
#submode .modal h3 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 240px;
	background-color: #fff;
	border-radius: 50%;
	color: #007bc6;
	font-family: 'Noto Serif JP', serif;
	font-size: 4.2rem;
	font-weight:600;
	line-height: 1.8em;
	transform: translate(-50%, -45%);
}
#submode .modal h2 {
	position: relative;
	margin-bottom: 0.6em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid #1f233f;
	color: #007bc6;
	font-family: 'Noto Serif JP', serif;
	font-size: 2.4rem;
	font-weight:600;
	line-height: 1.4em;
	z-index:2;
}
#submode .modal h4 {
	margin-top: 1.5em;
	margin-bottom: 0.6em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid #1f233f;
	color: #007bc6;
	font-size: 2.1rem;
	font-weight:600;
	line-height: 1.4em;
}

@media screen and (max-width: 560px) {
	#submode .modal {
		position: absolute;
		width: 90%;
		padding: 7% 5% 5%;
		border-radius: 24px;
	}
	#submode .modal > div {
		padding-bottom: 0.6em;
	}
	#submode .modal h3 {
		width: 160px;
		font-size: 3.2rem;
	}
	#submode .modal h2 {
		margin-bottom: 0.6em;
		padding-bottom: 0.6em;
		font-size: 2.1rem;
	}
	#submode .modal h4 {
		font-size: 1.8rem;
	}

}