@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

/*----------------------------
mv
----------------------------*/
#mv{
	background:url(../images/bg_mv.webp) no-repeat center bottom /cover;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-top: 13rem;
}
#mv .sp{
	display: none;
}
#mv h1{
	text-align: center;
	width: 90%;
}
#mv img.ani-fadeInUp{
	animation-delay: 1.0s;
	animation-duration: 2.0s;
}

@media screen and (max-height: 650px){
	#mv{
		padding-top: 8rem;
	}	
}


@media screen and (max-width: 768px){
	#mv{
		background: none;
		display: block;
		padding-top: 0;
	}
	#mv h1{
		width: 100%;
	}
	#mv .sp{
		display: block;
	}
	#mv .pc{
		display: none;
	}
}

/*----------------------------
concept
----------------------------*/

#concept{
	background: url(../images/bg_concept.webp) no-repeat center / cover;
	color: #fff;
	position: relative;
	padding-top: calc(var(--spacer)*20);
	margin-top: calc(var(--spacer)*10);
}
#concept::before{
	content: "";
	display: block;
	width: 100%;
	height: calc(var(--spacer)*25);
	background: linear-gradient(to bottom, rgba(239,233,228,1) 0%, rgba(239,233,228,0) 100%);
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
}
#concept figure{
	text-align: center;
	margin-bottom: calc(var(--spacer)*5);
}
#concept ul{
	align-items: stretch;
}
#concept ul li{
	width: 33.3%;
	padding: 10px 2.5% 0;
}
#concept ul li:nth-of-type(2){
	border-left: 1px solid rgba(255,255,255,0.5);
	border-right: 1px solid rgba(255,255,255,0.5);
}
#concept h3{
	font-size: 2.6rem;
	line-height: 1;
	margin-bottom: calc(var(--spacer)*2);
}
#concept h3 span{
	font-size: 170%;
	font-style: italic;
	margin-right: 5px;
}
@media screen and (max-width: 768px){
	#concept figure img{
		width: 65%;
	}
	#concept ul li{
		width: 100%;
		padding: calc(var(--spacer)*4) 0;
	}
	#concept ul li:nth-of-type(2){
		border-top: 1px solid rgba(255,255,255,0.5);
		border-bottom: 1px solid rgba(255,255,255,0.5);
		border-left: none;
		border-right: none;
	}
}
@media screen and (max-width: 480px){
	#concept h3{
		font-size: 1.9rem;
		text-align: center;
	}
	#concept h3 span{
		font-size: 150%;
	}
}
/*----------------------------
concept2
----------------------------*/
#concept2{
	background: url(../images/bg_concept2.webp) no-repeat center top / cover;
	overflow: visible;
	box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.2), inset 0 calc(var(--spacer)*6.5) 10px -10px rgba(0,0,0,0.15);
}
#concept2 p{
	margin-top: calc(var(--spacer)*-5);
	position: relative;
}
#concept2 p img{
	vertical-align: middle;
}
#concept2 p img:first-child{
	padding-top: calc(var(--spacer)*5);
	width: 50%;
}
#concept2 p img:nth-child(2){
	width: 50%;
}
#concept2 p img:nth-of-type(2).ani-fadeIn{
	animation-delay: 0s;
}

@media screen and (max-width: 480px){
	#concept2{
		padding-top: calc(var(--spacer)*14);
		box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.2), inset 0 10px 10px -10px rgba(0,0,0,0.15);
	}
	#concept2 p{
		text-align: center;
		margin-top: 0;
	}
	#concept2 p img:first-child{
		margin-right: 0;
		width: 80%;
		margin-bottom: calc(var(--spacer)*7);
	}
	#concept2 p img:nth-child(2){
		width: 70%;
		margin: 0 auto;
	}
}
/*----------------------------
feature
----------------------------*/
#feature{
	background: url(../images/bg_feature.webp) no-repeat center top / cover;
}

#feature .wrapper{
	max-width: 1400px;
	counter-reset: number 0;
}
#feature h2 span{
	display: block;
	font-size: 2.3rem;
	margin-top: calc(var(--spacer)*3);
}
#feature .inner figure{
	width: 60%;
	margin-right: -10%;
	height: 485px;
	overflow: hidden;
}
#feature .inner figure img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

