@charset "UTF-8";
/* =========================================================================
   合同会社HUGM コーポレートサイト
   DESIGN.md rev.7 のトークンに従う。色・フォント・余白は必ずトークン参照で書く。
   生のhexをこのファイルの :root 以外に書かないこと。
   ========================================================================= */

/* ------------------------------------------------------------------ 1. トークン */
:root {
  /* ベーストークン6色（light）— 由来: 生成り／墨／海／陽向／若葉 */
  --ground:         #FDF8F1;
  --on-ground:      #3A2E29;
  --on-ground-soft: #5C4C44;
  --accent:         #18544E;
  --blob-warm:      #F8DCC0;
  --blob-cool:      #CBDDD1;

  /* 派生（一次トークンから導出。生のhexを増やさない） */
  --ground-2:       color-mix(in srgb, var(--ground) 50%, var(--blob-warm));
  --rule:           color-mix(in srgb, var(--ground) 72%, var(--on-ground));
  --rule-strong:    color-mix(in srgb, var(--ground) 40%, var(--on-ground));

  /* アクセントは「面」と「文字」を分ける（dark で面が発光するのを防ぐため） */
  --accent-surface: var(--accent);
  --on-accent:      var(--ground);
  --on-accent-soft: color-mix(in srgb, var(--ground) 72%, var(--accent-surface));

  /* 余白スケール（4px基準・8段階） */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 40px; --s6: 64px; --s7: 96px; --s8: 144px;

  /* 角丸 */
  --r-btn: 999px;

  /* レイアウト */
  --header-h: 64px;
  --wrap: 1100px;
  --wrap-narrow: 760px;

  /* モーション */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .2s;
  --t-mid: .3s;

  /* グレイン（feTurbulence の data URI。外部画像を読まない） */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:         #24201C;
    --on-ground:      #F2EAE0;
    --on-ground-soft: #D4C8BD;
    --accent:         #86CFC0;
    --blob-warm:      #5A4436;
    --blob-cool:      #35473E;

    /* dark は面色を地寄りに落とす（明るいミントを大面積に敷くと発光するため）。
       ただし落としすぎると面が地に埋もれて「図」として読めなくなる。
       86%→74% に戻し、地との差を 1.35 → 1.83 に上げた。 */
    --accent-surface: color-mix(in srgb, var(--ground) 74%, var(--accent));  /* #3D4E47 */
    /* 見出しは明るい墨（light の --ground 相当）、補助文はミント。
       light と同じ階層比（見出し 7.41 / 補助 4.92）になる。 */
    --on-accent:      var(--on-ground);   /* #F2EAE0 */
    --on-accent-soft: var(--accent);      /* #86CFC0 */
  }
}

/* ------------------------------------------------------------------ 2. ベース */
*, *::before, *::after { box-sizing: border-box; }

/* 作成者オリジンの display 宣言は UA スタイルシートの [hidden]{display:none} に常に勝つ。
   .form { display: grid } のような指定があると hidden 属性が黙って無効化されるため、
   作成者側で明示的に打ち消す。 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s3)); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--on-ground);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  line-height: 1.9;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

a { color: inherit; }

/* フォーカスリング — 全背景で成立させる。
   outline を主にするのは forced-colors で box-shadow が none に強制されるため。
   border-radius: inherit は書かない（継承プロパティではなく親の 0 を拾って角丸が消える）。 */
:focus-visible {
  outline: 3px solid var(--on-ground);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ground);
}
@media (forced-colors: active) {
  :focus-visible { outline-color: CanvasText; }
}

.skip-link {
  position: absolute; left: var(--s3); top: -100px; z-index: 100;
  padding: var(--s2) var(--s4);
  background: var(--accent); color: var(--ground);
  border-radius: var(--r-btn); text-decoration: none;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--s3); }

