/* ==========================================================================
   About Concept Animation
   - Mobile: scroll-triggered fade-in (IntersectionObserver + CSS transition)
   - PC (>=992px): timed sequence — h2 centered -> moves to top-center -> Concepts fade in one by one
   ========================================================================== */

.AboutTopContainer {
  position: relative;
  width: 100%;
}

/* ---- Base (mobile-first) ---- */
.AboutTopContainer .About_Concept0,
.AboutTopContainer .About_Concept1,
.AboutTopContainer .About_Concept2,
.AboutTopContainer .About_Concept3,
.AboutTopContainer .About_Concept4 {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
  padding: 1.25rem 1rem;
}

.AboutTopContainer .About_Concept0 h2 {
  font-size: 2rem;
  text-align: center;
  margin: 0;
}

.AboutTopContainer .About_Concept1 p,
.AboutTopContainer .About_Concept2 p,
.AboutTopContainer .About_Concept3 p,
.AboutTopContainer .About_Concept4 p {
  font-size: 1rem;
  line-height: 1.9;
  margin: 0 0 1em 0;
}

/* Mobile: simply fade/slide in when visible */
.AboutTopContainer .is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   PC layout (>=992px) — timed sequence
   ========================================================================== */
@media (min-width: 992px) {

  /* The container becomes a tall stage; concept0 is pinned/centered first,
     then relocates to the top-center while concepts 1-4 stack below it. */
  .AboutTopContainer {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 2rem 6rem 2rem;
  }

  /* sticky の top はトランジションできないため、top（収まり位置）は最初から固定し、
     「中央表示」は transform: translateY() による見かけ上のズレとして表現する。
     ポイント：中央位置(translateY(38vh))は最初から静的な初期値として与え、
     transform 自体はトランジション対象に含めない。
     こうすることで「表示された瞬間に上→中央へ動いて見える」誤動作を防ぎ、
     is-visible では opacity だけがフェードする。
     is-corner 付与時にだけ transform のトランジションを有効にし、
     中央 → 上部中央への移動をなめらかに見せる（水平位置は常に中央のまま）。 */
  .AboutTopContainer .About_Concept0 {
    position: sticky;
    top: calc(2.5rem + 64px);               /* ★ 最終的な収まり位置（上部中央）。is-settledのmargin-topと揃える */  
    padding: 0;
    opacity: 0;                 /* JS reveals it at sequence start */
    text-align: center;
    z-index: 2;
    transform: translateY(24vh); /* 中央付近の位置。初期値として静的に確定させる */
    transition: opacity 0.8s ease-out; /* この時点では transform をトランジションしない */
  }

  /* JSが is-visible を付与した時点で opacity だけフェードイン（位置は変えない） */
  .AboutTopContainer .About_Concept0.is-visible {
    opacity: 1;
  }

  /* is-corner が付与された瞬間から transform のトランジションを有効化し、
     中央 → 上部中央（translateY(0)）へなめらかに移動させる */
  .AboutTopContainer .About_Concept0.is-corner {
    transform: translateY(0); /* 上部中央の位置 */
    transition: opacity 0.8s ease-out,
                transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* 移動アニメーション完了後（JSがis-settledを付与）：
     sticky を解除し、本文と同じ通常のドキュメントフローに戻す。
     これにより、スクロール時にタイトルが画面上部に居座って本文と重なるのを防ぐ。
     ★ 定着後のタイトル位置を下げたい場合は margin-top をここで調整する。
        （sticky解除後は上の .About_Concept0 の top プロパティが効かなくなるため）
        ★ 着地の瞬間にガクつかないよう、上の top の値と概ね揃えておくこと。 */
  .AboutTopContainer .About_Concept0.is-settled {
    position: static;
    margin-top: 2.5rem;      /* ← 定着後、タイトルを下げたい分だけ増やす（topと揃える） */
    margin-bottom: 2.5rem; /* 本文との間隔 */
  }

  .AboutTopContainer .About_Concept0 h2 {
    font-size: 3rem;
    display: inline-block;
    margin: 0;
    text-align: center;
    width: 100%;
    transition: font-size 1s cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Once JS adds this, the heading shrinks (alignment stays centered) */
  .AboutTopContainer .About_Concept0.is-corner h2 {
    font-size: 2rem;
  }

  .AboutTopContainer .About_Concept1,
  .AboutTopContainer .About_Concept2,
  .AboutTopContainer .About_Concept3,
  .AboutTopContainer .About_Concept4 {
    /* max-width: 720px; */
    margin: 0 0 2rem 0;
    padding: 0;
    transform: translateY(20px);
  }

  .AboutTopContainer .About_Concept1 p,
  .AboutTopContainer .About_Concept2 p,
  .AboutTopContainer .About_Concept3 p,
  .AboutTopContainer .About_Concept4 p {
    font-size: 1.15rem;
  }
}

/* Respect users who prefer reduced motion: show everything immediately, no animation */
@media (prefers-reduced-motion: reduce) {
  .AboutTopContainer .About_Concept0,
  .AboutTopContainer .About_Concept1,
  .AboutTopContainer .About_Concept2,
  .AboutTopContainer .About_Concept3,
  .AboutTopContainer .About_Concept4 {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   旧エネラボ館ギャラリー（Swiper Cards）
   ========================================================================== */

.showroomGallery {
  margin: 2rem auto 0;
  max-width: 100%;
}

/* Cards は3D変形を使うため、寸法を必ず明示する。
   親が opacity:0 の状態で初期化されても寸法が確定するようにするため。 */
.showroomSwiper {
  width: 86vw;
  max-width: 86vw;
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  overflow: visible; /* カードの影がはみ出すため */
}

.showroomSwiper .swiper-slide {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.showroomSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- キャプション（カード外・固定位置） ---- */
.showroomCaption {
  min-height: 3.4em; /* 文字数の増減でガタつかせない */
  margin: 1.25rem auto 0;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showroomCaption__text {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
  transition: opacity 0.25s ease-out;
}

.showroomCaption__text.is-fading {
  opacity: 0;
}

/* ---- 操作系（前後ボタン＋カウンタ） ---- */
.showroomControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.showroomBtn {
  width: 44px;   /* タップ領域の最低基準 */
  height: 44px;
  border: 2px solid #00a63c; /* eneGreen 系。実際の変数に合わせて調整 */
  border-radius: 50%;
  background: transparent;
  color: #00a63c;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.showroomBtn:hover,
.showroomBtn:focus-visible {
  background: #00a63c;
  color: #fff;
}

.showroomBtn:disabled {
  opacity: 0.3;
  cursor: default;
}

.showroomCounter {
  font-size: 1rem;
  min-width: 4.5em; /* 桁数変化でボタンが動かないように */
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- PC ---- */
@media (min-width: 992px) {
  .showroomSwiper {
    width: 600px;
    max-width: 600px;
    /* aspect-ratio により高さは自動で400px */
  }
}

/* ---- モーション低減 ---- */
@media (prefers-reduced-motion: reduce) {
  .showroomCaption__text {
    transition: none;
  }
}