@charset "utf-8";
/* ==========================================================================
   Nupira Auction - メインスタイルシート (style.css)
   --------------------------------------------------------------------------
   【目次】
   1. ページ全体の共通・土台設定
   2. ヘッダー（ロゴ・検索ボックス・ユーザー情報・ナビメニュー）
   3. 共通レイアウトコンテナ ＆ 基本カードスタイル
   4. 商品詳細：画像ギャラリー（最大8枚切替・梱包状態/荷姿バッジ）
   5. 商品詳細：価格ボックス・オークション詳細・3連アクションボタン
   6. 商品詳細：商品説明 ＆ コメント切替タブ・コメントタイムライン
   7. 商品詳細：出品者プロフィールカード・通報リンク・商品情報テーブル
      7-4. お取引ナビ画面カード（出品者用・落札者用）
   8. プロフィールページ専用スタイル
      8-1. ユーザー基本情報 ＆ 現在進行中のお取引カード
      8-2. お相手からの評価 ＆ システム評価カード
      8-3. 自己紹介 ＆ 登録情報・取引実績カード
      8-4. お取引スコア（年度切替タブ ＆ 月別スコアテーブル）
      8-5. 利用規約違反・ペナルティ履歴カード
   9. ポップアップ（モーダルウィンドウ）＆ 画像拡大ズーム
   10. フッター
   11. スマホ・タブレット用レスポンシブ設定（画面幅 768px 以下）
   ========================================================================== */


/* ==========================================================================
   1. ページ全体の共通・土台設定
   ========================================================================== */
html {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FAF7F3;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

/* フッターをページ最下部に固定するための全体ラッパー */
#page_container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}


/* ==========================================================================
   2. ヘッダー（ロゴ・検索ボックス・ユーザー情報・ナビメニュー）
   ========================================================================== */
#main_header {
  width: 100%;
  max-width: 100%;
  background-color: #D6A99D;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-bottom: 4px solid;
  border-image: repeating-linear-gradient(
    to right,
    #dfc8bd 0, #dfc8bd 6px,
    transparent 6px, transparent 12px,
    #ffffff 12px, #ffffff 18px,
    transparent 18px, transparent 24px
  ) 1;
}

/* ヘッダー内部の横幅・整列コンテナ */
.header_container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 8px 16px;
  box-sizing: border-box;
}

/* 2-1. ロゴエリア（画像ロゴ：パターン1 Nupira） */
#main_header .logo_W {
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header_logo_link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header_logo_link:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.header_logo_img {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
  /* ヘッダー背景(#D6A99D)上でココアブラウンの線とピンクのハートがくっきり映える優しいクリーム色の縁取り効果 */
  filter:
    drop-shadow(0 0 2px rgba(255, 250, 245, 0.95))
    drop-shadow(0 1px 3px rgba(255, 250, 245, 0.8));
}

/* サイト紹介ページ（how_it_works.html 等）のメインロゴ表示（パターン2 Nupira Auction） */
.site_intro_logo_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px auto 16px auto;
}

.site_intro_logo_img {
  height: 112px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}


/* 2-2. 検索ボックスエリア */
#main_header .h_search {
  flex: 0 1 280px;
  min-width: 170px;
  margin: 0 16px;
  margin-right: auto;
}

.search_box_wrapper {
  position: relative;
  width: 100%;
}

.search_input {
  width: 100%;
  padding: 6px 35px 6px 15px;
  font-size: 13px;
  color: #4a3e3d;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dfc8bd;
  border-radius: 20px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.search_input:focus {
  background-color: #ffffff;
  border-color: #b19385;
  outline: none;
  box-shadow: 0 2px 8px rgba(177, 147, 133, 0.2);
}

.search_btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #b19385;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_icon {
  width: 16px;
  height: 16px;
}

.search_suggest_box {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e8d3ca;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  z-index: 100;
  overflow: hidden;
  box-sizing: border-box;
}

/* 2-3. ログインユーザー名・ランク・保有ポイント表示 */
#main_header .login_name {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 12.5px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.22);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

#main_header .login_name:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  color: #FFFFFF;
  text-decoration: none;
}

#main_header .login_name:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.28);
}

#main_header .user_name {
  font-weight: bold;
}

#main_header .user_stars {
  color: #FFEAA7;
}

#main_header .user_pt {
  background: rgba(255, 255, 255, 0.28);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
}

.user_name_wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.official_badge {
  width: 16px;
  height: 16px;
  color: #b19385;
  flex-shrink: 0;
}

/* 2-4. ナビゲーションメニュー（マイページ・お知らせ・やることリスト・ログアウト） */
#main_header .h_menu {
  width: auto;
  text-align: right;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 12px;
}

/* スマホ用ハンバーガーボタン（PCでは非表示） */
.nav_menu_checkbox,
.nav_menu_btn {
  display: none;
}

.nav_menu_links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav_menu_links a,
#main_header .logout_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.2s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 出品するボタン（PCヘッダーで目立つ白背景＆コーラルレッド文字） */
.nav_menu_links a.btn_header_sell {
  background: #FFFFFF !important;
  color: #ba4336 !important;
  font-weight: bold !important;
  padding: 6px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.nav_menu_links a.btn_header_sell:hover {
  background: #FFF5F3 !important;
  color: #ba4336 !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* ログインボタン（未ログイン時） */
.nav_menu_links a.header_login_btn {
  background: #FFFFFF !important;
  color: #ba4336 !important;
  font-weight: bold !important;
  padding: 6px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.nav_menu_links a.header_login_btn:hover {
  background: #FFF5F3 !important;
  color: #ba4336 !important;
  transform: translateY(-1px);
}

/* 現在のページ（active） */
.nav_menu_links a.active_nav {
  background: rgba(255, 255, 255, 0.28);
  font-weight: bold;
}

/* ヘッダー「やること」件数バッジ表示 */
.header_todo_count {
  display: inline-block;
  font-weight: 800;
  color: #FFF275 !important;
  margin-left: 2px;
  font-size: 12.5px;
}

#main_header .logout_btn {
  padding: 6px 12px;
  margin-left: 2px;
  background: rgba(0, 0, 0, 0.1);
}

.nav_menu_links a:hover {
  background-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF !important;
}

.nav_menu_links a:hover::before {
  content: "★ ";
  color: #AEE8F5;
  font-size: 11px;
  display: inline-block;
  margin-right: 2px;
  animation: menuStarRotate 0.3s ease-out forwards;
}

#main_header .logout_btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
  animation: byeByeShake 0.4s ease-in-out;
}

@keyframes menuStarRotate {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes byeByeShake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px) rotate(-2deg); }
  50%  { transform: translateX(3px) rotate(2deg); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}


/* ==========================================================================
   3. 共通レイアウトコンテナ ＆ 基本カードスタイル
   ========================================================================== */

/* 上段2カラムコンテナ（商品詳細のギャラリー＋価格 / プロフィールの基本情報＋進行中取引） */
#top_container {
  max-width: 1260px;
  width: 100%;
  margin: 32px auto;
  display: flex;
  gap: 40px;
  padding: 0 20px;
  align-items: stretch;
  box-sizing: border-box;
}

/* 中段・下段コンテナ（商品説明＋商品情報 / プロフィールの各セクション） */
.middle_container {
  max-width: 1260px;
  width: 100%;
  margin: 32px auto 40px auto;
  padding: 0 20px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  box-sizing: border-box;
}

/* 白背景の共通カード枠 */
.item_detail_card {
  background-color: #ffffff;
  border: 1.5px solid #f1f5f9;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

/* カード内の見出し */
.card_title {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #f8fafc;
  letter-spacing: -0.01em;
}

/* カード内の本文テキスト */
.card_body {
  font-size: 14.5px;
  line-height: 1.85;
  color: #334155;
}

/* 共通情報テーブル（商品情報・取引条件など） */
.info_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.info_table th {
  width: 110px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
  color: #64748b;
  padding: 10px 0;
  border-bottom: 1px dashed #f1f5f9;
  vertical-align: middle;
}

.info_table td {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  padding: 10px 0;
  border-bottom: 1px dashed #f1f5f9;
  vertical-align: middle;
}


/* ==========================================================================
   4. 商品詳細：画像ギャラリー（最大8枚切替・梱包状態/荷姿バッジ）
   ========================================================================== */
#top_photo {
  display: none;
}

#top_photo_gallery {
  width: 580px;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}

/* 画像切り替え用ラジオボタン（非表示） */
.gallery_radio {
  display: none;
}

/* メイン大画像の表示枠 */
.main_image_view {
  width: 100%;
  height: 435px;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1.5px solid #f1f5f9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.gallery_main_label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  cursor: zoom-in;
}

.gallery_main_label img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 選択されたラジオボタンに対応するメイン画像を表示 */
#photo1:checked ~ .main_image_view .img1,
#photo2:checked ~ .main_image_view .img2,
#photo3:checked ~ .main_image_view .img3,
#photo4:checked ~ .main_image_view .img4,
#photo5:checked ~ .main_image_view .img5,
#photo6:checked ~ .main_image_view .img6,
#photo7:checked ~ .main_image_view .img7,
#photo8:checked ~ .main_image_view .img8,
#photo9:checked ~ .main_image_view .img9,
#photo10:checked ~ .main_image_view .img10 {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}

/* メイン画像下部の半透明ステータス帯（入札受付中・受付終了・梱包状態・荷姿） */
.photo_badge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  padding: 12px 0;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.15em;
  pointer-events: none;
  font-family: sans-serif;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.bg_active     { background-color: rgba(194, 123, 114, 0.85); } /* 入札受付中（ローズ） */
.bg_ended      { background-color: rgba(177, 147, 133, 0.85); } /* 受付終了（ブラウン） */
.badge_packing { background-color: rgba(143, 166, 145, 0.85); } /* 梱包状態・荷姿（グリーン） */

/* 下部サムネイル一覧 */
.thumb_image_list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.thumb_label {
  position: relative;
  width: calc(25% - 8px);
  height: 65px;
  border: 2px solid #e8d3ca;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.thumb_label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* 選択中のサムネイル枠の強調 */
#photo1:checked ~ .thumb_image_list .thumb_label:nth-child(1),
#photo2:checked ~ .thumb_image_list .thumb_label:nth-child(2),
#photo3:checked ~ .thumb_image_list .thumb_label:nth-child(3),
#photo4:checked ~ .thumb_image_list .thumb_label:nth-child(4),
#photo5:checked ~ .thumb_image_list .thumb_label:nth-child(5),
#photo6:checked ~ .thumb_image_list .thumb_label:nth-child(6),
#photo7:checked ~ .thumb_image_list .thumb_label:nth-child(7),
#photo8:checked ~ .thumb_image_list .thumb_label:nth-child(8),
#photo9:checked ~ .thumb_image_list .thumb_label:nth-child(9),
#photo10:checked ~ .thumb_image_list .thumb_label:nth-child(10) {
  border-color: #b19385;
  transform: scale(0.95);
  opacity: 0.85;
}

/* 7枚目（梱包状態）・8枚目（荷姿）のサムネイル用グリーンマスク */
.thumb_badge_packing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgba(143, 166, 145, 0.92);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.05em;
  font-family: sans-serif;
  box-sizing: border-box;
  pointer-events: none;
  transition: background-color 0.2s ease;
}

.thumb_image_list .thumb_label:nth-child(7):hover .thumb_badge_packing,
.thumb_image_list .thumb_label:nth-child(8):hover .thumb_badge_packing {
  background-color: rgba(121, 143, 123, 0.98);
}


/* ==========================================================================
   5. 商品詳細：価格ボックス・オークション詳細・3連アクションボタン
   ========================================================================== */
#top_info {
  flex: 1;
  font-family: sans-serif;
  color: #4a3e3d;
}

/* 商品状態タグ（新品・未使用など） */
.status_tag {
  display: inline-block;
  background-color: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

/* 商品タイトル */
.product_title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px 0;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

/* 5-1. 商品ハッシュタグ一覧（タイトル直下） */
.item_hashtags_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px 0;
}

.item_hashtag {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #be123c !important;
  text-decoration: none !important;
  background-color: #fff1f2;
  border: 1px solid #fecdd3;
  padding: 3px 10px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(225, 29, 72, 0.04);
}

.item_hashtag:hover {
  background-color: #ffe4e6;
  border-color: #fda4af;
  color: #9f1239 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.15);
}

/* 商品説明文末尾のハッシュタグボックス */
.desc_hashtags_box {
  margin-top: 24px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fffcfb 0%, #fff7f7 100%);
  border: 1.5px dashed #fecdd3;
  border-radius: 12px;
}

.desc_hash_title {
  font-size: 13px;
  font-weight: 800;
  color: #881337;
  display: block;
  margin-bottom: 10px;
}

.desc_hash_list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.desc_hash_help {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
}

/* 価格表示ボックス（現在価格・即決価格） */
.price_box {
  background: linear-gradient(135deg, #ffffff 0%, #fffbfb 100%);
  border: 1.5px solid #fecdd3;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.04);
}

.price_row {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}

.price_row:last-child {
  margin-bottom: 0;
}

.price_label {
  width: 90px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.price_value {
  font-size: 28px;
  font-weight: 900;
  color: #be123c;
  margin-right: 4px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price_value_prompt {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

.yen {
  font-size: 14px;
  font-weight: 800;
  margin-right: 14px;
  color: #475569;
}

.btn_buynow_inline {
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  color: #fff !important;
  border-radius: 20px;
  padding: 5px 16px;
  font-weight: bold;
  font-size: 12.5px;
  cursor: pointer;
  text-align: center;
  border: none;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  vertical-align: middle;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  user-select: none;
}
.btn_buynow_inline:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
  opacity: 0.95;
}
.btn_buynow_inline:active {
  transform: translateY(0);
}

/* ==========================================================================
   求愛・すき・もっとすき・家出する（ステップアップ・フォローシステム）
   ========================================================================== */
.nupira_follow_group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  font-family: inherit;
}
.btn_follow_main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  user-select: none;
  white-space: nowrap;
}
/* Lv.0: 未フォロー（求愛する） */
.btn_follow_lv0 {
  background: #ffffff;
  color: #e11d48;
  border-color: #fecdd3;
}
.btn_follow_lv0:hover {
  background: #fff1f2;
  border-color: #fda4af;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.15);
}
/* Lv.1: 求愛中（すきになる） */
.btn_follow_lv1 {
  background: #fff1f2;
  color: #db2777;
  border-color: #fbcfe8;
}
.btn_follow_lv1:hover {
  background: #fce7f3;
  transform: translateY(-1px);
}
/* Lv.2: すき（もっとすきになる） */
.btn_follow_lv2 {
  background: #fdf2f8;
  color: #be185d;
  border-color: #f472b6;
}
.btn_follow_lv2:hover {
  background: #fce7f3;
  transform: translateY(-1px);
}
/* Lv.3: もっとすき中!! (MAX) */
.btn_follow_lv3 {
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(236, 72, 153, 0.3);
}
.btn_follow_lv3:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.45);
}

/* ❤両想い❤ (超ド派手キラキラ・覚醒モード) */
.btn_follow_mutual {
  background: linear-gradient(115deg, #ff007f 0%, #ff5252 25%, #ffb300 50%, #ff007f 75%, #a855f7 100%) !important;
  background-size: 250% 250% !important;
  color: #ffffff !important;
  border: 1.5px solid #ffe082 !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.6), 0 0 24px rgba(255, 179, 0, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.4) !important;
  animation: mutualShimmer 2.5s infinite linear, mutualPulse 1.4s infinite ease-in-out !important;
  position: relative;
  overflow: visible;
}
.btn_follow_mutual::before,
.btn_follow_mutual::after {
  content: '✨';
  position: absolute;
  font-size: 11px;
  animation: mutualSparkle 1s infinite alternate ease-in-out;
  pointer-events: none;
}
.btn_follow_mutual::before {
  top: -8px;
  left: -4px;
}
.btn_follow_mutual::after {
  bottom: -6px;
  right: -4px;
  animation-delay: 0.5s;
}
.btn_follow_mutual:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.8), 0 0 35px rgba(255, 179, 0, 0.7), inset 0 0 12px rgba(255, 255, 255, 0.6) !important;
}

@keyframes mutualShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes mutualPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes mutualSparkle {
  0% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.3) rotate(35deg); }
}
/* 家出する（解除モード） */
.btn_follow_leave {
  background: #334155 !important;
  color: #f8fafc !important;
  border-color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
  animation: followShake 0.25s ease-in-out;
}
.btn_follow_leave:hover {
  background: #0f172a !important;
}
.btn_follow_blocked {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: none !important;
  cursor: pointer;
}
.btn_follow_blocked:hover {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #94a3b8 !important;
}

/* 出品中カードの質問コメント目立つバッジ */
.trade_comment_alert_badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35);
  animation: pulseCommentAlert 2s infinite ease-in-out;
  vertical-align: middle;
}
.trade_comment_alert_badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.45);
}

@keyframes pulseCommentAlert {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.6);
  }
}

.btn_item_comment_link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #be123c !important;
  background: #fff1f2;
  border: 1.5px solid #fecdd3;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn_item_comment_link:hover {
  background: #ffe4e6;
  border-color: #f43f5e;
}
@keyframes followShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* 「...」トグルボタン */
.btn_follow_dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.btn_follow_dots:hover {
  background: #f1f5f9;
  color: #334155;
  border-color: #94a3b8;
}
.btn_follow_dots.is-active {
  background: #334155;
  color: #ffffff;
  border-color: #1e293b;
}

.shipping_tag {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  align-self: center;
}

/* 残り時間・入札件数・オプションタグ */
.auction_details {
  font-size: 13.5px;
  margin-bottom: 22px;
  line-height: 1.85;
  color: #334155;
}

.auction_details span {
  color: #64748b;
  font-weight: 600;
}

.option_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.option_tags span {
  font-size: 11px;
  font-weight: 700;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2.5px 10px;
  border-radius: 9999px;
  color: #475569;
}

/* 3連アクションボタン（入札・価格交渉・コメント） */
.bid_area_group {
  display: flex;
  gap: 12px;
  background-color: #fcf9f7;
  padding: 15px;
  border-radius: 8px;
  border: 1px dashed #b19385;
  margin-top: 20px;
}

.action_btn {
  flex: 1;
  text-align: center;
  color: #ffffff;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn_bid             { background-color: #b19385; }
.btn_bid:hover       { background-color: #9c8073; }
.btn_negotiate       { background-color: #dfb26c; }
.btn_negotiate:hover { background-color: #c99f5d; }
.btn_question        { background-color: #8fa691; }
.btn_question:hover  { background-color: #7b917c; }


/* ==========================================================================
   6. 商品詳細：商品説明 ＆ コメント切替タブ・コメントタイムライン
   ========================================================================== */

/* 左側：商品説明カード（上のギャラリー幅580pxと揃える） */
.description_card {
  flex: 0 0 580px;
  width: 580px;
  max-width: 580px;
  box-sizing: border-box;
}

/* タブ切り替え用ラジオボタン（非表示） */
.desc_tab_radio {
  display: none;
}

/* タブ見出しバー */
.desc_tab_headers {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 20px;
  padding-bottom: 0;
}

.desc_tab_btn {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.2s ease;
  margin-bottom: -2px;
  background-color: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-bottom: none;
}

.desc_tab_btn:hover {
  background-color: #ffffff;
  color: #be123c;
}

/* アクティブなタブ見出しの装飾 */
#desc_tab1:checked ~ .desc_tab_headers .btn1,
#desc_tab2:checked ~ .desc_tab_headers .btn2 {
  background-color: #ffffff;
  color: #be123c;
  border-color: #fecdd3;
  border-bottom: 2px solid #ffffff;
  font-weight: 800;
  padding-bottom: 10px;
}

/* タブコンテンツ表示エリア（横幅ブレ防止のレイヤー切替方式） */
.desc_tab_contents {
  position: relative;
  width: 100%;
  display: block;
}

.desc_panel {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
  transform: translateY(4px);
}

#desc_tab1:checked ~ .desc_tab_contents .panel1,
#desc_tab2:checked ~ .desc_tab_contents .panel2 {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* コメント（Q&A）タイムライン */
.comment_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 5px 0;
  width: 100%;
  box-sizing: border-box;
}

.comment_row {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* 通報現場リンク（#comment_123）等で飛んできた時のハイライト演出 */
.comment_row:target {
  background-color: #fff1f2;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 0 0 2px #f43f5e;
  animation: highlightTargetComment 2s ease-out;
}

@keyframes highlightTargetComment {
  0% {
    background-color: #ffe4e6;
    box-shadow: 0 0 0 3px #e11d48;
  }
  100% {
    background-color: #fff1f2;
    box-shadow: 0 0 0 2px #f43f5e;
  }
}

.comment_meta {
  font-size: 11px;
  color: #a89188;
  margin-bottom: 4px;
  font-family: sans-serif;
}

.comment_bubble_wrap {
  display: flex;
  width: 100%;
}

.comment_bubble {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 2px 5px rgba(177, 147, 133, 0.05);
  word-break: break-all;
  font-family: sans-serif;
}

/* 質問者（一般ユーザー）の吹き出し：左寄せ */
.user_msg {
  align-items: flex-start;
}

.user_msg .comment_bubble {
  background-color: #fcf9f7;
  color: #5c4c4b;
  border: 1px solid #e8d3ca;
  border-top-left-radius: 4px;
}

/* 出品者の回答吹き出し：右寄せ */
.seller_msg {
  align-items: flex-end;
}

.seller_msg .comment_meta {
  text-align: right;
}

.seller_msg .comment_bubble_wrap {
  justify-content: flex-end;
}

.seller_msg .comment_bubble {
  background-color: #FFF2F0;
  color: #4a3e3d;
  border: 1px solid #EEDAD6;
  border-top-right-radius: 4px;
}

/* 「出品者」バッジ */
.comment_seller_badge {
  background-color: #C27B72;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 3px;
  vertical-align: middle;
  display: inline-block;
  font-family: sans-serif;
}

/* 自分のコメント削除ボタン（×マーク） */
.comment_delete_trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #94a3b8;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
  padding: 0;
  transition: all 0.15s ease-in-out;
}
.comment_delete_trigger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444;
  transform: scale(1.1);
}

/* 他人のコメント通報ボタン（⚑マーク） */
.comment_report_trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #94a3b8;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
  padding: 0;
  transition: all 0.15s ease-in-out;
}
.comment_report_trigger svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}
.comment_report_trigger:hover {
  background: #fff1f2;
  border-color: #fda4af;
  color: #e11d48;
  transform: scale(1.1);
}

/* 削除済みコメントの吹き出し */
.comment_bubble.comment_bubble_deleted {
  background-color: #f8fafc !important;
  color: #94a3b8 !important;
  border: 1px dashed #cbd5e1 !important;
  font-size: 12px;
  font-style: italic;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* コメント削除確認モーダル */
.comment_modal_overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.comment_modal_overlay.is-active {
  display: flex !important;
}
.comment_modal_card {
  max-width: 400px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: commentModalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
@keyframes commentModalPop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* タイムライン下部の「コメントする」ボタン */
.comment_action_area {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 15px;
  box-sizing: border-box;
}

.comment_submit_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #8FA691;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: bold;
  padding: 10px 32px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(143, 166, 145, 0.2);
  transition: all 0.25s ease;
  user-select: none;
}

.comment_submit_btn:hover {
  background-color: #7B917C;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(143, 166, 145, 0.35);
}

.comment_submit_btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(143, 166, 145, 0.2);
}


/* ==========================================================================
   7. 商品詳細：出品者プロフィールカード・通報リンク・商品情報テーブル
   ========================================================================== */

/* 7-1. 出品者情報エリア（商品説明カード下部） */
.seller_profile_area {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed #e8d3ca;
}

.seller_title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 12px 0;
  position: relative;
  padding-left: 12px;
  letter-spacing: -0.01em;
}

