/* 色は「紙」と「墨」の階調だけで組む。生の色を散らさない。
   ここに無い色を CSS のどこかに書いたら、それは設計から外れている。

   考え方（和書の造本に寄せる）
     紙  paper       … 地。白ではなく生成り。長時間読んでも刺さらない
         raised      … 一段持ち上げた面（札・カード）。紙を重ねた感じ
         sunken      … 沈めた面（引用・囲み・表の自社列）。刷り込んだ感じ
     罫  rule        … 細い仕切り。紙より少し濃いだけ
         rule-strong … 見出しの下や表の頭。ここだけ見える濃さ
     墨  ink         … 本文。純黒にしない（紙に刷った墨は黒より温かい）
         ink-2       … 副文
         ink-3       … 注記。**これでも地に対して 4.5:1 を切らない**
     差色 accent     … 栞と印の色。アプリの色に合わせた茶
         on-accent   … その上に乗る字

   夜は「黒い画面」ではなく**灯りの下の紙**にする。色相を保ったまま反転させ、
   同じ役割には同じ名前を当てる（後付けで個別に上書きしない）。 */
:root{
  color-scheme:light dark;

  --paper:#F7F3EA;
  --raised:#FFFDF9;
  --sunken:#EDE6D8;
  --rule:#DCD2C0;
  --rule-strong:#B9AB93;

  --ink:#1C1917;      /* 紙に 15.6:1 */
  --ink-2:#4E4842;    /* 紙に  8.1:1 */
  --ink-3:#6A635A;    /* 紙に  5.3:1 — 注記でも基準を割らない */

  --accent:#6B4F2A;      /* 紙に 6.9:1 */
  --accent-strong:#523B1E;
  --on-accent:#FFFDF9;

  --serif:'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho',
          'Noto Serif JP','Noto Serif CJK JP',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN',
         'Noto Sans JP',sans-serif;

  --shadow-1:0 1px 2px rgb(28 25 23 / 5%);
  --shadow-2:0 10px 30px rgb(28 25 23 / 8%);
  --shadow-3:0 20px 48px rgb(28 25 23 / 12%);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#15120E;
    --raised:#1F1B15;
    --sunken:#272119;
    --rule:#3A332A;
    --rule-strong:#5C5344;

    --ink:#ECE5D8;      /* 紙に 14.3:1 */
    --ink-2:#C2B9A8;    /* 紙に  9.4:1 */
    --ink-3:#9C9386;    /* 紙に  6.0:1 */

    --accent:#DDBB86;      /* 暗い紙に 9.6:1。差色は明るい側へ回す */
    --accent-strong:#EDD0A4;
    --on-accent:#15120E;

    --shadow-1:0 1px 2px rgb(0 0 0 / 40%);
    --shadow-2:0 10px 30px rgb(0 0 0 / 45%);
    --shadow-3:0 20px 48px rgb(0 0 0 / 50%);
  }
}

/* 名著伴読 meicho.app の商品面。法的ページ用の style.css とは別にする。
   ・ページ幅と本文幅を分ける。本文は 28〜32 字、原文は 36〜42 字
   ・明朝は見出しと原文、角ゴは説明と操作
   ・日本語は大きい文字ほどベタ寄り、小さい文字ほどアキを足す
   ・画面の写しは横スクロールにしない（端で切れてキャプションまで欠ける）
   ・リンクの色は必ず宣言する。宣言が無いと既定の青が 90 本並ぶ */
/* 色の token は pipeline/tokens.css。配るときに先頭へ焼き込む（build_site.py） */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{max-width:none;margin:0;padding:0;background:var(--paper);color:var(--ink);
     font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
     font-weight:400;line-height:1.9;letter-spacing:.02em}
.container{width:min(960px,calc(100% - 80px));margin-inline:auto}
/* 区切り線は本文の幅に合わせる。全幅だと中身の左寄りを強調してしまう */
.section{padding-block:0 96px}
.section + .section > .container{border-top:1px solid var(--rule);padding-top:96px}
.prose{max-width:32em;font-size:17px;line-height:1.95}
.prose p{margin:0}
.prose p + p{margin-top:1.25em}

