@charset "utf-8";


div.container_ {
    width: clamp(320px, 82vw, 1024px);
    margin: 24px auto;
}


/* =========================================================
   WATAPRO: .contents_ 専用 “Modern B2B” スキン（完全版）
   - 影響範囲：.contents_ 内のみ
   - :root 不使用（スコープ変数は .contents_ に限定）
   - 既存HTML/JSに非依存、衝突しにくい安全設計
   - PC/タブレット/スマホ最適化
   ========================================================= */












/*カテゴリー一覧ボタン*/

/* .customer_ が存在するページでは 3要素を隠す */
@supports selector(body:has(.customer_)) {
  body:has(.customer_) #return,
  body:has(.customer_) .compact-fab,
  body:has(.customer_) .category-popup-btn {
    display: none !important;
  }
}
@supports selector(body:has(.contact_)) {
  body:has(.contact_) .category-popup-btn {
    display: none !important;
  }
}



/* active時（クリック中） */
.category-popup-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(0, 168, 107, 0.25);
}



.category-popup-btn {
  font-family: 'Noto Sans JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  border-top: solid 3px #06b17a;
  border-bottom: solid 3px #06b17a;
  display: table;
  position: relative;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #00a86b, #00b47b);
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 168, 107, 0.25);
  transition: all 0.3s ease;
  user-select: none;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
	margin: auto;
	
}

.category-popup-btn::before {
  content: "📂";
  font-size: 16px;
  margin-right: 4px;
  transition: transform 0.3s ease;
}

.category-popup-btn:hover::before {
  transform: rotate(8deg);
}


.category-popup-btn::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 20px;
  /*border-right: solid 3px #06b17a;*/
  top: 0;
  right: 0;
  transition: all 0.3s;
}

.category-popup-btn:hover {
  background: linear-gradient(135deg, #00b47b, #00a86b);
  box-shadow: 0 8px 22px rgba(0, 168, 107, 0.35);
  transform: translateY(-2px);
}


/* 固定配置（下部に浮かせたい場合） */
@media (min-width: 1025px) {
  .category-popup-btn.fixed {
    position: fixed;
    bottom: 32px;
    right: 40px;
    z-index: 9999;
    background: linear-gradient(135deg, #00a86b, #00c08b);
    box-shadow: 0 8px 30px rgba(0,168,107,0.35);
  }
}

/* モバイル対応（小さめで中央寄せ） */
@media (max-width: 768px) {
  .category-popup-btn {
    font-size: 14px;
    padding: 9px 18px;
    box-shadow: 0 4px 12px rgba(0,168,107,0.25);
  }
}

.category-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /*background: rgba(0,0,0,0.45);*/
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* ===============================
   カテゴリー一覧ポップアップ
   =============================== */

/* 背景モーダル */
.category-popup {
  background: #fff;
  border-radius: 20px;
  padding: 40px 48px;
  max-width: 900px;
  width: 92%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  position: relative;
  animation: fadeIn 0.35s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
}

/* 閉じるボタン */
.category-popup .close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  color: #777;
  cursor: pointer;
  transition: all 0.3s ease;
}
.category-popup .close-btn:hover {
  color: #111;
  transform: rotate(90deg);
}

/* タイトル */
.category-popup h2 {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 28px;
  color: #1d1d1f;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #e5e5e7;
  padding-bottom: 10px;
}



/* ===============================
   カテゴリーグリッド本体
   =============================== */
/* ===============================
   横並びカテゴリリスト
   =============================== */

/* 全体：横スクロール対応 */
.cat-body {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  scroll-snap-type: x mandatory;
  padding: 16px 8px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

/* 各カテゴリカード */
.cat-body .CategoryStyleT_Item_ {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: #f9fafb;
  border: 1px solid #e5e5e7;
  border-radius: 10px;
  text-align: center;
      padding: 7px 10px;
  min-width: 200px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
	margin: 5px;
	    display: inline-block;


}
.cat-body {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  scroll-snap-type: x mandatory;
  padding: 16px 8px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

/* 各カテゴリカード */
.CategoryStyleT_Item_ {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: #f9fafb;
  border: 1px solid #e5e5e7;
  border-radius: 10px;
  text-align: center;
	
  min-width: 150px!important;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
	    padding: 5px 14px !important;
	line-height:0!important;
}
.CategoryStyleT_Item_:hover {
  background: #fff;
  border-color: #00a86b;
  box-shadow: 0 4px 12px rgba(0,168,107,0.2);
  transform: translateY(-3px);
}

/* カテゴリ名 */
.CategoryStyleT_Item_ .name_ a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
  display: block;
  transition: color 0.25s ease;
}
.CategoryStyleT_Item_ .name_ a:hover {
  color: #00a86b;
}

/* 横スクロールバー非表示（Webkit系） */
.cat-body::-webkit-scrollbar {
  height: 6px;
}
.cat-body::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* タイトルと閉じるボタンの位置を最適化 */
.category-popup h2 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 16px;
  color: #1d1d1f;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.category-popup .close-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 24px;
  color: #888;
  cursor: pointer;
  transition: 0.3s;
}
.category-popup .close-btn:hover {
  color: #111;
  transform: rotate(90deg);
}

/* 背景（ポップアップ本体） */
.category-popup {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  padding: 32px 28px;
  max-width: 920px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

/* 横方向ライン間の不要余白を削除 */
.CategoryStyleT_Line_ {
  display: contents;
}

/* スマホ調整：カードをやや小さめに */
@media (max-width: 640px) {
  .CategoryStyleT_Item_ {
    min-width: 150px;
    padding: 10px 14px;
  }
  .CategoryStyleT_Item_ .name_ a {
    font-size: 14px;
  }
}

}
.CategoryStyleT_Item_:hover {
  background: #fff;
  border-color: #00a86b;
  box-shadow: 0 4px 12px rgba(0,168,107,0.2);
  transform: translateY(-3px);
}

/* カテゴリ名 */
.CategoryStyleT_Item_ .name_ a {
  text-decoration: none;
  font-size: 15px;
  font-weight: normal!important;
  color: #1d1d1f;
  display: block;
  transition: color 0.25s ease;
}
.CategoryStyleT_Item_ .name_ a:hover {
  color: #00a86b;
}

/* 横スクロールバー非表示（Webkit系） */
.cat-body::-webkit-scrollbar {
  height: 6px;
}
.cat-body::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* タイトルと閉じるボタンの位置を最適化 */
.category-popup h2 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 16px;
  color: #1d1d1f;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.category-popup .close-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 24px;
  color: #888;
  cursor: pointer;
  transition: 0.3s;
}
.category-popup .close-btn:hover {
  color: #111;
  transform: rotate(90deg);
}

/* 背景（ポップアップ本体） */
.category-popup {
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  padding: 32px 28px;
  max-width: 920px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
	
	    background: rgba(255 255 255 / 0.5);
    backdrop-filter: saturate(150%) blur(10px);
	
	
	
}

/* 横方向ライン間の不要余白を削除 */
.CategoryStyleT_Line_ {
  display: contents;
}

/* スマホ調整：カードをやや小さめに */
@media (max-width: 640px) {
  .CategoryStyleT_Item_ {
    min-width: 150px;
    padding: 10px 14px;
  }
  .CategoryStyleT_Item_ .name_ a {
    font-size: 14px;
  }
}


/* ===============================
   スクロールバー美化
   =============================== */
.category-popup::-webkit-scrollbar {
  width: 8px;
}
.category-popup::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* ===============================
   アニメーション
   =============================== */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ===============================
   スマホ対応
   =============================== */
@media (max-width: 640px) {
  .category-popup {
    padding: 28px 24px;
    border-radius: 16px;
  }
  .category-popup h2 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .cat-body {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px 12px;
  }
  .CategoryStyleT_Item_ .name_ {
    font-size: 14px;
  }
}


















/*詳細検索*/
/* =========================================================
   【完全版】WATAPRO 商品検索フォーム（販売価格横一列＋モダン統一）
   - 対象範囲：.contents_ 内のみ
   - :root 不使用 / 競合回避 / 横一列固定
   ========================================================= */

.contents_ {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Meiryo", sans-serif;
  color: #1f2937;
  line-height: 1.38;
}

/* ================================================
   CategoryStyleP_：横並び・オレンジピルスタイル
   ================================================ */

/* コンテナ */
.CategoryStyleP_ {
  display: flex;
  flex-wrap: nowrap;         /* 折り返さない（横スクロール対応） */
  overflow-x: auto;          /* 幅超過時スクロール */
  gap: 14px;
  padding: 10px 6px;
  scrollbar-width: none;     /* Firefox */
}
.CategoryStyleP_::-webkit-scrollbar { display: none; } /* Chrome */

/* 1行内のラッパーを無視してフラット化 */
.CategoryStyleP_Line_ {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
}

/* 各カテゴリ項目（ピル型） */
.CategoryStyleP_Item_ {
  flex: 0 0 auto;
  border-radius: 9999px;
  background: linear-gradient(180deg, #fffdf6 0%, #fff9eb 100%);
  border: 1px solid #f6cf95;
  box-shadow: 0 2px 8px rgba(244, 173, 74, 0.18);
  transition: all 0.15s ease;
}

/* ホバー時ふわっと */
.CategoryStyleP_Item_:hover {
  background: linear-gradient(180deg, #fff7de 0%, #fff2cf 100%);
  border-color: #f1b563;
  box-shadow: 0 6px 16px rgba(244, 173, 74, 0.28);
  transform: translateY(-1px);
}

/* 見出し（リセット） */
.CategoryStyleP_Item_ h3.name_ {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* リンク文字部分 */
.CategoryStyleP_Item_ .category_name_ {
  display: inline-block;
  padding: 10px 18px;
  color: #b26a00;
  text-decoration: none;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ホバーで濃く */
.CategoryStyleP_Item_ .category_name_:hover {
  color: #9c5900;
}

/* スマホ時のタッチ間隔確保 */
@media (max-width: 640px) {
  .CategoryStyleP_ {
    gap: 10px;
    padding: 8px 4px;
  }
  .CategoryStyleP_Item_ .category_name_ {
    padding: 9px 14px;
    font-size: 13px;
  }
}








/* =========================================================
   カテゴリリスト（.CategoryStyleL_）
   HTML中の「/」を完全に非表示にしてチップ化
   ========================================================= */

/* リスト全体を整える */
.contents_ .CategoryStyleL_ {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0;
  font-family: system-ui, -apple-system, "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #222;
  position: relative;
}

/* ✅ スラッシュ（/）を完全に隠す */
.contents_ .CategoryStyleL_ {
  font-size: 0; /* 一旦文字サイズを0に */
}
.contents_ .CategoryStyleL_ .name_ {
  font-size: 0.93rem; /* 中のリンクだけ文字復活 */
}

/* ✅ 各カテゴリリンクをチップ風に */
.contents_ .CategoryStyleL_ .name_ a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff6e9;
  border: 1px solid #ffe1ba;
  color: #ff9500;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(255,149,0,0.08);
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* hover時のアニメ */
.contents_ .CategoryStyleL_ .name_ a:hover {
  background: #ff9500;
  color: #fff;
  border-color: #ff9500;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(255,149,0,0.25);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .contents_ .CategoryStyleL_ {
    gap: 6px;
    font-size: 0;
  }
  .contents_ .CategoryStyleL_ .name_ {
    font-size: 0.9rem;
  }
  .contents_ .CategoryStyleL_ .name_ a {
    padding: 6px 12px;
  }
}









/* ---------------------------------------------
   テーブルフォーム全体（軽量＆整列）
--------------------------------------------- */
.contents_ table.formlist_.goodssearch_ {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 0.95rem;
}
.contents_ table.formlist_.goodssearch_ th {
  width: 140px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: #111;
  font-weight: 600;
  white-space: nowrap;
}
.contents_ table.formlist_.goodssearch_ td {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: #fff;
}

/* ---------------------------------------------
   入力欄・セレクトの共通設定
--------------------------------------------- */
.contents_ table.formlist_.goodssearch_ input[type="text"],
.contents_ table.formlist_.goodssearch_ select {
  width: 100%;
  height: 32px;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contents_ table.formlist_.goodssearch_ input[type="text"]:focus,
.contents_ table.formlist_.goodssearch_ select:focus {
  border-color: #00a86b;
  box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.15);
  outline: none;
}




/* ---------------------------------------------
   #search_price（販売価格）横一列固定
--------------------------------------------- */
.contents_ table.formlist_.goodssearch_ #search_price td {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 10px;
}
.contents_ table.formlist_.goodssearch_ #search_price td input[type="text"] {
  width: 110px;
  height: 32px;
  padding: 4px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  text-align: right;
  flex: 0 0 auto;
}
.contents_ table.formlist_.goodssearch_ #search_price td span,
.contents_ table.formlist_.goodssearch_ #search_price td font {
  display: inline-block;
  margin: 0 2px;
  color: #444;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
}
.contents_ table.formlist_.goodssearch_ #search_price td br {
  display: none !important;
}
.contents_ table.formlist_.goodssearch_ #search_price td input[type="text"]:focus {
  border-color: #00a86b;
  box-shadow: 0 0 0 2px rgba(0,168,107,0.15);
  outline: none;
}

/* ---------------------------------------------
   submit_（フォルダアイコン＋丸ボタン）
--------------------------------------------- */
.contents_ .submit_ {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 0 24px;
  min-height: 40px;
}
.contents_ .submit_::before {
  content: "📂 検索";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 5px 100px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, #00a86b, #05bf7f);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  box-shadow: 0 14px 28px rgba(0, 168, 107, 0.28);
  pointer-events: none;
  transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.25s ease;
}
.contents_ .submit_ input[type="image"] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 40px;
  border: none;
  background: none;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}
.contents_ .submit_:hover::before {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 18px 34px rgba(0, 168, 107, 0.35);
}
.contents_ .submit_:active::before {
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0, 168, 107, 0.22);
}

/* ---------------------------------------------
   モバイル対応
--------------------------------------------- */
@media (max-width: 768px) {
  .contents_ table.formlist_.goodssearch_ th,
  .contents_ table.formlist_.goodssearch_ td {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
  }
  .contents_ table.formlist_.goodssearch_ #search_price td {
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .contents_ table.formlist_.goodssearch_ #search_price td input[type="text"] {
    width: 48%;
    text-align: left;
  }
  .contents_ .submit_::before,
  .contents_ .submit_ input[type="image"] {
    width: 100%;
    max-width: 360px;
  }
}




/*検索結果*/

.contents_ dl.navistyle_ {
  /*display: none;*/
	text-align:center;
  align-items: center;
  gap: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 0.95rem;
  color: #333;
  margin: 8px 0 12px;
}
.contents_ dl.navistyle_ dt,.contents_ dl.navistyle_ dd {display:inline-block;}
.contents_ dl.navistyle_ dt {
  font-weight: 600;
  color: #666;
}

.contents_ dl.navistyle_ dd {
  margin: 0;
}

.contents_ dl.navistyle_ .navistyle_now_ {
  background: linear-gradient(135deg, #00a86b, #06c988);
  color: #fff;
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 168, 107, 0.25);
}

.contents_ dl.navisort_ {
  /*display: flex;*/
  align-items: center;
	text-align:center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 0.95rem;
  color: #333;
  margin: 8px 0 14px;
}
.contents_ dl.navisort_ dt,.contents_ dl.navisort_ dd {display:inline-block;}
.contents_ dl.navisort_ dt {
  font-weight: 600;
  color: #666;
  margin-right: 4px;
}

.contents_ dl.navisort_ dd {
  margin: 0;
  /*display: flex;*/
  flex-wrap: wrap;
  gap: 6px;
	text-align:center;
}

/* --- 通常リンク --- */
.contents_ dl.navisort_ dd a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  color: #333;
  background: #fff;
  transition: all 0.2s ease;
}
.contents_ dl.navisort_ dd a:hover {
  background: linear-gradient(135deg, #00a86b, #05bf7f);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(0,168,107,0.25);
}

/* --- 現在選択中（span.navisort_now_） --- */
.contents_ dl.navisort_ dd .navisort_now_ {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #00a86b, #05bf7f);
  box-shadow: 0 2px 6px rgba(0,168,107,0.25);
  cursor: default;
}



/* ============================
   ページネーション（.navipage_） refined
   ============================ */

/* ============  .navipage_ 〇系（ラウンド） ============ */
.contents_ .navipage_{
  /*display:flex;*/ align-items:center; flex-wrap:wrap; gap:10px;
	text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP","Meiryo",sans-serif;
  font-size:.95rem; color:#2b2f33; margin:18px 0;
}

/* 件数 */
.contents_ .navipage_ .navipage_sum_{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:#f3f5f7; color:#4a5560;
}

/* ボタン（数字／最初・前・次・最後 すべて丸系） */
.contents_ .navipage_ a,
.contents_ .navipage_ .navipage_now_{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 12px;
  border-radius:999px; border:1px solid #e6eaef; background:#fff; color:#2b2f33;
  text-decoration:none; box-shadow:0 2px 6px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	margin-left:3px;margin-right:3px;
}

/* 数字だけは完全な正円に寄せる（幅が1～2桁想定） */
.contents_ .navipage_ a:matches(:not([rel])):not(.navipage_now_){
  width:36px; padding:0;
}

/* ホバー */
.contents_ .navipage_ a:hover{
  transform:translateY(-1px);
  border-color:#d8dee6;
  box-shadow:0 6px 16px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.8);
}

/* 現在ページ（塗りつぶしの丸） */
.contents_ .navipage_ .navipage_now_{
  min-width:36px; height:36px; padding:0;
  background:#2fad83; color:#fff; border-color:#2fad83;
  box-shadow:0 8px 18px rgba(47,173,131,.32);
  font-weight:700;
}

/* 「最初」「前」「次」「最後」はアイコン感を少し強めに */
.contents_ .navipage_ .navipage_forward_ a,
.contents_ .navipage_ a[rel="prev"],
.contents_ .navipage_ a[rel="next"]{
  font-weight:600;
}

/* モバイル調整 */
@media (max-width:768px){
  .contents_ .navipage_{ justify-content:center; gap:8px; font-size:.9rem; }
  .contents_ .navipage_ a, .contents_ .navipage_ .navipage_now_{ min-width:34px; height:34px; }
  .contents_ .navipage_ a:matches(:not([rel])):not(.navipage_now_){ width:34px; }
}


/* =========================================================
   商品グリッド（.StyleP_*）— .contents_ 内だけ / CSSのみ
   Apple風・丸み・コンパクト・影弱め
   ========================================================= */


/* 段ブロックをグリッド化（行単位削除） */
.mainframe_ .StyleP_Frame_ {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  /*border: 1px solid #e5e5e7;*/
}
.mainframe_ .StyleP_Line_ { display: contents !important; }

/* 商品カード */
.block-goods-gallery li figure
 {
    display: contents!important;
		
}
		
.mainframe_ .StyleP_Item_ {
  text-align: center;
  /*padding: 56px 24px 48px;*/
  border: 1px solid #e5e5e7;
	    text-align: -webkit-center;

  /*background: #fff;*/
  transition: all 0.25s ease;
}
.mainframe_ .StyleP_Item_:nth-child(3n+1) {
}
.mainframe_ .StyleP_Item_:hover {
  background: #fff;
  transform: translateY(-3px);
}

.g_price_ .price_ {display: block;}


/* 画像 */
.mainframe_ .StyleP_Item_ .img_ {
  margin: 0 auto 24px;
	float: none;
	margin-bottom:10px;
}
.mainframe_ .StyleP_Item_ .img_ img {
  display: block;
  margin: 10px auto;
  max-width: 420px;
  width: 80%;
  height: auto;
  background: #f5f5f7;
  border-radius: 8px;
	border:2px solid #fafaf8;
}

