@charset "UTF-8";

/************************************/
/* CSS Reset */
/************************************/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}
body{min-height:100vh;line-height:1.6;font-family:var(--font-family-main);color:var(--color-text);background-color:var(--color-bg);}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;line-height:1.2;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto;}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none;}
button{cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;}
/*h1, h2, h3, h4, h5, h6, strong, b {font-weight: 700;}
p, span, div {font-weight: 400;}*/

/* Focus Style (Accessibility)*/
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus{outline:2px solid var(--color-primary);outline-offset:2px;}

/* 本文は palt を解除する。
   palt は句読点・カギ括弧・中黒を半角幅に詰めるため、メイリオの本文だと
   「、」「。」「（）」の前後だけ字間が抜けて凸凹に見える。長文の可読性を優先して normal に戻す。
   併せて letter-spacing も 0（メイリオ本来の字送り）に戻し、行間は line-height:1.6 で確保する */
body {
    font-family: var(--font-family-main);
    lletter-spacing: 0.05em;
    font-feature-settings: normal;
    -webkit-font-kerning: auto;
    font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* palt と広めの字間は見出しにだけ効かせる。
   見出しは短く字数も少ないため、詰め組みの方が語のまとまりが出て締まって見える */
h1, h2, .c-title {
    font-feature-settings: "palt" 1;
    letter-spacing: 0.02em;
}


/* ==========================================
  Design Tokens
========================================== */

:root {
  /* カラー：ブランド */
  --color-primary: #f23064;
  --color-primary-dark: #c9224b;
  --color-primary-light: #fdeaf0;
  --color-primary-light-hover: #fbd9e4;
  --color-primary-pale: #fff5f8;
  /* カート専用のアクセント（オレンジ・ゴールド）。会員ボタンのピンクと役割を分ける */
  --color-cart: #ffb703;
  --color-cart-hover: #e0a000;
  --color-accent: #2b2b2b;
  /* 現行サイト再現ブロック（.user_list / .slider）が参照するメインカラー。tonmana.md の #f23064 に合わせる */
  --main-color: #f23064;

  /* カラー：ベース */
  --color-bg: #ffffff;
  --color-grey: #cccccc;
  --color-bg-sub: #f6f6f8;
  --color-bg-muted: #fafafb;
  --color-border: #e4e4e8;
  --color-border-strong: #cfcfd6;

  /* カラー：テキスト */
  /* 本文色は #333 → #111。メイリオは線が細く、白背景の #333 だとスマホで沈んで見えるため
     コントラストを上げる（tonmana.md の「#333 程度」より濃い値。可読性を優先した意図的な変更） */
  --color-text: #111111;
  --color-text-sub: #888888;
  --color-text-invert: #ffffff;
  --color-link: #2887bf;

  /* カラー：ステータス */
  --color-success: #2e9e6b;
  --color-success-bg: #e8f6ef;
  --color-warning: #d9800f;
  --color-warning-bg: #fdf3e2;
  --color-danger: #d93a3a;
  --color-danger-bg: #fdecec;
  --color-info: #1f6f9c;
  --color-info-bg: #eaf4fb;
  --color-muted: #8d8d96;
  --color-muted-bg: #f0f0f3;

  /* カラー：順位（金・銀・銅）。サイドバーのセラーランキングとランキングページで共用 */
  --color-rank-1: #c9a227;
  --color-rank-2: #9aa0a6;
  --color-rank-3: #a9713b;

  /* カラー：パーツ */
  --color-footer-bg: #222222;
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-overlay-white: rgba(255, 255, 255, 0.18);

  /* フォント */
  /*--font-family-main: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;*/
  --font-family-main: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  
  /* 文字サイズのカタログ */
  --fz-xs: 11px;
  --fz-s: 12px;
  --fz-m: 13px;
  --fz-base: 15px;
  --fz-l: 17px;
  --fz-xl: 20px;
  --fz-2xl: 25px;

  /* 余白のカタログ */
  --space-2xs: 3px;
  --space-xs: 6px;
  --space-s: 10px;
  --space-m: 14px;
  --space-l: 22px;
  --space-xl: 30px;
  --space-2xl: 44px;
  --space-note-line: 10px; /* 注意書きの項目間（ux-rules 8.）。5px では行間 1.7 に埋もれて区切りが見えないため広げた */

  /* 角丸 */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-full: 999px;

  /* シャドウ */
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-m: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-l: 0 6px 20px rgba(0, 0, 0, 0.14);

  /* レイアウト */
  --width-content: 1120px;
  --header-height: 56px;
  --tap-size: 44px;

  /* 重なり順 */
  --z-header: 100;
  --z-overlay: 150;
  --z-drawer: 200;
  --z-modal: 250;
  --z-flash: 300;

  /* トランジション */
  --transition: 0.2s ease;
}

@media (min-width:1024px) {
  :root {
    --header-height: 64px;
  }
}

/* ==========================================
  Base Element
========================================== */

body{font-size:var(--fz-base);}
a{color:var(--color-link);transition:opacity var(--transition);}
a:hover{opacity:0.7;}

/* ==========================================
  Icon (Tabler Icons)
  body の letter-spacing / line-height がアイコンにも効いて
  文字とのベースラインがずれるため、アイコン側で打ち消す。
  見出し（h1 / h2 / .c-title）内のアイコンには palt と字間が効いてしまうため、
  font-feature-settings も normal に戻す
========================================== */

.ti{flex:none;line-height:1;letter-spacing:0;font-feature-settings:normal;}

/* ==========================================
  Container
========================================== */

.c-container{width:100%;max-width:var(--width-content);margin-inline:auto;padding-inline:var(--space-m);}

@media (min-width:768px) {
  .c-container {padding-inline:var(--space-l);}
}

/* ==========================================
  Title
========================================== */

.c-title{font-weight:700;color:var(--color-text);line-height:1.4;}
.c-title--page{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-m);padding-bottom:var(--space-s);border-bottom:3px solid var(--color-primary);font-size:var(--fz-xl);}
.c-title--page i{flex:none;color:var(--color-primary);font-size:1.2em;}
.c-title--section{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-s);font-size:var(--fz-l);}
.c-title--section i{flex:none;color:var(--color-primary);font-size:1.1em;}
.c-title--sub{font-size:var(--fz-s);color:var(--color-text-sub);font-weight:700;letter-spacing:0.08em;}
/* 帯見出し（現行 .main_TTL 相当）：メインカラーのベタ帯＋白文字。
   英語表記は「日本語の前に置く小さなラベル」として1行に収める（縦積みにすると帯が厚くなりすぎるため）。
   日本語との差は「サイズ・不透明度・字間・区切り罫」の4点で付ける */
