@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,600,700,300italic,400italic");
@import url("https://fonts.googleapis.com/css?family=Cinzel:400,700");
@import url("https://fonts.googleapis.com/css?family=Oswald:400,700,300");

html {
	font-size: 62.5%;
	height:100%;	
}

body {
	margin:0;
	padding:0;
	height:100%;
    font-size:1.3rem;
}

/*-----language/jp-----*/
#h1,#info_txt,#pro_txt,#cate_txt,#txt_jp,#acMenu dd,#acMenu_pp dd,#link_txt_jp,#cont_mail,#acc_txt,#less_txt,#less_target,#cont_txt,.txt_hov_l,
#input_entry,#input_entry_txt,#input_btn,#data_field_3
{
	font-family:Helvetica, Roboto, 'Droid Sans', 'Hiragino Kaku Gothic Pro',メイリオ,ヒラギノ角ゴ Pro W3,ＭＳ Ｐゴシック,Osaka, sans-serif;	
}

/*-----language/en-----*/
h2,#txt01,.block_L .menu a,#block_title,#copy,#end_copy,#info_cal_dd,#pro_title,#txt_en,#acMenu dt,#h2_sp,#cont_phone,#end_cont_phone,#acMenu_pp,#ast
{
	font-family:Lato,serif;
}

/*-----transition-----*/
.block_L a,a.start,.sb-slidebar,.sb-right,.sb-slide,.sb-slidebar a,.block_L,.block_R,h1,h2,#h1,#txt01,.menu,
#block_top,#block_info,#block_prof,#block_arch,#block_cate,#block_less,#block_blog,#block_acce,#block_cont,#block_title,#page-top a,
#info_info,#info_cal,#acMenu dt,#acMenu_pp dt,header,.header_sp,#h1_sp,#h2_sp,#img_rotate,#map,#link_txt_jp,#cont_phone,#end_cont_phone,#cont_mail,#acc_txt,#less_txt,#less_target,
#txt_jp,.txt_hov,.txt_hov_l,.txt_hov:hover,.txt_hov_l:hover,#less_course,#less_content,#input_btn,#input_btn_r,.hov_icon
{-webkit-transition: all 0.65s ease;-moz-transition: all 0.65s ease;-ms-transition: all 0.65s ease;-o-transition: all 0.65s ease;transition: all 0.65s ease;	}

/*-----border radius-----*/
.block_L .menu a,#acMenu dt,#map,#link_txt_jp,#cont_phone,#end_cont_phone,#cont_mail,#txt_jp,.txt_hov_l,#less_course,#less_content,#less_target,
#input_entry,#input_entry_txt,#input_btn,#acMenu_pp dt
{-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;}

/*-----background-----*/
.background{
	z-index:-1;height:100%;
	background-image:url('../img/bg01.jpg');
	-moz-background-size:cover;	background-size:cover;
	position:fixed;top:0;left:0;right:0;bottom:0;
	background-position:center center;		
}

/*-----bg white mask-----*/
.cover{
	display:block;width:100%;height:100%;
	-moz-background-size:cover;	background-size:cover;
	position:fixed;top:0;left:0;right:0;bottom:0;
	background:rgba(255,255,255,0.945);
	z-index:-1;
}

/*-----slide menu / toggle button > display:none; -----*/
.sb-slidebar,.sb-right,.sb-slide,.sb-slidebar a,#sb_info{
	display:none;
}

/*-----block Left/Right-----*/
.block_L{
	display:block;float:left;position:fixed;top:0;left:0;
	width:45%;height:100%;overflow:hidden;
	padding:60px 20px 0 0;
	box-sizing: border-box;
	text-align:right;
	background:rgba(255,255,255,0.0);
}

.block_R{
	display:block;float:right;
	width:55%;height:auto;
	/* background:rgba(0,0,0,0.68); */
	box-sizing: border-box;
	padding:70px 0px 0px 0px;
	background:rgba(255,255,255,0.0);
}

