@charset "UTF-8";

/* ========================================
	produce
======================================== */
.background_bg{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: center center no-repeat;
	background-size: cover;
	background-image: url(../images/produce/bg_cont.jpg);
	opacity: 1;
	z-index: -1;
}
.p-produce_wrap .c-pagecatch{
	background: url(../images/produce/bg_wave_t.png) no-repeat center 45px;
}
.p-produce_wrap .c-content_wrap{
	background: url(../images/produce/bg_cont_p.png) repeat-y top center;
}
.p-produce_wrap_bg{
	position: absolute;
	background: url(../images/produce/bg_shaded.png) repeat-y top center;
	width: 100%;
	height: 2453px;
	top: 178px;
	left: 0;
	z-index: 0;
}
@media screen and (min-width: 1920px) {
	.p-produce_wrap,
	.p-produce_wrap .c-pagecatch,
	.p-produce_wrap .c-content_wrap{
		background-size:100% auto;
	}
	.p-produce_wrap_bg{
		background-size:100% 2453px;
	}
}

.p-produce_lead01{
	text-align: center;
	padding: 20px 0;
}
.p-produce_dl{
	width: 480px;
	text-align: center;
}
.p-produce_dl dt{
	margin-bottom: 30px;
}
/**Slider**/
.sliderwrap{
	width: 447px;
	height: 390px;
	padding: 20px 0 0 0;
	background: url(../images/produce/produce_bg_slide.png) no-repeat top left;
}
.sliderwrap2{
	margin: 0 27px 0 20px;
}
.bxslider-hairset-text-wrap,
.bxslider-makeup-text-wrap,
.bxslider-nail-text-wrap{
	display: block;
	position: absolute;
	top: 214px;
	left: 0px;
	height: 36px;
}
.bxslider-hairset-text-wrap{
	width: 180px;
}
.bxslider-makeup-text-wrap{
	width: 270px;
}
.bxslider-nail-text-wrap{
	width: 240px;
}
.p-produce_pora{display: block;}
.p-produce_p{z-index: 1000;}
.p-produce_wrap .sliderwrap .bxslider{
	position: relative;
	width: 447px;
}
.p-produce_wrap .bx-wrapper .bx-pager {
	z-index:1000;
	bottom: -38px;
}
.p-produce_wrap .bx-wrapper .bx-pager-item a {
	width: 25px;
	height: 19px;
	margin: 0 2px;
}
.p-produce_wrap .bx-wrapper .bx-pager-item a.active,
.p-produce_wrap .bx-wrapper .bx-pager-item a:hover {background-position: 0 -19px;}
.p-produce_wrap .bx-wrapper .bx-controls-direction a {
	width: 60px;
	height: 60px;
	margin-top:-35px;
}
.p-produce_wrap .bx-wrapper .bx-prev {left: -47px;}
.p-produce_wrap .bx-wrapper .bx-next {right: -49px;}

.p-hairset .bx-wrapper .bx-pager-item a {background: url(../images/common/ico_pager_pu.png) no-repeat 0 0;}
.p-hairset .bx-wrapper .bx-prev {background: url(../images/common/ico_prev_pu.png) no-repeat 0 0;}
.p-hairset .bx-wrapper .bx-next {background: url(../images/common/ico_next_pu.png) no-repeat 0 0;}

.p-makeup .bx-wrapper .bx-pager-item a {background: url(../images/common/ico_pager_gr.png) no-repeat 0 0;}
.p-makeup .bx-wrapper .bx-prev {background: url(../images/common/ico_prev_gr.png) no-repeat 0 0;}
.p-makeup .bx-wrapper .bx-next {background: url(../images/common/ico_next_gr.png) no-repeat 0 0;}

.p-nail .bx-wrapper .bx-pager-item a {background: url(../images/common/ico_pager_pi.png) no-repeat 0 0;}
.p-nail .bx-wrapper .bx-prev {background: url(../images/common/ico_prev_pi.png) no-repeat 0 0;}
.p-nail .bx-wrapper .bx-next {background: url(../images/common/ico_next_pi.png) no-repeat 0 0;}