.c-title--band{display: flex;margin-bottom:var(--space-s);padding: 6px var(--space-m) 6px;background-color:var(--color-primary);border-radius:var(--radius-m);color:var(--color-text-invert);font-size:var(--fz-base);line-height: 1.2;flex-direction: column;}
.c-title--band .c-title__en{display:inline-block;margin-right:var(--space-xs);padding-right:var(--space-xs);/* border-right:1px solid rgba(255,255,255,0.5); */font-size: 9.5px;font-weight:700;line-height: 1.5;letter-spacing: -0.01em;opacity: 0.8;}
.c-title--band i{margin-right:var(--space-2xs);color:var(--color-text-invert);}

@media (min-width:1024px) {
  .c-title--band {padding:var(--space-xs) var(--space-l);font-size:var(--fz-l);}
  .c-title--band .c-title__en {font-size:var(--fz-xs);}
}
/* タイトルに付く補足文言（「(更新順)」等）。本体より小さく・薄いトーンで表示する（ux-rules 4.） */
.c-title__note{font-size:var(--fz-s);font-weight:400;color:var(--color-text-sub);}
/* 帯見出しの中では地色がピンクのため、補足文言は白の透過で薄さを表現する（グレーだとコントラスト不足） */
.c-title--band .c-title__note{color:var(--color-text-invert);opacity:0.85;}
.c-title--section .c-badge{margin-right:var(--space-2xs);}

@media (min-width:1024px) {
  .c-title--page {font-size:var(--fz-xl);}
  .c-title--section {font-size:var(--fz-xl);}
}

/* ==========================================
  Button
========================================== */

.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:var(--tap-size);min-width:var(--tap-size);padding:var(--space-xs) var(--space-m);border-radius: var(--radius-full);font-size:var(--fz-m);font-weight:700;line-height:1.3;text-align:center;transition:background-color var(--transition),color var(--transition),border-color var(--transition);}
.c-btn--primary{background-color: #fff;color: var(--color-primary);border: 1px solid var(--color-primary);}
.c-btn--primary:hover{/* background-color:var(--color-primary-dark); */}
.c-btn--outline{background-color:var(--color-bg);color:var(--color-primary);border:1px solid var(--color-primary);}
.c-btn--outline:hover{background-color:var(--color-primary-light);}
.c-btn--ghost{background-color:var(--color-bg-sub);color:var(--color-text);border:1px solid var(--color-border);}
.c-btn--ghost:hover{background-color:var(--color-border);}
.c-btn--danger{background-color:var(--color-danger);color:var(--color-text-invert);}
.c-btn--danger:hover{background-color:#b82f2f;}
/* 主要アクション（変更する・出品する・送信 等）は他のボタンより大きく見せる（ux-rules 2.）。
   一覧行などで使う --small との併用時は --small のサイズを優先する */
.c-btn--primary:not(.c-btn--small){gap:var(--space-xs);min-height: var(--tap-size);padding:var(--space-m) var(--space-xl);font-size: var(--fz-base);}
.c-btn--primary:not(.c-btn--small) i{font-size:var(--fz-xl);}
/* フォームの確定ボタンは全幅（モバイル）／PCでは中央配置 */
.c-btn--block{display:flex;width: 90%;margin-inline:auto;}
.c-btn--small{min-height:36px;padding:var(--space-2xs) var(--space-s);font-size:var(--fz-s);}
.c-btn[disabled]{background-color:var(--color-muted-bg);color:var(--color-muted);cursor:not-allowed;}

@media (min-width:1024px) {
  .c-btn--block {width:fit-content;min-width:320px;max-width:100%;}
}

/* ==========================================
  Badge
========================================== */

.c-badge{display:inline-flex;align-items:center;gap:2px;padding:3px var(--space-xs);border-radius:var(--radius-full);font-size:var(--fz-xs);font-weight:700;line-height:1.6;white-space:nowrap;}
.c-badge i{font-size:var(--fz-m);}
.c-badge--progress{background-color:var(--color-primary-light);color:var(--color-primary-dark);}
.c-badge--primary{background-color:var(--color-primary);color:var(--color-text-invert);}
.c-badge--success{background-color:var(--color-success-bg);color:var(--color-success);}
.c-badge--warning{background-color:var(--color-warning-bg);color:var(--color-warning);}
.c-badge--danger{background-color:var(--color-danger-bg);color:var(--color-danger);}
.c-badge--muted{background-color:var(--color-muted-bg);color:var(--color-muted);}

/* ==========================================
  Tag
========================================== */

.c-tag-list{display:flex;flex-wrap:wrap;gap:var(--space-2xs);}
.c-tag{display:inline-block;padding:2px var(--space-xs);border:1px solid var(--color-border-strong);border-radius:var(--radius-s);background-color:var(--color-bg-sub);font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.6;}

/* ==========================================
  Note (注意書き・ノートボックス)
========================================== */

/* 本文と区別したい補足・注意書きはこのコンポーネントで統一する。
   区別の手段は「背景色の濃淡」「全周均一の細い枠線」「種別を示すアイコン」の3つ。
   ※片側だけ太いカラーボーダーを引く見せ方は使わない（coding-standards.md） */
.c-note{display:flex;align-items: center;gap:var(--space-xs);padding: var(--space-xs) var(--space-xs);background-color:var(--color-bg-sub);border:1px solid var(--color-border-strong);border-radius:var(--radius-m);font-size:var(--fz-m);line-height: 1.5;color:var(--color-text);}
.c-note a{text-decoration:underline;}
.c-note__icon{flex:none;font-size:var(--fz-l);line-height:1.4;color:var(--color-text-sub);}
/* min-width:0 と overflow-wrap:anywhere はセット。flex アイテムは既定で min-content 未満に縮まないため、
   区切りのない長い文字列（メールドメインの羅列・URL 等）が枠外にはみ出すのを両方で防ぐ */
.c-note__body{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.c-note__title{display:block;margin-bottom:var(--space-2xs);font-weight:700;overflow-wrap:anywhere;}

/* 注意書きのテキスト装飾ユーティリティ（ux-rules 8.）。buyer / seller 問わず .c-note 全般で使い回す。
   c-note__list … 文の羅列を「・」付きのリストにする（行間は --space-note-line）
   c-note__line … リストにしない文の切れ目に余白を入れる
   c-note__mark … 太字より強く目立たせたい語句のカラーマーカー */
.c-note__list{display:flex;flex-direction:column;gap: var(--space-2xs);}
/* 項目自体は flex にしない。flex にすると本文中の <a> や <strong> が個別のフレックスアイテムになり、
   「テキスト｜リンク｜テキスト」の3カラムに分断されてしまうため（絶対配置の「・」＋左padding で吊り下げる） */
.c-note__item{position:relative;padding-left:1.1em;min-width:0;overflow-wrap:break-word;word-break:break-word;}
.c-note__item::before{content:"・";position:absolute;top:0;left:0;}
.c-note__line{display:block;margin-bottom:var(--space-note-line);}
.c-note__line:last-child{margin-bottom:0;}
.c-note__mark{padding:0 2px;background-color:var(--color-primary-light);font-weight:700;}
/* 種別は「背景の濃淡＋枠線の色味＋アイコンの色」で示す。本文は常に同じ濃さでコントラストを確保する */
.c-note--info{background-color:var(--color-info-bg);border-color:rgba(31, 111, 156, 0.35);margin-bottom: var(--space-m);}
.c-note--info .c-note__icon{color:var(--color-info);}
.c-note--info a{color:var(--color-info);}
.c-note--warning{background-color:var(--color-warning-bg);border-color:rgba(217, 128, 15, 0.4);}
.c-note--warning .c-note__icon{color:var(--color-warning);}
.c-note--danger{background-color:var(--color-danger-bg);border-color:rgba(217, 58, 58, 0.4);}
.c-note--danger .c-note__icon{color:var(--color-danger);}

/* ==========================================
  Card
========================================== */

.c-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);padding:var(--space-m);}

@media (min-width:1024px) {
  .c-card {padding:var(--space-l);}
}

/* ==========================================
  Table (〜1023px はカード型縦積み / 1024px〜 はテーブル)
========================================== */

/* 列数の多い表（ポイント履歴など）は1024px 丁度で数pxはみ出す。
   ページ全体を横スクロールさせず、表の中だけでスクロールさせる */
.c-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.c-table{display:block;width:100%;}
.c-table thead{display:none;}
.c-table tbody{display:block;}
.c-table tr{display:flex;flex-direction:column;margin-bottom:var(--space-m);padding:var(--space-s) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);}
.c-table tr:last-child{margin-bottom:0;}
.c-table td{display:grid;grid-template-columns:6em 1fr;align-items:start;gap:var(--space-s);order:5;padding:var(--space-xs) 0;border-bottom:1px dashed var(--color-border);font-size:var(--fz-m);line-height:1.7;word-break:break-word;}
.c-table td::before{content:attr(data-label);padding-top:2px;font-size:var(--fz-xs);font-weight:700;color:var(--color-text-sub);line-height:1.7;}
.c-table td:last-child{padding-bottom:0;border-bottom:none;}

