@charset "utf-8";
/* CSS Document */
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

.navbar-brand i{margin-top:9px}
.navbar-default{background-color:#408ace}
/*.btn-default{background-color:#408ace}*/
.btn-default{background-color:#408ace}
.btn-default:hover{background-color:#56c1e4}
.btn-primary{background:#007fc9}
.btn-primary:hover{background:#19a4ec}
.btn-lg{padding:16px}

.navbar-default .navbar-nav>li>a:focus{color:#FFF}

.red{color:#F00}
.z-error{color:#F00; display:none}

#z-alert{position:fixed; z-index:1025; min-width:250px; max-width:300px; line-height:1.2em; padding:12px; background-color:rgba(255,0,0,0.8); color:#fff; bottom:10%; left:0; right:0; margin:0 auto; text-align:center; border-radius:9px}
#z-loading{position:fixed; width:100%; height:100%; top:0; left:0; background:url(../img/loading.gif) no-repeat center center rgba(0,0,0,0.2); z-index:2001}

.z-mark{position:fixed; width:100%; height:100%; top:0; left:0; z-index:10; background:url(../../img/loading2.gif) no-repeat center center rgba(0,0,0,0.7); display:none}

.z-head{height:45px; margin:0}
.z-head dt{float:right; line-height:45px; font-size:12px}
.z-head dd{float:left}
.z-head h1{height:0; padding-top:45px; width:228px; background:url(../img/logo.png) no-repeat 0 10px / auto 60%; overflow:hidden; margin:0}
/*
.z-login{background:rgba(0, 0, 0, 0) linear-gradient(45deg, #020031 0px, #6d3353 100%); color:#FFF}
*/
/*
.z-login{background-color:#23527c}
.z-login .case{background:url(../img/bg_banner.png) repeat 0 0; padding:0 5px 1.5em; color:#FFF}
.z-login h2{text-align:center}
.z-login .btn{width:45%; margin-top:8px}
.z-login .btn:nth-child(2){float:right}

.z-banner{background-color:#23527c}
.z-banner h2{font-size:2em; color:#FFF}
.z-banner p{color:#FFF}
*/

.singleBox, .radioBox, .checkBox{margin-top:0}
.selectBox label{height:35px; line-height:35px; min-width:102px; display:inline-block; white-space:nowrap; overflow:hidden; padding:0 10px; margin:5px 10px 5px 0; text-align:center; color:#3cb9cf; border:1px solid #3cb9cf; box-sizing:border-box; border-radius:16px}
.selectBox label.act{background-color:#3cb9cf; color:#FFF}
.selectBox label input{display:none}
.selectBox label:last-child{margin-right:0}

.breadcrumb{color:#999}
.breadcrumb .active{color:#333}


.appCase{padding:1em 0}
.appCase h3{background-color:#408ace; color:#FFF; line-height:2.2em; text-align:left; text-indent:0.5em; font-size:18px; border-radius:5px}
#appTable{width:100%; border-collapse:collapse; border:none; border-radius:5px; font-size:16px}
#appTable th{text-align:center; padding:6px; line-height:21px}
#appTable td{border:1px solid #CCC; width:14.28%; line-height:3.2em; color:#999; vertical-align:top}
#appTable thead td{color:#333}
#appTable td.act{background:url(../img/icon_sel.gif) no-repeat right bottom #408ace}
#appTable td a{color:#333; font-weight:bold; background-color:rgba(109,141,211,0.2); display:block; cursor:pointer; text-decoration:none}
#appTable td.td a{background-color:rgba(141,191,69,0.2)}
#appTable td.act a{color:#FFF; font-weight:bold}
.changeMonth{font-size:2em; cursor:pointer}

#appCase3 ul{width:100%; margin:0; padding:0; font-size:16px; overflow:hidden}
#appCase3 ul li{width:23%; margin:0.5em 1%; float:left; list-style:none outside; border:1px solid #CCC; border-radius:5px; line-height:2.5em; cursor:pointer}
#appCase3 ul li.act{background:url(../img/icon_sel.gif) no-repeat right bottom #408ace; color:#FFF}
#appCase3 ul li.dis, #appCase3 ul li.dis2{color:#999; cursor:default}
#reg-form .err{border:1px solid #F00}
#reg-form i {color:#f00; display:inline-block; text-align:center; width:10px}



.app-ui, .app-ai{margin:0; padding:0}
.app-ui li, .app-ui h3, .app-ai li{list-style:outside none; text-align:center}
.app-ui img{width:200px; margin-bottom:1em}
.app-ai a{line-height:2.5em}
.app-ai a.act{background-color:#008acb; color:#FFF; border-radius:3px; display:block}

.app-ai b{color:#333}
.app-ai a.act b{color:#FFF}
.app-ai span{color:#CCC}

.app-photo{width:100%; margin:0 auto; padding:0; font-size:2em; color:#52A2C5; text-align:center; position:relative}
.app-photo li{width:33.3%; height:0; padding-top:33.3%}
.app-photo1 li:nth-child(1){margin-left:200px}
.app-photo1 li:nth-child(2){clear:both}
.app-photo1 li:nth-child(5){margin-left:200px}

.app-photo2 li:nth-child(4){margin-left:100px}

.app-photo3{width:400px; margin:0 auto; padding:0; font-size:2em; color:#52A2C5; text-align:center}
.app-photo3 li{width:200px; height:200px; line-height:200px}

.app-photo li{float:left; list-style:outside none; background:url("/img/none.png") no-repeat center center / contain #FFF; position:relative; overflow:hidden; border:1px solid #CCC}
.app-photo li:after{content:attr(sign); position:absolute; width:100%; height:100%; color:#52A2C5; top:0; left:0; line-height:200px; text-shadow:0 0 2px #FFF}
.app-photo i, #img_HEAD i{position:absolute; left:5px; top:5px; overflow:hidden; cursor:pointer; z-index:2; width:28px; height:28px}
.app-photo i.glyphicon-upload, #img_HEAD i.glyphicon-upload{left:auto; top:5px; right:5px}
#app-photos label, #img_HEAD label{position:absolute; width:100%; height:33px; left:0; top:0; background-color:rgba(0,0,0,0.3); z-index:1}


#img_HEAD{width:100%; max-width:200px; height:200px; margin:0 auto 0.5em; position:relative; font-size:2em; color:#FFF; background:url(../img/avatar.jpg) no-repeat center center / cover; overflow:hidden}

#app-photos i input, #img_HEAD i input{position:absolute; top:0; left:0; cursor:pointer; opacity:0; width:100%; height:100%}
#app-photos img, #img_HEAD img{width:100%; float:left; opacity:0}

#app-imgCase div{width:800px; margin:0 auto; position:relative}
#app-imgCase #img{width:800px; height:800px; display:block; transition:all 0.8s ease-in-out; background:#FFF no-repeat center center / contain}
#app-imgCase ul{position:absolute; left:0; top:0; padding:0; width:100%; background-color:rgba(0,0,0,0.7); display:none}
#app-imgCase ul li{font-size:3em; width:19%; color:#FFF; text-align:center; padding:0.5em 0; cursor:pointer}
#app-imgCase div:hover ul{display:block}

#kounai1_user_OR{background-image:url(/img/ph/OR.png)}
#kounai1_user_OF{background-image:url(/img/ph/OF.png)}
#kounai1_user_OL{background-image:url(/img/ph/OL.png)}
#kounai1_user_MX{background-image:url(/img/ph/MX.png)}
#kounai1_user_MD{background-image:url(/img/ph/MD.png)}
#kounai1_user_OO{background-image:url(/img/ph/OO.png)}
#kounai1_user_J1{background-image:url(/img/ph/J1.png)}
#kounai1_user_J2{background-image:url(/img/ph/J2.png)}

#kounai2_user_OR{background-image:url(/img/ph/OR.png)}
#kounai2_user_OF{background-image:url(/img/ph/OF.png)}
#kounai2_user_OL{background-image:url(/img/ph/OL.png)}
#kounai2_user_MX{background-image:url(/img/ph/MX.png)}
#kounai2_user_MD{background-image:url(/img/ph/MD.png)}

#ganmen_user_FF{background-image:url(/img/ph/FF.png)}
#ganmen_user_FFS{background-image:url(/img/ph/FFS.png)}
#ganmen_user_FL{background-image:url(/img/ph/FL.png)}
#ganmen_user_FLS{background-image:url(/img/ph/FLS.png)}
#ganmen_user_FO{background-image:url(/img/ph/FO.png)}
#ganmen_user_FB{background-image:url(/img/ph/FB.png)}
#ganmen_user_FFM{background-image:url(/img/ph/FFM.png)}
#ganmen_user_FLM{background-image:url(/img/ph/FLM.png)}

#xray_user_PX{background-image:url(/img/ph/PX.png)}
#xray_user_TMJ{background-image:url(/img/ph/TMJ.png)}
#xray_user_CL{background-image:url(/img/ph/CL.png)}
#xray_user_CP{background-image:url(/img/ph/CP.png)}

#btn-chat{position:relative}
#btn-chat span{position:absolute; top:5px; background-color:#F00}

.panel-default > .panel-heading h3{margin:0; font-size:16px}
.panel-default > .panel-heading{
    background-image: -webkit-linear-gradient(top, #4ca0ed 0%, #408ace 100%);
    background-image: -o-linear-gradient(top, #4ca0ed 0%, #408ace 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4ca0ed), to(#408ace));
    background-image: linear-gradient(to bottom, #4ca0ed 0%, #408ace 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4ca0ed', endColorstr='#ff408ace', GradientType=0);
    background-repeat: repeat-x;
    color: #FFF;
}


.z-foot-case{margin-top:3em}
.z-foot{padding:1.5em 0; text-align:center; line-height:1.6em; color:#fff; background-color:#408ace}
.z-foot.act{position:fixed; width:100%; bottom:0; left:0}
.z-foot p{margin:5px 0 0}
.z-foot a{color:#FFF}
.z-foot .lang a{padding:0 6px; color:#FFF}

.hr {
    height: 20px;
    border: none;
    border-top: 1px #000000 solid;
    border-color: lightgray;
}

/*jquery ui*/
.ui-datepicker select.ui-datepicker-year{color:#333; float:left; margin-top:3px}
.ui-datepicker select.ui-datepicker-month{color:#333; float:left; margin-left:3px; margin-top:3px}
.ui-widget-header{color:#333}

.visa-case h4{text-align:center; margin-top:3em}
.visa-case dl{padding:1.5em 1.2em; border-radius:1em; background-color:#eaf5fe; overflow:hidden}
.visa-case dt{width:100px; height:100px; float:left; background:url(../img/card_vis.png) center center / cover}
.visa-case dt.bank{background-image:url(../img/bank.png); height:30px}
.visa-case dd{margin-left:120px; color:#3cb9cf}
.visa-case dd p{margin-bottom:0; line-height:2em}
.visa-case dd p:first-child{font-size:16px}
.visa-case dd a{text-decoration:underline}

.form-item{overflow:hidden; margin-bottom:15px}
.form-item >label{display:block; padding-bottom:5px; line-height:1.42em; font-weight:bold}
.form-item >label i{color:#F00; font-style:normal; padding-left:5px}
.form-item >label span{border-radius:5px; display:inline-block; margin-left:5px; background-color:#999; color:#FFF; font-weight:normal; font-size:10px; padding:0 8px}
.form-item >label span.red{color:#FFF; background-color:#ee4949}
.form-item{margin-bottom:2em}
.form-item .form-item{margin-bottom:0}
.form-item .line{padding:12px 6px 13px; border:1px solid #DFDFDF}

.z-text, .z-sel, .z-textarea{border:1px solid #e4e8ec; height:43px; line-height:43px; font-size:14px; padding:0.3em 0; text-indent:0.5em; width:100%; box-sizing:border-box; font-family:"Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo"; -webkit-appearance:none;}
.z-text:focus, .z-sel:focus, .z-textarea:focus{outline:none}


.q-progress{display:flex; margin:0; padding:0}
.q-progress li{flex:1; margin-right:15px; border:1px solid #CCC; padding:6px; border-radius:7px; list-style:none outside; position:relative; cursor:pointer}
.q-progress li:before{width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid #CCC; position:absolute; right:-10px; top:35%; content:""}
.q-progress li:last-child{margin-right:0}
.q-progress li:last-child:before{display:none}
.q-progress li i{font-size:2em; color:#FFF; float:left; background-color:#CCC; margin:-6px 6px 0 -6px; padding:0 6px; border-radius:7px 0 7px 0}

.q-progress li.active{border-color:#408ace}
.q-progress li.active i{background-color:#408ace}
.q-progress li.active:before{border-left-color:#408ace}
.q-progress li.active:nth-child(1){background-color:rgba(253,0,250, 0.3)}
.q-progress li.active:nth-child(2){background-color:rgba(64,138,206, 0.3)}
.q-progress li.active:nth-child(3){background-color:rgba(114,255,0, 0.3)}
.q-progress li.active:nth-child(4){background-color:rgba(255,255,0, 0.3)}
.q-progress li.active:nth-child(5){background-color:rgba(255,102,0, 0.3)}
.q-progress li.active:nth-child(6){background-color:rgba(255,0,0, 0.5)}


@media (max-width:767px) {
    .q-progress{display:inherit; margin:0 30px}
    .q-progress li{margin-right:0; margin-bottom:15px; min-height:45px}
    .q-progress li:before{transform:rotate(90deg); right:45%; top:inherit; bottom:-15px}

    #btn-group > div{margin-bottom:10px}
}
@media (min-width:768px) and (max-width:991px) {

}

/*Lemin Han*/
.step{display: inline-block;border-radius: 5px;background-color: #fff;margin-bottom: 10px;margin-right:5px;color:#408ace;border: #408ace 3px solid;font-weight: bold;min-width: 100px;}
.step-active{background-color: #408ace;color:#fff;}
.step p{padding: 8px 15px;margin:0;padding-right: 0px;margin-right: -10px;}

.step p::after{
    display: inline-block;
    content:"\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
    background: url('/img/arrow.png') no-repeat center center / contain;
}

.step-active p::after{
    display: inline-block;
    content:"\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
    background: url('/img/arrow_white.png') no-repeat center center / contain;
}

.step-five-tick{
    background: url('/img/tick.png') no-repeat center center / contain; padding-top: 50%;margin: 50px auto 20px; width:100px;
}

.step-five-complete{display: inline-block;border-radius: 5px;background-color: #fff;margin-bottom: 10px;margin-right:5px;color:#408ace;border: #408ace 3px solid;font-weight: bold;min-width: 100px;}
.step-five-complete p{padding: 8px 15px;margin:0;}
/*.container{min-width:420px;}*/
body{
    zoom: 0.95;
}