/* RONDO トップページの節。ここに書くのは、このページの中の 1 か所にしか出てこない節だけ。
   ほかのページでも使う形になったら components.css へ移すこと。

   生の数値を書かない。例外は図版そのものの寸法を決める clamp() で、
   そのときは理由をその場に書く */

/* ポスターの図形は、すべて 1 つの枡の整数倍で置く。
   枡は詰めた模様 (.tile-panel) と同じ割り方で、幅を 18〜6 に割ったもの。
   同じ画面の中に別の割り方を持ち込まない。

   cqw で取るのは、vw だと縦スクロールバーのぶんだけ広く出るため。
   container-type は inline-size だけにする。size にすると高さも内容から
   切り離されて、ポスターが潰れる */
.poster {
    width: 100%;
    padding-top: var(--space-6);
    /* 見出しの反転 (difference) は、この中で重ね合わせる。container-type で
       ここが重ね合わせの区切りになるので、地を透明のままにすると
       白い地の上で文字が白のまま消える。紙の色を敷いておく */
    background-color: var(--surface);
    container-type: inline-size;
}

/* 割る数は画面の幅で変える。@container ではなく @media で書く。
   @container は自分より外の入れ物にしか効かないので、
   .poster 自身を .poster の中から問い合わせることはできない。
   オープニングの覆い (.opening) も同じ枡で組むので、割る数 (--cols) を 1 か所で持つ */
.poster,
.opening {
    --cols: 18;
    --unit: calc((100cqw - 2 * var(--gutter-x)) / var(--cols));
}
@media (max-width: 1999px) { .poster, .opening { --cols: 15; } }
@media (max-width: 1599px) { .poster, .opening { --cols: 12; } }
@media (max-width: 1199px) { .poster, .opening { --cols: 9; } }
@media (max-width: 767px)  { .poster, .opening { --cols: 6; } }

.poster-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--space-7) var(--gutter-x) var(--space-5);
}

.poster-logo img {
    width: 100%;
    height: auto;
    /* 画像が届く前から高さを決めておく。オープニングの最後のコマと位置を合わせるため */
    aspect-ratio: var(--logo-ratio);
}

/* オープニング。トップを初めて開いたときだけ、約 2.9 秒 (docs/DESIGN.md §5.4.1)。
   ロゴの下の罫線に図形が 3 回積もり、ロゴの形になって本物に切り替わる。

   組み方の決まり。何も効いていない状態 (アニメーションが終わったあと) を、最後のコマにする。
   途中の状態は、アニメーションが動いているあいだだけ効く指定で作る。forwards は保険にだけ使う。
   時刻の値は tokens.css。出す・出さないは index.html の head の判定、止めどきは site.js

   スクロールは止めない。止めるとスクロールバーが常に出る環境 (Windows など) で、覆いのあいだだけ
   画面の幅の基準が変わり、そのあいだに分けたキャッチの行が、開いたあと右へはみ出す。
   黒に反転しているあいだ、右端にスクロールバーの溝の白い筋も残る。
   ホイール・タッチ・キーで飛ばし、スクロールが起きたらすぐに開く (site.js) */
html.is-opening .nav {
    visibility: hidden;
    animation: op-show 0s var(--op-failsafe) forwards;
}

/* 覆い。ページの頭に 1 枚だけ置く。スクロールしたら外れるが、そのときは site.js がすぐに開く */
html.is-opening .opening {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: var(--z-opening);
    background-color: var(--surface);
    container-type: inline-size;
    /* op-clock は、何も描かない時計。終わったことを site.js が受け取って覆いを透かす */
    animation:
        op-clock calc(var(--op-invert-at) + var(--dur-invert)) linear,
        op-failsafe 0s var(--op-failsafe) forwards;
}

/* ロゴの箱までの組み。.poster の上の余白と .poster-logo の余白をそのまま写す */
.opening-head {
    position: relative;
    padding-top: var(--space-6);
    /* 3 つ積んだ列が、ロゴの箱の高さに収まる大きさ。ふだんは 1 マスのまま。
       ロゴが画面の幅のわりに低い幅 (6 列の 480〜767px) では 1 マスで 3 つ積むと画面の上の端から出るので、
       そこだけ図形を 1 マスより小さくする (docs/DESIGN.md §5.4.1) */
    --op-head-h: calc(var(--space-6) + var(--space-7) + var(--space-5) +
        (100cqw - 2 * var(--gutter-x)) / (var(--logo-ratio)));
    --op-cell: min(var(--unit), (var(--op-head-h) - var(--space-3)) / 3);
}

.opening-logo {
    display: flex;
    padding: var(--space-7) var(--gutter-x) var(--space-5);
}

.opening-name {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--logo-ratio);
    fill: var(--fg);
    animation: op-dark calc(var(--op-invert-at) + var(--dur-invert)) step-end;
}

/* 罫線の上に立つ図形の列。罫線が地面 (§4.4)。反転の時刻まで見せる */
.opening-stations {
    position: absolute;
    left: var(--gutter-x);
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--unit));
    align-items: end;
    list-style: none;
    visibility: hidden;
    animation: op-lit var(--op-invert-at) step-end;
}

/* 1 列。下から積む。点く時刻は列の位置から出す (線や波がそこを通る時刻) */
.opening-stations > li {
    display: none;
    flex-direction: column-reverse;
    grid-column: var(--col);
    grid-row: 1;
    --t1: calc(var(--op-start) + var(--op-drop-lag) + var(--op-pass-1) * (var(--col) - 0.5) / var(--cols));
    --t2: calc(var(--op-pass-2-at) + var(--op-wave-2) * (var(--col) - 1) / var(--cols));
    --t3: calc(var(--op-pass-3-at) + var(--op-wave-3) * (var(--col) - 1) / var(--cols));
}

/* 列の置き場所。6 つがロゴの象徴と R・O・N・D・O。
   6 列の画面は詰めて並べ、広い画面ほどあいだを空ける。15 列から 2 つ、18 列でさらに 2 つ足す */
.opening-stations > li:nth-child(-n + 6) { display: flex; }
.opening-stations > li:nth-child(1) { --col: 1; }
.opening-stations > li:nth-child(2) { --col: 3; }
.opening-stations > li:nth-child(3) { --col: 4; }
.opening-stations > li:nth-child(4) { --col: 7; }
.opening-stations > li:nth-child(5) { --col: 8; }
.opening-stations > li:nth-child(6) { --col: 10; }
.opening-stations > li:nth-child(7) { --col: 13; }
.opening-stations > li:nth-child(8) { --col: 14; }
.opening-stations > li:nth-child(9) { --col: 17; }
.opening-stations > li:nth-child(10) { --col: 18; }
@media (min-width: 1600px) {
    .opening-stations > li:nth-child(-n + 8) { display: flex; }
}
@media (min-width: 2000px) {
    .opening-stations > li { display: flex; }
}
@media (max-width: 1199px) {
    .opening-stations > li:nth-child(4) { --col: 6; }
    .opening-stations > li:nth-child(5) { --col: 7; }
    .opening-stations > li:nth-child(6) { --col: 9; }
}
@media (max-width: 767px) {
    .opening-stations > li:nth-child(2) { --col: 2; }
    .opening-stations > li:nth-child(3) { --col: 3; }
    .opening-stations > li:nth-child(4) { --col: 4; }
    .opening-stations > li:nth-child(5) { --col: 5; }
    .opening-stations > li:nth-child(6) { --col: 6; }
}

/* 1 つの図形。白い地に黒。下に次の図形が積もったら、地ごと反転して黒に白で埋もれる。
   積んだ黒どうしの継ぎ目に白い線が出ないよう、大きさを整数の px にそろえる */
.opening-cell {
    display: block;
    width: var(--op-cell);
    height: var(--op-cell);
    background-color: var(--surface);
    fill: var(--fg);
}
@supports (width: round(down, 1.5px, 1px)) {
    .opening-cell {
        width: round(down, var(--op-cell), 1px);
        height: round(down, var(--op-cell), 1px);
    }
}

.opening-cell.is-p1 { --on: var(--t1); }
.opening-cell.is-p2 { --on: var(--t2); }
.opening-cell.is-p3 { --on: var(--t3); }
.opening-cell.is-b2 { --bury: var(--t2); }
.opening-cell.is-b3 { --bury: var(--t3); }

.opening-cell.is-p1,
.opening-cell.is-p3 {
    animation: op-lamp-a var(--lamp-a) step-end var(--on) backwards;
}
.opening-cell.is-p2 {
    animation: op-lamp-c var(--lamp-c) step-end var(--on) backwards;
}
.opening-cell.is-p1.is-b2,
.opening-cell.is-p1.is-b3 {
    animation:
        op-lamp-a var(--lamp-a) step-end var(--on) backwards,
        op-bury var(--op-invert-at) step-end var(--bury);
}
.opening-cell.is-p2.is-b3 {
    animation:
        op-lamp-c var(--lamp-c) step-end var(--on) backwards,
        op-bury var(--op-invert-at) step-end var(--bury);
}

