/* アコーディオン廃止に伴うエリア見出しの装飾 */
.area-section {
    margin-bottom: 50px; /* エリアごとに下側にしっかり余白を作る */
}

.area-title {
    font-size: 1.4rem;
    color: #333;
    padding: 10px 15px;
    background-color: #f5f5f5; /* 薄いグレーの背景を敷いて見出しらしく */
    border-left: 5px solid var(--summer-orange); /* 左側にオレンジのアクセント線 */
    margin-bottom: 25px;
    font-weight: bold;
}

/* キャンパスカードを綺麗に並べるグリッド（既存の指定があれば調整してください） */
.campus-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* ==========================================
   アップデート：エリア目次（立体ボタン風ナビ）
   ========================================== */
.area-contents-idx {
    background-color: #fffbf7; /* ほんのり温かみのある背景色 */
    border: 2px dashed #fcd2b2; /* 優しいニュアンスの破線枠 */
    border-radius: 12px;
    padding: 24px 20px;
    margin: 0 auto 50px;
    max-width: 850px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ボックス全体の軽い影 */
}

.idx-title {
    font-size: 1rem;
    font-weight: 800;
    color: #444;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    padding: 0 10px;
    display: block;        /* inline-block から block に変更 */
    text-align: center;    /* 文字をセンター寄せにする */
}

/* タイトルの左右に可愛いドットを装飾 */
.idx-title::before,
.idx-title::after {
    content: "•";
    color: var(--summer-orange, #ff6f00);
    margin: 0 8px;
    font-size: 1.2rem;
}

/* 目次リストの配置（スマホ2列 / PC3列） */
.idx-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px; /* ボタン同士の隙間を少し広げて押しやすく */
}

/* ★ 完全にボタン化したリンクスタイル */
.idx-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 2px solid var(--summer-orange, #ff6f00);
    color: var(--summer-orange, #ff6f00);
    text-decoration: none;
    font-weight: 900;
    font-size: 0.95rem;
    padding: 14px 10px;
    border-radius: 8px;
    
    /* 物理的なボタンの厚み（影）を表現 */
    box-shadow: 0 4px 0 #e65100; 
    
    /* 押したときのなめらかなアニメーション */
    transition: all 0.1s ease; 
    position: relative;
}

/* ホバー時（マウスを乗せたとき）の動き */
.idx-list a:hover {
    background-color: #fff5ed; /* ほんのり薄いオレンジに */
    transform: translateY(2px); /* ちょっとだけ沈む */
    box-shadow: 0 2px 0 #e65100; /* 影も薄くする */
}

/* ★ タップ・クリックした瞬間にカチッと沈む演出 */
.idx-list a:active {
    transform: translateY(4px); /* 影の分（4px）完全に下に沈み込む */
    box-shadow: none; /* 影を消すことで本当に押した感覚に */
}

/* PC表示（画面幅が768px以上のとき）は3列にする */
@media (min-width: 768px) {
    .idx-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .idx-list a {
        font-size: 1rem;
        padding: 16px 15px;
    }
}

/* ==========================================
   追加：「ページの先頭へ戻る」ボタン
   ========================================== */
.btn-page-top {
    position: fixed;
    right: 20px;          /* 画面の右端からの距離 */
    bottom: 90px;         /* 画面の下端からの距離（下部固定CTAと被らないように高めに設定） */
    width: 50px;          /* ボタンの横幅 */
    height: 50px;         /* ボタンの縦幅 */
    background-color: #ffffff;
    border: 2px solid var(--summer-orange, #ff6f00);
    border-radius: 50%;   /* きれいな丸型にする */
    z-index: 9999;        /* 他のコンテンツより最前面に表示 */
    
    /* 立体感のある影（厚み） */
    box-shadow: 0 4px 0 #e65100;
    
    /* センターに矢印を配置するための設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.1s ease;
}

/* ★ ボタンの中の上向き矢印（FontAwesomeがない場合でも動くようにCSSで自作） */
.btn-page-top::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--summer-orange, #ff6f00);
    border-left: 3px solid var(--summer-orange, #ff6f00);
    transform: rotate(45deg); /* 斜めに回転させて「く」の字の矢印にする */
    margin-top: 4px;          /* 矢印の位置を中央に微調整 */
}

/* ホバー時（マウスを乗せたとき） */
.btn-page-top:hover {
    background-color: #fff5ed;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #e65100;
}

/* ★ タップ・クリックした瞬間にカチッと沈む演出 */
.btn-page-top:active {
    transform: translateY(4px); /* 影の分（4px）完全に下に沈み込む */
    box-shadow: none;
}

/* スマホ表示のとき、位置を少し左に寄せるなどの微調整（必要に応じて） */
@media (max-width: 768px) {
    .btn-page-top {
        right: 15px;
        bottom: 100px; /* スマホは下部固定バーが太くなることがあるので少し高めに */
        width: 46px;
        height: 46px;
    }
}

/* ==========================================
   追加：シンプルなフッター
   ========================================== */
.site-footer {
    background-color: #00A3E9; /* 画面下部を引き締めるダークグレー */
    color: #ffffff;
    padding: 30px 20px;
    margin-top: 60px;          /* 会場ガイドセクションとの間の余白 */
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 学校名（ロゴ）のスタイル */
.footer-logo {
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

/* コピーライト（著作権表記）のスタイル */
.footer-copy {
    font-size: 0.75rem;
    color: #ffffff; /* 文字色を少し落としてすっきりと */
    margin: 0;
}

/* 📱 スマホ表示のときの微調整 */
@media (max-width: 768px) {
    .site-footer {
        padding: 25px 15px 40px; /* 先頭へ戻るボタンや下部固定CTAを考慮して下部に少し余裕を持たせる */
    }
}