@charset "UTF-8";

/*-------------------------
__hiyoshi_style
-------------------------*/

.main_title{ width: 100%; max-width: 1200px; margin: 0 auto 100px; padding: 0 50px; box-sizing: border-box;}
.main_title img{ width: 100%; height: auto;}
.intro_text{ text-align: center; font-size: 1.5em; line-height: 2.5em; margin-bottom: 80px;}
.go_map{ width: 100%; max-width: 1200px; margin: 0 auto 100px; padding: 0 50px; box-sizing: border-box;}
.go_map a{}
.go_map a img{ width: 100%; height: auto;}

#spot{ background-color: #f4f2eb;}
#spot .inner{ width: 100%; max-width: 1200px; margin: 0 auto 60px; padding: 100px 50px; box-sizing: border-box;}
#spot .inner .spot_box{ margin-bottom: 60px;}
#spot .inner .spot_box:last-child{ margin-bottom: 0;}
#spot .inner .spot_box > h3{ font-size: 2.5em; line-height: 1.6; color: #947d3c; text-align: center; margin-bottom: 30px;}
#spot .inner .spot_box > p{ font-size: 1.5em; line-height: 2.5em; text-align: center; margin-bottom: 50px;}
#spot .inner .spot_box .spot_list{}
#spot .inner .spot_box .spot_list ul{ display: flex; flex-wrap: wrap; align-items: center;}
#spot .inner .spot_box .spot_list ul li{ width: calc(50% - 20px); margin-right: 40px; background-color: #fff; display: flex; align-items: center; margin-bottom: 40px;}
#spot .inner .spot_box .spot_list ul li:nth-child(2n){ margin-right: 0;}
#spot .inner .spot_box .spot_list ul li .spot_photo{ width: 280px;}
#spot .inner .spot_box .spot_list ul li .spot_photo span{ display: block; width: 100%; height: 0; padding-top: 77%; overflow: hidden; position: relative;}
#spot .inner .spot_box .spot_list ul li .spot_photo span img{ width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;}
#spot .inner .spot_box .spot_list ul li .spot_text{ width: calc(100% - 280px); padding: 25px; box-sizing: border-box;}
#spot .inner .spot_box .spot_list ul li .spot_text h4{ font-size: 1.6em; line-height: 1.4em; font-weight: 700; margin-bottom: 10px;}
#spot .inner .spot_box .spot_list ul li .spot_text p{ font-size: 1.3em; line-height: 1.6em;}
#spot .inner .spot_box .spot_list ul.railline li:nth-child(1){ width: calc(57% - 20px)!important;}
#spot .inner .spot_box .spot_list ul.railline li:nth-child(2){ width: calc(43% - 20px)!important;}

#spot_bottom{ background-image: url(images/bottom_town@2x.jpg); background-position: center bottom; background-size: cover; background-repeat: no-repeat;}
#spot_bottom .inner{ text-align: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 60px 50px 250px; box-sizing: border-box;}
#spot_bottom .inner .bottom_title{ font-size: 3em; margin-bottom: 40px;}
#spot_bottom .inner p{ font-size: 1.5em; line-height: 2.5em;}

@media screen and (min-width: 768px) {
.go_map a img{ transition: .2s;}
.go_map a:hover img{ opacity: 0.7;}
}

@media screen and (max-width: 767px) {

.main_title{ margin: 0 auto 30px; padding: 0 20px;}
.intro_text{ font-size: 1.3em; line-height: 1.8em; margin-bottom: 30px; padding: 0 20px; box-sizing: border-box;}
.go_map{ margin: 0 auto 50px; padding: 0 20px; box-sizing: border-box;}

#spot .inner{ margin: 0 auto 50px; padding: 50px 20px;}
#spot .inner .spot_box{ margin-bottom: 40px;}
#spot .inner .spot_box > h3{ font-size: 2.2em; line-height: 1.4; margin-bottom: 15px;}
#spot .inner .spot_box > p{ font-size: 1.3em; line-height: 1.8em; margin-bottom: 30px;}
#spot .inner .spot_box .spot_list ul{ display: block;}
#spot .inner .spot_box .spot_list ul li{ width: 100%; display: block; margin-bottom: 20px;}
#spot .inner .spot_box .spot_list ul li .spot_photo{ width: 100%;}
#spot .inner .spot_box .spot_list ul li .spot_text{ width: 100%; padding: 20px;}
#spot .inner .spot_box .spot_list ul li .spot_text h4{ font-size: 1.5em; margin-bottom: 5px;}
#spot .inner .spot_box .spot_list ul li .spot_text p{ font-size: 1.2em;}
#spot .inner .spot_box .spot_list ul.railline li:nth-child(1),
#spot .inner .spot_box .spot_list ul.railline li:nth-child(2){ width: 100%!important;}
#spot_bottom{ background-image: url(images/bottom_town_sp.jpg);}
#spot_bottom .inner{ padding: 0 20px 150px;}
#spot_bottom .inner .bottom_title{ font-size: 2.2em; line-height: 1.4; margin-bottom: 20px;}
#spot_bottom .inner p{ font-size: 1.3em; line-height: 1.8em;}

}

@media screen and (max-width:374px){

}