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

/* ---------------------------------------------------
	Block Main Title ( base.css OverWrite )
------------------------------------------------------ */
.box_maintit .main_tit{ margin: -100px 0 0;}
.box_maintit .main_tit .en{ font-size: 80px;}
.box_maintit .main_tit .en::first-letter{ font-size: 100px;}
.box_maintit .main_tit .en span{ font-size: 70px; display: block;}
.box_maintit .main_tit .en span::first-letter{ font-size: 90px;}
.box_maintit .main_tit .ja{ font-size: 36px; padding: 20px 0 0;}

@media screen and (max-width: 600px) {
.box_maintit .main_tit{ margin: -30px 0 0;}
.box_maintit .main_tit .en{ font-size: 42px;}
.box_maintit .main_tit .en::first-letter{ font-size: 56px;}
.box_maintit .main_tit .en span{ font-size: 30px;}
.box_maintit .main_tit .en span::first-letter{ font-size: 40px;}
.box_maintit .main_tit .ja{ font-size: 16px; padding: 10px 0 0;}
}


/* ---------------------------------------------------
	Section Food & Sightseeing
------------------------------------------------------ */
.sec_food,
.sec_sightseeing{ padding: 80px 0;}
.sec_food .tit_01,
.sec_sightseeing .tit_01{ text-align: center; font-size: 100px; color: #ddd0c4; line-height: 1; padding: 0 0 20px;}
.sec_food .tit_01::first-letter,
.sec_sightseeing .tit_01::first-letter{ font-size: 140px;}
.sec_food .copy_01,
.sec_sightseeing .copy_01{ text-align: center; font-size: 36px; color: #cb5219; line-height: 1.4; padding: 0 0 30px;}
.sec_food .txt_01,
.sec_sightseeing .txt_01{ text-align: center; font-size: 16px; line-height: 2; padding: 0 0 20px;}

@media screen and (max-width: 600px) {
.sec_food,
.sec_sightseeing{ padding: 40px 0;}
.sec_food .tit_01,
.sec_sightseeing .tit_01{ font-size: 44px; padding: 0 0 5px;}
.sec_food .tit_01::first-letter,
.sec_sightseeing .tit_01::first-letter{ font-size: 60px;}
.sec_food .copy_01,
.sec_sightseeing .copy_01{ font-size: 18px; line-height: 1.4; padding: 0 0 15px;}
.sec_food .txt_01,
.sec_sightseeing .txt_01{ text-align: left; font-size: 14px; line-height: 1.7; padding: 0 4% 10px;}
}


/* ---------------------------------------------------
	Box Spots
------------------------------------------------------ */
.box_spots{ width: 100%; max-width: 1480px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.box_spots .spot{ width: 33.3%; padding: 40px;}
.box_spots .spot .img img{ width: 100%; height: auto;}
.box_spots .spot .tit{ text-align: center; font-size: 24px; line-height: 1.4; border-bottom: solid 1px #aaa; padding: 15px 0; margin: 0 0 15px;}
.box_spots .spot .tit small{ font-size: 16px;}
.box_spots .spot .txt{ font-size: 16px; line-height: 2;}
.box_spots .spot .box_btns{ padding: 20px 0; text-align: right;}
.box_spots .spot .box_btns .gmap,
.box_spots .spot .box_btns .site{ display: inline-block; padding: 0 0 0 25px; margin: 0 0 0 20px; font-size: 16px; line-height: 1.1;}
.box_spots .spot .box_btns .gmap::after,
.box_spots .spot .box_btns .site::after{ content: " ≫";}
.box_spots .spot .box_btns .gmap{ background: url("../img/common/ico_marker_02.svg") no-repeat left center; background-size: 16px;}
.box_spots .spot .box_btns .site{ background: url("../img/common/ico_blank_01.svg") no-repeat left center; background-size: 17px;}
.box_spots .spot .data{ display: table; width: 100%;}
.box_spots .spot .data:first-of-type{ border-top: solid 1px #aaa;}
.box_spots .spot .data dt,
.box_spots .spot .data dd{ display: table-cell; vertical-align: top; text-align: left; border-bottom: solid 1px #aaa; padding: 10px 15px; font-size: 15px; line-height: 1.5;}
.box_spots .spot .data dt{ width: 5em; background: #f2f0eb;}
.box_spots .spot .data dd{ width: calc( 100% - 5em );}

@media screen and (max-width: 600px) {
.box_spots{ width: 92%; max-width: 92%; flex-direction: column;}
.box_spots .spot{ width: 100%; padding: 40px 0 0;}
.box_spots .spot .tit{ font-size: 20px; line-height: 1.4; padding: 10px 0; margin: 0 0 10px;}
.box_spots .spot .tit small{ font-size: 14px;}
.box_spots .spot .txt{ font-size: 14px; line-height: 1.7;}
.box_spots .spot .box_btns{ padding: 10px 0;}
.box_spots .spot .box_btns .gmap,
.box_spots .spot .box_btns .site{ padding: 5px 0 5px 25px; margin: 0 0 0 20px; font-size: 14px; line-height: 1.1;}
.box_spots .spot .data dt,
.box_spots .spot .data dd{ padding: 10px 15px; font-size: 14px; line-height: 1.5;}
.box_spots .spot .data dt{ width: 5em;}
.box_spots .spot .data dd{ width: calc( 100% - 5em );}
}


/* ---------------------------------------------------
	Section Sightseeing
------------------------------------------------------ */
.sec_sightseeing{ background: #f2f0eb;}


/* ---------------------------------------------------
	Section Others
------------------------------------------------------ */
.sec_others{ padding: 100px 0 150px;}
.sec_others .tit{ text-align: center; font-size: 36px; line-height: 1.4; padding: 0 0 50px;}
.sec_others ul{ display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto;}
.sec_others ul li{ width: 380px;}

@media screen and (max-width: 600px) {
.sec_others{ padding: 40px 0 50px;}
.sec_others .tit{ font-size: 26px; line-height: 1.4; padding: 0 0 30px;}
.sec_others ul{ width: 92%; max-width: 92%; flex-direction: column;}
.sec_others ul li{ width: 100%; margin: 0 0 10px;}
}