/* ATLAS TAX PARTNERS — EDITORIAL-COLLAGE-100
   生成り(#f3f0e6)+ 黄・ピンク・青緑・青 の 4 色 / BIZ UDPGothic + Space Mono。
   紙面のコラージュ(傾いた札・判子・付箋・トンボ)が個性。
   スクロール演出は clip-path(覆い)と transform(持ち上げ)だけで作る。
   opacity と scale(0) は使わない。発火は site.js の scroll + requestAnimationFrame。
   1 列の grid には必ず minmax(0,1fr) を書く。auto のままだと中身の max-content で
   トラックが伸び、器の外へ文字が出る(2026-08-23 実測 = 02/CASH の本文が 53px はみ出た)。

   2026-08-24 の是正(実測に基づく。戻すな):
   (1) .headline を sticky にしない。sticky の閉じ込め先は grid area ではないため、
       981px 以上で見出しが写真と .hero-line の上へ滑り落ちた(1440 で字の画素 65 個が重なり、
       見出しのコントラストが 1.05 まで落ちた)。
   (2) html.js .rv の transition は shorthand。詳細度で負けたホバー指定は transition-property ごと
       消える(カード 7 枚のホバーが 0.35 秒ではなく瞬間移動していた)。
       ホバーを持つ器は「覆い + 持ち上げ + ホバー」を longhand の 1 つの表に、
       .rv より高い詳細度で書く。
   (3) 帯とカードの列は同じ 1 本の宣言(.cal-band,.cal-phases)から導く。別々に書くと必ずずれる。
   (4) 図の線は非文字の床 3:1 を守る。白は青地(4.67)と黒地(19)には乗るが、
       青緑地(2.48)と桃地(2.85)には乗らない。03/GROW を黒地へ移したのはこのため。
   (5) ヒーローの写真の器は height ではなく aspect-ratio で持つ(下の .portrait)。 */

/* ---------- tokens ---------- */
:root{
  --bg:#f3f0e6;--ink:#101010;--paper:#ffffff;
  --sun:#ffdd28;--rose:#ff5f9c;--sea:#1ab6bb;--blue:#1669ff;--blue-ink:#0f52d9;--fade:#d8d4c6;
  --body:"BIZ UDPGothic","Yu Gothic",sans-serif;--mono:"Space Mono",monospace;
  --ease:cubic-bezier(.22,.86,.28,1);
}

/* ---------- base ---------- */
*{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}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
figure{margin:0}
.eyebrow{margin:0;font:700 12.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}
:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}
.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}
.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}
.demo a{text-decoration:underline}

/* ---------- スクロール演出(JS が動いているときだけ隠す) ----------
   覆い = clip-path / 持ち上げ = transform。opacity も scale(0) も使わない。
   .js が付かない(= JS が落ちた)ときは、この規則は一切当たらない = 本文は必ず出る。 */
html.js .rv{clip-path:inset(0 0 100% 0);transform:translateY(26px);
  transition:clip-path .82s var(--ease),transform .82s var(--ease)}
html.js .rv.on{clip-path:inset(0px);transform:none}
html.js .issues .edition.rv{transition-delay:.06s}
html.js .cal-phases li.rv{transition-delay:.05s}

