@import url("../assets/base.css");
/* 08 ポップ雑誌：机（カッティングマット）の上に置いた雑誌を、表紙から裏表紙までめくって読む。
   雑誌の中は作品と紹介だけ。SNS は付録のシールのように、本の外（机の上）に貼る。
   JS がないとき（html に is-book が付かないとき）は、ページが上から順に縦に並ぶ。
   ページの中の大きさは、ページの幅（cqw）に合わせて決める。印刷物のように、ページが小さくなれば中身も小さくなる */
:root{
  --pink:#ff2e88;--y:#e8ff00;--k:#111;--w:#fff;--paper:#fffdf6;--mute:#5a5a5a;--ph-grey:#d4d4d4;
  --mat:#1d2a31;--mat-line:rgba(255,255,255,.05);--mat-line2:rgba(255,255,255,.11);
  --edge-a:#fbf8ef;--edge-b:#d8d1c2;
  --mast:"Anton",sans-serif;--head:"Kaisei Tokumin",serif;--body:"Zen Kaku Gothic New",sans-serif;
  --ease:cubic-bezier(.45,.05,.25,1);--dur:700ms;
  --pw:min(640px, calc(100vw - 32px));
}
body{color:var(--k);font:400 16px/1.8 var(--body);background:var(--mat)}
p,h1,h2,h3,dl,dd,figure,ol{margin:0}

/* 机：カッティングマットの方眼 */
.desk{display:flex;flex-direction:column;align-items:center;gap:24px;min-height:100vh;padding:24px 16px 64px;background-color:var(--mat);
  background-image:linear-gradient(var(--mat-line2) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line2) 1px,transparent 1px),
    linear-gradient(var(--mat-line) 1px,transparent 1px),linear-gradient(90deg,var(--mat-line) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center}

