@charset "utf-8";
/* CSS Document */

a:hover img.hoverImg {
	filter:alpha(opacity=70);
	opacity:0.7;
    -moz-opacity: 0.7;
}
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;   
	clear: both;
	visibility:hidden;
}
.clearfix{
	display: inline-block;
}
/* Hides from IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}


/* 共通
----------------------------------------------------------- */	
#Contentarea{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fixed{
	position:fixed!important;
}
h2{
	width:960px;
	margin:0 auto!important;
	position:relative!important;
	height:0px;
}
h2 img{
	position:absolute;
	z-index:100;
	top:0px;
	left:auto;
}
.navi_wrap{
	position:relative!important;
	height:0px;
	padding-top:0px!important;
}
.navi{
	position:absolute;
	z-index:100;
	right:0px;
	top:0px;
	height:0px;
}
.navi ul{
	float:right;
}
.navi li a{
	background-color:#FFFFF8;
	padding:10px;
	color:#C90000;
	text-align:center;
	display:block;
	text-decoration:none;
	margin-bottom:3px;
}
.navi li a:hover{
	background-color:#C90000;
	color:#FFFFFF;
}
.hover{
	background-color:#C90000!important;
	color:#FFFFFF!important;
}
.navi .logo{
	padding-top:10px;
	margin-right:10px;
	margin-bottom:38px;
}

#start {
  position: relative;
  background: url(../img/start_bg.gif) no-repeat center center fixed;
  background-color:#4DBDEC;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
height:3400px;
  padding-top:5px;
  overflow:hidden;
}
#start .inner{
	width:900px;
	margin:0 auto!important;
  padding-top:1100px;
	text-align:center;
}

#start h3{
	position:absolute;
	top:-300px;
	left:0;
	z-index:1;
	width:100%;
	text-align:center;
}

#start h3 img{

}


#start #intro{
	margin-top:-660px;
	z-index:1;
	width:100%;
	text-align:center;
}


#start #family {
margin-top:-75px;

}


#start p{
	margin-top:100px;
	margin-bottom:100px;
	z-index:99;
	position:relative;
	text-align:center;

}



#start #comments {
padding-top:500px;
}


#start p.comment1{
	/*margin-top:1200px;*/
  margin-top:0px;
	margin-bottom:100px;
	z-index:99;
	position:relative;
	text-align:center;

}





#start p img{

}

#start #movie{
	width:640px;
	padding:200px 0 300px 0;
  margin:100px auto 100px auto;
	height:100%;
	position:relative;
	overflow:hidden;
  z-index: 2;
}


#start #movie iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    margin-top:30px;
}


#start_chara{
	width:960px!important;
	margin:0 auto!important;
	height:100%;
	position:relative;
	overflow:hidden;
}
#start_chara .chara1{
	position:fixed;
	bottom:-185px;
	left:auto;
}
#start_chara .chara2{
	position:fixed;
	bottom:-259px;
	left:auto;
	text-align:right;
	width:960px;
}


#chapter1 {

  position: relative;
  background: url(../img/chapter1_bg.gif) no-repeat center center fixed;
  background-color:#4DBDEC;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:6000px;
  padding-top:5px;
}
#chapter1 .inner{
	position: relative;
	width:900px;
	margin:0 auto!important;
	padding-top:900px;
	text-align:center;
}
#chapter1 h3{
	position:fixed;
	margin-bottom:500px;
	width:100%;
	text-align:center;
	left:0px;
	top:-150px;
	z-index:1;

}

#chapter1 p{
	margin-top:100px;
	margin-bottom:100px;
	position:relative;
	z-index:99;
}


#chapter1 p.comment1{
	margin-top:100px;
	margin-bottom:500px;
	z-index:99;
	position:relative;
	text-align:center;

}

.line{
	position:absolute;
top:0px;
width:100%;
background:#c90000;
height:6px;
}

#chapter1 .point{
	top:100px;
	position:relative;
	z-index:100;
	width:100%;
text-align:center;
left:0%;
}

#chapter1 .point img{
	/*left:295px;*/
text-align:center;
width:0%;
}

#chapter1 .step1{
/*margin-top:2100px;*/
margin-top:1650px;
}

#chapter1_chara{
	width:960px!important;
	margin:0 auto!important;
	height:100%;
	position:relative;
	overflow:hidden;
}
#chapter1_chara .chara1{
	position:fixed;
	bottom:-185px;
	left:auto;
}
#chapter1_chara .chara2{
	position:fixed;
	bottom:-259px;
	left:auto;
	text-align:right;
	width:960px;
}


#chapter2 {
  height: 100%;
  position: relative;
  background: url(../img/chapter2_bg.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display:block;
  height:6700px;
  padding-top:5px;
}


#chapter2 .inner{

	margin:0 auto!important;
	padding-top:900px;
	text-align:center;
}

#chapter2 h3{
	position:fixed;
	margin-bottom:500px;
	width:100%;
	text-align:center;
	left:0px;
	top:-150px;
z-index:1;
}

#chapter2 p{
	margin-top:100px;
	margin-bottom:100px;
	position:relative;
	z-index:99;
}


#chapter2 p img{
	/*filter:alpha(opacity=0); 
    -moz-opacity: 0; 
    opacity: 0;*/
}

#chapter2 .intro{
	margin-top:200px;
	margin-bottom:500px;
