@charset "UTF-8";
/* Serif（明朝）の読み込みを削除し、Sans（ゴシック）のみにしました */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
    --primary-color: #1a355b; /* 信頼感のある紺 */
    --accent-color: #d4cbb8;  /* 上品なベージュ */
    --bg-color: #fdfdfd;      /* 柔らかい白 */
    --text-color: #333333;
    --white: #ffffff;
    --spacing-lg: 80px;
    --spacing-md: 40px;
}

/* 基本設定 */
body {
    font-family: 'Noto Sans JP', sans-serif; /* 全体をゴシック体に */
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    font-weight: 400; /* 本文の太さ */
}

/* 見出し・ロゴの設定変更 */
h1, h2, h3 {
    font-family: 'Noto Sans JP', sans-serif; /* 見出しもゴシック体に統一 */
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-weight: 700; /* 太字にして存在感を出す */
    letter-spacing: 0.05em; /* 少し文字間を空けて上品に */
}

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

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
header {
    background: var(--white);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    /* フォント設定は削除し、画像の配置設定にします */
    display: flex;
    align-items: center;
}

.logo img {
    height: 45px; /* ここで表示上の高さを固定します */
    width: auto;  /* 幅は自動調整 */
    display: block;
}

/* フッターロゴも同様に変更 */
.footer-logo {
    font-size: 1.5rem;
    font-family: 'Noto Sans JP', sans-serif; /* ゴシック体に */
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

/* ナビゲーションのリンク基本設定 */
nav a {
    font-size: 0.95rem;
    color: var(--primary-color);
    font-weight: 500;
    /* 色がフワッと変わるようにアニメーション設定を追加 */
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* カーソルが乗ったときの設定（ご指定の色 #4771ac に変更） */
nav a:hover {
    color: #4771ac;
    opacity: 1; /* 元の透明になる設定を打ち消して、色をはっきり見せる */
}

/* --- 【重要】お問い合わせボタンの例外処理 --- */
/* これを入れないと、ボタンの文字まで青くなって背景と同化して読めなくなります */
a.btn-contact:hover {
    color: #ffffff !important; /* ボタンの文字は白のまま */
    background-color: #4771ac; /* ボタンの背景をご指定の青に変える（統一感が出ます） */
}

.btn-contact {
    background-color: var(--primary-color);
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: 30px;
}

/* メインビジュアル */
/* 画像を囲む枠（余白を消す設定） */
.hero-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* 画像の下にできる数ミリの隙間を消すおまじない */
    background-color: var(--bg-color);
}

/* 画像本体の設定 */
.hero-img {
    width: 100%;        /* 常に横幅いっぱいにする */
    height: auto;       /* 高さは横幅に合わせて自動調整 */
    object-fit: cover;  /* 画像の比率を崩さない */
    display: block;
}

/* セクション共通 */
section {
    padding: var(--spacing-lg) 0;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--primary-color);
    margin: 20px auto 0;
}

/* --- 塾紹介・他部門リンクエリア（薄い青色ver） --- */
.intro-section {
    /* 背景色を「薄い青（アイスブルー）」に変更 */
    background-color: #f0f5fa; 
    
    /* 上下の線を「薄い紺色」にして馴染ませる */
    border-top: 1px solid rgba(26, 53, 91, 0.1);
    border-bottom: 1px solid rgba(26, 53, 91, 0.1);
    
    padding: 70px 0;
    text-align: center;
}

.intro-text {
    font-size: 1.15rem;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.9;
    margin-bottom: 35px;
}

