:root{
  --paper:#ffffff;--tint:#f4f6f3;--ink:#16191a;--sub:#5c6462;--line:#d9dedb;
  --green:#14432f;--green-2:#1f6146;--mustard:#e0a800;--mustard-soft:#fdf5d6;--red:#b3261e;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;margin:0;color:var(--ink);
  background:var(--paper);line-height:1.8;-webkit-text-size-adjust:100%}
a{color:var(--green-2)}
img{max-width:100%;height:auto}

header.site{border-top:6px solid var(--green);border-bottom:1px solid var(--ink)}
header.site .bar{max-width:1040px;margin:0 auto;padding:14px 16px 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:1.2em;
  font-family:"Hiragino Mincho ProN","Noto Serif JP",serif}
.logo .mark{display:inline-block;width:32px;height:32px;line-height:0}
.logo .mark svg{width:32px;height:32px;display:block}
.tagline{font-size:.74em;color:var(--sub)}
nav.menu{max-width:1040px;margin:0 auto;padding:0 8px;display:flex;gap:2px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
nav.menu::-webkit-scrollbar{display:none}
nav.menu a{color:var(--ink);text-decoration:none;font-size:.88em;font-weight:700;padding:8px 14px;border-bottom:4px solid transparent}
nav.menu a.on,nav.menu a:hover{border-bottom-color:var(--mustard)}

main{max-width:1040px;margin:0 auto;padding:20px 16px 60px}
h1.page-title{font-size:1.34em;line-height:1.5;margin:.4em 0 .6em;font-weight:800}
h2{font-size:1.08em;margin:2.6em 0 1em;padding:8px 0 8px 12px;border-left:6px solid var(--mustard);border-bottom:1px solid var(--ink);font-weight:800}
h3{font-size:1em;margin:1.6em 0 .6em}
p{margin:.6em 0}
.lead{color:var(--sub);font-size:.9em}
.more{text-align:right;font-size:.9em;margin:.8em 0 0}

/* 号の見出し（年月を大きく組む。本サイトの主役） */
.issue-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px;border-bottom:3px double var(--ink);padding:8px 0 12px;margin:0 0 6px}
.issue-head .ym{font-family:"Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:800;line-height:1;display:flex;align-items:baseline;gap:6px}
.issue-head .ym .y{font-size:1.1em;color:var(--sub)}
.issue-head .ym .m{font-size:3.4em;color:var(--green)}
.issue-head .ym .g{font-size:1.2em}
.issue-head .st{font-size:.76em;font-weight:800;padding:2px 10px;border:1px solid var(--ink)}
.issue-head .st.live{background:var(--mustard-soft);border-color:var(--mustard)}

/* 順位つきの縦リスト */
ol.rank{list-style:none;margin:0;padding:0}
ol.rank li{border-bottom:1px solid var(--line)}
ol.rank a{display:grid;grid-template-columns:56px 104px minmax(0,1fr);gap:14px;align-items:center;padding:12px 4px;color:var(--ink);text-decoration:none}
ol.rank a:hover{background:var(--tint)}
ol.rank .no{font-family:"Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:800;font-size:1.7em;text-align:center;line-height:1;color:var(--green)}
ol.rank .no small{display:block;font-size:.38em;color:var(--sub);font-family:inherit;margin-top:4px}
ol.rank li.top .no{color:var(--red)}
ol.rank .no.dt{font-size:1.02em;color:var(--ink);letter-spacing:.02em}
ol.rank .no.dt small{font-size:.7em;margin-top:2px}
ol.rank img{width:104px;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--line)}
ol.rank .t{font-weight:700;font-size:.94em;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
ol.rank .c{display:block;font-size:.8em;color:var(--sub);margin-top:2px}
ol.rank .m{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:.78em;color:var(--sub);margin-top:4px}
ol.rank .m b{color:var(--ink);font-variant-numeric:tabular-nums}

/* 号の索引 */
.issues{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:1em 0;padding:0;list-style:none}
.issues a{display:block;border:1px solid var(--ink);padding:12px 14px;color:var(--ink);text-decoration:none;background:var(--paper)}
.issues a:hover{background:var(--tint)}
.issues .ym{font-family:"Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:800;font-size:1.3em;color:var(--green)}
.issues .n{font-size:.78em;color:var(--sub);margin-left:6px}
.issues .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}
.issues .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--line)}
.issues .first{display:block;font-size:.8em;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 歴代の表紙（各号の1位。トップ） */
.covers{display:grid;gap:18px 14px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin:1em 0;padding:0;list-style:none}
.covers li{display:flex;flex-direction:column;gap:4px;border-top:3px solid var(--ink);padding-top:8px}
.covers .cv-img{display:block}
.covers img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--line)}
.covers .cv-ym{font-family:"Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:800;font-size:1.05em;color:var(--green);margin-top:4px}
.covers .cv-ym em{font-style:normal;font-family:inherit;font-size:.66em;font-weight:800;margin-left:6px;padding:1px 6px;border:1px solid var(--mustard);background:var(--mustard-soft);color:var(--ink)}
.covers .cv-t{font-weight:700;font-size:.84em;line-height:1.5;color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.covers .cv-t:hover{text-decoration:underline}
.covers .cv-c{font-size:.76em;color:var(--sub)}
.covers .cv-more{font-size:.78em;font-weight:700;margin-top:auto}
/* クリエイター殿堂（トップ） */
ol.hall{list-style:none;margin:1em 0;padding:0;columns:2 300px;column-gap:28px}
ol.hall li{break-inside:avoid;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 8px;align-items:baseline;border-bottom:1px solid var(--line);padding:9px 0}
ol.hall .hn{font-family:"Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:800;font-size:1.3em;color:var(--green);text-align:center}
ol.hall li:nth-child(-n+3) .hn{color:var(--red)}
ol.hall a{font-weight:700;color:var(--ink);text-decoration:none}
ol.hall a:hover{text-decoration:underline}
ol.hall .hs{grid-column:2;font-size:.78em;color:var(--sub)}
ol.hall .hs b{color:var(--ink)}
.clist{columns:3 240px;column-gap:24px;margin:1em 0;padding:0;list-style:none}
.clist li{break-inside:avoid;border-bottom:1px dotted var(--line);padding:6px 0;font-size:.92em}
.clist a{color:var(--ink);text-decoration:none;font-weight:700}
.clist a:hover{color:var(--green-2);text-decoration:underline}
.clist span{color:var(--sub);font-size:.82em;margin-left:6px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:1em 0;padding:0;list-style:none}
.tabs a,.tabs span{display:inline-block;border:1px solid var(--ink);padding:4px 14px;font-size:.86em;font-weight:700;color:var(--ink);text-decoration:none}
.tabs a:hover{background:var(--tint)}
.tabs .on{background:var(--ink);color:#fff}

/* 作品ページ */
.standing{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;background:var(--tint);border-top:3px solid var(--green);padding:12px 16px;margin:0 0 18px}
.standing .rk{font-family:"Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:800;font-size:2em;line-height:1;color:var(--green)}
.standing .rk small{font-size:.5em;margin-left:2px}
.standing .tx{font-size:.88em}
.standing .tx a{font-weight:700}
.work-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start}
.work-head img.hero{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--line);border:1px solid var(--line)}
.table-wrap{overflow-x:auto;margin:1em 0}
table{width:100%;border-collapse:collapse;font-size:.9em}
th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
thead th{border-bottom:2px solid var(--ink);font-size:.86em;white-space:nowrap}
tbody th{font-weight:700;white-space:nowrap;color:var(--sub);width:34%}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.me td{background:var(--mustard-soft);font-weight:700}
table.cmp td:nth-child(2){min-width:180px}
.cta{margin:1.8em 0}
/* ボタン: ピンク→赤橙のグラデーション・白の太字・立体の影・光が走る帯・矢印の動き（2026-10-13ユーザー提供の参考画像の色）。
   prefers-reduced-motion では動きを止める。1ページ3か所（基本情報の直後／価格・比較の直後／まとめの直後） */
.cta-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:460px;margin:0 auto;
  padding:17px 22px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,#ff5a96 0%,#ff4b55 52%,#ff3b12 100%);color:#fff!important;text-decoration:none;
  font-weight:900;font-size:1.18em;letter-spacing:.06em;line-height:1.3;text-shadow:0 1px 2px rgba(120,10,0,.35);
  border:1px solid #ff8a6e;box-shadow:0 5px 0 #c92a0a,0 10px 22px rgba(255,59,18,.38),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;animation:cta-pulse 2.4s ease-in-out infinite}
.cta-btn::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);animation:cta-shine 3.2s ease-in-out infinite}
.cta-btn::after{content:"";width:.62em;height:.62em;border-top:.2em solid #fff;border-right:.2em solid #fff;border-radius:2px;
  transform:rotate(45deg);margin-left:2px;flex:0 0 auto;animation:cta-nudge 1.2s ease-in-out infinite;filter:drop-shadow(0 1px 1px rgba(120,10,0,.35))}
.cta-btn:hover{filter:brightness(1.07) saturate(1.08);transform:translateY(2px);box-shadow:0 3px 0 #c92a0a,0 8px 18px rgba(255,59,18,.38),inset 0 1px 0 rgba(255,255,255,.45)}
.cta-btn:active{transform:translateY(5px);box-shadow:0 0 0 #c92a0a,0 3px 8px rgba(255,59,18,.35),inset 0 1px 0 rgba(255,255,255,.3)}
@keyframes cta-pulse{0%,100%{box-shadow:0 5px 0 #c92a0a,0 10px 22px rgba(255,59,18,.38),inset 0 1px 0 rgba(255,255,255,.45)}
  50%{box-shadow:0 5px 0 #c92a0a,0 12px 30px rgba(255,59,18,.62),inset 0 1px 0 rgba(255,255,255,.45)}}
@keyframes cta-shine{0%,55%{left:-70%}100%{left:130%}}
@keyframes cta-nudge{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,-3px)}}
@media (prefers-reduced-motion:reduce){.cta-btn,.cta-btn::before,.cta-btn::after{animation:none}}
.cta-note{font-size:.76em;color:var(--sub);text-align:center;margin-top:.9em}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1em 0}
.pn a{display:block;border:1px solid var(--line);padding:10px 12px;color:var(--ink);text-decoration:none;font-size:.86em}
.pn a:hover{border-color:var(--ink)}
.pn .k{display:block;font-size:.8em;color:var(--sub)}
.pn .nx{text-align:right}
.qa{margin:1em 0}
.qa details{border-bottom:1px solid var(--line);padding:10px 0}
.qa summary{font-weight:700;cursor:pointer}
.qa p{color:var(--sub);margin:.5em 0 0}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:1.6em 0}
.pager a,.pager span{display:inline-block;min-width:38px;text-align:center;padding:4px 10px;border:1px solid var(--ink);text-decoration:none;color:var(--ink)}
.pager span.on{background:var(--ink);color:#fff}
.prose{max-width:760px}
.prose h2{margin-top:2.2em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.35em 0}
.callout{background:var(--tint);border-left:6px solid var(--mustard);padding:12px 16px;margin:1.2em 0;font-size:.92em}
.note{font-size:.88em;color:var(--sub);background:var(--tint);border:1px solid var(--line);padding:12px 14px}
.stamp{display:inline-block;font-size:.78em;color:var(--sub);border:1px solid var(--line);padding:2px 10px}
.article-list{display:grid;gap:12px;margin:1em 0;padding:0;list-style:none}
.article-card{display:block;border:1px solid var(--ink);padding:16px 18px;color:var(--ink);text-decoration:none;background:var(--paper)}
.article-card:hover{background:var(--tint)}
.article-card .t{display:block;font-weight:800;line-height:1.55}
.article-card .d{display:block;color:var(--sub);font-size:.86em;margin-top:4px}
.article-card .k{display:block;font-size:.74em;font-weight:800;color:var(--green);letter-spacing:.06em;margin-bottom:4px}

.promo-notice{font-size:.76em;color:var(--sub);border-top:1px solid var(--line);padding-top:12px;margin-top:3em}
footer.site{border-top:1px solid var(--ink);background:var(--tint);color:var(--sub);padding:22px 16px 30px;text-align:center;font-size:.8em}
footer.site a{color:var(--ink)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-bottom:10px}
.age-notice,.copy{margin:.3em 0}
.age-gate{position:fixed;inset:0;background:rgba(20,67,47,.97);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}
.age-gate-inner{background:#fff;padding:28px 24px;max-width:340px;text-align:center;border-top:6px solid var(--mustard)}
.age-gate-title{font-weight:800;font-size:1.15em;margin:0 0 8px}
.age-btn{background:var(--green);color:#fff;border:none;padding:12px 26px;font-size:1em;font-weight:700;cursor:pointer;margin-top:8px}
.age-no{display:inline-block;margin-top:8px;color:var(--sub);font-size:.88em}

@media (max-width:640px){
  ol.rank a{grid-template-columns:40px 80px minmax(0,1fr);gap:10px}
  ol.rank img{width:80px}
  ol.rank .no{font-size:1.3em}
  .issue-head .ym .m{font-size:2.6em}
  .work-head{grid-template-columns:1fr}
  .tagline{display:none}
  .pn{grid-template-columns:1fr}
  .covers{grid-template-columns:repeat(2,1fr)}
}