@charset "UTF-8";
/* CSS Document for Sakusa LP - Complete Version */

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

/* ▼▼▼ リンクの基本色を「さくさ緑」に変更 ▼▼▼ */
a {
    color: #6FA390;       /* さくさ緑 */
    text-decoration: none; /* 下線を消す */
    transition: 0.3s;      /* ホバー時にふわっとさせる */
}

/* カーソルを乗せた時の動き */
a:hover {
    color: #8da884;       /* 少し濃い緑に変化（お好みで調整可） */
    text-decoration: underline; /* 下線を表示 */
    opacity: 0.8;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    background-color: #ffffff; /* フローラルホワイト */
    /* 背景画像設定 */
    background-image: url('https://sakusa.info/cms/kisetuke/wp-content/uploads/2025/12/SAKUSA_back-ground8.png');
    background-repeat: repeat;
    background-size: 200px auto;
    color: #4a4a4a; /* 優しいグレー */
    line-height: 1.8;
    letter-spacing: 0.1; /* 少し広めに読みやすく */
}

/* 画像のレスポンシブ対応 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* フォントサイズの強制統一 */
body p,
.container p,
p {
    font-size: 1rem;
    line-height: 1.8;
}

/* 見出しの基本設定 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #4a4a4a;
    line-height: 1.5;
}

/* --- 【追加】勝手な色変更の強制リセット --- */
/* 電話番号リンクの色を親要素に合わせる */
a[href^="tel:"] {
    color: inherit !important;
    text-decoration: none !important;
}
a[href^="tel:"]:hover {
    opacity: 0.7;
}
/* 強調タグの色リセット */
.container strong,
.container b {
    color: inherit !important;
}
span {
    display: inline-block;
}
/* =========================================
   2. レイアウト共通
   ========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    /* 既存のボーダー設定（必要なければ削除可） */
    /* border-top: 1px solid #eee; */
    /* padding-top: 60px; */
    margin-top: 60px;
}

/* 中央寄せ用タイトルクラス */
.titletxt {
    font-size: 1.2rem !important;
    text-align: center;
    margin-bottom: 28px;
    font-weight: bold;
}

/* =========================================
   3. First View (ヒーローエリア)
   ========================================= */
.FV {
    text-align: left;
    padding: 160px 20px; /* 上下の余白 */
    background-image: url('https://sakusa.info/cms/kisetuke/wp-content/uploads/2025/12/nowFV-1-scaled.png');
    background-size: contain;    /* PCでは枠内に収める */
    background-position: center; /* 画像の中心 */
    background-repeat: no-repeat;
}

.FV h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.4;
}
.FV h2 { font-size: 2.0rem; }
.FV h3 { font-size: 1.5rem; }
.FV p {
    font-size: 1rem !important;
    margin-bottom: 40px;
}

/* =========================================
   4. 各セクションの個別デザイン
   ========================================= */

/* --- 地域選択リスト --- */
.local img {
    max-width: 80px !important; /* ここで画像の大きさを調整（元は140px程度） */
    width: 100%;
    height: auto;
    margin-bottom: 12px; /* 画像と文字の間の隙間 */
}

/* 2. 文字を大きく、太くする */
.local .grid-item a {
    font-size: 1.2rem !important; /* 文字サイズ（元は1rem程度） */
    line-height: 1.5;             /* 行間を少し広げて窮屈さをなくす */
    color: #4a4a4a;               /* 文字色（必要に応じて） */
    display: block;               /* クリック判定をボックス全体に広げる */
}

