@charset "utf-8";
/* CSS Document */
/****** pagetitle *****/
#pagetitle>.inner1000{background-image:url("../img/about/reservation/pagetitle_bg.png");}
/****** コンテンツ *****/
#reservation{padding:9vw 0 4vw;}
#reservation h1.cmn+p{margin-bottom:40px; font-size:3.4vw; line-height:1.9; text-align:center;}
/*予約STEP*/
#reservation .all_step{display:flex; flex-wrap:wrap; justify-content:center; margin:20px 0 30px 2vw;}
#reservation .all_step li{width:25vw; height:25vw; margin-right:5vw; padding-top:5vw; box-sizing:border-box; border-radius:100%; background:#f9f5ea; font-size:3.6vw; line-height:1.5; text-align:center; position:relative;}
#reservation .all_step li:after{content:'\f054'; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:5vw; color:#989178; position:absolute; top:46%; right:-4vw;}
#reservation .all_step li:last-child:after{display:none;}
#reservation .all_step li.select{background:#b79628; color:#fff;}
#reservation .all_step li span{width:64%; height:auto; margin:0 auto 1.5vw; border-radius:50px; display:block; font-size:3vw; background:#eae3d1;}
#reservation .all_step li.select span{background:#fff; color:#b79628;}
/*h2*/
#reservation h2{width:100%; height:3.8em; padding:10px 2% 10px 26%; border-bottom:solid 2px #b79628; box-sizing:border-box; color:#b79628; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500; font-size:4vw; line-height:1.3; letter-spacing:0.06em; position:relative;}
#reservation h2 span{width:19%; height:100%; display:block; background:#b79628; color:#fff; font-size:3.4vw; line-height:4.5em; text-align:center; text-indent:0.6em; position:absolute; top:0; left:0;}
#reservation h2 span:after{content:''; width:0; height:0; border-style:solid; border-width:2.25em 0 2.25em 20px; border-color:transparent transparent transparent #b79628; position:absolute; top:0; right:-20px; z-index:1;}
#reservation h2+p{width:90%; margin:20px auto; font-size:3.4vw; line-height:1.9; text-align:justify;}
#reservation .input a.cmn_btn{cursor:pointer;}

/******************************************************/
/** 予約フォーム
/******************************************************/
/*** step01：施術カテゴリ選択 ***/
#reservation .input{}
#reservation .input .step01{width:92%; height:auto; margin:20px auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
#reservation .input .step01 li{width:49%; height:0; border-radius:6px; padding-top:22%; margin-bottom:20px; background:#e4d4a4; transition:all 0.3s ease; position:relative; z-index:0;}
#reservation .input .step01 li a{width:100%; height:97%; border-radius:6px; overflow:hidden; padding:10px 3% 0 3%; display:block; box-sizing:border-box; border:solid 1px #be9f39; background:#fff; color:#be9f39; line-height:1; /*letter-spacing:0.06em;*/ position:absolute; top:0; left:0;}
#reservation .input .step01 li a .catch{display:block; color:#404040; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500; font-size:2.7vw; line-height:1.3; top:1.5vw; text-shadow:#fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;}
#reservation .input .step01 li a b{font-family:"M PLUS Rounded 1c", sans-serif; font-weight:700; font-size:3vw; top:1.5vw; text-shadow:#fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;}
#reservation .input .step01 li a .mini{display:block; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500; font-size:2.7vw; top:2.5vw; left:0; text-shadow:#fff 2px 0px 2px, #fff -2px 0px 2px, #fff 0px -2px 2px, #fff -2px 0px 2px, #fff 2px 2px 2px, #fff -2px 2px 2px, #fff 2px -2px 2px, #fff -2px -2px 2px, #fff 1px 2px 2px, #fff -1px 2px 2px, #fff 1px -2px 2px, #fff -1px -2px 2px, #fff 2px 1px 2px, #fff -2px 1px 2px, #fff 2px -1px 2px, #fff -2px -1px 2px, #fff 1px 1px 2px, #fff -1px 1px 2px, #fff 1px -1px 2px, #fff -1px -1px 2px;}
#reservation .input .step01 li a .catch, #reservation .input .step01 li a b, #reservation .input .step01 li a .mini{z-index:2; position:relative;}
#reservation .input .step01 li a .down{top:3.5vw;}
#reservation .input .step01 li a img{width:49.8%; height:auto; display:block; position:absolute; top:0; right:-4vw; z-index:1;}
#reservation .input .step01 li.tax{background:none; position:relative; padding-top:15%;}
#reservation .input .step01 li.tax p{position:absolute; top:0; left:0; margin:0; font-size:2.8vw; line-height:1.7;}
/*** step02：注意事項確認 ***/
#reservation .input .step02{}
#reservation .input .step02 ul{width:90%; height:auto; margin:auto; padding:0 15px; box-sizing:border-box; border:solid 1px #a2a2a2;}
#reservation .input .step02 ul li{width:100%; height:auto; margin:15px 0; display:flex; flex-wrap:wrap; justify-content:space-between;}
#reservation .input .step02 ul li:before{content:'\f14a'; font-family:"Font Awesome 5 Free"; font-weight:900; color:#d0c08e; width:auto; height:auto; font-size:4.2vw;}
#reservation .input .step02 ul li p{width:94%; margin:0; font-size:3.4vw; line-height:1.6; text-align:justify;}
#reservation .input .step02 ul li p:before{}
#reservation .input .step02 a.cmn_btn:after{content:'\f058';}
/*** step03：入力画面 ***/
#reservation .input .step03{width:90%;height:auto;margin: 20px auto;}
#reservation .input .step03 a.cmn_btn:after{content:'\f058';}
.input .step03 h3{width:100%;height:auto;margin-bottom:10px;padding-bottom:5px;color:#b79628;font-size: 4vw;letter-spacing:0.06em;position:relative;}
.input .step03 h3:before{content:'●';}
.input .step03 dl{display:flex; flex-wrap:wrap; justify-content:space-between;}
.input .step03 dl dt, .input .step03 dl dd{font-size: 3.6vw;line-height: 1.9;padding: 5px 0;}
.input .step03 dl dt{width: 100%;height:auto;}
.input .step03 dl dt:before {content: '[';}
.input .step03 dl dt:after {content: ']';}
.input .step03 dl dd{width: 100%;height:auto;}
.input .step03 dl dd input[type="text"]{width:100%; height:25px;}
.input .step03 dl dd textarea{width:100%; min-height:100px; height:auto;}
.input .step03 dl dd select{width:100%; height:31px;}
.input .step03 dl dd p.attention{margin:2px 0 0; font-size:13px; color:#f55a00;}
.input .step03 dl dd p.attention:before{content:'※';}
.input .step03 .calendar{width:100%; min-height:500px; height:auto; margin:auto; border:solid 1px #aaaaaa; box-sizing:border-box;}
/*ラジオボタン*/
.input .step03 dl dt.label{width:100%;}
.input .step03 dl dd.label{width:100%;}
.input .step03 dl dd.label ul{width:100%; display:flex; flex-wrap:wrap;}
.input .step03 dl dd.label ul li{width:auto; margin:0 26px 10px 0;}
.input .step03 dl dd.label ul li input{display:none;}
.input .step03 dl dd.label ul li input+span{padding-left:20px; position:relative;}
.input .step03 dl dd.label ul li input+span:before{content:""; display:block; position:absolute; top:0; left:0; width:15px; height:15px; border:1px solid #999; border-radius:50%;}
.input .step03 dl dd.label ul li input:checked+span{color:#f55a00;}
.input .step03 dl dd.label ul li input:checked+span:before{border-color:#f55a00;}
.input .step03 dl dd.label ul li input:checked+span:after{content:""; display:block; position:absolute; top:3px; left:3px; width:11px; height:11px; background:#f55a00; border-radius:50%;}
.input .step03 dl dd.label ul li input+span:before, .input .step03 dl dd.label ul li input:checked+span:before, .input .step03 dl dd.label ul li input:checked+span:after{transition:all 0.5s ease;}
.input .step03 dl dd.label ul li input+span, .input .step03 dl dd.label ul li input:checked+span{transition:all 0.3s ease;}
/*お客様への質問事項*/
.input .step03 .question_users{width:100%; height:auto; margin:auto; padding:20px; box-sizing:border-box; border:double 4px #aaaaaa;}
.input .step03 .question_users ul{width:100%;}
.input .step03 .question_users ul li{margin-bottom:10px; padding-left:1.2em; position:relative;}
.input .step03 .question_users ul li:before{content:'\f14a'; font-family:"Font Awesome 5 Free"; font-weight:900; color:#d0c08e; font-size:18px; position:absolute; top:5px; left:0;}
.input .step03 .question_users p{margin:0; font-size:3.4vw; line-height:1.9; text-align:justify;}
.input .step03 .question_users ul+p{margin:20px 0 -5px; color:#b79628; font-size:16px; letter-spacing:0.06em; text-align:center;}
/*** step04：確認画面***/
#reservation .input .step04{}
#reservation .input .step04 dl{width:90%; height:auto; margin:30px auto 0; border-bottom:solid 1px #cec6ae; display:flex; flex-wrap:wrap;}
#reservation .input .step04 dt{width:30%; text-align:center;}
#reservation .input .step04 dd{width:70%; text-align:left;}
#reservation .input .step04 dt, #reservation .input .step04 dd{padding:2.5vw 3vw; border:solid 1px #cec6ae; border-bottom:none; box-sizing:border-box; font-size:3.4vw; line-height:1.5;}
#reservation .input .step04 dd{border-left:none; display:flex; align-items:center;}
#reservation .input .step04 .btn{width:100%; height:auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
#reservation .input .step04 .btn li{width:50%;}
#reservation .input .step04 .btn li:first-child a{}
#reservation .input .step04 .btn li:first-child a:after{content:'\f100'; left:30px; right:inherit;}
/*** step05：完了画面 ***/
#reservation .input .step05{}
#reservation .input .step05 p{width:90%; margin:20px auto; font-size:3.4vw; line-height:1.9; text-align:justify;}
