/* ============================================================
   component-page.css — 下層ページの部品（c-）
   読み込み順は component-block.css の後
   ============================================================ */

/* --- 下層ページのヒーロー -------------------------------- */
.c-page-hero {
  position: relative;
  background: var(--color-bg-cta-to);
  padding-block-start: var(--header-h);
}

.c-page-hero__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-14) var(--gutter) var(--space-16);
}

.c-page-hero__title {
  font-weight: var(--fw-black);
  font-size: clamp(2.875rem, 5.36vw, 6.5rem);
  line-height: 1.1;
  letter-spacing: 0.073em;
  /* 長音「ー」が行頭に落ちないようにする（375pxで「プライバシ／ーポリシー」になっていた。2026-09-21） */
  line-break: strict;
}

.c-page-hero__lead {
  font-size: clamp(0.9375rem, 1.875vw, 2.375rem);
  line-height: 1.94;
  letter-spacing: var(--ls-md);
}

.c-page-hero__media {
  position: relative;
  min-height: 15rem;
}

.c-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-page-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(8 9 10 / .85) 0%, rgb(8 9 10 / .1) 60%);
}

.c-page-hero__vertical { display: none; }

.c-label--wide {
  font-size: clamp(0.75rem, 1.23vw, 1.5rem);
  letter-spacing: 0.057em;
  margin-block-end: var(--space-8);
}

.c-rule--lg {
  width: 5.75rem;
  margin-block: var(--space-16) var(--space-14);
}

.c-page-hero--split {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .c-page-hero--split .c-page-hero__media { min-height: 26.25rem; }
}

@media (min-width: 1240px) {
  /* 左右に分けるのは1240pxから。768pxでは文章列が284pxしか取れず見出しが折り返すため */
  .c-page-hero--split {
    flex-direction: row-reverse;
    /* XDのヒーローは1920pxのとき999px＝画面幅の52.03% */
    min-height: max(32.5rem, 52.03vw);
    padding-block-start: 0;
  }

  .c-page-hero--split .c-page-hero__body  { flex: 0 0 41.93%; min-width: 0; }
  .c-page-hero--split .c-page-hero__media { flex: 1 1 0; min-width: 0; }

  .c-page-hero--split .c-page-hero__body {
    /* ヘッダーが上に重なるので、その下の範囲で文章を上下中央にそろえる。
       XDのヘッダーの帯は実装より16px高いので、その分だけ足す */
    justify-content: center;
    padding-block: calc(var(--header-h) + 0.75rem) 0;
    padding-inline: var(--gutter) 0;
  }

  .c-page-hero--split .c-page-hero__veil {
    background: linear-gradient(90deg, rgb(8 9 10 / .98) 0%, rgb(8 9 10 / .2) 24%, rgb(8 9 10 / 0) 55%);
  }

  .c-page-hero__vertical {
    display: block;
    position: absolute;
    /* 太さを明示する（書体の読み込み範囲を広げた際に細くなるのを防ぐ・2026-09-08） */
    font-weight: var(--fw-semibold);
    /* 縦組みなので論理プロパティは天地・左右が入れ替わる。物理プロパティで指定する */
    right: 5.5rem;
    top: 39.5%;
    writing-mode: vertical-rl;
    font-family: var(--font-en);
    font-size: clamp(0.6875rem, 1.16vw, 1.5rem);
    letter-spacing: 0.159em;
    color: var(--color-text-90);
  }

  .c-page-hero__vertical::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 15.94rem;
    margin-top: var(--space-3);
    vertical-align: middle;
    background: var(--color-accent);
  }
}

/* --- 当たり前を、徹底する。 ------------------------------ */
.c-craft {
  background: var(--color-bg-light-3);
  padding-block: 0;
}

.c-craft__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-block: var(--space-12);
}

.c-craft__body {
  margin-block-start: 0;
  font-size: var(--fs-sm);
  line-height: 2.1;
  letter-spacing: 0;
  color: var(--color-text-dark-72);
}

