/*
Theme Name: GROW UP Dance Studio (Child of Hello Elementor)
Theme URI: https://thegrowup.com
Description: DANCE STUDIO GROW UP 公式サイト用 子テーマ。土台は Hello Elementor。トップページ・ヘッダー・フッター・各カード・レスポンシブをコードで実装し、写真・文章・NEWS・校舎情報・幼稚園教室情報は WordPress 管理画面／ACF から更新できます。
Author: Claude (Cowork)
Template: hello-elementor
Version: 1.0.0
Requires PHP: 7.4
Text Domain: growup-child
*/

/* ==========================================================================
   0. フォント読み込みについて
   Google Fontsは CSS の @import ではなく、functions.php の wp_enqueue_style()
   で <link> タグとして読み込んでいます（@importは他のCSSの読み込みを
   直列化してしまい表示速度を落とすため）。
   ========================================================================== */

/* ==========================================================================
   1. デザイントークン
   ========================================================================== */
:root{
  --color-primary: #6F2DBD;      /* ブランドカラー（紫） */
  --color-secondary: #1A1A1A;    /* 黒 */
  --color-text: #333333;         /* 本文グレー */
  --color-accent: #9D4EDD;       /* 明るい紫（アクセント） */
  --color-bg: #FFFFFF;           /* 白 */
  --color-bg-soft: #F7F4FA;      /* ライト背景 */
  --color-border: #ECE6F5;
  --color-muted: #666666;        /* 補足テキスト用グレー（白背景でWCAG AA 4.5:1以上を確保） */

  --font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Poppins", var(--font-jp);

  --container: 1280px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 4px 16px rgba(26,26,26,.06);
  --shadow: 0 16px 40px rgba(111,45,189,.10);
  --shadow-hover: 0 24px 56px rgba(111,45,189,.18);

  --section-space: 140px;         /* 通常セクションの上下余白 */
  --section-space-compact: 104px; /* ABOUTセクション専用（意図的に他より狭い。120px→104pxに調整し、間延びを抑えつつ大きな余白感は維持） */
  --section-space-mobile: 72px;   /* モバイル時は全セクション共通 */

  --header-h: 74px; /* ヘッダー実測高さ。main.jsがJSで実測して上書きする（フォールバック値） */
}

*{ box-sizing:border-box; }
html{ overflow-x: hidden; }
body{
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* モバイルの off-canvas ナビ（transform）が横スクロールを
                          発生させることがあるため、安全策として明示的に抑制 */
}
/* モバイルメニューを開いている間は背景スクロールをロック（main.jsが付与） */
html.nav-open{ overflow:hidden; }
html.nav-open body{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
.container{ max-width: var(--container); margin:0 auto; padding:0 32px; }

/* ==========================================================================
   2. 共通パーツ
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 18px 40px; border-radius: 999px; font-weight:700; font-size:15px;
  letter-spacing:.02em; transition: all .25s ease; border:2px solid transparent;
  cursor:pointer; white-space:nowrap;
}
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-outline{ background:transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary); color:#fff; transform: translateY(-2px); }
.btn-sm{ padding:12px 26px; font-size:13px; }

.eyebrow{
  display:inline-block; font-family: var(--font-en); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color: var(--color-primary); margin-bottom:18px;
}
.section-heading{
  font-family: var(--font-en); font-weight:700; font-size:34px; text-align:center;
  color: var(--color-secondary); margin: 0 0 12px;
}
.section-sub{ text-align:center; color:var(--color-muted); margin-bottom:64px; font-size:15px; }
.section{ padding: var(--section-space) 0; }
.section--soft{ background: var(--color-bg-soft); }

/* ==========================================================================
   2.5 スキップリンク（キーボード・スクリーンリーダー利用者向け）
   ========================================================================== */
.skip-link{
  position:absolute; top:-100px; left:16px; z-index:1000;
  background: var(--color-primary); color:#fff; padding:14px 24px; border-radius: var(--radius-sm);
  font-weight:700; font-size:14px; transition: top .2s ease;
}
.skip-link:focus{ top:16px; }

/* ==========================================================================
   3. ヘッダー
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:200; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px); border-bottom:1px solid var(--color-border);
  /* 親テーマ hello-elementor/assets/css/theme.css の
     .site-header:not(.dynamic-header) に対する max-width/margin-inline
     （576/768/992/1200px境界でmax-width:500/600/800/1140pxのボックス化）
     を打ち消すための上書き。このCSSはgrowup-child/style.cssより後に
     読み込まれ、かつセレクタの詳細度も同等以上のため、!important 以外の
     方法（詳細度を上げるだけの指定）では打ち消せなかった。 */
  width:100% !important; max-width:none !important; margin-inline:0 !important;
}
.site-header__inner{
  max-width: var(--container); margin:0 auto; padding: 18px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap;
}
.site-branding{ flex-shrink:0; min-width:0; position:relative; z-index:2; }
.site-branding a{ display:flex; align-items:center; gap:10px; }
/* 2026-08-31: ロゴ画像をRetina対応の高解像度版（実ピクセル640x116、メディアID 36940）に差し替え。
   表示サイズ・ヘッダーレイアウトは変更しないため、表示幅・高さをこれまでの実寸（300x55）に固定する。
   モバイル時（assets/js/main.js の initLogoMobileScale）はこの300pxを基準に別途縮小されるため、
   このwidthを変更する場合は main.js の LOGO_DESKTOP_DISPLAY_WIDTH も合わせて更新すること。 */
.site-branding .custom-logo{ width:300px; height:55px; }
.site-title{
  font-family: var(--font-en); font-weight:800; font-size:20px; letter-spacing:.02em;
  color: var(--color-secondary); white-space:nowrap;
}
.site-title .accent{ color: var(--color-primary); }
/* min-width:0 と、かつては指定していなかった flex-shrink:0 の組み合わせ。
   以前は flex-shrink の既定値（1＝縮む）のままだったため、画面が狭くなると
   ナビ全体がじわじわ圧縮され、リンク文字が1文字ずつ縦に折り返される不具合が
   発生していた。flex-shrink:0 にすることで「自然な幅を維持するか、
   （幅が足りなければ）ハンバーガーメニューに切り替わるか」のどちらかになり、
   中途半端に潰れて折り返す状態がなくなる。 */
.main-nav{ min-width:0; flex-shrink:0; }

/* gapは36px→28pxにわずかに詰めている（font-sizeは変更していない）。
   デスクトップナビが1文字ずつ縦折り返しになる不具合の対策として、
   ハンバーガーへの切り替え幅をなるべく無理のない範囲（1100〜1200px前後）に
   収めるための調整。詳細は下記「9.0 デスクトップナビ⇔ハンバーガー切替」参照。 */
.main-nav ul{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.main-nav a{
  font-size:14.5px; font-weight:500; color: var(--color-secondary); position:relative; padding:6px 0;
  white-space:nowrap; /* リンク文字が途中で縦に折り返されるのを防ぐ */
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--color-primary);
  transition: width .25s ease;
}
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; position:relative; z-index:2; flex-shrink:0; }
/* .site-branding / .header-actions を z-index:2、モバイル時の .main-nav（オフキャンバス
   パネル）を z-index:1 にし、ロゴ・×ボタンが常にパネルより手前に表示されるようにする。
   （以前は position 未指定のロゴだけがパネルの背後に回り込み、ロゴが隠れる／
   ×ボタンだけが浮いて見えるという表示崩れが発生していた） */

.school-dropdown{ position:relative; }
.school-dropdown__toggle{
  background:transparent; border:1px solid var(--color-border); border-radius:999px;
  padding:10px 18px; font-size:13px; font-weight:600; color: var(--color-secondary);
  display:flex; align-items:center; gap:6px; cursor:pointer;
  white-space:nowrap; /* 「校舎一覧」ボタンの文字が途中で縦に折り返されるのを防ぐ */
}
.school-dropdown__toggle .arrow{ font-size:9px; transition: transform .2s ease; }
.school-dropdown.is-open .arrow{ transform: rotate(180deg); }
.school-dropdown__menu{
  position:absolute; top: calc(100% + 10px); right:0; background:#fff; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); min-width:200px; padding:10px; opacity:0; visibility:hidden;
  transform: translateY(-6px); transition: all .2s ease; border:1px solid var(--color-border);
}
.school-dropdown.is-open .school-dropdown__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.school-dropdown__menu a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500;
}
.school-dropdown__menu a:hover{ background: var(--color-bg-soft); }
.badge-inline{
  font-family: var(--font-en); font-size:9px; font-weight:700; background: var(--color-primary);
  color:#fff; padding:2px 7px; border-radius:999px; letter-spacing:.05em;
}
.badge-soon-inline{ background: var(--color-secondary); }

