/* =====================================================
   White Snow Paws - サイト共通スタイル上書き
   （モノトーン × Lutie参照デザイン）
   ===================================================== */

/* ============================================
   カラー変数をモノトーンに上書き
   ============================================ */
:root {
  --color-bg-main:      #F7F7F7;
  --color-bg-wood:      #EFEFEF;
  --color-bg-dark:      #111111;
  --color-text-main:    #111111;
  --color-text-sub:     #666666;
  --color-accent:       #111111;
  --color-accent-hover: #444444;
  --color-accent-warm:  #888888;
  --color-wood-light:   #DDDDDD;
  --color-wood-medium:  #999999;
  --color-wood-dark:    #555555;
  --color-dark:         #111111;
}

/* ============================================
   ベース
   ============================================ */
/* 木目背景テクスチャ（PC） */
body {
  background-color: #FFFFFF !important;
  background-image: url('../images/hero/whiteash.jpg') !important;
  background-repeat: repeat !important;
  background-size: 600px !important;
  background-attachment: fixed !important;
}
body::before { display: none; } /* ヘリンボーン背景テクスチャ無効化 */

/* ヘッダー中央テキストロゴ */
.header-center-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  white-space: nowrap;
}
.header-inner { position: relative; }

/* ロゴ画像（PC用） */
.logo-img {
  height: 36px;
  width: auto;
  display: block;
}
.footer-logo .logo-img { height: 44px; }
.footer-logo-img-link {
  display: block;
  transform: translateX(60px);
}
.footer-logo-img-large {
  height: 132px;
  width: auto;
  display: block;
  opacity: 0.85;
}
@media (min-width: 768px) {
  .logo-img { height: 44px; margin-left: 30px; }
}

/* モバイル: ロゴ画像非表示・テキストのみ表示 */
@media (max-width: 767px) {
  .header-inner > .logo { display: none; }
  .header-center-logo {
    position: static !important;
    transform: none !important;
    left: auto !important;
    font-size: 20px;
  }
  .footer-logo-img-link { display: none; }
}

/* カテゴリーカード: モバイルでアスペクト比統一 */
@media (max-width: 767px) {
  .category-card-main,
  .category-card-sub {
    aspect-ratio: 16 / 9 !important;
  }
}

/* セクション半透明（木目を透かす） */
.section:not(.section-wood) { background: rgba(255,255,255,0.80) !important; }
.section-wood { background: rgba(255,255,255,0.80) !important; }
.story-section { background: rgba(255,255,255,0.80) !important; }

/* 商品ラインナップセクション: ウォールナット背景（上記を上書き） */
#products {
  background: url('../images/hero/walnut.jpg') repeat fixed !important;
  background-size: 600px !important;
}
#products .section-heading-en { color: rgba(255,255,255,0.6) !important; }
#products .section-heading-jp { color: #fff !important; }
#products .section-heading { border-color: rgba(255,255,255,0.2) !important; }
.wood-frame::before { display: none !important; }

/* サブページのメインコンテンツにも白半透明 */
.cart-content,
.checkout-content,
.contact-content,
.faq-content,
.privacy-content,
.terms-content,
.tradelaw-content,
.mypage-content,
.mypage-main,
.cancel-main,
.complete-main {
  background: rgba(255,255,255,0.80) !important;
}