/* 通り道。ロゴの下の罫線と同じ場所に、左から等速で引く。引き終えたらそのまま残る */
.opening-route {
    transform-origin: left center;
    animation: op-draw var(--op-pass-1) linear var(--op-start) backwards;
}

/* 反転。上の端から罫線までを黒にし、ロゴの位置に白で 6 つを点ける。
   象徴は反転と同時に、R・O・N・D・O は 1 つずつ */
.opening-ink {
    position: absolute;
    inset: 0;
    padding-top: var(--space-6);
    visibility: hidden;
    animation: op-lit var(--dur-invert) step-end var(--op-invert-at);
}

.opening-ink .opening-name {
    animation: none;
}

.opening-ink use:nth-child(n + 2) {
    animation: op-dark calc(var(--op-invert-at) + var(--op-letter-at) + var(--k) * var(--op-letter-step)) step-end;
}
.opening-ink use:nth-child(2) { --k: 0; }
.opening-ink use:nth-child(3) { --k: 1; }
.opening-ink use:nth-child(4) { --k: 2; }
.opening-ink use:nth-child(5) { --k: 3; }
.opening-ink use:nth-child(6) { --k: 4; }

/* 罫線の下に刷る見出しの写し (site.js の printCatch)。本物の見出しと同じ位置と組みで、
   覆いの白の上に墨で置く。本物は 3D に重ねて白黒を入れ替える (difference) が、覆いの上では外す */
/* .poster-headline (position: relative) より強くする */
.opening .opening-print {
    position: absolute;
    margin: 0;
    color: var(--fg);
    mix-blend-mode: normal;
}

.opening-print .tl-line {
    position: relative;
}

.opening-print .tl-inner {
    opacity: 1;
    transform: none;
    transition: none;
}

/* 行を覆う板。行の窓と同じだけ上下に余裕を持たせ、右の端を軸に縮める */
.opening-shutter {
    position: absolute;
    top: -0.5em;
    right: -1em;
    bottom: -0.25em;
    left: 0;
    background-color: var(--surface);
    transform-origin: right center;
}

/* 開いたときは、刷り終えた見出しをそのまま出す。行を上げ直さない */
.poster-headline.op-printed .tl-inner {
    transition: none;
}

/* 覆いを透かしたあと。下の本物のロゴと重なり、穴の無い形を消して穴を開ける。
   html.is-opening .opening の白い背景より強くしておく (弱いと透けず、ロゴが消えた白い画面が挟まる) */
html.is-opening .opening.is-clear {
    background-color: transparent;
}

/* 穴を開けるのは黒いほうのロゴだけ。反転に使った白いロゴは外しておく
   (ちらつきが白いロゴにも掛かると、本物のロゴの上に白が重なる) */
.opening.is-clear .opening-ink {
    display: none;
}

.opening.is-clear .opening-name {
    animation: op-holes var(--lamp-holes) step-end forwards;
}

/* 拍は home.js の BLINK_BEATS と同じ刻み。偶数番めで消え、奇数番めで点く。
   A = [0, 26, 44, 64, 96, 128]、C = [0, 34, 52, 78, 104, 132, 172, 190]、穴 = [0, 26, 44, 64, 96] */
@keyframes op-lamp-a {
    0% { visibility: hidden; }
    20.3% { visibility: visible; }
    34.4% { visibility: hidden; }
    50% { visibility: visible; }
    75% { visibility: hidden; }
}

@keyframes op-lamp-c {
    0% { visibility: hidden; }
    17.9% { visibility: visible; }
    27.4% { visibility: hidden; }
    41.1% { visibility: visible; }
    54.7% { visibility: hidden; }
    69.5% { visibility: visible; }
    90.5% { visibility: hidden; }
}

@keyframes op-holes {
    0% { visibility: hidden; }
    27.1% { visibility: visible; }
    45.8% { visibility: hidden; }
    66.7% { visibility: visible; }
    100% { visibility: hidden; }
}

@keyframes op-bury {
    from, to { background-color: var(--ink); fill: var(--paper); }
}

@keyframes op-lit {
    from, to { visibility: visible; }
}

@keyframes op-dark {
    from, to { visibility: hidden; }
}

@keyframes op-draw {
    from { transform: scaleX(0); }
    to { transform: none; }
}

@keyframes op-clock {
    from, to { background-color: var(--surface); }
}

/* 保険。visibility だけでは、ちらつきで visible を書かれた子が残るので、切り抜きで覆いごと消す */
@keyframes op-failsafe {
    to { visibility: hidden; clip-path: inset(50%); }
}

@keyframes op-show {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: reduce), print {
    .opening {
        display: none !important;
    }
}

/* 1 段目：図形で抜いた写真の枠を横いっぱいに並べる */
.poster-row-1 {
    /* 余白を持たない。左右は画面の端まで、上下は罫に接させる。
       ここだけ版面の外へ出す (§4.1 色面は端まで届かせる) */
    width: 100%;
    padding: 0;
}

.glyph-cluster {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
}

/* 大きさは列が決める。高さを決め打ちにすると、並べて入りきらないときに
   幅だけ縮んで箱が縦長になり、中の図形が上下中央へ寄って
   下の罫から浮く */
.glyph {
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 1 / 1;
    fill: var(--fg);
}

/* 図形の形で写真を抜く枠。
   形は clip-path が持ち、中では写真が重なって入れ替わる。
   地を墨にしておくと、写真が読み終わる前も figure の形が出る。 */
.glyph-frame {
    position: relative;
    overflow: hidden;
    background: var(--ink);
}

.glyph-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* 止まっているあいだも、ゆっくり寄り続ける */
    transform: scale(1.14);
    transition:
        opacity 1.4s var(--ease),
        transform 9s linear;
}

.glyph-photo.is-on {
    opacity: 1;
    transform: scale(1);
}

/* 2 段目：大見出しと、そのすぐ横の本文 */
.poster-row-2 {
    position: relative;
    width: 100%;
    padding: var(--gap-col) var(--gutter-x) var(--space-8);
}

/* キャッチの和文は、欧文の大見出しほど詰めない。中国語と韓国語も同じ。
   太さも W7 に落とす。漢字と仮名とハングルは、欧文の Black と並べると黒く詰まって見える
   行送りは和文の特大 (.display-5) と同じ値にする。欧文の 0.95 のままだと、
   仮名と漢字が字面いっぱいまであるので上下の行が接して見える */
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .poster-headline {
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display-ja);
}

.poster-headline {
    /* 端末の頭が見出しの下の行まで届くので、文字を 3D より手前に置く */
    position: relative;
    z-index: 2;
    margin-bottom: var(--space-7);
    /* 下に来たものに合わせて白黒を入れ替える。天面 (.nav) と同じ理屈で、
       白い文字を difference で重ねる。紙の上では黒、端末の黒い縁の上では白、
       明るい画面の上では黒になる */
    color: var(--paper);
    mix-blend-mode: difference;
}

/* 本文の最後の行と図形の底を、同じ罫の上で揃える (align-items: end)。
   中央で揃えると図形の上下に同じだけ空きが出て、罫から浮く
   (§4.4-2 罫が地面)。上で揃えると、こんどは本文の下が白く抜ける。
   空きは見出しと本文のあいだに集める。大きい見出しのあとの一息になる。

   文字の列を図形より狭くする。本文が 5 行になり、
   文字の塊と図形の塊が溝ひとつで隣り合う。
   広いと本文が 2 行で終わって、右端と図形のあいだが白く抜ける */
.poster-statement {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: end;
    gap: var(--gap-col);
}

.poster-statement-text {
    max-width: var(--measure-wide);
    color: var(--fg);
    font-size: var(--text-lead);
    line-height: var(--leading-snug);
}

/* 和文・中国語・韓国語は 1 字が広いので、本文の幅 (34em) で折る。欧文は長めの本文の幅のまま */
html:is([lang="ja"], [lang="ko"], [lang^="zh"]) .poster-statement-text p {
    max-width: var(--measure-text);
}

/* 枡 8 × 4 の組。左から 1 枡、2 枡角、1 枡の三連、4 枡角と並べ、
   高さが 1・2・3・4 枡と上がっていく階段にする。
   左上は空けたままにする。埋めると、ただの長方形の黒い面になる。

   形はページを開くたびに、詰めた模様と同じ 20 種類からランダムに選ぶ
   (home.js の initPosterMotifs)。6 つとも別の形にし、真っ黒な正方形は外す。
   大きい 4 枡角に当たると、ただの黒い四角になるので。

   大きさを枡の整数倍だけにするのは、間の寸法を作らないため。
   半端な大きさだと、どれとどれが同じ大きさなのか読めない。

   段の下の余白ぶんだけ引き下げて、下の罫に底を着ける (§4.4-2 罫が地面)。 */
.poster-motifs {
    display: grid;
    grid-template-columns: repeat(8, var(--unit));
    grid-template-rows: repeat(4, var(--unit));
    justify-self: end;
    align-self: end;
    margin-bottom: calc(-1 * var(--space-8));
    /* 2 列 2 段を全部使い、右端に寄せる。左上のバッジとは、
       階段の空いている左上で重ならない */
    grid-area: 1 / 1 / 3 / 3;
}

