@charset "UTF-8";

.argan-oil-img-link { transition:0.3s; margin:20px auto; }
.argan-oil-img-link:hover { opacity:0.6;}


@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
ul li {list-style:none }
img {
	max-width: 100%;
}
sup {
	font-size: 70%;
	vertical-align: top;
}
h6 { font-weight:normal;  font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:14px;  }



#topics.hairmask {
	overflow: hidden;
	padding: 0;
	animation: fadeIn 1s ease-in;
	letter-spacing: 0;
}
.hairmask p {
	font-size: 16px;
	line-height: 1.8;
}

.flexbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
.sec_wrap {
	width: 960px;
	margin: auto;
}


.bg_white {
	width: 100%;
	margin: auto;
	padding: 40px 80px 80px;
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 0 15px rgba(0, 0, 0, .05);
	box-sizing: border-box;
}
.point {
	text-align: center;
}
.point .sec_ttl {
	width: 696px;
	margin: 0 auto 45px;
}
.point_ttl_line {
	width: 219px;
	margin: 0 auto 20px;
}
.point_line {
	width: 800px;
	margin: 80px auto;
}

.howto_flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 40px;
}
.howto_flex .ttl {

}
.howto_flex .ttl img {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: auto;
}
.howto_flex .step {
	text-align: left;
}
.howto_flex .step li > .detail {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}
.howto_flex .step li + li {
	margin-top: 10px;
}
.howto_flex .step .number {
	background: #f370a1;
	margin-right: 15px;
	max-width:150px;
	padding: 10px;
	border-radius: 20px;
	color: #fff;
	font-family: 'Frank Ruhl Libre', serif;
	font-size: 14px;
}

.howto_flex .step li > .img {
	display: none;
}
.howto_flex .step li p {
	font-size: 14px;
	line-height: 1.7;
	margin-top:8px;
}

#section1 {
	background: url(../img/products/hair-treatment-mask/bg_01.jpg) repeat-y center top / 100%;
	padding-top: 80px;
}

.introduction {
	margin-bottom: 50px;
}
.introduction .flexbox {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 50px;
}
.introduction .flexbox .txt {
	width: 232px;
}
.introduction .flexbox .img {
	width: 275px;
}
.introduction .big_ttl {
	width: 843px;
	margin: auto;
}


#point1 .txt_img {
	width: 617.5px;
	margin: 0 auto 20px;
}
#point1 .fig_img {
	width: 774.5px;
	margin-top: 50px;
}
#point1 .oil_block {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: rgba(255, 255, 255, .4) url(../img/products/hair-treatment-mask/point1_oil_bg.png) no-repeat center center / 98%;
	height: 436.5px;
	margin: 70px auto 20px;
	padding: 50px 60px;
	border: 1px solid #cf912e;
	box-sizing: border-box;
}
.argan-oil-container { position:relative; }
.argan-oil { position:absolute; left:10px; }

#point1 .oil_block .img {
	margin-right: 30px;
	width:100%;
}
#point1 .p-spacing { margin-bottom:10px; }

#point1 .oil_block .ttl {
	width: 414.5px;
	margin-bottom: 20px;
}
#point1 .oil_block p {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}
#point1 .note {
	font-size: 10px;
	text-align: right;
}

#point234.point .flexbox {
	margin-top: 60px;
}
#point234.point .flexbox .sec_ttl {
	width: 319px;
	margin-bottom: 20px;
}
#point234.point .flexbox .txt {
	font-size: 14px;
	line-height: 1.7;
}
#point234 .note {
	font-size: 11px;
	margin-top: 10px;
}
#point234 .howto {
	position: relative;
	margin-top: 50px;
}
#point234 .howto .fig_img {
	position: relative;
	top: -10px;
	width: 165px;
	margin-left: 30px;
}
#point234 .howto .txt {
	width: 610px;
	margin: 40px auto 0;
}
#point234 .howto .note {
	font-size: 12px;
	text-align: right;
	margin-top: 20px;
}

#point5 .point_ttl_line {
	margin-bottom: 50px;
}
#point5 .flexbox {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
#point5 .flexbox .img {
	width: 215px;
}
#point5 .flexbox .txt .ttl {
	width: 464px;
	margin-bottom: 20px;
}
#point5 .flexbox .txt p {
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
}









