@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Serif+JP:wght@300;400;600&family=Zen+Old+Mincho:wght@400;700&display=swap');
/* ==========================================================================
   1. Google Fonts & CSS Variables (変数定義)
   ========================================================================== */ :root {
  bg-deep: #050505;
  accent-gold: #d4af37;
  accent-red: #F20000;
  text-main: #f0f0f0;
  text-muted: #bcbcbc;
  border-color: #2a2a2a;
  nav-bg: #ffffff;
  /* プレミアム漆黒・ゴールド仕様の変数 */
  premium-black: #0a0a0a;
  surface-dark: #151515;
  gold-bright: #e5c158;
  gold-muted: #b38b4d;
  border-gold-dark: #3a3220;
  border-dark-soft: #222222;
  text-silk-white: #f5f5f5;
  text-premium-muted: #a0a0a0;
}
/* ==========================================================================
   2. Global Settings & Layout (共通設定)
   ========================================================================== */
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Zen Old Mincho', serif;
  position: static !important;
  top: 0 !important;
  padding-top: 0;
}
.font-cinzel {
  font-family: "Cinzel", "Times New Roman", serif;
  letter-spacing: 0.2em;
}
.serif-jp {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", serif;
}
/* Navbar Adjustments */
.navbar {
  z-index: 1050 !important;
}
.dropdown-menu {
  z-index: 9999 !important;
}
/* 翻訳バー・ナビゲーション共存設定 */
.navbar.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
  transition: top 0.3s ease, margin-top 0.3s ease;
}
.translated-ltr .navbar, .translated-rtl .navbar {
  margin-top: 40px !important;
}
.translated-ltr .navbar.sticky-top, .translated-rtl .navbar.sticky-top {
  top: 40px !important;
}
.goog-te-balloon-frame {
  display: none !important;
}
/* ==========================================================================
   3. Custom Components (カスタムパーツ)
   ========================================================================== */
