@charset "UTF-8";
html,body{margin:0;border:0;padding:0;width:100%; height:100%;font-family: -apple-system,BlinkMacSystemFont,arial,HiraKakuProN-W3,Hiragino Kaku Gothic ProN,Hiragino Sans,BIZ UDGothic,Meiryo,sans-serif; background-color:#fff;-webkit-text-size-adjust: 100%;-webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing: grayscale; line-height:1.8;color: #000;}
body{min-width: 1280px;}
*{box-sizing:border-box;}
a{color: #000; text-decoration: none;transition: all .2s ease-in-out;}
a:hover{color: #e4007f}
a:hover img{opacity: 0.8}
h1,h2,h3,h4,h5,p,ul,li,dl,dt,dd{margin:0; padding:0; list-style: none}
table{width:100%;border-collapse:collapse;border-spacing:0;}
th,td{padding:0; margin:0}
img{max-width: 100%;border: 0;-ms-interpolation-mode:bicubic;vertical-align: middle;-webkit-backface-visibility: hidden; user-select: none;pointer-events:none}
input[type="text"],input[type="password"],input[type="email"],select{width:100%; border:1px solid #919191; padding:0 10px; display: flex; align-items: center; line-height: 1;  height:40px; border-radius:3px; font-size: 14px}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,select:focus{outline:none; border:1px solid #e4007f}
input[type="radio"]{accent-color: #4c4c4c;}

select{position: relative; appearance: none; -moz-appearance: none; -webkit-appearance: none; background:url("../img/icon/down_arrow.png") no-repeat right 10px center #fff; background-size:auto 10px; width: auto; padding-right: 30px}
select::-ms-expand { display: none; }

.slick-slider{display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}



.wrap{max-width: 1020px; margin: 0 auto}
.btn{display: flex; align-items: center; justify-content: center; height: 35px; background-color:#7f7f7f; border-radius: 50px; color: #fff; cursor: pointer;transition: all .2s ease-in-out; border: none; font-weight: bold}
.btn:hover{opacity: 0.6}
.btn.pink{background-color:#e4007f}
.btn.red{background-color:#e50000}


#nav{border-bottom: 2px solid #e4007f;border-top: 2px solid #e4007f;}
#nav .wrap{display: flex;}
#nav a{position: relative;color: #000; display: flex; align-items: center; text-align: center; padding:1% 2.5%; font-size: 16px; font-weight: bold; line-height: 1.2;}
#nav a span{position: relative; z-index: 1}
#nav a:before{position: absolute;left: 0; top: 5px; width: 1px; height: calc(100% - 10px); background-color: #9e9e9e;content: "";}
#nav a:first-child:before{display: none}
#nav a:after{position: absolute; background-color:#f7f24d; width: 0; height: 0; left: 50%; top: 50%; border-radius: 100px; content: ""; z-index: 0;transition: all .2s ease-in-out; opacity: 0}
#nav a:hover:after{border-radius: 0; left:1px; top: 0; width:calc(100% - 1px); height: 100%; opacity: 1}
#nav a.active:after{border-radius: 0; left:1px; top: 0; width:calc(100% - 1px); height: 100%; opacity: 1}
#nav a.disable{cursor:default; pointer-events: none; color: #ccc}
#nav a.disable:hover:after{display: none}

#nav h1{display: none}
#notice{background-color: #FFE1E1; }
#notice .wrap{position: relative;max-width: 1020px; margin: 0 auto;}
#notice_contents{padding:3%; padding-bottom:10%}
#notice_contents h2{padding-left:5%; background:url("../img/icon/notice.png") no-repeat left center; background-size:auto 70%; font-size: 24px;}
#notice_contents div p{display: flex; position: relative; border-bottom: 1px solid #999;padding:30px 0 15px 100px;  font-size: 16px; text-align: left; margin-top: 0; line-height: 1.6}
#notice_contents div p:first-child{border-top: 2px solid #999; margin-top: 3%}
#notice_contents div p span{display: block; position: absolute; left: 0; top:30px; }
#notice_contents div p a{text-decoration: underline}
#notice_contents p{text-align: center; margin-top:3.5%}
#notice_contents .notice_btn a{font-weight: bold; background: url("../img/icon/in.png") no-repeat left center; background-size: auto 100%; padding-left:30px; font-size: 18px; line-height: 1}


#page_top_wrap{position:relative; height:0; z-index: 999}

#page_top.absolute{position:absolute; right:0; top:0; left:0}
#page_top.fix{position:fixed; right:0; bottom:0; left:0;  z-index:0}

#page_top span{display:block;cursor: pointer; float:right; padding-top:35px; height:70px; width:70px; font-size:11px; margin-top: -90px; color:#fff; background-color:#21446e; position:relative; border-radius:50%; text-align:center; opacity: 0.5;transition: all .2s ease-in-out;}
#page_top span:before{position:absolute; content:""; left:22px; top:20px; width:20px;height:20px;border-top:3px solid #fff;border-right:3px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
#page_top span:hover{opacity: 1}

#footer .wrap{display:flex; justify-content: space-between; align-items: center; padding: 20px 0}

#footer a{display: block}
#f_logo img{width: 250px}
#f_sns{display: flex;}
#f_sns a:first-child{margin-right: 10px}
#f_sns a img{width: 50px}

.s_item{position: relative; display: flex; flex-direction: column; margin: 0 7px}
.s_item.close:before,.s_item.red:before{position: absolute; width:12%; height:15%; background: url("../img/icon/o_key.png") no-repeat; left:6%; top: 7%; background-size:100% auto; content: ""; z-index: 3}
.s_item.red:before{background: url("../img/icon/r_key.png") no-repeat;background-size:100% auto;}
.s_item a{display: block;box-shadow:0px 3px 10px 0px rgba(0,0,0,0.3);border-radius:10px}
.s_item.disable a{cursor: default; pointer-events: none}
.s_item.disable a img{opacity: 0.6}
.s_item .box{background-color: #fff; }
.s_item.disable a.login{pointer-events:inherit; cursor: pointer}
.s_item .s_key{position: absolute; width:12%; left:5%; top:5%;}
.s_item .login{font-size:20px; font-weight: bold; background-color: #fff; text-align: center; line-height:1.8; margin-top:5%}
.s_item .login:hover{opacity: 0.8}
.s_item .login font{display:flex; width: 100%; height: 100%; align-items: center; justify-content: center}
.slick-list.draggable{position: relative; z-index: 0 !important; padding:10px 30px}

.slick-arrow{display: block;position: absolute; right: 0; top: 10px; height: calc(100% - 20px); border-radius: 10px; border:3px solid #fff;cursor: pointer;background-color: #848484;box-shadow:0px 3px 10px 0px rgba(0,0,0,0.3);}
.slick-arrow:before{position: absolute; width: 100%; height: 100%;  background: url("../img/home/arrow.svg") no-repeat center center; background-size:42% auto;  content: ""; left: 0; top: 0}
.slick-arrow.slick-prev{right: auto; left: 0}
.slick-arrow.slick-prev:before{transform: rotate(180deg); }

.slick-disabled{opacity: 0 !important; pointer-events: none; cursor: default}

.slider{position: relative; display: flex; align-items: center; min-height: 160px}
.loader{position: absolute;width: 48px; height: 48px; left: 0; top: 0; bottom: 0; right: 0; margin: auto; border: 5px solid #eee;border-bottom-color: #e4007f; border-radius: 50%; display:block;
    animation: rotation 1s linear infinite;} 
@keyframes rotation { 0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
} 
.slider .slick-arrow,.slider .slide_contents,.slider .nav_item{opacity: 0; transition: all .2s ease-in-out;}
.slider.active .slick-arrow,.slider.active .slide_contents,.slider.active .nav_item{opacity: 1;}
.slider.active .loader{display: none; opacity: 0}



#s1 .s_item a{border:3px solid #6456a3}
#s1 .s_item .login{color:#453e77 }

#s2 .s_item a{border:3px solid #00975c}
#s2 .s_item .login{color:#00975c }

#s3 .s_item a{border:3px solid #56c4f1}
#s3 .s_item .login{color:#56c4f1 }

#s4 .s_item a{border:3px solid #ff7900}
#s4 .s_item .login{color:#ff7900 }

#s5 .s_item a{border:3px solid #005190}
#s5 .s_item .login{color:#005190 }

#s6 .s_item a{border:3px solid #acce00}
#s6 .s_item .login{color:#acce00 }

#s7 .s_item a{border:3px solid #e75197}
#s7 .s_item .login{color:#e75197 }

.popup{cursor: pointer;}
.popup_contents{background:rgba(0,0,0,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; opacity: 0}
.box_contents{overflow-y: auto}
.popup_contents.active{display: flex !important; opacity: 1}
.popup_contents .box{position: relative; display: flex; font-size: 14px; padding:15px; 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; max-width: 535px;}
.popup_contents h2{border-bottom:2px solid #e4007f; display: flex; height: 80px; font-size: 30px; align-items: center; justify-content: center}
.popup_contents h2 img{margin-right:10px; height:40px}

.member_form,.m_wrap{display: flex; flex-direction: column; width: 485px; padding-bottom: 30px}
.member_form .btn,.m_wrap .btn{min-width: 150px; padding: 0 20px}

.member_form .imt{color:#1E2433;display: block; text-align: right; margin-bottom: 10px}
.member_form .imt font{font-size:10px; color: red; font-weight: bold; padding-right: 5px}
.member_form th,.member_form td{padding:5px 10px}
.member_form th font{font-size:10px; color: red; font-weight: bold;padding-left: 5px}
.member_form th{vertical-align: top; text-align: left; line-height: 40px; width: 120px}
.member_form .btn_area,.m_wrap .btn_area{display: flex; justify-content:center;margin-top:30px;}
.member_form .btn_area.x{justify-content: space-between}
.member_form .s_job input,.member_form td .s_job select{margin-top: 10px}
.member_form label{cursor: pointer; user-select: none; margin-right: 5px; font-size: 12px}
.member_form label:hover{color:#e4007f}
.member_form h4,.member_form h5{text-align: center; font-size: 18px; margin:50px 0 20px 0}
.member_form h5{margin-top: 30px}
.member_form input.s{width:120px}
.member_form input.m{width: 245px}
.selects{border: 1px solid #919191; padding: 10px; height: 100px; width: 252px; overflow-y: auto}
.school_owner{border-bottom: 1px solid #777; padding-bottom: 5px}
.school_types{margin-top: 10px}
.school_types b{display: block; border-bottom: 2px solid #777}
.school_name,.school_year{margin-top: 10px; display: flex; align-items: center}
.school_name span,.school_year span{display: block; margin-left:10px}
.member_form .s_job .school_name input,.member_form .s_job .school_year input{margin-top: 0}
.pw{position: relative;}
.pw input{padding-right:37px}
.pw span{position: absolute; right: 0; top: 0; display: block; width: 40px; height: 40px; background:url(../img/icon/pw_off.png) no-repeat center center; background-size:20px auto; cursor: pointer}
.pw span.active{ background:url(../img/icon/pw_on.png) no-repeat center center;background-size:20px auto;}
.pw_imt{margin-top: 10px}
.pw_imt span{display: block; font-size: 12px;  text-indent: -1em;  padding-left: 1em; line-height: 1; margin-top:10px}
.remind h2{font-size: 24px}
.remind .w{padding:50px 70px 30px 70px}
.remind ul,.remind b{margin: 0 10px}
.remind b{margin-bottom: 10px}
.remind ul li{text-indent: 1em;text-indent: -1em; padding-left: 1em;}
.remind ul li a{color: blue; text-decoration: underline}
.remind .btn_area{margin:30px 70px 0 70px; padding:0 5px}

.remind p{color: #848484; padding: 0 10px; margin-top: 50px}
.remind p b,.m_mail p b,.register p b{display: block; color: #000; font-size:18px; margin:0; margin-bottom:10px}



.register .member_form,#login .member_form{padding: 50px 50px 30px 50px}
.register .member_form p{margin-bottom: 20px}
.register .member_form p font{display: block; line-height: 1.5; margin-top:10px;}
.register .member_form p font font{font-size: 12px}
.register .member_form .btn_area,#login .btn_area{justify-content: space-between; margin-top: 50px;  padding:0 5px}

.register .m_wrap p{margin-top: 50px; padding: 0 10px;}
.register .m_wrap  .btn_area{margin-top: 50px;}

.register_input .member_form{padding:30px 10px }
.register_input .btn_area{margin:30px 70px 0 70px;}
.s_job{display: none}
.s_job.active{display: block; margin-bottom: 10px}

#login .pw{margin-top: 15px}

.member_edit h2{border-bottom: none}
.m_tab{display: flex; justify-content: space-between; border-bottom: 2px solid #e4007f; margin-bottom:20px}
.m_tab span{display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; background-color:#7f7f7f; height: 40px; width: 49%; cursor: pointer; user-select: none; font-size: 16px; border-top-left-radius: 7px; border-top-right-radius:7px;transition: all .2s ease-in-out;}
.m_tab span:hover{background-color:#e4007f}
.m_tab span.active{background-color:#e4007f}

.member_edit .member_form{display: none}
.member_edit .member_form.active{display: flex}

.m_info .btn_area{margin: 0 5px; margin-top: 30px}
.m_info .btn_area.confirm{margin: 0 70px;margin-top: 30px}
.m_mail{padding: 0 70px 30px 70px}
.m_mail.x{padding: 0 10px 30px 10px}
.m_mail p{font-size: 16px; margin-bottom:20px; margin-top: 50px}
.m_mail.x p{margin-top: 30px; margin-bottom: 0}
.m_mail .btn_area{margin-top: 50px}

.unregitser h3{font-size: 20px; text-align: center; margin: 50px 10px}
.unregitser .btn_area{margin:0 70px}
.unregitser h4{margin: 30px 0}
.unregitser h5{text-align: center; font-size: 14px; font-weight: normal; margin-bottom: 50px}

.auto_login h2{font-size: 26px}
.auto_login .btn_area.x{margin:0 60px}
.id_pw{margin:30px 70px}
.id_pw .pw{margin-top: 20px}

.auto_login_edit .btn_area.x{margin:0 5px}
.guest{opacity: 0.5; pointer-events:none}
@media screen and (max-width:640px){
	
	body{min-width: 100%!important; padding-top: 60px}
	
	.sp_fixed {position: fixed; width: 100%; height: 100%;}
	.wrap{max-width: 100%; padding:0 3%; margin: 0 auto}


	#nav{position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-color:#fff; border-top: 0;z-index:9999}
	#nav h1{position: absolute; left: 10px; top: 10px; display: block; line-height: 0}
	#nav h1 a{padding: 0; border-bottom: 0}
	#nav h1 img{height:40px; }
	
	#nav .wrap{position:fixed; width:100%; display:none; height:calc(100% - 60px); left:0; top:60px; flex-direction: column; background-color: rgba(255,255,255,.95); overflow-y: auto; padding: 15px}
  #nav a br,#nav h1 a:after, #top_contens .logout:after{display: none}
	#nav .wrap a{border-bottom: 1px solid #e4007f; padding:15px 0 10px 35px}
	#nav .wrap a:before{position: absolute; left:15px;top: 0; bottom: 0; margin: auto;height: 10px; width: 10px; border:1px solid #e4007f; border-radius:50%;content: ""; display: block; z-index:1; background-color: #fff;transition: all .2s ease-in-out;}
	#nav .wrap a.active:before,#nav .wrap a:hover:before{background-color:#e4007f}
	
	#menu_btn{position: absolute; right: 10px; top: 10px; border: 1px solid #e4007f; border-radius: 3px; width: 40px; height: 40px; cursor: pointer}
	#menu_btn:before,#menu_btn:after{position: absolute; left:7px; width: 24px; height: 2px; background-color:#e4007f; content: "";transition: all .2s ease-in-out;}
	#menu_btn:before{top:10px}
	#menu_btn:after{bottom: 10px}
	#menu_btn b{position: absolute;width: 24px; height: 2px; background-color:#e4007f; left: 0; right: 0; top: 0; bottom: 0; margin: auto;transition: all .2s ease-in-out;}
	
	#menu_btn.active:before{-webkit-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
	#menu_btn.active b{left: -1rem;opacity: 0;}
	#menu_btn.active:after{-webkit-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) rotate(-45deg);}
	
	#notice_contents h2{font-size: 4vw; padding-left:9%}

	#footer .wrap{flex-direction: column; position: relative; padding:10% 0 1.5% 0}
	#f_logo{position: absolute; width:30%; left: 20%; top: 11%}
	#f_logo img,#f_sns a img{width:100%}
	#f_sns{position: absolute; width: 15%; right:20%; top: 11%}
	
	#page_top span{width: 50px; height: 50px; padding-top: 25px; font-size:1.5vw}
	#page_top.absolute{position: fixed; top: auto; bottom: 0}
	#page_top span::before{left: 16px; top: 15px; width: 16px; height: 16px}
	#footer .wrap p{font-size: 2.5vw}
	
	.popup_contents h2{font-size:4.8vw}
	.remind h2{font-size:4.3vw}
	.popup_contents .box,.box_contents{width: 100%}
	
 .register .member_form, #login .member_form{padding:7% 7% 3% 7%}
 .member_form, .m_wrap{width: 100%;}
	.m_tab span{font-size:3.5vw}
	.register .member_form .btn_area, #login .btn_area{margin-top: 10%}
	.remind .btn_area,.register_input .btn_area,.m_info .btn_area.confirm,.m_mail .btn_area{padding: 0; margin: 0;  margin-top: 7%}
	
	.member_form .btn,.m_wrap .btn{min-width:calc((100% - 20px)/2); padding: 0 5%}
	.member_form.m_info .btn{min-width:calc((100% - 20px)/3);}
	.remind .w{padding:7% 0;}
	.m_mail{padding: 0; padding-bottom: 30px}
	.m_mail p{margin-top:5%; margin-bottom:3%}
	.register .m_wrap .btn_area,.register .m_wrap p{margin-top:5%}
	.member_form h4{font-size:3.5vw; margin: 7% 0 0 0;}
	.m_mail.x p{margin-top: 5%}
	.unregitser h3{font-size:3.8vw; margin:10% 0}
	.unregitser .btn_area,.auto_login .btn_area.x{margin: 0}
	.unregitser h5{font-size: 3vw; margin-bottom:7%; margin-top: 5%}
	.auto_login h2{font-size:4.2vw}
	.id_pw{margin: 5% 0}
	
	#auto_login_end .member_form h4,#auto_login_edit_end .member_form h4{margin: 10% 0 0 0}
	#auto_login_edit .member_form .btn{min-width: calc((100% - 20px)/3)}

}
@media screen and (max-width:640px){
	.member_form th, .member_form td{width: 100%; display: block}
}