/* 表紙カード（2026-11-09）。色・書体・角・形は本人のページの設定から（--cb 地 / --cf 文字 / --cs 薄い文字 / --ca 差し色 / --cc カード / --cl 線 / --cff 書体 / --crr 角） */
.cv{position:relative;display:block;aspect-ratio:4/5;max-width:100%;border-radius:var(--crr);overflow:hidden;isolation:isolate;background:var(--cb);color:var(--cf);font-family:var(--cff);text-decoration:none;
  box-shadow:0 1px 0 #ffffff80 inset,0 0 0 1px #1b22380f,0 22px 44px -22px #1b223866;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cv:active{transform:scale(.985)}
.cv:focus-visible{outline:3px solid #6E8BFF;outline-offset:3px}
.cv-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:20px 20px 18px;gap:14px}
.cv-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px}
.cv-g{font:500 11px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.14em;color:var(--cs)}
.cv-lb{font:700 11px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.08em;padding:6px 10px;border-radius:99px;background:var(--ca);color:var(--co)}
.cv-hero{flex:1;min-height:0;position:relative}
.cv-sp{flex:1}
.cv-foot{display:flex;align-items:flex-end;gap:12px;min-width:0}
.cv-ic{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--cb),0 0 0 3px var(--cl)}
.cv-id{display:flex;flex-direction:column;min-width:0}
.cv-name{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-one{font-size:13px;line-height:1.5;color:var(--cs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Zen Kaku Gothic New',sans-serif}
.cv-sns{display:flex;gap:12px;color:var(--cs);margin-top:-4px}
.cv-s svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.cv-from{position:absolute;left:0;bottom:-2px;display:inline-flex;align-items:center;gap:6px;font:500 11px/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.1em;color:var(--cs)}
.cv-from svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}

/* 写真が主役：基本（カード） */
.cv-imgs{display:grid;gap:6px;padding-bottom:20px}
.cv-ph{display:block;overflow:hidden;border-radius:calc(var(--crr) * .55);background:var(--cl)}
.cv-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cv-imgs.n1{grid-template:1fr/1fr}
.cv-imgs.n2{grid-template:1fr/1fr 1fr}
.cv-imgs.n3,.cv-imgs.n4{grid-template:1fr 1fr/1.4fr 1fr}
.cv-imgs.n3 .p0{grid-row:1/3}
.cv-imgs.n4{grid-template:1fr 1fr/1fr 1fr}

/* ひとことが主役 */
.cv-text{display:flex;align-items:center}
.cv-text p{margin:0;font-size:clamp(24px,7.4vw,32px);line-height:1.5;font-weight:700;letter-spacing:.03em;text-wrap:balance}
.cv-text p::before{content:"“";display:block;font-size:2.2em;line-height:.6;color:var(--ca);font-family:'Shippori Mincho',serif;margin-bottom:6px}

/* 音楽が主役：ゆっくり回るレコード */
.cv-music{display:flex;flex-direction:column;justify-content:center;gap:16px;padding-bottom:22px}
.cv-disc{width:52%;aspect-ratio:1;border-radius:50%;position:relative;align-self:flex-start;
  background:radial-gradient(circle,var(--ca) 0 17%,var(--cb) 17.5% 19%,transparent 19.5%),repeating-radial-gradient(circle,#0000 0 3px,#ffffff10 3px 4px),radial-gradient(circle,#1a1a1f 0 70%,#0b0b0e 71%);
  box-shadow:0 18px 30px -14px #00000080;animation:cv-spin 9s linear infinite}
.cv-disc i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 12%,#ffffff22 16%,transparent 22% 60%,#ffffff14 64%,transparent 70%)}
.cv-music p{margin:0;font-size:22px;line-height:1.5;font-weight:700}
@keyframes cv-spin{to{transform:rotate(360deg)}}

/* 予定が主役 */
.cv-event{display:flex;flex-direction:column;justify-content:center;padding-bottom:22px}
.cv-date{margin:0;font-size:76px;line-height:1;font-weight:800;color:var(--ca);letter-spacing:-.02em;font-family:'Zen Kaku Gothic New',sans-serif}
.cv-date span{opacity:.5}
.cv-date small{font-size:16px;margin-left:10px;color:var(--cs);font-weight:500;letter-spacing:.1em}
.cv-et{margin:14px 0 0;font-size:21px;line-height:1.45;font-weight:700}
.cv-ep{margin:4px 0 0;font-size:13px;color:var(--cs);font-family:'Zen Kaku Gothic New',sans-serif}

.cv-none{display:grid;place-items:center}
.cv-none span{font-size:120px;font-weight:700;color:var(--ca);opacity:.85}

/* ── 形ごとの違い ── */
/* すっきり：余白多め、写真は1枚を小さく、名前は細く広く */
.L-minimal .cv-in{padding:26px 26px 22px}
.L-minimal .cv-imgs.n1{width:64%;margin:0 auto;aspect-ratio:1;flex:none;align-self:center;margin-top:auto;margin-bottom:auto;padding:0}
.L-minimal .cv-ph{border-radius:2px}
.L-minimal .cv-name{font-weight:500;letter-spacing:.18em;font-size:22px}
.L-minimal .cv-text p{font-weight:500;font-size:clamp(20px,6vw,26px)}
.L-minimal .cv-text p::before{display:none}

/* 全面写真：写真が地になり、文字は白 */
.cv-bg{position:absolute;inset:0;z-index:-1}
.cv-bg img{width:100%;height:100%;object-fit:cover;display:block}
.cv.has-bg .cv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000033,#0000 30%,#0000 50%,#000000b3)}
.cv.has-bg{color:#fff}
.cv.has-bg .cv-g,.cv.has-bg .cv-one,.cv.has-bg .cv-sns,.cv.has-bg .cv-from{color:#ffffffd0}
.L-full .cv-name{font-size:32px}

/* ポップ：ポラロイド風に少し傾けて重ねる、名前に蛍光ペン */
.L-pop .cv-imgs{display:block;padding:0}
.L-pop .cv-ph{position:absolute;width:58%;aspect-ratio:4/5;height:auto;border-radius:4px;border:7px solid #fff;border-bottom-width:22px;box-shadow:0 10px 24px -10px #00000066}
.L-pop .cv-ph.p0{left:3%;top:4%;transform:rotate(-6deg);z-index:2}
.L-pop .cv-ph.p1{right:2%;top:0;transform:rotate(5deg);z-index:1}
.L-pop .cv-ph.p2{left:30%;top:34%;transform:rotate(-1deg);z-index:3}
.L-pop .cv-imgs.n1 .p0{left:18%;width:62%}
.L-pop .cv-imgs.n2 .p1{top:22%}
.L-pop .cv-from{display:none}
.L-pop .cv-name{display:inline;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--ca) 45%,transparent) 58%);padding:0 2px}
.L-pop .cv-text p{font-size:clamp(26px,8vw,34px)}

/* 近未来：細い格子と差し色の光 */
.L-neo{background:radial-gradient(80% 50% at 80% 0%,color-mix(in srgb,var(--ca) 22%,transparent),transparent 70%),linear-gradient(var(--cb),var(--cb))}
.L-neo::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(var(--cl) 1px,transparent 1px),linear-gradient(90deg,var(--cl) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.L-neo .cv-ph{border-radius:8px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ca) 60%,transparent),0 0 22px -6px var(--ca)}
.L-neo .cv-name{letter-spacing:.08em}
.L-neo .cv-date{text-shadow:0 0 24px color-mix(in srgb,var(--ca) 70%,transparent)}
.L-neo .cv-g{color:var(--ca)}

@media (prefers-reduced-motion:reduce){.cv-disc{animation:none}.cv{transition:none}}
.cv.has-bg.H-text .cv-bg::after,.cv.has-bg.H-event .cv-bg::after,.cv.has-bg.H-music .cv-bg::after{background:linear-gradient(180deg,#00000040,#00000073 40%,#000000b8)}

/* 小さい表紙（探す画面の2〜3列）。中身の種類で高さを変え、同じ形の格子にしない */
.cv.sm{--crr:18px;border-radius:min(var(--crr),18px);box-shadow:0 0 0 1px #1b22380f,0 12px 26px -16px #1b223866}
.cv.sm.H-works,.cv.sm.H-posts{aspect-ratio:3/4}
.cv.sm.H-text{aspect-ratio:1/1.05}
.cv.sm.H-event{aspect-ratio:1/1.12}
.cv.sm.H-music{aspect-ratio:4/5}
.cv.sm.fullimg,.cv.sm.L-full.has-bg{aspect-ratio:2/3}
.cv.sm.H-none{aspect-ratio:1/1}
.cv.sm .cv-in{padding:12px 12px 11px;gap:8px}
.cv.sm .cv-top{min-height:16px}
.cv.sm .cv-g{font-size:9px;letter-spacing:.1em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cv.sm .cv-lb{font-size:9px;padding:4px 7px}
.cv.sm .cv-ic{width:24px;height:24px;box-shadow:0 0 0 1.5px var(--cb),0 0 0 2px var(--cl)}
.cv.sm .cv-foot{gap:7px;align-items:center}
.cv.sm .cv-name{font-size:15px}
.cv.sm .cv-one{font-size:10.5px}
.cv.sm .cv-sns{gap:8px;margin-top:-2px}
.cv.sm .cv-s svg{width:13px;height:13px}
.cv.sm .cv-from{display:none}
.cv.sm .cv-imgs{gap:4px;padding:0}
.cv.sm .cv-ph{border-radius:8px}
.cv.sm .cv-text p{font-size:16px;line-height:1.55}
.cv.sm .cv-text p::before{font-size:1.8em;margin-bottom:2px}
.cv.sm .cv-music{gap:10px;padding:0}
.cv.sm .cv-disc{width:62%}
.cv.sm .cv-music p{font-size:14px}
.cv.sm .cv-event{padding:0}
.cv.sm .cv-date{font-size:40px}
.cv.sm .cv-date small{font-size:11px;margin-left:5px}
.cv.sm .cv-et{font-size:14px;margin-top:8px}
.cv.sm .cv-ep{font-size:10.5px}
.cv.sm .cv-none span{font-size:64px}
.cv.sm.L-minimal .cv-in{padding:14px}
.cv.sm.L-minimal .cv-name{font-size:14px;letter-spacing:.14em}
.cv.sm.L-minimal .cv-text p{font-size:15px}
.cv.sm.L-full .cv-name{font-size:18px}
.cv.sm.L-pop .cv-ph{border-width:4px;border-bottom-width:12px}
.cv.sm.L-pop .cv-text p{font-size:17px}