@charset "UTF-8"; /* ========================================================= テーマ（色替えパターン）専用CSS --------------------------------------------------------- ■ 仕組み 既定（ に data-theme 無し）＝「ブラック」。 システムが のように出力すると、 下の該当ブロックがトークンを上書きして配色が切り替わる。 ■ 現在の11色（既定のブラック ＋ data-theme 10色） black(既定) / white / yellow / orange / red / pink / lightgreen / green / lightblue / blue / purple ※キー名は管理画面のベースカラーの値と同じ英単語で統一している。 ■ 色を追加する手順（2ステップ） 1) 【B】に html[data-theme="新色名"]{ ... } を1ブロック追加し、 変えたいトークンだけ書く（書かなければ【A】の既定値が効く）。 2) その色が「明るい配色」（ヒーロー/ランキングのマスクが白系）なら、 【C】冒頭の LIGHT リスト（:is(...)）に新色名を追加する。 マスク上の文字が白のままだと読めなくなるため必須。 ※【D】に個別指定（見出し英字・ロゴ・金額の色など）もあるので、 既存色のブロックを複製して色名を置き換えるのが早い。 ■ 読み込み位置 必ず全CSSの最後に読み込むこと（他ファイルの指定を上書きするため）。 ========================================================= */ /* ========================================================= 【A】トークン既定値 ＝ ブラック（data-theme 無し） ========================================================= */ :root{ --c-nav-bg:#000000; --c-nav-en:#474747; --c-nav-jp:#ffffff; --c-fill:#000000; --c-band:#000000; --c-on-fill:#ffffff; --hero-mask:#000000; --rank-mask:#000000; --c-accent:#efa21c; --c-accent-on-fill:#efa21c; --c-watermark:#434343; --c-slash:#747474; --c-about-label:#000000; --c-price-label:#ffffff; --c-band-title:#ffffff; --c-hero-logo:#ffffff; --c-header-text:#ffffff; --c-hero-lead:#ffffff; --hero-lead-shadow:none; --hero-lead-opacity:.5; --c-scroll:#ffffff; --hero-photo-filter:grayscale(1) brightness(0.3) contrast(1.1); --hero-ov:#ffffff; --hero-ov-op:0; } /* ========================================================= 【B】各テーマのトークン上書き（1色＝1ブロック） ※色値は top2_ore/whi.psd 由来。微調整は各ブロックの値を変えるだけ。 ========================================================= */ html[data-theme="yellow"]{ --c-nav-bg:#f7a30c; --c-nav-en:#000000; --c-fill:#f7a30c; --c-band:#f7a30c; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#f7a30c; --c-accent:#f7a30c; --c-accent-on-fill:#000000; --c-watermark:#f7a30c; --c-slash:#ffffff; --c-about-label:#f7a30c; } html[data-theme="orange"]{ --c-nav-bg:#ff6418; --c-nav-en:#000000; --c-fill:#ff6418; --c-band:#ff6418; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#ff6418; --c-accent:#ff6418; --c-accent-on-fill:#000000; --c-watermark:#e2540e; --c-slash:#ffffff; --c-about-label:#ff6418; } html[data-theme="lightgreen"]{ --c-nav-bg:#92c800; --c-nav-en:#000000; --c-fill:#92c800; --c-band:#92c800; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#92c800; --c-accent:#92c800; --c-accent-on-fill:#000000; --c-watermark:#82ae0c; --c-slash:#ffffff; --c-about-label:#92c800; } html[data-theme="lightblue"]{ --c-nav-bg:#1a99f2; --c-nav-en:#000000; --c-fill:#1a99f2; --c-band:#1a99f2; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#1a99f2; --c-accent:#1a99f2; --c-accent-on-fill:#000000; --c-watermark:#138ade; --c-slash:#ffffff; --c-about-label:#1a99f2; } html[data-theme="purple"]{ --c-nav-bg:#a114bf; --c-nav-en:#000000; --c-fill:#a114bf; --c-band:#a114bf; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#a114bf; --c-accent:#a114bf; --c-accent-on-fill:#000000; --c-watermark:#830d9c; --c-slash:#ffffff; --c-about-label:#a114bf; } html[data-theme="green"]{ --c-nav-bg:#0ba111; --c-nav-en:#000000; --c-fill:#0ba111; --c-band:#0ba111; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#0ba111; --c-accent:#0ba111; --c-accent-on-fill:#000000; --c-watermark:#19770c; --c-slash:#ffffff; --c-about-label:#0ba111; } html[data-theme="blue"]{ --c-nav-bg:#1b12d9; --c-nav-en:#000000; --c-fill:#1b12d9; --c-band:#1b12d9; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#1b12d9; --c-accent:#1b12d9; --c-accent-on-fill:#000000; --c-watermark:#0e07aa; --c-slash:#ffffff; --c-about-label:#1b12d9; } html[data-theme="red"]{ --c-nav-bg:#d91212; --c-nav-en:#000000; --c-fill:#d91212; --c-band:#d91212; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#d91212; --c-accent:#d91212; --c-accent-on-fill:#000000; --c-watermark:#960a0a; --c-slash:#ffffff; --c-about-label:#d91212; } html[data-theme="pink"]{ --c-nav-bg:#ef1c93; --c-nav-en:#000000; --c-fill:#ef1c93; --c-band:#ef1c93; --c-on-fill:#ffffff; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --c-hero-logo:#000000; --c-header-text:#000000; --rank-mask:#ef1c93; --c-accent:#ef1c93; --c-accent-on-fill:#000000; --c-watermark:#b10f53; --c-slash:#ffffff; --c-about-label:#ef1c93; } html[data-theme="white"]{ --c-nav-bg:#b4b6c8; --c-fill:#d2d4e2; --c-band:#ffffff; --c-on-fill:#222222; --hero-mask:#ffffff; --hero-photo-filter:grayscale(1); --hero-ov:#e9efff; --hero-ov-op:0.6; --c-hero-logo:#000000; --c-header-text:#000000; --c-hero-lead:#000000; --hero-lead-opacity:1; --c-scroll:#000000; --rank-mask:#d2d4e2; --c-accent:#efa21c; --c-accent-on-fill:#efa21c; --c-watermark:#afb3d2; --c-price-label:#000000; --c-band-title:#000000; } /* ========================================================= 【C】明るいテーマ共通の反転指定 ヒーロー/ランキングのマスクが白系になるため、その上の文字を 白→黒に反転する。★新しい明るい色を足したら、下の :is() すべてに 色名を追加すること（このセクション内だけで完結する）。 ========================================================= */ /* --- ランキング：マスク上の文字・線・帯を反転 --- */ html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_hero, html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_title, html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_number, html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_name, html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_spec, html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_enlabel{color:#000;} html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_line{background:#000;} html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_badge{background:#000;color:#fff;} html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_crown img{filter:brightness(0);} /* --- ランキング（暗色ページ）のヘッダー文字も黒へ --- */ html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) body.page_dark .header:not(.is_scrolled) .header_logo a, html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) body.page_dark .header:not(.is_scrolled) .header_open{color:#000;} /* --- 料金：クーポン枠は黒地に --- */ html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .price_coupon{background:#000;} @media (max-width:768px){ html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_badge{background:none;} html:is([data-theme="yellow"],[data-theme="white"],[data-theme="orange"],[data-theme="lightgreen"],[data-theme="lightblue"],[data-theme="purple"],[data-theme="green"],[data-theme="blue"],[data-theme="red"],[data-theme="pink"]) .rank_badge_t{color:#000;} } /* ========================================================= 【D】テーマ個別の例外 ========================================================= */ /* --- 全テーマ共通：フッターナビは塗り色に対する文字色へ --- */ html[data-theme] .footer_nav_line a{ color:var(--c-on-fill) !important; -webkit-text-fill-color:var(--c-on-fill); } /* --- yellow --- */ html[data-theme="yellow"] .price_coupon{border:none;} html[data-theme="yellow"] .price_main_num, html[data-theme="yellow"] .price_main_unit{ background:none; color:var(--c-accent-on-fill); -webkit-text-fill-color:var(--c-accent-on-fill); } html[data-theme="yellow"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#ffb739; } html[data-theme="yellow"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="yellow"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="yellow"] .pp_title_en, html[data-theme="yellow"] .cp_title_en, html[data-theme="yellow"] .ac_title_en, html[data-theme="yellow"] .nw_title_en, html[data-theme="yellow"] .pf_title_en, html[data-theme="yellow"] .list_title_en{color:var(--c-accent);} html[data-theme="yellow"] .rank_title{color:#efa21c;} html[data-theme="yellow"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="yellow"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="yellow"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="yellow"] .price_btn{border:none;} /* --- white --- */ html[data-theme="white"] .footer_white{border-bottom:1px solid #000;} html[data-theme="white"] .footer_nav_line a, html[data-theme="white"] .footer_copy{ color:#000 !important; -webkit-text-fill-color:#000; } html[data-theme="white"] .btn_round{--b-bg:#fff;--b-fg:#000;} /* ナビのホバー：既定のアクセント(#efa21c)は白版の背景(#b4b6c8)とコントラスト比1.06でほぼ同化するため、 同じナビ内で使っている英字色(--c-nav-en)に変える（比4.63）。black/ore は既定のオレンジのまま */ html[data-theme="white"] .gnav_item a:hover .gnav_jp{color:var(--c-nav-en);} html[data-theme="white"] .price_main_num, html[data-theme="white"] .price_main_unit{ background:linear-gradient(180deg, #ff7800 0%, #efce1c 100%); -webkit-background-clip:text; background-clip:text; } html[data-theme="white"] .price, html[data-theme="white"] .news{ border-top:1px solid #000; } /* --- orange --- */ html[data-theme="orange"] .price_coupon{border:none;} html[data-theme="orange"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#ff6418; } html[data-theme="orange"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="orange"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="orange"] .pp_title_en, html[data-theme="orange"] .cp_title_en, html[data-theme="orange"] .ac_title_en, html[data-theme="orange"] .nw_title_en, html[data-theme="orange"] .pf_title_en, html[data-theme="orange"] .list_title_en{color:var(--c-accent);} html[data-theme="orange"] .rank_title{color:#ff6418;} html[data-theme="orange"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="orange"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="orange"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="orange"] .price_btn{border:none;} /* --- lightgreen --- */ html[data-theme="lightgreen"] .price_coupon{border:none;} html[data-theme="lightgreen"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#92c800; } html[data-theme="lightgreen"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="lightgreen"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="lightgreen"] .pp_title_en, html[data-theme="lightgreen"] .cp_title_en, html[data-theme="lightgreen"] .ac_title_en, html[data-theme="lightgreen"] .nw_title_en, html[data-theme="lightgreen"] .pf_title_en, html[data-theme="lightgreen"] .list_title_en{color:var(--c-accent);} html[data-theme="lightgreen"] .rank_title{color:#92c800;} html[data-theme="lightgreen"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="lightgreen"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="lightgreen"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="lightgreen"] .price_btn{border:none;} /* --- lightblue --- */ html[data-theme="lightblue"] .price_coupon{border:none;} html[data-theme="lightblue"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#1a99f2; } html[data-theme="lightblue"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="lightblue"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="lightblue"] .pp_title_en, html[data-theme="lightblue"] .cp_title_en, html[data-theme="lightblue"] .ac_title_en, html[data-theme="lightblue"] .nw_title_en, html[data-theme="lightblue"] .pf_title_en, html[data-theme="lightblue"] .list_title_en{color:var(--c-accent);} html[data-theme="lightblue"] .rank_title{color:#1a99f2;} html[data-theme="lightblue"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="lightblue"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="lightblue"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="lightblue"] .price_btn{border:none;} /* --- purple --- */ html[data-theme="purple"] .price_coupon{border:none;} html[data-theme="purple"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#a114bf; } html[data-theme="purple"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="purple"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="purple"] .pp_title_en, html[data-theme="purple"] .cp_title_en, html[data-theme="purple"] .ac_title_en, html[data-theme="purple"] .nw_title_en, html[data-theme="purple"] .pf_title_en, html[data-theme="purple"] .list_title_en{color:var(--c-accent);} html[data-theme="purple"] .rank_title{color:#a114bf;} html[data-theme="purple"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="purple"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="purple"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="purple"] .price_btn{border:none;} /* --- green --- */ html[data-theme="green"] .price_coupon{border:none;} html[data-theme="green"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#0ba111; } html[data-theme="green"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="green"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="green"] .pp_title_en, html[data-theme="green"] .cp_title_en, html[data-theme="green"] .ac_title_en, html[data-theme="green"] .nw_title_en, html[data-theme="green"] .pf_title_en, html[data-theme="green"] .list_title_en{color:var(--c-accent);} html[data-theme="green"] .rank_title{color:#0ba111;} html[data-theme="green"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="green"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="green"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="green"] .price_btn{border:none;} /* --- blue --- */ html[data-theme="blue"] .price_coupon{border:none;} html[data-theme="blue"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#1b12d9; } html[data-theme="blue"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="blue"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="blue"] .pp_title_en, html[data-theme="blue"] .cp_title_en, html[data-theme="blue"] .ac_title_en, html[data-theme="blue"] .nw_title_en, html[data-theme="blue"] .pf_title_en, html[data-theme="blue"] .list_title_en{color:var(--c-accent);} html[data-theme="blue"] .rank_title{color:#1b12d9;} html[data-theme="blue"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="blue"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="blue"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="blue"] .price_btn{border:none;} /* --- red --- */ html[data-theme="red"] .price_coupon{border:none;} html[data-theme="red"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#d91212; } html[data-theme="red"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="red"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="red"] .pp_title_en, html[data-theme="red"] .cp_title_en, html[data-theme="red"] .ac_title_en, html[data-theme="red"] .nw_title_en, html[data-theme="red"] .pf_title_en, html[data-theme="red"] .list_title_en{color:var(--c-accent);} html[data-theme="red"] .rank_title{color:#d91212;} html[data-theme="red"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="red"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="red"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="red"] .price_btn{border:none;} /* --- pink --- */ html[data-theme="pink"] .price_coupon{border:none;} html[data-theme="pink"] .footer_logo_site{ background:none; color:#ffb739; -webkit-text-fill-color:#ef1c93; } html[data-theme="pink"] .hero_logo_site{ background:none; color:#000; -webkit-text-fill-color:#000; } html[data-theme="pink"] .hero_logo_en span:nth-child(1){color:var(--c-accent);} html[data-theme="pink"] .pp_title_en, html[data-theme="pink"] .cp_title_en, html[data-theme="pink"] .ac_title_en, html[data-theme="pink"] .nw_title_en, html[data-theme="pink"] .pf_title_en, html[data-theme="pink"] .list_title_en{color:var(--c-accent);} html[data-theme="pink"] .rank_title{color:#ef1c93;} html[data-theme="pink"] .rank_title_l:nth-child(2){color:#000;} html[data-theme="pink"] .nav_toggle:not(.is_active){background:var(--c-accent);} html[data-theme="pink"] .nav_toggle.is_active span{background:var(--c-accent);} html[data-theme="pink"] .price_btn{border:none;} /* 当店おすすめコースの金額：yellow / orange は単色（黒）、それ以外は black と同じグラデ */ html[data-theme="orange"] .price_main_num, html[data-theme="orange"] .price_main_unit{ background:none; color:var(--c-accent-on-fill); -webkit-text-fill-color:var(--c-accent-on-fill); } html[data-theme="lightgreen"] .price_main_num, html[data-theme="lightgreen"] .price_main_unit, html[data-theme="lightblue"] .price_main_num, html[data-theme="lightblue"] .price_main_unit, html[data-theme="purple"] .price_main_num, html[data-theme="purple"] .price_main_unit, html[data-theme="green"] .price_main_num, html[data-theme="green"] .price_main_unit, html[data-theme="blue"] .price_main_num, html[data-theme="blue"] .price_main_unit, html[data-theme="red"] .price_main_num, html[data-theme="red"] .price_main_unit, html[data-theme="pink"] .price_main_num, html[data-theme="pink"] .price_main_unit{ background:linear-gradient(180deg, #ff7800 0%, #efce1c 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }