/*
 Theme Name:   Lightning Child - Bagus
 Theme URI:    https://bagus-mc.jp
 Description:  Lightning 子テーマ（Bagus Motor Cycle 用）
 Author:       Bagus
 Template:     lightning
 Version:      1.0.0
 Text Domain:  lightning-child-bagus
*/

/* ============================================================
   Bagus ダークテーマ
   背景・文字色・フォントサイズは現行本番(Central) computed style に合わせる
   - body bg: rgb(5,5,5) / color: rgb(235,235,235)
   - body font-size: 14px / font-family: Open Sans + Hiragino
   - h2: 35px
   - nav: 14px
   ============================================================ */

/* サイト全体の背景色 + フォント基準 */
body {
    background-color: #050505;
    color: #ebebeb;
    font-size: 14px;
    font-family: "Open Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
                 メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/* メインコンテンツエリア（本番: padding 0、各セクション内部で余白を取る） */
.site-body {
    background-color: #050505 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.site-body__container,
.site-body > .container,
main.site-content,
.site-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ヘッダーロゴ画像（本番互換: 高さ 65px のヘッダーに対しロゴ 35px、上下余白 15px ずつ） */
.site-header-logo {
    display: flex !important;
    align-items: center !important;
    height: 65px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    flex-shrink: 0;
    max-width: none !important;
    width: auto !important;
}
.site-header-logo a {
    display: inline-flex !important;
    align-items: center !important;
    height: 65px !important;
    text-decoration: none;
    margin: 0 !important;
    padding: 0 !important;
}
/* ロゴ表示: 本番例外 (A-010) として Bagus! ロゴ (bagus_logo_info.png) を採用。
   本番 probe 値: 48 x 19px (broken placeholder)。見た目互換のためロゴ高さ 19px に揃える。
   これにより 23cafe→ameba 間の余白も本番一致 (10px) に */
#site-header .site-header-logo .bagus-site-logo,
body #site-header .bagus-site-logo,
.bagus-site-logo {
    display: block !important;
    height: 19px !important;
    max-height: 19px !important;
    width: auto !important;
    max-width: 60px !important;
    object-fit: contain !important;
}

/* ヘッダー（本番互換: 90px + fixed 常駐 + 透過）
   本番(Central) はヘッダー透過で hero 上に重ねる。
   トップ(home) は完全透過、それ以外は黒 #1a1a1a で本文と区別
   親テーマ Lightning の site-header--layout--nav-float が 8px padding を追加するので
   !important で 90px に強制し、padding は 0 に */
.site-header,
.site-header.site-header--layout--nav-float {
    /* 本番(Central) probe 計測: rgba(0,0,0,0.898) のベタ塗り、background-image なし、高さ 65px。
       Lightning は scroll で move_menu 等のクラスを付けないので、最初から本番互換の黒で固定する */
    background-color: rgba(0, 0, 0, 0.898) !important;
    background-image: none !important;
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border: none !important;
    box-shadow: none !important;
}
/* トップ以外も同じ黒背景で統一 */
body:not(.home) .site-header,
body:not(.home) .site-header.site-header--layout--nav-float {
    background-color: rgba(0, 0, 0, 0.898) !important;
    background-image: none !important;
}
/* site-header-container: ロゴ左 / nav 右 で本番互換のレイアウト
   本番は first_li.x = 292、ロゴの右に大きな空白を確保している。
   space-between で global-nav を右寄せに。
   Lightning デフォルトの max-width:1140px + margin:auto を打ち消し、
   ヘッダー container を全幅化することでロゴが完全に左端 50px に貼り付く */
.site-header-container,
.site-header > .container,
.site-header-container.container {
    height: 65px !important;
    min-height: 65px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* 本番(Central) は header_inner padding 0 50px。子テーマも同等に */
    padding-left: 50px !important;
    padding-right: 50px !important;
    /* 本番(Central) は header_inner が width:1180px + 左右 padding 50px の全幅。
       Lightning の max-width:1140px + margin:auto を !important で打ち消す */
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: stretch !important;
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}
/* 本番互換: header_inner_right は float:right で nav と SNS を含み右側塊として配置。
   logo が左、その右に大きな空白、その後 nav + SNS 群が右寄せ。
   space-between ではなく logo 後の auto margin で nav 群を右へ寄せる */
.site-header-logo {
    margin-right: auto !important;
}
.global-nav,
#global-nav {
    margin: 0 !important;
    height: 65px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
}
#site-header .global-nav-list,
#site-header #menu-main-menu {
    display: flex !important;
    align-items: stretch !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 65px !important;
    flex-wrap: nowrap !important;
}
/* <li> は flex item。a は li 高さいっぱいに伸ばしてクリック可能領域を確保
   (旧: align-items: center で a が 文字高さに縮み、上下端の hover/click が無効化されていた) */
#site-header .global-nav-list > li {
    display: flex !important;
    align-items: stretch !important;
    height: 65px !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* fixed 化に伴うコンテンツ起点ずれを補正 */
body.home .site-body { padding-top: 0; }
body:not(.home) .site-body { padding-top: 65px; }
/* アンカー遷移時にヘッダーに隠れないオフセット: 90 + 20 */
h1, h2, h3, h4, h5, h6 { scroll-margin-top: 110px; }

.site-header-logo a,
.global-nav .menu-item a {
    color: #ffffff;
}

/* フッター */
.site-footer {
    background-color: #111111;
    color: #cccccc;
}
.site-footer a {
    color: #cccccc;
}

/* 見出し（本番(Central) と完全一致 — h1/h2/h3 は Oswald Light 300）
   probe 計測:
     prod h2: 300 35px / 35px Oswald
     prod hero-caption: 400 40px / 6px Oswald  */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    color: #ebebeb;
    font-family: Oswald, "Helvetica Neue", Arial, sans-serif;
}
h1, .entry-title { font-size: 35px; line-height: 35px; font-weight: 300; padding: 0; }
h2 { font-size: 35px !important; line-height: 35px !important; font-weight: 300 !important; padding: 0 !important; color: #ebebeb !important; border-top: 0 !important; border-bottom: 0 !important; }
h3 { font-size: 24px; line-height: 1.3; font-weight: 300; }
h4 { font-size: 18px; line-height: 1.3; font-weight: 400; }
/* セクション h2 の余白は本番 0、囲み div 側で margin を取る。
   Lightning の Bootstrap 由来 border-top: 2px solid #337ab7 (青線) を完全消去 */
.entry-content h2,
.entry-content > h2,
.post_content h2,
body .entry-content h2 {
    padding: 0 !important;
    margin: 50px 0 30px !important;
    text-align: center;
    color: #ebebeb !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border: none !important;
}

/* ナビゲーション項目: 本番（Central）は a タグ直下にテキストだけ。
   Lightning は <a> 内に <strong class="global-nav-name"> + <span class="global-nav-description">.</span>
   を出す。description は非表示、name は inline-flex 内で水平配置させる。
   <a> を inline-flex + align-items center にして 1 行に揃える。 */
.global-nav,
.site-header-nav .menu a {
    font-family: Oswald, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    color: #ffffff !important;
}
/* a を flex で li 高さいっぱいに伸ばしクリック領域を確保。
   chevron + name は align-items: center で上下中央寄せ。
   Lightning 親テーマが `flex-wrap: wrap` を当てるため chevron が text の上に折り返されていた
   → flex-wrap: nowrap で 1 行に保つ
   本番(Central) probe 値: padding 0 25px。23cafe 幅 97px / SNS x=1126 を再現するため一致させる */
#site-header .global-nav .menu-item > a,
.global-nav-list > li > a {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: Oswald, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    padding: 0 25px !important;
    height: 65px !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    white-space: nowrap;
}
#site-header .global-nav .menu-item a .global-nav-description {
    display: none !important;
}
/* Lightning 親テーマが `.global-nav-list>li .global-nav-name { display:block; width:100% }` を
   適用するため、子テーマで強制的に inline-flex + auto width に上書きする。
   block + width 100% だと flex 親の <a> 内で別行に押し出され、テキストが下端に貼り付く。 */
#site-header .global-nav-list > li .global-nav-name,
#site-header .global-nav .menu-item a .global-nav-name,
.global-nav-list > li .global-nav-name {
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: Oswald, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    height: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    text-indent: 0 !important;
    white-space: nowrap;
}
/* current-menu-item の下線・装飾を消す（本番にはない）
   .global-nav .current-menu-item > a に L567 で下線を当ててしまっているため
   specificity 強化 + 全状態で打ち消し */
#site-header .global-nav .menu-item.current-menu-item > a,
#site-header .global-nav .menu-item.current-menu-ancestor > a,
body #site-header .global-nav .current-menu-item > a,
body .global-nav .current-menu-item > a,
body .global-nav .current-menu-ancestor > a {
    border-bottom: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}
/* Lightning が global-nav の a に ::after で下線アニメーションを当てているのを完全停止 */
#site-header .global-nav .menu-item > a::after,
#site-header .global-nav .menu-item.current-menu-item > a::after,
#site-header .global-nav .menu-item.current-menu-ancestor > a::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    height: 0 !important;
}
/* current-menu-item の li::before に Lightning が青の border-bottom (#337ab7) を当てている。
   これが HOME メニュー下の青い短線として表示されるので完全停止 */
#site-header .global-nav .menu-item::before,
#site-header .global-nav .menu-item.current-menu-item::before,
#site-header .global-nav .menu-item.current-menu-ancestor::before,
#site-header .global-nav .menu-item::after,
#site-header .global-nav .menu-item.current-menu-item::after,
#site-header .global-nav .menu-item.current-menu-ancestor::after {
    display: none !important;
    content: none !important;
    border: none !important;
    border-bottom: none !important;
    background: none !important;
    height: 0 !important;
    width: 0 !important;
}
/* hover/focus 時に a 全体（高さ 90px 全幅）に半透明白被せでクリック領域を視覚化。
   これまでは色変化のみで「どこをクリックすればいいか分からない」状態だった */
#site-header .global-nav .menu-item > a:hover,
#site-header .global-nav .menu-item > a:focus {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
/* SNS は丸ボタン側で hover を持つので、ここでは長方形の hover を出さない */
#site-header .global-nav .menu-item.bagus-sns-item > a:hover,
#site-header .global-nav .menu-item.bagus-sns-ameblo > a:hover {
    background-color: transparent !important;
}
/* 本番(Central) は各 nav-link の前に円形 chevron (●❯)。
   FA に依存せず inline SVG で「白丸 + 中央に小さな右向きトライアングル」を描画 */
#site-header .global-nav .menu-item > a::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    flex: 0 0 auto;
    align-self: center;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='6' fill='%23ffffff'/><polygon points='4.5,3.5 8.5,6 4.5,8.5' fill='%23000000'/></svg>") no-repeat center / contain;
}
/* SNS アイコン には chevron を出さない */
#site-header .global-nav .menu-item.bagus-sns-item > a::before,
#site-header .global-nav .menu-item.bagus-sns-ameblo > a::before {
    content: none !important;
    background: none !important;
}

/* .bagus-shortcode-button は inline style で背景色を本番互換に指定済み（例: #2C2C2C）。
   過去の !important 赤上書きを撤去（ALL LIST ボタンが赤くなっていたため）。
   WordPress 標準ボタンのみブランド色を維持。 */
.wp-block-button__link {
    background-color: #ff4747;
    color: #ffffff;
    border-color: #ff4747;
}
.bagus-shortcode-button:hover,
.wp-block-button__link:hover {
    opacity: 0.85;
}

/* セパレーター */
.wp-block-separator {
    border-color: #333333;
    opacity: 0.5;
}

/* ボタン */
.wp-block-button__link {
    border-radius: 2px;
}

/* 投稿カード */
.wp-block-post-title a {
    color: #e0e0e0;
}
.wp-block-post-title a:hover {
    color: #ffffff;
}

/* ウィジェット・サイドバー */
.widget {
    color: #cccccc;
}
.widget a {
    color: #cccccc;
}

/* 最新の投稿ブロック */
.wp-block-latest-posts a {
    color: #e0e0e0;
}
.wp-block-latest-posts__post-date {
    color: #999999;
}

/* スペーサー・グループ背景統一 */
.wp-block-spacer {
    background-color: transparent;
}

/* コンテナ背景 */
/* Lightning 親テーマが #1a1a1a を当ててくるため !important で強制透過 */
.site-body-container,
.entry-body,
.main-section,
#main.main-section {
    background-color: transparent !important;
}

/* container 幅を本番互換に縮小
   本番(Central) は .container_inner で 1000px 中央寄せ、padding 0。
   Lightning の .site-body-container は 1140px + 左右 15px padding なので、
   max-width 1000px に縮め、PC (>768px) では padding を 0 に揃える */
.site-body-container.container,
body .site-body-container {
    max-width: 1000px !important;
}
@media (min-width: 769px) {
    .site-body-container.container,
    body .site-body-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* session8 P3 (2026-05-11): archive 風 page (OP-1/CM-1/BS-1/BL-1 + CPT archive + tax + is_home + is_search) は
   本番 (.projects_holder 1340px) 幅に合わせて拡張する。1000px は contact-page-201602 系 (AC-1 等) 用。 */
body.bagus-archive-hero-layout .site-body-container.container,
body.bagus-archive-hero-layout .site-body-container {
    max-width: 1340px !important;
}
body.bagus-archive-hero-layout .bagus-cpt-grid {
    max-width: none;
}

/* session8 P4 (2026-05-11): AC-1 単独 4 点
 * - p.ft-10: 本番は font-size: 10px (Central CSS)、local では未定義で 14px のまま → 10px 強制
 * - .wpcf7-response-output: 「内容確認後、チェック入れてから送信してください」を本番互換の赤字に
 *   (本番では .wpcf7-response-output が color: red、local は CF7 デフォルトの灰系)
 */
.contact_detail p.ft-10,
p.ft-10 {
    font-size: 10px !important;
    line-height: 1.5;
}
.wpcf7-response-output,
.wpcf7 .wpcf7-response-output,
form.wpcf7-form .wpcf7-response-output {
    color: red !important;
    border-color: red !important;
}

/* AC-004 (session29 2026-05-27): CF7 入力欄 + 送信ボタンを PROD 互換に (全 CF7 共通)
 * PROD: 入力欄 bg #DFDFDF / 角なし、送信ボタン bg #555 / padding 14px 40px / fs 14px / fw 300
 * STG/LOCAL 初期状態: 入力欄 bg #2A2A2A (黒地と同化で視認困難) / 角丸 4px、送信ボタン Bootstrap 青 #337AB7
 * スコープ: form.wpcf7-form 全体 (CF7 専用クラスなので副作用なし)
 *   - /shop/ コンタクトフォーム (Form 5020)
 *   - salebike_page 販売お問合せ (Form 6524、publish ~100 + draft ~30 件)
 *   - 将来追加される全 CF7
 */
form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"],
form.wpcf7-form input[type="url"],
form.wpcf7-form input[type="number"],
form.wpcf7-form textarea {
    background-color: #dfdfdf;
    border: 0;
    border-radius: 0;
    color: #333;
}
form.wpcf7-form input[type="submit"],
form.wpcf7-form button[type="submit"] {
    background-color: #555;
    border: 0;
    border-radius: 3px;
    color: #fff;
    padding: 14px 40px;
    font-size: 14px;
    font-weight: 300;
}
form.wpcf7-form input[type="submit"]:hover,
form.wpcf7-form button[type="submit"]:hover {
    background-color: #333;
}

/* AC-004-b (session29 2026-05-27): salebike Form 6524 固有レイアウト
 * Form 6524 は <div class="box1"><div class="two_columns_50_50">..</div></div> 構造で
 * お名前 / メールアドレスが 2 列、お問合せ内容 textarea が full width となる。
 * PROD では .box1 に padding 20px 25px が当たり card-like なインセット表現になっているため
 * STG/LOCAL でも同じインセットを再現する。
 * スコープ: .box1 / .two_columns_50_50 共に Form 6524 にのみ存在する構造クラスなので
 *          /shop/ Form 5020 (これらクラスを持たない) には影響しない自然な分離。
 */
form.wpcf7-form .box1 {
    padding: 20px 25px;
    box-sizing: border-box;
}
form.wpcf7-form .two_columns_50_50 {
    overflow: hidden; /* clearfix for float-left children */
}
form.wpcf7-form .two_columns_50_50 .column1,
form.wpcf7-form .two_columns_50_50 .column2 {
    float: left;
    width: 50%;
    box-sizing: border-box;
}
form.wpcf7-form .two_columns_50_50 .column1 .column_inner {
    padding-right: 12px;
}
form.wpcf7-form .two_columns_50_50 .column2 .column_inner {
    padding-left: 12px;
}
form.wpcf7-form .two_columns_50_50 input[type="text"],
form.wpcf7-form .two_columns_50_50 input[type="email"] {
    width: 100%;
    box-sizing: border-box;
}

/* カード背景（投稿リスト等） */
.card,
.wp-block-query {
    background-color: transparent;
}

/* Classic Editor プラグイン無効化時の念のため */
.page .entry-body {
    background-color: transparent;
}

/* フォーム要素（検索ボックス等） */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea,
select {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #444444;
}

/* サイドバー・ウィジェットエリア */
.sub-section,
.site-body-bottom {
    background-color: #1a1a1a;
}

/* コメント欄 */
.comments-area {
    background-color: transparent;
}

/* ブレッドクラム */
.breadcrumb-list {
    background-color: transparent;
}
.breadcrumb-list a,
.breadcrumb-list span {
    color: #999999;
}

/* テーブル */
table, th, td {
    border-color: #333333;
}

/* リンク色統一 */
a {
    color: #6db3f2;
}
a:hover {
    color: #9dcbf5;
}

/* 見出しリンクは白 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #ffffff;
}

/* トップページ：コメント欄・サイドバー非表示 */
.home .comments-area,
.home .sub-section,
.home .site-body-bottom {
    display: none;
}

/* Instagram ウィジェット背景 + SPでの高さ制限
   本番ではInstagramフィードがコンパクト、Lightningでは3行グリッドで膨張するため
   SPでは1行3枚 + 全体max-heightで縮小 */
#sb_instagram .sb_instagram_header,
#sb_instagram {
    background-color: transparent !important;
}
#sb_instagram {
    max-height: 200px;
    overflow: hidden;
    padding: 0 !important;
}
#sb_instagram .sbi_item:nth-child(n+4) {
    display: none !important;
}
@media (max-width: 768px) {
    #sb_instagram {
        max-height: 130px;
    }
}

/* session14: 旧ルールで `.widget_wpt { max-height: 350px; overflow-y:auto }` を当てていたが、
   タブ widget 子テーマ実装 (BL-004 v4) の本番互換性のため撤回。本番 widget_wpt は
   高さ 1508px で内側スクロール無し。同等の見え方を Local でも実現。 */

/* Lightning 親テーマの section/widget 余白を SP で縮小 */
@media (max-width: 768px) {
    .site-body {
        padding-top: 8px;
    }
    .sub-section,
    .site-body-bottom {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .widget {
        margin-bottom: 16px;
    }
    .bagus-footer-info {
        padding: 24px 12px 12px !important;
    }
    /* session5 visual-fix (VFD-020): SP で grid 4 列 = 372px+gap でみてくれが 449px に膨らみ
       body.scrollWidth が viewport (375) を超えていた。SP では 1 列縦積みに変更。 */
    .bagus-footer-info__inner {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "info"
            "insta"
            "fb"
            "menu"
            "link" !important;
        gap: 16px !important;
    }
    .bagus-footer-info__col p {
        margin-bottom: 6px !important;
    }
}

/* スライダー テキスト調整 */
.swiper-slide .ltg-slide-text-title {
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 48px;
    text-transform: uppercase;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}
.swiper-slide .ltg-slide-text-caption {
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
    font-size: 16px;
}

/* 最新の投稿ブロック: 日付バッジ（本番に合わせてオレンジ） */
.wp-block-latest-posts__post-date {
    color: #e67e22;
    font-size: 13px;
    font-weight: 700;
}

/* 投稿一覧: 抜粋テキスト */
.wp-block-post-excerpt__excerpt {
    color: #cccccc;
    font-size: 13px;
    line-height: 1.6;
}

/* フッターナビ横並び */
.footer-nav .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    list-style: none;
    padding: 0;
}
.footer-nav .menu-item a {
    color: #cccccc;
    font-size: 13px;
}

/* フッターウィジェットエリア */
.site-footer-content {
    background-color: #111111;
}
.site-footer-content .widget-title {
    color: #ffffff;
    border-bottom: 2px solid #337ab7;
    padding-bottom: 8px;
}

/* copyright */
.site-footer-copyright {
    background-color: #0a0a0a;
    color: #888888;
    font-size: 12px;
}

/* ALL LIST ボタン: 本番風（白枠ダーク背景） */
.wp-block-button.is-style-outline .wp-block-button__link {
    border-color: #ffffff;
    color: #ffffff;
}

/* 投稿サムネイル hover エフェクト */
.wp-block-post-featured-image img {
    transition: opacity 0.3s ease;
}
.wp-block-post-featured-image:hover img {
    opacity: 0.8;
}

/* ページタイトル非表示（トップページ） */
.home .entry-header {
    display: none;
}

/* グローバルナビのアクティブ下線は本番(Central) には無いため出さない
   （旧実装: border-bottom 2px solid #fff を削除） */

/* モバイルナビ */
.vk-mobile-nav {
    background-color: #111111;
}
.vk-mobile-nav a {
    color: #e0e0e0;
}

/* ============================================================
   サイドバー軽量化
   ============================================================ */

/* アーカイブ・カテゴリ：縦リスト膨張防止
   Lightning は WordPress 標準の widget_archive ではなく widget_link_list で
   月別アーカイブ（131項目）・カテゴリ（60項目）をそのまま縦展開するため、
   CSS で高さ制限とスクロール化を強制する */
.widget_archive ul,
.widget_categories ul,
.widget_link_list ul,
aside.widget_link_list ul {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    margin: 0;
    border: 1px solid #222;
    background-color: #181818;
    border-radius: 2px;
    list-style: none;
}

.widget_archive ul li,
.widget_categories ul li,
.widget_link_list ul li {
    padding: 2px 4px;
    line-height: 1.6;
    font-size: 13px;
}

/* ドロップダウン（select）に切り替わったとき */
.widget_archive select,
.widget_categories select {
    width: 100%;
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #444444;
    padding: 8px;
}

/* ============================================================
   ヘッダー：ページタイトルバー（青）を抑制
   本番には大きな青いタイトルバーがないため、薄く目立たなく
   ============================================================ */
