@charset "utf-8";
/*
Theme Name: VANITAS FLOWER (Welcart Basic Child)
Theme URI: https://example-vanitas-flower.com
Description: VANITAS FLOWER 用 Welcart Basic 子テーマ。ラグジュアリー・モノクローム×ゴールドのブランドデザインを適用。
Author: VANITAS FLOWER
Template: welcart_basic
Version: 1.3.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: welcart_basic-child
*/

/* ============================================================
   VANITAS FLOWER - デザイントークン
   （wp_export/docs/design_spec.md の内容と同一。値を変更する場合は
    両方のファイルを同期してください）
   ============================================================ */
:root {
  /* ニュートラル */
  --vns-ink:        #0A0A0A;  /* 本文・見出し */
  --vns-ink-soft:   #1A1815;
  --vns-graphite:   #3A3733;
  --vns-charcoal:   #6B6660;  /* 補足テキスト */
  --vns-stone:      #A8A29A;
  --vns-sand:       #D9D3C7;
  --vns-mist:       #E8E3D8;
  --vns-paper:      #F2EEE5;
  --vns-ivory:      #F7F5F0;  /* 背景メイン（暖かみのあるオフホワイト） */
  --vns-snow:       #FBFAF6;
  --vns-white:      #FFFFFF;

  /* アクセント：シャンパンゴールド（使用は控えめに） */
  --vns-gold:       #B89968;
  --vns-gold-deep:  #8F7748;  /* ホバー時 */
  --vns-gold-light: #D9C4A0;
  --vns-gold-wash:  #F0E9DA;

  /* セカンダリー（ごく僅かに使用） */
  --vns-rose:  #C7908A;
  --vns-plum:  #4B3140;

  /* 罫線 */
  --border-hairline: rgba(10,10,10,0.08);
  --border-subtle:   rgba(10,10,10,0.14);
  --border-gold:     var(--vns-gold);

  /* フォント */
  --font-display: 'Cinzel', serif;             /* 英語見出し・ロゴ（大文字専用） */
  --font-accent:  'Cormorant Garamond', serif; /* 装飾テキスト・引用 */
  --font-jp-head: 'Shippori Mincho', serif;    /* 和文見出し */
  --font-jp-body: 'Noto Sans JP', sans-serif;  /* UI・本文 */
}

/* Google Fonts 読み込み
   （テーマの functions.php で wp_enqueue_style していますが、
    キャッシュ・CDNブロック対策として @import も残しています） */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Shippori+Mincho:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600&display=swap');


/* ============================================================
   共通ベース（Welcart Basic 親テーマの上書き）
   ============================================================ */
body {
  background-color: var(--vns-ivory);
  color: var(--vns-ink);
  font-family: var(--font-jp-body);
  letter-spacing: 0.01em;
}

/* -- サイト全体の横幅制限を解除（フルブリード対応） --
   親テーマ header.php は <div id="main" class="wrapper one-column"> または
   <div id="main" class="wrapper two-column right-set"> を出力し、
   style.css 側で PC幅（62.5em=1000px 以上）になると
     #main { width: 1000px; margin: 2.857143em auto; }
   という「幅1000px固定・中央寄せ」のボックスレイアウトを全ページに適用する。
   画面が広いモニターほど左右に大きな余白ができてしまうため（例: 画面幅1920px
   なら左右460pxずつ）、v1.4.3 でサイト全体の #main の幅制限を解除する。
   （v1.4.2まではフロントページのみ .home #main で対応していたが、
   商品詳細・ブログ記事・アーカイブ等の two-column ページにも同様の
   問題があるため、対象を #main 単体（全ページ）に拡大した。） */
#main {
  width: 100%;
  max-width: none;
}

/* two-column ページ（商品詳細・ブログ記事・アーカイブ・検索結果等）は
   #content が 750px 固定 + サイドバー #secondary が 210px 固定で
   左右に並ぶ構成になっている。下記でサイドバーを非表示にするため、
   #content 側も float を解除してブロック要素として全幅表示する。 */
#main.two-column #content {
  width: 100%;
  max-width: none;
  float: none;
}

/* -- サイドバー（ウィジェットエリア）の非表示 --
   フロントページのログイン／お勧め商品／検索・最近の投稿・最近のコメント、
   および商品詳細・ブログ記事等のカレンダー／カテゴリーウィジェットを、
   フッターメニュー以外まとめて非表示にする（ご要望により v1.4.3 で追加）。
   フッターメニュー（footer.php の #site-info / footer#colophon）は
   このセレクタ（#secondary）とは無関係の別要素のため、表示に影響しない。
   なお front-page.php では get_sidebar('home') の呼び出し自体を削除済み
   （HTML自体を出力しない、よりクリーンな対応）。他のページ（商品詳細・
   ブログ記事・アーカイブ・検索結果等）は親テーマの標準テンプレートを
   使用しているため、子テーマでテンプレートを複製せずに済むよう、
   ここでは CSS で非表示にする方式を採用している。 */
#secondary {
  display: none !important;
}

a {
  color: var(--vns-graphite);
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease;
}

a:hover {
  color: var(--vns-gold-deep);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-jp-head);
  color: var(--vns-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 英語表記見出し・ロゴ用ユーティリティ（テンプレート内で class="vns-display" を付与） */
.vns-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
}

.vns-accent {
  font-family: var(--font-accent);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ボタン全般：角丸ほぼゼロ、ヘアラインの罫線、ゴールドはホバーのみ強調 */
input[type="button"],
input[type="submit"],
input[type="reset"],
.welcart-btn,
button {
  border-radius: 0 !important;
  background-color: var(--vns-ink) !important;
  color: var(--vns-ivory) !important;
  font-family: var(--font-jp-body);
  letter-spacing: 0.08em;
  border: 1px solid var(--vns-ink) !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.welcart-btn:hover,
button:hover {
  background-color: var(--vns-gold) !important;
  border-color: var(--vns-gold) !important;
  color: var(--vns-ink) !important;
  cursor: pointer;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="url"],
textarea,
select {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background-color: var(--vns-white);
  color: var(--vns-ink);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--vns-gold) !important;
}


/* ============================================================
   ヘッダー（header.php: #masthead, .site-description, .site-title, #site-navigation）
   v1.4.9: ヘッダーエリア全体を黒背景に変更（ロゴ・検索・ログイン・
   カート・ナビゲーション文字はすべて白系＝アイボリーに統一）。
   v1.4.12: セレクタを `header`（タグ名指定）から `#masthead`（IDセレクタ）に
   修正。`<header>` タグは画面共通のサイトヘッダーだけでなく、記事・固定
   ページの見出し（`template-parts/content.php` の `<header class="entry-header">`
   や本テーマの `.vns-legal__header`）にも使われているため、タグ名だけの
   指定だと記事タイトル部分まで黒背景になってしまい、黒地に黒文字で
   タイトルが読めなくなる不具合があった。

   v1.4.13: スマホでヘッダーのユーザーアイコン（会員メニュー）をタップして
   「ゲスト／ログイン／新規会員登録」のドロップダウン（`.snav .membership ul`,
   `position:absolute; z-index:2`）を開くと、直下にあるトップページの
   ヒーローセクション（`.vns-hero__inner`, `position:absolute; z-index:2`）に
   隠れて、ロゴやボタンが透けて見える不具合を修正。
   原因は `#masthead` が `position: relative` は指定されているものの
   `z-index` が `auto`（未指定）だったため、新しいスタッキングコンテキストを
   確立しておらず、`#masthead` 内のドロップダウン（z-index:2）と、兄弟要素
   `.vns-hero` 内の `.vns-hero__inner`（同じ z-index:2）が同一階層で比較され、
   後にDOM上で出現する `.vns-hero__inner` 側が上に描画されていたため。
   `#masthead` に明示的な `z-index` を指定して独立したスタッキング
   コンテキストを確立し、ヘッダー配下の要素が確実に本文コンテンツより
   上に表示されるようにした。
   ============================================================ */
#masthead {
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-color: var(--vns-ink) !important;
  transition: background-color 320ms ease, border-color 320ms ease;
}

