/* ===== movira フロントCSS（標準表示スタイル: 白系・モバイルファースト） ===== */ :root { --mv-bg: #ffffff; --mv-text: #0f0f0f; --mv-text-sub: #606060; --mv-border: #e5e5e5; --mv-surface: #f7f7f7; --mv-surface-2: #f2f2f2; --mv-accent: #f2c200; --mv-accent-dark: #1a1a1a; --mv-danger: #e53e3e; --mv-radius: 10px; --mv-header-h: 56px; /* スマホ下部固定ナビの高さ。iPhoneのホームバー分（safe-area）を含める。進捗バー・コメントパネル・投稿バーもこの値を見て位置を合わせる。 */ --mv-bottom-nav-h: calc(54px + env(safe-area-inset-bottom, 0px)); /* 押せないボタンの色（明るいテーマ） */ --mv-disabled-bg: #e2e2e6; --mv-disabled-text: #9a9aa2; } * { box-sizing: border-box; } /* ===== オーバースクロール時の白背景対策（iOS Safari / PWA） ===== 上端で下へ引っ張る・下端で上へ引っ張ると、iOSはではなく（キャンバス）の背景を露出させる。ここが未指定だと白のままになり、黒系テーマでは白い帯が出る。ヘッダーごと下がって上に白が見えるのも同じ理由。 1. overscroll-behavior で引っ張り自体を止める（iOS 16以降・PWAで有効） 2. 止まらない環境向けに、の背景をサイトテーマの色に合わせておくの2段構えにして、どちらの環境でも白が出ないようにする。テーマのクラスはにも付けている（front/layouts/*.blade.php）。 CSS変数だけを :root に置いても、body側で上書きしている黒系テーマの値はの背景へ伝わらないため。 */ html { background-color: #ffffff; /* 上端で下へ引っ張ったときだけ見える帯をヘッダー色で塗っておく。の背景はページ先頭（y=0）を基準に置かれるので、画像をちょうど1画面ぶん上へずらすと、通常時は見えず、引っ張った瞬間だけヘッダーの続きとして現れる（ヘッダーの上に白が出なくなる）。 */ background-image: linear-gradient(var(--mv-accent-dark), var(--mv-accent-dark)); background-repeat: no-repeat; background-size: 100% 100vh; background-position: 0 -100vh; overscroll-behavior: none; /* 横方向は clip を使う。hidden だと / がスクロール領域になり、 iOS Safari でアドレスバーが伸縮したときに position:fixed の下部ナビが画面途中へずれる原因になる。clip はスクロール領域を作らない。 */ overflow-x: clip; } html.mv-html-cinema { background-color: #101014; } /* ショート表示は全面黒。ヘッダーを出さないので上の帯も黒で揃える */ html:has(body.mv-shorts-mode) { background-color: #000000; background-image: none; } /* ===== ダブルタップ拡大の無効化（movira全体・iOS Safari / PWA） ===== manipulation は「ダブルタップで拡大」だけを止める指定で、 1本指のスクロール・2本指のピンチ拡大・通常のタップやボタン操作は残る。（viewportの user-scalable=no はピンチ拡大まで塞いでしまうため使わない）実際にタップされた要素の値が見られるため、だけでなく押される側の要素にも指定しておく。 */ html { touch-action: manipulation; } body.front-body, body.front-body a, body.front-body button, body.front-body input, body.front-body select, body.front-body textarea, body.front-body label, body.front-body summary, body.front-body video, body.front-body [role="button"] { touch-action: manipulation; } body.front-body { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; color: var(--mv-text); background: var(--mv-bg); line-height: 1.6; padding-bottom: calc(var(--mv-bottom-nav-h) + 6px); /* スマホ下部ナビ分 */ /* 引っ張りを子側でも止める（ページ内スクロールの連鎖を断つ） */ overscroll-behavior: none; /* 内容が短いページでも背景が画面下まで届くようにする（下端に白が出ない） */ min-height: 100dvh; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ===== 配信サービス表示スタイル（Netflix風・黒系: 仕様7-2） ===== */ body.front-body.style-cinema { --mv-bg: #101014; --mv-text: #f2f2f2; --mv-text-sub: #9a9aa2; --mv-border: #26262e; --mv-surface: #191920; --mv-surface-2: #202028; /* 押せないボタンの色（暗いテーマ） */ --mv-disabled-bg: #2a2a33; --mv-disabled-text: #6b6b76; } /* ===== ヘッダー（仕様8-1: 左サイドメニューなし・sticky） ===== */ .mv-header { position: sticky; top: 0; z-index: 100; height: var(--mv-header-h); background: var(--mv-accent-dark); color: #fff; display: flex; align-items: center; padding: 0 16px; gap: 16px; } .mv-logo { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 19px; color: #fff; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .mv-logo-mark { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--mv-accent) 60%, #f07b21 100%); display: flex; align-items: center; justify-content: center; color: #1a1a1a; font-size: 15px; flex-shrink: 0; } /* ===== ロゴとサイト名の見せ方（サイト設定＞デザイン）===== ロゴ画像とサイト名の両方をHTMLへ出しておき、ここで出し分ける。 PCは既定、スマホは 767px 以下（既存のブレークポイントをそのまま使う）。 */ .mv-logo-image { display: inline-flex; align-items: center; flex-shrink: 0; } .mv-logo-img { height: 30px; width: auto; max-width: 200px; object-fit: contain; display: block; } .mv-logo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* PC・タブレット */ .mv-logo--pc-logo .mv-logo-name { display: none; } .mv-logo--pc-name .mv-logo-image { display: none; } .mv-nav { display: flex; gap: 4px; align-items: center; flex: 1; } .mv-nav a { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: #e8e8e8; } .mv-nav a:hover { background: rgba(255,255,255,0.12); } .mv-nav a.active { background: rgba(242,194,0,0.22); color: var(--mv-accent); font-weight: 700; } .mv-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .mv-header-search input[type="search"] { width: 180px; } @media (min-width: 1200px) { .mv-header-search input[type="search"] { width: 340px; } /* PCは300〜400px */ } /* 検索フォーカス: ブラウザ標準の青枠を消し、サブカラー黄の細枠1本のみ表示（outlineとborderの二重枠にしない。キーボード操作時もこの枠で位置が分かる） */ .mv-header-search input[type="search"]:focus { outline: none; } .mv-header-search:focus-within { outline: 2px solid var(--mv-sub-color); outline-offset: 1px; border-radius: 999px; } input[type="search"].mv-form-control:focus { outline: none; border-color: var(--mv-sub-color); } .mv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; font-family: inherit; } .mv-btn-accent { background: var(--mv-accent); color: #1a1a1a; } .mv-btn-accent:hover { opacity: 0.9; } .mv-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .mv-btn-outline:hover { background: rgba(255,255,255,0.1); } .mv-btn-dark { background: var(--mv-accent-dark); color: #fff; } body.style-cinema .mv-btn-dark { background: #2c2c36; } .mv-btn-danger { background: var(--mv-danger); color: #fff; } /* 押せないボタン（条件を満たしていないときの申請ボタンなど）。見た目が通常のボタンのままだと「押せる」と誤解させるため、色・カーソル・hoverのすべてを押せない状態に揃える。 :disabled は button/input にしか付かないので、で作る場合は aria-disabled="true" を付ける。 */ .mv-btn:disabled, .mv-btn[aria-disabled="true"] { background: var(--mv-disabled-bg, #e2e2e6); color: var(--mv-disabled-text, #9a9aa2); border-color: transparent; cursor: not-allowed; /* hover・activeの変化も、押したときの動きも起こさせない */ pointer-events: none; box-shadow: none; } /* 種類ごとの指定より後に置いて、hoverでも色が戻らないようにする */ .mv-btn:disabled:hover, .mv-btn:disabled:active, .mv-btn:disabled:focus, .mv-btn[aria-disabled="true"]:hover, .mv-btn[aria-disabled="true"]:active { background: var(--mv-disabled-bg, #e2e2e6); color: var(--mv-disabled-text, #9a9aa2); opacity: 1; } /* ===== 共通左メニュー（YouTube型折り畳み式・独立スクロール） ===== */ :root { --mv-sb-w: 240px; } body.mv-sb-collapsed { --mv-sb-w: 72px; } .mv-sb-toggle { width: 40px; height: 40px; flex-shrink: 0; background: none; border: none; border-radius: 50%; color: #fff; font-size: 17px; cursor: pointer; } .mv-sb-toggle:hover { background: rgba(255,255,255,0.12); } .mv-layout { display: block; } .mv-sidebar { position: fixed; left: 0; top: var(--mv-header-h); bottom: 0; width: var(--mv-sb-w); z-index: 90; /* 白と区別できる非常に薄いグレー（カードホバーより薄い）。ページ最下部まで継続 */ background: var(--mv-sb-bg, #fafafa); overflow-y: auto; overflow-x: hidden; /* メニュー内のみ独立スクロール */ padding: 10px 8px 20px; transition: width .18s ease; scrollbar-width: thin; /* Firefox: 細いスクロールバー */ scrollbar-color: transparent transparent; } .mv-sidebar:hover { scrollbar-color: rgba(0,0,0,0.22) transparent; } /* Chrome/Edge: 3px・通常時ほぼ非表示・ホバー/スクロール中のみ薄く表示・トラック背景なし */ .mv-sidebar::-webkit-scrollbar { width: 3px; } .mv-sidebar::-webkit-scrollbar-track { background: transparent; } .mv-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; } .mv-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); } body.style-cinema .mv-sidebar { background: var(--mv-sb-bg, #16161c); } body.style-cinema .mv-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); } .mv-sb-item { display: flex; align-items: center; gap: 18px; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; color: var(--mv-text); white-space: nowrap; overflow: hidden; } .mv-sb-item i { width: 20px; text-align: center; font-size: 16px; color: var(--mv-text-sub); flex-shrink: 0; } .mv-sb-item:hover { background: var(--mv-surface); } .mv-sb-item.active { background: var(--mv-surface-2); font-weight: 800; } .mv-sb-item.active i { color: var(--mv-text); } .mv-sb-divider { height: 1px; background: var(--mv-border); margin: 8px 6px; } .mv-sb-section-label { font-size: 11px; font-weight: 800; color: var(--mv-text-sub); padding: 6px 14px 2px; white-space: nowrap; overflow: hidden; } /* 折り畳み時（PC初期状態）: 主要項目（.is-primary）のみ表示し、その他の詳細項目・区切り線は隠す。全項目はハンバーガー展開時に表示する。 ※スマホのドロワーは後方の max-width:767px ブロックで元に戻す */ body.mv-sb-collapsed .mv-sb-item:not(.is-primary) { display: none; } body.mv-sb-collapsed .mv-sb-divider { display: none; } /* 折り畳み時: ラベル非表示・アイコンのみ */ body.mv-sb-collapsed .mv-sb-label { display: none; } body.mv-sb-collapsed .mv-sb-item { justify-content: center; padding: 12px 0; gap: 0; } body.mv-sb-collapsed .mv-sb-section-label { display: none; } body.mv-sb-collapsed .mv-sb-divider { margin: 8px 12px; } /* ===== 本文（共通メニュー右側・左寄せ。メニューとの間/右余白はPC約60px） ===== */ .mv-content { margin-left: var(--mv-sb-w); transition: margin-left .18s ease; min-height: calc(100vh - var(--mv-header-h)); } .mv-main { padding: 20px 16px; width: 100%; } @media (min-width: 1024px) { .mv-main { padding: 24px 60px; } } @media (max-width: 767px) { /* スマホ: サイドメニューはドロワー化（後方のスマホ用定義参照）。本文は全幅 */ .mv-content { margin-left: 0; } } .mv-section { margin-bottom: 36px; } .mv-section-title { font-size: 19px; font-weight: 800; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; } .mv-section-title a { font-size: 12px; color: var(--mv-text-sub); font-weight: 400; } /* ===== 動画カードグリッド（仕様9-5: 固定レイアウト・自動改行。サムネ大きめ） ===== */ .mv-grid { display: grid; gap: 20px 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .mv-grid-large { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } .mv-grid-short { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* カード: ホバーでサブカラー（黄）の透過背景＋角丸。幅はグリッドで可変（比率維持）。サブカラーはCSS変数管理（将来の管理画面設定参照用） */ :root { --mv-sub-color: #f2c200; --mv-card-hover: rgba(242, 194, 0, 0.16); } .mv-card { display: block; padding: 8px; border-radius: 12px; transition: background .12s; } .mv-card:hover { background: var(--mv-card-hover); } .mv-card-thumb-link { display: block; } .mv-card-title { display: block; } .mv-channel-link:hover, .mv-user-link:hover { color: #1a6fd4; } /* 公式認定バッジ（青い丸＋白いチェック）。名前のすぐ後ろへ小さく並べる */ .mv-official-badge { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; border-radius: 50%; background: #1a6fd4; color: #fff; font-size: 0.85em; line-height: 1; vertical-align: middle; margin-left: 3px; flex-shrink: 0; } .mv-official-badge i { font-size: 0.62em; } /* カテゴリ名（動画情報欄）。押すとそのカテゴリの一覧へ移動する */ .mv-category-link { color: inherit; } .mv-category-link:hover { color: #1a6fd4; text-decoration: underline; } .mv-avatar-link { flex-shrink: 0; } /* 段階読み込み（lazy-list.js） */ .mv-lazy-hidden { display: none !important; } .mv-lazy-sentinel { height: 1px; } .mv-card-info { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; } .mv-card-avatar { width: 36px; height: 36px; font-size: 15px; flex-shrink: 0; } .mv-card-texts { min-width: 0; display: block; } .mv-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--mv-surface-2); border-radius: var(--mv-radius); overflow: hidden; } /* ホバープレビュー */ .mv-thumb-preview { position: absolute; inset: 0; display: none; background: #000; z-index: 2; pointer-events: none; } .mv-thumb-preview.on { display: block; } .mv-preview-video, .mv-thumb-preview iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; pointer-events: none; } /* サムネイル画像は枠より1pxだけ大きく敷いて overflow:hidden で切る。角丸クリップの縁に下地（.mv-thumbのbackground＝暗色）が1px残って黒い線に見えるのを防ぐ。inlineの行間で下端に隙間が出ないよう block にする。 */ .mv-thumb img { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; display: block; } /* サムネイルを再生ページへのリンクにする箇所（動画管理一覧など）。見た目は変えず、クリックできることだけを示す。 */ .mv-thumb-link { display: block; cursor: pointer; text-decoration: none; color: inherit; } .mv-thumb-link:hover, .mv-thumb-link:focus { text-decoration: none; } /* ショートは9:16固定枠。画像は引き伸ばさずcoverで自然に表示（自前／YouTubeとも統一）。 YouTubeショートの16:9サムネ（左右に余白が入る高解像度版）を使う場合は、中央を切り出して縦長枠へ収める（実映像は中央にある）。 */ .mv-thumb-short { aspect-ratio: 9 / 16; background: var(--mv-surface-2); } .mv-thumb-short img { object-fit: cover; object-position: center; } .mv-thumb-short-contain { aspect-ratio: 9 / 16; background: var(--mv-surface-2); } .mv-thumb-short-contain img { object-fit: cover; } .mv-duration { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,0.8); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px; } .mv-badge-visibility { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,0.75); color: #ffd54d; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; } .mv-card-title { margin: 0 0 3px; font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; } .mv-card-meta { font-size: 14px; color: var(--mv-text-sub); line-height: 1.5; } /* ===== 通常動画詳細（YouTube参考。sticky/fixedなし・本文へ重ならない） ===== */ .mv-watch-layout { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 1100px) { .mv-watch-layout { grid-template-columns: minmax(0, 1fr) 424px; } } /* プレイヤー枠の比率。枠を16:9に固定すると、16:9でない動画は contain で縮んで上下に黒帯が出る。枠そのものを動画の比率に合わせるため、--mv-player-ratio を player.js が loadedmetadata で実際の videoWidth/videoHeight から設定する。設定されるまで（読み込み前・JS無効時）は既定の16:9で描く。 */ .mv-player-wrap { position: relative; /* PCではstickyにしない。relativeは中央再生ボタンの配置基準 */ background: #000; border-radius: var(--mv-radius); overflow: hidden; aspect-ratio: var(--mv-player-ratio, 16 / 9); } /* スマホだけ、下へスクロールしてもプレイヤーが画面上部へ残る。本文（タイトル・コメント）を読みながら再生を続けられるようにする。位置はヘッダーのすぐ下。重なり順はヘッダー(100)より下、本文より上。 PCの見え方は変えない（この指定はスマホ幅のみ）。なお html/body の横方向は overflow-x: clip にしてあり、 hidden と違ってスクロール領域を作らないため sticky はそのまま効く。 */ @media (max-width: 767px) { .mv-player-wrap { position: sticky; top: var(--mv-header-h); z-index: 90; } } video.mv-player { width: 100%; height: 100%; display: block; background: #000; /* 枠が動画と同じ比率になるので、containでも余白は生じない。万一ずれても映像を切らない（coverにしない）。 */ object-fit: contain; } .mv-watch-title { font-size: 21px; font-weight: 800; margin: 16px 0 6px; } .mv-watch-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--mv-text-sub); font-size: 13px; } /* 動画詳細の投稿情報（通常動画・YouTube動画で共通・2行構成）。 1行目: アイコン＋投稿ユーザー名＋掲載チャンネル／ 2行目: 再生数・投稿日・カテゴリ PCでは各行を横並びにし、スマホでは自然に折り返す。 */ .mv-video-meta { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; } .mv-video-meta-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .mv-video-meta-primary { font-size: 14px; } .mv-video-meta-name { font-weight: 700; color: var(--mv-text); } .mv-video-meta-name .mv-user-link { color: var(--mv-text); } .mv-video-meta-name .mv-user-link:hover { color: #1a6fd4; } .mv-video-meta-channel { font-size: 13px; color: var(--mv-text-sub); } .mv-video-meta-channel .mv-channel-link { color: #1a6fd4; font-weight: 700; } .mv-video-meta-channel .mv-channel-link:hover { text-decoration: underline; } .mv-video-meta-sub { gap: 14px; font-size: 12px; color: var(--mv-text-sub); } .mv-video-meta-badge { font-size: 11px; font-weight: 700; } .mv-video-meta-notice { font-size: 11px; color: var(--mv-text-sub); background: var(--mv-surface); border-radius: var(--mv-radius); padding: 8px 10px; } .mv-video-meta-notice a { color: #1a6fd4; font-weight: 700; } /* YouTube元動画の情報。movira上の投稿情報とは別枠であることが分かるようにする */ .mv-external-source { margin: 10px 0 4px; padding: 10px 12px; background: var(--mv-surface); border-radius: var(--mv-radius); font-size: 12px; color: var(--mv-text-sub); } .mv-external-source-title { font-weight: 700; margin-bottom: 4px; } .mv-external-source-body { display: flex; gap: 14px; flex-wrap: wrap; } .mv-external-source-body a { color: #1a6fd4; } @media (max-width: 600px) { .mv-video-meta-line { gap: 8px; } .mv-video-meta-sub { gap: 10px; } } .mv-watch-actions { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; } /* 操作ボタン列の共通の高さ。アイコンだけのボタン（よくない等）も同じ外形にする */ .mv-watch-actions { --mv-action-height: 36px; } .mv-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--mv-surface-2); border: none; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; font-family: inherit; color: var(--mv-text); /* テキストの有無で高さが変わらないように、行高と最小高さを固定する */ line-height: 1.2; min-height: var(--mv-action-height, 36px); box-sizing: border-box; } /* いいね／よくないの数値・記号。両方が同じ表示領域を持つことで高さと文字位置が揃う */ .mv-chip-value { display: inline-block; min-width: 1em; text-align: center; font-variant-numeric: tabular-nums; } /* 読み上げ用のみ（画面には出さない） */ .mv-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 同じ列に並ぶフォーム部品（再生リスト選択）も同じ高さに揃える */ .mv-watch-actions .mv-form-control { height: var(--mv-action-height); padding-top: 0; padding-bottom: 0; box-sizing: border-box; align-self: center; } /* ===== 共有モーダル（動画詳細の「共有」） ===== */ .mv-share-modal { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; } .mv-share-modal[hidden] { display: none; } .mv-share-panel { background: var(--mv-surface); color: var(--mv-text); border-radius: var(--mv-radius); width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 16px 18px 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .mv-share-head { display: flex; align-items: center; margin-bottom: 10px; } .mv-share-title { font-size: 15px; font-weight: 800; } .mv-share-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--mv-text); font-size: 16px; padding: 4px 6px; } .mv-share-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .mv-share-tab { flex: 1; cursor: pointer; font-family: inherit; background: var(--mv-surface-2); border: none; border-radius: 999px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--mv-text); } .mv-share-tab.active { background: var(--mv-accent); color: #1a1a1a; } .mv-share-pane[hidden] { display: none; } .mv-share-note { font-size: 12px; color: var(--mv-text-sub); margin-bottom: 8px; line-height: 1.6; } .mv-share-copy-row { display: flex; gap: 8px; align-items: flex-start; } .mv-share-input { flex: 1; min-width: 0; font-family: inherit; font-size: 12px; border: 1px solid var(--mv-border); border-radius: 8px; padding: 8px 10px; background: var(--mv-surface-2); color: var(--mv-text); } .mv-share-code { resize: vertical; line-height: 1.5; } .mv-share-copy { flex-shrink: 0; } /* コメントOFFの動画で、コメント関連ボタンを無効状態と分かる見た目にする */ .mv-comments-disabled { opacity: 0.45; cursor: default; } /* 報告フォームは操作ボタン列の中に置くが、開いたときだけ次の行へ全幅で回り込む */ .mv-watch-actions .mv-report-form { flex: 0 0 100%; } .mv-chip:hover { filter: brightness(0.95); } .mv-chip.active { background: var(--mv-accent); color: #1a1a1a; } /* メンバーシップ（チャンネル月額）・投げ銭 */ .mv-membership-box { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .mv-membership-state { display: inline-flex; align-items: center; gap: 6px; background: var(--mv-surface-2); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; } .mv-membership-link { font-size: 11px; color: #1a6fd4; } .mv-membership-note { font-size: 11px; color: var(--mv-text-sub); max-width: 260px; line-height: 1.6; } .mv-tip-form { max-width: 420px; margin: 10px 0 14px; } .mv-tip-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .mv-watch-actions .mv-tip-form { flex: 0 0 100%; } .mv-description { background: var(--mv-surface); border-radius: var(--mv-radius); padding: 14px 16px; font-size: 13px; white-space: pre-wrap; } .mv-deny-box { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #1a1a1a; color: #fff; border-radius: var(--mv-radius); text-align: center; padding: 20px; } /* 関連動画（右カラム: サムネ大きめ） */ .mv-related-item { display: flex; gap: 10px; margin-bottom: 14px; } .mv-related-item .mv-thumb { width: 200px; flex-shrink: 0; } .mv-related-item .mv-thumb-short-contain { width: 110px; } .mv-related-title { font-size: 14px; font-weight: 700; line-height: 1.4; } /* ===== ショート詳細（YouTube PC版ショート参考: 中央縦プレイヤー＋右操作ボタン） ===== */ .mv-short-watch { display: flex; justify-content: center; align-items: flex-start; gap: 18px; padding: 8px 0 32px; } .mv-short-stage { position: relative; width: min(430px, 92vw); } .mv-short-player-wrap { position: relative; background: #000; border-radius: 14px; overflow: hidden; /* 通常動画と同じ仕組み。既定はショートの9:16 */ aspect-ratio: var(--mv-player-ratio, 9 / 16); } .mv-short-player-wrap video.mv-player { width: 100%; height: 100%; object-fit: contain; } .mv-short-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: #fff; pointer-events: none; } .mv-short-overlay .mv-short-channel { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; } .mv-short-overlay .mv-short-title { font-size: 14px; margin-top: 6px; font-weight: 600; line-height: 1.4; } .mv-short-actions { display: flex; flex-direction: column; gap: 14px; align-self: flex-end; padding-bottom: 8px; } .mv-short-action { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--mv-text); font-size: 11px; font-weight: 700; } .mv-short-action .mv-short-action-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--mv-surface-2); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: filter 0.12s; } .mv-short-action:hover .mv-short-action-circle { filter: brightness(0.92); } .mv-short-action.active .mv-short-action-circle { background: var(--mv-accent); color: #1a1a1a; } /* 再生数は操作ではなく情報表示。見た目は他の項目とそろえ、押せる見せ方だけ外す */ .mv-short-info { cursor: default; } .mv-short-info:hover .mv-short-action-circle { filter: none; } .mv-short-related { margin-top: 8px; } /* ===== ショートの「︙」メニュー（通報） ===== PC … プレイヤー右下（標準コントロールの少し上）モバイル … 右側の操作列の最下段置き場所は違うが、メニューと通報フォームは1つだけ持つ（front/partials/short-more-menu）。 */ /* 位置は「︙」を押したときにJSが決める（front/partials/short-more-menu）。画面の端を基準にすると、プレイヤーから離れた場所へ出てしまうため。 */ .mv-short-more-menu { position: fixed; top: 0; left: 0; z-index: 60; background: var(--mv-surface); border: 1px solid var(--mv-border); border-radius: 10px; padding: 6px; min-width: 140px; box-shadow: 0 6px 24px rgba(0,0,0,0.28); } .mv-short-more-menu[hidden] { display: none; } .mv-short-more-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--mv-text); font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 6px; } .mv-short-more-item:hover { background: var(--mv-surface-2); } /* 通報フォームは全画面のショートの上へ重ねる（中身は通常動画と同じ部品） */ .mv-short-report { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.55); } .mv-short-report[hidden] { display: none; } .mv-short-report .mv-report-form { width: min(420px, 100%); max-height: 90vh; overflow: auto; } /* PC: プレイヤーの右端側。下部は標準コントロール（ブラウザが描く「︙」＝再生速度など）があるため、同じ位置に並べず上寄せに置く。丸い浮きボタンにはしない。 */ .mv-sf-more-pc { position: absolute; top: 10px; right: 8px; z-index: 30; width: 26px; height: 32px; padding: 0; background: rgba(0,0,0,0.45); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; } .mv-sf-more-pc:hover { background: rgba(0,0,0,0.72); } /* 操作列の「︙」はモバイルだけ。PCはプレイヤー側の1つに絞る（2つ出さない） */ .mv-sf-actions .mv-sf-more-mobile { display: none; } /* ===== コメント ===== */ .mv-comment { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--mv-border); } .mv-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mv-accent-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: 14px; /* 常に真円: 親のflex/gridや幅制約で縦横どちらかだけ潰れて楕円にならないようにする */ aspect-ratio: 1 / 1; align-self: center; } img.mv-avatar { object-fit: cover; max-width: none; } .mv-card-info .mv-avatar { align-self: flex-start; } body.style-cinema .mv-avatar { background: #2c2c36; } .mv-comment-name { font-size: 12px; font-weight: 700; } .mv-comment-body { font-size: 13px; margin-top: 2px; white-space: pre-wrap; } .mv-comment-date { font-size: 11px; color: var(--mv-text-sub); margin-left: 6px; font-weight: 400; } /* ===== フォーム ===== */ .mv-form-card { max-width: 480px; margin: 30px auto; border: 1px solid var(--mv-border); border-radius: 12px; padding: 28px 24px; background: var(--mv-bg); } .mv-form-title { font-size: 18px; font-weight: 800; text-align: center; margin: 0 0 20px; } .mv-form-group { margin-bottom: 16px; } .mv-form-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; color: var(--mv-text-sub); } .mv-form-control { width: 100%; padding: 10px 12px; border: 1.5px solid var(--mv-border); border-radius: var(--mv-radius); font-size: 14px; font-family: inherit; background: var(--mv-bg); color: var(--mv-text); } .mv-form-control:focus { outline: none; border-color: var(--mv-accent-dark); } .mv-form-error { color: var(--mv-danger); font-size: 12px; margin-top: 4px; } .mv-flash { margin: 12px auto 0; padding: 10px 16px; border-radius: var(--mv-radius); font-size: 13px; max-width: none; } @media (min-width: 1024px) { .mv-flash { margin: 12px 6% 0; } } .mv-flash-success { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; } .mv-flash-error { background: #fff5f5; border: 1px solid #feb2b2; color: #c53030; } /* ===== Googleログインボタン（仕様11-1 / 43-1） ===== 白地・薄いグレー枠のGoogle標準に近い見た目にする。「Google」の6文字はGoogleロゴと同じ配色（青・赤・黄・青・緑・赤）で出し、続く「でログイン」「で登録」はmoviraの文字色のまま置く。日本語部分まで多色にすると読みにくく、他のフォームと調子が合わなくなるため。サイズ・角丸・余白は既存の .mv-btn を継いだままにして、ログイン画面のバランスを変えない。 */ .mv-btn-google { width: 100%; justify-content: center; height: 44px; background: #fff; border: 1px solid #dadce0; color: var(--mv-text); /* 押せる要素だと分かる程度の弱い影。強い影はmoviraの他ボタンと浮いてしまう */ box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08); transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease; } /* hoverは「少し強調される」程度に留める（色は変えない） */ .mv-btn-google:hover { background: #f8f9fa; border-color: #c6c9ce; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.16); } .mv-btn-google:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; } /* Gアイコン（Googleレッド） */ .mv-btn-google .mv-google-icon { color: #ea4335; font-size: 15px; } /* 「Google」の文字。1文字ずつロゴ配色を当てる */ .mv-google-wordmark { letter-spacing: 0.1px; } .mv-google-wordmark .g1 { color: #4285f4; } /* G 青 */ .mv-google-wordmark .o1 { color: #ea4335; } /* o 赤 */ .mv-google-wordmark .o2 { color: #fbbc05; } /* o 黄 */ .mv-google-wordmark .g2 { color: #4285f4; } /* g 青 */ .mv-google-wordmark .l1 { color: #34a853; } /* l 緑 */ .mv-google-wordmark .e1 { color: #ea4335; } /* e 赤 */ /* 配信サービス表示（暗い背景）でも白ボタンのまま出す。 Google側のブランド指針に沿い、白地・濃い文字を崩さない。 */ body.style-cinema .mv-btn-google { background: #fff; color: #1f1f1f; } body.style-cinema .mv-btn-google:hover { background: #f8f9fa; } /* ===== 収益化申請（仕様33-2） ===== 基準・現在値・判定を横並びで読ませる表と、判定バッジ。達成=青 / 未達=赤 / 確認が必要=グレーの3色だけを使う。 */ .mv-monet-table { width: 100%; border-collapse: collapse; font-size: 13px; } .mv-monet-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--mv-text-sub); padding: 6px 8px; border-bottom: 1px solid var(--mv-border); } .mv-monet-table td { padding: 9px 8px; border-bottom: 1px solid var(--mv-border); } .mv-monet-table tr:last-child td { border-bottom: none; } .mv-monet-req { color: var(--mv-text-sub); font-size: 12px; white-space: nowrap; } .mv-judge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .mv-judge-ok { background: #e8f0fe; color: #1a56b0; } .mv-judge-short { background: #fdecea; color: #c5221f; } .mv-judge-check { background: #f1f3f4; color: #5f6368; } .mv-monet-status { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--mv-border); border-radius: var(--mv-radius); padding: 12px 14px; font-size: 13px; margin-bottom: 16px; } /* ===== 紙芝居バナー（未実装明示） ===== */ .mv-stub-banner { display: flex; align-items: flex-start; gap: 10px; background: #fffaf0; border: 1px solid #f6ad55; color: #c05621; border-radius: var(--mv-radius); padding: 12px 14px; font-size: 13px; margin: 12px 0; } body.style-cinema .mv-stub-banner { background: rgba(240,123,33,0.12); } /* ===== 投稿フォーム STEP（仕様12-2） ===== */ .mv-upload-step { border: 1px solid var(--mv-border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; } .mv-upload-step summary { padding: 14px 16px; font-weight: 800; font-size: 14px; cursor: pointer; background: var(--mv-surface); list-style: none; display: flex; align-items: center; gap: 8px; } .mv-upload-step summary::before { content: '▸'; transition: transform 0.15s; } .mv-upload-step[open] summary::before { transform: rotate(90deg); } .mv-upload-step-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .mv-upload-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--mv-bg); border-top: 1px solid var(--mv-border); padding: 10px 16px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; } .mv-progress { height: 8px; background: var(--mv-surface-2); border-radius: 4px; overflow: hidden; flex: 1; max-width: 320px; } .mv-progress-fill { height: 100%; background: var(--mv-accent); width: 0%; transition: width 0.2s; } /* ===== マイページ（YouTube風の柔らかいサイドメニュー） ===== */ .mv-mypage-layout { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 960px) { .mv-mypage-layout { grid-template-columns: 240px minmax(0, 1fr); } } .mv-mypage-side { min-width: 0; } .mv-mypage-profile { display: flex; align-items: center; gap: 12px; padding: 4px 10px 16px; border-bottom: 1px solid var(--mv-border); margin-bottom: 12px; } .mv-mypage-nav { display: flex; flex-direction: column; gap: 2px; } .mv-mypage-nav-label { font-size: 11px; font-weight: 800; color: var(--mv-text-sub); padding: 8px 12px 4px; letter-spacing: 0.5px; } .mv-mypage-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: var(--mv-text); } .mv-mypage-nav-item i { width: 18px; text-align: center; color: var(--mv-text-sub); font-size: 15px; } .mv-mypage-nav-item:hover { background: var(--mv-surface); } .mv-mypage-nav-item.active { background: var(--mv-surface-2); font-weight: 800; } .mv-mypage-nav-item.active i { color: var(--mv-text); } .mv-mypage-stub-badge { margin-left: auto; font-size: 9px; font-weight: 700; background: var(--mv-surface-2); color: var(--mv-text-sub); border-radius: 4px; padding: 1px 5px; } .mv-mypage-nav-item.active .mv-mypage-stub-badge { background: var(--mv-bg); } .mv-mypage-content { min-width: 0; } /* マイページホームカード */ .mv-mypage-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 8px; } .mv-mypage-card { border: 1px solid var(--mv-border); border-radius: 12px; padding: 14px 16px; background: var(--mv-bg); } .mv-mypage-card.warn { background: #fffaf0; border-color: #f6ad55; } .mv-mypage-card.danger { background: #fff5f5; border-color: #feb2b2; } .mv-mypage-card-label { font-size: 11px; font-weight: 700; color: var(--mv-text-sub); margin-bottom: 6px; } .mv-mypage-card-value { font-size: 24px; font-weight: 800; font-family: 'Lexend', sans-serif; } /* ===== タブ・テーブル ===== */ .mv-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; } .mv-tabs a { padding: 7px 14px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 700; background: var(--mv-surface-2); color: var(--mv-text); } .mv-tabs a.active { background: var(--mv-accent-dark); color: #fff; } /* 実績がまだ無い区分。機能としては使えることが分かるよう、非表示にはせずグレーで出す */ .mv-tabs .mv-tab-empty { padding: 7px 14px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 700; background: var(--mv-surface-2); color: var(--mv-text-sub); opacity: 0.55; cursor: default; user-select: none; } body.style-cinema .mv-tabs a.active { background: var(--mv-accent); color: #1a1a1a; } .mv-table { width: 100%; border-collapse: collapse; font-size: 13px; } .mv-table th { text-align: left; font-size: 11px; color: var(--mv-text-sub); padding: 8px 10px; border-bottom: 1px solid var(--mv-border); white-space: nowrap; } .mv-table td { padding: 10px; border-bottom: 1px solid var(--mv-surface-2); vertical-align: middle; } .mv-status-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap; background: #f1f3f5; color: #5a6070; } /* 動画管理一覧の状態セル。変換の進捗バーは右下の共通パネルが受け持つが、ここへ置かれた場合でも列幅を押し広げないようセル内に収める */ [data-video-status-cell] .mv-progress, [data-video-status-cell] .mv-progress-track { max-width: 100%; } .mv-status-badge.published { background: #f0fff4; color: #276749; } .mv-status-badge.processing { background: #e8f1fb; color: #1a6fd4; } .mv-status-badge.failed { background: #fff5f5; color: #c53030; } /* ===== ページネーション ===== */ .mv-pagination { display: flex; gap: 6px; justify-content: center; margin: 24px 0; flex-wrap: wrap; } .mv-pagination a, .mv-pagination span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mv-border); border-radius: var(--mv-radius); font-size: 13px; } .mv-pagination .current { background: var(--mv-accent-dark); color: #fff; border-color: var(--mv-accent-dark); } /* ===== フッター（本文コンテンツ領域内・左メニューへ重ねない） ===== */ .mv-content { display: flex; flex-direction: column; } .mv-content > .mv-main { flex: 1; } /* 短いページでもフッターを最下部へ（不自然な浮きを防ぐ） */ .mv-footer { background: #1a1a1a; color: #bbb; margin-top: 24px; padding: 28px 16px 28px; font-size: 12px; } .mv-footer-inner { max-width: 1720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 1024px) { .mv-footer { padding-left: 60px; padding-right: 60px; } } .mv-footer a { color: #ddd; margin-right: 16px; } @media (max-width: 767px) { /* スマホでは通常のサイトフッターを出さない（下部固定ナビが同じ導線を持つため）。下部固定ナビ側は従来どおり表示・固定のままにする。 PC・タブレット（768px以上）のフッターには影響しない。 */ .mv-footer { display: none; } } /* ===== スマホ下部ナビ（仕様8-3: 常時固定） ===== */ .mv-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--mv-bg); border-top: 1px solid var(--mv-border); display: flex; height: var(--mv-bottom-nav-h); /* iPhoneのホームバーへ文字が潜り込まないよう下だけ余白を足す */ padding-bottom: env(safe-area-inset-bottom, 0px); /* iOS Safari はアドレスバーの伸縮中に position:fixed の再配置が遅れ、画面途中でナビが止まったように見えることがある。合成レイヤーへ載せるとビューポートに追従するようになる（PWAの表示は従来どおり）。 */ transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .mv-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--mv-text-sub); gap: 2px; } .mv-bottom-nav a.active { color: var(--mv-text); font-weight: 700; } .mv-bottom-nav a i { font-size: 17px; } @media (min-width: 768px) { .mv-bottom-nav { display: none; } body.front-body { padding-bottom: 0; } } /* ===== スマホ専用ヘッダー部品（アイコン・展開検索・ドロワー） ===== */ .mv-m-icon { width: 38px; height: 38px; flex-shrink: 0; display: none; align-items: center; justify-content: center; background: none; border: none; border-radius: 50%; color: #fff; font-size: 16px; cursor: pointer; padding: 0; } .mv-m-icon:active, .mv-m-icon:hover { background: rgba(255,255,255,0.14); } .mv-m-searchbar { display: none; position: fixed; top: var(--mv-header-h); left: 0; right: 0; z-index: 140; background: var(--mv-bg); border-bottom: 1px solid var(--mv-border); padding: 10px 12px; gap: 8px; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,0.10); } body.mv-m-search-open .mv-m-searchbar { display: flex; } .mv-m-searchbar-close { width: 36px; height: 36px; flex-shrink: 0; background: var(--mv-surface-2); border: none; border-radius: 50%; color: var(--mv-text); cursor: pointer; } .mv-drawer-overlay { display: none; position: fixed; left: 0; right: 0; top: var(--mv-header-h); bottom: 0; background: rgba(0,0,0,0.45); z-index: 150; } body.mv-drawer-open .mv-drawer-overlay { display: block; } @media (max-width: 767px) { /* hidden はをスクロール領域にしてしまい、iOS Safari で下部固定ナビの位置がずれる原因になる。clip はスクロール領域を作らない。 */ body.front-body { overflow-x: clip; } .mv-nav { display: none; } /* スマホはヘッダー検索を隠す（検索アイコン→展開フォームを使用） */ .mv-header-search { display: none !important; } .mv-header { padding: 0 8px; gap: 6px; } .mv-header-right { gap: 2px; min-width: 0; } .mv-header-right .mv-btn { padding: 6px 10px; font-size: 12px; } .mv-logo { font-size: 16px; min-width: 0; overflow: hidden; } /* スマホの表示方法を適用する。先にPC用の指定を戻してから、スマホ用の指定を当てる（後勝ち）。 */ .mv-logo .mv-logo-name { display: inline-block; } .mv-logo .mv-logo-image { display: inline-flex; } .mv-logo--sp-logo .mv-logo-name { display: none; } .mv-logo--sp-name .mv-logo-image { display: none; } /* 横幅が狭いので、ロゴ＋サイト名でも右端が切れないよう詰める */ .mv-logo { gap: 5px; } .mv-logo-img { height: 24px; max-width: 120px; } .mv-logo--sp-both .mv-logo-name { font-size: 14px; max-width: 42vw; } .mv-logo--sp-name .mv-logo-name { max-width: 60vw; } /* スマホ構成: ハンバーガー＋ロゴ＋（検索/ユーザー/ログアウトのアイコン）。投稿ボタン・ユーザー名・文字ログアウトは非表示（右端切れ防止） */ .mv-m-icon { display: inline-flex; } .mv-header-post, .mv-header-user-name, .mv-header-logout-pc { display: none !important; } /* ハンバーガー: ドロワー開閉として表示 */ .mv-sb-toggle { display: block; } /* サイドメニューをドロワー化（本文を押し出さない・ラベルは常時表示） */ .mv-sidebar { display: block; width: 264px !important; z-index: 160; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.18); } body.mv-drawer-open .mv-sidebar { transform: translateX(0); } body.mv-sb-collapsed .mv-sb-label { display: inline; } body.mv-sb-collapsed .mv-sb-item { justify-content: flex-start; padding: 9px 14px; gap: 18px; } body.mv-sb-collapsed .mv-sb-section-label { display: block; } /* スマホのドロワーは従来どおり全項目を表示する（PCの主要項目のみ表示を打ち消す） */ body.mv-sb-collapsed .mv-sb-item:not(.is-primary) { display: flex; } body.mv-sb-collapsed .mv-sb-divider { display: block; } .mv-main { padding: 16px 12px; } /* スマホのカードアバターは少し小さく（タイトル・投稿者情報の幅を確保。真円維持） */ .mv-card-info .mv-avatar { width: 28px !important; height: 28px !important; font-size: 12px !important; } /* スマホ: 通常動画は1列（タイトル・投稿者・再生数が詰まらない幅を確保）、ショートのみ2列 */ .mv-grid { grid-template-columns: 1fr; } .mv-grid-large { grid-template-columns: 1fr; } .mv-grid-short { grid-template-columns: repeat(2, 1fr); } .mv-upload-actionbar { bottom: var(--mv-bottom-nav-h); } .mv-related-item .mv-thumb { width: 150px; } .mv-short-watch { flex-direction: column; align-items: center; } .mv-short-actions { flex-direction: row; align-self: center; } } /* ===== サムネイル・見出しに出すバッジ（共通部品） ===== 動画の配信元（YouTube / 他movira）や種別（ショート）を示すバッジは、一覧・詳細・ショートで見た目も役割も同じなので、ここ1か所だけで持つ。画面ごと・動画種別ごとに同じCSSを書き写さない。使い方（HTMLは front/partials/source-badge.blade.php が作る）: .mv-badge … 基本形（サムネイル左下へ重ねる） .mv-badge-youtube / -movira / -short … 色だけを変える .mv-badge-inline … 見出しや文中へ並べる（重ねない） .mv-badge-compact … アイコンだけ（小さいサムネイル用）アイコンの縦位置: アイコンを文字として置くと、ベースライン・行間の扱いがブラウザで違うため Chromeでは中央、Firefoxでは少し上、といったズレが出る。アイコンを固定サイズの入れ物（.mv-badge-icon）に入れ、その中で中央寄せすることで、フォントの都合に左右されないようにする。ブラウザ別の打ち消し（margin-top等）は入れない。 */ .mv-badge { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 12px); box-sizing: border-box; padding: 3px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 1; /* 親がflexでも潰れないようにする（一覧カードのサムネイル内など） */ flex-shrink: 0; } .mv-badge-icon { flex: 0 0 auto; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; } /* サムネイル内では .mv-thumb img が画像を全面へ広げるため、バッジのアイコン画像だけはその指定より強く元のサイズへ戻す */ .mv-badge img.mv-badge-icon { position: static; width: 14px; height: 14px; max-width: 14px; object-fit: contain; border-radius: 3px; display: block; } /* 元サイト名は長いことがある。バッジ全体を広げず、文字側だけを省略する */ .mv-badge-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-badge-inline { position: static; vertical-align: middle; max-width: 100%; } .mv-badge-compact { padding: 3px 5px; } .mv-badge-youtube { background: rgba(255,0,0,0.92); color: #fff; } /* 他movira動画はYouTubeと見分けが付くよう黒背景＋黄色のmoviraアイコン */ .mv-badge-movira { background: rgba(0,0,0,0.92); color: #f2c200; } /* 種別バッジ（ショート）。位置・余白・文字の指定は共通の .mv-badge が持つ */ .mv-badge-short { background: rgba(242,194,0,0.92); color: #1a1a1a; } .mv-external-row { display: grid; gap: 20px 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } @media (max-width: 767px) { .mv-external-row { grid-template-columns: 1fr; } /* スマホ通常動画は1列 */ } /* ===== ミニプレイヤー（右下固定・下部ナビ/フッターへ重ねない） ===== */ .mv-miniplayer { position: fixed; right: 16px; bottom: 16px; z-index: 300; width: min(360px, calc(100vw - 32px)); background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.35); } .mv-miniplayer-short { width: min(200px, calc(100vw - 32px)); } .mv-miniplayer-video-wrap { cursor: pointer; } .mv-miniplayer-video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; } /* YouTubeミニ: YT APIがdivをiframeへ差し替えるため、iframe側にも16:9を適用 */ .mv-miniplayer-video-wrap iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; background: #000; } .mv-miniplayer-short .mv-miniplayer-video { aspect-ratio: 9 / 16; } .mv-miniplayer-bar { display: flex; align-items: center; gap: 6px; background: #16161c; padding: 6px 8px; } .mv-miniplayer-btn { width: 30px; height: 30px; flex-shrink: 0; background: rgba(255,255,255,0.10); border: none; border-radius: 50%; color: #fff; cursor: pointer; font-size: 12px; } .mv-miniplayer-btn:hover { background: rgba(255,255,255,0.22); } .mv-miniplayer-title { flex: 1; min-width: 0; color: #eee; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mv-miniplayer-title:hover { color: var(--mv-accent); } @media (max-width: 767px) { .mv-miniplayer { right: 10px; bottom: 66px; } /* スマホ下部ナビの上 */ } /* ===== 視聴履歴（YouTube型・日付グループ） ===== */ .mv-history-group { margin-bottom: 30px; } .mv-history-date { font-size: 16px; font-weight: 800; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--mv-border); } .mv-history-shorts { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; } .mv-history-shorts .mv-card { width: 150px; flex-shrink: 0; } .mv-history-videos { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (max-width: 767px) { /* スマホ: 視聴履歴・最近視聴も通常1列／ショート2列 */ .mv-history-videos { grid-template-columns: 1fr; } .mv-history-shorts { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; gap: 12px; } .mv-history-shorts .mv-card { width: auto; } } /* ===== コメントUI（YouTube風下線型入力・返信・独自いいね） ===== */ .mv-comment-form { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; } .mv-reply-form { margin: 8px 0 4px; } .mv-comment-input { width: 100%; border: none; border-bottom: 1px solid var(--mv-border); background: transparent; color: var(--mv-text); font-size: 14px; font-family: inherit; padding: 6px 2px; resize: none; overflow: hidden; min-height: 32px; line-height: 1.5; } .mv-comment-input:focus { outline: none; border-bottom: 2px solid var(--mv-text); } .mv-comment-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .mv-comment-cancel { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--mv-text-sub); padding: 6px 14px; border-radius: 999px; } .mv-comment-cancel:hover { background: var(--mv-surface-2); } .mv-comment-submit { background: var(--mv-accent-dark); color: #fff; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 999px; } .mv-comment-submit:disabled { background: var(--mv-surface-2); color: var(--mv-text-sub); cursor: not-allowed; } .mv-comment-actions { display: flex; gap: 4px; margin-top: 4px; align-items: center; } .mv-comment-action-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--mv-text-sub); padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; } .mv-comment-action-btn:hover { background: var(--mv-surface-2); } .mv-comment-action-btn.active { color: var(--mv-text); } .mv-comment-action-btn.active i { color: #1a6fd4; } .mv-replies-toggle { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #1a6fd4; padding: 6px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; } .mv-replies-toggle:hover { background: rgba(26,111,212,0.08); } .mv-replies { padding-left: 6px; } /* ===== 広告枠共通コンポーネント（データ未設定時は非表示） ===== */ .mv-ad-slot { border: 1px solid var(--mv-border); border-radius: 12px; padding: 10px; margin-bottom: 16px; overflow: hidden; } .mv-ad-slot-label { font-size: 10px; color: var(--mv-text-sub); margin-bottom: 6px; } .mv-ad-slot-square { aspect-ratio: 1 / 1; } .mv-ad-slot-comments-bottom { margin-top: 16px; } /* ===== コメント折りたたみ（スマホ） ===== */ .mv-comments-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0 0 10px; cursor: default; font-family: inherit; color: var(--mv-text); text-align: left; } .mv-comments-chevron { display: none; color: var(--mv-text-sub); } @media (max-width: 767px) { .mv-comments-heading { cursor: pointer; } .mv-comments:not(.mv-comments-panelmode) .mv-comments-chevron { display: inline-block; transition: transform .15s; } .mv-comments.collapsed .mv-comments-body { display: none; } .mv-comments.collapsed .mv-comments-chevron { transform: rotate(0deg); } .mv-comments:not(.collapsed) .mv-comments-chevron { transform: rotate(180deg); } } /* ===== ショート連続再生フィード ===== */ .mv-shorts-mode .mv-footer { display: none; } .mv-shorts-mode .mv-main { padding: 0; } .mv-sf-viewport { position: relative; height: calc(100vh - var(--mv-header-h) - 0px); overflow: hidden; display: flex; /* コメントパネルを重ねず専用幅として並べる */ } .mv-sf-slides { height: 100%; flex: 1 1 auto; min-width: 0; } .mv-sf-slide { height: 100%; min-width: 0; /* 動画本体を左へ寄せ、左側情報欄を広く取る */ display: flex; align-items: center; justify-content: flex-start; gap: 22px; padding: 14px 0 14px clamp(12px, 2vw, 28px); } .mv-sf-stage { position: relative; height: calc(100% - 8px); aspect-ratio: 9 / 16; max-width: 100%; min-width: 0; background: #000; border-radius: 14px; overflow: hidden; flex-shrink: 1; /* 小さいPC画面・パネル表示時は縮めて横はみ出しを防ぐ */ } .mv-sf-mount, .mv-sf-video { position: absolute; inset: 0; width: 100%; height: 100%; } video.mv-sf-video { object-fit: contain; background: #000; } .mv-sf-video iframe, iframe.mv-sf-video { width: 100%; height: 100%; border: 0; } .mv-sf-deny { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 700; text-align: center; padding: 20px; } .mv-sf-deny i { font-size: 30px; color: var(--mv-accent); } /* PC: 左側情報（1文字ずつの不自然な折り返しが起きない幅を確保） */ .mv-sf-info { width: clamp(280px, 26vw, 460px); flex: 0 1 auto; min-width: 200px; align-self: flex-end; padding-bottom: 24px; } /* .mv-sf-pc-onlyのdisplay:flex(row)が情報欄へ効くとタイトルが縦割れするため縦積みへ固定 */ .mv-sf-info.mv-sf-pc-only { display: block; } .mv-sf-info-channel { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .mv-sf-info-title { font-size: 17px; font-weight: 800; line-height: 1.4; margin-bottom: 6px; overflow-wrap: break-word; } .mv-sf-info-desc { font-size: 12px; color: var(--mv-text-sub); line-height: 1.5; overflow-wrap: break-word; } .mv-sf-info-meta { font-size: 12px; color: var(--mv-text-sub); margin-top: 8px; } /* 右側アクション */ .mv-sf-actions { display: flex; flex-direction: column; gap: 14px; align-self: flex-end; padding-bottom: 24px; flex-shrink: 0; } /* PC: 上下移動ボタン（画面右側） */ .mv-sf-navbtns { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 20; } .mv-sf-navbtn { width: 46px; height: 46px; border-radius: 50%; background: var(--mv-surface-2); border: none; cursor: pointer; font-size: 16px; color: var(--mv-text); } .mv-sf-navbtn:hover { filter: brightness(0.93); } .mv-sf-navbtn:disabled { opacity: .35; cursor: not-allowed; } /* コメントパネル（開いた時だけ・動画や操作ボタンへ重ねない専用幅。開くと動画・情報欄側が縮み、閉じると元の配置へ戻る） */ .mv-sf-comments { flex: 0 0 min(400px, 36vw); width: min(400px, 36vw); margin: 10px 88px 10px 0; background: var(--mv-bg); border: 1px solid var(--mv-border); border-radius: 14px; flex-direction: column; z-index: 30; box-shadow: 0 8px 30px rgba(0,0,0,0.18); } .mv-sf-comments-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--mv-border); } .mv-sf-comments-close { width: 32px; height: 32px; border-radius: 50%; background: var(--mv-surface-2); border: none; cursor: pointer; color: var(--mv-text); } .mv-sf-comments-body { flex: 1; overflow-y: auto; padding: 4px 14px 14px; } /* スマホ表示切替 */ .mv-sf-mobile-only { display: none; } .mv-sf-pc-only { display: flex; } /* スマホ: 進捗バー・上部バー */ .mv-sf-progress { position: fixed; left: 0; right: 0; bottom: var(--mv-bottom-nav-h); height: 3px; background: rgba(255,255,255,0.25); z-index: 120; } .mv-sf-progress-fill { height: 100%; width: 0%; background: var(--mv-sub-color); } /* スマホ上部の操作エリア（ホーム・音量・検索）。 YouTubeショートと同じく、3つのボタンを1本のflex行へ並べる。絶対配置で重ねず、間に必ず余白（gap）を挟むことでタップ領域が重ならないようにしている。 */ .mv-sf-topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 40; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px; align-items: center; gap: 12px; pointer-events: none; /* バーの余白部分は動画のスワイプを邪魔しない */ } .mv-sf-top-spacer { flex: 1 1 auto; min-width: 12px; } /* 音量と検索は右端でまとめるが、間隔は指の幅（約9mm）以上を確保する */ .mv-sf-top-group { display: flex; align-items: center; gap: 12px; pointer-events: none; } .mv-sf-top-btn { /* 44pxはiOSの推奨タップ領域。gapと合わせて隣のボタンへ被らない */ width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: none; padding: 0; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; /* ボタン自体は押せる */ -webkit-tap-highlight-color: transparent; } .mv-sf-top-btn:active { background: rgba(0,0,0,0.75); } /* ショートの種類切替（このサイトのショート / YouTubeショート）。文字は入れない。テナントごとにサイト名が違うため、固定の名称は出さない。サイト側はそのテナントのfavicon、YouTube側はYouTubeアイコンだけで示す。動画の操作・YouTube標準プレイヤーの操作を邪魔しないよう、上部バーのボタンより一回り小さくし、左上の端だけを使う。 */ .mv-sf-switch { position: absolute; top: 10px; left: 12px; z-index: 45; display: flex; align-items: center; gap: 8px; } .mv-sf-switch-btn { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.28); padding: 0; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .mv-sf-switch-btn img { width: 19px; height: 19px; object-fit: contain; display: block; } /* 選択中は白地に反転。既存の丸ボタンの形はそのままで、濃さだけ変える。（スマホは映像の上に置くので、黒地→白地の反転で選択中が分かる） */ .mv-sf-switch-btn.is-active { background: #fff; color: #000; border-color: #fff; } /* PCはショート枠の外＝サイトの地色の上に並ぶ。白系サイトでは「白＝選択中」が地色に溶けてしまい、未選択の黒い丸のほうが目立って逆に見えていた。 PCだけ、未選択は地に馴染む色、選択中はアクセント色にする。 */ @media (min-width: 768px) { .mv-sf-switch-btn { background: var(--mv-surface-2); color: var(--mv-text); border-color: var(--mv-border); } .mv-sf-switch-btn.is-active { background: var(--mv-accent); color: #1a1a1a; border-color: var(--mv-accent); } } /* その種類のショートが1本も無いときは押せない */ .mv-sf-switch-btn:disabled { opacity: 0.35; cursor: default; } /* スマホ: 全画面ショート（YouTube Shorts型・黒背景・セーフエリア考慮） */ @media (max-width: 767px) { /* iOS Safariのフォーム自動拡大対策（サイト全体）。入力欄の文字が16px未満だと、iPhoneはタップして入力状態に入った瞬間に画面全体を拡大する。拡大されたままレイアウトが崩れて見えるため、スマホ表示のときだけ入力文字を16pxにそろえる。変えるのは入力文字の大きさだけで、高さ・幅・余白・枠・ボタンには触れない。チェックボックス等の文字を持たない部品と、ボタン類は対象外。画面の一部にインラインで font-size を書いている箇所があるため、ここは !important で確実に上書きする。 meta viewport の user-scalable=no / maximum-scale は使わない（利用者自身のピンチ操作は残す）。 */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]), textarea, select { font-size: 16px !important; } body.front-body.mv-shorts-mode { background: #000; } .mv-shorts-mode .mv-header { display: none; } /* PC用ヘッダー非表示 */ .mv-shorts-mode .mv-content { margin-left: 0; } .mv-shorts-mode.front-body { padding-bottom: 0; } .mv-sf-mobile-only { display: flex; } .mv-sf-pc-only { display: none !important; } /* 上部バーの戻るボタン（44px）の右隣に並べる。上部バーと同じ safe-area を見て、縦位置を戻るボタンの中心へ合わせる */ .mv-sf-switch { top: calc(13px + env(safe-area-inset-top, 0px)); left: 64px; } .mv-sf-viewport { /* 下部ナビの上までを使い切る。高さは dvh（今表示されている高さ）で取る。iOSはアドレスバーの出入りで表示高さが変わり、100vh だと隠れる部分が出るため。 dvh を解釈できない環境では上の vh がそのまま使われる。 */ position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: calc(100vh - var(--mv-bottom-nav-h)); height: calc(100dvh - var(--mv-bottom-nav-h)); background: #000; } .mv-sf-slide { padding: 0; gap: 0; } .mv-sf-stage { height: 100%; max-width: 100vw; border-radius: 0; aspect-ratio: auto; width: 100%; } /* スマホのショートは画面いっぱいに出す。 contain だと 9:16 の動画でも表示領域との比率差で上下に黒帯が出るため、縦を埋める cover にする。縦横比は保つので横に伸びることはなく、はみ出した左右がわずかに切れるだけ。 */ video.mv-sf-video { object-fit: cover; } .mv-sf-info { display: none; } /* YouTubeショートの全面タッチ受け。映像は見えたまま（透明）で、タップだけをmovira側で拾う。情報欄(35)・アクション列(40)・上部バー(40)・切替(45)より下に置くので、それらのボタンはこれまでどおり操作できる。 */ .mv-sf-yt-touch { position: absolute; inset: 0; z-index: 2; background: transparent; } /* 右側アクション（動画上へ重ねる）。位置は動画ではなく画面を基準にする（下の情報欄と同じ考え方）。 */ .mv-sf-actions { position: fixed; right: 8px; bottom: calc(var(--mv-bottom-nav-h) + 88px); z-index: 40; padding: 0; } .mv-sf-actions .mv-short-action { color: #fff; } .mv-sf-actions .mv-short-action-circle { background: rgba(255,255,255,0.18); color: #fff; } /* モバイルは「︙」が1つ増えるぶん、操作列を一回り小さくする（PCは変えない）。円・アイコン・文字・行間をまとめて縮め、見た目の比率は保つ。 */ .mv-sf-actions { gap: 12px; } .mv-sf-actions .mv-short-action { font-size: 10px; gap: 2px; } .mv-sf-actions .mv-short-action-circle { width: 40px; height: 40px; font-size: 16px; } /* モバイルはプレイヤー側の「︙」を出さず、操作列の最下段の1つだけにする */ .mv-sf-more-pc { display: none; } .mv-sf-actions .mv-sf-more-mobile { display: flex; } /* 下部情報オーバーレイ（右アイコンと重ならない幅） */ /* 下部の情報（アイコン・名前・タイトル・説明）。位置の基準を動画から画面へ変える。以前はステージ（動画の入れ物）の下端から測っていたため、画面の高さが低い端末や、動画の縦横比・object-fit の効き方によって下端がずれ、タイトルや説明が画面外へはみ出して切れていた。ここでは「画面の下端 → 下部ナビの高さ（safe-area 込み） → 余白」の順に積み上げた位置へ置く。動画の大きさには一切左右されない。 */ .mv-sf-overlay { position: fixed; left: 0; right: 72px; z-index: 35; bottom: calc(var(--mv-bottom-nav-h) + 10px); padding: 0 14px; /* 以前は下部へ黒のグラデーションを敷いていたが、右側アクション列の手前（right: 72px）で切れるため、そこに縦の境目が出て「アクション列の下だけ色が違う」状態になっていた。動画の上に色を乗せず、文字側の影だけで読めるようにする。 */ background: none; color: #fff; display: block; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6); } .mv-sf-overlay-channel { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; } .mv-sf-overlay-title, .mv-sf-overlay-desc { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mv-sf-overlay-desc { font-size: 12px; opacity: .85; margin-top: 4px; -webkit-line-clamp: 1; } .mv-sf-overlay-title.expanded, .mv-sf-overlay-desc.expanded { -webkit-line-clamp: unset; } /* 画面の高さが低い端末では出す量を減らす。優先順位はアイコン・名前 → タイトル → 説明。全文はタイトルをタップすると詳細パネルで読めるので、動画の上へ無理に載せない。 */ @media (max-height: 700px) { .mv-sf-overlay-title { -webkit-line-clamp: 1; } .mv-sf-overlay-desc { display: none; } } /* コメント・説明詳細はボトムシート。 z-index は動画上のUIより必ず上にする。既定の 30 のままだと、情報オーバーレイ(35)・アクション列(40)・上部バー(40)・切替(45)・進捗バー(120) が手前に出てしまい、タイトルや説明がシートに重なって✕ボタンも押せなくなっていた。（.mv-sf-stage は position: relative だが z-index を持たないため重ね順の基準にならず、単純にこの値どうしの比較になる） */ .mv-sf-comments { position: fixed; left: 0; right: 0; bottom: var(--mv-bottom-nav-h); top: auto; height: 62dvh; width: auto; flex: none; margin: 0; border-radius: 16px 16px 0 0; z-index: 130; } } @media (min-width: 768px) { .mv-sf-overlay { display: none; } } /* ===== ヒーロー枠（YouTube型トップ） ===== */ .mv-hero { display: block; position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 32px; background: #000; aspect-ratio: 21 / 9; min-height: 260px; } .mv-hero img.mv-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; } .mv-hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 32px; color: #fff; z-index: 3; /* ホバープレビュー動画より上にタイトル等を表示 */ pointer-events: none; } .mv-hero-overlay .mv-hero-play { pointer-events: auto; } .mv-hero-title { font-size: clamp(20px, 3vw, 32px); font-weight: 800; line-height: 1.3; max-width: 640px; } .mv-hero-desc { font-size: 13px; opacity: .9; max-width: 560px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mv-hero-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; font-weight: 700; } .mv-hero-play { display: inline-flex; align-items: center; gap: 8px; background: var(--mv-accent); color: #1a1a1a; padding: 9px 20px; border-radius: 999px; font-weight: 800; font-size: 14px; } @media (max-width: 767px) { /* min-heightはaspect-ratio経由でmin-widthへ変換され横はみ出しの原因になるため無効化 */ .mv-hero { aspect-ratio: 16 / 10; min-height: 0; max-width: 100%; } .mv-hero-overlay { padding: 16px; } } /* ===== 公開チャンネルページ（YouTube型） ===== */ .mv-ch-cover { display: block; width: 100%; aspect-ratio: 4 / 1; min-height: 110px; object-fit: cover; border-radius: 14px; margin-bottom: 18px; } .mv-ch-head { display: flex; gap: 20px; align-items: center; padding: 4px 0 18px; flex-wrap: wrap; } .mv-ch-icon { width: 88px; height: 88px; object-fit: cover; flex-shrink: 0; } .mv-ch-info { flex: 1; min-width: 220px; } .mv-ch-name { font-size: 24px; font-weight: 800; margin: 0; overflow-wrap: break-word; } .mv-ch-meta { font-size: 13px; color: var(--mv-text-sub); margin-top: 2px; } .mv-ch-desc { font-size: 13px; color: var(--mv-text-sub); margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: break-word; } .mv-ch-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mv-border); margin-bottom: 22px; overflow-x: auto; } .mv-ch-tabs a { padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--mv-text-sub); border-bottom: 3px solid transparent; white-space: nowrap; } .mv-ch-tabs a:hover { color: var(--mv-text); } .mv-ch-tabs a.active { color: var(--mv-text); border-bottom-color: var(--mv-sub-color); } @media (max-width: 767px) { /* スマホ: カバー・情報・登録ボタン・タブを画面幅へ再配置（横スクロールさせない） */ .mv-ch-cover { border-radius: 10px; aspect-ratio: 3 / 1; min-height: 90px; } .mv-ch-head { gap: 12px; padding-bottom: 12px; } .mv-ch-icon { width: 64px; height: 64px; } .mv-ch-name { font-size: 19px; } .mv-ch-info { min-width: 0; flex-basis: calc(100% - 80px); } .mv-ch-follow { width: 100%; } .mv-ch-follow .mv-btn { width: 100%; } } /* ===== movira: 中央再生ボタン（通常動画プレイヤー） ===== */ /* 配置基準は .mv-player-wrap の position: relative。下部の標準コントロールに重ならないよう中央のみを占有する。 */ .mv-center-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(56px, 12vw, 82px); height: clamp(56px, 12vw, 82px); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: none; border-radius: 50%; background: var(--mv-accent); color: var(--mv-accent-dark); font-size: clamp(20px, 4.4vw, 29px); line-height: 1; cursor: pointer; /* 明るい映像の上でも輪郭が沈まないよう影＋わずかな縁取り */ box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(0,0,0,0.18); /* visibility も対象に含めることで、opacityのフェードが終わってから非表示になる */ transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease, visibility .15s ease; z-index: 2; } /* ▶ は左右非対称なので視覚的な中心へ寄せる */ .mv-center-play i { margin-left: 0.12em; pointer-events: none; } @media (hover: hover) { .mv-center-play:hover { background: #ffd524; transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 0 3px rgba(0,0,0,0.18); } } .mv-center-play:active { transform: translate(-50%, -50%) scale(0.96); } .mv-center-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* 再生中は非表示（レイアウトは動かさずフェードのみ） */ .mv-center-play.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(0.85); } /* 再生不可（認可NG）時は完全に取り除く */ .mv-center-play[hidden] { display: none; } /* ===== 読み込み中は再生ボタンの外周にリングを出す ===== ブラウザ標準の大きな再生ボタン／読み込みスピナーは、映像の中央ではなく下部コントロールを除いた領域の中央へ描かれるため、自前の再生ボタンから少し上へずれた位置に黒い丸が出てしまう。標準のものは消し、読み込み表示は再生ボタンと同じ中心・同じ円で描く。 */ .mv-center-play.is-loading { /* 再生中のバッファ待ちでも見せる。is-hidden より後に書いて打ち消す */ opacity: 1; visibility: visible; transform: translate(-50%, -50%); /* 読み込み中は押しても意味がないので反応させない */ pointer-events: none; cursor: default; } /* 読み込み中は▶を消し、リングだけにする */ .mv-center-play.is-loading i { opacity: 0; } .mv-center-play.is-loading::after { content: ''; position: absolute; /* ボタンの少し外側を回る輪。中心はボタンと同じ */ inset: -7px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: mv-center-play-spin .8s linear infinite; } @keyframes mv-center-play-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mv-center-play { transition: opacity .15s ease; } .mv-center-play:hover, .mv-center-play:active, .mv-center-play.is-hidden { transform: translate(-50%, -50%); } /* 回転を止め、輪だけ出す */ .mv-center-play.is-loading::after { animation: none; } } /* ブラウザ標準の中央オーバーレイ（大きな再生ボタン）を消す。下部のコントロールバー・シークバー・音量・全画面はそのまま残す。セレクタごとにルールを分けているのは、擬似要素の名前がブラウザによって解釈されないと、まとめて書いた場合にルール全体が無効になるため。なお、読み込み中に出る黒い丸は ::-internal-media-controls-loading-panel で、これはページのCSSからは指定できない（内部専用の擬似要素）。再生開始待ちの間だけ controls を外して出さないようにしている（player.js）。 */ video.mv-player::-webkit-media-controls-overlay-enclosure, video.mv-ad-video::-webkit-media-controls-overlay-enclosure, video.mv-sf-video::-webkit-media-controls-overlay-enclosure { display: none !important; } video.mv-player::-webkit-media-controls-overlay-play-button, video.mv-ad-video::-webkit-media-controls-overlay-play-button, video.mv-sf-video::-webkit-media-controls-overlay-play-button { display: none !important; } video.mv-player::-webkit-media-controls-start-playback-button, video.mv-ad-video::-webkit-media-controls-start-playback-button, video.mv-sf-video::-webkit-media-controls-start-playback-button { display: none !important; } /* ショートだけ、標準コントロールの「画面拡大（全画面）」ボタンを消す。 iOSではこのボタンが動画の左上に出るため、上部バーのホームボタンとタップ領域が重なっていた。通常動画（.mv-player）は対象外なので、通常動画の拡大機能はこれまでどおり使える。 */ video.mv-sf-video::-webkit-media-controls-fullscreen-button { display: none !important; } /* 標準の音量ボタン・音量スライダーを消すのはスマホ幅だけにする。 iOSでは標準の音量ボタンが右上に出て検索ボタンと重なるため隠し、音量操作は上部バーの音量ボタン（#mv-sf-volume）へ一本化している。 PC表示には上部バーが無いので、標準の音量操作をそのまま使う。 */ @media (max-width: 767px) { video.mv-sf-video::-webkit-media-controls-mute-button, video.mv-sf-video::-webkit-media-controls-volume-slider, video.mv-sf-video::-webkit-media-controls-volume-slider-container, video.mv-sf-video::-webkit-media-controls-volume-control-container { display: none !important; } } /* ===== movira: マイページ解析・続きから見る用の部品 ===== */ /* サマリー統計カード */ .mv-stat-grid { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .mv-stat-card { background: var(--mv-surface); border: 1px solid var(--mv-border); border-radius: var(--mv-radius); padding: 14px 16px; } .mv-stat-label { font-size: 12px; color: var(--mv-text-sub); } .mv-stat-value { font-size: 22px; font-weight: 800; margin-top: 2px; } .mv-stat-sub { font-size: 11px; color: var(--mv-text-sub); margin-top: 2px; } /* 日別再生数の簡易棒グラフ（外部ライブラリ不使用） */ .mv-bar-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; margin-top: 12px; padding: 8px 4px 0; background: var(--mv-surface); border: 1px solid var(--mv-border); border-radius: var(--mv-radius); overflow-x: auto; } .mv-bar-col { flex: 1 0 10px; min-width: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .mv-bar { width: 100%; max-width: 22px; min-height: 0; background: var(--mv-accent); border-radius: 3px 3px 0 0; } .mv-bar-label { font-size: 9px; color: var(--mv-text-sub); margin-top: 4px; white-space: nowrap; } @media (max-width: 767px) { .mv-bar-label { display: none; } .mv-bar-chart { height: 120px; } } /* 続きから見る: サムネ下端の視聴位置バー */ .mv-resume-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.35); } .mv-resume-bar > span { display: block; height: 100%; background: var(--mv-accent); } /* ===== movira: 設定トグルスイッチ（通知設定など） ===== */ .mv-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mv-border); } .mv-switch-row:last-of-type { border-bottom: none; } .mv-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .mv-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } .mv-switch-slider { position: absolute; inset: 0; background: #c3c9d4; border-radius: 999px; transition: background .15s; } .mv-switch-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; } .mv-switch input:checked + .mv-switch-slider { background: var(--mv-accent); } .mv-switch input:checked + .mv-switch-slider::before { transform: translateX(20px); } .mv-switch input:focus-visible + .mv-switch-slider { outline: 2px solid var(--mv-accent); outline-offset: 2px; } /* 重要通知（仕様27-4: OFF不可）のバッジ強調 */ .mv-status-badge.is-important { background: var(--mv-accent); color: #1a1a1a; font-weight: 800; } /* ===== movira: スポンサー広告オーバーレイ（仕様22-6） ===== */ .mv-ad-overlay { position: absolute; inset: 0; pointer-events: none; /* 動画本体のクリックを妨げない */ /* 上から順に並べ、下段（操作＋再生位置バー）は margin-top:auto で下端へ寄せる。 space-between だと、下段が「操作」「再生位置バー」の2つに分かれた時点で操作の行が中央へ持ち上がってしまう。 */ display: flex; flex-direction: column; justify-content: flex-start; z-index: 3; } .mv-ad-overlay[hidden] { display: none; } /* 広告UIは広告動画より前面。 .mv-ad-video は position:absolute なので、静的な要素のままだと広告動画のほうが後ろに描かれず、UIが映像の下に隠れてしまう。 UIの行にも重なり順を持たせて必ず映像の上に出す。 */ .mv-ad-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(rgba(0,0,0,0.55), transparent); color: #fff; pointer-events: none; /* 押せるのは中のボタン・リンクだけ */ } .mv-ad-label { font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.55); border-radius: 4px; padding: 3px 8px; } .mv-ad-link { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; background: var(--mv-accent); color: #1a1a1a; border: none; border-radius: 999px; padding: 7px 14px; font-family: inherit; text-decoration: none; } .mv-ad-link:hover { filter: brightness(1.08); } .mv-ad-link[hidden] { display: none; } /* 下段: 左に「詳しく見る」、右に「広告をスキップ」。広告再生中は本編の標準コントロールを外している（ad-player.js）ため、下部に余分な逃げ幅を取らなくてよい。 */ .mv-ad-controls { position: relative; z-index: 2; /* 下段はここから下。上のラベル行との間は自動で空ける */ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 16px; pointer-events: none; /* 押せるのは中のボタン・リンクだけ */ } .mv-ad-controls-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .mv-ad-countdown { font-size: 12px; color: #fff; background: rgba(0,0,0,0.6); border-radius: 4px; padding: 5px 10px; } /* 残り秒数が無いとき（スキップできるようになった後）は枠ごと消す。文字が空でも padding と背景だけが残り、スキップボタンの左に黒い小さな四角として見えてしまうため。 */ .mv-ad-countdown:empty { display: none; } .mv-ad-skip { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 700; background: rgba(0,0,0,0.72); color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 4px; padding: 7px 14px; } .mv-ad-skip:hover { background: rgba(0,0,0,0.88); } .mv-ad-skip[hidden] { display: none; } /* 広告再生中は中央再生ボタンを出さない */ .mv-ad-overlay.is-active ~ .mv-center-play, .mv-player-wrap:has(.mv-ad-overlay.is-active) .mv-center-play { display: none; } @media (max-width: 767px) { .mv-ad-label { font-size: 11px; } .mv-ad-skip { font-size: 12px; padding: 6px 12px; } } /* 広告動画は本編の上に重ねて表示（本編のvideo要素には触れない） */ .mv-ad-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: -1; /* オーバーレイUIの下・本編の上 */ } .mv-ad-overlay.is-active .mv-ad-video { z-index: 0; } /* 配信サービステンプレートの識別バッジ（開発中の確認用） */ .mv-template-badge { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(242,194,0,0.18); border: 1px solid var(--mv-accent); color: var(--mv-accent); font-size: 11px; font-weight: 700; white-space: nowrap; } @media (max-width: 767px) { .mv-template-badge { display: none; } } /* 動画詳細のタグ（管理画面で非表示にしたタグは出力されない） */ .mv-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .mv-tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--mv-surface-2); color: var(--mv-text-sub); } .mv-tag:hover { background: var(--mv-card-hover); color: var(--mv-text); } /* ===== 配信サービス（Amazonタイプ）テンプレート固有UI ===== */ /* ヘッダー内の横並びナビ（購入者中心の導線） */ .mv-tpl-topnav { display: flex; align-items: center; gap: 4px; margin-left: 14px; } .mv-tpl-topnav a { padding: 6px 12px; border-radius: var(--mv-radius); font-size: 13px; font-weight: 700; color: var(--mv-text-sub); white-space: nowrap; } .mv-tpl-topnav a:hover { background: var(--mv-card-hover); color: var(--mv-text); } .mv-tpl-topnav a.active { color: var(--mv-accent); } @media (max-width: 1023px) { .mv-tpl-topnav { display: none; } } /* ユーザーメニュー（ドロップダウン） */ .mv-tpl-usermenu { position: relative; } .mv-tpl-usermenu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px; padding: 6px; background: var(--mv-surface); border: 1px solid var(--mv-border); border-radius: var(--mv-radius); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; } .mv-tpl-usermenu-panel[hidden] { display: none; } .mv-tpl-usermenu-panel a, .mv-tpl-usermenu-panel button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--mv-text); border-radius: var(--mv-radius); } .mv-tpl-usermenu-panel a:hover, .mv-tpl-usermenu-panel button:hover { background: var(--mv-card-hover); } .mv-tpl-usermenu-panel form { margin: 0; border-top: 1px solid var(--mv-border); margin-top: 4px; padding-top: 4px; } @media (max-width: 767px) { .mv-tpl-usermenu { display: none; } } /* ===== 固定ページのコンテナ ===== 利用規約だけでなく「使い方」「ガイド」等も自由に組めるよう、カード風の枠を持たせず、ページ背景へそのまま本文を置く。 */ .mv-page { max-width: 1000px; margin: 0 auto; background: none; border: 0; border-radius: 0; box-shadow: none; /* ヘッダー下の余白。.mv-main の上padding（20px）と合わせて約60pxにする。余白はこの1か所だけで調整し、本文側へ重ねて足さない。 */ padding: 40px 0 0; } @media (min-width: 1024px) { /* PCは .mv-main の上padding が 24px なので 36px 足して 60px */ .mv-page { padding-top: 36px; } } @media (max-width: 1039px) { .mv-page { max-width: 100%; } } @media (max-width: 767px) { /* スマホは画面が狭いので少し詰める（16px + 24px = 40px） */ .mv-page { padding-top: 24px; } } /* .mv-form-card はもともとログイン等の入力フォーム用で、読みやすさのため 480px幅の中央寄せになっている。お知らせのように .mv-page の中でカードを「読み物」として使う場合は、固定ページと同じ内容幅いっぱいに広げる。横方向の制限だけを外し、上下の余白（30px）はそのまま使う。 .mv-page を使うのはお知らせと固定ページだけなので、ログイン・会員登録などのフォームの見た目は変わらない。 */ .mv-page .mv-form-card { max-width: none; margin-left: 0; margin-right: 0; } /* ===== 固定ページ本文（仕様28-1）===== 管理画面で入力したHTMLを読みやすく表示する。使えるタグは保存時に絞り込み済み。 */ .mv-page-body h1, .mv-page-body h2, .mv-page-body h3, .mv-page-body h4, .mv-page-body h5, .mv-page-body h6 { font-weight: 700; line-height: 1.5; margin: 24px 0 10px; } .mv-page-body h1 { font-size: 20px; } .mv-page-body h2 { font-size: 18px; border-bottom: 1px solid var(--mv-border); padding-bottom: 6px; } .mv-page-body h3 { font-size: 16px; } .mv-page-body h4, .mv-page-body h5, .mv-page-body h6 { font-size: 14px; } .mv-page-body p { margin: 0 0 14px; } .mv-page-body ul, .mv-page-body ol { margin: 0 0 14px; padding-left: 22px; } .mv-page-body li { margin-bottom: 6px; } .mv-page-body dl { margin: 0 0 14px; } .mv-page-body dt { font-weight: 700; margin-top: 10px; } .mv-page-body dd { margin: 0 0 6px 16px; } .mv-page-body a { color: var(--mv-text); text-decoration: underline; } .mv-page-body img { max-width: 100%; height: auto; border-radius: var(--mv-radius); } .mv-page-body blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--mv-border); background: var(--mv-surface); } .mv-page-body pre { margin: 0 0 14px; padding: 12px; overflow-x: auto; background: var(--mv-surface); border-radius: var(--mv-radius); font-size: 13px; } .mv-page-body code { background: var(--mv-surface); padding: 1px 5px; border-radius: 4px; font-size: 13px; } .mv-page-body pre code { background: none; padding: 0; } .mv-page-body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; display: block; overflow-x: auto; } .mv-page-body th, .mv-page-body td { border: 1px solid var(--mv-border); padding: 8px 10px; text-align: left; } .mv-page-body th { background: var(--mv-surface); font-weight: 700; } .mv-page-body hr { border: 0; border-top: 1px solid var(--mv-border); margin: 20px 0; } /* ===== 通報の導線（動画・コメント・ユーザー・チャンネル共通）===== 目立たせすぎず、押せることは分かる見た目にする。 */ .mv-report-link { background: none; border: 0; padding: 0 2px; cursor: pointer; font: inherit; font-size: 12px; color: var(--mv-text-sub); } .mv-report-link:hover { color: var(--mv-text); text-decoration: underline; } .mv-report-form { max-width: 520px; margin: 10px 0 14px; } /* ===== 変換進捗（右下固定パネル） ===== 進捗部分の色は固定しない。サイト設定 > デザインのアクセントカラーが --mv-accent として各レイアウトから出力されるので、それをそのまま使う。モーダルではなく常駐カード。操作を妨げないよう画面右下に小さく置く。 */ .mv-transcode-panel { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: min(300px, calc(100vw - 36px)); max-height: 60vh; overflow-y: auto; background: var(--mv-surface); color: var(--mv-text); border: 1px solid var(--mv-border); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); padding: 12px 14px; font-size: 12px; } .mv-transcode-panel[hidden] { display: none; } .mv-transcode-panel-head { font-weight: 700; font-size: 12px; margin-bottom: 8px; } /* 複数動画を続けて投稿したときは縦に積む */ /* ×ボタンを置くので、カードの右側に余白を作る */ .mv-transcode-panel-item { position: relative; padding-right: 22px; } .mv-transcode-panel-dismiss { position: absolute; top: -2px; right: -4px; border: none; background: none; cursor: pointer; color: var(--mv-text-sub); font-size: 18px; line-height: 1; padding: 2px 6px; font-family: inherit; } .mv-transcode-panel-dismiss:hover { color: inherit; } .mv-transcode-panel-item + .mv-transcode-panel-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mv-border); } .mv-transcode-panel-title { font-size: 11px; color: var(--mv-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-transcode-panel-state { font-size: 12px; margin: 2px 0 6px; } .mv-transcode-panel-item.is-failed .mv-transcode-panel-state { color: var(--mv-danger); } .mv-transcode-panel-close { border: 1px solid var(--mv-border); background: none; color: inherit; border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; } @media (max-width: 600px) { .mv-transcode-panel { right: 10px; bottom: 10px; left: 10px; width: auto; } } .mv-progress-track { width: 100%; /* 外側の背景バーは常に100%幅 */ height: 7px; background: var(--mv-border); border-radius: 999px; overflow: hidden; } .mv-progress-fill { height: 100%; background: var(--mv-accent); border-radius: 999px; transition: width .4s ease; } /* ===== スポンサー広告の再生位置バー ===== 広告動画の下端。表示専用で、クリック・ドラッグ・シークはできない（pointer-events を切ってあるので、スキップやCTAの操作も塞がない）。進捗の色はサイト設定のサブカラー（--mv-sub-color）。 */ .mv-ad-progress { position: relative; z-index: 2; height: 5px; background: rgba(255, 255, 255, 0.28); pointer-events: none; user-select: none; } .mv-ad-progress-fill { height: 100%; width: 0%; background: var(--mv-sub-color); transition: width .2s linear; pointer-events: none; } /* ===== 縦動画を通常プレイヤーへ出すとき（180秒を超えるショート相当など） ===== 枠は通常動画と同じ横長のまま、中央に縦動画をそのまま置く。空いた左右は同じ映像をぼかして敷き、黒帯にしない。ぼかすのは背景だけで、中央の映像には一切かけない。 */ .mv-player-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; /* 小さなcanvasを引き伸ばすので、ぼかしと合わせて滑らかに見せる */ filter: blur(28px) saturate(1.2) brightness(0.75); transform: scale(1.15); pointer-events: none; z-index: 0; } .mv-player-wrap.is-pillarbox .mv-player-backdrop { display: block; } /* 中央の映像は背景より前面。ぼかしは継承しない */ .mv-player-wrap.is-pillarbox video.mv-player { position: relative; z-index: 1; filter: none; background: transparent; } /* 画像トリミング（image-crop.js。チャンネルカバー画像・プロフィールアイコン）。枠は保存後と同じ縦横比。中の画像をドラッグで動かし、スライダーで拡大する。 */ .mv-crop { margin: 8px 0 4px; } .mv-crop[hidden] { display: none; } /* JSが動かない場合の保険。トリミング枠が使えるときは image-crop.js が枠だけスクロールを渡さないよう指定し直し、上下左右へ動かせるようにする（サイト全体のスクロールはどちらの場合も止めない）。 */ .mv-crop-stage { position: relative; overflow: hidden; background: var(--mv-surface-2); border-radius: var(--mv-radius); border: 2px solid var(--mv-accent); touch-action: pan-y; user-select: none; cursor: grab; } .mv-crop-stage.dragging { cursor: grabbing; } /* 画像そのものをブラウザのドラッグ対象にしない（位置調整の追従が切れるため） */ .mv-crop-stage img { position: absolute; max-width: none; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; } /* アイコンは円形で使うため、切り出し枠も円で見せる */ .mv-crop-round .mv-crop-stage { border-radius: 50%; } .mv-crop-hint { font-size: 11px; color: var(--mv-text-sub); margin-bottom: 6px; } .mv-crop-controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--mv-text-sub); } .mv-crop-controls span { flex-shrink: 0; } .mv-crop-controls input[type="range"] { flex: 1; min-width: 0; }