.poster-motif {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 1 枡の三連。4 枡角の左に立てる */
.poster-motif:nth-child(1) { grid-area: 2 / 4 / 3 / 5; }
.poster-motif:nth-child(2) { grid-area: 3 / 4 / 4 / 5; }
.poster-motif:nth-child(3) { grid-area: 4 / 4 / 5 / 5; }
/* 4 枡角。本文の右端に着ける */
.poster-motif:nth-child(4) { grid-area: 1 / 5 / 5 / 9; }
/* 2 枡角と 1 枡。どれも同じ底 (下の罫) で終わらせる */
.poster-motif:nth-child(5) { grid-area: 3 / 2 / 5 / 4; }
.poster-motif:nth-child(6) { grid-area: 4 / 1 / 5 / 2; }

.poster-motif svg {
    width: 100%;
    height: 100%;
    fill: var(--fg);
}

/* ファーストビューの端末の置き場所。中身は空の箱で、段いっぱいの 3D (.poster-scene) が
   この箱を基準に端末を置く。
   箱の下端を下の罫に合わせ、端末の足を罫の下で切る (罫が地面)。
   下のセクション (写真の列) にはかぶせない。
   --phones-below はキャンバスの下端が罫より何枡下か。0 で罫ちょうど。
   home.js も同じ値を読む。右は画面の端まで取り、右の 1 台はそこで切れる */
.poster-phones {
    --phones-below: 0;
    position: absolute;
    right: calc(-1 * var(--gutter-x));
    bottom: calc(-1 * var(--space-8) - var(--phones-below) * var(--unit));
    z-index: 1;
    width: calc(9.1 * var(--unit));
    /* 罫の上に 6 枡 (7 枡の端末から沈めた 1 枡を引いた分) と、揺れの余り。
       パララックスでは沈むだけなので、これより上には出ない */
    height: calc((6.3 + var(--phones-below)) * var(--unit));
    pointer-events: none;
}

.poster-phones canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ファーストビューの 3D。段いっぱいに敷き、下端を下の罫に合わせる。
   端末の足はここで切れる。見出しとダウンロードのブロックより奥 */
.poster-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.poster-scene canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ダウンロードのブロックは 3D より手前。z-index は付けない。付けると重ね合わせの
   まとまりが閉じて、下の一覧の白黒反転が 3D と合成されなくなる。
   位置を持った要素は文書の順に重なるので、3D (.poster-scene) の後ろに書けば手前に来る */

/* 端末の後ろに敷く図形のパターン。段いっぱいに広げ、はみ出た枡は画面の端で切る。
   端末 (z-index 1) と見出し (2) より奥に置く。枡の位置は home.js が px で決める */
.poster-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.backdrop-tile {
    position: absolute;
    display: block;
    fill: var(--fg);
}

/* 図形の組は見せない。広い画面では 3 台が浮いて置かれるので、
   組の場所だけ残して段の高さ (罫の位置) を決めさせる。
   狭い画面では組ごと外し、3 台をその場所に流し込む (下の「狭い画面」)。

   ダウンロードのブロックは 3 台の左で止める。3 台の左端は画面の左から
   余白 2 つぶん + (列の数 - 9.1) 枡。12 列のときがいちばん狭い。
   英語は 1 行が長く、止めないと端末に 50px ほどかぶる */
@media (min-width: 1200px) {
    .poster-motifs { visibility: hidden; }

    .appstore-block {
        max-width: calc(var(--gutter-x) + 2.6 * var(--unit));
    }
}

.appstore-block {
    grid-area: 1 / 1 / 2 / 2;
    align-self: start;
    justify-self: start;
}

/* できることを 3 つ。太い文字だけで並べる。3 行のあいだは行送り (1.7) だけにする。
   項目のあいだにさらに --space-3 を足すと、1 行ずつ離れて見える */
.appstore-points {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.appstore-points li {
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

/* 一覧と条件は、後ろの 3D に合わせて白黒を入れ替える。大見出し (.poster-headline) と同じ理屈で、
   白い文字を difference で重ねる。紙の上では黒、黒い図形の上では白になる。
   図形は一覧をよけて置くが、スクロールで上がってくると重なる。
   大見出しと同じく 3D より手前に重ねる。重ね順を持たないと、iOS 26 の Safari では
   反転が効かず、白い文字が白い紙の上に残って見えなくなる */
.appstore-points,
.appstore-note {
    position: relative;
    z-index: 2;
    color: var(--paper);
    mix-blend-mode: difference;
}

.appstore-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.appstore-note > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.appstore-note > span + span::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: currentColor;
}

.appstore-badge {
    display: inline-block;
    transition: transform var(--dur) var(--ease);
}

/* オープニングのあとだけ .aos で出す (site.js が data-opening-aos に付ける)。
   出るときの薄さの変化は .aos と同じ長さで、載せたときの浮き上がりはふだんの速さのまま */
.appstore-badge.aos {
    transition:
        opacity var(--dur-pop) var(--ease),
        transform var(--dur) var(--ease);
}

.appstore-badge:hover {
    /* 薄くすると灰色になるので、少し浮かせて示す */
    transform: translateY(-2px);
}

.appstore-badge img {
    display: block;
    /* バッジは Apple 公式の SVG をそのまま置く。自分で描かない。
       比率は 119.66407 × 40 ≒ 2.99:1 で、勝手に変えない。
       幅は天面のボタンと釣り合う大きさ。小さくしすぎると Apple の決まりを割る */
    width: clamp(132px, 13vw, 180px);
    height: auto;
}

/* 3 段目：左に図形、右にロゴタイプ */

/* minmax(0, …) にすること。素の fr は最小値が auto なので、
   図形がトラックを押し広げて、版面から出るかわりに隣を押してしまう。 */
.poster-row-3 {
    display: grid;
    /* 左を広げて、2 枡角の三連が 2 つぶん見えるようにする。
       狭いと 1 つ半しか出ず、三連に見えない。
       右は大きい見出しが横長に組めるだけ取る。
       狭いと 6 行に折れて縦長の塊になる */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 3.4fr);
    align-items: stretch;
    gap: var(--gap-col);
    width: 100%;
    /* 上下の余白を持たない。左の図形を上下の罫まで届かせるため (§4.4-2)。
       右の組は .poster-stack が自分で余白を持つ */
    padding: 0 var(--gutter-x);
    overflow: visible;
}

/* 枡 6 × 4 の組。2 枡角が 3 つ横に連なり、その下にもうひとつ。
   上の三連はロゴタイプと同じ高さになり、下のひとつは見出しの脇に落ちる。

   6 枡は列より広いので、右端を列に合わせると (justify-content: end)
   あふれたぶんが左へ出て、画面の左端で切れる (§4.4-1 図形は必ず切れる)。
   見出しではなく装飾なので切れてよい。あふれを左へ流さないと、
   隣のロゴタイプと見出しの上に乗る。
   画面の外は html の overflow-x: clip が切るので、横スクロールは出ない。 */
.poster-shapes {
    display: grid;
    grid-template-columns: repeat(6, var(--unit));
    grid-template-rows: repeat(4, var(--unit));
    justify-content: end;
    align-self: start;
    min-width: 0;
}

.poster-shape {
    width: 100%;
    height: 100%;
    /* base.css の svg { max-width: 100% } を解く。
       効かせたままだと、幅が枡ではなく列の幅で頭打ちになる */
    max-width: none;
    fill: var(--fg);
}

/* 2 枡角の三連。上の罫から吊る */
.poster-shape:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.poster-shape:nth-child(2) { grid-area: 1 / 3 / 3 / 5; }
.poster-shape:nth-child(3) { grid-area: 1 / 5 / 3 / 7; }
/* 下の段。三連の右端に合わせて落とす */
.poster-shape:nth-child(4) { grid-area: 3 / 5 / 5 / 7; }

.poster-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* 上は持たない。ロゴタイプの天を、左の図形の天と同じ罫に合わせる */
    padding: 0 0 var(--gap-col);
}

.poster-logotype {
    /* 左に並ぶ図形の帯と釣り合う大きさ */
    width: 100%;
    max-width: 1150px;
    height: auto;
}

/* 図版の三連。溝は 0 にして罫で継ぐ。溝を空けるとカードの並びに戻る */
.triptych-section {
    width: 100%;
    padding: var(--gap-col) var(--gutter-x);
    border-top: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
}

.triptych {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    border-left: var(--rule-w) solid var(--rule);
    border-right: var(--rule-w) solid var(--rule);
}

.triptych-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-right: var(--rule-w) solid var(--rule);
}

.triptych-cell:last-child {
    border-right: none;
}

/* 枡の中身は、幅と縦横比で大きさを決める。height: 100% で決めると、
   iOS 26 の Safari が枡の内側の余白を引かずに高さを取り、円が縦に伸び、
   4 段の文字が上下の罫に着く */
