/* concept.css */

body.concept-page { overflow-x: hidden; }
body.concept-page .siteMark { pointer-events: auto; }
body.concept-page .siteMenu__button--hamburger { appearance:none; background:transparent; border:0; padding:0; cursor:pointer; outline:none; }
/* scrollHint は site-chrome.js 共通注入で表示。 ui.css 側で HERO area 限定の
   表示制御を行うため、 ここでの display:none は撤廃。 */

/* ========================================
   CHERO センターライン
======================================== */

.concept-hero { min-height: 100vh; }

.concept-hero__inner {
  width: 100%;
  min-height: 100vh;
  padding: 0 148px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 全子要素を align-items:center で同一縦軸に揃える */
.concept-hero__content {
  width: min(100%, 900px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* タイトル */
.concept-hero__title {
  margin: 0;
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 700;
  color: var(--title-color);
  text-align: center;
  width: 100%;
}
/* glyph化後: textMotionはblock、lineはflex中央化 */
.concept-hero__title .textMotion,
.concept-hero__title .textMotion--hero {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.concept-hero__title .textMotion__line {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* リード */
.concept-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);
}
.concept-hero__lead .textMotion,
.concept-hero__lead .textMotion--panel {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.concept-hero__lead .textMotion__line {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* メインコピー */
.concept-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 52px;
  width: 100%;
  transform: translateX(10px);
}
.concept-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%;  /* textMotion__lineのmargin:0 autoが効くためにwidthが必要 */
  font-size: clamp(36px, 4.6vw, 66px);
}
.concept-hero__copyLine + .concept-hero__copyLine { margin-top: 4px; }

.concept-hero__copyLine .textMotion,
.concept-hero__copyLine .textMotion--panel {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.concept-hero__copyLine .textMotion__line {
  display: inline-block !important;
  white-space: nowrap !important;
}

.concept-hero__copyLine .glyph__char { letter-spacing: 0; }
.concept-hero__lead .glyph__char     { letter-spacing: 0.005em; }

/* 末尾句読点の光学補正: .chero-line--punct-end が付いた行を右にシフト */
.chero-line--punct-end .textMotion__line {
  transform: translateX(0.22em);
}
/* リード: フォントが小さいのでem換算が大きくなる → 少し弱める */
.concept-hero__lead.chero-line--punct-end .textMotion__line {
  transform: translateX(0);
}
/* コピー2行目: フォント大きい → さらに弱める */
.concept-hero__copyLine--2.chero-line--punct-end .textMotion__line {
  transform: translateX(0.12em);
}


/* ============================================================
   Concept Hero: チラ見え防止
   JS初期化前は完全に非表示。body.is-hero-ready が付いた後に
   visibleになり、animateGlyphs が走る。
   glyph__char の opacity:0 は text-split.js が管理するため
   ここでは visibility だけ制御する。
============================================================ */
.js-hero-title,
.js-hero-jp,
.js-chero-copy-line {
  visibility: hidden;
}
body.is-hero-ready .js-hero-title,
body.is-hero-ready .js-hero-jp,
body.is-hero-ready .js-chero-copy-line {
  visibility: visible;
}
/* コンテンツパネル */
.concept-content-panel { overflow:hidden; }
.concept-content-panel::before {
  content:""; position:absolute; inset:0;
  /* フレアradial-gradientを除去、backdrop-blurとoverlay色のみ維持 */
  background: rgba(38,46,56,.28);
  backdrop-filter:blur(2px); opacity:1; z-index:-1;
}
.concept-content-panel .panel__inner,
.concept-content-panel__inner {
  width:100% !important; max-width:100% !important; min-height:100vh;
  display:flex; align-items:stretch !important; justify-content:flex-start !important; padding:0 !important;
}

/* viewport: height固定でクリップ */
.concept-content__viewport { width:100%; height:100vh; overflow:hidden; position:relative; }

/* inner: 左右均等で中央化 */
.concept-content__inner {
  width:100%; padding:100px 148px 160px 148px; box-sizing:border-box; will-change:transform;
}

/* intro */
.conceptIntro { width:min(100%,820px); margin:0 auto 60px; text-align:center; }

.conceptIntro__statement {
  margin:0 auto; color:rgba(238,242,247,.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;
}

.conceptIntro__lead {
  margin:32px auto 0; max-width:560px; color:rgba(208,216,226,.60);
  font-size:14px; line-height:2.1; font-weight:400;
  letter-spacing:0.01em;
  text-align:left;
}

/* scenes grid: PC3列 */
.conceptScenesGrid {
  width:min(100%,1120px); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; align-items:start;
}

/* about ページへの誘導リンク (conceptScenesGrid と conceptOutro の間)。
   plate.plateMenu__pageLink と同じ仕様: SVG ハープーン矢印 + hover で下線が
   左→右に流れるアニメーション。 grid と outro の間に静かに配置するため、
   上は 03 scene の text からそれなりに離し、 下は outro までの呼吸を残す。 */
.conceptScenesGrid__pageLinkWrap {
  width: min(100%, 1120px);
  margin: 32px auto 0;
  text-align: left;
}
.conceptScenesGrid__pageLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(208, 216, 226, 0.72);
  text-decoration: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
}
.conceptScenesGrid__pageLinkLabel {
  display: inline-block;
}
.conceptScenesGrid__pageLinkArrow {
  display: inline-block;
  flex-shrink: 0;
  color: inherit;
  transform: translateY(0.5px);
}
.conceptScenesGrid__pageLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(208, 216, 226, 0.55);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.conceptScenesGrid__pageLink:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 初期 hidden 状態（JS アニメ起点） */
.conceptScenesGrid__pageLinkWrap {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: opacity, transform;
}
.conceptScene { width:100%; margin:0; }
.conceptScene__card { display:grid; grid-template-rows:auto auto auto auto; gap:0; }

/* 上下ガイドライン */
.conceptScene__line {
  display: block;
  border: none;
  margin: 0;
  height: 1px;
  background: rgba(255,255,255,0.15);
  width: 100%;
  will-change: clip-path;
}
.conceptScene__line--top  { margin-bottom: 20px; }
.conceptScene__line--bottom {
  margin-top: 20px;
  margin-bottom: 20px;
}
/* 01/03のみ: 初期状態を非表示にする */
.conceptScene--dining .conceptScene__line--top,
.conceptScene--table  .conceptScene__line--top,
.conceptScene--food   .conceptScene__line--top {
  clip-path: inset(0 100% 0 0);
}
.conceptScene--dining .conceptScene__line--bottom,
.conceptScene--table  .conceptScene__line--bottom,
.conceptScene--food   .conceptScene__line--bottom {
  clip-path: inset(0 0 0 100%);
}

/* 01/03 ラベル: CSSで最初から非表示 */
.conceptScene--dining .conceptScene__label-num,
.conceptScene--dining .conceptScene__label-en,
.conceptScene--table  .conceptScene__label-num,
.conceptScene--table  .conceptScene__label-en,
.conceptScene--food   .conceptScene__label-num,
.conceptScene--food   .conceptScene__label-en {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.conceptScene__label-num,
.conceptScene__label-en {
  display: inline-block;
}

.conceptScene__visual {
  position:relative; min-height:280px;
  background:transparent;
  overflow:visible;
}
/* 図版エリアの上下ライン */

.conceptScene__content { position:relative; }

/* 上ラインラベルエリア */
.conceptScene__header {
  margin-bottom: 20px;
}
.conceptScene__header-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 8px;
}
.conceptScene__label-num {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: #b4c7dc;
  font-weight: 400;
}
.conceptScene__label-en {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(214,224,234,0.28);
  font-weight: 300;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* 下ライン */
.conceptScene__line--bottom {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* conceptScene__content: タイトルに上余白不要（下ラインで空間あり） */
.conceptScene__title { margin-top: 0; }
.conceptScene__index { margin:0 0 14px; color:rgba(208,216,226,.34); font-size:11px; line-height:1; letter-spacing:0.18em; }
.conceptScene__title { margin:0 0 16px; color:rgba(208, 216, 226, 0.90); font-size:clamp(18px,1.6vw,24px); line-height:1.3; letter-spacing:0.01em; font-weight:400; font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; }
.conceptScene__text { margin:0; color:rgba(208,216,226,.60); font-size:13px; line-height:2.0; font-weight:400; letter-spacing:0.01em; }

/* outro */
.conceptOutro {
  width: min(100%, 680px);
  margin: 110px auto 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* OUTRO の罫線は画面幅最大まで展開し、 左右がフェードするグラデーション
   (about / company の lower-page セクション罫線と同じデザイン) にする。
   親 .conceptOutro は width: 680px / margin: 0 auto で中央寄せだが、 罫線だけは
   left: 50% + translateX(-50%) + width: 100vw で viewport 幅まで延ばす。
   body.concept-page と .concept-content-panel の overflow: hidden により
   画面端で自然にクリップされる。
   clip-path スイープアニメ (concept.js: revealOutroLine) は要素自体の幅を
   基準に動くので、 幅を広げても正しく機能する。 */
.conceptOutro__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 と一致 */
.conceptOutro__line + .conceptOutro__statement {
  margin-top: 72px;
}

/* conceptOutro::before は不要（panel::beforeのフレアを除去済み） */
.conceptOutro__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;
}
.conceptOutro__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;
}
/* Structure CTA: Reservationと完全同一設計 */
.conceptOutro__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;
}
.conceptOutro__link:hover {
  color: var(--line-button-text-hover);
  background: transparent;
}
.conceptOutro__link:hover .lineButton__stroke {
  background: var(--line-button-stroke-hover);
}

/* SVG アニメ共通 */
.conceptAnim {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ================================================================
   コンテンツ内要素 初期非表示
   JS の resetEl() は inline style をすべてクリアしてここに戻す。
   Web Animations (fill:forwards) が終わると opacity:1 が保持される。
   re-enter 時は cancel() → inline style クリア → CSS の opacity:0 に戻る。
================================================================ */
.conceptIntro__statement,
.conceptIntro__lead,
.conceptScene__visual,
.conceptScene__index,
.conceptScene__title,
.conceptScene__text,
.conceptOutro__statement,
.conceptOutro__body,
.conceptOutro__link {
  opacity: 0;
  will-change: opacity, transform;
}
/* gravity系: 少し大きめに下から */
.conceptIntro__statement,
.conceptScene__title,
.conceptOutro__statement {
  transform: translate3d(0, 32px, 0);
}
/* fade系: 小さく下から */
.conceptIntro__lead,
.conceptScene__visual,
.conceptScene__index,
.conceptScene__text,
.conceptOutro__body,
.conceptOutro__link {
  transform: translate3d(0, 18px, 0);
}

/* footer:
   表示制御は footer-controller.js が管理する。
   ここでは concept ページ特有のスタイル上書きだけを残す（なければ空でよい）。 */

/* responsive */
@media (max-width:900px) {
  .concept-hero__inner { padding:0 80px; }
  .concept-hero__title { font-size:clamp(34px,9vw,56px); line-height:.96; }
  .concept-hero__lead  { margin-top:16px; font-size:clamp(15px,4.2vw,18px); line-height:1.65; }
  .concept-hero__copy  { margin-top:40px; }
  .concept-hero__copyLine--1 { font-size:clamp(24px,7vw,40px); }
  .concept-hero__copyLine--2 { font-size:clamp(28px,8.5vw,48px); }
  .concept-content__inner { padding-top:80px; padding-bottom:120px; }
  .conceptIntro { width:100%; margin-bottom:120px; }
  .conceptScenesGrid { width:100%; display:block; }
  .conceptScene + .conceptScene { margin-top:60px; }
  .conceptScene__card { grid-template-columns:1fr; gap:20px; }
  .conceptScene__visual { min-height:200px; }
  .conceptScene__text,.conceptIntro__lead { font-size:13px; line-height:1.95; }
  .conceptScenesGrid__pageLinkWrap { margin-top: 24px; }
  .conceptScenesGrid__pageLink     { font-size: 11.5px; }
  .conceptOutro { margin-top:80px; width:100%; }
  /* SP: CTA の min-width:400px が画面幅を超えて右にはみ出すため、
     幅をコンテンツ領域に収める。デスクトップの体裁(min-width:400px,
     白背景, 内側24px padding 等)は保ったまま、SP だけ width を切り替える。 */
  .conceptOutro__link {
    min-width: 0;
    width: min(100%, 360px);
    padding: 0 20px;
  }
  .conceptScene--table .conceptScene__visual .conceptAnim--orbital-table {
    background:
      radial-gradient(circle at calc(50% + 84px) 50%,rgba(230,236,242,.78) 0 2.5px,transparent 3.5px),
      radial-gradient(circle at calc(50% - 84px) 50%,rgba(230,236,242,.78) 0 2.5px,transparent 3.5px),
      radial-gradient(circle at 50% calc(50% - 84px),rgba(230,236,242,.78) 0 2.5px,transparent 3.5px),
      radial-gradient(circle at 50% calc(50% + 84px),rgba(230,236,242,.78) 0 2.5px,transparent 3.5px);
  }
  .conceptAnim--orbital-table::after,.conceptAnim--heat-core::after { width:170px; height:170px; }
}

/* 01図版: canvasをSVGに重ねて線を描画 */
.conceptScene__visual--01 {
  position: relative;
}
.conceptAnim01-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 03 canvas: HTML 属性 width=400 height=300 と CSS width/height 100% の
   組み合わせで非等比ストレッチされ、円が縦に歪む。object-fit:contain で修正。 */
#concept03Canvas {
  object-fit: contain;
}

/* 02/03 図版: 01 と同じタイミングで縮むようにする
   (CSS は SVG に、JS は canvas の ctx.scale に同じ formula を適用)
   - browser 1208-1416: 1.0 → 1.248 線形 (01 は plateau、02/03 も止める)
   - browser 901-1207: 1.248 固定 (01 も縮む帯、02/03 も同率で縮む) */
@media (min-width: 1208px) and (max-width: 1416px) {
  #concept02Visual > svg,
  #concept03Visual > svg {
    transform: scale(calc(1.248 - (100vw - 1208px) / 208px * 0.248));
    transform-origin: center center;
  }
}
@media (min-width: 901px) and (max-width: 1207px) {
  #concept02Visual > svg,
  #concept03Visual > svg {
    transform: scale(1.248);
    transform-origin: center center;
  }
}

/* ================================================================
   中間幅 (769px〜1100px): タブレット表示
   PC base の 3 列グリッドではなく、 SP 寄りの縦積み構造 + 中央
   620px 程度の本文エリアにまとめる。 SP より少し広めのサイズで
   タブレットらしい密度に。 768px 以下の既存 SP @media は触らない。
   フォントサイズ系は中間幅でも触らず、 構造系 (max-width / padding /
   margin / 縦間隔 / 罫線非表示 / 粒子弱め) のみで対応。
================================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  /* 全体 inner: PC base の padding 100px 148px 160px 148px が広すぎる。
     上下も SP 寄りに詰めて、 縦の間延びを解消。 */
  .concept-content__inner {
    padding: 64px clamp(48px, 7vw, 72px) 88px;
  }

  /* intro: 中央 580px に固定、 下マージンも詰める。 */
  .conceptIntro {
    width: min(100%, 620px);
    margin: 0 auto 64px;
  }
  .conceptIntro__statement,
  .conceptIntro__lead {
    max-width: 560px;
    margin-inline: auto;
  }

  /* gravity 図版: PC のサイズだと中間幅で大きすぎて間延びするため
     上下マージンを詰める。 */
  .conceptGravity {
    margin-top: clamp(36px, 5vw, 56px);
    margin-bottom: clamp(40px, 6vw, 64px);
  }

  /* scenes: 3 列 → block 縦積み。 中央 620px の本文エリアにまとめる。 */
  .conceptScenesGrid {
    display: block;
    width: 100%;
  }
  .conceptScene {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }
  .conceptScene + .conceptScene {
    margin-top: 48px;
  }
  .conceptScene__card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* SP と同じく下罫線を非表示。 セクション区切りは余白とラベルで見せる。
     PC 用の横長罫線を残すと「PC を縮めただけ」感が出るため。 */
  .conceptScene__line--bottom { display: none; }

  /* SP と同等の縦詰め (ラベル → 図版 → 本文 が間延びしないように)。
     SP の header.mb: 6px / content.mt: 8px に対して、 中間幅では少しだけ
     呼吸感を取り header.mb: 10px / content.mt: 10px。 */
  .conceptScene__header  { margin-bottom: 10px; }
  .conceptScene__content { margin-top: 10px; }

  /* 図版 (visual): 520〜620px の本文エリア内で自然に見えるサイズ。
     SP 200px より少し広く、 PC 280px より小さく。 */
  .conceptScene__visual {
    min-height: 220px;
  }

  /* 本文 / タイトル: 中央寄せ + max-width で行が広がりすぎないように。
     異常折り返し抑止 (1 文字ずつ縦に折れる事故防止)。 */
  .conceptScene__title {
    max-width: 560px;
  }
  .conceptScene__text {
    max-width: 560px;
    word-break: normal;
    overflow-wrap: normal;
    line-break: strict;
  }

  /* outro: 中央寄せ + max-width。 上マージンも詰める。 */
  .conceptOutro {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    margin-top: 64px;
  }

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

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

  /* SP: 図版(.conceptGravity)直下の余白を詰める。
     既存設計どおり、間隔は親 .conceptIntro の margin-bottom で制御する。
     PC指定(60px)には影響させない。 */
  .conceptIntro { margin-bottom: 50px; }

  /* SP: 各 conceptScene カードの図版下、区切りLINE自体を非表示にして
     図版→タイトルの流れをすっきりさせる。
     PC指定（line 204-207 margin: 20px / 20px）には影響させない。
     grid gap: 20px は維持されるため、visual→content 間は 約40px の余白。 */
  .conceptScene__line--bottom { display: none; }

  /* SP: ラベル→図版 を「少しだけ詰める」。
     PC既定（header.margin-bottom: 20px）には影響させない。
     - header.mb: 20 → 6   →  ラベル→図版 が 40px → 26px (-14px)
     - content.mt: 0 → 8   →  図版→タイトル を少し離す: 40px → 48px (+8px)
       （図版とタイトルの呼吸感を確保。PC側 0 は無変更） */
  .conceptScene__header  { margin-bottom: 6px; }
  .conceptScene__content { margin-top: 8px; }

  /* SP: scene カード間の距離を詰める。@media 900 の 60px を 40px に。
     本文下 → 次カード上LINE までの間延びを解消。 */
  .conceptScene + .conceptScene { margin-top: 40px; }

  /* SP: card 03（最後のシーン）と conceptOutro の間の余白。
     罫線は HTML 上の <hr class="conceptOutro__line"> が担うため、 ここでは
     conceptOutro 自体の上余白のみを調整する (PC: 110px → SP: 44px)。
     罫線下→ statement の間隔は .conceptOutro__line + .conceptOutro__statement
     の SP 上書きで 56px に詰める。 */
  .conceptOutro {
    margin-top: 44px;
  }
  .conceptOutro__line + .conceptOutro__statement {
    margin-top: 56px;
  }
}
/* ─────────────────────────────────────────────
   conceptGravity: conceptIntro リード下の「重力的収束」概念図
   - canvas 1枚で描画 (concept-gravity.js)
   - 外周のノード群が中心の核へ螺旋状に吸い込まれる
   - 近接ノード同士に一瞬だけ細い線が立ち上がる
   - 中心核は柔らかく脈動、 全体は超低速で回転
   - CSS は枠とサイズだけを担当。 アニメーションは JS 側。
   ─────────────────────────────────────────── */
.conceptGravity {
  width: 100%;
  max-width: 1040px;
  /* PC: 520〜620px の間で 56vw に追従 */
  height: clamp(520px, 56vw, 620px);
  /* structure (.structureComposition) と同じ呼吸感:
     gravity と次のセクションの間隔は、 親の .conceptIntro の margin-bottom (60px) で
     コントロールするので、 gravity 自身の margin-bottom は 0。
     上は structure と同じ 60px。 */
  margin: 60px auto 0;
  position: relative;
  pointer-events: none;
}
.conceptGravity__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* SP: 高さを抑えつつ、 図版として読める強度を保つ */
@media (max-width: 768px) {
  .conceptGravity {
    height: clamp(360px, 86vw, 460px);
    margin: 40px auto 0;
  }
}

/* reduced motion: JS 側でも減速するが、 念のため backstop */
@media (prefers-reduced-motion: reduce) {
  .conceptGravity__canvas {
    /* JS の reducedMotion 分岐が dt を ×0.18 に減速して静的に近づける */
  }
}
/* =================================================================
   concept 専用 footer 慣性スクロール (concept-page スコープ)
   ----------------------------------------------------------------
   footer.css / info-footer.js / site-chrome.js を一切触らず、
   concept.js 側で .footerPanel の中身を以下のように再ラップする:
     .footerPanel
       .footerPanel__viewport   ← 100vh で clip
         .footerPanel__inner    ← transform で慣性駆動
           .footerPanel__head   (元から)
           .siteFooterBlock     (元から)
       .footerPanel__copy       (viewport の外、 fixed)
       .footerPanel__sns        (viewport の外、 fixed)
   既存の他ページ (TOP / structure / plate / membership) は再ラップされず、
   このセレクタは body.concept-page 配下のみ適用される。
================================================================= */
body.concept-page .footerPanel__viewport {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
body.concept-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) を concept-page スコープで打ち消し、
   .footerPanel__inner 側で全 padding を持つ形に統一する。
   info-footer.js / footer.css は触らないため、 ここで上書きで吸収する。 */
@media (max-width: 768px) {
  body.concept-page .panel__inner--footer {
    padding: 0;
  }
  body.concept-page .footerPanel {
    padding: 0;
  }
  body.concept-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.concept-page #concept-footer で specificity を上げて指定。 */
  body.concept-page #concept-footer .siteFooterBlock__links {
    border-top-color: rgba(142, 152, 163, 0.12);
  }
  body.concept-page #concept-footer .siteFooterBlock__subLink {
    border-bottom-color: rgba(142, 152, 163, 0.12);
  }
}

