/* ==========================================================================
   Base Reset
   基本スタイルのリセット
   ========================================================================== */
/* html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
    letter-spacing: 1px;
    box-sizing: border-box;
} */

ol, ul {
    list-style: none;
}

/* ==========================================================================
   Layout & Common
   レイアウトと共通のスタイル
   ========================================================================== */
/* 既存スタイルの上書き用リセット */
#Wrap, .wrapBottom, #Contents, #Header, #Head, #HeadCart, #HeadCart div.right,
.head_productlist, .head_search, .sumBox p, .sumBox dl,
.shoppingCart div.singleProduct dl, .shoppingCart div.multiProduct dl,
.shoppingCart div.subCartList div.block, #Order div.main, .orderBox div.box dl,
.orderBox div.userProduct dl, #CartList div.productList div.product dl.name,
.orderDetail, .orderComplete div.productList dl.name, .orderComplete div.cartOrder,
.orderBox div.bottom, #CartList div.productList div.product p.price,
#CartList div.productList div.product p.taxRate,
#CartList div.productList div.product p.subtotal,
#CartList div.productList div.product p.delete,
#CartList div.productList dl.name dd, #CartList div.productList dl.name dt,
#Contents div.columnLeft, #Contents div.column,
.couponBox div.boxbtm dt, .couponBox div.boxbtm dd,
.pointBox div.boxbtm dt, .pointBox div.boxbtm dd {
    float: none;
    width: auto;
}

#Contents input {
    width: auto;
    margin: 0;
    box-sizing: border-box;
    background: #eceef0;
    border: none;
    box-shadow: unset;
}
#CartList div.productList div.product p.quantity input{
    padding: 0 !important;
    width: 40px;
}

#dvUserContents .unit,
#dvUserFltContents .unit ,
#CartList{
    padding: 40px 0;
    max-width: 850px;
    font-size: 14px;
}

select,
input[type="file"] {
    margin: 10px 0;
    min-width: unset;
    border: unset;
    border-radius: 0;
    background: #eceef0;
    border: none;
    box-shadow: unset;
    /* padding: 12px 20px; */
    box-sizing: content-box;
    font-size: 14px;
}

#paymentTypeArea .radioBtn input[type="radio"] {
    margin: 0 5px 0 0;
}

.pcNon {
    display: none !important;
}
#Contents div.columnRight{
    width: 100% !important;
}
@media screen and (max-width: 1000px) {
    #dvUserContents .unit,
    #dvUserFltContents .unit ,
    #CartList{
        font-size: 12px;
    }
    select,
    input[type="file"] {
        /* font-size: 12px; */
        padding: 6px 5px;
    }
}
/* ==========================================================================
   Buttons
   ボタン関連のスタイル
   ========================================================================== */
.btn-success,
.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
    background-color: #000;
    background-image: unset;
}

div.cartstep .btn-success,
#CartList div.btmbtn .btn-success {
    background-color: #000;
    background-image: unset;
}
div.btmbtn{
    max-width: 850px;
    width: 810px;
}
@media screen and (max-width: 1000px){
    div.btmbtn{
        width: 97%;
    }
}
@media screen and (max-width: 750px){
    div.btmbtn{
        width: 92%;
        margin: 0 auto;
    }
}
/* ==========================================================================
   Form LP
   フォームページのスタイル
   ========================================================================== */
.formlp-front-section-form {
    width: 100%;
    max-width: 980px;
    min-height: 70vh;
    margin: 0 auto;
    padding-bottom: 120px;
    color: #000;
}
.orderBox div.box{
    padding: 0 0 20px;
    margin-bottom: 20px;
}
.shoppingCart div.subCartList div.bottom,.shoppingCart div.subCartList{
    background: unset;
}
.formlp-front-section-form div.main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100% !important;
    max-width: 850px;
}
.formlp-front-section-form div.submain {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100% !important;
    max-width: 850px;
}
.formlp-front-section-form .columnLeft, .formlp-front-section-form .columnLeft div.column{
    width: 100% !important;
}

.formlp-front-section-form .userBox dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    /* margin-top: 10px; */
}

