@charset "utf-8";
/* ============================================================================
   asg-redesign.css — ASG リニューアル（ダークテーマ）オーバーライド
   ----------------------------------------------------------------------------
   目的:
     既存の common.css を書き換えずに、後から読み込んで色・面を上書きすることで
     白ベースのデザインをダークテーマへ差し替える。

   適用範囲:
     blocks/header*.tpl の先頭から読み込んでいるため、ヘッダーを表示する
     全ページに効く。トップページ固有の指定は index.tpl が出力する
     <div id="main" class="top-page"> を使って .top-page 配下に限定する。

   読み込み順（重要）:
     ヘッダーは </head> より後（body内）に展開されるため、この <link> は
     head 内の common.css / search.css 等より必ず後に読まれる。
     したがって同一詳細度なら後勝ちで上書きできる。!important は原則使わない。
     ※ common.css の先頭に @import する方式は使えない。@import は @charset
       直後にしか置けず、common.css 本体のルールが後に来て打ち消されるため。

   設計上の注意:
     - 既存デザインは箱の上下端を背景画像(bg_boxtop_600.gif 等)で描いている。
       暗い面の上に明るいGIFが乗ると破綻するため、該当箇所は background-image を
       none にしてCSSの罫線・角丸で描き直す。
     - 広告枠(#ad02 / #ad03_new / #ad_cvlb / .box160 / .box180 など)の中身は
       外部配信のため、色や背景を指定しない。枠の余白のみ扱う。
     - レイアウト(幅・段組・float)は原則変更しない。色と面を差し替える。

   ロールバック:
     blocks/header*.tpl 先頭の <link> 1行を消して ./dev-deploy.sh を再実行すれば
     元の見た目に戻る。このファイル自体を消す必要はない。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. デザイントークン
   design-output/design-system.md と同じ値。以降の指定はすべてこの変数を参照する。
   --------------------------------------------------------------------------- */
:root {
    --asg-bg-base: #121318;        /* 基調背景 */
    --asg-bg-elevated: #1d1f26;    /* カード・パネル背景 */
    --asg-bg-elevated-2: #262933;  /* 入れ子・ホバー背景 */
    --asg-line: #2e313b;           /* 罫線 */
    --asg-text-main: #f1f0f4;      /* 本文(主) */
    --asg-text-sub: #9799a6;       /* 本文(副・メタ) */
    --asg-text-faint: #6b6e7a;     /* 淡色 */
    --asg-accent: #e63888;         /* アクセント */
    --asg-accent-strong: #c92c74;  /* アクセント(押下) */
    --asg-accent-tint: #3a1d2c;    /* アクセント淡背景 */
    --asg-accent2: #4fc3d9;        /* 副アクセント(リンク等) */
}

/* ---------------------------------------------------------------------------
   2. ベース
   body の背景画像(bg_body.gif)は明るいグラデーションなので打ち消す。
   --------------------------------------------------------------------------- */
body {
    background: var(--asg-bg-base) none;
    color: var(--asg-text-main);
}

#layout,
#wrap,
#main {
    background: transparent none;
    color: var(--asg-text-main);
}

/* 汎用テキスト色。legacy側で font タグや色指定が残っている箇所を拾う */
td, th, p, li, dt, dd, span, div {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   3. リンク
   既存は #000099 / #0066CC / #333366 と暗い青で、暗背景では読めない。
   --------------------------------------------------------------------------- */
a,
a:link,
a:visited {
    color: var(--asg-accent2);
}

a:hover,
a:active {
    color: var(--asg-accent);
}

/* 強調色(.orange)は既存が #FF3300。暗背景でも視認できるアクセント色へ寄せる */
.orange,
a.orange:link,
a.orange:visited {
    color: var(--asg-accent);
}

/* ---------------------------------------------------------------------------
   4. ヘッダー（blocks/header.tpl のリニューアル構造に対応）
   モックの「ロゴ｜検索｜ログイン導線」を1行に並べたヘッダー。
   --------------------------------------------------------------------------- */
/* モックの header.site-header と同じ:
   全幅・上下16px/左右32pxの余白・下罫線・スクロール追従。
   （コンテンツ側は #main を 1200px 中央寄せにしているので、
     ヘッダーだけが画面幅いっぱいに伸びる構成になる） */
#header {
    background: var(--asg-bg-base) none;
    border-bottom: 1px solid var(--asg-line);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    /* common.css が height:180px を固定で当てている。旧デザインでは
       ヘッダー内のHeaderRight広告がこの高さを埋めていたが、枠を
       メインカラムへ移したため、そのままだと108pxの空白が残る。
       中身なりの高さにする。 */
    height: auto;
    min-height: 0;
}

/* 言語切替。右上に小さく置く */
#header .header-lang {
    float: right;
    padding: 6px 16px 0 0;
    font-size: 11px;
}

#header .header-lang a {
    color: var(--asg-text-faint);
    margin-left: 8px;
}

/* ロゴ・検索・ボタンを横一列に並べる。モックは中央寄せせず全幅。 */
#logoarea {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: none;
    margin: 0;
    padding: 16px 32px;
    background: transparent none;
    height: auto;
}

#logo {
    background: transparent none;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    width: auto;
    float: none;
}

#logo h1 {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* ロゴの大きさ。
   モックの `.logo-mark { height: 28px }` をそのまま持ってくると**大きすぎる**。
   モックが表示している `logo-wordmark-transparent.png` は 2172×724 のうち
   実際の文字は 1650×380（縦の占有率52.5%）で、上下に透明な余白を持つ。
   つまりモック上で見えているワードマークは 63.8×14.7px。

   実装側の `logo-asg.png` はその余白を切り落とした 156×36（比率は同じ4.33:1）
   なので、同じ見た目にするには 28px ではなく **15px** を指定する
   （15px → 65×15px でモックとほぼ一致）。 */
#logo h1 img {
    display: block;
    width: auto;
    height: 15px;
}

/* ロゴ下のキャッチコピー。モックのヘッダーには無いので非表示にする。
   文言自体はSEO・多言語リソースとしてDOMに残している（テンプレート非改変）。
   ヘッダーに出したい場合はこの display:none を外せば戻る。 */
#logo p {
    display: none;
}

/* ヘッダー内検索フォーム（モックの .header-search と同じ値） */
.header-search {
    flex: 1 1 auto;
    /* モックは box-sizing:border-box のリセット下で max-width:480px。
       こちらは既存CSSにそのリセットが無いため、明示しないと
       左右padding分だけ横に広がってしまう。 */
    box-sizing: border-box;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 16px;
    background: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line);
    border-radius: 999px;
    height: 40px;
}

.header-search:focus-within {
    border-color: var(--asg-accent);
}

/* 虫眼鏡アイコン自体が送信ボタン。見た目はモックのアイコンと同じ扱い */
.header-search__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 0 none;
    color: var(--asg-text-faint);
    cursor: pointer;
}

.header-search__submit:hover {
    color: var(--asg-accent);
}

.header-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0 none;
    color: var(--asg-text-main);
    font-size: 14px;
    height: 100%;
    padding: 0;
    outline: none;
}

.header-search input[type="text"]::placeholder {
    color: var(--asg-text-faint);
}

/* ログイン・新規登録ボタン */
.header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* モックの .btn と同じ。角丸は999pxのピルではなく10pxの長方形 */
.header-actions .hbtn {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.header-actions .hbtn.primary {
    background: var(--asg-accent);
    color: #fff;
}

.header-actions .hbtn.primary:hover {
    background: var(--asg-accent-strong);
    color: #fff;
}

.header-actions .hbtn.secondary {
    background: var(--asg-bg-elevated-2);
    color: var(--asg-text-main);
    border: 1px solid var(--asg-line);
}

.header-actions .hbtn.secondary:hover {
    border-color: var(--asg-accent);
    color: var(--asg-text-main);
}

/* 英語サイトのヘッダーにある「日本語」への切り替え（blocks/header_en.tpl）。
   ログイン導線と役割が違うので、面を持たない素のテキストリンクにする。 */
.header-actions .hbtn.lang {
    padding: 8px 4px;
    background: transparent none;
    border: 0 none;
    color: var(--asg-text-sub);
    font-weight: normal;
}

.header-actions .hbtn.lang:hover {
    color: var(--asg-accent);
}

/* サイト内タブ（ASG／サガース／ASG画像）。
   モックのヘッダーにはこの行が無いため非表示にする。
   姉妹サイトへの導線が消えないよう、サガースとASG画像のリンクは
   blocks/footer.tpl のリンク一覧へ移設済み。
   ヘッダーに戻したい場合はこの display:none を外せばよい。 */
#tabarea {
    display: none;
}

/* HeaderRight の枠。モックに合わせて blocks/main_top_ad.tpl 経由で
   メインカラム(#centerarea)の先頭に出力している。

   高さを固定しないこと:
     既存CSSは #gnavi に絶対配置と固定高さを与えており、広告が配信されないと
     空の枠がそのまま余白として残っていた。ここでは高さを持たせず、
     中身が無ければ潰れるようにする。
     line-height / font-size を 0 にしているのは、テンプレートが出力する
     改行や空白の文字ノードだけで行の高さが生まれるのを防ぐため。 */
#gnavi {
    position: static;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent none;
    border: 0 none;
    width: auto;
    height: auto;
    min-height: 0;
    float: none;
    text-align: center;
    line-height: 0;
    font-size: 0;
}

/* 広告が入ったときだけ下に余白を作る */
#gnavi > * {
    line-height: normal;
    font-size: 14px;
    margin-bottom: 16px;
}

/* 広告が枠からはみ出さないようにする（外部配信のサイズはこちらで決められない） */
#gnavi img,
#gnavi iframe {
    max-width: 100%;
    height: auto;
}

#gnavi a,
#gnavi li {
    color: var(--asg-text-sub);
    border-color: var(--asg-line);
}

#gnavi a:hover {
    color: var(--asg-text-main);
}

/* 検索パネル（ページ本文側の詳細検索） */
#search,
#SearchParams {
    background: transparent none;
    color: var(--asg-text-main);
}

/* ---------------------------------------------------------------------------
   5. フォーム部品
   暗背景では入力欄が白のままだと浮くため、面と枠線を合わせる。
   --------------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
    background-color: var(--asg-bg-elevated-2);
    color: var(--asg-text-main);
    border: 1px solid var(--asg-line);
}

input::placeholder,
textarea::placeholder {
    color: var(--asg-text-faint);
}

/* ---------------------------------------------------------------------------
   6. カラム構成：現行の3カラム → モックの2カラムへ
   ----------------------------------------------------------------------------
   現行DOM（テンプレートは一切変更していない）:
       #main
         #pan                       … パンくず
         #wrap        (775px, float:left)
           #centerarea (600px, float:right)
           #leftarea   (160px, float:left)
         #rightarea   (180px, float:right)

   これを CSS Grid で組み替えて「サイドバー＋メイン」の2カラムにする。
   #wrap に display:contents を当てると #wrap 自体がレイアウト上消え、
   その子（#centerarea / #leftarea）が #main のグリッド項目になる。
   これにより DOM を変えずに配置だけを入れ替えられる。

   なぜテンプレートを変えないのか:
     このトップページには19個のadflightが左右カラムに散らばっている。
     DOMを組み替えると枠の移動・欠落が起きやすい。CSSだけで完結させれば
     広告枠の位置関係はサーバ側の出力そのままで保たれる。

   配置:
       1列目(サイドバー) … #leftarea を上段、#rightarea を下段に積む
       2列目(メイン)     … #centerarea が2行ぶんを占める
       パンくずは全幅
   --------------------------------------------------------------------------- */
/* ページ全体のラッパー。common.css で width:970px の固定幅が入っており、
   これが効いている限り #main の max-width:1200px は頭打ちになる。
   （970 − 左300 − gap24 − padding32 ＝ メイン列が約614pxしか取れなかった）
   固定幅を解除してモックと同じ最大幅まで広げる。 */
/* モックはヘッダーを全幅、コンテンツだけを1200pxで中央寄せにしている。
   #layout はヘッダー・本文・フッターをまとめて包んでいるので、
   ここでは幅制限を外し、中央寄せは #main 側で行う。 */
#layout {
    width: auto;
    max-width: none;
    margin: 0;
}

/* モックの .layout と同じ: 最大1200px・中央寄せ・余白32px・
   サイドバー260px・カラム間32px */
#main {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px;
    box-sizing: border-box;
}

/* #wrap をレイアウトから外し、その子を #main のグリッド項目にする */
#wrap {
    display: contents;
}

