/* ==========================================================================
   ケアプランナーPro — 介護事業所の「開業」から「運営」まで、ひとつの窓口で(開業サポート・ウェブサイト制作・利用者管理・スタッフ勤怠。運営: 株式会社オルカワン)
   v6(docs/DESIGN_V6.md): 総合ブランド LP 13 画面に再構成。書体・色・モーション・1 画面条件は v5.2 のまま
   Design v5「ぬくもりの冊子」: v4 の骨格(1 セクション ≒ 1 画面・構図・スケール・タイムライン)はそのまま、
   書体・色・形・質感・動きの「温度」を上げる。太い明朝 → 丸ゴシック(v5)→ v5.2 で BIZ UDPMincho + BIZ UDPGothic / 墨 → こげ茶 / 朱 → 杏(+若草)/
   黒い面 → ココア / 直角 → 角丸 / 一部の罫 → 点線 / はんこ → シール / 切れる出現 → 浮かぶ出現。
   仕様: docs/DESIGN_V6.md(最新)/ docs/DESIGN_V5_2.md(書体)/ docs/DESIGN_V5.md(構図・タイムラインは DESIGN_V4.md)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens(v5: 名前は v4 のまま、値を置き換え)
   -------------------------------------------------------------------------- */
:root {
  --paper: #F8F2E9;
  --paper-deep: #EFE6D9;
  --paper-light: #FDFAF5;
  --ink: #3A2A22;                  /* こげ茶。紙上 12.3:1 */
  --ink-2: #4A3730;
  --ink-soft: rgba(58, 42, 34, 0.74);
  --rule: rgba(58, 42, 34, 0.16);
  --rule-strong: rgba(58, 42, 34, 0.38);
  --rule-dash: rgba(58, 42, 34, 0.26);   /* 点線用 */
  --apricot: #D0774A;              /* 杏。大きな文字(≥24px)・装飾・丸囲み・シールの塗り。小さな文字には使わない */
  --apricot-deep: #A8552F;         /* 小さな文字の杏(紙上 4.7:1)。ボタンの塗り(白文字 ≈5:1) */
  --moss: #9DB98C;                 /* 若草(差し色) */
  --moss-deep: #5F7A50;
  --cocoa: #4A3328;                /* 暗い面(なぜサイト・無料相談・フッター) */
  --cocoa-deep: #3A2720;
  --paper-on-cocoa: rgba(248, 242, 233, 0.94);
  --apricot-on-cocoa: #F0B48C;     /* 暗い面上の杏(6.5:1) */
  /* v4 の名前は別名として残す(置き換え漏れ防止) */
  --vermilion: var(--apricot);
  --vermilion-ink: var(--apricot-deep);
  --paper-on-ink: var(--paper-on-cocoa);
  --blue: #2496EA;                 /* ORCAONE ロゴのみ */

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 24px;
  --r-photo: 20px;
  --r-pill: 999px;
  --shadow-soft: 0 12px 32px rgba(120, 80, 50, 0.10);
  --shadow-lift: 0 18px 40px rgba(120, 80, 50, 0.16);

  /* v5.2: 書体を BIZ UD に全面切替(docs/DESIGN_V5_2.md)。ウェイトは 400 / 700 の 2 段のみ */
  --font-head: "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;   /* 見出し・数字・シール・フォリオ(700) */
  --font-hand: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;       /* リード・声・キャプション(400)。名前は互換のため維持(v5.2 から手書き体ではない) */
  --font-sans: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;       /* 本文・ナビ・ボタン・表 */

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-stamp: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-float: cubic-bezier(0.22, 1, 0.36, 1);   /* 浮かぶ出現 */
  --dur-s: .5s;
  --dur-m: .9s;
  --dur-l: 1.2s;

  --fs-body: 1.0625rem;
  --fs-display: clamp(3rem, min(5.2vw, 1rem + 7.2vh), 5.4rem);
  /* ヒーロー巨大見出し(v4.1 §8)。v6: 最長行が「ひとつの窓口で。」(BIZ UDPMincho 700 で 7.46em)になり v5.2 の 6.28em より長いので、
     帯の右端が写真の左端から +1.20em 以内に収まるよう 6.9vw → 6.1vw に下げた(1440×900 ≈ 88px / 1280×720 ≈ 78px / 1024×768 ≈ 62px)。
     実測値は docs/DESIGN_V6.md の実装メモ */
  --fs-hero: clamp(3.8rem, min(6.1vw, 1rem + 9.6vh), 8.5rem);
  --fs-h2: clamp(2rem, min(1.4rem + 2.2vw, 1rem + 4.4vh), 3.6rem);
  --fs-giant: clamp(4rem, 9vw, 8.5rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);

  --header-h: 60px;
  --rail-w: 0px;
  --container: 1184px;
  --gutter: 16px;
  --sec-pad: 64px;
  /* 版面(コンテナ)の左右端までの距離。セクション幅に対する値 */
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
}
@media (min-width: 768px) { :root { --gutter: 32px; --fs-body: 1.125rem; --sec-pad: 80px; } }
@media (min-width: 1024px) { :root { --header-h: 72px; --gutter: 48px; } }
@media (min-width: 1280px) { :root { --rail-w: 56px; --gutter: 40px; } }
@media (min-width: 1440px) { :root { --gutter: 48px; } }
/* SP: フォリオ番号は小さく・薄く(見出しの読みやすさ優先) */
@media (max-width: 767px) {
  .section .folio { font-size: 5.5rem; opacity: 0.55; }
  .section .folio--ink { opacity: 1; color: rgba(248, 242, 233, 0.05); }
}
@media (max-width: 1023px) { :root { --fs-hero: clamp(3rem, 7.6vw, 4.2rem); } }
@media (max-width: 767px) { :root { --fs-hero: clamp(2.6rem, 12.5vw, 3.2rem); --fs-display: clamp(2rem, 10.2vw, 3rem); --fs-h2: clamp(1.75rem, 7.4vw, 2.2rem); --fs-giant: clamp(4rem, 21vw, 5.6rem); } }
/* 低めの横長画面(1280×720 等): 見出しを高さに合わせて少し詰める */
@media (min-width: 1024px) and (max-height: 800px) {
  :root { --fs-display: clamp(2.8rem, min(5.2vw, 1rem + 6.4vh), 5.4rem); --fs-h2: clamp(1.9rem, min(1.4rem + 2.2vw, 0.8rem + 4.2vh), 3.4rem); }
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: auto;            /* 初期位置は JS が確定させてから .is-ready で smooth */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.is-ready { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: 0.03em;
  line-break: strict;
  /* 改行ルール(§9): 文節で折り返す(Chrome/Edge)。overflow-wrap: anywhere は CJK の折り返し位置を悪化させるので
     URL・メールなどラテン文字の長語が入る箇所だけに限定する(下の .info-table a ほか) */
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}
/* 紙目(固定)。写真の上にもうっすら乗る */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 99;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, figure, blockquote, dl, dd { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-wrap: balance;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
small { font-size: 0.8em; }
::selection { background: rgba(208, 119, 74, 0.18); color: var(--ink); }
:focus-visible { outline: 2px solid var(--apricot-deep); outline-offset: 3px; border-radius: var(--r-s); }

.nb { display: inline-block; }
/* 文節スパン(§9): 短い説明文を文節単位で折り返す。余白・色は持たない */
.ph { display: inline-block; }
.info-table a, .direct__value, .form, .site-footer { overflow-wrap: anywhere; }
.sec-title .nb, .hero__title .nb { white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 400;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.container {
  position: relative; z-index: 1;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 未確定の料金・期間(docs/TODO.md)。URL に ?todo=1 を付けると可視化(現在は該当なし) */
.show-todo .todo-price { background: rgba(208, 119, 74, 0.14); outline: 1px dashed var(--vermilion); }

/* 数字(見出し書体 BIZ UDPMincho 700) */
.price-num { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.01em; line-height: 1; }

/* 写真: 額なし。杏の薄いトーンで紙色に馴染ませる(角丸は各セクションで --r-* を指定。.ph は §9 の文節スパン) */
.pic { position: relative; overflow: hidden; background: var(--paper-deep); margin: 0; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(208, 119, 74, 0.08);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 描画される罫線 */
.rl { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); pointer-events: none; }
.rl--strong { background: var(--rule-strong); }

/* 折丁番号(フォリオ): 紙に印刷された巨大な番号(BIZ UDPMincho 700)。塗りのみ */
.folio {
  position: absolute; z-index: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(var(--fs-giant) * 2.2);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--paper-deep);
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
  white-space: nowrap;
  /* v5.1: 巨大文字に毎フレーム transform を掛けるとコンポジタのタイル再描画漏れで横帯状に欠けることがあるため、静止させる(data-parallax も付けない) */
  transform: none;
  will-change: auto;
}
.folio--tr { top: clamp(16px, 4vh, 48px); right: var(--edge); }
.folio--br { bottom: clamp(8px, 3vh, 40px); right: var(--edge); }
.folio--bl { bottom: clamp(8px, 3vh, 40px); left: calc(var(--edge) - 0.04em); }
.folio--ink { color: rgba(248, 242, 233, 0.06); }

/* --------------------------------------------------------------------------
   2. Buttons / links / はんこ
   -------------------------------------------------------------------------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px;
  padding: 0.6em 1.6em;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out), background-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
/* ホバー: 2px 浮く + 影(v5。面の流れ込みはやめる) */
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--primary { background: var(--apricot-deep); color: #fff; }
.btn--primary::after { content: "→" / ""; display: inline-block; font-weight: 700; transition: transform .45s var(--ease-out); }
.btn--primary:hover::after { transform: translateX(4px); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--line:hover { background: var(--paper-light); border-color: var(--ink-soft); }
.btn--lg { min-height: 56px; padding: 0.75em 1.8em; font-size: 1.0625rem; }
.btn--sm { min-height: 40px; padding: 0.4em 1.1em; font-size: 0.9375rem; }
.btn--sm::after { display: none; }
.btn--block { width: 100%; }

.text-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--apricot-deep), var(--apricot-deep)), linear-gradient(var(--rule-strong), var(--rule-strong));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size .6s var(--ease-out), color .3s var(--ease-out);
}
.text-link::after { content: " →" / ""; color: var(--apricot-deep); }
.text-link:hover, .text-link:focus-visible { background-size: 100% 1px, 100% 1px; color: var(--vermilion-ink); }

/* 小さなシール(v4 の角印の置き換え。ヘッダー・ヒーロー・オープニング。2026-10-20 名称が長くなったので中身は「Pro」だけ) */
.hanko {
  --size: 48px;
  position: relative;
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: var(--apricot-deep); /* 小さいので白文字のコントラストを確保(≈5:1)。大きなシールは --apricot */
  color: #fff;
  box-shadow: 0 4px 10px rgba(120, 80, 50, 0.14);
  transform: rotate(-6deg);
}
.hanko::before {
  content: ""; position: absolute; inset: 3px;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}
.hanko__name {
  width: auto;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(var(--size) * 0.34);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  word-break: normal;
}
.hanko--sm { --size: 40px; }

/* シール(料金・締め)。杏の塗り + 白文字 + 内側の点線リング、少し傾ける。「押す」ではなく「貼る」 */
.maru {
  --size: 148px;
  --rot: -6deg;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: var(--apricot);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  transform: rotate(var(--rot));
  box-shadow: var(--shadow-soft);
  outline: 2px dashed rgba(255, 255, 255, 0.7);
  outline-offset: -10px;
}
.maru__label { font-size: 0.8125rem; letter-spacing: 0.2em; }
.maru__num { font-size: 2.2rem; margin: 2px 0 3px; letter-spacing: 0; }
.maru__unit { font-size: 0.75rem; letter-spacing: 0.04em; }
.maru__unit small { font-size: 0.85em; font-weight: 400; }
.maru--paper { --size: 120px; }
.maru__name { width: auto; display: flex; flex-direction: column; align-items: center; line-height: 1.15; letter-spacing: 0; word-break: normal; }
.maru__name-l1 { font-size: 0.78rem; letter-spacing: 0.02em; } /* 120px のシールの点線内(弦 ≈ 86px)に収める */
.maru__name-l2 { font-size: 1.5rem; }

/* SAMPLE: 若草の小さなピル(白文字) */
.stamp {
  --rot: -4deg;
  position: absolute; z-index: 3;
  top: 12px; right: 12px;
  padding: 3px 11px 2px;
  border-radius: var(--r-pill);
  background: var(--moss-deep);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  white-space: nowrap;
  transform: rotate(var(--rot));
  box-shadow: 0 4px 10px rgba(60, 80, 50, 0.16);
  pointer-events: none;
}
/* 押印のにじみ(stamp は後方互換で残す) */
[data-anim="stamp"]::after {
  content: ""; position: absolute; inset: -5px; z-index: -1;
  border-radius: inherit;
  background: var(--vermilion);
  opacity: 0;
  pointer-events: none;
}
.maru[data-anim="stamp"]::after { border-radius: 50%; }

/* --------------------------------------------------------------------------
   3. Header / Nav(紙色の不透明+下罫線+読了バー)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.read-bar {
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 3px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--apricot);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.site-header__inner {
  height: 100%;
  max-width: calc(1360px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.site-header .hanko { --size: 40px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__row { display: flex; align-items: baseline; gap: 12px; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.06em; }
.brand__by { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-soft); }
.brand__by svg { width: 14px; height: 16px; }
.brand__catch { margin-top: 3px; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--ink-soft); }
@media (min-width: 1024px) { .site-header .hanko { --size: 48px; } }
@media (max-width: 480px) {
  /* 2026-10-20 名称が長くなったので、狭い画面では「by ORCAONE」を名前の下に回し、添え書きは隠す */
  .brand__catch { display: none; }
  .brand__row { flex-direction: column; align-items: flex-start; gap: 1px; }
  .brand__name { font-size: 1.1rem; letter-spacing: 0.03em; }
}

/* 現在のセクション名(≥1200px) */
.cur { display: none; }
@media (min-width: 1200px) {
  .cur {
    display: block; position: relative;
    margin: 0 0 0 auto;
    height: 1.6em; min-width: 9.5em; /* v6: 「06 スタッフ勤怠」「03 開業サポート」が切れない幅 */
    overflow: hidden;
    font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; line-height: 1.6em;
    letter-spacing: 0.06em;
    color: var(--ink);
    white-space: nowrap;
  }
  .cur::after { content: ""; position: absolute; right: 0; top: 0.35em; bottom: 0.35em; width: 1px; background: var(--rule-strong); transition: opacity .35s; }
  .cur:empty::after { opacity: 0; }
}
.cur__item, .rail__item {
  position: absolute; inset: 0;
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.cur__item { padding-right: 18px; text-align: right; }
.cur__item.is-enter, .rail__item.is-enter { transform: translateY(100%); opacity: 0; }
.cur__item.is-leave, .rail__item.is-leave { transform: translateY(-100%); opacity: 0; }
.cur__num { color: var(--apricot-deep); margin-right: 0.5em; }

.global-nav__list { display: flex; align-items: center; gap: 0; }
.global-nav__list a:not(.btn) {
  position: relative;
  display: block;
  padding: 6px clamp(5px, 0.55vw, 11px);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
}
.global-nav__list a:not(.btn)::after {
  content: ""; position: absolute; left: clamp(5px, 0.55vw, 11px); right: clamp(5px, 0.55vw, 11px); bottom: 0;
  height: 2px; border-radius: var(--r-pill); background: var(--apricot);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.global-nav__list a:not(.btn):hover { color: var(--ink); }
.global-nav__list a:not(.btn):hover::after { transform: scaleX(.35); }
.global-nav__list a.is-current { color: var(--ink); font-weight: 700; }
.global-nav__list a.is-current::after { transform: none; }
.global-nav__cta { margin-left: 10px; }
.global-nav__cta .btn { padding-inline: 1.3em; }

.nav-toggle {
  display: none;
  align-items: center; gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 419px) { .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .nav-toggle { padding-inline: 12px; } }
.nav-toggle__bars { position: relative; width: 18px; height: 11px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: var(--r-pill); background: var(--ink);
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out), top .25s var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .global-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-strong);
    padding: 4px var(--gutter) 24px;
    visibility: hidden; opacity: 0;
    transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
  }
  .global-nav.is-open { visibility: visible; opacity: 1; transition: opacity .2s var(--ease-out), visibility 0s; }
  .global-nav__list { flex-direction: column; align-items: stretch; }
  .global-nav__list a:not(.btn) { padding: 13px 2px; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--rule); }
  .global-nav__list a:not(.btn)::after { display: none; }
  .global-nav__list a.is-current { color: var(--vermilion-ink); }
  .global-nav__cta { margin: 20px 0 0; }
  .global-nav__cta .btn { width: 100%; min-height: 52px; font-size: 1rem; }
}
@media (min-width: 1200px) and (max-width: 1439px) { .brand__catch { display: none; } }
@media (min-width: 1200px) and (max-width: 1299px) { .brand__by { display: none; } }
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .global-nav { position: static; visibility: visible; opacity: 1; }