a{color:var(--accent)}
.prose a,.note a,ul.authors a,.titles a{text-decoration-thickness:1px;text-underline-offset:.28em;
  text-decoration-color:color-mix(in srgb,var(--accent) 65%,transparent)}
.prose a:hover,.note a:hover,ul.authors a:hover,.titles a:hover{text-decoration-color:var(--accent)}

/* 見出し。1 字だけ落ちるのを文節で折って防ぐ */
h1,h2,h3,.hero,.section-title,.example-question,.people .dm,.shots figcaption{
  word-break:auto-phrase;text-wrap:balance}
p,li,figcaption,.lead,.note{text-wrap:pretty}
.brand{font-size:17px;font-weight:700;letter-spacing:.08em;margin:0;padding-block:28px 0}
.hero{font-family:'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho','Noto Serif JP','Noto Serif CJK JP',serif;font-size:clamp(28px,7.4vw,44px);font-weight:600;
      line-height:1.36;letter-spacing:.005em;margin:0}
.hero-line{display:inline}
.section-title{font-family:'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho','Noto Serif JP','Noto Serif CJK JP',serif;font-size:clamp(21px,5.6vw,30px);font-weight:600;
               line-height:1.55;letter-spacing:.005em;margin:0 0 28px}
h3{font-size:18px;font-weight:700;margin:0 0 6px;letter-spacing:.02em}

/* 冒頭 */
.lead{max-width:32em;font-size:17px;line-height:1.95;margin:26px 0 30px}
.hero-layout{padding-block:40px 88px}
/* 画面の写しは縦長（600x1304）で、左の文より 230px 背が高い。
   下を切って「続きがある」形にすると、空きが消えて写しも大きく置ける */
.hero-screen{margin:0;justify-self:center;width:280px;border-radius:20px;overflow:hidden;
             border:1px solid var(--rule);box-shadow:0 20px 48px rgb(31 27 23 / 12%);
             /* mask の黒は色でなく不透明度。token にしない */
             -webkit-mask-image:linear-gradient(#000 78%,rgb(0 0 0 / 0) 100%);
             mask-image:linear-gradient(#000 78%,rgb(0 0 0 / 0) 100%)}
.hero-screen img{display:block;width:100%;height:auto}

/* 操作 */
.cta{display:inline-block;background:var(--accent);color:var(--on-accent);padding:15px 30px;border-radius:6px;
     text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.04em}
.cta:hover{background:var(--accent-strong);color:var(--on-accent)}
.note{color:var(--ink-3);font-size:14px;line-height:1.85;letter-spacing:.03em;max-width:28em}
.text-link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;
           text-underline-offset:5px;line-height:1.8;
           display:inline-block;padding-block:11px;margin-block:-11px}

/* 実例。問いが主役なので、直後の明朝の引用に格負けさせない */
.example-question{font-family:'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho','Noto Serif JP','Noto Serif CJK JP',serif;font-size:clamp(19px,4.9vw,23px);
  font-weight:600;line-height:1.7;letter-spacing:.015em;max-width:32em;
  border-left:3px solid var(--accent);padding-left:18px;margin:26px 0}
.quote-group{max-width:40em;padding:32px;background:var(--sunken);border:1px solid var(--rule);
             border-radius:4px}
/* 原文の改行は原文の一部。潰すと逐語照合を通った引用が版面で別物になる */
blockquote.q{font-family:'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho','Noto Serif JP','Noto Serif CJK JP',serif;margin:0;padding:0;border:0;background:none;
             font-size:18px;line-height:2;white-space:pre-line}
blockquote.q + blockquote.q{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
/* 引用の出どころ。書かないと別作品の文がこの作品の根拠に見える */
blockquote.q cite{display:block;margin-top:8px;font-style:normal;font-family:var(--sans);
                  font-size:13px;color:var(--ink-3);letter-spacing:.02em}

/* 画面の写し。上 40px の OS バーと下 30px を切って中身だけ見せる */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:40px;margin:36px 0 0}
.shots figure{width:auto;min-width:0;margin:0}
.shots img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:16px}
.shots figcaption{margin-top:12px;font-size:14px;line-height:1.8;color:var(--ink-3)}

/* 料金。タグを通常フローに置くと中央カードだけ下がって価格が揃わない */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 16px}
.plan{position:relative;border:1px solid var(--rule);border-radius:10px;padding:46px 24px 24px;
      background:var(--raised)}
