@charset "utf-8";
/* CSS Document */

/* ------------------------------------------------------------
	Default
------------------------------------------------------------ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p
,blockquote,th,td {
     margin: 0;
     padding: 0;
     color: #666;  
     font-size: 13px;  
     line-height: 130%;
}

ol,ul {
     list-style: none;
}
fieldset,img {
     border: 0;
}

body {
	background: #FFF;
	font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
	}

a:hover img {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”
	}

/* ------------------------------------------------------------
	common
------------------------------------------------------------ */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;}

.clearfix {
	display: inline-table;
	min-height: 1%;}

.clear {
	clear: both; }
	
.dot{
	border-bottom:1px dotted #e9dfbc;
	display:block;
	width:100%;}

.spc01 {
	padding: 5px 5px 10px 0;}

.spc02 {
	padding-top: 10px;}

.center {
	text-align:center;}

.fontRed {
	color: #d24b2b;}

.fontblueB {
	color: #2395bb;
	font-size: 15px;
	font-weight: bold;
	line-height:150%;}
	

.font17{
	color: #000000;
	font-size: 17px;
	font-weight: bold;
	line-height:150%;}
.font20{
	color: #000000;
	font-size: 20px;
	font-weight: bold;
	line-height:150%;}
	
.font25{
	color: #000000;
	font-size: 25px;
	font-weight: bold;
	line-height:150%;}
	

/* ------------------------------------------------------------
	Layout
------------------------------------------------------------ */

#container {
	width: 100%;
	background: #FFF; }


/* ----------------------- ヘッダー ----------------------- */
#header {
	width: 960px;
	margin: 0 auto;
}
#logo {
	width: 190px;
	text-align:center;
	padding:15px 5px;
	float: left;
}
#hlink {
	float: right;
	margin:95px 10px 0 0;}

#hlink ul li {
	font-size:10px;
	float: left;
	padding-left:5px;
	display:block;
	list-style:outside none; }
#hlink .company a{
	color: #666;
	text-decoration: none;
	background: url(../images/ico_company.gif) no-repeat 5px 0.9em;
	padding:10px 0 0 22px;}
#hlink .recruit a{
	color: #666;
	text-decoration: none;
	background: url(../images/ico_recruit.gif) no-repeat 5px 0.9em;
	padding:10px 0 0 22px;}
#hlink .online a{
	color: #666;
	text-decoration: none;
	background: url(../images/ico_onlineshop.gif) no-repeat 5px 0.5em;
	padding:10px 0 0 110px;}
#hlink .eng a{
	color: #666;
	text-decoration: none;
	background: url(../images/ico_eng.gif) no-repeat 5px 0.9em;
	padding:10px 0 0 22px;}
#hlink .china a{
	color: #666;
	text-decoration: none;
	background: url(../images/ico_china.gif) no-repeat 5px 0.9em;
	padding:8px 0 0 25px;}

/* ----------------------- メニュー ----------------------- */

#nav {
	height:44px;
	width:960px;
	clear: both;
}
#nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
#nav ul li {
	display:inline;
	margin:0;
	padding:0;
} 
#nav ul li a {
	background:url(../images/bg_nav.gif);
	display:block;
	float:left;
	width:192px;
	height:0px;
	padding-top:44px;
	overflow:hidden;
}
#nav ul li a#nav01 {
}
#nav ul li a#nav0102 {
background-position:left -44px;
}
#nav ul li a#nav01:hover {
background-position:left -44px;
}
#nav ul li a#nav02 {
background-position:-190px top;
}
#nav ul li a#nav0202 {
background-position:-190px -44px;
}
#nav ul li a#nav02:hover {
background-position:-190px -44px;
}
#nav ul li a#nav03 {
background-position:-380px top;
}
#nav ul li a#nav0302 {
background-position:-380px -44px;
}
#nav ul li a#nav03:hover {
background-position:-380px -44px;
}
#nav ul li a#nav04 {
background-position:-570px top;
}
#nav ul li a#nav0402 {
background-position:-570px -44px;
}
#nav ul li a#nav04:hover {
background-position:-570px -44px;
}
#nav ul li a#nav05 {
background-position:-768px top;
}
#nav ul li a#nav0502 {
background-position:-768px -44px;
}
#nav ul li a#nav05:hover {
background-position:-768px -44px;
}