.seller_title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #e11d48, #be123c);
  border-radius: 2px;
}

.seller_flex_link {
  display: flex;
  background-color: #fcf9f7;
  border: 1px solid #e8d3ca;
  border-radius: 8px;
  padding: 15px;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
}

.seller_flex_link:hover {
  background-color: #ffffff;
  border-color: #b19385;
  box-shadow: 0 6px 15px rgba(177, 147, 133, 0.15);
  transform: translateY(-2px);
}

/* ホバー時に舞うキラキラ星エフェクト */
.sparkle_star {
  position: absolute;
  color: #dfb26c;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
}

.seller_flex_link:hover .sparkle_star {
  animation: scatterStar 0.8s ease-out forwards;
}

.star1 { left: 20px; top: 10px; --mx: -25px; }
.star2 { right: 40px; top: 5px; font-size: 12px; --mx: 20px; }
.star3 { left: 75px; top: 20px; font-size: 20px; --mx: -5px; }

.seller_flex_link:hover .star2 { animation-delay: 0.1s; }
.seller_flex_link:hover .star3 { animation-delay: 0.15s; }

@keyframes scatterStar {
  0%   { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(var(--mx, -10px), -35px) scale(1.2) rotate(180deg); opacity: 0; }
}

.seller_avatar img {
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
}

.seller_info_text {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.seller_name_row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.seller_name {
  font-weight: bold;
  color: #4a3e3d;
  font-size: 15px;
}

.verification_tag {
  background-color: #e8d3ca;
  color: #4a3e3d;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}

/* TeamUsagi 公式サポーターバッジ（うさぎアイコン ＋ Supporter） */
.usagi_supporter_badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #fdf3f1 0%, #f6e2dc 100%);
  border: 1px solid #d6a99d;
  color: #7a4b44;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 1px 8px 1px 3px;
  border-radius: 14px;
  text-decoration: none;
  line-height: 1.3;
  box-shadow: 0 1px 3px rgba(214, 169, 157, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.usagi_supporter_badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(214, 169, 157, 0.45);
}

.usagi_badge_img {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  flex-shrink: 0;
}

/* 管理者特別指定の超目立つ特別バッジ（ゴールド＆オブシディアン・パルス＆シャイン発光） */
.special_admin_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(135deg, #09090b 0%, #18181b 45%, #27272a 100%);
  color: #fef08a;
  border: 1.5px solid #f59e0b;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  vertical-align: middle;
  animation: specialBadgePulse 2.8s infinite ease-in-out;
  user-select: none;
  position: relative;
  overflow: hidden;
  line-height: 1.35;
  white-space: nowrap;
}

.special_admin_badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -70%;
  width: 45%;
  height: 200%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(25deg);
  animation: specialBadgeShine 3.8s infinite ease-in-out;
}

@keyframes specialBadgePulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    border-color: #f59e0b;
  }
  50% {
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.8), 0 2px 8px rgba(245, 158, 11, 0.55);
    border-color: #fde047;
  }
}

@keyframes specialBadgeShine {
  0% { left: -70%; }
  22%, 100% { left: 170%; }
}

.special_admin_badge .badge_sparkle {
  font-size: 12.5px;
  filter: drop-shadow(0 0 4px rgba(253, 224, 71, 0.85));
}

/* ⚔️ ヌッピー討伐者専用のクリムゾン＆ゴールドネオンオーラ */
.badge_nupee_slayer {
  background: linear-gradient(135deg, #450a0a 0%, #1c1917 50%, #881337 100%) !important;
  color: #fef08a !important;
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.65), 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  animation: slayerBadgePulse 2.2s infinite ease-in-out !important;
}

@keyframes slayerBadgePulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    border-color: #ef4444;
  }
  50% {
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.95), 0 0 10px #f59e0b, 0 2px 8px rgba(0, 0, 0, 0.6);
    border-color: #fde047;
  }
}

.seller_status_row {
  font-size: 13px;
  color: #6b5a59;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.seller_label  { color: #8a7670; }
.seller_count  { color: #4a3e3d; }
.seller_spacer { margin: 0 10px; color: #dfc8bd; }
.seller_stars  { color: #b19385; letter-spacing: 1px; }

/* 出品者カードのひとこと吹き出し */
.seller_bubble {
  position: absolute;
  bottom: -24px;
  left: 0;
  width: calc(100% + 35px);
  max-width: calc(100% + 35px);
  box-sizing: border-box;
  background-color: #FAF7F3;
  border: 1px solid #EAD8D4;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 11px;
  color: #7a6660;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(177, 147, 133, 0.08);
  display: block;
}

.seller_bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #EAD8D4;
}

.seller_bubble::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 12px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FAF7F3;
}

/* 7-2. 運営チームへの通報リンク */
.report_action_area {
  margin-top: 20px;
  text-align: right;
}

.report_open_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #a89188;
  cursor: pointer;
  transition: color 0.2s ease;
  user-select: none;
}

.report_open_btn:hover {
  color: #c27b72;
  text-decoration: underline;
}

.report_icon {
  width: 14px;
  height: 14px;
}

/* 7-3. 右側：商品情報カード（状態・注意事項・入札制限・取引条件・システム情報） */
.info_card {
  flex: 1 1 auto;
  box-sizing: border-box;
}

.notice_area {
  background: #fdfaf9;
  border: 1.5px solid #ebdcd5;
  padding: 16px 16px 14px;
  border-radius: 12px;
  margin: 20px 0;
}

.notice_title {
  font-size: 13.5px;
  font-weight: 800;
  color: #ba4336;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1.5px dashed #ebdcd5;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notice_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notice_list .notice_item {
  background: #ffffff;
  border: 1px solid #ebdcd5;
  border-radius: 9px;
  padding: 9px 12px;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(186, 67, 54, 0.04);
  transition: all 0.15s ease-in-out;
}

.notice_list .notice_item:hover {
  border-color: #d6a99d;
  box-shadow: 0 2px 6px rgba(186, 67, 54, 0.08);
}

.notice_item_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.notice_item_label {
  font-size: 13.5px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 4px;
}

.notice_item_label strong {
  color: #1e293b;
  font-weight: 700;
}

.notice_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.notice_badge.badge_positive {
  background: #ecfdf5;
  color: #047857;
  border: 1.5px solid #a7f3d0;
}

.notice_badge.badge_negative {
  background: #fef2f2;
  color: #b91c1c;
  border: 1.5px solid #fecaca;
}

.notice_badge.badge_warning {
  background: #fffbeb;
  color: #b45309;
  border: 1.5px solid #fde68a;
}

.notice_badge.badge_neutral {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid #cbd5e1;
}

.sub_text {
  font-size: 11px;
  color: #64748b;
  display: block;
  line-height: 1.45;
  margin-top: 2px;
}

.restriction_area,
.trade_area {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px dashed #e8d3ca;
}

.restriction_title,
.trade_title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 12px 0;
  position: relative;
  padding-left: 12px;
  letter-spacing: -0.01em;
}

.restriction_title::before,
.trade_title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #e11d48, #be123c);
  border-radius: 2px;
}

.restriction_sub {
  font-size: 12px;
  color: #8a7670;
  display: inline-block;
  margin-top: 3px;
}

/* お取引条件（発送・支払い方法）のピルアイテム */
.trade_pill_list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trade_pill_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: #1e293b;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
  width: fit-content;
  max-width: 100%;
}

.trade_pill_item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.trade_pill_check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  font-size: 10.5px;
  font-weight: 900;
  flex-shrink: 0;
  border: 1px solid #a7f3d0;
}

.trade_pay_icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.trade_pill_text {
  font-weight: 700;
  color: #1e293b;
}

.trade_pill_note {
  font-size: 11px;
  color: #64748b;
  font-weight: normal;
  margin-left: 2px;
}

/* システム情報ボックス（商品ID・日時など） */
.system_info {
  margin-top: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
}

.system_info .info_table {
  margin-bottom: 0;
}

.system_info .info_table th {
  font-size: 12.5px;
  color: #64748b;
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
  width: 95px;
}

.system_info .info_table td {
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
  color: #334155;
}

.system_info .info_table tr:last-child th,
.system_info .info_table tr:last-child td {
  border-bottom: none;
  padding-bottom: 2px;
}

.system_id_chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}

.system_price_badge {
  font-weight: 800;
  color: #1e293b;
  font-size: 13.5px;
}

.system_datetime {
  font-variant-numeric: tabular-nums;
  color: #334155;
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   7-4. お取引ナビ画面カード（出品者用・落札者用）
   -------------------------------------------------------------------------- */
.trade_section_wrapper {
  margin-top: 25px;
  margin-bottom: 25px;
}

.trade_nav_card {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding: 28px;
  box-sizing: border-box;
}

/* 出品者用・落札者用のアクセント上枠線 */
.seller_trade_card {
  border-top: 4px solid #C27B72;
}

.buyer_trade_card {
  border-top: 4px solid #8FA691;
}

/* ステップ切り替え用隠しラジオボタン */
.trade_step_radio {
  display: none;
}

/* カード上部ヘッダー（役割バッジ・タイトル・期限カウントダウン） */
.trade_card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e8d3ca;
}

.trade_header_left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.trade_role_badge {
  display: inline-block;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

.trade_role_badge.role_seller { background-color: #C27B72; }
.trade_role_badge.role_buyer  { background-color: #8FA691; }

.trade_main_title {
  font-size: 18px;
  font-weight: bold;
  color: #4a3e3d;
  margin: 0;
}

/* 期限カウントダウンボックス */
.trade_deadline_box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #FFF5F4;
  border: 1px solid #EEDAD6;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  color: #6b5a59;
}

.deadline_time {
  color: #C27B72;
  font-size: 14px;
}

.deadline_date {
  font-size: 11.5px;
  color: #8a7670;
}

/* 4段階ステップ進捗バー */
.trade_stepper_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FAF7F3;
  border: 1px solid #e8d3ca;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.trade_step_item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
  user-select: none;
  color: #8a7670;
  font-size: 13px;
  font-weight: bold;
}

.step_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #dfc8bd;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  transition: all 0.2s ease;
}

.step_connector {
  flex: 1;
  height: 2px;
  background-color: #e8d3ca;
  margin: 0 8px;
}

/* 選択中ステップのハイライト連動（出品者用：ローズ系 / 落札者用：オリーブ系） */
#s_step1:checked ~ .trade_stepper_bar .step_btn_1,
#s_step2:checked ~ .trade_stepper_bar .step_btn_2,
#s_step3:checked ~ .trade_stepper_bar .step_btn_3,
#s_step4:checked ~ .trade_stepper_bar .step_btn_4 {
  background-color: #FFF2F0;
  color: #a65b4c;
  box-shadow: 0 2px 6px rgba(194, 123, 114, 0.12);
}

#s_step1:checked ~ .trade_stepper_bar .step_btn_1 .step_num,
#s_step2:checked ~ .trade_stepper_bar .step_btn_2 .step_num,
#s_step3:checked ~ .trade_stepper_bar .step_btn_3 .step_num,
#s_step4:checked ~ .trade_stepper_bar .step_btn_4 .step_num {
  background-color: #C27B72;
}

#b_step1:checked ~ .trade_stepper_bar .step_btn_1,
#b_step2:checked ~ .trade_stepper_bar .step_btn_2,
#b_step3:checked ~ .trade_stepper_bar .step_btn_3,
#b_step4:checked ~ .trade_stepper_bar .step_btn_4 {
  background-color: #f2f6f3;
  color: #4a574b;
  box-shadow: 0 2px 6px rgba(143, 166, 145, 0.15);
}

#b_step1:checked ~ .trade_stepper_bar .step_btn_1 .step_num,
#b_step2:checked ~ .trade_stepper_bar .step_btn_2 .step_num,
#b_step3:checked ~ .trade_stepper_bar .step_btn_3 .step_num,
#b_step4:checked ~ .trade_stepper_bar .step_btn_4 .step_num {
  background-color: #8FA691;
}

/* 取引開始前（事前確認中）：ステップバー全体を完全グレーアウト＆無効化 */
.trade_stepper_bar.trade_stepper_pre_trade {
  opacity: 0.55 !important;
  filter: grayscale(100%) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.trade_stepper_bar.trade_stepper_pre_trade .trade_step_item {
  background-color: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.trade_stepper_bar.trade_stepper_pre_trade .step_num {
  background-color: #94a3b8 !important;
  color: #ffffff !important;
}

.trade_stepper_bar.trade_stepper_pre_trade .step_connector {
  background-color: #cbd5e1 !important;
}

/* 取引カード内部の左右2カラム構成 */
.trade_body_grid {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.trade_left_column {
  flex: 1 1 55%;
  min-width: 0;
  box-sizing: border-box;
}

.trade_right_column {
  flex: 0 0 400px;
  width: 400px;
  box-sizing: border-box;
}

/* ステップ別パネルの切り替え制御 */
.trade_step_panels {
  position: relative;
  width: 100%;
}

.trade_step_panel {
  display: none;
  animation: tradeFadeIn 0.25s ease-out;
}

@keyframes tradeFadeIn {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

#s_step1:checked ~ .trade_body_grid .s_panel_1,
#s_step2:checked ~ .trade_body_grid .s_panel_2,
#s_step3:checked ~ .trade_body_grid .s_panel_3,
#s_step4:checked ~ .trade_body_grid .s_panel_4,
#b_step1:checked ~ .trade_body_grid .b_panel_1,
#b_step2:checked ~ .trade_body_grid .b_panel_2,
#b_step3:checked ~ .trade_body_grid .b_panel_3,
#b_step4:checked ~ .trade_body_grid .b_panel_4 {
  display: block;
}

/* 現在の状態案内バナー */
.trade_status_banner {
  padding: 16px 18px;
  border-radius: 8px;
  margin-bottom: 18px;
  border-left: 5px solid #b19385;
  background-color: #fcf9f7;
}

.trade_status_banner.banner_action {
  background-color: #FFF5F4;
  border-left-color: #C27B72;
}

.trade_status_banner.banner_waiting {
  background-color: #FAF7F3;
  border-left-color: #dfb26c;
}

.trade_status_banner.banner_success,
.trade_status_banner.banner_complete {
  background-color: #f2f6f3;
  border-left-color: #8FA691;
}

.banner_title {
  font-size: 14.5px;
  font-weight: bold;
  color: #4a3e3d;
  margin-bottom: 6px;
}

.banner_desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b5a59;
  margin: 0;
}

/* ステップ内入力フォームボックス（発送連絡・支払連絡・受取評価） */
.trade_form_box {
  background-color: #FAF7F3;
  border: 1px solid #e8d3ca;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.trade_sub_heading {
  font-size: 14px;
  font-weight: bold;
  color: #4a3e3d;
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px dashed #dfc8bd;
}

.trade_form_row {
  margin-bottom: 14px;
}

.trade_form_label {
  display: block;
  font-size: 12.5px;
  font-weight: bold;
  color: #6b5a59;
  margin-bottom: 6px;
}

.req_mark,
.opt_mark {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.req_mark { background-color: #C27B72; color: #ffffff; }
.opt_mark { background-color: #dfc8bd; color: #4a3e3d; }

.trade_select,
.trade_text_input,
.trade_textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #4a3e3d;
  background-color: #ffffff;
  border: 1px solid #dfc8bd;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: sans-serif;
}

.trade_select:focus,
.trade_text_input:focus,
.trade_textarea:focus {
  border-color: #b19385;
  outline: none;
  box-shadow: 0 2px 6px rgba(177, 147, 133, 0.15);
}

.trade_check_confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: #5c4c4b;
  margin: 12px 0 16px 0;
  cursor: pointer;
  line-height: 1.5;
}

.trade_check_confirm input {
  margin-top: 3px;
  accent-color: #C27B72;
  cursor: pointer;
}

/* 評価選択ボタン（☺ よい / ☹ ざんねん） */
.trade_eval_select_row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.trade_eval_option {
  flex: 1;
  cursor: pointer;
}

.trade_eval_option input {
  display: none;
}

.eval_opt_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 24px;
  background-color: #ffffff;
  border: 2px solid #e8d3ca;
  font-size: 14px;
  font-weight: bold;
  color: #8a7670;
  transition: all 0.2s ease;
}

.trade_eval_option.eval_good input:checked + .eval_opt_inner {
  background-color: #f2f6f3;
  border-color: #8FA691;
  color: #4a574b;
}

.trade_eval_option.eval_bad input:checked + .eval_opt_inner {
  background-color: #fff5f4;
  border-color: #C27B72;
  color: #7c433c;
}

/* メインアクション送信ボタン */
.trade_primary_btn {
  width: 100%;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: bold;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.btn_seller_action       { background-color: #C27B72; }
.btn_seller_action:hover { background-color: #aa6860; transform: translateY(-1px); }
.btn_buyer_action        { background-color: #8FA691; }
.btn_buyer_action:hover  { background-color: #7b917c; transform: translateY(-1px); }

/* 確認チェックボックスが未チェックの時（disabled状態）はボタンを無効化・グレーアウト */
.trade_primary_btn:disabled,
.trade_primary_btn:disabled:hover,
.trade_check_confirm:has(.confirm_unlock_check:not(:checked)) + .trade_primary_btn {
  background-color: #d6cbc6;
  color: #ffffff;
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* お届け先・口座情報・決済まとめボックス */
.trade_info_summary_box {
  background-color: #ffffff;
  border: 1px solid #e8d3ca;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.trade_detail_table {
  margin-bottom: 0;
  font-size: 13px;
}

.trade_detail_table th {
  width: 115px;
  padding: 8px 0;
  border-bottom: 1px dashed #f2dad6;
}

.trade_detail_table td {
  padding: 8px 0;
  border-bottom: 1px dashed #f2dad6;
  line-height: 1.6;
}

.trade_detail_table tr:last-child th,
.trade_detail_table tr:last-child td {
  border-bottom: none;
}

.trade_price_highlight {
  font-size: 16px;
  color: #a65b4c;
}

.trade_paid_badge {
  display: inline-block;
  background-color: #f2f6f3;
  border: 1px solid #8FA691;
  color: #4a574b;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 6px;
}

.bank_account_box {
  background-color: #FAF7F3;
  border: 1px dashed #dfc8bd;
  border-radius: 6px;
  padding: 10px 12px;
}

/* トラブル・期限超過キャンセル・通報フッター */
.trade_trouble_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e8d3ca;
}

.trade_cancel_btn {
  background-color: #fff5f4;
  border: 1px solid #e2b4ae;
  color: #a65b4c;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trade_cancel_btn:hover {
  background-color: #C27B72;
  color: #ffffff;
  border-color: #C27B72;
}

.trade_report_link {
  font-size: 12px;
  color: #8a7670;
  text-decoration: underline;
  cursor: pointer;
}

.trade_report_link:hover {
  color: #c27b72;
}

/* 右カラム：取引相手ミニプロフィール ＆ 取引メッセージ */
.trade_partner_box {
  margin-bottom: 18px;
}

.partner_header_label {
  font-size: 12px;
  font-weight: bold;
  color: #8a7670;
  margin-bottom: 6px;
}

.partner_mini_card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #fcf9f7;
  border: 1px solid #e8d3ca;
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.partner_mini_card:hover {
  background-color: #ffffff;
  border-color: #b19385;
  box-shadow: 0 4px 10px rgba(177, 147, 133, 0.12);
}

.partner_avatar {
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.partner_name_line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.partner_name {
  font-size: 14px;
  font-weight: bold;
  color: #4a3e3d;
}

.partner_eval_line {
  font-size: 12px;
  color: #6b5a59;
}

/* 取引専用メッセージボックス */
.trade_chat_box {
  background-color: #FAF7F3;
  border: 1px solid #e8d3ca;
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
}

.trade_message_scroll {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 14px;
}

.trade_msg_input_area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed #dfc8bd;
  padding-top: 12px;
}

.trade_msg_send_btn {
  align-self: flex-end;
  background-color: #b19385;
  color: #ffffff;
  border: none;
  font-size: 12.5px;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trade_msg_send_btn:hover {
  background-color: #9c8073;
  transform: translateY(-1px);
}

/* 出品者 (2) 決済パターン別プレビュー切り替えバー（銀行振込 / 代引き） */
.pay_pattern_radio {
  display: none;
}

.pay_pattern_switch_bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background-color: #FAF7F3;
  border: 1px dashed #dfc8bd;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

.switch_bar_note {
  font-size: 11.5px;
  font-weight: bold;
  color: #8a7670;
}

.pay_pattern_tab {
  font-size: 12px;
  font-weight: bold;
  color: #7a6660;
  background-color: #ffffff;
  border: 1px solid #e8d3ca;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.pay_pattern_tab:hover {
  border-color: #b19385;
}

.seller_pay_case {
  display: none;
}

#s_pay_escrow:checked ~ .pay_pattern_switch_bar .tab_escrow,
#s_pay_bank:checked ~ .pay_pattern_switch_bar .tab_bank,
#s_pay_cod:checked ~ .pay_pattern_switch_bar .tab_cod {
  background-color: #ba4336;
  color: #ffffff;
  border-color: #ba4336;
}

#s_pay_escrow:checked ~ .case_escrow,
#s_pay_bank:checked ~ .case_bank,
#s_pay_cod:checked ~ .case_cod {
  display: block;
}

/* 出品者：エスクロー代金預かり通知バナー */
.escrow_seller_alert_banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fdf5e6;
  border: 1.5px solid #fed7aa;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #9a3412;
}

.escrow_check_icon {
  width: 28px;
  height: 28px;
  background: #ea580c;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}

/* 落札者 (1) 支払い方法選択カードボタン（おあずけ払い / 銀行振込 / 代引き） */
.buyer_pay_radio {
  display: none;
}

.buyer_pay_selector_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.buyer_pay_card_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
  border: 2px solid #e8d3ca;
  border-radius: 12px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.buyer_pay_card_btn:hover {
  border-color: #ba4336;
}

.pay_card_icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.pay_card_main {
  font-size: 13px;
  font-weight: bold;
  color: #4a3e3d;
  margin-bottom: 2px;
}

.pay_card_sub {
  font-size: 10.5px;
  color: #8a7670;
  line-height: 1.35;
}

#b_method_escrow:checked ~ .buyer_pay_selector_grid .btn_select_escrow {
  background-color: #FFFDF9;
  border-color: #ba4336;
  box-shadow: 0 4px 12px rgba(186, 67, 54, 0.15);
}

#b_method_escrow:checked ~ .buyer_pay_selector_grid .btn_select_escrow .pay_card_main {
  color: #ba4336;
}

#b_method_bank:checked ~ .buyer_pay_selector_grid .btn_select_bank,
#b_method_cod:checked ~ .buyer_pay_selector_grid .btn_select_cod {
  background-color: #f2f6f3;
  border-color: #8FA691;
  box-shadow: 0 3px 8px rgba(143, 166, 145, 0.18);
}

#b_method_bank:checked ~ .buyer_pay_selector_grid .btn_select_bank .pay_card_main,
#b_method_cod:checked ~ .buyer_pay_selector_grid .btn_select_cod .pay_card_main {
  color: #4a574b;
}

.buyer_pay_card_btn.is_locked,
#b_method_escrow:disabled ~ .buyer_pay_selector_grid .btn_select_escrow {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(80%) !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

.buyer_pay_card_btn.is_locked .pay_card_main,
#b_method_escrow:disabled ~ .buyer_pay_selector_grid .btn_select_escrow .pay_card_main {
  color: #94a3b8 !important;
}

.buyer_pay_detail_panel {
  display: none;
}

#b_method_escrow:checked ~ .detail_escrow,
#b_method_bank:checked ~ .detail_bank,
#b_method_cod:checked ~ .detail_cod {
  display: block;
  animation: tradeFadeIn 0.2s ease-out;
}

