/* ==========================================================================
   共通デザイン設定（弘道塾 ブランドシステム）
   ========================================================================== */

/* 1. 基本設定とリセット */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #ebf3f9; /* 上品で淡いブルーの背景（女子高生・保護者に好まれる清潔感） */
    color: #333333;
    line-height: 1.8;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* 2. レイアウト幅の定義 */
.main-content {
    max-width: 900px; /* 視認性を担保する最適な横幅（これ以上広いと文字が横長になり読みにくい） */
    margin: 40px auto;
    padding: 0 20px;
}

/* ヘッダー・フッターの簡易デザイン */
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #d0e1fd;
    padding: 15px 0;
}
.header-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
.logo {
    font-weight: 700;
    font-size: 20px;
    color: #062852; /* 弘道塾のメインカラー：信頼のネイビー */
}
.site-footer {
    text-align: center;
    padding: 40px 0;
    color: #888888;
    font-size: 14px;
}

/* ==========================================================================
   3. ヒーローセクション（タイトル周り）※サイズを抑え、上品に美調整
   ========================================================================== */
.hero-section {
    text-align: left;
    margin-bottom: 35px;
}
.hero-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 21px; /* 26pxから「21px」に縮小。圧迫感を無くし上品にします */
    color: #062852;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.03em;
    line-height: 1.6; /* 行間を1.5から「1.6」に広げて、読みやすさを向上 */
    
    /* 縦棒を「6px」から「4px」に細くし、より繊細で知的なデザインにします */
    border-left: 4px solid #0066cc; 
    padding-left: 14px; /* 縦棒との距離もバランス良く調整 */
}
.hero-lead {
    font-size: 16px; /* 少し縮小して、タイトルの引き立て役に */
    color: #333;
    font-weight: 500;
    margin-bottom: 12px;
}
.hero-sublead {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
}

/* 4. 各種カード（保護者宛・ターゲット問いかけなど） */
.box-card {
    background-color: #ffffff;
    border-radius: 8px; /* 12pxから8pxにして、以前のシャープではっきりした輪郭に戻します */
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.highlight-card {
    border: 1.5px solid #a3c9f1; /* 枠線を少しだけ太く、色を濃くして、背景との境目をハッキリさせます */
    color: #062852; /* 一般テキストもすべて、太字と同じ「濃紺」に統一します */
}
.border-card {
    border: 1px solid #d2dfed;
    color: #333333;
}
.accent-border-card {
    border: 1px solid #cce0ff;
    border-left: 6px solid #0066cc;
    color: #333333;
}

/* タイトルとテキスト */
.card-title {
    font-size: 20px;
    color: #062852;
    margin-bottom: 20px;
    font-weight: 700;
}
.card-subtitle {
    font-size: 18px;
    color: #062852;
    margin-bottom: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
}
.accent-card-title {
    font-size: 18px;
    color: #062852;
    font-weight: 700;
    margin-bottom: 15px;
}
.bold-text {
    font-weight: 700;
    color: #062852;
}

/* 5. 各種リストデザイン（標準テキストなのに、見やすく美しい） */
.check-list, .dot-list {
    list-style: none;
}
.check-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}
.check-list li::before {
    content: "✓"; /* チェックマーク（画像を使わず軽量化） */
    position: absolute;
    left: 0;
    top: 0;
    color: #0066cc;
    font-weight: 700;
    font-size: 18px;
}
.dot-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}
.dot-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #0066cc;
    font-weight: 700;
}

/* 6. グリッドシステム（スマホ時は1列、PC時は横並び） */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.grid-3col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

/* ==========================================================================
   7. ボタン（お問合せ導線）※スリムで上品に、圧迫感を無くします
   ========================================================================== */
.cta-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px; /* 横幅を「420px」から「320px」に。スリムで知的な印象に */
    margin: 35px auto;
}
.btn {
    display: block;
    text-align: center;
    padding: 11px 20px; /* 上下の厚みを「15px」から「11px」へ削り、細身にします */
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14.5px; /* 文字サイズを「16px」から「14.5px」へ落とし、主張を控えめに */
    letter-spacing: 0.02em; /* 文字と文字の間に少しだけ上品な余白を作ります */
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); /* 影をより薄く柔らかくし、画面に馴染ませます */
}
.btn-line {
    background-color: #00c853; /* LINE公式カラー */
    color: #ffffff;
}
.btn-line:hover {
    background-color: #00a844;
}
.btn-form {
    background-color: #ffffff;
    color: #062852;
    border: 1.5px solid #062852; /* 境界線を少し繊細な1.5pxに調整 */
}
.btn-form:hover {
    background-color: #062852;
    color: #ffffff;
}

