@charset "UTF-8";
/* ============================================================
   TOP専用スタイル（FV・ローディング・種目の横送り）
   共通コンポーネントは assets/css/style.css 側にある
   ============================================================ */

/* ---------- FV ---------- */
/* FVと信頼バッジ帯をまとめる器。背景はここが持つ */
.fvwrap{ position:relative; overflow:hidden; background:var(--color-deep); }
.fvwrap > .fv,.fvwrap > .badges{ position:relative; z-index:1; background:transparent; }
.fv{
  position:relative; overflow:hidden; background:var(--color-deep); color:var(--color-white);
  height:min(100vh, 880px); min-height:700px;
  /* 写真は中央。見出しは左上に重ねる */
  display:flex; align-items:center; justify-content:center;
  padding:104px clamp(24px,3.2vw,48px) 36px;
}
/* この2枚はFVの高さぶんしかないので、下端でそのまま切れるとバッジ帯との境目に
   横線が出る。下18%をマスクで抜いて、背景へなめらかにつなげる */
.fv::before,.fv::after{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%); }
.fv::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 640px 760px at 50% 52%, rgba(212,175,55,.16), transparent 66%); }
/* 見出しの下に敷く、左から効くうすい暗幕。写真に重なった文字を読みやすくする */
.fv::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(0,20,64,.6) 0%, rgba(0,20,64,.46) 22%, rgba(0,20,64,.2) 40%, rgba(0,20,64,0) 56%); }
.fv-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  opacity:0; animation:fadeIn 1.4s ease .1s forwards; }
.fv-bg img{ width:100%; height:100%; object-fit:cover;
  filter:blur(12px) saturate(1.05); transform:scale(1.07); opacity:1; }
.fv-bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(420px 260px at 84% 62%, rgba(0,44,168,.44), transparent 72%),
    radial-gradient(420px 460px at 20% 66%, rgba(0,44,168,.42), transparent 72%),
    linear-gradient(180deg, rgba(0,44,168,.50) 0%, rgba(0,44,168,.38) 48%, rgba(0,44,168,.62) 100%); }
@keyframes fadeIn{ to{ opacity:1; } }
.fv-ribbon{ position:absolute; inset:0; z-index:0; pointer-events:none; user-select:none; overflow:hidden; }
/* 背景の飾り文字（DANCE / EMOTION）。
   縁取りなしの、うすい白のベタ塗り。濃さは color の透明度で調整する */
.fv-ribbon span{ position:absolute; font-family:var(--font-serif-en); font-weight:700; line-height:1;
  color:rgba(255,255,255,.17); white-space:nowrap; letter-spacing:.02em; }
.fv-ribbon .r1{ font-size:min(15vw,208px); left:-2vw; top:6.5%; }
.fv-ribbon .r2{ font-size:min(15vw,208px); right:-2vw; bottom:4%; }
.fv-photo{
  position:relative; z-index:2; height:min(80vh, 690px); aspect-ratio:1109/1479;
  background:linear-gradient(180deg,#E8C9A8 0%,#D9C0A0 45%,#C89760 100%);
}
.fv-photo img{ width:100%; height:100%; object-fit:cover; }
.fv-photo::before{ content:""; position:absolute; inset:-14px; border:1px solid rgba(212,175,55,.85); pointer-events:none; }
.fv-photo::after{ content:""; position:absolute; inset:-26px; border:1px solid rgba(212,175,55,.30); pointer-events:none; }
/* キャッチコピー：横書きで左上に配置（中央の写真に少し重なる） */
.fv-head{ position:absolute; z-index:4;
  left:clamp(24px,3.4vw,52px); top:calc(clamp(104px,13.5vh,136px) + 100px);
  max-width:min(70vw, 720px); }
.fv-title{
  margin:0;
  font-family:var(--font-serif-jp); font-weight:600;
  font-size:clamp(30px, 3.8vw, 54px); line-height:1.5; letter-spacing:.06em;
  color:var(--color-white);
  text-shadow:0 2px 8px rgba(0,18,48,.85), 0 1px 3px rgba(0,18,48,.7), 0 0 30px rgba(0,18,48,.6);
}
/* 1行ぶんのまとまり。途中で折り返さない */
.fv-title .ln{ display:block; white-space:nowrap; }
/* 1文字ぶん。奥からゆっくり浮かび上がるアニメーションは下の .c で指定 */
.fv-title .c{ display:inline-block; }
.fv-sub{ margin:26px 0 0; font-size:17px; line-height:1.9; color:rgba(255,255,255,.94);
  text-shadow:0 2px 7px rgba(0,18,48,.8), 0 1px 2px rgba(0,18,48,.6); }
.fv-scroll{ position:absolute; left:44px; bottom:64px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-serif-en); font-size:12px; letter-spacing:.24em; color:var(--color-accent); }
.fv-scroll::after{ content:""; width:1px; height:48px; background:linear-gradient(var(--color-accent), transparent); }

