/* ===========================================
   Layout — Container, Grid, Section
   =========================================== */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--full {
  max-width: 100%;
}

/* ---------- Section ---------- */
.section {
  padding-block: var(--section-padding-y);
  position: relative;
  overflow-x: clip;
}

.section--soft {
  background-color: var(--color-bg-soft);
}

.section--deep {
  background-color: var(--color-bg-deep);
  color: var(--color-base);
}

.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4,
.section--deep p {
  color: var(--color-base);
}

.section--deep p {
  color: rgba(255, 255, 255, 0.85);
}

/* セクションの上部に小さなラベル */
.section__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-sky);
  margin-bottom: var(--space-1);
}

@media (min-width: 768px) {
  .section__eyebrow {
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-widest);
    margin-bottom: var(--space-2);
  }
}

.section__title {
  margin-bottom: var(--space-3);
  font-size: clamp(1.5rem, 5.2vw, 2.75rem);
  line-height: 1.35;
  word-break: keep-all;
  line-break: strict;
}

/* モダンブラウザは text-wrap でバランス制御 */
@supports (text-wrap: balance) {
  .section__title {
    text-wrap: balance;
  }
}

/* 各行を1行に固定するスパン（.hero__title-line と同様） */
.section__title-line {
  display: block;
  white-space: nowrap;
}

/* スマホ・タブレット：長文タイトルは折り返しを許可
   (短文タイトルは収まれば自然に1行表示される)
   デスクトップ ≥1024px では nowrap で1行死守 */
@media (max-width: 1023px) {
  .section__title-line {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* 極狭画面ではタイトル本体をさらに縮小 */
@media (max-width: 360px) {
  .section__title {
    font-size: 1.375rem;
  }
}

@media (min-width: 768px) {
  .section__title {
    margin-bottom: var(--space-4);
    line-height: 1.25;
  }
}

.section__lead {
  font-size: clamp(0.9375rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-text-sub);
  max-width: 72ch;
  margin-bottom: var(--space-4);
  /* 日本語の単語が途中で割れるのを防ぎ、句読点でのみ改行されるようにする */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .section__lead {
    margin-bottom: var(--space-6);
  }
}

/* ---------- Grid Helpers ---------- */
.grid {
  display: grid;
  gap: var(--space-3);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid {
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .grid {
    gap: var(--space-5);
  }
}

/* ---------- Bento Grid Base ---------- */
.bento {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
  }
}

/* ---------- Flex Helpers ---------- */
.flex {
  display: flex;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}

.flex--col {
  flex-direction: column;
}

.flex--gap-1 { gap: var(--space-1); }
.flex--gap-2 { gap: var(--space-2); }
.flex--gap-3 { gap: var(--space-3); }
.flex--gap-4 { gap: var(--space-4); }

/* ---------- Spacing Utility ---------- */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ---------- Text Alignment ---------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ---------- Visibility ---------- */
.hidden { display: none; }

@media (max-width: 767px) {
  .hidden-mobile { display: none; }
}

@media (min-width: 768px) {
  .hidden-desktop { display: none; }
}