.plan.main{border-color:var(--accent);
           box-shadow:0 0 0 1px var(--accent) inset,0 10px 30px rgb(31 27 23 / 8%)}
.plan .price{font-size:30px;font-weight:700;line-height:1.3;margin:2px 0 10px}
.plan .per{font-size:15px;font-weight:400;color:var(--ink-3)}
/* 補足を価格と同じ行に置くと折り返して、3枚の箇条書きの高さが揃わない */
.plan .sub{display:block;font-size:13px;color:var(--ink-3);margin:-6px 0 12px;line-height:1.7}
.plan ul{margin:0;padding-left:1.15em}
.plan li{margin:.45em 0;font-size:15px;line-height:1.8}
.tag{position:absolute;top:16px;left:24px;margin:0;display:inline-block;background:var(--accent);
     color:var(--on-accent);font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px;
     letter-spacing:.04em}

/* 悩みの札 */
ul.concerns{list-style:none;padding:0;margin:0;display:grid;
            grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
ul.concerns a{display:block;border:1px solid var(--rule);border-radius:8px;padding:16px 18px;
              background:var(--raised);text-decoration:none;color:inherit}
ul.concerns a:hover{border-color:var(--accent);background:var(--raised)}
ul.concerns b{display:block;font-size:16px}
ul.concerns span{display:block;font-size:13px;color:var(--ink-3);margin-top:4px}

/* 著者。元がモノクロ写真なので saturate は効かない。セピアで 14 枚を 1 組にする */
.people{list-style:none;padding:0;margin:0;display:grid;
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 20px}
.people li{text-align:center}
.people img,.people .no-photo{width:96px;height:96px;border-radius:50%;display:block;
  margin:0 auto 10px;border:0;background:var(--sunken);
  box-shadow:0 0 0 1px var(--rule),0 2px 8px rgb(31 27 23 / 8%)}
.people img{object-fit:cover;filter:sepia(.32) contrast(1.06) brightness(1.03)}
.people .no-photo{color:var(--ink-3);display:flex;align-items:center;justify-content:center;
                  font-family:'Hiragino Mincho ProN','Hiragino Mincho Pro','Yu Mincho','YuMincho','Noto Serif JP','Noto Serif CJK JP',serif;font-size:30px}
.people .nm{display:block;font-size:15px;font-weight:700}
.people .dm{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.7}
.people a{text-decoration:none;color:inherit}
.people a:hover .nm{text-decoration:underline;text-underline-offset:.28em}

/* 収録作品。中黒でつなぐと題名が途中で割れ、塞ぐと今度は中黒が行頭に落ちる。
   区切り文字をやめて題名を箱にすれば両方いっぺんに消える */
ul.authors{list-style:none;margin:0;padding:0}
ul.authors li{margin:0;padding:14px 0;border-bottom:1px solid var(--rule);line-height:1.9}
.titles{display:flex;flex-wrap:wrap;gap:.25em 1.1em;margin-top:.35em}
.titles a,.foot a,ul.authors li > b > a,.people a,.qa-list a,ul.booklist a,.brand a,
.who-row b a,.qa .q-title a,nav.note a,.theme-person a{
  display:inline-block;padding-block:11px;margin-block:-11px}
.people a{padding-block:0;margin-block:0}

.foot{border-top:1px solid var(--rule);padding-block:40px 56px;font-size:14px;color:var(--ink-3)}
.foot a{color:var(--accent);text-underline-offset:4px}
.foot ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px 22px}
.foot ul li{margin:0}

/* 和欧・約物のアキは UI 面だけ。原文には掛けない（青空文庫の本文は既に空白が入っている） */
.container,.foot{text-spacing-trim:trim-start;text-autospace:normal}
.orig,.quote-group{text-autospace:no-autospace}

