@charset "utf-8";

.container{
	padding-bottom: 100px;
}

.container .main_content:before{
	content:"";
	display:block;
	height:100%;
	width:100%;
	background:#a3e4db;
	position:absolute;
	top: 10px;
	left: 10px;
	border-radius: 20px;
	border:solid 1px #000;
	opacity:1;
	transition:all 0.4s;
}
.container .main_content.sightseeing:before{background:#a3e4db;}
.container .main_content.eat:before{background:#ff9393;}
.container .main_content.experience:before{background:#e4dad0;}
.container .main_content.stay:before{background:#ea9f3b;}
.container .main_content.event:before{background:#BDB4FF;}

.container .main_content .main_wrap{
	border:solid 1px #000;
	border-radius:20px;
	background:#fff;
	z-index:2;
}

.container .left_frame{
	padding-bottom:0;
}

.container .right_frame{
	padding-bottom:0;
}

.main_content h2{
	text-align:center;
}

.main_content h2 span{
	display:inline-block;
	text-align:center;
	font-size:1.52vw;
	border:solid 1px #000;
	border-radius:40px;
	margin:15px auto 0 auto;
	padding:7px 15px;
}

.main_content .category{
	border:solid 1px #000;
	border-left:0;
	position:absolute;
	top:25px;
	left:0;
	font-size:0.97vw;
	padding:5px 15px;
	border-radius:0 20px 20px 0;
}

.main_content.sightseeing .category{background:#a3e4db;}
.main_content.eat .category{background:#ff9393;}
.main_content.history .category{background:#bdb4ff;}
.main_content.experience .category{background:#e4dad0;}
.main_content.stay .category{background:#ea9f3b;}
.main_content.event .category{background:#BDB4FF;}

.main_content .title_en{
	text-align:center;
	font-size:0.97vw;
	margin-top:5px;
}

.single_wrap{
	margin-top:20px;
	padding:0 30px;
}

.slide_area{
	width:100%;
}

.slick-slide img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width:100%;
}

.slick-dots li button:before{
	font-size:0;
	background:#fff;
	border-radius:50%;
	border:solid 1px #000;
	opacity:1;
	width:12px;
	height:12px;
}

.slick-dots li.slick-active button:before{
	background:#ffff00;
}

p.catch_com{
	font-size:1.11vw;
	line-height:1.6;
	padding-top:20px;
}

.explanation_area{
	margin-top:35px;
}

.explanation_area ul:nth-child(1){
	border-top:dotted 1px #000;
}

.explanation_area ul{
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	padding:15px 0;
	border-bottom:dotted 1px #000;
}

.explanation_area ul:nth-child(odd){
	flex-direction: row-reverse;
}

.explanation_area ul li.image_area{
	width:49.35%;
}

.explanation_area ul li.text_area{
	width:46.1%;
}

.explanation_area ul li.text_area h3{
	font-size:1.25vw;
}

.explanation_area ul li.text_area p{
	font-size:1.11vw;
	margin-top:15px;
	line-height:1.6;
}

.info_title{
	text-align:center;
	margin-top:30px;
}

.info_title span{
	display: inline-block;
	text-align: center;
	font-size: 0.9vw;
	border: solid 1px #000;
	border-radius: 40px;
	margin: 15px auto 0 auto;
	padding: 2px 15px;
}

.info_area{
	margin-top:20px;
}

.info_area a{
	text-decoration:underline;
}

.info_area a svg{
	margin-left:10px;
	vertical-align:middle;
}

.info_area a .icon_ta_black{
	fill:none;stroke:#000;stroke-miterlimit:10;
	transition:all 0.4s;
}

.info_area dl{
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
	border-bottom:solid 1px #e1e1e1;
}

.info_area dl:first-child{
	border-top:solid 1px #e1e1e1;
}

.info_area dl dt{
	width:150px;
	padding:15px 0;
}

.info_area dl dd{
	flex:1;
	padding:15px 0;
	font-weight:normal;
}

.map_area{
	margin-top:30px;
}

.map_area iframe{
	width:100%;
}

.item_wrap{
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
}

.single_spot_wrap{
	width:78.47%;
}

.single_spot_area{
	width: 100%;
	height: 100%;
	border-right: solid 1px #000;
	border-top: solid 1px #000;
	padding-bottom: 80px;
	position: relative;
}

.single_spot_area .title{
	margin-top:-25px;
}

.single_sightseeing_wrap{
	width:78.47%;
	float:right;
}

.single_sightseeing_area{
	width: 100%;
	height: 100%;
	border-left: solid 1px #000;
	border-top: solid 1px #000;
	padding-bottom: 50px;
	position: relative;
}

.single_sightseeing_area .title{
	margin-top:-25px;
}

.single_sightseeing_wrap .title:before{background:#a3e4db;}
.single_sightseeing_wrap.sightseeing .title:before{background:#a3e4db;}
.single_sightseeing_wrap.eat .title:before{background:#ff9393;}
.single_sightseeing_wrap.experience .title:before{background:#e4dad0;}
.single_sightseeing_wrap.stay .title:before{background:#ea9f3b;}
.single_sightseeing_wrap.event .title:before{background:#BDB4FF;}


.single_wrap p{
	font-weight:400;
}


@media only screen and (min-width: 1920px) {

}

@media only screen and (min-width: 825px) {

	.container .main_content{
		margin-right:2%;
	}

	.main_content h2 span{
		min-width:400px;
	}

	.item_wrap article:nth-child(n + 4){
		display:none;
	}

	.contents_list_btn_area{
		display:none;
	}

	.info_area a:hover{
		color:#1c6dd0;
	}

	.info_area a:hover .icon_ta_black{
		fill:none;stroke:#1c6dd0;stroke-miterlimit:10;
	}


}

@media (max-width: 825px) {
	.container .main_content.three{
		width:100%;
	  order: 1;
		margin-left:0;
	}

	.container .left_frame{
	  order: 2;
		display:none;
	}
	.right_frame {
	  order: 3;
		display:none;
	}

	.main_content .category{
		font-size:14px;
	}

	.main_content h2 span{
		font-size:22px;
	}

	.main_content .title_en{
		font-size:14px;
	}

	p.catch_com{
		font-size:16px;
	}

	.explanation_area ul li.text_area h3{
		font-size:18px;
	}

	.explanation_area ul li.text_area p{
		font-size:16px;
	}

	.info_title span{
		font-size:13px;
	}

	.single_spot_wrap{
		width:90%;
	}

	.single_sightseeing_wrap{
		width:90%;
		border-bottom:solid 1px #000;
	}

	.single_spot_wrap .item_wrap,
	.single_sightseeing_wrap .item_wrap{
		justify-content: space-between;
		padding: 0 45px;
	}

}
@media (max-width: 600px) {

	.container{
		padding:0 20px;
		margin-bottom: 80px;
		padding-bottom:30px;
	}

	.single_wrap{
		padding:0 20px;
	}

	.main_content .category{
		position:unset;
		width:50%;
		margin:10px auto 0 auto;
		border-radius:20px;
		border:solid 1px #000;
		text-align:center;
	}

	.explanation_area ul{
		display:block;
	}

	.explanation_area ul li.text_area{
		width:100%;
	}

	.explanation_area ul li.image_area{
		width:100%;
		margin-top:20px;
	}

	.info_area dl{
		display:block;
	}

	.info_area dl dt{
		width:100%;
		padding-bottom:0;
	}

	.info_area dl dd{
		padding-top:0;
		margin:10px 0 0 20px;
	}

	.single_spot_wrap{
		width:100%;
		border:0;
		padding:0 50px;
	}

	.single_sightseeing_wrap{
		width:100%;
		border:0;
		padding:0 50px;
	}

	.contents_list_btn_area{
		padding:0 20px;
		margin-top:80px;
		margin-bottom:50px;
	}

	.contents_list_btn_area ul{
		padding:0 10px;
	}

	.single_spot_area{
		border:0;
	}

	.single_sightseeing_area{
		border:0;
	}

	.single_spot_wrap .item_wrap,
	.single_sightseeing_wrap .item_wrap{
		padding:0;
	}

}