/* ====================================
   【重要】フッターを常に最下部に配置する設定
   ==================================== */

/* ページ全体の高さを管理 */
body {
  /* 画面の高さの100%を「最低限の高さ」とする */
  min-height: 100vh;
  /* 中身を縦並びにするレイアウト設定 */
  display: flex;
  flex-direction: column;
  /* ブラウザのデフォルトの余白をなくす */
  margin: 0;
}

/* メインコンテンツ（フッター以外の部分） */
main {
  /* 余ったスペースを全てこの部分が埋める（これでフッターが下に押しやられる） */
  flex: 1;
}

/* ※もし、メインの本文を <div class="main-content"> などで
   囲んでいる場合は、上記の 'main' を '.main-content' に変えてください。 */
    /* =========================================
       基本設定 (Global)
       ========================================= */
    :root {
        --primary-green: #005F6B;   /* 知的な青緑 */
        --accent-orange: #FF8A65;   /* コーラルオレンジ */
        --accent-orange-dark: #FF7043;
        --text-dark: #333333;
        --text-on-photo: #ffffff;   /* 写真上の文字色 */
        --bg-light: #f9fbfb;
        --font-base: 'Noto Sans JP', sans-serif;
        --sv-primary-color: #005F6B; /* 生徒様の声メインカラー */
        --sv-accent-color: #FF8A65;  /* 生徒様の声アクセントカラー */
        --sv-text-color: #333333;    /* 生徒様の声テキスト色 */
        --sv-heading-color: #005F6B; /* 生徒様の声見出し色 */
        --sv-bg-color: #f9fbfb;      /* 生徒様の声背景色 */
        --sv-card-bg: #ffffff;       /* 生徒様の声カード背景色 */
        --sv-accent-bg: #E8F5E9;     /* 生徒様の声薄い緑背景色 */
    }

    html {
        scroll-behavior: smooth; /* スムーススクロール */
    }

    body {
        margin: 0;
        padding: 0;
        font-family: var(--font-base);
        color: var(--text-dark);
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;
        padding-top: 80px; /* ヘッダー固定分の余白 */
    }

    /* 共通コンテナ */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* =========================================
       ヘッダー (Header & Hamburger Menu)
       ========================================= */
    .site-header {
        background-color: #f5f5f5;
        width: 100%;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .header-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-logo img {
        display: block;
        height: 60px;
        width: auto;
    }

    .header-nav-wrapper {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .header-nav { display: flex; gap: 10px; }

    .header-nav a {
        text-decoration: none;
        color: #444;
        background-color: #fff;
        padding: 10px 18px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.85rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .header-nav a:hover {
        transform: translateY(-2px);
        color: var(--primary-green);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .header-cta { display: flex; gap: 10px; }

    .btn-contact, .btn-trial {
        text-decoration: none;
        padding: 12px 24px;
        border-radius: 50px;
        font-weight: 700;
        color: #fff;
        font-size: 0.9rem;
        white-space: nowrap;
        box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        transition: opacity 0.3s;
    }
    .btn-contact { background-color: #555555; }
    .btn-trial { background: linear-gradient(90deg, #FF9A7B, var(--accent-orange-dark)); }
    .btn-contact:hover, .btn-trial:hover { opacity: 0.9; }

    /* ハンバーガーボタン (PC非表示) */
    .hamburger-btn {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        width: 40px;
        height: 40px;
        position: relative;
        z-index: 1100;
    }
    .hamburger-btn span {
        display: block;
        width: 26px;
        height: 2px;
        background-color: #333;
        position: absolute;
        left: 7px;
        transition: all 0.3s;
    }
    .hamburger-btn span:nth-child(1) { top: 12px; }
    .hamburger-btn span:nth-child(2) { top: 19px; }
    .hamburger-btn span:nth-child(3) { top: 26px; }


    /* =========================================
       1. ヒーローセクション (Photo Overlay)
       ========================================= */
    .hero-section-overlay {
        position: relative;
        width: 100%;
        background-image: url('hero.webp');
        background-size: cover;
        background-position: center right;
        background-repeat: no-repeat;
        height: 70vh;
        min-height: 500px;
        display: flex;
        align-items: center;
    }

    .hero-container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
        z-index: 2;
    }

    .hero-content {
        max-width: 600px;
        color: var(--text-on-photo);       
    }

    .hero-tag {
        display: inline-block;
        background-color: var(--accent-orange);
        color: #fff;
        font-weight: 700;
        padding: 6px 20px;
        border-radius: 4px;
        font-size: 1.5rem;
        margin-bottom: 20px;
        letter-spacing: 0.05em;
    }

    .hero-sub-title {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0 0 10px;
        display: block;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }

    .hero-main-title {
        font-size: 2.2rem;
        line-height: 1.25;
        font-weight: 900;
        margin: 0 0 25px;
        letter-spacing: -0.02em;
        text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    }

    .hero-desc {
        font-size: 1.4rem;
        line-height: 1.8;
        margin-bottom: 40px;
        font-weight: 500;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }

    .hero-desc strong {
        color: var(--accent-orange);
        font-size: 1.15em;
    }

    .hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-green);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 1.1rem;
        padding: 18px 40px;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0, 95, 107, 0.4);
        transition: all 0.3s ease;
    }
    .hero-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 95, 107, 0.6);
        background-color: #007a8a;
    }
    .hero-btn span { margin-left: 10px; font-size: 1.2em; }


    /* =========================================
       2. 選ばれる理由トップ3
       ========================================= */
    .reasons-section {
        background-color: var(--bg-light);
        padding: 80px 20px;
        text-align: center;
    }
    .section-title {
        color: var(--primary-green);
        font-size: 2.2rem;
        font-weight: 900;
        margin-bottom: 20px;
    }
    .section-title span {
        border-bottom: 4px solid var(--accent-orange);
        padding-bottom: 5px;
    }
    .section-desc {
        max-width: 800px;
        margin: 0 auto 60px;
        line-height: 1.8;
        font-size: 1rem;
        color: #555;
    }
    .reasons-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto;
    }
    .reason-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* ▼▼▼ 修正：元のwrapperスタイルを維持 ▼▼▼ */
    .reason-img-wrapper {
        width: 220px;
        height: 220px;
        border-radius: 50%;
        overflow: hidden;
        border: 5px solid #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        margin-bottom: -25px;
        z-index: 1;
        position: relative;
        transition: transform 0.3s ease; /* ホバー時の動き */
    }
    /* ▼▼▼ 追加：リンクタグが画像をピッタリ包むようにする ▼▼▼ */
    .reason-link-inner {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .reason-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    /* カード全体のホバーで画像を拡大 */
    .reason-card:hover .reason-img { transform: scale(1.1); }

    .reason-title-box {
        background-color: #002e5d;
        color: #fff;
        padding: 15px 20px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 1.1rem;
        position: relative;
        z-index: 2;
        width: 90%;
        box-shadow: 0 5px 15px rgba(0,46,93,0.3);
        margin-bottom: 20px;
    }
    .reason-title-box::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #002e5d;
    }
    .reason-text {
        font-size: 0.95rem;
        line-height: 1.7;
        text-align: left;
        padding: 0 10px;
        color: #444;
    }


    /* =========================================
       3. 選ばれる理由リスト
       ========================================= */
    .feature-list-section {
        padding: 60px 20px;
        max-width: 1000px;
        margin: 0 auto;
        background-color: #fff;
    }
    .feature-header { text-align: center; margin-bottom: 50px; }
    .feature-header h3 {
        font-size: 1.5rem;
        color: var(--primary-green);
        margin: 0;
    }
    .feature-list { display: flex; flex-direction: column; gap: 30px; }
    .feature-item {
        background-color: #fdfdfd;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 30px 30px 30px 100px;
        position: relative;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
        overflow: hidden;
    }
    .feature-item:hover {
        transform: translateY(-3px);
        border-color: var(--primary-green);
    }
    .feature-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, transparent 70%, var(--primary-green) 100%);
        opacity: 0.5;
    }
    .feature-num {
        position: absolute;
        top: 25px;
        left: 25px;
        width: 55px;
        height: 55px;
        background-color: var(--primary-green);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Roboto', sans-serif;
        font-size: 1.4rem;
        font-weight: 700;
        z-index: 2;
    }
    .feature-num::before {
        content: '✦';
        position: absolute;
        top: -8px;
        right: -8px;
        color: var(--accent-orange);
        font-size: 1.2rem;
    }
    .feature-content { position: relative; z-index: 2; }
    .feature-title {
        color: var(--primary-green);
        font-size: 1.3rem;
        font-weight: 700;
        margin: 0 0 12px;
    }
    .feature-title span {
        background: linear-gradient(transparent 70%, #ffe0b2 70%);
        padding-bottom: 2px;
    }
    .feature-desc {
        font-size: 0.95rem;
        line-height: 1.7;
        color: #555;
        margin: 0;
        text-align: justify;
    }

    /* =========================================
       生徒様の声セクション用 CSS
       ========================================= */
    .sv-section {
        padding: 80px 20px;
        background-color: var(--sv-bg-color);
        color: var(--sv-text-color);
        line-height: 1.6;
    }
    .sv-container {
        max-width: 1100px;
        margin: 0 auto;
    }
    .sv-section-title {
        text-align: center;
        color: var(--sv-heading-color);
        margin-bottom: 50px;
        font-size: 2em;
        font-weight: 900;
        position: relative;
        padding-bottom: 15px;
    }
    .sv-section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 3px;
        background-color: var(--sv-accent-color);
    }
    .title-deco {
        color: var(--sv-accent-color);
        margin: 0 0.2em;
    }
    .sv-subsection-title {
        text-align: center;
        color: var(--sv-heading-color);
        margin-bottom: 30px;
        font-size: 1.6em;
        font-weight: 700;
    }
    .sv-achievements {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 25px;
        margin-bottom: 70px;
    }
    .sv-achievement-card {
        background-color: var(--sv-card-bg);
        padding: 30px 25px;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        width: calc(33.333% - 25px);
        min-width: 280px;
        box-sizing: border-box;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: 3px solid var(--sv-primary-color);
    }
    .sv-achievement-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 95, 107, 0.15);
    }
    .sv-card-img {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 20px;
        border: 4px solid var(--sv-accent-bg);
    }
    .sv-badge {
        display: inline-block;
        font-size: 0.9em;
        color: #fff;
        background-color: var(--sv-primary-color);
        padding: 5px 15px;
        border-radius: 20px;
        margin-bottom: 10px;
        font-weight: 700;
    }
    .badge-orange {
        background-color: var(--sv-accent-color);
    }
    .sv-card-title {
        color: var(--sv-heading-color);
        margin: 5px 0 10px;
        font-size: 1.4em;
        font-weight: 900;
    }
    .sv-name {
        font-weight: 700;
        margin-bottom: 10px;
    }
    .sv-desc {
        font-size: 0.9em;
        color: #666;
    }
    .sv-journey {
        margin-bottom: 70px;
        padding: 40px;
        background-color: var(--sv-accent-bg);
        border-radius: 15px;
    }
    .sv-journey-list {
        max-width: 800px;
        margin: 0 auto;
    }
    .sv-journey-item {
        background-color: var(--sv-card-bg);
        border-left: 6px solid var(--sv-accent-color);
        padding: 20px 25px;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .sv-journey-heading {
        font-weight: 700;
        color: var(--sv-heading-color);
        font-size: 1.1em;
        margin-bottom: 5px;
    }
    .sv-journey-name {
        font-weight: 700;
        margin-bottom: 8px;
        font-size: 0.95em;
    }
    .sv-journey-desc {
        font-size: 0.95em;
        color: #555;
    }
    .sv-testimonials {
        margin-bottom: 60px;
    }
    .sv-note {
        text-align: center;
        color: #888;
        font-size: 0.85em;
        margin-top: -15px;
        margin-bottom: 40px;
    }
    .sv-testimonial-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    .sv-testimonial-card {
        background-color: var(--sv-card-bg);
        padding: 35px;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        width: calc(50% - 30px);
        min-width: 300px;
        box-sizing: border-box;
        position: relative;
        border: 1px solid #eee;
    }
    .sv-testimonial-card::before {
        content: '“';
        position: absolute;
        top: -15px;
        left: 20px;
        font-size: 6em;
        color: var(--sv-accent-bg);
        font-family: serif;
        opacity: 0.7;
        z-index: 0;
    }
    .sv-quote {
        font-style: italic;
        color: #555;
        line-height: 1.8;
        position: relative;
        z-index: 1;
    }
    .sv-quoter {
        text-align: right;
        margin-top: 25px;
        font-weight: 700;
        color: var(--sv-primary-color);
    }
    .sv-footer {
        text-align: center;
        font-size: 0.9em;
        color: #777;
        line-height: 1.8;
    }

       /* =========================================
       体験レッスンCTAセクション用CSS
       ========================================= */
    .cta-section {
        padding: 80px 20px;
        background-color: #fff5f0; /* ほんのりオレンジがかった背景色 */
        text-align: center;
    }
    .cta-container {
        max-width: 800px;
    }
    .cta-title {
        color: var(--primary-green);
        font-size: 2.2rem;
        font-weight: 900;
        line-height: 1.3;
        margin-bottom: 25px;
    }
    .cta-title-deco {
        display: block;
        font-size: 1rem;
        color: var(--accent-orange);
        margin-bottom: 10px;
        font-family: 'Roboto', sans-serif;
        letter-spacing: 0.1em;
    }
    .cta-desc {
        font-size: 1.05rem;
        line-height: 1.8;
        color: #555;
        margin-bottom: 40px;
    }
    /* 大きなオレンジ色のボタン */
    .cta-btn-large {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #FF9A7B, var(--accent-orange-dark));
        color: #fff;
        text-decoration: none;
        font-weight: 900;
        font-size: 1.4rem;
        padding: 20px 60px;
        border-radius: 50px;
        box-shadow: 0 10px 25px rgba(255, 112, 67, 0.4);
        transition: all 0.3s ease;
    }
    /* 矢印アイコン */
    .cta-btn-large span {
        margin-left: 15px;
        font-size: 1.2em;
        transition: transform 0.3s ease;
    }
    /* ホバー時の動き */
    .cta-btn-large:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(255, 112, 67, 0.6);
        background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-dark));
    }
    .cta-btn-large:hover span {
        transform: translateX(5px);
    }
    .cta-note {
        font-size: 0.9rem;
        color: #888;
        margin-top: 25px;
    }


    /* =========================================
       4. 料金比較セクション
       ========================================= */
    .price-comparison-section {
        background-color: var(--primary-green);
        padding: 80px 20px;
        display: flex;
        justify-content: center;
    }
    .price-card {
        background-color: #fff;
        max-width: 1000px;
        width: 100%;
        border-radius: 20px;
        padding: 50px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        box-sizing: border-box;
    }
    .price-header { text-align: center; margin-bottom: 40px; }
    .price-label {
        display: inline-block;
        background-color: var(--accent-orange);
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 5px 15px;
        border-radius: 20px;
        margin-bottom: 15px;
    }
    .price-title {
        font-size: 2rem;
        color: var(--text-dark);
        margin: 0 0 10px;
        font-weight: 900;
    }
    .price-title::before, .price-title::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        border-top: 4px solid var(--primary-green);
        vertical-align: middle;
        margin: 0 15px;
    }
    .price-title::before { border-left: 4px solid var(--primary-green); }
    .price-title::after { border-right: 4px solid var(--primary-green); }
    
    .price-desc { color: #666; font-size: 1rem; }

    .table-scroll-wrapper {
        overflow-x: auto;
        margin-bottom: 20px;
        border-radius: 8px;
        border: 1px solid #ddd;
    }
    .comparison-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 800px;
    }
    .comparison-table th, .comparison-table td {
        padding: 15px 10px;
        text-align: center;
        border-bottom: 1px solid #eee;
        font-size: 0.95rem;
        vertical-align: middle;
    }
    .comparison-table thead th {
        background-color: #333;
        color: #fff;
        font-weight: 700;
        white-space: nowrap;
    }
    .comparison-table tbody tr:hover { background-color: #f9f9f9; }

    .highlight-row {
        background-color: #E8F5E9 !important;
        border: 2px solid var(--primary-green);
        font-weight: 700;
    }
    .highlight-row td { color: var(--primary-green); }
    .highlight-row td:first-child { font-size: 1.2rem; color: var(--text-dark); }

    .price-note {
        background-color: #f4f8fb;
        border-left: 5px solid var(--primary-green);
        padding: 20px;
        margin-top: 30px;
        border-radius: 0 8px 8px 0;
        font-size: 0.9rem;
        color: #555;
        line-height: 1.8;
        text-align: left;
    }
    .price-note strong { color: var(--accent-orange); }
    .price-note ul { margin: 10px 0 0; padding-left: 20px; }

    /* =========================================
       UPボタンの設定
       ========================================= */
    .up-btn-wrapper {
        text-align: center;
        padding: 40px 0;
        width: 100%;
    }
    .btn-up {
        display: inline-block;
        background-color: #555555;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        padding: 15px 40px;
        border-radius: 50px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .btn-up:hover {
        background-color: #333333;
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }

    /* =========================================
       レスポンシブ対応 (Mobile)
       ========================================= */
    @media (max-width: 1024px) {
        /* ヘッダー */
        .site-header { height: 60px; }
        body { padding-top: 60px; }
        .header-logo img { height: 40px; }
        
        .hamburger-btn { display: block; }

        .hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .hamburger-btn.active span:nth-child(2) { opacity: 0; }
        .hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        .header-nav-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.98);
            flex-direction: column;
            justify-content: center;
            padding-top: 60px;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            z-index: 999;
        }
        .header-nav-wrapper.active { transform: translateX(0); }

        .header-nav {
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: 20px;
            margin-bottom: 30px;
        }
        .header-nav a {
            background: none;
            box-shadow: none;
            font-size: 1.2rem;
            padding: 5px;
        }
        .header-cta {
            flex-direction: column;
            width: 80%;
            gap: 15px;
        }
        .btn-contact, .btn-trial {
            width: 100%;
            text-align: center;
            padding: 15px;
        }

        /* ヒーローセクション（スマホ用） */
        .hero-section-overlay {
            height: auto;
            min-height: 500px;
            background-position: center;
            align-items: flex-end;
            padding-bottom: 40px;
        }
        .hero-section-overlay::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%);
            z-index: 1;
        }
        .hero-content {
           text-align: left; /
        }
        .hero-main-title { font-size: 1.6rem; }
        .hero-sub-title { font-size: 1rem; }
        .hero-desc {
            font-size: 1.15rem; /* スマホでの文字サイズ */
           
        }
        .hero-btn {
            width: 100%;
            box-sizing: border-box;
        }

        /* 理由トップ3 */
        .reasons-grid { grid-template-columns: 1fr; gap: 60px; }
        .section-title { font-size: 1.6rem; }
        
        /* 理由リスト */
        .feature-item {
            padding: 80px 20px 25px;
            text-align: center;
        }
        .feature-num {
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
        }
        .feature-desc { text-align: left; }
        .feature-item::after { background: var(--primary-green); }

        /* 生徒様の声（スマホ） */
        .sv-section { padding: 50px 15px; }
        .sv-section-title { font-size: 1.6em; }
        .sv-achievements, .sv-testimonial-cards {
            flex-direction: column;
            align-items: center;
        }
        .sv-achievement-card, .sv-testimonial-card {
            width: 100%;
            max-width: 500px;
        }
        .sv-journey { padding: 30px 15px; }

       
        /* 体験レッスンCTA（スマホ） */
        .cta-section { padding: 60px 15px; }
        /* ▼▼▼ 修正：スマホ版の文字サイズを小さくしました ▼▼▼ */
        .cta-title { font-size: 1.5rem; }
        .cta-btn-large {
            width: 100%;
            padding: 18px 20px;
            font-size: 1.2rem;
            box-sizing: border-box;
        }
        .pc-only { display: none; }

        /* 料金表 */
        .price-comparison-section { padding: 40px 15px; }
        .price-card { padding: 30px 15px; }
        .price-title { font-size: 1.4rem; }
        .price-title::before, .price-title::after { display: none; }
        .comparison-table th, .comparison-table td { font-size: 0.85rem; padding: 10px 5px; }
    }
    /* ▼▼▼ タイトルリンク用の追加CSS（修正版：文字を白にする） ▼▼▼ */
    .reason-title-link {
        text-decoration: none; /* 下線を消す */
        color: #fff !important; /* ←【重要】文字色を白に強制します */
        display: block; /* ボックス全体をクリックできるようにする */
        width: 100%;
        height: 100%;
        /* ↓ホバー時（マウスを乗せた時）に少し黄色っぽくしてクリックできることを伝える */
        transition: color 0.3s, opacity 0.3s;
    }
    .reason-title-link:hover {
        color: var(--accent-orange) !important; /* ホバー時にオレンジ色にする（お好みで） */
        /* opacity: 0.8; もし色を変えたくない場合は、こちらの透明度変更だけでもOKです */
    }
    /* ▼▼▼ 英語学習ロードマップセクション用CSS（ここから） ▼▼▼ */
    .roadmap-section {
        padding: 80px 20px;
        background-color: #f4f8fb; /* 薄い青系の背景色 */
        text-align: center;
    }

    .roadmap-img-wrapper {
        max-width: 1000px;
        margin: 40px auto 60px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border-radius: 15px;
        overflow: hidden;
        background-color: #fff;
    }
    .roadmap-img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* インタラクティブコンテンツエリア */
    .interactive-roadmap-content {
        max-width: 1000px;
        margin: 0 auto;
        background-color: #fff;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }
    .irc-title {
        color: var(--primary-green);
        font-size: 1.4rem;
        margin-bottom: 30px;
        position: relative;
        display: inline-block;
    }
    .irc-title::after {
        content: '▼';
        font-size: 0.8em;
        margin-left: 10px;
        color: var(--accent-orange);
        animation: bounce 1.5s infinite;
    }
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(5px); }
    }

    .irc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 25px;
        margin-bottom: 50px;
        text-align: left;
    }

    /* 各レベルのボックス（インタラクティブ要素） */
    .irc-item {
        background-color: #fff;
        border: 2px solid #eee;
        border-radius: 12px;
        padding: 25px;
        transition: all 0.3s ease;
        cursor: default;
    }
    /* ホバー時の動き */
    .irc-item:hover {
        transform: translateY(-5px);
        border-color: var(--accent-orange);
        box-shadow: 0 10px 25px rgba(255, 138, 101, 0.2);
        background-color: #fffbf8;
    }

    .irc-badge {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 700;
        color: #fff;
        padding: 4px 12px;
        border-radius: 20px;
        margin-bottom: 15px;
    }
    .badge-a1 { background-color: #FFCA28; /* 黄色 */ }
    .badge-a2 { background-color: #42A5F5; /* 青 */ }
    .badge-b1 { background-color: #AB47BC; /* 紫 */ }
    .badge-b2 { background-color: #005F6B; /* メインの緑 */ }

    .irc-heading {
        color: var(--text-dark);
        font-size: 1.15rem;
        font-weight: 700;
        margin: 0 0 10px;
    }
    .irc-text {
        font-size: 0.95rem;
        color: #666;
        line-height: 1.7;
        margin: 0;
    }

    /* 誘導アクションエリア */
    .irc-cta {
        border-top: 2px dashed #eee;
        padding-top: 40px;
        text-align: center;
    }
    .irc-cta p {
        font-size: 1.1rem;
        color: var(--primary-green);
        font-weight: 700;
        margin-bottom: 25px;
    }

    /* スマホ表示用の調整 */
    @media (max-width: 768px) {
        .roadmap-section { padding: 60px 15px; }
        .interactive-roadmap-content { padding: 25px 15px; }
        .irc-grid { grid-template-columns: 1fr; gap: 20px; }
        .irc-title { font-size: 1.2rem; }
        .irc-title::after { display: none; } /* スマホでは矢印アニメーションを非表示に */
    }
    /* ▲▲▲ 英語学習ロードマップセクション用CSS（ここまで） ▲▲▲ */
/* ▼▼▼ レベルチェック表セクション用CSS（ここから） ▼▼▼ */
    .level-check-section {
        padding: 80px 20px;
        background-color: #fff;
    }
    .level-table-wrapper {
        margin-top: 50px;
        margin-bottom: 60px;
    }
    .level-sub-title {
        font-size: 1.6rem;
        color: var(--primary-green);
        margin-bottom: 15px;
        border-left: 6px solid var(--accent-orange);
        padding-left: 15px;
    }
    .level-note {
        font-size: 0.95rem;
        color: #666;
        margin-bottom: 25px;
        line-height: 1.8;
    }
    
    /* 表のスクロール用コンテナ（スマホ対策） */
    .table-scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #eee;
        border-radius: 8px;
    }
    
    /* レベルチェック表の共通スタイル */
    .level-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
        line-height: 1.7;
        min-width: 600px; /* スマホで横スクロールさせるための最小幅 */
    }
    .level-table th, .level-table td {
        padding: 15px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
        text-align: left;
    }
    .level-table thead th {
        background-color: var(--primary-green);
        color: #fff;
        font-weight: 700;
        white-space: nowrap;
    }
    /* 偶数行の背景色を変えて見やすく */
    .level-table tbody tr:nth-child(even) {
        background-color: #f9fbfb;
    }
    /* ホバー時の強調 */
    .level-table tbody tr:hover {
        background-color: #f0f7f8;
    }

    /* レベル表記のカラム */
    .level-label {
        font-weight: 900;
        color: var(--primary-green);
        text-align: center !important;
        font-family: 'Roboto', sans-serif;
        font-size: 1.1rem;
    }
    /* Greenレベルの特別な色 */
    .label-green {
        color: #4CAF50; /* 明るい緑 */
    }

    /* 中学生以上向け表の調整 */
    .general-table th small {
        display: block;
        font-size: 0.8em;
        font-weight: normal;
        opacity: 0.9;
    }
    .general-table td strong {
        color: var(--accent-orange-dark);
        background: linear-gradient(transparent 70%, #ffe0b2 70%); /* オレンジの蛍光ペン風 */
    }

    /* スマホ表示用の調整 */
    @media (max-width: 768px) {
        .level-check-section { padding: 60px 15px; }
        .level-sub-title { font-size: 1.4rem; }
        .level-table th, .level-table td {
            padding: 12px 10px;
            font-size: 0.9rem;
        }
        .level-label { font-size: 1rem; }
    }
    /* ▲▲▲ レベルチェック表セクション用CSS（ここまで） ▲▲▲ */
    /* ▼▼▼ アコーディオン用の追加CSS（ここから） ▼▼▼ */
    /* トリガーボタンのデザイン */
    .level-accordion-trigger {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 600px;
        margin: 30px auto;
        padding: 15px 30px;
        background-color: var(--primary-green);
        color: #fff;
        border: none;
        border-radius: 50px;
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.3s ease;
        box-shadow: 0 4px 10px rgba(0, 95, 107, 0.3);
    }
    .level-accordion-trigger:hover {
        background-color: #007a8a; /* 少し明るい緑 */
    }
    /* アイコンの回転アニメーション */
    .trigger-icon {
        display: inline-block;
        margin-left: 15px;
        transition: transform 0.3s ease;
    }
    .level-accordion-trigger.is-open .trigger-icon {
        transform: rotate(180deg); /* 開いた時に反転 */
    }

    /* 開閉するコンテンツエリア（初期状態は閉じる） */
    .level-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out; /* 滑らかな開閉 */
        opacity: 0; /* フェード効果用 */
    }
    /* 開いた状態 */
    .level-accordion-content.is-open {
        opacity: 1;
    }
    
    /* コンテンツ内部の余白調整 */
    .level-accordion-inner {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    /* ▲▲▲ アコーディオン用の追加CSS（ここまで） ▲▲▲ */
    /* ▼▼▼ さらに選ばれる4つのポイント用CSS（参考デザイン再現版） ▼▼▼ */
.feature-list-section {
    padding: 60px 20px;
    background-color: #f9fbfb; /* 背景色を少し薄いグレー/青に */
}

.feature-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px; /* カード間の隙間 */
    max-width: 1000px;
    margin: 0 auto;
}

/* カード全体のスタイル */
.feature-card {
    display: flex;
    align-items: center; /* 上下中央揃え */
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* ほんのり影をつける */
    border: 1px solid #eef2f6;
    transition: transform 0.3s ease;
}

/* 画像エリア */
.feature-img-area {
    flex: 0 0 140px; /* 画像の幅を固定 */
    margin-right: 30px;
    text-align: center;
}

.feature-img {
    width: 100%;
    height: auto;
    max-width: 120px; /* 画像が大きくなりすぎないように制限 */
    display: block;
    margin: 0 auto;
}

/* テキストエリア */
.feature-text-area {
    flex: 1; /* 残りの幅を全部使う */
}

/* ヘッダー部分（バッジ＋タイトル） */
.feature-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* スマホで折り返せるように */
}

/* 番号バッジ */
.feature-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #005F6B; /* メインカラー（濃い緑） */
    color: #fff;
    font-weight: 700;
    font-family: 'Roboto', sans-serif; /* 英数字用フォント */
    border-radius: 50%; /* 丸くする */
    margin-right: 12px;
    font-size: 0.9rem;
    flex-shrink: 0; /* 縮まないようにする */
}

