/* --- 自前ホスティングフォントの設定 --- */

/* Noto Sans JP (ゴシック体) */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans-jp-v52-japanese-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-sans-jp-v52-japanese-700.woff2') format('woff2');
}

/* Noto Serif JP (明朝体) */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-serif-jp-v30-japanese-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/noto-serif-jp-v30-japanese-700.woff2') format('woff2');
}

/* --- 変数設定（カラー・フォント） --- */
:root {
    --primary: #c5a059; /* 上品なゴールド */
    --secondary: #1a2a3a; /* 落ち着いたネイビー */
    --bg-light: #fdfcf9; /* 柔らかな和の白 */
    --text-main: #333;
    --text-sub: #666;
    --accent: #d44c4c; /* お申し込みボタン（赤） */
    --white: #ffffff;
}

/* --- リセット & 基本設定 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-main);
    line-height: 1.8;
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .serif { font-family: 'Noto Serif JP', serif; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* --- ヒーローセクション --- */
.hero {
    background: linear-gradient(rgba(0,0,0.3,0.0), rgba(0,0,0,0.3)), url('img/new_image_big1.webp');
    background-size: cover;
    background-position: left top;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
}
/* --- ロゴテキストのスタイル調整（太字・サイズアップ） --- */
.logo-text { 
    font-family: 'Noto Serif JP', serif; 
    letter-spacing: 0.35em;   /* 文字間隔を少し広げて優雅に */
    font-size: 1.1rem;        /* 0.9remから1.1remへ拡大 */
    font-weight: 700;         /* 文字を太く設定 */
    display: inline-block;    /* blockから変更して枠を文字幅に合わせる */
    margin-bottom: 30px; 
margin-right: 100px;
    border: 2px solid var(--white); /* 枠線も少し太くして強調 */
    padding: 8px 25px;        /* 内側の余白を広げて枠を大きく */
    color: var(--white);      /* 文字色を白に固定 */
    text-align:right;
text-shadow: 0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555;
}

/* --- ヒーローバッジ（サイズアップ版） --- */
.hero-badge { 
    background: var(--primary); 
    padding: 8px 25px;       /* 上下を8px、左右を25pxに広げました */
    font-size: 1.1rem;       /* 文字サイズを0.9remから1.1remへ大きくしました */
    margin-bottom: 25px;     /* 下のタイトルとの間隔を少し広げました */
    margin-right: 150px;
display: inline-block; 
    font-weight: bold; 
    border-radius: 4px;      /* 角をわずかに丸くすると高級感が増します */
    letter-spacing: 0.05em;  /* 文字の間隔を少し広げて読みやすくしました */
float:right;
box-shadow: 0 0 7px #888,
               0 0 7px #888,
               0 0 7px #888,
               0 0 7px #888,
               0 0 7px #888;

}
.hero-inner h1 { font-size: 2.4rem; 
		letter-spacing: 0.1em; 
		margin-bottom: 20px; 
		line-height: 1.4;
 		margin-right: 100px;
		text-align:right;
		clear: both;
		text-shadow: 0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555; /* floatの影響を解除して下に配置 */

}

.hero-subtext { font-size: 1.1rem;
		 opacity: 0.9;
		text-align:right;
		margin-right: 100px;
text-shadow: 0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555;
 }



/* --- 概要サマリー --- */
/* --- 概要サマリー（金枠デザイン） --- */
.summary-box {
    background: var(--white);
    margin-top: -30px;
    padding: 40px;
    border-radius: 12px;
    /* 2pxの太さで、しっかりとした金の枠線を設定 */
    border: 3px solid var(--primary); 
    /* 影も少しゴールドを混ぜて、枠が光っているような演出に */
    box-shadow: 0 15px 40px rgba(197, 160, 89, 0.15);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
    position: relative;
    z-index: 10;
}

