/* きよえさん LINE登録LP — 値はすべて DESIGN.md から */
:root {
  --bg: #FFFFFF;
  --surface: #F3F6F9;
  --ph: #E9EDF3;
  --text: #18273A;
  --muted: #5B6476;
  --line: #DCE3EC;
  --grid: #E6EAF0;
  --main: #18273A;
  --main-deep: #18273A;
  --accent: #06C755;
  --ph-border: rgba(24, 39, 58, .3);

  --f-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-head: var(--f-gothic);
  --f-num: "Poppins", var(--f-gothic);

  --fs1: 64px;
  --fs2: 28px;
  --fs3: 20px;
  --fs4: 16px;
  --fs5: 12.8px;

  --gap-in: 12px;
  --gap-between: 32px;
  --gap-section: 72px;
  --gutter: 20px;

  --r-s: 4px;
  --r-m: 10px;
}
/* 2つのページで色を分けるための派生の値。body.t-ig / body.t-salon で上書きする */
body { --em: var(--main); --band: var(--main-deep); --on-deep: #fff; --target: var(--main-deep); }
body.t-ig    { --em: #C8136F; --on-deep: #FF9CCB; }  /* インスタ用: ネイルのピンク */
body.t-salon { --em: #D95A12; --on-deep: #F08A4B; }  /* サロン用: エルメスオレンジ（白地 3.87:1・淡い面 3.57:1） */

@media (min-width: 900px) {
  :root {
    --fs1: clamp(72px, 7.2vw, 104px);  /* 1440 で 104px。狭い PC で強調語が2行に割れないように縮める */
    --fs2: 40px;
    --fs3: 24px;
    --fs4: 17px;
    --fs5: 13.6px;
    --gap-in: 14px;
    --gap-between: 36px;
    --gap-section: 112px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #F7F7F5;
  color: var(--text);
  font-family: var(--f-gothic);
  font-size: var(--fs4);
  line-height: 1.85;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 地: 依頼者が選んだ白い漆喰の壁を1枚だけ敷く（白を47%焼き込み済み）。章ごとに貼り替えない。iOS で効く固定の疑似要素 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #F7F7F5 url(img/bg-plaster.webp) center / cover no-repeat;
  pointer-events: none;
}
p, ul, ol, dl, dd, figure, h1, h2, h3 { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong { font-weight: 700; }
.nb { display: inline-block; text-indent: 0; }
p { text-wrap: pretty; }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }

/* 写真の仮枠 */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: var(--ph);
  border: 1px dashed var(--ph-border);
  border-radius: var(--r-s);
  color: var(--muted);
  text-align: center;
  padding: 12px;
  overflow: hidden;
}
.ph__id { font-family: var(--f-head); font-weight: 700; font-size: var(--fs3); color: var(--em); line-height: 1.3; }
.ph__memo { font-size: var(--fs5); line-height: 1.6; max-width: 22em; word-break: keep-all; overflow-wrap: anywhere; }

/* 写真 */
.photo { margin: 0; overflow: hidden; border-radius: var(--r-s); background: var(--ph); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ボタン */
.cta-block { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  min-height: 64px;
  padding: 12px 20px;
  border-radius: var(--r-m);
  background: var(--accent);
  color: #fff;
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: var(--fs4);
  line-height: 1.3;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.cta::after {
  content: "";
  width: 9px; height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  flex: none;
}
.cta:focus-visible { outline: 3px solid var(--main-deep); outline-offset: 3px; }
.cta__note { font-size: var(--fs5); color: var(--muted); line-height: 1.6; }
@media (min-width: 900px) { .cta { font-size: var(--fs3); min-height: 64px; } }

/* ===== FV ===== */
.fv {
  position: relative;
  overflow: hidden;
}
.fv__target {
  background: var(--target);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs4);
  line-height: 1.5;
  text-align: center;
  padding: 6px var(--gutter);
}
/* 組は3つ（見出し／写真と実績／オファーとボタン）。組の間は --gap-between、組の中は --gap-in */
.fv__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px var(--gutter) 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;   /* スマホの最初の画面だけ、組の間を詰める（オファーの見出しを1画面に入れるため） */
}
.fv__head, .fv__rest { display: flex; flex-direction: column; min-width: 0; }
.fv__lead {
  font-family: var(--f-head);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: var(--fs3);
  line-height: 1.4;
  color: var(--text);
}
.fv__title { font-family: var(--f-head); font-weight: 900; margin-top: var(--gap-in); font-feature-settings: "palt"; }
.fv__lead, .h2, .h3, .offer-sec__title, .step__title, .band__text, .fv__product, .fv__name, .future__voices, .future__turn, .worry__close, .reason__close, .gene, .deadline, .voice__head, .prof__name, .thought__end, .offer__head, .badge__num, .greet__sign, .ph__id { font-feature-settings: "palt"; }
.fv__pre { display: block; font-size: var(--fs2); line-height: 1.35; font-weight: 900; }
.fv__big {
  display: block;
  font-size: var(--fs1);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-top: 4px;
  font-feature-settings: "palt";
}
.fv__big em { font-style: normal; color: var(--em); }
.fv__product {
  align-self: flex-start;
  margin-top: var(--gap-in);
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs3);
  line-height: 1.3;
  color: #fff;
  background: var(--main-deep);
  padding: 4px 12px;
  letter-spacing: .1em;
}
.fv__sub { font-size: var(--fs4); line-height: 1.7; }

/* 写真と実績: サロンの内装のアーチの窓から、頭と髪がはみ出す（窓＝背景ごとの写真、その上に同じ範囲の切り抜き）。
   名前は縦書きで窓の左。実績の札は脚元に横一列で敷き、紺の地の線に乗せる */
.fv__visual { border-bottom: 3px solid var(--main-deep); }
.fv__stage {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: end;
  margin-top: -20px;   /* 商品名の札のすぐ下に頭のてっぺんが来る */
}
.fv__name {
  writing-mode: vertical-rl;
  align-self: end;
  margin-bottom: calc(56px + var(--gap-in));
  padding-right: 14px;   /* 切り抜きは窓の左へ少しはみ出すので、肩書きとの間をあける */
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs3);
  line-height: 1.25;
  letter-spacing: .1em;
  white-space: nowrap;
}
.fv__name small { display: block; font-family: var(--f-gothic); font-size: var(--fs5); font-weight: 700; color: var(--muted); letter-spacing: .08em; }
.fv__frame { position: relative; aspect-ratio: 4 / 5; --cut: 1.04; --cut-peak: 1.07; }
.t-salon .fv__frame { --cut: 1; --cut-peak: 1.03; }   /* サロン用は手先を窓の外へ出さない */
.fv__window, .fv__cut { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 切り抜きは窓より少し大きく（右下を基点に 1.04倍）。頭と髪が窓の上と左へ、ひと回りはみ出す */
.fv__cut {
  transform-origin: 100% 100%;
  transform: scale(var(--cut));
  /* 肩から下は窓の左端より外へ出さない（外に出るのは、肩より上の髪と顔だけ） */
  clip-path: polygon(-10% -10%, 110% -10%, 110% 100%, 3.9% 100%, 3.9% 56%, -10% 56%);
}
.t-salon .fv__cut { clip-path: none; }
/* 実績は紺の帯1本に3つ。札の間から写真がのぞかないように、すき間を作らず細い線で分ける */
.badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: -56px;
  position: relative;
  z-index: 1;
  background: var(--main-deep);
}
.badge + .badge { box-shadow: -1px 0 0 rgba(255, 255, 255, .3); }
/* 札の中は2段: ラベル ／ 数字＋単位 */
.badge {
  display: block;
  background: var(--main-deep);
  color: #fff;
  padding: 6px 2px 5px;
  text-align: center;
  white-space: nowrap;
}
.badge__label { display: block; font-size: var(--fs5); font-weight: 700; line-height: 1.3; }
.badge__unit { margin-left: 1px; }
.badge__num { font-family: var(--f-num); font-weight: 800; font-size: var(--fs2); line-height: 1.1; letter-spacing: -.03em; color: var(--on-deep); }
.badge__unit { font-size: var(--fs5); font-weight: 700; line-height: 1.3; }

/* オファーとボタン。スマホはオファー → 説明文 → ボタンの順 */
.offer {
  border: 2px solid var(--main-deep);
  border-radius: var(--r-m);
  padding: 14px 16px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  align-items: center;
  background: #fff;
  order: 1;
}
.fv__rest .fv__sub { order: 2; margin-top: var(--gap-in); }
.fv .cta-block { order: 3; margin-top: var(--gap-in); }
.offer__head {
  grid-column: 1 / -1;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs3);
  line-height: 1.4;
}
.offer__head b { color: var(--em); font-size: var(--fs2); font-family: var(--f-num); font-weight: 800; }
.offer__head .offer__free { font-family: var(--f-head); font-weight: 900; font-size: inherit; }
.offer__list { display: flex; flex-direction: column; gap: 4px; }
.offer__list li { font-weight: 700; font-size: var(--fs4); line-height: 1.5; }
.offer__step { display: block; font-family: var(--f-num); font-weight: 800; font-size: var(--fs5); color: var(--main); letter-spacing: .08em; }
.offer__list small { font-weight: 400; font-size: var(--fs5); color: var(--muted); }
.offer__sample { background: none; border-radius: 0; overflow: visible; }
.offer__sample img { object-fit: contain; height: auto; }