/*----------Block / Left contents----------*/

h1{   /*--Aya Kosuge--*/
	font-family:Cinzel,serif;font-weight:300;font-size:3.8rem;color:#0c0c0c;text-shadow:1px 1px 0px rgba(50,50,50,0.22);
	margin:0px;
	line-height:0.8em;
}

h2{   /*--A soprano singer--*/
	font-weight:300;font-size:2.4rem;color:#777;
	margin:0px;
	line-height:1em;
}

#h1{  /*--こすげ音楽教室--*/
	font-size:2.75rem;color:#0c0c0c;text-shadow:1px 1px 0px rgba(50,50,50,0.22);
	margin-top:0px;
	line-height:1.1em;
}

#txt01{   /*--&--*/
	font-weight:300;font-size:2.4rem;color:#666;
	margin:10px 0;
}

/*--menu--*/
.menu{
	display:inline-block;
	margin-top:25px;
	position:relative;
}

.block_L .menu a{  
	display:inline-block;
	width:200px;height:30px;line-height:30px;
	font-weight:300;font-size:2.0rem;color:#555;
	text-decoration:none;
}

.block_L .menu a:hover{
	color:#fff;
	box-shadow:inset -200px 0 rgba(0,166,218,1/*50,50,50,0.6*/);
}

.block_L .menu a > i.hov_icon{display:none;}
.block_L .menu a:hover > i.hov_icon{display:inline;}

	/*--balloon.css--
	.arrow_box {
		display: none;position: absolute;
		padding: 5px;
		-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px; border-radius: 10px;
		background: rgba(50,50,50,0.6);
		font-size:1.1rem;color: #fff;text-align:left;
	}

	.arrow_box:after {
		position: absolute;
		bottom: 100%;
		left: 50%;
		width: 0;
		height: 0;
		margin-left: -10px;
		border: solid transparent;
		border-color: rgba(51, 51, 51, 0);
		border-bottom-color: rgba(50,50,50,0.6);
		border-width: 10px;
		pointer-events: none;
		content: " ";
	}
	a:hover + p.arrow_box {
		display: block;
	}
	--*/

/*----------Block / Right contents----------*/

/*--block--*/
#block_info,#block_prof,#block_arch,#block_cate,#block_less,#block_blog,#block_acce,#block_cont{
	display:block;width:100%;padding-bottom:500px;text-align:center;
}

#block_top{
	display:block;width:100%;
}

/*--start--*/
a.start{
	display:block;width:65px;height:65px;box-sizing: border-box;padding-top:8px;
	position:relative;top:150px;margin:0 auto;
	background:rgba(100,100,100,1.0);
	font-size:5.0rem;color:#fff;text-align:center;text-decoration:none;
	-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;
	z-index:3;
}

a.start:hover{
	width:80px;height:80px;padding-top:15px;
	background:rgba(218,0,57,1);
	color:#fff;
	-webkit-transform: rotate(1080deg);-ms-transform: rotate(1080deg);transform: rotate(1080deg);
}

/*--block title of menu--*/

#block_title{
	display:inline-block;height:90px;line-height:90px;width:90%;border-bottom:5px rgba(0,166,218,1.0) solid;margin-bottom:20px;
	font-weight:700;font-size:2.8rem;color:#333;text-shadow:1px 1px 0px rgba(50,50,50,0.2);
}

.fa_color{
	display:block;width:46px;height:46px;box-sizing: border-box;padding-top:8px;
	color:rgba(255,255,255,1.0);
	background:rgba(0,166,218,1.0);
	-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;	
}

/*--link text jp--*/

#link_txt_jp{
	display:inline-block;padding:3px 10px;margin:3px 0;
	font-size:1.3rem;color:rgba(255,255,255,0.8);text-decoration:none;text-shadow:1px 1px 0px rgba(0,0,0,0.2);
	background:rgba(50,50,50,0.4);
}

