@charset "UTF-8";
/* 来店から入会までの流れ（このページ専用）
   カードの意匠は TOP「FOR BEGINNERS」のステップ（index.html の .step）と同じにしている（ver6〜）：
   ・「Step 01」は枠の中ではなく、枠のすぐ上・左寄せ
   ・角の丸い青い枠＋金の細い線、中の文字は白、料金は金
   ・枠と枠のあいだに金の下向き矢印
   並びは上から下へ1列のまま。以前あった各ステップ右側の写真枠と、丸い番号（1・2・3）は外した。
   ※ ver7〜：配色もTOPと同じ（青い面の上に半透明の白の枠） */
.flow{ --fstep-gap:78px; max-width:880px; margin:72px auto 0; }
/* ver7〜：セクションの背景・カードの配色を TOP の FOR BEGINNERS に合わせた
   （青い面＋ぼかした写真の上に、半透明の白のカード・薄い金の枠） */
.fflow{ overflow:hidden; }
.fflow .bgph{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fflow .bgph img{ width:100%; height:100%; object-fit:cover; filter:blur(14px) saturate(1.05); transform:scale(1.08); }
.fflow .bgph::after{ content:""; position:absolute; inset:0; background:rgba(0,44,168,.88); }
.fflow .wrap{ position:relative; z-index:1; }
/* 代表メッセージ（FLOWの上）。中央にまとめ、下に金の短い線をはさんでFLOWへつなぐ */
.fmsg-top{ max-width:820px; margin:0 auto 96px; text-align:center; }
.fmsg-top h2{ margin:0 0 22px; }
/* ver11：PC では「踊りたい！その気持ちさえあれば、誰でも踊れます。」を1行に（820px の枠より少し長いので、見出しだけ左右に少しはみ出させる） */
@media (min-width:921px){ .fmsg-top h2{ white-space:nowrap; margin-left:-40px; margin-right:-40px; } }
.fmsg-top p:not(.label):not(.sign) + p:not(.sign){ margin-top:16px; }
/* PCだけ効く改行（「安心してダンスの扉を開いてみてください。」を1行にまとめる）。SPでは改行しない */
.pc-br{ display:inline; }
@media (max-width:920px){ .pc-br{ display:none; } }   /* 本文の段落の間 */
.fmsg-top p:not(.label):not(.sign){ margin:0; font-size:16px; line-height:2; color:rgba(255,255,255,.9); }
.fmsg-top .sign{ margin:22px 0 0; font-family:var(--font-serif-jp); font-weight:600; font-size:17px; color:var(--color-white); }
.fmsg-top .sign small{ font-size:14px; font-weight:400; color:rgba(255,255,255,.72); margin-right:12px; }
.fmsg-top::after{ content:""; display:block; width:64px; height:1px; margin:64px auto 0; background:var(--color-accent); }
.fstep{ position:relative; padding:30px 36px 32px; border-radius:24px;
  border:1px solid rgba(212,175,55,.42);
  background:rgba(255,255,255,.22); color:var(--color-white); }
.fstep + .fstep{ margin-top:var(--fstep-gap); }
/* 枠と枠のあいだの矢印（下向き）。前の枠のすぐ下に置き、その下に次の「Step 0X」が来る */
.fstep + .fstep::before{ content:""; position:absolute; left:50%; top:calc(var(--fstep-gap) * -1 + 18px);
  transform:translate(-50%,-50%); width:0; height:0; pointer-events:none;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:12px solid var(--color-accent); }
/* 「Step 01」：枠の上に出す。TOPと同じ白 */
.fstep .fstep-no{ position:absolute; left:12px; bottom:100%; margin:0;
  font-family:var(--font-serif-en); font-weight:700; font-size:22.5px; line-height:1.5; letter-spacing:.2em;
  white-space:nowrap; color:var(--color-accent); }   /* 下の .fstep p（白・16px）に負けないよう .fstep を付けている */
.fstep h3{ margin:0 0 12px; font-size:21px; line-height:1.6; color:var(--color-white); }
.fstep p{ margin:0; font-size:16px; line-height:1.9; color:rgba(255,255,255,.9); }
.fstep p + p{ margin-top:10px; }
/* 料金は見出しのすぐ下に置く（TOPと同じ金色） */
.fstep .fee{ display:block; margin:0 0 12px; font-weight:500; font-size:22px; letter-spacing:.06em; color:var(--color-accent); }
.fstep .fnote{ color:rgba(255,255,255,.8); }
/* Step 01 の予約ボタン。TOPのステップ（.step-cta .btn）と同じ大きさ・同じ作り
   （幅は中の文字に合わせる。枠が狭くて入りきらないときだけ折り返す） */
.fstep-cta{ padding-top:18px; }
.fstep-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; }
/* 流れの最後に置くメッセージ。番号は付けず、金の二重罫で囲って
   斜めの光がゆっくり走る＋四隅で小さな星がまたたく */
