/* ============================================================
   component-works.css — 施工実績の部品（c-）
   ============================================================ */

/* --- ヒーローの縦線つき本文 ------------------------------ */
.c-page-hero__body--barred { position: relative; }

/* 見出しの左に立てるオレンジの棒。文章の位置を動かさないよう浮かせて置く */
.c-page-hero__bar { display: none; }

@media (min-width: 768px) {
  .c-page-hero__bar {
    display: block;
    position: absolute;
    inset-inline-start: -2rem;
    inset-block-start: 9.68rem;
    width: 7px;
    height: max(5rem, 8.49vw);
    background: var(--color-accent);
  }
}

/* --- 絞り込み -------------------------------------------- */
.c-filter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--color-bg-sink);
  border-block: 1px solid var(--color-line-faint);
  padding-block: 1px;
  padding-inline: var(--gutter);
}

.c-filter__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* 日本語と英字のまとまりを上下中央に置き、下線との間に余白を取る（2026-09-08） */
  justify-content: center;
  padding: var(--space-6) var(--space-2);
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--color-line-faint);
  color: var(--color-text);
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.c-filter__btn.is-current {
  color: var(--color-accent);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.c-filter__ja {
  font-size: var(--fs-md);
  letter-spacing: var(--ls-lg);
}

.c-filter__en {
  font-family: var(--font-en);
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  opacity: .55;
  line-height: 1.42;
}

@media (min-width: 768px) { .c-filter { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) {
  /* XD実測：区切り線は399・647・920・1217・1471px（等分ではない） */
  .c-filter { grid-template-columns: 303fr 248fr 273fr 297fr 254fr 353fr; }
}

@media (hover: hover) and (pointer: fine) {
  .c-filter__btn:hover { color: var(--color-accent); }
}

/* --- 対応領域 -------------------------------------------- */
.c-intro {
  background: var(--color-bg-cta-from);
  /* XDに合わせて中身を30px下へ。全体の高さは変えない */
  padding-block: 7.65rem 3.35rem;
}

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

.c-intro__title {
  font-weight: var(--fw-bold);
  font-size: clamp(1.1875rem, 1.97vw, 2.47rem);
  line-height: 1.3;
  letter-spacing: var(--ls-lg);
}

.c-intro__body {
  margin-block-start: 1.5rem;
  font-size: 0.9375rem;
  line-height: 2.05;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-90);
}

.c-intro__list { gap: 0; }

/* アイコンの高さが1つずつ違う（61/64/66px）ので、アイコンの行を一番高いものに固定して
   見出しと本文の1行目を横一列にそろえる（案件ルール） */
.c-cat {
  --icon-unit: clamp(0.62px, 0.052vw, 1px);
  display: grid;
  grid-template-rows: calc(66 * var(--icon-unit)) auto auto;
  align-content: start;
  padding: var(--space-10) var(--space-7);
  border-inline-start: 1px solid var(--color-line);
  text-align: center;
}

.c-cat__icon { align-self: end; }

/* XD実測：分類アイコンは1つずつ大きさが違う（72×61／62×64／51×66） */
.c-cat__icon {
  --icon-unit: clamp(0.62px, 0.052vw, 1px);
  display: block;
  margin-inline: auto;
  width: calc(var(--iw) * var(--icon-unit));
  height: calc(var(--ih) * var(--icon-unit));
  color: var(--color-accent);
}

/* カンプ実測：アイコンの下端1046pxに対し見出しのインクは1073px */
.c-cat__title {
  margin-block-start: 17px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-lg);
}

.c-cat__body {
  margin-block-start: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--color-text-90);
  max-width: 16.5rem;
  margin-inline: auto;
}

@media (min-width: 1240px) {
  .c-intro__inner {
    /* XD実測：左の文章は画面端から132px、分類の段は653〜1775px */
    grid-template-columns: 509fr 1122fr;
    gap: var(--space-12);
    align-items: start;
    padding-inline-end: 49px;
  }

  .c-intro__inner > :first-child { padding-inline-start: 36px; }

  /* XD実測：分類のアイコンは左の見出しより26px上から始まる */
  .c-intro__list { margin-block-start: -23px; }
}

/* --- 実績カード ------------------------------------------ */
.c-worklist { padding-block: 0; }

.c-worklist__sm { margin-block-start: 14px; }

/* 写真に文字を重ねるのは1240px以上だけ。狭い画面では写真の下に文字を出す。
   重ねたままだと、写真の高さより文字が高くなって枠からはみ出す（2026-09-06） */