#main > #pan {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* トップページの #pan は中身が &nbsp; だけの空のパンくずで、
   ヘッダーと本文の間に無意味な余白を作っている。
   他ページ（外部決済ページ等）は実際のパンくずを入れているため、
   トップページに限って畳む。 */
.top-page > #pan {
    display: none;
}

#leftarea {
    grid-column: 1;
    grid-row: 2;
}

#rightarea {
    grid-column: 1;
    grid-row: 3;
}

#centerarea {
    grid-column: 2;
    grid-row: 2 / 4;
}

/* 旧レイアウトの固定幅・floatを解除する */
#wrap,
#leftarea,
#centerarea,
#rightarea {
    width: auto;
    float: none;
    background: transparent none;
    color: var(--asg-text-main);
}

/* サイドバー・メイン内の箱も固定幅をやめて列幅に追従させる */
#leftarea .box160,
#leftarea .box180,
#leftarea .loginbox,
#rightarea .box160,
#rightarea .box180,
#rightarea .loginbox,
#centerarea .box600 {
    width: auto;
    max-width: 100%;
}

/* 箱の中身が固定幅指定のtable等でも列からはみ出さないようにする */
#leftarea table,
#rightarea table,
#centerarea table {
    max-width: 100%;
}

/* サイドバー内の要素は縦に積む。旧デザインのfloatが残ると横に流れてしまう */
#leftarea > div,
#rightarea > div {
    float: none;
    margin-bottom: var(--asg-gap, 16px);
}

/* ---------------------------------------------------------------------------
   7. 箱（見出し・本体・底）
   既存は上端/下端を背景画像で描いている。暗背景では明るいGIFが目立つので
   画像を無効化し、罫線と角丸で描き直す。
   --------------------------------------------------------------------------- */
.tit600,
.tit180,
.tit160,
.vstitle {
    background: var(--asg-bg-elevated-2) none;
    color: var(--asg-text-main);
    border: 1px solid var(--asg-line);
    border-bottom: 0 none;
    border-radius: 8px 8px 0 0;
}

.tit600 h2,
.tit180 h2,
.tit160 h2,
.vstitle h2 {
    color: var(--asg-text-main);
}

.boxbody-gray,
.boxbody-white,
.vsbox {
    background-color: var(--asg-bg-elevated);
    background-image: none;
    color: var(--asg-text-main);
    border-left: 1px solid var(--asg-line);
    border-right: 1px solid var(--asg-line);
}

/* 箱の底。画像で角を描いていたので、罫線＋角丸に置き換える */
.boxbottom180,
.boxbottom160 {
    background: var(--asg-bg-elevated) none;
    border: 1px solid var(--asg-line);
    border-top: 0 none;
    border-radius: 0 0 8px 8px;
}

/* メインカラムの箱の底(bg_boxbottom_600.gif の17pxの帯)。
   モックに対応する装飾が無いので要素ごと隠す。
   .box600 は float していないので、隠しても回り込みは崩れない。
   旧デザインでこの帯(17px)＋margin(5px)が作っていた下余白は .box600 側へ移す。 */
.boxbottom600 {
    display: none;
}

/* ---------------------------------------------------------------------------
   8. 動画カード（新着動画一覧）
   モックのカードUIに寄せる。サムネイルを角丸で全幅に伸ばし、
   カード全体を面として立たせる。段組(floatと幅)は既存のまま。
   --------------------------------------------------------------------------- */
/* モックの .video-card と同じ値。
   枠線ではなく内側シャドウ(inset)で縁取るのがモックの作り。
   カードに padding は持たせず、サムネイルはカード端まで密着させる。 */
.newmoviebox {
    background: var(--asg-bg-elevated) none;
    border: 0 none;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.newmoviebox:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 20px -8px rgba(0, 0, 0, .5);
}

/* サムネイルの器。カテゴリと▲▼数のバッジをこの上に重ねる。
   モックは 16:9。読み込み前も高さが決まるよう器側で比率を持たせる。 */
.newmoviebox .thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--asg-accent-tint), var(--asg-bg-elevated-2) 55%, var(--asg-accent2-tint));
}

/* サムネイル。テンプレート側で 200x148(1x) / 400x296(2x) を srcset 指定している。
   元画像は4:3なので、モックと同じ16:9の器に object-fit: cover で収める。 */
.newmoviebox img.shift-left {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    float: none;
}

/* カテゴリバッジ（サムネイル左上）— モックの .cat-badge と同じ値 */
.newmoviebox .cat-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    max-width: calc(100% - 12px);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 10px;
    line-height: 1.5;
    text-decoration: none;
    /* 長いカテゴリ名（コスプレ・制服系）でもはみ出さないようにする */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.newmoviebox .cat-badge:hover {
    background: var(--asg-accent);
    color: #fff;
}

/* アゲ／サゲ数のバッジ（サムネイル左下）— モックの .stat-badge と同じ値 */
.newmoviebox .stat-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 10px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.newmoviebox .stat-badge .up {
    color: var(--asg-accent);
}

.newmoviebox .stat-badge .down {
    color: var(--asg-accent2);
}

/* 投稿日時。モックの .video-card .meta と同じ値 */
.newmoviebox .card-meta {
    margin-top: 5px;
    padding: 0 10px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--asg-text-faint);
}

/* タイトル。モックの .video-card .title と同じ値（2行クランプ）。

   注意: common.css:4196 に
     #centerarea .paid_new .newmoviebox .newtitle {
       width:140px; height:15px; overflow:hidden; font-weight:bold; }
   があり、詳細度(0,1,3,0)が素の .newtitle(0,0,1,0)より遥かに高いため、
   単純な .newtitle では打ち消せず1行(15px)に潰されていた。
   同じ形のセレクタで上書きする。en_new(英語版)側にも同種の指定がある。

   2行クランプ自体は中のリンク(.ellipsis)側で行い、親は素のブロックにする。 */
.newtitle,
#centerarea .paid_new .newmoviebox .newtitle,
#centerarea .en_new .newmoviebox .newtitle {
    margin: 8px 0 0;
    padding: 0 10px;
    display: block;
    width: auto;
    height: auto;
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
    font-size: 14px;
    font-weight: normal;
}

/* タイトル内の <br> は行数制御の邪魔になるので消す */
.newtitle br {
    display: none;
}

/* タイトルのリンクには .ellipsis が付いており、common.css 側で
   white-space:nowrap / width:90% が入って1行で切られてしまう。
   モックは2行まで表示するので、ここだけ折り返しを許可する。 */
.newtitle a.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    /* common.css の .ellipsis が width:90% を当てているため、
       auto に戻して親の幅いっぱいを使う */
    width: auto;
    overflow: hidden;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.35;
    color: var(--asg-text-main);
}

.newtitle a.ellipsis:hover {
    color: var(--asg-accent);
}

/* カード内のリンクは下線なしにする（カテゴリ行を含む） */
.newmoviebox a {
    text-decoration: none;
}

/* カテゴリ行のリンクも .ellipsis で1行に切られる。幅だけ広げる */
.newmoviebox strong a.ellipsis {
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* 旧デザインのメタ行（span[style="font-size:10px"]）。
   トップページのカードはテンプレートを作り替えて .card-meta に置き換えたが、
   他ページの一覧では今も使われているため、色と行間だけ整える。 */
.newmoviebox span[style*="font-size:10px"] {
    display: block;
    font-size: 11px !important;
    line-height: 1.7;
    color: var(--asg-text-faint);
}

.newtitle,
.newtitle a {
    color: var(--asg-text-main);
    font-weight: normal;
}

.newtitle a:hover {
    color: var(--asg-accent);
}

/* 日付・再生数などのメタ情報 */
.ellipsis {
    color: var(--asg-text-sub);
}

.newmoviebox .orange {
    color: var(--asg-text-faint);
}

/* カテゴリ行のリンク */
.newmoviebox strong a {
    color: var(--asg-accent2);
    font-weight: normal;
}

/* VS（バーサス）欄も同じカード表現に揃える */
.vsbox dl dd {
    background: transparent none;
}

.vstitle {
    color: var(--asg-text-main);
    background: transparent none;
    border: 0 none;
    border-radius: 0;
}

/* ---------------------------------------------------------------------------
   8-3. 動画一覧をモックの4列グリッドにする（トップページ限定）
   ----------------------------------------------------------------------------
   .boxbody-white / .boxbody-gray は「絞り込みフォーム」「動画カード群」
   「一覧へのリンク」を同じ階層に並べたコンテナ。カードだけを並べる
   ラッパーが無いため、コンテナ自体をグリッドにし、カード以外の子要素は
   全幅（1 / -1）に逃がして従来どおり縦に積む。

   メイン列が600px固定から可変になったため、カードは4列で追従させる。
   --------------------------------------------------------------------------- */
/* モックの .video-grid と同じ: 4列・行間32px・列間16px。
   箱に padding は持たせない（枠が無いため） */
.top-page #centerarea .box600 .boxbody-white,
.top-page #centerarea .box600 .boxbody-gray {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 16px;
    padding: 0;
    align-items: start;
}

/* カード以外（フォーム・見出し・リンク・VS欄など）は全幅に */
.top-page #centerarea .box600 .boxbody-white > *:not(.newmoviebox),
.top-page #centerarea .box600 .boxbody-gray > *:not(.newmoviebox) {
    grid-column: 1 / -1;
}

/* float解除用の <br clear="all"> はグリッドでは不要。空行を作るので消す */
.top-page #centerarea .box600 .boxbody-white > br,
.top-page #centerarea .box600 .boxbody-gray > br {
    display: none;
}

/* グリッド項目になったカードはfloatを解除する。

   注意1: ここで display:flex にしてはいけない。カード内には
   アイコンGIF(icon_age / icon_sage / icon_folder_s)が直の子として
   置かれており、フレックス項目になると交差軸方向にstretchして
   カード幅いっぱいまで引き伸ばされてしまう。block のままにする。

   注意2: common.css:4187 の
     #centerarea .paid_new .newmoviebox {
       width:140px; float:left; padding:7px 3px 7px 5px;
       overflow-x:hidden; white-space:nowrap; font-size:10px; }
   は詳細度(0,1,3,0)が高く、素のセレクタでは打ち消せない。
   同じ形で上書きする（en_new は英語版の同種指定）。 */
.top-page #centerarea .newmoviebox,
#centerarea .paid_new .newmoviebox,
#centerarea .en_new .newmoviebox {
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    overflow-x: hidden;
    white-space: normal;
    font-size: 14px;
}

/* カード内の小さなアイコンは元のサイズのまま表示する
   （サムネイルだけ .shift-left で全幅にしている） */
.top-page #centerarea .newmoviebox img:not(.shift-left) {
    display: inline;
    width: auto;
    height: auto;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   8-2. トップページ限定の調整
   index.tpl が出力する <div id="main" class="top-page"> の配下だけに効かせる。
   他ページの同名クラスに影響させないための限定。
   --------------------------------------------------------------------------- */
/* コーナータイトル（アダルト新着動画 等）— モックの .section-head。
   モックは「見出しの帯」を持たず、太字20pxの見出しが素で置かれるだけ。
   旧デザインの .tit600 は背景画像の帯で、こちらでアクセントの縦バーも
   足していたが、いずれもモックには無いので外す。 */
#centerarea .tit600 {
    background: transparent none;
    border: 0 none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 16px;
    height: auto;
}

#centerarea .tit600 h2 {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--asg-text-main);
    background: transparent none;
    border: 0 none;
    padding: 0;
    margin: 0;
}

#centerarea .tit600 h2 a {
    color: var(--asg-text-main);
}

#centerarea .tit600 h2 a:hover {
    color: var(--asg-accent);
}

/* 箱そのものも面を持たない（モックの video-section は枠なし） */
#centerarea .box600,
#centerarea .box600 .boxbody-white,
#centerarea .box600 .boxbody-gray {
    background: transparent none;
    border: 0 none;
    border-radius: 0;
}

/* .boxbottom600 を隠したぶんの下余白をここで持つ（モックの
   .video-section の margin-bottom に相当） */
#centerarea .box600 {
    margin-bottom: 24px;
}

/* 一覧の下にある「新着アダルト動画一覧」リンク。
   モックでは見出し行の右にある「すべて見る」に相当する。
   実DOMでは一覧の後ろにあるため、アクセント色の導線として整える。 */
#centerarea .box600 > .boxbody-white > p.right,
#centerarea .box600 > .boxbody-gray > p.right {
    margin: 16px 0 0;
    text-align: right;
    font-size: 13px;
}

