/* ==========================================================================
Springl トップページ試作（第6版）
色・形・書体・余白は assets/tokens.css だけを参照する（生の値を書かない）
── 守っていること ────────────────────────────────────
1 地は灰色、面は白。囲み線と影に頼らず、地と面の差で構造を出す
2 青はナビ・事例の帯・押せるものだけ。地には置かない
3 デュオトーンは事例とテーマ別とインタビューだけ。
ニュースの写真は「何が起きたか」を伝える情報なので素のまま
4 **画面にデザインの説明を書かない。** 節の下に「〜の順に並べています」
のような注釈を置かない。実在の媒体はやらないし、
生成AIが作ったページの匂いがいちばん出るところ（2026-09-20 編集長のご指摘）
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--sp-font);
font-size: var(--sp-fs-body);
line-height: 1.85;
color: var(--sp-text);
background: var(--sp-bg);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* **`hidden` を必ず効かせる。** UA 由来の display:none は、クラス側で
display を指定した瞬間に負ける（実測: 0件でも「あとで読む 0」が出ていた） */
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
/* **題名は右端まで文字を詰める。** 行の長さを揃える指定（text-wrap: balance）も、
文節で切る指定（word-break: auto-phrase）も使わない（2026-09-23 編集長のご指摘）。
どちらも行を右端より手前で折るので、題名の右に空きができ「改行位置がおかしい」と見えた。
一度 auto-phrase を足して**かえって悪化させた**（balance と重なり、さらに短く折れた）。
**text-wrap: pretty も使わない。** 最後の行の1文字を避けるが、2行の題名では1行目を詰める
（404 の題名で実測）。最後の行に1文字だけ残ることはある。
theme/check-theme.js が「普通に折り返したとき」と比べて、早く折れた題名を数える */
/* **2色で描く。** 外に地の色の輪を重ねるので、白い面でも紺のフッターでも
どちらかが必ず見える（単色の青い輪はフッターの上で消えていた）。
WCAG 2.4.13 Focus Appearance の考え方 */
:focus-visible {
outline: 2px solid var(--sp-focus);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--sp-focus-halo);
border-radius: 3px;
}
/* 紺のフッター・青い帯の中は、地が暗いので輪の内外を入れ替える */
.foot :focus-visible, .sec--case :focus-visible {
outline-color: #ffd166;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
}
.wrap {
max-width: var(--sp-max);
margin: 0 auto;
padding-inline: var(--sp-gutter);
}
html { scroll-behavior: smooth; }
/* 固定ヘッダーの高さ＋少しの余白。**帯の高さを変えたらここも測り直す**
（実測 2026-09-20: 広い幅 131px ／ 600px以下 123px） */
[id] { scroll-margin-top: 160px; } /* 帯を 80px にした（0.5.39）ぶん 16px 足した */
@media (max-width: 600px) { [id] { scroll-margin-top: 136px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* --- ③ 画像は青のデュオトーンで統一（掛けるのは .ph--tint だけ）-------------
実際の写真は撮り手も被写体もばらばらになる。青で染めると媒体として揃い、
ホバーで元の色に戻すと「気が利いている」と感じる仕掛けになる。
**ニュース（リードと新着）には掛けない。** あそこの写真は
「何が起きたか」を伝える情報で、飾りではない。
掛けるのは事例・テーマ別・インタビューの一覧（写真が質感として働く場所）。
試作の画像は灰色の模様で、実写真の代わり（染まり方が分かるようにしてある） */
.ph {
position: relative;
overflow: hidden;
/* 実写真の代わり。**地を白にしたので、模様も明るくする。**
灰色の地のときは暗い模様でちょうど良かったが、白の上だと
暗い塊が並んで見え、画面全体が重くなる（実測で見て直した）。
明暗の幅は残す——事例の帯では紺で染めるので、
中間の明るさだけだと平坦な一色になって奥行きが出ない */
background:
radial-gradient(60% 80% at 22% 20%, #ffffff 0%, transparent 60%),
radial-gradient(50% 70% at 78% 72%, #d9d9d9 0%, transparent 62%),
radial-gradient(70% 90% at 96% 8%, #ededed 0%, transparent 60%),
linear-gradient(150deg, #e6e6e6 0%, #c4c4c4 52%, #9c9c9c 100%);
}
/* **本物の写真が入ったら、枠いっぱいに切り抜く**（2026-09-23 本番で壊れて発見）。
試作は色の面だけで作っていて、![]()
が入った形を一度も測っていなかった。
WordPress の ![]()
は width/height 属性（例 1024×683）を持つので、
指定が無いと元の大きさのまま広がり、枠の比率（16:9 など）も効かない */
.ph > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* 事例の帯だけは、染める前の明暗の幅を広く取る（紺で染めるため） */
.sec--case .ph {
background:
radial-gradient(55% 75% at 24% 24%, #e8ebf1 0%, transparent 58%),
radial-gradient(45% 65% at 76% 70%, #7d859a 0%, transparent 60%),
radial-gradient(95% 130% at 52% 118%, #191e2b 0%, transparent 72%),
linear-gradient(152deg, #b6bdcb 0%, #454c60 55%, #222836 100%);
}
/* 一覧のサムネイルも角を丸める（写真が四角いままだと、
丸めたカードの中で角だけが尖って見える）。
**`.card__thumb` はここに入れない**——カード自身が角を切るため */
.latest__thumb, .ccard__thumb, .icard__thumb { border-radius: var(--sp-radius); }
.ph--tint::after { /* 染める層 */
content: "";
position: absolute;
inset: 0;
background: var(--sp-blue);
mix-blend-mode: color;
opacity: 0.8;
transition: opacity 0.45s var(--sp-ease);
}
.ph__label { /* 試作の目印。実装時に消す */
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
z-index: 1;
font-family: var(--sp-font-mono);
font-size: var(--sp-fs-eyebrow);
font-weight: 400;
letter-spacing: var(--sp-ls-label);
color: rgba(255, 255, 255, 0.45);
}
a:hover .ph--tint::after,
article:hover .ph--tint::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ph--tint::after { transition: none; } }
/* --- 目印「循環する輪」＋ 唯一の動き ---------------------------------------
Springl ＝ **Sustainability と Profit が Ring のように循環する**
（2026-09-20 編集長のご説明）。輪を2つの弧で作り、
「2つのものが巡っている」ことを形で示す。
**右肩上がりの線は誤り**だった（循環していないので意味が逆）。
動きはこの輪が1回まわるだけ。あちこち動かすと安っぽくなる */
/* **2つの弧を違う色にする。** 名前の意味（Sustainability と Profit が
Ring のように循環する）が、色でも読めるようになる。
`--sp-ring-2` は `