@charset "utf-8";

/*common*/
#wrap{position:relative; width:100%;}
#container{padding:40px 20px 150px 20px;}
#content{width:100%; margin:0 auto;text-align: center;}
#footer{position:absolute; left:0; right:0; bottom:30px; }
#footer .copyright{font-size:13px; color:#808080; text-align:center;}

/*font st*/
.font_st_b{font-family:'NotoSansb';}
.font_st_m{font-family:'NotoSansM';}
.font_st_14{font-size: 14px;}
.font_st_16{font-size: 16px;}
.font_st_30{font-size: 30px;}
.font_st_25{font-size: 25px;}
.font_st_22{font-size: 22px;}
.font_st_orange{color:#ff6600;}
.font_st_purple{color:#9591fe;}

/*header*/
#header{background:linear-gradient(45deg, #77b2ff 0%, #9591fe 50%);}
#header h1{font-size:5vw; line-height:5vw; color:#ffffff; width:100%; margin:0 auto; padding:24px 45px; position:relative; box-sizing:border-box; text-align: center;}
#header h1:before{width:5vw; height:5vw; display:inline-block; content:''; background:url('../../images/ico_face_small46.png') no-repeat; background-size:100%; position:absolute; left:20px; top:20px;}

/*content*/
#content .section{margin-top:50px; position:relative;}
#content .section h2{font-size:8vw; text-align:center; margin-bottom:20px;}

/*main*/
#wrap.main #mainvisual{height:50vh; background:url('../../images/bg_main.jpg')  no-repeat, linear-gradient(to left top, #9591fe, #77b2ff); background-size:cover; position:relative;}
#wrap.main #mainvisual .ico_main{width:50vw; height:50vw; position:absolute; left:50%; bottom:50px; transform:translateX(-50%);}
#wrap.main #mainvisual .ico_main span{border:10px solid #ffffff; border-radius:30px; display:block; padding:50px; transition:border-radius 1.5s; box-shadow:0 0 8px #8386ef; }
#wrap.main #container{padding:50px 0 160px 0;}
#wrap.main #container #content .main_title{font-size:10vw; text-align:center; color:#77b2ff;}
#wrap.main #container #content .start{text-align:center; margin-top:20px;}
#wrap.main #footer{position:absolute; left:0; right:0; bottom:50px;}
#wrap.main #footer .copyright{font-size:13px; color:#808080; text-align:center;}

/*step*/
#content .step{height:40px; margin-top:20px; position:relative;}
#content .step ul{position:absolute; left:50%; transform:translateX(-50%);}
#content .step ul:after{display:block; clear:both; content:'';}
#content .step ul li{float:left; position:relative;}
#content .step ul li span{line-height:21px; text-align:center; color:#aaaaaa; width:21px; height:21px; display:inline-block; background:#aaaaaa; border:0 solid #ffffff; border-radius:10px; top:50%; transform:translateY(-50%);} 
#content .step ul li span.now{font-family:'NotoSansB'; font-size:20px; line-height:20px; color:#ffffff; padding:10px; background:#9591fe; border:0px solid #9591fe; border-radius:20px; display:inline-block;}
#content .step ul li + li{margin-left:28px;}
#content .step ul li + li:before{width:20px; height:1px; display:inline-block; content:''; background:#aaaaaa; position:absolute; left:-24px;}

/*consent*/
#content .section .consent{border:1px solid #aaaaaa; border-radius:30px; padding:30px;}
#content .section .consent span{display:block;}
#content .section .consent span + span{margin-top: 10px;}
#content .section .write{margin-top:10px; text-align:center; position: relative;}
#content .section .write div + div{margin-top:10px;}
#content .section .write .fillin{width:100%; margin:10px auto; padding-bottom:50px;}
#content .section .write .fillin p{zoom:1;}
#content .section .write .fillin p:after{display:block; clear:both; content:'';}
#content .section .write .fillin .p_info{width:100%; height:56px; border:3px solid #aaaaaa; padding:0 5%; border-radius:28px; box-sizing:border-box;}
#content .section .write .fillin .p_info input{width:45%; height:50px; line-height:50px; border:0px solid #aaaaaa; text-align:center; background:none;}
#content .section .write .fillin .p_info select{width:45%; height:50px; line-height:50px; border:none; margin-left:0; background:none;}
#content .section .write .fillin .id_number{text-align:center; width:100%; height:56px; line-height:56px; margin-top:10px; padding:10px 0; border:3px solid #aaaaaa; border-radius:28px; box-sizing:border-box;}
#content .section .write .fillin .select{margin-top:10px; position:absolute; left:50%; transform:translateX(-50%); zoom:1; box-sizing:border-box;}
#content .section .write .fillin .select:after{display:block; clear:both; content:'';}
#content .section .write .fillin .select label{display:block; float:left; line-height:24px;}
#content .section .write .fillin .select label + label{margin-left:16px;}

/*check box*/
.cb_st.cb-md i, .cb_st.cb-md .cb-inner{width:24px; height:24px; -moz-border-radius:14px; -webkit-border-radius:14px; border-radius:14px}
.cb_st{padding:3px 0; color:inherit; cursor:pointer; overflow:hidden; font-size:inherit; font-weight:normal; display:inline-block; line-height:18px;}
.cb_st input[type="checkbox"]{display:none}
.cb_st .cb-inner {float:left; overflow:hidden; margin:0 5px 0 0; position:relative; background:#f2f2f2; display:inline-block; border:1px solid #d6d6d6; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; transition:all 0.5s ease;}
.cb_st i {top:1px; left:2px; display:block; position:absolute;}
.cb_st i:before, .cb_st i:after {height:0; width:2px; content:""; display:block; position:absolute; background-color:#fff; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; -webkit-transition:all 0.2s ease; transition:all 0.2s ease;}
.cb_st i:before{top:0; left:0; -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.cb_st i:after{left:7px; bottom:5px; -moz-transition-delay:0.3s; -o-transition-delay:0.3s; -webkit-transition-delay:0.3s; transition-delay:0.3s; -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -webkit-transform:rotate(30deg); transform:rotate(30deg);}
.cb_st.cb-md i:before {top:10px; left:5px}
.cb_st.cb-md i:after {bottom:6px; left:11px}
.cb_st.checked .cb-inner {border-color:#9591fe; background-color:#9591fe}
.cb_st.checked.cb-md i:before {top:10px; left:4px; height:8px;}
.cb_st.checked.cb-md i:after {bottom:6px; left:11px; height:16px;}
.cb_st:hover .cb-inner, .cb-radio:hover .cb-inner {border-color:#9591fe}

/*photo*/
#content .section .preview{width:100%; height:300px; margin:0 auto; background:#f5f5f5; border:0px solid #9591fe; border-radius:30px;}
#content .section .submit{width:100%; margin:10px auto; zoom:1;}
#content .section .submit:after{display:block; clear:both; content:'';}
#content .section .submit .find_photo{width:62%; height:56px; padding:10px; border:3px solid #9591fe; border-radius:28px; box-sizing:border-box; float:left;}
#content .section .submit .file-upload{width:36%;  zoom:1; float:right;}
#content .section .submit .file-upload label{position:relative; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden;}
#content .section .submit .file-upload label input{position:absolute; width:0; height:0; overflow:hidden;}
#content .section .attention{}
#content .section .attention ul{zoom:1;}
#content .section .attention ul:after{display:block; clear:both; content:'';}
#content .section .attention ul li{width:48%; float: left; text-align:center;}
#content .section .attention ul li:nth-child(2n){margin-left:4%;}
#content .section .attention ul li span{display:block; margin-top:10px;}

/* outcome-success&fail */
#wrap.outcome{height:100vh; background:linear-gradient(to left top, #9591fe 0%, #77b2ff 50%);}
#wrap.outcome #container{padding:50px 20px 0px 20px;}
#wrap.outcome #container #content .step{height:40px; position:relative;}
#wrap.outcome #container #content .step ul{position:absolute; left:50%; transform:translateX(-50%);}
#wrap.outcome #container #content .step ul:after{display:block; clear:both; content:'';}
#wrap.outcome #container #content .step ul li{float:left; position:relative;}
#wrap.outcome #container #content .step ul li span{line-height:21px; text-align:center; color:#ffffff; width:21px; height:21px; display:inline-block; background:#ffffff; border:0 solid #ffffff; border-radius:10px; top:50%; transform:translateY(-50%);} 
#wrap.outcome #container #content .step ul li span.now{font-family:'NotoSansB'; font-size:20px; line-height:20px; color:#9591fe; padding:10px; background:#ffffff; border:0px solid #9591fe; border-radius:20px; display:inline-block;}
#wrap.outcome #container #content .step ul li + li{margin-left:28px;}
#wrap.outcome #container #content .step ul li + li:before{width:20px; height:1px; display:inline-block; content:''; background:#ffffff; position:absolute; left:-24px;}
#wrap.outcome #container #content .section h2{font-size:7vw; text-align:center; color:#ffffff; margin-bottom:20px;}
#wrap.outcome #footer .copyright{color:#ffffff;}
#content .section .result{font-size:4vw; text-align:center; width:100%; margin:0 auto; background:#ffffff; padding:50px 30px; box-sizing:border-box; border-radius:30px; box-shadow:0 0 8px #8386ef; }
#content .section .result .ico_result{margin-bottom:15px;}
#content .section .result .action{font-size:3vw; color:#77b2ff; margin-top:41px; position:relative;}
#content .section .result .action:before{width:100px; height:1px; background: #aaaaaa; position:absolute; top:-20px; left:50%; transform:translateX(-50%); content:''; display: block;}
#content .section .result .action span{display: block;}
#content .section .result .action span + span{margin-top:10px;}

/*movepage*/
#content .movepage{width:100%; margin:0 auto; padding-top:50px; zoom:1;}
#content .movepage:after{display:block; clear:both; content:'';}
#content .movepage a{display: block; float: left;}
#content .movepage a + a{margin-left:4%;}

/*button_style*/
.btn_st01{font-family:'NotoSansB'; font-size:5vw; color:#ffffff; text-align:center; height:56px; line-height:50px; width:100%; height:56px; display:block; background:#9591fe; border:0px solid #9591fe; border-radius:28px; float:right;}
.btn_st01:hover, .btn_st01:active, .btn_st01:focus{background:#505050;}
.btn_st02{font-family:'NotoSansB'; font-size:5vw; color:#77b2ff; height:56px; line-height:50px; text-align: center; width:48%; background:#ffffff; border:3px solid #77b2ff; border-radius:28px;}
.btn_st02:hover, .btn_st02:focus{color:#ffffff; background: #77b2ff;}
.btn_st03{font-family:'NotoSansB'; font-size:16px; color:#77b2ff; height:54px; line-height:50px; text-align: center; width:160px; background:#ffffff; border:2px solid #77b2ff; border-radius:27px;}
.btn_st03:hover, .btn_st03:focus{color:#ffffff; background: #77b2ff;}
.btn_st04{font-family:'NotoSansB'; font-size:16px; color:#ffffff; height:54px; line-height:50px; text-align:center; width:160px; background:#77b2ff; border:0px solid #77b2ff; border-radius:27px;}
.btn_st04:hover, .btn_st04:focus{color:#ffffff; background: #9591fe;}