@charset "UTF-8";

/* =========================================================
   [wm-] 接頭辞を付与：他ページへの干渉を鉄壁ガード
   ========================================================= */

/* ヘッダー周り */
.wm-page-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 15px;
}
.wm-h1 {
    font-size: 1.8em;
    border-bottom: 3px solid #0073aa;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.wm-h2 {
    color: #333;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}
.wm-description {
    margin-top: 5px;
    color: #666;
    font-size: 0.95em;
    line-height: 1.6;
}

/* 地図外枠 */
.wm-map-wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 40px 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* 地方タイトル (h3) */
#japan-map h3.area-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    background: none !important;
    border: none !important;
}

/* 詳細パネル */
.wm-panel-outer {
    margin-top: 50px;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s ease;
}
.wm-panel-inner {
    background: #f8fafc;
    border-radius: 12px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-top: 6px solid #60a5fa;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.wm-panel-main-title {
    margin-bottom: 20px;
    font-size: 1.4em;
    color: #1e293b;
    font-weight: bold;
    text-align: center;
}
.wm-panel-city-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 0;
}
.wm-panel-footer {
    margin-top: 30px;
    text-align: center;
    border-top: 1px dashed #cbd5e1;
    padding-top: 20px;
}
#pref-link {
    display: inline-block;
    background: #60a5fa;
    color: #fff;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
}

/* SP最適化 */
@media screen and (max-width: 768px) {
    .wm-h1 { font-size: 1.4em !important; }
    .wm-h2 { font-size: 1.1em !important; }
    .wm-panel-inner { padding: 20px 15px; }
    .wm-panel-main-title { font-size: 1.2em; }
}

/* 以下、既存の地図座標データなどはそのまま維持 */
#japan-map .area a div {
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}


/* 地方別カラー */
#hokkaido-tohoku div.area div { background-color: #60a5fa; color: #fff; }
#kanto div.area div           { background-color: #34d399; color: #fff; }
#chubu div.area div            { background-color: #fbbf24; color: #fff; }
#kinki div.area div            { background-color: #a78bfa; color: #fff; }
#chugoku div.area div          { background-color: #fb923c; color: #fff; }
#shikoku div.area div          { background-color: #f472b6; color: #fff; }
#kyushu div.area div           { background-color: #f87171; color: #fff; }

/* =========================================================
   PC版の設定 (777px以上)
   ========================================================= */
