@charset "shift_jis";
/* CSS Document */

/* --------------------------------------------------

	PCサイズ用 CSS

-------------------------------------------------- */
#spHeader,
#spFooter {
	display: none;
}

#sp_main_l {
	display: none;
}

#sp_main_p {
	display: none;
}


/* --------------------------------------------------
	1.common
-------------------------------------------------- */
.mt40{
	margin-top: 40px !important;
}
.pcOnly {
}
.spOnly {
	display: none;
}
body#body_top {
	overflow-x: hidden;
}

/* --------------------------------------------------
	2.container
-------------------------------------------------- */
#container {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0 auto;
	line-height: 1.8;
	margin-bottom:40px;
}

/* --------------------------------------------------
スライダー
-------------------------------------------------- */
.header_inner .nav .subnav_box{
	z-index:100;
}
#slider_box{
	width:100%;
	height:502px;
    overflow:hidden;
    position:absolute;
    left:0;
}
#slider_box li.main1{
	background:url(../images/index/main_5.jpg?dt=20190221) no-repeat center top;
}
#slider_box li.main2{
	background:url(../images/index/main_2.jpg?dt=20181102) no-repeat center top;
}
#slider_box li.main3{
	background:url(../images/index/main_3.jpg?dt=20190128) no-repeat center top;
}
#slider_box li.main4{
	background:url(../images/index/main_4.jpg?dt=20190208) no-repeat center top;
}
#slider_box li.mainHoliday{
	background:url(../images/index/main_holiday.jpg?dt=20181207) no-repeat center top;
}
#slider_box li.main_f1{
	background:url(../images/index/main_f1.jpg?dt=20190208) no-repeat center top;
}
#slider_box li{
	height:502px;
	text-align:center;
}
#slider_box li a {
	display: block;
	width: 100%;
	height: 100%;
}
#slider_box li span.orngBtnBig{
	background:url(../images/index/btn_dtl_off.png) no-repeat;
	display:inline-block;
	width:194px;
	height:41px;
	overflow:hidden;
	position:relative;
	text-indent:-9999px;
	top: 345px;
    left: 240px;
}
#slider_box li span.orngBtnBig:hover{
	background:url(../images/index/btn_dtl_on.png) no-repeat;
}
#slider_box li span.orngBtn{
	background:url(../images/index/btn_order_01.png) no-repeat;
	display:inline-block;
	width:236px;
	height:45px;
	overflow:hidden;
	position:relative;
	text-indent:-9999px;
	top: 410px;
    left: -160px;
}
#slider_box li.mainHoliday span.orngBtn{
	background:url(../images/index/btn_order_01.png) no-repeat;
	display:inline-block;
	width:236px;
	height:45px;
	overflow:hidden;
	position:relative;
	text-indent:-9999px;
    top: 390px;
    left: 330px;
}
#slider_box li.main3 span.orngBtnBig{
	background:url(../images/index/btn_order_02.png) no-repeat;
	display:inline-block;
	width:236px;
	height:45px;
	overflow:hidden;
	position:relative;
	text-indent:-9999px;
    top: 330px;
    left: 235px;
}

#slider_box li.main4 span.orngBtn{
	background:url(../images/index/btn_order_02.jpg) no-repeat;
	display:inline-block;
	width:236px;
	height:45px;
	overflow:hidden;
	position:relative;
	text-indent:-9999px;
	top: 395px;
    left: -140px;
}

#slider_box li.main2 span{
    top: 405px;
    left: 160px;
}
#slider_box li.main2 a {
	position: absolute;
	z-index: 90;
}
#slider_box li span:hover img{
	margin-left:194px;
}
.bx-wrapper{
	position:relative;
	margin:0;
	padding:0;
	*zoom:1;
}
.bx-wrapper img{
	max-width:100%;
	display:block;
}
.bx-wrapper .bx-viewport{
	background:#fff;
	-webkit-transform:translatez(0);
	-moz-transform:translatez(0);
   	-ms-transform:translatez(0);
   	-o-transform:translatez(0);
   	transform:translatez(0);
}
.bx-wrapper .bx-pager{
	position:absolute;
	bottom:5px;
	width:100%;
	z-index:100;
}
.bx-wrapper .bx-loading{
	min-height:50px;
	background:url(../images/index/img_loader.gif) center center no-repeat #fff;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:2000;
}
.bx-wrapper .bx-pager{
	text-align:center;
	font-size:85%;
	font-family:Arial;
	font-weight:bold;
	padding:0 0 0 400px;
}
.bx-wrapper .bx-pager .bx-pager-item{
	display:inline-block;
	*zoom:1;
	*display:inline;
}
.bx-wrapper .bx-pager.bx-default-pager a{

	background:url(../images/index/bxBullets1.png) left bottom no-repeat;
	text-indent:-9999px;
	display:block;
	width:17px;
	height:17px;
	margin:0 2px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active{
background:url(../images/index/bxBullets1.png) left -1px no-repeat;
}
#item_slider_wrapper {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 950px;
	height: 502px;
	z-index: 70;
}
#item_slider {
	position: absolute;
	top: 45px;
	left: 0;
	width: 570px;
	height: 431px;
	z-index: 80;
}
.promo_box .acne_about{
	color:#006778;
}
.promo_box .acne_about a{
	color:#006778;
}

