@charset "utf-8";
/* CSS Document */
/****** pagetitle *****/
#pagetitle>.inner1000{background-image:url("../img/about/reservation/pagetitle_bg.png");}
/****** コンテンツ *****/
#reservation{margin:50px 0;}
#reservation h1.cmn+p{margin-bottom:40px; font-size:15px; line-height:30px; text-align:center;}
/*予約STEP*/
#reservation .all_step{width:100%; height:auto; margin:40px 0 50px; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; z-index:0;}
#reservation .all_step li{width:20%; height:auto; padding:10px 0; border-left:solid 1px; box-sizing:border-box; font-size:15px;text-align:center; position:relative;}
#reservation .all_step li:first-child{border-left:none;}
#reservation .all_step li:after{content:''; width:15px; height:15px; display:block; background:#fff; border:solid; border-width:1px 1px 0 0; transform:rotate(45deg); position:absolute; top:45%; right:-9px; z-index:1;}
#reservation .all_step li:last-child:after{display:none;}
#reservation .all_step li.select{background:#f9f5ea; color:#b79628; border-color:#000;}
#reservation .all_step li.select:after{background:#f9f5ea; border-color:#000;}
#reservation .all_step li span{display:block; width:60%; height:auto; margin:0 auto 10px; padding:5px 0; border:solid 1px; border-radius:50px; font-size:13px;}
#reservation .all_step li.select span{background:#fff; color:#b79628;}
/*h2*/
#reservation h2{width:100%; height:auto; padding:10px 0 10px 15%; border-bottom:solid 2px #b79628; box-sizing:border-box; color:#b79628; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500; font-size:17px; letter-spacing:0.06em; position:relative;}
#reservation h2 span{width:12%; height:100%; display:block; background:#b79628; color:#fff; font-size:15px; line-height:37px; 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:18.5px 0 18.5px 20px; border-color:transparent transparent transparent #b79628; position:absolute; top:0; right:-20px; z-index:1;}
#reservation .input a.cmn_btn{cursor:pointer;}

/******************************************************/
/** 予約フォーム
/******************************************************/
/*** step01：施術カテゴリ選択 ***/
#reservation .input{}
#reservation .input .step01{width:100%; height:auto; margin:25px 0; display:flex; flex-wrap:wrap; justify-content:space-between;}
#reservation .input .step01 li{width:48%; height:110px; border-radius:6px; margin-bottom:26px; background:#e4d4a4; transition:all 0.3s ease;}
#reservation .input .step01 li:hover{transition:all 0.3s ease; opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; -khtml-opacity:0.7; -moz-opacity:0.7; opacity:0.7;}
#reservation .input .step01 li a.btn{width:100%; height:107px; border-radius:6px; overflow:hidden; padding:32px 0 0 54px; display:block; box-sizing:border-box; border:solid 1px #be9f39; background:#fff; color:#be9f39; line-height:1; letter-spacing:0.06em; position:relative; z-index:0;}
#reservation .input .step01 li a:before{content:'>'; position:absolute; top:40px; left:21px; font-size:33px; transform:scale( 0.7 , 1 ); transform-origin:left center;}
#reservation .input .step01 li a .catch{margin-bottom:13px; display:block; color:#404040; font-family:"M PLUS Rounded 1c", sans-serif; font-weight:400; font-size:12px;}
#reservation .input .step01 li a .catch span{display:inline-block!important;}
#reservation .input .step01 li a b{font-family:"M PLUS Rounded 1c", sans-serif; font-weight:500; font-size:24px;}
#reservation .input .step01 li a .mini{font-family:"M PLUS Rounded 1c", sans-serif; font-weight:700; font-size:14px; position:relative; top:-3.5px; left:2px;}
#reservation .input .step01 li a .catch, #reservation .input .step01 li a b, #reservation .input .step01 li a .mini{z-index:2;}
#reservation .input .step01 li a img{width:120px; height:105px; display:block; position:absolute; top:0; right:0; z-index:1; transition:all 0.3s ease;}
#reservation .input .step01 li a:hover img{transform:scale(1.15); transform-origin:center; transition:all 0.3s ease;}
/*** 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:18px; height:18px; font-size:18px;}
#reservation .input .step02 ul li p{width:97%; margin:0; font-size:15px; line-height:1.4; 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:30px 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:18px; 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:16px; line-height:25px; padding:10px 0;}
.input .step03 dl dt{width:20%; height:auto;}
.input .step03 dl dt:before {content: '[';}
.input .step03 dl dt:after {content: ']';}
.input .step03 dl dd{width:80%; 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:15px; line-height:30px; 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; 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:12px; border:solid 1px #cec6ae; border-bottom:none; box-sizing:border-box; font-size:15px;}
#reservation .input .step04 dd{border-left:none;}
#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{font-size:15px; line-height:30px; text-align:center;}