/* ========================================================================== sidebar-rail.css — サイドバーのレールの調整（2026-09-20 新規） 読み込み: inc/sidebar-rail.php（全ページ） 素の CSS（WP-SCSS の対象外）。既存の rail スタイルは assets/scss/_home_new2.scss（→ style.css）。 読み込み順に左右されないよう、セレクタは #common_side_bar から始める。 ========================================================================== */ /* ---------- 下半分のリンク（KPOP〜ACCESS）も大文字にそろえる ---------- _home_new2.scss の「直接リンクは小文字」の実験（text-transform: lowercase）を打ち消す。 （下のタイトル画像に置き換えた後も、読み上げ用のテキストとして大文字にしておく） */ #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink .c-post-catch__main { text-transform: uppercase; } /* ---------- ラベルをタイトル画像（SVG）で表示する ---------- 画像: assets/images/svg/sidebar_tit_*.svg（高さ 100・幅は文字ぴったり・傾き入り。Daisuke3 作成） 仕組み: の文字は残したまま（読み上げ・翻訳除外はそのまま）、文字の塗りだけ透明にし、 背景色 = 文字色（currentColor）を SVG の形で切り抜いて表示する（mask）。 → 既存の配色ルール（白／ホバーで赤など）がそのまま画像の色になる。PHP は変更しない。 大きさ: 箱（幅 × 高さ）に収まる最大の大きさ（contain）。短い語は高さいっぱい、長い語は幅いっぱい。 傾き: 画像に入っているので、既存の skewX(7deg) は外す。 */ #common_side_bar .side_content_bar_inner #drawer_button .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #event_button .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #floors_toggle_btn .c-post-catch__main strong, #common_side_bar .side_content_bar_inner > .c-post-catch.is-side[data-floor="BEER"] .c-post-catch__main strong, #common_side_bar .side_content_bar_inner .c-post-catch.is-side.win-announce .c-post-catch__main strong, #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink .c-post-catch__main strong { display: block; width: 44px; /* レール 50px の左右に 3px。高さ 100 の画像なら幅 275 までは高さいっぱいで表示 */ height: 16px; margin: 0 auto; overflow: hidden; white-space: nowrap; transform: none; -webkit-text-fill-color: transparent; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } #common_side_bar .side_content_bar_inner #drawer_button .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_news.svg"); mask-image: url("../images/svg/sidebar_tit_news.svg"); } #common_side_bar .side_content_bar_inner #event_button .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_event.svg"); mask-image: url("../images/svg/sidebar_tit_event.svg"); } #common_side_bar .side_content_bar_inner #floors_toggle_btn .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_floor.svg"); mask-image: url("../images/svg/sidebar_tit_floor.svg"); } #common_side_bar .side_content_bar_inner > .c-post-catch.is-side[data-floor="BEER"] .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_beer.svg"); mask-image: url("../images/svg/sidebar_tit_beer.svg"); } #common_side_bar .side_content_bar_inner .c-post-catch.is-side.win-announce .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_tousen.svg"); mask-image: url("../images/svg/sidebar_tit_tousen.svg"); } #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink--kpop .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_kpop.svg"); mask-image: url("../images/svg/sidebar_tit_kpop.svg"); } #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink--vinyl .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_vinyl.svg"); mask-image: url("../images/svg/sidebar_tit_vinyl.svg"); } #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink--asia .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_asia.svg"); mask-image: url("../images/svg/sidebar_tit_asia.svg"); } #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink--guests .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_guests.svg"); mask-image: url("../images/svg/sidebar_tit_guests.svg"); } #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink--about .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_about.svg"); mask-image: url("../images/svg/sidebar_tit_about.svg"); } #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink--access .c-post-catch__main strong { -webkit-mask-image: url("../images/svg/sidebar_tit_access.svg"); mask-image: url("../images/svg/sidebar_tit_access.svg"); } /* ---------- グループの見分け方を「区切り線」から「色」に変える（2026-09-20） ---------- 黄色の項目 = 押すと中身（ドロワー）が開く（NEWS / EVENT / FLOOR / BEER）。 赤の項目 = そのページへ移動（当選、KPOP〜ACCESS）。 → _home_new2.scss の黄色い区切り線（当選の border-top と margin-top: 12px）は外す。 ホバー・開いているときは色を反転（赤地に黄色の文字）。 */ #common_side_bar .side_content_bar_inner .c-post-catch.is-side.win-announce { margin-top: 0; border-top: none; } #common_side_bar .side_content_bar_inner #drawer_button, #common_side_bar .side_content_bar_inner #event_button, #common_side_bar .side_content_bar_inner #floors_toggle_btn.floors-toggle, #common_side_bar .side_content_bar_inner > .c-post-catch.is-side[data-floor="BEER"] { background-color: var(--primary, #fbcb15); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } /* 文字（SVG の形）の色: color は既存の #id 指定（!important の可能性あり）に負けて NEWS / EVENT / BEER が白のままだった（実測）。 形は background-color で塗っているので、color ではなく background-color を直接指定する */ #common_side_bar .side_content_bar_inner #drawer_button .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #event_button .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #floors_toggle_btn.floors-toggle .c-post-catch__main strong, #common_side_bar .side_content_bar_inner > .c-post-catch.is-side[data-floor="BEER"] .c-post-catch__main strong { background-color: var(--secondary, #d7000f); } #common_side_bar .side_content_bar_inner #drawer_button:hover, #common_side_bar .side_content_bar_inner #event_button:hover, #common_side_bar .side_content_bar_inner #floors_toggle_btn.floors-toggle:hover, #common_side_bar .side_content_bar_inner #floors_toggle_btn.floors-toggle[aria-expanded="true"], #common_side_bar .side_content_bar_inner > .c-post-catch.is-side[data-floor="BEER"]:hover { background-color: var(--secondary, #d7000f); } #common_side_bar .side_content_bar_inner #drawer_button:hover .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #event_button:hover .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #floors_toggle_btn.floors-toggle:hover .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #floors_toggle_btn.floors-toggle[aria-expanded="true"] .c-post-catch__main strong, #common_side_bar .side_content_bar_inner > .c-post-catch.is-side[data-floor="BEER"]:hover .c-post-catch__main strong { background-color: var(--primary, #fbcb15); } /* ---------- SP: レール 42px（≤549px。_home_new2.scss）。左右に余白を残す ---------- */ @media only screen and (max-width: 549px) { #common_side_bar .side_content_bar_inner #drawer_button .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #event_button .c-post-catch__main strong, #common_side_bar .side_content_bar_inner #floors_toggle_btn .c-post-catch__main strong, #common_side_bar .side_content_bar_inner > .c-post-catch.is-side[data-floor="BEER"] .c-post-catch__main strong, #common_side_bar .side_content_bar_inner .c-post-catch.is-side.win-announce .c-post-catch__main strong, #common_side_bar .side_content_bar_inner .c-post-catch.is-side.new2-navlink .c-post-catch__main strong { width: 33px; /* 項目の幅 38px（実測）の左右に約 2.5px。高さ 100 の画像なら幅 220 までは高さいっぱい（それ以上はわずかに縮む） */ height: 15px; } /* 指で押す範囲（2026-09-20）: 実測では各項目 31〜36px（WCAG 2.5.8 の 24px は満たすが Apple 44 / Google 48 に届かない）。 13 項目 × 40px ＋ 区切り ≈ 540px で多くのスマホの 1 画面に収まる 40px にそろえる。中身は上下中央 */ #common_side_bar .side_content_bar_inner > .c-post-catch.is-side { box-sizing: border-box; min-height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; } } /* ========================================================================== ドロワー内の見出し・ボタンもタイトル画像にする（2026-09-20） 対象（すべてファイル実読で確認した要素。PHP・JS は変更しない）: LATEST NEWS common-sidebar.php .side_content_news .side-drawer-header__label FLOORS common-sidebar.php .side_content_floors .side-drawer-header__label MORE NEWS common-sidebar.php .side_content_news .more_news a FLOOR GUIDE common-sidebar.php .side-floors-guide 各階の見出し floor-drawer.js .floor-drawer[data-floor="5F"] .floor-drawer__floor-number など 幅 = 高さ × 画像の比率（SVG の width / height。実読）。高さは --tit-h で調整する ========================================================================== */ /* ── 文字の要素そのものを画像にする（見出しラベル・各階の見出し）── */ #common_side_bar .side_content_news .side-drawer-header__label, #common_side_bar .side_content_floors .side-drawer-header__label, #common_side_bar .floor-drawer .floor-drawer__floor-number { display: block; height: var(--tit-h); width: calc(var(--tit-h) * var(--tit-r)); max-width: 100%; margin-left: 0; margin-right: 0; padding: 0; overflow: hidden; white-space: nowrap; font-size: 1px; /* 文字が箱の高さを押し広げないように（文字は透明） */ line-height: 1; transform: none; -webkit-text-fill-color: transparent; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: contain; mask-size: contain; } /* ※画像の url() は変数に入れず、各セレクタに直接書く（変数内の相対 URL はブラウザにより基準がページの URL になる恐れがあるため） */ #common_side_bar .side_content_news .side-drawer-header__label { --tit-h: 20px; --tit-r: 5.1019; -webkit-mask-image: url("../images/svg/sidebar_tit_latestnews.svg"); mask-image: url("../images/svg/sidebar_tit_latestnews.svg"); } #common_side_bar .side_content_floors .side-drawer-header__label { --tit-h: 20px; --tit-r: 2.7751; -webkit-mask-image: url("../images/svg/sidebar_tit_floors.svg"); mask-image: url("../images/svg/sidebar_tit_floors.svg"); } /* 各階の見出し（floor-drawer.js が
の中に

