@charset "utf-8";

/* * * Reset * * */
body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, blockquote, pre, table, th, td, form, figure, fieldset, input, textarea{
	margin:0;
	padding:0;
}
img {
	vertical-align: baseline;
}
a img {
	border: none;
}
a{
    color: #e4007f;
}

a:hover{
    color:orange;
}

ol, ul {
  list-style: none;
  list-style-type: none;
}

/* * * Setting * * */
body {
	background: #FFF;
   
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "游ゴシック", "游ゴシック体", "Noto Sans Japanese", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, verdana, sans-serif;

	font-size: 160%;
	color: #000;
	text-align:center;
}

.SP{
	display:none;
}


/* * * general * * */
.inner{
    display: block;
	width:1400px;
	margin:0 auto;
}

#container{
	min-width:1440px;
}


/*** header***/
#header .inner{
    text-align: center;
}
#logo_gakken{
    display: block;
    width:750px;
    margin: 10px auto;
    text-align: right;
}
#header ul{
    display: flex;
    justify-content: center;
}

/*
#header li{
    background: url("../img/menu_before.png");
    background-position: bottom left;
    background-repeat: no-repeat;
    padding: 0 0 0 30px;
    margin: 0 8px;
}
#header li span{
    display: inline-block;
    background: url("../img/menu_after.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    padding: 0 19px 0 0;
}

#header li a{
    display: inline-block;
    background: url("../img/menu_mid.png");
    background-position: bottom left;
    background-repeat: repeat-x;
    color: #000;
    text-decoration: none;
    line-height: 38px;/*46px*/
 /*   padding-top: 8px;
    font-size: 76%;
}

*/




#header li a{
    font-size: 78%;
    border: 1px solid #000;
    border-radius: 50px;
    display: inline-block;
    padding: 0.3em 1em;
    position: relative;
    text-decoration: none;
    color: #000;
    margin: 0 0.5em;
}
#header li a::before{
    content: "　";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: #FFF;
    font-size: 50%;
    position: absolute;
    top:-0.6em;
    left:1.3em;
}
#header li a::after{
    content: "　";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: black;/*背景色*/
    font-size: 50%;
    position: absolute;
    top:-0.6em;
    left:1em;
}
#header li a:hover{
    color: #E4007F;
    /*text-decoration: underline;*/
    border: 1px solid #E4007F;
}

#header li a:hover::after{
    background: #E4007F;/*背景色*/
}



/*** blocks ***/
.blocks{
    margin-bottom: 2em;
}
.blocks h2{
    text-align: center;
}

.blocks p{
	line-height:1.8em;
}


.wrap_white{
    border-radius: 15px;
    border: double #FFF 7px;
    text-align: left;
}
.wrap_white_inner{
    background-color: #FFF;
}



/* --YouTubeサイズ調整-- */

.youtube{
width: 100%;
position: relative;
height: 0;
padding: 0px 0 35.25%;
overflow: hidden;
}


.youtube iframe {
display: block;
  margin: 0 auto;
position: absolute;

left: 20%;
width: 60%;
height: 80%;
}


/** block01 **/
#block01{
}
#block01 h2{
    background:url("../img/dot_pink.png");
    background-position: center center;
    background-repeat: repeat-x;
    margin: 2em 0;
} 
#block01 h2 img{
    background-color:#FFF;
    padding: 5px 30px;
}
#block01 strong{
    color: #e4007f;
    font-size: 150%;
}

#block01_01 p:nth-child(1){
    padding-bottom: 1em;
}
#block01_01 p:nth-child(3){
    font-size: 160%;
}
#block01_01 p:nth-child(3) span{
    display: inline-block;
    background: #000;
    color: #FFF;
    border-radius: 3em;
    padding: 0 3em;
    font-size: 60%;
    line-height: 1.8em;
}




/** block02 困りごと**/
#block02{
    background-color: #facce5;
    padding: 10px 0 2em 0;
}
#block02 .arrow{
    background-color: #FFF;
    margin-top: 2em;
}