#link_txt_jp:hover{
	color:rgba(255,255,255,1);
	background:rgba(218,0,57,1);
}

/*----------Information----------*/

	#info_info{
		display:block;width:100%;box-sizing: border-box;color:#666;
	}

	.info_wow{
		margin-bottom:10px;
	}

	#info_cal{
		display:block;width:45px;box-sizing: border-box;
		font-family: 'Oswald', sans-serif;font-weight:300;font-size:1.8rem;color:#333;
		text-align:center;line-height:1.25em;margin:0 auto 5px auto;
	}

	#info_cal_dd{
		font-weight:700;font-size:2.6rem;color:#333;
		text-shadow:1px 1px 0px rgba(50,50,50,0.22);
	}

	#info_txt{
		display:block;padding:10px;margin:0 auto;width:90%;box-sizing: border-box;
		text-align:left;font-size:1.3rem;border-top:1px #aaa solid;
	}

/*----------Profile----------*/

	#pro_title{
		display:inline-block;padding:0 0 8px 0;width:90%;border-bottom:1px #aaa solid;
		font-weight:300;font-size:2.4rem;color:#444;
	}

	#pro_txt{
		display:block;padding:10px;margin:0 auto;width:80%;box-sizing: border-box;
		text-align:left;font-size:1.3rem;color:#666;line-height:1.4em;
	}

	#txt_en{
		display:inline-block;
		font-weight:400;font-size:1.55rem;color:#333;padding-top:10px;margin:5px 0 3px 0;
	}

	#txt_jp{
		display:inline-block;
		font-size:1.7rem;color:#333;line-height:1.8em;
	}
	
		/*-----text hover-----*/	
		.txt_hov,.txt_hov_l{
			color:#666;
			-webkit-background-size: 200% auto;-moz-background-size: 200% auto;background-size: 200% auto;
			background-position: -0% 0;
			background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(0,166,218,1.0) 50%);
			text-decoration: none;
			-webkit-transition: background-position 0.65s ease;transition: background-position 0.65s ease;
		}
	
		.txt_hov:hover,.txt_hov_l:hover{
			color:#fff;
			background-position: -99.99% 0;
  		}
	
		.txt_hov_l{
			font-size:1.4rem;line-height:1.75em;
		}
	
	#img_rotate,#img_rotate_blue{
		width:80px;height:80px;
		-webkit-filter: grayscale(100%) blur(0px) contrast(113%) brightness(85%) ;
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		filter: gray;
		-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;
	}
	
	#img_rotate:hover,#img_rotate_blue:hover{
		width:140px;height:140px;
		-webkit-filter: grayscale(0%) blur(0px) contrast(100%) brightness(100%) ;
		filter: none;
		-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);-o-transform: rotate(720deg);-ms-transform: rotate(720deg);transform: rotate(720deg);
	}

/*----------Archive----------*/

	/*--accordion--*/
	#acMenu dt,#acMenu_pp dt{
		display:block;width:88%;margin:15px auto 0 auto;
		height:34px;line-height:34px;text-align:center;
		font-size:1.8rem;font-weight:300;color:#fff;text-shadow:1px 1px 0px rgba(0,0,0,0.2);
		background:rgba(50,50,50,0.3);
		border:0;cursor:pointer;
	}

	#acMenu_pp dt{width:300px;}

	#acMenu dt:hover,#acMenu_pp dt:hover{
		color:#fff;
		background:rgba(218,0,57,1);
	}

	#acMenu dd,#acMenu_pp dd{
		display:block;
    	width:84%;height:auto;margin:6px auto 10px auto;
		padding:10px;
    	line-height:1.4em;
    	border:0px;
    	display:none;
    	font-size:1.3rem;color:#666;
    	text-align:left;
	}
	
	#acMenu_pp dd{width:295px;padding:0px;font-size:1.2rem;color:#777;}

