@charset "utf-8";

/* ============================================================================
   メインビジュアル: 1枚写真（mv-single）

   構図: 「地の欠き（well）」
     セクション全面に主写真を1枚だけ敷き、**左下の角を地色の矩形で欠き取る**。
     欠きはセクションの左辺と下辺に接地するので、写真の上に「置いた板」ではなく
     「写真から抜いた穴」に見える（03 mv-fade の題箋プレートとの決定的な違い）。
     キャッチ・リード・3つの入口はすべて欠きの中に入るため、
     **文字が写真の上に一度も乗らない＝可読性が写真の明るさから独立する。**

   足していない材料（既出モジュールとの重複回避）:
     角丸 / 影 / 罫線 / スクリム / すりガラス / 格子・ガター / 傾き / ちら見せ /
     切替の指標 / ブランド色のベタ塗り帯 —— 意匠は「欠き」ひとつだけ。

   受領時からの主な修正:
     1. `.hero-title` / `.hero-lead` の `--color-on-primary`（面が無い場所で使うと
        濃色・高彩度プリセットで白地に白文字＝CR 1.00。実測 60パターン中 24件）を撤去
     2. 死にセレクタ（`._th40_module_copy_txt` / `._th40_txt_ttl` / `._th40_small_txt`。
        DOM に0件）約60行を撤去
     3. `.animated`（旧テーマの jQuery が付けるクラス）前提の演出を撤去。JS は読み込まない
     4. `padding-top: 51.67%` の旧テーマ比率ハック（1024px でセクション 120.8vh）を撤去
     5. `height: 620px !important` の固定高さを `min-height: min(78vh, 720px)` に
     6. `figure a { width: 100vw }`（32%幅の枠にビューポート全幅のリンク）を撤去
     7. 入口ラベルの「黄面に白文字（既定テーマで約1.9:1）」をやめ、地の上の文字にした
   ========================================================================== */

/* ---------------------------------------------------------------- ルート */

._th40_module_wrap {
  /* 欠き（well）の横幅。セクション幅に対する比率＋上下限で決める。
     幅を固定にすると広い画面で占有率だけが下がって意匠が消える（18番の知見）。 */
  --th40-well-w: clamp(20rem, 47%, 40rem);
  --th40-pad-x: clamp(1.25rem, 3.4vw, 3.25rem);
  --th40-pad-y: clamp(1.25rem, 2.6vw, 2.5rem);
  --th40-gap: clamp(0.75rem, 1.6vw, 1.375rem);

  position: relative;
  display: grid;
  /* 左下の1マスだけが欠き。写真は全マスに敷く */
  grid-template-columns: minmax(0, var(--th40-well-w)) minmax(0, 1fr);
  /* ★中身は auto の行に置き、fr の行は空にする（06番の知見）。
     高さが不定のグリッドで fr トラックに中身を置くと、空き行まで比例して膨らむ。 */
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: min(78vh, 720px);
  background: var(--color-bg);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
}

/* ---------------------------------------------------------- 写真（1枚） */

._th40_module_wrap > .main_visual_slick {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

/* 旧テーマ（slick）の器。JS を読み込まないので透過させ、img を直接この枠に敷く */
._th40_module_wrap > .main_visual_slick > li {
  display: contents;
}

/* ★絶対配置にして「写真の内在比が行の高さを決める」事故を防ぐ（07番の知見）。
   案件ごとに写真の縦横比が変わるので、枠の高さを写真に決めさせない。 */
._th40_module_wrap > .main_visual_slick img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------- 欠き（well）＝コピー面 */

._th40_module_wrap > ._th40_module_copy {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 1;
  /* ページの地そのもの。ここが「板」ではなく「穴」であることの根拠 */
  background: var(--color-bg);
  padding: var(--th40-pad-y) var(--th40-pad-x) calc(var(--th40-pad-y) * 0.92);
  /* 見出しは「ビューポート幅」ではなく「欠きの幅」で決まる（07番の知見） */
  container-type: inline-size;
}

._th40_module_wrap .hero-title {
  margin: 0;
  font-family: var(--font-heading);
  /* 実効サイズは cqw（＝欠きの幅）が決め、トークンは天井としてしか効かせない。
     係数は「30字のキャッチが全幅で3行以内に収まる」ことを実測して決めた
     （7.4cqw では下限 1.75rem が効いて 769px で4行になった） */
  font-size: clamp(1.5rem, 8.2cqw, var(--fs-hero-lg));
  line-height: 1.3;
  letter-spacing: 0.01em;
  /* ★--color-heading-ink は common.css に未定義。フォールバックは
     「本文色そのもの」だと階調が消えるので一段濃い色を作る（12番の知見） */
  color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));
  text-wrap: balance;
}

._th40_module_wrap .hero-lead {
  margin: 0.75rem 0 0;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.85;
  /* --color-text-muted はどのテーマでも 3.1〜3.7 にしかならないので使わない */
  color: var(--color-text);
}

/* ------------------------------------------------------ 3つの入口（導線） */

