/* vtuber.css — VTUBER 一覧（vtuber.html）と VTuber 紹介（talent.html）の共通 */

.sec-cream.sep { --sep-bg: var(--cream); }
.sec[hidden] { display: none; }

/* ---------- 一覧 ---------- */
.kinds { margin-top: 20px; }
.kinds[hidden] { display: none; }
.kinds .chip { min-height: 38px; padding: 0 18px; }
.grid-4 { align-items: start; }
#vt-list { align-items: stretch; } /* タレントのカードは同じ行で高さを揃える */
@media (min-width: 768px) and (max-width: 1023px) { #vt-list { grid-template-columns: repeat(4, 1fr); gap: 16px; } } /* iPad などの幅でも、スマホの幅になるまではパソコンと同じ 4 列 */

/* カードの外側は枠なし。アイコン（正方形・透過のまま）のすぐ下に、名前から下を囲む枠をくっつける */
a.card.v-card, div.card.v-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; text-align: center; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
a.card.v-card:hover { box-shadow: none; }
.v-card .v-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 16px 14px 18px; border-radius: 0 0 22px 22px; background: var(--white); border: 1.5px solid var(--line-soft); box-shadow: var(--sh-card); transition: box-shadow .2s; }
a.v-card:hover .v-body { box-shadow: var(--sh-float); }
.v-card .v-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0; min-height: 1.6em; max-width: 100%; font-size: 12px; } /* 所属・デビュー年を横に 1 行。無くても 1 行ぶん空ける */
.v-card .v-meta .note + .note::before { content: '／'; margin: 0 .25em; color: var(--sky-deep); } /* 区切りは読みと同じ水色 */
@media (max-width: 767px) { .v-card .v-meta { flex-direction: column; align-items: center; gap: 2px; } .v-card .v-meta .note + .note::before { content: none; } } /* スマホは今までどおり縦に 2 行 */
/* 正方形のアイコン。枠なしで、カードの上の端まで広げる（カードの余白 22px 14px を打ち消す） */
.v-card .v-banner { flex: none; display: block; width: 100%; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; } /* 背景は付けない（透明なアイコンは透明のまま） */
.v-card .v-banner { border-radius: 22px 22px 0 0; } /* 上の角だけ丸く（背景のある絵や coming soon の色の四角のとき） */
.v-card .v-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .35s var(--ease-pop); }
.v-card:hover .v-banner img { transform: scale(1.05); }

