/* =========================================================
   西田つよし ホームページ（作り込み版）
   色・文字 → 部品（罫線・枠・紙・テープ） → セクション → 動き
   見出し・キャッチ・発言はモリサワ（フォーク / リュウミン）の輪郭 SVG、本文は Zen Kaku Gothic New
   ========================================================= */

:root {
  --lime: #6eba2c;
  --lime-deep: #3d7a13;
  --btn: #4fa01d;       /* 白文字をのせる緑ベタ */
  --btn-dark: #3f9017;
  --lime-light: #a6d76a;
  --lime-pale: #eaf5d8;
  --green-ink: #15361a;
  --ink: #161616;
  --ink-soft: #161616; /* 中間の灰色はやめて黒にそろえる */
  --sky: #3aa2d8;
  --sky-deep: #0f6690;
  --sky-pale: #e4f3fb;
  --sun: #ffe24d;
  --apricot: #f39a45;
  --apricot-deep: #9a4a0e;
  --coral: #ee7b68;
  --red: #c43a24;
  --paper: #fffdf7;
  --paper-2: #f9f3e5;
  --memo: #fffef9;

  --ease: cubic-bezier(.2, .75, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --slam: cubic-bezier(.5, 1.8, .55, .9);

  --fs-disp: clamp(2rem, 1.1rem + 2.8vw, 3.6rem);
  --fs-theme: clamp(1.9rem, 1.15rem + 2.3vw, 3.2rem);
  --fs-voice: clamp(1.55rem, 1rem + 1.9vw, 2.65rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .55vw, 1.55rem);   /* 中見出し 20 → 24.8px */
  --fs-h4: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);  /* 小見出し 17 → 19px */
  --fs-lead: clamp(1.125rem, 1.03rem + .4vw, 1.3rem);  /* リード 18 → 20.8px */
  --fs-body: clamp(1rem, .95rem + .2vw, 1.1rem);
  --fs-small: clamp(.9375rem, .91rem + .1vw, 1rem);    /* 補足 15 → 16px（情報は14px未満にしない） */
  --fs-xs: .8125rem;                                    /* 注記 13px（下限） */

  --pad: clamp(20px, 5vw, 56px);
  --hd: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hd); overflow-x: clip; }
/* 背景の絵は画面の外まで広げて置くので、セクションごとに横だけ切る（はみ出すと iPhone ではページ全体が縮む） */
main > section, .adhoc { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .04em;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
p, li, dd { text-wrap: pretty; }
h2, h3, h4, dt, summary, .tags li, .timeline__t, .career dd, .memo__title, .theme__lead { text-wrap: balance; }
button { font: inherit; color: inherit; }

.inner { position: relative; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; padding: .5em 1em; border-radius: 8px; }
.skip:focus { top: 12px; }
.sp { display: none; }
.nb { display: inline-block; }
.nw { white-space: nowrap; }
h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 500; }
.ph { display: inline-block; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* ---------- 文字の段階 ---------- */
.disp { font-size: var(--fs-disp); line-height: 1.22; color: var(--green-ink); font-weight: 500; }
.disp__ln { display: inline-block; vertical-align: top; margin-right: .08em; }
.type { height: 1em; width: auto; overflow: visible; fill: currentColor; }
.type path { transform-box: fill-box; transform-origin: 50% 85%; }
.lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.95; letter-spacing: .05em; }
.prose { max-width: 34em; }
.sub-h { font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; letter-spacing: .06em; color: var(--green-ink); }

/* ---------- 罫線（筆の線） ---------- */
/* 見出しの下線：見出しと同じ文字サイズを基準に長く取り、文字の下側に背面から重ねる */
.disp { position: relative; z-index: 1; }
.rule { display: block; position: relative; z-index: 0; font-size: var(--fs-disp); width: min(100%, 8.2em); height: .42em; margin: -.5em 0 .5em -.22em; }
.rule::before { content: ""; position: absolute; inset: 0; background: no-repeat 0 50% / 100% 100%; }
.rule--long { width: min(100%, 11.6em); }
.rule--lime::before { background-image: url("assets/brush-0.webp"); }
.rule--yellow::before { background-image: url("assets/brush-1.webp"); }
.rule--sky::before { background-image: url("assets/brush-2.webp"); }

/* ---------- 紙・テープ・枠 ---------- */
.tape { position: absolute; z-index: 3; width: clamp(84px, 9vw, 130px); height: auto; opacity: .92; pointer-events: none; }
.tape--tl { left: -26px; top: -14px; rotate: -32deg; }
.tape--tr { right: -26px; top: -14px; rotate: 30deg; }
.tape--br { right: -24px; bottom: -12px; rotate: -28deg; }
.tape--t { left: 50%; top: -18px; translate: -50% 0; rotate: -3deg; }
/* 破れ紙の区切り：セクションの背景そのものを上端だけ破れた形に切り抜く（色の段差が出ない） */
.kodo, .plan, .ayumi, .report, .office {
  --edge: 56px;
  margin-top: calc(var(--edge) * -1);
  -webkit-mask: var(--edge-mask) 0 0 / 100% calc(var(--edge) + 4px) no-repeat, linear-gradient(#000 0 0) 0 var(--edge) / 100% calc(100% - var(--edge)) no-repeat;
  mask: var(--edge-mask) 0 0 / 100% calc(var(--edge) + 4px) no-repeat, linear-gradient(#000 0 0) 0 var(--edge) / 100% calc(100% - var(--edge)) no-repeat;
}
.kodo { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 26 C 40 22 70 30 110 24 C 160 16 190 28 240 22 C 300 14 330 26 380 20 C 430 14 470 28 520 22 C 580 15 610 27 660 21 C 720 13 760 26 810 20 C 860 14 900 27 950 21 C 1010 13 1040 25 1090 19 C 1140 13 1180 26 1230 20 C 1290 13 1320 25 1370 19 C 1400 16 1420 22 1440 18 L1440 60 Z'/%3E%3C/svg%3E"); }
.plan { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 22 C 50 28 90 16 140 22 C 200 29 230 15 290 21 C 350 28 380 14 440 20 C 500 27 540 13 600 19 C 660 26 700 13 760 19 C 820 26 850 12 910 18 C 970 25 1010 12 1070 18 C 1130 25 1160 12 1220 18 C 1280 25 1320 13 1380 19 C 1410 22 1430 20 1440 21 L1440 60 Z'/%3E%3C/svg%3E"); }
.ayumi { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 24 C 60 18 100 30 160 24 C 220 18 260 30 320 24 C 380 18 420 30 480 24 C 540 18 580 30 640 24 C 700 18 740 30 800 24 C 860 18 900 30 960 24 C 1020 18 1060 30 1120 24 C 1180 18 1220 30 1280 24 C 1340 18 1380 30 1440 24 L1440 60 Z'/%3E%3C/svg%3E"); }
.report { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 22 C 50 28 90 16 140 22 C 200 29 230 15 290 21 C 350 28 380 14 440 20 C 500 27 540 13 600 19 C 660 26 700 13 760 19 C 820 26 850 12 910 18 C 970 25 1010 12 1070 18 C 1130 25 1160 12 1220 18 C 1280 25 1320 13 1380 19 C 1410 22 1430 20 1440 21 L1440 60 Z'/%3E%3C/svg%3E"); }
.office { --edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 30 C 120 6 260 8 400 26 C 540 44 660 46 800 28 C 940 10 1080 6 1220 22 C 1320 32 1390 34 1440 28 L1440 60 Z'/%3E%3C/svg%3E"); }


/* =========================================================
   ヘッダー
   ========================================================= */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--hd);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  padding-inline: var(--pad);
  justify-content: flex-end;
  transition: background .35s ease, box-shadow .35s ease;
}
/* 11/2 すりガラス（backdrop-filter）はスクロール中ずっとぼかし直すので iPhone で重い。ほぼ不透明の地にして外した */
.hd.is-scrolled { background: rgba(255, 253, 247, .96); box-shadow: 0 1px 0 rgba(21, 54, 26, .08), 0 10px 30px -18px rgba(21, 54, 26, .35); }
.hd__name { font-weight: 500; font-size: 1.28rem; letter-spacing: .08em; text-decoration: none; color: var(--green-ink); font-feature-settings: "palt"; margin-right: auto; text-shadow: 0 0 12px rgba(255, 255, 255, .9); }
.hd__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.hd__nav a { position: relative; text-decoration: none; font-weight: 500; font-size: .98rem; letter-spacing: .08em; color: var(--green-ink); padding-block: .4em; text-shadow: 0 0 10px rgba(255, 255, 255, .9); }
.hd__nav a::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0; height: 9px; background: url("assets/brush-0.webp") no-repeat 0 50% / 100% 100%; clip-path: inset(0 100% 0 0); transition: clip-path .4s var(--ease); }
.hd__nav a:hover::after { clip-path: inset(0 0 0 0); }
.menu-btn { display: none; }

/* =========================================================
   ファーストビュー
   ========================================================= */
.hero {
  --hh: max(100svh, 660px);
  position: relative; height: var(--hh); overflow: hidden; isolation: isolate;
  background: linear-gradient(#a9d8f2, #e6f5fc 60%, #9fd2ec);
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero.gl-on .hero__scene { visibility: hidden; }
.hero__scene, .ly { position: absolute; inset: 0; }
.ly { will-change: transform; }
.bgbox { position: absolute; left: 50%; top: 50%; width: max(100%, calc(var(--hh) * 1.5)); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); }
.bgbox__img { width: 100%; height: 100%; }
.ly-tree { inset: auto; }
.ly-tree--l { left: -2vw; top: -12%; width: 36vw; }
.ly-tree--r { right: -2vw; top: -14%; width: 34vw; }
.tree { width: 100%; height: auto; }

.hero__person { position: absolute; z-index: 2; right: clamp(0px, 4vw, 90px); bottom: 0; height: min(82%, 900px); aspect-ratio: 1638 / 1800; }
.person-in, .person { width: 100%; height: 100%; }
/* 11/2 呼吸のようにわずかに拡大する動きは外した（先生のスマホで「拡大されるのはいらない」・影ごと描き直しで重い） */
.person { object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 30px rgba(20, 60, 90, .2)); }

.hero__kodo { position: absolute; z-index: 3; left: 38.5vw; top: 19%; width: clamp(150px, 14.5vw, 250px); transform: rotate(-6deg); }
.hero__brush { position: absolute; left: -18%; top: 4%; width: 136%; height: auto; opacity: .95; }
.hero__kodo-mark { position: relative; width: 100%; height: auto; }

.hero__text { position: absolute; z-index: 4; left: clamp(20px, 7vw, 132px); top: calc(var(--hd) + clamp(20px, 6.5vh, 80px)); width: min(46vw, 600px); }
.hero__role {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, .9);
  border-radius: 999px; padding: .42em 1.1em;
  font-size: clamp(.86rem, .8rem + .25vw, 1rem); font-weight: 500; line-height: 1.4; letter-spacing: .08em;
  color: var(--green-ink);
  box-shadow: 0 6px 18px -10px rgba(20, 60, 90, .45);
}
.hero__role span + span { margin-left: .8em; padding-left: .8em; border-left: 1.5px solid rgba(21, 54, 26, .3); }
.hero__name { margin-top: clamp(14px, 2.2vh, 26px); width: clamp(250px, 29vw, 480px); }
.name-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 22px rgba(20, 70, 100, .22)); }
.name-svg .glyph path { fill: #141414; stroke: #fff; stroke-width: 10px; paint-order: stroke; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.name-shine__bar { transform: skewX(-18deg); }
.name-star { fill: #fff; transform-box: fill-box; transform-origin: center; scale: 0; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)) drop-shadow(0 0 2px rgba(255, 246, 170, .9)); }
.glyph { transform-box: fill-box; transform-origin: 50% 70%; }
.g0 { --i: 0; } .g1 { --i: 1; } .g2 { --i: 2; } .g3 { --i: 3; } .g4 { --i: 4; }
.hero__catch { margin-top: clamp(16px, 2.6vh, 30px); font-size: clamp(1.75rem, .9rem + 2.6vw, 3.5rem); line-height: 1.24; color: var(--green-ink); }
.hero__catch .ln { position: relative; display: block; width: fit-content; }
.hero__catch .type { transform: skewX(-9deg); filter: drop-shadow(0 0 10px rgba(255, 255, 255, .95)) drop-shadow(0 0 2px rgba(255, 255, 255, .9)); }
.hero__catch .ln--mark::before { content: ""; position: absolute; left: -.2em; right: -.35em; bottom: -.02em; height: .42em; background: url("assets/brush-0.webp") no-repeat 0 50% / 100% 100%; opacity: .9; }
.catch-leaf { position: absolute; right: -1.15em; bottom: -.08em; height: 1.5em; width: auto; rotate: 16deg; transform-origin: 25% 100%; animation: leaf 4.6s ease-in-out infinite alternate; filter: drop-shadow(0 4px 6px rgba(20, 60, 20, .2)); }
.hero__sub { margin-top: clamp(14px, 2.4vh, 26px); display: grid; gap: .55em; justify-items: start; font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; letter-spacing: .06em; color: var(--ink); }
.tagline { display: inline-block; background: rgba(255, 255, 255, .94); padding: .36em 1.05em .38em .9em; border-radius: 999px; box-shadow: 0 10px 24px -14px rgba(20, 60, 90, .6); }
/* 左の太い線はやめ、頭に小さな色の丸（1つめ黄緑・2つめ空色） */
.tagline::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .55em; border-radius: 50%; background: var(--lime); vertical-align: .12em; }
.tagline + .tagline::before { background: var(--sky); }

.hero__front { position: absolute; z-index: 5; left: 0; right: 0; bottom: -1px; height: clamp(56px, 8vw, 118px); pointer-events: none; }
.hero__wave { width: 100%; height: 100%; fill: var(--lime); }
.leaf { position: absolute; height: auto; }
.leaf--hero1 { left: 2.5vw; bottom: 40%; width: clamp(64px, 7vw, 120px); transform-origin: 40% 100%; rotate: -18deg; animation: leaf 5.2s ease-in-out infinite alternate; }
.leaf--hero2 { right: 2vw; bottom: 62%; width: clamp(40px, 3.6vw, 64px); transform-origin: 50% 100%; rotate: 32deg; animation: leaf 6.1s ease-in-out -2s infinite alternate; }
.hero__down { position: absolute; z-index: 6; left: 50%; bottom: clamp(18px, 3vw, 36px); translate: -50% 0; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; box-shadow: 0 8px 20px -10px rgba(21, 54, 26, .6); }
.hero__down span { width: 10px; height: 10px; border-right: 2.5px solid var(--green-ink); border-bottom: 2.5px solid var(--green-ink); rotate: 45deg; translate: 0 -2px; animation: nudge 2.4s ease-in-out infinite; }

/* =========================================================
   こんな人
   ========================================================= */
.hito {
  position: relative; overflow: hidden;
  background: radial-gradient(900px 520px at 85% 12%, #86c94a 0%, rgba(134, 201, 74, 0) 70%), var(--lime);
  color: var(--green-ink);
  padding-block: clamp(56px, 7vw, 110px) clamp(150px, 16vw, 260px);
}
.hito::before { content: ""; position: absolute; inset: 0; background: url("assets/paper.webp") 0 0 / 512px repeat; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.hito__bg { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; }
.shape--1 { width: 46vw; aspect-ratio: 1; left: -16vw; top: 14%; background: rgba(255, 255, 255, .1); }
.shape--2 { width: 28vw; aspect-ratio: 1; right: -8vw; top: 46%; background: rgba(255, 226, 77, .2); }
.hito__meadow { position: absolute; left: 0; bottom: -4%; width: 100%; height: auto; opacity: .95; }
.leaf--float { position: absolute; z-index: 2; width: clamp(54px, 5vw, 96px); pointer-events: none; animation: leaf 6s ease-in-out infinite alternate; }
.leaf--h1 { right: 5vw; top: 6%; rotate: 30deg; }
.hito__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hito .lead { color: var(--ink); max-width: 30em; }
.stats { margin-top: clamp(26px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: end; }
.stats li { position: relative; padding: .2em clamp(16px, 2.4vw, 34px); }
.stats li:first-child { padding-left: 0; }
.stats li + li::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 8%; border-left: 2px dashed rgba(16, 41, 15, .32); }
.stats__label { display: block; font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; line-height: 1.5; color: var(--ink); }
.stats__num { display: block; margin-top: .1em; font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.8rem); line-height: 1.1; color: #10290f; }

.hito__visual { position: relative; height: clamp(500px, 50vw, 700px); }
.talk { position: absolute; left: 50%; bottom: 0; height: 100%; translate: -50% 0; }
.talk__img { height: 100%; width: auto; max-width: none; transform-origin: 50% 100%; animation: talk 4.6s ease-in-out infinite alternate; filter: drop-shadow(0 22px 26px rgba(18, 60, 8, .3)); }
/* 似顔絵の後ろの舞台：回る集中線・水彩の丸・網点・瞬く星 */
.stage { position: absolute; inset: -6% -10% 0; pointer-events: none; }
.stage__rays { position: absolute; left: 50%; top: 44%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .2) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .55) 46%, transparent 72%);
  mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .55) 46%, transparent 72%);
  animation: spin 90s linear infinite; }
