@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

.article {max-width: 800px; margin: auto;}

.article h2 {background-color: transparent; color:#000; padding:1em 0; margin: 0; font-size:18px;}


.woocommerce input[type=text] {border-radius:5px; }

.woocommerce fieldset {border:none; padding-left:10px !important; }


.woocommerce label {font-weight: bold;}
.woocommerce legend {font-weight: bold; margin-top:-10px; margin-left:10px; }


.shop_table .product-total,
.shop_table td span.woocommerce-Price-amount {display: block; text-align: right;width:100%; height: 100%;}

.woocommerce-message {display: none;}
/*
fieldset label {display: inline-block !important;}
*/

#order_comments {height: 150px;}

#order_review_heading {margin-top:20px;}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {background: #f9f9f9;}


.error_msg {font-weight: bold; color: red;}

/* WooCommerce Checkout Page */

/* チェックアウトページの全体コンテナ */
.woocommerce .col2-set {
    display: block;
}

/* 左右2カラムを1カラムに */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
}

/* フォーム全体のマージン調整 */
.woocommerce .woocommerce-billing-fields,
.woocommerce .woocommerce-shipping-fields,
.woocommerce .woocommerce-additional-fields {
    margin-bottom: 40px;
}

/* オーダーレビューと支払いフィールドを1カラムで整列 */
.woocommerce-checkout-review-order-table {
    width: 100%;
    margin-bottom: 30px;
}

.woocommerce-checkout-payment {
    width: 100%;
}

ul.woocommerce-error {font-weight: bold; color:red;}

/* WooCommerceエラーラベルの色を赤くする */
.woocommerce form .form-row.woocommerce-invalid label {
    color: red;
}


.narrow label {display: inline-block; width: 80%; margin: auto; border:1px solid #ccc; padding:10px 10px 10px 40px; border-radius: 4px; background: #f7f7f7;}

.narrow label:hover {background: #f1f1f1f1;}

.narrow label input {margin-left: -2em !important;}

.radio-field label { border:1px solid #ccc; padding: 10px 40px;  background: #f9f9f9; border-radius: 4px; display: inline-block !important;}

label:has(input[type="radio"]:checked) {background:#172ABF; color:#fff; }


#payment {margin-top:50px;}

@media only screen and (max-width: 768px) {
    .form-row-first, 
    .form-row-last {
        width: 100% !important;
        clear: both;
    }
}


.notice {color: #F4A300; margin-bottom:0 !important;}
.notice_box {border:1px solid #F4A300; padding:10px; background:#FFF4DF;border-radius: 4px; margin-bottom:1em;}

.final_notice {display: block; border:1px solid #ccc; border-radius: 5px; background: #f9f9f9; padding:1em 2em; width:80%; margin: auto; font-size:90%;}

/* 申し込みサービスの表示スタイル */

/* タイトルのスタイル */
.selected-products h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

/* ulのリストマーカーを非表示にする */
.selected-products ul {
    list-style-type: none;  /* リスト記号を非表示にする */
    padding-left: 0;
}

/* liのスタイル */
.selected-products ul li {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
}



#billing_user_passwd_field label {
    position: relative; /* ラベル全体を基準にする */
}

.password-toggle {
    position: absolute;
    right: 0; /* labelタグ内の右端に配置 */
    top: 50%;
    transform: translateY(-50%); /* 垂直方向に中央揃え */
    cursor: pointer;
    color: #333;
    font-size: 18px;
}


.order-again {display: none;} /* 再注文を非表示 */
.order-print {text-align: center;}
.order-print a {background: #17389A !important; color:#fff !important;}
.order-print a:hover {background:#4262C2 !important; color:aqua !important;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1024px以上*/
@media screen and (min-width: 1024px){
  /*必要ならばここにコードを書く*/

#header-container {padding: 15px 0;}

/*
#billing_email_field, #billing_email_conf_field,
#billing_user_passwd_field, #billing_user_passwd__conf_field {margin-top:10px;}

*/
}



/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}