@charset "utf-8";

/*-----------------------------------------------------
Container
-------------------------------------------------------*/
#Container{
	width:480px;
	height:320px;
}



/*-----------------------------------------------------
Header
-------------------------------------------------------*/
#Header img{width:100%;height:auto;}

/* h1
---------------------*/
#Header h1{
	width:235px;
	height:235px;
	visibility:hidden;
	position:absolute;
	top:42px;
	left:122px;
	z-index:1000;
}

/* index */
#Header h1.index{
	width:150px;
	height:150px;
	top:85px;
	left:166px;
}
/* section */
#Header h1.section{
	width:235px;
	height:235px;
	top:43px;
	left:-98px;
}

/* ttl
---------------------*/
#Header p.ttl{
	width:65px;
	height:6px;
	visibility:hidden;
	position:absolute;
	top:10px;
	left:10px;
}



/*-----------------------------------------------------
Content
-------------------------------------------------------*/
#Content{}

/* Pager
---------------------*/
#Pager{
	width:100%;
	visibility:hidden;
}
#Pager img{width:100%;height:auto;}

/* prev
---------------------*/
#Pager p.prev{
	position:absolute;
	top:103px;
	right:4px;
}
#Pager p.prev a{
	width:25px;
	height:25px;
	display:block;
	padding:15px 10px 15px 10px;
	-webkit-tap-highlight-color:rgba(109,198,161,0.5);
}

/* next
---------------------*/
#Pager p.next{
	position:absolute;
	top:161px;
	right:04px;
}
#Pager p.next a{
	width:25px;
	height:25px;
	display:block;
	padding:15px 10px 15px 10px;
	-webkit-tap-highlight-color:rgba(109,198,161,0.5);
}



/*-----------------------------------------------------
Index
-------------------------------------------------------*/
#Content section#Index{
	width:440px;
	height:280px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-140px 0 0 -220px;
}
#Index img{width:100%;height:auto;}

#Index nav,
#Index nav ul{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
}
#Index nav ul li{
	width:220px;
	height:140px;
	position:absolute;
}
#Index nav ul li.navi01{top:0;left:0;}
#Index nav ul li.navi02{top:0;left:220px;}
#Index nav ul li.navi03{top:140px;left:220px;}
#Index nav ul li.navi04{top:140px;left:0;}

#Index nav ul li img.over{
	position:absolute;
	top:0;
	left:0;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	-o-transition:all 200ms linear;
	-ms-transition:all 200ms linear;
	-moz-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
}
#Index nav ul li.active img.over{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}


/*-----------------------------------------------------
section
-------------------------------------------------------*/
#Content section{
	width:312px;
	height:250px;
	position:absolute;
	top:38px;
	left:114px;
}


/*-----------------------------------------------------
Section01
-------------------------------------------------------*/
#Section01{}

/* theme
---------------------*/
#Section01 p.theme{
	margin:0 0 14px 0;
}
/* h2
---------------------*/
#Section01 h2{
	margin:0 0 7px 0;
}
/* lead 
---------------------*/
#Section01 p.lead{
	margin:0 0 10px 0;
}


/*--------------------------------
figure
--------------------------------*/
#Section01 div.figure{
	width:100%;
	overflow:hidden;
	position:relative;
}
/* h3
---------------------*/
#Section01 div.figure h3{
	margin:0 0 1px 0;
}
/* img01
---------------------*/
#Section01 div.figure p.img01{
	margin:0 0 11px 13px;
}
/* img02
---------------------*/
#Section01 div.figure p.img02{
	position:absolute;
	top:23px;
	left:11px;
	z-index:1;
}

/* calculation
---------------------*/
#Section01 div.figure div.calculation{
	width:292px;
	height:38px;
	position:relative;
	margin:0 0 0 5px;
	background:url("../images/common/section01_figure_bg01.png") no-repeat 0 0;
	z-index:2;
	-o-background-size:222px 38px;
	-ms-background-size:222px 38px;
	-moz-background-size:222px 38px;
	-webkit-background-size:222px 38px;
	background-size:222px 38px;
}
#Section01 div.figure div.calculation p{
	position:absolute;
	overflow:hidden;
}
#Section01 div.figure div.calculation p.ani01{width:29px;height:17px;top:14px;left:1px;}
#Section01 div.figure div.calculation p.ani02{width:29px;height:17px;top:14px;left:45px;}
#Section01 div.figure div.calculation p.ani03{width:29px;height:17px;top:14px;left:89px;}
#Section01 div.figure div.calculation p.ani04{width:29px;height:17px;top:14px;left:132px;}
#Section01 div.figure div.calculation p.ani05{width:29px;height:17px;top:14px;left:176px;}
#Section01 div.figure div.calculation p.ani06{width:80px;height:42px;top:0;left:218px;}


/* arrow
---------------------*/
#Section01 div.figure div.arrow{
	width:200px;
	height:39px;
	position:relative;
	margin:0 0 0 5px;
	background:url("../images/common/section01_figure_bg02.png") no-repeat 0 0;
	-o-background-size:200px 38px;
	-ms-background-size:200px 38px;
	-moz-background-size:200px 38px;
	-webkit-background-size:200px 38px;
	background-size:200px 38px;
}
/* pop01 */
#Section01 div.figure div.arrow p.pop01{
	width:22px;
	height:22px;
	position:absolute;
	top:6px;
	left:135px;
}
/* pop02 */
#Section01 div.figure div.arrow p.pop02{
	width:22px;
	height:22px;
	position:absolute;
	top:6px;
	left:178px;
}

/* ul
---------------------*/
#Section01 div.figure ul{
	width:100%;
	overflow:hidden;
}
#Section01 div.figure ul li{
	width:40px;
	height:55px;
	float:left;
	display:inline;
	overflow:hidden;
	position:relative;
	margin:0 4px 0 0;
}

/* txt
---------------------*/
#Section01 div.figure p.txt{margin:5px 0 0 1px;}



/*-----------------------------------------------------
Section02
-------------------------------------------------------*/
/* theme
---------------------*/
#Section02 p.theme{
	margin:0 0 14px 0;
}
/* h2
---------------------*/
#Section02 h2{
	margin:0 0 7px 0;
}
/* lead
---------------------*/
#Section02 p.lead{
	margin:0 0 9px 1px;
}


/*--------------------------------
figure
--------------------------------*/
#Section02 div.figure{
	width:100%;
	position:relative;
}
/* h3
---------------------*/
#Section02 div.figure h3{
	margin:0 0 0 0;
}
/* att
---------------------*/
#Section02 div.figure p.att{
	margin:0 0 5px 0;
}
/* kcal
---------------------*/
#Section02 div.figure div.kcal{
	width:170px;
	height:42px;
	position:relative;
	margin:0 0 14px 0;
	background:url("../images/common/section02_bg01.gif") no-repeat 78px 17px;
	-o-background-size:11px 7px;
	-ms-background-size:11px 7px;
	-moz-background-size:11px 7px;
	-webkit-background-size:11px 7px;
	background-size:11px 7px;
}
#Section02 div.figure div.kcal p.ani01{
	width:76px;
	height:42px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
}
#Section02 div.figure div.kcal p.ani02{
	width:85px;
	height:42px;
	overflow:hidden;
	position:absolute;
	top:-2px;
	left:88px;
}

/* case
---------------------*/
#Section02 div.figure div.case{
	width:142px;
	height:126px;
	position:absolute;
	top:30px;
	left:170px;
}
#Section02 div.figure div.case h4{position:absolute;top:10px;left:19px;z-index:8;}
#Section02 div.figure div.case p.txt01{position:absolute;top:88px;left:24px;z-index:7;}
#Section02 div.figure div.case p.txt02{position:absolute;top:88px;left:91px;z-index:6;}
#Section02 div.figure div.case p.txt03{position:absolute;top:119px;left:61px;z-index:5;}
#Section02 div.figure div.case p.img{position:absolute;top:45px;left:64px;z-index:4;}
#Section02 div.figure div.case p.ani01{width:40px;height:52px;overflow:hidden;position:absolute;top:28px;left:20px;z-index:3;}
#Section02 div.figure div.case p.ani02{width:30px;height:52px;overflow:hidden;position:absolute;top:28px;left:94px;z-index:2;}
#Section02 div.figure div.case div.bg{width:142px;height:115px;position:absolute;top:0;left:0;z-index:1;}

/* dl
---------------------*/
#Section02 div.figure dl{
	width:150px;
	overflow:hidden;
}
#Section02 div.figure dl dt{
	padding:0 0 0 0;
}
#Section02 div.figure dl dd{
	width:50px;
	height:75px;
	position:relative;
	float:left;
	display:inline;
	overflow:hidden;
	margin:0 5px 0 -5px;
}



