/*
 Theme Name:   Storefront Child
 Theme URI:    http://www.ogayoshi.com/
 Description:  Storefront Child Theme for Ogayoshi
 Author:       Ogayoshi
 Template:     storefront
 Version:      1.1.25
*/

:root {
  --ogayoshi-red: #8f2e14; /* 落ち着いたえんじ/朱色系 */
  --ogayoshi-navy: #192f60; /* 濃紺 */
  --ogayoshi-bg: #fdfaf5; /* 暖かみのある背景色 */
  --ogayoshi-text: #333333;
}

/* 全体のフォントとベースカラー (M PLUS 1でモダンな印象に) */
body, button, input, select, textarea {
    font-family: 'M PLUS 1', Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif !important;
    background-color: var(--ogayoshi-bg);
}

body {
    color: var(--ogayoshi-text);
}

/* 見出しのカラーとフォント (M PLUS 1で統一) */
h1, h2, h3, h4, h5, h6, 
.alpha, .beta, .gamma, .delta, .epsilon, .zeta,
.wp-block-heading {
    font-family: 'M PLUS 1', Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif !important;
    color: var(--ogayoshi-navy) !important;
    font-size: clamp(20px, 4vw, 26px) !important;
    font-weight: 700 !important;
}

/* 商品タイトルは太字にせず、少し小さめに */
.wc-block-grid__product-title, .woocommerce-loop-product__title {
    font-family: 'M PLUS 1', Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif !important;
    color: var(--ogayoshi-navy) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* リンク色 */
a {
    color: var(--ogayoshi-red);
}
a:hover {
    color: var(--ogayoshi-navy);
}

/* ヘッダー周りの調整 */
.site-header {
    background-color: #ffffff;
    background-image: url('/wp-content/uploads/2026/03/ogayoshi_header.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    border-bottom: 3px solid var(--ogayoshi-red);
    padding-top: 25.64%; /* 画像のアスペクト比(1950x500 = 25.64%)に合わせて高さを確保 */
    padding-bottom: 0;
    position: relative;
}

.site-branding {
    margin-bottom: 0;
    padding: 0;
    height: 0;
}

/* サイトタイトル (ロゴの代替) - 画像にテキストが含まれるため非表示化 */
.site-title {
    margin: 0;
    padding: 0;
    text-indent: -9999px; /* テキストを画面外へ飛ばす */
    white-space: nowrap;
    overflow: hidden;
    height: 0;
}

.site-title a {
    display: none;
}

/* サイトのキャッチフレーズ - 非表示 */
.site-description {
    display: none;
}

/* メインナビゲーション */
.main-navigation ul li a {
    color: var(--ogayoshi-navy);
    font-weight: 700;
}

.main-navigation ul li a:hover {
    color: var(--ogayoshi-red);
}

/* ボタンやカート周りの色 */
button, input[type="button"], input[type="reset"], input[type="submit"], .button, .added_to_cart,
.storefront-handheld-footer-bar ul li > a,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover,
.wp-block-button__link {
    background-color: var(--ogayoshi-red) !important;
    color: #ffffff !important;
    border-color: var(--ogayoshi-red) !important;
}

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, .wp-block-button__link:hover {
    background-color: var(--ogayoshi-navy) !important;
    color: #ffffff !important;
}

/* 価格の色 */
.price, .amount, .woocommerce-Price-amount {
    color: var(--ogayoshi-red) !important;
    font-weight: 700;
}

/* セールバッジ */
.woocommerce span.onsale {
    background-color: var(--ogayoshi-red) !important;
    color: #ffffff !important;
}

/* フッターの微調整 */
.site-footer {
    background-color: var(--ogayoshi-navy) !important;
    color: #ffffff !important;
}

.site-footer a {
    color: #eeeeee;
}
.site-info {
    font-family: 'Noto Serif JP', serif;
}

/* ==========================================================================
   WooCommerce マイアカウント（マイページ）のデザイン改善
   ========================================================================== */

/* メニュー全体をボタン風リストに */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 12px;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #ffffff;
    border: 1px solid #eee;
    border-left: 6px solid #ccc; /* 通常時はグレーのアクセント */
    color: var(--ogayoshi-text);
    padding: 14px 15px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ホバー時およびアクティブ時のデザイン */
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #fafafa;
    border-color: #ddd;
    border-left-color: var(--ogayoshi-navy); /* アクティブ時は濃紺 */
    color: var(--ogayoshi-navy);
}

/* ログアウトボタンだけは赤色で注意喚起 */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    border-left-color: var(--ogayoshi-red);
    color: var(--ogayoshi-red);
}

