/* アニ名人 機能サブページ共通スタイル（ネオポップ・ジン風・LPと同トーン） */
:root{
  --paper:#fff8ef;--card:#fff;--ink:#2b2440;--ink-soft:#6f6885;
  --teal:#00b8a9;--teal-soft:#d6f4f0;--pink:#ff6fa5;--pink-soft:#ffe3ef;
  --yellow:#ffd93d;--purple:#7c6ff0;--purple-soft:#e6e2ff;
  --shadow:4px 4px 0 var(--ink);--shadow-sm:3px 3px 0 var(--ink);--radius:16px;font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background-color:var(--paper);background-image:radial-gradient(rgba(43,36,64,.08) 1px,transparent 1px);background-size:22px 22px;color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;line-height:1.8}
.dot{font-family:"DotGothic16",monospace}
a{color:inherit}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid var(--ink)}
.head-in{max-width:820px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:10px}
.logo{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:9px;text-decoration:none}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--teal);border:2.5px solid var(--ink);border-radius:10px;box-shadow:var(--shadow-sm);transform:rotate(-6deg)}
.logo-text{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%);padding:0 2px}
.head-cta{margin-left:auto;font-weight:900;font-size:.85rem;background:var(--yellow);border:2.5px solid var(--ink);border-radius:999px;padding:6px 16px;text-decoration:none;box-shadow:var(--shadow-sm);white-space:nowrap}
.crumb{font-size:.78rem;font-weight:700;color:var(--ink-soft);padding:14px 0 0}
.crumb a{color:var(--pink);text-decoration:none}
main{padding-bottom:60px}
.hero{padding:26px 0 10px}
h1{font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:900;line-height:1.5}
h1 .hl{background:linear-gradient(transparent 60%,var(--yellow) 60%,var(--yellow) 92%,transparent 92%);padding:0 2px}
.lead{color:var(--ink-soft);font-weight:700;margin-top:14px}
.cta{display:inline-block;margin-top:22px;font-weight:900;font-size:1.1rem;background:var(--yellow);border:3px solid var(--ink);border-radius:999px;padding:13px 36px;text-decoration:none;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.cta:active{transform:translate(3px,3px);box-shadow:none}
.cta-sub{font-family:"DotGothic16",monospace;font-size:.78rem;color:var(--ink-soft);margin-top:10px}
section{padding:34px 0}
h2{font-size:clamp(1.2rem,3.5vw,1.5rem);font-weight:900;margin-bottom:16px}
h2 .hl-t{box-shadow:inset 0 -0.45em var(--teal-soft);padding:0 2px}
h2 .hl-p{box-shadow:inset 0 -0.45em var(--pink-soft);padding:0 2px}
p{margin-bottom:12px}
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.step{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:st;content:counter(st);position:absolute;top:-14px;left:-10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--yellow);border-radius:50%;font-family:"DotGothic16",monospace;font-size:1.05rem;border:2.5px solid var(--ink);transform:rotate(-6deg)}
.step b{display:block;margin-bottom:4px}
.step p{color:var(--ink-soft);font-size:.86rem;font-weight:700;margin:0}
.note{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow)}
.note p:last-child{margin-bottom:0}
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow-sm)}
.faq summary{font-weight:900;cursor:pointer;list-style:none;display:flex;gap:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";color:var(--pink);font-family:"DotGothic16",monospace}
.faq p{margin:8px 0 0;color:var(--ink-soft);font-size:.9rem;font-weight:700}
.related{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.related a{font-weight:900;font-size:.85rem;background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;text-decoration:none;box-shadow:2px 2px 0 var(--ink)}
.related a:hover{transform:translate(-1px,-1px)}
.closing{text-align:center;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:38px 20px;margin-top:20px}
.closing h2{color:#fff}
.closing .cta{background:var(--yellow);color:var(--ink)}
footer.site{border-top:3px solid var(--ink);background:var(--card);padding:24px 0;text-align:center;color:var(--ink-soft);font-size:.8rem;font-weight:700;margin-top:20px}
footer.site nav{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
footer.site a{color:var(--ink-soft)}