/* ==========================================================================
   front-page.css — TOPページ（Figma: 00_現在のデザイン > 0817_TOP）
   --------------------------------------------------------------------------
   セクション順：MV → Vision → Approach → Service → Features → Company → Compliance → Contact
   共通コンポーネント（heading / buttons / cards / sections）の上に、セクション固有のレイアウトのみ定義。
   ========================================================================== */

/* --- Vision ---------------------------------------------------------------- */
.ic-vision { background: var(--color-white); }
.ic-vision__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
}
.ic-vision__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
}
.ic-vision__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.ic-vision__lead {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2-lead);
  line-height: var(--line-height-number); /* 48px */
  color: var(--color-primary);
}
.ic-vision__desc {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose); /* 28.8px */
  color: var(--color-text-dark);
}
.ic-vision__figure {
  flex: none;
  width: 33.75rem; /* 540px */
  max-width: 100%;
}
.ic-vision__figure img { width: 100%; height: auto; }

/* --- Approach -------------------------------------------------------------- */
.ic-approach { background: var(--gradient-approach-bg); }
.ic-approach__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
}
.ic-approach__note {
  max-width: var(--width-lead);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-dark);
}
.ic-approach__action {
  display: flex;
  justify-content: flex-end;
}

/* --- Service --------------------------------------------------------------- */
.ic-service { background: var(--color-white); }
.ic-service__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.ic-service__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.ic-service__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-40) var(--space-64);
  background: var(--gradient-service-main);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.ic-service__main-body {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  width: 35rem; /* 560px */
  max-width: 100%;
}
.ic-service__main-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--color-text-dark);
}
.ic-service__main-title {
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-service); /* 36px */
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-wide);
}
.ic-service__main-desc {
  max-width: 32.6875rem; /* 523px */
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
}
.ic-service__main-media {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 560 / 346.1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ic-service__main-media img { width: 100%; height: 100%; object-fit: cover; }
.ic-service__sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: var(--space-40) var(--space-64);
  background: var(--gradient-service-sub);
  border-radius: var(--radius-xl);
}
.ic-service__sub-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 35rem;
  color: var(--color-text-dark);
}
.ic-service__sub-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-medium);
}
.ic-service__sub-desc {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
}
.ic-service__items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  width: 100%;
}

/* --- Features -------------------------------------------------------------- */
.ic-features {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-80);
  padding-block: var(--space-104);
  overflow: hidden;
}
.ic-features__bg img { object-position: bottom; }
.ic-features__title,
.ic-features__list { position: relative; z-index: 1; }
.ic-features__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1); /* Figma 42px（⚠要確認）*/
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-wide-08);
  color: var(--color-text-dark);
  text-align: center;
}
.ic-features__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-168);
}

/* --- Company --------------------------------------------------------------- */
.ic-company {
  position: relative;
  padding: var(--space-80) var(--space-40);
  overflow: hidden;
}
.ic-company__bg img { object-position: bottom; }
.ic-company__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
}

/* --- レスポンシブ（Figma 未定義：縦積みのみ）--------------------------------- */
@media (max-width: 767px) {
  .ic-vision__inner { flex-direction: column; }
  .ic-vision__body { gap: var(--space-24); }
  /* リードは中央揃え。「すべての子どもが、」の後ろの区切り（/）を
     SP でだけ行として立て、Figma の PC 3行構成は保ったまま SP は4行にする */
  .ic-vision__lead { text-align: center; }
  /* 各塊を行として立てる。この状態だと塊の間に残る <br> が空行を作るので消す
     （行の区切りはブロック化した塊自身が担う）*/
  .ic-vision__lead .ic-phrase { display: block; }
  .ic-vision__lead br { display: none; }
  .ic-vision__figure { align-self: center; }
  .ic-service__main { flex-direction: column; align-items: stretch; gap: var(--space-24); }
  /* main の内側（テキスト⇔ボタン）の実質の gap はこちら */
  .ic-service__main-body { gap: var(--space-24); }
  /* 見出しは1段下げる（main: service 36px → h2 32px / sub: h2 32px → h2-lead 25.6px 相当）*/
  .ic-service__main-title { font-size: var(--font-size-h2); }
  .ic-service__sub-title { font-size: var(--font-size-h2-lead); }
  /* ボタンだけ中央寄せ（テキストは左揃えのまま。align-items で寄せるとテキスト側の
     折り返し幅まで変わるため、対象をボタンに限定する）*/
  .ic-service__main-body .ic-btn { align-self: center; }
  .ic-service__sub { gap: var(--space-24); }
  .ic-service__main-body { width: 100%; }
  /* 縦積みでは flex-basis:0（= 高さ0）になり写真が消えるため、aspect-ratio に高さを委ねる */
  .ic-service__main-media { flex: none; width: 100%; }
  .ic-service__items { flex-direction: column; align-items: stretch; }
  .ic-approach__inner { gap: var(--space-24); margin-bottom: var(--space-24); }
  /* CTA は PC の右寄せだと SP で行頭が揃わない → 中央に置く */
  .ic-approach__action { justify-content: center; }
  /* PC 幅前提の手動改行（文中で折る）は SP で不自然に切れるため解除する */
  .ic-vision__desc br { display: none; }
  .ic-features { gap: var(--space-24); padding-block: var(--space-64); }
  .ic-features__list { gap: var(--space-40); }
}
@media (max-width: 767px) {
  .ic-service__main,
  .ic-service__sub { padding: var(--space-24); }
  /* 背景は object-position:bottom で下端基準。padding-bottom を増やすと画像だけが
     下へずれ、テキストは上に残るため、人物の顔との重なりを減らせる */
  .ic-company {
    padding-block: var(--space-48) var(--space-168);
    /* 左右のガターは中の .ic-container が持つので、セクション側は 0 にする
       （PC の var(--space-40) が残ると二重になる）*/
    padding-inline: 0;
  }
  .ic-features__title { font-size: var(--font-size-h2-lead); }
}