div.StyleP_Item_ div.desc_ {
        /* margin: auto; */
    /* float: left; */
    display: inline-block;
    width: 100%;
    /*margin-top: 20px;*/
	padding:11px;
}
div.StyleP_Item_ div.desc_ .name_ {
	max-height:45px;
	overflow:hidden;
	
	
}
div.StyleP_Item_ div.desc_ .comment_{display:none;}


/* メーカー名 */
.mainframe_ .StyleP_Item_ .block-goods-maker {
  margin: 0 0 6px;
  font-size: 12px;
  color: #6e6e73;
}

/* 商品名 */
.mainframe_ .StyleP_Item_ .name1_ a {
  display: block;
  text-decoration: none !important;
  color: #1d1d1f;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 auto 10px;
  max-width: 90%;
  word-break: break-word;
}
.mainframe_ .StyleP_Item_ .name1_ a:hover {
  color: #0071e3;
}

/* 価格 */
.mainframe_ .StyleP_Item_ .g_price_ {
  margin-top: 6px;
  color: #6e6e73;

}
.mainframe_ .StyleP_Item_ .g_price_ .large_ {
  
}
.mainframe_ .StyleP_Item_ .g_price_ .large_:nth-child(2){
}
/* 不要要素非表示 */
.mainframe_ .cart_,
.mainframe_ .navistyle_,
.mainframe_ .navisort_,
.mainframe_ .navipage_,
.mainframe_ .icon_,
.mainframe_ .comment_ {
  /*display: none !important;*/
}
.mainframe_ .cart_ {
margin-top: 20px;
}
/* スマホ対応 */
@media (max-width: 960px) {
  .mainframe_ .StyleP_Frame_ {
    grid-template-columns: repeat(2, 1fr);
  }
  .mainframe_ .StyleP_Item_:nth-child(3n+1) { border-left: 1px solid #e5e5e7; }
  .mainframe_ .StyleP_Item_:nth-child(2n+1) { border-left: none; }
}
@media (max-width: 560px) {
  .mainframe_ .StyleP_Frame_ {
    grid-template-columns: 1fr;
  }
  .mainframe_ .StyleP_Item_ {
    border-left: none;
  }
}
div.StyleP_Item_ {
    
    width: 100%!important;
}

/* =========================================================
   価格表示（.g_price_）読みやすく・シンプルで上品に
   ========================================================= */

/* 税抜価格を消す */
.contents_ .StyleP_Item_ .g_price_ .price_:first-child {
  display: none !important;
}

/* ベース配置 */
.contents_ .StyleP_Item_ .g_price_ {
  display: block;
  margin-top: 6px;
  padding: 6px 0;
  text-align: center;
  line-height: 1.3;
}

/* 税込価格メイン表示 */
.contents_ .StyleP_Item_ .g_price_ .price_:last-child {
  display: inline-block;
  color: #111; 
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

/* 「（税込）」をやや控えめに */
.contents_ .StyleP_Item_ .g_price_ .price_:last-child .small_ {
  font-size: 0.9rem;
  color: #666;
  margin-left: 4px;
  font-weight: 500;
}

/* 円マークや桁区切りを整える */
.contents_ .StyleP_Item_ .g_price_ .price_:last-child .large_ {
  font-size: 2rem;
  font-weight: 900;
  color: #ff9500; /* ブランドグリーンで印象付け */
}

/* 上下に仕切りを入れたい場合（任意） */
.contents_ .StyleP_Item_ .g_price_::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #f1f3f5;
  margin-bottom: 4px;
}
.contents_ .StyleP_Item_ .g_price_::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #f1f3f5;
  margin-top: 6px;
  opacity: 0.4;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .contents_ .StyleP_Item_ .g_price_ .price_:last-child {
    font-size: 1.1rem;
  }
  .contents_ .StyleP_Item_ .g_price_ .price_:last-child .large_ {
    font-size: 1.25rem;
  }
}


/* =========================================================
   購入ボタン（オレンジ系グラデVer.）
   ========================================================= */

/* 既存の画像ボタンを非表示 */
.contents_ .StyleP_Item_ .cart_ img {
  display: none !important;
}

/* ボタン本体 */
.contents_ .StyleP_Item_ .cart_ a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 44px;
  border-radius: 999px;
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(135deg, #ff9500, #ffb347);
  box-shadow: 0 8px 18px rgba(255,149,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

/* 「購入する」文字を追加表示 */
.contents_ .StyleP_Item_ .cart_ a::after {
  content: "購入する";
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  font-family: system-ui, -apple-system, "Noto Sans JP", "Meiryo", sans-serif;
  z-index: 1;
}

/* カートアイコン（SVG） */
.contents_ .StyleP_Item_ .cart_ a::before {
  content: "";
  position: absolute;
  left: 18px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 18a2 2 0 1 0 .001 3.999A2 2 0 0 0 7 18m10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18M6.211 6l.824 2H20a1 1 0 0 1 .98 1.197l-1.2 6A2 2 0 0 1 17.816 17H8.184a2 2 0 0 1-1.964-1.803L4.04 3H2V1h3a1 1 0 0 1 .964.735L6.21 6z'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: 0.95;
  z-index: 1;
}

/* hover時（ふわっと明るく） */
.contents_ .StyleP_Item_ .cart_ a:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 12px 26px rgba(255,149,0,0.45);
}

/* 押下時（沈む） */
.contents_ .StyleP_Item_ .cart_ a:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(255,149,0,0.3);
}

/* 光沢アニメーション */
.contents_ .StyleP_Item_ .cart_ a::after {
  position: relative;
  text-shadow: none;
}
.contents_ .StyleP_Item_ .cart_ a:hover::after {
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
}

/* モバイル調整 */
@media (max-width:768px){
  .contents_ .StyleP_Item_ .cart_ a {
    height:46px;
  }
  .contents_ .StyleP_Item_ .cart_ a::after {
    font-size:1rem;
  }
  .contents_ .StyleP_Item_ .cart_ a::before {
    left:16px;
    width:18px;
    height:18px;
  }
}





/* =========================================================
   パンくずリスト（.navitopicpath_）完全版
   シンプル・上品・モダンデザイン
   ========================================================= */
.contents_ .navitopicpath_ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: system-ui, -apple-system, "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 0.9rem;
  color: #555;
  margin: 12px 0 20px;
  line-height: 1.6;
}

/* 各リンク */
.contents_ .navitopicpath_ a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #0066cc;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* ホバー時：軽いトーンアップ */
.contents_ .navitopicpath_ a:hover {
  color: #ff9500; /* オレンジ系（購入ボタンと統一） */
}

/* 区切り「>」の見た目調整 */
.contents_ .navitopicpath_ > * {
  display: inline-flex;
  align-items: center;
}
.contents_ .navitopicpath_ > * + *::before {
  content: "›";
  font-size: 0.9rem;
  color: #bbb;
  margin: 0 6px;
  transform: translateY(-1px);
}

/* ホームアイコン（SVG）を自動追加 */
.contents_ .navitopicpath_ .topicpath_home_::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff9500' d='M12 3L2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: 0.9;
  /*transform: translateY(1px);*/
}

/* 現在ページの最後（リンクなしの場合） */
.contents_ .navitopicpath_ span,
.contents_ .navitopicpath_ a:last-of-type {
  color: #222;
  font-weight: 600;
}

/* モバイル：折返し時の行間を広めに */
@media (max-width: 768px) {
  .contents_ .navitopicpath_ {
    font-size: 0.85rem;
    gap: 4px;
    line-height: 1.8;
  }
  .contents_ .navitopicpath_ > * + *::before {
    margin: 0 4px;
  }
}



/* =========================================================
   商品詳細 .goodsproductdetail_：モダン＆上品オレンジ統一
   - CSSのみ / .contents_ 内だけに限定
   - 丸み・影・細線・余白で“しっとり上品”
   - 既存の画像送信ボタンは透明化してクリック領域を保持
   ========================================================= */

/* レイアウト骨格 */
.contents_ .goodsproductdetail_{
  --accent:#ff9500;         /* アクセント（購入・強調） */
  --ink:#222;               /* 本文色 */
  --muted:#6b7280;          /* 補助文字 */
  --line:#ececec;           /* 線 */
  --card:#fff;              /* カード背景 */
  --soft:#fafafa;           /* 薄背景 */

  display:grid;
  grid-template-columns: minmax(320px,420px) 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items:start;
  padding: clamp(16px, 2.2vw, 28px) 0;
  color:var(--ink);
  font-family: system-ui, -apple-system, "Noto Sans JP", "Meiryo", sans-serif;
  
}

/* ---------- 左：ギャラリー ---------- */
.contents_ .goodsproductdetail_ .goodsimg_{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.contents_ .goodsproductdetail_ .goodsimg_ img{
  width:100%; height:auto; display:block;
  transition:transform .35s ease;
}
.contents_ .goodsproductdetail_ .goodsimg_:hover img{
  transform:scale(1.02);
}

/* bxsliderの高さは自動に（固定値で切れがち対策） */
.contents_ .goodsproductdetail_ .bx-viewport{ height:auto !important; }

/* サムネイル（〇系リング） */
.contents_ .goodsproductdetail_ .etc_goodsimg_{
  padding:10px; display:flex; justify-content:center; gap:10px;
  background:linear-gradient(#fff, #fdfdfd);
  border-top:1px solid var(--line);
}
.contents_ .goodsproductdetail_ .etc_goodsimg_ img{
  width:100%; height:auto; object-fit:cover;
  /*border-radius:14px;
  outline:2px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:outline-color .2s ease, transform .2s ease;*/
}
.contents_ .goodsproductdetail_ .etc_goodsimg_ a.active img,
.contents_ .goodsproductdetail_ .etc_goodsimg_ img:hover{
  /*outline-color:var(--accent);
  transform:translateY(-1px);*/
}

/* ---------- 右：スペックカード ---------- */
.contents_ .goodsproductdetail_ .goodsspec_{
  display:grid;
  gap:16px;
	width:100%;
}

/* テーブルをカード調に */
.contents_ .goodsproductdetail_ table.formdetail_{
  width:100%;
	display: inline-table;
  border-collapse:separate;
  border-spacing:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}
.contents_ .goodsproductdetail_ table.formdetail_ th,
.contents_ .goodsproductdetail_ table.formdetail_ td{
  padding:12px 14px;
  font-size:.95rem;
  border-bottom:1px solid #f0f0f0;
	
    width: 150px;
}
.contents_ .goodsproductdetail_ table.formdetail_ tr:last-child th,
.contents_ .goodsproductdetail_ table.formdetail_ tr:last-child td{ border-bottom:none; }

.contents_ .goodsproductdetail_ table.formdetail_ th{
  width:28%;
  color:#444;
  background:linear-gradient(180deg, #fcfcfc, #f8f8f8);
  font-weight:700;
}

/* ---------- 価格（“税込”だけを強調） ---------- */
.contents_ #spec_price{ padding:4px 0; }
.contents_ #spec_price > div{ display:flex; gap:10px; align-items:baseline; }
 /* .contents_ #spec_price .price_:first-child{ display:none !important; }税抜 隠す */

/* =========================================================
   価格表示：1番目の税抜だけ非表示（2番目＝税込は残す）
   ========================================================= */

/* 1つ目のdiv内の.price_だけ消す */
.contents_ #spec_price > div:first-of-type .price_ {
  display: none !important;
}

/* 税込価格はしっかり表示 */
.contents_ #spec_price > div:last-of-type .price_ {
  display: inline-block;
  color: #ff9500;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

/* 桁・単位を整える */
.contents_ #spec_price > div:last-of-type .large_ {
  font-size: 1.4rem;
  font-weight: 900;
  margin-left: 2px;
}
.contents_ #spec_price > div:last-of-type .small_ {
  font-size: 0.9rem;
  color: #666;
  margin-left: 6px;
}

/* 行間・余白の最小化 */
.contents_ #spec_price {
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
.contents_ #spec_price > div {
  margin: 0;
  padding: 0;
}

/* テーブルと揃える */
.contents_ .goodsproductdetail_ table.formdetail_ td#spec_price {
  padding: 5px 10px;
  vertical-align: middle;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .contents_ #spec_price > div:last-of-type .price_ {
    font-size: 1.15rem;
  }
  .contents_ #spec_price > div:last-of-type .large_ {
    font-size: 1.3rem;
  }
}




.contents_ #spec_price .price_:last-child{
  color:var(--accent);
  font-weight:800;
  font-size: clamp(1.15rem, 1.2rem + .4vw, 1.5rem);
  letter-spacing:.02em;
}
.contents_ #spec_price .price_:last-child .small_{
  color:var(--muted);
  font-size:.9rem;
  margin-left:6px;
}

/* 在庫 ○ をチップ化（視認性UP） */
.contents_ #spec_postage{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; color:#0f8a00;
}


/* セレクト（保証など）を上品に */
.contents_ .goodsproductdetail_ select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
 max-width: 280px;
	/*width:min(320px,100%)!important;*/
  padding:10px 38px 10px 12px;
  border:1px solid #d8d8d8;
  border-radius:12px;
	
  /*background:
    linear-gradient(#fff,#fefefe) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 14px;*/
  transition:border-color .2s ease, box-shadow .2s ease;
  font-size:12px;
}
.contents_ .goodsproductdetail_ select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,149,0,.15);
  outline:none;
}

/* 「詳細」リンクをチップ風 */
.contents_ .goodsproductdetail_ .ServiceGroupDetail{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  text-decoration:none;
  color:var(--accent); background:#fff6e9;
  border:1px solid #ffe1ba;
  font-weight:700; font-size:.85rem;
  transition:filter .2s ease, transform .2s ease;
	
}
.contents_ .goodsproductdetail_ .ServiceGroupDetail:hover{
  filter:brightness(1.03); transform:translateY(-1px);
}

/* ---------- 購入ブロック（丸くて上品） ---------- */
.contents_ .goodsproductdetail_ .cartbox_{
  position:relative;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  /* background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
 
 box-shadow:0 10px 30px rgba(0,0,0,.04);*/
	padding:14px;
}

/* 既存の画像ボタンを“透明のまま全面クリック要素”にする */
.contents_ .goodsproductdetail_ .btn_cart_{
  appearance:none; border:none; outline:none;
  position:relative; z-index:2; /* 最前面でクリックを拾う */
  width:100%; max-width:280px; height:48px;
  opacity:0; cursor:pointer; display:block;
}