#nav_en{
	height:44px;
	width:960px;
	clear: both;
}
#nav_en ul {
	list-style:none;
	margin:0;
	padding:0;
}
#nav_en ul li {
	display:inline;
	margin:0;
	padding:0;
} 
#nav_en ul li a {
	background:url(https://copel.asia/oralbeauty/images/bg_nav_en.gif);
	display:block;
	float:left;
	width:192px;
	height:0px;
	padding-top:44px;
	overflow:hidden;
}
#nav_en ul li a#nav01 {
}
#nav_en ul li a#nav0102 {
background-position:left -44px;
}
#nav_en ul li a#nav01:hover {
background-position:left -44px;
}
#nav_en ul li a#nav02 {
background-position:-190px top;
}
#nav_en ul li a#nav0202 {
background-position:-190px -44px;
}
#nav_en ul li a#nav02:hover {
background-position:-190px -44px;
}
#nav_en ul li a#nav03 {
background-position:-380px top;
}
#nav_en ul li a#nav0302 {
background-position:-380px -44px;
}
#nav_en ul li a#nav03:hover {
background-position:-380px -44px;
}
#nav_en ul li a#nav04 {
background-position:-570px top;
}
#nav_en ul li a#nav0402 {
background-position:-570px -44px;
}
#nav_en ul li a#nav04:hover {
background-position:-570px -44px;
}
#nav_en ul li a#nav05 {
background-position:-768px top;
}
#nav_en ul li a#nav0502 {
background-position:-768px -44px;
}
#nav_en ul li a#nav05:hover {
background-position:-768px -44px;
}


/* ----------------------- topimage ----------------------- */
#topimg {
	width: 100%;
	text-align:center;
	margin: 0 auto;}

/* ----------------------- contents ----------------------- */

#inner {
	width: 960px;
	margin: 0 auto;
	padding-top: 10px;
	overflow:hidden}

/* ------------------------- main ------------------------- */

#main {
	width: 700px;
	padding: 0 10px;
	margin-bottom:10px;
	float:right}

/* ------------------------- side ------------------------- */

#side {
	width: 220px;
	padding: 0 10px;
	float:left;
	background: url(../img/bg_side.gif) repeat-y

}

.sideBox {
	width: 210px;
	padding: 5px;
	display:block;
}

.sideBox ul li a{	
	color: #666666;
	text-decoration: none;
	display:block;
	list-style:outside none;
	background: url(../images/ic01.gif) no-repeat 6px 1.2em;
	border-bottom: 1px dotted #cbcbcb;
	padding:12px 5px 12px 20px;
}
.sideBox ul li a:hover{
	background: #dce1e4 url(../images/ic01.gif) no-repeat 6px 1.2em;
}
.sideBoxs {
	padding: 5px;}
	
/* ------------------------ footer ------------------------ */

#footer {
	width: 100%;
	clear: both;
	background: url(../images/bg_footer.jpg) repeat-x;
	overflow:hidden}
	
#flink {
	width: 960px;
	padding: 10px;
	margin: 0 auto;
}
#footer dl {
	width: 145px;
	padding: 10px;
	float: left;
}
#footer dt {
	font-weight:bold;
	border-bottom:#d24b2b 2px solid;
}
#footer dt a{
	color:#666;
	text-decoration:none;
}
#footer dd {margin-left:5px;}
#footer dd a{
	color:#666;
	text-decoration:none;
	line-height:100%;
}
#footer dd a:hover{
	color:#666;
	text-decoration:underline;
}
#footer #fcopy {
	font-size:10px;
	text-align:center;
	padding-top: 10px;
	float: right;}

/* ------------------------------------------------------------
	Contents
------------------------------------------------------------ */

h2 .ttl {
	display:block;
	width: 695px;
	height: 20px;
}
.sttl {
	font-size:15px;
	display:block;
	width: 695px;
	height: 20px;
	color: #d24b2b;
	background:url(../images/bg_sttl.gif) no-repeat;
}

/* ------------------------ TOP ------------------------ */

/* おすすめ商品 */
#recommend {}

#recommend #topEntry{
	padding: 10px 5px 10px 5px;
	line-height:150%;
	overflow:hidden;}
#recommend .pdtBox{
	width: 208px;
	padding: 0 10px;
	float: left;
}
#recommend .pdtBox img{
	padding: 3px;
	margin: 5px 0;
	border: 1px solid #cbcbcb;
}
#topnews {}

#topnews dl {
	padding: 5px;
	border-bottom: 1px dotted #cbcbcb;
	overflow:hidden;
}
#topnews dt {
	background: url(../images/ic01.gif) no-repeat 0 0.6em;
	padding:5px 0 5px 13px;
	overflow: hidden;
}
#topnews dd {
	padding-left: 13px;
	overflow: hidden;}

#topnews .img{
	float: left;
	padding: 3px;
	margin: 0 5px;
	border: 1px solid #cbcbcb;
}

#topnews td {
	padding: 5px;
	border-bottom: 1px dotted #cbcbcb;
	overflow:hidden;
}
#topnews .news1 {
	background: url(../images/ic01.gif) no-repeat 0 0.6em;
	padding:5px 0 5px 13px;
	overflow: hidden;
}
#topnews .news2 {
	padding-left: 13px;
	overflow: hidden;}



#info {}

#info dl {
	padding: 5px;
}
#info dt {
	background: url(../images/ic01.gif) no-repeat 0 0.6em;
	padding:5px 0 5px 13px;
	float: left;
	border-bottom: 1px dotted #cbcbcb;
}
#info dd {
	padding: 5px 0 5px 10px;
	font-weight: bold;
	border-bottom: 1px dotted #cbcbcb;
	overflow:hidden;}
	