.nav-toggle{
  display:none; width:40px; height:40px; border:none; background:transparent; cursor:pointer;
  position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background: var(--color-secondary);
  transition: all .25s ease;
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle.is-active span{ background:transparent; }
.nav-toggle.is-active span::before{ transform: rotate(45deg) translate(5px,6px); }
.nav-toggle.is-active span::after{ transform: rotate(-45deg) translate(5px,-6px); }

/* ==========================================================================
   4. ヒーロー（ファーストビュー）
   「洗練されたストリートダンススタジオ」の方向性への刷新（写真を大きく・
   カード感の排除・斜めのアクセントライン）。マークアップ（.hero__grid /
   .hero__copy / .hero__media / .hero-slider）自体はfront-page.php側を
   一切変更せず、既存のDOM構造のままCSSだけで実現している。
   写真（.hero__media）を画面右端まで届く全幅（フルブリード）にするため、
   .hero__grid はコンテナのmax-width指定をやめてdisplay:flexの全幅にし、
   代わりにテキスト側（.hero__copy）の左paddingだけを、他セクションが使う
   コンテナ（max-width:1280px中央寄せ＋左右32px）の左端と揃うように
   calc()で計算している（写真側には左右のpaddingを一切つけない）。
   ========================================================================== */
/* PC表示（961px以上。960px以下は下部の各@mediaで別途上書き＝今回無変更）の
   Hero上部余白。ヘッダーは position:sticky で通常のドキュメントフローに
   高さを持つため（実測 約88px）、以前はここに100pxを足していた影響で
   ヘッダー下からHeroまでの空白が計180px超になり、1920×1080相当の画面高さ
   （実際のブラウザではツールバー分だけ1080pxより低くなる）だとHero＋
   INFORMATION TICKERが1画面に収まらない主因になっていた。写真サイズ・
   テキストサイズ・左右比率・ボタンサイズ（.hero__grid以下）は一切
   変更せず、この上余白だけをヘッダー下20〜30px程度の28pxに縮小している。 */
/* !important について：この.heroのpadding-topが「ヘッダー下からHero上端
   までの余白」を決める唯一の値であることをコード側で確認済み（style.css内に
   競合する.heroのpadding指定は存在しない）。ただし本サイトはwp-admin側の
   「追加CSS」やキャッシュ設定など、テーマファイルの外側から.heroへスタイルが
   追加される可能性を完全には排除できない。同スペシフィシティの外部指定に
   theme側の意図した値が不用意に上書きされないよう、影響範囲がこの1プロパティ
   のみであることを踏まえて安全に!importantを付与している（960px以下・640px
   以下の上書きルールにも同様に付与し、レスポンシブの優先順位は従来通り維持）。 */
.hero{ padding: 28px 0 0 !important; overflow:hidden; }
.hero__grid{
  display:flex; align-items:stretch;
  min-height: 620px;
  position:relative;
}
.hero__copy{
  /* 大画面デスクトップ用の調整（1600px以下は完全に従来通りの40%固定と
     同じ値になる。以下、式の意図）。
     ・幅：1600px以下は従来通り「画面幅の40%」。1600pxを超えた分だけ、
       その超過分の15%を上乗せして少しずつ左カラムの取り分を増やす
       （max()の中が0以下＝1600px以下では上乗せ量が0になるため、
       1600px以下は40vwと完全に同じ値になる）。上限820pxで頭打ちにし、
       無制限に広がらないようにしている。
     ・左padding（コンテナ基準の位置揃え）：1600px以下は従来通り
       「(100vw-1280px)/2+32px」。1600pxを超えると、min()により
       vw側の値を1600pxに固定するため、この左paddingも1600pxでの値
       （192px）のまま伸びなくなる。従来はここが画面幅に比例して伸び
       続け、その分だけ左カラムの実質的な文字幅（コンテンツ幅）が
       狭くなっていた（＝写真だけが際限なく大きく見える一因）。
       1600pxで固定することで、1600px超の増加分がすべて実際の文字幅の
       拡大に使われるようにしている。 */
  flex: 0 0 clamp(0px, calc(40vw + max(0px, (100vw - 1600px)) * 0.15), 820px);
  max-width: clamp(0px, calc(40vw + max(0px, (100vw - 1600px)) * 0.15), 820px);
  box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  /* 右側（写真との間）は48pxの余白を確保する */
  padding: 40px 48px 40px max(32px, calc((min(100vw, 1600px) - var(--container)) / 2 + 32px));
}
/* PC表示（961px以上）だけ、左テキストブロックをHero上端寄りに配置する。
   Hero自体の高さ（.hero__gridのmin-height:620px）はそのまま維持しつつ、
   従来のjustify-content:center（620px枠の中でテキストの塊を上下中央寄せ）
   をflex-startに変えるだけの最小変更。paddingの値（40px 48px 40px ...）は
   一切変更していない。中央寄せをやめても左paddingの上端40pxはそのまま
   有効なので、見出し開始位置は「hero__script（46.8px。1行・26px・
   line-height:1.8）+ margin-bottom:4px＝50.8px」を足した約90.8pxに揃う
   （1728〜1024pxで実測しても90.8px前後で安定。ご指定の80〜100pxの範囲内）。
   960px以下は従来通りjustify-content:centerのまま（この上書きの対象外）。 */
@media (min-width:961px){
  .hero__copy{ justify-content:flex-start; }
}
.hero__script{
  font-family: var(--font-en); font-style:italic; font-weight:700; font-size:26px;
  color: var(--color-accent); display:block; margin-bottom:4px;
}
.hero__title{
  font-family: var(--font-en); font-weight:800; line-height:1.08;
  color: var(--color-secondary); margin:0 0 24px; letter-spacing:-.01em;
  /* 写真を大きくした分、左カラムの実幅が狭くなる（目安：1024px時で約330px、
     1440px時で約470px）ため、固定60pxではなく画面幅に応じて滑らかに
     縮小する可変フォントサイズにし、どの幅でも窮屈な折り返しにならない
     ようにしている。単語の途中で改行されないよう、これまでモバイル専用
     だった word-break:keep-all を全幅で共通適用する（front-page.php側で
     意味の区切りごとに挿入している<wbr>だけが改行候補になる）。 */
  /* 1600px以下は従来通り 3.2vw（最小30.5px・最大60px）。1600pxを超えた
     分だけ超過分の1.2%を上乗せし、大画面では少しだけ見出しを大きく
     見せる（例：1920pxで約65px）。上限は70pxで頭打ちにし、無制限には
     拡大しない。 */
  font-size: clamp(30.5px, calc(3.2vw + max(0px, (100vw - 1600px)) * 0.012), 70px);
  word-break: keep-all;
}
.hero__desc{ font-size:16px; color: var(--color-text); margin-bottom:32px; max-width:440px; }
@media (min-width:1601px){
  /* 大画面（1600px超）では左カラムのコンテンツ幅自体が広がるため
     （.hero__copyの調整を参照）、説明文がHero写真に対して小さく
     見えすぎないよう、ここだけ少し大きくする。1600px以下（現在の
     良いバランス）には一切影響しない。 */
  .hero__desc{ font-size:17px; max-width:560px; }
}
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
/* CTAは常に .hero__copy の幅（＝padding込みのボックス）の内側だけで
   完結させる。以前はマイナスマージンで .hero__actions を右へ「はみ出させて」
   横幅を確保していたが、実運用のWebフォント（Poppins/Noto Sans JP）では
   計算時の想定よりボタンの実描画幅が広く、右のボタンがHero写真側へ
   重なってしまっていた。今回はそのマイナスマージンを完全に廃止し、
   .hero__copy の外に一切出ないgrid/flexレイアウトへ置き換えている。 */
@media (min-width:1220px){
  /* 十分に横幅のある領域でのみ、2つのCTAを横並びグリッドにする。
     grid-template-columns: minmax(0,1fr) minmax(0,1fr) により、各ボタンは
     自分の列幅を絶対に超えず、width:100%で列の内側に収まる。
     .hero__copy 右側には引き続きpadding-right（48px。写真＝斜め境界との
     安全な余白）がそのまま残るため、20〜30px以上の余白も確保される。
     ボタン本体の色・角丸・高さ（padding上下18px）はそのまま。左右padding
     とfont-sizeだけ、2列に収まる範囲でわずかに詰めている
     （40px→22px、15px→14px）。万一それでも実フォントの描画幅が想定より
     広い場合に備え、はみ出しの最終防止としてtext-overflow:ellipsisも
     付けている（通常時は作動しない想定）。 */
  .hero__actions{
    display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap:12px; width:100%; max-width:100%;
  }
  .hero__actions .btn{
    width:100%; padding:18px 22px; font-size:14px;
    overflow:hidden; text-overflow:ellipsis;
  }
}
@media (min-width:1701px){
  /* 1700pxを超えると .hero__copy のコンテンツ幅に十分な余裕が生まれる
     （1728pxで実測約470px、1920pxで約576px）ため、CTAがHero写真に対して
     小さく見えすぎないよう、1220px帯より少しだけpaddingとfont-sizeを
     戻す（元の40px/15pxまでは戻さず、安全に収まる範囲内での調整に
     留めている）。1700px以下（1440px前後を含む現在の良いバランス）には
     影響しない。 */
  .hero__actions .btn{ padding:18px 28px; font-size:14.5px; }
}
@media (min-width:961px) and (max-width:1219px){
  /* 961〜1219px程度は左カラムが狭く、2列横並びだと窮屈（＝はみ出しの
     リスクが高い）ため、無理に2列を維持せず縦並びに切り替える
     （ご指定の「1024〜1200px程度の中間幅は縦並びで構わない」に対応。
     960px以下の縦積みレイアウトとは別の帯で、ボタンサイズ自体は
     .btnの標準サイズのまま、単に1列で積むだけ）。 */
  .hero__actions{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:100%; }
  .hero__actions .btn{ width:100%; }
}

.hero__media{
  flex: 1 1 auto;
  min-width:0;
  position:relative;
}

/* Heroスライダー（クロスフェード方式。矢印・ドット・ページャーなし）
   .hero-slider__slide を position:absolute で重ね、.is-active の opacity だけを
   JS（main.js）で切り替えることで、前の写真がフェードアウトしながら
   次の写真がフェードインするディゾルブを実現する。横スライドは行わない。
   カード風の角丸・影は「洗練されたストリートダンススタジオ」の方向性に
   合わせて廃止（border-radius:0、box-shadowなし）。 */
.hero-slider{
  position:relative; overflow:hidden;
  height:100%;
  border-radius:0; box-shadow:none;
  /* 左端をわずかに斜めにカットし、テキスト側との境界にストリート感・
     スピード感のあるラインを作る（複雑なSVG等は使わず、CSSのclip-pathのみ）。
     カットする幅はごく小さく（28px）抑えているため、写真本体の見え方
     （人物・動きの視認性）にはほぼ影響しない。 */
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%);
}
.hero-slider__slide{
  position:absolute; inset:0; opacity:0; z-index:1;
  transition: opacity 1.2s ease;
}
.hero-slider__slide.is-active{ opacity:1; z-index:2; }
.hero-slider__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion: reduce){
  /* JS側でも自動切替自体を止めているが、万一JS実行前に一瞬でも重なった際の
     チラつきを避けるため、CSS側でもトランジションを無効化しておく */
  .hero-slider__slide{ transition:none; }
}

/* テキスト側と写真側の境界に、ブランドカラーの細い斜めアクセントラインを
   重ねる。.hero-slider の clip-path（28px 0 → 0 100%の斜めカット）と
   同じ座標を使い、カットされた縁にぴったり沿うようにしている。
   写真そのものはクリップせず、あくまで上に重ねる装飾要素（z-index:3）。 */
.hero__media::before{
  content:"";
  position:absolute; top:0; left:0; bottom:0; width:34px;
  background: var(--color-primary);
  clip-path: polygon(28px 0, 34px 0, 6px 100%, 0 100%);
  z-index:3;
  pointer-events:none;
}

@media (max-width:1180px){
  /* 1024〜1180px付近は左カラムがさらに狭くなるため、写真とのgap相当分
     （padding-right）だけ少し詰めて窮屈さを緩和する。テキストの左端
     （コンテナ基準の揃え）・写真のフルブリードには影響しない。 */
  .hero__copy{ padding-right:32px; }
}

/* ==========================================================================
   4.5 INFORMATION TICKER（HEROの直下・NEWS投稿を横スクロール表示）
   デザイン方針：白背景+黒文字 or 黒背景+白文字を基調とし、紫（--color-primary）は
   アクセント（ドット・矢印）だけに使い、背景全体には使わない。
   高さはコンパクトに保ち、PC/スマホ共通の1本のCSSで対応する
   （幅で構造を変える必要がないため、@media(max-width:960px)側の分割は不要）。
   ========================================================================== */
.info-ticker{
  background: var(--color-secondary); /* 黒背景+白文字を基調に。派手な紫の全面使用は避ける */
  overflow:hidden;
}
.info-ticker__scroller{ overflow:hidden; }
.info-ticker__track{
  display:flex; width:max-content;
  /* --ticker-duration は main.js がコンテンツの実測幅から算出し、
     項目数が増減しても常に一定の速度（読める速さ）で流れるようにする。
     JS実行前・JS無効時のフォールバックとして44sを既定値にしておく。 */
  animation: info-ticker-scroll var(--ticker-duration, 44s) linear infinite;
}
/* ホバー・キーボードフォーカス中は一時停止し、リンクを押しやすくする */
.info-ticker:hover .info-ticker__track,
.info-ticker:focus-within .info-ticker__track{
  animation-play-state: paused;
}
.info-ticker__group{ display:flex; align-items:center; flex-shrink:0; }
.info-ticker__item{
  display:flex; align-items:center; gap:14px;
  padding: 10px 28px; color:#fff; white-space:nowrap;
  font-size:13.5px; font-weight:500;
}
.info-ticker__item:hover{ color: var(--color-accent); }
/* アイキャッチ画像。アイキャッチ未設定の投稿はfront-page.php側で
   このspan自体を出力しないため、画像なしでも幅がずれるだけでレイアウトは
   崩れない（gapが1つ減るだけ）。角丸は0〜4px程度に抑え、Hero同様
   「丸くてかわいい」印象にはしない。 */
.info-ticker__media{
  /* 96×64px → 114×70px程度に拡大（ご指定の110〜120×約70pxの範囲内）。
     帯（.info-ticker__item）の上下paddingは変更していないため、帯全体の
     高さは画像の高さ分（+6px）だけの増加に抑えている。 */
  width:114px; height:70px; flex-shrink:0; overflow:hidden; border-radius:4px;
}
.info-ticker__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.info-ticker__body{
  display:flex; flex-direction:column; gap:3px; flex-shrink:0;
  /* タイトルが長くても項目の横幅が伸び続けないよう、タイトル表示エリア
     自体の最大幅を制限する（.info-ticker__item側のwhite-space:nowrapは
     .info-ticker__text側で個別にnormalへ上書きし、この幅の中で折り返す）。 */
  max-width:220px;
}
.info-ticker__date{
  font-family: var(--font-en); font-weight:600; color: var(--color-primary); flex-shrink:0;
  font-size:12px; line-height:1.3; white-space:nowrap;
}
.info-ticker__text{
  flex-shrink:0; color:#fff; font-weight:600;
  /* タイトル最大3行＋3行を超える分は「…」省略。.info-ticker__item全体の
     white-space:nowrapをここだけnormalへ戻し、.info-ticker__bodyの
     max-width内で折り返す。アイキャッチ画像（高さ70px）と「日付＋タイトル
     3行」の高さが概ね揃うよう、font-size/line-heightを調整している
     （日付15.6px＋gap3px＋タイトル3行50.7px＝約69px ≒ 画像70px）。 */
  white-space:normal;
  font-size:12.5px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.info-ticker__arrow{ color: var(--color-accent); font-weight:600; flex-shrink:0; }
@media (max-width: 640px){
  .info-ticker__item{ padding:10px 18px; font-size:12.5px; gap:10px; }
  .info-ticker__media{ width:76px; height:52px; }
  .info-ticker__body{ max-width:150px; }
  .info-ticker__date{ font-size:11px; }
  .info-ticker__text{ font-size:11px; line-height:1.3; }
}
@media (prefers-reduced-motion: reduce){
  /* アニメーションを止め、代わりに手動での横スクロールを許可する。
     2セット目（aria-hidden）は重複表示になってしまうため非表示にし、
     1セット分だけを静止表示する。 */
  .info-ticker__track{ animation:none !important; }
  .info-ticker__scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .info-ticker__group[aria-hidden="true"]{ display:none; }
}
@keyframes info-ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   4.6 QUICK MENU（INFORMATION TICKER直下。レッスン/料金/スケジュール/講師/校舎/体験予約への
   最短導線。GODAIのような余白重視のシンプルさ＋Rhythm Draftのような分かりやすさを意識。
   カードを強く囲わない・強いbox-shadowを使わない・角丸を多用しない方針のため、
   各項目に背景／枠線／影は付けず、余白と控えめなホバー演出だけで区別する。
   紫（--color-primary）はアイコン・下線・矢印のアクセントのみに限定し、背景には使わない。
   ========================================================================== */
.quick-menu{ padding: 64px 0; background: var(--color-bg); }
.quick-menu__grid{
  max-width: var(--container); margin:0 auto; padding: 0 32px;
  display:grid; grid-template-columns: repeat(6, 1fr); gap:8px;
}
.quick-menu__item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding: 22px 10px; color: var(--color-secondary);
  border-radius: var(--radius-sm); /* ごく控えめな角丸のみ。カード化はしない */
}
.quick-menu__icon{
  width:26px; height:26px; color: var(--color-secondary);
  transition: color .2s ease;
}
.quick-menu__icon svg{ width:100%; height:100%; display:block; }
.quick-menu__labels{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.quick-menu__en{
  font-family: var(--font-en); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  color: var(--color-muted);
}
.quick-menu__ja{
  font-size:14.5px; font-weight:700; color: var(--color-secondary);
  position:relative; padding-bottom:5px;
}
.quick-menu__ja::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: var(--color-primary); transition: width .25s ease;
}
.quick-menu__arrow{
  font-family: var(--font-en); font-size:13px; font-weight:600; color: var(--color-primary);
  transition: transform .2s ease;
}
.quick-menu__item:hover .quick-menu__icon,
.quick-menu__item:focus-visible .quick-menu__icon{ color: var(--color-primary); }
.quick-menu__item:hover .quick-menu__ja,
.quick-menu__item:focus-visible .quick-menu__ja{ color: var(--color-primary); }
.quick-menu__item:hover .quick-menu__ja::after,
.quick-menu__item:focus-visible .quick-menu__ja::after{ width:100%; }
.quick-menu__item:hover .quick-menu__arrow,
.quick-menu__item:focus-visible .quick-menu__arrow{ transform: translateX(4px); }
.quick-menu__item:focus-visible{ outline:2px solid var(--color-primary); outline-offset:4px; }