/* 見出しスタイル */
.feature-heading {
    color: #005F6B; /* メインカラー */
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

/* 英語のサブタイトル */
.en-sub {
    font-size: 0.85em;
    color: #005F6B;
    opacity: 0.8;
    font-weight: 500;
    margin-left: 5px;
}

/* 説明文 */
.feature-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* --- スマホ表示用の調整 --- */
@media (max-width: 768px) {
    .feature-card {
        flex-direction: column; /* 縦並びにする */
        text-align: center; /* 中央揃え */
        padding: 25px 20px;
    }

    .feature-img-area {
        margin-right: 0;
        margin-bottom: 20px;
        flex: auto;
    }
    
    .feature-img {
        max-width: 100px; /* スマホでは少し小さく */
    }

    .feature-header {
        justify-content: center; /* 中央寄せ */
    }

    .feature-heading {
        font-size: 1.1rem;
        text-align: left; /* タイトルは見やすいように左寄せ気味でも良いが、ヘッダー全体が中央寄せなので合わせる */
    }
    
    .feature-desc {
        text-align: left; /* 説明文は読みやすく左寄せ */
        font-size: 0.9rem;
    }
}
/* ▲▲▲ さらに選ばれる4つのポイント用CSS（ここまで） ▲▲▲ */
/* ▼▼▼ 生徒様の声と実績セクション用CSS（完全版） ▼▼▼ */

/* --- ベーススタイル（PC・共通） --- */
.sv-section {
    padding: 80px 20px;
    background-color: #f4f8f9; /* 全体の背景色（薄いグレー/水色系） */
    font-family: 'Noto Sans JP', sans-serif;
}

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

/* セクションタイトル */
.sv-section-title {
    text-align: center;
    font-size: 2rem;
    color: #005F6B; /* メインカラー */
    margin-bottom: 50px;
    font-weight: 700;
    line-height: 1.4;
}

.title-deco {
    color: var(--accent-orange, #FF8A65); /* アクセントカラー（定義がなければオレンジ） */
    margin: 0 10px;
}

/* サブセクションタイトル共通 */
.sv-subsection-title {
    font-size: 1.5rem;
    color: #005F6B;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 5px solid var(--accent-orange, #FF8A65);
    font-weight: 700;
}

/* --- 1. 主要な合格実績 (TOP 3カード) --- */
.sv-achievements {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 70px;
}

.sv-achievement-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    flex: 1; /* 均等割付 */
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
}

.sv-achievement-card:hover {
    transform: translateY(-5px);
}

.sv-card-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

.sv-badge {
    display: inline-block;
    padding: 5px 15px;
    background-color: #005F6B;
    color: #fff;
    font-size: 0.8rem;
    border-radius: 20px;
    margin-bottom: 10px;
}

.sv-badge.badge-orange {
    background-color: var(--accent-orange, #FF8A65);
}

.sv-card-title {
    font-size: 1.25rem;
    color: #005F6B;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.sv-name {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.sv-desc {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
    text-align: left;
}

/* --- 2. 成功への道のり (リスト) --- */
.sv-journey {
    margin-bottom: 70px;
}

.sv-journey-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sv-journey-item {
    background: #fff;
    padding: 20px 25px;
    border-radius: 10px;
    border-left: 5px solid #005F6B;
    flex: 1 1 calc(33.333% - 20px); /* 3列表示 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.sv-journey-heading {
    font-weight: 700;
    color: #005F6B;
    margin-bottom: 5px;
}

.sv-journey-name {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.sv-journey-desc {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- 3. 原文メッセージ (PCスタイル) --- */
.sv-testimonials {
    margin-bottom: 50px;
}

.sv-note {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 20px;
}

/* PCでは2列グリッド表示 */
.sv-testimonial-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sv-testimonial-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    position: relative;
}

/* 引用符の装飾 */
.sv-testimonial-card::before {
    content: '“';
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 4rem;
    color: #f0f0f0;
    font-family: serif;
    z-index: 0;
}

.sv-quote {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.sv-quoter {
    text-align: right;
    font-size: 0.9rem;
    color: #005F6B;
    font-weight: 700;
}

/* --- フッター --- */
.sv-footer {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
}


/* =========================================
   ▼▼▼ スマホ用スタイル (幅768px以下) ▼▼▼
   ========================================= */
@media (max-width: 768px) {
    .sv-section {
        padding: 50px 15px;
    }

    .sv-section-title {
        font-size: 1.5rem;
        margin-bottom: 35px;
    }

    .sv-subsection-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    /* 1. 主要実績 (縦並び) */
    .sv-achievements {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    /* 2. 成功への道のり (縦並び) */
    .sv-journey-list {
        flex-direction: column;
    }

    .sv-journey-item {
        flex: 1 1 100%;
    }

    /* 3. 原文メッセージ (★重要：横スクロール化★) */
    .sv-testimonial-cards {
        display: flex; /* グリッドからフレックスに変更 */
        grid-template-columns: none; /* グリッド解除 */
        overflow-x: auto; /* 横スクロール有効 */
        -webkit-overflow-scrolling: touch; /* 慣性スクロール */
        scroll-snap-type: x mandatory; /* スクロールスナップ */
        gap: 15px;
        padding-bottom: 20px; /* スクロールバー領域 */
        margin-right: -15px; /* 画面端まで広げる調整 */
        padding-right: 15px;
    }

    .sv-testimonial-card {
        flex: 0 0 85%; /* 幅を85%に固定して縮小を防ぐ */
        scroll-snap-align: center; /* 中央にスナップ */
        padding: 20px;
    }

    .sv-quote {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}
/* ▲▲▲ 生徒様の声と実績セクション用CSS（ここまで） ▲▲▲ */
/* ▼▼▼ PC表示時の中央寄せ修正用CSS ▼▼▼ */

/* --- 1. 主要実績 (TOP 3カード) の中央寄せ --- */
.sv-achievements {
    display: flex;
    justify-content: center; /* カードを中央寄せ */
    flex-wrap: wrap; /* 必要に応じて折り返し（念のため） */
    gap: 25px;
    margin-bottom: 70px;
    max-width: 100%; /* コンテナの幅いっぱいに広げる */
}

/* カードの幅を調整 */
.sv-achievement-card {
    flex: 0 1 300px; /* 幅を300px程度に制限し、それ以上は広げない */
}


/* --- 2. 成功への道のり (リスト) の中央寄せ --- */
.sv-journey-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* リストアイテムを中央寄せ */
}

.sv-journey-item {
    flex: 0 1 calc(33.333% - 20px); /* 幅を3分の1に調整 */
    max-width: 300px; /* 最大幅を300px程度に */
}


/* --- 3. 原文メッセージ (グリッド) の中央寄せ --- */
.sv-testimonial-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列表示 */
    gap: 20px;
    justify-content: center; /* グリッド自体を中央寄せ */
    justify-items: center; /* グリッドアイテムを中央寄せ */
}

.sv-testimonial-card {
    max-width: 450px; /* カードの最大幅を調整 */
}
/* ▼▼▼ 成功への道のり（リスト）を縦並び・中央寄せに戻す ▼▼▼ */
.sv-journey-list {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: center; /* 左右中央揃え */
    gap: 20px;
}

.sv-journey-item {
    width: 100%; /* 親要素の幅いっぱい */
    max-width: 600px; /* ただし最大幅を600pxに制限（読みやすくするため） */
    flex: auto; /* 幅の自動調整を解除 */
}
/* ▼▼▼ 原文メッセージ（グリッド）PC表示用修正CSS ▼▼▼ */

/* グリッドコンテナのスタイル調整 */
.sv-testimonial-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列表示 */
    gap: 30px; /* カード間の隙間を適切に設定 */
    justify-content: center; /* グリッド全体を中央寄せ */
    max-width: 900px; /* グリッド全体の最大幅を制限して広がりすぎを防ぐ */
    margin: 0 auto; /* グリッド全体を中央に配置 */
}

/* 個別のカードのスタイル調整 */
.sv-testimonial-card {
    width: 100%; /* 親要素のグリッド幅いっぱい */
    max-width: none; /* 個別の最大幅制限は解除し、グリッドの幅に任せる */
    box-sizing: border-box;
}
/* =========================================
   UI/UX強化版 料金セクション CSS
   ========================================= */
:root {
    /* 共通カラー定義（もし既存CSSで定義済みなら削除可） */
    --pg-green-dark: #005F6B;  /* 濃い緑 */
    --pg-green-lime: #8BC34A;  /* 黄緑 */
    --pg-orange: #FF8A65;      /* オレンジ */
    --pg-gray-dark: #333333;   /* 濃いグレー */
    --pg-bg-light: #f4f8f9;    /* 背景色 */
}

.price-img-section {
    padding: 80px 20px;
    background-color: var(--pg-bg-light);
    /* font-family は全体のbody設定などを継承するため省略 */
    color: var(--pg-gray-dark);
    overflow: hidden;
}

.pg-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* タイトル */
.pg-section-title {
    text-align: center;
    color: var(--pg-green-dark);
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 40px;
    position: relative;
}
.pg-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--pg-orange);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* --- アニメーション定義 --- */
/* パルス（脈動）アニメーション */
@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(255, 138, 101, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(255, 138, 101, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 138, 101, 0); }
}
.pg-pulse-effect {
    animation: pulse-orange 2s infinite;
}