/* 見た目のボタン（下地） */
.contents_ .goodsproductdetail_ .cartbox_::before{
  content:"";
  position:absolute; left:14px; top:14px; right:auto;
  width:calc(min(280px, 100% - 28px));
  height:48px; border-radius:999px;
  background:linear-gradient(135deg, var(--accent), #ffb347);
  box-shadow:0 12px 28px rgba(255,149,0,.35);
}

/* テキスト＋アイコン（重ねて表示） */
.contents_ .goodsproductdetail_ .cartbox_::after{
  content:"購入する";
  position:absolute; left:14px; top:14px;
  width:calc(min(280px, 100% - 28px));
  height:48px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; letter-spacing:.05em; font-size:1rem;
  pointer-events:none;
}
.contents_ .goodsproductdetail_ .cartbox_{
  transition:transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.contents_ .goodsproductdetail_ .cartbox_:hover{
  filter:brightness(1.04);
}
.contents_ .goodsproductdetail_ .cartbox_:active{
  transform:translateY(0); box-shadow:none;
}

/* 追加メモ等が下に来ても整うよう微調整 */
.contents_ .goodsproductdetail_ .cartbox_ #agree_2564600008920{ width:100%; }

/* ---------- 商品コメント＆外部詳細 ---------- */
.contents_ .goodsproductdetail_ .goodscomment1_{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  color:#444; font-size:.95rem; line-height:1.8;
}
.contents_ .goodsproductdetail_ .to_detaillink_{ margin-top:4px; text-align:left;}
.contents_ .goodsproductdetail_ .to_detaillink_ a{
  text-decoration:none; font-weight:800; color:var(--accent);
  padding:8px 12px; border-radius:999px; background:#fff6e9; border:1px solid #ffe1ba;
  transition:filter .2s ease, transform .2s ease;
	display: inline-flex;
}
.contents_ .goodsproductdetail_ .to_detaillink_ a:hover{
  filter:brightness(1.03); transform:translateY(-1px);
}

/* ---------- モバイル ---------- */
@media (max-width: 960px){
  .contents_ .goodsproductdetail_{ grid-template-columns: 1fr; }
  .contents_ .goodsproductdetail_ .cartbox_::before,
  .contents_ .goodsproductdetail_ .cartbox_::after,
  .contents_ .goodsproductdetail_ .btn_cart_{
    left:12px; width:calc(100% - 24px);
  }
}


/* =========================================================
   オプションボタン群（お気に入り／問い合わせ）
   ========================================================= */

.contents_ .option_buttons_ {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
	width:auto;
}

/* 各ボタン */
.contents_ .option_buttons_ li {
  flex: 1 1 auto;
  max-width: 200px;
	    padding-top: 10px;
}

/* リンク全体をボタン化 */
.contents_ .option_buttons_ li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  width: 100%;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  background: #f9f9f9;
  border: 1px solid #ddd;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  overflow: hidden;
}

/* ホバー時 */
.contents_ .option_buttons_ li a:hover {
  background: #fff7f0;
  border-color: #ff9500;
  color: #ff9500;
  box-shadow: 0 6px 16px rgba(255,149,0,0.2);
  transform: translateY(-2px);
}

/* 画像非表示（テキストで置換） */
.contents_ .option_buttons_ li a img {
  display: none !important;
}

/* 擬似要素でアイコン追加 */
.contents_ .option_buttons_ li:first-child a::before {
  content: "★";
  color: #ff9500;
  font-size: 1.1rem;
}
.contents_ .option_buttons_ li:last-child a::before {
  content: "✉";
  color: #ff9500;
  font-size: 1rem;
}

/* 擬似要素でラベル挿入 */
.contents_ .option_buttons_ li:first-child a::after {
  content: "お気に入りに追加";
}
.contents_ .option_buttons_ li:last-child a::after {
  content: "商品について問い合わせ";
}

/* モバイル時：縦並び */
@media (max-width: 768px) {
  .contents_ .option_buttons_ {
    flex-direction: column;
    gap: 10px;
  }
  .contents_ .option_buttons_ li a {
    font-size: 1rem;
    height: 46px;
  }
}

/* =========================================================
   商品詳細ブロック全体を中央寄せ
   ========================================================= */
.contents_ .goodsproductdetail_ {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  justify-content: center;        /* ✅ 中央寄せの要（左右センター配置） */
  align-items: start;
  gap: clamp(20px, 4vw, 44px);
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;              /* 全体幅を制御 */
}

/* モバイル時：縦並びでも中央寄せ維持 */
@media (max-width: 768px) {
  .contents_ .goodsproductdetail_ {
    grid-template-columns: 1fr;
    justify-items: center;        /* ✅ 子要素も中央寄せ */
  }
  .contents_ .goodsproductdetail_ .goodsspec_ {
    width: 100%;
    max-width: 500px;
  }
}
/* =========================================================
   外部リンクマーク付き「詳細情報」リンク（→非表示）
   ========================================================= */
/* =========================================================
   外部リンク「詳細情報」ボタン（→除去＆↗アイコン）
   対象: .contents_ .to_detaillink_ a
   HTMLは  →詳細情報  のままでOK
   ========================================================= */

/* 1) 見た目（オレンジ系ピルボタン） */
.contents_ .to_detaillink_ a{
  position: relative;
  display: inline-flex;        /* 並びの安定用 */
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  background: #fff6e9;
  border: 1px solid #ffe1ba;
  box-shadow: 0 2px 8px rgba(255,149,0,0.10);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* 2) ホバー */
.contents_ .to_detaillink_ a:hover{
  background: #fff3dd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,149,0,0.25);
}

/* 3) 元テキスト（→詳細情報）を非表示にし、擬似要素で描画し直す */
.contents_ .to_detaillink_ a{
  color: transparent !important;  /* 元の文字を消す（→含む全部） */
  font-size: 0 !important;        /* レイアウト崩しを避けつつ確実に不可視化 */
  letter-spacing: 0 !important;
  white-space: nowrap;
}

/* 4) 表示したい文字を ::before で再描画（“詳細情報”） */
.contents_ .to_detaillink_ a::before{
  content: "詳細情報";
  font-size: 1rem;                /* ここで見た目用フォントを復活 */
  color: #ff9500;
  line-height: 1;
}

/* 5) 外部リンクアイコン（↗） */
.contents_ .to_detaillink_ a::after{
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff9500' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h5V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2v5H5V5z'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform .2s ease;
}
.contents_ .to_detaillink_ a:hover::after{
  transform: translateY(-1px) translateX(1px);
}

/* 6) 余白微調整（必要なら） */
.contents_ .to_detaillink_{
  margin-top: 10px;
}


/* =========================================================
   商品補足コメント（.goodscomment2_）オシャレ仕様
   ========================================================= */
.contents_ .goodscomment2_ {
  background: #fffdf8;                        /* ほんのりアイボリーで温かみ */
  border: 1px solid #f3e5c0;                  /* 柔らかいベージュの線 */
  border-radius: 12px;                        /* 角丸 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);     /* ふんわり影 */
  padding: 16px 20px;
  margin: 20px 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
}

/* タイトル部分（メーカー注意など）が入る場合 */
.contents_ .goodscomment2_ strong,
.contents_ .goodscomment2_ b {
  color: #ff9500;
  font-weight: 700;
}

/* サイズ・重量などの単語を見やすく（自動強調） */
.contents_ .goodscomment2_ br + span,
.contents_ .goodscomment2_ br + * {
  display: inline-block;
  margin-top: 4px;
}

/* 「mm」「kg」「cm」などの単位を強調 */
.contents_ .goodscomment2_ {
  font-feature-settings: "palt";
}
.contents_ .goodscomment2_ br {
  content: "";
  display: block;
  margin-top: 4px;
}

/* 最終行の注意書きを少しトーンダウン */
.contents_ .goodscomment2_::after {
  content: " ";
}
.contents_ .goodscomment2_ {
  text-align: left;
}
.contents_ .goodscomment2_ br:last-of-type + * {
  opacity: 0.8;
  font-size: 0.9rem;
}

/* スマホ時：やや余白を詰める */
@media (max-width: 768px) {
  .contents_ .goodscomment2_ {
    padding: 14px 16px;
    font-size: 0.92rem;
  }
}

.contents_ .goodscomment2_ img {margin:5px auto!important;}

.contents_ .goodscomment2_ .youtube {margin:5px auto!important;display: table;}
/* =========================================================
   安心取付サービス注意文（font[color="red"]）オシャレ化
   ========================================================= */

/* ベースカード（赤文字ブロック全体） */
.contents_ font[color="red"] {
  display: block;
  background: #fff3f2;                 /* 柔らかいサーモンピンク */
  border-left: 5px solid #ff6b5e;      /* 左ライン強調 */
  border-radius: 10px;
  padding: 14px 18px;
  margin: 20px 0;
  color: #d93025;                      /* 濃いめのレッド */
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.75;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* 冒頭の注意マークアイコン */
.contents_ font[color="red"]::before {
  content: "⚠️";
  margin-right: 8px;
  font-size: 1rem;
  vertical-align: -1px;
}

/* 改行の余白を調整してスッキリ */
.contents_ font[color="red"] br {
  margin-bottom: 4px;
}

/* 末尾の空行を抑える */
.contents_ font[color="red"] br:last-child {
  display: none;
}

/* モバイル最適化 */
@media (max-width: 768px) {
  .contents_ font[color="red"] {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
}


/* ================================
   パンくず：スクショと同じフラット様式
   HTMLは <div class="navitopicpath_">…&gt;…&gt;…</div> のままでOK
   ================================ */
.customer_ col1_ {}
.navitopicpath_{
  /* もともとの &gt; を不可視化（リンクは後でサイズを戻す） */
  font-size: 0;
  color: #111827;
  margin: 8px 0 14px;
  line-height: 1;
}

/* リンクの見た目（青文字・下線なし） */
.navitopicpath_ a{
  font-size: 14px;                 /* ここでサイズを復活 */
  color: #2563eb;                  /* スクショの青 */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* ホバーでうっすら下線 */
.navitopicpath_ a:hover{
  text-decoration: underline;
}

/* 区切り（a の直前に "›" を生成） */
.navitopicpath_ a + a::before{
  content: "›";
  font-size: 14px;
  color: #cbd5e1;                  /* 薄いグレーのセパレーター */
  margin: 0 8px;                   /* スクショ程度の間隔 */
}

/* 先頭（ホーム）に家アイコン */
.navitopicpath_ .topicpath_home_{
  position: relative;
  padding-left: 16px;              /* アイコン分の余白 */
}
.navitopicpath_ .topicpath_home_::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 12px;
  transform: translateY(-45%);
  background: no-repeat center / 100% 100% url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='%23f59e0b' d='M12 3 3 11h2v9h5v-6h4v6h5v-9h2z'/>\
</svg>");
}

/* 最後の項目を“現在地”表現（黒文字・クリック不可） */
.navitopicpath_ a:last-of-type{
  color: #111827;
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

/* 行折返し時にも見やすく（モバイル配慮） */
@media (max-width: 480px){
  .navitopicpath_ a{ font-size: 13px; }
  .navitopicpath_ a + a::before{ margin: 0 6px; }
}


















/* =========================================================
   注文主（method_sender_） 見やすさ改善 + CSSだけで開閉
   ========================================================= */

/* 外枠 */
.method_sender_{
  --brand:#00a86b;
  --ink:#1f2937;
  --muted:#64748b;
  --line:#e6efe9;
  --bg:#fff;

  max-width: 1100px;
  margin: 24px auto;
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  color: var(--ink);
  box-sizing: border-box;
}

/* 上部ヘッダ */
.method_sender_ .headline_{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px;
}
.method_sender_ .headline_title_{
  font-weight:800; color:var(--brand); min-width:84px;
}
.method_sender_ .headline_contents_{ flex:1; line-height:1.7; }
.method_sender_ .saler_{ font-weight:700; }

/* チェックと注釈 */
.method_sender_ #chkself{ accent-color:var(--brand); transform:scale(1.06); }
.method_sender_ label[for="chkself"]{ margin-left:4px; font-weight:700; color:var(--brand); }
.method_sender_ .headline_contents_ > span{ margin-left:8px; font-size:.9rem; color:var(--muted); }

/* 区切り線 */
.method_sender_ .bar_{ height:1px; background:linear-gradient(90deg,var(--brand),#dff3ec); margin:12px 0; }

/* ===== CSSだけで開閉（:has） ===== */
.method_sender_ #sender_form{ display:none; }
.method_sender_:has(#chkself:checked) #sender_form{ display:block; animation:fadeIn .18s ease-out; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-2px)} to{opacity:1; transform:none} }

/* テーブル体裁 */
.method_sender_ table.formdetail_{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:8px;
}
.method_sender_ table.formdetail_ th,
.method_sender_ table.formdetail_ td{
  padding:10px 12px; border-bottom:1px solid #f1f4f3; vertical-align:top;
}
.method_sender_ table.formdetail_ th{
  width:230px; background:#f8faf9; color:#0f172a; font-weight:700;
  border-right:1px solid var(--line);
}
.method_sender_ table.formdetail_ td{ background:#fff; }

/* 入力部 */
.method_sender_ input[type="text"],
.method_sender_ select{
  border:1px solid #d7e6e0; border-radius:8px; padding:7px 10px;
  font-size:.95rem; background:#fff; color:var(--ink); box-sizing:border-box;
  transition:box-shadow .15s,border-color .15s;
}
.method_sender_ input[type="text"]:focus,
.method_sender_ select:focus{
  outline:0; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* セレクトの矢印（上書き） */
.method_sender_ select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300a86b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center; background-size:18px 18px; padding-right:30px;
}

/* 補足テキスト・必須アイコン */
.method_sender_ .small_{ font-size:.85rem; color:var(--muted); margin-left:4px; }
.method_sender_ .must_{ width:12px; height:12px; margin-right:4px; vertical-align:-2px; }

/* よく使う幅（見切れ防止） */
.method_sender_ input[name="s_tel"],
.method_sender_ input[name="s_zip"]{ width:160px; }
.method_sender_ input[name="s_name"],
.method_sender_ input[name="s_name2"],
.method_sender_ input[name="s_kana"],
.method_sender_ input[name="s_kana2"]{ width:180px; }
.method_sender_ input[name="s_addr"],
.method_sender_ input[name="s_addr2"],
.method_sender_ input[name="s_addr3"],
.method_sender_ input[name="s_comp"],
.method_sender_ input[name="s_dept"]{ width: min(520px, 100%); }

/* スマホ最適化 */
@media (max-width: 768px){
  .method_sender_{ padding:16px; }
  .method_sender_ table.formdetail_ th{ width:100%; display:block; border-right:none; border-radius:6px 6px 0 0; }
  .method_sender_ table.formdetail_ td{ display:block; border-radius:0 0 6px 6px; }
  .method_sender_ input[type="text"], .method_sender_ select{ width:100% !important; }
}

/* ダークモード */


/* ===== お気に入り：下部ボタンを今風ピルに（CSSのみ） ===== */

/* 余計な枠・背景をなくして画像ボタンだけを活かす */
.bookmark_buy_{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin:22px 0;
}
.bookmark_buy_ input[type="image"]{
  /* 古い枠の完全無効化 */
  border:none !important;
  background:transparent !important;
  padding:0 !important;

  /* ピル型＆リッチな影 */
  border-radius:999px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 8px 18px rgba(0,0,0,.16);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  vertical-align:middle;
  display:inline-block;
}
.bookmark_buy_ input[type="image"]:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 12px 26px rgba(0,0,0,.20);
  filter: saturate(1.05) brightness(1.02);
}
.bookmark_buy_ input[type="image"]:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 rgba(0,0,0,0),
    0 6px 14px rgba(0,0,0,.18);
  filter: brightness(.98);
}
.bookmark_buy_ input[type="image"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #ff8a00 35%, transparent),
    0 10px 24px rgba(0,0,0,.20);
}

/* =========================================================
   戻るボタン（購入ボタンと統一デザイン）
   ========================================================= */
.submit_{
  display:flex;
  justify-content:center;
  margin:28px 0;
}

.submit_ a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb84d, #f59e0b);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(245,158,11,.35);
  transition: all 0.25s ease;
  overflow: hidden;
}

/* imgを非表示 */
.submit_ a img {
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 擬似要素で“戻る”を表示 */
.submit_ a::after {
  content: "戻る";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*color: #fff;*/
  font-weight: 700;
  font-size: 16px;
}

/* hover効果 */
.submit_ a:hover {
  background: linear-gradient(180deg,#ffc566,#f6ad2a);
  box-shadow: 0 10px 20px rgba(245,158,11,.45);
  transform: translateY(-2px);
}
.submit_ a:active {
  background: linear-gradient(180deg,#f6ad2a,#e59300);
  transform: none;
  box-shadow: 0 4px 10px rgba(245,158,11,.3);
}

/* スマホ対応 */
@media (max-width:640px){
  .submit_ a {
    min-width: 140px;
    height: 44px;
    font-size: 14px;
  }
  .submit_ a::after {
    font-size: 14px;
  }
}
/* =========================================================
   削除ボタン：✕アイコンのみで綺麗に右上固定
   ========================================================= */
/* ================= 最終安定版：削除✕はCSSだけで見た目、クリックは既存imgに通す ================= */

/* 1) 右上固定（親は相対位置） */
.bookmark_item_ .del_{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  z-index:10 !important;
}
.bookmark_item_ .del_ a{
  position:relative !important;
  display:inline-block !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,#ef4444,#dc2626) !important;
  box-shadow:0 3px 8px rgba(220,38,38,.35) !important;
  overflow:hidden !important;
  transform:translateZ(0); /* レイヤー化でヒット安定 */
}

/* 2) 透明imgを“全面クリック層”にする（絶対に display:none/visibility:hidden にしない） */
.bookmark_item_ .del_ a > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0.001 !important;          /* 一部ブラウザで opacity:0 を無視する対策 */
  filter:alpha(opacity=1) !important; /* 旧IE対策（害なし） */
  pointer-events:auto !important;     /* クリックを必ずimgが受ける */
  display:block !important;
}

/* 3) 見た目の“✕”は疑似要素で被せる（クリックは通す） */
.bookmark_item_ .del_ a::before{
  content:"✕" !important;
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:18px !important;
  line-height:1 !important;
  pointer-events:none !important;  /* ここが超重要：見た目は反応しない */
}

/* 4) ホバー/アクティブ演出（任意） */
.bookmark_item_ .del_ a:hover{ transform:translateY(-1px); }
.bookmark_item_ .del_ a:active{ transform:translateY(0); }

/* 5) “戻る”画像ボタンをテキスト化（リンクはそのまま、見た目のみ差し替え） */
.submit_{ display:flex; justify-content:center; margin:28px 0; }
.submit_ a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:160px; height:48px; border-radius:999px;
  background:linear-gradient(180deg,#ffb84d,#f59e0b);
  color:#fff; font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgba(245,158,11,.35);
}
.submit_ a > img{ opacity:0 !important; width:0 !important; height:0 !important; pointer-events:none !important; }
.submit_ a::after{
  content:"戻る"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700;
}
/* ====== お気に入り：削除アニメ ====== */
.bookmark_item_.is-removing{
  animation: bm-fade-out .22s ease forwards;
}
@keyframes bm-fade-out{
  to { opacity:.0; transform: translateY(-4px) scale(.98); height:0; margin:0; padding:0; }
}

/* ====== 下部ボタン（画像ボタンを今風ピル風に） ====== */
.bookmark_buy_{
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:22px 0;
}
.bookmark_buy_ input[type="image"]{
  border:none !important; background:transparent !important; padding:0 !important;
  border-radius:999px !important;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  transition: transform .15s, box-shadow .15s, filter .15s;
  vertical-align:middle; display:inline-block;
}
.bookmark_buy_ input[type="image"]:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.20);
  filter: saturate(1.05) brightness(1.02);
}
.bookmark_buy_ input[type="image"]:active{
  transform: translateY(0);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  filter: brightness(.98);
}

/* ====== 戻る（画像を隠し、テキストを擬似要素で表示） ====== */
.submit_{ display:flex; justify-content:center; margin:28px 0; }
.submit_ a{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:160px; height:48px; border-radius:999px;
  background:linear-gradient(180deg,#ffb84d,#f59e0b);
  color:#fff; font-weight:700; font-size:16px; text-decoration:none;
  box-shadow:0 6px 16px rgba(245,158,11,.35);
  transition: all .25s ease; overflow:hidden;
}
.submit_ a img{ opacity:0; width:0; height:0; visibility:hidden; pointer-events:none; }
.submit_ a::after{ content:"戻る"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.submit_ a:hover{ background:linear-gradient(180deg,#ffc566,#f6ad2a); box-shadow:0 10px 20px rgba(245,158,11,.45); transform:translateY(-2px); }
.submit_ a:active{ background:linear-gradient(180deg,#f6ad2a,#e59300); transform:none; box-shadow:0 4px 10px rgba(245,158,11,.3); }

/* ====== 右上の削除ボタンを✕に置換（画像は非表示） ====== */
.bookmark_item_ .del_{ position:absolute; top:10px; right:10px; z-index:2; }
.bookmark_item_ .del_ img{ display:none !important; }
.bookmark_item_ .del_ a{
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(180deg,#ef4444,#dc2626);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:17px; font-weight:bold; text-decoration:none;
  box-shadow:0 3px 8px rgba(220,38,38,.35); transition: all .15s ease;
}
.bookmark_item_ .del_ a::before{ content:"✕"; line-height:1; }
.bookmark_item_ .del_ a:hover{ transform:translateY(-1px); background:linear-gradient(180deg,#f87171,#dc2626); box-shadow:0 6px 14px rgba(220,38,38,.45); }
.bookmark_item_ .del_ a:active{ transform:none; background:linear-gradient(180deg,#dc2626,#b91c1c); }


/*お問い合わせ*/
/* ==========================================
   WATAPRO お問い合わせ - Executive Luxe
   ========================================== */

/* 基調：ダーク寄り無彩色 × 極細ライン × 微メタリック */
.contact_.col1_{
  --ink:#0f1115;          /* 本文 */
  --muted:#6d7480;        /* 補助テキスト */
  --line:#e6e8ec;         /* 罫線 */
  --brand:#00a86b;        /* アクセント（控えめに） */
  --panel:#ffffff;        /* 面色 */
  --glass:#f7f8fa80;      /* ガラス風 */
  color:var(--ink);

  max-width: 940px;
  margin: 15px auto;
  padding: 15px 35px;
  background:
    radial-gradient(1200px 700px at 20% -10%, #ffffff 0%, #fafbfc 60%, #f7f8fa 100%);
  border: 1px solid rgba(16,18,22,.06);
  border-radius: 24px;
  box-shadow:
    0 18px 60px rgba(15,17,21,.08),
    0 1px 0 rgba(255,255,255,.8) inset;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN",YuGothic,Meiryo,sans-serif;
  
  overflow: hidden;
}

.contact_.col1_ .navitopicpath_ {display:none;}


/* 天面ライン：薄いメタルライン */
.contact_.col1_::before{
  content:"";
  position:absolute; inset:0 auto auto 0;
  height:4px; width:100%;
  background:
    linear-gradient(90deg,
      #cfd6df 0%,
      #e7ebf1 22%,
      #00a86b 50%,
      #dfe5ec 78%,
      #cfd6df 100%);
  opacity:.55;
}
/* =========================================================
   .contact_ .error_：上品でおしゃれなエラーメッセージ
   ========================================================= */

.contact_ .error_ {
  display: inline-block;
  padding: 10px 18px;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #b91c1c; /* 深みのある赤（警告色） */
  background: linear-gradient(135deg, #fff5f5, #ffecec);
  border-left: 4px solid #dc2626;
  border-radius: 8px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

/* ホバー時に軽く浮かせる */
.contact_ .error_:hover {
  background: linear-gradient(135deg, #ffe5e5, #fff);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* 小さめ画面でも自然に */
@media (max-width: 640px) {
  .contact_ .error_ {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 6px;
  }
}


/* 見出し＆リード：重心低めで落ち着きを */
.contact_.col1_ h1.common_headline1_{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.2vw, 28px)!important;
  letter-spacing:.035em;
  font-weight: 800;
  color:#12151b;
	 width: auto!important;
	padding-top: 30px;
}
.contact_.col1_ .message_{
  color:var(--muted);
  font-size: 1rem;
  line-height:1.8;
  margin: 0 0 44px;
}

/* パンくずは薄く上質に */
.contact_.col1_ .navitopicpath_{
  margin-bottom: 26px;
  font-size:.86rem;
  color:#9aa2ae;
}
.contact_.col1_ .navitopicpath_ a{ color:#9aa2ae; text-decoration:none; }
.contact_.col1_ .navitopicpath_ a:hover{ color:#707988; text-decoration:underline; }

/* テーブル → カード行（髪の毛ライン＋極薄影） */
.contact_.col1_ table.formdetail_{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.contact_.col1_ table.formdetail_ tr{
  background: color-mix(in srgb, var(--panel) 92%, #fff);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px var(--line) inset,
    0 10px 24px rgba(15,17,21,.04);
}

/* 左ラベル：サテン調グラデ＋ヘアライン */
.contact_.col1_ th{
  width:30%;
  padding:14px 18px;
  text-align:left;
  font-weight:700;
  color:#1b212b;
  background:
    linear-gradient(180deg,#f4f6f8 0%,#eef1f5 100%);
  border-right:1px solid #e3e6eb;
  letter-spacing:.02em;
}

/* 右フィールド面 */
.contact_.col1_ td{
  padding:14px 18px;
  background:#fff;
}

/* 入力UI：フラット×微金属リム */
.contact_.col1_ input[type="text"],
.contact_.col1_ select,
.contact_.col1_ textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d7dbe2;
  background:
    linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
  font-size:15px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .06s ease;
  outline:none;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.contact_.col1_ input[type="text"]::placeholder,
.contact_.col1_ textarea::placeholder{ color:#9aa3af; }
.contact_.col1_ input[type="text"]:focus,
.contact_.col1_ select:focus,
.contact_.col1_ textarea:focus{
  border-color:#8dd8bf;
  box-shadow:
    0 0 0 4px rgba(0,168,107,.16),
    0 1px 0 rgba(255,255,255,.9) inset;
  background:#ffffff;
  transform: translateZ(0); /* crisp */
}
.contact_.col1_ textarea{ min-height:150px; line-height:1.6; resize:vertical; }

/* 必須アイコンは彩度低めに補正 */
.contact_.col1_ img.must_{
  transform: translateY(1px) scale(.96);
  filter: hue-rotate(115deg) saturate(1.2) brightness(1.05);
  margin-right:6px;
}

/* セレクト：メタル矢印（純CSS） */
.contact_.col1_ select{
  appearance:none;
  padding-right:44px;
  background-image:
    linear-gradient(45deg,transparent 50%, #6b7280 50%),
    linear-gradient(-45deg,transparent 50%, #6b7280 50%),
    linear-gradient(#d7dbe2,#d7dbe2);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 36px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 22px;
  background-repeat:no-repeat;
}

/* ログイン情報カード：ガラス調（対応環境で控えめぼかし） */
.contact_.col1_ .customer_status_{
  margin: 10px 0 30px;
  padding: 12px 16px;
  background: color-mix(in srgb, #e9f7f1 40%, #ffffff);
  border:1px solid #dceee6;
  border-radius:12px;
  color:#1d2330;
  backdrop-filter: blur(4px);
}

/* 送信：画像ボタンを透明化し上に“金属ボタン”を重ねて見せる */
.contact_.col1_ .submit_{
  position:relative;
  margin-top:40px;
  text-align:center;
	margin-bottom:40px;
}
.contact_.col1_ .submit_ input[type="image"]{
  opacity:0; /* クリックはこれに当てる */
  width: 300px; height: 50px;
  cursor:pointer;
  display:inline-block;
}
.contact_.col1_ .submit_::after{
/*  content:"確認して送信";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  display:inline-block;
  min-width:300px; height:50px; line-height:50px;
  padding:0 32px;
  border-radius:14px;
  font-weight:800; letter-spacing:.06em;
  color:#0b1216;*/
  /* ブラッシュドメタル + 極薄グリーン光沢 */
 /* background:
    linear-gradient(180deg,#f0f3f6 0%,#e3e7ee 100%),
    linear-gradient(135deg, rgba(0,168,107,.18), rgba(0,168,107,0) 60%);
  box-shadow:
    0 12px 28px rgba(15,17,21,.10),
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(0,0,0,.04) inset;
  border:1px solid #d5dae2;
  pointer-events:none;*/ /* クリックは透明inputへ */
}
.contact_.col1_ .submit_:hover::after{
  box-shadow:
    0 18px 38px rgba(15,17,21,.14),
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.05) inset;
  filter: saturate(1.04) contrast(1.02);
  transform: translate(-50%,-52%);
}

/* スマホ最適化：余白と視線移動を軽く */
@media (max-width: 768px){
  .contact_.col1_{ padding: 30px 22px; margin: 42px 12px; border-radius:20px; }
  .contact_.col1_ th, .contact_.col1_ td{ display:block; width:100%; border:none; }
  .contact_.col1_ th{
    background:transparent;
    padding: 10px 2px 4px;
    color:#10151d; font-weight:800;
  }
  .contact_.col1_ td{ padding: 10px 0 14px; background:transparent; box-shadow:none; }
  .contact_.col1_ table.formdetail_ tr{
    background:transparent; box-shadow:none;
    border-bottom:1px dashed var(--line); padding-bottom:12px;
  }
  .contact_.col1_ .submit_::after{ min-width:100%; }
}



/*利用規約*/

/* ========== Mono-Luxe：モノトーン×上質ミニマル ========== */
/* parent_box：ふわっと浮くカード群＋広めの余白 */
.parent_box{
  display:flex; /*gap:32px; */align-items:flex-start; justify-content:space-between;
  max-width:1045px; margin:64px auto; ;

}
.parent_box .block-mt-common.wide.block2-mt-table {padding:0!important; }
/* ===== Left：フローティング・サイドカード ===== */
.parent_box .left_block_menu{
  flex:0 0 280px; overflow:hidden; border-radius:18px;
  
}
.parent_box .left_block_menu ul,.left_block_menu li {list-style-type:none!important;}

/* 見出し（.title2 は既存クラスを活用） */
.parent_box .left_block_menu .title2{
  /*padding:14px 18px;*/ font-weight:800; letter-spacing:.01em;
  color:#0b1210;
  background:linear-gradient(180deg,#f3faf6 0%,#e8f6ef 100%);
  border-bottom:1px solid rgba(2,6,23,.06);
	font-size: 14px;
    font-weight: normal;
	
}

/* サブリンク群 */
.parent_box .left_block_menu .body{ padding: 0 16px 1px; }


.parent_box .left_block_menu .body p {
    width: 100%;
    line-height: 2em;
    text-indent: 10px;
    padding-top: 0; 
    padding-bottom:0; 
   border-bottom: none; 
}
.parent_box .left_block_menu .body a{
  display:block; padding:10px 12px; margin:6px 0;
  border-radius:12px; text-decoration:none; line-height:1.6;
  color:#111827; border:1px solid transparent; background:#fff;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.parent_box .left_block_menu .body a:hover{
  background:#f2fbf7; border-color:#bfe6d7;
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  transform:translateY(-1px);
}

/* ===== Right：本文カード（シャープ＋抜け感） ===== */
.parent_box .right_block{
  flex:1; 
	padding:0 15px; 
	border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(17,24,39,.06);
  box-shadow:0 14px 36px rgba(2,6,23,.08);
}












.parent_box .page_common_title_{
     margin: 0 0 10px;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: .035em;
    font-weight: 800;
    color: #12151b;
    width: auto !important;
    padding-top: 30px !important;
    background: none;
    padding: 0;
    font-weight: bold !important;
}

/* ===== Table：薄枠＋列強調＋行ホバー ===== */
.parent_box .block2-mt-table table{ width:100%; border-collapse:separate; border-spacing:0; }
.parent_box .block2-mt-table th,
.parent_box .block2-mt-table td{
  /*padding:14px 16px; */vertical-align:top; background:#fff;
  border:1px solid #e5e7eb;
	display: table-cell;
}
.parent_box .block2-mt-table tbody tr:nth-child(odd) td{ background:#fbfcfe; }
.parent_box .block2-mt-table tbody tr:hover td{
  background:#f2fbf6; transition:background .16s ease;
}

/* 左列リンク（章タイトル）を強調 */
.parent_box .block2-mt-table th a{
  color:#0e7a58; font-weight:normal!important;text-decoration:none; letter-spacing:.01em;
  border-bottom:2px solid transparent; transition:border-color .18s ease, color .18s ease;
}
.parent_box .block2-mt-table th a:hover{ color:#00a86b; border-color:#00a86b; }

/* 右列の小項目は “小さめのチップ” で視認性UP */
.parent_box .block2-mt-table td p{ margin:.25rem 0; }
.parent_box .block2-mt-table td p a{
  display:inline-block; margin:4px 6px 4px 0; padding:6px 10px;
  font-size:.92rem; color:#0b1210; text-decoration:none;
  background:#f7faf9; border:1px solid #e2eee9; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.parent_box .block2-mt-table td p a:hover{
  background:#eef8f3; border-color:#cfe7dd;
  box-shadow:0 4px 12px rgba(2,6,23,.06); transform:translateY(-1px);
}

/* ===== 細部：区切り/スクロールバー ===== */
.parent_box .right_block::before{
  content:""; display:block; height:1px; margin:-8px 0 24px;
  background:linear-gradient(90deg,transparent,#e7ece9,transparent);
}

.parent_box .left_block_menu::-webkit-scrollbar,
.parent_box .right_block::-webkit-scrollbar{ width:10px; height:10px; }
.parent_box .left_block_menu::-webkit-scrollbar-thumb,
.parent_box .right_block::-webkit-scrollbar-thumb{ background:#dfe6e2; border-radius:20px; }
.parent_box .left_block_menu::-webkit-scrollbar-thumb:hover,
.parent_box .right_block::-webkit-scrollbar-thumb:hover{ background:#cfdcd6; }

/* ===== Responsive ===== */
@media (max-width:1024px){
  .parent_box{ padding:32px 24px; gap:24px; }
  .parent_box .right_block{ padding:36px; }
}
@media (max-width:860px){
  .parent_box{ flex-direction:column; padding:24px 16px; border-radius:18px; }
  .parent_box .left_block_menu, .right_block{ width:100%; }
  .parent_box .right_block{ padding:28px; }
  .parent_box .page_common_title_{ font-size:1.6rem; }
}

.right_block .block-mt-h2 h2{

    margin: 0 0 10px;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: .035em;
    font-weight: 800;
    color: #12151b;
    width: auto !important;
    padding-top: 30px !important;
    background: none;
    padding: 0;
    font-weight: bold !important;

}




/*プライバシーポリシー*/


#policyContainer {
	margin: 0;
	color: #222;
  line-height: 1.8;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
}
#policyContainer:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

#policyContainer h1, #policyContainer h2, #policyContainer h3 {
  border-left: 4px solid #00a86b;
  padding-left: 12px;
 /* margin-top: 2em;*/
  color: #111;
}
#policyContainer p {
  margin-bottom: 1em;
  color: #444;
}
#policyContainer a {
  color: #00a86b;
  text-decoration: none;
  border-bottom: 1px dashed #00a86b;
}
#policyContainer a:hover {
  color: #007a4e;
  border-bottom-style: solid;
}
#policyContainer .loader {
  text-align: center;
  margin: 100px auto;
  color: #888;
  font-size: 16px;
  letter-spacing: 0.1em;
}












/* --- 特定商取引法に基づく表記 --- */






#regulation {
      --ink: #0f1115;
    --muted: #6d7480;
    --line: #e6e8ec;
    --brand: #00a86b;
    --panel: #ffffff;
    --glass: #f7f8fa80;
    color: var(--ink);
    max-width: 940px;
    margin: 15px auto;
    padding: 15px 35px;
    background: radial-gradient(1200px 700px at 20% -10%, #ffffff 0%, #fafbfc 60%, #f7f8fa 100%);
    border: 1px solid rgba(16, 18, 22, .06);
    border-radius: 24px;
    box-shadow: 0 18px 60px rgba(15, 17, 21, .08), 0 1px 0 rgba(255, 255, 255, .8) inset;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", YuGothic, Meiryo, sans-serif;
    overflow: hidden;
}

#regulation:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 35px rgba(0,0,0,0.08);
}

/* 見出し */
#regulation .page_common_title_ {
  margin: 0 0 10px;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: .035em;
    font-weight: 800;
    color: #12151b;
    width: auto !important;
    padding-top: 30px!important;
	background: none; 
    padding: 0;
	font-weight:bold!important;
	
}




/* テーブル全体 */
#regulation .page_common_table_ table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* 見出し列 */
#regulation .page_common_table_ th {
  text-align: left;
  width: 28%;
  background: #f8fdfb;
  color: #00a86b;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  vertical-align: top;
}

/* 内容列 */
#regulation .page_common_table_ td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

/* 奇数偶数行で微妙にトーン差 */
#regulation .page_common_table_ tr:nth-child(even) td {
  background: #fafafa;
}

/* テキスト内のリンク */
#regulation a {
  color: #00a86b;
  text-decoration: underline;
  transition: 0.2s ease;
}
#regulation a:hover {
  color: #008d5e;
  text-decoration: none;
}

/* --- スマートフォン（SP）表示 --- */
@media (max-width: 768px) {
  #regulation {
    padding: 2rem 1.2rem;
    margin: 2rem 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  }

  #regulation .page_common_title_ {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }

  /* テーブル → 縦並び（1行ずつ） */
  #regulation .page_common_table_ table,
  #regulation .page_common_table_ tbody,
  #regulation .page_common_table_ tr,
  #regulation .page_common_table_ th,
  #regulation .page_common_table_ td {
    display: block;
    width: 100%;
  }

  #regulation .page_common_table_ tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    margin-bottom: 1.2rem;
    padding: 1rem 1rem 0.8rem;
  }

  #regulation .page_common_table_ th {
    background: none;
    border: none;
    color: #00a86b;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 0 0.4rem 0;
  }

  #regulation .page_common_table_ td {
    border: none;
    padding: 0;
    font-size: 0.95rem;
    color: #333;
  }

  #regulation .page_common_table_ tr:nth-child(even) td {
    background: transparent;
  }
}

/*ご利用ガイド*/
/* ===============================
   サイドメニュー：最終版
   横並び + 空td対応（th100%）
   =============================== */

/* 全体カード */
.block-mt-common.wide.block2-mt-table {
  background: #fff;
  border-radius: 18px;
  /*/box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  padding: 20px 20px 10px;*/
  margin: 0 auto;
}

/* テーブル */
.block2-mt-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px;
}

/* 各行（＝カード風） */
.block2-mt-table table tr {
  background: #fff;
  border: 1px solid #e7ede9;
  border-radius: 14px;
  /*box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);*/
  overflow: hidden;
  transition: all 0.25s ease;
}
.block2-mt-table table tr:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
  border-color: #d9ece4;
}

/* 左列（タイトル） */
.block2-mt-table table th {
  width: 28%;
  vertical-align: top;
  padding: 16px 18px;
  background: linear-gradient(180deg, #f8fdfb 0%, #eef8f4 100%);
  color: #00a86b;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-right: 1px solid #e5ece8;
  transition: width 0.3s ease;
}
.block2-mt-table table th a {
  color: #00a86b;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 168, 107, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.block2-mt-table table th a:hover {
  color: #008e5c;
  border-bottom-color: transparent;
}
.block2-mt-table table th a::before {
  content: "⟶ ";
  opacity: 0.6;
}

/* 右列（リンク群） */
.block2-mt-table table td {
  vertical-align: middle;
  padding: 14px 18px;
  background: #fff;
  transition: all 0.3s ease;
}

/* --- td内 横並び設定 --- */
.block2-mt-table table td {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* チップ風リンク */
.block2-mt-table table td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: #f5fbf8;
  border: 1px solid #dcefe8;
  color: #007a54;
  font-size: 0.93rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.block2-mt-table table td a:hover {
  background: #eaf7f1;
  border-color: #cce8df;
  transform: translateY(-1px);
}

/* 段落調整 */
.block2-mt-table table td p {
  margin: 0;
}

/* フォーカスリング */
.block2-mt-table a:focus {
  outline: 3px solid rgba(0, 168, 107, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===============================
   ★ 空のtd対策（thを100%に拡張）★
   =============================== */
.block2-mt-table table tr:has(td:empty) {
  display: flex;
}
.block2-mt-table table tr:has(td:empty) th {
  width: 100%;
  border-right: none;
  text-align: center;
  background: linear-gradient(90deg, #f8fdfb 0%, #eef8f4 100%);
  border-radius: 14px;
}
.block2-mt-table table tr:has(td:empty) td {
  display: none;
}

/* ===============================
   スマホ版（縦並び1行ずつ）
   =============================== */
@media (max-width: 768px) {
  .block-mt-common.wide.block2-mt-table {
    padding: 14px;
  }
  .block2-mt-table table tr {
    display: block;
  }
  .block2-mt-table table th,
  .block2-mt-table table td {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }
  .block2-mt-table table th {
    border-right: none;
    border-bottom: 1px solid #e6efe9;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #f9fdfc 0%, #eef8f5 100%);
    font-size: 1.05rem;
  }
  .block2-mt-table table td {
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
  }
  /* 空行はSPでも全幅th */
  .block2-mt-table table tr:has(td:empty) {
    display: block;
  }
  .block2-mt-table table tr:has(td:empty) th {
    width: 100%;
    text-align: center;
    border-radius: 14px;
  }
}


/*会社案内*/

.page_common_title_ {
    font-weight: normal!important;
}

/* --- 会社概要セクション（PC＋SP両対応） --- */
#corporate {
      --ink: #0f1115;
    --muted: #6d7480;
    --line: #e6e8ec;
    --brand: #00a86b;
    --panel: #ffffff;
    --glass: #f7f8fa80;
    color: var(--ink);
    max-width: 940px;
    margin: 15px auto;
    padding: 15px 35px;
    background: radial-gradient(1200px 700px at 20% -10%, #ffffff 0%, #fafbfc 60%, #f7f8fa 100%);
    border: 1px solid rgba(16, 18, 22, .06);
    border-radius: 24px;
    box-shadow: 0 18px 60px rgba(15, 17, 21, .08), 0 1px 0 rgba(255, 255, 255, .8) inset;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", YuGothic, Meiryo, sans-serif;
    overflow: hidden;
}

#corporate:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 35px rgba(0,0,0,0.08);
}

/* 見出し */
#corporate .page_common_title_ {
  margin: 0 0 10px;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: .035em;
    font-weight: 800;
    color: #12151b;
    width: auto !important;
    padding-top: 30px!important;
	background: none; 
    padding: 0;
	font-weight:bold!important;
	
}


/* 表スタイル */
#corporate .page_common_table_ table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.7;
}

#corporate .page_common_table_ th {
  text-align: left;
  width: 25%;
  background: #f8fdfb;
  color: #00a86b;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  vertical-align: top;
}

#corporate .page_common_table_ td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

/* 偶数行の背景調整 */
#corporate .page_common_table_ tr:nth-child(even) td {
  background: #fafafa;
}

/* --- SP版（1行ずつ表示） --- */
@media (max-width: 768px) {
  #corporate {
    padding: 2rem 1.2rem;
    margin: 2rem 1rem;
  }

  #corporate .page_common_title_ {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }

  #corporate .page_common_table_ table,
  #corporate .page_common_table_ tbody,
  #corporate .page_common_table_ tr,
  #corporate .page_common_table_ th,
  #corporate .page_common_table_ td {
    display: block;
    width: 100%;
  }

  #corporate .page_common_table_ tr {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    margin-bottom: 1.2rem;
    padding: 1rem 1rem 0.8rem;
  }

  #corporate .page_common_table_ th {
    background: none;
    border: none;
    color: #00a86b;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 0 0.3rem 0;
  }

  #corporate .page_common_table_ td {
    border: none;
    padding: 0 0 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
  }

  #corporate .page_common_table_ tr:nth-child(even) td {
    background: transparent;
  }
}



/* =========================================================
   WATAPRO 買い物かごページ モダンリデザイン
   対象: .order_
   ========================================================= */

/* =========================================================
   WATAPRO Cart (Apple風) — .order_ 配下だけ適用
   ========================================================= */

/* ベース：読みやすい幅・余白・淡い背景 */
.order_{
  --panel:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#007aff;         /* フォーカス青 */
  --radius:14px;
  --shadow:0 14px 28px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.06);
  --insetTop:inset 0 1px 0 rgba(255,255,255,.9);
  --insetBottom:inset 0 -1px 0 rgba(0,0,0,.05);
	width: clamp(320px, 82vw, 1024px);

  /*max-width:min(1120px, 94vw);*/
  margin: 0 auto;
  padding: 8px 16px 40px;
  color:var(--ink);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ===== ヘッダー（タイトル → フロー画像） ===== */
.order_ .order_header_{
  display:flex;
  flex-direction:column-reverse;   /* タイトルが先・フローが下 */
  align-items:center;
  gap:12px;
  padding:40px 0 28px;
  text-align:left;


    margin: 0 0 10px;
    font-size: clamp(22px, 2.2vw, 28px)!important;
    letter-spacing: .035em;
    font-weight: 800;
    color: #12151b;
}
	
	
}
.order_ h1.common_headline1_{
      margin: 0 0 10px!important;
    font-size: clamp(22px, 2.2vw, 28px)!important;

    letter-spacing: .035em!important;
    font-weight: 800!important;
    color: #12151b!important;
    width: auto !important;
    padding-top: 30px!important;
	color:red!important;
	
	
	
	
}

.order_ .hiddenEnter_ {display:none;}








.order_ .order_header_ .order_flow_ img{
  display:block;
  height:40px; width:auto; object-fit:contain;
  opacity:.9; filter:saturate(.9);
}

/* ===== エラー（注意喚起を上品に） ===== */
.order_ .error_{
  background:linear-gradient(180deg,#fff7f7 0%, #ffecec 100%);
  border:1px solid #f9caca;
  border-left:6px solid #ef4444;
  border-radius:12px;
  padding:12px 16px;
  margin:16px 0;
  color:#991b1b;
  box-shadow:0 6px 14px rgba(239,68,68,.08);
}

/* =====「買い物かご」メインテーブル ===== */
.order_ table.order_cart_list_{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--panel);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow), var(--insetTop), var(--insetBottom);
  margin-top:12px;
	padding:10px;
}
.order_ .goods_line_ {
	    border-collapse: separate;
    border-spacing: 0;
    background: var(--panel);
    border-radius: 16px;
    box-shadow: var(--shadow), var(--insetTop), var(--insetBottom);
	
	
}

/*
.order_ table.order_cart_list_ th{
  text-align:left;
  background:#f6f7fb;
  color:#111;
  font-weight:700;
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.order_ table.order_cart_list_ td{
  padding:14px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  background:#fff;
}
.order_ .order_cart_list_ tr:last-child td{ border-bottom:none; }
*/
/* 画像・商品名・価格 */
.order_ .order_cart_list_ td.image_ img{
  width:190px; height:auto; border-radius:10px;
  /*box-shadow:0 2px 6px rgba(0,0,0,.12);*/
}
.order_ .order_cart_list_ td.name_{
  font-weight:600; line-height:1.55;
	padding:10px;
}
.order_ .order_cart_list_ td.name_ .tax_class_name_{ 
  display:inline-block; margin-left:.4em; color:var(--muted); font-weight:500;
}
.order_ .order_cart_list_ .price_{ 
  color:#0f766e; font-weight:800;
}

/* 数量入力・再計算 */
.order_ input.order_cart_qty_{
  width:72px; text-align:center;
  border:1px solid var(--line);
  border-radius:10px; padding:6px 8px;
  transition:border-color .15s, box-shadow .15s;
  font-weight:600;
}
.order_ input.order_cart_qty_:focus{
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(0,122,255,.18);
}
.order_ .order_cart_reload_{
  appearance:none;
  margin-top:6px;
  background:linear-gradient(180deg,#f7f9fc 0%, #eef2f6 48%, #e6eaee 100%);
  border:1px solid rgba(0,0,0,.18);
  border-radius:12px;
  padding:8px 14px;
  font-weight:700; color:#111; cursor:pointer;
  box-shadow:var(--insetTop), var(--insetBottom);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.order_ .order_cart_reload_:hover{ transform:translateY(-1px); }
.order_ .order_cart_reload_:active{
  background:linear-gradient(180deg,#e9edf2 0%, #e2e7ec 100%);
  transform:translateY(1px);
}

/* 削除ボタン（テキストリンク風→Appleバッジ調） */
.order_ .order_cart_delete_{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:72px;
  background:linear-gradient(180deg,#fafafa 0%,#ececec 100%);
  border:1px solid #d1d5db; border-radius:999px;
  padding:6px 12px; font-weight:700; color:#374151;
  cursor:pointer; user-select:none;
  transition:.15s ease;
}
.order_ .order_cart_delete_:hover{ transform:translateY(-1px); }
.order_ .order_cart_delete_:active{ transform:translateY(1px); }

/* 付帯スペック表（.goodsspec_）の見やすさ */
.order_ table.goodsspec_{
  width:100%; margin-top:8px;
  border-collapse:separate; border-spacing:0; overflow:hidden;
  border-radius:12px; /*border:1px solid #eef2f7;*/
}
.order_ table.goodsspec_ th,
.order_ table.goodsspec_ td{
  padding:10px 12px; border-bottom:1px solid #eef2f7; background:#fff;
}
.order_ table.goodsspec_ th{
  width:28%; background:#f7f9fc; color:#111; text-align:left; font-weight:700;
}
.order_ table.goodsspec_ tr:last-child th,
.order_ table.goodsspec_ tr:last-child td{ border-bottom:none; }
.order_ table.goodsspec_ select{
  max-width:100%; border:1px solid var(--line); border-radius:10px; padding:6px 8px;
}

/* ===== 合計・送料などのサマリー（カード化） ===== */
.order_ .order_cart_list_total_{
  background:var(--panel);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow), var(--insetTop), var(--insetBottom);
  margin: 18px 0 8px;
}
.order_ .order_cart_list_total_ .postage_comment_{ font-weight:700; color:#065f46; }
.order_ .order_cart_list_total_ .postage_comment_remarks_{ color:var(--muted); }

/* 小計表（.subtotal_） */
.order_ table.subtotal_{ width:100%; border-collapse:separate; border-spacing:0; }
.order_ table.subtotal_ th{
  text-align:right; padding:10px; color:#374151; white-space:nowrap;
}
.order_ table.subtotal_ td.price_{ font-weight:800; color:#0f766e; }

/* ===== 配送先（.method_host_）・注文主（.method_sender_） ===== */
.order_ .method_host_, .order_ .method_sender_{
  background:var(--panel);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow), var(--insetTop), var(--insetBottom);
  margin-top:20px;
}
.order_ .method_host_ h2.common_headline2_, 
.order_ .method_sender_ .headline_title_{
  font-weight:700; color:#111; 
}
.order_ .method_sender_ .headline_{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:6px 0 10px;
}
.order_ .method_sender_ table.formdetail_ th{
  width:30%; text-align:left; padding:8px 10px; color:#374151; background:#f7f9fc;
}
.order_ .method_sender_ table.formdetail_ td{
  padding:8px 10px; background:#fff;
}
.order_ .method_sender_ input[type="text"],
.order_ .method_sender_ select{
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; width:auto;
}
.order_ .method_sender_ input[type="text"]:focus,
.order_ .method_sender_ select:focus{
  border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(0,122,255,.18);
}

/* ===== 送信ボタン行（.submit_）— Appleグロッシー ===== */
.order_ .submit_{
  display:flex; gap:16px; justify-content:center; align-items:center;
  margin:28px 0 36px;
}
.order_ .submit_ .apple-btn{
  appearance:none; -webkit-appearance:none;
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f6 48%, #e6eaee 100%);
  border:1px solid rgba(0,0,0,.18);
  border-radius:16px;
  box-shadow: var(--shadow), var(--insetTop), var(--insetBottom);
  color:#111; font-weight:700; letter-spacing:.02em;
  font-size:16px; padding:14px 40px; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.order_ .submit_ .apple-btn::before{
  content:""; position:absolute; left:8px; right:8px; top:6px; height:40%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  pointer-events:none;
}
.order_ .submit_ .apple-btn:hover{
  transform:translateY(-1px);
}
.order_ .submit_ .apple-btn:active{
  background: linear-gradient(180deg, #e9edf2 0%, #e2e7ec 100%);
  transform:translateY(1px);
}
.order_ .submit_ .apple-btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px){
  .order_{ padding: 8px 8px 28px; }
  .order_ .order_header_{ padding:28px 0 20px; gap:8px; }
  .order_ .order_header_ h1.common_headline1_{ font-size:1.6rem; }
  .order_ .order_header_ .order_flow_ img{ height:32px; }
  .order_ .order_cart_list_ td.image_ img{ width:68px; }
  .order_ .submit_ .apple-btn{ padding:12px 28px; font-size:15px; }
}

/* 細かな微調整（任意・必要なら） */
.order_ .delivery_date_{ font-weight:700; color:#0f766e; }
.order_ .ServiceGroupDetail{ color:#2563eb; text-decoration:underline; }









/* Apple調モーダル（詳細表示） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn .25s ease;
}
.modal-window {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.2);
  width: min(90vw, 680px);
  height: min(80vh, 600px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 10px; right: 14px;
  border: none; background: none;
  font-size: 1.6rem; font-weight: bold; color: #555;
  cursor: pointer;
  transition: opacity .15s;
}
.modal-close:hover { opacity: .7; }
.modal-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  border-top: 1px solid #eee;
}
@keyframes fadeIn {
  from {opacity:0; transform: scale(.97);}
  to {opacity:1; transform: scale(1);}
}



/* =========================================================
   配送先一覧（.address_box_2_） Apple風リデザイン
   HTML変更なし・:root不使用
   ========================================================= */

/* コンテナ */
.address_box_2_{
  max-width: min(1120px, 94vw);
  margin: 24px auto 32px;
  padding: 20px 16px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.06),
              inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);
  color:#111827;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* 見出し */
.address_box_2_ .common_headline2_{
  margin: 0 0 16px;
  padding-bottom: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  border-bottom: 1px solid #e5e5ea; /* Apple系ヘアライン */
  letter-spacing: -.01em;
}

/* 上部操作列 */
.address_box_2_ .top_box_{
  height: auto !important;          /* 既存40pxを無効化 */
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* 左右のフロートはFlexに自然合流させる */
.address_box_2_ .leftfloat_, 
.address_box_2_ .rightfloat_{
  float: none !important;
}

/* 検索ボックス */
.address_box_2_ .search_box_{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.address_box_2_ .search_box_ .keyword_{
  flex: 1 1 240px;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  font-size: 0.95rem;
  transition: border-color .15s, box-shadow .15s;
}
.address_box_2_ .search_box_ .keyword_::placeholder{ color:#9aa3af; }
.address_box_2_ .search_box_ .keyword_:focus{
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,.18);
}

/* 検索ボタン（インラインstyleを上書き） */
.address_box_2_ .search_box_ input[type="submit"]{
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f6 48%, #e6eaee 100%) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  color: #111 !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06),
              inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.address_box_2_ .search_box_ input[type="submit"]:hover{ transform: translateY(-1px); }
.address_box_2_ .search_box_ input[type="submit"]:active{
  background: linear-gradient(180deg, #e9edf2 0%, #e2e7ec 100%) !important;
  transform: translateY(1px);
}

/* 右側「新しい配送先を登録する」ボタン（既存 .move_button_ をApple調に） */
.address_box_2_ .move_button_{
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f6 48%, #e6eaee 100%);
  border: 1px solid rgba(0,0,0,.18);
  color: #111;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06),
              inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.address_box_2_ .move_button_:hover{ transform: translateY(-1px); }
.address_box_2_ .move_button_:active{
  background: linear-gradient(180deg, #e9edf2 0%, #e2e7ec 100%);
  transform: translateY(1px);
}

/* 配送先カードリスト */
.address_box_2_ .method_address_{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 780px){
  .address_box_2_ .method_address_{ grid-template-columns: 1fr; }
}

/* 各カード */
.address_box_2_ .address_item_{
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06),
              inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(0,0,0,.05);
  display: grid;
  grid-template-columns: 1fr auto; /* 情報 / ボタン */
  gap: 12px 16px;
  align-items: start;
}

/* タイトルのラベル */
.address_box_2_ .address_title_{
  grid-column: 1 / -1; /* 上部いっぱい */
  display: inline-block;
  background: linear-gradient(180deg,#fafafa 0%,#eeeeee 100%);
  border: 1px solid #e5e7eb;
  color: #374151;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px;
  width: fit-content;
}

/* 住所表記 */
.address_box_2_ address{
  margin: 0;
  font-style: normal;
  line-height: 1.6;
  color: #111827;
  white-space: pre-line; /* 既存の改行を活かす */
}

/* 選択ボタン（インラインstyleを上書き） */
.address_box_2_ .address_select_ input[type="submit"]{
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f6 48%, #e6eaee 100%) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  color: #111 !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  min-width: 112px;
  box-shadow: 0 10px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06),
              inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.address_box_2_ .address_select_ input[type="submit"]:hover{ transform: translateY(-1px); }
.address_box_2_ .address_select_ input[type="submit"]:active{
  background: linear-gradient(180deg, #e9edf2 0%, #e2e7ec 100%) !important;
  transform: translateY(1px);
}

/* キーボードフォーカス（共通） */
.address_box_2_ .move_button_:focus-visible,
.address_box_2_ .search_box_ input[type="submit"]:focus-visible,
.address_box_2_ .address_select_ input[type="submit"]:focus-visible{
  outline: 2px solid #007aff;
  outline-offset: 3px;
  border-radius: 16px;
}


/* =========================================================
   order_flow_ をオシャレに（ガラス調＋微グロス＋淡い発光）
   HTML変更なし：.order_header_ .order_flow_ とその img に適用
   ========================================================= */

.order_header_ .order_flow_{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;                /* 画像の周囲に余白をつけて“カプセル”化 */
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffffaa, #f5f7fa88); /* うっすら白グラデ */
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 8px 22px rgba(0,0,0,.08),      /* 外側ふわ影 */
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.04);  /* 内側ハイライト */
  backdrop-filter: saturate(1.05) blur(6px);       /* ガラス感 */
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* 上面のグロス帯（反射） */
.order_header_ .order_flow_::before{
  content:"";
  position:absolute;
  left:10px; right:10px; top:6px; height:42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  pointer-events:none;
}

/* ブランド色の“うっすら色味”を重ねる（例：#00a86b系） */
.order_header_ .order_flow_::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 999px;
  background: radial-gradient(60% 120% at 50% 0%,
              rgba(0,168,107,.18), rgba(0,168,107,0) 60%); /* 上部に淡い緑 */
  mix-blend-mode: color;    /* 画像にほんのり色味を付与 */
  pointer-events:none;
}

/* 画像の質感を上げる（くっきり&軽い影） */
.order_header_ .order_flow_ img{
  display: block;
  height: 36px;             /* 必要なら調整 */
  width: auto;
  object-fit: contain;
  filter: saturate(.95) contrast(1.05) brightness(1.02);
  image-rendering: -webkit-optimize-contrast;
  /* ほんのり発光＆シャドウ */
  drop-shadow: 0 1px 1px rgba(0,0,0,.08);
}

/* 触ったときの心地よい動き */
.order_header_ .order_flow_:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.04);
}
.order_header_ .order_flow_:active{
  transform: translateY(0);
  box-shadow:
    0 6px 16px rgba(0,0,0,.10),
    inset 0 2px 4px rgba(0,0,0,.08);
}

/* ダークモード配慮（お好みで） */

/* =========================================================
   Apple風：小型グロッシーボタン（再計算タイプ）
   対象: .move_button_ / .move_button_mini_
   ========================================================= */

/* 基本デザイン */
.move_button_,
.move_button_mini_ {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  color: #111;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f6 48%, #e6eaee 100%);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 16px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(0,0,0,.08),
    0 2px 6px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* グロス帯（反射光） */
.move_button_::before,
.move_button_mini_::before {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: 4px; height: 40%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  pointer-events: none;
}

/* ホバー時：少し浮かせる */
.move_button_:hover,
.move_button_mini_:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 4px 10px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.05);
}

/* 押下時 */
.move_button_:active,
.move_button_mini_:active {
  background: linear-gradient(180deg, #e9edf2 0%, #e2e7ec 100%);
  transform: translateY(1px);
}

/* フォーカスリング（Apple青） */
.move_button_:focus-visible,
.move_button_mini_:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

/* 大小サイズ差（柔らかく統一） */
.move_button_ { font-size: 15px; padding: 10px 24px; border-radius: 18px; }
.move_button_mini_ { font-size: 14px; padding: 8px 16px; border-radius: 16px; }

/* デスクトップでは軽い影強調 */
@media (min-width: 768px) {
  .move_button_,
  .move_button_mini_ {
    box-shadow:
      0 10px 24px rgba(0,0,0,.10),
      0 4px 10px rgba(0,0,0,.06),
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 0 -1px 0 rgba(0,0,0,.05);
  }
}

/* === 検索ボタン修復（.submit_ × button）==================== */
.contents_ .submit_{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  margin:18px 0 24px;
}

/* 旧方式の“ダミー緑ボタン”を無効化 */
.contents_ .submit_::before{ display:none !important; }
/* 旧：透明の input[type=image] はあっても隠す */
.contents_ .submit_ input[type="image"]{ /*display:none !important;*/ }

/* 本体：<button type="submit" class="apple-btn">検索する</button> */
.contents_ .submit_ button.apple-btn,
.contents_ .submit_ button[name="search"]{
  appearance:none;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 28px;
  height:48px;
  border-radius:9999px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.03em;
  color:#fff;
  background:linear-gradient(135deg,#00a86b,#05bf7f);
  box-shadow:0 14px 28px rgba(0,168,107,.28);
  cursor:pointer;
}

/* フォルダアイコンを付与（画像不要） */
.contents_ .submit_ button.apple-btn::before,
.contents_ .submit_ button[name="search"]::before{
  content:"📂";
  font-size:1rem;
  transform:translateY(1px);
}

/* Hover/Active */
.contents_ .submit_ button.apple-btn:hover,
.contents_ .submit_ button[name="search"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 18px 34px rgba(0,168,107,.35);
}
.contents_ .submit_ button.apple-btn:active,
.contents_ .submit_ button[name="search"]:active{
  transform:translateY(0);
  box-shadow:0 10px 20px rgba(0,168,107,.22);
}

/* SP 幅での見た目 */
@media (max-width:768px){
  .contents_ .submit_ button.apple-btn,
  .contents_ .submit_ button[name="search"]{
    width:min(360px,100%);
  }
}



/* ============================
   メーカー一覧（ピル型タグ）
   対象: .goods_filter_ 内のみ
   ============================ */

/* ラベル */
.goods_filter_ .navistyle_ .goods_maker_title_{
  display:block;
  margin: 6px 0 6px;
  font-weight:700;
  font-size:14px;
  
}

/* リストを横並び＆折返し */
.goods_filter_ .navistyle_ dd{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;         /* 行間 / 列間 */
  margin: 0;
  padding: 6px 0 2px;
}

/* ピル共通（現在地とリンク） */
.goods_filter_ .navistyle_ a.maker_name_,
.goods_filter_ .navistyle_ .maker_name_now_{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 6px 14px;
  border:1px solid #f4c27a;        /* 枠：淡いオレンジ */
  background:#fff7e6;              /* 背景：淡いクリーム */
  color:#b45309;                    /* 文字色：ブラウン寄り */
  text-decoration:none;
  border-radius: 999px;             /* 完全な丸 pill */
  font-size:14px;
  line-height:1.2;
  box-shadow:
    inset 0 1px 0 rgba(245,158,11,.18),
    0 1px 2px rgba(0,0,0,.04);      /* ほのかな立体感 */
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  white-space: nowrap;              /* タグ内で改行しない */
  min-width: 0;                     /* 省略記号の有効化に必要 */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;          /* 名前が長いときは…表示 */
}

/* ホバー・フォーカス（アクセント強め） */
.goods_filter_ .navistyle_ a.maker_name_:hover,
.goods_filter_ .navistyle_ a.maker_name_:focus{
  background:#fff3d6;
  border-color:#f59e0b;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(245,158,11,.22),
    0 2px 6px rgba(0,0,0,.08);
  outline: none;
}

/* アクティブ状態（現在の選択） */
.goods_filter_ .navistyle_ .maker_name_now_{
  background:#ffe9c7;
  border-color:#f59e0b;
  color:#92400e;
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(245,158,11,.22),
    0 1px 2px rgba(0,0,0,.04);
}

/* スマホで少し詰める */
@media (max-width: 640px){
  .goods_filter_ .navistyle_ dd{ gap: 8px 8px; }
  .goods_filter_ .navistyle_ a.maker_name_,
  .goods_filter_ .navistyle_ .maker_name_now_{
    padding: 6px 12px;
    min-height: 32px;
    font-size:13px;
  }
}

/* ==========================================================
   メーカー一覧ボタン：並べ替えデザインに統一
   ========================================================== */

.goods_filter_ .navistyle_ dd {
  display: flex!important;
  flex-wrap: wrap!important;
  gap: 8px!important;
  margin: 0!important;
  padding: 0!important;
}

.goods_filter_ .navistyle_ a.maker_name_,
.goods_filter_ .navistyle_ .maker_name_now_ {
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-height: 26px!important;
  padding: 2px 12px 3px!important;
  font-size: 13px!important;
  font-weight: 500!important;
  color: #333!important;
  background: #fff!important;
  border: 1px solid #e0e0e0!important;
  border-radius: 999px!important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .6)!important;
  text-decoration: none!important;
  transition: all .15s ease!important;
}

/* hover/focus 時 */
.goods_filter_ .navistyle_ a.maker_name_:hover,
.goods_filter_ .navistyle_ a.maker_name_:focus {
  background: #f9f9f9!important;
  border-color: #ccc!important;
  transform: translateY(-1px)!important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08)!important;
  outline: none!important;
}

/* 選択中のメーカー（.maker_name_now_） */
.goods_filter_ .navistyle_ .maker_name_now_ {
  background: #3cb371!important;
  border-color: #2fa864!important;
  color: #fff!important;
  font-weight: 600!important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .3)!important;
  transform: none!important;
}

/* スマホ向け微調整 */
@media (max-width: 640px) {
  .goods_filter_ .navistyle_ a.maker_name_,
  .goods_filter_ .navistyle_ .maker_name_now_ {
    font-size: 12.5px!important;
    padding: 2px 9px!important;
    min-height: 24px!important;
  }
}










/* ========== アコーディオン（スコープ：.acc-filters） ========== */
.acc-filters {margin: 8px auto; max-width: min(1080px, 94vw);}
.acc-filters .acc-head {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:8px 12px; margin:12px 0 8px;
  background:#efefef; border:1px solid #e5e5e5; border-radius:8px;
  color:#2b2b2b; font-size:16px; font-weight:600; letter-spacing:.01em;
}
.acc-filters .acc-head .sub {
  display:block; font-size:12px; font-weight:400; color:#8a8a8a; margin-top:2px;
}
.acc-filters .acc-trigger {
  appearance:none; border:0; background:transparent; padding:0; margin:0;
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
}
.acc-filters .acc-caret {
  margin-left:auto; flex:0 0 auto; width:18px; height:18px; position:relative;
}
.acc-filters .acc-caret::before, .acc-filters .acc-caret::after{
  content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px;
  border-right:2px solid #666; border-bottom:2px solid #666; transform:rotate(45deg); transition:transform .18s ease;
}
.acc-filters .acc-head[aria-expanded="true"] .acc-caret::before,
.acc-filters .acc-head[aria-expanded="true"] .acc-caret::after{ transform:rotate(-135deg); }

/* パネル本体（超薄タグの既存スタイルを利用） */
.acc-filters .acc-panel { overflow:hidden; transition:height .22s ease; }
.acc-filters .acc-panel[hidden] { display:none; }

/* PC=開, SP=閉の微調整はJSが制御（CSSは装飾のみ） */

/* 余白をさらに圧縮したい場合は .bt_style の margin を調整 */
.acc-filters .bt_style { margin: 12px 0; }

/* 万が一 heading02 が残っていても邪魔しない簡素化 */
.acc-filters .heading02 { display:none; } /* JSで置換するため非表示 */


/* =========================
   HOTFIX: タグボタンが箇条書きになった時の復旧
   スコープ：.acc-filters 内の .bt_style
   ========================= */

/* UL をフレックスのタグ行に戻す（●を消す） */
.acc-filters .bt_style{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:12px 0;
  padding:0 !important;
  list-style:none !important;  /* ●を消す */
}

/* li の余白・箇条書きマーカーを完全無効化 */
.acc-filters .bt_style > li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.acc-filters .bt_style > li::marker{ content:''; }

/* ピル型ボタン（極薄版） */
.acc-filters .bt_style > li > a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:1px 8px;
  border:1px solid #e5e5e5;
  border-radius:999px;
  background:#fff;
  color:#333;
  font-size:12.5px;
  font-weight:400;
  line-height:1;
  text-decoration:none !important;
  transition:all .15s ease-in-out;
}
.acc-filters .bt_style > li > a:hover{
  background:#f9f9f9;
  border-color:#ccc;
  transform:translateY(-0.5px);
}

/* 数字やロゴのサイズ */
.acc-filters .bt_style > li > a > span{ 
  font-weight:500; font-size:13px; margin-right:2px;
}
.acc-filters .bt_style > li > a > span > img{
  height:20px; width:auto; max-width:80px; display:block; object-fit:contain;
}

/* 並び替えボタンなど別のULを使う場合も同じ調整を適用（任意） */
.navisort_{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin:12px 0; padding:0; list-style:none;
}
.navisort_ a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:24px; padding:1px 8px;
  border:1px solid #e5e5e5; border-radius:999px; background:#fff;
  color:#333; font-size:12.5px; line-height:1; text-decoration:none;
}
.navisort_ a:hover{ background:#f9f9f9; border-color:#ccc; transform:translateY(-0.5px); }



/* ================================
   アコーディオン見出し：ボタン風（置き換え用）
   スコープ：.acc-filters
   ================================ */

.acc-filters .acc-head{
  background:#ffffff;
  border:1px solid #dcdcdc;
  border-radius:12px;
  padding:6px 10px;
  margin:12px 0 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}

/* ボタン化：面全体を押せる */
.acc-filters .acc-trigger{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-align:left;
}

/* タイトル＆サブ */
.acc-filters .acc-trigger .ttl{
  font-size:15px;
  font-weight:600;
  color:#2a2a2a;
  letter-spacing:.01em;
}
.acc-filters .acc-trigger .sub{
  margin-left:8px;
  font-size:12px;
  color:#9aa0a6;
  font-weight:400;
}

/* 右端の丸いチップ内にキャレット（よりボタンっぽく） */
.acc-filters .acc-caret{
  margin-left:auto;
  width:24px; height:24px; flex:0 0 24px;
  border:1px solid #d9d9d9;
  border-radius:999px;
  background:#f7f7f7;
  position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.acc-filters .acc-caret::before{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:8px; height:8px;
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  transform: rotate(45deg); /* ▼風 */
  transition: transform .18s ease, border-color .18s ease;
}

/* 展開時は矢印を上向きに */
.acc-filters .acc-head[aria-expanded="true"] .acc-caret{
  background:#f1f5f9;
  border-color:#cfd6dc;
}
.acc-filters .acc-head[aria-expanded="true"] .acc-caret::before{
  transform: rotate(-135deg); /* ▲ */
}

/* ホバー／押下／フォーカスで“ボタン”の挙動 */
.acc-filters .acc-head:hover{
  background:#fcfcfc;
  border-color:#cfcfcf;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.acc-filters .acc-head:active{
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.acc-filters .acc-trigger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18); /* やさしいフォーカスリング */
  border-radius:10px;
}

/* 高さをさらに薄くしたい時はここを微調整 */
@media (min-width:0){
  .acc-filters .acc-head{ padding:5px 10px; }
  .acc-filters .acc-trigger .ttl{ font-size:14.5px; }
  .acc-filters .acc-trigger .sub{ font-size:12px; }
}

/* ダーク化やブランド寄せをするなら、ここを差し替え
   例）ボーダー #dcdcdc → #f4c27a、ホバー背景 → #fff7e6 など */





/* =======================================================
   メーカー一覧（オレンジ極薄ピル統一）
   対象: .goods_filter_ .navistyle_
   既存 .contents_ dl.navistyle_ を上書き
   ======================================================= */
.contents_ .goods_filter_ .navistyle_{
  margin: 12px 0 16px;
  text-align: left;
}

/* 見出し（「メーカー一覧：」） */
.contents_ .goods_filter_ .navistyle_ dt.goods_maker_title_{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; 
  margin:0 0 10px;
}
.contents_ .goods_filter_ .navistyle_ dt.goods_maker_title_::before{
  /*content:""; width:12px; height:12px; border-radius:50%;
  background:#ffe8c2; box-shadow:inset 0 0 0 2px #f4c27a;*/
}

/* リンク群をタグレイアウトに */
.contents_ .goods_filter_ .navistyle_ dd{
  display:flex; flex-wrap:wrap;
  gap:10px 12px;
  margin:0; padding:0;
}

/* 通常のピル */
.contents_ .goods_filter_ .navistyle_ a.maker_name_{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:26px; padding:3px 10px;
  border:1px solid #f4c27a;         /* 枠：淡オレンジ */
  background:#fff7e6;               /* 背景：薄クリーム */
  color:#b45309;                     /* 文字：ブラウン寄り */
  border-radius:999px;
  font-size:13px; font-weight:500; line-height:1;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(245,158,11,.12), 0 1px 2px rgba(0,0,0,.04);
  transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.contents_ .goods_filter_ .navistyle_ a.maker_name_:hover,
.contents_ .goods_filter_ .navistyle_ a.maker_name_:focus{
  background:#fff3d6;
  border-color:#f59e0b;
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(245,158,11,.2), 0 3px 8px rgba(0,0,0,.08);
  outline:none;
}

/* 現在選択中（span） */
.contents_ .goods_filter_ .navistyle_ .maker_name_now_{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:26px; padding:3px 10px;
  border:1px solid #f59e0b;
  background:#ffe3b0;
  color:#92400e; font-weight:700;
  border-radius:999px; line-height:1;
  box-shadow:inset 0 1px 0 rgba(245,158,11,.22), 0 1px 2px rgba(0,0,0,.04);
}

/* コンパクト化（SP） */
@media (max-width: 640px){
  .contents_ .goods_filter_ .navistyle_ dd{ gap:8px; }
  .contents_ .goods_filter_ .navistyle_ a.maker_name_,
  .contents_ .goods_filter_ .navistyle_ .maker_name_now_{
    min-height:24px; padding:2px 8px; font-size:12.5px;
  }
}



/* =====================================================
   並べ替え・表示方法ボタン デザイン統一
   対象: .navisort_, .naviorder_ など
   ===================================================== */

/* 見出し部分（例：「並べ替え：」「表示方法：」） */
.navisort_ dt,
.naviorder_ dt {
  font-weight:600;
  color:#555;
  font-size:13px;
  margin-right:6px;
}

/* 「表示方法：」の文字だけ非表示に */
.naviorder_ dt {
  display:none !important;
}

/* ボタン群共通（ピル形） */
.navisort_ dd,
.naviorder_ dd {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
}

/* ボタン：通常状態 */
.navisort_ a,
.naviorder_ a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:2px 10px 3px;
  font-size:13px;
  font-weight:500;
  color:#333;
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
  text-decoration:none;
  transition:all .15s ease;
}

/* ホバー＆フォーカス */
.navisort_ a:hover,
.naviorder_ a:hover,
.navisort_ a:focus,
.naviorder_ a:focus {
  background:#f9f9f9;
  border-color:#d0d0d0;
  transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(0,0,0,.08);
  outline:none;
}

/* 選択中（ピックアップなど） */
.navisort_ a.now,
.naviorder_ a.now {
  background:#3cb371;           /* グリーン系 */
  border-color:#2fa864;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3);
  transform:none;
}

/* スマホで余白を詰める */
@media (max-width:640px){
  .navisort_ a,
  .naviorder_ a{
    font-size:12.5px;
    padding:2px 8px;
    min-height:24px;
  }
}




dl.navistyle_:has(.navistyle_now_) {
  display: none !important;
}







/* ==========================================================
   メーカー名リンク内の (数字) を非表示にする
   ========================================================== */

/* 1) 通常のメーカーリンク */
a.maker_name_::after {
  content: "";
}

/* 2) 括弧と数字部分を非表示にする */
a.maker_name_ {
  position: relative;
}

/* 括弧を含む末尾の数字を見えなくする（CSSでマスク） */
a.maker_name_::before {
  content: attr(data-text);
}

/* JavaScriptを使わずCSSだけで括弧数字を隠すテクニック */
a.maker_name_ {
  white-space: nowrap;
}
a.maker_name_ {
  font-feature-settings: "tnum";
}
a.maker_name_::after {
  content: "";
}







/* =========================================================
   お部屋の広さでエアコンを選ぶ
   （メーカー一覧と統一したピルボタンデザイン）
   ========================================================= */

#airconFilters {
  margin: 20px 0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* 見出し */
#airconFilters .filter-title {
  
  color: #666;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
	    font-weight: 700;
    font-size: 14px;
}

#airconFilters .filter-title span {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

/* ボタン群コンテナ */
#airconFilters .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  padding: 10px;
  margin: 0;

}

/* 個々のボタン（メーカー一覧と同じ） */
#airconFilters .filter-buttons li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#airconFilters .filter-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 3px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
  transition: all .15s ease;
}

/* hover時 */
#airconFilters .filter-buttons a:hover {
  background: #f9f9f9;
  border-color: #ccc;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* 選択中（もし .now や <span> にしたとき） */
#airconFilters .filter-buttons .now,
#airconFilters .filter-buttons span.active {
  background: #3cb371;
  border-color: #2fa864;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3);
}

/* 小さい畳数span内の数字に少し余白 */
#airconFilters .filter-buttons a span {
  margin-right: 2px;
}

/* スマホ用調整 */
@media (max-width: 640px) {
  #airconFilters .filter-title {
    font-size: 14px;
    flex-direction: column;
    gap: 2px;
  }
  #airconFilters .filter-title span {
    font-size: 12.5px;
  }
  #airconFilters .filter-buttons a {
    min-height: 24px;
    padding: 2px 10px;
    font-size: 12.5px;
  }
}




/* =========================================================
   エコキュート「タイプ・容量」表（極薄バランス最終版）
   ========================================================= */

.ecoq_table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* タイプ行（上段） */
.ecoq_table th {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  padding: 4px 3px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: #222;
  line-height: 1.3;
}

/* 容量行（下段） */
.ecoq_table td {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .05);
  padding: 2px 2px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #333;
  line-height: 1.25;
}

/* リンクボタン：フラット極薄ピル */
.ecoq_table a {
  display: inline-block;
  min-width: 60px;
  padding: 1px 8px 2px;
  margin: 1px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.3;
  transition: all .12s ease;
}

/* hover時：ほんのり浮く */
.ecoq_table a:hover {
  background: #f7f7f7;
  border-color: rgba(0, 0, 0, .15);
}

/* active時（クリック中） */
.ecoq_table a:active {
  background: #3cb371;
  border-color: #2fa864;
  color: #fff;
}

/* セクションタイトル */
.heading02 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 6px;
  line-height: 1.3;
}
.heading02 span {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
.heading02 img {
  height: 20px;
  vertical-align: middle;
}

/* 注意文 */
.heading02 b {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  margin-top: 2px;
}

/* スマホ */
@media (max-width: 640px) {
  .ecoq_table th, .ecoq_table td {
    font-size: 11.5px;
    padding: 2px 1px;
  }
  .ecoq_table a {
    min-width: auto;
    padding: 1px 6px;
    font-size: 11.5px;
  }
  .heading02 {
    flex-direction: column;
    align-items: flex-start;
    font-size: 13.5px;
  }
  .heading02 img {
    height: 18px;
  }
}
/* =========================================================
   エコキュート「タイプ・容量」表（極薄 + 余白最小化版）
   ========================================================= */

/* セル（上下のパディングをさらに削減） */
.ecoq_table th {
  padding: 2px 2px; /* ← 4px→2pxに圧縮 */
}
.ecoq_table td {
  padding: 1px 2px; /* ← 2px→1pxに圧縮 */
}

/* ボタン（上下マージンと高さを詰める） */
.ecoq_table a {
  display: inline-block;
  min-width: 58px;
  padding: 0.5px 7px 1px; /* ← 高さをギリギリまで圧縮 */
  margin: 0; /* ← 周囲の余白をゼロ */
  font-size: 12px;
  line-height: 1.15; /* ← 行間も軽く圧縮 */
  font-weight: 400;
  color: #333;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  text-decoration: none;
  transition: all .12s ease;
}

/* hover時（控えめな反応） */
.ecoq_table a:hover {
  background: #f7f7f7;
  border-color: rgba(0, 0, 0, .15);
}

/* active時 */
.ecoq_table a:active {
  background: #3cb371;
  border-color: #2fa864;
  color: #fff;
}

/* 行間の微妙な隙間をさらに整列 */
.ecoq_table p {
  margin: 0; /* pタグのデフォルトマージンを除去 */
  line-height: 1.2;
}

/* スマホ微調整 */
@media (max-width: 640px) {
  .ecoq_table a {
    padding: 0.5px 6px 0.5px;
    font-size: 11.5px;
  }
}

/* =========================================================
   エコキュート「タイプ・容量」表（中線なし／プレート風）
   ========================================================= */

/* テーブル全体：外枠だけ残して内部の線を非表示 */
.ecoq_table {
  border-collapse: separate; /* collapseだと線がつながるので分離 */
  border-spacing: 0;
  border: 1px solid rgba(0,0,0,.08); /* 外枠をほんのり残す */
  border-radius: 8px;
  overflow: hidden; /* 角丸適用を安定させる */
}

/* 中のセルにボーダーを付けない */
.ecoq_table th,
.ecoq_table td {
  border: none !important; /* ← 内側の線を完全オフ */
	border-right: 1px solid rgba(0,0,0,.08) !important;; /* 外枠をほんのり残す */
	border-left: 1px solid rgba(0,0,0,.08) !important;; /* 外枠をほんのり残す */
}

/* セル背景を統一して自然なグリッド感を維持 */
.ecoq_table th,
.ecoq_table td {
  background: #fff;
}

/* 行間のわずかな区切りを柔らかく */
.ecoq_table tr + tr td {
  border-top: 1px solid rgba(0,0,0,.03); /* ← ほぼ見えない仕切り */
}

/* ボタン群はそのまま維持 */
.ecoq_table a {
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 999px;
  padding: 0.5px 7px 1px;
  margin: 0;
  transition: all .12s ease;
}
/* =========================================================
   エコキュート「タイプ・容量」表（背景極薄ホワイトグレー）
   ========================================================= */

/* テーブル全体 */
.ecoq_table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(0, 0, 0, .06); /* 外枠をさらに淡く */
  border-radius: 8px;
  background: rgba(248, 248, 248, 0.6); /* ← 背景を極薄グレーに */
  backdrop-filter: blur(2px); /* ← ほんのりマット感（Safari等対応） */
  overflow: hidden;
}

/* セル背景を統一してさらに静かに */
.ecoq_table th,
.ecoq_table td {
  background: transparent !important; /* ← 個別セル背景を透明化 */
}

/* 行の区切り線もさらにフェード */
.ecoq_table tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, .02);
}

/* ボタン（背景とのコントラストを調整） */
.ecoq_table a {
      background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: 4px 15px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    transition: all .12s 
ease;
}
.ecoq_table a:hover {
  background: #f7f7f7;
  border-color: rgba(0,0,0,.15);
}








/* ====== Card（外枠）====== */
#external_policy .external-policy-wrap{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  border:1px solid #eef2f7;
	    max-width: 940px;
    margin: 15px auto;
    padding: 15px 35px;
}

/* 見出し（会社情報） */
#external_policy .external-policy-wrap h1,
#external_policy .external-policy-wrap h2{
  margin:0 0 16px;
  font-weight:800;
  line-height:1.25;
}
#external_policy .external-policy-wrap h2{
  font-size:clamp(20px,2.2vw,28px);
}

