@charset "utf-8";

/* ------------------------------------------------------------
	0. common
------------------------------------------------------------ */ 

/* font */
 .ab14 { font-size:14px; word-break: break-all; color:#666666; font-family: "lr oSVbN", "Osaka"; }
 .ab12 { font-size:12px; line-height: 19px; word-break: break-all; color:#666666; font-family: "lr oSVbN", "Osaka"; }
 .ab10 { font-size:10px; letter-spacing:0px; word-break: break-all; color:#666666; font-family: "lr oSVbN", "Osaka"; }
 .ab10st {
	font-size:10px;
	letter-spacing:0px;
	word-break: break-all;
	color:#666666;
	font-family: "lr oSVbN", "Osaka";
}
 .ad19 { line-height: 19px;}
 .ad10red { font-size:10px;  color: #FF0000; font-weight:bold ;}
 
 .mb0 {margin-bottom:0px;}

/* Life-X biginner */ 
  #header_ab {  }
  #container_ab {
	width: 860px;
	margin:0px auto;
	text-align: left;
	line-height:1.35em;
 }
  #footer_ab {  }
 
.hdlogo { margin-top:6px; margin-left:15px; }
.clear { clear: both; }
.h1about {	background-image: url(../img/h1_about.gif);}
.bullet{
	background: url(../img/bullet_glay.gif) no-repeat 0px 5px ;
	padding-left:12px;
}
div#photo h2, 
div#friend h2, 
div#happy h2{
	background:url(../img/h2.gif) no-repeat;
	width:860px;
	height:40px;
	margin-bottom:25px;
}
div#photo h2 img, 
div#friend h2 img, 
div#happy h2 img{
	margin:11px 0px 0px 20px;
}
 
/* ------------------------------------------------------------
	1. main
------------------------------------------------------------ */ 
/* main Visual */ 
div#mainVisual {
	height:400px;
	position: relative;
}
div#mainVisual div.fla{
	position:absolute;
	left: 0px;
	top: 0px;
}
div#mainVisual h1.h1about {
	position:absolute;
}
div#mainVisual div.cpArea{
	position:absolute;
	right: 30px;
	top: 5px;
}
div#mainVisual div.cpArea img{
	border:5px #E0E0E0 solid;
}
/* main feature */ 
div#mainfeature{
	margin-bottom:60px;
}
div#mainfeature div.wrappar {
	border:1px #CCCCCC solid;
}
div#mainfeature .colR {
	width:285px;
	border-right:1px #CCCCCC solid;
	float:left
}
div#mainfeature .colR h2{
	margin: 15px 0px 10px 15px;
}
div#mainfeature .colR .featureImages{
	float:right;
	margin:0px 15px 15px 0px;
}
div#mainfeature .colR .featureText{
	float:left;
	display:block;
	width:125px;
	margin: 0px 0px 15px 15px !important;
	margin: 0px 0px 15px 8px;
}
div#mainfeature .colR .bulletR {
	width:80px;
	margin:0px 15px 15px 0px;
	float:right;
}
div#mainfeature .end{
	border-right:0px #CCCCCC solid;
}

/******* campign CSS ******/ 
div.cpArea_banner {
clear:both;
text-align:center;
margin-top:25px;
}
div#mainfeature{margin-bottom:30px;}
/******* campign CSS ******/ 

/* ------------------------------------------------------------
	2. photo
------------------------------------------------------------ */ 
div#photo {
	margin-bottom:60px;
}
div#photo h3{
margin-bottom:10px;
}
div#photo p.read{
	margin-bottom:25px;
}
div#photoFeature1, 
div#photoFeature2{
	margin-bottom:40px;
	position:relative;
}
div#photoFeature1 .colR {
	width:295px;
	float:left
}
div#photoFeature1 .colR .featureImages{
	margin:0px 0px 10px 0px;
}
div#photoFeature1 .colR p{
	margin:0px 20px 5px 0px;
}
div#photoFeature1 .end {width:270px;}
div#photoFeature1 .end .featureImages, 
div#photoFeature1 .end p{margin-right:0px;}
div#photoFeature2 p.read {
	margin-bottom:5px;
}
div#photoFeature2 p.bullet{
float:right;
margin-bottom:10px;
}

div#photoColumn {
	position:relative;
	border:1px #d3d3d3 solid;
	background:#f6f6f6;
	margin:0px;
}
div#photoColumn h3{
margin:15px 0px 10px 15px;
}
div#photoColumn p{
width:290px;
margin:0px 0px 10px 15px;
}
div#photoColumn .skinImages{
	position:absolute;
	right: 20px;
	top: 25px;
}

/* ------------------------------------------------------------
	2. friend
------------------------------------------------------------ */ 
div#friend {
	margin-bottom:50px;
}
div#friend h3{
	margin-bottom:10px;
}
div#friend p.read{
margin-bottom:10px;
}
div#friend p.caution{
margin-bottom:10px;
font-size:80%;
}
div#friendFeature{
	margin-bottom:30px;
}
div#friendFeature div.colR {
	width:460px;
	float:left;
	margin-right:20px;
}

/* ------------------------------------------------------------
	3. happy
------------------------------------------------------------ */ 
div#happy {
	margin-bottom:20px;
}
div#happy h3{
	margin-bottom:10px;
}
div#happy p.read{
margin-bottom:10px;
}
div#happyFeature{
	margin-bottom:35px;
}
div#happyFeature div.colR {
	width:360px;
	float:left;
	margin-right:20px;
}
div#happyFeature div.colR2 {
	width:500px;
	float:left;
	margin-right:20px;
}

/* ------------------------------------------------------------
	4. recommend
------------------------------------------------------------ */ 
div#recommend {
	margin-bottom:40px;
	color:#221815;
}

div#recommend h2{
text-align:center;
margin-bottom:20px;
}

div#recommend div.recommendFeature {
width:850px;
background-color:#8dc556;
padding:15px 0px 10px 10px;
}

div#recommend div.bgWhite {
background-color:#ffffff;
}

div#recommend div.recommendFeature h3 {
display:block;
width:215px;
float:left;
}
div#recommend div.recommendFeature .col1{
width:285px;
float:left;
}

div#recommend div.recommendFeature .arrow1{
padding-right:45px;
background: url(../img/recommend_arrow1.gif) 300px 50px no-repeat;
}

div#recommend div.recommendFeature .arrow2{
padding-right:45px;
background: url(../img/recommend_arrow2.gif) 300px 50px no-repeat;
}

div#recommend div.recommendFeature p.title{
margin-bottom:10px;
}

div#recommend div.recommendFeature p.read{
	width:160px;
}
div#recommend div.recommendFeature p.read150{
	width:150px;
}
div#recommend div.recommendFeature p.read170{
	width:170px;
}


div#recommend div.recommendFeature img.images{
float:right
}

/* ------------------------------------------------------------
	4. entry
------------------------------------------------------------ */ 
div#entry {
	margin-bottom:50px;
	text-align:center
}

div#entry p{
	margin-bottom:20px;
}

/* ------------------------------------------------------------
	5. info
------------------------------------------------------------ */ 
div#info {
	border-top:1px solid #CCCCCC;
	margin-bottom:40px;
	padding-top:10px;
}

div#info p{
font-size:75%;
}



/* ------------------------------------------------------------
	99. Clearfix
------------------------------------------------------------ */

.clearfix:after {
    content: ".";   
    display: block;   
    visibility: hidden;   
    height: 0.1px;   
    font-size: 0.1em;   
    line-height: 0;   
    clear: both;   
}

.clearfix {
  display: inline-block;
  min-height: 1px;
  zoom: 100%;  
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}