.triptych-symbol {
    width: 82%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.triptych-cell-stack {
    padding: 8%;
}

.triptych-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.triptych-stack img {
    width: 100%;
    height: auto;
}

.triptych-cell-circle {
    padding: 9%;
}

.triptych-circle {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-round);
    background: var(--fg);
}

/* 4 段目：流れる帯。ポスターの締め */

/* 見出しも罫も余白も持たない。大見出しのすぐ下に帯が来る形がいちばん強く、
   あいだにラベルや余白を挟むと、そこで一度目が止まる。
   すぐ下は黒い節。図形は切らずに丸ごと並べる作りなので、
   下も空けず、黒に接するところで止める */
.poster-row-4 {
    width: 100%;
    padding: 0;
}

/* 詰めた模様。三連の下に敷く。図形を枡に詰めて地を作る。ここは切らない (§4.4 の
   「詰めて流す」)。動かさない。すぐ上のポスターの締めと、下のほうの
   詰めた板がスクロールで流れるので、ここまで動かすと画面のどこを見ても
   何かが動いていることになる。
   段は 3 段で固定。枡の数を幅で変えて、1 枡が小さくなりすぎないようにする */
.tile-grid {
    display: grid;
    /* 段を先に決めて、枡は横へ継ぐ。1fr なので幅ぴったりに割れる */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    width: 100%;
}

/* 三連の下に敷くほう。3 段。図形は home.js が入れ替える */
.tile-panel {
    grid-template-rows: repeat(3, 1fr);
}

/* 節を上下から挟むほう。3 段。入れ替えない。

   1 段では模様にならない。20 の図形はどれも枡の 75〜100% を塗るので、
   横に継ぐと隣とくっついて、ただの黒い帯になる。白が出るのは縁だけで、
   それは模様ではなく、黒い面のちぎれた端に見える。
   段を重ねると段と段のあいだに白が出て、はじめて模様として読める。

   大きさは 1 枡・2 枡角・3 枡角の 3 つを混ぜる。詰めた板 (.mosaic) と
   同じ 3 つ。全部が同じ大きさだと市松になって目が滑る。
   3 枡角を置くには 3 段いる。2 段のままだと 1 枡と 2 枡角しか入らない。

   dense にして、大きい図形の脇に空いた枡をうしろの図形が埋める。
   置き場所は書かない。列をきっちり埋める並べ方だけを HTML の順番で作り、
   あとは grid の置き方に任せる。たとえば [1 枡, 2 枡角, 1 枡] と並べると、
   2 枡角は 1 枡の下 (2〜3 段目) に落ちる。[2 枡角, 1 枡, 1 枡] なら
   2 枡角が上 (1〜2 段目) に来る。同じ 2 列でも上下が入れ替わる。

   並びは等間隔にしない。大きさを交互に置くと、混ぜた意味がなくなる。

   図形は切らない (§4.4 の「詰めるときは切らない」)。
   外側の段を黒い節へ食い込ませると、切り口は黒に隠れるものの、
   図形そのものが欠けて見える */
.tile-band {
    grid-auto-flow: column dense;
    grid-template-rows: repeat(3, 1fr);
}

/* 枡をまたぐ図形。2 枡角と 3 枡角の 2 つだけ。中くらいの大きさは作らない */
.tile-2 {
    grid-row: span 2;
    grid-column: span 2;
}

.tile-3 {
    grid-row: span 3;
    grid-column: span 3;
}

/* use で defs の図形を引く。img にすると、入れ替えるたびに読み込みが走って
   枡が一瞬空く。ここなら入れ替えは描き直しだけで済む */
.tile {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    fill: var(--fg);
}

/* 枡を画素に合わせたあとは、枡の大きさをそのまま埋める (幅の余りのぶんは、図形を横に伸ばす) */
.tile-grid.is-snapped .tile {
    height: 100%;
    aspect-ratio: auto;
}

/* 20 しか図形が無いので、上下と左右をひっくり返して見た目を増やす。
   縦の隣とも横の隣とも同じ図形にならないように配ってある */
.tile-flip {
    transform: scaleY(-1);
}

.tile-mirror {
    transform: scaleX(-1);
}

.tile-flip.tile-mirror {
    transform: scale(-1);
}

/* 蛍光灯が点くときのちらつき。点くか消えるかのどちらかで、
   移り変わりを持たせない。透かすと、黒い図形のあいだに灰が出る。
   詰めた模様の枡と、三連の図形が使う */
.is-out {
    opacity: 0;
}

/* 枡の数は幅で変える。1 枡を 100〜140px に保つのが狙い。
   少ないまま広げると 1 枡が 200px を超えて、模様ではなく図形の並びになる。
   多いまま狭めると 60px を切って、模様ですらなくなる。

   帯は 1 枡と 2 枡角と 3 枡角が混ざるので、落とす数は枡の数と一致しない。
   大きい図形が落とす位置をまたがないように組んであるので、
   6 / 9 / 12 / 15 / 18 列のどこでも図形の途中で切れない。
   上と下で並びは違うが、落とす数が同じになる組み合わせを選んである */
@media (max-width: 1999px) {
    .tile-panel .tile:nth-child(n + 46) { display: none; }
    .tile-band .tile:nth-child(n + 21) { display: none; }
}

@media (max-width: 1599px) {
    .tile-panel .tile:nth-child(n + 37) { display: none; }
    .tile-band .tile:nth-child(n + 20) { display: none; }
}

@media (max-width: 1199px) {
    .tile-panel .tile:nth-child(n + 28) { display: none; }
    .tile-band .tile:nth-child(n + 14) { display: none; }
}

@media (max-width: 767px) {
    .tile-panel .tile:nth-child(n + 19) { display: none; }
    .tile-band .tile:nth-child(n + 8) { display: none; }
}

/* 流れる帯 */
.stream {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* 版面から出して端まで届かせる */
    padding: 0;
    overflow: hidden;
}

.stream-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    margin: 0;
    padding: 0;
    will-change: transform;
}

.stream-track img {
    width: clamp(80px, 8vw, 130px);
    height: clamp(80px, 8vw, 130px);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: none;
    object-fit: contain;
}

/* 詰めた板。流れる帯と作りは同じだが、こちらは大きさを混ぜる。
   1 枡と 2 枡と 3 枡を同じ板に詰め、空いた枡はうしろの図形が埋める
   (grid-auto-flow: column dense)。上の板は 3 段、下の板は 2 段。逆向きに流す */

/* 上下に罫を引かない。模様の帯そのものが区切りになっている。
   下は空けずにフッターの黒に付ける。フッター側の上の余白も
   components.css の .mosaic-section + .finale で 0 にしている。
   上も空けない。上のセクションの下の余白だけで離す (--gap-col を足すと 2 重に空く) */
.mosaic-section {
    width: 100%;
    padding: 0 var(--gutter-x);
}

.mosaic {
    --mosaic-u: clamp(74px, 7.2vw, 122px);

    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* 版面から出して端まで届かせる */
    overflow: hidden;
}

.mosaic-track {
    display: grid;
    grid-auto-flow: column dense;
    grid-auto-columns: var(--mosaic-u);
    gap: 0;
    width: max-content;
    will-change: transform;
}

.mosaic-track-3 { grid-template-rows: repeat(3, var(--mosaic-u)); }
.mosaic-track-2 { grid-template-rows: repeat(2, var(--mosaic-u)); }

.mosaic-track svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--fg);
}

.mosaic-2 { grid-row: span 2; grid-column: span 2; }
.mosaic-3 { grid-row: span 3; grid-column: span 3; }

/* 2 段の板に 3 枡は入らない */
.mosaic-track-2 .mosaic-3 { grid-row: span 2; grid-column: span 2; }

/* 主要な機能 */
.features-section {
    width: 100%;
    padding: var(--section-y-lg) var(--gutter-x) 0;
    /* 端末の枠を画面の端まで出すので、横にはみ出た分はここで切る */
    overflow-x: clip;
}

.features-head {
    /* 罫は画面の端まで引く。余白の外まで広げ、中身は余白の内側に戻す */
    margin: 0 calc(-1 * var(--gutter-x));
    padding: 0 var(--gutter-x) var(--space-8);
    border-bottom: var(--rule-w) solid var(--rule);
}

.features-title {
    margin-bottom: var(--space-7);
    font-size: var(--text-display-xl);
    line-height: var(--leading-display-xl);
}

.features-deck {
    max-width: var(--measure-text);
    color: var(--fg);
    font-size: var(--text-body-lg);
    line-height: var(--leading-snug);
}

/* 1 つの機能。左右に分け、1 つずつ入れ替える。下の罫が端末の足元 (罫が地面) */
.feature {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-col);
    margin: 0 calc(-1 * var(--gutter-x));
    padding: 0 var(--gutter-x);
    border-bottom: var(--rule-w) solid var(--rule);
}

/* 文と図形を同じ段に置く。書かないと、先に置いた右の列より左へは戻らず、
   文が次の段に落ちる */
