/* =========================================================
   ささえぎ｜中小企業の現場サポート（岡部けいすけ）
   トーン: 温かい紙 × 色鉛筆。手で描いた道具箱のような佇まい。

   設計の原則
   - 数値は全てトークン。使用箇所に生の px を置かない
   - コンテンツは既定で見える。動きは上に足すだけ（JSが死んでも読める）
   - 動かすのは transform と opacity のみ
   - 色は本文4.5:1 / UI 3:1 を全ペアで満たす
   ========================================================= */

:root {
  /* ---- 色: 紙とインク ---- */
  --paper: #faf5ec;
  --paper-deep: #f3ecdd;
  --card: #fffdf7;
  --ink: #403830;
  --ink-soft: #70655a;
  --line: #948269;          /* 色鉛筆の線: 3背景すべてに対し3.1〜3.6:1。これがブランドの芯 */
  --line-faint: #d8ccba;    /* 純装飾のみ。文字も境界も担わない */

  /* ---- 色: 柿色（用途で3つに分ける） ---- */
  --daidai: #d96f32;        /* 装飾の線・面のみ。文字を載せない */
  --daidai-ink: #a94d14;    /* 文字と塗り: 紙に対し5.1:1、白文字で5.6:1 */
  --daidai-press: #8f3f0e;  /* 押した/hover の沈み */
  --daidai-pale: #f7dcc8;   /* マーカーの下地 */

  --midori: #5d7d5a;
  --midori-pale: #dde7d9;
  --ao: #4a708c;
  --ao-pale: #d9e4ec;
  --ki: #8c6d52;            /* 幹・枝 */
  --on-daidai: #fff;

  /* ---- 手描きの角丸 ---- */
  --wobble: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --wobble-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --wobble-blob: 50% 46% 52% 48% / 48% 52% 46% 54%;

  /* ---- 書体 ---- */
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-hand: "Klee One", "Zen Kaku Gothic New", "Hiragino Mincho ProN", serif;

  /* ---- 文字サイズ（7段。使用箇所での直書きを禁止） ---- */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.5rem, 1.1rem + 1.7vw, 1.9rem);
  --text-display: clamp(1.85rem, 1.15rem + 3.1vw, 2.85rem);

  /* ---- 行間 ---- */
  --lh-display: 1.42;
  --lh-heading: 1.5;
  --lh-body: 1.85;
  --lh-snug: 1.7;

  /* ---- 余白（8pxグリッド） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;

  /* ---- 動き（hallmark基準: 3バケット＋指数イーズアウト） ---- */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- 寸法 ---- */
  --measure: 40em;
  --column: 860px;
  --gutter: clamp(18px, 5vw, 24px);
  --header-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1e1a15;
    --paper-deep: #17130f;
    --card: #292319;
    --ink: #ece3d4;
    --ink-soft: #b6a892;
    --line: #7a6c58;          /* 紙に対し約3.4:1 */
    --line-faint: #453d31;
    --daidai: #db7a30;
    --daidai-ink: #e28a44;    /* 暗い紙に対し6.6:1 */
    --daidai-press: #96481a;
    --daidai-pale: #4a3320;
    --midori: #7ba173;
    --midori-pale: #38452f;
    --ao: #6c9bba;
    --ao-pale: #23323d;
    --ki: #a1866b;
    --on-daidai: #fff;
  }
  /* 暗い紙の上では、塗りボタンは明るい柿色＋白文字で 4.8:1 */
  :root { --cta-fill: #b35a1e; }
}
/* 塗りボタン専用。白文字で4.6:1。文字色より鮮やかな柿色を保てる */
:root { --cta-fill: #bd5716; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: light dark;
}
/* 端のはみ出しは html と body の両方で止める。hidden ではなく clip
   （hidden にすると、子孫の position: sticky / fixed が壊れる） */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  line-height: var(--lh-body);
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  font-feature-settings: "palt" 1;
  text-spacing-trim: trim-start;
  line-break: strict;
  overflow-wrap: anywhere;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(217, 111, 50, 0.05), transparent 42%),
    radial-gradient(ellipse at 88% 90%, rgba(74, 112, 140, 0.05), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

a { color: var(--daidai-ink); }
:where(a, button):focus-visible {
  outline: 3px solid var(--ao);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* 読み飛ばしリンク（キーボード操作の最初の一手） */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--card);
  color: var(--daidai-ink);
  border: 2px solid var(--daidai-ink);
  border-radius: var(--wobble-2);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--dur-short) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