.c-craft .c-rule {
  width: 4.75rem;
  height: 3px;
  margin-block: var(--space-10) var(--space-9);
}

.c-craft .c-heading {
  line-height: 1.364;
  letter-spacing: 0.065em;
}

.c-craft__grid {
  display: grid;
  gap: 0.4375rem;
}

.c-craft__row {
  display: grid;
  gap: 0.4375rem;
  grid-template-columns: 1fr 1fr;
  /* 写真の元サイズで枠が押し広げられないようにする */
  min-width: 0;
}

.c-craft__row > * { min-width: 0; min-height: 0; }

.c-craft__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (min-width: 768px) {
  .c-craft {
    /* XD実測：画像の枠の上下に32pxずつ余白がある */
    padding-block: var(--space-8);
  }

  .c-craft__row--3 { grid-template-columns: repeat(3, 1fr); }

  /* XD実測：枠幅1179pxに対して上段308px・下段279px */
  .c-craft__row--2 { aspect-ratio: 1179 / 308; grid-template-columns: 1.172fr 1fr; }
  .c-craft__row--3 { aspect-ratio: 1179 / 279; }

  .c-craft__img { aspect-ratio: auto; }
}

@media (min-width: 1240px) {
  /* 文章列が320pxを割るので、当たり前を〜も1240pxから左右に分ける */
  .c-craft__inner {
    flex-direction: row-reverse;
    gap: var(--space-12);
    align-items: center;
    padding-block: 0;
  }

  .c-craft__inner > *:last-child {
    flex: 1 1 0;
    min-width: 0;
    padding-block: var(--space-5) var(--space-12);
  }

  /* XD実測：画像の枠は1176px（コンテナ1728pxの68.05%） */
  .c-craft__grid { flex: 0 0 68.23%; min-width: 0; }

}

/* --- 行動指針 -------------------------------------------- */
.c-principles { padding-block: 2.5625rem var(--space-8); }

.c-principle:last-child { border-block-end: 0; }

.c-principles__title {
  grid-area: title;
  font-weight: var(--fw-medium);
  font-size: clamp(1.25rem, 1.62vw, 2rem);
  letter-spacing: 0.16em;
  color: var(--color-accent);
}

/* 1239px以下は「写真 → 見出し → 一覧」の順に置く（1240px以上は見出しが先で左右2列） */
.c-principles__body {
  display: grid;
  grid-template-areas: "media" "title" "list";
  row-gap: var(--space-12);
}

.c-principles__inner { display: contents; }

.c-principles__list  { grid-area: list; }
.c-principles__media { grid-area: media; }

.c-principle {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  gap: var(--space-5);
  align-items: start;
  /* XDは3行の項目だけ間隔が詰まっており全部は合わせきれない。5項目の誤差が最小になる値 */
  padding-block: var(--space-4) 1.375rem;
  border-block-end: 1px solid var(--color-line-accent);
}

.c-principle__no {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

/* 1239px以下は共通の決まり（項目の見出し18px）。1240px以上はXD比例 */
.c-principle__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-lg);
}

/* 1239px以下は共通の決まり（本文15px）。1240px以上はXD比例 */
.c-principle__body {
  font-size: 0.9375rem;
  line-height: 1.682;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-72);
}

.c-principles__media {
  display: grid;
  gap: var(--space-1);
}

.c-principles__media img {
  width: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .c-principle { grid-template-columns: 7.5rem 1fr; gap: 3.375rem; }
  .c-principle__no { font-size: clamp(2.5rem, 5.05vw, 6.06rem); font-stretch: 89%; }
}

@media (min-width: 1240px) {
  .c-principles__body { display: block; }

  .c-principle__title { font-size: clamp(1.1875rem, 1.61vw, 2rem); }
  .c-principle__body  { font-size: clamp(0.8125rem, 1.115vw, 1.34rem); }

  .c-principles__inner {
    display: grid;
    /* XD実測：左の一覧893px・右の写真810px・間は56px */
    grid-template-columns: 893fr 810fr;
    gap: var(--space-14);
    align-items: start;
    grid-template-areas: "list media";
  }
}

