/* ============================================================
   トークン — 全部ジャケット cover1 から引いている
   地は純白 #FFFFFF、墨は #101010（実測。色味はゼロ）。
   表紙が「白地・黒の粒・縁も影もなし」と決めている以上、
   サイト側に差し色を足すと表紙だけが浮く。だから無彩色で通す。
   ============================================================ */
:root{
  color-scheme:light;
  --paper:#FFFFFF;
  --ink:#101010;          /* 表紙の文字の実測値 */
  --g2:#4A4A4A;           /* 副次テキスト   9.0:1 */
  --g3:#6E6E6E;           /* 微小ラベル     5.3:1 */
  --g4:#767676;           /* 下限。これ以上薄くしない 4.5:1 */
  --g5:#D8D8D8;           /* 罫 */
  --g6:#EDEDED;           /* 面 */
  --g7:#F7F7F7;           /* 節の地 */

  --f-display:"Didot","Bodoni Moda","Bodoni 72",serif;
  --f-mincho:"Hiragino Mincho ProN","Shippori Mincho B1","Yu Mincho",serif;
  --f-gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  /* 等幅に和文は無い。和文が混ざる所はゴシックに落とす（端末任せにしない） */
  --f-mono:"IBM Plex Mono","Hiragino Sans","Noto Sans JP",ui-monospace,Menlo,monospace;

  /* 余白は 4/8/16/24/48 の段だけ。中間値を作らない */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:48px; --s6:96px; --s7:144px;
  --gutter:var(--s4);

  --d-1:120ms; --d-2:220ms; --d-3:420ms; --d-4:900ms;
  --e-out:cubic-bezier(.22,1,.36,1);

  --wrap:1200px;
  --nav:56px;
}
@media(min-width:768px){:root{--gutter:var(--s5)}}

/* ============================================================ 書体（自前で配る）
   Apple の端末は手元の Didot とヒラギノが先に当たるので、下の和文と Bodoni は落ちてこない。
   和文はサイトに出る文字だけに削ってある（build_assets.py の fonts）。 */
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda.woff2?v=0376ac62) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-regular.woff2?v=8cfedb86) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-medium.woff2?v=9cac6f63) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Shippori Mincho B1";src:url(/assets/fonts/shippori-mincho-b1.woff2?v=bf45649d) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url(/assets/fonts/noto-sans-jp-400.woff2?v=eefdf226) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans JP";src:url(/assets/fonts/noto-sans-jp-500.woff2?v=49618d83) format("woff2");font-weight:500 700;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
/* 🚩 hidden 属性は display の指定に負ける。.menu は display:flex なので、
   これが無いとメニューが開きっぱなしになる。 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + var(--s4))}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-gothic);font-size:16px;line-height:1.7;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
::selection{background:var(--ink);color:var(--paper)}

.wrap{max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}

/* 和文の折り返し。句で折る */
.jp{word-break:auto-phrase;line-break:strict}

/* 微小ラベル — 天測表の声。数字は必ず等幅・桁揃え */
.mono{
  font-family:var(--f-mono);font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.18em;text-transform:uppercase;
}
.lbl{font-size:11px;color:var(--g3);line-height:1.6}
.lbl.mono{letter-spacing:.22em}
.ink{color:var(--ink)}
.sub{color:var(--g2);font-size:14px}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:500}
.ul{border-bottom:1px solid var(--g5);padding-bottom:3px;text-decoration:none;transition:border-color var(--d-1) var(--e-out)}
a.ul:hover,a:hover > .ul{border-color:var(--ink)}
.flush{margin:0}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:90;
  background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-decoration:none;
}
.skip:focus{top:var(--s2)}

/* ============================================================ 上帯
   上帯は道具。名義は等幅で小さく置き、ディスプレイ書体は表紙と Home の1か所だけにする。
   小文字は名義そのものなので大文字化しない。 */
.nav{
  position:sticky;top:0;z-index:70;height:var(--nav);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--g5);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:100%}