body:not(.home) .page-header-title,
body:not(.home) .lightning-h1 {
    background-color: #222222 !important;
    background-image: none !important;
    color: #e0e0e0 !important;
    padding: 24px 0 !important;
    font-size: 20px !important;
    border-bottom: 1px solid #333;
}

body:not(.home) .page-header-title h1,
body:not(.home) .lightning-h1 h1,
body:not(.home) .page-header-title__title {
    color: #ffffff !important;
    font-size: 22px !important;
    margin: 0 !important;
    text-shadow: none !important;
}

/* ============================================================
   ヘッダー右側：SNS アイコン
   ============================================================ */
.global-nav .menu-item.bagus-sns-item a {
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.global-nav .menu-item.bagus-sns-item .dashicons {
    width: 22px;
    height: 22px;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
}
.global-nav .menu-item.bagus-sns-item:hover .dashicons {
    color: #6db3f2;
}

/* ============================================================
   CPT 個別ページの仕様 + ギャラリー表示
   ============================================================ */
.bagus-cpt-detail {
    margin: 0 0 32px;
    color: #e0e0e0;
}
.bagus-cpt-gallery {
    margin-bottom: 24px;
}
.bagus-cpt-gallery__main img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.bagus-cpt-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.bagus-cpt-gallery__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.bagus-cpt-gallery__thumb img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
    border: 1px solid #333;
    border-radius: 2px;
    transition: opacity 0.2s;
}
.bagus-cpt-gallery__thumb:hover img {
    opacity: 0.7;
    border-color: #6db3f2;
}
.bagus-cpt-gallery__caption {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    color: #b0b0b0;
    font-weight: 400;
    word-break: break-word;
}
.bagus-cpt-gallery__caption--main {
    margin-top: 8px;
    font-size: 13px;
    color: #d8d8d8;
    text-align: center;
}
.bagus-cpt-gallery__more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #888;
    border: 1px solid #333;
    font-size: 12px;
    height: 70px;
}
@media (max-width: 768px) {
    .bagus-cpt-gallery__thumbs {
        grid-template-columns: repeat(4, 1fr);
    }
    .bagus-cpt-gallery__thumb img,
    .bagus-cpt-gallery__more {
        height: 60px;
    }
}

.bagus-search-title {
    margin: 16px 0 24px;
    font-size: 24px;
    font-weight: 700;
    color: #e0e0e0;
    text-align: center;
    letter-spacing: 0.08em;
}

/* ============================================================
   NEW-012 Hero 黒帯再現 (session17 Task #18 T-12 / 2026-05-13)
   PROD 実機計測 (probe-new012-search.js):
     PROD: .content_inner > .title (素のクラス) / height 250px / bg rgb(44,44,44)
            h1 font-size 45px (PC) / 28px (SP) / color #fff / text "SEARCH" 中央寄せ
     LOCAL 現状: .archive-header > h1.archive-header-title.bagus-search-title
                  height 35px / 透明 bg / 24px 灰色
   方針 (案 A 最小修正): body.search-results スコープで .archive-header に Hero 帯を付与
   既存 .bagus-search-title の汎用ルールは上書きせず、search-results 限定の specificity で上回る
   ============================================================ */
body.search-results .archive-header {
    min-height: 250px;
    background: #2c2c2c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 30px;
    padding: 0;
}
body.search-results .archive-header .archive-header-title,
body.search-results .archive-header .bagus-search-title {
    margin: 0;
    padding: 0;
    font-size: 45px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
}
@media (max-width: 991px) {
    body.search-results .archive-header {
        min-height: 250px;
    }
    body.search-results .archive-header .archive-header-title,
    body.search-results .archive-header .bagus-search-title {
        font-size: 28px;
    }
}

.bagus-buyback-banner {
    margin: 32px 0 16px;
    padding: 20px 16px;
    background: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    text-align: center;
    color: #e0e0e0;
}
.bagus-buyback-banner__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}
.bagus-buyback-banner__lead {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
}
.bagus-buyback-banner__cta {
    margin: 0;
}
.bagus-buyback-banner__cta a {
    display: inline-block;
    padding: 8px 24px;
    background: #6db3f2;
    color: #0a0a0a;
    text-decoration: none;
    font-weight: 700;
    border-radius: 3px;
}
.bagus-buyback-banner__cta a:hover {
    background: #8fc4f5;
}

.bagus-cpt-spec {
    background: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 16px 20px;
    margin: 16px 0 24px;
}
.bagus-cpt-spec__title {
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}
.bagus-cpt-spec dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}
.bagus-cpt-spec dt {
    color: #999;
    font-weight: 600;
}
.bagus-cpt-spec dd {
    margin: 0;
    color: #e0e0e0;
}
.bagus-cpt-spec dd span {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
@media (max-width: 768px) {
    .bagus-cpt-spec dl {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .bagus-cpt-spec dt {
        margin-top: 8px;
    }
}

/* ============================================================
   フッター本体: Lightning デフォルトの overflow / content-visibility 制約を解除
   Lightning は .site-footer に `content-visibility: auto; contain-intrinsic-size: 370px`
   を当てるため、画面外にある間レンダリングされず innerText が 0、 fullPage スクショ
   でもフッター内の bagus-footer-info が描画されない問題があった
   ============================================================ */
.site-footer,
footer.site-footer {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}
.site-footer .container,
.site-footer-content,
.site-footer-copyright {
    overflow: visible !important;
    height: auto !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

/* ============================================================
   フッター INFORMATION ブロック
   ============================================================ */
.bagus-footer-info {
    background-color: #111111;
    color: #cccccc;
    padding: 48px 24px 32px;
    border-top: 1px solid #222;
}
.bagus-footer-info__inner {
    display: grid;
    /* フッタービルダー対応: 列数 (--cols) 連動の汎用グリッド。旧 grid-template-areas
       (info/insta/fb/menu/link 固定) は廃止し、列→ブロック構造を
       bagus_footer_render_layout() が .bagus-footer-info__col で出力する。 */
    /* 各列は中身の min-content 以上を確保しつつ余白を等分。
       これによりリンク一覧 (nowrap) 等の幅広ブロックを含む列は自動的に広がり、
       旧 1.3fr 相当の「MENU 列が広い」挙動を列数非依存で再現する。 */
    grid-template-columns: repeat(var(--cols, 4), minmax(min-content, 1fr));
    gap: 24px 24px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
/* 1 列に複数ブロックが縦積みされる場合の間隔 (旧 MENU+LINK の縦積みを再現) */
.bagus-footer-info__col > .bagus-footer-block + .bagus-footer-block {
    margin-top: 28px;
}
.bagus-footer-info__menu-list li {
    /* メニュー文字列は本番互換で 1 行表示 (列幅は min-content で確保) */
    white-space: nowrap;
}
/* LINK 画像は本番互換でコンパクトに（prod は MENU 列下の小サイズ） */
.bagus-footer-info__link img {
    max-height: 50px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
}
.bagus-footer-info__title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}
.bagus-footer-info__col p {
    margin: 0 0 12px;
    line-height: 1.7;
    font-size: 13px;
}
.bagus-footer-info__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bagus-footer-info__col ul li {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.bagus-footer-info__col a {
    color: #cccccc;
}
.bagus-footer-info__col a:hover {
    color: #6db3f2;
}
/* footer column1 内の検索フォーム (本番(Central) フッター互換) */
.bagus-footer-info .search-form,
.bagus-footer-info #searchform,
.bagus-footer-info form[role="search"] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: nowrap;
}
.bagus-footer-info .search-form .search-field,
.bagus-footer-info #searchform input[type="text"],
.bagus-footer-info #searchform input[type="search"] {
    flex: 1;
    min-width: 0;
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #444;
    padding: 6px 8px;
    font-size: 13px;
    height: 32px;
    box-sizing: border-box;
}
.bagus-footer-info .search-form .search-submit,
.bagus-footer-info #searchform input[type="submit"],
.bagus-footer-info #searchsubmit {
    background-color: #2C2C2C;
    color: #fff;
    border: 1px solid #555;
    padding: 6px 12px;
    font-size: 13px;
    height: 32px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}
.bagus-footer-info .search-form .search-submit:hover,
.bagus-footer-info #searchform input[type="submit"]:hover {
    background-color: #444;
}
.bagus-footer-info label.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* CPT single ページ: h1 中央寄せ + パンくず非表示（本番互換） */
.single-salebike_page .breadcrumb,
.single-parts_page .breadcrumb,
.single-portfolio_page .breadcrumb,
.single-salebike_page .breadcrumb-list,
.single-parts_page .breadcrumb-list,
.single-portfolio_page .breadcrumb-list {
    display: none !important;
}
.single-salebike_page .entry-title,
.single-parts_page .entry-title,
.single-portfolio_page .entry-title,
.single-salebike_page h1.lightning-h1,
.single-parts_page h1.lightning-h1,
.single-portfolio_page h1.lightning-h1 {
    text-align: center !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 24px 0 16px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #ebebeb !important;
}

/* INFORMATION セクションの「過去の記事（アメブロ）はこちら」ボタン (本番互換)
   構造: .call_to_action.ameba-link > h4 > a > img + テキスト + i.fa-play-circle */
.call_to_action.ameba-link {
    margin: 30px auto;
    max-width: 600px;
}
.call_to_action.ameba-link h4 {
    margin: 0 !important;
    padding: 0 !important;
}
.call_to_action.ameba-link h4 a {
    display: block !important;
    background: #2C2C2C !important;
    color: #fff !important;
    padding: 16px 24px !important;
    text-decoration: none !important;
    text-align: center !important;
    border: 0 !important;
    transition: opacity .15s ease;
    font-size: 16px !important;
}
.call_to_action.ameba-link h4 a:hover {
    opacity: 0.85;
    color: #fff !important;
}
.call_to_action.ameba-link h4 a img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    height: 30px;
    width: auto;
}
.call_to_action.ameba-link h4 a .fa {
    margin-left: 8px;
}

/* archive 系ページの hero banner（本番互換 .title.has_fixed_background）
   session8 P2 (2026-05-11): 本番実測値準拠に再調整。
   本番 (Central): bgSize: auto / bgPosition: 50% 0px / h1 fontSize 45px weight 300 */
.bagus-archive-hero {
    height: 300px;
    background-size: auto;            /* 本番: auto (原寸表示) */
    background-position: 50% 0px;     /* 本番: 50% 0px (横中央 + 上端揃え) */
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px;
    position: relative;
}
/* CHK-A3 (2026-05-30): PROD の Hero (.title.has_fixed_background) は暗幕 overlay を持たない。
   PROD 一致のため LOCAL の暗幕 ::before も削除する。テキスト視認性は h1 の text-shadow で確保。 */
.bagus-archive-hero::before {
    content: none;
}
.bagus-archive-hero h1 {
    position: relative;
    z-index: 2;
    color: #fff !important;
    /* 本番 (qode) と同じ和文フォールバックスタックを明示。Lightning 既定の Oswald,"Helvetica Neue",Arial だけだと
       和文がシステム既定 (環境依存) に倒れ、PROD の Hiragino 角ゴ系と見栄えがズレるため。 */
    font-family: Oswald, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 45px !important;       /* 本番: 45px (clamp 廃止で固定値) */
    font-weight: 300 !important;      /* 本番: 300 (light) */
    letter-spacing: 2px;              /* 本番: 2px (em だと size 連動でズレるため px 固定) */
    line-height: 45px;                /* 本番: 45px (Lightning 既定 35px だと縦中央が浅くなる) */
    text-align: center;               /* 本番: center (Lightning 既定 start で左寄せになるため上書き) */
    /* 親 .bagus-archive-hero は display:flex で h1 が shrink-to-fit になり横位置がブレるため、
       flex item として親幅を完全に取らせる (PROD は h1 を position:absolute + width:100% で全幅化)。 */
    width: 100%;
    flex: 0 0 100%;
    margin: 0;
    text-shadow: 0 0 10px rgba(0,0,0,0.8); /* 本番: rgba(0,0,0,0.8) 0px 0px 10px */
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
}
/* ============================================================
   CHK-A2 (2026-05-30): SP の hero 高さを PROD 互換 100px に全 hero ページで統一。
   旧: events 専用 100px / 他は LOCAL 300px。新: 全 hero ページ 100px (PROD 実測値準拠)。
   PROD SP 実測: height=100px / bg-size=auto / bg-position=50% 0 / bg-attachment=fixed / h1=28px / 暗幕なし。
   ユーザー方針確定 (2026-05-30): PROD に合わせて SP 100px に縮退・横展開 7 ページ含む。
   margin-bottom は PROD 値 50px (本来 24px) で統一。
   ============================================================ */
@media (max-width: 991px) {
    .bagus-archive-hero h1 {
        font-size: 28px !important;   /* 本番 SP: 28px */
    }
    .bagus-archive-hero {
        height: 100px !important;        /* PROD SP: 100px (hero inline style height:300px は postmeta qode_title-height、!important で上書き) */
        background-attachment: fixed;    /* PROD: fixed (SP でも縮退) */
        background-size: auto;           /* PROD: auto (原寸・上端基準) */
        background-position: 50% 0;      /* PROD: 50% 0px */
        margin-bottom: 50px;             /* PROD: margin 0 0 50px */
    }
}

/* LINK 列のバナー画像（marchesini / hyperpro / i-deal）— 本番互換
   本番レイアウト:
     - marchesini と hyperpro が横並び (それぞれ 160px 程度)
     - i-deal は次の行で大きい (フル幅 ~340px) */
.bagus-footer-info__link-list--banners {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bagus-footer-info__link-list--banners li {
    margin: 0;
    flex: 0 0 auto;
}
.bagus-footer-info__link-list--banners li:nth-child(1),
.bagus-footer-info__link-list--banners li:nth-child(2) {
    flex: 0 0 calc(50% - 6px);
}
.bagus-footer-info__link-list--banners li:nth-child(3) {
    flex: 0 0 100%;
    margin-top: 4px;
}
.bagus-footer-info__link-list--banners li img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    max-width: 170px;
}
.bagus-footer-info__link-list--banners li:nth-child(3) img {
    max-width: 340px;
}
.bagus-footer-info__shop-name {
    margin-bottom: 16px !important;
    font-size: 15px !important;
    color: #ffffff;
}
.bagus-footer-info__shop-name small {
    color: #888;
    font-size: 11px;
}

/* レスポンシブ：SP では1カラム */
@media (max-width: 768px) {
    .bagus-footer-info__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .bagus-footer-info {
        padding: 32px 16px 16px;
    }
}

/* Lightning デフォルトの footer widget area (.site-footer-content > .row) を非表示。
   bagus_render_footer_info() で同等内容を静的に出力しているため、widget area も表示すると
   二重表示になる（本番フッター 549px に対し Lightning デフォルトでは 1303px と +754px の差）。
   なお bagus_initial_setup() の widget マッピングでも footer_column_1..4 / footer_text は
   wp_inactive_widgets に退避するだけで footer-widget-1..3 へは移していないため、
   ここで hide しても「移行済み widget が消えている」ことにはならない。
   将来 widget driven に切り替える場合は、bagus_render_footer_info() の出力を撤廃した上で
   この display:none も外す。 */
.site-footer-content > .row,
.site-footer-content .footer-widget,
.site-footer-content .l-footerWidgetArea,
.site-footer-content .col-footer {
    display: none !important;
}
/* footer-nav （Lightning がフッター上部に出すナビ）はメニューの重複なので非表示
   （bagus-footer-info の MENU 列にメニュー項目を出している） */
.footer-nav,
.site-footer > nav.footer-nav {
    display: none !important;
}
/* Copyright を本番に揃える（細く小さく） */
.site-footer-copyright {
    padding: 8px 0 !important;
    font-size: 12px;
    color: #999;
    background: #050505;
    text-align: center;
}

/* ============================================================
   Bagus CPT グリッド（[parts_list]/[salebike_list]/[portfolio_list]/[latest_post] shim）
   ============================================================ */
.bagus-cpt-grid {
    display: grid;
    gap: 28px;
    margin: 20px auto;
    max-width: 1000px;
}
/* salebike_list の価格情報（qode_portfolios[0]['optionValue'] 由来） */
.bagus-cpt-grid__price {
    font-size: 12px;
    line-height: 1.6;
    color: #c00;
    padding: 6px 8px 0;
    background: #fff;
}
.bagus-cpt-grid__price span {
    font-weight: 700;
    color: #c00;
}
.bagus-cpt-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bagus-cpt-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bagus-cpt-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.bagus-cpt-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
.bagus-cpt-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 768px) {
    .bagus-cpt-grid--cols-3,
    .bagus-cpt-grid--cols-4,
    .bagus-cpt-grid--cols-5,
    .bagus-cpt-grid--cols-6 { grid-template-columns: repeat(2, 1fr); }
}
/* SP は本番互換で 1 列（prod は inline-block 300px、390 viewport で 1 列） */
@media (max-width: 480px) {
    .bagus-cpt-grid,
    .bagus-cpt-grid--cols-2,
    .bagus-cpt-grid--cols-3,
    .bagus-cpt-grid--cols-4,
    .bagus-cpt-grid--cols-5,
    .bagus-cpt-grid--cols-6 { grid-template-columns: 1fr !important; }
}
.bagus-cpt-grid__item {
    display: block;
    color: #e0e0e0;
    text-decoration: none;
    background: #2a2a2a;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    transition: transform .15s ease, border-color .15s ease;
}
.bagus-cpt-grid__item:hover {
    transform: translateY(-2px);
    border-color: #666;
}
.bagus-cpt-grid__thumb {
    aspect-ratio: 4/3;
    background: #1a1a1a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bagus-cpt-grid__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bagus-cpt-grid__noimg {
    width: 100%;
    height: 100%;
    background: #222;
}
.bagus-cpt-grid__title {
    padding: 10px 12px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #e0e0e0;
    word-break: break-word;
}
/* h4 内の <br> 改行で商品名/価格を分ける（本番互換）。価格は監査向けにテキスト連結したものなので
   表示上は別の .bagus-cpt-grid__price (HTMLそのまま保持) のほうを採用 */
.bagus-cpt-grid__title br + * { font-size: 0.9em; opacity: 0.85; }

/* ============================================================
   Bagus CPT グリッド (新構造: <article class="mix"> + .image + hover overlay)
   本番(Central) のカード構造を再現する CSS
   ============================================================ */
.bagus-cpt-grid > article.mix {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    color: #e0e0e0;
    transition: transform .15s ease;
    display: block;
}
.bagus-cpt-grid > article.mix:hover {
    transform: translateY(-2px);
}

/* .image は元画像のアスペクト比 (500:335 ≈ 3:2) を保持 */
.bagus-cpt-grid > article.mix .image {
    position: relative;
    aspect-ratio: 500/335;
    background: transparent;
    overflow: hidden;
    display: block;
}
.bagus-cpt-grid > article.mix .image > a {
    display: block;
    width: 100%;
    height: 100%;
}
.bagus-cpt-grid > article.mix .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* hover overlay（parts/salebike: hover-type-text、portfolio: hover）
   通常は半透明で薄く、hover 時に濃く重ねる */
.bagus-cpt-grid > article.mix .hover-type-text,
.bagus-cpt-grid > article.mix .hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.0);
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    z-index: 2;
    pointer-events: auto;
}
.bagus-cpt-grid > article.mix:hover .hover-type-text,
.bagus-cpt-grid > article.mix:hover .hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.65);
}
.bagus-cpt-grid > article.mix .hover-inner {
    text-align: center;
    padding: 12px;
    width: 100%;
}
.bagus-cpt-grid > article.mix .hover-inner-link {
    color: #fff;
    text-decoration: none;
    display: block;
}
.bagus-cpt-grid > article.mix .portfolio_title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    word-break: break-word;
}
.bagus-cpt-grid > article.mix .machine-name,
.bagus-cpt-grid > article.mix .bike-category {
    margin: 4px 0 0;
    font-size: 11px;
    color: #ccc;
    letter-spacing: 0.05em;
}

/* mini-title: 本番(Central) は画像の下に通常配置 (absolute ではなく block 流し) */
.bagus-cpt-grid > article.mix > a:last-child {
    display: block;
    text-decoration: none;
    color: #ddd;
}
.bagus-cpt-grid > article.mix .mini-title {
    margin: 0;
    padding: 14px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #ddd;
    word-break: break-word;
    background: transparent;
    text-shadow: none;
    text-align: center;
}
/* 本番互換: タイトル + 価格行を 1 行ごとに表示。価格は font-size やや小、opacity 低 */
.bagus-cpt-grid > article.mix .mini-title br + * { font-size: 0.92em; opacity: 0.85; }

/* portfolio (CUSTOM MACHINE) は mini-title が無いため image 単独で完結。
   .image の aspect-ratio をやや横長にして本番互換 */
.bagus-cpt-grid > article.mix:not(:has(.mini-title)) .image {
    aspect-ratio: 3/2;
}

/* ============================================================
   CM-003: CUSTOM MACHINE 商品の画像下に商品名 (class なしの h4) を表示
   本番 markup: <article class='mix'><div class='image'>...</div><h4>KAWASAKI Z1...</h4></article>
   Local は markup は本番互換だが、素の h4 にスタイルが当たらず見えない状態だった
   ============================================================ */
.bagus-cpt-grid > article.mix > h4,
.projects_holder > article.mix > h4,
.projects_holder article.mix > h4:last-child,
article.mix > h4:not(.portfolio_title) {
    margin: 0 !important;
    padding: 14px 0 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #ddd !important;
    text-align: center !important;
    background: transparent !important;
    word-break: break-word !important;
    text-shadow: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
}

