/* ==========================================================================
   詳細ページ（プロジェクト事例 ／ お知らせ）

   可変値の書き方はトップページと同じ。
     clamp(SP値, calc(SP値 + 差 * (100vw - 768px) / 672), PC値)
   768pxで0、1440pxで1になる式なので、両端は必ず設計値ちょうどになる。
   ========================================================================== */

.p-detail {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   見出しまわり（プロジェクト事例）

   Figma実測
     PC: 見出し y=248 x=80 72px ／ 年は見出しの右、下端から5px上
     SP: 見出し y=120 x=24 32px(行送り1.25) ／ 年は右端そろえ、下端から6px上
   -------------------------------------------------------------------------- */

.p-detail__head {
  /* ヘッダー下からの間隔 SP40 → PC120 */
  margin-top: clamp(40px, calc(40px + 80 * (100vw - 768px) / 672), 120px);
  /* SPは見出しを幅いっぱいに使い、年は右下に重ねる。
     横並びにすると見出しの幅が年のぶん狭まり、行数が増えてしまう。 */
  position: relative;
}

.p-detail--project .p-detail__title {
  /* SPだけ左に1px入る（Figma実測 x=25。PCはx=80で余白どおり） */
  margin-left: clamp(0px, calc(1px - 1 * (100vw - 768px) / 672), 1px);
  font-family: var(--ff-serif);
  font-size: clamp(32px, calc(32px + 40 * (100vw - 768px) / 672), 72px);
  font-weight: var(--fw-semibold);
  /* 行送りは実測px。SP 32×1.25=40 → PC 72×1.0=72 */
  line-height: clamp(40px, calc(40px + 32 * (100vw - 768px) / 672), 72px);
  letter-spacing: var(--ls-normal); /* デザインの字間は0% */
}

.p-detail__years {
  flex: none;
  /* 見出しの下端より少し上に置く（Figma実測 SP6px / PC5px）。
     絶対配置の right は親の余白の外側（画面右端）が基準になるため、
     余白ぶん（--gutter）内側に寄せて右端を351にそろえる */
  position: absolute;
  right: var(--gutter);
  bottom: 6px;
  /* Figma実測 SP14 → PC16 */
  font-size: clamp(14px, calc(14px + 2 * (100vw - 768px) / 672), 16px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   1枚目の写真
     PC: 画面幅いっぱい 1440×890
     SP: 左右24pxの余白の中で 327×218
   -------------------------------------------------------------------------- */

.p-detail__hero {
  /* 見出しからの間隔 SP24 → PC40 */
  margin: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px) auto 0;
  max-width: calc(100% - var(--gutter) * 2);
  aspect-ratio: 327 / 218; /* SP */
  overflow: hidden;
}

.p-detail__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   スペック表と本文
     PC: 左に表(600) ／ 80あけて ／ 右に本文(600)
     SP: 表の下に本文
   -------------------------------------------------------------------------- */

.p-detail__main {
  /* 写真からの間隔 SP69 → PC80 */
  margin-top: clamp(69px, calc(69px + 11 * (100vw - 768px) / 672), 80px);
}

.p-detail__spec {
  margin: 0;
}

/* 1行ぶん。線は行の上に引き、最後の行だけ下にも引く。
   borderで引くと1行につき1px背が高くなり、以降のセクションが全部ずれるので
   場所を取らない疑似要素で重ねる（設計 SP82 / PC56 ちょうどにする）。 */
.p-detail__spec-row {
  position: relative;
  display: flex;
  flex-direction: column; /* SPは項目名と内容が上下 */
  gap: 8px;
  padding-block: 16px;
}

.p-detail__spec-row::before,
.p-detail__spec-row:last-child::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid var(--c-line);
}

.p-detail__spec-row:last-child::after {
  top: auto;
  bottom: 0;
}

.p-detail__spec dt,
.p-detail__spec dd {
  margin: 0;
  font-size: var(--fs-body); /* SP14 → PC16 */
  line-height: 1.5;
}

.p-detail__spec dt {
  font-weight: var(--fw-semibold);
}

@media (min-width: 768px) {
  /* PCだけ項目名が線の始まり（x=80）から2px内側に入る（Figma実測 x=82。SPは字下げなし） */
  .p-detail__spec dt {
    padding-left: 2px;
  }
}

.p-detail__text {
  /* 表からの間隔（SPのみ。PCでは横に並ぶので効かない） */
  margin-top: 40px;
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送りは実測px。SP 14×1.75=24.5→Figmaは25 ／ PC 16×2.0=32 */
  line-height: clamp(25px, calc(25px + 7 * (100vw - 768px) / 672), 32px);
}

.p-detail__text > * + * {
  margin-top: 1em;
}

/* --------------------------------------------------------------------------
   2枚目以降の写真
     横長は幅いっぱい、縦長は2枚並び（並べ方はPHP側で判定している）
   -------------------------------------------------------------------------- */

.p-detail__gallery {
  /* 本文からの間隔 SP40 → PC160 */
  margin-top: clamp(40px, calc(40px + 120 * (100vw - 768px) / 672), 160px);
  display: grid;
  /* 写真どうしの間隔 SP16 → PC32 */
  gap: clamp(16px, calc(16px + 16 * (100vw - 768px) / 672), 32px);
}

.p-detail__photo {
  margin: 0;
  aspect-ratio: 327 / 202; /* SP。PCは下で上書き */
  overflow: hidden;
}

.p-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 縦位置の写真は2枚ずつ横に並べる */
.p-detail__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, calc(16px + 16 * (100vw - 768px) / 672), 32px);
}

