/* Suu Web。アプリのデザイントークン（theme/tokens.ts）を引き継ぐ：白い地、細い罫線、ブルーは操作だけ。
   ZINEが主役。写真と作品を大きく、UIの主張は弱く、余白を活かす。数字（好きの数・閲覧数・順位）は出さない。
   幅：スマホ（〜599）は1列、タブレット（600〜899）は2〜3列、PC（900〜）は棚4列・ZINEは左右2段組み。 */
:root {
  --paper: #FFFFFF; --ink: #1C1C1E; --ink-muted: #6C6C70; --rule: #E5E5EA; --rule-strong: #DDDEE3; --canvas: #FAFAFB;
  --accent: #194EF5; --accent-soft: #F0ECFC; --lavender: #CAB6F5;
  --status-soon: #5B3A5B; --status-open: #2E4A62;
  --radius: 10px; --radius-lg: 16px;
  --shadow-card: 0 6px 20px rgba(24, 26, 32, .06), 0 1px 2px rgba(24, 26, 32, .025);
  --shadow-book: 0 18px 40px rgba(24, 26, 32, .16), 0 2px 6px rgba(24, 26, 32, .08);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --wrap: 1120px; --gutter: 16px; --head-h: 56px;
  /* 文字の段。幅に応じて滑らかに変わる（スマホの値〜PCの値） */
  --fs-display: clamp(30px, 2.6vw + 20px, 44px);
  --fs-h1: clamp(26px, 1.4vw + 20px, 34px);
  --fs-h2: clamp(20px, .6vw + 17px, 24px);
  --fs-lede: clamp(15px, .3vw + 14px, 17px);
  color-scheme: light;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 32px; --head-h: 64px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
main.wrap { padding-bottom: 64px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.sep { margin: 0 .5em; color: var(--ink-muted); }
.eyebrow { display: block; margin: 0; font-size: 12px; line-height: 16px; color: var(--accent); letter-spacing: .02em; }
.eyebrow a { text-decoration: none; }
.lede { margin: 0; max-width: 640px; font-size: var(--fs-lede); line-height: 1.75; color: var(--ink-muted); }
.empty, .note { color: var(--ink-muted); font-size: 14px; }

/* 枠 */
.site-head { border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, .92); position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(160%) blur(12px); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 88px; height: auto; display: block; }
.site-nav { display: flex; gap: 8px; font-size: 14px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
/* 背景だけを動かし、文字の位置とリンクの幅は保つ。 */
.site-nav a, .foot-nav a { position: relative; isolation: isolate; padding: 8px 3px; border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: color .2s ease; }
.site-nav a::before, .foot-nav a::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: rgba(25, 78, 245, .065); opacity: 0; transform: scale(.94); transition: opacity .2s ease, transform .24s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover, .foot-nav a:hover { color: var(--accent); }
  .site-nav a:hover::before, .foot-nav a:hover::before { opacity: 1; transform: scale(1); }
}
.site-nav a:focus-visible, .foot-nav a:focus-visible { color: var(--accent); outline-offset: -2px; }
.site-nav a:focus-visible::before, .foot-nav a:focus-visible::before,
.site-nav a:active::before, .foot-nav a:active::before { opacity: 1; transform: scale(1); }
@media (min-width: 600px) { .site-nav a, .foot-nav a { padding-inline: 10px; } }
@media (max-width: 400px) { .site-nav { gap: 6px; font-size: 13px; } .brand img { width: 76px; } }
/* 幅320の端末でも4項目が収まる大きさ。収まらなければ横に送れる（overflow-x） */
@media (max-width: 360px) { .site-nav { gap: 2px; font-size: 12px; } .brand img { width: 64px; } .site-head .wrap { gap: 12px; } }
@media (min-width: 900px) { .site-nav { gap: 8px; font-size: 15px; } }
.site-foot { border-top: 1px solid var(--rule); margin-top: 80px; padding: 32px 0 48px; font-size: 13px; color: var(--ink-muted); }
.foot-tag { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.foot-tag img { width: 64px; height: auto; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-nav a { color: var(--ink-muted); }
.foot-meta { margin: 16px 0 0; font-size: 12px; }
@media (min-width: 720px) { .site-foot .wrap { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: center; } .foot-tag { margin: 0; } .foot-meta { grid-column: 1 / -1; margin-top: 4px; } }

/* 見出しと操作 */
.hero { padding: 48px 0 24px; display: grid; gap: 32px; }
.hero h1 { font-size: var(--fs-display); line-height: 1.4; font-weight: 700; margin: 0 0 16px; letter-spacing: .01em; }
.hero-phrase { display: inline-block; }
.hero-text, .app-intro-copy { container-type: inline-size; }
.hero-actions, .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.hero-shelf { display: none; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px; padding: 72px 0 40px; }
  .hero-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; padding: 24px 8px 8px; }
  .hero-shelf .book { box-shadow: var(--shadow-book); }
  .hero-shelf .book:nth-child(1) { transform: translateY(20px) rotate(-3deg); }
  .hero-shelf .book:nth-child(3) { transform: translateY(20px) rotate(3deg); }
}
.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: var(--fs-h1); line-height: 1.4; font-weight: 700; margin: 4px 0 8px; }
/* 作者ページの写真（2026-10-03）。アプリの作者のプロフィールと同じく丸く切る。写真の無い作者には何も出さない（絵文字はWebに出さない） */
.author-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 0 12px; border: 1px solid var(--rule); }
.page-head .hero-actions { margin-top: 20px; }
@media (min-width: 900px) { .page-head { padding-top: 56px; } }
.button { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; line-height: 21px; text-decoration: none; }
.button.secondary { background: #fff; color: var(--accent); }
.button.quiet { background: transparent; border-color: transparent; color: var(--accent); }
.button.is-disabled { opacity: .42; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--rule-strong); background: #fff; color: var(--ink); font: inherit; font-size: 13px; line-height: 1; text-decoration: none; cursor: pointer; }
.chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.block { margin-top: 48px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 20px; }
.block h2, .cta h2 { font-size: var(--fs-h2); line-height: 1.4; font-weight: 700; margin: 0; }
.block-lede { margin: -8px 0 20px; font-size: 14px; color: var(--ink-muted); }
.more { font-size: 14px; white-space: nowrap; text-decoration: none; }
.pager { display: flex; justify-content: space-between; align-items: center; margin: 40px 0; font-size: 14px; }
.pager-now { color: var(--ink-muted); }
@media (min-width: 900px) { .block { margin-top: 64px; } }

/* 棚（アプリの ZineShelf と同じ段：表紙 3:4、題、作者 · タグ、右端にページ数） */
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 28px; } }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover .book { transform: translateY(-2px); }
.card-title { display: block; font-size: 16px; line-height: 24px; margin-top: 10px; }
.card-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 2px; font-size: 11px; line-height: 16px; color: var(--ink-muted); }
.card-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-aside { flex-shrink: 0; font-size: 10px; }
.book { display: block; position: relative; aspect-ratio: 3 / 4; border-radius: 6px 2px 2px 6px; overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-card); transition: transform .16s ease; }
.book img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* アプリのBookObjectと同じ右開き。背の光と影は右端に置き、表紙画像自体は反転しない。 */
.book::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgba(0, 0, 0, .12) 0, rgba(255, 255, 255, .16) 2.5%, rgba(0, 0, 0, .05) 6%, transparent 11%); }
.book-lg { width: min(100%, 300px); margin: 0 auto; box-shadow: var(--shadow-book); }

