@charset "utf-8";
html{scroll-behavior: smooth;}
#example_area{position: relative;}
.example_copy{position: absolute;left: 0;top: 0;z-index: 1;font-size: 20px;width: 30em;}
.example_tit{font-size: 1.1em;font-weight: 600;border-left: 0.5em solid #CF0027;padding-left: 0.7em;}
.example_subtit{font-size: 1em;font-weight: 600;margin-top: 1.8em;border-bottom: 1px solid #DCDDDD;padding-bottom: 0.5em;}
.example_subtit::before{content: "";width: 1.2em;height: 1.2em;display: inline-block;margin-right: 0.7em;background: url("../img/example_subtit_i.svg") no-repeat center center/contain;vertical-align: -0.2em;}
.example_link{margin-top: 0.5em;line-height: 1.8;}
.example_link a::after{content: "";display: inline-block;width: 1px;height: 1em;margin: 0 1.2em;background: #333;}
.example_link a:last-of-type::after{display: none;}
#japan_map{font-size: 22px;width: 47em;height: 33.5em;position: relative;margin-inline: auto;}
#japan_map a{border-radius: 0.5em;display: flex;justify-content: center;align-items: center;color: #fff;width: 3.3em;height: 2.5em;background: #CF0027;position: absolute;transition: 0.5s all;}
#japan_map a.off{pointer-events: none;background: #C9CACA;}
#japan_map a.off::after {
  pointer-events: none;
  background: #C9CACA;
}
#japan_map a p{font-size: 0.8em;}
#japan_map a:hover{text-decoration: none;}
.example_list_btn{display: block;margin-left: auto;width: 10em;color: #CF0027;font-size: 18px;}
.example_list_btn::after{content: "";width: 1em;height: 1em;display: inline-block;transform: rotate(45deg);border-right: 1px solid #CF0027;border-bottom: 1px solid #CF0027;margin-left: 0.8em;vertical-align: 0.2em;}

@media screen and (min-width: 768px){
.area_title{display: none;}
#japan_map a:hover{opacity: 0.6;}

/* 北海道・東北 */
.hokkaido{bottom: 26em;left: 38.3em;width: 8.7em!important;height: 7.5em!important;border-bottom-left-radius: 0!important;}
.hokkaido::after{content: "";display: block;position: absolute;left: 0;top: 100%;height: 1em;width: 3.3em;border-radius: 0 0 0.5em 0.5em;background: #CF0027;}
.aomori{bottom: 21.7em;left: 38.3em;width: 6.7em!important;}
.akita{bottom: 19.1em;left: 38.3em;}
.iwate{bottom: 19.1em;left: 41.7em;}
.yamagata{bottom: 16.5em;left: 38.3em;}
.miyagi{bottom: 16.5em;left: 41.7em;}
.fukushima{bottom: 13.9em;left: 38.3em;width: 6.7em!important;}

/* 関東 */
.gunma{bottom: 11.3em;left: 38.3em;}
.tochigi{bottom: 11.3em;left: 41.7em;}
.ibaraki{bottom: 8.7em;left: 41.7em;}
.saitama{bottom: 8.7em;left: 38.3em;}
.chiba{bottom: 3.5em;left: 41.7em;height: 5.1em!important;}
.tokyo{bottom: 6.1em;left: 38.3em;}
.kanagawa{bottom: 3.5em;left: 38.3em;}

/* 中部 */
.nigata{bottom: 13.9em;left: 34.9em;}
.toyama{bottom: 13.9em;left: 31.5em;}
.ishikawa{bottom: 13.9em;left: 28.1em;}
.fukui{bottom: 11.3em;left: 28.1em;}
.nagano{bottom: 8.7em;left: 34.9em;height: 5.1em!important;}
.gifu{bottom: 8.7em;left: 31.5em;height: 5.1em!important;}
.yamanashi{bottom: 6.1em;left: 34.9em;}
.aichi{bottom: 6.1em;left: 31.5em;}
.shizuoka{bottom: 3.5em;left: 34.9em;}

/* 近畿 */
.kyoto{bottom: 8.7em;left: 24.7em;}
.shiga{bottom: 8.7em;left: 28.1em;}
.osaka{bottom: 6.1em;left: 21.3em;}
.nara{bottom: 6.1em;left: 24.7em;}
.mie{bottom: 6.1em;left: 28.1em;}
.wakayama{bottom: 3.5em;left: 21.3em;width: 6.7em!important;}
.hyougo{bottom: 8.7em;left: 21.3em;}

/* 中国 */
.tottori{bottom: 8.7em;left: 17.9em;}
.okayama{bottom: 6.1em;left: 17.9em;}
.shimane{bottom: 8.7em;left: 14.5em;}
.hiroshima{bottom: 6.1em;left: 14.5em;}
.yamaguchi{bottom: 6.1em;left: 11.1em;height: 5.1em!important;}

/* 四国 */
.kagawa{bottom: 2.6em;left: 15.5em;}
.ehime{bottom: 2.6em;left: 12.1em;}
.tokushima{bottom: 0;left: 15.5em;}
.kouchi{bottom: 0;left: 12.1em;}

/* 九州 */
.fukuoka{bottom: 8.7em;left: 3.4em;}
.saga{bottom: 8.7em;left: 0;}
.nagasaki{bottom: 6.1em;left: 0;}
.oita{bottom: 8.7em;left: 6.8em;}
.kumamoto{bottom: 6.1em;left: 3.4em;}
.miyazaki{bottom: 3.5em;left: 6.8em;height: 5.1em!important;}
.kagoshima{bottom: 3.5em;left: 0;width: 6.7em!important;}
.okinawa{bottom: 0;left: 0;}
}

@media screen and (max-width: 1100px){
.example_copy{font-size: 1.9vw;}
#japan_map{font-size: 2vw;}
.example_list_btn{font-size: 1.7vw;}
}


@media screen and (max-width: 767px){
.example_copy{position: static;font-size: 16px;width: 100%;}

#japan_map{font-size: 14px;width: auto;height: auto;margin-top: 2em;}
#japan_map .todofuken{margin-top: 1.5em;}
#japan_map .area{display: flex;flex-wrap: wrap;margin-top: 0.7em;}
#japan_map a{border-radius: 0;width: 24%;height: 2.5em;position: static;margin-right: 1.3%;}
#japan_map a:nth-of-type(4n){margin-right: 0;}
#japan_map a:nth-of-type(n+5){margin-top: 0.3em;}
#japan_map a p{font-size: 1em;}
.area_title{text-align: center;font-weight: 600;font-size: 1.2em;}
.example_list_btn{font-size: 14px;margin-top: 1.5em;}

}