/*-ele-*/
/* =========================
   共通リセット・共通スタイル
   ========================= */
   ul, li { list-style: none; }
   a, p { text-decoration: none; color: #000; margin: 0; padding: 0; }
   
   h2, h3 {
       margin: 0;
       padding: 0;
   }
   
   /* --- 汎用テキストクラス --- */
   .text-center { text-align: center; }
   .text-bold { font-weight: bold; }
   .text-orange { color: #f7941d; }
   
   /* =========================
      ページ上部メインビジュアル
      ========================= */
   .elementary-page-hero {
       width: 100%;
       height: 600px; /* 画像の高さに応じて調整してください */
       /* 頂いた画像名 elementary_top を背景画像として指定します */
       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; /* はみ出す曲線を隠します */
   }
   
   /* 画像の下に白い曲線を追加するための設定 */
   .elementary-page-hero::after {
       content: '';
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       bottom: -200px; /* 円を大きくはみ出させて緩やかなカーブに見せる */
       width: 200%;    /* 横幅を200%に広げて、カーブをさらに緩やかに */
       height: 250px;  /* 円の高さ */
       background: #fff; /* 下のセクションの背景色と同じ白を指定 */
       border-radius: 50%;
   }

   .middle-page-hero {
    width: 100%;
    height: 600px; /* 画像の高さに応じて調整してください */
    /* 頂いた画像名 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: 600px; /* 画像の高さに応じて調整してください */
    /* 頂いた画像名 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: 40px;
       font-weight: bold;
       letter-spacing: 1.8px;
       font-family: "M PLUS 1p", sans-serif;
       padding: 15px 50px;
       position: relative; /* z-indexを有効にするため */
       z-index: 2;         /* 曲線(::after)より手前に配置 */
   }

   /* =========================
      共通タイトル下線
      ========================= */
   .title-underline {
       display: flex;
       gap: 8px;
       margin-top: 25px; /* タイトルテキストとの隙間 */
       height: 5px;      /* 線の高さ */
       justify-content: center;
   }
   .title-underline .line {
       display: inline-block;
       height: 100%;
       border-radius: 0; /* 線の角を四角に */
   }
   .title-underline .line:nth-child(1) { width: 45px; background: #fd9914; } /* 1本目: オレンジ */
   .title-underline .line:nth-child(2) { width: 45px; background: #00a0ea; } /* 2本目: 青 */
   .title-underline .line:nth-child(3) { width: 45px; background: #ffe066; } /* 3本目: 黄色 */
   
   /* =========================
      パンくずリスト
      ========================= */
   .inbox {
    max-width: 1080px;
    margin: 10px auto;
   }

   .inbox ul {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
   }

   .top_page a {
    color: #00a0ea;
    border-bottom: 1px solid #00a0ea;
    display: block;
   }

   .inbox ul li {
    position: relative;
    color: #000;
    font-size: 14px;
    margin-right: 20px;
    float: left;
   }

   /* 2つ目以降のliの前に「＞」を表示 */
   .inbox ul li + li:before {
    content: "＞";
    color: #000;
    margin: 0 8px;
   }

   .inbox ul li:last-child {
    margin-right: 0;
   }

   .page_title_wrap {
    margin-top:114px;
    text-align: center;
    position: relative;
    width: 100%;
    background: #fff;
    padding: 60px 0 40px 0;
   }

   .page-title-main {
    display: inline-block;
    font-size: 40px;
    font-family: "M PLUS 1p";
    font-weight: bold;
    color: #fff;
    background: #f7941d;
    padding: 10px 40px;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
   }

   /* =========================
      コース概要（About）
      ========================= */
   .course-about-wrap { /* セクション全体 */ }
   .course-about-inner { padding: 100px 155px; }
   .course-about-title { font-size: 35px; font-weight: 800; margin: 0 auto 70px; text-align: center; padding-bottom: 0; }
   .course-about-box { padding: 50px; box-sizing: border-box; border-radius: 5px; background-color: #FFFDE2; margin-bottom: 50px; }
   .course-about-box p { text-align: center; margin: 0 auto 25px; line-height: 2; font-size: 15px; font-weight: 500; }

   /* =========================
      中学進学準備（Ready）
      ========================= */
   
   /* --- セクション全体 --- */
   .course-ready-wrap { display: block; background-color: #eff0f1; padding: 100px 0;}

   
   /* --- 内側ラッパー --- */
   .course-ready-inner {
    position: relative;
    padding-bottom: 50;
    max-width: 1080px;
    margin: 0 auto;
    letter-spacing: 0.08mm;
   }
   
   /* --- タイトル --- */
   .course-ready-title {
       font-size: 35px;
       font-weight: bold;
       margin: 0 auto 70px;
       text-align: center;
       position: relative;
       padding: 0;
   }
   
   /* --- リスト全体 --- */
   .course-ready-list {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   
   /* --- リストアイテム --- */
   .course-ready-item {
       display: flex;
       align-items: center;
       background-color: #fff;
       border: 2px solid #f7941d;
       border-radius: 6px;
       padding: 40px 60px;
       margin: 0 0 50px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   }
   
   /* --- アイコン --- */
   .course-ready-icon {
       margin-right: 130px;
       display: flex;
       justify-content: center;
       align-items: center;
       min-width: 150px;
       min-height: 150px;
   }
   .course-ready-icon img {
       width: 150px;
       height: 150px;
       object-fit: contain;
       display: block;
       position: relative;
       top: 2px;
   }
   
   /* --- アイテム内容 --- */
   .course-ready-content {
       flex: 1;
       padding: 0;
   }
   .course-ready-content h3 {
       font-family: "M PLUS 1p";
       font-size: 24px;
       font-weight: 600;
       margin: 0 0 20px;
       color: #fff;
       padding: 17px 15px;
       box-sizing: border-box;
       text-align: left;
       border-radius: 4px;
       width: 100%;
   }
   .course-ready-item p {
       font-family: "Noto Sans JP";
       font-size: 15px;
       line-height: 2;
       margin: 0;
       padding: 0;
       vertical-align: baseline;
       font-weight: bold;
       line-break: strict;
        overflow-wrap: break-word;

   }
   
   /* --- 色分け --- */
   .course-ready-list li:nth-child(1) { border: 2px solid #f7941d; }
   .course-ready-list li:nth-child(1) h3 { background-color: #f7941d; }
   .course-ready-list li:nth-child(2) { border: 2px solid #00a9e0; }
   .course-ready-list li:nth-child(2) h3 { background-color: #00a9e0; }
   .course-ready-list li:nth-child(3) { border: 2px solid #ff716a; }
   .course-ready-list li:nth-child(3) h3 { background-color: #ff716a; }
   .course-ready-list li:nth-child(4) { border: 2px solid #16c459; }
   .course-ready-list li:nth-child(4) h3 { background-color: #16c459; }
   
   /* =========================
      ポイント（Point）
      ========================= */
   
   /* --- セクション全体 --- */
   .course-point-wrap {
       background-color: #f7941d;
       padding: 100px 0;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   /* --- 内側ラッパー --- */
   .course-point-inner {
       background-color: #fff;
       width: 1080px;
       height: 650px;
       padding: 50px;
       box-sizing: border-box;
       border-radius: 5px;
       letter-spacing: 0.08em;
   }
   
   /* --- タイトル --- */
   .course-point-title {
       font-size: 35px;
       font-family:"M PLUS 1p";
       font-weight: bold;
       margin: 0 auto 70px;
       text-align: center;
       position: relative;
       padding-bottom: 0;
   }
   
   /* --- リスト全体 --- */
   .course-point-list {
       display: flex;
       justify-content: center;
       gap: 40px;
       margin: 0;
       padding: 0;
       list-style: none;
       text-align: center;
   }
   
   /* --- リストアイテム --- */
   .course-point-item {
       background: #fff;
       border: 2px solid #000;
       border-radius: 12px;
       box-sizing: border-box;
       width: 410px;
       min-height: 350px;
       padding: 80px 30px 50px;
       margin-top: 70px;
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
   }
   .course-point-list li:nth-child(1) { border: 3px solid #f7941d; height: 360px; width: 480px; }
   .course-point-list li:nth-child(2) { border: 3px solid #6dcbe5; height: 360px; width: 480px; }
   
   /* --- アイコン --- */
   .course-point-icon {
       position: absolute;
       top: -70px;
       left: 50%;
       transform: translateX(-50%);
       background-color: #fff;
       width: 130px;
       height: 130px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 1;
   }

   /* 1つ目のポイントアイテムのアイコンの背景色をオレンジに */
   .course-point-list li:nth-child(1) .course-point-icon {
       background-color: #f7941d;
   }
   /* 1つ目のポイントアイテム内の画像サイズ */
   .course-point-list li:nth-child(1) .course-point-icon img{
    width: 70px;
    height: 70px;
    object-fit: contain;
   }
   /* 2つ目のポイントアイテムのアイコンの背景色を水色に */
   .course-point-list li:nth-child(2) .course-point-icon {
       background-color: #6dcbe5;
   }

   /* 2つ目のポイントアイテム内の画像サイズ */
   .course-point-list li:nth-child(2) .course-point-icon img{
    width: 70px;
    height: 70px;
    object-fit: contain;
   }
   
   /* --- テキスト --- */
   .course-point-content h3 {
       margin:0 0 15px;
       padding: 0 0 12px;
       font-size: 25px;
       font-weight: bold;
       font-family: "M PLUS 1p";
       color: #000;
       text-align: center;
       line-height: 35px;
       position: relative;
   }

   /* h3の下線となる擬似要素の共通スタイル */
   .course-point-content h3::after {
       content: "";
       display: block;
       height: 2px;
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       bottom: 0;
   }

   /* 1つ目のポイントアイテムのh3の下線スタイル（長さと色） */
   .course-point-list li:nth-child(1) h3::after {
       width: 40px;
       border-bottom: 4px solid #f7941d;
   }

   /* 2つ目のポイントアイテムのh3の下線スタイル（長さと色） */
   .course-point-list li:nth-child(2) h3::after {
       width: 40px;
       border-bottom: 4px solid #6dcbe5;
   }

   .course-point-content p {
       font-size: 15px;
       font-weight: 500px;
       line-height: 2;
       letter-spacing: 1.8px;
       font-family: "Noto Sans JP";
       color: #333;
       text-align: left;
   }

   .taisaku_wrap{
   position:relative;
   min-height: 726px;
   }

   .taisaku_erea{
    max-width: 1080px;
    margin: 0 140px;
    padding: 100px 0;
    box-sizing: border-box;
   }

   .taisaku_inner ul{
    width: 600px;
    margin: 0 0 0 auto;
   }

   .taisaku_inner li:nth-child(1){
    margin-bottom:60px;
   }

   .taisaku_title{
    text-align: center;
    padding-bottom: 20px;
    margin: 0 auto 50px;
    font-size: 35px;
    font-weight: 800;
   }

   /* taisaku_inner h4の基本スタイル */
   .taisaku_inner h4 {
    font-family: "M PLUS 1p";
    font-size: 25px;
    font-weight: bold;
    position: relative; /* 擬似要素の基準位置 */
    display: block;
    padding-left: 30px; /* 丸のスペースを確保 */
    margin-bottom: 30px;
   }

   /* h4の左の穴あき丸アイコンの共通スタイル */
   .taisaku_inner h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;   /* 丸の直径 */
    height: 20px;  /* 丸の直径 */
    border-radius: 50%; /* 丸くする */
    border: 5px solid; /* 穴あき丸の線（色と太さ） */
   }

   /* 1つ目のh4の文字色と丸の色をオレンジに */
   .taisaku_inner ul li:nth-child(1) h4 {
       color: #f7941d;
   }
   .taisaku_inner ul li:nth-child(1) h4::before {
       border-color: #f7941d;
   }

   /* 2つ目のh4の文字色と丸の色を水色に */
   .taisaku_inner ul li:nth-child(2) h4 {
       color: #00a9e0;
   }
   .taisaku_inner ul li:nth-child(2) h4::before {
       border-color: #00a9e0;
   }

   .taisaku_inner p{
        font-family:"Noto Sans JP";
        font-size: 15px;
        font-weight: 800px;
        line-height: 2;
    }


    .course-zyuken-wrap {
        background: url("/wp-content/themes/kasai_top/img/zyuken_back.png") no-repeat;
        background-size: cover;
        padding: 0;
      }
      
      .zyuken-bg {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        min-height: 600px;
        position: relative;
      }
      
      .zyuken-inner {
        width: 100%;
        height: 100%;
        padding: 120px 0 ;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
      }
      
      .zyuken-title {
        font-size: 35px;
        font-weight: bold;
        font-family: "M PLUS 1p";
        color: #222;
        letter-spacing: 1.5px;
        margin: 0 auto 70px;
        position: relative;
        line-height: 1.2;
        text-align: center;
        width: 100%;
      }
      
      .zyuken-underline {
        display: none;
      }
      .zyuken-underline .line {
        display: none;
      }
      
      .zyuken-block {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 700px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      
      .zyuken-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        align-items: flex-start;
      }
      
      .zyuken-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
        width: 100%;
      }
      
      .zyuken-label {
        font-size: 25px;
        font-weight: bold;
        font-family: "M PLUS 1p";
        letter-spacing: 1.5px;
        margin: 20px 0;
        background: none;
      }
      
      .zyuken-label.zyuken-private { color: #fd9914; }
      .zyuken-label.zyuken-public { color: #00a0ea; }
      .zyuken-label.zyuken-internal { color: #ff716a; }
      
      .zyuken-icon {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 2px;
      }
      
      .zyuken-text {
        font-size: 15px;
        font-weight: 400;
        color: #222;
        font-family: "Noto Sans JP";
        letter-spacing: 1.2px;
        line-height: 2;
        margin-bottom: 0;
        text-align: left;
        width: 100%;
      }


    .year-schedule {
      margin: 0 160px;
      padding: 100px 0;
      font-family: "M PLUS 1p", sans-serif;
      font-weight: bold;
    }
    .year-schedule h3 {
      font-size: 30px;
      margin-bottom: 30px;
      padding: 10px 0;
      text-align: center;
      color: #f7941d;
      border-bottom: 3px solid #f7941d;
      position: relative;
    }
    .schedule-table {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .schedule-table ul {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .schedule-table li {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
      box-sizing: border-box;
      height: 500px; /* 高さをさらに大きく */
    }
    .schedule-table h4 {
      font-size: 35px;
      color: #fff;
      padding: 15px;
      width: 100%;
      text-align: center;
      margin-bottom: 0;
    }
    .schedule-table h4 span {
      font-size: 25px;
    }
    .schedule-table ul:first-child li:nth-child(odd) h4,
    .schedule-table ul:last-child li:nth-child(odd) h4 {
      background-color: #6dcbe5;
    }
    .schedule-table ul:first-child li:nth-child(even) h4,
    .schedule-table ul:last-child li:nth-child(even) h4 {
      background-color: #00a0ea;
    }
    .schedule-items {
      width: 100%;
      height: 400px; /* セルの高さをさらに大きく */
      display: flex;
      flex-direction: row; /* 横並び */
      align-items: flex-start;
      justify-content: center;
      position: relative;
      padding: 40px 20px; /* 余白も広げる */
      gap: 10px;
    }

    .schedule-table ul li:nth-child(odd) .schedule-items {
        background: #fff;
      }
      .schedule-table ul li:nth-child(even) .schedule-items {
        background: #f3f3f3;
      }
      

   
    .schedule-items p {
      font-size: 20px;
      font-weight: 800;
      line-height: 2;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      margin: 0;
      color: #222;
      letter-spacing: 0.1em;
      background: none;
      border-radius: 0;
      padding: 0;
      display: block;
      min-height: 120px; /* 高さを揃える */
    }
    .schedule-items .arrow {
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 10px;
      height: 0;
      border-top: 3px solid #f7941d;
    }
    .schedule-items .arrow::before,
    .schedule-items .arrow::after {
      content: '';
      position: absolute;
      top: -6px;
      width: 16px;
      height: 16px;
      border: solid #f7941d;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
    }
    .schedule-items .arrow::before {
      left: 0;
      transform: rotate(135deg);
    }
    .schedule-items .arrow::after {
      right: 0;
      transform: rotate(-45deg);
    }
    @media (max-width: 900px) {
      .year-schedule {
        margin: 0 10px;
        padding: 40px 0;
      }
      .schedule-table ul {
        flex-direction: column;
        gap: 0;
      }
      .schedule-table li {
        flex-direction: row;
        align-items: flex-start;
        padding: 0;
        margin-bottom: 12px;
      }
      .schedule-table h4 {
        border-radius: 8px 0 0 8px;
        min-width: 60px;
        font-size: 22px;
        padding: 10px 0;
      }
      .schedule-items {
        min-height: 40px;
        border-radius: 0 8px 8px 0;
        padding: 8px 0;
      }
      .schedule-items p {
        font-size: 14px;
        margin-left: 8px;
        margin-top: 0;
      }
    }

   /* ========================= 
      時間割（Schedule）
      ========================= */
   
   /* セクション全体のラッパー(背景色や余白を設定) */
   .course-schedule-wrap {
       background-color: #fffde2; /* デザインに合わせた薄い黄色の背景 */
       padding: 100px 40px;
   }

   /* 中央揃えのタイトル */
   .course-schedule-title {
       font-size: 35px;
       font-weight: bold;
       font-family: "M PLUS 1p";
       letter-spacing: 1.5px;
       text-align: center;
       margin: 0 auto 70px;
       position: relative;
   }

   /* タイトル下の3本線 */
   .schedule-underline {
       display: none;
   }

   /* 左右カラムを配置するためのコンテナ */
   .course-schedule-container {
       display: flex; /* Flexboxを有効化し、子要素を横並びにする */
       justify-content: center; /* 子要素を中央に配置 */
       align-items: flex-start; /* 上端で揃える */
       gap: 60px; /* カラム間の隙間 */
       flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
   }

   /* 左カラム（平日・土曜日） */
   .schedule-column-left {
       display: flex;
       flex-direction: column; /* 子要素を縦に並べる */
       gap: 70px; /* ボックス間の隙間 */
   }

   /* 各時間割ボックスの共通スタイル */
   .course-schedule-box {
       background: white;
       border-radius: 16px; /* 角を16pxの丸みにする */
       padding: 70px 40px 40px; /* ヘッダーの高さ分、上に余白を多くとる */
       position: relative; /* 飾りカッコやヘッダーを配置する基準点にする */
       width: 550px; /* ボックスの幅を固定 */
       box-sizing: border-box;
       font-family: "M PLUS 1p", sans-serif; /* フォントを指定 */
       font-weight: bold;
   }

   /* 
    * 飾りカッコのスタイル
    * HTMLに追加したspanタグをCSSでL字の線にしています。
    */
   .course-schedule-box .bracket {
       position: absolute; /* 親要素(.course-schedule-box)を基準に絶対配置 */
       width: 30px;
       height: 30px;
       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-Left) */
       top: 0px;
       left: 0px;
       border-radius: 2px;
       border-top-width: 5px;
       border-left-width: 5px;
   }
   .course-schedule-box .bracket.tr { /* 右上 (Top-Right) */
       top: 0px;
       right: 0px;
       border-top-width: 5px;
       border-right-width: 5px;
       border-radius: 2px;
   }
   .course-schedule-box .bracket.bl { /* 左下 (Bottom-Left) */
       bottom: 0px;
       left: 0px;
       border-bottom-width: 5px;
       border-left-width: 5px;
       border-radius: 2px;
   }
   .course-schedule-box .bracket.br { /* 右下 (Bottom-Right) */
       bottom: 0px;
       right: 0px;
       border-bottom-width: 5px;
       border-right-width: 5px;
       border-radius: 2px;
   }


   /* ボックス上部のヘッダー（平日、土曜日、季節講習） */
   .course-schedule-box .box-header {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translate(-50%, -50%); /* 中央上に配置し、Y軸方向に自身の高さの半分だけ上にずらす */
       padding: 15px 60px 25px 60px;
       color: white;
       font-size: 25px;
       border-radius: 10px;
       /* clip-pathで要素を特殊な形に切り抜く（下部に吹き出しのような矢印を作成） */
       clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 55% 85%, 50% 100%, 45% 85%, 0% 85%);
       min-width: 280px;
       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; /* ul要素自体を中央に配置 */
       display: flex;
       flex-direction: column;
       gap: 12px; /* 各行の隙間 */
       width: fit-content; /* 内容に合わせて幅を自動調整 */
   }
   .course-schedule-box li {
       display: flex;
       align-items: center;
   }

   /* ラベル（1限、2限...） */
   .course-schedule-box .label {
       background-color: #6ec6e9;
       color: white;
       padding: 8px 35px 8px 25px;
       margin-right: 20px;
       min-width: 100px; /* 幅の最小値を設定して長さを揃える */
       text-align: center;
       font-size: 15px;
       /* clip-pathで右側が矢印のような形になるように切り抜く */
       clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
   }

   /* 時間（17:00-18:20...） */
   .course-schedule-box .time {
       font-size: 16px;
       color: #333;
       font-weight: bold;
       font-family: "M PLUS 1p";
       letter-spacing: 1.5px;
   }
 /* ========================= 
      料金（Price）
      ========================= */
   
      .course-price-section {
        background: #fff;
        padding: 100px 140px;
        border-radius: 12px;
        text-align: center;
    }
    .course-price-title {
        font-size: 35px;
        font-weight: bold;
        margin: 0 auto 70px;
        position: relative;
        padding: 0;
    }
    
    .course-price-title:after {
        display: none;
    }
    .course-price-desc {
        margin-bottom: 30px;
        color: #555;
        font-size: 1rem;
    }
    .course-price-block {
        margin: 40px 0;
    }
    .course-title {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 30px;
        padding: 15px 0;
        border-top: 2px solid;
        border-bottom: 2px solid;
        letter-spacing: 0.1em;
        background:none;
    }
      
    .course-title.orange { color: #f7941d; border-color: #f7941d; }
    .course-title.blue { color: #2196f3; border-color: #2196f3; }
      
    /*
     * 料金テーブルのスタイリング
     * ここからが料金表の見た目を設定するコードです。
     */
 
    /* テーブル全体の設定 */
    .course-price-table {
        width: 100%;
        border-collapse: collapse; /* セルの境界線を重ねて表示 */
        margin: 0 auto;
        font-size: 16px; /* テーブル内の基準フォントサイズ */
        border: 1px solid #f7941d; /* テーブル全体をオレンジの枠線で囲む */
    }
 
    /* テーブルのヘッダーセル(th)とデータセル(td)の共通設定 */
    .course-price-table th, 
    .course-price-table td {
        border: 1px solid #f7941d; /* セルの境界線をオレンジ色に */
        padding: 18px 15px;      /* セル内の余白（上下・左右） */
        text-align: center;  
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 1.2px;
        font-family: "M PLUS 1p";
    }
 
    /*
     * テーブルヘッダー (thead) の中のセル (th) の設定
     * 「小1〜小3」などの部分です。
     */
    .course-price-table thead th {
        color: #fff; /* 文字色を白に */
        font-weight: bold;
        font-family: "M PLUS 1p";
        font-size: 15px;
    }
 
    /* 1対1コース (orange) のヘッダー背景色 */
    .course-price-table.orange thead th {
        background: #f7941d; /* オレンジ色 */
    }
 
    /* 1対2コース (blue) のヘッダー背景色 */
    .course-price-table.blue thead th {
        background: #2196f3; /* 青色 */
    }
 
    /*
     * テーブル本体 (tbody) の中のセル (td) の設定
     * 「週1回(月4回)」や「¥16,456」などの部分です。
     */
    .course-price-table tbody td {
        background: #fff; /* データセルの背景は白 */
        font-size: 20px;
        font-family: "M PLUS 1p";
        font-weight: bold; /* 金額を太字に */
    }
 
    /* 
     * 各行の最初のセル (td:first-child) の設定
     * 「週1回(月4回)」の列です。
     */
    .course-price-table tbody td:first-child {
        background: #fffbe7; /* 背景を薄い黄色に */
        font-weight: bold;
        font-size: 15px;
    }
   
   /* ========================= 
   入会時諸費用（Enrollment）
      ========================= */
   
   /* エリア全体の外側ラッパー */
   .enroll-outer {
       background: #fff; /* 白背景 */
       padding: 80px 0;   /* 上下の余白 */
   }
     
   /* 薄黄色い背景のエリア */
   .course-enroll-section {
       background: #fffde2; /* デザインに合わせた薄い黄色 */
       margin: 0 140px;     /* 左右の余白 */
       padding: 70px 0;       /* 内側の上下余白 */
       border-radius: 8px;
       box-sizing: border-box;
   }
     
   /* 「入会時諸費用」のタイトル */
   .course-enroll-title {
       font-size: 35px;
       font-weight: bold;
       color: #f7941d; /* オレンジ色 */
       text-align: center;
       margin: 0 auto 70px; /* 下に50pxの余白 */
       padding: 0;
       position: relative;
       border: none;
   }

   /*
    * リストや「その他」を囲むインナーラッパー
    * 左右に余白を設けて、コンテンツが広がりすぎないようにします。
    */
   .enroll-inner {
       padding: 0 70px;
       letter-spacing: 0.1em;
   }

   /* 番号付きリストの共通スタイル */
   .course-enroll-list {
       list-style: none; /* リストのデフォルトの点を消す */
       padding: 0;
       margin: 0;
   }
   .course-enroll-list li {
       margin-bottom: 30px; /* 各項目の下の余白 */
   }

   /*
    * 各リスト項目のヘッダー部分（番号とメインテキスト）
    * 横並びにするためにFlexboxを使用します。
    */
   .enroll-item-header {
       display: flex;
       align-items: center; /* 上下中央揃え */
       margin-bottom: 10px; /* 説明文との間に余白 */
   }

   /* 項目の番号「(1)」など */
   .enroll-num {
       color: #f7941d; /* オレンジ色 */
       font-weight: bold;
       font-size: 20px;
       margin-right: 1em; /* 右側に余白 */
       font-family: "M PLUS 1p";
   }
   /* 項目のメインテキスト「入会費...」など */
   .enroll-main {
       font-size: 18px;
       font-weight: bold;
       font-family: "M PLUS 1p";
   }

   /* 説明文 */
   .enroll-desc {
       font-size: 15px;
       font-weight: 500;
       color: #222;
       padding-left: 4.2em; /* 番号の分だけ左にインデント */
       margin: 0;
       line-height: 1.8;
   }
   /* 説明文の中の注釈「※...」 */
   .enroll-desc.note {
       margin-top: 10px; /* 上の説明文との間に少し余白 */
   }

   /*
    * 「その他」のセクション
    */
   .course-enroll-others {
       margin: 60px 0 30px; /* 上下に余白 */
   }
   .enroll-others-title {
       color: #f7941d; /* オレンジ色 */
       font-weight: bold;
       font-size: 20px;
       padding-bottom: 12px;
       margin-bottom: 30px;
       border-bottom: 2px solid #f7941d; /* 下線 */
   }

   /* 費用のお支払いについて */
   .course-enroll-payment-box {
       background: #fff;
       border-radius: 6px;
       padding: 40px;
       margin: 60px 70px 0; /* 上に余白、左右に余白 */
       box-sizing: border-box;
   }
   .enroll-payment-title { /* タイトルをh4から変更したためセレクタも変更 */
       color: #f7941d;
       font-weight: bold;
       font-size: 20px;
       margin: 0 0 30px;
       padding: 0 0 12px;
       border-bottom: 3px solid #f7941d;
   }
   .enroll-payment-desc { /* pタグから変更したためセレクタも変更 */
       font-size: 15px;
       font-weight: normal;
       color: #222;
       line-height: 1.8;
   }
   
   /* =========================
       合格校一覧（Result）
       ========================= */
   
   .course-result-section {
       background: #f3f3f3;
       padding: 80px 0 60px 0;
       text-align: center;
   }
   .course-result-title {
       font-size: 35px;
       font-weight: bold;
       margin: 0 auto 70px;
       position: relative;
       display: inline-block;
       font-family: "M PLUS 1p";
   }
   
   /* ========================= 
   生徒・保護者の声（Voice）
      ========================= */
   
   /* セクション全体のラッパー */
   .course-voice-section {
       background: #fff;
       padding: 80px 40px;
       text-align: center;
   }

   /* 「生徒・保護者の声」タイトル */
   .course-voice-title {
       font-size: 35px;
       font-weight: bold;
       font-family: "M PLUS 1p";
       letter-spacing: 1.5px;
       margin: 0 auto 70px;
       position: relative;
       display: inline-block;
   }
   
   /* 「声」ボックスを横に並べるためのコンテナ */
   .course-voice-list {
       display: flex;
       justify-content: center;
       align-items: flex-start;
       gap: 40px;
       margin-top: 40px;
       flex-wrap: wrap;
   }

   /* 各「声」ボックスの共通スタイル */
   .course-voice-box {
       background: #fff1024D;
       border-radius: 12px;
       width: 520px;
       padding: 30px;
       text-align: left;
       box-sizing: border-box;
   }

   /*
    * スクロールが有効になるボックスのスタイル
    * .scrollableクラスが付いたボックスにだけ適用されます。
    */
   .course-voice-box.scrollable {
       max-height: 345px; /* ボックスの最大の高さを指定 */
       overflow-y: auto;  /* Y軸(縦)に内容がはみ出たらスクロールバーを出す */
       padding-right: 20px; /* スクロールバーが文字と重ならないように右に余白を追加 */
   }

   /*
    * スクロールバー自体のスタイリング
    */
   .course-voice-box.scrollable::-webkit-scrollbar {
       width: 8px; /* スクロールバーの幅 */
   }
   /* スクロールバーの「線路」部分 */
   .course-voice-box.scrollable::-webkit-scrollbar-track {
       background: #fdf5d3; /* 背景色に合わせて少し調整 */
       border-radius: 10px;
   }
   /* スクロールバーの「つまみ」部分 */
   .course-voice-box.scrollable::-webkit-scrollbar-thumb {
       background: #ddd; /* つまみの色を薄いグレーに */
   }

   /* 「保護者様」のラベル */
   .voice-label {
       background: #f7941d;
       color: white;
       font-weight: bold;
       font-size: 25px;
       padding: 10px 25px;
       border-radius: 5px;
       display: inline-block;
       width: 450px;
       text-align: center;
   }

   /* 感想文のテキストエリア */
   .voice-text {
       font-size: 15px;
       color: #333;
       line-height: 1.9;
       letter-spacing: 1.2px;
       font-weight: 500;
       font-family: "Noto Sans JP";
       white-space: pre-line;
   }

   /* ========================= 
   よくあるご質問（FAQ）
      ========================= */
   
   .course-faq-section {
       margin: 0;
       padding: 100px 0;
       background: #fffbe7;
   }
     
   /* タイトル */
   .course-faq-title {
       text-align: center;
       font-size: 35px;
       font-weight: bold;
       margin: 0 auto 70px;
       padding: 0;
       position: relative;
       font-family: "M PLUS 1p";
   }
   
   /* 質問リスト全体 */
   .course-faq-list {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 36px;
       margin-top: 40px;
   }
     
   /* 各質問ボックス */
   .course-faq-box {
       background: #fff;
       border-radius: 5px;
       box-shadow: 0 4px 0 #f3f3f3;
       padding: 32px 36px 24px 36px;
       margin: 0 0 30px;
       width: 900px;
       text-align: left;
       font-size: 15px;
   }
     
   /* Q部分 */
   .course-faq-q {
       display: flex;
       align-items: center;
       margin-bottom: 18px;
   }
   .course-faq-icon.q {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       background: #00b6f0;
       color: #fff;
       font-weight: bold;
       font-size: 25px;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       text-align: center;
       margin-right: 16px;
       flex-shrink: 0;
   }
   .course-faq-question {
       font-weight: bold;
       font-size: 15px;
   }
     
   /* A部分 */
   .course-faq-a {
       display: flex;
       align-items: flex-start;
       border-top: 2px solid #f7941d;
       padding-top: 14px;
       margin-top: 0;
       gap: 0;
   }
   .course-faq-icon.a {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       background: #f7941d;
       color: #fff;
       font-weight: bold;
       font-size: 25px;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       text-align: center;
       margin-right: 16px;
       flex-shrink: 0;
   }
   .course-faq-answer {
       font-size: 15px;
       color: #222;
       line-height: 1.8;
       margin: 0 0 0 0;
   }

     
   /* レスポンシブ対応 */
   @media (max-width: 700px) {
       .course-faq-box {
         padding: 20px 10px 16px 10px;
       }
       .course-faq-title:after {
         width: 120px;
         height: 6px;
       }
   }

/*-/ele-*/

.schedule-table ul li:nth-child(odd) .schedule-items {
  background: #fff;
}
.schedule-table ul li:nth-child(even) .schedule-items {
  background: #f3f3f3;
}

.blog-card-content .blog-card-excerpt { line-height: 2; }



/* レスポンシブ例 */
@media (max-width: 900px) {
  .zyuken-inner { width: 100%; min-width: 0; padding: 30px 10vw 30px 5vw; }
  .zyuken-girl-bg { display: none; }
}

.course-list-item .item-text {
    font-size: 15px;
    line-height: 1.8;
}

/* =================================================================
   年間スケジュール (page-middle.php)
================================================================= */

/* --- 全体設定 -------------------------------------------------- */

.year-schedule-wrap {
    padding: 100px 40px;
    background: linear-gradient(to bottom, #f0f8ff, #ffffff 30%); /* 背景グラデーション */
}

/* --- タイトル -------------------------------------------------- */

.year-schedule-title {
    font-size: 35px;
    font-weight: bold;
    font-family: "M PLUS 1p";
    text-align: center;
    letter-spacing: 1.5px;
    margin-bottom: 70px;
}

.schedule-subtitle {
    font-size: 30px;
    font-weight: bold;
    font-family: "M PLUS 1p";
    color: #f7941d;
    text-align: center;
    padding: 15px 0;
    margin: 0 auto 30px;
    border-top: 2px solid #f7941d;
    border-bottom: 2px solid #f7941d;
    max-width: 1200px; /* スケジュール表の幅に合わせる */
}

/* --- スケジュール表レイアウト ------------------------------------ */

.schedule-table {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.schedule-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 各月のコンテナ（li）-------------------------------------- */

.schedule-row li {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 月の重なり順を制御（左の月ほど手前に表示） */
.schedule-row li:nth-child(1) { z-index: 6; }
.schedule-row li:nth-child(2) { z-index: 5; }
.schedule-row li:nth-child(3) { z-index: 4; }
.schedule-row li:nth-child(4) { z-index: 3; }
.schedule-row li:nth-child(5) { z-index: 2; }
.schedule-row li:nth-child(6) { z-index: 1; }

/* 矢印で繋げるため、右側のマージンをマイナスに設定して重ねる */
/* 四角形にする9月と3月は除く */
.schedule-row li:not(.month-september):not(.month-march) {
    margin-right: -25px;
}

/* --- 月のヘッダー（h4）--------------------------------------- */

.schedule-row h4 {
    font-size: 35px;
    color: #fff;
    padding: 18px 30px 12px; /* 上下パディングでテキストの垂直位置を微調整 */
    text-align: center;
    margin: 0;
    font-weight: bold;
    font-family: "M PLUS 1p", sans-serif;
}

.schedule-row h4 span {
    font-size: 25px;
    margin-left: 0.2em;
}

/* 9月と3月を除くヘッダーを矢印形に切り抜く */
.schedule-row li:not(.month-september):not(.month-march) h4 {
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 50%, calc(100% - 25px) 100%, 0 100%);
}

/* ヘッダーの背景色を交互に設定 */
.schedule-row:first-child li:nth-child(odd) h4,
.schedule-row:last-child li:nth-child(odd) h4 {
    background-color: #00a0ea; /* 濃い青 */
}
.schedule-row:first-child li:nth-child(even) h4,
.schedule-row:last-child li:nth-child(even) h4 {
    background-color: #6dcbe5; /* 薄い青 */
}

/* --- イベント詳細エリア（.schedule-items）---------------------- */

.schedule-items {
    flex-grow: 1; /* 親コンテナの高さ一杯に広がるように */
    padding: 40px 15px;
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 300px; /* 全ての月の高さを揃える */
}

/* イベントエリアの背景色を交互に設定 */
.schedule-row:first-child li:nth-child(odd) .schedule-items,
.schedule-row:last-child li:nth-child(odd) .schedule-items {
    background: #f3f3f3; /* グレー */
}
.schedule-row:first-child li:nth-child(even) .schedule-items,
.schedule-row:last-child li:nth-child(even) .schedule-items {
    background: #fff;    /* 白 */
}

/* --- イベントリスト（縦書き）------------------------------------ */

.schedule-items ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5em; /* 各イベント間の隙間 */
    justify-content: center;
}

.schedule-items li {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    padding-top: 1.5em; /* ドットのためのスペース */
    letter-spacing: 1.5px;
    writing-mode: vertical-rl; /* 縦書きにする */
    text-orientation: mixed;
    white-space: nowrap;
    display: flex;
    align-items: flex-start; /* テキストを上揃えに */
}

/* イベントの頭に付くオレンジのドット */
.schedule-items li::before {
    content: '●';
    color: #f7941d;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
    writing-mode: horizontal-tb; /* ドットは横向きのまま */
}

/* --- 複数月にまたがる矢印 -------------------------------------- */

.has-arrow .schedule-arrow-pc {
    position: absolute;
    bottom: 40px;
    left: 15%;
    width: 150%; /* 隣の月にかかるように幅を調整 */
    height: 4px; /* ★修正：矢印の線の太さ */
    background: #f7941d;
    z-index: 10; /* 他の要素より手前に表示 */
}

.has-arrow .schedule-arrow-pc::before,
.has-arrow .schedule-arrow-pc::after {
    content: '';
    position: absolute;
    top: -4px; /* ★修正：線の太さに合わせて位置を調整 */
    width: 12px;
    height: 12px;
    border-style: solid;
    border-color: #f7941d;
    border-width: 0 4px 4px 0; /* ★修正：矢印の先端の太さ */
}

.has-arrow .schedule-arrow-pc::before {
    left: -2px;
    transform: rotate(135deg); /* 左向き矢印 */
}

.has-arrow .schedule-arrow-pc::after {
    right: -2px;
    transform: rotate(-45deg); /* 右向き矢印 */
}
/*-/ele-*/

/* =================================================================
　個別指導SUNSについて (page-about.php)
================================================================= */

/* メインビジュアル */
.suns-about-page-hero {
    width: 100%;
    height: 600px; /* 画像の高さに応じて調整してください */
    /* 頂いた画像名 elementary_top を背景画像として指定します */
    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; /* はみ出す曲線を隠します */
}

/* 画像の下に白い曲線を追加するための設定 */
.suns-about-page-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -200px; /* 円を大きくはみ出させて緩やかなカーブに見せる */
    width: 200%;    /* 横幅を200%に広げて、カーブをさらに緩やかに */
    height: 250px;  /* 円の高さ */
    background: #fff; /* 下のセクションの背景色と同じ白を指定 */
    border-radius: 50%;
}

/*-/メインビジュアル -*/

/* 教室長挨拶
---------------------------------------------------------- */
.manager-greeting {
  padding: 80px 0;
}

.manager-greeting .title {
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 0;
  position: relative;
  padding-bottom: 0;
}

.manager-greeting .title + .title-underline {
    margin-bottom: 40px;
}

.manager-greeting-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manager-greeting-image {
  width: 40%;
}

.manager-greeting-image img {
  width: 100%;
  height: auto;
}

.manager-greeting-text {
  width: 55%;
}

.manager-greeting-text p {
  font-size: 16px;
  line-height: 2;
  margin-bottom: 2em;
}

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

.manager-name {
  text-align: right;
  font-size: 18px;
  font-weight: bold;
}
/*-/教室長挨拶 -*/

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

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

.features-title-sub {
    font-size: 24px;
    font-weight: bold;
    color: #f7941d;
    margin-bottom: 10px;
    letter-spacing: 2px;
}



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

.features-title + .title-underline {
    margin-bottom: 40px;
}

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

.features-item {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左寄せに変更 */
  gap: 0; /* gapを削除 */
  position: relative;
}

.features-item.reverse {
  flex-direction: row-reverse;
  justify-content: flex-start; /* 左寄せ（reverseなので実質右寄せ）*/
}

.features-image {
  width: 45%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

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

.features-text-box {
  width: 600px;
  background-color: #fff;
  padding: 40px 40px 40px 80px;
  border: 2px solid ;
  border-radius:5px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.10);
  position: relative;
  z-index: 1;
  margin-left: -80px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features-item.reverse .features-text-box,
.features-text-box.blue {
  padding: 40px 80px 40px 40px;
  margin-left: 0;
  margin-right: -40px;
}

.features-item:not(.reverse) .features-text-box.orange,
.features-item:not(.reverse) .features-text-box.green {
  margin-left: 25px;
}

.features-text-box h3 {
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  padding: 13px;
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 25px;
  margin-top: 0;
}

.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: 16px;
  line-height: 2;
}

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

/*-/SUNSの特徴 -*/

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


.other-charms-container {
    background-color: #fff1024D;
    padding: 80px 60px 60px;
    border-radius: 10px;
    position: relative;
    max-width: 1080px;
    margin: 200px auto 100px;
}

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

.other-charms-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    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;
    justify-content: space-between;
    align-items: flex-end;
}

.charms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
    width: 100%;
}

.charms-list li {
    font-size: 22px;
    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: 20%;
}

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

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

/* Instagram案内セクション */
.insta-info-section {
  background: #f7941d;
  padding: 100px 0;
  text-align: center;
}

.insta-info-inner {
  background: #fff;
  border-radius: 5px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  position: relative;
}

.insta-info-text {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  margin: 0 60px 50px;
  line-height: 1.7;
  letter-spacing: 1.2px;
}

.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: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ff716a;
  border-radius: 5px;
  width: 400px;
  padding: 14px 40px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: #f7941d;
  background: #fff;
  text-decoration: none;
  margin-top: 20px;
  transition: background 0.2s, color 0.2s;
}

.insta-info-btn:hover {
  background: #f7941d;
  color: #fff;
}

.insta-info-btn-icon {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

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

.insta-info-btn-text {
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-align: center;
}

.insta-info-btn-arrow {
  font-size: 15px;
  margin-left: 18px;
  color: #f7941d;
  font-weight: bold;
}

/* 教室情報
---------------------------------------------------------- */


.classroom-info-section {
  padding: 80px 0;
  background: linear-gradient(to bottom, #f0f8ff, #ffffff 40%); /* 空のような背景 */
}

.classroom-info-section .section-title-container {
  text-align: center;
  margin-bottom: 50px;
}

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

.info-table {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid #f7941d;
  border-collapse: collapse;
  background-color: #fff;
}

.info-table th,
.info-table td {
  padding: 16px 20px;
  vertical-align: middle;
  /* border-bottom は個別に設定 */
}

.info-table th {
  background-color: #f7941d;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  width: 25%;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.info-table td {
  font-size: 16px;
  line-height: 1.8;
  width: 75%;
  border-bottom: 1px solid #f7941d;
}

.info-note {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
  line-height: 1.5;
}


/* レスポンシブ対応 (768px以下のスクリーン) */
@media (max-width: 768px) {
  .classroom-info-section {
    padding: 60px 20px;
  }

  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table td,
  .info-table th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .info-table tr {
    border: 1px solid #f7941d;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
  }
  
  .info-table tr:last-child {
     margin-bottom: 0;
  }

  .info-table th {
    border-bottom: 1px solid #f7bf77; /* 区切り線 */
    text-align: center;
    padding: 15px;
  }

  .info-table td {
    padding: 20px 15px;
    border-bottom: none;
    text-align: left;
  }
  
  .info-note {
    font-size: 12px;
  }
}

/* アクセスマップ
---------------------------------------------------------- */
.access-map-section {
  padding: 80px 0;
  text-align: center;
}

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

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

.access-map-section .title-icon {
  width: 30px; /* アイコンサイズ調整 */
  height: auto;
  margin-right: 15px;
}

.map-container {
  position: relative;
  width: 100%;
  padding-top: 50%; /* 地図のアスペクト比 (高さ / 幅) */
  height: 0;
  overflow: hidden;
  border: 1px solid #ddd;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* レスポンシブ対応 (768px以下のスクリーン) */
@media (max-width: 768px) {
  .access-map-section {
    padding: 60px 20px;
  }
  .access-map-section .section-title {
    font-size: 28px;
  }
  .map-container {
    padding-top: 75%; /* スマホでは少し縦長に */
  }
}


/* =================================================================
　入塾案内 (page-info.php)
================================================================= */
/* 入塾ページ
---------------------------------------------------------- */

.info-page-hero {
  width: 100%;
  height: 600px; /* 画像の高さに応じて調整してください */
  /* 頂いた画像名 info_top を背景画像として指定します */
  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; /* はみ出す曲線を隠します */
}

/* 画像の下に白い曲線を追加するための設定 */
.info-page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -200px; /* 円を大きくはみ出させて緩やかなカーブに見せる */
  width: 200%;    /* 横幅を200%に広げて、カーブをさらに緩やかに */
  height: 250px;  /* 円の高さ */
  background: #fff; /* 下のセクションの背景色と同じ白を指定 */
  border-radius: 50%;
}

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

.admission-steps-section {
  padding: 100px 0;
}

.step-feature .title {
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 0;
  }
  
.step-feature .title + .title-underline {
      margin-bottom: 40px;
  }
.step-feature {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 0;
  background: #fff;
}

.step-feature__inner {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.step-feature__icon-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 220px;
}

.step-feature__icon {
  width: 180px;
  height: 180px;
  background: #f7941d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-feature__icon img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.step-feature__arrows {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.step-feature__arrows .arrow {
  width: 40px;
  height: 24px;
  display: block;
  margin: 0 auto;
  background: none;
  position: relative;
}
.step-feature__arrows .arrow::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 18px solid #ffe066;
  margin: 0 auto;
}

.step-feature__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 12px;
}

.step-feature__title {
  font-family: 'M PLUS 1p', sans-serif;
  background: #f7941d;
  color: #fff;
  font-size: 27px;
  font-weight: bold;
  border-radius: 5px;
  padding: 16px 32px;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
  display: inline-block;
}

.step-feature__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #222;
  line-height: 2;
  font-weight: 400;
  background: none;
  letter-spacing: 0.05em;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .step-feature__inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .step-feature__content {
    align-items: center;
    text-align: center;
    margin-top: 0;
  }
  .step-feature__title {
    padding: 12px 10px;
    font-size: 1.2rem;
  }
  .step-feature__icon-area {
    min-width: 0;
  }
}

.step-feature-list {
  display: flex;
  flex-direction: column;
}


/* 色バリエーション */
.step-orange .step-feature__icon,
.step-orange .step-feature__title { background: #f7941d; color: #fff; }
.step-sky .step-feature__icon,
.step-sky .step-feature__title { background: #53c1e8; color: #fff; }
.step-red .step-feature__icon,
.step-red .step-feature__title { background: #ff716a; color: #fff; }
.step-blue .step-feature__icon,
.step-blue .step-feature__title { background: #00a0ea; color: #fff; }
.step-green .step-feature__icon,
.step-green .step-feature__title { background: #16c459; color: #fff; }

/* STEP番号部分だけ白背景＋色文字 */
.step-feature__title span {
  background: #fff;
  color: inherit;
  border-radius: 4px;
  padding: 4px 14px;
  margin-right: 12px;
  font-size: 1.2rem;
  font-weight: bold;
}

/* 既存の .step-feature, .step-feature__inner, ... のCSSはそのまま使えます */

.step-feature__title {
  display: block;
  width: 100%;
  text-align: left;
}
.step-feature__content {
  width: 100%;
  max-width: 700px;
}

.section-title {
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  font-family: 'M PLUS 1p', sans-serif;
  letter-spacing: 1.8px;
  margin-bottom: 70px;
  position: relative;
  padding-bottom: 0;
}
.section-title .highlight {
  color: #f7941d;
  font-size: 1.2em;
  font-weight: bold;
}

/* 入塾までのステップ タイトル帯デザイン
---------------------------------------------------------- */
.step-feature__title {
  display: flex;
  align-items: center;
  width: 100%;
  background: #f7941d;
  border-radius: 5px;
  margin-bottom: 24px;
  overflow: hidden;
  font-family: 'M PLUS 1p', sans-serif;
}

.step-feature__step {
  display: flex;
  align-items: center;
  background: #fff;
  color: #f7941d;
  font-weight: bold;
  font-size: 2rem;
  padding: 0 32px 0 24px;
  height: 72px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  letter-spacing: 0.05em;
}
.step-feature__main {
  color: #fff;
  font-weight: bold;
  font-size: 27px;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  letter-spacing: 0.05em;
}

/* 色バリエーション */
.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-orange .step-feature__step { color: #f7941d; }
.step-sky .step-feature__step { color: #53c1e8; }
.step-red .step-feature__step { color: #ff716a; }
.step-blue .step-feature__step { color: #00a0ea; }
.step-green .step-feature__step { color: #16c459; }

/* レスポンシブ */
@media (max-width: 900px) {
  .step-feature__title {
    flex-direction: column;
    align-items: stretch;
    border-radius: 12px;
  }
  .step-feature__step,
  .step-feature__main {
    justify-content: center;
    height: 48px;
    font-size: 1.1rem;
    padding: 0 12px;
    border-radius: 0;
  }
  .step-feature__step {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
  }
  .step-feature__main {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}

/* =================================================================
　入塾案内 (page-info.php)
================================================================= */

/*--info-toku--*/
.info-toku_wrap {
  padding: 100px 0 100px;
  background: #fff10226;
}

.info-toku_inner {
  width: 1100px;
  margin: 0 auto 100px;
}

.info-toku_inner h2 {
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  font-family: "M PLUS 1p", sans-serif;
  color: #000;
  letter-spacing: 1px;
}

.info-toku_inner h2 .info-toku_box {
  background-color: #00A0EA;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  margin: 0 5px 10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
}

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

.info-toku_wrap .txt {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.2px;
  line-height: 2;
  text-align: center;
  display: block;
  margin: 45px 0 55px;
}

.info-toku_inner ul.info-toku_box-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.info-toku_inner ul.info-toku_box-list li {
  width: 295px;
  height: 75px;
  display: grid;
  place-content: center;
  background-image: linear-gradient(305deg, #f08622 40%, #f39521 41%);
  border-radius: 8px;
}

.info-toku_inner ul.info-toku_box-list li p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

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

/* --- 基本優待タイトル装飾 --- */
.info-toku_title {
  width: 100%;
  margin: 48px auto 20px auto;
  text-align: center;
  position: relative;
}

.info-toku_title-border {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.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 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 12px;
  z-index: 1;
}
.info-toku_title-crown img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.info-toku_title-text {
  color: #f7941d;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.08em;
  font-family: "M PLUS 1p", sans-serif;
  margin: 5px 0 12px;
  line-height: 1.1;
  display: inline-block;
  padding: 0 18px;
}

/* 上下ボーダーの長さを揃える（両方100%） */
.info-toku_title-border.top::before,
.info-toku_title-border.top::after,
.info-toku_title-border.bottom::before,
.info-toku_title-border.bottom::after {
  max-width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .info-toku_title {
    max-width: 95vw;
    margin: 28px auto 18px auto;
  }
  .info-toku_title-text {
    font-size: 1.3rem;
    padding: 0 8px;
  }
  .info-toku_title-crown {
    width: 26px;
    height: 26px;
    margin: 0 4px;
  }
  .info-toku_title-crown img {
    width: 20px;
    height: 20px;
  }
  .info-toku_title-border {
    height: 10px;
  }
  .info-toku_title-border::before,
  .info-toku_title-border::after {
    height: 2px;
  }
}

/* 転塾優待（のりかえ割）ブロック */
.transfer-privilege {
  width: 1100px;
  margin: 0 auto 100px;
}
.transfer-privilege__cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: 0 auto;
  max-width: 900px;
}
.transfer-privilege__card-group {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1 1 0;
  min-width: 520px;
  min-height: 360px;
  box-shadow: 0 4px 24px #f7941d22;
  justify-content: center;
}
.transfer-privilege__card-group--orange {
  box-shadow: 0 4px 24px #f7941d33;
}
.transfer-privilege__card-group--blue {
  box-shadow: 0 4px 24px #00a0ea22;
}
.transfer-privilege__card {
  background: linear-gradient(305deg, #f08622 40%, #f39521 41%);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  border-radius: 8px;
  padding: 22px 0;
  margin: 0 60px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px #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 2px 8px #00a0ea22;
}
.transfer-privilege__card span {
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff005;
  margin-left: 6px;
}
.transfer-privilege__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 150px;
  color: #00a0ea;
  font-weight: 400;
  padding: 0 18px;
  user-select: none;
}
@media (max-width: 900px) {
  .transfer-privilege__cards {
    flex-direction: column;
    gap: 24px;
    max-width: 98vw;
  }
  .transfer-privilege__plus {
    font-size: 2.2rem;
    padding: 12px 0;
  }
  .transfer-privilege__card-group {
    padding: 28px 10px;
    min-width: 0;
    max-width: 100vw;
  }
}

.transfer-privilege__card-group-title {
  font-size: 20px;
  letter-spacing: 0.08em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: bold;
  color: #333;
  text-align: center;
}

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

/* タイトル（info-toku_titleは既存のまま流用） */
.privilege-block__title {
  margin-bottom: 32px;
}

/* 説明文 */
.privilege-block__desc {
  margin-bottom: 48px;
}

/* カード部分（transfer-privilege__cardsは既存のまま流用） */
.privilege-block__cards {
  /* 既存の .transfer-privilege__cards のCSSが効きます */
}

/* =========================
   成績保証制度セクション
========================= */
.result-guarantee-section {
  padding: 120px 0 100px 0;
  background: #fff;
  text-align: center;
}
.result-guarantee-title {
  font-size: 35px;
  font-weight: bold;
  color: #000;
  margin-bottom: 36px;
  letter-spacing: 0.08em;
  font-family: "M PLUS 1p", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-guarantee-title span {
  color: #f7941d;
}
.result-guarantee-desc {
  font-size: 16px;
  font-weight: 800px;
  color: #222;
  margin-bottom: 60px;
  line-height: 2;
  letter-spacing: 0.08em;
  font-family: "Noto Sans JP", sans-serif;
}
.result-guarantee-cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  margin: 0 auto;
  max-width: 1100px;
}
.result-guarantee-card {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px #0001;
  position: relative;
}
.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: 6px;
  margin-bottom: 15px;
  height: 100px; /* 高さを指定して中央寄せを確実に */
}
.result-guarantee-card__label {
  width: fit-content;
  background: #fff;
  color: #ff9800;
  font-size: 30px;
  font-weight: bold;
  border-radius: 5px;
  padding: 3px 12px;
  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: 20px;
  font-weight: bold;
  color: #fff;
  font-family: "M PLUS 1p", sans-serif;
  letter-spacing: 0.08em;
}
.result-guarantee-card__highlight {
  color: #fff102;
  font-size: 30px;
  font-weight: bold;
  margin-right: 4px;
}


/* 成績保証制度 注意書きボックス */
.result-guarantee-section .note-box {
    background: #fffde2;
    border-radius: 5px;
    padding: 50px 100px;
    margin: 40px auto 0 auto;
    max-width: 1200px;
    line-height: 2.1;
    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: 18px;
  font-size: 15px;
  color: #222;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.result-guarantee-section .note-box li:last-child {
  margin-bottom: 0;
}


/*--info-inq--*/
.info-inq_wrap {
    background-color: #FD9915;
    /* オレンジ背景 */
}

.info-inq_inner {
    margin: 0 auto;
    padding: 100px 0;
}

.info-inq_inner h2 {
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    border-bottom: 3px solid #FD9915;
    padding-bottom: 20px;
    margin-bottom: 50px;
}

.info-inq_inner h2 span {
    color: #FD9915;
}

/* --- 中身の中央寄せ・余白 --- */
.info-inq_conts {
    width: 1080px;
    height: 365px;
    display: grid;
    place-content: center;
    background-color: #fff;
    margin: 0 auto 40px;
}

/* --- 説明文 --- */
.info-inq_conts p {
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    text-align: center;
    display: block;
    width: 700px;
    margin-bottom: 40px;
}

/* --- 問い合わせボタンのリスト --- */
.info-inq_conts ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 700px;
    margin: 0 auto;
    padding: 0;
    gap: 40px;
}

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

/* --- LINEボタン（左端） --- */
.info-inq_conts ul li:nth-child(1) {
    align-items: flex-start;
}

.info-inq_conts ul li:nth-child(1) a {
    border: 2px solid #16C459;
    /* 緑色の枠 */
    color: #16C459;
}

/* --- 電話ボタン（中央） --- */
.info-inq_conts ul li:nth-child(2) {
    margin-bottom: 20px;
    /* メールボタンとの間隔 */
}

.info-inq_conts ul li:nth-child(2) a {
    border: none;
    background: none;
    box-shadow: none;
    color: #000;
    font-size: 10px;
    font-weight: bold;
    height: 110px;
    padding-top: 25px;
    margin: 0;
    /* flex-direction, align-items, justify-content, text-align, gap を削除 */
}

.info-inq_conts ul li:nth-child(2) a p {
    font-size: 10px;
    font-weight: bold;
    color: #0090ea;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* --- メールボタン（右端） --- */
.info-inq_conts ul li:nth-child(3) a {
    border: 2px solid #FD9915;
    /* オレンジ色の枠 */
    color: #FD9915;
}

/* --- ボタン共通 --- */
.info-inq_conts ul li a {
    width: 260px;
    box-sizing: border-box;
    text-align: left;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 55px;
    font-size: 14px;
    font-weight: bold;
    background-color: #fff;
    position: relative;
}

/* --- アイコンの位置調整 --- */
.info-inq_conts ul li a .icon {
    left: 20px;
    top: 10px;
    position: absolute;
}

.info-inq_conts ul li a .color {
    right: 20px;
    top: 13px;
    position: absolute;
}
/*--/info-inq--*/

/*--info-inq--*/

/* 電話ボタン（中央）アイコンと番号の横並び中央揃え */
.info-inq_tel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  box-shadow: none;
  color: #000;
  font-size: 32px;
  font-weight: bold;
  height: 110px;
  margin: 0;
  text-align: center;
  gap: 18px;
  position: relative;
  flex-direction: row;
}

.info-inq_tel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  height: 28px;
  margin-right: 8px;
}
.info-inq_tel-icon img {
  width: 28px;
  height: 28px;
  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;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1;
  display: block;
  align-items: center;
}

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

/* プライバシーポリシーページ用 */

/* メインビジュアル */
.privacy-page-hero {
  width: 100%;
  height: 600px; /* 画像の高さに応じて調整してください */
  /* 頂いた画像名 elementary_top を背景画像として指定します */
  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; /* はみ出す曲線を隠します */
}

/* 画像の下に白い曲線を追加するための設定 */
.privacy-page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -200px; /* 円を大きくはみ出させて緩やかなカーブに見せる */
  width: 200%;    /* 横幅を200%に広げて、カーブをさらに緩やかに */
  height: 250px;  /* 円の高さ */
  background: #fff; /* 下のセクションの背景色と同じ白を指定 */
  border-radius: 50%;
}


/* タイトル＋下線 */
  .privacy-title-wrap {
    margin-bottom: 60px;
    text-align: center;
  }
  .privacy-inner {
    padding: 100px 0;
  }
  .privacy-title {
      font-family: 'M PLUS 1p', sans-serif;
      font-size: 35px;
      font-weight: 800;
      margin: 0 auto 40px;
      text-align: center;
      padding-bottom: 0;
  }
.privacy-title + .title-underline {
  margin-bottom: 50px;
}
/* 本文エリア */
.privacy-section-wrap {
  max-width: 1080px;
  margin: 0 auto 80px auto;
}

.privacy-section {
  margin-bottom: 48px;
}
.privacy-section-title {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 18px;
  font-family: 'Noto Sans JP', sans-serif;
}
.privacy-section-bar {
  display: inline-block;
  width: 5px;
  height: 32px;
  background: #fd9914;
  border-radius: 2px;
  margin-right: 12px;
}
.privacy-section-text {
  font-size: 17px;
  color: #222;
  line-height: 2;
  font-family: 'Noto Sans JP', sans-serif;
  margin-left: 18px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .privacy-page-hero {
    margin-top: 32px;
    margin-bottom: 24px;
  }
  .page-hero-title {
    font-size: 26px;
  }
  .privacy-title-wrap {
    margin-bottom: 32px;
  }
  .course-point-title {
    font-size: 20px;
    margin-bottom: 0;
  }
  .title-underline {
    gap: 6px;
    margin: 10px auto 18px auto;
    height: 4px;
  }
  .title-underline .line {
    width: 28px;
    height: 100%;
  }
  .privacy_wrap {
    padding: 0 8px;
  }
  .privacy-section-title {
    font-size: 16px;
  }
  .privacy-section-bar {
    height: 18px;
    margin-right: 6px;
  }
  .privacy-section-text {
    font-size: 14px;
    margin-left: 6px;
  }
}

/* =========================
   お問い合わせページ
   ========================= */

/* お問い合わせページ：ヒーロー画像 */
.contact-page-hero {
  width: 100%;
  height: 600px;
  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;
}

/* お問い合わせページ：ヒーロー画像下の白い曲線 */
.contact-page-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -200px;
  width: 200%;
  height: 250px;
  background: #fff;
  border-radius: 50%;
}

/* お問い合わせページ：タイトル＋下線 */
  .contact-title-wrap {
    margin-bottom: 60px;
    text-align: center;
  }
  .contact-inner {
    padding: 100px 0;
  }
  .contact-title {
      font-family: 'M PLUS 1p', sans-serif;
      font-size: 35px;
      font-weight: 800;
      margin: 0 auto 40px;
      text-align: center;
      padding-bottom: 0;
  }
.contact-title + .title-underline {
  margin-bottom: 50px;
}

/* お問い合わせページ：フォーム */
.contact-form {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* お問い合わせページ：テーブル全体 */
.contact-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* お問い合わせページ：1行分のラッパー */
.contact-row {
  display: flex;
  width: 100%;
  min-height: 60px;
  border-bottom: 1px solid #fd9914;
}

.contact-label {
  color: #fff;
  font-size: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  
}
/* お問い合わせページ：ラベルエリア */
.contact-label-area {
  display: flex;
  background: #fd9914;
  width: 400px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-right: 1px solid #fff;
  position: relative;
  border-bottom: 1px solid #fff;
}

/* お問い合わせページ：必須ラベル */
.contact-required {
  display: inline-block;
  background: #E74C3C;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 5px;
  padding: 2px 10px;
  margin-left: auto;
}

/* お問い合わせページ：インプットエリア */
.contact-input-area {
  flex: 1;
  align-items: center;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}

/* お問い合わせページ：テキスト・セレクト共通 */
.contact-input,
.contact-select {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  background: #fff;
  color: #000;
  box-sizing: border-box;
}

/* お問い合わせページ：セレクトボックス */
.contact-select {
  min-width: 120px;
  max-width: 200px;
}

/* お問い合わせページ：テキストエリア */
.contact-textarea {
  width: 100%;
  font-size: 16px;
  padding: 8px;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  background: #fff;
  color: #222;
  min-height: 180px;
  box-sizing: border-box;
  resize: vertical;
}

/* =========================
   お問い合わせページ：プライバシーポリシー行
   ========================= */
.contact-row-policy .contact-input-area {
  align-items: center;
}
.contact-policy-link-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.05em;
  margin-left: 12px;
}
.contact-policy-link {
  color: #000;
  font-size: 15px;
  font-weight: bold;
}
.contact-policy-link-wrap span {
  color: #fd9914;
  text-decoration: underline;
  font-weight: 500;
}


/* =========================
   お問い合わせページ：送信ボタン
   ========================= */
.contact-submit-wrap {
  text-align: center;
  margin-top: 36px;
}
.contact-submit {
  background: #fd9914;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  padding: 16px 60px;
  cursor: pointer;
  transition: background 0.2s;
}
.contact-submit:hover {
  background: #ffb84d;
  color: #fff;
}

/* お問い合わせページ：プライバシーポリシー*/
.contact-policy-row {
  display: flex;
  width: 100%;
  min-height: 60px;
  border-bottom: 1px solid #fd9914;
}

.contact-policy-row .contact-label-area {
  display: flex;
  align-items: center;
  background: #fd9914;
  width: 400px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.contact-policy-row .contact-input-area {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  gap: 12px;
  min-height: 60px;
}

/* チェックボックスとテキストを横並びに */
.contact-policy-row .wpcf7-checkbox,
.contact-policy-row .wpcf7-list-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* チェックボックス自体のサイズ調整 */
.contact-policy-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}


/* スペースが広すぎる場合の調整 */
.contact-policy-row .contact-input-area {
  padding: 0 10px;
  min-height: 60px;
}