.feature > * { grid-row: 1; }

.feature:nth-child(odd) .feature-text { grid-column: 1 / 6; }
.feature:nth-child(odd) .feature-visual {
    grid-column: 6 / 13;
    margin-right: calc(-1 * var(--gutter-x));
}

.feature:nth-child(even) .feature-text { grid-column: 8 / 13; order: 2; }
.feature:nth-child(even) .feature-visual {
    grid-column: 1 / 8;
    order: 1;
    margin-left: calc(-1 * var(--gutter-x));
}

.feature-visual {
    position: relative;
    height: var(--feature-h);
    /* 上の罫まで伸ばす。吊った端末の上端を、そこで切る */
    overflow: hidden;
}

.feature-shape {
    position: absolute;
    bottom: -12%;
    width: var(--feature-h);
    height: var(--feature-h);
    fill: var(--fg);
}

.feature:nth-child(odd) .feature-shape { right: -18%; }
.feature:nth-child(even) .feature-shape { left: -18%; transform: scaleX(-1); }

/* 端末は 2 台。ファーストビューの 3 台と同じ黒い縁。
   1 台は下の罫に立てて足元を切り、もう 1 台 (.is-hanging) は上の罫から吊って
   頭を切る。吊った 1 台は立つ 1 台の後ろに少し重ねる */
.feature-phone {
    position: absolute;
    z-index: 2;
    top: 12%;
    /* 縁と角の丸みは端末の幅に比例させる。幅が縮んでも、形は同じまま小さくなる。
       縁の角は、画面の角の丸み (画面の幅 × --screen-radius-ratio) に縁の太さを足して、
       画面の角と同心にする */
    --phone-w: calc(var(--feature-h) * 0.5);
    width: var(--phone-w);
    padding: calc(var(--phone-w) * var(--device-bezel-ratio));
    border-radius: calc(var(--phone-w) * (var(--screen-radius-ratio) * (1 - 2 * var(--device-bezel-ratio)) + var(--device-bezel-ratio)));
    background: var(--ink);
}

.feature-phone.is-hanging {
    z-index: 1;
    top: auto;
    bottom: 14%;
}

.feature:nth-child(odd) .feature-phone { left: 8%; }
.feature:nth-child(odd) .feature-phone.is-hanging { left: 50%; }
.feature:nth-child(even) .feature-phone { right: 8%; }
.feature:nth-child(even) .feature-phone.is-hanging { right: 50%; }

/* 画面。2〜3 枚を重ね、is-on の 1 枚だけを出す。入れ替えは home.js が受け持つ */
.feature-screen {
    position: relative;
    aspect-ratio: 1206 / 2622;
    overflow: hidden;
    /* 横は画面の幅、縦は画面の高さに対する割合で書く。縦横で同じ長さになり、角は円になる */
    border-radius: calc(var(--screen-radius-ratio) * 100%) / calc(var(--screen-radius-ratio) * 100% * 1206 / 2622);
    /* 画面が読み込まれるまでは、電源の切れた画面と同じ墨 */
    background: var(--ink);
}

.feature-screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transition: opacity 0.8s var(--ease);
}

.feature-screen img.is-on {
    opacity: 1;
}

/* 吊った端末は下のほうだけが見えるので、画面も下に合わせる */
.is-hanging .feature-screen img {
    object-position: bottom;
}

.feature-text {
    align-self: center;
    padding: var(--space-8) 0;
}

.feature-name {
    margin-bottom: var(--space-5);
    font-size: var(--text-display-2);
}

.feature-title {
    margin-bottom: var(--space-4);
    color: var(--fg);
    /* 本文 (1.05rem) と見分けが付く大きさ。1.15rem では、スマホで本文とほぼ同じに見える */
    font-size: var(--text-subtitle);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading-jp);
    /* p だが見出しなので、見出しと同じく文節で折る (base.css) */
    word-break: auto-phrase;
    text-wrap: pretty;
}

.feature-desc {
    color: var(--fg);
    font-size: var(--text-body);
    line-height: var(--leading-body-jp);
}

.feature-tags {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: var(--rule-w) solid var(--rule);
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-snug);
    /* 項目の途中 (「メモ / リー」) で折らない */
    word-break: auto-phrase;
}

/* スクロールで現れる (.aos) ときに、上から順に少しずつ遅らせて出す */
.feature-text > .aos:nth-child(2) { transition-delay: var(--stagger); }
.feature-text > .aos:nth-child(3) { transition-delay: calc(2 * var(--stagger)); }
.feature-text > .aos:nth-child(4) { transition-delay: calc(3 * var(--stagger)); }

/* できること・できないこと */
.facts-section {
    width: 100%;
    /* 上下は --section-y。--section-y-lg (128px) では見出しの上と一覧の下が空きすぎる */
    padding: var(--section-y) var(--gutter-x);
    border-top: var(--rule-w) solid var(--rule);
}

.facts-title {
    margin-bottom: var(--space-6);
}

.facts-lead {
    /* 2 文目を 1 行に収める。本文の幅 (34em) だと最後の数文字だけが次の行に落ちる。
       狭い画面で折り返すときは文節で折る (対応しないブラウザは文字の区切り) */
    max-width: var(--measure-wide);
    /* 下の枠とのあいだ。--gap-col (64px) では一言と枠が離れて見える */
    margin-bottom: var(--space-7);
    color: var(--fg);
    font-size: var(--text-lead);
    line-height: var(--leading-snug);
}

.facts-lead strong {
    color: var(--fg);
    font-weight: var(--weight-bold);
}

/* プライバシーと仕様。一覧 (.page-facts) を使い、
   項目名の列をそろえて、内容は左から組む。11 言語の並びが長いので、
   右寄せのままだと折り返した行がばらばらになる */
.facts-specs-title {
    margin: var(--gap-col) 0 var(--space-5);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
}

.facts-specs > div {
    display: grid;
    grid-template-columns: 12em minmax(0, 1fr);
}

.facts-specs dd {
    text-align: left;
    line-height: var(--leading-snug);
}

@media (max-width: 767px) {
    .facts-specs > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }

    /* スマホでは --section-y (96px) だと広いので一段下げる */
    .facts-section {
        padding-block: var(--section-y-sm);
    }

    .facts-lead {
        margin-bottom: var(--space-6);
    }
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--rule-w) solid var(--rule);
    border-left: var(--rule-w) solid var(--rule);
}

.facts-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 高さの下限は持たない。持つと、余白を詰めても余った高さが
       説明と罫のあいだに回って離れる。横に並ぶ枠の高さはグリッドがそろえる */
    /* 天地左右とも 24px。56px では狭い画面で文の幅が細くなる */
    padding: var(--space-5);
    border-right: var(--rule-w) solid var(--rule);
    border-bottom: var(--rule-w) solid var(--rule);
}

/* スクロールで現れる (.aos)。3 列に並ぶ幅では、横の 3 つを左から順に出す。
   1 列に落ちる幅では、1 つずつ画面に入ったときに出るので遅らせない */
@media (min-width: 1025px) {
    .facts-cell:nth-child(3n + 2) > .aos { transition-delay: var(--stagger); }
    .facts-cell:nth-child(3n + 3) > .aos { transition-delay: calc(2 * var(--stagger)); }
}

/* 仕様の一覧は入れ物ごと見て (data-aos-group)、4 行を上から順に出す */
.facts-specs > .aos:nth-child(2) { transition-delay: var(--stagger); }
.facts-specs > .aos:nth-child(3) { transition-delay: calc(2 * var(--stagger)); }
.facts-specs > .aos:nth-child(4) { transition-delay: calc(3 * var(--stagger)); }

/* 各セルの頭に置くアイコン。Phosphor Icons の Regular を墨 1 色で使う */
.facts-icon {
    display: block;
    width: var(--icon-fact);
    height: var(--icon-fact);
    /* 見出しとのあいだ。32px では、アイコンの周りの空きと合わせて離れて見える */
    margin-bottom: var(--space-4);
    fill: var(--fg);
}

.facts-cell h3 {
    margin-bottom: var(--space-4);
    font-size: var(--text-subtitle);
    font-weight: var(--weight-bold);
    /* 本文の行間 (1.75) を受け継ぐと、2 行に折れた技術名のあいだが開きすぎる */
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

.facts-cell p {
    color: var(--fg);
    font-size: var(--text-body);
    line-height: var(--leading-body-jp);
}

.facts-note {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: var(--rule-w) solid var(--rule);
    font-size: var(--text-label-sm);
    font-weight: var(--weight-bold);
}

/* ウィジェットと iPhone Duo。メモリーの節と同じ組み方 (大きな英字 → 和文の見出し → 説明 → 英字と和文の一覧) で、
   その下に画面の幅いっぱいの図を置く */
/* 下も上と同じだけ空ける。Duo の下のラベルから次の図形の帯までが詰まって見えた */
.showcase-section {
    padding: var(--section-y-lg) var(--gutter-x);
}

.showcase-section + .showcase-section {
    border-top: var(--rule-w) solid var(--rule);
}

.showcase-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-col);
    align-items: start;
    max-width: var(--page-max);
    margin: 0 auto var(--section-y-sm);
}