.site-description {
  background: var(--vns-ink) !important;
  color: var(--vns-gold-light) !important;
  font-family: var(--font-jp-body);
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: background-color 320ms ease;
}

/* ============================================================
   トップページ限定の「透明ヘッダー」演出
   （js/transparent-header.js が付け外しする .vns-header--transparent）

   トップページのみ、ページ最上部（ヒーローセクションの上、まだ
   スクロールしていない状態）にいる間はヘッダー（#masthead 本体・
   検索/会員/カート行・ナビゲーションメニュー行の計2段）を透明にし、
   ヒーローの背景写真がヘッダーの裏まで透けて見えるようにする。
   少しでもスクロールすると、JSが `.vns-header--transparent` クラスを
   外し、CSSのフォールバック（#masthead の既定スタイル）である
   通常の黒背景ヘッダーへ滑らかに切り替わる。

   - 対象を `body.home #masthead.vns-header--transparent` に限定して
     いるため、トップページ以外のページ（商品詳細・固定ページ等）や、
     JS未実行時（クラスが付かない）は一切影響を受けず、常に元の
     黒背景ヘッダーのまま表示される。
   - ヘッダー自体は `position: relative`（通常のドキュメントフロー）
     のままなので、透明にしただけではヒーロー画像に重ならない。
     そのため `body.home` に限り `#masthead` を `position: absolute`
     にしてヒーローセクションの上に重ね、ヒーロー側
     （`body.home .vns-hero`）にヘッダー分の余白を確保することで
     見た目の高さを維持している（トップページ以外は影響なし）。
   - `!important` を付けている項目は、上記の黒背景ヘッダー用ルール
     （同じくすべて `!important`）に確実に勝つため。
   - `body.home` はWordPressの「表示設定」が「最新の投稿」
     （show_on_front=posts）になっているため、celebrationドメインの
     フロントページにも付与されてしまう。celebration側は透明ヘッダー
     演出を使わない（そもそも `.vns-hero` 要素自体が存在しない）ため、
     `:not(.vns-celebration)` で明示的に除外し、ヘッダーが
     `position: fixed` になって celebration側のヒーロー画像に
     被らないようにしている。
   ============================================================ */
body.home:not(.vns-celebration) #masthead {
  /* `absolute` ではなくスクロール追従する `fixed` にする。
     absoluteのままだと、スクロール後にヘッダー自体がページと
     一緒に流れて画面外に消えてしまい、通常サイトの「ヘッダーは
     常に画面上部に居続ける」という期待動作から外れるため。
     `.vns-header--transparent` の有無で透明/黒背景を切り替える
     動作自体は fixed でも変わらない。 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ヘッダーを fixed にした分、後続の本文（#primary 以下）が
   ヘッダーの裏に隠れてしまわないよう、フロントページの本文側にも
   ヘッダー高さ相当の余白を確保する。ヒーロー自体は
   `body.home .vns-hero { padding-top: 220px; }` で既に確保済み
   だが、ヒーローの背景（写真）はヘッダーの裏まで見せたいため、
   ヒーロー"要素"自体はヘッダーの真下（y=0）から開始させ、内側の
   テキスト領域だけを padding で下げる方式にしている。 */

body.home .vns-hero {
  /* ヘッダーを absolute にしてヒーローに重ねる分、ヒーロー側の
     上端パディングでヘッダーの高さ相当の余白を確保する。
     実測のヘッダー高さ（PC幅 約189px・スマホ幅 約99px）に、
     ロゴ・ボタンとの間に十分な余白を持たせた値を加算している。 */
  padding-top: 220px;
}

@media (max-width: 780px) {
  body.home .vns-hero {
    padding-top: 0;
  }
  /* スマホ幅はヒーロー内部（.vns-hero__inner）が position:absolute で
     画面いっぱいに広がり、ロゴを上端に固定するレイアウトのため、
     ヒーロー自体ではなく inner 側の上端パディングで余白を確保する。 */
  body.home .vns-hero__inner {
    padding-top: 128px;
  }
}

body.home #masthead.vns-header--transparent {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

body.home #masthead.vns-header--transparent .site-description {
  background: transparent !important;
}

body.home #masthead.vns-header--transparent #site-navigation {
  background-color: transparent !important;
  border-top-color: transparent !important;
}

/* 透明時、ハンバーガーメニューを開いた際のドロップダウンパネルや
   会員メニューのドロップダウンは、中身が見やすいよう黒背景を維持する
   （パネル自体は開いている間だけ表示されるため、常時透明にすると
   逆に文字が読みにくくなるため対象外とする）。 */

/* 透明ヘッダー時の文字・アイコン色。
   ヒーロー背景写真は白ベース（花を明るく見せる構図）のため、通常の
   黒背景ヘッダー用に設定している白系（アイボリー）の文字・アイコンでは
   白い写真に重なって見えなくなってしまう。`.vns-header--transparent` が
   付いている間（＝スクロール前、写真の上にヘッダーが重なっている間）は
   ロゴ・ナビゲーション・検索アイコン・会員メニュー・カートボタン・
   ハンバーガーアイコンをすべて黒系（--vns-ink）に切り替える。
   PC幅では `.snav .membership ul` がそのままインライン表示される
   仕様（親テーマ既定）のため、guest/ログイン/新規会員登録の文字も
   ここで黒に切り替える対象に含めている。 */
body.home #masthead.vns-header--transparent h1.site-title a,
body.home #masthead.vns-header--transparent div.site-title a {
  color: var(--vns-ink) !important;
}

body.home #masthead.vns-header--transparent h1.site-title a:hover,
body.home #masthead.vns-header--transparent div.site-title a:hover {
  color: var(--vns-gold-deep) !important;
}

body.home #masthead.vns-header--transparent #site-navigation ul.header-nav-container > li > a {
  color: var(--vns-ink) !important;
}

body.home #masthead.vns-header--transparent #site-navigation ul.header-nav-container > li > a:hover {
  color: var(--vns-gold-deep) !important;
}

body.home #masthead.vns-header--transparent #site-navigation li a {
  border-bottom-color: rgba(10, 10, 10, 0.14) !important;
}

body.home #masthead.vns-header--transparent #site-navigation label span::before {
  color: var(--vns-ink) !important;
}

body.home #masthead.vns-header--transparent .snav i,
body.home #masthead.vns-header--transparent .snav ul li i,
body.home #masthead.vns-header--transparent .snav .search-box i,
body.home #masthead.vns-header--transparent .snav .membership i {
  color: var(--vns-ink) !important;
}

body.home #masthead.vns-header--transparent .snav .membership li,
body.home #masthead.vns-header--transparent .snav .membership li a,
body.home #masthead.vns-header--transparent .snav .membership li:first-child {
  color: var(--vns-ink) !important;
  border-right-color: rgba(10, 10, 10, 0.2) !important;
}

body.home #masthead.vns-header--transparent .snav .membership li a:hover {
  color: var(--vns-gold-deep) !important;
}

body.home #masthead.vns-header--transparent .incart-btn a {
  color: var(--vns-ink) !important;
}

@media (min-width: 62.5em) {
  body.home #masthead.vns-header--transparent .incart-btn a {
    border-color: rgba(10, 10, 10, 0.35) !important;
  }

  body.home #masthead.vns-header--transparent .incart-btn i::before {
    color: var(--vns-ink) !important;
  }
}

h1.site-title,
div.site-title {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
}

h1.site-title a,
div.site-title a {
  color: var(--vns-ivory) !important;
}

h1.site-title a:hover,
div.site-title a:hover {
  color: var(--vns-gold-light) !important;
}

/* ナビゲーション */
#site-navigation {
  background-color: var(--vns-ink) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#site-navigation ul.header-nav-container > li > a,
ul.mainnavi > li > a {
  font-family: var(--font-jp-body);
  letter-spacing: 0.04em;
  color: var(--vns-ivory) !important;
}

#site-navigation ul.header-nav-container > li > a:hover,
ul.mainnavi > li > a:hover {
  color: var(--vns-gold-light) !important;
}

/* SP幅（62.5em未満）でハンバーガーメニューを開いた時のドロップダウン
   パネル（header-nav-container）は親テーマ既定で背景が白固定
   （background-color:#fff）になるため、黒背景ヘッダーに合わせて
   パネル自体も黒背景にする（白文字のまま白背景だと見えなくなるため）。 */