/* ---- JS なし：ページを縦に並べる ---- */
.book{display:grid;justify-items:center;gap:32px}
.leaf{display:contents}
.stack,.corner{display:none}
.page{position:relative;display:flex;flex-direction:column;width:var(--pw);min-height:calc(var(--pw) / .72);overflow:clip;container:page/inline-size;
  background:var(--paper);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.page__in{flex:1 0 auto}
/* ページそのもの（tabindex=-1）はリンクで移ったときのフォーカスの置き場所。操作する部品ではないので枠は出さない */
.page:focus{outline:none}
/* 縦に並べたときのピンナップは、見開きの2枚に分けず1枚の横長で見せる */
html:not(.is-book) .pinup--r{display:none}
html:not(.is-book) .pinup--l{width:min(1280px,calc(100vw - 32px));min-height:0;aspect-ratio:1.44}
html:not(.is-book) .stickers{order:-1}

/* ---- JS あり：本 ---- */
.is-book{--pw:min(calc((100svh - 64px) * .72),calc((100vw - 224px) / 2));--ph:calc(var(--pw) / .72)}
.is-book,.is-book body{height:100%;overflow:hidden}
.is-book .desk{display:block;position:fixed;inset:0;min-height:0;padding:0;overflow:clip;touch-action:pan-y}
.is-book .book{display:block;position:absolute;left:calc(50% - var(--pw));top:calc(50% - var(--ph) / 2);width:calc(var(--pw) * 2);height:var(--ph);
  transform:translateX(calc(var(--shift,0) * var(--pw) / 2));transition:transform var(--dur) var(--ease)}
.is-book .leaf{display:block;position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;
  transform:perspective(calc(var(--pw) * 4)) rotateY(0deg);transition:transform var(--dur) var(--ease) var(--delay,0ms)}
.is-book .leaf.is-turned{transform:perspective(calc(var(--pw) * 4)) rotateY(-180deg)}
.is-book .page{position:absolute;inset:0;width:auto;min-height:0;box-shadow:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.is-book .page--back{transform:rotateY(180deg)}
.is-book .page__in{flex:none;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.is-book .page,.is-book .page__in{touch-action:pan-y pinch-zoom}
/* のど（綴じ目）の陰。紙の陰影なので絵のページにも付く */
.is-book .page::after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 2.5%,transparent 8%)}
.is-book .page--back::after{background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 2.5%,transparent 8%)}
/* ピンナップは1枚の紙に続けて刷った見開きなので、のどの陰をごく薄くして絵をつなげる */
.is-book .pinup::after{background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 1.5%)}
.is-book .pinup.page--back::after{background:linear-gradient(270deg,rgba(0,0,0,.12),transparent 1.5%)}
/* めくっている紙：立ち上がるほど暗く */
.is-book .page::before{content:"";position:absolute;inset:0;z-index:31;pointer-events:none;background:#000;opacity:0}
.is-book .leaf.is-moving .page::before{animation:shade var(--dur) var(--ease) var(--delay,0ms)}
@keyframes shade{50%{opacity:.3}}
/* 下に重なった紙（端の縞と影は book.js が box-shadow で描く） */
.is-book .stack{display:block;position:absolute;top:0;z-index:0;width:50%;height:100%;background:var(--paper)}
.is-book .stack--l{left:0}
.is-book .stack--r{left:50%}
/* めくれた角：止まっているときは何も描かない（絵の上に部品を置かない）。指を角に乗せたときだけ紙の角が持ち上がり、押すと前後へ。
   読み込んだときに一度だけ、表紙の角が持ち上がって、めくれる本だと分かるようにする */
.is-book .corner{display:block;position:absolute;bottom:0;z-index:100;width:72px;height:72px;cursor:pointer}
.is-book .corner--next{right:0}
.is-book .corner--prev{left:0}
.is-book .corner::before,.is-book .corner::after{content:"";position:absolute;inset:0;transform:scale(0);transition:transform .25s var(--ease)}
.is-book .corner--next::before,.is-book .corner--next::after{transform-origin:100% 100%}
.is-book .corner--prev::before,.is-book .corner--prev::after{transform-origin:0 100%}
.is-book .corner:hover::before,.is-book .corner:hover::after{transform:scale(1)}
.is-book .corner--next::before{clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(315deg,transparent 30%,rgba(0,0,0,.28)),var(--under,var(--mat))}
.is-book .corner--next::after{clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 40%,rgba(0,0,0,.22) 50%),var(--flap,var(--paper))}
.is-book .corner--prev::before{clip-path:polygon(0 0,100% 100%,0 100%);
  background:linear-gradient(45deg,transparent 30%,rgba(0,0,0,.28)),var(--under,var(--mat))}
.is-book .corner--prev::after{clip-path:polygon(0 0,100% 0,100% 100%);
  background:linear-gradient(225deg,rgba(255,255,255,.35),transparent 40%,rgba(0,0,0,.22) 50%),var(--flap,var(--paper))}
.is-book .book.is-flipping .corner{opacity:0;pointer-events:none}
.is-book .corner--next::before,.is-book .corner--next::after{animation:peek 1.2s var(--ease) .9s 1 backwards}
@keyframes peek{40%{transform:scale(.8)}}
.no-anim,.no-anim *{transition:none!important;animation:none!important}

/* ---- 机の上：ページ送り、SNS のシール、比較に戻る付箋 ---- */
/* PC は本の左右の余白の列（幅は 112px 以上ある）の真ん中に並べる */
.pager__btn{position:fixed;z-index:200;top:50%;translate:0 -50%;display:grid;place-items:center;width:56px;height:56px;padding:0;
  border:2px solid var(--k);border-radius:50%;background:var(--y);color:var(--k);transition:background-color .15s}
.pager__btn--prev{left:max(16px,calc((50% - var(--pw)) / 2 - 28px))}
.pager__btn--next{right:max(16px,calc((50% - var(--pw)) / 2 - 28px))}
.pager__btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pager__btn:hover{background:var(--pink)}
.pager__btn[aria-disabled="true"]{opacity:.3;cursor:default;background:var(--y)}
.pager__btn:focus-visible{outline:3px solid var(--y);outline-offset:4px}