/* スクロール登場アニメーション（初期状態） */
.pg-scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* スクロール登場アニメーション（表示状態）※JSで付与 */
.pg-scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- 1. メインビジュアルエリア --- */
.pg-hero-area {
    background: linear-gradient(135deg, #ffffff 0%, #FFF3E0 100%);
    border-radius: 20px;
    padding: 40px 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 2px solid var(--pg-orange);
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
}

.pg-hero-content { flex: 1; z-index: 2; }
.pg-catch {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--pg-green-dark);
    margin-bottom: 20px;
    line-height: 1.4;
}
.pg-catch span {
    background: linear-gradient(transparent 70%, #FFCC80 70%);
    padding-bottom: 2px;
}

.pg-price-highlight {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: inline-block;
    border-left: 5px solid var(--pg-green-lime);
}
.pg-ph-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pg-gray-dark);
    margin-bottom: 5px;
}
.pg-ph-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--pg-orange);
    line-height: 1;
}
.pg-ph-price small { font-size: 0.9rem; font-weight: normal; color: var(--pg-gray-dark); }
.pg-ph-desc {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
    line-height: 1.6;
}

.pg-hero-img-box {
    flex: 1;
    text-align: right;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}
.pg-hero-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
    transform: scale(1.1);
    transform-origin: bottom center;
}