.formlp-front-section-form .userBox dd.grid,
.orderBox dd.grid
 {
    display: grid;
    grid-template-columns: 48% 48%;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.formlp-front-section-form .userBox dd.input_align label {
    display: inline-block;
    width: 30px;
    text-align: center;
}

.LandingOrderPage #Contents div.column {
    width: 56% !important;
    font-size: 0.8rem;
}

.LandingOrderPage #Contents div.submain {
    width: 100%;
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upOwnerUpdatePanel,
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_upShippingUpdatePanel,
#paymentTypeArea,
.orderBox
{
    input[type="text"], input[type="email"], input[type="tel"],input[type="password"]{
        width: 100%;
        box-sizing: border-box;
        background: #eceef0;
        border: none;
        box-shadow: unset;
        padding: 12px 10px;
        
    }
}
#Contents div.main{
    font-size: 14px;
}
.formlp-front-section-form .userBox dt{
    background-color: unset;
}
.userBox,.userBox div.top,.userBox div.bottom{
    background: unset;
}
@media screen and (max-width: 1000px) {
    .formlp-front-section-form .userBox dd.grid ,
.orderBox dd.grid
    {
        grid-template-columns: 48% 48%;
    }
    #Contents div.main{
        font-size: 12px;
    }
}
/* ==========================================================================
   Cart Page
   カートページのスタイル
   ========================================================================== */
.grid02 {
    display: grid;
    grid-template-columns: 50% 20% 20% 10%;
    padding: 10px 0;
    margin: 0 auto;
    border-bottom: #DDDDDD solid 1px;
    text-align: center;
}

#CartList div.productList div.product div.itemList {
    /* display: flex;
    align-items: center;
    margin: 0 10px; */
    display: grid;
    grid-template-columns: 50% 20% 20% 10%;
}

#CartList div.productList div.product dl.name {
    display: flex;
    align-items: center;
    gap: 0 10px;
    width: 100%;
}

#CartList div.productList dl.name dt {
    max-width: 96px;
	width: 100%;
}

#CartList div.productList div.product .itemList p.quantity {
    width: 100%;
}

#CartList div.productList div.product .itemList p.price {
    width: 100%;
}

#CartList div.productList div.product p.delete {
    margin-left: auto;
}

#CartList div.productList div.list {
    padding: 15px 0 0;
}

#CartList div.productList div.cartOrder,
#CartList div.productList div.subcartOrder {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    background-color: unset;
}

#CartList div.cartOrder div.priceList dl {
    font-size: 0.8rem;
}

/* ==========================================================================
   Coupon & Point Box
   クーポンとポイント関連
   ========================================================================== */
.pointBox div.box,
.couponBox div.box {
    background: unset;
}

.pointBox div.boxbtm,
.couponBox div.boxbtm {
    padding: 0;
    background: unset;
}

.pointBox div.boxbtm {
    padding: 10px;
}

.pointBox div.boxbtm dl,
.couponBox div.boxbtm dl {
    display: flex;
}

.pointBox div.boxbtm dd {
    width: 180px;
}

#CartList div.productList div.couponBox {
    padding: 0;
    text-align: left;
    padding-left: 0 !important;
    float: unset;
    margin-right: 20px;
    @media screen and (max-width: 750px) {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

#CartList div.productList div.couponBox div.boxbtm {
    padding: 13px 0 !important;
}
#Contents div.columnLeft h2,#Contents div.columnRight h2{
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 18px;
}
/* ==========================================================================
   Order Page
   注文ページのスタイル
   ========================================================================== */
.shoppingCart div.subCartList {
    width: 88%;
    background-size: 100%;
}

.shoppingCart div.subCartList div.block {
    padding: 5px 21px 9px 21px;
}

.shoppingCart div.subCartList div.priceList,
.shoppingCart div.priceList div,
.priceList dl,
.shoppingCart div.singleProduct div {
    width: 100%;
}

.orderBox {
    background: unset;
}

.orderBox h3,
.orderBox div.bottom {
    background:unset;
}

.orderBox div.box div {
    width: 100%;
}

.orderBox div.box dt {
    width: 45%;
}

.orderBox div.box dd {
    padding: 1px 0 1px 45%;
	word-break: break-all;
}