#centerarea .box600 p.right a {
    color: var(--asg-accent);
    font-weight: 500;
}

/* --- 「すべて見る」型の導線（モックの .section-head .more） ---
   モック値: color:accent / font-size:13px / font-weight:500 /
             文字と山形アイコンを gap:2px で横並び。

   対象は「新着アダルト動画一覧」(中央カラム・一覧の下)と
   「全てのカテゴリを見る」(左カラム・カテゴリの下)の2箇所。
   モックでは見出し行の右にあるが、実DOMでは一覧の後ろに置かれているため、
   位置はそのままで見た目だけ揃えている。

   詳細度: 既存の `#leftarea .boxbody-gray a`(0,1,2,0) が色を text-sub にしているので、
   打ち消せるよう `#leftarea .boxbody-gray a.more`(0,1,3,0) の形で指定する。 */
#centerarea a.more,
#centerarea .box600 p.right a.more,
#leftarea .boxbody-gray a.more,
#leftarea .boxbody-white a.more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--asg-accent);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

/* 山形アイコン。文字が長いときも縮まないようにする */
#centerarea a.more svg,
#leftarea a.more svg {
    flex: none;
    width: 14px;
    height: 14px;
}

#centerarea a.more:hover,
#centerarea .box600 p.right a.more:hover,
#leftarea .boxbody-gray a.more:hover,
#leftarea .boxbody-white a.more:hover {
    color: var(--asg-accent-strong);
}

/* ---------------------------------------------------------------------------
   8-3-2. オススメサイト（メインカラム最下部）
   ----------------------------------------------------------------------------
   もともと左カラムの .box160.genrelink（縦1列の小さなリンク集）だったものを、
   index.tpl 側で Topfooter 広告の直下へ移した。

   モックの .recommend-sites（design-output/shared.css:398-409）と同じ値:
     section     … margin-bottom 32px・枠も面も持たない
     h2          … 見出し用フォント / 16px / bold / 下12px
     ul          … flex 折返し・列間 32px の3列
     a           … block / 上下12px / 13px / 副アクセント色 / 下罫線1px
   --------------------------------------------------------------------------- */
#centerarea .recommend-sites {
    margin: 0 0 32px;
    padding: 0;
}

#centerarea .recommend-sites h2 {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--asg-text-main);
    background: transparent none;
    border: 0 none;
    padding: 0;
    margin: 0 0 12px;
}

/* legacy の list-style-image（icon_*.gif）と字下げを外す */
#centerarea .recommend-sites ul {
    display: flex;
    flex-wrap: wrap;
    /* 行間は罫線で仕切るため 0、列間だけ 32px 空ける */
    gap: 0 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#centerarea .recommend-sites li {
    /* 3列。列間 32px を2本ぶん均等に差し引く */
    width: calc(33.333% - 32px * 2 / 3);
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
}

#centerarea .recommend-sites a {
    display: block;
    padding: 12px 0;
    font-size: 13px;
    color: var(--asg-accent2);
    text-decoration: none;
    border-bottom: 1px solid var(--asg-line);
    /* サイト名が長い場合も1行に収め、はみ出しは省略する */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#centerarea .recommend-sites a:hover {
    color: var(--asg-accent);
}

/* ---------------------------------------------------------------------------
   8-4. サイドバーのメニュー（左カラム）
   ----------------------------------------------------------------------------
   現行の作り:
     .box160.folder > .tit160(h2) + .boxbody-gray
        ├ ul            … 「アダルト総合ランキング」「新着アダルト動画一覧」(li.flag)
        ├ ul            … カテゴリ本体（{foreach $base_category}）
        └ .openlistarea … 提携動画のツリーメニュー(simpletree)

   モックとの差:
     - li が list-style-image で legacy のGIF（icon_folder_s / icon_flag_pink /
       icon_simple）を表示している。暗い面に合わない
     - #leftarea ul li に margin-left:30px が入り、深く字下げされている
     - リンクが既定の下線付き
     - カテゴリが1列の箇条書き。モックは2列のチップ

   モックの実際の作り（shared.css の .menu-group）:
     .menu-group      … margin-bottom:32px のみ。枠線も背景も持たない
     .menu-group h3   … font-mono / 11px / letter-spacing .06em /
                        color:text-faint / font-weight:400 / margin:0 0 8px
     .menu-list a     … padding:12px 0 / font-size:14px / color:text-main /
                        border-bottom:1px solid line
     .submenu li a    … padding:8px 0 8px 16px / font-size:13px /
                        color:text-sub / 罫線なし
     .cat-grid a      … background:bg-elevated-2 / radius:8px /
                        padding:8px 12px / font-size:12.5px / 枠線なし
     .menu-group-member … ここだけ箱。bg-elevated-2 / 1px line /
                        radius:10px / padding:12px 16px

   つまりサイドバーの各セクションは「枠のないブロック＋控えめな小見出し」で、
   面を持つのは会員メニューとカテゴリのチップだけ。
   旧デザインの .box160 / .tit160 / .boxbottom160 が作る枠・見出し帯は
   すべて打ち消してこの形に合わせる。
   --------------------------------------------------------------------------- */

/* --- 箱の外枠を外す（モックの .menu-group は枠なし） --- */
#leftarea .box160,
#leftarea .box180,
#rightarea .box160,
#rightarea .box180 {
    background: transparent none;
    border: 0 none;
    border-radius: 0;
    margin-bottom: 32px;   /* モックの .menu-group の下余白 */
    padding: 0;
}

/* 箱の本体。枠も面も持たせない */
#leftarea .boxbody-gray,
#leftarea .boxbody-white,
#rightarea .boxbody-gray,
#rightarea .boxbody-white {
    background: transparent none;
    border: 0 none;
    border-radius: 0;
    padding: 0;
}

/* 旧デザインの箱の下端。画像で角を描くための飾りで、
   モックには対応するものが無い。余白は .box160 の margin で確保済み。 */
#leftarea .boxbottom160,
#leftarea .boxbottom180,
#rightarea .boxbottom160,
#rightarea .boxbottom180 {
    display: none;
}

/* --- 見出し（モックの .menu-group h3） ---
   旧デザインは背景画像の帯＋大きめの見出し。モックは小さく静かなラベル。
   セクション8で付けたアクセントの縦バーもモックには無いので外す。 */
#leftarea .tit160,
#leftarea .tit180,
#rightarea .tit160,
#rightarea .tit180 {
    background: transparent none;
    border: 0 none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    height: auto;
}

#leftarea .tit160 h2,
#leftarea .tit180 h2,
#rightarea .tit160 h2,
#rightarea .tit180 h2 {
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--asg-text-faint);
    background: transparent none;
    border: 0 none;
    padding: 0;
    margin: 0 0 8px;
}

/* 共通: サイドバーのリストから legacy のマーカー画像と深い字下げを外す */
#leftarea ul,
#rightarea ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#leftarea ul li,
#rightarea ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
}

/* .flag は !important 付きで指定されているため、こちらも同じ強さで打ち消す */
#leftarea ul li.flag,
#rightarea ul li.flag {
    list-style-image: none !important;
}

/* サイドバーのリンクは下線を外し、行として押しやすい面にする */
#leftarea a,
#rightarea a {
    text-decoration: none;
}

#leftarea .boxbody-gray a,
#leftarea .boxbody-white a,
#rightarea .boxbody-gray a,
#rightarea .boxbody-white a {
    color: var(--asg-text-sub);
}

#leftarea .boxbody-gray a:hover,
#leftarea .boxbody-white a:hover,
#rightarea .boxbody-gray a:hover,
#rightarea .boxbody-white a:hover {
    color: var(--asg-accent);
}

/* --- メニュー（モックの .menu-list と同じ値）---
   モックは `display:flex` ＋ `justify-content:space-between` で、
   ラベルを左、山形アイコンを右端に置く。アイコンが無い項目でも
   見た目は block のときと変わらない。 */
#leftarea .menu-list > li > a,
#leftarea .menu-list .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0;
    color: var(--asg-text-main);
    font-size: 14px;
    font-weight: normal;
    border-bottom: 1px solid var(--asg-line);
}

#leftarea .menu-list > li:last-child > a {
    border-bottom: 0 none;
}

#leftarea .menu-list > li > a:hover {
    color: var(--asg-accent);
}

/* ランキングの親項目。モックと同じ開閉ボタン（.menu-toggle）。
   button の既定の見た目（枠・背景・中央寄せ・フォント）を消して、
   隣の <a> と同じ行に見えるようにする。 */
#leftarea .menu-list .menu-toggle {
    box-sizing: border-box;
    width: 100%;
    background: transparent none;
    border: 0 none;
    border-bottom: 1px solid var(--asg-line);
    border-radius: 0;
    color: var(--asg-text-main);
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

#leftarea .menu-list .menu-toggle:hover {
    color: var(--asg-accent);
}

/* 山形アイコン。開いているときは90度回して下向きにする */
#leftarea .has-submenu .chevron {
    flex: none;
    color: var(--asg-text-faint);
    transition: transform 0.2s ease;
}

#leftarea .has-submenu.open .chevron {
    transform: rotate(90deg);
}

/* 開いている間は、親の下罫線を消してサブメニュー側の罫線とつなげる */
#leftarea .has-submenu.open .menu-toggle {
    border-bottom-color: transparent;
}

/* サブメニュー（総合／再生数／お気に入り／投稿者／デイリー）。
   既定は閉じた状態。高さ0で隠し、open が付いたときだけ開く
   （display:none にしないのは、開閉にアニメーションを付けるためと、
     JS無効環境でもDOM上はリンクが辿れるようにするため）。
   モックは .submenu li a に罫線を持たせず、まとまりの下端にだけ引く。 */
#leftarea .menu-list .submenu {
    max-height: 0;
    overflow: hidden;
    border-bottom: 0 none;
    transition: max-height 0.25s ease;
}

#leftarea .has-submenu.open .submenu {
    /* モックと同じ値。5項目ぶんの実高さより少し大きい */
    max-height: 280px;
    border-bottom: 1px solid var(--asg-line);
}

#leftarea .menu-list .submenu > li > a {
    display: block;
    padding: 8px 0 8px 16px;
    color: var(--asg-text-sub);
    font-size: 13px;
    font-weight: normal;
    border-bottom: 0 none;
}

#leftarea .menu-list .submenu > li:last-child > a {
    padding-bottom: 12px;
}

#leftarea .menu-list .submenu > li > a:hover {
    color: var(--asg-accent);
}

/* 会員メニュー（モックの .menu-group-member）。
   サイドバーで唯一「面」を持つブロック。 */
#leftarea .sidemenu.member {
    background: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    border-radius: 10px;
    padding: 12px 16px;
    box-sizing: border-box;
}

/* --- ログインユーザーメニュー（blocks/side_member_box.tpl）---
   マイページ関連ページのサイドバー最上部に置く「〇〇さんようこそ！」の箱。
   面・枠・角丸は上の .sidemenu.member（モックの .menu-group-member）を
   そのまま使い、ここでは挨拶行とログアウト行の見た目だけを足す。 */
#leftarea .sidemenu.mymenu .mymenu-greet {
    margin: 0;
    padding: 2px 0 10px;
    border-bottom: 1px solid var(--asg-line);
    font-size: 13px;
    line-height: 1.5;
    color: var(--asg-text-sub);
    /* 「全てのカテゴリを見る」用の #leftarea .boxbody-gray > p が
       text-align:right を敷いているため、ここで左寄せに戻す */
    text-align: left;
}

/* 会員名。ここだけ本文色＋太字にして、誰でログインしているかを見つけやすくする */
#leftarea .sidemenu.mymenu .mymenu-greet a {
    color: var(--asg-text-main);
    font-weight: bold;
}

#leftarea .sidemenu.mymenu .mymenu-greet a:hover {
    color: var(--asg-accent);
}

/* ログアウトは他の項目と役割が違う（マイページ内の移動ではない）ので、
   1段落とした色にして並びの中で自己主張しないようにする */
#leftarea .sidemenu.mymenu .mymenu-logout > a {
    color: var(--asg-text-sub);
}

#leftarea .sidemenu.mymenu .mymenu-logout > a:hover {
    color: var(--asg-accent);
}

/* 項目右端の山形アイコン（モックの .menu-list a svg）。
   文字より一段淡くし、ラベルが長くても潰れないよう縮小を止める。 */
#leftarea .menu-list a svg {
    color: var(--asg-text-faint);
    flex-shrink: 0;
}