#masthead #site-navigation input#panel.on-off:checked + div.nav-menu-open,
#masthead #site-navigation input#panel.on-off:checked + div.header-nav-container {
  background-color: var(--vns-ink) !important;
}

/* v1.5.6: トップページ最上部（スクロール前・ヒーロー画像に重なる
   透明ヘッダー状態）で `.vns-header--transparent` が付いている間、
   ナビゲーション文字色はヒーロー写真に映えるよう黒（--vns-ink）に
   切り替えている（347行目付近）。この状態のままハンバーガーメニューを
   開くと、直前のルールでパネル背景が黒（--vns-ink）になる一方、
   文字色も黒のままのため「黒地に黒文字」で読めなくなってしまう。
   メニューを開いている間（input#panel:checked）は常にパネル背景が
   黒である以上、文字色は必ず白系（--vns-ivory）に強制する。
   `.vns-header--transparent` の有無や `body.home` かどうかに関係なく
   常時これを最優先させるため、後続の全ルールより後ろに置いた上で
   詳細度の高いセレクタ＋`!important` を用いる。 */
#masthead #site-navigation input#panel.on-off:checked ~ div.nav-menu-open ul.header-nav-container > li > a,
#masthead #site-navigation input#panel.on-off:checked ~ div.header-nav-container ul.header-nav-container > li > a,
#masthead #site-navigation input#panel.on-off:checked ~ div.nav-menu-open ul.header-nav-container li a,
#masthead #site-navigation input#panel.on-off:checked ~ div.header-nav-container ul.header-nav-container li a {
  color: var(--vns-ivory) !important;
}

#masthead #site-navigation input#panel.on-off:checked ~ div.nav-menu-open ul.header-nav-container > li > a:hover,
#masthead #site-navigation input#panel.on-off:checked ~ div.header-nav-container ul.header-nav-container > li > a:hover {
  color: var(--vns-gold-light) !important;
}

#site-navigation li a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ハンバーガーメニューのアイコン（::before疑似要素で描画される三本線）。
   親テーマ既定は color:#fff 固定だが、黒背景のままなので変更不要。
   ただし子テーマ側で明示しておくことで将来の背景色変更にも追従する。 */
#site-navigation label span::before {
  color: var(--vns-ivory) !important;
}

/* 検索アイコン・検索ボックス・カートアイコン・会員メニューのアイコン
   （FontAwesomeアイコン全般）。 */
.snav i,
.snav ul li i,
.snav .search-box i,
.snav .membership i {
  color: var(--vns-ivory) !important;
}

/* 検索ボックス（PC幅で .search-box form が表示される部分）の入力欄・
   送信ボタンは白背景のままだが、送信ボタンのアイコン色を調整。 */
.search-box .searchsubmit {
  color: var(--vns-ink) !important;
}

/* 会員メニュー（ログイン/ゲスト表示）・カートボタンの文字色。
   PC幅（62.5em以上）では .snav .membership 内の文字が黒固定（親テーマ既定）
   のため、黒背景でも視認できるよう白系に上書き。 */
.snav .membership li,
.snav .membership li a,
.snav .membership li:first-child {
  color: var(--vns-ivory) !important;
  border-right-color: rgba(255, 255, 255, 0.25) !important;
}

.snav .membership li a:hover {
  color: var(--vns-gold-light) !important;
}

/* v1.4.14: スマホ幅（62.5em未満）では `.snav .membership ul` が
   `position:absolute; background-color:#fff;` の白背景ドロップダウンになる
   （親テーマ既定）。上の文字色ルールはPC幅の黒背景ヘッダー向けにアイボリー
   （白系）で上書きしているが、そのままだとスマホの白背景ドロップダウン上でも
   白文字になってしまい、文字が読めない不具合があった。
   62.5em未満のときだけ文字色を黒に戻す。 */
@media (max-width: 62.4375em) {
  .snav .membership li,
  .snav .membership li a,
  .snav .membership li:first-child {
    color: var(--vns-ink) !important;
  }

  .snav .membership li a:hover {
    color: var(--vns-gold-deep) !important;
  }
}

/* カートボタン（.incart-btn）。PC幅では親テーマ既定でオレンジ背景＋白文字
   のボタンになるが、ブランドカラー（黒地×白文字、ホバーでゴールド）に統一。 */
.incart-btn a {
  color: var(--vns-ivory) !important;
}

@media (min-width: 62.5em) {
  .incart-btn a {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  .incart-btn a:hover {
    background-color: var(--vns-gold) !important;
    border-color: var(--vns-gold) !important;
  }

  .incart-btn i::before {
    color: var(--vns-ivory) !important;
  }

  .incart-btn a:hover i::before,
  .incart-btn a:hover span {
    color: var(--vns-ink) !important;
  }
}

.incart-btn .total-quant {
  background-color: var(--vns-gold) !important;
  color: var(--vns-ink) !important;
  border-radius: 50%;
}


/* ============================================================
   商品一覧（front-il / cat-il.type-grid / thumbnail_box 系）
   親テーマの構造（article が inline-block; letter-spacing:-.5em で
   隙間を殺すハック）は維持したまま、余白・比率・タイポグラフィだけを
   VANITASのラグジュアリーなカードデザインへ上書きする。
   ============================================================ */
.front-il,
.cat-il.type-grid,
.type-grid {
  letter-spacing: -.5em; /* 親テーマのinline-blockハックを継承 */
}

/* 商品グリッド（.front-il）のカラム幅は親要素に対する%指定
   （例: 22%・16.8%）のため、上記の #main フルブリード化で親要素の
   実質幅が画面幅そのものになると、超ワイド画面でカードが間延びして
   見える。グリッド自体には従来通りの読みやすい最大幅を設定し、
   中央寄せする（背景色のみ画面幅いっぱいに広げたい場合は、更に
   background設定を別要素に持たせる形にすると良い）。 */
.front-il {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.front-il article,
.cat-il.type-grid article,
.type-grid article {
  letter-spacing: normal;
  padding: 0 0 32px !important;
  border: none !important;
}

/* 画像を 4:5 の比率で切り出し、余白を持たせて高級感を出す */
.front-il .itemimg,
.cat-il.type-grid .itemimg,
.type-grid .itemimg {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 16px !important;
  background-color: var(--vns-paper);
}

.front-il .itemimg a,
.cat-il.type-grid .itemimg a,
.type-grid .itemimg a {
  display: block;
  height: 100%;
}

.front-il .itemimg img,
.cat-il.type-grid .itemimg img,
.type-grid .itemimg img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .5s ease, opacity .5s ease;
}

.front-il .itemimg a:hover img,
.cat-il.type-grid .itemimg a:hover img,
.type-grid .itemimg a:hover img {
  opacity: 1;
  transform: scale(1.04);
}

.front-il .itemname,
.cat-il.type-grid .itemname,
.type-grid .itemname {
  max-height: none !important;
  overflow: visible !important;
  font-family: var(--font-jp-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--vns-ink);
  /* 日本語商品名が「ブーケ」等のカタカナ語の途中で不自然に折り返されるのを防ぐ。
     word-break: keep-all はCJK文字同士を単語境界として扱い、原則スペース位置
     （全角スペース等）でのみ改行する。
     ※ overflow-wrap: break-word は「収まらない場合は単語の途中でも強制的に
        折り返す」指定のため、keep-all を実質的に無効化してしまう
        （両方指定すると break-word が優先され、結局カタカナの途中で割れる）。
        そのため、はみ出し対策の overflow-wrap は付与しない。 */
  word-break: keep-all;
}

.front-il .itemname a,
.cat-il.type-grid .itemname a,
.type-grid .itemname a {
  color: inherit;
  text-decoration: none;
}

.front-il .itemprice,
.cat-il.type-grid .itemprice,
.type-grid .itemprice {
  height: auto !important;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--vns-gold-deep);
  font-weight: 600;
  text-align: left !important;
}

/* DOM順序は 画像 → 価格 → (在庫切れ表示) → 商品名 のため、
   自然な上下配置のままで問題なし（並び替え不要） */
