/*--top---------*/
#alpha-wide {
    padding: 40px 0;
}

/*::::::::::: JAPAN MAP 日本地図 調整版 :::::::::::*/
/******* 地図成形 *******/
#japan-map div div.area div {
    border: 1px #ffffff solid;
    text-align: center;
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    /* 縦方向中央揃え */
    -webkit-align-items: center;
    /* 縦方向中央揃え（Safari用） */
    justify-content: center;
    /* 横方向中央揃え */
    -webkit-justify-content: center;
    /* 横方向中央揃え（Safari用） */
    border-radius: 6px;
    -webkit-border-radius: 6px;
    position: absolute;
    box-sizing: border-box;
    transition: 0.2s;
}

#japan-map div div.area div:hover {
    opacity: 0.5;
    transition: 0.2s;
}

#japan-map {
    display: block;
    width: 777px;
    height: 482px;
    background-color: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#japan-map p.area-title {
    display: none;
}



/* 北海道・東北 */

#hokkaido-touhoku {
    width: 136px;
    display: block;
    height: 265px;
    position: absolute;
    left: 638px;
}

#hokkaido-touhoku div.area div {
    background-color: #7478c2;
    color: #ffffff;
}

#hokkaido {
    width: 133px;
    height: 70px;
}

#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;
}

/* 関東 */

#kantou {
    width: 158px;
    display: block;
    height: 174px;
    position: absolute;
    top: 265px;
    left: 623px;
    z-index: 2;
}

#kantou div.area div {
    background-color: #31beca;
    color: #ffffff;
}

#ibaraki {
    width: 52px;
    height: 85px;
    top: 0px;
    left: 100px;
}

#tochigi {
    width: 50px;
    height: 42px;
    top: 0px;
    left: 50px;
}

#gunma {
    width: 50px;
    height: 42px;
    top: 0px;
    left: 0px;
}

#saitama {
    width: 100px;
    height: 43px;
    top: 42px;
    left: 0px;
}

#chiba {
    width: 52px;
    height: 84px;
    top: 85px;
    left: 100px;
}

#tokyo {
    width: 100px;
    height: 42px;
    top: 85px;
    left: 0px;
}

#kanagawa {
    width: 67px;
    height: 42px;
    top: 127px;
    left: 0px;
}

/* 中部 */

#tyubu {
    width: 270px;
    height: 211px;
    position: absolute;
    left: 438px;
    top: 223px;
}

#tyubu div.area div {
    background-color: #4ab969;
    color: #ffffff;
}

#nigata {
    width: 85px;
    height: 42px;
    left: 185px;
}

#toyama {
    width: 67px;
    height: 42px;
    left: 118px;
}

#ishikawa {
    width: 50px;
    height: 57px;
    left: 68px;
}

#fukui {
    width: 68px;
    height: 42px;
    left: 0px;
    z-index: 2;
}

#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;
}

/* 近畿 */

#kinki {
    width: 186px;
    height: 211px;
    position: absolute;
    left: 320px;
    top: 223px;
}

#kinki div.area div {
    background-color: #b0b72f;
    color: #ffffff;
}

#kyoto {
    width: 67px;
    height: 84px;
    left: 51px;
}

#shiga {
    width: 68px;
    height: 42px;
    top: 42px;
    left: 118px;
}

#osaka {
    width: 67px;
    height: 85px;
    top: 84px;
    left: 51px;
}

#nara {
    width: 34px;
    height: 85px;
    top: 84px;
    left: 118px;
}

#mie {
    width: 34px;
    height: 85px;
    top: 84px;
    left: 152px;
}

#wakayama {
    width: 113px;
    height: 42px;
    top: 169px;
    left: 61px;
}

#hyougo {
    width: 51px;
    height: 98px;
    left: 0px;
}

/* 中国 */

#tyugoku {
    width: 151px;
    height: 98px;
    position: absolute;
    left: 169px;
    top: 223px;
}

#tyugoku div.area div {
    background-color: #ef9f27;
    color: #ffffff;
}

#tottori {
    width: 50px;
    height: 49px;
    left: 101px;
}

#okayama {
    width: 50px;
    height: 49px;
    top: 49px;
    left: 101px;
}

#shimane {
    width: 51px;
    height: 49px;
    left: 50px;
}

#hiroshima {
    width: 51px;
    height: 49px;
    top: 49px;
    left: 50px;
}

#yamaguchi {
    width: 50px;
    height: 98px;
    left: 0px;
}

/* 四国 */

#shikoku {
    width: 184px;
    height: 84px;
    position: absolute;
    left: 169px;
    top: 350px;
}

#shikoku div.area div {
    background-color: #d08f68;
    color: #ffffff;
}

