@charset "UTF-8";
/* ==========================================================================
   components.css — c-系（複数タグをまたぐ共通コンポーネント）（SPD-v2）
   ========================================================================== */

/* キッカー（金の短い罫＋英字ラベル）
   ========================================================================== */
.c-kicker {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  color: var(--cl-gold);
  font-size: var(--fs-s);
  letter-spacing: 0.32em;
  line-height: 1.75;

  &::before {
    content: "";
    flex: 0 0 3.2rem;
    block-size: 1px;
    background-color: var(--cl-gold);
  }

  &._lt { color: var(--cl-gold-lt); }
}

/* セクション見出し（キッカー＋見出しのまとまり）
   ========================================================================== */
.c-secHead {
  display: grid;
  gap: 1.4rem;
}

.c-secTitle {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;

  &._wh { color: var(--cl-wh); }
  &._s { font-size: var(--fs-2xl); }
}

/* ボタン（紺・矢印つき）
   ========================================================================== */
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 28rem;
  padding-block: 1.8rem;
  padding-inline: 3.2rem 4.8rem;
  border: 1px solid var(--cl-navy);
  background-color: var(--cl-navy);
  color: var(--cl-wh);
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  transition:
    background-color var(--ease-t),
    border-color var(--ease-t),
    color var(--ease-t),
    box-shadow var(--ease-t),
    translate var(--ease-t) var(--ease-out),
    scale 0.15s var(--ease-out);

  &::after {
    content: "";
    position: absolute;
    inset-inline-end: 1.6rem;
    inset-block-start: 50%;
    inline-size: 1.3rem;
    block-size: 1.5rem;
    background-color: currentColor;
    mask: url(/assets/images/common/ico_arrow_dbl.svg) no-repeat center / contain;
    translate: 0 -50%;
    transition: translate var(--ease-t) var(--ease-out);
  }

  /* 押した感触（タッチでも効く） */
  &:active { scale: 0.97; }

  @media print, screen and (min-width: 1024px) {
    padding-block: 2.4rem;
    padding-inline: 4.8rem 6.4rem;
    font-size: 1.8rem;
  }

  &._line {
    border-width: 0 0 2px;
    background-color: transparent;
    color: var(--cl-navy);
  }

  &._gold {
    border-color: var(--cl-gold-dk);
    border-radius: 0.3rem;
    background-color: var(--cl-gold-dk);
    box-shadow: 0 0.4rem 0.8rem rgb(0 0 0 / 0.1), 0 1.4rem 2.8rem rgb(0 0 0 / 0.16);
  }

  &._full { inline-size: 100%; }

  /* セカンダリー（白地に紺の枠）。主ボタンの横に並べる */
  &._sec {
    background-color: var(--cl-wh);
    color: var(--cl-navy);
  }

  /* スモール（本文の中に置くボタン）。タブレットは rem が縮むので px を下限にする */
  &._sm {
    min-inline-size: 0;
    min-block-size: max(4.4rem, 44px);
    padding-block: 1.2rem;
    padding-inline: 2.2rem 4.4rem;
    font-size: max(1.3rem, 13px);

    &::after {
      inset-inline-end: 1.4rem;
      inline-size: 1.1rem;
      block-size: 1.3rem;
    }

    @media print, screen and (min-width: 1024px) {
      padding-block: 1.2rem;
      padding-inline: 2.4rem 4.6rem;
      font-size: 1.4rem;
    }
  }

  /* 暗い背景の上 */
  &._wh {
    border-color: var(--cl-wh);
    background-color: var(--cl-wh);
    color: var(--cl-navy);
  }

  /* ホバー：少し浮いて色が変わり、矢印が進む（修飾クラスより後ろに置いて上書きする） */
  @media (any-hover: hover) {
    &:hover {
      border-color: var(--cl-blue);
      background-color: var(--cl-blue);
      box-shadow: 0 0.8rem 1.6rem rgb(12 37 67 / 0.24);
      opacity: 1;
      translate: 0 -0.2rem;
    }

    &:hover::after { translate: 0.6rem -50%; }

    &._line:hover {
      border-color: var(--cl-gold);
      background-color: transparent;
      box-shadow: none;
      color: var(--cl-blue);
      translate: none;
    }

    &._gold:hover {
      border-color: color-mix(in srgb, var(--cl-gold-dk) 84%, var(--cl-wh));
      background-color: color-mix(in srgb, var(--cl-gold-dk) 84%, var(--cl-wh));
      box-shadow: 0 0.6rem 1.2rem rgb(0 0 0 / 0.14), 0 2rem 3.6rem rgb(0 0 0 / 0.2);
    }

    &._wh:hover {
      border-color: var(--cl-gold-lt);
      background-color: var(--cl-gold-lt);
      box-shadow: none;
      color: var(--cl-navy);
    }

    &._sec:hover {
      border-color: var(--cl-navy);
      background-color: var(--cl-navy);
      color: var(--cl-wh);
    }
  }
}