@media (prefers-reduced-motion: reduce){
  /* 矢印の移動（transform）は明確な「動き」のため停止。色変化・下線表示は
     瞬時に切り替わるようにし、機能的なフィードバック自体は残す。 */
  .quick-menu__icon{ transition:none; }
  .quick-menu__ja::after{ transition:none; }
  .quick-menu__arrow{ transition:none; }
  .quick-menu__item:hover .quick-menu__arrow,
  .quick-menu__item:focus-visible .quick-menu__arrow{ transform:none; }
}

@media (max-width: 960px){
  .quick-menu{ padding: 48px 0; }
  .quick-menu__grid{ grid-template-columns: repeat(3, 1fr); gap: 28px 12px; }
}
@media (max-width: 640px){
  .quick-menu{ padding: 40px 0; }
  .quick-menu__grid{ grid-template-columns: repeat(2, 1fr); gap: 22px 8px; padding: 0 20px; }
  .quick-menu__item{ padding: 14px 6px; gap:10px; }
  .quick-menu__icon{ width:22px; height:22px; }
  .quick-menu__ja{ font-size:13.5px; }
  .quick-menu__en{ font-size:9.5px; }
}

/* ==========================================================================
   5. NEWS
   ========================================================================== */
.news{ padding: var(--section-space) 0; }
.news__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; margin-bottom:48px; }
.news-card{
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm);
  border:1px solid var(--color-border); transition: transform .3s ease, box-shadow .3s ease;
}
.news-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.news-card__media{ aspect-ratio: 4/3; overflow:hidden; }
.news-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.news-card:hover .news-card__media img{ transform: scale(1.06); }
.news-card__body{ padding:22px 24px 28px; }
.news-card__date{ font-family: var(--font-en); font-size:12px; color: var(--color-primary); font-weight:600; letter-spacing:.04em; }
.news-card__title{
  font-size:15.5px; font-weight:700; color: var(--color-secondary); margin:10px 0 0;
  line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news__more{ text-align:center; }

/* PC表示（961px以上）だけ、NEWSセクションの縦方向の余白を10〜20%程度詰める。
   カードサイズ・3カラム・角丸・影・フォントサイズは一切変更していない。
   .section-sub / .section-headingは他の多くのセクション（校舎一覧・幼稚園
   教室・About・レッスン紹介・講師紹介・料金・Instagram・お問い合わせ・
   NEWS一覧ページ home.php 等）と共有しているクラスのため、ここでは必ず
   `.news` を親に持つ場合だけにスコープした上書きにしている（他セクション・
   他ページには一切影響しない）。
   ・セクション上端→見出し：padding-top 140px→120px（約14%減）。
     下端（「一覧を見る」→次セクション）は今回対象外のため、
     padding-bottomはvar(--section-space)のまま変更していない。
   ・説明文→NEWSカード上端：.section-subのmargin-bottom 64px→52px（約19%減）。
   ・NEWSカード下端→「一覧を見る」：.news__gridのmargin-bottom 48px→40px（約17%減）。 */
@media (min-width:961px){
  .news{ padding-top:120px; }
  .news .section-sub{ margin-bottom:52px; }
  .news__grid{ margin-bottom:40px; }
}

/* ==========================================================================
   6. カード共通（校舎一覧・幼稚園教室・講師紹介）
   ========================================================================== */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; }
.grow-card{
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm);
  border:1px solid var(--color-border); transition: transform .3s ease, box-shadow .3s ease;
}
.grow-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-hover); }
.grow-card__media{ position:relative; aspect-ratio: 4/3.2; overflow:hidden; }
.grow-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.grow-card:hover .grow-card__media img{ transform: scale(1.06); }
.grow-card__badge{
  position:absolute; top:16px; left:16px; display:flex; gap:6px;
}
.badge{
  font-family: var(--font-en); font-size:11px; font-weight:700; padding:5px 12px; border-radius:999px;
  letter-spacing:.03em;
}
.badge-new{ background: var(--color-accent); color:#fff; }
.badge-soon{ background: var(--color-secondary); color:#fff; }
.badge-genre{ background: var(--color-accent); color:#fff; }
.grow-card__submeta{ font-size:12.5px; color:var(--color-muted); margin:0 0 14px; }
.grow-card__body{ padding:26px 26px 30px; }
.grow-card__title{ font-size:19px; font-weight:700; color: var(--color-secondary); margin:0 0 10px; }
.grow-card__desc{ font-size:13.5px; color:var(--color-muted); margin:0 0 20px; min-height:20px; }
.grow-card__meta{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:22px; }
.grow-card__meta a{ font-size:12.5px; color:var(--color-muted); display:flex; align-items:center; gap:5px; }
.grow-card__meta a:hover{ color: var(--color-primary); }
.grow-card__coming{ font-family: var(--font-en); color:var(--color-muted); font-weight:600; font-size:14px; margin:0 0 22px; }

/* ==========================================================================
   6.0.1 校舎一覧カードのクリック導線（#school-list のみ）
   「カード全体をクリックすると校舎個別ページへ移動する」ための実装。カードタイトルの
   <a> だけを実リンクとし、その ::after を position:absolute; inset:0; でカード全体に
   重ねる「stretched link」パターンを使うことで、<a>の中に<a>を入れ子にすることなく
   カード全体をクリック可能にしている（HTML的には常にリンクは兄弟要素のまま）。
   スケジュール・講師・写真・体験予約ボタンなど残りのリンクは z-index を上げることで
   ストレッチされたオーバーレイの上に来るようにし、引き続き個別にクリックできる。
   すべて #school-list 配下だけに限定したセレクタなので、同じ .grow-card を使う
   幼稚園教室（#kindergarten）・講師紹介（#instructors）・レッスン（.lesson-card）の
   カードには一切影響しない。ホバー演出（.grow-card:hover の transform/box-shadow）も
   上の「6.」の共通ルールをそのまま使うため変更していない。 */
#school-list .grow-card{ position:relative; cursor:pointer; }
#school-list .grow-card__title a{ color:inherit; text-decoration:none; }
#school-list .grow-card__title a::after{ content:''; position:absolute; inset:0; z-index:1; }
#school-list .grow-card__title a:focus-visible{ outline:none; }
#school-list .grow-card__title a:focus-visible::after{
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}
#school-list .grow-card__meta,
#school-list .grow-card__body > .btn{
  position:relative;
  z-index:2;
}

/* ==========================================================================
   6.0.2 幼稚園教室カードのクリック導線（#kindergarten のみ）
   上の「6.0.1」（校舎一覧）と全く同じ Stretched Link パターンを、#kindergarten
   セクションだけに限定して適用したもの。幼稚園教室カードはもともとカード内の
   リンクが「詳しく見る」ボタン1つだけ（校舎一覧のようなスケジュール・講師・
   写真リンクは無い）なので、.grow-card__meta 相当の調整は不要。タイトルの<a>
   がカード全体のクリック領域を担い、「詳しく見る」ボタンは<a>の入れ子にせず
   独立したリンクのまま z-index で上に重ね、ボタン自体の役割・ホバー演出は
   変更していない。#kindergarten 配下だけに限定したセレクタなので、同じ
   .grow-card を使う校舎一覧（#school-list）・講師紹介（#instructors）・
   レッスン（.lesson-card）のカードには一切影響しない。 */
#kindergarten .grow-card{ position:relative; cursor:pointer; }
#kindergarten .grow-card__title a{ color:inherit; text-decoration:none; }
#kindergarten .grow-card__title a::after{ content:''; position:absolute; inset:0; z-index:1; }
#kindergarten .grow-card__title a:focus-visible{ outline:none; }
#kindergarten .grow-card__title a:focus-visible::after{
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}
#kindergarten .grow-card__body > .btn{
  position:relative;
  z-index:2;
}

/* ==========================================================================
   6.1 レッスン紹介カード専用調整（#lessons のみ）
   校舎一覧・幼稚園教室・講師紹介が使う共通の .card-grid / .grow-card（上の「6.」）
   本体は一切変更していない。レッスンのマークアップにだけ追加した .lesson-grid /
   .lesson-card クラスと既存クラスを組み合わせたセレクタ（詳細度を意図的に上げている）
   でのみ上書きするため、他セクションのカード表示に影響しない。
   データ取得ロジック・登録項目・個別ページへのリンクはfront-page.php側も含めて
   一切変更していない（見た目のCSSのみの調整）。
   ========================================================================== */
.lessons-container.container{ max-width: 1400px; } /* カードを少し大きく見せるため、このセクションだけ内側の横幅を広げる */

/* 3件以上登録されている通常時：3列 → 2列（タブレット） → 1列（スマホ）の
   フルードなグリッド。列幅は 1fr（可変）のため、コンテナを広げた分だけ
   カードもわずかに大きくなる（列数のロジック自体は他セクションの
   .card-grid と同じ考え方だが、詳細度の関係で明示的に3段とも書き直している）。 */
.lesson-grid.card-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
}
@media (max-width: 960px){
  .lesson-grid.card-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 640px){
  .lesson-grid.card-grid{ grid-template-columns: 1fr; gap: 28px; }
}

/* 登録件数が3の倍数でない場合（例：8件→3・3・2）の最後の端数行（1〜2件）を、
   PC 3列表示のときだけ中央寄せにするためのラッパー（front-page.php側で
   最後の1〜2件だけをこの.lesson-grid__last-rowで包んでいる）。
   grid-column:1/-1で3列ぶん全体を使う1つの行として扱い、内部はflexboxで
   中央寄せする。カード幅は通常のグリッドの1列ぶんと同じ計算式
  （(行の幅 − 列間24px×2) ÷ 3）で明示的に指定しているため、カードの見た目の
   幅・デザインは通常のカードと変わらない。 */
.lesson-grid__last-row{
  grid-column: 1 / -1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 24px;
}
.lesson-grid__last-row .lesson-card{
  flex: 0 1 calc((100% - 48px) / 3);
}
@media (max-width: 960px){
  /* タブレット・スマホでは、このラッパー自体をdisplay:contentsで消し、
     中の1〜2件を通常のlesson-grid（2列→1列）の流れにそのまま戻す。
     これにより、タブレット・スマホのレスポンシブ表示は今回の変更前と
     完全に同じ（8件が2列×4行、または1列×8行で自然に並ぶ）になる。 */
  .lesson-grid__last-row{ display:contents; }
}

/* 1〜2件しか登録されていない場合：3列/2列ぶんの幅を使わず、実カード数ぶんだけを
   中央にまとめる（＝左端に寄らない）。カード自体の最大幅は420pxに固定するため、
   1件だけの場合でも不自然に横いっぱいへ引き伸ばされることはない。 */
.lesson-grid--few.card-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  justify-content: center;
  gap: 40px 24px;
}
@media (max-width: 640px){
  .lesson-grid--few.card-grid{
    grid-template-columns: 1fr;
    max-width: 480px; /* 横長のスマホ・小型タブレットでも間延びしすぎないための保険 */
    margin: 0 auto;
    gap: 28px;
  }
}

