@charset "utf-8";

/* ============================================================
   publication.css
   「出版物」ページ（/publication/）専用のスタイル

   構成（index.html 側の <main> と対応）：
     1. ふれあいペアレントプログラムの本  #program-books
     2. ふれあいペアレントプログラムに関連する本  #related-books
     3. ふれあいペアレントプログラムを理解するための参考文献  #references

   読み込み順：variables.css → destyle.css → common.css → publication.css
   共通スタイル（header/footer・.btn・.ttl-area等）はcommon.css側にあり、
   ここにはこのページ固有のコンポーネント（書影グリッド・文献一覧）のみを書く。
============================================================ */


/* ============================================================
   セクション共通レイアウト（.page-section）
   ------------------------------------------------------------
   3つのセクションはすべて同じ入れ子構造を取る：
     section.page-section(.page-section--base|.page-section--sub)
       └ div.page-section__inner        … 最大幅1440px・中央寄せ・余白
           ├ div.ttl-area               … 見出し（common.css）
           └ div.page-section__content  … 本文（全セクション共通で max-width: 820px）
   .page-section--base と .page-section--sub を1セクションごとに交互に指定することで、
   背景色が --color-background-base（#FEFCF8）→ --color-background-sub（#F0FAF5）→ …
   と交互に切り替わるようにしている（association.css / government.css と同じ方針）。
============================================================ */
.page-section { width: 100%; }
.page-section--base { background: var(--color-background-base); }
.page-section--sub  { background: var(--color-background-sub); }

/* inner：見出し・本文をこの中に縦に並べる（PC版はgap 56px・中央揃え、SP版はgap 32px） */
.page-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* content：本文側の幅。全セクション共通で max-width: 820px に統一 */
.page-section__content {
  width: 100%;
  max-width: 820px;
}

/* section__lead：common.css で定義済みの共通コンポーネントだが、下の書影グリッドとの
   間隔（margin-bottom）はこのページ固有の余白調整のため、ここでのみ指定する。
   PC版56px／SP版32px（SP版は下部のメディアクエリで上書き） */
#program-books .section__lead {
  margin-bottom: 56px;
}


/* ============================================================
   書影グリッド（.book-grid / .book-card）：1.・2.で使用
   ------------------------------------------------------------
   構造：ul.book-grid
           └ li.book-card
                 ├ a.book-card__cover-link  … 書影画像（Amazon商品ページへのリンク）
                 │    ├ img.book-card__cover
                 │    ├ img.book-card__cover-link__icon   … 外部リンクアイコン（右上に重ねて表示）
                 │    └ span.book-card__cover-link__sr-text … スクリーンリーダー専用テキスト
                 │         （「Amazonの商品ページを別タブで開く」ことを音声で伝える）
                 └ p.book-card__caption     … 著者・年・書名・出版社
   カードは固定幅（180px）のまま横に並べ、画面幅が足りなくなったら
   flex-wrap によって自然に折り返す（PC・SPともに画像サイズは変えない）。
============================================================ */
.book-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 32px;
}
.book-card {
  flex: 0 0 180px; /* 固定幅：画面サイズが変わっても縮まない */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: left;
}

/* 書影リンク：書影画像をAmazonの商品ページ（別タブ）に遷移させるリンクのラッパー
   - display: block で img と同じ大きさのクリック領域にする
   - opacity の変化でクリック可能であることを示す（common.css の .btn:hover と同じ考え方）
   - position: relative … 右上に重ねる外部リンクアイコン（.book-card__cover-link__icon）の基準位置 */
.book-card__cover-link {
  display: block;
  position: relative;
  text-decoration: none;
  transition: opacity .2s ease;
}
.book-card__cover-link:hover {
  opacity: .85;
}

/* 外部リンクアイコン：書影の右上に小さく重ねて表示し、クリックするとAmazonの
   商品ページが別タブで開くことを視覚的に示す。
   icon-external.png は白色のアイコン（緑背景のボタン上で使う想定の画像）のため、
   背景を --color-primary（緑丸）にしてどんな表紙画像の上でも視認できるようにしている。 */
