/* クリエイター個人ページ v7（2026-09-22）: 上は短い自己紹介、主役はピックアップ作品の大きな展示。
   v4 の上部（pages.css の .cp-hero / .cp-head / .av3）をそのまま使い、ここでは足すものだけ書く */
.cp-hero.v7 { padding-block: 36px 44px; }
.cp-hero.v7 .cp7-no { margin: 0 0 6px; font: 800 11px/1.6 var(--en-nav); letter-spacing: .16em; color: #9a9a9a; }
.cp-hero.v7 h1 { margin-top: 0; }
.cp-hero.v7 .cp-act { margin-top: 14px; }

.cp-bio { max-width: 720px; margin: 18px 0 8px; font-size: 15.5px; line-height: 2; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }

/* 展示（2026-09-22 STΛCK「交互ではなく中央揃い。本当に作品にフォーカス。スクロールの線で流れを」）:
   中央に 1 本の細い線が上から下へ流れ、その線の上に作品が 1 点ずつ。絵は中央（元の縦横比のまま、幅の上限と画面の高さで制限）、
   その下に番号・題名・日付とツール・制作意図（本人の文があればそれ、無ければ AI が画像から書いた仮の文）。 */
.cps { background: #0a0a0a; color: #fff; padding-block: clamp(36px, 5vw, 72px) clamp(48px, 7vw, 104px); overflow: hidden; }
.cps .h2 { text-align: center; }
.cps .h2 .en { color: #fff; }
.cps .h2 .sub { color: #9a9a9a; }
.cps-list { position: relative; display: grid; gap: clamp(56px, 8vw, 128px); margin-top: clamp(28px, 4vw, 56px); padding-top: clamp(28px, 4vw, 56px); }
.cps-list::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(255, 255, 255, .16); }
.cps-list::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 0; width: 1px; height: 160px; margin-left: -.5px; background: linear-gradient(180deg, rgba(198, 249, 31, 0), #C6F91F 55%, rgba(198, 249, 31, 0)); transform: translateY(max(0px, calc(var(--cps-p, 0) * var(--cps-h, 2000px) - 80px))); transition: transform .35s cubic-bezier(.215, .61, .355, 1); }
.cps-item { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
/* スクロールで現れる（光が届いたところから） */
html.js .cps-item:not(.is-in) { opacity: 0; transform: translateY(28px); }
.cps-item { transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform .9s cubic-bezier(.215, .61, .355, 1); }
.cps-item::before { content: ""; position: absolute; left: 50%; top: -7px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #C6F91F; box-shadow: 0 0 0 4px #0a0a0a; }
.cps-img { display: block; position: relative; overflow: hidden; background: #0a0a0a; max-width: min(100%, 880px); box-shadow: 0 0 0 12px #0a0a0a; }
.cps-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 84svh; object-fit: contain; transition: transform 1.2s cubic-bezier(.165, .84, .44, 1); }
.cps-img:hover img { transform: scale(1.02); }
.cps-pages { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font: 800 12px/1 var(--en-nav); white-space: nowrap; }
.cps-pages svg { display: block; width: 15px; height: 15px; flex: none; }
.cps-cap { position: relative; max-width: 640px; margin-top: 26px; padding: 26px 20px 0; background: #0a0a0a; }
.cps-cap::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 18px; margin-left: -.5px; background: #C6F91F; }
.cps-n { margin: 0 0 10px; font: 400 clamp(22px, 2.2vw, 30px)/1 var(--en); color: #C6F91F; letter-spacing: -.02em; }
.cps-t { margin: 0; font-size: clamp(22px, 2.4vw, 36px); font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.cps-meta { margin: 12px 0 0; font: 700 12px/1.6 var(--en-nav); letter-spacing: .08em; color: #9a9a9a; }
.cps-intent { margin: 22px 0 0; font-size: 15.5px; line-height: 2; color: #e8e8e8; white-space: pre-line; overflow-wrap: anywhere; text-align: left; }
.cps-intent[hidden] { display: none; }
/* .cps-intent.ai の断り書きは表に出さない（2026-09-24 STΛCK） */
@media (max-width: 900px) {
  .cp-bio { font-size: 14.5px; }
  .cps-list { gap: 56px; }
  .cps-img { box-shadow: 0 0 0 8px #0a0a0a; }
  .cps-img img { max-height: 70svh; }
  .cps-cap { margin-top: 20px; padding: 22px 6px 0; }
  .cps-intent { font-size: 14.5px; line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) { .cps-img img { transition: none; } .cps-img:hover img { transform: none; } .cps-list::after { transition: none; } html.js .cps-item:not(.is-in) { opacity: 1; transform: none; } }

/* 作品一覧は畳んでおく。「作品をもっと見る」で開く */
/* 見出しとボタンの並びは pages.css（grid: 見出し左・ボタン右下）に任せる */
.cpx .cpx-body[hidden] { display: none; }

/* 2026-09-23 STΛCK: アイコンの上面を CREATOR NO. の上面に揃える（縦中央揃えをやめる）。クリップは上から外した */
.cp-hero.v7 .cp-head { align-items: flex-start; }
.cp-hero.v7 .cp-head .av3 { margin-top: 2px; }
/* ARTWORKS は黒い展示の下に続くので、上の余白を戻す。畳んでいる間は下の依頼カードまでの間を詰める */
.cps + .cpx { padding-top: clamp(56px, 7vw, 96px); }
.cpx { padding-bottom: 56px; }
.cpx + .cp-askb { padding-top: 0; }

/* Featured の映像（2026-09-23）: 絵と同じ幅の上限。縦横比が分かるうちは先に高さを取っておく（読み込みで飛ばない） */
.cps-img.cps-video { width: fit-content; max-width: min(100%, 880px); margin-inline: auto; }  /* 縦動画は実寸幅に（左右の黒帯を無くす。2026-09-24） */
.cps-video video { display: block; width: auto; max-width: min(100%, 880px); height: auto; max-height: 84svh; object-fit: contain; background: #000; }
@media (max-width: 900px) { .cps-video video { max-height: 70svh; } }

/* 2026-09-23 STΛCK「うるさい」「自己紹介は上の黒い部分に」: 上は 名前 → 自己紹介 → 種類＋SNS の 1 行。強みの黄緑の行は外した（About に残す） */
.cp-hero.v7 { padding-block: 32px 40px; }
.cp-hero .cp-bio { margin: 14px 0 0; max-width: 640px; font-size: 15px; line-height: 1.9; color: #d8d8d8; }
.cp-hero.v7 .cp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; }
.cp-hero.v7 .cp-row .tools { margin-top: 0; }
.cp-hero.v7 .cp-row .tools .chip { font-size: 10px; padding: 6px 9px; }
.cp-hero.v7 .cp-sns { display: flex; gap: 8px; margin: 16px 0 0; }  /* SNS はフラットアイコン。種類の札の下に置く（2026-09-23 STΛCK「大きい矢印はダサい」） */
.cp-hero.v7 .cp-sns a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #555; padding: 0; color: #fff; background: none; transition: background .25s, color .25s, border-color .25s; }
.cp-hero.v7 .cp-sns a:hover { background: #C6F91F; border-color: #C6F91F; color: #0a0a0a; }
.cp-hero.v7 .cp-sns svg { width: 17px; height: 17px; }
/* About: 行間を詰め、強みの札は黒でなく縁取りに */
.cp-about { padding-block: 64px; }  /* 上下の余白を揃える（2026-09-23 STΛCK） */
.cp-about .cp-dl { gap: 14px 24px; margin-top: 18px; }
.tchip.strong { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px #0a0a0a; }
@media (max-width: 640px) { .cp-hero .cp-bio { font-size: 14px; } .cp-hero.v7 .cp-row { gap: 8px 12px; } }

/* 依頼の帯: 白い箱の幅を本文の幅（1152 − 余白）に揃える（2026-09-23 STΛCK） */
.cp-askb .wrap { max-width: calc(var(--max) - var(--gutter) * 2); }
.cpx .cpx-open[aria-expanded="true"] { background: var(--white); color: var(--ink); border: 2px solid var(--black); }
/* 閉じている間は最新 4 点だけ（新着順の先頭 4 つ）。絞り込み・並び順・もっと見るは開いた時だけ（2026-09-24 STΛCK） */
.cpx .cpx-body.is-collapsed .cpx-bar, .cpx .cpx-body.is-collapsed .cpx-chips, .cpx .cpx-body.is-collapsed .wx-status, .cpx .cpx-body.is-collapsed .more, .cpx .cpx-body.is-collapsed .wx-empty, .cpx .cpx-body.is-collapsed #wxExtra, .cpx .cpx-body.is-collapsed #wxExtraBtn { display: none; }
.cpx .cpx-body.is-collapsed .wgrid > :nth-child(n+5) { display: none; }
/* Pick up の音声（2026-09-24） */
.cps-img.cps-audio { width: min(100%, 880px); background: #0a0a0a; }
.cps-img.cps-audio img { width: 100%; max-height: 52svh; object-fit: cover; }
.cps-player { padding: 14px; background: #0a0a0a; }
.cps-player iframe { display: block; width: 100%; height: 240px; border: 0; border-radius: 12px; }
.cps-player .lb-audio-out { color: #fff; }

/* スマホの相談箱: 白い箱の左右に余白、文字とボタンを中央に（2026-09-24 STΛCK） */
@media (max-width:640px){
  .cp-askb .wrap{margin-inline:16px;max-width:none;width:auto;justify-content:center;text-align:center;padding:24px 18px}
  .cp-askb p{width:100%;text-align:center}
  .cp-askb .pill{width:100%;justify-content:center}
}

/* 作品の説明文は中央揃え。文節の折り返し（BudouX）は当てない＝data-no-wrap（2026-09-24 STΛCK「変な切り返しをするくらいなら中央に。禁則が効きすぎ」） */
.cps-intent{text-align:center;word-break:normal;overflow-wrap:anywhere;text-wrap:wrap}