/* セル種別（モバイル時の表示優先度）
   セレクタは必ず `td.〜` で書くこと。`.c-table td`（詳細度 0,1,1）より弱い `.c-table__cell--primary`（0,1,0）だと
   display と order が上書きされず、カード型で「日時が見出しにならない・並び順が効かない」状態になる */
td.c-table__cell--primary{display:block;order:1;padding-top:0;font-size:var(--fz-l);font-weight:700;line-height:1.5;}
td.c-table__cell--primary::before{display:none;}
td.c-table__cell--status{order:2;}
td.c-table__cell--price{order:3;font-size:var(--fz-base);font-weight:700;color:var(--color-primary-dark);}
td.c-table__cell--sub{order:8;font-size:var(--fz-xs);color:var(--color-text-sub);}
td.c-table__cell--action{display:block;order:9;padding-top:var(--space-s);}
td.c-table__cell--action::before{display:block;margin-bottom:var(--space-2xs);}

@media (min-width:1024px) {
  .c-table-wrap {border:1px solid var(--color-border);border-radius:var(--radius-l);background-color:var(--color-bg);}
  .c-table {display:table;table-layout:auto;}
  .c-table thead {display:table-header-group;}
  .c-table tbody {display:table-row-group;}
  .c-table tr {display:table-row;margin:0;padding:0;background-color:transparent;border:none;border-radius:0;box-shadow:none;}
  .c-table tbody tr:nth-child(even) {background-color:var(--color-bg-muted);}
  .c-table tbody tr:hover {background-color:var(--color-primary-light);}
  /* sticky の基準は「最も近いスクロールコンテナ」＝ .c-table-wrap（overflow-x:auto）であり、ビューポートではない。
     ここで top に固定ヘッダーの高さを入れると、見出し行が枠内で下にずれて1行目に重なり、
     1行目が見えなくなる（ポイント履歴で success 行が隠れていた原因）。枠の上端に貼り付けるため top:0 とする */
  .c-table th {position:sticky;top:0;z-index:1;padding:12px 8px;background-color:var(--color-bg-sub);border-bottom:1px solid var(--color-border-strong);font-size:var(--fz-s);font-weight:700;text-align:left;line-height:1.4;white-space:nowrap;}
  .c-table th:first-child {border-top-left-radius:var(--radius-l);}
  .c-table th:last-child {border-top-right-radius:var(--radius-l);}
  .c-table td {display:table-cell;padding:12px 8px;border-bottom:1px solid var(--color-border);font-size:var(--fz-m);vertical-align:top;}
  .c-table td::before {display:none;}
  .c-table tbody tr:last-child td {border-bottom:none;}
  .c-table tbody tr:last-child td:first-child {border-bottom-left-radius:var(--radius-l);}
  .c-table tbody tr:last-child td:last-child {border-bottom-right-radius:var(--radius-l);}
  .c-table__cell--primary {display:table-cell;padding:12px 8px;font-size:var(--fz-m);font-weight:700;}
  .c-table__cell--price {font-size:var(--fz-m);white-space:nowrap;}
  .c-table__cell--sub {font-size:var(--fz-s);color:var(--color-text-sub);white-space:nowrap;}
  .c-table__cell--action {display:table-cell;padding:12px 8px;}
}