.book-card__cover-link__icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 4px;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* スクリーンリーダー専用テキスト：視覚的には非表示（画面外に配置）だが、
   スクリーンリーダーには読み上げられる。「Amazonの商品ページを別タブで開く」ことを
   音声で伝えるためのテキスト（common.css に同種のユーティリティが無いため、
   このページ固有のクラス名で定義している）。 */
.book-card__cover-link__sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 書影：実際の表紙画像の縦横比（約0.71〜0.72）に近い5:7の枠に object-fit: contain で収める
   （画像ごとに縦横比が微妙に異なるため、containで枠内に統一して揃える）
   幅は180px固定：PC・SPともにサイズを変えない */
.book-card__cover {
  width: 180px;
  height: auto; /* width/height属性より aspect-ratio を優先させる */
  aspect-ratio: 5 / 7;
  object-fit: contain;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(42, 74, 47, .12);
}
.book-card__caption {
  font-family: var(--font-sans);
  font-size: var(--text-pc-caption-size);
  font-weight: var(--text-pc-caption-weight);
  line-height: var(--text-pc-caption-lh);
  color: var(--color-text-body);
}

/* book-grid__note：書影グリッドの下に添える注記
   「書影をクリックするとAmazonの商品ページが別タブで開く」ことを文章でも伝える。
   .book-card__caption と同じ文字サイズ・行間（text-pc-caption / text-sp-caption）を使用。 */
.book-grid__note {
  width: 100%;
  margin-top: 40px;
  font-family: var(--font-sans);
  font-size: var(--text-pc-caption-size);
  font-weight: var(--text-pc-caption-weight);
  line-height: var(--text-pc-caption-lh);
  color: var(--color-text-body);
}


/* ============================================================
   参考文献リスト（.reference-list）：3.のみで使用
   ------------------------------------------------------------
   画像なし、テキストのみの文献一覧。
   ぶら下げインデントで2行目以降を字下げし、文献の区切りを見やすくする。
============================================================ */
.reference-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.reference-list li {
  padding-left: 1.6em;
  text-indent: -1.6em; /* ぶら下げインデント */
  font-family: var(--font-sans);
  font-size: var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
}


/* ============================================================
   見出しの改行制御（.br-390）：3.「参考文献」の見出しのみで使用
   ------------------------------------------------------------
   PC・SPとも「ふれあいペアレントプログラムを」の後で改行するが、
   389px以下の非常に狭い画面では改行を解除し、一続きの文にする。
============================================================ */
@media (max-width: 389px) {
  .ttl-area__ttl .br-390 { display: none; }
} /* @media (max-width: 389px) publication/index.html 見出し改行解除（389px以下） */



/* ============================================================
   SP版（874px以下）
   ※ ブレークポイントは common.css の一般セクションと同じ874pxに揃えている
============================================================ */
@media (max-width: 874px) {

  /* セクション共通：paddingを縮小し、左揃え・gap 32pxに変更
     （association.css / government.css の他ページのSP調整と同じ考え方） */
  .page-section__inner {
    padding: 40px 16px;
    align-items: flex-start;
    gap: 32px;
  }

  /* section__lead：下の書影グリッドとの間隔をSP版32pxに変更 */
  #program-books .section__lead {
    margin-bottom: 32px;
  }

  /* 書影グリッド：画像サイズ（180px）は変えず、横に並ぶのは最大3枚までに制限する。
     3枚分の幅（180px×3＋gap32px×2＝604px）を超えないようにし、
     それより画面幅が狭い場合は flex-wrap によって自然と1〜2枚ずつに折り返る */
  .book-grid {
    max-width: calc(180px * 3 + 32px * 2);
    margin: 0 auto;
  }
  .book-card__caption {
    font-size: var(--text-sp-caption-size);
    line-height: var(--text-sp-caption-lh);
  }
  .book-grid__note {
    margin-top: 24px;
    font-size: var(--text-sp-caption-size);
    line-height: var(--text-sp-caption-lh);
  }

  /* 参考文献リスト：SP用のフォントサイズ・行間に切り替え */
  .reference-list li {
    font-size: var(--text-sp-body-size);
    line-height: var(--text-sp-body-lh);
  }
} /* @media (max-width: 874px) publication/index.html 全セクション SP版 */