/* --- 2. 料金カード一覧 --- */
.pg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    align-items: flex-start;
}
.pg-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    border-top: 5px solid var(--pg-green-dark);
}
/* カードのホバー効果は、登場アニメーションと競合しないように少し控えめに */
.pg-card.is-visible:hover { transform: translateY(-5px); }

.pg-card-head {
    background-color: var(--pg-bg-light);
    padding: 20px;
    text-align: center;
    border-bottom: 1px dashed #ddd;
}
.pg-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pg-green-dark);
    margin: 0 0 10px;
}
.pg-card-tag {
    display: inline-block;
    font-size: 0.8rem;
    background-color: var(--pg-green-lime);
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
}
.pg-card-body { padding: 25px; text-align: center; }
.pg-card-price {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--pg-orange);
    line-height: 1;
    margin-bottom: 5px;
}
.pg-card-unit { font-size: 0.9rem; color: #888; }
.pg-card-text {
    font-size: 0.9rem;
    margin-top: 20px;
    text-align: left;
    line-height: 1.7;
    color: var(--pg-gray-dark);
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* --- 3. その他費用リスト --- */
.pg-other-costs {
    background-color: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.pg-cost-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pg-green-dark);
    margin-bottom: 30px;
    text-align: center;
}
.pg-cost-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.pg-cost-item {
    display: flex;
    align-items: flex-start;
    background-color: var(--pg-bg-light);
    padding: 20px;
    border-radius: 10px;
}
.pg-cost-icon {
    background-color: #fff;
    color: var(--pg-green-dark);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    margin-right: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.pg-cost-content h4 {
    margin: 0 0 5px;
    color: var(--pg-green-dark);
    font-size: 1.1rem;
}
.pg-cost-price {
    color: var(--pg-orange);
    font-weight: 700;
    font-size: 1.1rem;
}
.pg-cost-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
    line-height: 1.5;
}

/* --- 4. 詳細リンクボタン --- */
.pg-btn-wrapper {
    text-align: center;
    margin-top: 50px;
}
.pg-btn-link {
    display: inline-block;
    background-color: var(--pg-orange);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 18px 50px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 138, 101, 0.4);
}
.pg-btn-link:hover {
    background-color: #e67a5a;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 138, 101, 0.5);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .price-img-section { padding: 60px 15px; }
    .pg-hero-area {
        flex-direction: column-reverse;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    .pg-hero-img-box { text-align: center; margin-bottom: 10px; justify-content: center; }
    .pg-hero-img { transform: scale(1); max-width: 80%; filter: none; }
    .pg-price-highlight { width: 100%; box-sizing: border-box; text-align: center; }
    .pg-catch { font-size: 1.5rem; }
    .pg-ph-desc { text-align: center; }
    
    .pg-card-grid { gap: 20px; }
    /* スマホではカードのホバー移動を無効化（タップでおかしくなるのを防ぐ） */
    .pg-card.is-visible:hover { transform: none; }
    
    .pg-cost-list { grid-template-columns: 1fr; gap: 15px; }
    .pg-cost-item { padding: 15px; }
    .pg-btn-link { width: 100%; box-sizing: border-box; padding: 15px 20px; }
}
/* --- 1. メインビジュアルエリア（画像使用） --- */
.pg-hero-area {
    background: linear-gradient(135deg, #ffffff 0%, #FFF3E0 100%); /* オレンジ系の淡いグラデーション */
    border-radius: 20px;
    padding: 40px 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 2px solid var(--pg-orange);
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
}

/* 左側：テキスト情報 */
.pg-hero-content {
    flex: 1;
    z-index: 2;
}
.pg-catch {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--pg-green-dark);
    margin-bottom: 20px;
    line-height: 1.4;
}
.pg-catch span {
    background: linear-gradient(transparent 70%, #FFCC80 70%); /* オレンジマーカー */
    padding-bottom: 2px;
}

.pg-price-highlight {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: inline-block;
    border-left: 5px solid var(--pg-green-lime);
}
.pg-ph-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pg-gray-dark);
    margin-bottom: 5px;
}
.pg-ph-price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--pg-orange);
    line-height: 1;
}
.pg-ph-price small { font-size: 0.9rem; font-weight: normal; color: var(--pg-gray-dark); }
.pg-ph-desc {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
    line-height: 1.6;
}