.p-detail__photo--portrait {
  aspect-ratio: 159 / 202; /* SP */
}

/* --------------------------------------------------------------------------
   一覧へ戻る
   -------------------------------------------------------------------------- */

.p-detail__back {
  /* 写真からの間隔 SP40 → PC80。区切り線はこの疑似要素で引く */
  position: relative;
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  padding-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  text-align: center;
}

/* 区切り線。borderだと1px分だけ場所を取り、以降が下にずれるので疑似要素で引く。
   SPは左右24pxの余白の中、PCは画面幅いっぱい（1600pxで頭打ち）。 */
.p-detail__back::before {
  content: '';
  position: absolute;
  inset-inline: var(--gutter);
  top: 0;
  border-top: 1px solid var(--c-line);
}



.c-btn--back {
  /* 大きさは中身なり（Figma実測 SP 218×46 ／ PC 240×48）。
     文字 154/176 ＋ 左右padding 32×2、上下は padding 16×2 ＋ 文字の高さ。
     共通の min-height:48px だとSPで2px高くなるため打ち消す */
  min-height: 0;
  font-size: var(--fs-body); /* SP14 → PC16 */
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* オーナー様バナーまでの間隔 SP80 → PC240（Figma実測） */
.p-detail + .p-owner {
  margin-top: clamp(80px, calc(80px + 160 * (100vw - 768px) / 672), 240px);
}

/* --------------------------------------------------------------------------
   お知らせ 詳細

   Figma実測
     PC: 白いカード 1280×1345 を y=208（ヘッダーの80px下）に置く。
         中身は左右162・上121の余白。見出し48px、本文16px(行送り2.0)を687幅で。
     SP: 白いカード 327 幅、中身は左右24・上40の余白。
   -------------------------------------------------------------------------- */

.p-detail--news {
  /* ヘッダー下からの間隔 SP40 → PC80 */
  padding-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  padding-inline: var(--gutter);
}

.p-detail__card {
  max-width: calc(var(--page-max) - 160px);
  margin-inline: auto;
  background: var(--c-bg);
  /* カード内の余白。Figma実測では左右が非対称（左162 / 右160）。
     中身の幅は 1280 - 162 - 160 = 958 になる。 */
  padding-top: clamp(40px, calc(40px + 81 * (100vw - 768px) / 672), 121px);
  padding-left: clamp(24px, calc(24px + 138 * (100vw - 768px) / 672), 162px);
  padding-right: clamp(24px, calc(24px + 136 * (100vw - 768px) / 672), 160px);
  /* カード下端までの余白（Figma実測 SP80 / PC98） */
  padding-bottom: clamp(80px, calc(80px + 18 * (100vw - 768px) / 672), 98px);
}

.p-detail__meta {
  display: flex;
  align-items: center;
  /* 日付と分類の間隔 SP8 → PC16 */
  gap: clamp(8px, calc(8px + 8 * (100vw - 768px) / 672), 16px);
  font-size: var(--fs-small); /* SP12 → PC14…実測はSP12なので下で調整 */
  line-height: var(--lh-tight);
}

/* 日付と分類の間の斜線。
   回転した線なので、Figmaの枠（SP14.14 / PC21.21）ではなく
   描画される大きさ（SP10 / PC15）を指定する。お知らせ一覧と同じ。 */
.p-detail__slash {
  width: clamp(10px, calc(10px + 5 * (100vw - 768px) / 672), 15px);
  aspect-ratio: 1;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    currentColor calc(50% - 0.5px),
    currentColor calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

.p-detail__cat {
  color: var(--c-primary);
}

.p-detail--news .p-detail__title {
  /* 日付からの間隔 SP16 → PC39 */
  margin-top: clamp(16px, calc(16px + 23 * (100vw - 768px) / 672), 39px);
  /* Figma実測: ゴシックの標準の太さ */
  font-size: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: var(--ls-normal);
}

.p-detail--news .p-detail__text {
  /* 見出しの下の区切り線から本文まで SP40 → PC80 */
  position: relative;
  margin-top: clamp(24px, calc(24px + 16 * (100vw - 768px) / 672), 40px);
  padding-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

/* 区切り線は中身の幅いっぱい（PC958）だが、本文は687で折り返す（Figma実測）。
   幅の指定を本文側に置くことで、線だけが長いデザインどおりになる。 */
.p-detail--news .p-detail__text > * {
  max-width: 687px;
}

.p-detail--news .p-detail__text::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid var(--c-line);
}

.p-detail--news .p-detail__back::before {
  inset-inline: 0;
}

.p-detail--news .p-detail__back {
  /* 本文 → 区切り線、区切り線 → ボタン とも SP40 / PC80（Figma実測） */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  padding-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

/* ==========================================================================
   768px以上
   ========================================================================== */

@media (min-width: 768px) {

  /* PCは年を見出しのすぐ右に置く（右端そろえではない） */
  .p-detail--project .p-detail__head {
    display: flex;
    align-items: flex-end;
    gap: 24px;
  }

  .p-detail__years {
    position: static;
    margin-bottom: 5px;
  }

  /* 1枚目の写真は画面幅いっぱい（左右の余白を打ち消す） */
  .p-detail__hero {
    max-width: var(--page-max);
    aspect-ratio: 1440 / 890;
  }

  /* 表と本文を左右に分ける。1280 = 600 + 80 + 600 */
  .p-detail__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(100% * 80 / 1280);
    align-items: start;
  }

  .p-detail__spec-row {
    flex-direction: row; /* PCは項目名と内容が左右 */
    gap: 0;
  }

  .p-detail__spec dt {
    /* 内容の開始位置 x=304（表の左端80から224） */
    flex: none;
    width: calc(100% * 224 / 600);
    padding-left: 2px; /* Figma実測 x=82 */
  }

  .p-detail__text {
    margin-top: 0;
  }

  /* 区切り線は画面幅いっぱい。ページ幅の上限(1600px)を超えたら中央に寄せる */
  .p-detail--project .p-detail__back::before {
    inset-inline: max(0px, calc((100% - var(--page-max)) / 2));
  }

  .p-detail__photo {
    aspect-ratio: 1280 / 791;
  }

  .p-detail__photo--portrait {
    aspect-ratio: 624 / 791;
  }
}