/* ==========================================================================
   sections.css — セクション型パーツ（Figma: MV / Contact / Compliance / NEWS帯）
   --------------------------------------------------------------------------
   .ic-news-bar    640×140  NEWS帯（半透明青・左上角丸24・縦線・カテゴリタグ）
   .ic-mv          1440×900 メインビジュアル（背景写真＋2層グラデ＋波形＋背景文字）
   .ic-contact     1440×454 お問い合わせCTA（背景写真※オーバーレイは画像に焼き込み済み・見出し右寄せ・白/橙ボタン）
   .ic-page-hero   1440×616 下層ページ Hero（会社概要／お問い合わせ 共通）
   .ic-compliance  1440×635 コンプライアンス（見出し＋3カード）
   ========================================================================== */

/* --- 共通レイアウト ---------------------------------------------------------- */
/* セクション：上下 80px（ページ固有の例外は各ページCSSで上書き）*/
.ic-section { padding-block: var(--space-80); }
/* 背景メディア：absolute で親いっぱい。img は cover。位置/サイズの例外は利用側で上書き */
.ic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ic-bg img { width: 100%; height: 100%; object-fit: cover; }
/* 背景の後ろに続くコンテナは前面に */
.ic-bg ~ .ic-container,
.ic-bg ~ .ic-section__content { position: relative; z-index: 1; }
/* 青グラデの着色（TOP Company / Money Lab Member）：multiply + lighten の2層 */
.ic-bg--tint::before,
.ic-bg--tint::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ic-bg--tint::before { background: var(--gradient-company-tint); mix-blend-mode: multiply; }
.ic-bg--tint::after  { background: var(--gradient-company-light); mix-blend-mode: lighten; }
/* カード列：横並び・等幅（子は flex:1）。gap 40 既定、--gap-24 修飾子 */
.ic-card-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-40);
  width: 100%;
}
.ic-card-row--gap-24 { gap: var(--space-24); }
.ic-card-row--start { align-items: flex-start; }
.ic-card-row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) {
  .ic-card-row { flex-wrap: wrap; gap: var(--space-24); } /* 40 → 24 */
  .ic-card-row > * { flex: 1 1 18rem; }
}
/* パンくず */
.ic-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-heading);
  color: var(--color-gray-dark);
}
.ic-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-8); }
.ic-breadcrumb a:hover { color: var(--color-primary); }

/* --- NEWS帯 ---------------------------------------------------------------- */
.ic-news-bar {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  max-width: 40rem;   /* 640px */
  min-height: 8.75rem; /* 140px */
  padding-inline: var(--space-24);
  background: var(--color-news-bg);
  border-top-left-radius: var(--radius-2xl);
  overflow: hidden;
  color: var(--color-white);
}
.ic-news-bar__label {
  flex: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-loose);
  white-space: nowrap;
}
.ic-news-bar__line {
  flex: none;
  align-self: stretch;
  width: 0;
  margin-block: var(--space-2); /* 140px 帯に対し 136px の線 */
  border-left: var(--border-width) solid var(--color-white);
}
.ic-news-bar__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  min-width: 0;
}
.ic-news-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  color: var(--color-white);
}
.ic-news-bar__tag {
  flex: none;
  padding-inline: var(--space-16);
  background: var(--color-tertiary);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  white-space: nowrap;
}
.ic-news-bar__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
}