.nav-name{
  display:flex;align-items:center;height:var(--nav);
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-decoration:none;
}
.nav-links{display:none}
@media(min-width:860px){
  .nav-links{display:flex;gap:var(--s5);font-size:11px;letter-spacing:.22em}
  .nav-links a{
    display:flex;align-items:center;height:var(--nav);text-decoration:none;color:var(--g2);
    box-shadow:inset 0 -1px 0 transparent;
    transition:color var(--d-1) var(--e-out),box-shadow var(--d-1) var(--e-out);
  }
  .nav-links a:hover{color:var(--ink)}
  /* いま居る場所。色を足さず、上帯の下の罫を墨にする */
  .nav-links a[aria-current],.nav-links a.is-here{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
  .burger{display:none !important}
}

/* ============================================================ ハンバーガー（狭い画面だけ）
   3本の罫。ページ全体が罫でできているので、メニューも罫で作る。 */
.burger{
  display:grid;place-content:center;gap:5px;
  width:44px;height:44px;margin-right:-12px;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
}
.burger span{
  display:block;width:20px;height:1px;background:var(--ink);
  transition:transform var(--d-2) var(--e-out),opacity var(--d-1) var(--e-out);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;align-items:center;
  animation:fade var(--d-2) var(--e-out) both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.menu .wrap{width:100%}
.menu-list{display:grid;gap:var(--s1)}
.menu-list a{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(40px,11vw,72px);line-height:1.16;
  text-decoration:none;display:inline-block;
  animation:rise var(--d-3) var(--e-out) both;
}
.menu-list li:nth-child(1) a{animation-delay:45ms}
.menu-list li:nth-child(2) a{animation-delay:90ms}
.menu-list li:nth-child(3) a{animation-delay:135ms}
.menu-list li:nth-child(4) a{animation-delay:180ms}
.menu-list li:nth-child(5) a{animation-delay:225ms}
.menu-list a[aria-current],.menu-list a.is-here{border-bottom:1px solid var(--ink)}
.menu-foot{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
.menu-foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

/* ============================================================ 節 */
.sec{padding-block:var(--s6)}
.sec--page{padding-top:var(--s5)}
/* 上の節と地が同じ白のとき。96＋96 で間が抜けるので上を畳む */
.sec--flat{padding-top:0}
.sec--tint{background:var(--g7)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);margin-bottom:var(--s5)}
.sec-head::after{content:"";flex:1;min-width:var(--s5);height:1px;background:var(--g5)}
.sec-h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(34px,5.4vw,60px);line-height:1.05;letter-spacing:.005em;
}
.sec-h a{text-decoration:none}
/* 狭い画面では見出しを1行に独立させ、ラベルをその下に並べる（3つを横に詰めない） */
@media(max-width:719px){.sec-h{flex-basis:100%}}

.block{margin-top:var(--s5)}
.block--xl{margin-top:var(--s6)}
.block-h{margin-bottom:var(--s3)}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  font-size:11px;letter-spacing:.16em;color:var(--g3);margin-bottom:var(--s5);
  text-transform:none;      /* 曲名の icon は小文字が正。大文字化しない */
}
.crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;transition:color var(--d-1) var(--e-out)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}

@media(min-width:860px){.sticky{position:sticky;top:calc(var(--nav) + var(--s5))}}

/* ============================================================ Home の頭
   狭い画面は写真が先（顔が名刺）。広い画面は名義を左、写真を右に置き、下端を揃える。 */
.hero{padding-bottom:var(--s5)}
.hero-grid{display:grid;gap:var(--s4)}
.hero-photo{order:-1;margin-inline:calc(var(--gutter) * -1)}
.hero-photo img{width:100%}
.hero-name{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(72px,23vw,128px);line-height:.9;letter-spacing:-.012em;
  margin:var(--s2) 0 var(--s3) -.04em;
}
.hero-kana{letter-spacing:.3em}
.hero-new{
  display:grid;gap:var(--s1);margin-top:var(--s5);padding-top:var(--s3);
  border-top:1px solid var(--ink);text-decoration:none;
  transition:opacity var(--d-1) var(--e-out);
}
.hero-new:hover{opacity:.6}
.hero-new-t{font-family:var(--f-mincho);font-size:clamp(18px,2.2vw,22px);line-height:1.6}
.go-a{font-family:var(--f-mono);font-size:13px;margin-left:var(--s2)}
@media(min-width:720px){
  .hero{padding-top:var(--s5)}
  .hero-grid{grid-template-columns:minmax(0,1fr) min(44vw,540px);column-gap:var(--s5);align-items:end}
  .hero-photo{order:0;margin-inline:0}
  /* 名義の幅は約3.62em。左の列（画面幅−余白−写真）に収まる大きさを式で持つ */
  .hero-name{font-size:clamp(64px,15.4vw - 42px,168px)}
  .hero-new{max-width:440px}
}