/* ====== テーブル（会社情報の表）====== */
#external_policy .external-policy-wrap table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e6edf3;
  border-radius:12px;
  overflow:hidden;  /* 角丸を有効化 */
  margin-top:12px;
}

#external_policy .external-policy-wrap th,
#external_policy .external-policy-wrap td{
  padding:14px 16px;
  vertical-align:top;
  border-bottom:1px solid #f1f5f9; /* 横罫線のみ */
  font-size:16px;
}

#external_policy .external-policy-wrap tbody tr:last-child th,
#external_policy .external-policy-wrap tbody tr:last-child td{
  border-bottom:none; /* 最終行は線なし */
}

/* 左列（見出しセル）を淡いグリーン背景＋緑文字に */
#external_policy .external-policy-wrap th{
  width: 180px;             /* 目安：PC */
  background:#edf7f1;       /* 淡いグリーン */
  color:#16a34a;            /* 緑文字 */
  font-weight:700;
  white-space:nowrap;
}

/* 右列（値セル）は白背景・通常色 */
#external_policy .external-policy-wrap td{
  color:#1f2937;
  background:#fff;
}

/* 丸みを強調（最上段左右） */
#external_policy .external-policy-wrap thead tr:first-child th:first-child,
#external_policy .external-policy-wrap tbody tr:first-child th:first-child{ border-top-left-radius:12px; }
#external_policy .external-policy-wrap thead tr:first-child td:last-child,
#external_policy .external-policy-wrap tbody tr:first-child td:last-child{ border-top-right-radius:12px; }
#external_policy .external-policy-wrap tbody tr:last-child th:first-child{ border-bottom-left-radius:12px; }
#external_policy .external-policy-wrap tbody tr:last-child td:last-child{ border-bottom-right-radius:12px; }