/* テキストリンク（矢印つき）
   ========================================================================== */
.c-linkArrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--cl-blue);
  font-size: var(--fs-s);
  font-weight: 700;
  letter-spacing: 0.04em;

  /* ホバーで下線が左から伸びる */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size var(--ease-t) var(--ease-out);

  &::after {
    content: "";
    inline-size: 1.4rem;
    block-size: 1.4rem;
    background-color: currentColor;
    mask: url(/assets/images/common/ico_arrow_s.svg) no-repeat center / contain;
    transition: translate var(--ease-t) var(--ease-out);
  }

  @media (any-hover: hover) {
    &:hover {
      background-size: 100% 1px;
      opacity: 1;
    }

    &:hover::after { translate: 0.4rem 0; }
  }

  /* 暗い背景の上 */
  &._lt { color: var(--cl-gold-lt); }
}

/* タグ
   ========================================================================== */
.c-tag {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.8rem;
  border: 1px solid var(--cl-ln-tag);
  color: var(--cl-gr);
  font-size: var(--fs-s);
  line-height: 1.75;
  white-space: nowrap;
}

/* スライダー操作（件数・進捗・前後ボタン）
   ========================================================================== */
.c-sliderNav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--cl-txt-mute);
  font-size: var(--fs-s);
  line-height: 1.75;
  font-variant-numeric: tabular-nums;

  & .c-sliderNav-bar {
    position: relative;
    inline-size: 12rem;
    block-size: 2px;
    overflow: hidden;
    background-color: var(--cl-ln);

    @media print, screen and (min-width: 640px) {
      inline-size: 18rem;
    }
  }

  & .c-sliderNav-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    background-color: var(--cl-green);
    transition: inline-size var(--ease-t);
  }

  & .c-sliderNav-btns {
    display: flex;
    gap: 0.8rem;
  }

  & .c-sliderNav-btn {
    inline-size: 3.4rem;
    block-size: 3.4rem;
    transition: opacity var(--ease-t), scale var(--ease-t) var(--ease-out), filter var(--ease-t);

    &:disabled {
      opacity: 0.28;
      cursor: default;
    }

    &:not(:disabled):active { scale: 0.9; }

    &._prev img { scale: -1 1; }
  }

  &._dk {
    color: var(--cl-wh);

    & .c-sliderNav-fill { background-color: var(--cl-gold); }
  }
}

@media (any-hover: hover) {
  .c-sliderNav-btn:not(:disabled):hover {
    filter: drop-shadow(0 0.4rem 0.8rem rgb(12 37 67 / 0.22));
    scale: 1.1;
  }
}

/* ==========================================================================
   下層ページ共通
   ========================================================================== */

/* ページ上部のファーストビュー（/about/ のKVを基準に全下層で共通化）
   写真は常時表示、コピーだけ読み込み時にふわっと出す
   ========================================================================== */
.c-hero {
  position: relative;
  display: grid;
  align-content: end;
  /* 全下層で同じ高さ：画面の高さの7割、ただし最大640px（下のパンくず・本文がのぞく高さ）。
     背の低い画面でもコピーが一番多いページ（/about/）が収まるよう下限は580px。
     トップのKVだけ全画面にして差をつける */
  min-block-size: max(58rem, min(64rem, 70svh));
  padding-block: calc(var(--header-h) + 2.4rem) 4rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--cl-wh);
  background-color: var(--cl-green-dk);

  @media print, screen and (min-width: 1024px) {
    padding-block-end: 4.8rem;
  }
}

.c-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 70% center;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    /* トップKV（.p-kv-bg）と同じ重ね色 */
    background-image: linear-gradient(69.4deg, rgb(11 31 47) 3.8%, rgb(23 48 92 / 0.45) 53%, rgb(25 61 23 / 0.5) 90.9%);
    mix-blend-mode: multiply;
  }
}

/* 背の低いKV（カテゴリの下のページ：会社情報・設計・技術支援の子ページ）。カテゴリのトップより一段低くして、本文を早く見せる */
.c-hero._low {
  min-block-size: max(40rem, min(46rem, 50svh));
}

/* 写真の下側を見せる（写真の上に明るい面があって、ヘッダーの白い文字が読みにくいとき） */
.c-hero._bottom .c-hero-bg img { object-position: 70% bottom; }

/* 写真の左側を見せる（スマホ・タブレットは幅が狭く、標準の位置だと左にある被写体が切れるとき。PCは標準の位置） */
.c-hero._left .c-hero-bg img {
  object-position: 6% center;

  @media print, screen and (min-width: 640px) { object-position: 15% center; }

  @media print, screen and (min-width: 1024px) { object-position: 70% center; }
}

.c-hero-body {
  display: grid;
  gap: 1.2rem;
  max-inline-size: 100rem;

  @media print, screen and (min-width: 1024px) {
    gap: 1.6rem;
  }

  & > * {
    animation: hero-fade-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  & > :nth-child(2) { animation-delay: 0.15s; }
  & > :nth-child(3) { animation-delay: 0.3s; }
  & > :nth-child(4) { animation-delay: 0.45s; }
  & > :nth-child(5) { animation-delay: 0.6s; }
}

@keyframes hero-fade-in {
  from {
    opacity: 0;
    translate: 0 1.6rem;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

.c-hero-catch {
  color: var(--cl-gold-lt);
  font-size: var(--fs-m);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.c-hero-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-3xl);
  font-weight: 600;

  @media print, screen and (min-width: 1024px) {
    font-size: 5.6rem;
  }

  letter-spacing: 0.0625em;
  line-height: 1.37;
}

.c-hero-lead {
  max-inline-size: 76rem;
  color: rgb(246 245 240 / 0.85);
  font-size: var(--fs-m);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.8;

  @media print, screen and (min-width: 1024px) {
    font-size: 1.8rem;
  }
}

.c-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 3.2rem;
  margin-block-start: 0.8rem;
}

/* パンくず
   ========================================================================== */
/* KVを出さないページ（お知らせの記事など）：固定ヘッダーの高さぶんの余白 */
.c-headSpacer {
  block-size: var(--header-h);
  background-color: var(--cl-green-dk);
}

.c-breadcrumb {
  padding-block: 1.4rem;
  border-block-end: 1px solid var(--cl-ln);
  color: var(--cl-gr);
  font-size: var(--fs-xs);

  & ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
  }

  & li:not(:last-child)::after {
    content: "/";
    margin-inline-start: 1rem;
    color: var(--cl-ln-tag);
  }

  & a { color: var(--cl-txt-sub); }
}

/* ページ内リンク
   ========================================================================== */
.c-anchorNav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

  & a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.6rem;
    border: 1px solid var(--cl-ln-tag);
    background-color: var(--cl-wh);
    color: var(--cl-key);
    font-size: var(--fs-s);
    font-weight: 700;

    &::after {
      content: "";
      inline-size: 1rem;
      block-size: 1rem;
      background-color: var(--cl-gold);
      mask: url(/assets/images/common/ico_chevron.svg) no-repeat center / contain;
    }
  }
}

/* セクション
   ========================================================================== */
.c-sec {
  padding-block: var(--sp-sec);

  /* 同じ地色のセクションが続くときだけ、前のセクションの下余白を間隔として使う
     （地色が変わるところは上下とも --sp-sec で揃える） */
  &:not(._bg, ._dk) + .c-sec:not(._bg, ._dk),
  &._bg + .c-sec._bg { padding-block-start: 0; }

  &._bg { background-color: var(--cl-bggr); }

  &._dk {
    background-color: var(--cl-green-dk);
    color: var(--cl-offwh);
  }
}

.c-secLead {
  max-inline-size: 86rem;
  margin-block-start: 2rem;
  font-size: var(--fs-m);
  letter-spacing: 0.04em;
  line-height: 1.9;
}

.c-secBody {
  margin-block-start: 4rem;

  &:first-child { margin-block-start: 0; }

  @media print, screen and (min-width: 1024px) {
    margin-block-start: 5.6rem;
  }
}

.c-h3 {
  margin-block-end: 1.6rem;
  padding-inline-start: 1.6rem;
  border-inline-start: 3px solid var(--cl-gold);
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.5;
}

.c-text {
  font-size: var(--fs-m);
  line-height: 1.9;

  & + .c-text { margin-block-start: 1.6rem; }
}

/* 画像＋文章
   ========================================================================== */
.c-media {
  display: grid;
  gap: 2.4rem;
  align-items: center;

  & + .c-media { margin-block-start: 6rem; }

  & figure {
    aspect-ratio: 3 / 2;
    max-inline-size: 100%;
    overflow: hidden;
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media print, screen and (min-width: 640px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6.4rem;

    &._rev figure { order: 2; }
  }
}

/* カード
   ========================================================================== */
.c-cards {
  display: grid;
  gap: 2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;

    &._col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &._col4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

.c-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  color: var(--cl-txt);

  & figure {
    aspect-ratio: 16 / 10;
    max-inline-size: 100%;
    overflow: hidden;
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--ease-t-slow);
  }

  @media (any-hover: hover) {
    &:is(a):hover { opacity: 1; }
    &:is(a):hover img { scale: 1.05; }
  }
}

.c-card-body {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding: 2rem 2.2rem 2.4rem;

  & .c-card-en {
    color: var(--cl-gold);
    font-family: var(--ff-en);
    font-size: var(--fs-xs);
    letter-spacing: 0.24em;
  }

  & h3 {
    color: var(--cl-key);
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
    line-height: 1.5;
  }

  & p {
    color: var(--cl-txt-sub);
    font-size: var(--fs-s);
    line-height: 1.8;
  }
}

/* 他の事業へ回遊するボタン（写真つきのタイル。ページの末尾）
   ========================================================================== */
.c-bizLinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;

  /* スマホは2列。5つ目が1つだけ余るので、全幅にする */
  & > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;

    & > :last-child:nth-child(odd) { grid-column: auto; }
  }

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem;
  }

  & + .c-next { margin-block-start: 4rem; }
}

.c-bizLink {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  color: var(--cl-key);
  transition: border-color var(--ease-t), box-shadow var(--ease-t);

  & figure {
    aspect-ratio: 3 / 2;
    max-inline-size: 100%;
    overflow: hidden;
  }

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--ease-t-slow);
  }

  /* 題名の右に矢印（ボタンだと分かるように） */
  & p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem 1.6rem;
    font-size: max(1.4rem, 14px);
    font-weight: 700;
    line-height: 1.6;

    &::after {
      content: "";
      flex: 0 0 auto;
      inline-size: 1.3rem;
      block-size: 1.5rem;
      background-color: var(--cl-gold);
      mask: url(/assets/images/common/ico_arrow_dbl.svg) no-repeat center / contain;
      transition: translate var(--ease-t) var(--ease-out);
    }
  }

  &:active { scale: 0.98; }

  @media (any-hover: hover) {
    &:hover {
      border-color: var(--cl-green-dk);
      box-shadow: 0 1.2rem 2.4rem rgb(12 37 67 / 0.1);
      opacity: 1;
    }

    &:hover img { scale: 1.05; }
    &:hover p::after { translate: 0.4rem 0; }
  }
}

/* 表
   ========================================================================== */
.c-table {
  inline-size: 100%;
  border-collapse: collapse;
  border-block-start: 1px solid var(--cl-green-dk);
  font-size: var(--fs-m);
  line-height: 1.8;

  & th,
  & td {
    display: block;
    padding-block: 1.2rem;
    text-align: start;
    vertical-align: top;
  }

  & th {
    padding-block-end: 0;
    color: var(--cl-green-dk);
    font-weight: 700;
  }

  & td { border-block-end: 1px solid var(--cl-ln); }

  @media print, screen and (min-width: 640px) {
    & th,
    & td {
      display: table-cell;
      padding: 2rem 2.4rem;
      border-block-end: 1px solid var(--cl-ln);
    }

    & th {
      inline-size: 24rem;
      background-color: var(--cl-bggr);
    }
  }

  &._grid {
    & th,
    & td { display: table-cell; padding: 1.2rem 1.6rem; border: 1px solid var(--cl-ln); }
    & th { inline-size: auto; background-color: var(--cl-bggr); }
  }
}

.c-tableWrap {
  overflow-x: auto;

  & .c-table._grid { min-inline-size: 72rem; }
}

/* 箇条書き
   ========================================================================== */
.c-list {
  display: grid;
  gap: 0.8rem;
  font-size: var(--fs-m);
  line-height: 1.8;

  & li {
    position: relative;
    padding-inline-start: 1.8rem;

    &::before {
      content: "";
      position: absolute;
      inset-block-start: 0.8em;
      inset-inline-start: 0.2rem;
      inline-size: 0.6rem;
      block-size: 0.6rem;
      background-color: var(--cl-gold);
    }
  }

  &._col2 {
    @media print, screen and (min-width: 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.2rem 4rem;
    }
  }

  &._chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

.c-list._chips li {
  padding: 1rem 1.8rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  font-weight: 500;

  &::before { display: none; }
}

/* ポイント（番号付きの強み・メリット）
   ========================================================================== */
.c-points {
  display: grid;
  gap: 2rem;
  counter-reset: point;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
  }

  & li {
    padding: 2.8rem 2.4rem;
    border-block-start: 2px solid var(--cl-green-dk);
    background-color: var(--cl-wh);
    counter-increment: point;

    &::before {
      content: counter(point, decimal-leading-zero);
      display: block;
      margin-block-end: 1.2rem;
      color: var(--cl-gold);
      font-family: var(--ff-en);
      font-size: 3.2rem;
      font-weight: 300;
      line-height: 1;
    }
  }

  & h3 {
    margin-block-end: 1rem;
    color: var(--cl-key);
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
    line-height: 1.5;
  }

  & p {
    color: var(--cl-txt-sub);
    font-size: var(--fs-s);
    line-height: 1.85;
  }
}

/* 手順
   ========================================================================== */
.c-flow {
  display: grid;
  gap: 1.2rem;
  counter-reset: flow;

  @media print, screen and (min-width: 640px) {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 1.6rem;
  }

  & li {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--cl-ln-card);
    background-color: var(--cl-wh);
    font-size: var(--fs-s);
    line-height: 1.7;
    counter-increment: flow;

    &::before {
      content: "STEP " counter(flow, decimal-leading-zero);
      display: block;
      margin-block-end: 0.8rem;
      color: var(--cl-gold);
      font-family: var(--ff-en);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: 0.16em;
    }
  }

  & strong {
    display: block;
    margin-block-end: 0.4rem;
    color: var(--cl-green-dk);
    font-size: var(--fs-m);
  }
}

/* FAQ
   ========================================================================== */
.c-faq {
  border-block-start: 1px solid var(--cl-ln);

  & details { border-block-end: 1px solid var(--cl-ln); }

  & summary {
    display: flex;
    gap: 1.6rem;
    padding: 2rem 0.4rem;
    color: var(--cl-key);
    font-size: var(--fs-m);
    font-weight: 700;
    line-height: 1.7;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker { display: none; }

    &::before {
      content: "Q";
      color: var(--cl-gold);
      font-family: var(--ff-en);
    }
  }

  & details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--ease-t), content-visibility var(--ease-t) allow-discrete;
  }

  & details[open]::details-content { block-size: auto; }

  & .c-faq-a {
    display: flex;
    gap: 1.6rem;
    padding: 0 0.4rem 2.4rem;
    font-size: var(--fs-m);
    line-height: 1.9;

    &::before {
      content: "A";
      color: var(--cl-green);
      font-family: var(--ff-en);
      font-weight: 700;
    }
  }
}
/* 事実の小さな一覧（認定番号など）
   ========================================================================== */
.c-facts {
  display: grid;
  gap: 0.6rem;
  margin-block-start: 1.6rem;
  font-size: var(--fs-s);
  line-height: 1.7;

  & div {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1.6rem;
    padding-block: 0.6rem;
    border-block-end: 1px dashed var(--cl-ln-tag);
  }

  & dt { color: var(--cl-gr); }
}

/* 次に見るページ
   ========================================================================== */
.c-next {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-block-start: 4rem;

  & + .c-text { margin-block-start: 2.4rem; }
}

/* ==========================================================================
   詳細ページのレイアウト（トンマナは共通のまま、中身に合わせて構図を変える）
   ・c-entry   … 3つの型に共通の「番号・分類・見出し・本文」
   ・c-overlap … 重なり（写真に白いカードが重なる。項目が1〜3つで文が短いページ）
   ・c-index   … 目次＋本文（左に固定の目次、右に項目。項目が3つ以上のページ）
   ・c-spec    … 仕様（左に見出し、右に表・数字・本文。データが中心のページ）
   暗い面は使わない。背景は白と --cl-bggr（_bg と同じ色）だけ。
   文字はタブレットで rem が縮むので px を下限にする。
   ========================================================================== */
.c-entry-num {
  color: var(--cl-gold);
  font-family: var(--ff-en);
  font-size: max(3.2rem, 32px);
  font-weight: 300;
  line-height: 1;

  @media print, screen and (min-width: 1024px) { font-size: 4.8rem; }
}

.c-entry-cat {
  color: var(--cl-gold-dk);
  font-size: max(1.2rem, 12px);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.7;
}

.c-entry-title {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: max(2.2rem, 22px);
  font-weight: 600;
  line-height: 1.6;
  text-wrap: balance;
  word-break: auto-phrase;

  @media print, screen and (min-width: 1024px) { font-size: 2.8rem; }
}

/* 見出しの補足（「見出し：補足」をコロンでつながず、1段下げて小さく出す） */
.c-entry-sub {
  margin-block-start: -0.4rem;
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: max(1.6rem, 16px);
  font-weight: 600;
  line-height: 1.6;
  text-wrap: balance;
  word-break: auto-phrase;

  @media print, screen and (min-width: 1024px) { font-size: 1.9rem; }
}

.c-entry-body {
  display: grid;
  gap: 1.6rem;
  align-content: start;

  & .c-text,
  & .c-list {
    max-inline-size: 72rem;
    font-size: max(1.5rem, 15px);
    line-height: 1.95;
    text-wrap: pretty;

    @media print, screen and (min-width: 1024px) { font-size: 1.6rem; }
  }

  & .c-text + .c-text { margin-block-start: 0; }
  & .c-next { margin-block-start: 0.8rem; }
  & .c-btn { min-inline-size: min(28rem, 100%); max-inline-size: 100%; }
  & .c-tableWrap .c-table._grid { min-inline-size: 56rem; }
}

/* 写真の見せる位置（縦長の写真を横長の枠に入れるとき） */
:is(.c-overlap-media, .c-index-media)._top img { object-position: 50% 0; }
:is(.c-overlap-media, .c-index-media)._bottom img { object-position: 50% 100%; }
:is(.c-overlap-media, .c-index-media)._left img { object-position: 0 50%; }
:is(.c-overlap-media, .c-index-media)._right img { object-position: 100% 50%; }

/* --- 重なり（B） ------------------------------------------------------- */
.c-overlap {
  padding-block: 4.8rem;

  &:nth-of-type(even) { background-color: var(--cl-bggr); }

  @media print, screen and (min-width: 1024px) { padding-block: 9.6rem; }
}

/* 直前が白いセクションのときは、その下余白を間隔として使う */
.c-sec:not(._bg) + .c-overlapList > .c-overlap:first-of-type { padding-block-start: 0; }

.c-overlap-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.c-overlap-media {
  aspect-ratio: 16 / 10;
  max-inline-size: 100%;
  overflow: hidden;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

.c-overlap-card {
  position: relative;
  display: grid;
  gap: 1.4rem;
  margin: -4rem 1.6rem 0;
  padding: 2.8rem 2.4rem 3.2rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
}

@media print, screen and (min-width: 1024px) {
  .c-overlap-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }

  .c-overlap-media {
    grid-column: 1 / span 7;
    grid-row: 1;
    aspect-ratio: 3 / 2;
  }

  .c-overlap-card {
    grid-column: 6 / span 7;
    grid-row: 1;
    gap: 1.8rem;
    margin: 0;
    padding: 5.6rem 6.4rem;
    box-shadow: 0 2.4rem 4.8rem rgb(12 37 67 / 0.08);
  }

  .c-overlap:nth-of-type(even) .c-overlap-media { grid-column: 6 / span 7; }
  .c-overlap:nth-of-type(even) .c-overlap-card { grid-column: 1 / span 7; }
}

/* --- 重なり＋目次（BとCのハイブリッド） ----------------------------------
   背景の帯（白／グレー）は全幅のまま、目次は左に固定して帯の上に重ねる（いま読んでいる項目が点灯）。
   右の領域が狭くなるので、PC でも写真とカードは縦に重ねる（カードは写真の下端にかぶさり、左右に少しずらす）。
   目次は帯より前に置き、同じセルに重ねる（帯の背景の奇数・偶数は nth-of-type で数えるので狂わない） */
.c-overlapList._index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media print, screen and (min-width: 1024px) {
  .c-overlapList._index > * { grid-column: 1; }
  .c-overlapList._index > .c-overlap:nth-of-type(1) { grid-row: 1; }
  .c-overlapList._index > .c-overlap:nth-of-type(2) { grid-row: 2; }
  .c-overlapList._index > .c-overlap:nth-of-type(3) { grid-row: 3; }
  .c-overlapList._index > .c-overlap:nth-of-type(4) { grid-row: 4; }
  .c-overlapList._index > .c-overlap:nth-of-type(5) { grid-row: 5; }
  .c-overlapList._index > .c-overlap:nth-of-type(6) { grid-row: 6; }

  /* 目次は全部の帯にまたがるセルに置き、上に固定する。幅は 24rem ぶんだけクリックを受ける */
  .c-overlapList._index > .c-index-nav._float {
    grid-row: 1 / span 6;
    align-self: start;
    inset-block-start: calc(var(--header-h) + 4rem);
    z-index: 1;
    margin-block-start: 9.6rem;   /* 最初の帯の上余白（9.6rem）に合わせて、写真・見出しの上端と目次の上端をそろえる */
    padding-block-start: 0;
    pointer-events: none;

    /* 項目が多いときは、目次の中だけスクロールする */
    & ol {
      inline-size: 24rem;
      max-block-size: calc(100svh - var(--header-h) - 8rem);
      overflow-y: auto;
      pointer-events: auto;
    }
  }

  .c-overlapList._index .c-overlap-inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-inline-start: calc(var(--inner-pad) + 30rem);
  }

  .c-overlapList._index .c-overlap-media {
    grid-column: 1;
    aspect-ratio: 21 / 9;
  }

  .c-overlapList._index .c-overlap-card {
    grid-column: 1;
    grid-row: 2;
    margin: -8rem 0 0 clamp(3.2rem, 5vw, 8rem);
    padding: 4.8rem 5.6rem;
  }

  .c-overlapList._index .c-overlap:nth-of-type(even) .c-overlap-media { grid-column: 1; }

  .c-overlapList._index .c-overlap:nth-of-type(even) .c-overlap-card {
    grid-column: 1;
    margin: -8rem clamp(3.2rem, 5vw, 8rem) 0 0;
  }
}

/* --- 目次＋本文（C） ---------------------------------------------------- */
.c-index {
  display: grid;
  gap: 4.8rem;

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: 24rem minmax(0, 1fr);
    align-items: start;
    gap: 8rem;
  }
}

.c-index-nav {
  display: none;

  /* 一覧の先頭（上の罫線・余白なし）と上端をそろえ、固定したときはヘッダーの少し下に止める */
  @media print, screen and (min-width: 1024px) {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-h) + 4rem);
  }

  & ol { border-block-start: 1px solid var(--cl-green-dk); }

  & a {
    display: grid;
    grid-template-columns: 4.4rem 1fr;
    align-items: baseline;
    padding-block: 1.4rem;
    border-block-end: 1px solid var(--cl-ln);
    color: var(--cl-txt-sub);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.6;
    transition: color var(--ease-t);

    &.is-current { color: var(--cl-key); }
  }

  & a span {
    color: var(--cl-ln-tag);
    font-family: var(--ff-en);
    font-weight: 300;
    transition: color var(--ease-t);
  }

  & a.is-current span { color: var(--cl-gold); }
}

.c-index-item {
  display: grid;
  gap: 3.2rem;
  padding-block: 4.8rem;
  border-block-start: 1px solid var(--cl-ln-tag);

  @media print, screen and (min-width: 1024px) { padding-block: 8rem; }

  /* 先頭の項目は上の罫線を出さない（パンくず・導入文のすぐ下に罫線が来て、区切りが二重に見えるため）。上の余白もセクションの余白に任せる */
  &:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }
}

.c-index-media {
  aspect-ratio: 16 / 9;
  max-inline-size: 100%;
  overflow: hidden;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media print, screen and (min-width: 1024px) { aspect-ratio: 21 / 9; }
}

.c-index-list { container-type: inline-size; }

.c-index-row {
  display: grid;
  gap: 2rem;
}

/* 見出し｜本文の2列は、項目の置かれた領域が広いときだけ（画面幅ではなく領域の幅で決める。タブレットは rem が縮むので px で指定）。
   中身が幅を使うとき（_wide：カードなど）は、見出しの下に全幅で置く */
@container (min-width: 960px) {
  .c-index-item:not(._wide) .c-index-row {
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    gap: 6.4rem;
  }
}

.c-index-head {
  display: grid;
  gap: 1rem;
  align-content: start;
}

/* 目次が横にあるページでは、ページ上部のチップは PC で隠す */
.c-anchorNav._side {
  @media print, screen and (min-width: 1024px) { display: none; }
}

/* チップしか入っていないセクション（_sp = スマホ・タブレットだけ）は、PC では丸ごと隠す。
   続く帯には、そのぶんの上余白を戻す */
.c-sec._sp {
  @media print, screen and (min-width: 1024px) { display: none; }
}

@media print, screen and (min-width: 1024px) {
  .c-sec._sp:not(._bg) + .c-overlapList > .c-overlap:first-of-type { padding-block-start: 9.6rem; }

  /* チップだけのセクションが PC で隠れると、続く白いセクションの上余白が0のままになる（パンくずに本文がくっつく）ので戻す */
  .c-sec._sp:not(._bg) + .c-sec:not(._bg, ._dk) { padding-block-start: var(--sp-sec); }

  /* 直前が見える白いセクションのときは、その下余白が間隔になる（最初の帯の上余白は0）ので、目次も0 */
  .c-sec:not(._bg, ._sp) + .c-overlapList._index > .c-index-nav._float { margin-block-start: 0; }
}

/* --- 仕様（A） ---------------------------------------------------------- */
.c-spec { container-type: inline-size; }

.c-spec-item {
  display: grid;
  align-items: start;
  gap: 2.4rem;
  padding-block: 4.8rem;
  border-block-start: 1px solid var(--cl-ln-tag);

  &:first-child { border-block-start-color: var(--cl-green-dk); }

  @media print, screen and (min-width: 1024px) { padding-block: 8rem; }
}

.c-spec-head {
  display: grid;
  gap: 1rem;
  align-content: start;
}

/* 左に見出し・右に内容は、領域が広いときだけ。見出しは追従する */
@container (min-width: 1000px) {
  .c-spec-item {
    grid-template-columns: 30rem minmax(0, 1fr);
    gap: 8rem;
  }

  .c-spec-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 4rem);
  }
}

/* --- メッセージ（M）：写真は追従、本文は読みやすい行長。最初の段落は大きな明朝のリード -------- */
.c-message { container-type: inline-size; }

.c-message-inner {
  display: grid;
  gap: 3.2rem;
}

/* 写真｜本文の2列は、領域が広いときだけ（本文が細くなりすぎないように）。写真は追従する */
@container (min-width: 1100px) {
  .c-message-inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    gap: 8rem;
  }

  .c-message-figure {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 4rem);
  }
}

.c-message-figure {
  display: grid;
  gap: 1.2rem;

  & figcaption {
    color: var(--cl-txt-sub);
    font-size: max(1.3rem, 13px);
    letter-spacing: 0.08em;
  }
}

.c-message-photo {
  aspect-ratio: 3 / 2;
  max-inline-size: 100%;
  overflow: hidden;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

.c-message-body {
  display: grid;
  gap: 2.4rem;
  align-content: start;

  & .c-text {
    max-inline-size: 60rem;
    font-size: max(1.5rem, 15px);
    line-height: 2.1;
    text-wrap: pretty;

    @media print, screen and (min-width: 1024px) { font-size: 1.6rem; }
  }

  & .c-text + .c-text { margin-block-start: 0; }
}

.c-message-lead {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: max(2rem, 20px);
  font-weight: 600;
  line-height: 1.8;
  text-wrap: balance;
  word-break: auto-phrase;

  @media print, screen and (min-width: 1024px) { font-size: 2.6rem; }
}