@charset "utf-8";


/*
Theme Name: Divi child
Template: Divi
*/

/* WooCommerce Cart */
.woocommerce .quantity .input-text.qty.text {
width: 50px;
height: 36px;
padding: 5px;
}

/*
.woocommerce-message, .woocommerce-error, .woocommerce-info {
	color: black !important;
}
*/
/* WooCommerce checkout */
#billing_country_field, #shipping_country_field {
	display: none;
}

/* 商品画像のサイズ調整 2026.06.13 */
/* ギフト商品のみメイン画像のみを正方形（1:1）にする（画像カットなし版） */
/* 1. 親要素の制限を解除し、背景を「白（または透過）」の正方形にする */
.postid-7950 .woocommerce-product-gallery__image {
  max-height: none !important;
  height: auto !important;
  background-color: #ffffff !important; /* 画像の周りの余白を白にする（サイト背景に合わせる） */
}

/* 2. 中の画像を切らずに、縦横どちらか長い方を基準にして正方形の枠に収める */
.postid-7950 .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important; /* ★ここをcontainに変更！画像は一切切れません */
  width: 100% !important;
  height: 100% !important;
  max-width: 500px !important;
  max-height: 500px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 商品ページのサムネイルを5枚並べる  2026.06.13 */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;   /* ← 折り返し禁止 */
  gap: 10px;                       /* ← 余白調整（任意） */
}

.woocommerce-product-gallery .flex-control-thumbs li {
  width: 20% !important;          /* ← 5枚並べる */
  margin: 0 !important;
}


/* 商品一覧画面の商品タイトルの色を修正 */
.woocommerce-loop-product__title {
    color: #333333 !important; /* 深いチャコールグレー（黒より柔らかい） */
    font-size: 16px !important; /* 読みやすいサイズに調整 */
    font-weight: 500 !important; /* 少しだけ太くして高級感を出す */
    line-height: 1.4 !important;
    padding: 10px 0 !important;
    text-align: center !important;
}

/* マウスを乗せた時（ホバー）の色も指定しておくと安心です */
.woocommerce-loop-product__title:hover {
    color: #666666 !important; /* 少し明るくして反応を出す */
}

/* Woocommerce MyAccount画面 */
/* Navigation */

.woocommerce-MyAccount-navigation ul li {
	padding: 0px 10px;
	opacity: 0.7;
	background-color: rgba(0,0,0,0.1);
}

.woocommerce-MyAccount-navigation ul li.is-active {
	background-color: #B6A967;
}

.woocommerce-MyAccount-navigation-link a {
	color: black ;
}

/* Fluid Checkout setting */
.fc-checkout-header .fc-checkout__branding img {
    max-height: 100%;
    max-width: 100%;
}

.fc-checkout-header__inner {
	justify-content: center;
}

/* WooCommerce Breadcrumbs setting */
.crumbs li {
	display: inline;
	list-style: none;
}

.crumbs li:last-child {
	color:  #009D5B;
}

/* Age gate */
/* Age Gateの見出しの文字サイズを変更 */
.age-gate__headline, .age-gate-headline {
    font-size: 1.05rem !important;
    font-weight:400 !important;
}


.age-gate-subheading {
	font-size:17px;
}

.age-gate-form {
	border : solid 8px #006948 ;
}

.age-gate-form-section {
	display:flex;
	flex-flow: column;
}

p.age-gate-message {
	color: #b6a967;
}

.age-gate-additional-information p {
	color: #b6a967;
}

.age-gate-label {
	background-color: rgba(0,105,72,0.5);
}

/* custom age check before place order button */
.privacy_policy {
	font-size: 16px;
	text-align: left;
}

.age_check {
	font-size: 16px;
	text-align: left;
}

div.woocommerce form .form-row {
    margin-top: 30px;
}

/* square payment hide postcode */
.form-row.form-row-wide.wc-square-credit-card-card-postal-code-parent.wc-square-credit-card-hosted-field-parent.hidden {
    display: none;
}

/* WooCommerce single-product page etc... background color */
.woocommerce .product_title {
  font-size: 24px; /* お好みのサイズに調整 */
}

/* 商品詳細画面の「関連商品」エリアを完全に非表示にする 2026.03.12 */
.related.products {
    display: none !important;
}

/*show hamburger menu on desktop*/
@media (min-width: 981px) {
    .et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
        display: none;
    }

    .et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
        display: flex;
        float: none;
        margin: 0 6px;
        align-items: center;
    }
}

/* --- 全画面メニューの実装 --- 2026.03.11 start */
/* --- 1. デスクトップ表示設定（変更なし） --- */
@media (min-width: 981px) {
    .et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu { display: none; }
    .et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu { display: flex; align-items: center; }
}