/* 枠の中の項目：見出しは金のまま、テキストはネイビーで視認性を確保 */
.summary-item h4 { 
    color: var(--primary); 
    font-size: 1.3rem; 
    margin-bottom: 10px; 
    border-bottom: 2px solid var(--bg-light); 
    display: inline-block; 
    padding-bottom: 5px; 
}

.summary-item p { 
    font-size: 0.95rem; 
    font-weight: bold; 
    color: var(--secondary); /* 文字は落ち着いたネイビー */
}

/* --- セクションタイトル --- */
section { padding: 100px 0; }
.section-title { text-align: center; margin-bottom: 70px; }
.section-title span { color: var(--primary); font-weight: bold; letter-spacing: 0.4em; font-size: 0.85rem; display: block; margin-bottom: 15px; }
.section-title h2 { font-size: 2rem; margin-bottom: 15px; color: var(--secondary); }
.section-title.white h2, .section-title.white p { color: var(--white); }

/* --- レポートカード --- */
.report-card {
    background: var(--bg-light);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 80px;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: 0.3s;
}
.report-card.highlight { border: 2px solid var(--primary); background: var(--white); }
.report-card:hover { transform: translateY(-5px); }
.report-card.reverse { flex-direction: row-reverse; }
.report-img { flex: 1; min-width: 350px; min-height: 400px; background-size: cover; background-position: center; }

/* ダミー画像設定（独自の画像に変更可能） */
.img-vol1 { background-image: url('img/1.webp'); }
.img-vol2 { background-image: url('img/2.webp'); }
.img-vol3 { background-image: url('img/3.webp'); }
.img-vol4 { background-image: url('img/4.webp'); }
.img-vol5 { background-image: url('img/5.webp'); }

.report-content { flex: 1.2; padding: 50px; min-width: 350px; display: flex; flex-direction: column; justify-content: center; }
.report-content .vol { color: var(--primary); font-weight: bold; font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: 15px; }
.report-text { font-size: 1rem; color: var(--text-sub); margin-bottom: 25px; }
.report-point { background: var(--white); padding: 15px 20px; border-left: 5px solid var(--primary); font-size: 0.9rem; font-weight: bold; color: var(--secondary); box-shadow: 2px 2px 10px rgba(0,0,0,0.02); }

/* --- 選ばれる理由（ネイビー背景） --- */
.reasons-section { background-color: var(--secondary); color: var(--white); }
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.reason-item { padding: 30px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; }
.reason-item h3 { color: var(--primary); margin-bottom: 15px; font-size: 1.3rem; }
.reason-item p { font-size: 0.95rem; opacity: 0.8; }



/* スマホ用の調整 */
@media (max-width: 768px) {
    .reasons-main-img {
        margin-bottom: 25px;
    }
    .reasons-main-img img {
        max-height: 250px; /* スマホでは少し高さを抑える */
    }
}






/* --- Q&A セクション --- */
.qa-section {
    background-color: var(--bg-light);
    padding: 100px 0;
}

.qa-container {
    max-width: 950px; /* 幅を広く設定 */
    margin: 0 auto;
    padding: 0 20px;
}

.qa-item {
    margin-bottom: 25px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

/* 質問エリア (Q) */
.qa-q {
    padding: 25px 30px;
    display: flex;
    align-items: center; /* アイコンと文字を中央揃え */
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--secondary);
}

/* Qアイコンのデコレーション */
.qa-q::before {
    content: "Q"; /* 文字を表示 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px; /* 潰れ防止 */
    background-color: var(--primary); /* ゴールド */
    color: white;
    border-radius: 50%; /* 正円 */
    margin-right: 20px;
    font-family: 'serif';
    font-size: 1.2rem;
    box-shadow: 0 3px 6px rgba(197, 160, 89, 0.3);
}

/* 回答エリア (A) */
.qa-a {
    padding: 0 30px 30px 86px; /* アイコンの幅に合わせて左余白を調整 */
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-sub);
    position: relative;
}

