@charset "utf-8";

/*
cart/index
shopping/complate
shopping/index
shopping/login
shopping/nomember
shopping/error
*/


/* flowline */

.flowline {
    position: relative;
    margin: 0;
    padding: 8px 0 16px;
    border-bottom: 1px dotted #ccc;
}
.flowline ul {
    position: relative;
    margin: 0 auto;
}
.flowline ul::before {
    content: "";
    height: 4px;
    background: #525263;
    position: absolute;
    top: 13px;
    margin: 0;
    border-radius: 2px;
    z-index:0;
}
.flowline.step3 ul::before {
    width: 66.66666666%;
    left: 16.6666666%;
}
.flowline.step4 ul::before {
    width: 75%;
    left: 12.5%;
}
.flowline ul li {
    float: left;
    position: relative;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    font-size: 1.5rem;
    font-weight: bold;
    z-index:1;
}
.flowline.step3 ul li {
    width: 33.33333333333333%;
}
.flowline.step4 ul li {
    width: 25%;
}
.flowline li .flow_number {
    line-height: 40px;
    width: 40px; height: 40px;
    margin-bottom: 5px;
    font-size: 12px;
    font-size: 2rem;
    background: #525263;
    color: #fff;
    top: 0; left: 18px;
    display: inline-block;
    margin-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
}
.flowline li.active {
    color: #5CB1B1;
}
.flowline li.active .flow_number {
    background: #5CB1B1;
}
#cart_item__info{
    margin:30px auto;
}

/* table */
table.cart{
    width:100%;
    font-size:16px;
}
table.cart th{
    background-color: #dfded3;
    padding:10px;
}
table.cart .delete{
    font-size:16px;
    border:solid 1px #aaa;
    color:#aaa;
    padding:0 3px;
}
table.cart .delete:hover{
    text-decoration: none;
    background-color: #efefef;
}
table.cart a button{
    color:#93938c;
}
table.cart a i{
    font-size:3rem;
    color:#93938c;
}
table.cart .circle{
    font-size:18px;
    padding:0;
    margin:0;
    border:solid 1px #ccc;
    border-radius: 50%;
    width:30px; height:30px;
    /* line-height: 30px; */
    text-align: center;
    display: inline-block;
    color:#93938c;
}
table.cart .circle:not(span):hover{
    background-color:#efefef;
    text-decoration: none;
}
table.cart .item_img{
    width:100px;
    float:left;
}
table.cart .item_img img{
    width:80px;
}
table.cart .item_txt{
    margin:20px 0;
}
table.cart td{
    padding:10px;
    border-bottom:dotted 1px #666;
}
.btn_group{
    margin:30px 0 60px;
    width:30%;
    float:right;
}
#page_sln_card_payment #detail_wrap{
    margin-bottom: 50px;
}
#page_sln_card_payment #top_box__button_menu{
    display: flex;
    gap:20px;
    justify-content: center;
}
#page_sln_card_payment #top_box__button_menu p{
    width: 40%;
}
#page_sln_card_payment #top_box__button_menu.btn_group{
    margin:0 auto;
    width:70%;
}
.errormsg{
    margin:30px auto;
    font-size:18px;
}
.num{
    display: block;
    background-color:#888;
    color:#fff;
    position: absolute;
    top:0; bottom:0; left:0;
    width:50px;
    padding:10px 20px;
}
.payment_list li{
    display: inline-table;
    padding-right:10px;
}
/* ご注文内容の確認～ */
#shopping_confirm{
    margin-top:30px;
    margin-bottom:60px;
}
#confirm_main{
    margin-top:-20px;
}
#confirm_main h3.heading02{
    background-color: #efefef;
    padding-left:60px;
    font-size:120%;
    position: relative;
}
#shopping_message{
    width:100%;
}
#summary_box{
    background-color: #efefef;
    padding:10px;
}
#summary_box dt{
    float:left;
}
#summary_box dd{
    text-align: right;
}
#summary_box .total_price{
    text-align: right;
    font-size:130%;
}
#summary_box .total_price .text-primary{
    color:#f00;
}
/* ログイン */
#login_box{
    margin-bottom:80px;
    /*overflow:hidden;*/
}
#customer_box__body,
#guest_box{
    margin:10px auto;
    background-color: #f7f7f2;
    padding:60px;
    box-sizing: border-box;
}
.form-group{
    margin-bottom:20px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"]{
    width:100%;
}
.form-control {
    border: 1px solid #C4CCCE;
    border-radius:3px !important;
    box-shadow:none;
    font-size: 16px;
    font-size: 1.6rem;
    height: 40px;
    padding: 6px 12px;
    width: auto;
    line-height: 1.5
}
.form-control:focus {
    border-color:#3c8dbc !important;
    box-shadow:none
}
span.required{
    background-color:#c40026;
    color:#fff;
    padding:0 2px;
    font-size:80%;
    margin-left:10px;
    border-radius: 2px;
}

