/* 男本（店舗ページの在籍一覧）
   DEAR'S ACE で作った男本（dears-ace-ui）の見せ方を、6店舗共通の部品にしたもの。
   ・カード = 額縁の奥に店内写真、手前に切り抜きの人物（額縁から上に飛び出す）
   ・タップで個人のカード（プロフィール・本日出勤・指名して行く）
   🔴 ランキング（順位）は出さない。警察庁通達（令和7年6月4日 丁保発第104号）で
      「○位ランクイン」等が外向きの広告として問題視されているため（10/5 KOZUKI判断）。 */

/* ── ヒーロー ─────────────────────────────── */
.ob-hero{position:relative;min-height:min(86vh,760px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(18px,4vw,60px);padding:clamp(96px,12vh,130px) clamp(18px,6vw,90px) clamp(40px,7vh,70px);overflow:hidden;isolation:isolate}
.ob-hero .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:brightness(.34) saturate(.8);transform:scale(1.04)}
.ob-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,4,6,.92) 0%,rgba(5,4,6,.55) 55%,rgba(5,4,6,.25) 100%),
             linear-gradient(180deg,transparent 60%,var(--sumi) 100%)}
.ob-hero .kick{font-family:var(--serif);font-size:11px;letter-spacing:.42em;color:var(--gold-line);display:flex;align-items:center;gap:14px}
.ob-hero .kick::before{content:"";width:36px;height:1px;background:var(--gold-line)}
.ob-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,7.4vw,108px);line-height:.98;letter-spacing:.01em;margin:22px 0 8px}
.ob-hero h1 em{font-style:italic;color:#D8B879}
.ob-hero .ja{font-family:var(--mincho);font-size:13px;letter-spacing:.32em;color:var(--silver)}
.ob-hero .lead{font-family:var(--mincho);font-size:13.5px;letter-spacing:.12em;line-height:2.1;color:var(--silver);margin:22px 0 30px;max-width:34em}
.ob-stats{display:flex;gap:clamp(22px,4vw,46px);flex-wrap:wrap}
.ob-stats div{display:flex;flex-direction:column;gap:6px}
.ob-stats b{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--fg)}
.ob-stats span{font-family:var(--serif);font-size:10px;letter-spacing:.3em;color:var(--mute)}
.ob-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.ob-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--gold-line);color:var(--fg);
  font-family:var(--mincho);font-size:12.5px;letter-spacing:.18em;text-decoration:none;transition:background .3s,color .3s}
.ob-btn:hover{background:var(--gold-line);color:var(--sumi)}
.ob-btn.sub{border-color:var(--line);color:var(--silver)}