/* SNS：付録のシール。白いふちの型抜きシールを、少し傾けて机に貼る。指を乗せると角がめくれる */
.stickers ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 16px}
.stickers li:nth-child(3n+1){rotate:-6deg}
.stickers li:nth-child(3n+2){rotate:4deg}
.stickers li:nth-child(3n){rotate:-3deg}
.stickers a{position:relative;display:grid;place-items:center;min-width:48px;min-height:48px;padding:0 10px;border-radius:8px;
  background:var(--y);color:var(--k);font:400 18px/1 var(--mast);letter-spacing:.01em;text-decoration:none;
  box-shadow:0 0 0 4px var(--w),2px 6px 0 4px rgba(0,0,0,.35);transition:box-shadow .15s}
.stickers li:nth-child(3n+1) a{background:var(--k);color:var(--w);--sns-mono:#fff;--sns-pixiv:#fff}
.stickers li:nth-child(3n) a{background:var(--pink)}
.stickers a::after{content:"";position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:0 6px 0 0;
  background:linear-gradient(225deg,var(--mat) 50%,#e6e1d3 50%);transform:scale(0);transform-origin:100% 0;transition:transform .15s var(--ease)}
.stickers a:hover::after,.stickers a:focus-visible::after{transform:scale(1)}
.stickers a:hover{box-shadow:0 0 0 4px var(--w),3px 9px 0 4px rgba(0,0,0,.3)}
.stickers a:focus-visible{outline:3px solid var(--y);outline-offset:8px}

/* 比較に戻る：試作のあいだだけの付箋 */
.memo a{display:inline-flex;align-items:center;min-height:48px;padding:12px 12px 8px;background:linear-gradient(#ebe4cf 0 8px,var(--paper) 8px);
  color:var(--k);font:700 14px/1.3 var(--body);text-decoration:none;rotate:3deg;box-shadow:2px 6px 10px rgba(0,0,0,.35);transition:background-color .15s}
.memo a:hover{text-decoration:underline 2px var(--pink);text-underline-offset:3px}
.memo a:focus-visible{outline:3px solid var(--y);outline-offset:6px}

@media (min-width:821px){
  .is-book .stickers{position:fixed;z-index:150;top:32px;left:calc(50% + var(--pw));right:0}
  .is-book .stickers ul{flex-direction:column;gap:24px}
  .is-book .memo{position:fixed;z-index:150;top:32px;left:0;width:calc(50% - var(--pw));display:flex;justify-content:center}
}
/* スマホ：上の余白に SNS のシールと付箋、下の余白にページ送り。本はそのあいだ */
@media (max-width:820px){
  .is-book{--pw:calc(100vw - 32px);--ph:calc(100svh - 160px)}
  .is-book .book{top:72px}
  .is-book .stickers{position:fixed;z-index:150;top:12px;left:20px}
  .is-book .stickers ul{flex-wrap:nowrap;gap:16px}
  .is-book .memo{position:fixed;z-index:150;bottom:20px;left:50%;translate:-50% 0}
  .pager__btn{top:auto;bottom:16px;translate:none}
  .pager__btn--prev{left:16px}
  .pager__btn--next{right:16px}
}

/* ---- 誌面の共通 ---- */
.nombre{position:absolute;bottom:3.6cqw;z-index:5;padding:2px 4px;font:400 clamp(11px,2.2cqw,14px)/1 var(--mast);letter-spacing:.04em;pointer-events:none}
.page--front .nombre{right:5cqw}
.page--back .nombre{left:5cqw}
.barcode{display:block;width:clamp(56px,17cqw,104px);aspect-ratio:1.7;padding:1.2cqw 1.6cqw;background:var(--w)}
.barcode::before{content:"";display:block;height:100%;
  background:repeating-linear-gradient(90deg,var(--k) 0 2px,transparent 2px 4px,var(--k) 4px 5px,transparent 5px 8px,var(--k) 8px 11px,transparent 11px 12px,var(--k) 12px 13px,transparent 13px 16px)}
.tag{display:inline-block;padding:2px 8px;background:var(--pink);color:var(--k);font:700 clamp(11px,2cqw,13px)/1.5 var(--body);border:2px solid var(--k)}
.tag--y{background:var(--y)}
/* 大きな英字の見出し（雑誌の欄の名前） */
.toc__title,.list__title,.credit__title,.profile__title,.order__title{font:400 clamp(44px,17cqw,108px)/.85 var(--mast);letter-spacing:-.005em}

/* 表紙：顔の寄り。キャラを表紙いっぱいに置き、誌名はその頭の後ろに回す（キャラだけ手前の層）。
   カバーラインは雑誌の表紙の形として絵に重ねるが、顔の外（左の列と、あごより下）にだけ置く */
.cover{background:var(--ph-grey);--face-x:54%;--face-y:36%;--chara-h:420%}
.cover__bg{position:absolute;inset:-4%}
.cover__bg img{width:100%;height:100%;object-fit:cover}
.cover__mast{position:absolute;z-index:1;left:0;right:0;top:2.4cqw;text-align:center;
  font:400 30cqw/.86 var(--mast);letter-spacing:-.005em;color:var(--y);-webkit-text-stroke:.7cqw var(--k);paint-order:stroke fill}
.cover__chara{position:absolute;z-index:2;left:var(--face-x);top:var(--face-y);height:var(--chara-h);width:auto;max-width:none;
  translate:calc(var(--fx,50%) * -1) calc(var(--fy,30%) * -1)}
.cover__lines{position:absolute;inset:0;z-index:3;pointer-events:none}
.line{position:absolute;pointer-events:auto}
.line a{display:block;text-decoration:none;color:inherit}
.line b{display:block;font-weight:800}
.line__kick{display:inline-block;padding:2px 8px;background:var(--pink);color:var(--k);font:800 clamp(11px,2.6cqw,16px)/1.4 var(--head);border:2px solid var(--k)}
.line--a{left:4cqw;top:var(--line-a,56%)}
.line--a b{margin-top:1.2cqw;font:800 clamp(18px,6.6cqw,42px)/1.15 var(--head);color:var(--y);-webkit-text-stroke:.55cqw var(--k);paint-order:stroke fill}
.line--a a:hover b{color:var(--w)}
.line--b{right:4cqw;bottom:var(--line-b,21%)}
.line--b a{padding:1.4cqw 2.6cqw;background:var(--pink);border:2px solid var(--k);box-shadow:1cqw 1cqw 0 var(--k)}
.line--b b{font:800 clamp(18px,6.4cqw,40px)/1.1 var(--head)}
.line--b a:hover{background:var(--y)}
.line--c{left:4cqw;bottom:5cqw}
.line--c .line__kick{background:var(--y)}
.line--c b{font:400 clamp(28px,10cqw,64px)/1 var(--mast);color:var(--w);-webkit-text-stroke:.5cqw var(--k);paint-order:stroke fill;letter-spacing:.01em}
.line--c a:hover b{color:var(--y)}

/* p1-2 ピンナップ：見開き2ページを絵1枚で使う。作品そのものを見せる場所なので切らずに全体（引き）。
   文字もノンブルも置かない。顔はのど（真ん中の折り目）から外れた位置に来る */
.pinup{background:var(--ph-grey)}
.pinup__art{margin:0;height:100%}
.pinup__art img{width:100%;height:100%;object-fit:cover}
.is-book .pinup__art{position:absolute;top:0;bottom:0;width:200%;height:auto}
.is-book .pinup--l .pinup__art{left:0}
.is-book .pinup--r .pinup__art{left:-100%}

/* p3 目次：ページ番号はピンク、欄の名前に蛍光ペンの線 */
.toc .page__in{padding:9cqw 8cqw 12cqw}
.toc__list{margin-top:8cqw;padding:0;list-style:none;border-bottom:2px solid var(--k)}
.toc__list a{display:grid;grid-template-columns:18cqw 1fr;align-items:center;min-height:44px;padding:2.4cqw 0;border-top:2px solid var(--k);text-decoration:none}
.toc__no{font:400 clamp(30px,11cqw,68px)/1 var(--mast);color:var(--pink);-webkit-text-stroke:.3cqw var(--k);paint-order:stroke fill}
.toc__name{justify-self:start;padding:0 1.6cqw;font:400 clamp(22px,7.6cqw,46px)/1.15 var(--mast);letter-spacing:.01em;
  background:linear-gradient(transparent 52%,var(--y) 52%)}
.toc__list a:hover .toc__name{background:var(--k);color:var(--y)}

/* p4 作品：ひざ上の絵を3列に並べてリズムを作る。札はピンク（お仕事）と蛍光イエロー（趣味）。
   全部は1ページに入らないので、下の段を見切れさせて続きがあることを示す（ページの中でスクロール） */
.list .page__in{padding:7cqw 6cqw 10cqw}
/* 本のときは、スクロールする範囲をノンブルの上で切る（ノンブルが作品に重ならないように。切れた段が続きの合図になる） */
.is-book .list .page__in{height:calc(100% - 10cqw);padding-bottom:4cqw}
.list__title{font-size:clamp(40px,14cqw,88px)}
.list__filters{display:grid;gap:2.4cqw;margin:4cqw 0 5cqw}
.list__kind{display:flex;justify-self:start;border:2px solid var(--k);background:var(--w)}
.list__kind button{min-height:44px;padding:0 4cqw;border:0;background:transparent;font:900 clamp(14px,3cqw,18px)/1 var(--body);transition:background-color .15s}
.list__kind button+button{border-left:2px solid var(--k)}
.list__kind button:hover{background:var(--y)}
.list__genre{display:flex;flex-wrap:wrap;gap:1.4cqw}
.list__genre button{min-height:44px;padding:0 2.8cqw;border:2px solid var(--k);border-radius:999px;background:var(--w);font:700 clamp(12px,2.3cqw,14px)/1.2 var(--body);transition:background-color .15s}
.list__genre button:hover{background:var(--y)}
.list [aria-pressed="true"],.list [aria-pressed="true"]:hover{background:var(--k);color:var(--y)}
.list__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5cqw 3cqw}
.card__link{position:relative;display:grid;align-content:start;justify-items:start;color:inherit}
.card__frame{justify-self:stretch;aspect-ratio:3/4;border:2px solid var(--k);background:var(--ph-grey);transition:border-color .15s,box-shadow .15s}
.card__img{object-position:var(--fx,50%) var(--fy,30%)}
.card__tag{position:relative;margin:-12px 0 0 -4px;padding:1px 6px;background:var(--pink);border:2px solid var(--k);font:700 clamp(10px,1.9cqw,12px)/1.5 var(--body)}
.card[data-kind="personal"] .card__tag{background:var(--y)}
.card__title{margin-top:1.4cqw;font:700 clamp(12px,2.5cqw,16px)/1.4 var(--head)}
.card__meta{font-size:clamp(11px,1.9cqw,12px);line-height:1.5;color:var(--mute)}
.card__new{position:absolute;top:-1.6cqw;right:-1.6cqw;display:grid;place-items:center;width:clamp(36px,8.4cqw,52px);aspect-ratio:1;border-radius:50%;
  background:var(--y);border:2px solid var(--k);font:400 clamp(11px,2.2cqw,14px)/1 var(--mast);rotate:12deg}
.card__link:hover .card__frame{border-color:var(--pink);box-shadow:4px 4px 0 var(--pink)}
.card__link:hover .card__title{text-decoration:underline 2px var(--pink);text-underline-offset:3px}
.list__empty{margin-top:4cqw;font:700 clamp(13px,2.6cqw,16px)/1.6 var(--head)}

/* p5 特集の絵：引き。キャラクターデザインは全身と衣装が納品物なので、切らずにページの高さいっぱいで見せる */
.feature{background:var(--k)}
.feature__art{position:absolute;inset:0;margin:0}
.feature__art img{width:100%;height:100%;object-fit:contain}

/* p6 特集の文：小さな丸窓は寄り（全身の絵では小さくなる顔を、寄りで見せる） */
.credit .page__in{padding:9cqw 8cqw 12cqw}
.credit__title{color:var(--pink);-webkit-text-stroke:.35cqw var(--k);paint-order:stroke fill}
.credit__work{margin-top:5cqw;font:800 clamp(18px,5.6cqw,34px)/1.4 var(--head)}
.credit__tags{display:flex;flex-wrap:wrap;gap:1.6cqw;margin-top:3cqw}
.credit__list{margin-top:5cqw;border-top:2px solid var(--k)}
.credit__list div{display:grid;grid-template-columns:26% 1fr;gap:2cqw;padding:1.8cqw 0;border-bottom:1px solid rgba(17,17,17,.2)}
.credit__list dt{font:700 clamp(12px,2.3cqw,14px)/1.7 var(--body);color:var(--mute)}
.credit__list dd{font:700 clamp(13px,2.6cqw,16px)/1.7 var(--body)}
.credit__note{display:grid;grid-template-columns:30cqw 1fr;gap:5cqw;align-items:center;margin-top:6cqw}
.credit__detail{aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--k);background:var(--ph-grey);box-shadow:1.4cqw 1.4cqw 0 var(--y)}
.credit__detail img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,30%);transform:scale(4);transform-origin:var(--fx,50%) var(--fy,30%)}
.credit__text{font:400 clamp(13px,2.6cqw,16px)/1.9 var(--body)}