/* ZINE：狭い画面は上から順（表紙→本文）、広い画面は左に表紙と情報を固定し、右に本文 */
.zine-head { text-align: center; padding-top: 32px; }
.zine-title { font-size: clamp(22px, 1vw + 18px, 28px); line-height: 1.4; font-weight: 700; margin: 28px 0 4px; }
.zine-by { margin: 0; font-size: 14px; }
.zine-by a { color: inherit; }
.zine-meta { margin: 6px 0 16px; font-size: 12px; color: var(--ink-muted); }
.share { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.share-note { width: 100%; min-height: 16px; font-size: 12px; color: var(--ink-muted); text-align: center; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 24px; margin: 40px auto 0; }
/* 紙面は1枚が画面に収まり、次の1枚が少し見える高さ（ユーザー指示、2026-09-27）。
   高さ = 画面の高さ − ヘッダー − 次の紙面の見える分。幅はその 9:16。狭い画面では幅のほうが先に上限になる。 */
.page { --page-max-width: 400px; --page-peek: 96px; margin: 0; container-type: inline-size; aspect-ratio: 9 / 16; width: auto; max-width: 100%;
  height: max(360px, min(calc(100vh - var(--head-h) - var(--page-peek)), calc(min(100vw - 2 * var(--gutter), var(--page-max-width)) * 16 / 9)));
  height: max(360px, min(calc(100svh - var(--head-h) - var(--page-peek)), calc(min(100vw - 2 * var(--gutter), var(--page-max-width)) * 16 / 9)));
  background: var(--paper); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-card); }