/* ---------- header ---------- */
.atlas-head{height:70px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--bg);padding:0 3vw;border-bottom:2px solid}
.atlas-head>*{min-width:0}
.atlas-head a{flex:0 0 auto;display:inline-flex;align-items:center;font:700 18px/1.2 var(--mono);white-space:nowrap;padding:8px 2px;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 2px}
.atlas-head span{flex:1 1 auto;text-align:center;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atlas-head button{flex:0 0 auto;background:var(--blue);color:#fff;border:0;padding:13px 20px;font-weight:700;white-space:nowrap}

/* ---------- 1. hero(紙面のコラージュ) ----------
   px 決め打ちの height は捨てて、宣言した列と行の上に部品を置く。 */
.paper-hero{position:relative;overflow:clip;background:var(--bg);
  padding:clamp(38px,5vw,84px) clamp(18px,4vw,72px) clamp(58px,7vw,112px);
  display:grid;grid-template-columns:minmax(0,1fr);
  column-gap:clamp(10px,1.4vw,24px);row-gap:clamp(26px,3.6vw,54px);align-items:start}
.crop{position:absolute;font:400 clamp(24px,3vw,44px)/1 var(--mono);color:var(--ink);animation:atlas-tick 7s ease-in-out infinite alternate}
.crop-a{left:clamp(8px,1.4vw,20px);top:clamp(10px,1.6vw,26px)}
.crop-b{right:clamp(8px,1.4vw,20px);bottom:clamp(10px,1.6vw,26px)}

.headline{z-index:3}
.headline small{display:block;font:700 12.5px/1.4 var(--mono);letter-spacing:.14em}
.headline h1{font-size:clamp(52px,7.6vw,118px);line-height:1.2;letter-spacing:-.08em;margin:.24em 0 .28em}
.headline h1 span{display:inline-block;background:var(--sun);margin-right:8px;padding:.05em}
.headline h1 span:nth-child(2){background:var(--rose);transform:rotate(4deg)}
.headline h1 span:nth-child(3){background:var(--sea);transform:rotate(-3deg)}
.hero-lede{margin:0;max-width:min(100%,32em);font-size:clamp(15px,1.1vw,17px);line-height:1.95}
.hero-cue{display:flex;align-items:center;gap:12px;margin:clamp(26px,3vw,40px) 0 0;white-space:nowrap;font:700 12.5px/1 var(--mono);letter-spacing:.16em;color:var(--blue-ink)}
.cue-arrow{flex:0 0 auto;width:15px;height:40px}
.cue-arrow path{transform-box:fill-box;transform-origin:center;animation:atlas-drop 2s ease-in-out infinite}

.sheet{background:var(--paper);border:1px solid;box-shadow:12px 12px 0 var(--ink);padding:clamp(20px,2.2vw,30px)}
.s1{rotate:4deg}
.s1 span{display:block;font:700 12.5px/1 var(--mono);letter-spacing:.14em}
.s1 b{display:block;font:700 clamp(42px,4.6vw,66px)/1 var(--mono);letter-spacing:-.04em;margin:.28em 0 .2em}
.spark{display:block;width:100%;height:auto;max-width:320px}
.spark-line{stroke-dasharray:100}
.spark-dot{transform-box:fill-box;transform-origin:center}
.s1 small{display:block;margin-top:10px;font-size:12.5px;line-height:1.55;color:#4a463c}
.s2{rotate:-3.5deg}
.s2 p{margin:0;font-size:clamp(17px,1.5vw,23px);line-height:1.65}

/* ★ヒーローの写真の器は height ではなく aspect-ratio で持つ(2026-08-24 オーナー指示「枠から直して」)。
   理由 = height を px で決めると、画面が広がるほど cover の倍率だけが上がり、
   元画像から見える帯が痩せていく。1920px で上下 14px/21px しか余裕が無く、
   それより広い画面ではいずれ人物の顔が切れる(= object-position で寄せるのは対症療法だった)。

   aspect-ratio(比 R)にすると、R >= 1536/1024 = 1.5 のとき倍率 s = 枠幅/1536 なので
       見える帯(元画像px) = (枠幅/R) / (枠幅/1536) = 1536/R
   となり **画面幅に一切依存しない定数**になる。2560px でも 3440px でも同じ帯が見える。

   元画像 06-editorial-recruit.webp は 1536x1024。顔の位置は grid を重ねて実測:
       男性の頭 y202..445 / 女性の頭 y322..495  → 両方入れるには帯が y202..495 を含むこと
   比を段ごとに置き、帯の中心を顔の中心(y348)へ合わせた:
       560px以下  5/3  → 帯 922元px(ほぼ全体が見える)  始点 0    → Y 0%
       561-980    5/2  → 帯 614元px  始点 41  余裕 上161/下160  → Y 10%
       981px以上 18/5  → 帯 427元px  始点 137 余裕 上65/下69    → Y 23%
   比は figure 側に置く。img 側に書くと素の img{height:100%} に打ち消される。 */
.portrait{position:relative;z-index:1;aspect-ratio:5/3;clip-path:polygon(4% 0,100% 2.5%,96.5% 100%,0 97.5%)}
.portrait img{object-position:center 0%}

.note{padding:clamp(15px,1.5vw,22px) clamp(17px,1.7vw,24px);background:var(--sun);font-weight:700;font-size:clamp(15px,1.3vw,19px);line-height:1.55;box-shadow:7px 7px var(--ink);width:max-content;max-width:100%}
.n1{rotate:6deg}
.n2{position:relative;z-index:2;background:var(--rose);rotate:-5deg}

.hero-line{margin:0;border-top:2px solid var(--ink);padding-top:clamp(16px,1.8vw,24px);font-size:clamp(19px,2vw,32px);line-height:1.55;font-weight:700;letter-spacing:-.02em}

.stamp{position:relative;z-index:2;display:grid;place-items:center;width:max-content;max-width:100%;background:var(--bg);border:4px solid var(--blue);border-radius:50%;padding:clamp(22px,2.2vw,30px);rotate:14deg}
.stamp b{color:var(--blue-ink);font:700 clamp(15px,1.4vw,20px)/1.25 var(--mono);text-align:center}
.stamp-ring{position:absolute;inset:7px;width:auto;height:auto}
.stamp-ring circle{transform-box:fill-box;transform-origin:center;animation:atlas-spin 26s linear infinite}

/* ---------- 2. news ---------- */
.news-line{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px 24px;align-items:center;
  padding:clamp(16px,2.1vw,26px) clamp(18px,3vw,48px);border-block:2px solid;background:var(--sun);font-size:13.5px}
.news-tag{display:inline-flex;align-items:center;gap:9px;font:700 13px/1 var(--mono);letter-spacing:.12em;white-space:nowrap}
.news-dot{width:20px;height:20px;flex:0 0 auto}
.news-dot .ring{transform-box:fill-box;transform-origin:center;animation:atlas-pulse 2.6s ease-in-out infinite alternate}
.news-line time{font:700 13px/1 var(--mono);white-space:nowrap}
.news-line p{margin:0;line-height:1.6}
.news-line a{justify-self:end;display:inline-flex;align-items:center;font:700 13px/1 var(--mono);white-space:nowrap;padding:9px 2px;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px}

/* ---------- 3. monthly(黒地・数字の図) ---------- */
.monthly{background:var(--ink);color:#fff;padding:clamp(64px,9vw,132px) clamp(18px,5vw,90px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,4vw,70px);align-items:center}
.monthly .eyebrow{color:var(--sun)}
.monthly h2{font-size:clamp(34px,4.6vw,64px);line-height:1.25;letter-spacing:-.04em;margin:0 0 .5em}
.mv-lede{margin:0;max-width:min(100%,34em);font-size:clamp(15px,1.1vw,17px);line-height:1.95;color:#efece2}
.mv-read{margin:clamp(26px,3vw,42px) 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.mv-read>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.24)}
.mv-read dt{margin:0;font:700 13px/1.6 var(--body);color:var(--sun);white-space:nowrap}
.mv-read dd{margin:0;font-size:14px;line-height:1.8;color:var(--fade)}

/* 縦軸の目盛は SVG の文字ではなく HTML で置く。SVG の文字は幅に比例して縮み、
   390px では 9px まで落ちて文字の床(12px)を割るため(2026-08-24 実測)。 */
.mv-chart{position:relative;--gut:clamp(31px,3.2vw,46px)}
.mv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:clamp(14px,2vw,24px)}
.mv-head b{font:700 clamp(42px,5.2vw,76px)/1 var(--mono);color:var(--sun);letter-spacing:-.04em}
.mv-head span{font-size:13px;line-height:1.6;color:var(--fade)}
.mv-plot{position:relative;padding-left:var(--gut)}
.mv-scale{list-style:none;margin:0;padding:0}
.mv-scale li{position:absolute;left:0;top:var(--y);translate:0 -50%;width:calc(var(--gut) - 9px);
  text-align:right;font:700 12.5px/1 var(--mono);color:#b9b4a6}
.mv-graph{display:block;width:100%;height:auto}
.mv-bar{fill:var(--bg);transform-box:fill-box;transform-origin:center bottom}
.mv-prev{stroke-dasharray:100}
.mv-axis{list-style:none;margin:9px 0 0;padding:0 0 0 var(--gut);display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.mv-axis li{text-align:center;font:700 12.5px/1.4 var(--mono);color:#b9b4a6}
.mv-legend{display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;margin:clamp(13px,1.8vw,20px) 0 0;font-size:13px;color:var(--fade)}
.k-bar,.k-line{display:inline-block;flex:0 0 auto;width:18px}
.k-bar{height:13px;background:var(--bg)}
.k-line{height:4px;border-radius:2px;background:var(--sun)}
.mv-unit{margin-left:auto;font:700 12.5px/1.4 var(--mono);color:#b9b4a6}

/* ---------- 4. issues(3 編成) ---------- */
.issues{padding:clamp(66px,9vw,140px) clamp(18px,4vw,72px);background:var(--bg)}
.issues>header{max-width:1200px;margin:0 auto}
.issues>header h2{font-size:clamp(42px,7.4vw,108px);line-height:1.16;letter-spacing:-.06em;margin:0}

/* 写真だけの節を作らない(1 ページ = 文字も絵も両方)。写真の隣に読ませる文を置き、
   1440 で 1200x800 = ほぼ 1 画面だった写真を 3 分の 1 に落とす。 */
.issues-lead{max-width:1200px;margin:clamp(26px,3.6vw,48px) auto 0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:center}
.issues-shot{aspect-ratio:3/2;overflow:hidden}
.issues-note-lead{margin:0 0 clamp(15px,1.8vw,22px);font-size:clamp(15px,1.1vw,17px);line-height:1.9}
.issues-note ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:11px}
.issues-note li{border-top:1px solid rgba(16,16,16,.32);padding-top:11px;font-size:14.5px;line-height:1.7;font-weight:700}
.issues-note li b{display:block;margin-bottom:3px;font-size:12.5px;line-height:1.4;letter-spacing:.02em;color:#5c584c}
.issues-note .eyebrow{margin-bottom:clamp(12px,1.4vw,18px)}

.edition{position:relative;overflow:hidden;max-width:1200px;margin:clamp(20px,2.6vw,34px) auto 0;
  padding:clamp(28px,3.6vw,62px);display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-content:space-between;min-height:clamp(400px,36vw,520px)}
.ed-copy b{display:block;font:700 13px/1 var(--mono);letter-spacing:.16em}
.edition h3{font-size:clamp(38px,5.6vw,84px);line-height:1.2;letter-spacing:-.05em;margin:.24em 0 .3em}
.edition p{margin:0;max-width:min(100%,31em);font-size:clamp(15px,1.1vw,17px);line-height:1.9}
.close{background:var(--blue);color:#fff}
.cash{background:var(--rose)}
.grow{background:var(--ink);color:#fff}
.grow h3{font-size:clamp(34px,4.4vw,66px)}

.ed-fig{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.5vw,18px);align-content:start}
.fig{display:block;width:100%;height:auto}
.ed-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px}
.ed-key li{display:flex;align-items:center;gap:8px}
.ed-key i{display:inline-block;flex:0 0 auto;width:22px;height:4px;border-radius:2px}
.ed-key i.k-solid{background:#fff}
.ed-key i.k-dash{background:repeating-linear-gradient(90deg,#fff 0 7px,transparent 7px 11px)}
.ed-key i.k-plan{height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 3px,transparent 3px 7px)}
.ed-key i.k-bar-dark{width:10px;height:18px;border-radius:1px;background:var(--ink)}
.ed-key i.k-bar-light{width:10px;height:18px;border-radius:1px;background:transparent;box-shadow:inset 0 0 0 2.5px var(--ink)}
.ed-key i.k-need{background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 13px)}
.ed-key i.k-rev{height:5px;background:var(--sun)}
.ed-key i.k-cost{background:#fff}
.ed-key i.k-point{width:15px;height:15px;border-radius:50%;background:var(--rose);box-shadow:inset 0 0 0 3px #fff}

.cw{fill:var(--ink);transform-box:fill-box;transform-origin:center bottom}
/* 桃地(L=.318)に 3:1 で乗る色は墨側だけ。白い塗りは 2.85:1 で床を割る(2026-08-24 実測)。
   不足週は塗りを持たず、3px の墨の輪郭だけで形を決める(6.72:1)。中は地の色が透ける。 */
.cw.low{fill:none;stroke:var(--ink);stroke-width:3}
.fig-node{transform-box:fill-box;transform-origin:center}
.fig-dash,.fig-need{animation:atlas-march 2.2s linear infinite}
.fig-solid,.fig-rev,.fig-cost{stroke-dasharray:100}

.tape{position:absolute;right:clamp(-46px,-3.2vw,-14px);bottom:clamp(12px,2.4vw,34px);z-index:2;
  background:var(--sun);color:var(--ink);padding:clamp(9px,1vw,15px) clamp(20px,5.4vw,78px);
  font:700 clamp(15px,1.7vw,24px)/1 var(--mono);letter-spacing:.06em;transform:rotate(-8deg);
  box-shadow:0 5px 0 rgba(16,16,16,.15)}
.big-num{position:absolute;right:16px;bottom:16px;font:700 48px/1 var(--mono);color:#fff}

/* ---------- 5. calendar(白い紙) ---------- */
.calendar{background:var(--paper);color:var(--ink);padding:clamp(64px,9vw,132px) clamp(18px,4vw,72px)}
.cal-head{max-width:1200px;margin:0 auto}
.calendar h2{font-size:clamp(34px,4.6vw,64px);line-height:1.25;letter-spacing:-.04em;margin:0 0 .55em}
.cal-head p{margin:0;max-width:min(100%,46em);font-size:clamp(15px,1.1vw,17px);line-height:1.95}
.cal-band-note{max-width:1200px;margin:clamp(32px,4vw,60px) auto 10px;font:700 12.5px/1 var(--mono);letter-spacing:.14em}

/* 帯とカードは同じ 1 本の宣言から列を取る。別々に書くと必ずずれる(2026-08-24 実測 = 3 本中 3 本ずれ)。 */
.cal-band,.cal-phases{max-width:1200px;margin-left:auto;margin-right:auto;padding:0;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,20px)}
.cal-band{margin-top:0;margin-bottom:clamp(12px,1.4vw,20px)}
.cal-phases{margin-top:0;margin-bottom:0}
.cal-band li{border:2px solid var(--ink);background:var(--paper);display:grid;grid-template-rows:auto auto auto;align-content:start}
/* 白地(L=.87)の上では帯の 4 色は塗り単体で 3:1 を割る(青緑2.48 / 黄1.34 / 桃2.85 / 灰1.48。
   2026-08-24 実測)。輪郭で逃げず、器を墨の井戸にして地の側を変える。
   同じ 4 色が墨の上では 6.68 / 14.16 / 6.68 / 12.82 になる。 */
.cal-gauge{position:relative;display:block;overflow:hidden;height:clamp(48px,5.6vw,80px);
  background:var(--ink) repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 1px,transparent 1px 11px)}
.cal-gauge i{position:absolute;left:0;right:0;bottom:0;display:block;height:var(--fill);
  transform-origin:center bottom}
.cal-band li:nth-child(1) .cal-gauge i{background:var(--sea)}
.cal-band li:nth-child(2) .cal-gauge i{background:var(--sun)}
.cal-band li:nth-child(3) .cal-gauge i{background:var(--rose)}
.cal-band li:nth-child(4) .cal-gauge i{background:var(--fade)}
.cal-band b{display:block;border-top:2px solid var(--ink);padding:11px 14px 0;font:700 12.5px/1 var(--mono);letter-spacing:.12em;color:#5c584c}
.cal-band em{display:block;padding:6px 14px 13px;font-style:normal;font-size:13.5px;line-height:1.5;font-weight:700}

.cal-phases li{border:2px solid var(--ink);background:var(--paper);padding:clamp(18px,2vw,26px)}
.cal-ico{display:block;width:clamp(30px,2.8vw,38px);height:auto;margin-bottom:10px;color:var(--ink)}
.cal-phases b{display:block;font:700 12.5px/1 var(--mono);letter-spacing:.14em;color:#5c584c}
.cal-phases h3{font-size:clamp(21px,2vw,28px);line-height:1.32;letter-spacing:-.02em;margin:.5em 0 .48em}
.cal-phases p{margin:0;font-size:14px;line-height:1.85}
.cal-phases li:nth-child(1) .cal-ico{color:#0f7f83}
.cal-phases li:nth-child(2) .cal-ico{color:#8a7400}
.cal-phases li:nth-child(3) .cal-ico{color:#c62f6a}
.cal-phases li:nth-child(4) .cal-ico{color:#5c584c}

/* ---------- 6. people(黒地) ---------- */
.people{background:var(--ink);color:#fff;padding:clamp(64px,9vw,132px) clamp(18px,5vw,90px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4.6vw,84px)}
.people .eyebrow{color:var(--sea)}
.people h2{font-size:clamp(40px,6.4vw,96px);line-height:1.2;letter-spacing:-.05em;margin:0 0 .4em}
.pp-copy>p{margin:0;max-width:min(100%,36em);font-size:clamp(15px,1.1vw,18px);line-height:1.95;color:#efece2}
.practice{list-style:none;margin:0;padding:0}
.practice li{position:relative;padding:clamp(17px,1.9vw,25px) 0;border-bottom:1px solid rgba(255,255,255,.42);font-size:clamp(17px,1.5vw,22px);font-weight:700}

.sixty{margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(24px,2.8vw,38px);border-top:1px solid rgba(255,255,255,.3);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,32px);align-items:center}
.sixty-dial{display:block;width:clamp(126px,12vw,164px);height:auto;transform:rotate(-90deg)}
.dial-seg{stroke-linecap:butt}
.sixty-title{margin:0 0 13px;font:700 13px/1.4 var(--body);color:var(--sun)}
.sixty-key ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.sixty-key li{display:grid;grid-template-columns:14px auto minmax(0,1fr);align-items:center;gap:12px;font-size:14px;line-height:1.6;color:#e6e2d6}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%}
.sw-a{background:var(--sun)}
.sw-b{background:var(--rose)}
.sw-c{background:var(--sea)}
.sixty-key b{font:700 15px/1 var(--mono);color:#fff}

/* ---------- 7. contact ---------- */
.atlas-contact{position:relative;overflow:hidden;background:var(--sun);color:var(--ink);
  padding:clamp(74px,10vw,150px) clamp(18px,5vw,90px);
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.ct-mark{position:absolute;right:-46px;top:50%;translate:0 -50%;width:clamp(170px,25vw,340px);height:auto;color:var(--ink);opacity:.2}
.ct-eyebrow{display:block;position:relative;font:700 13px/1 var(--mono);letter-spacing:.16em}
.atlas-contact h2{position:relative;font-size:clamp(46px,8vw,116px);line-height:1.16;letter-spacing:-.06em;margin:.34em 0 .3em}
.atlas-contact p{position:relative;margin:0 0 clamp(26px,3vw,42px);max-width:min(100%,32em);font-size:clamp(15px,1.1vw,18px);line-height:1.95}
.ct-cta{position:relative;display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:#fff;
  padding:clamp(16px,1.6vw,22px) clamp(24px,2.6vw,38px);font:700 clamp(18px,2vw,27px)/1.3 var(--body);
  box-shadow:9px 9px 0 rgba(16,16,16,.3)}
.ct-arrow{flex:0 0 auto;width:clamp(28px,2.3vw,36px);height:auto}

/* ---------- footer ---------- */
footer{padding:clamp(26px,3vw,40px) clamp(18px,3vw,48px);display:grid;grid-template-columns:1fr 1fr auto;gap:10px;
  border-top:2px solid;font:12.5px/1.5 var(--mono)}

/* ---------- 中(561px 以上) ---------- */
@media(min-width:561px){
  .paper-hero{grid-template-columns:repeat(6,minmax(0,1fr))}
  .headline{grid-column:1/7;grid-row:1}
  .s1{grid-column:4/7;grid-row:2;align-self:end}
  .s2{grid-column:1/4;grid-row:2;align-self:end}
  .portrait{grid-column:1/7;grid-row:3;aspect-ratio:5/2}
  .portrait img{object-position:center 10%}
  .n1{grid-column:1/3;grid-row:4}
  .stamp{grid-column:3/5;grid-row:4;justify-self:center}
  .n2{grid-column:5/7;grid-row:4;justify-self:end}
  .hero-line{grid-column:1/7;grid-row:5}
  .sixty{grid-template-columns:auto minmax(0,1fr)}
  .cal-band,.cal-phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mv-read>div{grid-template-columns:7.9em minmax(0,1fr)}
}

/* ---------- 広(821px 以上) ---------- */
@media(min-width:821px){
  .issues-lead{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
  .edition{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;align-content:center}
  .ed-copy{grid-column:1}
  .ed-fig{grid-column:2}
  /* 3 枚が同じ組みで並ぶのをやめる。03 だけ図が左・文が右。 */
  .grow .ed-fig{grid-column:1;grid-row:1}
  .grow .ed-copy{grid-column:2;grid-row:1}
  /* shared-quality.css が right:16px!important を当てるので right は消せない。
     width:max-content を宣言すると over-constrained の解決で right が無視され、
     左寄せの max-content 箱になる(right:auto と書くだけでは全幅 1168px のままだった)。 */
  .grow .big-num{left:16px;width:max-content}
}

/* ---------- 大(981px 以上) ---------- */
@media(min-width:981px){
  .paper-hero{grid-template-columns:repeat(12,minmax(0,1fr))}
  /* position:sticky を付けない。Chrome は grid item の sticky を grid area に閉じ込めないため、
     見出しが写真と .hero-line の上まで滑り落ちる(2026-08-24 実測)。 */
  .headline{grid-column:1/7;grid-row:1/3;align-self:start}
  .s1{grid-column:7/13;grid-row:1;align-self:start;justify-self:end;max-width:420px}
  .s2{grid-column:7/11;grid-row:2;align-self:start;max-width:400px}
  .n1{grid-column:11/13;grid-row:2;align-self:end;justify-self:end}
  .portrait{grid-column:1/13;grid-row:3;aspect-ratio:18/5}
  .portrait img{object-position:center 23%}
  /* 判子は写真の無地の中央へ。列 2/4 は人物の顔の上だった(154x86px 重なり・2026-08-24 実測)。 */
  .stamp{grid-column:4/7;grid-row:3;align-self:start;justify-self:center;margin-top:-18px}
  .n2{grid-column:9/12;grid-row:3;align-self:end;justify-self:center;margin-bottom:-24px}
  .hero-line{grid-column:1/13;grid-row:4}
  .monthly{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(46px,5vw,94px)}
  .people{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(48px,6vw,108px);align-items:center}
  .cal-band,.cal-phases{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 小(720px 以下) ---------- */
@media(max-width:720px){
  .atlas-head{padding:0 16px;gap:12px}
  .atlas-head a{font-size:15px;letter-spacing:-.01em}
  .atlas-head span{display:none}
  .paper-hero .crop{display:none}
  .news-line{grid-template-columns:auto minmax(0,1fr)}
  .news-line p{grid-column:1/-1}
  .news-line a{grid-column:1/-1;justify-self:start}
  footer{grid-template-columns:1fr;gap:8px}
}

@media(max-width:420px){
  .atlas-head a{font-size:13px}
  .atlas-head button{padding:13px 14px;font-size:14px}
}

/* ---------- 動き ---------- */
@keyframes atlas-grow{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
@keyframes atlas-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes atlas-dial{from{stroke-dashoffset:var(--from)}to{stroke-dashoffset:var(--off)}}
@keyframes atlas-march{from{stroke-dashoffset:0}to{stroke-dashoffset:-40}}
@keyframes atlas-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes atlas-pulse{from{transform:scale(.62)}to{transform:scale(1.42)}}
@keyframes atlas-pop{from{transform:scale(.24)}to{transform:scale(1)}}
@keyframes atlas-tick{from{rotate:-7deg}to{rotate:7deg}}
@keyframes atlas-drop{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}

html.js .spark-line{animation:atlas-draw 1.6s ease .45s backwards}
html.js .spark-dot{animation:atlas-pop .5s cubic-bezier(.3,1.5,.5,1) 1.85s backwards}
html.js .mv-chart.on .mv-bar{animation:atlas-grow .85s var(--ease) backwards;animation-delay:calc(var(--i)*.055s)}
html.js .mv-chart.on .mv-prev{animation:atlas-draw 1.5s ease .4s backwards}
html.js .edition.close.on .fig-solid{animation:atlas-draw 1.2s ease .25s backwards}
html.js .edition.close.on .fig-node{animation:atlas-pop .5s cubic-bezier(.3,1.5,.5,1) 1.25s backwards}
html.js .edition.cash.on .cw{animation:atlas-grow .8s var(--ease) backwards;animation-delay:calc(var(--i)*.05s)}
html.js .edition.grow.on .fig-rev{animation:atlas-draw 1.1s ease .25s backwards}
html.js .edition.grow.on .fig-cost{animation:atlas-draw 1.1s ease .42s backwards}
html.js .edition.grow.on .fig-node{animation:atlas-pop .5s cubic-bezier(.3,1.5,.5,1) 1.3s backwards}
html.js .cal-band.on .cal-gauge i{animation:atlas-grow .8s var(--ease) backwards;animation-delay:calc(var(--i)*.1s)}
html.js .pp-copy.on .dial-seg{animation:atlas-dial .9s var(--ease) backwards}
html.js .pp-copy.on .dial-seg:nth-child(3){animation-delay:.5s}
html.js .pp-copy.on .dial-seg:nth-child(4){animation-delay:1s}

/* ---------- 触れる場所(スマホで居座らないよう hover:hover の中だけ) ----------
   ★ html.js .rv の transition は shorthand = transition-property を丸ごと上書きする。
   詳細度 (0,2,1) に負ける低い指定は「書いてあるのに一度も走らない」。
   ホバーを持つ器だけ、覆い・持ち上げ・ホバーを longhand の 1 つの表にまとめて上書きする。 */
@media (hover:hover){
  html.js .issues .edition.rv{
    transition-property:clip-path,transform,translate;
    transition-duration:.82s,.82s,.35s;
    transition-timing-function:var(--ease),var(--ease),var(--ease);
    transition-delay:.06s,.06s,0s}
  html.js .cal-phases li.rv{
    transition-property:clip-path,transform,translate,background-color;
    transition-duration:.82s,.82s,.3s,.3s;
    transition-timing-function:var(--ease),var(--ease),var(--ease),ease;
    transition-delay:.05s,.05s,0s,0s}
  .atlas-head a{transition:background-size .3s ease}
  .atlas-head a:hover{background-size:100% 2px}
  .atlas-head button{transition:transform .22s ease,background-color .22s ease}
  .atlas-head button:hover{background:var(--ink);transform:translateY(-2px)}
  .news-line a{transition:background-size .3s ease}
  .news-line a:hover{background-size:0 2px}
  .sheet{transition:transform .32s var(--ease)}
  .sheet:hover{transform:scale(1.035)}
  .note{transition:transform .32s var(--ease)}
  .note:hover{transform:scale(1.06)}
  .portrait img{transition:transform .7s var(--ease)}
  .portrait:hover img{transform:scale(1.05)}
  .stamp{transition:transform .4s var(--ease)}
  .stamp:hover{transform:scale(1.07)}
  .mv-bar{transition:fill .25s ease}
  .mv-bar:hover{fill:var(--sun)}
  .edition{transition:translate .35s var(--ease)}
  .edition:hover{translate:0 -8px}
  .cal-phases li{transition:translate .3s var(--ease),background-color .3s ease}
  .cal-phases li:hover{translate:0 -6px;background:var(--bg)}
  .practice li{transition:padding-left .28s ease}
  .practice li::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:0;height:2px;background:var(--sun);transition:width .28s ease}
  .practice li:hover{padding-left:18px}
  .practice li:hover::before{width:12px}
  .ct-cta{transition:transform .25s var(--ease),box-shadow .25s ease}
  .ct-cta:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 rgba(16,16,16,.34)}
  .ct-arrow{transition:translate .25s ease}
  .ct-cta:hover .ct-arrow{translate:8px 0}
}

/* ---------- 動きを減らす設定 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rv{clip-path:none!important;transform:none!important}
}