/* ==========================================================================
   8. Q&A（1つのカードにまとめてすっきり見せるデザイン）
   ========================================================================== */
.faq-container-box {
    margin-top: 50px;
    margin-bottom: 20px; /* 下のボタンとの間隔 */
}
.faq-list {
    display: flex;
    flex-direction: column;
}
.faq-unit {
    padding: 25px 0;
    border-bottom: 1px solid #e2e8f0; /* Q&Aの項目間に薄い区切り線を引く */
}
.faq-unit:last-child {
    border-bottom: none; /* 最後の項目の下線は消す */
    padding-bottom: 10px;
}
.faq-q-text {
    font-size: 16px;
    font-weight: 700;
    color: #062852; /* 塾のネイビー */
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
}
.faq-q-text::before {
    content: "Q."; /* Qという文字を水色で綺麗に左端に配置 */
    position: absolute;
    left: 0;
    color: #0066cc; /* 爽やかな水色ブルー */
    font-size: 18px;
    font-weight: 700;
}
.faq-a-text {
    margin-left: 35px; /* Qの文字の始まりと、回答ボックスの左端をピシッと揃えます */
    background-color: #f3f7fd; /* ほんのり上品で淡いブルーで後ろを薄く塗ります */
    border-left: 4px solid #0066cc; /* 左端に弘道塾の青いアクセント線を引いて、以前のデザインを再現します */
    padding: 15px 20px; /* ボックスの内側に十分な余白をとって、読みやすくします */
    border-radius: 6px; /* 優しい角丸 */
    color: #333333;
    font-size: 14.5px;
    line-height: 1.7;
}
.faq-a-text p {
    margin-bottom: 8px;
}
.faq-a-text p:last-child {
    margin-bottom: 0;
}

/* 💰 授業システムや料金（FAQ）へ移るスリムなボタン */
.faq-cta-area {
    margin: 20px auto 45px auto;
    text-align: center;
}
.btn-faq {
    display: inline-block;
    text-align: center;
    padding: 10px 24px;
    border: 1.5px solid #062852; /* スリムな濃紺の枠線 */
    border-radius: 50px;
    color: #062852;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    background-color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}
.btn-faq:hover {
    background-color: #062852; /* マウスを乗せたら色が反転するお洒落な仕掛け */
    color: #ffffff;
}

/* 9. 画像のスタイル */
.gallery-img, .facility-img, .rounded-img, .line-screenshot {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}
.gallery-img {
    height: 180px; /* 高さを揃える */
}
.facility-item {
    display: flex;
    gap: 15px;
    background: #fcfdfe;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #f0f4f8;
}
.facility-img {
    width: 100px;
    height: 100px;
}
.img-caption {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-top: 5px;
}
.line-screenshot {
    border: 1px solid #e2e8f0;
    max-width: 200px; /* LINEのスクショは大きすぎず品良く */
    margin: 0 auto;
}

/* 10. その他共通装飾 */
.text-center { text-align: center; }
/* ==========================================================================
   中見出し（セクションタイトル）
   ========================================================================== */
.section-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 19px;
    color: #062852;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.5;
    
    border-left: 4px solid #0066cc;
    padding-left: 12px;
}
.section-lead {
    font-size: 15px;
    color: #555;
    margin-bottom: 0; /* マージンは下のグリッド側で調整します */
    line-height: 1.8;
}

/* ==========================================================================
   【プロの余白設計】LINE質問セクション（埋もれ防止・上品な区切り線）
   ========================================================================== */
.line-intro-section {
    margin-top: 80px; /* 施設紹介カードとの間に、脳が休まる「80px」の太い余白を確保 */
    padding-top: 45px; /* 上部に余白をとります */
    border-top: 1px solid #d2dfed; /* 旧オウンドのような、主張しすぎない淡いグレーの区切り線 */
    text-align: left;
}

/* ==========================================================================
   【プロの余白設計】おすすめセクションへの区切り
   ========================================================================== */