/* p7 インタビューの扉：自画像（胸から上）を1ページ全面に。誰が話しているかを最初に見せる。
   仮の絵は左を向いた横顔なので、細いページで切るときは顔の前（左）を残す（--px。正面の絵に替えたら var(--fx) に戻す） */
.portrait{background:var(--ph-grey)}
.portrait__art{position:absolute;inset:0;margin:0;overflow:hidden}
.portrait__art img{width:100%;height:100%;object-fit:cover;object-position:var(--px,0%) var(--fy,40%)}

/* p8 インタビュー：紹介文と年表。年を大きく */
.profile .page__in{padding:9cqw 8cqw 12cqw}
.profile__title{color:var(--y);-webkit-text-stroke:.7cqw var(--k);paint-order:stroke fill}
.profile__name{margin-top:4cqw;font:400 clamp(24px,7cqw,44px)/1 var(--mast)}
.profile__text{margin-top:3cqw;font:700 clamp(13px,2.9cqw,18px)/1.95 var(--head)}
.profile__text::first-letter{float:left;margin:.1em .12em 0 0;padding:0 .08em;font-size:2.6em;line-height:1;background:var(--y);border:2px solid var(--k)}
.profile__history{clear:both;margin-top:6cqw;border-top:3px solid var(--k)}
.profile__history div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4cqw;padding:3cqw 0;border-bottom:3px solid var(--k)}
.profile__history dt{font:400 clamp(30px,12cqw,76px)/.9 var(--mast);color:var(--pink);-webkit-text-stroke:.3cqw var(--k);paint-order:stroke fill}
.profile__history div:nth-child(even) dt{color:var(--y)}
.profile__history dd{font:700 clamp(13px,3cqw,18px)/1.7 var(--head)}