/* ==========================================
  List (一覧行：サムネイル＋商品名＋金額＋ステータス)
  ※ 列数の多い一覧は table ではなくこの行リストで組む（ux-rules 1.）
  ※ 行自体はクリック領域にしない。操作は行内の button のみ
========================================== */

.c-list{display:flex;flex-direction:column;gap:var(--space-xs);}
.c-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-s);padding:var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);}
.c-list__media{display:flex;flex-direction:column;align-items:center;flex:none;gap:2px;width:64px;}
.c-list__id{display:inline-flex;align-items:center;gap:1px;font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.4;white-space:nowrap;}
.c-list__id i{font-size:var(--fz-xs);}
.c-list__thumb{width:64px;height:64px;border-radius:var(--radius-m);background-color:var(--color-bg-sub);object-fit:cover;}
.c-list__body{display:flex;flex-direction:column;flex:1 1 0;gap:var(--space-2xs);min-width:0;}
.c-list__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--fz-m);font-weight:700;line-height:1.5;}
.c-list__meta{display:flex;flex-wrap:wrap;gap:2px var(--space-xs);font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.6;}
.c-list__meta-item{display:inline-flex;align-items:center;gap:2px;min-width:0;}
.c-list__meta-item i{flex:none;font-size:var(--fz-m);}
.c-list__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-xs);margin-top:var(--space-2xs);}
.c-list__mark{display:inline-flex;align-items:center;padding:2px var(--space-2xs);border-radius:var(--radius-s);background-color:var(--color-bg-sub);color:var(--color-text-sub);font-size:var(--fz-xs);line-height:1.4;}
.c-list__mark i{font-size:var(--fz-m);}
.c-list__price{display:inline-flex;align-items:center;gap:2px;margin-left:auto;font-size:var(--fz-base);font-weight:700;color:var(--color-primary-dark);white-space:nowrap;}
.c-list__price i{font-size:var(--fz-m);}
.c-list__toggle{display:flex;align-items:center;justify-content:center;flex:none;width:var(--tap-size);height:var(--tap-size);margin:calc(var(--space-2xs) * -1) calc(var(--space-2xs) * -1) 0 0;border-radius:var(--radius-m);color:var(--color-text-sub);font-size:var(--fz-l);}
.c-list__toggle:hover{background-color:var(--color-bg-sub);}
.c-list__toggle i{transition:transform var(--transition);}
.c-list__toggle[aria-expanded="true"] i{transform:rotate(180deg);}
.c-list__detail{flex-basis:100%;margin-top:var(--space-2xs);padding-top:var(--space-s);border-top:1px dashed var(--color-border);}
.c-list__detail[hidden]{display:none;}
.c-list__action{display:flex;align-items:center;flex:none;align-self:center;}

@media (min-width:1024px) {
  .c-list {gap:var(--space-s);}
  .c-list__item {gap:var(--space-m);padding:var(--space-m);}
  .c-list__media {width:80px;}
  .c-list__thumb {width:80px;height:80px;}
  .c-list__title {-webkit-line-clamp:1;font-size:var(--fz-base);}
  .c-list__meta {gap:2px var(--space-m);font-size:var(--fz-s);}
  .c-list__price {font-size:var(--fz-l);}
}

/* ==========================================
  List Actions (一覧行の操作ボタン群)
========================================== */

/* 〜767px はアイコンのみに圧縮して1行に収め、768px〜 で文言付きに戻す（ux-rules 1. のアイコン圧縮）。
   文言は c-actions__label として DOM に残し視覚的に隠すだけなので、
   読み上げ・blade再統合時の文言は一切変わらない。アイコンのみになる区間は
   各ボタンに aria-label を必須とする（ux-rules 4.） */
.c-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);}
.c-actions form{display:flex;}
.c-actions .c-btn,
.c-actions .c-linkbtn{gap:0;min-width:var(--tap-size);min-height:var(--tap-size);padding:0;}
.c-actions .c-btn i,
.c-actions .c-linkbtn i{font-size:var(--fz-l);}
.c-actions__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (min-width:768px) {
  .c-actions {gap:var(--space-2xs) var(--space-s);}
  .c-actions .c-btn,
  .c-actions .c-linkbtn {gap:var(--space-2xs);min-width:0;min-height:36px;padding:var(--space-2xs) var(--space-s);font-size:var(--fz-s);}
  .c-actions__label {position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;}
}

/* ==========================================
  Detail List (行タップで開く詳細の項目リスト)
========================================== */

.c-detail-list{display:flex;flex-direction:column;gap:var(--space-xs);}
.c-detail-list__row{display:grid;grid-template-columns:8em 1fr;align-items:center;gap:var(--space-xs);font-size:var(--fz-m);}
.c-detail-list__label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);font-size:var(--fz-xs);font-weight:700;color:var(--color-text-sub);line-height:1.7;}
.c-detail-list__label i{flex:none;font-size:var(--fz-m);}
.c-detail-list__value{min-width:0;line-height:1.7;word-break:break-word;}

/* ==========================================
  News (新着情報・お知らせ)
========================================== */

.c-news{display:flex;flex-direction:column;gap:var(--space-s);}
.c-news__item{padding:var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);}
.c-news__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-2xs);}
.c-news__date{display:inline-flex;align-items:center;gap:2px;font-size:var(--fz-xs);color:var(--color-text-sub);}
.c-news__date i{font-size:var(--fz-m);}
.c-news__title{margin-bottom:var(--space-2xs);font-size:var(--fz-base);font-weight:700;line-height:1.5;}
.c-news__body{font-size:var(--fz-m);line-height:1.8;word-break:break-word;}

