/* =============================================================
   components.css — 共通コンポーネント（media 属性なし = all で読み込む）
   -------------------------------------------------------------
   出典: design/components.css。scripts/split-components.cjs で機械的に切り出した。
   手で編集しない。上流を直してから再実行する。
   
   切り出しで別ファイルへ移したもの（値は 1 つも変えていない）:
     - 幅バンドの @media        -> assets/css/bands/common_{sp,tb,tbl,pc}.css
     - prefers-reduced-motion   -> assets/css/motion-reduced.css
     - .global-nav / .brand-logo* / .sub-nav-frosted / .footer
                                -> assets/css/layout/{navigation,sub-navigation,footer}.css
   ============================================================= */

/* ---- Buttons ------------------------------------------------- */
.btn-dark-utility {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--color-ink); color: var(--color-body-on-dark);
  font: var(--type-button-utility); letter-spacing: var(--tracking-caption);
  border: 0; border-radius: var(--radius-sm); padding: var(--inset-dark-utility);
  cursor: pointer; transition: transform .1s ease;
}
.btn-dark-utility:active { transform: scale(0.95); }

.btn-pearl-capsule {
  display: inline-flex; align-items: center;
  background: var(--color-surface-pearl); color: var(--color-ink-muted-80);
  font: var(--type-caption);
  border: var(--stroke-pearl) solid var(--color-divider-soft);   /* 線というよりリング */
  border-radius: var(--radius-md); padding: var(--inset-pearl);
  cursor: pointer; transition: transform .1s ease;
}
.btn-pearl-capsule:active { transform: scale(0.95); }

.btn-hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-on-primary);
  font: var(--type-button-large);                /* 18px / weight 300（稀）*/
  border: 0; border-radius: var(--radius-pill); padding: var(--inset-hero-cta);
  cursor: pointer; transition: transform .1s ease;
}
.btn-hero-cta:active { transform: scale(0.95); }
.btn-hero-cta:focus-visible { outline: var(--stroke-focus) solid var(--color-primary-focus); }

.btn-icon-circular {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-target-min); height: var(--tap-target-min);
  background: var(--color-surface-chip-translucent); color: var(--color-ink);
  border: 0; border-radius: var(--radius-full);
  cursor: pointer; transition: transform .1s ease;
  -webkit-backdrop-filter: var(--backdrop-frosted); backdrop-filter: var(--backdrop-frosted);
}
.btn-icon-circular:active { transform: scale(0.95); }

/* ---- Links --------------------------------------------------- */
.text-link        { color: var(--color-primary); font: var(--type-body); }
.text-link-on-dark{ color: var(--color-primary-on-dark); font: var(--type-body); }

/* ---- Skip link ------------------------------------------------
   出典: DESIGN-apple.md {component.skip-link}
   キーボードで読み始める人の最初の Tab。平常時は画面外へ逃がすだけで、
   display:none にはしない（焦点が当たらなくなるため）。 */
.skip-link {
  position: fixed; top: var(--space-xs); left: var(--space-xs);
  z-index: 100;                              /* 貼り付くバーより手前 */
  padding: var(--space-xs) var(--space-md);
  background: var(--color-canvas); color: var(--color-primary);
  font: var(--type-body); letter-spacing: var(--tracking-body);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  transform: translateY(calc(-100% - var(--space-lg)));   /* 画面の外へ */
}
.skip-link:focus { transform: translateY(0); }
.skip-link:focus-visible { outline: var(--stroke-focus) solid var(--color-primary-focus); }
/* 飛び先。貼り付くバーの下に潜らないよう、#id アンカーと同じだけ逃がす */
main[id] { scroll-margin-top: var(--tap-target-min); outline: none; }
body:has(.sub-nav-frosted) main[id] {
  scroll-margin-top: calc(var(--tap-target-min) + var(--size-sub-nav));
}

/* ---- Contact block（共通の相談区画）----------------------------
   出典: DESIGN-apple.md {component.contact-block}

   4 ページの <style> に同じ .contact-lines が散っていたため、番号の大きさが
   ページごとに食い違っていた（home/about だけ .text-link の 17px が勝っていた）。
   ここ 1 か所だけに持ち、ページ側には書かない。
   番号に .text-link を当てない —— 色は a の既定（--color-primary）で足りる。 */
