/* =====================================================================
   HAIRA v2 — Creator（クリエイタープロフィール）: design lab creator/creator.css + production additions at the end
   ===================================================================== */

/* ---------- パンくず（トップ › クリエイター一覧 › 名前） ---------- */
.pf-crumbs{padding-top:80px}
.pf-gone{padding-block:12px clamp(48px,6vw,88px)}
.pf-gone .c-empty__t{font-size:clamp(20px,1vw + 14px,24px)}

/* ---------- カバーと名前 ---------- */
.pf-cover{position:relative;height:clamp(180px,22vw,320px);margin:4px clamp(8px,1.2vw,20px) 0;border-radius:clamp(24px,3vw,44px);overflow:hidden;background:var(--grad-brand)}
.pf-cover img{width:100%;height:100%;object-fit:cover}
.pf-cover.is-empty img{display:none}
.pf-cover__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(18,14,40,.24))}

.pf-id{--lift:76px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:clamp(16px,2.4vw,32px);margin-top:calc(var(--lift) * -1)}
.pf-ava{position:relative;isolation:isolate;width:clamp(112px,11vw,164px);aspect-ratio:1;padding:5px;border-radius:50%;box-shadow:var(--sh-2)}
.pf-ava::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;background:conic-gradient(from 210deg,#00C6D9,#6B4CF6,#FF4F9E,#00C6D9)}
.pf-ava.is-open::before{animation:ring-spin 9s linear infinite}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.pf-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:5px solid var(--paper);background:var(--violet-soft)}
.pf-id__main{min-width:0;padding-top:calc(var(--lift) + 18px)}
.pf-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pf-badges .ico{width:14px;height:14px}
.pf-name{font-family:var(--f-display);font-feature-settings:normal;font-weight:var(--fw-display);font-size:clamp(30px,2.4vw + 14px,52px);line-height:1.15;letter-spacing:var(--ls-display);word-break:auto-phrase}
.pf-catch{margin-top:8px;max-width:40em;color:var(--ink-2);font-weight:500}
.pf-genres{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pf-id__side{display:flex;align-items:center;gap:10px;padding-top:calc(var(--lift) + 14px)}
.pf-sns{display:flex;gap:8px}
.pf-sns a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--line-2);color:var(--ink);transition:border-color .2s,transform .25s var(--ease-out)}
.pf-sns a:hover{border-color:var(--ink);transform:translateY(-2px)}
.pf-sns .ico{width:20px;height:20px}
.pf-follow{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line-2);font-weight:900;font-size:14px;transition:background .2s,border-color .2s,color .2s}
.pf-follow:hover{border-color:var(--pink)}
.pf-follow .ico{width:18px;height:18px;color:var(--pink);transition:transform .35s var(--ease-spring)}
.pf-follow b{font-family:var(--f-latin);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.pf-follow[aria-pressed="true"]{background:var(--pink-soft);border-color:transparent;color:var(--pink-deep)}
.pf-follow[aria-pressed="true"] .ico{fill:var(--pink);transform:scale(1.15)}

/* ---------- 実績 ---------- */
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(24px,3vw,36px);border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.pf-stats div{padding:18px 22px}
.pf-stats div+div{border-left:1px solid var(--line)}
.pf-stats dt{margin-bottom:6px;font-size:13px;font-weight:800;color:var(--ink-3)}
.pf-stats dd{margin:0;font-size:clamp(22px,1.2vw + 12px,30px);font-weight:700;line-height:1.1;white-space:nowrap}
.pf-stats small{margin-left:3px;font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--ink-3)}
.pf-stats .star{margin-right:3px;color:var(--sun);font-size:.85em}