/* --- カテゴリ本体を2列のチップに（モックの .cat-grid 相当）---
   メニューを別の箱へ切り出したため、カテゴリのulは .folder 内で最初のulになる */
#leftarea .box160.folder .boxbody-gray > ul:first-of-type {
    display: grid;
    /* 1fr の既定は min-width:auto のため、「コスプレ・制服系(3032)」のような
       長いラベルが列幅を押し広げてサイドバーからはみ出す。
       minmax(0, 1fr) にして列を縮められるようにし、はみ出し分は
       チップ側の text-overflow: ellipsis で省略する。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin: 12px 0;
}

/* モックの .cat-grid a と同じ値。枠線は持たせない */
#leftarea .box160.folder .boxbody-gray > ul:first-of-type > li > a {
    display: block;
    padding: 8px 12px;
    background: var(--asg-bg-elevated-2);
    border: 0 none;
    border-radius: 8px;
    color: var(--asg-text-sub);
    font-size: 12.5px;
    line-height: 1.4;
    /* 「OL・お姉さん・痴女」「コスプレ・制服系」のような長い名称は
       省略せず折り返して見せる（省略すると何のカテゴリか分からなくなるため）。 */
    white-space: normal;
    word-break: break-word;
}

#leftarea .box160.folder .boxbody-gray > ul:first-of-type > li > a:hover {
    color: var(--asg-accent);
}

/* --- 提携動画のツリーメニュー --- */
#leftarea .openlistarea {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--asg-line);
}

/* simpletree.css は index.tpl の body 内で読み込まれ、head内のこのファイルより
   後に来る。そのため .submenu 等の指定に勝てるよう #leftarea を付けて
   詳細度を上げている（!important は使わない）。 */
#leftarea .openlistarea .lifirst,
#leftarea .openlistarea li.submenu,
#leftarea .openlistarea ul.treeview li {
    color: var(--asg-text-main);
    font-weight: bold;
    font-size: 12.5px;
    padding: 4px 0;
}

#leftarea .openlistarea ul li a {
    display: block;
    padding: 5px 0 5px 12px;
    font-size: 12px;
}

/* 「全てのカテゴリを見る」等の補助リンク */
#leftarea .boxbody-gray > p,
#leftarea .boxbody-white > p {
    margin: 8px 0 0;
    text-align: right;
    font-size: 12px;
}

/* --- オススメサイト・ユーザーランキング・新着コメント ---
   モックの .info-list（padding:8px 0 / font-size:12px / color:text-sub）に寄せる。
   件数が多く行間が詰まるため、区切り線は入れずに余白で分ける。

   ※ トップページ(index.tpl)からは3つとも外した（オススメサイトはメインカラムへ移動、
     残り2つは削除）。ここの指定は同じ構造を持つ index_jpsex.tpl / index_paid.tpl 用に残す。 */
#leftarea .genrelink .boxbody-gray > ul > li,
#leftarea .comment .boxbody-gray > ul > li,
#leftarea .people .boxbody-gray > ul > li {
    border-bottom: 0 none;
}

#leftarea .genrelink .boxbody-gray > ul > li:last-child,
#leftarea .comment .boxbody-gray > ul > li:last-child,
#leftarea .people .boxbody-gray > ul > li:last-child {
    border-bottom: 0 none;
}

/* モックの .info-list a と同じ値 */
#leftarea .genrelink .boxbody-gray > ul > li > a,
#leftarea .comment .boxbody-gray > ul > li > a,
#leftarea .people .boxbody-gray > ul > li > a {
    display: block;
    padding: 8px 0;
    font-size: 12px;
    color: var(--asg-text-sub);
    /* コメント本文は長いことがあるので1行で省略する */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#leftarea .genrelink .boxbody-gray > ul > li > a:hover,
#leftarea .comment .boxbody-gray > ul > li > a:hover,
#leftarea .people .boxbody-gray > ul > li > a:hover {
    color: var(--asg-accent2);
}

/* ---------------------------------------------------------------------------
   8-5. 動画詳細ページ（design-output/movie-desktop.html 準拠）
   ----------------------------------------------------------------------------
   モックの構成（上から）:
     パンくず → プレイヤー → タイトル → メタ行(再生数/投稿日/カテゴリ) →
     操作行(▲▼/お気に入り/共有/ダウンロード) → 情報カード →
     コメント投稿 → コメント一覧 → 削除依頼リンク → 同じカテゴリのおすすめ → 広告

   旧デザインとの主な差:
     - タイトルがプレイヤーの上のグレー帯 → プレイヤーの下の素の見出し
     - 操作ボタンが /images/moviepage.png のスプライト画像 → CSSのピル
     - #d-intro / コメント欄が罫線だけの素の並び → カード
   注意: #movie_info 系の既存指定は詳細度(0,1,2,0)。打ち消すため、
         こちらも #movie_info を頭に付けた同形のセレクタで書く。
   --------------------------------------------------------------------------- */

/* パンくず。モックの .breadcrumb（12px / text-faint / 現在地だけ本文色） */
.list-page #centerarea #pan,
.movie-page #centerarea #pan {
    margin: 0 0 16px;
    padding: 0;
    background: transparent none;
    border: 0 none;
    font-size: 12px;
    color: var(--asg-text-faint);
}

.list-page #centerarea #pan a,
.movie-page #centerarea #pan a {
    color: var(--asg-text-sub);
}

.list-page #centerarea #pan a:hover,
.movie-page #centerarea #pan a:hover {
    color: var(--asg-accent);
}

/* ---------------------------------------------------------------------------
   8-6. 一覧ページ（新着など。design-output/newmovie-desktop.html 準拠）
   ----------------------------------------------------------------------------
   構成: パンくず → 見出し(.page-header) → 絞り込みバー → 広告 →
         カードグリッド → 広告 → ページャ

   カードのマークアップはトップページ・動画詳細ページと同じ .newmoviebox を使い、
   並べ方(グリッド)だけをここで決める。
   --------------------------------------------------------------------------- */

/* 旧デザインは `#list div { border-top:1px solid #CCC; padding:15px 3px 5px }` で
   1件ずつ横線で区切っていた。#list 配下の**すべてのdiv**に効くため、
   カードのサムネイル枠にも線と余白が入ってしまう。まとめて解除する。 */
.list-page #list div {
    border-top: 0 none;
    padding: 0;
}

/* 見出し（モックの .page-header）。右にプレミアム向けの「サムネイル」導線が入る */
.list-page .page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
}

.list-page .page-header h1 {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--asg-text-main);
    background: transparent none;
    border: 0 none;
    margin: 0;
    padding: 0;
}

/* カードのグリッド。行32px・列16pxはトップページと同じ値。
   一覧ページ(.list-page)だけでなく検索ページ(.sub-page)でも使うので、
   ページのクラスではなく #centerarea 配下の .video-grid を対象にする。 */
#centerarea .video-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 16px;
    margin: 16px 0 32px;
}

#centerarea .video-grid .newmoviebox {
    float: none;
    width: auto;
    margin: 0;
}

/* 該当なしの文言 */
.list-page .no-movie {
    padding: 32px 0;
    text-align: center;
    color: var(--asg-text-sub);
}

/* --- サイドバーの「昨日の動画ランキング」（partVideoRanking.tpl） ---
   モックには無いが、動画詳細の「{カテゴリ名}新着」と同じく回遊導線として残している。
   旧デザインは 80×60 のサムネイルを float させ、右に 60px 幅の極小テキストを
   詰め込む作りで、暗い面では読めない。サムネイル＋2行のリストに整える。 */
#leftarea .dayrank > div {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 0;
}

/* 順位のGIF（icon_ranking_1.gif 等）は明るい画像なので出さない */
#leftarea .dayrank > div > img {
    display: none;
}

#leftarea .dayrank > div > a {
    flex: 0 0 80px;
    order: -1;
}

#leftarea .dayrank > div > a > img {
    display: block;
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    float: none;
    margin: 0;
}

#leftarea .dayrank > div > h3 {
    order: 0;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.45;
}

#leftarea .dayrank > div > h3 > a {
    color: var(--asg-text-sub);
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#leftarea .dayrank > div > h3 > a:hover {
    color: var(--asg-accent);
}

/* 投稿日時・カテゴリ・投稿者・ASGの4行は情報量が多すぎるので畳む
   （同じ情報はリンク先で読める） */
#leftarea .dayrank > div > p,
#leftarea .dayrank > div > br {
    display: none;
}

/* --- ランキングの種類切り替えタブ（モックの .tab-row） --- */
.list-page .tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--asg-line);
    margin: 0 0 24px;
}

.list-page .tab-row a,
.list-page .tab-row .active {
    display: block;
    padding: 12px 16px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--asg-text-sub);
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
}

.list-page .tab-row .active {
    color: var(--asg-text-main);
    border-bottom-color: var(--asg-accent);
}

.list-page .tab-row a:hover {
    color: var(--asg-accent);
}

/* --- ランキングの一覧（モックの .rank-list / .rank-item） ---
   旧デザインは .v-left(順位) と .v-right(内容) を float で並べ、
   `.videorank div { border-bottom:1px dotted; width:590px }` で仕切っていた。
   固定幅と点線を解除して、1件＝1枚のカードに置き換える。 */
.list-page .videorank div,
.list-page .rank-list div {
    border-bottom: 0 none;
    width: auto;
    margin: 0;
}

.list-page .rank-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 32px;
}

.list-page .rank-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--asg-bg-elevated);
    border-radius: 10px;
    /* モックのカードは枠線ではなく内側のシャドウで縁取る */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.list-page .rank-item .rank-num {
    flex: 0 0 32px;
    padding-top: 2px;
    text-align: center;
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--asg-text-faint);
}

/* 1〜3位だけアクセント色 */
.list-page .rank-item .rank-num.top3 {
    color: var(--asg-accent);
}

.list-page .rank-item .thumb {
    position: relative;
    flex: 0 0 160px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--asg-bg-elevated-2);
}

.list-page .rank-item .thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 一覧用の float(.shift-left) を解除する */
    float: none;
    margin: 0;
}

.list-page .rank-item .info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.list-page .rank-item .info .title {
    color: var(--asg-text-main);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    /* 長いタイトルは2行で止める */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.list-page .rank-item .info .title:hover {
    color: var(--asg-accent);
}

.list-page .rank-item .info .by {
    font-size: 12px;
    color: var(--asg-text-sub);
}

.list-page .rank-item .info .by a {
    color: var(--asg-accent2);
    text-decoration: none;
}

.list-page .rank-item .info .by a:hover {
    color: var(--asg-accent);
}

.list-page .rank-item .info .desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--asg-text-faint);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* アゲ・サゲ・各ページ固有の指標。カードの下端に寄せる */
.list-page .rank-item .info .stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
    font-size: 11.5px;
    color: var(--asg-text-sub);
}

.list-page .rank-item .info .stat-row .up {
    color: var(--asg-accent);
}

.list-page .rank-item .info .stat-row .down {
    color: var(--asg-accent2);
}

/* --- ページャ（モックの .pagination） ---
   出力は `<p class="page-link">` の中に `<a>`・`<a id="currentPage" class="active">`・
   `<span class="dots">`・`<a class="prev/next">`（中身が空で背景画像の矢印）が並ぶ。 */
.list-page .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 32px 0 0;
    padding: 0;
    border-top: 0 none;
    text-align: center;
}

.list-page .page-link a,
.list-page .page-link span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    margin: 0;
    padding: 0 8px;
    border-radius: 8px;
    color: var(--asg-text-sub);
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
    font-size: 13px;
    text-decoration: none;
}

.list-page .page-link a:hover {
    background: var(--asg-bg-elevated-2);
    color: var(--asg-text-main);
}

/* 現在ページ */
.list-page .page-link #currentPage,
.list-page .page-link .active {
    background: var(--asg-accent);
    color: #fff;
}

.list-page .page-link .dots {
    color: var(--asg-text-faint);
}

/* 前後の矢印。既存は10pxの矢印画像(left.png / right.png)で暗背景では見えない。
   画像をやめて文字の山形にする。 */
.list-page .page-link .prev,
.list-page .page-link .next {
    width: auto;
    height: 34px;
    background-image: none;
}

.list-page .page-link .prev::before {
    content: "‹";
    font-size: 18px;
    line-height: 1;
}

.list-page .page-link .next::before {
    content: "›";
    font-size: 18px;
    line-height: 1;
}

/* --- プレイヤー ---
   モックは 16:9・角丸12px。実際のプレイヤー(flowplayer)は高さをJSで持つので、
   角丸と下余白だけを与えて中身のサイズには手を出さない。 */