.contact-lines {
  font: var(--type-display-md); letter-spacing: var(--tracking-display-md);
  margin: var(--space-md) 0;
}
.contact-lines a { display: inline-block; }

/* ---- Cards --------------------------------------------------- */
/* .card-utility は tokens.css。中身の構造ヘルパだけ追加 */
.card-utility .card-media {
  aspect-ratio: 1 / 1; background: var(--color-canvas-parchment);
  border-radius: var(--radius-sm); display: grid; place-items: center;
  margin-bottom: var(--space-md); overflow: hidden;
}
.card-utility .card-name  { font: var(--type-body-strong); letter-spacing: var(--tracking-body); }
.card-utility .card-meta  { font: var(--type-body); letter-spacing: var(--tracking-body); margin: var(--space-xxs) 0 var(--space-sm); color: var(--color-ink-muted-80); }

.option-chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--color-canvas); color: var(--color-ink);
  font: var(--type-caption);
  border: var(--border-hairline); border-radius: var(--radius-pill);
  padding: var(--inset-chip); cursor: pointer;
}
.option-chip.is-selected { border: var(--stroke-focus) solid var(--color-primary-focus); padding: var(--inset-chip-selected); }

.environment-quote-card {
  position: relative; display: grid; place-items: center; text-align: center;
  gap: var(--space-md); padding: var(--space-section) var(--space-lg);
  background: var(--color-surface-tile-1); color: var(--color-body-on-dark);
}
.environment-quote-card .eyebrow { font: var(--type-caption); color: var(--color-primary-on-dark); letter-spacing: var(--tracking-tagline); }
.environment-quote-card :is(h1, h2) { font: var(--type-display-lg); }

/* ---- Product tile（写真を全面に敷き、コピーを重ねる） ----------
   出典: DESIGN-apple.md §Components / §Shapes（apple.com 実測 2026-09-09）
   .tile-photo は .tile-light / .tile-parchment / .tile-dark と併用する。 */
.tile-photo {
  position: relative; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: var(--size-tile-full);
}
/* 写真は「高さ 100%・幅は成り行き」で中央寄せ。タイル背景色が左右に残るのが正しい。
   cover で全面を覆うと暗タイル／パーチメントの区別が消えるので禁止（DESIGN-apple.md §Shapes）。 */
.tile-photo > .tile-bg {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 0;
  width: auto; height: 100%; max-width: none; object-fit: cover; display: block;
}
/* ヒーローだけは例外で画面横幅いっぱい（DESIGN-apple.md {component.product-tile-hero}）。
   1 ページに 1 枚、先頭のタイルにのみ付ける。 */
.tile-photo.is-hero > .tile-bg {
  left: 0; transform: none;
  width: 100%; height: 100%; object-fit: cover;
}
/* 半分の高さのヒーロー（DESIGN-apple.md {component.product-tile-hero-short}）。
   固定値を持たず、そのバンドの全高をそのまま 2 で割る。バンド別の上書きは末尾の
   「メディアスクリーン別バンド」節にある（値の出どころを 1 か所に保つため）。
   min-height は content-box なので、上下 padding も半分にしないと見た目が半分にならない
   （692+48+56=796 → 346+24+28=398）。短いヒーローに全高ぶんの余白は要らないので、これで正しい。 */
.tile-photo.is-short {
  min-height: calc(var(--size-tile-full) / 2);
  padding-block: calc(var(--space-tile-top) / 2) calc(var(--space-tile-bottom) / 2);
}

.tile-photo > * { position: relative; z-index: 2; }
.tile-photo.content-bottom { justify-content: flex-end; }

/* タイルの見出しは h1/h2 とも display-lg 40px に揃える（apple.com の .tile-headline）。
   hero-display 56px はトップのタイル列では使わない（DESIGN-apple.md §Typography Principles）。 */
.tile-photo h1 { font: var(--type-display-lg); letter-spacing: var(--tracking-tile-headline-sp); }