.showcase-text { grid-column: 1 / 7; }
.showcase-head > .spec-list { grid-column: 8 / 13; }

/* 日本語は文節で折る。切れ目は HTML の <wbr> が持つ (iPhone の Safari が auto-phrase に対応していないため。§3.4) */
html[lang="ja"] .showcase-section :is(h2, h3, p) {
    word-break: keep-all;
}

/* 一覧の下の注記。一覧の行と同じ大きさで、罫は引かない */
.spec-note {
    padding-top: var(--space-4);
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-snug);
}

@media (max-width: 1024px) {
    .showcase-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .showcase-text,
    .showcase-head > .spec-list {
        grid-column: 1;
    }

    .spec-note {
        grid-column: 1 / -1;
    }
}

/* ウィジェットを、ホーム画面と同じ升目に並べる。升目の大きさは並べる枠の幅から決める
   (cqw)。小は 1 マス、中は横 2 マス、大は 2 マス角、縦長は横 2 × 縦 3 マス。
   升目の比はホーム画面で測った値 (tokens.css) なので、どのウィジェットも元の縦横比のまま入る */
.widget-board-frame {
    container-type: inline-size;
    max-width: var(--page-max);
    margin: 0 auto;
}

.widget-board {
    --wb-cols: 6;
    --wb-u: calc(100cqw / (var(--wb-cols) + (var(--wb-cols) - 1) * var(--widget-gap-ratio)));
    display: grid;
    grid-template-columns: repeat(var(--wb-cols), minmax(0, 1fr));
    grid-auto-rows: var(--wb-u);
    column-gap: calc(var(--wb-u) * var(--widget-gap-ratio));
    row-gap: calc(var(--wb-u) * var(--widget-row-gap-ratio));
}

.widget {
    position: relative;
    margin: 0;
}

.widget.aos {
    transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* 段の高さは枡の大きさから決まっている (aspect-ratio ではない) ので、100% で埋めてよい (§4.2) */
.widget img {
    display: block;
    width: 100%;
    height: 100%;
}

/* 輪郭はウィジェットの角と同じなめらかな角の線。白いウィジェットも白い紙の上で縁が見える。
   線の太さは縮めても 1px のまま (vector-effect) */
.widget-edge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--fg);
    stroke-width: var(--rule-w);
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.widget-edge use,
.widget-edge path {
    vector-effect: non-scaling-stroke;
}

.widget-month-tall      { grid-column: 1 / 3; grid-row: 1 / 4; }
.widget-today-large     { grid-column: 3 / 5; grid-row: 1 / 3; }
.widget-favorite-medium { grid-column: 3 / 5; grid-row: 3; }
.widget-onthisday-large { grid-column: 5 / 7; grid-row: 1 / 3; }
.widget-now-small       { grid-column: 5; grid-row: 3; }
.widget-onthisday-small { grid-column: 6; grid-row: 3; }
.widget-month-large,
.widget-month-small,
.widget-favorite-small  { display: none; }

/* タブレットの幅は 4 マス。縦長の今月の右に今日とお気に入りの場所、その下に 1 年前の今日と小さい 4 つ */
@media (max-width: 1199px) {
    .widget-board { --wb-cols: 4; }

    .widget-month-tall      { grid-column: 1 / 3; grid-row: 1 / 4; }
    .widget-today-large     { grid-column: 3 / 5; grid-row: 1 / 3; }
    .widget-favorite-medium { grid-column: 3 / 5; grid-row: 3; }
    .widget-onthisday-large { grid-column: 1 / 3; grid-row: 4 / 6; }
    .widget-now-small       { grid-column: 3; grid-row: 4; }
    .widget-onthisday-small { grid-column: 4; grid-row: 4; }
    .widget-favorite-small  { display: block; grid-column: 3; grid-row: 5; }
    .widget-month-small     { display: block; grid-column: 4; grid-row: 5; }
}

/* スマホはホーム画面と同じ 2 マス。縦長はやめて、2 マス角の今月から始める */
@media (max-width: 767px) {
    .widget-board { --wb-cols: 2; }

    .widget-month-large     { display: block; grid-column: 1 / 3; grid-row: 1 / 3; }
    .widget-now-small       { grid-column: 1; grid-row: 3; }
    .widget-onthisday-small { grid-column: 2; grid-row: 3; }
    .widget-favorite-medium { grid-column: 1 / 3; grid-row: 4; }
    .widget-today-large     { grid-column: 1 / 3; grid-row: 5 / 7; }
    .widget-month-tall,
    .widget-onthisday-large,
    .widget-favorite-small,
    .widget-month-small     { display: none; }
}

/* iPhone Duo。閉じた 1 台と開いた 1 台を、同じ高さで下をそろえて並べる。
   実機でも、閉じた外の画面と開いた中の画面の高さはほぼ同じ。
   大きさは並べる枠の幅から決める (cqw)。2 台と、そのあいだの幅が収まる画面の高さ */
.duo-stage-frame {
    container-type: inline-size;
    max-width: var(--page-max);
    margin: 0 auto;
}

.duo-stage {
    --duo-open-w: calc(2853 / 2007 + 2 * var(--duo-bezel-ratio));
    --duo-closed-w: calc(1398 / 2034 + 2 * var(--duo-bezel-ratio));
    --duo-h: min(calc(100cqw / (var(--duo-open-w) + var(--duo-closed-w) + var(--duo-gap-ratio))), var(--duo-max-h));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: calc(var(--duo-h) * var(--duo-gap-ratio));
    /* 下のラベルのぶん */
    margin-bottom: calc(var(--space-3) + 2em);
}

.duo {
    position: relative;
    margin: 0;
}

.duo.aos {
    transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* 縁と角は画面の高さに比例させる。縁の角は、画面の角に縁の太さを足して同心にする */
.duo-body {
    padding: calc(var(--duo-h) * var(--duo-bezel-ratio));
    border-radius: calc(var(--duo-h) * (var(--duo-screen-radius-ratio) + var(--duo-bezel-ratio)));
    background: var(--ink);
}

.duo-screen {
    height: var(--duo-h);
    overflow: hidden;
    border-radius: calc(var(--duo-h) * var(--duo-screen-radius-ratio));
    /* 画面が読み込まれるまでは、電源の切れた画面と同じ墨 */
    background: var(--ink);
}

/* 幅は高さから計算して書く。aspect-ratio に任せると、iPhone の Safari は縦に積んだときに
   幅を列いっぱいまで広げ、閉じた 1 台の右半分が黒い縁だけになった */
.duo-closed .duo-screen { width: calc(var(--duo-h) * 1398 / 2034); }
.duo-open .duo-screen   { width: calc(var(--duo-h) * 2853 / 2007); }

.duo-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 端末の下に置くラベル */
.duo figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: var(--space-3);
}

/* 開いた 1 台は、同じ絵を 2 枚重ね、真ん中の折り目で左右に切り分ける。
   左の 1 枚だけを折り目を軸に回すと、本のように開いて見える */
.duo-fold {
    position: relative;
    perspective: calc(var(--duo-h) * 6);
}

.duo-leaf-right {
    clip-path: inset(0 0 0 50%);
}

.duo-leaf-left {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
    transform-origin: 50% 50%;
}

/* スクロールに合わせて開く。画面に入るところで折れていて、画面の中ほどまで来ると平らになる。
   スクロールに連動するアニメーションに対応していないブラウザと、動きを減らす設定では、はじめから平ら */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .duo-stage {
            view-timeline: --duo-stage block;
        }

        .duo-leaf-left {
            animation: duo-unfold linear both;
            animation-timeline: --duo-stage;
            animation-range: entry 10% cover 50%;
        }
    }
}

/* 3D の 1 台 (home.js の DuoFoldStage)。下の辺を端末の下の辺にそろえ、上と左右へ広く取る。
   開いてくる左の板は手前に来て、端末の箱より高く、少し外まで出る。描けたら CSS の 1 台を隠す (.is-3d)。
   動きを減らす設定と WebGL の無いブラウザでは、canvas は何も描かず、CSS の平らな 1 台のまま */
.duo-canvas {
    position: absolute;
    left: calc(-1 * var(--duo-canvas-side));
    bottom: 0;
    width: calc(100% + 2 * var(--duo-canvas-side));
    /* base.css の canvas の上限 (100%) を外す。外さないと左右の出しろのぶん左へずれる */
    max-width: none;
    height: calc(100% * var(--duo-canvas-rise));
    pointer-events: none;
}

.duo-open.is-3d .duo-fold {
    visibility: hidden;
}

.duo-open.is-3d .duo-leaf-left {
    animation: none;
}

@keyframes duo-unfold {
    from { transform: rotateY(var(--duo-fold)); }
    to   { transform: rotateY(0deg); }
}

