/* =====================================================================
   絵本でひとこと — デザイン確定版の CSS（下書き）
   2026-10-18 デザインセッション作成。collector/site/style.css を丸ごと置き換える前提。

   書き方
   - スマホを基本に書き、768px 以上で PC の形を足す（min-width）
   - 部品名は今の HTML のものを使う。新しく必要になった部品名と HTML の変更は
     site/design/structure.md にまとめた（生成処理の改修が前提）
   - 書体は HTML の <head> で Google Fonts を読み込む（structure.md 参照）

   規則
   - 声（ひとこと）は明朝、情報はゴシック
   - 色は引用符と、それに連なる文字だけ（話者＝スレートブルー、行き先＝珊瑚色）。罫線は引かない
   - 本文の幅は 680px の 1 本（トップ・利用シーン・固定ページ）
   - 引用符 “ ” はひとことのブロックの左上と右下に掛ける（PC は外側、スマホは内側の角）
   ===================================================================== */

:root {
  --paper: #FCF9F7;        /* 背景 */
  --rail: #F4EFEA;         /* 左カラム・スマホのメニューの地 */
  --ink: #23272E;          /* 本文 */
  --ink-2: #5B6270;        /* 補足（著者・説明文・フッター） */
  --slate: #586F8C;        /* スレートブルー：始まりの引用符、話者の行、利用シーンのラベル */
  --coral: #D99088;        /* 珊瑚色：終わりの引用符、リンクの下線 */
  --coral-text: #A8574E;   /* 珊瑚色の濃い側：行き先の文字（小さい文字でも読める濃さ） */
  --sep: #B5BECA;          /* 話者の行の区切り「／」 */
  --underline: #C9C2BC;    /* 補足のリンクの下線 */
  --amazon: #FF9900;  --amazon-hover: #E88B00;  --amazon-text: #232F3E;
  --rakuten: #BF0000; --rakuten-hover: #A30000; --rakuten-text: #FFFFFF;

  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;

  /* 移動のリンクに付ける矢印（文字色で塗る） */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--gothic); font-weight: 400;
  line-break: strict; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* 矢印つきのリンク（すべて見る／この絵本を見る／利用シーンから探す／一覧のシーン名） */
.situation-more::after,
.button-more::after,
.page-more a::after,
.scene-item-title a::after {
  content: ""; display: inline-block; flex: none; width: 14px; height: 10px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform .15s;
}
.situation-more:hover::after,
.button-more:hover::after,
.card:hover .button-more::after,
.page-more a:hover::after,
.scene-item-title a:hover::after { transform: translateX(3px); }

/* =====================================================================
   ヘッダー（スマホは全ページ。PC は作品ページだけ）
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 56px; padding: 0 20px; background: var(--paper);
}
.site-header .site-name { display: block; }
.site-header .site-name img { display: block; width: 148px; height: auto; }
.site-header-link { display: none; }

/* スマホの「利用シーン」メニュー（details を使うので JavaScript は要らない） */
.site-menu summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 0 0 12px;
  font-size: 13.5px; font-weight: 500; letter-spacing: .04em; list-style: none; cursor: pointer;
}
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary::after {
  content: ""; width: 12px; height: 8px; background: currentColor;
  -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat;
}
.site-menu[open] summary::after { transform: rotate(180deg); }
.site-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 56px); overflow: auto;
  background: var(--rail); padding: 8px 20px 28px;
}

/* 利用シーンのリスト（スマホのメニューと PC の左カラムで共通） */
.scene-nav { list-style: none; margin: 0; padding: 0; }
.scene-nav a { display: flex; align-items: center; min-height: 48px; font-size: 15px; letter-spacing: .03em; color: var(--ink); }
.scene-nav a:hover { color: var(--coral-text); }
.scene-nav a[aria-current] { color: var(--coral-text); font-weight: 700; }

/* =====================================================================
   骨組み
   ===================================================================== */