/* トップページの BIKE SALES / ORIGINAL PARTS / CUSTOM MACHINE セクション */
.bagus-top-section {
    margin: 48px 0 24px;
    padding-top: 24px;
    border-top: 1px solid #2a2a2a;
}
.bagus-top-section__title {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #e0e0e0;
    letter-spacing: 0.05em;
}
.bagus-top-section__alllist {
    display: inline-block;
    margin-left: 12px;
    vertical-align: middle;
}
.bagus-top-section__alllist a {
    display: inline-block;
    padding: 4px 12px;
    background: #2c2c2c;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 2px;
    letter-spacing: 0;
}
.bagus-top-section__alllist a:hover { background: #444; }

.bagus-separator { display: block; }
.bagus-shortcode-button { margin: 4px; }

/* 本番(Central) .alllist 互換: h2 タイトル右側の ALL LIST ボタン位置
   probe 値: padding 8px 24px / font-size 14px / margin-left 30px / vertical-align text-top
   本番は .entry-content、local の Lightning は .entry-body が親になるため両方をカバー

   重要: .alllist 自体は display:inline (本番互換)。inline-block にすると span が
   独自の line-box を子要素 (a, font-size 14px) から計算してしまい、span 高が
   52px → 43px に縮む。inline なら h2 の line-box (35px font) に span が配置され、
   vertical-align: text-top で <a> が h2 の text-top 位置に揃う。 */
.entry-content h2 .alllist,
.entry-body h2 .alllist,
.post_content h2 .alllist,
h2 .alllist {
    display: inline !important;
    vertical-align: text-top !important;
    margin-left: 30px !important;
}
.entry-content h2 .alllist a,
.entry-content h2 .alllist .bagus-shortcode-button,
.entry-body h2 .alllist a,
.entry-body h2 .alllist .bagus-shortcode-button,
.post_content h2 .alllist a,
.post_content h2 .alllist .bagus-shortcode-button,
h2 .alllist a,
h2 .alllist .bagus-shortcode-button {
    display: inline-block !important;
    padding: 8px 24px !important;
    background-color: #2C2C2C !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    border-radius: 3px !important;
    line-height: 1 !important;
    /* 本番 .button.tiny は letter-spacing: 1px だが、local は FontAwesome 7 で
       fa-th アイコン幅が +3px (15→18) のため letter-spacing 1px では +5px 過剰。
       最終 width 121 に合わせるため 0.5px で微調整 (text +4px)。 */
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    height: auto !important;
}
.entry-content h2 .alllist a:hover,
.entry-content h2 .alllist .bagus-shortcode-button:hover {
    background-color: #444 !important;
    opacity: 1 !important;
}
/* h2 内の icon 画像 (icon_bike / icon_parts / icon_custom / icon_info) */
.entry-content h2 > img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    height: 35px;
    width: auto;
}

/* セクション h2 直後の separator は本番(Central) では完全 invisible (background transparent)。
   旧実装で dotted border を出していたが、ユーザー指摘 "BIKESALES タイトルとカードの間に謎の線"
   に対応して透明に戻す。本番 HTML には separator div が存在するが見た目には現れない */
.entry-content h2 + p + .bagus-separator,
.entry-content h2 + .bagus-separator,
.bagus-separator {
    height: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================================
   CPT 個別ページの Lightning 標準メタ非表示
   本番(Central) は salebike/parts/portfolio で投稿日/更新日/著者を出していない
   ============================================================ */
.single-salebike_page .entry-meta,
.single-salebike_page .post-meta,
.single-salebike_page .entry-date,
.single-salebike_page .entry-author,
.single-parts_page .entry-meta,
.single-parts_page .post-meta,
.single-parts_page .entry-date,
.single-parts_page .entry-author,
.single-portfolio_page .entry-meta,
.single-portfolio_page .post-meta,
.single-portfolio_page .entry-date,
.single-portfolio_page .entry-author {
    display: none !important;
}

/* ============================================================
   トップページセクション見出しの装飾アイコン (本番Central風)
   ============================================================ */
.bagus-section-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    height: 35px;
    width: auto;
}

/* 本番(Central) .top_area_line_holder 互換: head.jpg を背景に当てた帯エリア。
   titlecopy + homecopy を内包 */
.bagus-top-area-line-holder {
    background-color: #222;
    background-image: url('assets/central-img/head.jpg');
    background-position: center center;
    background-repeat: repeat;
    margin: 0 auto;
    padding: 32px 24px;
    text-align: center;
}
.bagus-top-area-line {
    max-width: 1000px;
    margin: 0 auto;
}

/* トップページの titlecopy 装飾 (本番Central風) */
.bagus-top-titlecopy {
    text-align: center;
    margin: 0 0 16px;
    line-height: 1;
}
.bagus-top-titlecopy img {
    display: inline-block;
    vertical-align: middle;
    margin: 4px 8px;
    height: auto;
}
@media (max-width: 768px) {
    .bagus-top-titlecopy img {
        max-width: 90%;
    }
}

/* トップページのコンセプト文 (本番 homepage.php の <p class="homecopy">)
   .top_area_line_holder の中で薄背景に乗るので白寄りの文字色に */
.bagus-homecopy {
    text-align: center;
    font-size: 14px;
    line-height: 2;
    margin: 0 auto;
    max-width: 900px;
    color: #ebebeb;
}

/* トップページのお知らせセクション (本番 homepage.php の <div class="news">)
   本番計測: 親 .news bg #2C2C2C、h4 color #FF1828 (赤) 22px weight 500 */
.bagus-top-news-area {
    margin: 30px auto 50px;
    max-width: 1080px;
    border-top: 0;
    padding: 0;
}
/* 本番(Central) .news 互換: bg #2C2C2C / padding 15px / text-align center / margin-bottom 5px */
.bagus-top-news {
    background: #2C2C2C;
    margin: 0 0 5px;
    padding: 15px;
    border-bottom: 0;
    color: #ebebeb;
    text-align: center;
}
.bagus-top-news:last-child {
    border-bottom: none;
}
/* 本番(Central) .news h4 互換: 22px / FF1828 / dotted ボーダーで本文と区切り */
.bagus-top-news__title,
h4.bagus-top-news__title {
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 5px 0 10px !important;
    padding: 0 0 15px !important;
    color: #FF1828 !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border-bottom: 1px dotted #494949 !important;
    text-align: center !important;
}
.bagus-top-news__body {
    font-size: 14px;
    line-height: 1.9;
    color: #ddd;
    text-align: center;
}
.bagus-top-news__body p {
    margin: 0 0 8px;
}
.bagus-top-news__body a {
    color: #6db3f2;
    text-decoration: underline;
    word-break: break-all;
}
@media (max-width: 768px) {
    .bagus-homecopy { padding: 0 16px; font-size: 13px; }
    .bagus-top-news-area { margin: 20px 16px 30px; padding-top: 0; }
    .bagus-top-news { padding: 20px 18px; }
    .bagus-top-news__title { font-size: 18px; }
}

/* ============================================================
   本番(Central) 互換 見た目調整 (2026-05-08 session5d スクショ比較ループ)
   ============================================================ */

/* --- ヘッダー: 本番互換 (常に rgba(0,0,0,0.898) ベタ塗り) + 白文字 ---
   旧: body.home は transparent → 上の .site-header ルール (rgba 0.898) を打ち消していた。
   本番(Central) はトップでも黒ヘッダーなので、home/non-home 両方とも黒で固定する */
body.home #site-header,
body.home .site-header,
body:not(.home) #site-header,
body:not(.home) .site-header {
    background-color: rgba(0, 0, 0, 0.898) !important;
    background-image: none !important;
    border-bottom: none;
    color: #fff;
}
body #site-header a,
body #site-header .site-header-logo span,
body #site-header #global-nav a {
    color: #fff !important;
}
body #site-header #global-nav a:hover {
    color: #ddd !important;
}
body #site-header .site-header-logo {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

/* --- Hero スライダー: 本番(revslider) と完全一致
   本番計測: GO FOR IT 78px/6px Oswald 400 #FA6600
              ENJOY  40px/6px Oswald 400 #ebebeb
              Welcome 26px/0  Oswald 400 #ebebeb
   line-height ≈ 0 で行間を圧縮しているのが本番の見た目の特徴 --- */
.ltg-slide-text-title,
.ltg-slide div.ltg-slide-text-title {
    font-family: Oswald, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 78px !important;
    font-weight: 400 !important;
    color: #FA6600 !important;
    letter-spacing: normal !important;
    line-height: 78px !important;
    margin-bottom: 24px !important;
}
.ltg-slide-text-caption {
    font-family: Oswald, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    color: #ebebeb !important;
    line-height: 40px !important;
    letter-spacing: normal !important;
}
/* caption 内の <br> 後 (Welcome to Bagus! motor cycle site) は 26px 小サイズ */
.ltg-slide-text-caption br + * {
    font-size: 26px !important;
    line-height: 26px !important;
}

/* --- PC + タブレットの hero: 本番(revslider) は 700px 固定だったため一致させる --- */
@media (min-width: 768px) {
    .ltg-slide,
    .ltg-slide .swiper-slide,
    .ltg-slide.swiper-container {
        min-height: 700px !important;
        height: 700px !important;
    }
    .ltg-slide .swiper-slide img {
        height: 700px !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
}

/* --- SP/タブレット: 本番互換のヘッダーレイアウト ---
   本番 SP は: 左ロゴ / 右に SNS 3個 + ハンバーガー（横並び 1 行）
   local: ハンバーガーは <header> の外で fixed なので、CSS で右端に固定
          SNS はナビ末尾の bagus-sns-item を flex 表示 */
@media (max-width: 991px) {
    /* ナビは SNS だけ表示、SNS は右端に張り付ける（ハンバーガーは SNS の左に置く） */
    #site-header .global-nav,
    #site-header .global-nav-list {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        background: transparent !important;
        border: 0 !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        height: 80px !important;
    }
    #site-header .global-nav-list > li:not(.bagus-sns-item) {
        display: none !important;
    }
    #site-header .global-nav-list > li.bagus-sns-item {
        display: inline-flex !important;
        height: 80px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        margin: 0 2px !important;
    }
    /* site-header-container を 1 行 flex にしてロゴ + ナビを左右に配置 */
    #site-header .site-header-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    /* ハンバーガー (vk-mobile-nav-menu-btn) を SNS group の左に配置
       SNS 全幅 ≈ 36*3 + margin 4*6 = 132px、+ 右余白 16 + 余白 8 → right: 156px */
    #vk-mobile-nav-menu-btn {
        right: 156px !important;
        left: auto !important;
    }
    /* SNS group を右端から少し内側に */
    #site-header .global-nav-list {
        margin-right: 16px !important;
    }
}

/* --- SP (< 768px) の hero: 本番(revslider) 実測互換 ---
   prod 計測: slider h=273px / title 40px #FA6600 / caption 24px #ebebeb /
              Welcome 20px #ebebeb / 全て右寄せ position:absolute */
@media (max-width: 767px) {
    .ltg-slide,
    .ltg-slide .swiper-slide,
    .ltg-slide.swiper-container {
        min-height: 273px !important;
        height: 273px !important;
        max-height: 273px !important;
    }
    .ltg-slide .swiper-slide-image,
    .ltg-slide .swiper-slide img {
        min-height: 273px !important;
        height: 273px !important;
        object-fit: cover !important;
    }
    .ltg-slide-text-title,
    .ltg-slide div.ltg-slide-text-title {
        font-size: 40px !important;
        line-height: 40px !important;
        margin-bottom: 12px !important;
    }
    .ltg-slide-text-caption {
        font-size: 24px !important;
        line-height: 24px !important;
    }
    .ltg-slide-text-caption br + * {
        font-size: 20px !important;
        line-height: 20px !important;
    }
    /* SP の hero テキストブロック自体を右寄せ + 上寄せで本番位置に */
    .ltg-slide .swiper-slide-text,
    .ltg-slide .ltg-slide-text {
        position: absolute !important;
        top: 80px !important;
        right: 16px !important;
        left: auto !important;
        width: auto !important;
        max-width: 70% !important;
        text-align: right !important;
    }
}

/* --- SP ヘッダー: 本番は 80px (PC 90px より小さい) --- */
@media (max-width: 991px) {
    .site-header,
    .site-header.site-header--layout--nav-float {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
    .site-header-container,
    .site-header > .container {
        height: 80px !important;
        min-height: 80px !important;
    }
    .site-header-logo,
    .site-header-logo a,
    .global-nav,
    #global-nav {
        height: 80px !important;
    }
    /* SP では home でもヘッダー高さ分のオフセットを取る（本番互換: slider は y=79 から開始） */
    body.home .site-body,
    body:not(.home) .site-body {
        padding-top: 80px !important;
    }
}

/* mini-title の重複指定はメインルールに集約 (上で absolute overlay 化) */

/* --- ALL LIST ボタン: post_content 内の [button] が出す .bagus-shortcode-button --- */
.bagus-shortcode-button {
    transition: opacity .15s ease, transform .15s ease;
}
.bagus-shortcode-button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* --- INFORMATION: latest_post 動画リストにサムネを左、タイトルを右に並べる --- */
/* 本番(Central) latest_post.small 互換: 60x60 サムネ + 日付 + タイトル の 1 行レイアウト
   prod CSS: img w/h 60px, li padding 10px 0 5px, border-top: 1px solid #4f4f4f
   margin/gap は最小限に圧縮して本番のコンパクトな縦間隔を再現する */
.bagus-latest-post {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
/* 本番(Central) probe 値: li=76px (padding-top 10px + サムネ 60px + padding-bottom 5px)
   サムネ 60x60 / date 13px / title 14px lh 1.4
   各項目の上に 1px solid #4f4f4f の区切り線 (本番互換)。
   ただし 1 番目だけは border-top なし (reproduction-exceptions.md A-011) */
.bagus-latest-post__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 5px !important;
    margin: 0 !important;
    border-top: 1px solid #4f4f4f !important;
    border-bottom: 0 !important;
    line-height: 1.4 !important;
    min-height: 76px !important;
    height: auto !important;
}
.bagus-latest-post__item:first-child {
    border-top: 0 !important;
}
.bagus-latest-post__thumb-link {
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 60px !important;
    overflow: hidden;
    margin: 0 !important;
}
.bagus-latest-post__thumb-link img,
.bagus-latest-post__thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
}
.bagus-latest-post__text {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
/* 本番(Central) .latest_post_text span: 13px Oswald #cd3100 weight 400 letter-spacing 0.03em */
.bagus-latest-post__date {
    display: block !important;
    color: #cd3100 !important;
    font-family: "Oswald", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.0 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    letter-spacing: 0.03em !important;
}
.bagus-latest-post__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}
.bagus-latest-post__title a {
    color: #ebebeb !important;
    text-decoration: none;
}
.bagus-latest-post__title a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* --- INFORMATION の FACEBOOK iframe (本番互換)
   local では Facebook SDK の app_id が空のため iframe が壊れリンク状態で表示される。
   本番のように 「タイトルだけ」 になるよう、トップページの fb-page iframe を非表示化。
   本来 FB Page Plugin はタイトル+iframe で表示するが、機能していない iframe は noise になる */
body.home .fb-page,
body.home .fb_iframe_widget {
    display: none !important;
}

/* --- 本文 (post_content) 全体の背景を本番互換のダーク基調に --- */
body.home .site-body,
body.home .main-section {
    background-color: #1a1a1a;
    color: #ddd;
}
body.home h2,
body.home h4 {
    color: #fff;
}
body.home a {
    color: #b8d4ff;
}


/* --- two_columns shortcode (INFORMATION セクション) ---
   wpautop が shortcode 出力後に <br> を勝手に挿入し、flex の子要素として
   余分な gap を発生させ、各カラム幅が 488 → 452px に縮んでいた (本番互換 487px と差 35px)。
   .bagus-two-columns > br を display:none + flex 計算から外して幅を本番互換に戻す */
.bagus-two-columns {
    display: flex;
    gap: 24px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.bagus-two-columns > br {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}
.bagus-two-columns__col {
    flex: 1;
    min-width: 280px;
}
.bagus-two-columns--75-25 .bagus-two-columns__col--1 { flex: 3; }
.bagus-two-columns--75-25 .bagus-two-columns__col--2 { flex: 1; }
@media (max-width: 768px) {
    .bagus-two-columns { flex-direction: column; gap: 12px; }
}


/* --- ヘッダー SNS アイコン (グローバルナビ末尾の bagus-sns-item)
   本番(Central) probe 値:
     forrst (ameba):  x=1126 w=28 h=28 ml=10
     facebook:        x=1164 w=28 h=28 ml=10
     youtube:         x=1202 w=28 h=28 ml=10
   3 個とも 28x28 で margin-left 10px、最後の右端は viewport(1280) - 22 = 1258 */
#site-header .menu-item.bagus-sns-item {
    list-style: none;
    margin: 0 0 0 10px !important;
    /* li は親 flex (global-nav-list) の align-items:stretch で h=65px に伸びる。
       中の <a> (28x28) を縦中央に寄せるため li 自身を flex 縦中央コンテナにする。
       本番 prod は li.line-height:65px + display:block の inline-block 子で
       実質中央 (y=15-43) に位置するが、local の Lightning 構造では flex 制御が必要。 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* 本番互換: container 右 padding 50px が右端余白を提供するので mr=0
   probe 結果で本番 youtube x=1202 終端=1230、container padding-right=50 → 1230 で一致 */
#site-header .global-nav-list > li.bagus-sns-item:last-child {
    margin-right: 0 !important;
}
/* ナビと SNS の境目: 最初の SNS は ml=10px (本番互換) */
#site-header .global-nav-list > li.bagus-sns-item:first-of-type {
    margin-left: 10px !important;
}
#site-header .menu-item.bagus-sns-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff !important;
    text-decoration: none;
    border-radius: 50%;
    transition: background .15s ease, opacity .15s ease;
    /* 本番(prod) は y=15 (line-height 65px の inline-block 起点)。
       local は flex 縦中央で y=(65-28)/2≒18 → 3px 下に出る。
       本番見た目互換のため position:relative + top:-3px で上シフト
       (margin-top -3px だと flex の cross-axis 中央寄せが再計算され効かない)。 */
    position: relative !important;
    top: -3px !important;
}
#site-header .menu-item.bagus-sns-item a:hover {
    background: rgba(255,255,255,0.1);
    opacity: 1;
}
#site-header .menu-item.bagus-sns-item .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
}
/* ナビ a の inline-block 70px ルールを SNS 側で打ち消す（specificity 強化）
   本番(Central) と一致: 28x28 (ameba/fb/yt 共通) */
#site-header .global-nav .menu-item.bagus-sns-item > a,
#site-header .global-nav .menu-item.bagus-sns-ameblo > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    line-height: 1 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50%;
}
#site-header .menu-item.bagus-sns-ameblo .bagus-sns-ameblo-img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain;
    display: block;
}

/* --- 本番(Central) social_icons_sprite.png 互換 (上段=白アイコン)
     forrst (ameba): -84px 0、facebook: -28px 0、youtube: -422px 0。
     span.inner にスプライト背景を適用、テキストはオフスクリーン。 */
#site-header .menu-item.bagus-sns-item .inner {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    background-image: url('assets/central-img/social_icons_sprite.png') !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    line-height: 28px !important;
}
#site-header .menu-item.bagus-sns-item.forrst .inner,
#site-header .menu-item.bagus-sns-ameblo .inner {
    background-position: -84px 0 !important;
}
#site-header .menu-item.bagus-sns-item.facebook .inner,
#site-header .menu-item.bagus-sns-fb .inner {
    background-position: -28px 0 !important;
}
#site-header .menu-item.bagus-sns-item.youtube .inner,
#site-header .menu-item.bagus-sns-yt .inner {
    background-position: -422px 0 !important;
}
/* 旧 amebalogo img / dashicons 残存ケースを念のため非表示 */
#site-header .menu-item.bagus-sns-ameblo .bagus-sns-ameblo-img,
#site-header .menu-item.bagus-sns-item .dashicons {
    display: none !important;
}

/* --- vk-mobile-nav: PC では非表示（SP のみハンバーガーメニュー有効） --- */
@media (min-width: 992px) {
    #vk-mobile-nav-menu-btn,
    #vk-mobile-nav {
        display: none !important;
    }
}

/* --- ヘッダー全体のスペース調整: SP では SNS アイコンを少し小さく --- */
@media (max-width: 991px) {
    #site-header .menu-item.bagus-sns-item a {
        width: 32px;
        height: 32px;
    }
}

/* --- PC: hover で sub-menu (業務販売 / メンバーシップ etc) をドロップダウン表示 ---
   本番(Central) は親メニュー hover で .second が display:block 切替。
   Lightning は .sub-menu.acc-child-close を SP アコーディオン用に常時 hidden 化するので、
   PC では .sub-menu を absolute + hover 表示で本番互換のドロップダウンを再現する */
@media (min-width: 992px) {
    #site-header .global-nav .menu-item-has-children {
        position: relative !important;
    }
    #site-header .global-nav .menu-item-has-children > .sub-menu,
    #site-header .global-nav .menu-item-has-children > .sub-menu.acc-child-close {
        display: none !important;
        position: absolute !important;
        top: 65px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-color: #2c2c2c !important;
        min-width: 220px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        z-index: 1001 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        border: 1px solid #555 !important;
    }
    #site-header .global-nav .menu-item-has-children:hover > .sub-menu,
    #site-header .global-nav .menu-item-has-children:hover > .sub-menu.acc-child-close,
    #site-header .global-nav .menu-item-has-children:focus-within > .sub-menu,
    #site-header .global-nav .menu-item-has-children:focus-within > .sub-menu.acc-child-close {
        display: block !important;
    }
    #site-header .global-nav .sub-menu li {
        list-style: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    #site-header .global-nav .sub-menu li a {
        display: block !important;
        padding: 10px 18px !important;
        color: #ffffff !important;
        font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        height: auto !important;
        text-decoration: none !important;
        background-color: transparent !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }
    #site-header .global-nav .sub-menu li a:hover,
    #site-header .global-nav .sub-menu li a:focus {
        background-color: rgba(255, 255, 255, 0.10) !important;
        color: #ffffff !important;
    }
    /* PC では Lightning の acc-btn (アコーディオン開閉ボタン) を非表示 */
    #site-header .global-nav .acc-btn,
    #site-header .global-nav-list .acc-btn,
    #site-header .global-nav .acc-btn-open {
        display: none !important;
    }
    /* sub-menu の chevron は不要 (本番にはない) */
    #site-header .global-nav .sub-menu li a::before {
        display: none !important;
        content: none !important;
        background-image: none !important;
    }
}

/* ============================================================
   T6 R-9 第 2 段階: CPT 単体テンプレート (case 3 / case 6) shim
   - portfolio_title_holder / two_columns_33_66 / flexslider / portfolio_galery
   - 計画: tasks/migration-fix-plan.md §20-2
   ============================================================ */

/* タイトル + カテゴリ表示部（case 3 = p3 / case 6 = p6） */
.single-salebike_page .portfolio_title_holder,
.single-parts_page .portfolio_title_holder,
.single-portfolio_page .portfolio_title_holder {
    margin: 24px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2a2a2a;
}
/* SEO Phase 2-A-4 (2026-05-24): CPT single の H1 化に対応するため h1 / h2 両方を選択
   PROD 実測: .portfolio_title_holder h2 は font-size: 35px / Oswald / weight 300 */
.single-salebike_page .portfolio_title_holder h1,
.single-parts_page .portfolio_title_holder h1,
.single-portfolio_page .portfolio_title_holder h1,
.single-salebike_page .portfolio_title_holder h2,
.single-parts_page .portfolio_title_holder h2,
.single-portfolio_page .portfolio_title_holder h2 {
    margin: 0 0 4px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    color: #f5f5f5;
    font-size: 35px;
    line-height: 35px;
}
.single-salebike_page .portfolio_title_holder span,
.single-parts_page .portfolio_title_holder span,
.single-portfolio_page .portfolio_title_holder span {
    font-size: 12px;
    color: #aaa;
}
.single-salebike_page .portfolio_title_holder .category,
.single-parts_page .portfolio_title_holder .category,
.single-portfolio_page .portfolio_title_holder .category {
    color: #ddd;
}