/* おあずけ払い専用：ポイント計算＆案内ボックス */
.verified_escrow_display {
  background-color: #ffffff;
  border: 1.5px solid #F5DCCB;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.escrow_point_summary_box {
  background: #FAF7F3;
  border: 1px solid #ebdcd5;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.escrow_calc_row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
}

.escrow_calc_row .calc_label {
  color: #5c413b;
  font-weight: bold;
}

.calc_val_bold {
  font-size: 22px;
  font-weight: 800;
  color: #ba4336;
}

.calc_yen {
  font-size: 12px;
  color: #8c7872;
  margin-left: 4px;
}

.escrow_calc_row.sub_balance {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ebdcd5;
  font-size: 12px;
}

.calc_badge_ok {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 10.5px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #c8e6c9;
}

.escrow_security_note {
  font-size: 11.5px;
  color: #6d5854;
  line-height: 1.6;
  margin: 0;
}

/* スマホ最適化 */
@media (max-width: 600px) {
  .buyer_pay_selector_grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* 事務局認証済み口座情報・代引き自動指示ボックス */
.verified_bank_display,
.verified_cod_display {
  background-color: #ffffff;
  border: 1px solid #d5e0d6;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.verified_bank_header,
.verified_box_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #dfc8bd;
}

.bank_header_title {
  font-size: 13.5px;
  font-weight: bold;
  color: #4a3e3d;
}

.admin_verified_shield {
  display: inline-flex;
  align-items: center;
  background-color: #f2f6f3;
  border: 1px solid #8FA691;
  color: #4a574b;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
}

.verified_bank_body {
  background-color: #FAF7F3;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.bank_line {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #4a3e3d;
}

.bank_line:last-child {
  margin-bottom: 0;
}

.bank_security_note,
.crime_prevention_note {
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a7670;
  margin: 0 0 10px 0;
}

.cod_guide_text {
  font-size: 13px;
  line-height: 1.6;
  color: #4a3e3d;
  margin: 0;
}

.verified_mini_tag {
  display: inline-block;
  background-color: #f2f6f3;
  color: #4a574b;
  border: 1px solid #c2d4c4;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 3px;
}

/* お取引完了（Closed）スタンプ＆プレビューボックス */
.trade_closed_preview_box {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #FAF7F3;
  border: 1px dashed #b19385;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}

.closed_stamp_badge {
  display: inline-block;
  background-color: #b19385;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.closed_preview_text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #5c4c4b;
}

/* 出品者（銀行振込時）：入金確認＆出荷の2段階チェックボックス群 */
.seller_notify_header_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #f0e6dd;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.mock_reset_mini_btn {
  background-color: #FAF7F3;
  color: #8c7673;
  border: 1px solid #d8c8b8;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mock_reset_mini_btn:hover {
  background-color: #f0e6dd;
  color: #4a3e3d;
}

.seller_dual_check_group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.dual_check_item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  transition: all 0.2s ease;
}

/* 入金確認チェック前の「出荷しました」ロック状態 */
.dual_check_item.is_locked {
  background-color: #f4f1ee;
  border-color: #e2dcd5;
  color: #a69997;
  cursor: not-allowed;
  opacity: 0.75;
}

.dual_check_item.is_locked input[type="checkbox"] {
  cursor: not-allowed;
}

/* 入金確認を先に通知完了した後の表示状態 */
.dual_check_item.is_notified_done {
  background-color: #f2f6f3;
  border-color: #c2d4c4;
  color: #4a574b;
  cursor: default;
}

.check_lock_hint {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #c97a7e;
  background-color: #fdf2f2;
  border: 1px solid #f2dada;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}

.notified_done_badge {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  background-color: #6b8e78;
  padding: 2px 10px;
  border-radius: 12px;
  margin-left: auto;
}

/* 「出荷しました」チェック時に出現する配送業者・追跡番号の入力エリア */
.ship_detail_fields_wrap {
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 8px;
  padding: 14px 16px 4px;
  margin-bottom: 16px;
}

/* 取引ナビ（メッセージ欄）内の不正決済・別住所禁止警告ボックス（送信ボタン下に配置） */
.trade_fraud_warning_box {
  background-color: #fdf3f3;
  border: 1.5px solid #e2a6a8;
  border-left: 5px solid #c97a7e;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
  margin-bottom: 0;
  color: #4a3e3d;
}

.fraud_warning_title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #b55357;
  margin-bottom: 6px;
}

.warning_icon {
  font-size: 15px;
  line-height: 1;
}

.fraud_warning_lead {
  font-size: 11.5px;
  line-height: 1.55;
  margin: 0 0 8px 0;
  color: #4a3e3d;
}

.fraud_warning_lead strong {
  color: #b55357;
}

.fraud_warning_list {
  margin: 0 0 8px 0;
  padding-left: 18px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #4a3e3d;
}

.fraud_warning_list li {
  margin-bottom: 4px;
}

.fraud_warning_list li strong {
  color: #8c3b3f;
}

.fraud_warning_sub {
  font-size: 11px;
  line-height: 1.45;
  color: #7a5254;
  background-color: #ffffff;
  border: 1px dashed #e2b8ba;
  border-radius: 5px;
  padding: 6px 10px;
}


/* ==========================================================================
   8. プロフィールページ専用スタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   8-1. ユーザー基本情報 ＆ 現在進行中のお取引カード（1段目）
   -------------------------------------------------------------------------- */
.profile_left_block {
  flex: 0 0 540px;
  width: 540px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.profile_right_block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.profile_left_block .item_detail_card,
.profile_right_block .item_detail_card {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.profile_user_card {
  background-color: #ffffff;
  position: relative;
}

.profile_avatar_row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile_name_info {
  flex: 1;
}

/* 最高ランク「Supreme」バッジ */
.rank_badge_supreme_clean {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(247, 243, 240, 0.6);
  border: 1px solid #c9b9b1;
  color: #947f77;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 10.5px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 2px;
  margin-left: 5px;
  line-height: 1;
  user-select: none;
  box-shadow: 0 1px 2px rgba(177, 147, 133, 0.03);
}

/* プロフィール内のひとこと吹き出し */
.profile_intro_bubble {
  margin-top: 18px;
  margin-bottom: auto;
  background-color: #FAF7F3;
  border: 1px solid #EAD8D4;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #7a6660;
  position: relative;
}

.profile_intro_bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 32px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #EAD8D4;
}

.profile_intro_bubble::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 32px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FAF7F3;
}

/* 現在進行中のお取引カード内レイアウト */
.profile_right_block .card_title {
  margin-bottom: 0;
  padding-bottom: 12px;
}

#top_container .profile_trade_table {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

#top_container .profile_trade_table tbody tr {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  padding: 4px 0;
}

#top_container .profile_trade_table th {
  flex: 0 0 70px;
  text-align: left;
  font-size: 14.5px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  border: none;
}

#top_container .profile_trade_table td {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  padding: 0;
  margin: 0;
  border: none;
}

.trade_count_badge {
  background-color: #C27B72;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 14px;
  min-width: 24px;
  text-align: center;
}

.trade_count_badge.badge_buy {
  background-color: #8FA691;
}

.trade_status_text {
  font-size: 13px;
  color: #4a3e3d;
}

/* 発送・支払/受取評価までの平均日数行 */
.profile_avg_days_row {
  border-top: 1px dashed #e8d3ca;
  margin-top: auto;
  padding-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 12.5px;
  color: #7a6660;
  font-family: sans-serif;
  flex-wrap: wrap;
}