/* スマホは 2 台を縦に積む。開いた 1 台を幅いっぱいにし、閉じた 1 台を同じ高さでその下に置く */
@media (max-width: 767px) {
    .duo-stage {
        --duo-h: calc(100cqw / var(--duo-open-w));
        flex-direction: column-reverse;
        align-items: center;
        gap: calc(var(--space-8) + 2em);
    }

}

/* 写真の加工とアルバムの見せ方。端末 3 台を、同じ大きさで下をそろえて並べる (Duo と同じ)。
   縁と角は使い方の .phone と同じ式で、端末の幅に比例させる */
.app-shot-stage-frame {
    container-type: inline-size;
    max-width: var(--page-max);
    margin: 0 auto;
}

.app-shot-stage {
    --app-shot-w: min(calc((100cqw - 2 * var(--gap-col)) / 3), var(--app-shot-max-w));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--gap-col);
    /* 下のラベルのぶん */
    margin-bottom: calc(var(--space-3) + 2em);
}

.app-shot {
    position: relative;
    flex: none;
    width: var(--app-shot-w);
    margin: 0;
}

.app-shot.aos {
    transition-delay: calc(var(--i, 0) * var(--stagger));
}

.app-shot-body {
    padding: calc(var(--app-shot-w) * var(--device-bezel-ratio));
    border-radius: calc(var(--app-shot-w) * (var(--screen-radius-ratio) * (1 - 2 * var(--device-bezel-ratio)) + var(--device-bezel-ratio)));
    background: var(--ink);
}

.app-shot-body img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--screen-radius-ratio) * 100%) / calc(var(--screen-radius-ratio) * 100% * 1206 / 2622);
}

.app-shot figcaption {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: var(--space-3);
}

/* スマホは 3 台を横に送る。1 画面に 3 台並べると 1 台が 100px ほどになり、画面の中の字が読めない。
   枠を画面の端まで広げる */
@media (max-width: 767px) {
    .app-shot-stage-frame {
        margin-inline: calc(-1 * var(--gutter-x));
    }

    .app-shot-stage {
        --app-shot-w: var(--app-shot-w-sp);
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter-x);
        scrollbar-width: none;
        margin-bottom: 0;
        padding: 0 var(--gutter-x) calc(var(--space-3) + 2em);
    }

    .app-shot-stage::-webkit-scrollbar {
        display: none;
    }

    .app-shot {
        scroll-snap-align: start;
    }

}

/* 3D の一台（記憶の節） */

/* 節を上下から挟む帯は .motif-band.motif-flush (components.css)。
   図形の帯なので、ここに専用の指定を持たない */
.memory-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    /* 上下は詰める。この節は上下を図形の帯で挟むので、
       節そのものが余白を持つと、帯と本文が遠くなる */
    padding: var(--space-6) var(--gutter-x);
    /* この節に罫は引かない。上下の帯が節の切れ目になる。ここに罫を足すと、
       帯のすぐ上に線が 1 本乗って、帯が枠の中の飾りに見える */
    overflow: hidden;
}

.memory-inner {
    position: relative;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    align-items: center;
    gap: var(--space-7);
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
}

.memory-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.memory-title,
.showcase-title {
    margin-bottom: var(--space-5);
}

.memory-headline,
.showcase-headline {
    /* 本文とのあいだ。スマホと同じ値にそろえる。40px では離れすぎる */
    margin-bottom: var(--space-5);
    font-size: var(--text-display-6);
    /* .display-5 の 1.08 では 2 行が詰まって見える */
    line-height: var(--leading-heading-jp);
    color: var(--fg);
    /* 和文のキャッチを文節で折り返す。対応しないブラウザは文字の区切りで折れる */
    word-break: auto-phrase;
}

.memory-lead,
.showcase-lead {
    /* 3D の図と並ぶリードの幅 */
    max-width: 580px;
    /* 下の一覧の罫とのあいだ。56px では離れすぎる */
    margin-bottom: var(--space-6);
    color: var(--fg);
    font-size: var(--text-lead);
    line-height: var(--leading-snug);
}

.spec-list {
    display: flex;
    flex-direction: column;
    max-width: var(--measure-text);
    border-top: var(--rule-w) solid var(--rule);
}

/* 1 行に 1 つ。左に英字の名前、右に和文の見出しと説明。行を罫で区切る。
   アプリの最初の画面 (RECORD / TRACE / LAYER の英字と和文を罫で継ぐ一覧) と同じ組み方 */
.spec-row {
    display: grid;
    /* 英字の列は、いちばん長い Category が収まる幅。割合で取ると、
       タブレットの幅で Day と和文のあいだが大きく空く */
    grid-template-columns: var(--spec-word-w) minmax(0, 1fr);
    /* 英字と和文の見出しを、頭 (英字は大文字の上端、和文は字面の上端) でそろえる。
       下の線でそろえると、英字だけ和文より上へ突き出し、
       右の 2 行は下へ垂れて、左右がずれて見える。
       英字の行の高さ (0.95) と見出しの行の高さ (1.4) の余白がほぼ同じなので、
       start にするだけで上端の差は 2px 以内に収まる */
    align-items: start;
    gap: var(--space-5);
    padding-block: var(--space-4);
    border-bottom: var(--rule-w) solid var(--rule);
}

.spec-word {
    margin: 0;
    font-size: var(--text-title);
}

/* タブレットの幅では 2 列 2 段に並べる。1 列に落ちて横幅が余るので、
   4 行を縦に積むと右が大きく空く */
@media (min-width: 768px) and (max-width: 1024px) {
    .spec-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap-col);
        max-width: none;
        /* 上の罫も列ごとに引く。1 本で渡すと、列ごとに切れている下の罫とそろわない */
        border-top: 0;
    }

    .spec-row:nth-of-type(-n + 2) {
        border-top: var(--rule-w) solid var(--rule);
    }

    /* 見出しと本文も横幅いっぱいに組む。本文を 580px で止めると右が空く */
    .memory-headline,
    .memory-lead,
    .showcase-headline,
    .showcase-lead {
        max-width: none;
    }

    /* 行が奇数のときは、最後の 1 行を 2 列ぶんに広げる。広げないと、右の列の下が欠ける */
    .spec-row:last-of-type:nth-of-type(odd) {
        grid-column: 1 / -1;
    }
}

.spec-row h3 {
    /* 見出しと説明のあいだを詰める。地の行間 (1.75) のままだと、2 行が離れて別のものに見える */
    margin-bottom: 0;
    color: var(--fg);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
}

/* 和文の説明。英字の名前も p なので、右の列の中だけに当てる */
.spec-row > div > p {
    color: var(--fg);
    font-size: var(--text-body-sm);
    line-height: var(--leading-snug);
    /* 狭い列なので、語の途中 (「ム / ービー」) で折らない */
    word-break: auto-phrase;
}

.memory-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 3D の一台を置く高さ。端末の縦横比がそのまま入る */
    height: 960px;
}

.memory-canvas-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.memory-canvas {
    width: 100% !important;
    height: calc(100% - 36px) !important;
    outline: none;
}

.memory-caption {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* 図の下で左右の端に振り分ける。幅で止めると、
       2 つのラベルが真ん中に寄って離れて見えない */
    margin-top: var(--space-3);
}

/* 狭い画面。段組を 1 列に落とすだけ。段そのものは変えない */
@media (max-width: 1024px) {
    .poster-statement,
    .facts-grid,
    .memory-inner {
        grid-template-columns: 1fr;
    }

    /* iOS 専用の 6 つの枠は、タブレットの幅では 2 列にする。
       1 列にすると、横長の枠に小さなアイコンと 1〜2 行の文が載るだけで、右が大きく空く */
    .facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 枠が奇数のときは、最後の 1 つを 2 列ぶんに広げる。広げないと、最後の段の右が欠ける */
    .facts-cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .memory-inner {
        /* 一覧と 3D のあいだ。3D の枠の中にも上の空きがあるので、溝を詰める */
        gap: var(--space-6);
    }

    /* 1 列に落とすときは、段で名指しした置き場所も解く。
       grid-area で 2 列目を指したままだと grid-template-columns: 1fr の
       となりに列が生えて、本文が半分の幅のまま残る */
    .poster-phones,
    .appstore-block {
        grid-area: auto;
    }

    /* ダウンロードのブロックと、その下の 3 台のあいだ。溝の幅のままだと
       バッジと端末の頭が離れすぎて、別のまとまりに見える */
    .poster-statement {
        row-gap: var(--space-4);
    }

    .triptych {
        grid-template-columns: 1fr;
    }

    .triptych-cell {
        border-right: none;
        border-bottom: var(--rule-w) solid var(--rule);
    }

    .triptych-cell:last-child {
        border-bottom: none;
    }

    .memory-stage {
        /* 1 列に落ちた幅。520px では横幅いっぱいの枠に端末が小さく収まる */
        height: var(--memory-stage-h-tab);
        /* 3D を左右の余白の外まで出し、左右の 2 台を画面の端で少し切る。
           余白の内側で止めると、端末を大きくしても画面の端まで届かない */
        width: auto;
        margin-inline: calc(-1 * var(--gutter-x));
    }

    /* 下のラベルは余白の内側に戻す */
    .memory-caption {
        padding-inline: var(--gutter-x);
    }
}

