@charset "UTF-8";

/* ===================================================
 * Google Fonts の読み込み
 * =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;800&family=Oswald:wght@400;600;700&family=Roboto+Condensed:wght@700&display=swap');

/* ===================================================
 * テーマ別カラー変数の定義
 * =================================================== */

/* 汎用（デフォルト） */
.schoolTop_default {
  --color-primary: linear-gradient(90deg, #1C3568 0%, #26488D 100%);       /* ボタン・サブカラー */
  --color-primary-hover: linear-gradient(90deg, #1C3568 0%, #26488D 100%); /* ボタンホバー */
  --color-accent: #E0004D;        /* スクール名 */
  --color-sub-title: #224D9A;     /* ことば地図のサブテキスト */
  --color-divider: #E0004D;       /* 区切り線 */
  --color-card-shadow: rgba(237, 201, 211, 0.30);      /* 影 */
  --color-card-border: #FFEDF2;      /* ボーダーカラー */
  --bg-image: url('/school/include/img/bg_default.png');  /*背景画像 */
  --page-bg-color: #fff;/*  全体背景用の設定（色または画像） */
  --color-info-title: #333; /* スクール情報のタイトル色 */
    
   --bg-stripe: repeating-linear-gradient(/* ストライプ背景 */
    -45deg,          /* 斜めの角度（-45deg または 45deg） */
    #ffffff,         /* 1色目：白（開始） */
    #ffffff 5px,    /* 1色目：白（20pxの位置まで） */
    #FFF8FA 5px,    /* 2色目：ピンク（20pxの位置から） */
    #FFF8FA 10px     /* 2色目：ピンク（40pxの位置まで） */
  );
}

/* ビジネス */
.schoolTop_biz {
  --color-primary: linear-gradient(90deg, #1C3568 0%, #26488D 100%);
  --color-primary-hover: linear-gradient(90deg, #1C3568 0%, #26488D 100%);
  --color-accent: #E0004D;
  --color-sub-title: #224D9A;
  --color-divider: #E0004D;
  --color-card-shadow: rgba(237, 201, 211, 0.30);
  --color-card-border: #FFEDF2;
  --bg-image: url('/school/include/img/bg_biz.png');
  --page-bg-color: #fff;
  --color-info-title: #333; 
    
   --bg-stripe: repeating-linear-gradient(
    -45deg, 
    #ffffff, 
    #ffffff 5px,
    #FFF8FA 5px, 
    #FFF8FA 10px 
  );
}


/* プレミアム */
.schoolTop_premium {
  --color-primary:  linear-gradient(90deg, #A68307 0%, #DDA420 100%);
  --color-primary-hover: linear-gradient(90deg, #A68307 0%, #DDA420 100%);
  --color-accent: #9B7B10;
  --color-sub-title: #333;
  --color-divider: #9B7B10;
  --color-card-shadow: rgba(155, 123, 16, 0.10);
  --color-card-border: #F7F0DB;
  --bg-image: url('/school/include/img/bg_premium.png'); 
  --page-bg-color: #F7F3E8;
  --color-info-title: #fff;
    
   --bg-stripe: repeating-linear-gradient(
    -45deg, 
    #565346, 
    #565346 5px,
    #524F43 5px, 
    #524F43 10px 
  );
}

/* 学生 */
.schoolTop_student {
  --color-primary:linear-gradient(90deg, #1C3568 0%, #26488D 100%);
  --color-primary-hover: linear-gradient(90deg, #1C3568 0%, #26488D 100%);
  --color-accent: #E0004D;
  --color-sub-title: #224D9A;
  --color-divider: #E0004D;
  --color-card-shadow: rgba(237, 201, 211, 0.30);
  --color-card-border: #FFEDF2;
  --bg-image: url('/school/include/img/bg_student.png');
  --page-bg-color: #fff;
  --color-info-title: #333; 
    
   --bg-stripe: repeating-linear-gradient(
    -45deg, 
    #ffffff, 
    #ffffff 5px,
    #FFF8FA 5px, 
    #FFF8FA 10px 
  );
}

/* 女性 */
.schoolTop_woman {
  --color-primary: linear-gradient(90deg, #1C3568 0%, #26488D 100%);
  --color-primary-hover: linear-gradient(90deg, #1C3568 0%, #26488D 100%);
  --color-accent: #E0004D;
  --color-sub-title: #224D9A;
  --color-divider: #E0004D;
  --color-card-shadow: rgba(237, 201, 211, 0.30);
  --color-card-border: #FFEDF2;
  --bg-image: url('/school/include/img/bg_woman.png');
  --page-bg-color: #fff;
  --color-info-title: #333; 
    
   --bg-stripe: repeating-linear-gradient(
    -45deg, 
    #ffffff, 
    #ffffff 5px,
    #FFF8FA 5px, 
    #FFF8FA 10px 
  );
}

/* ===================================================
 * ベースリセット & 全体設定
 * =================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  line-height: 1.5;
  background-color: var(--page-bg-color); 
}

/* FV全体セクション */
.fv-section {
  width: 100%;
  padding: 40px 20px;
  overflow: hidden;
  
  /* 背景画像の設定 */
  background-image: var(--bg-image);
  background-size: cover;   
  background-position: center;     /* 中央寄せ */
  background-repeat: no-repeat;    /* 繰り返しなし */
}

/* 全体コンテナ */
.fv-container {
  max-width: 1270px; 
  margin: 0 auto;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* ===================================================
 * 左側カードエリア
 * =================================================== */
.fv-left-card {
  flex: 0 0 600px; /* ← 600pxに固定 */
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 10px 10px 0 0 var(--color-card-shadow, rgba(0,0,0,0.08));
  border: 2px solid var(--color-card-border);
}

.sub-catch {
  color: var(--color-sub-title);
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 140%;
}

.school-title {
  color: var(--color-accent);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-divider);
  margin: 16px 0;
}

.main-copy {
  color: #333;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 140%;
  margin-bottom:24px;
}

/* イラスト・メダル領域 */
.illustration-box {
  margin-bottom: 24px;
  text-align: center;
}

.illustration-box img {
}

/* CTAエリア */
.cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary);
  color: #fff;
  transition: transform 0.2s, background-color 0.2s;
  min-width: 340px;
  font-size: 16px;
  font-weight: 700;
  line-height: 160%;
  border-radius: 90px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  padding: 12px 48px;
  text-decoration: none !important;
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  opacity: .9;
}

.btn-primary .arrow {
  font-size: 1.2rem;
  margin-left: 10px;
}

/* PC：無料体験レッスンのボタンとGoogleクチコミのボタンを1行（左右）に並べる */
@media screen and (min-width: 769px) {
  .cta-group {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
  }
  .cta-group .ml_area {
    flex: 0 0 auto;
  }
  .cta-group .btn-primary {
    min-width: 290px;
    padding: 12px 32px;
  }
  .cta-group .link-review {
    flex: 0 0 auto;
    min-width: 190px;
    padding: 6px 20px 8px;
    white-space: nowrap;
  }
}

/* Googleクチコミを見る（白地・青枠の丸ボタン。下段に「（★★★★☆ 4.8）」） */
.link-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 6px 28px 8px;
  box-sizing: border-box;
  border: 1px solid #3D62C4;
  border-radius: 90px;
  background: #fff;
  color: #26488D;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.link-review .stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  font-size: 12px;
  font-weight: 400;
}

.link-review .stars::before { content: "（"; color: #333; }
.link-review .stars::after { content: "）"; color: #333; }

/* 星はクチコミ欄と同じ rating-stars（--rating の値で塗り分け）を小さく表示 */
.link-review .rating-stars {
  --star-h: 12px;
}

.star-icons {
  color: #f39c12;
  font-size: 1.2rem;
}

.score {
  font-weight: bold;
  color: #333;
}

.link-review .score {
  font-size: 12px;
  line-height: 1;
}

/* ===================================================
 * 右側スライダーエリア（Swiper設定）
 * =================================================== */
.fv-right-slider {
  flex: 0 0 640px;
  width: 100%;
  max-width: 100%;
  min-width: 0; 
}

.bl_schTopContents_image,
.schTopSlider,
.swiper {
  width: 100%;
  height: 428px; /* スライダー全体の高さを428pxに固定 */
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
}

/* スライド要素（Swiper本体） */
.schTopSlider .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}

/* スライド内の画像：縦横比を保ったまま枠いっぱいに拡大・縮小 */
.schTopSlider .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 縦横比を崩さず綺麗に枠全体に拡大縮小（はみ出た部分はトリミング） */
  display: block !important;
  border-radius: 12px;
}

/* Swiper矢印ボタンのカスタム（丸型） */
.swiper-button-prev,
.swiper-button-next {
  width: 40px !important;
  height: 40px !important;
  border-radius: 52px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  top: 50% !important;
  transform: translateY(-50%);
  margin-top: 0 !important;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

/* Swiper標準フォントアイコン（::after）を非表示化 */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}

/* CSSで作成する矢印の共通スタイル */
.swiper-button-prev::before,
.swiper-button-next::before {
  content: "";
  display: block;
  width: 12px;              /* 矢印のサイズ（横幅） */
  height: 12px;             /* 矢印のサイズ（高さ） */
  border-top: 3px solid #333333;  /* 矢印の太さと色 */
  border-right: 3px solid #333333;/* 矢印の太さと色 */
  position: absolute;
  top: 50%;
}

/* 左矢印（＜） */
.swiper-button-prev {
  left: 15px;
}
.swiper-button-prev::before {
  left: 15px;
  transform: translateY(-50%) rotate(-135deg); /* 左向きに回転 */
}

/* 右矢印（＞） */
.swiper-button-next {
  right: 15px;
}
.swiper-button-next::before {
  right: 15px;
  transform: translateY(-50%) rotate(45deg);   /* 右向きに回転 */
}

/* FVスライダーのドット（SPのみ表示） */
.fv-swiper .swiper-pagination {
  display: none;
}

.annotations p{
  font-size: 12px;
  color: var(--color-info-title, #000);
}

/* ===================================================
 * スクール情報セクション
 * =================================================== */

.school-info-section {
  width: 100%;
  padding: 80px 20px;
  background: var(--bg-stripe);
}

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

/* ヘッダーエリア */
.info-header {
  position: relative;
  margin-bottom: 48px;
  padding-bottom: 24px;
  text-align: center;
}

.info-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 160px;
  height: 1px;
  background: var(--color-sub-title);
  transform: translateX(-50%);
}

.info-icon {
  width: 59px;
  margin: 0 auto 8px;
}

.info-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.info-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.5px;
  text-align: center;
  color: var(--color-info-title, #000);
}

/* 白枠カード（共通） */
.info-card,
.info-gallery-body,
.info-counselor {
  border-radius: 10px;
  background-color: var(--page-bg-color);
}

.info-card {
  margin-bottom: 40px;
  padding: 40px;
}

/* Googleマップ領域 */
.map-wrapper {
  width: 100%;
  height: 400px;
  margin-bottom: 16px;
  overflow: hidden;
  background-color: #eee;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 詳細テキスト領域 */
.info-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 見出しラベル（テーマのアクセントカラーを連動） */
.info-label {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: var(--color-accent);
}

/* 本文テキスト */
.info-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
}

.info-text a {
  color: inherit;
  text-decoration: none;
}

.info-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-bottom: 8px;
}

.info-label-row .info-label {
  margin-bottom: 0;
}

.info-parking {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.info-notice {
  width: 100%;
  padding: 8px;
  background: #fff8fa;
}

/* 道順 */
.info-route {
  width: 100%;
}

.info-route-item {
  width: 100%;
  margin-bottom: 8px;
}

.info-route-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
}

.info-route-head.js-accordionBtn {
  cursor: pointer;
}

/* 道順の開閉パネルは初期状態で閉じておく（jQueryのslideToggleで開閉） */
.info-route-body.js-accordionPanel {
  display: none;
}

.info-route-head.js-accordionBtn::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-top: 1.5px solid var(--color-accent);
  border-right: 1.5px solid var(--color-accent);
  transform: rotate(135deg);
  transition: transform 0.3s;
}

.info-route-head.js-accordionBtn.is-open::after {
  margin-top: 3px;
  transform: rotate(-45deg);
}

.info-route-body,
.info-route-list {
  padding: 8px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
  background: #fff8fa;
}

.info-route-list {
  padding: 16px 24px;
  list-style: none;
}

.info-route-list li + li {
  margin-top: 8px;
}

.info-route-body p + p {
  margin-top: 12px;
}

/* 道順動画 */
.info-video {
  position: relative;
  width: 100%;
  margin-top: 36px;
  padding: 64px 24px 24px;
  background: #fff8fa;
  text-align: center;
}

.info-video-label {
  position: absolute;
  top: -24px;
  left: 50%;
  padding: 16px 40px;
  border-radius: 72px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.9px;
  white-space: nowrap;
  color: #fff;
  background: var(--color-accent);
  transform: translateX(-50%);
}

.info-video-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 10px solid var(--color-accent);
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  transform: translateX(-50%);
}

.info-video-sub {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
}

.info-video .movie {
  position: relative;
  width: 448px;
  max-width: 100%;
  margin: 0 auto 24px;
  aspect-ratio: 16 / 9;
}

.info-video .movie:last-child {
  margin-bottom: 0;
}

.info-video .movie .thumb {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.info-video .movie .thumb figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.info-video .movie .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-video .movie iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 受付時間 */
.info-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 4px;
  width: 100%;
  list-style: none;
}

.info-hours li {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 180px;
  padding: 0 0 6px 8px;
  border-bottom: 1px dashed #ccc;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  white-space: nowrap;
  color: #333;
}

.info-hours-day {
  font-weight: 700;
}

.info-hours-day.is-sat {
  color: var(--color-sub-title);
}

.info-hours-day.is-hol {
  color: var(--color-accent);
}

/* 共通：見出し・本文・アウトラインボタン */
.info-feature-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--color-accent);
}

.info-feature-text {
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.7px;
  color: #333;
}

.info-btn-outline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  max-width: 100%;
  padding: 16px 24px;
  border: 1px solid #214d9a;
  border-radius: 90px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none !important;
  color: #214d9a;
  background: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s;
}

.info-btn-outline::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #214d9a;
  border-right: 2px solid #214d9a;
  transform: translateY(-50%) rotate(45deg);
}