.avg_item   { white-space: nowrap; }
.avg_num    { color: #C27B72; font-weight: 900; font-size: 13.5px; margin-left: 2px; }
.avg_spacer { color: #dfc8bd; user-select: none; }


/* --------------------------------------------------------------------------
   8-2. お相手からの評価 ＆ システム評価カード（2段目）
   -------------------------------------------------------------------------- */
.eval_standalone_card {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 24px 30px;
}

.eval_twin_layout_container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.eval_twin_column {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.eval_twin_column.border_left_divider {
  padding-left: 30px;
  border-left: 1px dashed #e8d3ca;
}

.eval_twin_subtitle {
  font-size: 14px;
  font-weight: bold;
  color: #8a7670;
  margin: 0 0 16px 0;
  font-family: sans-serif;
}

/* 左側：よい / ざんねん カプセルバッジ */
.eval_badge_row_wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: auto 0;
  padding-right: 15px;
}

.eval_capsule_badge {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 0;
  border-radius: 24px;
  font-size: 14px;
  font-family: sans-serif;
  box-shadow: 0 2px 5px rgba(177, 147, 133, 0.04);
}

.eval_capsule_badge.good_capsule {
  background-color: #f2f6f3;
  border: 1px solid #8FA691;
}
.eval_capsule_badge.good_capsule .badge_face { color: #8FA691; font-size: 15px; margin-right: 6px; font-weight: bold; }
.eval_capsule_badge.good_capsule .badge_txt  { color: #6b7d6c; font-weight: bold; margin-right: 10px; }
.eval_capsule_badge.good_capsule .badge_num  { color: #4a574b; font-weight: 900; font-size: 18px; }

.eval_capsule_badge.bad_capsule {
  background-color: #fff5f4;
  border: 1px solid #C27B72;
}
.eval_capsule_badge.bad_capsule .badge_face { color: #C27B72; font-size: 15px; margin-right: 6px; font-weight: bold; }
.eval_capsule_badge.bad_capsule .badge_txt  { color: #a6645b; font-weight: bold; margin-right: 10px; }
.eval_capsule_badge.bad_capsule .badge_num  { color: #7c433c; font-weight: 900; font-size: 18px; }

/* 右側：システム評価表示 */
.system_rating_data_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: auto 0;
}

.system_stars_rank_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.system_stars_visual {
  color: #b19385;
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
}

.system_rank_badge_s {
  color: #C27B72;
  font-weight: 900;
  font-size: 20px;
  font-family: sans-serif;
  line-height: 1;
}

.system_status_comment_text {
  font-size: 14px;
  color: #7a6660;
  margin-top: 10px;
  font-weight: bold;
  font-family: sans-serif;
  width: 100%;
}


/* --------------------------------------------------------------------------
   8-3. 自己紹介 ＆ 登録情報・取引実績カード（3段目）
   -------------------------------------------------------------------------- */
#profile_details_container {
  align-items: stretch;
}

.details_left_block {
  flex: 0 0 540px;
  width: 540px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.details_right_block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.details_inner_card {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* 自己紹介テキスト */
.profile_full_bio_text {
  font-size: 14px;
  line-height: 1.7;
  color: #5c4c4b;
  font-family: sans-serif;
}

.profile_full_bio_text p {
  margin: 0 0 14px 0;
}

.profile_full_bio_text p:last-child {
  margin-bottom: 0;
}

/* 登録情報・取引実績テーブル */
#profile_details_container .details_info_table {
  width: 100%;
  margin-top: 8px;
}

#profile_details_container .details_info_table th {
  width: 160px;
  font-size: 13.5px;
  color: #8a7670;
  font-weight: bold;
  vertical-align: top;
  padding: 14px 10px 14px 0;
}

#profile_details_container .details_info_table td {
  font-size: 14px;
  color: #4a3e3d;
  vertical-align: top;
  padding: 14px 0;
}

.details_nest_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details_nest_list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
}

.details_nest_list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: #b19385;
  font-weight: bold;
}

.details_nest_list li:last-child {
  margin-bottom: 0;
}

.list_sub_note {
  font-size: 12px;
  color: #8a7670;
  margin-left: 6px;
}

/* 取引別の実績ボックス（出品・落札） */
.stats_box_group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats_cat_section {
  background-color: #faf7f3;
  border: 1px dashed #e8d3ca;
  border-radius: 8px;
  padding: 12px 16px;
}

.stats_tag {
  display: inline-block;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: bold;
  padding: 3px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.stats_tag.type_sell_tag { background-color: #b19385; }
.stats_tag.type_buy_tag  { background-color: #dfb26c; }

.stats_sub_list {
  list-style: none;
  padding: 0 0 0 4px;
  margin: 0;
  font-size: 13px;
  color: #6e5c58;
}

.stats_sub_list li {
  margin-bottom: 4px;
}

.stats_sub_list li:last-child {
  margin-bottom: 0;
}

.stats_highlight_num {
  font-weight: bold;
  color: #4a3e3d;
}


/* --------------------------------------------------------------------------
   8-4. お取引スコア（年度切替タブ ＆ 月別スコアテーブル）（4段目）
   -------------------------------------------------------------------------- */
.score_card_full {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.score_year_tag {
  font-size: 12px;
  background-color: #e8d3ca;
  color: #4a3e3d;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.score_tab_radio {
  display: none;
}

/* タイトルと年度タブの横並びヘッダー */
.score_header_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e8d3ca;
  padding-bottom: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.score_year_headers {
  display: inline-flex;
  gap: 6px;
  background-color: #FAF7F3;
  padding: 4px;
  border-radius: 20px;
  border: 1px solid #e8d3ca;
}

.score_year_btn {
  font-size: 12px;
  font-weight: bold;
  color: #8a7670;
  padding: 6px 16px;
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.score_year_btn:hover {
  color: #4a3e3d;
  background-color: rgba(255, 255, 255, 0.6);
}

/* 選択中の年度ボタンの装飾 */
#score_tab_2026:checked ~ .score_header_flex .btn_2026,
#score_tab_2027:checked ~ .score_header_flex .btn_2027,
#score_tab_2028:checked ~ .score_header_flex .btn_2028 {
  background-color: #C27B72;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(194, 123, 114, 0.2);
}

/* 年度別パネルのレイヤー切替 */
.score_tab_contents_wrap {
  position: relative;
  width: 100%;
  display: block;
}

.score_tab_contents_wrap .score_panel {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  transform: translateY(4px);
}

#score_tab_2026:checked ~ .score_tab_contents_wrap .panel_2026,
#score_tab_2027:checked ~ .score_tab_contents_wrap .panel_2027,
#score_tab_2028:checked ~ .score_tab_contents_wrap .panel_2028 {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 月別お取引スコアテーブル本体 */
.score_table_responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
}

.score_data_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
  min-width: 860px;
  box-sizing: border-box;
}

.score_data_table th,
.score_data_table td {
  border: 1px solid #e8d3ca;
  padding: 6px 2px;
  vertical-align: middle;
  color: #4a3e3d;
  box-sizing: border-box;
}

.score_data_table thead tr {
  background-color: #fcf9f7;
  height: 38px;
}

.score_data_table thead th {
  font-weight: bold;
  color: #8a7670;
  font-size: 12px;
  height: 38px;
  vertical-align: middle;
}

.th_category { width: 7%; min-width: 58px; }
.th_total    { width: 9%; min-width: 72px; }
.th_judge    { width: 8%; min-width: 68px; }
.th_month    { width: 6.33%; min-width: 55px; }

.score_data_table tbody tr {
  height: 76px;
}

.score_data_table tbody td {
  height: 76px;
  max-height: 76px;
  vertical-align: middle;
  overflow: hidden;
}

.month_cell_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  width: 100%;
}

.cell_empty {
  display: inline-block;
  color: #c9b4ab;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.td_cat_title {
  font-weight: bold;
  color: #ffffff !important;
}
.td_cat_title.type_sell { background-color: #b19385; }
.td_cat_title.type_buy  { background-color: #dfb26c; }

.td_total_val,
.td_judge_val {
  background-color: #fdfcfb;
}

.num_main {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #a65b4c;
}

.num_sub {
  display: block;
  font-size: 11px;
  color: #8a7670;
}

/* 判定ランク大バッジ（年間総合判定欄） */
.judge_rank_badge,
.judge_rank_s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  border-radius: 5px;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  letter-spacing: 0.5px;
}
/* New: シルバー系（新規会員・うさぎのあしあと） */
.judge_rank_badge.rank_new {
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 50%, #94a3b8 100%) !important;
  border: 1px solid #64748b !important;
  color: #1e293b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 1px 3px rgba(100, 116, 139, 0.25) !important;
}
/* S: 高級感のある濃い金色系の上品なゴールド（ロイヤル・サポーター） */
.judge_rank_badge.rank_s, .judge_rank_s {
  background: linear-gradient(135deg, #c59b27 0%, #9a7211 40%, #6e4e04 100%) !important;
  border: 1px solid #543b02 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  box-shadow: 0 2px 4px rgba(110, 78, 4, 0.35) !important;
}
/* A: 親しみやすく輝く王道のゴールド系（ゴールド・サポーター） */
.judge_rank_badge.rank_a {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  border: 1px solid #b45309 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25) !important;
}
/* B: 健全なフォレスト・エメラルドグリーン（標準・安心の取引） */
.judge_rank_badge.rank_b {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border: 1px solid #064e3b !important;
}
/* C: くすんだ黄土色／マスタードブラウン（可もなく不可もなくだが野暮ったい） */
.judge_rank_badge.rank_c {
  background: linear-gradient(135deg, #b45309 0%, #854d0e 100%) !important;
  border: 1px solid #713f12 !important;
}
/* D: 濁った警告ラストオレンジ（遅延傾向・取引を警戒される色） */
.judge_rank_badge.rank_d {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
  border: 1px solid #7c2d12 !important;
}
/* E: ドス黒いダーククリムゾン（重大な不履行・絶対に付きたくない事故ブラックマーク） */
.judge_rank_badge.rank_e {
  background: linear-gradient(135deg, #580c1f 0%, #2b030b 100%) !important;
  border: 1px solid #1a0005 !important;
  color: #fca5a5 !important;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6) !important;
}

/* 月別ミニランクバッジ（各月セル内） - しっかり視認できる鮮やかな小バッジ */
.judge_rank_mini,
.judge_rank_s_mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  font-weight: 900;
  font-size: 11.5px;
  line-height: 1;
  border-radius: 4px;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}
.judge_rank_mini.rank_new {
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 50%, #94a3b8 100%) !important;
  border: 1px solid #64748b !important;
  color: #1e293b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.judge_rank_mini.rank_s, .judge_rank_s_mini {
  background: linear-gradient(135deg, #c59b27 0%, #9a7211 40%, #6e4e04 100%) !important;
  border: 1px solid #543b02 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
}
.judge_rank_mini.rank_a {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  border: 1px solid #b45309 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important;
}
.judge_rank_mini.rank_b {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border: 1px solid #064e3b !important;
}
.judge_rank_mini.rank_c {
  background: linear-gradient(135deg, #b45309 0%, #854d0e 100%) !important;
  border: 1px solid #713f12 !important;
}
.judge_rank_mini.rank_d {
  background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%) !important;
  border: 1px solid #7c2d12 !important;
}
.judge_rank_mini.rank_e {
  background: linear-gradient(135deg, #580c1f 0%, #2b030b 100%) !important;
  border: 1px solid #1a0005 !important;
  color: #fca5a5 !important;
}

.judge_sub {
  display: block;
  font-size: 11px;
  color: #8a7670;
  margin-top: 2px;
}

.judge_rank_none {
  color: #b19385;
  font-size: 13px;
}

/* 星（★）の色をランク記号のテーマカラーに連動 */
.stars_rank_s {
  color: #c59b27 !important;
  text-shadow: 0 1px 1px rgba(180, 140, 50, 0.25) !important;
}
.stars_rank_a {
  color: #f59e0b !important;
  text-shadow: 0 1px 1px rgba(245, 158, 11, 0.2) !important;
}
.stars_rank_b {
  color: #059669 !important;
}
.stars_rank_c {
  color: #b45309 !important;
}
.stars_rank_d {
  color: #c2410c !important;
}
.stars_rank_e {
  color: #7f1d1d !important;
}

/* 称号バッジもランクカラーにほんのり連動 */
.system_rank_title_badge {
  font-size: 11.5px !important;
  font-weight: bold !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
}
.system_rank_title_badge.rank_bg_new {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}
.system_rank_title_badge.rank_bg_s {
  background: #fdfaf2 !important;
  color: #9a7211 !important;
  border-color: #ebd69b !important;
}
.system_rank_title_badge.rank_bg_a {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
.system_rank_title_badge.rank_bg_b {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
.system_rank_title_badge.rank_bg_c {
  background: #fffbeb !important;
  color: #854d0e !important;
  border-color: #fde68a !important;
}
.system_rank_title_badge.rank_bg_d {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border-color: #fed7aa !important;
}
.system_rank_title_badge.rank_bg_e {
  background: #fdf2f2 !important;
  color: #580c1f !important;
  border-color: #fecaca !important;
}

.cell_note {
  display: block;
  font-size: 11px;
  color: #5c4c4b;
  margin-top: 2px;
}

.cell_alert {
  display: block;
  font-size: 11px;
  color: #c27b72;
  font-weight: bold;
}

.num_main_mini {
  font-weight: bold;
  color: #4a3e3d;
}

.score_data_table tbody td:not(.td_cat_title):not(.td_total_val):not(.td_judge_val) {
  color: #b19385;
}


/* --------------------------------------------------------------------------
   8-5. 利用規約違反・ペナルティ履歴カード（5段目）
   -------------------------------------------------------------------------- */
.penalty_card_full {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.penalty_table_responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
}

.penalty_data_table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.penalty_data_table th,
.penalty_data_table td {
  border: 1px solid #e8d3ca;
  padding: 12px 16px;
  vertical-align: middle;
  color: #4a3e3d;
  box-sizing: border-box;
}

.penalty_data_table thead tr {
  background-color: #fcf9f7;
}

.penalty_data_table th {
  font-weight: bold;
  color: #8a7670;
  font-size: 12.5px;
  text-align: left;
}

.penalty_data_table tbody tr:hover {
  background-color: #fffaf9;
}

.penalty_text_left {
  text-align: left;
  width: 100%;
}

.penalty_item_wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.penalty_main_text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a3e3d;
  font-family: sans-serif;
}

.penalty_inline_badge {
  display: inline-block;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  min-width: 50px;
  box-sizing: border-box;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.penalty_inline_badge.badge_danger {
  background-color: #C27B72;
  box-shadow: 0 1px 3px rgba(194, 123, 114, 0.15);
}

.penalty_inline_badge.badge_warning {
  background-color: #b19385;
  box-shadow: 0 1px 3px rgba(177, 147, 133, 0.15);
}


/* ==========================================================================
   9. ポップアップ（モーダルウィンドウ）＆ 画像拡大ズーム
   ========================================================================== */

/* モーダル開閉用チェックボックス（非表示） */
.modal_checkbox {
  display: none;
}

/* モーダル背景オーバーレイ */
.modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal_close_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(74, 62, 61, 0.6);
  cursor: pointer;
}

/* モーダルウィンドウ本体 */
.modal_window {
  position: relative;
  background-color: #ffffff;
  width: 90%;
  max-width: 400px;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
  box-sizing: border-box;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
}

.modal_close_btn {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 22px;
  color: #8a7670;
  cursor: pointer;
  line-height: 1;
}

.modal_title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.title_bid       { color: #a65b4c; }
.title_negotiate { color: #dfb26c; }
.title_question  { color: #7b917c; }
.title_report    { color: #c27b72; }

.modal_product_name {
  font-size: 13px;
  color: #8a7670;
  margin: 0 0 15px 0;
}

.modal_price_info {
  font-size: 14px;
  color: #4a3e3d;
  background-color: #fcf9f7;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.modal_min_bid {
  display: block;
  font-size: 11px;
  color: #8a7670;
  margin-top: 4px;
}

.modal_input_row,
.modal_field_group {
  margin-bottom: 20px;
}

.modal_field_group {
  text-align: left;
}

.field_label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #8a7670;
  margin-bottom: 5px;
}

.modal_input_wrapper {
  position: relative;
  width: 100%;
}

.modal_input {
  width: 100%;
  padding: 12px 40px 12px 15px;
  font-size: 18px;
  font-weight: bold;
  color: #4a3e3d;
  border: 2px solid #e8d3ca;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
}

.modal_input:focus {
  border-color: #b19385;
  outline: none;
}

.modal_unit {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #4a3e3d;
  font-size: 15px;
}

.modal_textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  color: #4a3e3d;
  border: 2px solid #e8d3ca;
  border-radius: 6px;
  box-sizing: border-box;
  resize: none;
  font-family: sans-serif;
}

.modal_textarea:focus {
  border-color: #b19385;
  outline: none;
}

.modal_tip {
  font-size: 11px;
  color: #a65b4c;
  text-align: left;
  margin: -5px 0 15px 0;
}

.modal_submit_button {
  width: 100%;
  color: #ffffff;
  border: none;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 通報モーダル専用スタイル */
.btn_report       { background-color: #c27b72; }
.btn_report:hover { background-color: #aa6860; }

.report_checkbox_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #fcf9f7;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e8d3ca;
}

.report_checkbox_label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5c4c4b;
  cursor: pointer;
}

.report_checkbox_label input {
  cursor: pointer;
  accent-color: #c27b72;
}

.modal_window_report {
  max-width: 440px;
}

/* 「？」ヘルプアイコン＆システム評価ヘルプモーダル */
.title_help_marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background-color: #dfc8bd;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  top: -1px;
  user-select: none;
  font-family: sans-serif;
  transition: all 0.2s ease;
}

.title_help_marker:hover {
  background-color: #b19385;
  transform: scale(1.08);
}

.modal_window_help {
  max-width: 440px;
}

.help_modal_content_body {
  text-align: left;
  font-size: 13.5px;
  line-height: 1.7;
  color: #5c4c4b;
  font-family: sans-serif;
}

.help_modal_content_body p {
  margin: 0 0 14px 0;
}

.help_modal_content_body p:last-child {
  margin-bottom: 0;
}

.help_highlight_text {
  border-top: 1px dashed #e8d3ca;
  padding-top: 12px;
  margin-top: 16px !important;
  color: #7a6660;
  font-weight: bold;
}

/* 画像拡大ズームウィンドウ */
.modal_zoom_window {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
}

.modal_zoom_window img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
  display: block;
}

.zoom_tip {
  color: #ffffff;
  font-size: 12px;
  margin-top: 10px;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.zoom_close_btn {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 32px;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
  user-select: none;
  font-family: sans-serif;
  font-weight: normal;
  z-index: 50;
}

.zoom_close_btn:hover {
  color: #AEE8F5;
  transform: scale(1.15);
}

/* 各種モーダル・画像ズームのチェック連動（表示トリガー） */
#modal_bid_trigger:checked ~ .id_modal_bid,
#modal_buynow_trigger:checked ~ .id_modal_buynow,
#modal_negotiate_trigger:checked ~ .id_modal_negotiate,
#modal_question_trigger:checked ~ .id_modal_question,
#modal_report_trigger:checked ~ .id_modal_report,
#modal_help_trigger:checked ~ .id_modal_help,
#modal_new_thread_trigger:checked ~ .id_modal_new_thread,
#modal_zoom1:checked ~ .id_zoom_modal1,
#modal_zoom2:checked ~ .id_zoom_modal2,
#modal_zoom3:checked ~ .id_zoom_modal3,
#modal_zoom4:checked ~ .id_zoom_modal4,
#modal_zoom5:checked ~ .id_zoom_modal5,
#modal_zoom6:checked ~ .id_zoom_modal6,
#modal_zoom7:checked ~ .id_zoom_modal7,
#modal_zoom8:checked ~ .id_zoom_modal8,
#modal_zoom9:checked ~ .id_zoom_modal9,
#modal_zoom10:checked ~ .id_zoom_modal10 {
  opacity: 1;
  pointer-events: auto;
}

#modal_bid_trigger:checked ~ .id_modal_bid .modal_window,
#modal_buynow_trigger:checked ~ .id_modal_buynow .modal_window,
#modal_negotiate_trigger:checked ~ .id_modal_negotiate .modal_window,
#modal_question_trigger:checked ~ .id_modal_question .modal_window,
#modal_report_trigger:checked ~ .id_modal_report .modal_window,
#modal_help_trigger:checked ~ .id_modal_help .modal_window_help,
#modal_new_thread_trigger:checked ~ .id_modal_new_thread .modal_window,
#modal_zoom1:checked ~ .id_zoom_modal1 .modal_zoom_window,
#modal_zoom2:checked ~ .id_zoom_modal2 .modal_zoom_window,
#modal_zoom3:checked ~ .id_zoom_modal3 .modal_zoom_window,
#modal_zoom4:checked ~ .id_zoom_modal4 .modal_zoom_window,
#modal_zoom5:checked ~ .id_zoom_modal5 .modal_zoom_window,
#modal_zoom6:checked ~ .id_zoom_modal6 .modal_zoom_window,
#modal_zoom7:checked ~ .id_zoom_modal7 .modal_zoom_window,
#modal_zoom8:checked ~ .id_zoom_modal8 .modal_zoom_window,
#modal_zoom9:checked ~ .id_zoom_modal9 .modal_zoom_window,
#modal_zoom10:checked ~ .id_zoom_modal10 .modal_zoom_window {
  transform: translateY(0) scale(1);
}


/* ==========================================================================
   9-5. ガイドライン ＆ 利用規約ページ専用スタイル (guideline_terms.html)
   ========================================================================== */
.guideline_hero_container,
.guideline_main_container {
  display: block;
  margin-bottom: 28px;
}

.guideline_hero_card,
.guideline_content_card,
.terms_content_card {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 32px;
}

.guideline_hero_header {
  text-align: center;
  margin-bottom: 22px;
}

.guideline_badge {
  display: inline-block;
  background-color: #D6A99D;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.guideline_page_title {
  font-size: 24px;
  color: #4a3e3d;
  margin: 0 0 10px 0;
  letter-spacing: 0.03em;
}

.guideline_page_lead {
  font-size: 13.5px;
  line-height: 1.75;
  color: #6b5b59;
  margin: 0 auto;
  max-width: 780px;
}

/* 上部ページ内ジャンプボタン */
.guideline_jump_nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.jump_nav_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #5c4c4b;
  background-color: #FAF7F3;
  border: 1.5px solid #d8c8b8;
  transition: all 0.2s ease;
}

.jump_nav_btn:hover,
.jump_nav_btn.active_jump {
  background-color: #D6A99D;
  border-color: #D6A99D;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(214, 169, 157, 0.35);
}

/* 第1部・第2部のセクション大見出し */
.guideline_section_header {
  border-bottom: 2px solid #e8d3ca;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.terms_header_style {
  border-bottom-color: #d8c8b8;
}

.sec_en_label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #b19385;
  margin-bottom: 4px;
}

.sec_jp_title {
  font-size: 21px;
  color: #4a3e3d;
  margin: 0 0 8px 0;
}

.sec_sub_desc {
  font-size: 13px;
  color: #7a6866;
  margin: 0;
  line-height: 1.6;
}

/* ガイドライン目次ボックス */
.guideline_toc_box {
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 30px;
}

.toc_title {
  font-size: 14px;
  font-weight: bold;
  color: #b19385;
  margin-bottom: 10px;
  border-bottom: 1px dashed #dfc8bd;
  padding-bottom: 6px;
}

.toc_grid_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.toc_grid_list li a {
  font-size: 13px;
  color: #4a3e3d;
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.toc_grid_list li a:hover {
  color: #c97a7e;
  text-decoration: underline;
}

/* 各ガイドラインブロック */
.guideline_block {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px dashed #eadfd5;
}

.gl_heading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  color: #4a3e3d;
  margin: 0 0 14px 0;
}

.gl_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #D6A99D;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  flex-shrink: 0;
}

.gl_body {
  font-size: 13.5px;
  line-height: 1.75;
  color: #4a3e3d;
}

.gl_body p {
  margin: 0 0 12px 0;
}

.gl_point_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.gl_point_card {
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 8px;
  padding: 16px 18px;
}

.point_card_title {
  font-size: 14px;
  font-weight: bold;
  color: #8c584c;
  margin-bottom: 8px;
}

.gl_point_card p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.gl_bullet_list {
  margin: 0;
  padding-left: 20px;
}

.gl_bullet_list li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.gl_Highlight_notice {
  background-color: #fdf8f4;
  border: 1px solid #e6d0c4;
  border-left: 4px solid #b19385;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: #4a3e3d;
}

/* お取引4ステップ解説ボックス */
.gl_step_flow_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.gl_step_box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 8px;
  padding: 14px 18px;
}

.gl_step_badge {
  background-color: #b19385;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.gl_step_content h4 {
  font-size: 14.5px;
  color: #4a3e3d;
  margin: 0 0 6px 0;
}

.gl_step_content p,
.gl_step_content ul {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  color: #5c4c4b;
}

.gl_step_content ul {
  padding-left: 18px;
}

.gl_step_content ul li {
  margin-bottom: 6px;
}

/* ペナルティ公開例ボックス */
.gl_penalty_examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 10px;
}

.penalty_ex_row {
  font-size: 13px;
  line-height: 1.6;
  color: #4a3e3d;
}

/* 第2部：利用規約（条文スタイル） */
.terms_legal_body {
  font-size: 13.5px;
  line-height: 1.75;
  color: #4a3e3d;
}

.terms_article {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0e6dd;
}

.terms_art_title {
  font-size: 15.5px;
  color: #4a3e3d;
  background-color: #FAF7F3;
  border-left: 4px solid #b19385;
  padding: 6px 12px;
  margin: 0 0 12px 0;
  border-radius: 0 4px 4px 0;
}

.terms_lead_p {
  margin: 0 0 10px 0;
  font-size: 13.5px;
}

.terms_num_list {
  margin: 0;
  padding-left: 22px;
}

.terms_num_list > li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.terms_num_list ul {
  margin: 6px 0;
  padding-left: 18px;
  list-style: disc;
}

.terms_enact_date {
  margin-top: 20px;
  text-align: right;
  font-size: 12.5px;
  color: #7a6866;
  line-height: 1.6;
}

.guideline_back_top_wrap {
  text-align: center;
  margin-top: 28px;
}

.guideline_back_top_btn {
  display: inline-block;
  padding: 8px 20px;
  background-color: #FAF7F3;
  border: 1px solid #d8c8b8;
  border-radius: 20px;
  color: #6b5b59;
  font-size: 12.5px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease;
}

.guideline_back_top_btn:hover {
  background-color: #f0e6dd;
  color: #4a3e3d;
}

/* --------------------------------------------------------------------------
   9-6. 販売禁止品目リストページ専用スタイル (prohibited_items.html)
   -------------------------------------------------------------------------- */
.badge_prohibited_top {
  background-color: #c97a7e;
}

.prohibited_alert_banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: #fdf3f3;
  border: 1.5px solid #e2a6a8;
  border-left: 5px solid #c97a7e;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 22px;
  text-align: left;
}

.prohibited_alert_icon {
  font-size: 22px;
  line-height: 1.2;
  flex-shrink: 0;
}

.prohibited_alert_text {
  font-size: 13px;
  line-height: 1.65;
  color: #4a3e3d;
}

.prohibited_alert_text strong {
  color: #b55357;
}

/* カテゴリへのアンカーチップ群 */
.prohibited_cat_nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.prohibited_nav_chip {
  display: inline-block;
  padding: 8px 16px;
  background-color: #FAF7F3;
  border: 1px solid #dfc8bd;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: bold;
  color: #5c4c4b;
  text-decoration: none;
  transition: all 0.2s ease;
}

.prohibited_nav_chip:hover {
  background-color: #D6A99D;
  border-color: #D6A99D;
  color: #ffffff;
  transform: translateY(-1px);
}

/* 各禁止カテゴリブロック */
.prohibited_section_block {
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1.5px dashed #eadfd5;
}

.prohibited_cat_header {
  background-color: #FAF7F3;
  border-left: 5px solid #D6A99D;
  border-radius: 0 8px 8px 0;
  padding: 12px 18px;
  margin-bottom: 12px;
}

.prohibited_cat_num {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #b19385;
  margin-bottom: 2px;
}

.prohibited_cat_title {
  font-size: 17.5px;
  color: #4a3e3d;
  margin: 0;
}

.prohibited_cat_lead {
  font-size: 13px;
  line-height: 1.65;
  color: #6b5b59;
  margin: 0 0 16px 0;
  padding: 0 4px;
}

/* 個別禁止項目カードリスト */
.prohibited_item_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prohibited_item_card {
  background-color: #ffffff;
  border: 1px solid #eadfd5;
  border-radius: 8px;
  padding: 14px 18px;
  transition: border-color 0.2s ease;
}

.prohibited_item_card:hover {
  border-color: #D6A99D;
}

.prohibited_item_head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.prohibited_item_head h4 {
  font-size: 14.5px;
  color: #4a3e3d;
  margin: 0;
}

.prohibited_tag {
  display: inline-block;
  background-color: #b19385;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.prohibited_tag.tag_critical {
  background-color: #c97a7e;
}

.prohibited_tag.tag_add {
  background-color: #7d9684;
}

.prohibited_item_card p {
  font-size: 13px;
  line-height: 1.7;
  color: #5c4c4b;
  margin: 0;
}

.prohibited_item_card p strong {
  color: #b55357;
}

.prohibited_bottom_links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0e6dd;
}

/* --------------------------------------------------------------------------
   9-7. ヌピラのしくみページ専用スタイル (how_it_works.html)
   -------------------------------------------------------------------------- */
/* 最上部：設立者の想い・コミュニティ理念カード */
.founder_message_card {
  width: 100%;
  box-sizing: border-box;
  padding: 32px 36px;
  background: linear-gradient(180deg, #fffcfb 0%, #ffffff 100%);
  border: 2px solid #e6d0c4;
}

.founder_header {
  text-align: center;
  margin-bottom: 18px;
}

.founder_en_badge {
  display: inline-block;
  background-color: #b19385;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.founder_main_title {
  font-size: 22px;
  color: #4a3e3d;
  margin: 0;
  line-height: 1.45;
}

.founder_lead_quote {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.75;
  color: #8c584c;
  background-color: #FAF7F3;
  border-top: 1px dashed #dfc8bd;
  border-bottom: 1px dashed #dfc8bd;
  padding: 14px 20px;
  margin: 0 auto 22px auto;
  border-radius: 6px;
}

.founder_body_text {
  font-size: 13.5px;
  line-height: 1.85;
  color: #4a3e3d;
}

.founder_body_text p {
  margin: 0 0 14px 0;
}

.founder_pillar_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}

.founder_pillar_box {
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-top: 3px solid #D6A99D;
  border-radius: 8px;
  padding: 16px 18px;
}

.founder_pillar_box h4 {
  font-size: 14.5px;
  color: #7a5248;
  margin: 0 0 8px 0;
}

.founder_pillar_box p {
  font-size: 13px;
  line-height: 1.7;
  color: #5c4c4b;
  margin: 0;
}

.founder_gentle_request_box {
  background-color: #fdf6f4;
  border: 1.5px solid #e8cfc8;
  border-left: 5px solid #D6A99D;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 18px;
}

.gentle_req_title {
  font-size: 14.5px;
  font-weight: bold;
  color: #8c584c;
  margin-bottom: 8px;
}

.founder_gentle_request_box p {
  font-size: 13px;
  line-height: 1.75;
  color: #4a3e3d;
  margin: 0;
}

/* 上部3連特徴カード */
.hiw_feature_trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.hiw_trio_card {
  background-color: #FAF7F3;
  border: 1.5px solid #eadfd5;
  border-radius: 12px;
  padding: 20px 18px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.hiw_trio_card:hover {
  border-color: #D6A99D;
  transform: translateY(-2px);
}

.hiw_trio_icon {
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.hiw_trio_badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
  background-color: #b19385;
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.hiw_trio_title {
  font-size: 16px;
  color: #4a3e3d;
  margin: 0 0 8px 0;
}

.hiw_trio_desc {
  font-size: 12.5px;
  line-height: 1.65;
  color: #5c4c4b;
  margin: 0;
  text-align: left;
}

/* 4ステップの広告＆ポイント循環エコシステム図解 */
.hiw_ecosystem_flow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
}

.hiw_eco_step {
  flex: 1;
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-top: 4px solid #D6A99D;
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.eco_step_num {
  display: inline-block;
  align-self: center;
  font-size: 11px;
  font-weight: 800;
  color: #b19385;
  background-color: #ffffff;
  border: 1px solid #dfc8bd;
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.eco_step_icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.eco_step_title {
  font-size: 14.5px;
  color: #4a3e3d;
  margin: 0 0 8px 0;
}

.eco_step_text {
  font-size: 12.5px;
  line-height: 1.6;
  color: #5c4c4b;
  margin: 0;
  text-align: left;
}

.eco_step_text strong {
  color: #b55357;
}

.hiw_eco_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #D6A99D;
  flex-shrink: 0;
}

/* 大手サイトとの比較テーブル */
.hiw_compare_table_wrap {
  width: 100%;
  overflow-x: auto;
}

.hiw_compare_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  border: 1px solid #e6d5ca;
  border-radius: 8px;
  overflow: hidden;
}

.hiw_compare_table th,
.hiw_compare_table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0e6dd;
  vertical-align: middle;
  line-height: 1.6;
}

.hiw_compare_table thead th {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.th_comp_item {
  width: 22%;
  background-color: #f4ece6;
  color: #5c4c4b;
}

.th_comp_nupira {
  width: 42%;
  background-color: #D6A99D;
  color: #ffffff;
}

.th_comp_other {
  width: 36%;
  background-color: #e8e2dd;
  color: #6b5b59;
}

.hiw_compare_table tbody th {
  background-color: #FAF7F3;
  color: #4a3e3d;
  text-align: left;
  font-weight: bold;
  border-right: 1px solid #f0e6dd;
}

.td_comp_nupira {
  background-color: #fffbfa;
  color: #4a3e3d;
  border-right: 1px solid #f0e6dd;
}

.td_comp_other {
  background-color: #fafafa;
  color: #6b5b59;
}

.comp_zero_highlight {
  display: inline-block;
  font-size: 16px;
  color: #c95b60;
  background-color: #fdf2f2;
  border: 1px solid #f2dada;
  padding: 2px 10px;
  border-radius: 4px;
}

.comp_sub {
  font-size: 11.5px;
  color: #8a7670;
}

/* --------------------------------------------------------------------------
   9-8. TeamUsagi（公式サポーター制度）ページ専用スタイル (TeamUsagi.html)
   -------------------------------------------------------------------------- */
.usagi_emblem_showcase {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.usagi_full_emblem_img {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(177, 147, 133, 0.25);
  border: 3px solid #ffffff;
}

.usagi_badge_preview_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background-color: #ffffff;
  border: 1px dashed #d6a99d;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 12px;
}

.preview_label_txt {
  font-size: 11.5px;
  font-weight: bold;
  color: #8a7670;
}

.usagi_ribbon_badge {
  display: inline-block;
  background-color: #D6A99D;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.usagi_sub_catch {
  font-size: 14px;
  color: #8c6a61;
  font-weight: bold;
  margin: 8px 0 0 0;
}

/* 4つの活動・特典グリッド */
.usagi_benefit_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.usagi_benefit_card {
  background-color: #FAF7F3;
  border: 1.5px solid #eadfd5;
  border-radius: 10px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}

.usagi_benefit_card.highlight_reward_card {
  background-color: #fff8f6;
  border-color: #D6A99D;
  box-shadow: 0 3px 10px rgba(214, 169, 157, 0.15);
}

.usagi_card_head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.usagi_icon_circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background-color: #ffffff;
  border: 1.5px solid #e6d0c4;
  border-radius: 50%;
  font-size: 22px;
  flex-shrink: 0;
}

.usagi_step_label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #b19385;
  margin-bottom: 2px;
}

.usagi_card_head h4 {
  font-size: 15px;
  color: #4a3e3d;
  margin: 0;
  line-height: 1.4;
}

.usagi_benefit_card p {
  font-size: 13px;
  line-height: 1.7;
  color: #5c4c4b;
  margin: 0;
}

.usagi_benefit_card p strong {
  color: #8c584c;
}

/* 参加条件・フリーライダー排除ルールリスト */
.usagi_rule_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.usagi_rule_item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 8px;
  padding: 16px 20px;
}

.usagi_rule_num {
  background-color: #b19385;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.usagi_rule_content h4 {
  font-size: 15px;
  color: #4a3e3d;
  margin: 0 0 6px 0;
}

.usagi_rule_content p {
  font-size: 13px;
  line-height: 1.7;
  color: #5c4c4b;
  margin: 0;
}

.usagi_rule_content p strong {
  color: #b55357;
}

/* 下部エントリーCTAボックス */
.usagi_apply_cta_box {
  background: linear-gradient(180deg, #fff8f6 0%, #FAF7F3 100%);
  border: 2px solid #D6A99D;
  border-radius: 12px;
  padding: 26px 28px;
  margin-top: 28px;
  text-align: center;
}

.usagi_cta_title {
  font-size: 18px;
  font-weight: bold;
  color: #4a3e3d;
  margin-bottom: 10px;
}

.usagi_cta_desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: #5c4c4b;
  max-width: 720px;
  margin: 0 auto 18px auto;
}

.usagi_cta_buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.usagi_apply_btn {
  max-width: 380px;
  background-color: #D6A99D;
  font-size: 15px;
  padding: 14px 28px;
}

.usagi_apply_btn:hover {
  background-color: #c49285;
}

.usagi_cta_sub {
  font-size: 11.5px;
  color: #8a7670;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9-9. TeamUsagi 専用ディスカッションボード（レス付き掲示板）スタイル (discussion.html)
   -------------------------------------------------------------------------- */
.disc_top_container {
  display: block;
  margin-bottom: 20px;
}

.disc_header_card {
  width: 100%;
  box-sizing: border-box;
  padding: 24px 28px;
  background: linear-gradient(180deg, #fffcfb 0%, #ffffff 100%);
  border: 2px solid #e6d0c4;
}

.disc_header_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed #e6d5ca;
  margin-bottom: 16px;
}

.disc_title_group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.disc_emblem_icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #D6A99D;
  box-shadow: 0 3px 10px rgba(214, 169, 157, 0.25);
  flex-shrink: 0;
}

.disc_badge_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.disc_secret_tag {
  display: inline-block;
  background-color: #b19385;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 12px;
}

.disc_member_count {
  font-size: 12px;
  font-weight: bold;
  color: #8c6a61;
}

.disc_main_heading {
  font-size: 21px;
  color: #4a3e3d;
  margin: 0 0 6px 0;
}

.disc_sub_lead {
  font-size: 13px;
  line-height: 1.6;
  color: #6b5b59;
  margin: 0;
}

.disc_sub_lead strong {
  color: #b55357;
}

.disc_new_thread_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #D6A99D;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(214, 169, 157, 0.35);
  transition: all 0.2s ease;
}

