@import url("../assets/base.css");
/* 04 仏壇の回る輪：1画面だけ。仏壇の奥の暗がりで、大きな絵が円柱に沿って回る。正面の絵の後ろに金の光背 */
:root{--lacquer:#1d0909;--lacquer2:#2a0f0d;--gold:#d4a72c;--gold2:#f3d27a;--vermilion:#e8452c;--paper:#f6eedd;--paper2:#dccfb4;--pink:#ff2e88;--neon:#e8ff00;
--mincho:"Shippori Mincho B1",serif;--antique:"Zen Antique",serif;--body:"Zen Kaku Gothic New",sans-serif;
--ease:cubic-bezier(.2,.7,.2,1);
--col:clamp(112px,10vw + 16px,208px);   /* 左右の列の幅。左に項目名の札、右に縦書きの名前と SNS。絵はこの2列のあいだにだけ出す */
--edge:clamp(28px,5svh,56px);           /* 上下の端からの距離 */
--name-fs:min(96px,calc(var(--col) * .56));
--tag-fs:clamp(24px,2.2vw,34px)}
html,body{height:100%}
body{background:var(--lacquer);color:var(--paper);font:400 16px/1.9 var(--body)}
:focus-visible{outline:3px solid var(--neon);outline-offset:4px}
/* 仏壇の外枠（金の二重線） */
body::before{content:"";position:fixed;inset:6px;z-index:60;pointer-events:none;border:1px solid var(--gold);box-shadow:inset 0 0 0 5px var(--lacquer),inset 0 0 0 6px var(--gold)}

/* 右の列：縦書きの名前と、その下に落款の印（署名に印を押す形） */
.mast__name{position:fixed;z-index:20;right:calc((var(--col) - var(--name-fs)) / 2);top:var(--edge);margin:0;writing-mode:vertical-rl;font:400 var(--name-fs)/1 var(--antique);color:var(--gold2);letter-spacing:.06em}
.mast__seal{position:fixed;z-index:20;right:calc((var(--col) - 52px) / 2);top:calc(var(--edge) + var(--name-fs) * 3.18 + 20px);margin:0;display:grid;place-items:center;width:52px;aspect-ratio:1;border:3px solid var(--vermilion);border-radius:8px;color:var(--vermilion);font:400 30px/1 var(--antique);rotate:-8deg}
/* SNS（公式のロゴ。暗い地なので白）は右の列の下、比較へ戻るは左の列の下 */
.sns{--sns-mono:#fff;--sns-pixiv:#fff;display:flex;gap:8px}
.sns__link{border:1px solid var(--gold);transition:border-color .2s,box-shadow .2s}
.sns__link:hover{border-color:var(--gold2);box-shadow:inset 0 0 0 2px var(--gold2)}
.foot__sns{position:fixed;z-index:20;right:calc((var(--col) - 44px) / 2);bottom:var(--edge);flex-direction:column}
.foot__back{position:fixed;z-index:20;left:0;bottom:var(--edge);width:var(--col);margin:0;text-align:center}
.foot__back a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font:700 15px/1 var(--mincho);text-decoration:underline 1px var(--gold);text-underline-offset:6px}
.foot__back a:hover{color:var(--gold2);text-decoration-thickness:2px}

/* 舞台：ここだけでホイール・ドラッグを受ける。縦にも横にもスクロールしない。
   正面の絵は高さが画面の 80%（下は画面の下で切れる）、幅は高さの 0.96 倍か、見える幅の 60% の小さい方。
   両隣は見える幅の端で切れるように、円柱の半径を見える幅から決める */
