@charset "utf-8";
/* FONT 対応サイズ表
---------------------------------------------------------------------
pxでの指定値  	%での指定値
	10px 			83	%			11px 			92  %
	12px 			100	%			13px 			108 %
	14px 			117	%			15px 			125 %
	16px 			133	%			17px 			142 %
	18px 			150	%			19px 			158 %
	20px 			167	%			21px 			175 %
	22px 			183	%			23px 			192 %
	24px 			200	%			25px 			208 %
	26px 			217 %
---------------------------------------------------------------------*/

/*---------------------------------------------------------------------
Page layout
---------------------------------------------------------------------*/
body {text-align:center; background:url(../images/bg_page.gif) repeat center top fixed;}


/*---------------------------------------------------------------------
Wrapper Layout
---------------------------------------------------------------------*/
#wrapper {width:900px; margin:0 auto; padding-bottom:100px; text-align:left;}
	
	/*---------------------------------------------------------------------
	Header Layout
	---------------------------------------------------------------------*/
	#header {z-index:9999;}
		#logo {position:fixed; top:5px; z-index:9999; width:158px;}
			#logo a {display:block; overflow:hidden; height:0; padding-top:159px; width:158px; background:url(../images/logo_milk.png) no-repeat left top;}
			#logo a:hover {background:url(../images/logo_milk_on.png) no-repeat left top;}
		#ushi {position:fixed; bottom:40px; z-index:10000;}
	
	/*---------------------------------------------------------------------
	Navigation Layout
	---------------------------------------------------------------------*/
	#gnav {width:230px; position:fixed; margin-left:688px; top:5px;}
			#gnav li a {display:block; overflow:hidden; width:223px; height:0; cursor:pointer;}
			
			#gnav li.gnav01 {}
			#gnav li.gnav02 {margin-top:-10px;}
			#gnav li.gnav03 {margin-top:-10px;}
			
			#gnav li.gnav01 a {background:url(../images/btn_01.png) no-repeat left top; padding-top:157px; width:223px;}
			#gnav li.gnav02 a {background:url(../images/btn_02.png) no-repeat right top; padding-top:156px; width:223px;}
			#gnav li.gnav03 a {background:url(../images/btn_03.png) no-repeat left top; padding-top:155px; width:141px;}
			
			#gnav li.gnav01 a:hover {background:url(../images/btn_01_on.png) no-repeat left top;}
			#gnav li.gnav02 a:hover {background:url(../images/btn_02_on.png) no-repeat right top;}
			#gnav li.gnav03 a:hover {background:url(../images/btn_03_on.png) no-repeat left top;}
			
			#gnav li.gnav01 a.current {background:url(../images/btn_01_on.png) no-repeat left top;}
			#gnav li.gnav02 a.current {background:url(../images/btn_02_on.png) no-repeat right top;}
			#gnav li.gnav03 a.current {background:url(../images/btn_03_on.png) no-repeat left top;}


		#gnav li.gnav04 {height:100%;}
		#gnav li.gnav04 a:hover {width:100%;}
			#rnav {position:relative;}
				#rnav li {position:absolute;}
				#rnav li a {display:block; overflow:hidden; height:0;}
				
				#rnav li.rnav01 {z-index:100; top:-160px; right:10px;}
				#rnav li.rnav02 {z-index:200; top:-115px; right:-5px;}
				#rnav li.rnav03 {z-index:300; top:-67px; right:-3px;}
				#rnav li.rnav04 {z-index:400; top:-27px; right:23px;}
				
				#rnav li.rnav01 a {background:url(../images/btn_recipe01.png) no-repeat left top; padding-top:65px; width:89px;}
				#rnav li.rnav02 a {background:url(../images/btn_recipe02.png) no-repeat left top; padding-top:56px; width:92px;}
				#rnav li.rnav03 a {background:url(../images/btn_recipe03.png) no-repeat left top; padding-top:56px; width:96px;}
				#rnav li.rnav04 a {background:url(../images/btn_recipe04.png) no-repeat left top; padding-top:59px; width:91px;}
				
				#rnav li.rnav01 a:hover {background:url(../images/btn_recipe01_on.png) no-repeat left top; width:89px;}
				#rnav li.rnav02 a:hover {background:url(../images/btn_recipe02_on.png) no-repeat left top; width:92px;}
				#rnav li.rnav03 a:hover {background:url(../images/btn_recipe03_on.png) no-repeat left top; width:96px;}
				#rnav li.rnav04 a:hover {background:url(../images/btn_recipe04_on.png) no-repeat left top; width:91px;}
				
				#rnav li.rnav01 a.current {background:url(../images/btn_recipe01_on.png) no-repeat left top;}
				#rnav li.rnav02 a.current {background:url(../images/btn_recipe02_on.png) no-repeat left top;}
				#rnav li.rnav03 a.current {background:url(../images/btn_recipe03_on.png) no-repeat left top;}
				#rnav li.rnav04 a.current {background:url(../images/btn_recipe04_on.png) no-repeat left top;}




	
	/*---------------------------------------------------------------------
	Container Layout
	---------------------------------------------------------------------*/
	#container {width:590px; margin:0 0 0 100px; padding-top:5px;}
		.section {background:url(../images/bg_section.png) no-repeat 50% 50%; position:relative; width:598px; height:598px; margin-bottom:75px;}
			.section h2,
			.section h3,
			.section p {position:absolute;}
		
		/* コンテンツトップ */
		#contents-top h2 {top:37px; left:223px;}
		#contents-top h3 {top:263px; left:85px;}
		#contents-top p {top:314px; left:118px;}
		
		
		/* くるくるムービー */
		#contents01 {background:url(../images/bg_section-movie.png) no-repeat center center; position:relative;}
		#contents01 #movie-area {position:absolute; top:66px; left:34px;}
		
		/* おいしいバランス */
		#contents02 h2 {top:75px; left:195px;}
		#contents02 p {top:155px; left:75px;}

		/* ミルキーゼリーカルピス */
		#contents03 h2 {top:80px; left:87px;}
		#contents03 .material {top:238px; left:77px;}
		#contents03 .photo {top:335px; left:80px;}
		#contents03 .txt {top:335px; left:280px;}
		
		/* フルーツミルクカルピス */
		#contents04 h2 {top:80px; left:110px;}
		#contents04 .material {top:207px; left:45px;}
		#contents04 .photo {top:335px; left:80px;}
		#contents04 .txt {top:335px; left:280px;}
		
		/* ミルクカルピスシャーベット */
		#contents05 h2 {top:80px; left:90px;}
		#contents05 .material {top:238px; left:115px;}
		#contents05 .photo {top:315px; left:70px;}
		#contents05 .txt {top:315px; left:270px;}
		
		/* ラッシー風ミルクカルピス */
		#contents06 h2 {top:80px; left:93px;}
		#contents06 .material {top:220px; left:60px;}
		#contents06 .photo {top:295px; left:70px;}
		#contents06 .txt {top:295px; left:270px;}
	

/*---------------------------------------------------------------------
Footer Layout
---------------------------------------------------------------------*/
#footer {position:fixed; bottom:0; left:0; width:100%; height:120px; clear:both; z-index:9999;}
	div#flash-contents {z-index:1;background:url(../images/bg_footer.gif) repeat-x left top; height:120px;}
	object#flash-contents {background:none;}
	#foot-inner {width:900px; margin:0 auto;}
		#copy {float:left; padding-top:120px;}
		#f-logo {float:right; padding-top:70px;}