/* ============================================================ 署名 — 今日の東京の夜
   1本の罫が今日の24時間。太い墨が夜（航海薄明の外）、細い罫が昼。短い縦線が今。
   収録曲の罫（11:57 の夜を5つに割ったもの）と同じ書き方で、こちらは1日を割っている。
   🚩 サイトにこの説明は書かない。 */
.almanac{margin-top:var(--s5)}
.alm-rule{width:100%;height:9px;overflow:visible}
.alm-base{fill:var(--g5)}
.alm-night,.alm-now{fill:var(--ink)}
.alm-night{transform-box:fill-box;transform-origin:left center;animation:grow var(--d-4) var(--e-out) both}
#alm-n2{animation-delay:var(--d-2)}
.alm-facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3);font-size:11px;letter-spacing:.22em}
.alm-facts div{display:flex;gap:1em}
.alm-facts dt{color:var(--g3)}
@media(min-width:720px){.alm-clock{margin-left:auto}}

/* ============================================================ 表紙と作品紹介
   表紙の地は紙と同じ純白。枠も影も置かない＝紙に直接刷ってあるように見せる */
.cover{display:block}
.cover img{width:100%}
.rel-grid,.release{display:grid;gap:var(--s5)}
@media(min-width:860px){
  .rel-grid,.release{grid-template-columns:min(38vw,440px) minmax(0,1fr);column-gap:clamp(48px,7vw,96px);align-items:start}
  .release--full{grid-template-columns:min(42vw,520px) minmax(0,1fr)}
}
.release-h{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.05;margin-top:var(--s2)}
.release-h a{text-decoration:none}
.release-h--xl{font-size:clamp(44px,7vw,88px);letter-spacing:-.005em}
.release-meta{margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4)}
/* 行の中の小さなリンクでも、指で押せる高さを持たせる（見た目の行間は変えない） */
.release-meta a{display:inline-block;padding-block:12px;margin-block:-12px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--g5);text-underline-offset:5px}
.release-meta a:hover{text-decoration-color:var(--ink)}

/* 作品紹介。事実ではなく本人の言葉が主役になる場所 */
.copy{max-width:36em}
.release .copy{margin-top:var(--s5)}
.copy p{font-family:var(--f-mincho);font-size:16px;line-height:2.05;margin:0 0 var(--s3);color:var(--g2);text-wrap:pretty}
.copy p:last-child{margin-bottom:0}

.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:52px;padding:0 var(--s4);
  background:var(--ink);color:var(--paper);text-decoration:none;border:1px solid var(--ink);
  font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:opacity var(--d-1) var(--e-out),transform var(--d-1) var(--e-out),background-color var(--d-1) var(--e-out),color var(--d-1) var(--e-out);
}
.btn:hover{opacity:.82}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:none;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);opacity:1}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ============================================================ 収録曲
   行そのものが歌詞ページへの入口。 */
.tracks{margin-top:var(--s5);border-top:1px solid var(--g5)}
.track{border-bottom:1px solid var(--g5)}
.track-top{
  display:grid;grid-template-columns:2.2em minmax(0,1fr) auto 3em;align-items:baseline;gap:var(--s3);
  padding-block:var(--s3);min-height:56px;text-decoration:none;
}
.track-no{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--g3);letter-spacing:.1em}
.track-name{font-family:var(--f-display);font-size:clamp(22px,3vw,30px);line-height:1.15;transition:opacity var(--d-1) var(--e-out)}
.track-time{font-family:var(--f-mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--g2);text-align:right}
.track-open{
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--g3);
  border-bottom:1px solid var(--g5);padding-bottom:2px;
  transition:color var(--d-1) var(--e-out),border-color var(--d-1) var(--e-out);
}
.track-top:hover .track-open{color:var(--ink);border-color:var(--ink)}
.track-top:hover .track-name{opacity:.6}

/* 署名（作品ページ） — アルバムは「ひと晩の Aubade」。5本の罫は棒グラフではなく、
   11:57 という1本の夜を5つに割ったもの。黒い区間の位置も長さも実測値で、
   上から下へ読むと黒が左から右へ歩く＝夜が明けていく。🚩 サイトにこの説明は書かない。 */
