@charset 'utf-8';



/*========== TOP_sec ==========*/
.TOP_sec .contents { position: relative; }
.h_city_wrap h1 { font-size: 20px; letter-spacing: 0.08em; line-height: 1.5; }
.h_city_wrap h1 strong { font-size: 30px; letter-spacing: 0.08em; line-height: 1.5; }
.h_city_wrap .h_city_caption { margin-top: 20px; }
.city_top_images { position: relative; width: 100%; aspect-ratio: 2 / 1; margin-top: 10%; }
.city_top_1_color,.city_top_1_photo { position: absolute; bottom: 0; right: 0; width: 60%; }
.city_top_1_color { fill: #EB6D2E; transform: translate(-2%, -3%); }
.city_top_1_photo image { width: 100%; height: 100%; z-index: 1; }
.city_top_2_color,.city_top_2_photo { position: absolute; bottom: 5%; left: 20%; width: 25%; }
.city_top_2_color { fill: #EB6D2E; transform: translate(-6%, 4%); }
.city_top_2_photo image { width: 100%; height: 100%; z-index: 1; }
.city_top_star { position: absolute; top: 0; left: 10%; width: 10%; z-index: 2; }
.city_top_dog { position: absolute; bottom: 0; right: 0; width: 20%; z-index: 2; }
.city_top_kids { position: absolute; bottom: 0; left: 0; width: 20%; z-index: 2; }
@media screen and (min-width: 500px) {
    .city_top_images { aspect-ratio: 9 / 4; margin-top: 5%; }
    .city_top_1_color,.city_top_1_photo { width: 50%; }
    .city_top_2_color,.city_top_2_photo { bottom: 10%; left: 25%; width: 20%;}
    .city_top_star { top: 10%; left: 15%; }
    .city_top_dog { right: 30%; width: 18%; }
}
@media screen and (min-width: 768px) {
	.h_city_wrap h1 { font-size: 32px; }
    .h_city_wrap h1 strong { font-size: 48px; }
    .h_city_wrap .h_city_caption { margin-top: 40px; }
    .city_top_images { aspect-ratio: 9 / 4; margin-top: -5%; }
    .city_top_1_color,.city_top_1_photo { width: 48%; }
    .city_top_2_color,.city_top_2_photo { left: 24%; width: 20%;}
    .city_top_star { top: -10%; right: 0; left: auto; width: 8%; }
    .city_top_dog { width: 14%; }
    .city_top_kids { width: 16%; }
}
@media screen and (min-width: 1025px) {
    .city_top_images { aspect-ratio: 13 / 6; margin-top: -180px; }
    .city_top_1_color,.city_top_1_photo { width: 50%; }
    .city_top_2_color,.city_top_2_photo { bottom: 5%; left: 18%; width: 22%;}
    .city_top_star { top: 0; right: 42%; width: 6%; }
    .city_top_dog { right: 30%; width: 10%; }
    .city_top_kids { width: 12%; }
}


/*========== FEATURE_sec ==========*/
.h_feature_wrap { position: relative; }
.h_feature_wrap .h_en { position: absolute; top: -20px; left: 0; }
.h_feature_wrap .h_ja { padding-top: 60px; font-size: 24px; font-weight: 700; }
.h_feature_wrap .h_feature_img { position: absolute; top: -20px; right: 20px; height: 104px; }
@media screen and (min-width: 768px) {
    .FEATURE_sec.bg_sub { background: transparent; }
    .FEATURE_sec.bg_sub .contents { background: #F7F4E6; border-radius: 16px; }
    .h_feature_wrap .h_en { top: -30px; left: 30px; }
    .h_feature_wrap .h_ja { position: relative; display: block; width: fit-content; padding-top: 80px; margin: 0 auto; font-size: 32px; }
    .h_feature_wrap .h_feature_img { top: auto; bottom: -20px; left: 0; width: 90px; height: auto; transform: translateX(-110px); }
    .FEATURE_sec.bg_sub .content { padding: 40px min(5vw, 80px) 80px; }
}


/*========== SPOT_sec ==========*/
.spot_list { display: flex; flex-direction: column; gap: 60px; }
.spot_list .spot_img { display: block; width: min(95vw, 600px); aspect-ratio: 3 / 2; object-fit: cover; background: #CCC; border-radius: 8px; vertical-align: bottom; }
.spot_list li:nth-child(2n-1) .spot_img { margin-left: calc(50% - 50vw); margin-right: auto; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.spot_list li:nth-child(2n) .spot_img { margin-right: calc(50% - 50vw); margin-left: auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.spot_list .spot_text { height: fit-content; margin-top: 32px; }
.spot_list .spot_text h3 { line-height: 1em; }
.spot_list .spot_text p { margin: 20px 0; }
.spot_list .spot_text .spot_info { padding: 20px 24px; background: #EEEEED; }
@media screen and (min-width: 1025px) {
    .spot_list { gap: 80px; }
    .spot_list li { display: flex; }
    .spot_list li:nth-child(2n) { flex-direction: row-reverse; }
    .spot_list .spot_img { width: 50vw; height: calc(100vw / 3); max-height: 500px; }
    .spot_list .spot_text { position: relative; width: 50vw; max-width: 700px; padding: 40px; margin-top: 80px; background: #FFF; border: 1px solid #000; border-radius: 8px; z-index: 1; }
    .spot_list li:nth-child(2n-1) .spot_text { margin-left: calc(50% - 50vw); }
    .spot_list li:nth-child(2n) .spot_text { margin-right: calc(50% - 50vw); }
}


/*========== TOWN_sec ==========*/
.TOWN_sec h2::before { content: ''; display: inline-block; width: 16px; aspect-ratio: 1 / 1; margin-right: 8px; background: #EB6D2E; border-radius: 50%; }
.town_list { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 20px 30px; margin-top: 12px; border: 1px solid #000; border-radius: 8px; }
.town_list li { width: calc(calc(100% - 40px) / 3); }
.town_list li a { display: flex; align-items: center; gap: 8px; width: fit-content; border-bottom: 1px solid #000; }
/* hover */
.town_list li a:hover { border-color: transparent; }
@media screen and (min-width: 500px) {
    .town_list li { width: calc(calc(100% - 60px) / 4); }
}
@media screen and (min-width: 700px) {
    .town_list li { width: calc(calc(100% - 80px) / 5); }
}
@media screen and (min-width: 768px) {
    .town_list { gap: 20px; padding: 40px 60px; margin-top: 20px; }
}
@media screen and (min-width: 900px) {
    .town_list li { width: calc(calc(100% - 100px) / 6); }
}
@media screen and (min-width: 1025px) {
    .town_list li { width: calc(calc(100% - 120px) / 7); }
}
@media screen and (min-width: 1200px) {
    .town_list li { width: calc(calc(100% - 140px) / 8); }
}