/* ボタンのデザイン */
.btn-external {
    display: inline-block;
    
    /* ボタンは紺色のまま（背景の青と同系色で綺麗にまとまります） */
    background-color: var(--primary-color);
    color: var(--white);
    
    padding: 14px 50px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1rem;
    
    box-shadow: 0 4px 10px rgba(26, 53, 91, 0.2);
    
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* ボタンホバー時の動き */
.btn-external:hover {
    background-color: var(--white);
    color: var(--primary-color);
    border-color: var(--primary-color);
    
    box-shadow: 0 6px 15px rgba(26, 53, 91, 0.3);
    transform: translateY(-3px);
    opacity: 1;
}

/* スマホでの調整 */
@media (max-width: 768px) {
    .pc-only { display: none; }
    .intro-text {
        font-size: 1rem;
        text-align: left;
    }
    .intro-section { padding: 50px 0; }
    .btn-external {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }
}

/* クラス紹介 */
.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.class-card {
    background: var(--white);
    padding: 30px;
    border-top: 4px solid var(--primary-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.class-card img {
    width: 100%;       /* 横幅はいっぱいに広げる */
    
    /* ↓ これを追加：画像の比率を「3:2」に固定します */
    aspect-ratio: 3 / 2; 
    
    /* ↓ これを追加：枠に合わせてトリミングし、歪みを防ぎます */
    object-fit: cover; 
    
    /* 下のテキストとの余白 */
    margin-bottom: 20px;
    
    /* 少し角を丸くして優しい印象に（お好みで） */
    border-radius: 6px;
    
    /* 写真の周りに極細の枠線を入れて、白い写真でも背景と馴染まないようにする */
    border: 1px solid #eee;
}

/* --- クラス紹介エリアの調整 --- */

/* クラス紹介セクション全体の余白を広げる */
#classes {
    /* 元々80pxだったのを120pxに増やして、ゆとりを持たせます */
    padding-top: 80px;
    padding-bottom: 120px;
}

/* 追加した説明文のデザイン */
.section-lead {
    text-align: center;       /* 中央揃え */
    max-width: 800px;         /* 横に広がりすぎないように制限 */
    margin: -20px auto 60px;  /* 上の位置調整、左右中央、下のカードとの距離(60px) */
    line-height: 2;           /* 行間を広めに */
    font-weight: 500;         /* 少ししっかりした太さに */
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    #classes {
        /* スマホでも少し広めに確保 */
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .section-lead {
        font-size: 0.95rem;
        text-align: left;     /* スマホでは左寄せの方が読みやすい場合が多い */
        margin-bottom: 40px;  /* 下の間隔を少し狭める */
    }
}

/* --- 塾長挨拶（修正版） --- */
.message-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    /* align-items: center; を削除し、上揃えに変更 */
    align-items: flex-start; 
}

.message-img {
    flex: 1;
    min-width: 300px;
    display: flex; 
    justify-content: center;
    /* 写真自体の配置も上寄せにするため align-items は削除または flex-start */
    align-items: flex-start; 
}

.message-img img {
    width: 100%;
    max-width: 350px; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 15px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    
    /* スマホ表示時に写真が上にくっつきすぎないよう微調整したい場合はここに margin-top を入れますが、
       基本はこれでテキストの開始位置と揃います */
}

.message-text {
    flex: 1;
    min-width: 300px;
}

/* テキストの最初の段落の余白を消して、写真のトップと完全に揃える設定 */
.message-text p:first-child {
    margin-top: 0;
}

.message-name {
    margin-top: 30px;
    font-weight: bold;
    text-align: right;
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* モバイル表示時の微調整 */
@media (max-width: 768px) {
    .message-layout { 
        flex-direction: column; 
    }
    .message-img {
        /* スマホの時は写真を中央に寄せたい場合 */
        justify-content: center;
        width: 100%;
    }
    .message-img img {
        width: 220px;
        height: 220px;
        margin-bottom: 30px;
    }
}

/* お知らせ */
.news-list {
    list-style: none;
    padding: 0;
}

.news-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.news-date {
    color: #888;
    font-size: 0.9rem;
    margin-right: 15px;
}

/* お問い合わせフォーム */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--primary-color);
}

input, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* パディングを含める */
}

button[type="submit"] {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 15px 40px;
    font-size: 1rem;
    cursor: pointer;
    display: block;
    margin: 30px auto 0;
    transition: background 0.3s;
}

button[type="submit"]:hover {
    background-color: #2c4a7c;
}

footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 0 30px;
    margin-top: var(--spacing-lg);
}