.tracks--ruled{border-top:0}
.tracks--ruled .track{border-bottom:0;padding-bottom:var(--s3);view-timeline-name:--trk}
.tracks--ruled .track-name{font-size:clamp(26px,3.6vw,36px)}
.track-rule{width:100%;height:3px;overflow:visible}
.tr-base{fill:var(--g5)}
.tr-on{fill:var(--ink);transform-box:fill-box;transform-origin:left center}
.tracks-foot{display:flex;justify-content:flex-end;border-top:1px solid var(--ink);padding-top:var(--s3);margin-top:var(--s2)}

/* ============================================================ 行のリスト（配信先・フォロー・セットリスト） */
.rows{border-top:1px solid var(--g5)}
.row{
  display:flex;align-items:baseline;gap:var(--s3);
  min-height:52px;padding-block:14px;border-bottom:1px solid var(--g5);
  text-decoration:none;font-size:16px;line-height:1.5;
  transition:opacity var(--d-1) var(--e-out);
}
.row:hover{opacity:.55}
.row-n{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--g3);letter-spacing:.1em;min-width:2.2em}
.row-a{margin-left:auto;font-family:var(--f-mono);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--g2);letter-spacing:.06em}
@media(min-width:860px){
  .rows--2{columns:2;column-gap:var(--s5);border-top:0}
  .rows--2 li{break-inside:avoid}
  .rows--2 .row{border-top:1px solid var(--g5);border-bottom:0}
}

/* ============================================================ 動画
   埋め込まない。サムネイルは自分の所から出し、押したら YouTube へ出る。
   絵は白黒で置く（色の付いたサムネイルが並ぶと、紙の上でそこだけ浮く）。指を乗せると色が戻る。 */
.video{display:grid;gap:var(--s4);text-decoration:none}
.thumb{overflow:hidden;background:var(--g6)}
.thumb img{
  width:100%;filter:grayscale(1) contrast(1.04);
  transition:filter var(--d-3) var(--e-out),transform var(--d-4) var(--e-out);
}
@media(hover:hover){.video:hover .thumb img{filter:none;transform:scale(1.015)}}
.video:focus-visible .thumb img{filter:none}
.video-meta{display:grid;gap:var(--s2);justify-items:start;align-content:end}
.video-t{font-family:var(--f-mincho);font-weight:400;font-size:17px;line-height:1.6;margin:0}
.video--big .video-t{font-size:clamp(19px,2.4vw,24px)}
.go{font-size:11px;letter-spacing:.16em;color:var(--g2);margin-top:var(--s1);transition:color var(--d-1) var(--e-out)}
.video:hover .go{color:var(--ink)}
@media(min-width:860px){
  .video--big{grid-template-columns:minmax(0,62fr) minmax(0,38fr);column-gap:var(--s5);align-items:end}
}
.videos{display:grid;gap:var(--s5) var(--s5);margin-top:var(--s6)}
@media(min-width:720px){.videos{grid-template-columns:1fr 1fr}}

/* ============================================================ 入口（ほかのページへ） */
.door{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  border-top:1px solid var(--g5);padding-block:var(--s4);
  text-decoration:none;transition:opacity var(--d-1) var(--e-out);
}
.door:last-of-type{border-bottom:1px solid var(--g5)}
.door:hover{opacity:.55}
.door-t{font-family:var(--f-display);font-size:clamp(26px,4vw,40px);line-height:1.1}
.door-s{font-size:14px;color:var(--g2)}
.door-a{font-family:var(--f-mono);font-size:13px;font-weight:500}
.video + .door,.rv + .door{margin-top:var(--s5)}
.doors{margin-top:var(--s5)}

/* ============================================================ プロフィール */
.about{display:grid;gap:var(--s5)}
@media(min-width:860px){.about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s6);align-items:end}}
.about-text p{font-family:var(--f-mincho);font-size:16px;line-height:2.05;margin:0 0 var(--s4)}
.about-text p:last-child{margin-bottom:0}
p.about-first{font-family:var(--f-mincho);font-size:clamp(19px,2.6vw,24px);line-height:1.75}
.profile{display:grid;gap:var(--s5)}
.profile img{width:100%}
@media(min-width:860px){.profile{grid-template-columns:min(42vw,520px) minmax(0,1fr);column-gap:clamp(48px,7vw,96px);align-items:start}}
.profile-name{font-family:var(--f-display);font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:-.008em;margin-bottom:var(--s5)}