@media screen and (min-width: 777px) {
    #japan-map {
        display: block; width: 777px; height: 482px;
        margin: 40px auto; position: relative;
    }

    #japan-map .area a {
    text-decoration: none !important; /* 💡 アンダーバーを強制非表示 */
}
    #hokkaido-tohoku, #kanto, #chubu, #kinki, #chugoku, #shikoku, #kyushu {
        position: absolute;
    }
    #hokkaido-tohoku { left: 638px; top: 0; }
    #kanto           { left: 623px; top: 265px; z-index: 2; }
    #chubu            { left: 438px; top: 223px; }
    #kinki            { left: 320px; top: 223px; }
    #chugoku          { left: 169px; top: 223px; }
    #shikoku          { left: 169px; top: 350px; }
    #kyushu           { left: 0px;   top: 235px; }

    #japan-map .area a div { position: absolute; font-size: 12px; border: 1px solid rgba(255,255,255,0.5); }
    /* 💡 マウスオーバー 1.5倍演出 */
    #japan-map .area a:hover div { transform: scale(1.5) translateY(-5px); z-index: 9999; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

    /* 📍 各県の座標データ（ここは絶対に変えないでください） */
    #hokkaido { width: 133px; height: 70px; left: 0; top: 0; }
    #aomori { width: 93px; height: 43px; left: 21px; top: 96px; }
    #akita { width: 67px; height: 42px; left: 3px; top: 139px; }
    #iwate { width: 67px; height: 42px; left: 70px; top: 139px; }
    #yamagata { width: 67px; height: 42px; top: 181px; left: 3px; }
    #miyagi { width: 67px; height: 42px; top: 181px; left: 70px; }
    #fukushima { width: 67px; height: 42px; top: 223px; left: 70px; }
    #ibaraki { width: 52px; height: 85px; left: 100px; top: 0px; }
    #tochigi { width: 50px; height: 42px; left: 50px; top: 0px; }
    #gunma { width: 50px; height: 42px; left: 0px; top: 0px; }
    #saitama { width: 100px; height: 43px; left: 0px; top: 42px; }
    #chiba { width: 52px; height: 84px; left: 100px; top: 85px; }
    #tokyo { width: 100px; height: 42px; left: 0px; top: 85px; }
    #kanagawa { width: 67px; height: 42px; left: 0px; top: 127px; }
    #niigata { width: 85px; height: 42px; left: 185px; top: 0; }
    #toyama { width: 67px; height: 42px; left: 118px; top: 0; }
    #ishikawa { width: 50px; height: 57px; left: 68px; top: 0; }
    #fukui { width: 68px; height: 42px; left: 0px; top: 0; }
    #nagano { width: 67px; height: 85px; left: 118px; top: 42px; }
    #yamanashi { width: 67px; height: 42px; left: 118px; top: 127px; }
    #gifu { width: 50px; height: 55px; left: 68px; top: 57px; }
    #shizuoka { width: 67px; height: 42px; left: 118px; top: 169px; }
    #aichi { width: 50px; height: 57px; top: 112px; left: 68px; }
    #kyoto { width: 67px; height: 84px; left: 51px; top: 0; }
    #shiga { width: 68px; height: 42px; top: 42px; left: 118px; }
    #osaka { width: 67px; height: 85px; left: 51px; top: 84px; }
    #nara { width: 34px; height: 85px; top: 84px; left: 118px; }
    #mie { width: 34px; height: 85px; top: 84px; left: 152px; }
    #wakayama { width: 113px; height: 42px; left: 61px; top: 169px; }
    #hyogo { width: 51px; height: 98px; left: 0px; top: 0; }
    #tottori { width: 50px; height: 49px; left: 101px; top: 0; }
    #okayama { width: 50px; height: 49px; left: 101px; top: 49px; }
    #shimane { width: 51px; height: 49px; left: 50px; top: 0; }
    #hiroshima { width: 51px; height: 49px; left: 50px; top: 49px; }
    #yamaguchi { width: 50px; height: 98px; left: 0px; top: 0; }
    #kagawa { width: 92px; height: 42px; left: 92px; top: 0; }
    #ehime { width: 92px; height: 42px; left: 0; top: 0; }
    #tokushima { width: 92px; height: 42px; left: 92px; top: 42px; }
    #kochi { width: 92px; height: 42px; left: 0; top: 42px; }
    #fukuoka { width: 50px; height: 50px; left: 101px; top: 0px; }
    #saga { width: 50px; height: 50px; left: 51px; top: 0px; }
    #nagasaki { width: 50px; height: 50px; left: 1px; top: 0px; }
    #oita { width: 50px; height: 50px; left: 101px; top: 50px; }
    #kumamoto { width: 50px; height: 100px; left: 51px; top: 50px; }
    #miyazaki { width: 50px; height: 50px; left: 101px; top: 100px; }
    #kagoshima { width: 68px; height: 49px; left: 83px; top: 150px; }
    #okinawa { width: 50px; height: 50px; left: 1px; top: 197px; }
}

/* =========================================================
   レスポンシブ版 (776px以下)
   ========================================================= */
@media screen and (max-width: 776px) {
    #japan-map {
        display: flex !important; flex-wrap: wrap; width: 100%; height: auto !important;
        justify-content: space-around; padding: 10px 0;
    }
#japan-map .area a {
    text-decoration: none !important; /* 💡 アンダーバーを強制非表示 */
}
    #hokkaido-tohoku, #kanto, #chubu, #kinki, #chugoku, #shikoku, #kyushu {
        display: block; position: static !important; width: 100%; margin-bottom: 20px;
    }
    #japan-map p.area-title {
        display: block !important; width: 100%; font-size: 15px; text-align: center;
        margin: 1.5em 0 1em; font-weight: bold;
    }
    #japan-map div.area {
        display: flex !important; flex-wrap: wrap; justify-content: center; gap: 5px;
    }
    #japan-map div.area a {
        display: block; width: 23%; height: 45px; position: static !important;
    }
    #japan-map div.area a div {
        position: static !important; width: 100% !important; height: 100% !important;
        left: auto !important; top: auto !important; font-size: 14px;
    }
}

/* =========================================================
   スマホ完全最適化 (500px以下)
   ========================================================= */
@media screen and (max-width: 500px) {
    #japan-map div.area a { width: 31%; } /* iPhone13等で3つ並びに */
    #japan-map div.area a div { font-size: 15px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
}