.movie-page .box600.film .player,
.movie-page #movie_frame,
.movie-page #movie_frame_paid {
    border-radius: 12px;
    overflow: hidden;
    background: var(--asg-bg-elevated-2);
    margin: 0 0 16px;
}

/* 有料会員向けの動画詳細（contentsPage_paid）の非HLSプレイヤー。
   common.css が #movie_frame_paid に width:640px / float:left、
   その中の .flash に width:771px / height:450px を敷いており、
   可変幅になったメインカラムからはみ出す。
   .shrink（画面全体に広げるシアター表示）は position:fixed で全幅にする
   既存の指定なので、:not(.shrink) に限定して壊さないようにする。 */
.movie-page #movie_frame_paid:not(.shrink) {
    width: auto;
    float: none;
    margin-right: 0;
}

.movie-page #movie_frame_paid:not(.shrink) .flash {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* common.css の `.paid #movie_info { margin: 14px 0 0 6px }` が
   メタ行を6pxだけ右にずらして、通常の動画詳細と左端が揃わない。 */
.movie-page.paid #movie_info,
.movie-page .paid #movie_info {
    margin: 0;
}

/* --- タイトル（モックの .movie-title） --- */
.movie-page h1.movie-title {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--asg-text-main);
    background: transparent none;
    border: 0 none;
    margin: 0 0 12px;
    padding: 0;
}

/* --- メタ行（モックの .movie-meta-row） ---
   旧デザインは .views がスプライト画像の上に数字を絶対配置していた。
   画像・固定サイズ・絶対配置をすべて解除して、素の1行に戻す。 */
#movie_info .meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--asg-text-sub);
}

#movie_info .meta-row .views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: static;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
    font-size: 13px;
}

#movie_info .meta-row .views div {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    font-size: 13px;
    text-align: left;
}

#movie_info .meta-row .views .unit,
#movie_info .meta-row .posted {
    font-weight: normal;
}

#movie_info .meta-row a,
#movie_info .meta-row a:hover {
    text-decoration: none;
}

#movie_info .meta-row a {
    color: var(--asg-text-sub);
}

#movie_info .meta-row a:hover {
    color: var(--asg-accent);
}

/* --- 操作行（モックの .movie-actions） --- */
#movie_info .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
}

/* ▲▼。モックの .vote-widget（角丸のピルの中に ▲n / バー / ▼n） */
#movie_info .actions .votes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none;
    margin: 0;
    padding: 8px 16px;
    background: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line);
    border-radius: 999px;
    font-size: 13px;
}

/* スプライト画像のボタンを解除してテキストに戻す */
#movie_info .actions .votes > a.up,
#movie_info .actions .votes > a.down {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: static;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

#movie_info .actions .votes > a.up {
    color: var(--asg-accent);
}

#movie_info .actions .votes > a.down {
    color: var(--asg-accent2);
}

#movie_info .actions .votes > a.up::before {
    content: "▲";
}

#movie_info .actions .votes > a.down::before {
    content: "▼";
}

#movie_info .actions .votes > a.up span,
#movie_info .actions .votes > a.down span {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    text-align: left;
}

/* アゲ／サゲの比率バー。モックは幅64px・高さ5px の角丸 */
#movie_info .actions .votes > span {
    position: static;
    float: none;
    width: 64px;
    height: 5px;
    margin: 0;
    background: none;
    border-radius: 999px;
    overflow: hidden;
}

#movie_info .actions .votes .bar {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#movie_info .actions .votes .bar-down {
    background-color: var(--asg-accent2);
    background-image: none;
}

#movie_info .actions .votes .bar-up {
    background-color: var(--asg-accent);
    background-image: none;
}

/* お気に入り／共有／ダウンロード。モックの .action-pill */
#movie_info .actions a.favs,
#movie_info .actions a.share,
#movie_info .actions a.download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: static;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 9px 18px;
    background: var(--asg-bg-elevated-2) none;
    border: 1px solid var(--asg-line);
    border-radius: 999px;
    color: var(--asg-text-main);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* ダウンロードは有料会員向け。既存CSSどおり .paid のときだけ出す */
#movie_info .actions a.download {
    display: none;
}

.paid #movie_info .actions a.download {
    display: inline-flex;
}

#movie_info .actions a.favs:hover,
#movie_info .actions a.share:hover,
#movie_info .actions a.download:hover {
    border-color: var(--asg-accent);
    color: var(--asg-accent);
}

/* 登録済みのお気に入りは、モックの .action-pill.on（淡いアクセント面） */
#movie_info .actions a.favs.on {
    background-color: var(--asg-accent-tint);
    border-color: var(--asg-accent);
    color: var(--asg-accent);
}

#movie_info .actions a.favs span {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    text-align: left;
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
}

#movie_info .actions .label {
    font-weight: 700;
}

/* --- 「共有」ホバーで出るポップアップ（blocks/popup_share.tpl の #modal） ---
   既存は明るいグレーのチップ（#EFEFEF の面／#AFAFAF の枠／リンクは #EEE 地に白文字）で、
   ダークテーマでは白文字が背景に溶けて読めない。面・枠・文字・フォームをまとめて暗い側へ。

   詳細度メモ: common.css は `#modal a:link`(1,0,1) と
   `#movie_info #modal>div a:link`(2,0,2) の2段構えなので、こちらも
   `#movie_info #modal ...` の形で書いて上書きする。
   テンプレート側のインライン指定（color:#333 / background-color:gray）は
   CSSで勝てないため popup_share.tpl から外してある。 */
#movie_info #modal {
    background-color: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line);
    border-radius: 10px;
    color: var(--asg-text-main);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    padding: 10px;
    width: 190px;
}

#movie_info #modal p {
    color: var(--asg-text-sub);
}

/* 「友達に教える」「HP?ブログに貼る」の行を仕切る点線 */
#movie_info #modal .popup-menu-element {
    border-bottom: 1px dotted var(--asg-line);
}

/* リンク。既存は「#EEE の地に白文字」で読めない状態だった */
#movie_info #modal a,
#movie_info #modal > div a:link,
#movie_info #modal > div a:visited,
#movie_info #modal > div > p > a {
    background-color: transparent;
    color: var(--asg-text-main);
}

#movie_info #modal a:hover,
#movie_info #modal > div a:hover {
    background-color: transparent;
    color: var(--asg-accent);
}

/* 展開する2つのフォーム（もとはクリーム色 #F9F7ED の面） */
#movie_info #mail-form,
#movie_info #copypaste-form {
    background-color: var(--asg-bg-elevated-2);
    border-radius: 8px;
}

#movie_info #modal input,
#movie_info #modal textarea {
    box-sizing: border-box;
    background-color: var(--asg-bg-base);
    border: 1px solid var(--asg-line);
    border-radius: 6px;
    color: var(--asg-text-main);
    font-size: 12px;
}

#movie_info #modal input:focus,
#movie_info #modal textarea:focus {
    border-color: var(--asg-accent);
    outline: none;
}

/* メール送信ボタン（もとはインラインで background-color:gray） */
#movie_info #modal #mail_form a.button,
#movie_info #modal .js-save-data {
    display: inline-block;
    /* common.css の `#modal a { width: 80% }` が効くと「送信」が2行に折れるので戻す */
    width: auto;
    white-space: nowrap;
    margin-top: 8px;
    padding: 6px 14px;
    background-color: var(--asg-accent);
    border: 0 none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#movie_info #modal #mail_form a.button:hover,
#movie_info #modal .js-save-data:hover {
    background-color: var(--asg-accent-strong);
    color: #fff;
}

/* コピー結果の吹き出し（#clip_step）。既存は灰色ベタ */
#movie_info #modal #clip_form #clip_step {
    background-color: var(--asg-bg-base);
    border: 1px solid var(--asg-line);
    color: var(--asg-text-sub);
    font-size: 11px;
}

/* 閉じるボタン */
#movie_info #modal .close {
    background-color: var(--asg-bg-elevated-2);
    border-radius: 6px;
    color: var(--asg-text-sub);
}

#movie_info #modal .close:hover {
    color: var(--asg-accent);
}

/* --- ダウンロード時のキャプチャ枠（#checkCaptchaBox） ---
   「ダウンロード」にカーソルを合わせると出る（表示されるのはプレミアム会員のみ）。
   共有ポップアップと同じく明るいグレーの面のままだったので揃える。
   中身の captcha 本体はサーバ側が出力する（{$captcha_code}）ので、
   入力欄・ボタン・リンクの見た目だけを整える。 */
#movie_info #checkCaptchaBox {
    background-color: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line);
    border-radius: 10px;
    color: var(--asg-text-main);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

#movie_info #checkCaptchaBox p,
#movie_info #checkCaptchaBox label,
#movie_info #checkCaptchaBox .DLType {
    color: var(--asg-text-sub);
    font-size: 12px;
}

/* エラー文（captchaが違うとき等） */
#movie_info #checkCaptchaBox #captchaError {
    color: var(--asg-accent);
    font-size: 12px;
}

/* captchaの答えを入れる欄 */
#movie_info #checkCaptchaBox input[type="text"] {
    box-sizing: border-box;
    background-color: var(--asg-bg-base);
    border: 1px solid var(--asg-line);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--asg-text-main);
    font-size: 13px;
}

#movie_info #checkCaptchaBox input[type="text"]:focus {
    border-color: var(--asg-accent);
    outline: none;
}

/* ラジオ（標準／高画質）。既定の青いラジオは暗背景で浮くのでアクセント色に */
#movie_info #checkCaptchaBox input[type="radio"] {
    accent-color: var(--asg-accent);
    vertical-align: middle;
}

#movie_info #checkCaptchaBox .DLType label {
    margin-right: 12px;
    vertical-align: middle;
    cursor: pointer;
}

/* 「ダウンロード」ボタン */
#movie_info #checkCaptchaBox #DownloadSubmit {
    display: inline-block;
    padding: 7px 18px;
    background-color: var(--asg-accent);
    border: 0 none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#movie_info #checkCaptchaBox #DownloadSubmit:hover {
    background-color: var(--asg-accent-strong);
}

/* 枠内のリンク（「イメージ更新」「動画に戻る」）。
   common.css の `#movie_info a { color:#000 }` が効いて黒文字＝暗背景で読めないため、
   id2つのセレクタで上書きする。 */
#movie_info #checkCaptchaBox a {
    color: var(--asg-text-sub);
    font-size: 12px;
    text-decoration: none;
}

#movie_info #checkCaptchaBox a:hover {
    color: var(--asg-accent);
}

/* 「動画に戻る」だけボタンとの間隔を空ける */
#movie_info #checkCaptchaBox .CaptchaFormActions a {
    display: inline-block;
    margin-left: 12px;
}

/* --- 情報カード（モックの .info-card） --- */
.movie-page #d-intro {
    background: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line);
    border-radius: 12px;
    padding: 16px 24px;
    margin: 0 0 32px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--asg-text-sub);
}

.movie-page #d-intro > div {
    border: 0 none;
    padding: 0;
    margin: 0;
    background: none;
}

.movie-page #d-intro > div > strong {
    color: var(--asg-text-main);
    font-weight: 500;
    margin-right: 6px;
    background: none;
    padding: 0;
}

.movie-page #d-intro a {
    color: var(--asg-accent2);
}

.movie-page #d-intro a:hover {
    color: var(--asg-accent);
}

/* 「ビデオの紹介」だけは区切り線を上に引く（モックの .movie-desc） */
.movie-page #d-intro > div:last-child {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--asg-line);
}

.movie-page #d-intro > div:last-child p {
    margin: 6px 0 0;
}

/* --- コメント投稿フォーム（モックの .comment-form） --- */
.movie-page #input-area {
    background: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line);
    border-radius: 12px;
    padding: 24px;
    margin: 0 0 24px;
}

.movie-page #input-area h3 {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--asg-text-main);
    margin: 0 0 12px;
    padding: 0;
    background: none;
}

.movie-page #input-area .form-row-inline {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.movie-page #input-area .form-row-inline .form-row {
    flex: 1;
    margin-bottom: 0;
}

/* 削除keyの列。モックは幅140pxで右端に寄る（残りをニックネームが埋める） */
.movie-page #input-area .form-row-inline .form-row-key {
    flex: 1;
    max-width: 140px;
}

.movie-page #input-area .form-row {
    display: block;
    margin-bottom: 12px;
}

