/* CSS Document */

@import url(navi.css);
@import url(common.css);


#container {
	width:980px;
	margin:0 auto;
	padding:40px 0 0 0;
}

#right {
	width:260px;
	float:right;
}

	#right p {
		width:239px;
		margin:0;
		padding:0px 4px 30px 4px;
		line-height:160%;
	}

	#right h2 {
		width:247px;
		height:32px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	
	#right h2 a {
		width:247px;
		height:32px;
		display:block;
	}
	
		#rh21 {background:url(../img/top/st1.gif) no-repeat;}
		#rh22 {background:url(../img/top/st2.gif) no-repeat;}
		#rh23 {background:url(../img/top/st3.gif) no-repeat;}
		#rh24 {background:url(../img/top/st4.gif) no-repeat;}
		#rh25 {background:url(../img/top/st5.gif) no-repeat;}
		
		#right a img {
			border:3px solid #FFF;
		}
		
		#right a img:hover {
			border:solid 3px #FF9999;
		}
		
@media screen and (max-width: 500px) {
	
#container {
	width:100%;
	margin:0 auto;
	padding:40px 0 0 0;
}

#right {
	width:94%;
	margin:0 auto;
	float:none;
	padding:10px 0 20px 0;
}

	#right img {
		float:left;
		margin:0 10px 0 0;
		max-width:50%;
		height:auto;
	}
	
	#right img.fl {
		max-width:100%;
	}

	#right p {
		width:100%;
		margin:0;
		padding:0px 4px 15px 4px;
		box-sizing:border-box;
		line-height:160%;
	}

	#right h2 {
		width:100%;
		height:auto;
		text-indent:0;
		white-space:pre-wrap;
		font-size:1.2em;
		color:#FF6666;
		clear:both;
		padding:0 0 5px 0;
	}
	
	#right h2 a {
		width:100%;
		height:auto;
		display:block;
		color:#FF6666;
	}
	
		#rh21,
		#rh22,
		#rh23,
		#rh24,
		#rh25 {background:none;}
	
		
		#right a img {
			border:3px solid #FFF;
		}
		
		#right a img:hover {
			border:solid 3px #FF9999;
		}
			
	
	
}		
	
/* 左コンテンツ　------------------------------------------------------*/

#left {
	width:680px;
	float:left;	
}
	#left #news {
		padding:0 13px 0 13px;
	}
	
	#left #news .waku {
		width:278px;
		border:3px solid #f2f2f2;
		padding:19px;
		background-color:#FFFFFF;
		float:left;
	}
	
	#left #news .waku2 {
		width:278px;
		border:3px solid #f2f2f2;
		padding:19px;
		background-color:#FFFFFF;
		float:right;
	}
	
	#left h2 {
		width:278px;
		height:46px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	
	#left h2 a {
		width:278px;
		height:46px;
		display:block;
	}
	
		#lh21 {background:url(../img/top/lst1.gif) no-repeat;}
		#lh22 {background:url(../img/top/lst2.gif) no-repeat;}
		
		#left #news p {
			margin:0;
			padding:0 0 10px 5px;
		}

		
		.green {color:#4E7D41;}
		.pink {color:#ff6666;}
		
		
		
		
		#news .btn1,
		#news .btn2 {
			width:278px;
			height:37px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
		}
		
		#news .btn1 a {
			width:278px;
			height:37px;
			display:block;
			background:url(../img/top/btn1.gif) no-repeat;
		}
		
		#news .btn2 a {
			width:278px;
			height:37px;
			display:block;
			background:url(../img/top/btn2.gif) no-repeat;
		}
		
		#news .btn1 a:hover,
		#news .btn2 a:hover {background-position:0 -37px;}
		
		
#left .skyo {
		width:613px;
		clear:both;
		border:3px solid #f2f2f2;
		float:left;
		margin-left:13px;
		padding:19px;
		background-color:#FFFFFF;
	}
	
	
	
	.limg {float:left; margin:0 20px 0 0;}
	
	#left h1 {
		width:380px;
		height:40px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		background:url(../img/top/sst1.gif) no-repeat;
	}
		
	#left .skyo p {margin:0; padding:0 5px;}	
	
	#left .imgleft {
		width:301px;
		float:left;
		padding:0 0 0 5px;
	}
	
		#left .yaji {
			background:url(../img/top/yaji.gif) no-repeat left;
			padding:3px 0 3px 8px;
			margin:0;
		}
	
	#left .txtrigh {
		width:280px;
		float:right;
		padding:0 5px 0 0;
	}
		
