@charset "utf-8";

/**********************************************/
/*キッズ教室 */
/**********************************************/

/*webフォント　遅延回避*/
html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}

#logo{
	margin: 20px 0 10px;
}


/*******************/
/*トップページ*/
/*******************/
/*ヒーローエリア*/
#hero {
    background-color: #d9f6f9;
    text-align: center;

}

#hero img {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.section01 .contents {
    padding:50px 50px;
}
.col3-wrap{
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 0 auto;
}
.link_btn{
  text-align: center;
	margin-bottom: 20px;
}
.link_btn a{
	width: 100%;
	display: block;
	padding: 5px;
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 3px 3px 10px #999;
	background-image: linear-gradient(to bottom, #7fb75e 0%, #63a436 100%);
}
.link_btn a:hover {
	opacity: 0.8;
}

.btn_center{
	width: 60%;
	margin: 0 auto;
}



/*TOPルビ調整*/
.m5-t{
	margin-top: 5px;
}


/*******************/
/*サブページ*/
/*******************/
/*〇〇時間目：ヘッダー*/
#classbox {
    background-color: #f0e8de;
    padding: 20px 0 30px;
}
/*見出し*/
.class-head {   
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items: center;
}
.class-head .category {
    width: 220px;
    margin-right: 40px;
    display:flex;
    align-items: center;
}
.class-head .category img {
    display: block;
}
.class-head .title {
    width: calc(100% - 260px);
    font-weight: bold;
    line-height:120%;
}



/*サブ見出し*/
.lesson-head {   
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items: flex-end; /*center*/
    margin: 50px 0;
    /*line-height:120%;*/
}
.lesson-head .category {
    width: 80px;
    margin-right: 20px;
    
    display:flex;
    align-items: center;
}
.lesson-head .category img {
    display: block;
}
.lesson-head .title {
    width: calc(100% - 100px);
    font-weight: bold;
    line-height:120%;
    /*font-size: 3.5em;*/
}

    

/*〇〇時間目：ヘッダーイラスト*/
#class01 {
    background: url("../../../everyone/school/img/item01.png") no-repeat right center;
    background-size:contain;
}
#class02 {
    background: url("../../../everyone/school/img/item04.png") no-repeat right center;
    background-size:contain;
}

/*イラスト（えんぴつとか）*/
.illust img {
    max-height: 80px;
    margin: 0 20px;
    vertical-align: middle;
}

/*「？」マーク*/
.question {
    margin: 50px 0;
   text-align: center;
}
.question img {
  max-width: 100px;
}



/*画像*/
figure {
    padding: 0;
    margin:2em 0;
}
.figure img {
    display: block;
}
figcaption {}



/*ページコントロール*/
#pagecontrol {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    align-items: center;
    margin: 50px auto;
	justify-content: center;
	width: 90%;
}
#pagecontrol a {
    color:#617f32;
    text-decoration: none;
    font-weight: bold;
	line-height: 1.2;
}
.prev,.next {
	display: flex;

}
.prev a {
    background: url("../img/last.png") no-repeat left center;
    background-size: 20px;
    padding:1px 1px 1px 30px;
}
.next a {
    background: url("../img/next.png") no-repeat right center;
    background-size: contain;
    padding:1px 30px 1px 1px;
}


@media screen and (min-width: 768px) {
#logo{
	margin-bottom: 0;
}
.col3-wrap{
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
}
.link_btn{
	width: 32%;
}
.prev a {
    background-size: 50px;
    padding:1px 1px 1px 70px;
}
.next a {
    background-size: contain;
    padding:1px 60px 1px 1px;
}	
	
}



/*******************/
/*「２つの気候変動対策」どちらも大事*/
/*******************/
.definition .col {
    padding: 0 40px;
}
.definition dt {
    font-weight: bold;
}
.definition dd {
    margin: 0;
font-size: 1.25em;
}


/****************************/
/*レスポンシブ*/
/****************************/


@media screen and (max-width: 1200px) {
}


@media screen and (max-width: 980px) {
}

/*SP*/
@media screen and (max-width: 768px) {   
    
    #video .contents {
        border-width: 10px;
    }
    #craft .contents {
        border-width: 10px;
    }  


    .section-head .category {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .section-head .category img {
        max-width: 200px;
    }
    .section-head .title {
        width: 100%;
    }
    .section02 .cover .col {
        padding: 0;
        margin-bottom: 30px;
    }



    #classbox {
        padding: 10px 0 20px;
    }
    .class-head .category {
        width: 30%;
        margin-right: 20px;
    }
    .class-head .title {
        width: calc(100% - 20px - 30%);
        line-height: 100%;
    }

    .lesson-head {   
        margin: 20px 0;
    }
    
    .lesson-head .category {
        width: 70px;
        margin-right: 20px;
    }
    .lesson-head .title {
       width: calc(100% - 90px);
    }
    
    #class01 {
        background-image:none;
    }
    #class02 {
        background-image:none;
    }
    .illust img {
        max-height: 40px;
         margin: 0 10px;
        vertical-align: middle;
    }
    
    .definition .col {
        padding: 0 20px;
    }
    .last a {
        background-size:40px;
        padding:2px 1px 2px 50px;
    }
.col2>.col {
    width: 100%;
}
.font-15x{
        font-size: 1rem;
    }
.font-075x{
        font-size: 1rem;
    }
.definition dd {
font-size: 1.25rem;
}
	.lesson-head {   
    align-items: center;
}		
	
	
}

@media screen and (max-width: 520px) {
    

    
    .section-head .category {
        margin-bottom:0px;
    }
    .section-head .category img {
        max-width: 140px;
    }

    
    #classbox {
        padding: 10px 0 20px;
    }
    .class-head .category {
        width: 100%;
        margin-right: 0px;
        margin-bottom:10px;
        text-align: center;
    }
    .class-head .category img {
        max-width: 160px;
        margin: 0 auto;
    }
    .class-head .title {
        width: 100%;
        /*font-size: 2.0em;*/
        text-align: center;
    }

    .lesson-head {   
        margin: 20px 0;
    }
    .lesson-head .category {
        width: 50px;
        margin-right: 10px;
    }
    .lesson-head .title {
       width: calc(100% - 60px);
       /*font-size: 1.75em;*/
    }

    
    .question {
        margin: 30px 0;
    }
    .question img {
        max-width: 70px;
    }
.definition{
    flex-flow: column;
}
	
	
}
@media screen and (max-width: 320px) {

    
    .class-head .category {
        width: 100%;
        margin-right: 0px;
        margin-bottom:10px;
    }
    .class-head .category img {
        max-width: 120px;
    }
    .class-head .title {
        width: 100%;
    }
    
    #pagecontrol a {
        font-size: 0.6em;
    }
}
}