/* --- MV -------------------------------------------------------------------- */
.ic-mv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-120);
  min-height: calc(56.25rem - var(--header-height)); /* 900 − ヘッダー96 = 804px */
  overflow: hidden;
  color: var(--color-white);
}
.ic-mv__bg img {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--header-height)); /* Figma の背景はヘッダー裏から始まる */
  width: 100%;
  height: calc(100% + var(--header-height));
  object-fit: cover;
}
.ic-mv__bg::before,
.ic-mv__bg::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--header-height)) 0 0 0;
}
.ic-mv__bg::before { background: var(--gradient-mv-screen); mix-blend-mode: screen; }
/* 左側 873px の青パネル（ヘッダー下 804px）*/
.ic-mv__bg::after  {
  inset: 0 auto 0 0;
  width: 54.5625rem; /* 873px */
  max-width: 100%;
  background: var(--gradient-mv-panel);
  mix-blend-mode: multiply; /* Figma: 右端の白は無変化・左端の青のみ沈む（normal だと 873px に縦の継ぎ目が出る）*/
}
.ic-mv__wave {
  position: absolute;
  left: 0;
  top: calc(16.8125rem - var(--header-height)); /* Figma y=269 − 96 */
  z-index: 0;
  width: 100%;
  aspect-ratio: 1438.5 / 630;
  pointer-events: none;
}
.ic-mv__wave img { width: 100%; height: 100%; }
.ic-mv__bg-text {
  position: relative;
  z-index: 1;
  width: 100%;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-mv-bg);
  line-height: var(--line-height-mv-bg);
  letter-spacing: var(--letter-spacing-px);
  color: var(--color-mv-bg-text);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.ic-mv__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.ic-mv__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.ic-mv__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-hero);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-hero);
  /* 約物（「」、）のアキを詰める。和文の見出しなので PC・SP とも適用 */
  font-feature-settings: "palt";
  text-shadow: var(--shadow-text-hero);
}
/* 見出しは行単位で、下からふわっと・かすみが晴れるように出す（波形の背景に合わせた静かな演出）。
   初期状態は .ic-js 配下だけ＝JS 無効なら最初から通常表示。発火は inview.js（data-ic-inview）。*/
.ic-mv__title-line {
  display: block;
}
.ic-js .ic-mv__title-line { opacity: 0; }
/* MV は初回描画の時点で画面内＝.is-inview が最初の描画前に付くことがあるため、
   transition ではなく keyframes で出す（transition だと開始状態が描画されず一瞬で出てしまう）。*/
.ic-js .ic-mv__title.is-inview .ic-mv__title-line {
  animation: ic-mv-title-in 0.9s cubic-bezier(0.22, 0.9, 0.28, 1) var(--ic-mv-title-delay, 0s) both;
}
.ic-js .ic-mv__title-line:nth-child(2) { --ic-mv-title-delay: 0.16s; }
.ic-js .ic-mv__title-line:nth-child(3) { --ic-mv-title-delay: 0.32s; }
.ic-js .ic-mv__title-line:nth-child(4) { --ic-mv-title-delay: 0.48s; }
@keyframes ic-mv-title-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem); /* 12px */
    filter: blur(0.375rem); /* 6px */
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ic-js .ic-mv__title-line,
  .ic-js .ic-mv__title.is-inview .ic-mv__title-line {
    opacity: 1;
    animation: none;
  }
}
.ic-mv__lead {
  max-width: var(--width-mv-lead);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-shadow: var(--shadow-text-lead);
}
.ic-mv__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

/* --- Contact --------------------------------------------------------------- */
.ic-contact {
  position: relative;
  padding-block: var(--space-56);
  background: var(--color-white);
  overflow: hidden;
}
.ic-contact__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ic-contact__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
}

/* キャッチ付き（会社概要）：Heading の lead 位置にキャッチ24px＋リード */
.ic-contact__catch-block { display: flex; flex-direction: column; gap: var(--space-24); }
.ic-contact__catch {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-24);
  line-height: var(--line-height-catch); /* 40px */
  color: var(--color-primary);
}
.ic-contact__lead {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-dark);
}

/* --- Page Head（下層ページ見出し帯・Figma 2426:1530 1440×240）------------
   和文（16px Medium）＋英字（Poppins SemiBold 38px / 字間4px）を中央に縦積み。
   プライバシーポリシー等、Hero を持たない下層ページで使う。 */
.ic-page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 15rem; /* 240px */
  padding-inline: var(--space-24);
  background: var(--gradient-page-head);
  color: var(--color-text-dark);
  text-align: center;
}
.ic-page-head__ja {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
.ic-page-head__en {
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-hero);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-hero);
}

