/* ==========================================================================
   一覧ページ（お知らせ ／ プロジェクト事例）と、下層ページ共通の見出し
   ========================================================================== */

/* --------------------------------------------------------------------------
   見出しブロック

   Figma実測
     PC: 英字96px（後ろにグレーの帯 高さ86）y=248 x=80
         和文24px は英字の24px右／区切り線は全幅で英字の下端9px上
         リード24px は区切り線の80px下
     SP: 英字32px（帯 高さ28）y=120 x=23 ／ 和文12px ／ リード16px
   -------------------------------------------------------------------------- */

.p-pagehead__inner {
  position: relative;
  /* ヘッダー下からの間隔 SP40 → PC120。全7ページで同じ値（Figma実測） */
  margin-top: clamp(40px, calc(40px + 80 * (100vw - 768px) / 672), 120px);
  /* 左右の余白は共通の l-container（SP24 / PC80）だが、見出しだけSPは23px。
     事業内容・会社情報・リクルート・事例・ニュースの5ページがこの値。
     PCは共通の80のままなので、SPでだけ1px詰める。 */
  padding-left: clamp(23px, calc(23px + 57 * (100vw - 768px) / 672), 80px);
  display: flex;
  align-items: flex-end;
  /* 英字と和文の間隔 SP8 → PC24 */
  gap: clamp(8px, calc(8px + 16 * (100vw - 768px) / 672), 24px);
}

/* 不動産オーナー様・お問い合わせの2ページだけ、デザインのSPが24px。
   PCは他ページと同じ80pxなので、SP側の起点だけ1px広げる。 */
.p-pagehead--sp24 .p-pagehead__inner {
  padding-left: clamp(24px, calc(24px + 56 * (100vw - 768px) / 672), 80px);
}

/* 全幅の区切り線。
   線の位置は画面幅で変わる（Figma実測）。
     PC 箱248〜334 / 線335 … 箱の下端の1px下
     SP 箱120〜148 / 線148 … 箱の下端とぴったり同じ
   bottom を SP0 → PC-1px と動かして両方に合わせる。 */
.p-pagehead__inner::after {
  content: '';
  position: absolute;
  /* 画面の左右いっぱいまで引く。
     中身は1600pxで頭打ちだが、この線だけは画面幅に関係なく端まで届かせる
     （2026-08-23クライアント指示）。
     中身が中央寄せなので、その中央から画面の半分ぶん外へ出すと端に一致する。 */
  inset-inline: calc(50% - 50vw);
  bottom: clamp(-1px, calc(0px - 1 * (100vw - 768px) / 672), 0px);
  border-top: 1px solid var(--c-line);
}