.facts{margin-top:var(--s5)}
.fact{
  display:grid;grid-template-columns:7.5em 1fr;gap:var(--s3);
  padding-block:var(--s3);border-top:1px solid var(--g5);align-items:baseline;
}
.fact:last-child{border-bottom:1px solid var(--g5)}
.fact dd{font-size:16px}
/* 実績のように行数が少ないときは、ライブ欄ほど間を空けない */
.facts--tight .fact{grid-template-columns:8.5em 1fr;padding-block:var(--s2)}
.about .facts{margin-top:0}

/* ============================================================ 曲のページ（歌詞） */
.song{display:grid;gap:var(--s5)}
@media(min-width:860px){.song{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,8vw,144px);align-items:start}}
.song-h{font-family:var(--f-display);font-weight:400;font-size:clamp(52px,9vw,120px);line-height:.98;letter-spacing:-.01em;margin-top:var(--s2)}
.song-rule{margin-top:var(--s4)}
.song .btn-row{margin-top:var(--s4)}
.lyr{max-width:32em}
.lyr p{font-family:var(--f-mincho);font-size:17px;line-height:2.1;margin:0 0 var(--s5);word-break:auto-phrase}
.lyr p:last-child{margin-bottom:0}
.credit{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--g5);text-transform:none}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6);border-top:1px solid var(--ink)}
.pager-a{display:grid;gap:var(--s1);padding-block:var(--s4);text-decoration:none;transition:opacity var(--d-1) var(--e-out)}
a.pager-a:hover{opacity:.55}
.pager-a--next{text-align:right}
.pager-t{font-family:var(--f-display);font-size:clamp(24px,4vw,40px);line-height:1.1}

/* ============================================================ ライブ */
.date{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(46px,12vw,132px);line-height:.92;letter-spacing:.01em;margin-top:var(--s3);
}
.date small{display:block;font-size:.24em;letter-spacing:.3em;margin:var(--s3) 0 var(--s4);font-family:var(--f-mono);color:var(--g2)}

/* ============================================================ グッズ */
.goods{display:grid;gap:var(--s5)}
@media(min-width:720px){.goods{grid-template-columns:1fr 1fr}}
/* 画像の比率が2枚で違う。下端で揃え、説明文の開始位置を一致させる */
.good{display:flex;flex-direction:column}
.good figure{flex:1;display:flex;align-items:flex-end}
.good picture{width:100%}
.good img{width:100%;border:1px solid var(--g5)}
.good-name{font-family:var(--f-display);font-weight:400;font-size:26px;margin:var(--s4) 0 var(--s1);line-height:1.2}
.good-spec{font-size:14px;color:var(--g2)}
.good-price{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums;font-size:19px;margin-top:var(--s3)}
.good-price span{font-size:12px;color:var(--g3);margin-left:var(--s2);letter-spacing:.1em}

/* ============================================================ 脚 */
.foot{border-top:1px solid var(--g5);padding-block:var(--s6) var(--s5)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
@media(min-width:720px){.foot-grid{grid-template-columns:repeat(3,minmax(0,220px))}}
.foot-list{margin-top:var(--s2)}
.foot-list a{
  display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  font-size:14px;color:var(--g2);transition:color var(--d-1) var(--e-out);
}
.foot-list a:hover{color:var(--ink)}
/* 🚩 名義は小文字が正。等幅ラベルの大文字化を、名義が入る所では切る */
.foot-fine{font-size:11px;color:var(--g4);letter-spacing:.18em;margin-top:var(--s6);text-transform:none}

/* ============================================================ 焦点 */
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ============================================================ 動き
   ページをまたぐ遷移はブラウザに任せる（表紙は前のページの位置から次の位置へ移る）。
   登場はスクロール駆動だけ。対応しない環境では最初から見えている（隠してから出す、をしない）。 */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-2)}
.vt-cover img{view-transition-name:cover}
::view-transition-group(cover){animation-duration:var(--d-3);animation-timing-function:var(--e-out)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  /* 罫が伸びるのは「時間が流れる」の意味を持つときだけ */
  .tracks--ruled .tr-on{animation:grow linear both;animation-timeline:--trk;animation-range:entry 20% cover 32%}
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

@media print{
  .nav,.menu,.foot,.btn-row,.skip{display:none !important}
  .sec{padding-block:var(--s4)}
}