/* pages.css — セクション固有 */

/* ===== 00 FV ===== */
.fv { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--dark); overflow: hidden; }
.fv__bg { position: absolute; inset: 0; }
.fv__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fv__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30,13,7,.38) 0%, rgba(30,13,7,0) 26%, rgba(30,13,7,0) 42%, rgba(30,13,7,.55) 66%, rgba(30,13,7,.9) 100%); }
.fv__logo { position: absolute; top: 22px; left: var(--gut); z-index: 2; }
.fv__logo img { height: 34px; width: auto; }
.fv__logo small { display: block; margin-top: 4px; font-family: var(--ff-en); font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.9); }
.fv__body { position: relative; z-index: 2; padding: 0 var(--gut) calc(28px + env(safe-area-inset-bottom)); max-width: calc(var(--col) + var(--gut) * 2); }
.fv__tag { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.7); font-family: var(--ff-en); font-size: 12px; letter-spacing: .18em; }
.fv__title { font-family: var(--ff-min); font-size: var(--fs-hero); font-weight: 500; line-height: 1.45; letter-spacing: .05em; }
.fv__sub { margin-top: 16px; font-size: 15px; line-height: 1.95; color: rgba(255,255,255,.92); }
.fv__trust { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 22px; font-size: 13px; color: rgba(255,255,255,.92); }
.fv__trust li { display: flex; align-items: center; gap: 6px; }
.fv__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.fv .btn { background: var(--cv); color: var(--cv-ink); }
.fv .btn:hover { background: #B90D11; }
.fv__note { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.75); }
@media (min-width: 960px) {
  .fv { min-height: 92svh; }
  .fv__body { margin-left: max(var(--gut), calc((100vw - var(--wide)) / 2)); padding-bottom: 64px; }
  .fv .cta { margin-inline: 0; }
}