.step_flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 30px;
}
.step_flex .step_block .img img {
	width: auto;
	height: 346px;
}
.step_flex .step_block > p {
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.7;
	padding:0 30px;
}
.oil_list {
	background: #fff;
	margin-top: 50px;
	padding: 45px 0;
	border: 1px solid #e9e3d0;
	box-sizing: border-box;
}
.oil_list ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.oil_list li {
	width: 130px;
	margin: 0 8px;
}
.oil_list li > .img,
.tricks_card .hairoil li .img {
	width: 76px;
	margin: 0 auto 20px;
}
.oil_list li > .name img,
.tricks_card .hairoil .card_wrap .name img {
	width: auto;
	height: 21px;
}
.oil_list li > .txt {
	font-size: 10px;
	line-height: 1.5;
	margin-top: 10px;
}








.tricks_flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.tricks_flex .img {
	width: 79.5px;
	margin-right: 30px;
}
.tricks_flex .txt > .ttl > img {
	width: auto;
	height: 21px;
}
.tricks_flex .txt > p {
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
	margin-top: 10px;
}
.tricks_card {
	position: relative;
	margin-top: 50px;
}
.tricks_card .hairmask {
	background: rgba(255, 255, 255, .5);
	padding: 25px 0 32px;
	border: 1px solid #f4c9d7;
	border-radius: 4px;
	box-sizing: border-box;
}
.tricks_card .hairmask .img {
	width: 107.5px;
	margin: auto;
}
.tricks_card .hairmask .name {
	margin: 5px auto 0;
}
.tricks_plus {
	position: absolute;
	top: 196px;
	right: 0;
	left: 0;
	margin: auto;
	width: 50px;
}
.tricks_card .hairoil {
	margin-top: 30px;
}
.tricks_card .hairoil ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.tricks_card .hairoil li {
	width: 180px;
}
.tricks_card .hairoil .card_wrap {
	width: 100%;
	padding: 20px;
	border-width: 1px;
	border-radius: 10px;
}
.tricks_card .hairoil #hairoil01 .card_wrap {
	background: rgba(229, 255, 252, .5);
	border-color: #add8db;
}
.tricks_card .hairoil #hairoil02 .card_wrap {
	background: rgba(219, 245, 255, .5);
	border-color: #c5cdf0;
}
.tricks_card .hairoil #hairoil03 .card_wrap {
	background: rgba(255, 242, 219, .5);
	border-color: #eecd9e;
}
.tricks_card .hairoil #hairoil04 .card_wrap {
	background: rgba(254, 230, 235, .5);
	border-color: #f6c0c8;
}
.tricks_card .hairoil #hairoil05 .card_wrap {
	background: rgba(243, 228, 249, .5);
	border-color: #f3e4f9;
}


.tricks_card .hairoil .card_wrap .name {
	margin-bottom: 10px;
}
.tricks_card .hairoil .card_wrap .copy {
	padding: 15px;
	border-radius: 20px;
}
.tricks_card .hairoil #hairoil01 .card_wrap .copy {
	background: #2cb9c4;
	color:#fff;
	font-size:12px;
	padding:10px;
}
.tricks_card .hairoil #hairoil02 .card_wrap .copy {
	background: #2e499c;
	color:#fff;
	font-size:12px;
	padding:10px;
}
.tricks_card .hairoil #hairoil03 .card_wrap .copy {
	background: #cb870c;
	color:#fff;
	font-size:12px;
	padding:20.5px 10px;
}
.tricks_card .hairoil #hairoil04 .card_wrap .copy {
	background: #f887ba;
	color:#fff;
	font-size:12px;
	padding:10px;
}
.tricks_card .hairoil #hairoil05 .card_wrap .copy {
	background: #af66c9;
	color:#fff;
	font-size:12px;
	padding:10px;
}
.tricks_card .hairoil .card_wrap .copy img {
	width: auto;
	height: 12px;
	vertical-align: baseline;
}
.tricks_card .hairoil .card_wrap + .ttl {
	width: 147px;
	margin: 15px auto 0;
}

#tricks .howto {
	margin-top: 90px;
}
#tricks .howto .note {
	font-size: 14px;
	line-height: 1.7;
	margin-top: 30px;
}

.bg_wave {
	background: url(../img/products/hair-treatment-mask/bg_wave.png) no-repeat center top / cover;
	width: 100%;
	height: 50px;
	margin-top: 150px;
}

