@charset "euc-jp";
/* sgmodal.js（モーダル） */
.lock {　overflow:hidden;}
.modal-content {
    display:none; position:relative;
    width:700px; padding:10px 20px;
    border: solid 2px #aaa; background:#fff;
    font-size: 14px; line-height: 1.6em; text-align: left;}

.modal-overlay {
    display:none; position:fixed; top:0; left:0; z-index:1000;
    width:100%; height:120%;
    background-color:rgba(0,0,0,0.6);}
    
.modal-wrap {
    display:none; position:fixed; top:0; left:0; z-index:2000;
    overflow:auto;
    box-sizing: border-box; width:100%; height:100%; padding: 10px 0;}

.modal-open:hover {cursor:pointer;}


/*モーダル閉じるボタン*/
.modal-close {
    display: block; position: absolute; top: -7.5px; right: -7.5px; z-index: 105;
    overflow: hidden;
    width: 30px; height: 30px; padding: 0;
    border-radius: 100%;
    background: #fff;
    text-indent: -999px; cursor: pointer; white-space: nowrap;}

.modal-close::before {
    content: "\00d7";
    display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    color: #333; font-size: 22px; font-weight: 700; line-height: 30px; text-align: center; text-indent: 0;
    -webkit-transition: color 0.15s linear;
    transition: color 0.15s linear;}

@media screen and (max-width: 799px){
    .modal-content { width: 620px; }
}

@media screen and (max-width: 699px){
    .modal-content { box-sizing: border-box; width:80%;}

    /*モーダル閉じるボタン*/
    .modal-close {
        position: fixed; top: 0; right: 0;
        width: 40px; height: 40px;
        border-radius: 0; background: #000;}

    .modal-close::before { color: #fff; font-size: 28px; font-weight: 700; line-height: 40px;}
}

@media screen and (max-width: 599px){
    .modal-content { width: 85%; padding: 10px;}
}

@media screen and (max-width: 399px){
    .modal-content { padding: 10px 8px;}
}

/**============================================================================================**/
/* モーダル タイトル */
.modal-content strong { display: block;}

.modal-content > strong {
    margin: 0 0 20px; padding: 7px;
	background: #004885;
	color: #fff; font-size: 18px; line-height: 1.5em;}

/* アスタリス */
.modal-content .asterisk { position: relative; padding: 0 0 0 18px;}
.modal-content .asterisk::before { content:'※'; position: absolute; top: 0; left: 0;}


/* モーダル tableの設定 */
table { border-color: #888; border-collapse: collapse;}
/**============================================================================================**/

/**============================================================================================**/
/* 当店からお送りするメールアドレス（ShoppingGuide-modal_01.inc） */

/* メールが届かない場合のよくある事例 */
#con99 .modalContents > strong {
    margin: 0 0 15px; padding: 5px;
	background: #c6e5f9;
	color: #004885; font-size: 16px; line-height: 1.5em;}

#con99 li { margin: 0 0 10px;}
#con99 li p.fw_b { margin: 0 0 5px;}
#con99 li p.fw_b + p { margin:0 0 0 20px;}
#con99 li span { color: #c00; font-weight: bold;}

/* 上記のいずれにも当てはまらない場合 */
#con99 p.p_15 span {
    display: inline-block;
    padding: 7px 10px;
    background: #fff782; 
    font-size: 16px; font-weight: bold; line-height: 1.5em;}

#con99 p.p_15 span br { display: none;}

@media screen and (max-width: 699px){
    #con99 p.p_15 span br { display: block;}
}

@media screen and (max-width: 399px){
    #con99 p.p_15 span { font-size: 14px;}
}

/**========================================**/
/* お買い物のながれ（ShoppingGuide-modal_02.inc） */
#con1 li { margin: 0 0 15px;}
#con1 p.fw_b { margin: 0 0 5px;}
#con1 .indent { margin-left: 2em; text-indent: -1em;}
#con1 .indent + .indent {margin-top: 15px;}

/**========================================**/
/* お支払い金額（ShoppingGuide-modal_03.inc） */
#con2 .dis-tbl_tab > * { padding: 3px; vertical-align: top;}
#con2 .dis-tblcl01 { 
    box-sizing: border-box; width: 140px; 
    background: #e6e6fa;
    font-weight: bold;}

#con2 li {  margin: 5px 0 5px 1em; text-indent: -1em;}
#con2 li.indent{ margin: 5px 0 5px 2em; text-indent: -2em;}
#con2 img { vertical-align: middle;}

@media screen and (max-width: 699px){
    #con2 .dis-tbl_tab,
    #con2 .dis-tbl_tab > * { display: block;}
    #con2 .dis-tblcl01 { width: auto;}
}

/**========================================**/
/* お支払方法 クレジットカード（ShoppingGuide-modal_04-1.inc） */
#con3 .arrow,
#con3 .dot { position: relative; padding: 0 0 0 18px;}

#con3 .arrow::before,
#con3 .dot::before { position: absolute; top: 0; left: 0;}

#con3 .arrow::before { content:'→';}
#con3 .dot::before { content:'・';}

/* クレジットカード情報の管理について */
#con3 .p_10 { margin: 20px 0; border: solid 1px #d00;}
#con3 .p_10 strong { margin: 0 0 10px; padding: 0 0 5px; border-bottom: dotted 1px #666;}

#con3 table { margin: 10px 0 5px;}
#con3 table th { font-weight: 400;}

/**========================================**/
/* お支払方法 代金引換（ShoppingGuide-modal_04-2.inc） */
#con4 table { margin: 0 0 15px;}
#con4 table th { background: #c4e0ef; color: #004989;}
#con4 table td { text-align: right;}

#con4 .dot li { margin: 0 0 10px; padding: 0 0 0 2em; text-indent: -2em;}

#con4 .dot p { 
    margin: 0 0 0 1em; 
    color: #e00; font-size: 0.9em; font-weight: 600;
    text-indent: -1em;}

#con4 .asterisk { margin: 5px 0;}

#con4 .dot img { vertical-align: middle;}
/**========================================**/
/* お支払方法 銀行振込（ShoppingGuide-modal_04-3.inc） */
#con5 .indent { margin: 5px 0; padding: 0 0 0 2em; text-indent: -2em;}
#con5 .asterisk { margin: 5px 0;}
/**========================================**/
/* お支払方法 ※領収書について（ShoppingGuide-modal_04-4.inc） */
#con7 .indent { margin: 5px 0; padding: 0 0 0 2em; text-indent: -2em;}

#con7 ul { margin: 0 0 20px;}

#con7 li { 
    display: table; table-layout: fixed; 
    width: 100%; margin: 5px 0;}
    
