.elementor-40836 .elementor-element.elementor-element-2ecf68e{--display:flex;}.elementor-40836 .elementor-element.elementor-element-c8f06d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-tools .item-compare{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-carousel-module .item-tools .item-compare{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-tools .item-favorite{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-carousel-module .item-tools .item-favorite{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-tools .item-preview{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-carousel-module .item-tools .item-preview{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .label-featured{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-carousel-module .label-featured{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .labels-wrap .label-status{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-carousel-module .labels-wrap .label-status{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .labels-wrap .hz-label{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-carousel-module .labels-wrap .hz-label{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-short-description{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-body .btn-item{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-footer{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-author{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .item-date{display:none;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .property-cards-module .btn-item{bottom:20px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-amenities-text{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .hz-figure{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .h-type span{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .area_postfix{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .btn-item{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-author a{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-date{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-title{margin-bottom:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-address{margin-bottom:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-amenities i{font-size:0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-body{padding:0px 10px 0px 10px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-wrap, .elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-footer{background-color:#02010100;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-wrap{padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .grid-view .item-wrap.item-wrap-no-frame .hover-effect{border-radius:21px 21px 21px 21px;}@media(min-width:768px){.elementor-40836 .elementor-element.elementor-element-c8f06d6{--content-width:1200px;}}@media(max-width:1024px){.elementor-40836 .elementor-element.elementor-element-a1bfcdd > .elementor-widget-container{padding:0px 40px 0px 40px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-title{font-size:15px;}}@media(max-width:767px){.elementor-40836 .elementor-element.elementor-element-a1bfcdd > .elementor-widget-container{padding:0px 15px 0px 15px;}.elementor-40836 .elementor-element.elementor-element-a1bfcdd .item-title{font-size:16px;}}/* Start custom CSS for html, class: .elementor-element-0dc7cd6 *//* * SCOPE: #mm-area-guide-v4 
     * すべてのスタイルはこのID配下に限定し、WordPressテーマとの干渉を防ぎます。
     */
    #mm-area-guide-v4 {
        /* 変数定義 */
        --primary-color: #2c3e50;
        --bg-light: #f9f9f9;
        --border-color: #e0e0e0;
        --text-main: #333333;
        --link-color: #3498db;
        
        --thamrin-accent: #0f9d58; /* タムリン */
        --thamrin-bg: #e7f5ef;
        
        --sudirman-accent: #ff5252; /* スディルマン */
        --sudirman-bg: #fff5f5;

        /* 基本スタイル */
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        line-height: 1.6;
        color: var(--text-main);
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        box-sizing: border-box;
    }

    /* Reset helpers within scope */
    #mm-area-guide-v4 *,
    #mm-area-guide-v4 *::before,
    #mm-area-guide-v4 *::after {
        box-sizing: border-box;
    }
    #mm-area-guide-v4 a {
        text-decoration: none;
        color: var(--link-color);
        transition: opacity 0.2s;
    }
    #mm-area-guide-v4 ul {
        margin: 0;
        padding: 0;
        list-style: none; /* デフォルトはなし、必要に応じて上書き */
    }
    #mm-area-guide-v4 img {
        max-width: 100%;
        height: auto;
    }
    /* 各ページ採用の標準デザインのリンク（リード文用）*/
    #mm-area-guide-v4 .normal-link a {
        color: #2b6cb0;
        text-decoration: underline;
        transition: color 0.2s ease;
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .normal-link a:hover {
            color: #ed8936;
        }
    }

    /* --------------------------------------------------
       タイトル & 目次
       -------------------------------------------------- */
    #mm-area-guide-v4 .mm-page-title {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        margin: 40px 0 30px;
        color: var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 15px;
        line-height: 1.4;
    }
    
    #mm-area-guide-v4 .mm-page-subtitle {
        font-size: 0.6em; /* 文字の大きさ */
        font-weight: 500;   /* 文字の太さ */
        display: block;    /* ブロック化して行を分ける */
        margin-top: 5px;   /* 上との余白 */
        opacity: 0.9;      /* ほんの少し透過させると馴染みます */
    }

    /* --- リード文（導入文） --- */
    #mm-area-guide-v4 .mm-lead-section {
        text-align: left;
        max-width: 900px;        /* 読みやすい幅に制限 */
        margin: -10px auto 45px; /* タイトルとの距離を詰め、目次との間隔を空ける */
        padding: 0 20px;
    }

    #mm-area-guide-v4 .mm-lead-text {
        font-size: 1.05em;       /* 本文よりわずかに大きく */
        line-height: 1.8;        /* 行間を広げてゆったりと */
        color: #4a5568;          /* 少し柔らかい黒 */
    }

    /* スマホ調整 */
    @media (max-width: 600px) {
        #mm-area-guide-v4 .mm-lead-section {
            margin: 0 auto 35px;
        }
        #mm-area-guide-v4 .mm-lead-text {
            font-size: 0.95em;
        }
    }

    /* --- 目次 --- */
    #mm-area-guide-v4 .mm-toc {
        background-color: #f9f9f9;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 25px;
        margin-bottom: 0px; /* 直下の日付要素との余白を考慮し10pxで維持 */
    }
    #mm-area-guide-v4 .mm-toc-title {
        font-size: 1.2em;
        font-weight: bold;
        color: #2c3e50;
        text-align: left;
        margin-bottom: 15px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }
    #mm-area-guide-v4 .mm-toc-title svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }
    #mm-area-guide-v4 .mm-toc ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }
    #mm-area-guide-v4 .mm-toc li {
        position: relative;
        padding-left: 18px;
    }
    #mm-area-guide-v4 .mm-toc li::before {
        content: '\25B6'; /* 古いブラウザ用（音声読み上げされる） */
        content: '\25B6' / ""; /* 対応ブラウザ用（音声読み上げなし） */
        position: absolute;
        left: 0;
        top: 3px; /* テキストとの垂直位置合わせ（微調整） */
        font-size: 0.8em;
        color: #4b6279;
    }
    #mm-area-guide-v4 .mm-toc > ul > li {
        margin-bottom: 10px;
        font-weight: bold;
        color: #4b6279;
    }
    #mm-area-guide-v4 .mm-toc ul ul {
        padding-left: 10px;
        margin-top: 5px;
        font-weight: normal;
    }
    #mm-area-guide-v4 .mm-toc ul ul li {
        margin-bottom: 5px;
        font-size: 0.95em;
    }
    #mm-area-guide-v4 .mm-toc ul ul li::before {
        content: "-"; /* 古いブラウザ用 */
        content: "-" / "";
        color: #4b6279; /* 目次の文字色と統一 */
        font-size: 1em;
        top: 0;
    }
    #mm-area-guide-v4 .mm-toc a {
        color: #2c3e50;
        text-decoration: none;
        transition: opacity 0.2s ease;
        display: block;      /* 追加: 行全体をブロック化 */
        padding: 2px 0;      /* 追加: 上下に余白を持たせる */
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-toc a:hover {
            text-decoration: underline;
        }
    }

    /* 記事公開・編集日時 */
    #mm-area-guide-v4 .mm-publish-date {
        display: block;
        text-align: right;
        margin-top: 0;
        margin-bottom: 40px; /* 次のセクションとの間隔 */
        color: #888;
        font-size: 0.95em;
    }

    /* --------------------------------------------------
       見出し (h2, h3)
       -------------------------------------------------- */
    /* H2 見出し */
    #mm-area-guide-v4 .mm-section-title {
        font-size: 1.6em;
        color: #1a365d;
        background-color: #f8fafc;
        padding: 16px 20px;
        border-left: 6px solid #1a365d;
        border-bottom: 1px solid #e2e8f0;
        margin-top: 80px;
        margin-bottom: 24px;
        border-radius: 0 8px 8px 0;
        font-weight: bold;
        box-shadow: none;
    }

    /* エリアごとのH2アクセントカラー */
    #mm-area-guide-v4 .mm-section-thamrin .mm-section-title {
        color: var(--thamrin-accent);
        border-left-color: var(--thamrin-accent);
        background-color: var(--thamrin-bg);
    }
    #mm-area-guide-v4 .mm-section-sudirman .mm-section-title {
        color: var(--sudirman-accent);
        border-left-color: var(--sudirman-accent);
        background-color: var(--sudirman-bg);
    }

    /* H3 見出し (主要アパート見出し & サブカテゴリータイトル共通) */
    #mm-area-guide-v4 .mm-sub-title,
    #mm-area-guide-v4 .mm-category-title {
        font-size: 1.3em;
        color: #2d3748;
        padding: 0 0 8px 0; /* paddingをリセットして下のみ適用 */
        border-left: none; /* 元の左ボーダーをリセット */
        border-bottom: 2px dashed #cbd5e0;
        margin-top: 60px;
        margin-bottom: 20px;
        position: relative;
        display: flex;
        align-items: center;
        font-weight: bold;
        box-shadow: none; /* 元の影をリセット */
        line-height: 1.4;
    }
    
    #mm-area-guide-v4 .mm-sub-title::before,
    #mm-area-guide-v4 .mm-category-title::before {
        content: '';
        display: inline-block;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        background-color: #ed8936;
        border-radius: 50%;
        margin-right: 12px;
    }

    /* エリアごとのH3アクセントカラー */
    #mm-area-guide-v4 .mm-section-thamrin .mm-sub-title,
    #mm-area-guide-v4 .mm-section-thamrin .mm-category-title {
        color: var(--thamrin-accent);
        border-bottom-color: rgba(15, 157, 88, 0.4); /* 破線を少し馴染ませる */
    }
    #mm-area-guide-v4 .mm-section-thamrin .mm-sub-title::before,
    #mm-area-guide-v4 .mm-section-thamrin .mm-category-title::before {
        background-color: var(--thamrin-accent);
    }

    #mm-area-guide-v4 .mm-section-sudirman .mm-sub-title,
    #mm-area-guide-v4 .mm-section-sudirman .mm-category-title {
        color: var(--sudirman-accent);
        border-bottom-color: rgba(255, 82, 82, 0.4); /* 破線を少し馴染ませる */
    }
    #mm-area-guide-v4 .mm-section-sudirman .mm-sub-title::before,
    #mm-area-guide-v4 .mm-section-sudirman .mm-category-title::before {
        background-color: var(--sudirman-accent);
    }

    /* --------------------------------------------------
       概要 & 地図
       -------------------------------------------------- */
    #mm-area-guide-v4 .mm-overview-text {
        margin-bottom: 30px;
        /* 枠線削除 */
        background: transparent;
        border: none;
        padding: 0;
    }
    #mm-area-guide-v4 .mm-map-wrapper {
        position: relative; /* 子要素（ボタン）を絶対配置するための基準 */
        margin: 30px 0;
        border-radius: 8px;
        background: #f0f0f0; /* 薄いグレー */
        width: 100%;       /* 親要素の幅いっぱいに広げる */
        height: 480px;
        display: block; /* flexからblockに変更 */
        overflow: hidden; /* 角丸からはみ出ないように */
        color: #666;
        font-weight: bold;
    }
    #mm-area-guide-v4 .mm-map-wrapper iframe {
        display: block;    /* 下部の余計な隙間を消す */
        width: 100%;
        height: 100%;
    }

    /* 地図上のオーバーレイボタン */
    #mm-area-guide-v4 .mm-map-overlay-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        
        /* 常時表示にする (inline-flex指定) */
        display: inline-flex;
        
        align-items: center;
        background-color: rgba(255, 255, 255, 0.95);
        color: #333;
        font-size: 0.85em;
        font-weight: bold;
        text-decoration: none;
        padding: 8px 14px;
        border-radius: 4px; /* Google Mapっぽい角丸 */
        box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* 浮き上がり効果 */
        transition: all 0.2s ease;
        border: 1px solid #ddd;
    }

    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-map-overlay-btn:hover {
            background-color: #fff;
            color: #3498db;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
    }

    #mm-area-guide-v4 .mm-map-overlay-btn svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        fill: currentColor;
    }

    /* --------------------------------------------------
       地図下の注意書き
       -------------------------------------------------- */
    #mm-area-guide-v4 .mm-map-note {
        margin-top: 0px;      /* 地図との間隔 */
        color: #888;          /* 文字色：薄めのグレー */
        font-size: 0.85em;    /* 文字サイズ：少し小さく */
        line-height: 1.6;     /* 行間を少し広げて読みやすく */
    }

    #mm-area-guide-v4 .mm-map-note ul {
        list-style: none;     /* リストの点（・）を消す */
        padding: 0;
        margin: 0;
    }

    #mm-area-guide-v4 .mm-map-note li {
        margin-bottom: 4px;    /* 各行の下に少し余白 */
        padding-left: 0;
    }

    /* --------------------------------------------------
       グリッド & カード
       -------------------------------------------------- */
    #mm-area-guide-v4 .mm-grid {
        display: grid;
        /* auto-fit から auto-fill に変更 */
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 40px;
    }

    #mm-area-guide-v4 .mm-card {
        background: #fff;
        border: 1px solid var(--border-color);
        padding: 25px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        /* opacityとtransitionを追加してフェードアニメーションに対応 */
        /* !importantを付けて強制適用し、JSの200msと時間を合わせる */
        transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s ease !important;
        opacity: 1;
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
    }

    /* カード内要素 (優先順位順) */
    /* 1. 特徴タグ (背景アクセント) */
    #mm-area-guide-v4 .mm-card-tag {
        color: #fff;
        font-size: 0.75em;
        font-weight: bold;
        padding: 4px 10px;
        border-radius: 4px;
        margin-bottom: 12px;
        display: inline-block;
        width: fit-content;
    }
    #mm-area-guide-v4 .mm-section-thamrin .mm-card-tag { background-color: var(--thamrin-accent); }
    #mm-area-guide-v4 .mm-section-sudirman .mm-card-tag { background-color: var(--sudirman-accent); }

    /* 2. タイトル (日本語) */
    #mm-area-guide-v4 .mm-card-title-ja {
        font-size: 1.25em;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 4px;
        color: #2d3748;
        line-height: 1.3;
    }
    
    /* 3. タイトル (英語) */
    #mm-area-guide-v4 .mm-card-title-en {
        font-size: 0.85em;
        color: #718096;
        margin-bottom: 8px; /* 15pxから8pxに変更（説明文の上のスペースを詰める） */
        font-weight: normal;
    }

    /* 4. 説明文 */
    #mm-area-guide-v4 .mm-card-desc {
        font-size: 0.95em;
        color: #4a5568;
        margin-bottom: 10px; /* 20pxから10pxに変更（説明文の下のスペースを詰める） */
    }

    /* 6. リンク (アイコン付き) */
    #mm-area-guide-v4 .mm-card-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    #mm-area-guide-v4 .mm-link-btn {
        display: inline-flex;
        align-items: center;
        font-size: 0.75em;
        color: #3498db; /* 指定色 */
        text-decoration: none;
        background: #f1f8ff;
        padding: 6px 12px;
        border-radius: 20px;
        transition: background 0.2s;
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-link-btn:hover {
            background: #e1f0fa;
        }
    }
    #mm-area-guide-v4 .mm-link-btn svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        fill: currentColor;
    }

    /* --------------------------------------------------
       アパートカード専用のボタンスタイル
       -------------------------------------------------- */
    #mm-area-guide-v4 .mm-apt-links {
        display: flex;
        gap: 7px;
        margin-top: auto;
    }
    #mm-area-guide-v4 .mm-apt-map-btn,
    #mm-area-guide-v4 .mm-apt-detail-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    #mm-area-guide-v4 .mm-apt-map-btn {
        flex: 1;
    }
    #mm-area-guide-v4 .mm-apt-map-btn svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        fill: currentColor;
    }
    #mm-area-guide-v4 .mm-apt-detail-btn {
        flex: 2;
        color: #fff;
    }

    /* アパートボタン：タムリン */
    #mm-area-guide-v4 .mm-section-thamrin .mm-apt-map-btn {
        background-color: var(--thamrin-bg);
        border:  1px solid color-mix(in srgb, var(--thamrin-accent) 30%, var(--thamrin-bg) 70%);
        color: var(--thamrin-accent);
    }
    #mm-area-guide-v4 .mm-section-thamrin .mm-apt-detail-btn {
        background-color: color-mix(in srgb, var(--thamrin-accent) 60%, var(--thamrin-bg) 40%);
        border:  1px solid var(--thamrin-accent);
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-section-thamrin .mm-apt-map-btn:hover {
            background-color: #d1ece0; /* 少し濃く */
        }
        #mm-area-guide-v4 .mm-section-thamrin .mm-apt-detail-btn:hover {
            background-color: var(--thamrin-accent);
        }
    }

    /* アパートボタン：スディルマン */
    #mm-area-guide-v4 .mm-section-sudirman .mm-apt-map-btn {
        background-color: var(--sudirman-bg);
        border:  1px solid color-mix(in srgb, var(--sudirman-accent) 30%, var(--sudirman-bg) 70%);
        color: var(--sudirman-accent);
    }
    #mm-area-guide-v4 .mm-section-sudirman .mm-apt-detail-btn {
        background-color: color-mix(in srgb, var(--sudirman-accent) 60%, var(--sudirman-bg) 40%);
        border:  1px solid var(--sudirman-accent);
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-section-sudirman .mm-apt-map-btn:hover {
            background-color: #ffe5e5; /* 少し濃く */
        }
        #mm-area-guide-v4 .mm-section-sudirman .mm-apt-detail-btn:hover {
            background-color: var(--sudirman-accent);
        }
    }

    /* アパート用 特徴リスト */
    #mm-area-guide-v4 .mm-apt-features {
        background: #f8fafc;
        padding: 15px;
        border-radius: 6px;
        font-size: 0.9em;
        margin-bottom: 20px;
        border: 1px solid #edf2f7;
    }
    #mm-area-guide-v4 .mm-apt-features strong {
        display: block;
        margin-bottom: 8px;
        color: #2d3748;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 4px;
    }
    #mm-area-guide-v4 .mm-apt-features ul {
        padding-left: 20px;
        list-style-type: square; /* リストマーカーを表示 */
    }

    /* --------------------------------------------------
       交通メモ 
    -------------------------------------------------- */
    #mm-area-guide-v4 .mm-traffic-box {
        border-width: 2px;
        border-style: solid;
        padding: 35px 25px 25px;
        border-radius: 8px;
        margin: 60px 0 40px 0;
    }
    #mm-area-guide-v4 .mm-section-thamrin .mm-traffic-box { border-color: var(--thamrin-accent); background-color: var(--thamrin-bg); }
    #mm-area-guide-v4 .mm-section-sudirman .mm-traffic-box { border-color: var(--sudirman-accent); background-color: var(--sudirman-bg); }
    
    #mm-area-guide-v4 .mm-traffic-title {
        font-weight: bold;
        font-size: 1.1em;
        margin-top: 0;
        margin-bottom: 15px;
        display: block;
        color: var(--text-main); /* ←基本色 */
    }
    /* 交通メモのリスト：箇条書きスタイル */
    #mm-area-guide-v4 .mm-traffic-box ul {
        list-style: disc;
        padding-left: 20px;
    }
    /* リスト項目の行間調整（読みやすくするため） */
    #mm-area-guide-v4 .mm-traffic-box li {
        margin-bottom: 12px;
        line-height: 1.8;
    }
    
    /* ▼ 交通メモ内のリンク装飾 */
    #mm-area-guide-v4 .mm-traffic-box a {
        /* font-weight: bold; */
        text-decoration: none;
    }
    #mm-area-guide-v4 .mm-section-thamrin .mm-traffic-box a { 
        color: var(--thamrin-accent); 
    }
    #mm-area-guide-v4 .mm-section-sudirman .mm-traffic-box a { 
        color: var(--sudirman-accent); 
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-traffic-box a:hover {
            text-decoration: underline;
        }
    }

    /* ▼ 交通メモ内のSVGアイコン設定 */
    #mm-area-guide-v4 .mm-traffic-box a svg {
        width: 18px;            /* アイコンサイズ */
        height: 18px;
        margin-right: 0px;      /* アイコン・テキスト間 */
        fill: currentColor;     
        
        /* アイコンの位置を微調整してテキストの中心に合わせる */
        vertical-align: -3px;   
    }

    /* ▼ 交通メモ内のStrongタグにアクセントカラーを適用 */
    #mm-area-guide-v4 .mm-section-thamrin .mm-traffic-box strong {
        color: var(--thamrin-accent);
    }
    #mm-area-guide-v4 .mm-section-sudirman .mm-traffic-box strong {
        color: var(--sudirman-accent);
    }

    /* --------------------------------------------------
       ▼ページ途中差し込み用 超シンプルエリアナビ
       -------------------------------------------------- */
    #mm-area-guide-v4 .mm-simple-area-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin: 10px 0;          /* 前後の余白 */
        padding: 12px 16px;
        background-color: #f1f5f9;/* コンテンツに溶け込む薄いグレー */
        border-radius: 8px;
        border: 1px solid #e0e0e0;
    }
    
    /* 扉ページへのリンク（親） */
    #mm-area-guide-v4 .mm-simple-area-nav .nav-parent {
        display: inline-flex;
        align-items: center;
        font-weight: bold;
        font-size: 0.85em;
        color: var(--primary-color);
        text-decoration: none;
        margin-right: 6px;
        margin-bottom: 0; /* ★フッター用の下余白を打ち消す */
    }
    #mm-area-guide-v4 .mm-simple-area-nav .nav-parent svg {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-simple-area-nav .nav-parent:hover {
            color: var(--link-color);
        }
    }
    
    /* 各エリアへのリンク（子） */
    #mm-area-guide-v4 .mm-simple-area-nav .mm-simple-link {
        font-size: 0.75em;
        color: #4a5568;
        background: #fff;
        padding: 4px 10px;
        border-radius: 20px;     /* ボタン的体裁 */
        border: 1px solid #cbd5e0;
        text-decoration: none;
        transition: all 0.2s ease;
        white-space: nowrap;     /* 折り返し防止 */
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-simple-area-nav .mm-simple-link:hover {
            border-color: var(--link-color);
            color: var(--link-color);
            background: #f1f8ff;
        }
    }
    /* 現在のページ */
    #mm-area-guide-v4 .mm-simple-area-nav .mm-simple-link.current {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
        pointer-events: none;
    }

    /* =========================================
       エリアリンクボックス (共通コンポーネント)
    ========================================= */
    /* ▼ テーマカラーの割り当て (タムリン / スディルマン専用) */
    #mm-area-guide-v4 .area-link-box.theme-thamrin { --box-accent-color: var(--thamrin-accent); }
    #mm-area-guide-v4 .area-link-box.theme-sudirman { --box-accent-color: var(--sudirman-accent); }

    /* 全体のボックス */
    #mm-area-guide-v4 .area-link-box {
        background-color: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 15px 18px;
        margin: 20px 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 8px; /* ★左右の隙間を8pxに縮めて、ボタン間の余白を自然にしました */
    }
    /* 直下にリンクノート(.area-link-subnote)があるボックスだけ、下余白を広げる */
    #mm-area-guide-v4 .area-link-box:has(+ .area-link-subnote) {
        padding-bottom: 25px;
    }

    /* タイトルとアイコン */
    #mm-area-guide-v4 .area-link-box-title {
        font-weight: bold;
        color: #2d3748;
        margin-top: 0;    /* h4のデフォルト上余白を消す */
        margin-bottom: 0; 
        font-size: 0.95em;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        margin-right: 6px; /* ★タイトルと最初のボタンの間に少しだけ余白をプラス */
    }
    #mm-area-guide-v4 .area-link-box-title svg {
        width: 18px;
        height: 18px;
        fill: #e53e3e;
    }

    /* グリッドレイアウト */
    #mm-area-guide-v4 .area-link-grid {
        display: contents; /* 枠を透過させてボタンを直接並べる */
    }

    /* ▼ ボタンの基本スタイル（通常時・他エリア用） */
    #mm-area-guide-v4 .area-link-item {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75em;
        text-decoration: none;
        transition: all 0.2s ease;
        font-weight: bold;
        
        /* 基本は primary-color ベース */
        background-color: #eaf1f7; /* 古いブラウザ用のフォールバック */
        background-color: color-mix(in srgb, var(--primary-color) 10%, white 90%);
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color);
    }

    /* ▼ エリアリンクボックス下部の参考リンク用スタイル ▼ */
    #mm-area-guide-v4 .area-link-subnote {
        margin-top: -40px;   /* ★ネガティブマージンで上のボックスの枠線に半分被せる */
        margin-bottom: 40px; /* ★次の要素との間にゆとりを持たせる */
        text-align: right; 
        padding-right: 20px; /* 右端から少し内側に入れる */
        position: relative;  /* 重なり順を制御するため */
        z-index: 2;          /* ボックスより手前に表示 */
    }
    
    /* スマートなボタン風デザイン */
    #mm-area-guide-v4 .area-link-subnote a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9em;
        font-weight: bold;
        color: #1a365d; 
        background-color: #f1f5f9;
        border: 1px solid #e2e8f0; 
        padding: 6px 16px;
        border-radius: 20px; 
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.06); 
    }

    /* PC環境でのホバー（マウスオーバー）時のアクション */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .area-link-subnote a:hover {
            background-color: #f1f8ff; 
            border-color: var(--link-color);
            color: var(--link-color);
            transform: translateY(-2px); 
            box-shadow: 0 6px 12px rgba(0,0,0,0.1); 
            text-decoration: none; 
        }
    }

    /* ▼ ホバー時のスタイル (PC環境のみ) */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .area-link-item:not(.current):not(.disabled):hover {
            background-color: var(--primary-color);
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    }

    /* ▼ current クラス（現在開いているページのボタン） */
    #mm-area-guide-v4 .area-link-item.current {
        background-color: var(--box-accent-color, var(--primary-color));
        border-color: var(--box-accent-color, var(--primary-color));
        color: #ffffff !important;
        pointer-events: none; /* クリックとホバーを無効化 */
        box-shadow: none;
        transform: none;
    }

    /* ▼ disabled クラス（リンクがない時） */
    #mm-area-guide-v4 .area-link-item.disabled {
        background-color: #f7fafc;
        color: #a0aec0 !important;
        border-color: #e2e8f0;
        pointer-events: none; /* クリックとホバーを無効化 */
        font-weight: normal;
        box-shadow: none;
        transform: none;
    }

    /* --------------------------------------------------
       スマート・フッターナビゲーション
       -------------------------------------------------- */
    #mm-area-guide-v4 .footer-nav {
        margin: 40px 0 40px;
        padding: 40px 30px;
        background: #f1f5f9;
        border-radius: 12px;
    }
    #mm-area-guide-v4 .nav-parent {
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 1.1em;
        color: var(--primary-color);
        margin-bottom: 25px;
        text-decoration: none;
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .nav-parent:hover {
            color: var(--link-color);
        }
    }
    #mm-area-guide-v4 .nav-parent svg {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    #mm-area-guide-v4 .nav-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 12px;
    }
    #mm-area-guide-v4 .nav-item {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 12px 18px;
        border-radius: 8px;
        text-decoration: none;
        color: var(--text-main);
        font-size: 0.9em;
        border: 1px solid var(--border-color);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .nav-item:hover {
            background-color: #f1f8ff;
            border-color: var(--link-color);
            color: var(--link-color);
            /* 浮き上がる動作 */
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
    }
    #mm-area-guide-v4 .nav-item.current {
        background: var(--primary-color);
        color: #fff;
        font-weight: bold;
        pointer-events: none;
        border-color: var(--primary-color);
    }
    /* メニュー先頭のポイント削除 */
    #mm-area-guide-v4 .nav-item::before {
        content: none;
    }

    /* --------------------------------------------------
       Line & 問い合わせフォーム ボックス
    -------------------------------------------------- */
    /* 装飾ボックス (ベースと背景色) */
    #mm-area-guide-v4 .custom-box { 
        margin: 20px 0; 
        padding: 15px; 
        border-radius: 8px; 
        position: relative; 
        border: 1px solid transparent; 
        border-left-width: 4px; 
    }
    #mm-area-guide-v4 .custom-box.info-box { 
        padding: 15px; 
        background-color: #fffaf0; 
        border-color: #fbd38d; 
        border-left-color: #ed8936; 
    }

    /* コンパクトCTA (テキストレイアウト) */
    #mm-area-guide-v4 .compact-cta {
        margin: 25px 0 0; 
        text-align: center;
        border-width: 2px;
        border-radius: 8px;
        padding: 0 15px;
    }
    #mm-area-guide-v4 .compact-cta-title {
        color: #9c4221;
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.1em;
        font-weight: bold;
    }
    #mm-area-guide-v4 .compact-cta-desc {
        margin-bottom: 12px;
        font-size: 0.9em;
        line-height: 1.5;
    }
    #mm-area-guide-v4 .compact-cta-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ボタン類のスタイル */
    #mm-area-guide-v4 .btn-pill {
        padding: 8px 18px;
        font-size: 0.9em;
        border-radius: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.2s;
    }
    #mm-area-guide-v4 .btn-pill-outline {
        padding: 8px 18px;
        font-size: 0.9em;
        border-radius: 25px;
        background: #fff;
        color: #1a365d !important;
        border: 2px solid #1a365d;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition: all 0.2s;
        text-decoration: none;
    }
    /* LINE相談ボタン (緑色) */
    #mm-area-guide-v4 .btn-inquiry {
        background-color: #06C755;
        color: #ffffff !important;
        border: 1px solid #06C755;
    }

    /* PC環境のみホバー適用（マウスオーバー時のアクション） */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .btn-pill-outline:hover {
            background-color: #1a365d;
            color: #ffffff !important;
        }
        #mm-area-guide-v4 .btn-inquiry:hover {
            background-color: #05a546;
            border-color: #05a546;
            color: #ffffff;
        }
    }

    /* スマホ向け調整 (画面幅768px以下) */
    @media (max-width: 768px) {
        #mm-area-guide-v4 .custom-box { 
            padding: 12px; 
            margin: 20px 0; 
        }
    }

    /* --------------------------------------------------
       CTAボックス内のサブリンク (控えめなナビゲーション)
    -------------------------------------------------- */
    #mm-area-guide-v4 .compact-cta-sublinks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        margin-top: 15px;
        padding-top: 15px;
        padding-bottom: 3px;
        border-top: 1px dashed #fbd38d; /* CTAボックスの枠色と調和する点線 */
    }
    
    #mm-area-guide-v4 .compact-cta-sublink {
        display: inline-flex;
        align-items: center;
        font-size: 0.8em;
        color: #7b4f2a; /* テキスト色も少し暖色に寄せて馴染ませる */
        background-color: #fff;
        border: 1px solid #f6ad55; /* 薄いオレンジ系の枠 */
        padding: 5px 12px;
        border-radius: 20px;
        text-decoration: none;
        transition: all 0.2s ease;
        white-space: nowrap; /* 途中で改行されないようにする */
    }
    
    #mm-area-guide-v4 .compact-cta-sublink svg {
        width: 14px;
        height: 14px;
        margin-right: 5px;
        fill: currentColor;
    }
    
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .compact-cta-sublink:hover {
            background-color: #fff;
            color: #dd6b20;
            border-color: #dd6b20;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
    }

   /* --------------------------------------------------
     絞り込み機能用のスタイル
   -------------------------------------------------- */
    #mm-area-guide-v4 .mm-filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: -10px;
        margin-bottom: 25px;
    }
    #mm-area-guide-v4 .mm-filter-btn {
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.8em;
        font-weight: bold;
        cursor: pointer;
        background-color: #f0f0f0;
        color: #666;
        border: 1px solid #ddd;
        transition: all 0.2s ease;
    }
    /* PC環境のみホバー適用 */
    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .mm-filter-btn:hover {
            background-color: #e0e0e0;
        }
    }
    
    /* タムリンエリアのフィルタアクティブ状態 */
    #mm-area-guide-v4 .mm-section-thamrin .mm-filter-btn.active {
        background-color: var(--thamrin-accent);
        color: #fff;
        border-color: var(--thamrin-accent);
    }
    /* スディルマンエリアのフィルタアクティブ状態 */
    #mm-area-guide-v4 .mm-section-sudirman .mm-filter-btn.active {
        background-color: var(--sudirman-accent);
        color: #fff;
        border-color: var(--sudirman-accent);
    }
    /* 絞り込み機能スタイルここまで */

    /* レスポンシブ調整 */
    @media (max-width: 600px) {
        #mm-area-guide-v4 .mm-grid { grid-template-columns: 1fr; }
        #mm-area-guide-v4 .mm-section-title { font-size: 20px; }
        #mm-area-guide-v4 .mm-sub-title,
        #mm-area-guide-v4 .mm-category-title { font-size: 18px; }
        #mm-area-guide-v4 .footer-nav { padding: 20px; }

        /* スマホではPC用の改行を無効化（非表示）にする */
        #mm-area-guide-v4 .pc-only {
            display: none;
        }

        /* 施設カード下部のリンクボタン */
        #mm-area-guide-v4 .mm-link-btn {
            padding: 10px 14px; /* スマホではタップしやすいように間をあける */
            font-size: 0.85em;
        }
        
        /* 超シンプルエリアナビのスマホ調整 */
        #mm-area-guide-v4 .mm-simple-area-nav {
            padding: 12px;
            gap: 6px;
        }
        #mm-area-guide-v4 .mm-simple-area-nav .nav-parent {
            width: 100%; /* スマホでは親リンクを単独行にして見やすく */
            font-size: 0.9em; /* さらに少しだけ小さく */
            margin-bottom: 4px;
        }
        #mm-area-guide-v4 .mm-simple-area-nav .mm-simple-link {
            font-size: 0.85em; /* さらに少しだけ小さく */
            margin: 1px 0;
            padding: 4px 8px;
        }
    }

    /* --- 目次ジャンプ時のズレ・固定ヘッダー被り防止 --- */
    /* 基本設定（PC・タブレット用） */
    /* HTML5セマンティックタグ（article, nav, aside）でもズレ防止が機能するように追加 */
    #mm-area-guide-v4 section[id],
    #mm-area-guide-v4 h2[id],
    #mm-area-guide-v4 h3[id],
    #mm-area-guide-v4 div[id],
    #mm-area-guide-v4 article[id],
    #mm-area-guide-v4 nav[id],
    #mm-area-guide-v4 aside[id] {
        /* JavaScript に任せるため、75px から 0px に変更 */
        scroll-margin-top: 0px; /* PCのヘッダーの高さ＋余白に合わせて調整 */
    }

    /* スマホ用の設定（画面幅600px以下） */
    @media (max-width: 600px) {
        /* モバイル時も同様に要素を追加 */
        #mm-area-guide-v4 section[id],
        #mm-area-guide-v4 h2[id],
        #mm-area-guide-v4 h3[id],
        #mm-area-guide-v4 div[id],
        #mm-area-guide-v4 article[id],
        #mm-area-guide-v4 nav[id],
        #mm-area-guide-v4 aside[id] {
            scroll-margin-top: 0px; /* スマホ版ヘッダーなし */
        }
    }

