@charset "UTF-8";
/* CSS Document */
body{
	margin:0 auto;
	font-family:"ヒラギノ明朝 Pro W3", Hiragino Mincho Pro, "ＭＳ Ｐ明朝", MS PMincho, serif;
}

#header{
	width: 100%;
	padding:0px 0px 3px 0px;
	text-align: center;
	display:block;
	position: fixed;
	top: 0;
	background:url(../img/bg.svg) repeat-x;
	background-size: 120px;
	background-color: hsla(0,0%,100%,1.00);
	z-index: 100;
	}

.menu ul{
  margin:0;
  padding:0;
}

.menu ul li {
    width: 200;/*親メニューの幅*/
	display: inline-block;
    list-style: none;
    margin:0;
	padding:20px;
    font-size:90%;
	letter-spacing:3px;
    position: relative;
	text-align: left;
	vertical-align:middle;
}
.menu ul li a {
  display: block;
  text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {
  color:#F3F3F3;/*ホバー時の親メニューの背景色*/
}
.menu ul li ul {
  position: absolute;
  top: 20;/*親メニューの高さと同じにする*/
  z-index: 100;
}
.menu ul li ul li {
  visibility: hidden;
  overflow: hidden;
  width: 200px;/*サブメニューの幅*/
  height: 0;
  color:hsla(0,0%,90%,0.60);/*サブメニューの背景色*/
}
.menu ul li ul li:hover, .menu ul li ul li a:hover {
  color:hsla(0,0%,90%,1);/*ホバー時のサブメニューの背景色*/
}
.menu ul li:hover ul li, .menu ul li a:hover ul li{
  visibility: visible;
  overflow: visible;
  height:20px;/*サブメニューの高さ*/
  z-index: 10;
  background:#fafafa;
}
.menu * {
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -ms-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}
.login {
   position: absolute;
   top: 10px;
   right: 30px;
}

.button {
	font-size: 80%;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 10px;
    color:#333;
    border:1px solid #eee;
	background-color:hsla(0,0%,100%,1.00);
}
.button:hover {
	background-color:hsla(0,0%,100%,0.30);
}

#content{
	width:100%;
	display:block;
	text-align: center;
	padding-bottom: 80px;
	}

.frame{
	background-image:url(../img/fr.png);
	background-size:cover;
	padding: 50px;
	}

.frame2{
	background-image:url(../img/fr_2.png);
	background-size:cover;
	padding: 50px;
	}

.frame3{
	background-image:url(../img/fr_3.png);
	background-size:cover;
	padding: 50px;
	}

#top{
	width:100%;
	height: 100%;
	display:block;
	margin:0 auto;
	padding-top: 100px;
	text-align: center;
	}

.block{
	width: 100%;
	display: block;
	text-align: center;
	font-size:78%;
	letter-spacing:2px;
	}

.block ul{
	padding: 40px 0;
	margin: 0 auto;
}


.block ul li {
	width:220px;
	display:inline-block;
	padding: 40 0;
	list-style:none;
	color: #222;
	vertical-align: top;
	}

#about{
	width: 100%;
	text-align: center;
	display: block;
	}
		
#about ul li {
	width:800px;
	display:inline-block;
	padding:20px;
	font-size:80%;
	letter-spacing:2px;
	list-style:none;
	color: #222;
	}	

#intro,#history,#teacher,#lesson,#kids,#pointe,
#trial,#application,#schedule,#contact{
	padding-top: 80px;
}

#trial{
	width: 100%;
	text-align: center;
	display: block;
	}
		
#trial ul li {
	width:800px;
	display:inline-block;
	padding:20px;
	font-size:80%;
	letter-spacing:2px;
	list-style:none;
	color: #222;
	}		

#footer{
	width:100%;
	display:block;
	clear:both;
	position: fixed;
	bottom: 0;
	text-align:center;
	background:url(../img/bg2.svg) repeat-x;
	background-size: 120px;
	background-color: hsla(0,0%,100%,1.00);
	}
	
#footer ul li {
	display:inline;
	padding:0px 22px;
	font-size:74%;
	font-weight:bold;
	list-style:none;
	}		

a{
	text-decoration: none;
	color:dimgrey;
	background: hsla(0,0%,100%,0.30)
	}

h1{
	font-size:100%;
	color: rgba(255,255,255,0.95);
	padding-right:10px;
	display:inline;
	}	

.title{
	font-size:110%;
	}

.title_s{
	font-weight: bold;
	}

.st{
	font-size:80%;
	letter-spacing:2px;
	}

.price{
	font-size:80%;
	letter-spacing:2px;
	}

.l{
	font-size:110%;
	text-align: left;
	}