.p-pagehead__en {
  display: flex; /* 中の箱の高さがそのまま見出しの高さになるようにする */
  font-family: var(--ff-serif);
  font-size: clamp(32px, calc(32px + 64 * (100vw - 768px) / 672), 96px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* 注記「英字の下部が少し切れている感じに」。
   文字の箱は96px（SP32px）だが、見せる高さは86px（SP28px）。
   はみ出した下部を切ることで、そのまま下からせり上がるマスクにもなる。 */
.p-pagehead__en .js-mask {
  height: clamp(28px, calc(28px + 58 * (100vw - 768px) / 672), 86px);
  overflow: hidden;
  /* 共通の「下端1.5%を削る」処理はここでは使わない（高さで切っているため） */
  clip-path: none;
}

.p-pagehead__ja {
  /* 和文の下端の位置も画面幅で変わる（Figma実測）。
       PC 箱の下端334 / 和文の下端335 … 1px下
       SP 箱の下端148 / 和文の下端147.5 … 0.5px上
     SP+0.5 → PC-1px と動かす。 */
  margin-bottom: clamp(-1px, calc(0.5px - 1.5 * (100vw - 768px) / 672), 0.5px);
  font-family: var(--ff-serif); /* Figma実測: 明朝 */
  font-size: clamp(12px, calc(12px + 12 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* リード文の左余白は英字の見出しと同じ（Figma実測 SP23 → PC80）。
   l-container の24pxを打ち消す必要があるので、親クラスを重ねて詳細度を上げる。 */
.p-pagehead .p-pagehead__lead {
  padding-left: clamp(23px, calc(23px + 57 * (100vw - 768px) / 672), 80px);
}

/* 左余白が24pxのページ（不動産オーナー様・お問い合わせ）はそちらに合わせる */
.p-pagehead--sp24 .p-pagehead__lead {
  padding-left: clamp(24px, calc(24px + 56 * (100vw - 768px) / 672), 80px);
}

.p-pagehead__lead {
  /* 区切り線からの間隔は全ページ共通で SP40 / PC80（Figma実測）。
     線の位置が箱の下端に対して SP+0 / PC+1 と違うため、
     箱からの間隔は SP40 → PC81 になる。 */
  margin-top: clamp(40px, calc(40px + 41 * (100vw - 768px) / 672), 81px);
  font-family: var(--ff-serif);
  font-size: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
  font-weight: var(--fw-semibold);
  /* SP 16×1.5 ／ PC 24×1.0 … どちらも24px */
  line-height: 24px;
}

/* --------------------------------------------------------------------------
   お知らせ 一覧

   Figma実測
     PC: 1行96px。日付・分類・見出し・矢印を横並び。幅1120
     SP: 1行151px。日付と分類が1行目、見出しが2行目（3行まで）。矢印なし
   -------------------------------------------------------------------------- */

.p-archive__list {
  /* リードからの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

/* お知らせ一覧の左右余白（Figma実測 PC: 左162 / 右160、行の幅1118）。
   トップページのお知らせ（左右161）とは1pxずつ違うため、ここで上書きする。
   デザイン側の不揃いの可能性があるので8/18の確認事項に記載済み。 */
@media (min-width: 768px) {
  .p-archive--news .l-container--narrow {
    padding-left: clamp(24px, calc(24px + 138 * (100vw - 768px) / 672), 162px);
    padding-right: clamp(24px, calc(24px + 136 * (100vw - 768px) / 672), 160px);
  }
}

.p-archive__row {
  position: relative;
  display: flex;
  flex-direction: column; /* SPは日付行と見出しが縦に並ぶ */
  gap: 16px;
  /* 高さは内容なり。上下の余白は指定どおり24pxずつ（横線から24px空く）。
     Figmaの1行151pxは見本の本文が3行だったときの結果で、
     実際の記事は1行が多く、固定にすると矢印だけが下に取り残される。
     見本と同じ3行の記事なら 24+12+16+75+24＝151 でデザインと一致する。 */
  padding-block: 24px;
}

/* 行の上の罫線。borderだと1行につき1px背が高くなるので疑似要素で引く */
.p-archive__row::before,
.p-archive__item:last-child .p-archive__row::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  border-top: 1px solid var(--c-line);
}

.p-archive__item:last-child .p-archive__row::after {
  top: auto;
  bottom: 0;
}

.p-archive__row:hover {
  opacity: 1;
}

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

/* 日付の幅はデザイン実測で固定する（SP63 → PC74）。
   このフォントの数字は字ごとに幅が違い（「1」は細く「0」「8」は太い）、
   成り行きに任せると日付ごとに幅が 69〜77px の間で変わる。
   その結果、斜線とカテゴリの位置が行ごとに最大7pxずれてしまう。
   幅を固定すると、どの記事でもデザインどおりの位置に並ぶ。 */
.p-archive__date {
  width: clamp(63px, calc(63px + 11 * (100vw - 768px) / 672), 74px);
  flex: none;
  /* 幅を固定しているので、これが無いと枠に収まらない日付
     （「2026.08.08」など太い数字が並ぶもの）が2行に折り返してしまう。
     はみ出しても、右隣の斜線までの間隔（SP8px / PC16px）に収まる。 */
  white-space: nowrap;
}

/* 日付と分類の間の斜線 */
.p-archive__slash {
  /* 回転した線なので、Figmaの枠（SP14.14 / PC21.21）ではなく
     描画される大きさ（SP10 / PC15）を指定する */
  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-archive__cat {
  color: var(--c-primary);
}

.p-archive__text {
  /* SPは右に矢印が入るぶんを空ける。77 = 矢印32 + 矢印との間隔45
     → 見出しの幅は 327−77＝250（Figma実測どおり） */
  margin-right: 77px;
  font-size: var(--fs-body); /* SP14 → PC16 */
  /* 行送りは実測px。SP 14×1.75=24.5→Figmaは25 ／ PC 16×1.75=28 */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* SPは3行まで */
}

/* 右端の矢印。SP・PCとも表示する（Figmaでは両方に置かれている）。
   SPは見出しの右横に重ねるので絶対配置にする。縦位置は「見出しの中央」。
     見出しの上端は行の上から52px（余白24 + 日付12 + 間隔16）で固定、
     下端は 行の高さ−24 なので、見出しの中央は 行の高さ÷2 + 14 になる。
     矢印(32px)の中央をそこに合わせると上端は 行の高さ÷2 − 2。
     Figmaは見出しの中央より3.5px下なので、+1.5px 足して合わせる
     （見本と同じ3行なら 151÷2 + 1.5 = 77 でデザインとぴったり一致）。
   行の高さが変わっても、常に見出しの横に並ぶ。 */
.p-archive__arrow {
  position: absolute;
  top: calc(50% + 1.5px);
  right: 0;
  flex: none;
  width: 32px;
  height: 32px;
}

.p-archive__arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--c-text);
  stroke-width: 1;
}

.p-archive__empty {
  padding-block: 80px;
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   プロジェクト事例 一覧
     カードの見た目はトップページと同じものを使う（top.css）
   -------------------------------------------------------------------------- */

.p-archive__grid {
  /* リードからの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  display: grid;
  gap: 40px; /* SP */
}

/* 一覧のカードはトップページのものより一回り大きい（Figma実測）。
   トップ用の指定（top.css）より詳細度が高いので、SP・PC両方の値をここで決める。 */
.p-archive__grid .p-projects__thumb {
  aspect-ratio: 3 / 2; /* SP 327×218 ／ PC 612×408 */
}

.p-archive__grid .p-projects__pjtitle {
  /* SP20 → PC32。行送りは実測px（20×1.25=25 → 32×1.1=35.2→35） */
  font-size: clamp(20px, calc(20px + 12 * (100vw - 768px) / 672), 32px);
  line-height: clamp(25px, calc(25px + 10 * (100vw - 768px) / 672), 35px);
}

.p-archive__grid .p-projects__year {
  font-size: clamp(12px, calc(12px + 4 * (100vw - 768px) / 672), 16px);
}

/* SPは年を右端にそろえる（Figma実測 全カードで右端351＝枠の右端）。
   PCは物件名のすぐ右に16px空けて置くので、768px以上では元に戻す。 */
.p-archive__grid .p-projects__name {
  justify-content: space-between;
}

@media (min-width: 768px) {
  .p-archive__grid .p-projects__name {
    justify-content: flex-start;
  }
}

/* 概要はSPでも省略せずに出す（トップページはSPだけ短い表記に差し替えている） */
.p-archive__grid .p-projects__meta {
  display: block;
  /* 物件名からの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
}

/* --------------------------------------------------------------------------
   ページ送り

   Figma実測: 数字は円（SP42 / PC48）、間隔16。現在のページだけ枠線が濃い。
   -------------------------------------------------------------------------- */

.p-pager {
  /* 一覧からの間隔 SP40 → PC80 */
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

/*
 * プロジェクト事例だけ、一覧とページャの間に区切り線が入る（Figma実測）。
 *   一覧の下端 → 線   SP40 → PC80
 *   線 → ページャの丸 SP40 → PC80
 * 線の幅は PC=画面いっぱい1440 ／ SP=左右24を空けた327。
 * 線そのものは高さを持たないので、上下の余白を padding で作る。
 */
.p-archive--project .p-pager {
  position: relative;
  margin-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
  padding-top: clamp(40px, calc(40px + 40 * (100vw - 768px) / 672), 80px);
}

.p-archive--project .p-pager::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--c-line);
}

@media (min-width: 768px) {
  /* PCは画面いっぱいに引く */
  .p-archive--project .p-pager::before {
    left: 0;
    right: 0;
  }
}

.p-pager__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: var(--fs-nav); /* SP12 → PC16…実測はSP14なので下で調整 */
}

.p-pager__list :where(a, span) {
  display: grid;
  place-items: center;
  min-width: clamp(42px, calc(42px + 6 * (100vw - 768px) / 672), 48px);
  min-height: clamp(42px, calc(42px + 6 * (100vw - 768px) / 672), 48px);
  font-size: clamp(14px, calc(14px + 2 * (100vw - 768px) / 672), 16px);
  line-height: var(--lh-tight);
}

/* 数字だけ円で囲む。「...」「PREV」「NEXT」は文字のまま。
   枠線の濃さはデザイン実測どおり「押せるページが濃く、今いるページは薄い」。
     他のページ … #242424（濃い）
     今のページ … #DDDDDD（薄い）
   :where() は詳細度0なので、この指定は (0,2,0)。
   下の .current の指定も同じ詳細度になるよう :where() でそろえる。 */
.p-pager__list :where(a, span).page-numbers:not(.dots):not(.prev):not(.next) {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--c-text);
}

/* 今いるページだけ薄くする。
   上の指定は :not() を3つ持つため詳細度(0,5,0)。
   こちらも同じだけ積んで、後ろに置くことで優先させる。 */
.p-pager__list :where(a, span).page-numbers.current:not(.dots):not(.prev):not(.next) {
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.p-pager__list .dots {
  min-width: 0;
}

/* PREV / NEXT は円で囲まない。字間はデザインどおり0（指定しない） */
.p-pager__list :where(.prev, .next) {
  min-width: 0;
}

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

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

@media (min-width: 768px) {

  .p-archive__row {
    flex-direction: row;
    align-items: center;
    gap: 0;
    min-height: 96px; /* PC実測 */
    padding-block: 0;
  }

  .p-archive__meta {
    /* 日付の数字の形で幅が変わっても見出しの開始位置が動かないようにする。
       Figma実測: 日付162〜分類の右端334＝幅172。見出しはその80px右（x=414） */
    min-width: clamp(0px, calc(0px + 172 * (100vw - 768px) / 672), 172px);
  }

  .p-archive__text {
    flex: 0 1 682px; /* PC実測の見出し幅 */
    margin-left: 80px; /* 分類からの間隔。見出しは x=254（一覧の左端から） */
    -webkit-line-clamp: 1;
    /* 画面幅が1150px以下になると見出しが縮んで矢印に接するため、
       右に最低32px空ける。1440pxでは見出しが682pxで収まるので影響なし
       （デザインどおり矢印との間隔は152pxのまま）。 */
    margin-right: 32px;
  }

  .p-archive__arrow {
    /* PCは日付・見出しと同じ横並びの中で右端に置く */
    position: static;
    translate: none;
    margin-left: auto;
  }

  /* 2列×5行。1280 = 612 + 56 + 612 */
  .p-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(100% * 56 / 1280);
    row-gap: 80px;
  }
}