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

/* XD実測：施工実績詳細のラベルもアクセント色（2026-09-06に灰色から修正） */
.c-label--muted { color: var(--color-accent); }
.c-label--soft  { color: var(--color-accent); }

/* --- パンくず -------------------------------------------- */
.c-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-en);
  font-size: var(--fs-3xs);
  letter-spacing: 0.16em;
  color: var(--color-text-62);
}

.c-breadcrumb__current { color: var(--color-text-90); }

/* --- 詳細ヒーロー ---------------------------------------- */
.c-detail-hero {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  padding-block-start: var(--header-h);
  padding-block-end: 4px;
}

.c-detail-hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--gutter) var(--space-12);
}

.c-detail-hero__no {
  width: fit-content;
  margin-block-start: 61px;
  font-family: var(--font-en);
  font-size: 3.5rem;
  font-stretch: 62%;
  line-height: 0.78;
  letter-spacing: 0.085em;
  color: var(--color-accent);
}

.c-detail-hero__cat {
  margin-block-start: var(--space-3);
  font-family: var(--font-en);
  font-size: clamp(0.6875rem, 1.15vw, 1.44rem);
  line-height: 1.3;
  letter-spacing: 0.095em;
  color: var(--color-accent);
}

.c-detail-hero__cat::after {
  content: "";
  display: block;
  width: 77px;
  height: 1px;
  margin-block-start: 28px;
  background: var(--color-line);
}

.c-detail-hero__title {
  margin-block-start: 38px;
  font-family: var(--font-en);
  font-weight: var(--fw-semibold);
  font-size: 1.625rem;
  font-stretch: 76%;
  line-height: 1.3;
  letter-spacing: var(--ls-sm);
}

.c-detail-hero__sub {
  margin-block-start: 0;
  font-size: clamp(1.3125rem, 2.29vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.c-detail__body br,
.c-detail-hero__lead br,
.c-voice__body br,
.c-point__body br { display: none; }

.c-detail__body,
.c-detail-hero__lead,
.c-voice__body { word-break: auto-phrase; }

.c-detail-hero__lead {
  margin-block-start: var(--space-9);
  font-size: clamp(0.875rem, 1.41vw, 1.75rem);
  line-height: 1.85;
  letter-spacing: var(--ls-sm);
  color: var(--color-text-85);
}

.c-detail-hero__scroll { display: none; }

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

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

.c-detail-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--rgb-ink) / .8) 0%, rgb(var(--rgb-ink) / .1) 55%);
}

.c-spec {
  margin-block-start: 43px;
  display: grid;
  gap: 2px;
  font-size: clamp(0.8125rem, 1.15vw, 1.44rem);
  line-height: 1.7;
  letter-spacing: var(--ls-sm);
}

.c-spec__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-3);
}

.c-spec__key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-85);
}

/* カンプ実測：キーと値の間に幅3px・高さ26pxの差し色の棒が入る */
.c-spec__key::after {
  content: "";
  flex: none;
  width: 3px;
  height: 1.18em;
  background: var(--color-accent);
}
.c-spec__val { color: var(--color-text-90); }

/* 1239px以下の文字サイズ（案件の決まり：本文15px以上・小見出し18px以上）。
   1240px以上はこのあとのブロックでXD比例に戻す（2026-09-08） */
.c-breadcrumb { font-size: 0.9375rem; }
.c-breadcrumb__current { font-size: 0.9375rem; }
.c-detail-hero__cat { font-size: 0.9375rem; }
.c-detail__body br,
.c-detail-hero__lead br,
.c-voice__body br,
.c-point__body br { display: none; }

.c-detail__body,
.c-detail-hero__lead,
.c-voice__body { word-break: auto-phrase; }

.c-detail-hero__lead { font-size: 0.9375rem; }
.c-spec { font-size: 0.9375rem; }
.c-spec__key { font-size: 0.9375rem; }
.c-spec__val { font-size: 0.9375rem; }
.c-detail__body { font-size: 0.9375rem; }
.c-point__title { font-size: 1.125rem; }
.c-point__body { font-size: 0.9375rem; }
.c-member__role { font-size: 0.9375rem; }
.c-member__body { font-size: 0.9375rem; }
.c-voice__body { font-size: 0.9375rem; }
.c-voice__by { font-size: 0.9375rem; }

