/* =====================================================================
*
*    INDEX
*
*
*    1. Feature
*
*    2. Ingredients for AGE FITNESS
*       2.1 Extra
*       2.2 PTP
*       2.3 Doctor
*
*    3. About First Aging
*       3.1 Change
*       3.2 Protein
*
* =================================================================== */

#frame {
    /*
        absoluteの親要素が、relativeの場合のみ
        中央揃えでも絶対指定ができるようになる。
        （省略不可）
    */
    position: relative;
}


/* =====================================================================
*
*    1. Feature
*
* =================================================================== */

#feature {
	width: 890px;
	margin: 0 auto;
	padding-top: 10px;
	text-align: center;
}

#feature .info {
	margin: 10px 0 40px 0;
	text-align: center;
}

#feature .cont {
	width: 100%;
	background: url(images/feat_catch_bg.jpg) center top no-repeat;
}

#feature .ttl {
	width: 890px;
	height: 40px;
	background: url(images/feat_ttl.jpg) no-repeat;
	text-align: center;
}

#fDesc1 {
	float: left;
	width: 385px;
	padding: 0 0 0 40px;
	text-align: left;
}

#fDesc1 .desc1 {
	width: 384px;
	height: 97px;
	background: url(images/feat_desc1.gif) 0 3px no-repeat;	
}

#fDesc1 .desc2 {
	width: 367px;
	height: 45px;
	background: url(images/feat_desc2.gif) no-repeat;	
}

#fDesc2 {
	float: right;
	width: 385px;
	padding: 0 40px 0 0;
	text-align: left;
}

#fDesc2 p {
	padding-bottom: 20px;
}


/* ---------------------------------
*    注釈表示
*/

#fDesc2 ul { width: 100%; }

#fDesc2 li {
	color: #999999;
	padding-left: 20px;
}

#fDesc2 li.note1 { background: url(images/mark_note1.gif) no-repeat; }
#fDesc2 li.note2 { background: url(images/mark_note2.gif) no-repeat; }
#fDesc2 li.note3 { background: url(images/mark_note3.gif) no-repeat; }

#fDesc2 li span { display: none; }


/* =====================================================================
*
*    2. Ingredients for AGE FITNESS
*
* =================================================================== */

#ing .cont {
	padding: 0 40px;
	background: none;
}
	
#ing h2 {
	height: 79px;
	background: url(images/ing_ttl.jpg) no-repeat;
}

#ing h3 {
	height: 40px;
	background: url(images/ing_catch.gif) no-repeat;
}


/* ---------------------------------------------------------------------
*    2.1 Extra
* ------------------------------------------------------------------- */

#ext h4 {
	height: 48px;
	margin: 40px 0 0 0;
	background: url(images/ing_ext_ttl.gif) no-repeat;
}

#ext .extBox {
	width: 250px;
}

#ext .sideL {
	float: left;
	margin: 0 30px 0 0;
}

#ext .sideR {
	float: right;
}

#beech h5 {
	height: 54px;
	background: url(images/ing_ext_ttl1.gif) no-repeat;
}

#olive h5 {
	height: 54px;
	background: url(images/ing_ext_ttl2.gif) no-repeat;
}

#whitewillow h5 {
	height: 54px;
	background: url(images/ing_ext_ttl3.gif) no-repeat;
}

#ing .plus {
	background: url(images/col_bdr.jpg) center center no-repeat;
}

#ing .plus span {
	height: 35px;
	margin: 20px 0;
	background: url(images/ing_ext_plus.gif) center no-repeat;
}


/* ---------------------------------------------------------------------
*    2.2 PTP
* ------------------------------------------------------------------- */

#ptp h4 {
	height: 38px;
	background: url(images/ing_ptp_ttl.gif) no-repeat;
}

#ptp .desc {
	float: left;
	width: 530px;
}

#ptp .figure {
	float: right;
	width: 216px;
	margin: 0 0 0 20px;
}


/* ---------------------------------
*    注釈表示
*/

#ptp ul {
	float: right;
	width: 250px;
}

#ptp ul li {
	padding-left: 20px;
}

#ptp ul li.note1 { background: url(common/images/mark_note1.gif) no-repeat; }
#ptp ul li.note2 { background: url(common/images/mark_note2.gif) no-repeat; }
#ptp ul li.note3 { background: url(common/images/mark_note3.gif) no-repeat; }

#ptp ul li span { display: none; }

#ing #dr {
	width: 890px;
	margin: 34px auto 0 auto;
	background: url(images/ing_dr_bg_mid.jpg) repeat-y;
	text-align: left;
}

#ing #dr #drWrap {
	background: url(images/ing_dr_bg_top.jpg) no-repeat;
}

#ing #dr #drCont {
	padding: 26px 40px 24px 40px;
	background: url(images/ing_dr_bg_btm.jpg) left bottom no-repeat;
}


/* ---------------------------------------------------------------------
*    2.3 Doctor
* ------------------------------------------------------------------- */

#drCont #drPort {
	float: right;
	padding: 0 26px 0 0;
}

#drCont .desc {
	float: left;
	width: 530px;
}

#drCont .desc em {
	height: 23px;
	margin-top: 22px;
	background: url(images/ing_dr_subttl.gif) no-repeat;
}

#drCont .desc h5 {
	height: 43px;
	background: url(images/ing_dr_ttl.gif) no-repeat;
}


/* =====================================================================
*
*    3. About First Aging
*
* =================================================================== */

#about h2 {
	height: 78px;
	background: url(images/about_ttl.jpg) no-repeat;
}

