@charset "UTF-8";
/* ==========================================================================
   りら創造芸術高等学校 トップページ
   出典: Figma gndR7doOhib104Tet4Gao5 / check - desktop / Desktop - 2 (1440x12473)
   トークンの正本: output/20260728_DESIGN_TOKENS.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  /* 色 */
  --c-accent:      #5EADD1;
  --sec-heading:   #D1675E;
  --c-visit:       #B43E67;
  --c-day:         #63C1BA;
  --c-reason:      #D9A700;
  --c-faq:         #5D8CBA;
  --c-visit-bg:    #EDEDED;
  --c-body:        #262B2E;
  --c-white:       #fff;
  --c-line:        #06C755;

  /* CTA3色（用途識別・変更禁止） */
  --c-cta-doc:     #5EADD1;
  --c-cta-trial:   #7EBC63;
  --c-cta-consult: #D15E86;

  /* 罫線 */
  --c-rule:        rgba(0,0,0,.05);
  --h-rule:        5px;

  /* レイアウト */
  --w-content:     1220px;
  --pad-x:         110px;
  --pad-y:         120px;
  --gap-sec:       64px;
  --gap-card-x:    32px;
  --gap-card-y:    21px;
  --h-header:      80px;
  --r-pill:        999px;

  /* フォント */
  --f-jp:          "Noto Sans JP", sans-serif;
  --f-num:         "Oswald", var(--f-jp);

  /* 影 */
  --shadow-cta:    drop-shadow(0 3px 2.5px rgba(0,0,0,.25));

  /* ------------------------------------------------------------------
     FVの可変値。すべて clamp(下限, 1440基準の比例値, 1440での実寸) の形。
     ・幅1440ちょうどで中央の値が実寸に一致する ＝ Figmaと完全一致する
     ・1440より狭いと幅に比例して縮み、下限で止まる（潰れない）
     ・1440より広いと実寸で止まる（間延びしない）
     ※ CSSのcalcは「長さ÷長さ」を許さないため無次元の係数は作れない。
        比例値は「実寸 ÷ 1440 × 100」vw で表す。
     ------------------------------------------------------------------ */
  --fv-h:      clamp(430px, 44.3056vw, 840px); /* FV高さ。1440で638。広い画面は840で頭打ち */
  --fv-top:    clamp(64px,  10vw,      200px); /* FV上端からコピーまで。1440で144 */
  --fv-gap:    clamp(28px,  3.3333vw,   48px); /* コピー内の縦ギャップ 48 */
  --fv-gap-s:  clamp(10px,  1.1111vw,   16px); /* 見出し⇔黒帯 16 */
  --fv-title:  clamp(40px,  5.5556vw,   80px); /* メインコピー 80 */
  --fv-sub:    clamp(22px,  2.7778vw,   40px); /* サブコピー 40 */
  --fv-band-w: clamp(380px, 40.3472vw, 581px); /* 黒帯の最小幅 581 */
  --fv-bgap:   clamp(12px,  1.3889vw,   20px); /* バッジ間 20 */
  --fv-bpy:    clamp(8px,   0.6944vw,   10px); /* バッジ上下padding 10 */
  --fv-bpx:    clamp(10px,  1.1111vw,   16px); /* バッジ左右padding 16 */
  --fv-blabel: clamp(12px,  1.1111vw,   16px); /* バッジ ラベル 16 */
  --fv-bvalue: clamp(26px,  2.7778vw,   40px); /* バッジ 数値 40 */
  --fv-note:   clamp(12px,  0.9028vw,   13px); /* 注記。12px未満にしない */
  --fv-overlap:clamp(4px,   0.5556vw,    8px); /* タブがFV画像に重なる量 8 */
  --fv-tabpad: clamp(20px,  7.6389vw,  110px); /* タブ行の左右余白 110 */
  /* コピーブロックの幅。Figmaは581（ダミー「000本」前提）だが、実原稿「20本以上」が
     バッジ枠(180.3)に収まらないため680へ広げている（バッジ1枠あたり213.3）。
     下限520は、タブレット幅でもバッジ3枠が横並びのまま読める最小値 */
  --fv-copy-w: clamp(520px, 47.2222vw, 680px);

  /* ヘッダーの中身の最大幅。これを超える画面ではロゴとナビが左右へ飛ばないよう中央に寄せる */
  --header-inner-max: 1376px;

  /* FVの暗幕の濃さ（0〜1）。動画の明るい場面でコピーが読めるようにするためのもの */
  --fv-scrim: 0.34;
}

/* タブレット以下：PCナビを畳む。
   PCナビの表示に必要な幅は ロゴ252 + ナビ740 + LINE141 + 余白 = 1296px。
   1200pxを下回ると必ずあふれるため、ここでハンバーガーへ切り替える。 */
@media (max-width: 1199px){
  :root{ --fv-tabpad: 20px; }
}

@media (max-width: 767px){
  :root{
    --pad-x: 20px;
    --pad-y: 64px;
    --h-header: 64px;
  }
}

/* スマートフォンでの「1画面目」の内訳。
   ヘッダー64 ＋ FV ＋ 4つのタブ108（52px×2行＋行間4px）で画面ちょうど1枚。
   FVの高さはこの残りとして計算するため、タブの高さを変数にしておく。
   下端の固定CTA帯（72px）は1画面目では出さない（JS側で制御）ので差し引かない */
@media (max-width: 599px){
  :root{ --fv-tabs-h: 108px; }
}

/* --------------------------------------------------------------------------
   2. リセット（最小限）
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
/* ヘッダーの追随（position: sticky）を全ページで効かせるための指定。
   下層ページで読み込まれる Elementor の設定CSS（uploads/elementor/css/post-6.css）が
   `html, body { overflow-x: hidden }` を当てており、これが body をスクロールの
   入れ物に変えてしまうため、sticky が効かずヘッダーが流れて消えていた（実測）。
   `clip` は同じく横方向を切るが、スクロールの入れ物を作らないので sticky が効く。
   このファイルは Elementor の設定CSSより後に読み込まれるので、これで上書きできる。 */