/* p9 ご依頼：ピンクの面に、窓口の名前と宛先 */
.order{background:var(--pink)}
.order .page__in{display:flex;flex-direction:column;justify-content:center;padding:10cqw 8cqw 14cqw}
.order__name{margin-top:6cqw;font:400 clamp(40px,16cqw,100px)/.95 var(--mast);color:var(--y);-webkit-text-stroke:.7cqw var(--k);paint-order:stroke fill;letter-spacing:.005em}
.order__text{margin-top:5cqw;font:700 clamp(14px,3.4cqw,21px)/1.8 var(--head)}
.order__mail{margin-top:7cqw}
.order__mail a{display:inline-flex;align-items:center;min-height:48px;padding:2.6cqw 4cqw;background:var(--y);border:3px solid var(--k);box-shadow:1.6cqw 1.6cqw 0 var(--k);
  text-decoration:none;font:400 clamp(20px,6.6cqw,42px)/1.1 var(--mast);letter-spacing:.01em;overflow-wrap:anywhere;transition:background-color .15s}
.order__mail a:hover{background:var(--w)}

/* p10 依頼に書いてほしいこと：雑誌の巻末の読者はがきの形。郵便番号の枠と切手の枠で、ひと目ではがきと分かる */
.request .page__in{display:grid;place-items:center;padding:9cqw 7cqw 12cqw}
.postcard{position:relative;width:100%;max-width:100cqw;padding:22cqw 7cqw 8cqw;background:var(--w);border:2px solid var(--k);
  box-shadow:1.6cqw 1.6cqw 0 var(--k);rotate:-1.5deg}