/* 33/66 二段組 (CPT single 内 portfolio_detail | the_content 専用)
   WP-5 v2 で shortcode 用 .two_columns_33_66 の float 定義を style.css 末尾に追加した
   ため、CPT single の用途とスコープ衝突しないよう .single-* で限定する。 */
.single-parts_page .two_columns_33_66,
.single-portfolio_page .two_columns_33_66,
.single-salebike_page .two_columns_33_66 {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 24px 0;
    align-items: flex-start; /* AC-005 session29: column1 が column2 と equal-height で伸びるのを抑制 (PROD は float ベース 1 列ずつ独立高) */
}
.single-parts_page .two_columns_33_66 > .column1,
.single-portfolio_page .two_columns_33_66 > .column1,
.single-salebike_page .two_columns_33_66 > .column1 { flex: 0 0 calc(33% - 12px); max-width: calc(33% - 12px); float: none; width: auto; }
.single-parts_page .two_columns_33_66 > .column2,
.single-portfolio_page .two_columns_33_66 > .column2,
.single-salebike_page .two_columns_33_66 > .column2 { flex: 0 0 calc(67% - 12px); max-width: calc(67% - 12px); float: none; width: auto; }
.single-parts_page .two_columns_33_66 > .column1 .column_inner,
.single-portfolio_page .two_columns_33_66 > .column1 .column_inner,
.single-salebike_page .two_columns_33_66 > .column1 .column_inner,
.single-parts_page .two_columns_33_66 > .column2 .column_inner,
.single-portfolio_page .two_columns_33_66 > .column2 .column_inner,
.single-salebike_page .two_columns_33_66 > .column2 .column_inner { width: 100%; padding: 0; }

@media (max-width: 767px) {
    .single-parts_page .two_columns_33_66,
    .single-portfolio_page .two_columns_33_66,
    .single-salebike_page .two_columns_33_66 { flex-direction: column; gap: 16px; }
    .single-parts_page .two_columns_33_66 > .column1,
    .single-portfolio_page .two_columns_33_66 > .column1,
    .single-salebike_page .two_columns_33_66 > .column1,
    .single-parts_page .two_columns_33_66 > .column2,
    .single-portfolio_page .two_columns_33_66 > .column2,
    .single-salebike_page .two_columns_33_66 > .column2 { flex: 1 1 100%; max-width: 100%; }
}

/* AC-005 v2 (session29 2026-05-27): flexslider 高さ制約 (Splide スライダーの container 過剰高 抑止のみ)
 * 背景: case3 テンプレは Splide.js (`bagus-cpt-single.js`) で `.flexslider` をマウントするが、
 *      ul.slides の height が画像 natural アスペクトで 1110px 超に伸びるため
 *      その直下の .two_columns_33_66 まで含めてページが過剰高になる。
 *      slide visibility は Splide が管理するため display:none/block で干渉しない。
 *      `.flexslider` 自体に max-height + overflow:hidden だけ当てて高さ制限する。
 * v1 (削除済) の display:none/block 強制は Splide DOM 操作と競合し hero 画像が close-up 固定になる
 *  regression を引き起こしていた → v2 で Splide 任せに修正。
 */
.single-parts_page .flexslider,
.single-portfolio_page .flexslider,
.single-salebike_page .flexslider {
    max-height: 600px;
    overflow: hidden;
}
.single-parts_page .flexslider img,
.single-portfolio_page .flexslider img,
.single-salebike_page .flexslider img {
    max-height: 600px;
    width: auto;
    object-fit: contain;
}

/* portfolio_detail (qode_portfolios + Date) */
.portfolio_detail .info {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #1f1f1f;
    font-size: 13px;
    line-height: 1.5;
    color: #e5e5e5;
}
.portfolio_detail .info h4 {
    flex: 0 0 38%;
    margin: 0;
    padding-right: 12px;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #999;
}
.portfolio_detail .info span { flex: 1 1 auto; word-break: break-word; }
.portfolio_detail .info span a { color: #f5c542; text-decoration: none; }
.portfolio_detail .info span a:hover { text-decoration: underline; }

/* CHK-E (2026-05-30): salebike 個別の「整備付/保証付/...」バッジを PROD 互換装飾に。
   PROD 実測: display:block / float:right / bg:#333 / color:#ebebeb / fs:14px / padding:3px 8px。
   bagus_render_qode_portfolios() で info 内側 span 3 個以上 + 「：」を含まない場合に
   .bagus-info-badges クラスが付与される (qode-portfolios-renderer.php)。 */
.portfolio_detail .info.bagus-info-badges > span > span {
    display: block;
    float: right;
    padding: 3px 8px;
    margin: 0 0 4px 4px;
    background: #333;
    color: #ebebeb;
    font-size: 14px;
    line-height: 1.5;
}
.portfolio_detail .info.bagus-info-badges > span {
    overflow: hidden; /* float clearfix: 子バッジが浮いて親が高さ 0 になるのを防ぐ */
}
/* CHK-E (2026-05-30): salebike 個別の価格 (車輛価格/諸費用/支払総額) の数値部分を PROD 互換に。
   PROD 実測: 数値 inner span が font-size:28px (color:#ebebeb / display:inline)。 */
.portfolio_detail .info.bagus-info-price > span > span {
    font-size: 28px;
    color: #ebebeb;
}

/* About + the_content */
.portfolio_single_text_holder h4 {
    margin: 0 0 12px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #f5f5f5;
    text-transform: uppercase;
}

/* flexslider (Splide マウント前後の暫定スタイル) */
.flexslider {
    margin: 0 0 24px;
    background: #050505;
}
.flexslider .slides { list-style: none; margin: 0; padding: 0; }
.flexslider .slide img,
.flexslider .slide iframe { width: 100%; height: auto; display: block; }
.flexslider.splide .splide__slide img { width: 100%; height: auto; }

/* portfolio_galery (case 6) - float レイアウト (PROD 互換)
 *
 * CHK-6 20260528: 旧実装は display:grid + grid-template-columns:repeat(N,1fr) +
 * img{height:100%;object-fit:cover} だった。grid は同一行のセル高を最も高いセルに
 * 統一するため、行内で縦横比の違う画像が混在すると低い (横長) 画像が縦に引き伸ばし
 * /過トリミングされて見えていた (/parts_page/idling-screw-holder/ 末尾行)。
 * PROD は qode の float グリッドで、各セルが自画像のアスペクト比で独立した高さを持つ
 * (object-fit を強制せず img は width:100%;height:auto)。これを再現する。
 *
 * 列数はレンダラが各セル <a class="lightbox_single_portfolio v2|v3|v4"> に付与する
 * v2/v3/v4 クラスで決まる (PROD の qode CSS と同じキー)。float の段落ち防止に
 * 各行先頭セルを clear する (nth-of-type)。
 */
.portfolio_galery {
    display: block;
    margin: 0 -4px 24px;
}
.portfolio_galery::after {
    content: "";
    display: table;
    clear: both;
}
.portfolio_galery .lightbox_single_portfolio {
    position: relative;
    display: block;
    float: left;
    padding: 0 4px;
    margin-bottom: 8px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}
/* 列幅: セル側 v2/v3/v4 クラスで決定 (JS 無効でも renderer が必ず付与) */
.portfolio_galery .lightbox_single_portfolio.v2 { width: 50%; }
.portfolio_galery .lightbox_single_portfolio.v3 { width: 33.3333%; }
.portfolio_galery .lightbox_single_portfolio.v4 { width: 25%; }
/* float 段落ち防止: 各行先頭セルを clear */
.portfolio_galery .lightbox_single_portfolio.v2:nth-of-type(2n+1) { clear: left; }
.portfolio_galery .lightbox_single_portfolio.v3:nth-of-type(3n+1) { clear: left; }
.portfolio_galery .lightbox_single_portfolio.v4:nth-of-type(4n+1) { clear: left; }

.portfolio_galery .lightbox_single_portfolio img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 300ms ease;
}
.portfolio_galery .lightbox_single_portfolio:hover img { transform: scale(1.06); }

/* SP: PROD と同じく列数を半減 (v4→2列 / v3→2列 / v2→1列) */
/* CHK-6 20260528 再修正: SP は PROD に合わせ 1 列 (ユーザー確定方針)。
 * before: v3/v4=50% (2列) + v2=100%。PROD 計測 SP は各セル幅=コンテナ全幅=1列。
 * PC (768px 以上) の v2=50% / v3=33.33% / v4=25% は変更しない。 */
@media (max-width: 767px) {
    .portfolio_galery .lightbox_single_portfolio.v2,
    .portfolio_galery .lightbox_single_portfolio.v3,
    .portfolio_galery .lightbox_single_portfolio.v4 { width: 100%; }
    /* 1 列なので全セルを clear:left に整理 (PC 用 3n+1/4n+1 等を打ち消す) */
    .portfolio_galery .lightbox_single_portfolio.v2:nth-of-type(n),
    .portfolio_galery .lightbox_single_portfolio.v3:nth-of-type(n),
    .portfolio_galery .lightbox_single_portfolio.v4:nth-of-type(n) { clear: left; }
}

/* hover overlay */
.portfolio_galery .lightbox_single_portfolio .image_hover {
    position: absolute;
    /* CHK-6 20260528: セルに左右 4px の gutter padding が付いたため、overlay を
     * 画像領域 (padding box の内側) にぴったり重ねる。top/bottom は 0。 */
    inset: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}
.portfolio_galery .lightbox_single_portfolio:hover .image_hover { opacity: 1; }
.portfolio_galery .lightbox_single_portfolio .image_hover h4 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    padding: 0 12px;
}

/* portfolio_navigation (prev / back / next) */
.portfolio_navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32px 0 48px;
    padding-top: 16px;
    border-top: 1px solid #1f1f1f;
}
.portfolio_navigation a {
    color: #f5f5f5;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.portfolio_navigation a:hover { color: #f5c542; }
.portfolio_navigation .portfolio_button a {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: #2a2a2a;
    border-radius: 50%;
    position: relative;
}
.portfolio_navigation .portfolio_button a::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg, transparent 45%, #f5f5f5 45%, #f5f5f5 55%, transparent 55%);
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================================
   session5 visual-fix (VFD-014 / IMPL-F)
   BL-1 (/home/blog/) 記事タイトルの可読性。
   本番互換: color #ffffff (本番計測値) + font-size 30px + font-weight 300。
   現状の Lightning デフォルト: color #333 (rgb(51,51,51)) で背景 #1a1a1a に対して読めない。
   ============================================================ */
body.blog .vk_post_title a,
body.blog .vk_post_title {
    color: #ffffff !important;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.35;
}
body.blog .vk_post_title a:hover {
    color: #f5c542 !important;
    text-decoration: none;
}

/* session16 BL-004-D + NEW-016: 統合 CSS は L3274 系の specificity 0,3,1 ルールへ反映 */

/* ============================================================
   NEW-012 v2 (session17 2026-05-13): 検索結果ページの 3 列グリッド再現
   PROD 実機計測 (probe-new012-search.js):
     PROD: article.mix × 3 列 (rect 422x510, display:inline-block, x=50/509/968)
     LOCAL: .vk_post.media × 1 列縦並び (rect 892x345, display:flex)
   差分: VK_Component_Posts 由来の media layout (画像横 + 本文) → 3 列縦長カードに変換
   サイドバー抑制は functions.php bagus_is_fullwide_layout() に is_search() 追加で対応済
   ============================================================ */
body.search-results .vk_posts.vk_posts-mainSection {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}
body.search-results .vk_posts-mainSection .vk_post {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #2a2a2a !important;
    background: #0a0a0a !important;
}
body.search-results .vk_posts-mainSection .vk_post.media {
    flex-direction: column !important;
}
body.search-results .vk_posts-mainSection .vk_post .vk_post_imgOuter,
body.search-results .vk_posts-mainSection .vk_post .media-img {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}
body.search-results .vk_posts-mainSection .vk_post .vk_post_imgOuter img,
body.search-results .vk_posts-mainSection .vk_post .media-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
body.search-results .vk_posts-mainSection .vk_post .vk_post_body,
body.search-results .vk_posts-mainSection .vk_post .media-body {
    width: 100% !important;
    flex: none !important;
    padding: 14px !important;
}
/* 検索結果カードでは session17 v2 のタイトル下罫線を抑制 (3 列カード layout では不要) */
body.search-results .vk_posts-mainSection .vk_post_taxonomies {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
}
/* 検索結果カードの上罫線も抑制 (各カードが独立した box) */
body.search-results .vk_posts-mainSection .vk_post {
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   NEW-015-c + NEW-012 (session16): BLOG + search ページネーションのリンク色を可読色に
   現状: rgb(51,51,51) (濃灰、暗背景に対し見えにくい)
   PROD: rgb(235,235,235)
   スコープを body.blog + body.search 限定にして他 archive に波及させない
   ============================================================ */
body.blog .pagination .page-numbers,
body.blog .pagination .page-numbers a,
body.blog .nav-links .page-numbers,
body.blog .nav-links .page-numbers a,
body.search .pagination .page-numbers,
body.search .pagination .page-numbers a,
body.search .nav-links .page-numbers,
body.search .nav-links .page-numbers a {
    color: #ebebeb !important;
}
body.blog .pagination .page-numbers:hover,
body.blog .pagination .page-numbers a:hover,
body.blog .nav-links .page-numbers:hover,
body.blog .nav-links .page-numbers a:hover,
body.search .pagination .page-numbers:hover,
body.search .pagination .page-numbers a:hover,
body.search .nav-links .page-numbers:hover,
body.search .nav-links .page-numbers a:hover {
    color: #ffffff !important;
}
/* .current (active page) はそのまま (青背景) */

/* ============================================================
   VIEW BY TYPE フィルタ (session7 / 2026-05-11)
   本番 (Central) `.filter_holder > ul > li.label + li.filter[data-filter]` 構造の
   dropdown UI を完全再現。本番実測値準拠:
     .filter_holder         block / height 30px / position relative
     .filter_holder > ul    position absolute / width 168px / height 30px (初期) / border 1px #d7d7d7 / bg #fff
     li                     height 31px / line-height 30px / Oswald / color #949494
   挙動:
     click .filter_holder → .expanded toggle (ul height: 30px ⇔ filter_count*31+30px)
     click li.filter      → MixItUp filter + label span text 書き換え
   ============================================================ */
.filter_holder {
    position: relative;
    display: block;
    height: 30px;
    margin: 0 0 40px;
    padding: 0;
    font-size: 14px;
    color: rgb(148, 148, 148);
}
.filter_holder > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgb(215, 215, 215);
    width: 168px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    transition: height 200ms ease;
}
.filter_holder.expanded > ul {
    z-index: 10;
    /* height は inline style で JS が設定 (filter_height + 30) */
}
.filter_holder > ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 30px;
    color: rgb(148, 148, 148);
    font-family: Oswald, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, sans-serif;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    display: block;
    box-sizing: border-box;
}
.filter_holder > ul > li.label {
    position: relative;
    border-bottom: 1px solid rgb(235, 235, 235);
}
.filter_holder > ul > li span {
    display: inline-block;
    padding: 0 30px 0 20px;
    line-height: 30px;
    text-transform: uppercase;
    white-space: nowrap;
}
.filter_holder > ul > li.label span {
    color: rgb(80, 80, 80);
    font-weight: 400;
}
.filter_holder > ul > li.filter:hover,
.filter_holder > ul > li.filter.active {
    background: rgb(248, 248, 248);
}
.filter_holder > ul > li.filter:hover span,
.filter_holder > ul > li.filter.active span {
    color: rgb(40, 40, 40);
}
.filter_holder .arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgb(148, 148, 148);
    transform: translateY(-50%);
    transition: transform 200ms ease;
    pointer-events: none;
}
.filter_holder.expanded .arrow {
    transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 991px) {
    .filter_holder {
        margin: 0 0 24px;
    }
    .filter_holder > ul {
        width: 100%;
        max-width: 280px;
    }
    .filter_holder > ul > li span {
        padding: 0 30px 0 16px;
        font-size: 12px;
    }
}

/* ============================================================
   WP-05 v2 shortcode (Central DOM 再現)
   G0 衝突調査 (2026-05-11):
   - .button: WooCommerce スコープ衝突あり -> 本文スコープ限定で適用
   - .separator / .projects_holder*: 衝突なし
   計画: tasks/wp-05-plan.md v2 §4-7
   ============================================================ */

/* separator (本番 Central は inline style で height + background-color、CSS は最小限) */
.separator {
    display: block;
    height: 1px;
    margin: 70px 0;
    background-color: #999999;
}

