@charset "UTF-8";
/* よつばショップ共通スタイル（正はmock: 設計書/2026-08-02-yotsubashop-mock） */

/* ==== 配色（このブロックだけを差し替えれば見た目の色がまるごと変わる） ====
   2026-08-03 変更1: 会社サイト（japanhac.com）に合わせた、温かみのあるベージュ系の
   配色を「試しに」導入。緑の識別色（#2f9e63）・注文ボタンのオレンジ（#e67e22）・
   価格の赤（#c0392b）は、このブロックの変数値として書き換えただけで、下の実際の
   スタイル定義はすべてこの変数を参照している（色を直書きした箇所は残していない）。
   2026-08-09 変更2: ディーライズ寄せの白地×青系へリメイク。

   元の緑の配色に「戻す」場合は、このブロックをファイル最後にコメントで残してある
   「元の配色（緑）に戻す場合」のブロックの中身とまるごと入れ替えるだけでよい。
   ベージュへ戻す場合は「ベージュに戻す場合」のブロックを使用。
   変数名は同じなので、そこから下のCSSは一切書き換え不要。

   Amazon購入パネルの色（--amazon 系）はマーケットプレイス自身の色であり、
   このショップの配色変更とは無関係に固定（変更しない）。 */
:root {
  /* ==== 2026-08-09 リメイク: 白地×青系（ディーライズ寄せ・設計書 2026-08-09-yotsubashop-remake-design.md） ==== */
  --bg-page:      #ffffff;
  --bg-tint:      #eef3fa;
  --text-strong:  #16233a;
  --text-body:    #2c3648;
  --text-muted:   #6b7686;
  --line-soft:    #e3e8f0;
  --line-mid:     #c9d2e0;

  --accent-light: #dce8f7;
  --accent-mid:   #7ba3d6;
  --accent-deep:  #1f5aa8;
  --accent-solid:       #164a8f;
  --accent-solid-hover: #0f3a73;

  --price:            #c0392b;
  --order-btn:        #d35400;
  --order-btn-hover:  #b34700;
  --order-btn-shadow: #8f3900;
  --order-tint:       #fdf3ec;

  --ok-bg:   #e7f2e7;
  --ok-text: #2e6b34;
  --danger-bg:     #fbeaea;
  --danger-text:   #c0392b;
  --danger-border: #e8b8b8;
  --neutral-tag: #97a1ae;
  --disabled-bg: #c4cbd6;

  /* Amazon購入パネル: マーケットプレイス自身の色（固定・変更対象外） */
  --amazon:      #ff9900;
  --amazon-text: #c07000;
  --amazon-tint: #fff7ea;
}

/* ==== top.html 全体 ==== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif; color:var(--text-body); background:var(--bg-page); }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1200px; margin:0 auto; padding:0 16px; }

/* 2カラム（左サイドバー） */
.layout { display:flex; gap:22px; align-items:flex-start; margin-top:18px; }
/* position:relative は角の丸め用ではなく、変更5の小分類パネル（右へ張り出す）を
   本文（main.mn）より手前（上）に描かせるための土台。フレックスの並び順は
   aside→mainなので、position:staticのままだと張り出したパネルの一部がmain側の
   描画に隠れてしまうことがある（DOM順で後にあるものが上に乗るため）。 */
aside.side { width:210px; flex-shrink:0; position:relative; z-index:2; }
/* overflow:hidden をやめた（変更5）。小分類パネルがこの箱の外（右）へ張り出すため、
   ここでクリップすると出したパネルが見えなくなってしまう。角の丸めは、
   常に見えているh3の上端だけに個別のborder-radiusを付けて代わりに実現する
   （中身が無いときの見た目は従来と変わらない）。 */