.disc_new_thread_btn:hover {
  background-color: #c49285;
  transform: translateY(-1px);
}

/* カテゴリ絞り込み＆検索バー */
.disc_Control_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.disc_cat_tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.disc_cat_pill {
  background-color: #FAF7F3;
  border: 1px solid #dfd0c5;
  color: #5c4c4b;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.disc_cat_pill:hover,
.disc_cat_pill.active_pill {
  background-color: #D6A99D;
  border-color: #D6A99D;
  color: #ffffff;
}

.disc_board_search {
  width: 220px;
}

.disc_search_input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  border: 1px solid #d8c8b8;
  border-radius: 18px;
  font-size: 12.5px;
  background-color: #FAF7F3;
  color: #4a3e3d;
}

/* 2カラム本体レイアウト（左：トピック一覧 320px / 右：スレッド本文＆レス 1fr） */
.disc_body_grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 20px;
  align-items: start;
}

.disc_sidebar_col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.disc_thread_list_card,
.disc_rule_mini_card {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
}

.disc_side_title {
  font-size: 15px;
  color: #4a3e3d;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8d3ca;
}

.disc_thread_nav_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.disc_thread_nav_item {
  display: block;
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: #4a3e3d;
  transition: all 0.2s ease;
}

.disc_thread_nav_item:hover {
  border-color: #D6A99D;
  background-color: #fffbfa;
}

.disc_thread_nav_item.is_selected {
  background-color: #fff6f4;
  border: 1.5px solid #D6A99D;
  border-left: 5px solid #D6A99D;
}

.t_nav_top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.t_pin_badge {
  background-color: #c97a7e;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

.t_cat_tag {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: 4px;
  color: #ffffff;
  background-color: #b19385;
}

.t_cat_tag.tag_dev  { background-color: #8c6a61; }
.t_cat_tag.tag_idea { background-color: #7d9684; }
.t_cat_tag.tag_rule { background-color: #c27b72; }
.t_cat_tag.tag_talk { background-color: #b19385; }

.t_reply_cnt {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: bold;
  color: #8a7670;
}

.t_nav_title {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.45;
  color: #4a3e3d;
  margin-bottom: 6px;
}

.t_nav_meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #8a7670;
}

.disc_mini_rules {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.65;
  color: #5c4c4b;
}

.disc_mini_rules li {
  margin-bottom: 6px;
}

/* 右カラム：スレッド詳細＆レス一覧カード */
.disc_thread_detail_card {
  width: 100%;
  box-sizing: border-box;
  padding: 24px 26px;
}

.disc_thread_header {
  border-bottom: 2px solid #e8d3ca;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.disc_thread_badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.disc_thread_id {
  margin-left: auto;
  font-size: 12px;
  color: #9c8984;
  font-weight: bold;
}

.disc_thread_main_title {
  font-size: 19px;
  line-height: 1.45;
  color: #4a3e3d;
  margin: 0;
}

/* 各レス（投稿）ボックス */
.disc_posts_container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 26px;
}

.disc_post_item {
  background-color: #FAF7F3;
  border: 1px solid #eadfd5;
  border-radius: 10px;
  padding: 16px 18px;
}

/* 設立者・開発者のレス強調枠 */
.disc_post_item.post_op_founder {
  background-color: #fff9f7;
  border: 1.5px solid #e6cbc3;
}

.disc_post_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #e6d8ce;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.disc_post_user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post_res_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e8d3ca;
  color: #4a3e3d;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.disc_user_avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #d6a99d;
}

.disc_user_name_line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.disc_username {
  font-size: 14.5px;
  font-weight: bold;
  color: #4a3e3d;
}

/* 名前の後ろに付く「.Usagi」の特別カラー装飾 */
.usagi_suffix {
  color: #c4767a;
  font-weight: 900;
}

.disc_role_tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
}

.disc_role_tag.role_founder {
  background-color: #D6A99D;
  color: #ffffff;
}

.disc_post_time {
  font-size: 11px;
  color: #8a7670;
}

.disc_quote_reply_btn {
  background-color: #ffffff;
  border: 1px solid #d8c8b8;
  color: #6b5b59;
  font-size: 11.5px;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.disc_quote_reply_btn:hover {
  background-color: #D6A99D;
  border-color: #D6A99D;
  color: #ffffff;
}

.disc_post_body {
  font-size: 13.5px;
  line-height: 1.75;
  color: #4a3e3d;
}

.disc_post_body p {
  margin: 0 0 10px 0;
}

.disc_post_highlight_box {
  background-color: #ffffff;
  border-left: 4px solid #D6A99D;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.7;
}

.disc_anchor_quote {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.anchor_link {
  display: inline-block;
  background-color: #f2e4de;
  color: #7a4b44;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 12px;
  text-decoration: none;
}

.anchor_link:hover {
  background-color: #e6cfc6;
}

.disc_post_footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.disc_like_btn {
  background-color: #ffffff;
  border: 1px solid #e2cfc7;
  color: #7a6660;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.disc_like_btn.is_liked,
.disc_like_btn:hover {
  background-color: #fdf0ee;
  border-color: #d6a99d;
  color: #b55357;
}

/* スレッド下部のレス書き込みフォーム */
.disc_reply_form_box {
  background-color: #FAF7F3;
  border: 1.5px solid #dfc8bd;
  border-radius: 10px;
  padding: 18px 20px;
}

.disc_reply_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.reply_form_title {
  font-size: 14.5px;
  font-weight: bold;
  color: #4a3e3d;
}

.reply_as_badge {
  font-size: 12px;
  background-color: #ffffff;
  border: 1px solid #e2d2c8;
  padding: 3px 10px;
  border-radius: 14px;
  color: #5c4c4b;
}

.reply_target_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f2e4de;
  color: #7a4b44;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.reply_target_clear {
  background: none;
  border: none;
  color: #8c4b44;
  font-size: 11.5px;
  font-weight: bold;
  cursor: pointer;
}

.disc_textarea {
  margin-bottom: 12px;
}

.disc_reply_submit_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.disc_reply_note {
  font-size: 11.5px;
  color: #8a7670;
}

.disc_submit_btn {
  width: auto;
  min-width: 200px;
  padding: 11px 24px;
  margin: 0;
}

/* 新規トピック作成モーダル調整 */
.modal_window_thread {
  width: 520px;
  max-width: 92vw;
}

.disc_modal_author_note {
  font-size: 12.5px;
  color: #5c4c4b;
  background-color: #FAF7F3;
  border: 1px dashed #d8c8b8;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
}


/* ==========================================================================
   9-10. ヘルプ＆トラブル解決ページ (trouble_help.html)
   ========================================================================== */
#trade_trouble,
#sec_payment,
#sec_point,
#sec_account,
#sec_contact {
  scroll-margin-top: 30px;
}

/* ヘルプ検索バー */
.help_search_bar_wrap {
  margin: 18px 0 20px 0;
  width: 100%;
}

.help_search_input_box {
  position: relative;
  display: flex;
  align-items: center;
}

.help_search_icon {
  position: absolute;
  left: 16px;
  font-size: 16px;
  pointer-events: none;
  opacity: 0.7;
}

.help_search_input {
  width: 100%;
  padding: 12px 18px 12px 44px;
  font-size: 14px;
  color: #4a3e3d;
  background-color: #FFFFFF;
  border: 2px solid #e8d3ca;
  border-radius: 30px;
  box-sizing: border-box;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(177, 147, 133, 0.1);
}

.help_search_input:focus {
  border-color: #D6A99D;
  outline: none;
  box-shadow: 0 4px 14px rgba(214, 169, 157, 0.25);
  background-color: #FFFDFB;
}

/* クイックナビゲーション（ピル型リンク） */
.help_quick_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.help_nav_pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: bold;
  color: #5d4d43 !important;
  text-decoration: none !important;
  background-color: #FFFFFF;
  border: 1px solid #e2cbbf;
  border-radius: 20px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.help_nav_pill:hover {
  background-color: #FAF2EC;
  border-color: #D6A99D;
  color: #ba4336 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(214, 169, 157, 0.25);
}

.help_nav_pill.priority_pill {
  background-color: #FFF3F0;
  border-color: #f0b5aa;
  color: #ba4336 !important;
}

.help_nav_pill.priority_pill:hover {
  background-color: #ffe6e0;
}

.help_nav_pill.contact_pill {
  background-color: #f5f0eb;
}

/* トラブル特化カード（赤い強調アクセント） */
.trouble_focus_card {
  border-left: 5px solid #d9534f;
}

.trouble_tag_header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.trouble_anchor_badge {
  font-size: 11px;
  background-color: #ba4336;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: bold;
}

/* 緊急アラート枠 */
.help_critical_alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background-color: #FFF2F0;
  border: 1px solid #f2c0b8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: left;
}

.crit_alert_icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}

.crit_alert_content h4 {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: #ba4336;
  font-weight: bold;
}

.crit_alert_content p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5c4c4b;
}

/* Q&A アコーディオン */
.faq_list_group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.faq_item {
  border: 1px solid #ecd8cf;
  border-radius: 8px;
  background-color: #FFFFFF;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq_item[open] {
  border-color: #D6A99D;
  box-shadow: 0 3px 10px rgba(177, 147, 133, 0.12);
}

.faq_question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: bold;
  color: #4a3e3d;
  cursor: pointer;
  background-color: #FAF7F3;
  list-style: none;
  user-select: none;
  position: relative;
  transition: background-color 0.2s ease;
}

.faq_question::-webkit-details-marker {
  display: none;
}

.faq_question:hover {
  background-color: #F5EFEB;
}

.faq_q_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: #ba4336;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.faq_q_text {
  flex: 1;
  line-height: 1.45;
}

.faq_toggle_icon {
  width: 10px;
  height: 10px;
  border-right: 2px solid #a38c82;
  border-bottom: 2px solid #a38c82;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-right: 4px;
}

.faq_item[open] .faq_toggle_icon {
  transform: rotate(-135deg);
  border-color: #ba4336;
}

.faq_answer {
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4a3e3d;
  border-top: 1px dashed #ebdcd4;
  background-color: #FFFFFF;
}

.faq_step_box {
  background-color: #FCFAF8;
  border: 1px solid #f0e2da;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.faq_step_box:last-child {
  margin-bottom: 0;
}

.faq_step_box h5 {
  margin: 4px 0 6px 0;
  font-size: 13.5px;
  color: #5c4c4b;
  font-weight: bold;
}

.faq_step_box p {
  margin: 0;
  font-size: 12.5px;
}

.step_badge {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  background-color: #b19385;
  color: #FFFFFF;
  padding: 1px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.step_badge.alert_badge {
  background-color: #d9534f;
}

.faq_notice_sub {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #FFF9F4;
  border-left: 3px solid #D6A99D;
  font-size: 12px;
  color: #6d5b54;
}

.faq_bullet_list,
.faq_num_list {
  margin: 6px 0 0 0;
  padding-left: 20px;
  font-size: 12.5px;
}

.faq_bullet_list li,
.faq_num_list li {
  margin-bottom: 4px;
}

/* お問い合わせフォーム（条件付き開閉） */
.contact_gate_card {
  border-top: 4px solid #b19385;
}

.contact_trigger_box {
  margin-top: 20px;
  text-align: left;
}

.contact_toggle_checkbox {
  display: none;
}

.contact_trigger_label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: #FAF4EF;
  border: 2px dashed #d8c3b7;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #5c4c4b;
  transition: all 0.25s ease;
  user-select: none;
}

.contact_trigger_label:hover {
  background-color: #F5EAE2;
  border-color: #ba4336;
  color: #ba4336;
}

.contact_chk_box {
  width: 22px;
  height: 22px;
  border: 2px solid #b19385;
  background-color: #FFFFFF;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.contact_toggle_checkbox:checked + .contact_trigger_label .contact_chk_box {
  background-color: #ba4336;
  border-color: #ba4336;
}

.contact_toggle_checkbox:checked + .contact_trigger_label .contact_chk_box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.contact_toggle_checkbox:checked + .contact_trigger_label {
  background-color: #FFF0ED;
  border-style: solid;
  border-color: #ba4336;
  color: #ba4336;
}

/* フォーム開閉ロジック（CSS） */
.contact_form_collapsible {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.3s ease;
  margin-top: 0;
}

.contact_toggle_checkbox:checked ~ .contact_form_collapsible {
  max-height: 1600px;
  opacity: 1;
  margin-top: 24px;
}

.contact_form_inner {
  background-color: #FAF7F3;
  border: 1px solid #ebdcd4;
  border-radius: 8px;
  padding: 24px 28px;
}

.contact_form_intro {
  margin-bottom: 20px;
  padding: 10px 14px;
  background-color: #FFFFFF;
  border-left: 3px solid #b19385;
  font-size: 12.5px;
  color: #6a5852;
}

.contact_form_intro p {
  margin: 0;
  line-height: 1.6;
}

.help_inquiry_form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inquiry_form_row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inquiry_form_row_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.inquiry_form_col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inquiry_label {
  font-size: 13px;
  font-weight: bold;
  color: #4a3e3d;
  display: flex;
  align-items: center;
  gap: 8px;
}

.req_tag {
  background-color: #ba4336;
  color: #FFFFFF;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
}

.opt_tag {
  background-color: #a38c82;
  color: #FFFFFF;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
}

.inquiry_select,
.inquiry_input,
.inquiry_textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #4a3e3d;
  background-color: #FFFFFF;
  border: 1px solid #dfc8bd;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inquiry_select:focus,
.inquiry_input:focus,
.inquiry_textarea:focus {
  border-color: #D6A99D;
  outline: none;
  box-shadow: 0 0 0 3px rgba(214, 169, 157, 0.2);
}

.inquiry_file_input {
  font-size: 12.5px;
  color: #5c4c4b;
}

.inquiry_file_help {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: #8c7872;
}

.inquiry_submit_wrap {
  margin-top: 10px;
  text-align: center;
}

.inquiry_submit_btn {
  background: linear-gradient(135deg, #ba4336 0%, #a03529 100%);
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: bold;
  border: none;
  border-radius: 30px;
  padding: 12px 36px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(186, 67, 54, 0.25);
}

.inquiry_submit_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(186, 67, 54, 0.35);
  background: linear-gradient(135deg, #c7493b 0%, #aa3b2e 100%);
}


/* ==========================================================================
   9-11. 出品カテゴリ一覧ページ (category.html)
   ========================================================================== */
#cat_digital,
#cat_living,
#cat_fashion,
#cat_hobby,
#cat_kids,
#cat_cafe,
#cat_craft,
#cat_tools {
  scroll-margin-top: 30px;
}

.category_tree_wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cat_card_item {
  text-align: left;
  border-top: 4px solid #D6A99D;
  transition: box-shadow 0.2s ease;
}

.cat_card_item:hover {
  box-shadow: 0 4px 16px rgba(177, 147, 133, 0.15);
}

.cat_card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px dashed #ebdcd4;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.cat_title_flex {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat_icon {
  font-size: 32px;
  line-height: 1;
}

.cat_header_text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat_en_label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ba4336;
}

.cat_jp_title {
  font-size: 19px;
  font-weight: bold;
  color: #4a3e3d;
  margin: 0;
}

/* 連動スポンサー情報バッジ */
.cat_sponsor_tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #FAF4EF;
  border: 1px solid #e8d3ca;
  padding: 4px 12px;
  border-radius: 20px;
}

.cat_sponsor_tag .sp_label {
  font-size: 10.5px;
  font-weight: bold;
  background-color: #b19385;
  color: #FFFFFF;
  padding: 1px 6px;
  border-radius: 4px;
}

.cat_sponsor_tag .sp_name {
  font-size: 11.5px;
  color: #5c4c4b;
  font-weight: bold;
}

.cat_lead_desc {
  font-size: 13.5px;
  color: #5c4c4b;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* 安全出品ルール枠 */
.cat_safety_notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: #FFF8F6;
  border: 1px solid #f5cfc6;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: #7a3e35;
  line-height: 1.5;
}