/* dl-table */

.dl_table {
    display: table;
    width: 80%;
    margin:0 auto;
}
.dl_table dl {
    display: table-row;
    border: 0 none;
}
.dl_table dt,
.dl_table dd {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 16px 0;
}
.dl_table dt {
    width: 30%;
}

.dl_table dd {
    padding: 16px;
}
.dl_table dd .form-group {
    padding-top: 16px;
}
.dl_table .zip-search {
    margin-top: 16px;
}
.dl_table .control-label{
    font-weight: bold;
}
.dl_table span.required{
    background-color:#c40026;
    color:#fff;
    padding:0 2px;
    font-size:80%;
    margin-left:10px;
    border-radius: 2px;
}
/*  form
============================ */

label {
    font-weight: normal;
}
input:focus,
select:focus {
    outline: none;
}
input[type="number"] {
    text-align: right;
}
.form-group .errormsg {
    margin-top: 3px;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
}
dd.form-group .errormsg {
    margin-bottom: 0;
}

.form-control {
    border: 1px solid #C4CCCE;
    border-radius:3px !important;
    box-shadow:none;
    font-size: 16px;
    font-size: 1.6rem;
    height: 40px;
    padding: 6px 12px;
    width: auto;
    line-height: 1.5
}
.form-control:focus {
    border-color:#3c8dbc !important;
    box-shadow:none
}
.has-success .form-control:focus,
.has-warning .form-control:focus,
.has-error .form-control:focus {
    box-shadow:none;
    background: none;
}
.has-success .form-control { border-color: #0D8969; background: #e7f6f3; }
.has-warning .form-control { border-color: #E99133; background: #fdf7ed; }
.has-error .form-control { border-color: #CF3F34; background: #FDF1F0; }

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline {
    color: inherit;  background: #FDF1F0;
}

.form-control::-moz-placeholder {
    color:#bbb;
    opacity:1
}
.form-control:-ms-input-placeholder {
    color:#bbb
}
.form-control::-webkit-input-placeholder {
    color:#bbb
}
.form-control:not(select) {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none
}

.form-group .form-control {
    width: 100%;
}
.form-inline .form-control {
    width: auto;
}

.form-group.lange input[type="text"], .form-group.lange label {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: middle;
}
.form-group.lange input[type="text"] {
    width: 28%;
}
.input_tel input {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 1px;
    margin-right: 1px;
    max-width: 5em;
    vertical-align: middle;
    width: 30%;
}
.form-group.input_tel input:first-child {
    margin-left: 0;
}
.form-group.input_name input {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 2%;
    vertical-align: middle;
    width: 48%;
}
.form-group.input_name input:first-child {
    margin-left: 0;
}
.form-group.input_zip input {
    display: inline-block;
    margin-left: 1%;
    margin-right: 1%;
    max-width: 5em;
    vertical-align: middle;
    width: 30%;
}
.form-group.input_zip .question-circle {
    display: none;
}
.form-group.input_zip .question-circle .cb-question {
    fill: #fff;
}


.form-group .item_price input, .form-group .item_quantity input {
    margin: 0 1%;
    text-align: right;
    width: 50%;
}

.form-inline label {
    margin: 0 10px 0 0;
}
.form-inline label:first-child + select,
.form-inline label:first-child + input {
    margin-right: 10px;
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top;
}
.checkbox-inline, .radio-inline {
    cursor: pointer;
    margin-left: 20px;
}
.checkbox-inline:first-child, .radio-inlteine:first-child {
    margin-left: 0;
}

span.required {
    color: #DE5D50;
    font-weight: normal !important;
    margin-left: 1em;
    font-size: 12px;
    font-size: 1.2rem;
}

#entry_birth select {
    margin: 0 8px;
}
#entry_birth select:first-child {
    margin-left: 0;
}
#entry_sex .radio {
    display: inline-block;
    margin-right: 10px;
}
#entry_sex .radio input[type="radio"] {
    margin-right: 10px;
}