/* --- 締め ------------------------------------------------ */
.c-closing {
  padding-block: 0 var(--space-10);
  text-align: center;
}

.c-closing__divider {
  display: block;
  height: 1px;
  background: var(--color-line);
  margin-block-end: 2.375rem;
}

.c-closing__title {
  font-weight: var(--fw-medium);
  font-size: clamp(1.625rem, 2.67vw, 3.3rem);
  line-height: 1.45;
  letter-spacing: 0.118em;
  /* 狭い画面で「出る。」だけが次の行に残らないよう、2行の長さをそろえる */
  text-wrap: balance;
}

.c-closing__note {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 375pxでも一文が1行に収まるよう、線と隙間の下限を小さくする（1920pxは28px＝XD実測） */
  gap: clamp(0.875rem, 1.46vw, 1.75rem);
  margin-block-start: 1.1875rem;
  /* 375pxは1行に収めるため14px、430px以上は共通の決まりの15px。1240px以上はXD比例 */
  font-size: clamp(0.875rem, calc(0.875rem + (100vw - 375px) * 0.0182), 0.9375rem);
  letter-spacing: var(--ls-md);
  color: var(--color-text-90);
}

@media (min-width: 1240px) {
  /* 1240px以上はXD比例に戻す（1920pxで約30px） */
  .c-closing__note { font-size: clamp(0.875rem, 1.55vw, 2rem); }
}

.c-closing__line {
  display: block;
  /* 1920pxで52px＝XD実測。狭い画面では20pxまで縮める */
  width: clamp(1.25rem, 3.4vw, 3.25rem);
  height: 2px;
  background: var(--color-accent);
  flex: none;
}

/* --- 写真を敷いた下層ヒーロー ---------------------------- */
.c-page-hero--photo {
  overflow: hidden;
  min-height: 25rem;
  display: flex;
  align-items: center;
}

.c-page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-page-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--rgb-ink) / .92) 0%, rgb(var(--rgb-ink) / .72) 60%, rgb(var(--rgb-ink) / .9) 100%);
}

.c-page-hero__title--spaced {
  font-size: clamp(2.5rem, 5.34vw, 6.68rem);
  letter-spacing: 0.21em;
  font-weight: var(--fw-bold);
}

/* 写真を敷いたヒーローは .l-container の内側にあるので左右の余白を重ねない。
   ヘッダーぶんの逃げは .c-page-hero 側の --header-h が持つので、ここでは足さない */
.c-page-hero--photo .c-page-hero__body {
  padding-inline: 0;
  padding-block-start: var(--space-1);
}

.c-page-hero--photo .c-page-hero__lead {
  margin-block-start: 2.75rem;
  font-size: clamp(1.0625rem, 1.68vw, 2.1rem);
  line-height: 1.52;
  letter-spacing: 0;
}

/* 事業内容：ヘッダーぶんの逃げ */
.c-page-hero--rail .c-page-hero__body { padding-block: 2rem 4.25rem; }

.c-page-hero--rail .c-label--wide { margin-block-end: var(--space-3); }

.c-page-hero--split .c-label--wide { margin-block-end: 2rem; }

.c-page-hero--md .c-label--wide { margin-block-end: 0.4375rem; letter-spacing: 0.01em; }

.c-page-hero--split .c-page-hero__lead + .c-page-hero__lead { margin-block-start: 1.75rem; }

/* 会社概要・お知らせ：見出しがひとまわり小さく、行間が広い型 */
.c-page-hero--photo.c-page-hero--md { min-height: max(29.375rem, 43.6vw); }

/* 下層ページの上部は事業内容と同じ形・同じ高さにそろえる（2026-09-21 園田さん指示）。1920pxで747px */
.c-page-hero--photo.c-page-hero--rail { min-height: max(29.375rem, 38.9vw); }