/* ---------- 本文とサイド ---------- */
.pf-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,40px);align-items:start;margin-top:clamp(20px,2.4vw,32px)}
.pf-aside{position:sticky;top:92px;transition:top .35s var(--ease-out)}
html.hdr-hidden .pf-aside{top:24px}
.act{padding:26px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.act__label{font-size:13px;font-weight:800;color:var(--ink-3)}
.act__price{display:flex;align-items:baseline;gap:4px;margin:4px 0 18px}
.act__price .num{font-size:40px;font-weight:700;line-height:1}
.act__price small{font-size:14px;font-weight:700;color:var(--ink-3)}
.act .btn+.btn{margin-top:10px}
.act__facts{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--line-2);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.act__facts li{display:flex;align-items:center;gap:10px}
.act__facts .ico{width:18px;height:18px;color:var(--mint)}
.pf-quick{display:none}

/* 目次（スクロールしても上に残る） */
.pf-tabs{position:sticky;top:72px;z-index:20;display:flex;gap:4px;padding:6px;border-radius:var(--r-pill);background:color-mix(in srgb,#fff 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--sh-1);overflow-x:auto;scrollbar-width:none;transition:top .35s var(--ease-out)}
.pf-tabs::-webkit-scrollbar{display:none}
html.hdr-hidden .pf-tabs{top:12px}
.pf-tabs a{flex:1 0 auto;padding:10px 16px;border-radius:var(--r-pill);text-align:center;font-size:14px;font-weight:800;color:var(--ink-2);white-space:nowrap;transition:background .25s,color .25s}
.pf-tabs a:hover{color:var(--violet-deep)}
.pf-tabs a[aria-current="true"]{background:var(--ink);color:#fff}

/* ---------- セクション ---------- */
.pf-sec{margin-top:16px;padding:clamp(22px,3vw,36px);border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);scroll-margin-top:64px}
#slots{scroll-margin-top:64px}
.pf-sec__head{margin-bottom:20px}
.pf-sec__head .eyebrow{margin-bottom:8px}
.pf-sec h2{font-family:var(--f-display);font-feature-settings:var(--ff-display);font-weight:var(--fw-display);letter-spacing:var(--ls-display);font-size:clamp(22px,1.1vw + 14px,30px);line-height:1.3}
.pf-sub{font-family:var(--f-heading);margin:30px 0 12px;font-size:16px;font-weight:var(--fw-heading)}
.pf-note{margin-top:14px;font-size:13px;line-height:1.8;color:var(--ink-3)}

/* 料金 */
.price li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line-2)}
.price li:first-child{padding-top:2px}
.price h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:16.5px;font-weight:var(--fw-heading);line-height:1.5}
.price .tag{font-family:var(--f-heading);padding:3px 8px;border-radius:6px;background:var(--cyan-soft);color:var(--cyan-deep);font-size:12px;font-weight:var(--fw-heading-s);line-height:1.3}
.price__main p{margin-top:2px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.price__val{flex:none;display:flex;align-items:baseline;gap:2px}
.price__val .num{font-size:22px;font-weight:700}
.price__val small{font-size:12px;font-weight:700;color:var(--ink-3)}

/* 通話 */
.tix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tix li{position:relative;display:flex;flex-direction:column;gap:2px;padding:18px 16px 16px;border-radius:var(--r-m);background:var(--paper-3);border:1.5px solid transparent}
.tix li.is-best{background:#fff;border-color:var(--pink);box-shadow:0 10px 24px rgba(255,79,158,.16)}
.tix__best{position:absolute;top:-11px;left:12px;padding:3px 9px;border-radius:999px;background:var(--pink-deep);color:#fff;font-size:12px;font-weight:900;white-space:nowrap}
.tix__min{font-size:13px;font-weight:800;color:var(--ink-2)}
.tix__min b{margin-right:2px;font-size:28px;font-weight:700;color:var(--ink)}
.tix__price{font-size:17px;font-weight:700}
.tix__per{font-size:13px;font-weight:700;color:var(--ink-3)}
.slots{display:grid;gap:8px}
.slot{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:12px 14px 12px 12px;border-radius:var(--r-m);border:1.5px solid var(--line);transition:border-color .2s,box-shadow .2s}
.slot:hover{border-color:var(--violet);box-shadow:var(--sh-1)}
.slot__date{display:grid;place-content:center;justify-items:center;height:60px;border-radius:12px;background:var(--violet-soft);color:var(--violet-deep);line-height:1.15}
.slot__date b{font-size:17px;font-weight:700}
.slot__date span{font-size:12px;font-weight:900}
.slot.is-sun .slot__date{background:var(--pink-soft);color:var(--pink-deep)}
.slot.is-sat .slot__date{background:var(--cyan-soft);color:var(--cyan-deep)}
.slot__time b{display:block;font-size:20px;font-weight:700;line-height:1.2}
.slot__time span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.slot__price{font-size:17px;font-weight:700}
.slot__state{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);background:var(--mint-soft);color:var(--mint-deep);font-size:14px;font-weight:900;white-space:nowrap}
/* 受付終了（開始まで6時間を切った枠）：一覧に残し、押せないことを形・文字・鍵の印で見せる */
.slot.is-closed{border-style:dashed;border-color:#C9C1D9;background:var(--gray-soft)}
.slot.is-closed:hover{border-color:#C9C1D9;box-shadow:none}
.slot.is-closed .slot__date{background:#E4DFEC;color:var(--ink-2)}
.slot.is-closed .slot__time b,.slot.is-closed .slot__price{color:var(--ink-2)}
.slot__closed{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);background:#E4DFEC;color:#5C5680;font-size:14px;font-weight:900;white-space:nowrap;cursor:not-allowed}
.slot__closed .ico{width:16px;height:16px;stroke-width:2.4}
.slot-rule{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;padding:10px 12px;border-radius:12px;background:var(--gray-soft);font-size:14px;font-weight:800;line-height:1.7;color:var(--ink-2)}
.slot-rule .ico{flex:none;width:18px;height:18px;margin-top:3px;color:var(--ink-3)}

/* 納品アーカイブ（作品）：サムネイルは色と模様だけの見本（実在の動画・ゲームの画像は使わない） */
.pf-sec__n{font-family:var(--f-heading);font-size:.62em;font-weight:var(--fw-heading-s);color:var(--ink-2);margin-left:4px;white-space:nowrap}
.pf-lead{margin:-8px 0 16px;color:var(--ink-2)}
.works{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.work{position:relative;display:flex;flex-direction:column;min-width:0;padding:8px 8px 0;border-radius:var(--r-m);background:var(--paper-2);border:1px solid var(--line);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s}
.work:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.work:has(a:focus-visible){outline:3px solid var(--violet);outline-offset:3px}
.work__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:12px;isolation:isolate;color:#fff}
.work__thumb::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.28) 1.2px,transparent 1.6px);background-size:14px 14px}
.work__thumb--t0{background:linear-gradient(135deg,#FFB547 0%,#FF4F9E 100%)}
.work__thumb--t1{background:linear-gradient(135deg,#00C6D9 0%,#4A2ED6 100%)}
.work__thumb--t2{background:linear-gradient(135deg,#6B4CF6 0%,#FF4F9E 100%)}
.work__thumb--t3{background:linear-gradient(135deg,#18C08B 0%,#00A3C4 100%)}
.work__thumb::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,14,40,0) 40%,rgba(18,14,40,.5) 100%)}
.work__ttl{font-family:var(--f-heading);position:absolute;left:12px;right:12px;bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:var(--fw-heading);font-size:17px;line-height:1.35;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px rgba(18,14,40,.45),0 2px 14px rgba(18,14,40,.35);word-break:auto-phrase;text-wrap:balance;font-feature-settings:normal}
.work__ep{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:8px;background:rgba(23,19,47,.8);font-size:12.5px;font-weight:900;line-height:1.5}
.work__body{display:grid;gap:4px;padding:12px 6px 14px}
.work__cat{font-size:13px;font-weight:900;color:var(--violet-deep)}
.work__title{font-family:var(--f-heading);font-size:16px;font-weight:var(--fw-heading);line-height:1.5;word-break:auto-phrase;text-wrap:balance;font-feature-settings:normal}
.work__title a{color:var(--ink)}
.work__title a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.work__title a:focus-visible{outline:none}
.work__title a:hover{color:var(--violet-deep)}
.work__meta{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.works__more{margin-top:16px}
@media (max-width:767px){ .slot-rule{font-size:16px} .slot__closed{font-size:15px} .work__title{font-size:16px} }

/* ゲーム */
.gtabs{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,380px);margin-bottom:18px;padding:5px;border-radius:var(--r-pill);background:var(--paper-3)}
.gtabs button{position:relative;z-index:1;min-height:42px;border-radius:var(--r-pill);font-size:14px;font-weight:900;color:var(--ink-2);transition:color .3s}
.gtabs button .num{margin-left:4px;font-size:12px;opacity:.8}
.gtabs button[aria-selected="true"]{color:#fff}
.gtabs .tabs__ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-pill);background:var(--ink);transform:translateX(calc(var(--tab-i,0) * 100%));transition:transform .45s var(--ease-out)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:18px 14px}
.game__cover{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--paper-3);box-shadow:var(--sh-1)}
.game__cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.game:hover .game__cover img{transform:scale(1.05)}
.game__noimg{display:grid;place-items:center;height:100%;font-family:var(--f-latin);font-size:10px;letter-spacing:.12em;color:var(--ink-3)}
.game__flag{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:6px;background:#C81E43;color:#fff;font-size:12px;font-weight:900}
.game__name{margin-top:8px;font-size:13px;font-weight:800;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.game__tags span{padding:2px 6px;border-radius:5px;background:var(--sun-soft);color:var(--sun-deep);font-size:12px;font-weight:800}
.games.is-clipped .game:nth-child(n+13){display:none}
.games__more{grid-column:1 / -1;display:flex;justify-content:center}
.games__more button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:var(--r-pill);background:var(--paper-3);font-size:14px;font-weight:900;color:var(--violet-deep);transition:background .2s}
.games__more button:hover{background:var(--violet-soft)}
.games__count{margin-bottom:16px;font-size:14px;font-weight:800;color:var(--ink-2)}
.games__count b{font-family:var(--f-latin);font-size:18px;color:var(--ink);margin:0 2px}
.games__empty{grid-column:1 / -1;padding:28px;border:1.5px dashed var(--line-2);border-radius:var(--r-m);text-align:center;color:var(--ink-3)}
.pf-note--want{display:none}
#gp-want:not([hidden]) ~ .pf-note--want{display:block}
.igdb{margin-top:16px;font-size:12px;color:var(--ink-3)}
.igdb a{text-decoration:underline;text-underline-offset:2px}

/* 自己紹介 */
.bio p{line-height:2}
.bio p+p{margin-top:1em}
.gallery{display:flex;gap:10px;margin-top:22px;overflow-x:auto;scrollbar-width:none}
.gallery:empty{display:none}
.gallery figure{flex:none;width:132px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--paper-3);border:1px solid var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover}
.ratio__bar{display:flex;gap:3px;height:14px;border-radius:999px;overflow:hidden;background:var(--paper-3)}
.ratio__bar span{width:0;background:var(--c);transition:width 1.1s var(--ease-out);transition-delay:calc(var(--i) * 120ms)}
.ratio.is-in .ratio__bar span,.js-off .ratio__bar span{width:var(--w)}
.ratio__legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:14px;font-weight:800}
.ratio__legend li{display:flex;align-items:center;gap:8px}
.ratio__legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ratio__legend b{font-size:13px;font-weight:600;color:var(--ink-2)}

/* 受付条件 */
.rules{display:grid;gap:12px}
.rule{padding:18px 20px;border-radius:var(--r-m);background:var(--paper-3)}
.rule h3{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14.5px;font-weight:var(--fw-heading-s)}
.rule h3 .ico{width:18px;height:18px}
.rule p{font-size:14.5px;color:var(--ink-2)}
.rule--ng{background:#FFF0F3}
.rule--ng h3{color:#C81E43}
.rule--yes{background:var(--mint-soft)}
.rule--yes h3{color:#0A7451}
.rule--no{background:var(--sun-soft)}
.rule--no h3{color:var(--sun-deep)}
.rule__chips{display:flex;flex-wrap:wrap;gap:6px}
.rule__chips span{padding:5px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:800;color:var(--ink)}
.rule--ng .rule__chips span{color:#C81E43;box-shadow:inset 0 0 0 1.5px #FFC9D3}

/* レビュー */
.rv__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;padding-bottom:22px;border-bottom:1px dashed var(--line-2)}
.rv__sum{text-align:center}
.rv__avg{font-size:52px;font-weight:700;line-height:1}
.stars{display:inline-flex;gap:1px;font-size:16px;color:var(--line-2)}
.stars .on{color:var(--sun)}
.rv__count{margin-top:4px;font-size:13px;font-weight:700;color:var(--ink-3)}
.rv__dist{display:grid;gap:6px;max-width:380px}
.rv__dist li{display:grid;grid-template-columns:14px 1fr 24px;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--ink-3)}
.rv__dist i{height:8px;border-radius:8px;background:var(--paper-3);position:relative;overflow:hidden}
.rv__dist i::after{content:'';position:absolute;inset:0;width:var(--w);border-radius:inherit;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) .2s}
.rv__dist.is-in i::after,.js-off .rv__dist i::after{transform:none}
.rv__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.rcard{padding:18px;border-radius:var(--r-m);background:var(--paper-3)}
.rcard__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rcard__head .chip{min-height:24px;padding:0 9px;font-size:12px}
.rcard__text{font-size:14.5px;line-height:1.8}
.rcard__meta{margin-top:8px;font-size:12px;font-weight:700;color:var(--ink-3)}

/* ほかのクリエイター */
.pf-more__title{font-size:clamp(26px,2.2vw + 12px,44px)}


/* ---------- タブレット・スマホ ---------- */
@media (max-width:1023px){
  .pf-body{grid-template-columns:minmax(0,1fr)}
  .pf-aside{display:none}
  .pf-quick{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin-bottom:16px;padding:14px 14px 14px 18px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
  .pf-quick__price{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:2px;line-height:1.15}
  .pf-quick__price span{grid-column:1 / -1;font-size:12px;font-weight:800;color:var(--ink-3)}
  .pf-quick__price b{font-size:24px;font-weight:700}
  .pf-quick__price small{font-size:12px;font-weight:700;color:var(--ink-3)}
  .pf-quick__btns{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .pf-quick .btn{min-height:48px;padding:0 16px;font-size:14.5px;box-shadow:none}
  .pf-quick__note{display:none;font-size:11.5px;line-height:1.6;font-weight:700;color:var(--ink-3);text-align:right}
  .tix{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
}
@media (max-width:767px){
  .pf-crumbs{padding-top:64px}
  .pf-cover{height:150px;margin-top:0;border-radius:22px}
  .pf-id{grid-template-columns:1fr;gap:12px;margin-top:-56px}
  .pf-ava{width:108px;padding:4px}
  .pf-ava img{border-width:4px}
  .pf-id__main{padding:0}
  .pf-id__side{position:absolute;right:0;top:64px;padding:0;gap:8px}
  .pf-follow{padding:0 14px;font-size:13px}
  .pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-stats div{padding:14px 16px}
  .pf-stats div:nth-child(3){border-left:0}
  .pf-stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .pf-tabs{top:64px;margin:0 calc(var(--gutter) * -1);padding:8px var(--gutter);border-radius:0;border-width:1px 0;box-shadow:none}
  html.hdr-hidden .pf-tabs{top:0}
  .pf-tabs a{flex:none;padding:8px 14px;font-size:13.5px}
  .pf-sec{padding:20px;border-radius:20px;scroll-margin-top:56px}
  #slots{scroll-margin-top:56px}
  .price li{align-items:flex-start}
  .price__val{padding-top:2px}
  .slot{grid-template-columns:56px minmax(0,1fr) auto;row-gap:2px;column-gap:12px}
  .slot__date{grid-row:1 / span 2;height:56px}
  .slot__time b{font-size:18px}
  .slot__price{grid-column:2;grid-row:2;font-size:14px}
  .slot .btn,.slot .slot__closed,.slot .slot__state{grid-column:3;grid-row:1 / span 2}
  .games{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .games.is-clipped .game:nth-child(n+10){display:none}
  .rv__avg{font-size:44px}
  .rv__list{grid-template-columns:1fr}
}
@media (max-width:599px){
  .pf-quick{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"price note" "btns btns";row-gap:12px;padding:14px}
  .pf-quick__price{grid-area:price}
  .pf-quick__note{display:block;grid-area:note}
  .pf-quick__btns{grid-area:btns}
}

/* ---------- 料金・ゲームの行から、その内容で依頼できる ---------- */
.price li{position:relative}
.price__link::after{content:'';position:absolute;inset:0;border-radius:12px}
.price__link:focus-visible{outline:0}
.price__link:focus-visible::after{outline:3px solid var(--violet);outline-offset:2px}
.price li:hover .price__link{color:var(--violet-deep)}
.price__chev{display:none;align-self:center;width:18px;height:18px;margin-left:6px;color:var(--ink-3)}
.game{position:relative}
.game__link::after{content:'';position:absolute;inset:0;border-radius:12px}
.game__link:focus-visible{outline:0}
.game__link:focus-visible::after{outline:3px solid var(--violet);outline-offset:3px}
/* キャッチコピー：語の途中で改行しない（JS で文節ごとに <wbr> を入れる。auto-phrase は対応ブラウザ向けの補助） */
.pf-catch{word-break:auto-phrase;text-wrap:pretty}
.pf-catch.is-phrased{word-break:keep-all;overflow-wrap:anywhere}
.rule h3 .nw{white-space:nowrap}

/* ---------- スマホの使いやすさ（2026-10-02 点検結果） ---------- */
@media (max-width:1023px){
  /* 下部バー（共通の dock）：「配信を依頼する」「通話を予約する」を同じ幅で並べる */
  .dock{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dock:has(> :only-child){grid-template-columns:minmax(0,1fr)}
  .pf-quick__price span,.pf-quick__note{font-size:12px}
  .price__chev{display:block}
  .igdb a{display:inline-block;padding:14px 0;margin:-14px 0}
}
/* 横向きのスマホ：目次は固定せず、本文の表示領域を確保する */
@media (max-width:1023px) and (max-height:500px){
  .pf-tabs,html.hdr-hidden .pf-tabs{position:relative;top:auto}
  .pf-sec,#slots{scroll-margin-top:0} /* html の scroll-padding（76px）だけでヘッダーをよけられる */
}
@media (max-width:767px){
  /* 最初の画面に「配信を依頼する」まで収める */
  .pf-cover{height:108px}
  .pf-genres{flex-wrap:nowrap;overflow-x:auto;margin:12px calc(var(--gutter) * -1) 0;padding:0 var(--gutter);scrollbar-width:none}
  .pf-genres::-webkit-scrollbar{display:none}
  .pf-stats{margin-top:16px}
  .pf-body{margin-top:14px}
  .pf-stats div{padding:10px 16px}
  .pf-stats dt{margin-bottom:2px}
  /* 目次：バーの高さは変えずに、押せる範囲を 44px に */
  .pf-tabs{padding:4px var(--gutter)}
  .pf-tabs a{display:inline-flex;align-items:center;min-height:44px}
  /* ゲームは 6 本まで（「すべて見る」で全件） */
  .games.is-clipped .game:nth-child(n+7){display:none}
  .game__name{font-size:12.5px;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;-webkit-line-clamp:3} /* 語の途中で切らずに、名前を最後まで見せる */
  .game__tags span{padding:2px 5px;font-size:12px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
  /* 小さすぎる補足の文字を 12px 以上に */
  .price .tag{font-size:12px}
  .tix__per{font-size:12px;white-space:nowrap}
  .tix__best{font-size:12px}
  .slot__date span{font-size:12px}
  .rcard__head .chip{font-size:12px}
  .igdb{font-size:12px}
  .pf-more{padding-block:48px 56px}
  .pf-more .sec-head{margin-bottom:20px}
  .pf-more .eyebrow{row-gap:2px}
}
@media (max-width:599px){
  .pf-sec{padding:20px 16px}
  .rule{padding:14px 16px}
  /* 料金：金額は名前の横、説明は全幅に回して、名前と説明が細かく折れないようにする */
  .price li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:12px 0}
  .price__main{display:contents}
  .price h3{grid-column:1;grid-row:1;word-break:keep-all;overflow-wrap:anywhere} /* JS が名前の文節に <wbr> を入れる */
  .price__val{grid-column:2;grid-row:1;padding-top:0;line-height:1.2}
  .price__val .num{line-height:1.15}
  .price__main p{grid-column:1 / -1;grid-row:2}
  .tix li{padding:16px 12px 14px}
  /* 通話枠：時刻の列を広げて 1 行に収める */
  .slot{grid-template-columns:48px minmax(0,1fr) auto;column-gap:10px;padding:10px 12px 10px 10px}
  .slot__date{height:52px}
  .slot__time span{white-space:nowrap}
  .slot .btn{padding:0 16px}
  .slot__price{font-size:15px}
}
@media (max-width:374px){
  /* 最も狭い画面：金額を少し小さくして、ジャンル名とタグを 1 行に収める */
  .price li{column-gap:8px}
  .price__val .num{font-size:19px}
  .price__chev{width:16px;margin-left:2px}
  .price .tag{padding:3px 6px}
  .games{column-gap:8px}
  .game__name{font-size:12px} /* 7 文字のカタカナ語（シミュレーター）が 1 行に入るように */
}
@media (max-width:359px){
  /* ゲームは 2 列・4 本まで（3 列では 7 文字のカタカナ語が 1 行に入らない） */
  .games{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
  .games.is-clipped .game:nth-child(n+5){display:none}
  .game__name{font-size:12.5px}
}
@media (max-width:413px){
  /* 押したあとも幅を変えない：「フォロー中」の「中」は読み上げ用にだけ残す（状態はハートと背景色でも示す） */
  .pf-follow{position:relative}
  .pf-follow__on{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:389px){
  /* 名前の横のボタン：アバターに重ならないよう「フォロー」の文字は読み上げ用にだけ残す */
  .pf-follow{position:relative;padding:0 12px;gap:6px}
  .pf-follow [data-follow-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:419px){
  .dock .btn{padding:0 12px;font-size:14px;letter-spacing:.02em}
  .dock .arrow{display:none}
}

/* ---------- 補足の文字は 13px 以上（2026-10-04b） ---------- */
.rcard__meta{font-size:13px}
@media (max-width:767px){ .pf-quick__price span,.pf-quick__note{font-size:13px} }

/* ---------- r7：状態ごとの表示・PC で依頼ボタンを最初の画面に・固定の目次の下に隠れない（2026-10-04） ---------- */
/* PC：カバーを低くして、「配信を依頼する」を 1440×900 の最初の画面に収める */
@media (min-width:1024px){ .pf-cover{height:clamp(160px,14vw,220px)} }
/* 固定の目次（.pf-tabs）の下に、フォーカスした項目やジャンプ先が隠れない（ヘッダー＋目次の高さ） */
html{scroll-padding-top:148px}
.pf-sec,#slots{scroll-margin-top:0}
@media (max-width:960px){ html{scroll-padding-top:132px} }
@media (max-width:1023px) and (max-height:500px){ html{scroll-padding-top:76px} }

/* 料金の行：依頼できないとき（本人・依頼停止中）はリンクにしない */
.price li.is-static:hover h3{color:inherit}

/* 本人が見たとき・依頼停止中 */
.act__own,.pf-quick__own{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:16px;font-weight:900;color:var(--violet-deep)}
.act__own .ico,.pf-quick__own .ico{width:20px;height:20px}
.act__why,.pf-quick__why{margin-top:14px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.act__block{margin-top:12px;text-align:center}
.act__block .c-textbtn{font-size:14px;color:var(--ink-2);text-decoration-color:var(--line-2)}
.act__block .c-textbtn:hover{color:var(--danger);text-decoration-color:currentColor}
.act__block .ico{width:16px;height:16px}
.act .btn[aria-disabled="true"]+.btn{margin-top:10px}
@media (max-width:1023px){
  .pf-quick.is-own{grid-template-columns:minmax(0,1fr)}
  .pf-quick.is-own .pf-quick__own{margin:0}
  .pf-quick__why,.pf-quick .act__block{grid-column:1 / -1;margin:0}
  .pf-quick .act__block{text-align:left;margin-top:-6px}
}
@media (max-width:599px){
  .pf-quick.is-own,.pf-quick.is-paused{grid-template-areas:none}
  .pf-quick.is-own>*,.pf-quick.is-paused>*{grid-area:auto;grid-column:1 / -1}
  .pf-quick__why{font-size:16px}
}
/* スマホ：「配信を依頼する」「通話を予約する」を同じ幅で並べる（アイコンは外して、どちらも 1 行に収める）。狭い画面では縦に並べる */
@media (max-width:599px){
  .pf-quick__btns{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pf-quick__btns .ico{display:none}
}
@media (max-width:389px){
  .pf-quick__btns{grid-template-columns:minmax(0,1fr)}
}

/* レビュー：色の付いた欄にして、白いカードが続く流れに区切りをつける */
.pf-sec--tint{background:linear-gradient(165deg,#F3EFFF 0%,#FFF1F7 100%);border-color:transparent}
.pf-sec--tint .rcard{background:#fff;box-shadow:var(--sh-1)}
.pf-sec--tint .rv__dist i{background:#fff}
.pf-sec--tint .rv__top{border-bottom-color:#DCD0EE}
@media (max-width:599px){ .pf-quick.is-own .pf-quick__btns{grid-template-columns:minmax(0,1fr)} }
@media (max-width:599px){
  .pf-gone .c-empty{grid-template-columns:minmax(0,1fr);justify-items:start}
  .pf-gone .c-empty__art{width:104px}
}

/* =====================================================================
   Production additions (v2): production states and parts in the lab look
   ===================================================================== */
/* avatar without an image: the initial (production showed 「アイコン」) */
.pf-ava__txt{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:5px solid var(--paper);background:var(--violet-soft);font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(40px,4vw,60px);color:var(--violet-deep)}
/* follower count on the creator's own page (no follow button for yourself) */
.pf-follow.is-static{cursor:default}
.pf-follow.is-static:hover{border-color:var(--line-2)}
.pf-follow.is-static span{font-size:13px;color:var(--ink-2)}
.pf-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.pf-stats div{min-width:0}
.pf-stats dt{white-space:nowrap}

/* side card / quick block: the call button while requests are stopped (production: 「通話も停止中」 still jumps to the call section) */
.act .btn.is-off,.pf-quick .btn.is-off{opacity:.55;box-shadow:none}
.act .btn[aria-disabled="true"],.pf-quick .btn[aria-disabled="true"]{background:var(--gray-soft);color:var(--ink-3);border-color:transparent;box-shadow:none;cursor:not-allowed}
.act .btn+.btn,.act .btn[aria-disabled="true"]+.btn{margin-top:10px}
.act__why{font-size:14.5px}

/* section hint (production: 「カードを押すと詳細、タグを押すと絞り込みができます」) */
.pf-sec__hint{margin-top:6px;font-size:13px;font-weight:700;color:var(--ink-3)}
.pf-empty{padding:22px;border:1.5px dashed var(--line-2);border-radius:var(--r-m);text-align:center;color:var(--ink-3);font-weight:700}
.pf-sec--tint .pf-empty{background:rgba(255,255,255,.6)}
.pf-note--warn{color:var(--warn,#b45309)}

/* call section states */
.pf-tixhead{font-family:var(--f-heading);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:14px;font-size:15px;font-weight:var(--fw-heading-s)}
.pf-tixhead small{font-size:13px;font-weight:700;color:var(--ink-3)}
.tix.is-muted li{opacity:.6}
.tix.is-muted li.is-best{box-shadow:none}
.pf-callstate{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:14.5px;font-weight:900;color:var(--ok)}
.pf-callstate .ico{width:18px;height:18px}
.slot-rule{margin-bottom:8px}
.slot-rule small{display:block;margin-top:2px;font-size:13px;font-weight:700;color:var(--ink-3)}
.slot-rule.is-stop{background:#FFF0F3;color:#A3162F}
.slot-rule.is-stop .ico{color:#C81E43}
.pf-slotmore{margin-top:14px}
.pf-callwait{display:flex;align-items:center;gap:16px;padding:22px;border-radius:var(--r-m);background:var(--paper-3)}
.pf-callwait__ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--pink-deep)}
.pf-callwait__ico .ico{width:22px;height:22px}
.pf-callwait p{font-weight:800;line-height:1.8;color:var(--ink-2)}
.pf-sub:first-child{margin-top:0}
.tix+.pf-sub,.pf-tixhead+.tix{margin-top:0}
.tix+.pf-sub{margin-top:30px}

/* games: production tag filter + cards that open the detail dialog */
.gtags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.gtag{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line-2);font-size:13.5px;font-weight:800;color:var(--ink-2);white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.gtag small{font-size:12px;font-weight:700;color:var(--ink-3)}
.gtag:hover{border-color:var(--violet);color:var(--violet-deep)}
.gtag[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gtag[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.game[hidden]{display:none}
.game__btn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:12px}
.game__btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.game__btn:hover .game__name{color:var(--violet-deep)}
.games__more{display:flex;justify-content:center;margin-top:18px}
.games__more[hidden],.games__more button[hidden]{display:none}
.games__more .ico{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.games__more button[aria-expanded="true"] .ico{transform:rotate(180deg)}
.ts-igdb-credit.igdb{margin-top:16px}
.ts-igdb-credit.igdb a{text-decoration:underline;text-underline-offset:2px}

/* works: production links (portfolio page / representative archive) */
.pf-links{display:grid;gap:10px}
.pf-links .link .ico:first-child{width:18px;height:18px;margin-right:2px}

/* conditions: production fields */
.rule--note{background:var(--violet-soft)}
.rule--note h3{color:var(--violet-deep)}
.rule p{white-space:normal;overflow-wrap:anywhere}

/* reviews: production shows the reviewer's public name and the date */
.rcard__meta time{white-space:nowrap}

/* dialogs */
.pf-block__list{display:grid;gap:8px;margin-top:10px;padding-left:1.2em;list-style:disc;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.pf-block__list strong{color:var(--ink)}
.pf-gm__head{display:flex;align-items:center;gap:14px;min-width:0}
.pf-gm__cover{flex:none;width:64px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--paper-3)}
.pf-gm__cover:empty{display:none}
.pf-gm__cover img{width:100%;height:100%;object-fit:cover}
.pf-gm .c-modal__title{font-size:18px;line-height:1.45;overflow-wrap:anywhere}
.pf-gm__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pf-gm__tags:empty{display:none}
.pf-gm__tags span{padding:2px 8px;border-radius:6px;background:var(--sun-soft);color:var(--sun-deep);font-size:12px;font-weight:800}
.pf-gm__desc{font-size:15px;line-height:1.8;color:var(--ink-2)}
.pf-gm__shops{display:grid;gap:8px;margin-top:16px}
.pf-gm__shop{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;background:#fff;border:1.5px solid var(--line-2);font-weight:800;color:var(--ink);transition:border-color .2s}
.pf-gm__shop:hover{border-color:var(--violet)}
.pf-gm__shop .ico{margin-left:auto;width:16px;height:16px;color:var(--ink-3)}
.pf-gm__mark{width:10px;height:10px;border-radius:50%;background:var(--ink-3)}
.pf-gm__shop.is-amazon .pf-gm__mark{background:#FF9900}
.pf-gm__shop.is-rakuten .pf-gm__mark{background:#BF0000}
.pf-gm__shop.is-steam .pf-gm__mark{background:#1B2838}
.pf-gm__shop.is-nintendo .pf-gm__mark{background:#E60012}
.pf-gm__shop.is-ps .pf-gm__mark{background:#0070D1}
.pf-gm__shop.is-xbox .pf-gm__mark{background:#107C10}
.pf-gm .c-modal__foot .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}

@media (max-width:1023px){ .pf-stats{grid-template-columns:repeat(3,minmax(0,1fr))} .pf-stats div:nth-child(4){border-left:0} .pf-stats div:nth-child(n+4){border-top:1px solid var(--line)} }
@media (max-width:767px){
  .pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-stats div:nth-child(4){border-left:1px solid var(--line)}
  .pf-stats div:nth-child(odd){border-left:0}
  /* production has a 5th stat (納期遵守率; the lab shows 4): one compact full-width row — label left, value right */
  .pf-stats div:nth-child(5){grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pf-stats div:nth-child(5) dt{margin-bottom:0}
  .pf-sec__hint{font-size:13px}
  .gtags{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1) 16px;padding:2px var(--gutter);scrollbar-width:none}
  .gtags::-webkit-scrollbar{display:none}
  .gtag{min-height:44px}
}
@media (max-width:599px){ .pf-callwait{padding:18px 16px} }
/* space before the footer (the lab had 「ほかのクリエイター」 here; production has no such section) */
.pf-profile{padding-bottom:clamp(56px,7vw,112px)}
.pf-gone{padding-bottom:clamp(56px,7vw,112px)}

/* ---------- タブレット（2026-10-05 点検） ---------- */
/* 通話チケット（700〜1023px）：2×2 だと横長で空きが多いので 4つを1列に */
@media (min-width:700px) and (max-width:1023px){ .tix{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* ゲーム（600〜767px）：3列だとカバーが大きすぎるので 4列・2段（8本）まで */
@media (min-width:600px) and (max-width:767px){
  .games{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px}
  .games.is-clipped .game:nth-child(n+7):nth-child(-n+8):not([hidden]){display:revert}   /* 7・8本目も出す（9本目からは今までどおり隠す） */
}

/* ---------- カバー：本文の幅にそろえ、少し縦長に（2026-10-10） ---------- */
/* 画面いっぱいの横長だったものを、本文と同じ幅（.wrap）の 4:1 にする（スマホは 3:1）。
   比率を固定するので、アップロードしたヘッダー画像の見える範囲が画面幅で変わりにくい。
   カバーが高くなるため、1440×900 では「配信を依頼する」が最初の画面から少し下に出る（r7 の調整より見た目を優先） */
.pf-cover{width:min(var(--maxw),100% - var(--gutter)*2);height:auto;aspect-ratio:4/1;margin:4px auto 0;border-radius:clamp(20px,2.2vw,32px)}
.pf-id{padding-inline:clamp(16px,2.4vw,32px)}   /* アイコンをカバーの角から内側へ */
@media (max-width:767px){
  .pf-cover{width:auto;aspect-ratio:3/1;margin:0 8px;border-radius:22px}
  .pf-id{padding-inline:0}
}