.info-btn-outline:hover {
  opacity: 0.8;
}

/* 写真でスクールをご紹介 */
.info-gallery {
  margin-bottom: 40px;
}

.info-gallery-slider {
  position: relative;
  z-index: 1;
  display: flow-root; /* 中のスライダーの負のマージン（上下24px）が外に漏れないようにする */
  width: 800px;
  max-width: 100%;
  margin: 0 auto -104px;
}

/* スライダー本体（共通の .swiper-container の初期化に巻き込まれないよう .info-swiper を使用） */
.info-swiper {
  position: relative;
  z-index: 1;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  list-style: none;
}

.info-gallery .info-swiper {
  margin: -24px 0;
  padding: 24px 0;
}

.info-gallery .swiper-slide {
  width: 580px;
  transition: opacity 0.3s;
}

/* 初期化後のみ、中央以外のスライドを非表示にする */
.info-gallery .info-swiper.swiper-container-horizontal .swiper-slide:not(.swiper-slide-active) {
  opacity: 0;
}

.info-gallery .swiper-slide img {
  display: block;
  width: 580px;
  max-width: 100%;
  height: 386px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* ページネーション（画像下部に重ねる丸ドット） */
.info-gallery .swiper-pagination {
  bottom: 37px;
  z-index: 5;
}

.info-gallery .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  margin: 0 10px !important;
  background: #ccc;
  opacity: 1;
}

.info-gallery .swiper-pagination-bullet-active {
  background: var(--color-accent);
}

.info-gallery .swiper-button-prev,
.info-gallery .swiper-button-next {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: none;
}

.info-gallery .swiper-button-prev {
  left: 36px;
}

.info-gallery .swiper-button-next {
  right: 36px;
}

/* 矢印のシェブロン（白） */
.info-gallery .swiper-button-prev::before,
.info-gallery .swiper-button-next::before {
  width: 14px;
  height: 14px;
  border-width: 4px;
  border-color: #fff;
}

.info-gallery .swiper-button-prev::before {
  left: 20px;
}

.info-gallery .swiper-button-next::before {
  right: 20px;
}

.info-gallery-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 128px 40px 40px;
}

/* カウンセラー紹介 */
.info-counselor {
  display: flex;
  margin-bottom: 40px;
  overflow: hidden;
}

.info-counselor-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  min-width: 0;
  padding: 40px;
}

.info-counselor-label {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-sub-title);
}

/* 見出しの下の線（左側の線・右側の線・斜めの切り込み） */
.info-counselor-label::after {
  content: "";
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  height: 12px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--color-sub-title) calc(50% - 0.75px), var(--color-sub-title) calc(50% + 0.75px), transparent calc(50% + 0.75px)) 41px 0 / 12px 12px no-repeat,
    linear-gradient(var(--color-sub-title), var(--color-sub-title)) 0 0 / 44px 1px no-repeat,
    linear-gradient(var(--color-sub-title), var(--color-sub-title)) 52px 0 / calc(100% - 52px) 1px no-repeat;
}

.info-counselor-catch {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-accent);
}

.info-counselor-slider {
  position: relative;
  flex: 0 0 490px;
  width: 490px;
  min-height: 337px;
}

.info-counselor-slider .info-swiper {
  width: 100%;
  height: 100%;
}

.info-counselor-slider .swiper-slide {
  position: relative;
  height: auto;
}

.info-counselor-slider .swiper-slide > a {
  display: block;
  height: 100%;
}

.info-counselor-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 337px;
  object-fit: cover;
}

.info-counselor-slider .namebox {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24px 16px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.info-counselor-slider .swiper-button-prev,
.info-counselor-slider .swiper-button-next {
  width: 32px !important;
  height: 32px !important;
  box-shadow: none;
  background: #fff;
}

.info-counselor-slider .swiper-button-prev {
  left: 16px;
}

.info-counselor-slider .swiper-button-next {
  right: 16px;
}

.info-counselor-slider .swiper-button-prev::before,
.info-counselor-slider .swiper-button-next::before {
  width: 8px;
  height: 8px;
  border-width: 2px;
  border-color: var(--color-sub-title);
}

.info-counselor-slider .swiper-button-prev::before {
  left: 13px;
}

.info-counselor-slider .swiper-button-next::before {
  right: 13px;
}


/* ===================================================
 * コース・料金セクション
 * （カードのデザインは school_cinfo.css の .courses_list に合わせる）
 * =================================================== */

.school-course-section {
  width: 100%;
  padding: 80px 20px;
  background-color: var(--page-bg-color);
}

.school-course-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* カード一覧 */
.school-course-section .courses_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 auto 24px;
  list-style: none;
}

.school-course-section .courses_list > li {
  --course-color: #214D9A;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--course-color);
  border-radius: 5px;
  background: #fff;
}