/* 下層ページの上部に置くパンくず（2026-09-21 園田さん指示）。見出しとの間を空ける */
.c-page-hero__crumb { margin-block-end: var(--space-8); }

.c-page-hero--photo.c-page-hero--tall { min-height: max(29.375rem, 47.9vw); }

/* お知らせ一覧：見出しが英字で大きく、説明文もひとまわり大きい型 */
.c-page-hero--photo.c-page-hero--news { min-height: max(29.375rem, 43.6vw); }

.c-page-hero--news .c-page-hero__body { padding-block-start: 10.125rem; }

.c-page-hero--news .c-page-hero__text {
  margin-block-start: 42px;
  font-size: clamp(0.9375rem, 1.5vw, 1.88rem);
  line-height: 1.83;
}

/* お問い合わせ：見出しが小さく行間が広い型 */
.c-page-hero--photo.c-page-hero--sm { min-height: max(29.375rem, 46.9vw); }

.c-page-hero--sm .c-page-hero__title {
  font-size: clamp(2.25rem, 4.84vw, 6.05rem);
  letter-spacing: 0.02em;
}

.c-page-hero--sm .c-rule--lg { margin-block: var(--space-6) var(--space-8); }

.c-page-hero--sm .c-page-hero__lead {
  margin-block-start: var(--space-6);
  font-size: clamp(1rem, 1.77vw, 2.2rem);
  line-height: 1.62;
  letter-spacing: 0;
}

.c-page-hero--sm .c-page-hero__body { padding-block-start: 3.875rem; }

.c-page-hero--sm .c-page-hero__text {
  margin-block-start: var(--space-14);
  font-size: clamp(0.9375rem, 1.35vw, 1.7rem);
  line-height: 1.92;
}

/* 会社概要のヒーローに薄く重なるブランドマーク */
.c-page-hero__watermark {
  position: absolute;
  inset-block-start: 18%;
  inset-inline-end: 16%;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  pointer-events: none;
}

.c-page-hero__watermark svg { width: clamp(6rem, 10.4vw, 13rem); height: auto; }

.c-page-hero__watermark-name {
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 3.4vw, 4.25rem);
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .c-page-hero__watermark { display: flex; }
}

/* 施工実績：説明文が大きい型 */
.c-page-hero--photo.c-page-hero--lg { min-height: max(29.375rem, 39.6vw); }

.c-page-hero--lg .c-page-hero__text {
  margin-block-start: var(--space-10);
  font-size: clamp(0.9375rem, 1.51vw, 1.9rem);
  line-height: 2.03;
}

.c-page-hero--lg .c-page-hero__body { padding-block-start: 7.75rem; }

.c-page-hero--md .c-page-hero__body { padding-block-start: 4.125rem; }

.c-page-hero--md .c-page-hero__title {
  font-size: clamp(2.5rem, 4.95vw, 6.2rem);
  letter-spacing: 0.214em;
}