.grid-2col.align-center {
    margin-top: 80px; /* LINE説明文との間に「80px」の十分な余白を確保 */
    padding-top: 45px;
    border-top: 1px solid #d2dfed; /* ここにも上品な区切り線を入れ、トピックを明確に分けます */
    align-items: center;
}

/* 11. 自習室の利用時間テーブル */
.time-table {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}
.time-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
}
.time-row:last-child {
    border-bottom: none;
}
.day { font-weight: 700; color: #333; }
.highlight-day { color: #cc0000; } /* 日曜日の赤強調 */
.time { font-weight: 700; color: #062852; font-size: 18px; }

.final-cta {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #d0e1fd;
}
.final-text {
    font-size: 18px;
    font-weight: 700;
    color: #062852;
}

/* ==========================================================================
   メディアクエリ（レスポンシブ対応：PCでの表示）
   ========================================================================== */
@media (min-width: 768px) {
    .grid-2col {
        grid-template-columns: 1fr 1fr; /* PCでは2カラム横並び */
    }
    .grid-3col {
        grid-template-columns: 1fr 1fr 1fr; /* PCでは3カラム横並び */
    }
    
    /* PC画面でも、威圧感のない上品な明朝サイズに調整 */
    .hero-title {
        font-size: 26px; 
    }
    
    .sp-only {
        display: none;
    }
}

/* ==========================================================================
   追加デザイン設定（料金ページ特有のデザインシステム）
   ========================================================================== */

/* 1. 区切り線（水平線）の上品化 */
.section-divider {
    border: 0;
    height: 1px;
    background-color: #d2dfed;
    margin: 40px 0 60px 0; /* 上に40px、下に60pxの余白を強制確保して窮屈感を消します */
}

/* 塾長提案のセクション（大切にしていること）の余白コントロール */
.importance-section {
    margin-bottom: 70px; /* このセクションから、次の高校生コースまでの余白 */
}
.importance-section .section-title {
    margin-bottom: 30px; /* 大見出しから白枠までの心地よい空間 */
}

/* 高校生・既卒生セクション全体の余白 */
.course-block {
    margin-bottom: 70px;
}

/* 2. 高校生・既卒生の「特徴」の2列レイアウト */
.feature-row {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}
.feature-text {
    flex: 1.2;
}
.feature-images {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.feature-img {
    height: 200px;
    object-fit: cover;
}
.feature-img-single {
    max-height: 260px;
    width: 100%;
    object-fit: cover;
}
.num-list {
    list-style: none;
    padding: 0;
}
.num-list li {
    margin-bottom: 25px;
}
.num-list li strong {
    font-size: 17px;
    color: #062852;
    display: block;
    margin-bottom: 5px;
}

/* 3. 【既卒生スケジュール表】スマホ時横スクロール対応 */
.schedule-section {
    margin-top: 50px;
}
.schedule-intro {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* スマホ画面の時に自動的に横スクロール可能にします */
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    border: 1px solid #d2dfed;
    border-radius: 6px;
}
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 650px; /* PCでの表示崩れを防ぐ最低幅 */
    text-align: center;
}
.schedule-table th, .schedule-table td {
    border: 1px solid #d2dfed;
    padding: 10px 5px;
    vertical-align: middle;
}
.schedule-table thead th {
    background-color: #f0f7ff;
    color: #062852;
    font-weight: 700;
}
.col-header {
    background-color: #f8fafc;
    color: #062852;
    font-weight: 700;
    width: 60px;
}

/* セルの色分け（塾長が作成した配色を上品なWebカラーに再現） */
.cell-gray { background-color: #f1f5f9; color: #475569; font-weight: 500; }
.cell-light-gray { background-color: #f8fafc; color: #64748b; font-weight: 500; letter-spacing: 0.2em; }
.cell-orange { background-color: #fff7ed; color: #c2410c; border: 1px solid #fed7aa !important; }
.cell-green { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0 !important; }
.cell-blue { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe !important; }
.cell-teal { background-color: #f0fdfa; color: #0f766e; border: 1px solid #99f6e4 !important; }
.highlight-cell {
    font-weight: 700;
    color: #062852;
    font-size: 14px;
}
.highlight-cell .small-text {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #555;
    margin-top: 8px;
    line-height: 1.5;
}
.noon-break th, .noon-break td {
    padding: 6px;
}
.schedule-note {
    font-size: 12.5px;
    color: #666;
    margin-top: 8px;
}

/* 4. 医学部志望コーナー */
.medical-box {
    border-left: 6px solid #e11d48; /* 医学部向けの情熱のレッド */
}
.medical-text {
    font-size: 14.5px;
    color: #444;
}

/* 5. 【最重要】受講プランと受講料カード */
.plan-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.plan-header-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 19px;
    color: #062852;
    margin-bottom: 20px;
    font-weight: 700;
}
.plan-details {
    flex-grow: 1;
    text-align: left;
    margin-bottom: 25px;
}
.plan-detail-list {
    list-style: none;
    padding: 0;
}
.plan-detail-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 14.5px;
}
.plan-detail-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #0066cc;
    font-weight: 700;
}
.plan-detail-list li.note-li {
    color: #c2410c;
    font-size: 13.5px;
}
.price-box {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 15px;
    border: 1px dashed #cce0ff;
}
.price-label {
    display: block;
    font-size: 12.5px;
    color: #666;
    margin-bottom: 5px;
}
.price-value {
    font-size: 28px;
    font-weight: 700;
    color: #062852; /* 【修正】赤（#cc0000）からブランドカラーの濃紺（#062852）に統一し、品格を持たせます */
    line-height: 1.2;
}
.price-value .currency {
    font-size: 16px;
    font-weight: 500;
    margin-left: 2px;
}
.price-tax {
    font-size: 12px;
    color: #666;
}
.plan-footer-note {
    font-size: 13.5px;
    color: #666;
    margin-top: 15px;
}

/* 6. お問い合わせまでの「ステップ表示」 */
.step-flow {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.step-item {
    display: flex;
    gap: 15px;
    background: #ffffff;
    border: 1px solid #d2dfed;
    border-radius: 8px;
    padding: 15px 20px;
    align-items: center;
}
.step-num {
    background-color: #062852;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.step-content h4 {
    font-size: 15px;
    color: #062852;
    font-weight: 700;
    margin-bottom: 2px;
}
.step-content p {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* 7. 下部回遊ナビゲーション */
.page-navigation-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #d2dfed;
}
.nav-sub-btn {
    display: block;
    text-align: center;
    padding: 12px 20px;
    border-radius: 4px;
    border: 1px solid #0066cc;
    color: #0066cc;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    background-color: #ffffff;
    transition: all 0.3s ease;
}
.nav-sub-btn:hover {
    background-color: #e6f0fa;
}


/* ==========================================================================
   メディアクエリ追加設定（PCでのレイアウト調整）
   ========================================================================== */
@media (min-width: 768px) {
    /* 特徴レイアウトをPC時は横並びにします */
    .feature-row {
        flex-direction: row;
        align-items: center;
    }
    /* 既卒生だけ画像を左、テキストを右に反転します */
    .feature-row.reverse {
        flex-direction: row-reverse;
    }
    .page-navigation-area {
        flex-direction: row; /* PC時はボタンを横並びに */
        justify-content: center;
    }
    .nav-sub-btn {
        flex: 1;
        max-width: 320px;
    }
}
@media (min-width: 768px) {
    /* PC表示の時は、各セクション間のマージンをさらにゆったり広げて「贅沢な余白」を作ります */
    .course-block {
        margin-bottom: 100px;
    }
    .section-divider {
        margin: 60px 0 100px 0;
    }
    .importance-section {
        margin-bottom: 100px;
    }
}
/* ==========================================================================
   【プロの余白調整】最初の仕切り線だけ、上部とのストーリーの連続性を保ちます
   ========================================================================== */
.first-divider {
    margin: 20px 0 35px 0 !important; /* スマホ時：上を20px、下を35pxに引き締めます */
}

@media (min-width: 768px) {
    .first-divider {
        margin: 25px 0 45px 0 !important; /* PC時：上を25px、下を45pxに引き締め、スカスカ感を無くします */
    }
}
/* ==========================================================================
   時間割テーブル右下セルを「振り返り」と区別するために完全に白にします
   ========================================================================== */
.cell-time-note {
    font-size: 11px;
    color: #475569;
    background-color: #ffffff !important; /* 完全に白にしてスッキリさせます */
    line-height: 1.5;
    font-weight: 500;
    vertical-align: middle;
}

/* ==========================================================================
   4. 医学部志望コーナー（女子生徒・保護者に響く知的高級感プレミアム仕様）
   ========================================================================== */
.medical-premium-box {
    background-color: #173257 !important; /* 【修正】黒すぎるネイビーから、上品で知的なロイヤルネイビーに明度を調整 */
    border: 1px solid #dfb06c !important; /* 繊細なシャンパンゴールドの細い枠線 */
    padding: 40px 30px !important;
    color: #ffffff !important;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 40px; /* 余白もスッキリ適正化 */
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(23, 50, 87, 0.12) !important;
}
.premium-badge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #dfb06c; /* 上品なシャンパンゴールド */
    border: 1px solid #dfb06c;
    padding: 2px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-weight: 700;
}
.premium-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 21px;
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.03em;
}
.premium-text {
    font-size: 14px;
    color: #e2e8f0 !important; /* 読みやすい優しい薄グレーの文字 */
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.8;
}
/* プレミアム用のゴールドボタン */
.btn-premium {
    display: inline-block;
    text-align: center;
    padding: 11px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    background-color: #dfb06c; /* ゴールド */
    color: #0b1f3b !important; /* 文字はミッドナイトブルー */
    box-shadow: 0 4px 15px rgba(223, 176, 108, 0.25);
    transition: all 0.3s ease;
}
.btn-premium:hover {
    background-color: #ffffff;
    color: #0b1f3b !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
}
/* ==========================================================================
   【プロのステップ設計】箱を無くし、スッキリと写真と共存させるフローデザイン
   ========================================================================== */
.align-start {
    align-items: flex-start !important;
}
.step-flow-clean {
    display: flex;
    flex-direction: column;
    gap: 30px; /* ステップごとの余白 */
}
.step-clean-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.step-clean-num {
    background-color: #062852;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(6, 40, 82, 0.15);
    margin-top: 3.5px; /* 【追加】これでタイトル文字の高さとぴったり美しくセンターが揃います */
}
.step-clean-content h4 {
    font-size: 16px;
    color: #062852;
    font-weight: 700;
    margin-bottom: 5px;
}
.step-clean-content p {
    font-size: 14px;
    color: #444444;
    line-height: 1.6;
}
/* ==========================================================================
   追加デザイン設定（トップページ特有のデザインシステム）
   ========================================================================== */

/* 1. リード文ボックス */
.hero-lead-box {
    background-color: #ffffff;
    border: 1px solid #d2dfed;
    border-radius: 8px;
    padding: 20px 25px;
    font-size: 14.5px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: left;
}

/* 2. バッジタグ風の装飾（丸角の強み一覧） */
.tag-container {
    margin-bottom: 35px;
}
.badge-tag {
    display: inline-block;
    background-color: #ffffff;
    color: #062852;
    border: 1.5px solid #062852;
    padding: 6px 16px;
    border-radius: 50px; /* 完全な丸角 */
    font-size: 12.5px;
    font-weight: 700;
    margin: 4px;
    box-shadow: 0 3px 6px rgba(6, 40, 82, 0.04);
}

/* 3. メインメッセージ（進学校の授業スピードにつまずいても〜） */
.main-message-area {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: left;
}
.main-message-area .section-title {
    font-size: 21px; /* 圧迫感を無くした美しいサイズ */
    line-height: 1.5;
    margin-bottom: 15px;
}
.message-text-bold {
    font-size: 15px;
    color: #444;
    line-height: 1.7;
}

/* 4. 悩みカード下の解決文 */
.message-reply {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #d2dfed;
    font-size: 14.5px;
}

/* 5. トップページ用ナビゲーションカード（4枚の綺麗なボックス） */
.nav-box-item {
    display: block;
    background-color: #ffffff;
    border: 1.5px solid #d2dfed;
    border-radius: 8px;
    padding: 22px 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}
.nav-box-item:hover {
    border-color: #0066cc;
    box-shadow: 0 6px 15px rgba(0, 102, 204, 0.1);
    transform: translateY(-2px); /* 少しだけ上に浮き上がるお洒落な効果 */
}
.nav-box-content h4 {
    font-family: 'Noto Serif JP', serif;
    font-size: 16px;
    color: #062852;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-box-content h4 span {
    color: #0066cc;
    font-size: 18px;
    font-weight: 400;
    transition: transform 0.3s ease;
}
.nav-box-item:hover .nav-box-content h4 span {
    transform: translateX(4px); /* マウスを乗せると矢印が少し右に動きます */
}
.nav-box-content p {
    font-size: 13.5px;
    color: #555;
    line-height: 1.6;
}

/* 6. 在籍校バッジ */
.school-badge-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.school-badge {
    background-color: #ffffff;
    border: 1px solid #d2dfed;
    border-radius: 4px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #062852;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.02);
}

/* 7. 3つの理由カード */
.reason-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 35px 25px !important;
}
.reason-num {
    background-color: #062852;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}
.reason-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 17px;
    color: #062852;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.5;
}
.reason-text {
    font-size: 13.5px;
    color: #444;
    line-height: 1.7;
    text-align: left; /* 長文は左揃えが圧倒的に読みやすいです */
}

/* 8. 基本情報リスト */
.info-list {
    list-style: none;
    padding: 0;
}
.info-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
    line-height: 1.7;
}
.info-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #0066cc;
    font-weight: 700;
}
.info-list li strong {
    color: #062852;
}
.info-list li .small-text {
    font-size: 12.5px;
    color: #666;
    display: block;
    margin-top: 4px;
}
/* ==========================================================================
   【プロの視線設計】トップページ最上部のメリハリ・余白調整（完成版）
   ========================================================================== */

