@charset "utf-8";

/*
shopping/shipping
shopping/shipping_edit
shipping_multiple
shipping_multiple_edit
forgot/index
forgot/complate
forgot/reset

*/


/* 共通 */
.mypage h2{
    font-size: 160%;
    padding: 6px 10px;
    background-color: #efefe2;
    text-align:center;
}
.mypage #main{
    margin-bottom:60px;
}
.mypage #welcome_message{
    padding: 30px;
}
.mypage #main input,.mypage #main select{
    font-size: 1.4rem;
}

/* ログイン */
#login_box{
    width:60%;
    margin:10px auto 60px;
    background-color: #f7f7f2;
    padding:60px;
    box-sizing: border-box;
}
#login_box p{
    margin-bottom: 1rem;
}
.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
}
dt .required::after{
    content: '必須';
    background-color:#c40026;
    color:#fff;
    padding:0 2px;
    font-size:80%;
    margin-left:10px;
    border-radius: 2px;
}
/* ナビゲーション */
#navi_list_box{
    margin-bottom:30px;
}
#navi_list_box + .intro{
    margin-bottom: 10px;
}
#delivery_box__new_button{
    margin-bottom: 10px;
}
#navi_list{
    display: flex;
    justify-content: space-between;
    border-bottom:solid 4px #60527b;
    align-items: flex-end;
}
#navi_list li{
    display: block;
    box-sizing: border-box;
    width:19%;
    /* border:solid 1px #ccc; */
}
#navi_list li a{
    display: block;
    padding:10px 20px;
    text-align: center;
    font-size:120%;
    background-color:#bcbcbc;
    color:#fff;
    border-radius:4px 4px 0 0;
}
#navi_list .active a,
#navi_list a:hover{
    padding:14px 20px;
    background-color: #60527b;
    text-decoration: none;
    /* border-bottom:solid 4px #624663; */
}

#history_list{
    margin-bottom:40px;
    padding:30px;
}
/*ご注文履歴*/
.his-list{
    display: flex;
    border:solid 1px #ccc;
    margin-bottom:30px;
}
.his-list > div{
    padding:0 10px;
}
.his-list .his-data{
    width:30%;
    background-color:#f6f6f6;
    padding:20px;
    line-height: 2;
}
.his-list .his-data .btn{
    width:100%;
    text-align: center;
    margin-bottom: 10px;
}
.his-list .his-main{
    width:70%;
    padding:20px;
}
.his-list .his-main .item_box{
    border-bottom:none;
}
.his-list .his-main .item_photo{
   width:80px;
   padding:0 4px;
}

.his-list .his-main .item_detail{
    margin-left:120px;
}
.his-list .his-main .item_name{
    font-size:16px;
}
.his-list .his-main .item_pattern,
.his-list .his-main .item_price{
    font-size:14px;
    text-align: left;
    margin:0;
}
.order_detail{
    border-bottom:solid 1px #ccc;
}
.order_detail dt{
    float:left;
}
h3.heading02{
    background-color: #efefef;
    padding:2px 10px;
    font-size:120%;
}
#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;
}
/*お気に入り*/
/*お気に入り*/
.fav-wrap{
    overflow: hidden;
    font-size:16px;
    border-top:solid 1px #d8d8cc;
}
.fav-left{
    width:260px;
    float:left;
    background-color:#e9eae3;
}
.fav-left li{
    display: block;
    padding:20px;
    font-size:17px;
    cursor: pointer;
    border-bottom:solid 1px #d8d8cc;
    /* color:#fff; */
}
.fav-left li:not(.active):hover{
    background-color:#d8d8cc;
}
.fav-left .active{
    background-color:#fff;
}
.fav-right{
    width:760px;
    float:left;
    padding:20px;
}
.fav-list{
    display: flex;
    border-bottom:dotted 1px #ccc;
    padding:10px;
    align-items: center;
}
.fav-list > div{
    padding:0 10px;
}
.fav-photo{
    width:120px;
}
.fav-photo img{
    width:100%;
}
.fav-main .item_pattern{
    margin:0;
}
/*お届け先編集*/
.add-wrap{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.add-list{
    border:dotted 1px #ccc;
    padding:10px;
    align-items: center;
    font-size:18px;
    margin-bottom:30px;
    width:49%;
}
.add-list > div{
    padding:0 10px;
    line-height: 1.4;
}
.add-main{
    /* width:240px; */
}

/* dl-table */

.dl_table {
    display: table;
    width: 80%;
    margin:0 auto 30px;
}
.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-inline: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;
}




@media screen and ( max-width:640px ){
/* 共通 */
    #main h2{
        padding: 0;
        background-color: transparent;
        margin: 30px 0 20px;
        border-bottom: 1px solid #ccc;
    }
    #main h2#order{
            padding: 60px 0 0;
            margin: 20px 0;
    }
    #main{
        padding: 0 10px;
    }
    #main nav ul#navi_list{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 p{
        margin: 0;
    }
    .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;
    }
/*  favorite
============================ */
    .fav-right{
        width:100%;
        float:none;
        padding:20px;
    }
    .fav-list{background: #fff;}
/*  form
============================ */
    .form-group input[type="number"]{
        width: 100%;
    }
    .form-inline .form-control {
        width: 100%;
    }
    .form-inline label{
        border-left: 5px solid #624563;
        padding-left: 5px;
        display: block;
        margin-top: 10px;
    }
    .cart_item{
        border-top: 5px solid #624563;
        padding: 10px;
    }
    .shipping_item{
        width: 100%;
        border: 1px solid #666;
        padding: 0 10px 10px;
        margin-bottom: 20px;
        background: #fff;
    }


    /* ログイン */
    #login_box{
        width: 100%;
        padding: 30px;
    }

/* ナビゲーション */
    #main nav ul {
        display: block;
    }
    #main #navi_list li{
        width: 100%;
        margin: 5px 0;
    }
    #navi_list li a{background: #fff;}
    .btn_group a{padding: 9px 12px}


/*お届け先編集*/
    .add-list{
        position: relative;
        width: 100%;
        background: #fff;
    }
    .add-edit{
        text-align: right;
    }

/* dl-table */
    .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;
    }

    /*ご注文履歴*/
    .his-list{
        flex-wrap: wrap;
    }
    .his-list .his-data{
        width: 100%;
        padding: 10px;
    }
    .his-list .his-main{
        width: 100%;
        padding: 10px;
        background: #fff;
    }
    .his-list .his-main .item_box{
        padding: 4px 0;
        overflow: hidden;
        border-bottom: 1px solid #ccc;
    }
    .his-list .his-main .item_box:last-child{
        border: 0;
    }
    .his-list .his-main .item_box .td{
        display: inline-block;
    }
    .his-list .his-main .item_photo{
    width: 80px;
    padding:0 4px;
    }

    .his-list .his-main .item_detail{
        margin: 0;
        width: calc(100% - 80px);
    }
    .his-list .his-main .item_name{
        font-size:16px;
    }
    .his-list .his-main .item_pattern,
    .his-list .his-main .item_price{
        font-size:14px;
        text-align: left;
        margin:0;
    }
}

#withdraw_box__confirm_button{
    margin: 30px;
}
#confirm_box__complete_button p{
    margin: 30px;
}
#confirm_side{
    width: auto;
}
#customer_address_address_pref{
    background-image: none !important;
}
legend{
    float: none;
}