/* --------------------------------------------------------------------------
   4. 左の柱(rail) — ≥1280px
   -------------------------------------------------------------------------- */
.rail { display: none; }
@media (min-width: 1280px) {
  .rail {
    position: fixed; z-index: 80;
    left: 0; top: var(--header-h); bottom: 0;
    width: var(--rail-w);
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    padding: 24px 0 22px;
    background: var(--paper);
    border-right: 1px solid var(--rule);
  }
  main, .site-footer { padding-left: var(--rail-w); }
}
.rail__cur {
  position: relative; flex-shrink: 0;
  width: 1.6em; height: 11.5em;
  overflow: hidden;
  writing-mode: vertical-rl;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; line-height: 1.6em; /* v6: ラベルが 13 本になったので 11 → 10px */
  color: rgba(58, 42, 34, 0.72);
  white-space: nowrap;
}
.rail__item { writing-mode: vertical-rl; }
.rail__track { position: relative; flex: 1; width: 2px; border-radius: var(--r-pill); background: rgba(58, 42, 34, 0.18); overflow: hidden; }
.rail__fill { position: absolute; inset: 0; background: var(--apricot); transform: scaleY(0); transform-origin: center top; }
.rail__brand {
  flex-shrink: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink);
  white-space: nowrap;
}
.rail__brand [lang="en"] { letter-spacing: 0.24em; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   5. オープニング(初回のみ)
   -------------------------------------------------------------------------- */
.intro { display: none; }
html.is-intro .intro {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  /* v5: 幕のワイプ → 紙色の面がふわっと薄れる(所要時間は v4 と同じ 1.15s 開始) */
  animation: intro-fadeout .9s var(--ease-float) 1.15s forwards;
  cursor: pointer;
}
html.is-intro .intro.is-leaving { animation: intro-fadeout .5s var(--ease-float) forwards; }
.intro__inner { display: flex; align-items: center; gap: 22px; }
/* 薄れるのと同時に中央のロゴが 8px 浮き上がる */
html.is-intro .intro__inner { animation: intro-float .9s var(--ease-float) 1.15s forwards; }
html.is-intro .intro.is-leaving .intro__inner { animation: intro-float .5s var(--ease-float) forwards; }
.intro__hanko { --size: 58px; opacity: 0; animation: intro-seal .6s var(--ease-stamp) .15s forwards; }
.intro__text { display: flex; flex-direction: column; gap: 6px; }
.intro__name { display: block; overflow: hidden; padding-block: .06em; }
.intro__name-i {
  display: block;
  font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1.25; letter-spacing: 0.12em;
  transform: translateY(110%);
  animation: intro-rise .9s var(--ease-float) .45s forwards;
}

/* 2026-10-20 名称が長くなった(10 字)ので、狭い画面ではシールと文字を一段小さく */
@media (max-width: 480px) {
  .intro__inner { gap: 16px; }
  .intro__hanko { --size: 48px; }
  .intro__name-i { font-size: 1.45rem; letter-spacing: 0.06em; }
}
.intro__catch { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--ink-soft); opacity: 0; animation: intro-fade .9s var(--ease-float) .45s forwards; }
@keyframes intro-fadeout { to { opacity: 0; visibility: hidden; } }
@keyframes intro-float { to { transform: translateY(-8px); } }
@keyframes intro-seal { 0% { opacity: 0; transform: scale(.6) rotate(-14deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
@keyframes intro-rise { to { transform: none; } }
@keyframes intro-fade { to { opacity: 1; } }

/* --------------------------------------------------------------------------
   6. Sections(1 セクション ≒ 1 画面)
   -------------------------------------------------------------------------- */
main { display: block; }
.section {
  position: relative;
  overflow: hidden; overflow: clip;
  padding-block: var(--sec-pad);
}
/* 版面幅の細い罫線(ページの頭) */
.section::before {
  content: ""; position: absolute; top: 0; z-index: 2; height: 1px; background: var(--rule-strong);
  left: var(--edge); right: var(--edge);
}
.bleed-l::before, .bleed-r::before, .why::before, .contact::before { display: none; }
@media (min-width: 1024px) and (min-height: 600px) {
  .section {
    min-height: calc(100svh - var(--header-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(28px, 5.6vh, 72px);
  }
}

.sec-head { margin-bottom: clamp(22px, 4vh, 44px); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(8px, 1.6vh, 16px); line-height: 1.4; }
.eyebrow__num {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  color: var(--apricot-deep); letter-spacing: 0.06em;
}
.eyebrow__num::after { content: ""; width: 36px; height: 1.5px; border-radius: var(--r-pill); background: var(--rule-strong); }
.eyebrow__label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--ink); }
.eyebrow--onphoto .eyebrow__num { color: #F0B48C; }
.eyebrow--onphoto .eyebrow__num::after { background: rgba(248, 242, 233, 0.6); }
.eyebrow--onphoto .eyebrow__label { color: var(--paper); }
.sec-title { font-size: var(--fs-h2); line-height: 1.3; letter-spacing: 0.03em; }
.sec-lead { margin-top: 14px; color: var(--ink-soft); font-family: var(--font-hand); font-weight: 400; }

.split { display: grid; gap: 8px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 4fr 8fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
  .split > .sec-head { margin-bottom: 0; }
}

/* 左端まで裁ち落とす写真+本文(お悩み・利用者管理・強み・声) */
.bleed-l { --ph-w: 40%; }
.bleed-l__photo { height: clamp(220px, 34vh, 320px); }
.bleed-l__photo img { position: absolute; inset: 0; }
.bleed-l__body { position: relative; z-index: 1; padding: clamp(28px, 5vh, 48px) var(--gutter) 0; }
@media (max-width: 1023px) {
  .bleed-l { padding-top: 0; }
}
@media (min-width: 1024px) {
  .bleed-l { padding-block: 0; }
  .bleed-l__photo { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: var(--ph-w); height: auto; }
  .bleed-l__body {
    margin-left: var(--ph-w);
    padding: clamp(28px, 5.6vh, 72px) var(--edge) clamp(28px, 5.6vh, 72px) clamp(40px, 4.4vw, 72px);
  }
  .bleed-l .folio { z-index: 0; }
}

/* 右端まで裁ち落とす写真+本文(開業サポート・スタッフ勤怠)。.bleed-l の左右反転。<1024 は写真が上・本文が下 */
.bleed-r { --ph-w: 40%; }
.bleed-r__photo { height: clamp(220px, 34vh, 320px); }
.bleed-r__photo img { position: absolute; inset: 0; }
.bleed-r__body { position: relative; z-index: 1; padding: clamp(28px, 5vh, 48px) var(--gutter) 0; }
@media (max-width: 1023px) {
  .bleed-r { padding-top: 0; }
}
@media (min-width: 1024px) {
  .bleed-r { padding-block: 0; }
  .bleed-r__photo { position: absolute; z-index: 1; right: 0; top: 0; bottom: 0; width: var(--ph-w); height: auto; }
  .bleed-r__body {
    margin-right: var(--ph-w);
    padding: clamp(28px, 5.6vh, 72px) clamp(40px, 4.4vw, 72px) clamp(28px, 5.6vh, 72px) var(--edge);
  }
  .bleed-r .folio { z-index: 0; }
}

/* --------------------------------------------------------------------------
   7. Hero — v4.1「表紙」(docs/DESIGN_V4.md §8)
   見出しが主役、写真が舞台、はんこが値札。キッカー 1 行 + 巨大 3 行(折り返し禁止)
   -------------------------------------------------------------------------- */
.hero {
  --split: 46%;
  /* 巨大見出しの最長行の文字幅(em)の想定値。左余白の式とリード幅に使う。
     v6: 最長行「ひとつの窓口で。」の BIZ UDPMincho 700 での実測 7.46em + 0.2em。左余白の式(写真の左端 + 1.2em - 帯)により
     帯の右端は写真の左端から +1.0em 前後になる(上限 1.2em。3 行目は写真の下半分=手元にかかり、顔にはかからない) */
  --hero-k: 7.66;
  /* v6: 巨大 3 行の行送り。「開業」「運営」の 2 つの丸囲みが上下に並ぶので、輪どうし・輪と隣の行の字が触れない間隔を取る(v5.2 は 1.08) */
  --hero-lh: 1.32;
  position: relative;
  padding-top: var(--header-h);
  display: flex; flex-direction: column;
}
.hero__main { position: relative; display: grid; }
.hero__copy {
  position: relative; z-index: 3; /* 写真の左端のグラデ(::before)より上に見出しを出す */
  padding: 28px var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.hero__brand { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(12px, 2vh, 32px); }
.hero__brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.hero__brand-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; } /* 幅が足りなければ英字を名前の下に */
.hero__brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.1em; }
.hero__brand-en { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em; color: var(--apricot-deep); }
.hero__brand-catch { font-size: 0.8125rem; color: var(--ink-soft); letter-spacing: 0.06em; }

.hero__title {
  position: relative; z-index: 2;
  width: max-content; max-width: none;
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-wrap: initial;
  white-space: nowrap;
}
/* キッカー「介護事業所の」+ 若草の短い罫 */
.hero__kicker {
  display: flex; align-items: center; gap: 0.7em;
  width: max-content;
  margin-bottom: 0.45em;
  font-size: 0.34em; font-weight: 700; line-height: 1.5; letter-spacing: 0.14em;
}
.hero__kicker-rule { flex: none; width: 2.2em; height: 3px; border-radius: var(--r-pill); background: var(--moss); }
.js:not(.no-anim) .hero__kicker-rule { transition-duration: .6s; }
.hero__giant { display: block; line-height: var(--hero-lh); }
.hero__giant .nb { display: block; width: max-content; }
/* 紙の帯: 写真に重なる行でも読めるよう、行ごとに紙色を敷く(紙の上では見えない) */
.hero__title .nb { background: var(--paper); padding: 0 0.2em; margin: 0 -0.2em; border-radius: var(--r-s); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 出現アニメ中は帯ごと文字と一緒に持ち上がる。マスクは下線ぶん下に余裕を持たせる */
.hero__title .ln { background: none; padding: 0.06em 0.2em 0.16em; margin: -0.06em -0.2em -0.16em; }
.hero__title .ln__i { background: var(--paper); padding: 0 0.2em; margin: 0 -0.2em; border-radius: var(--r-s); }
.hero__giant .nb { position: relative; }
/* 丸囲みが次の行の帯に隠れないよう、1 行目 > 2 行目 > 3 行目の順に重ねる */
.hero__giant .nb:nth-child(1) { z-index: 2; }
.hero__giant .nb:nth-child(2) { z-index: 1; }
/* 丸囲みのある 1・2 行目のマスクは、輪が上下にはみ出すぶん広げる(レイアウトは変えない) */
.hero__giant .nb:nth-child(-n+2).ln { padding-block: 0.26em; margin-block: -0.26em; }
.hero__q { color: var(--apricot); font-weight: 400; }
/* 2 行目「「運営」まで、」: 読点の右の空白ぶん紙の帯が写真にはみ出して切り欠きに見えないよう、帯の右端を読点の見える部分のすぐ右で止める */
.hero__comma { margin-right: -0.45em; }
.hero__giant .nb:nth-child(2), .hero__giant .nb:nth-child(2) > .ln__i { padding-right: 0; }
.hero__giant .nb:nth-child(2).ln { padding-right: 0.06em; }
.hero__trust { position: relative; display: inline-block; }
/* 「開業」「運営」の手描きの丸囲み(括弧ごと外側から囲む閉じない輪。data-anim="draw" で描く。2 つ目は 1 つ目の +250ms)
   v6: BIZ UDPMincho 700 で実測(docs/DESIGN_V6.md 実装メモ)。.hero__trust =「「開業」」の箱(幅 3.08em × 高さ = 行送り --hero-lh 1.32em)。
   字面は x .16〜2.90em / y .17〜1.13em、次の字(「から」「まで」)は x 3.14em から。輪(線の中心)は字面の左右 .11em・上下 .10em 外を通り、
   括弧の角(「の左上・」の右下)は角を小さく、空いている右上・左下は大きく丸める。1 つ目は左上で、2 つ目は右下で開く(2 つ目は 1 つ目を 180° 回したパス)。
   上下に並ぶ 2 つの輪どうしは線の中心で .16em 離れる。viewBox 330×152 = 幅 3.3em × 高さ 1.52em(1 単位 = .01em)。箱の左上は viewBox の (10, 10) */
.hero__ring {
  position: absolute; left: -0.1em; top: -0.1em;
  width: 3.3em; max-width: none; height: 1.52em;
  overflow: visible; pointer-events: none;
}
.hero__ring path { fill: none; stroke: var(--apricot); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@media (max-width: 1023px) { .hero__ring path { stroke-width: 3.5px; } }

.hero__lead { margin-top: clamp(14px, 2vh, 30px); max-width: 30em; font-family: var(--font-hand); font-weight: 400; font-size: 1.1875rem; line-height: 1.8; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(14px, 2vh, 32px); }
.hero__note { margin-top: 8px; font-size: 0.875rem; color: var(--ink-soft); }
.hero__photo { position: relative; order: -1; height: max(46svh, 260px); border-radius: 0 0 0 calc(var(--r-l) * 3); --clip-r: 0 0 0 calc(var(--r-l) * 3); }
.hero__kb { position: absolute; inset: 0; display: block; transform-origin: 60% 40%; }
.hero__kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 28%; }
.hero__caption {
  position: absolute; z-index: 2; top: 20px; right: 18px;
  writing-mode: vertical-rl;
  font-family: var(--font-hand); font-size: 12px; font-weight: 400; letter-spacing: 0.2em; line-height: 1.6;
  color: var(--paper);
  padding: 12px 6px;
  border-radius: var(--r-pill);
  background: rgba(74, 51, 40, 0.36);
}
/* スクロール手がかり(≥1024px) */
.hero__scroll { display: none; }
/* 実績のシール「全国でも 導入実績 多数」(v6。数字は書かない): 文字は径に比例 */
.hero__stamp { --size: 104px; --rot: -6deg; position: absolute; z-index: 4; left: var(--gutter); top: calc(max(46svh, 260px) - var(--size) + 22px); }
.hero__stamp-a { font-size: calc(var(--size) * 0.088); letter-spacing: 0.14em; margin-right: -0.14em; }
.hero__stamp-b { font-size: calc(var(--size) * 0.158); letter-spacing: 0.04em; line-height: 1.2; margin: 0.12em -0.04em 0.08em 0; }
.hero__stamp-c { font-size: calc(var(--size) * 0.19); letter-spacing: 0.24em; margin-right: -0.24em; line-height: 1.1; }
.hero__facts { position: relative; border-bottom: 1px solid var(--rule); }
.hero__facts-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px clamp(24px, 3vw, 48px);
  padding: 14px var(--gutter);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em;
}
.hero__facts-list li { display: flex; align-items: center; }
/* 4 本柱の線画アイコン(墨 1 色。小さく描くぶん stroke を太くして、見た目の線幅を 04 の 3 人物アイコン(34px・1.5)に揃える) */
.hero__facts-icon { flex: none; width: 26px; height: 26px; margin-right: 0.5em; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; --icon-fill: var(--paper); }
.hero__facts-no { margin-right: 0.7em; font-family: var(--font-head); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--apricot-deep); }

/* <768px: 巨大 3 行の 1 行目を写真の下端に 1 行ぶん重ねる(紙の帯で読ませる) */
@media (max-width: 767px) {
  .hero__brand { display: none; }
  /* キッカー(≒0.68em)+ 1 行目の 0.9em を写真に重ねる */
  .hero__copy { position: relative; margin-top: calc(var(--fs-hero) * -1.6); padding-top: 0; }
  .hero__kicker { background: var(--paper); padding: 0.15em 0.6em 0.1em; margin-left: -0.6em; margin-bottom: 0.3em; }
  .hero__lead { font-size: 1.0625rem; line-height: 1.8; }
  .hero__stamp { left: auto; right: var(--gutter); top: calc(max(46svh, 260px) - var(--size) - 36px); }
  .hero__facts-list { flex-direction: column; align-items: flex-start; font-size: 0.875rem; }
  .hero__caption { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__copy { padding-top: 40px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 100svh; }
  .hero__main { flex: 1; grid-template-columns: var(--split) 1fr; min-height: 0; }
  .hero__copy {
    /* 巨大見出しの最長行(--hero-k em)の紙の帯の右端(文字 + 帯 .2em)が写真の左端から約 1.2em までに収まるよう、左余白を決める(v5) */
    padding: clamp(10px, 1.6vh, 40px) 24px clamp(10px, 1.6vh, 40px) clamp(var(--gutter), calc(100% + var(--fs-hero) * 1.2 - var(--fs-hero) * (var(--hero-k) + 0.2)), calc(100% - 420px));
  }
  /* リードは見出しより右に出さず、はんこ(写真の左端をまたぐ)にも触れない */
  .hero__lead { max-width: min(calc(var(--fs-hero) * var(--hero-k)), calc(100% - var(--stamp-gap, 84px))); line-height: 1.8; }
  .hero__brand .hanko--sm { --size: 36px; }
  .hero__brand-catch { display: none; }
  .hero__photo { order: 0; height: auto; min-height: 0; border-radius: 0 0 0 calc(var(--r-l) * 6); --clip-r: 0 0 0 calc(var(--r-l) * 6); }
  /* 左端を紙色へ溶かす(帯が写真に「溶ける」) */
  .hero__photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--paper), rgba(248, 242, 233, 0) 18%); }
  /* マウス・パララックスで写真を ±14px 動かしても端が見えないよう、少し大きく敷く */
  .hero__kb { inset: -16px; }
  .hero__stamp { --size: 172px; left: calc(var(--split) - var(--size) / 2); top: auto; bottom: 40px; }
  .hero__facts-list { padding-block: clamp(8px, 1.2vh, 18px); }
  .hero__scroll {
    position: absolute; z-index: 3; right: 18px; bottom: 24px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 12px 6px 10px;
    border-radius: var(--r-pill);
    background: rgba(74, 51, 40, 0.36);
    color: var(--paper);
    pointer-events: none;
  }
  .hero__scroll-txt { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; line-height: 1; margin-right: -0.3em; }
  .hero__scroll-line { position: relative; width: 1px; height: 44px; background: rgba(248, 242, 233, 0.45); }
  .hero__scroll-dot { position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); animation: hero-scroll 1.8s var(--ease-in-out) infinite; }
}
@keyframes hero-scroll { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(38px); opacity: 0; } }
.no-anim .hero__scroll-dot { animation: none; opacity: 1; transform: translateY(19px); }
@media (min-width: 1024px) and (max-height: 800px) {
  .hero__brand { display: none; }
  .hero__lead { font-size: 1.0625rem; line-height: 1.65; margin-top: 12px; }
  .hero__actions { margin-top: 14px; }
  .hero__actions .btn--lg { padding-inline: 1.3em; font-size: 1rem; min-height: 48px; }
  .hero__note { margin-top: 6px; font-size: 0.8125rem; }
  .hero .hero__facts-list { padding-block: 8px; font-size: 0.875rem; }
  .hero__stamp { --size: 150px; bottom: 28px; }
  .btn--lg { min-height: 50px; }
}
/* 1024〜1279px: 列が狭く inline-block の文節スパンが早めに折り返して行が増えるので、
   長めの説明文は auto-phrase と .nb だけで折り返す(1 画面に収める) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .row-item .ph, .sec-note .ph, .bleed-r__body .sec-lead .ph, .records__body .sec-lead .ph, .step .ph, .cell p .ph { display: inline; }
  .row-item p { font-size: 0.9rem; line-height: 1.6; }
  .row-item { padding-block: clamp(8px, 1.2vh, 16px); }
  .strength__body, .startup__body, .attendance__body, .records__body { padding-block: clamp(16px, 2.6vh, 32px); }
  .strength.bleed-l { --ph-w: 38%; } /* v5.1: 対応サービスの一覧を足したぶん、本文の列を広げて 1 画面に収める */
  .strength.bleed-l .strength__photo img { object-position: 35% 30%; } /* 写真の列が細くなったぶん、右の人物の顔が切れないよう寄せる */
}
/* 1024〜1279px: 左カラムが狭いので、はんこは写真の内側に寄せる */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero { --stamp-gap: 8px; }
  .hero__stamp { --size: 136px; left: calc(var(--split) + 14px); bottom: 22px; }
}
.js:not(.no-anim) .hero__photo.is-on .hero__kb { animation: kenburns 18s linear 1.4s forwards; }
.js:not(.no-anim) .hero__photo[data-anim="clip"] { transition-duration: 1.4s; }
.js:not(.no-anim) .hero__photo[data-anim="clip"] img { transition-duration: 1.4s; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

/* --------------------------------------------------------------------------
   8. 01 お悩み — 写真 24% / 見出し 30% / リスト 46%
   -------------------------------------------------------------------------- */
.problem { --ph-w: 20%; }
.problem__photo { border-radius: 0 var(--r-photo) var(--r-photo) 0; --clip-r: 0 var(--r-photo) var(--r-photo) 0; }
.problem__photo img { object-position: 85% 55%; }
.problem__body { display: grid; gap: 28px; }
.problem__side .sec-head { margin-bottom: clamp(16px, 3vh, 32px); }
.problem__closing {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.25rem; line-height: 1.75; letter-spacing: 0.03em;
  font-feature-settings: "palt";
}
.problem__closing .dot { color: var(--apricot); }
.problem__list { border-bottom: 1.5px dashed var(--rule-dash); }
/* 項目の区切りは点線(描画の罫 .rl を点線にする) */
.problem__list .rl, .rows .rl, .sec-note .rl { height: 0; background: none; border-top: 1.5px dashed var(--rule-dash); }
.numbered {
  position: relative;
  display: grid; grid-template-columns: 3.6rem 1fr; column-gap: 8px; align-content: start;
  padding: clamp(14px, 2.6vh, 26px) 0;
}
.numbered__no { grid-row: span 2; font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--apricot-deep); }
.numbered__title { font-size: 1.25rem; line-height: 1.5; }
.numbered p { margin-top: 4px; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
@media (min-width: 1024px) {
  .problem__body { grid-template-columns: minmax(min-content, 30fr) 46fr; gap: clamp(32px, 3.6vw, 64px); align-items: center; min-height: calc(100svh - var(--header-h)); padding-left: clamp(32px, 3.4vw, 56px); }
  .problem__side { align-self: center; }
}

/* --------------------------------------------------------------------------
   9. 04 ウェブサイト制作(旧 02 なぜサイト)— 全面裁ち落とし+ココアのグラデ+紙のパネル+下の帯+料金のシール
   -------------------------------------------------------------------------- */
.why { color: var(--paper-on-cocoa); background: var(--cocoa); }
.why__bg { position: absolute; inset: -70px 0; z-index: 0; background: var(--cocoa); }
/* 人物が右に来るよう左右反転(見出しを左上に置くため) */
.why__bg img { object-position: 30% 40%; transform: scaleX(-1); }
.why__shade {
  position: absolute; inset: 0; z-index: 0;
  /* v5: 墨のグラデ → ココア */
  background: linear-gradient(rgba(74, 51, 40, 0.70), rgba(58, 39, 32, 0.84));
}
.why__inner { display: flex; flex-direction: column; gap: clamp(24px, 4vh, 48px); }
.why__head { margin: 0; max-width: 40em; }
@media (max-width: 767px) { .why .sec-title .why__nb-last { white-space: normal; } }
.why__head .sec-title { color: var(--paper-on-cocoa); font-size: clamp(2rem, min(1.4rem + 2.2vw, 1rem + 4.4vh), 3.6rem); }
.why__lead { margin-top: clamp(10px, 2vh, 20px); color: var(--paper-on-cocoa); font-family: var(--font-hand); font-weight: 400; font-size: 1.0625rem; }
.why__panel {
  --fy: 40px;
  position: relative;
  background: var(--paper-light);
  color: var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-soft);
  padding: 56px clamp(20px, 2.6vw, 40px) clamp(20px, 3.4vh, 36px);
}
.why__panel .folio--panel { top: 8px; right: 22px; font-size: clamp(4rem, 7vw, 6.5rem); color: var(--paper-deep); }
.why__quote {
  position: absolute; z-index: 2; left: -24px; top: 0;
  transform: translateY(-50%);
  max-width: calc(100% - 120px);
  padding: 12px 24px 12px 22px;
  background: var(--paper);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--apricot);
}
.why__quote p { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem); line-height: 1.5; font-feature-settings: "palt"; }
.why__cols { position: relative; z-index: 1; display: grid; }
.why-col { padding: 16px 0; border-top: 1.5px dashed var(--rule-dash); }
.why-col:first-child { border-top: 0; }
.why-col__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.why-col__no { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--apricot-deep); }
.why-col__title { font-size: 1.2rem; }
.why-col__icon { width: 34px; height: 34px; margin-left: auto; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; --icon-fill: var(--paper-light); }
.why-col p { font-size: 0.9375rem; line-height: 1.8; color: var(--ink-soft); }
@media (max-width: 1023px) {
  /* SP・タブレット: 写真は上の帯にして、見出しが顔に重ならないようにする */
  .why { padding-top: 0; }
  .why__bg { inset: 0 0 auto 0; height: clamp(240px, 62vw, 420px); }
  .why__shade { background: linear-gradient(to bottom, rgba(74, 51, 40, 0) 0, rgba(74, 51, 40, 0) clamp(140px, 40vw, 280px), var(--cocoa) clamp(240px, 62vw, 420px)); }
  .why__inner { padding-top: clamp(200px, 54vw, 370px); }
  .why__quote { position: relative; left: auto; transform: none; max-width: none; margin: -40px 0 18px -8px; }
  .why__panel { padding-top: 24px; margin-top: 24px; }
}
@media (min-width: 900px) {
  .why__cols { grid-template-columns: repeat(3, 1fr); }
  .why-col { padding: 2px clamp(18px, 2.2vw, 32px); border-top: 0; border-left: 1.5px dashed var(--rule-dash); }
  .why-col:first-child { padding-left: 0; border-left: 0; }
  .why-col:last-child { padding-right: 0; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  .why { justify-content: stretch; }
  .why__inner { flex: 1; justify-content: space-between; padding-top: clamp(8px, 3vh, 40px); }
  .why__panel { margin-top: auto; }
}
/* v6: 見出しの右に料金のシール(旧ヒーローの丸シールを流用)と制作期間の目安 */
.website__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 40px; }
.website__price { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.website__seal { --size: 148px; --rot: -6deg; }
.website__seal .maru__label { font-size: calc(var(--size) * 0.088); }
.website__seal .maru__num { font-size: calc(var(--size) * 0.238); }
.website__seal .maru__unit { font-size: calc(var(--size) * 0.081); }
.website__term { padding: 3px 14px; border-radius: var(--r-pill); background: rgba(58, 39, 32, 0.62); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.6; white-space: nowrap; color: var(--paper-on-cocoa); }
/* パネルの下の帯: 3 項目を横並び(番号 + 短い点線。チェック印は使わない) */
.website__band { position: relative; z-index: 1; display: grid; gap: 10px; }
.website__band li { display: flex; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1.5px dashed rgba(248, 242, 233, 0.32); }
.website__band-no { flex: none; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1; color: var(--apricot-on-cocoa); }
.website__band-t { font-weight: 700; font-size: 1rem; line-height: 1.5; color: var(--paper-on-cocoa); }
.website__band-s { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 400; line-height: 1.55; color: rgba(248, 242, 233, 0.8); }
@media (min-width: 900px) {
  .website__band { grid-template-columns: 1fr 1.7fr 1fr; gap: 0 clamp(20px, 2.6vw, 40px); }
}
@media (max-width: 767px) {
  .website__top { flex-direction: column; }
  .website__price { flex-direction: row; align-self: flex-end; }
  .website__seal { --size: 120px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .website__seal { --size: 128px; } }

/* --------------------------------------------------------------------------
   10. 02 できること — 4 本柱の罫線グリッド 1 行 × 4 列(罫線を描画。旧「8つの要素」の .cell の見た目を流用)
   -------------------------------------------------------------------------- */
.sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 40px; position: relative; z-index: 1; }
.sec-head--row .sec-lead { margin-top: 0; }
.services__lead { max-width: 25em; line-height: 1.75; }
.services__wrap { position: relative; z-index: 1; }
.sg { display: none; position: absolute; background: var(--rule); pointer-events: none; z-index: 1; }
.services__grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule-strong); }
.cell {
  position: relative;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.cell__no { display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--apricot); margin-bottom: 8px; }
