/* =================================================================
   
   スマートフォン表示用のスタイルシート (contents-sp.css)
   
   ================================================================= */

/* =========================
   共通リセット・共通スタイル
   ========================= */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   ul, li { list-style: none; }
   a, p { text-decoration: none; color: #000; margin: 0; padding: 0; }
   h2, h3 { margin: 0; padding: 0; }
   body {
       -webkit-text-size-adjust: 100%; /* スマホで勝手に文字サイズが変わるのを防ぐ */
   }
   
   body.page-template-page-elementary #page {
       overflow: visible;
   }
   
   /* --- 汎用テキストクラス --- */
   .text-center { text-align: center; }
   .text-bold { font-weight: bold; }
   .text-orange { color: #f7941d; }
   
   /* PC表示でのみ使用する要素（改行など）をスマホでは非表示にする */
   .pc-only {
       display: none !important;
   }
   
   /* SPで表示する要素 */
   .sp-only {
       display: block;
   }
   
   /* =========================
      ページ上部メインビジュアル
      ========================= */
   .elementary-page-hero {
       height: 300px; /* SP: 高さをPC版(600px)から調整 */
       background-image: url('/wp-content/themes/kasai_top/img/elementary_top.png');
       background-size: cover;
       background-position: center;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       width: 100vw;
       margin-left: calc(50% - 50vw);
   }
   
   /* 画像下の白い曲線 */
   .elementary-page-hero::after {
       content: '';
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       bottom: -100px; /* SP: 曲線のサイズを調整 */
       width: 200%;
       height: 120px;  /* SP: 曲線のサイズを調整 */
       background: #fff;
       border-radius: 50%;
   }
   
   .middle-page-hero {
       width: 100%;
       height: 300px; /* 画像の高さに応じて調整してください */
       /* 頂いた画像名 elementary_top を背景画像として指定します */
       background-image: url('/wp-content/themes/kasai_top/img/middle_top.png');
       background-size: cover;
       background-position: center;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden; /* はみ出す曲線を隠します */
   }
   
   /* 画像下の白い曲線 */
   .middle-page-hero::after {
       content: '';
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       bottom: -100px; /* SP: 曲線のサイズを調整 */
       width: 200%;
       height: 120px;  /* SP: 曲線のサイズを調整 */
       background: #fff;
       border-radius: 50%;
   }
   
   .high-page-hero {
       width: 100%;
       height: 300px; /* 画像の高さに応じて調整してください */
       /* 頂いた画像名 elementary_top を背景画像として指定します */
       background-image: url('/wp-content/themes/kasai_top/img/high_top.png');
       background-size: cover;
       background-position: center;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden; /* はみ出す曲線を隠します */
   }
   
   /* 画像下の白い曲線 */
   .high-page-hero::after {
       content: '';
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       bottom: -100px; /* SP: 曲線のサイズを調整 */
       width: 200%;
       height: 120px;  /* SP: 曲線のサイズを調整 */
       background: #fff;
       border-radius: 50%;
   }
   
   /* メインビジュアルのタイトル */
   .page-hero-title {
       background: #f7941d;
       color: #fff;
       font-size: 20px;   /* 24pxから25pxに統一 */
       font-weight: bold;
       letter-spacing: 1.5px;
       font-family: "M PLUS 1p", sans-serif;
       padding: 10px 30px; /* SP: テキスト周りの余白を調整 */
       position: relative;
       z-index: 2;
       text-align: center; /* SP: 1行が長くなる場合に備えて中央寄せ */
   }
   
   /* =========================
      共通タイトル下線
      ========================= */
   .title-underline {
       margin-top: 20px; /* SP: タイトルとの間隔を少し詰める */
       height: 4px;      /* SP: 線の高さを少し細く */
       gap: 8px;
       display: flex;
       justify-content: center;
   }
   .title-underline .line {
       display: inline-block;
       height: 100%;
       border-radius: 0;
   }
   /* SP: 下線の長さを少し短く調整 */
   .title-underline .line:nth-child(1) { width: 35px; background: #fd9914; }
   .title-underline .line:nth-child(2) { width: 35px; background: #00a0ea; }
   .title-underline .line:nth-child(3) { width: 35px; background: #ffe066; }
   
   
   /* =========================
      コース概要（About）
      ========================= */
   .course-about-inner { padding: 60px 20px; }
   .course-about-title {
       font-size: 25px;
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       margin: 0 auto 40px;
       text-align: center;
   }
   .course-about-box {
       background: #fef8e4; /* 画像に合わせて、背景に薄い黄色を追加 */
       border-radius: 5px; /* 画像に合わせて、角を丸くします */
       padding: 30px 20px;
       margin-bottom: 30px;
       text-align: left; /* 画像に合わせて、中の文章を中央揃えに */
   }
   .course-about-box p {
       font-size: 15px;
       line-height: 2;
       letter-spacing: 1.2px; /* 文章が読みやすくなるように行間を調整 */
   }
   
   /* =========================
      中学進学準備（Ready）
      ========================= */
   .course-ready-wrap {
       padding: 60px 20px;
   }
   
   .course-ready-title {
       font-size: 25px; /* 24pxから25pxに統一 */
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       margin: 0 auto 40px;
       text-align: center;
   }
   
   .course-ready-list {
       display: flex;
       flex-direction: column;
       gap: 30px;
   }
   
   /* 各カードの共通の形や配置に関するスタイル */
   .course-ready-item {
       background: #fff;
       border-radius: 5px;
       padding: 30px;
       margin: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   .course-ready-icon {
       margin-right: 0;
       margin-bottom: 25px;
   }
   .course-ready-icon img {
       width: 100px;
       height: 100px;
   }
   
   .course-ready-content {
       width: 100%;
       text-align: center;
   }
   
   .course-ready-content h3 {
       color: #fff;
       font-size: 20px;
       font-weight: bold;
       width: 295px;
       padding: 12px 15px;
       border-radius: 10px;
       display: inline-block;
       margin-bottom: 25px;
       text-align: left;
   }
   
   .course-ready-item p {
       font-size: 15px;
       line-height: 1.8;
       text-align: left;
   }
   
   /* --- ここから各カードの「色」に関するスタイルを個別に指定します --- */
   
   /* 1番目のカード（オレンジ色）のスタイル */
   .course-ready-item:nth-child(1) {
       border: 3px solid #f7941d;
   }
   .course-ready-item:nth-child(1) .course-ready-content h3 {
       background: #f7941d;
   }
   
   /* 2番目のカード（青色）のスタイル */
   .course-ready-item:nth-child(2) {
       border: 3px solid #00a0ea;
   }
   .course-ready-item:nth-child(2) .course-ready-content h3 {
       background: #00a0ea;
   }
   
   /* 3番目のカード（黄色）のスタイル */
   .course-ready-item:nth-child(3) {
       border: 3px solid #ff716A;
   }
   .course-ready-item:nth-child(3) .course-ready-content h3 {
       background: #ff7143;
   }
   
   /* 4番目のカード（水色）のスタイル */
   .course-ready-item:nth-child(4) {
       border: 3px solid #16C459;
   }
   .course-ready-item:nth-child(4) .course-ready-content h3 {
       background: #16C459;
   }
   
   /* =========================
      ポイント（Point）
      ========================= */
   .course-point-wrap {
       padding: 80px 20px;
       background: #f7941d;
   }
   
   .course-point-inner {
       width: 100%;
       height: auto;
       padding: 40px 20px;
       background: #fff;
       border-radius: 5px;
   }
   
   .course-point-title {
       font-size: 25px;
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       margin-bottom: 100px;
       text-align: center;
   }
   
   .course-point-list {
       display: flex;
       flex-direction: column;
       gap: 70px;
       list-style: none;
       padding: 0;
       margin: 0;
   }
   
   .course-point-item {
       /* --item-color という名前で、各ポイントのテーマカラーを管理する変数を作成します */
       --item-color: #f7941d; /* デフォルトの色はオレンジ */
   
       width: 100%;
       padding: 90px 20px 30px;
       margin-bottom: 70px;
       background: #fff;
       border: 3px solid var(--item-color); /* 変数で色を指定 */
       border-radius: 5px;
       position: relative;
       text-align: center;
   }
   
   /* 2つ目のポイントの色を水色に変更 */
   .course-point-item:nth-child(2) {
       --item-color: #53c1e8; /* ここで変数の値を上書きするだけ */
   }
   
   .course-point-icon {
       position: absolute;
       top: -70px;
       left: 50%;
       transform: translateX(-50%);
       width: 130px;
       height: 130px;
       background: var(--item-color); /* 変数で色を指定 */
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 3px solid #fff;
   }
   
   .course-point-icon img {
       width: 55%;
       height: auto;
   }
   
   .course-point-content h3 {
       font-size: 20px;
       font-weight: bold;
       position: relative;
       padding-bottom: 15px;
       margin-bottom: 20px;
       line-height: 1.2;
       letter-spacing: 1.2px;
   }
   
   .course-point-content h3::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 40px;
       height: 3px;
       background: var(--item-color); /* 変数で色を指定 */
   }
   
   .course-point-content p {
       font-size: 15px;
       text-align: left;
       line-height: 2;
       letter-spacing: 1.2px;
   }
   
   /* =========================
      中学受験対策（zyuken）
      ========================= */
   .course-zyuken-wrap {
       background-color: #fff;
       padding: 60px 20px 0 20px;
   }
   .zyuken-bg {
       display: block;
   }
   .zyuken-inner {
       padding: 0;
   }
   .zyuken-title {
       font-size: 25px; /* 24pxから25pxに統一 */
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       margin-bottom: 40px;
       text-align: center;
   }
   .zyuken-block {
       max-width: 100%;
   }
   .zyuken-list {
       padding: 0;
   }
   
   /* 各項目（li）のスタイル */
   .zyuken-item {
       margin-bottom: 40px;
   }
   
   /* 各項目の見出し（h3）のスタイル */
   .zyuken-item h3 {
       font-size: 20px;
       font-weight: bold;
       margin-bottom: 40px;
       position: relative;   /* 点を配置するための基準位置 */
       padding-left: 20px;   /* 点を表示するための左側のスペース */
       line-height: 1.4;     /* 点とテキストの縦位置を揃えるため調整 */
   }
   
   /* h3の先頭に表示する点（::before）のスタイル */
   .zyuken-item h3::before {
       content: '';
       display: block;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background-color: currentColor; /* h3の文字色と同じ色になります */
       position: absolute;
       top: 50%; /* 上下中央に配置 */
       left: 0;
       transform: translateY(-50%); /* 中央揃えの微調整 */
   }
   
   .zyuken-item p {
       font-size: 15px;
       line-height: 1.8;
       letter-spacing: 1.2px;
       
   }
   
   /* 1つ目の項目（私立）の見出しの色 */
   .zyuken-item:nth-child(1) h3 {
       color: #f7941d;
   }
   
   /* 2つ目の項目（公立）の見出しの色 */
   .zyuken-item:nth-child(2) h3 {
       color: #00a0ea;
   }
   
   .zyuken-item:nth-child(3) h3 {
       color: #ff716a;
   }
   
   /* =========================
      時間割（Schedule）
      ========================= */
   .course-schedule-wrap {
       background-color: #fffde2;
       padding: 60px 20px;
   }
   
   .course-schedule-title {
       font-size: 25px; /* 24pxから25pxに統一 */
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       text-align: center;
       margin: 0 auto 70px;
   }
   
   /* ボックスを縦に並べるための設定 */
   .course-schedule-container {
       display: flex;
       flex-direction: column; /* ここで縦積みに変更 */
       align-items: center; /* 中央に配置 */
       gap: 70px; /* ボックス間の隙間 */
   }
   .schedule-column-left,
   .schedule-column-right {
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 70px; /* ボックス間の隙間 */
   }
   
   /* 各時間割ボックスの共通スタイル */
   .course-schedule-box {
       background: white;
       border-radius: 5px;
       padding: 60px 20px 30px;
       position: relative;
       width: 100%; /* スマホでは横幅いっぱいに */
       max-width: 550px; /* PC版の幅を最大値として設定 */
       box-sizing: border-box;
       font-family: "M PLUS 1p", sans-serif;
       font-weight: bold;
   }
   
   /* 飾りカッコのスタイル */
   .course-schedule-box .bracket {
       position: absolute;
       width: 25px; /* スマホ用に少し小さく */
       height: 25px;
       border-style: solid;
       border-width: 0;
   }
   .course-schedule-box.weekday .bracket,
   .course-schedule-box.saturday .bracket {
       border-color: #f7941d;
   }
   .course-schedule-box.seasonal .bracket {
       border-color: #00a0ea;
   }
   .course-schedule-box .bracket.tl {
       top: 0; left: 0;
       border-top-width: 4px; border-left-width: 4px;
   }
   .course-schedule-box .bracket.tr {
       top: 0; right: 0;
       border-top-width: 4px; border-right-width: 4px;
   }
   .course-schedule-box .bracket.bl {
       bottom: 0; left: 0;
       border-bottom-width: 4px; border-left-width: 4px;
   }
   .course-schedule-box .bracket.br {
       bottom: 0; right: 0;
       border-bottom-width: 4px; border-right-width: 4px;
   }
   
   /* ボックス上部のヘッダー */
   .course-schedule-box .box-header {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translate(-50%, -50%);
       padding: 12px 30px 25px 30px; /* スマホ用に余白を調整 */
       color: white;
       font-size: 20px; /* スマホ用に文字サイズを調整 */
       border-radius: 10px;
       clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 55% 80%, 50% 100%, 45% 80%, 0% 80%);
       min-width: 170px; /* 最小幅を調整 */
       text-align: center;
   }
   .course-schedule-box .box-header.orange {
       background-color: #f7941d;
   }
   .course-schedule-box .box-header.blue {
       background-color: #00a0ea;
   }
   
   /* 時間割リスト */
   .course-schedule-box ul {
       list-style: none;
       padding: 0;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: fit-content;
   }
   .course-schedule-box li {
       display: flex;
       align-items: center;
       gap: 15px; /* ラベルと時間の間の余白 */
   }
   
   /* ラベル（1限、2限...） */
   .course-schedule-box .label {
       background-color: #6ec6e9;
       color: white;
       padding: 8px 25px 8px 15px; /* スマホ用に余白を調整 */
       min-width: 90px;
       text-align: center;
       font-size: 14px;
       clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
   }
   
   /* 時間（17:00-18:20...） */
   .course-schedule-box .time {
       font-size: 15px;
       color: #333;
       font-weight: bold;
   }
   
   /* =========================
      料金（Price）
      ========================= */
   .course-price-section {
       padding: 60px 20px;
   }
   .course-price-title {
       font-size: 25px; /* 24pxから25pxに統一 */
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       margin: 0 auto 40px;
       text-align: center;
   }
   
   /* 各コースのブロック */
   .course-price-block {
       margin: 40px 0; /* まず、各ブロックの上下に基本的な余白を設定します */
   }
   
   /* 最初の料金ブロック（1対1）の下にだけ、追加で余白を設定 */
   .course-price-section .course-price-block:first-of-type {
       margin-bottom: 80px; /* ★★★ これで「1対1」のブロックの下にだけ大きな余白ができます ★★★ */
   }
   
   /* コース名（1対1, 1対2）のスタイル */
   .course-title {
       font-size: 22px;
       font-weight: bold;
       margin: 0 0 30px;
       padding: 10px 0;
       border-top: 2px solid;
       border-bottom: 2px solid;
       text-align: center;
   }
   .course-title.orange {
       color: #f7941d;
       border-color: #f7941d;
   }
   .course-title.blue {
       color: #2196f3;
       border-color: #2196f3;
       margin-top: 60px;
   }
   
   /* テーブルを囲むラッパーで横スクロールを設定 */
   .course-price-table-wrap {
       overflow-x: auto; /* ★★★ この行で横スクロールを有効にします ★★★ */
       -webkit-overflow-scrolling: touch; /* iOSでスムーズなスクロールを有効に */
   }
   
   /* 料金テーブル */
   .course-price-table {
       min-width: 600px;
       width: 100%;
       border-collapse: collapse;
       font-family: "M PLUS 1p", sans-serif;
   }
   
   .course-price-table th,
   .course-price-table td {
       border: 1px solid #ccc;
       padding: 12px 10px;
       text-align: center;
       font-weight: bold;
       white-space: nowrap;
   }
   
   /* テーブルヘッダーのスタイル */
   .course-price-table thead th {
       color: #fff;
       font-size: 14px;
   }
   .course-price-table.orange thead th {
       background: #f7941d;
   }
   .course-price-table.blue thead th {
       background: #2196f3;
   }
   .course-price-table thead th:first-child {
       background: #fff;
   }
   
   /* テーブル本体のセルのスタイル */
   .course-price-table tbody td {
       background: #fff;
       font-size: 16px;
   }
   .course-price-table tbody td:first-child {
       background: #fffbe7;
       font-size: 14px;
   }
   .course-price-table.orange,
   .course-price-table.orange th,
   .course-price-table.orange td {
       border-color: #f7941d;
   }
   .course-price-table.blue,
   .course-price-table.blue th,
   .course-price-table.blue td {
       border-color: #2196f3;
   }
   
   /* HTMLの構造はそのままに、CSSだけでテーブルの親を変更する */
   .course-price-block > .course-price-table {
       display: block; /* 本来のテーブルのレイアウトを維持 */
       border-spacing: 0;
   }
   .course-price-block {
       display: contents; /* この要素のボックスをなくし、子要素を昇格させる */
   }
   
   /* =========================
      入会時諸費用（Enrollment）
      ========================= */
   
   /* 外側ラッパー */
   .enroll-outer {
       background: #fff;
       padding: 40px 0;
   }
   
   /* 薄黄色い背景のエリア */
   .course-enroll-section {
       background: #fffde2;
       margin: 0 20px; /* スマホは左右の余白をなくす */
       padding: 30px 0;
       border-radius: 5px;
       box-sizing: border-box;
   }
   
   /* タイトル */
   .course-enroll-title {
       font-size: 25px; /* 22pxから25pxに統一 */
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       color: #f7941d;
       text-align: center;
       margin: 0 0 30px; /* 下マージンを調整 */
       padding: 10px 0; /* 上下に余白を追加 */
       border-top: 2px solid #f7941d;
       border-bottom: 2px solid #f7941d;
   }
   
   /* インナーラッパー */
   .enroll-inner {
       padding: 0 15px 30px; /* 上パディングをなくし、下パディングを追加 */
       letter-spacing: 0.05em;
   }
   
   /* 番号付きリスト */
   .course-enroll-list {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   .course-enroll-list li {
       margin-bottom: 30px;
   }
   
   /* 各リスト項目のヘッダー部分 */
   .enroll-item-header {
       display: flex;
       align-items: flex-start;
       margin-bottom: 10px;
   }
   
   /* 番号 (1) など */
   .enroll-num {
       color: #f7941d;
       font-weight: bold;
       font-size: 18px;
       margin-right: 0.7em;
       font-family: "M PLUS 1p";
       flex-shrink: 0;
   }
   
   /* メインテキスト */
   .enroll-main {
       font-size: 16px;
       font-weight: bold;
       font-family: "M PLUS 1p";
       line-height: 1.5;
   }
   
   /* 説明文 */
   .enroll-desc {
       font-size: 14px;
       color: #222;
       margin: 0 0 0 40px; /* 番号分だけ左にインデント */
       line-height: 1.8;
   }
   .enroll-desc.note {
       margin-top: 8px;
       color: #666;
       font-size: 13px;
   }
   
   /* 「その他」セクション */
   .course-enroll-others {
       margin: 40px 0 20px;
   }
   .enroll-others-title {
       color: #f7941d;
       font-weight: bold;
       font-size: 16px;
       padding-bottom: 8px;
       margin-bottom: 20px;
       border-bottom: 2px solid #f7941d;
   }
   
   /* 費用のお支払いについて */
   .course-enroll-payment-box {
       background: #fff;
       border-radius: 6px;
       padding: 25px 20px;
       margin: 0 15px;
       box-sizing: border-box;
   }
   .enroll-payment-title {
       color: #f7941d;
       font-weight: bold;
       font-size: 16px;
       margin: 0 0 20px;
       padding: 0 0 8px;
       border-bottom: 2px solid #f7941d;
   }
   .enroll-payment-desc {
       font-size: 15px;
       color: #222;
       line-height: 2;
   }
   
   /* =========================
       合格校一覧（Result）
       ========================= */
   .course-result-section { 
       padding: 60px 20px; 
       background: #f3f3f3;
   }
   .course-result-title {
       font-size: 25px;
       font-family: "M PLUS 1p", sans-serif;
       font-weight: bold;
       margin-bottom: 40px;
       letter-spacing: 1.5px;
       text-align: center;
   }
   
   /* =========================
      生徒・保護者の声（Voice）
      ========================= */
   
   /* セクション全体 */
   .course-voice-section {
       padding: 60px 20px;
       background: #fff; /* 背景色を白に設定 */
   }
   
   /* 「生徒・保護者の声」タイトル */
   .course-voice-title {
       font-size: 25px;
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       letter-spacing: 1.5px;
       text-align: center; /* タイトルを中央揃え */
       margin-bottom: 40px;
   }
   
   /* 「声」ボックスを縦に並べるための設定 */
   .course-voice-list {
       display: flex;
       flex-direction: column; /* ボックスを縦積みに */
       gap: 40px; /* ボックス間の隙間 */
   }
   .course-voice-box {
       background: #fff1024d; /* 画像に合わせた薄黄色い背景 */
       border-radius: 5px;  /* 角を少し丸くする */
       width: 100%;         /* スマホでは横幅いっぱいに */
       padding: 20px;
       box-sizing: border-box;
       text-align: center;  /* 中の「保護者様」ラベルを中央寄せにするため */
   
       /* --- スクロール設定 --- */
       max-height: 345px; /* これ以上高くなったらスクロールさせる */
       overflow-y: auto;  /* 縦方向に内容がはみ出たらスクロールバーを表示 */
       -webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
   }
   
   /* 「保護者様」のオレンジ色のラベル */
   .voice-label {
       background: #f7941d;
       color: white;
       font-weight: bold;
       font-size: 20px; /* スマホ用に文字サイズを調整 */
       padding: 8px 40px;
       border-radius: 5px;
       display: inline-block; /* 幅を文字数に合わせる */
       width: 310px; /* もし他の設定で幅が100%になっていたら、それを打ち消す */
   }
   
   /* 感想の本文テキスト */
   .voice-text {
       font-size: 15px;
       line-height: 1.8;
       text-align: left; /* 本文は左揃えにする */
       white-space: pre-line; /* WordPressの編集画面での改行を反映させる */
   }
   
   /* =========================
      よくあるご質問（FAQ）
      ========================= */
   
   /* セクション全体（薄黄色の背景エリア） */
   .course-faq-section {
       padding: 60px 20px;
       background: #fffde2; /* PC版に合わせて背景色を設定 */
   }
   
   /* 「よくあるご質問」タイトル */
   .course-faq-title {
       font-size: 25px; /* 24pxから25pxに統一 */
       font-weight: bold;
       font-family: "M PLUS 1p", sans-serif;
       text-align: center;
       margin-bottom: 40px;
   }
   
   /* 質問リスト全体 */
   .course-faq-list {
       display: flex;
       flex-direction: column;
       gap: 25px; /* 各質問ボックスの間の隙間 */
   }
   
   /*
    * 各質問ボックス（白いカード）
    * heightを指定していないため、中の文章量に応じて自動で高さが変わります。
    */
   .course-faq-box {
       background: #fff;
       border-radius: 5px;
       padding: 20px;
       width: 100%;
       box-sizing: border-box;
   }
   
   /* Q（質問）の行 */
   .course-faq-q {
       display: flex;
       align-items: flex-start; /* アイコンとテキストの縦位置を上揃えに */
       margin-bottom: 15px;
   }
   
   /* A（回答）の行 */
   .course-faq-a {
       display: flex;
       align-items: flex-start; /* アイコンとテキストの縦位置を上揃えに */
       border-top: 2px solid #f7941d; /* 質問と回答の間のオレンジ色の線 */
       padding-top: 15px;
   }
   
   /* QとAの丸いアイコンの共通スタイル */
   .course-faq-icon {
       display: flex;
       justify-content: center;
       align-items: center;
       color: #fff;
       font-weight: bold;
       font-size: 20px;
       width: 35px;   /* PC版(40px)より少し小さく */
       height: 35px;
       border-radius: 50%; /* これで正円になります */
       margin-right: 15px;
       flex-shrink: 0; /* アイコンが文章に押されて潰れるのを防ぐ */
   }
   
   /* Qアイコンの背景色（青） */
   .course-faq-icon.q {
       background: #00b6f0;
   }
   
   /* Aアイコンの背景色（オレンジ） */
   .course-faq-icon.a {
       background: #f7941d;
   }
   
   /* 質問のテキスト */
   .course-faq-question {
       font-weight: bold;
       font-size: 16px;
       line-height: 1.5;
   }
   
   /* 回答のテキスト */
   .course-faq-answer {
       font-size: 15px;
       line-height: 1.8;
       color: #222;
   }
   
   /*-list-*/
   
   .blog-list {
       max-width: 95%;
       margin: 0 auto;
       font-family: 'Noto Sans JP', sans-serif;
   }
   
   .blog-list-title {
       font-size: 2.5rem;
       margin-bottom: 2rem;
       color: #333;
       text-align: center;
   }
   
   .blog-card {
       margin-bottom: 2rem;
       border: 1px solid #ddd;
       border-radius: 8px;
       overflow: hidden;
       background: #fff;
       transition: box-shadow 0.3s;
       position: relative;
   }
   
   .blog-card-link {
       text-decoration: none;
       color: inherit;
       height: 100%;
       display: block;
   }
   
   
   
   .blog-card-thumbnail {
       width: 100%;
       height: 200px;
   
       & img {
           object-fit: contain;
           height: 100% !important;
       }
   }
   
   .blog-card:hover {
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   .blog-card-thumbnail img {
       width: 100%;
       height: auto;
       object-fit: cover;
   }
   
   .blog-card-content {
       box-sizing: border-box;
       padding: 40px 20px;
       flex-grow: 1;
       flex-grow: 1;
   }
   
   .blog-card-title {
       font-size: 2rem;
       color: #222;
       margin-bottom: 15px;
   }
   
   .blog-card-excerpt {
       color: #555;
       font-size: 1rem;
       margin-bottom: 1rem;
   }
   
   .blog-card-meta {
       font-size: 0.9rem;
       color: #999;
   }
   
   .blog-pagination {
       text-align: center;
       margin-top: 3rem;
   }
   
   /*-/list-*/
   
   /*-shosai-*/
   
   
   .single-post {
       max-width: 800px;
       margin: 0 auto;
       padding: 2rem;
       font-family: 'Noto Sans JP', sans-serif;
   }
   
   .post-thumbnail img {
       width: 100%;
       height: auto;
       border-radius: 8px;
       margin-bottom: 1.5rem;
   }
   
   .post-title {
       font-size: 2rem;
       margin-bottom: 0.5rem;
       color: #333;
   }
   
   .post-meta {
       font-size: 0.9rem;
       color: #666;
       margin-bottom: 2rem;
   }
   
   .post-content {
       font-size: 1rem;
       line-height: 1.8;
       color: #444;
   }
   
   .post-navigation {
       display: flex;
       justify-content: space-between;
       margin-top: 3rem;
   }
   
   .post-navigation a {
       color: #007bff;
       text-decoration: none;
   }
   
   /*-shosai-*/
   
   /*--about-list--*/
   .about-list {
       display: flex;
       flex-wrap: wrap;
       width: 90%;
       margin: 0 auto;
   }
   
   .about-card {
       margin-right: 4%;
       margin-bottom: 20px;
       width: 48%;
   
       &:nth-child(2n) {
           margin-right: 0;
       }
   }
   
   .about-card-link {
       width: 100%;
       display: block;
   }
   
   .about-card-thumbnail {
       width: 100%;
       height: 170px;
   
       & img {
           width: 100%;
           height: 100%;
           aspect-ratio: 1/1;
           object-fit: cover;
       }
   }
   
   .about-card-content {
       margin-top: 20px;
   }
   
   .about-card-title {
       font-size: 16px;
       text-align: center;
       margin-bottom: 15px;
       padding-bottom: 10px;
       border-bottom: 1px solid #fd9915;
   }
   
   .about-card-excerpt {
       text-align: left;
       color: #fd9915;
       font-size: 14px;
   }
   
   /*--/about-list--*/
   
   /* =================================================================
      年間スケジュール (page-middle.php) - SP
   ================================================================= */
   
   /* --- [SP] セクション全体 --- */
   .year-schedule-wrap {
       padding: 60px 20px; /* 上下の余白をSP用に調整 */
   }
   
   /* --- [SP] タイトル --- */
   .year-schedule-title {
       text-align: center; /* タイトルを中央揃え */
       font-size: 25px;
       font-weight: bold;
       line-height: 1.6;
       margin-bottom: 40px; /* サブタイトルとの間の隙間 */
   }
   
   .schedule-subtitle {
       text-align: center; /* サブタイトルを中央揃え */
       font-size: 25px;
       font-weight: bold;
       line-height: 1.6;
       color: #f7941d; /* 文字色をオレンジに */
       padding: 15px 0; /* 上下の罫線とテキストの間の余白 */
       margin-bottom: 40px; /* スケジュール本体との間の隙間 */
       border-top: 2px solid #f7941d;
       border-bottom: 2px solid #f7941d;
   }
   
   
   /* --- [SP] スケジュール表のレイアウト --- */
   /* PC版の段組み(grid)を解除 */
   .schedule-row {
       display: block; /* gridを解除して縦並びのリストにする */
       margin-bottom: 24px;
   }
   .schedule-row:last-child {
       margin-bottom: 0;
   }
   
   /* 各月(li)のコンテナ */
   .schedule-row li {
       display: flex; /* 「月のヘッダー」と「イベント」を横並びにする */
       align-items: stretch; /* 高さが違う場合も、コンテンツの高さを揃える */
       gap: 1px; /* ★追加: ヘッダーと詳細エリアの間に「線」を作るための隙間 */
   }
   
   
   
   
   
   /* PC版の月の重なり順やマージンをリセット */
   .schedule-row li,
   .schedule-row li:not(.month-september):not(.month-march) {
       z-index: auto;
       margin-right: 0;
   }
   
   
   /* --- [SP] 月のヘッダー（h4）--- */
   .schedule-row h4 {
       flex-shrink: 0; /* 幅が狭くなっても縮まないようにする */
       min-width: 90px; /* ヘッダーの横幅を確保 */
       padding: 15px 5px;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 22px;
       color: #fff; /* 文字色を白に */
       clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); /* 右向き矢印の形 */
       /* 背景色は下の交互指定で設定 */
   }
   
   /* ヘッダーの背景色を交互に設定 (PC版とは奇数/偶数が逆) */
   .schedule-row li:nth-child(odd) h4 {
       background-color: #6dcbe5; /* 奇数番目(4月,6月..)は薄い青 */
   }
   .schedule-row li:nth-child(even) h4 {
       background-color: #00a0ea; /* 偶数番目(5月,7月..)は濃い青 */
   }
   
   .schedule-row h4 span {
       font-size: 18px;
   }
   
   
   /* --- [SP] イベント詳細エリア --- */
   .schedule-items {
       flex-grow: 1; /* 残りの幅を目一杯使う */
       padding: 20px 15px;
       min-height: auto; /* PC用の高さをリセット */
       position: relative; /* 縦矢印を配置するための基準点 */
   }
   
   .schedule-items:nth-child(odd) {
       background-color: #f3f3f3;
   }
   .schedule-items:nth-child(even) {
       background-color: #fff;
   }
   
   
   /* --- [SP] イベントリスト --- */
   .schedule-items ul {
       display: block; /* 縦に並べる */
       padding: 0;
       margin: 0;
   }
   
   .schedule-items li {
       writing-mode: horizontal-tb; /* PC用の縦書きを解除して、通常の横書きに戻す */
       font-size: 15px;
       line-height: 1.8;
       background: none;
       display: flex;
       align-items: flex-start;
       padding: 0;
       margin: 0;
   }
   .schedule-items li:not(:last-child) {
       margin-bottom: 0.8em; /* 各イベントの間の隙間 */
   }
   
   /* イベントの頭に付くオレンジのドット */
   .schedule-items li::before {
       content: '●';
       color: #f7941d;
       font-size: 10px;
       margin-right: 0.7em;
       writing-mode: horizontal-tb;
       /* 位置を微調整 */
       position: static;
       transform: none;
       display: inline-block;
       padding-top: 0.4em;
   }
   
   
   /* --- [SP] 5月にある縦の矢印 --- */
   .has-arrow .schedule-arrow-pc {
       display: block; /* PCでは横矢印だったものを、SPでは縦矢印として再利用 */
       position: absolute;
       /* 矢印の位置とサイズ */
       top: 15px;
       right: 15px;
       bottom: 15px;
       width: 2px;
       height: auto;
       background: #f7941d; /* 矢印の線の色 */
   }
   
   /* 矢印の先端（上向き▲と下向き▼）の共通スタイル */
   .has-arrow .schedule-arrow-pc::before,
   .has-arrow .schedule-arrow-pc::after {
       content: '';
       position: absolute;
       width: 8px;  /* 先端のサイズ */
       height: 8px; /* 先端のサイズ */
       border-style: solid;
       border-color: #f7941d;
       border-width: 0 2px 2px 0; /* 線の太さ */
       left: -3px;  /* 横位置 */
   }
   
   /* 上向き▲の個別スタイル */
   .has-arrow .schedule-arrow-pc::before {
       top: -5px;   /* 縦位置 */
       transform: rotate(-135deg); /* 形 */
   }
   
   /* 下向き▼の個別スタイル */
   .has-arrow .schedule-arrow-pc::after {
       bottom: -5px;/* 縦位置 */
       transform: rotate(45deg); /* 形 */
   }
   
   /* =================================================================
　個別指導SUNSについて (page-about.php)
================================================================= */

.suns-about-page-hero {
    height: 300px; /* SP: 高さをPC版(600px)から調整 */
    background-image: url('/wp-content/themes/kasai_top/img/suns_about_top.png');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* 画像下の白い曲線 */
.suns-about-page-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -100px; /* SP: 曲線のサイズを調整 */
    width: 200%;
    height: 120px;  /* SP: 曲線のサイズを調整 */
    background: #fff;
    border-radius: 50%;
}

/* 教室長挨拶
---------------------------------------------------------- */
.manager-greeting {
  /* 上下の余白をPC版より小さくし、左右に余白を追加 */
  padding: 60px 16px;
}

.manager-greeting .title {
  /* スマホ用にフォントサイズを調整 */
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 0;
  position: relative;
  padding-bottom: 0;
  text-align: center;
}

.manager-greeting .title + .title-underline {
    /* タイトル下のマージンを調整 */
    margin-bottom: 30px;
}

.manager-greeting-content {
  /* PC版の横並び(row)から縦並びに変更 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.manager-greeting-image {
  /* 画像の幅を100%にし、下に余白を追加 */
  width: 100%;
  max-width: 300px; /* 画像が大きくなりすぎないように最大幅を指定 */
  margin: 0 auto 24px;
}

.manager-greeting-image img {
  /* 親要素に追従させる */
  width: 100%;
  height: auto;
}

.manager-greeting-text {
  /* テキストブロックの幅を100%に */
  width: 100%;
}

.manager-greeting-text p {
  /* スマホ用にフォントサイズと行間を調整 */
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 1.8em;
}

.manager-greeting-text p:last-child {
  margin-bottom: 0;
}

.manager-name {
  /* フォントサイズを少し調整 */
  font-size: 16px;
  font-weight: bold;
  text-align: right;
}
/*-/教室長挨拶 -*/

/* SUNSの特徴
---------------------------------------------------------- */
.features-section {
  padding: 60px 16px;
  background-color: #fffde2;
}

.features-title-container {
    text-align: center;
    margin-bottom: 40px;
}

.features-title-sub {
    font-size: 20px;
    font-weight: bold;
    color: #f7941d;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
}

.features-title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 0;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.features-item,
.features-item.reverse {
  flex-direction: column;
}

.features-image {
  width: 100%;
  margin-top: 25px;
  order: 2; /* 画像をテキストの下に配置 */
}

.features-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

.features-text-box {
  width: 100%;
  background-color: #fff;
  padding: 30px 20px 0;
  border: 2px solid;
  border-radius: 5px;
  margin: 0;
  order: 1; /* テキストを画像の上に配置 */
}

.features-text-box h3 {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  padding: 12px;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
}

.features-text-box.blue h3 { background-color: #00a0ea; }
.features-text-box.green h3 { background-color: #16c459; }
.features-text-box.orange h3 { background-color: #f7941d; }

.features-text-box p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 1.8em;
}

.features-text-box p:last-of-type {
    margin-bottom: 0;
}

.features-text-box.blue { border-color: #00a0ea; }
.features-text-box.orange { border-color: #f7941d; }
.features-text-box.green { border-color: #16c459; }

/* テキストボックスと画像を一体化させるための調整 */
.features-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;
    border: 2px solid;
    padding: 30px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 個別の枠線は不要になるためリセット */
.features-item .features-text-box {
    border: none;
    padding: 0;
    box-shadow: none;
}

/* 各アイテムのボーダー色を設定 */
.features-item:has(.features-text-box.orange) { border-color: #f7941d; }
.features-item:has(.features-text-box.blue)   { border-color: #00a0ea; }
.features-item:has(.features-text-box.green)  { border-color: #16c459; }

/*-/SUNSの特徴 -*/

/* 他にもこんな魅力が…！
---------------------------------------------------------- */
.other-charms-container {
    background-color: #fff1024D; /* PC版のカラーコードに合わせる */
    padding: 80px 20px 40px;      /* 上パディングを多めに確保し、下を調整 */
    border-radius: 10px;
    margin: 100px 16px 60px;
    position: relative;
}

.other-charms-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f7941d;
    color: white;
    font-size: 22px;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 5px;
    white-space: nowrap;
    text-align: center;
}

.other-charms-title::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 10px solid #f7941d;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.other-charms-content {
    display: flex;
    flex-direction: column; /* 縦積みに変更 */
    align-items: stretch;    /* 子要素を幅いっぱいに広げる */
}

.charms-list {
    display: grid;
    grid-template-columns: 1fr; /* 1列にする */
    gap: 20px; /* 項目の隙間 */
    width: 100%;
    margin: 0 0 30px 0; /* 画像との間にマージンを設ける */
    padding: 0;
    list-style: none;
}

.charms-list li {
    font-size: 18px;
    font-weight: bold;
    position: relative;
    padding-left: 35px;
}

.charms-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #00a0ea;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.charms-image {
    width: 140px;
    height: auto;
    align-self: flex-end; /* 右端に配置 */
}

.charms-image img {
    width: 100%;
    height: auto;
    display: block;
}

/*-/他にもこんな魅力が…！ -*/

/* Instagram案内
---------------------------------------------------------- */
.insta-info-section {
  background: #f7941d;
  padding: 80px 16px;
  text-align: center;
}

.insta-info-inner {
  background: #fff;
  border-radius: 5px;
  padding: 40px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.07);
  position: relative;
}

.insta-info-inner::before,
.insta-info-inner::after {
    font-family: serif;
    font-size: 36px;
    color: #fde6ce;
    position: absolute;
    top: 45px;
}

.insta-info-inner::before {
    content: '«';
    left: 25px;
}

.insta-info-inner::after {
    content: '»';
    right: 25px;
}

.insta-info-text {
  font-size: 16px;
  font-weight: bold;
  color: #222;
  margin: 0 auto 30px;
  line-height: 2;
  letter-spacing: 1.2px;
  max-width: 300px;
}

.insta-info-mark {
  background: linear-gradient(transparent 60%, #fff100 60%);
  font-weight: bold;
  padding: 0 2px;
}

.insta-info-instagram {
  color: #f7941d;
  font-weight: bold;
  margin: 0 2px;
}

.insta-info-btn {
  display: flex;
  align-items: center;
  border: 1.5px solid #ff716a;
  border-radius: 5px;
  width: 100%;
  max-width: 400px;
  padding: 12px 20px;
  color: #f7941d;
  background: #fff;
  text-decoration: none;
  margin: 0 auto;
  box-sizing: border-box;
}

.insta-info-btn-icon {
  display: flex;
  align-items: center;
}

.insta-info-btn-icon img {
  width: 26px;
  height: 26px;
  display: block;
}

.insta-info-btn-text {
  flex-grow: 1;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
}

.insta-info-btn-arrow {
  font-size: 16px;
  color: #f7941d;
  font-weight: bold;
}
/*-/Instagram案内 -*/

/* 教室情報
---------------------------------------------------------- */
.classroom-info-section {
  padding: 60px 16px;
  background: none;
}

.classroom-info-section .section-title-container {
  margin-bottom: 40px;
}

.classroom-info-section .section-title {
  font-size: 25px;
  letter-spacing: 1.8px;
  font-weight: bold;
  text-align: center;
}

.info-table {
  width: 100%;
  border: 1px solid #f7941d;
  border-radius: 5px;
  overflow: hidden;
  display: block;
}

.info-table tbody,
.info-table tr {
    display: block;
}

.info-table th,
.info-table td {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px;
}

.info-table th {
  background-color: #f7941d;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.info-table td {
  font-size: 16px;
  line-height: 1.8;
  background-color: #fff;
  border-bottom: 1px solid #f7941d;
  text-align: left;
}

.info-table tr:last-child td {
  border-bottom: none;
}

.info-note {
  font-size: 13px;
  color: #888;
  margin-top: 10px;
  line-height: 1.5;
  text-align: left;
}
/*-/教室情報 -*/

/* アクセスマップ
---------------------------------------------------------- */


.access-map-section {
  padding: 60px 16px;
  text-align: center;
}

.access-map-section .section-title-container {
  margin-bottom: 30px;
}

.access-map-section .section-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 1.5px;
}

.access-map-section .title-icon {
  width: 26px;
  height: auto;
  margin-right: 12px;
}

.map-container {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 正方形にするため100%に変更 */
  height: 0;
  overflow: hidden;
  border: 1px solid #ddd;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*-/アクセスマップ -*/

.info-page-hero {
  height: 300px; /* SP: 高さをPC版(600px)から調整 */
  background-image: url('/wp-content/themes/kasai_top/img/info_top.png');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 画像下の白い曲線 */
.info-page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100px; /* SP: 曲線のサイズを調整 */
  width: 200%;
  height: 120px;  /* SP: 曲線のサイズを調整 */
  background: #fff;
  border-radius: 50%;
}


/* =========================
   入塾までのステップ
   ========================= */

.admission-steps-section {
    padding: 40px 16px 32px 16px;
  }
  
  .section-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'M PLUS 1p', sans-serif;
    letter-spacing: 1.5px;
    margin-bottom: 28px;
    padding-bottom: 0;
  }
  .section-title .highlight {
    color: #f7941d;
    font-size: 1.3em;
    font-weight: bold;
  }
  
  .title-underline {
    display: flex;
    gap: 6px;
    margin: 18px auto 0 auto;
    height: 4px;
    justify-content: center;
  }
  .title-underline .line {
    display: inline-block;
    height: 100%;
    border-radius: 0;
  }
  .title-underline .line.orange { width: 32px; background: #fd9914; }
  .title-underline .line.yellow { width: 32px; background: #ffe066; }
  .title-underline .line.blue   { width: 32px; background: #00a0ea; }
  
  .step-feature-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
  }
  
  .step-feature {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0 0 0 0;
    background: #fff;
  }
  
  .step-feature__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .step-feature__icon-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    margin-bottom: 20px;
  }
  
  .step-feature__icon {
    width: 56px;
    height: 56px;
    background: #f7941d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .step-feature.step-orange {
    border: 3px solid #f7941d;
    border-radius: 5px;
  }
  .step-feature.step-sky {
    border: 3px solid #53c1e8;
    border-radius: 5px;
  }
  .step-feature.step-red {
    border: 3px solid #ff716a;
    border-radius: 5px;
  }
  .step-feature.step-blue {
    border: 3px solid #00a0ea;
    border-radius: 5px;
  }
  .step-feature.step-green {
    border: 3px solid #16c459;
    border-radius: 5px;
  }
  .step-orange .step-feature__icon { background: #f7941d; }
  .step-sky .step-feature__icon { background: #53c1e8; }
  .step-red .step-feature__icon { background: #ff716a; }
  .step-blue .step-feature__icon { background: #00a0ea; }
  .step-green .step-feature__icon { background: #16c459; }
  
  .step-feature__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
  }
  
  /* arrow位置調整（スマホ用） */
  .step-feature__arrows {
    order: 3;
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* .step-feature__icon-area内のarrowsは非表示 */
  .step-feature__icon-area .step-feature__arrows {
    display: none !important;
  }
  /* .step-feature__inner > .step-feature__arrowsは表示 */
  .step-feature__inner > .step-feature__arrows {
    display: flex !important;
  }
  
  .step-feature__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 0;
    width: 100%;
    max-width: 100vw;
    align-items: stretch;
  }
  
  .step-feature__title {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f7941d;
    border-radius: 5px;
    margin-bottom: 18px;
    padding: 10px 15px;
    overflow: hidden;
    font-family: 'M PLUS 1p', sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
  }
  .step-orange .step-feature__title { background: #f7941d; }
  .step-sky .step-feature__title { background: #53c1e8; }
  .step-red .step-feature__title { background: #ff716a; }
  .step-blue .step-feature__title { background: #00a0ea; }
  .step-green .step-feature__title { background: #16c459; }
  
  /* STEP番号部分だけ白背景＋色文字 */
  .step-feature__title span {
    background: #fff;
    color: inherit;
    border-radius: 4px;
    padding: 2px 10px;
    margin-right: 8px;
    font-size: 1em;
    font-weight: bold;
  }
  
  .step-feature__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.98rem;
    color: #222;
    line-height: 1.9;
    font-weight: 400;
    background: none;
    letter-spacing: 0.03em;
    text-align: left;
  }
/* =========================
   優待制度・特典（スマホ用）
   ========================= */

.info-toku_wrap {
  padding: 40px 0 40px;
  background: #fff10226;
}

.info-toku_inner {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto 40px;
  padding: 0 16px;
  box-sizing: border-box;
}

.info-toku_inner h2 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: "M PLUS 1p", sans-serif;
  color: #000;
  letter-spacing: 1px;
  line-height: 1.3;
  margin-bottom: 18px;
}

.info-toku_inner h2 .info-toku_box {
  background-color: #00A0EA;
  color: #fff;
  padding: 2px 8px;
  border-radius: 5px;
  margin: 0 2px 6px 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.info-toku_inner h2 .maru {
  position: relative;
  font-size: 1.1rem;
}
.info-toku_inner h2 .maru::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100%;
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #00A0EA;
}

.info-toku_wrap .txt {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 1.1px;
  line-height: 1.9;
  text-align: left;
  margin: 24px 0 28px;
  padding: 0 2px;
}

.info-toku_inner ul.info-toku_box-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0 0 24px 0;
  list-style: none;
  width: 100%;
}

.info-toku_inner ul.info-toku_box-list li {
  width: 100%;
  min-width: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(305deg, #f08622 40%, #f39521 41%);
  border-radius: 8px;
  padding: 18px 0;
}

.info-toku_inner ul.info-toku_box-list li p {
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
  letter-spacing: 0.05em;
}

.info-toku_inner ul.info-toku_box-list li p span {
  font-size: 1.3rem;
  color: #FFF005;
  font-weight: bold;
}

/* --- タイトル装飾 --- */
.info-toku_title {
  width: 100%;
  margin: 28px auto 12px auto;
  text-align: center;
  position: relative;
}

.info-toku_title-border {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 10px;
}
.info-toku_title-border::before,
.info-toku_title-border::after {
  content: '';
  display: block;
  height: 2px;
  background: #f7941d;
  flex: 1 1 0;
}
.info-toku_title-crown {
  width: 26px;
  height: 26px;
  margin: 0 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-toku_title-crown img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.info-toku_title-text {
  color: #f7941d;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.08em;
  font-family: "M PLUS 1p", sans-serif;
  margin: 12px 0 10px;
  line-height: 1.1;
  display: inline-block;
}

/* 優待ブロック全体 */
.privilege-block {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto 40px;
  background: #fffde2;
  border-radius: 12px;
  box-sizing: border-box;
  text-align: center;
  padding: 18px 0px 24px 0px;
}

.privilege-block__title {
  margin-bottom: 18px;
}
.privilege-block__desc {
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.8;
  text-align: left;
  padding: 0 2px;
}

/* カード部分 */
.privilege-block__cards,
.transfer-privilege__cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100vw;
}
.transfer-privilege__card-group {
  background: #fff;
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 2px 8px #f7941d22;
  justify-content: center;
}
.transfer-privilege__card-group-title {
  font-size: 18px;
  font-weight: bold;
}
.transfer-privilege__card {
  background: linear-gradient(305deg, #f08622 40%, #f39521 41%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: bold;
  border-radius: 8px;
  padding: 14px 0;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 4px #f7941d22;
  display: flex;
  align-items: center;
  justify-content: center;
}
.transfer-privilege__card-group--blue .transfer-privilege__card {
  background: linear-gradient(305deg, #33ade8 40%, #00a0ea 41%);
  color: #fff;
  box-shadow: 0 1px 4px #00a0ea22;
}
.transfer-privilege__card span {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff005;
  margin-left: 4px;
}
.transfer-privilege__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #00a0ea;
  font-weight: 400;
  padding: 0 0 8px 0;
  user-select: none;
  margin: 0 auto 8px auto;
}

/* =========================
   成績保証制度セクション（スマホ用）
========================= */
.result-guarantee-section {
  padding: 48px 0 32px 0;
  margin: 0 20px;
  background: #fff;
  text-align: center;
}
.result-guarantee-title {
  font-size: 25px;
  font-weight: bold;
  color: #000;
  margin-bottom: 25px;
  letter-spacing: 0.08em;
  font-family: "M PLUS 1p", sans-serif;
  display: block;
  align-items: center;
  justify-content: center;
}
.result-guarantee-title span {
  color: #f7941d;
}
.result-guarantee-desc {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  margin-bottom: 32px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
}
.result-guarantee-cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 0 auto;
  max-width: 100vw;
  width: 100%;
}
.result-guarantee-card {
  width: 90vw;
  height: 90vw;
  max-width: 170px;
  max-height: 170px;
  min-width: 170px;
  min-height: 170px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px #0001;
  position: relative;
  margin: 0 auto;
}
.result-guarantee-card--orange {
  background: linear-gradient(305deg, #f08622 40%, #f39521 41%);
}
.result-guarantee-card--blue {
  background: linear-gradient(305deg, #33ade8 40%, #00a0ea 41%);
}
.result-guarantee-card__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
  height: auto;
}
.result-guarantee-card__label {
  width: fit-content;
  background: #fff;
  color: #ff9800;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  padding: 2px 10px;
  font-family: "M PLUS 1p", sans-serif;
  display: inline-block;
}
.result-guarantee-card--blue .result-guarantee-card__label {
  color: #00a0ea;
}
.result-guarantee-card__sub {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  font-family: "M PLUS 1p", sans-serif;
  letter-spacing: 0.08em;
}
.result-guarantee-card__highlight {
  color: #fff102;
  font-size: 18px;
  font-weight: bold;
  margin-right: 4px;
}

/* 注意書き（補足説明）用の例 */
.result-guarantee-section .note-box {
  background: #fffde2;
  border-radius: 5px;
  padding: 36px 20px;
  margin: 40px auto 0 auto;
  max-width: 100%;
  width: 100%;
  line-height: 2;
  text-align: left;
  box-sizing: border-box;
}

.result-guarantee-section .note-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-guarantee-section .note-box li {
  margin-bottom: 14px;
  font-size: 15px;
  color: #222;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 2;
  word-break: break-all;
}

.result-guarantee-section .note-box li:last-child {
  margin-bottom: 0;
}

/* --- 問い合わせセクション全体 --- */
.info-inq_wrap {
  background-color: #fd9915;
  padding: 100px 0;
}

/* --- 白いボックス --- */
.info-inq_inner {
  background: #fff;
  border-radius: 5px;
  margin: 0 20px;
  padding: 30px ;
  box-sizing: border-box;
  max-width: 100%;
}

/* --- タイトル --- */
.info-inq_inner h2 {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #fd9915;
  padding-bottom: 20px;
  margin-bottom: 36px;
  letter-spacing: 0.04em;
}

.info-inq_inner h2 span {
  color: #fd9915;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 0.04em;
}

/* --- 問い合わせボタンのリスト --- */
.info-inq_conts ul {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

/* --- 各ボタン（li） --- */
.info-inq_conts ul li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* --- ボタン共通 --- */
.info-inq_conts ul li a {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 17px;
  font-weight: bold;
  background-color: #fff;
  border-radius: 5px;
  position: relative;
  padding: 0 0 0 0;
  margin: 0;
  gap: 8px;
  transition: none;
}

/* --- LINEボタン --- */
.info-inq_conts ul li:nth-child(1) a {
  border: 2px solid #16c459;
  color: #16c459;
  font-weight: bold;
  background: #fff;
}

/* --- 電話ボタン --- */
.info-inq_conts ul li:nth-child(2) a {
  border: none;
  background: none;
  box-shadow: none;
  color: #222;
  font-size: 18px;
  font-weight: bold;
  height: auto;
  min-height: 52px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* --- 電話番号部分 --- */
.info-inq_tel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  box-shadow: none;
  color: #222;
  font-size: 20px;
  font-weight: bold;
  height: 56px;
  margin: 0;
  text-align: center;
  gap: 10px;
  position: relative;
  flex-direction: row;
}

.info-inq_tel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  height: 24px;
  margin-right: 8px;
}
.info-inq_tel-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.info-inq_tel-numwrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

.info-inq_tel-number {
  font-size: 25px !important;
  font-weight: bold;
  letter-spacing: 1.2px;
  line-height: 1.1;
  color: #222;
  display: block;
  text-align: center;
}

.info-inq_tel-note {
  font-size: 12px !important;
  color: #0090ea;
  font-weight: normal;
  margin-top: 4px;
  display: block;
}

/* --- メールボタン --- */
.info-inq_conts ul li:nth-child(3) a {
  border: 2px solid #fd9915;
  color: #fd9915;
  font-weight: bold;
  background: #fff;
}

/* --- ボタン内アイコン --- */
.info-inq_conts ul li a .icon {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  position: static;
  left: auto;
  top: auto;
  display: inline-block;
}
.info-inq_conts ul li a .color {
  width: 22px;
  height: 22px;
  margin-left: 8px;
  position: static;
  right: auto;
  top: auto;
  display: inline-block;
}

/* --- ボタンテキスト --- */
.info-inq_conts ul li a span,
.info-inq_conts ul li a strong {
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.04em;
}

/* --- ボタンの余白調整 --- */
.info-inq_conts ul li a {
  padding-left: 0;
  padding-right: 0;
}

/* --- ボタン間の余白 --- */
.info-inq_conts ul li:not(:last-child) {
  margin-bottom: 0;
}

/* --- ボタンのホバー演出は不要なので削除 --- */
.info-inq_conts ul li a:hover,
.info-inq_conts ul li a:active {
  filter: none;
  background: #fff;
  color: inherit;
  box-shadow: none;
}

/* プライバシーポリシー（スマホ用） */
.privacy-page-hero {
  height: 300px; /* SP: 高さをPC版(600px)から調整 */
  background-image: url('/wp-content/themes/kasai_top/img/privacy_top.png');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 画像下の白い曲線 */
.privacy-page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100px; /* SP: 曲線のサイズを調整 */
  width: 200%;
  height: 120px;  /* SP: 曲線のサイズを調整 */
  background: #fff;
  border-radius: 50%;
}

.privacy-wrap {
  width: 100%;
  padding: 0 16px 32px 16px;
  box-sizing: border-box;
}
.privacy-inner {
  width: 100%;
  margin: 80px auto;
}
.privacy-title {
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 25px;
  font-weight: 800;
  margin: 0 auto 40px;
  text-align: center;
  padding-bottom: 0;
}
.privacy-title + .title-underline {
margin-bottom: 50px;
}
.privacy-section-wrap {
  width: 100%;
  margin: 0 auto;
}
.privacy-section {
  margin-bottom: 32px;
  background: #fff;
  border-radius: 8px;
  padding: 18px 14px 18px 14px;
  box-sizing: border-box;
  box-shadow: none;
}
.privacy-section-title {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
  font-family: 'M PLUS 1p', sans-serif;
  margin-bottom: 12px;
  color: #222;
  letter-spacing: 0.02em;
}
.privacy-section-bar {
  display: inline-block;
  width: 4px;
  height: 28px;
  background: #fd9914;
  border-radius: 2px;
  margin-right: 10px;
}
.privacy-section-text {
  font-size: 15px;
  color: #222;
  line-height: 2.1;
  font-family: 'Noto Sans JP', sans-serif;
  margin-left: 0;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}
.privacy-section-text br {
  display: block;
  content: "";
  margin-bottom: 8px;
}

.contact-page-hero {
  height: 300px;
  background-image: url('/wp-content/themes/kasai_top/img/contact_top.png');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.contact-page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100px;
  width: 200%;
  height: 120px;
  background: #fff;
  border-radius: 50%;
}

.contact-title-wrap {
  margin-bottom: 36px;
  text-align: center;
}
.contact-title {
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 28px;
  font-weight: 800;
  margin: 0 auto 18px;
  text-align: center;
  padding-bottom: 0;
}
.contact-title + .title-underline {
  margin-bottom: 28px;
}
.contact-inner {
  padding: 32px 0 40px 0;
  margin: 0 20px;
}
.contact-form {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 0 32px 0;
}
.contact-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.contact-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  border-bottom: none;
  margin-bottom: 18px;
}
.contact-label-area {
  width: 100%;
  max-width: 100%;
  border-right: none;
  border-bottom: 1px solid #fff;
  padding: 0 0 0 0;
  font-size: 16px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fd9914;
  position: relative;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
}
.contact-label {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 0 0 0 14px;
  margin: 0;
  flex: 1 1 auto;
  text-align: left;
}
.contact-required {
  margin-left: 0;
  margin-right: 12px;
  font-size: 13px;
  padding: 2px 12px;
  border-radius: 4px;
  background: #ff5a5a;
  color: #fff;
  font-weight: bold;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-input-area {
  width: 100%;
  padding: 0;
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.contact-input,
.contact-select {
  width: 100%;
  font-size: 15px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  background: #fff;
  color: #222;
  box-sizing: border-box;
}
.contact-select {
  min-width: 0;
  max-width: 100%;
}
.contact-textarea {
  width: 100%;
  font-size: 15px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  background: #fff;
  color: #222;
  min-height: 140px;
  box-sizing: border-box;
  resize: vertical;
}

.contact-row-policy .contact-input-area {
  align-items: center;
  margin: 10px 0;
}
.contact-policy {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.contact-policy-link {
  color: #fd9914;
  text-decoration: underline;
  font-weight: bold;
  margin-right: 4px;
  letter-spacing: 0.05em;
}
.contact-submit-wrap {
  text-align: center;
  margin-top: 24px;
}
.contact-submit {
  background: #fd9914;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  padding: 14px 0;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  transition: background 0.2s;
}