/* サービス変更録 — 案C「看板」
角丸ゼロ / 2px罫線 / 赤は「値上げ・終了」専用。
Webフォントは各HTMLので読み込む(@importより速い)。 */
/* ---- トークン：ライト（既定） ---- */
:root{
--bg:#f3f2f2; --fg:#201e1d;
--line:#201e1d; --line-soft:rgba(32,30,29,.22); --line-mid:#bab6b6;
--muted:#7d7979; --muted-strong:#605d5d;
--accent:#ec3013; --accent-600:#dd2b0f; --accent-700:#ae1800;
--accent-ink:#ae1800; --on-accent:#f3f2f2;
--chip-ink:#201e1d;
--font:"Archivo","Zen Kaku Gothic New",system-ui,sans-serif;
}
/* ---- トークン：ダーク（OS設定。明示的にライトを選んだ場合は除く） ---- */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#201e1d; --fg:#f8f4f4;
--line:#f8f4f4; --line-soft:rgba(248,244,244,.26); --line-mid:#7d7979;
--muted:#9b9797; --muted-strong:#bab6b6;
--accent:#ff563c; --accent-600:#ff9783; --accent-700:#ffc4b8;
--accent-ink:#ff9783; --on-accent:#201e1d;
--chip-ink:#201e1d;
}
}
/* ---- トークン：ダーク（トグルで明示選択） ---- */
:root[data-theme="dark"]{
--bg:#201e1d; --fg:#f8f4f4;
--line:#f8f4f4; --line-soft:rgba(248,244,244,.26); --line-mid:#7d7979;
--muted:#9b9797; --muted-strong:#bab6b6;
--accent:#ff563c; --accent-600:#ff9783; --accent-700:#ffc4b8;
--accent-ink:#ff9783; --on-accent:#201e1d;
--chip-ink:#201e1d;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
background:var(--bg); color:var(--fg);
font-family:var(--font); font-weight:700; font-size:16px; line-height:1.5;
font-variant-numeric:tabular-nums;
-webkit-text-size-adjust:100%;
}
a{color:var(--fg); text-decoration:none}
a:hover{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
::selection{background:color-mix(in srgb, var(--accent) 22%, transparent)}
h1,h2,h3{margin:0; font-weight:900; letter-spacing:-.01em}
.num{font-family:"Archivo",var(--font)}
/* ---- 外枠 ----
デザイン指定は「PC 1280px」だが、それはアートボードの幅であって上限ではない。
1280pxで固定すると3440pxのウルトラワイドで画面の37%しか使わず、
左右に1080pxずつ余白が出て「小さいサイト」に見えてしまう。
看板(掲示板)というコンセプト上、横幅は札の枚数として使うほうが正しい。 */
.frame{max-width:2100px; margin:0 auto; border-inline:2px solid var(--line)}
@media (max-width:900px){ .frame{max-width:none; border-inline:0} }
/* ---- ヘッダー ---- */
.site-header{
display:flex; align-items:center; gap:16px;
padding:14px 16px; border-bottom:2px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:900; letter-spacing:.02em}
.brand .mark{
width:30px; height:30px; flex:none;
background:var(--accent); color:var(--on-accent);
display:grid; place-items:center; font-size:17px; font-weight:900;
}
.tagline{display:none}
.head-links{margin-left:auto; display:flex; align-items:center; gap:14px}
.head-links a{font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted-strong)}
.head-links a:hover{color:var(--accent-ink)}
.theme-toggle{
padding:7px 12px; border:2px solid var(--line-mid); border-radius:0;
background:none; color:var(--muted-strong); font:inherit; font-size:11px;
font-weight:700; letter-spacing:.06em; cursor:pointer;
}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent-ink)}
/* ---- 日付バー（情報の鮮度を一目で示す。企画書: 全ページに最終確認日） ---- */
.datebar{
display:flex; gap:2px; background:var(--line);
border-bottom:2px solid var(--line);
}
/* ⚠️ 狭い画面ではラベルを上に積むこと。
ラベルと日付を横並びにすると、JSが「本日」セルを表示した瞬間に2セルになり、
26pxの日付が縮まないので横にはみ出す（375px幅で43pxはみ出していた）。
.dcell に flex:1 1 0; min-width:0 があっても、中の文字は固有幅より縮まない。 */
.dcell{
flex:1 1 0; min-width:0; background:var(--bg);
padding:8px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
}
.dcell .dl{
flex:none; font-size:11px; font-weight:900; letter-spacing:.14em;
color:var(--muted); text-transform:uppercase;
}
.dcell .dv{font-size:20px; font-weight:900; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.dcell.today .dv{color:var(--accent-ink)}
@media (min-width:700px){
.dcell{flex-direction:row; align-items:baseline; gap:10px; padding:10px 16px}
.dcell .dv{font-size:26px}
}
/* 広告表示（ファーストビュー必須）
A8.netの提携条件：「広告とわかる表示をファーストビュー等の閲覧できる位置に」。
景品表示法のステマ規制でも広告であることの明瞭な表示が求められる。
目立たせすぎず、しかし最初の画面に必ず入る位置に置く。 */
.pr-note{
padding:6px 16px;
border-bottom:2px solid var(--line-soft);
font-size:11px; font-weight:700; letter-spacing:.02em;
color:var(--muted);
}
@media (min-width:900px){ .pr-note{padding:7px 32px} }
/* hidden属性は必ず効かせる。
ブラウザ既定の [hidden]{display:none} は要素セレクタなので、
.service-list{display:grid} のようなクラス指定に負けて隠れなくなる。
実際にトップの全件リストが hidden のまま表示され続ける不具合が出た。 */
[hidden]{display:none!important}
/* ---- ヒーロー ---- */
.hero{border-bottom:2px solid var(--line)}
.hero h1{padding:24px 16px; font-size:34px; line-height:1.08; letter-spacing:-.02em}
.hero .sub{margin:0; padding:0 16px 20px; display:flex; flex-direction:column; gap:6px}
.hero .sub .d{font-size:15px; font-weight:700; color:var(--muted-strong)}
.hero .sub .c{font-size:12px; font-weight:700; color:var(--muted)}
/* トップの検索ヒーロー。
⚠️ background の再指定は必須。PC用の .hero{background:var(--line)} は
グリッドの目地を描くための指定で、display:block にすると要素の隙間が
そのまま黒い帯として出てしまう（実際に本番で帯が出た）。 */
.hero.find{display:block; background:var(--bg); padding-bottom:2px}
.hero.find h1{padding:22px 16px 0; font-size:27px}
.hero.find #q{
margin:12px 16px 8px; padding:16px; font-size:17px;
border-width:3px; font-weight:700;
}
.findsub{padding:0 16px 16px; font-size:13px; font-weight:700; color:var(--muted)}
.findsub .alllink{color:var(--fg); text-decoration:underline; text-underline-offset:3px}
/* ---- 一覧（Downdetector型） ----
タイルだと1画面に4件しか入らず情報量が落ちる。行にして緊急度を縦に並べる。
左端の帯で緊急度を出す。色は赤とグレーだけ（デザイン規約: 赤は値上げと終了のみ）。 */
.tabs{display:flex; gap:0; border-block:2px solid var(--line); overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
flex:1 1 auto; white-space:nowrap; padding:13px 14px; border:0;
border-right:2px solid var(--line); background:none; color:var(--muted);
font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
}
.tab:last-child{border-right:0}
.tab .tn{margin-left:7px; font-size:12px; opacity:.75}
.tab.on{background:var(--fg); color:var(--bg)}
.feed{border-bottom:2px solid var(--line)}
.frow + .frow{border-top:1px solid var(--line-soft)}
.frow > a{
display:grid; grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"name left" "meta left";
gap:3px 12px; align-items:center;
padding:12px 16px 12px 26px; position:relative; color:var(--fg);
}
/* 左端の帯。ここが一覧の「信号」になる */
.frow > a::before{
content:""; position:absolute; left:12px; top:12px; bottom:12px; width:4px;
background:var(--line-mid);
}
.frow.now > a::before{background:var(--accent)}
.frow.soon > a::before{background:var(--accent); opacity:.4}
.frow.done > a::before{background:var(--line-mid); opacity:.5}
.frow > a:hover{background:var(--line-soft)}
.frow .fname{grid-area:name; font-size:17px; font-weight:800; overflow-wrap:anywhere}
.frow .fmeta{
grid-area:meta; font-size:12px; font-weight:700; color:var(--muted);
display:block; overflow-wrap:anywhere;
}
.frow .fcat::after,.frow .fwhat::after{content:"・"}
.frow .fwhat:last-child::after{content:none}
.frow .fwhat.wide{color:var(--muted-strong)}
.frow .fleft{
grid-area:left; align-self:center; font-size:15px; font-weight:900;
text-align:right; white-space:nowrap; color:var(--muted-strong);
}
.frow.now .fleft{color:var(--accent)}
.frow.blank{padding:22px 16px; font-size:15px; font-weight:700; color:var(--muted)}
/* 一覧ページの見出し */
.pagehead{border-bottom:2px solid var(--line); padding:24px 16px 20px}
.pagehead h1{font-size:28px; line-height:1.12; letter-spacing:-.02em}
.pagehead .lead{margin-top:10px; font-size:14px; font-weight:700; color:var(--muted-strong); max-width:62ch}
.hitcount{padding:0 16px 10px; font-size:12px; font-weight:700; color:var(--muted)}
/* トップの3枠。値上げ／終了間近／変更履歴だけを出す */
.trio{border-top:2px solid var(--line)}
.trio .sect{padding-bottom:22px; border-bottom:2px solid var(--line-soft)}
.allbtn{padding:20px 16px 26px}
.allbtn a{
display:inline-block; padding:13px 20px; border:2px solid var(--line);
font-size:15px; font-weight:800; color:var(--fg);
}
.allbtn a:hover{background:var(--fg); color:var(--bg)}
/* ---- 検索・カテゴリ ---- */
#q{
display:block; width:calc(100% - 32px); margin:16px;
padding:15px 16px; border:2px solid var(--line); border-radius:0;
background:var(--bg); color:var(--fg); font:inherit; font-size:16px;
}
#q::placeholder{color:var(--muted); font-weight:700}
#q:focus{outline:none; border-color:var(--accent)}
.cats{display:flex; gap:8px; padding:0 16px 18px; overflow-x:auto; scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.chip{
flex:none; padding:8px 13px; border:2px solid var(--line-mid); border-radius:0;
font-size:14px; font-weight:700; background:none; color:var(--fg); cursor:pointer;
font-family:inherit; white-space:nowrap;
}
.chip:hover{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.chip.on{background:var(--line); color:var(--bg); border-color:var(--line)}
/* 件数。選択中は反転するので継承色に任せる（固定色にすると反転時に読めなくなる） */
.chip .cn{margin-left:7px; font-size:12px; font-weight:900; opacity:.62}
/* トップではタブのすぐ下に置くので、上の余白を詰めて一体に見せる */
#panels .cats{padding:12px 16px 14px; border-bottom:2px solid var(--line)}
/* ---- サービスカード（看板の札） ---- */
/* 目地(2px)はグリッド背景ではなく札ごとのbox-shadowで描く。
背景で描くと、列数の端数で空いたセルが黒い塊として露出するため
(例: 5列に4件、5列に12件の最終行)。box-shadowは隣接札どうしが
2pxのgapを両側から埋めるので、線幅は2pxのまま保たれる。 */
.service-list{
list-style:none; margin:0; padding:2px;
display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:2px;
background:var(--bg);
}
/* height:100% が必須。これが無いと は中身の高さで止まるため、
サービス名が2行になった札(例: Microsoft 365 Personal)だけ枠が高くなり、
行内で枠の高さが揃わない。 */
.service-list .card a{
display:flex; flex-direction:column; gap:8px;
background:var(--bg); border:0; border-radius:0; padding:14px;
min-height:118px; height:100%;
box-shadow:0 0 0 2px var(--line);
transition:background .12s;
}
.service-list .card a:hover{background:color-mix(in srgb, var(--accent) 8%, var(--bg))}
.card-cat{font-size:11px; letter-spacing:.1em; color:var(--muted)}
.card-name{font-size:23px; font-weight:900; line-height:1.1; flex:1}
.badge{
align-self:flex-start; border-radius:0;
padding:4px 8px; font-size:12px; font-weight:700;
background:var(--line-mid); color:var(--chip-ink);
}
.badge.alert{background:var(--accent); color:var(--on-accent)}
.badge.none{background:none; border:2px solid var(--line-mid); color:var(--muted-strong); padding:2px 6px}
.no-result{padding:22px 16px; font-size:16px; font-weight:700; border-bottom:2px solid var(--line)}
/* 列数を5に固定せず、札のサイズ(約230〜250px)を保ったまま
画面が広いほど枚数が増えるようにする。1280pxでは設計どおり5列になる。 */
@media (min-width:1024px){
.service-list{grid-template-columns:repeat(auto-fill, minmax(230px,1fr))}
.service-list .card a{padding:20px; min-height:150px}
.card-name{font-size:26px}
.badge{font-size:13px; padding:5px 10px}
}
/* ---- セクション（トップ） ---- */
.sect{padding:20px 16px 0}
.sect h2{font-size:19px; margin-bottom:10px}
.rows{display:flex; flex-direction:column}
.row{display:flex; gap:12px; align-items:baseline; padding:12px 0; border-top:2px solid var(--line-soft)}
.rows .row:last-child{border-bottom:2px solid var(--line-soft)}
.row .date{flex:none; width:72px; font-size:13px; font-weight:700; color:var(--muted)}
.row.latest .date{color:var(--accent-ink)}
.row .what{font-size:16px; line-height:1.4}
/* flexで組む。gridのauto-fitは要素が1件のとき0px幅のトラックが残り、
目地の2pxが線として見えてしまうため。 */
.end-tiles{
display:flex; flex-wrap:wrap; gap:2px;
background:var(--line); border:2px solid var(--line);
}
.end-tile{flex:1 1 150px; background:var(--bg); padding:14px; display:flex; flex-direction:column; gap:4px}
.end-tile.hot{background:var(--accent); color:var(--on-accent)}
.end-tile.hot a{color:var(--on-accent)}
.end-tile .name{font-size:17px; font-weight:900; line-height:1.2}
.end-tile .when{font-size:24px; font-weight:700; line-height:1.1}
.end-tile .note{font-size:11px; font-weight:700; color:var(--muted-strong)}
.end-tile.hot .note{color:var(--on-accent)}
/* 終了済みは「これから終わる」と取り違えられないよう、赤を一切使わず彩度を落とす */
.end-sub{
margin-top:16px; padding-bottom:6px;
font-size:11px; font-weight:900; letter-spacing:.14em; color:var(--muted);
}
.end-tiles.done{background:var(--line-mid); border-color:var(--line-mid)}
.end-tiles.done .end-tile{color:var(--muted-strong)}
.end-tiles.done .when{color:var(--muted)}
.end-tiles.done a{color:var(--muted-strong)}
.end-tiles.done a:hover{color:var(--accent-ink)}
/* ---- 詳細ページ ---- */
.crumb{
display:flex; gap:10px; padding:14px 16px;
border-bottom:2px solid var(--line-soft);
font-size:13px; font-weight:700; color:var(--muted);
}
.crumb a{color:var(--accent-ink)}
.detail-head{padding:18px 16px 20px; border-bottom:2px solid var(--line)}
.detail-head h1{font-size:46px; line-height:1; letter-spacing:-.02em}
@media (max-width:359px){ .detail-head h1{font-size:38px} }
.detail-head .sub{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:13px; font-weight:700; color:var(--muted-strong)}
.detail-head .sub .badge{align-self:auto; font-size:13px; padding:5px 10px}
.section{padding:18px 16px; border-bottom:2px solid var(--line-soft)}
.label{margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--muted)}
.plans{display:flex; flex-direction:column; gap:16px}
.fact{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.fact .k{font-size:16px; font-weight:700; color:var(--fg)}
.fact .v{font-size:40px; font-weight:700; line-height:.9; text-align:right; white-space:nowrap}
.fact .v.sm{font-size:24px}
.fact .v small{font-size:15px; font-weight:700}
.changes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.changes li{display:flex; gap:14px; align-items:baseline; margin:0}
.changes .date{flex:none; width:80px; font-size:14px; font-weight:700; color:var(--muted)}
.changes li.latest .date{color:var(--accent-ink)}
.changes .what{font-size:16px; font-weight:700; line-height:1.45}
/* 変更1件ごとの出典リンク。本文より弱く、しかし押せると分かる見え方にする。
block にしないと summary の末尾に続いてしまい、文章の一部に見える。 */
.changes .chg-src{display:block; margin-top:4px; font-size:12px; font-weight:400;
color:var(--muted-strong); text-decoration:underline; overflow-wrap:anywhere}
.changes .chg-src:hover{color:var(--fg)}
.eol{font-size:30px; font-weight:900; line-height:1.15}
.eol.hot{background:var(--accent); color:var(--on-accent); padding:14px 16px; margin:0 -16px}
.eol-sub{margin:8px 0 0; font-size:12px; font-weight:500; color:var(--muted)}
.eol.hot + .eol-sub{margin-top:12px}
.meta-lines{padding:16px; display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--muted)}
.meta-lines a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.meta-lines a:hover{color:var(--accent-ink)}
/* ---- CTA・広告・訂正・フッター ---- */
.cta{padding:0 16px 16px}
.cta a{
display:flex; justify-content:space-between; align-items:center;
background:var(--accent); color:var(--on-accent); border-radius:0;
padding:16px; font-size:16px; font-weight:700;
}
.cta a:hover{background:var(--accent-600); color:var(--on-accent)}
.cta a:active{background:var(--accent-700)}
.cta .small{display:block; margin:8px 0 0; font-size:11px; font-weight:500; color:var(--muted)}
.report{padding:0 16px 18px; font-size:11px; font-weight:700}
.report a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.report a:hover{color:var(--accent-ink)}
/* プランの中身。項目名と値の2列。狭い画面では項目名を上に積む。
⚠️ 日付バーで踏んだのと同じ罠。横並びのまま狭くすると値の側が固有幅より縮まず溢れる。 */
.ftable{border-top:2px solid var(--line); border-bottom:2px solid var(--line)}
.frow2{display:flex; flex-direction:column; gap:2px; padding:10px 2px; border-bottom:1px solid var(--line)}
.frow2:last-child{border-bottom:0}
.fk{font-size:11px; font-weight:900; letter-spacing:.04em; color:var(--muted)}
.fv{font-size:15px; font-weight:700; line-height:1.7}
@media (min-width:700px){
.frow2{flex-direction:row; align-items:baseline; gap:16px; padding:11px 2px}
.fk{flex:0 0 132px; padding-top:3px}
.fv{flex:1 1 0; min-width:0}
}
/* 広告枠。企画書§12-2の優先順位「①答え ②情報源 ③広告」に従い最下部にのみ置く。
閲覧者に企業の情シス・総務を想定しているため、幅を336pxに抑えて右下に寄せる。
広告を目立たせると信頼性が落ち、本命の法人向け月額課金(§12-3)が売れなくなるため。
固定表示(オーバーレイ)にはしない。業務中の閲覧を妨げるうえ規約上のリスクもある。
⚠️ 例外はトップページのみ（2026-08-22）。トップは「答え」を出すページではなく
探すためのページで、全115件を出す仕様にしたため最下部がy9003pxまで沈み、
実質だれにも見えなくなった。そこで検索窓と一覧の間にもう1枠だけ置いている。
幅336px・右寄せ・枠線ありのまま変えていないので「目立たせない」方針は維持している。
⚠️ サービス個別ページは最下部のみ。ここに枠を増やすと①答えの前に広告が来る。 */
.ad{
max-width:336px; margin:20px 16px 24px; margin-inline-start:auto;
padding:10px; border:2px dashed var(--line-mid);
text-align:center; font-size:11px; font-weight:700; color:var(--muted);
}
@media (min-width:900px){
.ad{margin:24px 32px 28px; margin-inline-start:auto; padding:12px}
}
.site-footer{border-top:2px solid var(--line); padding:18px 16px; display:flex; flex-direction:column; gap:10px}
.foot-top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted)}
.foot-links{display:flex; gap:14px}
.foot-links a{color:var(--muted); font-size:11px; font-weight:700}
.foot-links a:hover{color:var(--accent-ink)}
.foot-note{margin:0; font-size:11px; font-weight:500; line-height:1.7; color:var(--muted)}
/* ---- 静的ページ（About等） ---- */
.prose{padding:18px 16px 26px; display:flex; flex-direction:column; gap:14px}
.prose h1{font-size:34px; line-height:1.15; letter-spacing:-.02em}
.prose h2{font-size:19px; margin-top:10px; padding-top:14px; border-top:2px solid var(--line-soft)}
.prose p{margin:0; font-size:15px; font-weight:500; line-height:1.8}
.prose ul{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:500; line-height:1.8}
.prose a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
/* ---- PC ---- */
@media (min-width:900px){
.site-header{padding:16px 32px; gap:24px}
.hero{display:grid; grid-template-columns:1fr 380px; gap:2px; background:var(--line)}
.hero>*{background:var(--bg)}
.hero h1{padding:40px 32px 36px; font-size:52px}
.hero .sub{padding:40px 32px 36px; justify-content:flex-end}
#q{width:calc(100% - 64px); max-width:520px; margin-inline:32px}
.cats{padding:0 32px 20px}
.sect{padding:20px 32px 0}
.sect h2{font-size:22px}
.row{padding:14px 0}
.row .date{width:92px; font-size:15px}
.row .what{font-size:18px}
.end-tile .when{font-size:28px}
.dual{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); margin-top:20px; border-top:2px solid var(--line)}
.dual>*{background:var(--bg); padding:20px 32px 26px}
.dual .sect{padding:0}
/* トップの検索ヒーロー。中央に寄せて検索欄を大きく見せる */
.hero.find{padding:44px 0 30px; text-align:center; background:var(--bg)}
.hero.find h1{padding:0 32px; font-size:44px}
.hero.find #q{margin:24px auto 10px; max-width:620px; padding:19px 20px; font-size:19px; text-align:center}
.findsub{padding:0 32px; font-size:14px}
.pagehead{padding:36px 32px 28px}
.pagehead h1{font-size:40px}
.hitcount{padding:0 32px 12px}
/* 一覧はPCでは1行にすべて収める（名前・カテゴリ・種別・日付・残日数） */
.tab{flex:0 0 auto; padding:14px 22px; font-size:15px}
.frow > a{
grid-template-columns:minmax(0,1fr) 96px 130px 120px 110px;
grid-template-areas:"name cat what date left";
align-items:center; gap:0 16px; padding:15px 32px 15px 46px;
}
.frow > a::before{left:32px; top:0; bottom:0; width:5px}
.frow .fname{font-size:19px}
.frow .fmeta{display:contents}
.frow .fcat{grid-area:cat; font-size:13px}
.frow .fwhat{grid-area:what; font-size:13px}
.frow .fdate{grid-area:date; font-size:15px; font-weight:800; color:var(--muted-strong)}
.frow .fcat::after,.frow .fwhat::after{content:none}
.frow .fleft{grid-area:left; font-size:17px}
.allbtn{padding:24px 32px 30px; text-align:center}
.crumb,.detail-head,.section,.meta-lines,.cta,.report,.prose{padding-inline:32px}
.eol.hot{margin-inline:-32px; padding-inline:32px}
.site-footer{padding:20px 32px}
.foot-top{font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* 代替候補。最大2件。ランキング記事に見えないよう、札より控えめな見た目にする */
.alt-list{display:flex; flex-direction:column; gap:8px}
.alt-list a{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:13px 14px; border:2px solid var(--line-mid); color:var(--fg);
}
.alt-list a:hover{border-color:var(--fg)}
.alt-list .alt-name{font-size:16px; font-weight:800}
@media (min-width:900px){
.alt-list{flex-direction:row}
.alt-list li{flex:1 1 0; min-width:0}
.alt-list a{height:100%}
/* 会社の他サービスは最大6件出るので、横一列にすると1件ずつが潰れる。
.col は縦積みのまま2列にする。 */
.alt-list.col{display:grid; grid-template-columns:1fr 1fr; gap:8px}
}
/* 終了すると何が止まるか。
日付の下に置く。答え（日付）より上に出すと企画書§12-2の優先順位が崩れる。 */
.effect{margin-top:14px; border-top:2px solid var(--line); padding-top:12px}
.effect-h{
margin:0 0 6px; font-size:11px; font-weight:900; letter-spacing:.14em;
color:var(--muted); text-transform:uppercase;
}
.effect-t{margin:0; font-size:15px; font-weight:500; line-height:1.75}
.effect-s{margin:8px 0 0; font-size:12px; color:var(--muted)}
.effect-s a{color:var(--muted-strong); text-decoration:underline; overflow-wrap:anywhere}
.effect-s a:hover{color:var(--fg)}
/* 同じ製品の他バージョン。
トップの .frow と同じ「左端の帯で緊急度」という記号を使う。
ここで別の見せ方を発明すると、サイト内で同じ意味に2つの表現ができてしまう。 */
.ver-list{border-top:2px solid var(--line); border-bottom:2px solid var(--line)}
.ver-list li + li{border-top:1px solid var(--line-soft)}
.ver-list a{
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px;
grid-template-areas:"name left" "date left";
align-items:center; padding:11px 12px 11px 22px;
position:relative; color:var(--fg);
}
.ver-list a::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:transparent;
}
.vrow.now a::before{background:var(--accent)}
.vrow.soon a::before{background:var(--accent); opacity:.4}
.vrow.done a::before{background:var(--line-mid); opacity:.5}
.ver-list a:hover{background:var(--line-soft)}
.ver-list .vname{grid-area:name; font-size:16px; font-weight:800; overflow-wrap:anywhere}
.ver-list .vdate{grid-area:date; font-size:13px; color:var(--muted-strong)}
.ver-list .vleft{grid-area:left; font-size:14px; font-weight:800; text-align:right; white-space:nowrap}
.vrow.now .vleft{color:var(--accent-ink)}
.vrow.done .vleft{color:var(--muted)}
.vnote{margin:10px 0 0; font-size:12px; color:var(--muted)}
@media (min-width:900px){
.ver-list a{
grid-template-columns:minmax(0,1fr) 120px 110px;
grid-template-areas:"name date left";
padding:12px 14px 12px 24px;
}
.ver-list .vdate{text-align:right}
}
/* A8のインプレッション計測用1x1画像。レイアウトに影響させない */
.cta .track{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}