@import url("./tokens.css");

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-1);
  font-weight: var(--fw-regular);
  line-height: 1.75;
  color: var(--primaryText);
  background: var(--primaryBg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

/* --------------------------------------------------------------------------
   App Shell — PC でもスマホ幅（--shell-w）のまま 1 カラムで表示する。
   ブレークポイントは viewport ではなくシェル幅を見るため、レイアウト系の
   メディアクエリはすべて @container app (...) に置き換えてある。
   body 自体をコンテナにしているので、内部の position: fixed（stickybar）も
   シェル内に収まる。
   -------------------------------------------------------------------------- */
html {
  background-color: var(--shell-outer-bg);
  background-image: radial-gradient(
    var(--shell-outer-dot) calc(var(--shell-outer-dot-size) / 2),
    transparent calc(var(--shell-outer-dot-size) / 2 + .5px)
  );
  background-size: var(--shell-outer-dot-gap) var(--shell-outer-dot-gap);
  background-position: 0 0;
  background-attachment: fixed;
}

body { background: transparent; }

.shell {
  container-type: inline-size;
  container-name: app;
  max-width: var(--shell-w);
  margin-inline: auto;
  min-height: 100vh;
  background: var(--primaryBg);
  box-shadow: var(--shadow-lg);
}

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }

a { color: var(--linkText); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* フォーム要素は常に 16px 以上（iOS Safari の自動ズーム防止） */
input, textarea, select, button {
  font-family: inherit;
  font-size: var(--fs-body-1);
  line-height: 1.6;
  color: inherit;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--brand);
  color: #fff;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout — Margin Guide: 左右 16pt 共通マージン
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--margin-side) * 2);
  margin-inline: auto;
  padding-inline: var(--margin-side);
}

.section { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-12); }
.section--sub { background: var(--secondaryBg); }

@container app (min-width: 768px){
  .section { padding-block: var(--space-20); }
  .section--tight { padding-block: var(--space-16); }
}

.section__head { max-width: 720px; margin-bottom: var(--space-8); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-3);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  color: var(--brand);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--brand);
  border-radius: var(--radius-pill);
}
.section__head--center .eyebrow::before { display: none; }

/* ==========================================================================
   Typography scale (LDSM Type Scale をベースに Web 向けへ拡張)
   ========================================================================== */
.t-heading-1 {
  font-size: clamp(26px, 5.2vw, 40px);
  font-weight: var(--fw-heavy);
  line-height: 1.32;
  letter-spacing: -.01em;
}
.t-title-1 {
  font-size: clamp(22px, 3.6vw, 32px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: -.005em;
}
.t-title-2 { font-size: var(--fs-title-2); font-weight: var(--fw-semibold); line-height: 1.5; }
.t-title-3 { font-size: var(--fs-title-3); font-weight: var(--fw-semibold); line-height: 1.6; }
.t-body-1  { font-size: var(--fs-body-1); }
.t-body-2  { font-size: var(--fs-body-2); }
.t-body-3  { font-size: var(--fs-body-3); }
.t-muted   { color: var(--secondaryText); }
.t-note    { font-size: var(--fs-body-3); color: var(--tertiaryText); }

.lead {
  font-size: var(--fs-body-1);
  color: var(--secondaryText);
  margin-top: var(--space-3);
}
@container app (min-width: 768px){ .lead { font-size: var(--fs-title-3); } }

/* ==========================================================================
   Button
   ========================================================================== */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-body-1);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.btn:active { background: var(--brandPressed); transform: translateY(1px); box-shadow: none; }
.btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }

.btn--line { --btn-bg: var(--brand); }
.btn--tel  { --btn-bg: var(--navy-900); }
.btn--tel:active { background: var(--navy-850); }

.btn--light {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--navy-900);
}
.btn--light:active { background: var(--gray-150); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--primaryText);
  border: 1.5px solid var(--borderStrong);
}
.btn--secondary:hover { background: var(--secondaryBg); }
.btn--secondary:active { background: var(--tertiaryBg); }

.btn--block { width: 100%; }
.btn--lg { min-height: 60px; font-size: var(--fs-title-3); padding-inline: var(--space-8); }

.btn__icon { flex: none; }
.btn__sub {
  display: block;
  font-size: var(--fs-body-4);
  font-weight: var(--fw-medium);
  opacity: .85;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--primaryBg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.header.is-stuck { border-bottom-color: var(--divider); box-shadow: var(--shadow-sm); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primaryText); }