#about h3 {
	height: 78px;
	background: url(images/about_ttl_20100401.jpg) no-repeat;
}


#about div.catch {
	margin: 0 0 17px 0;
	padding: 0 0 17px 0;
	background: urlimages/col_bdr.jpg) center bottom no-repeat;
}

#about .catch em {
	height: 49px;
	background: url(images/about_catch.gif) no-repeat;
}

#about .catch h3 {
	height: 36px;
	background: url(images/about_catch_subttl.gif) no-repeat;
}


/* ---------------------------------------------------------------------
*    3.1 Change
* ------------------------------------------------------------------- */

#about #change {
	float: left;
	width: 520px;
}

#change h3 {
	height: 48px;
	background: url(images/about_change_ttl.gif) no-repeat;
}


/* ---------------------------------
*    肌密度が高く、ハリのある健康的な肌
*/

#chWrapG {
	width: 520px;
	background: url(images/about_bg1_mid.jpg) repeat-y;
}

#chWrapG .container {
	background: url(images/about_bg1_top.jpg) left top no-repeat;
}

#chWrapG .container .box {
	padding: 20px 20px 28px 20px;
	background: url(images/about_bg1_btm.jpg) left bottom no-repeat;
}

#chWrapG h4 {
	float: left;
	width: 276px;
	height: 16px;
	background: url(images/about_change_subttl1.gif) no-repeat;
}

#chWrapG img {
	float: right;
}


/* ---------------------------------
*    加齢やストレス、紫外線などによって肌のプロテインが減少、肌機能が徐々に低下し始めた肌
*/

#chWrapY {
	width: 520px;
	background: url(images/about_bg2_mid.jpg) repeat-y;
}

#chWrapY .container {
	background: url(images/about_bg2_top.jpg) left top no-repeat;
}

#chWrapY .container .box {
	padding: 20px 20px 38px 20px;
	background: url(images/about_bg2_btm.jpg) left bottom no-repeat;
}

#chWrapY .descL {
	float: left;
	width: 280px;
	padding: 0 20px 0 0;
}

#chWrapY .descL em {
	height: 43px;
	background: url(images/about_change_20.gif) no-repeat;
}

#chWrapY .descL h4 {
	height: 91px;
	background: url(images/about_change_subttl2.gif) no-repeat;
}

#chWrapY .descL #checkPoint {
	height: 78px;
	background: url(images/about_change_point.gif) no-repeat;
}

#chWrapY .descR {
	float: right;
	width: 160px;
}


/* ---------------------------------
*    エイジングが進行し、肌機能が低下した肌
*/

#chWrapW {
	width: 520px;
	background: url(images/about_bg3_mid.jpg) repeat-y;
}

#chWrapW .container {
	background: url(images/about_bg3_top.jpg) left top no-repeat;
}

#chWrapW .container .box {
	padding: 20px 20px 8px 20px;
	background: url(images/about_bg3_btm.jpg) left bottom no-repeat;
}

#chWrapW .descL {
	float: left;
	width: 280px;
}

#chWrapW .descL h4 {
	height: 36px;
	background: url(images/about_change_subttl3.gif) no-repeat;
}

#chWrapW img.descR {
	float: right;
}


/* ---------------------------------------------------------------------
*    3.2 Protein
* ------------------------------------------------------------------- */

#about #pro {
	float: right;
	width: 250px;
}

#pro h3 {
	height: 48px;
	background: url(images/about_pro_ttl.gif) no-repeat;
}

#pro ol {
	width: 250px;
	margin-bottom: 30px;
}

#pro ol li.bdr {
	padding: 0 0 44px 0;
	margin-bottom: 9px;
	background: url(images/about_pro_plus.gif) left bottom no-repeat;
}

#pro ol li p {
	padding: 10px 0 0 46px;
}

#pro strong.catch {
	height: 496px;
	background: url(images/about_img1.jpg) no-repeat;
}

#pro ol li .one {
	height: 27px;
	background: url(images/about_pro_subttl1.gif) no-repeat;
}

#pro ol li .two {
	height: 27px;
	background: url(images/about_pro_subttl2.gif) no-repeat;
}

#pro ol li .three {
	height: 27px;
	background: url(images/about_pro_subttl3.gif) no-repeat;
}

#about #layerNavi {	/* コクピット画像を乗せているです */
background:#DDDDDD;
	position:absolute;
    width:800px;
	text-align:center;
}

#about #artist_1 {position:relative; left:0px; top:0px; width:140px; height:200px;line-height:120%;font-size:11pt;}
#about #artist_2 {position:relative; left:160px; top:0px; width:140px; height:200px;line-height:120%;font-size:11pt;}
#about #artist_3 {position:relative; left:320px; top:0px; width:140px; height:200px;line-height:120%;font-size:11pt;}
#about #artist_4 {position:relative; left:480px; top:0px; width:140px; height:200px;line-height:120%;font-size:11pt;}
#about #artist_5 {position:relative; left:640px; top:0px; width:140px; height:200px;line-height:120%;font-size:11pt;}

#about #layer6 {	/* コンソールボタン一列目側 */
    position: absolute;
	text-align:left;
    top:0px;                      /* 値は適宜変更 */
    left: 0px;
    width:810px;
    height:220px;
}
#about #layer7 {	/* コンソールボタン二列目側 */
    position: absolute;
	text-align:left;
    top:230px;                      /* 値は適宜変更 */
    left: 0px;
    width:810px;
    height:220px;
}