/* ------------------------------------------------------------------ 3. グレイン */
/* 全セクション同一パラメータ（baseFrequency 0.8 / opacity .07 / soft-light）。
   効かせ所は signature 1箇所に集中させ、グレインは均質な紙の地に徹する。 */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .07;
  mix-blend-mode: soft-light;
}
@media (forced-colors: active) {
  /* グレインは強制配色で消える。実体感をグレインだけに預けず、境界を線で立たせる */
  .grain::after { display: none; }
  :root { --rule-strong: CanvasText; }
  .card--live .card__head { border-bottom: 1px solid CanvasText; }
  .card--soon, .field, .note, .purpose { border-color: CanvasText; }
  /* signature は強制配色に合わせて描き直す。forced-color-adjust: none だと
     White-on-Black 系テーマで腕（濃い藍緑）が黒地に埋もれて消える。
     腕をベタ、子を輪郭線にすると、どちらの配色でも抱擁の形が残る。 */
  .signature__arm   { fill: CanvasText; }
  .signature__child { fill: Canvas; stroke: CanvasText; stroke-width: 3; }
}

/* ------------------------------------------------------------------ 4. 共通パーツ */
.wrap {
  position: relative; z-index: 1;
  width: min(var(--wrap), 100% - 2 * var(--s4));
  margin-inline: auto;
}
.wrap--narrow { width: min(var(--wrap-narrow), 100% - 2 * var(--s4)); }

/* overflow-x: clip で装飾ブロブのはみ出しを刈る。
   これが無いと scrollWidth がビューポートを超え、レイアウトビューポートごと広がって
   position: fixed のヘッダーが画面外にずれ、モバイルのハンバーガーが切れる。
   body の overflow-x: hidden はスクロールバーを消すだけで原因を潰せないため使わない。
   overflow-y は visible のまま（clip にするとフォーカスリングが上下端で切られる）。 */
.section { position: relative; padding-block: var(--s7); overflow-x: clip; }
.section--about,
.section--message { padding-block: clamp(var(--s7), 12vw, var(--s8)); }
.section--cases   { padding-block: var(--s6); }

.section--cases,
.section--services,
.section--company { background: var(--ground-2); }
.section--contact { background: var(--accent-surface); color: var(--on-accent); }

.label {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: .8125rem; letter-spacing: .12em;
  color: var(--on-ground-soft);
  margin-bottom: var(--s3);
}
.label::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px; margin-right: var(--s2);
  background: currentColor; vertical-align: middle;
}
.label--on-accent { color: var(--on-accent-soft); }

.h2 {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.4; letter-spacing: .02em;
  font-feature-settings: "palt";
  color: var(--accent);
  margin: 0 0 var(--s5);
  word-break: auto-phrase;
  text-wrap: balance;
}
.h2--on-accent { color: var(--on-accent); }

.lead { color: var(--on-ground-soft); margin-bottom: var(--s5); }
.lead--on-accent { color: var(--on-accent-soft); }

.prose p + p { margin-top: var(--s4); }

.note {
  margin-top: var(--s5); padding: var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: 28px 14px 28px 14px;
  color: var(--on-ground-soft);
}

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s5);
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; font-size: 1rem;
  border-radius: var(--r-btn); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
/* 主CTAは面ではなくボタン。--accent を直接塗ることで light/dark とも
   地に対し 8.22 / 9.01 の差が付き、主従が反転しない。 */
.btn--primary { background: var(--accent); color: var(--ground); }
.btn--ghost   { background: transparent; color: var(--accent); border-color: var(--rule-strong); }
.btn--submit  { background: var(--on-accent); color: var(--accent-surface); font-weight: 700; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

/* 装飾ブロブ（背景の空気づくり専用。signature には使わない） */
.blob {
  position: absolute; z-index: 0;
  pointer-events: none;
  border-radius: 62% 38% 55% 45% / 55% 62% 38% 45%;
  filter: blur(80px);
  opacity: .85;
}
.blob--hero     { width: min(420px, 60vw); aspect-ratio: 1; background: var(--blob-cool); right: -6%; top: 18%; }
.blob--about    { width: min(380px, 55vw); aspect-ratio: 1; background: var(--blob-warm); left: -10%; bottom: -10%; filter: blur(100px); }
.blob--services { width: min(380px, 55vw); aspect-ratio: 1; background: var(--blob-cool); right: -12%; top: 30%; filter: blur(100px); }
.blob--message  { width: min(300px, 45vw); aspect-ratio: 1; background: var(--blob-warm); right: 4%; top: 22%; filter: blur(60px); }

@media (prefers-reduced-transparency: reduce) {
  /* Chromium 限定。未対応環境では blur が残る前提で成立させている。
     blur を外すと輪郭が硬くなるため、本文に縁がかかるヒーローのブロブは消す
     （DESIGN.md Don't「本文をブロブの縁にかけない」） */
  .blob { filter: none; opacity: .3; }
  .blob--hero { display: none; }
}

/* ------------------------------------------------------------------ 5. ヘッダー */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
/* メニュー展開中はヘッダーもメニュー面と同色にする（透過のままだと56pxの二色帯が出る） */
.header:has(.nav.is-open) { background: var(--ground-2); }
.header.is-scrolled {
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 12px rgb(0 0 0 / .06);
}
.header__inner {
  height: 100%;
  width: min(var(--wrap), 100% - 2 * var(--s4));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo__mark {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  font-size: 1.375rem; letter-spacing: .14em;
  color: var(--accent);
}
.nav { display: flex; align-items: center; gap: var(--s5); }
.nav__list { display: flex; gap: var(--s5); }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; font-size: .9375rem;
  text-decoration: none;
}
.nav__link::after {
  content: ""; display: block; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__cta { min-height: 44px; padding: 0 var(--s4); font-size: .9375rem; }

.burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.burger__bar {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: var(--on-ground); border-radius: 2px;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ 6. ヒーロー + signature */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--s5));
  padding-bottom: var(--s7);
  overflow-x: clip;
}
.hero__inner {
  position: relative; z-index: 1;
  width: min(var(--wrap), 100% - 2 * var(--s4));
  margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(var(--s5), 6vw, var(--s7));
}
.hero__title {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.4; letter-spacing: .02em;
  font-feature-settings: "palt";
  margin: 0 0 var(--s4);
  color: var(--accent);
  /* auto-phrase は Chromium 限定。折り位置の担保は HTML の <br> 側に置いている */
  word-break: auto-phrase;
  text-wrap: balance;
}
.hero__lead { color: var(--on-ground-soft); margin-bottom: var(--s5); }
/* 見出しの折り位置はブラウザ任せにしない。auto-phrase は Chromium 限定のため <br> を主にする */
.br-sp { display: none; }
@media (max-width: 768px) { .br-sp { display: inline; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.signature { width: min(360px, 30vw); }
.signature__svg { width: 100%; height: auto; overflow: visible; }
.signature__arm   { fill: var(--accent); }
.signature__child { fill: var(--blob-warm); }

@media (prefers-reduced-motion: no-preference) {
  .signature__arm, .signature__child { transform-box: fill-box; transform-origin: center; }
  .signature__arm {
    animation: sig-arm-in 1.4s var(--ease-out) both,
               sig-breathe 18s ease-in-out 1.4s infinite;
  }
  .signature__child { animation: sig-child-in 1.4s var(--ease-out) both; }
}
@keyframes sig-arm-in   { from { transform: translate(-9%, 5%); opacity: 0; } }
@keyframes sig-child-in { from { transform: translate(11%, -6%); opacity: 0; } }
@keyframes sig-breathe  { 50% { transform: scale(1.015); } }

/* ------------------------------------------------------------------ 7. 身元帯 */
.identity {
  background: var(--accent-surface); color: var(--on-accent);
  padding-block: var(--s3);
}
.identity__text {
  width: min(var(--wrap), 100% - 2 * var(--s4));
  margin-inline: auto;
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3);
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: .875rem; letter-spacing: .06em; line-height: 1.6;
}
.identity__sep { color: var(--on-accent-soft); }
@media (max-width: 480px) {
  /* 折り返すとセパレータが行末にぶら下がるため、縦積みにして区切りを消す */
  .identity__text { flex-direction: column; gap: var(--s1); }
  .identity__sep { display: none; }
}

/* ------------------------------------------------------------------ 8. 曲線ディバイダ */
/* 背景 = 次のセクションの地色 / path の塗り = 前のセクションの地色（上側の領域を塗る）。
   塗りを「上側」にしてあるのが要点。下側をパスで塗ると、要素の高さが小数になったとき
   ブラウザが描画ボックスを整数に丸める一方でパスの下端は小数位置に落ち、最下行に
   SVG 自身の背景が1px露出して「全幅の直線」が出る（DESIGN.md「可視の直線境界は使わない」に反する）。
   背景を次の地色にしておけば、丸めで隙間が出ても次のセクションと同色なので見えない。 */
.divider { display: block; width: 100%; }
.divider path { fill: currentColor; }
.divider--1 {
  height: clamp(32px, 4vw, 56px);
  background: var(--ground);          /* 次: 社名について */
  color: var(--accent-surface);       /* 前: 身元帯 */
}
.divider--2 {
  height: clamp(48px, 8vw, 96px);
  background: var(--accent-surface);  /* 次: お問い合わせ */
  color: var(--ground-2);             /* 前: 会社概要 */
  transform: scaleX(-1);
}

/* ------------------------------------------------------------------ 9. こんなときに */
.cases { margin-top: var(--s5); display: grid; gap: var(--s3); }
.cases__item {
  display: flex; gap: var(--s4); align-items: baseline;
  padding: var(--s4);
  background: var(--ground);
  border-radius: 30px 16px 26px 18px;
}
.cases__item:nth-child(2n) { border-radius: 16px 30px 18px 26px; }
.cases__num {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  color: var(--accent); font-size: .875rem; letter-spacing: .08em; flex: none;
}
.cases__close { margin-top: var(--s5); color: var(--on-ground-soft); }

/* ------------------------------------------------------------------ 10. 事業内容 */
.note--services { margin-top: var(--s6); }

.cards {
  margin-top: var(--s5);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5);
  align-items: start;
}
/* 2列非対称: 偶数列を下へずらす */
.cards > :nth-child(2n) { margin-top: var(--s6); }