.fmsg{ position:relative; overflow:hidden; margin-top:72px; border-radius:22px;
  padding:clamp(36px,4vw,54px) clamp(26px,4.5vw,64px); text-align:center;
  background:linear-gradient(180deg, #FFFFFF 0%, #FDFAF1 100%);
  border:1px solid rgba(212,175,55,.85);
  box-shadow:0 14px 40px rgba(0,20,80,.10), 0 0 30px rgba(212,175,55,.20); }
/* 内側の金の細罫 */
.fmsg::before{ content:""; position:absolute; inset:7px; border-radius:16px;
  border:1px solid rgba(212,175,55,.45); pointer-events:none; }
/* 斜めの光の帯。左から右へゆっくり通り抜ける */
.fmsg::after{ content:""; position:absolute; top:-60%; left:-45%; width:38%; height:220%;
  pointer-events:none; opacity:0; transform:rotate(18deg);
  background:linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(255,246,214,.55) 45%,
    rgba(212,175,55,.30) 60%, rgba(212,175,55,0) 100%);
  animation:fmsgShine 6s ease-in-out 1.4s infinite; }
@keyframes fmsgShine{
  0%{ left:-45%; opacity:0; } 10%{ opacity:1; }
  55%{ left:105%; opacity:.9; } 56%,100%{ opacity:0; } }
/* またたく小さな星 */
.fmsg .sparkles i{ position:absolute; width:18px; height:18px; opacity:0;
  background:linear-gradient(140deg, #F2DC96 0%, var(--color-accent) 55%, #B58E23 100%);
  pointer-events:none; filter:drop-shadow(0 0 7px rgba(212,175,55,.9));
  clip-path:polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
  animation:fmsgTwinkle 3.4s ease-in-out infinite; }
.fmsg .sparkles i:nth-child(1){ top:14px;    left:5%;   animation-delay:0s; }
.fmsg .sparkles i:nth-child(2){ top:26px;    right:7%;  animation-delay:.7s;  width:13px; height:13px; }
.fmsg .sparkles i:nth-child(3){ bottom:22px; left:10%;  animation-delay:1.5s; width:12px; height:12px; }
.fmsg .sparkles i:nth-child(4){ bottom:14px; right:5%;  animation-delay:2.2s; width:16px; height:16px; }
.fmsg .sparkles i:nth-child(5){ top:44%;     left:2.5%; animation-delay:1.1s; width:10px; height:10px; }
.fmsg .sparkles i:nth-child(6){ top:52%;     right:2.5%;animation-delay:2.7s; width:11px; height:11px; }
@keyframes fmsgTwinkle{
  0%,100%{ opacity:0; transform:scale(.4) rotate(0deg); }
  45%,55%{ opacity:1; transform:scale(1) rotate(40deg); } }
.fmsg p{ position:relative; z-index:1; margin:0;
  font-family:var(--font-serif-jp); font-weight:600;
  font-size:clamp(17px,1.5vw,21px); line-height:2; letter-spacing:.04em; color:var(--color-main); }
.fmsg p + p{ margin-top:14px; }
/* メッセージ枠の中のボタン（ご入会後のレッスン料金はこちら）と「入会金0円」 */
.fmsg-cta{ position:relative; z-index:1; margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.fmsg-cta .btn{ white-space:normal; text-align:center; line-height:1.55; padding:11px 22px; font-size:15px; max-width:100%; }
.fmsg-free{ display:inline-block;   /* ver8〜：枠なし・文字だけ */
  font-weight:700; font-size:16px; letter-spacing:.06em; line-height:1.5; color:var(--color-accent-text); }
/* ※ではじまる注記 */
.fnote{ margin:16px 0 0; padding:0; list-style:none;
  font-size:14.5px; line-height:1.85; color:var(--color-text-sub); }
.fnote li{ text-indent:-1em; padding-left:1em; }
/* 「入会金は0円」を本文の中で目立たせる（金の下線つき） */
.fs-free{ font-weight:700; color:var(--color-main);
  background:linear-gradient(transparent 62%, rgba(212,175,55,.34) 62%); }
@media (max-width:920px){
  .fmsg-top{ margin-bottom:64px; }
  .fmsg-top p:not(.label):not(.sign){ text-align:left; font-size:15px; }   /* 本文だけ左寄せ（見出し・署名は中央） */
  .fmsg-top::after{ margin:44px auto 0; }
  .flow{ --fstep-gap:74px; margin-top:62px; }
  .fstep{ padding:24px 22px 24px; border-radius:20px; }
  .fstep h3{ font-size:19px; }
  .fstep p:not(.fstep-no){ font-size:15px; }
  .fmsg{ margin-top:52px; border-radius:18px; }
}
/* 代表メッセージ */
.msg{ display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.msg .ph{ aspect-ratio:4/5; width:100%; }
.msg .sign{ margin:22px 0 0; font-family:var(--font-serif-jp); font-weight:600; font-size:17px; }
.msg .sign small{ font-size:14px; font-weight:400; color:var(--color-text-sub); margin-right:12px; }
@media (max-width:920px){
  .msg{ grid-template-columns:1fr; gap:24px; }
  .msg .ph{ max-width:380px; margin:0 auto; }
}