/* button (本文スコープのみ — Lightning 親 WooCommerce .button との衝突回避) */
.entry-content .button,
.entry-body .button,
.post_content .button {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 14px 40px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 14px;
    color: #ffffff;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #2c2c2c;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.entry-content .button:hover,
.entry-body .button:hover,
.post_content .button:hover {
    color: #ffffff;
    background-color: #333333;
    text-decoration: none;
}
.entry-content .button.large,
.entry-body .button.large,
.post_content .button.large {
    font-size: 23px;
    line-height: 23px;
    padding: 23px 70px;
}
.entry-content .button.medium,
.entry-body .button.medium,
.post_content .button.medium {
    font-size: 18px;
    line-height: 18px;
    padding: 18px 55px;
}
.entry-content .button.small,
.entry-body .button.small,
.post_content .button.small {
    font-size: 14px;
    line-height: 14px;
    padding: 10px 30px;
}
.entry-content .button.tiny,
.entry-body .button.tiny,
.post_content .button.tiny {
    font-size: 14px;
    line-height: 14px;
    padding: 8px 24px;
}

/* two columns wrappers (本番 Central 互換: float 50/50, 66/33, 33/66, 75/25) */
.two_columns_50_50,
.two_columns_66_33,
.two_columns_33_66,
.two_columns_75_25 {
    width: 100%;
}
.two_columns_50_50 > .column1,
.two_columns_50_50 > .column2,
.two_columns_66_33 > .column1,
.two_columns_66_33 > .column2,
.two_columns_33_66 > .column1,
.two_columns_33_66 > .column2,
.two_columns_75_25 > .column1,
.two_columns_75_25 > .column2 {
    float: left;
}
.two_columns_50_50 > .column1,
.two_columns_50_50 > .column2 {
    width: 50%;
}
/* CHK-3 20260528: ACCESS (/home/shop/) で CONTACT FORM(column2) が
 * INFORMATION(column1) より約21px 下にずれる症状の救済。
 * 真因は本文の wpautop が .two_columns_50_50 直下に stray <br>×3 と空 <p> を
 * 挿入し、<br> が float カラム間に inline line-box を作って column2 を押し下げる
 * こと (PROD DOM には br/空p が無い)。content フィルタ改変はリスク高のため、
 * 直下の stray br / 空 p を不可視化して PROD と同じ縦位置に視覚的に揃える。 */
.two_columns_50_50 > br,
.two_columns_66_33 > br,
.two_columns_33_66 > br,
.two_columns_75_25 > br {
    display: none;
}
.two_columns_50_50 > p:empty,
.two_columns_66_33 > p:empty,
.two_columns_33_66 > p:empty,
.two_columns_75_25 > p:empty {
    display: none;
}
.two_columns_66_33 > .column1 {
    width: 66.66%;
}
.two_columns_66_33 > .column2 {
    width: 33.33%;
}
.two_columns_33_66 > .column1 {
    width: 33.33%;
}
.two_columns_33_66 > .column2 {
    width: 66.66%;
}
.two_columns_75_25 > .column1 {
    width: 75%;
}
.two_columns_75_25 > .column2 {
    width: 25%;
}
.two_columns_50_50 > .column1 > .column_inner,
.two_columns_66_33 > .column1 > .column_inner,
.two_columns_33_66 > .column1 > .column_inner,
.two_columns_75_25 > .column1 > .column_inner {
    padding: 0 13px 0 0;
}
.two_columns_50_50 > .column2 > .column_inner,
.two_columns_66_33 > .column2 > .column_inner,
.two_columns_33_66 > .column2 > .column_inner,
.two_columns_75_25 > .column2 > .column_inner {
    padding: 0 0 0 13px;
}
@media (max-width: 768px) {
    .two_columns_50_50 .column1, .two_columns_50_50 .column2,
    .two_columns_66_33 .column1, .two_columns_66_33 .column2,
    .two_columns_33_66 .column1, .two_columns_33_66 .column2,
    .two_columns_75_25 .column1, .two_columns_75_25 .column2 {
        width: 100%;
        border: none;
    }
    .two_columns_50_50 .column1 .column_inner, .two_columns_50_50 .column2 .column_inner,
    .two_columns_66_33 .column1 .column_inner, .two_columns_66_33 .column2 .column_inner,
    .two_columns_33_66 .column1 .column_inner, .two_columns_33_66 .column2 .column_inner,
    .two_columns_75_25 .column1 .column_inner, .two_columns_75_25 .column2 .column_inner {
        padding: 0;
    }
}

/* projects holder (shortcode grid: portfolio_list / parts_list / salebike_list 本番 DOM) */
.projects_holder_outer {
    margin: 20px auto;
}
.projects_holder {
    font-size: 0.1px;
    line-height: 0;
    list-style-type: none;
    text-align: justify;
}
.projects_holder:before,
.projects_holder:after {
    content: "";
    display: inline-block;
    width: 100%;
}
.projects_holder .carousel {
    display: contents;
}
.projects_holder .mix {
    display: inline-block;
    opacity: 1;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    line-height: normal;
}
.projects_holder .filler {
    display: inline-block;
    height: 0;
}
.projects_holder.v4 .mix,
.projects_holder.v4 .filler {
    width: 23.5%;
}
.projects_holder.v4 .mix {
    margin: 0 0 2%;
}
.projects_holder.v3 .mix,
.projects_holder.v3 .filler {
    width: 31.5%;
}
.projects_holder.v3 .mix {
    margin: 0 0 2.8%;
}
.projects_holder.v2 .mix,
.projects_holder.v2 .filler {
    width: 48.7%;
}
.projects_holder.v2 .mix {
    margin: 0 0 2.7%;
}
.projects_holder .image {
    position: relative;
    aspect-ratio: 500 / 335;
    overflow: hidden;
}
.projects_holder .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.projects_holder .hover,
.projects_holder .hover-type-text {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.projects_holder article:hover .hover,
.projects_holder article:hover .hover-type-text {
    opacity: 1;
}
.projects_holder article .hover-inner {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}
.projects_holder .hover .hover-inner a.hover-inner-link,
.projects_holder .hover-type-text a.hover-inner-link {
    display: table-cell;
    vertical-align: middle;
    padding: 15px;
    color: #ffffff;
    text-decoration: none;
}
.projects_type2 article h4.portfolio_title,
.projects_type1 article h4.portfolio_title {
    margin: 0;
    color: #ffffff;
}
.projects_holder .hover-inner-link p,
.projects_holder .bike-category,
.projects_holder .machine-name {
    margin: 4px 0 0;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}
.projects_type2 article h4 {
    margin: 20px 0;
    text-transform: uppercase;
}
.projects_holder .mini-title {
    margin: 0;
    padding: 14px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #dddddd;
    text-align: center;
}
.projects_holder .mini-title br + * {
    font-size: 0.92em;
    opacity: 0.85;
}
.portfolio_paging {
    text-align: center;
}
.portfolio_paging .load_more {
    display: inline-block;
}
@media (max-width: 990px) {
    .projects_holder.v4 .mix,
    .projects_holder.v4 .filler {
        width: 31.5%;
    }
    .projects_holder.v3 .mix,
    .projects_holder.v3 .filler {
        width: 48%;
    }
}
@media (max-width: 768px) {
    .projects_holder.v4 .mix, .projects_holder.v4 .filler,
    .projects_holder.v3 .mix, .projects_holder.v3 .filler,
    .projects_holder.v2 .mix, .projects_holder.v2 .filler {
        width: 100%;
    }
    .projects_holder.v4 .mix,
    .projects_holder.v3 .mix,
    .projects_holder.v2 .mix {
        margin: 0 0 9%;
    }
}

/* ============================================================
   AC-003: CF7 「内容確認後〜」h5.contact-check 赤字
   本番 Central bagus.css L297-301 互換
   ============================================================ */
.contact-check {
    color: #FF4747;
    font-size: 14px;
    font-weight: bold;
}

/* ============================================================
   OP-002 / CM-002 / BIKE-002 / BL-002: bagus-archive-hero フル幅化
   実装済の bagus_get_page_hero_html() は本番互換の画像 src で出力済
   (head_originalparts.jpg / head_custombike.jpg / head_service.jpg / head_events_01.jpg)
   ただし the_content フィルタで挿入されるため container 内に押し込まれ左右黒余白が出る
   本番は w=1440px のフル幅。CSS で container 外に展開して再現
   (既存 L1109 .bagus-archive-hero の本番互換レイアウトはそのまま温存し、ここではフル幅化のみ)
   ============================================================ */
.bagus-archive-hero.title.has_fixed_background {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* session15 v3 BL-004 観点 4: Hero BLOG タイトル viewport 中央寄せ
   probe-bl004-7items.js 実測: PROD hero.x=0 / h1.x=0 / h1.w=1440 / textAlign=center
   LOCAL hero.x=-224 / h1.x=446 / h1.w=101 / textAlign=start
   差因: BL-1 は is_home の main-section (x=50, w=892) 内に Hero 配置 → 100vw + calc(50%-50vw)
        の式が viewport 中央ではなく main-section 中央起点で算出され -274px ずれ。
   修正: blog のみ left/translateX で viewport 中央起点に強制 + h1 text-align:center。 */
body.blog .bagus-archive-hero.title.has_fixed_background {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}
body.blog .bagus-archive-hero h1 {
    text-align: center !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   TOP-001 v4: PowerTip 同梱 (jQuery + jquery.powertip.min.js) で
   本番 Central 互換の hover tooltip を再現。本番 CSS:
     #powerTip { color: #EBEBEB; display: none; padding: 2px 10px;
       position: absolute; white-space: nowrap; z-index: 10000000;
       font-size: 10px; letter-spacing: 0; }
   PowerTip JS が body 直下に absolute 配置するため、ヘッダーの
   overflow:hidden 問題は発生しない。
   v3 までの CSS only ::before 実装は撤去。
   ============================================================ */
#powerTip {
    cursor: default;
    color: #EBEBEB;
    display: none;
    padding: 2px 10px;
    position: absolute;
    white-space: nowrap;
    z-index: 10000000;
    font-size: 10px;
    letter-spacing: 0;
}

/* ============================================================
   BIKE-003 v2 (session14): BIKE SALES (/home/bike-sales/) 本文 hr 罫線再現
   本番 (Central + UA stylesheet) では post_content にハードコード
   された <hr/> 2 本が UA default `1px inset rgb(128,128,128)` で描画される。
   Local の hr の実親は <div class="full_width"> なので親セレクタを拡張。
   Lightning 親テーマが `rgba(0,0,0,0.06)` でほぼ透明にしているため、
   `!important` で本番互換色 #808080 を強制する。
   ============================================================ */
.entry-content > hr,
.page-content > hr,
.bagus-archive-hero ~ hr,
.bagus-page-body hr,
.full_width > hr,
.bagus-page-body .full_width > hr,
main hr {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    margin: 1em auto !important;
    border: 0 !important;
    border-top: 1px solid #808080 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   WR-002 v2 (session14): contact_detail 内の h4 (INFORMATION 見出し) を本番互換に
   本番 (Central): h4 { font-size:19px; font-weight:500; border-bottom:1px solid #999;
                        padding-bottom:6px; margin-bottom:30px; background:transparent }
   Lightning 親は h4 に padding 9px + 背景 rgba(0,0,0,0.06) + border 無しを当てるので
   .contact_detail h4 に明示的に上書きする。
   AC-1 / OP-2 / OP-3 / AC-2 / BL-2 / WR-2 すべての contact-page-201602.php template で適用される。
   ============================================================ */
.contact_detail h4 {
    font-size: 19px !important;
    font-weight: 500 !important;
    color: rgb(235, 235, 235) !important;
    padding: 0 0 6px 0 !important;
    margin: 0 0 30px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #999 !important;
    background: transparent !important;
    line-height: 1.4 !important;
}

/* ============================================================
   BL-004 v2 (session14): 本番 wpt_widget 互換タブ UI
   3 タブ (Recent / Popular / Tags) を SSR で出す sidebar widget
   ============================================================ */
.widget_wpt.posts_holder {
    margin: 24px 0;
    background: transparent;
}
.widget_wpt .wpt-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    border-bottom: 1px solid #555;
}
.widget_wpt .wpt-tabs > li.tab_title {
    flex: 1;
    margin: 0;
    text-align: center;
    border: 0;
}
.widget_wpt .wpt-tabs > li.tab_title > a {
    display: block;
    padding: 8px 6px;
    font-size: 13px;
    font-weight: 500;
    color: #999;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.widget_wpt .wpt-tabs > li.tab_title > a:hover {
    color: #ebebeb;
}
.widget_wpt .wpt-tabs > li.tab_title.active > a {
    color: #ebebeb;
    border-bottom-color: #ebebeb;
}
.widget_wpt .inside {
    padding: 12px 0;
}
.widget_wpt .tab-content {
    display: none;
}
.widget_wpt .tab-content.active {
    display: block;
}
.widget_wpt ul.wpt-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 本番互換: 1 件 ~250-300px の大型レイアウト (thumb large 上 + body 下) で
   sidebar 全体高 1500-2000px を達成 */
.widget_wpt ul.wpt-posts > li.wpt-post-item {
    display: block;
    padding: 8px 0 14px;
    border-bottom: 1px solid #2a2a2a;
}
.widget_wpt ul.wpt-posts > li.wpt-post-item:last-child {
    border-bottom: 0;
}
.widget_wpt .wpt-post-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 8px;
}
.widget_wpt .wpt-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.widget_wpt .wpt-post-body {
    display: block;
}
.widget_wpt .wpt-post-title {
    color: #ebebeb;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}
.widget_wpt .wpt-post-title:hover {
    text-decoration: underline;
}
.widget_wpt .wpt-post-excerpt {
    margin: 4px 0 0;
    font-size: 11px;
    color: #aaa;
    line-height: 1.4;
}
.widget_wpt .wpt-post-date {
    font-size: 10px;
    color: #888;
    margin-top: 4px;
}
.widget_wpt ul.wpt-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.widget_wpt ul.wpt-tags > li {
    margin: 0;
}
.widget_wpt .wpt-tag-link {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    color: #aaa;
    background: #2a2a2a;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.widget_wpt .wpt-tag-link:hover {
    background: #444;
    color: #fff;
}
.widget_wpt .wpt-tag-count {
    color: #777;
    font-size: 10px;
}
.widget_wpt .clear {
    clear: both;
}

/* session14 BL-004 v3 sticky CSS は撤回 (本番再現原則違反のため、A 案で完全撤去)。
   本番 sidebar は CSS 上 position:static、高さ ~1980px なので scroll 追従でも viewport
   から消えない。Local も sidebar 高を増やして同じ見え方を実現する (タブ widget 件数増)。 */

/* ============================================================
   session15 BL-004 v5: 5 視覚差分の本番互換化
   probe-bl004-sidebar.js / probe-bl004-layout.js による実測値:
   ┌────────────────────┬──────────────┬──────────────┐
   │ 観点                │ PROD          │ LOCAL (旧)    │
   ├────────────────────┼──────────────┼──────────────┤
   │ sticky             │ 静的          │ sticky-top    │
   │ Hero とサイドバー    │ 縦に分離       │ y=0 で重なり   │
   │ widget separation   │ 4 ボックス分離 │ 連結          │
   │ カテゴリー li 高さ    │ 21px         │ 42px         │
   │ 記事内 YouTube      │ inline / 親 block│ 未調整      │
   └────────────────────┴──────────────┴──────────────┘
   PHP 側で sidebar-fix body クラスを除去済 (functions.php bagus_remove_sidebar_fix_on_blog)。
   ============================================================ */

/* (1) Hero とサイドバーの重なり解消:
   session15 v3 (2026-05-12): Hero の出力位置を main-section 内 → site-header 直後に変更
   (functions.php bagus_blog_hero_before_layout)。Hero が grid 外 (body 直下) になり、
   sidebar との重なり問題は構造的に解消。margin-top 補正不要。 */

/* (2) widget ボックス分離: PROD 互換 (bg=#2C2C2C / mb=10px / 縦 padding) */
body.blog .sub-section .widget,
body.blog .sub-section aside.widget {
    background-color: #2c2c2c !important;
    margin-bottom: 10px !important;
    padding: 10px 15px 15px !important;
    border-radius: 0;
    border: none;
}
body.blog .sub-section .widget h2,
body.blog .sub-section .widget h3,
body.blog .sub-section .widget h4,
body.blog .sub-section .widget h5,
body.blog .sub-section .widget .widget-title {
    color: #ebebeb;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 8px;
    padding-bottom: 0;
    border-bottom: 0;
}

/* (3) カテゴリー li 行高さ縮小 (PROD 21px に合わせる) */
body.blog .sub-section .widget_categories ul,
body.blog .sub-section .widget_nav_menu ul,
body.blog .sub-section .widget ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.blog .sub-section .widget_categories li,
body.blog .sub-section .widget_nav_menu li,
body.blog .sub-section .widget ul.menu li {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 21px !important;
    min-height: 0 !important;
    font-size: 13px;
    border-bottom: 1px dotted #3a3a3a;
}
body.blog .sub-section .widget_categories li:last-child,
body.blog .sub-section .widget_nav_menu li:last-child,
body.blog .sub-section .widget ul.menu li:last-child {
    border-bottom: none;
}
body.blog .sub-section .widget_categories li a,
body.blog .sub-section .widget_nav_menu li a,
body.blog .sub-section .widget ul.menu li a {
    display: block;
    padding: 0 !important;
    color: #cfcfcf;
    text-decoration: none;
    line-height: 21px !important;
}
body.blog .sub-section .widget_categories li a:hover,
body.blog .sub-section .widget_nav_menu li a:hover,
body.blog .sub-section .widget ul.menu li a:hover {
    color: #fff;
}

/* (4) 記事内 YouTube iframe を本文幅収め (PROD: inline / display:block でも幅収まる) */
body.blog .post iframe,
body.blog article iframe,
body.single article iframe {
    display: block;
    max-width: 100%;
    margin: 12px 0;
}
body.blog .post .wp-embed-wrapper,
body.blog article .wp-embed-wrapper {
    display: block;
    max-width: 100%;
}

/* (5) session15 v2: BL-1 メイン post-list の vk_post media 横カードを縦並びに変換
   probe-bl004-postlist.js 実測: LOCAL は `.vk_post.media` で flex-direction:row →
   thumbnail (.vk_post_imgOuter 303x190 左) + text body (.vk_post_body 右) の横カード。
   PROD は title (h3) + 日付 + 本文 の縦並び text-only (thumbnail なし)。
   User 指摘「ブログ記事の Youtube リンクが横に出てきている」= 左の YouTube thumbnail サムネが横並びで出る。
   解: thumbnail を非表示 + flex 解除 + body フル幅 */
body.blog .vk_posts-mainSection .vk_post.media .vk_post_imgOuter,
body.blog .vk_posts-mainSection .vk_post.media > .media-img {
    display: none !important;
}
body.blog .vk_posts-mainSection .vk_post.media {
    display: block !important;
}
body.blog .vk_posts-mainSection .vk_post.media .vk_post_body,
body.blog .vk_posts-mainSection .vk_post.media .media-body {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* (7) session15 v3 観点 2: BLOG 記事タイトル下の薄い border-bottom (Lightning 親由来
   rgba(0,0,0,0.06)) を消し、本番互換に。PROD は h2/h3 自体に border なし。 */
body.blog .vk_post .vk_post_title,
body.blog .vk_post h2.vk_post_title,
body.blog .vk_post h3.vk_post_title {
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    padding-bottom: 0 !important;
}
/* ============================================================
   session16 BL-004-D + NEW-016 / session17 下罫線位置の誤りを訂正
   PROD 真因 (probe-prod-title-border.js / probe-bl004-title-border-realcause.js):
     <article> 内
       <div class="blog_title_holder">
         <h3>タイトル</h3>
         <span class="blog-date">日付 | カテゴリ群</span>
           ↑ この span に border-bottom: 1px solid rgb(153,153,153)
             + padding-bottom: 20px + margin-bottom: 30px
       </div>
   つまり罫線は **タイトル + 日付 + カテゴリ メタ行の下 (= span.blog-date の bottom)** に
   描画されている (PROD スクショ /tmp/bagus-bl004-titlezoom/prod_pc_zoom.png 視覚確認 2026-05-13)。

   session17 初版で `.vk_post` 全体の border-bottom = 1px に修正したのは User 指示
   「記事の下じゃなくてブログタイトルの下」に違反 (§0-4 違反: PROD スクショ目視を省略)
   → 撤回。下罫線は LOCAL の `.vk_post_taxonomies` (カテゴリ dl) の bottom に
   移動して、PROD .blog-date と等価の「タイトル + 日付 + カテゴリ メタの下罫線」に。

   LOCAL DOM 順序:
     .vk_post_body > h5.vk_post_title → p.vk_post_date → dl.vk_post_taxonomies → .vk_post_excerpt
   罫線位置: dl.vk_post_taxonomies の border-bottom (= excerpt の直前)
   ============================================================ */
body.blog .vk_posts-mainSection .vk_post {
    border-top: 1px solid rgb(153, 153, 153) !important;
    border-bottom: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 0 !important;
    margin-bottom: 50px !important;
}
/* session17 v2: タイトル + 日付 + カテゴリ メタ部分の下に罫線
   (PROD .blog-date border-bottom と等価) */
body.blog .vk_posts-mainSection .vk_post_taxonomies {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgb(153, 153, 153) !important;
    padding-bottom: 20px !important;
    margin-bottom: 30px !important;
}

/* (8) session15 v3 観点 6: Recent (wpt) widget の記事項目間区切り線を見やすく
   旧色 #2a2a2a (dark bg と低コントラスト) → #4f4f4f に */
body.blog .widget_wpt .wpt-posts li,
body.blog .widget_wpt .wpt-post-item {
    border-bottom: 1px solid #4f4f4f !important;
    padding: 8px 0 !important;
}
body.blog .widget_wpt .wpt-posts li:last-child {
    border-bottom: none !important;
}

/* (9) session15 v3 観点 7: Tags タブのコンテンツが clip されないように
   tab-content の max-height/overflow 制約を明示的に解除 */
body.blog .widget_wpt .tab-content,
body.blog .widget_wpt #tags-tab-content {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}
body.blog .widget_wpt .wpt-tags {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
body.blog .widget_wpt .wpt-tags li {
    display: inline-block !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}
body.blog .widget_wpt .wpt-tag-link {
    display: inline-block !important;
    padding: 2px 6px !important;
    background: #3a3a3a !important;
    color: #ddd !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    border-radius: 2px !important;
    text-decoration: none !important;
}

/* (11) session15 v3 観点 3: 記事タイトル下に category 一覧を表示
   loop-item.php override で display_taxonomies=true → VK_Component_Posts は記事末尾に
   `<div class="vk_post_taxonomies">` を出力する。
   v3.1 修正: flex order で並び替えると 84 個の <br>/<p> も flex item になり title が
   末尾に押し下げられる現象 (titleY=1290 で確認)。flex は使わず、taxonomies 要素のみ
   margin-top:-N で title 直下に視覚的に引き上げる方式に変更。 */
body.blog .vk_post .vk_post_taxonomies {
    margin: 4px 0 12px;
    font-size: 12px;
    color: #aaa;
}
body.blog .vk_post .vk_post_taxonomy_title { display: none; }
body.blog .vk_post .vk_post_taxonomy_terms { display: inline; }
body.blog .vk_post .vk_post_taxonomy_terms a {
    color: #cfcfcf;
    text-decoration: none;
}
body.blog .vk_post .vk_post_taxonomy_terms a:hover { color: #fff; }
body.blog .vk_post dl.vk_post_taxonomy {
    margin: 0;
    display: inline;
}

/* (10) session15 v3 観点 5: BLOG ページネーション (Previous/Next) スタイル */
body.blog .bagus-sidebar-pagination {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background-color: #2c2c2c;
    margin-bottom: 10px;
    border-top: 1px solid #4f4f4f;
}
body.blog .bagus-sidebar-pagination a {
    color: #cfcfcf;
    text-decoration: none;
    font-size: 12px;
}
body.blog .bagus-sidebar-pagination a:hover {
    color: #fff;
}

/* (6) session15 v2: sidebar 検索窓を PROD サイズに縮小
   probe-bl004-remaining.js 実測: LOCAL input h=46 / fontSize 16px / padding 12.8px 16px → 過大。
   PROD search button h=30 で input も h=30 想定。h 30 / padding 4px 8px / fontSize 13px に。 */
body.blog .sub-section .widget_search input[type="search"],
body.blog .sub-section .widget_search input[type="text"],
body.blog .sub-section .widget_search input[name="s"] {
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}
body.blog .sub-section .widget_search input[type="submit"],
body.blog .sub-section .widget_search button,
body.blog .sub-section .widget_search .search-submit {
    height: 30px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   NEW-017 (session18 PROD 互換版): BLOG single 記事末尾の SNS シェアバー
   PROD (Central + Ninja Shere) 互換: フルワイドカラフル帯型 7 ボタン
   (FB/TW/LINE/B!/G+/メール/その他) を display:table; table-layout:fixed で
   均等分割。各セルに地色、アイコンを白抜きで中央表示、テキストラベルは非表示。
   PROD probe 値: padding 6px 0 / border-radius 0 / 7 色は下記。
   MODIFIED: 20260513 - session17 正方形ボタン版を PROD 計測値ベースで再実装
   ============================================================ */
.bagus-post-share {
    margin: 32px 0 24px;
    padding: 16px 0;
    border-top: 1px solid #3a3a3a;
}
.bagus-post-share__list {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bagus-post-share__list > li {
    display: table-cell;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}
.bagus-post-share__btn {
    display: block;
    width: 100%;
    padding: 6px 0;
    color: #fff !important;
    text-align: center;
    text-decoration: none !important;
    border-radius: 0;
    line-height: 1;
    box-sizing: border-box;
    transition: opacity 0.2s;
}
.bagus-post-share__btn:hover {
    opacity: 0.85;
    color: #fff !important;
    text-decoration: none !important;
}
/* アイコンはボタン中央。テキストラベル <span> は a11y のため非表示クラスで隠す */
.bagus-post-share__btn i {
    font-size: 16px;
    line-height: 1;
    color: #fff;
}
.bagus-post-share__btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}
/* PROD 計測値 (Result file: task-new-017-prod-css-probe.md) */
.bagus-post-share__fb     { background-color: #3B5998; }
.bagus-post-share__tw     { background-color: #55ACEE; }
.bagus-post-share__line   { background-color: #00C300; }
.bagus-post-share__hatena { background-color: #008FDE; }
.bagus-post-share__gplus  { background-color: #DC4E41; }
.bagus-post-share__email  { background-color: #7E7E8A; }
.bagus-post-share__other  { background-color: #E4E4E4; color: #1d1d1f !important; }
.bagus-post-share__other:hover { color: #1d1d1f !important; }
.bagus-post-share__other i { color: #1d1d1f; }
@media (max-width: 640px) {
    .bagus-post-share__btn { padding: 8px 0; }
    .bagus-post-share__btn i { font-size: 15px; }
}

/* ============================================================
   BL-004-A (session16 第 2 弾): Recent ウィジェット内 Prev/Next paging
   ============================================================ */
body.blog .bagus-recent-paging,
body.blog .bagus-popular-paging {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #4f4f4f;
}
body.blog .bagus-recent-paging a,
body.blog .bagus-popular-paging a {
    color: #ebebeb !important;
    text-decoration: none !important;
    font-size: 13px;
    padding: 4px 8px;
}
body.blog .bagus-recent-paging a:hover,
body.blog .bagus-popular-paging a:hover {
    color: #ffffff !important;
}
body.blog .bagus-recent-paging a[aria-disabled="true"],
body.blog .bagus-popular-paging a[aria-disabled="true"] {
    color: #555 !important;
    pointer-events: none;
    cursor: default;
}

/* ============================================================
   NEW-048: 検索結果カードタイトル可読性 (PROD 互換)
   ------------------------------------------------------------
   PROD: rgb(235,235,235) on rgb(44,44,44) — コントラスト 11.71:1
   LOCAL (修正前): #333 on rgb(10,10,10) — コントラスト 1.57:1 (AA 未達)
   修正方針: body.search-results にスコープを限定し、Lightning デフォルト
   #333 を PROD 互換 #ebebeb に上書き。
   PROD 厳密互換: hover/focus でも色は変えない (PROD spec)。
   副作用回避: body.search-results 限定 (他 archive / BLOG への波及なし)。
   ============================================================ */
body.search-results .vk_post .vk_post_title a,
body.search-results .vk_post .vk_post_title a:visited {
    color: rgb(235, 235, 235);
}
body.search-results .vk_post .vk_post_title a:hover,
body.search-results .vk_post .vk_post_title a:focus {
    color: rgb(235, 235, 235);
}

/* ============================================================
   NEW-053 (session20 後段): 個別記事の Prev/Next を PROD .portfolio_prev / .portfolio_next 互換に
   - Lightning 親 .vk_posts.next-prev (カード形式 2 列) は _g3/template-parts/next-prev.php
     を子テーマで override し、シンプルテキストリンクに置換 (DOM レベル)
   - 本 CSS はシンプル prev/next の見た目を整える
   ============================================================ */
.post-nav-portfolio-style.portfolio_pagination_holder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    margin: 40px 0 20px;
    border-top: 1px solid #eee;
    font-size: 14px;
}
.post-nav-portfolio-style .portfolio_prev,
.post-nav-portfolio-style .portfolio_next {
    flex: 1;
}
.post-nav-portfolio-style .portfolio_next {
    text-align: right;
}
.post-nav-portfolio-style a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.post-nav-portfolio-style a:hover {
    text-decoration: underline;
}

/* NEW-048 session21: vk_post_imgOuter_img の画面外配置を解除
 * Lightning vk_post の sticky/lazy-placeholder CSS で position:absolute; left:-9999px;
 * が適用され、IntersectionObserver が画面外と判定して loading=lazy で fetch 発火しない問題。
 * search/archive 共通で適用 (loop-item.php override 経路でも保険として効かせる)。
 * A-024 仮説 (uploads 未同期) は撤回、真因は本 CSS off-screen 配置。
 */
.vk_post_imgOuter_img {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}
.vk_post_imgOuter_link {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* NEW-048 session22: 検索結果カードの上半分黒問題を解消
 * 真因 (probe-runner 確定): Lightning `.vk_post_imgOuter.media-img` コンテナが height=514px
 * (overflow:hidden + paddingTop:1px + height:513.594px) で固定されており、内部の img が
 * 自然サイズ 243px しか描画されないため上 270px が黒空間として残る。
 * PROD は `.image` div が img と等しい h=243px (黒空間 0)。
 * LOCAL の `.vk_post_imgOuter.media-img` の固定高さを解除して img と同じ自然サイズに揃える。
 */
/* NEW-048 session22 final: より specific な selector で height 強制解除
 * MODIFIED: 20260513 - 旧 (line 3686-3694) は Lightning 親の specific ルール
 * (.vk_post.media .vk_post_imgOuter / .vk_posts-mainSection .vk_post .vk_post_imgOuter)
 * に specificity で負けて height:512px が残存。階層を増やして勝てる selector を追加。
 */
body.search .vk_posts-mainSection .vk_post .vk_post_imgOuter.media-img,
body.search-results .vk_posts-mainSection .vk_post .vk_post_imgOuter.media-img,
body.home .vk_posts-mainSection .vk_post .vk_post_imgOuter.media-img,
body.archive .vk_posts-mainSection .vk_post .vk_post_imgOuter.media-img,
.vk_post.media .vk_post_imgOuter.media-img,
.vk_posts-mainSection .vk_post .vk_post_imgOuter.media-img,
.vk_post_imgOuter.media-img {
    height: auto !important;
    padding-top: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}
/* 内部 img の自然 height で表示 */
.vk_post.media .vk_post_imgOuter.media-img img,
.vk_posts-mainSection .vk_post .vk_post_imgOuter.media-img img,
.vk_post_imgOuter.media-img img.vk_post_imgOuter_img {
    height: auto !important;
    width: 100% !important;
    object-fit: contain !important;
    position: static !important;
}
/* NEW-048 session22 FINAL: VK Block の ::before 疑似要素 (padding-top: 56.25% aspect-ratio hack) を無効化
 * これがコンテナの上に 267px の padding 余白を作り「上半分黒」の真因だった。
 * `.vk_post_imgOuter.media-img::before` に padding-top 0 + content none を強制適用。
 */
.vk_post.media .vk_post_imgOuter.media-img::before,
.vk_posts-mainSection .vk_post .vk_post_imgOuter.media-img::before,
.vk_post_imgOuter.media-img::before {
    padding-top: 0 !important;
    content: none !important;
    display: none !important;
}

/* NEW-050 B 案 (session22): page-header を BLOG single でフルワイド Hero 装飾
   MODIFIED: 20260513 - 旧 .title.has_fixed_background 自前 Hero (session21) を廃止し、
   Lightning 標準 <header class="page-header"> をフルワイド Hero に装飾する方針に変更。 */
/* NEW-050 session22 final: page-header フルワイド Hero (PC + SP 厳密互換)
 * MODIFIED: 20260513 - 旧 body.single-post .page-header (session22) は h1 が
 * Lightning の他ルール (font-size:20px, color:#e0e0e0) に specificity で負け、
 * SP min-height も h=179 まで縮んでいた。header/div 要素付き selector + !important で強化。
 */
body.single-post header.page-header,
body.single-post div.page-header {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    background: #2c2c2c !important;
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 0 !important;
}
body.single-post header.page-header h1,
body.single-post div.page-header h1,
body.single-post header.page-header .page-header-title,
body.single-post div.page-header .page-header-title {
    color: #ffffff !important;
    font-size: 45px !important;
    text-align: center !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
    background: transparent !important;
    width: auto !important;
    line-height: 1.2 !important;
}
/* BLOG single の記事個別タイトル + 日付 (bagus_inject_blog_single_meta 出力) */
body.single-post .blog_title_holder.bagus-blog-single-meta {
    padding: 30px 0 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
body.single-post .blog_title_holder.bagus-blog-single-meta .entry-title {
    font-size: 28px;
    margin: 0 0 10px;
}
body.single-post .blog_title_holder.bagus-blog-single-meta .post-info {
    color: #888;
    font-size: 14px;
}
@media (max-width: 767px) {
    body.single-post header.page-header,
    body.single-post div.page-header {
        min-height: 150px !important;
        padding: 20px 0 !important;
    }
    body.single-post header.page-header h1,
    body.single-post div.page-header h1,
    body.single-post header.page-header .page-header-title,
    body.single-post div.page-header .page-header-title {
        font-size: 28px !important;
    }
}

/* NEW-017 B 案 (session22): 「その他」ドロップダウン UI (現役 SNS のみ) */
.bagus-post-share__other-wrap {
    position: relative;
}
.bagus-post-share__other-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 160px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 4px 0;
}
.bagus-post-share__other-menu--open {
    display: block;
}
.bagus-post-share__other-menu-item {
    display: block;
    padding: 8px 14px;
    color: #1d1d1f !important;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    background: #fff;
    text-align: left;
}
.bagus-post-share__other-menu-item:hover {
    background: #f5f5f5;
    color: #1d1d1f !important;
    text-decoration: none !important;
}
.bagus-post-share__other-menu-item i {
    margin-right: 8px;
    color: #555;
    width: 14px;
    text-align: center;
}

/* NEW-057 (session22): news CPT 単体記事のスタイル */
body.single-news .bagus-news-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #2c2c2c;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.single-news .bagus-news-hero .page-header-title {
    color: #fff;
    font-size: 48px;
    text-align: center;
    letter-spacing: 0.1em;
    margin: 0;
}
body.single-news .bagus-news-entry__title {
    font-size: 28px;
    text-transform: uppercase;
    margin: 30px 0 10px;
}
body.single-news .bagus-news-entry__date {
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
}
/* Lightning entry-meta (icons + 更新日時 + author) を本 CPT で隠す */
body.single-news .entry-meta { display: none !important; }
/* vk-mobile-nav-menu-btn を PC で非表示 */
@media (min-width: 768px) {
    body.single-news #vk-mobile-nav-menu-btn { display: none !important; }
}
/* sidebar の sub-section 余分マージン調整 */
body.single-news .sub-section {
    margin-top: 30px;
}
@media (max-width: 767px) {
    body.single-news .bagus-news-hero { min-height: 150px; }
    body.single-news .bagus-news-hero .page-header-title { font-size: 32px; }
}

/* NEW-056 session21: parts_page single SHOPPING PAGE 見出し罫線 + column padding */
body.single-parts_page .column1 h4 {
    border-bottom: 1px solid rgb(85, 85, 85) !important;
    background: transparent !important;
    padding: 0 0 6px 0 !important;
    margin: 0 0 12px 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 16px;
    color: #333;
    display: block;
}
body.single-parts_page .column_inner {
    padding-right: 13px !important;
}
/* NEW-056 session21 追加修正: LOCAL の .info が display:flex で h4 が縦組み (710px) に
 * なっていた。PROD は display:block。Lightning または VK Blocks のどこかで .info に
 * flex が当てられているので、parts_page single ではこれを block に戻す。 */
/* CHK-B 再発 (2026-05-30): PROD parts_page .info は padding: 0 0 30px / border:none。
 * LOCAL 既定の padding:8px 0 + border-bottom があると SHOPPING PAGE と About が
 * 8px ずれる原因 (info 高さが異なり右カラム About の y=1106、左カラム SHOPPING PAGE の y=1114 で乖離)。
 * 共通 .info ルール (style.css:2461) を PROD parts/portfolio 値に上書き。 */
body.single-parts_page .portfolio_detail .info {
    display: block !important;
    padding: 0 0 30px;
    border-bottom: 0;
}
/* CHK-7① 20260528: portfolio_page single も PROD は .info が display:block の
 * 縦積み。共通ルール (style.css:2444 .portfolio_detail .info{display:flex}) が
 * 全 CPT に効くため portfolio_page 用 override が無く flex の横2カラムで崩れていた。
 * parts_page (上) と同じく block に戻して PROD 互換にする。
 * CHK-D 再発 (2026-05-30): portfolio も PROD は padding: 0 0 30px / border:none。 */
body.single-portfolio_page .portfolio_detail .info {
    display: block !important;
    padding: 0 0 30px;
    border-bottom: 0;
}
/* CHK-7② 20260528: portfolio_page single の column1 (.portfolio_detail 直後) に
 * 追加した「カスタムマシン一覧」戻りリンク (.custom-link > a.button.tiny)。
 * 既存の .button 装飾は .entry-content/.post_content スコープ限定でこの位置に
 * 効かないため、PROD 互換 (灰背景 .button.tiny + fa-motorcycle) を専用に与える。 */
body.single-portfolio_page .custom-link {
    margin: 16px 0 0;
}
/* CHK-7② 20260528 再修正: PROD 計測 (background rgb(85,85,85)=#555 / display:block /
 * padding 12px 0 / width 291px = column1 全幅 / text-align center) に合わせ、
 * inline-block の狭い濃色ボタンから全幅バー状ブロックボタンへ変更。
 * before: display:inline-block; padding:8px 16px; background-color:#2c2c2c; (幅182px) */
body.single-portfolio_page .custom-link a.button.tiny {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #555;
    border-radius: 3px;
    white-space: nowrap;
}
body.single-portfolio_page .custom-link a.button.tiny:hover {
    color: #fff;
    background-color: #333;
}
body.single-portfolio_page .custom-link a.button.tiny i.fa {
    margin-right: 6px;
    color: #fff;
}
/* NEW-056 session21 追加修正 v2: PC で .column1 が 2625px に伸長する別問題。
 * 親 `.two_columns_33_66.portfolio_container` が LOCAL=flex / PROD=block で、
 * flex 伸長により左 column1 が右カラム高さに引き上げられていた。
 *
 * NEW-056 session21 追加修正 v3 (verification-enforcer NO-GO 対応):
 * v2 の `display: block` 化で 2 カラムグリッドが縦積みに崩壊した。
 * PROD (Central) は float: left + width % で 33/66 横並びを実現していた
 * (Central css/stylesheet2.css:1280-1305)。Lightning では Central CSS が
 * 読み込まれないため、子テーマで Central と同等の float CSS を移植する。
 */
body.single-parts_page .portfolio_container.two_columns_33_66,
body.single-parts_page .portfolio_container.two_columns_66_33 {
    display: block !important;
    width: 100%;
}
body.single-parts_page .portfolio_container.two_columns_33_66::after {
    content: "";
    display: table;
    clear: both;
}
body.single-parts_page .portfolio_container.two_columns_33_66 > .column1 {
    width: 33.33% !important;
    float: left !important;
    box-sizing: border-box;
}
body.single-parts_page .portfolio_container.two_columns_33_66 > .column2 {
    width: 66.66% !important;
    float: left !important;
    box-sizing: border-box;
}
body.single-parts_page .portfolio_container.two_columns_33_66.grid2 > .column1 > .column_inner {
    padding: 0 40px 0 0;
}
body.single-parts_page .portfolio_container.two_columns_33_66.grid2 > .column2 > .column_inner {
    padding: 0 0 0 40px;
}
/* SP では PROD と同じく縦積みに戻す (元から block) */
@media (max-width: 767px) {
    body.single-parts_page .portfolio_container.two_columns_33_66 > .column1,
    body.single-parts_page .portfolio_container.two_columns_33_66 > .column2 {
        width: 100% !important;
        float: none !important;
    }
}
body.single-parts_page .all-parts-button-wrap {
    text-align: center;
    margin: 20px 0;
}
body.single-parts_page .all-parts-button {
    display: inline-block;
    padding: 12px 30px;
    background: #2c2c2c;
    color: #fff;
    text-decoration: none;
    border-radius: 0;
    letter-spacing: 0.1em;
}
body.single-parts_page .all-parts-button:hover {
    background: #555;
    color: #fff;
}

/* NEW-051 session22 (revised after AFTER-probe PARTIAL_FAIL):
 * BLOG archive は Lightning では `body.blog` クラス (is_home() の挙動)。
 * session14 が `body.blog .sub-section .widget` に対して padding/bg/color を強く指定済。
 * その上書きが必要なので `body.blog` セレクタを追加 + `!important` 強化。
 * BLOG single (`body.single-post`) と TOP (`body.home`) も同条件で揃える。
 */
body.home .sub-section .widget,
body.home .sub-section aside.widget,
body.blog .sub-section .widget,
body.blog .sub-section aside.widget,
body.single-post .sub-section .widget,
body.single-post .sub-section aside.widget {
    padding: 10px 10px 5px !important;
    margin: 0 0 10px !important;
    color: #ebebeb !important;
}
body.home .sub-section .widget ul,
body.home .sub-section aside.widget ul,
body.blog .sub-section .widget ul,
body.blog .sub-section aside.widget ul,
body.single-post .sub-section .widget ul,
body.single-post .sub-section aside.widget ul {
    margin: 10px 0 !important;
}
body.home .sub-section .widget ul li,
body.home .sub-section aside.widget ul li,
body.blog .sub-section .widget ul li,
body.blog .sub-section aside.widget ul li,
body.single-post .sub-section .widget ul li,
body.single-post .sub-section aside.widget ul li {
    margin: 0 0 5px !important;
}
body.home .sub-section .widget ul li a,
body.home .sub-section aside.widget ul li a,
body.blog .sub-section .widget ul li a,
body.blog .sub-section aside.widget ul li a,
body.single-post .sub-section .widget ul li a,
body.single-post .sub-section aside.widget ul li a {
    padding: 0 !important;
    border-bottom: 0 !important;
    color: inherit !important;
}
/* PROD には .widget-title.sub-section-title 装飾がないため非表示 */
body.home .sub-section .widget-title.sub-section-title,
body.home .sub-section aside.widget .widget-title.sub-section-title,
body.blog .sub-section .widget-title.sub-section-title,
body.blog .sub-section aside.widget .widget-title.sub-section-title,
body.single-post .sub-section .widget-title.sub-section-title,
body.single-post .sub-section aside.widget .widget-title.sub-section-title {
    display: none !important;
}
/* SP: PROD は font-size 14px、LOCAL Lightning は 12.25px に縮小されている */
@media (max-width: 767px) {
    body.home .sub-section .widget ul li,
    body.home .sub-section aside.widget ul li,
    body.blog .sub-section .widget ul li,
    body.blog .sub-section aside.widget ul li,
    body.single-post .sub-section .widget ul li,
    body.single-post .sub-section aside.widget ul li {
        font-size: 14px !important;
    }
}

/* NEW-056 session22: parts_page single の About 見出し + OPTION 見出しを PROD 互換に
 * probe-runner 確定: .portfolio_single_text_holder > h4 (About) は LOCAL で border-bottom 未指定、
 * 既存 style.css:2369 の uppercase + color #f5f5f5 ルールが破壊要因。
 * body.single-parts_page スコープで > 直接子セレクタ + 高優先度で上書き。
 */
body.single-parts_page .portfolio_single_text_holder > h4 {
    border-bottom: 1px solid #555 !important;
    padding: 0 0 6px 0 !important;
    margin: 0 0 14px 0 !important;
    color: #999 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background: transparent !important;
}
body.single-parts_page .portfolio_single_text_holder > h5.subtitle {
    border-bottom: 1px solid #999 !important;
    padding: 0 0 6px 0 !important;
    margin: 57px 0 0 0 !important;
    font-size: 19px !important;
    font-weight: 300 !important;
    color: #ebebeb !important;
}
@media (max-width: 767px) {
    body.single-parts_page .portfolio_single_text_holder > h5.subtitle {
        margin-top: 33.6px !important;
    }
}

/* ============================================================
   NEW-051 session23 P1-B: Bridge 互換 sidebar 大手術
   PROD (Bridge 旧テーマ) の widget は `<div class="widget ... posts_holder">` +
   `<h5>...</h5>` 構造。session22 は `body.blog .sub-section .widget` ベースで対応
   していたが DOM 構造差で pixelmatch 46-49% 残存。本書き換えで <aside> → <div>
   に揃え、CSS も `.widget.posts_holder` ベースで統一する。

   設計意図:
   - 親テーマ標準 `.widget-title.sub-section-title` 装飾は Bridge には存在しないため非表示。
   - PROD computed style 値:
       padding: 10px 10px 5px / margin: 0 0 10px / color: #ebebeb
       ul: margin 10px 0 / li: margin 0 0 5px / a: padding 0; border 0
       SP fontSize: 14px
   - session22 で残した `body.blog .sub-section .widget` セレクタは下位レベルの
     specificity 強化として残置 (color/font-size の重複は問題なし)。本ルールが
     より specific な `.widget.posts_holder` を優先する設計。
   ============================================================ */
.widget.posts_holder {
    padding: 10px 10px 5px !important;
    margin: 0 0 10px !important;
    color: #ebebeb !important;
    background-color: #2c2c2c !important;
}
.widget.posts_holder h5 {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #ebebeb !important;
    font-weight: normal !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}
.widget.posts_holder ul {
    margin: 10px 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}
.widget.posts_holder ul li {
    margin: 0 0 5px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}
.widget.posts_holder ul li a {
    padding: 0 !important;
    border-bottom: 0 !important;
    color: #ebebeb !important;
}
/* Lightning 親テーマ装飾要素 `.widget-title.sub-section-title` は Bridge に存在しないため非表示 */
.widget.posts_holder .widget-title.sub-section-title,
.widget.posts_holder > .widget-title {
    display: none !important;
}

@media (max-width: 991px) {
    .widget.posts_holder ul li {
        font-size: 14px !important;
    }
    .widget.posts_holder ul li a {
        font-size: 14px !important;
    }
}

/* ============================================================
   NEW-051 session23 P1-B-4: PROD /home/blog/ sidebar ミニマル装飾化
   (P1-B-3 の罫線・実線下線・active default を rollback)
   probe-runner session23 P1-B-3 で PROD には罫線・active tab なしと判明。
   P1-B-3 で追加した装飾は PROD から離れる方向だったため rollback。
   - 残す: h5 ::before icon (PROD/LOCAL とも描画あり)
   - 削除: h5 border-bottom / li border-bottom / wpt force initial
   - 修正: 検索ボタン bg #555 → #666 (PROD 値)
   - MODIFIED: 2026-05-13 - P1-B-3 過剰装飾の rollback (PROD ミニマル化)
   ============================================================ */

/* (1) h5 タイトル左の check-square icon (Font Awesome)
   PROD は FA4 'FontAwesome' で塗りつぶし、LOCAL は FA6 で中抜きグリフ。
   フォントバージョン差はグリフ違いとして許容 (icon 描画自体は両方発火)。 */
.widget.posts_holder > h5::before,
body.blog .sub-section .widget.posts_holder > h5::before {
    content: '\f14a' !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    margin-right: 6px !important;
    color: inherit !important;
    display: inline-block !important;
}

/* (2) 検索ボタン (submit) 背景色: PROD #666 (P1-B-3 の #555 から PROD 値へ修正) */
.widget.widget_search.posts_holder input[type="submit"],
.widget.widget_search.posts_holder button[type="submit"],
.widget.widget_search.posts_holder .search-submit,
body.blog .sub-section .widget_search input[type="submit"],
body.blog .sub-section .widget_search button[type="submit"],
body.blog .sub-section .widget_search .search-submit {
    background-color: #666 !important;
    border-color: #666 !important;
    color: #fff !important;
}
.widget.widget_search.posts_holder input[type="submit"]:hover,
.widget.widget_search.posts_holder button[type="submit"]:hover,
.widget.widget_search.posts_holder .search-submit:hover,
body.blog .sub-section .widget_search input[type="submit"]:hover,
body.blog .sub-section .widget_search button[type="submit"]:hover,
body.blog .sub-section .widget_search .search-submit:hover {
    background-color: #888 !important;
    border-color: #888 !important;
}

/* ============================================================
   session23 P0-4: NEW-056 / NEW-058 PROD 互換ヒーロー見出し装飾
   - 対象: single-{parts,salebike,portfolio}_page の .portfolio_title_holder
   - PROD CSS 移植元: themes/central/css/stylesheet.css L1962-L1985
   - 装飾仕様: text-align:center / text-transform:uppercase / 罫線下線
   - MODIFIED: 2026-05-13 - NEW-056 enforcer NO-GO 解消 (左寄せ Lightning デフォルト → PROD 中央寄せ + uppercase)
   - L2282-L2307 の既存定義は body 黒背景前提 (#f5f5f5 白文字) で書かれていたが、
     PROD は白背景 + 黒文字 + 灰罫線。後勝ち上書きで PROD 互換に揃える。
   ============================================================ */

/* (1) コンテナ中央寄せ — PROD: text-align:center */
body.single-salebike_page .portfolio_title_holder,
body.single-parts_page .portfolio_title_holder,
body.single-portfolio_page .portfolio_title_holder {
    text-align: center;
    margin: 24px 0 0 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* (2) h1/h2: PROD 互換 - margin:0 0 20px 0 / uppercase / グレー文字 (#f5f5f5) / Oswald / 35px
   SEO Phase 2-A-4 (2026-05-24): H1 化に対応するため h1 / h2 両方を選択
   PROD 実測 (2026-05-24): body bg = rgb(5,5,5) / .portfolio_title_holder h2 color = rgb(235,235,235) / font-size 35px
   session23 P0-4 の「PROD は白背景 + 黒文字」判定は誤りで、Phase 2-A スクショ比較で「黒背景 + グレー文字」と確定。
   結果: color: #000 → color: #f5f5f5 (PROD 実測値に修正) */
body.single-salebike_page .portfolio_title_holder h1,
body.single-parts_page .portfolio_title_holder h1,
body.single-portfolio_page .portfolio_title_holder h1,
body.single-salebike_page .portfolio_title_holder h2,
body.single-parts_page .portfolio_title_holder h2,
body.single-portfolio_page .portfolio_title_holder h2 {
    margin: 0 0 20px 0;
    text-transform: uppercase;
    color: #f5f5f5;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    font-size: 35px;
}

/* (3) span (Category): PROD 互換
   PROD 実測 (2026-05-24 session27 _check-prod-category-css.js):
   - color: rgb(235,235,235) (= #ebebeb) ← 黒背景上のグレー文字
   - font-size: 14px / display: block
   session23 の color:#000 / font-size:13px は「白背景前提」の誤判定で実は黒背景。Phase 2-A 修正で PROD 実測値に揃え直す */
body.single-salebike_page .portfolio_title_holder > span,
body.single-parts_page .portfolio_title_holder > span,
body.single-portfolio_page .portfolio_title_holder > span {
    padding: 0 0 35px 0;
    margin: 0 0 45px 0;
    border-bottom: 1px solid #2c2c2c;
    display: block;
    color: #ebebeb;
    font-weight: 400;
    font-size: 14px;
}

/* (4) span.category (term name): PROD 互換ピル装飾
   PROD 実測: background-color: rgb(44,44,44) (=#2c2c2c) / padding: 2px 5px / font-weight: 600 / color: #ebebeb / font-size: 13px */
body.single-salebike_page .portfolio_title_holder span.category,
body.single-parts_page .portfolio_title_holder span.category,
body.single-portfolio_page .portfolio_title_holder span.category,
body.single-salebike_page .portfolio_title_holder span a,
body.single-parts_page .portfolio_title_holder span a,
body.single-portfolio_page .portfolio_title_holder span a {
    color: #ebebeb;
    background-color: #2c2c2c;
    padding: 2px 5px;
    font-weight: 600;
    font-size: 13px;
}

/* ============================================================
   session23 P0-5: CPT 単体ページ レイアウト整合 (PROD 互換)
   - 対象: single-{parts,salebike,portfolio}_page
   - PROD CSS 移植元: themes/central/bagus.css
     L567 (.single .portfolio_single margin), L1159 (.shop-link li),
     L1165 (.shop-link .button), L575 (.column_inner h4 = About 見出し),
     L1368 (@max-width:768px .single .portfolio_single margin-top)
   - 改修項目:
     A. Hero タイトル領域とヘッダーの被り解消 (PROD margin 120px PC / 20px SP 再現)
     B. SHOPPING PAGE 価格表 (.shop-link li / .shop-link .button) 装飾
     C. .button.tiny (FOR OVERSEAS 他) を PROD 互換 (#555 灰背景) で装飾
     D. About 見出し (.portfolio_single_text_holder h4) PROD 互換装飾
   - MODIFIED: 2026-05-13 - P0-5 session23 (User Image #1/#2/#3 指示反映)
   - User Image #1 で「FOR OVERSEAS 赤背景ボタン」と見えた要素は PROD 実態では
     #555 灰背景の .button.tiny (PROD bagus.css L1165 で確認)。PROD-truth に従い
     PROD の灰背景仕様で実装する (Image #1 はディスプレイ色味の見え方差と判断)。
   ============================================================ */

/* (A) Hero タイトル領域 上余白 — PROD .single .portfolio_single margin: 120px 0 70px 0
   ヘッダー overlay の下にタイトルを明確配置する。
   既存 L2281-2287 と L4159-4166 で .portfolio_title_holder の margin/padding を
   触っているが、ヘッダー clearance は親 .portfolio_single 側で確保する設計 (PROD 同) */
body.single-salebike_page .portfolio_single,
body.single-parts_page .portfolio_single,
body.single-portfolio_page .portfolio_single {
    margin: 120px 0 70px 0;
}

@media only screen and (max-width: 768px) {
    body.single-salebike_page .portfolio_single,
    body.single-parts_page .portfolio_single,
    body.single-portfolio_page .portfolio_single {
        margin-top: 20px;
    }
}

/* (B) SHOPPING PAGE 価格表 (.shop-link) — PROD bagus.css L1159 / L1165 互換 */
body.single-salebike_page .shop-link,
body.single-parts_page .shop-link,
body.single-portfolio_page .shop-link {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.single-salebike_page .shop-link li,
body.single-parts_page .shop-link li,
body.single-portfolio_page .shop-link li {
    margin-bottom: 20px;
    margin-left: 0;
    background-color: #2C2C2C;
    padding: 5px 10px 10px;
    list-style: none;
}
body.single-salebike_page .shop-link li p,
body.single-parts_page .shop-link li p,
body.single-portfolio_page .shop-link li p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.6em;
    color: #EBEBEB;
}
body.single-salebike_page .shop-link li .right,
body.single-parts_page .shop-link li .right,
body.single-portfolio_page .shop-link li .right {
    display: inline-block;
    float: right;
    text-align: right;
}
body.single-salebike_page .shop-link li .tax,
body.single-parts_page .shop-link li .tax,
body.single-portfolio_page .shop-link li .tax {
    font-size: 11px;
    color: #aaa;
    margin: 0 2px;
}
body.single-salebike_page .shop-link li .price,
body.single-parts_page .shop-link li .price,
body.single-portfolio_page .shop-link li .price {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 1px;
}
body.single-salebike_page .shop-link li .bold,
body.single-parts_page .shop-link li .bold,
body.single-portfolio_page .shop-link li .bold {
    font-weight: 700;
    color: #fff;
}
body.single-salebike_page .shop-link li i.fa,
body.single-parts_page .shop-link li i.fa,
body.single-portfolio_page .shop-link li i.fa {
    color: #f5c542;
    margin-right: 4px;
}

/* .shop-link .button — PROD bagus.css L1165 互換 (#555 灰背景, 中央寄せ, block) */
body.single-salebike_page .shop-link .button,
body.single-parts_page .shop-link .button,
body.single-portfolio_page .shop-link .button {
    font-family: 'Open Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
    font-size: 12px;
    margin-left: 0;
    margin-top: 8px;
    padding: 8px 10px;
    display: block;
    text-align: center;
    white-space: nowrap;
    background-color: #555;
    color: #fff;
    clear: both;
    text-decoration: none;
    border-radius: 2px;
}
body.single-salebike_page .shop-link .button:hover,
body.single-parts_page .shop-link .button:hover,
body.single-portfolio_page .shop-link .button:hover {
    background-color: #555;
    color: #fff;
    opacity: 0.85;
}
body.single-salebike_page .shop-link .button i.fa,
body.single-parts_page .shop-link .button i.fa,
body.single-portfolio_page .shop-link .button i.fa {
    margin-right: 6px;
    color: #fff;
}

/* (C) About 見出し (.portfolio_single_text_holder h4) — PROD bagus.css L575 互換
   既存 L2369-2375 が h4 を上書きしているが、本ルールは後勝ち上書きで
   PROD 互換 (border-bottom #555 / padding-bottom 6px / font-size 13px / #999) に揃える */
body.single-salebike_page .portfolio_single_text_holder h4,
body.single-parts_page .portfolio_single_text_holder h4,
body.single-portfolio_page .portfolio_single_text_holder h4 {
    border-bottom: 1px solid #555;
    padding-bottom: 6px;
    font-size: 13px;
    color: #999;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 16px;
    font-family: 'Open Sans', 'ヒラギノ角ゴ Pro W3', sans-serif;
}

/* 左カラム .portfolio_detail .info h4 (SHOPPING PAGE 見出し他) も同じ装飾 */
body.single-salebike_page .portfolio_detail .info h4,
body.single-parts_page .portfolio_detail .info h4,
body.single-portfolio_page .portfolio_detail .info h4 {
    border-bottom: 1px solid #555;
    padding-bottom: 6px;
    font-size: 13px;
    color: #999;
    font-weight: bold;
    text-transform: uppercase;
}

/* CHK-I/J (2026-05-30): salebike では .info の h4 (年式 / 車検 / 走行距離 / 排気量) を
 * inline 表示 + 装飾削減で PROD 互換にする。
 * PROD HTML: <div class="info"><h4>年式</h4><span>2006年 イエローボール</span></div>
 *   → 単一 36px 行で「年式 2006年 イエローボール」のように表示。
 * LOCAL は uppercase + border-bottom + bg chip 装飾で 47px に膨張していた。
 * 上位の generic 規則 (L4601-4610) を inline で上書き。 */
/* CHK-K (2026-05-30): salebike `.info` (年式/車検/走行距離/排気量) を PROD の 2 カラム
 * レイアウト (label 左 inline-block + value 右 float:right + border-bottom 行区切り) に。
 * PROD probe 実測:
 *   - .info h4 display=inline-block, x=label開始位置
 *   - .info span display=block float=right (label と分離して右端へ)
 *   - 行区切り border-bottom #555 (qode 既存装飾) */
body.single-salebike_page .portfolio_detail .info h4 {
    display: inline-block;
    float: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100px; /* PROD 互換: ラベル列の縦ライン感を再現 */
    font-size: 14px;
    color: rgb(153, 153, 153); /* PROD #999 (v4 NO-GO fix: 値色との対比でラベル列視認性確保) */
    font-weight: 700; /* PROD bold (v4 NO-GO fix: 400 → 700) */
    text-transform: none;
    background: transparent;
    line-height: normal;
    vertical-align: top;
}
body.single-salebike_page .portfolio_detail .info > span {
    display: block;
    float: right;
    text-align: right;
    font-size: 14px;
    color: #ebebeb;
    line-height: normal;
}
/* 価格行 (.bagus-info-no-label) は label なし → span を float:none に戻して右寄せ */
body.single-salebike_page .portfolio_detail .info.bagus-info-no-label > span {
    float: none;
    display: inline;
}
body.single-salebike_page .portfolio_detail .info {
    padding: 6px 0;
    font-size: 14px;
    display: block;
    line-height: normal;
    color: #ebebeb;
    text-align: start;
    border-bottom: 1px solid #555;
    overflow: hidden; /* float clear */
}
body.single-salebike_page .portfolio_detail .info.bagus-info-no-label {
    text-align: right;
    border-bottom: 1px solid #555;
}
/* badges 行は border-bottom 不要 (PROD でも last-of-type は border なし相当) */
body.single-salebike_page .portfolio_detail .info.bagus-info-badges {
    border-bottom: none;
    text-align: right;
}
/* price / badges は CHK-E 既存 ルール (L2487+) で扱う。padding は PROD 互換に */
body.single-salebike_page .portfolio_detail .info.bagus-info-price,
body.single-salebike_page .portfolio_detail .info.bagus-info-badges {
    padding: 0 0 10px;
    font-size: 14px;
    display: block;
    text-align: right;
    line-height: normal;
}

/* session32: EVENTS / Bagus! / TOURING ページ (旧 page template blog-template-event/blog-template1)
 * を body.bagus-events-template class で scope。template ファイルは廃止し
 * the_content filter で grid を注入する方式に統一 (bagus_inject_blog_template_list)。
 * 旧 selector body.page-template-blog-template-event-php は body class を失うため使えない。
 *
 * CHK-H/N の暗灰背景・白字・セパレーター罫線は events 3 ページ共通で再現。
 */
body.bagus-events-template article.post {
    background-color: #2c2c2c;
    color: #ebebeb;
}
body.bagus-events-template article.post,
body.bagus-events-template article.post a,
body.bagus-events-template article.post h2,
body.bagus-events-template article.post h3,
body.bagus-events-template article.post h4,
body.bagus-events-template article.post h4 a,
body.bagus-events-template article.post .entry-title,
body.bagus-events-template article.post .vk_post_title,
body.bagus-events-template article.post .blog_text_holder,
body.bagus-events-template article.post .blog_text_holder a,
body.bagus-events-template article.post .blog_text_holder .text,
body.bagus-events-template article.post .text_inner,
body.bagus-events-template article.post .text_inner p,
body.bagus-events-template article.post .text_inner span,
body.bagus-events-template article.post .text_inner .blog-date,
body.bagus-events-template article.post .text_inner a {
    color: #ebebeb;
}
body.bagus-events-template article.post .blog_text_holder h4 {
    background: transparent;
    padding: 0;
    border: none;
}
body.bagus-events-template article.post .text_inner .blog-date {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgb(153, 153, 153);
}
body.bagus-events-template article.post .text_inner p {
    margin-top: 10px;
}
body.bagus-events-template article.post .blog_text_holder {
    padding-bottom: 28px;
}

/* CHK-O (2026-05-30): salebike .portfolio_detail の直前に車両名タイトル
 * <h5 class="name"> を挿入 (renderer 側で出力)。PROD probe v2 実測値:
 *   - PROD: rect 291x60 / fontSize 20px / fontWeight 500 / borderBottom 1px solid rgb(85,85,85)
 *           / paddingBottom 15px / marginBottom 5px
 *   - 位置: 写真の下、左カラム最上部 (.portfolio_detail の直前) */
body.single-salebike_page .portfolio_single h5.name,
body.single-parts_page .portfolio_single h5.name,
body.single-portfolio_page .portfolio_single h5.name {
    display: block;
    font-size: 20px;
    line-height: 22px;
    color: #ebebeb;
    font-weight: 500;
    margin: 0 0 5px 0;
    padding: 0 0 15px 0;
    border-bottom: 1px solid rgb(85, 85, 85);
    text-transform: none;
    text-align: left;
}

/* ============================================================
 * session23 P0-5b: NEW-056 残差 3 件修正
 * - SP の Lightning fixed header overlap 解消
 * - .shop-link button.tiny color / text-transform
 * ============================================================ */

/* (1) SP ヘッダー overlap 解消
 * P0-5c (2026-05-13): main セレクタが効かなかった (Lightning は <main> を出力せず
 * .portfolio_single が body 配下に直置きされている = DOM 実機確認済) ため、
 * .portfolio_single 自体の margin-top を上書きする方式に変更。
 * 既存 P0-5 (L4233-4239) の SP 定義 .portfolio_single { margin-top: 20px } を
 * body.single-*_page 具体化セレクタ + !important で上書きする。
 * fix header 80px + 余白 20px = 100px。
 */
@media (max-width: 991px) {
    body.single-parts_page .portfolio_single,
    body.single-portfolio_page .portfolio_single,
    body.single-salebike_page .portfolio_single {
        margin-top: 100px !important;
    }
}

/* (2)(3) FOR OVERSEAS / FC2 Shopping 等 button.tiny の color + text-transform 修正 */
body.single-parts_page .shop-link li a.button.tiny,
body.single-portfolio_page .shop-link li a.button.tiny,
body.single-salebike_page .shop-link li a.button.tiny {
    color: #ebebeb !important;
    text-transform: uppercase !important;
}
body.single-parts_page .shop-link li a.button.tiny:hover,
body.single-portfolio_page .shop-link li a.button.tiny:hover,
body.single-salebike_page .shop-link li a.button.tiny:hover {
    color: #ebebeb !important;
}

/* =====================================================================
   P0-6 (session23): TOP SP ヘッダー本番互換
   User Image #5 指示: SP ヘッダーは「左: Bagus! ロゴ画像 / 右: 猫 + FB + YT
   3 SNS のみ横並び」「ハンバーガーは header 行から分離し、SNS の下段
   (hero 画像上に overlay) に白い丸ボタンで配置」。
   既存 1813-1860 行の "ハンバーガーを SNS の左に置く" 方針を本セクションで
   上書きする。SP 解像度: 375 x 667 (iPhone) を主ターゲット、tablet 991px
   未満も同 break-point で適用。
   MODIFIED: 20260513 - P0-6 (session23) 追加
   ===================================================================== */
@media (max-width: 991px) {
    /* SNS 群 (global-nav-list) は右側に張り付け、ハンバーガーは除外 */
    #site-header .site-header-container > #vk-mobile-nav-menu-btn,
    #site-header #vk-mobile-nav-menu-btn,
    body #vk-mobile-nav-menu-btn {
        /* ハンバーガーを header から分離: header bottom (80px) + 余白 16px の
           hero 上に絶対配置。SNS と縦に分離するため重要 */
        position: fixed !important;
        top: 96px !important;
        right: 16px !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        background-image: url("/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg") !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 22px 22px !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
        z-index: 1000 !important;
        font-size: 0 !important; /* MENU テキスト非表示 */
        color: transparent !important;
        text-indent: -9999px !important;
        cursor: pointer !important;
    }
    /* open 状態 (vk-mobile-nav-menu-btn-on) で × アイコンに切替 */
    body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn-on,
    body #vk-mobile-nav-menu-btn.menu-open {
        background-image: url("/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-black.svg") !important;
    }

    /* SNS group は header 内 1 行右端へ。ハンバーガー除外したので
       1850-1855 の right:156px は無効化、SNS のみ右端に張り付ける */
    #site-header .global-nav,
    #site-header .global-nav-list {
        margin-right: 12px !important;
        padding-right: 0 !important;
    }
    /* SNS 3 個分 (約 36*3 + margin) のスペースだけ確保 */
    #site-header .global-nav-list > li.bagus-sns-item {
        margin: 0 2px !important;
    }
    /* 1850 行の "ハンバーガーを SNS group の左に配置 (right: 156px)" を
       本セクションが override (上の position:fixed/right:16px が勝つ) */
}

/* SP (<= 767px) ではより小さい丸ボタン + 位置微調整 */
@media (max-width: 767px) {
    body #vk-mobile-nav-menu-btn {
        top: 90px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        background-size: 20px 20px !important;
    }
}
/* =====================================================================
   /P0-6 (session23) END
   ===================================================================== */

/* =====================================================================
   session23 P0-7: SP ヘッダー固定 + メニュー overlay 全画面化
   User 指示:
   (1) SP のみヘッダー上部固定 (position: fixed)
   (2) メニュー開時に close ボタン (丸ハンバーガー) が overlay 下に隠れる
       問題解消 (z-index 9999 で前面化)
   (3) メニュー開時にオーバーレイ上部の隙間 (後ろの画面が透ける) を解消
       (#vk-mobile-nav を top:0 / height:100vh / bg 不透明で全画面化)
   DOM (LOCAL 取得 HTML L332):
   <div id="vk-mobile-nav-menu-btn" class="vk-mobile-nav-menu-btn">
   <div class="vk-mobile-nav vk-mobile-nav-drop-in" id="vk-mobile-nav">
     <nav class="vk-mobile-nav-menu-outer">
       <ul id="menu-main-menu-1" class="vk-menu-acc menu">
   MODIFIED: 20260513 - P0-7 (session23) 追加
   ===================================================================== */
@media (max-width: 991px) {
    /* (1) SP のみヘッダー上部固定 */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 100 !important;
        background-color: #000 !important; /* 透過防止 */
    }
    /* main コンテンツに header 高さ分の padding-top (header bottom 隠れ防止)
       parts_page / portfolio_page / salebike_page は P0-5/5c で
       .portfolio_single { margin-top: 120px / SP 100px } 既設定済なので除外 */
    body.home,
    body:not(.single-parts_page):not(.single-portfolio_page):not(.single-salebike_page) {
        padding-top: 80px;
    }

    /* (3) Lightning オーバーレイメニューを全画面化 (上部隙間解消)
       body.vk-mobile-nav-menu-btn-on / .vk-mobile-nav-menu-on 配下に限定。
       close 時は body class が外れて Lightning default の display:none に戻る。
       MODIFIED: 20260514 — close 後も overlay が残る不具合を修正 (selector 限定) */
    body.vk-mobile-nav-menu-btn-on #vk-mobile-nav,
    body.vk-mobile-nav-menu-on #vk-mobile-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: none !important;
        z-index: 200 !important;
        background-color: rgba(0, 0, 0, 0.95) !important; /* 後ろの画面遮蔽 */
        overflow-y: auto !important;
        padding-top: 90px !important; /* close ボタンと干渉しない位置にメニュー開始 */
        display: block !important;
    }
    /* close 時は overlay 非表示 (Lightning default 動作復帰) */
    body:not(.vk-mobile-nav-menu-btn-on):not(.vk-mobile-nav-menu-on) #vk-mobile-nav {
        display: none !important;
    }

    /* (2) close (×) ボタン (丸ハンバーガー) を overlay の前面に
       P0-6 の z-index:1000 では overlay (z-index:200) より上だが、
       本ルール z-index:9999 で確実に最前面 + position:fixed 維持 */
    body.vk-mobile-nav-menu-btn-on #vk-mobile-nav-menu-btn,
    body.vk-mobile-nav-menu-on #vk-mobile-nav-menu-btn,
    #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn-on,
    #vk-mobile-nav-menu-btn.menu-open {
        z-index: 9999 !important; /* overlay (200) より上 */
        position: fixed !important;
        top: 90px !important;
        right: 12px !important;
    }
}

@media (max-width: 767px) {
    /* SP 専用微調整 (close ボタン位置) */
    body.vk-mobile-nav-menu-btn-on #vk-mobile-nav-menu-btn,
    body.vk-mobile-nav-menu-on #vk-mobile-nav-menu-btn,
    #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn-on,
    #vk-mobile-nav-menu-btn.menu-open {
        top: 86px !important;
        right: 10px !important;
    }
}
/* =====================================================================
   /P0-7 (session23) END
   ===================================================================== */

/* ============================================================
   session23 P0-8: SP メニュー 文字色 + 子常時展開 + close 動作
   User 指示:
   (1) SP メニューが閉じない → z-index 99999 + isolation で確実化
   (2) メニュー名が薄い → color #fff + font-weight 500
   (3) PROD と乖離 (子 accordion 折りたたみ) → 子 sub-menu 常時展開 + indent
   ============================================================ */

@media (max-width: 991px) {

    /* ----- (3) 子 sub-menu 常時展開 + accordion 無効化 ----- */
    #vk-mobile-nav .sub-menu,
    #vk-mobile-nav ul.sub-menu,
    #vk-mobile-nav .menu-item-has-children .sub-menu {
        display: block !important;
        max-height: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* Lightning vk-menu-acc のアコーディオン icon / toggle ボタン 非表示 */
    #vk-mobile-nav .vk-menu-acc-toggle,
    #vk-mobile-nav .vk-menu-acc-icon,
    #vk-mobile-nav button.vk-menu-acc-toggle-btn,
    #vk-mobile-nav .menu-item-has-children > button,
    #vk-mobile-nav .menu-item-has-children > .vk-menu-acc-toggle {
        display: none !important;
    }

    /* ----- (2) メニュー文字色濃く + 大きく ----- */
    #vk-mobile-nav .menu-item a,
    #vk-mobile-nav ul li a,
    #vk-mobile-nav a {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 14px 20px !important;
        display: block !important;
        text-decoration: none !important;
    }
    /* 子メニュー a はインデント */
    #vk-mobile-nav .sub-menu .menu-item a,
    #vk-mobile-nav .sub-menu li a {
        padding-left: 40px !important;
        font-weight: 400 !important;
        font-size: 15px !important;
    }
    /* 区切り線 */
    #vk-mobile-nav .menu-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        list-style: none !important;
    }
    /* hover / active */
    #vk-mobile-nav .menu-item a:hover,
    #vk-mobile-nav .menu-item a:focus {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
    }

    /* ----- (1) close ボタン (丸ハンバーガー) を最前面・確実 click 化 ----- */
    #vk-mobile-nav-menu-btn,
    body #vk-mobile-nav-menu-btn,
    body.vk-mobile-nav-menu-btn-on #vk-mobile-nav-menu-btn,
    body.vk-mobile-nav-menu-on #vk-mobile-nav-menu-btn {
        z-index: 99999 !important;
        pointer-events: auto !important;
        isolation: isolate !important;
    }
    /* overlay は close ボタン領域 (top:80-140px / right:0-60px) を pointer-events で除外 */
    /* (z-index 比較で 99999 > 200 で十分のはずだが念のため二重対策) */

    /* メインメニュー container 自体の listing reset */
    #vk-mobile-nav ul,
    #vk-mobile-nav ul.menu,
    #vk-mobile-nav ul#menu-main-menu-1 {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
}
/* ============================================================
   /P0-8 (session23) END
   ============================================================ */

