/* pages/archive.css: 実績・お知らせの一覧（フィルター・カード・ページネーション）と詳細（works-detail / news-detail）。
   下層の読み込み順で business の後、form の前。 */
@media (min-width: 768px) {
  .article__body p,
  .article__data > div {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .archive-arrow {
    transition: none;
  }

  .news-list__item:hover .archive-arrow,
  .news-list__item:focus-visible .archive-arrow {
    transform: none;
  }
}

.archive-section {
  padding: 0 0 var(--section);
}

/* 白カードではなく上下1pxの罫線のみ。ラベル→縦線25px / 縦線→ボタン群28px */
.archive-filter {
  padding: 30px 60px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: none;
  display: flex;
  align-items: center;
  gap: 28px;
}

.archive-filter__label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 25px;
  font: 700 20px/1 var(--latin);
  letter-spacing: 1px;
  color: var(--c-cyan);
  white-space: nowrap;
}

.archive-filter__label::after {
  content: "";
  width: 1px;
  height: 19.62px;
  background: var(--c-navy);
  flex: none;
}

.archive-filter__items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* body の line-height:2 を継承すると高さが約54pxになるため、高さを26pxに固定する */
.archive-filter__button {
  height: 26px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-navy);
  border-radius: 40px;
  background: none;
  color: var(--c-navy);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .8px;
  cursor: pointer;
}

.archive-filter__button.is-active,
.archive-filter__button:hover {
  border-color: transparent;
  background: var(--c-cyan);
  color: #fff;
  font-weight: 700;
}

/* 3列×343px・列間50px・行間60px、フィルター下端→グリッド上端80pxが基準。
   CSSの本文最終行には行送り＋ディセンダ分の約9pxが下に付く（デザインはキャップ基準）ため、
   行間は 60-9=51px、ページネーション上余白は 80-9=71px にして見た目の間隔を合わせている（9pxは行数に依存しない） */
.works-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 51px 50px;
}

/* カード自体には背景・影・余白を持たせない（画像とテキストが背景に直接乗る） */
.works-card {
  display: block;
  background: none;
  box-shadow: none;
  color: inherit;
  transition: transform .3s var(--ease);
}

.works-card:hover {
  transform: translateY(-7px);
  box-shadow: none;
}

/* hover色はお知らせ一覧・TOPと同じシアン */
.works-card:hover .works-card__title,
.works-card:focus-visible .works-card__title {
  color: var(--c-cyan);
}

/* 画像エリア221px。画像は上から11px下げて210px（バッジが上端をまたぐための余白） */
.works-card__media {
  position: relative;
  height: 221px;
  overflow: hidden;
}

.works-card__image {
  position: absolute;
  left: 0;
  top: 11px;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  transition: transform .5s var(--ease);
}

.works-card:hover .works-card__image,
.works-card:focus-within .works-card__image {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .works-card__image {
    transition: none;
  }
}

/* バッジは画像の上端をまたぐ位置に重ねる */
.works-card__media .work-category {
  position: absolute;
  left: 11px;
  top: -3px;
  z-index: 1;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  background: var(--c-cyan);
  color: #fff;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .7px;
  white-space: nowrap;
}

/* デザインの座標はキャップ基準なので、CSSの行ボックス（半行送り＋アセンダ分）を差し引いて
   画像下端→タイトル上端30px・タイトル→本文69px の見た目を再現した値 */
.works-card__body {
  margin-top: 20px;
  padding: 0;
}

.works-card__title {
  margin: 0 0 21px;
  font: 700 20px/1.6 var(--display);
  letter-spacing: 1px;
  transition: color .25s var(--ease);
}

.works-card__copy {
  margin: 0;
  font: 400 16px/2 var(--display);
  letter-spacing: .8px;
}

/* 円60px・間隔30.56px、末尾に8×13の矢印（4番目の円から37.88px） */
.pagination {
  margin-top: 71px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30.56px;
}

.pagination a,
.pagination span {
  width: 60px;
  height: 60px;
  border: 1px solid #012f4d;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  font: 700 20px/1 var(--latin);
  color: #012f4d;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.pagination .is-current {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: #fff;
}

