@charset "utf-8";
/* CSS Document */
.sout {
	display: block;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
	height: auto;
	position: relative;
}
@media screen and (max-width: 767px) {
	.sout {
		padding-top: 166.666%;
	}
}
.swiper.type-vertical {
	display: block;
	width: 100%;
	height: 100.1% !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.swiper.type-vertical .swiper-wrapper {
  /* wrapperのサイズを調整
	position: absolute;
	top: 0;
	left: 0; */
	display: block;
    width: 100%;
	height: 100%;
  /*height: 100px !important;*/
}

.swiper.type-vertical .swiper-wrapper .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
	display: block;
  	width: 100%;
	height: 100% !important;
	position: relative;
	overflow: hidden;
}
.swiper.type-vertical .swiper-wrapper .swiper-slide a {
	display: block;
  	width: 100%;
	height: 100%;
}
.num1 {	
	display: block;
  	width: 100%;
	height: 100% !important;
	position: relative;
	background-image: url(../img/home/kv1_bg.jpg);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.num2 {
	display: block;
  	width: 100%;
	height: 100% !important;
	position: relative;
	background-image: url(../img/home/kv2_bg.jpg);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;	
}
@media screen and (max-width: 767px) {
	.num1 {	
		background-image: url(../img/home/kv1_bg_spp.jpg);
	}
	.num2 {
		background-image: url(../img/home/kv2_bg_sp.jpg);	
	}
}
.num1 .logo1 {	
	position: absolute;
	top: 0;
	left: 0;
	width: 42%;
	height: auto;
}
.num1 .txt1 {	
	position: absolute;
	top: 13%;
	left: 2%;
	width: 18%;
	height: auto;
}
.num1 .txt2 {	
	position: absolute;
	bottom: 0;
	right: 0;
	width: auto;
	height: 100%;
}
.num2 .txt1 {	
	position: absolute;
	top: 5%;
	right: 26%;
	width: auto;
	height: 90%;
}


.home-product {
	background: none;
}

.red {
	color: #ff0000;
}

.sub-products-step__img img {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  min-width: 220px;
  position: absolute;
  right: 0;
  top: 0;
  width: 38%;
}


.sub-mv.-about {
  background-image: url(../img/sub/common/sub-mv-about-pc.jpg);	
}
.sub-mv.shampoo {
  background-image: url(../img/sub/common/sub-mv-shampoo-pc.jpg);
}
.sub-mv.treatment {
  background-image: url(../img/sub/common/sub-mv-treatment-pc.jpg);
}
.sub-mv.hair-mask {
  background-image: url(../img/sub/common/sub-mv-hairmask-pc.jpg);
}
.sub-mv.premium-treatment {
  background-image: url(../img/sub/common/sub-mv-premium-pc.jpg);
}
.sub-mv.hair-oil {
  background-image: url(../img/sub/common/sub-mv-hairoil-pc.jpg);
}
@media screen and (max-width: 767px) {
  .sub-mv {
    background-image: url(../img/sub/common/sub-mv-sp.jpg);	
  }
  .sub-mv.-about {
    background-image: url(../img/sub/common/sub-mv-about-sp.jpg);	
  }
  .sub-mv.shampoo {
    background-image: url(../img/sub/common/sub-mv-shampoo-sp.jpg);
    height: 132.5vw;
  }
	.sub-mv.treatment {
	  background-image: url(../img/sub/common/sub-mv-treatment-sp.jpg);
	}
	.sub-mv.hair-mask {
	  background-image: url(../img/sub/common/sub-mv-hairmask-sp.jpg);
	}
	.sub-mv.premium-treatment {
	  background-image: url(../img/sub/common/sub-mv-premium-sp.jpg);
	}
	.sub-mv.hair-oil {
	  background-image: url(../img/sub/common/sub-mv-hairoil-sp.jpg);
	}
}

.material-caution {
	background: #eeadad !important;
}


.sub-about-05new {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 50px;
}
.sub-about-05new li {
	display: block;
	width: 30%;
	padding-top: 20px;
}

.aboutfig2022 {
	margin-top: 5rem;
	display: block;
	text-align: center;
	padding:7rem 5rem;
	background-color: #fafafa;
    /*border: 1px solid #e6e6e6;*/
}
.aboutfig2022 img {
	margin: 0 auto 5rem auto;
}

@media screen and (max-width: 767px) {
.sub-about-05new {
	display: block;
	padding-top: 40px;
}
.sub-about-05new li {
	display: block;
	width: 100%;
	padding-top: 40px;
}

.aboutfig2022 {
	margin-top: 2.5rem;
	padding:3.5rem 2.5rem;
}
.aboutfig2022 img {
	margin: 0 auto 2.5rem auto;
}
}


.home-banner {
	padding-top: 8rem;
	position: relative;
}
.banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.banner .banner-list {
	display: block;
	width: 44%;
	text-align: center;
	padding-bottom: 5rem;
}
.banner .banner-list a {
display: block;
overflow: hidden;
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);	
	
-moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
-ms-transition-duration:0.3s;

-moz-transition-timing-function:ease;
-webkit-transition-timing-function:ease;
-o-transition-timing-function:ease;
-ms-transition-timing-function:ease;
}
.banner .banner-list a:hover {
-moz-transform: scale(1.05,1.05);
-webkit-transform: scale(1.05,1.05);
-o-transform: scale(1.05,1.05);
-ms-transform: scale(1.05,1.051);
	
-moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
-ms-transition-duration:0.3s;

-moz-transition-timing-function:ease;
-webkit-transition-timing-function:ease;
-o-transition-timing-function:ease;
-ms-transition-timing-function:ease;
}
.banner .banner-list a img {
	margin-bottom: 1.5rem;
}
.banner .banner-list .sub-about-main__desc {
	text-align: left;
}