#feature .inner div{
	width: 50%;
	z-index: 1;
	background: rgba(255,255,255,0.8);
	padding: 100px 5% 65px;
	position: relative;
}
#feature .inner div::before{
	counter-increment: number 1; 
	content: " Point." counter(number,decimal-leading-zero);
	display: inline-block;
	background: var(--i_main_color);
	color: #fff;
	font-family: var(--font-family2);
	font-style: italic;
	font-size: 2.3rem;
	padding: 0 0.8em;
	line-height: 1.5;
	font-weight: 400;
	position: absolute;
	top: 45px;
	left: -20px;
	pointer-events: none;
}
#feature h3{
	margin-bottom: calc(var(--spacer)*2);
}
#feature .inner+.inner{
	margin-top: calc(var(--spacer)*7);
}
#feature .inner:nth-of-type(even){
	flex-direction: row-reverse;
}
#feature .inner:nth-of-type(even) figure{
	margin-left: -10%;
	margin-right: 0;
}
#feature img[src*="feature1.webp"]{
	object-position: 20% 50%;
}
@media screen and (max-width: 768px){
	#feature h2 span{
		font-size: 4vw;
	}
	#feature .inner{
		flex-direction: column;
	}
	#feature .inner:nth-of-type(even){
		flex-direction: column;
	}
	#feature .inner figure{
		width: 80%;
		margin-right: 20%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	#feature .inner:nth-of-type(even) figure{
		margin-right: 0;
		margin-left: 20%;
	}
	#feature .inner div{
		width: 90%;
		margin-left: auto;
		margin-top:  -40px;
		padding: calc(var(--spacer)*15) calc(var(--spacer)*4) calc(var(--spacer)*5);
	}
	#feature .inner:nth-of-type(even) div{
		margin-left: 0;
		margin-right: auto;
	}
	#feature .inner div::before{
		top: calc(var(--spacer)*5);
	}
}
@media screen and (max-width: 480px){
	#feature h3{
		font-size: 1.9rem;
	}
	#feature .inner div::before{
		font-size: 1.8rem;
		left: -10px;
	}
	#feature .inner+.inner{
		margin-top: calc(var(--spacer)*10);
	}
}

/*----------------------------
item
----------------------------*/
#item .wrapper{
	max-width: 1200px;
}
#item .flex{
	padding: calc(var(--spacer)*8);
	background: #fff;
}
#item figure,
#item .flex > div{
	width: 50%;
}
#item figure{
	text-align: center;
}
#item .flex > div{
	padding-left: 7.5%;
}
#item h3{
	font-size: 3.0rem;
	line-height: 1.2;
	letter-spacing: 0.2rem;
	font-family: 'Shippori Mincho','Noto Serif JP', "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-weight: 600;
	margin-bottom: calc(var(--spacer)*4);
}
#item h3 span{
	display: block;
	font-size: 55%;
	margin-bottom: 10px;
	font-weight: 400;
}
#item h3 i{
	display: block;
	font-size: 66%;
	font-family: var(--font-family);
	font-weight: 500;
	margin-top: 10px;
}
#item .price+.price{ 
	margin-top: calc(var(--spacer)*2);
}
#item .btn{
	margin-top: calc(var(--spacer)*4);
	text-align: left;
}
@media screen and (max-width: 1200px){
	#item .flex{
		padding: calc(var(--spacer)*4);
	}
}
@media screen and (max-width: 768px){
	#item .flex{
		padding: calc(var(--spacer)*6) calc(var(--spacer)*4);
	}
	#item figure,
	#item .flex > div{
		width: 100%;
	}
	#item .flex > div{
		padding-left: 0%;
	}
	#item h3{
		margin-top: calc(var(--spacer)*4);
	}
	#item h3{
		font-size: 2.3rem;
	}
	#item .price+.price{ 
		margin-top: 0;
		margin-left: 2%;
	}
	#item .price{
		display: inline-block;
		width: 48%;
	}
	#item .btn{
		text-align: center;
	}
}
@media screen and (max-width: 480px){
	#item h3{
		font-size: 1.9rem;
	}
}

/*----------------------------
special_care
----------------------------*/
#special_care {
	position: relative;
	padding-top: 0;
	overflow: hidden;
}
#special_care .ttl{
	padding: calc(var(--spacer)*10) 0;
	position: relative;
}
#special_care .ttl::before{
	content: "";
	display: block;
	width: 90%;
	max-width: 1700px;
	height: 100%;
	background: url(../images/bg_spcare.webp) no-repeat center / cover;
	position: absolute;
	top: 0;
	left: 0px;
	pointer-events: none;
	z-index: -1;
}
#special_care .ttl::after{
	content: "";
	display: block;
	width: 30%;
	max-width: 475px;
	aspect-ratio: 475 / 433;
	min-width: 150px;
	background: url(../images/howto_ttl_item.webp) no-repeat center / contain;
	position: absolute;
	bottom: 0;
	right: 12%;
	transform: translateY(25%);
	pointer-events: none;
	z-index: 1;
}
#special_care h2{
	color: #fff;
	text-align: left;
	max-width: 1200px;
	padding-left: calc(0.5em + 20px);
	line-height: 1.5;
	padding-top: 1.5em;
	position: relative;
}
#special_care h2::before{
	content: "";
	display: block;
	width: 275px;;
	aspect-ratio: 275 / 111;
	background: url(../images/howto_ttl.webp) no-repeat center / contain;
	position: absolute;
	top: 0;
	left: 20px;
	pointer-events: none;
	z-index: -1;
}
#special_care > .ttl+.wrapper{
	padding-top: calc(var(--spacer)*14);
	counter-reset: number 0;
}