#cart_item_list__quantity_edit{
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
#cart_item_list__quantity_edit li{
    width:40%;
    padding-top:10px;
    text-align: center;
    font-size:2rem;
}

/*
　スタイル再定義:Nakamori */

#shopping_confirm{
    overflow: hidden;
    position:relative;
    margin:0 auto 60px;
}
#shopping_confirm .message-box{
    border:solid 1px #f00;
    padding:20px;
    font-size:18px;
    font-weight: bold;
    text-align: center;
    margin-bottom:30px;
}
#confirm_main{
    width:700px;
    padding-right:40px;
    box-sizing: border-box;
    float:left;
    font-size:16px;
}
#confirm_side{
    /* position: relative; */
    width:320px;
    float:right;
    background-color:#eeeeef;
    padding:0;
    box-sizing: border-box;
}
.is-fixed {
  position: fixed;
  top: 0;
  right: auto;
  left:auto;
  margin:0 0 0 700px;
  z-index: 2;
  width: 100%;
}
#confirm_main > div,
#confirm_main > h3{
    width:640px;
}
#confirm_main #cart_box{
    margin-bottom:20px;
}
#cart_box{
    padding-bottom: 50px;
}
#cart_box .cart-item{
    display: flex;
    border-bottom:solid 1px #efefe2;
    padding-bottom:8px;
}
#cart_box .cart-img{
    width:80px;
}
#cart_box .cart-img img{
    width:60px;
    height:auto;
}
#cart_box .cart-txt{
   width:410px;
}
#cart_box .cart-name{
    font-size:18px;
    font-weight:bold;
    margin:6px 0 10px;
}
#cart_box .cart-total{
    width:150px;
    font-size:16px;
    text-align: right;
    align-self: flex-end;
}
#cart_box .cart-foot{
    padding-top:10px;
    /* text-align: right; */
}
#cart_box #cart_box__body .errormsg{
    color: #fff;
    margin-bottom: 30px;
}
#confirm_main .heading02{
    margin:0 0 20px;
    padding:10px;
}
#confirm_main .address-box{
    margin-bottom:50px;
}
#confirm_main .shipping-box{
    display: flex;
    flex-wrap: wrap;
    margin-bottom:50px;
}
#confirm_main .shipping-address{
    /* width:500px; */
    font-size:16px;
    margin-bottom:20px;
}
#confirm_main .shipping-change{
    width:140px;
    /* text-align: right; */
    align-self: flex-end;
}
#confirm_main .shipping-address span{
    font-weight: bold;
}
#confirm_main .shipping-delivery{
    width:100%;
    margin-bottom:20px;
}
.shipping-time{
    margin-left: 10px;
}
#confirm_main .payment-box{
    margin-bottom:50px;
}
#confirm_main #shopping_message{
    height:200px;
}
/* #confirm_side h3{
    position: relative;
} */
#confirm_side .heading02{
    /* border:solid 1px red; */
    position: relative;
    /* top:-17px; */
    /* left:0; */
    /* padding-bottom:60px; */
    display: flex;
    align-items: center;
    margin-bottom:30px;
}
#confirm_side .heading02 span{
    display: block;
}
#confirm_side .num{
    /* display: inline-block; */
    width:40px; height:40px;
    padding:10px 14px;
    /* margin:-40px 10px 20px -20px; */
}
#confirm_side span:last-child{
    padding:8px 0 0 60px;
}
#confirm_side #summary_box{
    font-size:16px;
    width:100%;
}
#confirm_side #summary_box th{
    text-align: left;
    font-weight: normal;
    padding:5px;
}
#confirm_side #summary_box td{
    text-align: right;
    padding:5px;
}
#confirm_side #summary_box .total{
    font-weight: bold;
    font-size:18px;
    color:#fa001b;
}
/* セキュリティコード入力欄を狭く */
#security_code{
    width:80px;
} 