#section2 {
	background: url(../img/products/hair-treatment-mask/bg_02.jpg) repeat-y center top -50px / 100%;
	padding: 150px 0 130px;
}
#section2 .bg_white {
	padding: 90px 80px 60px;
}
#review .sec_ttl {
	width: 776.5px;
	margin: auto;
}
#review .flexbox {
	margin-top: 55px;
}
.review_block {
	width: 260px;
}
.review_block > .img {
	width: 236.5px;
	margin: auto;
}
.review_block .comment {
	position: relative;
	display: inline-block;
	height: 235px;
	padding: 30px 20px 22px;
	margin-top: 30px;
	background: #fff;
	border: solid 1px #f6cedd;
	border-bottom-width: 2px;
	border-radius: 5px;
	box-sizing: border-box;
}
.review_block .comment::before {
	content: "";
	position: absolute;
	top: -36px;
	left: 50%;
	margin-left: -16px;
	border: 11px solid transparent;
	border-bottom: 25px solid #fff;
	z-index: 2;
}
.review_block .comment::after {
	content: "";
	position: absolute;
	top: -39px;
	left: 50%;
	margin-left: -17px;
	border: 12px solid transparent;
	border-bottom: 26px solid #f6cedd;
	z-index: 1;
}
.review_block .comment > .ttl {
	text-align: center;
}
.review_block .comment > .ttl img {
	width: auto;
	height: 40px;
}
.review_block .comment > .txt {
	font-size: 12px;
	line-height: 1.5;
	margin-top: 10px;
}
.review_block .comment .info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: absolute;
	bottom: 22px;
	right: 0;
	left: 0;
	width: 220px;
	margin: auto;
	border-top: 1px solid #f6cedd;
	padding-top: 10px;
}
.review_block .comment .info > .icon {
	margin-right: 15px;
}
.review_block .comment .info > .icon img {
	width: auto;
	height: 33.5px;
}
.review_block .comment .info > .txt p {
	font-size: 10px;
	line-height: 1.7;
}
#review .note {
	margin-top: 20px;
	line-height: 1.6;
	text-align: right;
}
#review .note > * {
	display: inline-block;
	font-size: 9px;
	text-align: left;
}
#review .credit {
	font-size: 9px;
	text-align: right;
	margin-top: 10px;
}

#product {
	position: relative;
	background: url(../img/products/hair-treatment-mask/product_bg.png) no-repeat center center / cover;
	padding: 80px 0;
	margin-top: 90px;
}
#product .product_wrap > .img {
	position: absolute;
	top: 0;
	left: 56px;
	width: 398px;
}
#product .product_wrap > .info {
	width: 270px;
	margin-left: 566px;
	text-align: center;
}
#product .product_wrap > .info .category {
	margin: auto;
	padding: 6px 12px;
	border: 1px solid #3c2817;
	line-height: 1;
	display:inline-block;
}
#product .product_wrap > .info .category .category {
	vertical-align: baseline;
}
#product .product_wrap > .info .ttl {
	width: 235px;
	margin: 20px auto 0;
}
#product .product_wrap > .info .txt {
	font-size: 14px;
	line-height: 1.9;
	margin-top: 20px;
}



#banner {
	overflow: hidden;
	background: #fff;
	border-radius: 5px;
	margin-top: 50px;
	transition: opacity .4s ease 0s;
}
#banner:hover {
	opacity: .6;
}




/*======================================
Tablet
======================================*/
@media screen and (max-width:960px){
	.sec_wrap {
		width: 92%;
	}
	.bg_white {
		padding: 40px 6% 80px;
	}
	#point1 .fig_img {
		width: 100%;
	}
	.point_line {
		width: 100%;
	}
	.bg_wave {
		background-size: 100%;
		height: 3.5vw;
	}
	#section2 {
		background-position: center top -3.6vw;
	}
	#section2 .bg_white {
		padding: 90px 6% 80px;
	}
	#review .sec_ttl {
		width: 100%;
	}
	.review_block {
		width: 32%;
	}
}


