/* ROI WooCommerce */

/* サイトのメインカラー（オレンジ）を一括管理するユーティリティクラス */
.orange {
    color: #FF7A2A;
}
body.single-product #main,
body.post-type-archive-product #main,
body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.woocommerce-account #main {
    display: block;
}

body.woocommerce-cart #blog_archive_page,
body.woocommerce-checkout #blog_archive_page,
body.woocommerce-account #blog_archive_page {
    display: none;
}

/* ボタンカラーをサイトのオレンジに統一 */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: #FF7A2A !important;
    color: #fff !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: #cc5e1e !important;
    color: #fff !important;
}

/* WordPressブロックボタンをオレンジに統一 */
.wp-element-button,
.wp-block-button__link {
    background-color: #FF7A2A !important;
    color: #fff !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
    background-color: #cc5e1e !important;
    color: #fff !important;
}

/* フォーカス時のボックスシャドウを非表示 */
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus {
    box-shadow: none !important;
}

/* WooCommerceブロックボタンのテキストカラーを白に */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text {
    color: #fff !important;
}

/* 商品一覧: タイトルを2行分の高さで統一（1行でも2行でも揃うように） */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 3.2em;
}

/* 768px以下: タイトルが3行になる場合を考慮して高さを拡大 */
@media screen and (max-width: 768px) {
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        min-height: 4.8em;
    }
    /* 商品画像: スマホでは幅を縮小・中央寄せ */
    .woocommerce #content div.product div.images {
        width: 80% !important;
        max-width: 450px;
        margin: 0 auto 5%;
    }
}

/* 商品一覧: 説明文を3行で固定（line-clampで切る、heightは指定しない） */
.loop-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
}

/* 商品一覧のカゴに追加ボタンのfont-weightを通常に */
.woocommerce ul.products li.product .button {
    font-weight: normal;
}


/* 商品ページ: 要素間のスペースを確保 */
.woocommerce div.product h1.product_title {
    margin-bottom: 16px;
}
.woocommerce div.product p.price {
    margin-bottom: 20px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    margin-bottom: 24px;
}
.woocommerce div.product form.cart {
    margin-bottom: 32px;
}

/* 商品ページのフロートクリアとレイアウト修正 */
body.single-product .woocommerce div.product {
    overflow: hidden;
}
body.single-product section.related {
    clear: both;
    float: none;
    width: 100%;
    padding: 150px 0 50px;
}
body.single-product section.related h2 {
    margin-bottom: 20px;
    text-align: center;
}

.roi_woocommerce_template,
body.woocommerce-cart #content,
body.woocommerce-checkout #content,
body.woocommerce-account #content {
    padding-top: 80px;
    padding-bottom: 50px;
}

/* ショップページ: ヘッダーテキストの字間・余白 */
.shop_list_page_header_text {
    margin: 1em auto 0;
}
.shop_list_page_header_text p {
    letter-spacing: 0.15em;
    line-height: 1.8;
    margin: 0 0 10px;
}

@media ( max-width: 768px) {
    .shop_list_page_header_text {
        width: 90%;
    }
}

/* ショップページ: カテゴリー名の上下余白 */
.shop_category_title {
    margin: 64px 0 28px;
}
.shop_category_title:first-child,
.shop_category_section:first-child .shop_category_title {
    margin-top: 40px; /* 最初のカテゴリーはheader_textとの間隔を控えめに */
}
.shop_child_category_title {
    margin: 0 0 20px;
}

/* ショップページ: ID指定で特定カテゴリーのタイトル色を変更 */
#shop_category_section-27 h2.shop_category_title {
    color: #FF7A2A;
}

/* ショップページ: 1つめの親カテゴリーに背景色を設定 */
/* :first-child は直前に shop_list_page_header_text があるため一致しない。隣接兄弟セレクターで指定する */
.shop_list_page_header_text + .shop_category_section {
    background-color: #FFF0DC;
    padding: 1px 24px 32px;
    margin-top: 80px;
    margin-bottom: 80px;
}
.shop_list_page_header_text + .shop_category_section .shop_category_title {
    color: #FF7A2A;
}

/* ショップページ: floatをflexboxに切り替えてセクション間の干渉を排除 */
.shop_category_section ul.products,
.shop_child_category_section ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
}
.shop_category_section ul.products li.product,
.shop_child_category_section ul.products li.product {
    float: none !important;
}
/* WooCommerceのclearfix（::before/::after）がflexアイテムになるのを防ぐ */
.shop_category_section ul.products::before,
.shop_category_section ul.products::after,
.shop_child_category_section ul.products::before,
.shop_child_category_section ul.products::after {
    display: none !important;
}

/* 768px以下: 2列の商品間に列方向の隙間を追加 */
@media screen and (max-width: 768px) {
    .shop_category_section ul.products,
    .shop_child_category_section ul.products {
        column-gap: 4%;
    }
}

#shop_list_page_header_box {
    width: 95%;
    max-width: 800px;
    margin: 0 auto 5em;
}