.cat_safety_notice .safety_icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* 中カテゴリ・小カテゴリグリッド */
.cat_branches_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.cat_branch_box {
  background-color: #FCFAF8;
  border: 1px solid #f0e4dc;
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.cat_branch_box:hover {
  background-color: #FFFFFF;
  border-color: #D6A99D;
  box-shadow: 0 2px 8px rgba(177, 147, 133, 0.1);
}

.branch_title {
  font-size: 13.5px;
  font-weight: bold;
  color: #5c4c4b;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #ebdcd4;
  display: flex;
  align-items: center;
}

.branch_title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 12px;
  background-color: #D6A99D;
  border-radius: 2px;
  margin-right: 8px;
}

.branch_leaf_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.branch_leaf_list li a {
  display: inline-block;
  font-size: 12.5px;
  color: #6b5850 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease;
  position: relative;
  padding-left: 12px;
}

.branch_leaf_list li a::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -1px;
  color: #b19385;
  font-weight: bold;
  font-size: 14px;
}

.branch_leaf_list li a:hover {
  color: #ba4336 !important;
  transform: translateX(3px);
}


/* ==========================================================================
   9-12. 出品商品一覧・検索結果ページ (list.html)
   ========================================================================== */

/* トレンドタグバー */
.list_tag_bar_container {
  width: 100%;
  background-color: #FAF4EF;
  border-bottom: 1px solid #ebdcd4;
  padding: 10px 0;
  margin-top: -20px;
  margin-bottom: 24px;
}

.list_tag_bar_inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.list_tag_label {
  font-size: 12px;
  font-weight: bold;
  color: #8c584c;
  white-space: nowrap;
}

.list_tag_chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.list_tag_chips::-webkit-scrollbar {
  height: 4px;
}

.list_tag_chips::-webkit-scrollbar-thumb {
  background-color: #dfc8bd;
  border-radius: 4px;
}

.tag_chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: bold;
  color: #5c4c4b !important;
  text-decoration: none !important;
  background-color: #FFFFFF;
  border: 1px solid #dfc8bd;
  padding: 4px 12px;
  border-radius: 16px;
  transition: all 0.2s ease;
}

.tag_chip:hover,
.tag_chip.active {
  background-color: #D6A99D;
  border-color: #D6A99D;
  color: #FFFFFF !important;
}

/* メイン2カラムコンテナ（最大横幅1400px制限・横5個表示に最適化） */
.list_main_container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto 50px auto;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  box-sizing: border-box;
}

/* 左サイドバー：絞り込みフィルター */
.list_filter_sidebar {
  width: 260px;
  flex-shrink: 0;
}

/* PC表示ではスマホ用開閉ボタンを非表示 */
.mobile_filter_checkbox,
.mobile_filter_btn {
  display: none;
}

.filter_card {
  background-color: #FFFFFF;
  border: 1.5px solid #ebdcd5;
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 6px 20px rgba(186, 67, 54, 0.06);
  text-align: left;
}

.filter_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px dashed #ebdcd5;
  padding-bottom: 10px;
  margin-bottom: 15px;
  gap: 6px;
}

.filter_title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap !important;
  flex-shrink: 1;
}

.filter_reset_btn {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  font-size: 10.5px;
  font-weight: 800;
  color: #e11d48;
  cursor: pointer;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 9999px;
  transition: all 0.15s ease;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.filter_reset_btn:hover {
  background-color: #ffe4e6;
  border-color: #fda4af;
  transform: scale(1.03);
}

.filter_section {
  margin-bottom: 16px;
}

.filter_label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 7px;
  white-space: nowrap !important;
}

.filter_select,
.filter_input {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  background-color: #FFFFFF;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.filter_select:focus,
.filter_input:focus {
  border-color: #fda4af;
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

/* ピル型グリッド（販売形式・販売状況） */
.filter_pill_grid {
  display: grid;
  gap: 5px;
  width: 100%;
}

.filter_pill_grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

.filter_pill_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 3px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
  white-space: nowrap !important;
  text-align: center;
}

.filter_pill_btn input[type="radio"] {
  display: none;
}

.filter_pill_btn:hover {
  border-color: #fda4af;
  background: #fff1f2;
  color: #e11d48;
  transform: translateY(-1px);
}

.filter_pill_btn.is_active,
.filter_pill_btn:has(input:checked) {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
  border-color: #be123c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
}

/* 価格帯インプット ＆ クイックチップ */
.price_range_inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price_input {
  width: calc(50% - 10px);
}

.range_tilde {
  font-size: 13px;
  color: #8c7872;
}

.quick_price_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.quick_price_btn {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick_price_btn:hover {
  background: #e11d48;
  border-color: #e11d48;
  color: #ffffff;
  transform: translateY(-1px);
}

/* カード型チェックボックス（送料無料・安心フィルター） */
.filter_card_checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  box-sizing: border-box;
}

.filter_card_checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #e11d48;
  cursor: pointer;
}

.filter_card_checkbox:hover {
  border-color: #fda4af;
  background: #fff8f8;
}

.filter_card_checkbox.is_checked,
.filter_card_checkbox:has(input:checked) {
  border-color: #f43f5e;
  background: #fff1f2;
  color: #9f1239;
  font-weight: 700;
}

/* Nupira 安心フィルター枠 */
.highlight_section {
  background: linear-gradient(135deg, #fff7ed 0%, #fff1f2 100%);
  border: 1.5px dashed #f43f5e;
  border-radius: 12px;
  padding: 12px 14px;
}

.highlight_label {
  color: #be123c;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.filter_submit_btn {
  width: 100%;
  background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  border-radius: 9999px;
  padding: 12px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.28);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.filter_submit_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.38);
}

/* 右メインエリア */
.list_content_area {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.list_control_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.result_main_title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
}

.result_count_text {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  margin-left: 10px;
}

.result_count_text strong {
  color: #be123c;
  background-color: #ffe4e6;
  border: 1px solid #fecdd3;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 800;
  margin-left: 4px;
  display: inline-block;
}

.sort_selector_box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort_label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.sort_select {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background-color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s;
}

.sort_select:focus,
.sort_select:hover {
  border-color: #fda4af;
  outline: none;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.08);
}

/* 適用中フィルターチップ */
.active_filter_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.active_chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #5c4c4b;
  background-color: #FAF4EF;
  border: 1px solid #e0cbc1;
  padding: 3px 8px;
  border-radius: 12px;
}

.chip_close {
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  color: #8c7872;
}

.chip_close:hover {
  color: #ba4336;
}

/* 商品カードグリッド（PC時は最大横5個レイアウト） */
.product_card_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

@media (max-width: 1240px) {
  .product_card_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .product_card_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product_card {
  background-color: #FFFFFF;
  border: 1.5px solid #f1f5f9;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.product_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(225, 29, 72, 0.09), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  border-color: #fecdd3;
}

.product_card_link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
}

.card_img_wrap {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 正方形アスペクト比 1:1 */
  overflow: hidden;
  background-color: #FAF7F3;
}

.product_thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product_card:hover .product_thumbnail {
  transform: scale(1.05);
}

/* 価格バッジ（メルカリ風だけどNupiraらしい優しい角丸ピル型） */
.card_price_badge {
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 900;
  padding: 4px 12px 4px 10px;
  border-top-right-radius: 12px;
  letter-spacing: -0.01em;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 梱包状態・荷姿バッジ */
.card_packing_badge {
  position: absolute;
  right: 6px;
  top: 6px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(5, 150, 105, 0.25);
}

/* 残り時間バッジ */
.card_time_badge {
  position: absolute;
  left: 6px;
  top: 6px;
  background-color: rgba(255, 255, 255, 0.92);
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* 終了・落札済み商品カードの装飾（メルカリ風画像暗転・リボン） */
.product_card.is_ended_card .card_img_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  pointer-events: none;
  z-index: 1;
  transition: background 0.2s ease;
}

.product_card.is_ended_card:hover .card_img_wrap::after {
  background: rgba(15, 23, 42, 0.18);
}

.product_card.is_ended_card .product_thumbnail {
  filter: brightness(0.72) contrast(0.92);
  transition: all 0.2s ease;
}

.product_card.is_ended_card:hover .product_thumbnail {
  filter: brightness(0.85) contrast(0.96);
}

.card_ended_ribbon {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 900;
  padding: 4px 12px 5px 10px;
  border-bottom-right-radius: 12px;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.05em;
}

.card_time_badge.is_ended_badge {
  background-color: rgba(30, 41, 59, 0.92) !important;
  color: #ffffff !important;
  border-color: rgba(51, 65, 85, 0.9) !important;
  z-index: 2;
}

.product_card.is_ended_card .card_price_badge.is_ended_price {
  background: rgba(15, 23, 42, 0.88);
  z-index: 2;
}

.product_card.is_ended_card .card_item_title {
  color: #64748b;
}

.product_card.is_ended_card:hover .card_item_title {
  color: #0f172a;
}

.card_info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.card_item_title {
  margin: 0 0 8px 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #1e293b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 39px;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.product_card:hover .card_item_title {
  color: #be185d;
}

.card_meta_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 5px;
  font-size: 11px;
  margin-bottom: 8px;
}

.card_bid_count,
.card_shipping_free,
.card_shipping_buyer,
.card_negotiable_tag {
  white-space: nowrap !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
}

.card_bid_count {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
}

.card_bid_count.hot_bid {
  color: #dc2626;
  background-color: #fef2f2;
  border-color: #fca5a5;
  font-weight: 800;
}

.card_bid_count.closed_badge {
  color: #be123c;
  background-color: #fff1f2;
  border-color: #fecdd3;
  font-weight: 800;
}

.card_shipping_free {
  font-size: 10.5px;
  font-weight: 800;
  color: #059669;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 6px;
  border-radius: 4px;
}

.card_shipping_buyer {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
}

.card_negotiable_tag {
  font-size: 10px;
  font-weight: 800;
  color: #1d4ed8;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 2px 5px;
  border-radius: 4px;
}

.card_seller_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed #f1f5f9;
  font-size: 11.5px;
}

.card_seller_info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card_seller_avatar {
  border-radius: 50%;
  object-fit: cover;
}

.card_seller_name {
  color: #334155;
  font-weight: 700;
  font-size: 11.5px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usagi_mini_badge {
  font-size: 11px;
}

.card_like_count,
.card_like_btn {
  font-size: 11px;
  font-weight: 800;
  color: #e11d48;
  background-color: #fff1f2;
  border: 1px solid #ffe4e6;
  padding: 1.5px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
  position: relative;
}

.card_like_btn:hover {
  background-color: #ffe4e6;
  border-color: #f43f5e;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.15);
}

.card_like_btn:active {
  transform: scale(0.92);
}

.card_like_btn.is_liked {
  background: linear-gradient(135deg, #fff1f2 0%, #fecdd3 100%);
  border-color: #f43f5e;
  color: #be123c;
  box-shadow: 0 1px 4px rgba(225, 29, 72, 0.18);
}

.card_like_btn .like_heart {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card_like_btn.bounce_anim .like_heart {
  animation: heartBounce 0.35s ease forwards;
}

@keyframes heartBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* 商品詳細用のいいねボタン */
.btn_detail_like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #ffffff;
  border: 1.5px solid #fecdd3;
  color: #e11d48;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 9999px;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08);
  user-select: none;
}

.btn_detail_like:hover {
  background: #fff1f2;
  border-color: #f43f5e;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.16);
}

.btn_detail_like:active {
  transform: scale(0.96);
}

.btn_detail_like.is_liked {
  background: linear-gradient(135deg, #fff1f2 0%, #fecdd3 100%);
  border-color: #f43f5e;
  color: #be123c;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.2);
}

.btn_detail_like.bounce_anim .like_heart {
  animation: heartBounce 0.35s ease forwards;
}

/* 広告連動スポンサーPRカード */
.ad_sponsor_card {
  background: linear-gradient(145deg, #FFF9F6 0%, #FFF2EC 100%);
  border: 1.5px dashed #e8c4ba;
  display: flex;
}

.ad_card_inner {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.ad_pr_badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: bold;
  background-color: #b19385;
  color: #FFFFFF;
  padding: 1px 6px;
  border-radius: 3px;
}

.ad_visual_area {
  margin: 12px 0;
}

.ad_logo_icon {
  font-size: 28px;
  display: block;
  margin-bottom: 4px;
}

.ad_visual_area h4 {
  margin: 0 0 4px 0;
  font-size: 13.5px;
  color: #ba4336;
  font-weight: bold;
}

.ad_visual_area p {
  margin: 0;
  font-size: 11px;
  color: #6a5852;
}

.ad_pt_tag {
  display: block;
  font-size: 11px;
  font-weight: bold;
  color: #ba4336;
  margin-bottom: 6px;
}

.ad_view_btn {
  background-color: #ba4336;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: bold;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ad_view_btn:hover {
  background-color: #a03529;
  transform: translateY(-1px);
}

/* ページネーション */
.list_pagination_wrap {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.pagination_list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}

.page_item a,
.page_item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: bold;
  color: #5c4c4b;
  text-decoration: none;
  background-color: #FFFFFF;
  border: 1px solid #ebdcd4;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.page_item a:hover {
  background-color: #FAF4EF;
  border-color: #D6A99D;
  color: #ba4336;
}

.page_item.active a {
  background-color: #ba4336;
  border-color: #ba4336;
  color: #FFFFFF;
}

.page_item.disabled span {
  color: #c9b8af;
  background-color: #FAF7F3;
  cursor: not-allowed;
}


/* ==========================================================================
   10. フッター
   ========================================================================== */



#main_footer {
  width: 100%;
  background-color: #DCC5B2;
  padding: 40px 0;
  color: #FFFFFF;
  margin-top: auto;
  border-top: 4px solid;
  border-image: repeating-linear-gradient(
    to right,
    #b19385 0, #b19385 6px,
    transparent 6px, transparent 12px,
    #ffffff 12px, #ffffff 18px,
    transparent 18px, transparent 24px
  ) 1;
}

#main_footer .footer_container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0 16px;
}

#main_footer .footer_logo_area {
  width: 300px;
}

.footer_logo_link {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer_logo_link:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.footer_logo_img {
  height: 76px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 0 2px rgba(255, 250, 245, 0.9))
    drop-shadow(0 1px 3px rgba(255, 250, 245, 0.7));
}

#main_footer .footer_sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 8px;
  letter-spacing: 0.05em;
}

#main_footer .footer_links {
  width: 550px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

#main_footer .footer_links a {
  color: #5d4d43 !important;
  text-decoration: none !important;
  font-size: 13px;
  display: inline-block;
  transition: all 0.2s ease-out;
  position: relative;
  padding-left: 14px;
}

#main_footer .footer_links a::before {
  content: "•";
  color: #AEE8F5;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: -2px;
}

#main_footer .footer_links a:hover {
  transform: translateX(4px);
  color: #AEE8F5 !important;
}


/* ==========================================================================
   11. スマホ・タブレット用レスポンシブ設定（画面幅 768px 以下）
   ========================================================================== */
@media (max-width: 768px) {

  /* --- 11-1. スマホ用ヘッダー ＆ ハンバーガーメニュー --- */
  .header_container {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 8px 12px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
  }

  #main_header .logo_W {
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .header_logo_img {
    height: 38px;
  }

  .site_intro_logo_img {
    height: 76px;
  }

  #main_header .h_menu {
    width: auto;
    margin-left: 0;
    display: flex;
    align-items: center;
    position: static;
  }

  /* 三本線ハンバーガーボタン */
  #main_header .nav_menu_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 38px;
    height: 38px;
    cursor: pointer;
    z-index: 11;
  }

  .nav_menu_btn span,
  .nav_menu_btn span::before,
  .nav_menu_btn span::after {
    content: "";
    display: block;
    height: 3px;
    width: 24px;
    background-color: #FFFFFF;
    border-radius: 3px;
    position: absolute;
    transition: all 0.3s;
  }

  .nav_menu_btn span::before { bottom: 7px; }
  .nav_menu_btn span::after  { top: 7px; }

  #nav_menu_toggle:checked ~ .nav_menu_btn span         { background-color: transparent; }
  #nav_menu_toggle:checked ~ .nav_menu_btn span::before { bottom: 0; transform: rotate(45deg); }
  #nav_menu_toggle:checked ~ .nav_menu_btn span::after  { top: 0; transform: rotate(-45deg); }

  /* 2段目：ログイン名・ステータスバー（折り返し可能にしスマホ画面幅に綺麗に収める） */
  #main_header .login_name {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    gap: 4px 8px;
    margin: 6px 0 4px 0;
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    order: 2;
    box-sizing: border-box;
    font-size: 11.5px;
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
  }

  #main_header .user_stars,
  #main_header .user_pt {
    margin-right: 0;
  }

  /* 3段目：検索ボックス */
  #main_header .h_search {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 4px 0 0 0;
    order: 3;
    box-sizing: border-box;
  }

  .search_input {
    padding: 8px 36px 8px 12px;
    font-size: 13.5px;
  }

  /* ハンバーガーメニュー展開時のドロップダウンリスト */
  #main_header .nav_menu_links,
  .nav_menu_links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 48px;
    left: auto;
    right: 12px;
    width: 180px;
    max-width: calc(100vw - 24px);
    height: auto;
    background-color: #D6A99D;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    border-radius: 12px;
    padding: 4px 0;
    text-align: left;
    z-index: 999999;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  #nav_menu_toggle:checked ~ .nav_menu_links {
    display: flex;
  }

  .nav_menu_links a,
  #main_header .nav_menu_links a,
  #main_header .logout_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 10px 16px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-left: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  .nav_menu_links a.btn_header_sell {
    color: #FFF275 !important;
    font-weight: bold !important;
  }

  .nav_menu_links a.btn_header_sell::before {
    content: "＋ " !important;
    color: #FFF275 !important;
    animation: none !important;
  }

  .nav_menu_links a.header_login_btn {
    color: #FFF275 !important;
    font-weight: bold !important;
  }

  .nav_menu_links a.active_nav {
    background: rgba(255, 255, 255, 0.2) !important;
    font-weight: bold !important;
  }

  .nav_menu_links a:last-child,
  #main_header .logout_btn:last-child {
    border-bottom: none !important;
  }

  /* --- 11-2. スマホ用：共通コンテナ・商品詳細エリア --- */
  #top_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 15px;
    margin: 20px auto 0 auto;
    box-sizing: border-box;
  }

  #top_photo {
    width: 100%;
    flex: 0 0 auto;
  }

  #top_photo img {
    width: 100%;
    height: auto;
  }

  #top_photo_gallery {
    width: 100%;
  }

  .main_image_view {
    height: 260px;
  }

  .thumb_image_list {
    gap: 6px;
  }

  .thumb_image_list .thumb_label {
    width: calc(25% - 5px);
    height: 50px;
  }

  #top_info {
    margin-top: 0;
    width: 100%;
  }

  .bid_area_group {
    flex-direction: column;
    gap: 10px;
  }

  .action_btn {
    width: 100%;
  }

  .middle_container {
    flex-direction: column;
    gap: 20px;
    padding: 0 15px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .description_card,
  .info_card {
    width: 100%;
    max-width: 100%;
    min-width: auto;
    flex: 0 0 auto;
  }

  .item_detail_card {
    padding: 15px;
  }

  .seller_status_row {
    margin-bottom: 22px;
  }

  .seller_bubble {
    padding: 5px 12px;
    bottom: -22px;
    font-size: 10px;
    width: 100%;
    max-width: 100%;
  }

  /* スマホ用：出品者フォローボタン ＆ 「...」ボタンのタッチ領域最適化 */
  .btn_follow_dots {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .btn_follow_main {
    padding: 7px 16px;
    font-size: 12.5px;
  }
  .follow_dropdown_menu {
    min-width: 180px;
    max-width: 90vw;
  }

  .zoom_close_btn {
    top: 10px;
    right: 15px;
    font-size: 28px;
    background-color: rgba(0, 0, 0, 0.4);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
  }

  /* スマホ用：お取引ナビ画面カード（出品者用・落札者用） */
  .trade_nav_card {
    padding: 18px 15px;
  }

  .trade_card_header {
    flex-direction: column;
    align-items: flex-start;
  }

  .trade_deadline_box {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  .trade_stepper_bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .step_connector {
    display: none;
  }

  .trade_step_item {
    flex: 1 1 calc(50% - 8px);
    font-size: 12px;
    padding: 6px 8px;
    box-sizing: border-box;
  }

  .trade_body_grid {
    flex-direction: column;
    gap: 20px;
  }

  .trade_left_column,
  .trade_right_column {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .trade_detail_table th,
  .trade_detail_table td {
    display: block;
    width: 100%;
  }

  .trade_detail_table th {
    border-bottom: none;
    padding-bottom: 2px;
  }

  .trade_paid_badge {
    display: inline-block;
    margin-left: 0;
    margin-top: 4px;
  }

  .buyer_pay_selector_grid {
    flex-direction: column;
    gap: 10px;
  }

  .trade_closed_preview_box {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* --- 11-3. スマホ用：プロフィールページ各カード --- */
  .profile_left_block,
  .profile_right_block {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
  }

  .profile_right_block {
    margin-top: 0;
  }

  .profile_left_block .item_detail_card,
  .profile_right_block .item_detail_card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .profile_user_card .seller_name_row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }

  .profile_user_card .verification_tag {
    display: inline-block;
    width: auto;
    height: auto;
    white-space: nowrap;
    padding: 3px 8px;
    font-size: 11px;
    writing-mode: horizontal-tb;
  }

  .rank_badge_supreme_clean {
    font-size: 9.5px;
    padding: 1.5px 5px;
    margin-left: 3px;
  }

  .profile_avg_days_row {
    font-size: 12px;
    gap: 8px 12px;
  }

  .avg_spacer {
    display: none;
  }

  /* 総合評価・システム評価カードの縦並び化 */
  .eval_twin_layout_container {
    flex-direction: column;
    gap: 24px;
  }

  .eval_twin_column {
    flex: 0 0 100%;
    width: 100%;
  }

  .eval_twin_column.border_left_divider {
    padding-left: 0;
    border-left: none;
    padding-top: 20px;
    border-top: 1px dashed #e8d3ca;
  }

  .eval_badge_row_wrap {
    padding-right: 0;
    gap: 10px;
  }

  .eval_capsule_badge {
    padding: 8px 0;
    font-size: 13px;
  }

  .eval_capsule_badge.good_capsule .badge_num,
  .eval_capsule_badge.bad_capsule .badge_num {
    font-size: 14px;
  }

  .system_stars_visual        { font-size: 18px; }
  .system_rank_badge_s         { font-size: 16px; }
  .system_status_comment_text  { font-size: 12px; margin-top: 6px; }

  /* 自己紹介・登録情報カードの縦並び化 */
  #profile_details_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    margin-top: 20px;
    box-sizing: border-box;
  }

  .details_left_block,
  .details_right_block {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .details_right_block {
    margin-top: 20px;
  }

  #profile_details_container .details_info_table tbody tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px dashed #f2dad6;
  }

  #profile_details_container .details_info_table tbody tr:last-child {
    border-bottom: none;
  }

  #profile_details_container .details_info_table th {
    width: 100%;
    max-width: 100%;
    font-size: 13.5px;
    color: #8a7670;
    font-weight: bold;
    padding: 0 0 8px 0;
    text-align: left;
  }

  #profile_details_container .details_info_table td {
    width: 100%;
    max-width: 100%;
    font-size: 13.5px;
    padding: 0;
  }

  .stats_box_group   { width: 100%; gap: 12px; }
  .stats_cat_section { padding: 10px 14px; }

  /* お取引スコアの年度タブ調整 */
  .score_header_flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .score_year_headers {
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .score_year_btn {
    flex: 1;
    text-align: center;
    padding: 6px 0;
  }

  /* ペナルティ履歴テーブル調整 */
  .penalty_data_table th,
  .penalty_data_table td {
    padding: 10px 12px;
  }

  .penalty_item_wrapper {
    display: block;
    line-height: 1.8;
  }

  .penalty_inline_badge {
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 2px;
    float: left;
  }

  .penalty_main_text {
    font-size: 12.5px;
  }

  /* --- 11-3b. スマホ用：ガイドライン＆利用規約ページ --- */
  .guideline_hero_card,
  .guideline_content_card,
  .terms_content_card,
  .founder_message_card {
    padding: 20px 16px;
  }

  .guideline_page_title,
  .founder_main_title {
    font-size: 19px;
  }

  .toc_grid_list,
  .gl_point_grid,
  .founder_pillar_grid,
  .usagi_benefit_grid {
    grid-template-columns: 1fr;
  }

  .gl_step_box,
  .usagi_rule_item {
    flex-direction: column;
    gap: 10px;
  }

  .hiw_feature_trio {
    grid-template-columns: 1fr;
  }

  .hiw_ecosystem_flow {
    flex-direction: column;
  }

  .hiw_eco_arrow {
    transform: rotate(90deg);
    margin: 2px 0;
  }

  /* --- 11-3c. スマホ用：ディスカッションボード (discussion.html) --- */
  .disc_header_card,
  .disc_thread_detail_card {
    padding: 18px 14px;
  }

  .disc_header_flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .disc_title_group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .disc_action_right,
  .disc_new_thread_btn,
  .disc_board_search {
    width: 100%;
    box-sizing: border-box;
  }

  .disc_body_grid {
    grid-template-columns: 1fr;
  }

  /* --- 11-3d. スマホ用：ヘルプ＆トラブル解決ページ (trouble_help.html) --- */
  .help_search_input {
    font-size: 13px;
    padding-left: 38px;
  }

  .help_search_icon {
    left: 12px;
  }

  .help_quick_nav {
    flex-direction: column;
  }

  .help_nav_pill {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
  }

  .help_critical_alert {
    flex-direction: column;
    gap: 8px;
    padding: 14px;
  }

  .faq_question {
    padding: 12px 14px;
    font-size: 13.5px;
  }

  .faq_answer {
    padding: 14px 15px;
  }

  .contact_trigger_label {
    padding: 14px;
    font-size: 13px;
  }

  .contact_form_inner {
    padding: 18px 14px;
  }

  .inquiry_form_row_grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .inquiry_submit_btn {
    width: 100%;
    padding: 12px 16px;
  }

  /* --- 11-3e. スマホ用：出品カテゴリ一覧 (category.html) --- */
  .cat_card_header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cat_sponsor_tag {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .cat_branches_grid {
    grid-template-columns: 1fr;
  }

  /* --- 11-3f. スマホ用：出品商品一覧 (list.html) --- */
  .list_tag_bar_inner {
    padding: 0 12px;
  }

  .list_main_container {
    flex-direction: column;
    padding: 0 12px;
    gap: 16px;
  }

  .list_filter_sidebar {
    width: 100%;
  }

  /* スマホ用：絞り込みトグルボタン（初期状態は閉じた状態） */
  .mobile_filter_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    border: 1.5px solid #e2cbbf;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: bold;
    color: #5c4c4b;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(177, 147, 133, 0.08);
    transition: all 0.25s ease;
    user-select: none;
  }

  .m_filter_toggle_icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid #8c7872;
    border-bottom: 2px solid #8c7872;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-right: 4px;
    margin-top: -3px;
  }

  /* スマホ時は初期状態で検索カードを非表示（閉じる） */
  .list_filter_sidebar .filter_card {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 16px;
    margin: 0;
    border: none;
    box-shadow: none;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  }

  /* ボタンタップで開く */
  #mobile_filter_toggle:checked + .mobile_filter_btn {
    background-color: #FAF4EF;
    border-color: #ba4336;
    color: #ba4336;
  }

  #mobile_filter_toggle:checked + .mobile_filter_btn .m_filter_toggle_icon {
    transform: rotate(-135deg);
    border-color: #ba4336;
    margin-top: 3px;
  }

  #mobile_filter_toggle:checked ~ .filter_card {
    max-height: 2000px;
    opacity: 1;
    padding: 18px 16px;
    margin-top: 10px;
    border: 1px solid #e8d7ce;
    box-shadow: 0 4px 14px rgba(177, 147, 133, 0.12);
  }

  .list_control_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sort_selector_box {
    width: 100%;
    justify-content: flex-end;
  }

  .product_card_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .card_price_badge {
    font-size: 12px;
    padding: 2px 6px;
    border-top-right-radius: 8px;
  }

  .card_packing_badge,
  .card_time_badge {
    font-size: 9px;
    padding: 1px 4px;
  }

  .card_info {
    padding: 8px;
  }

  .card_item_title {
    font-size: 11px;
    height: 32px;
    margin-bottom: 4px;
  }

  .card_seller_name {
    max-width: 55px;
  }

  /* --- 11-4. スマホ用：フッター --- */
  #main_footer .footer_container {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  #main_footer .footer_logo_area {
    width: 100%;
    margin-bottom: 30px;
  }

  .footer_logo_img {
    margin: 0 auto;
    height: 68px;
  }

  #main_footer .footer_links {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
    padding-left: 20%;
    box-sizing: border-box;
  }
}