.school-course-section .courses_list > li.theme_green { --course-color: #3D9E1A; }
.school-course-section .courses_list > li.theme_purple { --course-color: #6E219A; }
.school-course-section .courses_list > li.theme_yellow { --course-color: #E58200; }
.school-course-section .courses_list > li.theme_red { --course-color: #E40011; }
.school-course-section .courses_list > li.theme_light_blue { --course-color: #007ACB; }

.school-course-section .courses_list > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: #333;
}

/* 右下の矢印ボタン */
.school-course-section .courses_list > li > a::before {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 32px;
  height: 32px;
  border-radius: 5px 0 4px 0;
  background: var(--course-color);
}

.school-course-section .courses_list > li > a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.school-course-section .courses_list > li > a:hover {
  opacity: 0.85;
}

/* 人気ワッペン */
.school-course-section .courses_list > li.popular::before {
  content: "人気\A No.1";
  position: absolute;
  top: -13px;
  left: -13px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #EB004B;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: pre;
  text-align: center;
  color: #fff;
}

/* 写真右下のワッペン */
.school-course-section .courses_list > li.badge_right figure::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 60px; /* 以前は80px（75%に縮小） */
  height: 60px;
  background: url('/school/include/img/ai_app.png') no-repeat center / contain;
}

.school-course-section .courses_list > li figure {
  position: relative;
  margin: 0;
  aspect-ratio: 382 / 214;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}

.school-course-section .courses_list > li figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-course-section .courses_list_inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 24px 28px;
}

.school-course-section .courses_list > li h3 {
  display: grid;
  place-items: center;
  min-height: 2.4em;
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--course-color);
}

.school-course-section .courses_list > li h3 span {
  font-size: 20px;
}

/* 料金（DBの「料金」欄をそのまま表示） */
.school-course-section .price_area {
  margin-bottom: 8px;
  /* ラベル付き料金と「複数コースを掲載しています」の文言が混在しても、料金欄の高さを揃える */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
}

.school-course-section .course_cost {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #EB004B;
}
/* 「複数コースを掲載しています。料金は各コースの詳細でご確認ください。」の場合 */
.school-course-section .course_cost.is-multi {
  font-size: 13px;
  line-height: 1.5;
}
/* 料金欄にラベル付きHTML（school_cinfo.css の .price_area と同じ構造）が入る場合の表示 */
.school-course-section .course_cost:has(.label) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-weight: 700;
  line-height: normal;
  color: #333;
}
.school-course-section .course_cost .label {
  display: flex;
  width: 88px;
  padding: 2px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  box-sizing: border-box;
}
.school-course-section .course_cost .monthly {
  background: #E8E0E4;
  height: 48px;
  line-height: 1.3;
  text-align: center;
}
.school-course-section .course_cost .monthly_w {
  background: #E8E0E4;
  width: 120px;
  height: 48px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.school-course-section .course_cost .yearly {
  background: #F2F2F2;
  font-size: 14px;
}
.school-course-section .course_cost .amount {
  font-size: 18px;
  font-weight: 700;
}
.school-course-section .course_cost .monthly_price {
  color: #EB004B;
  font-size: 28px;
  font-weight: 700;
  line-height: 0.8;
}
.school-course-section .course_cost .yearly_price {
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}
.school-course-section .course_cost .price_note {
  font-size: 12px;
  font-weight: normal;
  line-height: normal;
  color: #333;
}
.school-course-section .course_cost .monthly_yen {
  margin-left: 2px;
  font-size: 16px;
  font-weight: 500;
}
.school-course-section .course_cost .yearly_yen {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 500;
}


.school-course-section .course_text {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* タグ */
.school-course-section .course_tags_txt {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin-top: auto;
  padding: 0 40px 0 0;
  list-style: none;
}

.school-course-section .course_tags_txt li {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: #666;
}

.school-course-section .course_tags_txt li::before {
  content: "#";
  margin-right: 2px;
  font-weight: 700;
  color: #007ACB;
}

.school-course-section .courses_list > li.theme_blue .course_tags_txt li::before { color: #214D9A; }
.school-course-section .courses_list > li.theme_green .course_tags_txt li::before { color: #3D9E1A; }
.school-course-section .courses_list > li.theme_purple .course_tags_txt li::before { color: #6E219A; }
.school-course-section .courses_list > li.theme_yellow .course_tags_txt li::before { color: #E58200; }
.school-course-section .courses_list > li.theme_red .course_tags_txt li::before { color: #E40011; }

/* 注記・コース一覧ボタン */
.course-note {
  margin-bottom: 48px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.course-more {
  display: flex;
  justify-content: center;
}


/* ===================================================
 * 講師紹介セクション
 * =================================================== */

.school-teacher-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 80px 20px;
  background: var(--page-bg-color);
}

.school-teacher-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 薄いピンクの帯：カード写真（高さ200px）の中間の位置から下まで */
.teacher_cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 auto 32px;
  list-style: none;
}

.teacher_cards::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100px; /* 写真の高さ200pxの半分 */
  bottom: -1000px; /* セクション下端まで（はみ出し分は .school-teacher-section の overflow:hidden で切る） */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: #fff8fa;
}

.teacher_cards > li {
  position: relative;
  border-radius: 10px;
  background: #fff;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.teacher_cards > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding-bottom: 24px;
  text-decoration: none;
  color: #333;
}

/* 右下の矢印ボタン */
.teacher_cards > li > a::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  border-radius: 5px 0 10px 0;
  background: #214D9A;
}

.teacher_cards > li > a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.teacher_cards > li > a:hover {
  opacity: 0.85;
}

.teacher_cards figure {
  height: 200px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.teacher_cards figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher_cards_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
  line-height: 1.6;
}

.teacher_cards_body h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: underline;
  text-underline-position: from-font;
  color: var(--color-accent);
}

.teacher_cards_movie {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--color-accent);
}

.teacher_cards_movie i {
  margin-right: 5px;
}

.teacher_cards_text {
  font-size: 14px;
  letter-spacing: 0.7px;
  color: #333;
}

/* 出身・担当言語 */
.teacher_cards_data {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  letter-spacing: 0.6px;
}

.teacher_cards_data > div {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #ddd;
}

.teacher_cards_data > div:last-child {
  border-bottom: 1px solid #ddd;
}

.teacher_cards_data dt {
  flex: 0 0 64px;
}

.teacher_cards_data dd {
  margin: 0;
}

/* 講師の特徴・受講生の特徴（スクール限定の文言がある校のみ出力） */
.school-feature {
  width: 720px;
  max-width: 100%;
  margin: 0 auto 32px;
}

.school-feature-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #333;
}

.school-feature-text {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.7px;
  color: #333;
}

.teacher-more {
  display: flex;
  justify-content: center;
}


/* ===================================================
 * 受講生の声セクション
 * =================================================== */

.school-student-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 80px 20px;
  background: var(--page-bg-color);
}

/* 薄いピンクの帯：カード写真（高さ200px）の中間の位置から下まで */
.student_cards_wrap {
  position: relative;
}

.student_cards_wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100px; /* 写真の高さ200pxの半分 */
  bottom: -1000px; /* セクション下端まで（はみ出し分は .school-student-section の overflow:hidden で切る） */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: #fff8fa;
}

.school-student-container {
  max-width: 1200px;
  margin: 0 auto;
}

.student_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 auto 32px;
  list-style: none;
}

.student_cards > li {
  position: relative;
}

.student_cards > li > a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: #333;
}

.student_cards figure {
  height: 200px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #ddd;
}

.student_cards figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真に少し重なる白いカード（左上に吹き出しの三角） */
.student_cards_body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  margin-top: -9px;
  padding: 24px 24px 56px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.student_cards_body::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 31px;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #fff;
  border-left: 9px solid transparent;
}

.student_cards_body h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #214D9A;
}

/* ご職業・受講コース・受講スタート時期 */
.student_cards_data {
  overflow: hidden;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  background: #f9f9f9;
}

.student_cards_data > div {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 15px 12px;
  border-bottom: 1px solid #e6e6e6;
}

.student_cards_data dt {
  flex: 0 0 96px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: #808080;
}

.student_cards_data dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: #333;
}

.student_cards_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.student_cards_tags li {
  padding: 4px 10px;
  border-radius: 100px;
  background: #e7f0f9;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: #1371bd;
}

.student_cards_text {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.65px;
  color: #333;
}

/* 右下の矢印ボタン */
.student_cards > li > a::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 5px 0 10px 0;
  background: #214D9A;
}

.student_cards > li > a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.student_cards > li > a:hover {
  opacity: 0.85;
}

/* ドットナビゲーションもスマホの横スライドでのみ表示 */
.student-dots {
  display: none;
}

/* 前後ボタンはスマホの横スライドでのみ表示 */
.student-btn {
  display: none;
}

.student-more {
  display: flex;
  justify-content: center;
}


/* ===================================================
 * Googleクチコミセクション
 * =================================================== */

.school-review-section {
  width: 100%;
  padding: 80px 20px;
  background-color: var(--page-bg-color);
}

.school-review-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 星（--rating の値に応じて塗り分ける。例：style="--rating:4.8"） */
.rating-stars {
  --star-h: 18px;
  display: block;
  flex: none;
  width: calc(var(--star-h) * 95 / 18);
  height: var(--star-h);
  background: linear-gradient(90deg, #EBB000 calc(var(--rating, 0) * 20%), #ccc 0);
  -webkit-mask: url('/school/include/img/icon_star.png') repeat-x 0 0 / calc(var(--star-h) * 19 / 18) var(--star-h);
  mask: url('/school/include/img/icon_star.png') repeat-x 0 0 / calc(var(--star-h) * 19 / 18) var(--star-h);
}

.rating-stars--lg {
  --star-h: 24px;
}

/* 評価サマリー */
.review-summary {
  display: grid;
  grid-template-columns: 134px 1fr;
  gap: 45px;
  align-items: center;
  margin-bottom: 40px;
  padding: 40px 67px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
}

/* 星別の内訳バーなし(スコア単体)の場合 */
.review-summary--solo {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 32px 20px;
}

/* PC：スコア単体のカードは正方形にする */
@media screen and (min-width: 769px) {
  .review-summary--solo {
    align-content: center;
    width: 260px;
    aspect-ratio: 1 / 1;
    margin-right: auto;
    margin-left: auto;
    padding: 24px;
    box-sizing: border-box;
  }
}

.review-note {
  margin: -8px 0 24px;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: #666;
}

.review-summary-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.review-score {
  font-family: 'Oswald', sans-serif;
  font-size: 66px;
  font-weight: 700;
  line-height: 1;
  color: #000;
}

.review-count {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #333;
}

.review-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 875px;
  list-style: none;
}

.review-bars li {
  display: flex;
  gap: 16px;
  align-items: center;
}

.review-bar {
  flex: 1;
  height: 10px;
  overflow: hidden;
  border-radius: 32px;
  background: #eee;
}

.review-bar > span {
  display: block;
  width: var(--ratio, 0%);
  min-width: 16px;
  height: 100%;
  border-radius: 32px;
  background: #3D62C4;
}

/* クチコミ一覧 */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
  list-style: none;
}

.review-item {
  padding-bottom: 24px;
  border-bottom: 1px solid #ccc;
}

.review-item-head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 7px;
}

.review-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
}

.review-date {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
}

.review-text {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
  color: #333;
}

/* もっと見る（外部リンク） */
.review-more {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.info-btn-outline.is-external {
  width: 272px;
  min-width: 260px;
}

.info-btn-outline.is-external::after {
  right: 20px;
  width: 14px;
  height: 14px;
  border: 0;
  background: url('/school/include/img/icon_external.png') no-repeat center / 14px 14px;
  transform: translateY(-50%);
}

/* 無料体験レッスンCTA（英語力診断シートのプレゼント） */
.info-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
}

.info-cta-caption {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.info-cta-caption::before,
.info-cta-caption::after {
  content: "";
  flex: none;
  width: 26px;
  height: 30px;
  background: url('/school/include/img/icon_cta_slash.png') no-repeat center / contain;
}

.info-cta-caption::after {
  transform: scaleX(-1);
}

.info-cta-icon {
  position: relative;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #eaf3fb;
}

.info-cta-icon img {
  position: absolute;
  top: -5px;
  left: 4px;
  width: 42px;
  height: auto;
}

.info-cta-text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--color-accent);
}

.info-cta-btn {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 16px 40px;
  border-radius: 90px;
  background: var(--color-primary);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-decoration: none !important;
  color: #fff;
  transition: opacity 0.2s;
}

.info-cta-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.info-cta-btn:hover {
  opacity: 0.85;
}


/* ===================================================
 * 選ばれ続ける理由セクション
 * =================================================== */

.school-reason-section {
  width: 100%;
  padding: 80px 20px;
  background:
    url('/school/include/img/bg_reason_wave.png') no-repeat center top / max(2084px, 100%) auto,
    linear-gradient(to bottom, #fff 73.394%, #f0f8ff);
  overflow: hidden;
}

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

.reason_list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
  list-style: none;
}

.reason_list > li {
  display: flex;
  gap: 48px;
  align-items: center;
  overflow: hidden;
  padding-right: 48px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 6px 5px 0 rgba(255, 231, 238, 0.4);
}

/* 偶数番目は写真を右側に */
.reason_list > li:nth-child(even) {
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: 48px;
  box-shadow: -5px 5px 0 rgba(255, 231, 238, 0.4);
}

.reason_list figure {
  flex: none;
  width: 260px;
  height: 174px;
  margin: 0;
}