/* コメント欄の行。common.css に `#form_comment { margin-left: 95px }` があり、
   そのままだと入力欄が95px分だけ右にずれて短くなる。
   モックはカード幅いっぱいなので打ち消す（id2つで詳細度を上げている）。 */
.movie-page #input-area #form_comment {
    margin-left: 0;
}

.movie-page #input-area .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--asg-text-sub);
}

.movie-page #input-area input[type="text"],
.movie-page #input-area input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
    background: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    border-radius: 8px;
    color: var(--asg-text-main);
    font-size: 13px;
}

.movie-page #input-area input[type="text"]:focus,
.movie-page #input-area input[type="password"]:focus {
    border-color: var(--asg-accent);
    outline: none;
}

/* 入力チェックJSがラベルに付ける error クラス */
.movie-page #input-area .error .form-label,
.movie-page #input-area #form_warning {
    color: var(--asg-accent);
}

/* 送信ボタンの行。モックの .form-actions は margin-top:24px だけで、
   ボタンは**左寄せ**（実測: ボタン左端＝入力欄の左端） */
.movie-page #input-area .form-actions {
    margin-top: 24px;
    text-align: left;
}

/* 送信ボタン。もとは btn_send_s.gif の画像ボタン（モックの .btn.primary） */
.movie-page #input-area .btn-send {
    display: inline-block;
    padding: 8px 24px;
    background: var(--asg-accent);
    border: 0 none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.movie-page #input-area .btn-send:hover {
    background: var(--asg-accent-strong);
}

/* --- コメント一覧（モックの .comment-list / .comment-item） --- */
.movie-page #comment {
    margin: 0 0 32px;
}

.movie-page #comment .comm-item {
    padding: 12px 0;
    margin: 0;
    background: none;
    border: 0 none;
    border-bottom: 1px solid var(--asg-line);
    font-size: 13px;
}

.movie-page #comment .comm-item:last-of-type {
    border-bottom: 0 none;
}

/* 「[No.n] by. 名前」の行 */
.movie-page #comment .comm-item .under-line {
    margin: 0 0 4px;
    padding: 0;
    border: 0 none;
    font-family: var(--font-mono, 'IBM Plex Mono', Consolas, monospace);
    font-size: 11.5px;
    color: var(--asg-text-faint);
}

.movie-page #comment .comm-item .under-line .orange {
    color: var(--asg-accent2);
}

.movie-page #comment .comm-item p {
    color: var(--asg-text-sub);
    line-height: 1.6;
    margin: 0;
}

/* コメント削除の行（No. と 削除key） */
.movie-page #comment p.right {
    margin-top: 16px;
    font-size: 12px;
    color: var(--asg-text-sub);
}

.movie-page #comment p.right input[type="text"],
.movie-page #comment p.right input[type="password"] {
    padding: 5px 8px;
    background: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    border-radius: 6px;
    color: var(--asg-text-main);
    font-size: 12px;
}

/* --- 削除依頼リンク（モックの .removal-links） --- */
.movie-page .bottom-links {
    margin: 16px 0 48px;
    padding: 0;
    background: none;
    border: 0 none;
    text-align: center;
    font-size: 12px;
    color: var(--asg-text-faint);
}

.movie-page .bottom-links a {
    color: var(--asg-text-sub);
    text-decoration: none;
}

.movie-page .bottom-links a:hover {
    color: var(--asg-accent);
}

/* --- 同じカテゴリのおすすめ（モックの .video-section） --- */
.movie-page .rel-videos {
    display: block;
    margin: 0 0 32px;
}

.movie-page .rel-videos .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.movie-page .rel-videos .section-head h2 {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--asg-text-main);
    background: none;
    border: 0 none;
    margin: 0;
    padding: 0;
}

/* カードはトップページと同じ .newmoviebox を使う。並べ方だけここで決める
   （行32px・列16pxはトップページのグリッドと同じ値） */
.movie-page .rel-videos .video-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 16px;
}

.movie-page .rel-videos .newmoviebox {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   8-7. その他のページ（静的ページ・フォーム・エラー等）
   ----------------------------------------------------------------------------
   対象: 使い方/規約などの静的ページ、新規登録・パスワード再発行・退会・
         問い合わせ・アップロードのフォーム、マイページ、検索、エラー画面など。

   これらはページ数が多く中身もばらばらなので、テンプレートは「枠」だけ
   （body/#main のクラス・パンくずの位置・見出し・サイドバーの共通ブロック）を
   揃え、**本文の見た目はこのCSSでまとめて**整える。

   モックの対応物:
     .page-header … 見出し
     .form-card   … 本文カード（bg-elevated / 1px line / radius 14px / padding 32px）
     .form-row    … ラベル＋入力
     .btn.primary … 送信ボタン
   --------------------------------------------------------------------------- */

/* 見出しとパンくずは一覧ページと同じ扱い */
.sub-page #centerarea #pan {
    margin: 0 0 16px;
    padding: 0;
    background: transparent none;
    border: 0 none;
    font-size: 12px;
    color: var(--asg-text-faint);
}

.sub-page #centerarea #pan a {
    color: var(--asg-text-sub);
}

.sub-page #centerarea #pan a:hover {
    color: var(--asg-accent);
}

.sub-page .page-header {
    margin: 0 0 16px;
}

.sub-page .page-header h1 {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--asg-text-main);
    background: transparent none;
    border: 0 none;
    margin: 0;
    padding: 0;
}

/* --- 本文カード（モックの .form-card / .info-card） ---
   旧デザインは .box600 の背景画像＋罫線で箱を描いていた。
   セクション8で .box600 / .boxbody-white は透明にしてあるので、
   ここで改めてカードとして描き直す。 */
.sub-page #centerarea .box600 > .boxbody-white,
.sub-page #centerarea .box600 > .boxbody-gray,
.sub-page #centerarea .simplebox > .boxbody-white {
    background: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: var(--asg-text-sub);
    font-size: 13.5px;
    line-height: 1.9;
}

/* カード内の見出し。h2/h3/h4 は本文色で少し大きく */
.sub-page #centerarea .boxbody-white h2,
.sub-page #centerarea .boxbody-white h3,
.sub-page #centerarea .boxbody-white h4,
.sub-page #centerarea .boxbody-gray h3 {
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--asg-text-main);
    background: transparent none;
    border: 0 none;
    margin: 24px 0 8px;
    padding: 0;
}

.sub-page #centerarea .boxbody-white h2:first-child,
.sub-page #centerarea .boxbody-white h3:first-child {
    margin-top: 0;
}

.sub-page #centerarea .boxbody-white p,
.sub-page #centerarea .boxbody-white li,
.sub-page #centerarea .boxbody-white dd,
.sub-page #centerarea .boxbody-white dt {
    color: var(--asg-text-sub);
}

.sub-page #centerarea .boxbody-white a {
    color: var(--asg-accent2);
}

.sub-page #centerarea .boxbody-white a:hover {
    color: var(--asg-accent);
}

/* 旧デザインの点線・実線の区切りは暗い面で浮くので線色を合わせる */
.sub-page #centerarea .boxbody-white hr,
.sub-page #centerarea .boxbody-white .line,
.sub-page #centerarea .boxbody-white .under-line {
    border-color: var(--asg-line);
    background: none;
}

/* --- 表（規約・料金・マイページの明細など） --- */
.sub-page #centerarea table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    margin: 12px 0;
    font-size: 13px;
}

.sub-page #centerarea table th,
.sub-page #centerarea table td {
    padding: 10px 12px;
    border: 1px solid var(--asg-line);
    background: transparent;
    color: var(--asg-text-sub);
    text-align: left;
    vertical-align: top;
}

.sub-page #centerarea table th {
    background: var(--asg-bg-elevated-2);
    color: var(--asg-text-main);
    font-weight: 500;
    white-space: nowrap;
}

/* --- フォーム --- */
.sub-page #centerarea input[type="text"],
.sub-page #centerarea input[type="password"],
.sub-page #centerarea input[type="email"],
.sub-page #centerarea input[type="tel"],
.sub-page #centerarea input[type="number"],
.sub-page #centerarea input[type="date"],
.sub-page #centerarea select,
.sub-page #centerarea textarea {
    box-sizing: border-box;
    max-width: 100%;
    padding: 9px 12px;
    background: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    border-radius: 8px;
    color: var(--asg-text-main);
    font-size: 13px;
    font-family: inherit;
}

.sub-page #centerarea input:focus,
.sub-page #centerarea select:focus,
.sub-page #centerarea textarea:focus {
    border-color: var(--asg-accent);
    outline: none;
}

.sub-page #centerarea input[type="radio"],
.sub-page #centerarea input[type="checkbox"] {
    accent-color: var(--asg-accent);
    vertical-align: middle;
}

.sub-page #centerarea label {
    color: var(--asg-text-sub);
}

/* 特定商取引法にもとづく表示（aboutlaw.tpl）
   もとは表全体が1枚のGIF画像だったのでダークテーマだとそこだけ白く浮いていた。
   画像の見た目（左に項目名・右に内容の2列）をHTMLの表で再現する。 */
.sub-page #centerarea .law-table {
    width: 100%;
    margin: 4px 0 16px;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.8;
}

.sub-page #centerarea .law-table th,
.sub-page #centerarea .law-table td {
    padding: 9px 14px;
    border: 1px solid var(--asg-line);
    text-align: left;
    vertical-align: top;
}

.sub-page #centerarea .law-table th {
    width: 190px;
    background: var(--asg-bg-elevated-2);
    color: var(--asg-text-main);
    font-weight: 600;
}

.sub-page #centerarea .law-table td {
    color: var(--asg-text-sub);
}

/* 「30日コース / $7」などの料金プラン。画像では一段下げて並んでいた */
.sub-page #centerarea .law-plans {
    margin: 4px 0 0;
    padding: 0 0 0 12px;
    list-style: none;
}

.sub-page #centerarea .law-plans li {
    color: var(--asg-text-main);
}

/* 送信・確認などのボタン。旧デザインは画像ボタン(input type=image)が多いが、
   type=submit / button のものはモックの .btn.primary に寄せる */
.sub-page #centerarea input[type="submit"],
.sub-page #centerarea input[type="button"],
.sub-page #centerarea button[type="submit"],
.sub-page #centerarea button:not([class]) {
    display: inline-block;
    padding: 9px 24px;
    background: var(--asg-accent);
    border: 0 none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.sub-page #centerarea input[type="submit"]:hover,
.sub-page #centerarea input[type="button"]:hover,
.sub-page #centerarea button[type="submit"]:hover,
.sub-page #centerarea button:not([class]):hover {
    background: var(--asg-accent-strong);
}

/* 入力チェックのエラー文言 */
.sub-page #centerarea .red,
.sub-page #centerarea .error {
    color: var(--asg-accent);
}

/* --- 新規登録の会員規約ボックス（signup.css の .elm_regulation .textarea） ---
   既存は #F4F4F4 の面＋#CCC の枠で、暗いページの中に白い箱が浮く。 */
.sub-page #centerarea .elm_regulation .textarea,
.sub-page #centerarea #signupform {
    background-color: var(--asg-bg-elevated-2);
    border-color: var(--asg-line);
    color: var(--asg-text-sub);
}

.sub-page #centerarea #signupform .formtitle {
    background-color: var(--asg-bg-elevated-2);
}

/* 規約の中の見出し・段落も本文色に寄せる */
.sub-page #centerarea .elm_regulation .textarea p,
.sub-page #centerarea .elm_regulation .textarea li {
    color: var(--asg-text-sub);
}

/* --- 旧デザインの汎用の「白い箱」対策 ---
   about系・フォーム系には共通CSSで #FFF / #F4F4F4 を敷いた小さな箱が残る。
   面と枠だけ暗い側へ寄せる（中身の文字色は上のルールで拾う）。 */
.sub-page #centerarea .simplebox,
.sub-page #centerarea .box250,
.sub-page #centerarea .waku,
.sub-page #centerarea .frame {
    background-color: var(--asg-bg-elevated-2);
    background-image: none;
    border-color: var(--asg-line);
}

/* --- サイドバーの見出し（他ページと同じ静かなラベルに） --- */
.sub-page #leftarea .box160,
.sub-page #rightarea .box180 {
    margin-bottom: 32px;
}

/* ---------------------------------------------------------------------------
   8-9. 共通ヘッダーに乗っていない独立ページ（.standalone-page）
   ----------------------------------------------------------------------------
   対象: お問い合わせ（inquiry / inquirySent）、メンテナンス画面（mente /
         ips_maintenance / maintenance_selectUpload）、動画の削除依頼
         （movieDeleteRequest / Confirm / Send）。

   これらは blocks/header.tpl を読まない独立したページで、
   `/css/inquiry.css` などが白ベースの見た目を作っている。
   枠組みは変えず、**配色だけ**ダークテーマに合わせる。
   --------------------------------------------------------------------------- */