/*======================================
SP
======================================*/
@media screen and (max-width:768px){
    
	.hairmask p {
		font-size: 3.5vw;
	}

	#section1 {
		padding-top: 40px;
	}
	.introduction {
		width: 90vw;
		margin: 0 auto 20px;
	}
	.introduction .flexbox {
		margin-bottom: 20px;
	}
	.introduction .flexbox .txt {
		width: 34vw;
	}
	.introduction .flexbox .img {
		width: 48vw;
	}
	.introduction .big_ttl {
		width: 84vw;
	}

	.sec_wrap {
		width: 90vw;
	}
	.bg_white {
		padding: 20px 5vw 60px;
	}
	#topics.hairmask .point .sec_ttl {
		width: 88%;
		margin-bottom: 20px;
	}
	.point_ttl_line {
		width: 40vw;
	}
	.point_line {
		width: 100%;
		margin: 40px auto;
	}
	.howto {
		display: block;
	}
	.howto > .img {
		display: none;
	}
	.howto_flex {
		width: 100%;
		display: block;
		margin-top: 0;
	}
	.howto_flex .ttl {
		width: 100%;
		height: auto;
		padding: 6px 0;
		border-radius: 21vw;
		margin: 0 auto 20px;
		line-height: 1;
	}
	.howto_flex .ttl img {
		position: static;
		width: 10vw;
		transform: none;
	}
	.howto_flex .step li {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.howto_flex .step li + li {
		margin-top: 10px;
	}
	.howto_flex .step li > .img {
		display: block;
		position: relative;
		width: 48%;
	}
	.howto_flex .step li > .detail {
		display: block;
		width: 48%;
	}
	.howto_flex .step li > .img > .number {
		position: absolute;
		top: 1.8vw;
		left: 1.8vw;
		margin: 0;
		padding: 3px 2.1vw 1px;
		border-radius: 21vw;
		font-size: 2vw;
		line-height: 1;
	}
	.howto_flex .step li > .detail > .number {
		display: none;
	}
	.howto_flex .step li p {
		font-size: 3.1vw;
		line-height: 1.5;
	}

	#point1 .txt_img {
		width: 76vw;
		margin-bottom: 10px;
	}
	#point1 .fig_img {
		width: 64vw;
		margin: 30px auto 0;
	}
	#point1 .oil_block {
		display: block;
		height: auto;
		background-color: rgba(255, 255, 255, .4);
		background-image: url(../img/products/hair-treatment-mask/point1_oil_bg_sp_01.png), url(../img/products/hair-treatment-mask/point1_oil_bg_sp_02.png);
		background-repeat: no-repeat;
		background-position: center top 1.5%, center bottom 1.5%;
		background-size: 97%;
		margin: 40px auto 10px;
		padding: 60px 40px;
	}
	.argan-oil-container { position:relative; }
    .argan-oil { position:relative; left:0; margin-bottom:20px;}
	#point1 .oil_block .img {
		width: 30vw;
		margin: 0 auto 10px;
	}
	#point1 .oil_block .ttl {
		width: 100%;
		margin-bottom: 10px;
	}
	#point1 .oil_block p {
		font-size: 3vw;
	}
	#point1 .note {
		font-size: 2.5vw;
	}

	#point234 .point_block {
		margin-bottom: 20px;
	}
	#point234 .point_block .sec_ttl {
		margin-bottom: 10px;
	}
	#point234.point .flexbox {
		display: block;
		margin-top: 0;
	}
	#point234.point .flexbox .txt {
		font-size: 3.5vw;
	}
	#point234 .note {
		font-size: 2.5vw;
	}
	#point234 .howto .note {
		font-size: 3vw;
		margin-top: 20px;
		text-align: center;
	}
	#point234 .howto .fig_img {
		position: static;
		width: 40vw;
		margin: 20px auto 0;
	}
	#point234 .howto .txt {
		width: 100%;
		margin-top: 10px;
	}

	#point5 .point_ttl_line {
		margin-bottom: 30px;
	}
	#point5 .flexbox {
		display: block;
	}
	#point5 .flexbox .img {
		width: 40vw;
		margin: 0 auto 15px;
	}
	#point5 .flexbox .txt .ttl {
		width: 100%;
	}
	#point5 .flexbox .txt p {
		font-size: 3.5vw;
	}
	#point5 .flexbox .txt p br {
		display: none;
	}
	.step_flex {
		display: block;
		margin-top: 10px;
	}
	.step_flex .step_block + .step_block {
		margin-top: 5px;
	}
	.step_flex .step_block .img img {
		height: 66vw;
	}
	.step_flex .step_block > p {
		margin-top: 10px;
		font-size: 3.2vw;
	}
	.oil_list {
		margin-top: 30px;
		padding: 30px 3vw 10px;
	}
	.oil_list ul {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.oil_list li {
		width: 23vw;
		margin: 0 0 20px 1.5vw;
	}
	.oil_list li:first-child {
		margin-left: 0;
	}
	.oil_list li > .img {
		width: 66%;
		margin-bottom: 8px;
	}
	.oil_list li > .name img {
		height: 4.4vw;
	}
	.oil_list li > .txt {
		font-size: 2vw;
		margin-top: 5px;
	}

	.tricks_flex {
		display: block;
	}
	.tricks_flex .img {
		width: 16vw;
		margin: 0 auto 10px;
	}
	.tricks_flex .txt > .ttl > img {
		display: block;
		height: 4.5vw;
		margin: auto;
	}
	.tricks_flex .txt > .ttl > img + img {
		margin-top: 8px;
	}
	.tricks_flex .txt > p {
		font-size: 3.2vw;
		margin-top: 15px;
	}
	.tricks_flex .txt > p br {
		display: none;
	}
	.tricks_card {
		margin-top: 20px;
	}
	.tricks_card .hairmask .img {
		width: 24vw;
	}
	.tricks_card .hairmask {
		padding: 20px 0;
	}
	.tricks_card .hairmask .name {
		width: 15vw;
		margin-top: 0;
	}
	.tricks_plus {
		top: 42vw;
		width: 9vw;
	}
	.tricks_card .hairoil {
		margin-top: 3%;
	}
	.tricks_card .hairoil ul {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.tricks_card .hairoil li {
		width: 48%;
		margin-bottom: 15px;
	}
	.tricks_card .hairoil li .img {
		width: 40%;
		margin-bottom: 10px;
	}
	.tricks_card .hairoil .card_wrap .name img {
		height: 4.8vw;
	}
	.tricks_card .hairoil .card_wrap .copy img {
		height: 2.7vw;
	}
	.tricks_card .hairoil .card_wrap + .ttl {
		width: 84%;
		margin-top: 10px;
	}
	#tricks .howto_flex .step li:last-child {
		margin-top: 20px;
	}
	#tricks .howto {
		margin-top: 40px;
	}
	#tricks .howto .note {
		width: 100%;
		font-size: 3vw;
		margin-top: 20px;
		text-align: left;
	}

	.bg_wave {
		margin-top: 60px;
	}

	#section2 {
		background-position: center top -3.6vw;
		padding: 60px 0 60px;
	}
	#section2 .bg_white {
		padding: 40px 6vw 50px;
	}
	#review .sec_ttl {
		width: 100%;
	}
	#review .flexbox {
		display: block;
		margin-top: 20px;
	}
	.review_block {
		width: 90%;
		margin: auto;
	}
	.review_block + .review_block {
		margin-top: 20px;
	}
	.review_block > .img {
		width: 40vw;
	}
	.review_block .comment {
		height: auto;
		margin-top: 18px;
		padding: 20px 4vw 20px;
	}
	.review_block .comment::before {
		top: -6.5vw;
		margin-left: -3.15vw;
		border-width: 2.8vw;
		border-bottom-width: 4vw;
	}
	.review_block .comment::after {
		top: -7.12vw;
		margin-left: -3.365vw;
		border-width: 3vw;
		border-bottom-width: 4.2vw;
	}
	.review_block .comment > .ttl img {
		height: 9vw;
	}
	.review_block .comment > .txt {
		font-size: 3vw;
		line-height: 1.6;
	}
	.review_block .comment .info {
		position: static;
		width: 100%;
		margin-top: 15px;
	}
	.review_block .comment .info > .icon img {
		height: 8vw;
	}
	.review_block .comment .info > .txt p {
		font-size: 2.5vw;
	}
	#review .note {
		margin-top: 30px;
		text-align: center;
	}
	#review .note > * {
		display: block;
		font-size: 2.4vw;
		text-align: center;
	}
	#review .credit {
		font-size: 2.4vw;
		text-align: center;
	}

	#product {
		margin-top: 50px;
		padding: 35px 0 95px;
	}
	#product .product_wrap > .img {
		left: -2vw;
		width: 40vw;
	}
	#product .product_wrap > .info {
		width: 43vw;
		margin-left: 41vw;
	}
	#product .product_wrap > .info .category {
		padding: 3px 4vw;
	}
	#product .product_wrap > .info .category img {
		vertical-align: baseline;
	}
	#product .product_wrap > .info .ttl {
		width: 100%;
		margin-top: 15px;
	}
	#product .product_wrap > .info .txt {
		font-size: 2.6vw;
		line-height: 1.6;
		margin-top: 15px;
	}


	#banner {
		margin-top: 30px;
		border-radius: 1vw;
	}

	.topics_btn {
		width: 90%;
		margin: 30px auto 0;
		border: 1px solid #ddd;
		border-radius: 4px;
	}
	.mobile-spacing { margin-bottom:30px; }
	.tricks_card .hairoil #hairoil01 .card_wrap .copy {
	padding:10px;
}
}

@media screen and (max-width:320px){
}