/* --- コース説明 (余白と行間を調整) --- */
.course {
    text-align: left;
    background-image: url('https://sakusa.info/cms/kisetuke/wp-content/uploads/2025/12/course.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    /* ▼▼▼ 追加修正：全体の余白と行間 ▼▼▼ */
    padding: 80px 20px;
    margin: 60px 0;
}
.course h1 {
    line-height: 2.0;
    margin-bottom: 40px;
}
.course h2 {
    line-height: 1.8;
    margin-bottom: 30px;
}
.course h3 {
    line-height: 1.6;
    margin-bottom: 25px;
}
.course ul {
    margin-bottom: 40px;
}

/* ポイント枠 */
.onepoint {
    font-size: 1.5rem;
    font-weight: bold;
    color: #6FA390;
}
.onepoint img {
    width: 100px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

/* --- 着楽会（文章エリア） --- */
.kirakukai {
    width: auto;
    min-height: 480px;
    text-align: left;
    background-image: url('https://sakusa.info/cms/kisetuke/wp-content/uploads/2025/12/kirakukai.png');
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* --- 電話番号エリア --- */
.callnum {
    text-align: center;
}
.callnum h1 {
    font-size: 2.5rem;
    margin: 20px 0;
    color: #4a4a4a;
}

/* --- 特徴リスト --- */
.features-list {
    list-style: none; /* ・を消す */
    padding: 0;
    margin: 0;
    text-align: left; /* 左寄せ */
}

.features-list li {
    display: flex;          /* 数字とテキストを横並びにする */
    align-items: flex-start;/* 上端で揃える（重要） */
    margin-bottom: 20px;    /* 【項目同士】の間隔をここで調整 */
    line-height: 1.6;       /* 【文章自体】の行間は読みやすく狭める */
}

/* 数字バッジ */
.number-badge {
    /* Flexbox設定 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;         /* 幅が縮まないように固定（重要） */
    
    /* デザイン設定 */
    width: 40px;
    height: 40px;
    background-color: #555;
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    margin-right: 15px;     /* 数字とテキストの間隔 */
	letter-spacing: 0; 
    
    /* 位置調整（テキストの1行目の高さに合わせる） */
    margin-top: -5px;       /* 必要に応じて微調整してください */
}

/* --- 着方教室の流れ --- */
.classroom p {
    text-align: center;
}
.classroom h3 {
    /* 必要に応じて背景画像を使うか、PHP側のstyle修正を優先 */
    line-height: 1.4;
    display: inline-block;
    min-width: 240px;
    color: #4a4a4a; 
    margin-bottom: 15px;
}
.course-badge {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 5px;
}
.course-bg-box {
    /* PCでは今まで通り、エリアを埋め尽くす */
    background-size: cover;
    background-position: right center; /* 右寄せ */
    background-repeat: no-repeat;
    
    /* 背景が見えやすいように内側の余白を少し調整 */
    padding: 20px; 
    border-radius: 12px; /* 角丸をつけると綺麗です（お好みで） */
}
/* 矢印アイコン */
.arrow-right {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    margin-left: 5px;
}

/* --- 動画エリア --- */
.movie_wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
    background: #000;
}
.movie_wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.movie_name {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
}

/* --- PC・共通設定（基本は50%幅） --- */
.cm-container {
    width: 50%;
    margin: 0 auto; /* 中央寄せ */
}

/* =========================================
   5. 汎用グリッドシステム
   ========================================= */
.grid-container {
    display: grid;
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}
.grid-item {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.course .grid-item,.classroom .grid-item {
    /* rgba(255, 255, 255, 0.X) で白の透明度を指定 */
    /* 1.0 = 不透明（真っ白） */
    /* 0.9 = 90% (ほんのり透ける) */
    /* 0.8 = 80% (かなり透ける) */
    
    background-color: rgba(255, 255, 255, 0.85) !important;
    
    /* 必要であれば枠線も少し薄くする */
    /* border: 1px solid rgba(255, 255, 255, 0.5); */
}

/* =========================================
   6. 教室スケジュール
   ========================================= */

/* ▼▼▼ 追加：各都道府県エリアの仕切り線設定 ▼▼▼ */
.pref-wrap {
    border-top: 1px solid #e0e0e0; /* 薄いグレーの線 */
    padding-top: 40px;
    margin-top: 60px;
}
/* 最初のエリアだけ線がいらない場合 */
.pref-wrap:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 40px;
}

.pref-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #6FA390;
}

/* グリッド枠の設定 */
.class-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    align-items: stretch !important;
}