@media (min-width: 768px) {
  .c-detail-hero__body { padding-block: var(--space-8) 63px; }
  .c-detail-hero__media { min-height: 26.875rem; }
  .c-detail-hero__no { font-size: 3.5rem; }

  .c-detail-hero__veil {
    background: linear-gradient(90deg, rgb(var(--rgb-ink) / .85) 0%, rgb(var(--rgb-ink) / .1) 22%, rgb(var(--rgb-ink) / 0) 60%);
  }
}

/* --- 詳細の共通レイアウト -------------------------------- */
.c-detail__inner {
  display: grid;
  gap: var(--space-12);
}

.c-detail__title {
  font-weight: var(--fw-bold);
  font-size: clamp(1.375rem, 2.2vw, 1.9375rem);
  line-height: 1.62;
  letter-spacing: var(--ls-sm);
}

.c-detail__title--sm { font-size: clamp(1.3125rem, 2vw, 1.8125rem); }

.c-detail__body {
  margin-block-start: var(--space-8);
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-xs);
  color: var(--color-text-dark-72);
}

.c-detail__body--light { color: var(--color-text-90); }

.c-detail__inner--media {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1240px) {
  .c-detail-hero {
    flex-direction: row-reverse;
    /* ヘッダーが上に重なるので、その下からパンくずが始まるようにする */
    padding-block-start: 11.94rem;
  }

  .c-detail-hero__body  { flex: 0.62 1 0; min-width: 0; padding-inline: var(--gutter) var(--space-6); }
  .c-detail-hero__media { flex: 1.38 1 0; min-width: 0; }

  .c-detail__inner {
    grid-template-columns: 0.72fr 1.28fr;
    gap: var(--space-14);
    align-items: start;
  }

  .c-detail__inner--media { flex-direction: row-reverse; }
  .c-detail__inner--media > *:last-child { flex: 0.72 1 0; min-width: 0; }
  .c-detail__inner--media > .c-shots     { flex: 1.28 1 0; min-width: 0; }
}

/* --- 写真の並び ------------------------------------------ */
.c-shots__main {
  width: 100%;
  aspect-ratio: 16 / 7.33;
  object-fit: cover;
}

.c-shots__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-block-start: 25px;
}

.c-shots__sub {
  width: 100%;
  aspect-ratio: 4 / 2.78;
  object-fit: cover;
}

@media (min-width: 1240px) {
  .c-shots__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- 施工のポイント -------------------------------------- */
.c-points { background: var(--color-bg-point); padding-block: 51px 79px; }

.c-points__list { gap: 0; }

.c-point {
  display: grid;
  grid-template-columns: 1fr;
  /* アイコンの行を実寸で固定する。自動にすると図形ごとに数pxずれて
     見出しと本文の1行目がそろわない（2026-09-08） */
  grid-template-rows: 2.5rem auto;
  gap: var(--space-5);
  /* カンプ実測：区切り線からアイコンまで44px、本文の下から線まで40px（2026-09-09） */
  padding-block: clamp(1.5rem, 1.667vw, 2rem) clamp(1.125rem, 0.99vw, 1.1875rem);
  padding-inline: var(--space-7);
  border-block-end: 1px solid var(--color-line-faint);
}

/* カンプのアイコンは差し色で62px角（灰色の30px角ではない） */
/* カンプのアイコンは差し色で62px角（灰色の30px角ではない）。
   1239px以下は見出しの上に置く（横に並べると見出しが2行になり位置がそろわない） */
.c-point__icon { width: 2.5rem; height: 2.5rem; color: var(--color-accent); }

/* 見出しが2行になっても本文の1行目がそろうよう、2行分の高さで固定して上下中央に置く。
   1列になる幅（767px以下）はそろえる相手がいないので確保しない（間延びするため） */
.c-point__title {
  display: flex;
  align-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-md);
  color: var(--color-text-85);
}

.c-point__body {
  margin-block-start: var(--space-2);
  font-size: var(--fs-2xs);
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--color-text-85);
}

/* --- チームとお客様の声 ---------------------------------- */
.c-team__inner {
  display: grid;
  gap: var(--space-12);
}

.c-member__list {
  gap: var(--space-6);
  margin-block-start: var(--space-9);
}

.c-member {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
  justify-items: start;
}

/* 1239px以下は写真を上、文字を下に置く（案件の決まり）。
   横に並べると写真が小さくなり、名前と本文だけが下にはみ出して形が崩れる（2026-09-08） */

.c-member__photo {
  width: 7.5rem;
  aspect-ratio: 105 / 138;
  object-fit: cover;
}

