@charset "utf-8";
/* CSS Document */

html, body{overflow:visible; }
/*----------------------------------------------------------------------------
***    ヘッダー
----------------------------------------------------------------------------*/
.header{position:-webkit-sticky; position:sticky; top:0; background:#fff; z-index:1; }
.header .headerBox{border-bottom:10px solid #a38255; }
.header .headerInner{margin:0 auto 0; padding:10px 0 0; }
.headerTopBox {display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end; margin-bottom:1em; }
.headerTopBox .navMenu .listBox {display:-webkit-box; display:-ms-flexbox; display:flex; }
.headerTopBox .logoBox{}
.headerTopBox .userBox{padding:0.3em 0 0.3em 1em; margin:0 0 0 1em; border-left:7px solid #a38255; }
.headerTopBox .userBox p{padding:0; line-height:1; }
.headerTopBox .userBox .orderNumber{color:#a38255; margin-bottom:0.5em; }
.headerTopBox .userBox .userName{}
.headerTopBox .paymentBox{margin:0 0 0 auto; }
.headerTopBox .paymentBox p{margin:0; padding:0; }
.headerTopBox .paymentBox p a{background: center right 1em #ed1e79; color:#fff; padding:0.5em 3.5em; margin:0; line-height:1; border-radius:5px; text-align:center; display:block; transition:opacity .3s;}
.headerTopBox .paymentBox p a:hover{ text-decoration:none; opacity:0.6;}
.headerTopBox .paymentBox p a .icoArrow{margin:0 0 0 2em; }

.headerBottomBox{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; }

.header .navMenu .listBox{display:-webkit-box; display:-ms-flexbox; display:flex; }
.header .navMenu .listBox li{border:none; padding:0; margin:0; float:none; }
.header .navMenu .listBox .newMessage{background:#ed1e79; color:#fff; padding:0; margin:0 0 0 auto; display:block; width:1.3em; height:1.3em; border-radius:50%; text-align:center; }
.header .navMenu .listBox a{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; border:1px solid #a38255; border-bottom:0px solid #a38255; color:#a38255; max-width:192px; width:13em; height:2.8em; margin:0 0.5em 0 0; padding:0.3em 0.5em 0em 0.5em; border-radius:7px 7px 0px 0px; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:1rem; }
.header .navMenu .listBox a:hover{ text-decoration:none;}
.header .navMenu .listBox a.open{display:-webkit-box; display:-ms-flexbox; display:flex; background:#a38255; color:#fff; }/*追加修正2020/09/08*/

.header .navMenu .listBox .onImg{display:none; margin:0 0.5em 0 0; }
.header .navMenu .listBox .offImg{display:inline-block; margin:0 0.5em 0 0; }
.header .navMenu .listBox .open .onImg{display:inline-block; }
.header .navMenu .listBox .open .offImg{display:none; }

.header .navMenu .listBox a:hover{background:#a38255; color:#fff; }
.header .navMenu .listBox a:hover .onImg{display:inline-block; }
.header .navMenu .listBox a:hover .offImg{display:none; }


/*----------------------------------------------------------------------------
***   フッター
----------------------------------------------------------------------------*/
footer .footerText {background:#a38255; }


/*----------------------------------------------------------------------------
***   コンテンツ共通スタイル   contents-style
----------------------------------------------------------------------------*/
.contents-style{width:100%; }
.contents-style .top-image{background:#d3c3b2; padding:1em 0 1em; }
.contents-style .top-image .intro{background:none; padding:0; max-width:930px; margin:0 auto; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.contents-style .intro .ttl{font-size:1.35rem; text-align:left; }
.contents-style .intro .edit{padding:0; margin:0; }
.contents-style .intro .edit a{background:#3fa9f5; color:#fff; padding:0.8em 4em; margin:0; line-height:1; border-radius:5px; }


/*----------------------------------------------------------------------------
***   ポップアップ共通スタイル   popup-box
----------------------------------------------------------------------------*/
.popup-box{display:none; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0; z-index:9; text-align:center; background:rgba(0,0,0,0.85); }
.popup-box *{-webkit-box-sizing:border-box; box-sizing:border-box; }
.popup-box p{padding:0; }
.popup-box button{padding:0; margin:0; outline:none; border:none; display:block; cursor:pointer; }
.popup-box .btnClose{width:3em; max-width:42px; height:auto; display:block; position:absolute; top:1em; right:1em; z-index:9; }
.popup-box .popup-in-box{max-width:100%; max-height:100%; display:inline-block; vertical-align:middle; text-align:left; }
.popup-box .addImgInBox{width:100%; max-width: 760px; padding: 5em 2%; overflow-x: auto; }
.popup-box .addImgListBox{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width:100%; padding: 0 0 0em 0; }
.popup-box .addImgListBox li{margin-bottom:10%; width: 47%; }
.popup-box .addImgListBox li:nth-last-child(-n+2){margin-bottom:0; }
.popup-box .imgTtl{color:#fff; text-align:center; font-size:130%; margin-bottom:0.5em; }
.popup-box .imgBox{margin-bottom:1em; position:relative; }
.popup-box .imgBox img{ width:100%;}
.popup-box .imgBox .addImgTxt{width:100%; max-height:4em; min-height:4em; position:absolute; bottom:0; left:0; resize:none; }
.popup-box .imgTxt{color:#fff; font-size:120%; }
.popup-box .addBtnBox{text-align:center; }
.popup-box .addBtnBox .addImgSubmit{background:#ed1e79; color:#fff; font-size:85%; padding:0.8em 3em; margin:0; line-height:1; border-radius:5px; outline:none; border:none; margin:0 auto; }


/*----------------------------------------------------------------------------
***   決済画面   contents-payment
----------------------------------------------------------------------------*/
.contents-payment .container{}
.contents-payment input,
.contents-payment select{ padding:0.5em; font-size:87.5%;}
.contents-payment input::placeholder{ color:#999;}
.contents-payment .selectBox{ width:80%; margin:0 auto 3em;}
.contents-payment .selectBox h3{ text-align:center; padding:0.2rem 0; background:#b79646; color:#FFF; font-size:20px;}
.contents-payment .selectBox ul{ padding:1.5em;}
.contents-payment .selectBox .input-item{ border-bottom:1px dashed #A38255; font-size:112.5%; margin:0 0 1.5em; padding:0 0 2em; line-height:1em;}
.contents-payment .selectBox .input-item:last-child{ margin:0;}
.contents-payment .selectBox input[type="radio"]{ width:1.2em; height:1.2em; margin:0 0.3em 0 0;}
.contents-payment .selectBox .input-item dt{ width:30%; color:#A38255; margin:0 0 0.5em; line-height:2.5em;}
.contents-payment .selectBox .input-item dd{ width:70%;}
.contents-payment .selectBox .input-item dt,
.contents-payment .selectBox .input-item dd{ float:left; font-size:100%;}
.contents-payment .selectBox .input-item dd .attention{ font-size:87.5%; display:block;}
.contents-payment .paymentSec li{ float:left; margin:0 3em 0 0; padding:1em; line-height:1.5em;}
.contents-payment .paymentSec li input{ font-size:112.5%;}
.contents-payment .cardInfoSec .corres-card{ padding:1.5em;}
.contents-payment .cardInfoSec .corres-card dt{ color:#A38255; margin:0 0 0.5em;}
.contents-payment .cardInfoSec .corres-card dd ul{ padding:0;}
.contents-payment .cardInfoSec .corres-card dd li{ width:10%; float:left; margin:0 1em 0 0;}
.contents-payment .cardInfoSec .corres-card dd li:last-child{ margin:0;}
.contents-payment .cardInfoSec label{ line-height:2.5em;}
.contents-payment .cardInfoSec input[type="text"]{ margin:0 0.5em;}
.contents-payment .cardInfoSec input[type="checkbox"]{ width:1.2em; height:1.2em; vertical-align:text-top; margin:0 0.3em 0 0;}

.contents-payment .nextPage{ max-width:500px; margin:2em auto 6em;}
.contents-payment .nextPage li{ width:45%; font-size:125%; font-weight:500; text-align:center;}
.contents-payment .nextPage li a{ display:block;; padding:0.4em 2em; border-radius:10px; transition:all .3s;}
.contents-payment .nextPage li a:hover{ opacity:0.6;}
.contents-payment .nextPage .btn_back{ float:left;}
.contents-payment .nextPage .btn_next{ float:right;}
.contents-payment .nextPage .btn_back a{ border:1px solid #a38255; color:#a38255;}
.contents-payment .nextPage .btn_next a{ background-color:#ed1e79; color:#fff}


/*----------------------------------------------------------------------------
***   完了画面   contents-thanks
----------------------------------------------------------------------------*/
.contents-thanks .container{ padding:4rem 0 !important;}
.contents-thanks h3{ text-align:center; color:#947f28; font-size:2rem; font-family:serif; margin:0 auto 1em;}
.contents-thanks .txtBox p{ text-align:center;}
.contents-thanks .txtBox p a:link,
.contents-thanks .txtBox p a:visited{ color:#a38255;}




/*----------------------------------------------------------------------------
***   注文内容：金額内訳・支払い情報   orderSheetArea
----------------------------------------------------------------------------*/
#orderView{ padding:10rem 0 0;}
.orderSheetArea{ background:#f7e8da; padding:3em 0 6em;}
.orderSheetArea .total-price{ padding:0; margin:0 auto 1em; color:#ed1e79; font-size:125%; font-weight:bold;}
.orderSheetArea .total-price strong{ font-size:200%; color:#000; padding:0 0 0 0.3em;}
.orderSheetArea .total-price span{ font-size:87.5%; color:#000;}
.orderSheetArea .order-sheet{ max-width:930px; margin:0 auto;}
.orderSheetArea .order-sheet .orderBox{ background:#fff; border-radius:10px; padding:1.5em;}
.orderSheetArea .order-sheet .breakdown-info{ border-right:1px dashed #a38255;}
.orderSheetArea .order-sheet .breakdown-info,
.orderSheetArea .order-sheet .paymentBox{ padding:0.5em 1.5em; box-sizing:border-box;}
/* 金額内訳 */
.orderSheetArea .order-sheet .breakdown-info{ width:40%;}
.orderSheetArea .order-sheet .breakdown-info dt{ font-size:112.5%;}
.orderSheetArea .order-sheet .breakdown-info dd li{ color:#4d4d4d; font-size:87.5%; margin:0.5em 0;}
.orderSheetArea .order-sheet .breakdown-info dd li dt{ font-size:112.5%; line-height:2.5em;}
.orderSheetArea .order-sheet .breakdown-info dd li dt span{ display:inline-block; font-size:87.5%; margin:0 0 0 0.5em;}
.orderSheetArea .order-sheet .breakdown-info dd li dd{ font-size:137.5%; font-weight:500; color:#000;}
/* 支払い情報 */
.orderSheetArea .order-sheet .paymentBox{ width:60%;}
.orderSheetArea .order-sheet .payment-info dt{ font-size:112.5%; margin:0;}
.orderSheetArea .order-sheet .selectBox{ width:100%; margin:0 auto;}
.orderSheetArea .order-sheet .selectBox h3{ background:none; color:#ed1e79; font-size:100%; text-align:left; padding:0;}
.orderSheetArea .order-sheet .selectBox .corres-card{ padding:0; margin:0.5em 0 1em;}
.orderSheetArea .order-sheet .selectBox .corres-card dt{ font-size:80%;}
.orderSheetArea .order-sheet .selectBox .corres-card dd li{ width:12%;}
.orderSheetArea .order-sheet .selectBox ul{ padding:0;}
.orderSheetArea .order-sheet .selectBox .input-item{ margin:0.3em 0; padding:0;}
.orderSheetArea .order-sheet .selectBox .input-item dt{ width:30%; font-size:75%; line-height:2.5em; margin:0;}
.orderSheetArea .order-sheet .selectBox .input-item dd{ width:70%; font-size:87.5%;}
.orderSheetArea .order-sheet .selectBox .input-item dd .attention{ line-height:1.2em; margin:0.5em 0; font-size:80%;}
.orderSheetArea .order-sheet .selectBox .input-item:first-child input{ margin:0;}
.orderSheetArea .order-sheet .selectBox .about-list{ margin:1em 0;}
.orderSheetArea .order-sheet .selectBox .about-list dt,
.orderSheetArea .order-sheet .selectBox .about-list dd{ font-size:100%; font-weight:bold; color:#000;}
.orderSheetArea .order-sheet .payment-info .about-list dt{ width:30%;}
.orderSheetArea .order-sheet .noteBox li{ font-size:87.5%; font-weight:bold;}
.orderSheetArea .order-sheet .noteBox .pinkTxt{ color:#ed1e79;}
.orderSheetArea .order-sheet .contents-payment input,
.orderSheetArea .order-sheet .contents-payment select{ padding:0.2em;}
/* 確定ボタン */
.orderSheetArea .payment-info p a{
	display:block;
	width:40%;
	background: center right 0.5em #ed1e79;
    color: #fff;
    padding:0.5em 0;
    margin:0.5em 0;
    line-height:1.2em;
    border-radius:8px;
    text-align:center;
	font-size:150%;
	font-weight:400;
}


/*----------------------------------------------------------------------------
***                                                                    display
----------------------------------------------------------------------------*/
.flex{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; -ms-flex-wrap:wrap; flex-wrap:wrap;}
.dispBlock{display: block;}
.dispInBlock{display: inline-block;}
.dispInFlex{display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;}
.dispFlex{display: -webkit-box; display: -ms-flexbox; display: flex;}
.dispFlexWrap{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.flex-wrap{-ms-flex-wrap:wrap; flex-wrap:wrap;}
.flex-noWrap{-ms-flex-wrap:nowrap; flex-wrap:nowrap;}
.flex-column{-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }
.j-cont-s{-webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; }
.j-cont-l{-webkit-box-pack:left; -ms-flex-pack:left; justify-content:left; }
.j-cont-r{-webkit-box-pack:right; -ms-flex-pack:right; justify-content:right; }
.j-cont-c{-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.j-cont-sb{-webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; }
.j-cont-sa{-ms-flex-pack:distribute; justify-content:space-around; }