/* ==========================================
  Empty State (空状態)
========================================== */

.c-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-2xl) var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);text-align:center;}
.c-empty__icon{font-size:40px;color:var(--color-border-strong);line-height:1;}
.c-empty__text{font-size:var(--fz-m);color:var(--color-text-sub);}

/* ==========================================
  Form Parts
========================================== */

.c-form-group{display:flex;flex-direction:column;gap:var(--space-2xs);margin-bottom:var(--space-m);}
.c-label{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);font-size:var(--fz-m);font-weight:700;line-height:1.5;}
.c-label i{flex:none;color:var(--color-text-sub);font-size:var(--fz-l);}
.c-label__required{flex:none;margin-left:var(--space-2xs);padding:2px var(--space-xs);border-radius:var(--radius-s);background-color:var(--color-danger-bg);color:var(--color-danger);font-size:var(--fz-xs);white-space:nowrap;}
.c-input,
.c-select,
.c-textarea{width:100%;min-height:var(--tap-size);padding:var(--space-xs) var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-m);font-size:var(--fz-base);}
.c-textarea{min-height:120px;line-height:1.7;}
.c-input::placeholder,
.c-textarea::placeholder{color:var(--color-muted);}
.c-form-error{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--fz-s);color:var(--color-danger);}
.c-form-error i{flex:none;font-size:var(--fz-m);}

/* ==========================================
  Accordion (開閉セクション)
  初期は閉じた状態。見出しをタップして開閉し、シェブロンで開閉状態を示す
========================================== */

.c-accordion{margin-bottom:var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);overflow:hidden;}
.c-accordion__head{font-size:var(--fz-m);font-weight:700;}
.c-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);width:100%;min-height:var(--tap-size);padding:var(--space-s) var(--space-m);background-color:var(--color-bg-sub);color:var(--color-text);font-size:var(--fz-m);font-weight:700;line-height:1.4;text-align:left;}
.c-accordion__trigger:hover{background-color:var(--color-border);}
.c-accordion__label{display:inline-flex;align-items:center;gap:var(--space-2xs);min-width:0;}
.c-accordion__label i{flex:none;color:var(--color-text-sub);font-size:var(--fz-l);}
.c-accordion__label-text{min-width:0;overflow-wrap:anywhere;}
/* 見出しに添える補足（本体より小さく薄いトーン） */
.c-accordion__sub{display:block;font-size:var(--fz-xs);font-weight:400;line-height:1.4;opacity:0.8;}
.c-accordion__chevron{flex:none;color:var(--color-text-sub);font-size:var(--fz-l);transition:transform var(--transition);}
.c-accordion__trigger[aria-expanded="true"] .c-accordion__chevron{transform:rotate(180deg);}
.c-accordion__body{padding:var(--space-m);}
.c-accordion__body[hidden]{display:none;}
/* 警告トーン（絶対厳守・注意事項など） */
/* 機能の案内用アコーディオン。注意書き（--danger）や通常の折りたたみと同じ見た目だと
   埋もれてしまうため、メインカラーの淡色背景＋全周の細枠で「使える機能」であることを示す */
.c-accordion--feature{border-color:var(--color-primary);}
.c-accordion--feature .c-accordion__trigger{background-color:var(--color-primary-light);color:var(--color-primary-dark);}
.c-accordion--feature .c-accordion__trigger:hover{background-color:var(--color-primary-light-hover);}
.c-accordion--feature .c-accordion__label i,
.c-accordion--feature .c-accordion__chevron{color:var(--color-primary);}

.c-accordion--danger{border-color:rgba(217, 58, 58, 0.4);}
.c-accordion--danger .c-accordion__trigger{background-color:var(--color-danger-bg);color:var(--color-danger);}
.c-accordion--danger .c-accordion__trigger:hover{background-color:#f9dcdc;}
.c-accordion--danger .c-accordion__label i,
.c-accordion--danger .c-accordion__chevron{color:var(--color-danger);}

/* ==========================================
  Modal (送信前の確認モーダル)
  確認画面を持たないフォームの誤送信防止用。送信ボタンで開き「送信する／修正する」で分岐する。
  ダイアログ自体は position:fixed のセンタリング。〜767px は下端に寄せて親指で押しやすくする
========================================== */

.c-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-end;justify-content:center;padding:var(--space-m);}
.c-modal[hidden]{display:none;}
.c-modal__overlay{position:absolute;inset:0;background-color:var(--color-overlay);}
.c-modal__dialog{position:relative;display:flex;flex-direction:column;gap:var(--space-m);width:100%;max-width:480px;max-height:calc(100vh - var(--space-xl));padding:var(--space-l) var(--space-m);background-color:var(--color-bg);border-radius:var(--radius-l);box-shadow:var(--shadow-l);overflow-y:auto;}
.c-modal__icon{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;margin:0 auto;border-radius:var(--radius-full);background-color:var(--color-primary-light);color:var(--color-primary);font-size:var(--fz-2xl);}
.c-modal__icon--danger{background-color:var(--color-danger-bg);color:var(--color-danger);}
.c-modal__title{font-size:var(--fz-l);font-weight:700;line-height:1.5;text-align:center;}
.c-modal__text{font-size:var(--fz-m);line-height:1.8;text-align:center;color:var(--color-text-sub);}
.c-modal__body{font-size:var(--fz-m);line-height:1.8;}
/* 「送信する」を主・「修正する」を副として上下に並べる（横並びは押し間違いが起きやすいため縦積みを既定にする） */
.c-modal__action{display:flex;flex-direction:column-reverse;gap:var(--space-xs);}
.c-modal__close{position:absolute;top:var(--space-xs);right:var(--space-xs);display:flex;align-items:center;justify-content:center;width:var(--tap-size);height:var(--tap-size);border-radius:var(--radius-full);color:var(--color-text-sub);font-size:var(--fz-xl);}
.c-modal__close:hover{background-color:var(--color-bg-sub);}

