/* ══════════════════════════════════════════════════════════════════════════ ✨ luxe.css ── NEMU MAKING LOG 豪華レイヤー（2026-08-13 作成） ────────────────────────────────────────────────────────────────────────── 🔑 これは何か 既存の styles.css を1行も書き換えずに、【後ろから飾りだけを足す】ファイルです。 index.html の で styles.css の【後】に読み込みます。 🔒 4つの約束（守れているかは各節のコメントで確かめられます） ① styles.css / main.js は1バイトも変更していません ② 【箱の大きさと位置を変えない】。動かすのは transform / opacity / filter / 影 / 背景 だけ。padding・margin・width・height・gap・grid は触りません （例外は overflow:hidden と position:relative ＝ どちらも寸法を変えません） ③ 足した飾りはすべて 疑似要素 か position:absolute/fixed ＝【流れの外】 ④ 未対応ブラウザ／「動きを減らす」設定では【元の見た目に戻る】 🚫 やめておいたこと（理由つき） ・外部への通信を足さない（新しいフォント・CDN・画像を1本も増やしていません。 粒子はインラインSVG、光はすべてCSSのグラデーションで作っています） ・文字の折り返しに関わる指定（text-wrap など）を足さない ＝ 行数が変わると【レイアウトを変えたこと】になるため 🗑 元に戻すには index.html から luxe.css / luxe.js の2行を消すだけ。このファイルは消しても消さなくても可。 ══════════════════════════════════════════════════════════════════════════ */ /* ── 0. 動かせる変数を登録する（CSS Properties and Values API）───────────── 🔑 ふつうの --変数 は「ただの文字列」なので、アニメーションさせると 【途中が無く、パッと切り替わる】。@property で型を教えると ブラウザが間を補間できる ＝ 虹と金の光が滑らかに流れます。 🔵 未対応ブラウザでは initial-value のまま静止（＝壊れず、地味になるだけ）。 */ @property --luxe-rot { syntax:""; inherits:false; initial-value:45deg; } @property --luxe-sheen { syntax:""; inherits:false; initial-value:0%; } :root{ /* NEMUの虹（既存の --purple/--cyan/--pink と、見出しの5色から取っています。 新しい色を勝手に作らず、サイトが既に持っている色だけで組み立てます） */ --luxe-1:#8052a3; /* 紫 */ --luxe-2:#4f9fca; /* 青 */ --luxe-3:#53aa89; /* 緑 */ --luxe-4:#d1a93d; /* 金 */ --luxe-5:#df754b; /* 橙 */ --luxe-pink:#cf6e99; --luxe-ease:cubic-bezier(.2,.75,.2,1); } /* ══ 1. 地の質感 ═══════════════════════════════════════════════════════ */ /* 🙇 既存の styles.css:34 は `body::selection` と書かれていて、実は効いていません （::selection は body の"中の文字"ではなく、選択範囲そのものに当てる）。 元ファイルは触らない約束なので、ここで正しい形を足して有効にします。 */ ::selection{ background:rgba(200,162,92,.42); color:var(--night); text-shadow:none; } html{ scrollbar-color:rgba(133,97,200,.45) rgba(242,239,233,.9); } /* 和紙のきめ。外部画像ではなく【インラインSVGのノイズ】なので通信は0本。 🚨 スマホでは切ります（全画面の合成は電池と描画の負担が大きく、見返りが小さい）。 */ .luxe-grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; display:none; opacity:.22; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; } @media (min-width:821px){ .luxe-grain{ display:block } } /* ══ 2. 読んだ量が分かる虹の帯（スクロール駆動・JavaScript 0行）════════ 🔑 animation-timeline:scroll() ＝ 時間ではなく【スクロール量】でアニメを進める新しい仕組み。 スクロールイベントを拾う昔のやり方と違い、指の動きと1フレームもずれません。 🔵 未対応ブラウザでは scaleX(0) のまま ＝【何も見えないだけ】で邪魔をしません。 */ .luxe-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--luxe-1),var(--luxe-2),var(--luxe-3),var(--luxe-4),var(--luxe-5)); box-shadow:0 0 16px rgba(133,97,200,.55); } @keyframes luxe-scalex{ from{transform:scaleX(0)} to{transform:scaleX(1)} } @supports (animation-timeline:scroll()){ @media (prefers-reduced-motion:no-preference){ .luxe-progress{ animation:luxe-scalex linear both; animation-timeline:scroll(root block); } } } /* ══ 3. ヘッダー ═══════════════════════════════════════════════════════ */ /* 下辺に虹の細い光。border ではなく疑似要素なので【高さは1pxも増えません】 */ .site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--luxe-1) 22%,var(--luxe-4) 52%,var(--luxe-2) 78%,transparent); opacity:.5; transition:opacity .35s ease; } .site-header.is-scrolled::after{ opacity:.95 } .site-header{ -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); } @media (prefers-reduced-transparency:reduce){ .site-header{ background:rgba(8,12,22,.98); -webkit-backdrop-filter:none; backdrop-filter:none; } } /* 「N」の印に、金の光が1周する。回るのは光だけで、印そのものは動きません */ .brand-seal{ position:relative; overflow:hidden; } .brand-seal::after{ content:""; position:absolute; inset:-40%; pointer-events:none; background:conic-gradient(from var(--luxe-rot), transparent 0 66%, rgba(225,193,125,.85) 78%, transparent 88% 100%); } @keyframes luxe-rot{ to{ --luxe-rot:405deg } } @media (prefers-reduced-motion:no-preference){ .brand-seal::after{ animation:luxe-rot 5.5s linear infinite } .brand{ transition:filter .4s var(--luxe-ease) } .brand:hover{ filter:drop-shadow(0 0 16px rgba(225,193,125,.45)) } } /* ══ 4. ヒーロー ═══════════════════════════════════════════════════════ */ /* 左下の光の玉を、ゆっくり回して呼吸させる（既存の conic-gradient の角度を動かすだけ）*/ .hero-glow{ --luxe-rot:45deg; background:conic-gradient(from var(--luxe-rot), var(--pink), var(--gold), var(--cyan), var(--purple), var(--pink)); } @keyframes luxe-breathe{ 0%,100%{ opacity:.18; transform:scale(1) } 50%{ opacity:.30; transform:scale(1.08) } } @media (prefers-reduced-motion:no-preference){ .hero-glow{ animation:luxe-rot 44s linear infinite, luxe-breathe 13s ease-in-out infinite } } /* 右上にもう一つ、うんと淡い光。::before は既存（方眼）が使っているので ::after を使う */ .hero::after{ content:""; position:absolute; z-index:0; pointer-events:none; width:560px; height:560px; right:-220px; top:-260px; border-radius:50%; background:conic-gradient(from calc(var(--luxe-rot) * -1), var(--cyan), var(--purple), var(--pink), var(--gold), var(--cyan)); filter:blur(96px); opacity:.13; } @media (prefers-reduced-motion:no-preference){ .hero::after{ animation:luxe-rot 62s linear infinite reverse } } /* 「次のヒント」の5文字に、虹の波が左から右へ渡る。 🔒 transform と text-shadow だけ ＝ 文字の位置も行数も変わりません */ .rainbow-title span{ display:inline-block; will-change:transform } @keyframes luxe-wave{ 0%,68%,100%{ transform:translateY(0); text-shadow:none } 22% { transform:translateY(-7px); text-shadow:0 0 26px currentColor, 0 6px 18px rgba(0,0,0,.35) } } @media (prefers-reduced-motion:no-preference){ .rainbow-title span{ animation:luxe-wave 4.6s var(--luxe-ease) infinite } .rainbow-title span:nth-child(1){ animation-delay:0s } .rainbow-title span:nth-child(2){ animation-delay:.11s } .rainbow-title span:nth-child(3){ animation-delay:.22s } .rainbow-title span:nth-child(4){ animation-delay:.33s } .rainbow-title span:nth-child(5){ animation-delay:.44s } } /* SCROLL の線が、ゆっくり伸び縮みする */ @keyframes luxe-scroll-line{ 0%,100%{ transform:scaleX(.45); opacity:.5 } 50%{ transform:scaleX(1); opacity:1 } } @media (prefers-reduced-motion:no-preference){ .hero-scroll span{ transform-origin:0 50%; animation:luxe-scroll-line 2.6s ease-in-out infinite } } /* NEMU と シロガミ。既存 CSS の transform（--hero-parallax）を壊さないよう 🔒 transform には一切触れず、filter の drop-shadow だけを足します */ /* 🙇🙇 2026-08-14 ── ここでネムを【22%暗く・28%色を抜いて】いました。👑社長のご指摘で発覚。 ────────────────────────────────────────────────────────────────────── 🔬 何をしたか … 影を足すつもりで、styles.css:187 の filter を写して drop-shadow を足した: filter: saturate(.72) contrast(1.04) brightness(.78) drop-shadow(...) 🚨 ところが styles.css には `.hero-visual img` が【2回】書かれており、 187行は**8/6の作り直しで死んだ古い行**でした。生きているのは 812-825行の `.hero-visual .hero-nemu { filter: drop-shadow(0 24px 30px rgba(66,34,83,.2)) }` ＝ 暗くする指定は【もう外されていた】。私はそれを写し戻したことになります。 しかも背景が濃紺から淡いラベンダーに変わっているので、暗いネムはいっそう沈みます。 🔑 型 …【同じセレクタが2回書かれていたら、"最後に効いている行"を読む】。 上から読んで最初に見つけた行を写すと、誰かが直した跡をそのまま巻き戻します。 直す前に、その要素の computed style（実際に効いている値）を1回見ること。 ✅ いま … 色はいじらない。影だけ、元の設計より少しだけ深くする。 */ .hero-visual .hero-nemu{ filter:drop-shadow(0 26px 36px rgba(66,34,83,.28)); } /* 登場（読み込み時に1回だけ）*/ @keyframes luxe-intro{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } } @media (prefers-reduced-motion:no-preference){ .hero-copy > *{ animation:luxe-intro .95s var(--luxe-ease) both } .hero-copy > :nth-child(1){ animation-delay:.05s } .hero-copy > :nth-child(2){ animation-delay:.15s } .hero-copy > :nth-child(3){ animation-delay:.25s } .hero-copy > :nth-child(4){ animation-delay:.35s } .hero-copy > :nth-child(5){ animation-delay:.45s } } /* インクの飛沫を描く板（luxe.js が作ります）。 🔒 .hero は display:grid ですが、position:absolute は【グリッドの升目に入りません】 ＝ 2列の配置は1pxも変わりません。 */ .luxe-ink{ position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:.9; /* 🚨 width/height:100% が必須。canvas は width 属性で【本来の大きさ】を持つ「置換要素」なので、 inset:0 だけだと左右の指定が競合し、右側が無視されて本来の幅（例:536px）で描かれます。 実測（2026-08-13 17:4x・390px幅）… 指定前 right=536px ／ 指定後 right=390px。 枠が overflow:hidden なので見た目の実害は出ませんが、無駄な描画面が残ります。 */ width:100%; height:100%; } /* ══ 5. ボタン（金箔が流れる）═══════════════════════════════════════════ 🔒 overflow:hidden と position:relative は【寸法を変えない】ので約束②に反しません */ .button{ position:relative; overflow:hidden; } .button > *{ position:relative; z-index:2 } .button::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:44%; z-index:1; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-160%); } @keyframes luxe-sweep{ 0%{ transform:translateX(-160%) } 42%,100%{ transform:translateX(360%) } } @media (prefers-reduced-motion:no-preference){ .button-gold::after{ animation:luxe-sweep 5.2s cubic-bezier(.35,0,.15,1) infinite } .button-ghost::after{ animation:luxe-sweep 6.8s cubic-bezier(.35,0,.15,1) infinite; opacity:.5 } } .button-gold{ box-shadow:0 10px 26px rgba(181,137,69,.24) } .button-gold:hover{ box-shadow:0 16px 40px rgba(181,137,69,.38) } .button-ghost:hover{ box-shadow:0 12px 30px rgba(0,0,0,.22) } /* ══ 6. スクロールで現れる（JavaScript 0行）══════════════════════════════ 🚨 大事な作り: 既定は「見えている」。@supports の中でだけ「隠して出す」を足します。 こうしないと、未対応ブラウザで【永久に消えたまま】になります（よくある事故）。 */ @keyframes luxe-rise { from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } } @keyframes luxe-rise-s{ from{ opacity:0; transform:translateY(15px) } to{ opacity:1; transform:none } } @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .section-heading, .stock-flow, .nemu-ad, .closing-band > div, .closing-band > .button, .brain-intro, .mock-section-title{ animation:luxe-rise linear both; animation-timeline:view(); animation-range:entry 4% cover 26%; } .story-card, .mock-article-card, .category-grid a, .journal-list article, .brain-cards article, .tool-card, .stock-flow li{ animation:luxe-rise-s linear both; animation-timeline:view(); animation-range:entry 2% cover 22%; } } } /* 見出しの下に、虹の細線が左から引かれる */ .section-heading{ position:relative } .section-heading::after{ content:""; position:absolute; left:0; bottom:-16px; width:96px; height:2px; pointer-events:none; background:linear-gradient(90deg,var(--luxe-1),var(--luxe-2),var(--luxe-4)); transform:scaleX(0); transform-origin:0 50%; border-radius:2px; } @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .section-heading::after{ animation:luxe-scalex linear both; animation-timeline:view(); animation-range:entry 12% cover 26%; } } } /* 未対応ブラウザでは transform が初期値のまま＝見えないので、そこは静かに出す */ @supports not (animation-timeline:view()){ .section-heading::after{ transform:scaleX(1) } } /* ══ 7. 記事カード ═════════════════════════════════════════════════════ */ .story-card{ position:relative; isolation:isolate; transition:box-shadow .5s ease, transform .5s var(--luxe-ease), border-color .5s ease; } .story-card:hover{ transform:translateY(-4px); box-shadow:0 30px 70px rgba(16,19,26,.16); border-color:#cfc6b6; } /* 上辺に虹の線が引かれる（枠線は太くしないので寸法は不変）*/ .story-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:3; pointer-events:none; background:linear-gradient(90deg,var(--luxe-1),var(--luxe-2),var(--luxe-3),var(--luxe-4),var(--luxe-5)); transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--luxe-ease); } .story-card:hover::before{ transform:scaleX(1) } .story-card h3 a{ transition:color .3s ease } .story-card .text-link span{ display:inline-block; transition:transform .38s var(--luxe-ease) } .story-card .text-link:hover span{ transform:translateX(6px) } .story-image > span{ transition:background .35s ease, color .35s ease } .story-card:hover .story-image > span{ background:rgba(8,12,22,.92) } /* モック側の記事カードも同じ作法で */ .mock-article-card{ position:relative; transition:transform .45s var(--luxe-ease) } .mock-article-card:hover{ transform:translateY(-3px) } .mock-thumb{ display:block; overflow:hidden } .mock-thumb img{ transition:transform .6s var(--luxe-ease), filter .45s ease } .mock-article-card:hover .mock-thumb img{ transform:scale(1.06); filter:saturate(1.08) } /* ══ 8. カテゴリの帯（暗い面）═══════════════════════════════════════════ */ .category-grid a{ position:relative; overflow:hidden } .category-grid a::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none; background:linear-gradient(90deg,var(--luxe-1),var(--luxe-2),var(--luxe-4)); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--luxe-ease); } .category-grid a:hover::before{ transform:scaleX(1) } .category-grid a::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s ease; background:radial-gradient(300px 220px at var(--mx,50%) var(--my,50%), rgba(133,97,200,.28), transparent 70%); } .category-grid a:hover::after{ opacity:1 } .category-grid span{ background:linear-gradient(100deg,var(--gold-dark) 0%,var(--gold) 30%,#fff2cf 50%,var(--gold) 70%,var(--gold-dark) 100%); background-size:260% 100%; background-position:var(--luxe-sheen) 0; -webkit-background-clip:text; background-clip:text; color:transparent; } @keyframes luxe-sheen{ 0%{ --luxe-sheen:0% } 55%{ --luxe-sheen:100% } 100%{ --luxe-sheen:0% } } @media (prefers-reduced-motion:no-preference){ .category-grid span{ animation:luxe-sheen 9s ease-in-out infinite } .category-grid a:nth-child(2) span{ animation-delay:.7s } .category-grid a:nth-child(3) span{ animation-delay:1.4s } .category-grid a:nth-child(4) span{ animation-delay:2.1s } .category-grid a:nth-child(5) span{ animation-delay:2.8s } } /* 文字が消えないよう、必ず戻る道を用意する */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .category-grid span{ color:var(--gold); background:none } } /* ══ 9. 開発ジャーナル ═════════════════════════════════════════════════ */ .journal-list article{ position:relative } .journal-list article::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; pointer-events:none; background:linear-gradient(180deg,var(--luxe-1),var(--luxe-4)); transform:scaleY(0); transform-origin:50% 0; transition:transform .45s var(--luxe-ease); } .journal-list article:hover::before{ transform:scaleY(1) } .journal-list article > a{ transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s var(--luxe-ease) } .journal-list article:hover > a{ background:var(--gold); color:var(--night); border-color:var(--gold); transform:translateX(4px) } /* ══ 10. Brain の面 ════════════════════════════════════════════════════ */ .brain-section{ position:relative; overflow:hidden } .brain-section::before{ content:""; position:absolute; z-index:0; pointer-events:none; width:520px; height:520px; right:-200px; top:-220px; border-radius:50%; background:conic-gradient(from var(--luxe-rot), var(--purple), var(--cyan), var(--pink), var(--gold), var(--purple)); filter:blur(110px); opacity:.16; } @media (prefers-reduced-motion:no-preference){ .brain-section::before{ animation:luxe-rot 56s linear infinite } } .brain-inner{ position:relative; z-index:1 } .brain-cards article{ transition:background .4s ease, padding-left .35s var(--luxe-ease) } .brain-cards article:hover{ background:rgba(255,255,255,.03) } /* ══ 11. 無料ツール ════════════════════════════════════════════════════ */ .nemu-ad{ position:relative; overflow:hidden } .nemu-ad::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent); transform:translateX(-160%); } @media (prefers-reduced-motion:no-preference){ .nemu-ad::after{ animation:luxe-sweep 9s cubic-bezier(.35,0,.15,1) infinite } } .nemu-ad img{ transition:filter .5s ease, transform .7s var(--luxe-ease) } .nemu-ad:hover img{ filter:saturate(1) ; transform:scale(1.04) } .tool-card{ position:relative; transition:background .4s ease, box-shadow .45s ease, transform .45s var(--luxe-ease) } .tool-card:hover{ background:rgba(255,255,255,.72); box-shadow:0 24px 56px rgba(16,19,26,.10); transform:translateY(-3px) } .filter-button{ transition:background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease } .filter-button.is-active{ box-shadow:0 8px 22px rgba(133,97,200,.22) } /* ══ 12. ひとつ書けば3つのストック ═════════════════════════════════════ */ .stock-flow li{ position:relative; transition:background .35s ease } .stock-flow li span{ background:linear-gradient(100deg,var(--luxe-1),var(--luxe-2),var(--luxe-4),var(--luxe-5)); background-size:280% 100%; background-position:var(--luxe-sheen) 0; -webkit-background-clip:text; background-clip:text; color:transparent; } @media (prefers-reduced-motion:no-preference){ .stock-flow li span{ animation:luxe-sheen 7s ease-in-out infinite } .stock-flow li:nth-child(2) span{ animation-delay:.6s } .stock-flow li:nth-child(3) span{ animation-delay:1.2s } } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .stock-flow li span{ color:var(--gold); background:none } } /* ══ 13. 締めの帯 ══════════════════════════════════════════════════════ */ .closing-band{ position:relative; overflow:hidden } .closing-band::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(120% 70% at 12% 120%, rgba(133,97,200,.35), transparent 62%), radial-gradient(80% 46% at 88% -8%, rgba(75,185,200,.20), transparent 60%); } @keyframes luxe-breathe2{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } } @media (prefers-reduced-motion:no-preference){ .closing-band::after{ animation:luxe-breathe2 12s ease-in-out infinite } } .closing-band > *{ position:relative; z-index:1 } .closing-band h2{ background:linear-gradient(100deg,#efe9df 0%,#fff 22%,var(--gold-bright) 44%,#fff 62%,#efe9df 100%); background-size:240% 100%; background-position:var(--luxe-sheen) 0; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 18px rgba(0,0,0,.6)); } @media (prefers-reduced-motion:no-preference){ .closing-band h2{ animation:luxe-sheen 8.5s ease-in-out infinite } } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .closing-band h2{ color:var(--paper); background:none; filter:none } } /* ══ 14. 足もと ════════════════════════════════════════════════════════ */ .site-footer{ position:relative } .site-footer::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--luxe-1) 25%,var(--luxe-4) 55%,var(--luxe-2) 80%,transparent); opacity:.6; } .site-footer nav a{ position:relative } .site-footer nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:50%; transition:transform .34s var(--luxe-ease); } .site-footer nav a:hover::after{ transform:scaleX(1) } .mock-mini-footer nav a{ position:relative } .mock-mini-footer nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:50%; transition:transform .3s var(--luxe-ease); } .mock-mini-footer nav a:hover::after{ transform:scaleX(1) } /* ══ 15. 読み飛ばしリンク（キーボードだけで操作する方のため）════════════ */ .luxe-skip{ position:fixed; left:14px; top:-72px; z-index:10000; padding:12px 22px; color:var(--night); background:linear-gradient(180deg,var(--gold-bright),#b58945); font-size:13px; font-weight:700; letter-spacing:.14em; transition:top .26s var(--luxe-ease); } .luxe-skip:focus{ top:14px } /* ══ 16. ページ移動のなめらかな切り替え（View Transitions）══════════════ 記事ページへ移るとき、白い点滅なしで溶けるように切り替わります。 未対応ブラウザでは【ふつうの移動】になるだけ。 */ @view-transition{ navigation:auto } @media (prefers-reduced-motion:no-preference){ ::view-transition-old(root){ animation:luxe-vt-out .24s ease both } ::view-transition-new(root){ animation:luxe-vt-in .42s cubic-bezier(.2,.75,.2,1) both } } @keyframes luxe-vt-out{ to{ opacity:0 } } @keyframes luxe-vt-in { from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } /* 記事のサムネイルが、記事ページの絵へ【変形して繋がる】ときの動き。 🔑 名前は luxe.js が付けます（vt-art-<記事のファイル名>）。 * を使ったグループ指定で、記事が何本増えても書き足す作業はありません。 🔒 運ばれている絵の上に、根っこの薄れ込みが重なると濁るので、 絵のグループだけ少し長く・遅い曲線で動かして主役にします。 */ 🙇 2026-08-13 17:0x ── ここに最初 `::view-transition-group(.vt-art)` と書きました。 これは【view-transition-class を付けた要素】に当てる書き方で、当方は view-transition-name しか付けていないので、**何にもマッチしない飾りの行**でした。 🔑 型 …【CSSの選択子は、外れても何も言わない】。効いていないのに書いてあると、 次の人が「もう手当て済み」と読んで、本当の手当てをしません。消すのが正解。 */ ::view-transition-group(*){ animation-duration:.52s; animation-timing-function:cubic-bezier(.22,.7,.16,1) } ::view-transition-old(root),::view-transition-new(root){ mix-blend-mode:normal } /* ══ 17. スマホでの調整 ════════════════════════════════════════════════ */ @media (max-width:820px){ .hero::after{ width:340px; height:340px; right:-160px; top:-180px } .section-heading::after{ width:64px; bottom:-12px } } /* ══════════════════════════════════════════════════════════════════════════ ✦ 19. 2026年に「使えるようになったばかり」の技術 ────────────────────────────────────────────────────────────────────────── 🔑 全部 @supports で囲んであります ＝【対応していないブラウザでは、 そのブロックが丸ごと無視されるだけ】。壊れません。 ══════════════════════════════════════════════════════════════════════════ */ /* ── 19-a. スクロール状態のコンテナクエリ（@container scroll-state）──────── 🆕 Chrome/Edge 133〜（stuck）／144〜（scrolled）。2026年8月時点でChromium系のみ。 🔑 何がすごいか … 「ヘッダーが上に貼り付いた瞬間」を【CSSだけで】検知できる。 いままでは JavaScript で scroll を監視して class を付け外しするしかなく、 指を動かすたびにメインスレッドで計算が走っていました。これはその計算が0になります。 🔒 既存の main.js の .is-scrolled は【残したまま】です。 対応ブラウザでは両方が同じ向きに効き、非対応ブラウザではJS側だけが効きます ＝ どちらの環境でも見た目が壊れません（＝進歩的強化）。 🔵 container-type:scroll-state は【寸法の閉じ込め（containment）を一切しない】ので、 ヘッダーの高さも sticky も backdrop-filter も影響を受けません。 */ @supports (container-type: scroll-state){ .site-header{ container-type: scroll-state; } @container scroll-state(stuck: top){ .site-header::after{ opacity:.95; } .brand-seal{ border-color:rgba(225,193,125,.95) } .nav-links a{ color:#c2c8d4 } } } /* ── 19-b. 文字の一部だけ色を差す（CSS Custom Highlight API）───────────── 🆕 Baseline 2026 到達。 🔑 何がすごいか … ふつう文中の一部だけ色を変えるには で囲む＝DOMを書き換える 必要がありました。このAPIは【DOMを1バイトも変えずに】文字の範囲へ色を当てます。 だから main.js が作ったプレビューを壊さずに、上から色だけ足せます。 🎨 URL＝青／#タグ＝紫／@メンション＝水色／はみ出した分＝赤（luxe.js が範囲を渡します） 🚨 ::highlight() に使えるプロパティは色まわりだけと決まっています （背景・文字色・下線など）。位置や大きさは変えられない＝レイアウトは動きません。 */ ::highlight(luxe-url) { color:#2f7fd0; background:rgba(47,127,208,.13); text-decoration:underline; text-decoration-color:rgba(47,127,208,.5); } ::highlight(luxe-tag) { color:#7a4fb5; background:rgba(122,79,181,.13); } ::highlight(luxe-mention){ color:#2f9db0; background:rgba(47,157,176,.13); } ::highlight(luxe-over) { color:#b3243a; background:rgba(214,64,86,.20); text-decoration:underline wavy #d64056; } /* ── 19-c. 入力欄が中身に合わせて伸びる（field-sizing）─────────────────── 🆕 Baseline 2026 到達。 🔑 いままでは「入力のたびに高さを測って style.height に書き戻す」JavaScript が要りました。 🔒 min-height を元の見え方（11行ぶん）に合わせてあるので、 【最初の見た目は1pxも変わらず、長い文を書いたときだけ下へ伸びます】。 max-height で画面を超えないように止めています。 */ 🙇 2026-08-13 16:5x ── ここで1件やらかして、実測で捕まえました。 最初 `min-height:17.6em` と【手で計算した値】を書いたところ、 入力欄が 354.04px → 281.60px ＝【72px 縮みました】。 17.6em×16px＝281.6px で、実際の11行（行送り28.8px×11＋余白36＋枠1.33＝354.13px）に 届いていなかったためです。 🔑 型 …【下限を"式"で置くと、式のほうが現実からずれる】。 ずれた瞬間に field-sizing が「中身に合わせて」縮めてよい範囲になり、静かに縮む。 ✅ 直し … 数式をやめ、【luxe.js が元の高さを測ってから下限に入れる】。 測ってから決めるので、文字サイズが変わっても画面幅が変わってもずれません。 html に .luxe-fs が付くまで field-sizing は効かないので、 JavaScript が動かない環境では【最初から元のまま】です。 */ @supports (field-sizing: content){ html.luxe-fs #x-post-text{ field-sizing: content; /* min-height は luxe.js が実測値を入れます（ここには書きません） */ max-height: 62vh; } } /* ── 19-d. 読める色を browser に選ばせる（contrast-color）──────────────── 🆕 Baseline 2026 到達。 🔑 背景色を渡すと、その上で確実に読める色（黒か白）を返してくれる。 色を変えたときに「文字が読めなくなる」事故が構造的に起きなくなります。 */ @supports (color: contrast-color(white)){ .luxe-skip{ color: contrast-color(#e1c17d); } } /* ── 19-e. 筆で一払いした形の下線（shape()）───────────────────────────── 🆕 Baseline 2026 到達。 🔑 いままで曲線の切り抜きは SVG か polygon() の点の羅列でした。 shape() は CSS の中で【線・曲線・移動】を言葉で書けます。 🔒 当てているのは疑似要素の切り抜きだけ ＝ 見出しの位置も行数も変わりません。 */ @supports (clip-path: shape(from 0 0, line to 100% 0, close)){ .section-heading::after{ height:7px; bottom:-19px; clip-path: shape( from 0% 34%, curve to 46% 8% with 16% 0%, curve to 100% 26% with 74% 22%, line to 100% 74%, curve to 46% 92% with 74% 82%, curve to 0% 66% with 16% 100%, close ); } } /* ── 19-f. auto へ滑らかに変化させる（interpolate-size / calc-size）────── 🆕 高さ auto へのアニメーションが、CSSだけで出来るようになりました。 🔑 いままでは「一度開いて高さを測り、数値に戻してから animate する」JSが必要でした。 🔒 ここでは【許可を出しているだけ】。開閉する箱が増えたとき、 追加のJSなしで滑らかに開くようになります。いまの見た目は変わりません。 */ @supports (interpolate-size: allow-keywords){ :root{ interpolate-size: allow-keywords; } } /* ── 19-g. ページ切り替え中だけ効く指定（:active-view-transition）──────── 🆕 Baseline 2026 到達（1月）。 🔑 記事へ移っている最中だけ、飾りを止める。切り替えの1秒間に 虹や粒子が動いていると、目が「どこを見ればいいか」を見失うためです。 */ @supports selector(:active-view-transition){ html:active-view-transition .luxe-grain, html:active-view-transition .luxe-ink{ opacity:0 } } /* ── 19-h. 下線が文字の下ヒゲを避ける（text-decoration-skip-ink: all）─── 🆕 Baseline 2026 到達。日本語の「す」「り」や英語の g/j/y に下線が刺さらなくなります。 */ @supports (text-decoration-skip-ink: all){ a, .x-count-note a{ text-decoration-skip-ink: all; } } /* ── 19-j. 「PR」の説明を、その札にくっつけて出す（Anchor Positioning）── 🆕 2026年のCSSでいちばん話題になった機能。 🔑 いままでは「札の座標をJSで測って、吹き出しの位置を毎回書き戻す」必要がありました。 いまは【札に名前を付けて、吹き出しに"その名前の下に置け"と書くだけ】。 さらに画面の端に来たら position-try-fallbacks で勝手に反対側へ回り込みます。 🔵 未対応ブラウザでは、popover の既定どおり【画面の中央】に出ます。 ＝ 位置が変わるだけで、読めなくなることはありません。 */ .luxe-pr-info{ display:inline-grid; place-items:center; width:17px; height:17px; margin-left:7px; padding:0; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; font:600 10px/1 var(--sans); cursor:help; vertical-align:middle; opacity:.75; transition:opacity .25s ease, transform .25s var(--luxe-ease); } .luxe-pr-info:hover{ opacity:1; transform:scale(1.12) } .luxe-pr-pop{ max-width:min(340px,88vw); margin:0; padding:18px 20px; border:1px solid rgba(133,97,200,.45); background:#fff; color:var(--ink); box-shadow:0 26px 64px rgba(16,19,26,.22); } .luxe-pr-pop strong{ display:block; margin-bottom:9px; font:600 14px/1.6 var(--serif); letter-spacing:.05em; color:var(--purple) } .luxe-pr-pop p{ margin:0 0 8px; font-size:12.5px; line-height:1.95; color:#5f5e5c } .luxe-pr-pop p:last-child{ margin-bottom:0 } .luxe-pr-pop .luxe-pr-sub{ padding-top:9px; border-top:1px solid var(--line-light); color:#84837f; font-size:11.5px } .luxe-pr-pop::backdrop{ background:transparent } @supports (anchor-name: --a){ .luxe-pr-pop{ position:fixed; position-area: block-end span-inline-end; /* 既定は札の【下・右へ広がる】 */ position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; margin-block-start:8px; } } @media (prefers-reduced-motion:no-preference){ .luxe-pr-pop:popover-open{ animation:luxe-pop-in .26s var(--luxe-ease) both } } @keyframes luxe-pop-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } } /* ── 19-i. 角の形を丸ではなく「すみ切り」にする（corner-shape）─────────── 🔵 対応ブラウザのみ。未対応では【ふつうの角】のままで、何も起きません。 */ @supports (corner-shape: squircle){ .button, .brand-seal, .filter-button{ corner-shape: squircle; border-radius:8px; } } /* ══════════════════════════════════════════════════════════════════════════ ✦ 20. カテゴリの独立ページ（2026-08-13 追加） ────────────────────────────────────────────────────────────────────────── 👑社長の指示「開発記録・アニメの作り方・Brainひろばは、忍スプと同じように それぞれ独立したページにする」。1枚の長いLPをやめ、実ページに分けました。 🔒 トップの見た目には一切影響しません（ここの指定はトップに存在しない class だけ）。 ══════════════════════════════════════════════════════════════════════════ */ /* 🚨🚨 これが無いと、作った新ページの本文とフッターが【丸ごと消えます】 ────────────────────────────────────────────────────────────────────── 🔬 実測（2026-08-13 17:0x）… styles.css:521 に、メディアクエリの外で こう書かれています: `.stock-flow, .latest-section, .category-band, .journal-section, .brain-section, .tools-section, .closing-band, .site-footer { display: none; }` ＝ トップをモック構成（ヒーロー＋ダッシュボード＋細いフッター）にしたときの名残で、 昔の長い節を一括で隠しています。トップではそれが正解です。 🚨 ところが新しく作ったカテゴリページは【同じclass】を使って組んでいるので、 そのまま読み込むと .brain-section も .closing-band も .site-footer も消えます。 しかも【DOMには在る】ので、リンク検査もHTML検査も全部合格します ＝ 開いて見るまで気づけない種類の壊れ方です。 ✅ 直し … 新ページにだけ在る .cat-hero を目印にして、そのページでだけ解除する。 :has() を使うので【トップのCSSには1文字も触れません】。 🔵 display の値は「元の設計で意図されていた値」を1つずつ書き戻します （revert では .closing-band の flex と .site-footer の grid が失われるため）。 */ 🙇 2026-08-13 18:1x ── 監査で【この解除の網が狭すぎた】ことが分かりました。 目印を .cat-hero にしたので、**.cat-hero を持たないページ** （screen-splitter.html と articles/*.html）では解除が効かず、 **フッターが消えたまま**でした。しかもフッターはページのいちばん下なので、 上から見ていくと最後まで気づけません。 ✅ 目印を「新しく作ったページかどうか」ではなく【フッターを出したいページかどうか】に変える。 .cat-hero（新4ページ）／.download-hero（画面分割くん）／.article-page（記事）の3つを目印にする。 🔑 型 …【解除の網は、"直したいページ"ではなく"影響を受ける全ページ"で数える】 */ body:is(:has(.cat-hero), :has(.download-hero), :has(.article-page)) .latest-section, body:is(:has(.cat-hero), :has(.download-hero), :has(.article-page)) .journal-section, body:is(:has(.cat-hero), :has(.download-hero), :has(.article-page)) .tools-section, body:is(:has(.cat-hero), :has(.download-hero), :has(.article-page)) .brain-section{ display:block } body:is(:has(.cat-hero), :has(.download-hero), :has(.article-page)) .category-band{ display:block } body:is(:has(.cat-hero), :has(.download-hero), :has(.article-page)) .closing-band{ display:flex } body:is(:has(.cat-hero), :has(.download-hero), :has(.article-page)) .site-footer{ display:grid } body:has(.cat-hero) .stock-flow{ display:grid } /* 🚨 明るい背景の節ラベルが 2.79:1 で読めない（監査で判明・元からの不具合）。 暗い .cat-hero の中は 6.20:1 で問題ないので、【明るい面だけ】色を替える。 #7d5f2e は既に .brain-buy で使っている色で、#fbf8fd に対して約5.6:1。 */ .content-section .eyebrow, .journal-section .eyebrow, .brain-section .eyebrow, .download-hero .eyebrow, .download-section .eyebrow, .x-counter .eyebrow{ color:#7d5f2e } /* 🚨🚨 これがいちばん重い。**アフィリエイトの開示文が 2.05:1 で、事実上読めなかった**。 このページで【いちばん確実に読まれなければならない文】が、【いちばん読めない文】になっていた。 金額の表示より、順位より、まずここが読めることが先です。 ✅ 4.5:1 を確実に超える色へ。文字も 11px から少し上げ、枠で囲って「読み飛ばす文」に見せない。 */ .disclosure, .brain-intro .disclosure{ color:#5a3f2b !important; font-size:12.5px !important; line-height:1.95; background:rgba(200,162,92,.14); border-left-width:3px; } .cat-hero .eyebrow{ color:var(--gold) } /* 🙇 ここに .closing-band .eyebrow と .hero .eyebrow も並べて書き、直後に自分で消しました。 ・.closing-band … 暗いグラデーションの上なので元から 5.22:1 で合格。触る必要が無かった ・.hero .eyebrow … styles.css:488 が既に #805aa2 を当てている。私の行が【後から上書きして壊した】 🔑 型 …【直すつもりで、既に正しかった所まで塗り替える】。 色を直すときは【いま何色か・誰が決めているか】を先に引いてから書く。 なお、私の測定関数が .closing-band を「明るい背景」と誤判定したのは background-color しか辿らず【グラデーション（background-image）を見ていなかった】ため。 🔑【背景の明るさを測る道具は、単色しか見ていないことがある】 */ .cat-hero{ position:relative; overflow:hidden; color:var(--paper); padding:clamp(64px,8vh,110px) max(34px,calc((100vw - var(--max))/2)) clamp(52px,6vh,84px); background: radial-gradient(circle at 18% 16%, rgba(133,97,200,.20), transparent 34%), linear-gradient(110deg,#080c16 0%,#0b101c 58%,#101827 100%); } .cat-hero::before{ content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000,transparent 78%); } .cat-hero .hero-glow{ left:-300px; bottom:-360px } .cat-hero-in{ position:relative; z-index:3; max-width:820px } .cat-crumb{ display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:11px; letter-spacing:.14em; color:#7d8598 } .cat-crumb a{ color:#9aa3b4 } .cat-crumb a:hover{ color:var(--gold-bright) } .cat-crumb strong{ color:var(--paper); font-weight:500 } .cat-hero h1{ margin:0 0 20px; font:600 clamp(32px,4.4vw,58px)/1.42 var(--serif); letter-spacing:.09em } .cat-lead{ margin:0; max-width:660px; color:#b9b5ad; font-size:15px; line-height:2.15; letter-spacing:.03em } .cat-lead strong{ color:var(--gold-bright); font-weight:600 } .cat-note{ margin:26px 0 0; color:#7d7c79; font-size:12px; line-height:1.9 } /* 現在地のメニューに印（aria-current から拾う＝見た目と読み上げが必ず一致する） */ .nav-links a[aria-current="page"]{ color:var(--paper) } .nav-links a[aria-current="page"]::after{ right:0 } /* ══════════════════════════════════════════════════════════════════════════ ✦ Brain広場 ── 教材カタログ（2026-08-13・👑社長「独立したプラットフォームのように」） ────────────────────────────────────────────────────────────────────────── 🔒 中身は社長のリンク帳の実データ（題名・著者・値段・紹介リンク）だけ。 数字は1つも作っていません。 🔑 並び順は【値段の高い順】。報酬額ではなく値段で並べる、と画面にも書いてあります （何で並んでいるかを隠すと、それだけで広告に見えるため）。 ══════════════════════════════════════════════════════════════════════════ */ .brain-catalog{ background:linear-gradient(180deg, rgba(133,97,200,.05), transparent 320px) } /* 🚨 いちばん誤解されやすい所なので、いちばん目立たせる。 「一覧に載っている＝読んだ」と読まれると、それだけで信用を失うため。 */ .brain-caveat{ margin:0 0 14px; padding:16px 18px; max-width:900px; border:1px solid rgba(214,64,86,.32); border-left-width:3px; background:rgba(214,64,86,.05); color:#6b5257; font-size:13px; line-height:2; } .brain-caveat strong{ color:#9c4050 } .brain-verdict em{ font-style:normal; font-weight:700; color:#84837f } .brain-disclosure-inline{ margin:0 0 40px; padding:15px 18px; max-width:900px; border-left:2px solid var(--purple); background:rgba(133,97,200,.07); color:#5b5a58; font-size:12.5px; line-height:1.95; } .brain-disclosure-inline strong{ color:var(--ink) } /* 値段の帯で絞り込む欄（luxe.js が作ります。styles.css の .filter-button を借ります） */ .brain-filter{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 12px } .brain-filter-count{ margin:0 0 30px; color:#84837f; font-size:12px; letter-spacing:.06em } .brain-item[hidden], .brain-grid[hidden], .brain-group-title[hidden]{ display:none !important } .brain-group-title{ display:flex; align-items:baseline; gap:12px; margin:0 0 20px; font:600 17px/1.5 var(--serif); letter-spacing:.09em; color:var(--ink); } .brain-group-title::before{ content:""; width:18px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--luxe-1),var(--luxe-4)); } .brain-group-title small{ color:#8d8c88; font-family:var(--sans); font-size:11px; letter-spacing:.14em; font-weight:400 } .brain-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(316px,1fr)); gap:18px; margin:0 0 52px; } .brain-item{ position:relative; display:flex; flex-direction:column; gap:11px; padding:24px 24px 22px; background:#fff; border:1px solid #e2ddd4; box-shadow:0 14px 38px rgba(16,19,26,.05); transition:transform .45s var(--luxe-ease), box-shadow .45s ease, border-color .45s ease; } .brain-item:hover{ transform:translateY(-4px); box-shadow:0 28px 62px rgba(16,19,26,.13); border-color:#cfc6b6 } /* 高単価だけ、金の縁と上辺の虹で別格に見せる */ .brain-item.is-premium{ border-color:rgba(200,162,92,.55); background:linear-gradient(180deg,#fffdf7,#fff) } .brain-item.is-premium::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:linear-gradient(90deg,var(--luxe-1),var(--luxe-2),var(--luxe-4),var(--luxe-5)); } .brain-item-top{ display:flex; align-items:center; flex-wrap:wrap; gap:8px } .brain-badge{ padding:4px 9px; border:1px solid #ded7ca; color:#8a8579; font-size:10px; letter-spacing:.08em; white-space:nowrap; } .brain-price{ margin-left:auto; font:600 19px/1 var(--serif); letter-spacing:.04em; color:var(--ink); white-space:nowrap; } .brain-item.is-premium .brain-price{ background:linear-gradient(100deg,var(--gold-dark),var(--gold) 35%,#fff2cf 50%,var(--gold) 65%,var(--gold-dark)); background-size:250% 100%; background-position:var(--luxe-sheen) 0; -webkit-background-clip:text; background-clip:text; color:transparent; } @media (prefers-reduced-motion:no-preference){ .brain-item.is-premium .brain-price{ animation:luxe-sheen 7s ease-in-out infinite } } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .brain-item.is-premium .brain-price{ color:var(--gold-dark); background:none } } .brain-item h3{ margin:0; font:600 16px/1.65 var(--serif); letter-spacing:.03em } .brain-author{ margin:0; color:#83827e; font-size:12px; letter-spacing:.06em } .brain-author::before{ content:"著者　"; color:#a9a8a3; font-size:10px; letter-spacing:.12em } .brain-verdict{ margin:4px 0 0; padding:12px 14px; background:#f7f5f1; border-left:2px solid #ddd6c8; color:#6d6c68; font-size:12px; line-height:1.85; } .brain-verdict span{ display:block; margin-bottom:4px; color:var(--purple); font-size:10px; font-weight:700; letter-spacing:.16em; } .brain-buy{ margin-top:auto; padding-top:14px; border-top:1px solid #efeae1; color:#7d5f2e; font-size:13px; font-weight:700; letter-spacing:.08em; display:flex; align-items:center; gap:7px; transition:color .3s ease, gap .3s var(--luxe-ease); } .brain-buy span{ transition:transform .35s var(--luxe-ease) } .brain-buy:hover{ color:var(--ink); opacity:1 } .brain-buy:hover span{ transform:translate(4px,-3px) } .brain-tbd{ display:block; margin-top:10px; padding:10px 12px; background:rgba(214,64,86,.07); border-left:2px solid #d64056; color:#9c4050; font-style:normal; font-size:11.5px; line-height:1.8; } .brain-xlink{ color:var(--gold-bright); border-bottom:1px solid rgba(225,193,125,.5) } @media (max-width:560px){ .brain-grid{ grid-template-columns:1fr; gap:14px } .brain-item{ padding:20px } } /* ══════════════════════════════════════════════════════════════════════════ ✦ 22. Brain広場を【独立したサイト】に見せる（2026-08-13・👑社長の指示） ────────────────────────────────────────────────────────────────────────── 👑「忍スプとBrain広場だけ、ほかのサイト扱いみたいに。NEMUのサイト内にあるコンテンツだと 分かると、使う人が少なくなる気がする」／「無料ツールはNEMUのサイトの範囲内で良い」 🔑 いちばん効くのは【色を変えること】。同じ色・同じ書体・同じヘッダーだと、 文字を差し替えても「同じサイトの別ページ」に見えます。 NEMU MAKING LOG は【紫葡萄＋真珠】。Brain広場は【藍墨＋苔緑＋琥珀】にして、 見た瞬間に別の場だと分かるようにします。 🚨 独立して"見せる"ことと、運営者を"隠す"ことは違います。 フッターの運営者表示（.hiroba-operator）は必ず残すこと。 🔒 すべて body:has(.hiroba-header) の中に閉じてあるので、他の8ページには一切届きません。 ══════════════════════════════════════════════════════════════════════════ */ body:has(.hiroba-header){ --hi-ink:#16232b; /* 藍墨 — この広場の地の色 */ --hi-ink2:#1e2f3a; --hi-moss:#3f7d63; /* 苔緑 — 「読んだ人の場」の色 */ --hi-moss-l:#5aa383; --hi-amber:#c98a3c; /* 琥珀 — 値段と紹介リンク */ --hi-amber-l:#e0aa63; --hi-paper:#f7f5f0; /* 生成り */ background:var(--hi-paper); /* 🔑 色だけ替えても【書体が同じ】だと「同じサイトの別ページ」に見えます。 監査で「色は替えたのに書体は1文字も触っていない」と指摘され、ここで替えました。 見出しの明朝は個性が強く、一度でも他ページを見た人には同じ作り手だと即座に伝わります。 NEMU側 … Shippori Mincho B1 ／ Zen Kaku Gothic New Brain広場 … Zen Old Mincho ／ Noto Sans JP（読み込みは brain.html の head 側で差し替え済み） */ --serif:"Zen Old Mincho","Yu Mincho",serif; --sans:"Noto Sans JP","Yu Gothic",sans-serif; } /* 🔑 印の「-3度の傾き」は、このサイトのいちばん強い署名でした。 中の字を N→広 に替えても、同じ寸法・同じ傾き・同じ枠だと兄弟サイトに見えます。 広場の印は【傾けず・円形】にして、形そのものを別のものにします。 */ body:has(.hiroba-header) .hiroba-seal, body:has(.hiroba-header) .hiroba-mark{ transform:none !important; border-radius:50%; border-width:1.5px !important; } /* ── ヘッダー（NEMUの共通ヘッダーの上に、この広場の顔をかぶせる）── */ body:has(.hiroba-header) .hiroba-header{ background:rgba(22,35,43,.92); border-bottom-color:rgba(201,138,60,.3); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); } body:has(.hiroba-header) .hiroba-header::after{ background:linear-gradient(90deg,transparent,var(--hi-moss) 25%,var(--hi-amber) 55%,var(--hi-moss-l) 80%,transparent); } .hiroba-seal{ border-color:rgba(201,138,60,.75) !important; color:var(--hi-amber-l) !important; background:linear-gradient(145deg, rgba(63,125,99,.32), rgba(22,35,43,.2)); } body:has(.hiroba-header) .brand-copy strong{ letter-spacing:.12em } body:has(.hiroba-header) .brand-copy small{ color:#7f9aa3 } body:has(.hiroba-header) .nav-links a::after{ background:var(--hi-amber) } .hiroba-write{ padding:10px 20px; border:1px solid rgba(201,138,60,.7); color:var(--hi-amber-l) !important; font-size:12.5px; letter-spacing:.1em; white-space:nowrap; transition:background .3s ease, color .3s ease; } .hiroba-write:hover{ background:var(--hi-amber); color:var(--hi-ink) !important; opacity:1 } /* ── ヒーローも藍墨へ（NEMUの紫の光を、苔緑と琥珀に置き換える）── */ body:has(.hiroba-header) .cat-hero{ background: radial-gradient(circle at 16% 14%, rgba(63,125,99,.24), transparent 34%), linear-gradient(112deg, var(--hi-ink) 0%, var(--hi-ink2) 58%, #24404e 100%); } body:has(.hiroba-header) .cat-hero .hero-glow{ background:conic-gradient(from var(--luxe-rot), var(--hi-moss), var(--hi-amber), #5f8fa8, var(--hi-moss)); opacity:.22; } .hiroba-mark{ border-color:rgba(201,138,60,.8) !important; color:var(--hi-amber-l) !important; background:linear-gradient(145deg, rgba(63,125,99,.3), rgba(22,35,43,.15)) !important; } body:has(.hiroba-header) .cat-hero .eyebrow{ color:var(--hi-amber-l) } body:has(.hiroba-header) .cat-lead strong{ color:var(--hi-amber-l) } body:has(.hiroba-header) .hiroba-stats dd{ color:#eef2f0 } body:has(.hiroba-header) .hiroba-stats dt{ color:#7f9aa3 } /* ── 中身の面も、紫ではなく苔緑と琥珀で ── */ body:has(.hiroba-header) .hiroba-tabs{ background:rgba(247,245,240,.92) } body:has(.hiroba-header) .hiroba-tab::after{ background:linear-gradient(90deg,var(--hi-moss),var(--hi-amber)); } body:has(.hiroba-header) .hiroba-tab.is-active small{ color:var(--hi-moss) } body:has(.hiroba-header) .section-heading::after{ background:linear-gradient(90deg,var(--hi-moss),var(--hi-amber)); } body:has(.hiroba-header) .brain-group-title::before{ background:linear-gradient(90deg,var(--hi-moss),var(--hi-amber)); } body:has(.hiroba-header) .brain-item.is-premium::before{ background:linear-gradient(90deg,var(--hi-moss),var(--hi-amber),var(--hi-moss-l)); } body:has(.hiroba-header) .brain-item.is-premium{ border-color:rgba(201,138,60,.55) } body:has(.hiroba-header) .brain-buy{ color:#8a5b1f } body:has(.hiroba-header) .brain-verdict span{ color:var(--hi-moss) } body:has(.hiroba-header) .brain-price{ color:var(--hi-ink) } body:has(.hiroba-header) .hiroba-price{ color:#8a5b1f } body:has(.hiroba-header) .hiroba-rules span{ color:var(--hi-moss) } body:has(.hiroba-header) .hiroba-avatar{ border-color:rgba(63,125,99,.55); color:var(--hi-moss) } body:has(.hiroba-header) .hiroba-post.is-first{ border-color:rgba(63,125,99,.42) } body:has(.hiroba-header) .hiroba-post.is-empty strong{ color:var(--hi-moss) } body:has(.hiroba-header) .brain-caveat{ border-color:rgba(201,138,60,.4); background:rgba(201,138,60,.08); color:#5c4b3a } body:has(.hiroba-header) .brain-caveat strong{ color:#8a5b1f } body:has(.hiroba-header) .brain-disclosure-inline, body:has(.hiroba-header) .hiroba-draft-status{ border-left-color:var(--hi-moss); background:rgba(63,125,99,.08) } body:has(.hiroba-header) .luxe-progress{ background:linear-gradient(90deg,var(--hi-moss),var(--hi-amber),var(--hi-moss-l)); } body:has(.hiroba-header) .brain-section{ background:linear-gradient(120deg,#eef1ee,#e6ece9) } /* ── 締めの帯も、忍スプの案内から「あなたのひとつ」へ ── */ .hiroba-closing{ background:linear-gradient(100deg, rgba(22,35,43,.97), rgba(30,47,58,.72)) !important; } .hiroba-closing::after{ background: radial-gradient(120% 70% at 12% 120%, rgba(63,125,99,.4), transparent 62%), radial-gradient(80% 46% at 88% -8%, rgba(201,138,60,.22), transparent 60%) !important; } .hiroba-closing h2{ background:linear-gradient(100deg,#efe9df 0%,#fff 22%,var(--hi-amber-l) 44%,#fff 62%,#efe9df 100%) !important; } /* ── フッター（運営者表示はここ。小さくてよいが、必ず在ること）── */ .hiroba-footer{ background:#101a20 !important } .hiroba-footer::before{ background:linear-gradient(90deg,transparent,var(--hi-moss) 25%,var(--hi-amber) 55%,var(--hi-moss-l) 80%,transparent) !important; } .hiroba-footer small{ display:grid; gap:7px; justify-items:end; text-align:right } .hiroba-operator{ color:#93a9b1; font-size:11.5px; letter-spacing:.06em } .hiroba-operator a{ color:var(--hi-amber-l); border-bottom:1px solid rgba(224,170,99,.45) } .hiroba-affiliate{ max-width:42ch; color:#7f939b; font-size:10.5px; line-height:1.8; letter-spacing:.02em } @media (max-width:820px){ .hiroba-footer small{ justify-items:start; text-align:left } .hiroba-affiliate{ max-width:none } } /* ══════════════════════════════════════════════════════════════════════════ ✦ 23. つくる道具店 ── 3つ目の独立サイト（2026-08-14） ────────────────────────────────────────────────────────────────────────── 👑「無料と有料（Brain）混在にしましょうかね。まずは無料の配布していくよ。 そしたらさ。やっぱりこれも独立したページにしましょう。NEMUのサイト感消してください。 そしたら単独で私が公開できるので。ドメインも独立だね。ニンスプと同じように」 🎨 3つの場を、色と書体で完全に別物にします（同じだと兄弟サイトに見えるため） NEMU MAKING LOG … 紫葡萄 #351846 ／ Shippori Mincho B1 ＋ Zen Kaku Gothic New Brain広場 … 藍墨 #16232b ／ Zen Old Mincho ＋ Noto Sans JP つくる道具店 … 柿渋 #9c4a2f ／ Shippori Antique B1 ＋ Zen Maru Gothic 🚨 運営者表示（.hiroba-operator）は消さないこと。理由は Brain広場と同じです。 🔒 すべて body:has(.douguten-header) の中に閉じてあり、他のページには一切届きません。 ══════════════════════════════════════════════════════════════════════════ */ body:has(.douguten-header){ --dg-kaki:#9c4a2f; /* 柿渋 — 暖簾の色。この店の主 */ --dg-kaki-l:#c06a48; --dg-navy:#2b3a4a; /* 鉄紺 — 道具の鋼 */ --dg-navy2:#3a4d60; --dg-yamabuki:#d9a441; /* 山吹 — 値段と印 */ --dg-paper:#f7f4ee; /* 生成り */ background:var(--dg-paper); --serif:"Shippori Antique B1","Yu Gothic",sans-serif; --sans:"Zen Maru Gothic","Yu Gothic",sans-serif; } /* ── 暖簾のヘッダー ── */ body:has(.douguten-header) .douguten-header{ background:rgba(43,58,74,.94); border-bottom:2px solid var(--dg-kaki); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); } body:has(.douguten-header) .douguten-header::after{ background:linear-gradient(90deg,var(--dg-kaki),var(--dg-yamabuki) 50%,var(--dg-kaki)); opacity:.85; } .douguten-seal{ border-color:var(--dg-yamabuki) !important; color:var(--dg-yamabuki) !important; background:linear-gradient(160deg, rgba(156,74,47,.42), rgba(43,58,74,.2)); transform:none !important; border-radius:6px; border-width:1.5px !important; } body:has(.douguten-header) .brand-copy small{ color:#93a3b2 } body:has(.douguten-header) .nav-links a::after{ background:var(--dg-yamabuki) } .douguten-cta{ padding:10px 20px; border:1px solid var(--dg-yamabuki); color:var(--dg-yamabuki) !important; font-size:12.5px; letter-spacing:.08em; white-space:nowrap; transition:background .3s ease, color .3s ease; } .douguten-cta:hover{ background:var(--dg-yamabuki); color:var(--dg-navy) !important; opacity:1 } /* ── ヒーロー（藍ではなく鉄紺＋柿渋）── */ body:has(.douguten-header) .cat-hero{ background: radial-gradient(circle at 84% 12%, rgba(156,74,47,.30), transparent 40%), linear-gradient(108deg, var(--dg-navy) 0%, var(--dg-navy2) 62%, #46586a 100%); } body:has(.douguten-header) .cat-hero .hero-glow{ background:conic-gradient(from var(--luxe-rot), var(--dg-kaki), var(--dg-yamabuki), #6b8ba3, var(--dg-kaki)); opacity:.24; } .douguten-mark{ border-color:var(--dg-yamabuki) !important; color:var(--dg-yamabuki) !important; background:linear-gradient(160deg, rgba(156,74,47,.4), rgba(43,58,74,.15)) !important; transform:none !important; border-radius:10px; border-width:1.5px !important; } body:has(.douguten-header) .cat-hero .eyebrow{ color:var(--dg-yamabuki) } body:has(.douguten-header) .cat-lead strong{ color:var(--dg-yamabuki) } body:has(.douguten-header) .hiroba-stats dd{ color:#f2ede4 } body:has(.douguten-header) .hiroba-stats dt{ color:#93a3b2 } /* ── 中身 ── */ body:has(.douguten-header) .section-heading::after, body:has(.douguten-header) .douguten-rules span{ color:var(--dg-kaki) } body:has(.douguten-header) .section-heading::after{ background:linear-gradient(90deg,var(--dg-kaki),var(--dg-yamabuki)); } body:has(.douguten-header) .content-section .eyebrow{ color:#7d4327 } body:has(.douguten-header) .story-card::before{ background:linear-gradient(90deg,var(--dg-kaki),var(--dg-yamabuki),var(--dg-kaki-l)); } /* 無料の札は、ひと目で「無料」と分かるように柿渋で塗る */ body:has(.douguten-header) .story-image > span{ background:var(--dg-kaki); color:#fff; font-weight:700; letter-spacing:.16em; } body:has(.douguten-header) .brain-price{ color:var(--dg-navy) } body:has(.douguten-header) .brain-buy{ color:#7d4327 } body:has(.douguten-header) .brain-caveat{ border-color:rgba(156,74,47,.4); background:rgba(156,74,47,.07); color:#5c4437; } body:has(.douguten-header) .brain-caveat strong{ color:#7d4327 } body:has(.douguten-header) .brain-disclosure-inline{ border-left-color:var(--dg-kaki); background:rgba(156,74,47,.07); } body:has(.douguten-header) .luxe-progress{ background:linear-gradient(90deg,var(--dg-kaki),var(--dg-yamabuki),var(--dg-kaki-l)); } body:has(.douguten-header) .hiroba-rules li{ background:rgba(255,255,255,.62) } body:has(.douguten-header) .hiroba-draft-status{ border-left-color:var(--dg-kaki); background:rgba(156,74,47,.08) } /* X文字数カウンターの見本アイコン（NEMUの絵を外した跡） */ .x-preview-avatar{ display:block; width:44px; height:44px; flex:none; border-radius:50%; background:linear-gradient(150deg,var(--dg-navy2),var(--dg-kaki)); opacity:.55; } /* ── 締めとフッター ── */ .douguten-closing{ background:linear-gradient(100deg, rgba(43,58,74,.97), rgba(58,77,96,.7)) !important; } .douguten-closing::after{ background: radial-gradient(120% 70% at 84% 120%, rgba(156,74,47,.45), transparent 62%), radial-gradient(80% 46% at 14% -8%, rgba(217,164,65,.22), transparent 60%) !important; } .douguten-closing h2{ background:linear-gradient(100deg,#f3ede2 0%,#fff 22%,var(--dg-yamabuki) 44%,#fff 62%,#f3ede2 100%) !important; } .douguten-footer{ background:#1c252e !important } .douguten-footer::before{ background:linear-gradient(90deg,transparent,var(--dg-kaki) 30%,var(--dg-yamabuki) 55%,var(--dg-kaki-l) 80%,transparent) !important; } .douguten-footer small{ display:grid; gap:7px; justify-items:end; text-align:right } body:has(.douguten-header) .hiroba-operator a{ color:var(--dg-yamabuki); border-bottom-color:rgba(217,164,65,.45) } @media (max-width:820px){ .douguten-footer small{ justify-items:start; text-align:left } } /* ── Brain広場のタブ（luxe.js が作ります）───────────────────────────── 👑社長「タブとかで入れ替えられるように」。並び順を作り手が決めずに、見る人が選ぶ形。 🔵 JavaScriptが動かない環境ではタブ自体が出ず、3つの節が縦に全部並びます。 */ .hiroba-tabs{ position:sticky; top:var(--header-h); z-index:40; display:flex; gap:0; overflow-x:auto; scrollbar-width:none; padding:0 max(20px,calc((100vw - var(--max))/2)); background:rgba(251,248,253,.9); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid var(--line-light); } .hiroba-tabs::-webkit-scrollbar{ display:none } .hiroba-tab{ position:relative; flex:none; display:grid; gap:3px; justify-items:center; padding:15px 24px 13px; border:0; background:transparent; cursor:pointer; color:#84837f; font-family:var(--serif); font-size:14.5px; font-weight:600; letter-spacing:.07em; transition:color .3s ease; } .hiroba-tab small{ font-family:var(--sans); font-size:10px; font-weight:400; letter-spacing:.1em; color:#a8a7a2 } .hiroba-tab::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--luxe-1),var(--luxe-2),var(--luxe-4)); transform:scaleX(0); transition:transform .38s var(--luxe-ease); } .hiroba-tab:hover{ color:var(--ink) } .hiroba-tab.is-active{ color:var(--ink) } .hiroba-tab.is-active small{ color:#7d5f2e } .hiroba-tab.is-active::after{ transform:scaleX(1) } .hiroba-tab:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:-3px } @media (max-width:560px){ .hiroba-tab{ padding:13px 16px 11px; font-size:13px } } /* ── みんなのおすすめ：一人ひとつのコンパクトな札 ────────────────────── 🔒 NEMU も同じ大きさの1枠。言い出しっぺでも札は大きくしません （大きさで序列を作ると、2人目が「自分は脇役」だと感じます）。 */ .hiroba-posts{ grid-template-columns:repeat(auto-fill,minmax(238px,1fr)) !important; gap:14px !important } .hiroba-post{ padding:18px 20px !important } .hiroba-post header{ margin-bottom:12px !important; gap:10px !important } .hiroba-avatar{ width:32px !important; height:32px !important; font-size:14px !important } .hiroba-post header strong{ font-size:13.5px !important } .hiroba-post header small{ font-size:10.5px !important; margin-top:3px !important } .hiroba-post h4{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 10px !important; font-size:14.5px !important; line-height:1.6 !important; } .hiroba-price{ font-family:var(--serif); font-size:13px; font-weight:600; color:#7d5f2e; white-space:nowrap; } .hiroba-post .hiroba-placeholder{ padding:11px 13px; font-size:11.5px; line-height:1.85 } .hiroba-post.is-empty p{ font-size:13.5px !important; line-height:1.8 !important } .hiroba-post.is-empty strong{ display:block; color:#7d5f2e; font-size:16px; margin-bottom:6px } .hiroba-post.is-empty small{ display:block; margin-top:4px } /* ── Brain広場の名乗り（独立したプラットフォームとして立たせる）────────── 🔑 「NEMUのページの一部」ではなく【この広場そのもの】に印と名前を与える。 パンくずでNEMU MAKING LOG に属することは示しつつ、見出しは広場の名で立てる。 */ .hiroba-brand{ display:flex; align-items:center; gap:18px; margin-bottom:22px } .hiroba-mark{ display:grid; place-items:center; width:58px; height:58px; flex:none; border:1px solid rgba(200,162,92,.7); color:var(--gold-bright); font:600 26px/1 var(--serif); letter-spacing:0; transform:rotate(-3deg); background:linear-gradient(145deg, rgba(133,97,200,.22), rgba(8,12,22,.1)); box-shadow:0 12px 34px rgba(0,0,0,.4), inset 0 0 22px rgba(200,162,92,.12); } .hiroba-brand .eyebrow{ margin-bottom:8px } .hiroba-brand h1{ margin:0 } .hiroba-stats{ display:flex; flex-wrap:wrap; gap:0; margin:34px 0 0; padding:0; border-left:1px solid rgba(232,227,216,.16); } .hiroba-stats div{ padding:2px 26px; border-right:1px solid rgba(232,227,216,.16) } .hiroba-stats dt{ color:#697182; font-size:9px; letter-spacing:.24em; margin-bottom:8px } .hiroba-stats dd{ margin:0; color:var(--paper); font:600 26px/1 var(--serif); letter-spacing:.04em; } .hiroba-stats dd span{ margin-left:5px; color:#9aa3b4; font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:.08em } .hiroba-cta{ margin-top:34px } @media (max-width:560px){ .hiroba-mark{ width:46px; height:46px; font-size:21px } .hiroba-stats div{ padding:2px 16px } .hiroba-stats dd{ font-size:21px } } /* ── Brain広場（交流スペース）──────────────────────────────────────────── */ .hiroba-lead{ margin-bottom:40px } .hiroba-lead > p{ max-width:760px; color:#5f5e5c; font-size:14.5px; line-height:2.1 } .hiroba-lead > p strong{ color:var(--ink) } .hiroba-rules{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:26px 0 0; padding:0; list-style:none; background:var(--line-light) } .hiroba-rules li{ display:flex; gap:16px; align-items:flex-start; padding:22px 20px; background:rgba(255,255,255,.5) } .hiroba-rules span{ color:var(--purple); font:600 15px/1 var(--serif) } .hiroba-rules strong{ display:block; font:600 15px/1.6 var(--serif); letter-spacing:.05em } .hiroba-rules small{ display:block; margin-top:5px; color:#7c7b78; font-size:12px; line-height:1.7 } .hiroba-form{ padding:34px; border:1px solid var(--line-light); background:rgba(255,255,255,.62) } .hiroba-form h3{ margin:0 0 22px; font:600 19px/1.5 var(--serif); letter-spacing:.06em } .hiroba-form label{ display:block; margin-bottom:16px; color:#6b6a67; font-size:12px; letter-spacing:.1em } .hiroba-row{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px } .hiroba-form input,.hiroba-form textarea{ display:block; width:100%; margin-top:8px; padding:13px 15px; border:1px solid #d8d2c7; background:#fff; color:var(--ink); font-size:14px; letter-spacing:.02em; } .hiroba-form textarea{ resize:vertical; line-height:1.9 } @supports (field-sizing: content){ html.luxe-fs .hiroba-form textarea{ field-sizing:content; min-height:8.6em; max-height:50vh } } .hiroba-form input:disabled,.hiroba-form textarea:disabled{ background:#f4f1ec; color:#9a9791; cursor:not-allowed } .hiroba-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:6px } .hiroba-note{ margin:0; color:#8a7a4e; font-size:11.5px; line-height:1.8 } /* 下書きの保存まわり（luxe.js が入力欄を開けたときだけ出ます） */ .hiroba-clear{ padding:9px 16px; border:1px solid #d0c9bd; background:transparent; color:#6b6a67; font-size:12px; letter-spacing:.08em; cursor:pointer; transition:border-color .3s ease, color .3s ease, background .3s ease; } .hiroba-clear:hover{ border-color:var(--purple); color:var(--purple); background:rgba(133,97,200,.06) } .hiroba-draft-status{ flex:1 1 100%; margin:0; padding:11px 14px; border-left:2px solid var(--purple); background:rgba(133,97,200,.07); color:#5e5a63; font-size:12px; line-height:1.85; } .hiroba-posts{ display:grid; grid-template-columns:1.25fr .75fr; gap:20px; margin-top:34px } .hiroba-post{ padding:26px 28px; border:1px solid var(--line-light); background:#fff } .hiroba-post.is-first{ border-color:rgba(133,97,200,.42); box-shadow:0 18px 44px rgba(16,19,26,.07) } .hiroba-post header{ display:flex; align-items:center; gap:13px; margin-bottom:18px } .hiroba-post header > div{ margin-right:auto } .hiroba-post header strong{ display:block; font:600 15px/1.3 var(--serif); letter-spacing:.06em } .hiroba-post header small{ display:block; margin-top:4px; color:#8b8a86; font-size:11px; letter-spacing:.06em } .hiroba-avatar{ display:grid; place-items:center; width:38px; height:38px; flex:none; border:1px solid rgba(133,97,200,.55); color:var(--purple); font:700 17px/1 var(--serif); transform:rotate(-3deg); } .hiroba-post h4{ margin:0 0 12px; font:600 17px/1.6 var(--serif); letter-spacing:.05em } .hiroba-placeholder{ margin:0; padding:16px 18px; border-left:2px solid var(--gold); background:rgba(200,162,92,.08); color:#6d6b66; font-size:13px; line-height:1.95 } .hiroba-post.is-empty{ display:grid; place-items:center; text-align:center; background:rgba(255,255,255,.45); border-style:dashed } .hiroba-post.is-empty p{ margin:0; color:#8b8a86; font:600 15px/1.9 var(--serif); letter-spacing:.06em } .hiroba-post.is-empty small{ color:#9a9791; font-family:var(--sans); font-size:11.5px; font-weight:400; letter-spacing:.02em } @media (max-width:820px){ .hiroba-rules{ grid-template-columns:1fr } .hiroba-posts{ grid-template-columns:1fr } .hiroba-row{ grid-template-columns:1fr } .cat-hero .hero-glow{ width:380px; height:380px; left:-220px; bottom:-240px } } /* ══════════════════════════════════════════════════════════════════════════ ✦ 21. 画面分割くん（screen-splitter.html）の救出（2026-08-13） ────────────────────────────────────────────────────────────────────────── 🔬 実測して分かったこと（2つ） ① **390px幅で横に661pxはみ出していた。**犯人は `.hash-value` ＝ ZIPの照合用ハッシュ（16進の長い1語）。**空白が1つも無い語は折り返せない**ので、 その語の長さがそのままページの最小幅になります。 🔑 型 …【はみ出しの原因は"大きな箱"とは限らない。"折り返せない1語"のことがある】 枠を1つずつ測っても見つからないのはこのため（要素は誰もはみ出していなかった） ② **このページが使っている8つのclassが、styles.css から消えていた** （.download-hero / .download-copy / .download-thumb / .download-section / .feature-grid / .primary-action / .brand-mark / .download-info） 2026-08-06 の作り直しでCSSが新しくなった際、このページだけ取り残された結果、 **ほぼ無装飾のまま公開されていました。** 🔑 型 …【CSSを作り直したら、"そのCSSを使っている全ページ"を開いて確かめる】 このページはトップから2階層離れていたので、誰の目にも入らなかった 🔒 すべて body:has(.download-hero) の中に閉じてあるので、他の8ページには一切届きません。 ══════════════════════════════════════════════════════════════════════════ */ body:has(.download-hero){ /* ① いちばん大事な1行。長い1語を折り返せるようにする */ } body:has(.download-hero) .hash-value{ display:block; margin-top:6px; padding:10px 12px; overflow-wrap:anywhere; word-break:break-all; /* ← はみ出しの直接の原因を断つ */ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; line-height:1.7; color:#5f5e5c; background:#f4f1ec; border:1px solid #e3ddd3; } body:has(.download-hero) main{ max-width:var(--max); margin:0 auto; padding:0 max(20px,calc((100vw - var(--max))/2)) } body:has(.download-hero) .brand-mark{ display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid rgba(200,162,92,.65); color:var(--gold-bright); font:700 15px/1 var(--serif); transform:rotate(-3deg); } body:has(.download-hero) .brand-mark::before{ content:"分" } body:has(.download-hero) .download-hero{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(48px,7vh,84px) 0 clamp(40px,6vh,68px); } body:has(.download-hero) .download-copy h1{ margin:14px 0 20px; font:600 clamp(30px,4.4vw,52px)/1.4 var(--serif); letter-spacing:.08em; } body:has(.download-hero) .download-copy .lead{ margin:0 0 30px; color:#63625f; font-size:15px; line-height:2.1; letter-spacing:.03em; } body:has(.download-hero) .download-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px } body:has(.download-hero) .primary-action{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:13px 30px; color:var(--night); background:linear-gradient(180deg,var(--gold-bright),#b58945); font-weight:700; font-size:13px; letter-spacing:.12em; box-shadow:0 10px 26px rgba(181,137,69,.26); transition:transform .2s ease, box-shadow .4s ease; } body:has(.download-hero) .primary-action:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(181,137,69,.4) } body:has(.download-hero) .primary-action::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:44%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-160%); } @media (prefers-reduced-motion:no-preference){ body:has(.download-hero) .primary-action::after{ animation:luxe-sweep 5.2s cubic-bezier(.35,0,.15,1) infinite } } body:has(.download-hero) .download-thumb{ margin:0; overflow:hidden; border:1px solid #ded9d0; background:var(--night-2); box-shadow:0 22px 56px rgba(16,19,26,.10); } body:has(.download-hero) .download-thumb img{ width:100%; height:auto; transition:transform .7s var(--luxe-ease) } body:has(.download-hero) .download-thumb:hover img{ transform:scale(1.04) } body:has(.download-hero) .download-section{ padding:clamp(44px,6vh,72px) 0; border-top:1px solid var(--line-light) } body:has(.download-hero) .download-section .section-heading{ display:block; margin-bottom:30px } body:has(.download-hero) .download-section h2{ margin:8px 0 0; font:600 clamp(24px,3.2vw,36px)/1.4 var(--serif); letter-spacing:.09em } body:has(.download-hero) .feature-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } body:has(.download-hero) .feature-grid article{ padding:24px; background:#fff; border:1px solid #e2ddd4; box-shadow:0 12px 32px rgba(16,19,26,.05); transition:transform .45s var(--luxe-ease), box-shadow .45s ease; } body:has(.download-hero) .feature-grid article:hover{ transform:translateY(-3px); box-shadow:0 24px 54px rgba(16,19,26,.11) } body:has(.download-hero) .feature-grid h3{ margin:0 0 10px; font:600 16px/1.6 var(--serif); letter-spacing:.05em } body:has(.download-hero) .feature-grid p{ margin:0; color:#6d6c68; font-size:13px; line-height:1.95 } body:has(.download-hero) .download-info{ display:grid; gap:12px; margin:0; color:#5f5e5c; font-size:13.5px; line-height:1.9 } body:has(.download-hero) .download-section.caution{ border-top:2px solid rgba(214,64,86,.45); } body:has(.download-hero) .download-section.caution h2{ color:#9c4050 } @media (max-width:820px){ body:has(.download-hero) .download-hero{ grid-template-columns:1fr; gap:28px } } /* ══ 18. 「動きを減らす」設定のときは全部止める（最後に置いて確実に勝たせる）══ 🔑 既存 styles.css:600 にも同じ配慮があります。ここは【後から足した分】の受け皿です。 */ @media (prefers-reduced-motion:reduce){ .luxe-grain, .luxe-ink{ display:none } *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }