/* =========================================================
   components.css … ボタン・カード・見出し装飾・CTA・アイコン
   下層ページでもそのまま使う部品
   ========================================================= */
@layer components {
  /* ---------- アイコン（SVGスプライトは icons.svg を functions.php が出力） ---------- */
  .c-icon {
    display: inline-block;
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    vertical-align: -0.22em;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .c-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
  .c-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
  .c-icon--fill { fill: currentColor; stroke: none; }

  /* ---------- 見出し装飾の切り替え ----------
     is-style-* はエディタの見出しブロックのスタイル（装飾なし／中央） */
  h2.t-heading--plain,
  h3.t-heading--plain,
  h4.t-heading--plain,
  h2.is-style-plain,
  h3.is-style-plain,
  h4.is-style-plain {
    display: block;
    padding-left: 0;
    border-left: 0;
  }
  h2.t-heading--plain::before,
  h3.t-heading--plain::before,
  h2.is-style-plain::before,
  h3.is-style-plain::before {
    display: none;
  }
  h2.t-heading--centered,
  h2.is-style-centered {
    text-align: center;
    padding-left: 0;
    padding-bottom: 0.75em;
  }
  h2.t-heading--centered::before,
  h2.is-style-centered::before {
    left: 50%;
    top: auto;
    bottom: 0;
    width: 2.5em;
    height: 2px;
    border-radius: 0;
    transform: translateX(-50%);
  }

  /* ---------- セクションの見出しまわり（英字ラベル＋見出し＋右のボタン） ---------- */
  .c-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
  }
  .c-sec-head :where(h1, h2, h3, h4) {
    margin: var(--sp-2) 0 0;
  }
  .c-sec-head__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
  }
  .l-section--emphasis .t-eyebrow {
    color: var(--c-text-invert);
  }

  /* ---------- ボタン（primary / secondary / invert の3種類） ----------
     エディタのボタンブロックは、ラッパ（div.wp-block-button.is-style-*）ではなく
     中の a.wp-block-button__link に当てる（二重ボーダー防止）。ブロックは3種類とも矢印つき */
  .c-btn,
  :is(.is-style-primary, .is-style-secondary, .is-style-invert) > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-6);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    letter-spacing: 0.06em;
    line-height: 1.5;
    word-break: auto-phrase; /* スマホで折り返すとき、単語の途中で切らない（見出しと同じ） */
    transition: background var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
  }
  .c-btn--primary,
  .is-style-primary > .wp-block-button__link {
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
  }
  .c-btn--primary:hover,
  .is-style-primary > .wp-block-button__link:hover {
    background: var(--c-action-primary-hover);
  }
  .c-btn--secondary,
  .is-style-secondary > .wp-block-button__link {
    background: transparent;
    border-color: var(--c-line);
    color: var(--c-text);
  }
  .c-btn--secondary:hover,
  .is-style-secondary > .wp-block-button__link:hover {
    background: var(--c-bg);
    border-color: var(--c-action-primary);
  }
  /* 色面の上に置く白いボタン */
  .c-btn--invert,
  .is-style-invert > .wp-block-button__link {
    background: var(--c-bg);
    color: var(--c-text);
  }
  .c-btn--invert:hover,
  .is-style-invert > .wp-block-button__link:hover {
    background: var(--c-surface-alt);
  }
  /* 文章のすぐ後に置いたボタン */
  :where(p, ul, dl) + :where(.c-btn, .wp-block-buttons) {
    margin-top: var(--sp-6);
  }
  /* 右端にシルバーの丸い矢印（HTMLにSVGを書かない） */
  .c-btn--arrow,
  :is(.is-style-primary, .is-style-secondary, .is-style-invert) > .wp-block-button__link {
    padding-right: var(--sp-4);
  }
  .c-btn--arrow::after,
  :is(.is-style-primary, .is-style-secondary, .is-style-invert) > .wp-block-button__link::after {
    content: "";
    flex-shrink: 0;
    width: var(--icon-btn);
    height: var(--icon-btn);
    border-radius: 50%;
    background: var(--icon-arrow-dark) center / 18px no-repeat, var(--c-metal);
    transition: transform var(--dur-md) var(--ease);
  }
  .c-btn--arrow:hover::after,
  :is(.is-style-primary, .is-style-secondary, .is-style-invert) > .wp-block-button__link:hover::after {
    transform: translateX(4px);
  }

  /* ---------- カード（実績） ---------- */
  .c-card {
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: var(--sh-sm);
  }
  a.c-card,
  .wp-block-group.c-card {
    transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
  }
  a.c-card:hover,
  .wp-block-group.c-card:hover {
    box-shadow: var(--sh-hover);
    transform: translateY(-6px);
  }
  .l-section--emphasis .c-card {
    box-shadow: var(--sh-on-emphasis);
  }
  .c-card__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .c-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .c-card__title {
    margin: 0;
    font-size: var(--fs-body);
    text-wrap: wrap; /* 短い物件名を2行に割らない */
  }
  .c-card__meta {
    display: inline-block;
    margin-top: var(--sp-1);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  .c-card__arrow {
    flex-shrink: 0;
    width: var(--icon-btn);
    height: var(--icon-btn);
    border-radius: 50%;
    background: var(--icon-arrow-dark) center / 16px no-repeat, var(--c-surface-alt);
    transition: background var(--dur-md) var(--ease);
  }
  a.c-card:hover .c-card__arrow,
  .wp-block-group.c-card:hover .c-card__arrow {
    background: var(--icon-arrow-dark) center / 16px no-repeat, var(--c-metal);
  }
  @media (max-width: 767px) {
    .c-card__body {
      padding: var(--sp-4);
    }
    .c-card__arrow {
      display: none;
    }
  }

  /* 新着（クエリーループ）のカード・一行リスト：物件名・記事名のリンクを、カード全体に広げる */
  .wp-block-group:is(.c-card, .c-post) {
    position: relative;
  }
  :is(.c-card__title, .c-post__title) a {
    color: inherit;
  }
  .wp-block-group:is(.c-card, .c-post) :is(.c-card__title, .c-post__title) a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /* ---------- 横スライド（JSライブラリなし。CSSのスクロール＋ボタン） ---------- */
  .c-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--sp-6)) / 2.4);
    gap: var(--sp-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
  }
  .c-slider::-webkit-scrollbar {
    display: none;
  }
  .c-slider > li {
    scroll-snap-align: start;
  }
  .c-slider-nav {
    display: flex;
    gap: var(--sp-2);
  }
  .c-slider-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-md) var(--ease), color var(--dur-md) var(--ease), opacity var(--dur-md) var(--ease);
  }
  .c-slider-nav button:hover:not(:disabled) {
    background: var(--c-action-primary);
    border-color: var(--c-action-primary);
    color: var(--c-text-on-action);
  }
  .c-slider-nav button:disabled {
    opacity: 0.3;
    cursor: default;
  }
  /* 色面の上 */
  .l-section--emphasis .c-slider-nav button:hover:not(:disabled) {
    background: var(--c-bg);
    border-color: var(--c-bg);
    color: var(--c-action-primary);
  }
  @media (max-width: 767px) {
    .c-slider {
      grid-auto-columns: 82%;
    }
    .c-slider-nav button {
      width: var(--tap);
      height: var(--tap);
    }
  }

  /* ---------- 事業カード（写真＋番号＋見出し＋説明） ---------- */
  .c-biz {
    height: 100%;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-surface-alt);
  }
  .c-biz__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .c-biz__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* 写真の左側を見せる（看板の「SYSTEMWALL」の文字が切れないように） */
  .c-biz__img--left img {
    object-position: left center;
  }
  .c-biz__body {
    padding: var(--sp-6);
  }
  .c-biz__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
  }
  .c-biz__title {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-h3);
  }
  .c-biz__title .c-icon {
    margin-right: var(--sp-2);
    color: var(--c-action-primary);
  }
  .c-biz__text {
    margin-top: var(--sp-2);
    color: var(--c-text-muted);
  }

  /* ---------- チェック付きリスト ---------- */
  .c-check-list li {
    display: flex;
    gap: var(--sp-2);
    padding-block: var(--sp-2);
    color: var(--c-text-muted);
  }
  .c-check-list .c-icon {
    margin-top: 0.3em;
    color: var(--c-action-primary);
  }
  /* エディタのリストブロック：HTMLにSVGを書かず、チェックは疑似要素で出す。
     文の中の「改行しない」区切り（span.u-ib）が横並びの部品にならないよう、
     li は普通の箱にして、チェックは左の余白に置く（見た目は静的版と同じ） */
  .wp-block-list.c-check-list li {
    position: relative;
    display: block;
    padding-left: calc(var(--icon-md) + var(--sp-2));
  }
  .wp-block-list.c-check-list li::before {
    content: "";
    position: absolute;
    top: calc(var(--sp-2) + 0.3em);
    left: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    background-color: var(--c-action-primary);
    -webkit-mask: var(--icon-check) center / contain no-repeat;
    mask: var(--icon-check) center / contain no-repeat;
  }

  /* ---------- 一行リスト（コラム新着） ---------- */
  .c-post-list {
    display: grid;
    gap: var(--sp-2);
  }
  .c-post {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) var(--icon-btn);
    grid-template-areas: "img date arrow" "img title arrow";
    align-items: center;
    column-gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--c-surface-alt);
    transition: background var(--dur-md) var(--ease);
  }
  .c-post:hover {
    background: var(--c-surface-alt-hover);
  }
  .c-post__img {
    grid-area: img;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: 50%;
  }
  .c-post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-post__date {
    grid-area: date;
    align-self: end;
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    letter-spacing: var(--tr-wide);
    color: var(--c-action-primary);
  }
  .c-post__title {
    grid-area: title;
    align-self: start;
    margin: 0;
    text-wrap: pretty; /* 管理画面で入る文なので、最後の1〜2文字だけ残らないように */
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    line-height: 1.7;
  }
  .c-post::after {
    content: "";
    grid-area: arrow;
    width: var(--icon-btn);
    height: var(--icon-btn);
    border-radius: 50%;
    background: var(--icon-arrow-dark) center / 16px no-repeat, var(--c-bg);
  }
  @media (max-width: 767px) {
    .c-post {
      grid-template-columns: 64px minmax(0, 1fr);
      grid-template-areas: "img date" "img title";
      column-gap: var(--sp-4);
      padding: var(--sp-4);
      border-radius: var(--r-md);
    }
    .c-post::after {
      display: none;
    }
    .c-post__img {
      width: 64px;
      height: 64px;
    }
  }

  /* ---------- バナー（写真いっぱい＋写真の下側に文字） ---------- */
  .c-banner {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-lg);
    color: var(--c-text-invert);
  }
  .c-banner__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .c-banner__img img,
  .wp-block-image.c-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
  }
  .c-banner:hover .c-banner__img img,
  .wp-block-image.c-banner:hover img {
    transform: scale(1.04);
  }
  /* 画像ブロック版：写真全体がリンク。文字（キャプション）はクリックを写真に通す */
  .wp-block-image.c-banner img {
    aspect-ratio: 4 / 3;
  }
  .wp-block-image.c-banner .wp-element-caption {
    margin: 0;
    pointer-events: none;
  }
  /* 写真を包むリンクも箱にして、写真の高さ（100%）が枠に合うようにする */
  .wp-block-image.c-banner > a {
    display: block;
    height: 100%;
  }
  .c-banner__label,
  .wp-block-image.c-banner .wp-element-caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-5) var(--sp-5);
    background: var(--c-scrim);
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    word-break: auto-phrase; /* 単語の途中で切らない（見出しと同じ） */
  }
  .c-banner__label::after,
  .wp-block-image.c-banner .wp-element-caption::after {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
    mask: var(--icon-arrow-right) center / contain no-repeat;
    transition: transform var(--dur-md) var(--ease);
  }
  .c-banner:hover .c-banner__label::after,
  .wp-block-image.c-banner:hover .wp-element-caption::after {
    transform: translateX(4px);
  }
  @media (max-width: 767px) {
    .c-banner {
      border-radius: var(--r-md);
    }
    .c-banner__label,
    .wp-block-image.c-banner .wp-element-caption {
      padding: var(--sp-7) var(--sp-4) var(--sp-4);
    }
  }

  /* ---------- お問い合わせ誘導（全ページ共通・template-parts/cta.php・footer.php が出力） ---------- */
  .c-cta {
    padding: 0 var(--edge) var(--edge);
  }
  .c-cta__box {
    padding: var(--sp-8) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--c-surface-emphasis);
    color: var(--c-text-invert);
    text-align: center;
  }
  .c-cta .t-eyebrow {
    color: var(--c-text-invert);
  }
  .c-cta__title {
    margin: var(--sp-2) 0 var(--sp-4);
    letter-spacing: 0.08em;
  }
  .c-cta__tel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-6);
    margin-bottom: var(--sp-6);
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3-lg);
    letter-spacing: 0.06em;
  }
  .c-cta__tel-label {
    margin-right: var(--sp-2);
    font-family: var(--ff-sans);
    font-size: var(--fs-small);
  }
  .c-cta__tel-label .c-icon {
    margin-right: var(--sp-1);
  }
  @media (max-width: 767px) {
    .c-cta {
      padding: 0 var(--sp-2) var(--sp-2);
    }
    .c-cta__box {
      padding: var(--sp-7) var(--sp-4);
      border-radius: var(--r-md);
    }
    .c-cta__tel {
      flex-direction: column;
    }
    .c-cta__tel-label {
      display: block;
      margin: 0;
    }
  }

  /* ---------- 動画の再生画面（ダイアログ） ---------- */
  .c-movie {
    width: min(1200px, 92vw);
    max-width: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .c-movie::backdrop {
    background: var(--c-backdrop);
  }
  .c-movie__video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--c-ink);
  }
  .c-movie__close {
    position: absolute;
    right: 0;
    top: calc(var(--tap) * -1 - var(--sp-3));
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: 50%;
    background: var(--c-bg);
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--dur-md) var(--ease);
  }
  .c-movie__close:hover {
    background: var(--c-surface-alt-hover);
  }
  .c-movie__note {
    display: none;
    margin-top: var(--sp-4);
    font-size: var(--fs-small);
    text-align: center;
    color: var(--c-text-invert);
  }
  .c-movie.is-missing .c-movie__note {
    display: block;
  }

  /* ---------- ページトップへ戻る（footer.php が出力） ---------- */
  .c-pagetop {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: var(--z-pagetop);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
    box-shadow: var(--sh-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--sp-4));
    transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), visibility var(--dur-md), background var(--dur-md) var(--ease);
  }
  .c-pagetop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .c-pagetop:hover {
    background: var(--c-action-primary-hover);
  }

  /* =========================================================
     ここから下層ページ用（14-B バッチ1で追加）
     ========================================================= */

  /* ---------- ページヒーロー（下層共通：英字ラベル＋ページ名＋リード1文） ---------- */
  .c-page-hero {
    margin: var(--sp-4) var(--edge) 0;
    padding-block: var(--sp-9) var(--sp-8);
    border-radius: var(--r-lg);
    background: var(--c-surface-alt);
  }
  .c-page-hero__title {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
  }
  .c-page-hero__lead {
    max-width: var(--container-narrow);
    margin-top: var(--sp-5);
    font-family: var(--ff-head);
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    line-height: 1.8;
  }
  @media (max-width: 767px) {
    .c-page-hero {
      margin: var(--sp-2) var(--sp-2) 0;
      padding-block: var(--sp-8) var(--sp-7);
      border-radius: var(--r-md);
    }
    .c-page-hero__lead {
      font-size: var(--fs-body);
    }
  }

  /* ---------- パンくず ---------- */
  .c-breadcrumb {
    padding-block: var(--sp-4) 0;
  }
  .c-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  .c-breadcrumb li + li::before {
    content: "／";
    margin-right: var(--sp-2);
  }
  .c-breadcrumb a {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .c-breadcrumb a:hover {
    color: var(--c-action-primary);
  }

  /* ---------- 横長の大きな写真に白いカードを重ねる（トップ採用・採用情報・DogBe） ---------- */
  .c-overlap {
    padding-top: var(--section-py);
  }
  .c-overlap--hero {
    padding-top: var(--sp-4);
  }
  .c-overlap__img {
    position: relative;
    aspect-ratio: 21 / 9;
    margin-inline: var(--edge);
    overflow: hidden;
    border-radius: var(--r-lg);
  }
  .c-overlap__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-overlap__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-7);
    max-width: var(--container-narrow);
    margin: calc(var(--sp-10) * -1) auto 0;
    padding: var(--sp-8);
    border-radius: var(--r-lg);
    background: var(--c-bg);
    box-shadow: var(--sh-lg);
  }
  .c-overlap__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--sp-8);
    right: var(--sp-8);
    height: 4px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: var(--c-metal);
  }
  .c-overlap__title {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-h3-lg);
  }
  .c-overlap__catch {
    margin-top: var(--sp-4);
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3-lg);
    line-height: var(--lh-heading);
  }
  .c-overlap__sub {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-wide);
    color: var(--c-action-primary);
  }
  .c-overlap__card .c-btn {
    margin-top: var(--sp-6);
  }
  @media (max-width: 1080px) {
    .c-overlap__card {
      margin: calc(var(--sp-8) * -1) var(--sp-5) 0;
      padding: var(--sp-7);
    }
  }
  /* スマホ：写真を見やすく（10/22お客様指示）。写真を4:3にして、カードは重ねずに写真の下に置く */
  @media (max-width: 767px) {
    .c-overlap__img {
      aspect-ratio: 4 / 3;
      margin-inline: var(--sp-2);
      border-radius: var(--r-md);
    }
    .c-overlap__card {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-5);
      margin: var(--sp-4) var(--sp-2) 0;
      padding: var(--sp-7) var(--sp-5);
    }
    .c-overlap__card::before {
      left: var(--sp-5);
      right: var(--sp-5);
    }
    .c-overlap__catch {
      font-size: var(--fs-h3);
    }
  }

  /* ---------- 大1＋小2の中のカード ---------- */
  .l-mosaic > :first-child .c-biz__title {
    font-size: var(--fs-h3-lg);
  }
  .l-mosaic > :not(:first-child) .c-biz {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .l-mosaic > :not(:first-child) .c-biz__img {
    aspect-ratio: auto;
    height: 100%;
  }
  .l-mosaic > :not(:first-child) .c-biz__title {
    font-size: var(--fs-body);
  }
  @media (min-width: 768px) {
    .l-mosaic > :first-child .c-banner,
    .l-mosaic > :first-child .c-banner__img,
    .l-mosaic > :first-child .wp-block-image.c-banner img {
      height: 100%;
    }
    .l-mosaic > :first-child .c-banner__img,
    .l-mosaic > :first-child .wp-block-image.c-banner img {
      aspect-ratio: auto;
    }
  }
  @media (max-width: 767px) {
    .l-mosaic > :first-child .c-biz__title {
      font-size: var(--fs-h3);
    }
  }
  /* 中くらいの幅では、小さいカードを縦向き（写真が上）にする */
  @media (max-width: 1199px) {
    .l-mosaic > :not(:first-child) .c-biz {
      grid-template-columns: minmax(0, 1fr);
    }
    .l-mosaic > :not(:first-child) .c-biz__img {
      aspect-ratio: 4 / 3;
      height: auto;
    }
  }

  /* ---------- 表（会社概要・募集要項・沿革） ---------- */
  .c-table {
    border-top: 1px solid var(--c-line);
  }
  .c-table__row,
  .wp-block-table.c-table tr {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--sp-5);
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--c-line);
  }
  .c-table dt,
  .wp-block-table.c-table td:first-child {
    font-weight: var(--fw-bold);
  }
  .c-table dd a,
  .wp-block-table.c-table td a {
    color: var(--c-action-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .c-table dd a:hover,
  .wp-block-table.c-table td a:hover {
    color: var(--c-action-primary-hover);
  }
  /* エディタの表ブロック（figure.wp-block-table.c-table > table）：
     1列目＝項目名、2列目＝内容。行は上の .c-table__row と同じグリッドで並べる */
  .wp-block-table.c-table :where(table, tbody) {
    display: block;
    width: 100%;
    border: 0;
  }
  .wp-block-table.c-table td {
    display: block;
    padding: 0;
    border: 0;
  }
  .c-table__note {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  /* 狭い列に置く表（写真と横並びのとき） */
  .c-table--compact .c-table__row,
  .wp-block-table.c-table.c-table--compact tr {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  }
  /* 沿革：年月を英字ラベルと同じ色で */
  .c-table--history dt,
  .wp-block-table.c-table--history td:first-child {
    font-family: var(--ff-num);
    color: var(--c-action-primary);
  }
  @media (max-width: 767px) {
    .c-table__row,
    .wp-block-table.c-table tr {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-1);
      padding-block: var(--sp-4);
    }
  }

  /* ---------- 番号付きの流れ（順番がある工程だけに使う） ---------- */
  .c-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    counter-reset: step;
  }
  .c-steps__item {
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--c-surface-alt);
  }
  .c-steps__item::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--tap) * 1.5);
    height: calc(var(--tap) * 1.5);
    border-radius: 50%;
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
  }
  .c-steps__title {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-h3);
  }
  .c-steps__text {
    margin-top: var(--sp-2);
    color: var(--c-text-muted);
  }

  /* ---------- 項目カード（色面の上でも使える） ---------- */
  .c-point-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  .c-point-list > li,
  .c-point-list > .wp-block-group {
    padding: var(--sp-5);
    border-radius: var(--r-md);
    background: var(--c-surface-alt);
    color: var(--c-text);
  }
  /* 色面のパネルの上では白いカード */
  .l-section--emphasis .c-point-list > li,
  .l-section--alt .c-point-list > li,
  .l-section--emphasis .c-point-list > .wp-block-group,
  .l-section--alt .c-point-list > .wp-block-group {
    background: var(--c-bg);
  }
  .c-point-list__title {
    display: block;
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    line-height: var(--lh-heading);
  }
  .c-point-list__text {
    display: block;
    margin-top: var(--sp-2);
    color: var(--c-text-muted);
  }
  .l-section--alt .c-point-list > li,
  .l-section--alt .c-point-list > .wp-block-group {
    box-shadow: var(--sh-sm);
  }

  /* 項目がちょうど4つのときは4列（中くらいの幅は2列）。端数で1つだけ残らないように */
  .c-steps:has(> :nth-child(4):last-child),
  .c-point-list:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 1080px) {
    .c-steps:has(> :nth-child(4):last-child),
    .c-point-list:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767px) {
    .c-steps,
    .c-point-list,
    .c-steps:has(> :nth-child(4):last-child),
    .c-point-list:has(> :nth-child(4):last-child) {
      grid-template-columns: minmax(0, 1fr);
    }
  }


  /* ---------- 大きいチェックリスト（伝えたい項目を強く） ---------- */
  .c-check-list--lg li {
    align-items: flex-start;
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--c-line);
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    color: var(--c-text);
  }
  .c-check-list--lg .c-icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    margin-top: 0.15em;
  }
  .wp-block-list.c-check-list--lg li {
    padding-left: calc(var(--icon-lg) + var(--sp-2));
  }
  .wp-block-list.c-check-list--lg li::before {
    top: calc(var(--sp-5) + 0.15em);
    width: var(--icon-lg);
    height: var(--icon-lg);
  }

  /* ---------- 写真・図の枠 ---------- */
  .c-figure {
    overflow: hidden;
    border-radius: var(--r-lg);
  }
  .c-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* イラスト・図：切り取らない */
  .c-figure--contain {
    border-radius: 0;
  }
  .c-figure--contain img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--sp-10) * 5);
    margin-inline: auto;
    object-fit: contain;
  }
  .c-figure__caption {
    margin-top: var(--sp-3);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  @media (max-width: 767px) {
    .c-figure {
      border-radius: var(--r-md);
    }
  }

  /* ---------- 地図 ---------- */
  .c-map {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-surface-alt);
  }
  .l-split + .c-map {
    margin-top: var(--sp-7);
  }
  .c-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ---------- 認定・取り組みのロゴ ---------- */
  .c-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-7);
  }
  .c-badges img {
    width: auto;
    height: var(--sp-9);
  }

  /* ---------- 外部サイトへのリンクカード ---------- */
  .c-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    transition: background var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
  }
  .c-link-card:hover {
    background: var(--c-surface-alt);
    border-color: var(--c-action-primary);
  }
  .c-link-card__title {
    display: block;
    font-weight: var(--fw-bold);
  }
  .c-link-card__url {
    display: block;
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    word-break: break-all;
  }
  .c-link-card::after {
    content: "";
    flex-shrink: 0;
    width: var(--icon-btn);
    height: var(--icon-btn);
    border-radius: 50%;
    background: var(--icon-arrow-dark) center / 16px no-repeat, var(--c-metal);
  }
  /* エディタのグループ版（div.c-link-card > div > p.c-link-card__title > a）：
     カード全体を押せるように、中のリンクの押せる範囲をカードいっぱいに広げる */
  .wp-block-group.c-link-card {
    position: relative;
  }
  .wp-block-group.c-link-card :where(p) {
    margin: 0;
  }
  .wp-block-group.c-link-card .c-link-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
  }

  /* =========================================================
     ここから下層ページ用（14-B バッチ2で追加）
     ========================================================= */

  /* ---------- 絞り込み（実績の部位など。押せるボタン） ---------- */
  .c-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
  }
  .c-filter button,
  .c-filter a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    letter-spacing: normal; /* リンク（WP）でも、ボタン（静的版）と同じ字間に */
    padding: 0 var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: background var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease), color var(--dur-md) var(--ease);
  }
  .c-filter button:hover,
  .c-filter a:hover {
    border-color: var(--c-action-primary);
  }
  .c-filter button[aria-pressed="true"],
  .c-filter a[aria-current="page"] {
    background: var(--c-action-primary);
    border-color: var(--c-action-primary);
    color: var(--c-text-on-action);
  }

  /* ---------- ページ送り ---------- */
  .c-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
  }
  .c-pager button {
    min-width: var(--tap);
    height: var(--tap);
    padding: 0 var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
  }
  .c-pager button:hover:not(:disabled):not([aria-current="page"]) {
    border-color: var(--c-action-primary);
  }
  .c-pager button[aria-current="page"] {
    background: var(--c-action-primary);
    border-color: var(--c-action-primary);
    color: var(--c-text-on-action);
    cursor: default;
  }
  .c-pager button:disabled {
    opacity: 0.4;
    cursor: default;
  }

  /* ---------- ラベル（部位・所在地など。押せない） ---------- */
  .c-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }
  .c-tags li {
    padding: var(--sp-1) var(--sp-4);
    border-radius: var(--r-pill);
    background: var(--c-bg);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--c-text-muted);
  }

  /* ---------- 前後の記事・一覧へ戻る ---------- */
  .c-post-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-line);
  }
  .c-post-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: var(--fw-bold);
    transition: color var(--dur-md) var(--ease);
  }
  .c-post-nav a:hover {
    color: var(--c-action-primary);
  }
  .c-post-nav__next {
    justify-self: end;
    text-align: right;
  }
  .c-post-nav__label {
    display: block;
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    letter-spacing: var(--tr-wide);
    color: var(--c-text-muted);
  }
  @media (max-width: 767px) {
    .c-post-nav {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .c-post-nav__back {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: center;
    }
  }

  /* ---------- 写真タイル（押せない写真に、場所の名前を重ねる） ---------- */
  .c-photo-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
  }
  .c-photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-photo-tile figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-8) var(--sp-5) var(--sp-4);
    background: var(--c-scrim);
    color: var(--c-text-invert);
    font-family: var(--ff-head);
    font-weight: var(--fw-bold);
  }
  @media (max-width: 767px) {
    .c-photo-tile {
      border-radius: var(--r-md);
    }
    .c-photo-tile figcaption {
      padding: var(--sp-7) var(--sp-4) var(--sp-3);
      font-size: var(--fs-small);
    }
  }
  .c-photo-tile--wide {
    aspect-ratio: 21 / 9;
  }
  .c-photo-tile--portrait {
    aspect-ratio: 3 / 4;
  }
  .c-photo-tile--landscape {
    aspect-ratio: 4 / 3;
  }

  /* 一覧の4列のカードは、文字を少し詰める */
  .l-grid--4 .c-card__body {
    padding: var(--sp-4);
  }
  .l-grid--4 .c-card__arrow {
    display: none;
  }
  @media (max-width: 1080px) {
    .l-grid--4:has(.c-card) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 767px) {
    .l-grid--4:has(.c-card) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* スマホの2列カードは幅が狭いので、物件名を少し小さくして割れにくくする */
    .l-grid--4 .c-card__body {
      padding: var(--sp-3);
    }
    .l-grid--4 .c-card__title {
      font-size: var(--fs-small);
    }
  }

  /* =========================================================
     ここから下層ページ用（14-B バッチ3で追加）
     ========================================================= */

  /* ---------- 縦書きの一文（トップMVと同じ明朝。経営理念・健康経営） ---------- */
  .c-statement {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--sp-5);
  }
  .c-statement__label {
    writing-mode: vertical-rl;
    font-family: var(--ff-num);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    letter-spacing: 0.3em;
    color: var(--c-action-primary);
  }
  .c-statement__text {
    margin: 0;
    writing-mode: vertical-rl;
    font-family: var(--ff-serif);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-h3-lg);
    line-height: 1.8;
    letter-spacing: var(--tr-vertical);
  }
  .c-statement__text > span {
    display: block;
  }
  @media (max-width: 767px) {
    .c-statement {
      flex-direction: column;
      gap: var(--sp-3);
    }
    .c-statement__label,
    .c-statement__text {
      writing-mode: horizontal-tb;
    }
    .c-statement__text {
      font-size: var(--fs-h3);
      letter-spacing: var(--tr-wide);
    }
  }

  /* ---------- 項目カードの中の箇条書き ---------- */
  .c-point-list__items {
    margin-top: var(--sp-3);
    color: var(--c-text-muted);
  }
  .c-point-list__items li {
    position: relative;
    padding-left: var(--sp-4);
  }
  .c-point-list__items li + li {
    margin-top: var(--sp-1);
  }
  .c-point-list__items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-action-primary);
  }
  /* 項目が8つのときは4列（中くらいの幅は2列） */
  .c-point-list:has(> :nth-child(8):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 1080px) {
    .c-point-list:has(> :nth-child(8):last-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 767px) {
    .c-point-list:has(> :nth-child(8):last-child) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---------- 大1＋小2の中の写真タイル ---------- */
  .l-mosaic .c-photo-tile {
    aspect-ratio: 4 / 3;
  }
  @media (min-width: 768px) {
    .l-mosaic > :first-child .c-photo-tile {
      aspect-ratio: auto;
      height: 100%;
    }
  }

  /* ---------- 注意書き（小さく） ---------- */
  .c-notes {
    margin-top: var(--sp-5);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  .c-notes li + li {
    margin-top: var(--sp-1);
  }

  /* =========================================================
     ここから下層ページ用（14-B バッチ4で追加）
     ========================================================= */

  /* ---------- 読ませる本文（コラム詳細・個人情報保護方針。CMSの本文もこの中に出す） ---------- */
  .c-article > * + * {
    margin-top: 1.4em;
  }
  .c-article :where(h2, h3, h4) {
    margin-top: var(--sp-8);
  }
  .c-article :where(h2, h3, h4) + * {
    margin-top: var(--sp-4);
  }
  .c-article h2 {
    font-size: var(--fs-h3-lg);
  }
  @media (max-width: 767px) {
    .c-article h2 {
      font-size: var(--fs-h3);
    }
  }
  .c-article :where(ul, ol) {
    padding-left: 1.5em;
  }
  .c-article ul {
    list-style: disc;
  }
  .c-article ol {
    list-style: decimal;
  }
  .c-article li + li {
    margin-top: var(--sp-2);
  }
  .c-article a {
    color: var(--c-action-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .c-article a:hover {
    color: var(--c-action-primary-hover);
  }
  .c-article blockquote {
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-md);
    background: var(--c-surface-alt);
  }
  .c-article blockquote cite {
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-small);
    font-style: normal;
    color: var(--c-text-muted);
  }
  .c-article address {
    font-style: normal;
  }

  /* ---------- フォーム（Contact Form 7 でも同じクラスで組む） ---------- */
  .c-form__row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sp-5);
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--c-line);
  }
  .c-form__row:first-child {
    border-top: 1px solid var(--c-line);
  }
  .c-form__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-weight: var(--fw-bold);
  }
  .c-form__required,
  .c-form__optional {
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
  }
  .c-form__required {
    background: var(--c-action-primary);
    color: var(--c-text-on-action);
  }
  .c-form__optional {
    background: var(--c-surface-alt);
    color: var(--c-text-muted);
  }
  .c-form__input,
  .c-form__select,
  .c-form__textarea {
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-bg);
    font: inherit;
    color: var(--c-text);
  }
  .c-form__textarea {
    min-height: calc(var(--sp-10) * 1.5);
    resize: vertical;
  }
  .c-form__input:focus,
  .c-form__select:focus,
  .c-form__textarea:focus {
    border-color: var(--c-action-primary);
  }
  .c-form__hint {
    margin-top: var(--sp-2);
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  .c-form__agree {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-7);
    font-weight: var(--fw-bold);
  }
  .c-form__agree input {
    width: var(--icon-md);
    height: var(--icon-md);
    accent-color: var(--c-action-primary);
  }
  .c-form__agree a {
    color: var(--c-action-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .c-form__submit {
    margin-top: var(--sp-6);
    text-align: center;
  }
  .c-form__submit .c-btn {
    border: 0;
    cursor: pointer;
  }
  .c-form__message {
    margin-top: var(--sp-5);
    text-align: center;
    font-weight: var(--fw-bold);
    color: var(--c-action-primary);
  }
  /* 必須がそろうまで押せない（cf7-enhance.js が disabled と is-disabled をつける） */
  .c-form__submit .c-btn:is(:disabled, .is-disabled) {
    background: var(--c-surface-alt);
    color: var(--c-text-muted);
    cursor: not-allowed;
  }
  .c-form__submit .c-btn:is(:disabled, .is-disabled)::after {
    opacity: 0.5;
    transform: none;
  }
  @media (max-width: 767px) {
    .c-form__row {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-2);
      padding-block: var(--sp-4);
    }
  }

  /* ---------- 送信前の確認画面（ダイアログ。cf7-enhance.js が出力） ---------- */
  .c-confirm {
    width: min(760px, calc(100vw - var(--sp-4) * 2));
    max-width: none;
    max-height: calc(100dvh - var(--sp-4) * 2);
    margin: auto;
    padding: var(--sp-7) var(--sp-6);
    border: 0;
    border-radius: var(--r-lg);
    background: var(--c-bg);
    color: var(--c-text);
    box-shadow: var(--sh-lg);
    overflow-y: auto;
  }
  .c-confirm::backdrop {
    background: var(--c-backdrop);
  }
  .c-confirm__title {
    font-size: var(--fs-h3);
    text-align: center;
  }
  .c-confirm__lead {
    margin-top: var(--sp-3);
    text-align: center;
  }
  .c-confirm__list {
    margin-top: var(--sp-6);
  }
  .c-confirm__row {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--sp-5);
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
  }
  .c-confirm__row:first-child {
    border-top: 1px solid var(--c-line);
  }
  .c-confirm__row dt {
    font-weight: var(--fw-bold);
  }
  .c-confirm__row dd {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .c-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
  }
  .c-confirm__actions .c-btn {
    cursor: pointer;
  }
  .c-confirm__actions .c-btn:disabled {
    cursor: wait;
  }
  .c-confirm__status {
    margin-top: var(--sp-4);
    text-align: center;
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  .c-confirm__status:empty {
    display: none;
  }
  @media (max-width: 767px) {
    .c-confirm {
      padding: var(--sp-6) var(--sp-4);
    }
    .c-confirm__row {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--sp-1);
      padding-block: var(--sp-3);
    }
    .c-confirm__actions {
      flex-direction: column-reverse;
      align-items: stretch;
    }
  }
}