/* ---------- 信頼バッジ帯 ---------- */
.badges{ position:relative; background:var(--color-deep); padding:40px 0 76px; }
/* FVの写真と6枚のカードのあいだの一文（教室の考え方）。
   写真の上に重なる帯なので白文字＋影。PCは中央ぞろえで行の長さをそろえ、
   スマホは行数が増えるので左ぞろえにして読みやすくする */
.fv-lead{ max-width:820px; margin:0 auto 38px; padding:0 24px;
  font-family:var(--font-serif-jp); font-weight:500;
  font-size:clamp(16px, 1.3vw, 18px); line-height:2.2; letter-spacing:.08em;
  color:var(--color-white); text-align:center;
  text-wrap:balance; word-break:auto-phrase;
  text-shadow:0 1px 12px rgba(0,16,54,.55); }
@media (max-width:700px){
  .fv-lead{ margin-bottom:30px; padding:0 28px; font-size:15px; line-height:2.05; letter-spacing:.05em;
    text-align:left; text-wrap:wrap; }
}
/* 6項目を3列×2段に。文字数がまちまちなので、枠の高さはそろえて中身は中央に置く */
.badges .in{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:14px;
  max-width:1060px; margin:0 auto; padding:0 24px; }
/* ゴールド地に白文字。真っ平らな金色だと白が沈むので、
   金の濃淡をつけた斜めのグラデーションにして、文字に軽い影を添えている */