.card { overflow: hidden; }
/* 均一な角丸を避ける。1隅だけ大きく落とし、隣接カードで回す */
.card:nth-child(4n+1) { border-radius: 44px 18px 22px 20px; }
.card:nth-child(4n+2) { border-radius: 18px 44px 20px 22px; }
.card:nth-child(4n+3) { border-radius: 20px 22px 44px 18px; }
.card:nth-child(4n+4) { border-radius: 22px 20px 18px 44px; }

.card__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s4); }
.card__num {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: .8125rem; letter-spacing: .08em;
}
.card__title { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1.25rem; margin: 0; }
/* ブロブ面の上に長文を載せない。面は見出し帯だけに限定し、本文は平面に置く */
.card__body { padding: var(--s4); background: var(--ground); }
.card__body p { color: var(--on-ground-soft); }

/* 面色は nth-child ではなく修飾クラスで持つ。
   準備中→提供中に切り替えるとき（HANDOVER §3-4）に card--soon を card--live に
   替えるだけで面色が付くようにするため。nth-child 依存だと3枚目以降が無色になる。 */
.card--live.card--warm .card__head { background: var(--blob-warm); }
.card--live.card--cool .card__head { background: var(--blob-cool); }
.card--live .card__num { color: var(--accent); }

.card--soon { border: 1px solid var(--rule-strong); background: transparent; }
.card--soon .card__title,
.card--soon .card__num { color: var(--on-ground-soft); }
.card--soon .card__body { background: transparent; }

.card__title .tag { margin-left: var(--s3); vertical-align: middle; }
.tag {
  display: inline-block;
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; font-size: .75rem;
  padding: 2px var(--s3);
  border: 1px solid var(--rule-strong); border-radius: var(--r-btn);
  color: var(--on-ground-soft);
}

