/* 英語の本棚（/hon/）。taizen.css の上に重ねる。表紙が主役：太枠＋ずらし影の「本」を並べる */
.hb-cv{display:block;width:100%;height:auto;aspect-ratio:auto;border:2px solid var(--t-edge);border-radius:4px 8px 8px 4px;box-shadow:4px 4px 0 var(--t-edge);background:#fff;object-fit:cover}
.hb-cv-none{display:flex;flex-direction:column;justify-content:center;gap:8px;aspect-ratio:2/3;padding:14px;background:linear-gradient(160deg,var(--t-blue-bg),var(--t-card));font:900 14px/1.4 var(--t-disp);text-align:center}
.hb-cv-none small{font:700 11px var(--t-jp);color:var(--t-sub)}

/* ---------- 入口のヒーロー：夜の藍に、表紙の壁 ---------- */
.hb-hero{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 85% 10%,#3248e0 0%,transparent 60%),radial-gradient(700px 480px at 0% 110%,#6a2fd8 0%,transparent 60%),var(--t-night);color:#fff;border-bottom:var(--t-bd)}
.hb-hero-in{max-width:var(--t-w);margin:0 auto;padding:20px 24px 64px;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hb-crumb{color:#c9cdf5}
.hb-hero .h-kick{margin-top:22px}
.hb-h1{font:900 clamp(46px,7vw,86px)/1.08 var(--t-disp);margin-top:18px}
.hb-h1 span{display:inline-block}
.hb-h1 .g{color:var(--t-lime);margin-left:.08em;position:relative}
.hb-h1 .g::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;background:var(--t-red);border-radius:6px;z-index:-1}
.hb-lead{font-size:16.5px;line-height:2;margin-top:22px;color:#dde0f7;max-width:540px;font-weight:700}
.hb-shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 16px;padding:18px 18px 26px;border-bottom:10px solid #ffffff26;transform:perspective(1200px) rotateY(-8deg)}
.hb-shelf span{display:block;transform:rotate(var(--r));transition:transform .3s var(--t-ease)}
.hb-shelf span:hover{transform:rotate(0) translateY(-6px) scale(1.04)}
.hb-shelf .hb-cv{border-color:#05060f;box-shadow:5px 5px 0 #05060f;max-height:200px}
@media (max-width:900px){.hb-hero-in{grid-template-columns:1fr;gap:28px}.hb-shelf{transform:none;grid-template-columns:repeat(6,1fr);gap:10px;padding:10px 4px 16px}.hb-shelf span:nth-child(n+7){display:none}}
@media (max-width:560px){.hb-hero-in{padding:12px 16px 44px}.hb-shelf{grid-template-columns:repeat(4,1fr)}.hb-shelf span:nth-child(n+5){display:none}}

/* ---------- 超絶ベストセラー ---------- */
.hb-best{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));gap:22px}
.hb-bc{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:center;text-decoration:none;background:var(--t-card);border:var(--t-bd);border-radius:var(--t-r);box-shadow:var(--t-sh);padding:16px 18px 16px 16px;transition:transform .15s var(--t-ease),box-shadow .15s}
.hb-bc:hover{transform:translate(-2px,-2px);box-shadow:var(--t-sh-h)}
.hb-bc-cv{position:relative;display:block}
.hb-bc-b{display:flex;flex-direction:column;gap:6px;min-width:0;align-items:flex-start}
.hb-bc-b b{font:900 17px/1.45 var(--t-disp)}
.hb-bc-b small{font-size:13.5px;line-height:1.7;color:var(--t-sub);font-weight:700}
.hb-bc-b em{font:800 12px var(--t-jp);font-style:normal;color:var(--t-red2);background:var(--t-red-bg);padding:2px 8px;border-radius:6px}
.hb-rank{position:absolute;top:-10px;left:-10px;min-width:36px;height:36px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--t-red);color:#fff;font:900 16px/1 var(--t-en);border:2px solid var(--t-edge);box-shadow:2px 2px 0 var(--t-edge)}

/* ---------- ジャンルのタイル ---------- */
.hb-gts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px}
.hb-gt{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;text-decoration:none;background:var(--t-card);border:var(--t-bd);border-top:10px solid var(--c);border-radius:var(--t-r);box-shadow:var(--t-sh);padding:20px 20px 20px 16px;transition:transform .15s var(--t-ease),box-shadow .15s}
.hb-gt:hover{transform:translate(-2px,-2px);box-shadow:var(--t-sh-h)}
.hb-fan{position:relative;height:150px;display:block}
.hb-fan .hb-cv{position:absolute;width:82px;top:6px;box-shadow:3px 3px 0 var(--t-edge)}
.hb-fan .hb-cv:nth-child(1){left:0;transform:rotate(-8deg)}
.hb-fan .hb-cv:nth-child(2){left:34px;transform:rotate(1deg);z-index:1}
.hb-fan .hb-cv:nth-child(3){left:66px;transform:rotate(9deg);z-index:2}
.hb-gt-b{display:flex;flex-direction:column;gap:6px}
.hb-gt-b b{font:900 22px/1.3 var(--t-disp)}
.hb-gt-b small{font-size:13.5px;line-height:1.7;color:var(--t-sub);font-weight:700}
.hb-gt-b em{font:900 14px var(--t-disp);font-style:normal;color:var(--c)}

/* ---------- 洋書の階段 ---------- */
.hb-stairs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end}
.hb-st{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:var(--t-card);border:var(--t-bd);border-radius:var(--t-r-s);box-shadow:var(--t-sh-s);padding:14px 12px 12px;margin-top:calc((4 - var(--i)) * 26px);transition:transform .15s var(--t-ease)}
.hb-st:hover{transform:translateY(-4px)}
.hb-st-n{font:900 11.5px var(--t-en);letter-spacing:.12em;color:var(--t-red)}
.hb-st b{font:900 17px/1.35 var(--t-disp)}
.hb-st small{font-size:12.5px;color:var(--t-sub);font-weight:800}
.hb-st-cv{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.hb-st-cv .hb-cv{box-shadow:2px 2px 0 var(--t-edge);border-width:1.5px}
@media (max-width:860px){.hb-stairs{grid-template-columns:1fr 1fr}.hb-st{margin-top:0}}
@media (max-width:420px){.hb-stairs{grid-template-columns:1fr}.hb-st-cv{grid-template-columns:repeat(4,1fr)}}

/* ---------- 使い方の3つ ---------- */
.hb-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.hb-rule{background:var(--t-card);border:var(--t-bd);border-radius:var(--t-r);box-shadow:var(--t-sh-s);padding:22px 22px 20px}
.hb-rule span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--t-lime);border:2px solid var(--t-edge);font:900 19px var(--t-en);color:#15172e}
.hb-rule b{display:block;font:900 19px/1.4 var(--t-disp);margin-top:12px}
.hb-rule p{color:var(--t-sub);font-weight:700;margin-top:8px;font-size:15px}
.hb-note{margin-top:36px;font-size:13px;line-height:1.9;color:var(--t-sub);border-top:1.5px dashed var(--t-line);padding-top:16px}

/* ---------- ジャンルのページの頭 ---------- */
.hb-ph{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,var(--t-bg)) 0%,var(--t-bg) 70%);border-bottom:var(--t-bd)}
.hb-ph-in{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:20px 0 44px}
.hb-ph h1{font:900 clamp(32px,5vw,54px)/1.2 var(--t-disp);margin-top:10px}
.hb-ph h1 small{font:900 .4em var(--t-en);margin-left:12px;background:var(--t-ink);color:var(--t-bg);padding:4px 12px;border-radius:999px;vertical-align:middle}
.hb-ph-catch{font:900 clamp(17px,2vw,20px)/1.6 var(--t-disp);margin-top:14px}
.hb-ph-lead{color:var(--t-sub);font-weight:700;margin-top:12px;max-width:640px}
.hb-ph-cv{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.hb-ph-cv .hb-cv:nth-child(odd){transform:rotate(-3deg)}
.hb-ph-cv .hb-cv:nth-child(even){transform:rotate(3deg) translateY(-10px)}
@media (max-width:760px){.hb-ph-in{grid-template-columns:1fr;gap:20px;padding-bottom:32px}.hb-ph-cv{max-width:420px}}
.hb-main{padding-top:40px;padding-bottom:64px}

/* ---------- 一覧のカード ---------- */
.hb-cards{display:grid;gap:26px}
.hb-card{display:grid;grid-template-columns:170px 1fr;gap:26px;background:var(--t-card);border:var(--t-bd);border-radius:var(--t-r);box-shadow:var(--t-sh);padding:24px 26px 22px 22px;scroll-margin-top:90px}
.hb-card-cv{position:relative;display:block;align-self:start}
.hb-card-b{min-width:0}
.hb-pills{display:flex;flex-wrap:wrap;gap:6px}
.hb-card h3{font:900 clamp(19px,2.2vw,23px)/1.45 var(--t-disp);margin-top:10px}
.hb-card h3 a{text-decoration:none}.hb-card h3 a:hover{color:var(--t-red)}
.hb-ja{font-size:13.5px;font-weight:800;color:var(--t-sub);margin-top:4px}
.hb-meta{font-size:13px;color:var(--t-faint);font-weight:700;margin-top:4px}
.hb-catch{font:900 16.5px/1.6 var(--t-disp);margin-top:12px;padding-left:12px;border-left:5px solid var(--t-lime)}
.hb-why{margin-top:10px;font-size:15px;line-height:1.95}
.hb-how{margin-top:14px;border:2px solid var(--t-edge);border-radius:14px;background:var(--t-bg)}
.hb-how summary{cursor:pointer;font:900 14.5px var(--t-disp);padding:10px 14px;list-style:none;display:flex;align-items:center;gap:8px}
.hb-how summary::-webkit-details-marker{display:none}
.hb-how summary::before{content:"▶";font-size:11px;color:var(--t-red);transition:transform .2s}
.hb-how[open] summary::before{transform:rotate(90deg)}
.hb-steps{margin:0;padding:0 16px 4px 36px;display:grid;gap:8px;font-size:14.5px;font-weight:700}
.hb-steps li::marker{font:900 14px var(--t-en);color:var(--t-red)}
.hb-tip{margin:12px 14px 14px;background:var(--t-sun-bg);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700}
.hb-tip b{display:inline-block;background:var(--t-red);color:#fff;font:900 11.5px var(--t-disp);padding:3px 9px;border-radius:999px;margin-right:8px}
.hb-act{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:14px}
.hb-lib{font-weight:800;font-size:14px;color:var(--t-blue);text-decoration:none}
.hb-lib:hover{text-decoration:underline}
@media (max-width:640px){.hb-card{grid-template-columns:96px 1fr;gap:16px;padding:18px 16px}.hb-card h3{margin-top:8px}.hb-why{grid-column:1/-1}}
@media (max-width:420px){.hb-card{grid-template-columns:1fr}.hb-card-cv{max-width:130px}}

/* 洋書：レベル */
.hb-lvnav{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hb-lvnav a{display:flex;flex-direction:column;text-decoration:none;background:var(--t-card);border:var(--t-bd);border-radius:var(--t-r-s);box-shadow:var(--t-sh-s);padding:10px 12px}
.hb-lvnav a:hover{background:var(--t-lime);color:#15172e}
.hb-lvnav span{font:900 11px var(--t-en);letter-spacing:.12em;color:var(--t-red)}
.hb-lvnav b{font:900 15px/1.35 var(--t-disp)}
.hb-lvnav small{font-size:12px;font-weight:800;color:var(--t-sub)}
@media (max-width:760px){.hb-lvnav{grid-template-columns:repeat(2,1fr)}.hb-lvnav a:last-child{grid-column:1/-1}}
.hb-howto{margin-top:32px;background:var(--t-card);border:var(--t-bd);border-radius:var(--t-r);box-shadow:var(--t-sh);padding:24px}
.hb-howto h2{font:900 clamp(20px,2.4vw,24px)/1.4 var(--t-disp)}
.hb-howto-l{margin-top:14px;font-weight:700;color:var(--t-sub)}
.hb-howto-l a{color:var(--t-blue);font-weight:900}
.hb-lv{margin-top:56px;scroll-margin-top:80px}
.hb-lv-hd{margin-bottom:20px}
.hb-lv-hd > span{display:inline-block;background:var(--t-ink);color:var(--t-bg);font:900 12px var(--t-en);letter-spacing:.12em;padding:4px 12px;border-radius:999px}
.hb-lv-hd h2{font:900 clamp(25px,3.4vw,34px)/1.3 var(--t-disp);margin-top:10px}
.hb-lv-hd h2 small{font:800 14px var(--t-jp);color:var(--t-sub);margin-left:12px}
.hb-lv-hd p{color:var(--t-sub);font-weight:700;margin-top:6px}
.hb-others{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:48px}
.hb-others b{font:900 15px var(--t-disp);margin-right:6px}

/* ---------- 1冊のページ ---------- */
.hb-one-hd{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;margin-top:26px}
.hb-one-cv small{display:block;font-size:11.5px;color:var(--t-faint);margin-top:12px;font-weight:700}
.hb-cv.big{box-shadow:8px 8px 0 var(--t-edge);border-width:2.5px}
.hb-one-t h1{font:900 clamp(25px,3.8vw,40px)/1.4 var(--t-disp);margin-top:14px}
.hb-one-catch{font:900 clamp(17px,2vw,20px)/1.65 var(--t-disp);margin-top:14px;padding:10px 14px;background:var(--t-lime-bg);border-radius:12px;border:2px solid var(--t-edge)}
.hb-dl{margin:18px 0 0;display:grid;gap:0;border-top:1.5px solid var(--t-line)}
.hb-dl div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:8px 0;border-bottom:1.5px solid var(--t-line);font-size:14.5px}
.hb-dl dt{font-weight:900;color:var(--t-sub)}
.hb-dl dd{margin:0;font-weight:700}
.hb-one-b{max-width:780px;margin:0 auto}
.hb-p{margin-top:14px;font-size:16px;line-height:2}
.hb-tipbox{margin-top:48px}
.hb-pair{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hb-sib{margin-top:72px;padding-top:40px;border-top:var(--t-bd)}
.hb-sib h2{font:900 clamp(21px,2.6vw,26px)/1.4 var(--t-disp)}
.hb-sib > p{margin-top:24px}
.hb-minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px;margin-top:20px}
.hb-mini{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.hb-mini .hb-cv{transition:transform .15s var(--t-ease)}
.hb-mini:hover .hb-cv{transform:translateY(-4px)}
.hb-mini b{font:900 14px/1.45 var(--t-disp);margin-top:6px}
.hb-mini small{font-size:12.5px;line-height:1.6;color:var(--t-sub);font-weight:700}
.hb-one{padding-bottom:64px}
@media (max-width:760px){.hb-one-hd{grid-template-columns:1fr;gap:22px}.hb-one-cv{max-width:200px}.hb-minis{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}}