html, body{ overflow-x: clip; }
body{
  margin: 0;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  color: var(--c-body);
  background: #fff;
  /* Figma実測（全173テキストノードを走査）:
     palt あり=155ノード（本文側の全セクション）／palt なし=18ノード（ヘッダーのナビ・LINE、フッター全体）。
     「全テキストにpalt」は誤りだったため、ヘッダー／フッターだけ解除する */
  font-feature-settings: "palt" 1;
}
.l-header,
.l-drawer,
.l-footer{ font-feature-settings: normal; }
h1,h2,h3,p,ul,ol,figure{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
img,picture,video{ max-width: 100%; }
img{ display: block; height: auto; border: 0; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   2-b. 日本語の改行位置

   既定の折り返しは「入るところまで詰めて次の行へ」なので、「創り上げる」を
   「創り／上げる」、「先生」を「先／生」のように語の途中で切ってしまう。
   3段構えで直す。

   ① word-break: auto-phrase … 文節の切れ目でだけ折る（html の lang="ja" が前提）。
      Chrome/Edge が対応。非対応のブラウザは無視するだけなので害はない。
   ② text-wrap: pretty / balance … 行末に1文字だけ残る「ぶら下がり」を減らす。
      見出しは balance（各行の長さを揃える）、本文は pretty。
   ③ .np … 上のどちらも効かないブラウザでも確実に切らせたくない語に付ける手動指定。
      全ブラウザで効くので、見出し・バッジなど目につくところはこれで押さえる。
   -------------------------------------------------------------------------- */
:where(p, li, dd, dt, figcaption, blockquote, summary, td, th, address){
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 見出しは行の長さをそろえる。auto-phrase は対応しているブラウザで文節改行になる
   （未対応でも無視されるだけ）。BudouXが通った要素では keep-all で上書きされる */
:where(h1, h2, h3, h4, h5, h6){
  word-break: auto-phrase;
  text-wrap: balance;
}
/* 本文の折り返しは、最後の行に1語だけ残るのを避ける（Firefoxは無視するだけ） */
:where(p, li, dd, blockquote){ text-wrap: pretty; }

/* 日本語の改行位置（2026-07-30 大硲指示・川越プリンと同じ手）。
   中身は lyra-common.js が <budoux-ja> で包み、BudouX が文節ごとに区切りを入れる。
   word-break: keep-all と overflow-wrap: anywhere は BudouX が要素に直接当てるので
   ここでは書かない（＝文節の途中では折らないが、入らないときは折ってあふれさせない）。
   カスタム要素は既定で inline だが、見た目に影響しないよう明示しておく */
budoux-ja{ display: inline; }

/* 途中で折ってほしくない語のかたまり。inline-block にすることで、
   ブラウザの折り返し判定がこの塊を1語として扱う */
.np{ display: inline-block; }

/* 固有名詞など、絶対に途中で折りたくない語。**BudouX は nowrap の要素を素通りする**ので、
   文節の区切りも入らない＝名前の中が割れない。長すぎる語に付けるとあふれるので、
   1行に収まる長さ（実測で確認できる範囲）にだけ使う */
.nb{ white-space: nowrap; }

/* 可視フォーカス（アクセシビリティ緩和策 ⑤） */
:focus-visible{
  outline: 3px solid #1a6f92;
  outline-offset: 2px;
}

.skip-link{
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: #fff; color: var(--c-body); padding: 12px 16px;
  font-weight: 700; border-radius: 4px; transition: top .15s;
}
.skip-link:focus{ top: 8px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   3. ヘッダー（Figma 70:6103 実測）
      高さ80 / 左右padding32 / fill #fff opacity.8 / BACKGROUND_BLUR 40
   -------------------------------------------------------------------------- */
.l-header{
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 52px;
  height: var(--h-header);
  /* 1440以下は左右32px（Figma実測）。それより広い画面では中身を1376pxに収めて
     中央に寄せる（そうしないとロゴとナビが両端へ離れていく） */
  padding: 0 max(32px, calc((100vw - var(--header-inner-max)) / 2));
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.l-header__logo{ display: block; flex: 0 0 auto; }
.l-header__logo img{ width: 252px; height: 58px; }

.l-header__right{
  display: flex;
  align-items: center;
  gap: 48px;                    /* ナビ ⇔ LINEボタン */
}

.l-nav__list{
  display: flex;
  align-items: center;
  gap: 32px;                    /* ナビ項目間 */
}
/* 親項目は「リンク」と「開閉ボタン」を並べる。
   リンクを押せば親ページへ行き、▾ を押せば子の一覧が開く
   （2026-07-29 の指摘「親ページにしか行けない」への対応） */
.l-nav__item{
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}
.l-nav__link{
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--c-body);
  white-space: nowrap;
  padding: 12px 0;              /* タップ領域の確保（44px以上） */
}
.l-nav__caret{
  width: 24px;
  height: 24px;
  transition: rotate .2s;
}
.l-nav__toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 44px;                 /* リンクと同じ高さで押せるようにする */
  flex: 0 0 auto;
  border: 0; background: none;  /* 親テーマの reset.css の枠線を打ち消す */
}
.l-nav__link:hover,
.l-nav__toggle:hover{ color: var(--c-accent); }
/* 現在地。下線だけで示す（色を変えると他の項目より弱く見える端末がある） */
.l-nav__link.is-current{ box-shadow: inset 0 -2px 0 var(--c-accent); }

/* ドロップダウン。
   開くきっかけは3つ ＝ マウスを乗せた／中にフォーカスがある／押して開いた（JS）。
   JSが動かない環境でも前2つで開く。 */
.l-nav__sub{
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 120;
  min-width: 232px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity .18s, translate .18s, visibility .18s;
}
.l-nav__sub a{
  display: block;
  padding: 11px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--c-body);
}
.l-nav__sub a:hover{ background: #F4F7F9; color: var(--c-accent); }
.l-nav__sub a.is-current{ background: #F4F7F9; font-weight: 700; }

.l-nav__item.is-open > .l-nav__sub,
.l-nav__item:focus-within > .l-nav__sub{
  opacity: 1;
  visibility: visible;
  translate: none;
}
.l-nav__item.is-open > .l-nav__toggle .l-nav__caret{ rotate: 180deg; }

@media (hover: hover){
  .l-nav__item:hover > .l-nav__sub{
    opacity: 1;
    visibility: visible;
    translate: none;
  }
  .l-nav__item:hover > .l-nav__toggle .l-nav__caret{ rotate: 180deg; }
}
/* マウスが親から子へ移る途中で閉じないよう、間の隙間を要素で埋める */
.l-nav__sub::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -10px;
  height: 10px;
}

/* LINEボタン（左paddingなし＝アイコンが左端に接する） */
.btn-line{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding-right: 16px;
  background: var(--c-line);
  border-radius: 6px;
  color: var(--c-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.btn-line__icon{ width: 32px; height: 32px; }

/* ハンバーガー（モバイルのみ。Figmaに設計が無いため独自） */
.l-burger{
  display: none;
  width: 44px; height: 44px;
  /* 下層ページでだけ読み込まれる親テーマの reset.css が
     すべての button に枠線（1px solid #cc3366）を付けるため、
     クラス名を持つこの規則で打ち消す（button だけの指定では効かない）。
     Elementor 側のボタンには触れないよう、対象を絞っている */
  border: 0; background: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.l-burger__bar{ width: 24px; height: 2px; background: var(--c-body); transition: transform .2s, opacity .2s; }
.l-burger[aria-expanded="true"] .l-burger__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.l-burger[aria-expanded="true"] .l-burger__bar:nth-child(2){ opacity: 0; }
.l-burger[aria-expanded="true"] .l-burger__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.l-drawer{
  position: fixed;
  inset: var(--h-header) 0 0 0;
  z-index: 90;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 24px 20px 48px;
  overflow-y: auto;
  /* ドロワーの中を端まで送っても、後ろのページに送りが伝わらないようにする。
     iOS は html の overflow で止めきれないことがあるため、その保険も兼ねる */
  overscroll-behavior: contain;
}
.l-drawer[hidden]{ display: none; }
.l-drawer__list{ display: flex; flex-direction: column; }

/* 親の行は「リンク」と「開閉ボタン」を左右に置く。
   リンクを押せば親ページへ行き、＋ を押せばその場で子のページ一覧が開く
   （2026-07-29 の指摘「親ページにしか行けない」への対応）。
   いま見ているページを含むかたまりは、最初から開いた状態で出す（PHP側） */
.l-drawer__row{
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-rule);
}
.l-drawer__link{
  flex: 1 1 auto;
  display: block;
  padding: 18px 4px;
  font-weight: 700;
  font-size: 18px;
}
.l-drawer__link.is-current{ color: var(--c-accent); }

/* 開閉ボタン。記号は画像を足さずCSSで引く（＋ が開くと − になる） */
.l-drawer__toggle{
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 56px;
  border: 0; background: none;  /* 親テーマの reset.css の枠線を打ち消す */
}
.l-drawer__toggle::before,
.l-drawer__toggle::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  background: var(--c-body);
  translate: -50% -50%;
  transition: rotate .2s, opacity .2s;
}
.l-drawer__toggle::after{ rotate: 90deg; }
.l-drawer__toggle[aria-expanded="true"]::after{ rotate: 0deg; opacity: 0; }

.l-drawer__sub{
  padding: 4px 0 8px 16px;
  border-bottom: 1px solid var(--c-rule);
  background: rgba(0,0,0,.015);
}
.l-drawer__sub[hidden]{ display: none; }
.l-drawer__sub a{
  display: block;
  padding: 13px 4px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
}
.l-drawer__sub a.is-current{ font-weight: 700; color: var(--c-accent); }
/* 子の項目どうしの区切りは、親の区切りより弱くする */
.l-drawer__sub li + li a{ border-top: 1px solid rgba(0,0,0,.04); }
.btn-line--drawer{ margin-top: 24px; }

/* --------------------------------------------------------------------------
   4. ファーストビュー（Figma 70:5625 / 70:5626 実測）
      画像 1440x638（y=80） / コピーブロック 581x391（y=224 = FV上端+144）
   -------------------------------------------------------------------------- */
.fv{
  position: relative;
  width: 100%;              /* aspect-ratio指定時に幅が伸びるのを防ぐ（320px幅で発生） */
  height: var(--fv-h);
  overflow: hidden;
  background: #1b1f22;
}
/* 4枚のパネルを同じ場所に重ね、表示中の1枚だけを見せる。
   display:none にすると切り替えが一瞬で入れ替わって固く見えるので、
   透明度で送りつつ、隠れている側は visibility で操作もタブ移動もできなくする */
.fv-panel{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.fv-panel.is-active{ opacity: 1; visibility: visible; }

.fv__media{ position: absolute; inset: 0; }
.fv__media img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* 動画は静止画の上に重ね、再生が始まってから出す */
.fv__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity .6s;
  pointer-events: none;
}
.fv__video.is-ready{ opacity: 1; }

/* 動画は明るい場面が流れるためコピーが沈む。上側を少し暗くして文字を守る。
   濃さを変えたいときは --fv-scrim だけ触ればよい（0 で暗幕なし） */
.fv__media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0, calc(var(--fv-scrim) * 1))    0%,
    rgba(0,0,0, calc(var(--fv-scrim) * 0.55)) 60%,
    rgba(0,0,0, calc(var(--fv-scrim) * 0.25)) 100%
  );
}

.fv__copy{
  position: absolute;
  top: var(--fv-top);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fv-gap);
  width: var(--fv-copy-w);
  max-width: calc(100% - 40px);
}

.fv__lead{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fv-gap-s);
}