/* ---------- 手書き風の共通あしらい ---------- */

/* 蛍光ペン。帯は文字の胴体の裏（em box の 27〜93%）に置く。
   下端に寄せると「太い下線」に見えてしまう */
.marker {
  background-image: linear-gradient(
    96deg,
    transparent 1%,
    var(--daidai-pale) 5%,
    var(--daidai-pale) 95%,
    transparent 99%
  );
  background-size: 100% 0.70em;
  background-position: 0 64%;
  background-repeat: no-repeat;
}

.wavy {
  text-decoration: underline wavy var(--daidai-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--sp-4) 0;
  transition:
    transform var(--dur-long) var(--ease-out),
    background-color var(--dur-short) var(--ease-in-out),
    box-shadow var(--dur-short) var(--ease-in-out);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}
.site-header.is-scrolled {
  background-color: var(--paper);
  box-shadow: 0 1.5px 0 var(--line-faint);
}
@supports (backdrop-filter: blur(1px)) and (background-color: color-mix(in srgb, red 50%, transparent)) {
  .site-header.is-scrolled {
    background-color: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
}
/* 隠れている時にフォーカスが入ったら必ず戻す（WCAG 2.4.11） */
.site-header.is-hidden { transform: translateY(-105%); }
.site-header:focus-within { transform: none; }

.brand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.brand svg { flex: none; }

.header-cta {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--daidai-ink);
  text-decoration: none;
  border: 2px solid var(--daidai-ink);
  border-radius: var(--wobble-2);
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out);
}
.header-cta:hover,
.header-cta:active {
  background-color: var(--cta-fill);
  border-color: var(--cta-fill);
  color: var(--on-daidai);
}

/* 読み進みの色鉛筆ライン（スクロール連動・機能的な進捗表示） */
.scroll-crayon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background-color: var(--daidai);
  opacity: 0.7;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  display: none;
}

/* 追従ヘッダーに隠れないよう、ページ内リンクの着地点を下げる */
:target,
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-3)); }

/* ---------- ヒーロー ---------- */

.hero { padding: var(--sp-8) 0 var(--sp-9); }
.hero .wrap { position: relative; }

.hero h1 {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: var(--sp-5);
}

.hero .lede {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.hero .lede strong { color: var(--ink); font-weight: 700; }

.hero-note {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--sp-6);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.badge {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  border: 1.5px solid var(--line);
  border-radius: var(--wobble);
  padding: var(--sp-1) var(--sp-4);
  background-color: var(--card);
  color: var(--ink-soft);
}

/* ---------- CTAボタン ---------- */

.cta-btn {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--on-daidai);
  background-color: var(--cta-fill);
  border: 2px solid var(--daidai-press);
  border-radius: var(--wobble);
  padding: var(--sp-3) clamp(var(--sp-5), 6vw, var(--sp-7));
  text-decoration: none;
  box-shadow: 3px 4px 0 rgba(64, 56, 48, 0.18);
  transition:
    transform var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}
/* ホバーで変えるのは「浮き上がり」と「影」の2つだけ。
   色は押した瞬間（:active）にとっておくと、押した手応えが際立つ */
.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 3px 6px 0 rgba(64, 56, 48, 0.16);
}
.cta-btn:active {
  background-color: var(--daidai-press);
  transform: translate(2px, 3px);
  box-shadow: 0 1px 0 rgba(64, 56, 48, 0.18);
}
.cta-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}

/* ---------- セクション共通 ---------- */

section { padding: var(--sp-9) 0; }

.sec-label {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--daidai-ink);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}
.sec-label::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 10px;
  margin-right: var(--sp-2);
  transform: translateY(-0.12em);
  background-color: var(--daidai-ink);
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 18'%3E%3Cpath d='M3 11 C15 6 27 14 35 10 C45 5 52 10 57 8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 18'%3E%3Cpath d='M3 11 C15 6 27 14 35 10 C45 5 52 10 57 8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