/* 写真を上に置く形（1239px以下）では2行分の高さの確保は不要。間延びするため外す */
.c-member__role {
  display: flex;
  align-items: center;
  line-height: 1.4;
  font-family: var(--font-en);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  color: rgb(var(--rgb-dark) / .55);
}

.c-member__name {
  display: flex;
  align-items: center;
  line-height: 1.4;
  margin-block-start: var(--space-3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-lg);
}

.c-member__body {
  margin-block-start: var(--space-3);
  font-size: var(--fs-3xs);
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: rgb(var(--rgb-dark) / .6);
}

.c-voice__quote {
  margin-block-start: var(--space-9);
  font-family: var(--font-en);
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--color-accent);
}

.c-voice__body {
  margin: var(--space-7) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-xs);
  color: rgb(var(--rgb-dark) / .82);
}

.c-voice__by {
  margin-block-start: var(--space-9);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-md);
  color: var(--color-text-dark-72);
}

/* 1239px以下の文字サイズ（決まり：本文15px以上・小見出し18px以上）。
   ここは後半の基本指定より後ろに置く。前に置くと後ろの指定に負ける（2026-09-08） */
.c-point__title { font-size: 1.125rem; }
.c-point__body { font-size: 0.9375rem; }
.c-member__role { font-size: 0.9375rem; }
.c-member__body { font-size: 0.9375rem; }
.c-voice__body { font-size: 0.9375rem; }
.c-voice__by { font-size: 0.9375rem; }
.c-detail__body { font-size: 0.9375rem; }

@media (min-width: 1240px) {
  .c-team__inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-14);
  }

  .c-voice {
    border-inline-start: 1px solid rgb(var(--rgb-dark) / .15);
    padding-inline-start: var(--space-12);
  }
}

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

/* 施工実績の詳細ページは概要ブロックの上下を詰める */
.c-overview--detail { padding-block: 76px 30px; }

.c-team { padding-block: 95px 30px; }


/* ============================================================
   1920pxのカンプ（06_work-detail.png）を実測して合わせた値（2026-09-08）
   測り方は「文字の実描画範囲」。カンプの値を各行に残す
   ============================================================ */
/* 800pxで3列になり、そこから見出しが2行になる。2行分の高さを確保して
   本文の1行目をそろえる。768〜799pxは2列で1行に収まるので確保しない（2026-09-09） */
@media (min-width: 800px) {
  .c-point__title { min-height: 2lh; }
}

@media (min-width: 1240px) {
  /* 01 → 152×140 */
  /* カンプの数字は線の細い字（実測12〜13px）。読み込む書体が600以上のため再現できない。
     もっとも細い600で描く。差は docs/spec/gaps/work-detail.yaml に記録 */
  .c-detail-hero__no {
    font-size: clamp(3.5rem, 10.35vw, 12.4288rem);
    letter-spacing: 0.047em;
  }

  /* CAFE / カフェ → 128×12 */
  .c-detail-hero__cat { font-size: clamp(0.6875rem, 0.865vw, 1.0813rem); letter-spacing: 0.161em; margin-block-start: 18px; }

  /* STARBUCKS COFFEE → 468×52。カンプは幅の詰まった字面なので幅の軸と横倍率で合わせる */
  .c-detail-hero__title {
    font-size: clamp(1.625rem, 3.85vw, 4.62rem);
    font-stretch: 62%;
    white-space: nowrap;
    transform: scaleX(.831);
    transform-origin: left center;
  }

  /* 写真の右端：縦書きの店名（カンプ実測 x1851-1868・y526-747）と
     SCROLLの表示（x1823-1892・y1002-1016）＋その下の差し色の縦線（2×67px） */
  .c-detail-hero .c-page-hero__vertical {
    right: 43px;
    top: 35.42%;
    font-size: clamp(0.6875rem, 0.833vw, 1rem);
    letter-spacing: 0.215em;
  }

  .c-detail-hero .c-page-hero__vertical::after { content: none; }

  .c-detail-hero__scroll {
    display: flex;
    position: absolute;
    right: 28px;
    top: 84.13%;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-en);
    font-size: clamp(0.625rem, 1.099vw, 1.3188rem);
    font-stretch: 62%;
    letter-spacing: 0.11em;
    color: var(--color-text-72);
  }

  .c-detail-hero__scroll::after {
    content: "";
    width: 2px;
    height: 67px;
    margin-block-start: 6px;
    background: var(--color-accent);
  }

  /* 名古屋栄店 → 187×37 */
  .c-detail-hero__sub { font-size: clamp(1.3125rem, 2.083vw, 2.5rem); letter-spacing: -0.06em; }

  /* カンプ実測：インク上端 01=322／CAFE=495／店名=574／支店名=658／リード=754／表=894 */
  .c-detail-hero__no { margin-block-start: 94px; }
  .c-detail-hero__title { margin-block-start: 12px; }
  .c-detail__body br,
