/* woocommerce-custom.css */

/* -------------------- */
/* ログイン */
/* -------------------- */

/* ▼ WooCommerceマイアカウント：ログインページカスタム ▼ */
.login-register-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
    margin: 0 auto;
}

.login-col,
.register-col {
    flex: 1;
    min-width: 320px;
}


.login-col h2,
.register-col h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #333;
    border-left: none;
    background-color: transparent;
    padding: 0;
    margin: 0 0 20px;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    border: 1px solid #A0A0A0;
    padding: 25px 20px;
    margin: 0;
}

/* ▼ ラベルと必須マーク */
.woocommerce .woocommerce-form label,
.woocommerce .woocommerce-ResetPassword label,
.woocommerce .woocommerce-ResetPassword p {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 400;
    font-size: 16px;
    color: #333;
}

.woocommerce .woocommerce-form input,
.woocommerce .woocommerce-ResetPassword input,
.woocommerce .woocommerce-ResetPassword p input {
    min-height: 44px;
    font-size: 16px;
}

.woocommerce .woocommerce-form label .required,
.woocommerce .woocommerce-ResetPassword label .required {
    background-color: #FB010D;
    color: #fff;
    padding: 0.2em 0.6em;
    font-weight: 400;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 0.4em;
}

/* ▼ フォーム入力 */
.woocommerce-form input.input-text {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* ▼ ログインボタンとチェックボックスを横並び */
.login-col .login-action-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

/* ▼ チェックボックス */
.woocommerce .woocommerce-form .woocommerce-form__label-for-checkbox {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
}

.woocommerce .woocommerce-form .woocommerce-form__label-for-checkbox input {
    width: 16px;
    height: 16px;
}

/* ▼ ボタン */
.woocommerce .woocommerce-form .woocommerce-button.button,
.woocommerce .woocommerce-form .woocommerce-Button.button,
.woocommerce .woocommerce-ResetPassword .woocommerce-Button.button {
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.75rem 2rem;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 144px;
    margin-right: 0;
}

.woocommerce .woocommerce-form .woocommerce-button.button {
    background-color: #FB010D;
}

.woocommerce .woocommerce-form .woocommerce-button.button:hover {
    background-color: #e53935;
}

.woocommerce .woocommerce-form .woocommerce-Button.button {
    background-color: #788A9B;
}

.woocommerce .woocommerce-form .woocommerce-Button.button:hover {
    background-color: #6d7d8c;
}

.woocommerce .woocommerce-ResetPassword .woocommerce-Button.button {
    background-color: #333333;
    margin-top: 10px;
}

.woocommerce .woocommerce-ResetPassword .woocommerce-Button.button:hover {
    background-color: #262626;
}

.login-col .login-action-row .form-row {
    margin: 0;
}

/* ▼ パスワード紛失リンク */
.woocommerce .woocommerce-form .woocommerce-LostPassword {
    margin-top: 1.5rem;
    font-size: 16px;
    color: #333;
    margin-bottom: 0px;
}

.woocommerce .woocommerce-form .woocommerce-LostPassword a {
    color: #333;
}

/* ▼ 補足テキスト */
.register-col p.form-row {
    font-size: 16px;
    color: #333;
}

.woocommerce-privacy-policy-text {
    display: none;
}

body.page-template-page-register-php .login-register-wrapper{
  display:flex;
  align-items:flex-start;
  gap:2rem;
}

body.page-template-page-register-php .login-register-wrapper .register-col{ order:1; flex:1 1 0; }
body.page-template-page-register-php .login-register-wrapper .login-col{    order:2; flex:1 1 0; }

/* ----------------------------- */
/* ▼ WooCommerce マイページ メニュー */
/* ----------------------------- */

/* PC 共通 */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color: #f6f6f6;
    padding: 20px;
    min-width: 220px;
    border-radius: 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin-bottom: 15px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    background-color: #f0f0f0;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    background-color: #3a4b5c;
    color: #fff;
    font-weight: bold;
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    border-top-color: #3a4b5c;
    background-color: #f8f8f8;
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before {
    color: #3a4b5c;
}

/* ▼ 「診断を開始する」ボタンカスタム */
.woocommerce-account .woocommerce-message .start-diagnosis-btn {
    background-color: #333;
    color: #fff;
    padding: 0.8rem 1.5rem;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}

.woocommerce-account .woocommerce-message .start-diagnosis-btn:hover {
    background-color: #000;
    color: #fff;
}

/* ▼ 購入履歴テーブル：全体背景 */
.woocommerce-account .woocommerce-orders-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 2px solid #405467;
    background-color: #fff;
}