h2 {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: var(--sp-6);
}

h3 {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
}

/* ---------- 困りごと ---------- */

.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-4);
}
.voice {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--lh-snug);
  background-color: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--wobble);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}
.voice:nth-child(2n) { --tilt: 0.5deg; border-radius: var(--wobble-2); }
.voice:nth-child(3n) { --tilt: -0.6deg; }
.voice:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 2px 5px 0 rgba(64, 56, 48, 0.08);
}
.voice::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: var(--sp-4);
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--daidai);
}
.voice-close {
  margin-top: var(--sp-5);
  max-width: var(--measure);
}

/* ---------- 支援内容 ---------- */

.services { background-color: var(--paper-deep); }

.service-list { display: grid; gap: var(--sp-5); }

.service {
  background-color: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--wobble);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  display: grid;
  grid-template-columns: 106px 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.service:nth-child(2) { border-radius: var(--wobble-2); }

.service h3 { margin-bottom: var(--sp-2); }
.service h3 .num {
  color: var(--daidai-ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  margin-right: var(--sp-2);
  vertical-align: 0.08em;
}
.service p { color: var(--ink-soft); font-size: var(--text-sm); }
.service .example {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--ink);
  background-color: var(--paper);
  border-left: 3px solid var(--daidai-ink);
  padding: var(--sp-2) var(--sp-3);
}

.illust {
  width: 92px;
  height: 92px;
  border: 1.5px dashed var(--line);
  border-radius: var(--wobble-blob);
  overflow: hidden;
}
.illust img { width: 100%; height: 100%; object-fit: cover; }
.illust-1 { background-color: var(--daidai-pale); }
.illust-2 { background-color: var(--ao-pale); }
.illust-3 { background-color: var(--midori-pale); }
.illust-profile { width: 120px; height: 120px; rotate: -1.5deg; }

/* 手で並べたように、3枚の大きさ・角度・輪郭をそれぞれ変える。
   きっちり揃えると、手描きの世界観なのに機械が並べた顔になる */
.service:nth-child(1) .illust {
  width: 92px; height: 92px;
  rotate: -2.5deg;
}
.service:nth-child(2) .illust {
  width: 106px; height: 106px;
  translate: 0 -6px;      /* 目で見た据わりの微調整。余白ではないのでレイアウトは動かさない */
  rotate: 1.8deg;
  border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
}
.service:nth-child(3) .illust {
  width: 96px; height: 96px;
  translate: 0 3px;
  rotate: -1.1deg;
  border-radius: 52% 48% 46% 54% / 46% 54% 52% 48%;
}

/* ---------- 進め方 ---------- */

.steps { display: grid; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  position: relative;
}
.step + .step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--line);
}
.step-num {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--daidai-ink);
  width: 52px;
  height: 52px;
  border: 2px solid var(--daidai-ink);
  border-radius: var(--wobble-blob);
  display: grid;
  place-items: center;
  padding-bottom: 0.06em;
  background-color: var(--card);
}
.step h3 { font-size: var(--text-md); margin-bottom: var(--sp-1); }
.step p { color: var(--ink-soft); font-size: var(--text-sm); }

/* ---------- 費用 ---------- */

.fee-box {
  background-color: var(--card);
  border: 2px solid var(--midori);
  border-radius: var(--wobble);
  padding: var(--sp-6);
  max-width: 44em;
}
.fee-box p + p { margin-top: var(--sp-3); }

/* ---------- プロフィール ---------- */

.profile { background-color: var(--paper-deep); }
.profile-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-6);
  align-items: start;
  background-color: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--wobble-2);
  padding: var(--sp-6);
}
.profile-name {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-heading);
}
.profile-name .kana {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: var(--sp-2);
  vertical-align: 0.12em;
}
.profile-role {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--daidai-ink);
  margin-bottom: var(--sp-3);
}
.profile-card p { font-size: var(--text-sm); color: var(--ink-soft); }
.profile-card p + p { margin-top: var(--sp-2); }
.profile-links { margin-top: var(--sp-4); }
/* 指で押せる大きさ（44px）を、文章中のリンクでも確保する */
.profile-links a,
.contact-mail a,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-2);
}

