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

@media screen and (max-width: 600px) {
.main_title .tit{ font-size: 30px;}
}

/* ---------------------------------------------------
Section Lead
------------------------------------------------------ */
.sec_lead { padding: 150px 0 0;}
.sec_lead .box_01{ position: relative;}
.sec_lead .tit_01{ font-size: 30px; line-height: 1.2; padding: 0 0 30px; text-align: center; letter-spacing: 0.1em;}
.sec_lead .txt_01{ font-size: 16px; line-height: 2; padding: 0; text-align: center;}

@media screen and (max-width: 600px) {
.sec_lead { padding: 50px 0 0;}
.sec_lead .tit_01{ font-size: 20px; line-height: 1.4; padding: 0 0 15px; text-align: center;}
.sec_lead .txt_01{ font-size: 15px; line-height: 1.8; padding: 0; text-align: left;}
}

/* ---------------------------------------------------
Section Spot
------------------------------------------------------ */
.sec_spot{ display: flex; justify-content: space-between; align-items: center; padding: 100px 0 0;}
.sec_spot.img_r{ flex-direction: row-reverse;}
.sec_spot.img_l{ flex-direction: row;}
.sec_spot .box_img{ width: 800px;}
.sec_spot .box_img img{ width: 100%; height: auto;}
.sec_spot .box_txt{ width: 360px; position: relative; padding: 0 0 70px; display: flex; flex-wrap: wrap; align-items: flex-start;}
.sec_spot .tit{ font-size: 24px; line-height: 1.5; text-align: center; border-bottom: solid 1px #fff; padding: 30px 0 10px; width: 100%;}
.sec_spot .time{ font-size: 15px; line-height: 1.5; display: flex; align-items: center; justify-content: center; padding: 20px 0; width: 100%;}
.sec_spot .time .icon{ margin: 0 8px 0 0;}
.sec_spot .txt{ font-size: 16px; line-height: 1.5;}
.sec_spot .btn_01,
.sec_spot .btn_02{ width: 48%; box-sizing: border-box; position: absolute; bottom: 0;}
.sec_spot .btn_01{ left: 0;}
.sec_spot .btn_02{ right: 0;}
.sec_spot .btn_01 a,
.sec_spot .btn_02 a{ background: #fff; color: #000; display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; font-size: 16px; line-height: 50px; text-align: center; transition: all 0.5s;}
.sec_spot .btn_01 a::before{ content: url("../../sightseeing/img/ico_pin.svg"); margin: 0 8px 0 0;}
.sec_spot .btn_02 a::before{ content: url("../../sightseeing/img/ico_blank.svg"); margin: 0 8px 0 0;}
.sec_spot .btn_01 a:hover,
.sec_spot .btn_02 a:hover{ text-decoration: none; background: #AAAAAA;}
.wrap_01{ display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 0 0 100px;}
.sec_spot.img_t{ flex-direction: column; width: 580px;}
.sec_spot.img_t .box_img{ width: 100%;}
.sec_spot.img_t .box_txt{ width: 100%;}
.copy{ font-size: 30px; line-height: 1.5; text-align: center;}

@media screen and (max-width: 600px) {
.sec_spot{ padding: 50px 0 0;}
.sec_spot.img_r{ flex-direction: column;}
.sec_spot.img_l{ flex-direction: column;}
.sec_spot .box_img{ width: 100%;}
.sec_spot .box_txt{ width: 100%; padding: 0 0 70px;}
.sec_spot .tit{ font-size: 20px; line-height: 1.5; padding: 15px 0 10px; }
.sec_spot .time{ font-size: 15px; line-height: 1.5; padding: 15px 0;}
.sec_spot .txt{ font-size: 15px; line-height: 1.7;}
.wrap_01{ padding: 0 0 50px;}
.sec_spot.img_t{ width: 100%;}
.copy{ font-size: 20px; line-height: 1.5; text-align: center;}
}