@media (min-width: 900px) {
  .fv__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    column-gap: 56px;
    row-gap: var(--gap-in);
    padding-top: 28px;
    padding-bottom: 32px;
    align-items: end;
  }
  .fv__head { grid-column: 1; grid-row: 1; }
  .fv__rest { grid-column: 1; grid-row: 2; }
  .fv__visual { grid-column: 2; grid-row: 1 / 3; }
  .fv__inner { gap: var(--gap-in) 56px; }
  .fv__stage { grid-template-columns: 78px minmax(0, 1fr); margin-top: 0; }
  .fv__name { padding-right: 30px; }
  .fv__name { margin-bottom: calc(72px + var(--gap-in)); }
  .badges { margin-top: -72px; }
  .badge { padding: 10px 6px 8px; }
  .fv__lead { font-size: var(--fs3); }
  .fv__big { margin-top: 8px; }
  /* PC は説明文を見出しの組に続け、オファーの前で組を分ける */
  .fv__rest .fv__sub { order: 0; margin-top: 0; }
  .offer { order: 1; margin-top: var(--gap-between); grid-template-columns: minmax(0, 1fr) 150px; padding: 16px 24px; }
  .fv .cta-block { order: 2; align-items: stretch; }
  .fv .cta { max-width: none; }
  .fv .cta__note { padding-left: 4px; }
}