/* タイルのコピー：見出し（display-lg）＋ 1 行のサブヘッド（21px/400） */
.tile-subhead {
  font: var(--type-tile-subhead); letter-spacing: var(--tracking-tile-subhead);
  margin: var(--space-xs) auto 0; max-width: 34ch;
}
/* ヒーローのサブヘッドだけは見出しから --space-lg(24px) 空ける（2026-09-11）。
   既定の 8px は apple.com のサブヘッドが**1 行**だから成立する値で、本サイトのヒーローは
   どのページも 2 行以上に折り返す。8px のままだと見出しと地続きの 1 つの塊に見える。
   グリッドのタイルは 1 行のサブヘッドなので既定の 8px のまま（.is-hero にだけ効かせる）。
   <=833px では見出し自体が 2〜3 行に折り返してコピー全体が高くなり、ここを広げると
   写真の賑やかなところへ最終行が落ちるので、末尾のバンド節で 8px に戻す。 */
.tile-photo.is-hero .tile-subhead {
  margin-top: var(--space-lg);
  /* 行間も 1.25 → 1.4 へわずかに広げる（2026-09-11）。1.25 は apple.com の :lang(ja) 実測だが、
     これも**サブヘッドが 1 行**で行間が見えない前提の値。2 行以上に折り返す本サイトのヒーローでは
     行がくっついて 1 つの塊に見える。1.4 は日本語ランプに既にある値（body-strong / fine-print）で、
     新しい段を増やさずに済む。折り返さないグリッドのタイルは 1.25 のまま。 */
  line-height: 1.4;
}

/* タイルの CTA レイヤー（コピーの下・3 層目）
   出典: DESIGN-apple.md {component.product-tile-light} の "3. CTA layer" と
        Measurement Source の apple.com 実測 `.tile-ctas`
        （display:grid; justify-content:center; column-gap:17px; margin-top:17px）。
   apple.com は「詳しくはこちら／購入」の 2 本を横に並べるので column-gap を持つ。
   本サイトは購入フローを持たないため 1 本（`.btn-primary`）だけを置く。
   2 本目が必要になったら `.btn-secondary-pill` を隣に足す（DESIGN-apple.md
   {component.button-secondary-pill}「2 つ目の CTA」）。 */
.tile-ctas {
  display: grid; grid-auto-flow: column; justify-content: center;
  column-gap: var(--space-md); margin-top: var(--space-md);
}

/* ---- Motion: tile hover -----------------------------------------
   出典: DESIGN-apple.md {motion.card-hover-box}

   反応するのは .tile-grid の中のカードだけ（実装は Product tile grid の節）。
   全幅で敷き詰めるヒーローと .tile-pair は面そのものなので反応しない。

   パネル自体はリンクではない。行き先を持つのは中の「詳しく見る」だけで、
   パネルの上でカーソルは変わらない。 */

/* 青ピルは色だけ変える（apple.com --sk-button-background-hover 実測 = #0076DF）。
   パネルに触れた時点で、押せる場所がどこかを色で示す。 */
.tile-grid > .tile-photo:is(:hover, :focus-within) .btn-primary {
  background: var(--color-primary-hover);
}

/* 2 列のタイル対（apple.com の section-promo）*/
.tile-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-tile-gap); margin-bottom: var(--space-tile-gap);
}
.tile-pair > .tile-photo { min-height: var(--size-tile-half); margin-bottom: 0; }

/* ---- Product tile grid（3 枚以上を並べる面）----------------------
   出典: DESIGN-apple.md {component.product-tile-grid}

   **Grid ではなく折り返す Flex で組む。** Grid は最終行の余りを左詰めにするしかなく、
   5 枚のような奇数だと最後の 1 枚が左端に取り残されて「置き忘れ」に見える。
   Flex ＋ justify-content:center なら、余った 1〜2 枚がそのまま中央に載る。
   列数を変えても余りが必ず中央に来るのが、この組み方を選ぶ理由。

   列数はバンドごとに --tile-cols を差し替えるだけ。幅の計算式は 1 か所で済む。 */
.tile-grid {
  --tile-cols: 3;                          /* pc。他バンドは末尾のバンド節で上書き */
  display: flex; flex-wrap: wrap; justify-content: center;
  /* カード間は 20px（apple.com/jp/store の .rf-cards-scroller-itemview 実測）。
     タイルの目地 12px は「面と面の継ぎ目」の値で、独立した板であるカードには狭い。
     左右と下にも同じ 20px を入れる —— 画面端に触れると角丸も影も切り落とされるため。 */
  gap: var(--space-card-gap); margin-bottom: var(--space-card-gap);
  padding-inline: var(--space-card-gap);
}
/* grid の中身は「タイル」ではなく「カード」。角丸と影を持つ
   （apple.com/jp/store 実測 .rf-pcard-content: radius 18px / shadow 2px 4px 12px rgba(0,0,0,.08)）。
   全幅で敷き詰める .tile-pair は面そのものなので、どちらも持たない。 */