.reason_list figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.reason_list_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.reason_list_head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.reason_list_label {
  padding: 6px 16px;
  border-radius: 5px;
  background: #214D9A;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: #fff;
}

.reason_list_no {
  font-family: 'Roboto Condensed', 'Oswald', sans-serif;
  font-size: 16px;
}

.reason_list_body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-accent);
}

.reason_list_body h3 .is-num {
  font-size: 30px;
}

.reason_list_body h3 .is-lg {
  font-size: 24px;
}

.reason_list_body h3 sup {
  font-size: 12.9px;
  vertical-align: baseline;
}

.reason_list_body p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.8px;
  color: #333;
}

.reason_note {
  font-size: 12px;
  line-height: 1.6;
  color: #333;
}


/* ===================================================
 * バナー
 * =================================================== */

.school-banner-section {
  width: 100%;
  padding: 48px 20px;
  background-color: var(--page-bg-color);
}

.school-banner-grid {
  display: grid;
  grid-template-columns: 491fr 490fr;
  grid-template-rows: auto auto;
  gap: 22px 20px;
  max-width: 1001px;
  margin: 0 auto;
}

.school-banner {
  position: relative;
  display: block;
}

.school-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.school-banner-col {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 22px;
}

.school-banner.is-beginner { grid-column: 1; grid-row: 1; }
.school-banner.is-talk { grid-column: 1; grid-row: 2; }

a.school-banner:hover {
  opacity: 0.85;
}

/* ===================================================
 * 商標表記・スクールへのお問い合わせ
 * =================================================== */

.school-contact-section {
  width: 100%;
  padding: 40px 20px 60px;
  text-align: center;
  background-color: var(--page-bg-color);
}

.school-legal-note {
  max-width: 1200px;
  margin: 0 auto 40px;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  color: #333;
}

.school-contact-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.5px;
  color: #333;
}

.school-contact-tel {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: 'Roboto Condensed', 'Oswald', sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.4;
  color: #224D9A;
}

.school-contact-tel::before {
  content: "";
  flex: none;
  width: 42px;
  height: 42px;
  background: url('/school/include/img/icon_tel_blue.png') no-repeat center / contain;
}

.school-contact-tel a {
  color: inherit;
  text-decoration: none;
}


/* ===================================================
 * よくあるご質問セクション
 * （中身は /faq/sch_faq.html の dl.faq_list。開閉は index_default.html 末尾のスクリプトで .is-open を付け外しする）
 * =================================================== */

.school-faq-section {
  width: 100%;
  padding: 80px 20px 24px;
  background-color: var(--page-bg-color);
}

.school-faq-container {
  max-width: 1200px;
  margin: 0 auto;
}

.school-faq-list {
  margin-bottom: 32px;
}

/* 共通CSS（common.css）の .faq_list の幅・余白・Q/Aバッジ（絶対配置）を打ち消す */
.school-faq-section .faq_list {
  width: auto;
  margin: 0;
}

.school-faq-section .faq_list > *::before {
  position: static;
}

/* 共通スクリプトが付ける display:none（インライン）より優先させるため !important を使う */
.school-faq-section .faq_list dt {
  position: relative;
  display: flex !important;
  gap: 8px;
  align-items: center;
  margin: 32px 0 0;
  padding: 0 40px 24px 0;
  border-bottom: 1px solid #ccc;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  cursor: pointer;
}

.school-faq-section .faq_list dt:first-of-type {
  margin-top: 0;
}

.school-faq-section .faq_list dt::before {
  content: "Q";
  position: static;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3D62C4;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

/* 開閉アイコン（＋／－） */
.school-faq-section .faq_list dt::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(#214D9A, #214D9A) center / 16px 2px no-repeat,
    linear-gradient(#214D9A, #214D9A) center / 2px 16px no-repeat;
}

.school-faq-section .faq_list dt.is-open::after {
  background: linear-gradient(#214D9A, #214D9A) center / 16px 2px no-repeat;
}

.school-faq-section .faq_list dt .icon-remove {
  display: none;
}

.school-faq-section .faq_list dd {
  display: none !important;
  margin: 0;
  padding: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
}

.school-faq-section .faq_list dd::before {
  display: none;
}

.school-faq-section .faq_list dd:not(:last-child) {
  margin: 0;
}

.school-faq-section .faq_list dt.is-open + dd {
  display: block !important;
  margin-top: 16px;
}

.school-faq-section .faq_list dd > * + * {
  margin-top: 12px;
}

.school-faq-section .faq_list dd .text_link {
  margin-top: 8px;
  font-size: 14px;
  text-align: right;
}

.school-faq-section .faq_list dd .text_link + .text_link {
  margin-top: 0;
}

.school-faq-section .faq_list dd .text_link a {
  color: #214D9A;
}

.faq-more {
  display: flex;
  justify-content: center;
}

.faq-more .info-btn-outline.is-external {
  width: 400px;
}


/* ===================================================
 * 体験レッスンセクション
 * =================================================== */

.school-trial-section {
  position: relative;
  width: 100%;
  padding: 80px 20px;
  overflow: hidden;
  background-color: #FFF8FA;
}

/* 背景の斜めの帯 */
.school-trial-section::before {
  content: "";
  position: absolute;
  top: 451px;
  right: 0;
  left: 0;
  height: 1088px;
  background: #FFF1F5;
  clip-path: polygon(0 18.5%, 100% 0, 100% 81.4%, 0 100%);
}

.school-trial-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.trial-header .info-title {
  font-size: 30px;
}

.trial-title-line {
  display: block;
}

.trial-title-line .is-blue,
.trial-title-line .is-red {
  font-size: 34px;
}

.trial-title-line.is-school .is-blue {
  font-size: 40px;
}

/* 記入イメージのモーダル */
.trial-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
}

.trial-modal[hidden] {
  display: none;
}

.trial-modal-inner {
  position: relative;
  max-width: 720px;
  max-height: 100%;
  overflow: auto;
  border-radius: 8px;
  background: #fff;
}

.trial-modal-inner img {
  display: block;
  width: 100%;
  height: auto;
}

.trial-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.85);
  cursor: pointer;
}

.trial-modal-close::before,
.trial-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.trial-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

html.is-trialModalOpen {
  overflow: hidden;
}

.trial-title-line .is-blue { color: #214D9A; }
.trial-title-line .is-red { color: #EB004B; }

/* 受講形式・フィードバック */
.trial-card {
  margin-bottom: 48px;
  padding: 41px 0 65px;
  border: 1px solid #FEDDE6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 10px 10px 0 rgba(255, 231, 238, 0.4);
  text-align: center;
}

/* 吹き出し（所要時間）と「受講形式は～」のまとまり。PCは従来どおり中央 */
.trial-head {
  display: block;
}

.trial-time {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 32px;
  border-radius: 49px;
  background: #E0004D;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}

.trial-time::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 14px solid #E0004D;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  transform: translateX(-50%);
}

.trial-lead {
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
}

.trial-lead em {
  font-style: normal;
  color: #EB004B;
}

.trial-card-body {
  display: flex;
  gap: 36px;
  justify-content: space-between;
  padding: 0 72px;
  text-align: left;
}

.trial-points {
  flex: none;
  width: 478px;
}

.trial-points-title {
  position: relative;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #214D9A;
}

.trial-points-title span {
  position: relative;
  display: inline-block;
  padding: 0 28px;
}

.trial-points-title span::before,
.trial-points-title span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 22px;
  background: #214D9A;
}

.trial-points-title span::before {
  left: 8px;
  transform: translateY(-50%) rotate(-30deg);
}

.trial-points-title span::after {
  right: 8px;
  transform: translateY(-50%) rotate(30deg);
}

.trial-points-list {
  display: grid;
  grid-template-columns: repeat(3, 140px);
  gap: 12px 24px;
  justify-content: space-between;
  list-style: none;
}

.trial-points-list li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.trial-point-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: #FFF8FA;
}

.trial-point-icon img {
  display: block;
  max-width: 107px;
  max-height: 83px;
  height: auto;
}

.trial-point-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: #214D9A;
}

/* 診断シート */
.trial-sheet {
  position: relative;
  flex: none;
  width: 342px;
  height: 419px;
}

.trial-sheet::before,
.trial-sheet::after {
  content: "";
  position: absolute;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: #FFF8FA;
}

.trial-sheet::before { top: 0; left: 0; }
.trial-sheet::after { top: 163px; left: 86px; }

.trial-sheet img {
  position: absolute;
  top: 37px;
  left: 58px;
  z-index: 1;
  width: 230px;
  height: auto;
}

.trial-sheet-link {
  position: absolute;
  top: 381px;
  left: 82px;
  z-index: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
  color: #333;
}

.trial-sheet-arrow {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #EB004B;
}

.trial-sheet-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -3px 0 0 -4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

/* カウンセリング・無料体験レッスンの流れ */
.trial-flow-title {
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #333;
}

.trial-steps {
  position: relative;
}

.trial-steps-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

.trial-steps-track::-webkit-scrollbar {
  display: none;
}

.trial-steps-track li {
  position: relative;
  height: 128px;
}

.trial-steps-track li::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
}

.trial-step-label {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 1;
  padding: 0 8px;
  border-radius: 32px;
  background: #3D62C4;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.7px;
  color: #fff;
}