#block02 h2{
    background:url("../img/dot_white.png");
    background-position: center center;
    background-repeat: repeat-x;
    margin: 10px 0;
} 
#block02 h2 img{
    background-color:#facce5;
    padding: 10px 20px;
}

/* #block02_01*/
#block02 #block02_01 dl{
    display: flex;
    justify-content: space-around;
}
#block02 #block02_01 dl div{
    padding:10px;
    margin: 1em 0;
}
#block02 #block02_01 dl div:nth-of-type(2){
    border-left:2px dotted #e4007f;
    border-right:2px dotted #e4007f;
}
#block02 #block02_01 dt{
    border-left: 15px solid #000;
    padding-left: 10px;
    margin: 0 0 0.5em 1em;
}

/* #block02_02*/
#block02_02 figure{
    padding-top: 1em;
}
#block02_02 dl{
    padding: 1em 100px;
    margin-top: -150px;
}
#block02_02 dt{
    border-left: 15px solid #000;
    padding-left: 10px;
    font-size: 150%;
}
#block02_02 dd{
    margin-top: 0.5em;
    padding-top: 1em;
    border-top:2px dotted #e4007f;
}
#block02_02 dd p{
    padding-bottom: 1em;
}

/** block03 特長**/
#block03{
    text-align: left;
}
#block03 h2{
    border-bottom: 2px dotted #e4007f;
    margin-top: 1em;
    margin-bottom: 1em;
}
#block03 p{
    padding-bottom: 1em;
}

/*fts01 特長１*/
#fts01{
    display: flex;
}
#fts01 figure{
    padding-right: 1em;
    
}


/*fts_layout 左右のレイアウト*/
.fts_layout{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 30px;
}
.fts_layout div{
    width:640px;
}
.fts_layout figure{
    display: block;
    width:720px;/*効かない*/
    background-color: #facce5;
    padding: 1em 0;
    text-align: center;
}
.fts_layout figcaption{
    font-size: 70%;
    text-align: right;
    padding-right: 2em;
}
.fts_layout h3{
    border-left: 16px solid #e4007f;
    padding-left: 5px;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 150%;
    line-height: 1.3em;
}




/** block04 ニューコースは学校・家庭、**/
#block04{
}
#block04 h2{
    background:url("../img/dot_pink.png");
    background-position: center center;
    background-repeat: repeat-x;
    margin: 2em 0;
} 
#block04 h2 img{
    background-color:#FFF;
    padding: 5px 30px;
}
#block04 ul{
    display: flex;
    width:1240px;
    margin: 0 auto; 
    justify-content: space-between;
}
#block04 li{
    width:23%;
    text-align: center;
}

#block04 ul{
    display: flex;
    width:1240px;
    margin: 0 auto; 
    justify-content: space-between;
}


#block04 .list_type01{
    width:100%;
    text-align: left;
}


#block04 h3{
    margin: 30px 0 -30px 0;
    text-align: center;
}
#block04 h3 span{
    display: inline-block;
    background: #e4007f;
    color: #FFF;
    border-radius: 10em;
    padding: 0 3em;
    border: 3px solid #FFF;
}

#block04 .lrPad{
    padding-left: 60px;
    padding-right: 60px;
}

#block04 .wrap_white{
	color:#000;
    border-radius: 15px;
    border: double #facce5 7px;
    text-align: left;
}
#block04 .wrap_white_inner{
    padding: 2em 1em 1em 1em;
}


#block04_01{
    text-align: left;
    padding: 5px 0 20px;
}

#block04_01 .wrap_white{
	color:#000;
    border-radius: 15px;
    border: double #facce5 7px;
    text-align: left;
}
#block04_01 .wrap_white_inner{
    border-radius: 15px;
    padding: 60px 20px 20px 20px;
}


#block04_01 .lrPad{
    padding-left: 60px;
    padding-right: 60px;
}



#block04_01 h3{
    margin: 30px 0 -30px 0;
    text-align: center;
}
#block04_01 h3 span{
    display: inline-block;
    background: #e4007f;
    color: #FFF;
    border-radius: 10em;
    padding: 0 3em;
    border: 3px solid #FFF;
}

