:root { /* 欧文フォント（Source Code Pro / Roboto / Assistant）はどれも日本語のグリフを * 持たない。そのため和文の受け皿として、どのスタックにも 'Noto Sans JP' を挟む。 * 挟まないと日本語だけが OS 標準のフォントで描かれ（Mac ならヒラギノ、 * Windows なら游ゴシック等）、閲覧環境によって字面が変わる。 * 欧文は先頭のフォントがそのまま使われるので、見た目は変わらない。 * Noto Sans JP は inc/enqueue.php で Google Fonts から読み込んでいる。 */ --astra-source-code-pro: 'Source Code Pro', 'Noto Sans JP', monospace; --astra-roboto: 'Roboto', 'Noto Sans JP', sans-serif; /* 以前は '"Noto Sans JP"' と引用符が二重になっていた。引用符の記号ごと * フォント名と見なされるため一度もマッチせず、この変数を使った箇所の和文は * 常に OS 標準のフォントで描かれていた（移行初回から入っていた不具合）。 */ --astra-notosansjp: 'Noto Sans JP', sans-serif; --font-heading-family: var(--astra-source-code-pro); /* 本文も同じ理由で和文の受け皿を足す。canon（astra-tokens.css）では * `Assistant, sans-serif` で、Assistant は欧文しか持たない。 * 欧文は Assistant のまま変えず、和文だけ Noto Sans JP に受け止めさせる。 */ --font-body-family: Assistant, 'Noto Sans JP', sans-serif; --font-heading-weight: var(--astra-font-weight-regular); --astra-font-weight-thin: 100; --astra-font-weight-extralight: 200; --astra-font-weight-light: 300; --astra-font-weight-regular: 400; --astra-font-weight-medium: 500; --astra-font-weight-semibold: 600; --astra-font-weight-bold: 700; --astra-font-weight-extrabold: 800; --astra-font-weight-black: 900; --astra-gray: #CBCBCB; } body { margin-top: 160px; background-color: #000000 !important; @media screen and (max-width: 768px) { margin-top: 80px; } } .section-container { max-width: 1440px; margin-inline: auto; padding-inline: 12px; @media screen and (max-width: 768px) { padding-inline: 18px; } } .astra-section-title { .astra-section-title__box { width: 32px; height: 8px; background: #4E4545 0 0 no-repeat padding-box; content: ""; margin-bottom: 14px; display: block; @media screen and (max-width: 768px) { width: 22px; height: 5px; margin-bottom: 4px; } } .astra-section-title__title { color: #CBCBCB; font-family: var(--astra-source-code-pro), monospace; font-size: 28px; @media screen and (max-width: 768px) { font-size: 18px; font-weight: var(--astra-font-weight-light); } } } .astra-star-divider { display: flex; justify-content: space-between; align-items: center; gap: 10px; .svg-wrapper { width: 45px; height: 38px; svg { display: block; } } .astra-star-divider-separator { height: 1px; background: #989898; flex: 1; margin: 0; } } .shopify-policy__title { h1 { color: #CBCBCB; } } .shopify-policy__body { color: #CBCBCB; h1,h2,h3,h4,h5,h6 { color: #CBCBCB; } } /* 固定ページの標準余白（page.php のインライン style から移動）。 */ .astra-page { padding-block: 4rem; } /* --- 配色トークンの整合 --------------------------------------------------- * astra-tokens.css はライブ本番の から取得した Dawn の算出値で、 * body に付く color-scheme-1 は明色（背景 白 / 文字 #121212）のままになっている。 * 一方このファイルは body の背景を黒で塗るため、トークンを参照している箇所 * ——商品詳細・WooCommerce の出力・記事カード・404・検索結果——が * 黒地に黒で描画され、ほぼ判読できない状態だった。 * * トップページは各セクションの CSS が色を直に指定しているため無事だったが、 * トークンに乗っている画面はすべて影響を受けていた。 * * astra-tokens.css は「本番から取得した値」をそのまま残したいので触らず、 * 背景を黒にしているのと同じこの場所で暗色テーマへ揃える。 * * 背景トークンも変更する。当初は「各セクションの CSS が上書きしているから * 不要」と判断したが、Dawn は擬似要素でも背景を塗っており * （例: .quantity::before が --color-background で 140x54 を白く塗りつぶし、 * 商品詳細の数量入力が真っ白な塊に見えていた）、要素の背景だけを見た * 調査では取りこぼしていた。 */ body, .color-scheme-1 { --color-foreground: 255, 255, 255; --color-background: 0, 0, 0; --gradient-background: #000000; --color-background-contrast: 60, 60, 60; --color-link: 255, 255, 255; --color-secondary-button-text: 255, 255, 255; } /* 検索の入力欄。Dawn の .field__input は背景に --color-background（＝白）を * 使うため、前景を白に揃えた結果ヘッダーのオーバーレイでも検索結果ページでも * 白地に白文字になっていた。暗色の入力欄へ揃える。 */ .search__input, .search__input.field__input { background-color: rgba(255, 255, 255, 0.06); color: #fff; } .search__input::placeholder { color: rgba(255, 255, 255, 0.5); } /* 記事カードの重複表示。Shopify の article-card.liquid は card__content を * 内側（card__inner の中）と外側の2箇所に出力し、blog_card_style の設定に * 応じて Dawn の CSS がどちらかを隠す。当テーマはその設定を持たないため、 * テンプレート側で card--card に固定してある。 * * card--card を選んだのは実測の結果。画像なしのカードでは Dawn が * 「.card--card.card--text .card__inner { display: none }」で内側ごと隠すため * 重複が自動的に解消する。card--standard だとどちらも隠れないうえ、 * 自前で内側を隠すとカードの高さが 0 に潰れて何も見えなくなる * （.card__content の grid-template-rows が minmax(0,1fr) を含み、 * カードの高さを .card__inner から得ているため）。 * * 画像ありのカードは内側が画像で高さを持つので、内側の本文だけを隠せばよい。 */ .article-card.card--card.card--media > .card__inner > .card__content { display: none; } /* --- 重なり順 ------------------------------------------------------------- * ヘッダーは position: fixed だが z-index を持っておらず、後から来る * トップページのヒーロー（.hero-image-wrapper）が全面を覆っていた。 * その結果ヘッダーのリンクもアイコンも一切クリックできなかった。 * 既存の値（背景動画 -1 / ドロワー 9）と衝突しない範囲で層を明示する。 */ .custom-header { z-index: 5; } .astra-announcement { z-index: 4; } /* --- ボタンの外周リング --------------------------------------------------- * Dawn の .button::after は --buttons-border-width の幅で * rgba(var(--color-button)) のリングを描く。--color-button は明色スキームの * 18,18,18 のままなので、黒い枠がボタンの外側に浮いて見えていた * （カートに追加・Return to shop・ドロワーの入力欄など全体）。 * リングを 0 幅にして消し、ボタン自体は暗色テーマに合わせて白抜きにする。 * 主要 CTA はシアン塗り（astra-woo.css）なので、白抜きは副次ボタン用。 */ :root { --buttons-border-width: 0px; } body, .color-scheme-1 { --color-button: 255, 255, 255; --color-button-text: 18, 18, 18; } /* --- 「送料無料」タグ ----------------------------------------------------- * ニコチンを含まない商品は送料がかからない（送料は点数ベースで、点数を持つ * のはニコチン製品だけ。plugins/astra-shipping-nicotine）。商品詳細では * スペック行「Nicotine 0％」の隣に出して、開いてすぐ分かるようにする。 * 一覧カードでは行の中ではなく写真の左下に、「セール」と並べて重ねる * （位置と色の上書きは component-card-astra-product.css の .card__badge 側。 * 写真の上では白地に反転させている）。 * * ★ボタンに見せないこと。カードの「カートに追加」（component-card-astra-product.css * の .astra-add-button）は塗りではなく **透明地・#4EC3E1 の枠線・border-radius: * 9999px** で描かれている。同じカードの中で数十pxしか離れていないので、 * タグをシアンの丸い枠にすると押せるものと区別が付かなくなる（実際にそうなった）。 * 色を変えるだけでは形が残るため、**色・形・塗りの3つとも**ボタンからずらす: * 色 → ブランド色を足さず無彩色。シアンは「押せる場所」の合図に残す * 形 → 完全な角丸ではなく 3px。丸ボタンとは別の語彙にする * 塗り → 枠線ではなく薄い塗り。小さい画面でも輪郭が消えない * * 文字は行より一回り小さく、字間を少し開けて注記として読ませる。 * inline-block なのは、行が折り返してもタグが割れないようにするため。 */ .astra-free-shipping { display: inline-block; margin-left: 0.6em; padding: 0.2em 0.6em; color: #E4E4E4; background: rgba(255, 255, 255, 0.12); border-radius: 3px; font-family: var(--astra-source-code-pro), sans-serif; font-weight: var(--astra-font-weight-medium); /* 0.78em では商品詳細のスペック行（18px）の中で約 14px、ヘッダーの小さい * 行では 11px 台まで落ちて読めなかった。0.92em にして、隣の行より * わずかに小さい程度に留める（注記として読ませる形は変えない）。 */ font-size: 0.92em; line-height: 1.5; letter-spacing: 0.06em; white-space: nowrap; vertical-align: middle; }