.postcard__zip{position:absolute;left:7cqw;top:7cqw;display:flex;gap:1.2cqw}
.postcard__zip i{width:6.4cqw;aspect-ratio:.75;border:.5cqw solid var(--pink)}
.postcard__zip i:nth-child(3){margin-right:1.6cqw}
.postcard__stamp{position:absolute;right:7cqw;top:5cqw;width:15cqw;aspect-ratio:.82;border:.5cqw dashed var(--k)}
.postcard__title{font:800 clamp(20px,6.6cqw,40px)/1.3 var(--head)}
.postcard__list{margin-top:4cqw;padding:0;list-style:none;counter-reset:q}
.postcard__list li{counter-increment:q;display:grid;grid-template-columns:8cqw 1fr;align-items:baseline;padding:2.6cqw 0 2cqw;
  border-bottom:2px dotted var(--k);font:700 clamp(13px,3cqw,18px)/1.6 var(--body)}
.postcard__list li::before{content:counter(q);font:400 clamp(18px,5.4cqw,32px)/1 var(--mast);color:var(--pink);-webkit-text-stroke:.25cqw var(--k);paint-order:stroke fill}

/* p11 裏表紙：表紙の寄りと対になる、同じキャラの引き（全身）。下の帯に奥付と、表紙に戻るボタン */
.backcover{background:var(--y)}
.back__art{position:absolute;left:0;right:0;top:0;bottom:24%;margin:0;overflow:hidden;background:var(--ph-grey)}
.back__art img{position:absolute;left:50%;bottom:0;height:94%;width:auto;max-width:none;translate:-50% 0}
.back__foot{position:absolute;left:6cqw;right:6cqw;bottom:0;height:24%;display:grid;grid-template-columns:1fr auto;align-content:center;align-items:center;gap:2cqw 4cqw}
.back__top{grid-column:1}
.back__top a{display:inline-flex;align-items:center;min-height:48px;padding:0 5cqw;background:var(--k);color:var(--y);
  font:700 clamp(14px,3cqw,18px)/1.2 var(--body);text-decoration:none;border:2px solid var(--k);transition:background-color .15s,color .15s}
.back__top a:hover{background:var(--pink);color:var(--k)}
.back__copy{grid-column:1;font:700 clamp(11px,2.2cqw,14px)/1.5 var(--body)}
.back__foot .barcode{grid-column:2;grid-row:1 / span 2}

/* 幅の狭いページ：作品は2列に */
@container page (max-width:460px){
  .list__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6cqw 4cqw}
  .card__tag{margin-top:-14px}
  .credit__note{grid-template-columns:34cqw 1fr}
}
/* スマホ：ページが縦に細長いので、表紙の顔は少し上に、カバーラインはあごより下に */
@media (max-width:820px){
  .cover{--face-x:54%;--face-y:31%;--chara-h:330%;--line-a:54%;--line-b:23%}
}