/*
Theme Name: Welcart Basic Child (oikawa78)
Theme URI: https://oikawa78.co.jp/store/
Description: 及川質店ストア用 welcart_basic 子テーマ。表示層（CSS・テンプレート上書き・デザイン）のみを担当する。業務ロジック（価格計算・管理画面拡張等）は自作プラグイン oikawa78-store に置くこと（Docs/projects/Store-development/SPEC.md 参照）
Template: welcart_basic
Author: oikawa78
Version: 0.1.0
*/
/* ここから下に子テーマ独自のスタイルを記述する */
/* 追加：カート/確認の単価セルに併記する「現金特価」（旧サイト踏襲・赤字）。
ロジック（金額計算・併記の挿入）はプラグイン Front\PriceDisplay。本CSSは見た目のみ。 2026/06/15 */
.oks-cash-price {
display: block;
margin-top: 4px;
color: #c00;
line-height: 1.3;
}
.oks-cash-price__label {
display: block;
font-size: 0.8em;
}
.oks-cash-price__amount {
display: block;
font-weight: bold;
}
/* 追加：確認画面で表直後に出す「現金特価が反映されています」注記（旧サイト踏襲）。
ロジック（現金系選択時のみ表示）はプラグイン Front\PriceDisplay。本CSSは見た目のみ。 2026/06/15 */
.oks-cash-note {
margin: 12px 0;
color: #1a6fb5;
font-size: 0.9em;
line-height: 1.5;
}
.oks-cash-note::before {
content: "\26A0\FE0F"; /* ⚠ */
margin-right: 4px;
}
/* 追加：配送・支払方法ページで各支払方法の説明文の先頭に出す価格案内（旧サイト踏襲）。
ロジック（settlement別の文面・売価/現金特価の計算）はプラグイン Front\PriceDisplay。本CSSは見た目のみ。 2026/06/16 */
.oks-payment-cash-notice {
margin: 0 0 6px;
font-weight: bold;
line-height: 1.5;
}
/* ============================================================
Phase 3 チャンク(1): メインサイトchrome統合（UI_PLAN.md §4.5）
chrome本体の見た目は /common/css/*（メインサイトCSS・functions.phpでenqueue）が担う。
ここには「ストアで追加した要素」のCSSのみ置く。 2026/07/10
============================================================ */
/* 追加：グローバルナビ末尾のカート（点数バッジ付き・モック build.py から移植） 2026/07/10 */
.Store_Cart_Nav a {
position: relative;
}
.Store_Cart_Badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--f_main-deep);
color: #fff;
font-family: var(--f_family_en);
font-weight: 700;
font-size: 1.1rem;
min-width: 18px;
height: 18px;
border-radius: 999px;
padding: 0 5px;
margin-left: 4px;
vertical-align: middle;
}
/* 追加：親テーマ(welcart_basic/style.css)の要素セレクタ打ち消し 2026/07/10
メインサイトには存在しない親テーマの汎用ルール（footer nav li の float:left、
footer a の白文字等）が移植chromeに漏れてレイアウト・色が崩れるため、
.Header/.Footer スコープで打ち消す。リセット値はメインサイトでの計算値
（base.css / footer.css / header.css）に一致させる。
Welcart本体ページ（カート・会員ページ等）の表示には影響しない。 */
header.Header {
margin-bottom: 0; /* 親: header { margin-bottom:1.4286em } */
border-bottom: none; /* 親: header { border-bottom:3px solid #efefef }（スマホ幅） */
}
/* 追加：親テーマ #main { margin: 2.857143em auto }（PC幅・約46px）の上マージン打ち消し 2026/07/12
固定ヘッダー分の余白は .oks の padding-top で管理しているため、親の上マージンがそのまま
「ヘッダー下の無駄な空き」になっていた（.home は親自身が margin:0 auto のためトップは無事）。
対象は .oks を使う商品詳細・カテゴリ一覧。
追加：購入フロー（カート系）も同様に打ち消す（チャンク(5)）。カート系ページは固有の body
クラスが無いため、#content.cart-page を持つラッパのみを :has() でスコープする（他ページ非波及）2026/07/13 */
body.single #main.wrapper,
body.category #main.wrapper,
#main.wrapper:has(#content.cart-page) {
margin-top: 0;
}
footer.Footer {
padding: 0; /* 親: footer { padding:.714286em 1.07143em } */
color: var(--f_dark); /* 親: footer { color:#fff } → メインはbody継承(--f_dark) */
}
.Footer a {
color: var(--f_dark); /* 親: footer a { color:#fff } → メインはbase.cssのa色 */
}
.Footer a:hover {
color: var(--f_dark); /* 親: footer a:hover { color:#aaa } → メインは色変化なし */
}
.Footer nav {
width: auto; /* 親: footer nav { width:1000px }（PC幅） */
margin-top: 0;
margin-left: 0;
margin-right: 0; /* 親: footer nav { margin:0 auto }。margin-bottomはfooter.cssの.Footer_Navに委ねる */
padding: 0; /* 親: footer nav { padding:1.071428em 0 }ほか */
}
.Footer nav li {
width: auto; /* 親: footer nav li { width:20% } */
padding-right: 0; /* 親: footer nav li { padding-right:2.142856em } */
float: none; /* 親: footer nav li { float:left } ←カラム崩れ（右外への押し出し）の主因 */
}
.Footer nav li:last-child {
margin-bottom: 0.3rem; /* 親: footer nav li:last-child { margin-bottom:0 } → メインは.Footer_Nav liの値 */
}
/* 追加：スマホ幅用カートタイル（ハンバーガーMenuボタンの左隣・992px以上は非表示） 2026/07/10
マークアップは sync_chrome_to_theme.py が store-chrome-header.php へ注入する。
見た目は header.css の .Ham_Btn / .Ham_Btn_Txt と対になるよう合わせている。 */
.Store_Cart_Mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 64px;
height: 100%;
background-color: var(--f_light);
position: absolute;
top: 0;
right: 87px; /* Ham_Btn(右15px＋幅64px)の左隣＋間8px */
z-index: 10;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
@media screen and (min-width: 992px) {
.Store_Cart_Mobile {
display: none;
}
}
.Store_Cart_Mobile_Icon {
width: 30px; /* base.cssの img{width:100%} 対策で明示 */
height: 24px;
}
.Store_Cart_Mobile_Txt {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
margin-top: 0.6em;
color: var(--f_main);
}
.Store_Cart_Mobile_Badge {
position: absolute;
top: 6px;
right: 4px;
margin-left: 0;
}
/* ============================================================
Phase 3 チャンク(2): 商品詳細ページ（.oks-*）
意匠の原典: mockups/02-item-single.html（承認済みモック02・build.py STORE_CSS）
から移植。カート併記用 .oks-cash-price（Phase 1・Front\PriceDisplay挿入）との
衝突を避けるため、商品詳細の意匠は .oks-price 配下にスコープする。 2026/07/11
============================================================ */
/* --- ページ共通ラッパー --- */
.oks {
max-width: 1177px;
margin: 0 auto;
/* 修正：固定ヘッダー（モバイル82px/PC127px）ぶんの padding-top を追加。
モックはPNG確認用のため未対応だった 2026/07/11 */
/* 修正：ヘッダー下の空きすぎを詰める（+24px→+8px・Webmaster指示） 2026/07/12 */
padding: 90px 16px 80px;
}
@media (min-width: 992px) {
.oks {
padding-top: 135px;
}
}
/* --- パンくず --- */
.oks-bc {
font-size: 1.3rem;
color: var(--f_darkgray);
margin: 0 0 16px; /* 修正：上マージンを削除（ヘッダー下ツメの一環） 2026/07/12 */
display: flex;
flex-wrap: wrap;
gap: 0.4em;
}
.oks-bc a:hover {
color: var(--f_main-deep);
}
.oks-bc span {
color: var(--f_gray);
}
/* --- バッジ --- */
.oks-badge {
display: inline-block;
font-family: var(--f_family_en);
font-weight: 700;
font-size: 1.1rem;
color: #fff;
border-radius: 999px;
padding: 3px 11px;
letter-spacing: 0.04em;
}
.oks-badge--new {
background: var(--f_main-deep);
}
.oks-badge--rec {
background: var(--f_blue);
}
.oks-badge--sold {
/* 修正：グレー→赤（Webmaster指示） 2026/07/12 */
background: var(--f_red);
}
/* 追加：手動タグ（未使用・美品・保証書等）のバッジ。日本語タグ名のため英字用フォント指定を
打ち消し、自動バッジ（NEW等・塗り）と区別が付く枠線スタイルにする（UI微調整④） 2026/07/12 */
.oks-badge--tag {
font-family: inherit;
color: var(--f_main-deep);
background: #fff;
border: 1px solid var(--f_main-deep);
padding: 2px 10px;
}
/* --- 2カラムグリッド --- */
.oks-single {
display: grid;
/* 修正：1fr（auto最小幅）だと Swiper のフレックス行(スライド×幅100%)の min-content が
トラック幅を循環拡大させレイアウトが爆発する（Chrome上限≈3355万pxに飽和）。
minmax(0,1fr) で最小幅を0にして防ぐ 2026/07/11 */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
@media (max-width: 991px) {
.oks-single {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
}
/* --- ギャラリー（Swiper メイン＋サムネ同期） --- */
.oks-gallery .swiper {
padding-bottom: 0; /* base.css の .swiper{padding-bottom:var(--f_space_5)} 上書きを打ち消し */
}
.oks-gallery .swiper-slide {
height: 100%; /* base.css の .swiper-slide{height:auto} 上書きを打ち消し（正方形コンテナに追従させる） */
}
.oks-gallery-main {
aspect-ratio: 1 / 1;
background: #fff;
border-radius: 12px;
border: 1px solid #eee2c8; /* 追加：メイン写真エリアにも角丸枠線（商品仕様画像と同系・Webmaster指示） 2026/07/12 */
overflow: hidden; /* 追加：角丸の内側に写真をおさめる 2026/07/12 */
}
.oks-gallery-main .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.oks-gallery-main .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
.oks-gallery-thumbs {
margin-top: 8px;
}
.oks-gallery-thumbs .swiper-slide {
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
opacity: 0.85;
}
.oks-gallery-thumbs .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.oks-gallery-thumbs .swiper-slide-thumb-active {
outline: 3px solid var(--f_main);
outline-offset: -3px;
opacity: 1;
}
/* --- 情報列 --- */
.oks-tags {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.oks-title {
font-size: 2.6rem;
font-weight: 700;
line-height: 1.4;
margin: 6px 0 10px;
}
.oks-code {
font-family: var(--f_family_en);
font-size: 1.3rem;
color: var(--f_darkgray);
margin-bottom: 12px;
}
.oks-skuname {
font-size: 1.4rem;
color: var(--f_darkgray);
margin-bottom: 8px;
}
/* --- 価格ブロック（決定D: ラベル「当店販売価格」・取消線通常価なし） --- */
.oks-price {
background: var(--f_lightgray);
border-radius: 16px;
padding: 20px 24px;
margin: 16px 0;
}
.oks-price__label {
color: var(--f_darkgray);
font-size: 1.4rem;
font-weight: 700;
}
/* 追加：通常価の表示（商品ごとのフラグON時のみ・取消線なし。
ISSUE-20260716-store-front-admin-batch D-3） 2026/07/16 */
/* 修正：ラベル横のカッコ書き（当店販売価格（通常価 ¥70,000））に変更＝インライン・
通常ウェイト（ラベルの太字を継がない）（Webmaster指示） 2026/07/17 */
.oks-price__regular {
color: var(--f_darkgray);
font-size: 1.3rem;
font-weight: 400;
margin-left: 2px;
}
.oks-price__sale {
display: flex;
align-items: baseline;
gap: 0.15em;
margin: 4px 0;
}
.oks-price__sale .yen {
font-size: 1.8rem;
font-weight: 700;
}
.oks-price__sale .num {
font-family: var(--f_family_en);
font-weight: 700;
font-size: 3.6rem;
line-height: 1;
color: var(--f_dark);
}
.oks-price__sale .tax {
font-size: 1.3rem;
color: var(--f_darkgray);
align-self: flex-end;
margin-left: 4px;
}
/* 現金特価（金額サイズ＝ラベルと同サイズ・2026-07-10決定） */
.oks-price .oks-cash-price {
display: flex;
align-items: baseline;
gap: 0.4em;
color: var(--f_red);
margin-top: 10px;
border-top: dashed 2px var(--f_main);
padding-top: 10px;
}
.oks-price .oks-cash-price .label {
font-size: 1.5rem;
font-weight: 700;
}
.oks-price .oks-cash-price .amount {
font-family: var(--f_family_en);
font-weight: 700;
font-size: 1.5rem;
line-height: 1;
}
/* ツールチップ（ホバー＋フォーカス=タップ対応。buttonなのでキーボードでも開ける） */
.oks-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: var(--f_blue);
color: #fff;
font-size: 1.2rem;
font-weight: 700;
cursor: help;
margin-left: 0.3em;
position: relative;
vertical-align: middle;
border: 0;
padding: 0;
line-height: 1;
}
.oks-tip:hover::after,
.oks-tip:focus::after {
content: attr(data-tip);
position: absolute;
bottom: 140%;
left: 50%;
transform: translateX(-50%);
width: 240px;
background: var(--f_dark);
color: #fff;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.5;
padding: 10px 12px;
border-radius: 10px;
z-index: 5;
text-align: left;
}
/* 追加：スクリーンリーダー専用テキスト（ツールチップ説明文のa11y補強・Codexレビュー[Low]対応） 2026/07/11 */
.oks-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- 注意文言・売り切れ・カートボタン --- */
.oks-note {
color: var(--f_main-deep);
font-size: 1.3rem;
font-weight: 700;
text-align: center;
margin: 10px 0;
}
.oks-soldout {
text-align: center;
font-weight: 700;
color: var(--f_red);
background: var(--f_lightgray);
border-radius: 12px;
padding: 16px;
margin: 10px 0;
}
.oks-btn-cart-wrap .skubutton {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 0.5em;
background: var(--f_main-deep);
color: #fff;
font-weight: 700;
font-size: 1.9rem;
padding: 18px;
border-radius: 15px;
border: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.oks-btn-cart-wrap .skubutton:hover {
filter: brightness(1.05);
}
/* --- 決済4種タイル（同寸・2026-07-10決定） --- */
.oks-pay {
display: flex;
gap: 8px;
justify-content: center;
margin: 14px 0;
}
.oks-pay span {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 78px;
height: 64px;
font-size: 1.1rem;
font-weight: 700;
color: var(--f_dark);
background: #fff;
border: 2px solid var(--f_main);
border-radius: 10px;
line-height: 1;
}
.oks-pay svg {
width: 22px;
height: 22px;
fill: none;
stroke: var(--f_main-deep);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --- サービスリンク --- */
.oks-svc {
margin: 16px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.oks-svc a {
position: relative;
padding-left: 2.6rem;
font-weight: 700;
font-size: 1.4rem;
}
.oks-svc a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: var(--f_dark) center/45% no-repeat;
background-image: url("data:image/svg+xml;utf8,");
}
/* --- 外部ショップ誘導（ブランドカラー・2026-07-10決定） --- */
.oks-ext {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 8px;
}
.oks-ext a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4em;
color: #fff;
font-size: 1.35rem;
font-weight: 700;
border-radius: 10px;
padding: 12px 8px;
line-height: 1.3;
}
.oks-ext a .ic {
font-size: 1.1rem;
opacity: 0.9;
}
.oks-ext a.yahoo {
background: #ff0033;
}
.oks-ext a.rakuten {
background: #bf0000;
}
.oks-ext a:hover {
filter: brightness(1.1);
color: #fff;
}
/* --- 詳細セクション（コメント/商品仕様/商品状態/付属品/予備項目） --- */
.oks-section {
margin-top: 28px;
}
.oks-section h3 {
text-align: center;
font-size: 2rem;
font-weight: 700;
color: var(--f_main-deep);
position: relative;
margin: 36px 0 16px;
}
.oks-section h3::before,
.oks-section h3::after {
content: "";
display: inline-block;
width: 30px;
height: 2px;
background: var(--f_main-deep);
vertical-align: middle;
margin: 0 12px;
}
.oks-section p,
.oks-section .oks-section__body {
line-height: 1.9;
}
/* 追加：商品説明（SCF拡張欄）内のリスト表示の復旧（ISSUE-20260716-store-front-admin-batch B-1）。
原因はカート説明文（usces_cart.css の ISSUE-20260716 #5）と同一:
①テンプレートが nl2br で出力するため 内（〜- 間）に
が入り
項目間に余計な空白が開く → ul 内の
だけ非表示（リスト外の段落間
は残す）
②親テーマ base.css の li{list-style:none} で行頭記号が消える → disc を復活 2026/07/16 */
.oks-section ul {
list-style: disc;
padding-left: 1.6em;
margin: 6px 0;
}
.oks-section ul li {
list-style: disc;
margin: 2px 0;
}
.oks-section ul br {
display: none;
}
.oks-spec-img {
display: block;
max-width: 100%;
width: auto;
margin: 12px auto;
border-radius: 12px;
/* 追加：角丸の枠線（白背景の物撮り画像の輪郭を出す・色はサイドバー枠と同系のベージュ）
（Webmaster指示） 2026/07/12 */
border: 1px solid #eee2c8;
}
/* ============================================================
商品詳細 D案: コメント以降の2カラム化＋左サイドバー（UI微調整⑤）
原典: mockups/ui-refine-20260712/mock_D_top.png・mock_D_sticky.png（承認済み）
DOM順=本文→サイドバー（スマホはカテゴリ欄が本文の後ろへ・2026-07-12決定）。
PCはグリッドで左サイドバー化し、おすすめ枠とsticky枠はスマホ非表示。
追加 2026/07/12
============================================================ */
@media (min-width: 992px) {
.oks-lower {
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
gap: 40px;
margin-top: 28px;
}
.oks-lower > .oks-section {
grid-column: 2;
grid-row: 1;
margin-top: 0;
}
.oks-lower > .oks-side {
grid-column: 1;
grid-row: 1;
/* 高さは行いっぱいに伸ばす（stretch既定）＝sticky枠の可動域を右カラムの丈まで確保 */
}
}
.oks-side {
display: flex;
flex-direction: column;
gap: 20px;
}
.oks-side__box {
background: #fff;
border: 1px solid #eee2c8;
border-radius: 14px;
padding: 18px 18px 14px;
}
.oks-side__ttl {
font-size: 1.4rem;
font-weight: 700;
color: var(--f_main-deep);
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.oks-side__cats {
list-style: none;
margin: 0;
padding: 0;
}
.oks-side__cats li {
border-bottom: 1px dashed #eee2c8;
}
.oks-side__cats li:last-child {
border-bottom: none;
}
.oks-side__cats a {
display: block;
padding: 9px 2px;
font-size: 1.4rem;
color: var(--f_dark);
}
.oks-side__cats a::before {
content: "›";
color: var(--f_main-deep);
margin-right: 8px;
font-weight: 700;
}
.oks-side__cats a:hover {
color: var(--f_main-deep);
}
.oks-side__reco {
display: flex;
flex-direction: column;
gap: 12px;
}
.oks-side__reco a {
display: grid;
grid-template-columns: 72px 1fr;
gap: 10px;
align-items: center;
color: var(--f_dark);
}
.oks-side__reco img,
.oks-side__reco .oks-ph {
width: 72px;
height: 54px;
object-fit: cover;
border-radius: 8px;
}
.oks-side__reco .t {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 1.2rem;
line-height: 1.45;
}
.oks-side__reco .p {
display: block;
font-family: var(--f_family_en);
font-size: 1.25rem;
font-weight: 700;
color: var(--f_main-deep);
}
/* 価格欄の追従（.oks-side__follow＝単一ボックス方式）。
修正：複製枠の出現方式→価格欄そのものの追従へ変更（Webmaster目視フィードバック第3ラウンド）。
sticky top = 「画面高−自身の高さ−24px」（store-item.js が実測でセット）＝自然位置が
その線より上に行こうとすると画面下端に貼り付く。自然位置がそれより下にある間は通常フロー
（＝基本の並び。上のカテゴリ/おすすめには決してかぶらない）。セクション末尾では
コンテナ（サイドバー）内にクランプされる。JS未実行時は200vh＝実質無効で通常フロー 2026/07/12 */
.oks-side__follow {
position: sticky;
top: var(--oks-follow-top, 200vh);
}
/* 「頁のトップへ戻る」＝絶対配置で価格欄の上に重ねる（フロー高さに影響させない）。
カテゴリ・おすすめが画面上部へ消えたら store-item.js が .is-visible でフェード出現 2026/07/12 */
.oks-side__totop {
display: block;
text-align: center;
font-size: 1.3rem;
font-weight: 700;
color: var(--f_main-deep);
background: #fff;
border: 1px solid var(--f_main-deep);
border-radius: 999px;
padding: 10px;
margin-bottom: 12px;
}
.oks-side__follow .oks-side__totop {
position: absolute;
top: -58px;
left: 0;
right: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s;
}
.oks-side__follow .oks-side__totop.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.oks-side__totop:hover {
color: #fff;
background: var(--f_main-deep);
}
.oks-side__cart {
background: #fff;
border: 1px solid #eee2c8;
border-radius: 14px;
padding: 16px 18px;
}
.oks-side__cart .label {
font-size: 1.2rem;
color: var(--f_darkgray);
}
.oks-side__cart .sale {
font-family: var(--f_family_en);
font-size: 2rem;
font-weight: 700;
}
.oks-side__cart .sale small {
font-family: var(--f_family_body);
font-size: 1.1rem;
color: var(--f_darkgray);
}
.oks-side__cart .cash {
font-size: 1.3rem;
font-weight: 700;
color: var(--f_red);
margin-bottom: 10px;
}
.oks-side__cartbtn {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 0.5em;
background: var(--f_main-deep);
color: #fff;
font-weight: 700;
font-size: 1.5rem;
padding: 12px;
border-radius: 999px;
border: none;
cursor: pointer;
-webkit-appearance: none;
}
.oks-side__cartbtn:hover {
filter: brightness(1.05);
}
@media (max-width: 991px) {
/* スマホ=1カラム: カテゴリ欄のみ本文の後ろに表示。おすすめ枠（2026-07-12指示）と
sticky枠（左カラムの空欄という前提が無い）は出さない */
/* 修正：価格欄（.oks-side__follow）もスマホでは出さない（上部の本体カートと重複） 2026/07/12 */
.oks-side {
margin-top: 28px;
}
.oks-side__box--reco,
.oks-side__follow {
display: none;
}
}
/* ============================================================
ストアトップ＋カテゴリ一覧（モック03移植・Phase 3 チャンク(3)）
追加：トップ/一覧コンポーネント 2026/07/11
============================================================ */
/* --- セクション見出し（RECOMMEND / NEW ARRIVAL / CATEGORY） --- */
.oks-h2 {
position: relative;
padding-left: 3rem;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.4;
margin: 48px 0 20px;
}
.oks-h2::before {
content: "";
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
background: var(--f_main);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.oks-h2 .en {
font-family: var(--f_family_en);
color: var(--f_main-deep);
font-size: 1.3rem;
display: block;
font-weight: 700;
letter-spacing: 0.06em;
margin-bottom: 2px;
}
/* --- 画像プレースホルダ（画像未登録時のフォールバック） --- */
.oks-ph {
background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 12px, #f7f7f7 12px, #f7f7f7 24px);
display: flex;
align-items: center;
justify-content: center;
color: var(--f_gray);
font-family: var(--f_family_en);
font-weight: 700;
font-size: 1.4rem;
border-radius: 12px;
}
/* --- 商品カードグリッド（一覧・おすすめ・新着・関連） --- */
.oks-grid {
display: grid;
/* 修正：4列→3列→4列へ戻す。3列は間延びして見えるため、4列のままタグバッジを
小型化して1行に収める方針に変更（Webmaster指示） 2026/07/12 */
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 1frのmin-content爆発対策は商品詳細と同様 */
gap: 20px;
}
.oks-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 3px 13px #0000000d;
overflow: hidden;
transition: 0.15s;
display: block;
color: var(--f_dark);
}
.oks-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px #00000014;
color: var(--f_dark);
}
.oks-card .oks-ph,
.oks-card .oks-card__img {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
object-fit: cover;
display: block;
border-radius: 0;
}
.oks-card__body {
padding: 14px;
}
.oks-card__badges {
display: flex;
gap: 6px;
margin-bottom: 6px;
min-height: 20px;
/* 追加：バッジは1行固定＝折り返し・つぶれを禁止し、あふれ分は隠す
（テンプレート側の先頭3件制限との二段構え・Webmaster指示） 2026/07/12 */
flex-wrap: nowrap;
overflow: hidden;
}
.oks-card__badges .oks-badge {
flex: 0 0 auto;
white-space: nowrap;
/* 追加：カード上のバッジは小型化（4列幅でタグ3つを1行に収める・Webmaster指示） 2026/07/12 */
font-size: 1rem;
padding: 2px 8px;
}
.oks-card__title {
font-size: 1.4rem;
font-weight: 700;
line-height: 1.5;
height: 4.2rem;
overflow: hidden;
}
.oks-card__price {
margin-top: 8px;
}
.oks-card__sale {
font-family: var(--f_family_en);
font-weight: 700;
font-size: 2rem;
}
.oks-card__sale small {
font-family: var(--f_family_body);
font-size: 1.1rem;
color: var(--f_darkgray);
}
.oks-card__cash {
color: var(--f_red);
font-size: 1.3rem;
font-weight: 700;
margin-top: 2px;
}
.oks-card__cash .amount {
font-family: var(--f_family_en);
}
/* --- トップ: テキストヒーロー（決定E・将来ビジュアル追加時はgrid2カラム化で拡張） --- */
.oks-hero {
background: linear-gradient(120deg, var(--f_main-bright), #fff);
border-radius: 20px;
padding: 44px 40px;
margin: 20px 0 8px;
}
.oks-hero .shopname {
font-size: 1.5rem;
font-weight: 700;
color: var(--f_main-deep);
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.oks-hero h2 {
font-size: 3.2rem;
font-weight: 900;
line-height: 1.4;
}
.oks-hero h2 .accent {
color: var(--f_main-deep);
}
.oks-hero p {
margin-top: 12px;
color: var(--f_dark);
}
.oks-hero__cta {
text-align: left;
margin-top: 20px;
}
/* --- トップ: カテゴリタイル --- */
.oks-cats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.oks-cat {
background: #fff;
border-radius: 14px;
box-shadow: 0 3px 13px #0000000d;
padding: 18px;
text-align: center;
font-weight: 700;
color: var(--f_dark);
}
.oks-cat:hover {
color: var(--f_main-deep);
}
.oks-cat .ic {
width: 48px;
height: 48px;
margin: 0 auto 8px;
border-radius: 50%;
background: var(--f_main);
display: flex;
align-items: center;
justify-content: center;
}
.oks-cat .ic img {
width: 18px;
}
/* --- ボタン・もっと見る --- */
.oks-more {
text-align: center;
margin-top: 24px;
}
.oks-btn {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-weight: 700;
border-radius: 15px;
padding: 13px 30px;
font-size: 1.6rem;
cursor: pointer;
border: none;
background: var(--f_main);
color: var(--f_dark);
}
.oks-btn--primary {
background: var(--f_main-deep);
color: #fff;
}
.oks-btn:hover {
filter: brightness(1.05);
color: var(--f_dark);
}
.oks-btn--primary:hover {
color: #fff;
}
/* --- 一覧: 見出し行・並び替え --- */
.oks-listhead {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 8px 0 20px;
}
.oks-listhead h1 {
font-size: 2.6rem;
font-weight: 700;
}
.oks-sort select {
font-size: 1.4rem;
padding: 8px 12px;
border: 2px solid var(--f_gray);
border-radius: 10px;
background: #fff;
}
.oks-noitems {
text-align: center;
padding: 40px 0;
color: var(--f_darkgray);
}
/* --- 一覧: ページャ（WP paginate_links の .page-numbers に適用） --- */
.oks-pager {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 32px;
}
.oks-pager .page-numbers {
min-width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-family: var(--f_family_en);
background: #fff;
border: 2px solid var(--f_gray);
padding: 0 6px;
color: var(--f_dark);
}
.oks-pager .page-numbers.current {
background: var(--f_main);
border-color: var(--f_main);
}
.oks-pager .page-numbers.dots {
background: transparent;
border: none;
}
/* --- レスポンシブ（モック03の991px＋スマホ微調整） --- */
@media (max-width: 991px) {
.oks-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oks-cats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.oks-hero {
padding: 28px 20px;
}
.oks-hero h2 {
font-size: 2.4rem;
}
.oks-grid {
gap: 12px;
}
.oks-listhead h1 {
font-size: 2rem;
}
}
/* ==========================================================================
ストア全体の書体・テキストリンク（ISSUE-20260716-store-ui-refinements）
========================================================================== */
/* 追加：ストアのメイン書体をヒラギノに（メインサイトに先行・Webmaster決定 2026-07-16）。
chrome CSS（base.css/variables.css）はメインサイトと共用のため触らず、後読みの本CSSで
store だけ上書きする。Zen Kaku Gothic New はスタックから外し、ヒラギノ非搭載の
Windows はメイリオ表示（とりあえずの暫定・Webmaster指示）。
英字用 --f_family_en（poppins）は変更しない。 2026/07/16 */
:root {
--f_family_body: "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, メイリオ, sans-serif;
--f_family_ja: "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, メイリオ, sans-serif;
}
body {
font-family: var(--f_family_body);
}
/* フォーム部品はブラウザ既定でシステムフォントになり body を継承しないため明示的に継承させる
（カートの入力欄・セレクト等も本文と同じヒラギノに揃える） 2026/07/16 */
input,
button,
textarea,
select {
font-family: inherit;
}
/* 追加：商品詳細の説明ブロック（コメント/商品仕様/商品状態/付属品/予備項目＝手書き本文）内の
テキストリンクに、メインサイトのテキストリンク（utilities.css .TxtLink_Blue）と同じ
リンク色＋下線を自動適用する。ボタン・カード・ナビ等のUI部品は .oks-section の外のため波及しない。
TxtLink_Ext（外部リンク）は下線を出さない仕様のため除外する。
カート系ページの説明文への同適用は usces_cart.css 側に記載。 2026/07/16 */
.oks-section a:not(.TxtLink_Ext) {
color: var(--f_blue);
text-decoration: underline;
}
/* 追加：外部リンク記号（旧サイトの 相当の再現）。
Font Awesome は読み込まず、クラス＋::after のCSSのみで表示する（メインサイト utilities.css の
PDFアイコン a.TxtLink_Blue[href$=".pdf"]::after と同じ考え方）。mask＋currentColor で
アイコン色はリンク色に自動追従。付与は手動（Webmaster決定 2026-07-16）。
使い方: メーカーサイト
メインサイトでも使う段になったら utilities.css へ昇格する。 2026/07/16 */
a.TxtLink_Ext {
color: var(--f_blue);
text-decoration: none; /* TxtLink_Ext は下線を出さない（Webmaster指示 2026-07-16）。目印は末尾の外部リンクアイコン */
/* 太字にはしない（本文と同じウェイトに揃える・Webmaster指示 2026-07-16） */
}
a.TxtLink_Ext::after {
content: "";
display: inline-block;
/* SVGのアイコン形状は viewBox 24px 中の約18px分しか占めないため、文字と同じ見た目の高さに
するには箱を文字より大きめ（1.25em）にする（Webmaster指示 2026-07-16。1em では小さく見えた） */
width: 1.25em;
height: 1.25em;
margin-left: 0.1em; /* テキストとアイコンの間隔を詰める（Webmaster指示 2026-07-16。0.25em → 0.1em） */
vertical-align: -0.22em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ==========================================================================
在庫ゼロ商品の SOLD リボン（ISSUE-20260718 A-1） 2026/07/19
素材=images/sold.png（512px正方・透過・左上対角バンド）。一覧カードと
商品詳細メイン画像の左上に重ねる。.oks-card / .oks-gallery-main とも
overflow:hidden のため角丸に沿って自動で収まる。クラスはテンプレ側で
在庫ゼロ（usces_have_zaiko_anyone が false）のとき oks-sold を付与。
========================================================================== */
.oks-card.oks-sold,
.oks-gallery-main.oks-sold {
position: relative;
}
.oks-card.oks-sold::after,
.oks-gallery-main.oks-sold::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
max-width: 210px;
aspect-ratio: 1 / 1;
background: url(images/sold.png) top left / contain no-repeat;
pointer-events: none; /* Swiper のドラッグ・カードのクリックを妨げない */
z-index: 5; /* swiper-wrapper(z=1) より上 */
}
/* ==========================================================================
固定ページ（案内ドキュメント・page.php）（ISSUE-20260718 A-2） 2026/07/19
返品・交換・保証について／お支払い方法／送料・配送方法について 等の
読みものページ。テキストリンク色は .oks-section の既存共通ルールに従う。
========================================================================== */
.oks-page .oks-doc {
max-width: 880px;
margin: 0 auto;
}
.oks-page .oks-doc__title {
font-size: 2.6rem;
font-weight: 700;
margin: 0 0 24px;
}
.oks-page .oks-doc__body {
font-size: 1.5rem;
line-height: 2;
}
.oks-page .oks-doc__body h2 {
font-size: 2rem;
font-weight: 700;
margin: 40px 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--f_main-deep);
}
.oks-page .oks-doc__body h2:first-child {
margin-top: 0;
}
.oks-page .oks-doc__body h3 {
font-size: 1.7rem;
font-weight: 700;
margin: 28px 0 10px;
}
.oks-page .oks-doc__body p {
margin: 0 0 16px;
}
/* dt=項目見出し / dd=説明（返品・保証／支払方法の規定リスト） */
.oks-page .oks-doc__body dt {
font-weight: 700;
margin: 24px 0 6px;
padding-left: 12px;
border-left: 4px solid var(--f_main-deep);
}
.oks-page .oks-doc__body dd {
margin: 0 0 6px;
padding-left: 16px;
}
/* 親テーマ base.css の li{list-style:none} 打ち消し（拡張説明欄・カート説明文と同じ対処） */
.oks-page .oks-doc__body ul {
list-style: disc;
padding-left: 24px;
margin: 0 0 16px;
}
.oks-page .oks-doc__body ul li {
list-style: disc;
margin: 4px 0;
}
.oks-page .oks-doc__body img {
max-width: 100%;
height: auto;
}
@media (max-width: 991px) {
.oks-page .oks-doc__title {
font-size: 2rem;
}
}
/* 追加：商品詳細の案内3リンク（返品・交換・保証／お支払い方法／送料・配送方法）を
通常のテキストリンク色（--f_blue＋下線）に合わせる（ISSUE-20260718 A-2①）。
丸矢印アイコンもリンク色に追従させる。 2026/07/19 */
.oks-svc a {
color: var(--f_blue);
text-decoration: underline;
}
.oks-svc a::before {
background-color: var(--f_blue);
}
/* ==========================================================================
404ページ（ISSUE-20260718 A-4） 2026/07/19
メインサイト error.php のトーン踏襲＋商品検索＋カテゴリタイル。
========================================================================== */
.oks-404__head {
max-width: 720px;
margin: 0 auto 24px;
text-align: center;
}
.oks-404__code {
font-family: poppins, sans-serif;
font-size: 4.2rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--f_main-deep);
line-height: 1.1;
}
.oks-404__title {
font-size: 2.2rem;
font-weight: 700;
margin: 12px 0 14px;
}
.oks-404__msg {
font-size: 1.5rem;
line-height: 2;
margin: 0 0 20px;
}
.oks-404__actions {
margin: 0 0 8px;
}
.oks-404__search {
display: flex;
gap: 10px;
max-width: 560px;
margin: 0 0 8px;
}
.oks-404__search input[type="text"] {
flex: 1 1 auto;
font-size: 1.5rem;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 10px;
background: #fff;
}
.oks-404__search button {
flex: 0 0 auto;
cursor: pointer;
border: none;
}
@media (max-width: 991px) {
.oks-404__code {
font-size: 3.2rem;
}
.oks-404__title {
font-size: 1.8rem;
}
}