/* --- スクロール固定 --- */
html, body { 
    scrollbar-gutter: stable; 
}
html:has(.mobile_nav.opened) { 
    overflow: hidden !important; 
}

/* --- メニュー背景を白の全画面にする --- */
.mobile_nav.opened .et_mobile_menu {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 999999 !important; /* 背後のボタンを完全に遮断 */
}

/* --- メニューの文字 --- */
.et_mobile_menu li {
    border-bottom: none !important;
}

.et_mobile_menu li a {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 20px 0 !important;
    letter-spacing: 0.15em !important;
    /* JSで制御するため z-index は標準的でOK */
    background-color: transparent !important;
    border-bottom: none !important;
}

/* 項目と項目の間に、非常に細く短い線を入れる */
.et_mobile_menu li:not(:last-child):after {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background: #dcdcdc;
    margin: 0 auto;
}

.et_pb_menu__cart-button {
    font-size: 22px !important;
    transition: all 0.3s ease;
    color: #006948 !important;
}

/* My Account等の特殊な背景と太字を強制解除 */
.et_mobile_menu li.menu-item a {
    background-color: transparent !important;
    font-weight: normal !important;
}

/* 不要なドット・余白の削除 */
.et_mobile_menu, .et_mobile_menu li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* 共通設定：全画面・白・中央・縦並び */
.mobile_nav.opened .et_mobile_menu,
.et_mobile_menu.stay-put {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important; /* ←これが画面下部の露出を防ぐ要 */
    background: #ffffff !important;
    z-index: 9999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* --- 追加：視覚的重心を上げるための「重し」 --- */
    padding-bottom: 10vh !important; 
    box-sizing: border-box !important;
}

/* 閉じている最中の「上詰め」と「縮み」を物理的に封じる */
.et_mobile_menu.et_pb_animating {
    height: 100vh !important;
    top: 0 !important;
    display: flex !important;
}
/* --- 全画面メニューの実装 --- 2026.03.11 end */

#description-container {
    display: none; /* 初期状態は非表示 */
    padding: 10px;
    background-color: #f9f9f9; /* 背景色 */
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 5px; /* 角を丸くする */
    margin-bottom: 10px;
    font-size: 16px; /* フォントサイズ */
}

.et_pb_column_0_tb_footer {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}


// 商品概要をポップアップ
.modal-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

.modal-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    text-align: left;
    z-index: 100000;
}

.modal-content p {
  margin-bottom: 1em;
  line-height: 1.6;
}

.close-modal {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.add-to-cart {
    display: block;
    margin: 30px auto 10px auto; /* 上下の余白と中央配置 */
    background-color: #7a3e2f;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.cart-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(122, 62, 47, 0.95); /* 葡萄色の余韻 */
    color: #fff;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 18px;
    z-index: 100002;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-align: center;
    pointer-events: none;
}

.quantity-selector {
  margin: 16px 0;
  text-align: center;
}

.quantity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  padding: 0;
  border-radius: 6px;
  box-sizing: border-box;
  height: 44px;
}

.quantity-button,
.product-quantity-2 {
  width: 40px;
  height: 40px;
  font-size: 20px;
  background-color: #eee;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-sizing: border-box;
  line-height: 1;
  cursor: pointer;
}

/* サイト全体の横揺れ（横スクロール）を完全に禁止する 2026.03.16 */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* フィルター（ドロップダウン）が画面を突き破らないように制限 2026.03.16 */
.woocommerce-ordering, 
.archive-filter-container,
select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 480px) {
    .modal-content {
        padding: 16px;
        font-size: 14px;
    }

    .modal-content button {
        font-size: 14px;
        padding: 10px 16px;
        margin-top: 12px;
    }

    .modal-content img {
        max-width: 100%;
        height: auto;
    }
}


/* コンビニ決済の説明文の下に20pxの余白を作る 2026.01.17 */
.wc-stripe-conveni-description {
    margin-bottom: 20px !important;
    display: block;
}

/* 商品説明の文字色を強制的に黒（濃いグレー）にする 2026.03.05 */
#tab-description,
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description h2 {
    color: #333333 !important;
}

/* ついでにページ全体の基本文字色も修正しておく場合 2026.03.05 */
body {
    color: #333333 !important;
}

/*
   アーカイブページで980px以上は、商品を5個、それ以下は2個表示する 2026.03.05 start
*/
/* 全デバイス共通：基本のレイアウト設定 */
.et_pb_module.et_pb_shop ul.products,
.et_pb_module.et_pb_woo_products ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    list-style: none !important;
    /* PC用：5列表示を維持するための狭い隙間 */
    gap: 30px 1.25% !important; 
    justify-content: flex-start !important;
}