.cell__title { font-size: 1.2rem; line-height: 1.45; }
.cell p { margin-top: 6px; font-size: 0.95rem; line-height: 1.75; color: var(--ink-soft); }
.svc { display: flex; flex-direction: column; }
.svc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.svc__top .cell__no { margin-bottom: 0; }
/* 4 本柱の線画アイコン(見た目の線幅を 04 の 3 人物アイコンに揃える) */
.svc__icon { flex: none; width: 46px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; --icon-fill: var(--paper-light); }
.cell p.svc__series { margin: 0 0 2px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--apricot-deep); }
@media (min-width: 1024px) and (max-width: 1279px) { .cell p.svc__series { font-size: 0.95rem; } } /* 「ケアプランナーPro 開業」を 1 行に収める */
.svc__text { flex: 1; }
.svc__more { align-self: flex-start; margin-top: 12px; font-size: 0.9375rem; }
.services__closing { position: relative; z-index: 1; margin-top: clamp(16px, 3vh, 32px); font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.6; }
@media (min-width: 600px) and (max-width: 1023px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--rule); }
  .cell { padding: 18px 20px; border-right: 1px solid var(--rule); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(4, 1fr); border-top: 0; }
  .services .sec-head { margin-bottom: clamp(18px, 3.6vh, 44px); }
  .cell { border-bottom: 0; border-radius: var(--r-m); padding: clamp(18px, 4vh, 44px) clamp(18px, 2vw, 32px); transition: background-color .25s var(--ease-out); }
  .cell:nth-child(4n + 1) { padding-left: clamp(4px, 0.6vw, 10px); }
  .cell:hover { background-color: var(--paper-light); }
  .cell__no { font-size: 2.8rem; }
  .svc__top { margin-bottom: clamp(10px, 2.4vh, 24px); }
  .sg { display: block; }
  .sg--t, .sg--b { left: 0; right: 0; height: 1px; transform-origin: left center; }
  .sg--t { top: 0; background: var(--rule-strong); }
  .sg--b { bottom: 0; }
  .sg--v1, .sg--v2, .sg--v3 { top: 0; bottom: 0; width: 1px; transform-origin: center top; }
  .sg--v1 { left: 25%; }
  .sg--v2 { left: 50%; }
  .sg--v3 { left: 75%; }
}