.tile-grid > .tile-photo {
  /* 100% は flex コンテナの内側（padding を除いた幅）なので、左右の padding は引かない */
  flex: 0 1 calc((100% - var(--space-card-gap) * (var(--tile-cols) - 1)) / var(--tile-cols));
  min-height: var(--size-tile-half);
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: scale var(--motion-hover-duration) var(--motion-ease-out),
              box-shadow var(--motion-hover-duration) var(--motion-ease-out);
}
/* hover はカードごと持ち上げる（apple.com/jp/store の .rf-ccard:hover 実測）。
   media-card と同じ扱い。拡大は transform ではなく独立プロパティの scale で書く
   （中の写真は translateX(-50%) で中央寄せしており、transform を取り合わないため）。

   パネル自体はリンクではない（行き先を持つのは中の「詳しく見る」だけ）。
   持ち上がるのは「いま触れているのはどれか」を示すためで、押せる合図ではない。
   だから cursor は変えない —— 変わるのはボタンの上だけ。media-card と同じ線引き。 */
.tile-grid > .tile-photo:is(:hover, :focus-within) {
  scale: var(--motion-hover-scale-card);
  box-shadow: var(--shadow-card-hover);
}

/* ---- Feature image（下層ページのセクション内に置く大きな写真）----
   出典: DESIGN-apple.md {component.feature-image}（apple.com/mac 実測 2026-09-09）
   コピーの「下」に置く。文字を重ねない。影は付けない。 */
/* .location-map（DESIGN-apple.md {component.location-map}）は枠が同じなので同居させる。
   中身が写真か埋め込み地図かの違いだけで、枠の指定を二重に持たない。 */
.feature-media,
.location-map {
  display: block; width: 100%; max-width: var(--content-max-wide);
  margin: var(--space-xl) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}
.feature-media { object-fit: cover; }
.location-map  { border: 0; }

/* ---- Utility section（写真の無い区画）--------------------------
   .tile-utility 本体は tokens.css。ここは中身の組みだけ。
   見出しの直後は 17px 空ける（タイルの 8px はサブが 1 行だから成立する値で、
   段落が続くユーティリティ区画には足りない。DESIGN-apple.md {component.utility-section}）*/
.tile-utility :is(h1, h2, h3) { margin-bottom: var(--space-md); }

/* ---- FAQ list（カテゴリ別 Q&A）--------------------------------
   出典: DESIGN-apple.md {component.faq-list}
   apple.com の技術仕様／法務ページと同じ「左にカテゴリのレール・右に行」の 2 列。
   カテゴリ名が左に固定されるので、行を読まずにカテゴリだけ目で追える。
   答えの字下げ（--indent-faq-answer）は本プロジェクトの追加。20 件超を開いたまま
   並べると、色の濃度差と weight だけでは Q と A の切れ目が読み取れないため。 */
.faq-list {
  max-width: calc(var(--content-max-reading) + var(--column-faq-label) + var(--space-xl));
  margin: 0 auto; text-align: left;
}
.faq-group {
  display: grid; align-items: start;
  grid-template-columns: var(--column-faq-label) 1fr;
  column-gap: var(--space-xl);
}
/* グループ間の区切り。罫はレールを含む全幅に引く */
.faq-group + .faq-group {
  margin-top: var(--space-xl); padding-top: var(--space-xl);
  border-top: var(--border-hairline);
}
/* 右列 1 行目の上パディングぶん下げて、最初の質問と肩を揃える */
.faq-label {
  font: var(--type-tagline); letter-spacing: var(--tracking-tagline);
  margin: 0; padding-top: var(--space-md);
}
.faq-items { min-width: 0; }
.faq-item { padding: var(--space-md) 0; border-bottom: var(--border-hairline); }
.faq-q { font: var(--type-body-strong); letter-spacing: var(--tracking-body); margin: 0; }
.faq-a {
  font: var(--type-body); letter-spacing: var(--tracking-body);
  color: var(--color-ink-muted-80);
  margin: var(--space-xxs) 0 0; padding-left: var(--indent-faq-answer);
}