body.standalone-page {
    background: var(--asg-bg-base) none;
    color: var(--asg-text-main);
}

/* inquiry.css の #layout（白い紙の枠＋背景画像）を暗い面のカードに */
body.standalone-page #layout {
    background: var(--asg-bg-elevated) none;
    border: 1px solid var(--asg-line);
    border-radius: 14px;
    color: var(--asg-text-sub);
    box-sizing: border-box;
    /* inquiry.css は width:600px + margin:30px auto。padding 込みの箱にすると
       中身が窮屈なので幅を広げ、中央寄せも明示する（環境によって auto が効かないため） */
    width: auto;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 40px;
}

body.standalone-page h1,
body.standalone-page h2,
body.standalone-page h3 {
    color: var(--asg-text-main);
    font-family: var(--font-display, 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif);
}

body.standalone-page p,
body.standalone-page dt,
body.standalone-page dd,
body.standalone-page li,
body.standalone-page td,
body.standalone-page th,
body.standalone-page label {
    color: var(--asg-text-sub);
}

body.standalone-page a {
    color: var(--asg-accent2);
}

body.standalone-page a:hover {
    color: var(--asg-accent);
}

/* 入力欄。inquiry.css は #EEEEEE の面＋黒文字を直接指定している */
body.standalone-page input[type="text"],
body.standalone-page input[type="password"],
body.standalone-page input[type="email"],
body.standalone-page textarea,
body.standalone-page select,
body.standalone-page #uname,
body.standalone-page #mail,
body.standalone-page #inquiry,
body.standalone-page #company {
    box-sizing: border-box;
    background: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--asg-text-main);
    font-size: 13px;
    font-family: inherit;
}

body.standalone-page input:focus,
body.standalone-page textarea:focus,
body.standalone-page select:focus {
    border-color: var(--asg-accent);
    outline: none;
}

/* エラー表示（inquiry.css の .error は赤文字＋薄赤の面） */
body.standalone-page .error,
body.standalone-page .red {
    color: var(--asg-accent);
    background: none;
}

/* メンテナンス画面などに残る旧ヘッダー（ロゴGIF・タブ画像）。
   面だけ暗くして、画像はそのまま置く（枠組みを変えない方針のため） */
body.standalone-page #header,
body.standalone-page #logoarea,
body.standalone-page #tabarea,
body.standalone-page #gnavi {
    background: var(--asg-bg-base) none;
    border-color: var(--asg-line);
}

body.standalone-page #footer {
    background: var(--asg-bg-base) none;
    border-top: 1px solid var(--asg-line);
    color: var(--asg-text-sub);
}

/* ---------------------------------------------------------------------------
   8-10. プレミアム会員のブロック開閉ボタン（.shaderbutton）
   ----------------------------------------------------------------------------
   有料会員向けページの各ブロック右上に出る「隠す／表示する」のボタン。
   既存は明るいPNG（button_hide.png / button_show.png）で暗い面に白い四角が浮く。
   画像をやめて、控えめな × / ＋ の記号にする（機能はそのまま）。
   --------------------------------------------------------------------------- */
.shadable .shaderbutton {
    width: 22px;
    height: 22px;
    background: var(--asg-bg-elevated-2) none;
    border: 1px solid var(--asg-line);
    border-radius: 6px;
    /* 既存は text-indent:10000px で文字を画面外へ飛ばしているので元に戻す */
    text-indent: 0;
    color: var(--asg-text-faint);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.shadable .shaderbutton:hover {
    border-color: var(--asg-accent);
    color: var(--asg-accent);
}

/* 隠している間は「＋」に見せる（中身のテキストは X のままなので置き換える） */
.shadable.block_hidden .shaderbutton {
    background: var(--asg-bg-elevated-2) none;
    font-size: 0;
}

.shadable.block_hidden .shaderbutton::after {
    content: "+";
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   8-8. 画像ボタンから置き換えたテキストボタン（.asg-btn）
   ----------------------------------------------------------------------------
   blocks/legacy_button_upgrade.tpl が、旧デザインの画像ボタン
   （input[type=image] の GIF、<a><img btn_*.gif></a>）を
   ラベル付きの <button> / <a> に置き換える。その見た目をここで作る。
   モックの .btn.primary / .btn.secondary と同じ値。
   --------------------------------------------------------------------------- */
.asg-btn,
a.asg-btn {
    display: inline-block;
    padding: 9px 24px;
    background: var(--asg-accent);
    border: 0 none;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
}

.asg-btn:hover,
a.asg-btn:hover,
.asg-btn:focus,
a.asg-btn:focus {
    background: var(--asg-accent-strong);
    color: #fff;
    text-decoration: none;
}

/* 「戻る」「閉じる」などは控えめに（モックの .btn.secondary） */
.asg-btn--sub,
a.asg-btn--sub {
    background: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    color: var(--asg-text-main);
}

.asg-btn--sub:hover,
a.asg-btn--sub:hover {
    background: var(--asg-bg-elevated-2);
    border-color: var(--asg-accent);
    color: var(--asg-accent);
}

/* サイドバーの中（幅260px）では少し小さく */
#leftarea .asg-btn,
#rightarea .asg-btn {
    padding: 7px 16px;
    font-size: 13px;
}

/* ---------------------------------------------------------------------------
   9. 絞り込み・並べ替え
   --------------------------------------------------------------------------- */
#sortFilters,
#tabarea,
.filters,
.filtersHead,
.sort {
    background: var(--asg-bg-elevated) none;
    color: var(--asg-text-main);
    border-color: var(--asg-line);
}

/* 「動画の絞込み」の見出し。モックの .filter-bar は見出しを持たず、
   セレクトが1行に並ぶだけ。トップページは common.css の
   `.top-page .sortFilter .header { display:none }` で消えていたが、
   一覧・ランキング系では出たままで、
     - モックと違う2行構成になる
     - 箱の高さが増えて直後のカードと隙間なく接する（重なって見える）
   ため、こちらでも消す。 */
.list-page .sortFilter .header {
    display: none;
}

/* 絞り込みバーと一覧の間隔（モックの .filter-bar の margin-bottom:24px）。
   既存は margin:4px しかなく、カードの角丸と枠線が接して見える。 */
.list-page #sortFilters,
.top-page #sortFilters {
    margin: 0 0 24px;
}

/* --- 絞り込みバーのセレクト（再生時間 / 投稿時期 / 並替え） ---
   モックの .filter-group select（角丸8px・padding 6px 10px・bg-elevated-2）に合わせる。
   現行は共通の `select` 指定で面と文字色だけダークにしてあり、
     - 角が立ったまま・高さ16px・11px Arial と、隣の「並び替え」ボタンだけが
       角丸のアクセント色になるため同じ行の中で浮く
     - `.sort`（この節の先頭のグループ指定）のせいで
       **並替えのセレクトだけ背景が bg-elevated（#1d1f26）** になり、
       他2つの bg-elevated-2（#262933）と色が揃わない
   の2点が残っていた。

   サイズはモックの 13px / padding 6px 10px ではなく
   **12px / padding 3px 10px** にしている。この行の「並び替え」ボタンが
   モックから1段小さくした 12px / padding 5px 16px（実測27px）で作られているため、
   モックの値をそのままにするとセレクトだけ背が高くなって行が揃わない。
   セレクトは枠線2px ぶんと、ネイティブの行ボックスの切り上げで
   padding より高くなるので、3px で 27px に揃う。

   矢印は appearance を触らずOS標準のまま（モックも既定の矢印を使っている）。
   モバイル（asg-mobile.css）は appearance:none ＋ SVGで描き直しているが、
   そちらは幅100%の縦積みでモックの指定自体が違う。

   詳細度: `.sortFilter select`(0,0,1,1) で
   この節の `.sort`(0,0,1,0) と 5節の `select`(0,0,0,1) の両方を上書きする。 */
.sortFilter select {
    vertical-align: middle;
    box-sizing: border-box;
    padding: 3px 10px;
    background-color: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    border-radius: 8px;
    color: var(--asg-text-main);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
}

.sortFilter select:focus {
    outline: none;
    border-color: var(--asg-accent);
}

/* --- 並び替えの実行ボタン ---
   現行は空の <a class="submit"> に背景画像(btn_sort2.gif / 36×18)を敷いた画像ボタン。
   明るいGIFがダークテーマで浮くため、テンプレート側でラベル「並び替え」を持たせ、
   ここでモックの .btn.primary（アクセント色・白文字・角丸）に合わせて描き直す。
   絞り込みバーは行が細いので、モックの値(14px / padding 8px 24px / radius 10px)を
   1段小さくして 12px / padding 5px 16px / radius 8px にしている。

   詳細度: common.css の `.sortFilter .submit`(0,0,2,0) を確実に上書きするため、
   要素型を足した `.sortFilter a.submit`(0,0,3,0) の形で指定する。 */
.sortFilter a.submit {
    display: inline-block;
    vertical-align: middle;
    /* 画像ボタン用の固定サイズを解除し、文字なりの幅にする */
    width: auto;
    height: auto;
    background: var(--asg-accent) none;
    border: 0 none;
    border-radius: 8px;
    padding: 5px 16px;
    margin-left: 8px;
    margin-bottom: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sortFilter a.submit:hover,
.sortFilter a.submit:active {
    background-color: var(--asg-accent-strong);
    color: #fff;
}

/* --- RSS導線 ---
   現行はすべて画像ボタン:
     .rssMenu              … btn_rss2.png(36×18)  絞り込みバー内。ポップアップを開く
     p.right の icon_rss.gif … 一覧の下。RSSフィードへの直リンク
     .rssPopUp .button     … btn_rss.png(149×20)「この条件でRSSを取得」
     .rssPopUp .close      … btn_close_phrase.png(50×15)「閉じる」
   いずれもテンプレート側でラベルを持たせたので、ここで面を描く。
   主導線(並び替え)はアクセント色なので、RSSは モックの .btn.secondary
   （bg-elevated-2 / 1px line / text-main）にして主従を分ける。 */
.sortFilter a.rssMenu,
#centerarea p.right a.rss-link {
    display: inline-block;
    vertical-align: middle;
    /* 画像用の固定サイズを解除して文字なりの幅にする */
    width: auto;
    height: auto;
    background: var(--asg-bg-elevated-2) none;
    border: 1px solid var(--asg-line);
    border-radius: 8px;
    padding: 4px 12px;
    margin-left: 8px;
    margin-bottom: 0;
    color: var(--asg-text-sub);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.sortFilter a.rssMenu:hover,
#centerarea p.right a.rss-link:hover {
    color: var(--asg-accent);
    border-color: var(--asg-accent);
}

/* RSS購読ポップアップ本体。既存は白い面＋グレーの枠(枠は !important 指定)。
   枠色だけは同じ強さで打ち消さないと勝てないため、ここに限り !important を使う。 */
.sortFilter .rssPopUp,
#SearchParams .rssPopUp {
    background-color: var(--asg-bg-elevated);
    border: 1px solid var(--asg-line) !important;
    border-radius: 10px;
    color: var(--asg-text-main);
    /* 既存は padding:5px !important。ボタンがテキストになり高さが増えたので少し広げる */
    padding: 8px 12px !important;
}

/* 絞り込みバー内のポップアップだけ位置を直す。
   既存は `bottom:-26px` で「バーの下端から26px下」に**下端**を合わせていた。
   画像ボタン(20px)前提の値で、テキストボタンにすると背が伸びた分だけ上へ食い込み、
   バーに重なってしまう。上端をバーの直下に固定する形へ変える。
   （検索ページの #SearchParams 側は position:relative の通常フローなので対象外） */
.sortFilter .rssPopUp {
    top: 100%;
    bottom: auto;
    margin-top: 6px;
}

/* 吹き出しの角を描いていた画像(bg_popup_border.png)。角丸で描き直したので不要 */
.sortFilter .rssPopUp .borderElement,
#SearchParams .rssPopUp .borderElement {
    display: none;
}

/* 「この条件でRSSを取得」。ポップアップ内の主ボタンなのでアクセント色にする。
   既存は `float:left` で、画像(149×20)を並べる前提だった。float のままだと
   親のポップアップが高さを持たず、背の高いテキストボタンがはみ出すので
   float を解除して inline-block で並べる。 */