.p-total_lead02 .bx-pager-item a {background: url(../images/common/ico_pager_bl.png) no-repeat 0 0;}
.p-total_lead02 .bx-wrapper .bx-prev {background: url(../images/common/ico_prev_pi.png) no-repeat 0 0;}
.p-total_lead02 .bx-wrapper .bx-next {background: url(../images/common/ico_next_pi.png) no-repeat 0 0;}
.p-total_lead02 .bx-wrapper .bx-pager {bottom: -37px;}
.p-total_lead02 .bx-wrapper .bx-prev {left: -50px;}
.p-total_lead02 .bx-wrapper .bx-next {right: -50px;}
.p-total_lead02 .bx-wrapper .bx-controls-direction a {margin-top:-30px;}

/* ========================================
	hairset
======================================== */

.p-hairset{
	background: url(../images/produce/bg_hairset.png) no-repeat top left;
	position: relative;
	margin-bottom: 20px;
}
.p-hairset .p-produce_p{
	position: absolute;
	top:52px;
	left:320px;
	width: 447px;
	height: 330px;
}
.p-hairset .sliderwrap {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms,
		-webkit-transform 500ms,
		transform 500ms;
}
.p-hairset.is-animation .sliderwrap,
.no-js .p-hairset .sliderwrap {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-hairset .p-produce_dl{
	padding: 395px 0 42px 0;
}

/* ========================================
	hairset BG
======================================== */

.bg-item{
	position: absolute;
	display: block;
}
.p-hairset_bg_p{
	top: 329px;
	left: 646px;
	z-index: 200;
}
.p-hairset_bg_star01{
	top: 389px;
	left: 499px;
	z-index: 300;
}
.p-hairset_bg_star02{
	top: 29px;
	left: 776px;
}
.p-hairset_bg_star03{
	top: 258px;
	left: -70px;
}
.p-hairset_item01{
	top: -5px;
	left: 830px;
	z-index: 101;
	pointer-events:none;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms 500ms,
		-webkit-transform 500ms 500ms,
		transform 500ms 500ms;
}
.p-hairset.is-animation .p-hairset_item01,
.no-js .p-hairset .p-hairset_item01 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-hairset_item02{
	top: 296px;
	left: 960px;
}
.p-hairset_bg_slide{
	top:39px;
	left: 344px;
}

/* ========================================
	makeup
======================================== */

.p-makeup{
	background: url(../images/produce/bg_makeup.png) no-repeat top right;
	position: relative;
	margin-bottom: 20px;
}
.p-makeup .p-produce_p{
	position: absolute;
	top:52px;
	left:200px;
	width: 447px;
	height: 330px;
}
.p-makeup .sliderwrap {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms,
		-webkit-transform 500ms,
		transform 500ms;
}
.p-makeup.is-animation .sliderwrap,
.no-js .p-makeup .sliderwrap {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-makeup .p-produce_dl{
	padding: 390px 0 42px 0;
	margin-left: 480px;
}

/* ========================================
	makeup BG
======================================== */

.p-makeup_bg_p{
	top: 330px;
	left: 5px;
	z-index: 101;
}
.p-makeup_item01{
	top: 219px;
	left: -251px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms 500ms,
		-webkit-transform 500ms 500ms,
		transform 500ms 500ms;
}
.p-makeup.is-animation .p-makeup_item01,
.no-js .p-makeup .p-makeup_item01 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-makeup_item02{
	top: 228px;
	left: 1000px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms 500ms,
		-webkit-transform 500ms 500ms,
		transform 500ms 500ms;
}
.p-makeup.is-animation .p-makeup_item02,
.no-js .p-makeup .p-makeup_item02 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-makeup_star01{
	top:419px;
	left: 330px;
}
.p-makeup_star02{
	top:125px;
	left: -77px;
}
.p-makeup_bg_slide{
	top:40px;
	left: 143px;
}

/* ========================================
	nail
======================================== */

.p-nail{
	background: url(../images/produce/bg_nail.png) no-repeat top left;
	position: relative;
}
.p-nail .p-produce_p{
	position: absolute;
	top:54px;
	left:320px;
	
	width: 447px;
	height: 330px;
}
.p-nail .sliderwrap {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms,
		-webkit-transform 500ms,
		transform 500ms;
}
.p-nail.is-animation .sliderwrap,
.no-js .p-nail .sliderwrap {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-nail .sliderwrap {
	z-index: 1000 !important;
	position: relative;
}
.p-nail .p-produce_dl{
	padding: 390px 0 42px 0;
	background: url(../images/produce/ico_new.png) no-repeat 100px 376px;
}

/* ========================================
	nail BG
======================================== */

.p-nail_bg_p02{
	top: 335px;
	left: 646px;
	z-index: 101;
}
.p-nail_bg_slide{
	top: 41px;
	left: 344px;
	z-index: 1;
}
.p-nail_item01{
	top: 310px;
	left: -182px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms 500ms,
		-webkit-transform 500ms 500ms,
		transform 500ms 500ms;
}
.p-nail.is-animation .p-nail_item01,
.no-js .p-nail .p-nail_item01 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-nail_item02{
	top: 492px;
	left: 904px;
	z-index: 200;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms 1000ms,
		-webkit-transform 600ms 1000ms,
		transform 600ms 1000ms;
}
.p-nail.is-animation .p-nail_item02,
.no-js .p-nail .p-nail_item02 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-nail_bg_star01{
	top: 152px;
	left: -106px;
}
.p-nail_bg_star02{
	top: 432px;
	left: 521px;
}
.p-nail_bg_star03{
	top: 118px;
	left: 874px;
}

/* ========================================
	mens
======================================== */

.p-mens{
	margin-top: 100px;
	padding: 0 0 113px 500px;
	position: relative;
}
.p-mens_item01{
	top: 10px;
	left: 240px;
}
.p-mens_item02{
	top: -28px;
	left: 20px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	transition:
		opacity 400ms 500ms,
		-webkit-transform 500ms 500ms,
		transform 500ms 500ms;
}
.p-mens.is-animation .p-mens_item02,
.no-js .p-mens .p-mens_item02 {
	visibility: visible;
	opacity: 1; 
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* ========================================
	total
======================================== */

.p-total{
	background: url(../images/produce/bg_wave_b.png) no-repeat top center;
	padding: 90px 0 0 0;
	text-align: center;
}
@media screen and (min-width: 1920px) {
	.p-total{
		background-size:100% auto;
	}
}
.p-total_in{
	background: url(../images/produce/bg_total.png) no-repeat center 8px;
	height: 777px;
}
.p-total_in h3{
	padding-bottom: 20px;
}
.p-total_lead01{
	width: 900px;
	margin: 20px auto;
	padding: 35px 0 0 0;
	text-align: left;
	background: url(../images/produce/total_p.png) no-repeat right top;
}
.p-total_lead02{
	width: 900px;
	padding: 60px 0 0 0;
}
.p-total_p{
	background: url(../images/produce/total_slide_bg.png) no-repeat top left;
	width: 440px;
	text-align: center;
	float: left;
	padding: 20px 0 60px 0;
}
.p-total_lead02 .sliderwrap02{
	width: 400px;
	margin: 0 auto;
}
.p-total_lead02 .u-right{
	padding-top: 100px;
}

.no-js .bxslider li:not(:first-child),
.no-js .bxslider-hairset-text li:not(:first-child),
.no-js .bxslider-makeup-text li:not(:first-child),
.no-js .bxslider-nail-text li:not(:first-child) {
	display: none;
}