@charset "UTF-8";

/* ++++++++++++++++++++++++++++++
support page
++++++++++++++++++++++++++++++ */
#hokkaidoMAP {
	background: #fff;
	position: relative;
	border-bottom: 1px solid #e6e6e6;
}
#mapList li { position: absolute; }
#mapList li a {
	color: #231815;
	display: block;
	font-family: "Noto Sans JP", sans-serif;
}
#mapList li.leftText a::after,
#mapList li.rightText a::before {
	content: "";
	display: inline-block;
	background: #8246aa;
	border-radius: 50%;
	vertical-align: middle;
}
#supportList > li { border-bottom: 1px solid #e6e6e6; }
#supportList .slide .slick-dots {
	display: flex;
	line-height: 0;
}
#supportList .slide .slick-dots button {
	height: 0;
	padding: 0;
	border: none;
	overflow: hidden;
	border-radius: 50%;
	background: #c8c8c8;
}
#supportList .slide .slick-dots .slick-active button { background: #9933cc; }
#supportList figcaption { color: #6633cc; }
#supportList figcaption .title-en {
	color: #505050;
	font-family: "Noto Sans JP", sans-serif;
}
#supportList .supportTitle { color: #6633cc; }
#supportList .info a { text-decoration: underline; }
#supportList .link a {
	display: block;
	color: #6633cc;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid #6633cc;
	font-family: "Noto Sans JP", sans-serif;
}
#supportList .tags { font-family: "Noto Sans JP", sans-serif; }
@media screen and (min-width:769px), print{
	#mainHeader { padding-bottom: 345px; }
	#lowerBox {
		margin-top: -254px;
		padding-bottom: 400px;
	}
	#hokkaidoMAP {
		padding: 100px 100px 100px 70px;
		border-top-right-radius: 20px;
	}
	#mapList li a {
		font-size: 12px;
		line-height: 24px;
		position: relative;
	}
	#mapList li.leftText a::after,
	#mapList li.rightText a::before {
		width: 12px;
		height: 12px;
		margin-top: -0.1em;
	}
	#mapList li.leftText a::after { margin-left: 0.2em }
	#mapList li.rightText a::before { margin-right: 0.2em }
	#mapList li.leftText a::before,
	#mapList li.rightText a::after {
		top: 100%;
		left: 0;
		width: 0;
		height: 1px;
		content: "";
		display: block;
		position: absolute;
		background-color: #000;
		transition-duration: .3s;
		transition-property: width;
	}
	#mapList li.leftText a:hover::before,
	#mapList li.rightText a:hover::after { width: 100%; }
	#map01 { top: 19.9%; left: 23.3%; }
	#map02 { top: 27%; left: 28%; }
	#map03 { top: 16.2%; left: 27.2%; }
	#map04 { top: 25%; left: 34%; }
	#map05 { top: 21.6%; left: 33.8%; }
	#map06 { top: 52.1%; left: 17.7%; }
	#map07 { top: 40.9%; left: 34.5%; }
	#map08 { top: 59.2%; left: 26.3%; }
	#map09 { top: 64.6%; left: 21.3%; }
	#map10 { top: 60%; right: 82.6%; }
	#map11 { top: 77.5%; left: 16.6%; }
	#map12 { top: 78.6%; right: 83.7%; }
	#map13 { top: 51.7%; left: 60.8%; }
	#hokkaidoMAP .text {
		right: 100px;
		bottom: 70px;
		position: absolute;
	}

	#supportList > li {
		display: flex;
		padding: 100px 0 90px;
	}
	#supportList > li > figure {
		width: 340px;
		min-width: 340px;
		margin-right: 50px;
	}
	#supportList .slide .slick-dots {
		margin-top: 10px;
		justify-content: flex-end;
	}
	#supportList .slide .slick-dots li { margin-left: 10px; }
	#supportList .slide .slick-dots button {
		width: 7px;
		padding-top: 7px;
	}
	#supportList figcaption { font-size: 18px; }
	#supportList figcaption .title-en { font-size: 12px; }
	#supportList .info { margin-top: -0.7em }
	#supportList .supportTitle {
		font-size: 18px;
		line-height: 35px;
	}
	#supportList .mainText { margin-top: 16px; }
	#supportList .info dl { margin-top: 35px; }
	#supportList .info dd + dt { margin-top: 15px; }
	#supportList .link { margin-top: 25px; }
	#supportList .link + .link { margin-top: 10px; }
	#supportList .link a {
		width: 340px;
		padding: 4px 13px 6px;
	}
	#supportList .link a:hover {
		color: #fff;
		background: #6633cc;
	}
	#supportList .tags { margin-top: 25px; }
}
@media screen and (max-width:768px){
	#mainTitle { height: auto; }
	#mainHeader #pageInfo { padding-bottom: 40px; }
	#lowerBox {
		overflow: hidden;
		margin-top: -25px;
	}
	#hokkaidoMAP {
		background: none;
		border-bottom: none;
		margin: 0 -34vw 0 -5vw;
	}
	#hokkaidoMAP .text {
		font-size: 10.5px;
		text-align: right;
		margin: 0 34vw 0 5vw;
	}
	#mapList li a { font-size: 7px; }
	#mapList li.leftText a::after,
	#mapList li.rightText a::before {
		width: 7px;
		height: 7px;
		margin-top: -3px;
	}
	#map01 { top: 7.3%; left: 19.3%; }
	#map02 { top: 18%; left: 25%; }
	#map03 { top: 2.3%; left: 24.1%; }
	#map04 { top: 14%; left: 32%; }
	#map05 { top: 9.7%; left: 32%; }
	#map06 { top: 49.1%; left: 12.7%; }
	#map07 { top: 35.9%; left: 33%; }
	#map08 { top: 59.2%; left: 23.3%; }
	#map09 { top: 66.6%; left: 16.7%; }
	#map10 { top: 61%; right: 88.6%; }
	#map11 { top: 84%; left: 10.6%; }
	#map12 { top: 85.6%; right: 89.7%; }
	#map13 { top: 48.9%; left: 64.4%; }
	#supportList {
		& > li { padding-bottom:67px; }
		& > li + li { padding-top: 75px; }
		margin-top: 145px;
		.slide { padding-inline: 37.5px; }
		.slide .slick-dots {
			padding: 7px 0;
			justify-content: flex-end;
			button {
				width: 3.5px;
				margin-left: 5px;
				padding-top: 3.5px;
			}
		}
		figcaption {
			font-size: 15px;
			margin-top: 28px;
			.title-en {
				font-size: 10.5px;
				margin-left: 0.5em;
			}
		}
		.supportTitle { margin-top: 12px; }
		.supportTitle ~ * { font-size: 12px; }
		.mainText { margin-top: 15px; }
		.info dl { margin-top: 40px; }
		.info .link {
			margin-top: 20px;
			a { padding: 4px 11px 5px; }
		}
		.tags { margin-top: 20px; }
	}
}