/* PCサイズ（981px以上）：横5つ */
@media (min-width: 981px) {
    ul.products li.product {
        width: 19% !important; /* (100% - 隙間) / 5 */
        margin: 0 !important;
        float: left !important;
    }
}

/* タブレット・スマホ（980px以下）：横2つ */
@media (max-width: 980px) {
/* 親要素：隙間を 6% に広げる */
    .et_pb_module.et_pb_shop ul.products,
    .et_pb_module.et_pb_woo_products ul.products {
        gap: 30px 6% !important; 
    }

    /* 商品タイル：幅を 47% に固定（47+6+47=100%） */
    body .et_pb_module.et_pb_shop ul.products li.product,
    body .et_pb_module.et_pb_woo_products ul.products li.product {
        width: 47% !important;
        max-width: 47% !important;
        flex: 0 0 47% !important;
        margin: 0 !important;
        float: none !important;
    }
}

/* Diviの自動改行（Clear）をリセット */
/* これをしないと、ソート後に「歯抜け」が発生します */
ul.products::before,
ul.products::after,
ul.products li.product::before,
ul.products li.product::after {
    display: none !important;
    content: none !important;
}

.woocommerce ul.products li.product.last, 
.woocommerce ul.products li.product.first,
.woocommerce-page ul.products li.product.last,
.woocommerce-page ul.products li.product.first {
    clear: none !important;
    margin-right: 0 !important;
}
/* ここまで、商品の並び（5個、2個） 2026.03.05 */

/*
   アーカイブページに商品検索の
   ドロップダウン機能を追加する 2026.03.05 start
*/
/* 1. ツールバー全体：Noto Serif JPを適用 */
.pv-filter-toolbar {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
    justify-content: center !important;
    font-family: 'Noto Serif JP', serif !important; /* 明朝体でエレガントに */
    font-size: 15px; /* 少し大きめに調整 */
    letter-spacing: 0.1em;
    z-index: 1010 !important;
    position: relative;
    text-transform: none !important; /* 日本語なので大文字変換を解除 */
}

/* 各グループも中央基準に */
.pv-filter-group {
    display: inline-block;
    position: relative;
    text-align: left; /* ドロップダウンの中身は左揃えを維持（読みやすさのため） */
}

/* メインボタン：線の色を落ち着いたグレーに */
.pv-filter-btn {
    background: transparent;
    border: none;
    border-bottom: 1px solid #a0a0a0;
    padding: 10px 30px 8px 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: #333;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}

.pv-filter-btn:hover,
.pv-filter-group.is-active .pv-filter-btn {
    border-bottom-color: #006948; /* テーマカラーの緑 */
    color: #000;
}

/* 矢印をより繊細に調整 */
.pv-filter-btn::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 55%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #888;
    transition: transform 0.3s ease;
}

.pv-filter-group.is-open .pv-filter-btn::after {
    transform: translateY(-50%) rotate(180deg);
}

/* ドロップダウンメニュー：アイボリー背景と視認性 */
.pv-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 9999;
    background-color: #fdfdfb !important; /* ★白と区別できるアイボリー */
    border: 1px solid #e2e2e2;
    min-width: 250px;
    padding: 12px 0 !important;
    margin: 0 !important;
    list-style: none !important; /* ★点の完全削除 */
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    
    /* アニメーション設定 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    display: block !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* メニュー内項目：点の排除とホバー色の強化 */