block04_01 ul{
    display: flex;
    width:1240px;
    margin: 0 auto; 
    justify-content: space-between;
}


#block04_01 li{
    width:23%;
    text-align: left;
}




/** block07 ニューコースはさまざまな学校、**/
#block07 {
    text-align: left;
}
#block07 h2{
    background:url("../img/dot_pink.png");
    background-position: center center;
    background-repeat: repeat-x;
    margin: 2em 0;
} 
#block07 h2 img{
    background-color:#FFF;
    padding: 5px 30px;
}
#block07 ul{
    display: flex;
    width:1240px;
    margin: 0 auto; 
    justify-content: space-between;
}

#block07 h3{
    text-align: left;
}

#block07 h3 span{
    display: inline-block;
    background: #e4007f;
    color: #FFF;
    border-radius: 10em;
    padding: 0 3em;
    border: 3px solid #FFF;
}

#block07 .lrPad{
    padding-left: 60px;
    padding-right: 60px;
}


#block07 .wrap_white{
	color:#000;
    border-radius: 15px;
    border: double #facce5 7px;
    text-align: left;
}
#block07 .wrap_white_inner{
    border-radius: 15px;
    padding: 60px 20px 20px 20px;
}

#block07 .fts_layout{
    text-align: left;

}

#block07 .list_type01{
    width:100%;
    text-align: left;
}


#block07 ul{
    display: flex;
    width:1240px;
    margin: 0 auto; 
    justify-content: space-between;
}


#block07 li{
    width:100%;
    text-align: left;
}




/** block05 購入について**/
#block05{
    text-align: left;
    background-color: #facce5;
    padding: 0 0 40px;
}
#block05 .wrap_white_inner{
    padding: 60px 20px 20px 20px;
}
#block05 .lrPad{
    padding-left: 60px;
    padding-right: 60px;
}

#block05 h2{
    background:url("../img/dot_red.png");
    background-position: center center;
    padding: 20px 0;
    line-height: 0;

} 

#block05 h3{
    margin: 30px 0 -30px 0;
    text-align: center;
}
#block05 h3 span{
    display: inline-block;
    background: #000;
    color: #FFF;
    border-radius: 10em;
    padding: 0 3em;
    border: 3px solid #FFF;
}
#block05 h4{
    font-size: 105%;
    padding-bottom: 0.5em;
}
#block05 h5{
    display: inline-block;
    background-color: #EEE;
    border-radius: 5em;
    font-size: 90%;
    margin-top: 0.5em;
    padding: 0.2em 1em;
}

#block05_01{
    display: flex;
    width:1340px;
    margin: 0 auto; 
    justify-content: space-between;
}
#block05_01 li{
    width:23%;
    text-align: left;
}



/** block06 Ｑ＆Ａ**/
#block06{
    text-align: left;
    background-color: #facce5;
    padding: 0 0 40px 0;
}
#block06 h2{
    background:url("../img/dot_red.png");
    padding: 20px 0;
    margin-bottom: 1em;
    line-height: 0;
} 

#block06 dl{
    padding: 0 3em 1em 3em;
}
#block06 dt{
    color: #e4007f;
    font-size: 130%;
    padding-top: 1em;

}
#block06 dt::before{
    content: "Q：";
    font-weight: bold;
}
#block06 dd{
    display: flex;
}
#block06 dd div{
    padding-top: 0.1em;
}
#block06 dd div p{
    line-height: 1.5em;
}
#block06 dd::before{
    content: "A：";
    font-weight: bold;
    font-size: 130%;
}




/** page_top **/
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  /*border-radius: 50%;*/
}
#page_top a{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
  background: gray;
  opacity: 0.6;
}
#page_top a:hover{
  background: #e4007f;/*3fefee*/
  opacity:inherit;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  content: "\f106";
  font-weight: 900;
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}