#kagawa {
    width: 92px;
    height: 42px;
    right: 0px;
}

#ehime {
    width: 92px;
    height: 42px;
    left: 0px;
}

#tokushima {
    width: 92px;
    height: 42px;
    right: 0px;
    top: 42px;
}

#kouchi {
    width: 92px;
    height: 42px;
    left: 0px;
    top: 42px;
}

/* 九州・沖縄 */

#kyusyu {
    width: 152px;
    height: 247px;
    position: absolute;
    left: 0px;
    top: 235px;
}

#kyusyu div.area div {
    background-color: #ff7575;
    color: #ffffff;
}

#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;
}


/****************************************
	レスポンシブ

****************************************/
@media screen and (max-width: 776px) {
    #japan-map {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
        height: auto;
    }

    #japan-map p.area-title {
        display: inline-block;
        width: 100%;
        font-size: 15px;
        text-align: center;
        margin-top: 1.5em;
        margin-bottom: 1em;
        color: #000000;
    }

    #hokkaido-touhoku,
    #kantou,
    #tyubu,
    #kinki,
    #tyugoku,
    #shikoku,
    #kyusyu {
        display: block;
        position: static;
        margin: 0 1em 0 1em;
    }

    #japan-map div div.area {
        display: block;
        position: relative;
    }

    #hokkaido-touhoku {
        height: calc(265px + 4.5em);
    }

    #kantou {
        height: calc(174px + 4.5em);
    }

    #tyubu {
        height: calc(211px + 4.5em);
    }

    #kinki {
        height: calc(211px + 4.5em);
    }

    #tyugoku {
        height: calc(98px + 4.5em);
    }

    #shikoku {
        height: calc(84px + 4.5em);
    }

    #kyusyu {
        height: calc(247px + 4.5em);
    }

}

/* レスポンシブ max-776px */



@media screen and (max-width: 500px) {
    #japan-map {
        display: block;
        width: 100%;
        height: auto;
    }

    #hokkaido-touhoku,
    #kantou,
    #tyubu,
    #kinki,
    #tyugoku,
    #shikoku,
    #kyusyu {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        position: static;
        margin-left: 0px;
        margin-right: 0px;
    }

    #japan-map div div.area {
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    #japan-map div div.area a {
        height: auto;
        width: 25%;
    }

    #japan-map div div.area div {
        display: block;
        border-radius: 0px;
        position: static;
        height: auto;
        font-size: 16px;
        width: 100%;
        padding: 0.5em 0.3em 0.5em 0.3em;
    }


}

/* レスポンシブ max-500px */


#japan-map div.area .off div {
    background-color: #999 !important;
    color: #ffffff;
    pointer-events: none;
    /* クリック、ホバー、ドラッグなどをすべて無効化 */
    cursor: default;
    /* カーソルを指マークにせず、矢印のままにする */
}

.list-link {
font-size:18px;
font-weight:400;
}

/*--archives----------*/

.container {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    gap: 30px;
    padding: 20px;
}

.main-content {
    flex: 3;
}

.sidebar {
    flex: 1;
    font-size: 14px;
}

/* 都道府県タイトル */
.pref-title {
    border-left: 4px solid #004a99;
    padding-left: 15px;
    background: #f4f4f4;
    line-height: 2.5;
    margin-bottom: 20px;
}

/* 会員カード */
.member-card {
    display: flex;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    gap: 20px;
}

.member-logo {
    width: 150px;
    min-height: 120px;

    img {
        width: 100%;
        height: auto;
    }
}

.member-info {
    flex: 1;
}

.company-name {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;

    a {
        text-decoration: none !important;
    }
}

.info-list dt {
    font-weight: bold;
    color: #004a99;
    font-size: 12px;
    margin-top: 10px;
}