._th40_module_wrap ._th40_module_contents {
  display: flex;
  flex-wrap: nowrap;
  /* stretch にして3枚の高さを揃える。ラベルが2行になった枠があっても
     英字サブラベルの行が3枚で揃う（下端そろえ） */
  align-items: stretch;
  gap: var(--th40-gap);
  margin-top: clamp(1.125rem, 3.4cqw, 2rem);
}

._th40_module_wrap ._th40_module_contents figure {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

._th40_module_wrap ._th40_module_contents a {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--color-text);
  text-decoration: none;
}

/* common.css の a:hover{opacity:.8} でカード全体が沈むのを止める（可読性のため） */
._th40_module_wrap ._th40_module_contents a:hover,
._th40_module_wrap ._th40_module_contents a:focus-visible {
  opacity: 1;
}

._th40_module_wrap ._th40_thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 3;
  /* 広い画面で入口の写真だけが伸び、主写真の帯を食い潰すのを防ぐ */
  max-height: min(16vh, 140px);
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-bg));
}

._th40_module_wrap ._th40_thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.5s ease;
}

._th40_module_wrap ._th40_module_contents figcaption {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: 0.5rem;
}

._th40_module_wrap ._th40_module_contents figcaption p {
  position: relative;
  margin: 0;
  padding-right: 1.1em;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  /* 階調は色ではなくサイズ・字送り・ウェイトで作る（テーマ反転に強い） */
  color: var(--color-text);
}

._th40_module_wrap ._th40_module_contents figcaption span {
  display: block;
  /* ラベルが2行になった枠があっても、英字サブラベルは3枚で同じ行に揃う */
  margin-top: auto;
  padding-top: 0.15em;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--color-text);
}

/* 入口であることの合図。色面を敷かず currentColor の細線だけで作る */
._th40_module_wrap ._th40_module_contents figcaption p::after {
  content: "";
  position: absolute;
  top: 0.62em;
  right: 0.1em;
  width: 0.42em;
  height: 0.42em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.35s ease, right 0.35s ease;
}

/* ホバー: 位置とサイズは動かさない（枠の中で写真が寄るだけ）。★このモジュール唯一の動き */
._th40_module_wrap ._th40_module_contents a:hover ._th40_thumb img,
._th40_module_wrap ._th40_module_contents a:focus-visible ._th40_thumb img {
  transform: scale(1.06);
}

._th40_module_wrap ._th40_module_contents a:hover figcaption p::after,
._th40_module_wrap ._th40_module_contents a:focus-visible figcaption p::after {
  right: -0.12em;
}

._th40_module_wrap ._th40_module_contents a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* -------------------------------------------------------------- モバイル */

@media (max-width: 768px) {
  ._th40_module_wrap {
    /* 欠きを広げる。ただし写真の右の余地は残す＝構図（欠き）が全幅で成立する */
    --th40-well-w: 85%;
    --th40-pad-x: clamp(1rem, 4.4vw, 1.5rem);
    --th40-pad-y: 0.875rem;
    --th40-gap: 0.5rem;
    min-height: min(82vh, 620px);
  }

  ._th40_module_wrap .hero-title {
    /* モバイルは PC より小さく（R-6）。30字で3行に収まる係数を実測して決めた */
    font-size: clamp(1.4rem, 8.2cqw, 1.95rem);
    line-height: 1.34;
  }

  ._th40_module_wrap .hero-lead {
    margin-top: 0.45rem;
    font-size: var(--fs-small);
    line-height: 1.7;
  }

  ._th40_module_wrap ._th40_module_contents {
    margin-top: 0.875rem;
  }

  ._th40_module_wrap ._th40_thumb {
    aspect-ratio: 3 / 2;
    max-height: min(10.5vh, 78px);
  }

  ._th40_module_wrap ._th40_module_contents figcaption {
    padding-top: 0.3rem;
  }

  ._th40_module_wrap ._th40_module_contents figcaption p {
    font-size: calc(var(--fs-small) * 0.92);
    padding-right: 0;
    line-height: 1.35;
  }

  /* SP は枠が 90px 前後しかなく、矢印のぶん（約12px）でラベルが1文字だけ折り返す。
     タッチ環境にホバーは無く、写真＋ラベル全体がリンクなので合図は足りている。 */
  ._th40_module_wrap ._th40_module_contents figcaption p::after {
    display: none;
  }

  ._th40_module_wrap ._th40_module_contents figcaption span {
    font-size: calc(var(--fs-small) * 0.78);
    letter-spacing: 0.08em;
  }
}

/* ------------------------------------------------------------ 動きの停止 */

@media (prefers-reduced-motion: reduce) {
  /* common.css の a{transition: var(--transition)} もここで止める */
  ._th40_module_wrap ._th40_module_contents a,
  ._th40_module_wrap ._th40_thumb img,
  ._th40_module_wrap ._th40_module_contents figcaption p::after {
    transition: none;
  }

  ._th40_module_wrap ._th40_module_contents a:hover ._th40_thumb img,
  ._th40_module_wrap ._th40_module_contents a:focus-visible ._th40_thumb img {
    transform: none;
  }

  ._th40_module_wrap ._th40_module_contents a:hover figcaption p::after,
  ._th40_module_wrap ._th40_module_contents a:focus-visible figcaption p::after {
    right: 0.1em;
  }
}