/* ============================================================
   session23 P1-B-6: NEW-051 tab widget 切替 + Prev/Next 装飾
   - tab-content の display を class active で切替 (inline style 削除と合わせて修正)
   - bagus-recent-paging の Prev/Next 装飾 (PROD 互換)
   - 1 ページ目で aria-disabled="true" の Prev を hide
   ============================================================ */

/* (1) tab-content 切替: active のみ display:block */
.widget.widget_wpt .tab-content,
.widget.widget_wpt.posts_holder .tab-content {
    display: none !important;
}
.widget.widget_wpt .tab-content.active,
.widget.widget_wpt.posts_holder .tab-content.active {
    display: block !important;
}

/* (2) tab_title 装飾 (PROD User Image #8 互換: 横並び 3 つ + active で強調) */
.widget.widget_wpt .wpt-tabs,
.widget.widget_wpt ul.wpt-tabs {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
    border-bottom: 1px solid #555 !important;
}
.widget.widget_wpt .tab_title {
    flex: 1 1 auto;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}
.widget.widget_wpt .tab_title a {
    display: block !important;
    padding: 8px 4px !important;
    text-align: center !important;
    color: #999 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    border-bottom: 0 !important;
}
.widget.widget_wpt .tab_title.active a {
    color: #ebebeb !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #ebebeb !important;
    margin-bottom: -1px !important;
}