.pv-dropdown-menu li {
    list-style: none !important; /* ★念押しで点を消す */
    margin: 0 !important;
    padding: 12px 25px !important;
    color: #444;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* 不要な疑似要素ドットも完全に殺す */
.pv-dropdown-menu li::before,
.pv-dropdown-menu li::after,
.pv-dropdown-menu::before,
.pv-dropdown-menu::after {
    content: none !important;
    display: none !important;
}

/* ホバー時：コントラストをはっきり（深緑のアクセント） */
.pv-dropdown-menu li:hover {
    background-color: #f2f0e6 !important; /* ★はっきりわかるベージュ */
    color: #006948 !important; /* 文字をテーマカラーに */
}

/* 選択中の項目：太字と色の変化で表現 */
.pv-dropdown-menu li.is-active {
    font-weight: 700;
    color: #000 !important;
    background-color: #f2f0e6;
}

/* 展開時の表示 */
.pv-filter-group.is-open .pv-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* カウント表示 */
.count, .count-total {
    font-size: 0.9em;
    color: #999;
    margin-left: 8px;
    font-weight: 400; /* 数字は少し細くして上品に */
}

/* --- スマホ表示の最適化 (767px以下) --- */
@media (max-width: 767px) {
    /* ツールバー：余裕を持たせた配置 */
    .pv-filter-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px 20px !important; /* 縦の間隔を15px、横を20pxに広げる */
        overflow: visible !important;
        margin-bottom: 20px;
    }

    /* ボタン：文字サイズUPと矢印の距離確保 */
    .pv-filter-btn {
        font-size: 14px !important; /* ★13px程度まで大きく（余裕があれば14pxでも可） */
        /* 右側のパディング（35px）を多めに取ることで、文字と▼の距離を離します */
        padding: 8px 20px 8px 0 !important; 
        white-space: nowrap !important;
        letter-spacing: 0.05em !important;
        color: #333;
    }

    /* 矢印の位置調整 */
    .pv-filter-btn::after {
        right: 10px !important; /* ★右端からの位置を固定 */
        /* 文字との距離は padding-right (35px) によって自動的に保たれます */
        border-top-width: 5px !important; /* 矢印のサイズも少しだけ調整 */
    }

    /* ドロップダウン：スマホでの視認性を維持 */
    .pv-dropdown-menu {
        min-width: 220px !important;
        top: calc(100% + 5px) !important;
        z-index: 9999 !important;
    }

    /* ツールバー内の最後のグループ（一番右）を特定 */
    .pv-filter-toolbar .pv-filter-group:last-child .pv-dropdown-menu {
        left: auto !important;   /* 左基準を解除 */
        right: 0 !important;      /* 右基準に変更（ボタンの右端に合わせる） */
        transform: translateY(10px); /* 中央寄せのtransformを使っていた場合はリセット */
    }

    /* 開いた時のアニメーションも右基準で安定させる */
    .pv-filter-toolbar .pv-filter-group:last-child.is-open .pv-dropdown-menu {
        transform: translateY(0);
    }
}
/* アーカイブページに商品検索のドロップダウン機能を追加する 2026.03.05 end */

/*
 * ヒーローエリアのアニメーションの設定 2026.03.08 start
*/
/* 読み込み時のチラつき防止（編集画面以外） */
:not(.et-fb) .hero-fade-text, 
:not(.et-fb) .hero-fade-button {
    visibility: hidden;
}

/* アニメーション前の状態設定 */
.hero-fade-text .fade-line, 
.hero-fade-button {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 3.5s ease-out, transform 3.0s ease-out;
    visibility: visible;
}

/* テキストの位置ずれ・隙間対策 */
.hero-fade-text .fade-line {
    display: block; 
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    line-height: inherit; /* Diviモジュールの設定を継承 */
    filter: blur(5px); /* 最初は少しぼかしておく */
    transition-property: opacity, filter, transform; /* ぼかしもアニメーションの対象にする */
}

/* ボタンを押し下げている原因（brタグ）を無効化 */
.hero-fade-text br {
    display: none !important;
}

/* 表示された時の状態：ボタンに「淡いヴェール」を纏わせる */
.hero-fade-text .fade-line.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
    filter: blur(0) !important;
}

.hero-fade-button.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    /* --- 【上品な目立たせ方】淡いシャンパンゴールドの残光 --- */
    /* 輪郭を強調せず、ボタンの背後をわずかに明るくして視認性を高めます */
    filter: drop-shadow(0 0 20px rgba(255, 248, 220, 0.35)) !important;
}

/* ボタン単体の微調整：動作を極限まで滑らかにする */
.hero-fade-button {
    display: inline-block !important;
    opacity: 0 !important;
    transform: translateY(8px) !important; /* 横移動より、下から静かに浮かぶ方が上品です */
    /* 時間を 5.5秒 に延長：呼吸するようにゆっくりと現れます */
    transition: opacity 5.5s cubic-bezier(0.25, 0.1, 0.25, 1.0), 
                transform 5.0s cubic-bezier(0.25, 0.1, 0.25, 1.0), 
                filter 6.0s ease-out !important;
    /* 最初は光も形もない状態 */
    filter: drop-shadow(0 0 0px rgba(255, 248, 220, 0)) blur(0);
}

/* ビジュアルビルダーでの表示設定 */
.et-fb .hero-fade-text, 
.et-fb .hero-fade-button,
.et-fb .fade-line {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
}
/* ビジュアルビルダー時はbrタグを戻す（編集しやすくするため） */
.et-fb .hero-fade-text br {
    display: inline !important;
}

/* ヒーローエリアのアニメーションの設定 2026.03.08 end */

/* グローバルフッターの調整 2026.03.12 start */
/* リンクを横並びにする命令 */
.footer-links {
    display: flex;         /* 横並びにする */
    justify-content: center; /* 中央に寄せる */
    flex-wrap: wrap;       /* 画面が狭いときは折り返す */
    gap: 0;                /* 隙間は HTML 内の | で制御 */
}

/* リンクの区切り線を薄く、繊細に */
.footer-links .sep {
    color: #ddd;
    margin: 0 10px;
    font-weight: 100;
}