.logo:hover { text-decoration: none; }
.logo__mark { flex: none; background: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__name { font-size: var(--fs-title-3); font-weight: var(--fw-heavy); letter-spacing: -.01em; }
.logo__tag { font-size: var(--fs-body-4); color: var(--secondaryText); font-weight: var(--fw-medium); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  color: var(--primaryText);
  font-size: var(--fs-body-2);
  font-weight: var(--fw-semibold);
  padding-block: var(--space-2);
}
.nav__link:hover { color: var(--brand); text-decoration: none; }

.header__cta { display: flex; align-items: center; gap: var(--space-3); }
.header__tel { display: none; text-align: right; line-height: 1.25; }
.header__tel-label { font-size: var(--fs-body-4); color: var(--secondaryText); font-weight: var(--fw-medium); }
.header__tel-num {
  display: block;
  font-size: var(--fs-title-2);
  font-weight: var(--fw-heavy);
  color: var(--primaryText);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.header__tel-num:hover { text-decoration: none; color: var(--brand); }
.header .btn { min-height: 44px; padding-inline: var(--space-5); font-size: var(--fs-body-2); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; display: block; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: var(--primaryText);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

@container app (max-width: 899px){
  .nav {
    position: absolute;
    inset: var(--header-h) 0 auto 0;
    background: var(--elevatedBg);
    border-bottom: 1px solid var(--divider);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--margin-side) var(--space-6);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item + .nav__item { border-top: 1px solid var(--divider); }
  .nav__link { display: block; padding: var(--space-4) var(--space-1); font-size: var(--fs-body-1); }
  .header__cta { display: none; }
}

@container app (min-width: 900px){
  .nav-toggle { display: none; }
  .nav { margin-left: auto; }
  .header__cta { margin-left: var(--space-4); }
}
@container app (min-width: 1100px){
  .header__tel { display: block; }
}

/* ==========================================================================
   Hero — 画像メイン（フルブリード）
   キャッチコピーは画像に焼き込み済みのため、重ねるのは CTA ボタンのみ。
   画像内の文字を暗くしないよう dimmed オーバーレイは使わない。
   ========================================================================== */
.hero { position: relative; background: var(--primaryBg); }

.hero__media {
  position: relative;
  display: grid;
  align-items: end;
  /* 画像に文字が入っているため、切り取らず全体を見せる（画像と同じ 2:3） */
  aspect-ratio: 1024 / 1536;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-10);
}

/* 写真の上に置く CTA。背景は敷かず、カード自体の塗りと影で写真から分離させる */
.hero__actions { display: grid; gap: var(--space-3); }

/* CTA カード — アイコン / 見出し + 主情報 + 補足 / 矢印 の 3 カラム */
.cta {
  --cta-bg: #FFFFFF;
  --cta-fg: var(--navy-900);
  --cta-accent: var(--brand);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.cta:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cta:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--cta-accent);
  color: #fff;
}
.cta__body { display: grid; gap: 1px; min-width: 0; }
.cta__label {
  font-size: var(--fs-body-4);
  font-weight: var(--fw-heavy);
  letter-spacing: .06em;
  color: var(--cta-accent);
}
.cta__main {
  font-size: var(--fs-title-2);
  font-weight: var(--fw-heavy);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.cta__sub { font-size: var(--fs-body-4); font-weight: var(--fw-medium); opacity: .7; }
.cta__arrow { flex: none; opacity: .45; transition: transform .16s ease; }
.cta:hover .cta__arrow { transform: translateX(3px); }

/* 料金表は白地に濃色、フォームはブランドカラーで塗り分ける */
.cta--price { --cta-bg: #FFFFFF; --cta-fg: var(--navy-900); --cta-accent: var(--brand); }
.cta--form {
  --cta-bg: var(--brand);
  --cta-fg: #FFFFFF;
  --cta-accent: #FFFFFF;
}
.cta--form .cta__icon { background: rgba(255, 255, 255, .22); color: #fff; }
.cta--form .cta__label { opacity: .9; }
.cta--form:active { background: var(--brandPressed); }

/* ==========================================================================
   Badge — 画像上に置くため LINE White の半透明を使用
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-3);
  font-size: var(--fs-body-3);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}
.badge--brand { background: var(--brand); border-color: var(--brand); }

/* ==========================================================================
   Alert bar
   ========================================================================== */
.alertbar { background: var(--criticalBg); border-block: 1px solid color-mix(in srgb, var(--red-400) 24%, transparent); }
.alertbar__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.alertbar__icon { flex: none; color: var(--red-400); margin-top: 2px; }
.alertbar__title { font-size: var(--fs-body-2); font-weight: var(--fw-bold); color: var(--primaryText); }
.alertbar__text { font-size: var(--fs-body-3); color: var(--secondaryText); }

/* ==========================================================================
   Card grid
   ========================================================================== */
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }
@container app (min-width: 640px){
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@container app (min-width: 960px){
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--space-6); }
}

.card {
  background: var(--elevatedBg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: 100%;
}
@container app (min-width: 768px){ .card { padding: var(--space-6); } }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--brandSubtleBg);
  color: var(--brand);
  margin-bottom: var(--space-4);
}
.card__title { font-size: var(--fs-title-3); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.card__text { font-size: var(--fs-body-2); color: var(--secondaryText); }

/* 症状カード */
.symptoms { display: grid; gap: var(--space-2); }

.symptom {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--elevatedBg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  /* 入力を伴う行なので 16px 未満にしない（iOS の自動ズーム対策） */
  font-size: var(--fs-body-1);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.symptom input {
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--brand);
}
.symptom:has(input:checked) { background: var(--brandSubtleBg); border-color: var(--brand); }
.symptom:focus-within { outline: 3px solid var(--blue-600); outline-offset: 2px; }

.symptoms__action { margin-top: var(--space-6); }
.symptoms__note {
  margin-top: var(--space-3);
  font-size: var(--fs-body-3);
  color: var(--tertiaryText);
  text-align: center;
}

/* 固定ヘッダーの下に隠れないようにする */
#contactForm { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* ==========================================================================
   Service
   ========================================================================== */
.service { display: flex; flex-direction: column; }
.service__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--space-4);
}
.service__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: #fff;
  font-weight: var(--fw-heavy);
  font-size: var(--fs-body-2);
  letter-spacing: .02em;
}
.service__title { font-size: var(--fs-title-2); font-weight: var(--fw-bold); line-height: 1.4; }
.service__list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.service__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body-2);
  color: var(--secondaryText);
}
.service__list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 14px; height: 14px;
  background: var(--brand);
  clip-path: polygon(41% 76%, 12% 48%, 0 60%, 41% 100%, 100% 17%, 88% 5%);
}
.service__tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: var(--space-4); }
.tag {
  font-size: var(--fs-body-4);
  font-weight: var(--fw-semibold);
  color: var(--brand);
}

