@charset "UTF-8";
.japan-map { margin: 0 0 30px 0; padding: 0 12%; width: 100%; overflow: hidden; }
.japan-destinations-map { position: relative; margin-bottom: -25%; line-height: 1; overflow: hidden; }
.map { overflow: hidden; }
.map-wrap { position: relative; }
.map-map, .map svg { display: block; width: inherit; }
.map-japan-area .map-map { margin-right: -7.5%; -webkit-transform: rotate(11deg) translateX(-11%); transform: rotate(11deg) translateX(-11%); }
.map-spot { display: block; position: absolute; }
.map-japan-area .map-area { fill: rgba(230, 233, 237, 0.75); }
.map-japan-area .map-area { cursor: pointer; -webkit-transition: fill 0.25s; transition: fill 0.25s; }
.map-japan-area .city-tokyo { top: 52.5%; left: 62%; }
.map-japan-area .city-kyoto { top: 54.5%; left: 43.5%; }
.map-japan-area .city-sapporo { top: 17%; left: 77%; }
.map-japan-area .city-sendai { top: 40%; left: 70%; }
.map-japan-area .city-kanazawa { top: 46%; left: 48.5%; }
.map-japan-area .city-hiroshima { top: 54%; left: 26.5%; }
.map-japan-area .city-fukuoka { top: 56.5%; left: 15%; }
.map-japan-area .city-osaka { top: 56%; left: 40%; }
.map-japan-area .city-nara { top: 58%; left: 42%; }
.map-japan-area .city-kagoshima { top: 65%; left: 15%; }
.map-japan-area .city-hakone { top: 55%; left: 56.5%; }
.map-japan-area .city-hakodate { top: 22%; left: 72%; }
.map-japan-area .city-nikko { top: 48%; left: 61%; }
.map-japan-area .city-nagasaki { top: 60%; left: 12%; }
.map-japan-area .city-takayama { top: 49%; left: 49%; }
.map-japan-area .city-nagoya { top: 54%; left: 46.75%; }
.map-japan-area .city-matsumoto { top: 49.25%; left: 51.75%; }
.map-japan-area .city-yoshino { top: 57%; left: 41.5%; }
.map-japan-area .city-kumamoto { top: 60.75%; left: 16.25%; }
.map-japan-area .city-matsuyama { top: 57.5%; left: 26.25%; }
.map-japan-area .city-fukushima { top: 44.5%; left: 65.75%; }
.map-japan-area .city-kitakami { top: 35.75%; left: 70.5%; }
.map-japan-area .city-kakunodate { top: 34%; left: 69%; }
.map-japan-area .city-hirosaki { top: 29.5%; left: 69.25%; }

.map-japan-area .city-aizu-wakamatsu { top: 44.5%; left: 64%; }
.map-japan-area .city-aomori { top: 28.5%; left: 72%; }
.map-japan-area .city-morioka { top: 33.5%; left: 73.5%; }
.map-japan-area .city-akita { top: 32.5%; left: 68%; }
.map-japan-area .city-niigata { top: 42%; left: 61.5%; }

.map-japan-area .spot-city { line-height: 1.1; }
.map-japan-area .spot-city::before { position: absolute; top: 50%; left: 0; margin-top: -2px; margin-left: -8px; width: 4px; height: 4px; content: ""; background-color: var(--white); border: 2px solid var(--grapefruit-1); border-radius: 50%; }
.map-japan-area .city-hakodate, .map-japan-area .city-takayama, .map-japan-area .city-hakone, .map-japan-area .city-nara, .map-japan-area .city-kagoshima, .map-japan-area .city-nagasaki, .map-japan-area .city-osaka, .map-japan-area .city-fukuoka, .map-japan-area .city-nikko { display: none; }
.map-japan-area .region-hokkaido { top: 14%; left: 80%; }
.map-japan-area .region-tohoku { top: 35%; left: 68%; }
.map-japan-area .region-kanto { top: 50%; left: 58%; }
.map-japan-area .region-chubu { top: 51%; left: 50%; }
.map-japan-area .region-kansai { top: 52%; left: 36%; }
.map-japan-area .region-chugoku { top: 51%; left: 27%; }
.map-japan-area .region-shikoku { top: 58%; left: 28%; }
.map-japan-area .region-kyushu { top: 62%; left: 15%; }
.map-japan-area .region-okinawa { top: 68%; left: 80%; }
.map-japan-area .spot-region { color: var(--darkgray-2); font-size: var(--text-14); }
.map-japan-area .spot-city { color: var(--darkgray-1); font-size: 11px; }
.map-japan-area span { -webkit-transition: color 0.25s; transition: color 0.25s; }
.map-japan-area span:hover { color: var(--grapefruit-1); }