.front-il .itemsoldout,
.cat-il.type-grid .itemsoldout {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-jp-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vns-rose) !important;
  text-align: left;
}


/* ============================================================
   商品詳細ページ（#itempage）
   実マークアップ（Welcart Basicライブデモより確認済み）:
   #itempage > #img-box > .itemimg / .detail-box(.item-name,.itemcode,
   .item-description) / .item-info > form > .skuform(.skuname,.field,
   .zaikostatus,.field_price) / .assistance_item
   ============================================================ */
#itempage {
  background-color: var(--vns-white);
  padding: 24px 0;
}

#itempage .item_page_title,
#itempage .item-name {
  font-family: var(--font-jp-head);
  color: var(--vns-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 12px;
}

#itempage .itemcode {
  color: var(--vns-charcoal);
  font-size: .8em;
  letter-spacing: 0.05em;
}

#itempage .item-description {
  font-family: var(--font-jp-body);
  color: var(--vns-graphite);
  line-height: 1.9;
}

#itempage .itemimg,
#itempage .itemsubimg {
  border: 1px solid var(--border-hairline);
}

#itempage .skuname {
  font-family: var(--font-jp-head);
  font-weight: 600;
  color: var(--vns-ink);
}

#itempage .field_price {
  font-family: var(--font-display);
  color: var(--vns-ink);
  font-weight: 600;
  letter-spacing: 0.03em;
}

#itempage .zaikostatus {
  color: var(--vns-charcoal);
  font-size: .85em;
}

/* 注: 実テーマ(Welcart Basic 1.8.11)の商品詳細は table.skumulti / table.skusingle ではなく
   .skuform を usces_have_skus() の回数分繰り返す構造。カート追加まわりの上書きは
   usces_cart.css 側の #itempage .item-info .c-box / .skubutton / .quantity / .itemsoldout
   セレクタで行う（親テーマ usces_cart.css の実クラスに合わせて修正済み）。 */
#itempage dl.item-option dt,
#itempage dl.item-option dd {
  font-family: var(--font-jp-body);
  color: var(--vns-graphite);
}

#itempage .assistance_item h3 {
  font-family: var(--font-jp-head);
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 8px;
}

#itempage .assistance_item .detail h4 {
  font-family: var(--font-jp-body);
  color: var(--vns-ink);
}

#itempage .assistance_item .assist_price {
  color: var(--vns-graphite);
  font-weight: 600;
}


/* ============================================================
   カート／会員／検索結果ページ（usces_cart.css 対象領域）
   詳細な上書きは usces_cart.css 側に記述。ここでは #cart の
   基本トーンのみ調整。
   ============================================================ */
#cart th {
  background-color: var(--vns-ink) !important;
  color: var(--vns-ivory) !important;
  font-weight: 400;
}

#cart table,
#cart th,
#cart td {
  border-color: var(--border-hairline) !important;
}


/* ============================================================
   サイドバー（ウィジェット）
   ============================================================ */
#secondary h3,
.widget_title {
  font-family: var(--font-jp-head);
  border-bottom: 1px solid var(--border-hairline) !important;
  color: var(--vns-ink);
}

.widget_welcart_calendar th,
.welcart_blog_calendar th {
  background-color: var(--vns-ink) !important;
}

.widget_welcart_calendar .businessday {
  background-color: var(--vns-gold-wash) !important;
  color: var(--vns-ink) !important;
}


/* ============================================================
   フッター
   ============================================================ */
footer#colophon {
  background-color: var(--vns-ink);
  color: var(--vns-sand);
  border-top: 1px solid var(--border-hairline);
}

footer#colophon a {
  color: var(--vns-sand);
}

footer#colophon a:hover {
  color: var(--vns-gold-light);
}

.copyright {
  color: var(--vns-stone);
  font-size: .8em;
  letter-spacing: 0.04em;
}


/* ============================================================
   固定ページ・投稿（About等）
   ============================================================ */
#content .page-title,
#content .entry-title {
  font-family: var(--font-jp-head);
  color: var(--vns-ink);
}

.vns-manifesto {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--vns-graphite);
  border-left: 2px solid var(--vns-gold);
  padding-left: 20px;
}


/* ============================================================
   フロントページ専用（front-page.php）
   ============================================================ */

/* -- ボタン共通ユーティリティ -- */
.vns-btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-jp-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: center;
  border-radius: 0;
  border: 1px solid var(--vns-ink);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.vns-btn--primary {
  background-color: var(--vns-ink);
  color: var(--vns-ivory) !important;
}

.vns-btn--primary:hover {
  background-color: var(--vns-gold);
  border-color: var(--vns-gold);
  color: var(--vns-ink) !important;
  text-decoration: none !important;
}

.vns-btn--outline {
  background-color: transparent;
  color: var(--vns-ink) !important;
}

.vns-btn--outline:hover {
  background-color: var(--vns-ink);
  color: var(--vns-ivory) !important;
  text-decoration: none !important;
}

/* -- ヒーローセクション --
   v1.4.8: 提供された完成イメージ（PCtop-1_logo.jpg / SPtop-1_logo.jpg）に
   合わせたレイアウト。
   - PC: ロゴ＋ボタンを画面左側に縦積みでまとめて配置（左寄せ）。
     花の写真は右側に大きく見せる構図なので、テキスト側は画面左半分の
     余白（新しい背景写真自体に焼き込まれた白グラデーション部分）に
     収まるよう幅を制限する。
   - SP: ロゴを上部中央、ボタンを下部中央に分離配置（.vns-hero__inner
     を絶対配置で上下に固定し、間の広いスペースに花の写真を見せる）。
   背景の花の写真は写真全体を暗くするオーバーレイをかけず鮮やかな色の
   まま見せる（.vns-hero__scrim は文字周りをわずかに明るくする程度の
   ごく薄い補助グラデーションのみ）。 */
.vns-hero {
  position: relative;
  background-color: var(--vns-ivory);
  padding: 64px 24px;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 62.5em) {
  .vns-hero {
    padding: 64px 6vw;
  }
}

@media (max-width: 780px) {
  .vns-hero {
    /* SPはロゴ／ボタンを上下に分離配置するため、内側の位置決めは
       .vns-hero__inner 側の絶対配置で行う。ここでは高さの基準だけ
       確保する。 */
    display: block;
    padding: 0;
    min-height: 720px;
  }
}

@media (max-width: 480px) {
  .vns-hero {
    min-height: 640px;
  }
}

/* 背景スライドショー（白ベースの商品写真3枚をクロスフェード表示）
   - 各 .vns-hero__slide は絶対配置で完全に重ね合わせ、opacity のみを
     アニメーションさせることでガタつきのないクロスフェードにする。
   - PC用（16:9・横長、hero-1.jpg〜hero-3.jpg）とスマホ用
     （4:5・縦長、hero-1-mobile.jpg〜hero-3-mobile.jpg）を別要素として
     両方DOMに出力し、画面幅に応じて display で片方だけを表示する
     （.vns-hero__slide--pc / .vns-hero__slide--mobile）。
   - 1周 15秒（3枚 × 各5秒）。1枚あたり:
     0%      opacity:0 → フェードイン開始
     5-25%   opacity:1 → はっきり表示（フェードイン完了〜表示継続）
     30%     opacity:1 → 表示継続の終わり
     35%     opacity:0 → フェードアウト完了
     以降    opacity:0 → 次の周回まで非表示
     3枚のアニメーション開始タイミングを animation-delay で5秒ずつずらす
     （nth-childはPC/スマホ2要素が交互に並ぶため使えず、
     .vns-hero__slide--1/2/3 の明示クラスで指定）。 */
.vns-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.vns-hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: vns-hero-fade 15s infinite;
}

/* PC用スライドを表示、スマホ用は非表示（デフォルト = 広い画面向け） */
.vns-hero__slide--mobile {
  display: none;
}

@media (max-width: 780px) {
  /* 狭い画面ではスマホ用（縦長）画像に切り替える */
  .vns-hero__slide--pc {
    display: none;
  }
  .vns-hero__slide--mobile {
    display: block;
  }
}