/* 最初のメインタイトル（中央揃え・プレミアム明朝） */
.top-main-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    color: #062852;
    font-weight: 700;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    line-height: 1.5;
    letter-spacing: 0.03em;
}
@media (min-width: 768px) {
    .top-main-title {
        font-size: 30px;
        margin-top: 45px;
        margin-bottom: 30px;
    }
}

/* 導入のリード文（中央寄せ） */
.hero-lead-box-center {
    max-width: 800px;
    margin: 0 auto;
    font-size: 14.5px;
    color: #444444;
    line-height: 1.8;
    text-align: center;
}

/* 丸角囲みバッジ（仕切り線を消した代わりに、上下のマージンで上品な余白を確保します） */
.tag-container {
    margin: 45px 0 55px 0; /* ★上に45px、下に55pxの「空間の仕切り線（ホワイトスペース）」を確保 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.badge-tag {
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #062852 !important;
    border: 1.5px solid #d2dfed !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
    white-space: nowrap;
}
.badge-check {
    color: #00c853 !important;
    font-weight: 900;
    margin-right: 4px;
}

/* 大メッセージ上の補足テキスト */
.sub-message-tag {
    font-size: 13.5px;
    color: #555;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
}

/* ★あきらめる前に頼ってくださいの下の2行を「濃紺の太字（中見出し）」へ劇的に格上げします */
.message-text-bold {
    font-size: 16.5px; /* 文字サイズを大きくして、しっかりと読ませます */
    color: #062852; /* ブランドカラーの濃紺を当てて、高級感と信頼感を出します */
    font-weight: 700; /* 太文字ボールドに */
    line-height: 1.8;
    margin-top: 15px;
    letter-spacing: 0.02em;
    text-align: left; /* 左揃えにして、上のメッセージからの流れを美しく整えます */
}
/* ==========================================================================
   【プロのレイアウト設計】ロゴ画像設定・在籍校余白・流れの2カラム最適化
   ========================================================================== */

/* 旧トップ画像のスマホ・PC最適化 */
.top-main-image-wrapper {
    max-width: 600px; /* パソコン画面で画像が大きくなりすぎて画質が荒れるのを防ぎます */
    margin: 30px auto;
    padding: 0 15px;
}
.top-main-image {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 四角い画像を、今回のサイトの世界観に合わせて丸角に優しく馴染ませます */
    box-shadow: 0 6px 20px rgba(6, 40, 82, 0.06);
}

/* ==========================================================================
   【プロの情報設計】基本スペック表（一元化ボックス）のテーブル風レイアウト
   ========================================================================== */
.info-summary-box {
    margin-top: 25px;
    padding: 30px !important;
}
.info-summary-row {
    display: flex;
    flex-direction: column; /* スマホ画面の時は縦並びに */
    gap: 8px;
    padding: 15px 0;
    border-bottom: 1px dashed #e2e8f0; /* 各項目を薄い破線で区切って見やすく */
}
.info-summary-row:first-child {
    padding-top: 0;
}
.info-summary-row.no-border {
    border-bottom: none;
    padding-bottom: 0;
}
.info-summary-label {
    font-weight: 700;
    color: #062852;
    font-size: 14.5px;
    min-width: 150px; /* PCの時にラベル（左側）の幅をピッタリ揃えます */
}
.info-summary-value {
    font-size: 14px;
    color: #333333;
    line-height: 1.6;
}

/* 在籍校のインライン表示用 */
.school-badge-container-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.school-inline-note {
    font-size: 12.5px;
    color: #666;
}

/* 在籍校バッジ自体のデザインを少しコンパクトに調整 */
.school-badge {
    display: inline-block;
    background-color: #ffffff !important;
    border: 1.5px solid #d2dfed !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #062852 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.02) !important;
    margin: 2px;
}

@media (min-width: 768px) {
    /* パソコンの大画面の時は、綺麗な「左ラベル ➔ 右コンテンツ」の2列表に自動変換します */
    .info-summary-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 25px;
    }
}
/* ==========================================================================
   【プロの距離設計】医学部枠と回遊カードエリアの誤認を防ぐ、大余白コントロール
   ========================================================================== */