/* 箇条書きなどが混在する場合も余白を整える */
#external_policy .external-policy-wrap td p{ margin:.6em 0; }

/* ====== 画像のはみ出し防止 ====== */
#external_policy .external-policy-wrap img{ max-width:100%; height:auto; display:block; }

/* ====== レスポンシブ ====== */
@media (max-width: 768px){
  #external_policy .external-policy-wrap{
    padding:18px;
    border-radius:14px;
    box-shadow:0 8px 20px
					
					
	}}





					
					
					
			/* =========================================================
   特集タイル（#event_list_mount 配下だけに適用）
   - 正方形タイル
   - レスポンシブ自動段組
   - 画像は中央トリミング
   - ホバー/フォーカス演出
   - aspect-ratio未対応ブラウザのフォールバック付き
   ========================================================= */

#event_list_mount .tiles.section {
  --gap: 12px;              /* タイル間隔（調整用） */
  --radius: 14px;           /* 角丸 */
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  --shadow-hover: 0 6px 18px rgba(0,0,0,.12);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* タイル本体（正方形） */
#event_list_mount .tiles .tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease;
  will-change: transform, box-shadow;
  aspect-ratio: 1 / 1;       /* ★ 正方形 */
}

/* aspect-ratioが無い環境向けフォールバック */
@supports not (aspect-ratio: 1 / 1) {
  #event_list_mount .tiles .tile::before {
    content: "";
    display: block;
    padding-top: 100%;       /* 正方形スペーサー */
  }
  #event_list_mount .tiles .tile > a,
  #event_list_mount .tiles .tile > a > img {
    position: absolute;
    inset: 0;
  }
}