#special_care .flow{
	background: var(--i_sub_color);
	color: #fff;
	align-items: stretch;
	position: relative;
	margin-bottom: calc(var(--spacer)*6);
}
#special_care .flow::before{
	content: "";
	display: block;
	width: 70px;
	aspect-ratio: 2 / 1;
	background: var(--i_sub_color);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	bottom: 0;
	transform: translateY(calc(100% - 2px));
	left: calc(50% - 35px);
	pointer-events: none;
	z-index: 1;
}
#special_care .flow:last-of-type::before{
	display: none;
}

#special_care .flow figure{
	width: 30%;
	position: relative;
	overflow: hidden;
}
#special_care .flow figure::before{
	content: "";
	display: block;
	width: 101%;
	height: 101%;
	background: url(../images/step_mask.webp) no-repeat right center / auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
}


#special_care .flow figure img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#special_care .flow > div{
	width: 70%;
	padding: calc(var(--spacer)*4);
	margin: auto 0;
	position: relative;
}
#special_care .flow >div::after{
	content: "";
	display: block;
	width: 100px;
	aspect-ratio: 210 / 448;
	background: url(../images/sp_item1.webp) no-repeat center / contain;
	position: absolute;
	left: -70px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}
#special_care .flow:nth-of-type(2) >div::after{
	background-image: url(../images/sp_item2.webp);
}
#special_care .flow:nth-of-type(3) >div::after{
	background-image: url(../images/sp_item3.webp);
}
#special_care .flow:nth-of-type(4) >div::after{
	background-image: url(../images/sp_item4.webp);
}

#special_care h3{
	padding-left: 175px;
	position: relative;
}
#special_care h3::before{
	counter-increment: number 1; 
	content: " Step." counter(number,decimal-leading-zero);
	color: #fff;
	font-family: var(--font-family2);
	font-style: italic;
	line-height: 1.25;
	font-weight: 400;
	font-size: 200%;
	vertical-align: sub;
	padding-right: 0.5em;
	border-right: 1px solid rgba(255,255,255,0.5);
	position: absolute;
	left: 0;
}
#special_care h3 span{
	display: block;
	font-size: 78%;
	line-height: 1.2;
}
#special_care .flow p{
	font-size: 2.3rem;
	font-family: var(--font-family2);
	font-weight: 400;
	margin: calc(var(--spacer)*2) 0;
}

@media screen and (max-width: 1200px){
	#special_care .ttl::before{
		width: 100%;
	}
	#special_care .ttl::after{
		right: 0;
	}
}
@media screen and (max-width: 768px){
	#special_care h2::before{
		width: 7em;
	}
	#special_care .flow{
		margin-bottom: calc(var(--spacer)*10);
	}
	#special_care .flow::before{
		width: 50px;
		left: calc(50% - 25px);
	}
	#special_care .flow figure,
	#special_care .flow > div{
		width: 100%;
	}
	#special_care .flow figure{
		max-height: 300px;
		aspect-ratio: 4 / 3;
	}
	#special_care .flow figure::before{
		background: url(../images/step_mask2.webp) no-repeat center bottom / 100% auto;
	}
	#special_care .flow > div{
		padding-top: 0;
		padding-bottom: calc(var(--spacer)*6);
		margin-top: -15px;
	}
	
	#special_care .flow > div::after{
		top: 0;
		right: 20px;
		left: auto;
		transform: translateY(-90%);
	}
	#special_care h3{
		padding-left: 0;
		padding-bottom: 5px;
		border-bottom: 1px solid rgba(255,255,255,0.5);
	}
	#special_care h3::before{
		position: static;
		padding-left: 0;
		border-right: none;
		line-height: 1.8;
	}
}
@media screen and (max-width: 480px){
	#special_care > .ttl+.wrapper{
		padding-top: calc(var(--spacer)*18);
	}
	#special_care .ttl::after{
		transform: translateY(50%) translateX(16%);
	}
	#special_care h3{
		font-size: 1.9rem;
	}
	#special_care .flow p{
		font-size: 1.7rem;
		line-height: 1.5;
	}
}