/* ==========================================================================
   Price table
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  background: var(--elevatedBg);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; min-width: 360px; }
caption { text-align: left; padding: var(--space-4) var(--space-5) 0; font-size: var(--fs-body-3); color: var(--secondaryText); }
th, td { padding: var(--space-4) var(--space-5); text-align: left; border-bottom: 1px solid var(--divider); }
thead th {
  font-size: var(--fs-body-3);
  font-weight: var(--fw-bold);
  color: var(--invertedText);
  background: var(--brand);
  border-bottom: 0;
  white-space: nowrap;
}
tbody th { font-size: var(--fs-body-2); font-weight: var(--fw-semibold); }
tbody td { font-size: var(--fs-body-2); color: var(--secondaryText); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.price {
  font-size: var(--fs-title-3);
  font-weight: var(--fw-heavy);
  color: var(--primaryText);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price--free { color: var(--brand); }

/* ==========================================================================
   Steps
   ========================================================================== */
.steps { counter-reset: step; display: grid; gap: var(--space-4); }
@container app (min-width: 900px){ .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.step {
  position: relative;
  background: var(--elevatedBg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.step__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body-4);
  font-weight: var(--fw-heavy);
  letter-spacing: .1em;
  color: var(--brand);
  margin-bottom: var(--space-3);
}
.step__label::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  letter-spacing: 0;
}
.step__title { font-size: var(--fs-title-3); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.step__text { font-size: var(--fs-body-2); color: var(--secondaryText); }

/* ==========================================================================
   Area
   ========================================================================== */
.area {
  background: var(--elevatedBg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-5);
  margin: 0;
}
.area__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--divider);
}
.area__row:last-child { border-bottom: 0; }
.area__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  width: 4.5em;
  font-size: var(--fs-body-1);
  font-weight: var(--fw-bold);
}
.area__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.area__cities {
  margin: 0;
  font-size: var(--fs-body-2);
  color: var(--secondaryText);
}