/* リンクにマウスを乗せた時の変化 */
.footer-links a {
    transition: color 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.footer-links a:hover {
    color: #1a1a1a !important;
}
/* グローバルフッターの調整 2026.03.12 end */

/*
 * 個別商品ページの配置をカスタマイズ 2026.03.17
 */
/* 1. 全体レイアウト：中央寄せ */
.woocommerce #content div.product div.images, 
.woocommerce div.product div.images,
.woocommerce #content div.product div.summary, 
.woocommerce div.product div.summary {
    float: none !important;      /* 写真と説明を縦1列に表示 */
    width: 100% !important;      /* 横幅を100%に強制 */
    clear: both !important;      /* 回り込みを完全にリセット */
    max-width: 800px !important; 
    margin: 0 auto 30px auto !important;
}

/* 2. 写真エリア：中央寄せ */
/*.woocommerce div.product div.images {
    display: flex;
    justify-content: center;
}*/

/* 写真の表示サイズを調整 */
.woocommerce div.product div.images img {
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain;
}

/* 3. 【中央揃え】タイトル・価格・ボタン・詩・意味 */
.woocommerce div.product .product_title,
.gioia-symbol-subtitle,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product div.summary .cart,
.woocommerce div.product div.summary .cart .quantity,
.gioia-poem-area,
.gioia-meaning-box {
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    color: #4a3c2f !important;
}

.woocommerce div.product .product_title { font-size: 26px !important; margin-bottom: 15px !important; }
.gioia-symbol-subtitle { font-style: italic; margin-top: -10px !important; margin-bottom: 25px !important; letter-spacing: 0.1em; }

/* カートボタンと数量入力：PC・タブレットでは「横並び」で見やすく */
@media (min-width: 768px) {
    .woocommerce div.product div.summary .cart {
        flex-direction: row; 
        gap: 30px !important;
    }
}

/* --- B. スマホ専用の微調整 (767px以下) --- */
@media (max-width: 767px) {
    /* スマホではカートボタン類も「縦並び」にして押しやすく */
    .woocommerce div.product div.summary .cart { 
        flex-direction: column !important; 
        gap: 15px !important;
    }
    
    .woocommerce div.product .product_title { 
        font-size: 20px !important; 
    }
    
    .gioia-poem-area { 
        font-size: 0.95em !important; 
        line-height: 2.2 !important; 
    }
    
    .woocommerce-product-details__short-description {
        padding: 0 15px !important;
    }
}

.woocommerce div.product div.summary .cart .quantity,
.woocommerce div.product div.summary .cart .button {
    margin: 0 !important;               /* 邪魔な余白をゼロにしてgapを優先させる */
}

/* 4. 短い説明文（左揃え） */
.woocommerce-product-details__short-description {
    text-align: left !important;
    max-width: 600px;
    margin: 30px auto !important;
    letter-spacing: 0.1em;
    line-height: 1.8;
    color: #333 !important;
}

/* 5. 詩とギフト解説（中央配置・テキスト左揃え） */
/* --- 共通の見出しスタイル (- Story - など) --- */
.pv-section-title {
    text-align: center !important;
    font-family: serif !important;
    color: #7b3e3e !important;
    font-size: 1.2em !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 20px !important;
    display: block;
}

/* --- 詩のエリア (Storyの内容) --- */
.gioia-poem-area {
    font-family: serif !important;
    font-style: italic !important;
    line-height: 2.4 !important;
    color: #4a3c2f !important;
    margin-bottom: 60px !important;
    white-space: pre-wrap !important;
    font-size: 1.05em !important;
    text-align: center !important; /* 中央揃えを確定 */
    max-width: 500px;             /* 既存の幅制限を維持 */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- ギフトメッセージのボックス --- */
.gioia-meaning-box {
    background-color: #fdfaf6 !important;
    padding: 35px !important;
    border: 1px solid #efe4d8 !important; /* 左線から全囲みに変更 */
    border-radius: 10px !important;
    text-align: left !important;           /* 文章は左寄せ */
    margin-bottom: 60px !important;
    max-width: 500px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ギフトボックス内の文字サイズ調整 */
.gioia-meaning-box-content {
    font-size: 15px !important;
    line-height: 1.9 !important;
    color: #555 !important;
    white-space: pre-wrap !important;
}

/* 6. 最下部の詳細説明（タブ・表） */
.woocommerce-tabs.wc-tabs-wrapper {
    max-width: 650px !important;
    margin: 80px auto !important;
    padding: 0 20px;
    border: none !important; /* 全体の枠を消す */
}

/* タブメニュー全体の背景と線を消し、中央に寄せる */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0 auto 30px auto !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important; /* 灰色の背景を消す */
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none !important; }

/* タブの構造：背景を捨てて文字を中央に置く */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    width: auto !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* 文字と左右のラインのデザイン */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #006948 !important; /* ブランドカラーの緑 */
    font-weight: 600 !important;
    font-size: 16px;
    letter-spacing: 0.2em;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 文字と線の間の距離 */
    text-decoration: none !important;
    margin: 0 !important;
    padding: 10px 0 !important;
}

/* 左右に伸びるラインの作成 */
.woocommerce div.product .woocommerce-tabs ul.tabs li a::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
    content: "" !important;
    display: inline-block !important;
    width: 60px; /* 線の長さ（お好みで調整してください） */
    height: 1px; /* 線の太さ */
    background-color: #006948 !important; /* 線の色 */
}

