@charset "utf-8";

/* 汎用
----------------------------------------------------*/
/* clear clerfix */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.content:after,
.clearfix:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
    clear: both;
}

/* ログイン画面
----------------------------------------------------------- */
#home #contWrap {
    padding: 50px 0 0 0;
}

#home #contBox {
    width: 800px;
}

#home #contBox h1 {
    margin: 0 auto 50px;
    text-align: center;
}

/* パスワード入力エリア */
#home #logBox2021 {
    background: #dcf4ff url(../img/disc.png) 40px center no-repeat;
    box-shadow: 0 0 0 2px #fff, 0 0 0 12px #dcf4ff;
    padding: 10px;
    margin: 30px 12px 50px;
    height: 185px;
    width: 755px;
    text-align: left;
}

#home #logBox2021 .formBox {
    padding: 18px 0 0 250px;
}

#home #logBox2021 .formBox .logText {
    font-size: 16px;
    line-height: 27px;
}

#logBox2021 input[type=password] {
    width: 350px;
    height: 50px;
    line-height: 45px;
    padding: 5px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 20px;
    border: 1px #00356f solid;
}

#logBox2021 button {
    background: #00356f;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    padding: 12px 25px;
    margin: 0 0 0 7px;
    color: #fff;
    font-size: 16px;
}

#logBox2021 button:hover {
    opacity: 0.8;
}




/* ログイン画面 2025
----------------------------------------------------------- */
#home #logBox2025 {
	background: #dcf4ff;
    box-shadow: 0 0 0 2px #fff, 0 0 0 12px #dcf4ff;
    padding: 10px;
    margin: 30px 12px 50px;
    height: 185px;
    width: 755px;
    text-align: left;
	position: relative;
	display: flex;
	align-items: center;
}

#home #logBox2025 .formBox {
    padding: 18px 0 0 0;
  margin: 0 auto;
}

#home #logBox2025 .formBox .logText {
    font-size: 15px;
    line-height: 27px;
}

#logBox2025 input[type=password] {
    width: 350px;
    height: 50px;
    line-height: 45px;
    padding: 5px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 20px;
    border: 1px #00356f solid;
}

#logBox2025 button {
    background: #00356f;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    padding: 12px 25px;
    margin: 0 0 0 7px;
    color: #fff;
    font-size: 16px;
}

#logBox2025 button:hover {
    opacity: 0.8;
}

#logBox2025 .loginManual{
	position: absolute;
	top: -30px;
	left: 35px;
	z-index: 10;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}



/* デジタル対応教材 */
#digitalBox {
    padding: 20px 65px;
    border: 2px #ccc solid;
    background: #fff;
    margin: 0 0 30px 0;
}

.digitalBox_h2 {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.digitalBox_h2:before,
.digitalBox_h2:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    /* 線の太さ */
    background: #000;
    /* 線の色 */
    margin: 0 1em;
    /* 文字と線の余白 */
}

#digitalBox h2 {
    text-align: center;
    font-size: 18px;
    margin: 0 auto;
}

#digitalBox ul li {
    float: left;
    width: 100px;
    margin: 0 0 10px 10px;
}

#digitalBox ul li img {
    width: 100px;
    height: 100px;
}

.japanese_btn {
    background: url("../img/japanese_btn_h.png") no-repeat center;
    background-size: 99px;
}

.social_btn {
    background: url("../img/social_btn_h.png") no-repeat center;
    background-size: 99px;
}

.mathematics_btn {
    background: url("../img/mathematics_btn_h.png") no-repeat center;
    background-size: 99px;
}

.science_btn {
    background: url("../img/science_btn_h.png") no-repeat center;
    background-size: 99px;
}

.english_btn {
    background: url("../img/english_btn_h.png") no-repeat center;
    background-size: 99px;
}

.music_btn {
    background: url("../img/music_btn_h.png") no-repeat center;
    background-size: 99px;
}

.art_btn {
    background: url("../img/art_btn_h.png") no-repeat center;
    background-size: 99px;
}

.technology_btn {
    background: url("../img/technology_btn_h.png") no-repeat center;
    background-size: 99px;
}