/* 高さは低めに（上下の余白 9px）。補足の small も改行させず同じ行に並べる */
.badge{ margin:0; padding:9px 18px; border-radius:18px;
  border:1px solid rgba(255,238,190,.55);
  background:linear-gradient(150deg, #C9A231 0%, #FFC931 52%, #8E6C16 100%);
  box-shadow:0 6px 18px rgba(0,16,54,.26), inset 0 1px 0 rgba(255,246,214,.35);
  display:flex; flex-flow:row wrap; align-items:baseline; align-content:center; justify-content:center;
  column-gap:.7em;
  font-size:16px; font-weight:600; line-height:1.6; letter-spacing:.02em;
  color:var(--color-white); text-align:center;
  text-shadow:0 1px 2px rgba(60,40,0,.45); }
.badge small{ display:block; font-size:1em; font-weight:inherit;   /* ver8〜：「入会金0円」と同じ文字サイズ・太さ（以前13px・400） */
  letter-spacing:.04em; color:rgba(255,255,255,.86); }
@media (max-width:920px){ .badges .in{ grid-template-columns:repeat(2,1fr); gap:12px; } }
/* スマホ：1列で、カードの幅は画面幅の7割（中央寄せ）。
   いちばん長い「ダンス留学で培われた確かな技術」（15文字）が1行に収まるよう、
   左右の余白を詰め、幅の狭い端末では文字を少しだけ小さくする */
@media (max-width:560px){
  .badges .in{ grid-template-columns:minmax(0,70vw); justify-content:center; }
  /* 後ろにある 920px 以下の .badge 指定に負けないよう、.badges を付けて優先度を上げている */
  .badges .badge{ border-radius:14px; padding-left:10px; padding-right:10px; font-size:min(15px, 3.9vw); }
  .badges .badge small{ font-size:1em; }
}

/* ---------- 種目：自動スライダー（横送り） ----------
   .hslider が横スクロールの器で、カードは scroll-snap で中央に吸着する。
   自動送り・種目ボタンはページ下部のスクリプト側。
   ネイティブのスクロールを使っているので、スワイプ・キー操作もそのまま効く。
   中央のカードだけ --sc-on、両隣は --sc-off に拡縮して 1.2 倍ほどの差をつける
   （拡大は transform なので、まわりのレイアウトは動かない）。 */
#lessons{ position:relative;
  --cardw:min(820px, 80vw);
  --sc-on:1.12;    /* 中央のカード */
  --sc-off:.94;    /* 両隣のカード（1.12 ÷ 0.94 ≒ 1.2倍） */
}
.hslider{ position:relative; display:flex; align-items:stretch;
  gap:clamp(24px,3.2vw,46px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:34px calc((100% - var(--cardw)) / 2) 40px; }
.hslider::-webkit-scrollbar{ display:none; }
.hslider .card{ position:relative; flex:0 0 var(--cardw); width:var(--cardw); scroll-snap-align:center;
  flex-direction:row; align-items:stretch;
  /* 高さは下限だけ決めて、あとは中身に合わせて伸ばす。
     こうしないと文字が余白（padding）を食いつぶして窮屈に見える */
  min-height:clamp(340px, 40vh, 420px); height:auto;
  opacity:.48; transform:scale(var(--sc-off));
  transition:opacity .5s ease, transform .5s ease, box-shadow .5s ease, border-color .45s ease; }
.hslider .card.is-cur{ opacity:1; z-index:2; transform:scale(var(--sc-on));
  box-shadow:0 26px 52px rgba(0,20,80,.14), 0 8px 20px rgba(0,20,80,.08); }
/* 写真は 4:5 の縦長。幅（カードの40%）から高さが決まり、それがカードの高さになる。
   本文のほうが長いときだけ、写真も本文の高さまで伸びる（align-self:stretch）。
   画像は absolute にして、画像そのものの縦横比が枠に影響しないようにしている */
.hslider .card-photo{ width:40%; flex:0 0 40%; height:auto; aspect-ratio:4 / 5; align-self:stretch; }
.hslider .card-photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hslider .card-body{ flex:1; min-width:0; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; padding:42px 38px; }
#lessons .card-body h3{ margin-bottom:14px; }
#lessons .card-body p{ margin-bottom:14px; }
#lessons .tlink{ min-height:36px; }
/* 送り操作：種目名のボタン（スライダーの上に置く） */
.hfoot{ display:flex; align-items:center; justify-content:center;
  margin:0 0 26px; padding:0 20px; }
/* スライダーと、その上に重ねる送りボタン・スワイプ案内の器 */
.hstage{ position:relative; }
/* 左右の送りボタン。中央カードの縁の上にまたがる位置に置く
   （位置は --cardw と拡大率 --sc-on から計算しているので、幅が変わっても追従する） */
.harrow{ position:absolute; top:50%; z-index:4; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  /* 青い丸＋白い矢印（ホバーでも色は変えない）。
     ボタンやリンクに付く小さな丸囲み矢印（.btn-ico）は赤だが、ここの送りボタンだけ青にしている */
  background:var(--color-main); border:1px solid rgba(212,175,55,.75);
  box-shadow:0 10px 26px rgba(0,20,80,.18), 0 3px 8px rgba(0,20,80,.10);
  transition:transform .3s ease, opacity .3s ease, visibility .3s; }
/* ループしないので、進めない方向のボタンは消す（先頭では左、最後では右）。JS が付け外しする */
.harrow.is-off{ opacity:0; visibility:hidden; pointer-events:none; }
.harrow::before{ content:""; display:block; width:11px; height:11px;
  border-top:2px solid var(--color-white); border-right:2px solid var(--color-white); }
.harrow--prev{ left:calc(50% - var(--cardw) * var(--sc-on) / 2); }
.harrow--prev::before{ transform:rotate(-135deg); margin-left:4px; }
.harrow--next{ left:calc(50% + var(--cardw) * var(--sc-on) / 2); }
.harrow--next::before{ transform:rotate(45deg); margin-right:4px; }
.harrow:hover{ transform:translate(-50%,-50%) scale(1.07); }
.harrow:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; }
.htabs{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.htabs button{ --dc:var(--color-main);
  min-height:44px; padding:9px 20px; border-radius:999px; background:var(--color-white);
  border:1px solid var(--color-border); color:var(--color-text);
  font-family:var(--font-sans-jp); font-size:14.5px; font-weight:700; letter-spacing:.04em;
  line-height:1.4; white-space:nowrap;
  transition:background-color .3s ease, border-color .3s ease, color .3s ease; }
.htabs button:hover{ border-color:var(--dc); color:var(--dc); }
.htabs button.is-on{ background:var(--dc); border-color:var(--dc); color:var(--color-white); }
.htabs button:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
/* カード見出しまわりの装飾：金罫の英字ラベル＋大きめの明朝見出し＋背景の飾り数字 */
#lessons .card-body{ position:relative; z-index:0; }
#lessons .card-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 12px;
  font-family:var(--font-serif-en); font-weight:400; font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--color-accent-text); }
#lessons .card-eyebrow::before{ content:""; width:22px; height:1px; background:var(--color-accent); flex:0 0 22px; }
#lessons .card-body h3{ font-size:27px; line-height:1.5; }
/* 見出し下の金の短い線は ver6 で廃止（「詳しく見る」の下線は残している）。
   線があったぶんの間隔は、見出しの下余白で補っている */
/* ホバー：拡大したままふわりと浮き上がる */
#lessons .card.is-cur:hover{ transform:scale(var(--sc-on)) translateY(-8px);
  box-shadow:0 32px 60px rgba(0,20,80,.18), 0 10px 22px rgba(0,20,80,.10);
  border-color:rgba(212,175,55,.55); }
