/* =============================================================================
   Top Concept（コンセプトセクション）
   Figma: node-id=217:6265
   ============================================================================= */

/* コンテナ */
.top-concept {
  width: 100%;
  container-type: inline-size;
}

/* =============================================================================
   波（wave-anime コンポーネント用コンテナ）
   ============================================================================= */

.top-concept__wave {
  height: 80px;
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* =============================================================================
   本体（青背景）
   ============================================================================= */

.top-concept__body {
  background-color: var(--color-primary);
  width: 100%;
}

/* 内部レイアウト：写真（左）＋テキスト（右）を横並び
   max-width: 1264px = コンテンツ 1200px + 余白 32px × 2 */
.top-concept__inner {
  display: flex;
  gap: var(--margin-40);
  margin: 0 auto;
  justify-content: center;
  padding: var(--margin-40) var(--margin-32);
}

/* =============================================================================
   写真エリア（2枚重ね）
   Figma 値: メイン 630×420 / サブ 379×253（left: 484px, top: 210px）
   ============================================================================= */

/* コンテナサイズ（Figma 863×463px を 73.9% スケール → 638×342px）
   ※ max-width: 1200px コンテンツ内に収めるため比例縮小 */
.top-concept__images {
  position: relative;
  width: 638px; /* 863 × 73.9% */
  height: 342px; /* 463 × 73.9% */
  flex-shrink: 0;
}

/* メイン画像（Figma 630×420 → 466×310） */
.top-concept__image-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 466px;
  height: 310px;
  border: 1px solid var(--color-white);
  overflow: hidden;
}

.top-concept__image-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* サブ画像（Figma left:484, top:210, 379×253 → left:358, top:155, 280×187） */
.top-concept__image-sub {
  position: absolute;
  left: 358px;
  top: 155px;
  width: 280px;
  height: 187px;
  border: 1px solid var(--color-white);
  overflow: hidden;
}

.top-concept__image-sub img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
   テキストエリア
   ============================================================================= */

.top-concept__text {
  width: 100%;
  max-width: 640px;
}

/* heading-2 のカラー・テキスト揃えをオーバーライド（フォント・下線は heading--mincho が担当） */
.top-concept__heading {
  color: var(--color-white);
  text-align: left;
}

/* paragraph のカラーを白にオーバーライド */
.top-concept__paragraph {
  color: var(--color-white);
}

/* =============================================================================
   IntersectionObserver アニメーション（写真→テキスト時差フェードイン）
   base.css の [data-animate] を使用。テキストは data-animate-delay="300" で遅延
   ============================================================================= */

/* =============================================================================
   レスポンシブ
   注: 横並びレイアウトは写真638px + gap40px + テキスト最小 = 約900px 必要なため
       900px 以下で縦積みに切り替える
   ============================================================================= */

@container (max-width: 1400px) {
  .top-concept__inner {
    flex-direction: column;
    align-items: center;
    padding: var(--margin-40) var(--margin-16);
  }

  /* 画像コンテナをコンテナ幅に追従させつつアスペクト比を維持 */
  .top-concept__images {
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 863 / 463;
  }

  /* 絶対配置座標をパーセント換算（863×463 ベース） */
  .top-concept__image-main {
    width: 73.0%; /* 630 / 863 */
    height: 90.7%; /* 420 / 463 */
  }

  .top-concept__image-sub {
    left: 56.1%; /* 484 / 863 */
    top: 45.4%; /* 210 / 463 */
    width: 43.9%; /* 379 / 863 */
    height: 54.6%; /* 253 / 463 */
  }
}