/*----------Catering concert----------*/

	#cate_txt{
		display:block;padding:10px;margin:0 auto;width:80%;box-sizing: border-box;
		text-align:left;font-size:1.3rem;color:#666;line-height:1.5em;
	}
	
	#cont_phone,#end_cont_phone,#cont_mail{
		display:inline-block;width:200px;height:36px;line-height:36px;margin:5px;vertical-align:top;
		font-size:1.65rem;font-weight:300;color:#fff;text-decoration:none;text-shadow:1px 1px 0px rgba(0,0,0,0.2);text-align:center;
		background:rgba(50,50,50,0.4);
	}
	
	#cont_mail{
		font-size:1.8rem;font-weight:normal;
	}
	
	#cont_phone:hover,#end_cont_phone:hover,#cont_mail:hover{
		background:rgba(218,0,57,1);
	}

/*----------Lesson----------*/

	#less_txt{
		display:block;padding:10px;margin:0 auto;width:80%;box-sizing: border-box;
		text-align:left;font-size:1.3rem;color:#666;line-height:1.5em;
	}
	
	#less_course{
		display:inline-block;width:100%;padding:5px;vertical-align:top;
		color:#fff;text-shadow:1px 1px 0px rgba(50,50,50,0.2);
		background:rgba(0,166,218,1.0);margin:0 0 1px 0;
		/*border-bottom:1px rgba(0,166,218,1.0) solid;*/
		box-sizing: border-box;
		}
		
	#less_content,#less_target{
		display:inline-block;width:100%;padding:5px;margin:0 0 1px 0;
		color:#555;
		/*background:rgba(0,0,0,0.12);*/
		box-sizing: border-box;
		}
			
	#less_target{
		color:#fff;text-shadow:1px 1px 0px rgba(50,50,50,0.2);
		background:rgba(50,50,50,0.37);
		/*border-bottom:1px #888 solid;*/
		}
	
/*-----------Access----------*/

	#map{
		display:inline-block;margin-top:20px;
		width:88%;height:320px;
		box-shadow:1px 1px 1px rgba(50,50,50,0.35);
	}

	#acc_txt{
		display:block;padding:10px;margin:0 auto;width:80%;box-sizing: border-box;
		text-align:left;font-size:1.3rem;color:#666;
	}

/*----------Contact----------*/

	#cont_txt{
		display:block;padding:10px;margin:0 auto;width:80%;box-sizing: border-box;
		text-align:left;font-size:1.3rem;color:#666;line-height:1.5em;
	}

	#input_entry,#input_entry_txt{
		margin-bottom:8px;background:rgba(229,229,229,0.9);border:0px;height:30px;width:400px;font-size:1.3rem;padding:0 5px;box-shadow:inset 1px 1px 0 rgba(30,30,30,0.3);
	}

	#input_entry_txt{
		height:150px;
	}

	#input_btn,#input_btn_r{
		display:inline-block;cursor:pointer;width:50px;height:50px;text-align:center;
		font-size:1.2rem;color:#fff;background:rgba(100,100,100,0.5);border:0;
		-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;
	}
	
	#input_btn{
		background:rgba(0,166,218,1);
	}

	#input_btn:hover,#input_btn_r:hover{
		color:#fff;
		background:rgba(50,50,50,0.65);
		-webkit-transform: rotate(1080deg);-ms-transform: rotate(1080deg);transform: rotate(1080deg);
	}

	#input_btn:hover{
		background:rgba(218,0,57,1);
	}
	
	#data_field_3{display:block;margin:0 auto;
		font-size:1.3rem;color:#666;padding-left:15px;width:400px;
	}
	
	label{vertical-align:20%;}
	
	#ast{
		font-size:1.8rem;color:red;
	}
	
	::-webkit-input-placeholder {color:#888;}
    :-moz-placeholder {color:#888;}
	input::-webkit-input-placeholder {font-family:Lato,serif;}
    input:-moz-placeholder {font-family:Lato,serif;}

/*-----Hedear drawer for sp-----*/
header,.header_sp,#h1_sp,#h2_sp{
	display:none;
}

/*--page top--*/
#page-top {
	position: fixed;right: 15px;
}