/* ---- Media card / card row（1 セクションに 1〜3 枚の写真パネル）----
   出典: DESIGN-apple.md {component.media-card} / {component.card-row}
        （apple.com/jp/store の .rf-pcard-content 実測 2026-09-10）

   feature-image が「1 セクション ＝ 大きな写真 1 枚」なのに対し、こちらは中身が
   複数に分かれるサービスを、それぞれの絵で見せるためのもの。
   並べ方は tile-grid と同じ折り返す Flex ＋ center なので、1〜3 枚のどれでも中央に載る。 */
.card-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  /* カード間は 20px（.rf-cards-scroller-itemview の margin-inline-end 実測）。
     タイルの目地 12px とは別物 —— タイルは面と面の継ぎ目なので詰め、
     カードは独立した板なので広く取る。 */
  gap: var(--space-card-gap);
  margin-top: var(--space-xl);
}
/* 後ろに何か続くときだけ下を空ける。上より広いのはカードが影を持つため —— 影が下へ伸びるぶん、
   同じ数値でも下の隙間は狭く見える。続く小見出し（chip-label）と中身の間隔 12px より
   はっきり広くないと、小見出しが上のカード列に属して見えてしまう。
   行がセクションの最後なら付けない（セクションの下 padding と二重になる）。 */
.card-row:not(:last-child) { margin-bottom: var(--space-xxl); }
.media-card {
  /* 3 枚並ぶときの幅。1 枚だけのときに横いっぱいへ伸びないよう上限を掛ける */
  flex: 1 1 calc((100% - var(--space-card-gap) * 2) / 3);
  max-width: var(--size-card-media-max);
  /* 器の高さ 500px（実測）。Apple は height で固定するが、日本語はキャプションの行数が
     読み切れないので min-height にする。説明の短いカードが痩せて見えるのも防げる。 */
  min-height: var(--size-card-media-h);
  display: flex; flex-direction: column;
  margin: 0;
  text-align: left;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: clip;
  background: var(--color-canvas-parchment);   /* 既定は明るい面の上に置く想定 */
  color: var(--color-ink);
}
/* 背景は地から 1 段ずらす。同色だとカードが沈んで見えなくなる */
.tile-parchment .media-card { background: var(--color-canvas); }
.tile-dark .media-card      { background: var(--color-card-on-dark); color: var(--color-body-on-dark); }

/* 写真は 1:1。幅 400px のときカード全体が約 480〜500px になり、
   apple.com/jp/store の実測 400×500 に揃う（4:3 だと写真が浅く見える）。
   動画パネルも同じ枠・同じ比率で扱う。 */
.media-card :is(img, video) {
  display: block; width: 100%;
  aspect-ratio: 1 / 1; object-fit: cover;
}
/* 図版（前後比較・図表など、端まで意味がある絵）は切らずに全体を入れる。
   逃げ道であって既定ではない —— まず画像から文字を外すことを考える
   （DESIGN-apple.md {component.media-card}「写真に文字を焼き込まない」）。 */
.media-card.is-figure :is(img, video) { object-fit: contain; }

/* 動画パネルの停止ボタン。ブラウザ既定の controls（シークバー）は出さないが、
   止める手だては必ず置く（WCAG 2.2.2 / DESIGN-apple.md {component.media-card}）。
   写真の上に重ねるので、器を position: relative にする。 */
.media-card:has(video) { position: relative; }
.media-video-toggle {
  position: absolute; right: var(--inset-video-toggle); top: var(--inset-video-toggle);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-video-toggle); height: var(--size-video-toggle);
  padding: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--color-scrim-control); color: var(--color-on-primary);
  cursor: pointer;
}
/* 見た目は 32px のまま、当たり判定だけ 44px へ広げる（DESIGN-apple の最小タップ領域）*/
.media-video-toggle::after {
  content: ""; position: absolute;
  width: var(--tap-target-min); height: var(--tap-target-min);
}
.media-video-toggle:focus-visible { outline: var(--stroke-focus) solid var(--color-primary-on-dark); }
/* 記号は文字ではなく図形で描く。フォントの有無に左右されないため */
.media-video-toggle .icon { display: block; width: var(--size-icon-sm); height: var(--size-icon-sm); }
/* hover はカードごと持ち上げる（apple.com/jp/store 実測: scale3d(1.01) ＋ 影を深く）。
   写真を別途拡大しない —— 箱と中身は一緒に動く。二重に動かすと歪んで見える。
   cursor は変えない。カードはリンクではなく、持ち上がるのは「いま触れているのはどれか」を
   示すためであって、押せる合図ではない（DESIGN-apple.md {motion.card-hover-box}）。 */
