@charset "UTF-8";
/* ==========================================================================
   DJM-A7 製品ページ専用 CSS
   - 読み込み順: at-cmn.css → この CSS → at-cmn.js → vendor（GSAP）→ djm-a7.js
   - モバイルファースト。PC は @media screen and (min-width: 960px) で上書き（境界はこの 1 本だけ）
   - 1rem = 10px（設計基準幅 SP 390px / PC 1440px）。Figma の px 値 ÷ 10 を rem で書く
   - :root の --color-* / --fw-* / --at-cmn-* は共通パーツの所有。ページ用の変数は --p-* にする
   - 独自要素の z-index は 90 未満（ナビ 90 / ヘッダー 100）
   - .at-cmn-header / .at-cmn-nav の祖先（#App など）に transform / filter / will-change / contain を付けない
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ用の変数（色はデザイン確定後に Figma の値へ差し替える）
   -------------------------------------------------------------------------- */
#App {
  --p-color-navy: #0b1633; /* TODO: Figma の濃紺に合わせる */
  --p-color-navy-deep: #060d22; /* TODO */
  --p-color-blue: #2f6bff; /* TODO: 製品ボタンの青 */
  --p-color-orange: #ff7a1a; /* TODO: 製品ボタンのオレンジ */
  --p-color-paper: #ffffff;
  --p-color-ink: var(--color-black6);
  --p-color-text: var(--color-black); /* 下部（比較表・FAQ）の文字。デザインの #111111_bk */
  --p-color-line: #ccc; /* 下部の罫線。デザインの #CCC_txt_gray */
  --p-frame: 0.8rem; /* 下部（比較表・FAQ）の左右の余白。デザイン：SP 8 ／ PC 18。上半分（コピー〜Features）は画面いっぱいで、白い枠は無い */
  /* 日本語・中国語の文字は欧文の書体に無いので、後ろに日本語の書体を続ける（並びは CDJ-1500X の実装に合わせた）。中国語は下で入れ替える */
  --p-font-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo;
  --p-font-body: "Helvetica Neue", Helvetica, Arial, var(--p-font-cjk), sans-serif;
  --p-font-display: var(--p-font-body); /* 見出しも本文と同じ Helvetica */
}

/* 中国語（簡体字）の版は中国語の書体を先に（日本語の書体だと字形が日本式になる）。body の data-lang はサイトが付ける（共通パーツの出し分けと同じ） */
body[data-lang="zh-cn"] #App {
  --p-font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

@media screen and (min-width: 960px) {
  #App {
    --p-frame: 1.8rem;
  }
}

/* --------------------------------------------------------------------------
   at-cmn.css がページ側に委ねている 3 点（README §8）
   -------------------------------------------------------------------------- */

/* 1. #App の暗い背景と白文字。CTA の白ボタン・白ヘッダーはこの前提で色が決まっている */
#App {
  color: var(--color-white);
  background-color: var(--color-black5);
  font-family: var(--p-font-body);
}

/* 画面に固定するセクションの入れ物（GSAP の .pin-spacer）は背景が無く、固定したセクションの端が画素の途中に来ると、
   後ろの #App の暗い地が細い線のように透ける。グレーの面と接する固定（Venue〜MASTER TEXTURE。主要機能は .p-highlights .pin-spacer）は、入れ物を同じグレーで塗る。
   さらに上へ 1px 同じグレーをはみ出させ（box-shadow）、前のセクション（下端はグレー）との境目の画素を覆う
   （境目が画素の途中に来ると、上下の面がどちらも半分ずつしか塗られず、暗い地が混ざるため） */
.pin-spacer:has(> .p-sound) {
  background-color: #e4e4e5;
  box-shadow: 0 -1px 0 #e4e4e5;
}

/* 2. CTA セクションの高さ（.at-cmn-cta__inner は height: 100%）。SP はデザインの 390×640、PC は 1 画面
   書体はテンプレートのまま（ほかの製品の CTA ボタンとそろえる。#App の Helvetica Neue を打ち消す）
   SP は 390 より広い画面（タブレットなど）で製品の上が切れないよう、高さを画面の幅に合わせて伸ばす
   （背景は上端から敷く。製品の下端は画像の高さの 64.8%＝幅の 106.4%。その下にロゴとボタンの 225 を取る） */
.p-cta {
  position: relative;
  isolation: isolate; /* 背景（z-index: -1）をこのセクションの中に閉じ込める */
  height: max(64rem, 106.4vw + 22.5rem);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}

/* 3. CTA の製品ロゴ画像のサイズ（デザイン：SP 幅 151 ／ PC 358） */
.p-cta__head-title {
  display: flex;
  justify-content: center;
}

.p-cta__head-title img {
  display: block;
  width: 15.1rem;
  height: auto;
}

/* 背景（空と水面＋製品の 1 枚絵）。スクロールで少し引く（data-p-zoom） */
.p-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #010101; /* 画像の読み込み前に見える色 */
}

.p-cta__bg picture {
  display: block;
  height: 100%;
}

.p-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* 配置の調整（README：CTA のレイアウトはページ側に委ねられている）。SP は下寄せの下余白、PC は左端の位置をデザインに合わせる */
.p-cta .at-cmn-cta__inner {
  padding-bottom: 6.6rem;
}

@media screen and (min-width: 960px) {
  /* 1 画面。背景は cover で切り取る。幅：高さが 1.6 より縦長の画面（iPad など）では左右が切れて製品が見切れるので、
     高さを幅の 1/1.6 までにする（製品の左端は画像の幅の 14%。左右は 10% ずつまでしか切れない） */
  .p-cta {
    height: min(100svh, 62.5vw);
  }

  .p-cta__bg img {
    object-position: center;
  }

  .p-cta .at-cmn-cta__inner {
    padding-bottom: 0;
    padding-left: 58.9583svw; /* デザイン：1440 中の 849（テンプレートの既定は 61.8svw） */
  }

  .p-cta__head {
    margin-bottom: min(4.5rem, 3.125vw); /* ロゴとボタンの間 69（__contents の gap 2.4rem と合わせて） */
  }

  .p-cta__head-title {
    justify-content: flex-start;
  }

  .p-cta__head-title img {
    width: min(35.8rem, 24.86vw);
  }
}

/* --------------------------------------------------------------------------
   ヘッダー
   - PC・SP とも、サイト共通ヘッダー（ホストの #header）だけを出す。共通パーツの .at-cmn-header（SP はハンバーガー）は出さない
   - #header は FV が見え始めてから少し遅れて上から出し、下へスクロールすると隠れ、上へ戻すと出る（クラスを付けるのは djm-a7.js の initHeader）
   - at-cmn.css は #header を消し #container の上余白を 0 にしている（README §6）。#header だけを戻し、上余白は 0 のままにする
     （#header は FV の写真の上に重ねて出す。余白を戻すと、ヘッダーが出る前に上端が白い帯になる）
   - .at-cmn-header は transition / opacity / display に触れない決まり（README §3・§4）。隠すのは visibility で行う
   - JS が動かなかった場合、#header は出たまま（遅らせる・隠すのは JS がクラスを付けたときだけ）
   -------------------------------------------------------------------------- */
html body #header {
  display: flex !important;
  transition:
    transform 0.2s cubic-bezier(0, 0, 0.58, 1),
    visibility 0s;
}

/* 出す前とスクロールで隠している間は上へ逃がす。transform は隠している間だけ付ける
   （付けたままだと、ヘッダー内の固定配置のメニュー #menu の基準がヘッダーに変わってしまう） */
html.p-is-header-pending body #header,
html.p-is-header-hidden body #header {
  visibility: hidden;
  transform: translateY(-100%);
  transition:
    transform 0.3s cubic-bezier(0.42, 0, 1, 1),
    visibility 0s 0.3s;
}

/* オープニングの最後に出すときだけ、ゆっくり下ろす（クラスは djm-a7.js が付け外しする） */
html.p-is-header-intro:not(.p-is-header-pending) body #header {
  transition:
    transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    visibility 0s;
}

.at-cmn-header {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   共通
   -------------------------------------------------------------------------- */

/* 明るいセクション（白ベース）。暗いセクションには HTML 側で data-ui-color="white" を付ける */
#App .is-light {
  color: var(--p-color-ink);
  background-color: var(--p-color-paper);
}

/* 下部のセクション見出し（比較表・FAQ）。Specifications ／ Support（共通パーツ）の見出しと同じ見た目（デザイン：24px Medium） */
.p-lower-title {
  font-weight: var(--fw-medium);
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 多言語（9 言語を流し込む）：独・蘭などの長い複合語や、日本語・中国語の文中の空白の無い英数字（型番・寸法）で
   枠や画面からはみ出さないよう、入りきらないときだけ語の途中で折り返す（DJM-V5 と同じ）。日本語・中国語は行頭に句読点を置かない。
   効かせるのはページのクラス p- の付いた要素とその中だけ（共通パーツにページのクラスを足した CTA の中には効く） */
#App [class^="p-"],
#App [class*=" p-"] {
  overflow-wrap: anywhere;
  line-break: strict;
}

/* 英語以外（html の lang はサイトの WPML が付ける）は、ブラウザの辞書で語の切れ目にハイフンを入れて折り返す（独・蘭の長い複合語向け。
   辞書で切れないときだけ上の overflow-wrap で語の途中で折り返す）。英語版の見た目は変えない */
html:not([lang|="en"]) #App [class^="p-"],
html:not([lang|="en"]) #App [class*=" p-"] {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* .p-br-pc：PC だけで改行する（デザインで PC のみ行を区切っている文。SP は自然に折り返す）
   .p-br-sp：SP だけで改行する（デザインで SP のみ行を区切っている文） */
.p-br-pc {
  display: none;
}

@media screen and (min-width: 960px) {
  .p-br-pc {
    display: inline;
  }

  .p-br-sp {
    display: none;
  }
}

/* ページのボタン・リンクのフォーカスの枠（キーボードで移動したとき）。比較表のタブ・リンクは個別に指定済み */
#App :is(.p-movie__button, .p-highlights__arrow, .p-highlights__dot, .p-soniclink__item, .p-features__toggle, .p-features__chip, .p-faq__summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

:is(.p-highlights__arrow, .p-highlights__dot):focus-visible {
  outline-color: #102653;
}

/* 素材が届くまでの仮の枠（data-p-placeholder）。素材を入れたら属性ごと外す */
[data-p-placeholder] {
  position: relative;
  min-height: 16rem;
  background: repeating-linear-gradient(45deg, rgba(127, 127, 127, 0.12) 0 1rem, rgba(127, 127, 127, 0.06) 1rem 2rem);
  outline: 1px dashed rgba(127, 127, 127, 0.5);
  outline-offset: -1px;
}

[data-p-placeholder]::after {
  position: absolute;
  inset: auto auto 0.8rem 0.8rem;
  font-size: 1.2rem;
  line-height: 1.4;
  opacity: 0.7;
  content: attr(data-p-placeholder);
}

/* --------------------------------------------------------------------------
   ローディング（.p-loader）：オープニングの最初の場面（デザイン：黒地に製品名のロゴ 209×41 と線 13＋239＋13）
   - ロゴがぼけた状態から浮かび、線（オレンジから紺へのグラデーション）が左から伸びる。動きは djm-a7.js（initOpening）が付ける
   - ロゴが消えたら .is-done で外す（下の FV も黒なので、そのまま光の演出につながる）。JS が動かなかったときは CSS のアニメーションだけで 3 秒後に消える
   - z-index はページ要素の上限 89（共通パーツの決まり：90 未満）。サイト共通ヘッダー（#header）は z-index 4 なので覆える
   -------------------------------------------------------------------------- */
.p-loader {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: grid;
  place-items: center;
  background-color: #000;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
  animation: p-loader-fallback 0.6s ease 3s forwards;
}

.p-loader.is-controlled {
  animation: none;
}

/* オープニング中は地を透かす（下の FV も黒。ロゴが消える前から、FV の光の線が見えるように） */
.p-loader.is-clear {
  background-color: transparent;
}