.info-list dd {
    margin-left: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ボタン */
.btn-area {
    text-align: right;
    margin-top: 15px;
}

.btn-detail {
    display: inline-block;
    background: #004a99;
    color: #fff !important;
    padding: 8px 25px;
    text-decoration: none;
    font-size: 12px;
    border-radius: 3px;

}

/* サイドバーナビ */
.area-nav h4 {
    background: #eee;
    padding: 5px 10px;
    font-size: 13px;
    margin: 15px 0 5px;
}

.area-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.area-nav a {
    text-decoration: none;
    color: #666;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .member-card {
        flex-direction: column;
    }

    .member-logo {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
}

/*--detailes--------------*/

/* プロファイル上部 */
.profile-header {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.profile-logo {
    width: 280px;

    img {
        width: 100%;
        height: auto;
    }
}
.profile-summary {
    width: calc(100% - 30px - 280px);

}


.company-name {
    font-size: 24px;
    border-bottom: 2px solid #004a99;
    padding-bottom: 10px;
}

/* 詳細テーブル */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.info-table th {
    width: 30%;
    background: #f4f4f4;
    text-align: left;
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #004a99;
}

.info-table td {
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 14px;
}

/* 会員一覧テーブル */
.members-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.members-table th {
    background: #f4f4f4;
    text-align: left;
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #004a99;
}

.members-table td {
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.members-table td a {
    color: #004a99;
    text-decoration: none;
}

.members-table td a:hover {
    text-decoration: underline;
}

/* アピールセクション */
.section-title {
    color: #004a99;
    border-bottom: 1px solid #004a99;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.appeal-text {
    line-height: 1.8;
    font-size: 14px;
    margin-bottom: 40px;
}

/* ギャラリー（CSS Gridを使用） */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 220px);
    gap: 15px;
    margin-bottom: 50px;
}

.gallery-item img {
    width: 100%;
    height: auto;
}

/* 画像拡大モーダル */
.js-modal-image {
    cursor: zoom-in;
    transition: opacity 0.3s;
}

.js-modal-image:hover {
    opacity: 0.8;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    cursor: zoom-out;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}

.modal-content img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    border: 3px solid #fff;
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.modal-prev,
.modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.modal-prev:hover,
.modal-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-prev {
    left: -70px;
}

.modal-next {
    right: -70px;
}

/* モーダル表示中の背景スクロール防止 */
body.modal-open {
    overflow: hidden;
}

/* ページ送り */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.pagination a {
    text-decoration: none;
    padding: 8px 15px;
    font-size: 12px;
    border: 1px solid #004a99;
    color: #004a99;
}

.page-back {
    background: #004a99;
    color: #fff !important;
}

.page-arrow {
    color: #004a99;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .profile-header {
        flex-direction: column;
    }

    .profile-logo {
        width: 100%;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .info-table th,
    .info-table td {
        display: block;
        width: 100%;
    }
}


/* エリア見出し（関東など） */
.area-nav h4 {
    background-color: #f2f2f2;
    /* 画像のような薄いグレー */
    color: #333;
    font-size: 13px;
    padding: 5px 10px;
    margin: 15px 0 5px 0;
    border-left: 4px solid #004a99;
    /* アクセントの青線 */
    font-weight: bold;
}

/* 都道府県リストの横並び設定 */
.area-nav ul {
    display: flex;
    flex-wrap: wrap;
    /* 横に並べて溢れたら改行 */
    list-style: none;
    padding: 0 10px;
    margin-bottom: 10px;
}

.area-nav ul li {
    margin-right: 12px;
    font-size: 12px;
    line-height: 1.8;
}

.area-nav ul li a {
    color: #444;
    text-decoration: none;
}

.area-nav ul li a:hover {
    text-decoration: underline;
    color: #004a99;
}

/* お問い合わせエリアの装飾 */
.side-contact {
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: 20px;
    text-align: center;
}

.contact-title {
    font-weight: bold;
    color: #004a99;
    border-left: 3px solid #004a99;
    text-align: left;
    padding-left: 8px;
    margin-bottom: 10px;
}

.btn-contact-blue {
    display: block;
    background: #0070c0;
    color: #fff !important;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 10px 0;
    border-radius: 3px;
}

.tel-number {
    font-size: 20px;
    font-weight: bold;
    color: #444;
}

.tel-time {
    font-size: 10px;
    color: #888;
    text-align: left;
}

/* 都道府県リストのラップ */
.area-nav ul {
    display: flex;
    flex-wrap: wrap;
    /* 横に並べて入りきらない分を折り返し */
    list-style: none;
    padding: 0 5px;
    margin: 0;
    gap: 8px 12px;
    /* 上下左右の間隔 */
}

/* 各都道府県の項目 */
.area-nav li {
    font-size: 12px;
    line-height: 1.4;
}

/* 都道府県のリンク */
.area-nav li a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

/* ホバー時の演出 */
.area-nav li a:hover {
    color: #004a99;
    text-decoration: underline;
}

/* リンクがない（記事0件）場合のスタイルが必要ならここに追加 */
/* .area-nav li span.no-link { color: #ccc; } */

/* 記事がない都道府県のスタイル */
.area-nav ul li span.no-entry {
    color: #ccc;
    /* 薄いグレーにする */
    cursor: default;
    /* カーソルをポインタにしない */
    font-size: 11px;
    /* 少し小さくしてリンクありと差別化するのもアリ */
}

/* 念のため、親カテゴリ（エリア）に記事が1件もなくても表示したい場合は 
   mt:TopLevelCategories に show_empty="1" を追加してください */