/* 贈り物ですか？ */
.note_box{
    display: flex;
    border:solid 3px #dfded3;
    margin:20px 0 0;
    align-items: center;
}
.note_box div:first-child{
    width:30%;
    background-color: #dfded3;
    font-weight:bold;
    font-size:18px;
    display: flex;
    align-items: center;
    padding: 20px;
}
.note_box div:first-child p{
    width:100%;
    display: block;
    text-align: center;
    margin:0;
    padding:0;
}
.note_box div:last-child p{
    margin-left:20px;
}
/* responsive */
@media screen and ( max-width:640px )
{
    svg.cb{display: none;}
    .errormsg{
        margin: 10px;
    }
/* cart/index カートの中身 */
    /* flowline */
    .flowline ul li{font-size: 0.8em;}

    #cart_box__body{
        padding: 0;
    }

    /* table */
    table.cart{
        width:100%;
        font-size:1em;
        background: #fff;
    }
    table.cart th{
        background-color: #dfded3;
        padding:10px;
    }
    table.cart th:last-child{
        display: none;
    }
    table.cart td{
        padding: 3px;
        border-bottom: 0;
    }
    table.cart tr{border-bottom: dotted 1px #666;}
    table.cart tr td.right{
        display: none;
    }
    table.cart tr td:first-child{
        width: 3%;
    }
    table.cart tr td:nth-child(2){
        width: 100%;
        display: flex;
    }
    table.cart tr td:nth-child(3){
        width: 17%;
        text-align: center;
    }
    table.cart a i{
        font-size:2rem;
        color:#93938c;
    }
    table.cart .item_img{
        width: 30%;
        min-height: 60px;
        text-align: center;
        border: 1px solid #f1f1f1;
        position: relative;
    }
    table.cart .item_img img{
        width:auto;
        height: 60px;
        max-width: 60px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    table.cart .item_txt{
        width: 70%;
        margin: 0;
        padding: 5px;
        font-size: 1rem;
    }
    table.cart .item_txt a{
        font-weight: bold;
        font-size: 1.2rem;
        line-height: 1;
    }
    /* カートの中身の個数変更ボタン */
    #cart_item_list__quantity_edit {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    #cart_item_list__quantity_edit li{
        display: block;
        width: 100%;
        margin: 3px 0 0;
        padding: 0;
        font-size: 0.8em;
        padding: 3px;
        text-align: center;
        line-height: 1;
    }
    #cart_item_list__quantity_edit li a{
        width: 100%;
        height: 20px;
        border: 1px solid #666;
        display: block;
        color: #666;
        border-radius: 0;
    }
    #cart_item_list__quantity_edit li a:hover{
        text-decoration: none;
    }
    table.cart .circle{
        width: 100%;
        height: 20px;
        border-radius: 0;
    }
    /* form */
    .btn_group{
        margin: 10px;
        width: 60%;
        float:right;
    }
    #confirm_side{
        width:100%;
        float: none;
        margin: 0;
        padding:20px;
        box-sizing: border-box;
    }
