@charset "UTF-8";
/* =================================================
   single.css - 活動報告 詳細
   XD "News-detail"（AB 1200x5357）実測
     バッジ天y201 / メタ ベースラインy260 / タイトル ベースラインy294
     アイキャッチ y332-1005（1000x673・本文カラムより広い全コンテンツ幅）
     本文カラム 665px幅 / 小見出しBold16 lh34 / 本文Medium14 lh28
     著者ボックス y3503-3646（665x143・枠1px#707070）
     シェア y3678（38x38）/ 関連タブ y3746（18px高）/ 関連サムネ y3790（196x132）
   注: XDでは本文カラムがx277-942（中心609.5）で全体の中心600から9.5pxずれている。
       アイキャッチは中央なので、ここでは中央揃えに寄せてある（デザイナー確認事項）
   ================================================= */

.page-single {
  padding-top: 33px; /* ヘッダー緑罫y168 -> バッジ天y201 */
}

.single-article {
  width: min(665px, 100% - var(--content-pad) * 2);
  margin-inline: auto;
}

/* ---------- 記事ヘッダー ---------- */
.single-meta {
  margin-top: 11px;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: #6e6e6e;
}

.single-title {
  margin-top: -2px; /* 行送り28+40の重なり分。実測ベースライン y294 に合わせる */
  font-size: 20px;
  font-weight: 900;
  line-height: 40px;
  color: var(--color-text);
}

/* アイキャッチは本文カラムより広い1000px（コンテンツ幅いっぱい） */
.single-eyecatch {
  width: 100vw;
  max-width: var(--content-width);
  margin: 27px calc(50% - min(50vw, var(--content-width) / 2)) 0;
}

.single-eyecatch img {
  display: block;
  width: 100%;
  aspect-ratio: 1000 / 673;
  object-fit: cover;
}

/* ---------- 本文（ブロックエディタ標準ブロック） ---------- */
/* 本文・著者文はクライアント入稿。長いURLなど改行できない文字列で
   横スクロールが出ないようにしておく */
.single-content,
.single-author-text {
  overflow-wrap: anywhere;
}

.single-content {
  margin-top: 32px;
}

.single-content > *:first-child {
  margin-top: 0;
}

.single-content h2 {
  margin-top: 23px;
  font-size: 16px;
  font-weight: 700;
  line-height: 34px;
  color: var(--color-text);
}

.single-content p {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

.single-content figure {
  margin: 5px 0 0;
}

/* XDの本文画像は3点とも 665x448 だが、本文画像はクライアントがブロックエディタから
   入稿するため比率は固定しない（縦写真を強制トリミングして人物が切れるのを避ける）。
   見た目を揃えたい場合は 665x448 で入稿してもらう運用にする */
.single-content figure img {
  display: block;
  width: 100%;
  height: auto;
}

.single-content figcaption {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  text-align: right;
  color: #6e6e6e;
}

/* ---------- 著者ボックス ---------- */
.single-author {
  display: flex;
  gap: 22px;
  min-height: 143px; /* XD実測 665x143（枠込み） */
  margin-top: 23px;
  padding: 27px 35px 25px 29px; /* 枠1pxを足して 写真天32 / 左30 / 右36 */
  border: 1px solid #707070;
}

.single-author-photo {
  flex: none;
  margin-top: 4px; /* 写真天y3535 = テキストボックス天+4 */
  width: 85px;
  height: 85px;
  object-fit: cover;
}

.single-author-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

/* 氏名は本文と同じ段落内に青ボールドで流れる（XDの混在テキスト） */
.single-author-name {
  font-weight: 700;
  color: var(--color-accent);
}

/* ---------- シェア ----------
   XD実測: 38x38の角丸なし正方形を8px間隔で2つ（(277,3678) #2455D8 / (323,3678) #393939）。
   支給PNGは76x76＝表示寸法のちょうど2倍で、地の色まで含んだボタン画像
   （実測 #2455D8 / #393939 でXDと完全一致）。背景色は画像が出ないときの保険として残す */
.single-share {
  display: flex;
  gap: 8px;
  margin-top: 32px;
}

.single-share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}