.lesson-card.grow-card{ border-radius: var(--radius-lg); }
.lesson-card .grow-card__media{
  /* 写真をカードの主役として少し大きく見せるため、他セクション（4/3.2）より
     やや縦長の比率にする */
  aspect-ratio: 4/3.5;
}
.lesson-card .grow-card__body{ padding: 28px 28px 32px; }
.lesson-card .grow-card__title{ font-size:21px; margin-bottom:8px; }
.lesson-card .grow-card__submeta{ font-size:13px; margin-bottom:16px; }
.lesson-card .grow-card__desc{
  font-size:14px; line-height:1.7; margin-bottom:24px; min-height:24px;
  /* 紹介文の省略はCSSの複数行省略（line-clamp）に統一。PHP側では文字数で
     途中カットしなくなったため、単語の途中で不自然に切れることがなくなる。
     3行に固定することで、文章の長さに関わらずカード間の高さのバラつきも
     抑える（PC・スマホとも同じ3行。フォントサイズ・行間・余白はサイズ確定済みの
     ため変更していない）。 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   6.1.1 レッスン紹介：TOPページの2グループ表示
   （「年齢・対象から選ぶ」/「特色あるクラス」）
   カード本体（.grow-card / .lesson-card、上の「6.」「6.1」）のデザインは
   一切変更していない。グループの見出しと、グループ同士の間隔だけを追加した。
   front-page.php側で、ACFの lesson_show_top がONの投稿だけを取得し、
   lesson_top_group で2グループに分けて、それぞれこの .lesson-group で
   包んで出力している（グリッド自体は既存の .lesson-grid.card-grid を
   そのまま再利用しているため、PC 3列→タブレット2列→スマホ1列の挙動も
   既存のレッスンカードと完全に同じ）。
   ========================================================================== */
.lesson-groups{ display:flex; flex-direction:column; gap:64px; }
.lesson-group__title{
  font-family: var(--font-en); font-weight:700; font-size:20px; text-align:center;
  color: var(--color-primary); margin:0 0 32px; letter-spacing:.02em;
  position:relative; padding-bottom:14px;
}
.lesson-group__title::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:48px; height:3px; border-radius:999px; background: var(--color-primary);
}
@media (max-width: 640px){
  .lesson-groups{ gap:48px; }
  .lesson-group__title{ font-size:18px; margin-bottom:24px; }
}

/* ==========================================================================
   6.2 講師紹介カード専用調整（#instructors のみ）
   校舎一覧・幼稚園教室・講師紹介が共有する .card-grid / .grow-card 本体（上の
   「6.」）は一切変更していない。#instructors配下にだけ効くセレクタで、
   全講師のカードの見え方を揃えるための最小限の追加のみ行っている。
   ========================================================================== */
/* プロフィール文は今回から省略せず全文表示する（line-clampは廃止）。
   ただし文章量が講師ごとに異なると「詳しく見る」ボタンの縦位置が
   行内でバラついてしまうため、#instructors のカードだけをFlexboxの
   縦積みにし、ボタンをmargin-top:autoで各カードの下端に揃える。
   カード自体の高さは従来通り.card-gridのCSS Grid（align-items:stretch）
   により同じ行内で最も高いカードへ揃うため、その中でボタンだけが
   下端に張り付く形になる。校舎一覧・幼稚園教室が使う .grow-card 本体の
   定義（上の「6.」）は一切変更しておらず、#instructors配下にだけ
   効くセレクタで上書きしている。 */
#instructors .grow-card{ display:flex; flex-direction:column; }
#instructors .grow-card__media{ flex-shrink:0; }
#instructors .grow-card__body{ display:flex; flex-direction:column; flex:1 1 auto; }
#instructors .grow-card__body .btn{
  margin-top:auto;
  /* .grow-card__body をFlexboxの縦積みにした際、align-itemsを指定していない
     ため既定値のstretchが効き、本来display:inline-flexで内容幅（コンパクト）
     だったボタンが横幅いっぱいに伸びてしまっていた（意図しない副作用）。
     align-self:flex-startでボタンだけ本来の内容幅に戻す。margin-top:autoに
     よる下揃えの挙動には影響しない（cross軸のサイズ・位置とmain軸の位置は
     独立して効くため）。タイトル・本文（h3/p）はブロック要素として元々
     幅いっぱいに広がる仕様のため、この変更による影響はない。 */
  align-self:flex-start;
}
.instructors__more{
  text-align:center;
  /* .card-gridは校舎一覧・幼稚園教室とも共有しているため、その本体に
     margin-bottomを足すと他セクションにも余白が生まれてしまう。そのため
     カードグリッド側ではなく、この新規追加要素（.instructors__more）側に
     margin-topを付けて、講師紹介セクションだけにボタンとの間隔を作っている
     （NEWSセクションの.news__grid{margin-bottom:48px}と同じ間隔・考え方）。 */
  margin-top:48px;
}

/* ==========================================================================
   6.4 講師紹介：TOPページの横スクロール写真帯（#instructors のみ）
   紹介文・「詳しく見る」ボタンは持たず、カード＝写真そのものを講師個別ページへの
   リンクにした「写真中心」の一覧。校舎一覧・幼稚園教室・レッスン紹介が使う
   .card-grid / .grow-card とは別の専用クラス（.instructor-card 等）を新規に
   用意しており、既存の .grow-card 系スタイル（上の「6.」「6.2」）には
   一切影響しない（「6.2 講師紹介カード専用調整」もそのまま残しているが、
   front-page.php側が.grow-cardを出力しなくなったため現在は使われていない。
   万一この変更を戻す場合の参考用として、あえて削除せず残してある）。
   自動送りはCSSのanimationではなくJS（main.js）がrequestAnimationFrameで
   scrollLeftを直接ゆっくり動かす方式。overflow-x:autoのネイティブスクロール
   コンテナのままにすることで、タッチデバイスでの横スワイプ操作はブラウザ標準の
   挙動としてそのまま使える（INFORMATION TICKERのCSS @keyframes方式は
   overflow:hiddenが前提でタッチスワイプに非対応のため、今回は方式を変えている）。
   ========================================================================== */
.instructor-scroller{
  --instructor-card-w: 230px;
  --instructor-gap: 16px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; /* iOS Safariの慣性スクロール */
  touch-action:pan-x;
  scroll-behavior:auto; /* main.jsが毎フレームscrollLeftを直接操作するため、
                            ブラウザ側のsmoothスクロール補間は使わない（カクつき防止） */
  -ms-overflow-style:none; scrollbar-width:none; /* 装飾的な自動送り帯のため、スクロールバーは非表示にする */
}
.instructor-scroller::-webkit-scrollbar{ display:none; }
.instructor-scroller__track{
  display:flex; align-items:flex-start; width:max-content;
  gap: var(--instructor-gap);
  padding: 0 32px; /* .containerの左右padding(32px)と合わせ、上の見出しと視覚的に揃える */
}
/* 無限ループ用に複製した2セット目をまとめるための要素。display:contentsで
   自身はflexレイアウトに関与させず、中のカードを.instructor-scroller__trackの
   直接の子（＝flexアイテム）として扱わせている。こうすることで、1セット目
   最後のカードと2セット目最初のカードの間も他のカード同士と全く同じgapになり、
   継ぎ目が目立たない（グループ自体をflexコンテナにすると、グループの境界にだけ
   余計な余白ができてしまうため、あえてこの形にしている）。 */
.instructor-scroller__group{ display:contents; }

.instructor-card{
  position:relative; display:block; flex:0 0 auto;
  width: var(--instructor-card-w);
  aspect-ratio: 3 / 4; /* 縦長カード。object-fit:coverと組み合わせるため元画像の比率に関わらず崩れない */
  border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-sm); border:1px solid var(--color-border);
}
.instructor-card__media{ position:absolute; inset:0; display:block; }
.instructor-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.instructor-card:hover .instructor-card__media img{ transform: scale(1.06); }

.instructor-card__badge{
  position:absolute; top:10px; left:10px; z-index:2;
  max-width: calc(100% - 20px); /* ジャンル名が長い場合でもカード幅から見切れないよう、折り返しを許可する */
  white-space:normal; line-height:1.3; text-align:left;
}
.instructor-card__name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 32px 10px 12px;
  /* 写真下部だけを暗くするグラデーション。文字色を白固定にすることで、
     どの写真の上でも講師名の可読性を確保する。 */
  background: linear-gradient(to top, rgba(20,16,15,.78) 0%, rgba(20,16,15,0) 100%);
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:960px){
  .instructor-scroller{ --instructor-card-w:190px; --instructor-gap:14px; }
}
@media (max-width:640px){
  .instructor-scroller{ --instructor-card-w:160px; --instructor-gap:12px; }
  .instructor-scroller__track{ padding: 0 20px; }
  .instructor-card__name{ font-size:12.5px; padding:26px 8px 10px; }
  .instructor-card__badge{ top:8px; left:8px; }
}

@media (prefers-reduced-motion: reduce){
  /* 自動送りの起動自体はmain.js側で止めているが、念のためCSS側でも保険をかける。
     複製した2セット目（aria-hidden）を表示したままだと、手動スクロール時に
     同じ内容が2回出てくるだけになってしまうため非表示にし、実際の講師数ぶんだけの
     一覧として手動で横スクロールできるようにする。 */
  .instructor-scroller__group[aria-hidden="true"] .instructor-card{ display:none; }
}


/* ==========================================================================
   6.5. GROW UPについて
   ========================================================================== */
/* PC: 左右比率を40:60→44:56に調整（ご依頼の約42:58〜45:55の範囲内）し、
   左テキスト側に少し余裕を持たせて可読性を改善。セクション上下の
   padding（--section-space-compact）も120px→104pxに詰め、「大きな余白感」
   自体は残しつつ間延びした印象を減らしている。 */
.about{ background: var(--color-bg-soft); padding: var(--section-space-compact) 0; }
.about__grid{
  max-width: var(--container); margin:0 auto; padding:0 32px;
  /* 今回の写真構成（右側ビジュアルの入れ子グリッド化）の検証中、44%/56%という
     パーセント指定のグリッド列が、gap:64pxを差し引かずに計算されるため、
     1024px・1280px幅で列の合計がコンテナ幅を64px超え、サイト全体の
     overflow-x:hiddenによって右側が見えないところで切れてしまう
     問題（実装前から存在していた既存の挙動）を発見した。fr単位（44fr 56fr）
     は同じ44:56比率を保ちながらgapを差し引いてから配分するため、
     見た目の比率を変えずにこの問題を解消できる。ABOUTセクション専用の
     .about__gridにのみ影響し、他セクションのグリッドには影響しない。 */
  display:grid; grid-template-columns: 44fr 56fr; gap:64px; align-items:center;
}
.about__title{
  font-family: var(--font-en); font-weight:700; font-size:34px; text-align:left;
  color: var(--color-secondary); margin: 0 0 22px;
  /* ブランドメッセージ「ダンスを通して、一人ひとりが成長できる場所。」用に
     line-heightを明示指定。指定しない場合はbodyの line-height:1.8 を
     そのまま継承し、34pxの2行見出しとしては行間が間延びして見えるため、
     このタイトルだけ少し詰めている（他の見出し・本文には影響しない）。 */
  line-height:1.5;
}
.about__desc{
  /* 可読性改善：15.5px→16px、line-height 1.9→1.8（間延びを抑えつつ
     読みやすさは維持）、font-weight:500を追加（既存デザインの
     .main-nav a 等と同じ「やや強め」のウェイトで、文章が薄く弱く
     見えるのを改善）。 */
  font-size:16px; color: var(--color-text); margin-bottom:30px; line-height:1.8; font-weight:500;
}
/* 「3つの価値」（CHALLENGE / CONFIDENCE / CONNECTION）。カードのような大きな
   コンポーネントにはせず、小さな番号＋英字＋日本語だけのシンプルな一列表示に
   とどめ、ABOUTセクション全体が長くなりすぎないようにしている。
   PC幅で2項目が横並びになり3項目目だけ折り返される問題を解消するため、
   display:flexのflex-wrapによる横並びをやめ、.about__valuesを3列
   （番号／英字／日本語）のCSS Gridにした。.about__value（1項目分の<div>）は
   display:contentsにして自身のボックスを消し、中の3つのspanを直接
   .about__valuesのグリッドアイテムにすることで、既存のHTML構造
   （.about__value > 3つのspan）を一切変更せずに、3行×3列を実現している。
   各列の幅はautoで最も長い内容（例：英字列なら"CONFIDENCE"）に合わせて
   自動的に揃うため、番号・英字・日本語それぞれの開始位置が3行で揃う。
   文字サイズ・フォント・色・番号の紫色は既存のまま変更していない。 */
.about__values{
  display:grid; grid-template-columns: auto auto auto; column-gap:12px; row-gap:10px;
  align-items:baseline; margin:0 0 30px;
}
.about__value{ display:contents; }
.about__value-num{
  font-family: var(--font-en); font-weight:700; font-size:13px;
  color: var(--color-primary);
}
.about__value-en{
  font-family: var(--font-en); font-weight:700; font-size:13px;
  letter-spacing:.1em; color: var(--color-secondary);
}
.about__value-ja{ font-size:13.5px; color: var(--color-muted); }