/* hover は選択中（.is-current）と同じ紺塗り＋白文字にする（カテゴリボタンの「アクティブ＝hover」と同じルール） */
.pagination a:not(.pagination__next):hover,
.pagination a:not(.pagination__next):focus-visible {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: #fff;
}

/* 詳細度を .pagination a (0,1,1) より上げないと円の枠が消えないので .pagination を前置する */
.pagination .pagination__next {
  width: 8px;
  height: 13px;
  margin-left: 7.32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
}

.pagination .pagination__next img {
  display: block;
  width: 8px;
  height: 13px;
}

/* お知らせ一覧はカード（.news-list）の白い下端が実際の端なので、余白80pxをそのまま使う */
.news-list + .pagination {
  margin-top: 80px;
}

/* カテゴリはシアン塗りに白文字。実績カードのバッジは .works-card__media .work-category で上書きしている */
.work-category,
.news-category {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 11px;
  background: var(--c-cyan);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

/* 白カード: 余白上下40px / 行間41px / 罫線は左右38.5px内側 / 本文は左右63.5px内側。
   1行は 日付+カテゴリ(22px) → 25px → タイトル → 40px → 罫線 の2段組み。
   CSSは行ボックス（20px×lh2）がキャップより上下12.5pxずつ大きいため、25px→12.5px / 40px→27.5px に読み替えている */
.news-list {
  margin-top: 80px;
  padding: 40px 38.5px;
  background: #fff;
}

.news-list__item {
  display: block;
  padding: 0 25px 27.5px;
  border-bottom: 1px solid rgba(4,26,68,.18);
  color: inherit;
  transition: color .25s var(--ease);
}

.news-list__item + .news-list__item {
  margin-top: 40px;
}

/* hover: テキストはシアン。矢印も currentColor で一緒に色が変わる */
.news-list__item:hover,
.news-list__item:focus-visible {
  color: var(--c-cyan);
}

.news-list__meta {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 17px;
}

.news-list__date {
  font: 700 14px/1 var(--latin);
  letter-spacing: .7px;
}

.news-list__item .news-category {
  height: 22px;
  margin: 0;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: var(--c-cyan);
  color: #fff;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .7px;
  white-space: nowrap;
}

.news-list__head {
  margin-top: 12.5px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.news-list__title {
  flex: 1 1 auto;
  margin: 0;
  font: 700 20px/2 var(--display);
  letter-spacing: 1px;
}

/* 円の縁取りなしの横線＋45度の矢羽。フォントの → では太さ・長さが合わないためCSSで作図し、
   currentColor で hover 色に追従させる */
.archive-arrow {
  position: relative;
  flex: none;
  width: 16.29px;
  height: 7.36px;
  color: inherit;
  transition: transform .3s var(--ease);
}

.archive-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  margin-top: -.5px;
  background: currentColor;
}

.archive-arrow::after {
  content: "";
  position: absolute;
  right: 1.1px;
  top: 50%;
  width: 5.2px;
  height: 5.2px;
  margin-top: -2.6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* hover: 矢印だけ軽く右へ */
.news-list__item:hover .archive-arrow,
.news-list__item:focus-visible .archive-arrow {
  transform: translateX(6px);
}

/* 記事本文の幅はページヒーロー・パンくず（.wrap）と同じ var(--wrap) を参照させる。
   詳細ページも <main> に .page--archive（--wrap:1127px）を付けているので、画面幅によらず両者の幅がずれない */
.article {
  width: var(--container-w);
  margin: 0 auto 0 var(--container-ml);
  padding: 0 0 var(--section);
}

/* お知らせ詳細: 白カードの左右余白60px、タイトル直下に罫線、画像はそこから40px下にタイトルと同じ幅で置く */
.article__card {
  background: #fff;
}

.article__head {
  padding: 60px 60px 0;
  background: #fff;
}

/* タイトル下の罫線は白カードの内側だけに引く（.article 全幅に border を引くと左右60pxの余白まで線が伸びる） */
.article:not(.article--works-detail) .article__head {
  position: relative;
}

.article:not(.article--works-detail) .article__head::after {
  content: "";
  position: absolute;
  right: 60px;
  bottom: 0;
  left: 60px;
  height: 1px;
  background: #041a44;
}

.article__meta {
  margin: 0 0 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  font: 700 14px/1 var(--latin);
}

.article__title {
  margin: 0;
  font: 700 clamp(21px,2.636vw,36px)/1.5 var(--display);
  letter-spacing: .035em;
}

/* 実績詳細（works-detail）: デザインの文字座標はキャップ高さ〜ベースラインでトリムされた値。
   CSSの行ボックスはその上下に半行送り＋アセンダ分ふくらむため、(lh - 1.4444*fs)/2 + 0.4337*fs を引いた値で余白を積んでいる。
   お知らせ詳細と違い白カードを持たず、本文がコンテンツ幅いっぱいに流れるので左右の余白は0 */
.article--works-detail .article__head,
.article--works-detail .article__body {
  background: transparent;
}

/* works-detail は .article__title 自身に罫線を持つため、.article__head 側の罫線は打ち消す（二重線防止） */
.article--works-detail .article__head {
  padding: 0 0 40px;
  border-bottom: 0;
}

/* カテゴリ: シアン塗り・白文字・h32・角丸40。
   inline-block のままだと親の行ボックス分だけ下にずれるので、幅 max-content の flex にする */
.article--works-detail .work-category {
  width: max-content;
  height: 32px;
  margin: 0 0 19px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 40px;
  background: var(--c-cyan);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .7px;
}

/* タイトル36px/lh48、下罫線は 2px solid #012f4d */
.article--works-detail .article__title {
  padding-bottom: 13px;
  border-bottom: 2px solid #012f4d;
  line-height: 1.3333;
  letter-spacing: 0;
}

/* メイン画像 1124×500・本文中の画像 1124×367（支給素材は3:2なので cover で切り抜く） */
/* 下の .article__image（お知らせ詳細用の内側寄せ）に対し、works-detail は .article 全幅・上余白なしに戻す（意図した差分） */
.article--works-detail > .article__image {
  width: 100%;
  margin: 0;
  aspect-ratio: 1124 / 500;
  max-height: none;
}

.article--works-detail .article__body {
  padding: 61px 0 0;
}

.article--works-detail .article__body h2 {
  margin: 30px 0 27px;
}

/* 段落間18pxはデザインのキャップ上端の差から換算した値（デザイン側の間隔40はベースライン基準のためそのまま使えない）。
   実装は約物半角の YakuHanJP を使うので、デザインより折り返しが1行少なくなる箇所がある（意図した差） */
.article--works-detail .article__body p {
  margin-bottom: 18px;
}

/* クライアント名は枠内の中央文字ではなく、枠の上に置く左寄せの見出し。左カラム幅より長いのでグリッドの外に出す。
   .article__body p (0,1,1) に勝つ必要があるため2クラスで指定 */
.article--works-detail .article__client {
  margin: 0;
  padding: 0;
  background: none;
  text-align: left;
  font: 700 36px/1.6667 var(--display);
}

/* 左カラム＝ロゴ枠381 / 右カラム＝データ628 / 間隔116 */
.article--works-detail .article__details {
  margin: 26px 0 135px;
  display: grid;
  grid-template-columns: 381fr 628fr;
  column-gap: 10.302%;
  gap: 0 10.302%;
  align-items: start;
}

.article__logo {
  aspect-ratio: 381 / 395;
  display: grid;
  place-items: center;
  background: #d9d9d9;
  font: 700 36px/1 var(--display);
  color: #012f4d;
}

/* ロゴ画像が入っているときは背景を白にして、ロゴの余白を目立たせない（未設定時のグレーの「LOGO」枠と区別する） */
.article__logo--image {
  background: #fff;
}

.article__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* データ表: 上罫線なし・各行の下に破線のみ。
   マイナスマージンは1行目のキャップ上端をロゴ枠上端に合わせるため */
.article--works-detail .article__data {
  margin-top: -7px;
  border: 0;
}

/* 項目名127px / 内容441px。内容カラムを右カラムいっぱいにしないことで「支援内容」がデザインどおり2行に折り返す */
.article--works-detail .article__data > div {
  position: relative;
  padding: 0 0 23px;
  border: 0;
  display: grid;
  grid-template-columns: 20.223% 70.222%;
  gap: 0;
  font-size: 16px;
  line-height: 1.5;
}

.article--works-detail .article__data > div + div {
  padding-top: 20px;
}

/* 破線の幅は558px（右カラム628pxいっぱいではなく手前で止める） */
.article--works-detail .article__data > div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 88.854%;
  border-bottom: 1px dashed #012f4d;
}

.article--works-detail .article__data dd a {
  color: #0071bc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* お知らせ詳細: 画像はタイトルと同じ幅（.article から左右60pxずつ内側）、罫線から40px空けて置く。
   works-detail は上の .article--works-detail 側の上書きで全幅にしている */
.article__image {
  width: calc(100% - 120px);
  margin: 40px auto 0;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  display: block;
}

.article__body {
  padding: 64px 62px 72px;
  background: #fff;
}

.article__body > *:last-child {
  margin-bottom: 0;
}

/* シアンのバーは4×32pxで行ボックス（42px）より短いため、border-left ではなく ::before で置く */
.article__body h2 {
  position: relative;
  margin: 58px 0 27px;
  padding-left: 13px;
  font: 700 clamp(20px,2.0499vw,28px)/1.5 var(--display);
}

.article__body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 32px;
  background: var(--c-cyan);
}

.article__body h2:first-child {
  margin-top: 0;
}

.article__body h3 {
  margin: 38px 0 16px;
  font: 700 16px/1.7 var(--display);
}

/* 本文は実績詳細・お知らせ詳細とも16px/lh36 */
.article__body p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 2.25;
}