/*** footer***/
#footer{
}
#footer h2{
    font-size: 80%;
    border-bottom: 1px dotted #e4007f;
    margin-bottom: 3em;
    line-height: 0.2em;
}
#footer h2 span{
    display: inline-block;
    background-color: #e4007f;
    color: #FFF;
    border-radius: 50px;
    padding: 0.5em 2em;
    margin-bottom: -3em;
    line-height: 2em;
    font-weight: normal;
}
#footer h3{
    text-align: left;
    border-left: 20px solid #000;
    padding-left: 15px;
    font-size: 140%;
    margin-bottom: 0.8em;

}
#footer dl{
    background-color: #ddd;
    display: flex;
    justify-content: space-around;
    text-align: left;
    border-radius: 20px;
    padding: 17px;
}
#footer dt{
    width:30%;
    line-height: 1.3em;
}
#footer dd{
    width:65%;
}
#footer dd a, #footer dd span{
    display: block;
    position: relative;
    text-align: center;
    color: #000;
    text-decoration: none;
    font-size: 180%;
    font-weight: bold;
    background-color: #FFF;
    border-radius: 20px;
    line-height: 1.8em;
}
#footer dd a::after{
  font-family: 'Font Awesome 5 Free';
  content: "\f0da";
  font-weight: 900;
  position: absolute;
  right:0.5em;
  top:0;
}
#footer dd a:hover{
    background-color: #fefdaa;
}


#footer #copy{
    margin: 1em 0;
    padding: 0.5em;
}





/*** class ***/
.none{
	display: none;
}
.t1em{
	margin-top:1em;
}
.t2em{
	margin-top:2em;
}
.t3em{
	margin-top:3em;
}

.b1em{
	margin-bottom:1em;
}
.b2em{
	margin-bottom:2em;
}
.b3em{
	margin-bottom:3em;
}

.flex_wrap{
	display: flex;
}

.txt_center{
    text-align: center;
}

.list_type01{
    padding-left: 1em;
    text-indent: -1em;
    padding-bottom: 1em;
    line-height: 1.5em;
}

a.hover80:hover img{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	transition:all 1.0s;
}

/*** ul_type ***/
.ul_type01 li{
	text-indent: -1em;
	padding-left: 1em;
}
.mgt1em{
	margin-top: 1em;
}

.color_blue{
	color: #00a0e9;
}







/*------------------------------------------------------
	mediaQuery
*-------------------------------------------------------*/


