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

/* html,body
------------------------------------------------------------- */
html, body{
font-family: '-apple-system', 'BlinkMacSystemFont','Hiragino Sans','Hiragino Kaku Gothic ProN',"segoe ui",'游ゴシック  Medium','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; height: 100%; font-size: 16px; line-height: 1.6; color: #fff; background:#000; overflow: hidden;
}

/*image*/
img{vertical-align: top; -ms-interpolation-mode: bicubic;}
.Logo{background: url(../image/logo.png) no-repeat center / contain; width: 300px; height: 60px;}

/*box*/
.OuterBox{display: flex; justify-content: center; align-items: center; height: 100%; background: no-repeat center;}
.InnerBox{width: 1024px; height: 660px; position: relative;}

/*position*/
.P_relative{position: relative;}
.P_absolute{position: absolute;}

/*color*/
.BG_Default{background: url(../image/bg-default.png) repeat; background-size: 210px 240px;}

/*other*/
.GakkenLOGO{background: url(../image/gakken_logo.png) no-repeat 0 0 / contain; width: 160px; height: 34px; position: absolute; top: 20px; left: 20px;}
.Credit{text-align: center; position: absolute; bottom: 60px; width: 100%; left: 0; font-size: 13px; color: #000;}

/*message*/
.Msg .Logo{margin: 0 auto; width: 250px; height: 50px;}
.Msg .CharaLeft{bottom: 20px; left: -80px; width: 350px; height: 540px;}
.Msg .CharaRight{bottom: 20px; right: -60px; width: 290px; height: 540px;}
.MsgArea{background: url(../image/bg-message.png) no-repeat center / contain; width: 692px; height: 519px; margin: 40px auto;}
.MsgBox{width: 642px; font-size: 22px; line-height: 36px; text-align: center; margin: 0px auto; padding: 120px 0;}
.MsgBox p{color: #ffffff;}
.MsgBox a{color: #ffd81a; text-decoration: none;}

/*footer*/
.Footer{position: fixed; bottom: 0; left: 0; width: 100%; background: url(../image/bg_nav.png) repeat-x; height: 50px;}