/* --------------------------------------------------------------------------
   11. 03 開業サポート / 06 スタッフ勤怠 — 本文 58% / 写真 42%(右 bleed)
   行(.rows > .row-item)と締めの一言(.sec-note)は 05 利用者管理・07 強みと共通
   -------------------------------------------------------------------------- */
.startup, .attendance { --ph-w: 42%; }
.startup__photo, .attendance__photo { border-radius: calc(var(--r-l) * 8) 0 0 0; --clip-r: calc(var(--r-l) * 8) 0 0 0; }
.startup__photo img { object-position: 22% 30%; }
.attendance__photo img { object-position: 72% 28%; }
.startup__body .sec-head, .attendance__body .sec-head { position: relative; z-index: 1; margin-bottom: clamp(12px, 2.6vh, 32px); }
.startup__body .sec-lead, .attendance__body .sec-lead { max-width: 34em; line-height: 1.75; }
@media (min-width: 1024px) {
  .startup__body, .attendance__body { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); }
}

/* 行(番号 + 見出し + 説明)。項目の区切りは点線 */
.rows { position: relative; z-index: 1; border-bottom: 1.5px dashed var(--rule-dash); }
.row-item {
  position: relative;
  display: grid; grid-template-columns: 4.2rem 1fr; column-gap: 8px;
  padding: clamp(10px, 1.6vh, 24px) 0;
}
.row-item__no { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--apricot); }
.row-item__title { font-size: 1.35rem; line-height: 1.45; margin-bottom: 4px; }
.row-item p { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); }
/* 締めの一言(--font-hand = BIZ UDPGothic 400) */
.sec-note {
  position: relative; z-index: 1;
  margin-top: clamp(8px, 1.4vh, 22px); padding-top: clamp(8px, 1.2vh, 14px);
  font-family: var(--font-hand); font-weight: 400; font-size: 1.25rem; line-height: 1.6;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   12. 05 利用者管理 — 写真 32%(左 bleed)/ 本文 68%。「紙・エクセル / ケアプランナーPro 記録」の対比 + 行 2 × 2
   画面キャプチャ・製品名・料金は出さない(docs/DESIGN_V6.md)
   -------------------------------------------------------------------------- */
.records { --ph-w: 32%; }
.records__photo { border-radius: 0 calc(var(--r-l) * 8) 0 0; --clip-r: 0 calc(var(--r-l) * 8) 0 0; }
.records__photo img { object-position: 58% 30%; } /* 細い列でスタッフの顔が中央、左に利用者の横顔が入る位置 */
.records__body .sec-head { position: relative; z-index: 1; margin-bottom: clamp(12px, 2.4vh, 28px); }
.records__body .sec-lead { max-width: 38em; line-height: 1.75; }
.vs { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: clamp(8px, 1.6vh, 20px); }
.vs__card { padding: 10px 16px 12px; border-radius: var(--r-m); }
/* 左「紙・エクセル」は薄い墨の点線枠、右「ケアプランナーPro 記録」は杏の枠 */
.vs__card--old { border: 1.5px dashed var(--rule-strong); color: var(--ink-soft); }
.vs__card--new { border: 2px solid var(--apricot); background: var(--paper-light); }
.vs__title { margin-bottom: 4px; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.5; letter-spacing: 0.04em; }
.vs__card--new .vs__title { color: var(--apricot-deep); }
.vs__list li { position: relative; padding-left: 1.1em; font-size: 0.9rem; line-height: 1.65; }
.vs__list li::before { content: ""; position: absolute; left: 0; top: 0.82em; width: 0.6em; height: 1.5px; border-radius: var(--r-pill); background: var(--rule-strong); }
.vs__card--new .vs__list li::before { background: var(--apricot); }
@media (max-width: 559px) { .vs { grid-template-columns: 1fr; } }
@media (min-width: 1024px) {
  .records__body { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); }
  .rows--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2.4vw, 40px); }
  .rows--grid .row-item { grid-template-columns: 3.4rem 1fr; }
  .rows--grid .row-item__no { font-size: 2.2rem; }
  .rows--grid .row-item__title { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   13. 07 強み — 写真 44%(左 bleed)/ 本文 56%
   -------------------------------------------------------------------------- */
.strength { --ph-w: 44%; }
.strength__photo { border-radius: 0 calc(var(--r-l) * 8) 0 0; --clip-r: 0 calc(var(--r-l) * 8) 0 0; }
.strength__photo img { object-position: 31% 30%; }
.strength__body .folio--tr { right: var(--edge); top: clamp(12px, 3vh, 40px); }
.strength__body .sec-head { position: relative; z-index: 1; margin-bottom: clamp(10px, 2vh, 28px); }
/* v5.1: 対応サービスの一覧(ヒーローから移設)。1 行に収まる大きさ */
.strength__types { margin-top: 8px; font-size: 0.875rem; line-height: 1.6; }
.strength__rows .row-item { padding-block: clamp(8px, 0.95vh, 18px); } /* v6: 行が 4 つになったので 1.1vh → 0.95vh */
@media (min-width: 1024px) {
  .strength__body { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); }
}