/* --------------------------------------------------
Original Proactiv
-------------------------------------------------- */
.side_area{
	width:248px;
	height:158px;
	overflow:hidden;
	position:absolute;
	top:22px;
	right:-214px;
	z-index:99;
	background:url(../images/index/side-nav.jpg) no-repeat;
}
.side_area p{
	width:19px;
	height:13px;
	padding:145px 0 0 15px;
	float:left;
	cursor:pointer;
}
.side_area .open_nav{
	width: 214px;
	float:left;
}

/* --------------------------------------------------
プレスリリース
-------------------------------------------------- */
.press_box{
	width:920px;
	margin:0 auto;
	padding-top:502px;
}

/* --------------------------------------------------
動画部分
-------------------------------------------------- */
.promo_Area{
	width:100%;
	background: url(../images/index/promo-section-bg.gif) repeat-x;
}
.promo_box{
	width:920px;
	margin:0 auto;
	overflow:hidden;
	padding:30px 0 0;
}
.promo_box h2{
	font-weight:normal;
	text-align:center;
	font-size:108%;
	font-weight:bold;
}
.promo_box ul{
	/*margin:10px 0 20px;*/
	overflow:hidden;
}
.promo_box li{
	float:left;
	margin-left:10px;
	text-align:center;
	line-height:1.45;
}
.promo_box li:first-child{
	margin-left:0;
}
.promo_box h3{
	font-size:93%;
	margin:8px 0 0;
}
.promo_box h3 + p{
	font-size:93%;
}
.promo_box a{
	color:#ffffff;
	font-size:93%;
}
/*.promo_box p + p a{
	display:inline-block;
	padding:0 7px 0 0;
	background:url(../images/index/right-orange-arrow.png) no-repeat right 5px;
}*/
.promo_box a:hover{
	text-decoration:none;
}
.promo_box div.txt_left{
	background: #61cbc9;
	color: #ffffff;
}
.promo_box div.txt_center{
	background: #a79996;
	color: #ffffff;
}
.promo_box div.txt_right{
	background: #fee46b;
	color: #5a5a5a;
}
.promo_box div.txt_right a{
	color: #5a5a5a;
}
.promo_box div.txt_pink{
	background: #e03d78;
	color: #ffffff;
}
.promo_box div.txt_spring{
	background: #fe659d;
	color: #ffffff;
}
.promo_box div.txt_gakuwari{
	background: #160065;
	color: #ffffff;
}
.popup{
	display: none;
}
#cm,#cm2,#use{
	width:640px;
	margin:0 auto;
}
#videos{
	width:640px;
	margin:0 auto;
	overflow: hidden;
}
#cm h3,#cm2 h3,#use h3,
#videos h3{
	margin: 0 0 5px;
}
#cm iframe + p,#cm2 iframe + p,#use iframe + p,
#videos iframe + p{
	margin:30px 0 10px;
}
#cm .order_btn,#cm2 .order_btn,#videos .order_btn{
	margin:20px 0 0 20px;
}
#videos .movie{
	width:640px;
    float:left;
}
#videos .movie ul{
	display:none;
}
#videos ul{
	width:320px;
    float:left;
}
#videos ul li{
	margin:0 0 3px;
	position: relative;
	background: #eeeeee;
	width: 320px;
	height: 88px;
}
#videos ul li a{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/index/spacer.gif) repeat;
}

