/* ============================================================ MOSSVAULT LANDSCAPE / 制作例14 世界観 = 生成り(#f0ecdf)× 焦げ茶(#3b3227)× アシッドグリーン(#b5ff43)/ Lora の細いイタリック 動きの主題 = 「育つ」。線が伸び、樹冠がふくらみ、水が下りる。速い動きは置かない。 ------------------------------------------------------------ 色の約束: 芯の 3 色は 1 バイトも変えない。帯とヒゲ線に使う 5 色は、その 3 色を 線形に混ぜた**濃淡**であって新しい色相ではない(配合は下の :root に書いてある)。 --moss = アシッド 16% + 生成り 84% --muted = 焦げ茶 78% + 生成り 22% … 弱い字(生成りの上 5.66 / moss の上 5.59 / アシッドの上 5.53) --pale = 生成り 72% + 焦げ茶 28% … 焦げ茶の地の上の字(比 6.35) --hair-l/--hair-d = 生成りの地 / 焦げ茶の地 のヒゲ線 ★色は color-mix ではなく 16 進で持つ。color-mix の計算値は Chrome が color(srgb …) 形式で返すことがあり、比を測る道具が 255 で割って嘘の赤を出す。 ------------------------------------------------------------ 帯の並び(上から・節は 9 個)= 生成り / 焦げ茶 / 生成り / 焦げ茶 / 生成り / moss / 焦げ茶 / moss / アシッド。 ★同じ色を隣り合わせない。かつ焦げ茶の錨を上・中・下に 1 本ずつ置く (下半分を全部明るい帯にしたら、節が 5 つ続けて同じ明度に見えた。2026-08-26 実測)。 ★2026-08-26 二次是正: 四季の節(旧 #seasons)を #plants の絞り込み帯へ畳んだので 節が 10 → 9 になり、真ん中の焦げ茶が 1 本消えた。**#plants を焦げ茶にして 錨を 3 本に戻してある**(#grow / #plants / #care = 2 番目・4 番目・7 番目)。 #plants を明るい帯に戻すときは、必ず別の節を焦げ茶にしてから戻すこと。 ------------------------------------------------------------ 文字どうしの隙間の約束: 公開品質ゲートは「同じ親の直下に並ぶ h1/h2/h3/p の兄弟が、横に重なっていて 縦の隙間 6px 未満」を critical にする。**設計値をこの 6px と同値にしない。** このページは見出しと説明文の間を **10px 以上**で持つ(実測 = 最小 10px)。 ------------------------------------------------------------ 出現演出の約束(社内実測の地雷。緩めないこと): ・隠すのに opacity / scale(0) を使わない → 持ち上げ = translate / 覆い = clip-path ・IntersectionObserver を使わない → clip-path を持つ要素はそこから永久に見えない ・隠す側は :where(html.js) の中に置く(html.js .rise と書くと .rise.seen に 詳細度で勝ってしまい「JS が動いていても永久に出ない」に化ける) ・触る演出は必ず @media(hover:hover) の中 ・ループは translate / rotate / scale、ホバーは transform に分ける (同じ property に animation と transition を載せると触った瞬間に瞬間移動する) ・**読み込みと同時に走る演出を置かない。**時間の帯(.year-line)は読み込み直後に 走り切って 1.65 秒で終わっていた = 誰も見ていない(2026-08-26 実測)。 .seen が付いてから動き出すよう、必ず .rise / .rise-wipe / .lift の輪に入れる。 ------------------------------------------------------------ 状態の見た目を書くときの約束: ★「押していないときだけ効く」規則は [aria-pressed="false"] のように**素の DOM に 在る状態**で書く。JS が触っている間しか付かない属性(data-… 等)で書くと、 CSS を走査する定規から**永久に「一致 0 件」に見える**(2026-08-26 に自分で踏んだ。 ruler12_auto が 2 本を死んだセレクタとして挙げ続けた)。 ------------------------------------------------------------ 見出しの約束: ・h1 / h2 / h3 は :root の**一本の物差し**から取る。節ごとに cqi で決めない。 ・改行は を置いた所でしか起きない(かたまり内は nowrap)。 ============================================================ */ /* ---------- 1. 土台 ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip} img{display:block;width:100%;height:100%;object-fit:cover} svg{display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} figure{margin:0} :root{ --bg:#f0ecdf; /* 生成り */ --ink:#3b3227; /* 焦げ茶 */ --acid:#b5ff43; /* アシッドグリーン = 14 の顔 */ --body:"Noto Sans JP",sans-serif; --serif:Lora,serif; --moss:#e7efc6; /* アシッド16% + 生成り84% */ --muted:#635b4f; /* 焦げ茶78% + 生成り22% */ --pale:#bdb8ab; /* 生成り72% + 焦げ茶28% */ --hair-l:#d5d0c3; /* 焦げ茶15% + 生成り85%(生成りの地のヒゲ線) */ --hair-d:#5f574c; /* 焦げ茶80% + 生成り20%(焦げ茶の地のヒゲ線) */ --ease:cubic-bezier(.16,.7,.24,1); --h1:clamp(28px,6.2vw,78px); --h2:clamp(26px,5.2vw,64px); --h3:clamp(21px,3vw,38px); --h3s:clamp(18px,1.6vw,26px); } .demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em} .demo a{text-decoration:underline;margin-left:10px} .skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px} .skip:focus{top:8px} :focus-visible{outline:3px solid #65a7ff;outline-offset:4px} @media(max-width:720px){.demo{max-width:calc(100vw - 20px)}} /* ---------- 2. 見出しの「かたまり」 ---------- 共有 shared-quality.css が ≤820px で white-space:normal!important を当ててくるので、 全長パス + !important で上から押さえる(24 本が共有するファイルには触らない)。 */ main p,main li,main dd,main dt{word-break:auto-phrase} .phrase{display:block;white-space:nowrap} html body div#main main h1 span.phrase, html body div#main main h2 span.phrase{display:block!important;white-space:nowrap!important;width:auto!important} /* ---------- 3. 出現演出 ---------- */ :where(html.js) .rise{translate:0 22px;clip-path:inset(0 0 100% 0)} :where(html.js) .rise-wipe{clip-path:inset(0 0 100% 0)} :where(html.js) .lift{translate:0 18px} .rise.seen,.lift.seen{translate:none} .rise.seen,.rise-wipe.seen{clip-path:inset(0)} html.anim .rise.seen{transition:translate .72s var(--ease) var(--d,0s),clip-path .72s var(--ease) var(--d,0s)} html.anim .rise-wipe.seen{transition:clip-path .82s var(--ease) var(--d,0s)} html.anim .lift.seen{transition:translate .72s var(--ease) var(--d,0s)} /* 開き切ったら覆いを捨てる。clip-path を持つ要素は後ろの静的な兄弟より上に描かれ、 触れる部品の当たり判定まで切ってしまうため。 */ .rise.done,.rise-wipe.done{clip-path:none} /* 線が描かれる演出。長さは site.js が getTotalLength() で実測して --len に入れる。 */ :where(html.js) .drawn{stroke-dasharray:var(--len,900px);stroke-dashoffset:var(--len,900px)} .seen .drawn{animation:draw 1.3s var(--ease) var(--dd,.08s) both} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{animation:none!important;transition:none!important} .rise,.rise-wipe,.lift{translate:none!important;clip-path:none!important} .drawn{stroke-dasharray:none!important;stroke-dashoffset:0!important} .canopy,.pc,.mbar,.year-line{scale:none!important} } /* ---------- 4. ヘッダー ---------- ★共有 CSS が top:56px!important(≤820px は 52px)で決めていて、上のクレジット帯 (高さ 44px)との間に本文が 12px 覗く隙間ができる。末尾で 44px にそろえる。 ★地は不透明。半透明(アルファ 0.91)だと帯の下に本文が透け、幅1440/390 の 17 箇所中 13 箇所で色が動いていた(2026-08-26 実測)。 ★中の 5 本には「費用(#plans)」を必ず入れる。見込み客がいちばん見たい節に 入口が無かった(2026-08-26 の指摘)。 */ .niwa-head{height:78px;position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px; padding:0 clamp(16px,3vw,40px);background:var(--bg);border-bottom:1px solid var(--hair-l)} .niwa-head>a{font:700 14px/1.2 var(--body);letter-spacing:.1em} .niwa-head nav{margin-left:auto;display:flex;gap:clamp(14px,2vw,30px);font-size:12px;line-height:1.2} #grow,#cases,#plants,#method,#water,#care,#plans,#contact{scroll-margin-top:132px} @media(max-width:820px){ .niwa-head{height:62px;padding:0 18px} .niwa-head>a{font-size:12px} #grow,#cases,#plants,#method,#water,#care,#plans,#contact{scroll-margin-top:116px} } /* ---------- 5. 共通の見出し・前置き ---------- */ main section>header{display:grid;gap:clamp(12px,1.2vw,18px);justify-items:start;max-width:960px} main section>header h2{margin:0;font-size:var(--h2);line-height:1.2;font-weight:700} .over{margin:0;font-size:12px;line-height:1.5;letter-spacing:.2em;color:var(--muted)} .lead{margin:0;max-width:62ch;font-size:clamp(14px,1.05vw,16px);line-height:2;color:var(--muted)} /* ---------- 6. ヒーロー(標本の円と、伸びるつる) ---------- */ .statement{background:var(--bg);padding:clamp(40px,7vh,96px) clamp(20px,5vw,60px) clamp(52px,8vh,96px); display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,2.2vw,30px)} .specimen{width:min(418px,78vw);aspect-ratio:1;position:relative} .spec-shot{position:absolute;inset:5.6%;border-radius:50%;overflow:hidden} .spec-shot img{filter:saturate(.65)} .spec-ring{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none} .ring-track{fill:none;stroke:var(--pale);stroke-width:2} .ring-arc{fill:none;stroke:var(--acid);stroke-width:5;stroke-linecap:round; transform-box:view-box;transform-origin:210px 210px;transform:rotate(-90deg)} .ring-ticks path{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round} .vine{fill:none;stroke:var(--acid);stroke-width:8;stroke-linecap:round} .rb,.vb{fill:var(--acid);stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center; animation:pulse 4.6s var(--ease) infinite} .ring-buds circle:nth-of-type(2){animation-delay:-1.1s} .ring-buds circle:nth-of-type(3){animation-delay:-2.3s} .ring-buds circle:nth-of-type(4){animation-delay:-3.4s} .vine-buds circle:nth-of-type(2){animation-delay:-1.6s} .vine-buds circle:nth-of-type(3){animation-delay:-3.1s} .statement h1{margin:0;font-size:var(--h1);line-height:1.24;font-weight:700} .lede{margin:0;max-width:600px;font-size:clamp(14px,1.15vw,16px);line-height:2;color:var(--muted)} .dive{display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding:6px 12px; font-size:12px;line-height:1.2;letter-spacing:.18em;color:var(--muted);animation:hop 3s ease-in-out infinite} .dive svg{width:18px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ---------- 7. 三年で変わる(時間の帯) ---------- ★.year-line は .lift の輪に入れて「見えたら動く」に揃える。 もとは読み込みと同時に走る指定だったので、#grow に着く前に 1.65 秒で 走り切って終わっていた(2026-08-26 実測 = currentTime 1650 / finished)。 ★縮んだ状態(scale:.02 1)は :where(html.js) の中に置く。外に出すと JS が落ちた画面で帯が 2% のまま残る。 */ .grow-years{background:var(--ink);color:var(--bg); padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px);display:grid;gap:clamp(22px,3vw,42px)} .grow-years .over{color:var(--acid)} .grow-years .lead{color:var(--pale)} .year-line{display:block;height:2px;background:var(--acid);transform-origin:left center} :where(html.js) .year-line{scale:.02 1} .year-line.seen{animation:stretch 1.5s var(--ease) .15s both} .years{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,34px)} .years li{display:grid;gap:10px;align-content:start;min-width:0} .tree-art{width:100%} .tree-art svg{width:100%;max-width:178px;height:auto;aspect-ratio:120/170} .soil{fill:none;stroke:var(--hair-d);stroke-width:3;stroke-linecap:round} .tw{fill:none;stroke:var(--bg);stroke-width:3.4;stroke-linecap:round} .canopy{fill:var(--acid);fill-opacity:.26;stroke:var(--acid);stroke-width:2; transform-box:fill-box;transform-origin:center} .seen .canopy{animation:swell 1.15s var(--ease) .3s both} .years li:nth-child(2) .canopy{animation-delay:.42s} .years li:nth-child(3) .canopy{animation-delay:.54s} .years li:nth-child(4) .canopy{animation-delay:.66s} .years li b{font-size:clamp(24px,2.6vw,38px);line-height:1;font-weight:700;color:var(--acid)} .years h3{margin:0;font-size:var(--h3s);line-height:1.3;font-weight:700} .years li p{margin:0;font-size:clamp(13px,.95vw,14px);line-height:1.85;color:var(--pale)} /* ---------- 8. 三つの庭 ---------- ★器の比を 2/3 に固定する。以前は器に比が無く、幅 820px で縦長写真の 54% を 捨てていた(奥へ伸びる路地の構図が丸ごと消える)。比は figure 側に置く (img に aspect-ratio を書いても、素の img{height:100%} が親の高さに解決して打ち消す)。 */ .gardens{background:var(--bg);padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px);display:grid;gap:clamp(22px,3vw,42px)} .garden-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)} .gardens article{position:relative;display:block;min-width:0} .garden-shot{aspect-ratio:2/3;overflow:hidden;background:var(--hair-l)} .garden-shot img{filter:saturate(.72);transition:scale .8s var(--ease)} .garden-tag{position:absolute;z-index:2;left:clamp(12px,1.4vw,22px);right:clamp(12px,1.4vw,22px); bottom:clamp(12px,1.4vw,22px);background:var(--acid);color:#2c331b;padding:clamp(14px,1.4vw,22px)} .garden-tag b{display:block;font:italic 700 clamp(14px,1.2vw,18px)/1 var(--serif);letter-spacing:.06em} .garden-tag h3{margin:12px 0;font-size:var(--h3);line-height:1.12;font-weight:700} .garden-tag p{margin:0;font-size:clamp(12px,.9vw,13px);line-height:1.6} /* ---------- 9. 植栽の記録 + 四季の絞り込み帯(焦げ茶の錨・中) ---------- ★2026-08-26 二次是正: もとは四季が独立した節で、操作盤(#seasons)と 操作される物(#plants)の間に帯 1 本 + over + 2 行見出し + lead が丸ごと挟まり、 1440 で約 330px 離れていた。**押しても灯った草木が画面内に 1 枚も入らない。** 見出しの直下へ畳んで、押した先が必ず同じ画面に入るようにした。 ★色の切り替えは 1 本の .sdot に集約する。季節ごとに別のクラスへ書くと、 押されていない季節の規則が「一致 0 件」になって黙って死ぬ(2026-08-26 実測で 5 本)。 ★地が焦げ茶になったので、札の中の字は .plant 側で焦げ茶に戻す (親から生成りを継ぐと、生成りの札の上で字が消える)。 */ .plants{background:var(--ink);color:var(--bg);padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px); display:grid;gap:clamp(22px,3vw,42px)} .plants .over{color:var(--acid)} .plants .lead{color:var(--pale)} .season-pick{display:grid;gap:clamp(10px,1.2vw,16px)} .pick-key{margin:0;font-size:12px;line-height:1.5;letter-spacing:.2em;color:var(--acid)} .season-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)} .season{display:grid;justify-items:center;align-content:start;gap:7px;text-align:center;min-width:0; padding:clamp(16px,1.8vw,26px) clamp(8px,1vw,16px);border:1px solid var(--hair-d);background:var(--ink);color:var(--bg)} .season[aria-pressed="true"]{background:var(--acid);color:#27311a;border-color:var(--acid)} .season svg{width:clamp(40px,4vw,58px);height:auto;aspect-ratio:1;transition:transform .35s var(--ease)} .season b{font:italic 700 clamp(15px,1.5vw,22px)/1.2 var(--serif);letter-spacing:.05em} .season .sn{font-size:clamp(13px,1.1vw,15px);line-height:1.3;font-weight:700} .season .sd{font-size:12px;line-height:1.4;color:var(--pale)} .season[aria-pressed="true"] .sd{color:inherit} .ss{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .sdot{fill:var(--acid)} .season[aria-pressed="true"] .sdot{fill:#27311a} .sbud,.berry{stroke:currentColor;stroke-width:2} .sbud{transform-box:fill-box;transform-origin:center;animation:pulse 3.8s var(--ease) infinite} .scan{fill-opacity:.34;stroke:currentColor;stroke-width:2.6} .shade path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round} .shade{animation:sweep 5.4s ease-in-out infinite alternate} .fruit{animation:drop 4.4s ease-in-out infinite} .fruit:nth-of-type(2){animation-delay:-2.1s} .flakes circle{animation:drift 6.5s linear infinite} .flakes circle:nth-of-type(2){animation-delay:-2.2s} .flakes circle:nth-of-type(3){animation-delay:-4.3s} .plant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)} .plant{display:grid;gap:10px;align-content:start;min-width:0;background:var(--bg);color:var(--ink); border:1px solid var(--hair-l);padding:clamp(16px,1.8vw,26px)} .plant[data-lit="true"]{background:var(--acid);border-color:var(--ink)} .leaf-art{width:100%} .leaf-art svg{width:100%;max-width:132px;height:auto;aspect-ratio:120/84; transform-origin:22% 88%;animation:sway 6.4s ease-in-out infinite;transition:transform .4s var(--ease)} .plant:nth-child(2n) .leaf-art svg{animation-delay:-2.1s} .plant:nth-child(3n) .leaf-art svg{animation-delay:-4.2s} .lf{fill:var(--acid);fill-opacity:.32;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round} .plant[data-lit="true"] .lf{fill:var(--bg);fill-opacity:.7} .lv{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round} .lb{fill:var(--acid);stroke:var(--ink);stroke-width:2} .plant[data-lit="true"] .lb{fill:var(--bg)} .plants h3{margin:0;font-size:var(--h3s);line-height:1.3;font-weight:700} .latin{margin:0;font:italic 400 clamp(13px,1vw,15px)/1.5 var(--serif);color:var(--muted)} .psize{margin:0;font-size:clamp(12px,.9vw,13px);line-height:1.7;color:var(--muted)} .dots{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0} .dots li{font-size:13px;line-height:1;padding:5px 7px;background:var(--bg);border:1px solid var(--hair-l);color:var(--muted)} .dots li.on{background:var(--ink);border-color:var(--ink);color:var(--bg)} /* ★選ばれた季節の札。灯った札はアシッドの地の上に置かれるので、地と同じアシッドで 塗ると枠しか見えない(2026-08-26 に幅390 の実写で踏んだ)。焦げ茶の地 + アシッドの字にする。 */ .dots li.on.lit{background:var(--ink);border-color:var(--ink);color:var(--acid);font-weight:700} .plant-note{margin:0;max-width:62ch;font-size:clamp(13px,1vw,15px);line-height:1.95;color:var(--pale)} /* ---------- 10. 進め方 ---------- */ .methods{background:var(--bg);padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px);display:grid;gap:clamp(22px,3vw,42px)} .methods ol{list-style:none;margin:0;padding:0;display:grid} .methods li{display:grid;grid-template-columns:clamp(62px,7vw,104px) 1fr auto; column-gap:clamp(16px,2.4vw,36px);row-gap:10px;align-items:center; border-top:1px solid var(--hair-l);padding:clamp(20px,2.4vw,34px) 0} .methods li:last-child{border-bottom:1px solid var(--hair-l)} .step-art{grid-column:1;grid-row:1/span 2;width:100%} .step-art svg{width:100%;height:auto;aspect-ratio:1} .st{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .sun{fill:var(--acid);stroke:var(--ink);stroke-width:2.4} .methods li b{grid-column:2;grid-row:1;font:italic 700 clamp(16px,1.4vw,20px)/1 var(--serif); letter-spacing:.08em;color:var(--muted)} .methods li>div{grid-column:2;grid-row:2;min-width:0} .methods h3{margin:0;font-family:var(--serif);font-style:italic;font-weight:400; font-size:var(--h3);line-height:1.1;letter-spacing:.04em} .methods li p{margin:12px 0 0;max-width:52ch;font-size:clamp(14px,1.05vw,16px);line-height:1.9;color:var(--muted)} .dur{grid-column:3;grid-row:1/span 2;justify-self:end;white-space:nowrap; font-size:12px;line-height:1.4;letter-spacing:.14em;color:var(--muted)} /* ---------- 11. 雨の断面 ---------- ★水は「くぼ地の容積」で切り抜く(#niwa-basin)。切り抜きを地面より下まで取ると、 水の四角い上辺がくぼ地の斜面を横切って地中に浮く(2026-08-26 に自分で踏んだ)。 ★雨粒は viewBox の中で生まれて中で消える。上端の外から降らせると、 不透明になった状態で枠に切られた半円が上辺に貼りつく(同上)。 ★★主役 3 つ(.basin / .trench / .sump)は viewBox の x=0〜540 に置く。 ≤820px では器の比が 560/320 = **見える viewBox は幅に依らず常に x=0〜560** で、 そこから外れた図形はスマホ・タブレットの全幅で 1 画素も映らない。 もとは トレンチ x600-900 / 越流桝 x1000-1092 に在り、下の 3 語のうち 2 語が 図の中に存在しなかった(2026-08-26 実測。320/390/480/721/820 の全幅で 0%)。 樹と根と側方の流れは x=560 より右に置く(広い画面だけの背景)。 */ .water{background:var(--moss);padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px);display:grid;gap:clamp(22px,3vw,42px)} .section-cut{width:100%;aspect-ratio:1200/320;background:var(--bg);border:1px solid var(--hair-l)} .cut-soil{fill:var(--ink);fill-opacity:.13} .cut-gravel{fill:var(--ink);fill-opacity:.22} .pool{fill:var(--acid);fill-opacity:.72;animation:tide 6.4s ease-in-out infinite alternate} .cut-line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round} .trench{fill:var(--acid);fill-opacity:.42;stroke:var(--ink);stroke-width:2.5} .sump{fill:none;stroke:var(--ink);stroke-width:3} .root{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 8} .cut-crown{fill:var(--acid);fill-opacity:.3;stroke:var(--ink);stroke-width:2.6} .ar{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round} .seep{animation:seepdown 3.6s ease-in-out infinite} .seep-b{animation-delay:-1.2s} .seep-c{animation-delay:-2.4s} .flow{animation:nudge 3.4s ease-in-out infinite} .flow-b{animation-delay:-.9s} .flow-c{animation-delay:-1.8s} .flow-d{animation-delay:-2.6s} .dp{fill:var(--acid);stroke:var(--ink);stroke-width:1.6;animation:fall 2.8s linear infinite} .rain circle:nth-of-type(2){animation-delay:-.35s} .rain circle:nth-of-type(3){animation-delay:-.7s} .rain circle:nth-of-type(4){animation-delay:-1.05s} .rain circle:nth-of-type(5){animation-delay:-1.4s} .rain circle:nth-of-type(6){animation-delay:-1.75s} .rain circle:nth-of-type(7){animation-delay:-2.1s} .rain circle:nth-of-type(8){animation-delay:-2.45s} .water-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)} .water-facts>div{display:grid;gap:10px;min-width:0;border-top:1px solid var(--hair-l);padding-top:clamp(14px,1.6vw,22px)} .water-facts dt{font-size:clamp(16px,1.5vw,22px);line-height:1.3;font-weight:700} .water-facts dd{margin:0;font-size:clamp(13px,1vw,15px);line-height:1.85;color:var(--muted)} /* ---------- 12. 十二か月の手入れ(下半分の焦げ茶の錨) ---------- ★棒の隙間は width で作る。width:100% + margin-inline だと器からはみ出して 隣の棒と接し、地が焦げ茶になった途端に 12 本が 1 枚のアシッドの面に見える (2026-08-26 に自分で踏んだ。生成りの地では枠線が境目を作っていたので気づけなかった)。 ★月の数字が持つ border-top が横軸。だから .months の gap は 0 のまま (gap を空けると軸線が破線になる)。 ★棒が何の量なのかを .chart-key の 1 行と role="img" の aria-label で必ず言う。 単位が無いと、読者は 12 本の緑の棒を推測で読むしかない(2026-08-26 の指摘)。 ★下の 4 つの作業が指す月の棒は、年間の下位 3 本に入れないこと。 入れると「自分で名指しした作業月がいちばん暇な月に見える」。 */ .care-year{background:var(--ink);color:var(--bg); padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px);display:grid;gap:clamp(22px,3vw,42px)} .care-year .over{color:var(--acid)} .care-year .lead{color:var(--pale)} .chart-key{margin:0;max-width:62ch;font-size:clamp(13px,1vw,15px);line-height:1.9;color:var(--pale)} .months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;align-items:end} .m{display:grid;align-content:end;justify-items:center;min-width:0} .mbar{display:block;width:calc(100% - clamp(5px,.75vw,11px));justify-self:center; height:calc(var(--v) * clamp(64px,9vw,150px));background:var(--acid);transform-origin:bottom} .seen .mbar{animation:barup .85s var(--ease) calc(var(--i) * .045s) both} .m b{display:block;width:100%;border-top:2px solid var(--pale);padding-top:8px;text-align:center; font-size:13px;line-height:1.2;color:var(--pale)} .care-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,32px)} .care-legend li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:4px;align-items:start;min-width:0} .care-legend svg{grid-row:1/span 2;width:40px;height:40px;aspect-ratio:1} .cg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round} .cgd{fill:var(--acid);stroke:currentColor;stroke-width:2.2} .care-legend b{font-size:clamp(14px,1.15vw,17px);line-height:1.4} .care-legend span{font-size:clamp(13px,1vw,14px);line-height:1.8;color:var(--pale)} /* ---------- 13. 規模と費用 ---------- */ .plans{background:var(--moss);padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px);display:grid;gap:clamp(22px,3vw,42px)} .plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)} .plans article{display:grid;gap:10px;align-content:start;min-width:0;background:var(--bg); border:1px solid var(--hair-l);padding:clamp(18px,2.2vw,34px)} .plan-art{width:100%} .plan-art svg{width:100%;max-width:190px;height:auto;aspect-ratio:120/88;transition:transform .4s var(--ease)} .pl{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round} .pc{fill:var(--acid);fill-opacity:.5;stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center} .seen .pc{animation:swell 1s var(--ease) .25s both} .plan-art circle:nth-of-type(2){animation-delay:.36s} .plan-art circle:nth-of-type(3){animation-delay:.47s} .plan-art circle:nth-of-type(4){animation-delay:.58s} .plan-art circle:nth-of-type(5){animation-delay:.69s} .plans h3{margin:0;font-size:var(--h3);line-height:1.15;font-weight:700} .range{margin:0;font:italic 400 clamp(15px,1.4vw,20px)/1.4 var(--serif);color:var(--muted)} .price{margin:0;font-size:clamp(20px,2vw,28px);line-height:1.2;font-weight:700} .plans ul{list-style:none;margin:0;padding:0;display:grid;gap:7px} .plans li{position:relative;padding-left:17px;font-size:clamp(13px,1vw,15px);line-height:1.75;color:var(--muted)} .plans li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px; background:var(--acid);border:1px solid var(--ink)} .plan-note{margin:0;max-width:62ch;font-size:clamp(13px,1vw,15px);line-height:1.95;color:var(--muted)} /* ---------- 14. 現地相談 ---------- ★覆い(clip-path)を持つ figure は後ろの静的な兄弟より上に描かれるので、 文字側に position + z-index を持たせる(版面が写真の下に隠れる事故を防ぐ)。 */ .niwa-contact{background:var(--acid);color:#27311a;padding:clamp(52px,7vw,110px) clamp(20px,5vw,72px); display:grid;grid-template-columns:1.1fr minmax(0,.9fr);gap:clamp(26px,4vw,60px);align-items:center} .nc-copy{position:relative;z-index:2;min-width:0;display:grid;justify-items:start;gap:clamp(14px,1.4vw,20px)} .nc-copy h2{margin:0;font-size:var(--h2);line-height:1.2;font-weight:700} .niwa-contact .over,.niwa-contact .lead{color:#27311a} .nc-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0} .nc-list li{font-size:13px;line-height:1;padding:7px 13px;border:1px solid #27311a} .nc-cta{display:inline-flex;align-items:center;gap:12px;padding:12px 0; font-size:clamp(15px,1.3vw,18px);line-height:1.4;font-weight:700; text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px} .nc-cta svg{width:34px;height:12px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.6s ease-in-out infinite;transition:transform .35s var(--ease)} .nc-shot{min-width:0;aspect-ratio:3/2;overflow:hidden} /* ---------- 15. 足元 ---------- */ footer{background:var(--ink);color:var(--bg);padding:clamp(22px,3vw,40px) clamp(20px,5vw,72px); display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;font-size:12px;line-height:1.5} footer b{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.08em} .mark{width:22px;height:26px;flex:0 0 auto;fill:none;stroke:var(--acid);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* ---------- 15-B. 写真の器(6 枚。2026-08-26 新設) ---------- 写真は 6 枚とも 2026-08-27 に組み込み済み(オーナーが ChatGPT で作成)。当初は受け皿だけで、 中身はいま「その場所の意味を持つ線画」で埋めてある。 ★比は器(.ph-box)側に持たせる。img に aspect-ratio を書いても、 土台の img{height:100%} が grid で伸びた親の高さに解決して打ち消す(社内実測)。 ★中身の寸法は **.ph-box>*** で書く。svg を名指しすると → の 差し替えで規則が黙って死ぬ(制作例12 で 4 本死なせた実測)。 ★差し替え手順 = … を … に 置き換えるだけ。器も余白も演出も 1 行も触らない。 ★**6 枚ぜんぶ写真に入れ替わったら、下の .pa / .pa-f / .pa-g の 3 行も一緒に消す。** 残すと「一致 0 件」の死んだセレクタになる(ruler12_auto が拾う)。 1 枚でも線画が残っているあいだは消さないこと。 ★説明文は figcaption の b と span に入っている。**nojs12 は figcaption を 1 件も数えていない**(main の h1/h2/h3/p/li/dt/dd しか見ない)。ここの文字は _ph.cjs でだけ検査されている。器をいじったら _ph.cjs も回すこと。 */ .ph{display:grid;gap:clamp(10px,1.1vw,16px);min-width:0} .ph-box{aspect-ratio:3/2;overflow:hidden;background:var(--bg);border:1px solid var(--hair-l)} .ph-box>*{display:block;width:100%;height:100%} .ph figcaption{display:grid;gap:8px;min-width:0;align-content:start} .ph figcaption b{font-size:clamp(15px,1.2vw,19px);line-height:1.4} .ph figcaption span{max-width:46ch;font-size:clamp(13px,1vw,15px);line-height:1.9;color:var(--muted)} /* 焦げ茶の地に置く器(#grow / #plants / #care)。字は --pale(比 6.35)へ落とす。 */ .grow-years .ph-box,.plants .ph-box,.care-year .ph-box{background:var(--ink);border-color:var(--hair-d)} .grow-years .ph figcaption b,.plants .ph figcaption b,.care-year .ph figcaption b{color:var(--acid)} .grow-years .ph figcaption span,.plants .ph figcaption span,.care-year .ph figcaption span{color:var(--pale)} /* 線画の描き方。色は器の地から currentColor で継ぐので、明るい地でも暗い地でも同じ指定でよい。 */ /* #grow = 「植えた日」と「数年後」の 2 枚並び。ここがこのページの主張の証拠になる。 */ .grow-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)} /* #plants = 正方形。全幅に置くと 1200px 角の面になるので、必ず幅を止める。 */ .ph-plants .ph-box{aspect-ratio:1;max-width:340px} /* #method = 幅1101 以上で本文の右に約 695px 空いている。3 枚目はそこへ入れる。 */ .ph-method{max-width:min(100%,560px)} @media(min-width:721px){ /* 器と説明文を横並びにする。**図の幅を止めるだけでなく figure 全体も止める**。 止めないと 1920 で説明文の右に 700px の空きが残る。 */ .ph-plants{grid-template-columns:minmax(0,clamp(220px,28vw,360px)) minmax(0,1fr); column-gap:clamp(18px,2.6vw,40px);align-items:center;max-width:1140px} .ph-plants .ph-box{max-width:none} } @media(min-width:821px){ .ph-water{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); column-gap:clamp(18px,2.6vw,40px);align-items:center} /* #care は写真を右に置く。直前の #water と左右を入れ替えて、続く 2 節にリズムを作る。 */ .ph-care{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); column-gap:clamp(18px,2.6vw,40px);align-items:center} .ph-care .ph-box{grid-column:2;grid-row:1} .ph-care figcaption{grid-column:1;grid-row:1} } @media(min-width:1101px){ .methods{grid-template-columns:minmax(0,1fr) minmax(0,clamp(320px,34%,520px));align-items:start} .methods>header{grid-column:1;grid-row:1} .methods>ol{grid-column:1;grid-row:2} .methods>.ph-method{grid-column:2;grid-row:2;max-width:none} } @media(max-width:620px){ .grow-pair{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)} } /* ---------- 16. 触る演出(必ず hover:hover の中) ---------- ★四季の札の「下見」の見た目はここに置く。押して決めた札(aria-pressed="true")には 当てない。当てるとアシッドの地にアシッドの字を書くことになり、字が消える。 */ @media(hover:hover){ .niwa-head nav a{text-decoration:underline;text-decoration-color:transparent; text-underline-offset:5px;transition:text-decoration-color .3s ease} .niwa-head nav a:hover{text-decoration-color:currentColor} .gardens article:hover .garden-shot img{scale:1.055} .gardens article:hover .garden-tag{transform:translateY(-6px)} .season:hover svg{transform:translateY(-3px)} .season[aria-pressed="false"]:hover{border-color:var(--acid);color:var(--acid)} .season[aria-pressed="false"]:hover .sd{color:var(--acid)} .plant:hover{border-color:var(--ink)} .plant:hover .leaf-art svg{transform:translateY(-5px)} .plans article:hover{border-color:var(--ink)} .plans article:hover .plan-art svg{transform:translateY(-4px)} .nc-cta:hover svg{transform:translateX(7px)} } /* ★.garden-tag は .lift でもある。transition の一括指定は後勝ちなので、 出現(translate)と ホバー(transform)を **1 本の指定にまとめて** 書かないと 触った瞬間に瞬間移動する(社内実測の地雷4)。 */ html.anim .garden-tag.lift.seen{transition:translate .72s var(--ease) var(--d,0s),transform .42s var(--ease)} /* ---------- 17. 折り返し ---------- */ @media(max-width:1024px){ .plan-grid{grid-template-columns:1fr} .plans article{max-width:640px} } @media(max-width:900px){ .plant-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:820px){ .garden-grid{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)} .gardens article{max-width:560px} .water-facts{grid-template-columns:1fr} .care-legend{grid-template-columns:1fr} .niwa-contact{grid-template-columns:1fr;gap:26px} .section-cut{aspect-ratio:560/320} } @media(max-width:720px){ .years{grid-template-columns:repeat(2,minmax(0,1fr))} .season-row{grid-template-columns:repeat(2,minmax(0,1fr))} .methods li{grid-template-columns:56px 1fr;align-items:start} .step-art{grid-row:1/span 2} .dur{grid-column:2;grid-row:3;justify-self:start} footer{grid-template-columns:1fr;gap:8px} } @media(max-width:480px){ .plant-grid{grid-template-columns:1fr} .plant{max-width:420px} } /* ---------- 18. 動きの定義 ---------- */ @keyframes draw{from{stroke-dashoffset:var(--len,900px)}to{stroke-dashoffset:0}} @keyframes swell{from{scale:.08}to{scale:1}} @keyframes stretch{from{scale:.02 1}to{scale:1 1}} @keyframes barup{from{scale:1 .04}to{scale:1 1}} @keyframes pulse{0%,100%{scale:1}50%{scale:1.34}} @keyframes hop{0%,100%{translate:0 0}50%{translate:0 6px}} @keyframes sway{0%,100%{rotate:-1.7deg}50%{rotate:2deg}} @keyframes sweep{from{translate:-5px 0}to{translate:6px 0}} @keyframes drop{0%,100%{translate:0 0}45%{translate:0 5px}} @keyframes drift{0%{translate:0 -8px}100%{translate:0 12px}} @keyframes tide{from{translate:0 52px}to{translate:0 6px}} @keyframes seepdown{0%,100%{translate:0 -5px}50%{translate:0 6px}} @keyframes fall{0%{translate:0 -8px;fill-opacity:.04}12%{fill-opacity:1}84%{fill-opacity:1}100%{translate:0 72px;fill-opacity:.04}} @keyframes nudge{0%,100%{translate:0 0}50%{translate:5px 0}} /* ── 共有 shared-quality.css の上書き(全長パス + !important) ──────────────── 共有ファイルは 24 本のサンプルが読むので触らない。当たり負けしている物だけを こちら側から名指しで押さえる。 1) 見出しの大きさ → 共有は .case-strip h2 を 44px!important、≤480px で .niwa-contact h2 を 32px!important に固定していた。幅 320px では小見出しが 主見出しを追い越す(44 > 28)。全部 :root の一本の物差しへ戻す。 2) ヘッダーの上端 → 共有は top:56px!important(≤820px は 52px)。上のクレジット帯の 下端は 44px なので、本文が 12px 覗く隙間ができる。44px にそろえる。 */ html body div#main main h1{font-size:var(--h1)!important} html body div#main main h2{font-size:var(--h2)!important;line-height:1.2!important} html body div#main main h3{font-size:var(--h3)!important} html body div#main main section#plants h3, html body div#main main section#grow h3{font-size:var(--h3s)!important} html body div#main header.niwa-head{top:44px!important} /* ★画面の外にある節は動きを止める。 animation の一括指定は animation-play-state を running へ戻すため、この規則は 必ずファイルの末尾 + id を含む長いセレクタ + !important で置く。 */ html body div#main main section.rest, html body div#main main section.rest *{animation-play-state:paused!important}