.p-loader.is-done {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@keyframes p-loader-fallback {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

/* オープニング中は、ナビ（共通パーツ・z-index 90 でローディングより上）を画面の右の外へ逃がす（デザインはナビも黒で覆われている）。
   共通パーツの決まりで .at-cmn-nav の opacity / display / transition は触れず、visibility は共通パーツ自身が使っているので、transform で外す。
   クラス（html.p-is-opening）を付けるのは JS がオープニングを動かしているときだけ。JS が動かないときに戻らなくなるのを防ぐ（JS が動くまでの一瞬はナビが見える）。
   製品名が出る頃に外し、項目を 1 つずつ出す（djm-a7.js） */
html.p-is-opening .at-cmn-nav {
  transform: translateX(110%);
}

.p-loader__inner {
  display: grid;
  gap: 4.2rem;
  justify-items: center;
}

.p-loader__logo {
  position: relative;
  width: 15.6rem;
}

.p-loader__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 線：両端の短い線（13）と、間の伸びる線（239）。間は 7 */
.p-loader__bar {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  width: 21rem;
}

.p-loader__bar i {
  flex: 0 0 1rem;
  height: 1px;
  background-color: #d9d9d9;
}

.p-loader__bar span {
  position: relative;
  flex: 1;
  height: 1px;
  overflow: hidden;
  background-color: rgba(44, 62, 101, 0.35);
}

.p-loader__bar b {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fea856, #2c3e65);
  transform-origin: 0 50%;
}

@media screen and (min-width: 960px) {
  .p-loader__inner {
    gap: 6rem;
  }

  .p-loader__logo {
    width: 20.9rem;
  }

  .p-loader__bar {
    width: 28.1rem;
  }

  .p-loader__bar i {
    flex-basis: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   FV（AT-Top）画面固定＋スクロール連動。固定と進行は djm-a7.js（GSAP ScrollTrigger）
   - KV に暗幕（dim）をかけ、そのまま主要機能の紹介へ進む
   - KV は 1 枚の画像ではなく、背景（青い空・夜明けの空。16:9）と製品を重ねて作る（オープニングで別々に動かすため）
   - PC：KV の位置・大きさはデザインの FV 枠（1440×720）に対する % で書く。.p-top__kv はデザインの KV 画像（2318×1080）と同じ場所・大きさの箱で、
     背景の箱（.p-top__scene）はその中に製品の位置と水平線を合わせて置き、画面に見える範囲を覆う
   - SP：クライアントのプロト（FV のみ）の置き方。背景の箱（16:9）を画面いっぱいに敷いて中央で切り抜き（縦長の画面では高さに合わせる）、
     製品は箱の中に小さめ・下寄りに置く
   - 何もしなければ最後の状態（夜明けの空＋製品）。オープニングの間だけ JS が最初の状態にして順に出す
   -------------------------------------------------------------------------- */
.p-top__stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background-color: #0d121e; /* 画像の読み込み前に見える色（画像の水面に近い色） */
}

.p-top__frame {
  position: absolute;
  inset: 0;
}

.p-top.is-opening .p-top__stage {
  background-color: #000;
}

.p-top__kv {
  position: absolute;
  inset: 0;
}

/* 背景の箱（16:9。背景の画像の大きさ）。--ly：光の線の高さ ／ --h：線から上下に開いた幅 ／ --f：開いた境目のぼかし幅 ／ --hz：水平線の高さ。
   --p-sc-w：SP の箱の幅（画面を覆う大きさ） */
.p-top__scene {
  --ly: 50%;
  --h: 140%;
  --f: 26%;
  --hz: 68%;
  --p-sc-w: max(100vw, 177.78svh);
  position: absolute;
  top: calc(50% - var(--p-sc-w) * 9 / 32);
  left: calc(50% - var(--p-sc-w) / 2);
  width: var(--p-sc-w);
  aspect-ratio: 16 / 9;
}

.p-top__scene > * {
  position: absolute;
}

/* 光の線から上下に開いて見える範囲。
   SP のオープニングの間は、JS がこの箱と光のにじみを画面に見えている範囲まで縮め（ぼかしをかける面を小さくして、メモリの少ない iPhone で落ちないように）、
   中身（.p-top__reveal-inner）とマスクは背景の箱と同じ大きさ・位置のまま置く（--p-reveal-*）。見た目は変わらない */
.p-top__reveal {
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--ly) - var(--h) - var(--f)), #000 calc(var(--ly) - var(--h)), #000 calc(var(--ly) + var(--h)), transparent calc(var(--ly) + var(--h) + var(--f)));
  mask-image: linear-gradient(to bottom, transparent calc(var(--ly) - var(--h) - var(--f)), #000 calc(var(--ly) - var(--h)), #000 calc(var(--ly) + var(--h)), transparent calc(var(--ly) + var(--h) + var(--f)));
  -webkit-mask-position: var(--p-reveal-x, 0) var(--p-reveal-y, 0);
  mask-position: var(--p-reveal-x, 0) var(--p-reveal-y, 0);
  -webkit-mask-size: var(--p-reveal-w, 100%) var(--p-reveal-h, 100%);
  mask-size: var(--p-reveal-w, 100%) var(--p-reveal-h, 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.p-top__reveal-inner {
  position: absolute;
  inset: 0;
}

/* 空の層。背景の画像は箱いっぱいに敷く。画像の読み込み前は、画像の上端（空）から下端（水面）の色のグラデーション */
.p-top__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #0f69ac, #0d121e);
}

.p-top__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* 夜明けの空：水平線の中央から楕円に広がって、青い空を覆う（--rx・--ry は楕円の大きさ） */
.p-top__sky.is-warm {
  --rx: 170%;
  --ry: 170%;
  background: linear-gradient(to bottom, #016fa0, #000818);
  -webkit-mask-image: radial-gradient(ellipse var(--rx) var(--ry) at 50% var(--hz), #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.4) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--rx) var(--ry) at 50% var(--hz), #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.4) 62%, transparent 100%);
}

/* 製品（KV から切り抜いた製品と映り込み 955×1294）。SP はプロトの位置（箱の 左 37%・上 30%・幅 26%）。
   PC は背景の画像（2560×1440 で 左 814・上 146・幅 955）の中で KV と同じ位置に置く */
.p-top__product {
  clip-path: polygon(0 10.43%, 68.3% 10.43%, 68.3% 9%, 71.9% 9%, 71.9% 10.43%, 100% 10.43%, 100% 100%, 0 100%);
  position: absolute;
  top: 30%;
  left: 37%;
  width: 26%;
  max-width: none;
  height: auto;
  transform-origin: 50% 70%;
}

/* 線が開くときの光のにじみ（ふだんは見えない）。光の線（--ly）を中心に置く。
   中央に寄せるのは top だけで行う（transform の translateY(-50%) にすると、JS が動かすときに iPhone の Safari でずれを二重に読み、
   にじみが画面の上のほうに茶色っぽく出ることがあるため） */
.p-top__bloom {
  top: calc(var(--ly) - 35%);
  right: -10%;
  left: -10%;
  height: 70%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 240, 205, 0.75) 0%, rgba(255, 214, 140, 0.35) 28%, rgba(255, 190, 110, 0.12) 55%, rgba(255, 180, 100, 0) 78%);
  filter: blur(18px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 中央から左右に伸びる光の線（ふだんは見えない）。色は夜明けの空を細くつぶして使う */
.p-top__line {
  top: var(--ly);
  right: 0;
  left: 0;
  height: 1px;
  background: url(img/top/fv-bg-warm.webp) center / 100% 100% no-repeat;
  box-shadow: 0 0 18px rgba(255, 205, 110, 0.55), 0 0 60px rgba(255, 190, 90, 0.25);
  transform: translateY(-50%);
  opacity: 0;
}

/* SP は光のにじみをぼかさない（大きな面のぼかしでメモリの少ない iPhone が落ちるため。元がふちのやわらかいグラデーションなので、見た目はほぼ変わらない） */
@media screen and (max-width: 959px) {
  .p-top__bloom {
    filter: none;
  }
}

/* デザインは暗幕（黒 70%）。2画面目でかける */
.p-top__dim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
}

.p-top__intro {
  position: absolute;
  top: calc(5.5rem + (100% - 5.5rem) * 0.1784); /* デザイン SP：ヘッダー（高さ 55）の下の FV 枠（390×667）の上から 119 */
  left: calc(50% - 13.4rem); /* デザイン SP：左 61（幅 261 の製品名を中央から 3.5 左に寄せた位置） */
}

.p-top__title {
  width: 26.1rem;
}

.p-top__title img {
  display: block;
  width: 100%;
  height: auto;
}

/* JS（GSAP）が動かなかったときの保険。演出が初期化されると .is-animated が付き、この指定は外れて GSAP が制御する */
.p-top:not(.is-animated) .p-top__dim {
  animation: p-top-fallback 0.6s ease 2.5s forwards;
}

@keyframes p-top-fallback {
  to {
    opacity: 1;
  }
}

/* 動きを減らす設定では、最後の状態（製品名なし・暗幕）をそのまま見せる */
@media not all {
  .p-top:not(.is-animated) .p-top__dim {
    opacity: 1;
    animation: none;
  }

  .p-top:not(.is-animated) .p-top__intro {
    visibility: hidden;
  }
}

@media screen and (min-width: 960px) {
  /* 枠はデザインの FV（1440×720）。画面の中央に置く */
  .p-top__frame {
    inset: 50% auto auto 50%;
    width: max(100%, 186.1svh); /* KV の上端（枠の中心から上へ 387/1440 幅）が画面の上端に届く幅 */
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
  }

  .p-top__kv {
    inset: -3.75% auto auto -8.056%; /* -27 / 720・-116 / 1440 */
    width: 116.806%; /* 1682 / 1440 */
    aspect-ratio: 2318 / 1080;
  }

  /* PC は背景の画像だけで KV を覆う（画面に見える KV の左右 160〜2144 を覆うよう、わずかに大きく敷く） */
  .p-top__scene {
    top: -3.119%;
    left: 6.723%;
    width: 86.252%;
  }

  .p-top__product {
    top: 10.139%; /* 146 / 1440 */
    left: 31.797%; /* 814 / 2560 */
    width: 37.305%; /* 955 / 2560 */
  }

  .p-top__intro {
    top: 46.11%; /* 332 / 720 */
    left: 8rem;
    transform: none;
  }

  .p-top__title {
    width: 33.8rem; /* デザイン：338×65 */
  }
}

/* --------------------------------------------------------------------------
   主要機能の紹介（AT-Overview）画面固定＋縦スクロールでカードが横に進む。固定と移動量は djm-a7.js
   - 数値はデザイン「主要機能の紹介」（PC：カード 377×452・間隔 30・左右 48 ／ SP：カード 315 幅・間隔 20・1 枚目を中央）
   - カードは写真 5 枚＋対応情報 1 枚
   - カードの中の文字と部品は、カードの幅に対する割合（cqw。カードを container にしている）で書く。カードの大きさが画面で変わっても、中の並びが崩れない
   - 高さは中身（カード＋操作部）と上下の余白だけ。固定は画面の上下中央で行う（djm-a7.js）。画面の高さいっぱいにすると、
     幅の狭い画面ほどカードの下に何も無い余白が残り、次のメッセージまでの間が空きすぎるため。固定中の上下には、FV の暗い色と入れ物のグレーが見える
   - 固定中は中身（カード＋操作部）が画面の高さに収まっていないと操作部が見えなくなるので、カードの幅は画面の高さからも決める
     （上下の余白 6svh ずつ＝12svh と、間隔＋操作部の高さを引いた残りにカードの高さを合わせる。高い画面ではデザインの大きさで止まる）
   -------------------------------------------------------------------------- */
.p-highlights {
  --p-hl-ctrl: 4.4rem; /* 操作部（前へ／次へ）の高さ */
  --p-hl-gap: 1.6rem; /* カードの列と操作部の間 */
  /* カードの列は画面の上下中央に置き、操作部はその下に付ける。上下とも「間隔＋操作部」ぶんを空けて収まる大きさ */
  --p-hl-card-w: min(31.5rem, (88svh - 2 * (var(--p-hl-gap) + var(--p-hl-ctrl))) * 377 / 452);
  --p-hl-kv-color: 3, 3, 4; /* FV からつながる暗い色（デザイン SP #030304。FV の下端の色に合わせて境目を見せない） */
  --p-hl-kv-solid: -0.229; /* 暗いままの所：カードの上端からカードの高さの何割まで（デザイン SP はカードの上 87 から消え始める：−87 ／ 380） */
}

.p-highlights__pin {
  position: relative; /* FV からつながる濃紺の帯（.p-highlights__kv）の基準 */
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 列の幅を画面幅に固定する（カードの列の長さに引っぱられて、操作部まで画面外に広がらないように） */
  gap: var(--p-hl-gap);
  align-content: center;
  /* 上は「間隔＋操作部」ぶんを足した余白。下は操作部の下ですぐ次のメッセージにつなげる（間を空けすぎないように）。
     ただし 0 にすると前へ／次へのボタンの下端が箱の端と重なり、丸の下が切れて見えるので、少しだけ空ける */
  padding-block: calc(min(8rem, 6svh) + var(--p-hl-gap) + var(--p-hl-ctrl)) 0.4rem;
  overflow: hidden;
  /* 上端は濃紺（上に重ねる濃紺の帯と同じ。上端が画素の途中に来たとき、帯の下のグレーが細い線のように透けないように） */
  background: linear-gradient(rgb(var(--p-hl-kv-color)) 1rem, #e4e4e5 1rem);
}

/* セクションと固定の入れ物の地。箱（.p-highlights__pin）の端が画素の途中に来ると地が細い線のように透けるので、
   上端（FV と接する所）は濃紺、その下は次のメッセージと同じグレーにする（.is-light の白は使わない） */
#App .p-highlights.is-light,
.p-highlights .pin-spacer {
  background: linear-gradient(rgb(var(--p-hl-kv-color)) 1rem, #e4e4e5 1rem);
}

/* 画面の中央で固定してから（.is-pinned。djm-a7.js）は、箱の上の画面に残る所も濃紺で埋める（箱の外は入れ物のグレーが見えて、帯が途切れるため）。
   箱の形の影を上へ 2 つずらして重ね、箱が画面の高さの 1/4 以上あれば、箱の上の画面の半分までを覆う */
.p-highlights__pin.is-pinned {
  box-shadow: 0 -50svh 0 rgb(var(--p-hl-kv-color)), 0 -25svh 0 rgb(var(--p-hl-kv-color));
}

/* FV からつながる濃紺の帯（FV の下からカードの裏まで。FV からの流れで色をつなげる）。
   セクションの上端からカードの上端の少し下までは濃紺のまま、カードの下端で消える。
   帯の長さはカードの下端まで（箱の下端から、操作部とその間隔を引いた所）。
   ヘッダーの文字を白にするため data-ui-color="white" を付けている（帯がヘッダーの下にある間だけ白になる） */
.p-highlights__kv {
  --p-hl-card-h: calc(var(--p-hl-card-w) * 452 / 377);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% - var(--p-hl-gap) - var(--p-hl-ctrl));
  background: linear-gradient(
    to bottom,
    rgb(var(--p-hl-kv-color)) calc(100% - var(--p-hl-card-h) * (1 - var(--p-hl-kv-solid))),
    rgba(var(--p-hl-kv-color), 0)
  );
  pointer-events: none;
}

.p-highlights__viewport,
.p-highlights__controls {
  position: relative; /* 濃紺の帯より手前に出す */
}

.p-highlights__viewport {
  overflow: hidden;
}

.p-highlights__track {
  display: flex;
  gap: 2rem;
  width: max-content;
  padding-inline: calc((100vw - var(--p-hl-card-w)) / 2); /* SP は 1 枚目を画面の中央から始め、最後のカードも中央で止める */
}

/* 横移動（is-scroll-linked）を使わない場合は、カードの列だけを横スクロール（スワイプ）で見せる */
.p-highlights:not(.is-scroll-linked) .p-highlights__track {
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.p-highlights:not(.is-scroll-linked) .p-highlights__track::-webkit-scrollbar {
  display: none;
}

.p-highlights__card {
  position: relative;
  flex: 0 0 auto; /* 横スクロール時に縮まないようにする */
  width: var(--p-hl-card-w);
  aspect-ratio: 377 / 452;
  overflow: hidden;
  color: #f1f1f1;
  border-radius: 0.4rem; /* 前のデザインの角丸（4px）に戻す。PC・SP 共通 */
  scroll-snap-align: center;
  container-type: inline-size; /* 中の cqw の基準（1cqw = カードの幅の 1%。デザインの 377 幅で 3.77px） */
}

/* 写真はカードより左右 10% ずつ大きく敷く（横移動に合わせて写真を逆向きにずらす視差で、端が見えないように。djm-a7.js の HIGHLIGHTS_PARALLAX）。
   画像はデザインの切り抜きの左右に 10% ずつ足して書き出してある（905×904）ので、ずれていない所ではデザインと同じ範囲が同じ大きさで見える */
.p-highlights__img {
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  max-width: none; /* 共通の img { max-width: 100% } で 120% が打ち消されないように */
  height: 100%;
  object-fit: cover;
}

/* 下端の黒いグラデーション（見出しを読みやすく）。デザインは 109px（452 中）。写真そのものは暗くしない */
.p-highlights__card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 75.9%, #000);
  content: "";
}

.p-highlights__logo {
  position: absolute;
  top: 6.37cqw;
  left: 6.37cqw;
  z-index: 1;
  width: 32.1cqw; /* デザイン：121（377 中） */
  height: auto;
}

/* 見出しは本文と同じ Helvetica（対応情報のカードと書体をそろえる） */
.p-highlights__card-title {
  position: absolute;
  right: 6.37cqw;
  bottom: 7.4cqw;
  left: 6.37cqw;
  z-index: 1;
  font-family: var(--p-font-body);
  font-weight: var(--fw-bold);
  font-size: 5.31cqw; /* デザイン：20px（377 中） */
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* 対応情報のカード：黒の上に製品を薄く敷き、白い文字とロゴを中央に縦に並べる（数値はデザイン 377 幅の値を cqw に直したもの） */
.p-highlights__card.is-compat {
  background-color: #111;
}

.p-highlights__card.is-compat::after {
  display: none;
}

/* デザイン：製品の画像（1200×961）を左上（上 12）にそろえ、幅 424（377 中。右はカードの端で切れる）・濃さ 20% で敷く */
.p-highlights__compat-bg {
  position: absolute;
  top: 2.65%; /* 12 / 452 */
  left: 0;
  width: 112.47%; /* 424 / 377 */
  max-width: none;
  height: auto;
  opacity: 0.2;
}

/* 中身はカードの上下中央に置く（英語ではデザインの上端 63 とほぼ同じ位置。長い言語で行が増えても上下に均等に広がり、下端で切れにくい） */
.p-highlights__compat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4.24cqw;
  align-items: center;
  justify-content: center;
  padding: 4cqw 12.5cqw; /* 左右：中身の幅 283（377 中） */
  color: #fff;
}

/* 区切りの細い線（グループの間） */
.p-highlights__compat > * + * {
  padding-top: 4.24cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
}

.p-highlights__compat-group {
  display: flex;
  flex-direction: column;
  gap: 3.71cqw;
  align-items: center;
}

.p-highlights__compat-title {
  font-size: 3.71cqw; /* 14px */
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}

.p-highlights__compat-group.is-small .p-highlights__compat-title {
  font-size: 2.92cqw; /* 11px */
}

.p-highlights__compat-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 3.71cqw 6.37cqw;
  align-items: center;
  justify-content: center;
}

.p-highlights__compat-logos img {
  display: block;
  height: auto;
}

.p-highlights__compat-logos img:nth-child(1) {
  width: 29.2cqw; /* rekordbox 110 */
}

.p-highlights__compat-logos img:nth-child(2) {
  width: 21.2cqw; /* djay PRO 80 */
}

.p-highlights__compat-logos img:nth-child(3) {
  width: 32.1cqw; /* Serato 121（2 段目） */
}

.p-highlights__compat-row {
  display: flex;
  gap: 2.65cqw;
  align-items: center;
  justify-content: center;
}

.p-highlights__compat-row > img {
  display: block;
  width: 13.3cqw; /* djay のアイコン 50 */
  height: auto;
}

.p-highlights__compat-label {
  font-size: 3.18cqw; /* 12px */
  line-height: 1.2;
  text-align: center;
}

.p-highlights__compat-label.is-tiny {
  font-size: 2.65cqw; /* 10px */
  line-height: 1.5;
}

.p-highlights__compat-label small {
  font-size: 0.9em;
}

.p-highlights__compat-pair {
  display: flex;
  gap: 10.6cqw;
  align-items: flex-start;
  justify-content: center;
}

.p-highlights__compat-row.is-devices {
  gap: 4.24cqw;
  align-items: flex-end;
}

.p-highlights__compat-device {
  display: flex;
  flex-direction: column;
  gap: 2.65cqw;
  align-items: center;
}

.p-highlights__compat-device img {
  display: block;
  height: auto;
}

.p-highlights__compat-device:first-child img {
  width: 14.3cqw; /* PC 54 */
}

.p-highlights__compat-device:last-child img {
  width: 7.4cqw; /* iPhone 28 */
}

.p-highlights__compat-row.is-connections {
  flex-direction: column;
  gap: 2.65cqw;
}

/* USB Type-C の差し込み口の印（細い線の角丸の枠＋中の線。他の印より太く見えないよう細い線にする） */
.p-highlights__usb-c {
  position: relative;
  display: block;
  width: 10.6cqw; /* 40 */
  height: 3.71cqw; /* 14 */
  margin-block: 3.2cqw; /* デバイスのアイコンと高さをそろえる */
  border: 1px solid #f1f1f1;
  border-radius: 99rem;
}

.p-highlights__usb-c::after {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 1px;
  margin-top: -0.5px;
  background-color: #f1f1f1;
  border-radius: 99rem;
  content: "";
}

/* 下の操作部：中央にページ送りの点（押すとそのカードへ）、右端に前へ／次へ */
.p-highlights__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: 2rem;
}

.p-highlights__dots {
  display: flex;
  grid-column: 2;
  gap: 0.8rem;
  align-items: center;
}

.p-highlights__dot {
  position: relative;
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  background-color: #102653;
  border: 0;
  border-radius: 0.3rem;
  opacity: 0.23;
  cursor: pointer;
  transition:
    width 0.3s ease,
    opacity 0.3s ease;
}

/* 押せる範囲は点より広げる（隣の点との間 0.8rem を半分ずつ・上下 2.4rem） */
.p-highlights__dot::after {
  position: absolute;
  inset: -0.9rem -0.4rem;
  content: "";
}

.p-highlights__dot.is-current {
  width: 1.8rem;
  opacity: 1;
}

.p-highlights__arrows {
  display: flex;
  grid-column: 3;
  gap: 1.5rem;
  justify-self: end;
}

.p-highlights__arrow {
  display: grid;
  width: var(--p-hl-ctrl);
  height: var(--p-hl-ctrl);
  padding: 0;
  place-items: center;
  background-color: #c8cdd7;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.p-highlights__arrow svg {
  width: 100%;
  height: 100%;
  fill: rgba(0, 0, 0, 0.56);
}

.p-highlights__arrow:disabled {
  cursor: default;
  opacity: 0.3;
}

@media screen and (min-width: 960px) {
  /* カードの幅は、デザインの大きさ・画面の高さ（操作部が収まる）・画面の幅（1440 より狭い PC でも最初に 3 枚見える）の小さい方 */
  .p-highlights {
    --p-hl-card-w: min(37.7rem, 26.18vw, (88svh - 2 * (var(--p-hl-gap) + var(--p-hl-ctrl))) * 377 / 452);
    --p-hl-gap: 2.4rem;
    --p-hl-kv-color: 0, 4, 10; /* デザイン PC #00040a（FV の下端の色に合わせて境目を見せない） */
    --p-hl-kv-solid: 0.1; /* デザイン PC 45 ／ 452 */
  }

  .p-highlights__track {
    gap: min(3rem, 2.08vw);
    padding-inline: min(4.8rem, 3.33vw);
  }

  .p-highlights__card {
    scroll-snap-align: start;
  }

  /* デザインは矢印をカードの右端（右 48）にそろえているが、PC は共通パーツのナビが画面右下に固定で出ている
     （右端から約 17rem・下端から約 5〜20rem）。固定中は矢印がちょうどその位置に来てナビの下に隠れ、押すとナビの「Top」に当たるので、
     ナビの左側まで寄せる。デザイナーに確認する（実装規約 §8） */
  .p-highlights__controls {
    padding-inline: min(4.8rem, 3.33vw) 18.6rem; /* 右は固定ナビを避ける幅（ナビは rem のまま縮まない） */
  }
}

/* --------------------------------------------------------------------------
   メッセージ（AT-Message）：主要機能のあとの一文。前の主要機能と続けたグレーの背景に、黒い大きな文字を中央に置く
   - 画面には固定せず、上下の余白はデザインのまま（SP 190・PC 268）。行ごとの出方は djm-a7.js（initMessage。行は .p-line に組み直す）
   - JS が動かなかったときは、文は最初から見えている
   -------------------------------------------------------------------------- */
.p-message {
  display: grid;
  padding: 19rem 2.4rem;
  place-items: center;
  color: #111;
  background-color: #e4e4e5; /* 主要機能（.p-highlights）と同じ */
}

.p-message__copy {
  max-width: 34rem;
  font-weight: var(--fw-bold);
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}

/* 行ごとの出し入れ（djm-a7.js の splitLines が組み直す）。行の枠の外に出た文字は見せず、中身だけを上下に動かす */
.p-line {
  display: block;
  overflow: clip;
}

.p-line__inner {
  display: block;
  will-change: transform;
}

@media screen and (min-width: 960px) {
  .p-message {
    padding: 26.8rem 4rem;
  }

  .p-message__copy {
    max-width: 110rem;
    font-size: 3rem;
  }
}

/* --------------------------------------------------------------------------
   動画（AT-Movie）：ループ動画（3〜5 秒。素材は仮）の中央に「Watch video」
   - 動画はスクロールに合わせて少しずつ引く（data-p-zoom。動かすのは djm-a7.js）
   - ボタンの表示・非表示は共通パーツの言語クラス（zh-cn-hide ／ zh-cn-only-inline-flex。!important）が決める
   -------------------------------------------------------------------------- */
.p-movie {
  position: relative;
  display: grid;
  height: 100svh; /* PC・SP とも 1 画面 */
  place-items: center;
  overflow: hidden;
  background-color: #000;
}

.p-movie__media {
  position: absolute;
  inset: 0;
}

.p-movie__media::after {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.p-movie__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-movie__buttons {
  position: relative;
}

/* 白いボタン（文字 #111・高さ 4.8rem・太さ 300＝Where to buy と同じ） */
.p-movie__button {
  display: inline-flex;
  gap: 1.2rem;
  align-items: center;
  height: 4.8rem;
  padding: 0 2.8rem;
  color: #111;
  font: inherit;
  font-weight: var(--fw-light);
  font-size: 1.6rem;
  line-height: 1.5;
  background-color: #fff;
  border: 0;
  border-radius: 6rem;
  cursor: pointer;
}

.p-movie__play {
  width: 0;
  height: 0;
  border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent;
  border-left: 1rem solid currentColor;
}

/* --------------------------------------------------------------------------
   導入（AT-Setup）：上に見出しと本文、下に「対応 DJ ソフト（PC/Mac）」と「対応 DJ アプリ（モバイル）」
   - 数値はデザイン（PC：上 232・下 488 を左右 702 ずつ ／ SP：縦に積む）。下の 2 つの枠に色は付けず（地の色のまま）、間に仕切り線（PC は縦・SP は横）
   - ラベル（h3）は読み上げの順のため先に置き、見た目の順は order で決める（PC：枠 → 画像 → ラベル）
   -------------------------------------------------------------------------- */
.p-setup {
  padding-block: 5.8rem 0; /* 下の余白は取らず、下の枠をセクションの下端まで付ける */
  color: #383838;
  background-color: #d8d8da; /* まわり（#e4e4e5）より少し濃くし、次の Every venue（#e4e4e5）との境目を見せる */
}

.p-setup__head {
  display: grid;
  gap: 1.6rem;
  padding: 1rem 2rem;
}

.p-setup__title {
  color: #111;
  font-family: var(--p-font-display);
  font-weight: var(--fw-bold);
  font-size: 2.6rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
}

.p-setup__lead {
  color: #111;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.7;
  text-align: center;
}

.p-setup__panel {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: center;
  padding: 4rem 2rem;
}

/* ラベル（Compatible DJ software ／ apps）は見せない。読み上げの見出しとしては残す */
.p-setup__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* SP：ラベル → 画像 → 枠（デザイン SP。画像と枠の間は 24） */
.p-setup__panel .p-setup__card {
  order: 1;
  margin-top: 0.8rem;
}

/* 対応ソフトの枠：rekordbox・djay を横に並べ、Serato を下の段の中央に */
.p-setup__panel.is-software .p-setup__card {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1.6rem 2rem;
  justify-content: center;
}

.p-setup__panel.is-software .p-setup__app:nth-child(3) {
  grid-column: 1 / -1;
}

.p-setup__card {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.4rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2rem 1.6rem;
}

.p-setup__app {
  display: grid;
  gap: 1.6rem;
  justify-items: center;
}

.p-setup__app img {
  display: block;
  height: auto;
}

.p-setup__app .is-rekordbox {
  width: 15.4rem;
}

.p-setup__app .is-djay {
  width: 9.7rem;
}

.p-setup__app .is-serato {
  width: 14.8rem;
}

/* ロゴの下の文字（rekordbox for Mac/Windows など）は出さない。ロゴの代わりの文字が無い djay for iOS は残す */
.p-setup__app-name:not(.is-large) {
  display: none;
}

.p-setup__app-name {
  font-weight: var(--fw-normal);
  font-size: 1.1rem; /* デザイン SP：11px Regular ／ PC：12px Medium */
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}

.p-setup__app-name.is-large {
  font-size: 1.4rem;
  line-height: 1.4;
}

.p-setup__app-icon {
  width: 3.6rem;
  height: auto;
}

.p-setup__device {
  display: block;
  height: auto;
}

.p-setup__device.is-pc {
  width: 29rem;
}

.p-setup__device.is-mobile {
  width: 23rem;
}

/* SP の余白と大きさ（デザイン SP 390 幅：見出しまで 64・本文の下 48・画像とロゴの間 24・仕切り線の上下 40・下 64） */
@media screen and (max-width: 959px) {
  .p-setup {
    padding-block: 0 6.4rem;
  }

  .p-setup__head {
    padding: 6.4rem 2rem 4.8rem;
  }

  .p-setup__title {
    font-size: 2.4rem;
  }

  .p-setup__panel {
    position: relative;
    gap: 2.4rem;
    padding: 0 2rem;
  }

  .p-setup__panel .p-setup__card {
    margin-top: 0;
    padding: 0;
  }

  /* 対応 DJ アプリの前に横の仕切り線（幅 300・高さ 1。上下 40） */
  .p-setup__panel.is-apps {
    margin-top: 4rem;
    padding-top: 4rem;
  }

  .p-setup__panel.is-apps::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(30rem, 100% - 4rem);
    height: 1px;
    background-color: #c5c5c5; /* 背景を少し濃いグレー（#d8d8da）にした分、デザインの #ccc では見えにくいので濃くする */
    transform: translateX(-50%);
    content: "";
  }

  .p-setup__panel.is-apps .p-setup__card {
    gap: 0.8rem;
  }

  .p-setup__app-icon {
    width: 4.2rem;
  }

  .p-setup__device.is-pc {
    width: 29.7rem;
    aspect-ratio: 297 / 179; /* デザインの枠の大きさ。画像は枠の中央に置く */
    object-fit: contain;
  }

  .p-setup__device.is-mobile {
    width: 23rem;
  }
}

@media screen and (min-width: 960px) {
  /* 1 画面ぶん見せてから次の固定（Venue）に入る。下の 2 つの枠は、セクションの下端まで伸ばす（下に地の色の帯を残さない） */
  .p-setup {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 8rem;
    padding-bottom: 0;
  }

  .p-setup__head {
    justify-items: center;
  }

  .p-setup__title {
    font-size: 3.5rem;
  }

  /* 本文も見出しと同じく中央揃え（2 行の長さが違うので、左揃えだと見出しとずれて見える） */
  .p-setup__lead {
    width: max-content;
    max-width: 100%;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    text-align: center;
  }

  /* 下の段はセクションの下端まで伸ばし、左右の枠（中身の高さ）をその上下中央に置く。
     左右の幅は常に半分ずつ（中身の幅で左右の幅が変わると、画面の中央に置いた仕切り線と枠の間がずれる） */
  .p-setup__panels {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    min-height: 48.8rem;
    padding-block: 4rem;
  }

  /* ロゴの段は中身の高さにし（デザインの段の高さは画像との間に足す）。左右の枠の中身は上端にそろえる（ロゴの上端の高さを左右でそろえる） */
  .p-setup__panel {
    position: relative;
    gap: 0;
    padding: 0 2rem;
  }

  /* 2 つの枠の間の仕切り線（幅 1。色は SP と同じ）。右の枠の左端に置き、ロゴの上端から画像の下端までの長さにする */
  .p-setup__panel.is-apps::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background-color: #c5c5c5;
    content: "";
  }

  /* PC：ロゴ → 画像 */
  .p-setup__panel .p-setup__card {
    order: 1;
    margin-top: 0;
  }

  .p-setup__device {
    order: 2;
    margin-top: 2.3rem;
  }

  /* 画面が狭いときは、ロゴの間と画像を枠の幅に合わせて縮める */
  .p-setup__panel.is-software .p-setup__card {
    display: flex;
    flex-wrap: nowrap;
    gap: min(4rem, 2.5vw);
    width: min(57.4rem, 100%);
    padding: 0;
  }

  .p-setup__panel.is-software .p-setup__app {
    flex-shrink: 1;
    min-width: 0;
  }

  .p-setup__panel.is-software .p-setup__app img {
    max-width: 100%;
  }

  .p-setup__panel.is-apps .p-setup__card {
    flex-wrap: nowrap;
    gap: 2rem;
    width: 26.9rem;
    padding: 0;
  }

  /* ロゴと画像の間はデザインのまま（段の高さ 110・120 の中でロゴを上下中央に置いた分を足す） */
  .p-setup__panel.is-software .p-setup__device {
    margin-top: 6.5rem;
  }

  .p-setup__panel.is-apps .p-setup__device {
    margin-top: 6.7rem;
  }

  .p-setup__app-name {
    font-weight: var(--fw-medium);
    font-size: 1.2rem;
  }

  .p-setup__app-name.is-large {
    font-size: 1.4rem;
  }

  .p-setup__device.is-pc {
    width: min(46.1rem, 100%);
  }

  .p-setup__device.is-mobile {
    width: min(32.7rem, 100%);
  }
}

/* --------------------------------------------------------------------------
   地続きの 3 ブロック（コピー → Sound Quality → MASTER TEXTURE）
   - 背景色をそろえて区切らずにつなげる（デザインの注記「地続きで続いている演出」）。画面いっぱい（左右の白い枠なし）
   - 切り替えの動き（ブラインド）：画面に固定し、手前のブロックが下端から上へ隠れて、後ろに重ねた次のブロックが現れる（.is-blind。動かすのは djm-a7.js）。
     コピーはグレーの面（.p-venue__paper）に黒い文字で入り、文字の下から写真の窓が開いて広がり、写真と白い文字に切り替わる。
     写真と文字はスクロールに合わせて上へずらす（写真のほうが大きく）。写真は枠より上下に大きく敷き、ずれても端が見えないようにする
   - 固定しないとき（JS なし・動きを減らす設定・文字が画面に収まらない）は、3 ブロックを縦に並べたまま動かさない
   - 写真の端は背景に溶かす（デザイン：写真の素材そのものの端が透明に溶けている）。溶かし方は写真の入れ物（動かない）に mask で付けるので、
     写真が視差で動いても、溶ける位置はセクションの中で変わらない（境目で写真が切れて見えないように）。
     値は Figma の写真の透明度を測ったもの。写真が消えた所は背景 #212224 が見える（PC は 3 ブロックとも同じ色でつながる）
   - 数値はデザイン（PC 1404×720 のブロック ／ SP 374 幅）から
   -------------------------------------------------------------------------- */
.p-sound {
  color: #f1f1f1;
  background-color: var(--p-color-paper);
}

.p-venue,
.p-sound-quality,
.p-master-texture {
  position: relative;
  overflow: hidden;
  background-color: #212224;
}

/* 写真を枠より上下 20% ずつ大きく敷く（ブラインドの切り替えで上下にずれても、見えている所で端が切れないように） */
.p-venue__bg,
.p-sound-quality__media,
.p-master-texture__media {
  position: absolute;
  inset: 0;
}

/* 写真の入れ物の溶かし方。--p-mask-y（縦）と --p-mask-x（横）を重ねる（両方で不透明な所だけ見える） */
.p-venue__bg,
.p-sound-quality__media,
.p-master-texture__media {
  --p-mask-x: linear-gradient(#000, #000);
  --p-mask-y: linear-gradient(#000, #000);
  -webkit-mask-image: var(--p-mask-y), var(--p-mask-x);
  mask-image: var(--p-mask-y), var(--p-mask-x);
  /* 重ね方は 1 枚ずつ指定する（1 つだけだと Safari 15.4 で下の 1 枚にも交差が効き、写真ごと消える） */
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
}

.p-venue__bg img,
.p-sound-quality__media img,
.p-master-texture__media img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  object-fit: cover;
}

/* コピー：暗いグラデーションの下に写真 */
.p-venue {
  display: grid;
  min-height: 62rem;
  padding: 4rem 2rem;
  place-items: center;
  /* 写真が消えた所の下地。SP のデザインは #17181a だが、次の Sound Quality（#212224）との境目に段差が出るので、PC と同じ #212224 にそろえる */
  background-color: #212224;
}

.p-venue__bg {
  --p-mask-y: linear-gradient(to bottom, #000 75%, transparent 92%); /* デザイン SP：466〜581（620 中） */
}

.p-venue__bg::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(52, 52, 52, 0.55), rgba(23, 24, 26, 0.55));
  content: "";
}

.p-venue__copy {
  position: relative;
  max-width: 23.1rem; /* デザイン SP：幅 231・14px Regular。行の区切り（br）どおりに収まる幅 */
  font-weight: var(--fw-bold);
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Sound Quality：暗くした写真の上に見出しと本文（セクション名「Sound Quality」は見せない＝見出しは visually-hidden でメニューの行き先に残す）
   - 写真は SP ではブロックの上から 136 下げて敷き、右寄りの部分を見せる（デザイン）。暗い面は #212224 の 70% */
.p-sound-quality {
  min-height: 62rem;
  padding: 22.9rem 2rem 4rem;
}

/* デザイン SP：写真の上端はブロックの上から 136。その中で上 56〜178 で現れ、下は 410 から薄くなる（484 中）。右は 84% から少し薄く。
   下端はデザインだと 45% 残って MASTER TEXTURE との境目で切れるので、下端で消えきるようにした */
.p-sound-quality__media {
  --p-mask-y: linear-gradient(to bottom, transparent 11.6%, #000 36.8%, #000 84.7%, transparent);
  --p-mask-x: linear-gradient(to right, #000 84%, rgba(0, 0, 0, 0.65));
  top: 13.6rem;
}

.p-sound-quality__media img {
  object-position: 72% 50%;
}

.p-sound-quality__media::after {
  position: absolute;
  inset: -13.6rem 0 0;
  background-color: rgba(33, 34, 36, 0.7);
  content: "";
}

.p-sound-quality__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.6rem;
  max-width: 56rem; /* 見出しは本文より広く取る（デザインは見出し 2 行・本文 380 幅） */
}

.p-sound-quality__heading,
.p-master-texture__heading {
  font-family: var(--p-font-display);
  font-weight: var(--fw-bold);
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.p-sound-quality__text,
.p-master-texture__text {
  max-width: 38rem;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* MASTER TEXTURE：上に写真、下に文字（SP）／写真の上の左に文字（PC） */
.p-master-texture {
  min-height: 57.1rem;
  padding: 15.3rem 2rem 4rem; /* デザイン：文字は写真（高さ 232）の下端に少し重ねて始まる */
}

/* デザイン SP：写真（高さ 232）の上 0〜50 で現れ、下 184〜230 で消える。右端は少し薄く */
.p-master-texture__media {
  --p-mask-y: linear-gradient(to bottom, transparent, #000 21%, #000 79%, transparent 99%);
  --p-mask-x: linear-gradient(to right, #000 88%, rgba(0, 0, 0, 0.35));
  bottom: auto;
  height: 23.2rem;
}

/* 写真の端を背景になじませる。文字側は暗く（デザインはぼかした暗い面を重ねている） */
.p-master-texture__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(33, 34, 36, 0.5), rgba(33, 34, 36, 0.5) 60%, #212224);
  content: "";
}

.p-master-texture__body {
  position: relative;
  display: grid;
  gap: 1.6rem;
  max-width: 38rem;
}

.p-master-texture__label {
  display: none;
}

@media screen and (min-width: 960px) {
  /* 写真の上に一様な薄い暗い面（デザイン：#111 の 30%。SP はグラデーション）。写真は下で溶かさず、ブロックいっぱいに見せる */
  .p-venue {
    min-height: 100svh;
  }

  .p-venue__bg {
    --p-mask-y: linear-gradient(#000, #000);
  }

  /* 写真は拡大せず、画面の幅に合わせて置く（デザイン：写真 2048×1366 を幅 1440 に。1440×720 では高さ 960）。
     写真は視差で画面の高さの 18% 上へずれるので、下にその分を余らせて置き、ずれきったときに下端がブロックの下端にそろうようにする。
     幅に合わせた高さで余りが足りない画面（幅：高さが 1.77 より縦長）は、その分だけ拡大する */
  .p-venue__bg img {
    top: auto;
    bottom: -18%;
    height: max(66.667vw, 118%);
  }

  .p-venue__bg::after {
    background: rgba(17, 17, 17, 0.3);
  }

  .p-venue__copy {
    max-width: 120rem; /* デザインの行の区切り（<br>）で 4 行に収まるよう、少し余裕を持たせる */
    font-weight: var(--fw-bold);
    font-size: 3rem;
  }

  /* 文字の左端は 120。文字は画面の上下の中央に置く。1440 より狭い PC は左を画面の幅に合わせて縮める */
  .p-sound-quality {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 8rem 0 8rem min(12rem, 8.33vw);
  }

  /* デザイン：写真（1439×720）は左から 220 の位置に、ブロックの高さいっぱいに置く（右はブロックの外で切れる）。
     写真の中は縦 10.8〜85.8% の範囲を見せる（写真は薄くしない） */
  .p-sound-quality__media {
    --p-mask-x: linear-gradient(#000, #000);
    --p-mask-y: linear-gradient(#000, #000);
    inset: 0 auto 0 15.278%; /* 220 / 1440 */
    width: 99.931%; /* 1439 / 1440 */
  }

  .p-sound-quality__media img {
    top: -14.45%;
    height: 133.37%;
  }

  /* 文字のある左側だけを暗くする（デザイン：ブロックの左から 183〜736 の範囲で、#212224 の 100% → 30% で 92% → 46% で 50% → 62% で 15% → 右端で 10%。
     その右は暗くしない）。写真の枠より左の部分は枠の外で切れる（地の #212224 が見える） */
  .p-sound-quality__media::after {
    inset: 0 auto 0 -2.571%; /* (183 − 220) / 1439 */
    width: 38.429%; /* 553 / 1439 */
    background: linear-gradient(to right, #212224, rgba(33, 34, 36, 0.92) 30%, rgba(33, 34, 36, 0.5) 46%, rgba(33, 34, 36, 0.15) 62%, rgba(33, 34, 36, 0.1));
  }

  .p-sound-quality__heading,
  .p-master-texture .p-master-texture__heading {
    font-size: max(2.8rem, min(3.9rem, 2.71vw)); /* 39px。1440 より狭い PC は縮める（右の製品の画像に重ならないように） */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .p-sound-quality__text,
  .p-master-texture__text {
    font-size: 1.5rem;
    letter-spacing: 0.01em;
  }

  /* 文字の左端は 120。文字は画面の上下の中央に置く */
  .p-master-texture {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 8rem 0 8rem min(12rem, 8.33vw);
  }

  /* デザイン：写真（1080×720）は左から 405 の位置に、ブロックの高さいっぱいに置く（写真の枠は 341 からだが、画像は枠の中で右へずらして置かれている）。写真は上下に大きく敷かない
     （元の画像に上下の余りが無いため。ブロックが下から現れる間にずれて見える上端は、手前のブロックに隠れている） */
  .p-master-texture__media {
    --p-mask-x: linear-gradient(#000, #000);
    --p-mask-y: linear-gradient(#000, #000);
    inset: 0;
    height: auto;
  }

  .p-master-texture__media img {
    top: 0;
    left: 28.104%; /* 404.7 / 1440 */
    width: 75%; /* 1080 / 1440 */
    height: 100%;
  }

  /* 文字のある左側だけを暗くする（デザイン：ブロックの左端から幅 1046 の範囲で、#212224 の 100% → 36% で 95% → 50% で 70% → 66% で 15% → 0） */
  .p-master-texture__media::after {
    right: auto;
    width: 72.639%; /* 1046 / 1440 */
    background: linear-gradient(to right, #212224, rgba(33, 34, 36, 0.95) 36%, rgba(33, 34, 36, 0.7) 50%, rgba(33, 34, 36, 0.15) 66%, rgba(33, 34, 36, 0));
  }

  .p-master-texture__body {
    max-width: 56rem;
  }

}

/* ブラインドの切り替え（.is-blind は djm-a7.js が付ける）：3 ブロックを画面の高さの舞台に重ね、上のブロックほど手前に置く。
   手前のブロックを下端から上へ隠す（clip-path）と、後ろのブロックが現れる */
.p-sound.is-blind {
  position: relative;
  height: 100lvh; /* 固定中に SP のブラウザのツールバーが縮んでも下に隙間が出ない高さ（ツールバーが出ている間は下端が裏に隠れる） */
  overflow: hidden;
  background-color: #212224;
}

/* 入り（Venue）はグレーの面で始まり、後ろの暗い地と上端がそろう。上端が画素の途中に来ると暗い地が細い線のように透けるので、
   後ろの地（このブロックと Venue）の上端だけをグレーにする（ふだんは手前のブロックに隠れて見えない） */
.p-sound.is-blind,
.p-sound.is-blind > .p-venue {
  background: linear-gradient(#e4e4e5 1rem, #212224 1rem);
}

.p-sound.is-blind > .p-venue,
.p-sound.is-blind > .p-sound-quality,
.p-sound.is-blind > .p-master-texture {
  position: absolute;
  inset: 0;
  min-height: 0;
  will-change: clip-path;
}

.p-sound.is-blind > .p-venue {
  z-index: 3;
}

.p-sound.is-blind > .p-sound-quality {
  z-index: 2;
}

.p-sound.is-blind > .p-master-texture {
  z-index: 1;
}

.p-sound.is-blind [data-p-blind-media],
.p-sound.is-blind [data-p-blind-frame],
.p-sound.is-blind [data-p-blind-text] {
  will-change: transform;
}

/* コピーの入りのグレーの面。写真の窓が広がりきったら面ごと上へずらす（ヘッダーの色の切り替えが面の位置で判定するため）。
   中の黒い文字はコピーと同じ位置に来るよう、.p-venue と同じ置き方にする */
.p-venue__paper {
  display: none;
}

.p-sound.is-blind .p-venue__paper {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background-color: #e4e4e5; /* メッセージ（.p-message）と同じグレー */
  will-change: transform;
}

.p-venue__paper-inner {
  position: absolute;
  inset: 0;
  display: grid;
  padding: 4rem 2rem;
  place-items: center;
  will-change: transform;
}

.p-venue__paper .p-venue__copy {
  color: #111;
}

/* 写真の窓：グレーの面（黒い文字）を下に置き、写真と白い文字をその上に重ねて、djm-a7.js が窓（clip-path）で切って見せる */
.p-sound.is-blind .p-venue__paper {
  z-index: 0;
}

.p-sound.is-blind .p-venue__bg,
.p-sound.is-blind .p-venue > .p-venue__copy {
  z-index: 1;
}

/* 下にグレーの面があるので、写真の下端を透かして溶かすとグレーが見えてしまう。透かさずに、暗い面のグラデーションで #212224 に溶かす
   （PC のデザインの溶け方：61.5%〜80.7%） */
.p-sound.is-blind .p-venue__bg {
  --p-mask-y: linear-gradient(#000, #000);
}

.p-sound.is-blind .p-venue__bg::after {
  background: linear-gradient(to bottom, rgba(33, 34, 36, 0.55) 61.5%, #212224 80.7%);
}

/* PC は下端を溶かさず、写真全体に一様な薄い暗い面（デザイン：#111 の 30%） */
@media screen and (min-width: 960px) {
  .p-sound.is-blind .p-venue__bg::after {
    background: rgba(17, 17, 17, 0.3);
  }
}

/* SP の Sound Quality・MASTER TEXTURE：文字の下に写真を続けて置き（デザイン SP 390×620）、2 つをまとめてブロックの上下の中央に置く。
   画面がデザインより高くても、文字と写真の間は空かない（余りは上下に分けて出る）。
   写真は薄くせずに重ね、上端を地の色に溶かす（Sound Quality は全体を 20% 暗くする） */
@media not all and (min-width: 960px) {
  .p-sound-quality,
  .p-master-texture {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center; /* 画面が低くて入りきらないときは上から置く（写真の下が切れる） */
    min-height: 62rem;
    padding: 4.8rem 2rem;
  }

  /* 写真は文字の下に、画面の幅いっぱいに置く。下端も地の色に溶かす（デザインはブロックの下端で切れるが、下に地が出るため） */
  .p-sound-quality__media,
  .p-master-texture__media {
    --p-mask-x: linear-gradient(#000, #000);
    --p-mask-y: linear-gradient(to bottom, #000 85%, transparent);
    position: relative;
    inset: auto;
    flex: none;
    height: auto;
    order: 1;
    margin-inline: -2rem;
  }

  /* デザイン：文字の下端は写真の上 123 に重なる（写真の上端はブロックの上から 87、文字の下端は 210） */
  .p-sound-quality__media {
    margin-top: -12.3rem;
  }

  /* デザイン：文字の下端は写真の上 23 に重なる */
  .p-master-texture__media {
    margin-top: -2.3rem;
  }

  /* 写真は並び順（order）で文字より後ろに描かれるので、文字を手前に出す */
  .p-master-texture__body {
    z-index: 1;
  }

  /* Sound Quality：写真は 390×533。画像の高さいっぱいを見せ、左右はデザインの切り抜きの位置で切る
     （デザイン：495×533 の枠を左に 35 はみ出して置き、その中央に画像を合わせている）。
     SP の写真は枠ごと動かすので、上下に大きく敷かない */
  .p-sound-quality__media {
    aspect-ratio: 390 / 533;
  }

  .p-sound-quality__media img {
    top: 0;
    height: 100%;
    object-position: 45.7% 50%;
  }

  /* 上 165 で地の色に溶かす（上端 100% → 72 で 70% → 0）。写真は暗くしない */
  .p-sound-quality__media::after {
    inset: 0;
    background: linear-gradient(to bottom, #212224, rgba(33, 34, 36, 0.7) 13.51%, rgba(33, 34, 36, 0) 30.96%);
  }

  /* MASTER TEXTURE：写真はデザインどおり 390×330（画像はこの範囲で書き出してある。上下に大きく敷かない。
     SP の写真は枠ごと動かすので、枠の中ではずれない）。上 80 で地の色に溶かす（100% → 40 で 60% → 0） */
  .p-master-texture__media {
    aspect-ratio: 390 / 330;
  }

  .p-master-texture__media img {
    top: 0;
    height: 100%;
  }

  .p-master-texture__media::after {
    background: linear-gradient(to bottom, #212224, rgba(33, 34, 36, 0.6) 12.12%, rgba(33, 34, 36, 0) 24.24%);
  }

  /* 画面に固定している間（.is-blind）は、2 つのブロックの文字を画面の上から同じ位置に置く（切り替わっても文字の位置が変わらない） */
  .p-sound.is-blind > .p-sound-quality,
  .p-sound.is-blind > .p-master-texture {
    justify-content: flex-start;
    padding-top: 8rem;
  }

  /* Sound Quality・MASTER TEXTURE の写真は、デザインどおりブロックの下端まで出す（MASTER TEXTURE は次の SonicLink に地の色を挟まずにつなぐ）。
     文字との間の余りは写真の上に空ける。下端で切り、溶かさない（2 つのブロックで写真の下端の位置をそろえる） */
  .p-sound.is-blind > .p-sound-quality,
  .p-sound.is-blind > .p-master-texture {
    padding-bottom: 0;
  }

  .p-sound.is-blind > .p-sound-quality .p-sound-quality__media,
  .p-sound.is-blind > .p-master-texture .p-master-texture__media {
    --p-mask-y: linear-gradient(#000, #000);
    margin-top: auto;
  }

  /* Sound Quality はデザインで文字が写真の上部（溶かした所）に大きく重なる（123）。低い画面でも重なりを保つよう、写真はブロックの下端に固定して置き、
     文字はその上に重ねる（下に余りを空けて写真を押し下げると、写真の下が切れる） */
  .p-sound.is-blind > .p-sound-quality .p-sound-quality__media {
    position: absolute;
    inset: auto 0 0;
    margin: 0;
  }

  /* SP のコピー（Every venue）：写真はブロックいっぱいに敷く（デザイン SP 390×620：写真は枠全体を覆う。上の溶かしはなし）。
     SP の画像（venue-sp.webp）は、デザインで画面に見えている幅（390）で、元画像の高さいっぱいを書き出してある。写真は視差で画面の高さの 8% 上へずれるので（BLIND_INTRO_SP.media）、
     下にその分を余らせて置き、ずれきったときに下端がブロックの下端にそろうようにする（高さが足りない画面は拡大して覆う）。
     写真は地の色で 30% 暗く（濃さ 70%）。暗さは写真そのもの（透明度）に付けるので、写真が視差で動いても一緒に動く。入れ物は地の色で塗る */
  .p-venue__bg,
  .p-sound.is-blind .p-venue__bg {
    --p-mask-y: linear-gradient(#000, #000);
    background-color: #212224;
  }

  .p-venue__bg img {
    top: auto;
    bottom: -8%; /* 視差で上へずれる分 */
    left: 0;
    width: 100%;
    height: max(178.1vw, 108%); /* 画像（1150×2048）を幅に合わせた高さ。足りない画面は 108% まで拡大する */
    object-fit: cover;
    opacity: 0.7;
  }

  .p-venue__bg::after,
  .p-sound.is-blind .p-venue__bg::after {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   明るい 2 ブロック（SonicLink → Features）の入れ物。画面いっぱい（左右の白い枠なし）
   -------------------------------------------------------------------------- */
.p-framed {
  color: #111;
  background-color: var(--p-color-paper);
}

/* --------------------------------------------------------------------------
   SonicLink：製品の画像は右からふわっと入り（data-p-reveal="right"）、後ろの輪が広がり続ける。視差（パララックス）は付けない
   - 数値はデザイン（PC 1404×780 ／ SP 374×830）。製品の画像はデザインで見えている範囲（右はブロックの外で切れる）
   - SP はロゴ → 見出し → 製品の画像 → 本文・ヘッドホンの順に縦に並べる（order）。PC は製品の画像を後ろに敷く
   -------------------------------------------------------------------------- */
.p-soniclink {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 2.4rem 2rem 4.8rem;
  background-color: #e4e4e5;
}

.p-soniclink__logo {
  width: 16.3rem; /* SP：幅 163 */
}

.p-soniclink__logo img,
.p-soniclink__product img,
.p-soniclink__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.p-soniclink__visual {
  position: relative;
  order: 1;
  height: max(22.3rem, 57.18vw); /* 390 幅で 223。広い画面（タブレットなど）では製品と一緒に大きくする */
  margin: 1.6rem -2rem 0 0;
}

/* SP：製品は幅 374 で画面の右端に付ける（390 幅で左 16。右は画面の外で切れる。390 より広い画面でも左へ寄らず右に置く）。ロゴの 21 下から。
   画像は背景（#e7e7e7 前後）ごと書き出されていて、地の #e4e4e5 との境目に四角が見えるので、縁を背景に溶かす（右は画面の外） */
.p-soniclink__product {
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: max(37.4rem, 95.9vw); /* 390 幅で 374 */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%), linear-gradient(transparent, #000 9%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%), linear-gradient(transparent, #000 9%, #000 88%, transparent);
  -webkit-mask-composite: source-in, source-over; /* 1 枚ずつ指定する（Safari 15.4 対策。上の写真の溶かし方と同じ） */
  mask-composite: intersect, add;
}

/* 電波のイメージの輪。中心から広がって消えるのを繰り返す（共通パーツではない自前の要素）。SP は製品と一緒に右端からの位置で置く */
.p-soniclink__waves {
  position: absolute;
  top: 45%;
  left: calc(100% - max(16.6rem, 42.56vw));
  width: 0;
  height: 0;
}

.p-soniclink__waves span {
  position: absolute;
  top: 0;
  left: 0;
  width: max(44rem, 112.8vw); /* 390 幅で 440。製品と一緒に大きくする */
  height: max(44rem, 112.8vw);
  border: 1px solid rgba(95, 190, 196, 0.45);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: p-soniclink-wave 6s linear infinite;
}

.p-soniclink__waves span:nth-child(2) {
  animation-delay: 1.5s;
}

.p-soniclink__waves span:nth-child(3) {
  animation-delay: 3s;
}

.p-soniclink__waves span:nth-child(4) {
  animation-delay: 4.5s;
}

@keyframes p-soniclink-wave {
  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@media not all {
  .p-soniclink__waves span {
    animation: none;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  .p-soniclink__waves span:nth-child(2) {
    transform: translate(-50%, -50%) scale(0.75);
  }

  .p-soniclink__waves span:nth-child(3),
  .p-soniclink__waves span:nth-child(4) {
    display: none;
  }
}

.p-soniclink__body {
  position: relative;
  order: 2;
  display: grid;
  gap: 1.6rem;
  min-width: 0;
  margin-top: 1.6rem;
}

.p-soniclink__heading {
  position: relative;
  margin-top: 4rem;
  font-family: var(--p-font-display);
  font-weight: var(--fw-bold);
  font-size: 3rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.p-soniclink__text {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.p-soniclink__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 画像の元の幅で列が広がらないように */
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.p-soniclink__item {
  display: grid;
  gap: 1rem;
  justify-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .p-soniclink__item:hover {
    opacity: 0.7;
  }
}

.p-soniclink__thumb {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 148 / 112;
  place-items: center;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 0.4rem;
}

/* 枠を四隅だけにする（デザイン：角から 16 の長さ）。枠線は疑似要素に移し、角の 4 か所だけ見せる */
.p-soniclink__thumb.is-corner {
  border-color: transparent;
}

.p-soniclink__thumb.is-corner::before {
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 0.4rem;
  content: "";
  -webkit-mask:
    linear-gradient(#000, #000) top left / 1.6rem 1.6rem no-repeat,
    linear-gradient(#000, #000) top right / 1.6rem 1.6rem no-repeat,
    linear-gradient(#000, #000) bottom left / 1.6rem 1.6rem no-repeat,
    linear-gradient(#000, #000) bottom right / 1.6rem 1.6rem no-repeat;
  mask:
    linear-gradient(#000, #000) top left / 1.6rem 1.6rem no-repeat,
    linear-gradient(#000, #000) top right / 1.6rem 1.6rem no-repeat,
    linear-gradient(#000, #000) bottom left / 1.6rem 1.6rem no-repeat,
    linear-gradient(#000, #000) bottom right / 1.6rem 1.6rem no-repeat;
}

/* 高さでそろえる（デザイン：枠 112 に対してヘッドホン 97〜103）。幅は機種ごとの画像の縦横比で決まる。
   画像の元の大きさで枠が広がらないように、枠の中に重ねて置く */
.p-soniclink__thumb img {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: 90%;
  height: 90%;
  margin: auto;
  object-fit: contain;
}

.p-soniclink__name {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

@media screen and (min-width: 960px) {
  /* ロゴ・見出し・本文の左端を 120 にそろえる。ロゴと本文をひとまとめにして上下中央に置き、上下の余白をそろえる
     （ロゴの幅はデザインの 197。ロゴと見出しの間はデザインの 72） */
  .p-soniclink {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    /* 上下の余白は最低 9rem。幅の広い画面では文字が大きくなる（rem が画面の幅に合わせて大きくなる）ので、低い画面でも余白が詰まりすぎないように、
       収まらないときはセクションを 1 画面より高くする。左端は Sound Quality・Master Texture と同じ */
    padding: 9rem 0 9rem min(12rem, 8.33vw);
  }

  .p-soniclink__logo {
    position: relative; /* 後ろの製品の画像（絶対配置）より手前に出す */
    width: min(19.7rem, 13.68vw);
    margin-bottom: 7.2rem;
  }

  .p-soniclink__visual {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
  }

  /* 製品と輪は 1440 より狭い PC で画面の幅に合わせて縮める。ただし製品の左端は 50rem より左に来ないようにする
     （左の本文・ヘッドホンに重ならないように。その分、右がデザインより多めに切れる） */
  .p-soniclink {
    --p-sl-left: min(60.4rem, max(41.94vw, 50rem)); /* 左右の白い枠（18）が無くなった分、右へ */
    /* 画像は左端を本文から一定の間（1440 幅と同じ）に置いたまま、右端を画面の右端の外まで届かせる（はみ出した分はセクションの端で切れる）。
       右端まで届かせるために広げるのは、画像の高さが画面の高さになるまで（幅 172svh。画像の縦横比 1227×714）。
       横長の画面で大きくなりすぎて、上下の余白が無くならないように（届かない分は右端の溶かしでつなぐ）。
       元の大きさ（デザインの 818・1440 幅で 56.81vw）より小さくはしない */
    --p-sl-w: max(min(81.8rem, 56.81vw), min(100vw - var(--p-sl-left) + 4rem, 172svh));
    --p-sl-top: calc(50% - var(--p-sl-w) * 0.291); /* 製品の画像（1227×714）を上下中央に */
  }

  /* PC は右端も溶かす（デザイン：画像の幅の 78% から溶け始め、はじめは早く、終わりはゆっくり薄くなって右端で消える）。製品はぼかさない */
  .p-soniclink__product {
    top: var(--p-sl-top);
    left: var(--p-sl-left);
    width: var(--p-sl-w); /* デザインの製品の画像（1229 幅）のうち、ブロック内で見えている部分 */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 78%, rgba(0, 0, 0, 0.88) 83%, rgba(0, 0, 0, 0.64) 88%, rgba(0, 0, 0, 0.4) 92%, rgba(0, 0, 0, 0.2) 95.5%, rgba(0, 0, 0, 0.07) 98%, transparent), linear-gradient(transparent, #000 9%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 78%, rgba(0, 0, 0, 0.88) 83%, rgba(0, 0, 0, 0.64) 88%, rgba(0, 0, 0, 0.4) 92%, rgba(0, 0, 0, 0.2) 95.5%, rgba(0, 0, 0, 0.07) 98%, transparent), linear-gradient(transparent, #000 9%, #000 88%, transparent);
  }

  .p-soniclink__waves {
    top: calc(var(--p-sl-top) + var(--p-sl-w) * 0.253); /* デザイン：34rem（製品の上端から 20.7rem） */
    left: calc(var(--p-sl-left) + var(--p-sl-w) * 0.335); /* デザイン：86rem（製品の左端から 27.4rem） */
  }

  .p-soniclink__waves span {
    width: calc(var(--p-sl-w) * 0.978); /* デザイン：80rem */
    height: calc(var(--p-sl-w) * 0.978);
  }

  .p-soniclink__body,
  .p-soniclink__heading {
    max-width: 39.9rem;
  }

  .p-soniclink__heading {
    margin-top: 0;
    font-size: max(2.8rem, min(3.9rem, 2.71vw)); /* 39px。1440 より狭い PC は縮める */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .p-soniclink__text {
    font-size: 1.5rem;
    letter-spacing: 0.01em;
  }

  .p-soniclink__list {
    grid-template-columns: repeat(3, min(14.8rem, 10.28vw));
    gap: min(2rem, 1.39vw);
    margin-top: 3.2rem;
  }

  .p-soniclink__name {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   Features：PC は左の一覧（アコーディオン）で選ぶ／SP は上のタブ列か前へ／次へで選ぶ。画像は選んだ機能のものに切り替わる
   - 数値はデザイン（PC 1440×720 ／ SP 390×749）
   - 画像は機能ごとに 2 枚の組（.p-features__set）：製品のクローズアップ（.is-product：影つき）と Lifestyle 画像（.is-full）。2 枚とも同じ大きさ（670×620）。
     選んでいる機能の組の中で、数秒ごとにフェードで入れ替わる（djm-a7.js が .is-current を付け替える）
   -------------------------------------------------------------------------- */
/* 1 画面で上下中央。中身が画面より高い端末（iPhone SE など）では普通にスクロールする */
.p-features {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 2.4rem 2rem;
  /* PC の画像は画面の右端まで置く。影が画面の外にはみ出して横スクロールが出ないよう、セクションの端で切る（clip が使えない古いブラウザは hidden） */
  overflow: hidden;
  overflow: clip;
  background-color: #e4e4e5;
}

.p-features__title {
  font-family: var(--p-font-display);
  font-weight: var(--fw-bold);
  font-size: 3rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.p-features__body {
  display: grid;
  gap: 1.6rem;
  margin-top: 1.6rem;
}

/* SP のタブ列：白い帯の中に機能の短い名前を並べ、横にスクロールする。右端の ＞ は押すと少し先へ、左端の ＜ は少し前へ送る */
.p-features__chips {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  min-width: 0;
  padding: 0.4rem 1.2rem;
  background-color: #fff;
  border-radius: 10rem;
}

/* 左右に 1.2rem の余白を取り、タブはその内側で切る（送っている途中も、白い帯の丸い端からはみ出ない）。
   切り口はタブと同じ丸みにする（途中で切れた黒いタブが、四角く切れて見えないように） */
.p-features__chips-scroller {
  position: relative; /* タブの位置（offsetLeft）をこの中で測る */
  display: flex;
  flex: 1;
  gap: 1.2rem;
  min-width: 0;
  padding-inline: 1.2rem;
  clip-path: inset(0 1.2rem round 1.8rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* 指で送って止めたときも、タブの左端が左の余白のすぐ内側にそろう（途中で切れたタブが端に残らない） */
  scroll-padding-inline: 1.2rem;
  scroll-snap-type: x mandatory;
}

/* 右端まで送ったときの空き（幅は djm-a7.js が入れる） */
.p-features__chips-scroller::after {
  flex: 0 0 var(--p-chips-tail, 0);
  content: "";
}

.p-features__chips-scroller::-webkit-scrollbar {
  display: none;
}

.p-features__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 3.6rem;
  padding: 0 1.2rem;
  color: #111;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background-color: #fff;
  border: 0;
  border-radius: 10rem;
  cursor: pointer;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.p-features__chip.is-current {
  color: #fff;
  background-color: #111;
}

.p-features__chips-back,
.p-features__chips-more {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 3.6rem;
  padding: 0;
  color: #111;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* ＜ ＞ はキーボードでは選べない（タブで選ぶ）ので、押したあとのフォーカスの枠は出さない */
.p-features__chips-back:focus,
.p-features__chips-more:focus {
  outline: none;
}

.p-features__chips-back svg,
.p-features__chips-more svg {
  width: 0.9rem;
  height: 1.4rem;
}

/* 左端・右端までスクロールしたら ＜・＞ は薄くする（djm-a7.js が .is-start ／ .is-end を付ける） */
.p-features__chips.is-start .p-features__chips-back,
.p-features__chips.is-end .p-features__chips-more {
  opacity: 0.25;
  pointer-events: none;
}

.p-features__media {
  position: relative;
  display: grid; /* 機能ごとの画像を重ねる */
  /* 縦横比を決めた枠は、最小の幅が中の画像の元の高さから計算されて画面より広がる（SP で一覧ごとはみ出す）ので、0 にする */
  min-width: 0;
  aspect-ratio: 670 / 620;
}

/* 機能ごとの画像の組を同じ場所に重ね、選んだ機能の組（.p-features__set.is-current）の、今の 1 枚（.p-features__shot.is-current）だけを見せる。
   入れ替わるときは重ねて薄れ、新しい画像は少し大きい状態から収まる（クローズアップに寄る感じ） */
.p-features__set {
  display: grid;
  grid-area: 1 / 1;
}

.p-features__shot {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  border-radius: 0.4rem; /* 前のデザインの角丸（4px）に戻す */
  opacity: 0;
  transition: opacity 1.2s ease-in-out; /* 前半で一気に変わらないよう、ゆっくり始めてゆっくり終える */
}

.p-features__set.is-current .p-features__shot.is-current {
  opacity: 1;
}

.p-features__img {
  position: absolute; /* 画像の元の高さで枠が伸びないように（使用シーンの写真は縦長） */
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.p-features__set.is-current .p-features__shot.is-current .p-features__img {
  transform: none;
}

/* 製品のクローズアップだけ影を付ける（デザイン：x8 y8 ぼかし 32・黒 25%） */
.p-features__shot.is-product {
  box-shadow: 0.8rem 0.8rem 3.2rem rgba(0, 0, 0, 0.25);
}

.p-features__panel {
  padding: 1.6rem 2rem;
  color: #f1f1f1;
  background-color: #1a1a1a;
  border-radius: 1.6rem;
}

/* SP は選んだ 1 件だけ見せる。全項目を同じ場所に重ね、見えない項目も高さだけは持たせる
   （1 件ずつ消すと説明の長さでパネルの高さが変わり、下の前へ／次へが上下に動く） */
.p-features__list {
  display: grid;
}

.p-features__item {
  grid-area: 1 / 1;
}

.p-features__item:not(.is-current) {
  visibility: hidden;
}

.p-features__item .p-features__desc[hidden] {
  display: block; /* SP は閉じた項目の説明も高さに数える（見えないのは上の visibility） */
}

.p-features__toggle {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.p-features__label {
  flex: 1;
  font-weight: var(--fw-bold);
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.p-features__icon {
  display: none;
}

.p-features__desc-text {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 前へ／次へは出さない（機能はタブで選ぶ） */
.p-features__nav {
  display: none;
}

.p-features__arrow {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  place-items: center;
  background: none;
  border: 1px solid #f1f1f1;
  border-radius: 50%;
  cursor: pointer;
}

.p-features__arrow svg {
  width: 100%;
  height: 100%;
  fill: #f1f1f1;
}

@media screen and (min-width: 960px) {
  /* 数値はデザインの 1440 幅のもの。PC の 1rem は 1440 幅より狭くても 10px のまま（共通パーツの決まり）なので、
     rem のままだと 1440 より狭い PC（1024〜1280 など）で横にはみ出す。1440 より狭いときは画面の幅に合わせて縮める（min(rem, vw)） */
  /* 1440 より広い画面では、1440 幅のレイアウトを画面の中央に置く（--p-wide-gap は左右に分ける余り） */
  /* デザインのセクション（高さ 720 ＝ 72rem）を画面の上下中央に置いたつもりで並べる。見出しはその上端から 30、一覧は 160、画像は上下中央。
     画面がデザインより高くても、見出しと画像の位置の関係はデザインと同じになる（見出しだけが画面の上に寄らない） */
  .p-features {
    --p-wide-gap: max(0px, (100vw - 144rem) / 2);
    justify-content: flex-start;
    padding: max(3rem, 50svh - 33rem) 0 6rem calc(min(12rem, 8.33vw) + var(--p-wide-gap)); /* 上：(画面の高さ − 72rem) ÷ 2 ＋ 3rem。左：見出しと一覧の左端 120 */
  }

  .p-features__title {
    font-size: 5rem;
    letter-spacing: 0.02em;
  }

  .p-features__body {
    display: block;
  }

  .p-features__chips {
    display: none;
  }

  /* 画像の場所はセクションの上端から下端まで・右端まで（幅 670）。画像は 2 枚とも 670×620 で、右端に付けて上下中央に置く */
  .p-features__media {
    position: absolute;
    top: 0;
    right: var(--p-wide-gap);
    bottom: 0;
    display: block;
    width: min(67rem, 46.53vw);
    aspect-ratio: auto;
  }

  .p-features__set {
    position: absolute;
    inset: 0;
    display: block;
  }

  .p-features__shot {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(100%, (100svh - 8rem) * 670 / 620);
    aspect-ratio: 670 / 620;
    border-radius: 0.4rem min(0.4rem, var(--p-wide-gap)) min(0.4rem, var(--p-wide-gap)) 0.4rem; /* 右端は画面の端に付くので角を丸めない（中央に置いて端から離れたら丸める） */
    transform: translateY(-50%);
  }

  .p-features__panel {
    width: min(50rem, 34.72vw);
    padding: 0;
    color: #383838;
    background: none;
    border-radius: 0;
  }

  .p-features__body {
    margin-top: 6.5rem; /* デザイン：見出し（高さ 65）と一覧の間 */
  }

  .p-features__list {
    gap: 1.2rem;
  }

  /* PC は一覧を縦に並べる（SP の「同じ場所に重ねて、選んだ 1 件だけ見せる」を打ち消す。閉じた項目の説明は畳む）。
     閉じた項目は線で囲むだけ、開いている項目は黒い面（デザイン） */
  .p-features__item,
  .p-features__item:not(.is-current) {
    grid-area: auto;
    visibility: visible;
    display: block;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(56, 56, 56, 0.8);
    border-radius: 0.4rem;
    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      border-color 0.3s ease;
  }

  .p-features__item .p-features__desc[hidden] {
    display: none;
  }

  .p-features__item.is-current {
    padding-block: 1.7rem;
    color: #f1f1f1;
    background-color: #1a1a1a;
    border-color: #1a1a1a;
  }

  .p-features__label {
    font-size: 1.4rem;
  }

  .p-features__item.is-current .p-features__label {
    font-size: 1.6rem;
  }

  /* ＋ 印（開いている項目では出さない） */
  .p-features__icon {
    position: relative;
    display: block;
    flex: 0 0 1.6rem;
    height: 1.6rem;
  }

  .p-features__icon::before,
  .p-features__icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6rem;
    height: 0.2rem;
    background-color: #838383;
    transform: translate(-50%, -50%);
    content: "";
  }

  .p-features__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .p-features__item.is-current .p-features__icon {
    display: none;
  }

  .p-features__nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   lifestyle：使用シーンの画像が右→左へゆっくり流れ続ける（画像スライダーのみ。ロゴと製品は置かない）
   - 中身を 1 回複製して -50% でループ（複製は djm-a7.js）。すき間は margin-right で持ち、ループのつなぎ目がずれないようにする
   - 数値はデザイン（PC：高さ 390・幅 658／294・間隔 24・上下 140 ／ SP：高さ 240・幅 410／183・間隔 23・上下 80）
   -------------------------------------------------------------------------- */
.p-lifestyle {
  padding: 8rem 0; /* 高さは画面に合わせず、デザインどおり（上下の余白＋画像の高さ） */
  overflow: hidden;
  background-color: #cfcfd1; /* ページの地のグレー（#e4e4e5）より少し濃く、上の Features との境目が分かる色 */
}

.p-lifestyle__track {
  display: flex;
  width: max-content;
  animation: p-marquee var(--p-marquee-duration, 84s) linear infinite; /* 8 枚（PC で幅の合計 約 4730）を 1 秒に 約 56 ずつ流す */
}

.p-lifestyle__scene {
  flex: 0 0 auto;
  height: 24rem;
  margin-right: 2.3rem;
  overflow: hidden;
  border-radius: 0.4rem; /* 前のデザインの角丸（4px）に戻す。PC・SP 共通 */
}

.p-lifestyle__scene.is-wide {
  width: 41rem;
}

.p-lifestyle__scene.is-narrow {
  width: 18.3rem;
}

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

@keyframes p-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* 動きを減らす設定では流さず、横にスワイプ（スクロール）して見せる。流すための複製（aria-hidden）は隠す */
@media not all {
  .p-lifestyle__marquee {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--p-frame); /* 吸着しても左右の余白を残す */
    overscroll-behavior-x: contain;
  }

  .p-lifestyle__track {
    padding-inline: var(--p-frame);
    animation: none;
  }

  .p-lifestyle__track > [aria-hidden="true"] {
    display: none;
  }

  .p-lifestyle__scene {
    scroll-snap-align: start;
  }
}

@media screen and (min-width: 960px) {
  /* 1440 より狭い PC は画面の幅に合わせて縮める（min(rem, vw)） */
  .p-lifestyle {
    padding: min(14rem, 9.72vw) 0;
  }

  .p-lifestyle__scene {
    height: min(39rem, 27.08vw);
    margin-right: min(2.4rem, 1.67vw);
  }

  .p-lifestyle__scene.is-wide {
    width: min(65.8rem, 45.69vw);
  }

  .p-lifestyle__scene.is-narrow {
    width: min(29.4rem, 20.42vw);
  }
}


/* --------------------------------------------------------------------------
   比較表（AT-Comparison）。中身は tools/build-comparison.py が生成、タブの切り替えは djm-a7.js（initComparison）
   - 当該製品（左）と比べる機種（右）の 2 列。項目名は 2 列の上にまたがって置き、値は列ごとの罫線の下に中央揃え
   - 作りは CDJ-1500X の Spec comparison に倣った（項目名・罫線・チェックの印・View more）
   -------------------------------------------------------------------------- */
.p-comparison {
  padding: 5.6rem var(--p-frame) 6.4rem;
  color: var(--p-color-text);
  background-color: var(--color-gray); /* #f8f8f8 */
}

.p-comparison__inner {
  max-width: 104rem;
  padding-inline: 0.8rem; /* SP：フレーム 0.8rem と合わせて 16（SP デザイン）。PC は 0 */
  margin-inline: auto;
}

/* タブ（比べる機種）。両端が丸いピル型を 2 つ並べる */
.p-comparison__tabs {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
}

.p-comparison__tab {
  width: 17.9rem;
  min-height: 4rem;
  padding: 0.4rem 1rem;
  font-family: inherit;
  font-weight: var(--fw-bold);
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--p-color-text);
  background-color: transparent;
  border: 1px solid var(--p-color-text);
  cursor: pointer;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.p-comparison__tab:first-child {
  border-radius: 10rem 0 0 10rem;
}

.p-comparison__tab:last-child {
  border-radius: 0 10rem 10rem 0;
}

.p-comparison__tab.is-current {
  color: var(--color-white);
  background-color: var(--p-color-text);
  cursor: default;
}

@media (any-hover: hover) {
  .p-comparison__tab:not(.is-current):hover {
    background-color: rgba(17, 17, 17, 0.06);
  }
}

.p-comparison__tab:focus-visible,
.p-comparison__panel:focus-visible {
  outline: 2px solid var(--p-color-text);
  outline-offset: 0.4rem;
}

.p-comparison__panel {
  margin-top: 3.2rem;
}

/* 機種の画像と名前。下の値の 2 列と同じ格子にして、画像の中心を値の列の中心に揃える。
   画像は下端をそろえ、高さは DJM-A7 の高さ（--p-model-h）に機種ごとの倍率（--p-model-scale。tools/build-comparison.py）を掛ける */
.p-comparison__models,
.p-comparison__names,
.p-comparison__item {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.6rem;
  padding-inline: 0.8rem;
}

.p-comparison__model {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.p-comparison__model-image {
  --p-model-h: 14.7rem;
  height: calc(var(--p-model-h) * var(--p-model-scale, 1));
}

.p-comparison__model-image[data-p-placeholder] {
  min-height: 0;
  aspect-ratio: 284 / 333;
}

.p-comparison__model-image img {
  width: auto;
  height: 100%;
}

/* 機種名の行：スクロールしても固定ヘッダーの下に残る（参考は XDJ-AN の比較表）。
   行全体を不透明にし、残っている間（.is-stuck・djm-a7.js）はヘッダーの裏も同じ色で塗る（共通パーツのヘッダーは背景が透明なので、表の文字が透けないように）。
   --p-header-h はヘッダーの実際の高さ（djm-a7.js が入れる） */
.p-comparison__names {
  position: sticky;
  top: var(--p-header-h, 5.5rem);
  z-index: 2;
  padding-block: 1.2rem 0.8rem;
  background-color: var(--color-gray);
}

.p-comparison__names::before {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: var(--p-header-h, 5.5rem);
  background-color: var(--color-gray);
  opacity: 0;
  pointer-events: none;
  content: "";
}

.p-comparison__names.is-stuck::before {
  opacity: 1;
}

.p-comparison__names.is-stuck {
  box-shadow: 0 1px 0 var(--p-color-line);
}

.p-comparison__model-name {
  font-weight: var(--fw-medium);
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}

/* 項目 */
.p-comparison__item {
  row-gap: 1.2rem;
  padding-block: 1.6rem;
}

.p-comparison__item-title {
  grid-column: 1 / -1;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.p-comparison__value {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
  padding-top: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--p-color-line);
}

.p-comparison__check {
  display: block;
  width: 2.8rem;
  height: 2.8rem;
}

/* 全機種の比較ページへ */
.p-comparison__more {
  margin-top: 4rem;
  text-align: center;
}

.p-comparison__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23rem;
  min-height: 4.8rem;
  padding: 0.4rem 1.6rem;
  font-weight: var(--fw-light); /* Where to buy・HDJ-F9 と同じ */
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-white);
  background-color: #383838;
  border-radius: 6rem; /* Watch video と同じ角丸 */
  transition: opacity 0.4s ease;
}

@media (any-hover: hover) {
  .p-comparison__more-link:hover {
    opacity: 0.8;
  }
}

.p-comparison__more-link:focus-visible {
  outline: 2px solid var(--p-color-text);
  outline-offset: 0.4rem;
}

@media screen and (min-width: 960px) {
  .p-comparison {
    padding-block: 12rem 8rem; /* 上はデザインの 120 */
  }

  /* 比較表・Specifications・Support・FAQ は見出しと中身の左右をそろえる。
     Specifications・Support（共通パーツ .at-cmn-bottom）はテンプレートの余白（140 ／ 1440。画面の幅に比例）のままにし、
     比較表と FAQ もそれに合わせる。中身の幅は 1160 ／ 1440 ＝ 80.56svw */
  .p-comparison__inner {
    max-width: 80.5555555556svw;
    padding-inline: 0;
  }

  .p-comparison__tab {
    width: 38rem;
    min-height: 4.8rem;
    font-size: 1.4rem;
  }

  .p-comparison__panel {
    margin-top: 3.2rem;
  }

  .p-comparison__models,
  .p-comparison__names,
  .p-comparison__item {
    column-gap: 3.2rem;
    padding-inline: 1.6rem;
  }

  .p-comparison__models {
    padding-top: 1.2rem; /* デザイン：枠 410 のうち画像 333・間 16・名前 36（名前は下の固定の行） */
  }

  .p-comparison__names {
    padding-block: 1.6rem 1rem;
  }

  .p-comparison__model-image {
    --p-model-h: 33.4rem;
  }

  .p-comparison__model-name {
    font-size: 2.4rem;
  }

  .p-comparison__item {
    row-gap: 1.6rem;
    padding-block: 2rem;
  }

  .p-comparison__item-title {
    font-size: 1.8rem;
  }

  .p-comparison__value {
    gap: 2rem;
    padding-top: 2rem;
    font-size: 1.6rem;
  }

  .p-comparison__more {
    margin-top: 4.8rem;
  }

  .p-comparison__more-link {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   FAQs（AT-Faq）。開閉は共通パーツのアコーディオン（.is-open は at-cmn.js が付け外しする）
   - ＋の印は質問の左。開くと縦棒が寝て − になる
   -------------------------------------------------------------------------- */
.p-faq {
  padding: 4.8rem var(--p-frame);
  color: var(--p-color-text);
  background-color: var(--color-white);
}

.p-faq__inner {
  max-width: 116rem;
  padding-inline: 0.8rem; /* SP：フレーム 0.8rem と合わせて 16。PC は 0 */
  margin-inline: auto;
}

.p-faq__list {
  margin-top: 3.2rem;
}

.p-faq__item {
  border-bottom: 1px solid var(--p-color-line);
}

.p-faq__summary {
  position: relative;
  display: block;
  padding: 2rem 0 2rem 3.6rem;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
}

.p-faq__summary::-webkit-details-marker {
  display: none;
}

.p-faq__icon {
  position: absolute;
  top: 50%;
  left: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  transform: translateY(-50%);
}

.p-faq__icon::before,
.p-faq__icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.2rem;
  margin-top: -0.1rem;
  background-color: #5f5f5f;
  transition: transform 0.4s ease;
  content: "";
}

.p-faq__icon::after {
  transform: rotate(90deg);
}

.p-faq__item.is-open .p-faq__icon::after {
  transform: rotate(0);
}

/* WAAPI の高さアニメーション中に中身がはみ出さないために必須 */
.p-faq__content {
  overflow: hidden;
}

.p-faq__answer {
  padding: 0 0 2rem 3.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.7);
}

@media screen and (min-width: 960px) {
  .p-faq {
    padding-block: 8rem;
  }

  .p-faq__inner {
    max-width: 80.5555555556svw; /* 比較表と同じ */
    padding-inline: 0;
  }

  .p-faq__list {
    margin-top: 4rem;
  }

  .p-faq__summary {
    font-size: 1.6rem;
    letter-spacing: 0.03em;
  }

  .p-faq__answer {
    font-size: 1.5rem;
  }
}