@charset "utf-8";
@import url("header_2024.css");
@import url("cart-step_2024.css");

h2 { font-size: 12px; font-weight: normal;}
h2::before { display: none;}

/* モーダル */
.modal-content { max-width: 600px;}

.modalContents { 
    border:2px solid #aaa;
    font-size: 14px; line-height: 1.5em;}

/**============================================================================================**/

/**============================================================================================**/
/* 追加注文の方へ */
#additional { 
    max-width: 880px; margin: 0 auto 20px; padding: 5px;
	background: #003f7f;
    text-align: center;}

#additional > a {
    display: inline-block; position: relative; 
    box-sizing: border-box; min-height: 40px; padding: 9px 5px 0 47px;
	color: #ffeb00; font-weight: bold; text-align: center; text-decoration: underline;}

#additional > a:hover { border-radius: 6px; background: #309cd0; color: #fff;}

#additional > a::before {
    content: '';
    display: block; position: absolute; top: 5px; left: 5px;
    width: 30px; height: 30px;
    background: url("/images/shop/warning-ye_w48.webp") no-repeat;
    background-size: 30px auto;
    transition: all 0.4s;}

#additional > a:hover::before {
    background: url("/images/shop/warning-wh_w48.webp") no-repeat;
    background-size: 30px auto;}


/**========================================**/
/* 追加注文の方へ（モーダル） */
#con9.modal-content { max-width: 750px;}
#con9 .modalContents { border-color: #cc0000; color: #cc0000;}

#con9 strong { 
    display: block; 
    margin: 0 0 10px;
    font-size: 20px; line-height: 1.5em; }
    
@media screen and (max-width:799px){
    #con9.modal-content { max-width: 650px;}
}
    
/**============================================================================================**/

/**============================================================================================**/
/* カートの項目 */
#cart .dis-tbl_tab,
#cart .dis-tbl_tab01 { box-sizing: border-box; width: 100%; padding: 0 10px 0 100px;}
    
#cart .dis-tbl_tab > *,   
#cart .dis-tbl_tab01 > * { 
    display: table-cell; 
    box-sizing: border-box; padding: 0 10px;
    text-align: center; vertical-align: top;}

#cart .name { text-align: left;}
#cart .stock { width: 160px;}
#cart .quantity { width: 160px;}
#cart .price { width: 130px;}

#cart ul { margin: 10px 0 0; border-top: solid 1px #ccc;}
#cart li { 
    position: relative;
    padding: 15px 0; 
    border-bottom: solid 1px #ccc;}

#cart li > img { 
    position: absolute; top: 15px; left: 10px;
    width: 80px; height: auto;
    border: solid 1px #999;}

 
/* 在庫状況 */
#cart .stock p { padding: 5px; border: #333333 2px solid; text-align: center;}

/* 数量 */
#cart .quantity select { 
    width: 100px; margin: 0 auto; padding: 10px 5px; 
    text-align: center;}

#cart .quantity span { display: none;}

#cart .quantity input {
    display: inline-block;
    width: 60px; padding: 8px 3px;
    border: solid 1px #999; border-radius: 3px;
    text-align: center;}

#cart .quantity p { margin: 15px 0 0;}

/* 税込単価 */
#cart li .price { color: #FF0004; font-weight: bold; text-align: right;}

/* 注意マーク */
#cart .mark { margin: 0 0 0 110px; font-size: 0;}

#cart .mark p { display: inline-block; margin: 10px 15px 0 0; vertical-align: top;}
#cart .mark p:last-child { margin: 10px 0 0;}

#cart .mark a { 
    display: block; position: relative;
    width: 60px; height: 40px; padding: 0 18px 0 0;}

#cart .mark a::after {
    content: url("../images/icon/plus-icon_w15.gif");
    display: block; position: absolute; right: 0; bottom: 0;
    width: 15px; height: 15px;}

@media screen and (max-width:899px){
    #cart > .dis-tbl_tab { display: none;}
    #cart ul { margin: 10px 0 0; border-top: none;}
    
    #cart li .dis-tbl_tab,
    #cart li .dis-tbl_tab01 { display: block; padding: 0 130px 0 100px; font-size: 14px;}

    #cart .dis-tbl_tab > *,
    #cart .dis-tbl_tab01 > * { display: inline-block; font-size: 16px; vertical-align: middle;}
    
    #cart .stock,
    #cart .quantity { width: auto;}

    /* 商品名 */
    #cart .name { box-sizing: border-box; width: 100%; margin: 0 0 15px;}
    
    /* 在庫状況 */
    #cart .dis-tbl_tab01 .stock { width: 0; padding: 0;}
    
    /* 数量 */
    #cart .quantity span,
    #cart .quantity p { display: inline-block;}
    #cart .quantity p { margin: 0 0 0 15px;}
    
    /* 税込単価 */
    #cart .price { position: absolute; top: 15px; right: 0;}
}

@media screen and (max-width:699px){
    #cart li > img { left: 5px;}
    
    #cart li .dis-tbl_tab,
    #cart li .dis-tbl_tab01 { padding: 0 5px 0 100px;}
    
    #cart .dis-tbl_tab > *,   
    #cart .dis-tbl_tab01 > * { padding: 0;}
    
    /* 在庫状況 */
    #cart .stock p { width: 120px;}
    #cart .dis-tbl_tab .stock { margin: 0 15px 15px 0;}
    
    /* 数量 */
    #cart .quantity { margin: 0 0 15px;}

    /* 税込単価 */
    #cart .price { 
        position: static; 
        box-sizing: border-box; width: 100%;}

    /* 注意マーク */
    #cart .mark { margin: 0 0 0 100px;}

}

/**========================================**/
/* 注意マーク（モーダル） */
#con1 li {position: relative; margin: 5px 0; padding: 0 0 0 18px;}
#con1 li::before {content:'・'; position: absolute; top: 0; left: 0;}

/**============================================================================================**/

/**============================================================================================**/
/* 合計・ボタン類 */
#subtotal { position: relative; min-height: 220px; padding: 20px 220px 20px 10px;}

#subtotal .posi-abs { 
    top: 20px; right: 10px; 
    width: 200px;
    text-align: right;}

@media screen and (max-width:699px){
    #subtotal { min-height: auto; padding: 20px 5px;}

    #subtotal .posi-abs { position: static; width: auto; margin: 0 0 20px;}
}


/* 合計 */
#subtotal strong { color: #FF0004; font-size: 1.1em;}

/* レジに進む・お買物データ */
#nextbutton,
#subtotal .modal-open {
    display: inline-block;
    box-sizing: border-box; width: 180px; height: 38px;
    border-radius: 4px;
    color: #fff; line-height: 1.0em; text-align: center;}

/* レジに進む */
#nextbutton { 
    margin: 30px 0 0;
    border: none; background: #ce0000;
    font-size: 16px; 
    cursor: pointer;
    transition: all 0.4s;}
    
#nextbutton:hover { background: #f00;}

/* お買物データ */
#subtotal .modal-open { 
    margin: 30px 0 0; padding: 13px 0 0; 
    background:#153462; 
    font-size: 11px;}
    
#subtotal .modal-open:hover { background: #00bcff;}


/* 前にいたページに戻る・トップページに戻る */
#return { margin: 20px 0 0;}
#return a { display: inline-block; margin: 0 20px 0 0; padding: 5px;}

@media screen and (max-width:499px){
    #return a { margin:0 10px 10px 0;}
}
/**========================================**/
/* お買物データ（モーダル） */
#modal-content.modal-content { max-width: 450px; padding: 10px;}

@media screen and (max-width:699px){
    #modal-content.modal-content { width: 95%;}
}

/**============================================================================================**/

/**============================================================================================**/

/* LastUp2026.08.11_kimata */