/*----------------------------
voice
----------------------------*/
#voice{
	background: var(--i_sub2_color);
}
#voice .wrapper{
	max-width: 1200px;
}
#voice article{
    background:#fff;
    position:relative;
    padding: 50px;
	clip-path: polygon(calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%, 0 0);
}
#voice h3{
	font-family: var(--font-family);
}
#voice h3 span{
	font-size: 70%;
}
#voice .star{
	font-size: 2.3rem;
	color: #e3c466;
	letter-spacing: 0.5rem;
	line-height: 1;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--i_border_color);
	margin-bottom: 15px;
}
#voice .star span{
	font-family: var(--font-family2);
	color: var(--i_main_color);
	font-size: 140%;
	font-style: italic;
	font-weight: 400;
	margin-left: 10px;
}
#voice .name{
    font-size:calc(var(--font-size-base)*.875);
    text-align: right;
}
@media screen and (max-width: 768px){
	#voice h3 span{
		display: block;
	}
	#voice article{
		padding: 30px 20px;
		clip-path: polygon(calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%, 0 0);
	}
	#voice .star{
		font-size: 1.6rem;
		letter-spacing: 0.2rem;
	}
}
/*----------------------------
faq
----------------------------*/
#faq .wrapper{
	max-width: 1200px;
}
#faq span.sh,
#faq span.tr{
	background: #ebe3d7;
	padding: 0.2em 0.3em;
	margin-right: 0.3em;
}
#faq span.tr{
	background: #d8d8d8;
}

/*----------------------------
lineup
----------------------------*/
#lineup{
	background: url(../images/bg_luneup.webp) no-repeat center top / cover;
}
#lineup .wrapper{
	max-width: 1200px;
}
#lineup h2{
	font-weight: 400;
}
#lineup .inner{
	background: url(../images/bg_shampoo.webp) no-repeat left center / auto 100%, #fff;
	padding-bottom: 30px;
}
#lineup .inner figure{
	width: 37%;
	text-align: center;
	margin-top: -50px;
}
#lineup .inner > div{
	width: 63%;
	padding: 30px 30px 0px 0;
}
#lineup .inner h3{
	background: var(--i_main_color);
	display: inline-block;
	color: #fff;
	padding: 0.2em 0.5em;
	line-height: 1.2;
	margin-bottom: calc(var(--spacer)*4);
}
#lineup .inner dt{
	font-size: 3.7rem;
	font-family: 'Shippori Mincho','Noto Serif JP', "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-weight: 600;
	line-height: 1;
	margin-bottom: calc(var(--spacer)*4);
	letter-spacing: 0;
}
#lineup .inner dd{
	border-left: 2px solid var(--i_main_color);
	padding-left: 20px;
	font-size: calc(var(--font-size-base)*1.13);
	margin-bottom: calc(var(--spacer)*4);
}
#lineup .btn{
	text-align: left;
}
#lineup .inner{
	margin-top: 100px;
}
#lineup .inner:nth-of-type(2){
	background-image: url(../images/bg_treatment.webp);
}
@media screen and (max-width: 768px){
	#lineup .inner h3{
		font-size: 3vw;
	}
	#lineup .inner dt{
		font-size: 4.3vw;
	}
	#lineup .inner dd{
		font-size: calc(var(--font-size-base)*1);
	}
	#lineup .inner figure{
		margin-top: 0;
		padding-left: 15px;
	}
	#lineup .inner{
		margin-top: calc(var(--spacer)*4);
	}
}
@media screen and (max-width: 480px){
	#lineup .inner{
		margin-top: 60px;
	}
	#lineup .inner > div{
		width: 100%;
		padding: 0 20px;
	}
	#lineup .inner figure{
		width: 60%;
		margin: -30px auto 0;
	}
	#lineup .inner h3{
		font-size: 1.5rem;
		display: block;
	}
	#lineup .inner dt{
		font-size: 2.2rem;
	}
	#lineup .btn{
		text-align: center;
	}
}

/*----------------------------
banner
----------------------------*/
#banner{
	padding: calc(var(--spacer)*14) 0;
	background: url(../images/bg_footer2.webp) no-repeat right center / auto 100%, url(../images/bg_footer1.webp) no-repeat left center / auto 100%, #f5f3f6;
}
#banner ul{
	gap: calc(var(--spacer)*4) 2%;
}
#banner ul li{
	width: 32%;
}
#banner p{
	font-family: var(--font-family2);
	font-size: 3.2rem;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0.3rem;
	margin-top: calc(var(--spacer)*4);
}
#banner p span{
	font-size: 77%;
	display: block;
}
@media screen and (max-width: 1400px){
	#banner{
		background-position: right -100px center, left -130px center;
	}
}
@media screen and (max-width: 768px){
	#banner{
		padding: calc(var(--spacer)*14) 0;
		background: url(../images/bg_footer2.webp) no-repeat right center / auto 100%, #f5f3f6;
	}
	#banner p{
		font-size: 4.3vw;
		text-shadow: 0 0 10px #fff, 0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
	}
}
@media screen and (max-width: 600px){
	#banner ul li{
		width: 100%;
		text-align: center;
	}
	#banner ul li img{
		max-width: 300px;
	}
	#banner p{
		margin-top: 30px;
	}
}