@media (min-width:768px) {
  .c-modal {align-items:center;}
  .c-modal__dialog {padding:var(--space-xl) var(--space-l);}
}

/* ==========================================
  Photo Grid (画像アップロードの正方形枠)
  input[type=file] は視覚的に隠し、ラベルの枠をタップして選択させる
========================================== */

.c-photo-grid,
.photo-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-xs);}
.photo-grid__item{position:relative;min-width:0;}
.photo-grid__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.photo-grid__box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1 / 1;padding:var(--space-2xs);background-color:var(--color-bg-sub);border:1px dashed var(--color-border-strong);border-radius:var(--radius-m);color:var(--color-text-sub);cursor:pointer;overflow:hidden;transition:border-color var(--transition),background-color var(--transition);}
.photo-grid__box:hover{border-color:var(--color-primary);background-color:var(--color-primary-light);}
.photo-grid__input:focus-visible + .photo-grid__box{outline:2px solid var(--color-primary);outline-offset:2px;}
.photo-grid__icon{font-size:var(--fz-2xl);}
.photo-grid__num{font-size:10px;font-weight:700;line-height:1.3;}
.photo-grid__badge{position:absolute;top:var(--space-2xs);left:var(--space-2xs);padding:1px var(--space-2xs);font-size:9px;}
/* 登録済み写真：プレビューを敷き、下部に「変更」を重ねる */
.photo-grid__box--filled{padding:0;border-style:solid;background-color:var(--color-bg);}
.photo-grid__preview{width:100%;height:100%;object-fit:cover;}
.photo-grid__overlay{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:2px;padding:2px;background-color:rgba(0, 0, 0, 0.55);color:var(--color-text-invert);font-size:10px;font-weight:700;}

@media (min-width:768px) {
  .photo-grid {gap:var(--space-s);max-width:520px;}
  .photo-grid__num {font-size:var(--fz-xs);}
  .photo-grid__badge {font-size:10px;}
  .photo-grid__overlay {font-size:var(--fz-xs);padding:var(--space-2xs);}
}

/* ==========================================
  Tooltip (その場で開く補足説明)
  別ページに飛ばさず、タップで説明を吹き出し表示する
========================================== */

.c-tooltip{position:relative;display:inline-block;}
.c-tooltip__trigger{display:inline-flex;align-items:center;gap:2px;color:var(--color-link);font-size:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.c-tooltip__trigger i{font-size:var(--fz-m);}
.c-tooltip__body{position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;display:flex;flex-direction:column;gap:var(--space-xs);width:min(300px, 78vw);padding:var(--space-s) var(--space-m);background-color:var(--color-text);border-radius:var(--radius-m);box-shadow:var(--shadow-l);color:var(--color-text-invert);font-size:var(--fz-xs);font-weight:400;line-height:1.7;text-align:left;}
.c-tooltip__body[hidden]{display:none;}
.c-tooltip__body::after{content:"";position:absolute;top:100%;left:var(--space-m);border:6px solid transparent;border-top-color:var(--color-text);}
.c-tooltip__line{display:block;}
.c-tooltip__line strong{color:var(--color-text-invert);}

/* ==========================================
  Flash Message
========================================== */

.c-flash{width:100%;padding:var(--space-s) var(--space-m);background-color:var(--color-success-bg);border-bottom:1px solid var(--color-success);color:var(--color-success);font-size:var(--fz-m);font-weight:700;text-align:center;line-height:1.6;cursor:pointer;}
.c-flash.hidden{display:none;}

/* ==========================================
  Nav Link Tile (ボタン風のナビリンク)
========================================== */

.c-navlink-list{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-xs);}
.c-navlink{display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:var(--tap-size);padding:var(--space-xs) var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-primary);border-radius:var(--radius-m);color:var(--color-primary);font-size:var(--fz-s);font-weight:700;text-align:center;line-height:1.4;transition:background-color var(--transition),color var(--transition);}
.c-navlink i{flex:none;font-size:var(--fz-l);}
.c-navlink:hover{background-color:var(--color-primary);color:var(--color-text-invert);opacity:1;}
.c-navlink--danger{border-color:var(--color-border-strong);color:var(--color-text-sub);}
.c-navlink--danger:hover{background-color:var(--color-muted-bg);color:var(--color-danger);}

@media (min-width:768px) {
  .c-navlink-list {grid-template-columns:repeat(3, 1fr);gap:var(--space-s);}
  .c-navlink {font-size:var(--fz-m);}
}

@media (min-width:1024px) {
  .c-navlink-list {grid-template-columns:repeat(4, 1fr);}
}

/* ==========================================
  Link Action (遷移リンクのタップ領域確保)
  ※ 遷移するものは button ではなく a のまま扱い、塗りボタン化はしない
========================================== */

.c-link-action{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:var(--tap-size);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-m);color:var(--color-link);font-size:var(--fz-m);font-weight:700;text-decoration:underline;line-height:1.4;}
.c-link-action i{flex:none;font-size:var(--fz-l);}
.c-link-action:hover{background-color:var(--color-bg-sub);opacity:1;}
.c-link-action--primary{color:var(--color-primary-dark);}

/* 遷移リンクをボタンの見た目にしたい場合に使う（要素は a のまま＝ボタン代用ではない） */
.c-linkbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:var(--tap-size);padding:var(--space-xs) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-primary);border-radius: var(--radius-full);color:var(--color-primary);font-size:var(--fz-m);font-weight:700;line-height:1.3;text-align:center;transition:background-color var(--transition),color var(--transition);}
.c-linkbtn i{flex:none;font-size:var(--fz-l);}
.c-linkbtn:hover{background-color:var(--color-primary);color:var(--color-text-invert);opacity:1;}
.c-linkbtn--small{min-height:36px;padding:var(--space-2xs) var(--space-s);font-size:var(--fz-s);}
/* 塗りつぶし（取引一覧の「発送通知」など、次にやるべき操作を目立たせる） */
.c-linkbtn--fill{background-color:var(--color-primary);color:var(--color-text-invert);}
.c-linkbtn--fill:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);}

/* ==========================================
  Breadcrumb (パンくずリスト)
========================================== */