/* 右側：画像 */
.pg-hero-img-box {
    flex: 1;
    text-align: right;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}
.pg-hero-img {
    max-width: 100%;
    height: auto;
    /* 画像が少し浮き出るような演出 */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
    transform: scale(1.1); /* 少し大きく強調 */
    transform-origin: bottom center;
}

/* --- 2. 料金カード一覧 --- */
.pg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    align-items: flex-start; /* カードの高さを内容に合わせる */
}
.pg-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    border-top: 5px solid var(--pg-green-dark);
}
.pg-card:hover { transform: translateY(-5px); }

.pg-card-head {
    background-color: var(--pg-bg-light);
    padding: 20px;
    text-align: center;
    border-bottom: 1px dashed #ddd;
}
.pg-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pg-green-dark);
    margin: 0 0 10px;
}
.pg-card-tag {
    display: inline-block;
    font-size: 0.8rem;
    background-color: var(--pg-green-lime);
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
}
.pg-card-body {
    padding: 25px;
    text-align: center;
}
.pg-card-price {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--pg-orange);
    line-height: 1;
    margin-bottom: 5px;
}
.pg-card-unit { font-size: 0.9rem; color: #888; }
.pg-card-text {
    font-size: 0.9rem;
    margin-top: 20px;
    text-align: left;
    line-height: 1.7;
    color: var(--pg-gray-dark);
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* --- 3. その他費用リスト --- */
.pg-other-costs {
    background-color: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.pg-cost-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pg-green-dark);
    margin-bottom: 30px;
    text-align: center;
}
.pg-cost-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.pg-cost-item {
    display: flex;
    align-items: flex-start;
    background-color: var(--pg-bg-light);
    padding: 20px;
    border-radius: 10px;
}
.pg-cost-icon {
    background-color: #fff;
    color: var(--pg-green-dark);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    margin-right: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.pg-cost-content h4 {
    margin: 0 0 5px;
    color: var(--pg-green-dark);
    font-size: 1.1rem;
}
.pg-cost-price {
    color: var(--pg-orange);
    font-weight: 700;
    font-size: 1.1rem;
}
.pg-cost-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
    line-height: 1.5;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .price-img-section { padding: 60px 15px; }
    .pg-hero-area {
        flex-direction: column-reverse; /* 画像を上に、テキストを下に */
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    .pg-hero-img-box { text-align: center; margin-bottom: 10px; justify-content: center; }
    .pg-hero-img { transform: scale(1); max-width: 80%; filter: none; }
    .pg-price-highlight { width: 100%; box-sizing: border-box; text-align: center; }
    .pg-catch { font-size: 1.5rem; }
    .pg-ph-desc { text-align: center; }
    
    .pg-card-grid { gap: 20px; }
    .pg-card { transform: none !important; } /* スマホでは拡大を無効化 */
    
    .pg-cost-list { grid-template-columns: 1fr; gap: 15px; }
    .pg-cost-item { padding: 15px; }
}
/* =========================================
   講師紹介セクション用 CSS
   ========================================= */
.instructors-section {
    padding: 80px 20px;
    background-color: #fff; /* 清潔感のある白背景 */
    color: var(--pg-gray-dark);
}

.inst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* PCでは2列 */
    gap: 60px 40px; /* 上下60px, 左右40px */
    margin-top: 60px;
}

/* カード本体 */
.inst-card {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    position: relative;
    padding: 0;
    transition: transform 0.3s ease;
    border-top: 5px solid var(--pg-green-dark); /* 上部にアクセントカラー */
}
.inst-card:hover {
    transform: translateY(-5px); /* ホバーで少し浮く */
    box-shadow: 0 15px 40px rgba(0, 95, 107, 0.15);
}

/* 写真部分（丸く切り抜いてはみ出させるデザイン） */
.inst-photo-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid #fff; /* 白枠 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    position: absolute;
    top: -40px; /* カードの上に突き出す */
    left: 30px; /* 左側に配置 */
    background-color: #eee;
    z-index: 2;
}
.inst-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.inst-card:hover .inst-photo {
    transform: scale(1.1); /* ホバーで写真が少し拡大 */
}