.site-rail { display: none; }          /* PC の左カラム（スマホではヘッダーのメニューが代わる） */
.site-main { padding: 0 20px; }

/* =====================================================================
   トップ
   ===================================================================== */
.intro { padding: 36px 0 56px; }
.intro-title {
  margin: 0; font-family: var(--mincho); font-weight: 600;
  font-size: 32px; line-height: 1.45; letter-spacing: -.03em;
}
.intro-title span { display: inline-block; }   /* 「この絵本。」の途中で折らない */
.intro p { margin: 18px 0 0; max-width: 31.5em; font-size: 14px; line-height: 1.95; color: var(--ink-2); word-break: auto-phrase; }

.situation { padding: 0 0 88px; }
/* シーン見出しは、そのシーンを読むあいだ上端に残る（スマホはヘッダーの下） */
.situation-head {
  position: sticky; top: 56px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 -20px 24px; padding: 12px 20px 14px; background: var(--paper);
}
.situation-title {
  margin: 0; font-family: var(--mincho); font-weight: 600;
  font-size: 19.5px; line-height: 1.45; letter-spacing: -.01em; word-break: auto-phrase;
}
.situation-title a:hover { color: var(--coral-text); }
.situation-more {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; font-weight: 500; color: var(--coral-text); white-space: nowrap;
}

/* =====================================================================
   カード（トップ・利用シーン）
   今の HTML の並び（書影 → 本文）のまま、CSS で
   「ひとこと → 出どころ → 書影と書名・著者・行き先」の順に組み替える
   ===================================================================== */
.cards { display: flex; flex-direction: column; gap: 56px; }
.card {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 16px;
  grid-template-areas:
    "quote quote"
    "meta  meta"
    "cover title"
    "cover author"
    "cover more";
  grid-template-rows: auto auto auto auto 1fr;
}
.card-body { display: contents; }
.card-cover { grid-area: cover; align-self: start; margin-top: 20px; }
.card-cover img { display: block; width: auto; height: auto; max-width: 108px; max-height: 100px; }
.card-quote { grid-area: quote; }
.card-meta { grid-area: meta; }
.card-title { grid-area: title; margin: 20px 0 0; font-weight: 700; font-size: 16px; line-height: 1.55; word-break: auto-phrase; }
.card-book-author { grid-area: author; margin: 3px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.card-more { grid-area: more; margin: 8px 0 0; }
.card:hover .card-title a, .card-title a:hover { color: var(--coral-text); }

/* 「この絵本を見る」：ボタンではなく、珊瑚色の文字と矢印 */
.button-more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none;
  font-size: 14px; font-weight: 500; color: var(--coral-text);
}

/* =====================================================================
   ひとこと（カードと作品ページで共通）
   ===================================================================== */
.card-quote,
.quote blockquote {
  position: relative; margin: 0; padding: 30px 0;
  font-family: var(--mincho); font-weight: 500; letter-spacing: .02em; text-wrap: pretty;
}
/* 長さで 3 段（生成処理が付ける印。40 字以内／80 字以内／それ以上） */
.len-s { font-size: 23px;   line-height: 1.7;  letter-spacing: 0; }
.len-m { font-size: 18.5px; line-height: 1.9; }
.len-l { font-size: 16.5px; line-height: 1.95; }

/* 引用符：書体の二重引用符。始まり＝スレートブルー（左上）、終わり＝珊瑚色（右下）。
   読み上げの対象から外す（content の後ろの "" が代わりの文字） */
.card-quote::before, .quote blockquote::before,
.card-quote::after,  .quote blockquote::after {
  position: absolute; font-family: var(--mincho); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: 0;
}
.card-quote::before, .quote blockquote::before { content: "“"; content: "“" / ""; top: -10px; left: -2px; color: var(--slate); }
.card-quote::after,  .quote blockquote::after  { content: "”"; content: "”" / ""; bottom: -34px; right: -2px; color: var(--coral); }
/* ↑ 1 行目は「読み上げから外す書き方」に未対応のブラウザ向けの予備（未対応だと 2 行目ごと無視される） */