.map-japan-area .map-area.area-hokkaido:hover, .map-japan-area .map-area.js-hover { fill: rgba(252, 110, 81, 0.15); }
.map-japan-area .map-area.area-tohoku:hover, .map-japan-area .map-area.js-hover { fill: rgba(255, 206, 84, 0.15); }
.map-japan-area .map-area.area-kanto:hover, .map-japan-area .map-area.js-hover { fill: rgba(160, 212, 104, 0.15); }
.map-japan-area .map-area.area-chubu:hover, .map-japan-area .map-area.js-hover { fill: rgba(72, 207, 173, 0.15); }
.map-japan-area .map-area.area-kansai:hover, .map-japan-area .map-area.js-hover { fill: rgba(79, 193, 233, 0.15); }
.map-japan-area .map-area.area-chugoku:hover, .map-japan-area .map-area.js-hover { fill: rgba(93, 156, 236, 0.15); }
.map-japan-area .map-area.area-shikoku:hover, .map-japan-area .map-area.js-hover { fill: rgba(172, 146, 236, 0.15); }
.map-japan-area .map-area.area-kyushu:hover, .map-japan-area .map-area.area-okinawa:hover, .map-japan-area .map-area.js-hover { fill: rgba(236, 135, 192, 0.15); }
.map-japan-area .city-sapporo::before, .map-japan-area .city-hakodate::before { border-color: var(--bittersweet-1); }
.map-japan-area .region-hokkaido span:hover, .map-japan-area .city-sapporo span:hover, .map-japan-area .city-hakodate span:hover { color: var(--bittersweet-2); }
.map-japan-area .city-sendai::before, .map-japan-area .city-aizu-wakamatsu::before, .map-japan-area .city-aomori::before, .map-japan-area .city-morioka::before, .map-japan-area .city-akita::before { border-color: var(--sunflower-1); }
.map-japan-area .region-tohoku span:hover, .map-japan-area .city-sendai span:hover, .map-japan-area .city-aizu-wakamatsu span:hover, .map-japan-area .city-aomori span:hover, .map-japan-area .city-morioka span:hover, .map-japan-area .city-akita span:hover { color: var(--sunflower-2); }


.map-japan-area .city-tokyo::before, .map-japan-area .city-hakone::before, .map-japan-area .city-nikko::before { border-color: var(--grass-1); }
.map-japan-area .region-kanto span:hover, .map-japan-area .city-tokyo span:hover, .map-japan-area .city-hakone span:hover, .map-japan-area .city-nikko span:hover { color: var(--grass-2); }
.map-japan-area .city-niigata::before, .map-japan-area .city-kanazawa::before, .map-japan-area .city-takayama::before { border-color: var(--mint-1); }
.map-japan-area .region-chubu span:hover, .map-japan-area .city-niigata span:hover, .map-japan-area .city-kanazawa span:hover, .map-japan-area .city-takayama span:hover { color: var(--mint-2); }
.map-japan-area .city-kyoto::before, .map-japan-area .city-osaka::before, .map-japan-area .city-nara::before { border-color: var(--aqua-1); }
.map-japan-area .region-kansai span:hover, .map-japan-area .city-kyoto span:hover, .map-japan-area .city-osaka span:hover, .map-japan-area .city-nara span:hover { color: var(--aqua-2); }
.map-japan-area .city-hiroshima::before { border-color: var(--bluejeans-1); }
.map-japan-area .region-chugoku span:hover, .map-japan-area .city-hiroshima span:hover { color: var(--bluejeans-2); }
.map-japan-area .region-shikoku span:hover { color: var(--lavander-2); }
.map-japan-area .city-fukuoka::before, .map-japan-area .city-kagoshima::before, .map-japan-area .city-nagasaki::before { border-color: var(--pinkrose-1); }
.map-japan-area .region-kyushu span:hover, .map-japan-area .region-okinawa span:hover, .map-japan-area .city-fukuoka span:hover, .map-japan-area .city-kagoshima span:hover, .map-japan-area .city-nagasaki span:hover { color: var(--pinkrose-2); }



@media (min-width: 780px) {
	.map-japan-area .spot-city { font-size: var(--text-10); }
}
@media (min-width: 460px) {
	.map-japan-area .city-sapporo, .map-japan-area .city-sendai, .map-japan-area .city-kanazawa, .map-japan-area .city-hiroshima, .map-japan-area .city-fukuoka, .map-japan-area .city-nikko, .map-japan-area .city-nara, .map-japan-area .city-kagoshima, .map-japan-area .city-hakone, .map-japan-area .city-osaka { display: block; }
	.map-japan-area .city-hiroshima { display: none; }
}
@media (min-width: 600px) {
	.map-japan-area .city-osaka, .map-japan-area .city-hakodate, .map-japan-area .city-nikko, .map-japan-area .city-hiroshima { display: block; }
}
@media (min-width: 780px) {
	.map-japan-area .city-nagasaki, .map-japan-area .city-takayama { display: block; }
}
@media (max-width: 600px) {
  .map-japan-area .spot-region { display: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.japan-map { padding: 0 3%; }
}
@media (max-width: 991px) {
	.japan-map { margin: 0; padding: 0; }
}