/* ==========================================================================
   Voice
   ========================================================================== */
.voice {
  background: var(--elevatedBg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 横方向に自動で流れるカルーセル。トラック内に同じカードを 2 周ぶん並べ、
   半周ぶん（= 1 周ぶんのカード幅 + 隙間）動かしてから先頭に戻すことで途切れなく繋ぐ。 */
.marquee {
  --marquee-gap: var(--space-4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.marquee__track {
  display: flex;
  align-items: stretch;
  gap: var(--marquee-gap);
  width: max-content;
  animation: marquee-x 44s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee .voice { flex: none; width: 280px; }

@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}

/* 動きを抑える設定のときは自動スクロールを止め、手動で横スクロールできるようにする */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee__track { animation: none; padding-inline: var(--gutter); }
}
.voice__stars { color: #FFB400; letter-spacing: .1em; font-size: var(--fs-body-2); }
.voice__text { font-size: var(--fs-body-2); }
.voice__who {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-body-3);
  color: var(--secondaryText);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--space-3); max-width: 800px; margin-inline: auto; }
.faq__item {
  background: var(--elevatedBg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-body-1);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--secondaryBg); }
.faq__q::before {
  content: "Q";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--brandSubtleBg);
  color: var(--brand);
  font-size: var(--fs-body-3);
  font-weight: var(--fw-heavy);
}
.faq__q::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 10px; height: 10px;
  margin-top: 8px;
  border-right: 2px solid var(--tertiaryText);
  border-bottom: 2px solid var(--tertiaryText);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: 12px; }
.faq__a {
  padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 26px + var(--space-3));
  font-size: var(--fs-body-2);
  color: var(--secondaryText);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { background: var(--inverseBg); color: #fff; }
.contact .section__head { color: #fff; }
.contact .eyebrow { color: var(--line-green-ios); }
.contact .eyebrow::before { background: var(--line-green-ios); }
.contact .lead { color: rgba(255, 255, 255, .78); }

.contact__grid { display: grid; gap: var(--space-8); }
@container app (min-width: 960px){ .contact__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-12); } }

.contact__direct { display: grid; gap: var(--space-4); align-content: start; }
.contact__tel-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}
.contact__tel-label { font-size: var(--fs-body-3); color: rgba(255, 255, 255, .78); }
.contact__tel-num {
  display: inline-block;
  margin-block: var(--space-1) var(--space-1);
  font-size: clamp(28px, 6vw, 36px);
  font-weight: var(--fw-heavy);
  color: #fff;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.contact__tel-num:hover { text-decoration: none; color: var(--line-green-ios); }
.contact__tel-hours { font-size: var(--fs-body-3); color: rgba(255, 255, 255, .7); }

.form {
  background: var(--elevatedBg);
  color: var(--primaryText);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
@container app (min-width: 768px){ .form { padding: var(--space-8); } }

.field { display: grid; gap: var(--space-2); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-2);
  font-weight: var(--fw-bold);
}
.req {
  font-size: var(--fs-body-4);
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--red-400);
  border-radius: 4px;
  padding: 1px 6px;
}
.req--any { background: var(--gray-500); }

.input, .textarea, .select {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-1);   /* 16px 固定：iOS の自動ズーム防止 */
  background: var(--primaryBg);
  color: var(--primaryText);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
  appearance: none;
}
.textarea { min-height: 132px; resize: vertical; padding-top: var(--space-3); }
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%),
                    linear-gradient(135deg, var(--gray-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-10);
}
.input::placeholder, .textarea::placeholder { color: var(--tertiaryText); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.input:user-invalid, .textarea:user-invalid { border-color: var(--red-400); }

.field__error {
  display: none;
  font-size: var(--fs-body-3);
  color: var(--red-400);
  font-weight: var(--fw-semibold);
}
.field.is-invalid .field__error { display: block; }
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select { border-color: var(--red-400); }

.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-body-2); cursor: pointer; }
.checkbox input {
  flex: none;
  width: 22px; height: 22px;
  margin: 2px 0 0;
  accent-color: var(--brand);
}

/* 任意項目のアコーディオン */
.optional {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.optional__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-4);
  font-size: var(--fs-body-2);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}