@media screen and (max-width: 500px) {
	
#left {
	width:100%;
	float:none;
	clear:both;
	padding:20px 0 0 0;
}
	#left #news {
		padding:0;
	}
	
	#left #news .waku,
	#left #news .waku2 {
		width:83%;
		padding:19px 5%;
		float:none;
		margin:0 auto 10px auto;
	}
	

	
	#left h2 {
		width:100%;
		height:auto;
		text-indent:0;
		white-space:nowrap;
		overflow:hidden;
		border-bottom:1px solid #d6d6d6;
		margin:0 0 10px 0;
	}
	
	#left h2 a {
		width:100%;
		height:auto;
		display:block;
	}
	
		#lh21 {background:none;}
		#lh22 {background:none;}
		
		#left #news p {
			margin:0;
			padding:0 0 10px 5px;
		}

		
		.green {color:#4E7D41;}
		.pink {color:#ff6666;}
		
		
		
		
		#news .btn1,
		#news .btn2 {
			width:100%;
			height:37px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
		}
		
		#news .btn1 a {
			width:100%;
			height:37px;
			display:block;
			background:url(../img/top/btn1.gif) no-repeat center top;
		}
		
		#news .btn2 a {
			width:100%;
			height:37px;
			display:block;
			background:url(../img/top/btn2.gif) no-repeat;
		}
		
		#news .btn1 a:hover,
		#news .btn2 a:hover {background-position:center bottom;}
		
		
#left .skyo {
		width:96%;
		clear:both;
		border:3px solid #f2f2f2;
		float:none;
		margin:0 auto;
		padding:19px;
		box-sizing:border-box;
		background-color:#FFFFFF;
	}
	
	
	
	.limg {float:none; margin:0;}
	
	#left h1 {
		width:100%;
		height:auto;
		text-indent:0;
		white-space:pre-wrap;
		overflow:hidden;
		background:none;
		font-size:1.4em;
	}
		
	#left .skyo p {margin:0; padding:0;}	
	
	#left .imgleft {
		width:100%;
		float:none;
		padding:0;
	}
	
	#left .imgleft img {
		width:100%;
		height:auto;
	}
	
		#left .yaji {
			background:url(../img/top/yaji.gif) no-repeat left;
			padding:3px 0 3px 15px;
			margin:0;
		}
	
	#left .txtrigh {
		width:100%;
		float:none;
		padding:0 5px 0 0;
	}	
	
	
}		
		
/*  メインイメージ------------------------------------------------------ */ 

#main {
	width:100%;
	height:460px;
	background:url(../img/top/back_img.gif) repeat-x top #fafafa;
	clear:both;
}

#mainin {
	width:980px;
	height:460px;
	margin:0 auto;
}

#mainflame {
	width:980px;
	height:460px;
	position:relative;
}

#mainflame p {margin:0; padding:0;}

	#main #huhu {
		width:115px;
		height:195px;
		position:absolute;
		left:865px;
		top:245px;
		z-index:17;
	}
	
	#main #isu {
		width:220px;
		height:190px;
		position:absolute;
		left:636px;
		top:255px;
		z-index:16;
	}
	
	#main #girl {
		width:137px;
		height:236px;
		position:absolute;
		left:0px;
		top:224px;
		z-index:15;
	}
	
	
	#main #fami {
		width:240px;
		height:149px;
		position:absolute;
		left:139px;
		top:299px;
		z-index:14;
	}
	
	#main #book {
		width:114px;
		height:59px;
		position:absolute;
		left:379px;
		top:382px;
		z-index:13;
	}
	
	#main #iby2 {
		width:230px;
		height:169px;
		position:absolute;
		left:488px;
		top:245px;
		z-index:12;
	}
	
	#main #iby1 {
		width:244px;
		height:92px;
		position:absolute;
		left:0px;
		top:0px;
		z-index:11;
	}
	
	#main #txt {
		width:282px;
		height:59px;
		position:absolute;
		left:0px;
		top:111px;
		z-index:18;
	}
	
	#main #img {
		width:745px;
		height:341px;
		position:absolute;
		left:230px;
		top:7px;
		z-index:0;
		overflow: visible;
	}
	
	
@media screen and (max-width: 500px) {


#main {
	width:100%;
	height:280px;
}

#mainin {
	width:100%;
	height:280px;
	margin:0 auto;
}

#mainflame {
	width:100%;
	height:280px;
	position:relative;
}