/* ===== 章 ===== */
.sec { padding: calc(var(--gap-section) / 2) 0; }
.fv + .sec { padding-top: var(--gap-section); }
.sec--surface { background: rgba(232, 238, 245, .55); padding: var(--gap-section) 0; margin: calc(var(--gap-section) / 2) 0; }
.h2 {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs2);
  line-height: 1.45;
  letter-spacing: .02em;
  margin-bottom: var(--gap-between);
}
.h2 em { font-style: normal; color: var(--em); }
.h3 {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs3);
  line-height: 1.45;
}
.body p + p { margin-top: 1.2em; }
.body strong { color: var(--main); }
.mark { color: var(--main); font-weight: 700; }

/* お悩み */
.checks { display: flex; flex-direction: column; gap: 4px; }
.checks li {
  position: relative;
  padding: 8px 0 8px 36px;
  font-weight: 700;
  line-height: 1.6;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 20px; height: 20px;
  border: 1px solid var(--main);
  border-radius: var(--r-s);
}
.checks li::after {
  content: "";
  position: absolute;
  left: 8px; top: 13px;
  width: 7px; height: 12px;
  border-right: 2px solid var(--main);
  border-bottom: 2px solid var(--main);
  transform: rotate(45deg);
}
.worry__close { margin-top: var(--gap-between); font-size: var(--fs3); font-family: var(--f-head); font-weight: 700; line-height: 1.6; }
.worry__close em { font-style: normal; color: var(--main); }