width:100%;
background:#fff;
text-align:center;
position:relative;
	z-index:99;
}



#chapter2 .point{
	top:100px;
	position:relative;
	z-index:100;
	width:100%;
text-align:center;
left:0%;
}

#chapter2 .point img{
	/*left:295px;*/
text-align:center;
width:0%;
}

#chapter2 .comment3{
margin-top:1650px;

}


#chapter2_chara{
	width:960px!important;
	margin:0 auto!important;
	height:100%;
	position:relative;
	overflow:hidden;
}
#chapter2_chara .chara1{
	position:fixed;
	bottom:-185px;
	left:auto;
}
#chapter2_chara .chara2{
	position:fixed;
	bottom:-259px;
	left:auto;
	text-align:right;
	width:960px;
}


#chapter3 {
  height: 100%;
  position: relative;
  background: url(../img/chapter2_bg.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display:block;
  height:6200px;
  padding-top:5px;
}


#chapter3 .inner{
	margin:0 auto!important;
	padding-top:900px;
	text-align:center;
}


#chapter3 h3{
	position:fixed;
	margin-bottom:500px;
	width:100%;
	text-align:center;
	left:0px;
	top:-150px;
z-index:1;
}

#chapter3 p{
	margin-top:100px;
	margin-bottom:100px;
	position:relative;
	z-index:99;
}


#chapter3 p img{
	/*filter:alpha(opacity=0); 
    -moz-opacity: 0; 
    opacity: 0;*/
}

#chapter3 .intro{
	margin-top:100px;
	margin-bottom:300px;
width:100%;
background:#fff;
text-align:center;
position:relative;
	z-index:99;
}


#chapter3 .point{
	top:100px;
	position:relative;
	z-index:100;
	width:100%;
text-align:center;
left:0%;
}

#chapter3 .point img{
	/*left:295px;*/
text-align:center;
width:0%;
}


#chapter3 .comment2{
margin-top:1650px;

}

#chapter3 .comment3{
margin-top:600px;

}


#chapter3_chara{
	width:960px!important;
	margin:0 auto!important;
	height:100%;
	position:relative;
	overflow:hidden;
}
#chapter3_chara .chara1{
	position:fixed;
	bottom:-185px;
	left:auto;
}
#chapter3_chara .chara2{
	position:fixed;
	bottom:-259px;
	left:center;
	width:960px;
}

#chapter3_chara .chara3{
	position:fixed;
	bottom:-259px;
	left:auto;
	text-align:right;
	width:960px;
}



#chapter4 {
  height: 100%;
  position: relative;
  background: url(../img/chapter2_bg.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display:block;
  height:3700px;
  padding-top:5px;
}


#chapter4 .inner{
	margin:0 auto!important;
	padding-top:900px;
	text-align:center;
}


#chapter4 h3{
	position:fixed;
	margin-bottom:500px;
	width:100%;
	text-align:center;
	left:0px;
	top:-150px;
z-index:1;
}

#chapter4 p{
	margin-top:100px;
	margin-bottom:100px;
	position:relative;
	z-index:99;
}


#chapter4 p img{
	/*filter:alpha(opacity=0); 
    -moz-opacity: 0; 
    opacity: 0;*/
}

#chapter4 .intro{
	margin-top:100px;
	margin-bottom:300px;
width:100%;
background:#fff;
text-align:center;
position:relative;
	z-index:99;
}


#chapter4 .point{
	top:100px;
	position:relative;
	z-index:100;
	width:100%;
text-align:center;
left:0%;
}

#chapter4 .point img{
	/*left:295px;*/
text-align:center;
width:0%;
}



#chapter4_chara{
	width:960px!important;
	margin:0 auto!important;
	height:100%;
	position:relative;
	overflow:hidden;
}
#chapter4_chara .chara1{
	position:fixed;
	bottom:-185px;
	left:auto;
}
#chapter4_chara .chara2{
	position:fixed;
	bottom:-259px;
	left:auto;
	text-align:right;
	width:960px;
}


#end {
  height: 100%;
  position: relative;
  background: url(../img/end_bg.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display:block;
  height:3500px;
  padding-top:5px;
}

#end .inner{
	margin:0 auto!important;
	padding-top:900px;
	text-align:center;
}

#end p{
	margin-top:100px;
	margin-bottom:100px;
	position:relative;
	z-index:99;
}


#end h3{
	position:fixed;
	margin-bottom:500px;
	width:100%;
	text-align:center;
	left:0px;
	top:-150px;
z-index:1;
}



#end_chara{
	width:960px!important;
	margin:0 auto!important;
	height:100%;
	position:relative;
	overflow:hidden;
}
#end_chara .chara1{
	position:fixed;
	bottom:-185px;
	left:auto;
}
#end_chara .chara2{
	position:fixed;
	bottom:-259px;
	left:auto;
	text-align:right;
	width:960px;
}

#end_chara .chara3{
	position:fixed;
	bottom:-259px;
	left:auto;
	text-align:right;
	width:750px;
}

#end_chara .chara4{
	position:fixed;
	bottom:-30px;
	left:auto;
	display:none;
}


#end .comment7{
margin-top:300px;

}

#fin{
  height: 100%;
  position: relative;
  background: url(../img/end_bg.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display:block;
  height:900px;
  padding-top:5px;
}