#mainflame p {margin:0; padding:0;}

	#main #huhu {
		width:85px;
		height:100px;
		position:absolute;
		left:76%;
		top:125px;
		z-index:17;
	}
	
	
	#main #isu {
		width:140px;
		height:150px;
		position:absolute;
		left:45%;
		top:150px;
		z-index:16;
	}
	
	#main #girl {
		width:90px;
		height:150px;
		position:absolute;
		left:-2%;
		top:155px;
		z-index:15;
	}
	
	
	#main #fami {
		width:160px;
		height:130px;
		position:absolute;
		left:15%;
		top:180px;
		z-index:14;
	}
	

	#main #iby2,
	#main #book,
	#main #txt {display:none;}
	
	#main #iby1 {
		width:200px;
		height:92px;
		position:absolute;
		left:-20%;
		top:-20px;
		z-index:11;
	}
	
	#main #img {
		width:96%;
		height:auto;
		position:absolute;
		left:2%;
		top:15px;
		z-index:0;
	}
	
	#main img {
		width:100%;
		height:auto;
	}		
	
	#main #img img {width:100%; height:auto;}
	
}



	

#main #huhu {
		-webkit-animation:fleft2 3s;
		-o-animation:fleft2 3s;
		-ms-animation:fleft2 3s;
		-moz-animation:fleft2 3s;		
}


#main #isu {
		-webkit-animation:fleft 3s;
		-o-animation:fleft 3s;
		-ms-animation:fleft 3s;
		-moz-animation:fleft 3s;		
}

#main #txt,
#main #iby1,
#main #iby2 {
		-webkit-animation:dly 2s;
		-o-animation:dly 2s;
		-ms-animation:dly 2s;
		-moz-animation:dly 2s;		
}


#main #fami,
#main #book {
		-webkit-animation:dly2 2s;
		-o-animation:dly2 2s;
		-ms-animation:dly2 2s;
		-moz-animation:dly2 2s;		
}

#main #girl {
		-webkit-animation:frih2 3s;
		-o-animation:frih2 3s;
		-ms-animation:frih2 3s;
		-moz-animation:frih2 3s;		
}

#main #img {
		-webkit-animation:dly2 5s;
		-o-animation:dly2 5s;
		-ms-animation:dly2 5s;
		-moz-animation:dly 5s;			
}


	
	

	
	
	/*　フェイドイン */

	@-webkit-keyframes dly {
	0%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-o-keyframes dly {
	0%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-ms-keyframes dly {
	0%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-moz-keyframes dly {
	0%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	
	/*　フェイドイン　遅延 */

	@-webkit-keyframes dly2 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	50%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-o-keyframes dly2 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	50%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-ms-keyframes dly2 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	50%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-moz-keyframes dly2 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	50%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	
	/*　フェイドイン　もっと遅延 */

	@-webkit-keyframes dly3 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	75%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-o-keyframes dly3 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	75%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-ms-keyframes dly3 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	75%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	@-moz-keyframes dly3 {
	0%	{opacity:0; filter: alpha(opacity=50);}
	75%	{opacity:0; filter: alpha(opacity=50);}
	100% {opacity:1.0; filter: alpha(opacity=100);}
	}
	
	
	/*　右から入ってくる　遅延なし */
	
	@-webkit-keyframes fleft {
	0%	{-webkit-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-webkit-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-o-keyframes fleft {
	0%	{-o-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-o-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-ms-keyframes fleft {
	0%	{-ms-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-ms-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-moz-keyframes fleft {
	0%	{-moz-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-moz-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	
	/*　右から入ってくる　遅延あり */
	
	@-webkit-keyframes fleft2 {
	0%	{-webkit-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	60%	{-webkit-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-webkit-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-o-keyframes fleft2 {
	0%	{-o-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	60%	{-o-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-o-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-ms-keyframes fleft2 {
	0%	{-ms-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	60% {-ms-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-ms-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-moz-keyframes fleft2 {
	0%	{-moz-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	60%	{-moz-transform:translateX(50px);opacity:0; filter: alpha(opacity=50);}
	100% {-moz-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	
	
	/*　左から入ってくる　遅延あり */
	
	@-webkit-keyframes frih2 {
	0%	{-webkit-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	50%	{-webkit-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	100% {-webkit-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-o-keyframes frih2 {
	0%	{-o-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	50%	{-o-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	100% {-o-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-ms-keyframes frih2 {
	0%	{-ms-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	50% {-ms-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	100% {-ms-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}
	@-moz-keyframes frih2 {
	0%	{-moz-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	50%	{-moz-transform:translateX(-50px);opacity:0; filter: alpha(opacity=50);}
	100% {-moz-transform:translateX(0);opacity:1.0; filter: alpha(opacity=100);}
	}