/* 出どころの行（年齢・スキ・話者） */
.card-meta,
.quote-meta {
  display: flex; flex-wrap: wrap; margin: 8px 0 0;
  font-size: 12px; line-height: 1.8; letter-spacing: .04em; color: var(--slate);
}
.card-meta > *:not(:last-child)::after,
.quote-meta > *:not(:last-child)::after { content: "／"; margin: 0 .5em; color: var(--sep); }

/* =====================================================================
   利用シーンページ・利用シーンの一覧
   ===================================================================== */
.scene-head { padding: 36px 0 0; }
.scene-title { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: 28px; line-height: 1.4; letter-spacing: -.02em; word-break: auto-phrase; }
.scene-description { margin: 16px 0 0; font-size: 14px; line-height: 1.95; color: var(--ink-2); }
.scene-count { margin: 28px 0 44px; font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
.scene-count b { margin-right: 4px; font-family: var(--mincho); font-weight: 600; font-size: 22px; letter-spacing: 0; color: var(--ink); }

.scene-list { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-direction: column; gap: 44px; }
.scene-item-title { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: 21px; line-height: 1.45; letter-spacing: -.01em; }
.scene-item-title a { display: inline-flex; align-items: center; gap: 12px; }
.scene-item-title a::after { color: var(--coral-text); }
.scene-item-title a:hover { color: var(--coral-text); }
.scene-item-description { margin: 14px 0 0; font-size: 14px; line-height: 1.95; color: var(--ink-2); }

.empty { margin: 32px 0; font-size: 14px; color: var(--ink-2); }

/* =====================================================================
   作品ページ
   ===================================================================== */
.work { display: block; padding: 20px 0 0; }
.bookinfo { display: block; }
.bookinfo-cover img { display: block; margin: 0 auto; width: auto; height: auto; max-height: 160px; }
.bookinfo-title { margin: 22px 0 0 -.5em; font-family: var(--mincho); font-weight: 600; font-size: 26px; line-height: 1.45; letter-spacing: -.01em; word-break: auto-phrase; }
.bookinfo-author { margin: 8px 0 0; font-size: 13.5px; line-height: 1.8; }
.bookinfo-pub { margin: 2px 0 0; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); }   /* 出版社と発売日を 1 行に */
.bookinfo-publisher + .bookinfo-date { margin-left: 1em; }

/* 購入導線（Amazon・楽天のブランド色） */
.purchase { margin: 22px 0 0; }
.purchase-buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.purchase .button {
  display: flex; align-items: center; justify-content: center; height: 52px; padding: 0;
  border: 0; font-size: 15px; font-weight: 700; letter-spacing: .06em; transition: background-color .15s;
}
.button-amazon  { background: var(--amazon);  color: var(--amazon-text); }
.button-amazon:hover  { background: var(--amazon-hover); }
.button-rakuten { background: var(--rakuten); color: var(--rakuten-text); }
.button-rakuten:hover { background: var(--rakuten-hover); }
.pr {
  display: inline-block; margin-top: 10px; padding: 0 5px; border: 1px solid var(--underline);
  font-size: 10px; letter-spacing: .08em; color: var(--ink-2);
}
.purchase-bottom { margin-top: 48px; }   /* スマホだけ。作品紹介のあとにもう一度 */