.c-detail-hero__lead br,
.c-voice__body br,
.c-point__body br { display: none; }

.c-detail__body,
.c-detail-hero__lead,
.c-voice__body { word-break: auto-phrase; }

.c-detail-hero__lead { margin-block-start: 42px; }
  /* カンプ実測：キーは小さく（施工内容=74px幅）、値は大きい（愛知県…=219px幅）。
     行の送りは40.6px。キーと値の間に差し色の棒 */
  .c-spec {
    margin-block-start: 54px;
    line-height: 1.83;
  }

  .c-spec__row { grid-template-columns: 6.6rem 1fr; gap: 27px; }
  .c-spec__key { font-size: clamp(0.8125rem, 1.052vw, 1.2625rem); }
  .c-spec__val { font-size: clamp(0.8125rem, 1.099vw, 1.3188rem); }
  .c-detail-hero__body { padding-block: 0 56px; }
  .c-breadcrumb { font-size: 1rem; }
  .c-breadcrumb__current { font-size: 1rem; letter-spacing: 0.135em; }


  /* リード文 → 1行目389×23／2行目330×22 */
  .c-detail__body br,
.c-detail-hero__lead br,
.c-voice__body br,
.c-point__body br { display: none; }

.c-detail__body,
.c-detail-hero__lead,
.c-voice__body { word-break: auto-phrase; }