/* カードの中身 */
.inst-body {
    padding: 30px 30px 30px;
    padding-top: 50px; /* 写真の食い込み分を避ける */
    text-align: left;
}

/* ヘッダーエリア（名前・役割） */
.inst-header {
    margin-bottom: 15px;
    padding-left: 130px; /* 写真の横幅分を空ける */
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.inst-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--pg-green-dark);
    margin: 0;
    line-height: 1.2;
}
.inst-name-en {
    font-size: 1rem;
    font-weight: 700;
    margin-left: 10px;
    color: #666;
}
.inst-role {
    font-size: 0.9rem;
    color: var(--pg-orange);
    font-weight: 700;
    margin: 5px 0 0;
}

/* スキルタグ（インフォグラフィック風） */
.inst-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.inst-tag {
    font-size: 0.8rem;
    background-color: #E0F2F1; /* 薄い緑 */
    color: var(--pg-green-dark);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    border: 1px solid var(--pg-green-dark);
}

/* 紹介文 */
.inst-bio {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 25px;
}

/* メッセージボックス */
.inst-message-box {
    background-color: #FFF3E0; /* 薄いオレンジ */
    border-radius: 10px;
    padding: 15px 20px;
    position: relative;
}
.msg-icon {
    position: absolute;
    top: -12px;
    left: 15px;
    background-color: var(--pg-orange);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
}
.inst-message {
    font-size: 0.95rem;
    font-weight: 700;
    color: #555;
    margin: 0;
    font-style: italic; /* メッセージっぽく斜体に */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .inst-grid {
        grid-template-columns: 1fr; /* 1列 */
        gap: 60px;
    }
    
    .inst-card {
        text-align: center;
        padding-top: 60px; /* 写真スペース確保 */
    }
    
    .inst-photo-wrapper {
        left: 50%; /* 中央寄せ */
        transform: translateX(-50%);
        width: 100px;
        height: 100px;
        top: -50px;
    }
    
    .inst-header {
        padding-left: 0; /* 左余白解除 */
        margin-bottom: 20px;
    }
    .inst-tags {
        justify-content: center;
    }
    .inst-body {
        padding-top: 0;
    }
}
/* =========================================
   体験レッスン申し込みセクション (CTA)
   ========================================= */