/* pc_rb.css の header { position: fixed } がWooCommerceの<header>要素に適用されるのをリセットする */
.woocommerce-MyAccount-content header {
    position: static;
    width: auto;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    animation: none;
    background-color: transparent;
    padding: 0;
}

.product p {
    margin-bottom: 10px;
    line-height: 1.4em;
}

/* 商品説明セクションのスタイル */
#tab-description {
    background-color: #ffefdb;
    padding: 50px 80px;
}
#tab-description p {
    
}
#tab-description div {
    margin: 20px auto 30px;
}
#tab-description h3 {
    margin-bottom: 10px;
}
#tab-description ul {
    padding-left: 40px;
    list-style: none;
}
#tab-description ul li {
}
#tab-description div p {
    margin-left: 40px;
}

/* 商品ページ: タブUIをフラットなセクション表示に変更 */
/* レビュータブはPHP側（woocommerce_product_tabs）で削除済み */
.woocommerce-tabs ul.tabs {
    display: none; /* タブナビゲーションを非表示 */
}
.woocommerce-tabs .panel {
    display: block !important; /* 全パネルを通常のブロックとして表示 */
}
.woocommerce-tabs #tab-description h2 {
    display: none; /* 説明パネルの「説明」見出しを非表示 */
}

/* 商品ページのカテゴリー表示を非表示にする */
.product_meta .posted_in {
    display: none;
}

p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    margin-bottom: 30px;
}

@media screen and (max-width: 600px) {
    #main {
        margin-top: 100px;
    }
    .roi_woocommerce_template {
        padding-top: 0;
    }
    .shop_list_page_header_text + .shop_category_section {
        padding: 1px 12px 32px;
        margin-top: 32px;
        margin-bottom: 40px;
    }

.product h1 {
    font-size: 1.3em;
}
.product .summary.entry-summary {
    width: 80% !important;
    margin: 10px auto !important;
}
.product .price {
    font-size: 1.4em !important;
}
.woocommerce div.product form.cart .button {
    float: none !important;
    margin: 10px auto !important;
    display: block !important;
}
    #tab-description {
        
        padding: 30px;
    }
    #tab-description p {
        
    }
    #tab-description div {
        
    }
    #tab-description h3 {
        
    }
    #tab-description ul {
        padding-left: 20px;
    }
    #tab-description ul li {
    }
    #tab-description div p {
        margin-left: 20px;
    }

}

@media screen and (max-width: 480px) {
    .roi_woocommerce_template,
    body.woocommerce-cart #content,
    body.woocommerce-checkout #content,
    body.woocommerce-account #content {
        padding-top: 0;
        padding-bottom: 30px;
    }
    body.single-product section.related {
        padding: 60px 0 30px;
    }
}

/* shopページ・カテゴリーページのカートに追加ボタンを非表示 */
/* PHPフックが効かないブロック対応のためCSSでも制御する */
.woocommerce-shop ul.products .button,
.woocommerce-shop ul.products .add_to_cart_button,
.tax-product_cat ul.products .button,
.tax-product_cat ul.products .add_to_cart_button,
.woocommerce-shop .wc-block-grid__product-add-to-cart,
.tax-product_cat .wc-block-grid__product-add-to-cart,
.woocommerce-shop .wp-block-woocommerce-product-button,
.tax-product_cat .wp-block-woocommerce-product-button,
.related.products ul.products .button,
.related.products ul.products .add_to_cart_button,
.related.products .wc-block-grid__product-add-to-cart,
.related.products .wp-block-woocommerce-product-button,
.cross-sells ul.products .button,
.cross-sells ul.products .add_to_cart_button,
.cross-sells .wc-block-grid__product-add-to-cart,
.cross-sells .wp-block-woocommerce-product-button,
.wp-block-woocommerce-product-new .wc-block-grid__product-add-to-cart,
.wp-block-woocommerce-product-new .wp-block-woocommerce-product-button,
.wc-block-product-new .wc-block-grid__product-add-to-cart,
.wc-block-product-new .wp-block-woocommerce-product-button {
    display: none !important;
}

/* ナビゲーション: カート・マイアカウントのアイコン表示 */
/* CSSクラス nav-icon-cart / nav-icon-myaccount をメニュー項目に付与して使用 */
.nav-icon-cart > a,
.nav-icon-myaccount > a {
    font-size: 0 !important; /* テキストを非表示（::before のアイコンは font-size: 24px で上書き） */
}
.nav-icon-cart > a::before,
.nav-icon-myaccount > a::before {
    font-family: 'Material Icons';
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
/* カートアイコン: shopping_cart */
.nav-icon-cart > a::before {
    content: '\e8cc';
}
/* マイアカウントアイコン: person */
.nav-icon-myaccount > a::before {
    content: '\e7fd';
}

/* 関連商品: 商品タイトルを左揃えに（商品一覧と統一） */
.related.products h2.woocommerce-loop-product__title {
    text-align: left;
}

/* 空のカート: 「商品一覧を見る」ボタンの上に余白を追加 */
.wp-block-woocommerce-empty-cart-block .wp-block-buttons {
    margin-top: 50px;
}