/* --- Subpage FV（下層ページ共通・Figma WF 1440×348）---------------------- */
.ic-subpage-fv {
  padding-block: var(--space-80);
  background: var(--color-gray-bg);
}
.ic-subpage-fv__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}
.ic-subpage-fv__head { display: flex; flex-direction: column; gap: var(--space-16); }
.ic-subpage-fv__en {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  color: var(--color-text-dark);
  text-transform: uppercase;
}
.ic-subpage-fv__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  color: var(--color-black-alt);
}
.ic-subpage-fv__lead {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
  color: var(--color-text-dark);
}

/* 汎用固定ページ本文 */
.ic-page-body { background: var(--color-white); }
.ic-prose { font-size: var(--font-size-body); line-height: var(--line-height-loose); color: var(--color-text-dark); }
.ic-prose > * + * { margin-top: var(--space-24); }
.ic-prose h2 {
  padding-left: var(--space-16);
  border-left: var(--border-width-3) solid var(--color-primary);
  font-size: var(--font-size-h3-lg);
  line-height: var(--line-height-heading);
  color: var(--color-black);
}
.ic-prose h3 { font-size: var(--font-size-h3); line-height: var(--line-height-heading); color: var(--color-black); }
.ic-prose ul { padding-left: var(--space-24); list-style: disc; }
.ic-prose ol { padding-left: var(--space-24); list-style: decimal; }
.ic-prose a { color: var(--color-primary); text-decoration: underline; }
.ic-prose img { border-radius: var(--radius); }
.ic-prose blockquote { padding: var(--space-16) var(--space-24); background: var(--color-blue-ice); border-radius: var(--radius); }
.ic-prose table { width: 100%; border-collapse: collapse; }
.ic-prose th, .ic-prose td { padding: var(--space-12) var(--space-16); border: var(--border-width) solid var(--color-border-member); text-align: left; }
.ic-prose th { background: var(--color-blue-ice); }

/* 404 */
.ic-404 { padding-block: var(--space-120); text-align: center; background: var(--color-white); }
.ic-404__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-24); }
.ic-404__code { font-family: var(--font-family-en); font-weight: var(--font-weight-medium); font-size: var(--font-size-display-bg); line-height: var(--line-height-display-bg); color: var(--color-heading-bg-text); }
.ic-404__title { font-weight: var(--font-weight-bold); font-size: var(--font-size-h2); line-height: var(--line-height-heading); color: var(--color-black-alt); }
.ic-404__text { font-size: var(--font-size-body); line-height: var(--line-height-loose); color: var(--color-text-dark); }
.ic-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16); margin-top: var(--space-16); }

/* --- 下層ページ Hero（1440×616・会社概要／お問い合わせ 共通）--------------- */
.ic-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38.5rem; /* 616px */
  padding-block: var(--space-112);
  background: var(--gradient-co-hero);
  overflow: hidden;
}
.ic-page-hero__shape {
  position: absolute;
  /* セクション下端に合わせる（上端ではなく下端起点）*/
  inset: auto 0 0 0;
  z-index: 0;
  pointer-events: none;
}
.ic-page-hero__shape img { width: 100%; }
.ic-page-hero__bg-text {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-mv-bg);
  /* Figma: 200px / 行高160px（= 0.8）。すべて大文字のため字面は上にはみ出さない */
  line-height: var(--line-height-mv-bg);
  /* 字面の下端（約168px）が行ボックス160pxを超えるため、background-clip:text の
     描画領域を padding で下に延長する（延ばさないと文字の下端が欠ける）*/
  padding-bottom: var(--space-16);
  letter-spacing: var(--letter-spacing-px);
  color: transparent;
  background: var(--gradient-co-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.ic-page-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-40); /* Figma: Container-1200 pt40 */
}
.ic-page-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  color: var(--color-black-alt);
}
.ic-page-hero__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  text-shadow: var(--shadow-text-hero-soft); /* TOP MV より薄い（Figma レンダリング実測）*/
}
.ic-page-hero__lead {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  text-shadow: var(--shadow-text-lead-soft);
}

/* --- Compliance ------------------------------------------------------------ */
.ic-compliance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding-block: var(--space-80);
  background: var(--color-white);
}
.ic-compliance__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-40);
}
.ic-compliance__cards > * { flex: 0 1 22.5rem; }