/* 拡大は transform ではなく独立プロパティの scale で書く。
   カードは build-in（下から浮かぶ = translate）と hover（拡大 = scale）が同時に効くため、
   両方を transform に載せると片方がもう片方を打ち消す。別プロパティなら自動で合成される。 */
.media-card {
  transition: scale var(--motion-hover-duration) var(--motion-ease-out),
              box-shadow var(--motion-hover-duration) var(--motion-ease-out);
}
.media-card:is(:hover, :focus-within) {
  scale: var(--motion-hover-scale-card);
  box-shadow: var(--shadow-card-hover);
}

/* キャプションが残りを埋める。写真は 1:1 のままなので、同じ行では写真の高さが揃い、
   説明の行数だけが違う形になる（Apple の固定 500px と同じ見え方）。 */
.media-card figcaption { flex: 1; padding: var(--space-lg); }
.media-card-title {
  font: var(--type-body-strong); letter-spacing: var(--tracking-body);
  margin: 0;
}
.media-card-desc {
  font: var(--type-body); letter-spacing: var(--tracking-body);
  color: var(--color-ink-muted-80); margin: var(--space-xxs) 0 0;
}
.tile-dark .media-card-desc { color: var(--color-body-muted); }

/* ---- Inputs -------------------------------------------------- */
.search-input {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: var(--tap-target-min); padding: var(--inset-search);
  background: var(--color-canvas); color: var(--color-ink);
  border: var(--stroke-hairline) solid var(--color-input-border); border-radius: var(--radius-pill);
}
.search-input svg { width: var(--size-icon-sm); height: var(--size-icon-sm); opacity: 0.5; }
.search-input input {
  border: 0; outline: 0; background: transparent;
  font: var(--type-body); letter-spacing: var(--tracking-body); color: var(--color-ink); min-width: var(--content-min-search);
}

/* ---- Floating sticky bar ------------------------------------- */
.floating-sticky-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--size-floating-bar); padding: var(--inset-floating-bar);
  background: color-mix(in srgb, var(--color-canvas-parchment) 80%, transparent);
  -webkit-backdrop-filter: var(--backdrop-frosted); backdrop-filter: var(--backdrop-frosted);
  color: var(--color-ink);
}
.floating-sticky-bar .bar-msg { font: var(--type-body); letter-spacing: var(--tracking-body); }

/* ---- Motion: build-in（区画が視界に入ったら下から浮かび上がる）----
   出典: DESIGN-apple.md §Motion（apple.com/jp/ipad 実測 2026-09-10）

   既定は「見える」。design/motion.js が走ったときだけ <html> に .motion-ready が付き、
   そこで初めて隠れる。JS が無い・失敗した・prefers-reduced-motion のときは
   このブロックが一切効かないので、中身は最初から見えている。

   動かす単位は「区画の中身」。面（タイルの背景・ナビ・フッタ）は動かさない。
   引き金は .wrap（と FAQ のグループ）で、JS はそこに .is-in を付けるだけ。
   中の要素は nth-child でずれて入る（Apple の StaggeredFadeIn と同じ考え方）。 */
.motion-ready :is(.tile-photo, .tile-utility) > .wrap > *:not(.faq-list):not(.card-row),
.motion-ready .environment-quote-card > *,
.motion-ready .faq-group {
  opacity: 0;
  transform: translateY(var(--motion-shift));
}
/* カードだけは transform を使わない。hover の拡大（scale）と取り合わないよう、
   浮き上がりは独立プロパティの translate で書く（両者は自動で合成される）。 */
.motion-ready .card-row > .media-card,
.motion-ready .tile-grid > .tile-photo {
  opacity: 0;
  translate: 0 var(--motion-shift);
}
/* .tile-grid の板は「板ごと」動く（DESIGN-apple.md §Motion 2026-09-11）。
   隙間を挟んで浮いているカードなので、中の文字だけ動かすと板が置きっぱなしに見える。
   よって中の要素は隠さない —— 板と一緒に上がってくる。
   :not() を 2 つ付けているのは、上の一般規則（同じ 5 クラス）に勝たせるため。 */