/* ==========================================================================
   11-5. ログイン・新規登録ページ（login.html）
   ========================================================================== */
.login_page_body {
  background-color: #FAF7F3;
  color: #4a3b3a;
  min-height: 100vh;
}

.login_header {
  box-shadow: 0 2px 8px rgba(177, 147, 133, 0.08);
}

.login_header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px;
}

.login_back_link {
  font-size: 13px;
  font-weight: bold;
  color: #8c7872;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #e8ded9;
  transition: all 0.2s ease;
}

.login_back_link:hover {
  background-color: #f7ede8;
  color: #ba4336;
  border-color: #ba4336;
}

.login_main_container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px 80px;
}

.login_card {
  width: 100%;
  max-width: 540px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #ebdcd5;
  box-shadow: 0 8px 30px rgba(168, 132, 118, 0.12);
  padding: 40px 32px;
  box-sizing: border-box;
}

.login_card_header {
  text-align: center;
  margin-bottom: 28px;
}

.login_card_logo {
  height: 96px;
  max-width: 85%;
  object-fit: contain;
  margin-bottom: 20px;
}

.login_title {
  font-size: 20px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0 0 8px;
}

.login_subtitle {
  font-size: 13px;
  color: #8c7872;
  margin: 0;
}

/* OAuth ボタンエリア */
.oauth_btn_group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.oauth_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 52px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.oauth_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.oauth_btn:active {
  transform: translateY(0);
}

.oauth_btn_icon_wrap {
  position: absolute;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Google ボタン（公式デザイン準拠） */
.btn_google {
  background-color: #ffffff;
  color: #3c4043;
  border: 1.5px solid #dadce0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn_google:hover {
  background-color: #f8f9fa;
  border-color: #c6c9cc;
}

/* LINE ボタン（公式グリーン） */
.btn_line {
  background-color: #06C755;
  color: #ffffff;
  border: 1.5px solid #06C755;
  box-shadow: 0 2px 4px rgba(6, 199, 85, 0.25);
}

.btn_line:hover {
  background-color: #05b04a;
}

/* パスキー ボタン（スマートなダークネイビー） */
.btn_passkey {
  background-color: #1e293b;
  color: #ffffff;
  border: 1.5px solid #1e293b;
  box-shadow: 0 2px 4px rgba(30, 41, 59, 0.25);
}

.btn_passkey:hover {
  background-color: #0f172a;
  border-color: #0f172a;
}

.btn_passkey.loading, .oauth_btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* パスキー選択モーダル（B案） */
.passkey_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
  box-sizing: border-box;
}

.passkey_modal_content {
  background: #ffffff;
  border: 1.5px solid #ebdcd5;
  border-radius: 22px;
  max-width: 440px;
  width: 100%;
  padding: 30px 24px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  animation: passkeyModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes passkeyModalPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.passkey_modal_close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  color: #a89893;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s ease;
}

.passkey_modal_close:hover {
  color: #ba4336;
}

.passkey_choice_card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid #ebdcd5;
  border-radius: 14px;
  background: #fdfbf9;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.passkey_choice_card:hover {
  border-color: #ba4336;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(186, 67, 54, 0.12);
}

.passkey_choice_card.highlight_choice {
  border-color: #d1d5db;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.passkey_choice_card.highlight_choice:hover {
  border-color: #1e293b;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(30, 41, 59, 0.15);
}

.choice_icon {
  font-size: 26px;
  flex-shrink: 0;
}

.choice_text {
  flex: 1;
}

.choice_title {
  font-size: 13.5px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 2px;
}

.choice_desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
}

.choice_arrow {
  font-size: 16px;
  color: #94a3b8;
  font-weight: bold;
}

.login_agreement_text {
  font-size: 11.5px;
  color: #8c7872;
  text-align: center;
  line-height: 1.6;
  margin: 0 0 32px;
}

.login_agreement_text a {
  color: #ba4336;
  text-decoration: underline;
}

/* セキュリティ・安心説明ボックス */
.login_safety_box {
  background-color: #FAF5F2;
  border: 1px solid #ebd7cd;
  border-radius: 14px;
  padding: 22px 20px;
  margin-bottom: 24px;
}

.safety_box_header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.safety_shield_icon {
  font-size: 22px;
}

.safety_box_title {
  font-size: 14.5px;
  font-weight: bold;
  color: #5c413b;
  margin: 0;
}

.safety_box_lead {
  font-size: 12.5px;
  color: #634f4b;
  line-height: 1.65;
  margin: 0 0 16px;
}

.safety_features_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safety_feature_item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #ffffff;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #f0e2da;
}

.safety_feature_item.highlight_privacy {
  background: #FFFDF9;
  border: 1.5px solid #EACAB9;
}

.feature_icon_badge {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature_text_wrap {
  flex: 1;
}

.feature_heading {
  font-size: 12.5px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0 0 4px;
}

.feature_desc {
  font-size: 11.5px;
  color: #6d5854;
  line-height: 1.6;
  margin: 0;
}

.privacy_alert_badge {
  display: inline-block;
  background: #fdf0ed;
  color: #ba4336;
  font-size: 10.5px;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #f3cfc6;
  margin-right: 2px;
}

.login_card_footer {
  text-align: center;
  font-size: 12px;
  color: #8c7872;
}

.login_card_footer a {
  color: #ba4336;
  text-decoration: underline;
}

/* スマホ最適化 */
@media (max-width: 600px) {
  .login_card {
    padding: 30px 18px;
    border-radius: 16px;
  }
  .login_card_logo {
    height: 76px;
    max-width: 90%;
  }
  .login_title {
    font-size: 18px;
  }
  .oauth_btn {
    height: 48px;
    font-size: 14px;
  }
  .safety_box_title {
    font-size: 13.5px;
  }
  .login_safety_box {
    padding: 18px 14px;
  }
}


/* ==========================================================================
   11-6. 商品出品ページ（sell.html）
   ========================================================================== */
.sell_page_body {
  background-color: #FAF7F3;
  color: #4a3b3a;
  min-height: 100vh;
}

.sell_header {
  box-shadow: 0 2px 8px rgba(177, 147, 133, 0.08);
}

.sell_header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px;
}

.sell_cancel_link {
  font-size: 13px;
  font-weight: bold;
  color: #8c7872;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #e8ded9;
  transition: all 0.2s ease;
}

.sell_cancel_link:hover {
  background-color: #f7ede8;
  color: #ba4336;
  border-color: #ba4336;
}

.sell_main_container {
  display: flex;
  justify-content: center;
  padding: 30px 16px 80px;
}

.sell_form_card {
  width: 100%;
  max-width: 780px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #ebdcd5;
  box-shadow: 0 8px 30px rgba(168, 132, 118, 0.1);
  padding: 36px 32px;
  box-sizing: border-box;
}

/* タイトル ＆ 手数料0円バッジ */
.sell_page_title_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #FAF4EF;
  padding-bottom: 20px;
  margin-bottom: 28px;
}

.sell_main_title {
  font-size: 22px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0;
}

.zero_fee_badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  color: #C2410C;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
}

.zero_fee_badge strong {
  font-size: 15px;
  color: #EA580C;
}

/* セクション共通 */
.sell_section {
  padding: 24px 0;
  border-bottom: 1px solid #f2e9e4;
}

.sell_section:last-of-type {
  border-bottom: none;
}

.sell_section_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.sell_section_title {
  font-size: 16px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0;
}

.sell_section_note {
  font-size: 12px;
  color: #8c7872;
}

/* 必須・任意バッジ */
.badge_required {
  background-color: #ba4336;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.badge_optional {
  background-color: #9e8e89;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 写真アップロード */
.image_upload_grid {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.hidden_file_input {
  display: none;
}

.upload_slot_btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FAF7F3;
  border: 2px dashed #d8c3bc;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  text-align: center;
}

.upload_slot_btn:hover {
  background: #f7ede8;
  border-color: #ba4336;
}

.upload_slot_btn.is_primary {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.camera_icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.slot_label {
  font-size: 11px;
  font-weight: bold;
  color: #7a635d;
  line-height: 1.3;
}

.sub_photos_wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.sub_photos_wrap .upload_slot_btn {
  width: calc(25% - 8px);
  min-width: 75px;
  height: 90px;
}

.slot_mini_label {
  font-size: 11px;
  color: #8c7872;
  font-weight: bold;
}

.uploaded_preview_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 梱包写真推奨ボックス */
.packing_photo_recommend_box {
  background: #FFFDF9;
  border: 1.5px solid #F5DCCB;
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
}

.packing_box_header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.packing_box_icon {
  font-size: 24px;
}

.packing_box_title {
  font-size: 13.5px;
  font-weight: bold;
  color: #5c413b;
}

.packing_box_desc {
  font-size: 11.5px;
  color: #6d5854;
  margin: 4px 0 0;
  line-height: 1.5;
}

.packing_upload_slots {
  display: flex;
  gap: 12px;
}

.upload_slot_btn.packing_slot {
  width: 130px;
  height: 80px;
  border-color: #e5bfae;
  background: #ffffff;
}

.pack_icon {
  font-size: 18px;
  display: block;
  margin-bottom: 2px;
}

/* フォーム共通要素 */
.form_group {
  margin-bottom: 18px;
}

.form_label {
  display: block;
  font-size: 13.5px;
  font-weight: bold;
  color: #4a3b3a;
  margin-bottom: 6px;
}

.char_counter {
  float: right;
  font-size: 11px;
  font-weight: normal;
  color: #8c7872;
}

.form_input_text,
.form_select,
.form_textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ebdcd5;
  border-radius: 8px;
  font-size: 14px;
  color: #4a3b3a;
  background: #FAF7F3;
  box-sizing: border-box;
  font-family: inherit;
  transition: all 0.2s ease;
}

.form_input_text:focus,
.form_select:focus,
.form_textarea:focus {
  outline: none;
  border-color: #ba4336;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(186, 67, 54, 0.12);
}

.form_textarea {
  line-height: 1.6;
  resize: vertical;
}

.field_hint {
  font-size: 11.5px;
  color: #8c7872;
  margin: 4px 0 0;
}

.form_row_2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* テンプレート挿入ボタン */
.btn_insert_template {
  background: #FAF4EF;
  border: 1px solid #e0c8be;
  color: #ba4336;
  font-size: 11.5px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn_insert_template:hover {
  background: #f7ede8;
  border-color: #ba4336;
}

/* ラジオピル / チェックカード */
.radio_pill_group {
  display: flex;
  gap: 12px;
}

.radio_pill {
  cursor: pointer;
  flex: 1;
}

.radio_pill input {
  display: none;
}

.radio_pill .pill_text {
  display: block;
  text-align: center;
  padding: 10px 14px;
  background: #FAF7F3;
  border: 1.5px solid #ebdcd5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: bold;
  color: #6d5854;
  transition: all 0.2s ease;
}

.radio_pill input:checked + .pill_text {
  background: #ffffff;
  border-color: #ba4336;
  color: #ba4336;
  box-shadow: 0 2px 6px rgba(186, 67, 54, 0.15);
}

.checkbox_card_group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check_card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #FAF7F3;
  border: 1.5px solid #ebdcd5;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.check_card:hover {
  background: #fcf9f6;
  border-color: #cfb3a8;
}

.check_card input {
  margin-top: 3px;
  accent-color: #ba4336;
  width: 16px;
  height: 16px;
}

.check_title {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #4a3b3a;
  margin-bottom: 2px;
}

.check_desc {
  display: block;
  font-size: 11.5px;
  color: #7d6863;
  line-height: 1.45;
}

/* 販売形式タブ（オークション vs 定額 vs クローズド） */
.sell_type_tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.tab_radio {
  display: none;
}

.tab_label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  background: #FAF7F3;
  border: 2px solid #ebdcd5;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.tab_icon {
  font-size: 22px;
  margin-bottom: 4px;
}

.tab_name {
  font-size: 13.5px;
  font-weight: bold;
  color: #4a3b3a;
}

.tab_desc {
  font-size: 10.5px;
  color: #8c7872;
  margin-top: 2px;
}

/* クローズドオークション用解説バナー */
.closed_feature_banner {
  background: #FFFDF8;
  border: 1.5px solid #F5DCCB;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.closed_banner_header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.closed_banner_icon {
  font-size: 20px;
}

.closed_banner_title {
  font-size: 14px;
  font-weight: bold;
  color: #5c413b;
  margin: 0;
}

.closed_banner_list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: #6d5854;
  line-height: 1.6;
}

.closed_banner_list li {
  margin-bottom: 6px;
}

.closed_banner_list li:last-child {
  margin-bottom: 0;
}

.tab_radio:checked + .tab_label {
  background: #ffffff;
  border-color: #ba4336;
  box-shadow: 0 4px 12px rgba(186, 67, 54, 0.12);
}

.tab_radio:checked + .tab_label .tab_name {
  color: #ba4336;
}

/* 価格入力 */
.price_form_group {
  max-width: 320px;
}

.price_input_wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.currency_yen {
  position: absolute;
  left: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #7d6863;
}

.form_input_price {
  width: 100%;
  padding: 10px 14px 10px 32px;
  border: 1.5px solid #ebdcd5;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #4a3b3a;
  background: #FAF7F3;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.form_input_price:focus {
  outline: none;
  border-color: #ba4336;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(186, 67, 54, 0.12);
}

/* 手数料0円計算ボックス */
.fee_calc_box {
  background: #FAF4EF;
  border: 1px solid #ebd7cd;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 18px;
}

.fee_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.fee_val.zero_highlight {
  font-size: 18px;
  color: #ba4336;
}

.fee_note {
  font-size: 11.5px;
  color: #8c7872;
  margin: 6px 0 0;
  line-height: 1.45;
}

/* 出品アクションエリア */
.sell_submit_area {
  margin-top: 36px;
  text-align: center;
}

.sell_agree_notice {
  font-size: 12px;
  color: #8c7872;
  margin-bottom: 20px;
  line-height: 1.5;
}

.sell_agree_notice a {
  color: #ba4336;
  text-decoration: underline;
}

.btn_sell_submit {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto 12px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #ba4336, #a13428);
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(186, 67, 54, 0.3);
  transition: all 0.2s ease;
}

.btn_sell_submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(186, 67, 54, 0.4);
}

.btn_sell_submit:active {
  transform: translateY(0);
}

.btn_sell_draft {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: bold;
  color: #8c7872;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.2s ease;
}

.btn_sell_draft:hover {
  color: #ba4336;
  text-decoration: underline;
}

/* スマホ最適化 */
@media (max-width: 600px) {
  .sell_form_card {
    padding: 24px 16px;
    border-radius: 16px;
  }
  .sell_page_title_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .upload_slot_btn.is_primary {
    width: 100px;
    height: 100px;
  }
  .camera_icon {
    font-size: 24px;
  }
  .sub_photos_wrap .upload_slot_btn {
    width: calc(50% - 6px);
    height: 70px;
  }
  .form_row_2col {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sell_type_tabs {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tab_label {
    padding: 10px 12px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
  }
  .tab_icon {
    font-size: 20px;
    margin-bottom: 0;
  }
  .btn_sell_submit {
    font-size: 15px;
    padding: 14px 20px;
  }
}


/* ==========================================================================
   11-7. マイページ（mypage.html）ダッシュボード
   ========================================================================== */
.mypage_body {
  background-color: #FAF7F3;
  color: #4a3b3a;
}

.mypage_container {
  display: flex;
  max-width: 1200px;
  margin: 30px auto 80px;
  padding: 0 16px;
  gap: 24px;
  box-sizing: border-box;
}

/* --- 左サイドバー --- */
.mypage_sidebar {
  width: 280px;
  flex-shrink: 0;
}

.sidebar_user_card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #ebdcd5;
  box-shadow: 0 4px 16px rgba(168, 132, 118, 0.08);
  padding: 24px 18px;
  text-align: center;
  margin-bottom: 20px;
}

.sidebar_avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #FAF4EF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.sidebar_username {
  font-size: 16px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0 0 8px;
}