/* ===== 01 三大トラブル ===== */
.trouble__band { text-align: center; margin-bottom: 22px; }
.trouble .h2 { text-align: center; }
.trouble .lead { text-align: center; }
.tcards { display: grid; gap: clamp(36px, 9vw, 48px); margin-top: var(--sp-blk); }
.tcard__ph { aspect-ratio: 4 / 5; }
.tcard__name { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.tcard__name b { font-family: var(--ff-min); font-size: 26px; font-weight: 500; letter-spacing: .06em; }
.tcard__name span { font-family: var(--ff-en); font-size: 12px; letter-spacing: .14em; color: var(--gold-deep); }
.tcard__desc { margin-top: 8px; font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.tcard__stat { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tcard__stat b { flex: none; font-family: var(--ff-en); font-size: clamp(52px, 15vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--red); }  /* 数字は赤で一番大きく（岩田さん 2026-10-04「数字めだたせる」） */
.tcard__stat b small { font-size: .42em; font-weight: 500; margin-left: 3px; }
.tcard__stat span { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink); white-space: nowrap; text-wrap: wrap; }  /* 改行は <br> で決め打ち。iOS Safari の pretty が細い flex 子を詰めて「手荒れ／に悩みが」と割るため */
.tcard__src { margin-top: 6px; font-size: 11px; line-height: 1.7; color: var(--ink-3); }
@media (min-width: 960px) {
  .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* ===== 02 暗転：数字の落差 ===== */
.gap { text-align: center; }
.gap__nums { display: grid; gap: 6px; margin: var(--sp-blk) auto 0; max-width: 420px; }
.gap__row { padding: 18px 0; }
.gap__row + .gap__row { border-top: 1px solid rgba(255, 255, 255, .18); }
.gap__num { display: block; font-family: var(--ff-en); font-size: var(--fs-num); font-weight: 300; line-height: 1; letter-spacing: -.01em; color: var(--dark-ink); }
.gap__num small { font-size: .4em; margin-left: .05em; }
.gap__row--hl .gap__num { color: var(--gold); }
.gap__label { display: block; margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.gap__but { font-family: var(--ff-en); font-size: 14px; letter-spacing: .3em; color: rgba(255, 255, 255, .6); }
.gap__src { margin-top: 18px; }
.gap__turn { margin-top: var(--sp-blk); font-family: var(--ff-min); font-size: var(--fs-h3); line-height: 1.8; }

/* ===== 03 浸るだけ：4つの時間 ===== */
.solution .head { text-align: center; }
.steps { display: grid; gap: clamp(40px, 10vw, 56px); counter-reset: none; }
.step { display: grid; gap: 16px; }
.step__ph { aspect-ratio: 4 / 5; }
.step__verb { display: flex; align-items: center; gap: 14px; }
.step__verb b { font-family: var(--ff-min); font-size: 30px; font-weight: 500; letter-spacing: .1em; }
.step__verb span { font-size: 13px; color: var(--gold-deep); letter-spacing: .08em; }
.step__verb::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.step__txt { font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.steps-note { margin-top: 28px; text-align: center; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
  .step:nth-child(even) { margin-top: 80px; }
}

/* ===== 04 コース ===== */
.courses .head { text-align: center; }
.scope { margin: 0 auto var(--sp-blk); max-width: 460px; padding: 22px 20px 16px; background: var(--bg); border: 1px solid var(--line); }
.scope__cap { margin-bottom: 14px; font-size: 13px; color: var(--ink-2); }
.scope__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.scope__row span:first-child { font-family: var(--ff-en); }
.scope__bar { position: relative; height: 12px; background: var(--bg-2); }
.scope__bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.scope__axis { display: flex; justify-content: space-between; margin-left: 108px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.ccards { display: grid; gap: 20px; }
.ccard { position: relative; padding: 28px 22px 24px; background: var(--bg); border: 1px solid var(--line); }
.ccard--rec { border: 2px solid var(--ink); }
.ccard__ribbon { position: absolute; top: -14px; left: 20px; padding: 4px 12px; background: var(--red); color: #fff; font-size: 12px; letter-spacing: .1em; }
.ccard__for { font-size: 13px; color: var(--gold-deep); letter-spacing: .06em; }
.ccard__name { margin-top: 6px; font-family: var(--ff-en); font-size: 23px; font-weight: 400; letter-spacing: .02em; line-height: 1.3; }
.ccard__ja { margin-top: 4px; font-family: var(--ff-min); font-size: 16px; color: var(--ink-2); }
.ccard__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 12px; padding: 12px 0; border-block: 1px solid var(--line); }
.ccard__price b { font-family: var(--ff-en); font-size: 36px; font-weight: 400; line-height: 1; white-space: nowrap; }
.ccard__price b small { font-size: 16px; margin-left: 2px; }
.ccard__price em { font-style: normal; font-family: var(--ff-en); font-size: 30px; font-weight: 300; white-space: nowrap; }
.ccard__price span { font-size: 12px; color: var(--ink-3); }
.ccard__range { font-size: 14px; font-weight: 500; }
.ccard__desc { margin-top: 6px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.ccards + .cta { margin-top: var(--sp-blk); }
/* 90分はHPB未掲載のため電話予約（2026-10-04 岩田さん決裁・HPBに載ったら外す） */
.ccard__tel { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.8; color: var(--ink); }
.ccard__telbtn { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; font-size: 14px; letter-spacing: .06em; }
.courses__more { margin-top: 18px; text-align: center; }
@media (min-width: 960px) {
  .ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* ===== 05 続ける喜び（全幅写真） ===== */
.joy { position: relative; color: #fff; }
.joy__ph { position: relative; aspect-ratio: 3 / 4; max-height: 92svh; width: 100%; overflow: hidden; }
.joy__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.joy__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30,13,7,0) 45%, rgba(30,13,7,.82) 100%); }
.joy__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 var(--gut) clamp(32px, 9vw, 64px); max-width: calc(var(--col) + var(--gut) * 2); margin-inline: auto; }
.joy__txt .h2 { color: #fff; }
.joy__txt p { margin-top: 14px; font-size: 15px; line-height: 2; color: rgba(255,255,255,.92); }
.joy__txt .ph__note { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.75); }
@media (min-width: 960px) { .joy__ph { aspect-ratio: 16 / 9; } }

/* ===== 06 サロン ===== */
.salon__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--sp-blk); }
.salon__grid .ph:first-child { grid-column: 1 / -1; }
.salon__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--sp-blk); background: var(--line); border: 1px solid var(--line); }
.salon__facts li { padding: 16px 6px; background: var(--bg); text-align: center; }
.salon__facts b { display: block; font-family: var(--ff-en); font-size: 26px; font-weight: 400; line-height: 1.2; }
.salon__facts b small { font-family: var(--ff-ja); font-size: 13px; }
.salon__facts span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 960px) {
  .salon__grid { grid-template-columns: 2fr 1fr 1fr; }
  .salon__grid .ph:first-child { grid-column: auto; grid-row: span 1; }
}