.motion-ready .tile-grid > .tile-photo > .wrap > *:not(.faq-list):not(.card-row) {
  opacity: 1; transform: none; transition: none; will-change: auto;
}
/* 合成レイヤーのヒントは「これから動くもの」にだけ。入り終わったら外れる */
.motion-ready :is(.tile-photo, .tile-utility) > .wrap:not(.is-in) > *:not(.faq-list):not(.card-row),
.motion-ready .wrap:not(.is-in) .card-row > .media-card,
.motion-ready .environment-quote-card:not(.is-in) > *,
.motion-ready .faq-group:not(.is-in) { will-change: opacity, transform; }

/* 引き金そのものに「何番目に入ってきたか」を持たせる。JS が --motion-order を書き、
   中の要素はこれを継承して自分の並び順ぶんをさらに足す（区画どうし → 区画の中、の 2 段）。 */
.motion-ready :is(.tile-photo, .tile-utility) > .wrap,
.motion-ready .environment-quote-card,
.motion-ready .faq-group {
  --motion-delay-base: calc(var(--motion-stagger) * var(--motion-order, 0));
}

/* カードの立ち上がり。scale と box-shadow の遷移もここで持つ（この規則の transition が
   .media-card の既定を上書きするため、hover の分まで書かないと hover が効かなくなる）。 */
.motion-ready .wrap.is-in .card-row > .media-card {
  opacity: 1;
  translate: 0 0;
  transition: opacity   var(--motion-duration) var(--motion-ease-out) var(--motion-delay-total),
              translate var(--motion-duration) var(--motion-ease-out) var(--motion-delay-total),
              scale      var(--motion-hover-duration) var(--motion-ease-out),
              box-shadow var(--motion-hover-duration) var(--motion-ease-out);
  --motion-delay-total: calc(var(--motion-delay-base, 0ms)
                           + var(--motion-delay, 0ms)
                           + var(--motion-card-delay, 0ms));
}

/* 板の立ち上がり。ずらしは板どうしの順番だけ（--motion-order は JS が板に直接書く）。
   card-row と同じく、hover の scale / box-shadow もこの transition に含める
   （含めないと、この規則が .tile-grid > .tile-photo の既定 transition を上書きして
   hover が瞬間移動になる）。 */
.motion-ready .tile-grid > .tile-photo.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity   var(--motion-duration) var(--motion-ease-out) var(--motion-delay-total),
              translate var(--motion-duration) var(--motion-ease-out) var(--motion-delay-total),
              scale      var(--motion-hover-duration) var(--motion-ease-out),
              box-shadow var(--motion-hover-duration) var(--motion-ease-out);
  --motion-delay-total: calc(var(--motion-stagger) * var(--motion-order, 0));
}

.motion-ready :is(.tile-photo, .tile-utility) > .wrap.is-in > *:not(.faq-list):not(.card-row),
.motion-ready .environment-quote-card.is-in > *,
.motion-ready .faq-group.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity   var(--motion-duration) var(--motion-ease-out) var(--motion-delay-total),
              transform var(--motion-duration) var(--motion-ease-out) var(--motion-delay-total);
  /* 区画どうし ＋ 区画の中 ＋ 横並びの中、の 3 段を足す。
     .card-row 自体は動かさず、中のカードが 1 枚ずつ左から入る（--motion-card-delay）。
     カードは .card-row から --motion-delay（区画の中での順番）を継承しているので、
     コピーの下に置かれたカード列は、その上のコピーより後に立ち上がる。 */
  --motion-delay-total: calc(var(--motion-delay-base, 0ms)
                           + var(--motion-delay, 0ms)
                           + var(--motion-card-delay, 0ms));
}

/* 横並びのカードは左から順に。sp では縦に積まれるので、そのまま上から順になる */
.motion-ready .card-row > .media-card:nth-child(2) { --motion-card-delay: calc(var(--motion-stagger) * 1); }
.motion-ready .card-row > .media-card:nth-child(3) { --motion-card-delay: calc(var(--motion-stagger) * 2); }
.motion-ready .card-row > .media-card:nth-child(n + 4) { --motion-card-delay: calc(var(--motion-stagger) * 3); }