.sortFilter .rssPopUp a.button,
#SearchParams .rssPopUp a.button {
    float: none;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: auto;
    background: var(--asg-accent) none;
    border: 0 none;
    border-radius: 8px;
    padding: 5px 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.sortFilter .rssPopUp a.button:hover,
#SearchParams .rssPopUp a.button:hover {
    background-color: var(--asg-accent-strong);
    color: #fff;
}

/* 「現在の条件：…」。ボタンと同じ行に中央で揃える */
.sortFilter .rssPopUp .filters,
#SearchParams .rssPopUp .filters {
    vertical-align: middle;
    color: var(--asg-text-sub);
    font-size: 11px;
    font-weight: normal;
}

/* 「閉じる」。面を持たない小さなテキストリンクに */
.sortFilter .rssPopUp a.close,
#SearchParams .rssPopUp a.close {
    width: auto;
    height: auto;
    background: transparent none;
    color: var(--asg-text-faint);
    font-size: 11px;
    line-height: 1.4;
    text-decoration: none;
    /* 既存は top:1px / right:2px の絶対配置。枠に寄りすぎるので少し内側へ */
    top: 6px;
    right: 8px;
}

.sortFilter .rssPopUp a.close:hover,
#SearchParams .rssPopUp a.close:hover {
    color: var(--asg-accent);
}

/* ---------------------------------------------------------------------------
   9-2. サイト情報（左カラム下部）
   ----------------------------------------------------------------------------
   モックのフッターは著作権表示だけで、フッターにあったテキストリンクは
   サイドバー下部の .menu-group「サイト情報」(.info-list)に集約されている。

   blocks/footer.tpl は全PCページ共通なので**削除はせず**、
   リンクを左カラムへ複製したトップページでだけフッター側を隠す。
   フッターは #main の外にあり `.top-page`(=#main) では届かないため、
   index.tpl の <body> にも top-page を付けて足場にしている。
   --------------------------------------------------------------------------- */
body.top-page #footer ul,
body.movie-page #footer ul,
body.list-page #footer ul,
body.sub-page #footer ul {
    display: none;
}

/* --- 「{カテゴリ名}新着」（動画詳細ページのサイドバー最上部） ---
   モックには無いが、旧テンプレートのリンク集をユーザー指示で残している。
   1件が「タイトル」＋改行＋「(投稿日時)」の2行構成。
   モックの .info-list に寄せつつ、日付だけ一段淡くする。 */
#leftarea .box160.catnew .boxbody-gray > ul > li {
    padding: 8px 0;
    border-bottom: 0 none;
    font-size: 11px;
    line-height: 1.5;
    color: var(--asg-text-faint);
}

#leftarea .box160.catnew .boxbody-gray > ul > li > a {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--asg-text-sub);
}

#leftarea .box160.catnew .boxbody-gray > ul > li > a:hover {
    color: var(--asg-accent);
}

/* モックの .info-list a と同じ値（padding:8px 0 / 12px / text-sub）。
   サイト情報の箱はトップページでは #leftarea、動画詳細ページでは #rightarea に
   入れているので、両方を対象にする（片方だけだと行が詰まったまま出る）。 */
#leftarea .info-list > li > a,
#rightarea .info-list > li > a {
    display: block;
    padding: 8px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--asg-text-sub);
}

#leftarea .info-list > li > a:hover,
#rightarea .info-list > li > a:hover {
    color: var(--asg-accent2);
}

/* ---------------------------------------------------------------------------
   10. フッター
   既存は黒い罫線で区切っている。暗背景では見えないので線色を上げる。
   --------------------------------------------------------------------------- */
#footer {
    background: var(--asg-bg-base) none;
    color: var(--asg-text-sub);
    border-top: 1px solid var(--asg-line);
}

#footer a {
    color: var(--asg-text-sub);
}

#footer a:hover {
    color: var(--asg-text-main);
}

#footer ul li,
#footer ul li.border-right {
    border-left-color: var(--asg-line);
    border-right-color: var(--asg-line);
}

/* ---------------------------------------------------------------------------
   10-2. 構造用の背景画像を無効化する
   既存デザインは「箱」の面や検索パネルを明るいGIF/PNGで描いている
   (bg_box_600.gif / bg_searchbox.png など)。暗いテーマではこれらが
   そのまま白い面として残るため、構造要素に限って画像を落とす。

   注意: ボタン画像(btn_rss.png / btn_search.gif など)は機能上の意味を持つので
   ここでは対象にしない。あくまで面を描くための背景画像だけを消す。
   --------------------------------------------------------------------------- */
.box600,
.box250,
.box180,
.box160,
.boxbody-gray,
.boxbody-white,
.searchbottom,
#searchFormPanel,
#search {
    background-image: none;
}

.box600,
.box250,
.box180,
.box160 {
    background-color: transparent;
}

/* 検索パネルを1枚のカードとして描き直す。
   common.css に `#search form { background: url(bg_searchbox.png) }` があり、
   詳細度101で `#searchFormPanel`(100) に勝ってしまうため、
   こちらも `#search form` の形で指定して打ち消す（同詳細度・後勝ち）。 */
#search form,
#searchFormPanel {
    background-color: var(--asg-bg-elevated);
    background-image: none;
    border: 1px solid var(--asg-line);
    border-radius: 0 0 10px 10px;
    padding: 12px;
}

/* 絞り込みのラベル。既存は濃い紺で、暗背景では読めない。
   search.css の #SearchParams は background の一括指定で画像を敷き、
   さらに width:558px の固定幅が入っている。列幅が可変になった今は邪魔なので外す。 */
.sortFilter,
#SearchParams,
#searchForm {
    background-color: transparent;
    background-image: none;
    border-color: var(--asg-line);
    color: var(--asg-text-sub);
    width: auto;
}

.sortFilter label,
#SearchParams label,
#SearchParamSort label,
#SearchParamCategory label {
    color: var(--asg-text-sub);
}

/* 箱の下端の飾り。画像で角を描いていたので高さを詰めて罫線に任せる */
.searchbottom {
    background-color: transparent;
}

/* ---------------------------------------------------------------------------
   10-3. メインカラムが可変幅になったことで残る固定幅の手当て
   旧デザインは中央600px前提でピクセル指定していた箇所が多い。
   列幅に追従させて、右側に不自然な余白ができないようにする。
   --------------------------------------------------------------------------- */

/* 検索入力欄（width:400px 固定だった） */
#search .word,
#search input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 600pxの中に2つ並べる前提だった295pxの箱 */
.top-page #centerarea .box295 {
    width: calc(50% - 8px);
    max-width: 100%;
    box-sizing: border-box;
}

/* 中央カラム内で横並びにしていた固定幅ブロック */
.top-page #centerarea .link-recom div,
.top-page #centerarea .maker div,
.top-page #centerarea .dvddownload div {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   11. 実機確認で見つかった残存の明るい面・読みにくい文字
   ブラウザで実際に描画して洗い出したもの。
   --------------------------------------------------------------------------- */

/* 「ASG検索」の見出し。common.css が薄い水色(#d7f0f9)を敷いている */
#search p {
    background-color: var(--asg-bg-elevated-2);
    color: var(--asg-text-main);
}

/* 検索条件の表示(「現在の条件：…」)。白背景のまま残る */
#SearchParams .rssPopUp,
#rssPopUp {
    background-color: var(--asg-bg-elevated-2);
    color: var(--asg-text-main);
    border-color: var(--asg-line);
}

/* 「今日の動画」等の小見出し。テンプレート側に
   style="...background-color:#F4F4F4..." がインラインで書かれているため、
   詳細度では勝てず !important が必要。テンプレートを触らずに済ませる。 */
.boxbody-gray > div[style*="background-color:#F4F4F4"],
.boxbody-gray > div[style*="background-color: #F4F4F4"] {
    background-color: var(--asg-bg-elevated-2) !important;
    color: var(--asg-text-main);
}

/* 純色の青・赤が直接指定されている箇所。暗背景ではコントラストが不足する */
#MoreOptionsOpened,
#MoreOptionsClosed,
li.submenu,
li.submenu a {
    color: var(--asg-accent2);
}

/* --- 動画一覧の「アゲ／サゲ／再生回数／コメント数」の帯（.list-status）---
   common.css が `background-color:#EEEEEE` を敷いているため、
   マイページ（myPage.html）とお気に入り動画（myFavourites.html）の
   1件ごとに白い帯が残っていた。
   カードの中の小さな面なので bg-elevated-2 ＋ line の枠に置き換え、
   モックの .card-meta と同じ角丸8pxにする。
   ※ 同じ帯は newMyPage / newVsMoviePage / top100MoviePage /
     newMemberPage* にもあるので、ページ限定にせず #centerarea 配下で共通に当てる。 */
#centerarea .list-status {
    background-color: var(--asg-bg-elevated-2);
    border: 1px solid var(--asg-line);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--asg-text-sub);
}

/* 数値（アゲ数・サゲ数）は <b>。帯の中でいちばん読みたい値なので本文色にする */
#centerarea .list-status b {
    color: var(--asg-text-main);
    font-weight: bold;
}

/* ラベルの色。common.css の .red は #FF0000、.green は（名前に反して）#0000FF で、
   どちらも暗い面ではコントラストが足りない。
   アゲはアクセント（ピンク）、サゲは副アクセント（水色）に寄せる。
   アイコン画像 icon_age.gif / icon_sage.gif の色味とも合う。 */
#centerarea .list-status .red {
    color: var(--asg-accent);
}

#centerarea .list-status .green {
    color: var(--asg-accent2);
}

/* --- マイページの「削除」チェックボックス（サムネイルに重ねる）-------------
   myPage.html（`newMyPage.tpl`）と旧 `myPage.tpl` の一覧で、
   「チェックした動画を削除する」用のチェックボックスを
   情報欄の右下から**サムネイルの左上**へ移した。
   素の 13px のチェックボックスに灰色の小さな「削除」が付くだけだと、
   どの動画に対する操作なのか分かりにくかったため。
   マークアップ:
     div.thumb-select.shift-left      … float:left ＋ 重ねるための位置の基準
       a > img                        … サムネイル（thumbchange.js がプレビュー差し替え）
       label.thumb-select-delete      … チェックボックス＋「削除」
   --------------------------------------------------------------------------- */
#centerarea .thumb-select {
    position: relative;
    /* 画像と同じ幅で止める。中の img は width=200 height=148 の属性を持つ */
    display: block;
    width: 200px;
    line-height: 0;   /* a と img の間に隙間を作らない */
    /* common.css の `#list div { border-top:1px solid #CCC; padding:15px 3px 5px }`
       は **#list 配下のすべての div** に効く。新しく足したこの箱にも
       横線と余白が入ってサムネイルがずれるので解除する。 */
    border-top: 0 none;
    padding: 0;
}

#centerarea .thumb-select > a {
    display: block;
}

#centerarea .thumb-select > a img {
    display: block;
    /* float は外側の .shift-left が持つ */
    float: none;
}

#centerarea .thumb-select-delete {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border: 1px solid var(--asg-line);
    border-radius: 999px;
    /* サムネイルの上に載るので、下の絵が透けても読めるよう暗い面を敷く */
    background: rgba(18, 19, 24, 0.82);
    color: var(--asg-text-main);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

#centerarea .thumb-select-delete:hover {
    border-color: var(--asg-accent);
    background: rgba(18, 19, 24, 0.92);
}

#centerarea .thumb-select-delete input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--asg-accent);
    cursor: pointer;
}

/* 選択中はサムネイルに枠を出して、どれを消そうとしているか一覧で分かるようにする */
#centerarea .thumb-select:has(input[type="checkbox"]:checked) > a img {
    outline: 2px solid var(--asg-accent);
    outline-offset: -2px;
}

#centerarea .thumb-select:has(input[type="checkbox"]:checked) .thumb-select-delete {
    border-color: var(--asg-accent);
    background: var(--asg-accent);
    color: #fff;
}

/* 警告文(お知らせの赤字)。真っ赤は暗背景で滲むため、少し明るい赤に寄せる */
#centerarea b[style*="color"],
.news b,
font[color="red"],
font[color="#FF0000"] {
    color: #ff6b6b;
}

/* ---------------------------------------------------------------------------
   12. 広告枠
   中身は外部配信のため色・背景は指定しない。暗い面の上で白背景の広告が
   浮かないよう、枠に余白と角丸だけ与える。
   --------------------------------------------------------------------------- */
#ad02,
#ad03_new,
#ad_cvlb,
.box160,
.box180 {
    background: transparent none;
    border: 0 none;
}