/* ▼ テーブルヘッダー */
.woocommerce-account .woocommerce-orders-table thead {
    background-color: #405467;
}

.woocommerce-account .woocommerce-orders-table th {
    color: #fff;
    font-weight: bold;
    padding: 12px;
    border: none;
}

/* ▼ テーブルボディ */
.woocommerce-account .woocommerce .woocommerce-orders-table tbody th {
    color: #333;
    background-color: #fff;
    border-top: 1px solid #405467;
    border-bottom: 1px solid #405467;
    border-left: 1px solid #405467;
    padding: 12px;
    vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tbody td {
    color: #333;
    background-color: #fff;
    border-top: 1px solid #405467;
    border-bottom: 1px solid #405467;
    padding: 12px;
    vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    text-align: center;
    border-right: 1px solid #405467;
}

/* ▼ アクションボタン */
.woocommerce-account .woocommerce-orders-table .button,
.woocommerce-account .woocommerce-MyAccount-content .button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.woocommerce-account .woocommerce-orders-table .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
    background-color: #000;
    color: #fff;
}

.woocommerce-account .woocommerce-order-details .order-again {
    display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content .some-specific-class p {
    display: none !important;
}

/* =======================================
   WooCommerce マイアカウント - 住所表示
   ======================================= */
.my-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.address-box {
    position: relative;
}

.address-box-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}

.static-page .woocommerce .address-title,
.static-page .woocommerce form h2 {
    font-size: 26px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    background-color: transparent;
    border-left: none;
    padding: 0;
}

.edit-link {
    font-size: 16px;
    color: #333;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.edit-link:hover {
    opacity: 0.7;
}

.address-content {
    background-color: #f3f3f3;
    font-size: 16px;
    line-height: 1.8;
    padding: 20px;
}

/* ========================================
   WooCommerce 住所登録フォーム UI 調整
   ======================================== */

/* ---------- フォーム全体レイアウト ---------- */

/* 2カラム対応 */
.woocommerce form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper {
    padding: 20px 0px;
}

.woocommerce form .woocommerce-address-fields .form-row-first,
.woocommerce form .woocommerce-address-fields .form-row-last {
    width: calc(50% - 8px);
}

.form-row-wide {
    width: 100%;
}

/* ---------- ラベル調整 ---------- */
.woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* ---------- 入力フィールド & セレクト ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
    width: 100%;
    height: 45px;
    padding: 0 12px;
    font-size: 16px;
    border: 1px solid #333;
    border-radius: 6px;
    background-color: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.woocommerce-edit-address .woocommerce form .required,
.woocommerce-edit-account .woocommerce form .required {
    display: none !important;
}

.woocommerce-address-fields__field-wrapper label::after,
.woocommerce-EditAccountForm label::after {
    content: ' 必須';
    background-color: #FB010D;
    color: #fff;
    padding: 0.2em 0.6em 0.2em 0.3em;
    font-weight: 400;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 0.4em;
}

/* ---------- 「住所を保存」ボタン ---------- */
.woocommerce form .button {
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.woocommerce form .button:hover {
    background-color: #000;
    color: #fff;
}

/* ========================================
   WooCommerce クレジットカード情報登録 UI 調整
   ======================================== */
/* 支払い方法ラジオボタン（Stripe）を非表示 */
#payment_method_stripe {
    display: none;
}

/* ラベルを左右分割のflexに */
.woocommerce-add-payment-method label[for="payment_method_stripe"] {
    display: flex;
    justify-content: space-between;
    /* ← これで左右に分ける */
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
}

/* カード画像 */
.woocommerce-add-payment-method .stripe-cards-icon {
    height: 24px;
    width: auto;
    display: block;
    margin-left: auto;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
    border: none;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
    background-color: transparent;
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
    background-color: transparent;
    padding: 0px;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
    display: none !important;
}

.woocommerce-PaymentBox #wc-stripe-upe-form {
    border: none;
}

.woocommerce-PaymentBox .testmode-info {
    font-size: 16px;
}

/* Stripe Elements 共通枠調整 */
.woocommerce-add-payment-method .wc-stripe-elements-field,
.woocommerce-add-payment-method .StripeElement {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px;
    background-color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
}

/* StripeElements内でのエラー表示の調整 */
.woocommerce-add-payment-method .woocommerce-error {
    margin-top: 8px;
    font-size: 14px;
    color: #b81c23;
}