/* --------------------------------------------------------------------------
   14. 08 導入の流れ — タイムライン+写真帯
   -------------------------------------------------------------------------- */
.flow__track { position: relative; }
.flow__line { display: none; position: absolute; left: 0; right: 0; top: -1px; height: 0; border-top: 2px dashed var(--rule-strong); transform-origin: left center; }
.flow__steps { display: grid; position: relative; z-index: 1; }
.step { position: relative; padding: 0 0 22px 28px; border-left: 2px dashed var(--rule-strong); }
/* 杏の丸 + 若草の外輪(2px、offset 3px) */
.step__dot { position: absolute; left: -7px; top: 0.7em; width: 12px; height: 12px; border-radius: 50%; background: var(--apricot); outline: 2px solid var(--moss); outline-offset: 3px; }
.step__no { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--apricot); }
.step__title { font-size: var(--fs-h3); line-height: 1.45; margin-top: 4px; }
.step p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.75; color: var(--ink-soft); }
.flow__band { position: relative; margin-top: 32px; }
.flow__band-photo { height: 220px; border-radius: var(--r-photo); --clip-r: var(--r-photo); }
@media (min-width: 1024px) { .flow__band-photo { margin-inline: var(--edge); } }
.flow__band-par { position: absolute; inset: -40px 0; display: block; }
.flow__band-par img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.flow__band-inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.flow__note {
  display: inline-block; max-width: min(100%, 30em);
  margin-bottom: 16px;
  padding: 12px 20px;
  background: var(--paper);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-hand); font-weight: 400; font-size: 1.0625rem; line-height: 1.7;
}
@media (min-width: 900px) {
  .flow__line { display: block; }
  .flow__steps { grid-template-columns: repeat(5, 1fr); }
  .step { padding: 28px clamp(14px, 1.6vw, 24px) 0 0; border-left: 0; }
  .step__dot { left: 5px; top: -7px; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  .flow { padding-bottom: 0; justify-content: flex-start; }
  .flow__top { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(16px, 3vh, 36px); }
  .flow__band { margin-top: 0; }
  .flow__band-photo { height: 26vh; }
  .flow__note { margin-bottom: clamp(14px, 2.6vh, 28px); }
}

/* --------------------------------------------------------------------------
   15. 09 お客様の声 — 写真 34%(左 bleed)/ 引用 66%
   -------------------------------------------------------------------------- */
/* お客様の声(サンプル)を非表示にする場合は次の行のコメントを外す(ナビの項目も JS で自動的に消えます) */
/* [data-sample="true"] { display: none !important; } */
.voice { --ph-w: 34%; }
.voice__photo { border-radius: 0 calc(var(--r-l) * 8) 0 0; --clip-r: 0 calc(var(--r-l) * 8) 0 0; }
.voice__photo img { object-position: 64% 30%; }
.voice__body .sec-head { position: relative; z-index: 1; }
.voice__list { position: relative; z-index: 1; border-top: 1px solid var(--rule-strong); }
.voice-item { position: relative; padding: clamp(18px, 3.4vh, 36px) 0; border-bottom: 1.5px dashed var(--rule-dash); }
.voice-item:last-child { border-bottom: 0; }
.voice-item .stamp { top: clamp(18px, 3.4vh, 36px); right: 0; }
.voice-item__text { font-family: var(--font-hand); font-weight: 400; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); line-height: 1.9; letter-spacing: 0.03em; padding-right: 100px; font-feature-settings: "palt"; }
/* 引用符は杏の見出し書体(BIZ UDPMincho) */
.voice-item__q { font-family: var(--font-head); font-weight: 700; color: var(--apricot); }
.voice-item__by { margin-top: 8px; font-size: 0.85rem; color: var(--ink-soft); }
.voice-item__by::before { content: "― "; }
@media (min-width: 1024px) {
  .voice__body { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); }
}