/* カード自体の設定 */
.study-card {
    background: #fff;
    border: 1px solid rgba(111, 163, 144, 0.3);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.study-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
    font-weight: bold;
}

.venue-info {
    font-size: 0.9rem;
    text-align: center;
    color: #666;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.schedule-list {
    margin-bottom: 20px !important;
}
.schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #eee;
    padding: 8px 0;
    font-size: 0.9rem;
    flex-wrap: wrap !important;
}
.schedule-item .date {
    margin-right: 5px;
}

.status-tags {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    margin-left: auto;
}

/* --- NEW! バッジのスタイル --- */
.badge-new {
    display: inline-block;
    background-color: #e48e9d; /* サイト内のピンク色に合わせました（または赤 #ff0000 でもOK） */
    color: #ffffff;            /* 文字は白 */
    font-size: 0.8rem;         /* 文字サイズは少し小さく */
    font-weight: bold;
    padding: 2px 8px;          /* 内側の余白 */
    border-radius: 4px;        /* 角を少し丸く */
    margin-right: 8px;         /* 右側の文字との間隔 */
    vertical-align: middle;    /* 位置調整 */
    letter-spacing: 0.05em;
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0em;
}
.tag-am { background-color: #6FA390; }
.tag-pm { background-color: #e48e9d; }
.tag-n  { background-color: #4a4a4a; }

.sp-break {
    display: none; /* PCでは改行しない */
}
.pc-only {
    display: inline; /* PCでは表示する */
}

/* =========================================
   Q&Aセクション
   ========================================= */

/* Q&A全体枠 */
.qa-container {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

/* 質問と回答のセット（1つの塊） */
.qa-item {
    border-bottom: 1px solid #ddd; /* 下線 */
    padding-bottom: 30px;          /* 下の余白 */
    margin-bottom: 30px;           /* 次の質問との間隔 */
}
/* 最後の項目だけ下線を消す */
.qa-item:last-child {
    border-bottom: none;
}

/* 行（QまたはAの1行） */
.qa-row {
    display: flex;           /* Flexboxで横並び */
    align-items: flex-start; /* 上端揃え */
    margin-bottom: 15px;     /* QとAの間隔 */
}

/* テキスト部分 */
.qa-text {
    margin: 0 !important;    /* デフォルト余白リセット */
    line-height: 1.8 !important;
    padding-top: 5px;        /* バッジとの高さ微調整 */
    flex: 1;                 /* 残りの幅を全部使う */
}

/* QとAのバッジ色分け */
.badge-q {
    background-color: #6FA390 !important; /* 緑 */
    margin-right: 15px;      /* テキストとの距離 */
    flex-shrink: 0;          /* バッジが潰れないように固定 */
}
.badge-a {
    background-color: #e48e9d !important; /* ピンク */
    margin-right: 15px;
    flex-shrink: 0;
}


/* 申し込みボタン */
.apply-link {
    background-color: #f9f9f9;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.3s;
    border: 1px solid #ddd;
    margin-top: auto !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
.apply-link:hover {
    background-color: #6FA390;
    color: #fff;
    border-color: #6FA390;
}
.apply-link .arrow-right {
    border-color: inherit;
}

/* =========================================
   代表メッセージセクション（統合・整理版）
   ========================================= */

.message-section {
    /* 背景画像の設定（全体） */
    background-size: cover;
    background-position: center;
    /* 上下の余白 */
    padding: 80px 20px;
    margin-top: 60px;
}

/* 左右分割の枠（親ボックス） */
.message-split-box {
    display: flex;       /* 横並びにする */
    width: 100%;         /* 横幅いっぱい */
    max-width: 100%;     /* 制限解除 */
    height: auto;        /* 高さは中身に合わせる */
    margin: 0 auto;
    
}

/* --- 左側：テキストエリア --- */
.message-content {
    /* ▼ 画像との比率調整（0.8 : 1.3） */
    flex: 0.8 !important; 
    
    /* レイアウト設定 */
    padding: 60px 40px !important; /* 内側の余白 */
    text-align: left;
    
    /* 文章を上下中央に寄せる設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- 右側：画像エリア --- */
.message-image {
    /* ▼ 画像を広く確保して切れにくくする */
    flex: 1.3 !important;
    
    /* 高さを確保 */
    min-height: 400px; 
    position: relative;
}

/* 画像本体の設定 */
.message-image img {
    width: 100% !important;
    height: 100% !important;
    
    /* 枠からはみ出た部分をトリミング */
    object-fit: cover !important;
    
    /* ★重要：人物の頭が切れないように「中央の上寄り」を基準にする */
    object-position: center top !important;
    
    display: block; /* 隙間防止 */
}

/* --- テキスト装飾 --- */

/* 見出し */
.message-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    line-height: 1.4;
    font-weight: bold;
    padding-bottom: 20px;
    display: inline-block;
}

/* 本文 */
.message-body {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    margin-bottom: 30px;
    color: #4a4a4a;
}

/* 署名（右寄せ・太字） */
.message-sign {
    text-align: right;
    font-weight: bold;
    font-size: 1.1rem !important;
    margin-bottom: 40px;
}

/* --- ボタン設定 --- */
.btn-wrap-left {
    text-align: left; /* 左寄せ */
}
.story-link {
    display: inline-block;
    background-color: #6FA390;
    color: #fff !important;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(111, 163, 144, 0.3);
}
.story-link:hover {
    background-color: #5d8a7a;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(111, 163, 144, 0.4);
    color: #fff !important;
}

/* --- 右側：画像エリア --- */
.message-image {
    flex: 1; /* 幅を自動調整（左側と同じ比率） */
    min-height: 400px; /* 最低限の高さ */
    position: relative;
}

.message-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに画像をトリミングして表示 */
    display: block;
}

/* --- スマホ対応（768px以下） --- */
@media screen and (max-width: 768px) {

    /* 1. 外枠：縦並びに変更し、余計な余白を除去 */
    .message-split-box {
        display: flex !important;
        flex-direction: column !important; /* 縦並び */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;             /* 重要：枠自体の余白もなくす */
    }

    /* 2. 画像エリア：上に表示 */
    .message-image {
        order: 1 !important;               /* 順番：1番目 */
        width: 100% !important;
        height: 250px !important;          /* 高さを固定 */
        margin: 0 !important;              /* 重要：重なりの原因となるマージンをリセット */
        padding: 0 !important;
    }

    /* 画像本体：枠に合わせてトリミング */
    .message-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;      /* 比率を保ったまま埋める */
        border-radius: 20px 20px 0 0 !important; /* 上だけ角丸 */
    }

    /* 3. 文章エリア：下に表示 */
    .message-content {
        order: 2 !important;               /* 順番：2番目 */
        width: 100% !important;
        padding: 40px 20px !important;
        margin: 0 !important;              /* 重要：ここもマージンをリセット */
        background-color: rgba(255, 255, 255, 0.95) !important; /* 白背景で読みやすく */
        border-radius: 0 0 20px 20px !important; /* 下だけ角丸 */
    }

    /* 4. タイトル文字の調整 */
    .message-title {
        font-size: 1.5rem !important;      /* 少し大きめに設定 */
        margin-bottom: 20px !important;
        padding: 0 10px;
        text-align: center;                /* スマホでは中央揃え */
    }

    /* 5. ボタンエリアの調整（中央寄せ） */
    .btn-wrap-left {
        text-align: center !important;
    }
    
    /* ボタンを幅いっぱいに */
    .story-link {
        width: 100% !important;
        box-sizing: border-box;            /* パディングを含めて幅100%にする */
        display: block !important;         /* 確実にブロック要素にする */
    }
}
/* 共感LPボタン */
.story-link {
    display: inline-block;
    background-color: #6FA390;
    color: #fff !important; /* リンク色強制白 */
    padding: 18px 50px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(111, 163, 144, 0.4);
}
.story-link:hover {
    background-color: #5d8a7a;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(111, 163, 144, 0.5);
    color: #fff !important;
}
.btn-wrap {
    text-align: center;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .message-section {
        padding: 60px 15px;
    }
    .message-box {
        padding: 40px 20px;
    }
    .message-title {
        font-size: 1.5rem;
        width: 100%;
    }
    .story-link {
        width: 100%; /* ボタンを幅いっぱいに */
        padding: 15px;
    }
}
/* =========================================
   7. お問い合わせフォーム & Q&A
   ========================================= */
.contact-section {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 60px 40px;
    margin: 60px auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    max-width: 700px;
}
.contact-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: #6FA390;
}

/* Q&A デザイン */
.upper-div {
    border-bottom: 1px solid #aaa;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-left: 1em;
}

/* フォーム部品 */
.wpcf7-form-control-wrap { display: block; margin-bottom: 10px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    background-color: #fafafa;
    font-size: 1rem;
    box-sizing: border-box;
}
.wpcf7 input:focus, .wpcf7 textarea:focus {
    border-color: #e48e9d;
    background-color: #fff;
    outline: none;
}
.wpcf7 label {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 5px;
    display: block;
}
.wpcf7 input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    background-color: #6FA390;
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 100px;
    cursor: pointer;
    transition: 0.3s;
}
.wpcf7 input[type="submit"]:hover {
    background-color: #8da884;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(111, 163, 144, 0.4);
}


/* =========================================
   9. スマホ対応・レスポンシブ設定
   ========================================= */
@media screen and (max-width: 768px) {
	
    /* -----------------------------------------
       9-1. 【全体】基本設定
       ----------------------------------------- */
	
    /* 全体の文字サイズ調整 */
    body, p, .container {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* コンテナの余白を狭く */
    .container { padding: 0 15px; }
	
	/* -----------------------------------------
       9-2. 【見出し】共通設定
       ----------------------------------------- */
    /* セクションタイトルや大見出しの調整 */
    h1, h2, h3 {
        width: 100%;
        text-align: center; /* スマホでは基本的に中央寄せ */
    }
	
	/* -----------------------------------------
       9-3. 【各セクション】個別調整
       ----------------------------------------- */
	
	/* --- FV（ファーストビュー） --- */
    .FV {
        padding: 100px 20px 80px; 
        
        /* ▼▼▼ スマホ用画像に差し替え ▼▼▼ */
        /* PC用の画像を上書きします */
        background-image: url('https://sakusa.info/cms/kisetuke/wp-content/uploads/2026/01/nowFV_SP-scaled.png') !important;
        
        background-size: cover; 
        background-position: 80% 30%; /* 人物の位置に合わせて調整（top/center/bottom） */
        min-height: 500px;
    }
    
    .FV h1 { font-size: 1.8rem; margin-bottom: 15px; }
    .FV h2 { font-size: 1.2rem; }
    .FV h3 { font-size: 1.1rem; }
    
    /* 文字の影（画像側で調整済みなら削除してもOK） */
    .FV h1, .FV h2, .FV h3, .FV p {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
    }
	
    
    
    /* --- グリッドシステム（1列にする） --- */
    .class-grid, 
    .grid-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
	
    /* --- 地域選択リスト --- */
    .local img { max-width: 72px !important; }
    .local .grid-item a { font-size: 1.0rem !important; }

    /* --- コース説明 --- */
    .course {
        padding: 60px 20px; 
        
        /* ▼▼▼ スマホ用画像に差し替え ▼▼▼ */
        background-image: url('https://sakusa.info/cms/kisetuke/wp-content/uploads/2026/01/course_SP.png') !important;
        
        background-size: 180% auto !important; /* containではなくcoverで全面配置 */
        background-position: 80% 50% !important; 
    }
    .course h1 { font-size: 1.6rem; margin-bottom: 30px; }
    
    /* --- 着楽会（文章エリア） --- */
    .kirakukai {
        height: auto;
        padding: 60px 20px; 
        
        /* ▼▼▼ スマホ用画像に差し替え ▼▼▼ */
        background-image: url('https://sakusa.info/cms/kisetuke/wp-content/uploads/2026/01/kirakukai_SP.png') !important;
        
        background-size: cover !important; 
        background-position: 80% 100% !important; 
    }
	
	 /* 特徴リスト */
    .features-list li {
        margin-bottom: 15px; 
        line-height: 1.5;
        font-size: 15px;
    }
    .number-badge {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        margin-top: -2px;
    }
	
	.course-bg-box {
        /* ▼▼▼ ここが重要 ▼▼▼ */
        /* 画像を枠の「横幅」と「縦幅」に強制的に合わせる */
        background-size: 100% auto !important;
        
        /* 位置は中央 */
        background-position: right center !important;
        
        /* スマホでの余白調整 */
        padding: 80px 16px 0px !important;
        margin-top: 20px !important;
    }
	
	/*ページ途中の大きな電話番号（文字）を小さくする */
    .callnum h1 {
        font-size: 1.5rem !important; 
        margin: 10px 0 !important;
    }
	
	.cm-container {
        /* スマホでは横幅いっぱいに広げる */
        width: 100% !important; 
    }
	
	.sp-break {
        display: block; /* スマホでは改行する */
    }
    .pc-only {
        display: none; /* スマホではスラッシュを消す */
    }
	.qa-text {
        font-size: 15px !important;
    }
    .badge-q, .badge-a {
        margin-right: 10px; /* スマホでは間隔を少し狭く */
    }
    /* フォームの余白調整 */
    .contact-section { padding: 40px 20px; }
}

/* =========================================
   11. その他の機能・パーツ（ポップアップ修正版）
   ========================================= */

/* --- 持ち物リスト用ポップアップ --- */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow-y: auto; 
    align-items: flex-start;
    justify-content: center;
    padding: 50px 0; 
}
.modal-content {
    position: relative;
    width: 90%; 
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    background-color: transparent;
}

.modal-image {
    width: 100%;
    height: auto; 
    border: 2px solid #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    display: block;
}

.close-btn {
    position: fixed;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    background: rgba(0,0,0,0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 46px;
}

.close-btn:hover {
    color: #ccc;
    background: rgba(0,0,0,0.8);
}

/* =========================================
   右下の追従ボタン群（縦並び）
   ========================================= */

/* ボタン全体を囲むコンテナ（これを画面右下に固定します） */
#floating-nav-container {
    position: fixed;
    bottom: 20px;          /* 下からの距離 */
    right: 20px;           /* 右からの距離 */
    z-index: 9999;         /* 最前面に表示 */
    display: flex;
    flex-direction: column; /* 縦並びにする */
    gap: 16px;             /* ボタン同士の間隔 */
    align-items: center;   /* 中央揃え */
}

/* 共通のボタンデザイン（クラスで指定） */
.floating-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ▼▼▼ 変更箇所：サイズを大きくしました ▼▼▼ */
    width: 160px;
    height: 160px;
    
    border-radius: 50%;        /* まんまるにする */
    
    /* ▼▼▼ 変更箇所：色を変更しました (#6FA390) ▼▼▼ */
    background-color: #6FA390; 
    
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    text-decoration: none !important;
    transition: all 0.3s ease;
    
    /* 画像設定のリセット（念のため） */
    background-image: none !important;
}