/* PV の帯（shops.pv がある店舗だけ） */
.ob-pv{position:relative;width:100%;background:#000;margin-top:clamp(64px,8vh,84px);overflow:hidden}
.ob-pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ob-pv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(180deg,transparent,var(--sumi));pointer-events:none}
.ob-pv .pvc{position:absolute;right:clamp(10px,2vw,24px);bottom:clamp(10px,2vw,22px);z-index:2;display:flex;gap:8px}
.ob-pv .pvc button{all:unset;cursor:pointer;font-family:var(--mincho);font-size:11.5px;letter-spacing:.14em;color:var(--fg);
  padding:9px 14px;border:1px solid rgba(216,184,121,.55);background:rgba(5,4,6,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ob-pv .pvc button[aria-pressed=true]{background:#D8B879;color:var(--sumi)}
.ob-hero.after-pv{min-height:auto;padding-top:clamp(30px,5vh,56px)}
@media (max-width:820px){.ob-pv{margin-top:58px}.ob-pv .pvc{right:8px;bottom:8px;gap:6px}.ob-pv .pvc button{padding:4px 8px;font-size:9.5px;letter-spacing:.08em}}

/* ヒーローの一枚（額縁から人物が出る） */
.ob-star{border:0;padding:0;background:none;cursor:pointer;display:block;color:inherit;font:inherit;text-align:left;position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:3/4;perspective:1100px}
.ob-star .st{position:absolute;inset:0;clip-path:inset(-30% -30% 0 -30%);transform-style:preserve-3d;transition:transform .5s var(--ease)}
.ob-star .win{position:absolute;inset:12% 9% 0 9%;overflow:hidden;transform:translateZ(-40px);background:#0C0A11}
.ob-star .win i{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:brightness(.55) saturate(.85)}
.ob-star .fr{position:absolute;inset:12% 9% 0 9%;border:1px solid rgba(216,184,121,.55);transform:translateZ(6px);pointer-events:none}
.ob-star img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:translateZ(60px);
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.7));-webkit-mask-image:linear-gradient(180deg,#000 90%,transparent);mask-image:linear-gradient(180deg,#000 90%,transparent)}
.ob-star .tag{position:absolute;left:-6%;bottom:9%;transform:translateZ(90px);font-family:var(--mincho);color:var(--fg)}
.ob-star .tag small{display:block;font-family:var(--serif);font-size:10px;letter-spacing:.36em;color:#D8B879;margin-bottom:8px}
.ob-star .tag b{font-weight:400;font-size:clamp(22px,2.6vw,32px);letter-spacing:.12em;text-shadow:0 2px 18px rgba(0,0,0,.8)}
@media (max-width:820px){
  .ob-hero{grid-template-columns:1fr;min-height:auto;padding-top:96px}
  .ob-star{width:min(78%,340px);order:-1;margin-bottom:6px}
}

/* ── 男本 ─────────────────────────────── */
.ob-sec{margin-top:clamp(40px,7vw,80px)}
.ob-note{color:var(--mute);font-family:var(--mincho);font-size:12.5px;letter-spacing:.1em;line-height:2;margin:4px 0 22px}
.ob-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.ob-seg{display:inline-flex;border:1px solid var(--line)}
.ob-seg button{all:unset;cursor:pointer;padding:11px 20px;font-family:var(--serif);font-size:11px;letter-spacing:.26em;color:var(--silver);transition:background .25s,color .25s}
.ob-seg button[aria-pressed=true]{background:#D8B879;color:var(--sumi)}
.ob-seg button:disabled{opacity:.35;cursor:default}
.ob-sel{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:10.5px;letter-spacing:.24em;color:var(--mute)}
.ob-sel select{background:#0C0A11;color:var(--fg);border:1px solid var(--line);padding:10px 12px;font:13px var(--sans);letter-spacing:.06em}

.ob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);perspective:1400px}
@media (max-width:1020px){.ob-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.ob-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

.ob-card{all:unset;box-sizing:border-box;position:relative;display:block;clip-path:inset(-40% -10% 0 -10%);cursor:pointer;border:1px solid var(--line);background:var(--panel);
  transform-style:preserve-3d;transition:transform .3s var(--ease),border-color .3s;margin-top:clamp(14px,2vw,22px)}
.ob-card:focus-visible{outline:1px solid #D8B879;outline-offset:3px}
.ob-card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--acc,#D8B879);opacity:.8}
.ob-card .ph{position:relative;aspect-ratio:3/4;transform-style:preserve-3d}
.ob-card .clip{position:absolute;inset:0;overflow:hidden;clip-path:inset(11% 8% 0 8%);transition:transform .45s var(--ease)}
.ob-card .clip i{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.5) saturate(.8)}
.ob-card .fr{position:absolute;left:8%;right:8%;top:11%;bottom:0;border:1px solid rgba(216,184,121,.36);border-bottom:none;transform:translateZ(4px);
  pointer-events:none;transition:border-color .35s,box-shadow .35s}
.ob-card .pp{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;transform:translateZ(30px);transform-origin:50% 100%;
  transition:transform .45s var(--ease),filter .45s;filter:drop-shadow(0 16px 20px rgba(0,0,0,.55));
  -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent);pointer-events:none}
/* 切り抜いていない写真（背景ごと作品のもの）は額縁の中に収める */
.ob-card.flat .pp{inset:11% 8% 0 8%;width:84%;height:89%;transform:translateZ(6px);-webkit-mask-image:none;mask-image:none;filter:none}
.ob-card .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,transparent,rgba(11,10,12,.9));
  transform:translateZ(34px);pointer-events:none}
.ob-card:hover .pp{transform:translateZ(52px) scale(1.05) translateY(-1.5%);filter:drop-shadow(0 26px 30px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(216,184,121,.12))}
.ob-card.flat:hover .pp{transform:translateZ(10px);filter:none}
.ob-card:hover .fr{border-color:rgba(216,184,121,.72);box-shadow:0 0 34px -8px rgba(216,184,121,.35),inset 0 0 24px -14px rgba(216,184,121,.3)}
.ob-card:hover .clip{transform:scale(1.03)}
.ob-card .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;transform:translateZ(40px);z-index:3}
.ob-card .nm{font-family:var(--mincho);font-size:clamp(14px,1.5vw,17px);letter-spacing:.14em;color:var(--fg)}
.ob-card .en{font-family:var(--serif);font-style:italic;font-size:10.5px;letter-spacing:.24em;color:var(--mute);margin-top:4px;text-transform:uppercase}
.ob-card .rl{font-family:var(--mincho);font-size:10.5px;letter-spacing:.12em;color:#D8B879;margin-top:6px}
.ob-card .chips{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:6px;transform:translateZ(44px);z-index:3}
.ob-chip{font-family:var(--mincho);font-size:10px;letter-spacing:.12em;padding:5px 8px;border:1px solid rgba(216,184,121,.5);background:rgba(5,4,6,.72);color:#E8D3A2}
.ob-chip.on{border-color:var(--hi);color:#fff;background:rgba(200,53,74,.82)}
.ob-card.noimg .ph{display:flex;align-items:center;justify-content:center}
.ob-card.noimg .soon{font-family:var(--serif);font-size:10px;letter-spacing:.36em;color:var(--mute);transform:translateZ(10px)}
/* タッチ端末は hover が無いので、ゆっくり浮かせて立体を見せる */
@media (hover:none){
  .ob-card:not(.flat) .pp{animation:obFloat 4.6s ease-in-out infinite}
  .ob-card:nth-child(2n) .pp{animation-delay:-1.6s}
  .ob-card:nth-child(3n) .pp{animation-delay:-3.1s}
  .ob-card .fr{border-color:rgba(216,184,121,.55)}
}
@keyframes obFloat{0%,100%{transform:translateZ(30px) translateY(0)}50%{transform:translateZ(30px) translateY(-1.6%)}}
.ob-empty{border:1px dashed var(--line);padding:40px;text-align:center;color:var(--mute);font-family:var(--mincho);letter-spacing:.1em}

/* ── 個人のカード（モーダル） ─────────────────── */
.ob-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(10px,4vw,40px);
  background:rgba(5,4,6,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ob-modal.open{display:flex}
.ob-box{position:relative;width:min(980px,100%);max-height:calc(100dvh - 24px);overflow:auto;display:grid;grid-template-columns:.95fr 1.05fr;
  border:1px solid rgba(216,184,121,.6);background:var(--panel);perspective:1200px}
.ob-box .lf{position:relative;min-height:520px;transform-style:preserve-3d;overflow:hidden}
.ob-box .lf i{position:absolute;inset:7% 7% 0 7%;background-size:cover;background-position:center;filter:brightness(.45) saturate(.8)}
.ob-box .lf .fr{position:absolute;inset:7% 7% 0 7%;border:1px solid rgba(216,184,121,.45);border-bottom:none;transform:translateZ(6px)}
.ob-box .lf .pw{position:absolute;inset:0;clip-path:inset(0 7% 0 7%)}
.ob-box .lf img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:translateZ(70px);transition:transform .2s;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.7))}
.ob-box .lf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,var(--panel) 92%);pointer-events:none}
.ob-box.flat .lf .pw{clip-path:none}
.ob-box.flat .lf img{inset:7% 7% 0 7%;width:86%;height:93%;transform:none;filter:none}
.ob-box .rt{padding:clamp(24px,4vw,46px)}
.ob-box .x{all:unset;cursor:pointer;position:absolute;top:14px;right:16px;z-index:5;font-size:22px;color:var(--silver);padding:6px 10px}
.ob-box .kk{font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:.3em;color:#D8B879}
.ob-box h3{font-family:var(--mincho);font-weight:400;font-size:clamp(28px,3.6vw,40px);letter-spacing:.1em;margin:12px 0 4px}
.ob-box .en2{font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:.36em;color:var(--mute);text-transform:uppercase}
.ob-prof{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin:24px 0 18px}
.ob-prof div{padding:14px 16px;border-bottom:1px solid var(--line)}
.ob-prof div:nth-child(odd){border-right:1px solid var(--line)}
.ob-prof small{display:block;font-size:10px;letter-spacing:.24em;color:var(--mute);margin-bottom:6px}
.ob-prof span{font-size:14.5px;letter-spacing:.06em}
.ob-fit{display:flex;align-items:center;gap:12px;border:1px solid rgba(216,184,121,.5);padding:12px 14px;margin-bottom:18px;font-family:var(--mincho);font-size:12.5px;letter-spacing:.1em}
.ob-fit b{color:#E8D3A2;font-weight:400}
.ob-today{font-family:var(--mincho);font-size:12.5px;letter-spacing:.1em;color:var(--silver);margin-bottom:18px}
.ob-today b{color:#fff;background:var(--hi);padding:3px 8px;margin-right:8px;font-weight:400}
.ob-act{display:flex;gap:10px;flex-wrap:wrap}
.ob-act .ob-btn{flex:1 1 200px;justify-content:center}
.ob-small{margin-top:16px;font-size:10.5px;line-height:1.9;letter-spacing:.06em;color:var(--mute)}
@media (max-width:760px){
  .ob-box{grid-template-columns:1fr}
  .ob-box .lf{min-height:62vw}
}
@media (prefers-reduced-motion:reduce){
  .ob-card .pp,.ob-card .clip,.ob-card:hover .pp,.ob-card:hover .clip,.ob-star .st,.ob-box .lf img{transform:none!important;transition:none;animation:none}
}