.trial-steps-track li img {
  position: absolute;
  top: 35px;
  left: 16px;
  z-index: 1;
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.trial-steps-track li p {
  position: absolute;
  top: 8px;
  right: 11px;
  bottom: 0;
  left: 84px;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
}

.trial-steps-btn {
  display: none;
  position: absolute;
  top: 56px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #EB004B;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.trial-steps-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.trial-steps-btn.is-prev { left: 0; }
.trial-steps-btn.is-next { right: 0; }
.trial-steps-btn.is-prev::before { left: 17px; transform: translateY(-50%) rotate(-135deg); }
.trial-steps-btn.is-next::before { right: 17px; transform: translateY(-50%) rotate(45deg); }

.trial-steps-note {
  margin: 8px 0 40px;
  font-size: 12px;
  line-height: 1.6;
  color: #333;
}

/* カウンセリングの詳細（開くと赤い枠の中に3つの項目が出る） */
.trial-detail {
  width: 500px;
  max-width: 100%;
  margin: 0 auto 40px;
  overflow: hidden;
  border: 1px solid #EB004B;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.trial-detail-btn {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px 40px;
  border: 0;
  background: #EB004B;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  cursor: pointer;
}

.trial-detail-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(#fff, #fff) center / 14px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 14px no-repeat;
  transform: translateY(-50%);
}

.trial-detail-btn[aria-expanded="true"]::after {
  background: linear-gradient(#fff, #fff) center / 14px 2px no-repeat;
}

.trial-detail-panel[hidden] {
  display: none;
}

.trial-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 16px;
  list-style: none;
}

.trial-detail-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #333;
}

.trial-detail-list li + li {
  border-top: 1px solid #ccc;
}

.trial-detail-list .trial-detail-ttl {
  font-weight: 700;
  letter-spacing: 0;
  color: #214D9A;
}

/* 紹介動画 */
.trial-video {
  position: relative;
  width: 500px;
  max-width: 100%;
  margin: 0 auto 48px;
  border: 8px solid #fff;
  background: #fff;
  aspect-ratio: 500 / 282;
}

.trial-video iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.trial-cta {
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
}


/* ===================================================
 * 旧スタイル（school_style.css）から移植
 * 近隣スクール（nearby-schools.php）／お問い合わせバナー（school_ml.php・大谷選手）用。
 * index_default2.html（school_style.css を読み込むページ）と同じ見た目にするため、内容はそのまま。
 * =================================================== */

.ly_inner__sm {
  width: 80%;
  max-width: 860px;
  margin: 0 auto;
}

.el_bgLinear_lightBlue {
  background: url("/school/include/img/bgLinear_lightblue.png") repeat top left;
}

.el_bgGra_blueGreen {
  background: rgb(110,162,195);
  background: linear-gradient(180deg, rgba(0,168,168,0) 0%, rgba(0,168,168,0.2) 20%, rgba(110,162,195,1) 100%);
}

.el_bgGra_blueGreen.free_trial {
  background: linear-gradient(180deg, #fff 0%, #B5D4E9 55%, #B5D4E9 100%);
  border-bottom: 23px solid #293759;
}

.el_bgGra_blueGreen.free_trial .bl_contact {
  margin: 0 auto -24px;
  background: url(/img/free_trial_img.png) no-repeat bottom right;
  background-size: 420px;
}

.el_bgGra_blueGreen.free_trial .el_cap3 {
  color: #4A7193 !important;
  border-bottom: 2px solid #4A7193;
  display: inline-block;
}

.el_bgGra_blueGreen.free_trial .el_btn4.el_btn__blue {
  background: linear-gradient(90deg, #022876 0%, #2471B4 50%, #022876 100%);
}

.el_bgGra_blueGreen.free_trial .ml_txt {
  color: #333 !important;
}

.el_bgGra_blueGreen.free_trial .el_tel {
  color: #FFF;
}

.el_bgGra_blueGreen.free_trial .el_tel a {
  color: #224D9A; /* .school-contact-tel a（親の .school-contact-tel の色を継承）と同じ */
  text-align: left;
  display: block;
}

.el_titleNearSchool {
  font-size: 2.0rem;
}

.el_cap2 {
  font-size: 1.6rem;
  font-weight: bold;
}

.el_cap3 {
  font-size: 2.6rem;
  font-weight: bold;
}

.el_btn.el_btn__blue,
.el_btn4.el_btn__blue {
  background: linear-gradient(90deg, #074A7B 0%, #39A8BC 100%);
  color: #fff;
}

.el_btn4 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  padding: 2em 2em;
  border-radius: 50vh;
  font-weight: normal;
  cursor: pointer;
  position: relative;
  font-size: 1.2rem;
  width: 300px;
  height: 65px;
  line-height: 1.4;
}

.el_btn4 span {
  font-size: 2.0rem;
  font-weight: bold;
}

.el_btn4:hover {
  text-decoration: none;
}

.bl_CampaignGallery {
  padding: 6.0rem 0 0;
}

.bl_CampaignGallery {
  padding: 6.0rem 0 0;
}

.bl_nearSchool {
  padding: 3.0rem 4.5rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15.0rem;
}

.bl_nearSchool h3 {
  width: 50%;
  line-height: 1.4;
}

.bl_nearSchool ul {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

.bl_nearSchool ul li {
  width: 50%;
}

.schoolTop_default .bl_nearSchool .link_icon a i {
  color: #D5667C;
}

.bl_contact {
  width: 90%;
  max-width: 1000px;
  min-height: 400px;
  padding: 10.0rem 0 5.0rem 0;
  margin: 0 auto 0;
  background: url("/school/include/img/img_teachers.png") bottom right no-repeat;
}

.el_tel {
  font-size: 6.0rem;
  line-height: 1.6;
  font-family: Oswald;
}

.schoolTop_default .el_tel,
.schoolTop_default .el_tel a {
  color: #E40057;
}

.hp_mb_sm {
  margin-bottom: 1rem;
}

/* ===================================================
 * スマホ対応（レスポンシブ：768px以下）
 * =================================================== */
@media screen and (max-width: 768px) {
  /* スマホではパンくずを非表示（トップページ） */
  .schoolTop_default #topic_path_top,
  .schoolTop_default #topic_path {
    display: none;
  }

  .fv-container {
    flex-direction: column; /* 縦積みに変更 */
    gap: 24px;
  }

  .fv-left-card {
    flex: 1 1 auto;
    width: 100%;
    padding: 24px 20px;
  }

  .fv-right-slider {
    flex: 1 1 auto;
    width: 100%;
  }

  /* スマホ時はアスペクト比（縦横比）を維持して自動計算 */
  .bl_schTopContents_image,
  .schTopSlider,
  .swiper {
    height: auto !important;
    aspect-ratio: 640 / 428; /* PC時と同じ比率（約1.5:1）でスマホ幅に合わせて縮小 */
  }

  .school-title {
    font-size: 1.8rem;
  }

.illustration-box img {
  width: 100%;
  height: auto;
  display: block;
}

  .cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .btn-primary {
    justify-content: center;
    position: relative;
    min-width: 100%;
  }

  .btn-primary .arrow {
    position: absolute;
    right: 20px;
  }

  .link-review {
    align-items: center;
  }

/* ===================================================
 * スクール情報セクション
 * =================================================== */

  .school-info-section {
    padding: 40px 16px 60px;
  }

  .info-header {
    margin-bottom: 32px;
  }

  .info-title {
    font-size: 2rem;
  }

  .info-card {
    padding: 20px;
  }

  .map-wrapper {
    height: 280px; /* スマホ時のマップ高さ */
  }

  .info-hours {
    gap: 12px;
  }

  .info-hours li {
    width: calc(50% - 6px);
    gap: 8px;
    padding-left: 4px;
    font-size: 1.4rem;
    letter-spacing: 0;
  }

  .info-route-list {
    padding: 12px 16px;
  }

  .info-video {
    padding: 56px 16px 16px;
  }

  .info-video-label {
    padding: 12px 24px;
    font-size: 1.6rem;
  }

  .info-gallery-slider {
    width: 100%;
    margin-bottom: -48px;
  }

  .info-gallery .swiper-slide,
  .info-gallery .swiper-slide img {
    width: 100%;
  }

  .info-gallery .swiper-slide img {
    height: auto;
    aspect-ratio: 580 / 386;
  }

  .info-gallery .swiper-button-prev,
  .info-gallery .swiper-button-next {
    width: 36px !important;
    height: 36px !important;
    background-size: 36px 36px;
  }

  .info-gallery .swiper-button-prev {
    left: 8px;
  }

  .info-gallery .swiper-button-next {
    right: 8px;
  }

  .info-gallery-body {
    padding: 72px 20px 24px;
  }

  .info-counselor {
    flex-direction: column-reverse;
  }

  .info-counselor-body {
    padding: 24px 20px;
  }

  .info-counselor-catch {
    font-size: 2rem;
  }

  .info-counselor-slider {
    flex: none;
    width: 100%;
    min-height: 0;
  }

  .info-counselor-slider .swiper-slide img {
    height: auto;
    min-height: 0;
    aspect-ratio: 490 / 337;
  }

  /* コース・料金 */
  .school-course-section {
    padding: 40px 16px 60px;
  }

  .school-course-section .courses_list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .school-course-section .courses_list_inner {
    padding: 16px 20px 28px;
  }

  .school-course-section .courses_list > li h3 {
    font-size: 2rem;
  }

  .course-note {
    margin-bottom: 32px;
  }

  /* 講師の特徴・受講生の特徴 */
  .school-feature {
    margin-bottom: 24px;
  }

  .school-feature-title {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .school-feature-text {
    font-size: 13px;
    letter-spacing: 0.4px;
  }

  /* 講師紹介 */
  .school-teacher-section {
    padding: 40px 16px 60px;
  }

  .teacher_cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .teacher_cards figure {
    height: 140px;
  }

  .teacher_cards_body {
    padding: 0 12px;
  }

  .teacher_cards_body h3 {
    font-size: 1.6rem;
  }

  .teacher_cards_text {
    font-size: 1.2rem;
    letter-spacing: 0;
  }

  /* 受講生の声 */
  .school-student-section {
    padding: 40px 16px 60px;
  }

  .student_cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .student_cards figure {
    height: 180px;
  }

  /* Googleクチコミ */
  .school-review-section {
    padding: 40px 16px 60px;
  }

  .review-summary {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .review-item-head {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .review-text {
    font-size: 1.4rem;
  }

  .info-cta-text {
    font-size: 1.6rem;
  }

  .info-cta-btn {
    font-size: 1.8rem;
  }

  /* 選ばれ続ける理由 */
  .school-reason-section {
    padding: 40px 16px 60px;
  }

  .reason_list > li,
  .reason_list > li:nth-child(even) {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 0 0 20px;
  }

  .reason_list figure {
    width: 100%;
    height: 200px;
  }

  .reason_list figure img {
    object-position: center 25%; /* 横長に切り取るとき人物の顔が切れないよう、やや上寄せ */
  }

  .reason_list_body {
    padding: 0 20px;
  }

  .reason_list_body h3 {
    font-size: 1.8rem;
  }

  .reason_list_body h3 .is-num {
    font-size: 2.6rem;
  }

  .reason_list_body h3 .is-lg {
    font-size: 2rem;
  }

  .reason_list_body p {
    font-size: 1.4rem;
  }

  /* バナー・お問い合わせ */
  .school-contact-section {
    padding: 24px 16px 40px;
  }

  .school-contact-title {
    font-size: 2rem;
  }

  .school-contact-tel {
    font-size: 3.4rem;
  }

  .school-contact-tel::before {
    width: 32px;
    height: 32px;
  }

  /* よくあるご質問 */
  .school-faq-section {
    padding: 40px 16px 24px;
  }

  .school-faq-section .faq_list dt {
    margin-top: 24px;
    padding-bottom: 16px;
    font-size: 1.6rem;
  }

  .school-faq-section .faq_list dt::before {
    width: 28px;
    height: 28px;
    font-size: 1.6rem;
  }

  .school-faq-section .faq_list dt::after {
    top: 6px;
  }

  .school-faq-section .faq_list dd {
    font-size: 1.4rem;
  }

  .school-faq-section .faq_list dd .text_link {
    text-align: left;
  }

  /* 体験レッスン */
  .school-trial-section {
    padding: 40px 16px 60px;
  }

  .school-trial-section::before {
    top: 200px;
    height: 70%;
  }

  .trial-title-line .is-blue,
  .trial-title-line .is-red {
    font-size: 2.4rem;
  }

  .trial-header .info-title {
    font-size: 2rem;
  }

  .trial-card {
    margin-bottom: 32px;
    padding: 32px 0 40px;
  }

  .trial-time {
    font-size: 1.6rem;
  }

  .trial-lead {
    padding: 0 20px;
    font-size: 1.8rem;
  }

  .trial-card-body {
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
  }

  .trial-points {
    width: 100%;
  }

  .trial-points-title {
    font-size: 1.5rem;
  }

  .trial-points-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
  }

  .trial-point-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto;
  }

  .trial-point-icon img {
    max-width: 66px;
    max-height: 52px;
  }

  .trial-point-name {
    font-size: 1.2rem;
  }

  .trial-flow-title {
    font-size: 1.8rem;
  }

  .trial-steps-track {
    margin: 0 16px;
  }

  .trial-steps-track li {
    flex-basis: 280px;
  }

  .trial-steps-track li p {
    font-size: 1.4rem;
  }

  .trial-steps-btn {
    display: none;
  }

  .trial-steps-note {
    margin-left: 16px;
  }
}

/* 旧スタイル（school_style.css）から移植：スマホ用 */
@media screen and (max-width: 720px) {
  .el_bgGra_blueGreen.free_trial .bl_contact {
    background: url(/img/free_trial_img_sp.png) no-repeat bottom center;
    background-size: 70%;
  }
}

@media only screen and (min-width: 0px) and (max-width: 720px) {
  .ly_inner__sm {
    width: 100%;
    margin: 0 auto;
  }

  .el_titleNearSchool {
    font-size: 2.0rem;
  }

  .bl_CampaignGallery .ly_inner__sm {
    padding: 0 2.0rem;
  }

  .bl_CampaignGallery {
    padding: 5.0rem 0;
  }

  .bl_nearSchool {
    padding: 3.0rem 2.0rem;
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    margin-bottom: 5.0rem;
  }

  .bl_nearSchool h3 {
    width: 100%;
    margin-bottom: 2.0rem;
  }

  .bl_nearSchool ul {
    width: 100%;
  }

  .bl_contact {
    width: 100%;
    padding: 5.0rem 3.0rem 5.0rem 3.0rem;
    min-height: 400px;
    margin: 0 auto 0;
    background: url("/school/include/img/img_teachers.png") bottom center no-repeat;
    background-size: cover cover;
  }

  .bl_contact div {
    margin-bottom: 35rem;
  }

  .el_tel {
    font-size: 5.0rem;
    text-align: center;
  }

  .el_cap3 {
    text-align: center;
  }

  .bl_contact .el_btn4 {
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .bl_contact div {
    margin-bottom: 22rem;
  }

  .bl_contact {
    width: 100%;
    padding: 5.0rem 3.0rem 5.0rem 3.0rem;
    min-height: 400px;
    margin: 0 auto 0;
    background: url("/school/include/img/img_teachers.png") bottom center no-repeat;
    background-size: 70% auto;
  }
}

/* ==== SP調整 開始（Figma SP_通常校に合わせた上書き） ==== */
@media screen and (max-width: 768px) {
  /* ---------- メインビジュアル（Figma SP_通常校 7:18057：校名→写真スライダー→実績→CTA を1枚のカードに） ---------- */
  .fv-section {
    padding: 16px 15px 20px;
  }

  .fv-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }

  .fv-container::before {
    content: "";
    grid-area: 1 / 1 / 8 / 2;
    align-self: stretch;
    background: #fff;
    border: 2px solid var(--color-card-border);
    border-radius: 12px;
    box-shadow: 4px 4px 0 0 var(--color-card-shadow, rgba(0, 0, 0, 0.08));
  }

  .fv-left-card,
  .fv-right-slider {
    display: contents;
  }

  .fv-container > *,
  .fv-left-card > *,
  .fv-right-slider > * {
    position: relative;
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
  }

  .sub-catch { grid-area: 1 / 1; margin-top: 20px; font-size: 14px; line-height: 1.6; }
  #school_detail_index .fv-section .school-title { grid-area: 2 / 1; margin: 4px 20px 0; padding: 0; font-size: 32px; line-height: 1.4; text-align: left; }
  .divider { grid-area: 3 / 1; margin-top: 6px; margin-bottom: 12px; }
  .main-copy { grid-area: 4 / 1; margin-top: 0; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }

  .fv-right-slider .bl_schTopContents_image {
    grid-area: 5 / 1;
    margin-bottom: 0;
  }

  .bl_schTopContents_image .schTopSlider,
  .bl_schTopContents_image .swiper {
    margin-bottom: 0;
  }

  .illustration-box { grid-area: 6 / 1; margin-top: 16px; margin-bottom: 16px; }
  .illustration-box img { width: 100%; max-width: 310px; margin: 0 auto; }

  .cta-group { grid-area: 7 / 1; margin-bottom: 20px; gap: 16px; }

  .btn-primary {
    min-width: 0;
    width: 100%;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.6;
    justify-content: center;
  }

  .cta-group .ml_area { width: 100%; }
  .cta-group .ml_area .btn-primary { width: 100%; box-sizing: border-box; }

  .link-review {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px 28px 8px;
    box-sizing: border-box;
    border: 1px solid #3D62C4;
    border-radius: 90px;
    background: #fff;
    color: #26488D;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }

  .link-review::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #3D62C4;
    border-right: 2px solid #3D62C4;
    transform: translateY(-50%) rotate(45deg);
  }

  .link-review .stars {
    margin-top: 0;
    gap: 4px;
    font-size: 12px;
  }

  .link-review .stars::before { content: "（"; color: #333; font-weight: 400; }
  .link-review .stars::after { content: "）"; color: #333; font-weight: 400; }
  .star-icons { color: #EBB000; letter-spacing: 1px; }
  .link-review .star-icons::after { content: ""; }

  .annotations {
    grid-area: 8 / 1;
    margin: 24px 1px 0;
  }

  .annotations p {
    font-size: 11px;
    line-height: 1.6;
    color: #333;
  }

  /* 写真スライダー：ドットと矢印 */
  .fv-swiper .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    z-index: 10;
  }

  .fv-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    border: 1px solid #E0004D;
    background: #fff;
    opacity: 1;
  }

  .fv-swiper .swiper-pagination-bullet-active {
    background: #E0004D;
  }

  .fv-swiper .swiper-button-prev,
  .fv-swiper .swiper-button-next {
    width: 30px !important;
    height: 30px !important;
    background: rgba(90, 90, 90, 0.7);
    box-shadow: none;
  }

  .fv-swiper .swiper-button-prev { left: 10px; }
  .fv-swiper .swiper-button-next { right: 10px; }

  .fv-swiper .swiper-button-prev::before,
  .fv-swiper .swiper-button-next::before {
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }

  .fv-swiper .swiper-button-prev::before { left: 55%; right: auto; transform: translate(-50%, -50%) rotate(-135deg); }
  .fv-swiper .swiper-button-next::before { left: 45%; right: auto; transform: translate(-50%, -50%) rotate(45deg); }

  /* ---------- スクール情報（Figma SP_通常校 7:18760） ---------- */
  .school-info-section {
    padding: 60px 15px;
  }

  .info-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
  }

  .info-header::after {
    width: 100px;
  }

  .info-icon {
    width: 48px;
    margin-bottom: 8px;
  }

  .info-title {
    font-size: 22px;
    letter-spacing: 1.1px;
  }

  .info-card {
    margin-bottom: 32px;
    padding: 15px 15px 20px;
  }

  .map-wrapper {
    height: auto;
    margin-bottom: 16px;
    aspect-ratio: 920 / 400;
  }

  .info-details {
    gap: 16px;
  }

  .info-label,
  .info-text,
  .info-route-head,
  .info-route-body,
  .info-route-list {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .info-parking {
    font-size: 12px;
  }

  /* 電話番号：番号のあとに「TEL」ボタン */
  .info-text.phone-number.sp_view {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .info-text .info-tel-btn {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 4px 6px 4px 9px;
    border-radius: 90px;
    background: #E0004D;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.6px;
    text-decoration: none;
    color: #fff;
  }

  .info-text .info-tel-btn::before {
    content: "";
    display: block;
    flex: none;
    width: 7px;
    height: 12px;
    background: url('/school/include/img/icon_tel.png') no-repeat center / contain;
  }

  /* 道順 */
  .info-route-head {
    margin-bottom: 4px;
  }

  .info-route-body,
  .info-route-list {
    padding: 8px;
  }

  .info-video {
    margin-top: 36px;
    padding: 48px 16px 16px;
  }

  .info-video-label {
    top: -24px;
    padding: 12px 32px;
    font-size: 16px;
    letter-spacing: 0.8px;
  }

  /* 受付時間：2列 */
  .info-hours {
    gap: 12px 4px;
  }

  .info-hours li {
    width: calc((100% - 4px) / 2);
    gap: 16px;
    padding: 0 0 6px 8px;
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  /* 写真でスクールをご紹介 */
  .info-gallery {
    margin-bottom: 32px;
  }

  .info-gallery-slider {
    width: 100%;
    margin: 0 auto -54px;
  }

  .info-gallery .swiper-slide {
    width: 283px;
  }

  .info-gallery .swiper-slide img {
    width: 283px;
    max-width: 100%;
    height: 188px;
    aspect-ratio: auto;
  }

  .info-gallery .swiper-button-prev,
  .info-gallery .swiper-button-next {
    width: 32px !important;
    height: 32px !important;
  }

  .info-gallery .swiper-button-prev {
    left: 0;
  }

  .info-gallery .swiper-button-next {
    right: 0;
  }

  .info-gallery .swiper-button-prev::before,
  .info-gallery .swiper-button-next::before {
    width: 9px;
    height: 9px;
    border-width: 3px;
  }

  .info-gallery .swiper-button-prev::before {
    left: 13px;
  }

  .info-gallery .swiper-button-next::before {
    right: 13px;
  }

  .info-gallery .swiper-pagination {
    bottom: 25px;
  }

  .info-gallery .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 5px !important;
  }

  .info-gallery-body {
    gap: 16px;
    padding: 70px 15px 32px;
  }

  .info-feature-title {
    font-size: 18px;
  }

  .info-feature-text {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .info-btn-outline {
    width: auto;
    min-width: 300px;
    max-width: 100%;
  }

  .info-counselor-body .info-btn-outline {
    width: 100%;
  }

  /* カウンセラー紹介 */
  .info-counselor {
    margin-bottom: 32px;
  }

  .info-counselor-body {
    gap: 24px;
    padding: 15px 15px 30px;
  }

  .info-counselor-label {
    font-size: 16px;
  }

  .info-counselor-catch {
    font-size: 22px;
  }

  .info-counselor-body .info-feature-text {
    margin-top: -8px;
  }

  .info-counselor-slider .swiper-pagination {
    bottom: 2px;
  }

  .info-counselor-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 5px !important;
    background: #ccc;
    opacity: 1;
  }

  .info-counselor-slider .swiper-pagination-bullet-active {
    background: var(--color-accent);
  }

  /* CTA（SP） */
  .info-cta {
    width: 100%;
  }

  .info-cta-caption {
    gap: 6px;
  }

  .info-cta-caption::before,
  .info-cta-caption::after {
    width: 17px;
    height: 25px;
  }

  .info-cta-icon {
    width: 40px;
    height: 40px;
  }

  .info-cta-icon img {
    top: -4px;
    left: 3px;
    width: 34px;
  }

  .info-cta-text {
    font-size: 18px;
  }

  .info-cta-btn {
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
    font-size: 18px;
  }

  /* ---------- コース・料金（Figma SP_通常校 8:1930：2列のカード） ---------- */
  .school-course-section {
    padding: 60px 15px;
  }

  .school-course-section .courses_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
  }

  .school-course-section .courses_list > li {
    border-radius: 5px;
  }

  .school-course-section .courses_list > li figure {
    aspect-ratio: 175 / 98;
    border-radius: 4px 4px 0 0;
  }

  .school-course-section .courses_list_inner {
    padding: 8px 8px 32px;
  }

  .school-course-section .courses_list > li h3 {
    min-height: 3em;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.5;
    word-break: auto-phrase; /* 「コース」などの単語の途中で改行しない */
    overflow-wrap: anywhere;
  }

  .school-course-section .price_area {
    margin-bottom: 8px;
    min-height: 64px;
  }

  .school-course-section .course_cost {
    font-size: 16px;
    text-align: center;
  }
  .school-course-section .course_cost.is-multi {
    font-size: 11px;
    line-height: 1.4;
  }
  /* ラベル付き料金：2列カードの幅に収まるよう、ラベルを上・金額を下に積む */
  .school-course-section .course_cost:has(.label) {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
  .school-course-section .course_cost .label,
  .school-course-section .course_cost .monthly_w {
    width: auto;
    height: auto;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.3;
  }
  .school-course-section .course_cost .monthly_price {
    font-size: 22px;
    line-height: 1;
  }
  .school-course-section .course_cost .monthly_yen {
    font-size: 13px;
  }
  .school-course-section .course_cost .price_note {
    font-size: 10px;
  }


  .school-course-section .course_text {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.42;
  }

  .school-course-section .course_tags_txt {
    gap: 0 6px;
    padding-right: 0;
  }

  .school-course-section .course_tags_txt li {
    font-size: 10px;
    line-height: 1.8;
  }

  /* 人気ワッペンは小さく、写真右下のAIアプリワッペンも2列カードに合わせて小さく表示 */
  .school-course-section .courses_list > li.popular::before {
    top: -7px;
    left: -7px;
    width: 48px;
    height: 48px;
    font-size: 11px;
  }

  .school-course-section .courses_list > li.badge_right figure::after {
    right: 6px;
    bottom: 6px;
    width: 40px;
    height: 40px;
  }

  /* 右下の矢印ボタン */
  .school-course-section .courses_list > li > a::before {
    width: 24px;
    height: 24px;
  }

  .school-course-section .courses_list > li > a::after {
    right: 8px;
    bottom: 8px;
    width: 6px;
    height: 6px;
  }

  .course-note {
    margin-bottom: 32px;
    font-size: 12px;
  }

  /* ---------- 体験レッスン（Figma SP_通常校 7:19422） ---------- */
  .school-trial-section {
    padding: 60px 15px;
    background-color: #FFF1F5;
  }

  .school-trial-section::before {
    display: none;
  }

  .trial-header .info-title {
    font-size: 22px;
    letter-spacing: 1.1px;
  }

  .trial-title-line .is-blue,
  .trial-title-line.is-school .is-blue,
  .trial-title-line .is-red {
    font-size: 26px;
  }

  .trial-card {
    margin-bottom: 32px;
    padding: 24px 16px 32px;
    box-shadow: 4px 4px 0 rgba(255, 231, 238, 0.4);
  }

  /* 吹き出しは左寄せで、尖りは左下。「受講形式は～」の文は中央のまま */
  .trial-head {
    display: block;
    text-align: left;
  }

  .trial-head .trial-lead {
    text-align: center;
  }

  .trial-time {
    display: block;
    width: fit-content;
    margin-bottom: 0; /* 吹き出しの下端と「受講形式は～」の1行目を詰める（尖りは1行目の左横にかかる） */
    padding: 8px 32px;
    font-size: 16px;
  }

  .trial-time::after {
    left: 28px;
    transform: none;
  }

  .trial-lead {
    margin-bottom: 24px;
    padding: 0;
    font-size: 20px;
  }

  /* 診断シートを先に、6つのポイントをあとに並べる */
  .trial-card-body {
    flex-direction: column-reverse;
    gap: 32px;
    align-items: center;
    padding: 0;
  }

  .trial-points {
    width: 100%;
  }

  .trial-points-title {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .trial-points-title span {
    padding: 0 32px;
  }

  .trial-points-title span::before {
    left: 6px;
    height: 24px;
  }

  .trial-points-title span::after {
    right: 6px;
    height: 24px;
  }

  .trial-points-list {
    grid-template-columns: repeat(3, 104px);
    gap: 12px 8px;
    justify-content: space-between;
  }

  .trial-points-list li {
    gap: 4px;
  }

  .trial-point-icon {
    width: 104px;
    height: 104px;
  }

  .trial-point-icon img {
    max-width: 70px;
    max-height: 55px;
  }

  .trial-point-name {
    font-size: 12px;
  }

  /* 診断シート（小さめ） */
  .trial-sheet {
    width: 160px;
    height: 196px;
    margin-bottom: 0;
  }

  .trial-sheet::before,
  .trial-sheet::after {
    width: 120px;
    height: 120px;
  }

  .trial-sheet::before { top: 0; left: 0; }
  .trial-sheet::after { top: 76px; left: 40px; }

  .trial-sheet img {
    top: 13px;
    left: 50%;
    width: 81px;
    transform: translateX(-50%);
  }

  .trial-sheet-link {
    top: 149px;
    left: 50%;
    font-size: 14px;
    transform: translateX(-50%);
  }

  /* 流れ */
  .trial-flow-title {
    margin-bottom: 24px;
    font-size: 22px;
  }

  .trial-steps-track {
    display: flex;
    gap: 8px;
    margin: 0 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .trial-steps-track li {
    flex: 0 0 320px;
    scroll-snap-align: start;
  }

  .trial-steps-btn {
    display: block;
    top: 45px;
    width: 30px;
    height: 30px;
  }

  .trial-steps-btn::before {
    width: 7px;
    height: 7px;
  }

  .trial-steps-btn.is-prev::before { left: 13px; }
  .trial-steps-btn.is-next::before { right: 13px; }

  .trial-steps-note {
    margin: 8px 0 32px 15px;
    font-size: 14px;
  }

  .trial-detail {
    width: 100%;
    margin-bottom: 32px;
  }

  .trial-video {
    width: calc(100% - 14px);
    margin-bottom: 32px;
  }

  /* ---------- 講師紹介（Figma SP_通常校 7:19738：2列） ---------- */
  .school-teacher-section {
    padding: 60px 15px;
  }

  /* 帯の開始位置＝写真（2列・幅は (画面幅-30px-間隔8px)/2、縦横比 177:126）の高さの半分 */
  .teacher_cards::before {
    top: calc((100vw - 38px) / 2 * 126 / 177 / 2);
  }

  .teacher_cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
  }

  .teacher_cards figure {
    height: auto;
    aspect-ratio: 177 / 126;
  }

  .teacher_cards > li > a {
    gap: 12px;
    padding-bottom: 24px;
  }

  .teacher_cards > li > a::before {
    width: 24px;
    height: 24px;
  }

  .teacher_cards > li > a::after {
    right: 8px;
    bottom: 8px;
    width: 6px;
    height: 6px;
  }

  .teacher_cards_body {
    padding: 0 16px;
  }

  .teacher_cards_body h3 {
    font-size: 16px;
    letter-spacing: 0.8px;
  }

  .teacher_cards_text {
    font-size: 12px;
    letter-spacing: 0.3px;
  }

  .teacher_cards_data {
    font-size: 11px;
    letter-spacing: 0.3px;
  }

  .teacher_cards_data > div {
    padding: 6px 0;
  }

  .teacher_cards_data dt {
    flex-basis: 64px;
  }

  /* ---------- 受講生の声（Figma SP_通常校 7:19838：横スライド） ---------- */
  .school-student-section {
    padding: 60px 15px;
  }

  .student_cards_wrap {
    position: relative;
    margin: 0 -15px 24px;
  }

  .student_cards {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0 calc((100% - 282px) / 2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .student_cards::-webkit-scrollbar {
    display: none;
  }

  .student_cards > li {
    flex: 0 0 282px;
    scroll-snap-align: center;
  }

  .student_cards figure {
    height: 200px;
  }

  /* 前後ボタン */
  .student-btn {
    position: absolute;
    top: 292px;
    z-index: 2;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #EB004B;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .student-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }

  .student-btn.is-prev { left: 40px; }
  .student-btn.is-next { right: 40px; }
  .student-btn.is-prev::before { left: 13px; transform: translateY(-50%) rotate(-135deg); }
  .student-btn.is-next::before { right: 13px; transform: translateY(-50%) rotate(45deg); }

  /* スライド下のドットナビゲーション（現在のカードだけ点灯） */
  .student-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }

  .student-dot {
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    border: 1px solid #EB004B;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }

  .student-dot.is-active {
    background: #EB004B;
  }

  /* ---------- 選ばれ続ける理由（Figma SP_通常校 7:20152） ---------- */
  .school-reason-section {
    padding: 60px 15px;
  }

  .reason_list {
    gap: 24px;
  }

  .reason_list > li,
  .reason_list > li:nth-child(even) {
    gap: 0;
    padding: 0;
    box-shadow: 4px 4px 0 rgba(255, 231, 238, 0.4);
  }

  .reason_list figure {
    height: auto;
    aspect-ratio: 363 / 242;
  }

  .reason_list figure img {
    object-position: center;
  }

  .reason_list_body {
    gap: 8px;
    padding: 16px 15px 20px;
  }

  .reason_list_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .reason_list_label {
    padding: 6px 16px;
    font-size: 14px;
  }

  .reason_list_body h3 {
    font-size: 16px;
  }

  .reason_list_body h3 .is-num {
    font-size: 30px;
  }

  .reason_list_body h3 .is-lg {
    font-size: 20px;
  }

  .reason_list_body p {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  /* ---------- バナー（Figma SP_通常校 7:20229：4枚を縦に並べる） ---------- */
  .school-banner-section {
    padding: 48px 2px 0;
  }

  .school-banner-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .school-banner-col {
    display: contents;
  }

  .school-banner.is-beginner,
  .school-banner.is-diagnosis,
  .school-banner.is-talk,
  .school-banner.is-assist {
    grid-column: 1;
    grid-row: auto;
  }

  .school-banner.is-beginner { order: 1; }
  .school-banner.is-diagnosis { order: 2; }
  .school-banner.is-talk { order: 3; }
  .school-banner.is-assist { order: 4; }

  /* ---------- よくあるご質問（Figma SP_通常校 7:20236） ---------- */
  .school-faq-section {
    padding: 60px 15px 24px;
  }

  .school-faq-section .faq_list dt {
    gap: 8px;
    margin-top: 24px;
    padding: 0 28px 16px 0;
    font-size: 16px;
  }

  .school-faq-section .faq_list dt::before {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .school-faq-section .faq_list dt::after {
    top: 6px;
    width: 12px;
    height: 12px;
    background:
      linear-gradient(#214D9A, #214D9A) center / 12px 2px no-repeat,
      linear-gradient(#214D9A, #214D9A) center / 2px 12px no-repeat;
  }

  .school-faq-section .faq_list dt.is-open::after {
    background: linear-gradient(#214D9A, #214D9A) center / 12px 2px no-repeat;
  }

  .school-faq-section .faq_list dd {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .faq-more .info-btn-outline.is-external {
    width: 100%;
  }

  /* ---------- 商標表記・スクールへのお問い合わせ（Figma SP_通常校 7:20300） ---------- */
  .school-legal-note {
    margin-bottom: 32px;
    font-size: 11px;
  }

  .school-contact-section {
    padding: 8px 15px 40px;
  }

  .school-contact-title {
    font-size: 16px;
    letter-spacing: 0.8px;
  }

  .school-contact-tel {
    gap: 6px;
    font-size: 28px;
  }

  .school-contact-tel::before {
    width: 24px;
    height: 24px;
  }

}
/* ==== SP調整 終了 ==== */

/* ===================================================
 * プレミアム校（index_premium.html / body.schoolTop_premium）
 * 汎用（schoolTop_default）の配色をゴールド＋ダークブラウンに置き換える
 * Figma「スクールTOPページ_プレミアム校_修正0930」準拠
 * =================================================== */
.schoolTop_premium {
  --gold: #9B7B10;                 /* 文字・アクセント */
  --gold-border: #C9AE5D;          /* カード枠線 */
  --gold-grad: linear-gradient(90deg, #A68307 0%, #DDA420 100%);
  --gold-yellow: #DDB400;          /* 無料体験セクションのラベル・ボタン */
  --premium-dark: #565346;         /* ダークブラウン（帯・セクション背景） */
  --premium-dark-deep: #2E2E2E;
}

/* ---------- メインビジュアル ---------- */
.schoolTop_premium .link-review {
  border-color: #C4A24B;
  color: var(--gold);
}
.schoolTop_premium .fv-swiper .swiper-pagination-bullet-active {
  background: var(--gold);
}
/* 注釈（※1・※2）は暗い帯の上なので白（スマホ用の #333 指定にも勝つ） */
.schoolTop_premium .annotations p {
  color: #fff;
}

/* ---------- 共通：見出し（クリーム背景のセクションは濃い文字） ---------- */
.schoolTop_premium .school-course-section .info-title,
.schoolTop_premium .school-teacher-section .info-title,
.schoolTop_premium .school-student-section .info-title,
.schoolTop_premium .school-review-section .info-title,
.schoolTop_premium .school-faq-section .info-title {
  color: #333;
}
/* 見出しアイコン（青い線画）は、明るい背景ではチャコールグレーに */
.schoolTop_premium .school-course-section .info-icon img,
.schoolTop_premium .school-teacher-section .info-icon img,
.schoolTop_premium .school-student-section .info-icon img,
.schoolTop_premium .school-review-section .info-icon img,
.schoolTop_premium .school-faq-section .info-icon img {
  filter: grayscale(1) brightness(0.35);
}
/* 暗い背景のセクションは見出しアイコンを白に */
.schoolTop_premium .school-info-section .info-icon img,
.schoolTop_premium .school-trial-section .info-icon img,
.schoolTop_premium .school-reason-section .info-icon img {
  filter: brightness(0) invert(1);
}
.schoolTop_premium .school-info-section .info-header::after,
.schoolTop_premium .school-trial-section .info-header::after,
.schoolTop_premium .school-reason-section .info-header::after {
  background: rgba(255, 255, 255, 0.5);
}

/* 白抜きボタン（コース一覧／講師一覧／受講生の声一覧など） */
.schoolTop_premium .info-btn-outline {
  border-color: var(--gold-border);
  color: var(--gold);
}
.schoolTop_premium .info-btn-outline::after {
  border-top-color: var(--gold);
  border-right-color: var(--gold);
}

/* ---------- スクール情報（背景はストライプ変数で暗色。内側の薄ピンクを白に） ---------- */
.schoolTop_premium .info-notice,
.schoolTop_premium .info-route-body,
.schoolTop_premium .info-route-list,
.schoolTop_premium .info-video {
  background: #fff;
}

/* ---------- コース・料金 ---------- */
.schoolTop_premium .school-course-section .courses_list > li,
.schoolTop_premium .school-course-section .courses_list > li.theme_blue,
.schoolTop_premium .school-course-section .courses_list > li.theme_green,
.schoolTop_premium .school-course-section .courses_list > li.theme_purple,
.schoolTop_premium .school-course-section .courses_list > li.theme_yellow,
.schoolTop_premium .school-course-section .courses_list > li.theme_red,
.schoolTop_premium .school-course-section .courses_list > li.theme_light_blue {
  --course-color: var(--gold);
  border-color: var(--gold-border);
}
.schoolTop_premium .school-course-section .courses_list > li > a::before {
  background: var(--gold-grad);
}
.schoolTop_premium .school-course-section .courses_list > li .course_tags_txt li::before {
  color: #1E87C8;
}

/* ---------- 無料体験レッスン（ダークブラウン背景） ---------- */
.schoolTop_premium .school-trial-section {
  background-color: var(--premium-dark);
}
/* 背景の斜めの帯（通常校は薄ピンク）→ 少し明るいブラウン */
.schoolTop_premium .school-trial-section::before {
  background: #5F5C50;
}
.schoolTop_premium .trial-title-line .is-blue { color: #D9B01E; }
.schoolTop_premium .trial-title-line .is-red { color: #FFE08A; }
.schoolTop_premium .trial-card {
  border-color: transparent;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18);
}
.schoolTop_premium .trial-time,
.schoolTop_premium .trial-time::after {
  background-color: #55524A;
  border-top-color: #55524A;
}
.schoolTop_premium .trial-time::after {
  background-color: transparent;
}
.schoolTop_premium .trial-lead em { color: var(--gold); }
.schoolTop_premium .trial-points-title { color: var(--gold); }
.schoolTop_premium .trial-points-title span::before,
.schoolTop_premium .trial-points-title span::after {
  background: var(--gold);
}
.schoolTop_premium .trial-point-icon { background: var(--gold); }
.schoolTop_premium .trial-point-icon img { filter: brightness(0) invert(1); }
.schoolTop_premium .trial-point-name { color: var(--gold); }
.schoolTop_premium .trial-sheet::before,
.schoolTop_premium .trial-sheet::after {
  background: #F7F3E8;
}
.schoolTop_premium .trial-sheet-arrow { background: var(--gold); }
.schoolTop_premium .trial-flow-title,
.schoolTop_premium .trial-steps-note {
  color: #fff;
}
.schoolTop_premium .trial-step-label { background: var(--gold-yellow); }
.schoolTop_premium .trial-steps-btn { background: #C6A12E; }
.schoolTop_premium .trial-detail {
  border-color: var(--gold-yellow);
}
.schoolTop_premium .trial-detail-btn { background: var(--gold-yellow); }
.schoolTop_premium .trial-detail-list .trial-detail-ttl { color: var(--gold); }

/* ---------- 講師紹介・受講生の声（カード写真の中間からダークブラウンの帯） ---------- */
.schoolTop_premium .teacher_cards::before,
.schoolTop_premium .student_cards_wrap::before {
  background: linear-gradient(to bottom, var(--premium-dark) 0, var(--premium-dark-deep) 700px, var(--premium-dark-deep) 100%);
}
.schoolTop_premium .teacher_cards > li > a::before,
.schoolTop_premium .student_cards > li > a::before {
  background: var(--gold-grad);
}
.schoolTop_premium .student_cards_body h3 { color: var(--gold); }

/* 講師の特徴・受講生の特徴は、暗い帯の上なので白文字 */
.schoolTop_premium .school-feature-title,
.schoolTop_premium .school-feature-text {
  color: #fff;
}

/* ---------- Googleクチコミ ---------- */
.schoolTop_premium .review-bar > span { background: var(--gold); }

/* ---------- 選ばれる理由（ダーク背景） ---------- */
.schoolTop_premium .school-reason-section {
  background: var(--premium-dark-deep);
}
.schoolTop_premium .reason_list > li {
  box-shadow: 4px 4px 0 #7A5F12;
}
.schoolTop_premium .reason_list_label { background: var(--gold); }
.schoolTop_premium .reason_note { color: #fff; }

/* ---------- よくあるご質問・お問い合わせ ---------- */
.schoolTop_premium .school-faq-section .faq_list dt::before { background: var(--gold); }
.schoolTop_premium .school-faq-section .faq_list dt::after {
  background:
    linear-gradient(var(--gold), var(--gold)) center / 16px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 2px 16px no-repeat;
}
.schoolTop_premium .school-faq-section .faq_list dt.is-open::after {
  background: linear-gradient(var(--gold), var(--gold)) center / 16px 2px no-repeat;
}
.schoolTop_premium .school-faq-section .faq_list dd .text_link a { color: var(--gold); }
.schoolTop_premium .school-contact-tel { color: var(--gold); }
.schoolTop_premium .school-contact-tel::before {
  background-image: url('/school/include/img/icon_tel_gold.png');
}

@media screen and (max-width: 768px) {
  .schoolTop_premium .link-review::after { border-color: var(--gold); }
  .schoolTop_premium .fv-swiper .swiper-pagination-bullet-active { background: var(--gold); }
  .schoolTop_premium .info-text .info-tel-btn { background: var(--gold); }
  .schoolTop_premium .student-btn { background: var(--gold); }
  .schoolTop_premium .student-dot { border-color: var(--gold); }
  .schoolTop_premium .student-dot.is-active { background: var(--gold); }
}

/* お問い合わせ（.el_bgGra_blueGreen.free_trial）の電話リンクの文字色を、お問い合わせセクションの電話番号（.school-contact-tel a）と同じにする。
   メディアクエリの外に置き、スマホ幅（.el_tel.sp_view の a）にも効かせる */
.el_bgGra_blueGreen.free_trial .el_tel a {
  color: #224D9A;
}
.schoolTop_premium .el_bgGra_blueGreen.free_trial .el_tel a {
  color: var(--gold);
}