/* Aアイコンのデコレーション */
.qa-a::before {
    content: "A"; /* 文字を表示 */
    position: absolute;
    left: 30px;
    top: -5px; /* 位置の微調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--secondary); /* ネイビー */
    color: white;
    border-radius: 50%;
    font-family: 'serif';
    font-size: 1.2rem;
    box-shadow: 0 3px 6px rgba(26, 42, 58, 0.2);
}

/* --- フッター --- */
footer { padding: 80px 0 140px; text-align: center; background: #f9f9f9; color: var(--secondary); }
footer h2 { margin-bottom: 20px; }
.copy { font-size: 0.8rem; color: #999; margin-top: 40px; }

/* --- 固定申し込みボタン --- */
.floating-cta { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 480px; z-index: 1000; }
.cta-btn {
    background: var(--accent); color: var(--white); display: block; text-align: center;
    padding: 22px; border-radius: 50px; text-decoration: none; font-weight: bold; font-size: 1.0rem;
    box-shadow: 0 10px 30px rgba(212, 76, 76, 0.4); transition: 0.4s;
}
.cta-btn:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(212, 76, 76, 0.5); }

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .hero-inner h1 { font-size: 1.7rem; }
    .report-card, .report-card.reverse { flex-direction: column; }
    .report-img { min-width: 100%; min-height: 300px; }
    .report-content { padding: 30px; min-width: 100%; }
    section { padding: 60px 0; }
}

/* --- 生徒の声（VOICE）スタイル --- */
.voice-section {
    background-color: var(--white); /* Q&Aと差別化するため白背景に */
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.voice-item {
    background: var(--bg-light);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

.voice-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}
/* 生徒の声：写真サイズを大きく調整 */
.voice-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 20px;
    border: 2px solid var(--primary);
}

/* ダミーの顔写真画像（独自の画像に変更してください） */
.img-student1 { background-image: url('img/6.webp'); }
.img-student2 { background-image: url('img/7.webp'); }

.voice-info {
    display: flex;
    flex-direction: column;
}

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

.voice-course {
    font-size: 0.85rem;
    color: var(--primary);
    margin-top: 5px;
}

.voice-content {
    position: relative;
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 1.8;
}

.voice-content::before {
    content: "“";
    position: absolute;
    top: -20px;
    left: -10px;
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.2;
    font-family: serif;
}

/* スマホ用調整 */
@media (max-width: 768px) {
    .voice-item { padding: 30px; }
}


/* --- スケジュールセクション --- */
.schedule-section { background-color: var(--white); }

.tab-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 15px 5px;
    background: var(--bg-light);
    border: 1px solid #eee;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    color: var(--secondary);
    transition: 0.3s;
    border-radius: 5px;
}

.tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.schedule-content {
    background: var(--white);
    border: 2px solid var(--bg-light);
    padding: 40px;
    border-radius: 15px;
    min-height: 250px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.5s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.schedule-table th, .schedule-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.schedule-table th { color: var(--primary); font-size: 0.9rem; }

.schedule-note { margin-top: 20px; font-size: 0.9rem; color: #808080; }

/* スマホ用（ボタンを2列に） */
@media (max-width: 768px) {
    .tab-buttons { grid-template-columns: repeat(2, 1fr); }
    .schedule-content { padding: 20px; }
}

/* 校舎情報エリアのスタイル */
.school-header {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--bg-light);
    padding-bottom: 15px;
}

.school-map-link {
    color: var(--secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
    transition: 0.3s;
}

.school-map-link:hover {
    color: var(--primary);
}

.school-access {
    font-size: 0.85rem; /* 小さめに設定 */
    color: var(--text-sub);
    margin-top: 8px;
    line-height: 1.5;
}

/* テーブルの上の余白を調整 */
.schedule-table {
    margin-top: 10px;
}

.school-header {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--bg-light);
    padding-bottom: 15px;
}
.school-map-link {
    color: var(--secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary);
    transition: 0.3s;
}
.school-access {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-top: 8px;
}


/* --- 401行目以降：PC微調整・スマホ表示・SNS・ボタンの最終決定版 --- */

/* PC表示の全体ズーム設定 */
@media (min-width: 1025px) {
    body { zoom: 0.9; }
}

/* --- 425行目以降：スマホ最適化 ＆ フローティング・ボタン装飾完全復活 --- */

@media (max-width: 480px) {
    /* 日程表を縦並びにする */
    .time-slots {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .time-slots span {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 15px !important;
        background-color: var(--bg-light) !important;
        border-radius: 8px !important;
        border: 1px solid #ddd !important;
        font-size: 1.1rem !important;
        white-space: normal !important;
    }

    .time-slots span strong {
        color: var(--primary) !important;
        margin-right: 12px;
        font-size: 1.25rem !important;
    }

    /* よくある質問ボタン：スマホでの幅調整 */
    .btn-more {
        display: block !important;
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto;
        padding: 15px 20px !important;
    }

    /* フローティングボタン：スマホでのサイズ微調整 */
    .unit-icon-btn { flex: 0 0 58px !important; height: 58px !important; }
    .unit-main-btn { height: 58px !important; font-size: 0.8rem !important; }

} /* ← ここでスマホ用メディアクエリを確実に閉じます */

/* --- 共通：よくあるご質問ボタンの装飾 --- */
.more-link-container {
    text-align: center;
    margin: 40px auto 80px;
}

.btn-more {
    display: inline-block;
    padding: 16px 45px;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-more:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    transform: translateY(-3px);
}

/* --- 共通：一体型フローティングユニット（最優先表示） --- */
.integrated-floating-unit {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 96%;
    max-width: 600px;
    z-index: 999999 !important; /* 最前面へ */
    pointer-events: auto !important; /* タップを許可 */
}

.unit-icon-btn {
    flex: 0 0 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.phone-color { background-color: var(--secondary) !important; }
.mail-color { background-color: var(--primary) !important; }

.unit-main-btn {
    flex: 1;
    background-color: var(--accent) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-weight: 900;
    font-size: 1.1rem;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.unit-label { font-size: 0.65rem; font-weight: 900; margin-top: 1px; }

/* フッターの底上げ */
footer { padding-bottom: 140px !important; }



/* フッターロゴ：ヘッダーより少し控えめなサイズ */
.footer-logo {
    max-width: 220px;
    height: auto;
    margin-bottom: 30px;
}

/* フッターの住所・電話番号エリア */
.footer-info {
    margin: 30px 0;
    color: var(--secondary);
    line-height: 1.6;
}

.footer-info p {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

/* 電話番号を強調 */
.footer-tel {
    font-size: 1.2rem !important;
    font-weight: bold;
    margin-top: 10px;
    letter-spacing: 0.05em;
}




/* --- 424行目以降をこれに差し替え --- */
@media (max-width: 480px) {
    /* 1. 表を包む枠に「横スクロール」を許可する */
    .schedule-content {
        padding: 20px 10px !important;
        overflow-x: auto; /* 横にはみ出た分をスクロール可能にする */
        -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
    }

    /* 2. 曜日・日程・時間の並びを「中身の幅」に合わせる */
    .time-slots {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 絶対に折り返さない */
        width: max-content;           /* 文字の長さに合わせて横に広がる */
        min-width: 100%;
        gap: 8px !important;
        padding-bottom: 5px;
    }

    /* 3. 各スロットが潰れないように幅を確保する */
    .slot {
        flex: 0 0 auto !important;    /* 画面幅に合わせて縮むのを禁止 */
        min-width: 140px;             /* 長い日付が入るための最低幅 */
        padding: 10px 5px !important;
        background: #f9f9f9;
        text-align: center;
        border-radius: 4px;
    }

    /* 4. 文字の設定（1行に固定） */
    .slot-label, .slot span, .slot strong, .time-slots span {
        font-size: 0.75rem !important; /* 少し読みやすくサイズアップ */
        white-space: nowrap !important; /* 絶対に改行させない */
        letter-spacing: -0.3px;
        display: block;
    }
}


/* --- 「よくあるご質問」もっと見てみるボタン（復活版） --- */
.more-link-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 60px; /* 下の要素との間隔を確保 */
}

.btn-more {
    display: inline-block;
    padding: 14px 35px;
    border: 1px solid var(--primary); /* 上品なゴールド枠 */
    color: var(--primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: bold;
    transition: all 0.3s ease;
    background-color: transparent;
}

/* ホバー（マウスを置いた時）の演出 */
.btn-more:hover {
    background-color: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.2);
}

/* ボタンの中のアイコン間隔 */
.btn-more i {
    margin-left: 8px;
    font-size: 0.8rem;
}



/* --- SNSアイコンエリアの復活 --- */
.sns-links {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 30px; /* アイコン同士の間隔 */
}

.sns-links a {
    color: var(--white); /* アイコンを白にする */
    font-size: 2.2rem;    /* アイコンを少し大きく */
    transition: transform 0.3s, opacity 0.3s;
    text-decoration: none;
    display: inline-block;
}

/* マウスを置いた時の動き（ゴールドに光って少し浮く） */
.sns-links a:hover {
    transform: translateY(-5px);
    opacity: 0.8;
    color: var(--primary); /* 彩ゴールドに変化 */
}

/* 濃紺のフッター内での余白調整 */
footer {
    padding-bottom: 120px; /* ボタンと被らないようにフッターの底上げ */
}


/* --- 選ばれる理由セクション：画像レスポンシブ完全版 --- */
.points-main-visual {
    width: 100%;
    max-width: 600px; /* PCでの最大幅 */
    margin: 0 auto 40px;
    padding: 0; /* 親の .container に padding があるため、ここでは 0 にして計算をシンプルにします */
    box-sizing: border-box;
}

.points-main-visual img {
    display: block;
    width: 100%;      /* 親の幅（points-main-visual）に合わせる */
    max-width: 100%;  /* 絶対に親要素を突き抜けないようにする */
    height: auto;     /* 縦横比を維持 */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    /* 念のため、スマホでの右側はみ出しを防止する呪文 */
    margin-left: auto;
    margin-right: auto;
}

/* モバイル表示時の安全策 */
@media (max-width: 768px) {
    .points-main-visual {
        width: 100%;
        max-width: 100%; /* スマホではコンテナ幅いっぱいを許可 */
        margin-bottom: 30px;
    }
}

/* --- About Us セクション タイトル調整 --- */
.about-section h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.0rem;       /* 日本語を大きく */
    color: #333;             /* 落ち着いた黒文字 */
    line-height: 1.2;
}

.about-section h2 span {
    display: block;          /* 改行して配置 */
    font-size: 0.7rem;       /* 英語を小さく */
    color: var(--primary);   /* 金字（ゴールド） */
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 10px;        /* 上の文字との間隔 */
    letter-spacing: 0.2em;   /* 少し文字間を広げて上品に */
    text-transform: uppercase; /* 大文字にする（お好みで） */
}

/* スマホ表示での調整（Pixel 9a等） */
@media (max-width: 768px) {
    .about-section h2 {
        font-size: 1.8rem;   /* スマホでは少し小さく */
    }
    .about-section h2 span {
        font-size: 0.8rem;
    }
}


/* --- About Us セクション 基本設定 --- */
.about-section {
    padding: 80px 0;
    background-color: var(--bg-light); /* 薄い和の色 */
}

/* タイトル：日本語（大・黒） */
.about-section h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.2rem;
    color: #333; /* 落ち着いた黒 */
    line-height: 1.2;
}

/* タイトル：英語（小・金） */
.about-section h2 span {
    display: block;
    font-size: 0.9rem;
    color: var(--primary); /* 金色 */
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* PC：横並びの設定 */
.about-flex {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-image, .about-content {
    flex: 1;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.about-lead {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--secondary);
    margin-bottom: 20px;
}

.about-content p {
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.about-btn-area {
    margin-top: 30px;
}

/* --- 【修正ポイント】スマホ・タブレット表示の回り込み設定 --- */
@media (max-width: 768px) {
    .about-section {
        padding: 50px 0;
    }
    
    /* 縦並びに切り替えることで、文章が写真の下に回り込みます */
    .about-flex {
        flex-direction: column; 
        gap: 30px;
    }

    .about-section h2 {
        font-size: 1.8rem;
    }

    /* ボタンを中央に配置 */
    .about-btn-area {
        text-align: center;
    }
    
    /* 改行の制御 */
    .sp-only {
        display: block;
    }
}

.sp-only { display: none; }


/* =========================================
   ▼ スマホ（768px以下）でのヒーローエリア幅広げ設定
   ========================================= */
@media (max-width: 830px) {

.hero {
    background: linear-gradient(rgba(0,0,3,0.0), rgba(0,0,0,0.3)), url('img/new_image_big2.webp');
    background-size: cover;
    background-position: 40% 60%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding:0px
}
    
    /* 1. 親枠：余白を最小限にして、画面の端まで広げる */
    .hero-inner container {
        width: 100% !important;
        padding-left: 10px !important;    /* 左右の余白を10pxに縮小 */
        padding-right: 10px !important;
        
        /* テキストを左揃え・下配置にする場合 */
        align-items: flex-start !important;
        justify-content: flex-end !important;
        padding-bottom: 10px !important;
	margin-bottom: 0px !important;
    }

    /* 2. 中枠（コンテナ）：二重の余白を防ぐためリセット */
    .hero-content .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;   /* コンテナの余白をゼロにする */
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* 3. テキスト自体の設定 */
    .hero-subtext {
        text-align: left !important;
        width: 100% !important;
	font-size: 0.9rem !important;
margin-bottom: 0px;
text-shadow: 0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555;
    }
    
    .hero-inner h1,
    .hero-title-main {
      text-align: left !important;
        font-size: 1.6rem !important;
        line-height: 2.0m !important;
letter-spacing: 0.1em; 
margin-top: 30px;
margin-bottom: 20px; 
clear: both; /* floatの影響を解除して下に配置 */
text-shadow: 0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555,
               0 0 10px #555;
    }


.hero-badge { 
    background: var(--primary); 
    padding: 7px 26px;       /* 上下を8px、左右を25pxに広げました */
    font-size: 0.8rem;       /* 文字サイズを0.9remから1.1remへ大きくしました */
margin-top: 70px;    
margin-bottom: 10px;     /* 下のタイトルとの間隔を少し広げました */
    display: block; 
    font-weight: bold; 
    border-radius: 4px;      /* 角をわずかに丸くすると高級感が増します */
    letter-spacing: 0.05em;  /* 文字の間隔を少し広げて読みやすくしました */
float:left;
box-shadow: 0 0 2px #999,
               0 0 4px #999,
               0 0 4px #999,
               0 0 4px #999,
               0 0 4px #999;
}

} 








/* --- テーブル用のCSS（結合・確実に見える太線・金色・横スクロール版） --- */
.cost-table-wrapper {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 15px;
  font-family: "Noto Sans JP", sans-serif;
}

.cost-table-title {
  text-align: center;
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.scroll-hint {
  display: none; 
  text-align: right;
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 8px;
  animation: floatX 2s infinite ease-in-out;
}

.table-scroll-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 5px;
}

.cost-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}

.cost-table th, 
.cost-table td {
  border: 1px solid #e5e5e5;
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
}

/* 金色のヘッダー部分 */
.cost-table th {
  background: linear-gradient(135deg, #d4b572 0%, #c09d50 100%);
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #c09d50;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.cost-table .item-name {
  font-weight: bold;
  background-color: #faf9f6;
  text-align: center;
  white-space: nowrap;
}

/* 結合したセルの装飾 */
.cost-table .merged-cell {
  background-color: #fcfaf5; 
}

/* ==========================================
   ★修正：100%表示でも確実に見える太線
   ========================================== */
.cost-table .thick-border td {
  /* 2pxだとブラウザの描画によって細く見えがちなので3pxに変更。
    色は少し濃いめのゴールド（#a5843a）にしてコントラストを強めました。
    もし「もっとハッキリ区切りたい（グレー等）」場合は #999999 に変更してください。
  */
  border-top: 3px solid #a5843a; 
}

.cost-table .price {
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.cost-table .highlight {
  color: #d13b3b;
  font-size: 1.1rem;
}

.cost-table .note {
  font-size: 0.85rem;
  color: #666;
}

@keyframes floatX {
  0% { transform: translateX(0); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@media screen and (max-width: 680px) {
  .scroll-hint {
    display: block;
  }
  .cost-table th, 
  .cost-table td {
    padding: 12px 10px;
  }
}


/* --- シンプルな記号の区切り --- */
.symbol-divider {
  text-align: center;
  color: #c09d50; /* 表と同じ上品なゴールド */
  font-size: 1.4rem;
  margin: 50px 0; /* 上下にしっかリ余白を取る */
  opacity: 0.7; /* 少しだけ色を薄くして、さりげなく見せる */
}

/* スマホ閲覧時 */
@media screen and (max-width: 600px) {
  .symbol-divider {
    margin: 35px 0;
    font-size: 1.2rem;
  }
}


/* --- 基礎科紹介セクションのCSS --- */
.next-step-wrapper {
  max-width: 800px;
  margin: 60px auto;
  background-color: #faf9f6; /* 上品な薄い和風ベージュ背景 */
  border: 1px solid #e5dfd3;
  border-radius: 8px;
  overflow: hidden;
  font-family: "Noto Sans JP", sans-serif;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
width: calc(100% - 30px);
}

.next-step-header {
  background: linear-gradient(135deg, #d4b572 0%, #c09d50 100%); /* ヘッダーと同じシャンパンゴールド */
  color: #fff;
  text-align: center;
  padding: 20px 15px;
}

.next-step-subtitle {
  display: block;
  font-size: 0.85rem;
  opacity: 0.9;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.next-step-title {
  font-size: 1.3rem;
  margin: 0;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.next-step-content {
  padding: 30px 40px;
}

.next-step-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 25px;
}

.notice-text {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: #d13b3b; /* 警戒心を解くための強調色 */
  font-weight: bold;
}

.next-step-info-box {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed #e5e5e5;
}

.info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-item:first-child {
  padding-top: 0;
}

.info-label {
  width: 140px;
  font-weight: bold;
  color: #666;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.info-value {
  flex-grow: 1;
  font-size: 0.95rem;
  color: #333;
}

.info-value strong {
  font-size: 1.2rem;
  color: #333;
}

.tax {
  font-size: 0.8rem;
  color: #666;
}

.small-text {
  display: block;
  font-size: 0.8rem;
  color: #777;
  margin-top: 4px;
}

.next-step-btn-area {
  text-align: center;
}

.next-step-btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #fff;
  color: #c09d50;
  border: 1px solid #c09d50;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.next-step-btn:hover {
  background-color: #fcf9f2;
  box-shadow: 0 2px 8px rgba(192, 157, 80, 0.2);
}

.next-step-btn .arrow {
  margin-left: 8px;
  font-size: 0.8em;
}

/* スマホ閲覧時（レスポンシブ）の調整 */
@media screen and (max-width: 600px) {
  .next-step-content {
    padding: 20px 15px;
  }
  .info-item {
    flex-direction: column;
  }
  .info-label {
    width: 100%;
    margin-bottom: 5px;
    color: #c09d50; /* スマホでは項目名を目立たせる */
  }
  .next-step-btn {
    width: 100%;
    box-sizing: border-box;
  }
}

/* --- 受講に必要な肌着・小物類 --- */
.required-items-wrapper {
  max-width: 800px;
  width: calc(100% - 30px); /* 左右の余白を確保 */
  margin: 30px auto 40px; /* 表のすぐ下に配置されるよう余白を調整 */
  padding: 25px;
  background-color: #fff;
  border: 1px solid #e5dfd3;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04); /* 軽い影で浮かせる */
  box-sizing: border-box;
}

.required-items-title {
  text-align: center;
  color: #a5843a; /* 表の太線と同じ上品なゴールド */
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: bold;
}

.required-items-desc {
  text-align: center;
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 25px;
  line-height: 1.6;
}

.required-items-desc .notice {
  display: inline-block;
  margin-top: 5px;
  color: #d13b3b; /* 警戒心を解くための赤字 */
  font-size: 0.85rem;
  font-weight: bold;
}

/* グリッドレイアウト（PCは4列） */
.komono-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.komono-item {
  text-align: center;
  background: #faf9f6; /* 薄い和風ベージュ */
  border: 1px solid #e5dfd3;
  border-radius: 6px;
  padding: 12px 10px;
  transition: all 0.2s ease;
}

.komono-item:hover {
  background: #fff;
  border-color: #c09d50;
  box-shadow: 0 2px 8px rgba(192, 157, 80, 0.15);
}

.komono-img {
  aspect-ratio: 1 / 1; /* 画像枠を正方形に統一 */
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5px;
}

.komono-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.komono-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
}

/* スマホ閲覧時の調整（スマホは3列にして見やすく） */
@media screen and (max-width: 600px) {
  .required-items-wrapper {
    padding: 15px;
  }
  .required-items-title {
    font-size: 1.1rem;
  }
  .required-items-desc {
    font-size: 0.85rem;
    text-align: left; /* スマホでは左揃えの方が読みやすい */
  }
  .komono-grid {
    grid-template-columns: repeat(3, 1fr); /* スマホは3列 */
    gap: 8px; /* 隙間を少し詰める */
  }
  .komono-item {
    padding: 8px 5px;
  }
  .komono-name {
    font-size: 0.75rem; /* スマホ用に文字を小さく */
  }
}



/* --- フッターのポリシー・特商法リンク --- */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 30px 0 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px 30px; /* PCでは横並びで隙間を空ける */
}

.footer-links li a {
  color: #777; /* 悪目立ちしない落ち着いたグレー */
  font-size: 0.8rem; /* 小さめの文字サイズ */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links li a:hover {
  color: #c09d50; /* マウスを乗せたらゴールドに */
  text-decoration: underline;
}

/* スマホ閲覧時の調整 */
@media screen and (max-width: 600px) {
  .footer-links {
    flex-direction: column; /* スマホでは縦並びに */
    align-items: center;
    gap: 15px; /* タップしやすいように上下の間隔をしっかり取る */
    margin: 25px 0 15px;
  }
}





/* --- 下向きの金色の二重矢印（アイコン版） --- */
.scroll-down-mark {
  text-align: center;
  margin: 30px 0 50px;
}

.scroll-down-mark i {
  font-size: 2.8rem; /* 矢印の大きさ */
  
  /* 上品なシャンパンゴールドのグラデーション */
  background: linear-gradient(135deg, #d4b572 0%, #ab8534 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c09d50; 
  
  /* 視線を下へ誘導するフワフワとした動き */
  animation: floatDown 1.5s infinite ease-in-out;
}

/* 単純に下（Y軸）へ動かすだけのアニメーション */
@keyframes floatDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}


/* ===================================================
   ▼ タブレット縦画面用：レポートカードを縦並びにして画像潰れを防ぐ ▼
   =================================================== */
@media screen and (max-width: 900px) {
  .report-card {
    flex-direction: column !important;
  }
  .report-card.reverse {
    flex-direction: column !important;
  }
  .report-img {
    width: 100%;
    min-height: auto; /* ★PC用の固定高さを解除して、縛りをなくす */
    aspect-ratio: 4 / 3; /* ★ここが魔法のコード。一般的なデジカメ写真の比率（横4：縦3）に枠の形を固定します */
    flex: none;
  }
  .report-content {
    padding: 30px;
    flex: none;
  }
}