/* --------------------------------------------------------------------------
   16. 10 FAQ
   -------------------------------------------------------------------------- */
.faq .container { position: relative; z-index: 1; }
.faq__list { border-top: 1px solid var(--rule-strong); }
.qa { position: relative; border-bottom: 1.5px dashed var(--rule-dash); }
.qa::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: var(--r-pill);
  background: var(--apricot);
  transform: scaleY(0); transform-origin: center top;
  transition: transform .45s var(--ease-out);
}
.qa.is-open::before, html:not(.js) .qa[open]::before { transform: none; }
.qa__q {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(11px, 2vh, 18px) 4px clamp(11px, 2vh, 18px) 16px;
  cursor: pointer; list-style: none;
  font-weight: 700;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q-text { flex: 1; }
.qa__q-text { display: flex; align-items: baseline; }
/* Q の印: 杏の丸(28px)に白文字 */
.qa__q-text::before {
  content: "Q"; flex: none; align-self: flex-start;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin: 0.1em 0.7em 0 0;
  border-radius: 50%;
  background: var(--apricot); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9375rem; line-height: 1;
}
/* 開閉: 丸い枠の +/-。開くと杏で塗る */
.qa__toggle {
  position: relative; flex: none;
  width: 28px; height: 28px;
  border: 1.5px solid var(--rule-strong); border-radius: 50%;
  color: var(--ink);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.qa__toggle::before, .qa__toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px;
  border-radius: var(--r-pill); background: currentColor;
  transition: transform .45s var(--ease-out);
}
.qa__toggle::after { transform: rotate(90deg); }
.qa.is-open .qa__toggle, html:not(.js) .qa[open] .qa__toggle { background: var(--apricot-deep); border-color: var(--apricot-deep); color: #fff; }
.qa.is-open .qa__toggle::after, html:not(.js) .qa[open] .qa__toggle::after { transform: rotate(0deg); }
.qa__q:hover .qa__q-text { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.3em; }
.qa__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease-out); }
.js .qa__a { grid-template-rows: 0fr; }
.js .qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a-in { overflow: hidden; min-height: 0; }
.qa__a p { padding: 0 14px clamp(12px, 2.2vh, 20px) calc(16px + 28px + 0.7em); font-size: 1rem; line-height: 1.85; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   17. 11 運営会社
   -------------------------------------------------------------------------- */
.company__layout { display: grid; gap: 32px; }
@media (min-width: 1024px) { .company__layout { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; } }
.company__brand { display: flex; align-items: center; gap: 22px; }
.company__logo { width: 72px; height: auto; flex-shrink: 0; }
.company__mission { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.5; font-feature-settings: "palt"; }
.company__relation { margin-top: 18px; padding: 10px 0; border-top: 1.5px dashed var(--rule-dash); border-bottom: 1.5px dashed var(--rule-dash); font-weight: 400; font-size: 1rem; }
.company__relation .brand-name { font-family: var(--font-head); font-weight: 700; color: var(--apricot-deep); }
.company__text { margin-top: 14px; font-size: 1rem; line-height: 1.85; color: var(--ink-soft); }
.values { margin-top: 16px; display: grid; }
.values li { display: grid; grid-template-columns: 14.6em 1fr; gap: 12px; padding: 6px 0; border-bottom: 1.5px dashed var(--rule-dash); font-size: 0.9375rem; }
.values__en { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; } /* v5.2: 明朝 700 の欧文は幅が広いので列を 14.6em に */
.values__ja { color: var(--ink-soft); }
@media (max-width: 559px) { .values li { grid-template-columns: 1fr; gap: 0; } }
.company__table-wrap { position: relative; }
.info-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.7; }
.info-table th, .info-table td { padding: clamp(8px, 1.5vh, 13px) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.info-table th { width: 6.5em; font-weight: 700; color: var(--ink-soft); }
.info-table a { text-decoration-color: var(--rule-strong); text-underline-offset: 0.25em; }

/* --------------------------------------------------------------------------
   18. 12 無料相談 — ココアの面(v5)+ご相談内容のチェック群(v6)
   -------------------------------------------------------------------------- */
.contact { background: var(--cocoa); color: var(--paper-on-cocoa); }
.contact__bg { position: absolute; inset: 0; z-index: 0; background: var(--cocoa); }
.contact__bg img { object-position: 60% 50%; }
.contact__bg::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(rgba(74, 51, 40, 0.70), rgba(58, 39, 32, 0.84)); }
.contact .sec-title { color: var(--paper-on-cocoa); font-size: clamp(2rem, min(1.4rem + 2.2vw, 1rem + 4.4vh), 3.6rem); }
.contact .sec-lead { color: var(--paper-on-cocoa); }
.contact__layout { display: grid; gap: 36px; }
.contact__side { position: relative; }
.contact__direct { display: grid; gap: 4px; }
.direct {
  display: flex; flex-direction: column;
  padding: 12px 0;
  border-bottom: 1.5px dashed rgba(248, 242, 233, 0.26);
  text-decoration: none;
  transition: border-color .3s var(--ease-out);
}
.direct:first-child { border-top: 1.5px dashed rgba(248, 242, 233, 0.26); }
.direct:hover { border-bottom-color: var(--apricot-on-cocoa); }
.direct__label { font-size: 0.8125rem; font-weight: 700; color: rgba(248, 242, 233, 0.78); }
.direct__value { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--paper-on-cocoa); }
.direct__value--tel { font-size: 2rem; white-space: nowrap; overflow-wrap: normal; }
/* v5.2: 明朝 700 の数字は幅が広い(8.9em)。1024〜1279 の狭い列で折り返さないよう一段下げる */
@media (min-width: 1024px) and (max-width: 1279px) { .direct .direct__value--tel { font-size: 1.5rem; } }
.direct__note { font-size: 0.8125rem; color: rgba(248, 242, 233, 0.78); }
.contact__seal { margin-top: 24px; }
@media (min-width: 1024px) {
  .contact__layout { grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 88px); align-items: center; }
  .contact__seal { position: absolute; left: auto; right: 0; bottom: -8px; margin: 0; }
  .contact__direct { max-width: calc(100% - 136px); }
}

