/* =========================================================
   PIXEL STUDIO コンセプトページ
   - 土台は top-scroll.css（色・書体・見出し・ボタン・1文字ずつの見出し）
   - このファイルはコンセプトページ固有の部分だけ
   ========================================================= */

/* 背景の光：このページはスクロール連動させず、右上に固定でにじませる */
.ps-cp .ps-ambient {
  --ax: 78%;
  --ay: 18%;
  --ac: rgba(0, 240, 255, 0.12);
  --as: 60vmax;
}

.ps-cp section { position: relative; }

.cp-head { max-width: 40em; }
.cp-head .ps-lead { margin-top: 20px; }

/* ---------- 1. 冒頭 ---------- */
.cp-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: clamp(140px, 16vw, 200px) 0 clamp(80px, 10vw, 120px);
}
.cp-hero .ps-wrap { width: 100%; }

/* 上：見出し（横幅いっぱい）／下段の左：本文・数字、右：LEDの切り抜き画像（画面の右端からはみ出す） */
.cp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas:
    "label  label"
    "title  title"
    "lead   visual"
    "specs  visual";
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.cp-hero__grid.is-text-only { grid-template-columns: 1fr; grid-template-areas: "label" "title" "lead" "specs"; }
.cp-label         { grid-area: label; }
.cp-title         { grid-area: title; }
.cp-hero__lead    { grid-area: lead; }
.cp-hero__specs   { grid-area: specs; }
.cp-hero__visual  { grid-area: visual; }

.cp-title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;                                  /* 画像を上に寄せても、見出しが手前に来るように */
}
.cp-hero__lead { max-width: 36em; margin-top: 32px; }
/* ページ名のラベル（下層ページの見出しラベルとそろえる） */
.cp-label {
  margin: 0 0 18px;
  font-family: var(--ps-font-num);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ps-accent);
}
.cp-label span {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--ps-line);
  font-family: var(--ps-font-jp, inherit);
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--ps-muted);
}
.cp-hero__specs { margin-top: 56px; }

.cp-hero__visual {
  --lit: 1;                                    /* 0＝消灯、1＝点灯（JSが操作。JSなしでは点灯したまま） */
  position: relative;
  isolation: isolate;
  align-self: start;
  /* 上：見出しの2行目の高さまで引き上げ、1画面目で画像の下端まで見えるようにする */
  margin: calc(-1 * clamp(40px, 6vw, 110px)) 0 0;
  /* 右端：画面の端で切れないよう、コンテンツの端まで少しだけ伸ばす（画面の端との間に余白を残す） */
  margin-right: calc(-1 * ((100vw - min(100vw, var(--ps-wrap))) / 2) * 0.4);
  /* 浮遊感：ゆっくり上下しながら、わずかに傾く */
  animation: cpFloat 7s ease-in-out infinite;
  will-change: transform;                      /* 動かす部分をGPUに任せ、毎フレームの描き直しを防ぐ */
  backface-visibility: hidden;
}
@keyframes cpFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(-0.6deg); }
}
/* 浮いて見えるよう、画像の下に落ちる影（画像が上がると影が小さく薄くなる） */
.cp-hero__visual::after {
  content: "";
  position: absolute;
  left: 18%; right: 8%;
  bottom: -26px;
  height: 22px;
  /* ぼかしフィルターは動かすと重いので使わず、グラデーションだけでぼかす */
  background: radial-gradient(closest-side, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.06) 60%, transparent);
  animation: cpFloatShadow 7s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: -1;
}
@keyframes cpFloatShadow {
  0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.9; }
  50%      { transform: translateY(14px) scaleX(0.86); opacity: 0.55; }
}
/* スマホ：傾きをなくして上下だけにする（傾けると画像の描き直しが起き、動きががたつくため） */
@keyframes cpFloatSp {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
@keyframes cpFloatShadowSp {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0.9; }
  50%      { transform: translate3d(0, 10px, 0) scaleX(0.88); opacity: 0.55; }
}
@media (max-width: 767px) {
  .cp-hero__visual { animation-name: cpFloatSp; }
  .cp-hero__visual::after { animation-name: cpFloatShadowSp; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-hero__visual, .cp-hero__visual::after { animation: none; }
}
/* 点灯したときに周りににじむシアンの光 */
.cp-hero__visual::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background: radial-gradient(closest-side, rgba(0, 240, 255, 0.38), rgba(0, 240, 255, 0.08) 55%, transparent 80%);
  opacity: var(--glow, 1);
  transform: scale(calc(0.85 + var(--glow, 1) * 0.15));
  pointer-events: none;
  z-index: -1;
}
/* 点灯の演出用：画像の上に、背景と同じ色のブロックを並べて覆う（JSが作り、1枚ずつ消していく） */
.cp-hero__tiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  pointer-events: none;
  /* 切り抜き画像の形だけを覆う（透明な部分に黒い四角が出ないように）。--mask はJSが画像のURLを入れる */
  -webkit-mask: var(--mask, none) right center / contain no-repeat;
          mask: var(--mask, none) right center / contain no-repeat;
}
.cp-hero__tiles i { background: var(--ps-bg); }
.cp-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 50vh;                            /* 1画面に収まり、画面の右端で切れない大きさ */
  object-fit: contain;
  object-position: right center;
  filter: brightness(calc(0.06 + var(--lit) * 0.94)) saturate(var(--lit));
  will-change: filter, transform;
}