.c-page-hero--md .c-page-hero__lead {
  margin-block-start: var(--space-14);
  font-size: clamp(1rem, 1.56vw, 1.95rem);
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.c-page-hero--md .c-page-hero__text {
  margin-block-start: var(--space-9);
  font-size: 0.9375rem;
  line-height: 2.31;
}

.c-page-hero__text {
  margin-block-start: 1.44rem;
  /* 1239px以下は共通の決まり（本文15px）。1240px以上はXD比例 */
  font-size: 0.9375rem;
  line-height: 2.13;
  letter-spacing: var(--ls-sm);
  color: var(--color-text-93);
}

.c-page-hero__side { display: none; }

.c-page-hero__crest {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: -2px;
  z-index: 2;
  width: 8.75rem;
  height: auto;
}

@media (min-width: 768px) {
  .c-page-hero--photo { min-height: 29.375rem; }

  .c-page-hero__scrim {
    background: linear-gradient(94deg, rgb(var(--rgb-ink) / .99) 0%, rgb(var(--rgb-ink) / .96) 30%, rgb(var(--rgb-ink) / .62) 52%, rgb(var(--rgb-ink) / .18) 78%, rgb(var(--rgb-ink) / .35) 100%);
  }

  .c-page-hero__crest { width: 14.375rem; }
}

@media (min-width: 1240px) {
  /* 事業内容は左に縦組みの帯があり、本文はその右（画面左から269px）から始まる */
  .c-page-hero--rail .c-page-hero__body { padding-inline-start: 10.81rem; }

  .c-page-hero--rail .c-page-hero__side { inset-inline-start: 4.5625rem; }

  .c-page-hero__side {
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--space-9);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    z-index: 2;
    margin: 0;
  }

  .c-page-hero__side-text {
    writing-mode: vertical-rl;
    font-family: var(--font-en);
    /* 太さを明示する。書体の読み込み範囲を100..900に広げた際、
       指定が無いと400で描かれて細くなった（2026-09-08） */
    font-weight: var(--fw-semibold);
    font-size: clamp(0.625rem, 0.65vw, 0.78rem);
    letter-spacing: 0.36em;
    color: var(--color-text-85);
  }

  /* XD実測：縦組みは上から345px、線は135px */
  .c-page-hero--rail .c-page-hero__side {
    justify-content: flex-start;
    padding-block-start: max(6rem, 17.97vw);
  }

  .c-page-hero__side-line {
    display: block;
    width: 1px;
    height: max(4rem, 7.03vw);
    background: var(--color-accent);
  }
}

/* --- 5つの事業領域 --------------------------------------- */
.c-domains {
  background: var(--color-bg-light-3);
  color: var(--color-text-dark);
  padding-block: var(--space-10) 3.9375rem;
}

.c-domains__inner {
  display: grid;
  gap: var(--space-10);
}

.c-domains__title {
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 2.6vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: 0.097em;
}

.c-domains .c-label--wide { letter-spacing: 0.094em; }

.c-domains .c-label--wide { margin-block-end: var(--space-2); }

.c-domains__body {
  margin-block-start: 1.8125rem;
  font-size: 0.9375rem;
  line-height: 2.16;
  letter-spacing: 0;
  color: var(--color-text-dark-85);
}

.c-domains__list { gap: 0; }

.c-domain {
  padding: var(--space-1) var(--space-2);
  border-inline-start: 1px solid var(--color-line-dark);
  text-align: center;
}

.c-domain__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 6.5rem;
  color: var(--color-text-dark);
}

.c-domain__icon svg { width: 6.5rem; height: 6.5rem; }

.c-domain__title {
  margin-block-start: var(--space-8);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-lg);
}

.c-domain__body {
  margin-block-start: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-text-dark-66);
}

@media (min-width: 1240px) {
  .c-domains__inner {
    /* XD実測：文章430px・アイコン一覧1133px、外側は左右64pxずつ内側に寄せる */
    grid-template-columns: 430fr 1133fr;
    gap: var(--space-10);
    align-items: start;
    /* XD実測：文章の左端167px・アイコン列の左端636px。幅は変えず全体を7px右へ */
    padding-inline: 4.44rem 3.56rem;
  }
}

/* --- 事業内容 01〜05の行 --------------------------------- */
.c-row { background: var(--color-bg); }

.c-row--light {
  background: var(--color-bg-light-3);
  color: var(--color-text-dark);
}

.c-row__inner { gap: 0; }

.c-row__img {
  position: relative;
  min-height: 0;
  --row-bg: var(--color-bg);
}

.c-row--light .c-row__img { --row-bg: var(--color-bg-light-3); }

.c-row__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 写真の端を背景色になじませる指定は、左右に並ぶ1240px以上でだけ使う
   （1カラムのときは写真が画面いっぱいなので、なじませる相手がいない） */