/* 元々のIDの中にいるaタグにもスタイルを適用 */
#area-menu-btn a {
    /* floating-btnと同じスタイルが適用されるようにする */
    /* ここでは個別の位置指定を解除します */
    position: static !important; 
}

/* ボタンの中の文字 */
.floating-btn .btn-label {
    color: #fff;
    /* ▼▼▼ 変更箇所：ボタンに合わせて文字も少し大きくしました ▼▼▼ */
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    display: block;
}

/* マウスを乗せた時の動き */
.floating-btn:hover {
    /* ▼▼▼ 変更箇所：緑色に合わせて少し濃い緑にしました ▼▼▼ */
    background-color: #5a8575;
    
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* スマホでの調整 */
@media screen and (max-width: 768px) {
    #floating-nav-container {
        bottom: 10px;
        right: 10px;
        gap: 10px;
    }
    .floating-btn {
        /* スマホでは160pxだと大きすぎるため、少し抑えめに100pxにしています */
        /* 必要であればここも160pxに変更してください */
        width: 100px;
        height: 100px;
    }
    .floating-btn .btn-label {
        font-size: 1rem;
    }
}
/* =========================================
   お客様の声の円形イラスト
   ========================================= */
/* 画像を囲む枠（位置調整） */
.voice-img-wrap {
    text-align: center;  /* 中央寄せ */
    margin-bottom: 15px; /* タイトルとの間隔 */
}