/* このままだと */
.future__voices { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--gap-between); }
.future__voices p { font-weight: 700; line-height: 1.6; }
.band {
  background: var(--band);
  color: #fff;
  margin: var(--gap-between) 0;
  padding: 40px var(--gutter);
}
.band__in { max-width: 680px; margin: 0 auto; }
.band__lead { font-size: var(--fs4); font-weight: 700; margin-bottom: 8px; }
.band__text {
  font-family: var(--f-head);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: var(--fs2);
  line-height: 1.5;
}
.band__text em { font-style: normal; display: block; margin-top: 2px; color: var(--on-deep); }
.band__by { margin-top: 16px; font-size: var(--fs5); opacity: .9; }
.future__list li { padding-left: 1.2em; text-indent: -1.2em; line-height: 1.8; }
.future__list li::before { content: "・"; }
.future__turn { margin-top: var(--gap-between); font-weight: 900; color: var(--main); }

/* 理由 */
.reason__voices { margin: 1.2em 0; }
.reason__voices p { font-weight: 700; margin: 0 !important; }
.gene { font-family: var(--f-head); font-weight: 700; }
.gene__lead { font-size: var(--fs3); line-height: 1.4; }
.gene__num { font-family: var(--f-num); font-size: var(--fs1); color: var(--em); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.gene__src { font-family: var(--f-gothic); font-weight: 400; font-size: var(--fs5); color: var(--muted); margin-top: var(--gap-in); }
/* 3コマ（バツ → 実は → マル）。3枚とも同じ形（5:4）・同じ幅・同じ側。写真の下（PC は右）に、そのコマの言葉 */
.koma { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-in); margin-top: calc(var(--gap-between) * 1.5); }
.koma + .body { margin-top: calc(var(--gap-between) * 1.5); }
.koma__ph { aspect-ratio: 1; }
.body + .koma { margin-top: calc(var(--gap-between) / 2); }   /* つなぎの文は、次のコマに付ける */
.koma__text { min-width: 0; }
.koma__text strong { color: var(--main); }
/* イラスト（イラストAC）の仮枠と置き場所 */
.ill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #fff; border: 1px dashed var(--ph-border); border-radius: var(--r-m);
  color: var(--muted); text-align: center; padding: 8px;
}
.ill__id { font-weight: 900; font-size: var(--fs5); color: var(--main); letter-spacing: .04em; white-space: nowrap; }
.ill .ph__memo { line-height: 1.5; }
.ill-img { display: block; width: auto; object-fit: contain; }
.worry__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-in); }
.worry__ill { width: 160px; height: 180px; justify-self: center; }
.food-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 16px; align-items: center; margin-top: 1.2em; }
.food__ph { aspect-ratio: 1; }
@media (min-width: 900px) {
  .worry__row { grid-template-columns: minmax(0, 1fr) 220px; column-gap: 40px; align-items: center; }
  .worry__ill { grid-column: 2; grid-row: 1; width: 220px; height: 240px; }
  .food-row { grid-template-columns: minmax(0, 1fr) 180px; }
  .koma { grid-template-columns: 240px minmax(0, 1fr); column-gap: 36px; align-items: start; }
}
.therefore__word { font-family: var(--f-head); font-weight: 900; font-size: var(--fs3); color: var(--main); line-height: 1.2; }
.reason__close { font-family: var(--f-head); font-weight: 900; font-size: var(--fs3); line-height: 2; margin-top: 2px; }
.reason__close .lbl { background: var(--main-deep); color: #fff; padding: 3px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.reason__close .lbl--em { color: var(--on-deep); }
@media (min-width: 900px) {
}

/* 3つのステップ */
.offer-sec__title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs2); line-height: 1.3; margin-bottom: var(--gap-between); }
.offer-sec__lead { display: block; font-size: var(--fs3); line-height: 1.5; margin-bottom: 4px; }
.offer-sec__title b { font-size: var(--fs1); color: var(--em); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; margin-right: 2px; }
.offer-sec__intro { margin-bottom: var(--gap-section); }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-in); grid-template-areas: "head" "ph" "body"; }
.step__head { grid-area: head; }
.step__body { grid-area: body; min-width: 0; }
.step + .step { margin-top: calc(var(--gap-between) * 1.5); }
@media (min-width: 900px) {
  .step + .step { margin-top: calc(var(--gap-between) * 2); }
  /* STEP の番号と名前は3つとも左端にそろえ、その下を「写真｜本文」の2列にする */
  .step--split { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "head head" "ph body"; column-gap: 36px; align-items: start; }
  .step--split .step__ph { aspect-ratio: 4 / 3; margin: 0; }
  .step--split .step__body > :first-child { margin-top: 0; }
}
.step__no { display: block; font-family: var(--f-num); font-weight: 800; color: var(--main); font-size: var(--fs3); letter-spacing: .1em; line-height: 1.2; margin-bottom: 4px; }
.step__no span { font-size: var(--fs2); margin-left: 2px; }
.step__title { font-family: var(--f-head); font-weight: 900; font-size: var(--fs2); line-height: 1.4; }
.step__meta { color: var(--muted); font-weight: 700; }
.step__ph { grid-area: ph; aspect-ratio: 16 / 9; margin: 8px 0; }
.step__ph--video { aspect-ratio: 3 / 2; position: relative; }
.step__ph--43 { aspect-ratio: 4 / 3; }
.step__ph--sample { aspect-ratio: 4 / 3; background: none; }
.step__ph--sample img { object-fit: contain; }
.video__len { position: absolute; left: 0; top: 0; border-radius: 0 0 var(--r-s) 0; background: var(--main-deep); color: #fff; font-size: var(--fs5); font-weight: 700; line-height: 1.4; padding: 3px 8px; }
.step__sub { font-weight: 700; margin-top: var(--gap-in); }
.dots li { padding-left: 1.2em; text-indent: -1.2em; }
.dots li::before { content: "・"; }
.deadline__lead { margin-top: var(--gap-between); font-weight: 700; }
.deadline {
  margin-bottom: var(--gap-in);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs2);
  line-height: 1.3;
  color: var(--em);
}
.gift {
  margin-top: var(--gap-in);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 16px;
}
.gift__head { font-weight: 700; color: var(--main); margin-bottom: 6px; }
.gift dt { font-weight: 700; margin-top: 8px; }
.gift dd { margin: 0; font-size: var(--fs5); color: var(--muted); line-height: 1.7; }
.note { font-size: var(--fs5); color: var(--muted); margin-top: var(--gap-in); line-height: 1.7; }
.offer-sec .cta-block { margin-top: var(--gap-section); }