/* ずらしは 6 段まで。それ以上は据え置き（長い区画で待たされないように） */
.motion-ready :is(.wrap, .environment-quote-card) > *:nth-child(2) { --motion-delay: calc(var(--motion-stagger) * 1); }
.motion-ready :is(.wrap, .environment-quote-card) > *:nth-child(3) { --motion-delay: calc(var(--motion-stagger) * 2); }
.motion-ready :is(.wrap, .environment-quote-card) > *:nth-child(4) { --motion-delay: calc(var(--motion-stagger) * 3); }
.motion-ready :is(.wrap, .environment-quote-card) > *:nth-child(5) { --motion-delay: calc(var(--motion-stagger) * 4); }
.motion-ready :is(.wrap, .environment-quote-card) > *:nth-child(6) { --motion-delay: calc(var(--motion-stagger) * 5); }
.motion-ready :is(.wrap, .environment-quote-card) > *:nth-child(n + 7) { --motion-delay: calc(var(--motion-stagger) * 6); }

/* ---- Motion: ヒーロー写真だけゆっくり寄る（DESIGN-apple.md {motion.hero-zoom}・2026-09-12）----
   「面そのものは動かさない」の 2 つめの例外（1 つめは .tile-grid の板）。
   効かせるのは**ページ先頭のヒーロー写真 1 枚だけ**。グリッドの板の写真は動かさない
   —— 5 枚が同時にじわじわ動くと、画面全体が落ち着かず「読み込み中」に見える。

   引き金はスクロールではなく**写真の読み込み完了**（motion.js が .is-in を付ける）。
   読み込みを待たずに始めると、回線が遅いときは絵が出た頃には寄り終わっている。

   拡大は transform ではなく**独立プロパティの scale** で書く。.tile-bg の transform は
   中央寄せ（translateX(-50%)）に使っており、同じプロパティに載せると打ち消し合う
   （.card-row / .tile-grid で translate を使っているのと同じ理由）。 */
.motion-ready .tile-photo.is-hero > .tile-bg.is-in {
  animation: hero-zoom var(--motion-hero-zoom-duration) var(--motion-ease-out) forwards;
}

/* ---- Motion: ヒーローを複数枚で回す（DESIGN-apple.md {motion.hero-slideshow}・2026-09-12）----
   トップだけ。3 枚を同じ場所に重ね、1 枚ずつ寄せながら溶暗で入れ替える。
   切り替えの間隔は「寄り終わり ＋ --motion-hero-hold」で、motion.js がトークンを読んで計る。

   既定（JS 無し・prefers-reduced-motion）は **1 枚目だけが見える静止画**。
   motion.js が回し始めたときに限り、区画に .is-playing が付いて .is-on の 1 枚だけが見える。
   この二段構えにしないと、JS の無い環境で 3 枚が重なって最後の 1 枚が出てしまう。 */
.tile-photo.is-slideshow > .tile-bg { opacity: 0; }
.tile-photo.is-slideshow > .tile-bg.is-on,
.tile-photo.is-slideshow:not(.is-playing) > .tile-bg:first-of-type { opacity: 1; }
/* 溶暗。回している間だけ効かせる（最初の 1 枚が薄く湧いて見えないように）。
   消える側は .is-in を付けたまま残し、溶け終わってから JS が外す ——
   先に外すと寄った絵が等倍へ跳ね戻り、それが見えてしまう。 */
.motion-ready .tile-photo.is-slideshow.is-playing > .tile-bg {
  transition: opacity var(--motion-hero-dissolve) var(--motion-ease-out);
}
@keyframes hero-zoom {
  from { scale: 1; }
  to   { scale: var(--motion-hero-zoom-scale); }
}

/* 動きを減らす設定なら、隠しも移動もしない（JS 側でも止めているが二重に守る） */

/* --- sp (<=640px): hero を 34/28px へ / フッタ 1 列 / タイル対を 1 列へ --- */

/* --- tb (641-833px): hero を 40px へ / タイル高さを詰める --- */

/* --- tbl (834-1068px) --- */

/* --- tb + tbl (641-1068px): hero を 40px へ（両ファイルへ複製）--- */