.stage{position:fixed;inset:0;overflow:hidden;overflow:clip;touch-action:pinch-zoom;cursor:grab;-webkit-user-select:none;user-select:none;
--n:7;--step:calc(360deg / var(--n));
--top:20svh;--bottom:0px;
--sw:calc(100vw - 2 * var(--col));
--h:calc(100svh - var(--top) - var(--bottom));
--w:min(calc(var(--h) * .96),calc(var(--sw) * .6));
--r:calc(var(--sw) * .66);   /* 円柱の半径。両隣の絵が、見える幅の端で 3 分の 1 ほど切れる */
--yawk:.62;          /* 絵が回り込むときの向き（1 で円柱どおり。小さくするほど両隣がこちらを向いて大きく見える） */
--fade:6%;--fade-b:0%;
--head:.3;           /* 顔を置く高さ（絵の上から）。光背の中心もここ */
--halo:min(calc(var(--w) * 1.22),var(--h));
background:radial-gradient(ellipse 56% 64% at 50% 58%,var(--lacquer2),var(--lacquer) 72%)}
.stage.is-dragging,.stage.is-dragging .face{cursor:grabbing}
/* 絵の見える範囲（左右の列のあいだ）。端は暗がりに溶かして切る */
.view{position:absolute;inset:0 var(--col);overflow:hidden;overflow:clip;
-webkit-mask:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
/* 3D の輪（DeSandro の carousel と同じ組み方）。各絵は rotateY(i×360/n) translateZ(r)、輪全体を rotateY(a)。
   視点の高さを絵の下端に置き、奥の絵ほど上が下がって小さく見えるようにする（下端は揃う） */
.scene{position:absolute;left:50%;top:calc(var(--top) + var(--h) / 2);width:0;height:0;perspective:calc(var(--r) * 3);perspective-origin:0 calc(var(--h) / 2);transform-style:preserve-3d}
.ring{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1)) rotateY(var(--a,0deg))}

/* 光背（04 の hero__halo と同じ金の輪と放射）。輪の後ろの平面に置き、正面の絵の顔の後ろに来る位置に固定する。
   絵の背景の層は上の方が透けるので、光背は正面と両隣の絵の頭の後ろに見え、絵の境目を光で分ける。
   外周の蛍光イエローの点は数珠。輪が回ると歯車のように少し回る（自動では回らない） */