#page-top a{
	display:table-cell ;margin:5px;width:48px;height:48px;text-decoration:none;line-height:48px;
	text-align:center;vertical-align:middle;
	font-size:3.0rem;color:rgba(255,255,255,0.7);
	background:rgba(50,50,50,0.35);
	-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}

#page-top a:hover{
	color:rgba(255,255,255,1.0);
	background:rgba(50,50,50,0.6);
	-webkit-transform: rotate(1080deg);-ms-transform: rotate(1080deg);transform: rotate(1080deg);
}

/*--copyright--*/
#copy,#end_copy{
	display:inline-block;position:relative ; bottom:0;width:320px;
	font-weight:300;font-size:1.2rem;color:#555;
	padding:8px;
}

/*------------------------------------------------------------------------------------------------
 ↓tablet style
-------------------------------------------------------------------------------------------------*/

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

/*-----block Left/Right-----*/
.block_L{
	width:42%;
	padding:60px 10px 0 0;
}

.block_R{
	width:58%;
	padding:70px 10px 0px 10px;
}

/*-----block left contents-----*/

h1{   /*--Aya Kosuge--*/
	font-size:3.0rem;
}

h2{   /*--A soprano singer--*/
	font-size:2.0rem;
}

#h1{  /*--こすげ音楽教室--*/
	font-size:2.4rem;
}

#txt01{   /*--&--*/
	font-size:1.9rem;
}

/*--menu--*/
.block_L .menu a{
	width:160px;
	font-size:1.75rem;
}

.block_L .menu a:hover{
	box-shadow:inset -160px 0 rgba(0,166,218,1/*50,50,50,0.6*/);
}

/*-----block right contents-----*/


/*-----Information-----*/
	#info_txt{width:95%;}

/*-----Profile-----*/
	#pro_title{font-size:2.5rem;}
	#pro_txt{width:95%;}
	#img_rotate{width:80px;height:80px;}
	#img_rotate:hover{width:100px;height:100px;}

/*-----Archive-----*/
	#acMenu dt{width:97%;}
	#acMenu dd{width:95%;}

/*-----Catering concert-----*/
	#cate_txt{width:95%;}
	#cont_phone,#end_cont_phone,#cont_mail{width:175px;}

/*-----Lesson-----*/
	#less_txt{width:95%;}
	#less_course{width:100%;}

/*-----Access-----*/

	#map{width:97%;height:320px;}
	#acc_txt{width:95%;}

/*-----Contact-----*/

	#cont_txt{width:95%;}
	#input_entry,#input_entry_txt{box-sizing: border-box;
		width:300px;
	}
	#data_field_3{
		width:300px;
	}
	
	

}

/*------------------------------------------------------------------------------------------------
 ↓mobile style
-------------------------------------------------------------------------------------------------*/

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

/*-----slidebar-----*/

.sb-slidebar {
	font-family:Lato,serif;font-weight:300;font-size:1.35rem;color: #e3e3e3;
	text-shadow:1px 1px 0px rgba(0,0,0,0.2);
	opacity:0.9;
}

#sb_info{
	display:block;margin:0 auto;text-align:center;
}

#sb_ttl_aya{
	font-family:Cinzel,serif;font-weight:300;font-size:2.0rem;margin:5px 0;
}

#sb_ttl_kosu{
	font-family:Helvetica, Roboto, 'Droid Sans', 'Hiragino Kaku Gothic Pro',メイリオ,ヒラギノ角ゴ Pro W3,ＭＳ Ｐゴシック,Osaka, sans-serif;
	font-size:1.5rem;margin:5px 0;
}

