/*
CSS for the demo: Recreating the Nikebetterworld.com Parallax Demo
Demo: Recreating the Nikebetterworld.com Parallax Demo
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Demo URL: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,p,blockquote,th,td{
margin:0;padding:0;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
	margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}


img{ border:0;}
address,caption,cite,code,dfn,em,strong,th,var{
font-style:normal;font-weight:normal;
}
ul li,ol li { list-style:none; } 
h1,h2,h3,h4,h5,h6{
font-size:130%;font-weight:normal;
text-align:left;
}
input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
input,textarea,select{ *font-size:100%; }
a img{border:none;}
body{
margin: 0;
min-width: 960px;
padding: 0;
background: url(images/bg.jpg) repeat;
font-size: 13px;
	line-height: 1.7em;
}
#wrap{
width:960px;
margin:0 auto;
}
p{
margin: 0 0 30px 0;
text-indent:1.5;
}
h2{
margin-bottom:20px;
}
.float-left{
float: left;
}
.float-right{
float: right;
}


/* トップページ */

#first{
overflow: hidden;
background:url(images/top.jpg) 50% 0 repeat fixed;
height:585px;
}

#first .float-left{
position:relative;
width:440px;
height:585px;
background: url(images/img01.png), url(images/img02.png);
background-position: 50% 20%, 50% 20%;
background-attachment: fixed;
background-repeat: no-repeat ,no-repeat;
position: absolute;
}
#first h1{
width:276px;
height:69px;
position:absolute;
top:130px;
left:550px;
}



#first p{
text-indent: 150%;
white-space: nowrap;
overflow: hidden;
background:url() top left no-repeat fixed;
width:250px;
z-index:100;

}
#first .float-left ul{
overflow:hidden;
width:850px;
margin:0px -30px 0 120px;
z-index:100;
position:absolute;
top:280px;
left:0;
}
#first .float-left li{
float:left;
margin-right:40px;
}



#first .float-right{
background:url() left top no-repeat;
width:357px;
height:108px;
padding:325px  0  40px 50px ;
margin: 15px;
}
#first .float-right p{
font-size:80%;
}

#first .float-right .subnavi ul{
	z-index:100;
	overflow:hidden;
}

#first .float-right .subnavi li{
	float:left;
	margin-right:40px;
}


/* ご挨拶 */


#zero{
background: url(images/bg_03.jpg) 50% 0 repeat fixed;
color: white;
padding: 30px 0 0 0;	
text-align:center;
height:900px;
overflow: hidden;
}

#zero .box{
width:840px;
margin:auto;
padding:0 0 50px 0;
}
#zero .box p{
text-align:left;
}
#zero .float-right a{
background: url(images/btn.png) no-repeat top left;
width:127px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display:block;
}

#zero .box p#annai{
	width:500px;
	margin:20px;
	margin-left:50px;
	text-align:left;
	margin-left:50px;
}

 .subnavi ul{
	z-index:100;
	overflow:hidden;
	margin-left:550px;
}

.subnavi li{
	float:left;
}


/* プロフィール */

#second{
background: url(images/bg_02.jpg) 50% 0 repeat fixed;
color: white;
height: 780px;
margin: 0 auto;
overflow: hidden;
}

#second .box{
width:600px;
margin:auto;
height:900px;
background:url(images/img04.png) top left no-repeat;
padding:0px 0 0 0;
}
#second .bg{
width:557px;
float:right;
height:270px;
background:url(images/img05.png) top left no-repeat;
padding:0 0 0 0;
}
#second .float-right a{
background: url(images/btn.png) no-repeat top left;
width:127px;
height:900px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display:block;
}

#second .box p{
	width:600px;
	background:url(images/profilebk.png);
	padding:20px;
	color:#E2D6D6;
}

#second .box p a{
	color:#FC0;
	border:none;
}

/* コンサートのご案内 */


#third{
background:url(images/bg_03b.jpg) 50% 0 repeat fixed;
color: white;
padding: 100px 0 0 0;	
text-align:center;
height:900px;
overflow: hidden;
width:960px;
}

#third .box{
width:840px;
height:900px;
margin:auto;
}

#third .box p{
text-align:left;
}

#third .float-right a{
background: url(images/btn.png) no-repeat top left;
width:127px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display:block;
}

#third .box p#annai{
	width:500px;
	margin:20px;
	margin-left:50px;
	text-align:left;
	border-bottom:#CCC dotted 1px;
}


#third .box p#music{
	width:370px;
	margin:20px;
	margin-left:80px;
	text-align:left;
	z-index:50;
}

#third .box p#ensokyoku{
	width:625px;
	margin:30px 20px 50px 20px;
	margin-left:100px;
	text-align:left;
}

.imgL { float:left; margin-right:20px; }

p.m100{
	margin-left:100px;
}
/* 過去のコンサート */

#fourth{
background: url(images/bg_04.jpg) 50% 0 repeat fixed;
color: white;
overflow:hidden;
height:2500px;
overflow: hidden;
width:760px;
padding:50px 20px 0 180px;}

#fourth h2{
	border-bottom:#CCC dotted 1px;
	width:500px;
}

#fourth .box{
width:840px;
height:800px;
margin:auto;
padding:0px 0 50px 0;
}

#fourth .float-right a{
background: url(images/btn.png) no-repeat top left;
width:127px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display:block;
}

img.l {
	float: left;
	margin:0 20px 25px 0;
	vertical-align:top;
}

#fourth .box p{
	line-height:1.3;
}
	

/* ピアノ教室 */


#fifth{
background: url(images/class.jpg) 50% 0 repeat fixed;
color: white;
padding: 100px 0 0 20px;
width:940px;
text-align:center;
height:1500px;
overflow: hidden;
}
#fifth .box{
width:840px;
margin:auto;
padding:0;
}
#fifth .box p{
text-align:left;
}
#fifth .float-right a{
background: url(images/btnback.png) no-repeat top left;
width:127px;
height:0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display:block;
z-index:100:
}

#fifth .box p#annai{
	width:400px;
	margin:20px;
	margin-left:50px;
	text-align:left;
}

p#lesson{
	margin-left:50px;
	color:#333;
}

p#setumei{
	color:#663333;
	width:600px;
    font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	margin-left:280px;
}

p#contact{
	color:#663333;
	width:670px;
    font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	margin-left:230px;
}

#pageTop{
	padding:20px;
	position:fixed;
	bottom:20px;
	right:20px;
	}


/* お問い合わせ */

#sixth{
background:url(images/contactbk.jpg) 50% 0 no-repeat fixed;
color: white;
overflow:hidden;
height:1500px;






/*
CSS for the demo: Recreating the Nikebetterworld.com Parallax Demo
Demo: Recreating the Nikebetterworld.com Parallax Demo
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Demo URL: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/