/* ---------- 2. 5面LEDの仕様 ---------- */
.cp-led { padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 72px); }   /* 下は詰める（次の「スタジオの間取り」との間） */
.cp-led__body {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* 展開図｜画像・動画 */
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.cp-led__body.is-net-only { grid-template-columns: minmax(0, 720px); }

/* 展開図：左面2.4m・正面4.8m・右面2.4m ＝ 1：2：1、高さはすべて2.4m ＝ 全体 4：3 */
/* 展開図の枠：スクロールで「箱 → 展開図」に開く立体表示のための奥行き */
.cp-net-wrap { min-width: 0; perspective: 1400px; }
.cp-net__note { margin: 14px 0 0; font-size: 12px; color: var(--ps-muted); text-align: center; }
.cp-net {
  --fold: 0;   /* 0＝展開図、1＝箱（JSがスクロールに合わせて 1 → 0 に動かす） */
  --turn: 0;   /* 0＝真正面、1＝斜めから箱の中をのぞく */
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--turn) * -14deg))
    rotateY(calc(var(--turn) * 32deg))
    scale(calc(1 - var(--turn) * 0.08));
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 4 / 3;
  width: 100%;
}
.cp-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--ps-accent);
  margin: -0.5px;
  background: rgba(0, 240, 255, 0.04);
  text-align: center;
  min-width: 0;
}
.cp-face--ceiling { grid-column: 2; grid-row: 1; transform-origin: 50% 100%; transform: rotateX(calc(var(--fold) * -90deg)); }
.cp-face--left    { grid-column: 1; grid-row: 2; transform-origin: 100% 50%; transform: rotateY(calc(var(--fold) * 90deg)); }
.cp-face--front   { grid-column: 2; grid-row: 2; background: rgba(0, 240, 255, 0.12); }
.cp-face--right   { grid-column: 3; grid-row: 2; transform-origin: 0% 50%; transform: rotateY(calc(var(--fold) * -90deg)); }
.cp-face--floor   { grid-column: 2; grid-row: 3; transform-origin: 50% 0%; transform: rotateX(calc(var(--fold) * 90deg)); }
.cp-face { backface-visibility: visible; }
/* 箱の状態では、面の数値を薄くして形を見せる */
.cp-face > span { opacity: calc(1 - var(--fold) * 0.7); }