@media(min-width:768px){
  .hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
  .hero-screen{width:320px;margin-top:4px;max-height:560px}
}
@media(max-width:767px){
  .container{width:calc(100% - 40px)}
  .section{padding-block:0 56px}
  .section + .section > .container{padding-top:56px}
  .hero-layout{padding-block:28px 48px}
  .hero-screen{width:250px;margin-inline:auto;max-height:420px}
  .prose,.lead{font-size:16px;line-height:1.9}
  .quote-group{padding:22px 18px}
  blockquote.q{font-size:17px}
  .shots{grid-template-columns:minmax(0,1fr);gap:28px}
  .shots figure{width:min(280px,100%);margin-inline:auto}
  .plans{grid-template-columns:minmax(0,1fr)}
  .people{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:22px 12px}
  .people img,.people .no-photo{width:76px;height:76px}
  .people .no-photo{font-size:26px}
  .example-question{padding-left:14px}
}

/* キーボードで辿る人にも、マウスと同じ手がかりを出す */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
ul.concerns a:focus-visible,.people a:focus-visible{border-color:var(--accent);outline-offset:2px}

/* 夜。読書の面が白一色で出ると眩しい。比は明るい側と同じだけ確保する */

/* 紙。背景のグラフィックは既定で切られるので、白地に白文字のボタンになる */
@media print{
  .cta{background:none!important;color:var(--ink)!important;border:1px solid var(--ink)}
  .cta[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;font-weight:400}
  .shots,.hero-screen{display:none}
}

/* ───────── 訴求の面（2026-09-26 追加）─────────
   「良いアプリだ」は伝わっていたが、**無料で青空文庫が読めるのに、なぜこれに金を払うのか**
   を一度も名指ししていなかった。仕組み・照合・比較の3つを、値段より前に置く。 */

.ic{display:block;color:var(--accent);flex:none}

