@charset "UTF-8";

/*-------------------------------
	新interactivestudy
    HTML用css

    768px 最小（暫定）

    4:3を基準とし、
    16:9は左右を伸ばす
-------------------------------*/

html,body{
    width:100%;
    height:100%;
}
html{
    color:#444444;
    font-family:Meiryo, sans-serif;
}
body{
    background-color:#EEEEEE;

}
body.login{
    background: linear-gradient(#56A7EA,#56C8C3);
}
.wrapper{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
a{
    text-decoration:none;
}
a:link{}
a:visited{}
a:hover{}
a:active{}

select{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background-image:url(../img/arw_select_down.png);
    background-repeat:no-repeat;
	background-position:right center;
    background-position:right 15px center;

    /* 20190725修正 */
    background-position:right 1em center;
    background-size:1.5vh;
}
select::-ms-expand{
    display:none;
}
select::-ms-value{
    background:none;
    color:#444444;
}

/*　ヘッダー */
header{
    width:100%;
    min-width:768px;
    height:9.7vh;
    background-color:#FFFFFF;
    box-shadow:0px 2px 5px #CCCCCC;
    /*position:absolute;
    top:0;
    left:0;*/
    margin:0;
    padding:0;

}
header > div{
    position:absolute;
    margin:1.4vh 1vw;
}
#header-left{
    top:0;
    left:0;
    display:flex;
    align-items:center;
}
#picture-user{
    width:auto;
    height:6.8vh;
    border-radius:300px;
}
#header-left-name{
    margin-left:10px;
}
#name-user{
    font-size:2.4vh;
    font-weight:bold;
}
#date{
    font-size:1.9vh;
}
#header-center{
    left:50%;
    transform:translate(-50%,0%);
}
#header-center img{
    width:auto;
    height:5.8vh;
}
#header-right{
    top:0;
    right:0;
}
#header-right img{
    width:auto;
    height:6.8vh;
}


/* 各種教材ボタン */
.index-content{
    width:94vw;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
.study-btn{
    width:44vw;
    height:15vh;
    margin-top:3.0vh;
    border:solid 10px #FFFFFF;
    border-radius:5px;
    box-shadow:0px 2px 5px #CCCCCC;
    text-align:center;
}
.study-btn a{
    display:block;
    height:100%;
    position:relative;
}
.study-btn a img{
    transform:translate(-50%,-50%);
    position:absolute;
    top:50%;
    left:50%;
}
.btn-everyone{
    background-color:#04AF7A;
    background-image:repeating-linear-gradient(
    -45deg,#04AF7A,#04AF7A 10px,#1EB788 0,#1EB788 13px
    );
}
.btn-everyone img{
    width:31.6vw;
    height:auto;
}
.btn-print{
    background-color:#006FBC;
    background-image:repeating-linear-gradient(
    -45deg,#006FBC,#006FBC 10px,#1A7EC3 0,#1A7EC3 13px
    );
}
.btn-print img{
    width:17.1vw;
    height:auto;
}
.btn-choice{
    background-color:#F0908A;
    background-image:repeating-linear-gradient(
    -45deg,#F0908A,#F0908A 10px,#F29B96 0,#F29B96 13px
    );
}
.btn-choice img{
    width:31.6vw;
    height:auto;
}
.btn-ganbari{
    background-color:#F5A200;
    background-image:repeating-linear-gradient(
    -45deg,#F5A200,#F5A200 10px,#F6AB1A 0,#F6AB1A 13px
    );
}
.btn-ganbari img{
    width:21vw;
    height:auto;
}
.btn-plan{
    background-color:#93278F;
    background-image:repeating-linear-gradient(
    -45deg,#93278A,#93278A 10px,#9932cc 0,#ba55d3 13px
    );
}
.btn-plan img{
    width:30.5vw;
    height:auto;
}

/* システムからのメッセージ */
#system-info{
    width:100%;
    height:17.5vh;
    background-color:#FFFFFF;
    margin:0 auto;
    margin-top:4.8vh;
    padding:1.9vh 2.9vw;
    border-radius:5px;
}
#info-title{
    font-size:2.3vh;
    font-weight:bold;
}
#info-title img{
    height:2.9vh;
    vertical-align:middle;
    margin-right:10px;
}
#info-msg-space{
    width:100%;
    height:10.7vh;
    box-sizing:border-box;
    margin-top:15px;
    overflow-y:auto;
}
.info-msg{
    width:100%;
    font-size:1.9vh;
    text-align:left;
    background-color:#BAE3F9;
    border-radius:5px;
    box-sizing:border-box;
    padding:20px;
    padding:1.9vh 1.4vw;
    display:flex;
}
.info-msg-date{
    width:16.6vh;
    width:10vh;
    font-weight:bold;
    text-align:right;
    border-right:solid 3px #6BC8F3;
    padding-right:20px;
}
.info-msg-text{
    text-align:left;
    padding-left:20px;
    flex:1;
}


