/* =========================================
   【目次】
   1. 全体設定・ヘッダー・ナビゲーション
   2. ヒーローセクション（スライドショー）
   3. 共通パーツ（タイトル、カード、ボタン）
   4. 各種セクション（日程、Q&A、表、履歴）
   5. フッター
   6. スマホ専用設定（一括管理）
========================================= */

/* =========================================
   1. 全体設定・ヘッダー・ナビゲーション
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;    
    line-height: 1.6;
    color: #333;
    background-color: #f4f6f9;
}

html {
    scroll-behavior: smooth;
}

#timetable {
    scroll-margin-top: 100px;
}

/* 外部読み込み用の箱を無効化 */
#header-placeholder,
#bottom-nav-placeholder,
#footer-placeholder {
    display: contents; 
}

/* ヘッダー */
header {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 4px solid var(--primary-color, #C2185B);
}

.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-logo {
    height: 60px;
    width: auto;
}

.title-group {
    text-align: left;
}

.title-group a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

.title-group a:hover {
    opacity: 0.8;
}

.site-sub-title {
    font-size: 14px;
    color: var(--primary-color, #C2185B);
    font-weight: bold;
    margin-bottom: 2px;
}

.site-title {
    font-size: 20px;
    line-height: 1.2;
}

/* PC用グローバルナビゲーション */
.global-nav {
    background-color: #C2185B;
    position: sticky;
    top: 0;
    z-index: 100;
}

.global-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.global-nav a {
    display: block;
    padding: 15px 25px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.global-nav a:hover {
    background-color: #86113f;
}

/* =========================================
   2. ヒーローセクション（スライドショー）
========================================= */
.hero {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    animation: heroSlide 15s infinite; 
}

.hero-bg1 { background-image: url('images/main01.webp'); animation-delay: 0s; }
.hero-bg2 { background-image: url('images/main02.webp'); animation-delay: 5s; }
.hero-bg3 { background-image: url('images/main03.webp'); animation-delay: 10s; }
.hero-bg4 { background-image: url('images/main04.webp'); animation-delay: 10s; }
.hero-bg5 { background-image: url('images/main05.webp'); animation-delay: 10s; }

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@keyframes heroSlide {
    0% { opacity: 0; transform: scale(1.0); }
    10% { opacity: 1; }
    33% { opacity: 1; }
    43% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* =========================================
   3. 共通パーツ（タイトル、カード、ボタン）
========================================= */
.container {
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
}

.content-section {
    margin-bottom: 60px;
}

.section-title {
    text-align: center;
    color: #C2185B;
    margin-bottom: 15px;
}

h2.section-title { font-size: 28px; margin-top: 60px; }
h3.section-title { font-size: 22px; margin-top: 40px; }
h4.section-title { font-size: 18px; color: #000; margin-top: 10px; }

.sub-title {
    font-size: 20px;         /* ★修正：24pxから20pxに少し小さくしました */
    color: #333;             /* ★修正：ピンクから濃いグレー（黒に近い色）に変更しました */
    border-bottom: 2px solid var(--primary-color, #C2185B); /* 下のピンクの線はそのまま残しています */
    padding-bottom: 5px;
    margin-bottom: 5px;
    margin-top: 30px;
}

.page-header {
    background-color: var(--primary-color, #C2185B);
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 40px;
}

.page-header h2 {
    font-size: 28px;
    letter-spacing: 2px;
}

/* カードレイアウト系 */
.top-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.feature-card {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    min-height: 200px;
    padding: 20px;
    transition: all 0.3s ease;
}

.feature-card.timetable { border-left: 8px solid #C2185B; background-color: #f0f7ff; }
.feature-card.soshikibu { border-left: 8px solid #C2185B; background-color: #fefff0; }

.grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card a {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-body { padding: 20px; }
.card-body h3 {
    margin-bottom: 10px; font-size: 18px;
    border-bottom: 2px solid #C2185B; display: inline-block; padding-bottom: 5px;
}
.card-body p { font-size: 14px; color: #666; }

.btn-text {
    display: inline-block; margin-top: 15px; color: #C2185B;
    font-weight: bold; text-decoration: none;
}
.btn-text:hover { text-decoration: underline; }

.btn-detail {
    display: inline-block; padding: 10px 25px; background-color: #C2185B; color: #fff;
    text-decoration: none; border-radius: 30px; font-weight: bold; font-size: 14px; transition: all 0.3s ease;
}
.btn-detail:hover {
    background-color: #880E4F; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(194, 24, 91, 0.3);
}

/* =========================================
   4. 各種セクション（日程、Q&A、表、履歴など）
========================================= */

/* 開催日程の特大アピール */
.oc-date-info {
    text-align: center; margin: 0 auto 50px; padding: 40px 20px;
    background-color: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(194, 24, 91, 0.08);
    border-top: 8px solid #F8BBD0; max-width: 800px; transform: translateY(-40px);
    position: relative; z-index: 10;
}
.oc-year { font-size: 16px; color: #666; font-weight: bold; letter-spacing: 2px; margin-bottom: 5px; }
.oc-dates { font-size: 64px; color: #333; line-height: 1.1; margin-bottom: 15px; font-family: "Helvetica Neue", Arial, sans-serif; }
.oc-dates span { font-size: 32px; }
.oc-dates .sat { color: #005bac; }
.oc-dates .sun { color: #C2185B; }
.oc-place { font-size: 18px; color: #333; font-weight: bold; }

/* 注目企画・企画一覧 */
.featured-programs {
    display: flex; flex-direction: column; gap: 60px; margin-bottom: 60px;
}
.program-row {
    display: flex; align-items: center; gap: 40px; background-color: #fff;
    padding: 30px; border-radius: 20px; box-shadow: 0 4px 15px rgba(194, 24, 91, 0.05);
}
.program-row.reverse { flex-direction: row-reverse; }
.program-image {
    flex-shrink: 0; width: 250px; height: 250px; border-radius: 50%;
    overflow: hidden; border: 8px solid #FCE4EC;
}
.program-image img { width: 100%; height: 100%; object-fit: cover; }
.program-text { flex-grow: 1; }
.program-text h3 { font-size: 24px; color: #C2185B; margin-bottom: 15px; border-bottom: 2px solid #F8BBD0; padding-bottom: 5px; display: inline-block; }
.program-text p { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 20px; }

.oc-project-card {
    background-color: #fff; border: 2px solid #F8BBD0; border-radius: 15px;
    padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(194, 24, 91, 0.05);
}
.oc-project-card .section-title { margin-top: 0; margin-bottom: 20px; font-size: 24px; }
.oc-project-card .sub-title { margin-top: 20px; }

/* タイムテーブル・スプレッドシート表（PC基本設定） */
.spreadsheet-table-container {
    overflow-x: auto; margin: 30px 0; box-shadow: 0 4px 15px rgba(194, 24, 91, 0.08); border-radius: 10px;
}
.design-table {
    width: 100%; min-width: 600px; border-collapse: collapse; background-color: #fff;
    text-align: center; table-layout: fixed;
}
.design-table th, .design-table td {
    padding: 12px 15px; border: 1px solid #e0e0e0;
}
.design-table thead tr, .design-table tbody tr:nth-child(even) { background-color: #FCE4EC; color: #C2185B; font-weight: bold; }
.design-table tbody tr:nth-child(odd) { background-color: #fff; color: #333; }
.design-table tbody tr:nth-child(odd):hover { background-color: #fdf5f7; transition: background-color 0.2s; }

/* Q&A アコーディオン */
.faq-container { max-width: 800px; margin: 40px auto; padding: 0 20px; }
.faq-item { background-color: #fff; border: 2px solid #F8BBD0; border-radius: 10px; margin-bottom: 20px; transition: all 0.3s ease; }
.faq-question { padding: 20px 40px 20px 20px; font-size: 18px; font-weight: bold; color: #C2185B; cursor: pointer; position: relative; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { background-color: #fdf5f7; border-radius: 10px; }
.faq-question::after { content: "＋"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #C2185B; font-weight: bold; }
.faq-item[open] .faq-question::after { content: "－"; }
.faq-item[open] { border-color: #C2185B; box-shadow: 0 4px 15px rgba(194, 24, 91, 0.1); }
.faq-answer { padding: 0 20px 20px 20px; color: #333; line-height: 1.8; }
.faq-answer p { padding-top: 20px; border-top: 1px dashed #F8BBD0; }
.faq-item[open] .faq-answer { animation: smoothOpen 0.4s ease-out forwards; }
@keyframes smoothOpen { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }

/* 更新履歴 */
.update-history { margin-top: 80px; margin-bottom: 20px; }
.history-list { background-color: #fff; border: 2px solid #F8BBD0; border-radius: 12px; padding: 20px 30px; list-style: none; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 15px rgba(194, 24, 91, 0.05); }
.history-list li { display: flex; align-items: baseline; padding: 15px 0; border-bottom: 1px dashed #F8BBD0; }
.history-list li:last-child { border-bottom: none; }
.history-list .date { font-weight: bold; color: #C2185B; width: 120px; flex-shrink: 0; font-family: "Helvetica Neue", Arial, sans-serif; }
.history-list .text { color: #333; }

/* 補足・画像・動画 */
.responsive-img { max-width: 100%; height: auto; border-radius: 8px; }
.map-image-wrapper { margin: 20px 0; text-align: center; }
.info-box { background-color: #ffffff; border-left: 5px solid #FFD54F; padding: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 20px;}
.info-box.y { background-color: #feffdc; }
.info-box.b { background-color: #dcfbff; }
.info-box.p { background-color: #f8e1fc; }
.info-box h4 { margin-bottom: 10px; color: #333; }
.video-wrapper { margin: 30px auto; max-width: 800px; width: 100%; aspect-ratio: 16 / 9; background-color: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.video-wrapper iframe, .video-wrapper video { width: 100%; height: 100%; border: none; display: block; }
.flex-layout { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.text-area { flex: 1; }
.image-area { flex-shrink: 0; width: 150px; text-align: center; }
.profile-img { width: 100%; height: auto; object-fit: cover; }

/* =========================================
   時間割セクション用レイアウト（個別並び）
========================================= */
.timetable-row {
    display: flex;
    align-items: flex-start; /* 上端で揃える */
    gap: 30px; /* 画像とテキストの隙間 */
    margin-top: 30px;
}

/* 1年生と3年生のブロックの間に隙間と区切り線を入れる */
.timetable-row:not(:last-child) {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px dashed #F8BBD0; /* ピンクの点線で区切る */
}

/* 左側の画像エリア */
.timetable-img {
    flex: 0 0 45%; /* 画像エリアの幅を全体の45%にする（お好みで40%等に調整可） */
}

.timetable-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 角を少し丸める */
    border: 1px solid #e0e0e0; /* 枠線 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 軽い影 */
}

/* 右側のテキストエリア */
.timetable-desc {
    flex: 1; /* 残りの幅をすべてテキストエリアにする */
}

/* 最初に見出しが来るので上部余白をなくして画像の上端と揃える */
.timetable-desc .sub-title {
    margin-top: 0;
}

/* スマホ用の設定（画面幅768px以下の場合） */
@media (max-width: 768px) {
    .timetable-row {
        flex-direction: column; /* 縦並びに変更 */
        gap: 15px;
    }
    
    .timetable-row:not(:last-child) {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .timetable-img {
        width: 100%; /* スマホでは幅いっぱいに広げる */
        max-width: 500px; /* 画像が大きくなりすぎるのを防ぐ */
        margin: 0 auto; /* 中央寄せ */
    }
}


/* =========================================
   5. フッター
========================================= */
.site-footer {
    background-color: #C2185B; color: #fff; margin-top: 80px; position: relative; overflow: hidden;
}
.site-footer::before {
    content: ""; position: absolute; top: 50%; left: -50px; transform: translateY(-50%);
    width: 500px; height: 500px; background-image: url('images/soshiki.webp'); background-size: contain;
    background-repeat: no-repeat; background-position: center; opacity: 0.08; z-index: 0; pointer-events: none;
}
.footer-top, .footer-links, .footer-bottom { position: relative; z-index: 1; }
.site-footer a { color: #fff; text-decoration: none; transition: opacity 0.3s; }
.site-footer a:hover { opacity: 0.7; text-decoration: underline; }

.footer-top { display: flex; justify-content: space-between; gap: 40px; max-width: 1000px; margin: 0 auto; padding: 50px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.footer-info, .footer-map { flex: 1; }
.footer-info h3, .footer-map h3 { font-size: 18px; margin-bottom: 15px; border-bottom: 2px solid #fff; display: inline-block; padding-bottom: 5px; }
.footer-info p, .footer-map p { margin-bottom: 15px; font-size: 14px; }
.sns-links { display: flex; gap: 20px; font-size: 36px; margin-top: 20px; }
.iframe-wrap { margin-top: 10px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

.footer-links { display: flex; justify-content: flex-start; gap: 80px; max-width: 1000px; margin: 0 auto; padding: 30px 20px 40px; }
.link-column h4 { font-size: 16px; margin-bottom: 15px; color: #F8BBD0; }
.link-column ul { list-style: none; padding: 0; }
.link-column li { margin-bottom: 10px; font-size: 14px; }

.footer-bottom { background-color: #333; text-align: center; padding: 20px; position: relative; }
.copyright { font-size: 12px; margin: 0; color: #ccc; }
.page-top-btn { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.1); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid rgba(255,255,255,0.3); }
.page-top-btn:hover { background-color: #fff; color: #333; text-decoration: none; }

/* フッターバナー（画像リンク) */
.footer-banners {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1000px; /* 既存のフッター幅に合わせる */
    margin: 0 auto;
    padding: 40px 20px 0; /* 上部に余白を設ける */
    position: relative;
    z-index: 1; /* フッターの背景画像（透かし）の上に表示させる */
}

.footer-banners a {
    display: block;
    flex: 1; /* 4つのバナーを均等な幅にする */
    transition: transform 0.3s, opacity 0.3s;
}

/* ホバー（マウスカーソルを乗せたとき）の動き */
.footer-banners a:hover {
    transform: translateY(-3px); /* 少し上に浮く */
    opacity: 0.85; /* 少し透明にしてクリックできることを強調 */
    text-decoration: none;
}

.footer-banners img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* 画像の角をほんの少し丸める */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 軽い影をつける */
}

/* スマホ用の設定（画面幅768px以下の場合） */
@media (max-width: 768px) {
    .footer-banners {
        flex-wrap: wrap; /* スマホでは折り返しを許可する */
        gap: 15px;
        padding: 30px 15px 0;
    }
    
    .footer-banners a {
        /* スマホでは2列（2×2）で表示するように計算 */
        flex: 0 0 calc(50% - 7.5px); 
    }
}

/* =========================================
   6. スマホ専用設定（画面幅768px以下で発動）
========================================= */
@media (max-width: 768px) {
    /* ボトムナビゲーション分の余白確保 */
    body { padding-bottom: 70px; }

    /* ヘッダー・グローバルナビ調整 */
    .logo-area { flex-direction: column; text-align: center; gap: 10px; }
    .title-group { text-align: center; }
    .site-title { font-size: 16px; }
    .global-nav { display: none; } /* PC用メニューは隠す */

    /* ボトムナビゲーション（スマホ専用メニュー） */
    .bottom-nav { display: block; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000; }
    .bottom-nav ul { display: flex; justify-content: space-around; list-style: none; padding: 5px 0; margin: 0; }
    .bottom-nav li { flex: 1; text-align: center; }
    .bottom-nav a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #666; font-size: 10px; padding: 5px 0; transition: color 0.3s; }
    .bottom-nav a i { font-size: 20px; margin-bottom: 3px; }
    .bottom-nav a:hover, .bottom-nav a:active { color: #C2185B; }

    /* タイトルとカードレイアウト */
    h4.section-title { font-size: 14px; padding: 0 15px; line-height: 1.5; }
    .grid-layout, .top-features { grid-template-columns: 1fr; gap: 15px; padding: 0 10px; }
    
    /* 開催日程エリア */
    .oc-dates { font-size: 48px; }
    .oc-dates span { font-size: 24px; }
    .oc-date-info { transform: translateY(-20px); margin: 0 15px 40px; }

    /* 注目企画（縦並びへ ＆ 順番の強制指定） */
    .program-row, .program-row.reverse { 
        flex-direction: column; 
        text-align: center; 
        gap: 20px; 
        padding: 20px; 
    }
    
    /* 1. タイトル（h3）を一番上にする */
    .program-text h3 { 
        display: block; 
        order: -1;      /* ★追加：要素を強制的に上に持ってくる */
        margin-bottom: 0; /* ★追加：写真との隙間を調整 */
    }

    /* 2. .program-text 自体をフレックスボックスにして中身を並び替え可能にする */
    .program-text {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* 3. 写真を真ん中（タイトルの次）にする */
    .program-image { 
        width: 180px; 
        height: 180px; 
        order: 0;       /* ★追加：真ん中に配置 */
        margin: 0 auto; /* ★追加：写真をど真ん中に寄せる */
    }

    /* 4. 説明文（p）を一番下にする */
    .program-text p {
        order: 1;       /* ★追加：一番下に配置 */
        margin-top: 15px; /* ★追加：写真との隙間を調整 */
    }

    /* タイムテーブル・スプレッドシート表（横スクロール化） */
    .spreadsheet-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px -10px; padding: 0 10px; box-shadow: none; border-radius: 0; }
    .design-table { min-width: auto; width: max-content; margin: 0 auto; table-layout: auto; }
    .design-table th, .design-table td { white-space: nowrap; font-size: 13px; padding: 8px 12px; text-align: center !important; }

    /* 履歴とフッター */
    .history-list li { flex-direction: column; gap: 5px; }
    .history-list .date { width: 100%; }
    .footer-top, .footer-links { flex-direction: column; gap: 30px; }
    .page-top-btn { position: static; transform: none; margin: 15px auto 0; }

    /* タップ領域（ボタン）の拡大 */
    .btn-detail, .btn-text, .feature-card a { padding: 15px 20px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* =========================================
       合格体験記のレイアウト（縦並び＆順番指定）
    ========================================= */
    .flex-layout {
        flex-direction: column; /* 横並びを縦並びに変更 */
        gap: 10px;
    }

    /* .text-area の箱を透明化して、中の要素の順番を直接いじれるようにする魔法 */
    .text-area {
        display: contents;
    }

    /* 1. タイトル（学部・入学年）を一番上の中央に */
    .success-box {
        order: -1;
        justify-content: center;
        margin-bottom: 5px !important;
    }

    /* 2. 先輩のイラストを真ん中に */
    .image-area {
        order: 0;
        margin: 0 auto;
        width: 120px; /* スマホでは少し画像を小さめにして圧迫感を減らす */
    }

    /* 3. エピソード（文章）を一番下に */
    .text-area p {
        order: 1;
        text-align: left; /* 文章は読みやすいように左寄せをキープ */
        margin-top: 10px;
    }
}

/* PC画面（769px以上）でのボトムナビゲーション非表示設定 */
@media (min-width: 769px) {
    .bottom-nav { display: none; }
}

/* 親要素（ラッパー）の設定 */
.video-wrapper {
    position: relative;
    width: 100%;
    /* 16:9の比率を保つための設定 */
    padding-top: 56.25%; 
}

/* 動画本体の設定 */
.main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}