.sumBox div.subSumBoxB,
.sumBox div.subSumBox {
    width: 100%;
}
#CartList div.productList div.product {
    border-bottom: #DDDDDD solid 1px;
	border-top: unset;
}
.userList,.orderBox div.list{
    padding: 0;
}
.orderBox div.list dt{
    background-color: unset;
    color: #000;
    :has(:checked){
        background-color: #eceef0;
        width: 100%;
        height: 100%;
        display: inline-block;
        padding: 10px;
    }
}
.btn-large{
    max-width: 429px !important;
    box-sizing: border-box !important;
    word-break: auto-phrase !important;
    box-shadow: unset !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    padding: 19px 0 !important;
    width: 100% !important;
    font-weight: bold !important;
}
.btn-mini{
    word-break: auto-phrase !important;
    box-shadow: unset !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    font-weight: bold !important;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold !important;
    span {
        font-weight: bold !important;
    };
}
.sumBox strong {
    font-size: 16px;
    display: block;
    float: unset;
    width: fit-content;
    text-align: center;
}
#ctl00_ContentPlaceHolder1_ucInputForm_UpdatePanel1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    /* margin-top: 60px; */
}
#CartList div.btmbtn{
    margin-top: 0;
}
#CartList div.btmbtn{
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    gap: 20px;
    padding: 60px 0 0;
    height: unset;
    width: 100%;
}
@media screen and (max-width: 750px) {
    .btn-large{
        margin: 0!important;
        font-size: 13px !important;
        width: 73% !important;
        padding: 11px 0 !important;
        letter-spacing: 2px !important;
    }
}
/* ==========================================================================
   Login Page
   ログインページのスタイル
   ========================================================================== */
.dvLoginLogin dl,
.dvLoginLogin dd {
    margin-top: 10px;
}

.dvLoginLogin input:not([type="checkbox" i]),
.dvLoginLogin textarea,
.dvLoginLogin .uneditable-input {
    width: auto;
    margin: 0;
    width: 100% !important;
    box-sizing: border-box;
    background: #eceef0;
    border: none;
    box-shadow: unset;
    padding: 12px 10px;
}

.dvLoginLogin .btn-success {
    width: 400px;
    margin-top: 60px !important;
}

.dvLoginLogin input[type="checkbox" i] {
    margin-right: 10px !important;
}

/* ==========================================================================
   Order Complete Page
   注文完了ページのスタイル
   ========================================================================== */
.orderCompleteSum div.sumBox {
    width: 398px;
    margin: 0 0 0 auto;
}
.orderCompleteSum{
    background: unset;
}
.suborderCompleteSum{
    width: 100%;
}
.spLiset,
.orderDetail {
    order: unset;
}

.orderDetail {
    background: unset;
}

.orderComplete div.sumBox dl,.orderComplete div.sumBox{
    font-size: 1rem;
}
.orderCompleteSum div.sumBox dl{
    font-size: 1rem;
}
#CartList h3,.orderComplete h4,.bottom h3{
    background: unset;
    color: #000;
    text-align: left;
    font-weight: bold;
    border: unset;
    font-size: 0.9rem;
    padding-left: 0;
    padding-bottom: 0.6em;
    margin-bottom: 1em;
    border-bottom: #C2CFD7 solid 1px;
}
.shoppingCart div.subCartList h3{
    background: unset;
    color: #000;
    text-align: left;
    font-weight: bold;
    border: unset;
    padding-left: 0;
    font-size: 0.9rem;
    padding-bottom: 0.6em;
    margin-bottom: 1em;
    border-bottom: #C2CFD7 solid 1px;
}
.orderComplete div.bottom,.orderComplete div.background{
    background: unset;
}
.couponBox div.boxbtm span{
    padding-right: 5px;
}
/* ==========================================================================
   Responsive (max-width: 1000px)
   ここからはスマホ表示の調整よ
   ========================================================================== */
