/* =========================================================
   pages.css — J's KOREAN HAIR セクション個別
   ========================================================= */

/* ---------------------------------------------------------
   FV
   写真は object-position で頭頂を切り、毛先と肩ラインを入れる
   （調査 §4-5：1本目の「顔中心」との差別化）
   --------------------------------------------------------- */
.fv { position: relative; background: var(--bg); }
.fv__media { position: relative; aspect-ratio: 3 / 5.2; }
.fv__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 22%; }

/* 文字は下半分。上半分（髪と表情）は見せる */
.fv__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(237, 235, 231, .10) 0%,
    rgba(237, 235, 231, .04) 32%,
    rgba(237, 235, 231, .62) 46%,
    rgba(237, 235, 231, .95) 57%,
    rgba(237, 235, 231, 1) 100%
  );
}

/* ロゴはFV左上に固定（2本目で確立した定位置） */
.fv__logo {
  position: absolute;
  left: var(--gut);
  top: 24px;
  z-index: 2;
  width: 58px;
}

.fv__copy {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: 52px;
  max-width: 380px;
}

.fv__title {
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--ink);
}
.fv__title em {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-2);
}

.fv__sub { margin-top: 16px; font-size: var(--fs-sm); line-height: 2; color: var(--ink-2); }

.fv__meta {
  position: absolute;
  left: var(--gut);
  bottom: 20px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fv__cta { padding: 22px var(--gut) 26px; background: var(--bg); }

/* ---------------------------------------------------------
   悩み（アイコン化しない・左揃え）
   --------------------------------------------------------- */
.worry-lead {
  margin-bottom: 22px;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink);
}
.worry li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--ink-2);
}
.worry li:first-child { border-top: 1px solid var(--line); }
.worry-bridge {
  margin-top: 26px;
  font-size: var(--fs-sm);
  line-height: 2.05;
  color: var(--ink-2);
}

/* ---------------------------------------------------------
   土台技法（レイヤー）
   --------------------------------------------------------- */
.layer-note {
  margin-top: 22px;
  padding: 15px 16px;
  background: var(--bg-2);
  font-size: var(--fs-note);
  line-height: 1.9;
  color: var(--ink-2);
}

/* ---------------------------------------------------------
   再現性
   --------------------------------------------------------- */
.repro { margin-top: 22px; border-top: 1px solid var(--line); }
.repro div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.repro dt {
  margin-bottom: 4px;
  font-size: var(--fs-note);
  letter-spacing: .06em;
  color: var(--ink-3);
}
.repro dd { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink); }

/* ---------------------------------------------------------
   料金
   --------------------------------------------------------- */
.price { border-top: 1px solid var(--line); }
.price__item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.price__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 7px;
}
.price__name { font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; }
.price__yen { flex-shrink: 0; font-size: 22px; font-weight: 400; color: var(--ink); }
.price__yen small { font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.price__desc { font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }
.price__foot { margin-top: 22px; }

/* ---------------------------------------------------------
   店舗
   --------------------------------------------------------- */
.shop + .shop { margin-top: 16px; }
.shop { padding: 24px 20px; background: var(--paper); border: 1px solid var(--line); }
.shop__name { font-size: var(--fs-h3); font-weight: 500; margin-bottom: 4px; }
.shop__area { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.shop__info { margin: 16px 0 20px; font-size: var(--fs-sm); line-height: 2; color: var(--ink-2); }
.shop__info a {
  display: inline-block;
  min-height: 44px;
  padding: 11px 0;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   最終CTA
   --------------------------------------------------------- */
.final { text-align: center; }
.final .h2 { margin-bottom: 16px; color: var(--bg); }
.final .lead { margin-bottom: var(--sp-block); }
.final .btn { background: var(--bg); color: var(--ink); }
.final .btn:hover { background: var(--paper); }
.final .cta2 .btn span { color: var(--ink-3); }
.final .btn-note { color: rgba(237, 235, 231, .6); }
.final .cross { color: rgba(237, 235, 231, .6); }
.final .cross a { color: rgba(237, 235, 231, .86); }

/* ---------------------------------------------------------
   フッター
   --------------------------------------------------------- */
.foot {
  padding: 34px var(--gut) calc(var(--sticky-h) + 34px);
  background: var(--bg);
  border-top: 1px solid var(--line);
  text-align: center;
}
.foot__logo { width: 52px; margin: 0 auto 16px; }
.foot__rule { width: 26px; height: 2px; margin: 18px auto; background: var(--brand); }
.foot__note { font-size: var(--fs-note); line-height: 1.9; color: var(--ink-3); }

@media (min-width: 1100px) { .foot { padding-bottom: 34px; } }