/* 右側ビジュアル：大きな写真1枚＋小さな写真2枚の組み合わせ。
   .about__media自体を2列グリッドにし、メイン写真（.about__photo--main）は
   grid-column:1/-1で1行目を全幅使用、サブ写真2枚（.about__photo--sub）は
   2行目に横並びで配置する。既存の.about__media imgに使っていた
   border-radius:var(--radius-lg) / box-shadow:var(--shadow)は「大きな影」の
   ため、ここでは指定どおり軽い影（var(--shadow-sm)）とやや小さい角丸
   （var(--radius)）に変更している。 */
.about__media{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  /* .about__media自体が.about__grid（外側のグリッド）のグリッドアイテムであり、
     グリッドアイテムの自動最小サイズ（min-width:auto）は既定でコンテンツの
     min-content幅を下回らない。写真（img）の実際のピクセルサイズがその
     min-content幅に影響し、1024〜1280px幅あたりで.about__mediaが割り当て列
     幅を超えてはみ出す横スクロールが発生することを確認したため、
     min-width:0で明示的に解除している（他の見た目には影響しない）。 */
  min-width:0;
}
.about__photo{
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden;
}
.about__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.about__photo--main{ grid-column: 1 / -1; aspect-ratio: 16/9.5; }
.about__photo--sub{ aspect-ratio: 1/1; }

/* ==========================================================================
   6.52 OUR PHILOSOPHY（TOPは理念の入口。コンパクトな導入のみ）
   ABOUTセクション直後に配置。長い理念全文はここには置かず、「心・体・絆」の
   3つの成長をシンプルに見せるだけにとどめ、詳細は「初めての方へ」ページへの
   CTAに委ねる。カード化（背景・影・枠）はせず、文字と余白だけで構成し、
   TOPページ全体の高さを不必要に増やさないよう、上下の余白は既存の
   --section-space（140px）/ --section-space-compact（104px）よりさらに
   詰めた値を専用に指定している。 */
.philosophy-intro{
  padding: 68px 0;
  background: var(--color-bg);
  text-align:center;
}
.philosophy-intro__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:40px;
  max-width:880px; margin:0 auto 44px;
}
.philosophy-intro__num{
  display:block; font-family: var(--font-en); font-weight:700; font-size:20px;
  letter-spacing:.05em; color: var(--color-primary); margin-bottom:8px;
}
.philosophy-intro__title{ font-size:18px; font-weight:700; color: var(--color-secondary); margin:0 0 8px; }
.philosophy-intro__text{ font-size:14px; line-height:1.75; color: var(--color-muted); margin:0; }
/* 「大人が輝けば、子どもたちの未来も輝く。」＝3項目より一段強いメッセージ。
   カード化はせず、上の細い罫線とやや大きめ・primary色の文字だけで「格上げ」して
   見せる（過剰なアニメーション・背景装飾は使わない）。 */
.philosophy-intro__message{
  font-family: var(--font-en); font-weight:700; font-size:23px; line-height:1.6;
  color: var(--color-primary); max-width:640px; margin:0 auto 40px;
  padding-top:36px; border-top:1px solid var(--color-border);
}
.philosophy-intro__cta{ text-align:center; }

@media (max-width:960px){
  .philosophy-intro__grid{ gap:28px; }
}
@media (max-width:640px){
  .philosophy-intro{ padding:48px 0; }
  .philosophy-intro__grid{ grid-template-columns: 1fr; gap:32px; margin-bottom:36px; }
  .philosophy-intro__message{ font-size:19px; padding-top:28px; margin-bottom:32px; }
}


/* ==========================================================================
   6.55 料金セクション
   ========================================================================== */
.pricing-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; max-width:1000px; margin:0 auto; }
/* 武蔵小杉校のように料金カードが1枚だけの場合に、左半分に寄らず中央配置するための
   専用修飾クラス。既存の .pricing-grid 本体（戸塚校・湘南台校・TOPページで使用）は
   変更しない。1列にした上で、通常の2列時の1カラム分とほぼ同じ幅に制限している。 */
.pricing-grid--single{ grid-template-columns: 1fr; max-width:480px; }
.pricing-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); border:1px solid var(--color-border);
  padding:44px 40px; display:flex; flex-direction:column;
}
.pricing-card__label{
  font-family: var(--font-en); font-weight:700; font-size:13px; letter-spacing:.08em;
  color: var(--color-primary); text-transform:uppercase; margin-bottom:22px; display:block;
}
.pricing-card__highlight{ margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--color-border); }
.pricing-card__highlight-freq{ font-size:14px; color: var(--color-text); margin-bottom:8px; }
.pricing-card__highlight-price{ font-family: var(--font-en); font-weight:800; font-size:36px; color: var(--color-secondary); }
.pricing-card__highlight-price .unit{ font-size:15px; font-weight:600; color:var(--color-muted); margin-left:6px; }
.pricing-card__list{ margin-bottom:30px; flex-grow:1; }
.pricing-card__row{
  display:flex; justify-content:space-between; gap:12px; font-size:14px; color: var(--color-text);
  padding:10px 0; border-bottom:1px dashed var(--color-border);
}
.pricing-card__row:last-child{ border-bottom:none; }
.pricing-note{ text-align:center; font-size:13px; color:var(--color-muted); margin-top:36px; }

/* TOPページの料金セクション専用（月謝制／チケット制の対象年齢の違いを伝えるための
   バッジ・橋渡し文・「こんな方におすすめ」補足ブロック）。
   single-school.php側のgrowup_pricing_card_html()が使う.pricing-card__list
   （flex-grow:1でカード下部の余白を吸収する共有クラス）はそのまま変更していない。
   TOPページの説明文は、flex-growを持たない新設の.pricing-card__descに置き換える
   ことで、本文とボタンの間に不要な空白ができないようにしている（右カードに
   ボタンが少なくても、その分は.pricing-card末尾に自然な余白として残るだけで、
   本文とボタンの間に空白が挟まることはない）。 */
.pricing-bridge-note{
  display:block; text-align:center; max-width:560px; margin:0 auto 32px;
  background:#fff; border:1px solid var(--color-border); border-radius:999px;
  padding:10px 22px; font-size:13px; font-weight:600; color:var(--color-primary);
}
.pricing-card__age{
  display:inline-block; background:rgba(111,45,189,.08); color:var(--color-primary);
  font-size:12.5px; font-weight:600; padding:5px 14px; border-radius:999px; margin:0 0 20px;
}
.pricing-card__desc{ margin:0 0 28px; }
.pricing-card__suggest{
  background: var(--color-bg-soft); border-radius: var(--radius-sm); padding:18px 20px; margin:0 0 28px;
}
.pricing-card__suggest-title{
  display:block; font-size:13px; font-weight:700; color:var(--color-secondary); margin-bottom:10px;
}
.pricing-card__suggest-list{ margin:0; padding-left:18px; font-size:13.5px; color:var(--color-text); }
.pricing-card__suggest-list li{ margin-bottom:4px; }
.pricing-card__suggest-list li:last-child{ margin-bottom:0; }

/* ==========================================================================
   6.6 個別ページ共通（レッスン・講師）
   ========================================================================== */
.single-hero{ padding: 110px 0 70px; }
.single-hero__media{
  max-width:960px; margin:0 auto 48px; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow); aspect-ratio: 16/9;
}
.single-hero__media img{ width:100%; height:100%; object-fit:cover; }
.single-hero__body{ max-width:720px; margin:0 auto; text-align:center; }
.single-hero__badges{ display:flex; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.badge-outline{
  display:inline-block; font-size:12px; font-weight:600; padding:6px 16px; border-radius:999px;
  border:1px solid var(--color-border); color: var(--color-text); background:#fff;
}
.single-hero__title{
  font-family: var(--font-en); font-weight:700; font-size:36px; color: var(--color-secondary); margin:0 0 22px;
}
.single-hero__desc{ font-size:15.5px; color: var(--color-text); line-height:1.9; margin-bottom:36px; text-align:left; }
/* 校舎個別ページ（single-school.php）のヒーロー内、「📅 スケジュール」等の
   リンク行（.sns-links）と、その下の「体験レッスン予約 →」ボタンの間に余白を
   追加する。.sns-links自体（gapのみでmargin-bottomを持たない）はレッスン
   個別ページの本文中や講師個別ページのSNS欄など他の場所でも共有しているため、
   .sns-links本体は変更せず、.single-hero__body内にネストした場合だけに
   絞って margin-bottom を追加している（他ページの.single-hero__bodyは
   スケジュール等のリンク行を持たないため、実質的にsingle-school.phpのみに
   影響する）。ボタン自体のデザイン・サイズ・色は変更していない。 */
.single-hero__body .sns-links{ margin-bottom:24px; }
.single-related{ padding: 40px 0 var(--section-space); }
.single-related .section-heading{ margin-bottom:40px; }

/* 講師個別ページの写真：丸型（border-radius:999px）は廃止し、他の個別ページ
   （レッスン・校舎）と同じ「角丸」の方向性に統一。ただし人物写真のため
   横長ではなく縦長（4:5）にしている。.single-hero__media 本体（レッスン・校舎が
   使う max-width:960px / aspect-ratio:16/9 など）は変更せず、この専用の
   追加クラスだけで上書きするため、他の個別ページには影響しない。 */
.single-hero__media--instructor{
  max-width: 320px;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
}
.single-hero__media--instructor img{
  /* 人物写真の顔が不自然に切れないよう、中央よりやや上を基準にトリミングする */
  object-position: center 25%;
}
@media (max-width: 640px){
  .single-hero__media--instructor{ max-width: 240px; }
}

/* 講師プロフィール専用 */
.instructor-profile{ max-width:960px; margin:0 auto; padding:0 32px 40px; }
.instructor-block{ margin-bottom:48px; }
.instructor-block__label{
  font-family: var(--font-en); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--color-primary); margin-bottom:16px; display:block;
}
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-chip{
  display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  background: var(--color-bg-soft); border:1px solid var(--color-border); font-size:13px; color: var(--color-secondary);
}
.tag-chip:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.sns-links{ display:flex; gap:12px; justify-content:center; }

/* FAQ（よくある質問）アコーディオン：<details>/<summary>のみで開閉し、JavaScriptは使用しない。
   開閉アイコン（＋/−）もCSSのみ（[open]セレクタ）で切り替える。既存の .instructor-block / .eyebrow / .btn
   を流用し、FAQ専用に追加するクラスは .faq-list / .faq-item / .faq-item__answer の最小限のみ。 */