.cp-face__name { font-size: 14px; letter-spacing: 0.12em; }
.cp-face__size {
  font-family: var(--ps-font-num);
  font-weight: 300;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.2;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
.cp-face__size small { font-size: 0.6em; margin-left: 3px; color: var(--ps-muted); }
.cp-face__size > span { white-space: nowrap; }
/* 左右の面は幅が半分なので、「2,400 ×」「2,400mm」の2行に折り返す */
.cp-face--left .cp-face__size,
.cp-face--right .cp-face__size { white-space: normal; }
.cp-face--left .cp-face__size > span,
.cp-face--right .cp-face__size > span { display: block; }
.cp-face__px {
  font-family: var(--ps-font-num);
  font-size: 12px;
  color: var(--ps-muted);
  white-space: nowrap;
}

/* クリックできる面（画像・動画が登録されている面） */
button.cp-face {
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color .25s ease;
}
button.cp-face:hover { background: rgba(0, 240, 255, 0.14); }
button.cp-face[aria-pressed="true"] {
  background: rgba(0, 240, 255, 0.22);
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 2px var(--ps-accent);
}
button.cp-face:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* 登録がある面があるときは、正面の常時ハイライトをやめ、選んだ面だけを強調する */
.cp-net:has(button.cp-face) .cp-face--front:not([aria-pressed="true"]) { background: rgba(0, 240, 255, 0.04); }

/* 右側：画像・動画の表示エリア＋一覧表 */
.cp-preview { margin: 0; min-width: 0; }
.cp-preview__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.cp-preview__frame img,
.cp-preview__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .3s ease;
}
/* 十字展開の動画：選んだ面の部分だけを切り抜いて表示（大きさと位置はJSが計算） */
.cp-net-crop { position: absolute; overflow: hidden; transition: all .5s cubic-bezier(.4, 0, .2, 1); }
.cp-preview__frame.is-net .cp-net-crop video {
  inset: auto;
  max-width: none;
  object-fit: fill;
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
}
.cp-preview__frame.is-switching img,
.cp-preview__frame.is-switching video { opacity: 0; }
.cp-preview__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 12px;
  font-size: 15px;
}
.cp-preview__caption b { font-weight: 700; }
/* 画像・動画が未登録の面は、クリックできないことがわかるよう少し暗くする */
.cp-net:has(button.cp-face) div.cp-face { border-color: rgba(0, 240, 255, 0.35); }
.cp-net:has(button.cp-face) div.cp-face > span { opacity: 0.45; }   /* 面自体の透明度は演出で使うため、中身だけを暗くする */

.cp-led__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cp-led__table caption {
  text-align: left;
  padding-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cp-led__table th,
.cp-led__table td {
  padding: 14px 8px 14px 0;
  text-align: left;
  border-bottom: 1px solid var(--ps-line);
  font-weight: 400;
  white-space: nowrap;
}
.cp-led__table thead th { color: var(--ps-muted); font-size: 13px; letter-spacing: 0.06em; }
.cp-led__table tbody th { letter-spacing: 0.1em; }
.cp-led__table td {
  font-family: var(--ps-font-num);
  font-feature-settings: "tnum" 1;
}

/* 仕様のまとめ：左＝各面のサイズと解像度／右＝パネルの性能／下＝詳細仕様（開閉） */
.cp-spec {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(40px, 6vw, 96px);
  align-items: start;
}
.cp-spec__title { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; }
.cp-led__table tfoot th,
.cp-led__table tfoot td { color: var(--ps-muted); border-bottom: 0; }
.cp-spec__list { margin: 0; border-top: 1px solid var(--ps-line); }
.cp-spec__list > div {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ps-line);
}
.cp-spec__list dt { font-size: 13px; color: var(--ps-muted); letter-spacing: 0.06em; padding-top: 0.5em; }
.cp-spec__list dd { margin: 0; }
.cp-spec__value {
  display: block;
  font-family: var(--ps-font-num);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 300;
  line-height: 1.3;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
.cp-spec__note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.8; color: var(--ps-muted); }
.cp-spec .cp-panel__more { grid-column: 1 / -1; margin-top: 0; }

.cp-panel__more summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--ps-muted);
}
.cp-panel__more summary::-webkit-details-marker { display: none; }
.cp-panel__more summary:hover { color: var(--ps-accent); border-color: var(--ps-accent); }
.cp-panel__more summary:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 4px; }
/* ＋ が開くと − になる */
.cp-panel__more summary i { position: relative; width: 12px; height: 12px; }
.cp-panel__more summary i::before,
.cp-panel__more summary i::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor;
  transition: transform 0.3s ease;
}
.cp-panel__more summary i::after { transform: rotate(90deg); }
.cp-panel__more[open] summary i::after { transform: rotate(0deg); }
.cp-panel__close,
.cp-panel__more[open] .cp-panel__open { display: none; }
.cp-panel__more[open] .cp-panel__close { display: inline; }

.cp-panel__body { overflow: hidden; }
.cp-panel__list {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
}
.cp-panel__list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ps-line);
}
.cp-panel__list dt { font-size: 13px; color: var(--ps-muted); letter-spacing: 0.06em; white-space: nowrap; }
.cp-panel__list dd {
  margin: 0;
  font-family: var(--ps-font-num);
  font-size: 15px;
  text-align: right;
  font-feature-settings: "tnum" 1;
}
.cp-panel__list dd small { display: block; font-size: 11px; color: var(--ps-muted); }