/* ===== 07 ネイリスト ===== */
.staff__list { display: grid; gap: clamp(44px, 11vw, 60px); }
.person { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; }
.person__ph { aspect-ratio: 3 / 4; }
.person__role { font-size: 12px; letter-spacing: .1em; color: var(--gold-deep); }
.person__name { margin-top: 4px; font-family: var(--ff-min); font-size: 24px; font-weight: 500; letter-spacing: .08em; line-height: 1.4; }
.person__en { font-family: var(--ff-en); font-size: 12px; letter-spacing: .14em; color: var(--ink-3); }
.person__quote { margin-top: 14px; padding: 10px 14px; background: var(--bg); font-family: var(--ff-hand); font-size: 17px; line-height: 1.7; }
.person__good { margin-top: 12px; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.person__good b { display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--ink); }
@media (min-width: 600px) { .person { grid-template-columns: 180px minmax(0, 1fr); gap: 26px; } }
@media (min-width: 960px) { .staff__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }

/* ===== 08 口コミ ===== */
.proof { text-align: center; }
.proof__num { font-family: var(--ff-en); font-size: var(--fs-num); font-weight: 300; line-height: 1; }
.proof__stars { margin-top: 10px; font-size: 20px; letter-spacing: .2em; color: var(--gold-deep); }
.proof__label { margin-top: 12px; font-size: 15px; }
.proof .note { margin-top: 10px; }

/* ===== 09 絞込 ===== */
.check { display: grid; gap: 12px; margin-top: var(--sp-blk); }
.check li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px 18px; background: var(--bg); border: 1px solid var(--line); font-size: 16px; line-height: 1.8; }
.check svg { width: 26px; height: 26px; margin-top: 2px; }
.narrow__turn { margin-top: var(--sp-blk); text-align: center; font-family: var(--ff-min); font-size: var(--fs-h3); line-height: 1.8; }

/* ===== 10 Q&A（LPなので全部開いて見せる） ===== */
.qa { border-top: 1px solid var(--line); }
.qa__item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.qa__q { display: grid; grid-template-columns: 30px minmax(0, 1fr); font-size: 16px; font-weight: 500; line-height: 1.75; }
.qa__a { display: grid; grid-template-columns: 30px minmax(0, 1fr); margin-top: 8px; font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.qa__q::before, .qa__a::before { font-family: var(--ff-en); font-size: 17px; line-height: 1.6; }
.qa__q::before { content: "Q"; color: var(--gold-deep); }
.qa__a::before { content: "A"; color: var(--ink-3); }

/* ===== 11 アクセス ===== */
.route { margin-top: var(--sp-blk); }
.route__steps { position: relative; display: grid; gap: 0; }
.route__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
.route__step:last-child { padding-bottom: 0; }
.route__dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink); background: var(--bg); font-family: var(--ff-en); font-size: 13px; }
.route__step:not(:last-child) .route__dot::after { content: ""; position: absolute; top: 44px; left: 50%; width: 1px; height: 26px; border-left: 1px dashed var(--ink-3); }
.route__step--goal .route__dot { background: var(--ink); color: var(--bg); }
.route__t { font-size: 16px; font-weight: 500; line-height: 1.6; padding-top: 2px; }
.route__d { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.shop { margin-top: var(--sp-blk); padding: 24px 22px; background: var(--bg); border: 1px solid var(--line); }
.shop__name { font-family: var(--ff-min); font-size: 22px; }
.shop__dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 10px; margin-top: 14px; font-size: 14px; line-height: 1.8; }
.shop__dl dt { color: var(--ink-3); }
.shop__dl a { text-decoration: underline; text-underline-offset: 3px; }
.shop .btn { margin-top: 20px; }
.shop .btn--line { margin-top: 10px; }

/* ===== 最終 ===== */
.final { text-align: center; }
.final .h2 { color: var(--dark-ink); }
.final .cta { margin-top: var(--sp-blk); }

/* ===== フッター ===== */
.ft { padding: 40px var(--gut) calc(110px + env(safe-area-inset-bottom)); text-align: center; background: var(--bg); border-top: 1px solid var(--line); }
.ft img { height: 32px; width: auto; margin: 0 auto 14px; }
.ft p { font-size: 12px; line-height: 1.9; color: var(--ink-3); }
@media (min-width: 960px) { .ft { padding-bottom: 40px; } }