.halo{position:absolute;left:50%;top:calc(var(--top) + var(--h) * var(--head));width:var(--halo);aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.halo::before{content:"";position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle,transparent 0 38%,var(--gold) 38% 39.5%,transparent 39.5% 44%,var(--gold2) 44% 45%,transparent 45%),
repeating-conic-gradient(from 0deg,var(--gold) 0 1.5deg,transparent 1.5deg 7.5deg);
-webkit-mask:radial-gradient(circle,transparent 0 36%,#000 36% 69%,transparent 69.5%);mask:radial-gradient(circle,transparent 0 36%,#000 36% 69%,transparent 69.5%)}
.halo::after{content:"";position:absolute;inset:-1%;border:max(6px,calc(var(--w) * .014)) dotted var(--neon);border-radius:50%}

/* 絵：背景の層＋キャラの層。枠は付けず、左右と上は暗がりに溶かす（光背が上から透けて見える）。
   φ は正面からの角度。--lit（正面 1、両隣 0）で明るさ、--e（正面に来た度合い）で寄りを決める。奥の列は消す */
.face{--phi:calc(var(--i) * var(--step) + var(--a,0deg));--c:cos(var(--phi));--s:sin(var(--phi));--pn:atan2(var(--s),var(--c));
--lit:clamp(0,(var(--c) - .62) / .38,1);--e0:clamp(0,(var(--c) - .8) * 5,1);--e:calc(var(--e0) * var(--e0) * (3 - 2 * var(--e0)));
position:absolute;left:calc(var(--w) / -2);top:calc(var(--h) / -2);width:var(--w);height:var(--h);
transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--r)) rotateY(calc(var(--pn) * (var(--yawk) - 1)));
filter:brightness(calc(.36 + .64 * var(--lit)));opacity:clamp(0,(var(--c) + .15) * 5,1);
-webkit-mask:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(transparent,#000 6%,#000 calc(100% - var(--fade-b)),transparent);-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(transparent,#000 6%,#000 calc(100% - var(--fade-b)),transparent);mask-composite:intersect;
pointer-events:none}
.face.is-front,.face.is-side{pointer-events:auto}
.face.is-front{cursor:pointer}
.face:nth-child(1){--i:0}.face:nth-child(2){--i:1}.face:nth-child(3){--i:2}.face:nth-child(4){--i:3}.face:nth-child(5){--i:4}.face:nth-child(6){--i:5}.face:nth-child(7){--i:6}
/* 背景の層：上の方を消して光背を見せる。回るときはキャラと逆へずれて奥行きを出す。
   箱は絵そのものの縦横比（--ar。ring.js が実寸から入れる）にし、輪の絵の箱を覆う大きさにする（ページの右の絵へ同じ形のまま滑らせるため） */
.face__bg{position:absolute;left:50%;top:50%;width:max(calc(var(--w) * 1.08),calc(var(--h) * 1.08 * var(--ar,.6667)));height:auto;max-width:none;translate:-50% -50%;transform:translateX(calc(var(--s) * -16px));
-webkit-mask:radial-gradient(ellipse 64% 58% at 50% 74%,#000 52%,transparent 100%);mask:radial-gradient(ellipse 64% 58% at 50% 74%,#000 52%,transparent 100%)}
/* キャラの層：横と奥では引き（全身）、正面に来ると顔へ寄る（顔の位置 --fx/--fy を中心に拡大し、絵の上から --head の高さに置く） */
.face__chara{--k:calc(var(--e) * var(--pull,1));--ty:calc((var(--head) - .08) / .92 * 100%);position:absolute;left:50%;bottom:0;width:auto;height:92%;max-width:none;
transform-origin:var(--fx,50%) var(--fy,30%);
transform:translate(calc(-50% + (50% - var(--fx,50%)) * var(--k) + var(--s) * 24px),calc((var(--ty) - var(--fy,30%)) * var(--k))) scale(calc(1 + (var(--zoom,2) - 1) * var(--e)))}
.face--full{--zoom:1;--pull:0}
.face--bust{--zoom:1.4}

/* 項目名の札（千社札）。左の列に1枚だけ見せる。輪が回ると、札も裏返って次の項目の札に替わる（角度は輪と連動）。
   紙は生成り、字は黒漆、屋根はピンクと金。字は PC 24〜34px、スマホ 20px */
.tags{position:absolute;z-index:2;left:0;top:calc(var(--edge) + 18px);width:var(--col)}
.tags__list{display:grid;justify-items:center;align-items:start}
.tags__list>li{grid-area:1/1}
.tags__list>li:nth-child(1) .tag{--i:0}.tags__list>li:nth-child(2) .tag{--i:1}.tags__list>li:nth-child(3) .tag{--i:2}.tags__list>li:nth-child(4) .tag{--i:3}
.tags__list>li:nth-child(5) .tag{--i:4}.tags__list>li:nth-child(6) .tag{--i:5}.tags__list>li:nth-child(7) .tag{--i:6}
.tag{--phi:calc(var(--i) * var(--step) + var(--a,0deg));--c:cos(var(--phi));--pn:atan2(sin(var(--phi)),var(--c));
position:relative;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:.45em;min-height:6.6em;padding:.85em .5em;
writing-mode:vertical-rl;text-orientation:upright;word-break:keep-all;
background:var(--paper);color:var(--lacquer);font:800 var(--tag-fs)/1.25 var(--mincho);letter-spacing:.1em;text-decoration:none;
box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--lacquer);
transform:perspective(900px) rotateY(calc(var(--pn) * var(--n) / 2));-webkit-backface-visibility:hidden;backface-visibility:hidden;
opacity:clamp(0,(var(--c) - .85) * 100,1);pointer-events:none;transition:box-shadow .2s}
.tag.is-front{pointer-events:auto}
.tag:hover,.stage:has(.face.is-front:hover) .tag.is-front{box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 7px var(--pink)}
.tag:focus-visible{outline-offset:6px}
/* 屋根：04 のジャンルの札と同じ形 */
.tag::before,.tag::after{content:"";position:absolute;bottom:100%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.tag::before{left:-3px;right:-3px;height:18px;background:var(--gold)}
.tag::after{left:3px;right:3px;height:13px;background:var(--pink)}
/* 新：札の中、名前の後ろに貼った丸いシール */
.tag__new{display:grid;place-items:center;flex:none;width:1.7em;height:1.7em;border:2px solid var(--lacquer);border-radius:50%;background:var(--neon);color:var(--lacquer);font:400 .72em/1 var(--antique);letter-spacing:0;rotate:12deg}
/* ---- 項目のページ（yejji.net/about の形）。7ページとも同じ形 ----
   左に黒漆の欄（右端が斜めで、上が狭く下が広い。縁に金の細い線）。欄の中だけがスクロールする。
   右にその項目の大きな絵を、欄の下に敷く（絵は輪の絵の複製。開くときは輪の正面の絵がここまで滑ってくる）。
   動きの時間と曲線は ring.js。ここは止まった形と、輪の画面がページの下に沈んだ形（.is-paged）だけを決める */
.page{--panel-w:64vw;   /* 欄の幅（斜めの下の端まで） */
--ct:.9;               /* 斜めの上の端の位置（欄の幅に対する割合）。ring.js が文字を縁に沿ってずらすときにも読む */
--art-x:56%;           /* 右の絵の左の端（絵の幅は 44%） */
--art-h:100svh;
--panel-out:translateX(calc(var(--panel-w) * -1));   /* 欄が引いたときの位置（ring.js が読む） */
--text:clamp(18px,calc(.5vw + 12px),20px);
position:fixed;inset:0;z-index:40;display:none;font-size:var(--text);line-break:strict;text-wrap:pretty}
.page.is-open,html:not(.js) .page:target{display:block}

/* 右の絵：画面全体の層を clip-path で右側だけ見せる（開くときは、この切り取りが輪の正面の絵の四角から広がる） */
.page__art{position:absolute;inset:0;overflow:hidden;overflow:clip;clip-path:inset(0 0 0 var(--art-x))}
/* 絵の奥：黒漆の暗がりと、うっすら残した光背（輪の光背と同じ金の輪と放射。数珠は付けない） */
.art__back{position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 80% 70%,var(--lacquer2),var(--lacquer) 80%)}
.art__back::after{content:"";position:absolute;left:calc(var(--art-x) + (100% - var(--art-x)) * .55);top:34%;width:min(calc((100% - var(--art-x)) * 1.15),84svh);aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:.2;
background:radial-gradient(circle,transparent 0 38%,var(--gold) 38% 39.5%,transparent 39.5% 44%,var(--gold2) 44% 45%,transparent 45%),
repeating-conic-gradient(from 0deg,var(--gold) 0 1.5deg,transparent 1.5deg 7.5deg);
-webkit-mask:radial-gradient(circle,transparent 0 36%,#000 36% 69%,transparent 69.5%);mask:radial-gradient(circle,transparent 0 36%,#000 36% 69%,transparent 69.5%)}
/* 1枚の絵（背景の層＋キャラの層）。略歴では重なって替わる（ふだんは1枚目だけ見せ、替えるのは ring.js） */
.art__slide{position:absolute;top:0;right:0;left:var(--art-x);height:var(--art-h);transform-origin:20% 50%}
.art__slide+.art__slide{opacity:0}
/* 背景の層：輪の絵と同じく、絵そのものの縦横比の箱にして上の方を消す（輪から滑ってくるとき、同じ形のまま大きさだけ変わる） */
.art__bg{position:absolute;left:55%;top:50%;width:max(100%,calc(var(--art-h) * var(--ar,.6667)));height:auto;max-width:none;translate:-50% -50%;transform-origin:0 0;
-webkit-mask:radial-gradient(ellipse 64% 58% at 50% 74%,#000 52%,transparent 100%);mask:radial-gradient(ellipse 64% 58% at 50% 74%,#000 52%,transparent 100%)}
/* キャラの層：引き（全身）。見える範囲（斜めの縁から右の端まで）の真ん中に立たせる。顔まわりだけの絵（略歴）は小さめ */
.art__chara{position:absolute;left:55%;bottom:0;width:auto;height:90%;max-width:none;translate:-50% 0;transform-origin:0 0}
[data-cut="bust"] .art__chara{height:58%}

/* 左の欄：.page__slide ごと左から差し込む。.page__panel は欄の形（金の地を斜めに切り、2px 内側を黒漆で塗る＝縁の金の線） */
.page__slide{position:absolute;inset:0}
.page__panel{position:absolute;top:0;bottom:0;left:0;width:var(--panel-w);background:var(--gold);clip-path:polygon(0 0,calc(var(--ct) * 100%) 0,100% 100%,0 100%)}
.page__panel::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 24% 20%,var(--lacquer2),var(--lacquer) 80%);clip-path:polygon(0 0,calc(var(--ct) * 100% - 2px) 0,calc(100% - 2px) 100%,0 100%)}
/* スクロールするのはここだけ。画面の幅いっぱいに置き、右の絵の上でホイールを回しても文章が進む。スクロールバーは出さない。
   文字は欄の中だけに並べ、ring.js が各ブロックを斜めの縁に沿って左へずらす（画面の下の端で 0、上の端で斜めの横の差の分） */
.page__scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.page__scroll::-webkit-scrollbar{display:none}
.page__sheet{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:clamp(28px,3vw,48px);
width:var(--panel-w);min-height:100%;padding:clamp(72px,11vh,104px) 44px 96px calc(48px + (1 - var(--ct)) * var(--panel-w))}
.page__title{margin:0;writing-mode:vertical-rl;text-orientation:upright;font:400 clamp(40px,min(5.4vw,7.4vh),80px)/1 var(--antique);color:var(--gold2);letter-spacing:.08em}
/* マウスで開いたときは題に枠を出さず、キーボードで開いたときだけ出す（ring.js が html に .kbd を付け外しする） */
.page__title:focus{outline:none}
.kbd .page__title:focus{outline:3px solid var(--neon);outline-offset:8px}
.page__body{min-width:0}
/* 閉じる・絵の切り替えを止める：欄の右上（斜めの縁の内側）。絵の上には置かない */
.page__close,.page__pause{position:absolute;z-index:1;top:20px;left:calc(var(--ct) * var(--panel-w) - 76px);display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--gold);background:var(--lacquer);transition:background-color .2s}
.page__pause{left:calc(var(--ct) * var(--panel-w) - 136px)}
.page__close::before,.page__close::after{content:"";grid-area:1/1;width:24px;height:2px;background:var(--gold2);rotate:45deg}
.page__close::after{rotate:-45deg}
/* 止める（縦の2本）と、止めたあとの再開（右向きの三角） */
.page__pause::before{content:"";width:14px;height:18px;background:linear-gradient(90deg,var(--gold2) 0 5px,transparent 5px 9px,var(--gold2) 9px)}
.page__pause[aria-pressed="true"]::before{width:16px;background:var(--gold2);clip-path:polygon(0 0,100% 50%,0 100%)}
.page__close:hover,.page__pause:hover{background:var(--gold)}
.page__close:hover::before,.page__close:hover::after{background:var(--lacquer)}
.page__pause:hover::before{background:linear-gradient(90deg,var(--lacquer) 0 5px,transparent 5px 9px,var(--lacquer) 9px)}
.page__pause[aria-pressed="true"]:hover::before{background:var(--lacquer)}
html:not(.js) .page__pause{display:none}

/* 作品のページ：共通の作品カードを入れ、その節のジャンルだけ見せる */
.page--works [data-for]{display:none}
.page--works[data-show="mv"] [data-for="mv"],.page--works[data-show="chara"] [data-for="chara"],.page--works[data-show="kv"] [data-for="kv"],
.page--works[data-show="goods"] [data-for="goods"],.page--works[data-show="hobby"] [data-for="hobby"]{display:inline}
.page--works[data-show="mv"] .card:not([data-genre="mv"]),.page--works[data-show="chara"] .card:not([data-genre="chara"]),
.page--works[data-show="kv"] .card:not([data-genre="kv"]),.page--works[data-show="goods"] .card:not([data-genre="goods"]),
.page--works[data-show="hobby"] .card:not([data-kind="personal"]){display:none}
/* 作品カード：欄の幅に 2〜3 列 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:48px 32px}
.card__link{position:relative;text-align:center}
.card__frame{aspect-ratio:3/4;padding:8px;border:1px solid var(--gold);background:var(--lacquer2);border-radius:999px 999px 4px 4px;transition:border-color .2s}
.card__img{border-radius:999px 999px 2px 2px}
.card__link:hover .card__frame{border-color:var(--gold2);box-shadow:inset 0 0 0 1px var(--gold2)}
.card__tag{display:inline-block;vertical-align:middle;margin-top:16px;padding:0 12px;border:1px solid var(--gold);color:var(--gold2);font:700 max(16px,calc(var(--text) * .85))/1.8 var(--mincho)}
/* 新：絵の枠には貼らず、ジャンルの札の横に並べる */
.card__new{display:inline-grid;vertical-align:middle;place-items:center;width:40px;height:40px;margin:16px 0 0 12px;border:2px solid var(--lacquer);border-radius:50%;background:var(--neon);color:var(--lacquer);box-shadow:0 0 0 2px var(--neon);font:400 20px/1 var(--antique);rotate:12deg}
.card__title{display:block;margin-top:8px;font:700 calc(var(--text) * 1.12)/1.6 var(--mincho)}
.card__meta{display:block;font-size:max(16px,calc(var(--text) * .85));color:var(--paper2)}
/* 略歴：名前・紹介文・年表（年は朱色） */
.about__name{margin:0 0 20px;font:400 calc(var(--text) * 2.6)/1.1 var(--antique);color:var(--gold2)}
.about__text{max-width:34em;margin:0 0 36px;font:500 var(--text)/2 var(--mincho)}
.about__history{margin:0;display:grid}
.about__history div{display:grid;grid-template-columns:5em minmax(0,1fr);padding:12px 0;border-bottom:1px dotted var(--gold)}
.about__history dt{font:400 var(--text)/1.6 var(--antique);color:var(--vermilion)}
.about__history dd{margin:0;font:500 var(--text)/1.6 var(--mincho)}
/* ご依頼 */
.contact__text{margin:0 0 24px;font:700 var(--text)/1.9 var(--mincho)}
.contact__mail{margin:0 0 28px}
.contact__mail a{font:700 clamp(22px,2.6vw,40px)/1.4 var(--mincho);color:var(--gold2);text-decoration:underline 1px var(--gold);text-underline-offset:8px}
.contact__mail a:hover{text-decoration-thickness:3px}

/* ページが開いているあいだの輪の画面：ほかの絵は暗く消え、光背は外へ広がって消える。札・名前・SNS も消す。
   正面の絵は、ページの右の絵が代わりに出ているあいだ隠す（.is-lifted） */
.is-paged .scene{opacity:0}
.is-paged .halo{scale:1.5;opacity:0}
.is-paged .mast__name,.is-paged .mast__seal,.is-paged .tags,.is-paged .foot__sns,.is-paged .foot__back{opacity:0}
.face.is-lifted>img{opacity:0}

/* スマホと縦長の画面：左右の列をなくし、絵は画面の幅いっぱいに回す（両隣は画面の端で切れる）。
   上の帯に札（左）と名前（右）、下の帯に SNS（左）と比較へ戻る（右）。絵はそのあいだ */
@media (max-width:600px),(max-aspect-ratio:4/5){
:root{--col:0px;--edge:16px;--name-fs:44px;--tag-fs:20px}
.stage{--top:196px;--bottom:76px;--w:min(calc(var(--h) * .8),calc(var(--sw) * .72));--fade:8%;--fade-b:12%;--halo:calc(var(--w) * 1.28)}
.view{-webkit-mask:none;mask:none}
.tags{left:16px;top:30px;width:auto}
.tag{min-height:0;max-height:150px;padding:.6em .45em}
.mast__name{right:16px;top:20px}
.mast__seal{display:none}
.foot__sns{flex-direction:row;left:12px;right:auto;bottom:16px}
.foot__back{left:auto;right:16px;width:auto;bottom:16px}
}
/* ページのスマホ（幅 760px 以下）：斜めの欄をやめて全幅にし、絵は上の帯（下の端が斜め）、その下に文章。
   文章の紙（.page__sheet）は帯の下から始まり、スクロールすると帯の上へかぶさっていく。欄は下から差し込む。帯の絵は替えない */
@media (max-width:760px){
.page{--panel-w:100vw;--ct:1;--art-x:0%;--band:42svh;--art-h:var(--band);--panel-out:translateY(100%);--text:17px}
.page__art{clip-path:inset(0 0 calc(100% - var(--band)) 0)}
.art__back::after{left:50%;top:calc(var(--band) * .4);width:calc(var(--band) * 1.1)}
.art__slide{left:0}
.art__bg{left:50%}
/* 帯は低いので、顔（--fx/--fy）を帯の上から 30% に置き、腰から上を見せる */
.art__chara{left:50%;top:30%;bottom:auto;height:150%;translate:calc(var(--fx,50%) * -1) calc(var(--fy,30%) * -1)}
[data-cut="bust"] .art__chara{top:52%;height:92%}
.page__panel{display:none}
.page__sheet{position:relative;isolation:isolate;display:block;width:auto;min-height:calc(100% - var(--band) + 40px);margin-top:calc(var(--band) - 40px);padding:68px 24px 64px;
background:var(--gold);clip-path:polygon(0 0,100% 40px,100% 100%,0 100%)}
.page__sheet::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lacquer);clip-path:polygon(0 2px,100% 42px,100% 100%,0 100%)}
.page__title{margin-bottom:24px;padding-right:64px;writing-mode:horizontal-tb;font-size:clamp(28px,8vw,36px);letter-spacing:.04em}
.page__title>span{white-space:nowrap}
/* 閉じる：帯の下の端のすぐ下（いつも文章の紙の上にあり、絵には重ならない） */
.page__close{top:calc(var(--band) + 12px);left:auto;right:16px}
.page__pause{display:none}
.grid{gap:40px}
.about__name{font-size:40px}
}
@media (prefers-reduced-motion:reduce){.page__pause{display:none}}