/* かぴかぴのページの見た目。色は docs/kapikapi-brand.md の「見た目のトンマナ」。リンクの色は地に対して 4.5:1 以上 */
:root{--paper:#fff4f7;--ink:#4a2531;--rule:#f3cdd9;--link:#b02a5b;--hover:#fbe3ea;color-scheme:light}
*{box-sizing:border-box}
html{background:var(--paper)}
html.fl body{visibility:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;font-weight:500;font-size:1rem;line-height:1.9;word-break:keep-all;line-break:strict;overflow-wrap:anywhere}
html[lang="en"] body{line-height:1.75;word-break:normal}
main{max-width:720px;margin:0 auto;padding:40px 16px 64px}
a{color:var(--link)}
a:focus-visible{outline:3px solid #2b78d0;outline-offset:3px;border-radius:4px}
.nw{white-space:nowrap}
p{margin:0}
p+p{margin-top:12px}

/* 運営者のページの上 */
.hero{text-align:center}
.hero img{display:block;width:240px;height:auto;margin:0 auto}
.hero h1{margin:16px 0 0;font-size:2.5rem;font-weight:900;line-height:1.2;letter-spacing:.04em}
html[lang="en"] .hero h1{letter-spacing:.02em}
.en,.ja{margin:6px 0 0;font-weight:900;letter-spacing:.06em}
.lead{margin:16px 0 0;font-size:1.125rem;font-weight:700}
.follow{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 22px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);font-weight:700;text-decoration:none}
.follow svg{width:18px;height:18px}
.follow:hover{background:var(--hover)}

/* ほかのページの上。運営者のページへ戻るリンクと、ページの名前 */
.crumb a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:900;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb img{display:block;width:32px;height:32px;border-radius:8px}
.pt{margin:28px 0 0;font-size:2rem;font-weight:900;line-height:1.3}
.pt+p{margin-top:12px}

h2{margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--rule);font-size:1.375rem;font-weight:900;line-height:1.4}
h3{margin:0;font-size:1.25rem;font-weight:900;line-height:1.4}
ul,ol{margin:0;padding-left:1.4em}
p+h3,ul+h3,ol+h3,table+h3{margin-top:24px}
h3+p,h3+ul,h3+ol{margin-top:8px}
li+li{margin-top:6px}

/* 作品 */
.work+.work{margin-top:36px}
.work .wt{display:flex;align-items:center;gap:16px}
.work img{display:block;width:72px;height:72px;border-radius:16px;flex:none}
.work p{margin-top:12px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:14px}
.play{display:inline-block;padding:10px 24px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.play:hover{opacity:.9}
.work>.play{margin-top:14px}
.more{font-weight:700}
.links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.links li+li{margin-top:0}

/* お知らせ。1件を1行にし、題名が長いときは行の端で「…」にする */
.news{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.news li+li{margin-top:0;border-top:1px solid var(--rule)}
.news a{display:flex;align-items:baseline;gap:16px;padding:12px 16px;color:var(--ink);text-decoration:none}
.news a:hover{background:var(--hover)}
.news time{flex:none;font-weight:700}
.news span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--link);text-decoration:underline}
.news span wbr{display:none}
.all{margin-top:14px}
.entry h2 time{display:block;margin-bottom:4px;font-size:1rem;font-weight:700}

/* 画面写真 */
.shots{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.shots li+li{margin-top:0}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--rule)}
.shots figcaption{margin-top:6px;font-weight:700;line-height:1.5}
.shots a{display:inline-block;margin-top:2px;line-height:1.5}
@media (max-width:560px){.shots{grid-template-columns:repeat(2,1fr)}}

/* 基本情報などの表 */
.facts{width:100%;border-collapse:collapse}
.facts col.k{width:9.5em}
@media (max-width:480px){.facts col.k{width:6.5em}}
.facts th,.facts td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.facts tr:first-child th,.facts tr:first-child td{border-top:1px solid var(--rule)}
.facts th{font-weight:700}
.facts td{padding-right:0}

.steps{counter-reset:s;list-style:none;padding:0}
.steps li{position:relative;padding-left:2.2em}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:.2em;width:1.6em;height:1.6em;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:700;font-size:.875rem;line-height:1.6em;text-align:center}

.date{margin-top:32px}

footer{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);font-size:.875rem}
footer a{color:var(--ink)}
@media (max-width:480px){.hero h1{font-size:2rem}.pt{font-size:1.75rem}}