/* ------------------------ category ------------------------ */

#ctgimg {
	width: 100%;
	text-align:center;
	margin: 0 auto;
	background:url(../images/bg_ctgimg.jpg) center}
	
#ctgimg h2{}

#main #topicPath {  
    float:left;  
    margin:10px 0;  
}  
#main #topicPath li {  
    float:left;  
    line-height:110%;  
    list-style-type:none;  
}  
#main #topicPath li a {
	color: #666;
    margin-right:10px;  
    padding-right:15px;
	text-decoration:none;
    background:url(../images/ico_topicpath.gif) no-repeat right center;  
}
#main #topicPath li a:hover {
	text-decoration: underline;
}
#entry{
	padding: 10px 5px 30px 5px;
	line-height:150%;
	overflow:hidden;}

/* 商品紹介 */
#products {}
#products .pdtBox{
	width: 208px;
	padding: 5px 10px;
	float: left;
}
#products .pdtBox img{
	padding: 3px;
	margin: 5px 0;
	border: 1px solid #cbcbcb;
}
.pdtttl a{
	font-weight:bold;
	text-decoration:none;}
.pdtttl a:hover{
	text-decoration: underline;}

/* 商品詳細 */
#detailArea {
	padding: 10px;}

#detailPhoto {
	float:left;}

#gallery {
		width: 271px;
	}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	padding: 3px;
	margin: 0 5px 5px 0;
	border: 1px solid #cbcbcb;
	}

#gallery ul a:hover { color: #fff; }

#detailTxt {
	line-height:160%;}

#spec {}

#spec .specTtl {
	font-size:14px;
	width: 665px;
	height: 24px;
	line-height: 180%;
	padding-left: 8px;
	background:url(../images/bg_specttl.gif) no-repeat;}

table.specTbl {
    width: 645px;
	margin:10px;
    border: 1px solid #cbcbcb;
    border-collapse: collapse;
    border-spacing: 0;
}

table.specTbl .section{
    width: 25%;
}
table.specTbl td {
    padding: 5px;
    border: 1px solid #cbcbcb;
    border-width: 0 0 1px 1px;
    text-align: center;
}
/* Movie */
#movie {}
#movie .position{
	padding: 10px 0px;
	float: center;
}

/* オーラルビューティーとは？ */
#about {}

#attention{
	border: 1px solid #78c6e0;
	background: #e3f0f5;
	padding: 8px;
	margin: 10px;}

/* FAQ */
#faq {}
#faq .qBox {
	color: #6192a2;
	font-weight: bold;
	font-size:14px;
	line-height:150%;
	cursor: pointer;
	padding: 5px;}

#faq .aBox {
	line-height:150%;
	padding: 5px;
	border-bottom:1px dotted #e9dfbc;}

/* 採用情報 */
#recruit {}

#rec_detail {
	margin: 20px;}
#rec_detail dl {
	border: 1px solid #cbcbcb;
	border-top: none;
	width: 600px;
	background: #DDD;
}

#rec_detail dt,dd {
	padding: 5px;
}
#rec_detail dt {
	border-top: 1px solid #cbcbcb;
	text-align:center;
	clear: left;
	float: left;
	width: 150px;
}
#rec_detail dd {
	margin-left: 150px;
	border-top: 1px solid #cbcbcb;
	border-left: 1px solid #cbcbcb;
	background: #fff;
}

/* 法人の方 */
#partner {}

.form   {
	
	margin:10px;
    border: 1px solid #cbcbcb;
	border-collapse: collapse;}

.form  td {
	padding: 5px;
    border: 1px solid #cbcbcb;}

/* プライバシーポリシー */
#privacy {}

/* 会社情報 */
#company {}

#cmp_detail {
	margin: 20px;}
#cmp_detail dl {
	border: 1px solid #cbcbcb;
	border-top: none;
	width: 600px;
	background: #DDD;
}

#cmp_detail dt,dd {
	padding: 5px;
}
#cmp_detail dt {
	border-top: 1px solid #cbcbcb;
	text-align:center;
	clear: left;
	float: left;
	width: 150px;
}
#cmp_detail dd {
	margin-left: 150px;
	border-top: 1px solid #cbcbcb;
	border-left: 1px solid #cbcbcb;
	background: #fff;
}

#company #map{
	text-align:center;}
	
/* お知らせ */
#notice {}

#noticeBox {
	width: 600px;
	padding: 10px;
	margin: 10px auto 30px auto;
	border: 1px solid #cbcbcb;}
	
#noticeBox dt{
	color: #d24b2b;
	font-weight: bold;}

#noticeBox dd{
	text-align:left;}

#noticeBox .date{
	font-size: 10px;
	text-align:right;
	padding-bottom: 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #d24b2b;}
	

#slideshow {
   position: relative;
   width:  960px; /* 画像の横幅に合わせて記述 */
   height: 330px; /* 画像の高さに合わせて記述 */
   margin: 0 auto;
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}