/* 文字の前に絵文字アイコンを追加して直感的に */
/* Storefrontのデフォルトアイコンを上書きし、絵文字用フォントを強制 */
.woocommerce-MyAccount-navigation ul li a::before {
    content: none !important; /* デフォルトを非表示 */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before {
    content: "🏠" !important;
    display: inline-block !important;
    margin-right: 12px;
    font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before {
    content: "📦" !important;
    display: inline-block !important;
    margin-right: 12px;
    font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before {
    content: "📍" !important;
    display: inline-block !important;
    margin-right: 12px;
    font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before {
    content: "⚙️" !important;
    display: inline-block !important;
    margin-right: 12px;
    font-size: 1.2em;
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    content: "🚪" !important;
    display: inline-block !important;
    margin-right: 12px;
    font-size: 1.2em;
}

/* 画面幅に余裕がある場合はフレックスボックスで横並びを確実に維持 */
@media screen and (min-width: 768px) {
    .woocommerce-account .woocommerce {
        display: flex;
        flex-wrap: nowrap;
        gap: 4%;
        align-items: flex-start;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 32%;
        float: none;
        margin: 0 !important; /* デフォルトのマージンをリセット */
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 64%;
        float: none;
        margin: 0 !important; /* デフォルトのマージンをリセット */
    }
}

/* ウェルカムメッセージのアニメーション等 (もしあれば) */
.myaccount-welcome-message {
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ヘッダー右上のサブナビゲーション（ログイン等）の配置調整 */
@media screen and (min-width: 768px) {
    .storefront-secondary-navigation .col-full {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .storefront-secondary-navigation .secondary-navigation {
        margin-right: 20px;
        margin-bottom: 0;
    }
    .storefront-secondary-navigation .site-search {
        flex-grow: 0;
        margin-bottom: 0;
    }
}

/* お知らせ（新着情報）の中身を左寄せにする */
.wp-block-latest-posts {
    text-align: left;
}
.wp-block-latest-posts li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* フッターウィジェットの高度なデザイン（おがよしについて） */
.site-footer .widget-area {
    margin-bottom: 0 !important;
}

/* タイトルを左寄せして装飾 */
.site-footer .widget-title {
    text-align: left;
    font-size: 1.3em;
    letter-spacing: 2px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    color: #ffffff !important;
    position: relative;
}
.site-footer .widget-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: #ffffff;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* メニューのリストを左寄せのフレックスに */
.site-footer .widget_nav_menu ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px 35px;
}

.site-footer .widget_nav_menu ul li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Storefrontのデフォルトアイコン（ファイルマーク）を削除 */
.site-footer .widget_nav_menu ul li::before {
    content: none !important;
    display: none !important;
}

.site-footer .widget_nav_menu ul li a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.95em;
    opacity: 0.8;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* リンクの頭に小さなアクセントを付与 */
.site-footer .widget_nav_menu ul li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--ogayoshi-red, #8f2e14);
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 3px rgba(255,255,255,0.3);
}

.site-footer .widget_nav_menu ul li a:hover {
    opacity: 1;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* フッターの余白を削減（モバイル版では固定バーがあるため下余白を確保） */
.site-footer {
    padding-top: 4em !important;
    padding-bottom: 1.5em !important;
}
@media screen and (max-width: 767px) {
    /* 最近閲覧した商品を2列にするなどの処理（前回の修正） */
    .site-footer {
        padding-bottom: 5.5em !important;
    }
    /* フッターウィジェットをモバイルでも表示する */
    .site-footer .footer-widgets {
        display: block !important;
    }
    .site-footer .footer-widgets .block {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 2em !important;
    }
    
    /* スマホではフッターのメニューを縦並びにして綺麗に見せる */
    .site-footer .widget_nav_menu ul {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* すべての商品リストをスマホで2列表示にする */
    ul.products li.product,
    .recently-viewed-section ul.products li.product,
    .wc-block-grid.has-4-columns .wc-block-grid__products .wc-block-grid__product,
    .wc-block-grid .wc-block-grid__products .wc-block-grid__product {
        width: 48% !important;
        float: left !important;
        margin-right: 4% !important;
        clear: none !important;
        margin-bottom: 20px !important;
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }
    
    /* フレックスコンテナの調整（WooCommerceブロック用） */
    .wc-block-grid .wc-block-grid__products {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    ul.products li.product:nth-child(2n),
    .recently-viewed-section ul.products li.product:nth-child(2n),
    .wc-block-grid .wc-block-grid__products .wc-block-grid__product:nth-child(2n) {
        margin-right: 0 !important;
    }
    ul.products li.product:nth-child(2n+1),
    .recently-viewed-section ul.products li.product:nth-child(2n+1),
    .wc-block-grid .wc-block-grid__products .wc-block-grid__product:nth-child(2n+1) {
        clear: both !important;
    }
}
.site-footer .widget {
    margin-bottom: 20px !important;
}

/* 重複している標準のプライバシーポリシーリンクとWooCommerceクレジットを非表示 */
.site-info a,
.site-info .privacy-policy-link-separator {
    display: none !important;
}

/* 最近閲覧した商品をPCで4列にする */
@media screen and (min-width: 768px) {
    .recently-viewed-section ul.products li.product {
        width: 21.7391304348% !important;
        float: left !important;
        margin-right: 4.347826087% !important;
        clear: none !important;
    }
    .recently-viewed-section ul.products li.product:nth-child(4n) {
        margin-right: 0 !important;
    }
    .recently-viewed-section ul.products li.product:nth-child(4n+1) {
        clear: both !important;
    }
}

/* ヘッダーのカートアイコンを左側に配置 (PCのみ) */
@media screen and (min-width: 768px) {
    .site-header-cart .cart-contents {
        display: flex !important;
        align-items: center;
        justify-content: flex-end; /* 右端揃えを維持 */
    }
    .site-header-cart .cart-contents::after {
        content: "" !important;
        width: 20px !important;
        height: 20px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238f2e14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        order: -1; /* アイコンを先頭に */
        float: none !important;
        margin-right: 8px !important; /* テキストとの余白 */
    }
    
    /* PCのログイン（マイアカウント）アイコンの置き換え */
    .secondary-navigation ul.menu a::before {
        content: "" !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23192f60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        margin-right: 6px !important;
        vertical-align: middle;
    }
    
    /* PCの検索アイコンの置き換え */
    .site-search .widget_product_search form::before {
        content: "" !important;
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
}

/* 全画面共通：パンくずリストの「ホーム」アイコンの置き換え */
.storefront-breadcrumb .breadcrumb a:first-child::before,
.woocommerce-breadcrumb a:first-child::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-right: 6px !important;
    vertical-align: -2px !important;
    opacity: 0.7;
}

/* スマホ版のメニューとカートの表示調整 */
@media screen and (max-width: 767px) {
    /* ヘッダーの白帯部分の高さを確保 */
    .site-header .col-full {
        min-height: 50px;
        position: static !important; /* site-header を基準に絶対配置させるため */
    }
    
    /* メニューボタンを画面の完全な右端に固定 */
    .menu-toggle {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0.8em 1em !important;
        height: auto !important;
        width: auto !important;
        display: inline-block !important;
        z-index: 100;
    }
    
    /* カートをメニューボタンの左に固定 */
    .site-header-cart {
        position: absolute !important;
        right: 105px !important; /* メニューボタンの幅分 */
        bottom: 5px !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        z-index: 100;
    }
    
    /* カートの中身を横並びに */
    .site-header-cart .cart-contents {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        font-size: 0.95em;
        padding: 5px 0;
    }
    
    /* カートアイコンを強制表示 (SVG Shopping Bag) */
    .site-header-cart .cart-contents::after {
        content: "" !important;
        width: 22px !important;
        height: 22px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238f2e14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        order: -1;
        margin-right: 5px;
        display: inline-block;
    }
    
    /* ¥0 の部分の余白 */
    .site-header-cart .cart-contents .amount {
        margin-right: 5px;
        font-weight: 700;
        color: var(--ogayoshi-navy) !important;
    }
    
    /* 0個の商品 の部分 */
    .site-header-cart .cart-contents .count {
        font-weight: 400;
        opacity: 0.8;
    }
    
    /* フッターバー（スマホ下部固定メニュー）のアイコン差し替え */
    .storefront-handheld-footer-bar ul li > a::before {
        content: "" !important;
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    
    /* カートの数字（バッジ）の位置調整 */
    .storefront-handheld-footer-bar ul li.cart .count {
        position: absolute !important;
        top: 8px !important;
        right: 15% !important; /* 中央から少し右上に配置 */
        transform: none !important;
        width: 1.5em !important;
        height: 1.5em !important;
        line-height: 1.5em !important;
        font-size: 0.7em !important;
        border-radius: 50% !important;
    }
    
    /* フッターバー：マイアカウント */
    .storefront-handheld-footer-bar ul li.my-account > a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    }
    
    /* フッターバー：検索 */
    .storefront-handheld-footer-bar ul li.search > a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    }
    
    /* フッターバー：カート */
    .storefront-handheld-footer-bar ul li.cart > a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") !important;
    }
}
.wpcf7-form {
    background: #ffffff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 2em;
}

.ogayoshi-contact-row {
    margin-bottom: 1.5em;
}

.ogayoshi-contact-row label {
    display: block;
    font-weight: 700;
    color: var(--ogayoshi-navy);
    margin-bottom: 8px;
    font-size: 1.05em;
}

.ogayoshi-contact-row span.required {
    background-color: var(--ogayoshi-red);
    color: #ffffff;
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
}

.ogayoshi-contact-row input[type="text"],
.ogayoshi-contact-row input[type="email"],
.ogayoshi-contact-row textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fafafa;
    transition: all 0.3s ease;
    font-size: 1em;
}

.ogayoshi-contact-row input[type="text"]:focus,
.ogayoshi-contact-row input[type="email"]:focus,
.ogayoshi-contact-row textarea:focus {
    border-color: var(--ogayoshi-red);
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 46, 20, 0.1);
}

.ogayoshi-contact-row textarea {
    min-height: 150px;
}

.ogayoshi-contact-submit {
    text-align: center;
    margin-top: 2em;
}

.ogayoshi-contact-submit input[type="submit"] {
    padding: 15px 40px;
    font-size: 1.1em;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(143, 46, 20, 0.2);
}

/* サイト内のすべてのボタンの角を少し丸くする (Apple Payなどのボタンに合わせる) */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.added_to_cart,
.checkout-button,
.single_add_to_cart_button {
    border-radius: 4px !important;
}

/* ==========================================================================
   スマホ用 右下フローティングアクションボタン
   ========================================================================== */

/* 下部固定バー（標準機能）は非表示を徹底 */
.storefront-handheld-footer-bar {
    display: none !important;
}

/* 常に右下に固定表示されるコンテナ */
.og-floating-actions {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
    opacity: 0.85; /* 通常時も少し透過 */
    transition: opacity 0.3s ease;
}

/* スクロール時の透過率増加 */
.og-floating-actions.is-scrolling {
    opacity: 0.3;
}

/* 検索ボックスを開いている時やホバー時は完全に不透明に */
.og-floating-actions.search-active,
.og-floating-actions:hover,
.og-floating-actions:focus-within {
    opacity: 1 !important;
}

/* 各ボタンの共通スタイル */
.og-floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.og-floating-btn:hover, .og-floating-btn:focus {
    transform: scale(1.1);
    color: #ffffff !important;
}

/* 検索ボタン */
.og-btn-search {
    background-color: var(--ogayoshi-navy);
}
.og-btn-search:hover {
    background-color: #2a4687;
}

/* ホームボタン */
.og-btn-home {
    background-color: var(--ogayoshi-red);
}
.og-btn-home:hover {
    background-color: #bd3f20;
}

/* スライドアウト検索フォーム */
.og-floating-search-container {
    position: absolute;
    bottom: 100%; /* ボタン群のさらに上に表示 */
    margin-bottom: 20px; /* ボタンとの余白 */
    right: 0;
    width: calc(100vw - 40px); /* 画面幅から左右20pxずつ（計40px）引いて画面中央に配置 */
    max-width: 320px; /* タブレット等で大きくなりすぎないように */
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px) scale(0.95);
    transition: all 0.3s ease;
    transform-origin: right bottom;
    box-sizing: border-box !important;
}

.og-floating-search-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

.og-floating-search-form {
    display: flex;
    gap: 8px;
    margin: 0;
    width: 100%;
    box-sizing: border-box !important;
}

.og-floating-search-form .search-field {
    flex: 1;
    min-width: 0 !important; /* flex子要素のはみ出し防止 */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 2px solid var(--ogayoshi-navy) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 16px !important; /* スマホでのズーム防止 */
    background: #fff !important;
    color: #333 !important;
}

.og-floating-search-form .search-submit {
    background: var(--ogayoshi-navy) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 15px !important;
    font-weight: bold !important;
    white-space: nowrap;
}

/* PC等では非表示にする場合は以下を有効化 */
@media screen and (min-width: 768px) {
    .og-floating-actions {
        display: none !important;
    }
}

/* スマホメニューのサブメニューを最初から展開 */
@media screen and (max-width: 767px) {
    .site-header .main-navigation ul li.menu-item-has-children > ul.sub-menu,
    .site-header .handheld-navigation ul li.menu-item-has-children > ul.sub-menu,
    .main-navigation ul.menu ul.sub-menu,
    .main-navigation ul.nav-menu ul.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        position: relative !important;
        float: none !important;
        left: 0 !important;
        clear: both !important;
        padding-left: 15px !important;
    }

    /* 展開用のトグルボタン（矢印）は不要になるので隠す */
    .site-header .main-navigation button.dropdown-toggle,
    .site-header .handheld-navigation button.dropdown-toggle,
    button.dropdown-toggle {
        display: none !important;
    }
}

/* ==========================================================================
   PCヘッダーのカートアイコンをバッジ表示にする
   ========================================================================== */
.site-header-cart .cart-contents {
    position: relative;
    display: inline-block;
}

/* カートアイコン自体のサイズを大きくする */
.site-header-cart .cart-contents::after,
.site-header-cart .cart-contents::before {
    font-size: 26px !important; 
    transform: scale(1.3);
    transform-origin: bottom center;
    display: inline-block;
}
.site-header-cart .cart-contents svg {
    width: 26px !important;
    height: auto !important;
    transform: scale(1.3);
}

/* Storefrontのカート金額・アイテム数がテキストで出力される場合、不要なテキストを非表示にする対策 */
.site-header-cart .cart-contents .amount {
    display: none !important;
}

.site-header-cart .cart-contents .count {
    position: absolute;
    top: 18px; /* アイコンに近づけるために下げる */
    right: 15px; /* アイコンに近づけるために左へ寄せる */
    background-color: #d93622 !important; /* バッジの赤色（強制的に濃い赤） */
    color: #ffffff !important;
    font-size: 12px !important; /* 少し大きくして見やすく */
    font-weight: 800 !important; /* 太字 */
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    border-radius: 50% !important;
    z-index: 99 !important;
    opacity: 1 !important; /* 半透明を無効化 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

.site-header-cart .cart-contents .count.is-empty {
    display: none !important;
}