@media (max-width: 767px) {
  .ic-mv { gap: var(--space-160); } /* 64 → 160（2.5倍）*/
  .ic-mv__bg-text { font-size: var(--font-size-xl); }
  .ic-contact__inner { align-items: stretch; }
  /* ボタンだけ中央寄せ（見出し・リードは左揃えのまま）*/
  .ic-contact__body .ic-btn { align-self: center; }
  /* PC 幅前提の手動改行は SP では不要（全ページ共通の CTA）*/
  .ic-contact .ic-heading__lead br,
  .ic-contact__lead br { display: none; }
  /* 背景写真は下端基準に。padding-bottom を足した分だけ写真が 1:1 で下がり、
     テキストは上端基準のまま残るので、人物や手元との重なりを避けやすい */
  .ic-bg img { object-position: bottom; }
  .ic-contact { padding-block: var(--space-56) var(--space-80); }
  /* .ic-section を持たないため上下 padding は個別指定（.ic-section と同じ 48 に揃える）*/
  .ic-compliance { padding-block: var(--space-48); }
  /* カードは 22.5rem 固定だと中途半端に余白が残る → 1カラムで幅いっぱいに */
  .ic-compliance__cards { justify-content: center; gap: var(--space-24); }
  .ic-compliance__cards > * { flex: 1 1 100%; }
}
@media (max-width: 767px) {
  /* セクションの上下余白は SP では詰める（80 → 48）*/
  .ic-section { padding-block: var(--space-48); }
  /* SP は縦長のFVにして、写真の顔が上・テキストが下に来るようにする。
     背景写真の頭上の空は、写真の起点をヘッダー分よりさらに上げて画面外へ逃がす
     （下の .ic-mv__bg img）。その分 MV を詰められる。
     52.5rem（実寸672px）は「顔の下端がテキストの上に来る」最小の高さ。 */
  .ic-mv { min-height: 52.5rem; padding-bottom: var(--space-64); }
  /* 写真の起点をヘッダー分（6rem）ではなく 10rem 上へ。頭上の空がそのぶん画面外に出る */
  .ic-mv__bg img { top: calc(-1 * var(--space-160)); height: calc(100% + var(--space-160)); }
  /* 青パネルは PC の左側 873px 用。SP は「下から上へ抜ける」向きに差し替え、
     テキスト帯だけを覆って顔には色をかぶせない */
  .ic-mv__bg::after {
    inset: 0;
    width: auto;
    background: var(--gradient-mv-panel-sp);
  }
  /* 波形は Figma の y=269 固定ではなく MV 下端に置く */
  .ic-mv__wave { top: auto; bottom: 0; }
  /* 背景英字は上端のまま、見出し以下だけを下端へ寄せる（gap は最小アキとして残る）*/
  .ic-mv__content { margin-top: auto; }
  /* 背景文字は 64px 相当だと SP 幅で見切れる → 見出し最大サイズまで落として収める */
  .ic-mv__bg-text { font-size: var(--font-size-h1); }
  /* Figma は 25.6px（h2-lead）だが、依頼によりタイプスケール1段上（32px）に */
  .ic-mv__title { font-size: var(--font-size-h2); letter-spacing: var(--letter-spacing-widest); }
  /* ボタンは折り返さず左右に並べる。PC の内容幅（padding40/48＋gap24）では 390px に
     2つ入らないため、等幅で伸縮させ、左右padding とアイコン前のアキを詰める */
  .ic-mv__actions { flex-wrap: nowrap; }
  .ic-mv__actions .ic-btn {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--space-8);
    padding-inline: var(--space-16);
  }
  .ic-news-bar { flex-direction: column; align-items: flex-start; min-height: 0; padding-block: var(--space-16); border-top-left-radius: var(--radius-lg); }
  .ic-news-bar__line { display: none; }
  .ic-news-bar__item { flex-wrap: wrap; }
  .ic-news-bar__text { white-space: normal; }
  .ic-page-hero { min-height: 0; padding-block: var(--space-64); }
  .ic-page-hero__bg-text { font-size: var(--font-size-large); }
  .ic-page-hero__title { font-size: var(--font-size-h2); } /* SP は一回り大きく（h2-lead 1.6rem → h2 2rem）*/
}