/* ---------- 問い合わせ ---------- */

/* 見出しとボタンだけを中央に置き、ラベルと細かい文は軸を外す。
   全部を同じ中央線に積むと、量産ページの顔になる。
   日本語の複数行は中央揃えだと読みにくいので、文は左揃えのまま中央のブロックに収める */
.contact { text-align: center; padding-bottom: var(--sp-9); }
.contact h2 { margin-bottom: var(--sp-3); }
.contact .sec-label { text-align: left; max-width: 34em; margin-inline: auto; }
.contact .lede {
  color: var(--ink-soft);
  text-align: left;
  max-width: 34em;
  margin: 0 auto var(--sp-6);
}
.contact .cta-sub,
.contact .contact-mail {
  text-align: left;
  max-width: 34em;
  margin-inline: auto;
}
.contact-mail {
  margin-top: var(--sp-5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ---------- フッター ---------- */

.site-footer {
  border-top: 1.5px dashed var(--line);
  padding: var(--sp-5) 0 var(--sp-6);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--ink-soft); }

/* ---------- 下層ページ ---------- */

.doc { padding: var(--sp-7) 0 var(--sp-9); }
.doc h1 {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
}
.doc h2 {
  font-size: var(--text-md);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: normal;
  margin: var(--sp-6) 0 var(--sp-2);
}
.doc p,
.doc li {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.doc ul { padding-left: 1.4em; }
.doc .date { font-size: var(--text-xs); margin-top: var(--sp-6); }

/* ---------- 手描きの区切り線 ---------- */

.divider { height: 26px; overflow: hidden; }
.divider svg { display: block; width: 100%; height: 100%; }
.divider path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  vector-effect: non-scaling-stroke;
}
/* 区切りの規則: セクションの境目には必ず線を引く。
   線の色は、そこで切り替わる「読み手の問い」に対応させる。
   柿＝困りごと／緑＝進め方と費用／青＝相談相手と申し込み */
.divider-1 path { stroke: var(--daidai); opacity: 0.45; }
.divider-2 path { stroke: var(--midori); opacity: 0.5; }
.divider-3 path { stroke: var(--ao); opacity: 0.45; }
.divider-4 path { stroke: var(--midori); opacity: 0.42; }
.divider-5 path { stroke: var(--ao); opacity: 0.4; }

/* =========================================================
   支え木（若木＋添え木）— 屋号の由来を目で見せる
   ========================================================= */

.sasaegi-art {
  position: absolute;
  right: -2px;
  bottom: 14px;
  width: 252px;
  height: auto;
  z-index: -1;
  pointer-events: none;
}
.sasaegi-art .skt {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.sasaegi-art .skt-ground { stroke: var(--line); stroke-width: 2.5; }
.sasaegi-art .skt-trunk { stroke: var(--ki); stroke-width: 3; }
.sasaegi-art .skt-branch { stroke: var(--ki); stroke-width: 2.4; }
.sasaegi-art .skt-root { stroke: var(--ki); stroke-width: 2; opacity: 0.75; }
.sasaegi-art .skt-scribble { stroke: var(--midori); stroke-width: 2; }
.sasaegi-art .skt-stake { stroke: var(--daidai-ink); stroke-width: 3.4; }
.sasaegi-art .skt-tie { stroke: var(--daidai); stroke-width: 2.4; }
.sasaegi-art .skt-fill { fill: var(--midori-pale); stroke: none; opacity: 0.9; }
.skt-tree { transform-box: view-box; transform-origin: 49% 80%; }

/* =========================================================
   動き
   html.js 配下だけで有効。anim.js が起動しなければ 1.6 秒で
   .js が外れ、全コンテンツが素の状態で残る（白画面を作らない）
   ========================================================= */

/* ---------- ヒーロー: 読み込み直後に走る（IO待ちにしない＝LCPを遅らせない） ---------- */

.hero h1 .ch { display: inline-block; }

.js .hero h1.split .ch {
  animation: ch-rise 320ms var(--ease-out) calc(var(--ci, 0) * 14ms) both;
}
@keyframes ch-rise {
  from { opacity: 0; transform: translateY(0.38em); }
  to { opacity: 1; transform: none; }
}

.js .hero .lede { animation: rv-rise var(--dur-long) var(--ease-out) 180ms both; }
.js .hero .hero-note { animation: rv-rise var(--dur-long) var(--ease-out) 240ms both; }
.js .hero .badge { animation: rv-rise 320ms var(--ease-out) calc(280ms + var(--i, 0) * 60ms) both; }
.js .hero .cta-btn { animation: rv-rise 360ms var(--ease-out) 400ms both; }
.js .hero .cta-sub { animation: rv-fade 320ms var(--ease-out) 500ms both; }

@keyframes rv-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes rv-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 演出が終わったら animation を外し、hover/active を素に戻す */
.js .anim-done { animation: none !important; }

/* ヒーローのマーカーは見出しが揃った直後に引かれる */
.js .hero .marker {
  background-size: 0 0.70em;
  animation: marker-draw 480ms var(--ease-out) 460ms both;
}
@keyframes marker-draw {
  to { background-size: 100% 0.70em; }
}

/* ロゴの円 */
.brand .logo-path { stroke-dasharray: 1; }
.js .brand .logo-path { animation: draw 620ms var(--ease-out) 120ms both; }
@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* ---------- スクロール出現（IntersectionObserver が .in を付ける・1回だけ） ---------- */

.js [data-rv] {
  transition:
    opacity var(--dur-long) var(--ease-out) var(--rv-d, 0ms),
    transform var(--dur-long) var(--ease-out) var(--rv-d, 0ms);
}
.js [data-rv]:not(.in) {
  opacity: 0;
  transform: var(--rv-t, translateY(14px));
}
.js .sec-label + h2[data-rv] { --rv-d: 70ms; }

/* 困りごと: メモを机に置くように、順に settle */
.js .voice-grid:not(.in) .voice { opacity: 0; }
.js .voice-grid.in .voice {
  animation: rv-settle var(--dur-long) var(--ease-out) calc(var(--i, 0) * 70ms) both;
}
@keyframes rv-settle {
  from { opacity: 0; transform: translateY(12px) rotate(calc(var(--tilt, 0deg) + 2deg)); }
  to { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}

/* 支援内容: 左右交互に寄る。挿絵は少し遅れて据わる */
.js .service:nth-child(odd) { --rv-t: translateX(-14px); }
.js .service:nth-child(even) { --rv-t: translateX(14px); }
.js .service .illust {
  transition:
    opacity var(--dur-long) var(--ease-out) 160ms,
    transform var(--dur-long) var(--ease-out) 160ms;
}
.js .service:not(.in) .illust { opacity: 0; transform: scale(0.9) rotate(-4deg); }

/* 進め方: 番号が据わり、破線が伸びる */
.js .steps .step {
  transition:
    opacity var(--dur-long) var(--ease-out) calc(var(--i, 0) * 90ms),
    transform var(--dur-long) var(--ease-out) calc(var(--i, 0) * 90ms);
}
.js .steps:not(.in) .step { opacity: 0; transform: translateY(12px); }
.js .steps .step-num {
  transition:
    opacity var(--dur-short) var(--ease-out) calc(80ms + var(--i, 0) * 90ms),
    transform var(--dur-short) var(--ease-out) calc(80ms + var(--i, 0) * 90ms);
}
.js .steps:not(.in) .step-num { opacity: 0; transform: scale(0.7); }
.js .steps .step + .step::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-long) var(--ease-out) calc(var(--i, 0) * 90ms);
}
.js .steps.in .step + .step::before { transform: scaleX(1); }

/* 費用: 「無料」の波線が引かれる */
.js .wavy {
  display: inline-block;
  clip-path: inset(-25% 103% -35% -3%);
  transition: clip-path var(--dur-long) var(--ease-out) 200ms;
}
.js .in .wavy { clip-path: inset(-25% -3% -35% -3%); }

/* 問い合わせ */
.js .contact h2 { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .contact .lede { transition: opacity var(--dur-long) var(--ease-out) 90ms, transform var(--dur-long) var(--ease-out) 90ms; }
.js .contact .cta-btn { transition: opacity var(--dur-long) var(--ease-out) 200ms, transform var(--dur-long) var(--ease-out) 200ms; }
.js .contact .cta-sub { transition: opacity var(--dur-short) var(--ease-out) 320ms; }
.js .contact .contact-mail { transition: opacity var(--dur-short) var(--ease-out) 380ms; }
.js .contact:not(.in) :is(h2, .lede, .cta-btn) { opacity: 0; transform: translateY(12px); }
.js .contact:not(.in) :is(.cta-sub, .contact-mail) { opacity: 0; }

/* ---------- 支え木: 読み込み時に描かれる（スクロール非対応時の基本形） ---------- */

.js .sasaegi-art .skt {
  animation: draw 900ms var(--ease-out) var(--d, 0ms) both;
}
.js .sasaegi-art .skt-ground { --d: 120ms; animation-duration: 620ms; }
.js .sasaegi-art .skt-trunk { --d: 300ms; animation-duration: 900ms; }
.js .sasaegi-art .skt-b1 { --d: 720ms; animation-duration: 520ms; }
.js .sasaegi-art .skt-b2 { --d: 820ms; animation-duration: 520ms; }
.js .sasaegi-art .skt-root { --d: 900ms; animation-duration: 620ms; }
.js .sasaegi-art .skt-s1 { --d: 1000ms; animation-duration: 420ms; }
.js .sasaegi-art .skt-s2 { --d: 1080ms; animation-duration: 420ms; }
.js .sasaegi-art .skt-s3 { --d: 1160ms; animation-duration: 420ms; }
.js .sasaegi-art .skt-stake { --d: 1240ms; animation-duration: 560ms; }
.js .sasaegi-art .skt-t1 { --d: 1620ms; animation-duration: 320ms; }
.js .sasaegi-art .skt-t2 { --d: 1700ms; animation-duration: 320ms; }
.js .sasaegi-art .skt-fill {
  animation: rv-fade 600ms var(--ease-out) var(--d, 900ms) both;
}
.js .sasaegi-art .skt-f1 { --d: 900ms; }
.js .sasaegi-art .skt-f2 { --d: 980ms; }
.js .sasaegi-art .skt-f3 { --d: 1060ms; }

/* =========================================================
   スクロール連動（ブラウザ標準の scroll-driven animation）
   対応ブラウザのみ。非対応なら上の「読み込み時に描かれる」が残る
   ========================================================= */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 読み進みの進捗ライン */
    .js .scroll-crayon {
      display: block;
      animation: crayon-grow linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes crayon-grow { to { transform: scaleX(1); } }

    /* 区切り線は通り過ぎる速さで引かれる */
    .js .divider path {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }
  }
}

/* ---- 支え木がページを通して育つ物語（広い画面のみ・本文の外側で） ----
   若木が伸びる → 添え木が現れ結ばれる → 葉が茂る → 根が張る。
   本文カラム(860px)の右外に固定するので、文字に一切かぶらない。 */

@media (min-width: 1320px) {
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .js .sasaegi-art {
        position: fixed;
        top: 50%;
        bottom: auto;
        right: calc((100vw - var(--column)) / 2 - 210px);
        width: 190px;
        translate: 0 -50%;
        /* 本文カラムの外側にいるので前面で良い。背景色を持つ節に隠されない */
        z-index: 1;
      }
      /* 地面・幹・枝は読み込み時に描く（ページ最上部で「若木がもう立っている」）。
         スクロールが動かすのは、そのあとに起きる出来事だけ。 */
      .js .sasaegi-art .skt-stake,
      .js .sasaegi-art .skt-tie,
      .js .sasaegi-art .skt-root,
      .js .sasaegi-art .skt-scribble,
      .js .sasaegi-art .skt-fill {
        animation-timeline: scroll(root block);
        animation-delay: 0s;
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
      }
      .js .sasaegi-art .skt-stake,
      .js .sasaegi-art .skt-tie,
      .js .sasaegi-art .skt-root,
      .js .sasaegi-art .skt-scribble { animation-name: draw; }
      .js .sasaegi-art .skt-fill { animation-name: rv-fade; }

      /* 添え木が現れ、結ばれる: 困りごと〜支援内容＝屋号の由来のクライマックス */
      .js .sasaegi-art .skt-stake { animation-range: 8% 32%; }
      .js .sasaegi-art .skt-t1 { animation-range: 32% 40%; }
      .js .sasaegi-art .skt-t2 { animation-range: 37% 45%; }
      /* 葉が茂る: 進め方〜費用 */
      .js .sasaegi-art .skt-f1 { animation-range: 45% 55%; }
      .js .sasaegi-art .skt-s1 { animation-range: 47% 57%; }
      .js .sasaegi-art .skt-f2 { animation-range: 53% 63%; }
      .js .sasaegi-art .skt-s2 { animation-range: 55% 65%; }
      .js .sasaegi-art .skt-f3 { animation-range: 61% 71%; }
      .js .sasaegi-art .skt-s3 { animation-range: 63% 73%; }
      /* 根が張る: プロフィール〜問い合わせ */
      .js .sasaegi-art .skt-root { animation-range: 72% 92%; }

      /* 全体がゆっくり育つ（scale） */
      .js .sasaegi-art .skt-tree {
        animation: tree-grow linear both;
        animation-timeline: scroll(root block);
        animation-range: 0% 94%;
      }
      @keyframes tree-grow {
        from { transform: scale(0.94); }
        to { transform: scale(1); }
      }
    }
  }
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
  .sasaegi-art { width: 175px; right: 0; }
}