.form { display: grid; gap: clamp(10px, 2vh, 18px); }
.form__row { display: grid; gap: clamp(10px, 2vh, 18px); }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: 4px; }
.form label { font-size: 0.9375rem; font-weight: 700; color: var(--paper-on-cocoa); transition: color .3s var(--ease-out); }
.form__field:focus-within label { color: var(--apricot-on-cocoa); }
.req, .opt { margin-left: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.req { color: var(--apricot-on-cocoa); }
.opt { color: rgba(248, 242, 233, 0.7); }
/* 入力欄: 紙色の塗り・枠なし・角丸。フォーカスで杏 2px のリング */
.form input, .form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--paper-light);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  transition: box-shadow .25s var(--ease-out);
}
.form textarea { resize: vertical; min-height: 96px; }
/* ご相談内容(複数可)のチェック群(v6。name="topic[]"、任意)。紙色の細い枠のピル、選ぶと杏 */
.form__checks { min-width: 0; margin: 0; padding: 0; border: 0; }
.form__legend { padding: 0; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 700; color: var(--paper-on-cocoa); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.form .check {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 13px 4px 10px;
  border: 1px solid rgba(248, 242, 233, 0.32); border-radius: var(--r-pill);
  background: rgba(248, 242, 233, 0.06);
  font-size: 0.875rem; font-weight: 400; line-height: 1.6;
  cursor: pointer;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.form .check input { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; border-radius: 4px; background: none; accent-color: var(--apricot-deep); cursor: pointer; }
.form .check input:focus, .form .check input:focus-visible { box-shadow: none; }
.form .check:has(input:checked) { border-color: var(--apricot-on-cocoa); background: rgba(240, 180, 140, 0.16); }
.form .check:has(input:focus-visible) { outline: 2px solid var(--apricot-on-cocoa); outline-offset: 2px; }
.form .check:hover { border-color: rgba(248, 242, 233, 0.6); }
.form input::placeholder, .form textarea::placeholder { color: rgba(58, 42, 34, 0.5); }
.form input:focus, .form textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--apricot); }
.form input:focus-visible, .form textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--apricot); }
.form__privacy { font-size: 0.8125rem; color: rgba(248, 242, 233, 0.78); }
.form__status:not(:empty) { padding: 10px 14px; border-radius: var(--r-m); border-left: 4px solid var(--apricot); background: var(--cocoa-deep); font-weight: 700; }
.form__status:focus { outline: none; }
/* ハニーポット(name="website"、人には見えない・触れない)。display:none だと無視するボットがあるので画面外に置く */
.form__hp { position: absolute; left: -9999px; top: auto; width: 0; height: 0; overflow: hidden; }
/* 送信中(js/main.js が disabled + .is-sending を付ける) */
.form button[type="submit"]:disabled { cursor: progress; opacity: .72; transform: none; box-shadow: none; }
.form button[type="submit"].is-sending::after { display: none; }
/* 送信完了: .form の箱は残し、中身をこのブロックに差し替える */
.form.is-done { align-content: center; }
.form__done { padding: 20px 22px; border-radius: var(--r-m); border-left: 4px solid var(--apricot); background: var(--cocoa-deep); }
.form__done:focus { outline: none; }
.form__done-title { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--paper-on-cocoa); }
.form__done-text { margin-top: 6px; font-weight: 400; color: var(--paper-on-cocoa); }
.contact :focus-visible { outline-color: var(--apricot-on-cocoa); }
.contact .btn:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }

/* --------------------------------------------------------------------------
   19. Footer / Floating CTA
   -------------------------------------------------------------------------- */
.site-footer { position: relative; background: var(--cocoa-deep); color: var(--paper-on-cocoa); padding-block: 0 32px; font-size: 0.875rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 28px; border-top: 1px solid rgba(248, 242, 233, 0.16); }
.site-footer > .container { max-width: calc(var(--container) + var(--gutter) * 2); }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } /* 狭い画面では「運営: …」を名前の下に */
.site-footer__brand .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.06em; }
.site-footer__op { color: rgba(248, 242, 233, 0.78); }
.site-footer__orca { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer__links a { color: rgba(248, 242, 233, 0.78); text-underline-offset: 0.3em; }
.site-footer__copy { color: rgba(248, 242, 233, 0.78); }
.site-footer :focus-visible { outline-color: var(--apricot-on-cocoa); }
@media (min-width: 900px) { .site-footer__links { margin-left: auto; } }

/* フローティング CTA: 杏のピル。ホバーで 2px 浮く + 影 */
.float-cta {
  position: fixed; z-index: 90;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--apricot-deep);
  color: #fff;
  font-weight: 700; font-size: 1rem; letter-spacing: 0.1em;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out), visibility 0s;
}
.float-cta:hover, .float-cta:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.float-cta.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease-out), visibility 0s linear .25s; }
html:not(.js) .float-cta { display: none; }

/* --------------------------------------------------------------------------
   20. モーション(lines / fade / clip / rule / draw / seal / stamp / pop / count)
   v5: 「切れる」より「浮かぶ」。lines に translateY(.35em) の浮き、clip は角丸付き、stamp → seal(貼る)
   隠れた初期状態は .js かつ .no-anim でないときだけ。
   ?shot=1・reduced-motion・非 JS・印刷では最終状態で静止する。
   各要素の遅延は JS が --d に入れる(セクションごとのタイムライン)。
   -------------------------------------------------------------------------- */
.ln { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: 0.06em; margin-block: -0.06em; }
.ln__i { display: inline-block; }

.js:not(.no-anim) [data-anim="lines"] .ln__i { transition: transform var(--dur-m) var(--ease-out) var(--d, 0ms); }
.js:not(.no-anim) [data-anim="lines"]:not(.is-on) .ln__i { transform: translate3d(0, 110%, 0); }
/* 行マスクごと .35em 下から浮かび上がる(--d は JS が .ln にも入れる) */
.js:not(.no-anim) [data-anim="lines"] .ln { transition: transform 1.1s var(--ease-float) var(--d, 0ms); }
.js:not(.no-anim) [data-anim="lines"]:not(.is-on) .ln { transform: translate3d(0, 0.35em, 0); }

.js:not(.no-anim) [data-anim="fade"] {
  transition: opacity var(--fdur, .8s) var(--ease-float) var(--d, 0ms), transform var(--fdur, .8s) var(--ease-float) var(--d, 0ms), var(--tr-x, visibility 0s);
}
.js:not(.no-anim) [data-anim="fade"]:not(.is-on) { opacity: 0; transform: translate3d(0, var(--fy, 16px), 0); }
.why__shade { --fy: 0px; --fdur: 1s; }
.cell { --tr-x: background-color .25s var(--ease-out) 0s; }