.side-box { border:1px solid var(--line-mid); border-radius:8px; margin-bottom:16px; }
.side-box h3 { background:var(--accent-solid); color:#fff; font-size:14px; padding:9px 12px; border-radius:7px 7px 0 0; }
.side-box ul { list-style:none; }
.side-box li.parent { border-top:1px solid var(--line-soft); }
.side-box li.parent > a { display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13px; font-weight:bold; }
.side-box li.parent > a:hover { background:var(--bg-tint); color:var(--accent-solid); }
.side-box li.child a { display:block; padding:6px 12px 6px 26px; font-size:12px; color:var(--text-body); }
.side-box li.child a:before { content:"›"; margin-right:5px; color:var(--accent-deep); }
.side-box li.child a:hover { background:var(--bg-tint); color:var(--accent-solid); }

/* ==== 変更3: カテゴリーアイコン（線画SVG・単色）====
   絵文字だった頃の色付き・にぎやかな見た目をやめ、線だけで描いた単色のアイコンに
   統一した（render.py 側で12種類だけを許可リストから出す。中身は固定のSVGで、
   categories.json の値がそのままマークアップへ混ざることはない）。 */
.cat-ic { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; color:var(--accent-deep); }
.cat-ic svg { width:100%; height:100%; display:block; }

/* ==== 変更5: 小分類は右への張り出しパネル（マウスは乗せるだけ・タッチはタップ・
   キーボードはEnter/Space・画面が狭い時は下へ展開）====
   開閉の仕組みそのものは変更2から変えていない。今までどおり HTML標準の
   <details>/<summary> の open属性だけで開閉が決まる。JSが動かない環境や、
   タッチ・キーボードでの操作は、この節のCSSだけで従来どおりクリック
   （タップ）＝トグルとして機能する。
   マウスで「乗せるだけ」で開くようにする部分だけは assets/js/sidebar.js が
   受け持つ（同じ open属性を、乗せたらtrue・少し待ってから離れたらfalseに
   するだけで、開閉の仕組みそのものは増やさない）。JSが無ければこの節は
   何もせず、クリックだけの従来どおりの挙動に自然と収まる。

   変更5で「小分類を見る」の文字ラベルをやめ、親と同じ行の右端に「>」の記号
   （.cat-chevron）だけを置いた。親の一覧ページへのリンク（.cat-link）と
   開閉の操作（summary）は、これまでどおり別要素のまま・同じ行に横並びに
   しただけ（役割は変えていない＝タップでcat-linkに触れれば一覧ページへ、
   chevronに触れれば小分類の開閉）。
   開いたときの小分類（ul.child-list）は、位置の基準を持つ li.parent.has-sub
   （position:relative）を起点に右へ張り出すパネルとして出す。summaryの中身
   （chevron）だけが行の高さを決めるので、パネルを開いてもこの行自体の高さは
   変わらず、サイドバーの他の項目は動かない。 */
.side-box li.parent.has-sub {
  display:flex;
  align-items:center;
  padding:0;
  position:relative; /* 右へ張り出す小分類パネルの位置の基準 */
}
.side-box li.parent.has-sub > a.cat-link { flex:1; min-width:0; }
.side-box li.parent.has-sub > details.cat-details { flex:0 0 auto; }
.side-box summary.cat-toggle {
  display:flex; align-items:center; justify-content:center; list-style:none;
  user-select:none; cursor:pointer; padding:9px 12px; font-size:13px; color:var(--text-muted);
}
.side-box summary.cat-toggle::-webkit-details-marker { display:none; }
.side-box summary.cat-toggle::marker { content:""; }
.side-box summary.cat-toggle:hover,
.side-box summary.cat-toggle:focus-visible { background:var(--bg-tint); color:var(--accent-solid); }
.side-box details.cat-details[open] > summary.cat-toggle { color:var(--accent-solid); background:var(--bg-tint); }
.cat-chevron { display:inline-block; font-size:13px; line-height:1; transition:transform .15s; }
.side-box ul.child-list { list-style:none; padding-bottom:2px; }

/* 右へ張り出す小分類パネル本体。<details>が閉じている間はブラウザ標準の仕組みで
   中身ごと描画されないため、位置指定はopenのときだけ意味を持つ。
   ここでの position:absolute は、開いてもこの<ul>自身が親(li)の大きさに
   影響しない（＝サイドバーの他の項目を押し下げない）ためのもの。 */
.side-box details.cat-details > ul.child-list {
  position:absolute;
  top:0;
  left:100%;
  margin-left:8px;
  width:max-content;
  min-width:180px;
  max-width:260px;
  background:var(--bg-page);
  border:1px solid var(--line-mid);
  border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  padding:6px 0;
  z-index:5;
}
.side-box details.cat-details > ul.child-list li.child a {
  padding:8px 14px;
  white-space:normal;
}
/* パネル内は「独立した行き先の一覧」として見せるので、下展開の頃の
   入れ子を示す記号（›）は付けない（狭い画面の下展開だけで復活させる）。 */
.side-box details.cat-details > ul.child-list li.child a:before { content:none; }

main.mn { flex:1; min-width:0; }

/* 営業日カレンダー */
.cal { padding:10px 10px 4px; }
.cal table { width:100%; border-collapse:collapse; font-size:11px; text-align:center; }
.cal caption { font-size:12px; font-weight:bold; padding-bottom:6px; color:var(--text-strong); }
.cal th { color:var(--text-muted); font-weight:normal; padding:3px 0; }
.cal td { padding:4px 0; border-radius:4px; }
.cal td.off { background:var(--danger-bg); color:var(--danger-text); }
.cal td.today { outline:2px solid var(--accent-deep); font-weight:bold; }
.cal-note { font-size:10px; color:var(--text-muted); padding:6px 12px 10px; line-height:1.7; }
.cal-note .dot { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:-1px; margin-right:4px; }
.cal-note .dot.off { background:var(--danger-bg); border:1px solid var(--danger-border); }

.topbar { background:var(--bg-tint); font-size:12px; border-bottom:1px solid var(--line-soft); }
.topbar .wrap { display:flex; justify-content:space-between; padding:6px 16px; }
.topbar a { margin-left:14px; color:var(--text-body); }
/* ==== 上の帯の右の一団をひとまとめに右へ寄せる（2026-08-25 修正）====
   ログイン・お届け先・カート・案内リンクは「並んでいる」ことに意味があるので、
   余白は先頭の一文の右側で全部吸わせて、後ろは順番どおり右へ詰める。
   以前はお届け先（.zipbar）自身に margin-left:auto を付けて右へ寄せていたため、
   その手前に入れたログインだけが左端の一文にくっつき、お届け先から400pxほど
   離れて浮いていた。支点を先頭の一文に移すと、ログインが出ない日（番号が
   未設定の間）でも右の並びはまったく同じ形のまま崩れない。 */
.topbar-lead { margin-right:auto; }

/* ==== 上の帯の「お届け先」（2026-08-21）====
   郵便番号の入力欄はサイトに1か所だけ。ここで入れた値をブラウザが30日間覚え、
   商品ページの到着予定日がその地域に絞り込まれる（計算はブラウザの中だけで完結し、
   郵便番号は当店に送られない）。未設定＝入力欄、設定後＝「東京都（〒151-0071）」＋変更、
   の入れ替えは shipdate.js が hidden 属性で行う。
   ★.zipbar-form は display:inline-flex のため、hidden属性だけでは隠れない。
   下の [hidden] の指定が無いと設定後も入力欄が出たままになる。 */
/* お届け先は右の案内リンクの隣まで持っていく（2026-08-21 重浦さん指示）。
   右へ寄せる役目は .topbar-lead の margin-right:auto が引き受けているので、
   ここでは間隔だけを持つ（2026-08-25 修正。以前はここに margin-left:auto があり、
   手前に入れたログインを左端へ置き去りにしていた）。 */
.zipbar { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-right:26px; }
.zipbar [hidden] { display:none !important; }
.zipbar-label { font-weight:bold; color:var(--text-body); }
.zipbar-now { font-weight:bold; color:var(--accent-solid); }
.zipbar-form { display:inline-flex; align-items:center; gap:4px; }
.zipbar input { width:6.5em; font-size:12px; padding:2px 5px; border:1px solid var(--line-mid); border-radius:5px; background:#fff; color:var(--text-body); }
.zipbar input[aria-invalid="true"] { border-color:var(--price); }
.zipbar button { font-size:12px; padding:2px 9px; border:1px solid var(--line-mid); border-radius:5px; background:#fff; color:var(--text-body); cursor:pointer; }
.zipbar button:hover { background:var(--bg-tint); border-color:var(--accent-solid); }
.zipbar-msg { color:var(--price); }
.zipbar-msg:empty { display:none; }

/* ==== 上の帯のカート導線（2026-08-22）====
   お届け先（.zipbar）のすぐ右に置く。右の一団は .topbar-lead が余白を吸って
   まとめて右へ寄るため、その並びに置くだけで自然に右側へ揃う。狭い画面では
   .topbar .wrap 側の flex-wrap により他の帯項目と同じく折り返す
   （このブロックに個別のメディアクエリは不要）。 */
.cartbar { display:inline-flex; align-items:center; gap:4px; font-weight:bold; color:var(--accent-solid); margin-right:22px; }
.cartbar:hover { text-decoration:underline; }

/* ==== 上の帯のログイン表示（2026-08-25）====
   未ログインなら「ログイン」ボタン、ログイン後は「◯◯さん（ログアウト）」。
   中身の入れ替えは login.js が hidden 属性で行うため、[hidden] を効かせる。
   置き場所は お届け先 → カート と並ぶ右の一団の先頭（設計書 1.「お届け先の
   並びの前」）。番号が未設定の間はこの枠自体がHTMLに出ない（render._topbar）。 */
.loginbar { display:flex; align-items:center; gap:5px; margin-right:22px; }
.loginbar [hidden] { display:none !important; }
.loginbar-btn, .loginbar-out { font-size:12px; padding:2px 9px; border:1px solid var(--line-mid); border-radius:5px; background:#fff; color:var(--text-body); cursor:pointer; }
.loginbar-btn:hover, .loginbar-out:hover { background:var(--bg-tint); border-color:var(--accent-solid); }
.loginbar-in { display:inline-flex; align-items:center; gap:5px; color:var(--text-body); }
.loginbar-in b { color:var(--accent-solid); max-width:10em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 1000px) {
  .loginbar { margin-right:0; }
}

/* ★入口が2つ（Google・LINE）あるときだけ render._topbar が置く選択メニュー
   （2026-08-25 Task6）。[hidden] より強い display を書く規則を先に置くときは、
   必ずこの1行を一緒に置く。このCSS集は過去に .btn-order で同じ罠を踏んでいる
   （display:block が既定の [hidden] に勝って、隠したいものが出てしまう）。 */
.loginbar { position: relative; }
.loginbar-menu { position: absolute; top: 100%; left: 0; z-index: 20;
  display: flex; flex-direction: column; min-width: 9.5em;
  background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.loginbar-menu[hidden] { display: none; }
/* ★2026-09-10 最終直しA: 「メールで続ける」だけは<a>（他はbutton）。
   見た目は揃えるので、セレクタに .loginbar-menu a を足すだけでよい
   （色・下線は全体共通の a{color:inherit;text-decoration:none} に既に乗っている）。 */
.loginbar-menu button, .loginbar-menu a { padding: .5em .8em; border: 0; background: none;
  text-align: left; cursor: pointer; font-size: inherit; white-space: nowrap; }
.loginbar-menu button:hover, .loginbar-menu a:hover { background: #f2f2f2; }

/* ヘッダー下の線も紺帯と同じ本体幅（.wrapの1200px）に合わせる（2026-08-15 重浦さん指示）。
   線を header 側に付けると画面の端まで伸びてしまうため .wrap 側に付ける。 */
header.main { background:var(--bg-page); }
header.main .wrap { display:flex; align-items:center; gap:24px; padding:14px 16px;
  border-bottom:3px solid var(--accent-deep); }
.search { flex:1; display:flex; }
.search input { flex:1; border:2px solid var(--accent-deep); border-radius:4px 0 0 4px; padding:9px 12px; font-size:14px; }
.search button { background:var(--accent-solid); color:#fff; border:none; padding:0 20px; border-radius:0 4px 4px 0; font-size:14px; cursor:pointer; }

/* ==== 2026-08-09 リメイク: ヘッダーの電話・実績バッジ・フッター電話欄 ====
   旧絵文字ロゴ（.logo .clover 🍀）・旧お問い合わせ導線（メールのみ誘導の.head-contact）
   はここで置き換え。ヘッダー右側は「Amazon実績バッジ」「電話・受付時間・混雑注記」
   「お問い合わせフォームへの誘導ボタン」の3ブロックに広がる（render._header 参照）。 */
.logo{display:flex;align-items:center;gap:9px;color:var(--text-strong)}
.logo .logo-mark{width:38px;height:38px;color:var(--accent-deep);flex-shrink:0}
.logo .logo-nm{font-size:23px;font-weight:800;letter-spacing:.04em;line-height:1.1;display:block}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:.22em}
.badge-amazon{display:flex;align-items:center;gap:8px;border:1px solid var(--line-mid);border-radius:8px;padding:6px 12px;font-size:11px;line-height:1.45;color:inherit;text-decoration:none}
.badge-amazon:hover{border-color:#e47911}
.badge-amazon .st{color:#e47911;font-size:15px;letter-spacing:1px}
.badge-amazon b{display:block;font-size:13px;color:var(--text-strong)}
.head-tel{line-height:1.35}
.head-tel .tel{font-size:20px;font-weight:800;color:var(--text-strong)}
.head-tel .hours{font-size:11px;color:var(--text-muted)}
.head-tel .busy{font-size:11px;color:var(--price);font-weight:bold}
.head-contact{text-align:center}
.head-contact .btn{display:block;background:var(--order-btn);color:#fff;font-weight:bold;border-radius:6px;padding:9px 16px;font-size:13px}
.head-contact .btn:hover{background:var(--order-btn-hover)}
.head-contact small{font-size:10px;color:var(--text-muted)}
.f-tel{font-size:12.5px;line-height:1.7}
.f-tel .tel{font-size:18px;font-weight:800;color:var(--text-strong)}
.f-tel .busy{color:var(--price);font-size:11.5px;font-weight:bold}
.f-tel .btn{display:inline-block;margin-top:6px;background:var(--order-btn);color:#fff;font-weight:bold;border-radius:6px;padding:7px 14px;font-size:12.5px}

/* 紺色の帯は画面の端まで伸ばさず、本体と同じ幅（.wrapの1200px）に合わせる
   （2026-08-15 重浦さん指示）。背景色を nav 側でなく .wrap 側に付けるだけ。 */
nav.gnav .wrap { display:flex; background:var(--accent-solid); }
nav.gnav a { color:#fff; font-size:14px; padding:11px 22px; }
nav.gnav a:hover { background:var(--accent-solid-hover); }

/* ==== 2026-08-09 リメイク: 図案入りバナー ==== */
.banners{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px}
.banner{border:1.5px solid var(--accent-mid);border-radius:8px;padding:12px 14px;display:flex;gap:12px;align-items:center}
.banner svg{width:38px;height:38px;flex-shrink:0;color:var(--accent-deep)}
.banner b{display:block;font-size:13.5px;color:var(--text-strong);line-height:1.4}
.banner span{font-size:11.5px;color:var(--text-muted);line-height:1.45}
.shipnote-ic{width:30px;height:30px;flex-shrink:0;color:var(--accent-deep)}

h2.sec { font-size:17px; border-left:5px solid var(--accent-deep); padding-left:10px; margin:28px 0 14px; }

.cats { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.cat { border:1px solid var(--line-soft); border-radius:8px; text-align:center; padding:16px 6px 12px; transition:.15s; }
.cat:hover { border-color:var(--accent-deep); box-shadow:0 2px 8px rgba(138,117,96,.18); }
.cat .ic { font-size:34px; }
.cat .nm { font-size:13px; margin-top:6px; font-weight:bold; }
.cat .sub { font-size:10px; color:var(--text-muted); margin-top:2px; }

/* ==== 変更2: 商品カードは枠なし・中央寄せのシンプルな見た目に ====
   これまでの「罫線付きの箱・写真エリアの色付け・ホバー時の影・左上の
   販売中/売り切れ中の札（バッジ）」をやめ、参考にした通販サイトのように
   「写真・商品名・価格だけがページの背景に直接乗っている」見た目にする。
   render.py の _item_card / assets/js/search.js の cardHtml が組み立てる
   マークアップ（<a class="item">写真<div class="bd">名前 価格</div></a>）に対応。

   「販売中」の札は廃止（価格が出ていること自体が販売中の証）。「売り切れ中」は
   バッジを新設せず、価格の場所に文字でそう書く（.item.soldout .pr）ことと、
   写真を薄くする（.item.soldout .ph）ことの2つだけで、買えないことが一目で
   分かるようにしている。 */
.items { display:grid; grid-template-columns:repeat(5,1fr); gap:32px 24px; }
.item { text-align:center; position:relative; }
.item .ph { height:150px; display:flex; align-items:center; justify-content:center; font-size:44px; }
.item .bd { padding-top:10px; }
.item .nm { font-size:12px; line-height:1.45; height:4.35em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.item .pr { color:var(--price); font-weight:bold; font-size:18px; margin-top:6px; }
.item .pr small { font-size:10px; color:var(--text-muted); font-weight:normal; margin-left:2px; }
.item.soldout .ph { opacity:.45; }
.item.soldout .pr { color:var(--neutral-tag); font-weight:normal; font-size:13px; }

/* ==== トップの新着商品（変更4: 二段組み）====
   横に流れる帯を2本、縦に並べる。中のカードは一覧・トップ共通の .item をそのまま
   使うが、.items のグリッドではなく flex の横並びにして、カード1枚の幅を固定する
   （自動で流れているときに幅が画面サイズでガタつかないようにするため）。
   2本の帯はそれぞれ独立して自動で流れる（片方は右へ、もう片方は左へ）。
   同じ向き・同じ速さで2本並べると単に1本の帯が折り返しただけに見えてしまい、
   2段にした意味が薄れるため、互い違いに流すことで「2本の独立した帯」だと
   一目で伝わるようにした（詳しい理由は assets/js/carousel.js のコメント）。
   独立して動く分、片方の帯にカーソルを乗せて止めても、もう片方は流れ続ける
   （一覧を見ている最中、関係ない段まで一緒に止まらない）。
   自動で流れる・止まる処理（ホバー/フォーカスで一時停止、reduced motionなら
   最初から動かさない等）は assets/js/carousel.js が受け持つ。ここに書くCSSは
   あくまで「掴んで横スクロールできる帯」を作るところまでで、JSがどんな理由で
   動かなくても・止まっていても、このままの見た目で手動スクロールにより
   全商品にたどり着ける（overflow-x:auto はブラウザ標準のタッチスワイプに
   対応済みなので、スマホでの横スワイプはJS無しでも効く。2本とも独立した
   スクロール領域なので、片方をスワイプしてももう片方は動かない）。 */
.carousel-rows { display:flex; flex-direction:column; gap:12px; max-width:100%; min-width:0; }
.carousel { overflow-x:auto; overflow-y:hidden; cursor:grab; -webkit-overflow-scrolling:touch; scrollbar-width:thin; max-width:100%; min-width:0; }
.carousel:active { cursor:grabbing; }
.carousel-track { display:flex; gap:12px; width:max-content; }
.carousel-track .item { width:190px; flex:0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  /* 自動再生を止めるのはJS側（matchMediaで判定）が主。ここは念のための保険で、
     このプロパティ自体はJSの自動スクロールの有無に関わらず滑らかさだけを消す。 */
  .carousel { scroll-behavior:auto; }
}

.shipnote { margin:26px 0; border:2px solid var(--order-btn); border-radius:8px; padding:14px 18px; background:var(--order-tint); display:flex; align-items:center; gap:14px; }
.shipnote .ic { font-size:30px; }
.shipnote b { color:var(--order-btn); font-size:16px; }
.shipnote span { font-size:13px; color:var(--text-body); }

footer { margin-top:40px; background:var(--bg-tint); border-top:1px solid var(--line-soft); font-size:12px; color:var(--text-body); }
/* 2026-08-09: 3列（会社情報まで）から、お問い合わせ欄（電話・混雑注記）を足した4列へ */
footer .cols { display:grid; grid-template-columns:1fr 1fr 1fr 1.2fr; gap:24px 40px; padding:24px 16px; max-width:1080px; margin:0 auto; }
footer h4 { font-size:13px; color:var(--text-strong); margin-bottom:8px; }
footer li { list-style:none; margin-bottom:5px; }
footer .cp { text-align:center; padding:12px; background:var(--accent-solid); color:#fff; }

/* ==== item.html が追加するセレクタ ==== */
/* 2026-08-15 修正7: item.css/style.cssがどのHTMLからも読み込まれておらず
   .item-page（商品ページの外枠）が効いていなかったため、ここへ移設。
   item.css/style.cssのファイル自体は放置（依存を切っただけ）。
   商品ページは2カラムの.mn内なので、実際の余白は生成後に目視確認する（工程B6）。 */
.item-page { max-width: 900px; margin: 0 auto; padding: 48px 20px; }

.crumb { font-size:12px; color:var(--text-muted); margin:12px 0; }
.crumb a { color:var(--accent-solid); }

.prod { display:flex; gap:34px; margin-top:8px; }
.ph-main { width:440px; }
.ph-main .big { height:360px; background:var(--bg-tint); border:1px solid var(--line-soft); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:110px; }
/* 売り切れページのみ写真を薄く表示（soldout.html由来） */
.soldout-page .ph-main .big { opacity:.5; }
.thumbs { display:flex; gap:8px; margin-top:10px; }
.thumbs div { width:70px; height:70px; background:var(--bg-tint); border:1px solid var(--line-soft); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:26px; }

.info { flex:1; }
.brand { font-size:12px; color:var(--accent-solid); font-weight:bold; }
h1 { font-size:21px; line-height:1.5; margin:4px 0 6px; color:var(--text-strong); }
.code { font-size:11px; color:var(--text-muted); margin-bottom:12px; }
.price { font-size:32px; color:var(--price); font-weight:bold; }
.price small { font-size:13px; color:var(--text-body); font-weight:normal; }
.msrp { font-size:13px; color:var(--text-muted); margin-bottom:2px; }
.msrp s { color:var(--text-muted); }
.off-badge { display:inline-block; vertical-align:middle; background:var(--danger-text); color:#fff; font-size:14px; font-weight:bold; border-radius:4px; padding:2px 8px; margin-left:8px; }
.zaiko { display:inline-block; background:var(--ok-bg); color:var(--ok-text); font-size:12px; font-weight:bold; padding:3px 10px; border-radius:3px; margin:8px 0; }

.shipbox { border:2px solid var(--order-btn); background:var(--order-tint); border-radius:8px; padding:12px 16px; margin:14px 0; }
.shipbox b { color:var(--order-btn); font-size:15px; }
.shipbox span { display:block; font-size:12px; color:var(--text-muted); margin-top:3px; }

/* ==== 到着予定日の帯（2026-08-21）====
   太字は「到着予定 ◯月◯日（◯）〜◯月◯日（◯）」。その下にお届け先の郵便番号欄を置き、
   入れると地域に合った日付へ絞り込まれる（計算はブラウザの中だけで完結し、
   郵便番号は当店に送られない）。
   .ship-caution は沖縄・離島や悪天候の但し書き。郵便番号が分かると但し書きの片方は
   中身が空になるため、:empty で行ごと消して余白が残らないようにしている。 */
.ship-zip-hint { font-size:11px; color:var(--text-muted); }
.shipbox .ship-caution { font-size:11px; line-height:1.5; margin-top:6px; }
.shipbox .ship-caution:empty { display:none; }

/* ==== カート（2026-08-22）====
   1行1商品。写真・商品名・単価・個数・小計・削除の順に並べ、狭い画面では
   写真と商品名の2列に畳む。金額はすべて cart.js が入れる（HTMLには焼き込まない）。 */
.cart-lines { list-style:none; margin:0; padding:0; }
.cart-line { display:grid; grid-template-columns:64px 1fr auto auto auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.cart-line img { width:64px; height:64px; object-fit:contain; }
/* ★注文できなくなった行。写真も値段も無いので6列の型に流し込むと、文字が
   先頭の64pxの列に落ちて縦長の帯になってしまう。文章と削除ボタンの2列に組み替える。
   （狭い画面の指定より詳しいので、そちらより優先される）
   全体を薄くすると削除ボタンまで押せないように見えるため、薄くするのは文章だけ。 */
.cart-line.is-off { grid-template-columns:1fr auto; }
.cart-line.is-off .cart-nm { color:var(--text-muted); }
.cart-qt input { width:4em; padding:4px; border:1px solid var(--line-mid); border-radius:6px; }
.cart-del { font-size:12px; color:var(--text-muted); border:1px solid var(--line-mid); background:#fff; border-radius:6px; padding:3px 8px; cursor:pointer; }
.cart-sum { margin:14px 0; text-align:right; }
.cart-total strong { font-size:22px; color:var(--price); }
.cart-ship { font-size:12px; color:var(--text-muted); margin-top:4px; }
.cart-ship:empty { display:none; }
.cart-notice { color:var(--price); font-size:13px; line-height:1.6; }
.cart-notice:empty { display:none; }
.cart-empty { margin:18px 0; line-height:2; }
.cart-closed { margin:18px 0; color:var(--price); }
/* ★.btn-order は display:block を持つため、ブラウザ既定の [hidden] より強く、
   このひと言が無いと JS で hidden にしても注文ボタンが消えない
   （＝空のカートでも注文手続きへ進めてしまう）。 */
.btn-order[hidden] { display:none; }
@media (max-width: 640px) {
  .cart-line { grid-template-columns:48px 1fr; grid-auto-rows:auto; }
  .cart-line img { width:48px; height:48px; }
}

.btns { margin:18px 0; }
.btn-order { display:block; text-align:center; background:var(--order-btn); color:#fff; font-size:19px; font-weight:bold; padding:15px; border-radius:8px; box-shadow:0 3px 0 var(--order-btn-shadow); margin-bottom:12px; }
.btn-order:hover { background:var(--order-btn-hover); }
.btn-order small { display:block; font-size:11px; font-weight:normal; opacity:.9; }

/* ==== 商品ページの「カートに入れる」（Task 8: 注文はカートに一本化） ==== */
.addcart { margin:18px 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.addcart select { padding:8px; border:1px solid var(--line-mid); border-radius:6px; }
.addcart .btn-order { flex:1; min-width:200px; margin-bottom:0; }
.addcart-done { width:100%; font-size:13px; color:var(--order-btn); }

/* ==== 「他のお店でも探す」枠（Amazon / Yahoo!ショッピング / 楽天市場） ====
   プラテック（e-platec.co.jp）の商品ページと同じ発想の導線を、当店向けに
   落とし込んだもの。自店の銀行振込ボタン（.btn-order・本命ボタン）とは明確に
   見た目を分け、「こちらは別ルートの選択肢です」と伝わる枠にする。
   本命ボタンより主張を弱める狙いで、枠線はグレー・背景も薄いグレーに留める。

   ★3つのボタンはわざと同格にしていない。当店の出品へ戻るAmazonだけは
   Amazon本来のオレンジ（#ff9900・.btn-amazon の指定をそのまま使う）で目立たせ、
   楽天・ヤフーはグレーの控えめな見た目にする。自店の売上を他店へ流さないための
   優先順位（注文ボタン ＞ Amazon ＞ 楽天・ヤフー）を色で表している。
   ここを3つ同じ色にすると、その意図が消えるので揃えないこと。 */
.othershops { margin-top:12px; border:1px solid var(--line-soft); border-radius:8px; background:var(--bg-tint); padding:14px 16px; text-align:center; }
.othershops-head { font-size:12px; font-weight:bold; color:var(--text-body); margin-bottom:10px; line-height:1.5; }
.othershops-links { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; list-style:none; margin:0; padding:0; }
.othershops-arrow { font-size:15px; }
.othershops-note { margin-top:8px; font-size:11px; color:var(--text-muted); line-height:1.6; }

/* ボタン共通。文字数の多いラベル（「Yahoo!ショッピングで探す」）でも高さが
   そろうよう、3つとも同じ最低高さの中で上下中央に置く。 */
.obtn { display:flex; align-items:center; justify-content:center; gap:4px; min-height:44px; text-align:center; background:#fff; border:2px solid var(--line-mid); color:var(--text-body); font-size:12px; font-weight:bold; padding:8px 6px; border-radius:8px; line-height:1.35; }
.obtn:hover { background:var(--bg-tint); }
/* 飛び先が無いとき（JANコードを持っていない商品）は押せない灰色にする。
   押しても何も出てこない検索結果へお客様を送らないための表示。 */
.obtn.is-off { color:var(--text-muted); border-color:var(--line-soft); background:var(--bg-tint); opacity:.55; cursor:default; }
/* 枠の中のAmazonボタンだけは、上の .btn-amazon（オレンジ）の色を活かす。
   大きさ・並びは他の2つとそろえたいので、寸法だけこちらで上書きする。 */
.othershops .btn-amazon { min-height:44px; font-size:12px; padding:8px 6px; }

@media (max-width: 520px) {
  /* 幅の狭い画面では3つ横並びだと文字が潰れるため、縦に積む */
  .othershops-links { grid-template-columns:1fr; }
}

.btn-amazon { display:block; text-align:center; background:#fff; border:2px solid var(--amazon); color:var(--amazon-text); font-size:14px; font-weight:bold; padding:11px; border-radius:8px; }
.btn-amazon:hover { background:var(--amazon-tint); }
/* Amazon公式ロゴ画像（assets/img/amazon-logo.*）が保存されているときだけ使う見た目。
   タイル（.btn-amazonの枠・余白・角丸）はそのまま、中身の文字だけがこの画像に
   入れ替わる。幅・高さの両方をmaxで挟み、widthとheightは指定しない（＝auto）ことで
   画像の縦横比を保ったまま縮小表示し、伸び縮みで歪ませない。高さの上限は
   文字ボタンだったときの見た目の高さに合わせてある。 */
.btn-amazon-logo { display:block; max-width:100%; max-height:22px; width:auto; height:auto; }

.pay { font-size:12px; color:var(--text-body); border-top:1px dashed var(--line-mid); padding-top:12px; }
.pay b { color:var(--text-strong); }

table.spec { width:100%; border-collapse:collapse; font-size:13px; }
table.spec th, table.spec td { border:1px solid var(--line-soft); padding:9px 12px; text-align:left; }
table.spec th { background:var(--bg-tint); width:180px; color:var(--text-body); font-weight:normal; }
.desc { font-size:14px; line-height:1.9; }

/* ==== soldout.html が追加するセレクタ ==== */
.outbadge { display:inline-block; background:var(--neutral-tag); color:#fff; font-size:16px; font-weight:bold; padding:7px 18px; border-radius:4px; margin:6px 0 4px; }
.outnote { font-size:13px; color:var(--text-body); margin-bottom:14px; }

.askbox { border:2px solid var(--accent-deep); background:var(--bg-tint); border-radius:8px; padding:16px 18px; margin:10px 0 18px; }
.askbox b { color:var(--accent-solid); font-size:15px; }
.askbox p { font-size:13px; color:var(--text-body); margin-top:6px; line-height:1.7; }
.btn-ask { display:block; text-align:center; background:var(--accent-solid); color:#fff; font-size:18px; font-weight:bold; padding:14px; border-radius:8px; box-shadow:0 3px 0 var(--accent-solid-hover); margin:14px 0 10px; }
.btn-ask:hover { background:var(--accent-solid-hover); }
.btn-ask small { display:block; font-size:11px; font-weight:normal; opacity:.9; }

/* ==== 旧スタイル（assets/css/item.css）から移植: 銀行振込注文フォーム ====
   .btn-order（本命ボタン）を押すと開く実際の注文フォーム一式。
   旧デザインは青系（#1a5c9e等）→ よつばショップ開設時は緑+オレンジ+赤 →
   変更1でこのファイル冒頭の変数（--order-btn 等）に一本化した。 */
.order-block { margin-top:14px; padding:16px 18px; border:2px solid var(--order-btn); border-radius:8px; background:var(--order-tint); }
.order-title { margin:0 0 8px; font-size:16px; color:var(--order-btn); }
.order-lead { font-size:13px; color:var(--text-body); line-height:1.7; }
/* ★.order-login は今のところ display 指定を持たないため、ブラウザ既定の [hidden]
   がそのままGoogleの案内を隠している。.btn-order[hidden] のときと同じ理由（上の
   注記を参照）で、後から .order-login に display を足すと [hidden] だけでは
   足りなくなる。番号（GOOGLE_OAUTH_CLIENT_ID）が無い今日、この案内が見えてしまう
   事故を防ぐため先に明示しておく。 */
.order-login[hidden] { display:none; }
.order-login { margin:10px 0; }
.order-login-note { font-size:11px; color:var(--text-muted); margin:6px 0 0; }
/* ★[hidden] を必ず効かせる（このCSS集は .btn-order で同じ罠を踏んでいる）。 */
.order-login-line { display: inline-block; padding: .5em 1.1em;
  background: #06c755; color: #fff; border: 0; border-radius: 4px;
  cursor: pointer; font-size: inherit; margin-top: 6px; }
.order-login-line[hidden] { display: none; }
.order-login-line:hover { background: #05b34b; }
[data-login-button] { margin-top:6px; }
/* ★Yahooのボタンは、Yahooが配る画像をそのまま使う決まり（利用ガイドライン5.2・
   改変禁止）。こちらで色や形を作らない。画像はTask9の登録時に受け取るまでは
   何も入らないので、ここは箱の余白だけを用意する（[hidden]を必ず効かせる。
   このCSS集は.btn-order等で同じ罠を踏んでいる）。 */
.order-login [data-login-yahoo-btn] { display: inline-block; margin-top: .4em; }
.order-login [data-login-yahoo-btn][hidden] { display: none; }
.order-login [data-login-yahoo-btn] img { max-width: 100%; height: auto; }
.order-form label { display:block; margin:10px 0; font-size:13px; color:var(--text-strong); }
.order-form input, .order-form textarea { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:8px; border:1px solid var(--line-mid); border-radius:4px; font-size:14px; font-family:inherit; }
/* ハニーポット（スパム除け）: 見えてはいけないので画面外に出す */
.order-hp { position:absolute !important; left:-9999px !important; height:1px; opacity:0; }
.order-submit { display:block; width:100%; text-align:center; background:var(--order-btn); color:#fff; font-size:17px; font-weight:bold; padding:14px; border:none; border-radius:8px; box-shadow:0 3px 0 var(--order-btn-shadow); cursor:pointer; margin-top:10px; }
.order-submit:hover { background:var(--order-btn-hover); }
.order-submit:disabled { background:var(--disabled-bg); box-shadow:none; cursor:default; }
.order-note { font-size:11px; color:var(--text-muted); margin-top:8px; }
.order-done { margin-top:12px; padding:12px; border-radius:6px; background:var(--ok-bg); color:var(--ok-text); font-size:13px; }
.order-error { margin-top:12px; padding:12px; border-radius:6px; background:var(--danger-bg); color:var(--danger-text); font-size:13px; }

/* ==== 旧スタイル（item.css）から移植: 一覧ページの件数表示・ページ送り ==== */
.item-count { text-align:center; color:var(--text-muted); font-size:13px; margin:8px 0; }
.pager { text-align:center; margin-top:24px; }
.pager a, .pager .current { display:inline-block; padding:6px 12px; margin:0 2px; border-radius:4px; font-size:13px; }
.pager a { color:var(--accent-solid); }
.pager a:hover { background:var(--bg-tint); }
.pager .current { background:var(--accent-solid); color:#fff; font-weight:bold; }

/* ==== 実写真の枠内フィット指定（render.pyの3箇所のインラインstyleに相当。
   将来インラインstyleを撤去する際はこちらのルールに一本化する） ==== */
.ph-main .big img { max-width:100%; max-height:100%; object-fit:contain; }
.thumbs div img { max-width:100%; max-height:100%; object-fit:contain; cursor:pointer; }
.item .ph img { max-width:100%; max-height:100%; object-fit:contain; }

/* ==== 案内ページ（staticpages.py）用: ガイド・お支払い/配送・FAQ・保証・
   お問い合わせ・お取り寄せ相談・検索の7ページが `.page` に本文を入れる。
   読み物として無理のない行長・行間、見出し/段落/リストの余白を整える。 ==== */
.page { max-width:760px; line-height:1.9; }
.page h1 { margin:0 0 16px; color:var(--text-strong); }
.page p { margin:0 0 14px; }
.page p:last-child { margin-bottom:0; }
.page a { color:var(--accent-solid); text-decoration:underline; }
.page a:hover { color:var(--accent-solid-hover); }
.page ol { margin:0 0 20px; padding-left:1.4em; }
.page li { margin-bottom:14px; }
.page li:last-child { margin-bottom:0; }
/* 検索結果ページ（search.html）は本文を.pageの中に入れているため、上の「.page a」の
   下線・アクセント色がそのままだと商品カードの商品名にまで乗ってしまう
   （枠なしのシンプルなカードに、リンク文字だけ色・下線が付いて浮いて見える）。
   商品カード（.item）の中だけは、他の一覧・トップと同じ「地の文字色・下線なし」に戻す。 */
.page .items a.item { color:inherit; text-decoration:none; }

/* お問い合わせページ: メールアドレスの一文をこのページの一番の行動として目立たせる */
.contact-mail { display:inline-block; margin:6px 0 20px; padding:12px 22px; background:var(--bg-tint); border:2px solid var(--accent-deep); border-radius:8px; font-size:20px; font-weight:bold; }
.contact-mail a { color:var(--accent-solid); text-decoration:none; }

/* お取り寄せ相談ページ: 「価格・納期はサイト上で約束していない」旨の一文は
   読み飛ばされると困るので、枠で囲んで目に留まるようにする */
.inquiry-note { margin:14px 0 20px; padding:12px 16px; border:2px solid var(--order-btn); border-radius:8px; background:var(--order-tint); color:var(--order-btn); font-size:13px; line-height:1.7; }

/* ==== 画面が狭いときの調整 ====
   approvedされたmockはPCの画面幅で作られておりスマホ向けの指定が無かった。
   ここは既存の値（サイドバー210px・商品写真440px・ヘッダー内3要素・5列の商品グリッド等）
   が実際にどこで隣と衝突し始めるかを逆算して2つの分岐点だけを置いた。
   1000pxより広い画面の見た目は今回いっさい変えていない。 */

/* --- 1000px: サイドバーが本文を圧迫し始める ---------------------------------
   サイドバー210px + レイアウトの隙間22px + 左右余白32px(.wrapのpadding) +
   商品ページの写真列がぎりぎり収まる幅（写真440px + 隙間34px + 情報欄の最低限
   目安260px） ≒ 998px。この幅からサイドバーを本文の下へ回し、5列の商品グリッド
   をいったん3列へ減らす（緑ナビ・お知らせ帯も、6項目が並びきらなくなる前に
   折り返せるようにしておく）。 */
@media (max-width: 1000px) {
  .layout { flex-direction: column; }
  /* サイドバーを縦積みにした列（.layout）の幅いっぱいに広げる。
     指定しないと、新着カルーセルのように横に長い中身（.carousel-track は
     width:max-content でわざと画面より横長にしてある）を持つ子がある場合、
     main.mn 自身がその中身の実寸に引っ張られて画面より横長になり、
     ページ全体が右へはみ出してしまう（2026-08-03 変更4の二段組みで検出）。 */
  main.mn { order: 1; width: 100%; }
  aside.side { width: auto; order: 2; }
  .side-box li.parent > a { padding: 12px 14px; }
  .side-box li.child a { padding: 10px 12px 10px 26px; }
  .topbar .wrap { flex-wrap: wrap; gap: 4px 14px; }
  /* 折り返す幅では右寄せをやめる（自分だけ右端に飛んで浮くのを防ぐ）。
     折り返すと余白は行ごとに計算されるため、先頭の一文の margin-right:auto を
     残すと1行目だけ右端へ突き飛ばされる（2026-08-25 修正）。 */
  .topbar-lead { margin-right: 0; }
  .zipbar { margin-left: 0; margin-right: 0; }
  nav.gnav .wrap { flex-wrap: wrap; }
  .items, .cats { grid-template-columns: repeat(3, 1fr); }

  /* 変更5: 右へ張り出すスペースが無い幅では、小分類パネルを右のフライアウトから
     従来どおり親の下へ広げる形に戻す（サイドバー自体がこの幅から本文の下へ
     回って全幅になり、「右」という方向が意味を持たなくなるため）。 */
  .side-box li.parent.has-sub {
    display: block;
    position: static;
  }
  .side-box li.parent.has-sub > a.cat-link { padding: 12px 14px; }
  .side-box li.parent.has-sub > details.cat-details { display: block; }
  .side-box summary.cat-toggle {
    justify-content: flex-start;
    gap: 5px;
    padding: 8px 14px;
    font-size: 12px;
    border-top: 1px solid var(--line-soft);
  }
  .side-box details.cat-details[open] > summary.cat-toggle .cat-chevron {
    transform: rotate(90deg);
  }
  .side-box details.cat-details > ul.child-list {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 2px;
  }
  .side-box details.cat-details > ul.child-list li.child a {
    padding: 10px 12px 10px 26px;
  }
  .side-box details.cat-details > ul.child-list li.child a:before {
    content: "›";
    margin-right: 5px;
    color: var(--accent-deep);
  }
}

/* --- ヘッダー専用 1000px: 761px〜1000pxの帯で検索欄が潰れる対策（修正8） -----
   header.main .wrap（174行）は761px以上だと横並びのまま（縦積みは760pxの
   メディアクエリでしか発動しない）。.search は flex:1 で最低幅の指定が無いため、
   この帯ではロゴ・実績バッジ・電話・お問い合わせに押されて検索窓が極端に狭くなる。
   ここではヘッダーの横並び→縦積みの切り替えだけを1000pxまで広げる（中身は
   760px側のヘッダー指定と同じなので二重適用になっても競合しない）。サイドバー・
   商品グリッド等の他要素はこのブロックでは一切触らない。 */
@media (max-width: 1000px) {
  header.main .wrap { flex-direction: column; align-items: stretch; gap: 10px; }
  .head-contact { text-align: left; }
}

/* --- 760px: サイドバーが無くなった後も、商品写真列とヘッダーが窮屈になる -----
   商品写真列: サイドバーが消えた後の本文幅は「画面幅－左右余白32px」。写真440px
   + 隙間34px + 情報欄の最低限260pxで734px必要なので、766px未満から崩れ始める。
   ヘッダー: ロゴ約260px＋検索欄の最低限約180px＋お問い合わせ約150px＋要素間の
   隙間48px＋左右余白32pxで670px必要。この2つのうち大きい方（写真列）に少し
   余裕を足して760pxにまとめ、この幅から写真を本文の上・全幅に積み、ヘッダーも
   ロゴ／検索／お問い合わせを縦積みにする（検索欄は全幅になり、むしろ目立つ）。 */
@media (max-width: 760px) {
  .prod { flex-direction: column; gap: 16px; }
  .ph-main { width: auto; }
  .ph-main .big { height: auto; aspect-ratio: 1 / 1; }
  .thumbs { flex-wrap: wrap; }

  .banners{grid-template-columns:1fr}

  header.main .wrap { flex-direction: column; align-items: stretch; gap: 10px; }
  .head-contact { text-align: left; }
  .head-contact .btn { display: inline-block; padding: 10px 16px; }

  nav.gnav a { padding: 10px 14px; }

  .items, .cats { grid-template-columns: repeat(2, 1fr); }

  table.spec th { width: 110px; }
  table.spec th, table.spec td { word-break: break-word; }

  footer .cols { grid-template-columns: 1fr; gap: 24px; }

  /* 新着（変更4・二段組み）: カードを一覧より少し小さくして、スマホの画面でも
     隣のカードの端が見えるようにする（次があると分かるように）。2段になった分、
     縦方向にも高さを取りすぎないよう段の間隔を少し詰める。 */
  .carousel-rows { gap: 8px; }
  .carousel-track .item { width: 150px; }
  .carousel-track { gap: 10px; }
}

/* 商品ページ「このメーカーの人気ランキング」 */
.rank-note { font-size:11px; color:var(--text-muted); margin:-8px 0 14px; }
.rank-badge {
  position:absolute; top:0; left:0; z-index:1;
  width:24px; height:24px; border-radius:50%;
  background:var(--accent-solid); color:#fff;
  font-size:12px; font-weight:bold; line-height:24px; text-align:center;
}

/* トップの新着カルーセルカードに載せる「NEW」札。.rank-badge と同じく
   .item の position:relative（236行目）を土台にした絶対配置。丸バッジの
   .rank-badge と違い、こちらは左上に載る小さな角丸の札にする。 */
.new-badge {
  position:absolute; left:8px; top:8px;
  background:var(--price); color:#fff;
  font-size:10px; font-weight:bold; border-radius:3px; padding:1px 6px;
  z-index:2;
}

/* 商品一覧の「在庫あり」（目立たせない・枠なし） */
.item .stk { margin-top:4px; font-size:11px; color:var(--text-muted); letter-spacing:.04em; }

/* ==== 2026-08-09 リメイク: お知らせ欄・トップランキング ==== */
.news{border:1px solid var(--line-mid);border-radius:8px;margin-bottom:16px;overflow:hidden}
.news h2{font-size:14px;background:var(--bg-tint);color:var(--text-strong);padding:8px 14px}
.news h2 small{font-weight:normal;font-size:11px;color:var(--text-muted);margin-left:8px}
.news ul{list-style:none}
.news li{display:flex;gap:12px;padding:8px 14px;border-top:1px solid var(--line-soft);font-size:13px}
.news .dt{color:var(--accent-deep);font-weight:bold;flex-shrink:0}
.news .tag{flex-shrink:0;font-size:10.5px;border:1px solid var(--line-mid);border-radius:4px;padding:0 6px;color:var(--text-muted);align-self:center}
.news .tag-warn{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger-text);font-weight:bold}
.news li a{color:inherit;text-decoration:underline}
.news li a:hover{color:var(--accent-deep)}
.top-rank.n1{background:#c9a227}
.top-rank.n2{background:#9aa2ad}
.top-rank.n3{background:#a5642a}
.top-rank.n4{background:#5b7fa6}
.top-rank.n5{background:#8595a6}
h2.sec small{font-size:11.5px;color:var(--text-muted);font-weight:normal;margin-left:8px}

/* ==== 帯の「注文履歴」（2026-09-10 最終直しA）====
   同じ帯の中の並びなので、.cartbar とまったく同じ見た目に揃える（新しい色・
   余白は作らない）。 */
.ordersbar { display:inline-flex; align-items:center; gap:4px; font-weight:bold; color:var(--accent-solid); margin-right:22px; }
.ordersbar:hover { text-decoration:underline; }

/* ==== 注文の同意文（カート、2026-09-10 最終直しA）====
   注文ボタンの直上に、押す前に必ず読める位置で小さめ・控えめに置く（cartpage.py）。
   リンクの色・下線は .cart-page が持つ .page a（本ファイル558行目付近）にすでに乗る。 */
.order-agree { font-size:11px; color:var(--text-muted); margin-bottom:8px; line-height:1.6; }

/* ==== 注文履歴ページ（/orders、2026-09-10 最終直しA）====
   1件分（.order-card）は、既存の一覧カードの作法（1px枠・8px角丸）に合わせる。
   セクション自身は .page も持つため（orderspage.py）、幅・行間は .page 側に任せる。 */
.orders-note { font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.orders-page [data-orders-list] { display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.order-card { border:1px solid var(--line-soft); border-radius:8px; padding:14px 16px; }
.order-card ul { list-style:none; }
.order-card li { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:4px 10px; padding:5px 0; font-size:13px; border-top:1px solid var(--line-soft); }
.order-card li:first-child { border-top:none; }
.order-head { font-size:12px; color:var(--text-muted); font-weight:bold; margin-bottom:4px; }
.order-qty { color:var(--text-muted); white-space:nowrap; }
.order-total { text-align:right; font-weight:bold; color:var(--price); margin-top:8px; }
.order-reorder { display:block; margin-top:10px; font-size:12px; padding:6px 12px;
  border:1px solid var(--line-mid); border-radius:6px; background:#fff; color:var(--text-body); cursor:pointer; }
.order-reorder:hover { background:var(--bg-tint); border-color:var(--accent-solid); }
.order-reorder:disabled { color:var(--text-muted); cursor:default; }

/* 退会（記録の削除）: 履歴の下に、控えめな注記として置く（2026-09-10 最終直しK
   で data-orders-body の中へ移した）。押すボタンだけ、取り消せない操作である
   ことが伝わるよう .danger 系の色を使う（新しい色は作らない）。 */
.orders-leave { margin-top:28px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--text-muted); }
.orders-leave summary { cursor:pointer; color:var(--text-body); }
.orders-leave button { display:block; margin-top:8px; font-size:12px; padding:6px 12px;
  border:1px solid var(--danger-border); border-radius:6px; background:var(--danger-bg);
  color:var(--danger-text); cursor:pointer; }
.orders-leave button:hover { background:#f6dcdc; }

/* ==== メールで続ける専用ページ（/login-mail、2026-09-10 最終直しA）====
   フォーム部品（.pageの素のlabel/input/button）に、注文フォームの .order-form
   （本ファイル504行目付近）と同じ作法で見た目を付ける。 */
.login-mail label { display:block; margin:10px 0; font-size:13px; color:var(--text-strong); }
.login-mail input { display:block; width:100%; max-width:360px; box-sizing:border-box;
  margin-top:4px; padding:8px; border:1px solid var(--line-mid); border-radius:4px;
  font-size:14px; font-family:inherit; }
.login-mail [data-login-mail-send] { display:inline-block; margin-top:12px;
  background:var(--accent-solid); color:#fff; font-size:14px; font-weight:bold;
  padding:9px 20px; border:none; border-radius:6px; cursor:pointer; }
.login-mail [data-login-mail-send]:hover { background:var(--accent-solid-hover); }
.login-mail [data-login-mail-done] { margin-top:12px; padding:12px; border-radius:6px;
  background:var(--ok-bg); color:var(--ok-text); font-size:13px; }
.login-mail [data-login-mail-fail] { margin-top:12px; padding:12px; border-radius:6px;
  background:var(--danger-bg); color:var(--danger-text); font-size:13px; }

/* ====================================================================
   元の配色（緑）に戻す場合
   ファイル冒頭の :root{ ... } ブロックを、下の内容にまるごと置き換えるだけでよい
   （変数名は同じなので、そこから下のCSSは一切書き換え不要）。
   ====================================================================
:root {
  --bg-page:      #fff;
  --bg-tint:      #f5f5f5;
  --text-strong:  #333;
  --text-body:    #333;
  --text-muted:   #888;
  --line-soft:    #e5e5e5;
  --line-mid:     #dce8de;

  --accent-light: #f4faf6;
  --accent-mid:   #2f9e63;
  --accent-deep:  #2f9e63;
  --accent-solid:       #2f9e63;
  --accent-solid-hover: #27824f;

  --price:            #c0392b;
  --order-btn:        #e67e22;
  --order-btn-hover:  #d35400;
  --order-btn-shadow: #c05f10;
  --order-tint:       #fff8f0;

  --ok-bg:   #e8f6ee;
  --ok-text: #1e6b42;
  --danger-bg:     #fdecea;
  --danger-text:   #c0392b;
  --danger-border: #e5b8b3;
  --neutral-tag: #95a5a6;
  --disabled-bg: #bbbbbb;

  --amazon:      #ff9900;
  --amazon-text: #c07000;
  --amazon-tint: #fff7ea;
}

   ベージュ（2026-08-03〜2026-08-09）に戻す場合
:root {
  --bg-page:      #fbfaf7;
  --bg-tint:      #f3eee4;
  --text-strong:  #1a1816;
  --text-body:    #3a3530;
  --text-muted:   #88817a;
  --line-soft:    #ece8e0;
  --line-mid:     #d8d3cc;

  --accent-light: #e8d9c8;
  --accent-mid:   #c9b59e;
  --accent-deep:  #8a7560;
  --accent-solid:       #6b5a3e;
  --accent-solid-hover: #57492f;

  --price:            #8a3324;
  --order-btn:        #7a3b23;
  --order-btn-hover:  #5f2c19;
  --order-btn-shadow: #4a2313;
  --order-tint:       #f5ece4;

  --ok-bg:   #ece6d8;
  --ok-text: #5c4a34;
  --danger-bg:     #f4e7e2;
  --danger-text:   #8a3324;
  --danger-border: #ddbfae;
  --neutral-tag: #a89a89;
  --disabled-bg: #c9c2b6;

  --amazon:      #ff9900;
  --amazon-text: #c07000;
  --amazon-tint: #fff7ea;
}
   ==================================================================== */