@charset "utf-8";
/* ===================================================
	Sightseeing CSS
====================================================== */

#main_img::before { background: rgba(0, 0, 0, 0.2); }

/* ---------------------------------------------------
	cnav
------------------------------------------------------ */
#cnav { padding: 80px 0; background: var(--color04); color: #fff; }
#cnav::before { height: 100%; }
#cnav ul { display: flex; flex-wrap: wrap; gap: 40px 30px; }
#cnav ul li { width: calc((100% - 90px) / 4); }
#cnav a { display: block; color: #fff; text-align: center; font-size: 20px; padding:0 10px 15px; border-bottom: 1px solid #898989; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
	#cnav::before { background-position: bottom -545px left; }
}
@media screen and (max-width: 600px) {
	#cnav { padding: 35px 0; }
	#cnav ul { gap: 20px; }
	#cnav ul li { width: calc((100% - 20px) / 2); }
	#cnav a { font-size: 12px; padding:0 5px 10px; height: 100%; align-content: center; }
	#cnav a span { font-size: 16px; }
}


/* ---------------------------------------------------
	共通 - spot
------------------------------------------------------ */
section[id^=sec] { padding: 120px 0; }
section[id^=sec]:last-child { margin-bottom: 25px; }
section[id^=sec]:nth-child(2n) { background: url(../img/bg02.jpg); padding: 100px 0 125px; }
section[id^=sec] .cmn_tit01 { margin-bottom: 40px; }
section[id^=sec] .cmn_tit01 + p { text-align: center; line-height: 1.8; margin-bottom: 90px; letter-spacing: 0.1em; }
.spot_list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 75px 60px; }
.spot_list .spot .photo_col { margin-bottom: 35px; }
.spot_list .spot .name { font-size: 24px; margin-bottom: 15px; }
.spot_list .spot .txt_col p { line-height: 1.8; }
.spot_list .spot .txt_col p span { display: block; text-align: right; font-size: 12px; margin-top: 0.5em; }
.spot_list .spot .btn_list { display: flex; flex-wrap: wrap; gap: 25px; font-size: 15px; margin-top: 30px; }
.spot_list .spot .btn_list li a { display: flex; align-items: center; padding: 0 25px 10px 0; line-height: 1; border-bottom: 1px solid #aeaeae; }
.spot_list .spot .btn_list li a::before { content: ''; display: block; align-content: center; background-position: center; background-repeat: no-repeat; background-size: contain; }
.spot_list .spot .btn_list li.btn_map a::before { margin-right: 10px; width: 10px; height: 15px; background-image: url(../img/icon_map.svg);}
.spot_list .spot .btn_list li.btn_web a { padding-left: 5px;}
.spot_list .spot .btn_list li.btn_web a::before { margin-right: 20px; width: 13px; height: 10px; background-image: url(../img/icon_site.svg);}

.spot_list .spot.layout_lg { width: 100%; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
	.spot_list .spot { width: 470px; }
}
@media screen and (max-width: 600px) {
	section[id^=sec] { padding: 70px 0; }
	section[id^=sec]:last-child { margin-bottom: 10px; }
	section[id^=sec]:nth-child(2n) { padding: 70px 0; }
	section[id^=sec] .cmn_tit01 { margin-bottom: 25px; filter: drop-shadow(0 0 3px var(--color01)) drop-shadow(0 0 3px var(--color01)); }
	section[id^=sec] .cmn_tit01 + p { text-align: left; margin-bottom: 45px; filter: drop-shadow(0 0 3px var(--color01)) drop-shadow(0 0 3px var(--color01)) drop-shadow(0 0 6px var(--color01)); }
	.spot_list { flex-direction: column; gap: 50px; }
	.spot_list .spot .photo_col { margin-bottom: 20px; }
	.spot_list .spot .txt_col { filter: drop-shadow(0 0 3px var(--color01)) drop-shadow(0 0 3px var(--color01)); }
	.spot_list .spot .name { font-size: 20px; margin-bottom: 15px; }
	.spot_list .spot .txt_col p span { font-size: 10px; }
	.spot_list .spot .btn_list { gap: 15px; font-size: 14px; margin-top: 20px; }
	.spot_list .spot .btn_list li a { padding: 0 15px 7px 0; }
	.spot_list .spot .btn_list li.btn_map a::before { width: 9px; height: 13px; }
	.spot_list .spot .btn_list li.btn_web a::before { margin-right: 15px; width: 12px; height: 9px; }
}


/* ---------------------------------------------------
	sec01
------------------------------------------------------ */
#sec01 { position: relative; }
#sec01::before { content: ''; width: 674px; height: 590px; background: url(../../sightseeing/img/sec_bg01.png) no-repeat center/contain; position: absolute; bottom: -120px; right: -195px; z-index: -1; }

@media screen and (max-width: 600px) {
	#sec01::before { width: 90vw; height: 80vw;  bottom: -25vw; right: -35vw; }
}

/* ---------------------------------------------------
	sec02
------------------------------------------------------ */
#sec02 { padding-bottom: 0; position: relative; }
#sec02 > * { position: relative; z-index: 1; }
#sec02::before { content: ''; width: 674px; height: 746px; background: url(../../sightseeing/img/sec_bg02.png) no-repeat center/contain; position: absolute; top: 660px; left: -190px; z-index: 0; }
#sec02 .sec02_01 { padding-bottom: 190px;}
#sec02 .sec02_02 { padding-bottom: 165px; background: var(--color04); color: #fff; }
#sec02 .sec02_02 .spot_list { padding: 70px 0 0; }
#sec02 .sec02_02 .spot_list .spot .btn_list li a { color: #fff; }

@media screen and (hover: hover) {
}
@media screen and (min-width: 601px) {
	#sec02 .sec02_02 .spot_list .spot { width: 100%; display: flex; justify-content: space-between; flex-direction: row-reverse; }
	#sec02 .sec02_02 .spot_list .spot .photo_col { width: 470px; }
	#sec02 .sec02_02 .spot_list .spot .txt_col { width: 50%; }
}
@media screen and (max-width: 600px) {
	#sec02::before { width: 90vw; height: 95vw; top: 95vw; left: -35vw; }
	#sec02 .sec02_01 { padding-bottom: 100px;}
	#sec02 .sec02_02 { padding-bottom: 65px; }
	#sec02 .sec02_02 .main_photo { height: 50vw;}
	#sec02 .sec02_02 .spot_list .spot .txt_col { filter: none;}
	#sec02 .sec02_02 .spot_list { padding: 40px 0 0; }
}


/* ---------------------------------------------------
	sec03
------------------------------------------------------ */
#sec03 { position: relative; overflow: hidden; }
#sec03::before { content: ''; width: 674px; height: 590px; background: url(../../sightseeing/img/sec_bg01.png) no-repeat center/contain; position: absolute; top: -45px; right: -210px; z-index: -1; }
#sec03::after { content: ''; width: 674px; height: 590px; background: url(../../sightseeing/img/sec_bg01.png) no-repeat center/contain; position: absolute; bottom: 100px; left: -115px; z-index: -1; }

@media screen and (max-width: 600px) {
	#sec03::before { width: 90vw; height: 80vw; top: -20vw; right: -45vw; }
	#sec03::after { width: 90vw; height: 80vw; bottom: -30vw; left: -15vw; }
}



/* ---------------------------------------------------
	sec04
------------------------------------------------------ */
#sec04 { position: relative; overflow: hidden; }
#sec04 > * { position: relative; z-index: 1; }
#sec04::before { content: ''; width: 674px; height: 590px; background: url(../../sightseeing/img/sec_bg01.png) no-repeat center/contain; position: absolute; bottom: -200px; right: -240px; z-index: 0; }

@media screen and (max-width: 600px) {
	#sec04::before { width: 90vw; height: 80vw;  bottom: -40vw; right: -45vw; }
}