.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-sink);
  border: 1px solid var(--color-line);
  transition: border-color var(--dur) var(--ease);
}



.c-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.c-card__veil {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgb(var(--rgb-ink) / .9) 0%, rgb(var(--rgb-ink) / .55) 42%, rgb(var(--rgb-ink) / .15) 78%);
}

.c-card__veil--sm {
  background: linear-gradient(180deg, rgb(var(--rgb-ink) / .72) 0%, rgb(var(--rgb-ink) / .25) 34%, rgb(var(--rgb-ink) / .88) 100%);
}

.c-card__body {
  padding: var(--space-5) var(--space-6);
  pointer-events: none;
}

.c-card__body--sm { padding: var(--space-5); }

.c-card__no {
  display: block;
  font-family: var(--font-en);
  font-size: 2.375rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.c-card__no--sm {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-start: var(--space-5);
  font-size: 2rem;
  pointer-events: none;
}

.c-card__cat {
  display: block;
  margin-block-start: var(--space-5);
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: var(--color-accent);
}

.c-card__cat--sm { margin-block-start: 0; }

.c-card__name {
  display: block;
  margin-block-start: var(--space-3);
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  font-size: 1.4375rem;
  letter-spacing: var(--ls-md);
}

.c-card__name--sm {
  font-family: var(--font-jp);
  font-size: var(--fs-lg);
  line-height: 1.5;
  letter-spacing: var(--ls-sm);
}

.c-card__sub {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-md);
}

.c-card__loc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: var(--ls-2xl);
  color: var(--color-text-72);
}

@media (hover: hover) and (pointer: fine) {
  .c-card:hover { border-color: rgb(var(--rgb-accent) / .6); }
  .c-card:hover .c-card__img { transform: scale(1.04); }
}

/* --- ページ送り ------------------------------------------ */
/* カンプ実測：大きいカードの列と小さいカードの列の間は38px（列内は14px） */
.c-worklist__sm { margin-block-start: clamp(0.875rem, 1.98vw, 2.375rem); }

/* カンプ実測：01の枠629-713／02 772／03 888／NEXT PAGE 1033／矢印 1211-1278 */
/* 狭い画面は2段。前ページ（BACK PAGE）が入っても収まるよう、
   1段目に番号、2段目の左右に前後の送りを置く（2026-09-08）。
   前ページが無いときは左の枠が空くだけで、番号の位置は動かない */
.c-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "nums nums"
    "prev next";
  align-items: center;
  row-gap: var(--space-8);
  padding-block: clamp(1.5rem, 3.125vw, 3.75rem) clamp(1.25rem, 2.19vw, 2.625rem);
}

.c-pager__nums {
  grid-area: nums;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.c-pager__prev { grid-area: prev; justify-self: start; }
.c-pager__next { grid-area: next; justify-self: end; }

/* 768px以上は1段に戻す（カンプどおりの並び） */
@media (min-width: 768px) {
  .c-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4.01vw, 4.8125rem);
  }

  .c-pager__nums { gap: clamp(1.5rem, 4.01vw, 4.8125rem); }
}

.c-pager__num {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-md);
  color: var(--color-text-62);
}

/* カンプ実測：現在のページは84×65pxのオレンジの枠で囲む（下線ではない） */
.c-pager__num.is-current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 4.479vw, 5.375rem);
  height: clamp(2.5rem, 3.4375vw, 4.125rem);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

/* BACK PAGE は NEXT PAGE の左右反転（2026-09-25・2ページ目以降に出る） */
.c-pager__prev,
.c-pager__next {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.03vw, 2.4375rem);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
}

/* --- 装飾つきCTA ----------------------------------------- */
/* 紋章の幅は1か所で決める。帯の下側には紋章の高さぶんの余白を取り、
   狭い画面でボタンと重ならないようにする（2026-09-08） */
.c-cta-band--plain {
  --crest-w: clamp(9rem, 24.84vw, 29.8125rem);
  background: var(--color-bg-raise);
  border-block-start: 1px solid var(--color-line-faint);
  padding-block-end: calc(var(--crest-w) * 254 / 478 + var(--space-6));
}

@media (min-width: 1240px) {
  /* カンプ実測：帯は2894〜3240px（高さ346）。見出しのインク上端2965＝上から71px */
  .c-cta-band--plain { padding-block: clamp(1.5rem, 2.76vw, 3.3125rem) clamp(1.5rem, 5vw, 6rem); }

  /* 文章は画面左から431px、ボタンは右端1870px（画面端から50px） */
  /* カンプ実測：ボタンの枠は y3016-3117。文章の塊より8px下にそろえる */
  .c-cta-band--plain .c-btn { margin-block-start: clamp(0px, 0.63vw, 0.75rem); }

  .c-cta-band--plain .c-cta-band__inner {
    width: auto;
    max-width: none;
    margin-inline: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding-inline: clamp(1.25rem, 22.45vw, 26.9375rem) clamp(1.25rem, 2.6vw, 3.125rem);
    gap: clamp(1rem, 2.08vw, 2.5rem);
  }

  .c-cta-band--plain .c-cta-band__text { flex: 1 1 auto; min-width: 0; }
  .c-cta-band--plain .c-btn { flex: none; }

  /* カンプ実測：見出しのインクは856×54px、リード文は1行目460×19・2行目580×22 */
  .c-cta-band--plain .c-cta-band__title {
    font-size: clamp(1.75rem, 2.988vw, 3.5875rem);
    letter-spacing: 0.125em;
  }

  /* リード文は見出しと同じ左端（画面から431px）にそろえる。中央そろえではない */
  .c-cta-band--plain .c-cta-band__note {
    text-align: start;
    font-size: clamp(0.875rem, 1.066vw, 1.2813rem);
    letter-spacing: 0.12em;
    line-height: 2.15;
    margin-block-start: clamp(0.75rem, 1.09vw, 1.3125rem);
  }

  .c-cta-band--plain .c-cta-band__text { text-align: start; }

  /* ボタンはカンプ実測 492×101px。文字は左から81pxの位置（中央そろえではない） */
  .c-cta-band--plain .c-btn {
    width: clamp(15rem, 25.63vw, 30.75rem);
    height: clamp(3.5rem, 5.26vw, 6.3125rem);
    justify-content: flex-start;
    align-items: center;
    padding-inline: clamp(1.25rem, 4.01vw, 4.8125rem) clamp(1rem, 2.6vw, 3.125rem);
    font-size: clamp(0.9375rem, 1.25vw, 1.5rem);
  }
}


/* カンプ実測（05_works.png）：紋章は画面左端に接し 477×261px、帯の下端にそろう */
.c-cta-band__crest {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: var(--crest-w);
  height: auto;
  opacity: .95;
}

.c-btn--line {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-10);
  border: 1px solid rgb(var(--rgb-light) / .45);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-lg);
}

@media (min-width: 768px) {
}

/* 装飾の家型シルエット（SVGに色を直書きしない） */
.c-cta-band__crest { color: var(--color-accent); }

/* カンプの矢印は差し色。線ではなく矢じり付き（68×17px） */
.c-pager__arrow { color: var(--color-accent); }

.c-pager__arrow--back { scale: -1 1; }

/* 前後の送りが両方あるとき（2ページ目以降）だけ、768px未満で矢印を短くして1行に収める。
   1ページ目（NEXT PAGEだけ）はカンプどおりのまま（2026-09-25） */
.c-pager:has(.c-pager__prev) :is(.c-pager__prev, .c-pager__next) { gap: var(--space-2); white-space: nowrap; }
.c-pager:has(.c-pager__prev) .c-pager__arrow { width: 2.5rem; }

@media (min-width: 768px) {
  .c-pager:has(.c-pager__prev) :is(.c-pager__prev, .c-pager__next) { gap: clamp(1rem, 2.03vw, 2.4375rem); }
  .c-pager:has(.c-pager__prev) .c-pager__arrow { width: 68px; }
}

@media (hover: hover) and (pointer: fine) {
  .c-pager__num:hover { color: var(--color-accent); }
  .c-pager__prev:hover,
  .c-pager__next:hover { color: var(--color-accent); }
  .c-pager__next:hover .c-arrow-link__line { width: 4.5rem; }
}

/* カンプ実測：カードの間は縦横とも16px（段の送り481px＝高さ465＋16） */
.c-worklist .l-grid { gap: 16px; }

/* XD実測：縦棒と文章の位置はページごとに違う
   施工実績  棒 x50・文字 x107（画面端から11px）
   お知らせ  棒 x64・文字 x145（画面端から49px） */
@media (min-width: 1240px) {
  .c-page-hero--lg .c-page-hero__body--barred > div { padding-inline-start: 11px; }
  .c-page-hero--news .c-page-hero__body--barred > div { padding-inline-start: 49px; }
  .c-page-hero--lg .c-page-hero__bar { inset-inline-start: -2.875rem; }
}