/* クリック領域を全面化 */
#event_list_mount .tiles .tile > a {
  position: absolute;
  inset: 0;
  display: block;
  outline: none;
}

/* 画像：カバーで中央トリミング */
#event_list_mount .tiles .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ホバー/フォーカス演出（微スケール&影） */
#event_list_mount .tiles .tile:hover,
#event_list_mount .tiles .tile:focus-within {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-hover);
}

/* キーボード操作の視認性 */
#event_list_mount .tiles .tile > a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

/* 入りアニメ（任意） */
#event_list_mount .tiles.section.show .tile {
  opacity: 0;
  animation: tilesFadeIn .35s ease forwards;
}
#event_list_mount .tiles.section.show .tile:nth-child(1) { animation-delay: .02s; }
#event_list_mount .tiles.section.show .tile:nth-child(2) { animation-delay: .04s; }
#event_list_mount .tiles.section.show .tile:nth-child(3) { animation-delay: .06s; }
/* 必要なら以降も等間隔で増やしてください */

@keyframes tilesFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ブレークポイントで最小幅を調整（列数を可変に） */
@media (min-width: 480px) {
  #event_list_mount .tiles.section {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}
@media (min-width: 768px) {
  #event_list_mount .tiles.section {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    --gap: 14px;
  }
}
@media (min-width: 1200px) {
  #event_list_mount .tiles.section {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    --gap: 16px;
  }
}