/* (3) Prev/Next 装飾 */
.bagus-recent-paging {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid #444 !important;
    font-size: 12px !important;
}
.bagus-recent-paging__prev,
.bagus-recent-paging__next {
    color: #ebebeb !important;
    text-decoration: none !important;
    padding: 4px 10px !important;
    background-color: #555 !important;
    border-radius: 2px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-bottom: 0 !important;
}
.bagus-recent-paging__prev:hover,
.bagus-recent-paging__next:hover {
    background-color: #666 !important;
}
/* (4) 1 ページ目 (aria-disabled="true") の Prev を hide */
.bagus-recent-paging__prev[aria-disabled="true"],
.bagus-recent-paging__next[aria-disabled="true"] {
    visibility: hidden !important;
}
.bagus-recent-paging__status {
    color: #999 !important;
    font-size: 11px !important;
}

/* ============================================================
   /P1-B-6 (session23) END
   ============================================================ */

/* ============================================================
   session23 P0-10: NEW-058 .social-share PROD 互換装飾
   PROD: 黒背景 #2c2c2c + 横並び 3 ボタン (f SHARE / X TWEET / G+ SHARE)
   LOCAL は HTML 構造同一 (ul>li>a>i+span) だが CSS 装飾欠落で縦リスト表示
   PROD CSS: themes/central/css/stylesheet.min.css + themes/central/bagus.css
   ============================================================ */