/* =========================================
       「ページトップへ」ボタンのCSS
========================================= */
    #mm-area-guide-v4 .page-top-btn {
        /* position: fixed は画面の右下端に対する「相対配置」です */
        position: fixed;
        right: 63px;       /* PC時の画面右端からの距離 */
        bottom: 132px;     /* PC時の画面下端からの距離 */
        width: 50px;
        height: 50px;
        background-color: #124b82;
        color: #ffffff;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 999;
    }

    #mm-area-guide-v4 .page-top-btn.is-show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    @media (hover: hover) and (pointer: fine) {
        #mm-area-guide-v4 .page-top-btn:hover {
            background-color: #3498db;
        }
    }
    #mm-area-guide-v4 .page-top-btn:active {
        background-color: #3498db;
    }

    /* -----------------------------------------
       タブレット＆スマホ用（画面幅1024px以下すべて）
       ----------------------------------------- */
    @media (max-width: 1024px) {
        #mm-area-guide-v4 .page-top-btn {
            /* 横位置: 常にLINEアイコンの真上に来るように「25px」に固定 */
            /* （もし微妙に左右にズレる場合は、この数値を1〜2px調整してください） */
            right: 25px;   
            
            /* 縦位置: 縦向きでちょうど良かった元の間隔 */
            bottom: 90px;  
            
            width: 45px;
            height: 45px;
        }
    }

    /* -----------------------------------------
       横向き（ランドスケープ）専用の高さ調整
       ----------------------------------------- */
    @media (max-width: 1024px) and (orientation: landscape) {
        #mm-area-guide-v4 .page-top-btn {
            /* 横向きの時だけ上に持ち上げて間隔を広げる（元は90px） */
            bottom: 115px; 
            
            /* 横位置は縦向きと同じ（常にLINEの真上） */
            right: 25px; 
        }
    }/* End custom CSS */