@media (max-width: 620px) {
  :root {
    --text-display: clamp(1.7rem, 1.1rem + 3vw, 2.1rem);
    --header-h: 60px;
  }
  section { padding: var(--sp-7) 0; }
  .hero { padding: var(--sp-6) 0 var(--sp-7); }
  .brand { font-size: var(--text-sm); }
  .brand svg { width: 21px; height: 21px; }
  .header-cta { font-size: var(--text-xs); padding: var(--sp-2) var(--sp-3); }
  .service { grid-template-columns: 1fr; }
  .service:nth-child(n) .illust { width: 76px; height: 76px; translate: none; }
  .profile-card { grid-template-columns: 1fr; padding: var(--sp-5) var(--sp-4); }
  .step { grid-template-columns: 44px 1fr; gap: var(--sp-4); }
  .step-num { width: 42px; height: 42px; font-size: var(--text-md); }
  .fee-box { padding: var(--sp-5) var(--sp-4); }
  .cta-btn { font-size: var(--text-base); padding: var(--sp-3) var(--sp-5); }
  .sasaegi-art { width: 132px; right: 0; bottom: 92px; opacity: 0.32; }
  /* スマホは上品に軽く: 出現は不透明度だけ、時差も詰める */
  .js [data-rv]:not(.in) { transform: none; }
  .js .voice-grid.in .voice { animation-delay: calc(var(--i, 0) * 40ms); }
  .js .service:nth-child(odd),
  .js .service:nth-child(even) { --rv-t: none; }
}

