@charset "UTF-8";
@import "base.css";
@import "fonts.css";

/*==========================================================================*/
/*//////////////////////////////////////////////////////////////////////////*/
/*//////                                                              //////*/
/*//////  Copyright (C) 2009 株式会社フリーセル All Rights Reserved.  //////*/
/*//////                                                              //////*/
/*//////////////////////////////////////////////////////////////////////////*/
/*                                                                          */
/*    base.css  --> スタイルの初期設定を行うため、変更しないで下さい。      */
/*    fonts.css --> フォントの初期設定を行うため、変更しないで下さい。      */
/*                                                                          */
/*==========================================================================*/

/*==========================================================================*/
/*                           Common-Setting                                 */
/*==========================================================================*/

/* 基本タグのフォントサイズを指定（12px -> 120% or 1.2em ） */
h1, h2, h3, h4, h5, h6, button, p, blockquote, table, pre, address, ul, ol, dl { font-size: 140%; line-height: 1.5;}

ul ul,
ul ol,
ul dl,
ul p,
ol ul,
ol ol,
ol dl,
ol p,
dl ul,
dl ol,
dl dl,
dl p,
table table,
table ul,
table ol,
table dl,
table p{ font-size: 100%;}


.w90 {width:90% !important;}

/*==========================================================================*/
/*                            Common                                        */
/*==========================================================================*/