/*-------------------------------
	ログイン画面（login_*.html）
-------------------------------*/

article{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
#login_switch{
    font-size:2.9vh;
    font-weight:bold;
    /*color:#7D828D;*/
    color:#FFFFFF;
    position:fixed;
    top:15px;
    right:20px;
}
@media screen and (max-height:768px) {
    #login_switch{
        font-size:18px;
    }
}
#login_switch img{
    vertical-align:middle;
    width:auto;
    height:4.8vh;
    min-height:30px;
    max-height:50px;
}
/*
#login_switch a:link{color:#7D828D;}
#login_switch a:visited{color:#7D828D;}
#login_switch a:hover{color:#7D828D;}
#login_switch a:active{color:#7D828D;}
*/
#login_switch a:link{color:#FFFFFF;}
#login_switch a:visited{color:#FFFFFF;}
#login_switch a:hover{color:#FFFFFF;}
#login_switch a:active{color:#FFFFFF;}

#wt_box{
    width:47.5vw;
    min-width:487px;
    max-width:650px;
    background-color:#FFFFFF;
    padding:50px 30px;
    padding:4.8vh 2.1vw;
    border-radius:5px;
    box-shadow:0 0 6px -2px black;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
#form_container{
    width:38.7vw;
    min-width:397px;
    max-width:530px;
}
.loginlogo_img{
    width:auto;
    height:9vh;
    min-height:70px;
    max-height:93px;
    margin-bottom:40px;
}
#confirmation_msg{
    font-size:2.9vh; /*30px*/
    margin-bottom:2.9vh  /*30px*/
}
@media screen and (max-height:768px) {
    #confirmation_msg{
        font-size:23px;
    }
}

/* 入力フォーム */
#login_form input[type="text"],
#login_form input[type="password"],
select#login_name,
select#login_grade,
select#login_class{
    height:7vh;
    min-height:53px;
    max-height:72px;
    font-size:2.3vh; /*24px*/
    color:#444444;
    border-radius:5px;
    border:solid 1px #ccc;
    padding:0px 20px;
    box-sizing:border-box;
    margin-bottom:20px;
}
@media screen and (max-height:768px) {
    #login_form input[type="text"],
    #login_form input[type="password"],
    select#login_name,
    select#login_grade,
    select#login_class{
        font-size:18px;
    }
}
#login_form input[type="text"],
#login_form input[type="password"],
select#login_name{
    width:100%;
}
select#login_grade,
select#login_class{
    width:45%;
}
#login_form label{
    font-size:2.9vh;
}
@media screen and (max-height:768px) {
    #login_form label{
        font-size:23px;
    }
}
#login_form input[type="submit"]{
	width:100%;
}
#login_form input[type="button"]{
    width:48%;
}
#login_form input[type="button"],
#login_form input[type="submit"]{
    height:7vh;
    min-height:53px;
    max-height:72px;
    color:#FFFFFF;
    font-size:2.9vh; /*30px*/
    font-weight:bold;
    border-radius:5px;
    border-style:none;
    margin-top:2.9vh; /*30px*/
}
@media screen and (max-height:768px) {
    #login_form input[type="button"],
    #login_form input[type="submit"]{
        font-size:23px;
    }
}
#btn_container{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}
#btn_exit,
#btn_no{
    background-color:#F0908A;
}
#btn_start,
#btn_yes{
    background-color:#6BC8F3;
}

#chk_container{
    margin-top:2.9vh;
}