/* 画像本体のスタイル */
.voice-img-wrap img {
    width: 160px;       /* 画像の幅（お好みで調整してください） */
    height: 160px;      /* 画像の高さ（幅と同じ値にして正方形にします） */
    
    border-radius: 50%; /* これで円形になります */
    object-fit: cover;  /* 画像が歪まないように自動トリミングします */
    
    /* お好みで枠線をつけても可愛いです */
    border: 1px solid #6FA390; /* 緑の枠線（不要なら削除） */
    background-color: #fff;    /* 背景を白に（透過画像の場合などに有効） */
}

/* スマホでの調整（少し小さくする） */
@media screen and (max-width: 768px) {
    .voice-img-wrap img {
        width: 100px;
        height: 100px;
    }
}

/* =========================================
   ヘッダーの幅制限解除（フルワイド化）
   ========================================= */

/* ヘッダーの中にある .container クラスだけを狙い撃ちして書き換える */
header .container,
.navbar .container {
    max-width: none !important; /* 幅の制限（1200px）を解除 */
    width: 100% !important;     /* 画面いっぱいにする */
    padding: 0 !important;      /* 左右の余白もゼロにする（必要に応じて調整） */
}

/* ついでに、メニューバー自体の背景画像エリアも広げる */
.nav-list-container {
    width: 100% !important;
    max-width: none !important;
}
  
  
  /* =========================================
   追従ボタン（Q&A・開講日）の設定
   ========================================= */

/* ボタン全体を囲むコンテナ */
#floating-nav-container {
    position: fixed;
    bottom: 20px;          /* 下からの距離 */
    right: 20px;           /* 右からの距離 */
    z-index: 9999;         /* 最前面に表示 */
    display: flex;
    flex-direction: column; /* 縦並び */
    gap: 16px;             /* ボタン間の隙間 */
    align-items: center;
}

/* ボタン共通デザイン */
.floating-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;          /* PCサイズ */
    height: 160px;
    border-radius: 50%;    /* 丸くする */
    background-color: #6FA390; /* 緑色 */
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* ボタン内の文字 */
.floating-btn .btn-label {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    display: block;
}

/* ホバー時の動き */
.floating-btn:hover {
    background-color: #5a8575;
    transform: scale(1.05);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    #floating-nav-container {
        bottom: 10px;
        right: 10px;
        gap: 10px;
    }
    .floating-btn {
        width: 100px;      /* スマホサイズ */
        height: 100px;
    }
    .floating-btn .btn-label {
        font-size: 1rem;
    }
}