/* hero（このページのみリード文を持つため高さを拡張） */

.hero {
  height: 298px;
}

/* ヘッダーが重なる1024px以下では、その高さ（68px）ぶん背を伸ばす */
@media (max-width: 1024px) {
  .hero {
    height: 366px;
  }
}

.hero-lead {
  position: relative;
  z-index: 1;
  max-width: 1450px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  text-shadow: 1px 2px 0 #e60012;
}

/* table of contents（4項目・パネル幅1200） */

.toc {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
  margin-top: 72px;
  padding: var(--panel-padding-y) var(--panel-padding-x);
}

/* 4列。入りきらなくなったら2列→1列と自動で折り返す */
.toc-links {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.toc-name {
  font-size: 14px;
}

/* セクション骨格（中央寄せ型・装飾リングは左右64pxはみ出す）
   見出しを持たないセクションなのでパネルは section 側の padding-top で下げる */

.content-section {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
  margin: 40px auto 0;
  padding-top: 128px;
}

/* パネルをコンテナ化し、中身の折り返し判定を画面幅ではなくパネル自身の幅で行う */
.content-section .section-panel {
  container: panel / inline-size;
  width: 100%;
  margin-top: 0;
}

.section-ring.red {
  top: 0;
  right: -64px;
}

.section-ring.orange {
  top: 0;
  left: -64px;
}

.section-ring.green {
  top: 0;
  right: auto;
  left: -64px;
  width: 240px;
  height: 240px;
}

/* Figmaでは青リングだけ他セクションとずれた座標になっているが、デザイン側の不整合として
   施工についてセクションの赤リングと同じ位置に揃える。
   共通CSSの 293.939px は240pxの円を-15度回転させたときの外接矩形サイズなので、
   円そのものの大きさは240pxのまま。ここでは枠を実寸に戻して位置を合わせる */
.section-ring.blue {
  top: 0;
  right: -64px;
  width: 240px;
  height: 240px;
}

/* 本文 */

.body-text {
  margin: 0;
  color: var(--black);
  font-size: 14px;
  line-height: 1.7;
}

/* 本文＋画像の2カラム */

.media-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.media-copy {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* コンテナクエリ非対応環境用のフォールバック。
   本文200px＋gap32px＋画像536px が入らない幅で折り返して縦積みになる */
.media-figure {
  flex: 0 1 536px;
  height: 240px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}

.media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像を左に寄せるのは横並びのときだけ。縦積み時は常に本文が先 */
.media-row.reverse .media-figure {
  order: -1;
}

/* 本文を320px以上確保して横並びできる幅 = 320px + gap32px + 画像536px = 888px。
   パネルの内寸がこれを下回ったら縦積みにする。
   画面幅ではなくパネル幅で判定するので、余白やpaddingの計算に依存しない。
   画像はデザインの比率（536x240）を保ったまま中央に置く */
@container panel (max-width: 887px) {
  .media-row {
    flex-direction: column;
  }

  /* 縦積みでは主軸が縦向きになり flex-basis が「高さ」として効いてしまう。
     内容依存の高さに戻して、本文の下に余分な余白が出ないようにする */
  .media-copy {
    flex: 0 0 auto;
  }

  .media-figure {
    flex: 0 0 auto;
    width: 100%;
    max-width: 536px;
    align-self: center;
  }

  .media-row.reverse .media-figure {
    order: 0;
  }
}

/* ワーキングエリア */

.working-figure {
  min-height: 240px;
  margin: 32px 0 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.working-figure img {
  width: min(600px, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.working-copy {
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 海外工事について */

.overseas-copy {
  margin-top: 24px;
  padding-right: 32px;
}

/* 関連ページ */

.content-section.related .section-panel {
  margin-top: 0;
}

/* デザインは346pxのカード2枚 + gap24px。入りきらなくなったら1列に折り返す */
.related-panel .related-cards {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 716px;
  margin-top: 20px;
}

.related-panel .related-card {
  height: auto;
  min-height: 89px;
  padding: 16px 24px;
}

.related-panel .related-card-sub {
  font-size: 14px;
  line-height: 1.7;
}

.site-footer {
  margin-top: 80px;
}

@media (max-width: 767px) {
  /* このページのPC用 .hero { height } を打ち消し、共通CSSのSP（内容なりの高さ）に戻す */
  .hero {
    height: auto;
  }

  .hero-lead {
    max-width: none;
  }

  /* PC用の margin-top を打ち消し、共通のヒーローとの間隔（40px）に揃える */
  .toc {
    width: 100%;
    height: auto;
    margin-top: 40px;
    padding: 40px 20px;
  }

  .toc-links {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .content-section,
  .content-section.working {
    width: 100%;
    margin-top: 32px;
    padding-top: 96px;
  }

  .content-section.related {
    width: 100%;
    margin-top: 32px;
    padding-top: 120px;
  }

  .content-section .section-panel {
    padding: 56px 20px 40px;
  }

  .content-section.related .section-panel {
    margin-top: 0;
    padding: 40px 20px;
  }

  .section-ring,
  .section-ring.red,
  .section-ring.orange,
  .section-ring.green {
    width: 184px;
    height: 184px;
  }

  .section-ring.red {
    right: -64px;
  }

  .section-ring.orange,
  .section-ring.green {
    left: -64px;
  }

  .section-ring.blue {
    top: 0;
    right: -64px;
    width: 184px;
    height: 184px;
  }

  .section-ring.blue .section-ring-image {
    width: 184px;
    height: 184px;
  }

  .media-row {
    margin-top: 24px;
    flex-direction: column;
    gap: 24px;
  }

  .media-copy {
    flex: 0 0 auto;
    width: 100%;
  }

  /* コンテナクエリ側の max-width: 536px（中央寄せ）を外して幅いっぱいに。
     高さは375px時（335x150）の比率で追従させ、従来の150pxを下限にする */
  .media-figure {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 150px;
    aspect-ratio: 335 / 150;
  }

  .working-figure {
    min-height: 0;
    margin-top: 24px;
  }

  .working-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .working-copy {
    margin-top: 24px;
    padding-right: 0;
  }

  .overseas-copy {
    padding-right: 0;
  }

  .related-panel .related-cards {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 24px;
  }
  .site-footer {
    margin-top: 40px;
  }
}