/* ダークモード対応 */
		
					/* =========================================================
   WATAPRO お知らせカード（.single_mainframe_ 配下のみ）
   HTML変更なしでOK
   ========================================================= */

/* ラッパーを中央に・読みやすい幅に */
.single_mainframe_{
  max-width: min(980px, 94vw);
  margin: 0 auto;
  padding: 16px 0 32px;
}

/* お知らせカード本体 */
.single_mainframe_ .topic_{
  background: #ffffff;
  border: 1px solid #e8ecef;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

/* 見出し（帯＋アイコン） */
.single_mainframe_ .topic_head_{
  position: relative;
  padding: 18px 20px 18px 56px;
  margin: 0;
  font-size: 20px;
  letter-spacing: .04em;
  color: #0f1a26;
  background: linear-gradient(180deg,#f8fafb 0%, #f2f5f7 100%);
  border-bottom: 1px solid #e8ecef;
}
.single_mainframe_ .topic_head_::before{
  content:"";
  position:absolute;
  left:20px; top:50%;
  width:22px; height:22px;
  margin-top:-11px;
  border-radius:6px;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.8) 0 35%, transparent 36%),
    linear-gradient(135deg,#27c1a5 0%, #1180ff 100%);
  box-shadow: 0 2px 8px rgba(17,128,255,.25);
}

/* 本文コンテナ */
.single_mainframe_ .topiclist_body_{
  padding: 22px 22px 28px;
}

/* サブタイトル */
.single_mainframe_ .topic_title_{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #0f1a26;
  letter-spacing: .03em;
}

/* 文章の読みやすさ調整 */
.single_mainframe_ .article_{
  font-size: 15.5px;
  line-height: 1.95;
  color: #26323f;
}
.single_mainframe_ .article_ p{
  margin: 0;
}
.single_mainframe_ .article_ p br + br{ /* 連続改行の余白を少し広めに */
  line-height: 2.6;
}

/* 箇条書き風の強調（[主な変更点] 行など） */
.single_mainframe_ .article_ p{
  /* 「[主な変更点]」の角カク見出し感を少し強化 */
}
.single_mainframe_ .article_ p:has(> br){
  /* そのままでもOK。必要ならここに微調整を追加 */
}

/* リンクボタン（.section a.btn_03）を上品に */
.single_mainframe_ .section{
  width: 100%;
  max-width: 680px;
  margin: 28px auto 0;
}
.single_mainframe_ .section a.btn_03{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px 12px 20px;
  border: 1px solid #cfd7de;
  border-radius: 999px;
  background: #ffffff;
  color: #0f1a26;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: .06em;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  position: relative;
  padding-right: 54px; /* 矢印分 */
}
.single_mainframe_ .section a.btn_03::after{
  content:"";
  position:absolute;
  right:18px; top:50%;
  width:10px; height:10px;
  margin-top:-5px;
  border-top: 2px solid #0f1a26;
  border-right:2px solid #0f1a26;
  transform: rotate(45deg);
  transition: transform .25s ease, right .25s ease, border-color .25s ease;
}
.single_mainframe_ .section a.btn_03:hover{
  background: #f7fafc;
  border-color: #b9c6d1;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.single_mainframe_ .section a.btn_03:hover::after{
  right:16px;
  transform: translateX(2px) rotate(45deg);
}

/* 既存の news20230713 の行間最適化 */
.single_mainframe_ .news20230713{
  line-height: 2.0;
}

/* スマホ最適化 */
@media (max-width: 768px){
  .single_mainframe_{
    padding: 8px 0 24px;
  }
  .single_mainframe_ .topic_head_{
    padding: 16px 16px 16px 52px;
    font-size: 18px;
  }
  .single_mainframe_ .topiclist_body_{
    padding: 18px 16px 22px;
  }
  .single_mainframe_ .topic_title_{
    font-size: 17px;
    margin-bottom: 10px;
  }
  .single_mainframe_ .article_{
    font-size: 15px;
    line-height: 1.9;
  }
  .single_mainframe_ .section{
    max-width: 100%;
    margin-top: 22px;
  }
  .single_mainframe_ .section a.btn_03{
    width: 100%;
    min-height: 46px;
  }
}

/* 微細なアクセシビリティ：フォーカス可視化 */
.single_mainframe_ .section a.btn_03:focus{
  outline: 3px solid rgba(17,128,255,.25);
  outline-offset: 2px;
}


/* ============================
   買い物かごヘッダー：薄く・上品に
   ============================ */



/* 見出しをタイトに */
.order_header_ .common_headline1_{
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #0f1a26;
}

/* テキスト全体の行間・余白を圧縮 */
.order_header_ p{
  grid-column: 1 / -1;
  margin: 0;         /* ← 上下の余白を薄く */
  line-height: 1;      /* ← 読みやすさはキープ */
  font-size: 14.5px;
  color: #334155;
	width: 90%;
}

/* 先頭の注意文を“薄いアラート帯”に */
.order_header_ p:first-of-type b{
  display: block;
  padding: 6px 10px;
  background: #fff1f2;          /* ほんのり赤み */
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  color: #991b1b;
  font-weight: 700;
}

/* 古い <font color> の主張を抑えて統一 */
.order_header_ font[color="#ff0000"]{
  color: inherit;          /* b側の色に合わせる */
  font-size: 1em;          /* +2を打ち消し、圧縮 */
  font-weight: inherit;
}

/* 太字行は読みやすく強調（全体ルール） */
.order_header_ p b{
  color: #0f172a;
  font-weight: 700;
}

/* 最後の大型特配だけ、別トーンで視認性UP */
.order_header_ p:last-of-type b{
  display: block;
  padding: 6px 10px;
  background: #fffbeb;          /* ほんのり黄 */
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  color: #7c4a02;
}

/* モバイル最適化 */
@media (max-width: 768px){
  .order_header_{
    grid-template-columns: 1fr; /* 縦積み */
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
  }
  .order_header_ .order_flow_ img{
    height: 24px;
    margin: 2px 0;
  }
  .order_header_ .common_headline1_{
    font-size: 20px;
  }
  .order_header_ p{
    font-size: 14px;
    margin: 5px 0;
    line-height: 1.55;
  }
}


/* 買い物かごヘッダー：順番制御 */
.order_header_ {


}

/* ▼見た目の並び順（HTMLは触らない） */
.order_header_ .common_headline1_ { order: 1; } /* 見出し */
.order_header_ .order_flow_ { order: 2; }       /* ステップ画像 */
.order_header_ p { order: 3; }                  /* 注意文 */

/* 見出し（シンプル＆上品） */
.order_header_ .common_headline1_ {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: #0f1a26;
  border-bottom: 2px solid #0f6ba8;
  display: inline-block;
  padding-bottom: 3px;
}

/* ステップ画像（中央揃え＆薄め） */
.order_header_ .order_flow_ {
  align-self: center;
  margin: 4px 0 8px;
  position: static !important;
}
.order_header_ .order_flow_ img {
  height: 34px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}

/* 注意文（全体を薄くコンパクトに） */
.order_header_ p {

  font-size: 14.5px;
  color: #334155;
}

/* 先頭の赤帯 */
.order_header_ p:first-of-type b {
  display: block;
  padding: 6px 10px;
  background: #fff1f2;
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  color: #991b1b;
  font-weight: 700;
  line-height: 1.55;
}

/* 古い <font> の修正 */
.order_header_ font[color="#ff0000"] {
  color: inherit;
  font-size: 1em;
  font-weight: inherit;
}

/* 最後の黄色帯 */
.order_header_ p:last-of-type b {
  display: block;
  padding: 6px 10px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  color: #7c4a02;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .order_header_ {
    padding: 10px 12px;
    gap: 6px;
  }
  .order_header_ .common_headline1_ {
    font-size: 20px;
  }
  .order_header_ .order_flow_ img {
    height: 28px;
  }
  .order_header_ p {
    font-size: 14px;
    line-height: 1.55;
  }
}

		.order_ .order_header_ {
			flex-direction: column!important;		}	
					



/* =========================================
   注意文デザイン：<b><font color="red"> に対応
   ========================================= */
b font[color="red"] {
  display: block;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #991b1b !important;
  background: linear-gradient(180deg, #fff5f5 0%, #ffecec 100%);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 行頭の全角スペース（　）を自動調整 */
b font[color="red"]::first-letter {
  margin-left: 0.2em;
}

/* スマホで少し小さめに */
@media (max-width: 768px) {
  b font[color="red"] {
    font-size: 15px;
    padding: 8px 12px;
    line-height: 1.6;
  }
}

					













/*アンケートフォーム*/
/* =========================================================
   WATAPRO | リサイクル申込フォーム（CSSのみ）
   Scope: .questionnaire_ 以下だけに適用（衝突回避）
   ========================================================= */

/* コンテナ＆ブレッドクラム */
.questionnaire_{
  --brand:#2563eb;      /* アクセント（必要に応じて変更） */
  --ink:#0f172a;
  --muted:#f8fafc;
  --line:#e5e7eb;
  --soft:#f1f5f9;
  --danger:#dc2626;
  color:var(--ink);
  font-size:15px;
  line-height:1.7;
	
	    max-width: 940px;
    margin: 15px auto;
	
	
}
.questionnaire_ .navigation_{
  display:flex; align-items:center; gap:10px;
  margin:8px 0 14px;
  color:#64748b;
  font-size:14px;
}
.questionnaire_ .navigation_ a{
  color:#475569; text-decoration:none;
}
.questionnaire_ .navigation_ a:hover{
  text-decoration:underline; text-underline-offset:2px;
}

/* ログイン表示 */
.questionnaire_ .customer_status_{
  margin:6px 0 12px;
}
.questionnaire_ .loginname_{ font-weight:600; display:flex; flex-wrap:wrap; gap:8px; }
.questionnaire_ .loginname_ .biz_name_{
  background:linear-gradient(180deg,#fff,#f7fafc);
  border:1px solid var(--line);
  border-radius:999px; padding:4px 10px;
}

/* 外枠カード */
.questionnaire_ .questionnaire_box_{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(17,24,39,.06);
  padding:16px;
}

/* テーブルの体裁 */
.questionnaire_ .formdetail_.questionnaire_input_{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.questionnaire_ .formdetail_.questionnaire_input_ tbody tr + tr{
  border-top:1px solid var(--soft);
}
.questionnaire_ .formdetail_.questionnaire_input_ th{
  background:var(--muted);
  color:#111827;
  text-align:left;
  padding:14px 16px;
  font-weight:800;
  position:relative;
  border-left:4px solid var(--brand);
}
.questionnaire_ .formdetail_.questionnaire_input_ th img{
  height:16px; width:auto; margin-right:8px; vertical-align:middle; opacity:.85;
}
.questionnaire_ .formdetail_.questionnaire_input_ td{
  padding:14px 16px;
}

/* 補足説明ブロック */
.questionnaire_ .sub_description_{
  background:#f9fafb;
  border:1px dashed #e2e8f0;
  border-radius:12px;
  padding:10px 12px;
  color:#334155;
  margin-top:-6px;
}

/* セクション内の見出し（h3） */
.questionnaire_ .typeCust h3{
  font-size:14px;
  color:#334155;
  margin:8px 0 6px;
  font-weight:700;
}

/* 小さな注記 */
.questionnaire_ .small_{
  color:#64748b; font-size:.92em; margin-left:6px;
}

/* エラー表示 */
.questionnaire_ .error_{
  color:var(--danger);
  font-weight:600;
  font-size:.95em;
}

/* 入力UI（テキスト・セレクト） */
.questionnaire_ input[type="text"],
.questionnaire_ select{
  width: min(720px, 100%);
  max-width: 100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  box-sizing:border-box;
}
.questionnaire_ select{ padding-right:36px; }
.questionnaire_ input[type="text"]:focus,
.questionnaire_ select:focus{
  border-color:#86b3ff;
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

/* 郵便番号など横並びにしたい場合の軽い間隔 */
.questionnaire_ input[size="10"],
.questionnaire_ input[size="14"],
.questionnaire_ input[size="16"]{
  max-width: 280px;
}

/* 送信（画像ボタンを上品に見せる） */
.questionnaire_ .submit_{ margin:18px 0 6px; }
.questionnaire_ .submit_ input[type="image"]{
  height:46px; width:auto;
  /*border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:6px 10px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);*/
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
}
.questionnaire_ .submit_ input[type="image"]:hover{
  filter:brightness(1.03);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}
.questionnaire_ .submit_ input[type="image"]:active{ transform:translateY(1px); }

/* jQueryでセットする送信ボタンのテキスト用（任意） */
.questionnaire_ .block-questionnaire--forward{
  background:var(--brand);
  color:#fff;
  border:0;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(37,99,235,.18);
}

/* モバイル最適化（th/tdを縦積み） */
@media (max-width: 768px){
  .questionnaire_ .questionnaire_box_{ padding:12px; }
  .questionnaire_ .formdetail_.questionnaire_input_ th,
  .questionnaire_ .formdetail_.questionnaire_input_ td{
    display:block; width:100%!important;
    padding:12px 14px;
  }
  .questionnaire_ .formdetail_.questionnaire_input_ th{
    border-left-width:3px;
    border-bottom:1px solid var(--soft);
  }
  .questionnaire_ input[type="text"],
  .questionnaire_ select{
    width:100%;
  }
}

/* やさしいトランジション（低減設定を尊重） */
@media (prefers-reduced-motion: no-preference){
  .questionnaire_, .questionnaire_ *{
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
}




/* =========================================================
   WATAPRO | 汎用バナー（.banner）
   ---------------------------------------------------------
   ・ROOT変数なしで単体利用OK
   ・ページ見出し、案内ブロック、フォームタイトルなどに最適
   ========================================================= */

.banner {
  display: block;
  width: 100%;
  margin: 24px auto 32px;
  padding: 20px 16px;
  border: 1px solid #e2e8f0;
  border-left: 6px solid #2563eb;           /* メインアクセント（青） */
  border-radius: 12px;
  background: linear-gradient(90deg, #f9fafb 0%, #ffffff 100%);
  color: #1e293b;
  font-family: "Hiragino Sans", "游ゴシック体", sans-serif;
  font-size: clamp(18px, 2.3vw, 26px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
	color:#333!important;

}





/* スマホ対応 */
@media (max-width: 768px) {
  .banner {
    padding: 14px 10px;
    font-size: 18px;
    border-radius: 10px;
  }
}








/* =========================================================
   WATAPRO | パンくずリスト（ホーム ＞ マイページ）
   ========================================================= */

.navigation_ {
  display: none!important;
	
}
	
	
	


/*商品画像*/



/*モーダル*/
.modal-dialog {
 z-index: 9999;
 background: #FFF;
 left: 20%;
}


/* ===========================
   WATAPRO風 モーダル全体
   （このモーダル専用想定）
=========================== */
.modal-dialog.js-modal-dialog {
  /* もともとの inline style を上書き */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #ffffff;
  max-width: 960px;
  width: min(960px, 96vw);
  max-height: 92vh;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
}

/* 中身スクロール可能に */
.modal-dialog .modal-wrapper {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.modal-dialog .modal-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ===========================
   ヘッダー（上と下の両方）
=========================== */
.modal-dialog .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

/* タイトル（今回は文字入ってなくても、将来的に使えるように） */
.modal-dialog .modal-header .modal-title,
.modal-dialog .modal-header .js-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

/* ×ボタン共通（上のシンプル× / 下の「×このウィンドウを閉じる」両対応） */
.modal-dialog .modal-header .js-modal-close.modal-close {
  cursor: pointer;
  border-radius: 999px;
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
  white-space: nowrap;
}

.modal-dialog .modal-header .js-modal-close.modal-close:hover {
  background: #e5e7eb;
}

/* 下側のヘッダーは「閉じるボタンだけ右寄せ」に */
.modal-dialog .modal-header:last-of-type {
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.modal-dialog .modal-header:last-of-type .js-modal-title.modal-content {
  display: none; /* 空なので非表示 */
}
.modal-dialog .modal-header:last-of-type .js-modal-close.modal-close {
  margin-left: auto;
}

/* ===========================
   ボディエリア
=========================== */
.modal-dialog .modal-body {
  padding: 18px 22px 20px;
  overflow-y: auto;
  background: #f9fafb;
}

/* 元の style 内を上書き（より安全に） */
.modal-dialog .modal-body img {
  width: 100%;
  height: auto;
  display: block;
}
.modal-dialog .img img.arrow {
  width: 80px !important;
}

/* ===========================
   梱包ガイド本文（packing_page）
   ※ わたプロっぽい白カード＋グリーンアクセント
=========================== */
.packing_page {
  color: #111827;
  line-height: 1.7;
}

/* セクションの余白 */
.packing_page .block-mt-common.wide {
  margin-bottom: 18px;
}

/* 見出し */
.packing_page h2 {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #15803d; /* WATAPROグリーン */
}

.packing_page h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: #111827;
}

.packing_page h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ecfdf3;          /* うっすらグリーン */
  border: 1px solid #bbf7d0;
  color: #14532d;
}

.packing_page h5 {
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 8px;
  padding-left: 8px;
  border-left: 3px solid #15803d;
}

/* テキスト */
.packing_page .block-mt-text .text p {
  margin: 4px 0;
  font-size: 13px;
  color: #374151;
}

/* カラークラス（既存流用） */
.fc_blue {
  color: #15803d;
  font-weight: 600;
}
.fc_red {
  color: #b91c1c;
  font-weight: 600;
}

/* ===========================
   画像並び（PCレイアウト）
=========================== */
.packing_page .block-mt-image-columns .wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.packing_page .block-mt-image-columns .wrap > div {
  flex: 1 1 0;
  text-align: center;
  font-size: 12px;
  color: #4b5563;
}

.packing_page .block-mt-image-columns .wrap > div p {
  margin-top: 8px;
}

/* ===========================
   PC / SP の出し分け
=========================== */
.packing_page .pc_on { display: block; }
.packing_page .sp_on { display: none; }

/* ===========================
   モバイル（SP）対応
=========================== */
@media (max-width: 768px) {
  .modal-dialog.js-modal-dialog {
    width: 96vw;
    max-width: 96vw;
    max-height: 94vh;
    border-radius: 10px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.25);
  }

  .modal-dialog .modal-body {
    padding: 14px 14px 16px;
  }

  .packing_page h2 {
    font-size: 18px;
  }
  .packing_page h3 {
    font-size: 16px;
  }
  .packing_page h4 {
    font-size: 14px;
  }
  .packing_page h5 {
    font-size: 13px;
  }

  .packing_page .block-mt-image-columns .wrap {
    flex-direction: column;
    gap: 12px;
  }

  .packing_page .pc_on { display: none; }
  .packing_page .sp_on { display: block; }
}

.modal-dialog.js-modal-dialog {
  max-height: 90vh !important;
  overflow: hidden !important;
}

.modal-dialog .modal-content {
  height: 90vh !important;
  overflow-y: auto !important;
}




.js-goods-detail-gallery-slider {
	    list-style-type:none!important;
	padding:0;

	
}




.block-mt-image-columns .wrap .img img {width: auto!important;}




.goodscomment2_ div img {width:100%;}




/* ====== ギャラリー全体 ====== */
#gallery {
  max-width: 520px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
	position:relative;
}

#gallery .etc_goodsimg_ {display:none;}

/* メイン画像＋矢印を横一列に */
#gallery .main-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
	    min-width: 350px!important;

}

/* メイン画像 */
#gallery .main-view {
  max-width: 85%;
    margin-top: 10px !important;
    margin-bottom: 24px !important;
    height: auto;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* 矢印（← 画像 →） */
#gallery .arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
}
#gallery .arrow:hover {
  background: #00a86b;
  border-color: #00a86b;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,168,107,0.25);
}

#gallery .arrow-left {
	position:absolute;
z-index: 9999;
    left: 7px;
}
#gallery .arrow-right {
	position:absolute;
	right:7px;
	z-index: 9999;

}

/* ====== サムネイル部分 ====== */
#gallery .thumbs {
  display: flex;
  flex-wrap: wrap;          /* 折り返しOK */
  justify-content: center;  /* 中央寄せ */
  gap: 4px;
  margin-top: 6px;
	    margin-bottom: 20px;
}