.vns-hero__slide--1 { animation-delay: 0s; }
.vns-hero__slide--2 { animation-delay: 5s; }
.vns-hero__slide--3 { animation-delay: 10s; }

@keyframes vns-hero-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

/* prefers-reduced-motion（OS側でアニメーション低減設定のユーザー向け）
   の場合はクロスフェードを止め、1枚目を静止表示する。 */
@media (prefers-reduced-motion: reduce) {
  .vns-hero__slide {
    animation: none;
    opacity: 0;
  }
  .vns-hero__slide--1 {
    opacity: 1;
  }
}

/* 左側（PC）／上下（SP）のテキストの可読性を補うための薄い白の
   グラデーション。背景写真は白ベースで花自体も明るい色が多いため、
   写真を暗くするオーバーレイは不要。テキストが乗る領域だけを
   わずかに明るくすることで、花の彩度を保ったまま文字のコントラストを
   確保する（新しい背景写真自体にも白グラデーションが焼き込まれて
   いるため、ここでの効果はごく控えめにする）。 */
.vns-hero__scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.16) 30%,
    rgba(255, 255, 255, 0) 55%
  );
}

@media (max-width: 780px) {
  /* SPはロゴ（上部）とボタン（下部）に文字が分かれるため、
     上下端だけをわずかに明るくする縦方向のグラデーションにする。 */
  .vns-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.1) 18%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.35) 100%
    );
  }
}

.vns-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 420px;
}

@media (max-width: 780px) {
  /* SPはロゴを上部中央、ボタンを下部中央に分離配置する。
     .vns-hero を position:relative の枠として使い、
     .vns-hero__inner を絶対配置の「フル高さラッパー」にして
     子要素（ロゴ／ボタン）をそれぞれ上端・下端に固定する。 */
  .vns-hero__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 24px;
    box-sizing: border-box;
    text-align: center;
  }
}

/* -- 2行の黒ロゴテキスト（.vns-hero__logo-text） --
   画像ロゴの代わりにテキストロゴを使用し、白背景でも視認性の高い
   ブランドのインクカラー（黒）で表示。VANITAS / FLOWER の2行表示。 */
.vns-hero__logo-text {
  margin: 0 0 28px;
  line-height: 1;
}

.vns-hero__logo-line1,
.vns-hero__logo-line2 {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--vns-ink);
}

.vns-hero__logo-line1 {
  font-size: clamp(36px, 4.6vw, 56px);
  letter-spacing: 0.1em;
}

.vns-hero__logo-line2 {
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: 0.28em;
  margin-top: 4px;
}

@media (max-width: 780px) {
  .vns-hero__logo-text {
    margin: 0;
  }
  .vns-hero__logo-line1 {
    font-size: clamp(34px, 9vw, 46px);
    letter-spacing: 0.08em;
  }
  .vns-hero__logo-line2 {
    font-size: clamp(24px, 6.4vw, 32px);
    letter-spacing: 0.22em;
  }
}

.vns-hero__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 780px) {
  .vns-hero__actions {
    justify-content: center;
  }
}

.vns-hero .vns-btn--primary {
  background-color: var(--vns-ink);
  color: var(--vns-ivory) !important;
  border-color: var(--vns-ink);
}

.vns-hero .vns-btn--primary:hover {
  background-color: var(--vns-gold-deep);
  border-color: var(--vns-gold-deep);
}

.vns-hero .vns-btn--outline {
  color: var(--vns-ink) !important;
  border-color: var(--vns-ink);
}

.vns-hero .vns-btn--outline:hover {
  background-color: var(--vns-ink);
  color: var(--vns-ivory) !important;
}

/* -- セクション見出し共通 -- */
.vns-section-title {
  text-align: center;
  padding: 56px 16px 24px;
}

.vns-section-title h2 {
  font-size: 26px;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.vns-section-title .jp {
  font-family: var(--font-jp-head);
  color: var(--vns-charcoal);
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* -- About Teaser -- */
.vns-about-teaser {
  background-color: var(--vns-paper);
  padding: 72px 24px;
  text-align: center;
}

.vns-about-teaser h2 {
  font-size: 24px;
  margin-bottom: 28px;
}

.vns-about-teaser .vns-manifesto {
  max-width: 620px;
  margin: 0 auto 32px;
  text-align: left;
  font-size: 15px;
  line-height: 2;
}

/* -- News（お知らせ） --
   v1.4.9: 未接続の [newsletter_form] ショートコードで何も表示されていなかった
   Newsletterセクションを廃止し、WordPress標準の投稿機能（'news'カテゴリー）
   を使ったお知らせ告知エリアに変更。見出しは他セクション（The Bouquets）と
   同じ .vns-section-title を共用し、一覧はシンプルな日付+タイトルの
   横並びリスト（ヘアラインの罫線区切り）にする。 */
.vns-news {
  background-color: var(--vns-paper);
  padding: 24px 24px 72px;
}

.vns-news__list {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.vns-news__item {
  border-bottom: 1px solid var(--border-hairline);
}

.vns-news__item a {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 8px;
  color: var(--vns-ink);
}

.vns-news__item a:hover {
  color: var(--vns-gold-deep);
}

.vns-news__date {
  flex-shrink: 0;
  font-family: var(--font-display);
  color: var(--vns-charcoal);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.vns-news__title {
  font-family: var(--font-jp-body);
  font-size: 15px;
}

.vns-news__empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 8px;
  color: var(--vns-charcoal);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 480px) {
  .vns-news__item a {
    flex-direction: column;
    gap: 6px;
  }
}


/* ============================================================
   celebration.vanitasflower.jp 専用スタイル
   （front-page-celebration.php でのみ使用。vanitasflower.jp側の
    front-page.php には一切影響しない）

   コンセプト: モノクローム×ゴールドのテキスト主体で「法人・お得意様
   専用」という特別感・招待制の空気感を表現する。背景には胡蝶蘭の写真
   （PC用・モバイル用で別カットをレスポンシブ切替）を暗いオーバーレイ
   処理済みの状態で敷き、写真の華やかさと落ち着いた高級感を両立させる。
   商品グリッド自体は vanitasflower.jp と同じ .front-il
   （既存CSS、上部で定義済み）をそのまま再利用するため、ここでは
   ヒーローと末尾の注意書きセクションのみを定義する。
   背景画像はWordPressメディアライブラリに登録済み
   （vns-cele-hero-bg-pc-final.jpg / vns-cele-hero-bg-mobile-final.jpg）。
   front-page-celebration.php 側で wp_get_attachment_image_url() を使い
   URLを取得し、インラインstyleで背景として指定している（本CSSファイルは
   テーマ配布物のみでWordPress DBの添付ファイルIDを持たないため）。
   ============================================================ */
.vns-cele-hero {
  position: relative;
  background-color: var(--vns-ink);
  /* PC用背景（デフォルト）。値は front-page-celebration.php のインライン
     styleでCSS変数 --vns-cele-hero-bg-pc / --vns-cele-hero-bg-mobile として
     wp_get_attachment_image_url() の実URLがセットされる。画像が未設定の
     場合は var(--vns-ink) の単色背景にフォールバックする。 */
  background-image: var(--vns-cele-hero-bg-pc, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 96px 24px;
  text-align: center;
  overflow: hidden;
}

@media (max-width: 780px) {
  .vns-cele-hero {
    background-image: var(--vns-cele-hero-bg-mobile, var(--vns-cele-hero-bg-pc, none));
  }
}

.vns-cele-hero::before {
  /* 写真の上にさらに薄い縦グラデーションを重ね、上下端（メニュー・
     ボタン周辺）の文字の可読性を一段引き上げる保険レイヤー */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 8, 6, 0.35) 0%,
    rgba(10, 8, 6, 0.15) 40%,
    rgba(10, 8, 6, 0.45) 100%
  );
  pointer-events: none;
}

.vns-cele-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

/* v1.4.0: ロゴはvanitasflower.jpと同じ .vns-hero__logo-text
   （黒文字, var(--vns-ink)）をそのまま流用しているが、celebration側は
   写真背景が暗いオーバーレイ処理済みのため、黒文字のままだと
   ほぼ視認できない。ここでだけ明るい色（アイボリー/ゴールド）に
   上書きし、中央寄せにする（本家はPC時に左寄せだが、celebrationは
   タイトル一本のみのレイアウトのため中央寄せのほうが収まりが良い）。 */
.vns-cele-hero__inner .vns-hero__logo-text {
  margin: 0 0 40px;
}

.vns-cele-hero__inner .vns-hero__logo-line1,
.vns-cele-hero__inner .vns-hero__logo-line2 {
  color: var(--vns-ivory);
}

.vns-cele-hero__actions {
  display: flex;
  justify-content: center;
}

.vns-cele-hero .vns-btn--primary {
  background-color: var(--vns-gold);
  border-color: var(--vns-gold);
  color: var(--vns-ink) !important;
}

.vns-cele-hero .vns-btn--primary:hover {
  background-color: var(--vns-gold-light);
  border-color: var(--vns-gold-light);
}

@media (max-width: 480px) {
  .vns-cele-hero {
    padding: 64px 20px;
  }
  .vns-cele-hero__br {
    display: none; /* スマホ幅では強制改行を解除し、文章の折り返しに任せる */
  }
}

.vns-cele-note {
  background-color: var(--vns-paper);
  padding: 32px 24px 72px;
  text-align: center;
}

.vns-cele-note p {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-jp-body);
  font-size: 13px;
  line-height: 1.9;
  color: var(--vns-charcoal);
}


/* ============================================================
   法定ページ（特定商取引法に基づく表示／プライバシーポリシー／利用規約）
   v1.4.11: ECサイトに必須の法定・規約系固定ページ専用のデザイン。
   通常の記事ページ（.entry-content）よりも文章量が多く、条文番号や
   箇条書き・表（支払方法一覧など）が多用されるため、読みやすさを優先した
   シンプルな1カラムレイアウトにする。

   v1.4.12: 適用方法を変更。
   当初は専用ページテンプレート page-templates/legal.php 内の要素に
   `.vns-legal-page` `.vns-legal__header` 等の専用クラスを直接書き出し、
   それらのクラスにCSSを当てる設計にしていた。しかし実際の運用
   （https://vanitasflower.jp/terms/, /privacy/, /law/）では固定ページの
   「テンプレート」が変更されず標準テンプレート（page.php +
   template-parts/content.php）のまま公開されていたため、専用クラスが
   一切出力されず、この節のCSSが丸ごと無効化されていた
   （本文が画面幅いっぱいに表示される不具合の直接原因）。

   そこで functions.php の vanitas_child_legal_page_body_class() で
   対象ページ（スラッグ terms/privacy/law、または実際に legal.php
   テンプレートを割り当てた場合の両方）の <body> に `vns-legal-page`
   クラスを自動付与するようにし、本節のセレクタはすべて
   `body.vns-legal-page` を起点に書き換えた。これにより
   ①標準テンプレートのまま（#content > article.type-page > 
     header.entry-header > h1.entry-title / div.entry-content）でも、
   ②専用テンプレート page-templates/legal.php を割り当てた場合
     （header.vns-legal__header 等のBEMクラス付き）でも、
   どちらでも同じ見た目になるよう両対応のセレクタにしている。

   #content の左右余白（padding）は、親テーマ style.css の
   `#main.two-column #content { width:750px; margin:0; padding:0; }`
   （@media (min-width:62.5em) 内）および本テーマ自身の v1.4.3 由来の
   `#main.two-column #content { width:100%; max-width:none; float:none; }`
   （本ファイル上部、行91）と同じ #content セレクタを奪い合う形になり、
   ソースコード順だけでは確実に上書きできない（詳細は該当箇所のコメント
   参照）。ページ種別で明確に切り分けられる本セレクタでは !important を
   付与し、カスケード順に関係なく確実に適用されるようにしている。
   ============================================================ */

body.vns-legal-page #content {
  padding: 0 24px 96px !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

body.vns-legal-page #content > article {
  max-width: 760px;
  margin: 0 auto;
}