#lessons .card-photo img{ filter:grayscale(1) contrast(1.04);
  transition:filter .55s ease, transform .7s ease; }
#lessons .card.is-cur .card-photo img{ filter:grayscale(0) saturate(1.06) contrast(1.02); }
#lessons .card.is-cur:hover .card-photo img{ transform:scale(1.04); }
@media (hover:none){ #lessons .card-photo img{ filter:saturate(1.06) contrast(1.02); } }
/* タブレット以下：カードは写真が上・文章が下の縦組みにして幅いっぱいに */
@media (max-width:920px){
  /* 縦組みで背が高くなるので、拡大率はひかえめにして上下の余白を確保する */
  #lessons{ --cardw:min(520px, 76vw); --sc-on:1.06; --sc-off:.885; }
  .hslider{ gap:clamp(20px,3.4vw,32px); padding-block:30px 34px; }
  .hslider .card{ flex-direction:column; height:auto; }
  .hslider .card-photo{ width:auto; flex:none; height:52vw; max-height:320px; aspect-ratio:auto; }
  .hslider .card-body{ padding:34px 24px 32px; }
  .hfoot{ margin:0 0 20px; }
  .htabs{ gap:6px; }
  .htabs button{ padding:8px 13px; font-size:13.5px; }
}
@media (max-width:767px){
  /* スマホでも左右の送りボタンを出す（スワイプでも送れる）。
     ボタンは写真の下の端あたり（写真と文章の境目）に置く。
     写真は正方形（一辺＝--cardw）なので、下の端は上から --cardw。30px は .hslider の上余白。
     画面端で切れないよう、ボタンはひとまわり小さくする
     ※「スライドできます」の案内ポップアップは ver6 で廃止 */
  .harrow{ width:40px; height:40px; top:calc(30px + var(--cardw)); }
  /* スマホ：カードの写真は正方形（幅＝カードの幅 --cardw、高さも同じ）。
     説明文は 15px にする */
  .hslider .card-photo{ height:auto; max-height:none; aspect-ratio:1 / 1; }
  #lessons .card-body p{ font-size:15px; line-height:1.9; }
  .harrow::before{ width:9px; height:9px; }
  .harrow--prev::before{ margin-left:3px; }
  .harrow--next::before{ margin-right:3px; }
  /* スマホ：カードの「ふわっ」と出る演出（薄い→濃い・小さい→大きい）はなくす。
     中央のカードかどうかはスクロールが止まってから決まるので、
     スワイプ直後はしばらく薄いままになり、表示が遅く見えるため。
     全部のカードを最初から同じ濃さ・同じ大きさにしておく（横に送る動きはそのまま）。
     拡大（1.06倍）をやめるぶん、カードの幅を広げて見た目の大きさを保つ */
  #lessons{ --cardw:min(550px, 80vw); --sc-on:1; --sc-off:1; }
  .hslider .card,
  .hslider .card.is-cur,
  #lessons .card.is-cur:hover{ opacity:1; transform:none; transition:none;
    box-shadow:0 14px 30px rgba(0,20,80,.12), 0 4px 12px rgba(0,20,80,.07); }
  #lessons .card-photo img,
  #lessons .card.is-cur .card-photo img,
  #lessons .card.is-cur:hover .card-photo img{ filter:saturate(1.06) contrast(1.02); transform:none; transition:none; }
}
@media (max-width:480px){ #lessons{ --cardw:84vw; } }

/* ---------- スタッフ紹介（TOP）：2枚（神谷 敬一・千尋／野本 ひとみ）、写真と名前だけ ---------- */
/* 共通CSSは3枚横並びの指定なので、TOPだけ2枚用に上書きする。2枚を中央に寄せ、写真は少し高めに */
#staff .staff{ grid-template-columns:repeat(2, 1fr); max-width:940px; margin-left:auto; margin-right:auto; }
#staff .staff-card .ph{ height:340px; margin-bottom:18px; }
#staff .staff-card h3{ margin:0; text-align:center; }
/* 名前の左の役職（代表／スタッフ）。名前より小さく（ver7〜） */
#staff .staff-card h3 .srole{ margin:0 .7em 0 0; font-size:15px; font-weight:500; letter-spacing:.06em; vertical-align:.12em; }
@media (max-width:920px){
  #staff .staff{ grid-template-columns:1fr; max-width:520px; }
  #staff .staff-card .ph{ height:auto; aspect-ratio:4 / 3; }
}

/* ---------- ギャラリー：写真の自動スライダー（ループ） ---------- */
/* 写真の列（.gflow-track）を右から左へ一定の速さで流し続ける。
   JSが同じ写真の並びを後ろに2組複製するので、1組ぶん流れたところで先頭に戻しても
   継ぎ目が見えない（＝ループ）。マウスを乗せている間・指で触れている間は止まる。
   ・写真の大きさ … --gw（幅）。高さは幅の 0.8 倍
   ・流れる速さ   … --gal-dur（1組が流れきる秒数。小さくすると速くなる） */
.gflow{ --gw:clamp(210px, 20vw, 300px); --gal-gap:20px; --gal-dur:52s;
  overflow:hidden; margin-top:36px; }
.gflow-track{ display:flex; gap:var(--gal-gap); width:max-content; will-change:transform; }
.gflow-track figure{ flex:0 0 var(--gw); width:var(--gw); margin:0; }
.gflow-track .ph{ height:calc(var(--gw) * .8); }
/* 3組並んだうちの1組ぶん（写真の幅＋すき間 × 枚数）だけ左へ送る */
@keyframes galFlow{ to{ transform:translateX(calc(-100% / 3 - var(--gal-gap) / 3)); } }
.gflow-track.is-run{ animation:galFlow var(--gal-dur) linear infinite; }
@media (hover:hover){ .gflow:hover .gflow-track{ animation-play-state:paused; } }
.gflow.is-hold .gflow-track{ animation-play-state:paused; }
@media (max-width:767px){ .gflow{ --gw:58vw; --gal-gap:14px; --gal-dur:44s; margin-top:28px; } }

/* ---------- お知らせ・ブログ：見出しと「すべて見る」を金に ---------- */
/* 青い面の上なので、シャンパンゴールド（--color-accent）をそのまま使える。
   共通の .s-deep .tlink（白）より優先させるため #news を付けている */
#news .sec-head h2,
#news .sec-head .tlink{ color:var(--color-accent); }

/* ---------- 初めての方へ（深紺＋透かし背景） ---------- */
/* ボタンの上に置く誘導の一言 */
/* ボタンは2段組み。2段目は文字数が多いので折り返しを許可する */
.first-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; }
#beginner .steps + .first-cta{ padding-top:15px; }
.first-cta--sub{ margin-top:14px; }
.first-cta .btn--wrap{ white-space:normal; text-align:center; line-height:1.55;
  padding:11px 22px; font-size:15px; max-width:100%; }