.single-share-button img {
  display: block;
  width: 100%;
  height: 100%;
}

.single-share-button--facebook {
  background: var(--color-sns-blue); /* 実測 #2455D8 */
}

.single-share-button--x {
  background: var(--color-text);
}

/* ---------- 関連記事 ---------- */
.single-related {
  margin-top: 30px;
}

.related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* タブは2つ連結したセグメント（外側の角だけ1px） */
.related-tabs {
  display: flex;
}

.related-tab {
  min-width: 79px; /* XD実測 他の記事79 / 同じ記者から87 */
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--color-text);
  border-radius: 1px;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px; /* 18 - 枠1px x2 */
  cursor: pointer;
}

/* 連結時だけ外側の角を丸め、内側の枠を1本にする
   （パネルが1つしか無いときは単独のタブとして枠が4辺そろう） */
.related-tab:first-child:not(:only-child) {
  border-radius: 1px 0 0 1px;
}

.related-tab + .related-tab {
  border-left: none;
  border-radius: 0 1px 1px 0;
}

.related-tab.is-current {
  background: var(--color-text);
  color: var(--color-white);
}

.related-arrows {
  display: flex;
  gap: 7px;
}

.related-arrow {
  width: 17px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--color-text);
  border-radius: 1px;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}

.related-arrow.is-disabled {
  border-color: #6e6e6e;
  color: #6e6e6e;
  pointer-events: none;
}

.related-viewport {
  display: none;
  margin-top: 26px;
  overflow: hidden;
}

.related-viewport.is-current {
  display: block;
}

.related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 68px) / 3); /* 3列 / ガター34px */
  gap: 34px;
  transition: transform 0.3s ease;
}

/* 関連記事カードのバリアント（サムネ196x132 / バッジ66x24・12px / 日付・つづきを読むなし） */
.post-card--related .post-card-thumb {
  aspect-ratio: 196 / 132;
}

.post-card--related .cat-badge {
  width: 66px;
  height: 24px;
  font-size: 12px;
  line-height: 21px; /* 24 - 枠1.5px x2 */
}

.post-card--related .post-card-title {
  margin-top: 13px;
}

/* 一覧のような薄緑帯・下余白が無いぶん、SNSセクションまでを実測値で空ける */
.page-single .sns-section {
  margin-top: 138px;
}

/* =================================================
   SP（〜767px）SP版XD実測
   バッジ天y140(75x27=PCと同サイズ) / メタy183 / タイトル ベースラインy217(20/30)
   アイキャッチ y292(390x262・比率はPCと同じ1000:673を継続)
   本文の見出し/段落サイズはPCと同一（16/34, 14/28）
   注: SPモックアップは著者ボックス・シェア・関連記事セクションを描いていないが、
       PC版確定デザインには存在するため非表示にはせず縦積みで表示している。
       SPでの体裁はデザイナー確認事項
   ================================================= */
@media (max-width: 767px) {
  .page-single {
    padding-top: 20px;
  }

  /* SP実測: バッジ(25,140)75x27 / メタ天y180.6 / タイトル天y216.5 lh30 */
  .single-meta {
    margin-top: 14px;
  }

  .single-title {
    margin-top: 8px;
    line-height: 30px;
  }

  /* SPのアイキャッチは全幅（実測 (0,292) 390x262）。本文カラムから外へ出す */
  .single-eyecatch {
    width: calc(100% + var(--content-pad) * 2);
    margin-top: 16px;
    margin-inline: calc(var(--content-pad) * -1);
    max-width: none;
  }

  /* SPモックにはこの3ブロックが描かれていないが、PC版の確定デザインには存在し
     記事として必要（特にシェアはモバイルでこそ使う）。非表示にはせず縦積みにする */
  .single-author {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 0;
    padding: 24px 20px;
    text-align: center;
  }

  .single-author-photo {
    margin-top: 0;
  }

  /* 中央寄せの縦フレックスでは子が max-content 幅になるため、折り返すよう明示する */
  .single-author-text {
    width: 100%;
  }

  .related-track {
    grid-auto-columns: calc((100% - 16px) / 2);
    gap: 16px;
  }

  .page-single .sns-section {
    margin-top: 56px;
  }
}