.c-row__img::after { content: none; }

.c-row__body {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) var(--gutter) var(--space-7);
}

.c-row__no {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-stretch: 66%;
  font-size: clamp(3rem, 7.5vw, 9rem);
  line-height: 0.78;
  padding-block-start: 10px;
  color: var(--color-accent);
}

.c-row__title {
  font-weight: var(--fw-bold);
  font-size: clamp(1.3125rem, 2.08vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: var(--ls-xs);
}

.c-row__en {
  margin-block-start: 0;
  font-family: var(--font-en);
  /* 見出しに添える英字ラベル。15pxだと2行に折れるため13px（fontsize_ok.yaml に登録） */
  font-size: 0.8125rem;
  letter-spacing: 0.094em;
  color: var(--color-accent);
}

.c-row--light .c-row__en { color: var(--color-accent-deep); }

/* 01〜05は高さをそろえる（写真の縦横比で行ごとにばらつかせない。2026-09-07 園田さんの指示） */
/* 01〜05は高さをそろえる（写真の縦横比で行ごとにばらつかせない。2026-09-07 園田さんの指示）。
   縦積みになる767px以下はそろえない（文章の短い行に空きができるため） */
@media (min-width: 768px) {
  .c-rows { display: grid; grid-auto-rows: 1fr; }

  /* 高さをそろえた分、中身（写真と文章）も行いっぱいまで伸ばす。伸ばさないと写真の下に隙間ができる */
  .c-rows > .c-row { display: grid; }
  .c-rows > .c-row > .c-row__inner { min-height: 100%; }
}

/* XDの改行位置（<br>）は1240px以上でだけ使う。狭い画面では変な位置で切れるため流す */
.c-row__text br { display: none; }

.c-row__text {
  margin-block-start: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.97;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-72);
}

.c-row--light .c-row__text { color: var(--color-text-dark-72); }

@media (min-width: 768px) {
  .c-row__inner { align-items: stretch; min-height: 13.4375rem; }

  /* XD実測：写真は行幅の46.5%、文章側は連番の左に約165pxの余白 */
  .c-row__img { flex: 0 0 46.5%; }
  /* 写真の元サイズで行の高さが決まらないようにする。高さは文章側で決める。
     絶対配置にしないと、横並びでは画像の元の縦横比が行の高さの下限になる（2026-09-07） */
  .c-row__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .c-row__body {
    flex: 1 1 0;
    min-width: 0;
    align-content: center;
    gap: 6.1vw;
    padding-block: 1.3125rem var(--space-3);
    padding-inline: max(var(--gutter), 8.6vw) var(--space-10);
  }

  /* 768〜1239pxは、反転行も写真側の余白を通常行とそろえる（03・05の斜線が文字にかぶるため）。
     1240px以上はXDどおりの並びに戻す（下の @media 参照） */
  .l-media--reverse .c-row__body {
    padding-inline: var(--space-10) max(var(--gutter), 8.6vw);
    --row-inner-gap: max(var(--gutter), 8.6vw);
  }

  /* 写真の端を背景色になじませる。写真が差し替わっても段差が出ない */
  .c-row__img::after {
    content: "";
    position: absolute;
    /* 内側へ1pxはみ出させる。端に継ぎ目（縦線）が出ないようにするため */
    inset: 0 -1px 0 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 74%, var(--row-bg) 97%, var(--row-bg) 100%);
  }

  /* 写真が右にある行は、なじませる向きもはみ出しも左右反転する */
  .l-media--reverse .c-row__img::after {
    inset: 0 0 0 -1px;
    background: linear-gradient(270deg, transparent 74%, var(--row-bg) 97%, var(--row-bg) 100%);
  }

  /* 文章と写真の境目に入る斜めのオレンジ線。
     写真の端と文章の間の中央に置く（2026-09-07 園田さんの指示） */
  .c-row__body::before {
    content: "";
    position: absolute;
    inset-block: 11%;
    inset-inline-start: calc(max(var(--gutter), 8.6vw) / 2);
    width: 1px;
    background: var(--color-accent);
    opacity: .9;
    transform: rotate(14deg);
  }

  /* 反転行も、写真からの距離を通常行とそろえる（2026-09-07 園田さんの指示） */
  .l-media--reverse .c-row__body::before {
    inset-inline: auto calc(max(var(--gutter), 8.6vw) / 2);
  }
}

