@charset "utf-8";

    /* --- 1. 全体レイアウト（3カラム構成） --- */
    .main-layout {
        display: flex;
        gap: 20px;
        margin: 20px auto;
        max-width: 1200px; /* 画面が広すぎるときの中央寄せ */
        padding: 0 15px;
    }

    /* 左ナビゲーション（PC用） */
    .side-nav-pc {
        width: 280px;
        flex-shrink: 0;
    }
    .side-nav-pc .menu-group {
        background: #f1f1f1;
        padding: 10px 15px;
        margin-top: 15px;
        font-weight: bold;
        border-left: 5px solid #1E4DB7;
        font-size: 15px;
    }
    .side-nav-pc ul { list-style: none; padding: 0; margin: 0; }
    .side-nav-pc li a {
        display: block;
        padding: 10px 15px;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        transition: 0.2s;
    }
    .side-nav-pc li a:hover {
        background: #eef2ff;
        color: #1E4DB7;
        padding-left: 20px;
    }

    /* 中央メインコンテンツ */
    .main-content {
        flex: 1;
        min-width: 0; /* 折り返し崩れ防止 */
    }

    /* 右サイドバー */
    .right-sidebar {
        width: 260px;
        flex-shrink: 0;
    }

    /* --- 2. スライドショー & タイル（11個） --- */
    .hero-slider {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .hero-slider img { width: 100%; height: auto; display: block; }

    /* 11個の画像リンクを並べるグリッド */
    .grid-layout {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 40px;
    }
    .grid-item {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .grid-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }
    .grid-item img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* --- 3. 右サイドバー・検索・バナー --- */
    .search-area {
        display: flex;
        margin-bottom: 20px;
        gap: 5px;
    }
    .search-area input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
    }
    .search-area button {
        padding: 10px 15px;
        background: #1E4DB7;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }
    .search-area button:hover { background: #163a8a; }

    .right-btn {
        display: block;
        padding: 14px 12px;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        text-decoration: none !important;
        color: #333;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        transition: 0.2s;
    }
    .right-btn:hover {
        background: #f8f9ff;
        border-color: #1E4DB7;
        color: #1E4DB7;
    }
    /* noteボタンなどの個別色指定 */
    .btn-black { background: #000 !important; color: #fff !important; }

/* --- 4. レスポンシブ設定（レイアウト・メニュー・住所配置 最終統合版） --- */

@media screen and (max-width: 960px) {
    /* ==========================================
       1. レイアウト全体・各カラムの調整
       ========================================== */
    .main-layout {
        display: flex !important; /* blockからflexに変更してorderを有効化 */
        flex-direction: column !important; /* 縦並びを強制 */
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        gap: 0 !important; /* カラム間の隙間をゼロに */
    }

    /* 左ナビ枠は「中身（住所）を出すため」に完全に消さない */
    .side-nav-pc {
        display: contents !important; /* 親枠を無視して中身を直接レイアウトに参加させる */
    }

    /* PC用のメニューリスト本体だけを隠す（JSでメニュー内にコピー済みのため） */
    .side-nav-pc .vertical_nav,
    .side-nav-pc .menu-group {
        display: none !important;
    }

    /* メインコンテンツを1番目に配置 */
    .main-content {
        order: 1 !important;
        display: block !important;
        width: 100% !important;
        flex: none !important;
        margin-bottom: 30px;
        overflow: visible;
    }

    /* 右サイドバーを2番目に配置 */
    .right-sidebar {
        order: 2 !important;
        display: block !important;
        width: 100% !important;
        flex: none !important;
        margin-top: 20px;
        padding-bottom: 0 !important;
    }

    /* 右サイドのサービスボタン */
    .service-btn {
        display: block;
        padding: 12px 10px;
        font-size: 0.95em;
        margin-bottom: 8px;
        text-align: left;
    }

    /* タイルバナーを2列に */
    .grid-layout {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
        margin-bottom: 30px;
    }

    /* ==========================================
       2. スライダーの表示不具合解消
       ========================================== */
    .hero-slider {
        width: 100% !important;
        overflow: hidden;
    }

    #slider1_container {
        margin: 0 auto;
        max-width: 100% !important;
    }

    #slider1_container img[u="image"] {
        max-width: none !important; 
    }

    /* ==========================================
       3. スマホ用メニュー装飾（ボタンの役割を明確化）
       ========================================== */
    .menu-scroll-area ul { padding: 0; margin: 0; list-style: none; }

    .menu-scroll-area {
        padding: 20px 15px !important;
        background-color: #f4f7fa;
    }

    .menu-scroll-area .menu--item { margin-bottom: 12px; }

    /* 見出し（研修情報など）：テキスト形式 */
    .menu-scroll-area .menu--link {
        display: block;
        padding: 15px 5px 5px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #1E4DB7 !important;
        font-weight: bold;
        font-size: 1.1em;
        pointer-events: none; /* クリック不可 */
    }

    .menu-scroll-area .arrow-right { display: none; }

    /* サブメニュー：白いカードボタン形式 */
    .menu-scroll-area .flyout-menu {
        display: block !important;
        margin: 5px 0 20px 0;
        padding: 0;
        background: transparent;
        border-left: none !important;
    }

    .menu-scroll-area .flyout-menu li a {
        display: block;
        padding: 16px 20px;
        margin-bottom: 8px;
        background: #ffffff !important;
        border: 1px solid #dce2e8 !important;
        border-radius: 8px !important;
        color: #333 !important;
        font-weight: bold;
        text-decoration: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        font-size: 0.95rem;
    }

    /* 単発リンク：ボタン形式を維持 */
    .menu-scroll-area .single-link .menu--link {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #dce2e8 !important;
        border-radius: 8px !important;
        padding: 16px 20px !important;
        pointer-events: auto !important; /* クリック可能 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        color: #333 !important;
    }

/* ==========================================
       4. 住所エリアの配置（シンプル版）
       ========================================== */
    .side-nav-pc {
        display: contents !important; 
    }

    .side-nav-pc .vertical_nav {
        display: contents !important; 
    }

    .side-nav-pc ul#js-menu {
        display: none !important;
    }

    .side-address {
        display: block !important; 
        order: 3 !important;       /* 右サイドバーの下に配置 */
        width: 100% !important;
        margin: 10px 0 0 0 !important; /* 上に余白を持たせる */
        padding: 30px 10px !important;
        background: transparent !important; /* 背景色も無しでシンプルに */
        border: none !important;    /* 仕切り線（青線）を削除 */
        border-top: 1px solid #ddd !important; /* 控えめな細い線だけ残す（不要ならここもnoneに） */
        text-align: center;
        box-sizing: border-box;
        font-size: 0.85rem !important;
        color: #666 !important;    /* 落ち着いたグレー */
    }
    /* フッターとの間の余白（footer側のmargin-top）を上書き */
    #footer {
        margin-top: 10px !important; /* 50pxから10pxへ大幅カット */
    }