#con7 li p { display: table-cell; vertical-align: top;}
#con7 li p:first-child { position: relative; width: 180px;}
#con7 li p:first-child::after { 
    content: '：';
    display: inline-block; position: absolute; top: 0; right: 0;
    padding: 0 5px;}
    
@media screen and (max-width:699px){
    #con7 li,
    #con7 li p { display: block; vertical-align: top;}

    #con7 ul { margin: 5px 0 30px;}
    #con7 li { margin: 0 0 10px;}

    #con7 li p:first-child::after {position: static;}
}

/**========================================**/
/* お支払方法 月末締め請求書払い（ShoppingGuide-modal_04-5.inc） */
#con16 p { margin: 5px 0 0;}

#con16 .modalContents > a {
    display: block;
    width: 250px; margin: 0 auto 40px; padding: 10px;
    background: #F9C900; border-radius: 5px;
    font-size: 1.1em; font-weight: 600; text-align: center;}

#con16 .modalContents > a:hover { color: #333; opacity: 0.7;}

#con16 ul {
    margin: 0 0 15px; padding: 5px;
    border-bottom: dotted 1px #333;}

#con16 li { position: relative; margin: 5px 0; padding: 0 0 0 16px;}
#con16 li::before { 
    content: '・';
    display: block; position: absolute;top: 0; left: 0;}

/**========================================**/
/* 送料（common/item/2024/postage01.html） */
#con8 img { margin: 0 5px; vertical-align: middle;}

#con8 li { position: relative; margin: 5px 0; padding: 0 0 0 18px;}
#con8 li::before { content:'・'; position: absolute; top: 0; left: 0;}

#con8 table { margin: 0 0 10px;}
#con8 th { font-weight: 400; text-align: left;}
#con8 tr:first-of-type th,
#con8 th:first-of-type { background: #e6e6fa; text-align: center;}

#con8 .dis-ilblk { margin: 5px 15px 5px 0;}
/**========================================**/
/* 配送・梱包・納期（ShoppingGuide-modal_07.inc） */
#con9 ul { border: solid #888; border-width: 1px 0 0 1px;}

#con9 li { display: table; table-layout: fixed; width: 100%;}

#con9 li > * { 
    display: table-cell; 
    padding: 5px; 
    border: solid #888; border-width: 0 1px 1px 0; 
    vertical-align: top;}

#con9 li > strong { width: 95px; background: #d6f2ff;}

#con9 .indent { padding: 0 0 0 1em; text-indent: -1em;}

#con9 .dis-tbl { margin: 15px 0; text-align: center;}
#con9 .dis-tbl img { margin: 0 0 5px;}
#con9 .dis-tbl p { display: table-cell; padding: 0 10px; vertical-align: top;}

@media screen and (max-width:699px){
    #con9 li,
    #con9 li > * { display: block;}
    
    #con9 ul,
    #con9 li > * { border: none;}

    #con9 li { margin: 0 0 15px; border: solid #888 1px;}

    #con9 li > strong { width: auto;}
}

/**========================================**/
/* キャンセル・返品・交換 キャンセルについて（ShoppingGuide-modal_08-1.inc） */
#con10 .indent { margin: 5px 0; padding: 0 0 0 1em; text-indent: -1em;}

/**========================================**/
/* キャンセル・返品・交換 返品と商品交換について（ShoppingGuide-modal_08-2.inc） */
#con11 li { position: relative; margin: 5px 0; padding: 0 0 0 16px;}
#con11 li::before { 
    content: '・';
    display: block; position: absolute;top: 0; left: 0;}

#con11 .dis-tbl_tab { width: 100%;}
#con11 .dis-tbl_tab > * {  display: table-cell; padding: 5px; vertical-align: top;}
#con11 .dis-tbl_tab > strong { width: 140px; background: #e6e6fa;}

#con11 .dis-tbl_tab .asterisk { margin: 8px 0 0;}

@media screen and (max-width:699px){
    #con11 .dis-tbl_tab,
    #con11 .dis-tbl_tab > * {  display: block;}
    #con11 .dis-tbl_tab > strong { width: auto;}
}

/**========================================**/
/* 商品ページ内記号について（ShoppingGuide-modal_10.inc） */
#con13 li { margin: 0 0 30px;}

#con13 .fw_b { margin: 0 0 10px;}
#con13 .fw_b img { margin: 0 10px 0 0; vertical-align: middle;}

#con13 .dot { position: relative; padding: 0 0 0 18px;}
#con13 .dot::before { content:'・'; position: absolute; top: 0; left: 0;}

/**========================================**/
/* 商品ページ内記号について（ShoppingGuide-modal_11.inc） */
#con15 a { display: block;}
#con15 a,
#con15 .modalContents > img { margin: 0 0 20px;}

/* LastUp2024.12.04_shinkai */