.zine-foot { margin-top: 32px; }
@media (min-width: 900px) {
  .zine { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 56px; align-items: start; }
  /* 固定の起点はヘッダーの直下。余白は padding で取る（top に足すと、開いた直後から表紙が本文より下がる） */
  .zine-head { position: sticky; top: var(--head-h); padding-top: 40px; }
  .zine-body { padding-top: 40px; }
  .pages { margin-top: 0; gap: 32px; }
  .page { --page-max-width: 440px; }
}
.page-face { position: relative; display: flex; flex-direction: column; height: 100%; }
.page-face.is-photo-only { justify-content: center; }
/* 写真だけの紙面：高さは写真そのもの。幅は文章のある紙面と同じ（高さの9:16） */
.page.is-photo-page { height: auto; aspect-ratio: auto; width: calc(max(360px, min(calc(100svh - var(--head-h) - var(--page-peek)), calc(min(100vw - 2 * var(--gutter), var(--page-max-width)) * 16 / 9))) * 9 / 16); }
.page-photo.is-natural { height: auto; }
.page-photo { display: block; width: 100%; flex: none; background: var(--paper); }
.page-photo.is-cover { object-fit: cover; }
.page-photo.is-contain { object-fit: contain; }
.page-caption { margin: 0; flex: none; color: var(--ink-muted); text-align: left; }
/* 言葉は縦書き。アプリと同じ行送り（1.85）と字送り（1.42）。文字の大きさは紙面ごとにサーバーが決める */
.page-words { flex: 1; min-height: 0; position: relative; display: flex; justify-content: center; align-items: center; padding: 4.444cqw; overflow: hidden; }
.vertical { writing-mode: vertical-rl; text-orientation: mixed; margin: 0; max-height: 100%; line-height: 1.85; letter-spacing: .42em; white-space: pre-wrap; line-break: strict; hanging-punctuation: allow-end; color: var(--ink); font-feature-settings: "vert"; }
/* 紙（アプリの components/paper.tsx）。線の間隔は 22px（幅360のとき）。縦書きなので罫は縦 */
.paper-rule { background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(28, 26, 23, .10) calc(100% - 1px)); background-size: 6.111cqw 100%; }
.paper-wide { background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(28, 26, 23, .10) calc(100% - 1px)); background-size: 12.222cqw 100%; }
.paper-grid { background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(28, 26, 23, .08) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), rgba(28, 26, 23, .08) calc(100% - 1px)); background-size: 6.111cqw 100%, 100% 6.111cqw; }
.paper-manuscript { background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(150, 60, 50, .16) calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 60, 50, .16) calc(100% - 1px)); background-size: 6.111cqw 100%, 100% 6.111cqw; }
.paper-dots { background-image: radial-gradient(circle, rgba(28, 26, 23, .12) 1px, transparent 1.6px); background-size: 6.111cqw 6.111cqw; background-position: 3.055cqw 3.055cqw; }
.paper-washi { background: url(/paper/washi.png) repeat; background-size: 35.5cqw; }
.colophon-face { padding: 12cqw 8cqw; justify-content: center; align-items: center; text-align: center; gap: 4cqw; }
.colophon-title { margin: 0; font-size: 5cqw; line-height: 1.5; font-weight: 600; }
.colophon-list { margin: 0; display: grid; gap: 1.6cqw; font-size: 3.4cqw; line-height: 1.6; }
.colophon-list div { display: flex; justify-content: center; gap: 2cqw; flex-wrap: wrap; }
.colophon-list dt { color: var(--ink-muted); }
.colophon-list dd { margin: 0; }
.colophon-foot { margin: 6cqw 0 0; display: flex; align-items: center; gap: 2cqw; font-size: 3cqw; color: var(--ink-muted); }
.colophon-foot img { width: 14cqw; height: auto; }