/* 05 続ける喜び：SPは写真の下に文字（白いブラウスに重なりAA未達＝実測2.44:1のため） */
@media (max-width: 959px) {
  .joy { background: var(--dark); }
  .joy__ph::after { display: none; }
  .joy__txt { position: static; padding: 32px var(--gut) 48px; }
}
@media (min-width: 960px) {
  .joy__ph::after { background: linear-gradient(to right, rgba(30,13,7,.86) 0%, rgba(30,13,7,.6) 38%, rgba(30,13,7,0) 62%); }
  .joy__txt { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; margin-left: max(var(--gut), calc((100vw - var(--wide)) / 2)); margin-right: 0; max-width: 480px; }
}

/* 05 PC：重ねずに左右に分ける（16:9に切ると手元が消え、拡大で画像も甘くなるため） */
@media (min-width: 960px) {
  .joy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; background: var(--dark); }
  .joy__ph { order: 2; aspect-ratio: 4 / 5; max-height: none; }
  .joy__ph::after { display: none; }
  .joy__txt { position: static; order: 1; margin: 0; padding: 64px clamp(40px, 6vw, 96px); max-width: 560px; justify-self: end; }
}

/* 00 FV PC：左に文字・右に縦の写真（16:9に引き伸ばすと顔に見出しが重なり、画像も甘くなるため） */
@media (min-width: 960px) {
  .fv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; height: min(92svh, 920px); }
  .fv__bg { position: relative; inset: auto; order: 2; height: 100%; }
  .fv__bg::after { display: none; }
  .fv__bg img { object-position: 50% 35%; }
  .fv__body { order: 1; align-self: end; margin: 0; padding: 0 clamp(40px, 5vw, 80px) 64px max(var(--gut), calc((100vw - var(--wide)) / 2)); max-width: none; }
  .fv__logo { left: max(var(--gut), calc((100vw - var(--wide)) / 2)); }
}
@media (min-width: 960px) {
  .fv { height: auto; min-height: min(92svh, 920px); }
  .fv__body { align-self: center; padding-top: 120px; padding-bottom: 64px; }
}
@media (min-width: 960px) {
  .fv { height: min(92svh, 920px); min-height: 640px; }
  .fv__bg picture, .fv__bg img { height: 100%; }
}
@media (min-width: 960px) { .fv__title { font-size: clamp(30px, 3.2vw, 46px); } }

/* 00 FV スライドショー（20〜50代の4人・白バック）。重ねてフェードで切り替える */
.fv__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--ease); }
.fv__slide.is-on { opacity: 1; }
.fv__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.fv__dots { position: absolute; z-index: 3; right: var(--gut); top: 32px; display: flex; gap: 6px; }
.fv__dots i { width: 18px; height: 2px; background: rgba(255,255,255,.45); transition: background 400ms; }
.fv__dots i.is-on { background: #fff; }
@media (min-width: 960px) {
  .fv__dots { top: auto; bottom: 28px; right: 28px; }
  .fv__dots i { background: rgba(30,13,7,.25); }
  .fv__dots i.is-on { background: var(--ink); }
  .fv__slide img { object-position: 50% 20%; }
}
@media (max-width: 959px) {
  /* SP：写真を上・文字を下に分ける。顔と手を見せる写真なので、見出しを重ねて手を隠さない */
  .fv { min-height: 0; justify-content: flex-start; }
  .fv__bg { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 64svh; width: 100%; }
  .fv__bg::after { background: linear-gradient(to bottom, rgba(30,13,7,.32) 0%, rgba(30,13,7,0) 16%, rgba(30,13,7,0) 82%, rgba(30,13,7,.85) 96%, var(--dark) 100%); z-index: 2; }
  .fv__slide img { object-position: 50% 30%; }
  .fv__body { margin-top: -28px; padding-top: 0; }
}

/* FV スライドショーの標準の動き（2026-10-05 岩田さん指定）：表示中はゆっくり少しだけズームしながら次の画像へ切り替わる */
.fv__bg { overflow: hidden; }
.fv__slide { transition: opacity 1600ms ease; z-index: 0; }
.fv__slide img { transform: scale(1); }
.fv__slide.is-on { z-index: 1; }
.fv__slide.is-leaving { z-index: 0; }
.fv__slide.is-on img, .fv__slide.is-leaving img { animation: fvKenBurns 8000ms linear forwards; }
@keyframes fvKenBurns { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .fv__slide.is-on img, .fv__slide.is-leaving img { animation: none; } }