/* レイアウト */
.footer-layout {
    display: flex;
    justify-content: space-between;
    /* ロゴが無くなったので、上下中央揃えにしてバランスを取ります */
    align-items: center; 
    margin-bottom: 60px;
    gap: 40px;
}

/* --- 左側：情報エリア --- */
.footer-info {
    max-width: 500px;
}

/* ロゴ画像のスタイルは削除しました */

/* 部門名（テキストロゴとしてデザイン） */
.footer-dept-name {
    font-size: 1.5rem; /* サイズを大きくしてロゴ代わりに */
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
    color: var(--white);
    line-height: 1.2;
}
/* リンクにする場合のホバー設定 */
a.footer-dept-link {
    display: inline-block;
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s;
}
a.footer-dept-link:hover {
    opacity: 0.8;
}

.footer-address {
    font-size: 0.95rem;
    line-height: 1.8;
    opacity: 0.9;
    font-weight: 500;
}

/* --- 右側：メニューエリア --- */
.footer-menu {
    margin: 0;
}

.footer-menu h4 {
    display: none;
}

.footer-menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-menu li {
    margin: 0;
}

.footer-menu a {
    color: var(--white);
    font-size: 0.95rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
    display: inline-block;
    position: relative;
}

.footer-menu a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* --- コピーライト --- */
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 30px;
    font-size: 0.85rem;
    text-align: center;
    opacity: 0.8;
    font-family: sans-serif;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .footer-layout {
        flex-direction: column;
        align-items: flex-start; /* スマホでは左揃え */
        gap: 40px;
    }
    
    .footer-info {
        max-width: 100%;
    }
    
    .footer-menu {
        width: 100%;
    }

    .footer-menu ul {
        flex-direction: column;
        gap: 0;
    }
    
    .footer-menu li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .footer-menu a {
        display: block;
        padding: 12px 0;
    }
    
    .footer-menu li:last-child {
        border-bottom: none;
    }
}

/* --- ハンバーガーメニュー用スタイル --- */

/* デフォルトではハンバーガーボタンを非表示 */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 200; /* メニューより上に表示 */
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    transition: all 0.3s ease;
}

/* 3本線の位置 */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

/* 開いたとき（クラスactiveがついたとき）のアニメーション */
.hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* --- スマホサイズ時の設定 --- */
@media (max-width: 768px) {
    /* ハンバーガーボタンを表示 */
    .hamburger {
        display: block;
        position: relative; /* ボタン位置の基準 */
        z-index: 200; /* メニュー(150)より手前に表示 */
    }

    /* ナビゲーションメニュー（開く前） */
    nav {
        position: fixed; /* 画面全体に固定 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* 画面の高さいっぱい */
        background-color: var(--bg-color); /* 背景色 */
        
        /* 中身を中央揃えにする設定 */
        display: flex;
        flex-direction: column; /* 中身を縦並びにする */
        justify-content: center;
        align-items: center;
        
        /* アニメーション設定 */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 150; /* ボタンより奥、コンテンツより手前 */
    }

    /* クラスactiveがついたら表示 */
    nav.active {
        opacity: 1;
        visibility: visible;
    }

    /* メニューリストの調整 */
    nav ul {
        flex-direction: column; /* 縦並び */
        align-items: center;
        gap: 30px; /* 項目ごとの間隔 */
        padding: 0;
        /* 元々 none になっていたのを上書きして表示 */
        display: flex; 
    }
    
    nav ul li {
        margin: 0; /* 余白リセット */
    }

    nav a {
        font-size: 1.2rem; /* 文字を少し大きく */
        font-weight: bold;
    }

    /* ボタンのスタイル調整 */
    .btn-contact {
        margin-top: 10px;
    }
}

/* -------------------------------------------
   クラス紹介ページ (course.html) 用デザイン
   ※ゴシック体（Noto Sans JP）統一版
------------------------------------------- */

/* ページヘッダー（タイトルエリア） */
.page-header {
    background-color: var(--primary-color);
    padding: 60px 20px;
    text-align: center;
    color: white;
    margin-bottom: 60px;
}
.page-header h1 {
    color: white;
    font-size: 2rem;
    margin: 0 0 20px 0;
    font-weight: 700;
}
.page-header p {
    margin: 0;
    opacity: 0.9;
    font-weight: 500;
}