/* 仕組みの4段。商品そのものなので、文より先に絵で通す */
.steps{list-style:none;padding:0;margin:36px 0 0;display:grid;
       grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{position:relative;background:var(--raised);border:1px solid var(--rule);border-radius:10px;
          padding:22px 18px 20px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:14px;right:16px;
  font-family:var(--serif);font-size:20px;color:var(--rule-strong);line-height:1}
.steps .ic{margin-bottom:12px}
.steps b{display:block;font-size:16px;line-height:1.6;margin-bottom:6px}
.steps span{display:block;font-size:13.5px;line-height:1.85;color:var(--ink-3)}
.steps li + li::after{content:"";position:absolute;left:-13px;top:50%;width:8px;height:8px;
  border-top:1.5px solid var(--rule-strong);border-right:1.5px solid var(--rule-strong);transform:translateY(-50%) rotate(45deg)}

/* 照合。この商品が唯一持っていて、他が真似しにくい主張 */
.verify{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
/* `.verify div` は中の div にも当たって、見出しと本文が横に並んでしまう */
.verify > div{border:1px solid var(--rule);border-radius:10px;padding:22px 20px;background:var(--raised);
              display:flex;gap:14px;align-items:flex-start}
.verify > div > div{min-width:0}
.verify > div.ok{background:var(--sunken);border-color:var(--rule-strong)}
/* `.verify b` は本文中の <b> にも当たり、強調が改行を作っていた。見出しだけに当てる */
.verify .lb{display:block;font-size:15.5px;font-weight:700;margin-bottom:5px}
.verify p{margin:0;font-size:14px;line-height:1.9;color:var(--ink-2)}
.verify .no .ic{color:var(--ink-3)}

/* 比べる。軸は「読むまで」と「分からなかったあと」 */
.compare{width:100%;border-collapse:collapse;margin-top:26px;font-size:14.5px}
.compare th,.compare td{border-bottom:1px solid var(--rule);padding:14px 12px;text-align:left;
                        vertical-align:top;line-height:1.8}
.compare thead th{font-size:13.5px;color:var(--ink-3);letter-spacing:.02em;padding-bottom:10px;
                  border-bottom:1.5px solid var(--rule-strong)}
.compare tbody th{font-weight:400;color:var(--ink-3);width:26%}
.compare .me{background:var(--sunken)}
.compare thead .me{background:var(--sunken);border-radius:6px 6px 0 0;color:var(--ink);font-weight:700}
.compare .me b{font-weight:700}
.compare .dash{color:var(--ink-3)}

/* 向いていない人を名指しする。残った人の確信が上がる */
.not-for{border:1px dashed var(--rule-strong);border-radius:10px;padding:24px 26px;margin-top:30px;
         background:var(--raised)}
.not-for ul{margin:12px 0 0;padding-left:1.2em}
.not-for li{font-size:15px;line-height:1.95;margin:.3em 0}

/* よくある質問。別ページに飛ばすと戻ってこない */
.faq{margin-top:26px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:18px 34px 18px 0;font-size:16px;font-weight:700;
             line-height:1.7;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .a{padding:0 0 20px;font-size:15px;line-height:2;color:var(--ink-2);max-width:36em}

/* 悩みの札にしるしを足す */
ul.concerns a{display:flex;gap:13px;align-items:flex-start;height:100%}
ul.concerns .tx{min-width:0}

/* 画面の内側だけ見せる。上下の OS バーは商品ではない */
.shots img,.hero-screen img{object-fit:cover}

/* 下端の追従。全長 1 万 px のうち押せる場所が上下 2 か所しか無かった */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;
        /* 半透明でも地は token から引く。直書きすると暗色で白帯になる */
        background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(8px);
        border-top:1px solid var(--rule);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
        align-items:center;gap:12px}
.sticky .cta{padding:13px 20px;font-size:15px;flex:1;text-align:center}
.sticky span{font-size:12px;line-height:1.5;color:var(--ink-3);flex:none;
             max-width:7em;text-wrap:balance}
@media(max-width:767px){
  .sticky{display:flex}
  body{padding-bottom:76px}
  .steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .steps li + li::after{left:50%;top:-11px;transform:translateX(-50%) rotate(135deg)}
  .verify{grid-template-columns:minmax(0,1fr)}
  /* 4列を390pxに詰めると1セル4字になる。行ごとの塊へ組み替える */
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare thead{display:none}
  .compare tr{border:1px solid var(--rule);border-radius:10px;background:var(--raised);
              padding:4px 16px 12px;margin-bottom:12px}
  .compare tbody th{border:0;padding:14px 0 8px;font-size:15px;font-weight:700;color:var(--ink);
                    word-break:auto-phrase;text-wrap:balance}
  /* grid にすると値の中の <b> が別の升に入って改行する。見出しだけ絶対配置にする */
  .compare td{border:0;border-top:1px solid var(--rule);font-size:14.5px;
              position:relative;padding:9px 0 0 9.4em;min-height:2.2em}
  .compare td::before{content:attr(data-h);position:absolute;left:0;top:9px;width:8.7em;
                      font-size:12.5px;color:var(--ink-3);line-height:1.75}
  .compare td.me{background:none;margin-top:4px;padding-top:11px;border-top:1.5px solid var(--rule-strong)}
  .compare td.me::before{color:var(--accent);font-weight:700;top:11px}
  .not-for{padding:20px 18px}
}
@media print{.sticky{display:none}}

/* 横長の画面の写し（iPad）。縦長の .shots とは組みが違う */
.wide-shot{margin:32px 0 0}
.wide-shot img{display:block;width:100%;max-width:820px;height:auto;border:1px solid var(--rule);
               border-radius:12px;box-shadow:var(--shadow-2)}
.wide-shot figcaption{margin-top:12px;font-size:14px;line-height:1.8;color:var(--ink-3);
                      max-width:32em}
@media print{.wide-shot{display:none}}

/* 主題ページ。著者ごとに束ね、その中に問いと引用を置く */
.theme-person{padding-block:34px;border-top:1px solid var(--rule)}
.theme-person:first-child{border-top:0;padding-top:8px}
.who-row{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.who-row img,.who-row .no-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  margin:0;background:var(--sunken);box-shadow:0 0 0 1px var(--rule)}
.who-row .no-photo{display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;color:var(--ink-3)}
.who-row b{font-size:17px;display:block}
.who-row b a{color:inherit;text-decoration:none}
.who-row b a:hover{text-decoration:underline;text-underline-offset:.28em}
.who-row .dm{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px;line-height:1.7}
.qa{margin:0 0 26px;padding-left:18px;border-left:2px solid var(--rule)}
.qa .q-title{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.7;margin:0 0 12px}
.qa .q-title a{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.qa blockquote.q{font-size:16px}
@media(max-width:767px){
  .who-row img,.who-row .no-photo{width:52px;height:52px}
  .qa{padding-left:13px}
  .qa .q-title{font-size:16.5px}
}