/* sample-player.css  2026-09-06 デザイン部（是正台帳 L-057）
   カードの「▶ サンプル」ボタン＋ライトボックス（動画・画像・サンプル無しの案内）。
   /go ページの埋め込みプレイヤーとギャラリーの拡大も同じ部品。SP 基準、PC は末尾の @media。 */
/* カードの 3 状態（2026-09-06 山川さん）: 動画あり＝中央の白丸▶／動画なし・画像あり＝右下の白ピル（写真アイコン＋枚数）／どちらも無し＝無印 */
.mz-sp-btn{position:absolute;z-index:6;box-sizing:border-box;margin:0;padding:0;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;font:700 12px/1 "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif}
.mz-sp-btn--play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.mz-sp-btn--play{--mz-tri:14px}
.mz-sp-btn--play:before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-40%,-50%);border-style:solid;border-width:calc(var(--mz-tri)*.6) 0 calc(var(--mz-tri)*.6) var(--mz-tri);border-color:transparent transparent transparent #e4007f}
.mz-sp-btn:focus{outline:none}
.mz-sp-btn:focus-visible{outline:2px solid #e4007f;outline-offset:2px}
.mz-sp-row{cursor:pointer}
.mz-sp-row:hover{background:#fdf3f8}
.mz-sp-btn--play:hover{background:rgba(255,255,255,.95)}
.mz-sp-btn--pics{height:22px;padding:0 8px 0 7px;border-radius:11px;background:rgba(255,255,255,.8);color:#e4007f;font-size:12px;line-height:22px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.mz-sp-btn--pics:before{content:"";display:inline-block;width:12px;height:10px;margin:0 4px 0 0;vertical-align:-1px;background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Crect x='.6' y='.6' width='10.8' height='8.8' rx='1.4' fill='none' stroke='%23e4007f' stroke-width='1.2'/%3E%3Ccircle cx='4' cy='3.6' r='1.1' fill='%23e4007f'/%3E%3Cpath d='M1.5 8.2l3-3 2 2 1.6-1.6 2.4 2.6z' fill='%23e4007f'/%3E%3C/svg%3E") no-repeat center/contain}
.mz-sp-btn--pics:hover{background:rgba(255,255,255,.95)}
/* PC ホバー: ジャケットにピンク 25% */
.mz-sp-hover{position:absolute;z-index:5;background:rgba(228,0,127,.25);border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s}
@media (hover:hover){ .c-list-works-item:hover .mz-sp-hover,.rk-item:hover .mz-sp-hover,.c-list-sample-item:hover .mz-sp-hover{opacity:1} }
/* 4コマ横長ストリップ（例 1338×233）は 1 コマ目を切り出す（SP/PC 共通。ギャラリーがある作品は JS が cap_l_01 に差し替える） */
.c-list-works-item .works-detail-img.mz-strip,.rk-media img.mz-strip,.sample-thum-img.mz-strip,img.mz-go-jacket.mz-strip{object-fit:cover!important;object-position:left center!important}
/* カード左上のショップロゴ（妄想族 .bx-works-maker と同じ位置・幅 28%・最小 45px。DESIGN_RULES の例外） */
.mz-sp-maker{position:absolute;z-index:5;display:block;box-sizing:border-box;width:34%;min-width:64px;max-width:110px;padding:2px;border-radius:0 0 4px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.25);background:#fff;overflow:hidden}
.mz-sp-maker img{display:block;width:100%;height:auto}
.mz-sp-maker--row{position:static!important;display:inline-block;margin:0 0 4px;padding:2px 7px!important;border-radius:4px!important;background:#fdeef6!important;box-shadow:none!important;color:#e4007f;font:700 10px/1.4 "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.mz-sp-maker--txt{width:auto!important;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:3px 7px;border-radius:0 0 6px 0;background:rgba(255,255,255,.92);color:#e4007f;font:700 10px/1.3 "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;white-space:nowrap;text-decoration:none}
/* 再生できない時の案内（動画の代わりに即表示）と「音を出す」 */
.mz-sp-fallback{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;padding:16px;background:rgba(20,10,16,.9);color:#fff;text-align:center}
.mz-sp-fallback-txt{margin:0;font-size:14px;line-height:1.6}
.mz-sp-fallback-btn{display:inline-block;padding:14px 22px;border-radius:8px;background:#e4007f;color:#fff!important;font-size:16px;font-weight:700;text-decoration:none!important;box-shadow:0 2px 0 #b3005f}
.mz-sp-unmute{position:absolute;right:10px;top:10px;z-index:4;padding:8px 12px;border:0;border-radius:16px;background:rgba(255,255,255,.9);color:#e4007f;font-size:13px;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none}
/* ---- ライトボックス ---- */
body.mz-sp-open{overflow:hidden}
.mz-sp-ov{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:10px;background:rgba(0,0,0,.84);-webkit-overflow-scrolling:touch}
.mz-sp-box{position:relative;box-sizing:border-box;width:100%;max-width:760px;max-height:100%;overflow:auto;border-radius:12px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.mz-sp-close{position:absolute;top:6px;right:6px;z-index:3;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font:400 24px/36px Arial,sans-serif;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.mz-sp-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.mz-sp-stage video,.mz-sp-stage iframe{display:block;width:100%;height:100%;border:0;background:#000}
.mz-sp-stage img.mz-sp-img{display:block;width:100%;height:100%;object-fit:contain;background:#111}
.mz-sp-stage--img{aspect-ratio:auto;max-height:70vh;min-height:200px;display:flex;align-items:center;justify-content:center}
.mz-sp-stage--img img.mz-sp-img{width:auto;max-width:100%;height:auto;max-height:70vh}
.mz-sp-nav{position:absolute;top:50%;z-index:2;width:38px;height:38px;margin-top:-19px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#e4007f;font:700 20px/38px Arial,sans-serif;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none}
.mz-sp-nav--prev{left:8px}.mz-sp-nav--next{right:8px}
.mz-sp-count{position:absolute;right:10px;bottom:8px;z-index:2;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px}
/* 年齢確認（既存トップと同じ文言。確認前は再生させない） */
.mz-sp-age{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:16px;background:rgba(20,10,16,.96);color:#fff;text-align:center}
.mz-sp-age p{margin:0 0 12px;font-size:14px;line-height:1.7}
.mz-sp-age p span{display:block;font-size:17px;font-weight:700}
.mz-sp-age-btns{display:flex;gap:10px}
.mz-sp-age-btns button{min-width:110px;padding:12px 16px;border:0;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none}
.mz-sp-age-yes{background:#e4007f;color:#fff}.mz-sp-age-no{background:#9b9b9b;color:#fff}
/* サンプル無し */
.mz-sp-none{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;box-sizing:border-box;padding:14px;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.8));color:#fff;text-align:center}
.mz-sp-none p{margin:0;font-size:13px;line-height:1.6;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.mz-sp-none p b{display:block;font-size:15px;margin-bottom:4px}
/* 情報・ボタン */
.mz-sp-info{padding:12px 14px 16px}
.mz-sp-title{margin:0 0 4px;color:#2a2230;font-size:14px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mz-sp-sub{margin:0 0 10px;color:#8a7d88;font-size:12px}
.mz-sp-sub b{color:#e4007f}
.mz-sp-actions{display:flex;flex-direction:column;gap:8px}
.mz-sp-cta{display:block;box-sizing:border-box;padding:14px 12px;border-radius:8px;background:#e4007f;color:#fff!important;font-size:15px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none!important;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.mz-sp-cta:hover{background:#c3006c}
.mz-sp-links{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
.mz-sp-links a{color:#e4007f;font-size:13px;text-decoration:underline}
.mz-sp-note{margin:10px 0 0;color:#6f6270;font-size:12px;line-height:1.7;text-align:center}
.mz-sp-note a{color:#e4007f;text-decoration:underline}
/* /go 埋め込み（ページ内） */
.mz-sp-inline{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#000}
.mz-sp-inline .mz-sp-fallback{border-radius:10px}
.mz-sp-inline video{display:block;width:100%;height:100%;background:#000}
.mz-sp-inline .mz-sp-age{border-radius:10px}
.mz-sp-inline-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.mz-sp-inline-play{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;border:0;background:rgba(0,0,0,.25);cursor:pointer;-webkit-appearance:none;appearance:none}
.mz-sp-inline-play span{display:inline-block;padding:12px 22px 12px 18px;border-radius:30px;background:rgba(228,0,127,.95);color:#fff;font-size:16px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.mz-sp-inline-play span:before{content:"";display:inline-block;width:0;height:0;margin-right:8px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;vertical-align:-2px}
@media (min-width:1024px){
  .mz-sp-box{max-width:820px}
  .mz-sp-info{padding:16px 20px 20px}
  .mz-sp-title{font-size:16px}
  .mz-sp-actions{flex-direction:row;align-items:center;justify-content:center;gap:16px}
  .mz-sp-cta{min-width:320px}
}