#gallery .thumbs img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.55;
  border: 1px solid transparent;
  transition: all .18s ease;
}

#gallery .thumbs img:hover {
  opacity: 0.85;
}

#gallery .thumbs img.active {
  opacity: 1;
  border-color: #00a86b;
  box-shadow: 0 0 0 1px rgba(0,168,107,0.3);
}

/* 旧 bxSlider 本体は非表示にしておく（必要なら） */
#gallery .bx-wrapper {
  display: none !important;
}

/* SPで少しコンパクトに */
@media (max-width: 640px) {
  #gallery {
    max-width: 100%;
  }
  #gallery .main-wrap {
    gap: 6px;
  }
  #gallery .arrow {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
  #gallery .thumbs img {
    width: 40px;
    height: 40px;
  }
}


/*モーダル✕削除*/
.modal-dialog .modal-header .js-modal-title{display:none!important;}






/*利用規約*/

.js-modal-title modal-title {display:none;}
/* ===== テキストエリア（規約本文） ===== */
.block-member-terms--body {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  background: #fafafa;
  color: #333;
  line-height: 1.8;
  font-size: 14px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  height: 500px;
  overflow-y: scroll;
}

/* スクロールバーをわたプロ風に */
.block-member-terms--body::-webkit-scrollbar {
  width: 8px;
}
.block-member-terms--body::-webkit-scrollbar-thumb {
  background: #00a86b;
  border-radius: 8px;
}
.block-member-terms--body::-webkit-scrollbar-track {
  background: #eee;
}

/* ===== SP 最適化 ===== */
@media screen and (max-width: 768px) {

  .modal-body {
    padding: 16px;
    border-radius: 12px;
  }

  .block-member-terms--header {
    font-size: 18px;
    border-left-width: 5px;
  }

  .block-member-terms--body {
    font-size: 13px;
    padding: 12px;
    height: 260px;
  }
}

/*ガイド返品*/



/* --- 見出しH2（「返品について」など）をわたプロっぽく --- */
.right_block .block-mt-h2 h2 {
  margin: 0 0 18px;
  padding: 10px 16px;
  font-size: 22px;
  font-weight: 700;
  color: #222;
  background: linear-gradient(90deg, rgba(0, 168, 107, 0.12), rgba(0, 168, 107, 0));
  border-left: 5px solid #00a86b; /* WATAPROグリーン */
  border-radius: 999px;
}

/* H3（小見出し：返品手数料など） */
.right_block .block-mt-h3 h3 {
  margin: 0 0 10px;
  padding: 6px 12px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  border-left: 4px solid #00a86b;
  background: #f7f9fb;
  border-radius: 8px;
}

/* H4 はシンプルなラベル風 */
.right_block .block-mt-h4 h4 {
  margin: 0;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: #444;
}

/* テキストの読みやすさ調整 */
.right_block .block-mt-text .text p {
  font-size: 14px;
  line-height: 1.9;
  color: #333;
  margin-bottom: 16px;
}

/* 強調色など既存ルールの微調整（右ブロック内だけ） */
.right_block .fc_red {
  color: #ff3b30 !important;
  font-weight: 600;
}

.right_block .fc_blue {
  color: #006bc4;
}

/* 黄色/青枠のボックスをカード風に */
.right_block p.yellowbox,
.right_block p.bluebox,
.right_block span.bluelinebox {
  display: block;
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* もともとの色味を活かしつつ少し淡く */
.right_block p.yellowbox {
  background-color: #fff9d6;
}

.right_block p.bluebox {
  background-color: #e8f8ff;
}

.right_block span.bluelinebox {
  border: 2px solid #36c;
  background-color: #f7fbff;
}

/* テーブルをフラット＆見やすく */
.right_block .block2-mt-table {
  margin-top: 12px;
}

.right_block .block2-mt-table table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.right_block .block2-mt-table table tr th,
.right_block .block2-mt-table table tr td {
  font-size: 13px;
  padding: 8px 10px;
}

/* 上部の行を少し強調 */
.right_block .block2-mt-table table tr:first-child th {
  background: #f5f7fa;
  font-weight: 700;
}

/* PC で横幅を少し制限すると読みやすい */
@media only screen and (min-width: 900px) {
  .right_block {
    max-width: 880px;
  }
}

/* SP時はカードをフル幅＆余白軽めに */
@media only screen and (max-width: 699px) {
  .right_block {
    float: none;
    width: 100%;
    margin: 0 auto 24px;
    padding: 20px 16px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  }

  .right_block .block-mt-h2 h2 {
    font-size: 18px;
    padding: 8px 12px;
  }

  .right_block .block-mt-h3 h3 {
    font-size: 16px;
  }

  .right_block .block2-mt-table {
    overflow-x: auto;
  }
}



/* ================================
   リサイクル案内モーダル 専用上書きCSS
   HTML変更なしで大幅に見やすく
================================ */

/* 全体背景を見やすい薄グレーに */
.modal-content .modal-body {
  background: #f7f9fc;
  padding: 20px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
  color: #222;
}

/* 最初の見出し h2 を少し強調 */
.modal-content .modal-body h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  border-left: 6px solid #00a86b;
  padding-left: 10px;
}

/* 各段落の読みやすさ */
.modal-content .modal-body p {
  margin: 10px 0;
}

/* 青い囲み枠（style のままでもOK、CSSで整形） */
.modal-content .modal-body > div[style*="border: 2px solid blue"] {
  border: 1px solid #7ab6ff !important;
  background: #ffffff;
  padding: 18px !important;
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

/* 水色タイトル帯（[a][b][c] など） */
.modal-content .bk_blue {
  background: #e8f2ff !important;
  padding: 8px 14px !important;
  border-radius: 8px;
  margin: 20px 0 12px !important;
}
.modal-content .bk_blue h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f3ea0;
}

/* 黄色注意ブロック */
.modal-content .yellow_block {
  background: #fff9d5 !important;
  border: 1px solid #f2d774;
  padding: 12px !important;
  border-radius: 8px;
  font-size: 14px;
}

/* 赤文字は濃い赤に統一 */
.modal-content .fc_red {
  color: #d91c33 !important;
}

/* 表（PC/SP共通で整形） */
.modal-content table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
  font-size: 14px;
}
.modal-content table th {
  background: #eff3f8;
  padding: 10px;
  border-bottom: 1px solid #d8dde6;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
.modal-content table td {
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.modal-content table tr:last-child td {
  border-bottom: none;
}

/* 金額セル強調 */
.modal-content td.price {
  font-weight: 700;
  text-align: right;
}

/* 画像を横幅いっぱいに */
.modal-content .modal-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}

/* 別表の見出しブロック */
.modal-content #add {
  background: #fff3b0 !important;
  padding: 10px !important;
  border-radius: 8px;
  border: 1px solid #f1c928;
  margin: 20px 0 10px !important;
}
.modal-content #add h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

/* 下の「× このウィンドウを閉じる」 */
.modal-content .modal-header:last-of-type {
  border-top: 1px solid #ddd;
  margin-top: 30px;
  padding-top: 16px;
}
.modal-content .modal-header:last-of-type .modal-close {
  background: #222;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  display: inline-block;
}
.modal-content .modal-header:last-of-type .modal-close:hover {
  background: #000;
}

/* SP 最適化 */
@media (max-width: 600px) {
  .modal-content .modal-body {
    padding: 14px;
  }
  .modal-content table {
    font-size: 12px;
  }
  .modal-content .bk_blue h5 {
    font-size: 14px;
  }
}


/* ▼モーダル内テーブルのレイアウト修正用 --------------------- */
.modal-content .block2-mt-table table,
.modal-content .table-pc table.tb01,
.modal-content .table-pc table.tb02,
.modal-content .table-pc table.tb03 {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  display: table;           /* 念のため table に戻す */
}

.modal-content .block2-mt-table table thead,
.modal-content .block2-mt-table table tbody,
.modal-content .block2-mt-table table tfoot {
  display: table-row-group; /* tbody 等が block になっているのを戻す */
}

.modal-content .block2-mt-table table tr {
  display: table-row;       /* tr が block になっているのを戻す */
}

.modal-content .block2-mt-table table th,
.modal-content .block2-mt-table table td {
  display: table-cell;      /* td / th も table-cell に戻す */
  vertical-align: middle;
}

/* SP 用 table-sp も念のため同様に */
.modal-content .table-sp table.tb01,
.modal-content .table-sp table.tb02,
.modal-content .table-sp table.tb03 {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  display: table;
}

.modal-content .table-sp table.tb01 tr,
.modal-content .table-sp table.tb02 tr,
.modal-content .table-sp table.tb03 tr {
  display: table-row;
}

.modal-content .table-sp table.tb01 th,
.modal-content .table-sp table.tb01 td,
.modal-content .table-sp table.tb02 th,
.modal-content .table-sp table.tb02 td,
.modal-content .table-sp table.tb03 th,
.modal-content .table-sp table.tb03 td {
  display: table-cell;
  vertical-align: middle;
}





/* ▼テーブルの縦境界線を追加して見やすくする ------------------ */
.modal-content table.tb01 th,
.modal-content table.tb01 td,
.modal-content table.tb02 th,
.modal-content table.tb02 td,
.modal-content table.tb03 th,
.modal-content table.tb03 td {
  border-right: 1px solid #e0e4ea;  /* 縦線 */
}

/* 最後の列だけ右線を消す（見た目を整える） */
.modal-content table.tb01 tr th:last-child,
.modal-content table.tb01 tr td:last-child,
.modal-content table.tb02 tr th:last-child,
.modal-content table.tb02 tr td:last-child,
.modal-content table.tb03 tr th:last-child,
.modal-content table.tb03 tr td:last-child {
  border-right: none;
}

/* 行の下線も少し強めにして視認性アップ */
.modal-content table.tb01 tr td,
.modal-content table.tb02 tr td,
.modal-content table.tb03 tr td {
  border-bottom: 1px solid #e6e9ef;
}


/* ▼表の影を完全に消す --------------------- */
.modal-content table.tb01,
.modal-content table.tb02,
.modal-content table.tb03,
.modal-content .table-sp table.tb01,
.modal-content .table-sp table.tb02,
.modal-content .table-sp table.tb03 {
  box-shadow: none !important;  /* ←影を消す */
}
/* ▼表の上下に出る白ぼかし影を完全に消す --------------------- */

/* block-wrapper や各 table コンテナが影をつけている場合に全て無効化 */
.modal-content .block2-mt-table,
.modal-content .block-mt-common,
.modal-content .modal-body > div,
.modal-content table.tb01,
.modal-content table.tb02,
.modal-content table.tb03 {
  /*background: #ffffff !important;*/
  box-shadow: none !important;
  filter: none !important;
}

/* グラデ影（linear-gradient や mask-image）を強制オフ */
.modal-content .block2-mt-table,
.modal-content table,
.modal-content .modal-body {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-image: none !important;
}

/* 不要な角丸も削除したい場合はこれ */
.modal-content table.tb01,
.modal-content table.tb02,
.modal-content table.tb03 {
  border-radius: 0 !important;
}

/* ▼モーダル下部の「×このウィンドウを閉じる」を非表示 */
.modal-content .modal-header:last-of-type {
  display: none !important;
}
/* 「取付設置サービス詳細」という文字の a タグだけ幅145pxにする */
.ServiceGroupDetail[href="/shop/pages/mounting.aspx"] {
  width: 145px !important;
  display: inline-block; /* 幅を効かせるために必要 */
}







/* ▼ このクラスが付いているダイアログだけデザインを変える */
.ui-dialog.jquery-ui-dialog-alert {
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
  padding: 0;
  font-family: "Helvetica Neue","YuGothic","游ゴシック体","Yu Gothic",sans-serif;
  overflow: hidden;
}

/* デフォルトの濃い枠を消す */
.ui-dialog.jquery-ui-dialog-alert .ui-widget-header,
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-titlebar {
  background: #f7f9fb;
  border: none;
  border-bottom: 1px solid #e3e7ee;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

/* タイトルのアイコン余白などをリセット気味に */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-title {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

/* ×ボタンをフラットに */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-titlebar-close {
  ackground: #FFF;
    width: 26px;
    height: 26px;
    right: 6px;
    top: 15px;
    border-radius: 999px;
    border: 1px solid #ccc;
    transition: background 0.2s 
ease, transform 0.1s 
ease;
}
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-titlebar-close:hover {
  background: rgba(0,0,0,0.05);
  transform: scale(1.05);
}

/* 本文エリア */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-content {
  padding: 16px 18px 12px;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
	background-color: #FFF;
}

/* 中のテキストを読みやすく */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-content p {
  margin: 0 0 8px;
}
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-content p:last-child {
  margin-bottom: 0;
}

/* 注記や強調用（もし <strong> や <span class="fc_red"> が入ってきた場合） */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-content strong {
  font-weight: 600;
}
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-content .fc_red {
  color: #e53935;
}

/* ボタンエリア全体 */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-buttonpane {
  margin: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid #e3e7ee;
  background: #f9fafc;
}

/* ボタングループを右寄せ＆隙間調整 */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none!important;
  gap: 8px;
}

/* ボタン本体 */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-buttonpane button {
  min-width: 80px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid #00a86b;      /* わたプロっぽいグリーン */
  background: #00a86b;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.08s ease;
}

/* キャンセル側だけグレーっぽくしたい場合（ボタンテキストで判定しづらい時はクラス付与推奨） */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-buttonpane button:nth-child(2) {
  border-color: #d0d4dd;
  background: #fff;
  color: #555;
}

/* ホバー時のちょい浮き */
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-buttonpane button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-buttonpane button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 小さい画面でも詰まりすぎないように */
@media screen and (max-width: 480px) {
  .ui-dialog.jquery-ui-dialog-alert {
    width: 90% !important;
    left: 5% !important;
  }
  .ui-dialog.jquery-ui-dialog-alert .ui-dialog-content {
    padding: 14px 14px 10px;
    font-size: 12px;
  }
  .ui-dialog.jquery-ui-dialog-alert .ui-dialog-buttonpane {
    padding: 8px 10px 10px;
  }
}
.ui-dialog.jquery-ui-dialog-alert .ui-dialog-content img{ width: 60%!important;}
   
/* ダイアログ本体をちゃんと最前面に */
.ui-dialog.jquery-ui-dialog-alert {
  /*position: relative;*/
  z-index: 10001;         /* ダイアログを一番上に */
  background: #fff;       /* 念のため白背景に */
}

/* 画面全体にひく “黒い薄幕” （ダイアログの後ろ） */
.ui-dialog.jquery-ui-dialog-alert::before {
  content: "";
  position: fixed;        /* 画面全体を覆う */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0,0,0,0.45);  /* 薄い黒背景 */
  backdrop-filter: blur(2px);    /* おしゃれぼかし（対応ブラウザのみ） */

  z-index: -1;             /* ダイアログ本体より一段下 */
  pointer-events: none;    /* クリックはダイアログに通す */
}