/* ================================================================
   structure.css
   6 セクション構成: Intro / Relation / Composition / Flow / Design / UZ / Outro
   各セクションでレイアウト・テキスト位置・図版サイズが異なる。
================================================================ */

/* ── Hero ready ───────────────────────────────────────── */
.js-hero-title,
.js-hero-jp,
.js-schero-copy-line { visibility: hidden; }
body.is-hero-ready .js-hero-title,
body.is-hero-ready .js-hero-jp,
body.is-hero-ready .js-schero-copy-line { visibility: visible; }

/* ── Structure Hero (concept-hero と完全一致) ─────── */
.structure-hero {
  position: relative; z-index: 2; width: 100%; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.structure-hero__inner { width: 100%; min-height: 100vh; padding: 0 148px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.structure-hero__content {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0; width: min(100%, 900px); margin: 0 auto; pointer-events: none;
}
.structure-hero__title {
  margin: 0; font-size: clamp(44px, 5.8vw, 76px); line-height: 0.94;
  font-weight: 700; letter-spacing: -0.055em; color: var(--title-color);
  text-align: center; width: 100%;
}
.structure-hero__title .textMotion,
.structure-hero__title .textMotion--hero {
  display: block !important; width: 100% !important; text-align: center !important;
}
.structure-hero__title .textMotion__line {
  display: inline-block !important; white-space: nowrap !important;
}
.structure-hero__lead {
  margin: 20px 0 0; color: rgba(208, 216, 226, 0.68);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6;
  letter-spacing: 0.005em; text-align: center; width: 100%;
  transform: translateX(10px);
}
.structure-hero__lead .textMotion,
.structure-hero__lead .textMotion--panel {
  display: block !important; width: 100% !important; text-align: center !important;
}
.structure-hero__lead .textMotion__line {
  display: inline-block !important; white-space: nowrap !important;
}
.structure-hero__copy {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 52px; width: 100%; transform: translateX(10px);
}
.structure-hero__copyLine {
  margin: 0; color: rgba(238, 242, 247, 0.95);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 400; line-height: 1.22; letter-spacing: 0;
  text-align: center; width: 100%; font-size: clamp(36px, 4.6vw, 66px);
}
.structure-hero__copyLine + .structure-hero__copyLine { margin-top: 4px; }
.structure-hero__copyLine .textMotion,
.structure-hero__copyLine .textMotion--panel {
  display: block !important; width: 100% !important; text-align: center !important;
}
.structure-hero__copyLine .textMotion__line {
  display: inline-block !important; white-space: nowrap !important;
}
.structure-hero__copyLine .glyph__char { letter-spacing: 0; }
.structure-hero__lead .glyph__char     { letter-spacing: 0.005em; }

.chero-line--punct-end .textMotion__line { transform: translateX(0.22em); }
.structure-hero__lead.chero-line--punct-end .textMotion__line { transform: translateX(0); }
.structure-hero__copyLine--3.chero-line--punct-end .textMotion__line { transform: translateX(0.12em); }

/* ── Content panel ──────────────────────────────────── */
.structure-content-panel {
  position: relative; z-index: 2; width: 100%; overflow: hidden; touch-action: none;
}
.structure-content-panel::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(38, 46, 56, 0.28); backdrop-filter: blur(2px);
  opacity: 1; z-index: -1;
}
.structure-content-panel__inner {
  width: 100%; max-width: 100%; min-height: 100vh;
  display: flex; align-items: stretch; justify-content: flex-start; padding: 0;
}
.structure-content__viewport {
  width: 100%; height: 100vh; overflow: hidden; position: relative;
}
.structure-content__inner {
  width: 100%; padding: 100px 148px 160px 148px; box-sizing: border-box; will-change: transform;
}

/* ── 0. Intro ─────────────────────────────────────── */
.structureIntro {
  width: min(100%, 820px); margin: 0 auto 100px; text-align: center;
}
.structureIntro__statement {
  margin: 0 auto; color: rgba(238, 242, 247, 0.95);
  font-size: clamp(26px, 3.8vw, 50px); line-height: 1.26;
  letter-spacing: 0.005em; font-weight: 400;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
.structureIntro__lead {
  margin: 28px auto 0; max-width: 560px;
  color: rgba(208, 216, 226, 0.60);
  font-size: 14px; line-height: 1.95; font-weight: 400;
  letter-spacing: 0.01em;
  text-align: left;
}


/* ================================================================
   Composition (上段の動く構造図)
================================================================ */
/* Composition ブロック:
   上下 padding を削る。concept の最初の図版ブロック(.conceptScenesGrid)は
   直前の Intro に margin-bottom: 100px がかかっているだけで、Grid 自身に
   上 padding はない。concept と合わせるため同じ設計にする。
   以前は padding: 40px 0 が効いて、Intro(60px) + padding(40px) = 100px と
   計算上は concept と同じになっていたが、視覚的には Intro の下余白が弱く
   見え、図版が下に沈む印象になっていた。Intro margin を 100px に戻し、
   Composition 側の padding を 0 にすることで concept と同じ呼吸感にする。 */
.structureComposition {
  position: relative;
  width: 100%;
  margin: -40px auto 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.structureComposition__frame {
  position: relative;
  /* concept の図版(3カラム合計 ~780px)に対して structure は単一の正方形。
     大きすぎるとセクション全体の縦占有が大きくなり重心が下がるため、
     最大 620px 程度、かつビューポート高の余裕に合わせて縮めることで、
     テキスト→図版の呼吸感を concept と揃える。 */
  width: min(70%, 620px, calc(100vh - 260px));
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.structureComposition__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* 最外周渦: 2本のみ(--c の大弧を削除)
   --a: r=556, 破線 dasharray=77 19 で線分長を統一
   --b: r=536, 細点線 */
.structureComposition__svg .composition__outerRing {
  fill: none; vector-effect: non-scaling-stroke; transform-origin: 600px 600px;
  /* 初期は paused。JS の登場アニメ完了後に running へ切り替え */
  animation-play-state: paused;
}
.structureComposition__svg .composition__outerRing--a {
  stroke: rgba(214,224,234,0.34); stroke-width: 0.9;
  stroke-dasharray: 77 19;
  animation: compositionSpinCW 120s linear infinite;
  animation-play-state: paused;
}
/* --b: 線分を細かく(2 5)、速度UP(90s/周)。
   緑 2 本のうち内側 (r=536) は外側より明るく見せたいので alpha 高め */
.structureComposition__svg .composition__outerRing--b {
  stroke: rgba(214,224,234,0.55); stroke-width: 0.7;
  stroke-dasharray: 2 5;
  animation: compositionSpinCCW 90s linear infinite;
  animation-play-state: paused;
}
@keyframes compositionSpinCW {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@keyframes compositionSpinCCW {
  from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}

/* rotator 内 */
.structureComposition__svg .composition__innerRing {
  fill: none; stroke: rgba(214,224,234,0.12); stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  opacity: 0; /* JSが制御 */
}
/* 破線基準円(2本): 逆回転(CW)に変更、速度UP(80s/周) */
.structureComposition__svg .composition__innerRing--dashed {
  stroke: rgba(214,224,234,0.28); stroke-width: 0.6; stroke-dasharray: 3 7;
  transform-origin: 600px 600px;
  animation: compositionSpinCW 80s linear infinite;
}
/* r=189 (内側の破線円) だけ反時計回りに反転 */
.structureComposition__svg circle[r="189"].composition__innerRing--dashed {
  animation: compositionSpinCCW 80s linear infinite;
}

/* 中心渦: Concept 01/03準拠。JSで動的に追加するためCSS定義のみ */
.structureComposition__svg .composition__vortexCenter circle {
  vector-effect: non-scaling-stroke;
}
.structureComposition__svg .composition__vortexDot {
  /* 脈動はrAFで制御 */
}
.structureComposition__svg .composition__orbitMain {
  fill: none; stroke: rgba(214,224,234,0.20); stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
.structureComposition__svg .composition__diameter {
  stroke: rgba(214,224,234,0.12); stroke-width: 0.5;
  vector-effect: non-scaling-stroke; fill: none;
}
.structureComposition__svg .composition__radial {
  stroke: rgba(214,224,234,0.16); stroke-width: 0.5;
  vector-effect: non-scaling-stroke; fill: none;
}
.structureComposition__svg .composition__radialExt {
  stroke: rgba(214,224,234,0.07); stroke-width: 0.35;
  vector-effect: non-scaling-stroke; fill: none;
}
.structureComposition__svg .composition__nodeMask {
  fill: #262e38; stroke: none;
}
.structureComposition__svg .composition__movPath {
  fill: none; stroke: rgba(236,242,247,0.50); stroke-width: 0.9;
  vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0;
}
.structureComposition__svg .composition__nodeBase {
  fill: #262e38; stroke: rgba(214,224,234,0.18); stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.structureComposition__svg .composition__nodeRing {
  fill: transparent; stroke: rgba(214,224,234,0.42); stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

/* 各ノード内側の破線円 (反時計回りで回転、 ノード自身を中心に)。
   初期は非表示 (opacity 0)。 JS が、 ノード + ラベル登場完了後に
   nodeRing サイズ (r=76) から拡大しながら fade in (Web Animations API)、
   完了後 .is-spinning を付けて反時計回り spin を開始。 */
.structureComposition__svg .composition__nodeDashed {
  fill: none;
  stroke: rgba(214, 224, 234, 0.32);
  stroke-width: 0.5;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  opacity: 0;
}
.structureComposition__svg .composition__nodeDashed.is-spinning {
  animation: compositionNodeDashedSpin 7s linear infinite;
}

/* 各ノードの波紋 (周期で順番に外側へ拡大して fade out)。
   nodeRipple--活性化時に animation を data-node-ripple-active="true" などで切り替え。
   デフォルトでは見えない (opacity 0)、 JS が周期的に animate() で発動。 */
.structureComposition__svg .composition__nodeRipple {
  fill: none;
  stroke: rgba(214, 224, 234, 0.62);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

@keyframes compositionNodeDashedSpin {
  0%   { transform: rotate(0deg);    }
  100% { transform: rotate(-360deg); }
}
.structureComposition__svg .composition__nodeLabel { pointer-events: none; }
.structureComposition__svg .composition__nodeLabel text {
  fill: rgba(214,224,234,0.62); font-family: "Helvetica Neue",Arial,sans-serif;
  font-size: 18px; font-weight: 400; letter-spacing: 0.22em;
  text-transform: uppercase; user-select: none;
}

/* ================================================================
   Structure Elements — 6要素一覧(3×2グリッド)
   情報プレート。斜線背景は「流れ・軌跡」のニュアンス。
================================================================ */
.structureElements {
  width: min(100%, 1040px);
  margin: 0 auto 110px;
}

.structureElements__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.structureElements__item {
  position: relative;
  padding: 32px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: repeating-linear-gradient(
    135deg,
    rgba(208, 216, 226, 0.045) 0px,
    rgba(208, 216, 226, 0.045) 1px,
    transparent 1px,
    transparent 9px
  );
  overflow: hidden;
  transition: background 0.4s ease;
}

.structureElements__item:hover {
  background: repeating-linear-gradient(
    135deg,
    rgba(208, 216, 226, 0.065) 0px,
    rgba(208, 216, 226, 0.065) 1px,
    transparent 1px,
    transparent 9px
  );
}

.structureElements__title {
  margin: 0 0 14px;
  color: rgba(214, 224, 234, 0.82);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
}

.structureElements__text {
  margin: 0;
  color: rgba(208, 216, 226, 0.60);
  font-size: 14px;
  line-height: 1.95;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Responsive */
@media (max-width: 900px) {
  .structureElements {
    width: 100%;
    margin: 0 auto 140px;
  }
  .structureElements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .structureElements__item {
    padding: 26px 22px;
  }
}

@media (max-width: 560px) {
  .structureElements__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .structureElements__item {
    padding: 24px 20px;
  }
}


/* ================================================================
   Design(思想) — 中央コピー
================================================================ */
.structureDesign {
  position: relative; width: 100%;
  padding: 0 0 110px; margin: 0;
}
.structureDesign__inner {
  width: min(100%, 720px);
  margin: 0 auto; text-align: center; padding: 0 28px;
}
.structureDesign__statement {
  margin: 0; color: rgba(208, 216, 226, 0.92);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(24px, 2.8vw, 38px); font-weight: 400;
  line-height: 1.5; letter-spacing: 0.005em;
}
/* SP のみ改行する br。PC では隠す（@media 768 で display: inline に上書き）。
   .structureDesign__statement 内に限定スコープ。 */
.structureDesign__statement .sp-break { display: none; }
.structureDesign__body {
  margin: 48px auto 0; max-width: 560px;
  color: rgba(208, 216, 226, 0.60); font-size: 14px; line-height: 1.95;
  font-weight: 400; letter-spacing: 0.02em;
  text-align: left;
}

/* ================================================================
   5. UZ
================================================================ */
.structureUZ { width: min(100%, 1040px); margin: 0 auto 110px; }
.structureUZ__layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 80px; align-items: start;
}
.structureUZ__visual {
  position: relative; width: 100%;
  aspect-ratio: 4 / 5;
  background: rgba(38, 46, 56, 0.4);
  border: 1px solid rgba(208, 216, 226, 0.12);
  overflow: hidden;
}
.structureUZ__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.structureUZ__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.structureUZ__placeholderLabel {
  color: rgba(208, 216, 226, 0.32);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 400;
}
.structureUZ__image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.structureUZ__content { padding-top: 20px; }
/* PC: .structureUZ__id は装飾なし（role と heading を包むだけ）。
   SP のみ「左カラム」として右余白付きで使う。 */
.structureUZ__id { }
/* PC: SP用の改行 br を非表示。スコープを structureUZ / uzFieldId に限定。 */
.structureUZ .sp-only,
.uzFieldId .sp-only { display: none; }
.structureUZ__role {
  margin: 0;
  color: rgba(208, 216, 226, 0.48);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 400;
}
.structureUZ__heading {
  margin: 16px 0 0; color: rgba(208, 216, 226, 0.92);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: clamp(32px, 3.2vw, 42px); font-weight: 400;
  line-height: 1; letter-spacing: 0.01em;
}
.structureUZ__body {
  margin: 36px 0 0; color: rgba(208, 216, 226, 0.58);
  font-size: 14px; line-height: 2.0; font-weight: 400; letter-spacing: 0.01em;
}
.structureUZ__profile {
  margin: 48px 0 0; padding-top: 28px;
  border-top: 1px solid rgba(208, 216, 226, 0.14);
}
.structureUZ__profileLabel {
  margin: 0; color: rgba(208, 216, 226, 0.40);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 400;
}
.structureUZ__profileBody {
  margin: 16px 0 0; color: rgba(208, 216, 226, 0.56);
  font-size: 13px; line-height: 1.95; letter-spacing: 0.01em; font-weight: 400;
}

/* ================================================================
   Outro — concept仕様
================================================================ */
.structureOutro {
  width: min(100%, 680px);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* OUTRO の罫線は画面幅最大まで展開し、 左右がフェードするグラデーション
   (about / company の lower-page セクション罫線と同じデザイン) にする。
   親 .structureOutro は width: 680px / margin: 0 auto で中央寄せだが、 罫線だけは
   left: 50% + translateX(-50%) + width: 100vw で viewport 幅まで延ばす。
   base.css の body { overflow: hidden } と .structure-content-panel の
   overflow: hidden により、 画面端で自然にクリップされる。
   clip-path スイープアニメ (structure.js) は要素自体の幅を基準に動くので、
   幅を広げても正しく機能する。 */
.structureOutro__line {
  display: block;
  border: none;
  margin: 0;
  padding: 0;
  height: 1px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  background: linear-gradient(
    to right,
    rgba(208, 216, 226, 0)    0%,
    rgba(208, 216, 226, 0.10) 30%,
    rgba(208, 216, 226, 0.10) 70%,
    rgba(208, 216, 226, 0)    100%
  );
  /* 初期状態: 左→右にスイープ登場するアニメ起点 */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
/* 罫線 → statement の間隔は plate.plateOutro__inner の padding-top と同じ 72px。
   structureOutro__inner には padding-top が無いため、 隣接セレクタで指定する。 */
.structureOutro__line + .structureOutro__inner {
  padding-top: 72px;
}

.structureOutro__inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 28px;
}
.structureOutro__statement {
  margin: 0 auto;
  color: rgba(208, 216, 226, 0.90);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.48;
  letter-spacing: 0.005em;
  font-weight: 400;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
.structureOutro__body {
  margin: 36px auto 0;
  width: min(100%, 560px);
  color: rgba(214, 224, 234, 0.58);
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
.structureOutro__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 64px;
  min-width: 400px;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  overflow: hidden;
  background: var(--line-button-bg);
  color: var(--line-button-text);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.07em;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.22s ease, background 0.24s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.structureOutro__link:hover {
  color: var(--line-button-text-hover);
  background: transparent;
}
.structureOutro__link:hover .lineButton__stroke {
  background: var(--line-button-stroke-hover);
}

/* ── 初期非表示(アニメ対象) ─────────────────────── */
.structureIntro__statement,
.structureIntro__lead,
.structureComposition__frame,
.structureComposition__body,
.structureDesign__statement,
.structureDesign__body,
.structureUZ__visual,
.structureUZ__role,
.structureUZ__heading,
.structureUZ__body,
.structureUZ__profile,
.structureOutro__statement,
.structureOutro__body,
.structureOutro__link {
  opacity: 0; will-change: opacity, transform;
}
.structureIntro__statement,
.structureComposition__title,
.structureDesign__statement,
.structureUZ__heading,
.structureOutro__statement {
  transform: translate3d(0, 32px, 0);
}
.structureIntro__lead,
.structureComposition__frame,
.structureComposition__body,
.structureDesign__body,
.structureUZ__visual,
.structureUZ__role,
.structureUZ__body,
.structureUZ__profile,
.structureOutro__body,
.structureOutro__link {
  transform: translate3d(0, 16px, 0);
}

/* ── Info footer (中央寄せ) ───────────────────────────────────────
   タイトル / リードは中央寄せ、 リードと siteFooterBlock の内部テキストは
   max-width を保ちながら margin auto で中央配置 (改行時は左寄せ段落として見える) */
/* footer.css の `.panel__inner--footer { display: flex; align-items: center }` を
   block に解除する。 flex のままだと .footerPanel (flex 子) の幅が中身依存に縮み、
   inner 全体が画面の左寄りに固定される (= 中央寄せルールが効かなく見える) ため。
   慣性 transform 構造では .footerPanel__viewport が height: 100vh なので、
   親の垂直中央配置 (align-items: center) は不要になっている。
   panel.css の .panel__inner は左 148px / 右 28px の非対称 padding (左固定ロゴ
   との干渉回避目的)。 footer ではタイトル / リード / info を画面中央に置きたいので
   左右対称になるよう右 padding を 148px に揃える。 */
@media (min-width: 769px) {
  body.structure-page .panel__inner--footer {
    display: block;
    padding-right: 148px;
  }
}
body.structure-page #structure-footer .footerPanel__head {
  text-align: center;
}
body.structure-page #structure-footer .footerPanel__head .panel__title,
body.structure-page #structure-footer .footerPanel__head .panel__lead {
  text-align: center !important;
}
body.structure-page #structure-footer .footerPanel__head .textMotion,
body.structure-page #structure-footer .footerPanel__head .textMotion--panel {
  text-align: center !important;
}
body.structure-page #structure-footer .footerPanel__head .textMotion__line {
  text-align: center !important;
}
/* リードは中央配置、 改行したら左寄せ段落として見える (max-width 制限 + margin auto) */
body.structure-page #structure-footer .footerPanel__head .panel__lead {
  margin-left: auto;
  margin-right: auto;
}
/* siteFooterBlock の中身 (info + links) を中央配置、 各行内のラベル / 値 / リンクは
   左寄せキープ (text-align は変更しない) */
body.structure-page #structure-footer .siteFooterBlock__main {
  margin-left: auto;
  margin-right: auto;
}
/* info ブロック (field / address / tel / open の grid) を中身の自然幅で中央配置。
   各 row の grid template (56px 12px 1fr) はそのまま、 内部のラベル / 値は左寄せ維持。 */
body.structure-page #structure-footer .siteFooterBlock__info {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* サブリンク (プライバシーポリシー / 免責事項) も中身の自然幅で中央配置。
   PC 用の padding-left: 76px (footer.css、 label との揃え目的) は中央配置に
   不要なので 0 に上書き。 */
@media (min-width: 769px) {
  body.structure-page #structure-footer .siteFooterBlock__links {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 900px) {
  .structure-content__inner { padding-top: 80px; padding-bottom: 120px; }
  .structure-hero__inner { padding: 0 80px; }
  .structure-hero__title { font-size: clamp(34px, 9vw, 56px); line-height: .96; }
  .structure-hero__lead  { margin-top: 16px; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.65; }
  .structure-hero__copy  { margin-top: 40px; }
  .structure-hero__copyLine--1 { font-size: clamp(24px, 7vw, 40px); }
  .structure-hero__copyLine--3 { font-size: clamp(28px, 8.5vw, 48px); }
}

/* ================================================================
   中間幅 (769px〜1100px): タブレット表示
   PC base (3 列 grid / 横並び / 大余白) を維持せず、 SP 寄りの
   縦積み構造 + 中央 620px 程度の本文エリアに集約する。
   SP より少し広めのサイズでタブレットらしい密度に。
   768px 以下の既存 SP @media は触らない。
   フォントサイズ系は中間幅でも触らず、 構造系のみで対応。
   Concept ページの中間幅と同じ方針 (max-width / padding /
   margin / 縦間隔の SP 寄り詰め + 粒子弱め)。
================================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  /* 全体 inner: PC base の padding 100px 148px 160px が広すぎるため詰める。 */
  .structure-content__inner {
    padding: 64px clamp(48px, 7vw, 72px) 88px;
  }

  /* Intro: 中央 620px、 下マージンを SP 寄りに詰める。 */
  .structureIntro {
    width: min(100%, 620px);
    margin: 0 auto 64px;
  }
  .structureIntro__statement,
  .structureIntro__lead {
    max-width: 560px;
    margin-inline: auto;
  }

  /* Composition (中央正方形 SVG 図版): 中央配置のまま、 中間幅で
     大きすぎないようにサイズを抑える。 PC base の min(70%, 620px) は
     中間幅で過大なので、 中央寄せで 480px max 程度に。
     上の負マージン -40px は中間幅では不要、 0 に。 */
  .structureComposition {
    margin: 32px auto 56px;
  }
  .structureComposition__frame {
    width: min(80%, 480px);
  }

  /* Elements: PC 3 列 → 2 列維持で読みやすく (900 以下の既存 rule と同じ
     2 列を 1100 まで拡大)。 中央寄せ + max-width で広がりすぎ防止。 */
  .structureElements {
    width: min(100%, 720px);
    margin: 0 auto 80px;
  }
  .structureElements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .structureElements__item {
    padding: 26px 22px;
  }

  /* Design: 本文中央寄せ + 上下マージン詰め。 */
  .structureDesign {
    padding: 48px 0 40px;
    margin: 0 auto 24px;
    width: min(100%, 620px);
  }
  .structureDesign__body {
    max-width: 560px;
    margin-inline: auto;
  }

  /* UZ (人物セクション): 横並び (grid 2 列) → 縦積み (1 列)。
     visual を中央寄せ + 幅 clamp、 content 中央 620px、 本文の異常
     折り返し抑止。 visual に gap がほぼゼロ (連続感)。 */
  .structureUZ {
    width: 100%;
    max-width: 620px;
    margin: 0 auto 60px;
  }
  .structureUZ__layout {
    grid-template-columns: 1fr;
    gap: clamp(0px, 1.5vw, 16px);
    align-items: center;
  }

  /* visual (UZ FIELD ID カード): 中央寄せ + 幅を clamp で制御。
     uzFieldId 自体は position: absolute; inset: 0 で visual に追従するので、
     visual の width を絞れば uzFieldId も同サイズになる。 */
  .structureUZ__visual {
    width: min(72vw, 420px);
    max-width: 420px;
    margin-inline: auto;
  }

  /* UZ FIELD ID を内包する visual のみ aspect-ratio を 1/1 に。
     PC base の 4/5 (縦長) のままだと、 uzFieldId__shell (正方形 360px max) が
     上寄せ flex で配置されるため visual 下に大きな余白 (約 200px) が残り、
     content との間に「無駄な空白」として見える。
     :has(.uzFieldId) で UZ ケース限定 → MOOTAN / AB の visual は不変。 */
  .structureUZ__visual:has(.uzFieldId) {
    aspect-ratio: 1 / 1;
  }

  /* content: visual の下に縦積み。 中央寄せ + 最大幅で本文の広がり抑止。
     min-width: 0 で grid item の overflow を許可し異常細幅を防ぐ。 */
  .structureUZ__content {
    width: 100%;
    max-width: 560px;
    min-width: 0;
    margin-inline: auto;
    padding-top: 0;
  }

  /* 本文の極端な折り返しを抑止 (1 文字ずつ縦に折れない)。
     overflow-wrap: anywhere は使用禁止 (user 指示)。 */
  .structureUZ__body,
  .structureUZ__profileBody {
    word-break: normal;
    overflow-wrap: normal;
    line-break: strict;
  }

  /* Outro: Concept Outro と同じ締めの余白感に寄せる。 中央寄せ + max-width。 */
  .structureOutro {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    margin-top: 64px;
  }

  /* 背景粒子: 中間幅では本文・図版の視認性を優先するため、
     structure ページに限り粒子の不透明度を下げて控えめに。
     描画 / アニメは不変、 視覚的強度のみ低下。 他ページ無影響。 */
  body.structure-page .bg,
  body.structure-page #bg {
    opacity: 0.4;
  }
}

@media (max-width: 768px) {
  .structure-hero__inner { padding: 0 24px; }
  .structure-content__inner { padding: 104px 24px 100px; }

  .structureIntro { margin-bottom: 8px; }
  .structureIntro__lead { font-size: 13px; line-height: 1.95; }

  /* Composition(v10) SP
     PC の margin: -40px auto 60px は SP 用にフルshorthandで上書き（負の上マージンを無効化）。
     intro mb 8 + composition mt 16 = 24px gap (Concept SP 40 より詰めた状態)。 */
  .structureComposition { padding: 0; margin: 16px auto 36px; min-height: auto; }
  .structureComposition__frame { width: min(100%, 500px); aspect-ratio: 1/1; }
  .structureComposition__body { width: min(240px, 60%); }
  .structureComposition__title { font-size: clamp(15px, 4vw, 18px); }
  .structureComposition__text { font-size: clamp(10px, 2.6vw, 12px); margin-top: 10px; }
  .structureComposition__svg .composition__nodeLabel text { font-size: 22px; letter-spacing: 0.18em; }

  /* SP: PRESENCE背景下端→見出し「偶然を待つのではなく…」を Concept SP の
     罫線→「重なった時間が、…」と同じ 56px に揃える。
     PRESENCE のハッチ背景下端が Concept の罫線に相当する視覚アンカー。
     mb: 0 + pt: 56 = 56px の単一ブロックに集約。
     pb: 50 + mb: 20 = 70px (Design 本文末→最初の UZ カード上端、180→70 に圧縮)。 */
  .structureDesign {
    padding: 56px 0 50px;
    margin: 0 0 20px;
  }
  /* SP: 「構造を」の前で改行。PC では非表示にしているクラスを SP で有効化。 */
  .structureDesign__statement .sp-break { display: inline; }
  /* SP: 本文 .structureDesign__body の幅を Concept conceptOutro__body と揃える。
     PC既定の padding: 0 28px が SP では本文を 56px 分狭めていたため、SP のみ 0 に。
     見出しの中央配置は text-align: center（PC既定で維持）。 */
  .structureDesign__inner { padding: 0; }

  /* SP: PRESENCE→Design 罫線相当の余白は structureDesign.pt 側に集約するため、
     elements の下マージンは 0 に。 */
  .structureElements { margin-bottom: 0; }

  .structureUZ { margin-bottom: 60px; }
  /* SP: 上段だけ「左に肩書き＋名前 / 右にGIカード」の2カラム配置。
     本文(.structureUZ__body) と Profile(.structureUZ__profile) はフル幅維持。
     - layout は relative、visual を absolute で右上にピン
     - __id ラッパー (min-height: 250px、padding-right で GIカード分よけ) で
       通常フロー領域を確保、内部 flex で天地中央
     - 本文・Profile は __id の外側で通常フローのままフル幅 */
  .structureUZ__layout {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .structureUZ__visual {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 250px;
    margin: 0;
  }
  .structureUZ__content { padding-top: 0; }
  /* SP: 左カラム（CURATOR/GRAVITY MASTER/UZ）を GIカードに対して天地中央に揃える。
     min-height: 170px + flex column で中央寄せ。
     幅は width: calc(100% - 216px) で右側 216px(GIカード 200 + gap 16) を空ける。
     padding-right で空けると要素のクリック判定が右側まで広がり、GIカードのドラッグを
     横取りしてしまうため width で実体幅を制限。 */
  .structureUZ__id {
    min-height: 170px;
    width: calc(100% - 216px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* SP: GIカード下端→本文（あ）と 本文末→Profile罫線（い）の視覚距離を揃える。
     PC既定 body.mt: 36 / profile.mt: 48 / card.mb: 110 を SP のみで上書き。
     - card.mb: 120→60
     - body.mt: 14
     - profile.mt: 48→36  本文末→罫線 36+28=64px */
  .structureUZ__body { margin-top: 39px; }
  .structureUZ__profile { margin-top: 36px; }

  /* SP のみ表示する br（CURATOR / GRAVITY MASTER の間など）。
     スコープを structureUZ / uzFieldId に限定し、他要素には影響させない。 */
  .structureUZ .sp-only,
  .uzFieldId .sp-only { display: inline; }

  /* SP: 本文 .structureOutro__body の幅を Concept conceptOutro__body と揃える。
     PC既定の padding: 0 28px が SP では本文を 56px 分狭めていたため、SP のみ 0 に。
     (structureDesign__inner と同じ修正パターン) */
  .structureOutro__inner { padding: 0; }
  /* SP: 罫線 → statement の間隔は plate / concept と同じ 56px (PC: 72px) */
  .structureOutro__line + .structureOutro__inner { padding-top: 56px; }

  .structureOutro__link { min-width: 0; width: min(100%, 360px); padding: 0 20px; }
}
/* =================================================================
   structure 専用 footer 慣性スクロール (structure-page スコープ)
   ----------------------------------------------------------------
   footer.css / info-footer.js / site-chrome.js を一切触らず、
   structure.js 側で .footerPanel の中身を以下のように再ラップする:
     .footerPanel
       .footerPanel__viewport   ← 100vh で clip
         .footerPanel__inner    ← transform で慣性駆動
           .footerPanel__head   (元から)
           .siteFooterBlock     (元から)
       .footerPanel__copy       (viewport の外、 fixed)
       .footerPanel__sns        (viewport の外、 fixed)
   既存の他ページ (TOP / concept / plate / membership) は再ラップされず、
   このセレクタは body.structure-page 配下のみ適用される。
================================================================= */
body.structure-page .footerPanel__viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
body.structure-page .footerPanel__inner {
  width: 100%;
  will-change: transform;
  /* 親 .panel__inner--footer 側で左右 padding 148px を持つので、 ここでは
     上下 padding のみ。 (元: padding: 100px 148px 80px 148px、 二重 padding 解消) */
  padding: 100px 0 80px 0;
  box-sizing: border-box;
}

/* SP: 既存 footer.css の親 padding (.panel__inner--footer の padding 120px 20px 0
   と .footerPanel の padding 0 0 72px) を structure-page スコープで打ち消し、
   .footerPanel__inner 側で全 padding を持つ形に統一する。
   info-footer.js / footer.css は触らないため、 ここで上書きで吸収する。 */
@media (max-width: 768px) {
  body.structure-page .panel__inner--footer {
    padding: 0;
  }
  body.structure-page .footerPanel {
    padding: 0;
  }
  body.structure-page .footerPanel__inner {
    padding: 100px 24px 80px 24px;
  }
  /* SP のサブリンク (プライバシーポリシー / 免責事項) の上下区切り線を
     footer.css のデフォルト (rgba 208,216,226,0.14) から、 暗いグレー寄りで
     さらに控えめな色 (rgba 142,152,163,0.12) に上書き。 footer.css に勝つため
     body.structure-page #structure-footer で specificity を上げて指定。 */
  body.structure-page #structure-footer .siteFooterBlock__links {
    border-top-color: rgba(142, 152, 163, 0.12);
  }
  body.structure-page #structure-footer .siteFooterBlock__subLink {
    border-bottom-color: rgba(142, 152, 163, 0.12);
  }
}