@charset "utf-8";
/* =========================================================
HAGAI「第3の家族」LP
骨格 = studio-sakana-kai（実測移植） / 絵と体温 = umibeno-ie
色 = ペライチ09 のブランドカラー6色のみ
========================================================= */
:root{
--orange:#F4A340;
--red:#E5534B;
--pink:#EFA0AD;
--beige:#F3E9DC;
--brown:#493832;
--white:#FCFAF7;
--ink:var(--brown);
--line:rgba(73,56,50,.16);
--line2:rgba(73,56,50,.28);
--jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
--en:"Montserrat",var(--jp);
--wrap:960px;
--wide:1348px;
--pad:32px;
--sec:112px; /* 2026-09-15 160→136→112。節と節の中身の間が320pxで空きすぎていた（水沼さん、2回目「もう少し縮めて」） */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:var(--jp);
font-size:16px;
font-weight:400;
line-height:2;
letter-spacing:.04em;
color:var(--ink);
background:var(--white);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0 none;cursor:pointer}
/* うっすらノイズ（umibeno-ie の地の作り） */
body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml;utf8,");
}
body>*{position:relative;z-index:1}
/* ---------------- 共通の器 ---------------- */
.wrap{position:relative;z-index:1;width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.wrap--narrow{--wrap:760px}
.sec{overflow-x:clip;position:relative;padding-block:var(--sec)}
.sec--nopad{padding-block:0}
.sec--nopad-b{padding-bottom:0}
.sec--white{background:#fff}
.sec--beige{background:var(--beige)}
/* ★green4の地は生成り。同じ暖色一色で通すと「green4の色替え」に見えるので、
ピンク寄りの淡色を混ぜて地のリズムを変える（PINKはブランドカラー） */
.sec--rose{background:#FBF0F1}
.sec--brown{background:var(--brown);color:var(--white)}
.sec--red{background:var(--red);color:#fff}
/* ---------------- 見出しの型 ----------------
★green4の「黒箱の縦タブ」は使わない。あれはミチテラス／green4の署名。
umibeno-ie の作法＝和文の縦書き＋その脇に英字（縦・点線の罫）で、色文字だけで出す。 */
.sec__head{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3vw,52px);align-items:start;margin-bottom:clamp(40px,5vw,64px)}
.sec__headbody{min-width:0}
.vlabel{
display:flex;align-items:flex-start;gap:12px;padding-top:6px;
writing-mode:vertical-rl;text-orientation:upright;
}
.vlabel__jp{
font-size:clamp(15px,1.5vw,18px);font-weight:900;letter-spacing:.3em;line-height:1;
color:var(--brown);white-space:nowrap;
}
.vlabel__en{
writing-mode:vertical-rl;text-orientation:sideways;
font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.24em;line-height:1;
color:var(--red);white-space:nowrap;
border-left:1.5px dotted currentColor;padding-left:9px;
}
.sec--brown .vlabel__jp,.sec--red .vlabel__jp{color:#fff}
.sec--brown .vlabel__en{color:var(--orange)}
.sec--red .vlabel__en{color:rgba(255,255,255,.8)}
/* 横並びの英字ラベル（縦書きを置かない場所用） */
.lbl{
font-family:var(--en);font-size:12.5px;font-weight:700;letter-spacing:.28em;line-height:1;
color:var(--red);display:inline-block;padding-bottom:8px;margin-bottom:22px;
border-bottom:1.5px dotted currentColor;
}
.lbl--rev{color:var(--orange)}
.sec--red .lbl{color:#fff}
/* ---------------- 巨大タイポ（studio-sakana-kai の指紋） ----------------
★ゴーストではなく実体で見せる。あちらは 300px。こちらは和文が主なので少し抑える */
.huge{
font-family:var(--en);font-size:clamp(56px,13vw,184px);font-weight:800;line-height:.86;
letter-spacing:-.022em;color:var(--brown);margin:0 0 clamp(16px,2vw,28px);
display:block;
}
/* ★袋文字（-webkit-text-stroke）は使わない。
Montserrat の重いウェイトは字が「重なった複数の輪郭」でできていて、
塗ると見えないが線にすると継ぎ目が全部出る（Hの横棒が長方形、Aの横棒が三角、Nに斜線）。
2026-08-26 実測。塗りの薄い色に置き換える */
.huge--out{color:rgba(73,56,50,.16)}
.sec--brown .huge{color:var(--orange)}
.sec--red .huge{color:#fff}
.sec--brown .huge--out,.sec--red .huge--out{color:rgba(255,255,255,.2)}
.huge__sub{
display:block;font-family:var(--jp);font-size:13px;font-weight:700;letter-spacing:.2em;
color:var(--red);margin-top:14px;margin-bottom:30px;
}
.sec--brown .huge__sub,.sec--red .huge__sub{color:rgba(255,255,255,.8)}
/* ---------------- 波（umibeno-ie の指紋） ----------------
① セクション境界を波形で切る ② 手描きの波線を余白に散らす */
.wavecut{position:relative}
.wavecut::before{
content:"";position:absolute;left:0;right:0;top:1px;height:clamp(44px,6.4vw,104px);
transform:translateY(-100%);background:inherit;
-webkit-mask-image:var(--wavemask);-webkit-mask-size:100% 100%;
-webkit-mask-position:bottom;-webkit-mask-repeat:no-repeat;
mask-image:var(--wavemask);mask-size:100% 100%;
mask-position:bottom;mask-repeat:no-repeat;
}
:root{
--wavemask:url("data:image/svg+xml;utf8,");
}
.nami{
position:absolute;pointer-events:none;fill:none;stroke:var(--pink);stroke-width:2.4;
stroke-linecap:round;opacity:.85;
}
.nami--o{stroke:var(--orange)}
.nami--w{stroke:rgba(255,255,255,.5)}
/* ---------------- 画面端の縦書きマーキー（studio-sakana-kai の指紋） ---------------- */
.edge{position:absolute;inset-block:0;width:clamp(26px,3vw,44px);overflow:hidden;pointer-events:none;z-index:0}
.edge--l{left:0}
.edge--r{right:0}
.edge__run{display:flex;flex-direction:column;width:100%;animation:vslide 22s linear infinite;will-change:transform}
.edge__run span{
writing-mode:vertical-rl;font-size:12px;font-weight:700;letter-spacing:.26em;line-height:1;
color:rgba(73,56,50,.34);white-space:nowrap;padding:26px 0;flex:none;
}
.edge--r .edge__run{animation-direction:reverse}
.sec--brown .edge__run span,.sec--red .edge__run span{color:rgba(255,255,255,.34)}
@keyframes vslide{to{transform:translateY(-50%)}}
/* ---------------- 見出しの一部を帯で囲む（umibeno-ie の指紋） ---------------- */
.hl{background:rgba(244,163,64,.34);padding:.05em .22em;border-radius:2px}
.sec--brown .hl,.sec--red .hl{background:rgba(255,255,255,.2)}
/* 一部だけ重ねてずらす（umibeno-ie の見出しの影） */
.sh{position:relative;display:inline-block}
.sh::after{
content:attr(data-t);position:absolute;left:.06em;top:.07em;z-index:-1;
color:var(--pink);white-space:pre;
}
.sec--brown .sh::after,.sec--red .sh::after{color:rgba(255,255,255,.3)}
/* ---------------- 箱に入れないイラスト（umibeno-ie の指紋） ----------------
★カードの中に閉じ込めない。余白に単体で浮かせる */
.fl{position:absolute;z-index:0;pointer-events:none;height:auto}
.fl--motherchild{right:clamp(-10px,1vw,40px);bottom:6%;width:clamp(96px,12vw,168px);opacity:.96}
.fl--hands{left:clamp(-14px,2vw,56px);bottom:4%;width:clamp(120px,15vw,220px);opacity:.96}
/* ★先方が描いたキャラクター（プロジェクトシート21 世界観）。余白に散らす */
.fl--bike{right:clamp(-6px,1.4vw,44px);top:16%;width:clamp(84px,10vw,150px)}
.fl--sign{right:clamp(-6px,1.4vw,44px);bottom:12%;width:clamp(70px,8vw,118px)}
.fl--table{left:clamp(-10px,1.6vw,48px);top:14%;width:clamp(96px,11vw,168px)}
.fl--three{right:clamp(-10px,1.8vw,52px);bottom:8%;width:clamp(120px,14vw,220px)}
/* 波線の置き場所。左右・上下をばらして「散らした」感じにする */
.nami--a{left:2%;top:12%;width:clamp(84px,9vw,148px)}
.nami--b{right:6%;top:26%;width:clamp(64px,7vw,112px)}
.nami--c{right:3%;top:16%;width:clamp(84px,9vw,148px)}
.nami--d{left:5%;bottom:14%;width:clamp(64px,7vw,110px)}
/* 9/15 見出しを左揃えにしたので右上へ（左だと縦ラベル・見出しに当たる。1024/1280で実測） */
.nami--e{right:5%;top:12%;width:clamp(84px,9vw,150px)}
.nami--f{right:5%;bottom:16%;width:clamp(84px,9vw,150px)}
.nami--g{right:6%;top:14%;width:clamp(90px,10vw,164px)}
.nami--h{right:4%;top:18%;width:clamp(64px,7vw,110px)}
.nami--i{right:5%;top:22%;width:clamp(84px,9vw,150px)}
.h2{
font-size:clamp(26px,3.2vw,44px);font-weight:900;line-height:1.5;letter-spacing:.04em;
max-width:22em;
}
.h2 em{font-style:normal;color:var(--red);}
.sec--brown .h2 em,.sec--red .h2 em{color:var(--orange)}
.h2--huge{font-size:clamp(30px,4.4vw,60px);line-height:1.42}
.h2--center{text-align:center}
.h3{font-size:22px;font-weight:900;letter-spacing:.06em;line-height:1.6}
.sub{margin-top:22px;font-size:16px;font-weight:500;line-height:2;color:rgba(73,56,50,.78)}
.sec--brown .sub,.sec--red .sub{color:rgba(255,255,255,.8)}
/* ★カタカナ語が行またぎで割れると読みにくい（検査で3件出た）。
語を .nb で包む。flex の gap が文中に効く罠を避けるため .prose は flex にしない */
.nb{white-space:nowrap}
/* 対応ブラウザでは末尾1語だけの行（泣き別れ）を自動で避ける */
p,li,dd,h2,h3{text-wrap:pretty}
.prose{font-size:16px;line-height:2.1}
.prose + .prose{margin-top:1.5em}
/* ★.prose / .shime / .stats は既定でmarginを持たない。隣接で余白を足す
（並び替えると密着する。green4で実測済み） */
.h2 + .prose,.h2 + .sub,.h2 + .stats,.h2 + .boshu{margin-top:32px}
.lbl + .h2{margin-top:0}
.sub + .prose{margin-top:28px}
.prose--lead{font-size:18px;font-weight:500}
.prose--center{text-align:center}
.prose b{font-weight:700}
/* 未確定の印 */
.ck{display:inline-block;margin-left:.6em;font-size:12.5px;line-height:1.8;color:rgba(73,56,50,.55);letter-spacing:.02em}
.ck--block{display:block;margin:32px 0 0;font-size:12.5px;color:rgba(73,56,50,.55)}
.ck--rev{color:rgba(255,255,255,.6)}
.sec--brown .ck,.sec--red .ck,.ft .ck{color:rgba(255,255,255,.6)}
/* 番号（sakana-kai の実測 72px / Montserrat 500） */
.num{font-family:var(--en);font-size:72px;font-weight:500;line-height:1;letter-spacing:-.01em;display:block}
.num--big{font-size:clamp(64px,8vw,110px)}
/* ---------------- ヘッダー ---------------- */
.hd{
position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;
padding:10px clamp(14px,2.4vw,30px);pointer-events:none;
}
.hd::before{content:"";position:absolute;inset:0;background:var(--white);border-bottom:1px solid var(--line);
opacity:0;transition:opacity .28s ease;pointer-events:none}
.hd.is-stuck::before{opacity:1}
.hd__logo{position:relative;display:flex;align-items:center;gap:10px;pointer-events:auto}
/* ★旧: .hd__logo img{width:34px} は削除（2026-09-15）。要素型つきの指定がクラス指定（.hd__logoimg）に勝って、
ロゴが34px幅のまま大きくならなかった。memory: feedback_css_type_reset_beats_class */
.hd__name{font-size:15px;font-weight:900;letter-spacing:.1em;line-height:1;display:flex;align-items:baseline;gap:8px;font-family:var(--en)}
.hd__name b{font-family:var(--jp);font-size:14px;letter-spacing:.14em}
.hd__menu{
position:relative;pointer-events:auto;display:flex;align-items:center;gap:12px;
background:var(--brown);color:var(--white);border-radius:999px;padding:12px 24px 12px 20px;
}
.hd__bars{display:inline-flex;flex-direction:column;gap:5px;width:18px}
.hd__bars i{display:block;height:1.5px;background:currentColor;transition:transform .25s}
.hd__menutxt{font-family:var(--en);font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1}
.hd.is-open .hd__bars i:first-child{transform:translateY(3.25px) rotate(20deg)}
.hd.is-open .hd__bars i:last-child{transform:translateY(-3.25px) rotate(-20deg)}
.drawer{position:fixed;inset:0;z-index:55;background:var(--brown);color:var(--white);overflow:auto}
.drawer[hidden]{display:none}
.drawer__in{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 80px;max-width:760px;margin-inline:auto}
.drawer__list{display:grid;grid-template-columns:1fr 1fr;gap:2px 40px}
.drawer__list a{display:flex;align-items:baseline;gap:14px;padding:11px 0;font-size:16px;font-weight:700;letter-spacing:.08em;border-bottom:1px dotted rgba(255,255,255,.22)}
.drawer__list em{font-family:var(--en);font-style:normal;font-size:12px;font-weight:700;color:var(--orange);letter-spacing:.08em}
.drawer__tag{margin-top:48px;font-size:clamp(24px,4vw,40px);font-weight:900;letter-spacing:.08em;color:var(--orange)}
/* ---------------- 1. 表紙 ---------------- */
.hero{
position:relative;min-height:100svh;display:grid;place-items:center;
padding:88px var(--pad) 32px;background:var(--white);overflow:clip;
}
.hero__body{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:clamp(14px,2.2vh,28px)}
.hero__logo{width:clamp(112px,13vmin,142px);height:auto}
/* ★「丸ロゴをもっと大きく」＝この、くるくる回るイラストのこと（2026-08-27 水沼さん）。
ヒーローからロゴを外したぶん、ここを主役として大きくする */
.hero__ringwrap{
/* ★輪の大きさの正本はここ1箇所。散らす部品（.asm）も同じ値を受け継ぐので、
幅ごとに式が食い違って円周の文字と当たる、という事故が起きない（2026-09-09） */
/* ★新田さんメモ 9/14「PCで見ると、リード文と3つの言葉が隠れて見えない」。
輪が 660px のとき、見出し＋輪＋リード文＋言葉＋余白で 1,100px を超え、
900px 前後のノートPCでは下2つが画面の外に出ていた（スクロールすると先に消える動きなので、どうやっても見えない）。
→ 輪の大きさに「画面の高さ − 文字と余白のぶん」の上限を足し、表紙が1画面に収まるようにする */
--ring:min(78vmin,660px,calc(100svh - 310px));
position:relative;display:grid;place-items:center;
}
.hero__ring{
/* 打合せ#2「真ん中のロゴをもう少し大きく出した方がインパクトがある」→ 540→660px */
position:relative;z-index:1;width:var(--ring);aspect-ratio:1;display:grid;place-items:center;
}
.hero__circle{
width:78%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--beige);
}
.hero__circle img{width:100%;height:100%;object-fit:cover;display:block}
.hero__arc{position:absolute;inset:0;pointer-events:none;
animation:spin 30s linear infinite;will-change:transform}
.hero__arc span{
position:absolute;left:50%;top:50%;transform-origin:0 0;
font-size:clamp(15px,2.3vmin,21px);font-weight:900;letter-spacing:0;color:var(--brown);white-space:pre;
}
.hero__lead{font-size:clamp(15px,1.8vw,19px);font-weight:700;letter-spacing:.14em}
.hero__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hero__pills li{
font-size:13px;font-weight:700;letter-spacing:.12em;line-height:1;
padding:11px 20px;border:1.5px solid var(--line2);border-radius:999px;background:var(--white);
}
.hero__pills li:nth-child(1){border-color:var(--red);color:var(--red)}
.hero__pills li:nth-child(2){border-color:var(--orange);color:#B87418}
.hero__pills li:nth-child(3){border-color:var(--pink);color:#C4677A}
.hero__scroll{position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(20px,4vh,48px);display:grid;place-items:center;width:96px;height:96px}
.hero__scroll svg{position:absolute;inset:0;animation:spin 22s linear infinite}
.hero__badge{fill:none;stroke:var(--brown);stroke-width:1.4}
.hero__scroll span{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.2em;line-height:1}
/* ★`rotate:360deg` ではなく transform を使う。単独の rotate プロパティは
Safari で合成が効かないことがあり、実機で止まって見えた（2026-08-27） */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* ---------------- 帯（マーキー） ---------------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);overflow:hidden}
.marquee__row{display:flex;width:max-content;animation:slide 26s linear infinite;will-change:transform}
.marquee__row span{display:flex;align-items:center;padding:17px 0;font-size:13px;font-weight:700;letter-spacing:.18em;line-height:1;white-space:nowrap}
.marquee__row i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin:0 26px}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---------------- 2. あゆみ ---------------- */
.ayumi{display:grid;gap:0;margin-top:8px;border-top:1px dashed var(--line2)}
.ayumi li{display:grid;grid-template-columns:132px 1fr;gap:28px;align-items:baseline;padding:22px 0;border-bottom:1px dashed var(--line2)}
.ayumi__y{font-family:var(--en);font-size:30px;font-weight:700;line-height:1;color:var(--brown)}
.ayumi li p{font-size:16px;line-height:1.9}
.ayumi .is-now .ayumi__y{color:var(--red)}
.ayumi .is-now p b{font-weight:900}
.hole{margin-top:44px;padding:36px 40px;background:var(--white);border:1.5px dashed var(--line2)}
.hole__t{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--red);margin-bottom:14px}
.hole__b{font-size:16px;line-height:2}
/* ---------------- 3. 志 ---------------- */
.big-line{font-size:clamp(20px,2.6vw,30px);font-weight:500;line-height:1.85;letter-spacing:.05em;margin:0 0 56px}
.big-line b{font-weight:900}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.two--wide{gap:64px}
.itnami{display:grid;gap:0;border-top:1px dashed var(--line2)}
.itnami li{position:relative;padding:19px 0 19px 26px;font-size:17px;font-weight:700;letter-spacing:.06em;border-bottom:1px dashed var(--line2)}
.itnami li::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:4px;height:20px;background:var(--red)}
.itnami li:nth-child(2)::before{background:var(--orange)}
.itnami li:nth-child(3)::before{background:var(--pink)}
.shime{margin-top:64px;font-size:clamp(18px,2.2vw,26px);font-weight:700;line-height:1.9;letter-spacing:.05em;text-align:center}
.shime--big{font-size:clamp(20px,2.8vw,34px);font-weight:900}
.shime b{color:var(--red)}
.sec--brown .shime b,.sec--red .shime b{color:var(--orange)}
/* ---------------- 4. 現場のいま（アーチ絵のカード） ---------------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card3{padding:36px 30px 34px;border-radius:14px}
.card3--beige{background:var(--beige)}
.card3--orange{background:#FBEBD5}
.card3--pink{background:#FBE7EA}
.card3 .num{font-size:44px;color:rgba(73,56,50,.34);margin-bottom:14px}
.card3__art{
width:100%;aspect-ratio:5/4;border-radius:50% 50% 0 0;background:rgba(255,255,255,.72);
display:grid;place-items:center;margin-bottom:24px;
}
.card3__art{overflow:clip}
/* ★記号のアイコンをやめ、母と子が描かれた絵に置き換えた（2026-09-01）。
先方「SVGアイコンがAI感強い」。人が描かれていない抽象記号は、それ自体が既製品に見える。
アーチの中いっぱいに置き、下端を切って地に馴染ませる。 */
.card3__art img{width:100%;height:100%;object-fit:contain;object-position:50% 92%;padding:12% 10% 0}
.card3__art svg{width:96px;height:96px;fill:none;stroke:var(--brown);stroke-width:1.85;
stroke-linecap:round;stroke-linejoin:round}
.card3 h3{margin-bottom:12px}
.card3 p{font-size:15px;line-height:1.95}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:72px;padding-top:44px;border-top:1px dashed var(--line2)}
.stat{text-align:center}
.stat__l{font-size:13px;font-weight:700;letter-spacing:.1em;color:rgba(73,56,50,.7);margin-bottom:10px}
.stat__n{font-family:var(--en);font-size:clamp(42px,5.4vw,68px);font-weight:800;line-height:1;color:var(--red)}
.stat__n em{font-family:var(--jp);font-style:normal;font-size:.36em;font-weight:700;margin-left:.2em;letter-spacing:.04em}
.stat__s{margin-top:10px;font-size:12px;color:rgba(73,56,50,.5)}
/* 未確定の数字。大きい字のままだと「—」が赤い棒に見える */
.stat__n.is-tbd,.okane__p.is-tbd,.plan__n.is-tbd{font-size:clamp(24px,2.6vw,32px);color:rgba(73,56,50,.4)}
.stat__n.is-tbd em,.okane__p.is-tbd em{font-size:.6em;color:inherit}
/* ---------------- 5. 自分ごと化 ---------------- */
.turn{text-align:center}
.turn .lbl{margin-inline:auto;display:inline-block}
.turn__sub{margin-top:36px;font-size:clamp(14px,1.7vw,17px);line-height:2.1;color:rgba(255,255,255,.82)}
/* ---------------- 6. 募集 ---------------- */
.boshu{margin-top:56px;padding:60px 40px;text-align:center;background:var(--beige);border-radius:16px}
.boshu__l{font-size:14px;font-weight:700;letter-spacing:.2em}
.boshu__n{font-family:var(--en);font-size:clamp(72px,12vw,150px);font-weight:800;line-height:1;color:var(--red);margin:8px 0 4px}
.boshu__n em{font-family:var(--jp);font-style:normal;font-size:.24em;font-weight:700;margin-left:.16em}
.boshu__s{font-size:16px;font-weight:700;line-height:1.9}
/* バディの並び／募集の輪（箱に入れず、面で見せる） */
.buddyline{width:100%;max-width:960px;height:auto;margin:0 auto clamp(32px,4vw,56px)}
/* #02 もっと大きくバランスよく（2026-09-03 新田さんメモ） */
.boshucircle{display:block;width:clamp(260px,38vw,520px);height:auto;margin:clamp(28px,3.4vw,44px) auto clamp(20px,2.4vw,32px)}
/* ---------------- 7. 俯瞰マップ ---------------- */
.about__map{position:relative}
.about__map>img{width:100%;height:auto}
.about__box{
position:absolute;left:clamp(20px,6vw,110px);bottom:clamp(24px,7vw,110px);
width:min(520px,calc(100% - 40px));background:var(--white);padding:44px 40px;border-radius:14px;
}
.about__box .h2{font-size:clamp(21px,2.3vw,30px)}
.about__box .prose{margin-top:22px;font-size:15px;line-height:2}
/* #about は俯瞰マップだけのセクション。メモ欄の受け皿だけを下に置く */
.about__memo:empty{display:none}
.about__memo{padding-top:40px}
.about__memo:has(.memohold:empty){padding-top:0}
/* ---------------- 9. 循環 ---------------- */
.circle{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border:1px solid var(--line)}
.circle li{position:relative;padding:40px 28px 44px;background:var(--white);min-height:190px;outline:1px solid var(--line)}
.circle li:nth-child(1){background:#FDF3E6}
.circle li:nth-child(2){background:#FBE7EA}
.circle li:nth-child(3){background:var(--beige)}
.circle li:nth-child(4){background:#FBEBD5}
.circle li:nth-child(5){background:#FAE4E2}
.circle li:nth-child(6){background:#EFE7DB}
.circle .num{font-size:40px;color:rgba(73,56,50,.32);margin-bottom:16px}
.circle p{font-size:17px;font-weight:900;line-height:1.6;letter-spacing:.05em}
/* ---------------- 10. 3本柱タイル（sakana-kai の指紋） ---------------- */
.tiles{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px}
/* ★絵は絶対配置にしない。浮かせるとタイルの高さに反映されず、幅によって文字に被る
（1024〜1200px と 390/720px で実測）。常に流れの中に置き、高さは min-height で担保する */
.tile{
position:relative;overflow:clip;min-height:min(33vw,470px);display:flex;flex-direction:column;justify-content:flex-end;
padding:92px 36px 40px;outline:1px solid rgba(255,255,255,.5);
}
.tile--red{background:var(--red);color:#fff}
.tile--orange{background:var(--orange);color:var(--brown)}
.tile--pink{background:var(--pink);color:var(--brown)}
.tile .num{position:absolute;left:36px;top:34px;font-size:64px;opacity:.42;z-index:1}
.tile__illbox{display:block;width:100%;max-width:290px;margin:0 auto 24px;pointer-events:none}
.tile__ill{width:100%;height:auto;display:block}
.tile__lead{margin-top:auto}
.tile__lead{font-size:15px;font-weight:700;letter-spacing:.08em;margin-bottom:10px;margin-top:auto}
.tile__ttl{font-size:clamp(26px,3.2vw,40px);font-weight:900;letter-spacing:.06em;line-height:1.3}
.tile__ttl em{font-style:normal;display:inline-block}
.tile__go{position:absolute;right:32px;bottom:34px;width:46px;height:46px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:15px}
/* ---------------- 11-13. 柱の章 ---------------- */
.chap{position:relative;overflow:clip}
.chap--red{background:#FDF1F0}
.chap--orange{background:#FDF4E7}
.chap--pink{background:#FCEFF1}
.chap .huge--out{margin-bottom:clamp(6px,1vw,18px);pointer-events:none;user-select:none}
.chap--red .huge--out{color:rgba(229,83,75,.2)}
.chap--orange .huge--out{color:rgba(185,110,20,.17)}
.chap--pink .huge--out{color:rgba(200,110,128,.22)}
.chap__head{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;margin-bottom:40px}
.chap--red .num--big{color:var(--red)}
.chap--orange .num--big{color:#A96410}
.chap--pink .num--big{color:#A85164}
.chap .lbl{color:var(--brown)}
.acts{margin-top:48px;display:grid;gap:0;border-top:1px dashed var(--line2)}
/* ★flex の直下に素のテキストを置かない。
① gap は文中の .nb にも効いて語間が開く
② テキストと .nb がそれぞれ flex item になり、狭い場所で1行3文字まで潰れる（2026-08-26 実測）
→ テキストは必ず .acts__t で1つに包み、間隔はアイコンの margin で作る */
.acts li{display:flex;align-items:center;gap:0;min-width:0;padding:20px 4px;font-size:17px;font-weight:700;letter-spacing:.05em;border-bottom:1px dashed var(--line2)}
/* 手描き風の自作SVGアイコン。汎用アイコン素材は使わない */
.acts__t{flex:1 1 auto;min-width:0}
/* ★行頭の記号は全廃（12個並ぶと意味の助けにならずノイズになる）。
短い罫だけ置いて、余白で読ませる。 */
.acts li::before{content:"";flex:none;width:18px;height:1px;background:var(--red);
margin-right:16px;opacity:.55}
/* ---------------- 柱の章：story 01〜05 ＋ Before/After ---------------- */
.story{margin-top:clamp(40px,5vw,64px);display:grid;gap:0;border-top:1px dashed var(--line2)}
/* ★子セレクタにする。`.story li` だと入れ子の `.acts li` にも当たり、
テキストが 62px の列（アイコン用）に押し込まれて1行3文字まで潰れる（2026-08-26 実測） */
.story > li{display:grid;grid-template-columns:auto 62px 1fr;align-items:start;column-gap:20px;
padding:26px 4px;border-bottom:1px dashed var(--line2)}
.story > li > .story__n{font-family:var(--en);font-size:20px;font-weight:700;line-height:1.5;color:rgba(73,56,50,.4);padding-top:12px}
/* ★記号をやめ、マップから切り出した「人が写る場面」をはめる（2026-09-01）。
先方「SVGアイコンが安っぽい」。抽象記号は案件のものにならないので、
大きく見える枠には必ず人が描かれた絵を置く。 */
.story > li > .story__ic{width:62px;height:62px;border-radius:50%;object-fit:cover;
border:2px solid var(--white);box-shadow:0 4px 12px rgba(73,56,50,.12)}
.story__b h3{font-size:18px;margin-bottom:8px}
.story__b p{font-size:14.5px;line-height:1.95;color:rgba(73,56,50,.86)}
.ba{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(14px,2vw,26px)}
.ba__i{padding:26px 28px;border-radius:14px;background:rgba(255,255,255,.72)}
.ba__i--a{background:var(--brown);color:var(--white)}
.ba__l{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--red);margin-bottom:10px}
.ba__i--a .ba__l{color:var(--orange)}
.ba__t{font-size:clamp(15px,1.8vw,19px);font-weight:900;line-height:1.7}
.ba__ar{align-self:center;font-size:26px;color:rgba(73,56,50,.45)}
/* ---------------- 志の共同体（あなたが入ると何が回るか） ---------------- */
.wheel{
display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:clamp(10px,1.6vw,22px);
padding:clamp(28px,3.4vw,48px) clamp(20px,2.6vw,40px) clamp(52px,5vw,72px);
background:var(--white);border-radius:16px;position:relative;
}
.wheel__n{text-align:center;padding:22px 12px;border-radius:12px}
.wheel__n--you{background:#FDF3E6}
.wheel__n--fam{background:var(--red);color:#fff}
.wheel__n--soc{background:var(--beige)}
.wheel__t{font-size:clamp(15px,1.8vw,19px);font-weight:900;letter-spacing:.05em;line-height:1.5}
.wheel__s{margin-top:6px;font-size:11.5px;line-height:1.6;opacity:.78}
.wheel__arrow{text-align:center}
.wheel__ar{display:block;font-size:22px;color:#B0700F;line-height:1}
.wheel__arrow ul{margin-top:8px;display:grid;gap:3px}
.wheel__arrow li{font-size:11px;font-weight:700;letter-spacing:.04em;color:rgba(73,56,50,.72);white-space:nowrap}
.wheel__loop{
position:absolute;left:clamp(20px,2.6vw,40px);right:clamp(20px,2.6vw,40px);bottom:clamp(16px,2vw,26px);
text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--red);
padding-top:14px;border-top:1.5px dashed var(--line2);
}
.give{margin-top:clamp(28px,3.4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.give__c{padding:30px 30px 34px;border-radius:14px;background:var(--white)}
.give__c--back{background:transparent;border:1.5px dashed var(--line2)}
.give__c h3{margin-bottom:18px;padding-bottom:14px;border-bottom:1px dashed var(--line2);font-size:17px}
.give__l{display:grid;gap:12px}
.give__l li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.9}
.give__l li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.give__c--back .give__l li::before{background:transparent;border:1.5px solid var(--line2)}
/* ---------------- 参加者一覧：掲載イメージのモック ---------------- */
.bcard{margin-bottom:clamp(32px,4vw,52px)}
.bcard__cap{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--red);margin-bottom:12px}
.bcard__i{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,32px);align-items:center;
max-width:640px;padding:clamp(22px,2.6vw,32px);background:var(--white);border-radius:16px;
border:1.5px dashed var(--line2)}
.bcard__ph{width:clamp(84px,9vw,116px);aspect-ratio:1;border-radius:50%;background:var(--beige);
display:grid;place-items:center}
.bcard__ph{border:1px dashed rgba(73,56,50,.22)}
.bcard__ph span{font-size:11px;letter-spacing:.14em;color:rgba(73,56,50,.42)}
.bcard__no{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--red)}
.bcard__no b{font-weight:800}
.bcard__n{margin-top:6px;font-size:clamp(17px,2vw,22px);font-weight:900;letter-spacing:.04em}
.bcard__o{margin-top:4px;font-size:12.5px;color:rgba(73,56,50,.66)}
.bcard__q{margin-top:12px;font-size:14px;font-weight:700;line-height:1.8}
.bcard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bcard__tags > span{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;
background:rgba(73,56,50,.07);color:rgba(73,56,50,.7)}
.bcard__note{margin-top:12px;font-size:12.5px;color:rgba(73,56,50,.6)}
/* ---------------- 実績：活動カードとメディア掲載 ---------------- */
.ayumi--tbd .ayumi__y{color:rgba(73,56,50,.4)}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.track li{padding:0 0 24px;background:var(--beige);outline:1px solid var(--line)}
.track__ph{aspect-ratio:16/10;display:grid;place-items:center;background:var(--white);
border-bottom:1.5px dashed var(--line2);margin-bottom:18px}
.track__ph span{font-size:11.5px;letter-spacing:.14em;color:rgba(73,56,50,.4)}
.track h4{margin:0 22px 8px;font-size:15px;font-weight:900}
.track p{margin:0 22px;font-size:13px;line-height:1.85}
.media{margin-top:8px;display:grid;gap:0;border-top:1px dashed var(--line2)}
.media li{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:16px 4px;
font-size:14px;border-bottom:1px dashed var(--line2)}
.media__d{font-family:var(--en);font-weight:700;color:rgba(73,56,50,.6)}
/* ---------------- 連携・協力先 ---------------- */
.kyo{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.kyo li{padding:32px 30px 36px;background:var(--beige);outline:1px solid var(--line)}
.kyo h3{font-size:17px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line2)}
.kyo p{font-size:14px;line-height:1.9}
/* お金の内訳 */
.okane__d{margin-top:14px;display:grid;gap:6px;text-align:left}
.okane__d li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.8;color:rgba(73,56,50,.7)}
.okane__d li::before{content:"";position:absolute;left:2px;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--line2)}
.nami--j{left:4%;bottom:12%;width:clamp(84px,9vw,150px)}
/* ---------------- 更新版シート対応で足した部品 ---------------- */
/* 巨大タイポの単位（44.5% の % など） */
.huge__unit{font-size:.42em;margin-left:.04em}
/* 志：3つの壁（storyの派生。番号を色でも分ける） */
/* ★2列にするのは .story.story--wall で書く（クラス2つ＝優先度を上げる）。
`.story--wall > li` だと、スマホ用の `.story > li{grid-template-columns:auto 48px 1fr}`
（同じ優先度で後ろにある）に負けて3列のままになり、
アイコンを外した壁リストの本文が48pxの列に入って1行3文字になる（2026-09-05 実測）。 */
.story.story--wall > li{grid-template-columns:auto 1fr;column-gap:24px}
.story--wall > li > .story__n{
color:var(--red);font-size:34px;font-weight:800;line-height:1;padding-top:6px;
border-right:1px solid var(--line2);padding-right:24px;min-width:2.4em}
/* 章の活動リストを story の中に入れたときの詰め */
.story .acts{margin-top:16px;border-top:1px dashed var(--line2)}
.story .acts li{padding:12px 2px;font-size:15px;font-weight:500}
.story .acts__ic{width:40px;height:40px;margin-right:14px;padding:7px}
.story__close{margin-top:16px;font-size:15px;font-weight:700;line-height:1.9}
.story__close b{color:var(--red)}
.chap--orange .story__close b{color:#A96410}
.chap--pink .story__close b{color:#A85164}
.acts--big li{font-size:17px}
/* 現場のいま：数字の組 */
/* #01 数字と見出しのスペースが狭い（2026-09-03 新田さんメモ） */
.fig{margin-top:18px;display:grid;gap:22px}
.fig>div{display:grid;gap:7px}
.fig dt{font-size:12.5px;line-height:1.7;color:rgba(73,56,50,.7)}
.fig dd{margin:0;font-family:var(--en);font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1;color:var(--red)}
.fig dd span{font-family:var(--jp);font-size:.32em;font-weight:700;margin-left:.24em;letter-spacing:.04em}
.fig__note{margin-top:12px;font-size:14px;line-height:1.8}
.fig__note b{font-size:1.2em;font-weight:900;color:var(--red)}
.card3 p{font-size:14px;line-height:1.9}
/* 引用（先方の言葉） */
.quote{margin:clamp(48px,6vw,80px) 0 0;padding:clamp(30px,3.6vw,48px) clamp(26px,3vw,44px);
background:var(--beige);border-radius:16px;border-left:6px solid var(--red)}
.quote p{font-size:clamp(17px,2.2vw,25px);font-weight:700;line-height:1.9;letter-spacing:.03em}
.quote b{color:var(--red)}
/* ロードマップ（6段・番号つき） */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.road li{position:relative;padding:34px 30px 38px;background:var(--white);outline:1px solid var(--line)}
.road__no{position:absolute;right:22px;top:20px;font-family:var(--en);font-size:34px;font-weight:700;
line-height:1;color:rgba(73,56,50,.16)}
.road__y{font-family:var(--en);font-size:15px;font-weight:700;letter-spacing:.1em;line-height:1;
color:#B57216;display:block;margin-bottom:12px}
.road h3{font-size:19px;margin-bottom:10px}
.road__lead{font-size:14px;font-weight:700;line-height:1.8;margin-bottom:10px}
.road__body{font-size:12.5px;line-height:1.85;color:rgba(73,56,50,.72)}
.road__ill{width:100%;max-width:118px;height:104px;object-fit:contain;object-position:left bottom;margin-bottom:14px}
/* 私たちが創る未来：2段 */
.future{margin-top:clamp(32px,4vw,52px);display:grid;gap:2px}
.future li{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,34px);align-items:start;
padding:30px 4px;border-top:1px dashed rgba(255,255,255,.28)}
.future li:last-child{border-bottom:1px dashed rgba(255,255,255,.28)}
.future__n{font-family:var(--en);font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1;color:var(--orange)}
.future__y{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--orange);margin-bottom:8px}
.future h3{font-size:clamp(19px,2.2vw,24px);margin-bottom:10px;color:#fff}
.future p{font-size:14.5px;line-height:1.95;color:rgba(255,255,255,.84)}
.future b{color:#fff}
.sub--center{text-align:center;margin-inline:auto}
.boshu .boshu__l{letter-spacing:.16em}
/* ---------------- 15. 未来 ---------------- */
.mirai{margin-top:48px;display:grid;gap:1.6em;font-size:16px;line-height:2.1;color:rgba(255,255,255,.86)}
.mirai__key{font-size:clamp(19px,2.4vw,28px);font-weight:700;line-height:1.75;color:#fff}
.mirai__key b{font-weight:900;color:var(--orange)}
/* ---------------- 17. 流れ ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.steps li{padding:30px 26px 40px;background:var(--beige);outline:1px solid var(--line)}
.steps__ill{width:100%;max-width:150px;height:132px;object-fit:contain;object-position:center bottom;margin:0 auto 14px}
.steps .num{font-size:40px;color:rgba(73,56,50,.32);margin-bottom:14px}
.steps h3{font-size:19px;margin-bottom:12px}
.steps p{font-size:14.5px;line-height:1.95}
/* ---------------- 18. 参画枠（4段・上の枠が下を含む） ---------------- */
.plancards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.plancard{display:flex;flex-direction:column;padding:clamp(26px,3vw,36px);border-radius:16px;background:var(--white)}
.plancard--a{background:#FDF7EE}
.plancard--b{background:#FBEEDC}
.plancard--c{background:#FBE4E6}
.plancard--d{background:var(--brown);color:var(--white)}
.plancard__hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;
padding-bottom:18px;border-bottom:1.5px dashed var(--line2)}
.plancard--d .plancard__hd{border-bottom-color:rgba(255,255,255,.3)}
.plan__n{font-family:var(--en);font-size:clamp(38px,4.6vw,60px);font-weight:800;line-height:1;color:var(--red)}
.plancard--d .plan__n{color:var(--orange)}
.plan__n em{font-family:var(--jp);font-style:normal;font-size:.32em;font-weight:700;margin-left:.16em;letter-spacing:.04em}
.plan__name{font-size:clamp(15px,1.7vw,19px);font-weight:900;letter-spacing:.06em;
padding-left:16px;border-left:4px solid var(--red)}
.plancard--d .plan__name{border-left-color:var(--orange)}
.plancard__ill{width:100%;max-width:300px;height:auto;margin:clamp(18px,2.4vw,28px) auto}
.plancard__b{margin-top:auto}
.plan__carry{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--red);margin-bottom:14px}
.plancard--d .plan__carry{color:var(--orange)}
.ret{display:grid;gap:12px}
.ret li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.9}
.ret li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:11px;border-radius:50%;
background:var(--orange)}
.plancard--d .ret li::before{background:var(--orange)}
/* ---------------- 19. バディ一覧 ---------------- */
.buddies{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.buddy{padding:32px 26px 34px;background:var(--beige);outline:1px solid var(--line);text-align:center}
.buddy__ph{display:block;width:96px;height:96px;margin:0 auto 20px;border-radius:50%;background:var(--white);border:1.5px dashed var(--line2)}
.buddy__n{font-size:17px;font-weight:900;letter-spacing:.08em}
.buddy__r{margin-top:8px;font-size:13px;color:rgba(73,56,50,.6)}
/* ---------------- 20. お金 ---------------- */
.okane{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.okane__i{padding:44px 24px;text-align:center;background:var(--beige);border-radius:14px}
.okane__p{font-family:var(--en);font-size:clamp(40px,5vw,62px);font-weight:800;line-height:1;color:var(--red)}
.okane__p em{font-family:var(--jp);font-style:normal;font-size:.34em;font-weight:700;margin-left:.1em}
.okane__l{margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.08em}
.zeimu{margin-top:44px;padding:34px 36px;border:1.5px dashed var(--line2);border-radius:14px}
.zeimu h3{font-size:18px;margin-bottom:12px}
.zeimu p{font-size:15px;line-height:1.95}
/* ---------------- 21. ロゴコンセプト ---------------- */
.lgc{display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:center}
.lgc__img{background:var(--white);border-radius:16px;padding:40px;display:grid;place-items:center}
.lgc__img img{width:100%;max-width:220px}
.lgc__list{display:grid;gap:0;border-top:1px dashed var(--line2)}
.lgc__list>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px dashed var(--line2)}
.lgc__list dt{font-size:15px;font-weight:900;letter-spacing:.06em}
.lgc__list dd{font-size:15px;line-height:1.85}
.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.colors li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:18px;align-items:center;background:var(--white);padding:22px 24px;border-radius:12px}
.colors li span{grid-row:1/4;width:46px;height:46px;border-radius:50%;background:var(--c);border:1px solid var(--line)}
.colors li b{font-family:var(--en);font-size:12.5px;font-weight:700;letter-spacing:.1em}
.colors li i{font-family:var(--en);font-style:normal;font-size:12px;color:rgba(73,56,50,.55)}
.colors li p{font-size:12.5px;line-height:1.7;color:rgba(73,56,50,.72)}
/* ---------------- ヒアリングで埋まった部品 ---------------- */
/* 母の言葉。ページで一番強い一行なので、他と混ぜない */
.voice{margin:clamp(40px,5vw,68px) 0 0;padding:clamp(34px,4vw,56px) clamp(26px,3.4vw,52px);
background:var(--white);border-radius:16px;border-left:6px solid var(--red);position:relative}
.voice::before{content:"“";position:absolute;left:clamp(14px,1.8vw,26px);top:-.1em;
font-family:var(--en);font-size:clamp(72px,9vw,132px);font-weight:800;color:rgba(229,83,75,.14);line-height:1}
.voice blockquote{margin:0;position:relative}
.voice p{font-size:clamp(21px,3vw,40px);font-weight:900;line-height:1.65;letter-spacing:.03em}
.voice b{color:var(--red)}
.voice figcaption{margin-top:22px;font-size:13.5px;font-weight:700;color:rgba(73,56,50,.66)}
.prose--lead + .subh{margin-top:clamp(56px,6vw,88px)}
/* 代表名 */
.rep{margin:-8px 0 22px;font-size:15px;letter-spacing:.06em}
.rep b{font-size:1.15em;font-weight:900}
/* なぜシングルマザーなのか */
.why{display:grid;gap:2px;margin-top:8px}
.why li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;
padding:28px 26px;background:var(--white);outline:1px solid var(--line)}
.why__n{font-family:var(--en);font-size:clamp(28px,3.4vw,44px);font-weight:700;line-height:1;color:var(--red)}
.why h4{margin:0 0 10px;font-size:clamp(16px,2vw,21px);font-weight:900;line-height:1.6;letter-spacing:.04em}
.why p{font-size:14.5px;line-height:1.95}
/* 立ち上げた6事業 */
.track6{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
/* 打合せ#22 各事業に短い説明文を添える（2026-09-09） */
.track6 li{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;background:var(--beige);outline:1px solid var(--line);
font-size:14.5px;font-weight:700;line-height:1.6}
.track6 li > span:last-child{display:grid;gap:6px}
.track6 li em{font-style:normal;font-size:13px;font-weight:500;line-height:1.75;color:rgba(73,56,50,.68)}
.track6__n{flex:none;padding-top:1px;font-family:var(--en);font-size:22px;font-weight:700;line-height:1;
color:var(--red);opacity:.6;min-width:1.8em}
.track6 span{min-width:0}
.hole--now{margin-top:clamp(36px,4vw,56px)}
/* ---------------- メモ反映（2026-08-27 新田さん）で足した部品 ---------------- */
/* ピンク英字ラベルの横に日本語（タイトルのフォーマット統一） */
.lbl{display:inline-flex;align-items:baseline;gap:14px}
.lbl__jp{font-family:var(--jp);font-size:12.5px;font-weight:900;letter-spacing:.16em;color:var(--brown)}
.lbl--rev .lbl__jp{color:rgba(255,255,255,.86)}
.sec--red .lbl__jp{color:#fff}
.sec--beige .lbl__jp{color:var(--brown)}
/* 中央寄せの見出しブロック */
.sec__head--center{grid-template-columns:1fr;justify-items:center;text-align:center}
.sec__head--center .huge{text-align:center}
.sec__head--center .h2{margin-inline:auto}
/* 強調したい一文 */
.prose__key{font-size:clamp(17px,2.1vw,23px);font-weight:700;line-height:1.9;letter-spacing:.03em}
.prose__key b{color:var(--red);font-weight:900}
.sec--brown .prose__key b,.sec--red .prose__key b{color:var(--orange)}
/* ヒーロー：ロゴを外して丸ロゴを大きく（メモ1b・1c）。
※ gap の上書きは 2026-09-15 に撤去。表紙を1画面に収めるため .hero__body 本体に一本化 */
/* ヘッダー：ロゴは形を変えない。縦積みのまま1枚で使う（メモ1a）。
★小さくすると読めないので、ロゴを分解するのではなくヘッダーの高さを上げて収める */
.hd__logoimg{width:auto;height:clamp(66px,6.4vw,84px);display:block}
/* 「とは」：マップを上に全幅、本文を下にゆったり（本文が長くなったため） */
.sec--nopad-t{padding-top:0}
.about__map{margin:0 0 clamp(44px,5vw,76px)}
.about__map img{width:100%;height:auto;display:block}
.about__body{max-width:44em;margin-inline:auto}
.about__body p + p{margin-top:1.8em}
.buddy__body{max-width:46em}
.buddy__body p + p{margin-top:1.6em}
/* メモ2d・2e：引用ボックスの前後の余白 */
.voice + .prose--lead{margin-top:clamp(28px,3.4vw,44px)}
.prose--lead + .subh{margin-top:clamp(56px,6vw,88px)}
.two + .shime{margin-top:clamp(48px,5vw,72px)}
.big-line{margin-top:clamp(48px,5vw,72px)}
/* メモ4b・4c：数字の組の行間 */
.fig dt{line-height:1.8}
.fig>div{gap:6px}
/* ---------------- 23. OSUSO（信用の章。この案件で一番厚くする） ---------------- */
.subh{
margin:clamp(64px,7vw,104px) 0 clamp(24px,3vw,36px);
font-size:clamp(19px,2.2vw,26px);font-weight:900;letter-spacing:.06em;line-height:1.5;
padding-left:20px;border-left:5px solid var(--red);
}
.osuso__intro{align-items:center;margin-bottom:clamp(40px,5vw,64px)}
.osuso__marks{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px)}
.osuso__logo{width:clamp(84px,9vw,132px);height:auto}
.osuso__l100{width:clamp(110px,13vw,186px);height:auto}
/* リーダー100のカード。絵はアーチ型（studio-sakana-kai の受け皿）で敷く */
.l100{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.lc{display:flex;flex-direction:column;padding:24px 24px 28px;outline:1px solid var(--line)}
.lc--a{background:var(--white)}
.lc--b{background:#FDF3E6}
.lc--c{background:#FBF0F1}
.lc__v{margin:0 0 20px;aspect-ratio:16/11;overflow:hidden;border-radius:44% 44% 10px 10px;background:var(--beige)}
.lc__v img{width:100%;height:100%;object-fit:cover;display:block}
.lc__name{font-size:17px;font-weight:900;letter-spacing:.04em;line-height:1.4;margin-bottom:12px}
/* メモ#21 顔をもう少し大きく、顔が中央に来るように（2026-09-09） */
.lc__hd{display:grid;grid-template-columns:58px 1fr auto;align-items:center;column-gap:12px;margin-bottom:16px}
.lc__face{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.lc__who{min-width:0}
.lc__person{font-size:11.5px;line-height:1.55;color:rgba(73,56,50,.72)}
.lc__org{font-size:11px;line-height:1.5;color:rgba(73,56,50,.58)}
/* メモ#20 幅広のロゴが38pxの正方形に押し込まれて小さくなっていた。
比率を保ったまま、縦の中央に置く */
.lc__logo{width:auto;height:30px;max-width:76px;object-fit:contain;object-position:50% 50%;opacity:.9;justify-self:end}
.lc__lead{flex:1;font-size:13.5px;line-height:1.85}
.lc__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.lc__tags > span{font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1;
padding:6px 10px;border-radius:999px;background:rgba(73,56,50,.07);color:rgba(73,56,50,.72)}
/* 賛同パートナーのロゴ壁（1枚画像） */
.pwall{margin:0;background:var(--white);padding:clamp(18px,2.4vw,32px);border-radius:14px}
.pwall img{width:100%;height:auto;display:block}
/* OSUSOの人たち */
.omem{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px) clamp(12px,1.6vw,22px)}
.omem li{text-align:center}
.omem__ph{width:clamp(72px,8vw,108px);aspect-ratio:1;margin:0 auto 14px;border-radius:50%;overflow:hidden;background:var(--white)}
.omem__ph img{width:100%;height:100%;object-fit:cover;display:block}
.omem__ph--none{display:grid;place-items:center;border:1.5px dashed var(--line2)}
.omem__ph--none img{width:52%;height:auto;object-fit:contain}
.omem__nick{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--red);line-height:1.5}
.omem__n{margin:3px 0 4px;font-size:15px;font-weight:900;letter-spacing:.04em;line-height:1.4}
.omem__r{font-size:11px;line-height:1.6;color:rgba(73,56,50,.62)}
.omem__c{margin-top:8px;font-size:11.5px;line-height:1.75;color:rgba(73,56,50,.78)}
.outlink{margin-top:32px;text-align:center}
.outlink a{display:inline-flex;align-items:center;gap:10px;
font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--red);
padding-bottom:6px;border-bottom:1.5px dotted currentColor}
.outlink a:hover{opacity:.75}
/* ---------------- 24. CTA ---------------- */
.cta{text-align:center}
.cta__sub{margin-top:32px;font-size:clamp(15px,1.9vw,19px);font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.9)}
/* ---------------- 25. フォーム ---------------- */
.asks{display:grid;gap:0;margin:48px 0 56px;border-top:1px dashed var(--line2)}
.asks li{position:relative;padding:18px 0 18px 30px;font-size:16px;font-weight:700;border-bottom:1px dashed var(--line2)}
.asks li::before{content:"";position:absolute;left:2px;top:50%;translate:0 -50%;width:11px;height:11px;border-radius:50%;border:2px solid var(--red)}
.form{display:grid;gap:24px}
.form__row{display:grid;gap:10px}
.form__row label{font-size:13.5px;font-weight:700;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.form__row label span{font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--red);padding:3px 8px;border-radius:4px}
.form input,.form textarea{
width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--white);
border:1.5px solid var(--line2);border-radius:8px;padding:14px 16px;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.form__note{font-size:12.5px;color:rgba(73,56,50,.6)}
.btn{
justify-self:start;background:var(--red);color:#fff;border-radius:8px;
padding:18px 56px;font-size:16px;font-weight:700;letter-spacing:.1em;line-height:1;transition:opacity .2s;
}
.btn:hover{opacity:.86}
.form__result{font-size:14px;font-weight:700}
/* ---------------- フッター ---------------- */
.ft{background:var(--brown);color:var(--white);padding:96px 0 56px;text-align:center}
.ft__logo{width:150px;height:auto;margin:0 auto 26px;filter:brightness(0) invert(1) opacity(.94)}
.ft__tag{font-size:clamp(20px,3vw,32px);font-weight:900;letter-spacing:.1em;color:var(--orange)}
.ft__info{display:grid;gap:0;max-width:520px;margin:48px auto 0;border-top:1px dotted rgba(255,255,255,.24)}
.ft__info>div{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:14px 0;text-align:left;border-bottom:1px dotted rgba(255,255,255,.24)}
.ft__info dt{font-size:13px;font-weight:700;letter-spacing:.1em}
.ft__info dd{font-size:14px}
.ft__by{margin-top:44px;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.16em}
.ft__by img{width:92px;height:auto;filter:brightness(0) invert(1) opacity(.9)}
.ft__c{margin-top:22px;font-family:var(--en);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
/* =========================================================
レスポンシブ（★狭い方を後ろに書く）
========================================================= */
@media (max-width:1023px){
:root{--sec:96px;--pad:24px}
.sec__head{grid-template-columns:1fr;gap:14px;margin-bottom:44px}
/* 狭い画面では縦書きラベルを横に倒す（縦のままだと見出しの脇で背が高くなりすぎる） */
.vlabel{writing-mode:horizontal-tb;align-items:center;gap:12px;padding-top:0}
.vlabel__en{writing-mode:horizontal-tb;border-left:0 none;border-bottom:1.5px dotted currentColor;
padding:0 0 6px;letter-spacing:.2em}
.vlabel__jp{letter-spacing:.18em;font-size:14px}
/* 端の縦書きマーキーは狭い画面でも出す。本文の幅を食わないよう細く・薄くして、
本文（.wrap は z-index:1）の下に敷く */
.edge{width:16px}
.edge__run span{font-size:10px;letter-spacing:.2em;padding:18px 0;color:rgba(73,56,50,.2)}
.sec--brown .edge__run span,.sec--red .edge__run span{color:rgba(255,255,255,.22)}
.two,.two--wide{grid-template-columns:1fr;gap:36px}
.cards3{grid-template-columns:1fr;gap:18px}
.circle{grid-template-columns:repeat(2,1fr)}
.tiles{grid-template-columns:1fr}
.tile{min-height:248px;padding:40px 32px 40px 230px}
.tile__ill{position:absolute;left:40px;top:50%;translate:0 -50%;width:150px;max-width:none;margin:0}
.steps{grid-template-columns:repeat(2,1fr)}
.steps__ill{height:120px}
.plancards{grid-template-columns:repeat(2,1fr)}
.buddies{grid-template-columns:repeat(2,1fr)}
.lgc{grid-template-columns:1fr;gap:36px}
.lgc__list>div{grid-template-columns:1fr;gap:4px}
.colors{grid-template-columns:repeat(2,1fr)}
.osuso__intro{gap:32px}
.l100{grid-template-columns:repeat(2,1fr)}
.omem{grid-template-columns:repeat(4,1fr)}
.wheel{grid-template-columns:1fr;padding-bottom:clamp(46px,5vw,64px)}
.wheel__arrow{padding:4px 0}
.wheel__ar{transform:rotate(90deg)}
.wheel__arrow ul{display:flex;justify-content:center;gap:10px}
.give{grid-template-columns:1fr}
.track{grid-template-columns:repeat(2,1fr)}
.track6{grid-template-columns:repeat(2,1fr)}
.ba{grid-template-columns:1fr}
.ba__ar{justify-self:center;transform:rotate(90deg)}
.road{grid-template-columns:repeat(2,1fr)}
.about__box{position:static;width:auto;margin:-40px 24px 0;padding:34px 26px}
.drawer__list{grid-template-columns:1fr}
}
@media (max-width:767px){
:root{--sec:84px;--pad:20px}
/* ★PC用に入れた改行位置は、狭い画面では途中で切れて読みにくい。素直に流す */
.h2 br,.big-line br,.shime br,.turn__sub br,.cta__sub br,.prose br,.sub br,.mirai br,.hole__b br{display:none}
body{font-size:15.5px;line-height:1.95}
.hd{padding:12px 16px}
.hd__name b{display:none}
.hd__menu{padding:10px 18px 10px 15px}
.hero{padding:118px 20px 86px}
.hero__body{width:100%}
.hero__ringwrap{--ring:min(86vw,360px)}
.hero__circle{width:78%}
.hero__pills{max-width:100%}
.hero__scroll{width:76px;height:76px;right:12px;bottom:16px}
.hero__scroll svg{width:76px;height:76px}
.num{font-size:52px}
.ayumi li{grid-template-columns:88px 1fr;gap:16px;padding:18px 0}
.ayumi__y{font-size:24px}
.hole{padding:26px 22px}
.stats{grid-template-columns:1fr;gap:26px;margin-top:52px}
.circle{grid-template-columns:1fr}
.circle li{min-height:0;padding:28px 24px 30px}
/* ★絵を絶対配置のままにすると、タイルの高さに反映されず文字に被る（実測 390/720px で発生）。
狭い画面では文章と同じ流れに置いて、タイルの高さを絵に合わせる */
.tile{min-height:0;padding:76px 24px 88px 24px;justify-content:flex-start}
.tile .num{left:24px;top:22px;font-size:48px}
.tile__ill{position:static;translate:none;width:100%;max-width:230px;margin:0 auto 22px}
.tile__go{right:22px;bottom:26px;width:40px;height:40px}
.chap__head{grid-template-columns:1fr;gap:14px}
.acts li{font-size:15.5px}
.acts__ic{width:46px;height:46px;margin-right:14px;padding:7px}
.steps{grid-template-columns:1fr}
.steps__ill{height:110px;max-width:120px}
.plancards{grid-template-columns:1fr}
.plancard__hd{gap:4px 12px}
.buddies{grid-template-columns:1fr 1fr}
.colors{grid-template-columns:1fr}
.l100{grid-template-columns:1fr}
.omem{grid-template-columns:repeat(2,1fr)}
.story > li{grid-template-columns:auto 48px 1fr;column-gap:12px;padding:20px 2px}
.story > li > .story__ic{width:48px;height:48px;padding:9px}
.story > li > .story__n{font-size:16px;padding-top:8px}
.track{grid-template-columns:1fr}
.track6{grid-template-columns:1fr}
.why li{grid-template-columns:1fr;gap:8px}
.road{grid-template-columns:1fr}
.future li{grid-template-columns:1fr;gap:10px}
.kyo{grid-template-columns:1fr}
.bcard__i{grid-template-columns:1fr;justify-items:center;text-align:center}
.bcard__tags{justify-content:center}
.media li{grid-template-columns:1fr;gap:2px}
.subh{padding-left:14px;border-left-width:4px}
.osuso__marks{gap:18px}
.okane{grid-template-columns:1fr;gap:16px}
.boshu{padding:44px 22px}
.form input,.form textarea{font-size:16px}
.btn{justify-self:stretch;text-align:center;padding:18px 24px}
.ft__info>div{grid-template-columns:80px 1fr;gap:12px}
}
/* ★水沼さんの判断（2026-08-27）：端末の「動きを減らす（視差効果を減らす）」設定に
関わらず、装飾のアニメーションは動かす。
経緯: 実機（iPhone iOS 18.7）でこの設定がONで、演出が一切見えず、
先方に見せる前の確認もできない状態だった。診断パネルで原因を確定させたうえでの判断。
★ただしスクロールの慣性だけは設定を尊重する（画面が勝手に滑るのは酔いに直結するため）。
★この節を戻したいときは、下の1行を
`.marquee__row,.hero__scroll svg,.hero__arc,.edge__run{animation:none}` に戻すだけでよい。 */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
/* =========================================================
修正メモ（?memo=1 のときだけ出る）
グリーンフォー（MEGURINOWA）の実装をそのまま移植。
★中身は変更しない。案件ごとの色差はここの別名変数で吸収する。
========================================================= */
:root{
--sumi:var(--brown);
--sumi-45:rgba(73,56,50,.45);
--sumi-70:rgba(73,56,50,.70);
--kinari:var(--beige);
--kinari-2:#EFE7DB;
--kinari-3:#FBF6EE;
--matsuri:var(--red);
--mori:#3E7A5A;
--hikari:var(--orange);
--ye:#F0D45E; /* 本文に刺す「＋」と付箋の黄色（green4から移植） */
--font-mono:var(--en);
--measure:44em;
--hd-h:64px;
}
/* ---------- 修正メモ（?memo=1 のときだけ出る。本番URLには出ない） ----------
★貼ったメモはセクションに残り、常に見える（付箋方式）。
「都度送るだけだと何を送ったか分からない」（2026-08-19 水沼さん）への作り直し。
LPの本文と混ざらないよう、破線＋祭の赤で「これは道具」と分かる見た目にする */
.memo{margin:0 0 30px;max-width:var(--measure)}
.memo__l{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.memo__l:empty{display:none}
.memo__i{padding:14px 16px;background:#FFF9E3;border:2px solid var(--hikari);border-radius:2px;
box-shadow:0 6px 14px -10px rgba(37,41,35,.55)}
.memo__i.is-done{background:var(--kinari-2);border-color:var(--sumi-45);opacity:.7}
.memo__top{display:flex;align-items:baseline;gap:10px}
.memo__by{font-size:.75rem;font-weight:900;color:var(--sumi)}
.memo__at{font-family:var(--font-mono);font-size:.625rem;color:var(--sumi-45)}
.memo__bd{margin:7px 0 0;font-size:.875rem;line-height:1.75;color:var(--sumi);white-space:pre-wrap}
.memo__i.is-done .memo__bd{text-decoration:line-through;color:var(--sumi-70)}
.memo__acts{display:flex;align-items:center;gap:14px;margin-top:10px}
.memo__st{font-family:inherit;font-size:.625rem;font-weight:700;padding:3px 10px;
border:0;border-radius:999px;background:var(--matsuri);color:#fff;cursor:pointer}
.memo__i.is-done .memo__st{background:var(--mori)}
.memo__st:disabled{opacity:.6;cursor:wait}
.memo__lnk{background:none;border:0;padding:0;font-family:inherit;font-size:.6875rem;
font-weight:700;color:var(--sumi-45);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.memo__lnk:hover{color:var(--matsuri)}
.memo__add{margin-top:10px;padding:7px 14px;background:transparent;
border:2px dashed var(--matsuri);border-radius:2px;
font-family:inherit;font-size:.75rem;font-weight:700;color:var(--matsuri);cursor:pointer}
.memo__add:hover{background:var(--matsuri);color:#fff;border-style:solid}
.memo__f{margin-top:10px;padding:16px;background:var(--kinari-3);
border:2px solid var(--matsuri);border-radius:2px}
.memo__who,.memo__t,.memo__edit{width:100%;padding:9px 11px;font-family:inherit;font-size:.875rem;
color:var(--sumi);background:#fff;border:2px solid var(--sumi);border-radius:2px}
.memo__t,.memo__edit{margin-top:9px;line-height:1.7;resize:vertical}
.memo__edit{margin:8px 0 0}
.memo__row{display:flex;gap:10px;margin-top:10px}
.memo__s{padding:9px 22px;background:var(--matsuri);color:#fff;border:2px solid var(--sumi);
border-radius:2px;font-family:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}
.memo__s:disabled{opacity:.55;cursor:not-allowed}
.memo__c{padding:9px 18px;background:transparent;color:var(--sumi-70);border:2px solid var(--sumi-45);
border-radius:2px;font-family:inherit;font-size:.8125rem;font-weight:700;cursor:pointer}
.memo__msg{margin:9px 0 0;font-size:.75rem;font-weight:700;color:var(--sumi-70)}
.memo__msg.is-ng{color:var(--matsuri)}
/* 画面下の一覧 */
.memobar{position:fixed;left:14px;bottom:14px;z-index:130; /* 欄を開いた節(z:120)より上・欄そのもの(z:200)より下（2026-09-18） */width:min(360px,calc(100vw - 28px));
background:var(--sumi);border-radius:6px;overflow:hidden;
box-shadow:0 16px 30px -16px rgba(0,0,0,.6)}
.memobar__b{display:block;width:100%;padding:11px 16px;background:none;border:0;
font-family:inherit;font-size:.8125rem;font-weight:700;color:#fff;text-align:left;cursor:pointer}
.memobar__l{max-height:44vh;overflow-y:auto;border-top:1px solid rgba(255,255,255,.2)}
.memobar__row{display:grid;gap:2px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.memobar__row.is-done{opacity:.5}
.memobar__sec{font-size:.625rem;font-weight:700;color:var(--hikari)}
.memobar__tx{font-size:.75rem;line-height:1.6;color:rgba(255,255,255,.9);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.memobar__e{margin:0;padding:12px 16px;font-size:.75rem;color:rgba(255,255,255,.6)}
@media (max-width:767px){
.memobar{left:10px;bottom:74px;width:calc(100vw - 20px)}
}
/* サイト全体へのメモ（ヒーローの直下）。セクションのメモと区別がつくよう帯にする */
.memoall{background:var(--sumi);padding:26px 0 30px;border-bottom:3px solid var(--sumi)}
.memoall .memo{margin:0;max-width:none}
.memo__ttl{margin:0 0 14px;font-size:.8125rem;font-weight:700;line-height:1.7;color:var(--hikari)}
.memoall .memo__add{border-color:var(--hikari);color:var(--hikari)}
.memoall .memo__add:hover{background:var(--hikari);color:var(--sumi)}
.memoall .memo__l{max-width:var(--measure)}
.memoall .memo__f{max-width:var(--measure);border-color:var(--hikari)}
/* 左下パネルから「サイト全体」を直接貼る（下の方で思いついても戻らなくていいように） */
.memobar__add{display:block;width:100%;padding:9px 16px;
background:rgba(255,255,255,.08);border:0;border-top:1px solid rgba(255,255,255,.2);
font-family:inherit;font-size:.75rem;font-weight:700;color:var(--hikari);
text-align:left;cursor:pointer}
.memobar__add:hover{background:rgba(255,255,255,.16)}
.memobar__f{padding:14px 16px;border-top:1px solid rgba(255,255,255,.2)}
.memobar__f .memo__t{margin-top:9px}
.memobar__f .memo__msg{color:rgba(255,255,255,.75)}
.memobar__f .memo__msg.is-ok{color:var(--hikari)}
.memobar__f .memo__msg.is-ng{color:#FFB3A7}
.memobar__f .memo__c{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.4)}
/* ★メモモード中は下部の固定CTAを出さない。メモパネルと重なるうえ、
レビュー中に「参画を相談する」は不要（2026-08-19 実測で8px重なっていた） */
.memo-on .spbar{display:none}
/* ★書いている間だけパネルを上に寄せる。下のままだとスマホのキーボードで入力欄が隠れる */
@media (max-width:767px){
.memobar{bottom:14px}
.memobar.is-writing{top:calc(var(--hd-h) + 10px);bottom:auto}
.memobar.is-writing .memobar__l{max-height:30vh}
}
/* 対応した内容（Claudeが記入）。指示のすぐ下に並べて、突き合わせられるようにする */
.memo__note{margin:8px 0 0;padding:8px 11px;background:rgba(35,75,58,.09);
border-left:3px solid var(--mori);border-radius:2px;
font-size:.8125rem;line-height:1.7;color:var(--mori);white-space:pre-wrap}
.memo__i.is-done .memo__note{color:var(--mori);text-decoration:none}
/* 行き場のないメモ（セクションを消した／まだ作っていない場所へのメモ）。消さずに必ず出す */
.memo--lost{margin-top:22px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.35)}
.memo__from{font-size:.625rem;font-weight:700;color:var(--matsuri);
padding:1px 7px;border:1px solid var(--matsuri);border-radius:999px}
/* ── 対応済みメモの折りたたみ ─────────────────────────
★.memo__l に display:grid を当てているので、hidden 属性だけでは消えない
（要素側の display が UA の [hidden]{display:none} に勝つ）。明示的に消す。 */
.memo__l[hidden],.memo__fold[hidden]{display:none}
.memo__l--done{margin-top:10px}
.memo__fold{margin-top:10px;position:relative;padding:6px 12px 6px 26px;
background:transparent;border:1px dashed var(--sumi-45);border-radius:2px;
font-family:inherit;font-size:.6875rem;font-weight:700;color:var(--sumi-70);cursor:pointer}
.memo__fold:hover{border-style:solid;color:var(--sumi)}
.memo__fold::before{content:"";position:absolute;left:12px;top:50%;width:0;height:0;
border:4px solid transparent;border-left-color:currentColor;transform:translateY(-50%)}
.memo__fold[aria-expanded="true"]::before{border-left-color:transparent;
border-top-color:currentColor;transform:translate(-2px,-30%)}
.memoall .memo__fold{border-color:var(--hikari);color:var(--hikari)}
/* 1つのメモの中で、もう終わった行だけに線を入れる（メモ全体はまだ未対応でも進み具合が分かる） */
.memo__ln.is-x{text-decoration:line-through;text-decoration-thickness:1px;color:var(--sumi-45)}
.memo__i.is-done .memo__ln.is-x{text-decoration:line-through}
/* 画面下の一覧の見出し（未対応／対応済みの区切り） */
.memobar__h{position:sticky;top:0;z-index:1;margin:0;padding:9px 16px;
background:#1B1F1A;border-bottom:1px solid rgba(255,255,255,.16);
font-size:.6875rem;font-weight:900;letter-spacing:.08em;color:var(--hikari)}
.memobar__h.is-done{color:rgba(255,255,255,.45)}
/* メモ欄の受け皿。グリッド/フレックスの .wrap に差し込んでも列を消費しないようにする
（turn セクションでイラストが次の行へ押し出されていた。2026-08-21） */
.memohold{grid-column:1 / -1;flex-basis:100%;width:100%}
.memohold:empty{display:none}
/* メモモードへの入口（通常URLの右下）。控えめに置き、押したときだけはっきりさせる */
.memoenter{position:fixed;left:14px;bottom:14px;z-index:75;
padding:9px 15px;border:2px solid var(--sumi);border-radius:2px;
background:color-mix(in srgb,var(--kinari) 92%,transparent);
font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--sumi);
text-decoration:none;box-shadow:0 2px 0 var(--sumi);
transition:background .16s ease,color .16s ease}
.memoenter:hover{background:var(--sumi);color:var(--kinari)}
@media (max-width:767px){
/* 画面下の固定CTAバーと重なるので、その上へ逃がす */
.memoenter{left:12px;bottom:calc(94px + env(safe-area-inset-bottom));
padding:7px 12px;font-size:.6875rem}
}
/* メモモードを抜ける口（左下パネルの最下段）。貼る操作より目立たせない */
.memobar__exit{display:block;padding:9px 16px;
background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.2);
font-size:.6875rem;font-weight:700;color:rgba(255,255,255,.62);
text-decoration:none;transition:background .16s ease,color .16s ease}
.memobar__exit:hover{background:rgba(255,255,255,.14);color:#fff}
/* ---------- 本文のその場に刺すメモ（green4 lp-c から移植・2026-09-03） ----------
セクションが長いと、メモを書くたびに節の頭まで戻ることになっていた。
本文の文にカーソルを当てて、その場に「＋」で刺せるようにする。 */
.memo-on .memo-can{position:relative;cursor:pointer} /* 文章そのものを押しても貼れる（2026-09-18） */
/* カーソルを当てた文だけ、うっすら黄色く光らせる */
.memo-on .memo-can:hover{
background:rgba(239,214,99,.22);
box-shadow:0 0 0 4px rgba(239,214,99,.22);
border-radius:3px;
}
/* 「＋」ボタン。ふだんは出さず、その文にカーソルが乗ったときだけ出す */
.memoadd{
position:absolute;top:-6px;right:-30px;z-index:20;
width:24px;height:24px;padding:0;border:0;border-radius:50%;
background:var(--ye);color:var(--sumi);
font-family:inherit;font-size:.875rem;font-weight:700;line-height:24px;
cursor:pointer;opacity:0;transition:opacity .12s;
box-shadow:0 2px 8px -2px rgba(37,41,35,.5);
}
.memo-on .memo-can:hover > .memoadd,.memoadd:focus{opacity:1}
/* ★狭い画面だけの指定。囲みの @media ごと移すこと。
これを素で置くと、PCでも「＋」が常時表示になる（移植時に実際にそうなった） */
@media (max-width:1023px){
/* 狭い画面では外に出す余白が無いので、右上に重ねる */
.memoadd{right:-4px;top:-10px;opacity:1}
.memopin{right:-2px;top:-12px}
}
/* その場に開くメモ入力 */
.memospot{
position:absolute;z-index:60;top:100%;right:0;width:min(340px,86vw);
margin-top:8px;padding:14px 16px 16px;
background:var(--sumi);border-radius:10px;
box-shadow:0 18px 40px -18px rgba(37,41,35,.7);
text-align:left;
}
.memospot__q{
margin:0 0 10px;font-size:.6875rem;line-height:1.6;color:var(--ye);
font-weight:700;
}
.memospot .memo__t{width:100%}
.memospot .memo__msg{color:rgba(255,255,255,.8)}
/* ★「やめる」が見えなくなっていた（2026-09-03 水沼さん指摘）。
.memo__c は明るい地の上で使う想定で 文字も枠も var(--sumi) 系。
この入力欄は地が var(--sumi) そのものなので、同じ色で塗り潰されて消える。
下の暗い操作バー（.memobar__f）と同じく、白抜きに直す。 */
.memospot .memo__c{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.42)}
.memospot .memo__c:hover{color:#fff;border-color:rgba(255,255,255,.72)}
/* ピン（本文の右肩に付く番号） */
.memopin{position:absolute;top:-8px;right:-30px;z-index:19;display:flex;gap:3px}
.memopin__d{
width:22px;height:22px;padding:0;border:0;border-radius:50%;
background:var(--matsuri);color:#fff;
font-family:inherit;font-size:.6875rem;font-weight:700;line-height:22px;
cursor:pointer;box-shadow:0 2px 8px -2px rgba(37,41,35,.5);
}
.memopin__d.is-done{background:var(--mori)}
.memo-has{position:relative}
/* ピンを押すと出る吹き出し */
.memopop{
position:absolute;z-index:61;top:26px;right:0;width:min(320px,84vw);
padding:13px 15px 14px;background:var(--sumi);border-radius:10px;
box-shadow:0 18px 40px -18px rgba(37,41,35,.7);text-align:left;
}
.memopop__top{display:flex;gap:10px;align-items:baseline;
font-size:.6875rem;color:rgba(255,255,255,.6)}
.memopop__top b{color:var(--hikari);font-size:.75rem}
.memopop__bd{margin:8px 0 10px;font-size:.8125rem;line-height:1.8;
color:#fff;white-space:pre-wrap}
.memopop__st{
padding:5px 12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;
background:none;font-family:inherit;font-size:.6875rem;color:#fff;cursor:pointer;
}
.memopop__st:hover{background:rgba(255,255,255,.14)}
/* 一覧の側：ピン番号と、どの文に貼ったか */
.memo__pin{
display:inline-block;min-width:18px;height:18px;border-radius:50%;
background:var(--matsuri);color:#fff;text-align:center;
font-size:.625rem;font-weight:700;line-height:18px;margin-right:6px;
}
.memo__i.is-done .memo__pin{background:var(--mori)}
.memo__q{
margin:0 0 6px;padding-left:8px;border-left:2px solid var(--hikari);
font-size:.6875rem;line-height:1.6;color:var(--sumi-45);
}
/* ================================================================
モーション（studio-sakana-kai 完全解剖 → 移植）
解剖シート: ../_解剖/studio-sakana-kai_完全解剖.md
向こうは GSAP も Lenis も使っていない。実体は下の3つだけ。
================================================================ */
/* ---- ① 現れる（38要素中の主役。移植の本体） ----
実測値そのまま。duration 600ms / delay 300ms / easeInOutSine。
移動距離を欲張らないのが上品さの理由（向こうは opacity だけの箇所も多い）。
--rvd は app.js が兄弟に振る段差。 */
.rv{
opacity:0;
transform:translateY(34px);
transition-property:opacity,transform;
transition-duration:600ms;
transition-timing-function:cubic-bezier(.445,.05,.55,.95);
transition-delay:calc(300ms + var(--rvd,0ms));
}
.rv.is-in{opacity:1;transform:none}
/* ---- ② スクロール駆動（向こうは3箇所だけ。見せ場に限定する） ----
CSSだけでスクロール量に連動する。JSは無い。
★Chrome 115+ / Safari 26+ のみ。2026-08-27 に「iPhone実機で動かない」事故を
起こしているので、必ず @supports で囲い、非対応端末では
「何も起きないが成立する」状態にしておく。主役は必ず①に置く。 */
@keyframes rise-in{
0% {scale:.72;translate:0 96px}
45% {scale:1; translate:0}
100%{scale:1; translate:0}
}
@keyframes rise-soft{
0% {scale:.86;translate:0 56px}
50% {scale:1; translate:0}
100%{scale:1; translate:0}
}
@keyframes map-push{
0% {scale:1.5}
100%{scale:1}
}
/* 余白に置いた浮遊イラストは、地の速度とずらして流す（視差）。
スクロールしている間ずっと動くので、ページ全体が生きて見える。 */
@keyframes float-by{
0% {translate:0 46px}
100%{translate:0 -46px}
}
@supports (animation-timeline:view()){
/* ★スマホでも動かす。PC限定にすると、水沼さんが実機で見たときに
「また動いていない」になる（2026-08-27 と同じ形の事故）。
絵は枠で切ってあるので、幅が狭くてもレイアウトは崩れない。 */
/* 世界観マップ：通り過ぎながら引く（向こうの sd-11 と同じ考え方。
ただし scale:3 まで膨らませると崩れるので、枠で切って穏やかに）
★overflow は必ず clip。hidden にすると「スクロール容器」が生まれ、
view() の基準がその容器になって進行が止まる（実測で確認）。
向こうが画像枠に overflow:clip を使っているのはこの理由。 */
.about__map{overflow:clip}
.about__map>img{
animation:map-push both;
animation-timeline:view();
animation-range:entry cover 65%;
}
/* 大きい絵：下から浮き上がって原寸へ（向こうの sd-18）。
★45%で完成させ、以降は静止させる＝動きっぱなしにしないのが向こうの巧さ。
★実測して詰めた値。entry 10% だと画面のいちばん下で上がり切ってしまい、
見えたときには終わっている。40%〜60%で「見える位置で上がる」 */
.boshucircle,.buddyline{
animation:rise-in both;
animation-timeline:view();
animation-range:entry 40% cover 60%;
}
/* 並ぶ絵：同じ動きを弱めて。位置が1つずつ違うので自然に段差がつく。
★背の低い要素は entry 指定がほとんど効かない（entry の幅＝要素の高さのため）。
実測すると画面のいちばん下で上がり切っていた。背が低いものは cover で指定する。 */
.road__ill,.steps__ill,.plancard__ill{
animation:rise-soft both;
animation-timeline:view();
animation-range:cover 10% cover 50%;
}
/* 浮遊イラスト：視差。余白に置いた飾りなので PC のみ。
★.tile__ill には当てない（ホバーの scale と食い合うため） */
@media (min-width:721px){
.fl{
animation:float-by both;
animation-timeline:view();
animation-range:cover;
}
}
}
/* ---- ③ カードが開く（studio-sakana-kai の card と同じ動き） ----
向こうは「色の面＋白いアーチ＋切り抜き写真」→ ホバーで
**アーチが card いっぱいに開いて全面写真になり、文字が反転する**。
★実測: 写真 opacity .19→1 ／ 覆いの色面 1→0 ／ 文字 黒→白 ／ 0.3s。
★カード自体は動かさない。動かすのは「面」だけ。
HAGAIは写真でなくイラストなので、
「白いアーチが四隅まで開いて面が入れ替わり、文字がカードの色へ反転」に置き換えた。 */
.tile{isolation:isolate}
.tile__arch{
position:absolute;z-index:0;
left:7%;right:7%;top:11%;bottom:31%;
background:var(--white);border-radius:52% 52% 10px 10px;
transition:left .55s cubic-bezier(.4,.4,0,1),right .55s cubic-bezier(.4,.4,0,1),
top .55s cubic-bezier(.4,.4,0,1),bottom .55s cubic-bezier(.4,.4,0,1),
border-radius .55s cubic-bezier(.4,.4,0,1);
}
.tile:hover .tile__arch,
.tile:focus-visible .tile__arch{left:0;right:0;top:0;bottom:0;border-radius:0}
/* ★開いたら「別の絵」に変わる（参考サイトの驚きの正体）。
向こうは 切り抜きポートレート → 全面の別カット写真。
うちは 閉=いまの状態の絵／開=第3の家族が生まれたあとの絵、に入れ替える。
2枚を重ねて重ね替えるだけ。縦横比が違うので入れ物を正方形に固定する。 */
.tile__illbox{position:relative;z-index:1;aspect-ratio:1}
.tile__ill{width:100%;height:100%;object-fit:contain;
transition:opacity .5s cubic-bezier(.4,.4,0,1),scale .55s cubic-bezier(.4,.4,0,1)}
.tile__ill--b{position:absolute;inset:0;opacity:0}
.tile:hover .tile__ill--a,.tile:focus-visible .tile__ill--a{opacity:0;scale:1.12}
.tile:hover .tile__ill--b,.tile:focus-visible .tile__ill--b{opacity:1;scale:1.12}
/* ★開くと地が白になるので、文字は白のままだと読めない。カードの色へ反転させる */
.tile--red{--on:var(--red)}
.tile--orange{--on:#C0781A}
.tile--pink{--on:#C0667A}
.tile__lead,.tile__ttl{position:relative;z-index:2}
.tile__go{z-index:2}
.tile__lead,.tile__ttl,.tile__go,.tile .num{
transition:color .55s cubic-bezier(.4,.4,0,1),transform .35s cubic-bezier(.4,.4,0,1),opacity .55s;
}
.tile:hover .tile__lead,.tile:hover .tile__ttl,.tile:hover .tile__go,
.tile:focus-visible .tile__lead,.tile:focus-visible .tile__ttl,.tile:focus-visible .tile__go{color:var(--on)}
.tile:hover .num,.tile:focus-visible .num{color:var(--on);opacity:.3}
.tile:hover .tile__go,.tile:focus-visible .tile__go{transform:translateX(8px)}
/* ★タッチ端末はホバーが無い。開いた状態は「面が白」なので常時それだと
カードの色が消えてしまう。閉じたまま（アーチのある状態）を既定にする。 */
@media (hover:none){
/* ★2枚重ねにしたので .tile__ill をまとめて opacity:1 にすると
閉じた絵と開いた絵が二重に見える（新田さんメモ#11「ダブルで被ってる」）。
タッチ端末では「開いた絵」だけを出す。 */
.tile__ill--a{opacity:0}
.tile__ill--b{opacity:1}
}
/* ---- ④ ヒーローの円がスクロールで大きくなる ----
向こうのいちばんの見せ場（sd-11: scale .3 → 1 → 3 で画面を埋める）。
HAGAIは円が最初から主役なので、原寸から始めて 2.4倍まで開く。
★view() ではなく scroll() を使う。ヒーローは読み込み時点で画面に入っており、
view() だと開始位置が「もう途中」になって、最初から大きい状態で出てしまう。 */
@keyframes hero-zoom{0%{scale:1}100%{scale:2.4}}
@keyframes hero-fade{0%{opacity:1}100%{opacity:0}}
@supports (animation-timeline:view()){
.hero__ring{
animation:hero-zoom both;
animation-timeline:scroll(root block);
animation-range:0 96vh;
}
/* 円が広がると下の文が隠れるので、広がるのに合わせて先に引く */
.hero__lead,.hero__pills{
animation:hero-fade both;
animation-timeline:scroll(root block);
animation-range:12vh 52vh;
}
}
/* ================================================================
大袈裟にする（studio-sakana-kai の「見せ場」をもう一段）
向こうの大袈裟さの正体は3つ：
・巨大タイポが画面を横切る
・sticky で貼り付けたまま拡大する（ヒーローで実装済み）
・カードを余白ゼロで詰め、番号を巨大にする
================================================================ */
/* ---- 巨大タイポ（このLPに15個ある）が、通り過ぎながら横に流れる ----
1個ずつでは地味だが、15個すべてが動くとページ全体の体感が変わる。
節は overflow-x:clip なので、画面の端で切れて「文字が走り抜ける」ように見える。 */
@keyframes huge-drift{
0% {translate:-13% 0}
100%{translate:9% 0}
}
/* ---- 大きい数字は、通り過ぎながら立ち上がる ---- */
@keyframes num-pop{
0% {scale:.44;opacity:0}
60% {scale:1; opacity:1}
100%{scale:1; opacity:1}
}
/* ---- タイルの絵が下から飛び込む（ホバーの「開く」とは別の動き） ---- */
@keyframes tile-fly{
0% {scale:.5;translate:0 84px;opacity:0}
55% {scale:1; translate:0; opacity:1}
100%{scale:1; translate:0; opacity:1}
}
/* ---- 章の扉の巨大英字は、逆向きに流す（同じ向きだと単調になる） ---- */
@keyframes huge-drift-rev{
0% {translate:11% 0}
100%{translate:-8% 0}
}
@supports (animation-timeline:view()){
.huge{
animation:huge-drift both;
animation-timeline:view();
animation-range:cover;
}
.chap .huge--out{animation-name:huge-drift-rev}
.stat__n,.boshu__n{
transform-origin:50% 62%;
animation:num-pop both;
animation-timeline:view();
animation-range:cover 12% cover 48%;
}
/* ★入れ物側で動かす。絵そのもの（.tile__ill）はホバーの「開く」が使うので、
同じ要素に animation を当てると transition が負けて開かなくなる。 */
.tile__illbox{
animation:tile-fly both;
animation-timeline:view();
animation-range:cover 8% cover 46%;
}
}
/* ================================================================
世界観マップ：スクロールで3つの家庭に寄る
2026-08-31 打合せ「動いていった時に、真ん中のやつにフォントがバッて
上がっていって、いろんな家族があるよみたいな見せ方が欲しい」への回答。
マップの3軒はそれぞれ 中央=家族 / 左の工房=挑戦 / 右の縁側=実家 に対応。
================================================================ */
/* 非対応ブラウザでは「大きな1枚絵」として成立する（貼り付きも寄りも起きないだけ） */
.focus{position:relative}
.focus__stage{
position:relative;display:grid;place-items:center;overflow:clip;background:var(--beige);
}
.focus__map{width:100%;height:auto;max-width:none}
.focus__caps{position:absolute;left:0;right:0;bottom:clamp(30px,6vh,84px);
display:grid;place-items:center;pointer-events:none;padding-inline:20px}
.focus__cap{
grid-area:1/1;opacity:0;text-align:center;
background:rgba(252,250,247,.93);border-radius:14px;
padding:clamp(16px,2.2vw,26px) clamp(24px,4vw,52px);
box-shadow:0 10px 34px rgba(73,56,50,.14);
}
.focus__cap span{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--red)}
.focus__cap b{display:block;margin-top:8px;font-size:clamp(18px,2.6vw,32px);font-weight:900;
letter-spacing:.04em;line-height:1.5;color:var(--brown)}
@supports (animation-timeline:view()){
/* 舞台を画面に貼り付け、その手前で長くスクロールさせる＝寄りの時間を作る */
.focus{height:430vh;view-timeline-name:--focus;view-timeline-axis:block}
.focus__stage{position:sticky;top:0;height:100svh}
/* ★絵の箱そのものを画面より大きくする。object-fit は使わない。
使うと「絵の中の座標」と「要素の中の座標」がずれて、寄り先が合わなくなる。
1.794 = 2000 / 1115（マップの縦横比） */
.focus__map{width:max(100%,calc(100svh * 1.794))}
/* ★スマホは「高さを埋める」をやめる。埋めると絵が3482px幅になり、
寄ったとき家が画面に収まらない（実測）。幅に合わせれば、寄りの見え方は
PCと同じ割合になる（家が画面幅の約6割）。 */
@media (max-width:720px){
.focus__map{width:100%}
}
.focus__map{animation:focus-tour both;animation-timeline:--focus;animation-range:contain}
.focus__cap{animation-timeline:--focus;animation-range:contain;animation-fill-mode:both}
.focus__cap--0{animation-name:cap0}
.focus__cap--1{animation-name:cap1}
.focus__cap--2{animation-name:cap2}
.focus__cap--3{animation-name:cap3}
}
/* 寄り先の座標は、マップ上の家の位置から計算している。
ある点(px,py)を画面中央へ持ってくる移動量 = (0.5 - px) * 100 * 倍率 [%]
中央の家 px .490 py .520 → translate 2.3% / -4.6%
左の工房 px .238 py .574 → translate 60.4% / -17.0%
右の縁側 px .790 py .610 → translate -66.7% / -25.3% （倍率2.3） */
@keyframes focus-tour{
0% {scale:1; translate:0 0}
14% {scale:1; translate:0 0}
30% {scale:2.3; translate:2.3% -4.6%}
44% {scale:2.3; translate:2.3% -4.6%}
58% {scale:2.3; translate:60.4% -17%}
70% {scale:2.3; translate:60.4% -17%}
84% {scale:2.3; translate:-66.7% -25.3%}
94% {scale:2.3; translate:-66.7% -25.3%}
100% {scale:1; translate:0 0}
}
/* ★文字は「バッて上がって」出る（打合せの言葉どおり） */
/* ★見出しは「重ねて」入れ替える。前が消えてから次が出る組み方だと、
その合間が無地になる。実測で全体の29%が空白で、とくに拡大している最中
（15〜25%）が丸ごと消えていた＝「拡大されるだけで文字が出てこない」の正体。
前が薄くなる区間と次が濃くなる区間を重ね、どの瞬間も濃さ0.5以上を保つ。 */
@keyframes cap0{0%,16%{opacity:1;translate:0 0} 28%,100%{opacity:0;translate:0 -10px}}
@keyframes cap1{0%,18%{opacity:0;translate:0 24px} 28%,48%{opacity:1;translate:0 0} 58%,100%{opacity:0;translate:0 -10px}}
@keyframes cap2{0%,48%{opacity:0;translate:0 24px} 58%,72%{opacity:1;translate:0 0} 82%,100%{opacity:0;translate:0 -10px}}
@keyframes cap3{0%,72%{opacity:0;translate:0 24px} 82%,100%{opacity:1;translate:0 0}}
/* ================================================================
散らばった要素が、スクロールで町へ組み上がる
新田さんメモ「第3の家族の要素がイラストで散らばっていて、
スクロールするにつれてパーツが組み合わさり、世界観が完成する」への回答。
部品はマップ本体からの切り出し＝画風は完全に一致する。
================================================================ */
/* ★輪そのものに重ねる。表紙セクション全体に重ねると、輪は上下に振られているぶん
中心がずれ、上の部品だけ円周の文字と当たる（2026-09-09 実測）。
はみ出しは .hero の overflow:clip が受け持つ。 */
.asm{position:absolute;inset:0;z-index:0;pointer-events:none}
.asm__p{
/* 部品の大きさは輪に比例させる。画面が低くて輪が小さくなったとき、部品だけ大きいままだと見出しに当たる */
--s:clamp(56px,calc(var(--ring) * 0.16),112px);
position:absolute;left:50%;top:50%;
width:var(--s);height:var(--s);
margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) / -2);
border-radius:50%;border:3px solid var(--white);object-fit:cover;
box-shadow:0 12px 28px rgba(73,56,50,.18);
}
/* ★散らす位置は「円の大きさから計算」する。vw/vh で決め打ちすると、
幅によって円周の文字（家族が、広がる。）と当たる。実測で10幅中8幅で被っていた。
--ring … 輪の直径（.hero__ringwrap から受け継ぐ）
--R … 中心から部品の中心までの距離
円周の文字の外側は だいたい 輪の0.50倍。そこに部品の半径と余白を足す
角度は真下（リード文がある側）を避けて配る。三角関数は使わず、単位ベクトルを直接書く。 */
.asm__p{--R:calc(var(--ring) * 0.52 + var(--s) / 2 + 16px)}
/* 真上・真下は表紙の文字（第3の家族プロジェクト／シングルマザー家庭に、）の通り道。
斜め45度の四隅に置く。この4つはスマホでも出す */
.asm__p--1{--x:calc(var(--R) * -0.707);--y:calc(var(--R) * -0.707)} /* 左上 */
.asm__p--2{--x:calc(var(--R) * 0.707);--y:calc(var(--R) * -0.707)} /* 右上 */
.asm__p--5{--x:calc(var(--R) * -0.707);--y:calc(var(--R) * 0.707)} /* 左下 */
.asm__p--6{--x:calc(var(--R) * 0.707);--y:calc(var(--R) * 0.707)} /* 右下 */
/* 横寄りの4つ。左右に余白のある広い画面だけ出す（下の @media 参照） */
.asm__p--3{--x:calc(var(--R) * -0.966);--y:calc(var(--R) * -0.259)} /* 左上外 */
.asm__p--4{--x:calc(var(--R) * 0.966);--y:calc(var(--R) * -0.259)} /* 右上外 */
.asm__p--7{--x:calc(var(--R) * -0.966);--y:calc(var(--R) * 0.259)} /* 左下外 */
.asm__p--8{--x:calc(var(--R) * 0.966);--y:calc(var(--R) * 0.259)} /* 右下外 */
/* 非対応ブラウザ：散らばったまま静止する（それでも絵として成立する） */
.asm__p{translate:var(--x) var(--y)}
/* ★中心（＝円のある位置）へ吸い込まれ、町の一部になって消える。
ばらけて着地するよう、部品ごとに終わる時点をずらす。 */
@keyframes asm1{0%{translate:var(--x) var(--y);scale:1;opacity:1} 72%,100%{translate:0 0;scale:.16;opacity:0}}
@keyframes asm2{0%{translate:var(--x) var(--y);scale:1;opacity:1} 80%,100%{translate:0 0;scale:.16;opacity:0}}
@keyframes asm3{0%{translate:var(--x) var(--y);scale:1;opacity:1} 66%,100%{translate:0 0;scale:.16;opacity:0}}
@keyframes asm4{0%{translate:var(--x) var(--y);scale:1;opacity:1} 88%,100%{translate:0 0;scale:.16;opacity:0}}
@keyframes asm5{0%{translate:var(--x) var(--y);scale:1;opacity:1} 76%,100%{translate:0 0;scale:.16;opacity:0}}
@keyframes asm6{0%{translate:var(--x) var(--y);scale:1;opacity:1} 70%,100%{translate:0 0;scale:.16;opacity:0}}
@keyframes asm7{0%{translate:var(--x) var(--y);scale:1;opacity:1} 92%,100%{translate:0 0;scale:.16;opacity:0}}
@keyframes asm8{0%{translate:var(--x) var(--y);scale:1;opacity:1} 84%,100%{translate:0 0;scale:.16;opacity:0}}
@supports (animation-timeline:view()){
.asm__p{animation-timeline:scroll(root block);animation-range:0 78vh;animation-fill-mode:both}
.asm__p--1{animation-name:asm1} .asm__p--2{animation-name:asm2}
.asm__p--3{animation-name:asm3} .asm__p--4{animation-name:asm4}
.asm__p--5{animation-name:asm5} .asm__p--6{animation-name:asm6}
.asm__p--7{animation-name:asm7} .asm__p--8{animation-name:asm8}
}
/* 横に張り出す4つ（3・4・7・8）は、輪の左右に部品が入るだけの余白が要る。
1000px を切ると輪（78vmin）が画面幅を食い尽くして入らないので出さない。
★720px ではなく 1000px。実測すると 721〜900px でも横は3pxしか空かない（2026-09-09） */
@media (max-width:999px){
.asm__p--3,.asm__p--4,.asm__p--7,.asm__p--8{display:none}
}
/* スマホは輪が画面いっぱいで、置ける場所がほとんど無い。
円の大きさ・部品の大きさ・中心からの距離を総当たりして、いちばん余裕の出る組を入れた
（430/390/360 の3幅で、画面端・円周の文字・表紙の文字すべてから最低14px。2026-09-09 実測）。 */
@media (max-width:720px){
.asm__p{--s:clamp(38px,10.3vw,44px);--R:calc(var(--ring) * 0.66)}
}
/* アイコンをマップの線に寄せる：太さを落とし、手描きのゆらぎをかける
（新田さんメモ「アイコンをオリジナルに工夫」）。
★fill:none / stroke は各所のCSSが持っている。symbol 側は素の線画。 */
.story__ic,.track6 svg,.card3__art svg,.bcard__ph svg,.acts svg,.circle svg{
filter:url(#hand);
}
/* ---------- 新田さんメモ 2026-09-03 で足した部品 ---------- */
/* #26 会計上の取り扱い（green4と同じ3項目） */
.zeimu__l{display:grid;gap:14px;margin-top:6px}
.zeimu__l div{display:grid;grid-template-columns:7em 1fr;gap:16px;align-items:baseline;
padding-bottom:12px;border-bottom:1px dashed var(--line2)}
.zeimu__l div:last-child{border-bottom:0;padding-bottom:0}
.zeimu__l dt{font-size:14px;font-weight:900;color:var(--red)}
.zeimu__l dd{margin:0;font-size:15px;line-height:1.9}
@media (max-width:600px){.zeimu__l div{grid-template-columns:1fr;gap:4px}}
/* #20 第3の実家は準備中 */
/* ★新田さんメモ 9/14「03と被っている」。番号（.tile .num）が left:36px/top:34px にいるので右上へ */
.tile__soon{
position:absolute;right:32px;top:36px;z-index:2;
padding:6px 14px;border:1.5px solid currentColor;border-radius:999px;
font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1;
opacity:.85;
}
@media (max-width:720px){.tile__soon{right:22px;top:24px;font-size:10px;padding:5px 11px}}
/* ---------- 新田さんメモ #05 #04：狭い画面で絵が文字にかぶる ----------
浮遊イラスト(.fl)は絶対配置なので、画面が狭いと本文の上に乗る。
実測で buddy と sougyou の本文にかぶっていた（390px）。
★打合せの「事業プレゼン用／見やすさ優先」に従い、余白が無い幅では出さない。
PCでは余白に置いてあるので活きる。 */
@media (max-width:1023px){
.fl{display:none}
}
/* #11 OSUSO節の締め（green4と同じ型） */
.osclose{margin-top:clamp(36px,4vw,60px);text-align:center;
font-size:clamp(18px,2.2vw,28px);font-weight:900;letter-spacing:.06em;color:var(--brown)}
.outlink{margin-top:18px;text-align:center}
.outlink a{display:inline-flex;align-items:center;gap:8px;
padding:13px 30px;border:1.5px solid var(--brown);border-radius:999px;
font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--brown);text-decoration:none;
transition:background .25s cubic-bezier(.4,.4,0,1),color .25s cubic-bezier(.4,.4,0,1)}
.outlink a:hover{background:var(--brown);color:var(--white)}
/* ---------- はぐあいメンバー（新田さんメモ#24。Googleドキュメントの一覧より） ---------- */
.hmem{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
border:1px solid var(--line);border-radius:14px;overflow:clip}
.hmem__i{position:relative;background:var(--beige);padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,34px);
outline:1px solid var(--line)}
.hmem__i:nth-child(4n-1),.hmem__i:nth-child(4n){background:var(--white)}
.hmem__no{position:absolute;right:clamp(18px,2vw,26px);top:clamp(18px,2vw,26px);
font-family:var(--en);font-size:clamp(30px,3.4vw,46px);font-weight:700;line-height:1;
color:var(--red);opacity:.24}
/* 顔写真（Googleドキュメントより。4名分あり、残り4名は枠のみ） */
.hmem__ph{display:block;width:clamp(74px,7vw,96px);aspect-ratio:1;border-radius:50%;
object-fit:cover;object-position:50% 22%;margin-bottom:14px;
border:3px solid var(--white);box-shadow:0 8px 20px rgba(73,56,50,.14)}
.hmem__n{font-size:clamp(18px,2vw,23px);font-weight:900;letter-spacing:.05em;line-height:1.5;
padding-right:2.6em}
.hmem__k{display:block;margin-top:4px;font-size:12px;font-weight:500;letter-spacing:.12em;
color:rgba(73,56,50,.5)}
.hmem__o{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line2);
font-size:13.5px;font-weight:700;line-height:1.85;color:var(--red)}
.hmem__o .ck{display:inline-block;margin-left:.5em;color:rgba(73,56,50,.45);font-weight:500}
.hmem__b{margin-top:14px;font-size:14.5px;line-height:2;color:rgba(73,56,50,.88)}
@media (max-width:840px){
.hmem{grid-template-columns:1fr}
.hmem__i:nth-child(4n-1){background:var(--beige)}
.hmem__i:nth-child(even){background:var(--white)}
}
/* ================================================================
本文メモの入力欄が隠れる問題（2026-09-05 水沼さん報告）
★JSは触っていない。CSSだけ。貼ってあるメモには影響しない。
原因は2つあった（実測）:
①**次のセクションが上に乗る**
`.sec` は position:relative + z-index:1。入力欄は節の中の z-index:60 だが、
節そのものが z:1 の重なりの箱を作るので、後ろに続く同じ z:1 の節が上に来る。
→ 入力欄が開いている節だけ z を上げて、前に出す。
②**メモモードの下部バー（position:fixed / z-index:80）が「貼る」を覆う**
スマホは画面が844pxしかなく、バーが下144pxを占めるため、
入力欄の下端＝「貼る」が必ずバーの下に潜る（実測: 押せない）。
→ 狭い画面では、入力欄をバーの上に固定した下敷き（シート）にする。
================================================================ */
section:has(.memospot),
.sec:has(.memospot),
.wrap:has(.memospot),
.memo-can:has(.memospot){position:relative;z-index:120}
/* ★PCで高さを抑えて中をスクロールさせるのは逆効果だった（「貼る」が欄の中に隠れる）。
高さは抑えず、開いたときに欄ごと画面内へ送る（app.js の scrollIntoView）。 */
@media (max-width:720px){
/* 画面の下に固定して出す。節のはみ出し設定にも、次の節にも、バーにも負けない */
.memospot{
position:fixed;z-index:200;
left:10px;right:10px;width:auto;top:auto;
bottom:158px; /* 下部バー（高さ130px＋余白）の上 */
margin-top:0;
max-height:calc(100svh - 210px);overflow-y:auto;
box-shadow:0 -10px 40px -14px rgba(37,41,35,.55);
}
/* どの文に貼るのかが見えるよう、見出しは折り返して全部出す */
.memospot__q{white-space:normal}
/* 指で押しやすい大きさに */
.memospot .memo__s,.memospot .memo__c{min-height:48px;font-size:15px}
.memospot .memo__t{min-height:96px;font-size:16px} /* 16px未満だとiOSが勝手に拡大する */
.memospot .memo__who{min-height:46px;font-size:16px}
}
/* ---------- 第3の家族とは（2026-09-09 打合せ・新田さんメモ#08） ----------
★寄りの仕掛けを外し、まちのイラストを1枚で見せる形に戻した。
.focus 系のCSSは残してあるので、戻すときはHTMLを .focus の組みに戻すだけ。 */
.about__map{margin:0 0 clamp(40px,5vw,72px);overflow:clip}
.about__map img{width:100%;height:auto;display:block}
/* 「隙間が狭い」（メモ#08）→ 絵と見出しの間を空ける */
#about .sec__head{margin-top:clamp(8px,1.6vw,24px)}
/* ★伝えたい2文を大きく。「第3の家族って何？」が一発で分かるようにする（打合せ） */
.about__lead{font-size:clamp(20px,2.6vw,32px);font-weight:700;line-height:1.85;letter-spacing:.03em}
.about__lead b{color:var(--red)}
.about__body{max-width:44em}
.about__body p + p{margin-top:1.8em}
/* ---------- 私たちの想い（2026-09-09 打合せ・メモ#25） ---------- */
/* 打合せ#4「命を育てる役割を一人で背負っている」を赤文字で強調 */
.big-line--red b{color:var(--red)}
/* メモ#25 締めの一文をボックスで囲って強調（神山まるごと高専のHPが参考） */
.shime--box{
margin-top:clamp(32px,4vw,56px);
padding:clamp(28px,3.6vw,48px) clamp(24px,3.2vw,44px);
background:var(--white);border-left:4px solid var(--red);border-radius:4px;
font-size:clamp(17px,2.1vw,25px);font-weight:700;line-height:2;letter-spacing:.03em;
}
/* ---------- HAGAIバディとは（2026-09-09 打合せ・メモ#10） ----------
「HAGAIバディって何？」が一発で分かるように、役割を一言で大きく置く */
.buddy__def{
max-width:24em;margin:0 auto clamp(28px,3.4vw,48px);
font-size:clamp(21px,3vw,38px);font-weight:700;line-height:1.75;letter-spacing:.03em;
text-align:center;
}
.buddy__def b{color:var(--red)}
/* ---------- 章の扉のイラスト（新田さんメモ#12/#26/#27） ----------
「タイトルと本文の間に、その章のイラストを差し込み」。
文字ベースをやめて絵で分からせる（2026-09-09 打合せ）。 */
.chapill{margin:clamp(24px,3vw,44px) 0 clamp(20px,2.6vw,36px)}
.chapill img{display:block;width:100%;max-width:clamp(240px,32vw,420px);height:auto;margin-inline:auto}
@media (max-width:720px){.chapill img{max-width:260px}}
/* 9万プランは内容を再検討中（2026-09-09 打合せ） */
.ret__tbd{color:rgba(73,56,50,.55);font-style:normal}
.ret__tbd .ck{display:block;margin-top:4px}
/* メモ#06 課題に対する具体的な目標。ボックスで囲ってしっかり見せる */
.goal{
margin:clamp(36px,4.4vw,64px) auto 0;max-width:34em;
padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,40px);
background:var(--white);border:2px solid var(--red);border-radius:14px;text-align:center;
font-size:clamp(17px,2.2vw,26px);font-weight:700;line-height:1.9;letter-spacing:.03em;
}
.goal em{font-style:normal;color:var(--red);font-size:1.24em;font-weight:900}
/* ---------- ヒーロー最上部の名称（2026-09-09 打合せ#3） ---------- */
.hero__project{
display:flex;align-items:center;justify-content:center;gap:14px;
margin-bottom:clamp(4px,1vh,14px);
}
.hero__project .nb{
font-family:var(--en);font-size:clamp(12px,1.3vw,15px);font-weight:700;letter-spacing:.24em;
color:var(--red);
}
.hero__project b{
font-size:clamp(15px,1.9vw,21px);font-weight:900;letter-spacing:.12em;color:var(--brown);
position:relative;padding-left:16px;
}
.hero__project b::before{content:"";position:absolute;left:0;top:50%;width:1px;height:1.1em;
transform:translateY(-50%);background:rgba(73,56,50,.28)}
/* ※ スマホの散らし位置は、上の「円の大きさから計算」する方式に一本化した（2026-09-09）。
ここにあった vw/vh の決め打ちは、円周の文字と当たるため削除。 */
/* ---------- OSUSOとの連携 ロゴの見せ方（メモ#17/#18・2026-09-09） ---------- */
/* #17 巨大英字の「OSUSO」の隣にロゴ */
.huge--withlogo{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.huge--withlogo img{width:clamp(44px,5vw,78px);height:auto}
/* #18 本文の前に「社会を変えるリーダー100」のロゴを大きく */
.l100logo{margin:clamp(28px,3.4vw,52px) 0 clamp(20px,2.6vw,36px)}
.l100logo img{display:block;width:min(300px,52vw);height:auto;margin-inline:auto}
.osuso__intro{max-width:46em}
@media (max-width:720px){
.huge--withlogo{gap:12px}
.l100logo img{width:min(220px,58vw)}
}
/* メモ#14 参画への一押しに「100人が母と子を囲む」絵 */
.sougyou__ill{display:block;width:clamp(230px,32vw,400px);height:auto;
margin:clamp(26px,3.2vw,44px) auto clamp(22px,2.8vw,38px)}
/* ---------- 常に出す「HAGAIバディになる」（メモ#24・2026-09-09） ----------
★メモモードのときは出さない。下部の操作バーと重なって、
メモの「貼る」が押せなくなるため（2026-09-05 に踏んだのと同じ形の事故）。 */
.joinbtn{
position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vh,28px);z-index:70;
display:inline-flex;align-items:center;gap:8px;
padding:16px 30px;border-radius:999px;
background:var(--red);color:#fff;text-decoration:none;
font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1;
box-shadow:0 10px 28px -8px rgba(229,83,75,.66);
transition:transform .25s cubic-bezier(.4,.4,0,1),box-shadow .25s;
}
.joinbtn::after{content:"→";font-family:var(--en);font-weight:700}
/* 表紙のあいだは引っ込める（app.js が .is-off を付ける）。
★既定は「見える」側。JSが動かなかったときにボタンが永久に消えるほうが事故なので、
隠すほうをクラスで足す向きにしてある。 */
.joinbtn{transition:opacity .3s cubic-bezier(.4,.4,0,1),transform .3s cubic-bezier(.4,.4,0,1),visibility .3s,box-shadow .25s}
.joinbtn.is-off{opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none}
.joinbtn:hover{transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(229,83,75,.72)}
.memo-on .joinbtn{display:none}
@media (max-width:720px){
.joinbtn{left:14px;right:14px;bottom:14px;justify-content:center;padding:16px 20px;font-size:15px}
}
@media print{.joinbtn{display:none}}
/* ---------- 現場のいま：多様な体験・選択肢（メモ#07） ---------- */
.taiken{margin:clamp(34px,5vw,64px) auto clamp(26px,3.4vw,44px);max-width:820px;text-align:center}
.taiken__ill{display:block;width:100%;height:auto}
.taiken__cap{display:grid;justify-items:center;gap:10px;margin-top:clamp(6px,1.2vw,14px)}
.taiken__who{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--brown);opacity:.7}
.taiken__key{
display:inline-block;font-size:clamp(21px,3.4vw,34px);font-weight:900;letter-spacing:.06em;
line-height:1.3;color:var(--brown);padding:0 .18em;
/* 文字の後ろに引く線。行の高さぶん下に垂れないよう、下側でも止める */
background:linear-gradient(transparent 56%,rgba(244,163,64,.42) 56%,rgba(244,163,64,.42) 94%,transparent 94%);
}
.quote__key{font-weight:900;
background:linear-gradient(transparent 58%,rgba(244,163,64,.38) 58%,rgba(244,163,64,.38) 92%,transparent 92%)}
@media (max-width:720px){
.taiken{margin-top:clamp(26px,7vw,40px)}
}
/* ---------- 新田さんメモ 9/14 ---------- */
/* 募集の一文「100人、100通りの…」を目立たせて中央に */
.boshu__sub{
text-align:center;font-size:clamp(19px,2.6vw,30px);font-weight:900;line-height:1.7;letter-spacing:.04em;
margin:0 auto clamp(22px,2.6vw,36px);
}
/* 9万円プランの各項目に添える一行 */
.ret__sub{display:block;font-size:12.5px;line-height:1.7;color:rgba(73,56,50,.66);margin-top:2px}
/* ---------- 参画のお申し込み（QR＋フォーム）2026-09-15 ---------- */
.qr{
display:grid;grid-template-columns:clamp(150px,20vw,210px) 1fr;gap:clamp(22px,3vw,40px);align-items:center;
margin:clamp(28px,3.6vw,44px) 0 0;padding:clamp(24px,3vw,36px);
background:var(--beige);border-radius:16px;
}
.qr__code{margin:0;background:var(--white);border-radius:12px;padding:10px}
.qr__code img{display:block;width:100%;height:auto}
.qr__k{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--red)}
.qr__h{margin:8px 0 10px;font-size:clamp(18px,2.2vw,24px);font-weight:900;letter-spacing:.04em;line-height:1.5}
.qr__t{font-size:14.5px;line-height:1.9}
.qr__act{margin-top:16px}
.qr__act .btn{display:inline-flex}
.qr__or{margin:0 0 20px;font-size:14px;font-weight:700;letter-spacing:.06em;color:rgba(73,56,50,.7);text-align:center}
@media (max-width:720px){
.qr{grid-template-columns:1fr;justify-items:center;text-align:center}
.qr__code{width:min(60vw,220px)}
}
/* 掲載イメージ：写真が入ったら点線の枠を外す */
.bcard__ph--photo{border:none;overflow:hidden;background:var(--white)}
.bcard__ph--photo img{width:100%;height:100%;object-fit:cover;display:block}
/* フッターの連絡先はリンク色を地に合わせる */
.ft__info a{color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
/* お金の使いみち：4つ（2026-09-15）。数字は%でなく通し番号 */
.okane--4{grid-template-columns:repeat(4,1fr);gap:18px}
.okane--4 .okane__i{padding:36px 18px}
.okane__n{font-family:var(--en);font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1;color:var(--red);letter-spacing:.04em}
.okane--4 .okane__l{margin-top:12px;font-size:14.5px;line-height:1.75}
@media (max-width:1023px){.okane--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.okane--4{grid-template-columns:1fr;gap:12px} .okane--4 .okane__i{padding:24px 18px}}
/* ★波飾りは「余白」に置く飾り。スマホは文字が画面幅いっぱいなので、どこに置いても文字に重なる
（実測: 390/428px で 7つ中6つが見出しや本文に重なっていた。2026-09-15 新田さん指摘「ひとり親家庭の母と子に に波が被る」）。
→ 720px 以下は出さない。768px では #boshu の見出しを左揃えにしたぶん nami--e だけ当たるので、1023px 以下はそれも出さない */
@media (max-width:1023px){.nami--e{display:none}}
@media (max-width:720px){.nami{display:none}}
/* 横ラベルだけの節（bcard / steps）：ラベルと中身の間 */
.lbl + .bcard{margin-top:6px}
.steps--afterlbl{margin-top:10px}
#buddylist .bcard{margin-bottom:0}
/* CTA：760px幅に14文字×60pxは入らず「変わ／れば、」で折れていた（1440で実測）。この節だけ幅を広げる */
.cta .wrap--narrow{--wrap:960px}
/* 同じ地色の節が続くところは境目が見えず、余白が2倍に見える。後ろの節の上だけ詰める
（plan→buddylist：どちらもベージュ。2026-09-15） */
#buddylist{padding-top:calc(var(--sec) * .4)}
/* ---------- メモに写真を添える（2026-09-18） ---------- */
.memo__pick{margin-top:9px}
.memo__pickbtn{padding:7px 14px;background:#fff;color:var(--sumi);border:2px dashed var(--sumi-45);
border-radius:2px;font-family:inherit;font-size:.75rem;font-weight:700;cursor:pointer}
.memo__pickbtn:hover{border-color:var(--matsuri);color:var(--matsuri)}
.memo__thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.memo__thumbs:empty{display:none}
.memo__thumb{position:relative;width:64px;height:64px;border:2px solid var(--sumi);border-radius:2px;overflow:hidden;background:#fff}
.memo__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.memo__thumbx{position:absolute;top:0;right:0;width:20px;height:20px;padding:0;border:0;border-radius:0 0 0 2px;
background:var(--sumi);color:#fff;font-size:12px;line-height:1;cursor:pointer}
.memo__files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.memo__files a{display:block;width:72px;height:72px;border:1.5px solid var(--sumi-45);border-radius:2px;overflow:hidden;background:#fff}
.memo__files img{width:100%;height:100%;object-fit:cover;display:block}
.memo__files a:hover{border-color:var(--matsuri)}
/* ★iPhoneは入力欄の文字が16px未満だと、フォーカスした瞬間に画面ごと拡大する（戻らない）。
9/5に本文のピン欄（.memospot）だけ直していて、下の操作バーと節の欄が残っていた
（2026-09-18 水沼さん「サイト全体メモを押すと画面が大きくなって収まらない」）。
メモの入力欄はすべて16px以上にする */
@media (max-width:767px){
.memo__who,.memo__t,.memo__edit{font-size:16px}
.memobar__f .memo__t,.memo__f .memo__t{min-height:88px}
.memobar__f .memo__s,.memobar__f .memo__c,.memo__f .memo__s,.memo__f .memo__c{min-height:44px;font-size:15px}
}
/* ---------- 文章タップで貼れるようになったので（2026-09-18） ---------- */
/* ピン（番号の点）が既にある文では「＋」を出さない。同じ角に重なってピンが押せなかった */
.memo-on .memo-can:has(.memopin__d:not(.is-done)) > .memoadd{display:none}
/* 表紙の文に付いたピンが、丸い絵（.hero__ring z-index:1）の下に潜っていた。メモモード中だけ手前へ */
.memo-on .hero .memo-can{z-index:5}
/* ★対応済み（緑）のピンは出さない（2026-09-18 水沼さん「分かりづらい」）。
メモ自体は各節の「対応済み n件」の折りたたみに残る。未対応に戻すと赤いピンとして再び出る */
.memopin__d.is-done{display:none}
/* ---------- 参画枠：お返しの内容はボタンで開く（2026-09-18 先方依頼） ---------- */
.plan__more{margin-top:auto}
.plan__morebtn{
list-style:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
padding:11px 20px;border-radius:999px;border:1.5px solid var(--red);color:var(--red);background:transparent;
font-size:13px;font-weight:700;letter-spacing:.1em;line-height:1;
transition:background .2s,color .2s;
}
.plan__morebtn::-webkit-details-marker{display:none}
.plan__morebtn::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.plan__morebtn:hover{background:var(--red);color:#fff}
.plancard--d .plan__morebtn{border-color:var(--orange);color:var(--orange)}
.plancard--d .plan__morebtn:hover{background:var(--orange);color:var(--brown)}
.plan__more-o{display:none}
.plan__more[open] .plan__more-c{display:none}
.plan__more[open] .plan__more-o{display:inline}
.plan__more[open] .plan__morebtn::after{transform:rotate(-135deg) translateY(2px)}
.plan__more .plancard__b{margin-top:18px}
/* ひょっこり現れる */
@keyframes plan-pop{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
.plan__more[open] .plancard__b{animation:plan-pop .32s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.plan__more[open] .plancard__b{animation:none}}
/* ---------- お金の使いみち：これまでの場の写真（2026-09-18 先方依頼） ---------- */
.okphoto{margin-top:clamp(40px,5vw,64px)}
.okphoto__ttl{font-size:clamp(16px,1.8vw,20px);font-weight:900;letter-spacing:.04em;margin-bottom:clamp(16px,2vw,24px)}
.okphoto__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.okphoto__list figure{margin:0}
.okphoto__list img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--beige)}
.okphoto__list figcaption{margin-top:10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:rgba(73,56,50,.72)}
@media (max-width:720px){
.okphoto__list{grid-template-columns:1fr;gap:18px}
.plan__morebtn{width:100%;justify-content:center;min-height:46px;font-size:14px}
}