/* お客様の声 */
.voices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-between); }
.voice { border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; }
.voices { gap: var(--gap-between); }
.voice__photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: var(--gap-in); }
.voice__photos .ph { aspect-ratio: 1; }
.ba { position: relative; aspect-ratio: 4 / 3; }
.ba__cap { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 6px; background: var(--main-deep); color: #fff; padding: 3px 8px; font-size: var(--fs5); line-height: 1.4; border-radius: 0 0 var(--r-s) 0; }
.ba__cap b { font-weight: 700; }
.ba:nth-child(2) .ba__cap b { color: var(--on-deep); }
.voice__tag { font-size: var(--fs5); font-weight: 700; color: var(--main); }
.voice__head { font-family: var(--f-head); font-weight: 700; font-size: var(--fs3); line-height: 1.45; margin: 4px 0 8px; }
.voices__line { margin-top: var(--gap-between); height: 200px; }
@media (min-width: 900px) { .voice { padding: 16px; } .voice__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ba { aspect-ratio: 1; } }

/* プロフィール */
.prof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-between); }
.prof__ph { aspect-ratio: 4 / 5; }
.prof__name { font-family: var(--f-head); font-weight: 700; font-size: var(--fs2); line-height: 1.3; }
.prof__name small { display: block; font-family: var(--f-gothic); font-size: var(--fs5); color: var(--main); letter-spacing: .04em; }
.prof__list { margin-top: var(--gap-in); }
.prof__concept { margin-top: var(--gap-in); }
.prof__certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--gap-in); }
.prof__certs .ph { aspect-ratio: 4 / 3; }
.prof__certs .photo { aspect-ratio: 4 / 5; }
.prof__certs .ph__id { font-size: var(--fs4); }
@media (min-width: 900px) { .prof { grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; align-items: start; } }

