:root{--grid:100cqw/39;--scale:1}
#japan-map{container-type:inline-size;max-width:960px;position:relative;margin-inline:auto;aspect-ratio: 39 / 22}
#japan-map :is(button,div){border:1px solid #fff;text-align:center;font-size:.875rem;display:flex;align-items:center;justify-content:center;border-radius:6px;position:absolute;box-sizing:border-box;transition:.2s;color:#fff;line-height:1}
@media(max-width:587px){:root{--scale:2}#japan-map{aspect-ratio: 39 / 44}}
@media(max-width:405px){:root{--scale:2.5}#japan-map{aspect-ratio: 39 / 55}}
#chiba,#fukuoka,#gunma,#ibaraki,#kumamoto,#mie,#miyazaki,#nagasaki,#nara,#oita,#okinawa,#saga,#tochigi{width:calc(var(--grid) * 2)}
#aichi,#akita,#fukushima,#gifu,#hiroshima,#hyogo,#ishikawa,#iwate,#kagoshima,#kanagawa,#kyoto,#miyagi,#okayama,#osaka,#shimane,#tottori,#toyama,#yamagata,#yamaguchi{width:calc(var(--grid) * 3)}
#aomori,#fukui,#nagano,#niigata,#saitama,#shiga,#shizuoka,#tokyo,#yamanashi,#ehime,#kagawa,#kochi,#tokushima{width:calc(var(--grid) * 4)}
#wakayama{width:calc(var(--grid) * 5)}
#akita,#aomori,#ehime,#fukui,#fukushima,#gunma,#hiroshima,#iwate,#kagawa,#kanagawa,#kochi,#miyagi,#miyazaki,#niigata,#oita,#okayama,#okinawa,#saitama,#shiga,#shimane,#shizuoka,#tochigi,#tokushima,#tokyo,#tottori,#toyama,#wakayama,#yamagata,#yamanashi{height:calc(var(--grid) * var(--scale) * 2)}
#aichi,#fukuoka,#gifu,#hokkaido,#ishikawa,#kagoshima,#nagasaki,#saga{height:calc(var(--grid) * var(--scale) * 3)}
#chiba,#hyogo,#ibaraki,#kumamoto,#kyoto,#nagano,#nara,#osaka,#yamaguchi{height:calc(var(--grid) * var(--scale) * 4)}
#mie{height:calc(var(--grid) * var(--scale) * 5);left:calc(var(--grid) * 24)}
#akita,#iwate{top:calc(var(--grid) * var(--scale) * 6)}
#miyagi,#yamagata{top:calc(var(--grid) * var(--scale) * 8)}
#fukushima,#iwate,#miyagi{left:calc(var(--grid) * 36)}
#chiba,#ibaraki{left:calc(var(--grid) * 37)}
#akita,#gunma,#hokkaido,#kanagawa,#saitama,#tokyo,#yamagata{left:calc(var(--grid) * 33)}
#aichi,#gifu,#ishikawa{left:calc(var(--grid) * 26)}
#nagano,#shizuoka,#toyama,#yamanashi{left:calc(var(--grid) * 29)}
#fukui,#nara,#shiga{left:calc(var(--grid) * 22)}
#mie,#nara,#osaka,#saitama{top:calc(var(--grid) * var(--scale) * 14)}
#kyoto,#osaka,#wakayama{left:calc(var(--grid) * 19)}
#hiroshima,#shimane{left:calc(var(--grid) * 10)}
#gifu,#gunma,#hiroshima,#ibaraki,#nagano,#okayama,#shiga,#tochigi{top:calc(var(--grid) * var(--scale) * 12)}
#chiba,#ehime,#kagawa,#tokyo,#yamanashi{top:calc(var(--grid) * var(--scale) * 16)}
#kagawa,#okayama,#tokushima,#tottori{left:calc(var(--grid) * 13)}
#ehime,#kochi{left:calc(var(--grid) * 9)}
#kanagawa,#kochi,#shizuoka,#tokushima,#wakayama{top:calc(var(--grid) * var(--scale) * 18)}
#fukui,#fukuoka,#fukushima,#hyogo,#kyoto,#nagasaki,#niigata,#saga,#shimane,#tottori,#toyama,#yamaguchi{top:calc(var(--grid) * var(--scale) * 10)}
#kumamoto,#saga{left:calc(var(--grid) * 2)}
#kumamoto,#oita{top:calc(var(--grid) * var(--scale) * 13)}
#fukuoka,#miyazaki,#oita{left:calc(var(--grid) * 4)}
#aichi,#miyazaki{top:calc(var(--grid) * var(--scale) * 15)}
#aomori{left:calc(var(--grid) * 34);top:calc(var(--grid) * var(--scale) * 4)}
#tochigi{left:calc(var(--grid) * 35)}
#niigata{left:calc(var(--grid) * 32)}
#ishikawa{top:calc(var(--grid) * var(--scale) * 9)}
#hyogo{left:calc(var(--grid) * 16)}
#yamaguchi{left:calc(var(--grid) * 7)}
#kagoshima{left:calc(var(--grid) * 3);top:calc(var(--grid) * var(--scale) * 17)}
#okinawa{top:calc(var(--grid) * var(--scale) * 20)}
#hokkaido{width:calc(var(--grid) * 6);background:#60a5fa}
#akita,#aomori,#fukushima,#iwate,#miyagi,#yamagata{background:#7478c2}
#chiba,#gunma,#ibaraki,#kanagawa,#saitama,#tochigi,#tokyo{background:#31beca}
#aichi,#fukui,#gifu,#ishikawa,#mie,#shizuoka,#toyama,#yamanashi,#nagano,#niigata{background:#4ab969}
#hyogo,#kyoto,#nara,#osaka,#shiga,#wakayama{background:#b0b72f}
#hiroshima,#okayama,#shimane,#tottori,#yamaguchi{background:#ef9f27}
#ehime,#kagawa,#kochi,#tokushima{background:#d08f68}
#fukuoka,#kagoshima,#kumamoto,#miyazaki,#nagasaki,#oita,#okinawa,#saga{background:#ff7575}