.article__body mark {
  padding: 0 .12em;
  background: linear-gradient(transparent 58%, #fff1a7 58%);
  color: inherit;
}

.article__details {
  margin: 52px 0;
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 48px;
  align-items: start;
}

.article__client {
  margin: 0;
  padding: 52px 28px;
  background: #f1f1f1;
  text-align: center;
  font: 700 36px/1.6 var(--display);
}

.article__data {
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.article__data > div {
  padding: 15px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 20px;
  font-size: 13px;
  line-height: 1.8;
}

.article__data dt {
  font-weight: 700;
}

.article__data dd {
  margin: 0;
}

.article__point-list {
  margin: 30px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.article__point-list li {
  padding: 19px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
}

.article__point-list b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-cyan);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 24px/1 var(--latin);
}

/* 紺塗り・白文字・h75・角丸60・左右余白120（文字数で幅が変わる設計。works=380px / news=420px はこの余白で一致する） */
/* border は透明ではなく紺で常に持たせる（box-sizing:border-box なので hover で線を出しても寸法が動かない） */
.archive-back {
  width: max-content;
  min-width: 380px;
  margin: 76px auto 0;
  min-height: 75px;
  padding: 0 120px;
  border: 1px solid var(--c-navy);
  border-radius: 60px;
  background: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

/* hover: 塗りを外して「紺の線＋紺の文字」に反転させる */
.archive-back:hover,
.archive-back:focus-visible {
  background: transparent;
  border-color: var(--c-navy);
  color: var(--c-navy);
}

@media (max-width: 767px) {
  /* SPはPC構造をそのまま1カラムに落とした暫定の指定（SPデザインは未確認） */
  .archive-filter {
    padding: 24px 0;
    display: block;
  }

  .archive-filter__label {
    margin-bottom: 13px;
  }

  .archive-filter__label::after {
    display: none;
  }

  .archive-filter__items {
    gap: 7px;
  }

  .archive-filter__button {
    padding: 0 10px;
    font-size: 12px;
  }

  .works-grid {
    margin-top: 30px;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .works-card__media {
    height: 206px;
  }

  .works-card__image {
    height: 195px;
  }

  .works-card__title {
    font-size: 18px;
  }

  .pagination {
    margin-top: 42px;
    gap: 12px;
  }

  .pagination a,
  .pagination span {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .pagination .pagination__next {
    width: 8px;
    height: 13px;
    margin-left: 4px;
  }

  .news-list {
    margin-top: 28px;
    padding: 20px;
  }

  .news-list__item {
    padding: 0 0 18px;
  }

  .news-list__item + .news-list__item {
    margin-top: 20px;
  }

  .news-list__meta {
    height: 20px;
    gap: 10px;
  }

  .news-list__date {
    font-size: 12px;
  }

  .news-list__item .news-category {
    height: 20px;
    padding: 0 8px;
    font-size: 11px;
  }

  .news-list__head {
    margin-top: 6px;
    gap: 12px;
  }

  .news-list__title {
    font-size: 13px;
    line-height: 1.75;
  }

  .news-list + .pagination {
    margin-top: 42px;
  }

  .article {
    width: 100%;
    padding-bottom: 72px;
  }

  .article__head {
    padding: 34px 24px 32px;
  }

  .article:not(.article--works-detail) .article__head::after {
    right: 24px;
    left: 24px;
  }

  .article__meta {
    margin-bottom: 16px;
    font-size: 12px;
  }

  .article__title {
    font-size: 27px;
  }

  /* PC用の calc(100% - 120px) / margin 40px はSPだと .article__head（左右24px内側）とずれるため、24px内側に揃えて上書きする */
  .article__image {
    width: calc(100% - 48px);
    margin: 20px auto 0;
    height: 230px;
  }

  .article__body {
    padding: 42px 24px 50px;
  }

  .article__body p {
    font-size: 13px;
    line-height: 2.05;
  }

  .article__body h2 {
    margin-top: 44px;
    font-size: 22px;
  }

  .article__body h2::before {
    top: 6px;
    height: 24px;
  }

  .article__details {
    margin: 35px 0;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .article__client {
    padding: 34px 20px;
    font-size: 16px;
  }

  .article__data > div {
    grid-template-columns: 88px 1fr;
    gap: 12px;
    font-size: 12px;
  }

  /* works-detail のSP（PC構造を1カラムに落とした暫定）。左右は他の記事ページの .article__head と同じ24pxの余白をとる */
  .article--works-detail .article__head {
    padding: 0 24px 20px;
  }

  .article--works-detail .article__body {
    padding: 28px 24px 0;
  }

  /* メイン画像もタイトル・本文と同じ左右24pxの内側に収める */
  .article--works-detail > .article__image {
    width: calc(100% - 48px);
    margin: 0 auto;
  }

  .article--works-detail .article__body h2 {
    margin: 40px 0 18px;
  }

  .article--works-detail .article__client {
    font-size: 20px;
    line-height: 1.5;
  }

  .article--works-detail .article__details {
    margin: 16px 0 48px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .article--works-detail .article__data {
    margin-top: 0;
  }

  .article--works-detail .article__data > div {
    grid-template-columns: 88px 1fr;
    font-size: 13px;
    padding-bottom: 14px;
  }

  .article--works-detail .article__data > div + div {
    padding-top: 14px;
  }

  .article--works-detail .article__data > div::after {
    width: 100%;
  }

  .article__logo {
    position: relative;
    aspect-ratio: 16 / 9;
    font-size: 24px;
  }

  /* ロゴ画像の高さで枠が押し広げられないよう、枠（16:9）の内側に余白付きで収める */
  .article__logo img {
    position: absolute;
    inset: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
  }

  /* SPの戻るボタンは全幅にせず、フォームの送信ボタン（.form-submit）と同じ大きさにそろえる */
  .archive-back {
    min-width: 0;
    width: calc(100% - 48px);
    max-width: 100%;
    margin: 40px auto 0;
    min-height: 64px;
    padding: 0 32px;
    font-size: 17px;
  }
}