.work-body { margin-top: 56px; }
.quotes-title, .description-title {
  margin: 0; font-family: var(--mincho); font-weight: 600; font-size: 22px; line-height: 1.4; letter-spacing: -.01em;
}
.quotes-count { margin: 14px 0 40px; font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
.quotes-count b { margin-right: 4px; font-family: var(--mincho); font-weight: 600; font-size: 22px; letter-spacing: 0; color: var(--ink); }
.quote-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 52px; }
.quote-likes strong { font-weight: 400; }
.quote-author { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sep); }
.quote-author:hover { color: var(--coral-text); text-decoration-color: var(--coral); }
/* 利用シーンのラベル：こちらが付けた分類。リンクではないので、スレートブルーの地に白文字 */
.quote-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; }
.tag { display: inline-block; padding: 3px 9px 4px; background: var(--slate); color: #FFFFFF; font-size: 12px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; }
.quotes-note { margin: 40px 0 0; font-size: 12px; color: var(--ink-2); }
.description { margin-top: 64px; }
.description-title { margin-bottom: 16px; }
.description-text { margin: 0; font-size: 14px; line-height: 1.95; }

/* =====================================================================
   固定ページ（このサイトについて／運営者情報／プライバシーポリシー）
   ===================================================================== */
.page { padding: 36px 0 0; }
.page h1 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: 28px; line-height: 1.4; letter-spacing: -.02em; }
.page h2 { margin: 52px 0 0; font-family: var(--mincho); font-weight: 600; font-size: 21px; line-height: 1.45; letter-spacing: -.01em; }
.page p, .page ul { margin: 18px 0 0; font-size: 14.5px; line-height: 1.95; }
.page ul { padding: 0 0 0 1.2em; }
.page .lead { margin-top: 22px; font-size: 16px; }
.page a { color: var(--coral-text); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 4px; }
.page a:hover { text-decoration-color: var(--coral-text); }
.page .amazon-disclosure { font-weight: 700; }   /* Amazon の開示文言は小さくしない */
.page .page-more { margin-top: 48px; }
.page .page-more a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; text-decoration: none; }

/* =====================================================================
   フッター（全ページ。本文の列の末尾に、地の色のまま）
   ===================================================================== */