/* クラスセクション共通 */
.class-section {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px dashed #ddd; 
}
.class-section:last-of-type {
    border-bottom: none;
}

/* クラスごとのタイトル */
.class-title {
    font-size: 1.8rem;
    color: var(--primary-color);
    border-left: 6px solid var(--primary-color);
    padding-left: 20px;
    margin-bottom: 40px;
    font-weight: 700;
}

/* 画像とテキストの横並びレイアウト */
.class-content {
    display: flex;
    align-items: center; 
    gap: 50px;
    margin-bottom: 40px;
}

.class-content.reverse {
    flex-direction: row-reverse;
}

.class-img {
    flex: 1;
}
.class-img img {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.class-text {
    flex: 1.2;
}

/* キャッチコピー */
.catchphrase {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.5;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 15px;
    display: inline-block;
    font-weight: 700;
}

/* 私立内部進学生クラス専用の詳細ボックス */
.class-detail-box {
    background-color: #f9f8f4;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 40px;
    margin-top: 40px;
}

/* 対象年齢・教科リスト */
.class-dl {
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
}
.class-dl .dl-row {
    display: flex;
    border-top: 1px solid #ddd;
    padding: 15px 0;
}
.class-dl dt {
    width: 120px;
    font-weight: bold;
    color: var(--primary-color);
    flex-shrink: 0;
}
.class-dl dd {
    margin: 0;
}

/* 特徴ブロック */
.feature-block {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
}
.feature-title {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 2px solid var(--primary-color);
}

/* 実績リスト（2カラム） */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}
.achievement-column {
    background: #fff;
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.list-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
}
.list-note {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
}
.school-list {
    padding-left: 20px;
    margin: 0;
}
.school-list li {
    margin-bottom: 8px;
    font-weight: 500;
}

/* --- ハンバーガーメニュー --- */
.hamburger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 200;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    position: absolute;
    transition: all 0.3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

.hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* --- スマホサイズ時の設定 --- */
@media (max-width: 768px) {
    .hamburger { display: block; }

    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 150;
    }

    nav.active {
        opacity: 1;
        visibility: visible;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 0;
        display: flex;
    }
    nav ul li { margin: 0; }
    nav a {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .footer-logo img { height: 35px; }

    .pc-only { display: none; }
    .intro-text {
        font-size: 1rem;
        text-align: left;
    }
    .intro-section { padding: 50px 0; }
    .btn-external {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }

    /* クラス紹介ページ用スマホ設定 */
    .class-content, 
    .class-content.reverse {
        flex-direction: column;
        gap: 20px;
    }
    .class-img { width: 100%; }
    .catchphrase { font-size: 1.2rem; width: 100%; }
    .class-detail-box { padding: 20px; }
    .class-dl .dl-row { flex-direction: column; }
    .class-dl dt { margin-bottom: 5px; }
}

/* ↓↓↓ アクセス・お問い合わせエリア：余白を詰めた修正版 ↓↓↓ */

/* 全体のレイアウト */
.access-grid {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}

/* ボックス共通設定 */
.access-box, .contact-box {
    flex: 1;
    background: var(--white);
    padding: 40px 30px; /* 上下のパディングを50px→40pxに少し詰めました */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; を削除（ボタンを上に寄せるため） */
    justify-content: flex-start; 
}