.sb-slidebar a{
	display:block;width:100%;
	font-family:Lato,serif;font-weight:300;font-size:1.6rem;color:#e3e3e3;
	background:rgba(30,30,30,1.0);
	padding:8px 10px;
	text-decoration:none;
	border-bottom:1px rgba(100,100,100,0.60) solid;
} 

.sb-slidebar a:hover{
	color:#fff;
	box-shadow: inset 170px 0px rgba(0,166,218,1.0);
}

.sb-slide {
	display:inline-block;position: fixed;top: 0;right:10px;
    width: 50px;z-index: 2;
}

.sb-right{
	display:inherit;
}

.sb-slide .sb-toggle-right {
    float: right;width: 4em;
}

/*-----block Left/Right-----*/
.block_L{
	float:inherit;
	position:relative;
	width:100%;
	padding:80px 0 0 0;
	text-align:center;
}

.block_R{
	float:inherit;
	width:100%;height:auto;
	padding:20px 0 0 0;
}

/*-----block left > Upper contents-----*/

/*-----menu-----*/
.menu{display:none;}

/*-----block right > Under contents-----*/

/*--start--*/
a.start{top:70px;}

/*--link text jp--*/

#link_txt_jp{font-size:1.22rem;}

/*--menu title--*/
#block_title{padding-top:45px;font-size:2.8rem;}

/*--copyright--*/
#copy,#end_copy{width:100%;}

/*-----Information-----*/
	.info_wow{
		display:block;margin-bottom:6px;
	}

	#info_info{
		width:320px;margin:5px auto;
	}
	#info_cal{
		display:inline-block;vertical-align:top;margin-top:6px;
	}

	#info_txt{
		display:inline-block;padding:8px;margin:inherit;width:270px;
		border-left:1px #888 solid;border-top:0;
		font-size:1.22rem;
	}

	/*-----text hover-----*/

		.txt_hov_l{
			font-size:1.32rem;line-height:1.55em;
		}

/*-----Profile-----*/
	#pro_txt{width:315px;font-size:1.22rem;}

/*-----archive-----*/
	#acMenu dt{width:95%;}

	#acMenu dd{
		width:93%;
		font-size:1.22rem;
		padding:5px;
	}

/*-----Catering concert-----*/
	#cate_txt{width:315px;font-size:1.22rem;}

/*-----Lesson-----*/
	#less_txt{width:315px;font-size:1.22rem;}

/*-----Access-----*/

	#map{width:100%;}
	
	#acc_txt{width:315px;font-size:1.22rem;	}
	
/*-----Contact-----*/
	#cont_txt{width:315px;font-size:1.22rem;}
	#input_entry,#input_entry_txt{width:270px;}
	#data_field_3{width:270px;}



/*-----Header drawer for sp -----*/

/*-----header drawer-----*/

header,.header_sp,#h1_sp,#h2_sp{
	display:block;
}


header {
	background-color:rgba(255,255,255,0.88);
	padding:5px 10px;
	box-shadow:2px 2px 5px rgba(70,70,70,0.5);
	-webkit-border-bottom-right-radius: 28px; -moz-border-radius-bottomright: 28px;
	z-index:9999;
}

.header_sp {
  position: fixed;
  top: -80px;
  left: 0;
  z-index:9999;
}

#h1_sp{   /*--Aya Kosuge--*/
	font-family:Cinzel,serif;font-weight:300;font-size:2.3rem;color:#0c0c0c;text-shadow:1px 1px 0px rgba(50,50,50,0.22);
	margin:0px;
	line-height:0.8em;
}

#h2_sp{   /*--A soprano singer--*/
	font-weight:300;font-size:1.7rem;color:#777;
	margin:0px;
	line-height:1em;
}

/*--page top--*/

#page-top a{
	width:40px;height:40px;line-height:40px;
}


}