@charset "UTF-8";
/* =========================================================
   DOG LUCK — DARK レイヤー（全体を暗い高級トーンへ統一）
   ※ 最後に読み込み、明るい背景を上書きする
   ========================================================= */

:root {
  --bg:        #141110;  /* 基調（ほぼ黒・暖かみ） */
  --bg-2:      #1a1613;  /* セクション交互 */
  --surface:   #211c17;  /* カード面 */
  --surface-2: #2a241d;  /* 一段上げ */
  --line-soft: rgba(245, 240, 232, .10);
  --line:      rgba(245, 240, 232, .16);
}

/* ---- ベース ---- */
.bespoke { background-color: var(--bg); color: var(--washi); }
/* 地紋は暗地に合わせて控えめに発光 */
.bespoke::after { mix-blend-mode: soft-light; opacity: .07; }

/* ---- 明るい背景セクション → ダーク化 ---- */
.statement,
.hook,
.concept,
.process,
.assurance,
.lead-block,
.products { background: var(--bg); color: var(--washi); }

.why,
.gallery,
.voice,
.feature { background: var(--bg-2); color: var(--washi); }

/* ---- 見出し・本文の色 ---- */
.section-title { color: var(--washi); }
.section-title .en { color: var(--gold-soft); opacity: .9; }
.statement__lead,
.hook__q,
.lead-block__text,
.concept__poem { color: var(--washi); }
.statement__body,
.why__head p,
.feature__lead,
.split__body p,
.cover__body p,
.hook__sub { color: rgba(245, 240, 232, .76); }
.statement__lead .em,
.lead-block__text [style],
.concept__poem .em,
.hook__q .mark,
.feature__lead .em { color: var(--gold-soft) !important; }