.c-breadcrumb{margin-bottom:var(--space-m);overflow-x:auto;}
.c-breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-2xs);font-size:var(--fz-xs);color:var(--color-text-sub);white-space:nowrap;}
.c-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--space-2xs);}
.c-breadcrumb__item + .c-breadcrumb__item::before{content:"›";color:var(--color-border-strong);}
.c-breadcrumb__item a{color:var(--color-link);}
.c-breadcrumb__item[aria-current="page"]{font-weight:700;color:var(--color-text);}

@media (min-width:1024px) {
  .c-breadcrumb__list {flex-wrap:wrap;white-space:normal;font-size:var(--fz-s);}
}

/* ==========================================
  Pagination
========================================== */

.c-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2xs);margin-top:var(--space-l);}
.c-pagination__link{display:flex;align-items:center;justify-content:center;min-width:var(--tap-size);min-height:var(--tap-size);padding:0 var(--space-xs);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-m);color:var(--color-text);font-size:var(--fz-m);font-weight:700;line-height:1;}
.c-pagination__link:hover{background-color:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary-dark);opacity:1;}
.c-pagination__link[aria-current="page"]{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-invert);}
.c-pagination__link--nav{font-size:var(--fz-l);color:var(--color-text-sub);}
/* 「Xページ中Yページ」の件数表示。リンク列の上に1行で置く */
.c-pagination__status{width:100%;margin-bottom:var(--space-2xs);font-size:var(--fz-xs);color:var(--color-text-sub);text-align:center;}

/* ==========================================
  Choice List (チェックボックス・ラジオの選択リスト)
  input を視覚的に隠し、ラベル全体をタップ領域にする（44px以上を確保）
========================================== */

.c-choice-list,
.choice-list{display:flex;flex-direction:column;gap:var(--space-xs);}
.choice-list__item{min-width:0;}
.choice-list__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.choice-list__label{display:flex;align-items:center;gap:var(--space-s);min-height:var(--tap-size);padding:var(--space-xs) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-m);font-size:var(--fz-m);line-height:1.5;cursor:pointer;transition:background-color var(--transition),border-color var(--transition);}
.choice-list__label::before{content:"";flex:none;width:20px;height:20px;background-color:var(--color-bg);border:2px solid var(--color-border-strong);border-radius:var(--radius-s);transition:background-color var(--transition),border-color var(--transition);}
.choice-list__input[type="radio"] + .choice-list__label::before{border-radius:var(--radius-full);}
.choice-list__label:hover{border-color:var(--color-primary);background-color:var(--color-primary-pale);}
.choice-list__input:checked + .choice-list__label{border-color:var(--color-primary);background-color:var(--color-primary-light);}
.choice-list__input:checked + .choice-list__label::before{border-color:var(--color-primary);background-color:var(--color-primary);box-shadow:inset 0 0 0 3px var(--color-bg);}
.choice-list__input:focus-visible + .choice-list__label{outline:2px solid var(--color-primary);outline-offset:2px;}
.choice-list__name{display:inline-flex;align-items:center;gap:var(--space-2xs);flex:1 1 auto;min-width:0;}
.choice-list__name i{flex:none;color:var(--color-text-sub);font-size:var(--fz-l);}
.choice-list__price{flex:none;font-weight:700;color:var(--color-primary-dark);white-space:nowrap;}
/* 選択肢が短い場合（希望する/希望しない等）は横並びにする */
.choice-list--inline{flex-direction:row;flex-wrap:wrap;}
.choice-list--inline .choice-list__item{flex:0 1 auto;}
.choice-list--inline .choice-list__name{flex:0 1 auto;}

/* ==========================================
  Price List (項目名＋料金の2列リスト)
  オプション・配送方法など「名称と金額だけ」の表に使う
========================================== */

.price-list{display:flex;flex-direction:column;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);overflow:hidden;}
.price-list__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);padding:var(--space-s) var(--space-m);border-bottom:1px solid var(--color-border);font-size:var(--fz-m);}
.price-list__row:last-child{border-bottom:none;}
.price-list__row:nth-child(even){background-color:var(--color-bg-muted);}
.price-list__name{min-width:0;line-height:1.6;}
.price-list__price{flex:none;font-weight:700;color:var(--color-primary-dark);white-space:nowrap;}

/************************************/
/* Display Utility */
/************************************/

/* 表示切り替え */
.u-show{display:block !important;}
.u-hide{display:none !important;}

/* PC/SP表示切り替え */
.u-sp-only{display:block;}
.u-pc-only{display:none;}
@media (max-width: 1023px) {
.u-sp-only{display:block;}
.u-pc-only{display:none;}
}
@media (min-width: 1024px) {
.u-sp-only{display:none;}
.u-pc-only{display:block;}
}

/* タブレット表示制御 */
.u-tb-only{display:none;}
@media (min-width: 768px) and (max-width: 1023px) {
.u-tb-only{display:block;}
}

/* スクリーンリーダー用（視覚的に非表示） */
.u-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;}

/* スクロール抑止（ドロワー展開時に body へ付与） */
.u-no-scroll{overflow:hidden;}

/* ==========================================
  Front Top Renewal Tokens
  トップページ改修（①〜⑥）で追加したトークン。
  DevTools 実測値に合わせる必要がある固定値は、既存の T シャツサイズ（--space-s 等）と
  混ざらないよう --space-fix-* / --size-* として別建てにしている
========================================== */

:root {
  /* 実測値ベースの固定余白 */
  --space-fix-2: 2px;
  --space-fix-4: 4px;
  --space-fix-8: 8px;
  --space-fix-12: 12px;
  --space-fix-16: 16px;
  --space-fix-20: 20px;
  --space-fix-24: 24px;

  /* パーツの寸法 */
  --size-header-sp: 52px;
  --size-header-icon: 36px;
  --size-header-icon-glyph: 20px;
  --size-sp-nav: 53px;
  --size-sp-nav-icon: 24px;
  --size-menu-btn: 56px;
  --size-menu-btn-sm: 44px;
  --size-hero-slide: 312px;
  --size-hero-inset: 48px;
  --size-cate-card: 68px;
  --size-cate-arrow: 30px;
  --size-more-btn: 48px;
  --size-dot: 6px;

  /* 追加の角丸・文字サイズ・色・重なり順 */
  --radius-xl: 16px;
  --fz-nav: 10px;
  --color-icon: #555555;
  --color-icon-active: #222222;
  --z-sp-nav: 2;
}

