@charset "utf-8";
/* ===================================================
	Sightseeing CSS
====================================================== */
#contents_wrap { line-height: 2;}

@media screen and (max-width: 600px) {
	#contents_wrap { line-height: 1.6;}
}

/* ---------------------------------------------------

------------------------------------------------------ */

.lead { padding: 65px 0 100px; text-align: center;}
.lead .cap { margin: 0 0 25px; font-size: 28px; font-weight: bold;}

section { padding: 90px 0 100px;}
section h2 { margin: 0 0 65px; font-size: 22px; text-align: center;}
section h2 .en { display: block; margin: 0 0 10px; color: #9daab1; font-size: 65px; letter-spacing: 15px; line-height: 1;}
section .cap { font-weight: bold;}
section .cap .sub { display: block; color: #436e86; font-weight: normal;}
section .btn_col,
section .btn_col a { display: flex;}
section .btn_col { margin: 0 -5px;}
section .btn_col li { flex-grow: 1; margin: 0 5px;}
section .btn_col a { align-items: center; justify-content: center; height: 50px; padding: 10px; background: #fff; border: 1px solid #b2b2b2; color: #787878; font-size: 14px;}
section .btn_col a::before { background: #f1f1e8;}
section .btn_col a > span { padding: 0 0 0 25px; background: no-repeat left center; background-size: 16px auto;}
section .btn_col a .en { font-size: 17px;}

section .btn_col .btn_map > span { background-image: url(../../sightseeing/img/icon_map.svg);}
section .btn_col .btn_link > span { background-image: url(../../sightseeing/img/icon_link.svg);}

@media screen and (max-width: 600px) {
	.br_pc { display: none; }
	.lead { padding: 40px 0;}
	.lead .cap { margin-bottom: 15px; font-size: 22px; line-height: 1.6;}
	.lead p:not([class]) { text-align: left; }

	section { padding: 50px 0;}
	section h2 { margin-bottom: 30px; font-size: 18px;}
	section h2 .en { font-size: 36px; letter-spacing: 10px;}

	section .btn_col a { height: 45px;}
}



/* ---------------------------------------------------
sec1
------------------------------------------------------ */
#sec1 { background: #f8f8f6;}
#sec1 .spot { display: flex;}
#sec1 .spot + .spot { margin: 20px 0 0;}
#sec1 .spot .img { width: 49%; min-width: 630px; min-height: 500px;}
#sec1 .spot .img .ofi { width: 100%; height: 100%;}
#sec1 .spot .detail_col { align-self: center; width: 41.5%; max-width: calc(100% - 680px); margin: 0 auto; overflow: hidden;}
#sec1 .spot .detail_col dt { margin: 0 0 15px; font-size: 30px; font-weight: bold;}
#sec1 .spot .detail_col table { width: 100%; margin: 20px 0 0; font-size: 16px; table-layout: fixed;}
#sec1 .spot .detail_col th,
#sec1 .spot .detail_col td { padding: 10px; border-bottom: 1px solid #d4d4d4; box-sizing: border-box;}
#sec1 .spot .detail_col th { width: 100px; font-weight: normal; text-align: left;}
#sec1 .spot .detail_col .btn_col { width: 450px; max-width: calc(100% + 5px); margin: 35px -5px 0 auto;}


@media screen and (max-width: 600px) {
	#sec1 .spot { display: block;}
	#sec1 .spot + .spot { margin-top: 40px;}
	#sec1 .spot .img { width: auto; min-width: 0; min-height: 0;}
	#sec1 .spot .detail_col { width: 92%; max-width: none; margin-top: 20px;}
	#sec1 .spot .detail_col dt { margin-bottom: 10px; font-size: 22px;}
	#sec1 .spot .detail_col table,
	#sec1 .spot .detail_col tbody,
	#sec1 .spot .detail_col tr,
	#sec1 .spot .detail_col th,
	#sec1 .spot .detail_col td { display: block; width: 100%;}
	#sec1 .spot .detail_col table { margin-top: 10px;}
	#sec1 .spot .detail_col th,
	#sec1 .spot .detail_col td { padding: 0 5px;}
	#sec1 .spot .detail_col th { padding-top: 10px; border-bottom: none;}
	#sec1 .spot .detail_col td { padding-bottom: 10px;}
	#sec1 .spot .detail_col .btn_col { width: calc(100% + 10px); max-width: none; margin: 25px -5px 0;}
}



/* ---------------------------------------------------
sec2
------------------------------------------------------ */
#sec2 { border-bottom: 1px solid #d4d4d4;}
#sec2 > div,
#sec2 .img_col { display: flex;}
#sec2 > div { flex-direction: row-reverse;}
#sec2 .img_col { flex-wrap: wrap; justify-content: space-between; width: 59.5%; max-width: calc(100% - 460px);}
#sec2 .img_col p { position: relative;}
#sec2 .img_col p:first-child { width: 100%; min-height: 50.5%; margin: 0 0 1%;}
#sec2 .img_col p:nth-child(n+2) { height: 48.5%;}
#sec2 .img_col p:nth-child(2) { width: 53.5%;}
#sec2 .img_col p:nth-child(3) { width: 45.5%;}
#sec2 .img_col img { width: 100%; height: 100%;}
#sec2 .img_col span { position: absolute; right: 20px; bottom: 15px; color: #fff; font-size: 16px;}
#sec2 .detail_col { align-self: center; flex-direction: column; width: 33%; min-width: 400px; margin: 60px auto 0;}
#sec2 .detail_col .cap { margin: 0 0 25px; font-size: 30px;}
#sec2 .detail_col .cap .sub { font-size: 18px;}
#sec2 .detail_col dl { margin: 80px 0 0; background: #f8f8f6; padding: 50px 20px;}
#sec2 .detail_col dt,
#sec2 .detail_col dd { width: 370px; max-width: 100%; margin: 0 auto;}
#sec2 .detail_col dt { margin-bottom: 15px; font-weight: bold;}
#sec2 .detail_col dd { font-size: 16px;}
#sec2 .detail_col li { padding: 0 0 0 1em; text-indent: -1em;}
#sec2 .detail_col li::before { content: '・';}


@media screen and (max-width: 600px) {
	#sec2 > div { display: block;}
	#sec2 .img_col { width: auto; max-width: none;}
	#sec2 .img_col p:first-child { min-height: 0;}
	#sec2 .img_col p:nth-child(n+2) { height: auto;}
	#sec2 .img_col span { right: 10px; bottom: 5px; font-size: 10px; text-align: right;}
	#sec2 .detail_col { width: 92%; min-width: 0; margin-top: 20px;}
	#sec2 .detail_col .cap { margin-bottom: 10px; font-size: 22px;}
	#sec2 .detail_col .cap .sub { margin: 0 0 5px; font-size: 16px;}
	#sec2 .detail_col dl { margin-top: 30px; padding: 20px;}
	#sec2 .detail_col dt,
	#sec2 .detail_col dd { width: auto;}
	#sec2 .detail_col dt { padding: 0 20px 0 0; margin-bottom: 0; position: relative;}
	#sec2 .detail_col dt::before,
	#sec2 .detail_col dt::after { content: ''; position: absolute; top: 50%; background: #5f7d94; transform: translateY(-50%); transition: transform 0.5s, opacity 0.5s;}
	#sec2 .detail_col dt::before { width: 15px; height: 1px; right: 0;}
	#sec2 .detail_col dt::after { width: 1px; height: 15px; right: 7px;}
	#sec2 .detail_col dt.active::before,
	#sec2 .detail_col dt.active::after { transform: translateY(-50%) rotate(-90deg);}
	#sec2 .detail_col dt.active::before { opacity: 0;}
	#sec2 .detail_col dd { padding: 10px 0 0;}
}



/* ---------------------------------------------------
sec3
------------------------------------------------------ */
#sec3 { border-bottom: 1px solid #d4d4d4;}
#sec3 h3 { margin: 0 0 50px; font-size: 30px; font-weight: bold; text-align: center;}
#sec3 > div { display: flex; flex-wrap: wrap;}
#sec3 .spot { width: calc(92% / 3); margin: 0 4% 8% 0; overflow: hidden;}
#sec3 .spot:nth-child(3n),
#sec3 .spot:last-child { margin-right: 0;}
#sec3 .spot:nth-last-child(-n+3) { margin-bottom: 0;}
#sec3 .spot img { width: 100%;}
#sec3 .spot dl { margin: 35px 0 0;}
#sec3 .spot .cap { margin: 0 0 25px; font-size: 22px; line-height: 1.6;}
#sec3 .spot .cap span { font-size: 18px;}
#sec3 .spot .cap .sub { margin: 0 0 10px; font-size: 16px;}
#sec3 .spot .btn_col { margin-top: 50px;}
#sec3 .spot .access { margin: 25px 0 0; padding: 0 0 0 25px; position: relative;}
#sec3 .spot .access::before { content: ''; width: 16px; height: 16px; position: absolute; left: 0; top: 1em; background: no-repeat center center; background-size: 100% auto; transform: translateY(-50%);}
#sec3 .spot .access.car::before { background-image: url(../../sightseeing/img/icon_car.svg);}

@media screen and (max-width: 600px) {
	#sec3 h3 { margin-bottom: 20px; font-size: 22px;}
	#sec3 > div { display: block; width: 92%; margin: 0 auto;}
	#sec3 .spot { width: auto; margin: 0 0 40px !important;}
	#sec3 .spot:last-child { margin-bottom: 0 !important;}
	#sec3 .spot dl { margin-top: 20px;}
	#sec3 .spot .cap { margin-bottom: 10px; font-size: 18px;}
	#sec3 .spot .cap span { font-size: 16px;}
	#sec3 .spot .cap .sub { margin-bottom: 5px; font-size: 14px;}
	#sec3 .spot .btn_col { margin-top: 20px;}
	#sec3 .spot .access { margin-top: 15px;}
	#sec3 .spot .access::before { content: ''; width: 16px; height: 16px; position: absolute; left: 0; top: 12px; background: no-repeat center center; background-size: 100% auto; transform: translateY(-50%);}
	#sec3 .spot .access.car::before { background-image: url(../../sightseeing/img/icon_car.svg);}
}



/* ---------------------------------------------------
sec4
------------------------------------------------------ */
#sec4 { padding-bottom: 0; text-align: center;}
#sec4 h3 { margin: 0 0 50px; font-size: 30px; font-weight: bold;}

@media screen and (max-width: 600px) {
	#sec4 { width: 92%; margin-bottom: 70px;}
	#sec4 h3 { margin-bottom: 20px; font-size: 22px;}
}




/* ---------------------------------------------------
sec5
------------------------------------------------------ */
#sec5 { border-bottom: 1px solid #d4d4d4;}
#sec5 h3 { margin: 0 0 50px; font-size: 30px; font-weight: bold; text-align: center;}
#sec5 > div { display: flex; flex-wrap: wrap;}
#sec5 .spot { width: calc(92% / 3); margin: 0 4% 8% 0; overflow: hidden;}
#sec5 .spot:nth-child(3n),
#sec5 .spot:last-child { margin-right: 0;}
#sec5 .spot:nth-last-child(-n+3) { margin-bottom: 0;}
#sec5 .spot img { width: 100%;}
#sec5 .spot dl { margin: 35px 0 0;}
#sec5 .spot .cap { margin: 0 0 25px; font-size: 22px; line-height: 1.6;}
#sec5 .spot .cap span { font-size: 18px;}
#sec5 .spot .cap .sub { margin: 0 0 10px; font-size: 16px;}
#sec5 .spot .btn_col { margin-top: 50px;}
#sec5 .spot .access { margin: 25px 0 0; padding: 0 0 0 25px; position: relative;}
#sec5 .spot .access::before { content: ''; width: 16px; height: 16px; position: absolute; left: 0; top: 1em; background: no-repeat center center; background-size: 100% auto; transform: translateY(-50%);}
#sec5 .spot .access.car::before { background-image: url(../../sightseeing/img/icon_car.svg);}
#sec5 .img span{ display:block; font-size:12px; text-align:right; margin-bottom:-20px; }

@media screen and (max-width: 600px) {
	#sec5 h3 { margin-bottom: 20px; font-size: 22px;}
	#sec5 > div { display: block; width: 92%; margin: 0 auto;}
	#sec5 .spot { width: auto; margin: 0 0 40px !important;}
	#sec5 .spot:last-child { margin-bottom: 0 !important;}
	#sec5 .spot dl { margin-top: 20px;}
	#sec5 .spot .cap { margin-bottom: 10px; font-size: 18px;}
	#sec5 .spot .cap span { font-size: 16px;}
	#sec5 .spot .cap .sub { margin-bottom: 5px; font-size: 14px;}
	#sec5 .spot .btn_col { margin-top: 20px;}
	#sec5 .spot .access { margin-top: 15px;}
	#sec5 .spot .access::before { content: ''; width: 16px; height: 16px; position: absolute; left: 0; top: 12px; background: no-repeat center center; background-size: 100% auto; transform: translateY(-50%);}
	#sec5 .spot .access.car::before { background-image: url(../../sightseeing/img/icon_car.svg);}
}