/* 大画面: 本文が細い柱にならないよう、ゆとりを足す */
@media (min-width: 1600px) {
  :root {
    --column: 940px;
    --text-base: 1.0625rem;
  }
}

/* ---------- 動きを減らす設定: 空間的な動きだけ止め、色の変化は残す ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
  }
  .js [data-rv],
  .js .voice,
  .js .steps .step,
  .js .steps .step-num,
  .js .service .illust,
  .js .contact :is(h2, .lede, .cta-btn, .cta-sub, .contact-mail) {
    transition-duration: 1ms !important;
  }
  .js [data-rv]:not(.in),
  .js .voice-grid:not(.in) .voice,
  .js .service:not(.in) .illust,
  .js .steps:not(.in) :is(.step, .step-num),
  .js .contact:not(.in) :is(h2, .lede, .cta-btn, .cta-sub, .contact-mail) {
    opacity: 1;
    transform: none;
  }
  .js .steps.in .step + .step::before,
  .js .steps .step + .step::before { transform: scaleX(1); }
  .js .wavy { clip-path: none; }
  .js .hero .marker { background-size: 100% 0.70em; }
  .scroll-crayon { display: none; }
  /* 色とホバーの反応は残す（動きの抑制であって、無反応にはしない） */
  .cta-btn, .header-cta, .voice, .skip-link {
    transition-duration: var(--dur-micro) !important;
  }
}