/* タイトル（見出し） */
.access-title {
    font-size: 1.4rem;
    color: var(--primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 15px; /* 線との間隔を少し詰めました */
    margin-bottom: 20px;  /* 下のテキストとの間隔を30px→20pxに */
    margin-top: 0;
    text-align: center;
}

/* 住所や説明文のエリア */
.access-body {
    margin-bottom: 25px;  /* ボタンとの間隔を40px→25pxに狭くしました */
    text-align: center;
}

.access-body p {
    line-height: 1.7;    /* 行間をわずかに詰めました */
    margin: 0;
}

/* ボタンの設定 */
.btn-full {
    width: 100%;
    max-width: 280px;    /* ボタンが横に広がりすぎないよう最大幅を設定（お好みで） */
    margin: 0 auto;      /* 中央寄せ */
    display: block;
    text-align: center;
    box-sizing: border-box;
    padding: 16px 0;     /* ボタン自体の縦幅も少しスマートに */
    font-size: 1.05rem;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
}

/* --- スマホ表示時の調整 --- */
@media (max-width: 768px) {
    .access-grid {
        flex-direction: column;
        gap: 20px;
    }
    .access-box, .contact-box {
        padding: 30px 20px;
    }
    .access-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    .access-body {
        margin-bottom: 20px; /* スマホではさらに少し詰める */
    }
    .btn-full {
        max-width: 100%;    /* スマホでは横幅いっぱいに */
    }
}

/* -------------------------------------------
   クラス紹介ページ (course.html) 用デザイン
   ※ゴシック体（Noto Sans JP）統一版
------------------------------------------- */

/* ページヘッダー */
.page-header {
    background-color: var(--primary-color);
    padding: 60px 20px;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}
.page-header h1 {
    color: white;
    font-size: 2rem;
    margin: 0 0 20px 0;
    font-weight: 700;
}
.page-header p {
    margin: 0;
    opacity: 0.9;
    font-weight: 500;
}

/* クラスセクション共通 */
.class-section {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px dashed #ddd; 
}
.class-section:last-of-type {
    border-bottom: none;
}

/* クラスごとのタイトル */
.class-title {
    font-size: 1.8rem;
    color: var(--primary-color);
    border-left: 6px solid var(--primary-color);
    padding-left: 20px;
    margin-bottom: 40px;
    font-weight: 700;
}

/* 画像とテキストの横並び */
.class-content {
    display: flex;
    align-items: center; 
    gap: 50px;
    margin-bottom: 40px;
}

.class-content.reverse {
    flex-direction: row-reverse;
}

.class-img {
    flex: 1;
}
.class-img img {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.class-text {
    flex: 1.2;
}

/* キャッチコピー */
.catchphrase {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.5;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 15px;
    display: inline-block;
    font-weight: 700;
}

/* 私立内部進学生クラス詳細ボックス */
.class-detail-box {
    background-color: #f9f8f4;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 40px;
    margin-top: 40px;
}

/* 対象年齢・教科リスト */
.class-dl {
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
}
.class-dl .dl-row {
    display: flex;
    border-top: 1px solid #ddd;
    padding: 15px 0;
}
.class-dl dt {
    width: 120px;
    font-weight: bold;
    color: var(--primary-color);
    flex-shrink: 0;
}
.class-dl dd {
    margin: 0;
}

/* 特徴ブロック */
.feature-block {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
}
.feature-title {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 2px solid var(--primary-color);
}

/* 実績リスト（2カラム） */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}
.achievement-column {
    background: #fff;
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.list-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-align: center;
}
.list-note {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
}
.school-list {
    padding-left: 20px;
    margin: 0;
}
.school-list li {
    margin-bottom: 8px;
    font-weight: 500;
}

/* --- スマホサイズ時の設定（追記分） --- */
@media (max-width: 768px) {
    /* アクセスセクションスマホ対応 */
    .access-grid {
        flex-direction: column;
        gap: 30px;
    }
    .access-box, .contact-box {
        width: 100%;
        box-sizing: border-box;
        padding: 30px 20px;
    }

    /* クラス紹介ページスマホ対応 */
    .class-content, 
    .class-content.reverse {
        flex-direction: column;
        gap: 20px;
    }
    .class-img { width: 100%; }
    .catchphrase { font-size: 1.2rem; width: 100%; }
    .class-detail-box { padding: 20px; }
    .class-dl .dl-row { flex-direction: column; }
    .class-dl dt { margin-bottom: 5px; }
}

.nav-logo-sp {
    display: none; /* デフォルトでは隠す */
}

/* スマホサイズ時の設定に追加 */
@media (max-width: 768px) {
    /* メニュー内のロゴを表示 */
    .nav-logo-sp {
        display: block;
        margin-bottom: 40px; /* 下のメニューとの間隔 */
        text-align: center;  /* 中央寄せ */
        width: 100%;
    }
    
    .nav-logo-sp img {
        height: 50px; /* ロゴの大きさ（お好みで調整） */
        width: auto;
        margin: 0 auto;
        display: block;
    }
}

.btn-wrapper {
    display: flex;
    justify-content: center; /* 横方向の中央寄せ */
    width: 100%;
    margin-top: 20px;        /* 上のテキストとの余白 */
}

/* ボタン自体の設定（もし横幅が広すぎる場合の微調整） */
.btn-wrapper .btn-full {
    display: inline-block;   /* 横幅を中身に合わせる（または指定する） */
    width: auto;             /* もし100%になっていたらautoに戻す */
    min-width: 250px;        /* ボタンの最低限の横幅（お好みで） */
    text-align: center;
}

/* --- 料金表セクションのデザイン --- */
.price-section {
    margin-top: 60px;
    padding: 40px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.price-title {
    text-align: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.admission-fee-box {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f0f5fa;
    border-radius: 4px;
    color: var(--primary-color);
}

.admission-fee-box span {
    font-size: 1.6rem;
    margin-left: 10px;
}

/* テーブルの設定 */
.price-table-wrapper {
    overflow-x: auto; /* スマホで横スクロール可能に */
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.price-table th, .price-table td {
    border: 1px solid #ddd;
    padding: 20px;
    text-align: left;
}

.price-table th {
    background-color: #f8f9fa;
    color: var(--primary-color);
    font-weight: bold;
}

.course-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.subjects {
    font-size: 0.9rem;
    color: #666;
    display: inline-block;
    margin-top: 5px;
}

.price-notice {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: 20px;
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
    .price-section {
        padding: 20px;
    }
    .price-table th, .price-table td {
        padding: 15px 10px;
        font-size: 0.9rem;
    }
    .admission-fee-box {
        font-size: 1.1rem;
    }
}

/* --- お問い合わせページ (contact.html) デザイン統一版 --- */

.contact-page {
    padding-bottom: 60px;
    background-color: #f8f9fa;
}

/* 3. お問い合わせページ内の各ブロック（section）の余白を詰める */
.contact-page section {
    padding: 20px 0; /* 80pxから20pxへ大幅に短縮 */
}

.contact-intro {
    text-align: center;
    padding: 30px 0 20px; /* 余白を圧縮 */
}

/* タイトルと内容の間の余白も少し詰める */
.section-accent-title {
    font-size: 1.6rem;
    color: var(--primary-color);
    border-left: 6px solid var(--primary-color);
    padding-left: 20px;
    margin: 0 0 25px 0; 
    font-weight: 700;
}

/* --- お問い合わせブロックの余白調整 --- */
.inquiry-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px; /* 35pxから20pxに縮小してブロックの間を詰める */
    padding: 40px 30px; 
    border: 1px solid #eee;
}

/* 電話・フォームの共通調整 */
.phone-content {
    text-align: center;
}

.phone-link {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* フォーム項目間の余白を微調整 */
.form-group {
    margin-bottom: 22px; 
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--primary-color);
}

/* --- 必須バッジのデザイン（画像参照） --- */
.required {
    display: inline-block;
    background-color: #e63946; /* 赤色バッジ */
    color: #ffffff; /* 白色テキスト */
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px; /* 角丸 */
    margin-left: 10px;
    vertical-align: middle;
}

/* 以前のアスタリスク設定（::after）は削除します */
.required::after {
    content: none;
}

/* セレクトボックスのデザイン */
.select-box {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a355b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    appearance: none;
    cursor: pointer;
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-flex {
    display: flex;
    gap: 15px;
}

.form-flex input {
    flex: 1;
}

/* プライバシーポリシー同意エリア */
.policy-agreement {
    text-align: center;
    margin: 30px 0;
    padding: 25px;
    background: #f0f5fa;
    border-radius: 6px;
}

.policy-link {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: bold;
}

/* ボタン：四角く整える */
.btn-submit {
    width: 100%;
    max-width: 350px;
    padding: 18px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

/* --- お問い合わせページ 送信ボタンの中央寄せ --- */
.form-submit {
    text-align: center;     /* 中のボタンを中央に寄せる */
    margin-top: 40px;       /* 上の入力項目（プライバシーポリシー）との間隔 */
}

.form-submit .btn-submit {
    display: inline-block;  /* 中央寄せを有効にするために inline-block に変更 */
    width: 100%;
    max-width: 350px;       /* ボタンが広がりすぎないように制限 */
    padding: 18px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.3s;
}

.form-submit .btn-submit:hover {
    opacity: 0.9;
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
    .form-submit {
        margin-top: 30px;
    }
    .form-submit .btn-submit {
        width: 100%;        /* スマホでは画面幅いっぱいに（左右余白は残る） */
        max-width: none;    /* スマホでは制限を解除 */
    }
}

/* 任意のラベルもデザインを合わせる場合（任意） */
.optional {
    display: inline-block;
    background-color: #999;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .form-flex { flex-direction: column; gap: 10px; }
    .form-row-2col { grid-template-columns: 1fr; gap: 0; }
    .inquiry-card { padding: 20px; }
    .phone-link { font-size: 2rem; }
}

/* --- 確認ページ全体のレイアウト設定 --- */
.confirm-page {
    padding-top: 60px;    /* ヘッダーとの隙間 */
    padding-bottom: 80px; /* フッターとの隙間 */
    background-color: #f8f9fa; /* 背景色 */
}

.confirm-list {
    margin-bottom: 40px; /* リストとボタンの間の隙間 */
}

/* --- 確認項目のデザイン --- */
.confirm-item {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

.confirm-item dt {
    width: 220px;
    font-weight: bold;
    color: var(--primary-color);
    flex-shrink: 0;
}

.confirm-item dd {
    margin: 0;
    color: #333;
}

/* --- 確認ページ ボタンのズレ 最終解決策 --- */

.confirm-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

/* ★ボタンを包む「箱」の高さをガチガチに固定する */
.confirm-btn-group .btn-unit,
.confirm-btn-group form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px !important; /* 親の高さを強制固定 */
    margin: 0 !important;
    padding: 0 !important;
}

/* ★ボタン本体：全ての装飾を一度真っさらにして、再構築する */
.btn-back, 
.btn-submit {
    /* 1. 全リセット（ブラウザの勝手な装飾を消す） */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    background: none;
    
    /* 2. 構造の固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 3. サイズをミリ単位で固定（!importantで強制） */
    width: 260px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* 4. フォントと角丸 */
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box !important; /* 枠線を高さに含める */
}

/* 左：修正ボタン */
.btn-back {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

/* 右：送信ボタン */
.btn-submit {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    /* ★左の1pxの枠線と合わせるため、透明な1pxの枠線を引く */
    border: 1px solid transparent !important;
}

/* スマホ用設定（縦並びレイアウト） */
@media (max-width: 768px) {
    .confirm-item {
        flex-direction: column; /* 項目名の下に内容を出す */
        padding: 15px 0;
    }
    .confirm-item dt {
        width: 100%;
        color: #888;
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    .confirm-item dd {
        font-size: 1.1rem;
        font-weight: bold;
    }
    .confirm-btn-group {
        flex-direction: column-reverse; /* 送信を上に */
        gap: 15px;
    }
    .btn-back, .btn-submit {
        width: 100%;
        max-width: 320px;
        height: 56px !important; /* スマホ用高さ */
    }
}


/* --- 送信完了ページ (thanks.html) 専用 --- */
.thanks-page {
    padding: 80px 0;
    text-align: center;
    background-color: #f8f9fa;
}

.thanks-content {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 60px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.thanks-message h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.thanks-message p {
    line-height: 2;
    margin-bottom: 20px;
    color: #555;
}

.thanks-page .btn-wrapper {
    margin-top: 40px;
}

/* --- 背景色の共通ルール設定 --- */

/* 白背景セクションの余白調整 */
#classes, #message {
    background-color: var(--white);
}

/* アイスブルー背景セクションの統一 */
.intro-section, 
.bg-light-blue {
    background-color: #f0f5fa !important; /* 強制的にアイスブルーに固定 */
    border-top: 1px solid rgba(26, 53, 91, 0.05);
    border-bottom: 1px solid rgba(26, 53, 91, 0.05);
}

/* --- 保護者さまの声：アイコンとレイアウトの修正 --- */

.voice-header {
    display: flex;
    align-items: center;
    gap: 15px; /* アイコンと名前の間隔 */
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

/* シルエットアイコン */
.user-silhouette {
    width: 50px;
    height: 50px;
    background-color: #e0e7ef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    flex-shrink: 0;
}

.voice-info {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.1rem;
    margin: 0;
}

.voice-body {
    position: relative;
}

/* TOPページ用：長文を省略する設定 */
.text-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 従来のブラウザ用 */
    line-clamp: 4;         /* 標準プロパティ（これを追加して警告を消します） */
    overflow: hidden;
}

/* 全文表示用（voice.html） */
.voice-card-full {
    margin-bottom: 30px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(26, 53, 91, 0.05);
}

/* --- 共通の余白設定を調整 --- */

/* 1. ページヘッダー（紺色）の下の余白を消す */
.page-header {
    background-color: var(--primary-color);
    padding: 60px 20px;
    text-align: center;
    color: white;
    margin-bottom: 0; /* 60pxや20pxから 0 に変更 */
}

/* 2. メインコンテンツの上部の余白を個別に制御 */
.voice-page, .contact-page, .course-page {
    padding-top: 40px; /* ここでお好みの「詰まり具合」を調整できます */
}

/* 3. フッターの上の強制的な余白を消す */
footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 0 30px;
    margin-top: 0; /* var(--spacing-lg) から 0 に変更 */
}

/* 4. セクションの最後とフッターがくっつきすぎないよう調整 */
main > section:last-of-type,
.voice-full-list {
    padding-bottom: 80px; /* コンテンツが終わった後に適切な余白を持たせる */
}

/* 5. 以前の line-clamp 警告の修正（標準プロパティの追記） */
.text-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4; /* スクリーンショット 2.42.03 の警告対策 */
    overflow: hidden;
}

/* --- 保護者さまの声：デザイン調整 --- */

#parent-voice {
    padding: 80px 0;
}

.voice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* PCで横並び */
    gap: 30px;
}

.voice-card {
    background: var(--white);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(26, 53, 91, 0.06);
    border: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
}

.voice-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.user-silhouette {
    width: 50px;
    height: 50px;
    background-color: #e0e7ef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    flex-shrink: 0;
}

.voice-info {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.1rem;
    margin: 0;
}

.voice-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    /* 三点リーダー（...）の設定を完全に解除 */
    overflow: visible;
    display: block;
    -webkit-line-clamp: none; /* 従来のブラウザ用 */
    line-clamp: none;         /* ★標準プロパティ（これを追加） */
}

.view-more-btn-wrapper {
    text-align: center;
    margin-top: 50px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .voice-grid {
        grid-template-columns: 1fr; /* スマホで縦並び */
        gap: 20px;
    }
    
    .view-more-btn-wrapper .btn-external {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }
}

/* --- 体験談ページ 代表メッセージ --- */
.representative-section {
    padding: 60px 0 80px; /* 上下の余白 */
    background-color: #fff; /* 背景は白にして清潔感を */
}

.representative-card {
    background: #f0f5fa; /* ほんのり青みがかった背景色で優しさを演出 */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    max-width: 900px;
    margin: 0 auto;
}


.representative-content {
    margin-top: 20px;
}


.message-text {
    font-size: 1.1rem;
    line-height: 2;
    color: #333;
    margin-bottom: 30px;
    /* 「」などで囲まず、自然な語りかけにするための余白 */
}

.representative-name {
    text-align: right;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
}

.representative-name span {
    font-size: 1.3rem; /* お名前を少し大きく */
    margin-left: 10px;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .representative-card {
        padding: 30px 20px;
    }
    .message-text {
        font-size: 1rem;
        line-height: 1.8;
    }
    .representative-name {
        font-size: 1rem;
    }
}