/* スマホでは 3D を左右の余白の外まで出し、3 台の左右が少し画面の端で切れるまで大きくする。
   高さは幅に合わせて伸ばし、上下は切らない。
   上限は --memory-canvas-max。無いと 600px 幅で 1200px になる。
   上限を画面の高さ (svh・lvh) にすると、iPhone の Safari では lvh でも 754px しかなく、
   上下で先に止まって左右まで大きくならない */
@media (max-width: 767px) {
    .memory-stage {
        width: auto;
        margin-inline: calc(-1 * var(--gutter-x));
        height: calc(min(100vw * var(--memory-canvas-ratio), var(--memory-canvas-max)) + 36px);
    }

    /* 下のラベルは余白の内側に戻す */
    .memory-caption {
        padding-inline: var(--gutter-x);
    }

    /* スマホでは欧文のキャッチを主要な機能の名前 (Record・Map) と同じ大きさにし、
       見出し・本文・一覧・3D のあいだを詰める。
       PC の間隔のままだと、1 列に積んだときに間が抜けて見える */
    .memory-title {
        font-size: var(--text-display-2);
    }

    .memory-inner {
        gap: 0;
    }
}

/* 狭いほうでは、図形の組を枡 3 × 3 に組み替える。
   1 枡の三連を上に、2 枡角をその下に置く。
   枡そのものの大きさは変えない。詰めた模様と同じ割り方のままにする */
@media (max-width: 1199px) {
    .poster-shapes {
        grid-template-columns: repeat(3, var(--unit));
        grid-template-rows: repeat(3, var(--unit));
    }

    .poster-shape:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .poster-shape:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
    .poster-shape:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
    .poster-shape:nth-child(4) { grid-area: 2 / 1 / 4 / 3; }

    /* 狭い幅でも端末を出す。図形の組があった場所に、端末の置き場所の箱を流し込む。
       右は画面の端まで伸ばす。高さは幅から決め、広い画面の 9.1 × 6.3 枡と同じ比率にする。
       下は段の下の余白ぶん引き下げて、罫で足を切る。
       端末は home.js (PosterSceneStage) がこの箱を基準に置く */
    .poster-phones {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        height: auto;
        aspect-ratio: 9.1 / 6.3;
        /* 高さは縦横比だけで決める。中身 (canvas) の高さに押し広げさせない */
        min-height: 0;
        margin-right: calc(-1 * var(--gutter-x));
        margin-bottom: calc(-1 * var(--space-8));
    }

    .poster-motifs { display: none; }
}

/* スマホの幅では、端末の置き場所を縦に伸ばす。
   比率は home.js の POSTER_PHONE_NARROW (span 9.1・rise 8.6) と同じにする。
   できることの一覧は横幅いっぱいに渡す */
@media (max-width: 767px) {
    .poster-phones { aspect-ratio: 9.1 / 8.6; }

    /* 3 段目 (図形とロゴタイプ) は、スマホの幅でだけ 1 列にする。
       タブレットの幅 (768〜1024px) では PC と同じ 2 列のまま、図形を上の罫から吊り、
       画面の左端で切る。1 列にすると、図形の組だけがロゴタイプの上に
       ぽつんと浮いて、右が大きく空き、何の図形か分からない */
    .poster-row-3 {
        grid-template-columns: 1fr;
        padding: var(--gap-col) var(--gutter-x);
    }

    .poster-stack {
        padding: 0;
    }

    .poster-shapes {
        justify-content: start;
    }

    .appstore-block { justify-self: stretch; }

}

/* 2 列が残る幅では、右の列に置く。
   1024px 以下は 1 列になり、置き場所は上の「狭い画面」が解く。
   左の列はダウンロードのブロックの幅だけにして、残りを 3 台に渡す。
   1 : 1.2 で割ると 3 台が画面の半分に押し込まれて小さい */
@media (min-width: 1025px) and (max-width: 1199px) {
    .poster-statement {
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: var(--space-6);
    }

    .poster-phones { grid-area: 1 / 2 / 3 / 3; }
}

/* 端末の舞台の下に敷く、1 行の文字の帯。
   改行させず、はみ出したぶんは舞台の端で切る。横への流れは home.js (initTypelines) が
   スクロールに合わせて付ける。文字は舞台の反転 (.stage-overlay の difference) に乗るので、
   端末の白い画面の上では黒くなる */
.stage-typeline-wrap {
    max-width: none;
    margin-bottom: var(--space-5);
}

/* 2 行目の帯。行送りを詰めた大きい欧文なので、
   1 行目の足と 2 行目の頭がぶつからないだけ空ける */
.stage-typeline + .stage-typeline {
    margin-top: var(--space-3);
}

.stage-typeline {
    width: max-content;
    font-size: var(--text-typeline);
    line-height: var(--leading-display-xl);
    white-space: nowrap;
    will-change: transform;
}

/* 思想の見出しと説明 (Every pass adds a layer.)。PC では見出しも説明も、
   セクションの幅いっぱい (右の余白まで) に広げる。
   見出しは 1 行にする (HTML の <br> は狭い画面でだけ効かせる)。
   説明は本文の幅 (34em) では 3 段落が縦に長く、画面の左下に細く詰まる。
   行長の決まり (--measure-*) の例外。ここは読ませる本文ではなく、画面を横切る文字の面として置く */
@media (min-width: 768px) {
    .stage-abstract .stage-center {
        max-width: none;
    }

    .stage-abstract .stage-title br {
        display: none;
    }
}

/* 思想の説明は 3 段落とも出す。画面に止めたままだと入りきらない幅と高さでは、
   このセクションだけ止めるのをやめ、文の長さぶん縦に伸ばす。3D は背景として
   動き続ける。組み上がる範囲は home.js (Abstract3DStage) が止まっているかで切り替える */
@media (max-width: 767px), (max-height: 899px) {
    .stage-abstract { height: auto; }

    .stage-abstract .stage-sticky {
        position: relative;
        height: auto;
        min-height: 100vh;
    }

    .stage-abstract .stage-overlay {
        height: auto;
        min-height: 100vh;
    }

    /* 文が長くて余りがないときも、上のラベルの線から離す */
    .stage-abstract .stage-center {
        padding-top: var(--gap-col);
    }
}

@media (max-width: 599px) {
    .facts-grid {
        grid-template-columns: 1fr;
    }
}

/* 主要な機能はタブレットとスマホで 1 列にする。図形と端末を上、文を下に置き、
   図形と端末は左右とも画面の端まで出す。
   1024px まで 2 列のままだと、文の列が 260〜360px に細って縦に伸び、
   図形の場所 (--feature-h) の下に白い帯が出る */
@media (max-width: 1024px) {
    .feature { grid-template-columns: minmax(0, 1fr); }

    .feature:nth-child(n) .feature-visual {
        grid-column: 1;
        order: 1;
        margin: 0 calc(-1 * var(--gutter-x));
    }

    .feature:nth-child(n) .feature-text {
        grid-column: 1;
        grid-row: 2;
        order: 2;
        /* 1 列のときは本文の幅で止める。タブレットの幅いっぱいに組むと 1 行が長すぎる */
        max-width: var(--measure-text);
        padding: var(--space-7) 0 var(--space-8);
    }

    /* 端末の足元にも罫を引く。図形の場所は画面の端まで出ているので、罫も端まで届く */
    .feature-visual { border-bottom: var(--rule-w) solid var(--rule); }
}

/* 1 列の幅 (481〜1024px) では、2 台を 1 組にして左右の真ん中に置く。
   PC の置き方 (端から 8% と 50%) は、端末が横幅の 42% より細いと 2 台が離れ、組が片側に寄る。
   2 台は端末の幅の 1 割 (--feature-phone-overlap) だけ重ね、組の左右の空きをそろえる。
   立つ 1 台と吊った 1 台の左右は PC と同じく、機能ごとに入れ替える。
   480px 以下は端末が横幅の 4〜5 割あり、PC の置き方のままで重なるので変えない */
@media (min-width: 481px) and (max-width: 1024px) {
    .feature-phone {
        /* 場所の端から組の外側までの幅。真ん中から、組の幅 (2 台から重なりを引く) の半分を引いた残り */
        --pair-inset: calc(50% - var(--phone-w) * (1 - var(--feature-phone-overlap) / 2));
    }

    .feature:nth-child(odd) .feature-phone { left: var(--pair-inset); }
    .feature:nth-child(odd) .feature-phone.is-hanging { left: auto; right: var(--pair-inset); }
    .feature:nth-child(even) .feature-phone { right: var(--pair-inset); }
    .feature:nth-child(even) .feature-phone.is-hanging { right: auto; left: var(--pair-inset); }
}

/* 4 つ横に並べると 1 つ 80px 台まで縮む。2 列 2 段に畳む */
@media (max-width: 599px) {
    .glyph-cluster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}