/* -- 見出しエリア --
   標準テンプレート（header.entry-header > h1.entry-title）と
   専用テンプレート（header.vns-legal__header）の両方に対応。 */
body.vns-legal-page .entry-header,
body.vns-legal-page .vns-legal__header {
  margin: 56px 0 40px !important;
  padding: 0 0 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  text-align: center;
  position: static !important;
}

body.vns-legal-page .vns-legal__eyebrow {
  margin: 0 0 12px;
  color: var(--vns-gold-deep);
  font-size: 12px;
  letter-spacing: 0.22em;
}

body.vns-legal-page .entry-title,
body.vns-legal-page .vns-legal__title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--font-jp-head);
  font-size: 1.75em !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em;
  color: var(--vns-ink);
}

@media (min-width: 62.5em) {
  body.vns-legal-page .entry-header,
  body.vns-legal-page .vns-legal__header {
    margin: 80px 0 56px !important;
  }

  body.vns-legal-page .entry-title,
  body.vns-legal-page .vns-legal__title {
    font-size: 2.1em !important;
  }
}

/* -- 本文（.entry-content の上書き。親テーマ既定の余白・書式を
   ブランドのタイポグラフィに合わせて調整する） -- */
body.vns-legal-page .entry-content {
  color: var(--vns-graphite);
  font-size: 15px;
  line-height: 1.9;
}

body.vns-legal-page .entry-content h2 {
  margin: 2.6em 0 1.1em !important;
  padding: 0 0 0.5em !important;
  border: none !important;
  border-bottom: 2px solid var(--vns-gold) !important;
  font-family: var(--font-jp-head);
  font-size: 1.25em !important;
  line-height: 1.5 !important;
  color: var(--vns-ink);
}

body.vns-legal-page .entry-content h2:first-child {
  margin-top: 0 !important;
}

body.vns-legal-page .entry-content h3 {
  margin: 2em 0 0.9em !important;
  padding: 0 0 0 0.75em !important;
  border: none !important;
  border-left: 3px solid var(--vns-gold) !important;
  font-family: var(--font-jp-head);
  font-size: 1.08em !important;
  line-height: 1.5 !important;
  color: var(--vns-ink);
}

body.vns-legal-page .entry-content h4 {
  margin: 1.6em 0 0.8em !important;
  padding: 0 !important;
  background: none !important;
  font-size: 1em;
  font-weight: 600;
  color: var(--vns-ink);
}

body.vns-legal-page .entry-content p {
  margin: 0 0 1.4em;
}

body.vns-legal-page .entry-content ul,
body.vns-legal-page .entry-content ol {
  margin: 0 0 1.4em 1.4em;
}

body.vns-legal-page .entry-content ul li,
body.vns-legal-page .entry-content ol li {
  margin-bottom: 0.4em;
  line-height: 1.8;
}

body.vns-legal-page .entry-content ul li {
  list-style: disc;
}

body.vns-legal-page .entry-content ol li {
  list-style: decimal;
}

/* 定義リスト（用語の定義など） */
body.vns-legal-page .entry-content dl {
  margin: 0 0 1.4em;
  border-top: 1px solid var(--border-hairline);
}

body.vns-legal-page .entry-content dt {
  padding: 0.8em 0 0.2em;
  font-weight: 600;
  color: var(--vns-ink);
}

body.vns-legal-page .entry-content dd {
  margin: 0 0 0.8em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--vns-charcoal);
}

/* 表（支払方法一覧・会社概要など） */
body.vns-legal-page .entry-content table {
  width: 100% !important;
  margin: 0 0 1.8em;
  border-collapse: collapse;
  border: 1px solid var(--border-subtle);
  font-size: 0.95em;
}

body.vns-legal-page .entry-content th {
  width: 30%;
  padding: 0.9em 1em;
  border: 1px solid var(--border-subtle);
  background-color: var(--vns-paper);
  color: var(--vns-ink);
  font-weight: 600;
  text-align: left;
  vertical-align: top;
}

body.vns-legal-page .entry-content td {
  padding: 0.9em 1em;
  border: 1px solid var(--border-subtle);
  background-color: var(--vns-white);
  vertical-align: top;
}