/*-----------------------------------------------------
Section03
-------------------------------------------------------*/
#Section03{}
/* theme
---------------------*/
#Section03 p.theme{
	margin:0 0 14px 0;
}
/* h2
---------------------*/
#Section03 h2{
	margin:0 0 7px 0;
}
/* lead
---------------------*/
#Section03 p.lead{
	padding:0 0 8px 0;
}
/* ani01
---------------------*/
#Section03 p.ani01{
	width:75px;
	height:45px;
	position:relative;
	overflow:hidden;
	float:left;
	display:inline;
	margin:15px 4px 0 2px;
}
/* ani02
---------------------*/
#Section03 p.ani02{
	width:110px;
	height:60px;
	position:relative;
	overflow:hidden;
	float:left;
	display:inline;
}
/* breakdown
---------------------*/
#Section03 div.breakdown{
	width:191px;
	height:115px;
	position:relative;
	clear:both;
	background:url("../images/common/section03_bg.gif") no-repeat 0 0;
	
	-o-background-size:191px 115px;
	-ms-background-size:191px 115px;
	-moz-background-size:191px 115px;
	-webkit-background-size:191px 115px;
	background-size:191px 115px;
}
#Section03 div.breakdown p{
	width:75px;
	height:36px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
}
#Section03 div.breakdown p.ani03{top:28px;left:9px;}
#Section03 div.breakdown p.ani04{top:28px;left:99px;}
#Section03 div.breakdown p.ani05{top:69px;left:9px;}
#Section03 div.breakdown p.ani06{top:68px;left:99px;}
/* dl
---------------------*/
#Section03 dl{
	width:100px;
	position:absolute;
	top:111px;
	left:208px;
}
#Section03 dl dt{
	margin:0 0 0 2px;
}
#Section03 dl dd{
	margin:0 0 8px 0;
}
/* ani07
---------------------*/
#Section03 p.ani07{
	width:55px;
	height:36px;
	overflow:hidden;
	position:absolute;
	top:25px;
	left:225px;
}



/*-----------------------------------------------------
Section04
-------------------------------------------------------*/
#Section04{
	width:312px;
	height:250px;
	position:absolute;
	top:67px;
	left:175px;
}
/* theme
---------------------*/
#Section04 p.theme{
	margin:0 0 13px 0;
}
/* h2
---------------------*/
#Section04 h2{
	margin:0 0 7px 0;
}
/* lead
---------------------*/
#Section04 p.lead{
	margin:0 0 0 1px;
}
/* img01
---------------------*/
#Section04 p.img01{
	margin:0 0 8px 0;
}
/* img02
---------------------*/
#Section04 p.img02{
	margin:0 0 7px 0;
}
/* img03
---------------------*/
#Section04 p.img03{
	margin:0 0 0 0;
}
/* pop
---------------------*/
#Section04 p.pop{
	width:61px;
	height:68px;
	position:absolute;
	top:84px;
	left:203px;
}
/* item
---------------------*/
#Section04 p.item{
	position:absolute;
	top:145px;
	left:244px;
}
/* ani01
---------------------*/
#Section04 p.ani01{
	width:32px;
	height:28px;
	overflow:hidden;
	position:absolute;
	top:153px;
	left:211px;
}



/*-----------------------------------------------------
Loading
-------------------------------------------------------*/
#Loading{
	width:25px;
	height:25px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-12px 0 0 -12px;
}



/*-----------------------------------------------------
Warning
-------------------------------------------------------*/
#Warning{
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	top:0;
	left:0;
	background:#000;
	opacity:0.9;
	z-index:1000;
}
#Warning p.ipad{
	width:245px;
	height:189px;
	/* display:none; */
	position:absolute;
	top:50%;
	left:50%;
	margin:-84px 0 0 -122px;
}
#Warning p.ipad img{width:100%;height:auto;}



/*-----------------------------------------------------
Footer
-------------------------------------------------------*/
#Footer{width:100%;}

/* close_btn
---------------------*/
#Footer p.close_btn{
	width:25px;
	height:25px;
	position:absolute;
	top:0;
	right:0;
	z-index:9999;
}
#Footer p.close_btn img{width:100%;height:auto;}