.stage__wash { position: absolute; left: 50%; top: 40%; width: 74%; aspect-ratio: 1; translate: -50% -50%; border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
  background: radial-gradient(circle at 42% 38%, #fff8c8 0%, #ffeb8a 42%, rgba(255, 226, 77, .55) 70%, rgba(255, 226, 77, 0) 100%);
  animation: blob 14s ease-in-out infinite alternate; opacity: .9; }
.stage__wash::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("assets/paper.webp") 0 0 / 300px repeat; mix-blend-mode: multiply; opacity: .6; }
.stage__ring { position: absolute; left: 50%; top: 40%; width: 86%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .55); animation: spin 60s linear infinite reverse; }
.stage__dots { position: absolute; left: 50%; top: 42%; width: 112%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(16, 41, 15, .16) 1.7px, transparent 2.3px) 0 0 / 15px 15px;
  -webkit-mask-image: radial-gradient(closest-side, transparent 52%, #000 62%, transparent 80%);
  mask-image: radial-gradient(closest-side, transparent 52%, #000 62%, transparent 80%); }
.stage__star { position: absolute; width: 26px; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 2.8s ease-in-out infinite; }
.stage__star--1 { left: 20%; top: 18%; }
.stage__star--2 { right: 18%; top: 50%; width: 18px; animation-delay: -.9s; }
.stage__star--3 { left: 14%; top: 66%; width: 20px; animation-delay: -1.6s; }
.stage__star--4 { right: 26%; top: 6%; width: 16px; animation-delay: -2.2s; background: var(--sun); }

/* 吹き出し：太い縁取りとずらした影。言葉ごとに色と大きさを変える */
.bubbles { position: absolute; inset: 0; z-index: 2; }
.bubble {
  --bg: #fff; --fg: var(--green-ink); --line: var(--green-ink); --shadow: var(--green-ink); --tilt: -3deg; --tx: 30%; --tip: 80%; --fs: 1;
  position: absolute;
  background: var(--bg); color: var(--fg);
  border: 3px solid var(--line); border-radius: 999px;
  padding: .5em .9em .48em;
  font-size: calc(clamp(1.15rem, .9rem + .85vw, 1.65rem) * var(--fs));
  line-height: 1;
  box-shadow: 5px 6px 0 var(--shadow);
  rotate: var(--tilt);
  transform-origin: var(--tx) 130%;
}
.bubble .bb { display: block; }
.bubble .bb + .bb { margin-top: .16em; }
.bubble .type { margin-inline: auto; }
.bubble:has(.bb + .bb) { border-radius: 26px; padding-block: .52em .5em; }
.bubble::before, .bubble::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, var(--tip) 100%); }
.bubble::before { left: var(--tx); bottom: -19px; width: 26px; height: 20px; background: var(--line); }
.bubble::after { left: calc(var(--tx) + 5px); bottom: -11px; width: 16px; height: 12px; background: var(--bg); }
.bubble--1 { left: -8%; top: 4%; --tilt: -4deg; --tx: 62%; --tip: 90%; }
.bubble--2 { right: -16%; top: 8%; --tilt: 3deg; --tx: 18%; --tip: 8%; --bg: #e3f4fd; }
.bubble--3 { left: -6%; top: 27%; --tilt: -7deg; --tx: 58%; --tip: 95%; --bg: var(--sun); --fs: 1.45; }
.bubble--4 { right: -21%; top: 41%; --tilt: 6deg; --tx: 16%; --tip: 4%; --bg: var(--red); --fg: #fff; --fs: 1.7; }
.bubble--5 { left: -14%; top: 52%; --tilt: 3deg; --tx: 64%; --tip: 92%; --bg: #ffe2c9; }
.bubble--6 { right: -15%; top: 63%; --tilt: -4deg; --tx: 18%; --tip: 6%; --bg: var(--green-ink); --fg: #fff; --line: var(--green-ink); --shadow: var(--lime-deep); --fs: 1.12; border-color: #fff; outline: 3px solid var(--green-ink); }
.bubble--7 { left: -6%; top: 76%; --tilt: -2deg; --tx: 62%; --tip: 90%; --bg: var(--lime-pale); }
.bubble--r1 { right: -12%; top: 33%; --tilt: 5deg; --tx: 14%; --tip: 4%; --bg: var(--red); --fg: #fff; --fs: 1.2; --d: 8; --k: 0; }
.bubble--r2 { right: -6%; top: 57%; --tilt: -4deg; --tx: 16%; --tip: 5%; --bg: #fff; --d: 9.5; --k: 1; }
.bubble--p1 { right: -14%; top: -3%; --tilt: -4deg; --tx: 14%; --tip: 4%; --bg: var(--sun); --fs: 1.2; --d: 1; --k: 0; }
.bubble--p2 { left: -10%; top: 56%; --tilt: 3deg; --tx: 66%; --tip: 94%; --bg: #fff; --d: 3; --k: 1; }
.bubble--t { z-index: 3; left: -5%; top: 0; --tilt: -4deg; --tx: 66%; --tip: 92%; --fs: 1.02; --d: 2; }
.theme--life .bubble--t { --bg: #ffbf73; }
.theme--people .bubble--t { --bg: #86cdf1; left: auto; right: -5%; --tilt: 4deg; --tx: 18%; --tip: 6%; }
.theme--bousai .bubble--t { --bg: #a6d968; }
.stage__scene { position: absolute; left: -2%; top: 41%; width: 104%; aspect-ratio: 3 / 2; margin-top: -34.67%; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.stage__scene img, .kodo__scene img, .office__scene img, .ayumi__scene img { width: 100%; height: auto; }
.kodo__scene { position: absolute; z-index: 0; left: -16%; right: -18%; bottom: -4%; }
.office__visual::before { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 2%; width: 128%; aspect-ratio: 1.25; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 253, 240, .55), rgba(255, 253, 240, .2) 60%, rgba(255, 253, 240, 0) 100%); pointer-events: none; }
.office__scene { position: absolute; z-index: 0; left: -11%; bottom: 3%; width: 122%; aspect-ratio: 1521 / 980;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 62%, transparent 100%); }
.office__shadow { position: absolute; z-index: 1; left: 50%; bottom: 5%; width: 38%; height: 5%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 40, 20, .32), rgba(20, 40, 20, 0)); }
.phone { z-index: 1; }
.office__visual .bubbles { z-index: 2; }
.ayumi__visual { position: relative; display: grid; place-items: center; padding-block: 10% 14%; }
.ayumi__scene { position: absolute; z-index: 0; left: -26%; right: -26%; top: 58%; margin-top: -48.4%; opacity: .95; }
.polaroid { z-index: 1; }
.burst { position: absolute; right: -30px; top: -34px; width: 36px; height: 36px; background: linear-gradient(#d9472f, #d9472f) 50% 0 / 5px 44% no-repeat; rotate: 18deg; }
.burst::before, .burst::after { content: ""; position: absolute; inset: 0; background: inherit; }
.burst::before { rotate: -48deg; }
.burst::after { rotate: 48deg; }
.note { position: absolute; right: -24px; top: -34px; font-style: normal; font-size: 1.5em; line-height: 1; color: var(--lime); font-weight: 500; rotate: 14deg; text-shadow: 2px 2px 0 var(--green-ink); }

.hito__lower { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.letter {
  position: relative; z-index: 1;
  background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo);
  border-radius: 6px;
  padding: clamp(30px, 4vw, 56px) clamp(26px, 4.4vw, 64px) clamp(28px, 3.6vw, 48px);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 28px 50px -30px rgba(18, 60, 8, .7), 0 6px 14px -8px rgba(18, 60, 8, .35);
}
.letter::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(110, 186, 44, .45); border-radius: 3px; pointer-events: none; }
.letter::after { content: ""; position: absolute; inset: 17px; border: 1px dashed rgba(110, 186, 44, .4); border-radius: 2px; pointer-events: none; }
.letter blockquote { position: relative; }
.letter__head { font-size: clamp(1.8rem, 1.15rem + 2.3vw, 3.1rem); line-height: 1.32; color: var(--green-ink); }
.letter__ln { display: block; }
.letter__ln + .letter__ln { margin-left: 1.1em; }
/* 本文は読みやすさ優先：A1明朝・ベタ組み（palt なし）・行間をたっぷり */
.letter__body { margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(22px, 2.6vw, 34px); border-top: 1px dashed rgba(61, 122, 19, .35); display: grid; gap: 1.5em; }
.letter__body p { display: grid; }
/* 輪郭の文字は block なので、行間は上下の余白でつくる（1行の送り = 2em） */
.fl { display: block; padding-block: .5em; font-size: clamp(1.2rem, .9rem + .85vw, 1.7rem); color: #1d2a1a; }
.fl--split .type { display: inline-block; }
.fl .type path { stroke: currentColor; stroke-width: 10px; stroke-linejoin: round; paint-order: stroke; }
.letter__body p:nth-child(1) .fl:nth-of-type(3) { --n: 1; } .letter__body p:nth-child(1) .fl:nth-of-type(4) { --n: 2; } .letter__body p:nth-child(1) .fl:nth-of-type(5) { --n: 3; }
.letter__body p:nth-child(2) .fl:nth-of-type(2) { --n: 4; } .letter__body p:nth-child(2) .fl:nth-of-type(3) { --n: 5; } .letter__body p:nth-child(2) .fl:nth-of-type(4) { --n: 6; }
.letter__body p:nth-child(2) .fl:nth-of-type(5) { --n: 7; } .letter__body p:nth-child(2) .fl:nth-of-type(6) { --n: 8; }

.likes { position: relative; z-index: 1; display: grid; gap: .8em; align-content: end; padding-bottom: .4em; }
.likes__photo { margin-top: .6em; width: min(100%, 300px); background: #fff; padding: 8px 8px 0; border-radius: 3px; box-shadow: 0 16px 28px -18px rgba(18, 60, 8, .7); }
.likes__photo img { width: 100%; height: auto; border-radius: 2px; }
.likes__photo figcaption { padding: .5em .2em .65em; font-size: .82rem; font-weight: 500; line-height: 1.5; color: var(--ink); text-align: center; }
.likes__title { font-size: var(--fs-body); font-weight: 500; letter-spacing: .14em; color: #10290f; }
.likes__list { display: flex; flex-wrap: wrap; gap: .55em; }
.likes__list li { background: rgba(255, 253, 247, .9); border-radius: 999px; padding: .4em 1.15em; font-size: var(--fs-small); font-weight: 500; line-height: 1.6; color: var(--ink); box-shadow: 0 6px 14px -10px rgba(18, 60, 8, .6); }

/* =========================================================
   考動
   ========================================================= */
.kodo { position: relative; z-index: 1; background: var(--paper); padding-block: calc(clamp(56px, 7vw, 110px) + var(--edge)) clamp(180px, 20vw, 320px); }
.kodo::before { content: ""; position: absolute; inset: 0; background: url("assets/paper.webp") 0 0 / 512px repeat; mix-blend-mode: multiply; opacity: .55; pointer-events: none; }
.leaf--k { right: 4vw; top: 4%; rotate: 24deg; }
.kodo__town { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: .9; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); pointer-events: none; }
.kodo__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.kodo__stage { position: relative; height: clamp(420px, 44vw, 620px); }
.kodo__runner { position: absolute; z-index: 2; left: 4%; bottom: 4%; height: 88%; aspect-ratio: 693 / 1300; }
.kodo__run { width: 100%; height: 100%; }
.kodo__runner { filter: drop-shadow(0 16px 18px rgba(20, 40, 20, .22)); }
.kodo__shadow { position: absolute; z-index: 1; left: 8%; bottom: 2.5%; width: 34%; height: 4.5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 50, 20, .28), rgba(30, 50, 20, 0)); }
.kodo__lines { position: absolute; z-index: 1; left: -4%; bottom: 30%; width: 26%; display: grid; gap: 14px; }
.kodo__lines i { display: block; height: 5px; border-radius: 5px; background: var(--lime-light); opacity: 0; }
.kodo__lines i:nth-child(2) { width: 70%; margin-left: 30%; background: var(--sun); }
.kodo__lines i:nth-child(3) { width: 85%; margin-left: 8%; }
.kodo__stamp { position: absolute; z-index: 3; right: -2%; top: -9%; width: 48%; transform: rotate(-7deg); }
.kodo__brush { position: absolute; left: -12%; top: 10%; width: 124%; height: auto; }
.kodo__mark { position: relative; width: 100%; height: auto; }
.kodo .lead { max-width: 30em; }
.kodo .sub-h { margin-top: clamp(28px, 3.5vw, 44px); }
.works { margin-top: 1.4em; display: grid; gap: 22px; }
.memo {
  position: relative;
  background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo);
  border-radius: 4px;
  padding: 1.5em 1.6em 1.3em;
  box-shadow: 0 18px 30px -22px rgba(40, 50, 20, .55), 0 3px 8px -4px rgba(40, 50, 20, .25);
  transition: rotate .4s var(--ease), translate .4s var(--ease);
}
.memo::before { content: ""; position: absolute; left: 1.6em; right: 1.6em; top: 3.2em; border-top: 2px dotted rgba(110, 186, 44, .55); }
.memo--a { rotate: -.8deg; }
.memo--b { rotate: .7deg; margin-left: clamp(0px, 3vw, 40px); }
.memo:hover { rotate: 0deg; translate: 0 -3px; }
.memo__title { font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); font-weight: 500; line-height: 1.55; letter-spacing: .05em; color: var(--btn); font-feature-settings: "palt"; }
.memo p { margin-top: .8em; line-height: 1.9; }

/* =========================================================
   取り組み
   ========================================================= */
.plan { position: relative; z-index: 2; background: var(--paper-2); padding-block: calc(clamp(56px, 7vw, 110px) + var(--edge)) clamp(64px, 8vw, 120px); }
.plan::before { content: ""; position: absolute; inset: 0; background: url("assets/paper.webp") 0 0 / 512px repeat; mix-blend-mode: multiply; opacity: .9; pointer-events: none; }
.leaf--p { left: 2vw; top: 2%; rotate: -30deg; }
.plan__head .lead { max-width: 34em; }
.theme {
  --tint: var(--lime-pale); --acc: var(--lime); --acc-text: var(--lime-deep);
  position: relative;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 84px); align-items: start;
  max-width: 1240px; margin: clamp(64px, 8vw, 128px) auto 0; padding-inline: var(--pad);
}
.theme--life { --tint: #fde4c9; --acc: var(--apricot); --acc-text: var(--apricot-deep); }
.theme--people { --tint: #d5edf9; --acc: var(--sky); --acc-text: var(--sky-deep); }
.theme--bousai { --tint: #e2f2cb; --acc: var(--lime); --acc-text: #3b7a12; }
.theme--flip .theme__visual { order: 2; }
.theme__visual { position: relative; aspect-ratio: 1 / 1; }
.paint { position: absolute; inset: 0; display: grid; place-items: center; }
.theme__wash { position: absolute; left: -8%; top: 62%; width: 116%; height: auto; rotate: -8deg; opacity: .55; }
.theme--people .theme__wash { rotate: 7deg; top: 66%; }
.theme__blob { position: absolute; inset: 6%; background: var(--tint); border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; animation: blob 16s ease-in-out infinite alternate; }
.theme__ring { position: absolute; inset: 1%; width: 98%; height: 98%; overflow: visible; fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.theme__ring path { stroke-dasharray: 600; stroke-dashoffset: 0; }
.theme__img { position: relative; width: 88%; height: auto; filter: blur(0) drop-shadow(0 16px 20px rgba(60, 50, 20, .14)); }
.theme__name { font-size: var(--fs-theme); line-height: 1.22; color: var(--ink); }
.theme__name::after { content: ""; display: block; width: min(200px, 50%); height: 14px; margin: .35em 0 0 -4px; background: no-repeat 0 50% / 100% 100%; }
.theme--life .theme__name::after { background-image: url("assets/brush-1.webp"); }
.theme--people .theme__name::after { background-image: url("assets/brush-2.webp"); }
.theme--bousai .theme__name::after { background-image: url("assets/brush-0.webp"); }
.theme__lead { margin-top: .8em; font-size: var(--fs-lead); font-weight: 500; line-height: 1.7; letter-spacing: .05em; color: var(--acc-text); }
.theme .prose { margin-top: .9em; }

/* 発言：大きく、角のかっこで囲む */
.voice { position: relative; margin-top: 1.8em; padding: .9em 1.1em .9em 1.3em; }
.voice::before, .voice::after { content: ""; position: absolute; width: 1.6em; height: 1.6em; border: 0 solid var(--acc); }
.voice::before { left: 0; top: 0; border-left-width: 5px; border-top-width: 5px; }
.voice::after { right: 0; bottom: 2.4em; border-right-width: 5px; border-bottom-width: 5px; }
.voice p { font-size: var(--fs-voice); line-height: 1.3; color: var(--ink); }
.voice__ln { display: inline-block; vertical-align: top; }
.voice cite { display: block; margin-top: .9em; font-style: normal; font-size: var(--fs-small); font-weight: 500; line-height: 1.7; color: var(--ink); letter-spacing: .06em; }

.new { position: relative; margin-top: 2em; background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo); border-radius: 4px; padding: 1.7em 1.6em 1.5em; box-shadow: 0 18px 30px -22px rgba(40, 50, 20, .55), 0 3px 8px -4px rgba(40, 50, 20, .25); }
.new__label { display: inline-block; background: var(--btn); color: #fff; border-radius: 999px; padding: .1em .95em; font-size: var(--fs-small); font-weight: 500; letter-spacing: .12em; line-height: 1.8; }
.new__title { margin-top: .55em; font-size: clamp(1.12rem, 1rem + .45vw, 1.36rem); font-weight: 500; line-height: 1.5; letter-spacing: .05em; color: var(--green-ink); font-feature-settings: "palt"; }
.new p:not(.new__label) { margin-top: .5em; }
.new__note { font-size: var(--fs-small); line-height: 1.85; color: var(--ink-soft); padding-top: .9em; margin-top: 1em !important; border-top: 2px dotted rgba(110, 186, 44, .55); }

/* 開閉 */
details { interpolate-size: allow-keywords; }
details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
details[open]::details-content { height: auto; }
.more summary, .promises__box summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .7em;
  margin-top: 1.6em; padding: .62em 1.25em .62em 1.4em;
  border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 2px var(--acc, var(--lime)) inset, 0 6px 14px -10px rgba(40, 50, 20, .5);
  font-weight: 500; font-size: var(--fs-small); letter-spacing: .08em; line-height: 1.5;
  transition: background .25s ease, translate .25s var(--ease);
}
.more summary:hover { background: var(--tint, var(--lime-pale)); translate: 0 -2px; }
.more summary::-webkit-details-marker, .promises__box summary::-webkit-details-marker { display: none; }
.more summary::after, .promises__box summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2.5px 100% no-repeat;
  transition: rotate .35s var(--ease);
}
.more[open] summary::after, .promises__box[open] summary::after { rotate: 45deg; }
details[open] > summary .s-open, details:not([open]) > summary .s-close { display: none; }
.more__body { padding-top: 1.2em; max-width: 36em; }
.more__title { margin-top: 1.4em; display: flex; align-items: center; gap: .6em; font-size: var(--fs-body); font-weight: 500; line-height: 1.6; letter-spacing: .06em; color: var(--acc-text, var(--green-ink)); }
.more__title::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--acc, var(--lime)); flex: none; }
.more__title:first-child { margin-top: 0; }
.more__body p { margin-top: .4em; }
.dots { margin-top: .5em; display: grid; gap: .45em; }
.dots li { position: relative; padding-left: 1.2em; line-height: 1.85; }
.dots li::before { content: ""; position: absolute; left: .2em; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.tags { margin-top: .6em; display: flex; flex-wrap: wrap; gap: .5em; }
.tags li { background: var(--tint); border-radius: 10px; padding: .35em .9em; font-size: var(--fs-small); font-weight: 500; line-height: 1.6; }

.promises { margin-top: clamp(64px, 8vw, 110px); }
.promises__box { position: relative; background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo); border-radius: 6px; padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3.2vw, 44px); box-shadow: 0 22px 40px -30px rgba(40, 60, 20, .6), 0 3px 8px -4px rgba(40, 50, 20, .2); }
.promises .tape--tl { left: calc(var(--pad) - 24px); top: -14px; }
.promises__box summary { margin-top: 0; box-shadow: none; padding: .3em 0; background: none; font-size: var(--fs-lead); color: var(--green-ink); }
.promises__intro { padding-top: 1em; font-size: var(--fs-small); color: var(--ink-soft); }
.promises__cols { margin-top: 1.2em; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.promises__group-title { display: inline-block; border-radius: 999px; padding: .2em 1.1em; color: #fff; font-size: var(--fs-small); font-weight: 500; letter-spacing: .12em; }
.promises__group-title--warm { background: #c4503c; }
.promises__group-title--green { background: #11806b; }
.promises dl { margin-top: .4em; }
.promises dt { margin-top: 1.1em; font-weight: 500; line-height: 1.6; letter-spacing: .04em; }
.promises dd { margin-top: .3em; font-size: var(--fs-small); line-height: 1.75; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .15em 1.2em; }
.promises .sub { position: relative; padding-left: .85em; }
.promises .sub::before { content: ""; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }

/* =========================================================
   アドホックネットワーク（しくみ図）
   ========================================================= */
.adhoc-link { margin-top: 1.8em; display: inline-flex; align-items: center; gap: .8em; text-decoration: none; font-weight: 500; color: var(--ink); background: #fff; border-radius: 999px; padding: .5em 1.2em .5em .5em; box-shadow: 0 0 0 2px var(--lime) inset, 0 8px 18px -12px rgba(40, 50, 20, .55); transition: translate .25s var(--ease); }
.adhoc-link:hover { translate: 0 -2px; }
.adhoc-link::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; translate: 0 -3px; }
.adhoc-link__label { flex: none; background: var(--btn); color: #fff; border-radius: 999px; padding: .1em .85em; font-size: var(--fs-small); letter-spacing: .1em; white-space: nowrap; }

.adhoc { position: relative; margin-top: clamp(72px, 9vw, 140px); padding-block: clamp(48px, 6vw, 88px) clamp(56px, 6vw, 96px);
  background: radial-gradient(900px 500px at 80% 0%, rgba(58, 162, 216, .16), rgba(58, 162, 216, 0) 70%), linear-gradient(180deg, #eef7fb 0%, #f6fbf0 100%);
  border-top: 2px dashed rgba(58, 162, 216, .35); border-bottom: 2px dashed rgba(110, 186, 44, .35); }
.adhoc__head { text-align: center; display: grid; justify-items: center; }
.adhoc__label { display: inline-block; background: var(--sky-deep); color: #fff; border-radius: 999px; padding: .15em 1.1em; font-size: var(--fs-small); font-weight: 500; letter-spacing: .14em; line-height: 1.9; }
.adhoc__title { margin-top: .45em; --flash: var(--sky); }
.adhoc__title .disp__ln { margin-inline: .04em; }
.adhoc__sub { margin-top: .5em; font-size: var(--fs-lead); font-weight: 500; letter-spacing: .08em; color: var(--sky-deep); }
.adhoc__grid { margin-top: clamp(28px, 3.5vw, 48px); display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 52px); align-items: center; }
.adhoc__fig { position: relative; margin-left: clamp(-40px, -2.5vw, 0px); }
.adhoc__map { position: relative; aspect-ratio: 3 / 2; }
.adhoc__img, .adhoc__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.adhoc__svg { overflow: visible; font-family: inherit; }
.adhoc__fig figcaption { margin-top: .3em; text-align: right; font-size: .8rem; color: var(--ink-soft); letter-spacing: .06em; }

/* 図の中の記号 */
.ad-mesh line { stroke: #fff; stroke-width: 6; stroke-dasharray: 2 14; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 2px rgba(19, 113, 159, .7)); }
.ad-links line { stroke: var(--lime); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgba(20, 60, 20, .35)); }
.ad-links line.is-hot { stroke: var(--sun); stroke-width: 12; }
.ad-node .ad-body { fill: #fff; stroke: var(--green-ink); stroke-width: 5; }
.ad-node .ad-screen { fill: #b9c0bb; transition: fill .25s ease; }
.ad-node .ad-wheel { fill: var(--green-ink); }
.ad-node .ad-halo { fill: rgba(255, 255, 255, .7); }
.ad-node .ad-ring { fill: none; stroke: var(--lime); stroke-width: 5; opacity: 0; }
.ad-node .ad-wave { fill: none; stroke: var(--lime-deep); stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .3s ease; }
.ad-node.is-on .ad-screen { fill: var(--lime); }
.ad-node.is-on .ad-wave { opacity: 1; }
.ad-node.is-on .ad-ring { animation: ad-ping 1.6s ease-out infinite; }
.ad-node.is-relay .ad-screen { fill: var(--sun); }
.ad-node.is-relay .ad-halo { fill: rgba(255, 226, 77, .85); }
.ad-label rect { fill: #fff; stroke: var(--green-ink); stroke-width: 4; }
.ad-label text { font-size: 25px; font-weight: 500; fill: var(--green-ink); letter-spacing: .04em; }
.ad-label--tower rect { fill: var(--red); stroke: #fff; }
.ad-label--tower text { fill: #fff; }
.ad-label--shelter rect { fill: var(--lime-deep); stroke: #fff; }
.ad-label--shelter text { fill: #fff; }
.ad-signal path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(19, 113, 159, .8)); }
.ad-x circle { fill: #d9472f; stroke: #fff; stroke-width: 5; }
.ad-x path { stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.ad-shelter__glow { fill: rgba(255, 226, 77, .0); transition: fill .6s ease; }
.ad-shelter.is-arrived .ad-shelter__glow { fill: rgba(255, 226, 77, .42); animation: ad-glow 1.4s ease-in-out infinite alternate; }
.ad-pin { fill: var(--lime-deep); stroke: #fff; stroke-width: 4; }
.ad-pin__house { fill: #fff; }
.ad-packet__glow { fill: rgba(255, 226, 77, .55); }
.ad-packet__dot { fill: #fff; stroke: #f0a500; stroke-width: 5; }
.ad-chip rect { fill: #fff; stroke: var(--green-ink); stroke-width: 4; }
.ad-chip text, .ad-done text { font-size: 25px; font-weight: 500; fill: var(--green-ink); }
.ad-done rect, .ad-done__tail { fill: var(--sun); stroke: var(--green-ink); stroke-width: 4; }
.ad-done text { font-size: 30px; }
@keyframes ad-ping { 0% { opacity: .9; r: 34; } 100% { opacity: 0; r: 70; } }
@keyframes ad-glow { from { opacity: .7; } to { opacity: 1; } }

/* 説明の3段：図の動きに合わせて今の段が光る */
.adhoc__steps { display: grid; gap: 12px; }
.adhoc__step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 2px rgba(21, 54, 26, .08) inset; transition: background .35s ease, box-shadow .35s ease, translate .35s var(--ease); }
.adhoc__step.is-now { background: #fff; box-shadow: 0 0 0 3px var(--sky) inset, 0 14px 28px -18px rgba(19, 113, 159, .7); translate: -6px 0; }
.adhoc__icon { width: 58px; height: 58px; border-radius: 50%; background: var(--sky-pale); display: grid; place-items: center; transition: background .35s ease; }
.adhoc__step.is-now .adhoc__icon { background: var(--sky); }
.adhoc__icon svg { width: 36px; height: 36px; fill: none; stroke: var(--green-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.adhoc__icon .x { stroke: #d9472f; }
.adhoc__icon .fill { fill: var(--green-ink); stroke: none; }
.adhoc__icon .dash { stroke-dasharray: 2 4; }
.adhoc__step.is-now .adhoc__icon svg { stroke: #fff; }
.adhoc__step.is-now .adhoc__icon .fill { fill: #fff; }
.adhoc__step.is-now .adhoc__icon .x { stroke: #fff; }
.adhoc__txt { display: grid; gap: .15em; }
.adhoc__txt strong { font-size: clamp(1.08rem, .98rem + .4vw, 1.3rem); font-weight: 500; letter-spacing: .05em; line-height: 1.5; color: var(--ink); }
.adhoc__txt span { font-size: var(--fs-small); line-height: 1.8; color: var(--ink); }

.adhoc__with { position: relative; margin-top: 18px; background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo); border-radius: 6px; padding: 1.3em 1.4em 1.2em; box-shadow: 0 18px 30px -22px rgba(40, 50, 20, .55), 0 3px 8px -4px rgba(40, 50, 20, .25); }
.adhoc__with::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid rgba(58, 162, 216, .4); border-radius: 3px; pointer-events: none; }
/* 「ともに取り組む」の下に、肩書（2段）・名前・研究室、その右に丸い写真 */
/* 札の幅に合わせて、写真と名前の大きさを決める（名前は1行のまま写真に重ならない） */
.adhoc__with { container-type: inline-size; }
.adhoc__with-head { --face: clamp(76px, 26cqi, 100px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9em; align-items: center; margin-top: .5em; }
.adhoc__org > span { display: block; }
.adhoc__face { width: var(--face); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--sky), 0 12px 20px -12px rgba(15, 60, 90, .6); }
.adhoc__with-label { font-size: var(--fs-small); font-weight: 500; letter-spacing: .14em; color: var(--sky-deep); }
.adhoc__who { display: grid; grid-template-columns: minmax(0, 1fr); line-height: 1.5; }
.adhoc__org, .adhoc__lab { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.adhoc__name { margin-block: .1em; font-size: clamp(1rem, calc((100cqi - var(--face) - 16px) / 7.6), 1.6rem); font-weight: 500; letter-spacing: .1em; white-space: nowrap; color: var(--ink); line-height: 1.4; }
.adhoc__note { position: relative; margin-top: .7em; padding-top: .7em; border-top: 2px dotted rgba(58, 162, 216, .4); font-size: var(--fs-small); line-height: 1.85; color: var(--ink); }

@media (max-width: 960px) {
  .adhoc__grid { grid-template-columns: minmax(0, 1fr); }
  .adhoc__fig { margin-inline: calc(var(--pad) * -.6); }
}
@media (max-width: 700px) {
  .adhoc__fig { margin-inline: calc(var(--pad) * -1); }
  .adhoc__map { aspect-ratio: 1320 / 800; overflow: hidden; }
  .adhoc__img { inset: auto; width: 116.364%; height: 128%; left: -9.091%; top: -16.25%; }
  .adhoc__fig figcaption { padding-inline: var(--pad); }
  .adhoc-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35em .6em; align-items: center; border-radius: 18px; padding: .8em 1.1em .9em; width: 100%; }
  .adhoc-link__label { justify-self: start; grid-column: 1 / -1; }
  .adhoc-link::after { grid-row: 2; grid-column: 2; }
  .adhoc__step { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 12px 14px 12px 10px; }
  .adhoc__icon { width: 46px; height: 46px; }
  .adhoc__icon svg { width: 28px; height: 28px; }
  .adhoc__step.is-now { translate: 0 0; }
}

/* =========================================================
   歩み
   ========================================================= */
.ayumi { position: relative; z-index: 3; background: linear-gradient(180deg, #d9effa 0%, #eef8fd 55%, #f7fbf2 100%); padding-block: calc(clamp(56px, 7vw, 110px) + var(--edge)) clamp(110px, 12vw, 180px); }
.ayumi__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ayumi__cloud { position: absolute; height: auto; opacity: .9; animation: drift 54s ease-in-out infinite alternate; }
.ayumi__cloud--a { width: clamp(140px, 16vw, 260px); left: 58%; top: 7%; }
.ayumi__cloud--b { width: clamp(110px, 12vw, 200px); left: 8%; bottom: 10%; animation-duration: 66s; animation-direction: alternate-reverse; }
.ayumi__body { position: relative; z-index: 1; }
.ayumi__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
@media (min-width: 961px) { .ayumi__visual { position: sticky; top: calc(var(--hd) + 24px); } }
.polaroid { position: relative; z-index: 1; justify-self: center; width: min(100%, 420px); background: #fff; padding: 14px 14px 56px; border-radius: 3px; box-shadow: 0 28px 44px -28px rgba(20, 60, 90, .6), 0 4px 10px -4px rgba(20, 60, 90, .25); }
.polaroid__photo { overflow: hidden; border-radius: 2px; }
.polaroid__photo img { width: 100%; height: auto; }
/* プロフィール：名前 → 肩書 → 紹介文 → 表 → 主な経歴（すっきりした表と年表） */
.pf { margin-top: .3em; }
.pf__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .9em; }
.pf__name-main { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 500; letter-spacing: .14em; line-height: 1.3; color: var(--green-ink); }
.pf__kana { font-size: var(--fs-small); font-weight: 500; letter-spacing: .16em; color: var(--ink); }
.pf__pos { margin-top: .15em; font-size: var(--fs-lead); font-weight: 500; letter-spacing: .06em; line-height: 1.6; color: var(--ink); }
.pf__summary { margin-top: 1.1em; line-height: 2; color: var(--ink); }
.pf__table { margin-top: 1.6em; border-top: 1px solid rgba(22, 22, 22, .5); }
.pf__table div { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); border-bottom: 1px solid rgba(22, 22, 22, .16); }
.pf__table dt { white-space: nowrap; padding: .95em 1.1em; background: rgba(15, 102, 144, .07); font-size: var(--fs-small); font-weight: 500; line-height: 1.7; letter-spacing: .06em; color: var(--ink); }
.pf__table dd { padding: .85em 1.1em; background: rgba(255, 255, 255, .72); line-height: 1.8; color: var(--ink); }
.pf__sub { margin-top: 2.2em; font-size: var(--fs-h3); font-weight: 500; letter-spacing: .1em; line-height: 1.5; color: var(--green-ink); }
.timeline { position: relative; margin-top: .4em; display: grid; gap: .2em; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 1em; bottom: 1.6em; width: 1.5px; background: rgba(22, 22, 22, .22); transform-origin: top; }
.timeline li { position: relative; display: grid; padding: .55em 0 .7em 2em; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .95em; width: 13.5px; height: 13.5px; border-radius: 50%; background: var(--green-ink); box-shadow: 0 0 0 3px #eaf6fc; }
.timeline li:last-child::before { background: var(--lime); box-shadow: 0 0 0 3px #eaf6fc, 0 0 0 5px var(--lime); }
.timeline__y { font-weight: 500; color: var(--ink); letter-spacing: .04em; line-height: 1.6; }
.timeline__t { line-height: 1.75; }
.timeline li:last-child .timeline__y, .timeline li:last-child .timeline__t { color: var(--green-ink); }
.more--plain { --acc: var(--sky); --tint: var(--sky-pale); --acc-text: var(--sky-deep); }
.career { display: grid; gap: .1em; }
.career div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: .8em; padding: .6em 0; border-bottom: 1px solid rgba(22, 22, 22, .14); }
.career dt { font-weight: 500; color: var(--ink); font-size: var(--fs-small); line-height: 2; }
.career dd { line-height: 1.8; }
/* 地域での主な役職：役職を先に、時期はその下に小さく（上の経歴と同じ罫線） */
.roles { display: grid; gap: .1em; }
.roles li { display: grid; gap: .1em; padding: .6em 0; border-bottom: 1px solid rgba(22, 22, 22, .14); }
.roles__name { font-weight: 500; line-height: 1.75rem; text-wrap: balance; }
.roles__when { font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }

/* これまでの活動から：写真の帯がゆっくり流れ続ける（上と下で逆向き） */
.katsudo { position: relative; z-index: 1; margin-top: clamp(56px, 7vw, 96px); }
.katsudo__title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: .08em; color: var(--ink); display: flex; align-items: center; gap: .6em; }
.katsudo__title::after { content: ""; width: min(160px, 30vw); height: 12px; background: url("assets/brush-2.webp") no-repeat 0 50% / 100% 100%; }
.katsudo__lead { margin-top: .5em; color: var(--ink); }
.katsudo__row { display: flex; width: max-content; margin-top: clamp(18px, 2.4vw, 28px); }
.katsudo__row--b { margin-top: 22px; }
.katsudo__track { display: flex; gap: clamp(14px, 1.6vw, 22px); padding-right: clamp(14px, 1.6vw, 22px); animation: katsudo 70s linear infinite; animation-play-state: paused; }
.katsudo__row--b .katsudo__track { animation-direction: reverse; animation-duration: 64s; }
.is-live .katsudo__track { animation-play-state: running; }
.katsudo__row:hover .katsudo__track { animation-play-state: paused; }
.act { flex: none; width: clamp(220px, 21vw, 300px); background: #fff; padding: 8px 8px 0; border-radius: 4px; box-shadow: 0 16px 28px -20px rgba(20, 60, 90, .7), 0 3px 8px -4px rgba(20, 60, 90, .25); }
.act img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.act__cap { display: block; padding: .55em .3em .7em; font-size: var(--fs-small); font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--ink); text-align: center; }
@keyframes katsudo { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 700px) {
  .act { width: 210px; padding: 6px 6px 0; }
  .katsudo__track { animation-duration: 56s; }
  .katsudo__row--b .katsudo__track { animation-duration: 50s; }
}

/* =========================================================
   事務所
   ========================================================= */
/* ---------- 活動報告（動画）：縦長の動画の枠を3つ。動画ができたら .vcard__frame の中身を差し替える ---------- */
.report { position: relative; z-index: 3; background: url("assets/paper.webp") 0 0 / 512px repeat, var(--paper-2); padding-block: calc(clamp(56px, 7vw, 110px) + var(--edge)) clamp(120px, 12vw, 180px); }
.report__lead { margin-top: .1em; }
.vlist { margin-top: clamp(26px, 3vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); max-width: 980px; }
.vcard__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #dcecf3; box-shadow: 0 22px 36px -24px rgba(20, 50, 10, .6), 0 4px 10px -6px rgba(20, 50, 10, .3); }
.vcard__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.22); filter: saturate(.9) brightness(.9); } /* 絵の縁（破れた形）が枠に出ないよう少し拡大 */
.vcard__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 10, 0) 45%, rgba(10, 30, 10, .5)); }
.vcard__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); }
.vcard__play::before { content: ""; position: absolute; left: 25px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--green-ink); }
.vcard__soon { position: absolute; z-index: 1; left: 14px; top: 14px; padding: .15em .85em; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .74rem; font-weight: 500; letter-spacing: .1em; line-height: 1.7; color: var(--ink); }
.vcard__cat { margin-top: .9em; font-size: var(--fs-small); font-weight: 500; letter-spacing: .1em; color: var(--btn); }
.vcard__title { line-height: 1.6; color: var(--ink); }
.report__more { margin-top: clamp(26px, 3vw, 40px); }

.office { position: relative; z-index: 4; background: radial-gradient(800px 500px at 15% 85%, #86c94a 0%, rgba(134, 201, 74, 0) 70%), var(--lime); padding-block: calc(clamp(56px, 7vw, 100px) + var(--edge)) clamp(96px, 14vw, 220px); }
.office::before { content: ""; position: absolute; inset: 0; background: url("assets/paper.webp") 0 0 / 512px repeat; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.leaf--o { right: 3vw; top: 3%; rotate: 16deg; }
/* 草原の絵：狭い画面でも幅1000px分の大きさで中央を見せ、花の咲く下側までフッターの上に出す（奥行きで上下に動くので下は少し余らせる） */
.office__meadow { position: absolute; left: min(0px, calc(50% - 500px)); bottom: -24px; width: max(100%, 1000px); max-width: none; height: auto; pointer-events: none; }
.office__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
@media (min-width: 961px) { .office__visual { position: sticky; top: calc(var(--hd) + 40px); } }
.office__visual { position: relative; height: clamp(420px, 44vw, 620px); }
.phone { position: absolute; left: 0; right: 0; top: 4%; bottom: 6%; display: flex; justify-content: center; }
/* 波線は似顔絵の絵と同じ枠に置き、電話（絵の左 15%・上 37% あたり）のすぐ外側から広げる */
.phone__fig { position: relative; height: 100%; aspect-ratio: 677 / 1300; }
.phone__img { display: block; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 22px 24px rgba(18, 60, 8, .32)); }
.ring { position: absolute; left: 1%; top: 32.5%; width: 13%; aspect-ratio: 1; }
.ring i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-left-color: var(--green-ink); border-top-color: var(--green-ink); rotate: -60deg; opacity: 0; animation: ring 2.6s ease-out infinite; }
.ring i:nth-child(2) { inset: -40%; animation-delay: .25s; }
.ring i:nth-child(3) { inset: -80%; animation-delay: .5s; }
.office__card { position: relative; background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo); border-radius: 6px; padding: clamp(30px, 4vw, 56px); box-shadow: 0 30px 60px -36px rgba(18, 60, 8, .7), 0 6px 14px -8px rgba(18, 60, 8, .3); }
.office__card::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(110, 186, 44, .45); border-radius: 3px; pointer-events: none; }
.office__title { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.9rem); }
.office .lead { margin-top: .9em; }
.tel { margin-top: 1.1em; display: inline-flex; align-items: center; gap: .6em; text-decoration: none; color: var(--green-ink); }
.tel__label { background: var(--btn); color: #fff; border-radius: 999px; padding: .15em .8em; font-size: var(--fs-small); font-weight: 500; letter-spacing: .1em; line-height: 1.8; }
.tel__num { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); font-weight: 500; letter-spacing: .03em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.info { margin-top: 1.1em; display: grid; }
.info div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 1em; padding: .8em 0; border-top: 2px dotted rgba(21, 54, 26, .16); }
.info dt { font-size: var(--fs-small); font-weight: 500; color: var(--ink); letter-spacing: .1em; line-height: 2.1; }
.info dd { line-height: 1.85; }
.maplink { display: inline-block; margin-top: .2em; font-size: var(--fs-small); font-weight: 500; color: var(--sky-deep); }
.insta { position: relative; margin-top: 1.4em; display: inline-flex; align-items: center; gap: .8em; text-decoration: none; background: var(--green-ink); color: #fff; border-radius: 999px; padding: .7em 1.5em .7em 1.1em; font-weight: 500; line-height: 1.4; transition: translate .25s var(--ease), background .25s ease; }
.insta:hover { translate: 0 -2px; background: #1f4b23; }
.insta svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; }
.insta svg circle:last-child { fill: #fff; stroke: none; }
.insta small { display: block; font-size: .78rem; opacity: .8; letter-spacing: .06em; }

/* 事務所の写真（カードのいちばん下） */
.office__photo { position: relative; margin-top: 1.6em; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 26px -18px rgba(18, 60, 8, .6); }
.office__photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 62%; }

/* =========================================================
   プロフィール・ナビの入会ボタン・事務所からの案内・フッターのリンク
   ========================================================= */
.hd__join { background: var(--btn); color: #fff !important; border-radius: 999px; padding: .38em 1.05em !important; text-shadow: none !important; }
.hd__join::after { display: none; }
.hd__join:hover { background: var(--btn-dark); }
.hd__home { margin-right: auto; font-weight: 500; font-size: 1.2rem; letter-spacing: .08em; text-decoration: none; color: var(--green-ink); }
.office__links { margin-top: 1.1em; display: flex; flex-wrap: wrap; gap: .6em; }
.pill-btn { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; font-weight: 500; font-size: var(--fs-small); letter-spacing: .08em; color: var(--green-ink); background: #fff; border-radius: 999px; padding: .65em 1.3em; box-shadow: 0 0 0 2px var(--lime) inset, 0 8px 16px -12px rgba(40, 50, 20, .55); transition: translate .25s var(--ease), background .25s ease; }
.pill-btn::after { content: ""; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: -45deg; }
.pill-btn:hover { translate: 0 -2px; background: var(--lime-pale); }
.pill-btn--join { background: var(--btn); color: #fff; box-shadow: 0 8px 16px -12px rgba(40, 50, 20, .55); }
.pill-btn--join:hover { background: var(--btn-dark); }
.ft__links { margin-top: .6em; display: flex; flex-wrap: wrap; gap: .3em 1.4em; font-size: var(--fs-small); }
.ft__links a { color: #fff; font-weight: 500; text-underline-offset: .25em; }
@media (min-width: 961px) and (max-width: 1240px) {
  .hd__nav { gap: 16px; }
  .hd__nav a { font-size: .9rem; letter-spacing: .04em; }
}

/* =========================================================
   下層ページ（お問い合わせ・後援会ご入会・個人情報の取り扱い）
   ========================================================= */
.sub { background: var(--paper-2); }
.sub .hd { justify-content: flex-start; }
.sub .hd__nav { margin-left: auto; }
.subhero { position: relative; padding: calc(var(--hd) + clamp(40px, 6vw, 80px)) 0 calc(clamp(56px, 7vw, 96px) + 44px); background: radial-gradient(800px 420px at 85% 10%, #6eba2c 0%, rgba(110, 186, 44, 0) 70%), var(--btn); overflow: hidden; }
.subhero::before { content: ""; position: absolute; inset: 0; background: url("assets/paper.webp") 0 0 / 512px repeat; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.subhero::after { content: none; }
.subhero--join { background: radial-gradient(800px 420px at 85% 10%, rgba(255, 226, 77, .55) 0%, rgba(255, 226, 77, 0) 70%), var(--btn); }
.subhero--plain { background: linear-gradient(180deg, #d9effa, #eef8fd); }
.subhero--plain::after { display: none; }
.subhero .inner { position: relative; z-index: 1; }
/* 緑ベタの帯の上は白文字（空色の帯 subhero--plain は黒のまま） */
.subhero:not(.subhero--plain) .subhero__title, .subhero:not(.subhero--plain) .subhero__lead { color: #fff; }
.subhero__h { font-size: var(--fs-disp); font-weight: 500; line-height: 1.3; letter-spacing: .06em; color: var(--green-ink); }
.subhero__lead { margin-top: 1em; max-width: 36em; font-size: var(--fs-lead); font-weight: 500; line-height: 1.9; color: var(--ink); }
.subhero__back { margin-top: 1.6em; }
.formsec { --edge: 44px; --edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 22 C 50 28 90 16 140 22 C 200 29 230 15 290 21 C 350 28 380 14 440 20 C 500 27 540 13 600 19 C 660 26 700 13 760 19 C 820 26 850 12 910 18 C 970 25 1010 12 1070 18 C 1130 25 1160 12 1220 18 C 1280 25 1320 13 1380 19 C 1410 22 1430 20 1440 21 L1440 60 Z'/%3E%3C/svg%3E"); position: relative; margin-top: calc(var(--edge) * -1); padding: calc(clamp(32px, 5vw, 64px) + var(--edge)) 0 clamp(64px, 8vw, 110px); background: url("assets/paper.webp") 0 0 / 512px repeat, var(--paper-2);
  -webkit-mask: var(--edge-mask) 0 0 / 100% calc(var(--edge) + 4px) no-repeat, linear-gradient(#000 0 0) 0 var(--edge) / 100% calc(100% - var(--edge)) no-repeat;
  mask: var(--edge-mask) 0 0 / 100% calc(var(--edge) + 4px) no-repeat, linear-gradient(#000 0 0) 0 var(--edge) / 100% calc(100% - var(--edge)) no-repeat; }
.formsec__inner { max-width: 820px; }
.form, .doc { position: relative; background: #fff; border-radius: 8px; padding: clamp(24px, 4vw, 52px); box-shadow: 0 24px 46px -32px rgba(40, 60, 20, .6), 0 4px 10px -6px rgba(40, 50, 20, .2); }
.form::before, .doc::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid rgba(110, 186, 44, .4); border-radius: 4px; pointer-events: none; }
.field { position: relative; display: grid; gap: .45em; margin-bottom: 1.4em; }
.field label, .family legend { display: flex; align-items: center; gap: .6em; font-weight: 500; letter-spacing: .06em; color: var(--ink); line-height: 1.6; }
.req, .opt { flex: none; border-radius: 4px; padding: .05em .55em; font-size: .74rem; font-weight: 500; letter-spacing: .08em; line-height: 1.7; }
.req { background: var(--red); color: #fff; }
.opt { background: #e8ece4; color: var(--ink-soft); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.6;
  background: #fbfaf5; border: 2px solid #d6dccd; border-radius: 10px; padding: .7em .9em;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form textarea { resize: vertical; min-height: 9em; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--lime); background: #fff; box-shadow: 0 0 0 4px rgba(110, 186, 44, .2); }
.form [aria-invalid="true"] { border-color: #d9472f; background: #fff8f6; }
.field__err { color: #c0341d; font-size: var(--fs-small); font-weight: 500; line-height: 1.6; }
.field--zip input { max-width: 12em; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.family { margin: .4em 0 1.6em; padding: 1.1em 1.2em 1.2em; border: 2px dashed #d6dccd; border-radius: 12px; }
.family legend { padding: 0 .4em; }
.family__row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em; gap: .8em; margin-top: .8em; }
.family__row label { display: grid; gap: .3em; font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.form-note { margin: .4em 0 1.1em; padding: 1em 1.1em; background: var(--lime-pale); border-radius: 10px; font-size: var(--fs-small); line-height: 1.9; color: var(--ink); }
.form-note p + p { margin-top: .5em; }
.form-note a { color: var(--sky-deep); font-weight: 500; }
.agree { display: flex; align-items: flex-start; gap: .7em; font-weight: 500; line-height: 1.7; color: var(--ink); cursor: pointer; }
.agree input { flex: none; width: 22px; height: 22px; margin-top: .2em; accent-color: var(--lime-deep); }
.agree .field__err { flex-basis: 100%; }
.agree { flex-wrap: wrap; }
.agree > span { flex: 1; min-width: 0; }
.form-err { margin-top: 1em; color: #c0341d; font-weight: 500; }
.submit { display: block; width: min(100%, 360px); margin: 1.6em auto 0; padding: .95em 1em; border: 0; border-radius: 999px; background: var(--btn); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 500; letter-spacing: .12em; cursor: pointer; box-shadow: 0 14px 24px -14px rgba(40, 80, 10, .8); transition: translate .2s var(--ease), background .2s ease; }
.submit:hover { background: var(--btn-dark); translate: 0 -2px; }
.submit:disabled { background: #9aa592; cursor: wait; translate: none; }
.doc h2 { margin-top: 1.6em; font-size: var(--fs-h3); font-weight: 500; letter-spacing: .06em; color: var(--green-ink); }
.doc p { margin-top: .6em; line-height: 2; }
@media (max-width: 960px) {
  .sub .hd__nav { margin-left: 0; }
  .hd__join { align-self: flex-start; margin-top: .8em; padding: .6em 1.4em !important; border-bottom: 0 !important; }
}
@media (max-width: 700px) {
  .family { padding: .9em .9em 1em; }
  .family__row { grid-template-columns: minmax(0, 1fr) 5em; gap: .6em; }
  .form, .doc { padding: 26px 20px 28px; }
  .hd__home { font-size: 1.05rem; }
}

/* 事務所の案内：すべて同じ大きさの枠 */
.go { margin-top: 1.4em; }
.go__title { margin: 1.3em 0 .6em; display: flex; align-items: center; gap: .6em; font-size: var(--fs-body); font-weight: 500; letter-spacing: .08em; color: var(--ink); }
.go__title::after { content: ""; flex: 1; max-width: 140px; height: 10px; background: url("assets/brush-0.webp") no-repeat 0 50% / 100% 100%; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45em; min-height: clamp(92px, 9vw, 116px); padding: .8em .3em; border-radius: 16px; text-decoration: none; text-align: center; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px #e3e8dc inset, 0 10px 18px -14px rgba(30, 60, 10, .6); transition: translate .25s var(--ease), box-shadow .25s ease, background .25s ease; }
a.tile:hover { translate: 0 -3px; box-shadow: 0 0 0 2px var(--lime) inset, 0 16px 24px -16px rgba(30, 60, 10, .7); }
.tile svg { width: clamp(28px, 2.6vw, 34px); height: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tile svg .solid { fill: currentColor; stroke: none; }
.tile svg .dot { fill: currentColor; stroke: none; }
.tile__label { font-size: clamp(.8rem, .74rem + .2vw, .92rem); font-weight: 500; letter-spacing: .02em; line-height: 1.3; white-space: nowrap; font-feature-settings: "palt"; }
.tile--green { color: #fff; box-shadow: 0 10px 18px -12px rgba(30, 80, 10, .7); }
.tile--g1 { background: #5fae24; }
.tile--g2 { background: #4fa01d; }
.tile--g3 { background: #3f9017; }
a.tile--green:hover { filter: brightness(.92); box-shadow: 0 16px 24px -14px rgba(30, 80, 10, .8); }
/* SNSは各社の本来の色のアイコン（色はSVG側に持たせる） */
.tile--brand svg { width: clamp(32px, 3vw, 38px); stroke: none; }
.tile.is-soon { opacity: .75; }
.tile__soon { position: absolute; top: 6px; right: 6px; font-size: .62rem; font-weight: 500; letter-spacing: .06em; color: #fff; background: var(--ink); border-radius: 999px; padding: .1em .55em; line-height: 1.6; }
@media (max-width: 380px) { .tile__label { font-size: .72rem; letter-spacing: 0; } }

/* =========================================================
   フッター
   ========================================================= */
.ft { position: relative; z-index: 5; background: #46961a; color: #fff; padding-block: clamp(40px, 5vw, 64px); }
.ft__inner { display: grid; gap: .2em; }
.ft__name { font-size: 1.25rem; font-weight: 500; letter-spacing: .08em; color: #fff; }
.ft__name span { font-size: .85rem; font-weight: 400; margin-left: .3em; }
.ft__role, .ft__addr { font-size: var(--fs-small); }
.ft__copy { margin-top: 1em; font-size: .78rem; opacity: .8; }

/* =========================================================
   タブレット・スマートフォン
   ========================================================= */
@media (max-width: 960px) {
  :root { --hd: 58px; }
  .hd__nav {
    position: fixed; inset: var(--hd) 0 auto 0;
    flex-direction: column; gap: 0;
    background: rgba(255, 253, 247, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 8px var(--pad) 20px;
    box-shadow: 0 20px 30px -20px rgba(21, 54, 26, .4);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, transform .3s var(--ease), visibility 0s .3s;
  }
  .hd__nav.is-open { transform: none; opacity: 1; visibility: visible; transition: opacity .25s ease, transform .3s var(--ease), visibility 0s 0s; }
  .hd__nav a { padding: .9em 0; font-size: 1.05rem; border-bottom: 1px solid rgba(21, 54, 26, .1); text-shadow: none; }
  .hd__nav a::after { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: .5em; border: 0; background: var(--btn); color: #fff; border-radius: 999px; padding: .45em 1em; font-size: .82rem; font-weight: 500; letter-spacing: .06em; cursor: pointer; }
  .menu-btn { position: relative; overflow: hidden; isolation: isolate; }
  /* メニューを開いたら、項目が上から順に、1文字ずつ跳ねるように出る */
  .hd__nav .ch { display: inline-block; white-space: pre; }
  .js:not(.motion-off) .hd__nav a { opacity: 0; translate: 16px 0; transition: opacity .3s ease, translate .5s var(--out); }
  .js:not(.motion-off) .hd__nav .ch { opacity: 0; translate: 0 .7em; filter: blur(3px); transition: opacity .25s ease, translate .45s var(--pop), filter .3s ease; }
  .js:not(.motion-off) .hd__nav.is-open a { opacity: 1; translate: 0 0; transition-delay: calc(.05s + var(--i, 0) * 55ms); }
  .js:not(.motion-off) .hd__nav.is-open .ch { opacity: 1; translate: 0 0; filter: blur(0); transition-delay: calc(.1s + var(--i, 0) * 55ms + var(--c, 0) * 26ms); }
  .menu-btn__bars { width: 14px; height: 10px; background: linear-gradient(#fff, #fff) 0 0 / 100% 2px no-repeat, linear-gradient(#fff, #fff) 0 50% / 100% 2px no-repeat, linear-gradient(#fff, #fff) 0 100% / 100% 2px no-repeat; }

  .hito__grid, .kodo__grid, .ayumi__grid, .office__grid, .hito__lower { grid-template-columns: minmax(0, 1fr); }
  .theme { grid-template-columns: minmax(0, 1fr); }
  .theme--flip .theme__visual { order: 0; }
  .theme__visual { width: min(100%, 520px); justify-self: center; }
  .promises__cols { grid-template-columns: minmax(0, 1fr); }
  .kodo__stage { order: 2; }
  .office__visual { order: 2; height: clamp(420px, 112vw, 560px); }
  .hito__visual { height: clamp(480px, 110vw, 640px); }
}
@media (min-width: 961px) and (max-width: 1280px) {
  .hero__person { right: -3vw; height: min(78%, 900px); }
  .talk { height: 84%; }
  .bubble--1 { left: -4%; } .bubble--2 { right: -6%; top: 8%; } .bubble--3 { left: -4%; top: 30%; } .bubble--4 { right: -9%; top: 50%; }
  .bubble--5 { left: -8%; top: 54%; } .bubble--6 { right: -6%; top: 71%; } .bubble--7 { left: -4%; top: 78%; }
}
@media (max-width: 1200px) {
  .letter__body { grid-template-columns: minmax(0, 1fr); }
  .letter__body p + p { margin-top: 1em; }
}
@media (min-width: 961px) {
  .theme__visual { position: sticky; top: calc(var(--hd) + 32px); }
  .theme__body { padding-top: clamp(16px, 3vw, 56px); }
}

@media (max-width: 700px) {
  .sp { display: inline; }
  .hd__name { font-size: 1.12rem; }

  .hero { --hh: max(100svh, 640px); }
  .bgbox { transform: translate(-64%, -50%); }
  .ly-tree--l { width: 60vw; top: -16%; left: -6vw; }
  .ly-tree--r { width: 56vw; top: -18%; right: -6vw; }
  .hero__text { left: var(--pad); right: var(--pad); width: auto; top: calc(var(--hd) + 16px); }
  .hero__name { width: min(66vw, 300px); }
  .name-svg path { stroke-width: 7px; }
  .hero__catch { font-size: clamp(1.6rem, 7.4vw, 2.3rem); }
  .hero__sub { display: none; }
  .hero__person { right: -8vw; height: 44%; }
  .hero__kodo { left: 7vw; top: auto; bottom: 17%; width: 34vw; }
  .leaf--hero1 { left: auto; right: 54vw; bottom: 34%; width: 15vw; }
  .leaf--hero2 { display: none; }
  .hero__down { display: none; }

  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats li { padding-inline: 10px; }
  .stats__label { font-size: .74rem; letter-spacing: .02em; }
  .bubble { font-size: calc(clamp(1rem, 4.2vw, 1.2rem) * var(--fs)); border-width: 2.5px; box-shadow: 4px 5px 0 var(--shadow); }
  .talk { height: 84%; }
  .bubble--1 { left: -2%; top: 3%; } .bubble--2 { right: -3%; top: 12%; } .bubble--3 { left: -2%; top: 30%; } .bubble--4 { right: -5%; top: 55%; }
  .bubble--5 { left: -3%; top: 55%; } .bubble--6 { right: -3%; top: 75%; } .bubble--7 { left: 1%; top: 79%; }
  .burst { right: -22px; top: -26px; width: 28px; height: 28px; }
  .letter__body { grid-template-columns: minmax(0, 1fr); }
  .letter__body p + p { margin-top: 1em; }
  .letter__ln + .letter__ln { margin-left: .6em; }
  .theme__visual { width: min(82%, 340px); }
  .theme { gap: 12px; }
  .voice { padding-inline: 1em .8em; }
  .kodo__stamp { right: 0; width: 48%; }
  .leaf--float { width: 46px; }
  .career div { grid-template-columns: 6.2em minmax(0, 1fr); gap: .5em; }
  .pf__table div { grid-template-columns: 7.4em minmax(0, 1fr); }
  .vlist { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad) 16px; scrollbar-width: none; }
  .vlist::-webkit-scrollbar { display: none; }
  .vcard { flex: none; width: min(62vw, 260px); scroll-snap-align: start; }
  .pf__table dt { padding: .9em .7em; }
  .pf__table dd { padding: .8em .9em; }
  .info div { grid-template-columns: 4.8em minmax(0, 1fr); gap: .6em; }
  .tape { width: 78px; }
  .polaroid { width: min(78%, 320px); }
  /* 歩み：議場の絵は写真の下だけに敷き、見出しや年表の文字には重ねない */
  .ayumi__visual { padding-block: 4% 36%; }
  .ayumi__scene { top: auto; bottom: 0; margin-top: 0; left: -12%; right: -12%; }
  .ayumi__body { position: relative; z-index: 1; }
  .kodo__stage { margin-top: 28px; }
  .bubble--r1 { right: -2%; top: 30%; } .bubble--r2 { right: 0; top: 55%; }
  .bubble--p1 { right: -2%; top: 0; } .bubble--p2 { left: -2%; top: 44%; }
  .office__scene { width: 128%; left: -14%; }
  .bubble--t { left: -3%; } .theme--people .bubble--t { right: -3%; }
  /* 一番長い行（12字）が収まる大きさにそろえ、長い2行は2つに分けて折る */
  .fl { font-size: min(1.4rem, calc((100vw - 84px) / 12.6)); padding-block: .46em; }
  .fl--split .type { display: block; }
  .fl--split .type + .type { margin-top: .92em; }
  .letter { padding-inline: 20px; }
  .tagline { padding: .3em .85em .32em .75em; }
}

/* =========================================================
   動き
   ========================================================= */
@keyframes drift { from { transform: translateX(-2.6vw); } to { transform: translateX(2.6vw); } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.012) rotate(-.25deg); } }
@keyframes leaf { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
@keyframes nudge { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@keyframes talk { 0% { transform: rotate(-1deg); } 100% { transform: rotate(1.1deg); } }
@keyframes blob {
  0% { border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; transform: rotate(0deg); }
  100% { border-radius: 56% 44% 44% 56% / 44% 56% 46% 54%; transform: rotate(10deg); }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes twinkle { 0%, 100% { scale: .3; opacity: .2; } 50% { scale: 1; opacity: 1; } }
@keyframes speak { 0%, 13%, 100% { scale: 1; translate: 0 0; } 3% { scale: 1.16; translate: 0 -8px; } 6.5% { scale: .95; translate: 0 0; } 9.5% { scale: 1.04; } }
@keyframes flash { 0%, 13%, 100% { scale: 1; opacity: 1; } 3% { scale: 1.5; opacity: 1; } 6.5% { scale: .8; opacity: .7; } }
/* メニュー・後援会ご入会のボタン：vivitto のボタンと同じく、ときどき光の筋がキラッと走る */
.menu-btn::after, .hd__join::before, .tile--green::before { content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-22deg) translateX(-260%); pointer-events: none; }
.hd__join, .tile--green { position: relative; overflow: hidden; isolation: isolate; }
.js:not(.motion-off) .menu-btn::after, .js:not(.motion-off) .hd__join::before, .js:not(.motion-off) .tile--green::before { animation: btn-shine 5s var(--ease) infinite; }
.js:not(.motion-off) .hd__join::before { animation-delay: 1.2s; }
/* 事務所の3つのボタンは、左から順に少しずつずれて光る */
.js:not(.motion-off) .tile--g1::before { animation-delay: 2.2s; }
.js:not(.motion-off) .tile--g2::before { animation-delay: 2.45s; }
.js:not(.motion-off) .tile--g3::before { animation-delay: 2.7s; }
@keyframes btn-shine { 0%, 62% { transform: skewX(-22deg) translateX(-260%); } 100% { transform: skewX(-22deg) translateX(420%); } }
@keyframes ring { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.15); } }
@keyframes run-x { 0% { transform: translateX(-150%); } 80% { transform: translateX(4%); } 100% { transform: translateX(0); } }
@keyframes run-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px) rotate(-1.2deg); } }
@keyframes run-blur { 0% { filter: blur(5px) drop-shadow(0 16px 18px rgba(20, 40, 20, .22)); } 70% { filter: blur(2px) drop-shadow(0 16px 18px rgba(20, 40, 20, .22)); } 100% { filter: blur(0) drop-shadow(0 16px 18px rgba(20, 40, 20, .22)); } }
@keyframes shadow-x { 0% { transform: translateX(-400%) scaleX(1.6); opacity: .3; } 80% { transform: translateX(10%); } 100% { transform: none; opacity: 1; } }
@keyframes lines { 0% { opacity: 0; transform: translateX(30px) scaleX(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(-40px) scaleX(1); } }
@keyframes slam { 0% { opacity: 0; transform: scale(2.6) rotate(-10deg); } 55% { opacity: 1; transform: scale(.92) rotate(1deg); } 72% { transform: scale(1.06) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -4px 2px; } 40% { translate: 3px -2px; } 60% { translate: -2px 1px; } 80% { translate: 1px 0; } }

/* 画面外では止める */
.person, .leaf, .catch-leaf, .hero__down span, .talk__img, .theme__blob, .ring i, .ayumi__cloud, .stage *, .bubble, .bubble i { animation-play-state: paused; }
.is-live .person, .is-live .leaf, .is-live .catch-leaf, .is-live .hero__down span, .is-live .talk__img, .is-live .theme__blob, .is-live .ring i, .is-live .ayumi__cloud, .is-live .stage *, .is-live .bubble, .is-live .bubble i { animation-play-state: running; }

/* 名前：ときどき光が走り、星がきらっと */
@keyframes shine { 0% { translate: 0 0; } 24%, 100% { translate: 1500px 0; } }
@keyframes star { 0%, 14% { scale: 0; rotate: 0deg; } 19% { scale: 1.25; rotate: 45deg; } 27%, 100% { scale: 0; rotate: 90deg; } }
@keyframes charwave { 0%, 15%, 100% { translate: 0 0; fill: currentColor; } 4% { translate: 0 -16%; fill: var(--flash, var(--lime)); } 8% { translate: 0 4%; } 11.5% { translate: 0 0; fill: currentColor; } }
.js:not(.motion-off).is-ready .name-shine__bar { animation: shine 6.5s cubic-bezier(.45, 0, .25, 1) 2.8s infinite; }
.js:not(.motion-off).is-ready .name-star--1 { animation: star 6.5s ease-out 2.8s infinite; }
.js:not(.motion-off).is-ready .name-star--2 { animation: star 6.5s ease-out 3.05s infinite; }

/* 1文字ずつ・文節ずつの順番 */
.type path:nth-child(2) { --c: 1; } .type path:nth-child(3) { --c: 2; } .type path:nth-child(4) { --c: 3; }
.type path:nth-child(5) { --c: 4; } .type path:nth-child(6) { --c: 5; } .type path:nth-child(7) { --c: 6; } .type path:nth-child(8) { --c: 7; }
.type path:nth-child(9) { --c: 8; } .type path:nth-child(10) { --c: 9; } .type path:nth-child(11) { --c: 10; } .type path:nth-child(12) { --c: 11; }
.type path:nth-child(13) { --c: 12; } .type path:nth-child(14) { --c: 13; }
.disp__ln + .disp__ln, .letter__ln + .letter__ln, .voice__ln + .voice__ln, .ln + .ln { --l: 7; }
.p1 { --p: 1; } .p2 { --p: 2; } .p3 { --p: 3; } .p4 { --p: 4; } .p5 { --p: 5; } .p6 { --p: 6; } .p7 { --p: 7; } .p8 { --p: 8; } .p9 { --p: 9; }
.p10 { --p: 10; } .p11 { --p: 11; } .p12 { --p: 12; } .p13 { --p: 13; } .p14 { --p: 14; } .p15 { --p: 15; } .p16 { --p: 16; } .p17 { --p: 17; } .p18 { --p: 18; } .p19 { --p: 19; }
.p20 { --p: 20; } .p21 { --p: 21; } .p22 { --p: 22; } .p23 { --p: 23; } .p24 { --p: 24; } .p25 { --p: 25; } .p26 { --p: 26; } .p27 { --p: 27; } .p28 { --p: 28; } .p29 { --p: 29; }
.p30 { --p: 30; } .p31 { --p: 31; } .p32 { --p: 32; } .p33 { --p: 33; } .p34 { --p: 34; } .p35 { --p: 35; } .p36 { --p: 36; } .p37 { --p: 37; } .p38 { --p: 38; } .p39 { --p: 39; }
.bubble--2 { --d: 1; } .bubble--3 { --d: 2; } .bubble--4 { --d: 3; } .bubble--5 { --d: 4; } .bubble--6 { --d: 5; } .bubble--7 { --d: 6; }
.stats li:nth-child(2), .timeline li:nth-child(2) { --s: 1; } .stats li:nth-child(3), .timeline li:nth-child(3) { --s: 2; } .timeline li:nth-child(4) { --s: 3; } .timeline li:nth-child(5) { --s: 4; } .timeline li:nth-child(6) { --s: 5; }

/* ---------- 登場（JSが動き、動きを止めていないときだけ） ---------- */
/* 見出しは、出たあとも1文字ずつ波のように弾み続ける（ずっとループ） */
.disp { --flash: var(--lime); }
.theme__name { --flash: var(--acc); }
.letter__head { --flash: var(--lime); }
.hero__catch { --flash: var(--lime); }
.js:not(.motion-off) .is-live [data-reveal="type"].is-in .type path,
.js:not(.motion-off) .is-live[data-reveal="type"].is-in .type path { animation: charwave 7s ease-in-out infinite; animation-delay: calc(2.4s + (var(--c, 0) + var(--l, 0)) * 75ms); }
.js:not(.motion-off).is-ready .hero.is-live .hero__catch .type path { animation: charwave 6s ease-in-out infinite; animation-delay: calc(3.2s + (var(--c, 0) + var(--l, 0)) * 75ms); }
/* 見出しが出るとき、一瞬だけ黄緑を通る */
.js:not(.motion-off) [data-reveal="type"]:not(.is-in) .type path { fill: var(--flash, var(--lime)); }
/* 取り組みの名前は、傾きながら滑り込む */
.js:not(.motion-off) .theme__name[data-reveal="type"] .type path { transition: transform .9s var(--out), opacity .4s ease, fill 1s ease; transition-delay: calc((var(--c, 0) + var(--l, 0)) * 45ms); }
.js:not(.motion-off) .theme__name[data-reveal="type"]:not(.is-in) .type path { transform: translateX(-70%) skewX(-30deg); }
/* 手紙の見出しは、弾んで現れる */
.js:not(.motion-off) .letter__head[data-reveal="type"] .type path { transition: transform .7s var(--pop), opacity .3s ease, fill 1s ease; transition-delay: calc(.3s + (var(--c, 0) + var(--l, 0)) * 50ms); }
.js:not(.motion-off) .letter__head[data-reveal="type"]:not(.is-in) .type path { transform: scale(0); }
/* 筆文字：1行ずつ、筆で書くように左から現れる */
.js:not(.motion-off) [data-reveal="brush"] .fl { transition: clip-path .9s cubic-bezier(.5, 0, .2, 1), opacity .4s ease, filter .9s ease; transition-delay: calc(.5s + var(--n, 0) * .18s); }
.js:not(.motion-off) [data-reveal="brush"]:not(.is-in) .fl { clip-path: inset(-10% 100% -10% 0); opacity: .2; filter: blur(3px); }
.js:not(.motion-off) [data-reveal="brush"].is-in .fl { clip-path: inset(-10% -4% -10% 0); }
/* 背景の絵：ぼやっと現れる */
.js:not(.motion-off) .stage__scene img, .js:not(.motion-off) .kodo__scene img, .js:not(.motion-off) .office__scene img, .js:not(.motion-off) .ayumi__scene img { transition: opacity 1.4s ease, filter 1.6s ease, transform 1.8s var(--out); }
/* 11/2 ぼやっと現れるのは最初の1回だけ（通るたびにぼかし直すと重い）。was-live は main.js が付ける */
.js:not(.motion-off) .live:not(.was-live) .stage__scene img, .js:not(.motion-off) .live:not(.was-live) .kodo__scene img, .js:not(.motion-off) .live:not(.was-live) .office__scene img, .js:not(.motion-off) .live:not(.was-live) .ayumi__scene img { opacity: 0; filter: blur(14px); transform: scale(1.08); }
/* 写真：横からすべり込む */
.js:not(.motion-off) [data-reveal="slide"] { transition: transform 1.3s var(--pop), opacity .6s ease; }
.js:not(.motion-off) [data-reveal="slide"]:not(.is-in) { opacity: 0; transform: translateX(-70%) rotate(-14deg); }
/* 走る・電話・取り組みの吹き出しは、短い間隔で弾む */
.js:not(.motion-off) .bubbles--run .bubble.is-in, .js:not(.motion-off) .bubbles--phone .bubble.is-in, .js:not(.motion-off) .bubble--t.is-in { animation: speak 4.6s ease-in-out infinite; animation-delay: calc(3.4s + var(--k, 0) * .7s); }
/* 見出し：1文字ずつ、下から弾んで立ち上がる */
.js:not(.motion-off) [data-reveal="type"] .type path { transition: transform .75s var(--pop), opacity .3s ease; transition-delay: calc((var(--c, 0) + var(--l, 0)) * 46ms); }
.js:not(.motion-off) [data-reveal="type"]:not(.is-in) .type path { opacity: 0; transform: translateY(60%) rotate(12deg) scale(.6); }
.js:not(.motion-off) .theme__name::after, .js:not(.motion-off) .rule::before { transition: clip-path .9s var(--ease) .35s; }
.js:not(.motion-off) .theme__name:not(.is-in)::after, .js:not(.motion-off) .rule:not(.is-in)::before { clip-path: inset(0 100% 0 0); }

/* 発言：1文字ずつ、上から押されるように力強く */
.js:not(.motion-off) [data-reveal="voice"] .type path { transition: transform .42s var(--slam), opacity .12s linear; transition-delay: calc(.15s + (var(--c, 0) + var(--l, 0)) * 62ms); }
.js:not(.motion-off) [data-reveal="voice"]:not(.is-in) .type path { opacity: 0; transform: scale(2.1) translateY(-18%); }
.js:not(.motion-off) [data-reveal="voice"]::before, .js:not(.motion-off) [data-reveal="voice"]::after { transition: transform .6s var(--out), opacity .4s ease; }
.js:not(.motion-off) [data-reveal="voice"]:not(.is-in)::before { opacity: 0; transform: translate(-16px, -16px); }
.js:not(.motion-off) [data-reveal="voice"]:not(.is-in)::after { opacity: 0; transform: translate(16px, 16px); }
.js:not(.motion-off) [data-reveal="voice"] cite { transition: opacity .6s ease .9s, translate .6s var(--out) .9s; }
.js:not(.motion-off) [data-reveal="voice"]:not(.is-in) cite { opacity: 0; translate: 0 10px; }

/* 文：文節ずつ */
.js:not(.motion-off) [data-reveal="split"] .ph { transition: transform .7s var(--out), opacity .5s ease, filter .6s ease; transition-delay: calc(var(--p, 0) * 24ms + .1s); }
.js:not(.motion-off) [data-reveal="split"]:not(.is-in) .ph { opacity: 0; transform: translateY(.7em); filter: blur(4px); }

/* 紙・カード */
.js:not(.motion-off) [data-reveal="up"], .js:not(.motion-off) [data-reveal="memo"], .js:not(.motion-off) [data-reveal="letter"] { transition: transform 1s var(--out), opacity .8s ease, filter .9s ease; }
.js:not(.motion-off) [data-reveal="up"]:not(.is-in) { opacity: 0; transform: translateY(30px); }
.js:not(.motion-off) [data-reveal="memo"]:not(.is-in) { opacity: 0; transform: translateY(40px) rotate(-4deg); filter: blur(6px); }
.js:not(.motion-off) [data-reveal="letter"]:not(.is-in) { opacity: 0; transform: translateY(50px) rotate(2.5deg) scale(.97); filter: blur(8px); }
.js:not(.motion-off) .works .memo:nth-child(2) { transition-delay: .15s; }

/* イラスト：ぼやっと現れる */
.js:not(.motion-off) [data-reveal="blur-right"], .js:not(.motion-off) [data-reveal="blur-up"], .js:not(.motion-off) [data-reveal="blur-rise"] { transition: transform 1.3s var(--out), opacity 1s ease, filter 1.3s ease; }
.js:not(.motion-off) [data-reveal="blur-right"]:not(.is-in) { opacity: 0; transform: translateX(60px) scale(1.05); filter: blur(18px); }
.js:not(.motion-off) [data-reveal="blur-up"]:not(.is-in) { opacity: 0; transform: translateY(50px) rotate(-6deg) scale(1.04); filter: blur(16px); }
.js:not(.motion-off) [data-reveal="blur-rise"]:not(.is-in) { opacity: 0; transform: translateY(80px) scale(1.06); filter: blur(18px); }

.js:not(.motion-off) [data-reveal="pop"] { transition: transform .75s var(--pop), opacity .25s ease; transition-delay: calc(.6s + var(--d, 0) * 140ms); }
.js:not(.motion-off) [data-reveal="pop"]:not(.is-in) { opacity: 0; transform: scale(.15) translateY(40px) rotate(-14deg); }
/* 登場したあとは、しゃべっているように1つずつ順番に弾む */
.js:not(.motion-off) .bubble.is-in { animation: speak 8.4s ease-in-out infinite; animation-delay: calc(2.4s + var(--d, 0) * 1.2s); }
.js:not(.motion-off) .bubble.is-in .burst, .js:not(.motion-off) .bubble.is-in .note { animation: flash 8.4s ease-in-out infinite; animation-delay: calc(2.4s + var(--d, 0) * 1.2s); }

/* 数字：1つずつ跳ね上がる */
.js:not(.motion-off) [data-reveal="stats"] li { transition: transform .8s var(--pop), opacity .4s ease; transition-delay: calc(.2s + var(--s, 0) * 140ms); }
.js:not(.motion-off) [data-reveal="stats"]:not(.is-in) li { opacity: 0; transform: translateY(26px); }
.js:not(.motion-off) [data-reveal="stats"] .type path { transition: transform .7s var(--pop), opacity .25s ease; transition-delay: calc(.35s + var(--s, 0) * 140ms + var(--c, 0) * 60ms); }
.js:not(.motion-off) [data-reveal="stats"]:not(.is-in) .type path { opacity: 0; transform: translateY(70%) scale(.5); }

/* 水彩：輪が描かれ、絵がにじみ出る */
.js:not(.motion-off) [data-reveal="paint"] .theme__blob, .js:not(.motion-off) [data-reveal="paint"] .theme__wash { transition: clip-path 1.2s var(--ease), opacity .8s ease; }
.js:not(.motion-off) [data-reveal="paint"] .theme__wash { transition-delay: .3s; }
.js:not(.motion-off) [data-reveal="paint"]:not(.is-in) .theme__blob { clip-path: circle(0% at 50% 55%); }
.js:not(.motion-off) [data-reveal="paint"].is-in .theme__blob { clip-path: circle(75% at 50% 50%); }
.js:not(.motion-off) [data-reveal="paint"]:not(.is-in) .theme__wash { clip-path: inset(0 100% 0 0); }
.js:not(.motion-off) [data-reveal="paint"].is-in .theme__wash { clip-path: inset(0 0 0 0); }
.js:not(.motion-off) [data-reveal="paint"] .theme__ring path { transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.js:not(.motion-off) [data-reveal="paint"]:not(.is-in) .theme__ring path { stroke-dashoffset: 600; }
.js:not(.motion-off) [data-reveal="paint"] .theme__img { transition: transform 1.4s var(--out) .15s, opacity 1s ease .15s, filter 1.4s ease .15s; }
.js:not(.motion-off) [data-reveal="paint"]:not(.is-in) .theme__img { opacity: 0; transform: scale(.9) translateY(20px); filter: blur(16px) drop-shadow(0 16px 20px rgba(60, 50, 20, 0)); }

/* 年表：点線が下へ伸び、点と文が順に */
.js:not(.motion-off) [data-reveal="timeline"]::before { transition: transform 1.4s var(--ease); }
.js:not(.motion-off) [data-reveal="timeline"]:not(.is-in)::before { transform: scaleY(0); }
.js:not(.motion-off) [data-reveal="timeline"] li { transition: transform .7s var(--out), opacity .5s ease; transition-delay: calc(.25s + var(--s, 0) * 240ms); }
.js:not(.motion-off) [data-reveal="timeline"]:not(.is-in) li { opacity: 0; transform: translateX(-14px); }
.js:not(.motion-off) [data-reveal="timeline"] li::before { transition: transform .5s var(--pop); transition-delay: calc(.25s + var(--s, 0) * 240ms); }
.js:not(.motion-off) [data-reveal="timeline"]:not(.is-in) li::before { transform: scale(0); }

/* 考動：資料を抱えて走ってきて、止まると「考動！」が押される */
.js:not(.motion-off) .kodo__stage:not(.is-in) .kodo__runner { transform: translateX(-150%); }
.js:not(.motion-off) .kodo__stage:not(.is-in) .kodo__shadow { opacity: 0; }
.js:not(.motion-off) .kodo__stage:not(.is-in) .kodo__brush { clip-path: inset(0 100% 0 0); }
.js:not(.motion-off) .kodo__stage:not(.is-in) .kodo__mark { opacity: 0; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__runner { animation: run-x 1.1s cubic-bezier(.25, .7, .3, 1) both; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__run { animation: run-y .17s ease-in-out 0s 6; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__shadow { animation: shadow-x 1.1s cubic-bezier(.25, .7, .3, 1) both; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__lines i { animation: lines 1s ease-out both; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__lines i:nth-child(2) { animation-delay: .1s; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__lines i:nth-child(3) { animation-delay: .2s; }
.js:not(.motion-off) .kodo__stage .kodo__brush { transition: clip-path .34s cubic-bezier(.5, 0, .3, 1) 1.1s; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__mark { animation: slam .55s var(--ease) 1.38s both; }
.js:not(.motion-off) .kodo__stage.is-in .kodo__stamp { animation: shake .35s linear 1.62s both; }

/* ---------- ファーストビューの組み上がり ---------- */
.js:not(.motion-off) .hero .person-in { transition: transform 1.3s var(--out) .2s, opacity .8s ease .2s, filter 1.2s ease .2s; }
.js:not(.motion-off) .hero .glyph { transition: transform .8s var(--pop), opacity .3s ease; transition-delay: calc(.35s + var(--i) * .085s); }
.js:not(.motion-off) .hero__role { transition: transform .8s var(--out) .25s, opacity .6s ease .25s; }
.js:not(.motion-off) .hero__catch .type path { transition: transform .7s var(--pop), opacity .3s ease; transition-delay: calc(.85s + (var(--c, 0) + var(--l, 0)) * 38ms); }
.js:not(.motion-off) .hero__catch .ln--mark::before { transition: clip-path .7s var(--ease) 1.35s; }
.js:not(.motion-off) .tagline { transition: transform .8s var(--out), opacity .5s ease; transition-delay: 1.25s; }
.js:not(.motion-off) .tagline + .tagline { transition-delay: 1.4s; }
.js:not(.motion-off) .catch-leaf { transition: opacity .5s ease 1.55s, scale .7s var(--pop) 1.55s; }
.js:not(.motion-off) .hero__brush { transition: clip-path .34s cubic-bezier(.5, 0, .3, 1) 1.3s; }
.js:not(.motion-off) .hero__wave { transition: transform 1s var(--out) .35s; }
.js:not(.motion-off) .hero__front .leaf { transition: opacity .8s ease 1s; }

.js:not(.motion-off):not(.is-ready) .hero .person-in { opacity: 0; transform: translateY(8%) scale(1.03); filter: blur(14px); }
.js:not(.motion-off):not(.is-ready) .hero .glyph { opacity: 0; transform: translateY(-38%) scale(1.5) rotate(-8deg); }
.js:not(.motion-off):not(.is-ready) .hero__role { opacity: 0; transform: translateX(-30px); }
.js:not(.motion-off):not(.is-ready) .hero__catch .type path { opacity: 0; transform: translateY(70%) rotate(10deg) scale(.6); }
.js:not(.motion-off):not(.is-ready) .hero__catch .ln--mark::before { clip-path: inset(0 100% 0 0); }
.js:not(.motion-off).is-ready .hero__catch .ln--mark::before { clip-path: inset(0 0 0 0); }
.js:not(.motion-off):not(.is-ready) .tagline { opacity: 0; transform: translateX(-40px); }
.js:not(.motion-off):not(.is-ready) .catch-leaf { opacity: 0; scale: .2; }
.js:not(.motion-off):not(.is-ready) .hero__brush { clip-path: inset(0 100% 0 0); }
.js:not(.motion-off).is-ready .hero__brush { clip-path: inset(0 0 0 0); }
.js:not(.motion-off):not(.is-ready) .hero__kodo-mark { opacity: 0; }
.js:not(.motion-off).is-ready .hero__kodo-mark { animation: slam .55s var(--ease) 1.55s both; }
.js:not(.motion-off).is-ready .hero__kodo { animation: shake .35s linear 1.8s both; }
.js:not(.motion-off):not(.is-ready) .hero__wave { transform: translateY(100%); }
.js:not(.motion-off):not(.is-ready) .hero__front .leaf { opacity: 0; }

/* 動きを止める（ボタン・端末の設定） */
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
.motion-off .ly, .motion-off .hero__text, .motion-off .hero__person { transform: none !important; }
.motion-off [data-depth] { translate: none !important; }
.motion-off .kodo__lines { display: none; }
.motion-off { scroll-behavior: auto; }

/* 縦の短いスマホ（SE や、Safari のバーが出ているとき）は、名前とキャッチを少し小さくして人物の場所をあける */
@media (max-width: 700px) and (max-height: 760px) {
  .hero__name { width: min(58vw, 262px); }
  .hero__catch { font-size: clamp(1.45rem, 6.6vw, 2rem); }
}

/* =========================================================
   10/31 デザイン確認（文字担当・配置担当）の直し
   ========================================================= */
/* --- 文字：リードは大きさで分け、太さは下げる／見出し・ラベルの字間を詰める（この書体は palt が効かない） --- */
.lead, .subhero__lead { font-weight: 400; line-height: 1.85; letter-spacing: .03em; }
.theme__lead { letter-spacing: .02em; }
.sub-h, .pf__sub, .katsudo__title, .doc h2, .more__title, .promises dt, .memo__title, .new__title, .adhoc__txt strong,
.adhoc__sub, .go__title, .likes__title, .field label, .family legend, .info dt, .hd__nav a { letter-spacing: .03em; }
.new__label, .tel__label, .adhoc-link__label, .adhoc__label, .adhoc__with-label, .promises__group-title,
.vcard__cat, .vcard__soon, .req, .opt, .more summary, .promises__box summary, .pill-btn, .submit { letter-spacing: .06em; }
.pf__kana { letter-spacing: .1em; }
.hd__name, .memo__title, .new__title, .tile__label { font-feature-settings: normal; }
.memo__title, .new__title, .adhoc__txt strong, .more__title, .promises dt, .go__title, .likes__title,
.field label, .family legend, .timeline__y { font-size: var(--fs-h4); line-height: 1.5; }
.doc h2, .katsudo__title { line-height: 1.5; }
.vcard__soon, .req, .opt, .ft__copy, .adhoc__fig figcaption, .likes__photo figcaption, .ft__name span, .menu-btn { font-size: var(--fs-xs); }
.promises dd, .adhoc__txt span, .adhoc__note, .form-note, .tags li, .voice cite, .promises__intro { line-height: 1.75; }
.tags li { letter-spacing: .02em; padding-inline: .8em; }
.career dt, .career dd { line-height: 1.75rem; }
.promises dd { display: grid; gap: .2em; }
.adhoc-link > span:last-child { text-wrap: balance; }
.tel__num { letter-spacing: .05em; font-variant-numeric: normal; }
.plan__head { z-index: 3; }

/* --- 配置：表の基線をそろえる／ぶつかり・切れ・間のばらつきを直す --- */
.pf__table dt, .pf__table dd { padding-block: .8rem; line-height: 1.75rem; }
.memo::before { content: none; }
.memo__title { padding-bottom: .55em; border-bottom: 2px dotted rgba(110, 186, 44, .55); }
.memo p { margin-top: .75em; }
.fl--split { display: flex; flex-wrap: wrap; row-gap: 1em; }
.voice { width: fit-content; max-width: 100%; padding-right: 1.6em; }
.voice__ln { display: block; width: fit-content; }
.voice__ln + .voice__ln { margin-top: .3em; }
.promises__box summary { display: flex; justify-content: space-between; }
.plan { padding-bottom: clamp(110px, 12vw, 180px); }
.more summary, .menu-btn { min-height: 44px; }
.maplink { padding-block: 10px; }
.ft__links a { display: inline-block; padding-block: 8px; }
.sub .subhero .inner { max-width: 820px; }
@media (min-width: 961px) {
  .theme--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .kodo__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .kodo__runner { left: -3%; } .kodo__shadow { left: 1%; } .kodo__lines { left: -11%; }
  .bubble--r1 { right: -4%; } .bubble--r2 { right: 0; }
  .bubble--p1 { right: -3%; }
  .ayumi__scene { left: -18%; right: -8%; }
}
@media (min-width: 961px) and (max-width: 1280px) { .bubble--4 { right: -2%; top: 47%; } .bubble--6 { top: 74%; } }
@media (min-width: 701px) {
  .hero__text { left: calc(max(0px, (100% - 1240px) / 2) + var(--pad)); }
  .hero__kodo { left: max(38.5vw, calc((100% - 1240px) / 2 + var(--pad) + 31vw)); }
}
/* スマホのプロフィールも、ほかの欄と同じく見出しから始める（見出し → 写真 → 名前・紹介文） */
@media (max-width: 960px) {
  .ayumi__grid { row-gap: 0; }
  .ayumi__body { display: contents; }
  .ayumi__body > :not(.rule) { position: relative; z-index: 1; }
  .ayumi__visual { order: 1; margin-block: 12px 28px; }
  .ayumi__body > :not(.disp):not(.rule) { order: 2; }
}
@media (max-width: 700px) {
  .fl--split { display: block; }
  .bubble--4 { right: 2%; } .burst { right: -12px; } .bubble--6 { right: 1%; }
  .theme { gap: 28px; }
  .kodo__stage { margin-top: 56px; }
  .pf__table dt { padding-inline: .7em; } .pf__table dd { padding-inline: .9em; }
  .stats li { padding-inline: 6px; }
  .stats__label { font-size: var(--fs-xs); letter-spacing: 0; }
  .office__card { padding-inline: 20px; }
  .tile { padding-inline: 2px; }
  .tile__label { font-size: var(--fs-xs); letter-spacing: 0; white-space: normal; }
}
@media (max-width: 380px) { .tile__label { font-size: var(--fs-xs); } }

/* --- 2回目の確認で出た残り（狭いスマホの割れ・押しやすさ・行間・見出しの格） --- */
.pf__summary, .doc p { line-height: 1.9; }
.hero__role { font-size: var(--fs-small); }
.field label, .family legend { flex-wrap: wrap; row-gap: .25em; }
.tel { min-height: 44px; }
/* アドホックの見出しは「取り組み」の中の小見出しなので、欄の見出しより一段小さく */
.adhoc__title { font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.8rem); }
@media (max-width: 389px) { .promises__box summary { font-size: 1rem; } }
@media (max-width: 380px) { .tile { min-height: 100px; } }
@media (max-width: 370px) { .family { padding-inline: .7em; } .family legend { font-size: 1rem; } }

/* --- 11/2 夢だけはでっかい：本文を小さく・行間を詰め、枠も全体に小さく。上のイラストの本人から出た大きな吹き出しにする --- */
.letter { border-radius: 22px; padding: clamp(24px, 3vw, 42px) clamp(22px, 3.4vw, 50px) clamp(22px, 2.8vw, 38px); }
.letter::before { border-radius: 13px; }
.letter::after { border-radius: 10px; }
/* PC は本人のイラストが右上にあるので、しっぽは右寄りで右上へ向ける */
.letter__tail { position: absolute; bottom: calc(100% - 1px); left: var(--tail-x, 86%); width: 72px; height: 38px; translate: -50% 0;
  background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo); clip-path: polygon(0 100%, 62% 100%, 100% 0); }
.letter__head { font-size: clamp(1.6rem, 1.05rem + 1.8vw, 2.5rem); }
.letter__body { margin-top: clamp(20px, 2.4vw, 30px); padding-top: clamp(18px, 2vw, 26px); gap: 1.1em; }
/* 1行の送り = 1.68em（前は 2em） */
.fl { padding-block: .34em; font-size: clamp(1.1rem, .86rem + .55vw, 1.42rem); }
.fl--split { row-gap: .68em; }
@media (max-width: 700px) {
  .letter { --tail-x: 57%; padding: 24px 20px 22px; }
  .letter__tail { width: 54px; height: 30px; clip-path: polygon(0 100%, 100% 100%, 64% 0); }
  .letter__body p + p { margin-top: .35em; }
  .fl { font-size: min(1.2rem, calc((100vw - 84px) / 14)); padding-block: .32em; }
  .fl--split .type + .type { margin-top: .64em; }
}
/* 11/2 好きなことの写真：スマホでは左右の真ん中に */
@media (max-width: 700px) { .likes__photo { justify-self: center; } }
/* 11/2 TOPの写真をほんの少し大きく（約6%）。スマホの低い画面では main.js の fitPerson が文字に重ならない高さに抑える */
.hero__person { height: min(87%, 955px); }
@media (min-width: 961px) and (max-width: 1280px) { .hero__person { height: min(83%, 955px); } }
@media (max-width: 700px) { .hero__person { height: 46.6%; } }
/* 11/2 ワンオクの写真もプロフィールの写真と同じく、左から傾いてすべり込む。欄がふわっと出たあと少し遅れて */
.js:not(.motion-off) .likes__photo[data-reveal="slide"] { transition-delay: .35s; }

/* ---------- 11/2 よくある質問（活動報告の下・事務所の前）。紙のカードを開閉。英字の Q/A は使わず「？」の丸 ---------- */
.faq { margin-top: clamp(72px, 9vw, 120px); }
.faq__list { margin-top: clamp(22px, 2.6vw, 34px); display: grid; gap: 12px; max-width: 880px; }
.faq__item { position: relative; background: url("assets/paper.webp") 0 0 / 512px repeat, var(--memo); border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(110, 186, 44, .32) inset, 0 14px 26px -20px rgba(40, 50, 20, .55), 0 2px 6px -3px rgba(40, 50, 20, .18); }
.faq__q { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85em; padding: .95em 1.15em; font-weight: 500; line-height: 1.6; letter-spacing: .04em; color: var(--ink); border-radius: 10px; transition: background .25s ease; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: rgba(234, 245, 216, .55); }
.faq__q:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
.faq__mark { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--btn); color: #fff; font-size: .92em; line-height: 1; }
.faq__qt { text-wrap: balance; }
.faq__q::after {
  content: ""; width: 13px; height: 13px; margin-right: .2em; color: var(--btn-dark);
  background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2.5px 100% no-repeat;
  transition: rotate .35s var(--ease);
}
.faq__item[open] .faq__q::after { rotate: 45deg; }
.faq__a { margin: 0 1.15em; padding: .9em 0 1.15em calc(2.1em * .92 + .85em); border-top: 2px dotted rgba(110, 186, 44, .45); }
.faq__a p { line-height: 1.9; color: var(--ink); }
.faq__a a { color: var(--green-ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
@media (max-width: 700px) {
  .faq__q { padding: .9em .95em; gap: .7em; }
  .faq__a { margin: 0 .95em; padding-left: 0; }
}
.faq__sub { margin-top: 1em; font-size: var(--fs-small); font-weight: 500; letter-spacing: .08em; color: var(--green-ink); }
.faq__a .dots { --acc: var(--lime); margin-top: .3em; }

/* ---------- 11/2 10の約束のページ（/yakusoku/）。チラシの水彩イラストを使う。群の色はトップの「10の約束」と同じ ---------- */
[data-tone="warm"] { --g: #c4503c; }
[data-tone="green"] { --g: #11806b; }
.subhero--yk { background: radial-gradient(640px 360px at 86% 40%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #e3f1cf, #f6f1e1); padding-bottom: calc(clamp(40px, 5vw, 72px) + 44px); }
.subhero--yk::before { opacity: .35; }
.yk-hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 300px); gap: clamp(20px, 4vw, 60px); align-items: center; }
.yk-page--index .yk-hero { grid-template-columns: minmax(0, 1fr); }
.yk-hero__art img { width: 100%; height: auto; }
.yk-tag a { font-size: var(--fs-small); font-weight: 500; letter-spacing: .08em; color: var(--green-ink); text-underline-offset: .25em; }
.yk-motto { font-size: var(--fs-small); font-weight: 500; letter-spacing: .14em; color: var(--green-ink); }
.yk-no { margin-top: .9em; display: flex; align-items: center; gap: .7em; }
.yk-no__n { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px var(--apricot) inset; color: var(--apricot-deep); font-weight: 500; letter-spacing: .02em; line-height: 1; }
.yk-no__g { border-radius: 999px; padding: .2em 1.1em; background: var(--g); color: #fff; font-size: var(--fs-small); font-weight: 500; letter-spacing: .12em; line-height: 1.7; }
.yk-title { margin-top: .45em; font-size: clamp(1.6rem, 1.05rem + 2vw, 2.6rem); font-weight: 500; line-height: 1.45; letter-spacing: .04em; color: var(--green-ink); text-wrap: balance; }
/* 緑の帯の下層ページ用の白文字（.subhero:not(.subhero--plain) .subhero__lead）を打ち消す */
.subhero.subhero--yk .subhero__lead { font-weight: 400; color: var(--ink); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .2em .6em; margin-bottom: 1.1em; font-size: var(--fs-small); line-height: 1.7; }
.crumbs li + li::before { content: "›"; margin-right: .6em; opacity: .55; }
.crumbs a { color: var(--green-ink); text-underline-offset: .2em; }
.yk-items { margin-top: .9em; display: grid; gap: .6em; }
.yk-items li { position: relative; padding: .8em 1em .8em 2.4em; border-radius: 10px; background: #f6f9ef; }
.yk-items li::before { content: ""; position: absolute; left: 1em; top: 1.32em; width: 9px; height: 9px; border-radius: 50%; background: var(--g); }
.yk-items__h { display: block; font-weight: 500; line-height: 1.75; color: var(--ink); }
.yk-items__p { display: block; margin-top: .15em; font-size: var(--fs-small); line-height: 1.8; color: var(--ink); }
.yk h3 { margin-top: 1em; font-size: var(--fs-body); font-weight: 500; line-height: 1.7; letter-spacing: .04em; color: var(--ink); }
.yk a:not(.pill-btn) { color: var(--green-ink); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
.yk-quote { margin-top: 1em; padding: .9em 1.2em; border-left: 4px solid var(--lime); border-radius: 0 8px 8px 0; background: #fbfaf2; }
.yk-quote p { margin-top: 0 !important; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 500; line-height: 1.7; color: var(--green-ink); }
.yk-quote cite { display: block; margin-top: .3em; font-size: var(--fs-small); font-style: normal; color: var(--ink); }
.yk-rel { margin-top: .6em; display: grid; gap: .4em; }
.yk-rel li { position: relative; padding-left: 1.1em; line-height: 1.8; }
.yk-rel li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-right: 2px solid var(--lime-deep); border-bottom: 2px solid var(--lime-deep); rotate: -45deg; }
.yk-note { margin-top: 2em !important; padding-top: 1em; border-top: 2px dotted rgba(110, 186, 44, .45); font-size: var(--fs-small); line-height: 1.8 !important; }
.yk-pager { margin-top: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yk-pager__a { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: .9em; align-content: center; padding: .8em 1em .8em .8em; border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 14px 26px -20px rgba(40, 50, 20, .55), 0 2px 6px -3px rgba(40, 50, 20, .18); transition: translate .25s var(--ease); }
.yk-pager__a:hover, .yk-card:hover { translate: 0 -3px; }
.yk-pager__a img { grid-row: 1 / 3; width: 64px; height: 64px; object-fit: contain; }
.yk-pager__k { font-size: .78rem; font-weight: 500; letter-spacing: .08em; color: var(--apricot-deep); }
.yk-pager__t { font-size: var(--fs-small); font-weight: 500; line-height: 1.6; color: var(--green-ink); }
.yk-back { margin-top: 1.4em; text-align: center; }
.yk-cta { margin-top: clamp(28px, 4vw, 44px); padding: 1.4em 1.2em 1.5em; border-radius: 12px; background: var(--lime-pale); text-align: center; }
.yk-cta p { margin-bottom: .9em; font-weight: 500; line-height: 1.8; }
/* 一覧 */
/* 上の帯と本文の左端をそろえる */
.yk-page .subhero .inner, .yk-page .formsec__inner { max-width: 960px; }
.yk-page--index .subhero .inner, .yk-page--index .formsec__inner { max-width: 1060px; }
.yk-group + .yk-group { margin-top: clamp(36px, 5vw, 56px); }
.yk-group__h { display: inline-block; border-radius: 999px; padding: .25em 1.3em; background: var(--g); color: #fff; font-size: var(--fs-body); font-weight: 500; letter-spacing: .14em; }
.yk-cards { margin-top: 1em; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 14px; }
.yk-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1em; height: 100%; padding: 1em 1.1em 1em .9em; border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1.5px rgba(110, 186, 44, .25) inset, 0 16px 28px -22px rgba(40, 50, 20, .55), 0 2px 6px -3px rgba(40, 50, 20, .16); transition: translate .25s var(--ease); }
.yk-card img { grid-row: 1 / 4; align-self: center; width: 96px; height: auto; }
.yk-card__n { font-size: .8rem; font-weight: 500; letter-spacing: .1em; color: var(--apricot-deep); }
.yk-card__t { margin-top: .15em; font-weight: 500; line-height: 1.6; color: var(--green-ink); text-wrap: balance; }
.yk-card__s { margin-top: .45em; font-size: .82rem; line-height: 1.75; color: var(--ink); }
/* トップの「10の約束をすべて見る」の中のリンク（見た目はほぼ元のまま） */
.promises__link { color: inherit; text-decoration: underline; text-decoration-color: rgba(21, 54, 26, .3); text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
.promises__link:hover { text-decoration-color: currentColor; }
.promises__more { margin-top: 1.4em; text-align: right; font-size: var(--fs-small); font-weight: 500; }
.promises__more a { color: var(--green-ink); text-underline-offset: .25em; }
@media (max-width: 700px) {
  .yk-hero { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .yk-hero__art { order: -1; justify-self: center; width: min(58vw, 230px); }
  .yk-pager { grid-template-columns: minmax(0, 1fr); }
  .yk-card { grid-template-columns: 80px minmax(0, 1fr); }
  .yk-card img { width: 80px; }
}
.yk > h2:first-child { margin-top: 0; }
.yk-ten { margin-inline: .04em; color: var(--apricot); font-size: 1.4em; line-height: 1; }

/* 11/2 奥行きの動き（PC だけ）。ずらす層を別の層にしておくと、動かしても描き直しが少ない */
@media (min-width: 701px) { [data-depth] { will-change: translate; } }
/* 11/2 スマホで指でスクロールしている間は、くり返しの動きを一時停止する（止めた位置のまま。離すと続きから）。
   見出しの文字の揺れ（SVG）などは iPhone では毎コマ描き直しになり、スクロールの引っかかりの元になる。is-scrolling は main.js が付ける */
/* 11/2 夕 全部の要素（*）にかけるとスクロールの始まりと終わりにページ全体の計算が走るので、動いている部品だけに絞った */
@media (max-width: 700px) {
  .is-scrolling .type path, .is-scrolling .bubble, .is-scrolling .bubble i, .is-scrolling .bubble .burst, .is-scrolling .bubble .note,
  .is-scrolling .leaf, .is-scrolling .catch-leaf, .is-scrolling .talk__img, .is-scrolling .stage *,
  .is-scrolling .ring i, .is-scrolling .ayumi__cloud, .is-scrolling .katsudo__track, .is-scrolling .hero__down span,
  .is-scrolling .name-shine__bar, .is-scrolling .name-star--1, .is-scrolling .name-star--2,
  .is-scrolling .ad-ring, .is-scrolling .ad-shelter__glow { animation-play-state: paused !important; }
}

/* =========================================================
   11/2 スマホのスクロールの引っかかり対策（先生の iPhone の録画で、描画が間に合わず白く抜けるコマがあった）
   破れ紙の切り抜き（mask）と紙の質感の乗算（mix-blend-mode）を、セクション全体ではなく「背景の層」（::before）だけにかける。
   以前はセクションの中身ごと切り抜き・乗算していたので、中で吹き出しや葉っぱが動くたびにセクション丸ごと描き直しになっていた。
   背景の層は動かないので一度描けば済む。紙の質感の「不透明度 a で乗算」は、あらかじめ 1 − a(1 − 紙) に薄めた画像
   （paper-m50 / m55 / m90.webp）を背景の中で乗算して、同じ見え方にしている
   ========================================================= */
.kodo, .plan, .ayumi, .report, .office { background: none; -webkit-mask: none; mask: none; }
.kodo::before, .plan::before, .ayumi::before, .report::before, .office::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 1; mix-blend-mode: normal;
  -webkit-mask: var(--edge-mask) 0 0 / 100% calc(var(--edge) + 4px) no-repeat, linear-gradient(#000 0 0) 0 var(--edge) / 100% calc(100% - var(--edge)) no-repeat;
  mask: var(--edge-mask) 0 0 / 100% calc(var(--edge) + 4px) no-repeat, linear-gradient(#000 0 0) 0 var(--edge) / 100% calc(100% - var(--edge)) no-repeat;
}
.kodo::before { background: url("assets/paper-m55.webp") 0 0 / 512px repeat, var(--paper); background-blend-mode: multiply, normal; }
.plan::before { background: url("assets/paper-m90.webp") 0 0 / 512px repeat, var(--paper-2); background-blend-mode: multiply, normal; }
.ayumi::before { background: linear-gradient(180deg, #d9effa 0%, #eef8fd 55%, #f7fbf2 100%); }
.report::before { background: url("assets/paper.webp") 0 0 / 512px repeat, var(--paper-2); }
.office::before { background: url("assets/paper-m50.webp") 0 0 / 512px repeat, radial-gradient(800px 500px at 15% 85%, #86c94a 0%, rgba(134, 201, 74, 0) 70%), var(--lime); background-blend-mode: multiply, normal, normal; }
/* こんな人（切り抜きなし）も、質感の乗算を背景の層の中だけに */
.hito { background: none; isolation: isolate; }
.hito::before { z-index: -1; opacity: 1; mix-blend-mode: normal; background: url("assets/paper-m50.webp") 0 0 / 512px repeat, radial-gradient(900px 520px at 85% 12%, #86c94a 0%, rgba(134, 201, 74, 0) 70%), var(--lime); background-blend-mode: multiply, normal, normal; }

/* 11/2 スマホでは「ぼかし（filter: blur）を動かして現れる」演出をやめ、ふわっと浮き上がる（不透明度と位置）だけにする。
   ぼかしの変化は iPhone ではとても重く、画面に入る瞬間にスクロールが白く抜けたり戻ったりしていた（先生の録画 11/2）。PC はそのまま */
@media (max-width: 700px) {
  .js:not(.motion-off) [data-reveal="brush"]:not(.is-in) .fl,
  .js:not(.motion-off) [data-reveal="split"]:not(.is-in) .ph,
  .js:not(.motion-off) [data-reveal="memo"]:not(.is-in),
  .js:not(.motion-off) [data-reveal="letter"]:not(.is-in),
  .js:not(.motion-off) [data-reveal="blur-right"]:not(.is-in),
  .js:not(.motion-off) [data-reveal="blur-up"]:not(.is-in),
  .js:not(.motion-off) [data-reveal="blur-rise"]:not(.is-in),
  .js:not(.motion-off) .live:not(.was-live) .stage__scene img, .js:not(.motion-off) .live:not(.was-live) .kodo__scene img,
  .js:not(.motion-off) .live:not(.was-live) .office__scene img, .js:not(.motion-off) .live:not(.was-live) .ayumi__scene img,
  .js:not(.motion-off):not(.is-ready) .hero .person-in,
  .js:not(.motion-off) .hd__nav .ch { filter: none; }
  /* 取り組みのイラストの影は動かさず、最初から付けたまま */
  .theme__img, .js:not(.motion-off) [data-reveal="paint"]:not(.is-in) .theme__img { filter: drop-shadow(0 16px 20px rgba(60, 50, 20, .14)); }
  /* 後ろの色の丸の「形が変わり続ける」動き（毎コマ描き直し）はやめ、形はそのまま */
  .theme__blob { animation: none; }
}
@media (max-width: 700px) {
  .stage__wash { animation: none; }  /* 外側は透明にぼけていくので、質感を背景に混ぜると縁が硬くなる。スマホでは質感の重ねを省く */
  .stage__wash::after { display: none; }
}