@media screen and (max-width: 767px) {
.home-banner {
	padding-top: 5rem;
}
	.banner {
		display: block;
		padding: 0 20px;
	}
	.banner .banner-list {
		width: 100%;
	}	
}

.home-top__scroll-wrapper {
  position: absolute;
  right: 36px;
  top: 8rem;
}
@media screen and (max-width: 767px) {
  .home-top__scroll-wrapper {
    left: 4vw;
    right: auto;
    top: 5rem;
  }
}

.breadcrumb span {
 text-shadow: 1px 1px 0px rgba(255, 255, 255, .7) !important;
}

.sub-about-main__intro.aboutfigtitle {
	padding: 0.75em;
	background: #fff;
}


.icon_news {
	color: #cc7db1;
	/*font-weight: bold;*/
	font-size: 2.4rem;
	display: block;
	padding: 0 0 1rem 0;
	text-align: left;
}
@media screen and (max-width: 767px) {
	.icon_news {
		font-size: 2.4rem;
	}
}


.products__attention_center {
  color: #888;
  font-size: 1.2rem;
  line-height: 1.417;
  margin-top: 1.8rem;
  text-align: center;
}


.sup {
vertical-align: super;
margin-top: -6px;
font-size: 1.3rem;
-webkit-transform:scale(0.54);
-moz-transform:scale(0.54);
-ms-transform:scale(0.54);
-o-transform:scale(0.54);
transform:scale(0.54);
}
@media screen and (max-width: 767px) {
.sup {
vertical-align: super;
margin-top: -7px;
font-size: 2.94vw;
-webkit-transform:scale(0.54);
-moz-transform:scale(0.54);
-ms-transform:scale(0.54);
-o-transform:scale(0.54);
transform:scale(0.54);
}
	}

img {
	max-width: 100%;
	height: auto;
}


/*202303追記*/
.banner_2023 {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0 4% 8rem 4%;
	
}
.banner_2023 img.pcbanner {
	display: block;
}
.banner_2023 img.tabletbanner {
	display: none;
}
@media screen and (max-width: 767px) {
	.banner_2023 {}
	.banner_2023 img.pcbanner {
		display: none;
	}
	.banner_2023 img.tabletbanner {
		display: block;
	}
}
.banner_2023.under {
	padding: 0;	
}
.banner_2023.under img {
	margin: 0 auto;	
}
@media screen and (max-width: 767px) {
.banner_2023.under {
	padding: 50vw 10px 0 10px;	
}
}

.menuimg {
	width: 80%;
	height: auto;
	margin: 0 auto;
}


/*20270530追記*/
.sub-products-main__btn {
	display:none !important;
}
/*購入ボタン*/
.item-buy {
margin: 31px 0 30px 0;
padding: 0;
display: flex;
flex-wrap: wrap; }
.item-buy li {
list-style: none;
margin: 0 0.45em 0.45em 0; }
.item-buy li a {
background: #000;
color: #fff;
border: 1px solid #000;
font-weight: 700;
line-height: 44px;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
border-radius: 32px;
padding: 0 1.8em 0 1.8em;
display: block;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
	font-size: 75%;
}
/*.item-buy li a:hover {
background: #000;
color: #fff;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
opacity: 1;
}
@media (min-width: 48em) {
.item-buy li a {
	font-size: 100%;
 } }*/

@media screen and (min-width: 768px) {
  .sub-about-before {
    margin-top: calc(((16.5rem + ((1vw - 7.68px) * (60 / 6.46)))) * 1.8);
    padding-bottom: calc(13rem + ((1vw - 7.68px) * (50 / 6.46)));
  }
}
@media screen and (min-width: 1414px) {
  .sub-about-before {
    margin-top: calc(22.5rem * 1.8);
    padding-bottom: 18rem;
  }
}