.navigation-card-section {
    margin-top: 60px; /* スマホ画面の時は上に60pxの十分な余白を作ります */
}

@media (min-width: 768px) {
    .navigation-card-section {
        margin-top: 90px; /* PCの大画面の時は、上に90pxの贅沢な余白（ホワイトスペース）を確保し、文脈を完全に切り離します */
    }
}
/* ==========================================================================
   【資料室（document.php）専用デザインシステム（バグ修正版）】
   ========================================================================== */
.doc-box-card {
    padding: 30px 35px !important;
}
.doc-group-title {
    font-size: 19px;
    color: #062852;
    font-weight: 700;
    border-bottom: 2px solid #062852;
    padding-bottom: 12px;
    margin-bottom: 15px;
}
.doc-group-intro {
    font-size: 14.5px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}
.doc-sub-title {
    font-size: 15.5px;
    color: #062852;
    font-weight: 700;
    margin-bottom: 10px;
}
.doc-sub-section {
    border-left: 3px solid #d2dfed;
    padding-left: 15px;
}

/* 【バグ修正】・と◆の重複表示を強制カットし、◆だけを美しく表示します */
.doc-detail-dot-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 25px 0 !important;
}
.doc-detail-dot-list li {
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 14px;
    color: #333;
}

/* 高校別の個別日常アドバイス・リスト風ボタン */
.advice-header-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #555;
    margin-bottom: 8px;
}
.advice-list-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.advice-list-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d2dfed;
    border-radius: 6px;
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.advice-list-item:hover {
    border-color: #062852;
    background: #f7faff;
    box-shadow: 0 3px 8px rgba(6, 40, 82, 0.08);
}
.badge-school {
    background-color: #e3effc;
    color: #062852;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}
.badge-school-blue {
    background-color: #062852;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}
.advice-text-main {
    font-size: 14px;
    color: #062852;
    font-weight: 700;
}
.mock-exam-sub-box {
    margin-top: 15px;
    background: #fdfefe;
    border: 1px dashed #d2dfed;
    border-radius: 6px;
    padding: 15px 18px;
}
.mock-exam-sub-box p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #444;
}
.advice-list-item.mini-item {
    padding: 8px 12px;
}

/* 栃木進学データバッジ */
.data-flex-row {
    gap: 15px;
}
.data-badge-box {
    background: #ffffff;
    border: 1px solid #d2dfed;
    border-radius: 8px;
    padding: 15px 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.02);
}
.data-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #666;
    margin-bottom: 5px;
    min-height: 34px;
}
.data-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #062852;
    font-family: 'Noto Serif JP', serif;
}
.data-unit {
    font-size: 13px;
    font-weight: 700;
    margin-left: 2px;
}