/* 1240px以上はXDどおりの並びに戻す（文章は画面端から165px・写真側は40px） */
@media (min-width: 1240px) {
}

/* --- 帯状のCTA ------------------------------------------- */
.c-cta-band {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-sink);
  padding-block: var(--space-10);
}

.c-cta-band__bg {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 38%;
  height: 100%;
  object-fit: cover;
}

.c-cta-band__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--rgb-ink) / .2) 0%, rgb(var(--rgb-ink) / .86) 34%, rgb(var(--rgb-ink) / .98) 100%);
}

.c-cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  text-align: center;
}

.c-cta-band__title {
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 2.6vw, 3.2rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.c-cta-band__note {
  margin-block-start: var(--space-1);
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--color-text);
}

.c-cta-band__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 1.375rem;
  border: 1px solid var(--color-accent);
  transition: background-color var(--dur) var(--ease);
}

.c-cta-band__btn-en {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-xl);
  color: var(--color-text);
}

.c-cta-band__btn-en svg { color: var(--color-accent); }

.c-cta-band__btn-ja {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-md);
  color: var(--color-text-62);
}

@media (min-width: 768px) {
  /* 事業内容のCTA帯だけがこの素の形。カンプ実測で高さ193px（他ページは修飾クラスで上書き） */
  .c-cta-band { padding-block: 2.3125rem 2.25rem; }

  .c-cta-band__inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-16);
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-cta-band__btn:hover { background: var(--color-accent-wash); }
}

.c-page-hero__crest { color: var(--color-logo); }

.c-cta-band--photo:not(.c-cta-band--co) { padding-block: 1rem 1.75rem; }

.c-page-hero--sm .c-contact__title { margin-block-start: 5px; }

/* CTA帯のボタンは枠と矢印がオレンジ・文字は白（XD実測） */
.c-cta-band .c-btn--line { border-color: var(--color-accent); }
.c-cta-band .c-btn--line .c-arrow-link__line { background: var(--color-accent); }

/* お問い合わせ系のCTA見出しはカンプでは会社概要より一回り大きい（XD実測 インク高44px） */
.c-cta-band--photo:not(.c-cta-band--co) .c-cta-band__en {
  font-size: clamp(1.75rem, 3.28vw, 3.94rem);
  letter-spacing: 0.012em;
}

/* ============================================================
   1240px以上は文字サイズをXD比例に戻す（1239px以下は共通の決まりの固定値）。
   基本指定より後ろに置かないと効かないため、ファイルの最後にまとめる
   ============================================================ */
@media (min-width: 1240px) {
  .c-row__text br { display: inline; }
  .c-page-hero__text { font-size: clamp(0.8125rem, 1vw, 1.25rem); }
  .c-page-hero--md .c-page-hero__text { font-size: clamp(0.8125rem, 1.17vw, 1.44rem); }
  .c-domains__body { font-size: clamp(0.8125rem, 1.01vw, 1.25rem); }
  .c-domain__body { font-size: clamp(0.6875rem, 0.797vw, 1rem); }
  .c-cta-band__note { font-size: clamp(0.875rem, 1.21vw, 1.46rem); }
  .c-row__text { font-size: clamp(0.6875rem, 0.91vw, 1.125rem); }
  .c-row__en { font-size: clamp(0.6875rem, 1.01vw, 1.25rem); }

  .l-media--reverse .c-row__body {
    padding-inline: max(var(--gutter), 8.6vw) var(--space-10);
    --row-inner-gap: var(--space-10);
  }
}