.fv__title{
  font-weight: 700;
  font-size: var(--fv-title);
  line-height: 1.2;
  color: var(--c-white);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* 黒帯サブコピー。字間0.1emの中央寄せズレを padding-left で相殺する */
.fv__sub{
  min-width: var(--fv-band-w);
  padding: 0 0 0 .1em;
  background: #000;
  color: var(--c-white);
  font-weight: 700;
  font-size: var(--fv-sub);
  line-height: 1.2;
  letter-spacing: .1em;
  text-align: center;
}

/* 数値バッジ3枠 */
.fv__badges{
  display: flex;
  gap: var(--fv-bgap);
  width: 100%;
}
.fv-badge{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Figmaの枠線は INSIDE 指定＝枠の内側に描かれ、高さ87に含まれる。
     CSSのborderは外側に足されるため、その分paddingから引く */
  padding: calc(var(--fv-bpy) - 1px) calc(var(--fv-bpx) - 1px);
  border: 1px solid var(--c-white);
  background: rgba(0,0,0,.12);
  text-align: center;
  white-space: nowrap;
}
.fv-badge__label{
  font-weight: 700;
  font-size: var(--fv-blabel);
  line-height: 1.2;
  letter-spacing: .05em;
  padding-left: .05em;
  color: var(--c-white);
}
.fv-badge__value{
  font-weight: 700;
  font-size: var(--fv-bvalue);
  line-height: 1.2;
  letter-spacing: .05em;
  padding-left: .05em;
  color: var(--c-white);
}
.fv-badge__value--num,
.fv-badge__num{ font-family: var(--f-num); font-weight: 700; }

.fv__note{
  font-size: var(--fv-note);
  line-height: 1.6;
  color: var(--c-white);
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  margin-top: calc(var(--fv-gap) * -0.6);
}

/* --------------------------------------------------------------------------
   4-b. FVパネル 2〜4枚目（3つの専攻／学生寮・暮らし／卒業後の進路）
        写真1枚の上に、見出し・説明・下層ページへのリンクを左寄せで重ねる。
        Figmaにこの3枚の設計はないため、ワイヤーver3.1の「fv-overlay-content.left」
        の作りをそのまま起こした
   -------------------------------------------------------------------------- */
/* 1枚目は上からの暗幕（コピーが上にある）だが、2〜4枚目は文字が左にあるので
   左から効く暗幕に差し替える */
.fv-panel--side .fv__media::after{
  background: linear-gradient(
    90deg,
    rgba(0,0,0, calc(var(--fv-scrim) * 1.9))  0%,
    rgba(0,0,0, calc(var(--fv-scrim) * 1.5)) 42%,
    rgba(0,0,0, calc(var(--fv-scrim) * 0.5)) 100%
  );
}

.fv-panel__body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 26px);
  width: 100%;
  max-width: var(--w-content);
  padding: 0 20px;
  color: var(--c-white);
}
.fv-panel__title{
  font-weight: 700;
  font-size: clamp(30px, 3.9vw, 56px);
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.fv-panel__text{
  max-width: 34em;
  font-weight: 500;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.9;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.fv-panel__links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fv-panel__link{
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* タップ領域の下限 */
  padding: 10px 24px;
  border: 1px solid var(--c-white);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.25);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.fv-panel__link:hover{
  background: var(--c-white);
  color: var(--c-body);
}

/* --------------------------------------------------------------------------
   5. FV下 4ボタン（Figma 70:5641 実測）
      y=710 ＝ FV画像下端(718)の8px上に重なる / 上罫4px / 選択中に上向き三角
   -------------------------------------------------------------------------- */
.fv-tabs{
  position: relative;
  z-index: 2;
  margin-top: calc(var(--fv-overlap) * -1);
  padding: 0 var(--fv-tabpad);
}
.fv-tabs__inner{
  display: flex;
  gap: 8px;
  max-width: var(--w-content);
  margin: 0 auto;
}
.fv-tabs__btn{
  position: relative;
  flex: 1 1 0;
  min-height: 56px;
  /* Figmaの上罫4pxは INSIDE 指定＝高さ56に含まれる。上paddingから4px引いて総高56に揃える */
  padding: 12px 16px 16px;
  background: var(--c-white);
  border-top: 4px solid var(--c-accent);
  color: var(--c-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  transition: background-color .15s, color .15s;
}
.fv-tabs__btn:hover{ background: #f2f9fc; }
.fv-tabs__btn.is-active{
  background: var(--c-accent);
  color: var(--c-white);
}
.fv-tabs__btn.is-active:hover{ background: var(--c-accent); }
/* 選択中の上向き三角（32x24・ボタン上端から13px上） */
.fv-tabs__btn.is-active::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;                 /* 三角の高さ24 - ボタン上に出る13 - 罫線4 */
  transform: translateX(-50%);
  width: 32px;
  height: 24px;
  background: var(--c-accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   5-2. 共通パーツ（各セクションで使い回す）
   -------------------------------------------------------------------------- */
.l-container{
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
}

/* ピルボタン（Figma 5-6 実測: 角丸999 / 幅240 / padding 16-24 / 18px Bold 白） */
.btn-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 54px;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-white);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}
.btn-pill--visit{ background: var(--c-visit); }
.btn-pill:hover{ opacity: .88; }

/* --------------------------------------------------------------------------
   6. 体験授業・学校説明会 帯（Figma 70:5652 実測）
      帯は1440ではなく1330px幅＝左は裁ち落とし・右に110pxの余白を残す
   -------------------------------------------------------------------------- */
.sec-visit{
  margin-top: 49px;              /* FV下タブの下端(766) → 帯の上端(815) */
  margin-right: var(--pad-x);    /* 右に110px残す（左は画面端まで） */
  padding: 32px 32px 32px var(--pad-x);
  background: var(--c-visit-bg);
}
.sec-visit__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  /* 広い画面で帯の中身が左右へ伸び切らないよう、コンテンツ幅で止める */
  max-width: var(--w-content);
}
.sec-visit__body{
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 677px;
}
.sec-visit__label{
  align-self: flex-start;
  padding: 4px 8px;
  background: var(--c-visit);
  color: var(--c-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.sec-visit__title{
  margin-top: -5px;              /* ラベルと見出しの間隔はFigma実測10px（gap15 - 5） */
  color: var(--c-visit);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
}
.sec-visit__lead{
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
}
.sec-visit__actions{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   7. りらの強み4枚（Figma 70:5664 実測）
      背景はアクセント色の10%。見出しは無く、36pxのリード文が入る。
      カードは2枚目・4枚目が30px上にずれる千鳥配置。
   -------------------------------------------------------------------------- */
.sec-strength{
  padding: 80px var(--pad-x);
  background: rgba(94,173,209,.1);
}
.sec-strength__lead{
  margin-bottom: 64px;
  color: var(--c-accent);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 2;
  text-align: center;
}

.strength-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card-x);
  align-items: start;
}
.strength-card{ display: flex; flex-direction: column; }
/* 千鳥配置：2枚目と4枚目を30px上げる（Figma実測 y=1353 と 1383 の差） */
.strength-card:nth-child(even){ margin-top: -30px; }

.strength-card__visual{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 281 / 375;
}
/* 写真の「見せたい高さ」を1枚ずつ指定する。
   PC（281:375）は縦長の枠に対して画像側が横長のときは高さいっぱいに収まり、
   左右だけが切れる（--focus-yは効かない）。スマートフォンでは16:10へ横長に
   切るため、既定の中央合わせだと顔の上半分が枠から外れることがある。
   --focus-y ＝ 縦方向のどこを残すか（0%＝上端寄せ / 100%＝下端寄せ）。
   写真を差し替えたら、この値だけを見直せばよい */
.strength-card__visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--focus-y, 50%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
/* 1枚目=strength-1（2026-08-07 岡本さん提供の舞台写真に差し替え。横長3:2。
   PCは縦長枠に高さいっぱいで収まり中央の人物が見える。スマホ(16:10)は元がほぼ
   同じ横長比率なので上下はわずかしか切れない。--focus-yは中央のまま） */
.strength-card:nth-child(1) .strength-card__visual{ --focus-y: 50%; }
/* 2枚目=strength-3（寮の居室・顔は中央）             */
.strength-card:nth-child(2) .strength-card__visual{ --focus-y: 50%; }
/* 3枚目=strength-2（教室・頭頂部が切れないよう上へ）  */
.strength-card:nth-child(3) .strength-card__visual{ --focus-y: 25%; }
/* 4枚目=strength-4（2人の顔が上端寄り。中央合わせだと顔が切れる） */
.strength-card:nth-child(4) .strength-card__visual{ --focus-y: 6%; }
/* 文字を読ませるための暗いグラデーション（Figmaも画像の上に重ねている） */
.strength-card__visual::after{
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6));
}
/* 番号と見出しは写真の下端に重ねる。
   見出しは「自分らしくいられる居場所」のように長いものがあり、狭い幅では2行になる。
   絶対配置を1つの箱にまとめておくと、行が増えても番号と重ならない */
.strength-card__label{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  z-index: 1;
  color: var(--c-white);
}
.strength-card__num{
  display: block;
  font-family: "Roboto", var(--f-jp);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  opacity: .8;
}
.strength-card__title{
  margin-top: 4px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* 番号の色はカードごとに変わる（Figma実測） */
.strength-card:nth-child(1) .strength-card__num{ color: #5D8CBA; }
.strength-card:nth-child(2) .strength-card__num{ color: #D15E86; }
.strength-card:nth-child(3) .strength-card__num{ color: #D1BF5E; }
.strength-card:nth-child(4) .strength-card__num{ color: #7EBC63; }

.strength-card__body{ padding: 16px 16px 24px; }
/* サブ見出し（例「舞台づくりは、自分づくり」）。本文より一段強く見せる */
.strength-card__sub{
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
}
.strength-card__text{
  font-weight: 500;
  font-size: 15px;
  line-height: 1.95;
}

/* --------------------------------------------------------------------------
   8. 卒業生・保護者の声（Figma 70:5692 実測）
      上下120 / 左右110 / 見出し64px + 5pxの罫線 / タブ2つ / 横スライダー
      スライダーはカード幅1220・間隔32で、左右のカードが78pxだけ覗く
   -------------------------------------------------------------------------- */
.sec-voices{
  padding-block: var(--pad-y);
  /* カードの横スクロール領域だけ画面幅いっぱいに使うため、左右のpaddingは
     内側の .l-container 側で持つ */
}
/* 1440では max-width 1440 ＝ 左右110の余白で中身1220（Figmaと一致）。
   1440未満では画面幅に合わせて余白110のまま中身が縮む */
.sec-voices .l-container{
  padding-inline: var(--pad-x);
  max-width: calc(var(--w-content) + var(--pad-x) * 2);
}

/* 見出し行（見出し ⇔ 16px ⇔ 残り幅いっぱいの罫線）。他セクションでも使う */
.sec-head{
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--sec-heading);
  font-weight: 700;
  font-size: clamp(30px, 4.4444vw, 64px);
  line-height: 1.4;
  white-space: nowrap;
}
.sec-head::after{
  content: "";
  flex: 1 1 auto;
  min-width: 40px;
  height: var(--h-rule);
  background: var(--c-rule);
}

.voices__tabs{
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: var(--gap-sec);      /* 見出し ⇔ タブ 64 */
  flex-wrap: wrap;
}
.voices__tab{
  min-width: 240px;
  min-height: 54px;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  background: #F1F2F3;
  color: var(--c-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  transition: background-color .15s;
}
.voices__tab:hover{ background: #e6e8ea; }
.voices__tab.is-active{ background: #FFEB00; }

.voices__panel{
  position: relative;                 /* 送りボタンの基準 */
  margin-top: 48px;                   /* タブ ⇔ カード 48 */
}
.voices__panel[hidden]{ display: none; }

/* 左右の送りボタン。細い線の矢印を白で、カードの中央高さに置く。
   背景は敷かず、薄い色のカードの上でも見えるよう影だけ添える */
.voices__nav{
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
.voices__nav--prev{ left: 12px; }
.voices__nav--next{ right: 12px; }
.voices__nav::before{
  content: "";
  width: 18px;
  height: 18px;
  border-left: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
  /* 白い矢印は薄い色のカードの上だと沈むので、影を二重にかけて輪郭を出す */
  filter: drop-shadow(0 0 5px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.voices__nav--prev::before{ transform: rotate(45deg)   translate(2px, -2px); }
.voices__nav--next::before{ transform: rotate(-135deg) translate(2px, -2px); }
.voices__nav:hover{ opacity: .7; }
/* 端まで送ったら押せなくする */
.voices__nav[disabled]{ opacity: .25; cursor: default; }

/* 横スライダー。JSは使わず、スクロールスナップで1枚ずつ止める */
.voices__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.voices__viewport::-webkit-scrollbar{ display: none; }

.voices__track{
  display: flex;
  gap: var(--gap-card-x);
  /* 左右に余白を置くと、中央のカードがコンテンツ幅の位置にそろい、
     隣のカードが画面の端から覗く（1440では78px）。
     ※カード幅は下の flex-basis:100% ＝ この padding を引いた残り。
       ここで変数を使って両方に同じ式を書くと、% の基準が
       「スクロール枠の幅」と「トラックの内側の幅」でずれて食い違う */
  padding-inline: max(var(--pad-x), calc((100% - var(--w-content)) / 2));
}

.voice-card{
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  gap: 32px;
  padding: 32px;
  border-radius: 8px;
  /* Figmaは白地の上に「途中で一段薄くなる斜めのグラデーション」を重ねている。
     角度102.72degは実測（右へ1220進む間に275下がる）。境目は中央できっぱり変わる */
  background: #fff linear-gradient(102.72deg, var(--v-tint) 0 50%, var(--v-tint-light) 50% 100%);
}
/* カードの色は3色を順番に繰り返す（Figma実測: 青・橙・緑） */
.voice-card:nth-child(3n+1){ --v-tint: #BFE4F7; --v-tint-light: #DFF2FB; }
.voice-card:nth-child(3n+2){ --v-tint: #FAD9A2; --v-tint-light: #FDECD1; }
.voice-card:nth-child(3n+3){ --v-tint: #D2E8A2; --v-tint-light: #E9F4D1; }

.voice-card__photo{
  flex: 0 0 320px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
/* 写真の「縦のどこを残すか」を1枚ずつ指定できるようにする（強みの写真と同じ考え方）。
   --focus-y ＝ 0%が上端寄せ・100%が下端寄せ。既定は40%。
   人物写真は顔が上寄りにあることが多く、中央合わせ（50%）だと切れやすい。
   値は管理画面の「写真の見せたい位置」（カスタムフィールド）で1件ずつ変えられる。
   2026-07-29 の指摘（細井さんの顔が切れている）への対応。 */
.voice-card__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--focus-y, 40%);
}


.voice-card__body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.voice-card__head{
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.voice-card__title{
  font-weight: 700;
  font-size: clamp(18px, 1.6667vw, 24px);
  line-height: 2;
  letter-spacing: .05em;
}
.voice-card__name{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
/* 罫線は本文の上枠で描く（見出し⇔罫線32・罫線⇔本文32） */
.voice-card__text{
  padding-top: 32px;
  border-top: 1px solid #000;
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  /* Figmaの本文枠は3行分（96px）。長い文は3行で切る */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voices__more{
  display: flex;
  justify-content: center;
  margin-top: 32px;                /* カード ⇔ ボタン 32 */
}
.btn-pill--more{ background: var(--sec-heading); }

/* --------------------------------------------------------------------------
   9. りらの一日（Figma 70:5733 実測）
      背景 #F2F2F2 / 左に写真436x327・右に幅720の時系列 / 見出し色は青緑
      時系列は左の2px罫線に丸印を重ね、項目ごとに下線を引く
   -------------------------------------------------------------------------- */
.sec-day{
  padding: var(--pad-y) var(--pad-x);
  background: #F2F2F2;
}
.sec-head--day{ color: var(--c-day); }

.sec-day__lead{
  margin-top: 32px;
  font-weight: 700;
  font-size: clamp(16px, 1.3889vw, 20px);
  line-height: 1.4;
}

.sec-day__grid{
  display: grid;
  grid-template-columns: 436px 1fr;   /* 写真436 ⇔ 64 ⇔ 時系列720 = 1220 */
  gap: var(--gap-sec);
  align-items: start;
  margin-top: var(--gap-sec);
}
.sec-day__photo{ margin: 0; }
.sec-day__photo img{ width: 100%; aspect-ratio: 436 / 327; object-fit: cover; }

/* 時系列本体。縦の線は各項目の左枠線が連なって1本に見える */
.timeline__item{
  position: relative;
  /* Figmaの枠線は内側指定で左padding48に含まれるため、border分の2pxを引く。
     下は「内容から64px下に区切り線 → さらに32px」で 96px */
  padding: 32px 0 96px 46px;
  border-left: 2px solid var(--c-day);
}
/* 最後の項目には区切り線を引かない（Figmaでも線は4本） */
.timeline__item:last-child{ padding-bottom: 32px; }
.timeline__item:last-child::after{ display: none; }
/* 丸印は線の中心にのせる */
.timeline__item::before{
  content: "";
  position: absolute;
  left: -7px;
  top: 37px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-day);
}
/* 項目の区切り線。内容から64px下、項目の下端から32px上 */
.timeline__item::after{
  content: "";
  position: absolute;
  left: 46px;
  right: 0;
  bottom: 32px;
  height: 1px;
  background: rgba(0,0,0,.1);
}

.timeline__label{
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
.timeline__time{
  font-family: var(--f-num);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: .1em;
}
.timeline__title{
  margin-top: 8px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
.timeline__text{
  margin-top: 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
}

/* 通学生・寮生の2枚並び */
/* 2枚は高さをそろえる（Figmaも下端が揃っている） */
.timeline__split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* 縦並びのflexにしてある。ブロック配置だと帯（通学生/寮生）の上下に
   行間のアキが入り、Figmaより3px下がるため */
.day-card{
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--c-white);
}
.day-card__badge{
  align-self: flex-start;
  padding: 4px 8px;
  background: var(--c-day);
  color: var(--c-white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.day-card__time{
  margin-top: 8px;
  font-family: var(--f-num);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: .1em;
}
.day-card__title{
  margin-top: 8px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
}
.day-card__text{
  margin-top: 18px;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
}

.sec-day__more{
  display: flex;
  justify-content: center;
  margin-top: var(--gap-sec);
}
.btn-pill--day{ background: var(--c-day); }

/* --------------------------------------------------------------------------
   10. 卒業後の進路（Figma 70:5835 実測）
      背景は画面幅を10等分した縦縞。濃淡2種を交互に置く（Figmaの塗り＝
      横方向のグラデーションを10%刻みで切り替えたもの・全体の不透明度20%）
   -------------------------------------------------------------------------- */
.sec-career{
  padding: var(--pad-y) var(--pad-x);
  background: repeating-linear-gradient(
    to right,
    rgba(94,173,209,.10) 0 10%,
    rgba(94,173,209,.20) 10% 20%
  );
}
.sec-head--career{ color: var(--c-accent); }
.sec-career__lead{
  margin-top: 24px;
  font-weight: 700;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.9;
}

.career-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card-x);
  margin-top: var(--gap-sec);
}
.career-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
  background: var(--c-white);
  text-align: center;
}
/* 分類名は「芸術系大学・専門学校への進学」のように長く、1枚249pxには1行で入らない。
   2行ぶんの高さを常に確保して、4枚の数字の高さをそろえる */
.career-card__title{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2em;
  color: var(--c-accent);
  font-weight: 700;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.6;
}
/* 数字と「名」は下端をそろえる（Figmaの縦揃え＝MAX） */
.career-card__count{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  color: var(--c-accent);
}
.career-card__num{
  font-family: var(--f-num);
  font-weight: 500;
  font-size: clamp(40px, 4.4444vw, 64px);
  line-height: 1;
  letter-spacing: .05em;
}
.career-card__unit{
  font-weight: 900;
  font-size: clamp(26px, 2.7778vw, 40px);
  line-height: 1;
  letter-spacing: .05em;
}
.career-card__example{
  margin-top: 4px;
}
.career-card__example-label{
  color: var(--c-accent);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
}
/* 代表例の校名は、入りきらないときだけ語の途中で折る。
   2026-08-04 修正：390pxで左のカードが202px・右が132pxと、左右の列幅が揃っていなかった。
   原因は「日本女子体育大学ダンス学科」（14px×13字＝176px）が `word-break: auto-phrase` で
   1語として扱われ折り返せないこと。グリッドの `1fr` は `minmax(auto, 1fr)` なので、
   この176pxが列の下限として効き、残りを2列目に押し付けていた。
   `overflow-wrap: anywhere` は「入るならこれまで通り文節で折り、入らないときだけ
   どこでも折る」指定で、最小幅の計算にも反映される（`break-word` は反映されないので効かない）。
   ＝広い画面の見え方は変えずに、狭い画面でだけ列幅が揃う。 */
.career-card__example-list{
  margin-top: 2px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.sec-career__more{
  display: flex;
  justify-content: center;
  margin-top: var(--gap-sec);
}
.btn-pill--career{ background: var(--c-accent); }

/* --------------------------------------------------------------------------
   11. 他の高校との違い（旧: りらを選ぶ理由）
      2026-08-04: 「りらの強み」（ページ上部）と内容が重複していたカード4枚
      （.reason-cards）を削除し、アコーディオンで隠していた比較コンテンツを
      最初から表示する構成にスリム化（作業②・大硲確認済み）
      2026-08-05: h2「りらを選ぶ理由」＋h3「他の高校との違い」の二重見出しを解消し、
      h2を「他の高校との違い」に一本化。比較コンテンツは Claude Design で作成し
      大硲・小杉が承認した案（りら側は白カード＋写真＋太字で立てる）に更新（作業③）。
      ○×・表組みは使わない、相手を薄い色で下げないという2026-07-14の決定は継続。
   -------------------------------------------------------------------------- */
.sec-reason{
  padding: var(--pad-y) var(--pad-x);
  background: #F2F2F2;
}
.sec-head--reason{ color: var(--c-reason); }
.sec-reason__lead{
  margin-top: 32px;
  max-width: 920px;
  font-weight: 500;
  font-size: clamp(15px, 1.1806vw, 17px);
  line-height: 1.9;
  color: #4a4f52;
}

/* 他の高校との違い。
   「比較表」にはしない ＝ 表組み・見出し行・○×を使わず、
   観点ごとのかたまりを縦に並べ、その中で事実を左右に置くだけにする
   （2026-07-14 に○×から中立対比へ変更した決定に沿う）。
   一般側は無地のグレー面のまま。りら側だけ白カード＋写真＋太字で立てる
   （2026-08-05 承認済みデザイン案。相手を薄い色で下げる見せ方はしない） */
.contrast{
  margin-top: var(--gap-sec);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sec);
}
.contrast__axis{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--c-body);
  font-weight: 700;
  font-size: clamp(17px, 1.5278vw, 22px);
  line-height: 1.5;
}
.contrast__axis::before{
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 24px;
  border-radius: 1px;
  background: var(--c-reason);
}
.contrast__pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 40px);
  align-items: stretch;
}

/* 一般的な高校側：無地のグレー面のまま。
   上のpaddingは1381px以上72px・1281〜1380pxで52px・1024〜1280pxで42pxの3段階
   （田原さん指示・2026-08-05。狭いPC幅で72pxのままだと余白が間延びして見えるため） */
.contrast__general{
  padding: 72px clamp(16px, 3vw, 28px) 32px;
  background: #E9E9E9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* りら側：白カード＋写真＋太字で立てる。
   写真列は260px固定ではなく「りらカード自身の幅の44%（1440基準で260px相当）」にして、
   PCレイアウトのままノートPCの一般的なウィンドウ幅（768〜1439px）でも
   本文が潰れずに縮む（田原さん指示・2026-08-05：PC/スマートフォンの2種類だけにする） */
.contrast__lyra{
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: 1fr clamp(96px, 44%, 260px);
  overflow: hidden;
}
.contrast__lyra-text{
  padding: 72px clamp(14px, 4vw, 36px) 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 写真の正方形維持（PCレイアウトのみ。詳細は下の1024px以上のブロックを参照） */
.contrast__lyra-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 1024px以上（PC）でだけ、写真を「基本は正方形、本文が長い行だけ隙間なく追従して伸びる」形にする。
   aspect-ratio は grid の stretch を無効にしてしまい（実測で確認：aspect-ratio があると
   height:100% が効かず、逆に横幅があふれる例もあった）、本文が長い行の隙間を防げない。
   そこでコンテナクエリ単位で「自分の幅と同じ高さ」をimgのmin-heightに指定する
   （100cqi＝親要素のinline-size＝写真列の幅の100%。cqiは要素自身ではなく祖先の
   container-typeを参照するため、containerは親側に置く）。
   1023px以下（スマートフォン）はこの仕組みを使わず、単純な aspect-ratio: 4/3 のままにする
   （組み合わせるとimgが親の幅を超えて壊れることを実機幅で確認したため・田原さん指示・2026-08-05） */
@media (min-width: 1024px){
  .contrast__lyra-media{ container-type: inline-size; }
  .contrast__lyra-media img{ min-height: 100cqi; }
}

/* 1281〜1380px：上のpaddingを72→52pxに詰める（1023px以下の値は下のスマートフォン用
   ブロックで別途上書きされるので、ここでは1024px以上のPC幅だけを考えればよい） */
@media (max-width: 1380px){
  .contrast__general{ padding-top: 52px; }
  .contrast__lyra-text{ padding-top: 52px; }
}
/* 1024〜1280px：上のpaddingをさらに42pxまで詰める */
@media (max-width: 1280px){
  .contrast__general{ padding-top: 42px; }
  .contrast__lyra-text{ padding-top: 42px; }
}

/* 「一般的な高校」「りら」の小さな見出し */
.contrast__side{
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(38,43,46,.55);
}
.contrast__lyra .contrast__side{ color: var(--c-reason); }

.contrast__text{
  margin: 0;
  font-weight: 500;
  font-size: clamp(15px, 1.1111vw, 16px);
  line-height: 2;
  color: rgba(38,43,46,.8);
}
.contrast__lyra .contrast__text{
  font-weight: 700;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.9;
  color: var(--c-body);
}

/* 数値の強調（クラス人数・公演本数）。書体はOswaldで数字だけ立てる */
.contrast__num{
  font-family: var(--f-num);
  font-weight: 700;
}
.contrast__general .contrast__num{
  font-size: clamp(22px, 1.8056vw, 26px);
  color: rgba(38,43,46,.7);
  vertical-align: -2px;
}
.contrast__num--accent{
  margin-inline: 2px;
  font-size: clamp(24px, 2.0833vw, 30px);
  color: var(--c-reason);
  vertical-align: -3px;
}

/* 1023px以下：他の高校との違い。ノートPCの一般的な幅（1024px〜）はPCレイアウトのまま保ち、
   それ未満（タブレット縦向き・スマートフォン）はスマートフォン表示に切り替える
   （田原さん指示・2026-08-05：PC／スマートフォンの2種類だけにする）。
   横に並べる余地がないため1列に積み、りらカードも写真を上・本文を下に積み直す */
@media (max-width: 1023px){
  .contrast__axis{ margin-bottom: 16px; gap: 10px; font-size: 17px; }
  .contrast__axis::before{ width: 5px; height: 19px; }
  .contrast__pair{ grid-template-columns: 1fr; gap: 20px; }
  .contrast__general{ padding: 24px; }
  .contrast__lyra{ grid-template-columns: 1fr; }
  .contrast__lyra-text{ padding: 20px 20px 22px; }
  /* 写真を本文の上へ。文書としての順序（本文→写真）は変えずに、
     見た目だけ入れ替える（承認済みデザイン案のスマートフォン表示に合わせる） */
  .contrast__lyra-media{ order: -1; aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   12. 学費・支援制度（Figma 70:5914 実測）
      進路と同じ縦縞だが、こちらは不透明度がかかっておらず色が濃い
   -------------------------------------------------------------------------- */
.sec-fee{
  padding: var(--pad-y) var(--pad-x);
  background: repeating-linear-gradient(
    to right,
    rgba(94,173,209,.90) 0 10%,
    rgba(94,173,209,1)  10% 20%
  );
}
.fee-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 64px;
  background: var(--c-white);
  text-align: center;
}
.fee-box__text{
  color: var(--c-accent);
  font-weight: 700;
  font-size: clamp(18px, 1.6667vw, 24px);
  line-height: 1.4;
}
.btn-pill--fee{ background: var(--c-accent); }

/* --------------------------------------------------------------------------
   13. よくある質問（Figma 70:5947 実測）
      質問の帯を押すと答えが開く。最初の1問だけ開いた状態で置く
   -------------------------------------------------------------------------- */
.sec-faq{
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-white);
}
.sec-head--faq{ color: var(--c-faq); }

.faq-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: var(--gap-sec);
}
.faq-item__q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 24px 32px;
  border-radius: 8px;
  background: #E5F0FA;
  font-weight: 700;
  font-size: clamp(16px, 1.3889vw, 20px);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker{ display: none; }
.faq-item__q::after{
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 5px;
  background: #1C1B1F;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .2s;
}
.faq-item[open] .faq-item__q::after{ transform: rotate(180deg); }
/* 答えの本文。Figmaの行間は1.4だったが、詰まって読みづらいため1.8にする
   （2026-07-29 大硲指示）。行間を広げると段落の切れ目が見えなくなるので、
   続く段落には1行分のアキを入れる（「全寮制ですか？」の答えが2段落ある） */
.faq-item__a{
  padding: 24px 32px 48px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
}
.faq-item__a p + p{ margin-top: 1em; }

/* --------------------------------------------------------------------------
   13.5 下部CTA：体験授業・学校説明会（Figma 2009:358 実測／森本デザイン第2弾）
      これまで空枠だった区画の正式版。よくある質問とお知らせの間に入る。
      イベント4枚だけが動的（WordPress の xo_event から取る）。他は静的。
   -------------------------------------------------------------------------- */
.sec-event{
  padding: var(--pad-y) var(--pad-x);
  background: #F2F2F2;
}
.sec-event__inner{
  max-width: var(--w-content);
  margin: 0 auto;
}
.sec-event__title{
  color: var(--c-visit);
  font-weight: 700;
  /* 1440で48px。狭い画面では24pxまで落とす */
  font-size: clamp(24px, 3.3333vw, 48px);
  line-height: 1.4;
  text-align: center;
}
.sec-event__lead{
  margin-top: 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  text-align: center;
}
.event-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card-x);
  margin-top: var(--gap-sec);
}
/* グリッドの升目は既定で「中身より狭くならない」ため、WordPressが出す
   アイキャッチ（medium_large＝768px級）の実寸が下限になって、320〜360pxで
   カードが枠からはみ出していた。min-width を切って升目の幅に従わせる。
   静的版は素の <img> で再現しなかった＝WordPress出力でだけ出る差 */
.event-card{ background: var(--c-white); min-width: 0; }
/* カード全体をリンクにする。高さを揃えたいので flex で伸ばす */
.event-card__link{
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 16px;
  color: var(--c-body);
}
/* Figma実測 249×187。画像は縦長のチラシが多いので、
   デザインどおり切り抜いて埋める（scaleMode: FILL ＝ object-fit: cover） */
.event-card__thumb{
  display: block;
  aspect-ratio: 249 / 187;
  overflow: hidden;
  background: #EDEDED;
}
/* WordPress は <img> を <picture> で包んで出すことがある。picture は既定が inline で
   中身の実寸ぶんに広がるため、中の img の width:100% が効かない。ここで枠に合わせる */
.event-card__thumb picture{
  display: block;
  width: 100%;
  height: 100%;
}
.event-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-card__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-card__title{
  font-weight: 700;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .05em;
}
.event-card__date{
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
}
.sec-event__actions{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: var(--gap-sec);
}

/* --------------------------------------------------------------------------
   14. お知らせ（Figma 70:6000 実測）
      日付と見出しを縦に置いた行を3つ。上下に細い罫線
   -------------------------------------------------------------------------- */
.sec-news{
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-white);
}
.sec-head--news{ color: var(--c-accent); }

.news-list{
  margin-top: var(--gap-sec);
  border-top: 1px solid #000;
}
.news-item{ border-bottom: 1px solid #000; }
.news-item__link{
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Figmaの罫線は内側指定で行の高さ114に含まれるため、下paddingから1px引く */
  padding: 24px 32px 23px;
}
.news-item__link:hover .news-item__title{ color: var(--c-accent); }
.news-item__date{
  font-family: "Roboto", var(--f-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #989898;
}
.news-item__title{
  font-weight: 700;
  font-size: clamp(16px, 1.3889vw, 20px);
  line-height: 1.4;
  transition: color .15s;
}

.sec-news__more{
  display: flex;
  justify-content: center;
  margin-top: var(--gap-sec);
}
.btn-pill--news{ background: var(--c-accent); }

/* --------------------------------------------------------------------------
   15. Instagram（Figma 70:6016 実測）
      190x237.5（4:5）の写真を6枚、間隔16pxで横に並べる
   -------------------------------------------------------------------------- */
.sec-ig{
  padding: var(--pad-y) var(--pad-x);
  background: #F2F2F2;
}
.sec-head--ig{ color: var(--c-accent); }

.ig-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: var(--gap-sec);
}
.ig-item img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* WordPress組み込み後は、この枠にプラグイン（Smash Balloon）の出力がそのまま入る。
   並び方・枚数はプラグインの設定側で持つため、ここでは上の余白だけ合わせておく */
.ig-embed{ margin-top: var(--gap-sec); }
.ig-item a{ display: block; }
.ig-item a:hover img{ opacity: .85; }

.sec-ig__more{
  display: flex;
  justify-content: center;
  margin-top: var(--gap-sec);
}
.btn-pill--ig{ background: var(--c-accent); }

/* --------------------------------------------------------------------------
   16. 画面に固定するCTAとイベント告知（Figma 70:6190 / 70:6206 実測）
      右下に3つのボタンを縦に、左下にイベントの案内を置く
   -------------------------------------------------------------------------- */
.cta-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1),
    visibility .7s;
}
/* is-away = フッターに到達したので引っ込める（連絡先やSNSに重ならないように）
   is-pending = まだ出していない状態。イベント告知と同じタイミングで一緒に出す
   （2026-07-29 大硲判断）。1画面目の間ずっと引っ込めておく旧方式（is-hold）は、
   FVのタブに重ならない代わりに固定CTAが長く見えないままになるため取りやめた。
   タブに一部重なることより、資料請求・体験予約への入口が見えない方が損が大きい */
/* is-pending は固定CTAには付かなくなった（2026-07-30 大硲指示で最初から出す）。
   規則は残してあるので、また待たせたくなったらJS側で付けるだけで戻せる */
.cta-float.is-away,
.cta-float.is-pending,
.event-banner.is-away,
.event-banner.is-pending{
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.cta-float__btn{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 200px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  color: var(--c-white);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  filter: var(--shadow-cta);
}
.cta-float__btn img{ width: 24px; height: 24px; flex: 0 0 auto; }
.cta-float__btn:hover{ opacity: .9; }
.cta-float__btn--doc{     background: var(--c-cta-doc); }
.cta-float__btn--trial{   background: var(--c-cta-trial); }
.cta-float__btn--consult{ background: var(--c-cta-consult); }

/* イベント告知（Figma 70:6216＝画像を敷いた版）。
   白い枠で4pxだけ縁取り、影を落として画面から浮かせる。
   Figmaの切り出し位置は日程「8.1(土)〜8.2(日)」が右端で切れていたため、
   タイトル・日程・校章が全部入るように取り直した（画像側で完結） */
.event-banner{
  position: fixed;
  left: 16px;
  /* 出てから閉じるまで、位置は動かさない（2026-07-30 大硲指示）。
     FV下の4つのタブに重なるが、それは承知のうえ。
     スクロールに合わせて持ち上げる仕掛けを一度入れたが、取りやめた */
  bottom: 16px;
  z-index: 80;
  width: 296px;
  max-width: calc(100% - 32px);
  padding: 4px;
  background: var(--c-white);
  filter: var(--shadow-cta);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1),
    translate .5s cubic-bezier(.22,.61,.36,1),
    visibility .7s;
}
.event-banner[hidden]{ display: none; }
/* 出るまでの状態（is-pending）は固定CTAと共通で上にまとめてある。
   FVの動画が動き出して少し置いてから、固定CTAと一緒にふわっと出す
   （2026-07-29 大硲案。読み込んだ瞬間に出すと動画の邪魔になるため）。
   ※1画面目だけヘッダー直下へ持ち上げる案も作ったが、「じゃまに感じる」との
     大硲判断で取りやめ。位置は最初から最後まで左下の定位置で動かさない */
.event-banner__link{ display: block; overflow: hidden; }
.event-banner__link img{ width: 100%; height: auto; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.event-banner__link:hover{ opacity: .92; }
.event-banner__link:hover img{ transform: scale(1.04); }
/* 閉じるボタンは枠の右上にはみ出して重なる */
.event-banner__close{
  position: absolute;
  right: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border: 0;                    /* 親テーマの reset.css の枠線を打ち消す（下層ページ対策） */
  border-radius: 50%;
  background: var(--c-white);
  filter: var(--shadow-cta);
}
.event-banner__close::before,
.event-banner__close::after{
  content: "";
  position: absolute;
  left: 11px;
  top: 15px;
  width: 10px;
  height: 2px;
  background: #1C1B1F;
}
.event-banner__close::before{ transform: rotate(45deg); }
.event-banner__close::after{  transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   17. フッター（現行サイトの構成と見た目を踏襲・配置は Figma 70:6029 で確認）
      Figmaのフッターは現行サイトをアウトライン化して貼ったものなので、
      文言・リンク・素材は現行サイトから起こしている。字詰め(palt)は解除（実測）
   -------------------------------------------------------------------------- */
.l-footer{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: -.01em;
  background: var(--c-white);
}

/* りらサポーターズ / プロジェクトりらじお
   Figmaでは左に画像・右の x=582 から本文が始まる（＝左の列は472px） */
.footer-info{ padding: 64px var(--pad-x); }
.footer-info__row{
  display: grid;
  grid-template-columns: minmax(0, 472px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.footer-info__row + .footer-info__row{ margin-top: 40px; }
/* 画像を囲むリンク。inline のままだと画像の下に行の余白が出て、
   狭い幅での中央寄せ（下の .footer-info__img の margin-inline:auto）も効かないため block にする */
.footer-info__link{ display: block; }
.footer-info__link img{ transition: opacity .2s; }
.footer-info__link:hover img,
.footer-info__link:focus-visible img{ opacity: .75; }
.footer-info__img{ width: auto; height: auto; }
.footer-info__img--supporters{ max-width: 245px; }
.footer-info__img--radio{ max-width: 140px; }
.footer-info__text{ font-weight: 400; }

/* リンク一覧 */
.footer-nav{
  padding: 32px var(--pad-x);
  background: #F2F2F2;
  border-top: .5px solid var(--c-body);
  border-bottom: .5px solid var(--c-body);
}
.footer-nav__cols{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer-nav__head{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.95;
}
.footer-nav__list{ margin-top: 12px; }
.footer-nav__list li{
  font-weight: 400;
  font-size: 14px;
  line-height: 2.8;
}
/* 見出しを持たない列（学生寮・動画・ギャラリー等）は見出しと同じ大きさで並べる。
   項目どうしの間隔は line-height ではなく margin で取る（2026-07-29 大硲指摘）。
   行送りで間隔を作ると、折り返した項目の1行目と2行目まで離れて読みにくくなる。
   27px は元の見え方（18px × 3 = 54px の行）をそのまま保つための差分 */
.footer-nav__list--solo{ margin-top: 0; }
.footer-nav__list--solo li{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}
.footer-nav__list--solo li + li{ margin-top: 27px; }
.footer-nav a:hover{ color: var(--c-accent); }

/* ロゴ・住所・SNS */
.footer-contact{ padding: 48px var(--pad-x); }
.footer-contact__inner{
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-brand{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* 紋章だけの画像に差し替えたため縦長（115×166）になった。
   ブロックの高さが変わらないよう、幅ではなく高さを従来の枠（107px）に合わせる */
.footer-brand__mark{ width: auto; height: 107px; }
.footer-brand__name{ display: flex; flex-direction: column; }
.footer-brand__org{ font-size: 16px; line-height: 1.6; }
.footer-brand__school{ font-weight: 700; font-size: 26px; line-height: 1.4; }

.footer-contact__address{
  flex: 1 1 320px;
  font-style: normal;
  line-height: 2;
}
.footer-contact__address a:hover{ color: var(--c-accent); }

.footer-sns{
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
.footer-sns img{ width: 32px; height: 32px; }
.footer-sns a:hover img{ opacity: .7; }

.footer-copy{
  padding: 6px var(--pad-x);
  background: #F2F2F2;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   18. 画面幅への対応（Figmaに設計なし＝トークンとワイヤーver3.1から起こした版）

   基準1440px。3つの帯に分けて扱う。
   ┌──────────────┬────────────────────────────────────────────┐
   │ 1440px 以上   │ 中身は1440の実寸で固定。ヘッダーは1376pxで中央寄せ、  │
   │              │ FVだけ840pxまで背を伸ばして横帯になるのを防ぐ         │
   │ 1200–1439px  │ PCナビを維持。1360px未満はナビの間隔とロゴを詰める      │
   │ 768–1199px   │ ハンバーガーへ。FVは横長のまま比例縮小               │
   │ 767px 以下    │ FVを縦長(4:5)に。専用画像・タブ2×2               │
   └──────────────┴────────────────────────────────────────────┘
   -------------------------------------------------------------------------- */

/* 1200–1359px：PCナビは残すが、そのままでは1296px必要で入らないため詰める */
@media (min-width: 1200px) and (max-width: 1359px){
  .l-header__logo img{ width: 220px; height: 50.6px; }
  .l-nav__list{ gap: 20px; }
  .l-header__right{ gap: 24px; }
}

/* 1199px以下：PCナビを畳んでハンバーガーにする */
@media (max-width: 1199px){
  .l-nav{ display: none; }
  .l-burger{ display: flex; }
  .l-header__right{ gap: 12px; }
  .fv-tabs__btn{ font-size: clamp(15px, 1.7vw, 20px); padding: 12px 8px 14px; }

  /* 強み4枚：4列のままだとカードが潰れるので2列にする */
  .strength-cards{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .sec-strength{ padding: 64px var(--pad-x); }
  .sec-strength__lead{ margin-bottom: 40px; }

  /* 声：写真を細くして本文の幅を確保する */
  .voice-card{ gap: 24px; padding: 24px; }
  .voice-card__photo{ flex-basis: 240px; }
  .voice-card__body{ gap: 24px; }
  .voice-card__text{ padding-top: 24px; }
  .voices__tabs{ gap: 16px; margin-top: 40px; }
  .voices__panel{ margin-top: 32px; }

  /* りらの一日：写真を細くして時系列の幅を確保する */
  .sec-day__grid{ grid-template-columns: 320px 1fr; gap: 40px; }

  /* 他の高校との違い：写真列を%指定にしたので、この幅専用の調整はなし（599px以下でスマートフォン用に1列化） */

  /* 下部CTAのイベント：4列のままだと1枚146pxで見出しが9文字ずつ折れるため2列にする */
  .event-cards{ grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* 進路：4列のままだとタブレット幅で1枚が狭くなりすぎるので2列にする */
  .career-cards{ grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* フッターの2ブロック（りらサポーターズ・プロジェクトりらじお）は、
     画像を上・本文を下の1列にする。
     2026-07-30 修正：横並びのままだと画像の列が472px固定で残るため、本文の列が
     **600〜899pxで76〜142px・900〜1199pxでも208〜330px**しかなかった
     （16pxの文字で1行5〜20字）。あふれてはいなかったので全幅チェックを素通りしていた。
     1列に落ちるのは599px以下だけだったのを、ナビを畳むのと同じ1199px以下へ広げる。 */
  .footer-info__row{ grid-template-columns: 1fr; gap: 16px; }
  /* 1列になると画像が左端に寄って間が抜けるので、画像だけ中央に置く（大硲指示 2026-07-29）。
     本文は左揃えのまま */
  .footer-info__media{ max-width: 320px; margin-inline: auto; }
  .footer-info__img{ margin-inline: auto; }
}

/* 1100px以下：りらの一日は写真を上に置いて1列にする。
   2026-07-30 修正：899px以下だったのを1100px以下へ広げた。横並びのままだと写真の列320pxが
   残るため、900〜1100pxでは時系列の中の2枚のカードが**1枚100〜160px（14pxの文字で1行7字）**
   しかなかった。あふれてはいないので23幅チェックを素通りしていた（列幅の検査を足して発見）。 */
@media (max-width: 1100px){
  .sec-day__grid{ grid-template-columns: 1fr; gap: 32px; }
  .sec-day__photo img{ aspect-ratio: 16 / 9; }
}

/* 767px以下：ヘッダーを詰める（FVのレイアウト切替は599px以下・別ブロック） */
@media (max-width: 767px){
  /* フッターのリンクは4列だと1列116pxしかなく、「動画・ギャラリー」（18px×8字＝144px）が
     入らない。語の途中では折らない指定にしているため、列の方を減らす。
     auto-fit なので、幅が足りるうちは2列、320px級の端末では1列になる */
  .footer-nav__cols{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px 32px;
  }
  /* 校名は26px固定だと390px幅で入りきらない。画面幅に応じて縮める */
  .footer-brand__school{ font-size: clamp(19px, 5.4vw, 26px); }
  .footer-brand__org{ font-size: clamp(13px, 3.6vw, 16px); }
  .footer-brand__mark{ width: auto; height: clamp(74px, 20vw, 107px); }

  .l-header{ gap: 12px; padding: 0 16px; }
  .l-header__logo img{ width: 174px; height: 40px; }
  .btn-line__label{ display: none; }
  /* アイコンのみ表示。タップ領域は44×44px以上を確保する（実装要件①） */
  .btn-line{ padding: 0; background: none; width: 44px; height: 44px; justify-content: center; }
  .btn-line--drawer{ width: auto; height: 44px; padding-right: 20px; background: var(--c-line); justify-content: flex-start; }
  .btn-line--drawer .btn-line__label{ display: inline; }
  .l-header__right{ gap: 4px; }

  /* 進路：2列のまま、余白だけ詰める（列数は1199px以下のブロックで指定済み） */
  .career-cards{ gap: 16px; }

  /* 下部CTAのイベント：2列のまま、文字と余白だけ詰める */
  .event-cards{ gap: 16px; }
  .event-card__link{ gap: 12px; padding: 12px; }
  .event-card__title{ font-size: 14px; line-height: 1.7; }
  .event-card__date{ font-size: 13px; line-height: 1.7; }

  /* 固定CTA：右下の縦積みだと画面をふさぐので、下端に横一列の帯にする
     （Figmaにスマートフォンの設計がないため、こちらで決めた形）。
     2026-07-29 大硲指示：白い下敷き・余白・角丸をやめ、3色のボタンを
     隙間なく画面下端いっぱいに並べる。帯の上端だけ影で浮かせる */
  :root{ --cta-bar-h: 56px; }
  /* 帯のぶんの余白は空けない（2026-07-30 大硲指摘）。
     帯はフッターに近づくと引っ込む（lyra-common.js の is-away）ので、
     ページの一番下で中身に重なることがない＝先に空けておく必要がない。
     ただしJSが動かない環境では引っ込まないため、そのときだけ空ける。
     has-js は <head> のインラインスクリプトが付ける目印。 */
  html:not(.has-js) body:has(.cta-float){
    padding-bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  .cta-float{
    right: 0; bottom: 0; left: 0;
    flex-direction: row;
    gap: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -2px 14px rgba(0,0,0,.16);
  }
  .cta-float__btn{
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    justify-content: center;
    gap: 6px;
    /* ホームバーのある端末では、色面をその下まで伸ばす */
    padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    min-height: var(--cta-bar-h);
    border-radius: 0;
    filter: none;
    font-size: 14px;
  }
  .cta-float__btn img{ width: 20px; height: 20px; }
  /* イベント告知は固定CTAの帯の真上に置く。画面が狭いぶん少し小さくする */
  .event-banner{
    bottom: calc(var(--cta-bar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    width: 240px;
  }
}

/* 599px以下：スマートフォン。FVを縦長(4:5)に組み替え、専用に切り出した画像を使う。
   600〜1199pxは横長のまま（PCと同じ組み方で比例縮小）＝画像も横長版を使う */
@media (max-width: 599px){
  /* スマートフォンでは「ヘッダー＋FV＋4つのタブ＋下端の固定CTA帯」で画面をちょうど1枚分にする。
     svh は「アドレスバーが出ている状態の画面高さ」＝最初に見える範囲。
     dvh だとスクロールでアドレスバーが消えた瞬間に高さが変わって画面が跳ねる。
     100vh は逆にアドレスバーの分だけはみ出す。だから svh を使う。
     古いブラウザ向けに vh の指定を先に置き、対応していれば下の svh で上書きされる。

     2026-07-29 大硲判断：固定CTAの帯（56px）のぶんもFVから引く。
     固定CTAを1画面目から出す仕様に変えたことで、帯が4つのタブの下2つを覆っていた
     （390pxでは押せるタブが1つだけだった）。帯のぶんを先に確保しておけば、
     固定CTAを出したまま4つのタブがすべて画面に入る。
     390×844 の実寸では FV=616px（約73svh）。 */
  .fv{
    height: calc(100vh  - var(--h-header) - var(--fv-tabs-h) - var(--cta-bar-h));
    height: calc(100svh - var(--h-header) - var(--fv-tabs-h) - var(--cta-bar-h) - env(safe-area-inset-bottom, 0px));
    min-height: 420px;               /* 横向き・背の低い端末でコピーが潰れない下限 */
    aspect-ratio: auto;
  }
  /* 4:5に切り出した専用画像（fv_poster_sp）を使うため位置調整は不要 */
  .fv__copy{
    top: auto;
    bottom: 40px;
    gap: 24px;
    width: calc(100% - 32px);
  }
  .fv__title{ font-size: clamp(28px, 8.5vw, 40px); }
  .fv__sub{ min-width: 0; width: 100%; font-size: clamp(15px, 4.4vw, 22px); padding: 4px .1em 4px .1em; }
  .fv__badges{ gap: 8px; }
  .fv-badge{ padding: 6px 4px; }
  /* ラベルが2行になる枠とならない枠が混在するため、2行分の高さを常に確保して
     3枠の数値の高さを揃える */
  .fv-badge__label{
    /* 下限は12px。これを下回ると読みづらく、スマートフォンで拡大されやすい */
    font-size: clamp(12px, 3.1vw, 13px);
    white-space: normal;
    /* flex にすると中の .np（文節を切らせない指定）が別々の項目として
       横に並んでしまう。grid なら文章のかたまりのまま中央に置ける */
    display: grid;
    place-items: center;
    min-height: 2.4em;
  }
  /* 下限15px＝320px幅でも「20本以上」がバッジ枠に収まる値（実測で確定） */
  .fv-badge__value{ font-size: clamp(15px, 5.4vw, 26px); }
  .fv__note{ font-size: 12px; margin-top: -12px; }

  /* 2〜4枚目の暗幕。PCは左から効かせているが、画面が縦長になると
     文字と写真が同じ範囲に重なるので、全体を落として上下から締める */
  .fv-panel--side .fv__media::after{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.45) 0%,
        rgba(0,0,0,.30) 40%,
        rgba(0,0,0,.55) 100%),
      rgba(0,0,0,.18);
  }
  .fv-panel__body{ gap: 18px; padding: 0 16px; }
  .fv-panel__text{ line-height: 1.85; }

  .fv-tabs{ margin-top: 0; padding: 0; }
  .fv-tabs__inner{ flex-wrap: wrap; gap: 4px; }
  .fv-tabs__btn{ flex: 1 1 calc(50% - 4px); font-size: 15px; padding: 12px 8px 14px; min-height: 52px; }
  .fv-tabs__btn.is-active::before{ display: none; }

  /* 体験帯：縦積みにし、ボタンは横幅いっぱいに */
  .sec-visit{ margin-top: 32px; margin-right: 0; padding: 24px 20px; }
  .sec-visit__inner{ gap: 20px; }
  .sec-visit__actions{ width: 100%; flex-direction: column; }
  .sec-visit__actions .btn-pill{ width: 100%; }
  .sec-visit__title{ font-size: 20px; }

  /* リード文：中央寄せだと行ごとの頭が揃わず読みにくいので左揃えにする（大硲指示 2026-07-29）。
     PC用に入れてある改行も、狭い幅では不自然な位置で切れるため無効にする */
  .sec-strength__lead{ text-align: left; }
  .sec-strength__lead br{ display: none; }

  /* 強み4枚：1列に落とし、千鳥配置は解除する */
  .strength-cards{ grid-template-columns: 1fr; gap: 32px; }
  .strength-card:nth-child(even){ margin-top: 0; }
  .strength-card__visual{ aspect-ratio: 16 / 10; }
  .strength-card__body{ padding: 16px 0 0; }

  /* 声：写真を上に置いて縦積みにする。タブは横幅を等分。
     カードを少し細くして次のカードを右端から覗かせ、横に送れることを示す */
  .voice-card{ flex: 0 0 calc(100% - 36px); flex-direction: column; gap: 16px; padding: 20px; }
  /* 16:10 では元の縦長写真の半分以上を切り落とすことになり、顔が枠から外れやすい
     （提供写真は262×338＝縦長。16:10だと338のうち163しか残らない）。
     4:3 にして残す範囲を広げる。切る位置は --focus-y で1枚ずつ調整する */
  .voice-card__photo{ flex-basis: auto; width: 100%; aspect-ratio: 4 / 3; }
  .voice-card__body{ gap: 16px; }
  .voice-card__text{ padding-top: 16px; -webkit-line-clamp: 4; line-clamp: 4; }
  .voice-card__title{ line-height: 1.7; }
  /* 見出しは1行に収まらないので折り返しを許し、罫線は短くする */
  .sec-head{ white-space: normal; font-size: clamp(24px, 7vw, 32px); gap: 12px; }
  .sec-head::after{ min-width: 16px; }
  .voices__tabs{ gap: 8px; flex-wrap: nowrap; }
  .voices__tab{ flex: 1 1 0; min-width: 0; padding: 14px 8px; font-size: 16px; }
  .voices__more .btn-pill{ width: 100%; }

  /* りらの一日：左の余白を詰め、通学生・寮生の2枚は縦に積む */
  .timeline__item{ padding: 24px 0 24px 22px; }
  .timeline__item::before{ top: 28px; width: 12px; height: 12px; left: -5px; }
  .timeline__item::after{ left: 22px; bottom: 24px; }
  .timeline__split{ grid-template-columns: 1fr; gap: 12px; }
  .sec-day__more .btn-pill{ width: 100%; }


  /* 進路：ボタンは横幅いっぱい */
  .sec-career__more .btn-pill{ width: 100%; }

  /* 学費：内側の余白を詰め、ボタンは横幅いっぱい */
  .fee-box{ padding: 32px 20px; gap: 24px; }
  .fee-box .btn-pill{ width: 100%; }

  /* よくある質問：左右の余白を詰める */
  .faq-item__q{ padding: 16px 20px; }
  .faq-item__a{ padding: 16px 20px 24px; }

  /* お知らせ：左右の余白を詰め、ボタンは横幅いっぱい */
  .news-item__link{ padding: 16px 4px; gap: 6px; }
  .news-item__date{ font-size: 16px; }
  .sec-news__more .btn-pill{ width: 100%; }

  /* Instagram：6枚を3列×2段に */
  .ig-grid{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sec-ig__more .btn-pill{ width: 100%; }

  /* フッター：リンクは2列、住所まわりは中央寄せ
     （説明文を画像の下へ回すのは 899px以下のブロックで行う） */
  .footer-info{ padding: 40px var(--pad-x); }
  .footer-info__row + .footer-info__row{ margin-top: 32px; }
  /* 列数は767px以下のブロックで auto-fit にしてある（320px級では1列に落ちる）ため
     ここでは間隔だけ詰める */
  .footer-nav__cols{ gap: 24px; }
  .footer-contact{ padding: 32px var(--pad-x); }
  .footer-contact__inner{ flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  .footer-contact__address{ flex: 0 0 auto; }
  .footer-copy{ font-size: 12px; }
  .career-card{ padding: 20px 12px; }
  .career-card__title{ font-size: 16px; }
}

/* 389px以下：進路のカードは1列にする。
   2026-08-04 追加：2列のままだと1枚の本文が108〜136pxしかなく、代表例の校名が
   14pxの文字で1行8〜10字（縦に細長いかたまり）になる。320pxでは以前カードが10pxはみ出していた。
   2列で本文が1行10字以上を保てるのは390px以上なので、そこを境目にする。 */
@media (max-width: 389px){
  .career-cards{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   19. 動き（2026-07-29 大硲指示で追加）

   「全体的にマイクロインタラクションが足りず、to C向けなのに静的」への対応。
   足すのは3種類だけに絞る。派手な演出はしない。
     ① スクロールで画面に入った要素を、下から少し上げながら出す
     ② ファーストビューは読み込み直後に、要素を順番に起こす
     ③ 触れるもの（カード・ボタン・写真）に、触れたことがわかる程度の反応

   守っていること
   ・動かすのは opacity と translate / transform だけ（描画のやり直しが起きない）
   ・JSが動かない環境では何も隠さない（下の .has-js で囲っているのがその仕掛け。
     <head> のインラインスクリプトが html に has-js を付けたときだけ初期状態が効く）
   ・「動きを減らす」設定の端末では全部止めて、最初から見えている状態にする
   -------------------------------------------------------------------------- */
:root{
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ---- ① スクロールで出す ----
   移動には transform ではなく translate（単独指定）を使う。
   こうしておくと、下の hover で transform を使っても互いに打ち消し合わない */
.has-js [data-reveal]{
  opacity: 0;
  translate: 0 20px;
  transition: opacity .75s var(--ease-out), translate .75s var(--ease-out);
}
.has-js [data-reveal].is-in{
  opacity: 1;
  translate: none;
}

/* 中身を1枚ずつずらして出す入れ物。入れ物そのものは動かさない */
.has-js [data-reveal][data-stagger]{
  opacity: 1;
  translate: none;
  transition: none;
}
.has-js [data-reveal][data-stagger] > *{
  opacity: 0;
  translate: 0 18px;
  transition: opacity .7s var(--ease-out), translate .7s var(--ease-out);
}
.has-js [data-reveal][data-stagger].is-in > *{ opacity: 1; translate: none; }
.has-js [data-reveal][data-stagger].is-in > *:nth-child(1){ transition-delay: 0ms; }
.has-js [data-reveal][data-stagger].is-in > *:nth-child(2){ transition-delay: 80ms; }
.has-js [data-reveal][data-stagger].is-in > *:nth-child(3){ transition-delay: 160ms; }
.has-js [data-reveal][data-stagger].is-in > *:nth-child(4){ transition-delay: 240ms; }
.has-js [data-reveal][data-stagger].is-in > *:nth-child(5){ transition-delay: 320ms; }
.has-js [data-reveal][data-stagger].is-in > *:nth-child(6){ transition-delay: 400ms; }
.has-js [data-reveal][data-stagger].is-in > *:nth-child(n+7){ transition-delay: 460ms; }

/* 見出しの右に伸びる罫線は、見出しが出たあとに左から伸びる */
.has-js [data-reveal].sec-head::after{
  scale: 0 1;
  transform-origin: left center;
  transition: scale .9s .2s var(--ease-out);
}
.has-js [data-reveal].sec-head.is-in::after{ scale: none; }

/* ---- ② ファーストビュー ---- */
@media (prefers-reduced-motion: no-preference){
  @keyframes fv-rise{
    from{ opacity: 0; translate: 0 24px; }
  }
  @keyframes fv-zoom{
    from{ transform: scale(1.06); }
  }

  /* 読み込み直後に1回だけ。コピー → バッジ → 注記の順に起きる */
  #fv-panel-home .fv__lead  { animation: fv-rise .9s .15s var(--ease-out) backwards; }
  #fv-panel-home .fv__badges{ animation: fv-rise .9s .35s var(--ease-out) backwards; }
  #fv-panel-home .fv__note  { animation: fv-rise .9s .50s var(--ease-out) backwards; }

  /* 2〜4枚目は、タブを押して表に出るたびに中身が起き上がる
     （.is-active が付いた瞬間にこの指定に当てはまるので、切り替えのたびに動く） */
  .fv-panel--side.is-active .fv-panel__title{ animation: fv-rise .7s .05s var(--ease-out) backwards; }
  .fv-panel--side.is-active .fv-panel__text { animation: fv-rise .7s .15s var(--ease-out) backwards; }
  .fv-panel--side.is-active .fv-panel__links{ animation: fv-rise .7s .25s var(--ease-out) backwards; }
  /* 写真はごくわずかに寄ってから止まる */
  .fv-panel--side.is-active .fv__media img  { animation: fv-zoom 1.6s var(--ease-out) backwards; }
}

/* ---- ③ 触れたときの反応 ---- */
/* 強み4枚：カードが浮き、写真がゆっくり寄る */
.strength-card{ transition: transform .4s var(--ease-out); }
.strength-card:hover{ transform: translateY(-6px); }
.strength-card:hover .strength-card__visual img{ transform: scale(1.05); }

/* りらの一日：写真 */
.sec-day__photo{ overflow: hidden; }
.sec-day__photo img{ transition: transform .7s var(--ease-out); }
.sec-day__photo:hover img{ transform: scale(1.04); }

/* ボタン */
.btn-pill{ transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), opacity .2s; }
.btn-pill:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* お知らせ：見出しが少し右へ出る */
.news-item__link:hover .news-item__title{ transform: translateX(6px); }
.news-item__title{ transition: color .15s, transform .3s var(--ease-out); }

/* 下部CTAのイベント：カードは浮かせ、写真だけ寄る */
.event-card{ transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.event-card__thumb img{ transition: transform .6s var(--ease-out); }
.event-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.event-card:hover .event-card__thumb img{ transform: scale(1.05); }

/* Instagram */
.ig-item img{ transition: transform .6s var(--ease-out), opacity .3s; }
.ig-item a{ overflow: hidden; }
.ig-item a:hover img{ transform: scale(1.06); }

/* よくある質問 */
.faq-item__q{ transition: background-color .2s; }
.faq-item__q:hover{ background: #D6E7F7; }

/* フッターのSNS */
.footer-sns a{ display: block; transition: transform .25s var(--ease-out); }
.footer-sns a:hover{ transform: translateY(-3px); }

/* 右下の固定CTA（PCのみ。スマートフォンは画面下の帯なので動かさない） */
@media (min-width: 768px){
  .cta-float__btn{ transition: transform .25s var(--ease-out), opacity .2s; }
  .cta-float__btn:hover{ transform: translateX(-6px); }
}

/* スクロールを始めたらヘッダーを少し締める（下の内容との境目を出す） */
.l-header{ transition: box-shadow .3s, background-color .3s; }
.l-header.is-scrolled{
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

/* ---- 動きを減らす設定／印刷では、隠さずそのまま見せる ---- */
@media (prefers-reduced-motion: reduce){
  .has-js [data-reveal],
  .has-js [data-reveal] > *{ opacity: 1 !important; translate: none !important; }
  .has-js [data-reveal].sec-head::after{ scale: none !important; }
}
@media print{
  [data-reveal],
  [data-reveal] > *{ opacity: 1 !important; translate: none !important; }
}