.faq-list{ margin:8px 0 24px; }
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item:first-child{ border-top:1px solid var(--color-border); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 4px; min-height:24px; font-size:15px; font-weight:600; color: var(--color-secondary);
  cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; font-size:20px; font-weight:400; line-height:1; color: var(--color-primary);
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item__answer{ margin:0 0 20px; font-size:15px; color: var(--color-muted); line-height:1.7; }

/* TRIAL LESSON CTA：校舎ページ最後の共通CTA。他の .instructor-block（背景なし・左寄せ）より
   目立たせるため、背景に既存の --color-bg-soft（サイト共通のライト背景色）を敷き、角丸は
   既存の --radius-lg を使用（新しい色は追加していない）。中央揃え・上下の余白を広めに取り、
   最終セクションであることを視覚的に示す。ボタンは既存の .btn.btn-primary をそのまま流用。
   見出しのみ、他の .instructor-block の見出し（22px固定）より大きく・レスポンシブに
   縮小させる必要があるため、インラインstyleではなくこのクラス経由で指定している。 */
.instructor-block--cta{
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 64px 32px;
  text-align: center;
}
.instructor-block--cta h2{ font-size:32px; font-weight:700; color:#1a1a1a; margin:0 0 16px; }

/* 担当講師：TOPページ #instructors の .instructor-scroller 系CSS（カード幅・横スクロール・
   スクロールバー非表示・タッチスワイプなど）をそのまま再利用し、校舎ページでも横スクロール表示に
   変更（PC 230px／タブレット190px／スマホ160pxのカード幅はTOPページ側の既存メディアクエリが
   そのまま適用される）。data-instructor-scroller属性は付けておらず、カードの複製も行っていないため、
   TOPページ側のJS（main.js内の自動横スクロール処理）は校舎ページのこの要素を対象にしない＝
   JS無し・ユーザー操作のみの横スクロールになる。.instructor-hscroll は校舎ページ専用の追加クラスで、
   .instructor-scroller__track 本来の左右padding（TOPページでは編集不可・触れていない）だけを0に
   上書きし、カード列の左端を他の.instructor-block（ACCESS本文やFAQ等）と同じ位置に揃えている。
   このセレクタは常に.instructor-hscrollを祖先に持つため、TOPページの.instructor-scroller__trackには
   一切影響しない。 */
.instructor-hscroll .instructor-scroller__track{ padding:0; }

/* ==========================================================================
   6.7 汎用ページヘッダー／本文（NEWS詳細・固定ページ・アーカイブ・404で共通使用）
   ========================================================================== */
.page-hero{ padding: 110px 0 56px; text-align:center; }
.page-hero__title{
  font-family: var(--font-en); font-weight:700; font-size:38px; color: var(--color-secondary); margin:0 0 14px;
}
.page-hero__meta{ font-size:13px; color:var(--color-muted); font-family: var(--font-en); letter-spacing:.03em; }

.entry-content{ max-width:760px; margin:0 auto; padding:0 32px 40px; font-size:16px; line-height:1.9; color: var(--color-text); }
.entry-content h2{ font-family: var(--font-en); font-weight:700; font-size:26px; color: var(--color-secondary); margin:48px 0 20px; }
.entry-content h3{ font-family: var(--font-en); font-weight:700; font-size:20px; color: var(--color-secondary); margin:36px 0 16px; }
.entry-content p{ margin:0 0 24px; }
.entry-content img{ max-width:100%; height:auto; border-radius: var(--radius); margin:32px 0; }
.entry-content ul, .entry-content ol{ margin:0 0 24px; padding-left:1.4em; }
.entry-content li{ margin-bottom:8px; }
.entry-content blockquote{ border-left:3px solid var(--color-primary); padding-left:20px; margin:32px 0; color:#666; font-style:italic; }
.entry-content a{ color: var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.entry-content--empty{ color:var(--color-muted); text-align:center; }

.entry-footer{ max-width:760px; margin:8px auto 64px; padding:0 32px; }

.archive-wrap{ padding: 0 0 var(--section-space); }

.pagination{ margin-top:56px; }
.pagination .nav-links{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 14px;
  border-radius:999px; font-size:13.5px; font-weight:600; border:1px solid var(--color-border); color: var(--color-secondary);
}
.pagination .page-numbers.dots{ border-color:transparent; }
.pagination .page-numbers.current{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.pagination a.page-numbers:hover{ border-color: var(--color-primary); color: var(--color-primary); }

.error-404{ padding: var(--section-space) 0; text-align:center; }
.error-404__code{ font-family: var(--font-en); font-weight:800; font-size:120px; color: var(--color-bg-soft); line-height:1; margin-bottom:8px; }
.error-404__title{ font-family: var(--font-en); font-weight:700; font-size:28px; color: var(--color-secondary); margin:0 0 16px; }
.error-404__desc{ color:var(--color-muted); margin-bottom:40px; }

/* ==========================================================================
   7. プレースホルダーセクション（今後実装分）
   ========================================================================== */
.placeholder-section{ padding: 90px 0; text-align:center; }
.placeholder-section__box{
  border:2px dashed var(--color-border); border-radius: var(--radius); padding:70px 24px; color:var(--color-muted);
  font-size:14px;
}

/* ==========================================================================
   7.4 Instagram
   ========================================================================== */
.instagram-embed-wrap{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:48px;
}
/* Instagram公式埋め込み（blockquote.instagram-media）の余白をデザインに合わせて調整 */
.instagram-embed-wrap .instagram-media{ margin:0 !important; }

/* Instagram Feedプラグイン（[instagram-feed feed=1]）の出力ラッパー。
   ショートコード自体・プラグインの取得設定（Instagram連携／列数設定など）は変更していない。
   ここではテーマ側のCSSのみで、フィード全体の表示サイズ（最大幅・列数・画像比率）を調整する。
   プロフィール画像・アカウント名・プロフィール文章（プラグインのヘッダー部分）はそのまま残し、削除・非表示にはしない。 */
.instagram-feed-wrap{
  margin: 48px auto 0; max-width:1100px; overflow:hidden;
}
.instagram-feed-wrap img{ max-width:100%; height:auto; }

/* 投稿一覧グリッドの列数をテーマ側で指定する。
   プラグインは列数に応じて #sbi_images / .sbi_item に独自の幅（インラインスタイル含む）を
   設定してくるため、!important で確実に上書きしている（要素自体の削除・並び替えは行わない）。
   表示件数はfront-page.php側でnum=6に絞っているため、
   PC：3列×2段 → タブレット（960px以下）：3列×2段（PCと同じ） → スマホ（640px以下）：2列×3段。 */
.instagram-feed-wrap #sbi_images{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
  width:100% !important;
}
.instagram-feed-wrap #sbi_images .sbi_item{
  width:auto !important;
  max-width:none !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}
.instagram-feed-wrap #sbi_images .sbi_item .sbi_photo_wrap{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  overflow:hidden !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* 他セクションの.grow-cardと同様に、ホバー時に控えめに浮き上がる演出（浮き上がり幅は
   .grow-card（-10px）より控えめな-4pxにとどめている）。 */
.instagram-feed-wrap #sbi_images .sbi_item .sbi_photo_wrap:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.instagram-feed-wrap #sbi_images .sbi_item .sbi_photo_wrap .sbi_photo,
.instagram-feed-wrap #sbi_images .sbi_item .sbi_photo_wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

@media(max-width:640px){
  .instagram-feed-wrap #sbi_images{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
}

/* ==========================================================================
   7.5 お問い合わせ
   「体験レッスンへの導線」を主役にするため、上部（体験予約CTA）と下部
   （一般問い合わせフォーム）の間に区切り線＋見出しを追加した。
   .contact-form-wrap以下（フォーム本体のCSS）は既存のまま変更していない。
   ========================================================================== */
/* 体験予約CTAは1つのボタンに統一（校舎ごとの個別ボタン一覧は廃止）。
   .sns-links（複数ボタンの横並び用）はもう使わないため、単純に中央寄せするだけ。 */
.contact-trial-cta{ text-align:center; }
.contact-secondary{
  margin-top:56px; padding-top:48px; border-top:1px solid var(--color-border);
}
.contact-secondary__heading{
  text-align:center; font-size:22px; font-weight:700; color: var(--color-secondary); margin:0 0 12px;
}
.contact-form-wrap{ max-width:720px; margin:48px auto 0; }
.contact-form-wrap .placeholder-section__box{ padding:56px 24px; }

/* WPFormsの埋め込み出力を、ブランドカラーに合わせて軽く上書き */
.contact-form-wrap .wpforms-container{ margin:0; }
.contact-form-wrap .wpforms-container input[type=text],
.contact-form-wrap .wpforms-container input[type=email],
.contact-form-wrap .wpforms-container input[type=tel],
.contact-form-wrap .wpforms-container textarea,
.contact-form-wrap .wpforms-container select{
  border-radius: var(--radius) !important;
  border-color: var(--color-border) !important;
  font-family: var(--font-jp) !important;
}
.contact-form-wrap .wpforms-container input:focus,
.contact-form-wrap .wpforms-container textarea:focus,
.contact-form-wrap .wpforms-container select:focus{
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(111,45,189,.12) !important;
}
.contact-form-wrap .wpforms-container button[type=submit],
.contact-form-wrap .wpforms-container .wpforms-submit{
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 999px !important;
  font-family: var(--font-jp) !important;
  font-weight:700 !important;
  padding: 14px 40px !important;
  transition: background .2s ease !important;
}
.contact-form-wrap .wpforms-container button[type=submit]:hover,
.contact-form-wrap .wpforms-container .wpforms-submit:hover{
  background: var(--color-accent) !important;
}

/* ==========================================================================
   8. フッター
   ========================================================================== */
.site-footer{ background: var(--color-secondary); color:#fff; padding: 80px 0 32px; }
.site-footer__inner{ max-width: var(--container); margin:0 auto; padding:0 32px; }
.site-footer__brand{ font-family: var(--font-en); font-weight:800; font-size:22px; margin-bottom:12px; }
.site-footer__brand .accent{ color: var(--color-accent); }

/* PC：左（ブランド）／中央（MENU）／右（SCHOOL）の3カラム。
   紫は既存のアクセント使用箇所（ブランド名の一部・列見出し・ホバー）に限定し、
   背景は黒のまま、本文リンクは薄いグレー（#ccc）を基本にしている。 */
.site-footer__grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.site-footer__desc{ color:#bbb; font-size:13.5px; max-width:440px; line-height:1.8; margin:0 0 20px; }

.site-footer__instagram{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; color:#ccc;
}
.site-footer__instagram:hover{ color: var(--color-accent); }

/* 複数校舎のInstagramリンクを縦並びにするラッパー。
   既存の .site-footer__instagram 自体（戸塚校用）は一切変更していない。 */
.site-footer__instagram-list{ display:flex; flex-direction:column; gap:8px; }

.site-footer__col-title{
  display:block; font-family: var(--font-en); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color: var(--color-accent);
  margin-bottom:20px;
}

.site-footer__links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.site-footer__links a{ font-size:13.5px; color:#ccc; }
.site-footer__links a:hover{ color:#fff; }

.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:24px; font-size:12px; color:#888;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px;
}
.site-footer__bottom a{ color:#888; }
.site-footer__bottom a:hover{ color:#fff; }

/* タブレット：3列を無理に維持せず2列に。ブランド列を上段に全幅で単独配置し、
   MENU・SCHOOLを下段で2列並びにする（読みやすさ優先、PCの3列は崩さない）。 */
@media (max-width: 960px){
  .site-footer__grid{
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
  .site-footer__col--brand{
    grid-column: 1 / -1;
  }
}

/* スマホ：1列に完全に積む。
   縦の余白が広くフッター全体が長くなりすぎるとのご指摘を受け、640px以下に限定して
   ブロック間隔・列見出しの余白・リンク同士の間隔を詰めてコンパクトにしている
   （ブランド／紹介文／Instagramリンク・文字サイズ・1カラム構成・PC/タブレットの
   3カラム構造には影響しない）。 */
@media (max-width: 640px){
  .site-footer__grid{
    grid-template-columns: 1fr;
    gap: 28px; /* 変更前: 36px */
    padding-bottom: 36px; /* 変更前: 48px（共通値の上書き。640px以下のみ） */
  }
  .site-footer__col-title{
    margin-bottom: 16px; /* 変更前: 20px（共通値の上書き。640px以下のみ） */
  }
  .site-footer__links{
    gap: 10px; /* 変更前: 14px（共通値の上書き。640px以下のみ） */
  }
  .site-footer__bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ==========================================================================
   9. レスポンシブ
   ========================================================================== */
/* デスクトップナビ→ハンバーガーメニューへの切り替え幅。
   .site-branding + .main-nav + .header-actions が横一列に収まる
   「自然な最小幅」を実測すると約1210.95px（.main-nav ul の gap を
   36px→28pxに詰めた後の値）。フォントレンダリングはOS/ブラウザ差が
   あり、この実測値ぎりぎりだと環境によっては再びナビが圧縮されて
   しまう恐れがあるため、安全マージンを約30px確保して1240pxを
   切り替え幅として採用した。
   Hero/About/news/pricing等、他セクションのタブレット用レイアウトは
   このヘッダーの都合と無関係のため、意図的に元の960pxのまま
   別ブロックに残し、このブロックとは連動させない。 */
@media (max-width: 1240px){
  .nav-toggle{ display:block; }

  /* オフキャンバスメニュー本体。
     top / height は --header-h（main.jsがヘッダー実測高さで更新）を使い、
     iOS Safariのツールバー分の高さ変動にも 100dvh で追従する。 */
  .main-nav{
    display:block;
    position:fixed; top: var(--header-h, 74px); left:0; right:0;
    height: calc(100vh - var(--header-h, 74px));
    height: calc(100dvh - var(--header-h, 74px));
    background:#fff; padding:28px 24px; overflow-y:auto;
    transform: translateX(100%); transition: transform .3s ease;
    z-index:1; /* .site-branding / .header-actions（z-index:2）より背面 */
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav li{ width:100%; border-bottom:1px solid var(--color-border); }
  .main-nav a{ display:block; padding:18px 4px; }
}
@media (max-width: 960px){
  /* タブレット以下：PCのような左右2カラム（テキスト38〜42% / 写真フルブリード）
     は維持せず、上にテキスト・下に大きな写真の縦積みに切り替える
     （ユーザー指定の「推奨」レイアウト）。写真は左右まで（横幅いっぱい）
     使うが、テキスト側は他セクションと同じコンテナ相当の余白に戻す。 */
  .hero__grid{ flex-direction:column; min-height:auto; gap:32px; padding-top:0; }
  .hero{ padding-top: 56px !important; }
  .hero__copy{ flex:0 0 auto; max-width:none; width:100%; padding:0 32px; }
  .hero__title{ font-size:42px; }
  .hero-slider{ height: 380px; clip-path:none; }
  .hero__media::before{ display:none; } /* 斜めアクセントは左右2カラム時のみ表示 */
  .news__grid, .card-grid{ grid-template-columns: repeat(2, 1fr); }
  .about__grid{ grid-template-columns: 1fr; gap:40px; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-card__highlight-price{ font-size:26px; }
  /* キッズ・月謝制のメイン料金「7,100円（税込）／月〜」だけがスマホ幅で
     「月」や「〜」だけ孤立して次の行に折り返される不具合の対策。
     大人・チケット制カードは同じ .pricing-card__highlight-price クラスを
     共有しているため、そちらの表示に影響しないよう、キッズ側にだけ追加した
     修飾クラス（--wrap-safe）の中だけで word-break:keep-all を適用する。
     .pricing-card__highlight-price-tail（下記）で「／月〜」をひとまとまりの
     分割禁止ブロックにし、PHP側で挿入した<wbr>だけを改行候補にする。
     フォントサイズは変更していない（既存のfont-size:26pxのまま）。 */
  .pricing-card__highlight-price--wrap-safe{ word-break: keep-all; }
  .pricing-card__highlight-price-tail{ white-space: nowrap; }
  .about{ padding: var(--section-space-mobile) 0; }
  :root{ --section-space: var(--section-space-mobile); --section-space-compact: var(--section-space-mobile); }
}
@media (max-width: 640px){
  .container, .site-header__inner, .site-footer__inner, .instructor-profile, .single-hero__body{ padding-left:20px; padding-right:20px; }
  /* .hero__grid はこの一覧から除外している。Heroの写真（.hero__media）を
     スマホでも画面横幅いっぱいまで使うため、左右paddingは.hero__grid自体
     ではなく.hero__copy側だけに付ける（写真側は0のまま）。 */
  .hero__copy{ padding:0 20px; }
  .single-hero{ padding-top:56px; }
  .single-hero__title{ font-size:28px; }
  .sns-links{ flex-wrap:wrap; }
  .site-title__full{ display:none; }
  .site-title{ font-size:17px; }
  /* スマホ表示のみ、実際に表示されているロゴ画像（<img class="custom-logo">。
     header.php で has_custom_logo() が真のときに the_custom_logo() が出力する
     WordPressコア標準のマークアップ）を約86.4%（元サイズの約8%増し）に縮小する。
     .site-title（カスタムロゴ未設定時のテキストフォールバック）とは別要素であり、
     このサイトでは実際にロゴ画像が設定されているため、そちらではなくこちらを
     縮小する必要がある。
     以前は CSS の zoom:0.8 で縮小していたが、実機iPhone Safariで反映されない
     ことが確認されたため（zoomはSafariでの挙動が不安定）、zoomプロパティへの
     依存をやめ、assets/js/main.js 側で img.naturalWidth（実画像の本当のピクセル
     幅。ブラウザが確実に計算する値）を使い、インラインstyleを直接imgへ適用する
     方式に変更した。倍率（LOGO_MOBILE_SCALE）や体験予約ボタン・ハンバーガーとの
     衝突を避ける自動縮小のロジックも main.js 側にある。ここではその適用先
     クラス名の記録のみ残す。 */
  .header-actions{ gap:8px; }
  .school-dropdown{ display:none; }
  .header-actions .btn-sm{ padding:10px 16px; font-size:12.5px; }
  /* Heroセクション スマホ表示の最終調整（max-width:640pxのみ。PC/タブレット/
     ヘッダーには影響しない）。見出し・説明文・CTAからHero画像までの流れを
     コンパクトにし、1画面内でHero画像がより早く見えるようにするため、
     フォントサイズ・line-height・上下余白をまとめて詰めている。
     体験レッスン予約ボタン・校舎一覧ボタン（.hero__actions内の.btn）自体の
     サイズは変更していない。 */
  /* Hero上下の余白をさらに圧縮（今回の追加調整）。可読性を保つため
     line-heightはわずかな調整に留め、主にpadding/margin/gapを詰めて
     縦方向の合計を約10〜15%コンパクトにしている
     （実測：320px約10.1%／375px約10.7%／430px約12.9%。390pxは見出しが
     3行→2行になったことも重なり約20.4%とやや大きめの短縮になっている）。
     見出し→説明文＝margin-bottom:16px→8px、説明文→CTA＝24px→10px、
     CTA1→CTA2＝gap:16px→8px（.hero__actionsのモバイル専用上書き。
     PC/タブレットは base の16pxのまま）、CTA→写真＝.hero__gridのgap:
     28px→10px、Hero上部余白＝.heroのpadding-top:40px→14px。 */
  .hero{ padding-top:14px !important; }
  .hero__grid{ gap:10px; }
  .hero__script{
    font-size:23.5px; /* 26px→23.5px（約9.6%縮小、前回から変更なし） */
    line-height:1.25; /* 1.3→1.25。可読性を保てる範囲でわずかに追加で詰める */
    margin-bottom:2px;
  }
  .hero__title{
    /* 390px/430pxで「3歳から大人まで通える／ストリートダンススクール」の
       自然な2行に収まるよう、前回の30.5pxからさらにわずかに縮小
       （29px、約4.9%減）し、letter-spacingも-.01em→-.02emへ少しだけ
       詰めている。320px/375pxではこの縮小がなくても2行にはならず、
       かつ文字を必要以上に小さくしたくないため、下の
       @media(max-width:375px)側で30.5px・-.01emに戻し、実質的に
       320px/375pxは前回と同じ見え方のままにしている（自然な3〜4行）。 */
    font-size:29px;
    line-height:1.12; /* 1.15→1.12。可読性を保てる範囲でわずかに追加で詰める */
    letter-spacing:-.02em;
    margin-bottom:8px;
    /* 「スクール」等の単語の途中で1文字だけ次の行に落ちる問題への対応。
       CJKテキストは既定では文字と文字の間ならどこでも改行できてしまうため、
       word-break:keep-all で「単語の内部では改行しない」よう制限したうえで、
       front-page.php 側で意味の区切り（3歳から／大人まで／通える／
       ストリートダンス／スクール）ごとに <wbr>（改行してもよい候補地点）を
       挿入している。これにより、改行が発生するとしても必ず意味のまとまりの
       境目でのみ起こり、単語やカタカナ語の途中（「スクー」+「ル」のような
       1文字だけの行送り）にはならない。幅に余裕があれば2行
       （3歳から大人まで通える／ストリートダンススクール）、余裕がない場合は
       自然な3〜4行に収まる。 */
    word-break: keep-all;
  }
  .hero__desc{
    /* 16px未満にはしない（本文の可読性維持） */
    line-height:1.55; /* 1.6→1.55。可読性を保てる範囲でわずかに追加で詰める */
    margin-bottom:10px;
  }
  .hero__actions{ gap:8px; } /* base(16px)から詰める。PC/タブレットは16pxのまま */
  .hero-slider{ height:auto; aspect-ratio: 4/3.2; }
  .news__grid, .card-grid{ grid-template-columns: 1fr; }
  .section{ padding: var(--section-space-mobile) 0; }
  .section-heading{ font-size:26px; }
  .instructor-block--cta{ padding:48px 24px; }
  .instructor-block--cta h2{ font-size:24px; }
  /* GROW UPについて（About）セクション スマホ表示の圧縮（max-width:640pxのみ。
     PC/タブレットのレイアウトには影響しない）。見出し→本文→画像の縦余白を
     詰め、セクション全体で約10〜15%コンパクトになるよう調整している
     （実測：320px約11.3%／375px約10.7%／390px約11.0%／430px約10.6%。
     いずれも元の状態からの比較）。「ABOUT」ラベル（.eyebrow）は他セクションと
     共有のクラスのため変更していない（現在の方向性を維持）。写真の横幅
     いっぱいの表示は維持したまま、下の .about__photo--main 側で高さのみを
     追加調整している（詳細はそちらのコメント参照）。旧実測値は単一の
     .about__media img（写真1枚構成）時点のものであり、写真3枚構成へ変更した
     現在は目安として残している。 */
  .about{ padding:52px 0; }
  .about__grid{ gap:26px; }
  .about__title{
    font-size:30px; /* 34px→30px（約11.8%縮小、ご指定の10〜15%の範囲内） */
    margin-bottom:14px;
  }
  .about__desc{
    line-height:1.75; /* 1.8→1.75。読みやすさを保てる範囲でのわずかな追加調整 */
    margin-bottom:20px;
  }
  /* 「3つの価値」は.about__values自体がPC/タブレット/スマホ共通で3列グリッド
     （番号／英字／日本語）になっており、常に縦3行で揃うため、スマホ専用の
     上書きは不要になった。行間だけ他のスマホ調整と合わせてわずかに詰める。 */
  .about__values{ row-gap:8px; margin-bottom:24px; }
  /* スマホ表示のみ、写真エリアの高さを詰める（横幅は100%のまま維持）。
     PC/タブレットはこの@media外のため影響を受けない。メイン写真の
     aspect-ratioだけを16/9.5（高さ=幅×0.59）→16/8（高さ=幅×0.5）に変更し、
     高さを約15%低くしている（以前のトップページ全体調整と同じ「約15〜20%」
     の範囲内）。サブ写真2枚は元々1/1（正方形・幅の半分程度の高さ）で
     縦方向への影響が小さいため、変更していない。object-fit:coverは
     変更していないため、縦横比が変わっても写真は引き伸ばされず自然に
     トリミングされる。border-radius・box-shadow・about__mediaのgapは
     一切変更していないため、そのまま維持される。 */
  .about__photo--main{ aspect-ratio: 16/8; }
}
@media (max-width: 375px){
  /* 極小幅（iPhone SE等）でもロゴ＋体験予約ボタン＋ハンバーガーが
     1行に収まるよう、さらに詰める（新規要素の追加なし・既存トークンの調整のみ）。
     ロゴ画像（.custom-logo）は main.js が matchMedia(max-width:640px) で
     制御しているため、375pxでも同じ86.4%幅が基本値として適用される。
     ただしスペースが足りない場合は main.js 側で自動的に収まる最大サイズへ
     縮小されるため、375px専用の追加CSS調整は行っていない。 */
  .site-title{ font-size:15.5px; }
  .header-actions{ gap:6px; }
  .header-actions .btn-sm{ padding:9px 12px; font-size:12px; }
  /* 320px/375pxでは29px+letter-spacing:-.02emにしても2行までは収まらず、
     文字を必要以上に小さくすることになるだけなので、この幅では前回までの
     サイズ（30.5px・letter-spacing:-.01em）に戻し、自然な3〜4行表示を
     優先する（単語途中で1文字だけ改行される問題は、この幅でも
     word-break:keep-all + <wbr>により引き続き発生しない）。 */
  .hero__title{ font-size:30.5px; letter-spacing:-.01em; }
}

/* ==========================================================================
   6.9 「初めての方へ」ページ（page-about_us.php）専用スタイル
   TOPページのデザイントークン（--color-primary 等）・共通クラス（.section /
   .section-heading / .card-grid / .grow-card / .btn / .eyebrow 等）を
   そのまま再利用し、このページ専用の新規CSSは各セクション固有のコンポーネント
   のみに絞っている。既存クラスのスタイル自体は一切変更していない。
   ========================================================================== */

/* --- 汎用：コンパクトな上下余白の.sectionモディファイア。
   既存の --section-space-compact（ABOUTセクションで使用中の値）を再利用する
   ことで、新規のCSS変数を増やさずに「①〜④より控えめな余白」を表現している。
   モバイル（max-width:640px）では、既存の:root上書きにより
   --section-space-compact も自動的に --section-space-mobile と同じ値になる
   ため、ここでの追加のメディアクエリは不要。 */
.section--compact{ padding: var(--section-space-compact) 0; }

/* --- 紫背景の上で使う.eyebrowの明るい色バリエーション（④で使用）。
   .eyebrow自体（他ページ・他セクションで使用中）は変更していない。 */
.eyebrow--on-primary{ color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------------------
   ① ファーストビュー（.intro-hero）
   TOPの.hero（スライダー・2ボタン・情報量の多いレイアウト）とは意図的に
   分け、写真1枚＋短いメッセージだけのシンプルな構成にしている。
   -------------------------------------------------------------------------- */
.intro-hero{ position:relative; height:56vh; min-height:380px; max-height:560px; overflow:hidden; }
.intro-hero__media{ position:absolute; inset:0; }
.intro-hero__media img{ width:100%; height:100%; object-fit:cover; }
.intro-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(26,26,26,.15) 0%, rgba(26,26,26,.55) 100%);
}
.intro-hero__copy{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:0 32px;
}
.intro-hero__title{
  font-family: var(--font-en); font-weight:700; font-size:44px;
  margin: 10px 0 18px; letter-spacing:.02em;
}
.intro-hero__desc{ font-size:16px; line-height:1.9; max-width:560px; }

@media (max-width:640px){
  .intro-hero{ height:64vh; min-height:340px; }
  .intro-hero__title{ font-size:32px; margin:8px 0 14px; }
  .intro-hero__desc{ font-size:14.5px; }
}

/* --------------------------------------------------------------------------
   ③ GROW UPが目指す3つの成長（フルバージョン：.philosophy-full）
   TOPの.philosophy-intro（3項目の入口・短い一言のみ）とは別のコンポーネント
   として新設。同じ3列グリッド・番号の見せ方は踏襲しつつ、各項目に短い
   リード文＋本文を追加し、「心・体・絆」が同格に読めるよう3列とも同じ
   構造・同じ文字量バランスにしている。
   -------------------------------------------------------------------------- */
.philosophy-full{ background: var(--color-bg); }
.philosophy-full .section-heading{ margin-bottom:56px; }
.philosophy-full__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:48px;
  max-width:1100px; margin:0 auto;
}
.philosophy-full__item{ text-align:center; }
.philosophy-full__num{
  display:block; font-family: var(--font-en); font-weight:700; font-size:22px;
  letter-spacing:.05em; color: var(--color-primary); margin-bottom:12px;
}
.philosophy-full__title{
  font-size:19px; font-weight:700; color: var(--color-secondary); margin:0 0 12px;
}
.philosophy-full__lead{
  font-size:14.5px; font-weight:700; color: var(--color-secondary);
  line-height:1.7; margin:0 0 14px;
}
.philosophy-full__text{ font-size:13.5px; line-height:1.9; color: var(--color-muted); margin:0; }

@media (max-width:900px){
  .philosophy-full__grid{ grid-template-columns: 1fr; gap:40px; max-width:480px; }
}

/* --------------------------------------------------------------------------
   ④ GROW UPが目指す未来（.future-vision）
   このページの理念パートで最も重要なセクションのため、他とは明確に異なる
   紫のカラーブロック＋写真＋ページ内最大の文字サイズで、視覚的に最も
   印象に残るように設計している（過剰なアニメーション・装飾は使わない）。
   -------------------------------------------------------------------------- */
.future-vision{ background: var(--color-primary); color:#fff; overflow:hidden; }
.future-vision__grid{
  max-width: var(--container); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns: 46fr 54fr; gap:64px; align-items:center;
}
.future-vision__media{
  border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5;
  box-shadow: 0 24px 56px rgba(0,0,0,.28);
}
.future-vision__media img{ width:100%; height:100%; object-fit:cover; }
.future-vision__message{
  font-family: var(--font-en); font-weight:700; font-size:36px; line-height:1.5;
  margin: 14px 0 26px;
}
.future-vision__text{
  font-size:15px; line-height:1.95; color: rgba(255,255,255,.92); margin:0 0 22px;
}
.future-vision__text--emphasis{
  font-weight:700; font-size:16.5px; color:#fff;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.3);
}
.future-vision__signature{
  font-family: var(--font-en); font-weight:700; font-size:13px;
  letter-spacing:.14em; color: rgba(255,255,255,.75); margin:22px 0 0;
}

@media (max-width:900px){
  .future-vision__grid{ grid-template-columns: 1fr; gap:36px; }
  .future-vision__media{ aspect-ratio: 16/10; max-width:480px; margin:0 auto; }
  .future-vision__copy{ text-align:center; }
  .future-vision__text--emphasis{ padding-top:18px; }
}
@media (max-width:640px){
  .future-vision__message{ font-size:26px; margin:10px 0 20px; }
  .future-vision__text{ font-size:14px; }
}

/* --------------------------------------------------------------------------
   ⑤ 初めてでも大丈夫（.reassurance）
   -------------------------------------------------------------------------- */
.reassurance__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:28px;
  max-width:1100px; margin:0 auto;
}
.reassurance__item{
  background:#fff; border-radius: var(--radius); padding:34px 26px; text-align:center;
  box-shadow: var(--shadow-sm); border:1px solid var(--color-border);
}
.reassurance__num{
  display:block; font-family: var(--font-en); font-weight:700; font-size:20px;
  color: var(--color-primary); margin-bottom:12px;
}
.reassurance__title{ font-size:16.5px; font-weight:700; color: var(--color-secondary); margin:0 0 10px; }
.reassurance__text{ font-size:13.5px; line-height:1.85; color: var(--color-muted); margin:0; }

@media (max-width:900px){
  .reassurance__grid{ grid-template-columns: 1fr; gap:20px; max-width:480px; }
}

/* --------------------------------------------------------------------------
   ⑥ あなたに合ったクラス（.class-picker）
   TOPのレッスン紹介で使う.card-grid/.grow-card（縦長・説明文重視のカード）
   は変更せず、このページ専用の新規クラスとして追加。「対象年齢→クラス名→
   一言紹介」の順で一目で分かるコンパクトなカードにし、写真は少し低いアスペクト
   比・説明文は2行まで（line-clamp）に絞ることで、セクション全体の高さを
   抑えている。
   -------------------------------------------------------------------------- */
.class-picker{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
  max-width:1100px; margin:0 auto;
}
.class-picker__card{
  background:#fff; border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-sm); border:1px solid var(--color-border);
}
.class-picker__media{ aspect-ratio: 4/3; overflow:hidden; }
.class-picker__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.class-picker__body{ padding:18px 20px 22px; text-align:center; }
.class-picker__age{
  font-family: var(--font-en); font-weight:700; font-size:15px;
  color: var(--color-primary); letter-spacing:.02em; margin:0 0 4px;
}
.class-picker__title{ font-size:17px; font-weight:700; color: var(--color-secondary); margin:0 0 8px; }
.class-picker__desc{
  font-size:12.5px; line-height:1.7; color: var(--color-muted); margin:0 0 12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.class-picker__link{ display:inline-block; font-size:12.5px; font-weight:700; color: var(--color-primary); text-decoration:none; }
.class-picker__link:hover{ text-decoration:underline; }

@media (max-width:900px){
  .class-picker{ grid-template-columns: 1fr; max-width:420px; gap:18px; }
}

/* --------------------------------------------------------------------------
   ⑦ 体験レッスンの流れ（.flow-steps）
   直前の「初めてでも安心して始められます」（白い3カード）と連続して見えない
   よう、白い箱のカードは廃止。番号を丸バッジのみで見せ、矢印でつなぐ一本の
   タイムラインに変更した（01 予約 → 02 来校 → 03 体験 → 04 入会）。
   モバイルでは縦並び＋矢印90度回転で「01 ↓ 02 ↓ 03 ↓ 04」に切り替える。
   HTML構造・ステップの文言はページ側で変更していない。
   -------------------------------------------------------------------------- */
.flow-steps__list{
  display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap;
  gap:4px; max-width:900px; margin:0 auto;
}
.flow-step{
  flex:1 1 140px; max-width:160px; background:none; border:none; box-shadow:none;
  padding:0; text-align:center;
}
.flow-step__num{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:50%; background:#fff; border:2px solid var(--color-primary);
  font-family: var(--font-en); font-weight:700; font-size:22px; color: var(--color-primary);
}
.flow-step__label{ font-size:13.5px; font-weight:700; color: var(--color-secondary); line-height:1.6; margin:0; }
.flow-steps__arrow{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; flex:0 0 auto;
  font-family: var(--font-en); font-weight:700; font-size:20px;
  color: var(--color-primary); opacity:.55;
}

@media (max-width:900px){
  .flow-steps__list{ flex-direction:column; align-items:center; gap:2px; }
  .flow-step{ flex:1 1 auto; max-width:260px; width:100%; }
  .flow-steps__arrow{ transform:rotate(90deg); }
}

/* --------------------------------------------------------------------------
   ⑧ 料金案内（.pricing-cta） — コンパクトな案内のみ。TOPの料金表
   （.pricing-grid等）は再掲せず、既存の/lesson_fee/へのリンクに一本化。
   -------------------------------------------------------------------------- */
.pricing-cta{ max-width:640px; margin:0 auto; text-align:center; }
.pricing-cta__text{ font-size:15px; line-height:1.9; color: var(--color-text); margin:0 0 30px; }

/* --------------------------------------------------------------------------
   ⑨ 最終CTA（.final-cta）
   -------------------------------------------------------------------------- */
.final-cta{
  padding: var(--section-space) 0; text-align:center;
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, #fff 100%);
  border-top:1px solid var(--color-border);
}
.final-cta__message{
  font-family: var(--font-en); font-weight:700; font-size:28px; line-height:1.6;
  color: var(--color-secondary); margin:0 0 32px;
}

@media (max-width:640px){
  .final-cta__message{ font-size:22px; margin-bottom:26px; }
}

/* ==========================================================================
   9. 講師一覧ページ（/instructor/）専用：5列(PC)/3列(タブレット)/2列(スマホ)表示と
   校舎絞り込みボタン
   共通の .card-grid / .grow-card 本体（上の「6.」）は一切変更せず、archive.phpの
   instructor分岐にだけ出力される追加クラス（.instructor-grid）でのみ上書きする
   ため、校舎一覧・幼稚園教室・レッスン紹介・NEWSなど他のアーカイブ／セクションの
   表示には一切影響しない。
   ========================================================================== */
/* 原因調査の結果：repeat(5, 1fr) はグリッドアイテムの既定の自動最小幅
   （min-width:auto）の影響を受け、いずれかの列に含まれるカード内の
   文字列（例：ジャンルバッジの「HIPHOP / K-POP」のような長いラベル）の
   最小コンテンツ幅がその列の1fr分の幅を超えると、列自体がその分だけ
   強制的に広げられ、結果としてグリッド全体・特に右端の列のカードが
   コンテナ幅からはみ出すことがある（CSS Gridの既知の仕様）。
   repeat(5, minmax(0, 1fr)) に変更し、各列の自動最小幅を0にすることで、
   内部コンテンツの長さに関わらず必ずコンテナ内に収まるようにする。
   列数（5列）・カードのデザイン・写真比率・文字内容は変更していない。 */
.instructor-grid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 18px;
}
/* 上記のminmax(0, 1fr)はグリッドの「列（トラック）」自体の自動最小幅を0にするが、
   グリッドの「アイテム」である.grow-card自身の min-width は既定で auto のままのため、
   画像等の内容によってはカード自身がトラック幅を超えて描画され、右端が
   クリップされる場合がある（特にウィンドウを広い状態から狭めた際の再レイアウトで
   顕在化しやすい既知のCSS Gridの挙動）。カード側にも min-width: 0 を明示することで、
   内容に関わらず必ずトラック幅（＝列幅）に収まるようにする。
   列数（5列）・カードの見た目・写真比率は変更していない。 */
.instructor-grid > .grow-card{
  min-width: 0;
}
/* 5列だと文字が窮屈になるため、講師一覧のカードだけ余白・文字サイズを微調整。
   写真の縦横比（aspect-ratio: 4/3.2）は.grow-card__media本体のまま変更しない。 */
.instructor-grid .grow-card__body{ padding: 16px 16px 20px; }
.instructor-grid .grow-card__title{ font-size:15px; margin-bottom:6px; line-height:1.4; }
.instructor-grid .grow-card__desc{
  font-size:12px; line-height:1.6; margin:0 0 14px; min-height:0;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.instructor-grid .grow-card__body .btn{ font-size:12.5px; padding:8px 14px; }

@media (max-width: 960px){
    /* PCと同じ理由（グリッドアイテムの自動最小幅）でタブレット幅でも
     同様の右端はみ出しが起こり得るため、同じくminmax(0, 1fr)にする。 */
  .instructor-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
  .instructor-grid .grow-card__body{ padding: 22px 22px 26px; }
  .instructor-grid .grow-card__title{ font-size:17px; margin-bottom:8px; }
  .instructor-grid .grow-card__desc{ font-size:13px; margin-bottom:18px; }
  .instructor-grid .grow-card__body .btn{ font-size:13px; padding:9px 16px; }
}
@media (max-width: 640px){
    /* 同上の理由により、スマートフォン幅でも同様にminmax(0, 1fr)にする。 */
  .instructor-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .instructor-grid .grow-card__body{ padding:14px 14px 18px; }
  .instructor-grid .grow-card__title{ font-size:14px; margin-bottom:6px; }
  .instructor-grid .grow-card__desc{ font-size:11.5px; margin-bottom:10px; }
  .instructor-grid .grow-card__body .btn{ font-size:11.5px; padding:7px 10px; }
}

/* 校舎絞り込みボタン（ALL/戸塚校/湘南台校/武蔵小杉校）。
   既存の--color-primary（GROW UPの紫）をそのまま使い、選択中のボタンだけ
   背景を紫に塗って視覚的に分かるようにする。新規のカラー変数は追加しない。 */
.instructor-filter{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin: 0 0 36px;
}
/* .instructor-filter__btn単体（クラス1つ、特異度0,1,0）だと、
   親テーマhello-elementorのreset.cssが持つ [type="button"] セレクタ
   （属性セレクタも特異度0,1,0で、しかもreset.css側が後読み込みのため
   同点で負けてしまう）に文字色・枠線色を上書きされてしまうことが判明した。
   そのため、.instructor-filter配下という形に変更して特異度を0,2,0へ上げ、
   reset.cssの汎用ボタンリセットに影響されないようにしている。 */
.instructor-filter .instructor-filter__btn{
  font-family: var(--font-en);
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
  padding:9px 22px; border-radius:999px;
  border:1.5px solid var(--color-primary);
  background:#fff; color:var(--color-primary);
  cursor:pointer; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.instructor-filter .instructor-filter__btn:hover{ transform: translateY(-2px); }
.instructor-filter .instructor-filter__btn.is-active{
  background: var(--color-primary); color:#fff;
}
/* JSがdata-schoolsに一致しないカードへ付与するhidden属性を確実に非表示にする */
.instructor-grid .grow-card[hidden]{ display:none; }

@media (max-width: 640px){
  .instructor-filter{ gap:8px; margin-bottom:24px; }
  .instructor-filter .instructor-filter__btn{ font-size:12.5px; padding:8px 16px; }
}