@charset "utf-8";
/* CSS Document */
/* hair04
-------------------------------------------------- */
.hair04 {}
/*---- pink text ----*/
.hair04 .step--ttl, 
.hair04 .outbath .txt p strong,
.hair04 .features--area p strong {
	color: #72abb0;
}
.hair04 .ul--feature_01 li span {
	color: #72abb0;
	border-color: #72abb0;
}

/*---- cv01 ----*/
.hair04 .cv01--area { background: #f6f2e6;}
.hair04 .ul--pro--cv01 li .btn--cart { background: #72abb0;}

/*---- cv02 ----*/
.hair04 .cv02--area { background: #f6f2e6;}
.hair04 .cv02--area .wrapper { position: relative; z-index: 31;}
.hair04 .cv02--area .dl--buy .btn { background: #72abb0;}

.hair04 .modal-video-movie-wrap,
.hair04 .modal-video-movie-wrap iframe {
	width: 394px;
    height: 700px;
}
/*---- howto ----*/
.hair04 .howto--area { background: #f6f2e6;}


@media (min-width: 769px) {
/* tablet+PC用 */
	.hair04 .kv--area {
		position: relative;
		height:560px;
		background:url("../img/products/products-hair/04/bg_pc@2x.jpg") center center no-repeat;
		background-size: auto 100%;
	}
	.hair04 .kv--txt {
		max-width:455px;
		margin-left: 50%;
		padding:48px 0 0;
		transform:translateX(-130%);
	}
	.hair04 .kv--area small {
		position: absolute;
		right:.5%;
		bottom:1em;
		font-size:1.1em;
		text-align: right;
		line-height: 1.5; color: #fff;
	}
	
	.hair04 .feature_04 {
		background: #fff url("../img/products/products-hair/04/bg_04@2x.png") center bottom no-repeat;
		background-size: auto 100%;
	}
	.hair04 .feature_04 .feature--txt {
		margin-left: 0;
		padding:17em 55px 0 0;
	}
	.hair04 .feature_04 .feature--txt h3 { margin-bottom:30px;}
	.hair04 .feature_04 .note {
		display: block;
		margin-top: 4.6em;
		line-height: 1.6;
	}
	
	
	/*---- product ----*/
	.feature_01 .texture {
		position: absolute;
		left: 50%;
		top: auto;
		bottom:0;
		transform: translateY(0);
		width:44.65592972181552%;
		z-index: 2;
	}
	.hair04 .feature_03 .wrapper--inner { min-height:auto; margin-bottom: 17em; padding-bottom: 60px;}
	.hair04 .feature_03 .feature--txt { padding-top: 8.1%;}
	
	/*---- frag ----*/
	.hair04 .frag--area {
		background: url("../img/products/products-hair/04/bg_06@2x.jpg") center center no-repeat;
		background-size:auto 100%;
	}
	
	/*---- hair04 / howto ----*/
	.hair04 .howto--inner { display: block;}
	.hair04 .howto--inner h3 { text-align: center; margin-bottom: 90px;}
	.hair04 .howto--inner .step { display: flex; width:100%;}
	.hair04 .howto--inner .step_00 { position: relative; display: block; width:33.333%; border-top:none;}
	.hair04 .howto--inner .step_00::before { content:''; position: absolute; left:0; top:50%; transform: translateY(-50%);
		width:1px; height: 108px; background: #333;
	}
	.hair04 .howto--inner .step_01::before { width:0;}
	.hair04 .howto--inner .step .step_00 .txt { width:100%;}
	.hair04 .howto--inner .step--ttl { display: block; margin-bottom: 14px;}
	.hair04 .howto--inner .step .step_00 .num { display: block; margin-bottom: 10px;}
	.hair04 .howto--inner .ph { position: absolute; right:7.22%; top: 0; transform: translateY(-30%)}
}
@media (min-width: 1025px) {
/* PC用 */
}
@media (min-width: 1225px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1024px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* iPadMini+SP用 */
	.hair04 .feature_00 { margin-top: 16px;}
	.hair04 .feature_01 { margin-top: 0;}
	
	/*----  ----*/
	.hair04 .feature_01 .feature--image {
		position: relative;
		padding: 0 5.3333% 14%;
		background: url("../img/products/products-hair/04/img_01_02_sp@2x.jpg") left bottom no-repeat;
		background-size:88% auto;
	}
	.hair04 .feature_02 .feature--image {
		position: relative;
		padding: 0 5.3333% 12% 0;
		background: url("../img/products/products-hair/04/img_02_02_sp@2x.jpg") right bottom no-repeat;
		background-size:88% auto;
	}
	.hair04 .feature_03 .feature--image {
		position: relative;
		padding: 0 0 10% 5.3333%;
		background: url("../img/products/products-hair/04/img_03_02_sp@2x.jpg") left bottom no-repeat;
		background-size:88% auto;
	}
	.hair04 .feature_04 {		
		margin-top: 16%;
		padding:8% 0 1.8%;
		background: url("../img/products/products-hair/04/bg_04_sp@2x.jpg") center bottom no-repeat;
		background-size: 100% auto;
	}
	.hair04 .feature_04 h3 { margin-bottom: .5em;}
	.hair04 .feature_04 .note {
		display: block;
		margin:108% 5.333333% 2.5%;
		line-height: 1.5;
	}
	.hair04 .feature_02 .wrapper--inner { margin-bottom: 3em;}
	.hair04 .feature_03 .wrapper--inner { margin-bottom: 7em;}
	
	.hair04 .feature_02 .feature--txt p,
	.hair04 .feature_03 .feature--txt p{ margin: 1em 0 1.5em;}
	
	.hair04 .modal-video-movie-wrap,
	.hair04 .modal-video-movie-wrap iframe {
		width: 320px;
		height: 570px;
	}
}
@media (max-width: 480px) {
/* SP用 */
}