.homeEconomics_btn {
    background: url("../img/homeEconomics_btn_h.png") no-repeat center;
    background-size: 99px;
}

.physicalTraining_btn {
    background: url("../img/physicalTraining_btn_h.png") no-repeat center;
    background-size: 99px;
}

.morality_btn {
    background: url("../img/morality_btn_h.png") no-repeat center;
    background-size: 99px;
}

.etcetera_btn {
    background: url("../img/etcetera_btn_h.png") no-repeat center;
    background-size: 99px;
}

.digiBtn a {
    display: inline-block;
    widows: 100px;
    height: 100px;
}

.digiBtn img {
    width: 100px;
    height: 100px;
}

.digiBtn a:hover img {
    opacity: 0;
}


/* 対応教材一覧 */
#infoBox {
    padding: 20px 65px;
    border: 2px #ccc solid;
    background: #fff;
}

.infoBox_h2 {
    display: flex;
    align-items: center;
}

.infoBox_h2:before,
.infoBox_h2:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    /* 線の太さ */
    background: #000;
    /* 線の色 */
    margin: 0 1em;
    /* 文字と線の余白 */
}

#infoBox h2 {
    text-align: center;
    font-size: 18px;
    margin: 0 auto;
}

#infoBox .materialBox {
    float: left;
    margin-right: 45px;
}

#infoBox h3 {
    height: 45px;
    padding: 0 0 0 47px;
    font-size: 18px;
    font-weight: 550;
    display: table-cell;
    vertical-align: middle;
}

#infoBox .japanese h3 {
    background: url(../img/japanese.png) left center/40% no-repeat;
    color: #778BC2;
}

#infoBox .mathematics h3 {
    background: url(../img/mathematics.png) left center/40% no-repeat;
    color: #DF8A9A;
}

#infoBox .english h3 {
    background: url(../img/english.png) left center/40% no-repeat;
    color: #E59E6B;
}

#infoBox .social h3 {
    background: url(../img/social.png) left center/40% no-repeat;
    color: #9172AB;
}

#infoBox .science h3 {
    background: url(../img/science.png) left center/40% no-repeat;
    color: #E08980;
}

#infoBox .technology h3 {
    background: url(../img/technology.png) left center/30% no-repeat;
    color: #B2C77C;
}

#infoBox .homeEconomics h3 {
    background: url(../img/homeEconomics.png) left center/30% no-repeat;
    color: #95C69A;
}

#infoBox .physicalTraining h3 {
    background: url(../img/physicalTraining.png) left center/30% no-repeat;
    color: #78BDB7;
    padding: 0 0 0 40px;
}

#infoBox .music h3 {
    background: url(../img/music.png) left center/40% no-repeat;
    color: #EDB865;
}

#infoBox .art h3 {
    background: url(../img/art.png) left center/34% no-repeat;
    color: #C7BE6D;
}

#infoBox .morality h3 {
    background: url(../img/morality.png) left center/40% no-repeat;
    color: #73b4c4;
}

#infoBox .etcetera h3 {
    background: url(../img/etcetera.png) left center/33% no-repeat;
    color: #8c8c8c;
    padding: 0 0 0 40px;
}

#infoBox ul {
    margin: 10px 0 10px 0;
}

#infoBox ul li {
    float: left;
    width: 120px;
}

#infoBox ul li:last-child {
    margin: 0 0 15px 0px;
}

#infoBox ul li img {
    width: 120px;
	width: auto;
    height: 122px;
}

#infoBox ul li p {
    font-size: 14px;
    line-height: 18px;
    height: 36px;
    width: 120px;
    margin: 5px 0 0 0;
    text-align: center;
}

#infoBox.y2025 ul{
	display: flex;
	flex-wrap: wrap;
}
#infoBox.y2025 ul li {
    float: none;
    width: 120px;
    margin: 0 0 15px 0px;
}


/* フッター */
#home #footer {
    width: 800px;
    padding: 0px;
    height: 40px;
    margin: 20px auto 30px;
}

#home #footer p.cpright {
    padding-left: 0px;
}