body { min-width: 960px; font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", arial, clean, verdana, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; text-align: center; background: #fff url(../images/bg.png) repeat-x 50% 0; color: #412312; cursor: auto;}

h1 { text-align: right; color: #ccc; font-size: 10px;}
h3,
h4 { padding: 15px 0 10px;}

h5 {
	border-left: 5px solid #6cbdc8;
	border-bottom: 2px solid #ccc;
	padding: 2px 0 2px 5px;
	margin: 15px 10px 10px;
	font-weight: bold;
}

p { padding: 5px 10px 10px;}
ol { margin: 12px 0; padding: 0 0 0 30px;}
dl { margin: 12px 0;}

a         { color: #0071bb; text-decoration: underline; cursor: pointer;}
a:visited { color: #3b41a4;}
a:hover   { color: #f80;}
a:focus,
a:active  { color: #f90;}

.strong { font-weight: bold; color: #a00d18;}
abbr, acronym { cursor: help;}

sup { vertical-align: super; font-size: 100%;}
sub { vertical-align: baseline; font-size: 100%;}


hr { display: none;}
img { border: none; color: #fff; background: transparent; vertical-align: bottom;}

table { border: 1px solid #b0a59e; border-collapse: collapse; margin: 0 10px 15px;}
caption { text-align: left;}
thead {}
tbody {}
th { white-space: nowrap; background: url(../images/th.gif) repeat-x 0 50%;}
th, td { padding: 5px 10px; border-collapse: collapse; border: 1px solid #b0a59e; text-align: left;}


fieldset { border: 1px solid #ddd; margin-bottom: 15px; padding: 10px;}
* html legend { margin: 0 0 10px;}
input, textarea { padding: 1px;}
input.typeText { border: 1px solid #aaa;}
select option { padding: 0 5px;}
input:focus, select:focus, textarea:focus { background-color: #fafafa;}
label { cursor: pointer;}



/******************************************************************** clearfix
*/

/******************** except IE */
#container:after,
.box1:after,
.box2:after,
.section:after,
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/******************** for IE */
#container,
.box1,
.box2,
.section,
.clearfix { display: inline-block;}

/* Holly Hack Targets IE Win only \*/
* html #container,
* html .box1,
* html .box2,
* html .section,
* html .clearfix { height: 1%;}
#container,
.box1,
.box2,
.section,
.clearfix { display: block;}
/* End Holly Hack */


/******************************************************************** utilities
*/

.aL { text-align: left;}
.aC { text-align: center;}
.aR { text-align: right;}
.fR { float: right;}
.fL { float: left;}
.clr { float: none; clear: both;}


.gothic { font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;}
.jp { font-family: "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;}
.verdana { font-family: Verdana, sans-serif;}
.times { font-family: "Times New Roman", Times, serif;}

.tempNotes { color: #c00; font-weight: bold; background: #f8f8f8; margin: 1em;}


/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/

#wrapper { width: 100%;}

#header,
#container,
#footer { width: 960px; margin: 0 auto; text-align: left;}

#header { position: relative; height: 125px;}

#container {}
#col-a     { position: relative; display: inline; float: left;  width: 806px;}
#contents  { position: relative; display: inline; float: right; width: 640px; padding-top: 10px;}
#nav       { position: relative; float: left; width: 150px; text-align: center; background: url(../images/nav_bg.png) repeat-y;}
#col-b     { position: relative; float: right; width: 136px;}

#footer { clear: both; margin-top: 38px; padding: 38px 0; border-top: 1px solid #cbc2bc; color: #999;}


/*==========================================================================*/
/*                               Header                                     */
/*==========================================================================*/

#header p,
#header ul   { position: absolute;}
#header p    { top: 47px; left: 3px;}
#header ul   { top: 34px; left: 761px; width: 210px;}
ul#globalnav { top: 69px; left: 246px; width: 450px;}

#header li { display: inline; float: left; margin-left: 11px;}
#globalnav li { margin: 0;}


/*==========================================================================*/
/*                              Footer                                      */
/*==========================================================================*/

#footer * { line-height: 1.5; font-size: 12px;}
.pagetop { margin: -1.5em 0 0; text-align: right;}

/*==========================================================================*/
/*                            Navigation                                    */
/*==========================================================================*/

#nav ul { padding-bottom: 21px;}
#nav li ul { padding-bottom: 0;}

#nav-system li ul { padding-bottom: 14px; background: url(../images/nav_system_bg.png) no-repeat 0 100%;}

#nav-banners { padding-bottom: 54px; background: url(../images/nav_bg_bottom.png) no-repeat 0 100%;}
#nav-banners li { margin-bottom: 5px;}

#col-b img { margin-bottom: 8px;}


/*==========================================================================*/
/*                             Contents                                     */
/*==========================================================================*/

#breadcrumbsList {
	padding: 0 0 5px;
	margin: 0 auto;
	text-align: right;
	font-size: 120%;
	position: relative;
	top: 23px;
	right: 160px;
}

.section { position: relative; margin-bottom: 21px; background: url(../images/common_section_bg.png) 0 100%;}
.section p { margin: 14px 19px;}

.box1 { margin-bottom: 21px; border: 1px solid #b0a59e;}
.box1 dl,
.box1 p { margin: 10px 12px;}

.box2 {
	margin-bottom: 21px;
	background: #bdafa5;
	background: url(../images/common_box2_bg.png) 0 100%\9; /* Hack for IE8 and below - CSS 検証サービスでエラーとなります */
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.thumbtack { position: absolute; top: 10px; right: 12px;}
#contents p.thumbtack { margin: 0;}

#contents .imgR { float: right; padding-left: 10px;}




/* index
------------------------------------------------------------------------*/

#main-image { overflow: hidden; position: relative; width: 100%; height: 179px;}
.home #main-image { height: 399px;}
.home #main-image h2 img { position: absolute; top: 0; left: 50%; margin-left: -750px;}

#main-image ul {
	position: absolute;
	top: 180px;
	left: 50%;
	width: 960px;
	height: 90px;
	margin-left: -480px;
	padding: 9px 0 0 13px;
	background: url(../images/home_main_nav_bg.png) no-repeat;
}
.home #main-image ul { top: 293px;}

#main-image li {
	display: inline;
	float: left;
	width: 122px;
	height: 60px;
	margin-left: 5px;
	padding: 3px;
	background-color: transparent;
	-webkit-transition: background-color 1s linear;
	-moz-transition: background-color 1s linear;
	-ms-transition: background-color 1s linear;
	-o-transition: background-color 1s linear;
	transition: background-color 1s linear;
}
#main-image .current {
	background-color: #4d352d;
	-webkit-transition: background-color .6s linear;
	-moz-transition: background-color .6s linear;
	-ms-transition: background-color .6s linear;
	-o-transition: background-color .6s linear;
	transition: background-color .6s linear;
}


#whatsEBM { min-height: 219px; background: url(../images/home_i0.jpg) no-repeat 100% 63px;}
* html #whatsEBM { height: 219px;}

#whatsEBM p { margin: 16px 162px 16px 10px; padding: 0;}

#skincare-studio ul { width: 488px; height: 124px; padding-left: 84px; background: url(../images/home_i2.jpg) no-repeat 6px 0;}
#base-make ul       { width: 495px; height: 126px; padding-left: 140px; background: url(../images/home_i1.jpg) no-repeat 5px 0;}
* html #skincare-studio ul { width: 640px;}
* html #base-make ul       { width: 640px;}
#base-make li,
#skincare-studio li { display: inline; float: left;}
#base-make p,
#skincare-studio p { margin-top: 8px; margin-bottom: 3px; padding: 0;}

.home h3 { padding: 0;}

#news { display: inline; float: left; width: 474px;}
#news h3 { border-bottom: 1px solid #b0a59e;}
#news dl {width: 450px; height: 134px; font-size: 12px;}
#news dt { font-weight: bold; font-size: 10px;}
#news dd { margin-bottom: 4px; padding-bottom: 4px; background: url(../images/border_dotted_h.png) repeat-x 0 100%;}
.naka02_s { font-size: 10px;}

.home p.fR { padding: 0;}

.home .box2 { clear: both;}
.home .box2 ul { height: 156px; margin-left: 10px;}
.home .box2 li { display: inline; float: left; margin-top: 10px; margin-left: 17px;}


/* items
------------------------------------------------------------------------*/

.items #contents .box { padding: 0 10px;}

.items #contents .box p { padding: 0;}

.items #contents .box dl {
	background: #f9f7f2;
	width: 340px;
	padding: 20px;
	margin: 0 0 10px;
	float: right;
}

* html .items #contents .box dl { width: 380px;}

.items #contents .box dl.lo { min-height: 110px; height: auto !important; height: 150px;}
.items #contents .box dl.lo2 { min-height: 140px; height: auto !important; height: 180px;}
.items #contents .box dl.lo3 { min-height: 15px; height: auto !important; height: 15px;}

.items #contents .box dt {
	background: url(../images/icon1.gif) no-repeat 0 6px;
	height: 1%;
	padding-left: 13px;
	margin-bottom: 5px;
	font-weight: bold;
}

.items #contents .box ul { padding-left: 15px; list-style: disc;}
.items #contents .box li { margin-bottom: 5px;}

.items #contents p.pagetop {
	border-top: 1px solid #624339;
	margin: 10px 0 0;
	padding: 10px 0 0;
}

.items #contents dl.ver2 {
	background: #f9f7f2;
	width: 580px;
	padding: 20px;
	margin: 0 0 10px 10px;
}

.items #contents dl.ver2 ul {
	list-style: disc;
	padding-left: 15px;
	}

* html .items #contents dl.ver2 { width: 620px;}

.items #contents dl.ver2 dt {
	height: 1%;
	padding: 5px 0 0 35px;
	margin-bottom: 5px;
	font-weight: bold;
}


.p20 {text-indent:-20px !important;}

.items #contents dl.ver2 dt.no1 { background: url(../images/items-no1.gif) no-repeat 0 0;}
.items #contents dl.ver2 dt.no10 { background: url(../images/icon1.gif) no-repeat 0 10px;}
.items #contents dl.ver2 dt.no2 { background: url(../images/items-no2.gif) no-repeat 0 10px;}
.items #contents dl.ver2 dt.no3 { background: url(../images/items-no3.gif) no-repeat 0 10px;}

.items #contents dl.ver2 dt.no2,
.items #contents dl.ver2 dt.no3 { border-top: 1px solid #cbc2bc; padding-top: 15px; margin-top: 10px;}

.items #contents .box p.text {
	background: #f9f7f2;
	width: 340px;
	min-height: 90px;
	height: auto !important;
	height: 130px;
	padding: 20px;
	margin: 0 0 10px;
	float: right;
}


* html .items #contents .box p.text { width: 380px;}


/* concept
------------------------------------------------------------------------*/

.concept #contents ul.normal {
	background: #f9f7f2;
	width: 555px;
	padding: 20px 20px 20px 45px;
	margin: 0 0 10px 10px;
	list-style: disc;
}

* html .concept #contents ul.normal { width: 620px;}

.concept #contents ul.normal li { margin-bottom: 5px;}


/* company
------------------------------------------------------------------------*/

.gMap { width: 620px; height: 400px; margin: 0 10px;}
.gMap .gMapInfoWindow dl { margin: 0;}
.gMap .gMapInfoWindow dt { font-weight: bold;}

.company #contents td ul { padding-left: 25px; list-style: disc;}
.company #contents td ul li { margin-bottom: 5px;}


/* office
------------------------------------------------------------------------*/

.office #contents ul.bn {
	background: url(../images/office-bn.gif) no-repeat;
	width: 597px;
	height: 125px;
	padding: 15px 0 0 23px;
	margin: 0 10px;
}

* html .office #contents ul.bn { width: 620px; height: 140px;}

.office #contents ul.bn li { float: left; padding-right: 11px; margin-bottom: 10px;}

.office #contents ul.list {
	width: 370px;
	padding: 0 10px;
	margin: 0;
	float: left;
}

* html .office #contents ul.list { width: 390px;}

.office #contents ul.list li {
	background: url(../images/icon2.gif) no-repeat 0 7px;
	height: 1%;
	padding-left: 10px;
	margin-bottom: 5px;
}

.office #contents dl {
	background: #f9f7f2;
	width: 580px;
	padding: 15px 20px;
	margin: 0 0 10px 10px;
}

* html .office #contents dl { width: 620px;}

.office #contents dl dt {
	background: url(../images/icon1.gif) no-repeat 0 6px;
	height: 1%;
	padding: 0 0 0 15px;
	margin-bottom: 5px;
	font-weight: bold;
}


/* system
------------------------------------------------------------------------*/

.system #contents ul.bn { padding: 0 10px;}
.system #contents ul.bn li { float: left; padding-right: 16px;}
.system #contents ul.bn li.end { padding-right: 0;}


/* bali, mandi, ebcc
------------------------------------------------------------------------*/

.bali #contents .text, .mandi #contents .text, .ebcc #contents .text { float: right; width: 479px;}

#tiny {height:134px; overflow:scroll; overflow-x:hidden;}

.info_txt {padding:0 5px; font-size:8px !important; color:#FFF;}

.bg_none {background:none !Important;}

/* information
------------------------------------------------------------------------*/

.glaybg {
    padding: 0.8em 1em;
    background-color: #f8f8f8;
    margin-bottom: 30px;
    display: table;
}