/* ---- カード類 → ダーク面 ---- */
.value,
.pcard,
.assure,
.hslide,
.product .summary { background: var(--surface); border-color: var(--line-soft); }
.value:hover,
.pcard:hover,
.hslide:hover { border-color: var(--gold-line); box-shadow: 0 30px 70px -34px #000; }
.value__title,
.pcard__title,
.hslide__title,
.assure__title { color: var(--washi); }
.value__desc,
.assure__desc { color: rgba(245, 240, 232, .72); }
.value__no { color: var(--gold-soft); }
.pcard__cta,
.hslide__cta { color: var(--washi); border-top-color: var(--line-soft); }
.assure { border-top-color: var(--gold); }
.assure__icon { color: var(--gold-soft); }

/* ---- お試しパック（FEATURE） ---- */
.feature__price { color: var(--gold-soft); }
.feature__price .tax { color: rgba(245, 240, 232, .55); }
.feature__badge { background: var(--shu); color: #fff; }

/* ---- ギャラリーの隙間は漆黒 ---- */
.gallery__item { background: #000; }

/* ---- ヘッダー（不透明時）→ トップと同じ温かみのある明るいトーン ---- */
.site-header--solid,
.site-header.is-scrolled {
  background: rgba(245, 240, 232, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line-soft);
}
.site-header--solid .brand__sub,
.site-header.is-scrolled .brand__sub { color: var(--ink-50); }

/* ---- 固定ページ本文（prose）→ ダーク ---- */
.page-head { border-bottom-color: var(--line-soft); }
.prose { color: rgba(245, 240, 232, .82); }
.prose h2 { color: var(--washi); border-bottom-color: var(--gold); }
.prose h3 { color: var(--washi); border-left-color: var(--gold); }
.prose a { color: var(--gold-soft); }
.prose th { background: var(--surface-2); color: var(--washi); }
.prose th, .prose td { border-color: var(--line); }
.prose blockquote { border-left-color: var(--gold); color: rgba(245,240,232,.8); }

/* ---- ボタン（ダーク地向け調整） ---- */
.bespoke a.btn--ghost { color: var(--washi); border-color: var(--gold-line); }
.bespoke a.btn--ghost:hover { color: var(--ink); }
.btn--ghost::after { background: var(--gold-soft); }

/* =========================================================
   WooCommerce（白基調は woo-light.css が担当。ダークのリンク色は
   ヘッダー等へ漏れるため指定しない）
   ========================================================= */
.woocommerce ul.products li.product { background: var(--surface); border-color: var(--line-soft); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--washi); }
.woocommerce .woocommerce-result-count { color: rgba(245, 240, 232, .6); }
.woocommerce .woocommerce-ordering select { background: var(--surface-2); color: var(--washi); border-color: var(--line); }
.woocommerce div.product .product_title { color: var(--washi); }
.woocommerce div.product .woocommerce-product-details__short-description { color: rgba(245,240,232,.8); border-color: var(--line-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--surface); border-color: var(--line-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: rgba(245,240,232,.8); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--surface-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--washi); }
.woocommerce .quantity .qty { background: var(--surface-2); color: var(--washi); border-color: var(--line); }
.woocommerce table.shop_table { background: var(--surface); color: var(--washi); border-color: var(--line); }
.woocommerce table.shop_table th { background: var(--surface-2); color: var(--washi); }
.woocommerce table.shop_table td { color: rgba(245,240,232,.85); border-top-color: var(--line-soft); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review { background: var(--surface); border-color: var(--line); color: var(--washi); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  background: var(--surface-2) !important;
  color: var(--washi) !important;
  border-color: var(--line) !important;
}
.woocommerce form .form-row label { color: rgba(245,240,232,.85); }
.woocommerce #payment { background: var(--surface-2); }
.woocommerce #payment div.payment_box { background: var(--surface); border-color: var(--line-soft); color: rgba(245,240,232,.85); }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message { background: var(--surface); color: var(--washi); border-top-color: var(--gold); }

/* =========================================================
   グラデーション地 + 和紙の質感 + 和柄（よりリッチに）
   ========================================================= */

/* ベース：上からの淡い暖色グラデ＋全体グラデ */
.bespoke {
  background-color: var(--bg);
  background-image:
    radial-gradient(150% 70% at 50% -15%, rgba(74, 57, 38, .30), transparent 55%),
    linear-gradient(180deg, #17120e 0%, #0f0c0a 100%);
  background-attachment: fixed;
}

/* セクションを塗りつぶし→グラデーションへ（明暗のリズム） */
.statement, .hook, .concept, .process, .assurance, .lead-block, .products {
  background: radial-gradient(125% 90% at 50% 0%, #1b1611 0%, #100d0b 72%);
}
.why, .gallery, .voice, .feature {
  background: radial-gradient(125% 90% at 50% 100%, #221a13 0%, #120f0c 72%);
}
.brandbar {
  background: radial-gradient(120% 120% at 82% 50%, #241c13 0%, #100d0b 68%);
}

/* 和紙の質感を強める（soft-lightで繊維感） */
.bespoke::after { opacity: .13; mix-blend-mode: soft-light; }

/* カードもフラット→斜めグラデ面に */
.value, .pcard, .assure, .hslide {
  background: linear-gradient(158deg, #261f17 0%, #1a150f 100%);
  border-color: var(--line-soft);
}
.feature__media::after { outline-color: var(--gold-line); }

/* 和柄（麻の葉）を金で極淡くウォーターマーク */
.concept, .assurance, .brandbar { position: relative; overflow: hidden; }
.concept::before, .assurance::before, .brandbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23b08d57' stroke-width='1'%3E%3Cpath d='M30 0 L30 52 M30 52 L60 35 M30 52 L0 35 M30 52 L60 69 M30 52 L0 69 M30 52 L30 104 M0 35 L0 69 M60 35 L60 69 M0 35 L30 0 L60 35 M0 69 L30 104 L60 69'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 124px;
  opacity: .05;
  pointer-events: none;
}
.concept > *, .assurance > *, .brandbar > * { position: relative; z-index: 1; }

/* 金の細い区切り罫（セクション境界に上品な線） */
.feature, .why, .assurance, .voice { border-top: 1px solid rgba(176,141,87,.14); }

/* =========================================================
   明暗のリズム：明るいセクション（差し色・清潔感）
   ========================================================= */
.section--light {
  background: radial-gradient(135% 90% at 50% 0%, #faf6ee 0%, #efe6d6 82%) !important;
  color: var(--ink);
  border-top: 1px solid rgba(176,141,87,.18);
}
.section--light::before { display: none !important; }
.section--light .kicker { color: var(--shika); }
.section--light .section-title { color: var(--ink); }
.section--light .section-title .en { color: var(--shika); opacity: .85; }
.section--light .why__head p,
.section--light p,
.section--light .value__desc,
.section--light .feature__lead { color: var(--ink-70); }
.section--light .why__head .section-title::after { background: var(--shu); }
/* cards on light */
.section--light .value,
.section--light .pcard {
  background: #fff;
  border-color: var(--gold-faint);
}
.section--light .value:hover,
.section--light .pcard:hover { border-color: var(--gold-line); box-shadow: 0 26px 56px -32px rgba(26,24,22,.4); }
.section--light .value__title,
.section--light .pcard__title { color: var(--ink); }
.section--light .value__no,
.section--light .pcard__price { color: var(--shika); }
.section--light .value__rule { background: var(--shu); }
.section--light .pcard__cta { color: var(--ink); border-top-color: var(--gold-faint); }
.section--light .pcard:hover .pcard__cta { color: var(--shu); }

/* =========================================================
   商品カード：高級志向リデザイン（中央寄せ・金の細線・上品なホバー）
   ========================================================= */
.section--light .pcard {
  background: #fff;
  border: 1px solid var(--gold-faint);
  border-radius: 0;
  position: relative;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s var(--ease-out);
}
/* ホバーで内側に細い金枠が浮かぶ */
.section--light .pcard::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid transparent; transition: border-color .6s var(--ease-out); z-index: 2;
}
.section--light .pcard:hover {
  transform: translateY(-8px);
  border-color: var(--gold-line);
  box-shadow: 0 40px 74px -42px rgba(26,24,22,.5);
}
.section--light .pcard:hover::after { border-color: rgba(176,141,87,.45); }

.section--light .pcard__media { aspect-ratio: 1 / 1; background: var(--washi); position: relative; overflow: hidden; }
.section--light .pcard__media img { transition: transform 1.5s var(--ease-out), filter .6s var(--ease-out); filter: saturate(1.02); }
.section--light .pcard:hover .pcard__media img { transform: scale(1.07); }

.section--light .pcard__body {
  padding: 1.8rem 1.5rem 2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1;
}
.section--light .pcard__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.02rem; line-height: 1.85; letter-spacing: .05em; color: var(--ink);
  margin: 0;
}
/* タイトル下の金の細線（区切り） */
.section--light .pcard__title::after {
  content: ""; display: block; width: 30px; height: 1px;
  margin: 1.05rem auto .1rem; background: var(--gold); opacity: .85;
}
.section--light .pcard__price {
  margin-top: .55rem;
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.22rem; letter-spacing: .03em; color: var(--shika);
}
.section--light .pcard__price .woocommerce-Price-amount { font-size: 1.22rem; }
.section--light .pcard__cta {
  margin-top: auto; padding: 1.4rem 0 .45rem; border-top: 0; width: auto;
  justify-content: center; align-items: center;
  font-family: var(--font-sans); font-size: .72rem; font-weight: 500; letter-spacing: .22em;
  color: var(--ink-70); position: relative;
}
/* 中央から伸びる朱色の下線 */
.section--light .pcard__cta::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; background: var(--shu);
  transform: translateX(-50%); transition: width .5s var(--ease-out);
}
.section--light .pcard:hover .pcard__cta { color: var(--shu); }
.section--light .pcard:hover .pcard__cta::after { width: 64%; }

/* 背景写真ありの商品セクション：見出しを白系に */
.products--has-bg .kicker { color: var(--gold-soft); }
.products--has-bg .section-title { color: var(--washi); }
.products--has-bg .section-title .en { color: var(--gold-soft); opacity: .9; }
.products--has-bg .section-title::after { background: var(--gold); }

/* SOLD OUT（在庫切れ）オーバーレイ */
.pcard--soldout .pcard__media img { filter: grayscale(.5) brightness(.62); }
.pcard__soldout {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 24, 22, .4);
}
.pcard__soldout span {
  font-family: var(--font-sans); color: #fff;
  font-size: .82rem; font-weight: 600; letter-spacing: .34em; text-indent: .34em;
  padding: .75em 1.55em; border: 1px solid rgba(245, 240, 232, .85);
}
/* 在庫切れでもホバーのズームは抑える（上品に） */
.pcard--soldout:hover .pcard__media img { transform: none; }
/* voice on light */
.section--light .voice__q { color: var(--ink); }
.section--light .voice__q .mark { color: var(--shu); }
.section--light .voice__name { color: var(--ink-70); }

/* =========================================================
   差し色アクセント・セクション（お試し＝朱）
   ========================================================= */
.section--accent {
  background: linear-gradient(135deg, #b23a28 0%, #8a2d1f 100%) !important;
  color: #fff;
  border: none;
}
.section--accent::before { display: none !important; }
.section--accent .kicker { color: rgba(255,255,255,.85); }
.section--accent .section-title,
.section--accent .feature__price { color: #fff; }
.section--accent .section-title .en { color: rgba(255,255,255,.8); }
.section--accent .feature__lead { color: rgba(255,255,255,.92); }
.section--accent .feature__price .tax { color: rgba(255,255,255,.7); }
.section--accent .feature__media::after { outline-color: rgba(255,255,255,.5); }
.section--accent .feature__badge { background: #fff; color: var(--shu); }
.section--accent a.btn--primary { background: #fff; border-color: #fff; color: var(--shu); }
.section--accent a.btn--primary::after { background: var(--ink); }
.section--accent a.btn--primary:hover { color: #fff; border-color: var(--ink); }
.section--accent a.btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.section--accent a.btn--ghost::after { background: #fff; }
.section--accent a.btn--ghost:hover { color: var(--shu); }

/* =========================================================
   リビール確実化：is-visible が付いた要素は必ず表示する
   ========================================================= */
.bespoke [data-reveal].is-visible,
.bespoke [data-reveal="img"].is-visible,
.bespoke [data-reveal="zoom"].is-visible { opacity: 1 !important; }
.bespoke [data-reveal="img"].is-visible { clip-path: none !important; }

/* =========================================================
   コントラスト修正（背景に同化する文字を救済）
   ========================================================= */
/* 明セクションの ghost ボタンは濃色文字（白文字の同化を防ぐ） */
.section--light a.btn--ghost { color: var(--ink); border-color: var(--gold-line); }
.section--light a.btn--ghost:hover { color: var(--washi); }
.section--light a.btn--ghost::after { background: var(--ink); }
/* 朱アクセント帯の ghost は白文字（朱地で見えるように） */
.section--accent a.btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
/* 明セクションの本文/補足が薄すぎる場合の底上げ */
.section--light .value__desc { color: var(--ink-70); }
.section--light .why__head p { color: var(--ink-70); }
/* 明セクションの kicker は鹿赤茶（金だと白地で薄い） */
.section--light .kicker { color: var(--shika); }

/* =========================================================
   ヘッダー文字の視認性（ソリッド＝明るい帯では濃インクで統一）
   ========================================================= */
.site-header--solid .brand__name,
.site-header--solid .nav__link,
.site-header--solid .nav__cart,
.site-header.is-scrolled .brand__name,
.site-header.is-scrolled .nav__link,
.site-header.is-scrolled .nav__cart { color: var(--ink); }
.site-header--solid .nav__link:hover,
.site-header--solid .nav__cart:hover,
.site-header.is-scrolled .nav__link:hover,
.site-header.is-scrolled .nav__cart:hover { color: var(--shu); }
.site-header--solid .nav-toggle,
.site-header.is-scrolled .nav-toggle { color: var(--ink); }

/* 「ご購入」ボタン（ヘッダー）：朱で目立たせ、白文字＋白アイコン */
.site-header .nav__cta {
  background: var(--shu); border-color: var(--shu); color: #fff;
  display: inline-flex; align-items: center; gap: .5em; border-radius: 999px;
}
.site-header a.nav__cta { color: #fff; }
.site-header .nav__cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.site-header .nav__cta .ico-cart { width: 1.05em; height: 1.05em; display: block; }
.site-header .nav__cta::after { background: var(--ink); }

/* =========================================================
   スマホ下部固定バー（明るい生成り・上品リデザイン）
   ========================================================= */
.mobile-bar { display: none; }
@media (max-width: 768px) {
  .mobile-bar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
    /* 完全不透明の単色＝全ページ共通の色（後ろの色を拾わない）。金の太線＋影で輪郭を確保 */
    background: #fdfaf4;
    border-top: 2px solid var(--gold, #b08d57);
    padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(0);
    transition: transform .4s var(--ease-out);
    box-shadow: 0 -6px 22px -6px rgba(26,24,22,.34), 0 -1px 0 rgba(26,24,22,.06);
  }
  .mobile-bar.is-hidden { transform: translateY(110%); }
  .mobile-bar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem;
    color: var(--ink-70); padding: .45rem .2rem; position: relative; text-decoration: none;
  }
  .mobile-bar__item:active { color: var(--shika); }
  .mobile-bar__ico { position: relative; display: inline-flex; }
  .mobile-bar__ico svg { width: 23px; height: 23px; display: block; stroke: currentColor; stroke-width: 1.5; }
  .mobile-bar__label { font-size: .62rem; letter-spacing: .14em; font-weight: 600; color: var(--ink); }
  /* 区切りは細い金のヘアライン（短め・中央） */
  .mobile-bar__item + .mobile-bar__item::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 44%; background: var(--gold-faint);
  }
  .mobile-bar__badge {
    position: absolute; top: -7px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--shu); color: #fff; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: 0;
    box-shadow: 0 2px 6px -1px rgba(193,66,46,.5);
  }
}

/* =========================================================
   ミニカート（カートにホバーで商品プルダウン）
   ========================================================= */
.nav__cart-wrap { position: relative; }
.mini-cart-panel {
  position: absolute; top: 100%; right: 0; z-index: 200;
  width: 340px; max-width: 86vw; margin-top: .55rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--gold-faint);
  box-shadow: 0 30px 60px -28px rgba(26,24,22,.45);
  padding: 1.2rem 1.3rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
  text-align: left;
}
/* ホバーの橋（リンクとパネルの隙間で閉じないように） */
.mini-cart-panel::before { content: ""; position: absolute; top: -.55rem; left: 0; right: 0; height: .55rem; }
.nav__cart-wrap:hover .mini-cart-panel,
.nav__cart-wrap:focus-within .mini-cart-panel { opacity: 1; visibility: visible; transform: none; }

.mini-cart-panel .woocommerce-mini-cart__empty-message { color: var(--ink-70); font-size: .9rem; text-align: center; padding: 1rem 0; margin: 0; }
.mini-cart-panel ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.mini-cart-panel li.woocommerce-mini-cart-item {
  position: relative; padding: .85rem 1.4rem .85rem 3.6rem; margin: 0;
  border-bottom: 1px solid var(--gold-faint); list-style: none;
}
.mini-cart-panel li.woocommerce-mini-cart-item img {
  position: absolute; left: 0; top: .85rem; width: 50px; height: 50px;
  object-fit: cover; border: 1px solid var(--gold-faint); margin: 0;
}
.mini-cart-panel li.woocommerce-mini-cart-item a:not(.remove) {
  color: var(--ink); font-family: var(--font-serif); font-size: .84rem; line-height: 1.5; display: block;
}
.mini-cart-panel li.woocommerce-mini-cart-item a:not(.remove):hover { color: var(--shika); }
.mini-cart-panel .woocommerce-mini-cart-item .quantity { display: block; margin-top: .25rem; color: var(--ink-70); font-size: .78rem; }
.mini-cart-panel a.remove {
  position: absolute; right: 0; top: .85rem; width: 1.4em; height: 1.4em; line-height: 1.3em; text-align: center;
  color: var(--shika) !important; font-size: 1.05rem; border-radius: 50%;
}
.mini-cart-panel a.remove:hover { background: var(--shu); color: #fff !important; }
.mini-cart-panel .woocommerce-mini-cart__total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .95rem 0; margin: 0 0 .9rem; border-bottom: 1px solid var(--gold-faint);
  font-family: var(--font-serif); font-size: .95rem; color: var(--ink);
}
.mini-cart-panel .woocommerce-mini-cart__total .amount { color: var(--shika); font-weight: 700; }
.mini-cart-panel .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; }
.mini-cart-panel .woocommerce-mini-cart__buttons a {
  display: block; text-align: center; padding: .9em 1em; border-radius: 0;
  font-family: var(--font-sans); font-size: .76rem; letter-spacing: .12em; font-weight: 600;
}
.mini-cart-panel .woocommerce-mini-cart__buttons a.button { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.mini-cart-panel .woocommerce-mini-cart__buttons a.button:hover { background: var(--ink); color: #fff; }
.mini-cart-panel .woocommerce-mini-cart__buttons a.checkout { background: var(--shu); border: 1px solid var(--shu); color: #fff; }
.mini-cart-panel .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--ink); border-color: var(--ink); }
/* スマホはドロワー＋下部バーに任せるため非表示 */
@media (max-width: 980px) { .mini-cart-panel { display: none !important; } }