/* 導線 */
.cta { margin-top: 56px; padding: 32px 24px; border-radius: var(--radius-lg); background: var(--canvas); border: 1px solid var(--rule); text-align: center; }
.cta p { margin: 8px auto 0; max-width: 560px; font-size: 15px; line-height: 26px; color: var(--ink-muted); }
.cta .cta-actions { justify-content: center; margin-top: 20px; }
.cta-note { font-size: 13px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; align-items: start; }
.steps li::before { counter-increment: step; content: counter(step); grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.steps strong { font-size: 16px; }
.steps span { color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.steps a { color: var(--accent); }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .steps li { grid-template-columns: 1fr; } .steps li::before { grid-row: auto; margin-bottom: 8px; } }
@media (min-width: 900px) { .cta { margin-top: 72px; padding: 48px 32px; } }

/* Stories・イベント */
.stories, .events { list-style: none; padding: 0; margin: 0; display: grid; gap: 32px 24px; }
@media (min-width: 600px) { .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); } .events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story-card a, .event-card a { display: block; color: inherit; text-decoration: none; }
.story-cover { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--canvas); }
.story-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-cover-blank { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent-soft), #fff); }
.story-text, .event-text { display: block; margin-top: 12px; }
.story-title { display: block; margin-top: 4px; font-size: 18px; line-height: 26px; font-weight: 600; }
.story-desc { display: block; margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.story-meta { display: block; margin: 6px 0 0; font-size: 12px; color: var(--ink-muted); }
.story { max-width: 680px; margin: 0 auto; }
.story-head h1 { font-size: var(--fs-h1); line-height: 1.4; margin: 8px 0 12px; }
.story-hero { margin: 24px 0 0; }
.story-hero img { width: 100%; height: auto; display: block; border-radius: 12px; }
.prose { margin-top: 32px; font-size: 16px; line-height: 1.95; }
.prose h2 { font-size: 22px; line-height: 32px; margin: 48px 0 12px; }
.prose h3 { font-size: 18px; line-height: 28px; margin: 32px 0 8px; }
.prose h4 { font-size: 16px; margin: 24px 0 8px; }
.prose p { margin: 0 0 1.4em; }
.prose img { height: auto; border-radius: 8px; }
.prose figure { margin: 24px 0; }
.prose figcaption { font-size: 13px; color: var(--ink-muted); margin-top: 6px; }
.prose blockquote { margin: 24px 0; padding: 0 0 0 16px; border-left: 3px solid var(--lavender); color: var(--ink-muted); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.prose li { margin: .3em 0; }
.prose code { background: var(--canvas); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
.prose pre { background: var(--canvas); padding: 16px; border-radius: 8px; overflow: auto; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
@media (min-width: 900px) { .prose { font-size: 17px; } }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.tag { font-size: 12px; color: var(--ink-muted); border: 1px solid var(--rule); border-radius: 10px; padding: 2px 10px; }
.zine-embed { display: flex; align-items: center; gap: 16px; margin: 32px 0; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.zine-embed .book { width: 96px; flex: none; }
.zine-embed-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zine-embed-text .card-meta { display: block; }
.zine-embed-more { margin-top: 6px; font-size: 14px; color: var(--accent); }
.authors { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.authors li { display: flex; flex-direction: column; }
.authors a { font-size: 16px; color: var(--ink); }
.event-card a { display: flex; gap: 16px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
/* イベントの絵。アプリのバナーと同じ3色（地の上・地の下・咲いているもの） */
.event-art, .event-banner { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--p1, #EAF1F8) 0 55%, var(--p2, #BACBD4) 55% 100%); }
.event-art { flex: none; width: 88px; aspect-ratio: 3 / 4; border-radius: 8px; }
.event-art::after, .event-banner::after { content: ""; position: absolute; left: 50%; top: 52%; width: 34%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--p3, #F9DCC3); }
.event-banner { height: 140px; border-radius: var(--radius-lg); margin-top: 24px; }
.event-banner::after { width: 64px; }
@media (min-width: 900px) { .event-banner { height: 200px; } .event-banner::after { width: 88px; } }
.event-text { margin-top: 0; min-width: 0; }
/* 狭いカードではラベルごと折り返し、受付バッジの枠と文字を分断しない。 */
.event-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.phase { display: inline-block; flex: none; white-space: nowrap; font-size: 12px; line-height: 16px; padding: 1px 8px; border-radius: 10px; border: 1px solid currentColor; }
.phase-open { color: var(--status-open); }
.phase-before { color: var(--status-soon); }
.phase-closed { color: var(--ink-muted); }
.event-facts { display: grid; gap: 8px; margin: 20px 0 0; font-size: 14px; }
.event-facts div { display: flex; gap: 12px; flex-wrap: wrap; }
.event-facts dt { color: var(--ink-muted); min-width: 5em; }
.event-facts dd { margin: 0; }
.event .prose { max-width: 680px; }

/* アプリの案内 */
.features { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 600px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.feature h2 { margin: 0 0 8px; font-size: 18px; line-height: 26px; }
.feature p { margin: 0; font-size: 15px; line-height: 26px; color: var(--ink-muted); }

/* ---- 2026-09-27 の修正：動き・アイコン・余白 ---------------------------------- */
/* 押せるものは、触れたら少し浮く。動きを減らす設定では止まる */
.button { transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(25, 78, 245, .22); }
.button.secondary:hover, .button.quiet:hover { background: var(--accent-soft); box-shadow: none; }
.button:active { transform: translateY(0); box-shadow: none; }
.chip { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.more { transition: color .16s ease; }
.more:hover { text-decoration: underline; }
.story-cover img, .event-art img { transition: transform .35s ease; }
.story-card a:hover .story-cover img, .event-card a:hover .event-art img { transform: scale(1.04); }
.story-card a:hover .story-title, .event-card a:hover .story-title { color: var(--accent); }
.story-title { transition: color .16s ease; }
.event-card a { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.event-card a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--rule-strong); }
.card-title { transition: color .16s ease; }
.card-link:hover .card-title { color: var(--accent); }
/* ナビのアイコン。狭い画面では文字だけ（4項目が収まらないため） */
.icon { width: 18px; height: 18px; flex: none; }
.site-nav a { display: inline-flex; align-items: center; gap: 6px; }
.site-nav .icon { display: none; }
@media (min-width: 600px) { .site-nav .icon { display: block; } }
.share .chip { gap: 6px; }
.share .icon { width: 16px; height: 16px; }
/* 記事の見出しは、ナビから少し離す */
.story-head { padding-top: 40px; }
@media (min-width: 900px) { .story-head { padding-top: 56px; } }
/* イベント：一覧は補足文から離し、詳細は記事と同じ幅 */
.page-head + .events { margin-top: 32px; }
.event { max-width: 680px; margin: 0 auto; }
.event-art img, .event-banner img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }
.event-art:has(img)::after, .event-banner:has(img)::after { content: none; }
/* アプリを入れるボタン：App Store は公式バッジ、ベータ版は同じ大きさの黒いボタン */
.store-badge { display: inline-flex; }
.store-badge img { display: block; height: 50px; width: auto; }
.badge-like { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 50px; padding: 0 16px 0 14px; border-radius: 9px; background: #000; color: #fff; text-decoration: none; line-height: 1.1; border: 1px solid #000; transition: transform .16s ease, box-shadow .16s ease; }
.badge-like:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.badge-like-small { font-size: 10px; letter-spacing: .02em; }
.badge-like-big { font-size: 17px; font-weight: 600; }
.badge-like.is-disabled { background: var(--ink-muted); border-color: var(--ink-muted); }
/* アプリのページの4つのポイント：絵を上に */
.feature-art { border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: #EFE9FB; }
.feature-art svg { display: block; width: 100%; height: auto; }
.hero-shelf .book { cursor: default; }

/* ---- 好きを届ける（本文の最後。アプリの最終ページと同じ位置づけ） ---------------- */
.heart { margin: 32px auto 0; max-width: 400px; padding: 28px 24px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: #fff; text-align: center; }
.heart-lede { margin: 0 0 16px; font-size: 14px; line-height: 24px; color: var(--ink-muted); }
.heart-button { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 25px; border: 1px solid var(--rule-strong); background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease, opacity .16s ease; }
.heart-button .icon { width: 20px; height: 20px; color: #E8607A; }
.heart-button:hover:not(:disabled) { border-color: #E8607A; transform: translateY(-1px); }
.heart-button:disabled { cursor: default; opacity: .55; }
.heart-button.is-liked { border-color: #E8607A; background: #FCEDF0; color: #B23A52; opacity: 1; }
.heart-button.is-liked .icon path { fill: #E8607A; }
.heart-button.is-liked .icon { animation: heart-pop .5s ease; }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .heart-button.is-liked .icon { animation: none; } }
.heart-note { margin: 12px 0 0; min-height: 20px; font-size: 13px; color: var(--ink-muted); }

/* ---- レコード（アプリの ZineRecord と同じ形：96px の盤、76px のラベル、左下に再生ボタン） ------------ */
.record-dock { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 4; display: flex; align-items: center; gap: 14px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
/* 読み込み直後は画面の右外。下へスクロールすると右へ消え、上へ戻すと出てくる（ユーザー指示、2026-09-27） */
.record-dock.is-hidden { transform: translateX(calc(100% + 28px)); opacity: 0; pointer-events: none; }
.record-text { display: none; flex-direction: column; align-items: flex-end; text-align: right; max-width: 220px; }
@media (min-width: 900px) { .record-text { display: flex; } }
.record-title { max-width: 220px; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-artist { max-width: 220px; font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-note { font-size: 11px; color: var(--ink-muted); }
.record-note a { color: var(--accent); }
.record { --d: 112px; position: relative; width: var(--d); height: var(--d); padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; filter: drop-shadow(-3px 7px 12px rgba(18, 24, 32, .18)); transition: transform .12s ease; }
.record:active { transform: scale(.96); }
@media (max-width: 899px) { .record { --d: 80px; } }
.vinyl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; border: 1px solid #4A4C50; background: linear-gradient(135deg, #36383B 0%, #141517 35%, #303236 70%, #17181A 100%); animation: spin 18s linear infinite; animation-play-state: paused; }
.record.is-playing .vinyl { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.groove { position: absolute; border-radius: 50%; border: .5px solid rgba(255, 255, 255, .14); }
.groove-a { width: 91.6%; height: 91.6%; }
.groove-b { width: 85.4%; height: 85.4%; }
.label { position: relative; width: 79%; height: 79%; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: #DCE2E5; color: #737E86; }
.label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.label .icon { width: 26px; height: 26px; }
.spindle { position: absolute; left: calc(50% - 3.5px); top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: #17191C; border: 1px solid rgba(255, 255, 255, .7); }
.transport { position: absolute; left: 2px; bottom: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #fff; border: 1px solid #DDE1E5; color: #242A30; }
.transport .icon { width: 15px; height: 15px; }
.transport .icon-pause, .record.is-playing .transport .icon-play { display: none; }
.record.is-playing .transport .icon-pause { display: block; }
@media (prefers-reduced-motion: reduce) { .record-dock { transition: none; } .vinyl { animation: none; } }

/* アプリ紹介：図解は具体的なページ・本・ブラウザをラベル付きで見せる。 */
.app-intro { display: grid; gap: 40px; padding: 56px 0 64px; align-items: center; }
.app-intro h1 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.5; margin: 12px 0 20px; letter-spacing: .025em; }
.app-intro-lede { font-size: 19px; line-height: 1.9; margin: 0 0 16px; }
.app-intro-description { color: var(--ink-muted); font-size: 15px; max-width: 29em; }
.app-start-link { display: inline-block; margin-top: 16px; font-size: 13px; }
.app-cover-gallery { margin: 0; min-width: 0; }
.app-cover-stage { display: flex; align-items: center; justify-content: center; padding: 44px 22px; background: #F4F1F8; border-radius: var(--radius); gap: 14px; }
.app-cover-stage img { width: 29%; height: auto; box-shadow: var(--shadow-card); border-radius: 5px 2px 2px 5px; }
.app-cover-stage img:first-child { transform: rotate(-8deg) translateY(10px); }
.app-cover-stage img:nth-child(2) { transform: translateY(-13px); }
.app-cover-stage img:last-child { transform: rotate(7deg) translateY(12px); }
.app-cover-gallery figcaption { margin-top: 20px; text-align: center; font-size: 13px; }
.app-cover-gallery figcaption span { display: block; color: var(--ink-muted); font-size: 11px; margin-top: 6px; }
.app-section-lead { max-width: 44em; color: var(--ink-muted); font-size: 15px; line-height: 1.9; margin: 12px 0 28px; }
.app-guide .features { margin-top: 28px; }
.app-guide .feature { padding: 0 0 24px; overflow: hidden; }
.app-guide .feature-art { border-radius: 0; margin: 0 0 22px; background: transparent; }
.app-guide .feature > h3, .app-guide .feature > p { margin-left: 24px; margin-right: 24px; }
.app-guide .feature h3 { font-size: 19px; line-height: 1.6; margin-top: 8px; margin-bottom: 10px; }
.app-guide .feature .app-feature-label { color: var(--accent); font-size: 12px; letter-spacing: .08em; }
.app-guide .feature .app-feature-note { margin-top: 12px; font-size: 12px; }
.app-diagram { height: 236px; display: grid; align-items: center; padding: 24px; color: var(--ink); }
.app-diagram-works { background: #F2F0F9; }
.app-diagram-zine { background: #F2F4F9; }
.app-diagram-send { background: #F0F5F3; }
.app-diagram-look { background: #F8F5EC; }
.diagram-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 360px; width: 100%; margin: auto; }
.diagram-formats > div { text-align: center; min-width: 0; }
.diagram-formats > div > span, .diagram-label { display: block; font-size: 12px; margin-top: 12px; text-align: center; line-height: 1.5; }
.diagram-page { background: white; height: 132px; border: 1px solid #DDDCE3; padding: 7px; border-radius: 3px; }
.diagram-photo { display: block; position: relative; width: 100%; height: 100%; background: #C5DCE9; overflow: hidden; }
.diagram-photo::before { content: ''; position: absolute; width: 110%; height: 37%; background: #D4D3CE; bottom: 0; left: -5%; transform: rotate(-8deg); }
.diagram-photo > span { position: absolute; width: 27%; height: 48%; background: #ED624A; clip-path: polygon(50% 0, 85% 85%, 100% 86%, 100% 100%, 0 100%, 0 86%, 15% 85%); bottom: 12%; left: 37%; }
.diagram-writing { display: grid; place-items: center; }
.diagram-writing > span { writing-mode: vertical-rl; font-size: 11px; line-height: 1.9; text-align: left; }
.diagram-combined .diagram-photo { height: 64%; }
.diagram-combined > span:last-child { display: block; font-size: 9px; text-align: center; margin-top: 10px; }
.diagram-flow { display: flex; align-items: center; justify-content: center; gap: 18px; }
.diagram-flow > div { text-align: center; }
.diagram-book { display: block; width: 86px; height: auto; margin: auto; border-radius: 4px 1px 1px 4px; box-shadow: -4px 4px 0 #DDDDE3; }
.diagram-arrow { font-size: 30px; font-weight: 400; margin-top: -20px; }
.diagram-stack { position: relative; width: 100px; height: 117px; margin: auto; }
.diagram-stack > span { position: absolute; left: 10px; top: 9px; width: 78px; height: 101px; background: white; border: 1px solid #DCDDE3; border-radius: 3px; transform: rotate(-12deg); }
.diagram-stack > span:nth-child(2) { transform: rotate(7deg); }
.diagram-stack > span:last-child { transform: rotate(0); padding: 7px; }
.diagram-phone { border: 1.5px solid var(--ink); background: white; padding: 17px 10px 13px; border-radius: 12px; position: relative; }
.diagram-phone::before { content: ''; position: absolute; width: 18px; height: 3px; background: #DBDDE0; left: calc(50% - 9px); top: 6px; border-radius: 2px; }
.diagram-phone .diagram-book { width: 52px; }
.diagram-browser { position: relative; background: white; border: 1.5px solid var(--ink); border-radius: 7px; width: 112px; padding: 26px 12px 10px; }
.diagram-browser-bar { position: absolute; top: 0; left: 0; right: 0; border-bottom: 1px solid #DCDDE3; line-height: 17px; text-align: left; padding-left: 7px; letter-spacing: 2px; color: #989CA0; }
.diagram-browser .diagram-book { width: 44px; }
.diagram-heart { display: block; color: #BA4D66; line-height: 1; margin-top: 8px; }
.diagram-heart .icon { width: 15px; height: 15px; margin-inline: auto; }
.diagram-link { display: grid; justify-items: center; gap: 4px; }
.diagram-link .icon { color: var(--accent); width: 20px; height: 20px; }
.diagram-link .diagram-arrow { margin: -8px 0; }
.diagram-link > span:last-child { font-size: 11px; white-space: nowrap; }
.diagram-log { display: grid; gap: 20px; width: 100%; max-width: 330px; margin: auto; }
.diagram-log .diagram-label { text-align: left; margin: 0 0 8px; }
.diagram-word-cloud { display: flex; gap: 7px; flex-wrap: wrap; }
.diagram-word-cloud span { background: white; padding: 3px 10px; border-radius: 4px; font-size: 13px; }
.diagram-colors { display: flex; height: 24px; border-radius: 4px; overflow: hidden; }
.diagram-colors i { flex: 4; background: #ACC7D6; }.diagram-colors i:nth-child(2) { flex: 3; background: #E1D8C3; }.diagram-colors i:nth-child(3) { flex: 2; background: #889D83; }.diagram-colors i:nth-child(4) { flex: 1; background: #D48670; }
.diagram-log p { margin: 8px 0 0; font-size: 11px; color: var(--ink-muted); }
.app-roles { display: grid; gap: 24px; padding: 28px; margin: 40px 0 0; border-block: 1px solid var(--rule); }
.app-roles > div { display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; align-items: center; }
.app-roles .icon { grid-row: 1 / 3; width: 25px; height: 25px; color: var(--accent); }
.app-roles h2 { font-size: 17px; margin: 0; }.app-roles p { margin: 0; color: var(--ink-muted); font-size: 13px; }
.app-start { padding-top: 20px; scroll-margin-top: calc(var(--head-h) + 20px); }
.app-start h2 { margin: 4px 0; font-size: var(--fs-h2); }
.app-start .steps { margin-top: 28px; }
.app-start .note { max-width: 58em; margin-top: 22px; }
.app-faq details { border-bottom: 1px solid var(--rule); padding: 20px 0; }
.app-faq summary { cursor: pointer; font-size: 15px; font-weight: 600; }
.app-faq details p { color: var(--ink-muted); font-size: 14px; max-width: 52em; margin: 12px 0 0; }
@media (min-width: 900px) { .app-intro { grid-template-columns: 1.05fr 1fr; gap: 56px; padding-block: 72px; }.app-roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .app-intro { padding: 32px 0 40px; gap: 32px; }.app-intro-lede { font-size: 17px; }.app-cover-stage { padding: 36px 22px; }.app-diagram { height: 218px; padding: 20px; }.diagram-flow { gap: 12px; }.app-guide .feature > h3, .app-guide .feature > p { margin-left: 20px; margin-right: 20px; }.app-roles { padding: 24px 8px; }.app-guide .hero-actions { gap: 10px; } }
@media (min-width: 600px) and (max-width: 759px) { .app-guide .features { grid-template-columns: 1fr; } }

@media (max-width: 359px) { .app-diagram { padding-inline: 16px; }.diagram-formats { gap: 10px; }.diagram-formats > div > span, .diagram-label { font-size: 11px; }.diagram-flow { gap: 8px; }.diagram-phone .diagram-book { width: 44px; }.diagram-browser { width: 96px; }.diagram-link > span:last-child { font-size: 10px; } }
.app-guide h2, .app-guide h3 { text-wrap: balance; }

/* CTAの絵柄は用途別、文字・操作のレイアウトは共通。作品の邪魔をしない紙の背景。 */
.cta:has(.cta-layout) { padding: 0; text-align: left; overflow: hidden; background: #fafaf9; }
.cta-layout { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); background: #fafaf9; }
.cta-copy { position: relative; z-index: 1; padding: 28px 24px; container-type: inline-size; }
.cta-art { height: 160px; overflow: hidden; mask-image: linear-gradient(to bottom, #000 75%, transparent); }
.cta-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; border-radius: 0; }
/* 記事本文の見出し・段落の余白をCTAへ持ち込まない。 */
.cta .cta-copy h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.4; }
.cta .cta-copy > p { margin: 10px 0 0; }
.cta-layout[data-art="article"] .cta-art img { object-position: 80% center; }
.cta .cta-copy > .cta-actions { margin-top: 20px; }
.cta .cta-copy > .cta-note { margin-top: 14px; }
.cta .cta-copy .cta-actions { justify-content: flex-start; }
/* FVとCTAは長いボタンの自然な幅に揃え、本文領域が狭いときは同じ幅で縦に並べる。 */
.cta-copy .cta-actions, .hero-text .hero-actions, .app-intro-copy .hero-actions { display: grid; grid-template-columns: 1fr; width: max-content; max-width: 100%; }
.cta-copy .cta-actions > *, .hero-text .hero-actions > *, .app-intro-copy .hero-actions > * { width: 100%; min-width: 0; }
@container (min-width: 400px) {
  .cta-copy .cta-actions:has(> :nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 440px) {
  .hero-text .hero-actions:has(> :nth-child(2)), .app-intro-copy .hero-actions:has(> :nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
}
.cta .cta-copy .cta-note { font-size: 12px; line-height: 1.8; }
.app-start > .cta-layout { border: 1px solid var(--rule); }
.app-start .cta-copy .eyebrow { margin: 0 0 8px; }
.app-start .cta-copy .app-section-lead { margin-bottom: 0; }
@media (min-width: 720px) {
  .cta-art { position: absolute; inset: 0 0 0 60%; height: auto; z-index: 0; mask-image: linear-gradient(to right, transparent, #000 18%); }
  .cta-copy { width: 60%; min-height: 280px; padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; }
  .cta-art img { object-fit: cover; }
  .app-start .cta-copy { min-height: 250px; }
}
/* 記事とイベント詳細は680px幅。ここでも絵と文章を左右に置き、導線を長くしすぎない。 */
@media (min-width: 900px) {
  .cta-copy { padding: 40px 36px; }
  .story .cta-copy { width: 65%; padding: 28px; }
  .story .cta-art { left: 65%; }
}

/* 合同ZINE（2026-10-03）。印は小さく、題より目立たせない。人数や作品数は出さない */
.joint-mark { margin: 0; font-size: 12px; line-height: 16px; color: var(--accent); letter-spacing: .04em; }
.zine-head .joint-mark.is-head { margin-top: 24px; }
.zine-head .joint-mark.is-head + .zine-title { margin-top: 4px; }
.colophon-face .joint-mark { font-size: 3cqw; line-height: 1.4; }
/* ページの作者名は紙面の右下に重ねるだけ（紙面の大きさの計算は変えない。アプリの読む画面と同じ置き方）。
   写真の上でも読めるよう、紙の色を薄く敷く */
.page.has-author { position: relative; }
.page-author { position: absolute; right: 2.4cqw; bottom: 2.4cqw; max-width: 60%; margin: 0; padding: .6cqw 2.2cqw; border-radius: 999px;
  background: rgba(255, 255, 255, .86); color: var(--ink-muted); font-size: 3cqw; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.joint-projects .joint-cover { flex: none; width: 88px; border-radius: 6px 2px 2px 6px; }
.joint-cover-lg { width: min(100%, 220px); margin: 24px 0 8px; box-shadow: var(--shadow-book); }
.joint-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--ink-muted); }
.joint .note { margin-top: 24px; }