.js:not(.no-anim) [data-anim="clip"] { transition: clip-path var(--dur-l) var(--ease-out) var(--d, 0ms), var(--tr-x, visibility 0s); }
.js:not(.no-anim) [data-anim="clip"] img { transition: transform var(--dur-l) var(--ease-out) var(--d, 0ms); }
.js:not(.no-anim) [data-anim="clip"]:not(.is-on) img { transform: scale(1.12); }
/* 角丸付きで現れる。--clip-r は各写真の最終の角の形(既定 --r-photo) */
.js:not(.no-anim) [data-anim="clip"].is-on { clip-path: inset(0 round var(--clip-r, var(--r-photo))); }
.js:not(.no-anim) [data-anim="clip"]:not(.is-on) { clip-path: inset(0 0 0 100% round var(--clip-r, var(--r-photo))); }
.js:not(.no-anim) [data-anim="clip"][data-from="left"]:not(.is-on) { clip-path: inset(0 100% 0 0 round var(--clip-r, var(--r-photo))); }
.js:not(.no-anim) [data-anim="clip"][data-from="bottom"]:not(.is-on) { clip-path: inset(100% 0 0 0 round var(--clip-r, var(--r-photo))); }

[data-anim="rule"] { transform-origin: left center; }
[data-anim="rule"][data-axis="y"] { transform-origin: center top; }
.js:not(.no-anim) [data-anim="rule"] { transition: transform .8s var(--ease-in-out) var(--d, 0ms); }
.js:not(.no-anim) [data-anim="rule"]:not(.is-on) { transform: scaleX(0); }
.js:not(.no-anim) [data-anim="rule"][data-axis="y"]:not(.is-on) { transform: scaleY(0); }
.js:not(.no-anim) .flow__line { transition-duration: 1.4s; }

/* seal(シールを貼る): scale .6 → 1、rotate(-14deg) → 最終角度(--rot、既定 -6deg)、影 0 → --shadow-soft */
.js:not(.no-anim) [data-anim="seal"] { transition: opacity .25s linear var(--d, 0ms), transform .6s var(--ease-stamp) var(--d, 0ms), box-shadow .6s var(--ease-float) var(--d, 0ms); }
.js:not(.no-anim) [data-anim="seal"]:not(.is-on) { opacity: 0; transform: scale(.6) rotate(-14deg); box-shadow: 0 0 0 rgba(120, 80, 50, 0); }

.js:not(.no-anim) [data-anim="stamp"] { transition: opacity .2s linear var(--d, 0ms), transform .42s var(--ease-stamp) var(--d, 0ms); }
.js:not(.no-anim) [data-anim="stamp"]:not(.is-on) { opacity: 0; transform: scale(1.5) rotate(-9deg); }
.js:not(.no-anim) [data-anim="stamp"].is-on::after { animation: stamp-bleed .6s var(--ease-out) calc(var(--d, 0ms) + 380ms) forwards; }
@keyframes stamp-bleed { 0% { opacity: 0.18; } 100% { opacity: 0; } }

.js:not(.no-anim) [data-anim="pop"]:not(.is-on) { transform: scale(0); }
.js:not(.no-anim) [data-anim="pop"].is-on { animation: pop .5s var(--ease-float) var(--d, 0ms) both; }
@keyframes pop { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* draw(線を描く): SVG の path を pathLength="1" にして stroke-dashoffset 1 → 0。丸囲みは 1.1s --ease-out */
.js:not(.no-anim) [data-anim="draw"] path { transition: stroke-dashoffset 1.1s var(--ease-out) var(--d, 0ms); }
.js:not(.no-anim) [data-anim="draw"]:not(.is-on) path { stroke-dashoffset: 1; }

/* 到着済み・通過済みのセクションは即最終状態 */
.is-instant [data-anim], .is-instant [data-anim] *, .is-instant [data-anim]::after, [data-anim].is-instant { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html, html.is-ready { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  html.is-intro .intro { display: none; }
}

h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   21. 低めの横長画面(1280×720 等)— 1 画面に収める
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (min-height: 600px) and (max-height: 800px) {
  :root { --fs-body: 1.0625rem; }
  .sec-head { margin-bottom: 18px; }
  .eyebrow { margin-bottom: 6px; }
  .numbered { padding-block: 10px; }
  .numbered__no { font-size: 1.75rem; }
  .numbered__title { font-size: 1.125rem; }
  .numbered p { font-size: 0.9375rem; line-height: 1.65; }
  .problem__closing { font-size: 1.125rem; line-height: 1.7; }
  .why__panel { padding-top: 46px; padding-bottom: 18px; }
  .why-col p { font-size: 0.875rem; line-height: 1.7; }
  .why-col__icon { width: 28px; height: 28px; }
  .why-col__title { font-size: 1.1rem; }
  .row-item { padding-block: 9px; grid-template-columns: 3.6rem 1fr; }
  .row-item__no { font-size: 2.2rem; }
  .row-item__title { font-size: 1.2rem; margin-bottom: 2px; }
  .row-item p { font-size: 0.9rem; line-height: 1.65; }
  .bleed-r__body .sec-lead, .records__body .sec-lead { margin-top: 8px; font-size: 0.9375rem; line-height: 1.65; }
  .sec-note { font-size: 1.125rem; }
  .cell__no { font-size: 2.3rem; }
  .cell__title { font-size: 1.0625rem; }
  .cell p { margin-top: 4px; font-size: 0.875rem; line-height: 1.6; }
  .services__closing { margin-top: 14px; font-size: 1.0625rem; }
  .website__seal { --size: 124px; }
  .website__band li { padding-top: 8px; }
  .website__band-t { font-size: 0.9375rem; }
  .vs__card { padding-block: 8px 9px; }
  .vs__list li { font-size: 0.875rem; line-height: 1.6; }
  .step__no { font-size: 1.35rem; }
  .step { padding-top: 22px; }
  .step p { font-size: 0.875rem; line-height: 1.65; }
  .flow__note { font-size: 0.9375rem; padding: 9px 16px; }
  .voice-item__text { font-size: 1.3rem; line-height: 1.8; }
  .voice-item { padding-block: 14px; }
  .qa__a p { line-height: 1.7; }
  .company__relation { margin-top: 12px; padding-block: 6px; }
  .company__text { margin-top: 10px; font-size: 0.9375rem; line-height: 1.7; }
  .company__mission { font-size: 1.5rem; }
  .company__logo { width: 60px; }
  .values { margin-top: 10px; }
  .values li { padding-block: 4px; }
  .info-table th, .info-table td { padding-block: 6px; }
  .direct { padding-block: 8px; }
  .direct__value--tel { font-size: 1.75rem; }
  .form textarea { min-height: 72px; }
  .form textarea[rows] { height: 76px; }
  .form input, .form textarea { padding-block: 7px; }
  .contact .sec-lead { margin-top: 8px; font-size: 1rem; }
  .maru--paper { --size: 104px; }
  .maru__name-l1 { font-size: 0.68rem; }
  .maru__name-l2 { font-size: 1.35rem; }
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
  @page { size: A4; margin: 12mm; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html { scroll-padding-top: 0; }
  body { font-size: 10.5pt; line-height: 1.7; background: #fff; }
  body::before { display: none; }
  main, .site-footer { padding-left: 0 !important; }
  .site-header, .float-cta, .skip-link, .nav-toggle, .rail, .intro, .folio, .form button[type="submit"] { display: none !important; }
  .section, .hero { min-height: 0 !important; padding-block: 24px !important; display: block !important; overflow: visible !important; }
  .hero { padding-top: 0 !important; }
  .hero__main { grid-template-columns: 1fr 1fr !important; }
  .hero__copy { padding: 0 16px 0 0 !important; margin-top: 0 !important; } /* 印刷幅(<768px)で SP の負の margin-top が効き、見出しの上端がページ外に出ていた(v4 からの不具合) */
  .hero__title { margin-right: 0 !important; font-size: 26pt; }
  .hero__photo { aspect-ratio: 4 / 3 !important; height: auto !important; }
  .hero__stamp { --size: 110px; left: auto !important; right: 12px; bottom: 12px !important; top: auto !important; }
  .website__seal { --size: 110px; }
  .website__term { background: none !important; color: var(--ink) !important; padding: 0 !important; }
  .website__band li { border-top-color: var(--rule-dash) !important; }
  .website__band-t, .website__band-s { color: var(--ink) !important; }
  .website__band-no { color: var(--apricot-deep) !important; }
  [data-anim], [data-anim] * { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  .maru, .stamp { transform: rotate(var(--rot)) !important; }
  .bleed-l__photo, .bleed-r__photo, .why__bg, .why__shade, .contact__bg, .flow__band-photo { display: none !important; }
  .bleed-l__body, .bleed-r__body { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .problem__body { grid-template-columns: 1fr 1.4fr !important; min-height: 0 !important; }
  .why, .contact, .site-footer { background: #fff !important; color: var(--ink) !important; }
  .why__head .sec-title, .contact .sec-title, .direct__value, .form label, .site-footer__brand { color: var(--ink) !important; }
  .why__lead, .contact .sec-lead, .direct__label, .direct__note, .site-footer__op, .site-footer__copy, .site-footer__links a { color: var(--ink-soft) !important; }
  .eyebrow--onphoto .eyebrow__num { color: var(--vermilion) !important; }
  .eyebrow--onphoto .eyebrow__label { color: var(--ink) !important; }
  .why__panel { background: #fff !important; padding: 24px 0 0 !important; }
  .why__quote { position: static !important; transform: none !important; margin-bottom: 12px; max-width: none; }
  .form input, .form textarea { background: #fff; border-color: var(--ink); }
  .contact__seal { display: none; }
  .flow__band { margin-top: 12px; }
  .flow__band-inner { position: static; }
  .sec-head { break-after: avoid; break-inside: avoid; }
  .why-col__icon, .svc__icon, .hero__facts-icon { display: none; }
  .numbered, .row-item, .cell, .step, .qa, .voice-item, .vs__card, .info-table, .why__panel, .direct { break-inside: avoid; }
  .services__grid { grid-template-columns: repeat(4, 1fr); }
  .rows--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .check { border-color: var(--rule-strong) !important; background: none !important; color: var(--ink) !important; }
  .form__legend { color: var(--ink) !important; }
  .why__cols { grid-template-columns: repeat(3, 1fr); }
  .flow__steps { grid-template-columns: repeat(5, 1fr); }
  .js .qa__a { grid-template-rows: 1fr !important; }
  .qa__toggle { display: none; }
}