#videos ul li .movie_bnr_box {
	padding: 7px 8px 8px 6px;
}
#videos ul li .movie_bnr_img {
	float: left;
	margin-right: 11px;
}
#videos ul li .movie_bnr_txt {
	width: 165px;
	float: left;
}
#videos ul li .movie_bnr_txt h4 {
	max-height: 2.5em;
	overflow: hidden;
	margin: 0;
	line-height: 1.25em;
	font-size: 12px;
	padding: 0;
	font-weight: normal;
	word-break: break-word;	
}
#videos ul li .movie_bnr_txt p {
	font-size: 11px;
	line-height: 1.25em;
	margin: 0;
	overflow: hidden;
	max-height: 6.25em;
	word-break: break-word;
}
.bottomBanner .bucketInner .bucketImg{
	width:90px;
	float:left;
}
.bottomBanner .bucketInner .overlay{
	width:160px;
	float:left;
	padding-left:10px;
}
.bottomBanner .bucketInner .overlay h4{
	font-size:12px;
	font-weight:600;
	margin-bottom:4px;
}
.bottomBanner .bucketInner .overlay h4 a{
	color: #434343;
}
.bottomBanner .bucketInner .overlay p{
	font-size:10.5px;
	margin-bottom:6px;
}
.bottomBanner .bucketInner .overlay p.textLink{
	width:65px;
	line-height:1em;
	background:url(../images/arrow.gif) no-repeat bottom right;
}
.bottomBanner .bucketInner .overlay p.textLink a{
	color:#3887a4;
}
.bottomBanner .bucketInner .overlay p.textLink a:hover{
	color:#ea762c;
	text-decoration:none;
}
.bottomBanner .bucketInner .overlayend{
	width:260px;
	float:left;
	padding-left:10px;
}
.bottomBanner .bucketInner .overlayend h4{
	font-size:12px;
	font-weight:600;
	margin-bottom:4px;
}
.bottomBanner .bucketInner .overlayend a
{
	display:block;
	width:260px;
	line-height:1em;
	font-size:10.5px;
	padding-top:6px;
}
.bottomBanner .bucketInner .overlayend a{
	color:#3887a4;
}
.bottomBanner .bucketInner .overlayend a:hover{
	color:#ea762c;
	text-decoration:none;
}
.mr25{
	margin-right:25px;
}

/* サブページ用 */
#container .breadcrumbsTop{
	margin:20px 0 25px 15px;
	font-size: 12px;
}
#container .breadcrumbsTop li{
	float:left;
	list-style:none;
	padding-right:10px;
	color:#66686a;
}
#container .breadcrumbsTop li a{
	color:#66686a;
	text-decoration: none;
}
#container .breadcrumbsTop li a:hover{
	text-decoration:underline;
}
#container .breadcrumbsTop li.crumbsActive a{
	text-decoration:underline;
}
#mainContent {
	width: 665px;
	float: right;	
}
/* インターネット会員規約用 */
.internetWrap {
	width:90%;
	margin:20px auto;
}
.internetWrap h3{
	font-size:172%; /* 24px */
	margin:0 0 15px 0;
}
.internetWrap dl{
	margin:0 0 15px 0;
}
.internetWrap dl dt{
	font-weight:bold;
}
.internetWrap dl dd ul{
	list-style-type:disc;
	padding-left:1em;
}
/* カスタマー誘導ページ */
.order_support_wrap{
	width:600px;
	margin:50px auto;
}
/* pagtop--------------- */

.btnGoTop {
	margin-top:50px;
	padding-bottom: 50px;
	overflow: hidden;
	zoom: 1;
}
.btnGoTop p {
	float: right;
	padding-left: 20px;
	background-image: url(../images/ico_04.gif);
	background-repeat: no-repeat;
	background-position: 0x 0px;
	font-size: 12px;
	line-height: 1;
}
.btnGoTop p a {
	color: #66686a;
}

/* --------------------------------------------------
	3.side
-------------------------------------------------- */

#side_wrapper {
	width: 223px;
	float: left;
	padding-top: 13px;
	background: url(../images/cmn_side_bg_h.png) no-repeat left top;
}
#side_inner {
	padding-bottom: 16px;
	background: url(../images/cmn_side_bg_f.png) no-repeat left bottom;
}
#side {
	background: url(../images/cmn_side_bg.png) repeat;
}

#side a {
	text-decoration: none;
}
#side a:hover {
	color: #fe870f;
}
#side .side_nav .active {
	color: #fe870f;
	font-weight:bold;
}
#side .side_nav h2 {
	margin: 0 5px 10px;
	padding: 15px 8px 5px;
	border-bottom: 1px solid #cdcbce;
	line-height: 1;
}
#side .side_nav h2 span {
	display: inline-block;
	padding-right: 16px;
	background: url(../images/plus-icon.gif) no-repeat right top;
	font-size: 22px;
}
#side .side_nav h2 span.internet_head{
	display: inline-block;
	padding-right: 16px;
	background: url(../images/plus-icon.gif) no-repeat left 70px top 23px;
	background-position-x:70px;
	background-position-y:22px;
	font-size: 22px;
}
#side .side_nav ul {
	margin: 0 12px;
}
#side .side_nav ul li {
	font-size: 93%;
	margin-bottom: 15px;
	line-height: 1.2;
}
#side .side_nav ul li a{
	color: #322f31;
}
#side .side_nav ul li a:hover{
	color: #fe870f;
	font-weight:bold;
}

.topnews {
	width:920px; margin:0 auto;padding:15px 0px;
}

.campaign_fixbnr{
	position: fixed;
	left: 0;
	top: 145px;
	z-index:99;
}

.spring_campaign_fixbnr{
	position: fixed;
	right: 0;
	top: 145px;
	z-index:99;
}