.site-footer { margin: 56px 0 0; padding: 40px 0 40px; font-size: 11.5px; line-height: 1.9; color: var(--ink-2); }
.site-footer p { margin: 0 0 6px; }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--underline); }
.site-footer a:hover { color: var(--coral-text); text-decoration-color: var(--coral); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0 0 16px; font-size: 13px; color: var(--ink); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* =====================================================================
   PC（768px 以上）
   ===================================================================== */
@media (min-width: 768px) {

  /* ヘッダーは作品ページだけ（トップ・利用シーン・固定ページは左カラムにロゴがある） */
  .site-header { display: none; }
  .page-work .site-header {
    display: flex; position: static; height: auto;
    max-width: 1280px; margin: 0 auto; padding: 40px 80px 0;
  }
  .page-work .site-header .site-name img { width: 196px; }
  .site-menu { display: none; }
  .page-work .site-header-link { display: inline; font-size: 13px; letter-spacing: .06em; color: var(--ink-2); }
  .page-work .site-header-link:hover { color: var(--coral-text); }

  /* 左カラム（ナビゲーションだけ）＋右カラム */
  .site-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
  .site-rail {
    display: flex; flex-direction: column;
    position: sticky; top: 0; align-self: start; height: 100vh;
    padding: 40px 32px 32px; background: var(--rail);
  }
  .site-rail .site-name img { display: block; width: 100%; height: auto; }
  .site-rail-label { margin: 64px 0 10px; font-size: 11.5px; letter-spacing: .18em; color: var(--slate); }
  .site-rail .scene-nav a { min-height: 36px; padding: 4px 0; font-size: 14px; line-height: 1.5; }
  .site-main { padding: 0 0 0 112px; }
  .site-main > * { max-width: 680px; }

  /* トップ */
  .intro { padding: 104px 0 120px; }
  .intro-title { font-size: 54px; line-height: 1.35; }
  .intro p { margin-top: 28px; font-size: 15px; line-height: 2; }
  .situation { padding-bottom: 152px; }
  .situation-head { top: 0; margin: 0 -88px 40px -112px; padding: 28px 88px 24px 112px; gap: 24px; }
  .situation-title { font-size: 30px; }
  .situation-more { gap: 8px; }

  /* カード */
  .cards { gap: 80px; }
  .card { grid-template-columns: 136px minmax(0, 1fr); column-gap: 24px; }
  .card-cover { margin-top: 26px; }
  .card-cover img { max-width: 136px; max-height: 128px; }
  .card-title { margin-top: 26px; font-size: 17px; }
  .card-book-author { font-size: 13.5px; }
  .card-more { margin-top: 10px; }
  .button-more { font-size: 14.5px; }

  /* ひとこと：引用符はブロックの外側の左上・右下に掛ける */
  .card-quote, .quote blockquote { width: fit-content; max-width: 100%; padding: 0; }
  .len-s { font-size: 30px; line-height: 1.7; }
  .len-m { font-size: 23px; line-height: 1.9; }
  .len-l { font-size: 19px; line-height: 2; }
  .card-quote::before, .quote blockquote::before,
  .card-quote::after,  .quote blockquote::after { font-size: 108px; }
  .card-quote::before, .quote blockquote::before { top: -18px; left: auto; right: 100%; margin-right: 12px; }
  .card-quote::after,  .quote blockquote::after  { bottom: -56px; right: auto; left: 100%; margin-left: 12px; }
  .card-meta, .quote-meta { margin-top: 14px; font-size: 12.5px; }

  /* 利用シーンページ・一覧 */
  .scene-head { padding: 104px 0 0; }
  .scene-title { font-size: 44px; }
  .scene-description { margin-top: 28px; font-size: 15px; line-height: 2; }
  .scene-count { margin: 48px 0 88px; }
  .scene-list { margin-top: 88px; gap: 64px; }
  .scene-item-title { font-size: 26px; }
  .scene-item-description { font-size: 15px; line-height: 2; }

  /* 固定ページ */
  .page { padding-top: 104px; }
  .page h1 { font-size: 44px; }
  .page h2 { margin-top: 72px; font-size: 26px; }
  .page p, .page ul { font-size: 15px; line-height: 2; }
  .page .lead { margin-top: 32px; font-size: 17px; line-height: 2; }
  .page .page-more { margin-top: 64px; }

  /* 作品ページ：左に本と購入（画面に残る）、右にひとこと・作品紹介・フッター */
  .page-work .site-layout { display: block; min-height: 0; }
  .page-work .site-main {
    display: grid; grid-template-columns: 400px 600px; column-gap: 96px; align-items: start;
    max-width: 1280px; margin: 0 auto; padding: 0 80px;
  }
  .page-work .site-main > * { max-width: none; }
  .work { display: contents; }
  .work-side { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 48px; padding-top: 80px; }
  .work-body { grid-column: 2; margin-top: 0; padding-top: 80px; }
  .page-work .site-footer { grid-column: 2; margin-top: 96px; }
  .bookinfo-cover img { max-height: none; }
  .bookinfo-title { margin-top: 32px; font-size: 34px; }
  .bookinfo-author { margin-top: 14px; font-size: 14px; }
  .purchase-top { margin-top: 40px; }
  .purchase .button { height: 54px; }
  .purchase-bottom { display: none; }   /* PC は左の購入が画面に残るので不要 */
  .quotes-title, .description-title { font-size: 26px; }
  .quotes-count { margin: 20px 0 72px; }
  .quote-list { gap: 72px; }
  .quote-tags { margin-top: 16px; }
  .description { margin-top: 104px; }
  .description-title { margin-bottom: 20px; }
  .description-text { font-size: 14.5px; line-height: 2; }

  /* フッター */
  .site-footer { margin-top: 40px; padding: 40px 0 56px; font-size: 12px; }
  .site-nav { gap: 4px 24px; }
  .site-nav a { min-height: 0; }
}