/* shopping/index ご注文内容の確認～ */
    #confirm_main h3.heading02{
        padding-left:20px;
    }
    #shopping_confirm{
        margin: 0;
    }
    #shopping_confirm p{
        margin: 0;
    }
    /* カートの中身 */
    #confirm_main{
        margin: 0;
        padding: 0;
        width: 100%;
        background-color:#fff;
        float:none;
    }
    #confirm_main > div, #confirm_main > h3{
        width: 100%;
        margin:0;
    }
    #confirm_main #cart_box{
        margin: 0;
        width: 100%;
    }
     #confirm_main #cart_box .cart-foot{
        padding:10px;
        text-align: right;
    }
    #confirm_main .cart-item{
        background: #fff;
        margin: 0;
        padding: 10px;
        width: 100%;
        /* border: 1px solid #666 !important;*/
        border-bottom: 1px solid #ccc !important; 
    }
    .cart-item:last-child{
        /* border-bottom: 1px solid #666 !important; */
    }
    #cart_box .cart-img{width: 20%;}
    #cart_box .cart-txt{width: 80%;}
    #cart_box .cart-total{display: none;}
    .item_box{
        border-bottom: 1px dotted #666;
        padding: 0;
    }
    .item_box:last-child{
        border-bottom: 0;
    }
    .item_box .item_photo{
        width: 20%;
        padding: 5px 2%;
    }
    .item_box .item_detail{
        width: 80%;
        margin: 0 -5px 0 0;
        float: left;
        padding: 5px 0 0 5px;
    }
    .item_box .item_detail dt{
        font-weight: bold;
        margin-bottom: 5px;
    }
    .item_box .item_detail dd{
        margin: 0;
        padding: 5px 0;
    }
    .item_box .item_detail .item_pattern {
        text-align: left;
    }
    .item_box .item_detail .item_subtotal{
        font-size: 1.2em;
        background: #edebdf;
        padding: 5px;
        font-weight: bold;
    }
    /* 配送先 */
    .column.is-edit{
        counter-reset: destination_item;
        border: 1px solid #666;
        padding: 10px;
        background: #fefefe;
    }
    .column h3{
        margin: 10px 0;
        border-left: 10px solid #624563;
        padding-left: 5px;
    }
    .column .cart_item{
        border: 1px solid #666;
    }
    .column .item_box{
        counter-increment: destination_item;
        width: 100%;
        padding: 0;
        display: block;
        position: relative;
    }
    .column .item_box:before {
        content: counter(destination_item);
        background: #efefef;
        color: #624563;
        display: block;
        position: absolute;
        height: 100%;
        min-height: 100%;
        width: 10%;
        left: 0;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        border-right: 1px dotted #666;
    }
    .column .item_box .item_photo{
        width: 30%;
        padding: 0 0 0 10%;
    }
    .column .item_box .item_detail{
        padding: 0 5px;
        width: 70%;
    }
    .column .item_box .item_subtotal{
        display: none;
    }
    #confirm_main .shipping-box{
        display: block;
    }
    .shipping-date, .shipping-time{width: 100% !important; margin-left:0 !important}
    #confirm_main .shipping-box label, #confirm_main select{display: inline-block;}
    #confirm_main .shipping-box label{width: 100px;  }
    #shopping_confirm .column p.address{
        padding: 10px;
        margin: 10px 0;
        text-align: left;
        border-left: 10px solid #ccc;
    }
    /* 配送設定 */
    #shopping_confirm .form-inline select.form-control{
        margin-bottom: 10px;
        width: 50%;
    }
    #shopping_confirm .form-inline label{
        width: 30%;
        text-align: center;
        margin: 0;
        display: inline-block;
        background: #efefef;
        color: #624563;
        padding: 10px 0;
    }
/* ゲスト購入 */
    .dl_table{width: 90%;}
    .dl_table dt, .dl_table dd{
        width: 100%;
        display: block;
        padding: 3px;
        border: 0;
    }
    .dl_table dd{
        margin: 0 0 20px;
    }

    /* 購入画面明細 */
    #shopping_confirm #confirm_side p{
        margin:10px 0;
    }
    #confirm_main .shipping-box{
        display: flex;
        flex-wrap: wrap;
        margin:0;
        padding:10px;
    }
    #confirm_main .shipping-address{
        width:500px;
        font-size:16px;
        padding:0 10px 10px;
    }
    #confirm_main .payment-box{
        margin:0;
        padding:0 10px 10px;
    }
    #confirm_main .payment-box p{
        font-size:14px;
        margin-bottom:10px;
    }
    #confirm_side #summary_box{
        margin-top:20px;
    }
    .gmo-payment-inner .center{
        text-align: left;
    }
    .gmo-payment-inner .dl_table{
        width:100%;
    }
    #card_no01,#card_no02,#card_no03,#card_no04{
        width:16vw;
    }
    #card_name01,#card_name02{
        width:40vw;
    }
    .note_box{
        flex-wrap: wrap;
    }
    .note_box div:first-child{
        width:100%;
    }
    .note_box div:last-child{
        width:100%;
        background-color: #fff;
    }
    

}


/* Version4で追加されたスタイル */
.ec-cartRole{
    padding-bottom: 30px;
}
.ec-pageHeader h1{
    font-size: 1.5em !important;
    text-align: center;
    border: none !important;
}
.ec-progress{
    margin: 0 auto 30px !important;
}
#page_cart #main h2{
    font-size: 1.8em !important;
    margin-bottom: 20px;
}
#total_box__next_button{
    margin-bottom: 20px;
}
#main h2{
    font-size: 2rem !important;
}
.ec-inlineBtn,.ec-input select, .ec-birth select, .ec-select select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select,#shopping_order_message{
    font-size: 1.4rem;
}
.ec-blockBtn--cancel{
    font-size: 1.5rem;
}
.shipping-change{
    margin-bottom: 40px;
}
.ec-orderDelivery p{
    margin-bottom: 1rem;
}
.shipping-date .form-control,
.shipping-time .form-control{
    display: inline-block;
    padding:6px 28px 6px 12px;
}