/* ラベル調整 */
.woocommerce-add-payment-method .wc-stripe-elements-field label.p-FieldLabel {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

/* 「支払い方法を追加」ボタン */

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    float: left;
}

.woocommerce-MyAccount-content .button.alt {
    background-color: #333 !important;
    color: #fff !important;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* ホバー時の効果 */
.woocommerce-MyAccount-content .button.alt.alt:hover {
    background-color: #000 !important;
    color: #fff !important;
}

.woocommerce table.woocommerce-MyAccount-paymentMethods.shop_table {
    border: 1px solid #405467;
    border-radius: 0px;
    border-collapse: collapse;
}

.woocommerce table.woocommerce-MyAccount-paymentMethods.shop_table th.woocommerce-PaymentMethod {
    background-color: #405467;
    border: 1px solid #405467;
    color: #fff;
    /* テキストも見やすく白に */
    padding: 12px 16px;
    font-weight: 500;
    text-align: left;
}

.woocommerce-EditAccountForm.edit-account fieldset {
    border: none;
}

#account_display_name_description em {
    font-size: 16px;
    font-style: normal;
}

@media screen and (max-width: 768px) {

    /* ▼ 横並び → 縦並びに変更 */
    .login-register-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .login-col,
    .register-col {
        min-width: 100%;
    }

    .woocommerce form.checkout_coupon,
    .woocommerce form.login,
    .woocommerce form.register {
        padding: 20px;
    }

    /* ▼ 見出しの余白調整 */
    .login-col h2,
    .register-col h2 {
        font-size: 20px;
    }

    /* ▼ ログインアクション（ボタン＋チェックボックス）縦並びに */
    .login-col .login-action-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-top: 0;
    }

    /* ▼ チェックボックスを上に持ってくる */
    .login-col .login-action-row .form-row:nth-child(2) {
        order: -1;
    }

    .login-col .login-action-row .form-row:nth-child(1) {
        order: 0;
    }

    .login-col .login-action-row .form-row {
        width: 100%;
    }

    .woocommerce .woocommerce-form .woocommerce-form__label-for-checkbox {
        font-size: 14px;
    }

    /* ▼ ボタンの幅を100%に（SPでは押しやすく） */
    .woocommerce .woocommerce-form .woocommerce-button.button,
    .woocommerce .woocommerce-form .woocommerce-Button.button {
        padding: 0.75rem;
    }

    /* ▼ 入力欄のフォントサイズ少し調整（好みに応じて） */
    .woocommerce-form input.input-text {
        font-size: 15px;
    }

    /* ▼ パスワード紛失リンクのフォントサイズ */
    .woocommerce .woocommerce-form .woocommerce-LostPassword {
        font-size: 14px;
        margin-top: 1.0rem;
    }

    .register-col p.form-row {
        font-size: 14px;
    }

    /* ----------------------------- */
    /* ▼ SPレイアウト：2行3列のグリッド */
    /* ----------------------------- */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        padding: 0;
        background-color: transparent;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border-radius: 0;
        overflow: hidden;
        margin-bottom: 2rem;
        text-align: center;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation li {
        display: flex;
        align-items: center;
        /* ← 縦中央揃え */
        justify-content: center;
        /* ← 横中央揃え */
        margin: 0;
        background-color: #fff;
        border: none;
        min-height: 64px;
        text-align: center;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation a {
        display: flex;
        /* ← 親a要素もflexに */
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0.5rem 0.8rem;
        font-size: 16px;
        font-weight: bold;
        color: #3a4b5c;
        background-color: #fff;
        border: 1px solid #3a4b5c;
        border-radius: 0;
        box-sizing: border-box;
        text-align: center;
        line-height: 1.4;
        word-break: break-word;
        /* 長い場合の折返しも対応 */
    }

    .woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
        background-color: #3a4b5c;
        color: #fff;
    }

    .woocommerce-account .woocommerce-orders-table tbody td {
        border: 1px solid #405467;
    }

    .my-address-grid {
        grid-template-columns: 1fr;
    }

    .address-box-header {
        align-items: flex-start;
        gap: 8px;
    }

    .woocommerce form .woocommerce-address-fields .form-row-first,
    .woocommerce form .woocommerce-address-fields .form-row-last {
        width: 100%;
    }

    #add_payment_method #payment ul.payment_methods,
    .woocommerce-cart #payment ul.payment_methods,
    .woocommerce-checkout #payment ul.payment_methods {
        padding: 0px;
    }

    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last,
    .woocommerce-page form .form-row-first,
    .woocommerce-page form .form-row-last {
        width: 100%;
    }
}