.optional__toggle::-webkit-details-marker { display: none; }
.optional__toggle::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 9px; height: 9px;
  margin-top: -4px;
  border-right: 2px solid var(--tertiaryText);
  border-bottom: 2px solid var(--tertiaryText);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.optional[open] .optional__toggle::after { transform: rotate(-135deg); margin-top: 2px; }
.optional__toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.optional__hint {
  flex-basis: 100%;
  font-size: var(--fs-body-3);
  font-weight: var(--fw-regular);
  color: var(--tertiaryText);
}
.optional__body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}

.form__note { font-size: var(--fs-body-3); color: var(--tertiaryText); }
.form__status {
  display: none;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--brandSubtleBg);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  font-size: var(--fs-body-2);
  font-weight: var(--fw-semibold);
}
.form__status.is-visible { display: flex; }
.form__status__icon { flex: none; color: var(--brand); }
.form__status__icon--ng { display: none; }

/* 送信失敗したとき */
.form__status--error {
  background: color-mix(in srgb, var(--red-400) 10%, var(--primaryBg));
  border-color: color-mix(in srgb, var(--red-400) 35%, transparent);
}
.form__status--error .form__status__icon { color: var(--red-400); }
.form__status--error .form__status__icon--ok { display: none; }
.form__status--error .form__status__icon--ng { display: block; }

/* ==========================================================================
   Thanks（送信完了ページ）
   ========================================================================== */
.thanks { padding-block: var(--space-16) var(--space-20); }
.thanks__card {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  margin-bottom: var(--space-5);
  border-radius: 50%;
  background: var(--brandSubtleBg);
  color: var(--brand);
}

/* 中央寄せなので、eyebrow の飾り線は消して独立した行にする */
.thanks__card .eyebrow { display: flex; justify-content: center; }
.thanks__card .eyebrow::before { display: none; }

.thanks__points {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
  text-align: left;
}
.thanks__point dt {
  font-size: var(--fs-body-3);
  font-weight: var(--fw-bold);
  color: var(--brand);
}
.thanks__point dd {
  margin-top: var(--space-1);
  font-size: var(--fs-body-2);
  color: var(--secondaryText);
}

.thanks__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--secondaryBg); border-top: 1px solid var(--divider); padding-block: var(--space-12) var(--space-8); }
.footer__grid { display: grid; gap: var(--space-8); }
@container app (min-width: 900px){ .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-12); } }

.footer__desc { font-size: var(--fs-body-3); color: var(--secondaryText); margin-top: var(--space-4); max-width: 42ch; }

.company { display: grid; gap: 0; }
.company__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-body-3);
}
.company__row dt { color: var(--secondaryText); font-weight: var(--fw-semibold); }
.company__row dd { margin: 0; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-body-4);
  color: var(--tertiaryText);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__links a { color: var(--secondaryText); }

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */
.stickybar {
  position: fixed;
  left: 50%; bottom: 0;
  width: 100%;
  max-width: var(--shell-w);
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--margin-side) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--primaryBg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--divider);
  transform: translate(-50%, 110%);
  transition: transform .24s ease;
}
.stickybar.is-visible { transform: translate(-50%, 0); }
.stickybar .btn { min-height: 50px; font-size: var(--fs-body-2); padding-inline: var(--space-3); }

/* シェル幅は常に 900px 未満なので stickybar は常時表示 */
body { padding-bottom: 76px; }

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .header, .stickybar, .nav-toggle { display: none !important; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   Images（すべて仮画像。assets/img/ 配下を差し替えてください）
   ========================================================================== */
img { background: var(--secondaryBg); }

/* カード上部のフルブリード画像 */
.card__media {
  display: block;
  /* ベースの img { max-width: 100% } を解除しないと、はみ出し分が切られる */
  max-width: none;
  width: calc(100% + var(--space-5) * 2);
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@container app (min-width: 768px){
  .card__media {
    width: calc(100% + var(--space-6) * 2);
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
  }
}

/* セクション幅のワイド画像 */
.band-img {
  width: 100%;
  aspect-ratio: 2 / 1;   /* スマホは 3:1 だと高さ 114px しかなく被写体が判別できない */
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}
@container app (min-width: 768px){ .band-img { aspect-ratio: 3 / 1; } }

/* お客様の声のアイコン */
.voice__who { display: flex; align-items: center; gap: var(--space-3); }
.voice__avatar {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}