@charset "UTF-8";
/* CSS Document */

html,body{
	margin: 0;
	padding: 0;
	font-family: "Kosugi Maru", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#666666;
	background-color: #02A6E2;
}
*{
	box-sizing: border-box;
}
ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.inner{
	max-width: 500px;
	margin: 0 auto;
}
img{
	max-width: 100%;
	user-select: none;
}

#head{
	background-color: #02A6E2;
	background-image: url("img/bg_blue@2x-8.png");
	background-size: contain;
	background-position: center;
}
#head .inner{
	background-color: #02A6E2;
	padding-bottom:10%;
}
#footer{
	background-color: #02A6E2;
}
#main{
	background-image: url("img/bg_white@2x-8.png");
	background-size: contain;
	background-position: center;
	height:auto;
}
#main .inner{
	background-color: #f6f5fa;
	padding-bottom:10%;
	position:relative;
}
#main a{
	position:absolute;
	top: 47.4%;
	left: 22%;
	display:block;
	width: 58%;
	/*background-color:#00ffff69;*/
	padding-top: 47%;
	font-size:  80%;
	text-decoration: none;
	text-align: center;
	color: #03a7e3;
}
#main a.pdf-link{
	position:absolute;
	top: 61.5%; /* 画像リンクより下に配置 */
	left: 22%;
	display:block;
	width: 60%;
	padding: 10px 0; /* padding-topを通常のpaddingに変更 */
	font-size: 90%;
	text-decoration: none;
	text-align: center;
	color: #03a7e3;
	border-radius: 5px;
}

@media screen and (min-width:500px){
	#main .inner{
		height: 1863px;
	}
}
#list{
	background-color:#E1EBA8;
	background-image: url("img/bg_green@2x-8.png");
	background-size: contain;
	background-position: center;
}
#list .inner{
	background-color:#E1EBA8;
	padding-bottom:10%;
}
#list ul{
	padding: 0 10%;
}
#list li{
	margin: 0 0 3%;
	padding: 0;
}
i {
	display: block;
	width: 100%;
	padding: 0 10%;
}
#head dl{
	width: 80%;
	margin: 10% auto 13%;
	display: flex;
	justify-content: space-around;
}
#head dt{
	width: 25%;
}
.spot{
	background-image: url("img/bg_white@2x-8.png");
	background-size: contain;
	background-position: center;
	position: fixed;
	top:0;
	height: auto;
	display:none;
	width: 100%;
	overflow-y: scroll;
	height:100%;
}
.spot.sp_active{
	display:block;
}


.spot .inner{
	background-color: #f1f1f9;
	padding-bottom:0;
}
.spot .inner:before,
.spot .inner:after{
	content:"";
	display:block;
	width:100%;
	height:15px;
	background-image: url("img/ico_line.png");
	background-repeat: no-repeat;
	background-size:cover;
}
.back{
	padding: 20px 3% 0;
}
.back img{
	width:auto;
	height:45px;
}
.spot h2{
	margin: 10% 0;
}
.taglist{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
	padding: 0 4%;
	box-sizing: border-box;
	margin-bottom: 10%;
}
.taglist li{
	width: 23%;
	margin-bottom: 6px;
}
.spot p{
	padding:0 5%;
	line-height:1.7;
	font-size:16px;
	margin-bottom:10%;
}
p.smalltext{
	font-size:90%;
	color:#d23d3d;
}
.quiz{
	border:3px solid #03a7e3;
	border-radius:5px;
	background-color:#f0fcff;
	margin:0 5% 10%;
	padding:3%;
}
.quiz h3{
	margin:0;
	color:#ff0000;
	border-bottom:3px solid #03a7e3;
	padding:0 3% 3%;
	text-align:center;
	line-height:1.3;
	font-size:80%;
	font-weight:normal;
}
.quiz h4{
	margin:5% 0;
	color:#03a7e3;
	text-align:center;
	font-size:140%;
}
.quiz p{
	margin:0;
	font-size:90%;
	text-align:center;
	padding: 0;
}
.quiz p span{
	font-size:90%;
}
.info{
	padding:0 5% 0 8%;
	display:flex;
	flex-wrap:wrap;
	line-height:1.5;
	margin-bottom:10%;
	font-size:88%;
}
.info dt{
	flex-basis: 4em;
	margin:0 0 3%;
}
.info dd{
	flex-basis: calc(100% - 4em);
	margin:0 0 3%;
	padding:0 0 0 1.5em;
}
.info dd:before{
	content:"|";
	color:#03a7e3;
	font-weight:bold;
	margin:0 0.5em 0 -1em;
}
.snslist{
	display:flex;
	justify-content: space-evenly;
	padding: 0 3%;
	margin-bottom: 10%;
}
.snslist li{
	width: 14%;
	max-width: 57px;
}
.mapbtn{
	margin: 0 auto 10%;
	width: 70%;
}
iframe{
	width: 97%;
	aspect-ratio: 4/3;
	border:none;
	margin: 0 auto 5%;
	display: block;
}