@media screen and (max-width: 640px) {
	.SP{
		display:block;
	}
	.PC{
		display:none;
	}


	body{
		font-size:100%;

	}
    
    #container{
        overflow: hidden;
        min-width: inherit;
        width:100%;
        
    }

	.inner{
		width:98%;
		padding:0;
	}

	figure img{
		width:100%;
		height:auto;
	}


    /** SP header **/
    #header h1 img{
 		width:100%;
		height:auto;       
    }

    #logo_gakken{
        display: block;
        width:100%;
    }
    #header ul{
        display: block;
    }
    #header li{
        background: none;
        padding:0;
        margin: 0;
    }
    #header li span{
        display:block;
        background: none;
        padding: 0;
    }
    #header li a{
        display: inline-block;
        background: none;
        color: #000;
        line-height: 3em;
        border: none;
        border-bottom:1px dotted #999;
        border-radius: 0;
        width:100%;
        font-size: 80%;
    }
    #header li a::before{
        content:none;
    }
    #header li a::after{
        content:none;
    }
    #header li a:hover{
        border: none;
        border-bottom:1px dotted #999;
    }


    /** SP blocks **/
    .blocks h2{
        background: none !important;
        border-bottom: 3px dotted #e4007f;
    }
    .blocks h2 img{
 		width:98%;
		height:auto;
        padding: 0 !important;
    }



    .wrap_white{
        width: 94%;
    }

    #block01 h2:nth-of-type(2) img{
        width:52%;
    }
    #block01 h2:nth-of-type(3) img{
        width:95%;
    }    
    
    
    /** SP block02 困りごと**/
    #block02{
    /*    padding: 10px 0;*/
    }
    #block02 .arrow img{
        width:50%;
        height: auto;
    }


    /* #block02_01*/
    #block02 h2{
        border: none;
    }
    #block02 h2 img{
        width: 96%;
    }
    


    #block02 #block02_01 dl{
        display: block;
    }
    #block02 #block02_01 dl div{
        padding:10px;
        margin: 0;
    }
    #block02 #block02_01 dl div:nth-of-type(2){
        border-left:none;
        border-right:none;
        border-top:2px dotted #DDD;
        border-bottom:2px dotted #DDD;
    }
    #block02 #block02_01 dt{
        border-left: 15px solid #000;
        padding-left: 10px;
        margin: 0 0 0.5em 0;
        font-size: 140%;
        line-height: 1.3em;
    }
    #block02 #block02_01 dd figure{
        text-align: center;
    }
    #block02 #block02_01 dd figure img{
        width:90%;
    }
    
    /* #block02_02*/
    #block02_02 figure{
        text-align: center;
    }
    #block02_02 figure img{
        width:96%;
    }
    #block02_02 dl{
        padding: 1em; 
        margin-top:-3em;
    }
    #block02_02 dt{
        font-size: 140%;
        border-left:15px solid;
    }

    /** SP block03 特長**/
    #block03 h2 img{
        width:90%;
    }
    
    /*fts01 特長１*/
    #fts01{
    }

    /*fts_layout 左右のレイアウト*/
    .fts_layout{
        display: block;
        margin-bottom: 5px;
        width:90%;  /*SP_lrsp*/  
    }
    .fts_layout div{
        width:100%;
    }
    .fts_layout figure{
        display: block;
        width:100%;
        /*background-color: #FFF;*/
        text-align: center;
    }
    .fts_layout figure img{
        width:90%;
    }
    .fts_layout figcaption{
        font-size: 80%;
        padding-right: 1em;
    }


    /** SP block04 ニューコースは学校・家庭、**/
    #block04{
    }
    #block04 h2{
        margin: 2em 0 1em;
    } 
    #block04 h2 img{
        width: 88%;
    }
    #block04 ul{
        display: block;
        width:100%;
        margin: 0 auto; 
    }
    #block04 li{
        width:100%;
        margin-top: 1em;
    }
    #block04 li .SP{
        color: #e4007f;
        font-weight: bold;
    }


    /** SP block05 購入について**/
    #block05{
    }
    #block05 .wrap_white_inner{
        padding: 2em 1em 1em 1em;
    }
    #block05 .lrPad{
        padding-left:1em;
        padding-right:1em;
    }

    #block05 h2{
        background-color: #e4007f !important;
        padding: 0.5em 0 0.1em 0;
    } 

    #block05 h3{
        margin: 1em 0 -1em 0;
    }

    #block05_01{
        display: block;
        width:100%;
    }
    #block05_01 li{
        width:100%;
    }
    #block05_01 li .SP{
        color: #e4007f;
        font-weight: bold;
    }


    /** SP block06 Ｑ＆Ａ**/
    #block06{
        padding: 0 0 2em 0;
    }
    #block06 h2{
        background-color: #e4007f !important;
        padding: 0.5em 0 0.1em 0;
    } 
    #block06 h2 img{
        width:30%;
    }

    #block06 dl{
        padding: 0 1em;
    }
    #block06 dt{
        font-size: 140%;
        line-height: 1.3em;
        padding-bottom: 0.2em;
    }



    /*** SP footer***/
    #footer dl{
        display: block;
        padding: 1em;
        border-radius: 0.5em;
    }
    #footer dt{
        width:100%;
    }
    #footer dd{
        width:100%;
        margin-top: 1em;
    }
    #footer dd a, #footer dd span{
        display: block;
        color: #000;
        font-size: 150%;
    }


	.page_top {
		width:18%;
 		right: 1%;
	}

    .SP_lrsp{
        width:90%;  /*SP_lrsp*/      
    
    }
    
    

}

@media screen and (max-width: 750px) and (orientation: landscape) { /*横向きの際に適用*/
	.page_top {
		width:8%;
	}
}