html, body{overflow:visible; }
/*body,h1,h2,h3,h4,h5,h6,td,th,div,p,input,textarea,pre,ul,ol,li,address,header,footer,nav,article,section,aside{
font-family:'メイリオ',"Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo UI',Verdana,'ＭＳ Ｐゴシック',sans-serif;
}*/
/*----------------------------------------------------------------------------
*** ヘッダー
----------------------------------------------------------------------------*/
.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{ max-width:300px; width:50%;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:1em 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; }
.headerBottomBox .addImg{ cursor:pointer;}
.headerBottomBox .addImg p{
font-size: 80%;
border: solid 2px #cfb99a;
padding: 3px 8px 2px;
margin-bottom: 5px;
border-radius: 5px;
color: #a38255;
font-weight: bold;
background-color: #fffaf2;
text-align: center;
}
.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; }
.header .statusBox{ max-width:500px; width:100%; margin:0 0 0 auto; border:1px solid #a38255; box-sizing:border-box; padding:0;}
.header .statusBox dt{ width:12%; background:#a38255; color:#fff; text-align:center;}
.header .statusBox dd{ width:34%; text-align:left;}
.header .statusBox dt,
.header .statusBox dd{ font-size:87.5%; font-weight:normal; padding:0.3em;}
.header .statusBox dd select{ border:none; width:100%; background:none;}
.header .statusBox .admin-memo{ border-top:1px solid #a38255; padding:0.3em 0.3em 0.2em; font-size:87.5%;}
/*----------------------------------------------------------------------------
*** フッター
----------------------------------------------------------------------------*/
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); z-index: 1000;}
.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; width: 100%;}
.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: 70%; padding: 5em 2%; height: 100%;}
.popup-box .addImgListBox{
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
width:100%;
padding: 0 1em;
overflow: auto;
height: 100%;
}
#addImgBox.popup-box .addImgListBox::-webkit-scrollbar {
background: #656565;
width: 8px;
height: 8px;
border-radius: 20px;
cursor: pointer;
}
#addImgBox.popup-box .addImgListBox::-webkit-scrollbar-thumb {
background-color: #FFF;
border-radius: 20px;
}
.popup-box .addImgListBox li{margin-bottom:10%; width: calc(100% / 3); margin: 0 0 2em; padding: 0 1em 1em;}
.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 button{ width: 100%;}
.popup-box .imgBox img{ width:100%;}
.popup-box .imgBox .addImgTxt{width:100%; position:absolute; bottom:0; left:0; resize:none; padding: 3px 5px;}
.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 1.5em; margin:0; line-height:1; border-radius:5px; outline:none; border:none; margin:0 auto; }
.popup-box .addBtnBox .cancelImgSubmit{ padding:0.8em 1.5em;}
#popup_photo_list li p.imgTtl{
margin: 0 0 5px;
line-height: 1.3;
}
#popup_photo_list li .kindStatus{
font-size: 80%;
color: #FFF;
}
#popup_photo_list li p.updatetime{
color: #FFF;
font-weight: initial;
font-size: 90%;
margin: 0 auto 0.5em;
text-align: center;
line-height: 1.2;
}
.popup-box .btnStretch {
width: 2.5em;
height: auto;
display: block;
position: absolute;
bottom: 1em;
right: 1em;
z-index: 9;
}
.popup-box .btnStretch .popup-btn-Stretch{
display: block;
cursor: pointer;
background-image:url(../../images/order/up_img.png);
background-size: cover;
width: 2.4em;
height: 2.4em;
}
.popup-box ul.addImgListBox #newImage{
display: block;
}
.popup-box ul.addImgListBox #addImage{
display: none;
}
.popup-box ul.addImgListBox #addImage button{
background-color: unset;
border: unset;
width: 80%;
margin: auto;
}
@media only screen and (max-width: 1300px){
.popup-box .addImgListBox li{
width: calc(100% / 2);
}
}
@media only screen and (max-width: 1000px){
.popup-box .addImgInBox{
max-width: 85%;
}
}
/* 表示領域、表示方法変更 */
#addImgBox.show-half{
height: 35%;
}
#addImgBox.show-half .btnStretch .popup-btn-Stretch{
background-image:url(../../images/order/down_img.png);
}
#addImgBox.show-half .addImgInBox{
max-width: unset;
padding: 2em 4em 2em 2em;
height: 100%;
}
#addImgBox.show-half #mCSB_1_container{
margin-right: 0;
}
#addImgBox.show-half ul.addImgListBox{
flex-wrap: unset;
overflow-x: auto;
overflow-y: auto;
}
#addImgBox.show-half ul.addImgListBox li{
width: 20%;
min-width: 20%;
margin: 0.5em 0.5em 1em 0.5em;
padding: 0;
position: relative;
}
#addImgBox.show-half ul.addImgListBox li p{
font-size: 100%;
}
#addImgBox.show-half ul.addImgListBox li p.imgBox{
margin: 0 auto;
text-align: center;
width: auto;
height: calc(100% - 50px);
max-height: 100%;
}
#addImgBox.show-half ul.addImgListBox li p.imgBox img {
width: auto;
height: auto;
max-height: 100%;
object-fit: contain;
object-position: 50% 0%;
}
#addImgBox.show-half ul.addImgListBox li p.imgTxt{
display: none;
}
#addImgBox.show-half ul.addImgListBox #newImage{
display: none;
}
#addImgBox.show-half ul.addImgListBox #addImage{
display: block;
}
@media only screen and (max-height: 700px){
#addImgBox.show-half{
height: 35%;
}
}
@media only screen and (max-height: 550px){
#addImgBox.show-half{
height: 30%;
}
}
/*----------------------------------------------------------------------------
*** 決済画面 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 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: no-repeat center right 0.5em #ed1e79;
color: #fff;
padding:0.5em 0;
margin:0.5em auto;
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; }
/* 縲悟�ｨ縺ｦ譌｢隱ｭ縺ｫ縺吶ｋ縲阪�懊ち繝ｳ逕ｨ */
#switch_checked_status_all_area{
margin: 1em;
text-align: center;
}
/* 鬘ｧ螳｢蛛ｴ縺後Γ繝�繧ｻ繝ｼ繧ｸ繧定｡ｨ遉ｺ縺励◆蝣ｴ蜷医�ｮ縲悟�ｨ縺ｦ譌｢隱ｭ縺ｫ縺吶ｋ縲阪�懊ち繝ｳ髱櫁｡ｨ遉ｺ逕ｨ */
.hidden{
display: none;
}
.test{
padding: 5em 5em;
}