@charset 'utf-8';



.inline_490 { display: inline; }
@media screen and (min-width: 490px) {
    .inline_490 { display: none; }
}

/*========== TOP_sec ==========*/
.h_town_wrap h1 { position: relative; width: fit-content; font-size: 20px; letter-spacing: 0.08em; line-height: 1.5; }
.h_town_wrap h1 strong { font-size: 30px; letter-spacing: 0.08em; line-height: 1.5; }
.h_town_wrap h1 .town_top_star { position: absolute; top: -12px; right: -60px; width: 50px; z-index: 1; }
.town_top_content { display: flex; flex-direction: column; gap: 40px; margin-top: 20px; }
.town_top_map_wrap { position: relative; }
.town_top_map_wrap .town_top_map { width: 100%; height: 360px; vertical-align: bottom; }
.town_top_map_wrap .town_top_kids { position: absolute; bottom: -30px; right: -12px; width: 120px; transform: scale(-1, 1); z-index: 1; }
@media screen and (min-width: 768px) {
    .h_town_wrap h1 { font-size: 32px; }
    .h_town_wrap h1 strong { font-size: 48px; }
    .h_town_wrap h1 .town_top_star { right: -90px; width: 70px; }
    .town_top_content { margin-top: 40px; }
}
@media screen and (min-width: 1025px) {
    .town_top_content { flex-direction: row; }
    .town_top_caption { flex: 1; }
    .town_top_map_wrap { flex: 1; }
    .town_top_map_wrap .town_top_kids { bottom: -40px; right: -4z0px; width: 160px; }
}


.button_banner { display: flex; flex-direction: column; width: 100%; height: auto; max-width: none; background: #EB6D2E; border-radius: 0; }
.button_banner .banner_img_wrap { position: relative; width: 100%; height: 160px; }
.button_banner .banner_img_wrap .banner_photo { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; }
.button_banner .banner_img_wrap .banner_img { position: absolute; bottom: 0; left: 20px; height: 100px; }
.button_banner span { position: relative; display: flex; align-items: center; padding: 12px 24px; }
.button_banner span .button_arrow { filter: invert(100%); }
/* hover */
.button_banner:hover span .button_arrow { right: 24px; }
@media screen and (min-width: 600px) {
    .button_banner { height: min(20vw, 200px); flex-direction: row; }
    .button_banner .banner_img_wrap { width: 40%; height: 100%; }
    .button_banner .banner_img_wrap .banner_photo { clip-path: polygon( 0 0, 80% 0, 100% 100%, 0 100% ); }
    .button_banner .banner_img_wrap .banner_img { left: auto; right: -15%; height: 90%; }
    .button_banner span { width: 60%; padding-left: 8%; }
}
@media screen and (min-width: 1025px) {
    .button_banner .banner_img_wrap .banner_img { right: -32%; height: 85%; }
    .button_banner span { font-size: 28px; padding-left: 16%; }
}


/*========== 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); }
}