/* 不要な装飾パーツ（灰色の影など）を改めて消去 */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    content: none !important;
}

/* スペック表 */
.woocommerce-Tabs-panel table.shop_attributes {
    width: 100% !important;
    border: none !important;
    background: none !important;
    margin-top: 20px;
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
}

.woocommerce-Tabs-panel table.shop_attributes th {
    width: 35% !important;
    background-color: #006948 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    font-size: 13px;
    text-align: left;
    border: none !important;
}

.woocommerce-Tabs-panel table.shop_attributes td {
    background-color: #f4f7f6 !important;
    color: #4a3c2f !important;
    padding: 12px 20px !important;
    font-size: 14px;
    text-align: left;
    border: none !important;
}

.woocommerce-Tabs-panel h2 { display: none; }
.woocommerce-Tabs-panel p {
    line-height: 2 !important;
    color: #4a3c2f !important;
    letter-spacing: 0.1em;
}

/* 7. スマホ表示 */
@media (max-width: 767px) {
    .woocommerce div.product div.summary .cart { flex-direction: column !important; }
    .gioia-poem-area { font-size: 0.95em !important; }
}
/* 商品ページの配置をカスタマイズ 2026.03.17 end */


/**
 * カスタムギフトセット専用ページ用スタイル 2025.03.25
 * 商品タグに 'gift' が含まれる場合、body に 'term-gift' クラスが付与されることを利用
 */
/* 数量選択（quantity）ボックスを非表示にする */
.single-product.tax-product_tag.term-gift div.product form.cart .quantity {
    display: none !important;
}

/* --- 地中海エレガンス・ギフトカスタマイズ --- */
/* 見出し：太陽のゴールドと紺碧 */
#pv-gift-custom-container h4 {
    font-size: 1.2rem;
    color: #005073;
    border-bottom: 1px solid #ffd700; /* 太陽の光 */
    padding-bottom: 12px;
    margin: 35px 0 20px 0 !important;
    letter-spacing: 0.15em;
    text-align: center;
    font-weight: 700;
}

/* 選択肢のラベル：大理石の質感と「動き」の演出 */
#pv-gift-custom-container label {
    display: block;
    padding: 16px 20px;
    margin-bottom: 12px !important;
    background: #fcfcfc;
    border: 1px solid #d1d1d1;
    border-left: 5px solid #d1d1d1; /* 未選択時の静かなグレー */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 滑らかな動き */
    font-family: "Yu Gothic", sans-serif;
    position: relative;
}

/* ホバー・選択時：太陽が差し込み、海が広がるような変化 */
#pv-gift-custom-container label:hover {
    background-color: #004b6e !important; /* 地中海の深い紺碧 */
    border-color: #00334d !important;
    border-left: 5px solid #ffd700 !important; /* 太陽のゴールドは維持 */
    transform: translateX(8px);
    box-shadow: 5px 8px 20px rgba(0, 40, 60, 0.2);
    color: #ffffff !important; /* 文字を白に反転させて読みやすく */
}

#pv-gift-custom-container label.pv-highlight-step {
    background-color: #004b6e !important;
    border-left: 5px solid #ffd700 !important;
    color: #ffffff !important;
}

/* 「中にチェックの入ったinputがあるlabel」の背景色を自動で#fdfdf0にする */
#pv-gift-custom-container label:has(input:checked) {
    background-color: #fdfdf0 !important;
    border-color: #ffd700 !important;
    color: #333333 !important;
}

/* プレビュー画像エリア：水面の反射のような透明感 */
#pv-gift-preview-display {
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px;
    padding: 25px !important;
    margin-top: 35px !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
}

/* ライブ集計：糸杉の深い緑をアクセントに */
#pv-live-summary {
    border-top: 2px solid #2f4f4f !important;
    background: #fdfaf6 !important;
    padding: 25px !important;
    margin-top: 40px !important;
}