/* ── 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.concept-page .panel__inner--footer {
    display: block;
    padding-right: 148px;
  }
}
body.concept-page #concept-footer .footerPanel__head {
  text-align: center;
}
body.concept-page #concept-footer .footerPanel__head .panel__title,
body.concept-page #concept-footer .footerPanel__head .panel__lead {
  text-align: center !important;
}
body.concept-page #concept-footer .footerPanel__head .textMotion,
body.concept-page #concept-footer .footerPanel__head .textMotion--panel {
  text-align: center !important;
}
body.concept-page #concept-footer .footerPanel__head .textMotion__line {
  text-align: center !important;
}
/* リードは中央配置、 改行したら左寄せ段落として見える (max-width 制限 + margin auto) */
body.concept-page #concept-footer .footerPanel__head .panel__lead {
  margin-left: auto;
  margin-right: auto;
}
/* siteFooterBlock の中身 (info + links) を中央配置、 各行内のラベル / 値 / リンクは
   左寄せキープ (text-align は変更しない) */
body.concept-page #concept-footer .siteFooterBlock__main {
  margin-left: auto;
  margin-right: auto;
}
/* info ブロック (field / address / tel / open の grid) を中身の自然幅で中央配置。
   各 row の grid template (56px 12px 1fr) はそのまま、 内部のラベル / 値は左寄せ維持。 */
body.concept-page #concept-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.concept-page #concept-footer .siteFooterBlock__links {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
}