/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*縦書きID*/
.tategaki{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    }
    
    /*ハンバーガーメニュー枠線削除*/
    :focus, 
    :hover {
      outline:0;
      border:0;
    }
    
    /* カテゴリーのリスト全体のスタイリング */
    .elementor-widget-wc-categories .woocommerce ul.products {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px; /* カテゴリー間の間隔を調整 */
        margin: 0 !important; /* デフォルトマージンを削除 */
    }
    
    /* 各カテゴリー項目のスタイリング */
    .elementor-widget-wc-categories .woocommerce ul.products li.product-category {
        flex: 0 0 auto;
        margin: 0 !important; /* Elementorのデフォルトマージンを上書き */
        padding: 0 !important; /* パディングも削除 */
        width: auto !important; /* 幅を自動調整 */
    }
    
    /* カテゴリーテキストをボタン形式にする */
    .elementor-widget-wc-categories .woocommerce ul.products li.product .woocommerce-loop-category__title {
        display: inline-block;
        padding: 10px 15px;
        background-color: #f0f0f0;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: all 0.3s ease;
        margin: 0; /* マージンを削除 */
        white-space: nowrap; /* テキストを1行に保つ */
    }
    
    /* ホバー時のスタイル */
    .elementor-widget-wc-categories .woocommerce ul.products li.product .woocommerce-loop-category__title:hover {
        background-color: #e0e0e0;
        color: #000;
    }
    
    /* カテゴリーテキスト横の個数を非表示にする */
    .elementor-widget-wc-categories .woocommerce ul.products li.product .woocommerce-loop-category__title .count {
        display: none;
    }
    
     /*カートタイトルの非表示*/
    .woocommerce-cart .entry-title,
    .woocommerce-cart .woocommerce-products-header__title {
        display: none !important;
    }
    
    /* カートの合計タイトルを非表示にする */
    .woocommerce-cart .cart_totals h2 {
        display: none !important;
    }
    
     /*決済タイトルの非表示*/
    .woocommerce-cart .entry-title,
    .woocommerce-cart .woocommerce-products-header__title,
    .woocommerce-checkout .entry-title,
    .woocommerce-checkout .woocommerce-products-header__title {
        display: none !important;
    }
    
    /*スマホでの商品画像表示の修正*/
    @media only screen and (max-width: 767px) {
      .woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
      .woocommerce-page table.shop_table_responsive tr td.product-thumbnail::before {
        display: none;
      }
      .woocommerce table.shop_table_responsive tr td.product-thumbnail,
      .woocommerce-page table.shop_table_responsive tr td.product-thumbnail {
        display: block !important;
        text-align: left !important;
      }
      .woocommerce table.shop_table_responsive tr td.product-thumbnail img,
      .woocommerce-page table.shop_table_responsive tr td.product-thumbnail img {
        width: 80px;
        height: auto;
      }
    }
    
    /*PC版でのクーポンコードのエリア拡大*/
    @media only screen and (min-width: 768px) {
      .woocommerce-cart table.cart td.actions .coupon .input-text {
        width: 200px !important;
        max-width: 100% !important;
      }
    }
    
    /*クーポンコード・クーポンを適用のフィールドの高さと中央揃え*/
    .woocommerce-cart-form__contents .actions .coupon input,
    .woocommerce-cart-form__contents .actions .coupon button[name="apply_coupon"],
    .woocommerce-cart-form__contents .actions button[name="update_cart"] {
      height: 40px;
      padding: 0 15px;
      margin: 0 5px;
    }
    
    @media only screen and (max-width: 768px) {
      .woocommerce-cart-form__contents .actions {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    
      .woocommerce-cart-form__contents .actions .coupon {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 10px;
      }
    
      .woocommerce-cart-form__contents .actions button[name="update_cart"] {
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: fit-content;
      }
    }
    
    /*チェックアウトボタンの変更*/
    .woocommerce-cart .checkout-button.button.alt.wc-forward {
      background-color: #CC3366;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    
    .woocommerce-cart .checkout-button.button.alt.wc-forward:hover {
      background-color: #d96289;
      color: #ffffff;
    }
    
    /*数量のカスタマイズ*/
    /*カート内*/
    @media only screen and (min-width: 768px) {
      .woocommerce-cart-form__cart-item .quantity {
        position: relative;
        width: 70px;
      }
    
      .woocommerce-cart-form__cart-item .quantity input[type="number"] {
        width: 100%;
        text-align: center;
        padding-right: 20px;
      }
    
      .woocommerce-cart-form__cart-item .quantity input::-webkit-inner-spin-button {
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        height: 100%;
      }
    }
    
    /*シングルプロダクト内*/
    @media only screen and (min-width: 768px) {
      .woocommerce-cart-form__cart-item .quantity,
      .single-product div.product form.cart .quantity {
        position: relative;
        width: 70px;
      }
    
      .woocommerce-cart-form__cart-item .quantity input[type="number"],
      .single-product div.product form.cart .quantity input[type="number"] {
        width: 100%;
        text-align: center;
        padding-right: 20px;
      }
    
      .woocommerce-cart-form__cart-item .quantity input::-webkit-inner-spin-button,
      .single-product div.product form.cart .quantity input::-webkit-inner-spin-button {
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        height: 100%;
      }
    }
    
    /*ショップに戻るの変更*/
    a.button.wc-backward {
        display: block;
        width: 200px;
        margin: 20px auto;
        padding: 10px 15px;
        background-color: #CC3366;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }
    
    a.button.wc-backward:hover {
        background-color: #d96289;
        color: #ffffff;
        text-decoration: none;
    }
    
    
    /*シングルプロダクト内の購入するボタンのカスタマイズ*/
    .single-product div.product form.cart .button {
        width: 100%;
        background-color: #CC3366;
        color: #ffffff;
        text-align: center;
        padding: 15px;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }
    
    /*シングルプロダクト内のバリエーションのクリアを非表示化*/
    .single-product div.product form.cart .button:hover {
        background-color: #d96289;
    }
    
    .single-product div.product form.cart .reset_variations {
        display: none !important;
    }
    
    /*バリエーション内の整理*/
    .single-product div.product table.variations {
        width: 100%;
        background-color: #f5f5f5;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .single-product div.product table.variations tr {
        display: flex;
        align-items: center;
        padding: 8px 0;
    }
    
    .single-product div.product table.variations th,
    .single-product div.product table.variations td {
        padding: 0;
        vertical-align: middle;
        background: none;
    }
    
    .single-product div.product table.variations th {
        width: 30%;
        text-align: left;
        font-weight: 600;
        padding-right: 10px;
        font-size: 15px;
        padding-left: 20px;
    }
    
    .single-product div.product table.variations td {
        width: 70%;
        padding-right: 20px;
    }
    
    .single-product div.product table.variations select {
        width: 100%;
        height: 40px;
        padding: 5px 10px;
        background-color: #ffffff;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .single-product div.product table.variations select:focus {
        border-color: #999;
        outline: none;
    }
    
    .single-product div.product table.variations select option:first-child {
        color: #757575;
    }
    
    /*Woocommerceの通知のバランス調整*/
    .woocommerce-message .button {
        background-color: #CC3366 !important;
        color: #ffffff !important;
        border: none !important;
        padding: 10px 15px !important;
        margin: 5px !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
    
    .woocommerce-message .button:hover {
        opacity: 0.8;
    }
    
    @media only screen and (max-width: 768px) {
        .woocommerce-message {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1em;
            margin: 0 auto;
            width: 100%;
        }
    
        .woocommerce-message::before {
            position: static;
            margin-bottom: 10px;
        }
    
        .woocommerce-message .woocommerce-message__text {
            margin-bottom: 15px;
            padding-left: 0;
            width: 100%;
        }
    
        .woocommerce-message .button {
            margin: 10px auto !important;
            display: block;
            text-align: center;
            width: 80%;
        }
    
        .woocommerce-message > *:not(:last-child) {
            margin-bottom: 10px;
        }
    
        /* 選択商品の上にマージンを追加 */
        .woocommerce-cart-form {
            margin-top: 20px;
        }
    }
    
    @media only screen and (min-width: 769px) {
        .woocommerce-message {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1em 2em 1em 3.5em;
        }
    
        .woocommerce-message::before {
            top: 50%;
            transform: translateY(-50%);
        }
    
        .woocommerce-message .woocommerce-message__text {
            margin: 0;
            padding: 0;
            flex-grow: 1;
        }
    
        .woocommerce-message .button,
        .woocommerce-message .restore-item {
            order: 2;
            margin: -0.5em 0 -0.5em 1em !important;
        }
    
        .woocommerce-message .restore-item {
            margin-left: auto !important;
            background-color: #CC3366;
            color: #ffffff;
            padding: 0.618em 1em;
            font-weight: 700;
            border-radius: 3px;
            text-decoration: none;
        }
    
        .woocommerce-message .restore-item:hover {
            background-color: #d96289;
        }
    }
    
    /*フッターを常に最下層にする*/
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      margin: 0;
    }
    
    main {
      flex: 1 0 auto;
      padding-bottom: 150px;
    }
    
    .elementor-location-footer {
      margin-top: auto;
      width: 100%;
    }
    
    
    /*配達希望時間*/
    p.has-medium-font-size {
        margin-top:4rem !important;
        font-size: 1.25em;
        font-weight: 500;
    }
    
    .wc-block-checkout__delivery-time {
      position: relative;
      margin-bottom: 2rem !important;
    }
    
    @media only screen and (max-width: 600px) {
      .wc-block-checkout__delivery-time::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -2rem;
        width: 100vw;
        border-bottom: 1px solid #e9e6ed;
        transform: translateX(-50%);
      }
    }
    
    
    /*サンクスページのタイトル非表示*/
    .woocommerce-order-details__title {
        display:none;
    }
    .woocommerce-column__title {
        display:none;
    }
    
    .woocommerce-table__line-item.order_item .woocommerce-table__product-name .wc-item-meta,
    .woocommerce-table__line-item.order_item .woocommerce-table__product-total .includes_tax {
        display: none !important;
    }
    
    .order-actions--heading,
    .order-actions--heading + * {
        display: none !important;
    }
    
    .elementor-widget-woocommerce-purchase-summary .woocommerce .woocommerce-thankyou-order-details {
        display:none !important;
    }
    
    .woocommerce-silkypress-input-field-block {
        display: none !important;
    }