.sidebar_badges {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.usagi_supporter_pill {
  background: #fdf0ed;
  color: #ba4336;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #f3cfc6;
}

.verified_pill {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #c8e6c9;
}

.sidebar_rating_row {
  font-size: 12px;
  color: #8c7872;
  margin-bottom: 16px;
}

.rating_stars {
  color: #f59e0b;
  margin-right: 4px;
}

.btn_view_public_profile {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #ba4336;
  text-decoration: none;
  background: #FAF4EF;
  border: 1px solid #ebd7cd;
  padding: 8px 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.btn_view_public_profile:hover {
  background: #f7ede8;
}

/* サイドバーナビ */
.mypage_nav_menu {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #ebdcd5;
  box-shadow: 0 4px 16px rgba(168, 132, 118, 0.08);
  padding: 14px 10px;
}

.nav_section_title {
  font-size: 11px;
  font-weight: bold;
  color: #a8948d;
  padding: 10px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mypage_nav_item {
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: bold;
  color: #5c4a45;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.mypage_nav_item:hover {
  background: #FAF4EF;
  color: #ba4336;
}

.mypage_nav_item.active {
  background: #fdf0ed;
  color: #ba4336;
}

.mypage_nav_item.highlight_sell {
  background: #FFF7ED;
  color: #EA580C;
  border: 1px solid #FDBA74;
  margin: 4px 0 8px;
}

.mypage_nav_item.highlight_sell:hover {
  background: #FFEDD5;
}

.mypage_nav_item.text_muted {
  color: #9e8a83;
}

.nav_icon {
  margin-right: 10px;
  font-size: 16px;
}

.nav_badge {
  margin-left: auto;
  background: #ba4336;
  color: #ffffff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
}

/* --- 右メインコンテンツ --- */
.mypage_main_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.mypage_card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #ebdcd5;
  box-shadow: 0 4px 16px rgba(168, 132, 118, 0.08);
  padding: 24px;
  box-sizing: border-box;
}

/* 1. ウォレットカード */
.total_points_banner {
  background: linear-gradient(135deg, #FAF4EF, #f5e9e2);
  border: 1.5px solid #ebd0c2;
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 20px;
}

.total_points_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.total_points_label {
  font-size: 15px;
  font-weight: bold;
  color: #5c413b;
}

.total_points_banner {
  background: linear-gradient(135deg, #FFFDFB, #FAF3EE);
  border: 1.5px solid #F0DCD3;
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 22px;
  position: relative;
  box-shadow: 0 4px 14px rgba(186, 147, 133, 0.08);
}

.total_points_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.total_points_label {
  font-size: 15px;
  font-weight: bold;
  color: #5c413b;
}

.total_points_usage_note {
  font-size: 11.5px;
  color: #9c847d;
}

/* 総合ポイント：丸みのある愛らしいピルプレート */
.total_points_amount_row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #ffffff;
  padding: 10px 24px;
  border-radius: 30px;
  border: 1.5px solid #ebd3c8;
  box-shadow: 0 2px 8px rgba(186, 67, 54, 0.06);
}

.total_points_val {
  font-size: 34px;
  font-weight: bold;
  color: #ba4336;
  letter-spacing: 0.5px;
}

.total_points_unit {
  font-size: 18px;
  font-weight: bold;
  color: #c95c50;
}

.total_points_yen {
  font-size: 13px;
  color: #8c7872;
  margin-left: 6px;
}

.wallet_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.wallet_col {
  background: #FAF7F3;
  border: 1px solid #ebdcd5;
  border-radius: 16px;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
}

.wallet_col.cashout_points_col {
  background: #FFFDF9;
  border: 1.5px solid #EACAB9;
}

.point_status_badge {
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 12px;
}

.point_status_badge.no_cashout {
  background: #f0e6e1;
  color: #8c7872;
}

.point_status_badge.can_cashout {
  background: #fdf5e6;
  color: #b45309;
  border: 1px solid #fed7aa;
}

.wallet_header_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.wallet_badge_label {
  font-size: 13.5px;
  font-weight: bold;
  color: #5c413b;
}

/* 各ポイント数値：カプセル型の可愛いピルデザイン */
.wallet_amount_row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1.5px solid #ebdcd5;
  box-shadow: 0 2px 6px rgba(168, 132, 118, 0.06);
  width: fit-content;
}

.wallet_amount_val {
  font-size: 26px;
  font-weight: bold;
  color: #ba4336;
}

.wallet_unit {
  font-size: 15px;
  font-weight: bold;
  color: #c95c50;
  margin-left: 2px;
}

/* 出金可能ポイント：濃い青をやめ、Nupiraの世界観に合わせた温かいウォームモカ＆ゴールド調 */
.wallet_amount_val.cashout_val {
  color: #8c584c;
}

.wallet_unit.cashout_unit {
  color: #8c584c;
}

.wallet_yen_approx {
  font-size: 12px;
  color: #8c7872;
  margin-left: 6px;
}

.wallet_desc {
  font-size: 11.5px;
  color: #8c7872;
  margin: 0 0 16px;
  line-height: 1.45;
  flex: 1;
}

.btn_watch_ad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ba4336, #9b281d);
  color: #ffffff;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(186, 67, 54, 0.25);
  transition: all 0.2s ease;
}

.btn_watch_ad:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(186, 67, 54, 0.35);
}

.btn_transfer_payout {
  background: #ffffff;
  color: #5c413b;
  border: 1.5px solid #d4c0b6;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn_transfer_payout:hover {
  background: #fbf7f4;
  border-color: #ba4336;
  color: #ba4336;
}

/* 2. やることリスト */
.card_title_row {
  margin-bottom: 14px;
}

.mypage_section_title {
  font-size: 16px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.todo_count_badge {
  background: #ba4336;
  color: #ffffff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
}

.todo_items_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.todo_item_row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FAF7F3;
  border: 1px solid #ebdcd5;
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.todo_item_row:hover {
  background: #ffffff;
  border-color: #ba4336;
  box-shadow: 0 2px 8px rgba(186, 67, 54, 0.12);
}

.todo_status_icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ebd7cd;
  flex-shrink: 0;
}

.todo_body {
  flex: 1;
}

.todo_item_title {
  font-size: 13.5px;
  color: #4a3b3a;
  margin-bottom: 2px;
}

.todo_item_title strong {
  color: #ba4336;
}

.todo_item_meta {
  font-size: 12px;
  color: #8c7872;
}

.target_item_name {
  color: #5c413b;
  font-weight: bold;
}

.todo_arrow {
  font-size: 20px;
  color: #c4b0a8;
}

/* 3. 取引管理タブ */
.trade_tabs_header {
  display: flex;
  border-bottom: 2px solid #FAF4EF;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.trade_tab_radio {
  display: none;
}

.trade_tab_btn {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: bold;
  color: #8c7872;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.trade_tab_btn:hover {
  color: #ba4336;
}

.trade_tab_radio:checked + .trade_tab_btn {
  color: #ba4336;
  border-bottom-color: #ba4336;
}

.trade_content_body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trade_item_card {
  display: flex;
  gap: 12px;
  background: #FAF7F3;
  border: 1px solid #ebdcd5;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  align-items: center;
}

.trade_item_card:last-child {
  margin-bottom: 0;
}

.trade_item_card:hover {
  background: #ffffff;
  border-color: #d6a99d;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(168, 132, 118, 0.16);
}

.trade_item_card:active {
  transform: scale(0.99);
}

.trade_item_card.highlight_closed_card {
  background: #FFFDF9;
  border: 1.5px solid #EACAB9;
}

.trade_thumb_wrap {
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.trade_thumb_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge_closed_mini,
.badge_auction_mini,
.badge_fixed_mini {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 9px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 1px 0;
}

.badge_closed_mini {
  background: rgba(186, 67, 54, 0.88);
}

.badge_auction_mini {
  background: rgba(70, 50, 45, 0.85);
}

.badge_fixed_mini {
  background: rgba(46, 125, 50, 0.85);
}

.trade_info_wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.trade_title_row {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trade_format_tag {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  flex-shrink: 0;
}

.trade_format_tag.format_closed {
  background: #fdf0ed;
  color: #ba4336;
  border: 1px solid #f3cfc6;
}

.trade_format_tag.format_auction {
  background: #f5f0ec;
  color: #5c413b;
}

.trade_format_tag.format_fixed {
  background: #e8f5e9;
  color: #2e7d32;
}

.trade_item_name {
  font-size: 13.5px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trade_meta_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  flex-wrap: nowrap;
  gap: 8px;
}

.closed_bid_status {
  font-size: 13px;
  color: #5c413b;
}

.bid_highlight_red {
  color: #ba4336;
  font-size: 16px;
  margin: 0 4px;
}

.closed_reserve_hint {
  font-size: 11px;
  color: #8c7872;
}

.trade_timer {
  font-size: 11.5px;
  font-weight: bold;
  color: #ba4336;
  white-space: nowrap;
  flex-shrink: 0;
}

.trade_price_box {
  font-size: 12.5px;
  color: #5c413b;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.trade_price_box .price_label {
  width: auto;
  font-size: 11.5px;
  white-space: nowrap;
}

.trade_price_yen {
  font-size: 15px;
  font-weight: bold;
  color: #ba4336;
  margin: 0 2px;
}

.trade_bid_count,
.trade_shipping_badge {
  font-size: 11px;
  color: #8c7872;
}

.trade_likes {
  font-size: 12px;
  color: #8c7872;
}

.closed_action_bar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ebd7cd;
}

.closed_action_hint {
  font-size: 11.5px;
  color: #7d6863;
  margin: 0 0 8px;
}

.btn_view_closed_bids {
  display: inline-block;
  background: linear-gradient(135deg, #ba4336, #9b281d);
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(186, 67, 54, 0.25);
  transition: all 0.2s ease;
}

.btn_view_closed_bids:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(186, 67, 54, 0.35);
}

.trade_action_row {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.btn_item_link {
  font-size: 12px;
  font-weight: bold;
  color: #ba4336;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #ebd7cd;
  padding: 5px 12px;
  border-radius: 6px;
}

.btn_item_sub {
  font-size: 12px;
  color: #8c7872;
  background: none;
  border: 1px solid #e0d0c8;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}

/* --- クローズドオークション入札一覧モーダル --- */
.modal_closed_bids_window {
  max-width: 680px;
  width: 90%;
  padding: 28px 24px;
}

.closed_modal_header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.closed_modal_icon {
  font-size: 26px;
}

.closed_modal_title {
  font-size: 18px;
  font-weight: bold;
  color: #4a3b3a;
  margin: 0 0 2px;
}

.closed_modal_sub {
  font-size: 12px;
  color: #8c7872;
  margin: 0;
}

.closed_modal_notice {
  background: #FAF4EF;
  border: 1px solid #ebd7cd;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #634f4b;
  line-height: 1.5;
  margin-bottom: 18px;
}

.closed_bids_table_wrap {
  overflow-x: auto;
  margin-bottom: 18px;
}

.closed_bids_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.closed_bids_table th {
  background: #FAF7F3;
  color: #7a635d;
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #ebdcd5;
  font-size: 12px;
}

.closed_bids_table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f2e9e4;
  vertical-align: middle;
}

.top_bid_row {
  background: #FFFDF9;
}

.below_reserve_row {
  opacity: 0.6;
}

.bidder_user_cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bidder_avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.bidder_name {
  font-weight: bold;
  color: #4a3b3a;
  display: block;
}

.bidder_rating {
  font-size: 11px;
  color: #f59e0b;
}

.bid_amount_cell {
  white-space: nowrap;
}

.bid_yen_bold {
  font-size: 17px;
  color: #ba4336;
  display: block;
}

.bid_yen_normal {
  font-size: 15px;
  color: #4a3b3a;
  display: block;
}

.bid_yen_low {
  font-size: 14px;
  color: #8c7872;
  display: block;
}

.badge_reserve_cleared {
  display: inline-block;
  font-size: 10px;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 1px 5px;
  border-radius: 4px;
}

.badge_reserve_below {
  display: inline-block;
  font-size: 10px;
  color: #ba4336;
  background: #fdf0ed;
  padding: 1px 5px;
  border-radius: 4px;
}

.bid_time_cell {
  font-size: 11.5px;
  color: #8c7872;
  white-space: nowrap;
}

.btn_sell_to_this_user {
  background: #ba4336;
  color: #ffffff;
  border: none;
  font-size: 12px;
  font-weight: bold;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn_sell_to_this_user:hover:not(:disabled) {
  background: #9b281d;
}

.btn_sell_to_this_user.secondary {
  background: #ffffff;
  color: #ba4336;
  border: 1.5px solid #ba4336;
}

.btn_sell_to_this_user.secondary:hover {
  background: #fdf0ed;
}

.btn_sell_to_this_user.disabled {
  background: #e0d5ce;
  color: #9e8e88;
  cursor: not-allowed;
}

.closed_modal_footer {
  text-align: right;
  padding-top: 10px;
}

.btn_close_modal_text {
  font-size: 13px;
  color: #8c7872;
  cursor: pointer;
  padding: 6px 12px;
}

.btn_close_modal_text:hover {
  color: #ba4336;
}

/* マイページ用スマホ・タブレット最適化 (900px以下) */
@media (max-width: 900px) {
  .mypage_container {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding: 0 12px;
    margin: 15px auto;
    gap: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .mypage_sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mypage_main_content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mypage_card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 18px 14px;
    border-radius: 12px;
  }

  /* 総合ポイントバナー */
  .total_points_banner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 14px;
  }

  .total_points_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .total_points_num {
    font-size: 26px;
  }

  .wallet_grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .wallet_sub_card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 14px;
  }

  /* 取引管理タブの横スクロール対応（はみ出し防止） */
  .trade_tabs_header {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 6px;
    gap: 6px;
  }

  .trade_tab_btn {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13px;
  }

  .trade_item_card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px;
    gap: 12px;
  }

  .trade_thumb_wrap {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
  }

  .trade_item_name {
    font-size: 13.5px;
    word-break: break-all;
  }

  .trade_meta_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* やることリストカード */
  .todo_item_row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    gap: 10px;
  }

  .todo_item_title strong {
    font-size: 13px;
  }

  .todo_item_meta {
    font-size: 11.5px;
    word-break: break-all;
  }

  /* サイドバーメニュー（スマホ時は2列グリッドでコンパクトに） */
  .mypage_sidebar .sidebar_user_card {
    padding: 16px 14px;
  }

  .mypage_nav_menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .mypage_nav_menu .nav_section_title {
    grid-column: span 2;
    margin-top: 8px;
    padding-left: 4px;
  }

  .mypage_nav_item {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* クローズドオークション入札者一覧モーダル */
  .closed_bids_modal_container {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  .closed_bids_table_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 500px) {
  .mypage_nav_menu {
    grid-template-columns: 1fr;
  }

  .mypage_nav_menu .nav_section_title {
    grid-column: span 1;
  }

  .trade_item_card {
    flex-direction: column;
  }

  .trade_thumb_wrap {
    width: 100%;
    height: 140px;
  }
}

.escrow_payout_complete_pill {
  display: inline-block;
  background: #fdf5e6;
  color: #b45309;
  border: 1px solid #fed7aa;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-top: 6px;
}

/* 口座情報プレビューボックス */
.user_bank_info_box {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fdfaf7;
  border: 1px dashed #d6a99d;
  border-radius: 8px;
  font-size: 12px;
  color: #5c4c4b;
  line-height: 1.6;
}
.user_bank_info_box .bank_info_title {
  font-weight: bold;
  color: #8c584c;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ======================================================================
   めりあちゃん専用 Special Heart Rank Animation (❤❤❤❤❤ (Max))
   ====================================================================== */
.melia_rank_container {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  user-select: none;
  line-height: 1;
}

.melia_heart_seq {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
}

.melia_heart_seq .m_h {
  display: inline-block;
  color: #ff2d55;
  font-size: 1.1em;
  line-height: 1;
  text-shadow: 0 0 4px rgba(255, 45, 85, 0.4), 0 0 10px rgba(255, 105, 180, 0.35);
  animation-duration: 3.2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

/* 各ハートが ❤ → ❤❤ → ❤❤❤ → ❤❤❤❤ → ❤❤❤❤❤ と順番に現れるステップアニメーション */
.melia_heart_seq .m_h1 { animation-name: meliaHeartStep1; }
.melia_heart_seq .m_h2 { animation-name: meliaHeartStep2; }
.melia_heart_seq .m_h3 { animation-name: meliaHeartStep3; }
.melia_heart_seq .m_h4 { animation-name: meliaHeartStep4; }
.melia_heart_seq .m_h5 { animation-name: meliaHeartStep5; }

/* (Max) タグのキュルン＆ポップアニメーション */
.melia_rank_container .m_max_tag {
  display: inline-block;
  font-size: 0.88em;
  font-weight: 900;
  background: linear-gradient(135deg, #ff1493 0%, #ff2d55 50%, #ff69b4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 3px;
  letter-spacing: 0.5px;
  animation: meliaMaxPop 3.2s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
  filter: drop-shadow(0 1px 2px rgba(255, 20, 147, 0.25));
}

/* 単体テキスト表示時のスタイル (stars_rank_max) */
.stars_rank_max {
  color: #ff2d55 !important;
  text-shadow: 0 0 5px rgba(255, 45, 85, 0.45) !important;
  letter-spacing: 1px;
}

/* Max ランクバッジ */
.rank_max {
  background: linear-gradient(135deg, #ff2d55 0%, #ff69b4 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 6px rgba(255, 45, 85, 0.35) !important;
  border: 1px solid #ffb6c1 !important;
}

/* 1個目の❤ */
@keyframes meliaHeartStep1 {
  0% { opacity: 0; transform: scale(0.2); }
  6% { opacity: 1; transform: scale(1.35); }
  10%, 54% { opacity: 1; transform: scale(1); }
  60% { transform: scale(1.25); }
  66% { transform: scale(1); }
  72% { transform: scale(1.18); }
  78%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.3); }
}

/* 2個目の❤ */
@keyframes meliaHeartStep2 {
  0%, 8% { opacity: 0; transform: scale(0.2); }
  14% { opacity: 1; transform: scale(1.35); }
  18%, 54% { opacity: 1; transform: scale(1); }
  60% { transform: scale(1.25); }
  66% { transform: scale(1); }
  72% { transform: scale(1.18); }
  78%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.3); }
}

/* 3個目の❤ */
@keyframes meliaHeartStep3 {
  0%, 16% { opacity: 0; transform: scale(0.2); }
  22% { opacity: 1; transform: scale(1.35); }
  26%, 54% { opacity: 1; transform: scale(1); }
  60% { transform: scale(1.25); }
  66% { transform: scale(1); }
  72% { transform: scale(1.18); }
  78%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.3); }
}

/* 4個目の❤ */
@keyframes meliaHeartStep4 {
  0%, 24% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 1; transform: scale(1.35); }
  34%, 54% { opacity: 1; transform: scale(1); }
  60% { transform: scale(1.25); }
  66% { transform: scale(1); }
  72% { transform: scale(1.18); }
  78%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.3); }
}

/* 5個目の❤ */
@keyframes meliaHeartStep5 {
  0%, 32% { opacity: 0; transform: scale(0.2); }
  38% { opacity: 1; transform: scale(1.35); }
  42%, 54% { opacity: 1; transform: scale(1); }
  60% { transform: scale(1.25); }
  66% { transform: scale(1); }
  72% { transform: scale(1.18); }
  78%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.3); }
}

/* (Max) タグ */
@keyframes meliaMaxPop {
  0%, 40% { opacity: 0; transform: scale(0.2) rotate(-8deg); }
  48% { opacity: 1; transform: scale(1.28) rotate(3deg); }
  54%, 58% { opacity: 1; transform: scale(1) rotate(0deg); }
  60% { transform: scale(1.15); }
  66% { transform: scale(1); }
  72% { transform: scale(1.1); }
  78%, 88% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.3); }
}

/* ======================================================================
   注目タグ下：ヘッドライン告知ティッカー
   ====================================================================== */
#site_headline_ticker_container {
  max-width: 1400px;
  margin: -12px auto 18px;
  padding: 0 20px;
  box-sizing: border-box;
}

#headline_ticker_card {
  background: linear-gradient(90deg, #fff7f6 0%, #fffcf9 50%, #ffffff 100%);
  border: 1.5px solid #fecdd3;
  border-radius: 12px;
  height: 40px;
  padding: 0 14px;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

#headline_ticker_viewport {
  flex: 1;
  min-width: 0; /* Flexboxはみ出し防止 */
  height: 40px;
  overflow: hidden;
  position: relative;
}

#headline_ticker_track {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.headline_ticker_item {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Flexboxはみ出し防止 */
  width: 100%;
  box-sizing: border-box;
}

.headline_ticker_text {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  text-decoration: none;
}

.headline_ticker_text:hover {
  color: #e11d48;
  text-decoration: underline;
}

/* スマホ対応（640px以下） */
@media (max-width: 640px) {
  #site_headline_ticker_container {
    padding: 0 12px;
    margin: -8px auto 14px;
  }

  #headline_ticker_card {
    height: 40px;
    padding: 0 10px;
    gap: 8px;
    border-radius: 10px;
  }

  #headline_ticker_viewport {
    height: 40px;
  }

  .headline_ticker_item {
    height: 40px;
    font-size: 12px;
    gap: 6px;
  }

  .headline_ticker_badge {
    font-size: 10px !important;
    padding: 1px 5px !important;
  }

  #headline_ticker_counter {
    display: none; /* スマホではテキスト領域を最大化するためカウンターを隠す */
  }
}