/* 【バグ修正】長いURLや記号が連続した際に、枠を突き抜けないように強制折り返しさせます */
.evidence-list li a {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    display: inline-block;
    max-width: 100%;
}

/* スマホ表示での調整 */
@media screen and (max-width: 768px) {
    .doc-box-card {
        padding: 20px 20px !important;
    }
    .data-flex-row {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .data-label {
        min-height: auto;
    }
    .advice-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .badge-school, .badge-school-blue {
        margin-right: 0;
    }
}
/* ==========================================================================
   【特徴ページ専用】カード間の余白を引き締め、情報のまとまりを高めます
   ========================================================================== */
.features-flow-box {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 30pxから16pxへ引き締め、一体感を高めます */
}
/* ==========================================================================
   【周辺エリア写真専用】サイズを完全に固定し、絶対に潰さないグリッドシステム
   ========================================================================== */
.station-grid {
    display: flex;
    gap: 25px;
    align-items: center; /* 縦方向を中央揃えにしてバランスを整えます */
    justify-content: space-between;
}
.station-text-col {
    flex: 1; /* テキストに余った幅をすべて与えます */
    min-width: 0; /* 文字あふれ・改行のバグを防ぎます */
}
.station-img-col {
    width: 240px !important; /* PCでの写真の横幅を「240px」に完全固定 */
    flex-shrink: 0; /* 写真が縮んで潰れるのを100%防止 */
}
.station-img-col img {
    width: 100% !important;
    height: 150px !important; /* PCでの写真の高さを「150px」に完全固定 */
    object-fit: cover !important; /* 縦横比を絶対に維持したまま、はみ出た部分を綺麗に自動カットします（絶対に潰れません） */
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(6, 40, 82, 0.08);
    display: block;
}

/* ★水戸線専用（画像が2枚あるための特別設定） */
.station-img-col.mitoline-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.station-img-col.mitoline-images img {
    height: 95px !important; /* 2枚あるので、1枚あたりの高さを「95px」に完全固定 */
}

/* スマホ対応（横幅が狭い場合） */
@media (max-width: 768px) {
    .station-grid {
        flex-direction: column; /* スマホでは「上にテキスト、下に写真」の順に綺麗に並べます */
        align-items: stretch;
        gap: 15px;
    }
    .station-img-col {
        width: 100% !important; /* スマホでは画面いっぱいに広げます */
    }
    .station-img-col img {
        height: 180px !important; /* スマホで見栄えの良い高さを確保 */
    }
    .station-img-col.mitoline-images {
        flex-direction: row; /* スマホでは2枚の駅写真を綺麗に「横並びの2分割」にします */
        gap: 10px;
    }
    .station-img-col.mitoline-images img {
        flex: 1;
        height: 120px !important; /* 横並び時の高さを完全固定 */
    }
}
/* ==========================================================================
   【医学部合格】枠内プレミアムボタンのホバー演出（サイズ完全ロック）
   ========================================================================== */
.btn-premium-gold {
    display: block;
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto;
    background: #c59b27 !important; /* 弘道塾の上品なゴールド */
    color: #ffffff !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.25s ease !important;
    box-sizing: border-box;
}
.btn-premium-gold:hover {
    background: #b08719 !important; /* ホバー時に少し深みのあるゴールドへ */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.btn-premium-white {
    display: block;
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto;
    background: #ffffff !important; /* 純白ボタン */
    color: #062852 !important; /* 文字は弘道塾ネイビー */
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 30px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.25s ease !important;
    box-sizing: border-box;
}
.btn-premium-white:hover {
    background: #f4f8fc !important; /* ホバー時にごく淡いブルーグレーへ */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
/* ==========================================================================
   【最新・引き締め版】ヘッダー（トップバー）の縦幅をスマートに引き締めるデザイン
   ========================================================================== */
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 9999; /* 常に画面最上部に固定して安心感を与えます */
}
.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 8px 20px; /* 上下の余白を「15px」から「8px」へ引き締め、縦幅をスリムにしました */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-inner .logo {
    font-size: 18px; /* ロゴの文字サイズを「20px」から「18px」に微調整してスマート化 */
    font-weight: 700;
    color: #062852;
    text-decoration: none;
    font-family: 'Noto Serif JP', serif;
}
.header-nav {
    display: block;
}
.nav-list {
    list-style: none;
    display: flex;
    gap: 25px; /* 文字同士の最適な横方向の余白 */
    margin: 0;
    padding: 0;
}
.nav-list li {
    display: inline-block; /* 万が一の縦並びバグを100%防ぐ防弾指定 */
}
.nav-list li a {
    text-decoration: none;
    color: #444444;
    font-size: 13.5px; /* 文字サイズを「14px」から「13.5px」に引き締めて、知的な余白を際立たせました */
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav-list li a:hover {
    color: #062852;
}

/* スマホ対応（横幅が狭い場合） */
@media (max-width: 768px) {
    .header-inner {
        flex-direction: column;
        gap: 8px;
        padding: 8px 15px;
    }
    .nav-list {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-list li a {
        font-size: 12px;
    }
}