/* ==========================================
  Button (追加：塗りボタン)
  既存の .c-btn--primary は「白地＋ピンク文字」のため、
  塗りつぶしのメインボタンとして .c-btn--fill を追加する
========================================== */

.c-btn--fill{background-color:var(--color-primary);border:1px solid var(--color-primary);color:var(--color-text-invert);}
.c-btn--fill:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-invert);opacity:1;}

/* ==========================================
  Modal (追加：画面中央に出す共通モーダル)
  ① アカウントモーダルと ② 検索モーダルで同じ基盤を使い回す。
  既存の .c-modal（下からせり上がるシート型）はそのまま残す
========================================== */

.c-modal--center{align-items:center;padding:var(--space-fix-16);}
.c-modal--center .c-modal__dialog{gap:var(--space-m);max-width:400px;padding:var(--space-fix-24) var(--space-fix-20);border-radius:var(--radius-xl);}
.c-modal__menu{display:flex;flex-direction:column;gap:var(--space-s);}

/* ==========================================
  Menu Button (モーダル・ドロワーの縦積みボタン)
========================================== */

.c-menu-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:var(--size-menu-btn);padding:var(--space-xs) var(--space-s);border:1px solid transparent;border-radius:var(--radius-l);font-size:var(--fz-m);font-weight:700;line-height:1.4;text-align:center;transition:background-color var(--transition),border-color var(--transition),color var(--transition);}
.c-menu-btn i{flex:none;font-size:var(--fz-xl);}
.c-menu-btn--fill{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-invert);}
.c-menu-btn--fill:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-invert);opacity:1;}
.c-menu-btn--outline{background-color:var(--color-bg);border-color:var(--color-primary);color:var(--color-primary);}
.c-menu-btn--outline:hover{background-color:var(--color-primary-light);opacity:1;}
.c-menu-btn--compact{gap:var(--space-2xs);min-height:var(--size-menu-btn-sm);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-m);}
.c-menu-btn--compact i{font-size:var(--fz-l);}

/* ==========================================
  Tabs (検索モーダルの「商品／セラー」切替)
========================================== */

.c-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-fix-4);padding:var(--space-fix-4);background-color:var(--color-bg-sub);border-radius:var(--radius-full);}
.c-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:40px;border-radius:var(--radius-full);color:var(--color-text-sub);font-size:var(--fz-m);font-weight:700;transition:background-color var(--transition),color var(--transition);}
.c-tabs__tab i{font-size:var(--fz-l);}
.c-tabs__tab.is-current{background-color:var(--color-bg);color:var(--color-primary);box-shadow:var(--shadow-s);}

/* ==========================================
  Auth State Utility (ログイン状態の出し分け)
  静的HTMLのデモ用。body の is-guest / is-logged-in で切り替える。
  Blade 再統合時は @guest / @auth に置き換える（HTML側のコメント参照）
========================================== */

.is-guest .u-auth-only{display:none;}
.is-logged-in .u-guest-only{display:none;}

/* ==========================================
  Front Top Renewal Tokens (2nd)
  トップページ第2回改修（A〜G）で追加したトークン。
  第1回と同じく、実測値ベースの固定値は --size-* / --fz-* として別建てにする
========================================== */

:root {
  /* 文字サイズ */
  --fz-2xs: 10px;
  --fz-cta-title: 20px;
  --fz-cta-title-pc: 28px;

  /* パーツの寸法 */
  --size-cta-ribbon: 4px;
  --size-cta-btn: 52px;
  --size-cta-btn-pc: 56px;
  --size-cate-card-sp: 56px;
  --size-cate-card-pc: 136px;

  /* カラー：アクセント濃（サブ配色の塗りボタンのホバー） */
  --color-accent-dark: #111111;
}

/* ==========================================
  Menu Button (追加：サブ配色の塗りボタン)
  「会員登録（買いたい）」をメインカラーの塗りで主役にするため、
  同じ塗りでも役割が下の「会員登録（売りたい）」はチャコールの塗りで差をつける
========================================== */

.c-menu-btn--fill-sub{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-invert);}
.c-menu-btn--fill-sub:hover{background-color:var(--color-accent-dark);border-color:var(--color-accent-dark);color:var(--color-text-invert);opacity:1;}

/* ==========================================
  Front Top Renewal Tokens (3rd)
  トップページ第3回改修（①〜⑤／PC調整中心）で追加したトークン
========================================== */

:root {
  /* ヒーロー：PCのスライド高さ。幅は aspect-ratio 312/175 から比例で決まる（≒535px） */
  --size-hero-h-pc: 300px;

  /* CTA：横長バナー化に伴い、PCのボタンを 56px → 48px に下げる。
     既存の --size-cta-btn-pc は残したまま、新トークンで上書きする */
  --size-cta-btn-banner: 48px;

  /* CTA：PCでボタン群がボックスに対して占める幅 */
  --width-cta-action-pc: 50%;
}

/* ==========================================
  Front Top Renewal Tokens (4th)
  トップページ第4回改修（PCヒーローのナビ幅揃え＋カルーセル）で追加したトークン
========================================== */

:root {
  /* ヒーロー：PCのスライド間 gap（スマホは既存の --space-fix-8 のまま） */
  --size-hero-gap-pc: 14px;

  /* ヒーロー：PCの左右矢印ボタン（44px四方・タップ領域の最小サイズと同値） */
  --size-hero-arrow: 44px;

  /* 画像に重ねる半透明の白（矢印ボタンの地色）。既存の --color-overlay-white より不透明 */
  --color-overlay-white-strong: rgba(255, 255, 255, 0.82);

  /* ヒーロー内での重なり順。ヘッダー(100)・ドロワー(200)・モーダル(250)より下に置く */
  --z-hero-arrow: 1;
}