/* 購入ボタン：マットなイタリアンレッド */
body.single-product .summary form.cart .single_add_to_cart_button {
    background-color: #800000 !important; /* ダークマルーン */
    padding: 18px 70px !important;
    border-radius: 2px !important; /* あえて角を残すことで、工芸品のような硬質さを */
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    box-shadow: 4px 4px 0px #3e2723; /* クラシックな押しボタン風の影 */
}

body.single-product .summary form.cart .single_add_to_cart_button:hover {
    background-color: #5d0000 !important;
    transform: translate(2px, 2px);
    box-shadow: none;
}

body.single-product .summary form.cart .single_add_to_cart_button:active {
    transform: translateY(2px);
    box-shadow: 0 0px 0 #b8860b;
}

/*
 * セレクトボックスを隠し、選択要のカードを定義
 */
/* カードコンテナ（スマホは横スクロール） */
.pv-wine-cards-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px 5px;
}

/* カード型セレクターのスタイル（地中海エレガンス） */
/* ラッパー：ここを基準に影を「固定」する */
.pv-cards-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* コンテナ本体：スクロールの設定 */
.pv-wine-cards-container {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 20px 10px 30px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* 影（グラデーション）：wrapperに対して固定するので、スクロールしても位置が変わりません */
.pv-cards-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px; /* 少し広げて滑らかに */
    height: calc(100% - 30px); /* スクロールバーに被らない高さに調整 */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
    pointer-events: none; /* クリックを透過させる */
    z-index: 10;
}

/* スクロールバーのデザイン（先ほどの設定を維持） */
.pv-wine-cards-container::-webkit-scrollbar {
    height: 8px;
}
.pv-wine-cards-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.pv-wine-cards-container::-webkit-scrollbar-thumb {
    background: #004b6e;
    border: 2px solid #f1f5f9;
    border-radius: 10px;
}

/* 個別のカード設定 */
.pv-wine-card {
    flex: 0 0 200px; /* カードの幅を200pxに固定 */
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 4px solid #004b6e; /* 紺碧のアクセント */
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 選択された時のスタイル（太陽のゴールド） */
.pv-wine-card.is-selected {
    border-color: #ffd700;
    background: #fdfcf0;
    box-shadow: 0 10px 15px -3px rgba(0, 75, 110, 0.2);
    transform: translateY(-4px);
}

/* カード内の要素 */
.pv-wine-card img {
    width: 100%;
    height: 160px;
    object-fit: contain; /* 商品画像を枠内に収める */
    margin-bottom: 12px;
}

.pv-wine-card h5 {
    font-size: 14px;
    padding: 0 !important;
    color: #1f2937;
    line-height: 1.4;
/*    height: 2.8em; /* 2行分に固定 */
    overflow: hidden;
}

/* カード内の価格表示 */
.pv-card-price {
    color: #333333 !important; 
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 5px 10px;
    font-family: 'Montserrat', serif;
    font-style: italic;
}

.pv-card-price .woocommerce-price-suffix,
.pv-card-price .tax-info {
    font-size: 0.7rem;
    color: #999;           /* 薄いグレー */
    font-weight: normal;
    margin-left: 5px;
}

/* ボタンの調整 */
.pv-card-btn {
    background: #004b6e;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 9999px;
    font-size: 12px;
    width: 100%;
    cursor: pointer;
    pointer-events: none; /* カード全体をクリック対象にするため、ボタン単体の反応は消す */
}

.pv-wine-card.is-selected .pv-card-btn {
    background: #ffd700;    color: #004b6e;
    font-weight: bold;
}

/* 1. ワインとオイルの選択肢（カード化したもの）だけをピンポイントで隠す */
select[name="pv_main_item"], 
select[name="pv_sub_item"] {
    display: none !important;
}

/* それ以外のセレクトボックス（メッセージ定型文など）を強制的に再表示 */
#pv-gift-custom-container select:not([name="pv_main_item"]):not([name="pv_sub_item"]) {
    display: block !important; /* 他の「隠す」命令を打ち消す */
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    appearance: auto; /* ブラウザ標準のドロップダウン矢印を出す */
    -webkit-appearance: menulist;
}

/* 商品選択時に詳細説明を表示するプレビューエリア */
/* 詩のエリアをタイトルの直後に配置した際の余白調整 */
.pv-detail-poem-box {
    padding: 20px 0 30px;
    text-align: center;
    border-bottom: 1px solid #eee; /* 下に境界線を入れて「意味」と区切る */
    margin-bottom: 20px;
}

.pv-detail-poem-text {
    font-family: "Noto Serif JP", serif;
    line-height: 1.9;
    color: #004b6e;
    white-space: pre-wrap;
    font-style: italic;
    font-size: 1.0rem;
}