/* 見出しの上に置く一言。深紺の面なので金をそのまま使える */
/* ver6：ここの3つの文字の大きさは、もとの 34px（920px以下 25px）を基準に変えている
   ・「初心者大歓迎！」      … 1.2倍にしたあと、さらに1.5倍（62px／920px以下 最大45px。
                               狭い画面では1行に収まるよう 11.2vw で縮む）
   ・「入会金0円」のピル     … 0.6倍（20px／920px以下 15px）
   ・「はじめての方のレッスンの流れ」… 0.6倍（20px／920px以下 16px） */
.first-catch{ margin:0 0 10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px;
  font-family:var(--font-serif-jp); font-weight:600;
  font-size:62px; line-height:1.35; letter-spacing:.08em;
  color:var(--color-accent); }
/* 「初心者大歓迎！」の横に置く金のピル */
.first-free{ display:inline-flex; align-items:center; padding:4px 16px; border-radius:999px;
  border:1px solid rgba(212,175,55,.85); background:rgba(212,175,55,.15);
  font-family:var(--font-sans-jp); font-weight:700; font-size:20px;
  letter-spacing:.06em; line-height:1.5; color:var(--color-accent); }
/* キャッチの下の小見出し（共通の h2 より小さくしている） */
.first h2.first-sub{ font-size:20px; line-height:1.7; letter-spacing:.06em; margin:0 0 22px; }
.first .bgph{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.first .bgph img{ width:100%; height:100%; object-fit:cover; filter:blur(14px) saturate(1.05); transform:scale(1.08); }
.first .bgph::after{ content:""; position:absolute; inset:0; background:rgba(0,44,168,.88); }
.first .wrap{ position:relative; z-index:1; }
/* 以前は左にエンブレム、右に本文の2カラムだった。エンブレムを外したので1カラム */
.first-grid{ display:block; }
/* 体験までの流れ：3枚のカードを金の矢印でつなぐフロー図 */
.steps{ --step-gap:clamp(26px,3vw,40px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--step-gap);
  /* 上の余白は、枠の上に出す「Step 01」のぶん（約34px）を見込んで広めにとる */
  margin:70px 0 30px; }
.step{ position:relative; display:flex; flex-direction:column;
  padding:26px 26px 24px; border-radius:24px;
  border:1px solid rgba(212,175,55,.42);
  background:rgba(255,255,255,.22); }
/* カードとカードの間に置く矢印（右向き） */
.step + .step::before{ content:""; position:absolute; top:50%; left:calc(var(--step-gap) / -2);
  transform:translate(-50%,-50%); width:0; height:0; pointer-events:none;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left:12px solid var(--color-accent); }
/* 「Step 01」は枠の中ではなく、枠のすぐ上（左寄せ）に出す。
   HTML上は .step の中に置いたまま、絶対配置で枠の外へ出している */
.step-no{ position:absolute; left:12px; bottom:100%;
  font-family:var(--font-serif-en); font-weight:700; letter-spacing:.2em; white-space:nowrap; }
/* 文字はもとの 15px の1.5倍（22.5px）。下の .step p（15px／行間1.8）より優先させるため
   .step を付けている。色は .step p の白がそのまま効いている。
   行間のぶんで、文字と枠のあいだに 5px ほどのすき間ができる */
.step .step-no{ font-size:22.5px; line-height:1.5; color:var(--color-accent); }
.step h3{ color:var(--color-white); font-size:19px; margin-bottom:10px; }
.step p{ margin:0; font-size:15px; line-height:1.8; color:rgba(255,255,255,.85); }
/* 料金・ボタンのかたまりはカードの下端にそろえる（3枚の位置が合う） */
.step-price,.step-cta{ margin-top:auto; padding-top:16px; }
.step .fee{ display:block; font-weight:500; font-size:22px; letter-spacing:.06em;
  color:var(--color-accent); }
/* 「（25分）」は金額より小さく添える */
.step .fee small{ font-size:15px; letter-spacing:.04em; margin-left:2px; }
/* カードの中に置く予約ボタン。幅は中の文字に合わせる（枠いっぱいには広げない）。
   枠が狭くて入りきらないときだけ折り返す */
.step-cta .btn{ width:auto; max-width:100%; white-space:normal; text-align:center; line-height:1.5;
  min-height:46px; padding:9px 20px; font-size:15px; }

/* ============================================================
   ローディング：黒背景に3枚の切り抜き写真＋センターロゴ
   ============================================================ */
html.is-loading{ overflow:hidden; }
html.is-loading .fv *,html.is-loading .fv-bg,html.is-loading .float-badge,html.is-loading .spbar{ animation-play-state:paused !important; }
/* 黒地：中央だけわずかに温かい、舞踏室のような闇 */
#loader{ position:fixed; inset:0; z-index:9999; contain:layout paint; overflow:hidden;
  background:radial-gradient(ellipse 92% 72% at 50% 46%, #2A2422 0%, #1B1817 52%, #100E0D 100%); }
/* 中央からにじむ金の光（ステージのスポット）。写真の背面に敷く */
#loader::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 54% at 50% 44%, rgba(212,175,55,.17), transparent 70%),
    radial-gradient(ellipse 30% 42% at 13% 74%, rgba(212,175,55,.075), transparent 72%),
    radial-gradient(ellipse 30% 42% at 87% 72%, rgba(212,175,55,.075), transparent 72%);
  opacity:0; animation:klGlow 2.4s ease-out .15s forwards; }
@keyframes klGlow{ to{ opacity:1; } }
#loader.is-out{ opacity:0; transition:opacity 1.05s ease; }
.kl{ position:absolute; bottom:0; }
.kl .in{ display:block; height:100%; opacity:0; }
.kl.b .in{ transform:translateY(30px) scale(.985); }
.kl.a .in{ transform:translateX(110px); }
.kl.c .in{ transform:translateX(-110px); }
.kl.d .in{ transform:translateY(40px); }
/* 共通CSSの img{max-width:100%} が効くと横に潰れるので解除する */
.kl img{ display:block; height:100%; width:auto; max-width:none; }
/* --edge：左右の写真を画面端から離す量。1440px までは従来どおり 2vw、
   それより広い画面では内側に寄せて3組が散らばらないようにする */
#loader{ --edge:max(2vw, (100vw - 1440px) * .26); }
.kl.a{ left:var(--edge); height:68vh; bottom:2vh; z-index:5; }
/* kamiyaload2_t は一番背面。背を高くして頭から上だけをのぞかせる */
.kl.d{ left:calc(var(--edge) + 3vw); height:min(88vh,128vw); bottom:2vh; z-index:1; }
/* 中央は右の写真に寄せてひと続きの群像に見せる */
.kl.b{ left:50%; transform:translateX(-38%); height:98vh; z-index:3; }
/* kamiyaload4 は全身が入った縦長写真（約0.46:1）。画面の端で切れないよう
   右に余白を取り、狭い画面でも幅が張り出さないよう vw でも上限をかける */
.kl.c{ right:calc(var(--edge) + 4vw); height:min(88vh,64vw); bottom:0; z-index:2; }
.kl-logo{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(48vw,620px); z-index:5; opacity:0;
  filter:drop-shadow(0 0 26px rgba(0,0,0,.65)); }
.kl-logo picture{ display:block; }
.kl-logo img{ width:100%; height:auto; display:block; }   /* ブランドカラーの原色ロゴ */
@keyframes klIn{ to{ opacity:1; transform:translate(0,0) scale(1); } }
.kl.b .in{ animation:klIn 1.1s ease-out .30s forwards; }
.kl.d .in{ animation:klIn 1.0s ease-out .56s forwards; }
.kl.a .in{ animation:klIn 1.0s ease-out .82s forwards; }
.kl.c .in{ animation:klIn 1.0s ease-out 1.22s forwards; }
@keyframes klLogo{ to{ opacity:1; } }
.kl-logo{ animation:klLogo 1.0s ease 2.0s forwards; }
/* タブレット：横並びのまま高さだけ調整 */
@media (max-width:920px){
  .kl.a{ left:-6vw; height:40vh; bottom:1vh; }
  .kl.d{ left:-2vw; height:min(58vh,86vw); bottom:1vh; }
  .kl.b{ height:74vh; }
  .kl.c{ right:2vw; height:min(66vh,48vw); }
  .kl-logo{ width:74vw; top:42%; }
}
/* スマホ：4枚を四隅に振り分けた群像に組む
   （左上＝女性／右上＝ペア／左下＝車いす／右下＝タンゴ） */
@media (max-width:767px){
  #loader{ display:block; padding:0; }
  .kl.a,.kl.b,.kl.c,.kl.d{ position:absolute; }
  /* 左上・最背面：ピンストライプの女性（kamiyaload2_t） */
  .kl.d{ height:54vh; top:-1vh; left:-15vw; right:auto; bottom:auto; transform:none; z-index:1; }
  /* 右上：組んで踊るペア */
  .kl.b{ height:52vh; top:3vh;  right:-14vw; left:auto; bottom:auto; transform:none; z-index:2; }
  /* 左下：車いすダンス */
  .kl.a{ height:41vh; bottom:1vh; left:-10vw; right:auto; top:auto;
         transform:none; z-index:3; }
  /* 右下・最前面：タンゴ（kamiyaload4）。縦長なので vw 側にも上限をかけ、
     画面の右端で切れないよう余白を残す */
  .kl.c{ height:min(47vh,104vw); bottom:0; right:2vw; left:auto; top:auto;
         transform:none; z-index:4; }
  /* 登場の起点も配置にあわせる（外側から内へ寄る） */
  .kl.b .in{ transform:translateX(-40px); }
  .kl.d .in{ transform:translateX(40px); }
  .kl.a .in{ transform:translateY(28px) scale(.99); }
  .kl.c .in{ transform:translateY(28px) scale(.99); }
  /* 横長ロゴ（約5.3:1）なので、スマホでは幅を広くとって文字の高さを確保する。
     写真に重なる面積が広いので、影を濃くして輪郭を立てる */
  .kl-logo{ width:min(88vw,420px); top:calc(50% - 15px);   /* ver11：15px 上へ（以前 50%） */
   
    filter:drop-shadow(0 0 16px rgba(0,0,0,.92)) drop-shadow(0 0 42px rgba(0,0,0,.72)); }
}
/* 縦の短い端末では全体を一回り小さく */
@media (max-width:767px) and (max-height:680px){
  .kl.d{ height:47vh; } .kl.b{ height:45vh; } .kl.a{ height:36vh; }
  .kl.c{ height:min(41vh,104vw); }
}
/* 「動きを減らす」設定（Windowsの“アニメーション効果”オフ等）でも、
   ローディングは通常どおりアニメーションさせる（ver6〜。設定による分岐はしない）。
   下の html.ld-static は保険。アニメーションが実際に止められている環境
   （ブラウザ拡張で無効化、CSSの読み込み失敗 など）をスクリプトが検知したときだけ付き、
   「真っ黒のまま止まる」のを防いで静止画として見せてから閉じる */
html.ld-static #loader .kl .in{ opacity:1 !important; transform:none !important; }
html.ld-static #loader .kl-logo{ opacity:1 !important; }
html.ld-static #loader::before{ opacity:1 !important; }
/* 静止表示のときも、閉じる瞬間だけは短いフェードを許可する。
   不透明度の変化は「動き」ではないので、動きを減らす設定でも不快になりにくく、
   黒画面からファーストビューへ一瞬で切り替わるギラつきを防げる */
html.ld-static #loader.is-out{ transition:opacity .4s ease !important; }

/* ---------- FVの出現 ---------- */
.fv-photo{ opacity:0; animation:rise .9s ease-out .25s forwards; }
/* キャッチコピーは1文字ずつ、奥（ぼけて小さい状態）から順に手前へ出てくる。
   上下の移動はさせず、ぼけが晴れながらその場で立ち上がる。
   読ませたいので1文字あたり0.09秒ずつ遅らせ、ゆっくり見せる。
   遅延の番号は HTML 側の style="--i:0,1,2…" で渡している */
@keyframes fvChar{
  from{ opacity:0; transform:scale(.94); filter:blur(7px); }
  to  { opacity:1; transform:none;       filter:blur(0); }
}
.fv-title .c{ opacity:0; will-change:transform, opacity, filter;
  animation:fvChar .85s cubic-bezier(.2,.75,.3,1) both;
  animation-delay:calc(.35s + var(--i) * .09s); }
.fv-sub{ opacity:0; animation:rise .9s ease-out 2.3s forwards; }
/* 右下のひよこは、サブコピー「愛媛県松山市の本格ダンス教室」が
   出そろうタイミング（2.3秒＋0.9秒＝3.2秒）に合わせて登場させる。
   共通CSSの 1.4秒 をこのページだけ上書きしている。
   スマホでは電話ボタンの追従バーも同じタイミングでひとまとまりに出す */
.float-badge,.spbar{ animation-delay:3.2s; }
.fv-scroll,.fv-ribbon{ opacity:0; animation:rise .9s ease-out 1.0s forwards; }
.fv-ribbon{ animation-delay:.15s; }

/* ---------- Responsive（FV・初めての方へ） ---------- */
@media (max-width:1180px){
  .fv-head{ max-width:min(66vw, 560px); }
}
@media (max-width:860px){
  /* 縦に積むときは、枠と枠のあいだに次の「Step 0X」が入るので間隔を広げる */
  .steps{ grid-template-columns:1fr; --step-gap:74px; margin-top:62px; }
  .step{ padding:24px 22px 22px; border-radius:20px; }
  /* 縦に積むので矢印も下向きにする。前の枠のすぐ下（間隔の上寄り）に置き、
     その下に次の「Step 0X」が来る */
  .step + .step::before{ top:calc(var(--step-gap) * -1 + 18px); left:50%;
    border-left:8px solid transparent; border-right:8px solid transparent;
    border-top:12px solid var(--color-accent); border-bottom:0; }
}
@media (max-width:920px){
  /* 共通CSSの h2 が 25px になる幅。キャッチはその1.2倍、小見出しは約0.6倍 */
  .first-catch{ font-size:min(45px, 11.2vw); }
  .first-free{ font-size:15px; }
  .first h2.first-sub{ font-size:16px; margin-bottom:18px; }
  /* SPは「見出し → サブコピー → 写真」の縦並び。
     見出しの上から写真の額縁の下までが画面1枚に収まるよう、
     写真は残りの高さいっぱいまで伸び縮みさせる。
     縦横比（1109:1479）は保つので、背の低い端末では左右に余白ができる。 */
  /* 高さは --fv-h（開いたときの画面の高さ・px。<body> 冒頭のスクリプトが入れる）で固定。
     スクリプトが動かない場合だけ 100vh になる */
  .fv{ height:auto; min-height:var(--fv-h, 100vh);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:78px 8px 34px; }   /* 下は詰める。背の低い端末では写真が浮くボタンに重なってよい */
  .fv-ribbon .r1{ font-size:26vw; top:7%; }
  .fv-ribbon .r2{ font-size:26vw; bottom:4%; }
  .fv::after{ display:none; }   /* SPは重ならないので暗幕は不要 */
  .fv-head{ position:static; left:auto; top:auto; flex:0 0 auto;
    max-width:min(560px,100%); margin:0 auto 16px; text-align:center; }
  .fv-title{ font-size:clamp(23px, 6.6vw, 32px); line-height:1.38; letter-spacing:.03em; }
  .fv-sub{ margin-top:9px; }
  /* flex:1 1 0 で残りの高さを受け取り、幅は縦横比から決まる。
     max-height は「幅が95vwを超えない」ための上限（95vw × 1479/1109）。
     額縁を細めにして、95vw ＋ 額縁9px で画面端まで残り約1px まで攻めている */
  .fv-photo{ flex:1 1 0; min-height:0; width:auto; height:auto;
    max-height:min(calc(95vw * 1.3336), 700px); margin:0 auto; }
  .fv-photo::before{ inset:-5px; } .fv-photo::after{ inset:-9px; }
  .fv-scroll{ display:none; }
  .badge{ font-size:15px; padding:8px 16px; }
}