.en-text {
  color: var(accent-red);
}
.footer-washi-texture {
  background-color: #f8f9fa;
  background-image: url('https://www.saiyukan.com/jp-insho/image_hp/seamless_washi_texture.jpg');
  background-repeat: repeat;
}
/* Back to Top Button */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(accent-red);
  color: #ffffff;
  border: none;
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000;
  pointer-events: none;
}
#backToTop.show {
  opacity: 1;
  pointer-events: auto;
}
/* ナビゲーションメニュー */
.navbar-nav .nav-link {
  color: var(bs-body-color);
  transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
  color: var(gold-muted) !important;
}
.nav-theme-btn, .nav-cart-btn {
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-theme-btn:hover, .nav-cart-btn:hover {
  transform: scale(1.05);
  background-color: rgba(212, 175, 55, 0.08) !important;
}
.nav-cart-btn:hover {
  color: var(gold-muted) !important;
}
/* フッター周辺 */
.footer-links ul li {
  padding: 0.28rem 0;
  text-align: center;
}
.footer-links a {
  color: var(bs-body-color) !important;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
  text-decoration: none !important;
  display: inline-block;
}
.footer-links a:hover {
  color: var(gold-muted) !important;
  text-decoration: underline !important;
}
/* 「footer-links の中にある category-icon クラスの img タグ」と指定を細かくする */
.footer-links img.category-icon {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}
.table-logo-wrapper {
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* 和モダンカテゴリ見出し */
.wf-category-title {
  border-left: 4px solid #8a1716;
  padding-left: 12px;
  letter-spacing: 0.05em;
}
.wf-category-subtitle {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6c757d;
}
.wf-category-section {
  margin-bottom: 4.5rem;
}
.wf-category-section:last-child {
  margin-bottom: 1.5rem;
}
/* ==========================================================================
   4. Category Header Styles (見出しエリアの完全CSS化)
   ========================================================================== */
/* 見出しカード全体のベース（ライトモード背景） */
.category-header-box {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border: none !important;
}
.category-header-title {
  font-family: "Noto Serif JP", "Shippori Mincho", "MS Mincho", serif !important;
  color: #212529 !important; /* ライトモード時の文字色（濃いグレー） */
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.8rem !important;
  letter-spacing: 0.2em;
}
.category-header-subtitle {
  font-family: "Cinzel", serif !important;
  color: #6c757d !important;
  margin-bottom: 0 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
/* 🌙 ダークモード時の見出しエリア専用の配色制御 */
[data-bs-theme="dark"] .category-header-box {
  background: linear-gradient(135deg, #222222 0%, #151515 100%) !important;
}
[data-bs-theme="dark"] .category-header-title {
  color: #ffffff !important; /* 文字を純白にして視認性を確保 */
}
[data-bs-theme="dark"] .category-header-subtitle {
  color: var(gold-bright, #e5c158) !important; /* サブタイトルを上品なゴールドにして和モダンを強調 */
}
/* ==========================================================================
   5. Product Card Styles (商品カード・商品一覧の完全一致CSS)
   ========================================================================== */
/* 商品カード外枠（a.product-item-link）のホバー制御 */
.product-item-link {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.product-item-link:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(212, 175, 55, 0.3) !important; /* ホバー時にかすかにゴールドの枠線に */
}
/* 商品画像（.product-item-img）のスクエア固定とズーム */
.product-item-link .product-item-img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}
.product-item-link:hover .product-item-img {
  transform: scale(1.03) !important;
}
/* ブランド名（.product-item-meta） */
.product-item-meta {
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
}
/* 商品タイトル（.product-item-title） */
.product-item-title {
  font-family: "Noto Serif JP", "Shippori Mincho", "MS Mincho", serif !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0.03em !important;
}
/* アイコン画像（.product-item-icon） */
.product-item-icon {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
}
/* 価格表示（.product-item-price） */
.product-item-price {
  font-size: 1.05rem !important;
  color: var(gold-muted, #b38b4d) !important;
}
/* 消費税表記（.product-item-tax） */
.product-item-tax {
  font-size: 0.72rem !important;
  letter-spacing: 0.02em !important;
}
/* その他共通互換パーツ */
.transition-soft {
  transition: all 0.4s ease;
}
.link-hover-gold:hover {
  color: var(gold-muted) !important;
}
/* 商品カード全体のスタイル */
.product-card-base {
  height: 100%;
  border: 1px solid var(bs-border-color-translucent);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none !important; /* ← 「!important」をつけて強制的に下線を消す */
  background-color: #fff;
  color: inherit; /* ← 文字色をリンクの色（青）ではなく、本来の色を引き継がせる */
}
/* 【追加】カード内のすべてのテキスト要素の下線を強制的に消す指定 */
.product-card-base *, .product-card-base:hover * {
  text-decoration: none !important;
}
/* 仕様アイコンの並び */
.product-spec-icons {
  display: flex;
  justify-content: center;
  gap: 0.5rem; /* gap-2 */
  margin-bottom: 1rem; /* mb-3 */
}
@media (min-width: 576px) {
  .product-spec-icons {
    justify-content: flex-start;
  }
}
/* 税込（TAX INCL.）のフォント・カラー設定 */
.product-tax-label {
  font-family: var(bs-font-monospace); /* font-monospace */
  color: var(bs-secondary-color); /* text-body-secondary */
  font-weight: 400; /* fw-normal */
  font-size: 0.875em; /* small */
}
/* ==========================================================================
   6. Theme Control & Dark Mode (テーマ連動・色の制御コア)
   ========================================================================== */
.transition-theme, .transition-theme nav, .transition-theme section, .transition-theme footer, .transition-theme div.card, .product-luxury-container, .product-luxury-container * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
/* 🌙 ダークモード（黒背景時）の強制一括管理 */
[data-bs-theme="dark"].premium-layout {
  background-color: #111111 !important;
  color: #f8f9fa !important;
}
[data-bs-theme="dark"].premium-layout nav, [data-bs-theme="dark"].premium-layout section, [data-bs-theme="dark"].premium-layout footer, [data-bs-theme="dark"].premium-layout .bg-white, [data-bs-theme="dark"].premium-layout .bg-light {
  background-color: #111111 !important;
  color: #f8f9fa !important;
}
/* ダークモード時の商品タイトル・価格などの配色最適化 */
[data-bs-theme="dark"] .product-item-link {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
}
[data-bs-theme="dark"] .product-item-title {
  color: #ffffff !important;
}
[data-bs-theme="dark"] .product-item-meta, [data-bs-theme="dark"] .product-item-tax {
  color: #a0a0a0 !important;
}
[data-bs-theme="dark"] .product-item-price {
  color: var(gold-bright, #e5c158) !important;
}
[data-bs-theme="dark"].premium-layout .text-dark, [data-bs-theme="dark"].premium-layout h1, [data-bs-theme="dark"].premium-layout h2, [data-bs-theme="dark"].premium-layout h3 {
  color: #ffffff !important;
}
[data-bs-theme="dark"].premium-layout .text-secondary, [data-bs-theme="dark"].premium-layout .text-muted {
  color: #b2bac2 !important;
}
[data-bs-theme="dark"].premium-layout .carousel-inner {
  background-color: #111111 !important;
  border-color: var(border-gold-dark) !important;
}
[data-bs-theme="dark"].premium-layout .btn.border {
  border-color: var(border-dark-soft) !important;
  background-color: transparent;
}
[data-bs-theme="dark"].premium-layout .btn.border.active {
  border-color: var(gold-bright) !important;
  box-shadow: 0 0 10px rgba(229, 193, 88, 0.4);
}
[data-bs-theme="dark"].premium-layout .washi-overlay {
  background-color: rgba(17, 17, 17, 0.75) !important;
}
[data-bs-theme="dark"].premium-layout nav img, [data-bs-theme="dark"].premium-layout .footer-logo {
  filter: invert(0.9) saturate(1.5) brightness(1.2);
  mix-blend-mode: lighten;
  opacity: 0.95;
}
[data-bs-theme="dark"].premium-layout .table-logo-wrapper {
  background-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 4px rgba(212, 175, 55, 0.2);
}
/* ☀️ ライトモード（通常白背景時）の強制一括管理 */
[data-bs-theme="light"].premium-layout {
  background-color: #faf9f6 !important;
  color: #1a1a1a !important;
}
[data-bs-theme="light"].premium-layout nav, [data-bs-theme="light"].premium-layout section, [data-bs-theme="light"].premium-layout footer, [data-bs-theme="light"].premium-layout .bg-white {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}
[data-bs-theme="light"].premium-layout .bg-light {
  background-color: #faf9f6 !important;
  color: #1a1a1a !important;
}
[data-bs-theme="light"].premium-layout .text-dark, [data-bs-theme="light"].premium-layout h1, [data-bs-theme="light"].premium-layout h2, [data-bs-theme="light"].premium-layout h3 {
  color: #1a1a1a !important;
}
[data-bs-theme="light"].premium-layout .text-secondary {
  color: #495057 !important;
}
[data-bs-theme="light"].premium-layout .text-muted {
  color: #6c757d !important;
}
[data-bs-theme="light"].premium-layout .carousel-inner {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
[data-bs-theme="light"].premium-layout .washi-overlay {
  background-color: rgba(250, 249, 246, 0.85) !important;
}
/* ==========================================================================
   7. Specific Responsive Contexts (特定エリア個別の補正)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  body:not([data-bs-theme="light"]) .user-contact-container .contact-main-card {
    background-color: #2b3035 !important;
    border: 1px solid #495057 !important;
  }
  body:not([data-bs-theme="light"]) .user-contact-container .contact-top-card, body:not([data-bs-theme="light"]) .user-contact-container .contact-phone-box, body:not([data-bs-theme="light"]) .user-contact-container .contact-icon-circle {
    background-color: #212529 !important;
  }
  body:not([data-bs-theme="light"]) .user-contact-container .contact-card-title, body:not([data-bs-theme="light"]) .user-contact-container .contact-phone-link {
    color: #f8f9fa !important;
  }
}
/* PC環境のホバー制御とレイアウト */
@media (min-width: 992px) {
  .footer-links div ul li {
    text-align: left;
    padding-left: 15%;
  }
  .dropdown-menu-center {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .dropdown-menu {
    margin-top: 10px !important;
    background-color: var(bs-tertiary-bg);
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
  }
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
/* ==========================================================================
   8. Small Screen Optimizations (スマホ向け調整)
   ========================================================================== */
@media (max-width: 412px) {
  nav.navbar {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }
  nav.navbar .nav-logo {
    max-height: 36px !important;
  }
  nav.navbar .d-flex.align-items-center.ms-auto.order-lg-last .btn {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    margin-right: 0.1rem !important;
  }
  nav.navbar .navbar-toggler {
    padding: 0.25rem 0.35rem !important;
  }
}
/* ==========================================================================
   9. Multi-Language Controls (多言語切り替え制御)
   ========================================================================== */
.tetsubin-zh {
  display: none;
}
html[lang="zh-TW"] .tetsubin-en {
  display: none !important;
}
html[lang="zh-TW"] .tetsubin-zh-tw {
  display: block !important;
}
html[lang="zh-CN"] .tetsubin-en {
  display: none !important;
}
html[lang="zh-CN"] .tetsubin-zh-cn {
  display: block !important;
}
/* ==========================================================================
   10. インフォメーションボックスの見た目の共通化（ダークモード対応）
   ========================================================================== */
.info-box-container {
  padding: 1.5rem;
  /* ダークモード時：より暗いグレー、ライトモード時：明るいグレー */
  background-color: var(bs-tertiary-bg);
  border: 1px solid var(bs-border-color);
  border-radius: 0.5rem;
  font-family: serif;
  font-size: 0.85rem;
  line-height: 1.7;
  /* 文字色は「secondary」変数を使うことで、テーマに合わせて自動で白っぽく調整されます */
  color: var(bs-secondary-color);
}
.info-box-title {
  display: block;
  font-weight: bold;
  /* ダークモードでもしっかり目立つように、明度を調整したテキストカラーに */
  color: var(bs-emphasis-color);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}
.info-box-text {
  margin-bottom: 0;
  text-align: justify;
}
/* --- 商品カテゴリーエリアのスタイル設定 --- */
.product-category-title {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--gold-muted); /* 既存のゴールド変数 */
}
/* 各カテゴリーの見出し（枠線付き）*/
.category-block-title {
  letter-spacing: 0.05em;
  color: var(--bs-body-color); /* 標準のテキストカラーに追従 */
  border-bottom: 1px solid var(--bs-border-color-translucent) !important; /* テーマ依存の細線 */
}
/* 通常アクティブなリンク設定 */
.category-link {
  color: var(--bs-body-color); /* ライト時は黒系、ダーク時は白系に自動反転 */
  transition: opacity 0.2s ease;
}
.category-link:hover {
  color: var(--bs-link-hover-color); /* ホバー時の色もBootstrapの標準に依存 */
  opacity: 0.8;
}
/* アイコン画像のリセット */
.category-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
/* 未公開（順次公開）アイテムの表示制御 */
.upcoming-item {
  font-size: 0.85rem;
  opacity: 0.5; /* 一律で薄く表示 */
}
/* 未公開アイテム内の (順次公開) スモールテキスト */
.upcoming-item small {
  font-size: 0.65rem;
  margin-left: 0.25rem;
}
/* --- 【重要】ダークブラウンテーマ（ダークモード）用の上書き設定 --- */
[data-bs-theme="dark"] .category-block-title {
  color: #f8f9fa; /* ダーク表示の際の見出しをくっきり明るく */
}
[data-bs-theme="dark"] .category-link {
  color: #e9ecef; /* ダーク表示の際のリンク文字色 */
}
[data-bs-theme="dark"] .upcoming-item {
  color: #adb5bd; /* ダーク表示の際の未公開アイテムの文字色 */
  opacity: 0.4;
}
/* --- ナビゲーションバーのカスタム設定 --- */
/* ナビ全体の設定 */
.navbar-custom {
  padding: 0.75rem 0;
  border-color: rgba(212, 175, 55, 0.1) !important;
}
/* ロゴのサイズと動き */
.nav-logo {
  max-height: 50px;
  transition: filter 0.3s ease;
}
/* 右側アイコンボタン（テーマ・言語・カート） */
.nav-icon-btn {
  color: var(--bs-body-color);
  background-color: transparent;
}
.nav-icon-btn:hover {
  background-color: var(--bs-tertiary-bg); /* ホバー時のうっすら背景 */
}
/* アイコン自体の色（ゴールド系） */
.nav-gold-icon {
  color: var(--gold-muted, #cda756); /* 変数がない場合のフォールバック色も指定 */
}
/* アイコン横のテキスト */
.nav-icon-text {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
/* スマホ用トグルボタン */
.nav-toggler-custom {
  font-size: 0.9rem;
}
/* メインメニューのリンク（商品を探す・ご予算・お問い合わせ） */
.nav-main-link {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
/* メインメニュー下の英語表記 */
.nav-sub-english {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  transform: scale(0.9);
  opacity: 0.8;
  margin-top: 0.1rem;
} /* 基本（スマホなどの小さな画面用）のサイズ */
.nav-logo {
  max-height: 30px;
  transition: filter 0.3s ease;
  width: auto;
}
/* 画面幅が992px以上（PC用）のサイズ */
@media (min-width: 992px) {
  .nav-logo {
    max-height: 45px;
  }
}
/* ==========================================================================
   カテゴリーセクション & コンパクトアイテムカードスタイル
   ========================================================================== */

/* セクション全体の余白 */
.wf-category-section {
  margin-bottom: 2.5rem;
}

/* タイトルとサブタイトル */
.wf-category-title {
  color: #333333;
  font-weight: bold;
  font-size: 1.4rem; /* 少しコンパクトに */
  margin-top: 0;
  margin-bottom: 0.2rem;
}

.wf-category-subtitle {
  font-size: 0.8rem;
  color: #777777;
  letter-spacing: 0.05em;
}

/* --- コンパクト・アイテムカード基本設定 --- */
.item-card {
  display: block;
  padding: 1.25rem 0.5rem !important; /* 上下左右の余白をギュッと縮小 */
  border: 1px solid #e9e9e9 !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 通常カードのホバー */
a.item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #d0d0d0 !important;
}

/* --- 【改善】順次公開（未公開）カードのスタイル --- */
.item-card-pending {
  background-color: #fcfcfc !important;
  border: 1px dashed #cccccc !important; /* 枠線を点線にして未完成感を出す */
  opacity: 0.65;                         /* 全体を少し薄くして背景に馴染ませる */
}

/* 未公開カード内の画像をモノクロ（白黒）にする */
.item-card-pending .item-icon-wrap img {
  filter: grayscale(100%);
}

/* --- 丸型アイコン枠（サイズ縮小版） --- */
.item-icon-wrap {
  width: 70px;                       /* 90px から 70px に縮小 */
  height: 70px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0.75rem;            /* 下の隙間を詰めました */
  margin-left: auto;
  padding: 12px;                     /* 枠に合わせた画像余白 */
  background-color: #f9f9f9;
  border-radius: 50%;
  overflow: hidden;
}

.item-icon-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* --- カード内テキスト --- */
.item-cat-text {
  display: block;
  font-size: 0.7rem;                 /* ほんの少し小さく */
  color: #999999;
  margin-bottom: 0.25rem;
}

.item-title {
  font-size: 0.95rem;                /* 1.05rem から 0.95rem に縮小 */
  font-weight: bold;
  color: #333333;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.3;
}

/* 順次公開用テキスト */
.item-pending-text {
  font-size: 0.75rem;
  font-weight: normal;
  color: #888888;
  display: block;                    /* 改行してタイトルをスッキリさせる */
  margin-top: 2px;
}

/* 【改善】COMING SOON バッジスタイル */
.badge-coming-soon {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  background-color: #e0e0e0;         /* 目立ちすぎないグレーに変更 */
  color: #555555;
  padding: 2px 6px;
  margin-bottom: 0.5rem;
  border-radius: 2px;
}