/* ---------- coming soon（まだ発表前の人）。押せないカード ---------- */
.v-card.is-soon:hover { transform: none; }
.v-card .v-soon { position: relative; display: grid; place-items: center; background: var(--soon-c, var(--sky)); }
/* シルエット未公開: イメージカラーの地に、白い花を互い違いに敷く（花は js/vtuber.js が並べる） */
.v-soon-pat { position: absolute; inset: -6%; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; justify-items: center; overflow: hidden; }
.v-soon-pat .mo-i { --s: 20px; --c: rgba(255, 255, 255, .42); }
.v-soon-pat .mo-i:nth-child(even) { --s: 12px; --c: rgba(255, 255, 255, .3); }
.v-soon-pat .mo-i:nth-child(12n + 7), .v-soon-pat .mo-i:nth-child(12n + 8), .v-soon-pat .mo-i:nth-child(12n + 9),
.v-soon-pat .mo-i:nth-child(12n + 10), .v-soon-pat .mo-i:nth-child(12n + 11), .v-soon-pat .mo-i:nth-child(12n + 12) { transform: translateX(50%); }
.v-soon-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.v-soon-t { font-family: var(--f-en); font-weight: 600; font-size: clamp(19px, 2.3vw, 26px); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 10px rgba(74, 68, 61, .22); white-space: nowrap; }
.v-soon-tag { padding: 3px 12px; border-radius: 999px; background: #fff; color: var(--brown); font-size: 12px; font-weight: 700; line-height: 1.5; }
/* シルエット公開: 絵の下の方に、イメージカラーのぼかしを敷いて文字を載せる */
.v-card .v-soon.is-sil { place-items: end center; }
.v-card .v-soon.is-sil .v-soon-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-soon.is-sil::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, var(--soon-c), transparent); opacity: .9; }
.v-soon.is-sil .v-soon-box { z-index: 1; padding-bottom: 14%; }
.v-card .v-name.is-unknown .v-name-t { color: var(--ink-soft); letter-spacing: .2em; }
@media (max-width: 767px) { .v-soon-t { font-size: 17px; } .v-soon-tag { font-size: 11px; padding: 2px 10px; } }
.v-card .h3 { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.v-card .v-name { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.v-card .v-name .mo-i { --s: 13px; --c: var(--sky); }
.v-card .v-name-t { min-width: 0; }
@media (max-width: 767px) { .v-card .v-name { gap: 5px; } .v-card .v-name .mo-i { --s: 11px; } }
.v-card .ruby { margin: 0; font-size: 12px; line-height: 1.5; color: var(--sky-deep); overflow-wrap: anywhere; } /* 読みは薄い水色の文字 */
.v-card .is-empty { visibility: hidden; } /* 無い項目も 1 行ぶん空ける */
.v-card .note { margin: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.v-card .chip { max-width: 100%; white-space: normal; text-align: center; line-height: 1.35; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 767px) {
  .kinds .chip { min-height: 34px; padding: 0 14px; }
  .v-card .v-body { padding: 12px 8px 14px; border-radius: 0 0 18px 18px; }
  .v-card .v-banner { border-radius: 18px 18px 0 0; }
  /* スマホも、カードの余白（a.card.v-card の 22px 14px）は変わらないので、上の打ち消しをそのまま使う */
}


/* カードの幅が狭いとき（iPad の縦など）は、所属と年をスマホと同じく縦に 2 行（「／」が行の頭に来ないように） */
.v-card .v-body { container-type: inline-size; }
@container (max-width: 210px) { .v-card .v-meta { flex-direction: column; align-items: center; gap: 2px; } .v-card .v-meta .note + .note::before { content: none; } }

/* あいさつの吹き出し（マウスを乗せたときだけ。指で触る端末では出さない）。アイコンの右上に少し右へ傾けて出す。となりのカードに少しはみ出してもよい */
.v-card { position: relative; }
a.v-card:hover, a.v-card:focus-visible { z-index: 2; } /* 吹き出しがとなりのカードの下にもぐらないように */
.v-greet { position: absolute; right: -10px; top: -4px; z-index: 5; max-width: 78%; width: max-content; padding: 7px 15px; border-radius: 999px;
  background: var(--white); color: var(--sky-deep); box-shadow: inset 0 0 0 1.5px var(--sky-soft), 0 10px 22px -10px rgba(74, 68, 61, .45);
  font-size: 13px; font-weight: 700; line-height: 1.45; text-align: center; white-space: normal; word-break: auto-phrase;
  pointer-events: none; opacity: 0; transform: translateY(8px) rotate(6deg) scale(.85); transform-origin: 20% 100%;
  transition: opacity .45s ease, transform .5s ease; } /* 消えるときもふわっと */
/* しっぽは左下（顔の方）へ向ける */
.v-greet::after { content: ''; position: absolute; left: 22%; bottom: -6px; width: 12px; height: 12px; background: var(--white);
  border-radius: 0 0 4px 0; transform: rotate(45deg); box-shadow: inset -1.5px -1.5px 0 var(--sky-soft); }
@media (hover: hover) and (pointer: fine) {
  a.v-card:hover .v-greet, a.v-card:focus-visible .v-greet { opacity: 1; transform: translateY(-10px) rotate(6deg) scale(1); transition: opacity .3s ease, transform .45s var(--ease-pop, ease-out); } /* 出るときはふわっと少し弾む */
}
@media (prefers-reduced-motion: reduce) { .v-greet { transition: opacity .2s ease; transform: translateY(-10px) rotate(6deg); } }

/* ---------- 紹介：見出し ---------- */
.tl-head { display: flex; align-items: center; gap: 28px; }
.tl-head .avatar { flex: none; background: var(--white); } /* 透明なアイコンも白の上に */
.tl-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-info h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.35; letter-spacing: .03em; color: var(--brown); overflow-wrap: anywhere; }
.tl-info .ruby { margin: -4px 0 0; font-size: 13px; color: var(--ink-soft); }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--ink); }
.tl-meta .chip { cursor: default; }
.tl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* リンクは PROFILE の SNS と同じ形（先頭に白い花・水色の地に白い文字） */
.tl-link { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: 100%; padding: 6px 16px 6px 13px; border-radius: 999px; background: var(--sky); color: #fff; text-decoration: none; transition: background .2s, transform .25s var(--ease-pop); }
.tl-link:hover { background: var(--sky-deep); transform: translateY(-2px); }
.tl-link-t { min-width: 0; font-family: var(--f-ja); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .tl-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tl-info h1 { font-size: 24px; }
}

/* ---------- 紹介：本体 ---------- */
.tl-body { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 36px; align-items: start; }
.tl-back { margin: 36px 0 0; }
@media (max-width: 767px) {
  .tl-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tl-back { margin-top: 26px; }
}

.tl-outfit .tabs { margin-bottom: 14px; }
/* 衣装の切り替え: 丸いアイコン（衣装の絵の上の方＝顔のあたり）＋右下に虫眼鏡。Live2D の衣装は上に札 */
.outfit-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 14px; }
.outfit-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px 4px 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.outfit-ico { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--sky-pale); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--sky-soft); transition: box-shadow .2s, transform .25s var(--ease-pop); }
/* 絵の置き方は js/talent-view.js の CH.talentFace（--fx・--fy: 丸の真ん中に来る絵の横・縦 %、--fs: 倍率、--ar: 絵の縦÷横） */
.outfit-ico img { position: absolute; width: calc(var(--fs, 2.3) * 100%); max-width: none; height: auto; left: calc(50% - var(--fx, 50) * var(--fs, 2.3) * 1%); top: calc(50% - var(--fy, 12) * var(--fs, 2.3) * var(--ar, 1.8) * 1%); }
.outfit-tab:hover .outfit-ico { transform: translateY(-2px); }
.outfit-tab.is-on .outfit-ico { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--sky-deep); }
.outfit-zoom { position: absolute; right: 0; bottom: 2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sky-deep); color: #fff; box-shadow: 0 0 0 2px var(--white); }
.outfit-zoom svg { width: 14px; height: 14px; }
.outfit-tab:not(.is-on) .outfit-zoom { background: var(--white); color: var(--sky-deep); box-shadow: 0 0 0 1.5px var(--sky-soft); }
/* Live2D の札は白い地に水色の文字 */
.outfit-panel { position: relative; }
.outfit-l2d { position: absolute; right: 4px; top: 4px; z-index: 1; padding: 3px 12px; border-radius: 999px; background: var(--white); color: var(--sky-deep); box-shadow: inset 0 0 0 1.5px var(--sky-soft), 0 6px 14px -8px rgba(74, 68, 61, .4); font-family: var(--f-en); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; }
.outfit-tab:focus-visible { outline: none; }
/* 衣装の名前（白い札に茶色の文字）。マウスを乗せたとき・キーで選んだとき・押した直後に、丸の上へふわっと出す */
.outfit-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 3; max-width: 14em; padding: 4px 10px; border-radius: 999px; background: var(--white); color: var(--brown); box-shadow: inset 0 0 0 1.5px var(--sky-soft), 0 8px 18px -10px rgba(74, 68, 61, .45); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .2s ease, transform .2s ease; }
.outfit-tab:hover .outfit-tip, .outfit-tab:focus-visible .outfit-tip, .outfit-tab.is-tip .outfit-tip { opacity: 1; transform: translate(-50%, 0); }
/* 左端の丸は、名前が枠の外へはみ出さないよう左端にそろえる */
.outfit-tab:first-child .outfit-tip { left: 0; transform: translate(0, 4px); }
.outfit-tab:first-child:hover .outfit-tip, .outfit-tab:first-child:focus-visible .outfit-tip, .outfit-tab.is-tip:first-child .outfit-tip { transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .outfit-tip { transition: none; } }
.outfit-tab:focus-visible .outfit-ico { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--brown); }
@media (max-width: 767px) {
  .outfit-tabs { gap: 8px 10px; }
  .outfit-ico { width: 54px; height: 54px; }
}
.outfit-frame { display: grid; padding: 14px; border-radius: 28px; background: var(--sky-mist); box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.outfit-panel { grid-area: 1 / 1; display: grid; place-items: center; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.outfit-panel.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.outfit-panel img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; object-fit: contain; }
@media (max-width: 767px) { .outfit-frame { padding: 10px; border-radius: 22px; } }

.tl-card .kv { grid-template-columns: 5em minmax(0, 1fr); }
.tl-card .txt { margin: 16px 0 0; overflow-wrap: anywhere; }

/* ---------- 紹介：関連作品 ---------- */
.rel { display: block; color: inherit; text-decoration: none; min-width: 0; }
.rel-img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--sky-pale); box-shadow: var(--sh-card); transition: transform .2s var(--ease-pop), box-shadow .2s; }
.rel:hover .rel-img { transform: translateY(-3px); box-shadow: var(--sh-float); }
.rel-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }

.vt-more { margin-top: 20px; }

/* VTuber 様からのお仕事: 絵の縦横が混ざるので、同じ大きさの枠（4:5）に収めて揃える。余った所は同じ絵のぼかしで埋める（切り抜かない） */
#vt-works-list .rel-frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--sky-pale); box-shadow: var(--sh-card); transition: transform .2s var(--ease-pop), box-shadow .2s; }
#vt-works-list .rel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px); transform: scale(1.15); opacity: .7; }
#vt-works-list .rel-img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px; object-fit: contain; border-radius: 0; background: none; box-shadow: none; transition: none; }
#vt-works-list .rel:hover .rel-img { transform: none; box-shadow: none; }
#vt-works-list .rel:hover .rel-frame { transform: translateY(-3px); box-shadow: var(--sh-float); }
#vt-works-list .rel-t { min-height: 3.2em; }

/* ---------- 紹介の小窓（vtuber.html。gallery の小窓と同じ見た目・同じ動き） ---------- */
body.vm-open { overflow: hidden; }
.vm { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vm[hidden] { display: none; }
.vm-bg { position: absolute; inset: 0; background: rgba(74, 68, 61, .5); animation: vmFade .3s ease; }
.vm-sheet {
  position: relative; width: 100%; max-width: 860px; max-height: calc(100vh - 56px); overflow-y: auto; overflow-x: hidden;
  padding: 48px 36px 36px; background: var(--white); border-radius: 40px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
  animation: vmPop .45s var(--ease-pop);
}
.vm-bar { position: absolute; left: 38px; top: 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink-soft); }
.vm-bar .mo-i { --s: 12px; --c: var(--sky-deep); }
.vm-body { min-width: 0; display: grid; gap: 28px; }
.vm-body .tl-info h2.tl-name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.35; letter-spacing: .03em; color: var(--brown); overflow-wrap: anywhere; }
.vm-body .outfit-panel img { max-height: 60vh; }
.vm-works-h { margin: 0 0 12px; font-family: var(--f-en); font-size: 20px; font-weight: 600; letter-spacing: .06em; line-height: 1.2; color: var(--sky-deep); } /* いただいたお仕事の見出しは水色の英字 WORK */
.tl-works-h { font-family: var(--f-en); font-size: 26px; font-weight: 600; letter-spacing: .06em; color: var(--sky-deep); }
/* 小窓の並び。パソコン: 上の段「名前・リンク｜担当の札」、下の段「衣装｜いただいたお仕事」 */
.vm-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-areas: "head card" "outfit works"; gap: 24px 32px; align-items: start; }
.vm-a-head { grid-area: head; }
.vm-a-card { grid-area: card; }
.vm-a-outfit { grid-area: outfit; }
.vm-a-works { grid-area: works; }
.vm-a-card.tl-card { padding: 18px 20px; }
.vm-a-card .kv { margin: 0; }
.vm-a-card .txt { margin-top: 10px; font-size: 14px; line-height: 1.8; }
/* お仕事はパソコンでは題名を消した正方形のサムネイルを 2 列で、8 件まで（残りは「もっと見る」） */
@media (min-width: 921px) {
  .vm-a-works .vm-works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vm-a-works .rel-t { display: none; }
  .vm-a-works .rel-img { aspect-ratio: 1 / 1 !important; height: auto; object-fit: cover; border-radius: 14px; }
  .vm-a-works.has-more:not(.is-all) .vm-works-list > :nth-child(n + 9) { display: none; } /* 2 列 × 4 段 = 8 件（衣装の絵とほぼ同じ高さ。js/vtuber.js の WORKS_MAX と同じ） */
  .vm-more { margin-top: 12px; width: 100%; }
}
@media (max-width: 920px) {
  /* スマホ・狭い画面は前と同じ順に 1 列で並べる */
  .vm-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "outfit" "card" "works"; }
  .vm-more { display: none; }
}
.vm-works-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vm-close {
  position: fixed; right: 24px; top: 20px; z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: var(--white); color: var(--brown);
  box-shadow: 0 14px 30px -18px rgba(74, 68, 61, .6), inset 0 0 0 2px var(--sky-soft);
  font-family: var(--f-en); font-weight: 600; font-size: 28px; line-height: 1; display: grid; place-items: center; padding-bottom: 4px;
  transition: transform .25s var(--ease-pop);
}
.vm-close:hover { transform: rotate(90deg); }
@keyframes vmFade { from { opacity: 0; } }
@keyframes vmPop { from { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes vmRise { from { transform: translateY(100%); } }
@media (max-width: 920px) {
  .vm-body .tl-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vm-works-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vm { align-items: flex-end; padding: 0; }
  .vm-bg { background: rgba(74, 68, 61, .55); }
  .vm-sheet { max-height: 92vh; border-radius: 32px 32px 0 0; padding: 44px 20px 28px; animation: vmRise .4s ease; }
  .vm-bar { left: 20px; }
  .vm-body .tl-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .vm-body .tl-info h2.tl-name { font-size: 22px; }
  .vm-works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vm-close { width: 46px; height: 46px; font-size: 24px; top: 8px; right: 16px; }
  /* 閉じるはメニューのボタンと同じ位置。後ろのボタンを隠す */
  body.vm-open .hd .btn-contact { visibility: hidden; }
}