.c-detail-hero__lead { font-size: clamp(0.875rem, 1.271vw, 1.525rem); letter-spacing: 0.094em; }

  /* --- コンセプト・ポイント・体制の共通の文字 -------------------
     カンプ実測：見出しのインク高39px／本文は太さのある字で高さ20〜22px */
  .c-detail__title { font-size: clamp(1.25rem, 2.099vw, 2.5188rem); letter-spacing: 0.013em; }

  .c-detail__body {
    font-weight: var(--fw-medium);
    font-size: clamp(0.875rem, 1.016vw, 1.2188rem);
    line-height: 2.31;
  }

  /* カンプ実測：ラベル1238／見出し1298・1364／本文1463から45px送り */
  .c-detail__inner .c-detail__title,
  .c-team__inner .c-detail__title { margin-block-start: 12px; }
  .c-detail__inner .c-detail__body,
  .c-team__inner .c-detail__body { margin-block-start: 41px; }
  .c-points .c-detail__body { margin-block-start: 47px; }

  /* --- 施工のポイント -------------------------------------------
     カンプ実測：アイコン62〜65px角・アイコンと文字の間26px・見出しは1行（インク19px）
     ・本文3行（インク17px）。実装は画面端96pxの決まりで枠が9%狭いので、
     文字もアイコンも同じ比率で小さくしてカンプの見え方に合わせる */
  /* アイコンの列・間隔・右の余白も画面幅に連れて縮める。
     固定値にすると1240〜1700pxで見出しが2行になり、本文の1行目がそろわない（2026-09-08） */
  .c-point {
    grid-template-columns: clamp(1.875rem, 2.917vw, 3.5rem) 1fr;
    grid-template-rows: auto;
    align-items: start;
    gap: clamp(0.75rem, 1.25vw, 1.5rem);
    padding-inline: 0 clamp(0.75rem, 1.25vw, 1.5rem);
  }

  .c-point__icon {
    width: clamp(1.875rem, 2.917vw, 3.5rem);
    height: clamp(1.875rem, 2.917vw, 3.5rem);
  }

  .c-point__title { font-size: clamp(0.875rem, 0.94vw, 1.1875rem); letter-spacing: 0.005em; }

  .c-point__body { margin-block-start: var(--space-3); font-size: clamp(0.8125rem, 0.917vw, 1.1rem); }

  /* --- 体制と声 ------------------------------------------------
     カンプ実測：本文の行送り40.5px（コンセプトは45px）。
     メンバーの写真は67×138pxの縦長（正方形ではない）。
     役職はインク12px・名前19px・本文13px */
  .c-team .c-detail__body { line-height: 2.08; }
  .c-team { padding-block: 58px 46px; }
  .c-points { padding-block: 28px 56px; }

  /* カンプ実測：大きい写真 y1206-1695（490高）／サムネ y1710-1882（173高）・間15px */
  .c-overview--detail { padding-block: 62px 62px; }
  .c-detail__inner--media > *:last-child { padding-block-start: 15px; }
  .c-shots__grid { margin-block-start: 15px; }
  .c-shots__sub { aspect-ratio: 259 / 173; }

  /* --- お客様の声 ----------------------------------------------
     カンプ実測：引用符は差し色で32×31px（灰色の小さい記号ではない）。
     本文は太さのある字でインク21px・1行目423px幅。署名も同じ太さ */
  .c-voice__quote {
    margin-block-start: 64px;
    font-size: clamp(2rem, 6.563vw, 7.875rem);
    color: var(--color-accent);
  }

  .c-voice__body {
    margin-block-start: 7px;
    font-weight: var(--fw-medium);
    font-size: clamp(0.875rem, 1.055vw, 1.2656rem);
  }

  .c-voice__by {
    margin-block-start: 69px;
    font-weight: var(--fw-medium);
    font-size: clamp(0.875rem, 1.063vw, 1.275rem);
  }

  /* カンプ実測：写真は105×138px（幅67pxではない。暗い画素だけで測って取りこぼしていた） */
  /* 写真は文字の高さまで伸ばす。列幅が狭い幅では本文が3行になり、
     写真だけ先に終わって形が崩れるため（2026-09-09） */
  .c-member {
    grid-template-columns: clamp(3.875rem, 5.36vw, 6.4375rem) 1fr;
    gap: clamp(0.75rem, 0.94vw, 1.125rem);
    justify-items: stretch;
    align-items: stretch;
  }

  .c-member__photo { height: 100%; aspect-ratio: auto; min-height: clamp(5rem, 7.03vw, 8.4375rem); }
  .c-member__photo { width: 100%; }
  .c-detail__body br,
  .c-detail-hero__lead br,
  .c-voice__body br { display: inline; }
  .c-member__photo { aspect-ratio: 105 / 138; }

  /* カンプ実測：写真の上端から 役職+6／名前+40／本文+87、本文の行送り31px。
     写真（138px）より文字が高くならないように行の高さを詰める */
  .c-member__role {
    /* 1240〜1384pxは列が狭く「PROJECT MANAGER」が2行になる。
       本文の1行目をそろえるため2行分を確保する（1385px以上はこのあとで外す） */
    min-height: 2lh;
    line-height: 1;
    font-size: clamp(0.75rem, 0.729vw, 0.875rem);
    letter-spacing: 0.02em;
  }

  .c-member__name {
    margin-block-start: clamp(0.5rem, 1.042vw, 1.25rem);
    line-height: 1;
    font-size: clamp(0.9375rem, 1.042vw, 1.25rem);
  }

  .c-member__body {
    margin-block-start: clamp(0.75rem, 1.563vw, 1.875rem);
    line-height: 2.07;
    font-size: clamp(0.8125rem, 0.781vw, 0.9375rem);
  }
}


/* 1385px以上は見出しが1行に収まるので、2行分の高さの確保をやめる。
   1240〜1384pxは収まらないため確保したまま（本文の1行目をそろえる決まり・2026-09-08） */
@media (min-width: 1385px) {
  .c-point__title { min-height: 0; }
  .c-member__role { min-height: 0; }
  .c-member__name { min-height: 0; }
}


/* --- 詳細ページのCTA帯 -------------------------------------
   カンプ実測：見出しは2行で行の送り66px（インク43〜45px）、説明文はインク18px。
   会社概要も同じ --photo を使っているので、詳細ページ専用の型で分ける（2026-09-08） */
@media (min-width: 1240px) {
  .c-cta-band--photo.c-cta-band--detail { padding-block: 42px 113px; }
  .c-cta-band--photo.c-cta-band--detail .c-cta-band__en { line-height: 1.05; }
  .c-cta-band--photo.c-cta-band--detail .c-cta-band__note {
    margin-block-start: 21px;
    font-size: clamp(0.875rem, 0.99vw, 1.1875rem);
    letter-spacing: 0.049em;
    color: var(--color-text-85);
  }
}


/* 768px以上は、詳細ページのCTAだけ文章を左・ボタンを右に置く。
   縦に積むと右側が大きく空く（2026-09-08） */
@media (min-width: 768px) {
  .c-cta-band--detail .c-cta-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: start;
    gap: var(--space-8);
  }

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