@charset "UTF-8";
html,body{margin:0;border:0;padding:0; height:100%;font-family: -apple-system,BlinkMacSystemFont,Helvetica,arial,HiraKakuProN-W3,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDGothic,Meiryo,sans-serif;-webkit-text-size-adjust: 100%;-webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing: grayscale; font-size:16px;  line-height: 1.8; color: #000;}
.mincho{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
*{box-sizing:border-box;vertical-align: middle;}
img{max-width: 100%;border: 0;-ms-interpolation-mode:bicubic;image-rendering: -webkit-optimize-contrast;}
sup{vertical-align: top;font-size: 12px; line-height:normal}
sub{vertical-align: initial; font-size: 12px; line-height:normal}
body{min-width: 1200px; background-color: #fff}
.wrap{width: 1200px; margin: 0 auto}
.df{display: flex; justify-content: space-between;align-items: center }
.mt15{margin-top:15px}
button{margin: 0; padding: 0}

#header{background-color:#34509e; box-shadow: 0 0 15px rgba(0,0,0,0.5); position: relative;z-index: 9}
#header_top{position: relative;height: 70px}
#logo{position: absolute; left: 0; top: 0; display: flex; align-items: center; height: 100%}
#logo img{height: 40px}

#guide{position: absolute; right: 0; top: 20px; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,0.5);}
#guide img{height: 30px;}
#container{position: relative; display: flex; justify-content: space-between; height:calc(100% - 135px);margin:15px auto; min-height:675px}

#login_page{position: relative;}
#login_page:before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/login_bg.png) no-repeat right bottom;background-size:auto 100%; content: ""}
#login_page #container{justify-content: flex-start;align-items: center; background: url(../img/login_bg_img.png) no-repeat right 350px center;  background-size:25% auto; height: auto; min-height:calc(100% - 105px); margin: 0 auto; padding: 50px 0; padding-left: 20px;}

.error{color:red; display: block; margin-top: 5px; line-height: 1.2}

#login_wrap.hide{display: none}
#login_wrap h1{font-size:22px; line-height: 1; color: #fff;margin:0; margin-bottom: 10px}
#login_wrap .sub_title{margin: 0; margin-bottom: 20px; color: #fff}
.login{border:1px solid #e7e7e7; border-radius:5px;  background-color: rgba(255,255,255,0.75);-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); min-width:400px; user-select: none}

.login input[type=text],.login input[type=password]{width:100%; border:1px solid #AEADAD; padding:5px 10px; line-height:27px; height: 37px; border-radius:3px}

.login h2{ padding:0 20px; margin: 0; margin-top: 20px}
.login h2 span{display: block; line-height:25px; font-size: 20px; border-left:5px solid #000; padding-left: 10px}
.login_form{padding:20px; padding-bottom:15px; position: relative}
.login_form.x{padding-bottom: 20px}
.login_form .error{display: block; font-size: 12px}
#pw{position: relative; margin-top: 15px}
#pw input{padding-right:37px}
#pw span{position: absolute; right: 0; top: 0; display: block; width: 37px; height: 37px; background:url(../img/pw_off.png) no-repeat center center; background-size:20px auto; cursor: pointer}
#pw span.active{ background:url(../img/pw_on.png) no-repeat center center;background-size:20px auto;}
#pw.x{margin-top: 0}

#license_code input[type="text"]{width:167px}

#register_q{max-width:420px}
#register_table{background-color: #eee; padding: 10px; margin-top: 10px; margin-bottom: 15px; display: flex; justify-content: center}
#register_table th{text-align: right; padding-right: 20px}
#register_table td{display: flex; align-items: center}
#register_table td input{width: 80px;margin-right: 5px}
#register_table td i{display: block; position: relative; margin-left:18px}
#register_table td i.t{width:12px; height:7px; margin-top: -5px; border-bottom:2px solid #00B200;border-left:2px solid #00B200;    transform: rotate(-45deg); margin-left: 20px}
#register_table td i.f:before,#register_table td i.f:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:15px; height:2px; background-color:red; content:""; transform:rotate(45deg);}
#register_table td i.f:after{transform:rotate(-45deg);}
#register_q .red{color:red}

.login_form label{display: flex; align-items: center; margin-top: 10px; font-size: 14px; cursor: pointer}
.login_form label input:first-child{margin: 0; margin-right: 10px}
.login_btn_area{position: relative;border-top:1px solid #e7e7e7; background-color:#f5f5f5; padding:10px 0; text-align:center}
.btn{display:inline-block;border: none; border-radius:5px; color:#fff;background-color:#34509e; line-height: 30px; padding:0 30px;font-size:15px; cursor:pointer;-webkit-appearance: none;font-family: -apple-system,BlinkMacSystemFont,Verdana,arial,HiraKakuProN-W3,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDGothic,Meiryo,sans-serif; user-select: none}
.btn:hover{-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out; opacity:.6;filter:alpha(opacity=60);-ms-filter: "alpha( opacity=60)";}
.btn.back{background-color:#555; margin-right: 10px}
.btn.orange{background-color:#F58347;}
.btn.green{background-color:#50b451;}
.login_btn_area a{text-decoration: none;}
.login_right_btn{text-align: right; margin: 20px; margin-top: 0}
.login_etc{display: flex; justify-content:space-between; padding:10px 20px; align-items: center; text-align: center;border: 1px solid #e7e7e7;border-radius: 5px;background-color:#f7f7f7;-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);margin-top:10px}
.login_etc .btn{background-color: #e4007f;text-decoration: none; padding: 0 20px;}
.login_etc.n{padding: 10px}
.login_etc span{display: flex; align-items: center; font-size: 12px;}
.login_etc span:first-child{margin-bottom:5px}
.login_etc.n span:first-child{margin-bottom:0}
.login_etc span font{display: flex; justify-content: center; align-items: center; width:20px; height:20px; background-color:#fff; color: #000;border-radius: 50%; margin-right: 5px; box-shadow: 0 0 2px rgba(0,0,0,0.3)}
.login_etc span i,.login_etc span a{text-decoration: underline; cursor: pointer; font-style: normal; color: #000}


.login_btn_area #rm{font-size: 12px; display: flex; width: 100%; justify-content: center; line-height: 1; text-decoration: underline; margin-top:10px;}
#rm span{display: block; text-align: right}
.login h3{margin: 20px; margin-bottom: 0; font-size:14px; font-weight: normal}
.login h3.x{margin-bottom: 20px}
.login h3 span{display: block; margin-bottom: 10px;}
.login h3.end{width: 400px}
.login p{font-size: 12px; margin: 0; margin-top: 5px; line-height: 1.2}

.popup{text-decoration: underline; cursor: pointer;}
.popup_contents{background:rgba(57,66,87,0.75); z-index:999999; width:100%; height:100%; position:fixed; left:0; top:0; display:none; justify-content: center; align-items: center; padding: 30px}
.popup_contents.active{display: flex !important}

.popup_contents .box{position: relative; display: flex; font-size: 16px; padding:30px; padding-top: 50px; border-radius:10px; background-color:#fff; color: #1E2433; box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3); z-index:9999; max-height: 100%; height: auto}
.popup_contents.column .box{flex-direction: column;}
.popup_contents .box .box_contents{max-width: 750px; overflow: auto; padding-right: 20px}
.popup_contents h2{text-align: center; margin: 0; margin-bottom: 30px}
.popup_contents h2 span {display: inline-block; border-bottom: 2px solid #333;}
.close_btn{position: absolute; display: block; right:10px; top:10px; cursor: pointer;border-radius: 50%;}
.close_btn b{display: block;  width:50px; height:50px; border-radius: 50%; position: relative}
.close_btn b:before,.close_btn b:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 25px; height: 4px; background-color:#000; content:""; transform:rotate(45deg);}
.close_btn b:after{transform:rotate(-45deg);}

.close_btn:hover{opacity: 0.9}
.btn.popup{text-decoration: none}
.popup_contents.column .box .box_contents{overflow: inherit; padding: 0}
.popup_contents.column h2{line-height: 1.2}
.popup_contents.column p{margin-bottom: 30px}
.dots li,.dots,.dots_ul,.dots_ul li{margin: 0; padding: 0}
.dots li,.dots_ul li{position: relative;list-style: none; padding-left:20px;margin-bottom: 10px; line-height: 1.5; text-align: left}
.dots li:before,.dots_ul li:before{position: absolute; left:4px; top:9px; width:5px; height:5px; background-color: #000; border-radius: 50%; content:""}
.dots_ul li{text-align: left}



#footer {position: relative; height:35px; line-height:35px; font-size:12px; text-align: center;background-color:#E9EAEA}
#footer a{position: absolute; right:10px; top:10px; height: 20px;display: block; line-height: 0}
#footer a img{height:15px}
#footer .wrap{position: relative}

#iframe{position: relative; overflow: hidden; width: 100%; padding-top: 56.25%;}
#iframe iframe{position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%; border: 0;}

@keyframes open-menu {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes close-menu {
   0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}



#slide_notice{position: absolute; left: 0; top: 0; display: flex; height: 100%; width: 0; align-items: center; z-index: 99999}
#slide_notice.active{width: 100%}
#slide_notice_wrap{position: relative;padding: 10px 0;background-color: #34509e;;  display: flex; height:400px;transform: translateX(-100%);}
#slide_notice.active #slide_notice_wrap{transform: translateX(0);}
#slide_notice.close #slide_notice_wrap{animation: close-menu 0.3s forwards;}
#slide_notice.open #slide_notice_wrap{animation: open-menu 0.3s forwards;}


#slide_notice .obi{position: absolute; border-bottom-right-radius:10px; border-top-right-radius: 10px; right: -30px; top: 0; display: flex; width: 32px; height: 100%; align-items: center; justify-content: center; writing-mode:vertical-rl;color: #fff; background-color: #34509e; cursor: pointer; z-index: 10}
#slide_notice .obi b{position: relative; padding:30px 0 20px 0; background: url(../img/guide.svg) no-repeat center top; background-size:20px auto; user-select: none}
#slide_notice .obi b:before{position: absolute; left: 0; bottom:0;right: 0; margin: auto; content: "";width: 0;
height: 0;border-style: solid;border-width: 6px 0 6px 12px;border-color: transparent transparent transparent #fff;}
#slide_notice.active .obi b:before{transform: rotate(180deg)}
#slide_notice_wrap div{ padding:20px; padding-bottom: 35px; width: 100%; overflow-y: auto; background-color: #fff}
#slide_notice_wrap .imt{font-size: 12px; text-align: right; width: 100%; position: absolute; left:0; bottom: 10px; background-color: #f1f1f1; padding:3px 10px}


.news ul{padding: 0; margin: 0; list-style: none}
.news li{padding:20px 0 10px 0; border-bottom: 1px solid #ddd; line-height: 1.2}
.news li:first-child{padding-top: 0}
.news li span{display: block; font-size: 12px; color: #555; line-height: 1; margin-bottom:5px}
.news li a{color: #000;}


@media screen and (max-width:1260px){
	#slide_notice{display: none}
}