/* ---------- 3. 間取り ---------- */
.cp-floor { padding: clamp(40px, 5vw, 72px) 0; }   /* 上下とも詰める（前の「5面LEDの仕様」、次の「5面LED用の映像」の帯との間） */
.cp-floor__body {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.cp-floor__plan {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: left;
  color: inherit;
}
.cp-floor__plan img { width: 100%; height: auto; display: block; }
.cp-floor__hint {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ps-muted);
}

.cp-facts { margin: 0; }
.cp-facts > div {
  padding: 20px 0;
  border-top: 1px solid var(--ps-line);
}
.cp-facts > div:last-child { border-bottom: 1px solid var(--ps-line); }
.cp-facts dt { font-size: 13px; color: var(--ps-muted); letter-spacing: 0.08em; }
.cp-facts dd { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cp-facts__value {
  font-family: var(--ps-font-num);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.3;
}
.cp-facts__note { font-size: 13px; color: var(--ps-muted); }

/* 3Dパース */
.cp-3d { margin-top: 56px; }
.cp-3d[hidden] { display: none; }
.cp-3d__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  background: radial-gradient(ellipse at 50% 60%, #12121f, var(--ps-bg) 70%);
  cursor: grab;
  touch-action: none;                /* スマホ：3Dの上では縦横とも回転（ページのスクロールは3Dの外で） */
  user-select: none;
  -webkit-user-select: none;
}
.cp-3d__stage.is-dragging { cursor: grabbing; }
.cp-3d__canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.cp-3d.is-ready .cp-3d__canvas { opacity: 1; }
.cp-3d__loading {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  font-size: 13px; letter-spacing: 0.1em; color: var(--ps-muted);
  pointer-events: none;
}
.cp-3d.is-ready .cp-3d__loading { display: none; }
/* 面の名前・人物の目安：3Dの位置に合わせてJSが動かす */
.cp-3d__labels { position: absolute; inset: 0; pointer-events: none; }
.cp-3d__labels span {
  position: absolute; left: 0; top: 0;
  padding: 3px 8px;
  font-size: 12px; letter-spacing: 0.1em; white-space: nowrap;
  color: var(--ps-text);
  background: rgba(10, 10, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: opacity 0.3s ease;
}
.cp-3d__labels span.is-person { color: var(--ps-muted); }
.cp-3d__labels span.is-room { padding: 2px 6px; font-size: 10px; letter-spacing: 0.06em; color: var(--ps-muted); background: rgba(10, 10, 18, 0.6); }
.cp-3d__labels span.is-led { padding: 3px 8px; font-size: 12px; letter-spacing: 0.1em; color: var(--ps-accent); border-color: rgba(0, 240, 255, 0.4); }
.cp-3d__hint {
  position: absolute; left: 16px; bottom: 14px; margin: 0;
  font-size: 12px; letter-spacing: 0.08em; color: var(--ps-muted);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.cp-3d.is-touched .cp-3d__hint { opacity: 0; }
.cp-3d__hint .is-sp { display: none; }
.cp-3d__zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.cp-3d__zoom button,
.cp-3d__views button {
  font: inherit;
  color: var(--ps-text);
  background: rgba(10, 10, 18, 0.72);
  border: 1px solid var(--ps-line);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cp-3d__zoom button { width: 36px; height: 36px; font-size: 16px; line-height: 1; }
.cp-3d__views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cp-3d__views button { padding: 10px 16px; font-size: 13px; letter-spacing: 0.06em; }
.cp-3d__zoom button:hover,
.cp-3d__views button:hover { border-color: var(--ps-muted); }
.cp-3d__views button[aria-pressed="true"] { color: var(--ps-accent); border-color: var(--ps-accent); }
.cp-3d__zoom button:focus-visible,
.cp-3d__views button:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.cp-3d__note { margin: 12px 0 0; font-size: 12px; color: var(--ps-muted); }
/* 操作方法 */
.cp-3d__guide {
  display: flex;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: 12px;
  padding: 14px 18px;
  border: 1px solid var(--ps-line);
  font-size: 13px;
}
/* 見出しはボタン（スマホでは開閉に使う）。PCではただの見出しとして見せる */
.cp-3d__guide-title {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap;
  color: var(--ps-accent);
  pointer-events: none;
  text-align: left;
}
.cp-3d__guide-list { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.cp-3d__guide-body { min-width: 0; }
.cp-3d__guide-list > div { display: flex; align-items: baseline; gap: 10px; }
.cp-3d__guide-list dt { font-size: 12px; color: var(--ps-muted); white-space: nowrap; }
.cp-3d__guide-list dt::after { content: ""; display: inline-block; width: 12px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--ps-line); }
.cp-3d__guide-list dd { margin: 0; }
.cp-3d__guide-list dd span { margin: 0 6px; font-size: 11px; color: var(--ps-muted); }
.cp-3d__guide-list.is-sp { display: none; }
/* タッチ操作の端末（スマホ・タブレット）ではスマホ用の説明に切り替える */
@media (hover: none) and (pointer: coarse) {
  .cp-3d__guide-list.is-pc { display: none; }
  .cp-3d__guide-list.is-sp { display: flex; }
}
.cp-3d + .cp-floor__body { margin-top: clamp(56px, 7vw, 96px); }

/* ---------- 2. スタジオの写真（FVのすぐ下）：横に並べてスクロール ---------- */
.cp-photos { padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.cp-photos__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cp-photos__head .ps-h2 { margin: 0; }
.cp-photos__nav { display: flex; align-items: center; gap: 8px; flex: none; }
.cp-photos__count {
  margin-right: 12px;
  font-family: var(--ps-font-num, inherit);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ps-muted);
}
.cp-photos__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--ps-line); background: none; color: var(--ps-text);
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.cp-photos__btn span { width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.cp-photos__btn[data-dir="-1"] span { transform: translateX(2px) rotate(-135deg); }
.cp-photos__btn[data-dir="1"] span  { transform: translateX(-2px) rotate(45deg); }
.cp-photos__btn:hover:not(:disabled) { border-color: var(--ps-accent); color: var(--ps-accent); }
.cp-photos__btn:disabled { opacity: 0.3; cursor: default; }

/* 写真の帯：左端は本文の端にそろえ、右は画面の端まで流す */
.cp-photos__track {
  --edge: max(var(--ps-gutter), calc((100vw - var(--ps-wrap)) / 2 + var(--ps-gutter)));
  --ph-h: clamp(120px, 12vw, 180px);   /* 1段の高さ（写真は3:2で並べる） */
  display: grid;
  grid-auto-flow: column;              /* 上の段 → 下の段 → 次の列、の順に並ぶ */
  grid-template-rows: repeat(2, var(--ph-h));
  grid-auto-columns: calc(var(--ph-h) * 1.5);
  gap: 10px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0 var(--edge) 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cp-photos__track::-webkit-scrollbar { display: none; }
.cp-photos__track:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 4px; }
.cp-photos__item { flex: none; scroll-snap-align: start; margin: 0; }
.cp-photos__item button {
  display: block;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-in;
  overflow: hidden;
}
/* 2段で並べるため、写真は同じ大きさ（3:2）の枠に収める（縦長の写真は上下が少し切れる。拡大すれば全体が見える） */
.cp-photos__item button { width: 100%; height: 100%; }
.cp-photos__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .6s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}
.cp-photos__item button:hover img { scale: 1.04; }
.cp-photos__item button:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: -2px; }
.cp-photos__hint { margin: 12px 0 0; padding: 0 var(--ps-gutter); max-width: var(--ps-wrap); margin-inline: auto; font-size: 12px; color: var(--ps-muted); }
/* 写真のすぐ下が「5面LEDの仕様」なので、間を少し詰める */
.cp-photos + .cp-led { padding-top: clamp(64px, 8vw, 110px); }

/* ---------- 5. ご利用案内へ ---------- */
/* 5面LEDに映す映像：文章とボタンを横に並べた帯（スマホは縦） */
.cp-video { padding: clamp(40px, 5vw, 72px) 0 0; }   /* 上は詰める（前の「スタジオの間取り」との間） */
.cp-video__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px clamp(32px, 5vw, 80px);
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
  border-top: 1px solid var(--ps-line);
  border-bottom: 1px solid var(--ps-line);
}
.cp-video .ps-h2 { margin-bottom: 16px; }
.cp-video .ps-lead { max-width: 40em; margin: 0; }
@media (max-width: 767px) {
  .cp-video__inner { grid-template-columns: 1fr; align-items: start; }
  .cp-video .ps-btn { justify-self: start; }
}

.cp-next { padding: clamp(100px, 12vw, 180px) 0 clamp(100px, 12vw, 160px); }
.cp-next .ps-lead { max-width: 36em; }
.cp-next__actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* ---------- 拡大表示 ---------- */
.cp-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 24px;
  background: rgba(6, 6, 12, 0.96);
  opacity: 0;
  transition: opacity .3s ease;
}
.cp-modal[hidden] { display: none; }
.cp-modal.is-open { opacity: 1; }
.cp-modal__img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.cp-modal__caption { margin: 0; font-size: 14px; color: var(--ps-muted); }
.cp-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}
.cp-modal__close:focus-visible,
.cp-floor__plan:focus-visible {
  outline: 2px solid var(--ps-accent);
  outline-offset: 4px;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .cp-led__body,
  .cp-floor__body,
  .cp-spec { grid-template-columns: 1fr; }
  .cp-panel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cp-hero { min-height: 0; }
  /* スマホ：見出し → 画像 → 本文 → 数字 の順に縦に並べる */
  .cp-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "label" "title" "visual" "lead" "specs";
    grid-template-rows: auto;
  }
  .cp-hero__visual { margin: 32px calc(-1 * var(--ps-gutter)) 0; }
  .cp-hero__img { max-height: none; object-position: center; }
  .cp-hero__tiles { -webkit-mask-position: center; mask-position: center; }
  .cp-title { font-size: clamp(20px, 6vw, 30px); letter-spacing: 0.02em; }   /* 1行目（12文字）が途中で折り返さない大きさ */
  /* 冒頭の数字：3つを横1列に、幅いっぱいで均等に並べる */
  .cp-hero__specs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
  .cp-hero { padding-bottom: 32px; }   /* 下の「5面LEDの仕様」との間を少し詰める */
  /* 展開図：スマホはサイズだけ入れる（解像度は下の一覧で読む。幅が狭いので小さめの文字・左右の面は2行） */
  .cp-face { gap: 2px; padding: 4px 2px; }
  .cp-face__name { font-size: 11px; letter-spacing: 0.06em; }
  .cp-face__size { font-size: 13px; }
  .cp-face__size small { font-size: 0.65em; margin-left: 1px; }
  .cp-face__px { display: none; }
  .cp-led__table { font-size: 13px; }
  .cp-spec__list > div { grid-template-columns: 1fr; }
  .cp-spec__list dt { padding-top: 0; }
  .cp-panel__list { grid-template-columns: 1fr; }
  .cp-3d__stage { aspect-ratio: 4 / 3; }
  .cp-3d__hint .is-pc { display: none; }
  .cp-3d__labels span.is-minor { display: none; }   /* スマホでは主要な場所だけ名前を出す */
  .cp-3d__hint .is-sp { display: inline; }
  .cp-3d__views { display: grid; grid-template-columns: 1fr 1fr; }
  .cp-3d__guide { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  /* 操作方法のアコーディオン（JSが is-collapsible を付けたときだけ閉じられる） */
  .cp-3d__guide.is-collapsible { gap: 0; padding: 0; }
  .cp-3d__guide.is-collapsible .cp-3d__guide-title {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 16px;
    pointer-events: auto; cursor: pointer;
  }
  .cp-3d__guide.is-collapsible .cp-3d__guide-title::after {   /* ＋／− の印 */
    content: ""; width: 10px; height: 10px; flex: none;
    background:
      linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
    transition: transform .3s ease;
  }
  .cp-3d__guide.is-collapsible .cp-3d__guide-title[aria-expanded="true"]::after {
    background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat;
  }
  .cp-3d__guide.is-collapsible .cp-3d__guide-title:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: -2px; }
  .cp-3d__guide.is-collapsible .cp-3d__guide-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
  }
  .cp-3d__guide.is-collapsible .cp-3d__guide-title[aria-expanded="true"] + .cp-3d__guide-body { grid-template-rows: 1fr; }
  .cp-3d__guide.is-collapsible .cp-3d__guide-inner { overflow: hidden; }
  .cp-3d__guide.is-collapsible .cp-3d__guide-list { padding: 0 16px 14px; }
  .cp-3d__guide-list { flex-direction: column; gap: 8px; }
  .cp-3d__guide-list dt { width: 5.5em; }
  .cp-3d__guide-list dt::after { display: none; }
  /* スタジオの写真：スマホは矢印を出さず、指で横にスワイプ */
  .cp-photos__btn { display: none; }
  .cp-photos__count { margin-right: 0; }
  .cp-photos__track { --ph-h: 27vw; gap: 6px; }
}