/* サブページ: PC全幅白背景（indexと統一） */
.detail-content,
.cart-content,
.checkout-content,
.category-content,
.wb-page-content {
  background: rgba(255,255,255,0.80) !important;
}
@media (min-width: 769px) {
  .detail-content {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .detail-content > * {
    max-width: 1090px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  .cart-content,
  .checkout-content {
    max-width: none !important;
    padding-left: calc((100% - 1090px) / 2 + 20px) !important;
    padding-right: calc((100% - 1090px) / 2 + 20px) !important;
  }
  .contact-content {
    max-width: none !important;
    padding-left: calc((100% - 760px) / 2 + 20px) !important;
    padding-right: calc((100% - 760px) / 2 + 20px) !important;
  }
  .faq-content {
    max-width: none !important;
    padding-left: calc((100% - 800px) / 2 + 20px) !important;
    padding-right: calc((100% - 800px) / 2 + 20px) !important;
  }
  .login-container {
    max-width: none !important;
    padding-left: calc((100% - 460px) / 2 + 20px) !important;
    padding-right: calc((100% - 460px) / 2 + 20px) !important;
  }
  .register-container {
    max-width: none !important;
    padding-left: calc((100% - 520px) / 2 + 20px) !important;
    padding-right: calc((100% - 520px) / 2 + 20px) !important;
  }
  .mypage-content {
    max-width: none !important;
    padding-left: calc((100% - 1000px) / 2 + 20px) !important;
    padding-right: calc((100% - 1000px) / 2 + 20px) !important;
  }
  .complete-main {
    max-width: none !important;
    padding-left: calc((100% - 640px) / 2 + 20px) !important;
    padding-right: calc((100% - 640px) / 2 + 20px) !important;
  }
  .cancel-main {
    max-width: none !important;
    padding-left: calc((100% - 560px) / 2 + 20px) !important;
    padding-right: calc((100% - 560px) / 2 + 20px) !important;
  }
  .tradelaw-content {
    max-width: none !important;
    padding-left: calc((100% - 800px) / 2 + 20px) !important;
    padding-right: calc((100% - 800px) / 2 + 20px) !important;
  }
}

/* login/register はbodyクラスでページ全体を管理 */
.login-page,
.register-page,
.cancel-page,
.complete-page {
  background-color: transparent !important;
}
.login-page > *:not(.header):not(.footer):not(.login-hero):not(script):not(link),
.register-page > *:not(.header):not(.footer):not(.register-hero):not(script):not(link) {
  background: rgba(255,255,255,0.80) !important;
}

/* ヒーローはダーク背景なので白半透明は不要 */
.cart-hero,
.privacy-hero,
.terms-hero,
.tradelaw-hero,
.detail-hero,
.mypage-hero {
  background: linear-gradient(180deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.80) 100%) !important;
}

/* フッターも背景を明示 */
.footer {
  background: #111111 !important;
}

/* スマホ用: iOS Safari対応（background-attachment:fixedが効かない） */
@media (max-width: 768px) {
  body {
    background-image: none !important;
  }
  body::before {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('../images/hero/whiteash.jpg') !important;
    background-repeat: repeat !important;
    background-size: 300px !important;
    opacity: 0.8;
    z-index: -10;
    pointer-events: none;
  }
  .section:not(.section-wood) { background: rgba(255,255,255,0.45) !important; }
  .section-wood { background: rgba(255,255,255,0.45) !important; }
  .story-section { background: rgba(255,255,255,0.45) !important; }
  .cart-content,
  .checkout-content,
  .contact-content,
  .faq-content,
  .privacy-content,
  .terms-content,
  .tradelaw-content,
  .detail-content,
  .detail-main,
  .mypage-content,
  .mypage-main,
  .cancel-main,
  .complete-main,
  .category-content {
    background: rgba(255,255,255,0.45) !important;
  }
  .login-page > *:not(.header):not(.footer):not(.login-hero):not(script):not(link),
  .register-page > *:not(.header):not(.footer):not(.register-hero):not(script):not(link) {
    background: rgba(255,255,255,0.45) !important;
  }
}

/* ============================================
   ヘッダー: ダーク系
   ============================================ */
.header {
  background: rgba(17, 17, 17, 0.95) !important;
  backdrop-filter: blur(8px);
}
.header.scrolled {
  background: rgba(17, 17, 17, 0.98) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) !important;
}
/* ナビバー: ウォールナット背景（商品セクションと統一） */
.desktop-nav {
  background: url('../images/hero/walnut.jpg') repeat fixed !important;
  background-size: 600px !important;
}

/* スクロール後もナビ文字は白を維持 */
.header.scrolled .desktop-nav a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.header.scrolled .desktop-nav a:hover {
  color: #FFFFFF !important;
}

/* ============================================
   セクション背景
   ============================================ */
