.charactersHub .secRule{margin-top:22px}


  :is(.charactersHub,.characterDetail) .selectorWrap{
    position:sticky;top:71px;z-index:40;
    background:rgba(250,247,242,.94);backdrop-filter:blur(8px);
    border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);
  }
  :is(.charactersHub,.characterDetail) .selector{
    max-width:var(--maxw);margin:0 auto;padding:16px 24px;
    display:flex;gap:18px;justify-content:center;
    overflow-x:auto;scrollbar-width:thin;
  }
  :is(.charactersHub,.characterDetail) .selChar{
    flex-shrink:0;width:76px;text-align:center;cursor:pointer;background:none;border:none;
    font-family:var(--gothic);
  }
  :is(.charactersHub,.characterDetail) .selPortrait{
    width:64px;height:64px;margin:0 auto;border-radius:50%;
    border:2px solid transparent;transition:all .25s;position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  :is(.charactersHub,.characterDetail) .selChar:hover .selPortrait{border-color:var(--hairline)}
  :is(.charactersHub,.characterDetail) .selChar.on .selPortrait{border-color:var(--rose);box-shadow:0 0 0 3px rgba(216,164,143,.2)}
  :is(.charactersHub,.characterDetail) .selPortrait svg{width:22px;height:22px;opacity:.5}
  :is(.charactersHub,.characterDetail) .selName{
    font-size:11px;letter-spacing:.06em;color:var(--gray);margin-top:7px;
    white-space:nowrap;transition:color .25s;
  }
  :is(.charactersHub,.characterDetail) .selChar.on .selName{color:var(--rose-deep);font-weight:700}


  .charactersHub .preview{padding:64px 24px 84px}
  .charactersHub .previewInner{
    max-width:var(--maxw);margin:0 auto;
    display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:start;
  }
  .charactersHub .pvPortrait{
    aspect-ratio:3/4;border-radius:4px;position:relative;overflow:hidden;
    border:1px solid var(--hairline-soft);
    display:flex;align-items:center;justify-content:center;
    transition:background .4s;
  }


  .charactersHub .pvPortrait .pvArt{position:absolute;inset:0;transition:opacity .3s}


  .charactersHub .pvMedia .pvPortrait{flex:1}

  .charactersHub .closetLabel{
    font-family:var(--latin);font-size:9.5px;font-weight:600;letter-spacing:.26em;
    color:var(--rose-ink);text-transform:uppercase;text-align:center;white-space:nowrap;
    padding-bottom:8px;border-bottom:1px solid var(--hairline-soft);width:100%;
  }

  .charactersHub .closetThumb{
    width:56px;aspect-ratio:3/4;border-radius:3px;position:relative;overflow:hidden;
    border:1px solid var(--hairline-soft);cursor:pointer;background:none;padding:0;
    transition:all .25s;
  }


  .charactersHub .closetThumb .cLabel{
    position:absolute;left:0;right:0;bottom:0;
    font-family:var(--serif);font-size:9px;letter-spacing:.08em;text-align:center;
    color:var(--rose-ink);background:rgba(251,249,245,.85);padding:2px 0;
  }


  .charactersHub .closetThumb.locked .cLock{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  }


  .charactersHub .pvBody{opacity:1;transition:opacity .25s}
  .charactersHub .pvBody.fading{opacity:0}
  .charactersHub .pvNameJa{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.2em;color:var(--charcoal)}
  .charactersHub .pvNameEn{font-family:var(--latin);font-size:13px;letter-spacing:.34em;color:var(--rose-ink);text-transform:uppercase;margin-top:6px}
  .charactersHub .pvCatch{
    font-family:var(--serif);font-size:17px;letter-spacing:.12em;color:var(--rose-deep);
    margin-top:26px;padding-left:16px;border-left:2px solid var(--rose);line-height:1.9;
  }
  .charactersHub .pvIntro{font-size:14px;line-height:2.3;color:var(--ink);margin-top:22px;max-width:560px}
  .charactersHub .pvCharmHead{
    font-family:var(--latin);font-size:11.5px;font-weight:600;letter-spacing:.3em;
    color:var(--rose-ink);text-transform:uppercase;margin-top:38px;
  }
  .charactersHub .pvCharms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;max-width:620px}
  .charactersHub .charm{
    background:var(--ivory-soft);border:1px solid var(--hairline-soft);border-radius:4px;
    padding:16px 16px 18px;text-align:center;
  }
  .charactersHub .charmIcon{font-size:15px;color:var(--rose)}
  .charactersHub .charmTitle{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--charcoal);margin-top:8px}
  .charactersHub .charmText{font-size:11.5px;color:var(--gray);line-height:1.9;margin-top:6px}
  .charactersHub .pvAction{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap}


  @media (max-width:900px){
    .charactersHub .selectorWrap{top:62px}
    .charactersHub .selector{justify-content:flex-start;padding:12px 16px}
    .charactersHub .previewInner{grid-template-columns:1fr;gap:34px}
    .charactersHub .pvMedia{max-width:400px;margin:0 auto}
    .charactersHub .pvPortrait{max-width:340px;margin:0 auto}

    .charactersHub .pvMedia{flex-direction:column;align-items:center}
    .charactersHub .closetWrap{width:100%;}
    .charactersHub .closetLabel{border-bottom:none;padding-bottom:0}
    .charactersHub .closet{flex-direction:row;justify-content:center;flex-wrap:wrap;margin-top:8px}
    .charactersHub .pvCharms{grid-template-columns:1fr 1fr}
    .charactersHub .gridCards{grid-template-columns:repeat(2,1fr);gap:12px}
    .charactersHub .preview{padding:48px 20px 64px}
  }
.charactersHub .pvPortrait{background:linear-gradient(170deg,#EFE4D8,#D8BDAA);transition:opacity .3s}
.charactersHub .selPortrait{background:linear-gradient(170deg,#EFE4D8,#D8BDAA)}
.charactersHub .closetThumb .cArt{background:linear-gradient(170deg,#EFE4D8,#D8BDAA)}
.charactersHub .selPortrait,.charactersHub .pvPortrait,.charactersHub .closetThumb .cArt{overflow:hidden}
.charactersHub .selPortrait img,.charactersHub .pvPortrait > img,.charactersHub .closetThumb .cArt img{display:block;width:100%;height:100%;object-fit:contain}
/* 丸いセレクターアイコンはアバター式の切り抜き=coverで余白を作らない(Hub/Detail共通) */
:is(.charactersHub,.characterDetail) .selPortrait img{object-fit:cover}
.charactersHub .pvPortrait > img,.charactersHub .closetThumb .cArt img{position:absolute;inset:0}
.charactersHub .closetThumb.preparing{opacity:.55;cursor:default;filter:grayscale(1)}
.charactersHub .cPreparing{position:absolute;inset:4px 2px auto;text-align:center;font-size:10px;background:rgba(251,249,245,.9)}
.charactersHub .closetWrap[hidden]{display:none}
.charactersHub .pvPortrait.hasImage > .devBadge,.charactersHub .closetThumb.hasImage > .devBadge{display:none}

/* Characters=昼下がりの光(DL-015系): 一番明るい刻。高い陽の白金の光が上から差し、空気は澄む(琥珀には寄せない) */
.charactersHub .btnPrimary .arrow{font-family:var(--latin);transition:transform .25s}
.charactersHub .btnPrimary:hover .arrow{transform:translateX(3px)}