@charset "UTF-8";

/* 全てのブラウザーで使用 */
html{
 overflow-y: scroll;
}
.all{
	margin:0 auto;
	width:1200px;
	height:auto; /*1100px;*/
   /* border:solid 2px black; */
}

.top{
	
}

.clear {
    clear:both;
}

.back-img0{
	background-image:url(../img/header/header_bg.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:1200px;    /* 横幅のサイズを指定    */
    height:180px;	/* 縦幅のサイズを指定    */
	position:relative;
}

.back-img1{
	background-image:url(../img/header/logo.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:410px;    /* 横幅のサイズを指定    */
    height:122px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:25px;
	top:30px;
}

.back-img2{
	background-image:url(../img/header/home_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:71px;    /* 横幅のサイズを指定    */
    height:17px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:580px;
	top:56px;
}


.back-img2:hover{
	background-image:url(../img/header/home_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */ 
    background-position:bottom;	
	width:71px;    /* 横幅のサイズを指定    */
    height:17px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:580px;
	top:56px;
}

.back-img3{
	background-image:url(../img/header/info_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:91px;    /* 横幅のサイズを指定    */
    height:20px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:750px;
	top:54px;
}

.back-img3:hover{
	background-image:url(../img/header/info_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */ 
    background-position:bottom;
	width:91px;    /* 横幅のサイズを指定    */
    height:20px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:750px;
	top:54px;
}

.back-img4{
	background-image:url(../img/header/koushi_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:169px;    /* 横幅のサイズを指定    */
    height:21px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:930px;
	top:54px;
}

.back-img4:hover{
	background-image:url(../img/header/koushi_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
    background-position:bottom;
	width:169px;    /* 横幅のサイズを指定    */
    height:21px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:930px;
	top:54px;
}


.back-img5{
	background-image:url(../img/header/lesson_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:183px;    /* 横幅のサイズを指定    */
    height:20px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:580px;
	top:99px;
}

.back-img5:hover{
	background-image:url(../img/header/lesson_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */ 
	background-position:bottom;
	width:183px;    /* 横幅のサイズを指定    */
    height:20px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:580px;
	top:99px;
}

.back-img6{
	background-image:url(../img/header/access_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:85px;    /* 横幅のサイズを指定    */
    height:19px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:820px;
	top:99px;
}

.back-img6:hover{
	background-image:url(../img/header/access_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
    background-position:bottom;
	width:85px;    /* 横幅のサイズを指定    */
    height:19px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:820px;
	top:99px;
}

.back-img7{
	background-image:url(../img/header/contact_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:134px;    /* 横幅のサイズを指定    */
    height:20px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:960px;
	top:99px;
}

.back-img7:hover{
	background-image:url(../img/header/contact_onoff.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
    background-position:bottom;
	width:134px;    /* 横幅のサイズを指定    */
    height:20px;	/* 縦幅のサイズを指定    */
	position:absolute;
	left:960px;
	top:99px;
}

.middle1{
	/*display:flex;*/
	width:1200px;
	height:274px;
	position:relative;
}

.back-img8{
	background-image:url(../img/top/piano_left.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:137px;    /* 横幅のサイズを指定    */
    height:274px;	/* 縦幅のサイズを指定    */
    float:left;	
}

.back-color{
	width:926px;    /* 横幅のサイズを指定    */
	height:274px;	/* 縦幅のサイズを指定    */
	background-color:#e30011;
	float:left;	
}

.font{
	width:926px;    /* 横幅のサイズを指定    */
	height:264px;	/* 縦幅のサイズを指定    */
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	background-color:#e30011;
	color:#fad9b3;
	text-align:center;
	line-height:1.8;
	font-size:18px;
	margin-top:8px;  /* スカラ音楽院のテキストが少し上に表示されるのを、マージンで修正  */
	font-weight:bold;
}

.back-img9{
	background-image:url(../img/top/piano_right.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:137px;    /* 横幅のサイズを指定    */
    height:274px;	/* 縦幅のサイズを指定    */
    float:left;	
}




.middle2{
	/*display:flex;*/
	width:1200px;
	height:212px;
	position:relative;
}

.back-img10{
	background-image:url(../img/top/left_note.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:284px;    /* 横幅のサイズを指定    */
    height:212px;	/* 縦幅のサイズを指定    */
	float:left;
    position:relative;
	top:15px;
    left:100px;	
}

.back-img11{
	background-image:url(../img/top/center_note.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:288px;    /* 横幅のサイズを指定    */
    height:219px;	/* 縦幅のサイズを指定    */
    float:left;	
	position:relative;
	top:15px;
	left:160px;
}

.back-img12{
	background-image:url(../img/top/right_note.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:268px;    /* 横幅のサイズを指定    */
    height:213px;	/* 縦幅のサイズを指定    */
	float:left;
    position:relative;
	top:15px;
	left:220px;
}

.back-img12::after{
	clear:both;
}






.middle3{
    position:relative;
	width:1200px;
	/*height:330px;*/

}

.back-img13{
	background-image:url(../img/top/info_note.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:34px;    /* 横幅のサイズを指定    */
    height:51px;	/* 縦幅のサイズを指定    */
    position:relative;
	top:50px;
	left:30px;
}

.back-img14{
	background-image:url(../img/top/info_title.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:105px;    /* 横幅のサイズを指定    */
    height:24px;	/* 縦幅のサイズを指定    */
    position:relative;
	top:15px;
	left:70px;
}

.back-img15{
	background-image:url(../img/top/more.png);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:71px;    /* 横幅のサイズを指定    */
    height:14px;	/* 縦幅のサイズを指定    */
    position:relative;
	top:0px;
	left:1040px;
	z-index:10;
}

.keisen{
	border-bottom:solid 2px #e30011;
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:1070px;    /* 横幅のサイズを指定    */
    height:13px;	/* 縦幅のサイズを指定    */
    position:relative;
	bottom:10px;
	left:53px;
}

#case3{
	width: 85%;
	margin: 20px auto;
	
}

.information{
	clear:both;
	float:none;
}
.info-date-box{
	width:100px;    /* 横幅のサイズを指定    */
    height:auto;	/* 縦幅のサイズを指定    */
	line-height:1.5em;
	background-color:#007d3f;
	float:left;
}
.info-title-box{
    height:auto;	/* 縦幅のサイズを指定    */
	line-height:1.5em;
	float:left;
}

.info-date{
	color:white;
	margin:0 10px;

}
.info-title{
	font-weight:bold;
	margin:0 20px;
}
.info-cont{
	margin: 10px;
	margin-left :120px;
	margin-bottom :30px;
}

.middle4{
	position:relative;
	width:1200px;
	height:230px;
}

.middle4-img1{
	background-image:url(../img/top/top_matsui_teacher.jpg);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
	width:390px;    /* 横幅のサイズを指定    */
    height:195px;	/* 縦幅のサイズを指定    */
	float:left;
    position:relative;
	top:15px;
	left:30px;
}
.middle4-img2{
	background-image:url(../img/top/top_zentai.jpg);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:390px;    /* 横幅のサイズを指定    */
    height:195px;	/* 縦幅のサイズを指定    */
	float:left;
    position:relative;
	top:15px;
	left:0px;
}
.middle4-img3{
	background-image:url(../img/top/top_okada_teacher.jpg);             /* 画像のURLを指定       */
    background-repeat:  no-repeat;   	/* 画像の繰り返しを指定  */              
   /* background-size:100% 100%; */
	width:390px;    /* 横幅のサイズを指定    */
    height:195px;	/* 縦幅のサイズを指定    */
	float:left;
    position:relative;
	top:15px;
	left:0px;	
}

.hiduke1{
	width:100px;    /* 横幅のサイズを指定    */
    height:auto;	/* 縦幅のサイズを指定    */
	line-height:1.5;
	background-color:#007d3f;
	color:white;
	float:left;
	position:relative;
	top:10px;
	left:55px;
}

.number1{
	position:relative;
	left:10px;
}

.text1{
	font-weight:bold;
	position:relative;
	float:left;
	top:14px;
	left:75px;
}


.text1::after{
	clear:both;
}



.hiduke2{
	width:100px;    /* 横幅のサイズを指定    */
    height:auto;	/* 縦幅のサイズを指定    */
    line-height:1.5;
	background-color:#007d3f;
	color:white;
	float:left;
	position:relative;
	top:20px;
	left:55px;
}

.number2{
	position:relative;
	left:10px;
}

.text2{
	font-weight:bold;
	float:left;
	position:relative;
	top:24px;
	left:75px;
}

.hiduke3{
	width:100px;    /* 横幅のサイズを指定    */
    height:auto;	/* 縦幅のサイズを指定    */
	line-height:1.5;
	background-color:#007d3f;
	float:left;
	color:white;
	position:relative;
	top:30px;
	left:55px;
}

.number3{
	position:relative;
	left:10px;
}

.text3{
	font-weight:bold;
	float:left;
	position:relative;
	top:34px;
	left:75px;
}

.footer1{
	width:1200px;
	background-color:#e30011;
	color:white;
	line-height:2.7;
	text-align:center;
	position:relative;
}

.footer-text1{
	
}

.footer2{
	width:1200px;
	background-color:#176123;
	color:white;
	line-height:3.5;
	text-align:center;
	position:relative;
}

.footer-text2{
	
}