.cta-section {
    padding: 80px 20px;
    /* 背景を少し目立たせる（薄い黄緑） */
    background-color: #F1F8E9;
    border-top: 5px solid var(--pg-green-dark);
    text-align: center;
}

.cta-desc {
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.8;
    color: var(--pg-gray-dark);
}

/* ボタンのグリッドレイアウト */
.cta-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

/* CTAボタン共通スタイル */
.cta-btn {
    display: flex;
    align-items: center;
    background-color: #fff;
    text-decoration: none;
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
    border: 3px solid transparent; /* ホバー時の枠線用 */
}

/* ホバー効果 */
.cta-btn:hover {
    transform: translateY(-5px); /* 少し浮く */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
/* クリック感を出す */
.cta-btn:active {
    transform: translateY(0);
}

/* アイコンエリア */
.cta-icon-box {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* テキストエリア */
.cta-text-box {
    flex: 1;
}
.cta-sub {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 5px;
}
.cta-main {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0 0 10px;
    line-height: 1.2;
}
.cta-link-text {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: underline;
}

/* --- LINEボタン専用スタイル --- */
.line-btn {
    border-color: #06C755; /* LINEグリーン */
}
.line-btn .cta-sub { color: #06C755; }
.line-btn .cta-main { color: #06C755; }
.line-btn .cta-link-text { color: #06C755; }
/* ホバー時に背景色を変える */
.line-btn:hover { background-color: #E8F8F0; }

/* --- 電話ボタン専用スタイル --- */
.tel-btn {
    border-color: var(--pg-orange); /* オレンジ */
}
.tel-btn .cta-sub { color: var(--pg-orange); }
.tel-btn .cta-main { color: var(--pg-orange); font-family: 'Roboto', sans-serif; /* 数字を見やすく */ }
.tel-btn .cta-link-text { color: var(--pg-orange); }
/* ホバー時に背景色を変える */
.tel-btn:hover { background-color: #FFF3E0; }

/* スマホ対応 */
@media (max-width: 768px) {
    .cta-section { padding: 60px 15px; }
    .cta-grid {
        flex-direction: column; /* 縦積みに */
        align-items: center;
        gap: 20px;
    }
    .cta-btn {
        padding: 20px;
        max-width: 100%; /* 幅いっぱいに */
    }
    .cta-icon-box {
        width: 60px;
        height: 60px;
        margin-right: 15px;
    }
    .cta-main { font-size: 1.3rem; }
}
/* =========================================
   フッターセクション（サイトマップ＆事業者情報）
   ========================================= */
.site-footer {
    /* 背景色を濃い緑にしてフッターらしさを出す */
    background-color: var(--pg-green-dark, #005F6B);
    color: #fff;
    padding-top: 60px;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* グリッドレイアウト（PCは3カラム） */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding-bottom: 50px;
}

.footer-col {
    /* 各カラムの共通スタイル */
}

/* フッターロゴと紹介文 */
.footer-logo {
    font-size: 1.8rem;
    font-weight: 900;
    margin: 0 0 20px;
    color: var(--pg-orange, #FF8A65); /* ロゴはオレンジで強調 */
}
.footer-desc {
    opacity: 0.9;
}

/* フッターの見出し */
.footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}
.footer-title::after {
    /* 見出しの下線 */
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: var(--pg-orange, #FF8A65);
}

/* リンクリスト（サイトマップ） */
.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-link-list li {
    margin-bottom: 15px;
}
.footer-link-list a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}
.footer-link-list a:hover {
    color: var(--pg-orange, #FF8A65); /* ホバーでオレンジ */
    transform: translateX(5px); /* 少し右に動く */
}

/* 事業者情報 */
.footer-address {
    font-style: normal; /* addressタグの斜体を解除 */
    opacity: 0.9;
}
.footer-address p {
    margin-bottom: 15px;
}
.footer-tel a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
}
.footer-cta-btn {
    margin-top: 30px;
}
/* 既存のボタンクラスを少し小さく調整して再利用 */
.pg-btn-link.link-small {
    padding: 12px 30px;
    font-size: 1rem;
}

/* コピーライト */
.footer-copyright {
    background-color: rgba(0,0,0,0.2); /* 少し暗くする */
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* スマホでの調整 */
@media (max-width: 768px) {
    .site-footer {
        text-align: center; /* スマホは中央寄せ */
    }
    .footer-title::after {
        left: 50%;
        transform: translateX(-50%); /* 下線も中央寄せ */
    }
    .footer-link-list a:hover {
        transform: none; /* スマホでは動きを止める */
    }
    .footer-grid {
        gap: 50px;
    }
}
/* フッターのLINEリンク用スタイル */
.footer-line a {
    color: #fff;
    text-decoration: underline; /* リンクとわかるように下線をつける */
    font-weight: 700;
    transition: color 0.3s ease;
    display: inline-block; /* ホバー時の動きのために必要 */
}
.footer-line a:hover {
    color: var(--pg-orange, #FF8A65); /* ホバーでオレンジ */
    text-decoration: none;
}
/* スマホ以外では少し右に動くアニメーション */
@media (min-width: 769px) {
    .footer-line a:hover {
        transform: translateX(5px);
    }
}
/* =========================================
   在校生ドロップダウン用CSS（局所追加版）
   ========================================= */

/* ドロップダウン全体を包むコンテナ */
.student-dropdown-container {
    position: relative; /* 子メニューの基準点 */
    display: inline-block;
    margin-right: 10px; /* 体験レッスンボタンとの隙間 */
}

/* ドロップダウンの親ボタン（見た目調整） */
.student-dropdown-toggle {
    cursor: default; /* リンクではないのでカーソルを通常に */
    position: relative;
    z-index: 2;
    /* もし既存のbtn-contactがaタグ専用で崩れる場合は以下を有効化 */
    /* display: inline-flex; align-items: center; justify-content: center; text-decoration: none; */
}

/* 隠れているメニュー本体 */
.student-dropdown-menu {
    position: absolute;
    top: 90%; /* ボタンの少し下 */
    right: 0; /* 右端を揃える */
    background-color: #fff;
    min-width: 240px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px 0;
    z-index: 1; /* ボタンより下 */
    border-top: 3px solid var(--pg-green-dark, #005F6B); /* アクセントカラー */
    
    /* アニメーション設定 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* PCでホバーした時の動作 */
@media (min-width: 1025px) {
    /* コンテナにマウスが乗ったらメニューを表示 */
    .student-dropdown-container:hover .student-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        z-index: 999; /* 最前面へ */
    }
}

/* メニュー内のリンクスタイル */
.student-dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #555 !important; /* 既存の文字色を上書き */
    text-decoration: none !important;
    font-size: 14px;
    font-weight: normal !important;
    border-bottom: 1px solid #eee;
    background: none !important; /* 既存のボタン背景をリセット */
    border-radius: 0 !important;
    text-align: left;
    line-height: 1.4;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.student-dropdown-menu a:last-child {
    border-bottom: none;
}
.student-dropdown-menu a:hover {
    background-color: #f4f8f9 !important;
    color: var(--pg-green-dark, #005F6B) !important;
}

/* ▼▼▼ スマホ対応（タップで開閉できるようにする設定） ▼▼▼ */
/* スマホでも表示させる */
@media (max-width: 1024px) {
    .student-dropdown-container {
        display: block; /* 表示する */
        margin-bottom: 10px; /* ボタン間の余白 */
        margin-right: 0;
    }
    /* スマホではメニューをボタンの下に静的に配置 */
    .student-dropdown-menu {
        position: static; /* 絶対配置を解除 */
        width: 100%;
        box-shadow: none;
        border: 1px solid #eee;
        border-top: none;
        
        /* JSで制御するため最初は隠す */
        display: none; 
        opacity: 1; visibility: visible; transform: none;
    }
    /* JSで .is-open が付いたら表示 */
    .student-dropdown-container.is-open .student-dropdown-menu {
        display: block;
    }
    /* 矢印を回転させる */
    .student-dropdown-container.is-open .student-dropdown-toggle span {
        transform: rotate(180deg);
        display: inline-block;
    }
}
/* --- スクロールアニメーション用 --- */
.scroll-up {
    opacity: 0;                /* ← 0 に戻す（最初は見えない） */
    transform: translateY(30px);
    transition: all 1.0s;
}
.scroll-up.is-show {
    opacity: 1;                /* 出てきたら見える */
    transform: translateY(0);
}
/* --- マンガセクション用CSS --- */
.manga-section {
    padding: 60px 0;
    background-color: #ecf0f1; /* 薄いグレーの背景色 */
    text-align: center;        /* 文字と画像を中央揃え */
}

.manga-container {
    margin-top: 30px;
    display: inline-block;     /* 中央揃えのために必要 */
    padding: 10px;
    background: #fff;          /* 画像の周りに白い枠 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 影をつけて浮かせる */
    border-radius: 8px;        /* 角を少し丸く */
}

.manga-image {
    width: 100%;               /* 親枠に合わせて伸縮 */
    max-width: 800px;          /* PCで大きくなりすぎないように制限 */
    height: auto;              /* 高さは自動調整 */
    vertical-align: bottom;    /* 画像の下の微妙な隙間を消す */
    border-radius: 4px;        /* 画像自体の角も少し丸く */
}
/* =========================================
   【最終最強版】英検マンガセクション
   実機スマホでの巨大化を強制的に防ぐ設定
   ========================================= */

/* 1. 最も外側のセクション枠 */
.eiken-manga-section {
    padding: 60px 0;
    background-color: #fff;
    text-align: center;
    /* ↓【重要】もし中身が暴れても、枠からはみ出させない設定 */
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box; /* 枠線の太さも幅に含める */
}

/* 2. 画像を入れる箱 */
.eiken-manga-box {
    margin-top: 30px;
    /* スマホでは画面幅の94%の広さにする（左右に3%ずつの隙間） */
    width: 94% !important;
    /* 左右中央揃え */
    margin-left: auto !important;
    margin-right: auto !important;
    /* PCでは600px以上ひろげない */
    max-width: 600px !important;
}

/* 3. 画像本体 */
.eiken-manga-img {
    /* ↓【最重要】親の箱の幅(94%)に合わせて絶対に縮め！という強制命令 */
    width: 100% !important;
    height: auto !important;
    
    display: block; /* 変な隙間を防ぐ */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
}