/* ギフトの意味：詩の下に配置 */
.pv-detail-meaning {
    max-width: 600px;
    margin: 0 auto;   /* 絞った幅を中央に配置 */
    text-align: left; 
    background: #fdfaf6;
    border-left: 3px solid #ffd700;
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 詳細説明 */
.pv-detail-full-desc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #555;
    
    max-width: 600px;
    margin: 0 auto;   /* 絞った幅を中央に配置 */
    text-align: left; 
    
    /* 要素との区切り */
    padding-top: 30px;
    margin-top: 10px;
    border-top: 1px dashed #eee;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.pv-poem-label {
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    color: #b8860b;
    text-transform: uppercase;
    margin: 40px 0 10px;
}

.pv-meaning-label {
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: #b8860b;
    text-transform: uppercase;
    margin: 40px 0 10px;
}

/* アコーディオン全体のコンテナ */
.pv-detail-accordion-wrapper {
    margin-top: 20px;
    border-top: 1px solid #d1d1d1;
}

/* アコーディオンの基本装飾 */
.pv-accordion-item {
    border-bottom: 1px solid #d1d1d1;
}

.pv-accordion-header {
    padding: 20px 0;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* テキスト装飾 */
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1em;
//    text-transform: uppercase;
    color: #333;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent; /* 青いハイライトを禁止 */
}

/* ホバー時に少し背景色を変えて「押せる感」を出す */
.pv-accordion-header:hover {
    background: rgba(0, 105, 72, 0.1);
}

/* ＋− 記号の調整：右端に絶対配置してタイトルの中央揃えを邪魔しない */
.pv-accordion-header::after {
    content: '+';
    position: absolute;
    right: 15px; /* 右端に配置 */
    font-size: 24px; /* サイズを大きく */
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
}

.pv-accordion-item.active .pv-accordion-header::after {
    content: '-';
    transform: rotate(180deg);
}
.pv-accordion-content {
    display: none; /* 初期は非表示 */
    padding-bottom: 20px;
    line-height: 1.6;
}

/* QuickViewModalの微調整 */
.modal-full-description, .modal-poem {
    margin-top: 15px;
}

/* ギフト専用ページ対応 2026.03.25 end */

/* DIVIスライダーのアニメーションを無効化 2026.05.06 */
/* スマホ表示時のみ、かつ特定のクラス（.wine-label-slider）が付いたスライダーにのみ適用 */
/* --- DIVIワインラベル用スライダー（スマホ限定） --- */
@media (max-width: 767px) {

  /* 1. スライダーの高さを「中身に合わせる」設定：クラスを限定 */
  .wine-label-slider.et_pb_slider, 
  .wine-label-slider .et_pb_slide {
    min-height: 0 !important;
    height: auto !important;
  }

  .wine-label-slider .et_pb_slide .et_pb_container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: auto !important;      /* 固定解除 */
    min-height: 0 !important;
    padding: 30px 20px 80px 20px !important;
    box-sizing: border-box !important;
  }

  /* 2. 画像：40vhに固定し、アニメーションを停止：クラスを限定 */
  .wine-label-slider .et_pb_slide_image,
  .wine-label-slider .et_pb_slide_image img {
    display: block !important;
    position: relative !important;
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    height: 40vh !important;       /* 高さを40vhに固定 */
    max-height: 40vh !important;
    width: auto !important;        /* 横幅は比率維持 */
    margin: 0 auto 15px auto !important;
    transform: none !important;
  }

  /* 3. テキスト：アニメーションを停止し、画像に近づける：クラスを限定 */
  .wine-label-slider .et_pb_slide_description {
    position: relative !important;
    display: block !important;
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
  }
}/* Noto Sans Jp font optimise */
@font-face {
  font-family: 'Noto Sans JPN';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://poggioverde.jp/wp-content/themes/divi-child/web-fonts/NotoSans_Regular.woff2) format('woff2'),
}
/*
@font-face {
  font-family: 'Noto Sans JPN';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://poggioverde.jp/wp-content/themes/divi-child/web-fonts/NotoSans_Medium.woff2) format('woff2'),
}

@font-face {
  font-family: 'Noto Sans JPN';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://poggioverde.jp/wp-content/themes/divi-child/web-fonts/NotoSans_Bold.woff2) format('woff2'),
}
*/
@font-face {
  font-family: 'Cormorant-G Bold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://poggioverde.jp/wp-content/themes/divi-child/web-fonts/CormorantGaramond-Bold.woff2) format('woff2'),
}

body, h1, h2, h3, h4, h5, h6, input, textarea, select, .et_pb_button, #main-header, #et-top-navigation, #top-header .container, .et_slide_in_menu_container,.et_slide_in_menu_container .et-search-field {
  font-family: 'Noto Sans JPN', 'Cormorant-G Bold', sans-serif !important;
}