.social-share {
    display: inline-block !important;
    width: auto !important;
    /* MODIFIED: 20260528 CHK-5 - margin-top:40px だと float:right の
       SHARE バーが float:left ボタンより 40px 下段に落ち同一行に乗らない。
       PROD は margin: 0 0 40px 0 (上0/下40px) で button と同一行に並ぶため
       PROD 値に合わせて margin-bottom へ移動 (旧: margin: 40px 0 0 0 !important;)。 */
    margin: 0 0 40px 0 !important;
    background-color: #2c2c2c !important;
    border-radius: 2px !important;
    height: auto !important;
    padding: 0 10px !important;
    float: right !important;
}
.social-share ul {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.social-share ul li {
    float: left !important;
    list-style: none !important;
    padding: 0 3px 3px 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
}
.social-share ul li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 15px 10px 10px !important;
    color: #ebebeb !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}
.social-share ul li a i {
    margin-right: 6px !important;
    font-size: 14px !important;
    color: #ebebeb !important;
    line-height: 1 !important;
}
.social-share ul li a span {
    display: inline-block !important;
    color: #ebebeb !important;
    font-size: 14px !important;
    line-height: 15px !important;
    text-transform: uppercase !important;
    font-family: "Oswald", sans-serif !important;
    vertical-align: middle !important;
}
.social-share ul li a:hover span,
.social-share ul li a:hover i {
    color: #009cff !important;
}
/* container float clearfix */
.portfolio_single_text_holder::after {
    content: "";
    display: table;
    clear: both;
}
/* ============================================================
   /P0-10 (session23) END
   ============================================================ */

/* ============================================================
   CHK-5 20260528: /parts_page/pf03/ 等で「全商品一覧」ボタン(float:left)
   と SNS SHARE バー(float:right) が同一行に乗らない症状の救済。
   真因 (probe chk-invest 調査3 + chk5 pre-fix probe 確定):
   wpautop が .portfolio_single_text_holder 直下に
     (a) separator 直前の空 <p></p>
     (b) separator〜button 間の stray <br>
     (c) button <a class="button tiny"> 直後の空 <p></p>  ← 決定打
   を挿入しており、特に (c) の空 <p> が float:left button の後に
   block box を確立して後続 .social-share(float:right) を +64px 下段へ
   押し下げる (PROD DOM には button 直後に script→social-share と連続し
   空 <p>/<br> が無いため yDelta≒-5 で同一行)。
   the_content フィルタ改変はリスク高 (CHK-3 と同方針)。本文中の
   <p>&nbsp;</p> は :empty に非該当 (NBSP を含む) ので PROD/LOCAL 共通の
   段落間スペースは温存され、LOCAL 固有の真に空な <p></p> と stray <br>
   のみを不可視化して PROD と同じ縦位置 (同一行) に視覚的に揃える。
   ============================================================ */
.portfolio_single_text_holder > p:empty {
    display: none;
}
.portfolio_single_text_holder > br {
    display: none;
}
/* ------------------------------------------------------------
   CHK-5 SP (20260528): SP では SHARE バーを PROD 互換 (左寄せ縦積み) に。
   PROD SP 実測 (probe-chk45-sp): .social-share float:left / clear:both /
   x=37.5 (ボタンと同左端) / margin:20px 0 40px / padding:0 0 0 10px。
   LOCAL は float:right / clear:none で右寄せ (x=70.67) だったため寄せる。
   PC (>991px) は float:right で button と同一行 (CHK-5 PC GO 済) を維持するため
   SP メディアクエリ内のみ上書き。ユーザー指示「軽微差2点も寄せてから deploy」(2026-05-28)。
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .social-share {
        float: left !important;
        clear: both !important;
        margin: 20px 0 40px !important;
        padding: 0 0 0 10px !important;
    }
}
/* ============================================================
   /CHK-5 (20260528) END
   ============================================================ */

/* =====================================================================
   session24 P1: SP ヘッダー fix (User フィードバック)
   (a) ハンバーガーを丸ボタン (P0-6 で fixed 配置) ではなく
       Lightning デフォルト通り header 内 inline で SNS と横並び配置に戻す
   (b) sub-menu の <span class="acc-btn acc-btn-open"></span> (子展開済で
       不要になった四角アイコン) を display: none で削除
   MODIFIED: 20260514 - session24 追加
   ===================================================================== */
@media (max-width: 991px) {
    /* (a) ハンバーガーは JS (bagus_attach_mobile_btn_to_header) で
       site-header-container 内に append 済 (data-bagus-moved=1)。
       header を flex 化し、ハンバーガーは flex 最右端に配置する。
       丸ボタン (背景・shadow・radius) は廃止、線アイコンのみ */
    #site-header .site-header-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }
    #site-header .site-header-logo {
        flex: 0 0 auto !important;
        margin-right: auto !important;
    }
    #site-header #global-nav,
    #site-header .global-nav {
        flex: 0 0 auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    /* ハンバーガーボタン: header 内 flex 最右端 (logo / SNS / hamburger 横並び)
       specificity を P0-6 (#site-header .site-header-container > btn) より高くするため
       html body 前置 + .site-header-container * 2 にして勝てるようにする */
    html body #site-header .site-header-container > #vk-mobile-nav-menu-btn,
    html body #site-header-container.site-header-container > #vk-mobile-nav-menu-btn,
    html body #vk-mobile-nav-menu-btn[data-bagus-moved] {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        flex: 0 0 auto !important;
        order: 99 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 0 0 0 12px !important;
        padding: 0 !important;
        background-color: transparent !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'><line x1='5' y1='9' x2='23' y2='9'/><line x1='5' y1='15' x2='23' y2='15'/><line x1='5' y1='21' x2='23' y2='21'/></svg>") !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 26px 26px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 1001 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        font-size: 0 !important;
        color: transparent !important;
        text-indent: -9999px !important;
        cursor: pointer !important;
    }
    /* open 状態は close icon (X) */
    body #vk-mobile-nav-menu-btn.vk-mobile-nav-menu-btn-on,
    body #vk-mobile-nav-menu-btn.menu-open {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'><line x1='7' y1='7' x2='21' y2='21'/><line x1='21' y1='7' x2='7' y2='21'/></svg>") !important;
    }

    /* (b) sub-menu の acc-btn (空 span、四角に見える) を非表示 */
    #vk-mobile-nav .acc-btn,
    #vk-mobile-nav .acc-btn-open,
    #vk-mobile-nav .acc-btn-close,
    #vk-mobile-nav .menu-item-has-children > .acc-btn,
    #vk-mobile-nav span.acc-btn {
        display: none !important;
    }
}

/* SP (<= 767px): ハンバーガーをさらに小さく */
@media (max-width: 767px) {
    html body #site-header .site-header-container > #vk-mobile-nav-menu-btn,
    html body #site-header-container.site-header-container > #vk-mobile-nav-menu-btn,
    html body #vk-mobile-nav-menu-btn[data-bagus-moved] {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        background-size: 24px 24px !important;
        margin-left: 10px !important;
    }
}
/* メニュー open 時: #site-header の z-index を overlay (200) より高くし、
   site-header 内の hamburger (close X) を overlay の上に出す。
   これがないと overlay が hamburger を覆って閉じられなくなる */
@media (max-width: 991px) {
    body.vk-mobile-nav-menu-btn-on #site-header,
    body.vk-mobile-nav-menu-on #site-header {
        z-index: 1010 !important;
    }
}
/* =====================================================================
   /session24 P1 END
   ===================================================================== */

/* =====================================================================
   session24 P2: back-to-top ボタン (SP 専用、PROD 互換)
   PROD: <a id="back_to_top" href="#" class="on"><span class="back_to_top_inner"><span>&nbsp;</span></span></a>
   - position: fixed bottom:52px right:7px、size 48x48
   - 黒丸 + 白い ↑ アイコン (border で擬似矢印)
   - scroll Y > 200 で `.on` クラス付与 → display:flex
   - PC (>= 992px) は非表示
   MODIFIED: 20260514 - session24 P2 追加
   ===================================================================== */
#back_to_top {
    position: fixed;
    bottom: 52px;
    right: 7px;
    width: 48px;
    height: 48px;
    background: #000;
    border-radius: 50%;
    z-index: 999;
    text-decoration: none;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    opacity: 0;
}
#back_to_top.on {
    display: flex;
    opacity: 1;
}
#back_to_top .back_to_top_inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
#back_to_top .back_to_top_inner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 2px solid #ebebeb;
    border-right: 2px solid #ebebeb;
    transform: translate(-50%, -30%) rotate(-45deg);
}
#back_to_top .back_to_top_inner > span {
    display: none; /* PROD の &nbsp; span 非表示 */
}
/* PC では非表示 */
@media (min-width: 992px) {
    #back_to_top {
        display: none !important;
    }
}
/* =====================================================================
   /session24 P2 END
   ===================================================================== */

/* =====================================================================
   session33: BLOG サイドバー カテゴリー widget 内部スクロール解除
   PROD は 11 件 menu の固定表示で内部 scroll なし。LOCAL/STG も同じ挙動に。
   ul の max-height:280px + overflow-y:auto を解除 (二重スクロール解消)。
   ===================================================================== */
#categories-bl1.widget_nav_menu.widget_categories ul {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}
.widget.widget_link_list ul {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

/* =====================================================================
   session33-2 (2026-05-31): date/category/tag archive の vk_post 画像膨張対策
   親 Lightning archive.php で出力される .vk_post.media の class が
   "vk_post-col-xs-12 vk_post-col-sm-12 vk_post-col-" と lg/xl 欠落しており、
   .vk_post_imgOuter が container 幅 (1440px) まで膨張 → 1 件 1500px 縦伸び。
   応急処置として archive 系 body で画像コンテナの max を制限。
   ===================================================================== */
.archive .vk_post.media .vk_post_imgOuter,
.date .vk_post.media .vk_post_imgOuter,
.category .vk_post.media .vk_post_imgOuter,
.tag .vk_post.media .vk_post_imgOuter {
    max-width: 300px !important;
    max-height: 200px !important;
    flex: 0 0 300px !important;
}
.archive .vk_post.media .vk_post_imgOuter img,
.date .vk_post.media .vk_post_imgOuter img,
.category .vk_post.media .vk_post_imgOuter img,
.tag .vk_post.media .vk_post_imgOuter img {
    max-width: 100% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
}
/* media 行全体も縦に膨張しないよう align-items を top に寄せる
 * + events 系と同じ「暗灰背景 + 白字 + 罫線」装飾 (User 指摘 2026-05-31)。
 * bagus-events-template は固定ページのため body.archive/date/category/tag と排他で衝突なし。
 */
body.archive .vk_post.media,
body.date .vk_post.media,
body.category .vk_post.media,
body.tag .vk_post.media {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    max-height: 220px !important;
    overflow: hidden !important;
    background-color: #2c2c2c !important;
    padding: 16px !important;
}
body.archive .vk_post.media,
body.archive .vk_post.media a,
body.archive .vk_post.media h2,
body.archive .vk_post.media h3,
body.archive .vk_post.media h4,
body.archive .vk_post.media .vk_post_title,
body.archive .vk_post.media .vk_post_title a,
body.archive .vk_post.media .vk_post_excerpt,
body.archive .vk_post.media .vk_post_excerpt *,
body.archive .vk_post.media .vk_post_date,
body.archive .vk_post.media .vk_post_term,
body.archive .vk_post.media .vk_post_term a,
body.date .vk_post.media,
body.date .vk_post.media a,
body.date .vk_post.media h2,
body.date .vk_post.media h3,
body.date .vk_post.media h4,
body.date .vk_post.media .vk_post_title,
body.date .vk_post.media .vk_post_title a,
body.date .vk_post.media .vk_post_excerpt,
body.date .vk_post.media .vk_post_excerpt *,
body.date .vk_post.media .vk_post_date,
body.date .vk_post.media .vk_post_term,
body.date .vk_post.media .vk_post_term a,
body.category .vk_post.media,
body.category .vk_post.media a,
body.category .vk_post.media h2,
body.category .vk_post.media h3,
body.category .vk_post.media h4,
body.category .vk_post.media .vk_post_title,
body.category .vk_post.media .vk_post_title a,
body.category .vk_post.media .vk_post_excerpt,
body.category .vk_post.media .vk_post_excerpt *,
body.category .vk_post.media .vk_post_date,
body.category .vk_post.media .vk_post_term,
body.category .vk_post.media .vk_post_term a,
body.tag .vk_post.media,
body.tag .vk_post.media a,
body.tag .vk_post.media h2,
body.tag .vk_post.media h3,
body.tag .vk_post.media h4,
body.tag .vk_post.media .vk_post_title,
body.tag .vk_post.media .vk_post_title a,
body.tag .vk_post.media .vk_post_excerpt,
body.tag .vk_post.media .vk_post_excerpt *,
body.tag .vk_post.media .vk_post_date,
body.tag .vk_post.media .vk_post_term,
body.tag .vk_post.media .vk_post_term a {
    color: #ebebeb !important;
}
/* 記事カード間のセパレーター罫線 (events 系と同じ rgb(153,153,153)) */
body.archive .vk_post.media + .vk_post.media,
body.date .vk_post.media + .vk_post.media,
body.category .vk_post.media + .vk_post.media,
body.tag .vk_post.media + .vk_post.media {
    border-top: 1px solid rgb(153, 153, 153) !important;
}

/* session34 (2026-06-01): date archive で Lightning 標準 archive-header (空 h1) を非表示。
 *   Hero h1 は bagus_blog_hero_before_layout で別途 inject 済、archive-header h1 は空で
 *   重複 (SEO 観点 NG) となるため display:none。
 *   body.date + .bagus-archive-hero-layout 二重 scope で他 archive 系には影響させない。
 */
body.date.bagus-archive-hero-layout .archive-header {
    display: none !important;
}

/* session35 (#199, 2026-06-01): bagus-blog-pagination を PROD 互換中央寄せに。
 *   Lightning origin skin の .pagination + ul.page-numbers li { float:left } が当たり、
 *   親 nav の height が 0 に潰れ + アイテムが左端寄せになる崩れを解消。
 *   nav 全幅 + text-align:center + ul inline-flex で中央配置、float を明示解除。
 *   対象: BLOG / 検索 / EVENTS / category / tag archive (.bagus-blog-pagination 限定 scope)。
 */
nav.pagination.bagus-blog-pagination {
    display: block;
    width: 100%;
    text-align: center;
    margin: 32px 0 0;
    padding: 0;
}
nav.pagination.bagus-blog-pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
nav.pagination.bagus-blog-pagination ul.page-numbers > li {
    display: inline-flex;
    float: none !important;
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}
nav.pagination.bagus-blog-pagination ul.page-numbers > li > a,
nav.pagination.bagus-blog-pagination ul.page-numbers > li > span {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 6px 12px;
    color: #ebebeb;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: transparent;
    text-decoration: none;
}
nav.pagination.bagus-blog-pagination ul.page-numbers > li > a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}
nav.pagination.bagus-blog-pagination ul.page-numbers > li > span.current {
    color: #ffffff;
    background-color: #337ab7;
    border-color: #337ab7;
}
nav.pagination.bagus-blog-pagination ul.page-numbers > li > span.dots {
    border-color: transparent;
    color: #888;
}

/* session35 (#199): category/tag/author archive で Lightning 標準 nav.navigation.pagination
 *   が bagus-blog-pagination と重複出力される (zephyr750-3 等で観察)。
 *   子テーマ側 bagus-blog-pagination を使うため Lightning 標準を非表示化。
 */
body.archive.category .main-section > nav.navigation.pagination,
body.archive.tag      .main-section > nav.navigation.pagination,
body.archive.author   .main-section > nav.navigation.pagination,
body.archive.date     .main-section > nav.navigation.pagination {
    display: none !important;
}

/* session35 (#201, 2026-06-01): post single (動画 post 等) の Hero 帯。
 *   .bagus-archive-hero (height 300px / SP 100px / bg head_events_01) を流用しつつ、
 *   h1 重複回避のため heading は div で出力 (.bagus-archive-hero__heading)。
 *   既存 .bagus-archive-hero h1 と同じ font / shadow / center 配置を heading にも適用。
 */
.bagus-archive-hero .bagus-archive-hero__heading {
    position: relative;
    z-index: 2;
    color: #fff !important;
    font-family: Oswald, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 45px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 45px;
    text-align: center;
    width: 100%;
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    background: transparent;
    border: 0;
}
@media (max-width: 991px) {
    .bagus-archive-hero .bagus-archive-hero__heading {
        font-size: 28px;
        line-height: 28px;
    }
}

/* session35 (#201 enforcer 訂正, 2026-06-01): post single 専用 hero は PROD (旧 qode) 互換で
 * flat dark gray (~#2c2c2c) + 中央 BLOG ラベル、背景画像なし。
 * 既存 .bagus-archive-hero (height 300px / bg head_events_01 / attachment fixed) を打ち消す。
 * PROD 実測サイズ: PC ~100px, SP ~100px (margin-bottom 50px)。
 */
.bagus-archive-hero.bagus-post-hero {
    height: 100px;
    background-color: #2c2c2c;
    background-image: none !important;
    background-attachment: scroll;
    margin-bottom: 50px;
    width: 100%;
}
@media (max-width: 991px) {
    .bagus-archive-hero.bagus-post-hero {
        height: 100px;
    }
}

/* post single の post-info (日付 + カテゴリ) の見出し下装飾。
 * `.bagus-blog-single-meta .post-info` に既存ルール (style.css L3937-3949) 無いので追記。
 * `Y.m.d | カテゴリ, カテゴリ |` を 1 行で表示、カテゴリリンクは underline 控えめ。 */
body.single-post .bagus-blog-single-meta .post-info {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
body.single-post .bagus-blog-single-meta .post-info .post-date {
    display: inline;
}
body.single-post .bagus-blog-single-meta .post-info a {
    color: #666;
    text-decoration: none;
}
body.single-post .bagus-blog-single-meta .post-info a:hover {
    color: #337ab7;
    text-decoration: underline;
}