/* 想い・不安 */
.thought__ph { aspect-ratio: 16 / 9; margin-bottom: var(--gap-between); }
.quote { font-weight: 700; color: var(--text); }
.thought__end { font-weight: 700; color: var(--main); margin-top: var(--gap-between); }

/* よくある質問 */
.faq { display: flex; flex-direction: column; gap: var(--gap-between); }
.faq__item { padding: 0; }
.faq dt { font-weight: 700; display: flex; gap: 10px; line-height: 1.6; }
.faq dd { margin: 8px 0 0; display: flex; gap: 10px; }
.faq__q, .faq__a { font-family: var(--f-head); font-weight: 900; color: var(--main); flex: none; width: 1.2em; }

/* 最後のメッセージ */
.last__word { margin-top: var(--gap-between); }
.last__say { font-family: var(--f-head); font-weight: 900; font-size: var(--fs2); line-height: 1.4; font-feature-settings: "palt"; }
.last__sign { display: block; width: 180px; height: auto; margin: 4px 0 0 auto; }
@media (min-width: 900px) { .last__sign { width: 240px; } }
.last .cta-block { margin-top: var(--gap-section); }

/* ごあいさつ（サロン用） */
.greet__ph { aspect-ratio: 16 / 9; margin-bottom: var(--gap-between); }
.greet__sign { margin-top: var(--gap-between); text-align: right; font-family: var(--f-head); font-weight: 700; }

.foot { padding: 32px var(--gutter) 120px; text-align: center; font-size: var(--fs5); color: var(--muted); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .foot { padding-bottom: 40px; } }

/* スマホだけ下に固定 */
.sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.25, .6, .3, 1);
  z-index: 10;
}
.sticky .cta { max-width: none; min-height: 56px; }
.sticky.is-hidden { transform: translateY(110%); }
@media (min-width: 900px) { .sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* ===== 動き（ダイヤル 3）=====
   読む人（40〜60代の女性が、スマホでインスタから開く）が、気持ちよく読める動きだけにする。
   決まり:
   1. 動かすのは「不透明度」と「上へ 8px の移動」だけ。拡大・縮小・回転・切り取り・左右の動き・弾みは使わない
   2. 顔・本文・リスト・数字は動かさない（初めから出ている）。動くのは、写真と章の見出しが、ふわっと現れることだけ
   3. 1回だけ、0.55秒（最初の画面は 0.8秒）、ゆっくり止まる。繰り返す動きは無し
   4. 待たせない。画面に入ったらすぐ出し始める
   html に .js が付いたときだけ初めの状態を隠す（JS が動かなくても全部見える）。
   ?still と、端末の「視差効果を減らす」では .still が付き、全部が出来上がりの状態で出る。 */
@keyframes fuwa { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 最初の画面: 文字は初めから出ている。写真（窓・本人・名前・実績）は1つのかたまりで、ふわっと現れる */
.js:not(.still) .fv__visual { animation: fuwa .8s cubic-bezier(.25, .6, .3, 1) .1s both; }

/* 読み進めたとき: 写真と章の見出しが、1回だけ、ふわっと現れる */
.js:not(.still) [data-anim] { opacity: 0; transform: translateY(8px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.25, .6, .3, 1); }
.js:not(.still) [data-anim].is-in { opacity: 1; transform: none; }

/* ボタンを押したときの手ごたえ（1px 沈む） */
.cta { transition: transform .08s ease-out; }
.cta:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }