@charset "UTF-8";
/* CSS Document */

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 896px) {
	#page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.EN {ffont-family: 'Raleway', sans-serif;}
.mincho {font-family: 'Noto Serif JP', serif;}

.bgWH {background-color: #FFF;}
.bgBL {background-color: #428BCA;}
.bgGR {background-color: #5AAC5B;}
.bgGRY {background-color: #EEEEEE;}
.bgLBL {background-color: #D9EFFB;}
.txtWH {color: #FFF;}
.txtBL {color: #001976;}
.txtLBL {color: #0092E5;}
.txtGRY {color: #999999;}
.txtDGRY {color: #666666;}
.txtPI {color: #E35E53;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratio1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratio2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratio3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratio4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

main {width: calc(100% - 240px); margin-left: 240px;}
main#login {width: 100%; margin-left: 0;}

#login .container {height: 100vh;}
#login .logo {max-width: 240px; width: 80%;}
#login .logoPeg {max-width: 157px; width: 50%;}
#login .w400 {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);}
.ttlSide {padding: 0 60px;}
.ttlSide::before,.ttlSide::after {position: absolute; content: ''; top: 50%; width: 50px; height: 1px; background: #222;}
.ttlSide::before {left: 0;}
.ttlSide::after {right: 0;}
.login {cursor: pointer; width: 100%; display: block; padding: 13px 10px; margin: 0; border: 1px solid #001976; border-radius: 8px; background: rgb(0,146,229); background: linear-gradient(180deg, rgba(0,146,229) 0%, rgba(0,25,118) 100%); transition: .3s;}
.login:hover {cursor: grab; width: 100%; display: block; padding: 13px 10px; margin: 0; border: 1px solid #001976; border-radius: 8px; background: rgb(0,146,229); background: linear-gradient(0deg, rgba(0,146,229) 0%, rgba(0,25,118) 100%); transition: .3s;}
.login span {padding: 2px 0 0 30px; background: url("../img/icon_login.svg") no-repeat center left; background-size: 20px; line-height: 24px;}
#eye_btn,#eye_btn_confirm {display: block; width: 24px; height: 18px; background: url("../img/login_eye01.svg") no-repeat center right; position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
#eye_btn.eye_appear,#eye_btn_confirm.eye_appear {background: url("../img/login_eye02.svg") no-repeat center right;}

header {width: 240px; height: 100vh; position: fixed; overflow-y: auto; box-shadow: inset -2px 0 3px rgba(0,0,0,.15);}
.logo {padding: 10px 0;}
header .logo {width: 144px; margin: 0 auto;}
@media screen and (max-width: 896px) {
	#hanburger,.spOnly,.menu_button {display: block;}
}

footer {padding: 10px 0; width: calc(100% - 240px); text-align: right; position: fixed; bottom: 0; right: 0; z-index: 10;}
footer.pass {width: 100%;}
footer small {font-size: 14px; line-height: 1.2;}
@media screen and (max-width: 896px) {
	footer {margin-bottom: 50px; padding: 40px 0;}
}

.container {width: calc(100% - 40px); padding-left: 0; padding-right: 0;}
.first {padding-top: 100px;}
.mlr,.container {margin-left: auto; margin-right: auto;}
.mla {margin-left: auto;}
.mra {margin-right: auto;}
.mta {margin-top: auto;}
.mlr5 {margin-left: 5px; margin-right: 5px;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2,.box3 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.box4 {width: calc(25% - 30px); margin-left: 15px; margin-right: 15px;}
.full {width: 100%;}
.half {width: 50%;}
.half-10 {width: calc(50% - 10px);}
.w400 {width: 400px;}
#login .w400 {width: calc(100% - 40px); max-width: 400px;}
.w480 {width: 480px;}
.w300 {max-width: 300px; width: 100%;}
.w270 {max-width: 270px; width: 100%;}
.w240 {max-width: 240px; width: 100%;}
.w230 {width: 230px;}
.w200 {width: 200px;}
.w180 {width: 180px;}
.w170 {width: 170px;}
.w160 {width: 160px;}
.w150 {width: 150px;}
.w140 {width: 140px;}
.w120 {width: 120px;}
.w100 {width: 100px;}
.w80 {width: 80px;}
.w60 {width: 60px;}
.w50 {width: 50px;}
.w46 {width: calc(46% - 50px);}
.w54 {width: calc(54% - 50px);}
.w33 {width: calc(100%/3 - 20px);}
.h240 {height: 240px; overflow-y: auto;}
.r5 {border-radius: 5px;}
.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.mr5 {margin-right: 5px;}
.mlr5 {margin-right: 5px; margin-left: 5px;}
.mlr10 {margin-right: 10px; margin-left: 10px;}
.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr40 {margin-right: 40px;}
.pd10 {padding: 10px;}
.pd15-20 {padding: 15px 20px;}
.pd10-20 {padding: 10px 20px;}
@media screen and (max-width: 896px) {
  .containers {width: calc(100% - 30px);}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {margin-left: 15px; margin-right: 15px;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2,.box3 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
  .w46 {width: calc(46% - 30px);}
  .w54 {width: calc(54% - 30px);}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6,.box3,.w46,.w54 {width: calc(100% - 30px);}
  .mlr5 {margin-left: 5px; margin-right: 5px;}
  .box4 {width: calc(50% - 20px); margin-left: 10px; margin-right: 10px;}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}

button,.acOpen {cursor: pointer;}
.acContents {display: none;}


.ttlBdr {position: relative; border-bottom: 1px solid #0092E5; padding-bottom: 10px; margin-bottom: 20px;}
.ttlBdr::before {position: absolute; content: ''; width: 240px; height: 1px; background: #001976; bottom: -1px; left: 0;}
.ttlGRY {padding: 10px 15px; background: #EEE; margin-bottom: 10px;}
.ttlBdrGRY {padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #999999;}

.btnLBL,.btnBL,.btnGRY,.btnWH {width: 100%; display: block; color: #FFF; text-align: center; padding: 10px 20px; border-radius: 5px!important; line-height: 1.7!important;}
.btnLBL {background: #0092E5; border: 1px solid #0092E5!important;}
.btnLBL:hover {background: #FFF; color: #0092E5;}
.btnBL {background: #428BCA; border: 1px solid #428BCA;}
.btnBL:hover {background: #FFF; color: #428BCA;}
.btnGRY {background: #999999; border: 1px solid #999999;}
.btnGRY:hover {background: #FFF; color: #999999;}
.btnWH {background: #FFF; border: 1px solid #0092E5; color: #0092E5;}
.btnWH:hover {background: #0092E5; color: #FFF;}
.btnBL.w200 {width: 200px; transition: .3s; position: relative; z-index: 1;}
.btnBL.w200 span {padding-right: 24px; position: relative;}
.btnBL.w200 span::before,.btnBL.w200 span::after {position: absolute; content: ''; background: #FFF; top: 50%; transform: translateY(-50%);}
.btnBL.w200 span::before {width: 14px; height: 2px; right: 0;}
.btnBL.w200 span::after {height: 14px; width: 2px; right: 6px;}
.btnBL.w200:hover span::before,.btnBL.w200:hover span::after {background: #001976;}
.btnBL.w200.active span::after {content: none;}


.regist dt {margin-bottom: 5px;}
.regist dd {padding-bottom: 10px; border-bottom: 1px solid #999; margin-bottom: 20px;}