を作る） */ #common_side_bar .floor-drawer .floor-drawer__floor-number { --tit-h: 30px; } #common_side_bar .floor-drawer[data-floor="B1F"] .floor-drawer__floor-number, #common_side_bar .floor-drawer[data-floor="BF"] .floor-drawer__floor-number { --tit-r: 1.2331; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_b1f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_b1f.svg"); } #common_side_bar .floor-drawer[data-floor="1F"] .floor-drawer__floor-number { --tit-r: 0.7725; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_1f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_1f.svg"); } #common_side_bar .floor-drawer[data-floor="2F"] .floor-drawer__floor-number { --tit-r: 0.9394; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_2f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_2f.svg"); } #common_side_bar .floor-drawer[data-floor="3F"] .floor-drawer__floor-number { --tit-r: 0.9394; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_3f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_3f.svg"); } #common_side_bar .floor-drawer[data-floor="4F"] .floor-drawer__floor-number { --tit-r: 0.9394; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_4f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_4f.svg"); } #common_side_bar .floor-drawer[data-floor="5F"] .floor-drawer__floor-number { --tit-r: 0.9394; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_5f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_5f.svg"); } #common_side_bar .floor-drawer[data-floor="6F"] .floor-drawer__floor-number { --tit-r: 0.9394; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_6f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_6f.svg"); } #common_side_bar .floor-drawer[data-floor="7F"] .floor-drawer__floor-number { --tit-r: 0.9394; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_7f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_7f.svg"); } #common_side_bar .floor-drawer[data-floor="8F"] .floor-drawer__floor-number { --tit-r: 0.9394; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_8f.svg"); mask-image: url("../images/svg/sidebar_tit_floor_8f.svg"); } #common_side_bar .floor-drawer[data-floor="ROOF"] .floor-drawer__floor-number, #common_side_bar .floor-drawer[data-floor="RF"] .floor-drawer__floor-number { --tit-r: 0.9351; -webkit-mask-image: url("../images/svg/sidebar_tit_floor_roof.svg"); mask-image: url("../images/svg/sidebar_tit_floor_roof.svg"); } #common_side_bar .floor-drawer[data-floor="BEER"] .floor-drawer__floor-number { --tit-r: 1.9843; -webkit-mask-image: url("../images/svg/sidebar_tit_beer.svg"); mask-image: url("../images/svg/sidebar_tit_beer.svg"); } /* ── ボタン（MORE NEWS / FLOOR GUIDE）: ボタンの枠・背景は残し、文字だけ画像にする ── 文字を透明にして、中央に ::after で画像を重ねる。色はボタンの文字色（ホバーで変わる色もそのまま） */ #common_side_bar .side_content_news .more_news a, #common_side_bar .side-floors-guide { position: relative; -webkit-text-fill-color: transparent; } #common_side_bar .side_content_news .more_news a::after, #common_side_bar .side-floors-guide::after { content: ""; position: absolute; top: 50%; left: 50%; height: var(--tit-h); width: calc(var(--tit-h) * var(--tit-r)); max-width: calc(100% - 16px); transform: translate(-50%, -50%); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; pointer-events: none; } #common_side_bar .side_content_news .more_news a { --tit-h: 16px; --tit-r: 4.6643; } #common_side_bar .side_content_news .more_news a::after { -webkit-mask-image: url("../images/svg/sidebar_tit_morenews.svg"); mask-image: url("../images/svg/sidebar_tit_morenews.svg"); } #common_side_bar .side-floors-guide { --tit-h: 16px; --tit-r: 4.4872; } #common_side_bar .side-floors-guide::after { -webkit-mask-image: url("../images/svg/sidebar_tit_floorguide.svg"); mask-image: url("../images/svg/sidebar_tit_floorguide.svg"); }