/* ------------------------------------------------------------------ 11. 代表より */
.message { display: grid; grid-template-columns: 1fr auto; gap: clamp(var(--s5), 6vw, var(--s7)); align-items: start; }
.signplate { margin: 0; }
.signplate__inner {
  width: min(280px, 30vw); aspect-ratio: 4 / 5;
  background: var(--blob-warm);
  border-radius: 58% 42% 33% 67% / 63% 30% 70% 37%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s5);
  text-align: center;
}
.signplate__role { font-size: .8125rem; color: var(--on-ground-soft); }
.signplate__rule { display: block; width: 40px; height: 1px; background: var(--rule); }
.signplate__cred {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: .8125rem; letter-spacing: .04em;
  color: var(--on-ground-soft);
}
.signplate__name {
  white-space: nowrap;
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: .12em;
  color: var(--on-ground);
}

/* ------------------------------------------------------------------ 12. ご利用の流れ */
.flow { margin-top: var(--s5); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.flow__step {
  padding: var(--s4);
  background: var(--ground-2);
  border-radius: 34px 16px 28px 18px;
}
.flow__step:nth-child(2n) { border-radius: 16px 34px 18px 28px; }
.flow__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: var(--s3);
  border-radius: var(--r-btn);
  background: var(--accent); color: var(--ground);
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; font-size: .9375rem;
}
.flow__title { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1.0625rem; margin: 0 0 var(--s2); }
.flow__step p { color: var(--on-ground-soft); }

/* ------------------------------------------------------------------ 13. 会社概要 */
.spec { margin: 0; }
.spec__row {
  display: grid; grid-template-columns: 10rem 1fr; gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
}
.spec__row:last-child { border-bottom: 1px solid var(--rule); }
.spec dt { font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; color: var(--on-ground-soft); font-size: .9375rem; }
.spec dd { margin: 0; }
.spec__purposes { counter-reset: p; display: grid; gap: var(--s2); }
.spec__purposes li { counter-increment: p; padding-left: 2.2em; text-indent: -2.2em; }
.spec__purposes li::before { content: counter(p) ". "; color: var(--on-ground-soft); }
.spec__note { margin-top: var(--s3); font-size: .875rem; color: var(--on-ground-soft); }

/* 未確定値のプレースホルダ（納品前に必ず差し替える）。
   色は文脈から継承する。個別セレクタで地ごとに反転色を当てる方式だと、
   新しい場所に置いたときに指定漏れでコントラストが落ちる（実際に2度起きた）。
   currentColor なら、どの地の上でも周囲の本文と同じコントラストが保証される。 */
.tbd {
  display: inline-block;
  padding: 0 var(--s2);
  border-bottom: 2px dotted currentColor;
}

/* ------------------------------------------------------------------ 14. お問い合わせ */
.purpose {
  margin-bottom: var(--s5); padding: var(--s4);
  border: 1px solid var(--on-accent-soft);
  border-radius: 28px 14px 28px 14px;
  color: var(--on-accent-soft);
}
/* お問い合わせの連絡手段。--accent-surface 地の上に --ground で塗り分ける。
   light は塗り分け（8.22）、dark は --rule-strong の枠（3.14）で境界が成立する。 */
.spec dd a,
.footer__addr a,
.policy__body a { text-decoration: underline; text-underline-offset: .25em; }

.ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.way {
  display: grid; gap: var(--s2); align-content: start;
  padding: var(--s5) var(--s4);
  background: var(--ground); color: var(--on-ground);
  border: 1px solid var(--rule-strong);
  border-radius: 40px 18px 24px 20px;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.way:nth-child(2) { border-radius: 18px 40px 20px 24px; }
.way:hover, .way:focus-visible { transform: translateY(-2px); }
.way__label {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: .8125rem; letter-spacing: .08em; color: var(--on-ground-soft);
}
.way__value {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem); line-height: 1.4;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.way__value--tel { font-size: clamp(1.375rem, 3vw, 1.75rem); letter-spacing: .02em; }
.way__note { font-size: .8125rem; color: var(--on-ground-soft); line-height: 1.8; }

.policy { margin-top: var(--s6); border-top: 1px solid var(--on-accent-soft); }
.policy__summary {
  padding-block: var(--s4); cursor: pointer;
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  color: var(--on-accent);
}
.policy__body { padding-bottom: var(--s5); color: var(--on-accent-soft); }
.policy__body h3 {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1rem;
  color: var(--on-accent); margin: var(--s4) 0 var(--s2);
}
.policy__body p { margin: 0; }


/* ------------------------------------------------------------------ 15. フッター */
.footer { background: var(--accent-surface); color: var(--on-accent); padding-block: var(--s6); }
.footer__inner { display: grid; gap: var(--s5); }
.footer__brand { display: grid; gap: var(--s3); }
.logo__mark--footer { color: var(--on-accent); }
.footer__addr { font-size: .875rem; color: var(--on-accent-soft); line-height: 2; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; text-decoration: none; }
.footer__nav a:hover, .footer__nav a:focus-visible { text-decoration: underline; }
.footer__copy {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: .8125rem; color: var(--on-accent-soft);
  padding-top: var(--s4); border-top: 1px solid var(--on-accent-soft);
}

/* ------------------------------------------------------------------ 16. スクロール連動（2グループ限定） */
/* 一律の fade-in はアンチAIスロップ項目。事業内容カードとご利用の流れだけに限定し、
   他のセクションは初期表示から静止させる。 */
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cards .card, .flow__step {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .cards .card:nth-child(2), .flow__step:nth-child(2) { animation-range: entry 4% entry 49%; }
    .cards .card:nth-child(3), .flow__step:nth-child(3) { animation-range: entry 8% entry 53%; }
    .cards .card:nth-child(4), .flow__step:nth-child(4) { animation-range: entry 12% entry 57%; }
  }
}

/* ------------------------------------------------------------------ 17. レスポンシブ */
@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .message { grid-template-columns: 1fr; }
  /* justify-self: center だと figure が shrink-to-fit になり、子の % 幅が循環して潰れる。
     stretch させたうえで内側を margin-inline: auto で中央に置く。 */
  .signplate { justify-self: stretch; }
  .signplate__inner { width: min(280px, 70vw); margin-inline: auto; }
}

@media (max-width: 768px) {
  :root { --header-h: 56px; }

  .burger { display: block; }

  .nav {
    position: fixed; inset: var(--header-h) 0 0;
    display: grid; align-content: start; gap: var(--s5);
    padding: var(--s6) var(--s4);
    background: var(--ground-2);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 240ms var(--ease-out), visibility 240ms;
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav__list { flex-direction: column; gap: var(--s4); }
  .nav__link { display: block; padding-block: var(--s3); font-size: 1.125rem; }
  .nav__cta { justify-self: start; }

  .hero { padding-top: calc(var(--header-h) + var(--s5)); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s5); justify-items: start; }
  /* svh も制約に入れて、画面が低いときは signature が先に縮む
     （DESIGN.md の優先順位: コピーとCTAは削らない） */
  .signature { width: min(200px, 48vw, 26svh); }

  .cards { grid-template-columns: 1fr; gap: var(--s4); }
  .cards > :nth-child(2n) { margin-top: 0; }
  .flow { grid-template-columns: 1fr; }
    .spec__row { grid-template-columns: 1fr; gap: var(--s2); }
  .cases__item { flex-direction: column; gap: var(--s2); }
  .ways { grid-template-columns: 1fr; }
}

/* 低い画面高（横向きスマホ・iPhone SE 相当）でも h1 と主CTAを初期表示に収める */
@media (max-width: 1024px) and (max-height: 700px) {
  .hero { padding-top: calc(var(--header-h) + var(--s4)); padding-bottom: var(--s5); }
  .hero__inner { gap: var(--s4); }
  .hero__title { font-size: clamp(1.75rem, 7vw, 2rem); margin-bottom: var(--s3); }
  .hero__lead { margin-bottom: var(--s4); }
  .signature { width: min(140px, 34vw, 19svh); }
}

/* ------------------------------------------------------------------ 18. reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* signature は「抱擁済みの最終形」で静止させる（0.01msハックでは無限ループが止まらない） */
  .signature__arm, .signature__child { animation: none !important; transform: none !important; opacity: 1 !important; }
  /* フォーカスリングは motion 設定に関わらず維持する */
  :focus-visible { outline: 3px solid var(--on-ground); outline-offset: 2px; }
}