@media (max-width: 480px) {
  body.vns-legal-page .entry-content table,
  body.vns-legal-page .entry-content thead,
  body.vns-legal-page .entry-content tbody,
  body.vns-legal-page .entry-content tr {
    display: block;
    width: 100%;
  }

  body.vns-legal-page .entry-content th,
  body.vns-legal-page .entry-content td {
    display: block;
    width: 100%;
    border-bottom: none;
  }

  body.vns-legal-page .entry-content th {
    border-bottom: none;
  }

  body.vns-legal-page .entry-content tr {
    margin-bottom: 0.6em;
    border: 1px solid var(--border-subtle);
  }

  body.vns-legal-page .entry-content tr td:last-child {
    border-bottom: 1px solid var(--border-subtle);
  }
}

body.vns-legal-page .entry-content strong {
  color: var(--vns-ink);
}

body.vns-legal-page .entry-content a {
  color: var(--vns-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--vns-gold-light);
}

body.vns-legal-page .entry-content a:hover {
  color: var(--vns-ink);
}

/* -- 「トップページへ戻る」ボタン（専用テンプレート使用時のみ出力） -- */
body.vns-legal-page .vns-legal__back {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--border-hairline);
  text-align: center;
}

/* ============================================================
   商品一覧ページ（page-templates/shop-all.php）
   v1.5.6: vanitasflower.jp ヘッダー/フッターメニュー「商品一覧」用。
   front-page.php の「The Bouquets」グリッド（.front-il）と同じ
   商品カードマークアップ・CSSクラスを再利用し、見た目の一貫性を保つ。
   ============================================================ */

body.vns-shop-all-page #content {
  padding: 0 24px 96px;
  width: 100%;
  max-width: none;
  float: none;
}

body.vns-shop-all-page #content > article.vns-shop-all {
  max-width: 1160px;
  margin: 0 auto;
}

body.vns-shop-all-page .vns-shop-all__header {
  margin: 56px 0 40px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: center;
}

body.vns-shop-all-page .vns-shop-all__eyebrow {
  margin: 0 0 12px;
  color: var(--vns-gold-deep);
  font-size: 12px;
  letter-spacing: 0.22em;
}

body.vns-shop-all-page .vns-shop-all__title {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--font-jp-head);
  font-size: 1.75em;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--vns-ink);
}

body.vns-shop-all-page .vns-shop-all__intro {
  max-width: 760px;
  margin: 0 auto 40px;
  color: var(--vns-graphite);
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}

body.vns-shop-all-page .vns-shop-all__grid {
  margin-bottom: 48px;
}

body.vns-shop-all-page .vns-shop-all__pagination {
  margin: 24px 0 56px;
  text-align: center;
}

body.vns-shop-all-page .vns-shop-all__pagination .page-numbers {
  display: inline-block;
  margin: 0 4px;
  padding: 0.6em 1em;
  border: 1px solid var(--border-subtle);
  color: var(--vns-ink);
  text-decoration: none;
}

body.vns-shop-all-page .vns-shop-all__pagination a.page-numbers:hover,
body.vns-shop-all-page .vns-shop-all__pagination .page-numbers.current {
  border-color: var(--vns-gold-deep);
  background-color: var(--vns-gold-deep);
  color: var(--vns-white);
}

@media (min-width: 62.5em) {
  body.vns-shop-all-page .vns-shop-all__header {
    margin: 80px 0 56px;
  }

  body.vns-shop-all-page .vns-shop-all__title {
    font-size: 2.1em;
  }
}

/* ============================================================
   お問い合わせページ（page-templates/contact.php）
   v1.5.6: vanitasflower.jp / celebration.vanitasflower.jp 共通の
   ヘッダー/フッターメニュー「お問い合わせ」用フォームページ。
   ============================================================ */

body.vns-contact-page #content {
  padding: 0 24px 96px;
  width: 100%;
  max-width: none;
  float: none;
}

body.vns-contact-page #content > article.vns-contact {
  max-width: 640px;
  margin: 0 auto;
}

body.vns-contact-page .vns-contact__header {
  margin: 56px 0 40px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: center;
}

body.vns-contact-page .vns-contact__eyebrow {
  margin: 0 0 12px;
  color: var(--vns-gold-deep);
  font-size: 12px;
  letter-spacing: 0.22em;
}

body.vns-contact-page .vns-contact__title {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--font-jp-head);
  font-size: 1.75em;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--vns-ink);
}

body.vns-contact-page .vns-contact__intro {
  margin: 0 0 40px;
  color: var(--vns-graphite);
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}

body.vns-contact-page .vns-contact__success {
  margin-bottom: 32px;
  padding: 1.4em 1.6em;
  border: 1px solid var(--vns-gold-deep);
  background-color: var(--vns-paper);
  color: var(--vns-ink);
  text-align: center;
}

body.vns-contact-page .vns-contact__errors {
  margin-bottom: 32px;
  padding: 1.2em 1.6em;
  border: 1px solid #c0392b;
  background-color: #fdf1f0;
}

body.vns-contact-page .vns-contact__errors ul {
  margin: 0;
  padding-left: 1.2em;
}

body.vns-contact-page .vns-contact__errors li {
  margin: 0.3em 0;
  color: #c0392b;
  font-size: 14px;
}

body.vns-contact-page .vns-contact__field {
  margin: 0 0 24px;
}

body.vns-contact-page .vns-contact__field label {
  display: block;
  margin-bottom: 0.5em;
  color: var(--vns-ink);
  font-size: 14px;
  font-weight: 600;
}

body.vns-contact-page .vns-required {
  color: #c0392b;
}

body.vns-contact-page .vns-contact__field input[type="text"],
body.vns-contact-page .vns-contact__field input[type="email"],
body.vns-contact-page .vns-contact__field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid var(--border-subtle);
  background-color: var(--vns-white);
  font-family: inherit;
  font-size: 15px;
  color: var(--vns-ink);
}

body.vns-contact-page .vns-contact__field input[type="text"]:focus,
body.vns-contact-page .vns-contact__field input[type="email"]:focus,
body.vns-contact-page .vns-contact__field textarea:focus {
  border-color: var(--vns-gold-deep);
  outline: none;
}

body.vns-contact-page .vns-contact__field textarea {
  resize: vertical;
}

body.vns-contact-page .vns-contact__submit {
  margin-top: 32px;
  text-align: center;
}

body.vns-contact-page .vns-contact__submit .vns-btn {
  min-width: 200px;
  border: none;
  cursor: pointer;
}

@media (min-width: 62.5em) {
  body.vns-contact-page .vns-contact__header {
    margin: 80px 0 56px;
  }

  body.vns-contact-page .vns-contact__title {
    font-size: 2.1em;
  }
}

/* ============================================================
   会員ページ（ログイン／新規会員登録／マイページ／パスワード再発行等）
   v1.5.0: ユーザー提供デザイン（vanitas_member_register.html）準拠の
   ブラッシュアップ。対象テンプレート:
     wc_templates/member/wc_new_member_page.php （子テーマで上書き）
     wc_templates/member/wc_login_page.php       （子テーマで上書き）
   マイページ・パスワード再発行等は親テーマのテンプレートのまま、
   ここでの汎用セレクタ（.member_page_title, #memberpages, .loginbox,
   .whitebox, .customer_form 等）で見た目のみ統一している。
   細かいフォーム部品（input/select/table）の上書きは usces_cart.css
   側に集約し、レイアウト・タイポグラフィはこちらに記述する。
   ============================================================ */

body.vns-member-page #primary.site-content {
  background-color: var(--vns-ivory);
}

/*
 * v1.5.2: 親テーマ welcart_basic/style.css の
 *   #main.one-column #content { width:100%; margin:0; padding:0; }
 * が id2つの高詳細度で margin:0(中央寄せ解除)を強制しており、
 * フォーム全体が画面中央ではなく左寄せで表示されてしまっていた
 * 不具合の修正。id2つ以上の詳細度＋!importantで明示的に上書きする。
 */
body.vns-member-page #main #content.member-page {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 64px 24px 96px !important;
  box-sizing: border-box;
}

/* -- 見出しエリア（.vns-member-head） -- */
body.vns-member-page .vns-member-head {
  margin: 0 0 40px;
  text-align: center;
}

