:root { --ink:#171717; --muted:#6c6b65; --paper:#faf8f2; --card:#fff; --soft:#f1efe8; --accent:#315044; --shell:min(1120px,calc(100% - 48px)); --radius:12px; --shadow:0 6px 18px rgba(44,39,27,.06); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif; line-height:1.7; overflow-x:hidden; overflow-wrap:anywhere; }
a { color:inherit; }
.shell { width:var(--shell); margin-inline:auto; }
.site-header { background:#fff; border-bottom:1px solid #eaeaea; }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; min-width:0; text-decoration:none; }
.brand-image { display:block; width:132px; height:41px; object-fit:contain; object-position:left center; }
.tagline { margin:0; color:var(--muted); font-size:.76rem; letter-spacing:.04em; }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:2px 9px; padding-block:10px 4px; color:#777; font-size:.84rem; line-height:1.5; }
.breadcrumb a { text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; text-underline-offset:2px; }
.hero { position:relative; min-height:270px; margin-top:25px; overflow:hidden; border-radius:var(--radius); background:#dfe1db; box-shadow:var(--shadow); isolation:isolate; }
.hero-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:62% center; }
.hero::before { content:""; position:absolute; z-index:1; top:0; bottom:0; left:0; width:38%; border-radius:var(--radius) 0 0 var(--radius); background:rgba(0,0,0,.5); }
.hero-copy { position:relative; z-index:1; display:flex; align-items:center; width:38%; height:100%; padding:40px 56px; color:#fff; }
.hero h1 { margin:0; font-size:clamp(2.7rem,6vw,4.7rem); line-height:1.12; letter-spacing:.06em; text-shadow:0 2px 14px rgba(0,0,0,.14); }
.catalog { padding-block:58px 8px; }
.section-heading { margin-bottom:20px; }
.section-heading.compact { margin-bottom:18px; }
.eyebrow { margin:0 0 4px; color:var(--accent); font-size:.68rem; font-weight:700; letter-spacing:.16em; }
.section-heading h2 { margin:0; font-size:clamp(1.65rem,3vw,2.25rem); line-height:1.35; letter-spacing:.04em; }
.filter-row { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 9px; scrollbar-width:thin; }
.filter-chip { flex:0 0 auto; padding:7px 14px; border:1px solid #ddd9ce; border-radius:999px; background:#fff; color:#5f605a; font-size:.78rem; line-height:1.35; text-decoration:none; white-space:nowrap; }
.filter-chip:hover, .filter-chip.is-selected { border-color:var(--accent); color:var(--accent); background:#edf1ed; }
.filter-chip.is-selected { font-weight:700; }
.catalog-list-heading { display:flex; align-items:baseline; gap:14px; margin:35px 0 17px; }
.catalog-list-heading h3 { margin:0; font-size:1.35rem; letter-spacing:.03em; }
.catalog-list-heading p { margin:0; color:var(--muted); font-size:.78rem; }
.yokai-grid { display:grid; grid-template-columns:repeat(3,minmax(145px,1fr)); gap:16px; }
.yokai-card { min-width:0; overflow:hidden; border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.yokai-card:hover, .shelf-card:hover, .guide-card:hover { transform:translateY(-2px); box-shadow:0 9px 22px rgba(44,39,27,.11); }
.card-placeholder, .shelf-placeholder, .guide-placeholder { display:grid; place-items:center; color:#8b9188; background:var(--soft); font-size:.58rem; letter-spacing:.14em; }
.card-placeholder { aspect-ratio:4/3; }
.card-copy { padding:12px 13px 14px; }
.card-copy h4 { margin:0; font-size:1.12rem; line-height:1.35; letter-spacing:.03em; }
.card-copy p { margin:4px 0 0; color:#595a54; font-size:.73rem; line-height:1.55; }
.card-copy .reading { margin-top:1px; color:#8a8981; font-size:.68rem; }
.book-thumbnail { padding:14px 13px 2px; perspective:800px; }
.book-cover { position:relative; aspect-ratio:3/4; transform:rotateY(-7deg); transform-origin:left center; border-radius:3px 7px 7px 3px; background:#d8d5c9; box-shadow:5px 5px 10px rgba(44,39,27,.16); isolation:isolate; }
.book-cover::before { content:""; position:absolute; z-index:0; top:3px; right:-6px; bottom:3px; width:7px; border-radius:0 4px 4px 0; background:repeating-linear-gradient(to bottom,#d6d0c0 0,#eee9dc 1px,#d2cbbb 2px); box-shadow:2px 2px 4px rgba(44,39,27,.1); }
.book-cover::after { content:""; position:absolute; z-index:2; inset:0 auto 0 0; width:5px; border-radius:3px 0 0 3px; background:rgba(30,49,40,.24); }
.book-cover img { position:relative; z-index:1; display:block; width:100%; height:100%; border-radius:3px 7px 7px 3px; object-fit:cover; object-position:58% 38%; }
.book-meta { padding:7px 10px 15px; text-align:center; }
.book-meta .reading { display:block; color:#8a8981; font-size:.68rem; line-height:1.4; }
.book-meta h4 { margin:2px 0 0; font-size:.72rem; line-height:1.35; letter-spacing:-.04em; white-space:nowrap; }
.ad-slot { display:flex; justify-content:center; align-items:center; min-height:66px; margin-block:35px 30px; color:#99988f; font-size:.62rem; letter-spacing:.14em; }
.ad-slot span { padding:6px 15px; border:1px dashed #d5d1c6; border-radius:4px; }
.recommendations, .other-guides { padding-block:20px 54px; }
.shelf { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr); gap:14px; overflow-x:auto; padding:2px 2px 10px; }
.shelf-card { display:flex; align-items:center; gap:12px; min-width:0; padding:10px; border-radius:10px; background:#fff; box-shadow:var(--shadow); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.shelf-placeholder { flex:0 0 82px; aspect-ratio:1; border-radius:7px; }
.shelf-card h3 { margin:0; font-size:.98rem; line-height:1.35; }
.shelf-card p { margin:2px 0 0; color:#89877f; font-size:.68rem; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.guide-card { overflow:hidden; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.guide-placeholder { aspect-ratio:16/5; background:linear-gradient(120deg,#ebe9e1,#d9ddd6); }
.guide-card h3 { margin:0; padding:15px 18px 17px; font-size:1.08rem; }
.site-footer { color:#fff; background:var(--ink); }
.footer-inner { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:.76rem; }
.footer-inner p { margin:0; color:#aaa; }
.footer-links { display:flex; gap:26px; }
.footer-links a { text-decoration:none; }
@media (max-width:900px) { :root { --shell:min(100% - 40px,720px); } .hero { min-height:245px; } .hero-copy { padding:36px 40px; } .catalog { padding-top:46px; } .catalog-list-heading { display:block; } .catalog-list-heading p { margin-top:4px; } }
@media (max-width:560px) { :root { --shell:calc(100% - 28px); } .header-inner { min-height:72px; display:block; padding-block:15px; } .brand-image { width:120px; height:36px; } .tagline { margin-top:2px; font-size:.66rem; } .breadcrumb { padding-block:8px 2px; font-size:.8rem; } .hero { min-height:210px; margin-top:18px; } .hero-image { object-position:75% center; } .hero::before { width:62%; } .hero-copy { width:62%; padding:28px; } .hero h1 { font-size:clamp(2.35rem,13vw,3.5rem); } .catalog { padding-top:38px; } .section-heading { margin-bottom:16px; } .yokai-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .card-copy { padding:10px 10px 12px; } .card-copy h4 { font-size:1rem; } .card-copy p { font-size:.69rem; } .catalog-list-heading { margin-top:27px; } .catalog-list-heading h3 { font-size:1.2rem; } .ad-slot { min-height:48px; margin-block:25px 22px; } .recommendations, .other-guides { padding-block:16px 38px; } .shelf { grid-auto-columns:205px; } .guide-grid { grid-template-columns:1fr; gap:12px; } .guide-card h3 { padding:12px 15px 14px; } .footer-inner { min-height:126px; display:block; padding-block:24px; } .footer-links { flex-wrap:wrap; gap:6px 20px; } .footer-inner p { margin-top:16px; } }

/* 妖怪図鑑の4文字をHEROの暗い領域内で一行に収める。 */
.hero-copy { padding-inline:28px; min-height:inherit; }
.hero #page-title { white-space:nowrap; font-size:clamp(1.6rem,4.6vw,4rem); }
@media(max-width:560px) { .hero-copy { padding-inline:20px; } .hero #page-title { font-size:clamp(1.4rem,7vw,2.4rem); } }

.book-meta .book-description { margin:8px 3px 0; color:#595a54; font-size:.73rem; line-height:1.55; text-align:left; }
@media(max-width:560px) { .book-meta .book-description { font-size:.69rem; } }

/* ROKUROKUBI CARD CROP 20260917 */
.rokurokubi-cover img{object-position:58% 30%}

/* NURARIHYON CARD CROP 20260917 */
.nurarihyon-cover img{object-position:90% 35%}

}

/* NEW YOKAI CARD CROP 20260918 */
.ittanmomen-cover img{object-position:58% 38%}
.zashikiwarashi-cover img{object-position:72% 50%}