input[type="checkbox"]{
    width:30px;
    height:30px;
    width:2.9vh;
    height:2.9vh;
    min-width:18px;
    min-height:18px;
    margin-right:10px;
    vertical-align:middle;
}
#chk_container label#keyboard{
    font-size:2.3vh;
}
@media screen and (max-height:768px) {
    #chk_container label#keyboard{
        font-size:18px;
    }
}

/* 入力エラー */
#error_msg{
    font-size:2.3vh;
    color:#C1272D;
    margin-bottom:15px;
}

@media screen and (max-height:768px) {
    #error_msg{
        font-size:18px;
    }
}
.err_box{
    background-color:#F9D1CB;
}

/* ソフトウェアキーボード */
.wrapper #softwarekeyboard{
    background-color:#FFFFFF;
    border-radius:5px;
    box-shadow:0 0 6px -2px black;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:2.5vh;
    padding:4vh;
}
#keyboard_tbl{
    border:solid 1px #CCCCCC;
    border-collapse:collapse;
    text-align:center;
    font-size:2vh;
}
#keyboard_tbl tr,
#keyboard_tbl td{
    border:solid 1px #CCCCCC;
    background:linear-gradient(#FFFFFF,#F4F4F4);
}
#keyboard_tbl tr{
    height:5vh;
    max-height:52px;
    min-height:40px;
}
#keyboard_tbl td{
    width:3.8vw;
    max-width:52px;
    min-width:40px;
}
#keyboard_tbl td.long-key{
    width:12.8vw;
    max-width:175px;
    min-width:131px;
}

/*-------------------------------
	パスワード変更画面（changepassword.html）
-------------------------------*/

.wt_box-chgpw{
    width:93.7vw;
    min-width:720px;
    background-color:#FFFFFF;
    padding:3vh 1.8vw;
    border-radius:5px;
    box-shadow:0 0 6px -2px black;
    position:relative;
    margin-top:20px;
}
.title-chgpw{
    font-size:2.9vh;
    border-bottom:solid 5px #FAD07F;
    padding-left:10px;
    padding-bottom:15px;
    margin-bottom:1.9vh;
}
.title-chgpw img{
    width:4.1vh;
    height:4.1vh;
    vertical-align:middle;
    margin-right:10px;
}
.chgpw_form{
    margin:0 20px;
}
.chgpw_form .chgpw_errmsg-top{
    font-size:2.3vh;
    color:#C1272D;
    margin-bottom:1.4vh;
}
.chgpw_form .chgpw_txtbox_container label{
    width:28vh;
    font-size:2.3vh;
    display:inline-block;
}
.chgpw_form input[type="text"]{
    width:26vw;
    min-width:253px;
    max-width:400px;
    height:6vh;
    min-height:37px;
    max-height:62px;
    font-size:2.3vh;
    color:#444444;
    border-radius:5px;
    border:solid 1px #ccc;
    padding:0 1.4vw;
    box-sizing:border-box;
    margin-bottom:1.9vh;
    display:inline-block;
}
.chgpw_form .chgpw_errmsg-detail{
    /*width:50vh;*/
    font-size:2.3vh;
    display:inline-block;
    color:#C1272D;
    margin-left:15px;
    vertical-align:middle;
}
.chgpw_form .chgpw_errmsg-detail img{
    width:3.9vh;
    min-width:24px;
    max-width:40px;
    vertical-align:middle;
    margin-right:10px;
}
.chgpw_form input[type="button"],
.chgpw_form input[type="submit"]{
    width:14.6vw;
    min-width:113px;
    max-width:200px;
    height:6vh;
    min-height:35px;
    max-height:62px;
    color:#FFFFFF;
    font-size:2.5vh;
    font-weight:bold;
    border-radius:5px;
    border-style:none;
}
.chgpw_form .chgpw_btn_container{
    display:flex;
    justify-content:flex-end;
}
.chgpw_form input[type="button"]{
    background-color:#F0908A;
    margin-right:10px;
}
.chgpw_form input[type="submit"]{
    background-color:#6BC8F3;
}
.chgpw_form .chgpw_chk_container{
    display:flex;
    justify-content:flex-end;
    margin-top:1vh;
}
.chgpw_form .chgpw_chk_container label{
    font-size:2.3vh;
}
.wt_box-chgpw #include-softwarekeyboard{
    display:flex;
    justify-content:center;
}
.wt_box-chgpw #softwarekeyboard{
    margin-top:2.5vh;
}