/* 同じ行のカードは高さをそろえる。入れ物の li をグリッドにすると、
   カードは行の高さいっぱいに伸び、かつ中身が増えれば行そのものが高くなる */
/* 1240px以上：カンプどおり写真の上に文字を重ねる */
@media (min-width: 1240px) {
  /* 写真に重ねる作りでは1行に収まるので、固定の高さは外す */
  .c-card__name { display: block; min-height: 0; }

  .c-card {
    /* カンプ実測：大きいカードは高さ465px（段の間隔16px・段の送り481px） */
    aspect-ratio: 16 / 8.682;
    height: auto;
    clip-path: inset(0);
    background: none;
  }

  /* カンプ実測：小さいカードは421×484px（正方形ではない） */
  .c-card--sm { aspect-ratio: 421 / 484; }

  .c-card__img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .c-card__veil { display: block; }

  .c-card__body {
    position: relative;
    padding: var(--space-6) var(--space-7);
  }

  .c-card__body--sm {
    margin-block-start: auto;
    padding: var(--space-5);
  }
}

/* 写真の下に文字を出す幅では、名前が2行になっても補足の位置がそろうよう
   名前の欄を2行分の高さで固定し、上下中央に置く（本文の1行目を横一列にそろえる決まり） */
/* 写真の下に文字を出す幅では、名前の欄を2行分の高さで固定し、上下中央に置く
   （本文の1行目を横一列にそろえる決まり）。
   2行になったとき行の間が空きすぎるので行の高さを詰める。
   枠の高さ（4em＝これまでの2行分）は変えないので、下の所在地は動かない（2026-09-08） */
.c-card__name {
  display: flex;
  align-items: center;
  line-height: 1.4;
  min-height: 4em;
}

/* 3枚は768〜1239pxで2列。余った1枚は行いっぱいに広げ、縦線は横線に替える
   （割り切れない枚数の扱いは会社概要の価値観と同じ） */
@media (min-width: 768px) {
  .c-intro__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .c-intro__list > * { flex: 0 1 50%; }
  .c-intro__list > *:last-child { flex: 0 1 100%; }

  .c-cat {
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-line);
  }
}

@media (min-width: 1240px) {
  .c-intro__list { display: grid; grid-template-columns: repeat(3, 1fr); }
  .c-intro__list > * { flex: none; }
  .c-cat {
    border-inline-start: 1px solid var(--color-line);
    border-block-start: 0;
  }
}

/* ============================================================
   1240px以上は文字サイズをXD比例に戻す（1239px以下は共通の決まりの固定値）
   ============================================================ */