body.vns-member-page .vns-member-eyebrow {
  margin: 0;
  color: var(--vns-gold-deep);
  font-size: 11px;
  letter-spacing: 0.34em;
}

body.vns-member-page .member_page_title.vns-member-title {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  font-family: var(--font-jp-head);
  font-weight: 500;
  font-size: 1.5em;
  letter-spacing: 0.16em;
  color: var(--vns-ink);
}

body.vns-member-page .vns-member-rule {
  width: 48px;
  height: 1px;
  margin: 22px auto 0;
  background-color: var(--vns-gold);
}

/* -- 注意事項リスト（新規登録ページ header_explanation） -- */
body.vns-member-page .vns-member-lead {
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 0;
  color: var(--vns-charcoal);
  font-size: 12.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  text-align: center;
}

body.vns-member-page .vns-member-lead ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.vns-member-page .vns-member-lead li {
  margin: 0 0 6px;
}

body.vns-member-page .vns-member-lead li:last-child {
  margin-bottom: 0;
}

/* -- エラーメッセージ -- */
body.vns-member-page .error_message {
  margin-bottom: 20px;
  color: var(--vns-rose);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
}

body.vns-member-page .error_message:empty {
  display: none;
}

/* -- 新規登録フォームのカード枠（table.customer_form の外側） -- */
body.vns-member-page .vns-member-form-card {
  background-color: var(--vns-snow);
  border: 1px solid var(--border-hairline);
}

/* -- 会員規約同意エリア（プラグイン出力の .agree_member_area） -- */
body.vns-member-page .agree_member_area {
  margin: 24px 0 0;
  padding: 24px;
  background-color: var(--vns-white);
  border: 1px solid var(--border-hairline);
  text-align: center;
}

body.vns-member-page .agree_member_area .at_exp_text {
  margin: 0 0 14px;
  color: var(--vns-charcoal);
  font-size: 12.5px;
  line-height: 1.9;
}

body.vns-member-page .agree_member_area .at_cont_text {
  border: 1px solid var(--border-subtle);
  background-color: var(--vns-snow);
  color: var(--vns-graphite);
  font-family: var(--font-jp-body);
  font-size: 12px;
  line-height: 1.8;
}

body.vns-member-page .agree_member_area .at_check_area {
  margin-top: 14px;
  color: var(--vns-ink);
  font-size: 13px;
  letter-spacing: 0.03em;
}

/* -- 送信ボタン領域（.send） -- */
body.vns-member-page .send.vns-member-submit {
  margin-top: 32px;
  padding: 0;
  border: none;
  text-align: center;
}

body.vns-member-page .footer_explanation:empty,
body.vns-member-page .header_explanation:empty {
  display: none;
}

/* -- ログインページ：ログインフォーム／新規登録誘導 --
   v1.5.2: 背景付きの白い箱(.vns-login-box / .vns-newentry-box)を廃止し、
   ページ全体の背景(--vns-ivory)と統一。フォーム・テキストはページ
   中央に縦積みで配置するシンプルな構成に変更。
   v1.5.7: セレクタが body.vns-member-page .whitebox のみだったため、
   「マイページ」(親テーマ標準テンプレート wc_member_page.php。
   このテーマでは wc_login_page.php / wc_new_member_page.php のみ上書きして
   おり、マイページ自体は上書きしていない)側の <div class="whitebox"> にも
   同じ max-width:420px が適用されてしまい、姓名・フリガナ・郵便番号など
   会員情報編集フォーム(table.customer_form、th 220px + 姓/名 50:50など
   本来900px前提のレイアウト)全体が420pxに圧縮され、入力欄が極端に狭くなる
   崩れが本番で発生していた。ログイン・新規登録ページの <article> には
   子テーマ側で vns-member-article クラスを付与しているため、それを使って
   セレクタをログイン/新規登録ページ限定に絞り込み、マイページには
   影響しないように修正。 */
body.vns-member-page .vns-member-article .whitebox {
  max-width: 420px;
  margin: 0 auto;
}

body.vns-member-page .vns-login-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}

body.vns-member-page .vns-login-box.member-box {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  border: none;
}

body.vns-member-page .vns-login-box .vns-field {
  text-align: center;
}

body.vns-member-page .vns-login-box .vns-field label,
body.vns-member-page .vns-login-box p label {
  display: block;
  color: var(--vns-charcoal);
  font-size: 11px;
  letter-spacing: 0.1em;
}

body.vns-member-page .vns-login-box .vns-field input {
  margin: 0 auto;
}

body.vns-member-page .vns-login-box p.forgetmenot {
  text-align: center;
}

body.vns-member-page .vns-login-box p.forgetmenot label {
  display: inline;
  color: var(--vns-graphite);
  font-size: 12px;
  letter-spacing: 0.02em;
}

body.vns-member-page .vns-login-box p.submit {
  text-align: center;
}

body.vns-member-page .vns-login-box p.nav {
  margin-top: 18px;
  text-align: center;
}

body.vns-member-page .vns-login-box p.nav a {
  color: var(--vns-charcoal);
  font-size: 12px;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-subtle);
}

body.vns-member-page .vns-login-box p.nav a:hover {
  color: var(--vns-gold-deep);
  border-bottom-color: var(--vns-gold);
}

body.vns-member-page .vns-newentry-box.new-entry {
  width: 100%;
  max-width: 380px;
  margin: 40px auto 0;
  padding: 32px 0 0;
  background-color: transparent;
  border: none;
  border-top: 1px solid var(--border-hairline);
  text-align: center;
}

body.vns-member-page .vns-newentry-box h2 {
  margin: 0 0 16px;
  font-family: var(--font-jp-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--vns-ink);
}

body.vns-member-page .vns-newentry-box p#nav.nav {
  margin: 0;
}

/* v1.5.3: ボタン幅は usces_cart.css 側で入力欄と同じ幅(100%/最大380px)
   に統一しているため、ここでの個別のmin-width指定は不要になり削除した。 */

@media (min-width: 62.5em) {
  body.vns-member-page #content.member-page {
    padding: 96px 24px 128px;
  }

  body.vns-member-page .member_page_title.vns-member-title {
    font-size: 1.9em;
  }

  body.vns-member-page .vns-login-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  body.vns-member-page #content.member-page {
    padding: 48px 16px 72px;
  }
}

/* ============================================================
   商品詳細ページ／カートページの横幅制御
   v1.5.10: #main のフルブリード化（本ファイル冒頭の #main { width:100%;
   max-width:none; } を参照。v1.4.3でサイドバー分の余白を含めて解除した）
   により、商品詳細ページ（single_item.php、two-column想定）・カート〜
   注文完了ページ（usces-cart/、one-column想定）が、会員登録ページ
   （vns-member-page、max-width:900px中央寄せ、v1.5.0）と異なり、
   画面幅いっぱいに広がって非常に横長で読みにくい状態になっていた。

   会員登録ページと同じ考え方で、Welcart商品詳細ページ（body に
   vns-single-item-page クラス。functions.php の
   vanitas_child_single_item_page_body_class() が付与）と、カート〜
   注文完了までの一連のページ（body に vns-cart-page クラス。
   vanitas_child_cart_page_body_class() が付与）で、#content を
   max-width:900px で中央寄せし、画面中央よりの読みやすいレイアウトに
   統一する。

   #main.two-column #content（商品詳細ページ側）は本ファイル冒頭で
   width:100%; max-width:none; float:none; が指定済みのため、ここでは
   さらに max-width を上書きするだけで済む。id2つの詳細度
   （#main #content）を使い、親テーマ／本ファイル冒頭の指定より
   後方に書くことで確実に優先させる。
   ============================================================ */

body.vns-single-item-page #main #content,
body.vns-cart-page #main #content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 96px;
  box-sizing: border-box;
  float: none;
}

@media (min-width: 62.5em) {
  body.vns-single-item-page #main #content,
  body.vns-cart-page #main #content {
    padding: 64px 24px 128px;
  }
}

@media (max-width: 480px) {
  body.vns-single-item-page #main #content,
  body.vns-cart-page #main #content {
    padding: 32px 16px 64px;
  }
}