@media screen and (max-width: 1000px) {
    .pcNon {
        display: block !important;
    }

    .grid02 {
        display: none;
    }

    #CartList {
        padding: 0 20px;
    }


    #CartList div.productList div.product div.itemList {
        display: grid;
        grid-template-columns: 20% 50% 20% 10%;
    }
    #CartList div.productList div.product div {
		flex-wrap: wrap;
		margin: 0;
        padding: 0 15px;
    }

    #CartList div.productList div.product dl.name {
        grid-column: 1 / 5;
        width: 100%;
    }

    #CartList div.productList dl.name dt {
        width: 20%;
        max-width: unset;
    }

    #CartList div.productList div.product div.itemList dl.name dd {
        font-size: 0.8rem;
		width: 80%;
    }

    #CartList div.productList div.product p.price {
        grid-column: 2 / 3;
        width: 100%;
    }

    #CartList div.productList div.product p.quantity {
        grid-column: 3 / 4;
        width: 100%;
    }

    #CartList div.productList div.subcartOrder {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
    }

    #CartList div.productList div.priceList,
    #CartList div.cartOrder div.priceList dl {
        width: 100% !important;
    }

    .dvLoginLogin .btn-success {
        width: 100%;
        box-sizing: border-box;
    }

    #dvLogin .dvLoginLogin input.input_widthC {
        width: 100%;
        box-sizing: border-box;
    }

    .formlp-front-section-form div.btmbtn li {
        margin: 10px 0;
    }

    .LandingOrderPage #Contents div.main,
    .LandingOrderPage #Contents div.submain {
        width: 100% !important;
    }

    #Contents div.columnRight {
        width: 100%;
    }

    .orderComplete, .orderComplete div.background, .orderComplete div.bottom,
    .suborderDetail, .orderComplete div.orderDetail div.left,
    .orderComplete div.orderDetail div.right, .orderComplete div.orderDetail div.left div,
    .orderComplete div.orderDetail div.right div, .orderComplete div.orderDetail dl,
    .orderComplete div.product, .orderComplete div.subcartOrder,
    .orderCompleteSum, .suborderCompleteSum, .orderComplete div.product div {
        width: 100%;
    }
	.formlp-front-section-form .columnLeft div.column{
		width: 100% !important;
	}
    .orderComplete div.background {
        background-size: 100%;
    }

    .orderComplete div.orderDetail dt {
        width: 100%;
        float: unset;
        padding: 1px 0;
    }

    .orderComplete div.orderDetail dd {
        padding: 0;
        margin-bottom: 10px;
    }
	.LandingOrderPage #Contents div.column {
		width: 100% !important;
	}
	.shoppingCart,.shoppingCart h2,.sumBox,.shoppingCart div.subCartList{
		width: 100%;
	}
	.shoppingCart div.subCartList div.bottom{
		background-size: 100%;
	}
	.shoppingCart h2{
		margin-top: 20px;
	}
	.orderComplete{
		padding: 0;
	}
	.orderComplete div.sumBox dl,.orderComplete div.sumBox{
		width: 100% !important;
        font-size: 1rem;
	}
	.orderCompleteSum div.sumBox dl{
		width: 100% !important;
        font-size: 1rem;
	}
	.orderComplete div.priceList div{
		width: 100% !important;
		padding: 0 10px;
		margin: 0 !important;
	}
	.orderComplete .productList ,#CartList div.productList{
		width: 100% !important;
		margin: 0 !important;
	}
	#CartList div.productList{
		padding: 0;
	}
	.orderCompleteSum div.left, .orderCompleteSum div.right{
		width: 100%;
	}
	.orderCompleteSum div.sumBox,.orderCompleteSum div.sumBox p{
		width: 100%;
	}
	.orderCompleteSum{
		margin-top: 20px;
	}
	.orderComplete{
		margin-bottom: 20px;
	}
}

.couponBox{
    width: auto;
}
#CartList div.productList div.pointBox div.box div, #CartList div.productList div.couponBox div.box div{
    width: 100%;
    padding-left: 0 !important;
    tr{
        display: flex;
        align-items: center;
        gap: 0 20px;
    }
    td{
        display: flex;
        align-items: center;
        gap: 0 5px;
        input[type="radio"]{
            margin: 0 !important;
        }
    }
}
#ctl00_ContentPlaceHolder1_ucInputForm_rCartList_ctl00_hgcCouponSelect{
    select{
        width: 80% !important;
        margin: 0;
    }
}
#ctl00_ContentPlaceHolder1_ucInputForm_upSocialLogin{
    margin-top: 20px;
}
.userList div.subbox{
    background: unset;
    input {
        margin-right: 5px !important;
    }
}