@media (min-width: 1240px) {
  /* カンプ実測：英字は字送りをほぼ持たない（ALL 33／COMMERCIAL 120／RETAIL 61px）。
     0.2emのままだと1.3倍の幅になる。日本語はインク高27pxでカンプの方が大きい */
  .c-filter__en { font-size: clamp(0.75rem, 0.94vw, 1.18rem); letter-spacing: 0.004em; opacity: .92; }
  .c-filter__ja { font-size: clamp(0.9375rem, 1.453vw, 1.7438rem); letter-spacing: 0.05em; line-height: 1.2; }
  /* カンプ実測：日本語のインク上端812px・英字855px（行の高さを詰めた分、上の余白で戻す） */
  .c-filter__btn { padding-block: clamp(1.5rem, 2.396vw, 2.875rem) 0; gap: clamp(0.25rem, 0.417vw, 0.5rem); }
  .c-intro__body { font-size: clamp(0.8125rem, 1.09vw, 1.36rem); }
  /* カンプ実測：本文1行目のインク上端1124px（実装は8px下がっていた） */
  .c-cat__body { font-size: clamp(0.75rem, 0.885vw, 1.11rem); margin-block-start: clamp(0.5rem, 0.21vw, 0.25rem); }
  .c-cat { padding-block: var(--space-1); }

  /* --- カードの文字：1920pxのカンプを実測して合わせた（2026-09-08）------
     測り方は「文字の実描画範囲」。カンプの値（幅×高さ px）を各行に残す。
     番号だけ幅の詰まった字面なので、幅の軸（font-stretch）と字送りで詰める */

  /* カンプ実測：カード上端からインクまで 番号+45／カテゴリ+150／店名+203／支店名+254／所在地+325 */
  .c-card__body { padding-block-start: clamp(1.25rem, 1.875vw, 2.25rem); }
  .c-card__cat { margin-block-start: clamp(1rem, 1.406vw, 1.6875rem); }
  .c-card__name { margin-block-start: clamp(0.75rem, 1.563vw, 1.875rem); }
  .c-card__sub { margin-block-start: clamp(0.5rem, 0.365vw, 0.4375rem); }
  .c-card__loc { margin-block-start: clamp(1rem, 1.823vw, 2.1875rem); }

  /* 小さいカードは中身を下端にそろえる作り。行間と間隔だけカンプに合わせる
     （カンプ実測：店名の行送り45px／カテゴリ→店名29px／店名→所在地31px） */
  .c-card__name--sm { margin-block-start: clamp(0.75rem, 0.729vw, 0.875rem); }
  .c-card--sm .c-card__loc { margin-block-start: clamp(1rem, 1.146vw, 1.375rem); }

  /* カンプ実測：ピンの印は大きいカードで15px幅・小さいカードで13px幅 */
  .c-card__loc svg { width: clamp(0.6875rem, 0.781vw, 0.9375rem); height: auto; }
  .c-card--sm .c-card__loc svg { width: clamp(0.6875rem, 0.677vw, 0.8125rem); }

  /* カードの文字は行の高さを詰める（既定の2倍だとカンプの間隔に収まらない） */
  .c-card__no, .c-card__cat, .c-card__loc { line-height: 1; }
  .c-card__name { line-height: 1.2; }
  .c-card__sub { line-height: 1.2; }
  .c-card--sm .c-card__name { line-height: 1.73; }
  .c-card--sm .c-card__no { inset-block-start: clamp(1.25rem, 1.667vw, 2rem); }

  /* 01 → 52×63 */
  .c-card__no {
    font-size: clamp(2.5rem, 4.766vw, 5.7188rem);
    font-stretch: 62%;
    /* 字間を詰めると数字がくっつく。字そのものを細くして幅を合わせる */
    transform: scaleX(.77);
    transform-origin: left center;
  }

  /* 05 → 54×56 */
  .c-card__no--sm {
    font-size: clamp(2.25rem, 4.325vw, 5.1875rem);
    font-stretch: 62%;
    transform: scaleX(.84);
    transform-origin: left center;
  }

  /* CAFE → 48×13 ／ RESTAURANT → 121×12 */
  .c-card__cat { font-size: clamp(0.75rem, 0.953vw, 1.1438rem); letter-spacing: 0.01em; }
  .c-card__cat--sm { font-size: clamp(0.75rem, 0.88vw, 1.0563rem); letter-spacing: 0.034em; }

  /* STARBUCKS COFFEE → 367×26 ／ 鉄板焼 匠 → 131×24 */
  /* 写真に重ねる幅では名前欄の「2行分の高さ」を使わない（基本指定が後ろにあるため打ち消す） */
  .c-card__name {
    display: block;
    min-height: 0;
    font-size: clamp(1.125rem, 1.907vw, 2.2875rem);
    letter-spacing: 0;
  }
  /* カンプ実測：小さいカードの店名は字送りが広い
     （名古屋錦店141／本社オフィス169／株式会社AXIS177／BAR LUMIERE188px） */
  .c-card__name--sm { font-size: clamp(1rem, 1.353vw, 1.625rem); letter-spacing: 0.142em; }

  /* 名古屋栄店 → 171×29 */
  .c-card__sub { font-size: clamp(1rem, 1.632vw, 1.9563rem); letter-spacing: 0.135em; }

  /* NAGOYA / AICHI → 161×18（大）／ 132×12（小）。ピンと文字の間は17px */
  /* カンプの所在地はほぼ白（薄い灰色ではない） */
  .c-card__loc { font-size: clamp(0.75rem, 1.196vw, 1.4375rem); letter-spacing: 0; gap: clamp(0.5rem, 0.885vw, 1.0625rem); color: var(--color-text); }
  .c-card--sm .c-card__loc { font-size: clamp(0.75rem, 0.797vw, 0.9563rem); letter-spacing: 0.1em; }

  /* --- ページ送り：02 → 36×29 ／ NEXT PAGE → 138×17 --- */
  .c-pager__num { font-size: clamp(1.125rem, 2.125vw, 2.55rem); font-stretch: 80%; }
  .c-pager__prev,
  .c-pager__next { font-size: clamp(0.9375rem, 1.247vw, 1.4938rem); letter-spacing: 0.028em; }
}