.section-wood { background: #EFEFEF !important; }
.wood-plank-divider,
.herringbone-divider {
  background: #DDDDDD !important;
  height: 1px !important;
}

/* ============================================
   フレーム・カード: ボーダーフラット化
   ============================================ */
.wood-frame,
.wood-frame-sm { box-shadow: none !important; border: 1px solid #CCCCCC !important; }

.product-card.wood-frame {
  background: #FFFFFF !important;
  border: 1px solid #EEEEEE !important;
  box-shadow: none !important;
}

/* ============================================
   コンテナ幅: Lutie に合わせて 1090px
   ============================================ */
.container {
  max-width: 1090px !important;
}

/* ============================================
   商品グリッド: タイトに詰める
   ============================================ */
.product-grid {
  gap: 8px !important;
}
.product-card-info {
  padding: 10px 8px 14px !important;
}
.product-desc {
  display: none !important;
}
/* 商品カード: 高さ統一 */
.product-grid {
  align-items: stretch !important;
}
.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-card-image {
  overflow: hidden !important;
}
.product-card-info {
  flex: 1 !important;
}

/* hover: 画像ズームイン（フェードなし） */
.product-card-image img {
  transition: transform 0.4s ease !important;
  opacity: 1 !important;
}
.product-card:hover .product-card-image img {
  transform: scale(1.06) !important;
  opacity: 1 !important;
}
.product-card:hover {
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ============================================
   ボタン: 枠線 + border-radius 5px（Lutie風）
   ============================================ */
.btn-primary {
  background: transparent !important;
  border: 1px solid #111111 !important;
  color: #111111 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  transition: background 0.3s, color 0.3s, opacity 0.3s !important;
}
.btn-primary:hover {
  background: #111111 !important;
  color: #FFFFFF !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.8;
}
/* ヒーロー・ストーリーなど暗い背景上 */
.hero .btn-primary,
.story-content .btn-outline {
  border-color: rgba(255,255,255,0.8) !important;
  color: #FFFFFF !important;
  border-radius: 5px !important;
}
.hero .btn-primary:hover {
  background: #FFFFFF !important;
  color: #111111 !important;
}

/* カートボタン */
.btn-add-cart {
  background: transparent !important;
  border: 1px solid #CCCCCC !important;
  color: #666666 !important;
  border-radius: 5px !important;
  transition: opacity 0.3s !important;
}
.btn-add-cart:hover {
  background: #111111 !important;
  color: #FFFFFF !important;
  border-color: #111111 !important;
  transform: none !important;
  opacity: 0.8;
}

/* アウトラインボタン */
.btn-outline {
  border-radius: 5px !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
}
.btn-outline:hover {
  background-color: rgba(255,255,255,0.15) !important;
  transform: none !important;
}

/* ============================================
   セクション見出し: Lutie スタイル
   英語ラベル（小・グレー）→ 日本語メイン（大・明朝）
   ============================================ */
.section-heading {
  border-top: 1px solid #CCCCCC !important;
  border-bottom: 1px solid #CCCCCC !important;
  padding: 20px 0 !important;
  margin-bottom: 48px !important;
}
.section-heading-en {
  font-family: 'Cinzel', serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
  color: #999999 !important;
  margin-bottom: 10px !important;
}
.section-heading-jp {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(24px, 4vw, 38px) !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: #464646 !important;
  text-shadow: none !important;
  line-height: 1.4 !important;
}
.section-heading-line {
  display: none !important;
}

/* 商品ラインナップセクション: 見出し文字を白に */
#products .section-heading-en { color: rgba(255,255,255,0.6) !important; }
#products .section-heading-jp { color: #fff !important; }
#products .section-heading { border-color: rgba(255,255,255,0.2) !important; }

/* ============================================
   お知らせバー
   ============================================ */
.notice-bar {
  background: #111111 !important;
  color: #FFFFFF !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* ============================================
   ストーリーセクション
   ============================================ */
.story-bg    { filter: grayscale(100%) !important; }
.story-overlay { background: rgba(0,0,0,0.55) !important; }
.story-content h2,
.story-sub   { color: #FFFFFF !important; }

/* ============================================
   オーダーステップ
   ============================================ */
.order-step.wood-sign {
  background-image: none !important;
  background: #FFFFFF !important;
  border: 1px solid #CCCCCC !important;
  box-shadow: none !important;
}

/* ============================================
   カテゴリー / ギャラリー
   ============================================ */
.category-card           { border: 1px solid #CCCCCC !important; }
.gallery-item.wood-frame { background: #FFFFFF !important; }

/* ============================================
   お知らせセクション
   ============================================ */
.news-list {
  list-style: none;
  border-top: 1px solid #CCCCCC;
}
.news-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #CCCCCC;
}
.news-date {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: #999999;
  white-space: nowrap;
  flex-shrink: 0;
}
.news-tag {
  font-size: 11px;
  color: #FFFFFF;
  background: #464646;
  padding: 2px 10px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.news-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  color: #464646;
  text-decoration: none;
  line-height: 1.6;
}
.news-title:hover {
  text-decoration: underline;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .news-item {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ============================================
   フッター
   ============================================ */
.footer { background: #111111 !important; }

/* ============================================
   バッジ
   ============================================ */
.product-tag {
  background: #111111 !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
}
.product-tag.sale { background: #555555 !important; }
.product-tag.new  { background: #888888 !important; }

/* ============================================
   BioThane左側スライダー
   ============================================ */
.biothane-image {
  aspect-ratio: 1 / 1 !important;
}
.biothane-main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #F7F7F7;
}
.biothane-main-swiper .biothane-main-pagination {
  bottom: 10px;
}
.biothane-main-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.6);
  opacity: 1;
}
.biothane-main-swiper .swiper-pagination-bullet-active {
  background: #FFFFFF;
}

/* =====================================================
   サブページ共通上書き
   （各ページ固有の<style>タグのウッド系色をモノトーンに）
   ===================================================== */

/* ============================================
   ヒーローセクション（全ページ共通）
   ============================================ */

/* ヘリンボーン背景を全ページで無効化 */
.login-hero::before,
.register-hero::before,
.cart-hero::before,
.detail-hero::before,
.mypage-hero::before,
.contact-hero::before,
.faq-hero::before,
.checkout-hero::before,
.privacy-hero::before,
.terms-hero::before,
.tradelaw-hero::before {
  display: none !important;
}

/* ヒーロー背景をダーク系（index統一）に */
.cart-hero,
.detail-hero,
.mypage-hero,
.privacy-hero,
.terms-hero,
.tradelaw-hero {
  background: linear-gradient(180deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.80) 100%) !important;
}

/* ヒーロー内の英語ラベル（Playfair Display → Cinzel） */
.login-hero-en,
.register-hero-en,
.cart-hero-en,
.mypage-hero-en,
.contact-hero-en,
.faq-hero-en,
.checkout-hero-en,
.complete-en,
.cancel-en,
.privacy-hero-en,
.terms-hero-en,
.tradelaw-hero-en {
  font-family: 'Cinzel', serif !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ヒーロー内の日本語見出し（Zen Old Mincho → Noto Serif JP） */
.login-hero h1,
.register-hero h1,
.cart-hero h1,
.detail-hero h1,
.mypage-hero h1,
.contact-hero h1,
.faq-hero h1,
.checkout-hero h1,
.privacy-hero h1,
.terms-hero h1,
.tradelaw-hero h1 {
  font-family: 'Noto Serif JP', serif !important;
  color: #FFFFFF !important;
}

/* ============================================
   カード・コンテナ背景
   ============================================ */
.login-card,
.register-container .login-card,
.cart-item,
.mypage-sidebar,
.complete-card,
.cancel-card,
.checkout-form-card,
.checkout-summary {
  background: #FFFFFF !important;
  border-color: #CCCCCC !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 5px !important;
}

/* ユーザー情報エリア */
.mypage-user-info {
  background: #F7F7F7 !important;
  border-bottom-color: #EEEEEE !important;
}

/* ============================================
   カードタイトル・ボーダー
   ============================================ */
.login-card-title {
  font-family: 'Noto Serif JP', serif !important;
  color: #464646 !important;
  border-bottom-color: #EEEEEE !important;
  border-bottom-width: 1px !important;
}

/* ============================================
   テキスト色（茶系 → モノトーン）
   ============================================ */

/* ダーク系テキスト */
.cart-empty h2,
.complete-title,
.cancel-title,
.mypage-user-name,
.faq-section-title,
.privacy-section h2,
.terms-section h2,
.terms-toc h3 {
  font-family: 'Noto Serif JP', serif !important;
  color: #464646 !important;
}

/* サブテキスト */
.cart-empty p,
.cart-item-color,
.complete-message,
.cancel-message,
.mypage-user-email,
.contact-intro p,
.privacy-date,
.terms-date {
  color: #666666 !important;
}

/* リンク色 */
.cart-item-info h3 a,
.breadcrumb a {
  color: #464646 !important;
}
.cart-item-info h3 a:hover,
.breadcrumb a:hover {
  color: #111111 !important;
}

/* ============================================
   ボーダー（ウッド系 → グレー）
   ============================================ */
.faq-section-title,
.privacy-section h2,
.terms-section h2 {
  border-bottom-color: #CCCCCC !important;
  border-bottom-width: 1px !important;
}

/* ============================================
   フォーム要素
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
  border-color: #CCCCCC !important;
  border-radius: 5px !important;
  background: #FFFFFF !important;
  color: #464646 !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px rgba(17,17,17,0.08) !important;
  outline: none !important;
}

/* ============================================
   ボタン（グリーン → モノトーン）
   ============================================ */

/* グリーンボタン全般 */
.btn-back-cart,
.btn-checkout,
[class*="btn-submit"],
[class*="btn-login"],
[class*="btn-register"] {
  background: #111111 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #111111 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  transition: opacity 0.3s !important;
}
.btn-back-cart:hover,
.btn-checkout:hover,
[class*="btn-submit"]:hover,
[class*="btn-login"]:hover,
[class*="btn-register"]:hover {
  background: #333333 !important;
  transform: none !important;
  opacity: 0.85;
}

/* ============================================
   FAQタブ（グリーン → モノトーン）
   ============================================ */
.faq-tab {
  border-color: #CCCCCC !important;
  color: #666666 !important;
  background: #FFFFFF !important;
  border-radius: 100px !important;
}
.faq-tab:hover,
.faq-tab.active {
  border-color: #111111 !important;
  color: #111111 !important;
  background: rgba(17,17,17,0.05) !important;
}

/* ============================================
   アバター・アイコン（グリーン → チャコール）
   ============================================ */
.mypage-avatar {
  background: linear-gradient(135deg, #333333, #111111) !important;
}
.complete-icon {
  background: linear-gradient(135deg, #333333, #111111) !important;
}
.cancel-icon {
  background: linear-gradient(135deg, #555555, #333333) !important;
}

/* ============================================
   チェックアウト ステッパー
   ============================================ */
.checkout-steps {
  background: #F7F7F7 !important;
  border-bottom-color: #EEEEEE !important;
}
.step-item {
  color: #999999 !important;
}
.step-item.active {
  color: #111111 !important;
}
.step-num {
  border-color: #CCCCCC !important;
}
.step-item.active .step-num {
  border-color: #111111 !important;
  background: #111111 !important;
}
.step-arrow {
  color: #CCCCCC !important;
}

/* ============================================
   注文番号・インフォボックス
   ============================================ */
.complete-order-num {
  font-family: 'Cinzel', serif !important;
  background: #F7F7F7 !important;
  border-color: #CCCCCC !important;
  color: #464646 !important;
  border-radius: 5px !important;
}

/* ============================================
   紹介ボックス（プライバシー・利用規約）
   ============================================ */
.privacy-intro,
.terms-intro {
  background: #F7F7F7 !important;
  border-left-color: #CCCCCC !important;
  color: #464646 !important;
}

/* 目次ボックス */
.terms-toc {
  background: #F7F7F7 !important;
  border-color: #CCCCCC !important;
}

/* ============================================
   会員特典バナー（register）
   ============================================ */
.benefit-item {
  background: #FFFFFF !important;
  background-image: none !important;
  border-color: #EEEEEE !important;
  border-radius: 5px !important;
}

/* ============================================
   商品詳細ページ
   ============================================ */
.detail-main-image {
  border: 1px solid #CCCCCC !important;
  border-radius: 5px !important;
}
.detail-thumb {
  border: 1px solid #CCCCCC !important;
  border-radius: 5px !important;
}
.detail-thumb.active {
  border-color: #111111 !important;
}

/* パンくず */
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
  color: rgba(255,255,255,0.5) !important;
}
.breadcrumb a:hover {
  color: #FFFFFF !important;
}

/* ============================================
   ウッドバーニングセクション
   ============================================ */
.wb-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.wb-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* ウッドバーニング作業スライダー */
.wb-work-swiper {
  width: 100%;
  position: relative;
}
.wb-work-swiper .swiper-slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.wb-work-pagination { bottom: 10px; }
.wb-work-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.5);
  opacity: 1;
}
.wb-work-swiper .swiper-pagination-bullet-active {
  background: #ffffff;
}
.wb-work-prev, .wb-work-next {
  color: #fff;
  background: rgba(0,0,0,0.3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.wb-work-prev::after, .wb-work-next::after { font-size: 14px; }

/* ビネット＋グラデーションオーバーレイ */
.wb-image-effect {
  position: relative;
  overflow: hidden;
}
.wb-image-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%);
  pointer-events: none;
}
.wb-text p {
  font-size: 14px;
  line-height: 2.4;
  color: #555;
  margin-bottom: 12px;
}
.wb-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
.wb-info-box {
  background: rgba(255,255,255,0.55);
  border: 1px solid #ddd;
  padding: 24px 28px;
}
.wb-info-box h3 {
  font-family: var(--font-heading-en, 'Cinzel', serif);
  font-size: 11px;
  letter-spacing: 3px;
  color: #888;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.wb-info-box ul {
  padding-left: 0;
  list-style: none;
}
.wb-info-box li {
  font-size: 13px;
  line-height: 1.9;
  color: #555;
  padding-left: 14px;
  position: relative;
  margin-bottom: 4px;
}
.wb-info-box li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: #aaa;
}
@media (max-width: 767px) {
  .wb-main       { grid-template-columns: 1fr; gap: 24px; }
  .wb-info-grid  { grid-template-columns: 1fr; gap: 16px; }
  .wb-info-box   { padding: 20px; }
}