@charset "UTF-8";

/*==============================
  COMMON
==============================*/
html {
	font-weight: normal;
}
body {
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	color: #333;
	letter-spacing: .05em;
}

.u-font__jp,
.u-text--body,
p {
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	color: #333;
	letter-spacing: .05em;
}

img {
	max-width: 100%;
}
a,
a:hover,
a:visited {
	text-decoration: none !important;
	color: #3d3d3d;
}
.br-sp {
	display: block !important;
}
.br-pc {
	display: none !important;
}
picture img {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.br-sp {
		display: none !important;
	}
	.br-pc {
		display: block !important;
	}
}


/*------------------------------
  Header - MV, Logo, Video
------------------------------*/
#header {
	position: relative;
	margin-bottom: 14.4vw;
	padding-top: 60vw;
}
.logo-content {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 17.2%;
	width: 100vw;
	text-align: center;
}
.brand-logo {
	margin-bottom: 5.3%;
	width: 38.5%;
}

.video-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 129% auto 0;
	width: calc(100% - 4.83% * 2);
}
.video-content video {
	width: 100%;
}
.video-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: url(../img/sp/video_thum.jpg) top center / contain no-repeat;
	cursor: pointer;
}
.video-overlay img {
	width: 18%;
}
.shop-link {
	position: absolute;
	top: 5vw;
	left: 5vw;
	padding: 3vw;
	border: 1px solid #707070;
	font-family: "minerva-modern", sans-serif;
	font-weight: normal;
	font-size: 3.62vw;
	text-align: center;
	line-height: 1.0;
	color: #333;
	overflow: hidden;
}
.shop-link::before {
	position: absolute;
	content: "";
	bottom: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .1;
	transition: 50ms;
}
.shop-link:hover::before {
	bottom: 0%;
	transition: 50ms;
}

.concept-ttl {
	color: #333;
}

.concept-ttl .tlt {
	color: #3e232f;
}

.logo-ttl .tlt{
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-size: 4.8vw;
	color: #3e232f;
	line-height: 1.55;
}

/* .p-page_content__inner p.tlt {
	color: #3e232f !important;
	line-height: 1.55;
} */

/* 768px ~ 1920px */
@media screen and (min-width: 768px) {
	#header {
		margin: 0 auto 7.29%;
		padding-top: unset;
		max-width: 1920px;
	}
	.logo-content {
		left: 21.6%;
		transform: translateX(-50%);
		margin-top: 16.4%;
	}
	.logo-content h1 {
		width: 100%;
	}
	.brand-logo {
		position: initial;
		margin-bottom: 3.44%;
		margin-left: 0 !important;
		width: 12.6%;
	}
	
	.logo-ttl .tlt {
		/* margin-top: 0 !important; */
		margin-top: 1.2vw;
		font-size: 1.56vw;
		font-weight: bold;
		color: #333;
		letter-spacing: .05em;
		line-height: 1;
	}

	.video-content {
		top: auto;
		bottom: 8.6%;
		left: 13.5%;
		margin: 0;
		width: 34.3%;
	}
	.video-content video {
		filter: drop-shadow(0px 0px rgba(0,0,0,0));
	}
	.shop-link {
		top: auto;
		bottom: 8.6%;
		left: auto;
		right: 3vw;
		padding: 1vw 1.5vw;
		border: 1px solid #FFF;
		font-size: 1vw;
		line-height: 1.0;
		color: #FFF;
		overflow:hidden;
	}
	.shop-link::before {
		background: #FFF;
		opacity: .3;
		transition: 200ms;
	}
	.shop-link:hover::before {
		transition: 200ms;
	}
}
@media screen and (min-width: 768px) {
	.shop-link {
		color: #fff !important;
	}
	.p-page_content__inner p.tlt {
		color: #333 !important;
		line-height: 1.8;
	}
}

/* 1920px ~ */
@media screen and (min-width: 1920px) {
	#header {
		margin: 0 auto 140px;
	}
	.brand-logo {
		margin-bottom: 47px;
		width: 242px;
	}
	.logo-ttl {
		font-size: 30px;
	}
	.video-content {
		left: 260px;
		top: auto;
		bottom: 81px;
		margin: 0;
		width: 660px;
	}
	.shop-link {
		bottom: 81px;
		right: 58px;
		padding: 18px 26px;
		font-size: 18px;
	}
}



/*------------------------------
  Section COMMON
------------------------------*/
h2 {
	font-family: "minerva-modern", sans-serif;
	font-weight: normal;
	color: #8f8f8f;
}



/*------------------------------
  Section - Concept
------------------------------*/
.concept-area {
	position: relative;
	margin: 0 auto 19.3%;
	width: calc(100% - 4.83% * 2);
}
.concept-img-main {
	display: block;
	margin-bottom: 14%;
	width: 81.6vw;
}
.concept-img-sub {
	display: block;
	position: absolute;
	top: 24%;
	right: 0;
	width: 42.2vw;
}
.concept-area h2 {
	margin-bottom: 8.45%;
	font-size: 5.43vw;
	line-height: 1;
	letter-spacing: .05em;
}
.concept-title-block,
.concept-text-block {
	margin: 0 5%;
}
.concept-ttl {
	margin-bottom: 8.45%;
	font-family: hiragino-kaku-gothic-pron, sans-serif;
	font-size: 5.55vw;
	font-weight: bold;
	line-height: 1.95;
	letter-spacing: .05em;
}
div.concept-txt {
	margin-bottom: 14.4%;
	font-size: 3.20vw;
	line-height: 2.48;

}
div.concept-txt p {
	margin-bottom: 1.5em;
	line-height: 2.48;
}
.concept-txt p:last-of-type {
	margin-bottom: 0;
}
.concept-ttl p.tlt {
	line-height: 1.55;
}
.concept-ttl p.tlt,
.concept-text-block .concept-txt p {
	color: #333;
	/* font-family: hiragino-kaku-gothic-pron, sans-serif; */
}
.concept-txt p {
	font-family: hiragino-kaku-gothic-pron, sans-serif;
}

/* .concept-ttl p.tlt {
	color: #3e232f;
} */

/* 768px ~ 1399px */
@media screen and (min-width: 768px) {
	.concept-area {
		margin: 0 auto 11%;
		width: 100%;
		max-width: 1400px;
	}
	.concept-img-main {
		margin-left: -3.3%;
		width: 77%;
	}
	.concept-title-block {
		position: absolute;
		top: 7.5%;
		right: 9.4%;
		margin: 0 0;
		width: 26vw;
	}
	.concept-area h2 {
		margin-bottom: 16.6%;
		font-size: 2.3vw;
		line-height: 1;
	}
	.concept-ttl {
		font-size: 1.85vw;
	}
	.concept-img-sub {
		top: 166%;
		right: -6.3vw;
		width: 30.4vw;
	}
	.concept-text-block {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		margin: 0 0 0 3.9vw;
		padding: 1.8vw 0 0;
	}
	div.concept-txt {
		margin: 3.1vw 0 0 3.9vw;
		width: 46%;
		font-size: 1.3vw;
		line-height: 2.7;
	}
	div.concept-txt p {
		line-height: 2.7;
	}
	.concept-text-block picture {
		width: 44.5vw;
	}
}
.concept-ttl p.tlt,
.concept-text-block .concept-txt p {
	line-height: 1.8;
}
.concept-txt p.tlt,
.concept-text-block .concept-txt p {
	line-height: 2.6;
}
/* 1400px ~ */
@media screen and (min-width: 1400px) {
	.concept-area {
		margin: 0 auto 160px;
	}
	.concept-title-block {
		top: 101px;
		right: 115px;
		width: 370px;
	}
	.concept-area h2 {
		margin-bottom: 60px;
		font-size: 32px;
		line-height: 1;
	}
	.concept-ttl {
		font-size: 26px;
	}
	.concept-img-sub {
		top: 367px;
		right: -86px;
		width: 426px;
	}
	.concept-text-block {
		margin: 0 0 0 55px;
		padding: 24px 0 0;
	}
	div.concept-txt {
		margin: 44px 0 0 55px;
		font-size: 18px;
	}
	.concept-text-block picture {
		width: 622px;
	}
}



/*------------------------------
  Section - Hair Care
------------------------------*/
.product {
	margin: 0 auto;
	width: calc(100% - 4.83% * 2);
	text-align: center;
}
.haircare-area,
.skincare-area {
	margin-bottom: 14.4%;
}
.haircare-area h2,
.beautygear-area h2,
.skincare-area h2 {
	font-size: 7.8vw;
	margin-bottom: 6.88%;
	line-height: 1;
}
.product-img-main {
	display: block;
	margin-bottom: 7.24%;
}
.img-stretch {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}
.product-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}
.product-list li {
	width: calc(50% - 3.01%);
}
.haircare-area li:nth-of-type(1),
.haircare-area li:nth-of-type(2) {
	margin-bottom: 2%;
}
.haircare-area li:nth-of-type(3),
.haircare-area li:nth-of-type(4),
.haircare-area li:nth-of-type(5),
.haircare-area li:nth-of-type(6) {
	margin-bottom: 10%;
}
.product-item dt {
	margin-bottom: 10%;
}
.product-item .ems-img {
		margin-top: 12.8%;
	}
.product-item dd {
	font-size: 3.01vw;
}
.product-item dd:nth-of-type(1) {
	margin-bottom: 5.73%;
	line-height: 1.6;
	letter-spacing: -.05em;
}
.product-item dd:nth-of-type(2) {
	margin-bottom: 11.4%;
	color: #8f8f8f;
	line-height: 1.6;
}
.product-item span {
	font-family: "din-2014", sans-serif;
	font-weight: normal;
	font-size: 3.62vw;
}
.more-btn {
	position: relative;
	display: block;
	padding: 8.5% 0 8.5%;
	width: 100%;
	height: 16.3%;
	font-family: "europa", sans-serif;
	font-weight: normal;
	font-size: 3.26vw;
	color: #000;
	line-height: 1;
	letter-spacing: .1em;
	border: 1px solid #707070;
	overflow: hidden;
	transition: 50ms;
}
.more-btn::before {
	position: absolute;
	bottom: -100%;
	left: 0;
	content: "";
	width: 100%;
	height: 100%;
	background: #707070;
	z-index: -1;
	transition: 50ms;
}
.more-btn:hover {
	color: #FFF;
}
.more-btn:hover::before {
	bottom: 0;
}

/* 768px ~ 1399px */
@media screen and (min-width: 768px) {
	.product {
		margin: 0 auto;
		width: 92%;
		max-width: 1290px;
	}
	.img-stretch {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
	.haircare-area .product-img-main {
		margin-bottom: 4.3vw;
	}
	.haircare-area,
	.skincare-area {
		margin-bottom: 6.5vw;
	}
	.haircare-area h2,
	.beautygear-area h2,
	.skincare-area h2 {
		font-size: 2.3vw;
		margin-bottom: 2.2vw;
	}
	.product-list {
		justify-content: center;
		margin: 0 auto;
		width: 100%;
		max-width: 1200px;
	}
	.product-list li {
		margin-right: 8.5vw;
		width: 15vw;
	}
	.haircare-area li:nth-of-type(1),
	.haircare-area li:nth-of-type(2) {
		margin-bottom: 20px;
	}
	.haircare-area li:nth-of-type(3),
	.haircare-area li:nth-of-type(4) {
		margin-bottom: 20px;
	}
	.haircare-area li:nth-of-type(5),
	.haircare-area li:nth-of-type(6) {
		margin-bottom: 0;
	}
	.product-list li:nth-of-type(4n),
	.product-list li:last-of-type {
		margin-right: 0;
	}
	.product-item dd {
		font-size: 1.15vw;
	}

	.product-item dd:nth-of-type(1) {
		margin-bottom: 5.73%;
		line-height: 1.6;
		letter-spacing: -.05em;
	}
	.product-name-oversize {
		margin-left: -2vw;
		width: 19vw;
	}
	.product-item span {
		font-size: 1.4vw;
	}
	.more-btn {
		padding: 6.5% 0 8%;
		font-size: 1.16vw;
		border: 2px solid #707070;
		transition: 200ms;
	}
	.more-btn::before {
		transition: 200ms;
	}
}

/* 1400px ~ */
@media screen and (min-width: 1400px) {
	.product {
		width: 100%;
	}
	.haircare-area .product-img-main {
		margin-bottom: 60px;
	}
	.haircare-area,
	.skincare-area {
		margin-bottom: 90px;
	}
	.haircare-area h2,
	.beautygear-area h2,
	.skincare-area h2 {
		font-size: 32px;
		margin-bottom: 30px;
	}
	.product-list li {
		margin-right: 120px;
		width: 210px;
	}
	.product-item dd {
		font-size: 16px;
	}
	.product-name-oversize {
		margin-left: -10px;
		width: 230px;
	}
	.product-item span {
		font-size: 20px;
	}
	.more-btn {
		font-size: 16px;
	}
}



/*------------------------------
  Section - Beauty Gear
------------------------------*/
.beautygear-area {
	margin-bottom: 19.3%;
}

/* 768px ~ 1399px */
@media screen and (min-width: 768px) {
	.beautygear-area.gear-haircare {
		margin-bottom: 10vw;
	}
	.beautygear-area.gear-haircare > div {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.beautygear-area.gear-haircare > div h2 {
		width: 52.8%;
	}
	.beautygear-area.gear-haircare .product-img-main {
		margin-bottom: 4.3vw;
		width: 42.8vw;
	}
	.beautygear-area.gear-haircare h2 {
		margin-bottom: 0;
	}
	.beautygear-area.gear-haircare .product-list {
		margin-left: auto;
		margin-right: auto;
	}
	.beautygear-area.gear-haircare li:nth-of-type(1),
	.beautygear-area.gear-haircare li:nth-of-type(2),
	.beautygear-area.gear-haircare li:nth-of-type(3),
	.beautygear-area.gear-haircare li:nth-of-type(4) {
		margin-bottom: 20px;
	}
	.beautygear-area.gear-haircare li:nth-of-type(5) {
		margin-bottom: 0;
	}
	/*
	.beautygear-area.gear-haircare .product-list li:last-of-type {
		margin-right: 0;
	}
	*/
	.beautygear-area.gear-skincare {
		/* display: flex;
		align-items: flex-end; */
		margin-bottom: 10vw;
		padding-top: 3.5vw;
	}
	.beautygear-area.gear-skincare .product-img-main {
		margin-bottom: 4.3vw;
		width: 42.8vw;
	}
	.beautygear-area.gear-skincare h2 {
		margin-bottom: 0;
	}
	.beautygear-area.gear-skincare .product-list {
		justify-content: center;
		/* margin-left: 7.5vw; */
	}
	.beautygear-area.gear-skincare .product-list li:last-of-type {
		margin-right: 0;
	}
}

/* 1400px ~ */
@media screen and (min-width: 1400px) {
	.beautygear-area.gear-haircare {
		margin-bottom: 140px;
	}
	.beautygear-area.gear-haircare > div h2 {
		width: 690px;
	}
	.beautygear-area.gear-haircare .product-img-main {
		margin-bottom: 60px;
		width: 600px;
	}
	.beautygear-area.gear-skincare {
		margin-bottom: 140px;
	}
	.beautygear-area.gear-skincare .product-img-main {
		margin-bottom: 60px;
		width: 600px;
	}
	/* .beautygear-area.gear-skincare .product-list {
		margin-left: 105px;
	} */
}



/*------------------------------
  Section - Skin Care
------------------------------*/
.skincare-area {
	margin-bottom: 14.4%;
}
.skincare-area li:nth-of-type(1),
.skincare-area li:nth-of-type(2) {
	margin-bottom: 10.9%;
}

/* 768px ~ 1399px */
@media screen and (min-width: 768px) {
	.skincare-area {
		margin-bottom: 6.5vw;
	}
	.skincare-area .product-img-main {
		margin-bottom: 4.3vw;
	}
	.skincare-area h2 {
		margin-bottom: 0;
	}
	.skincare-area li:last-of-type {
		margin-right: 0;
	}
	.skincare-area li:nth-of-type(1),
	.skincare-area li:nth-of-type(2) {
		margin-bottom: 0;
	}
}

/* 1400px ~ */
@media screen and (min-width: 1400px) {
	.skincare-area {
		margin-bottom: 90px;
	}
	.skincare-area .product-img-main {
		margin-bottom: 60px;
	}
}



/*------------------------------
  Footer
------------------------------*/
footer {
	position: relative;
	background-color: #3e3e3e;
	margin-top: 50%;
	padding: 8% 3% 1%;
	text-align: center;
}
.footer-logo {
	margin: 0 auto 20px;
	width: 28%;
}
.footer-text {
	margin-bottom: 1em;
	line-height: 2.7;
	letter-spacing: .02em;
	font-family: "din-2014", hiragino-kaku-gothic-pron, sans-serif;
	font-size: 3.2vw;
	color: #fff;
}
.footer-text a {
	color: #fff;
	text-decoration: none;
}
.mailto {
	text-decoration: underline;
	color: #fff;
}

/* back to top */
.btt {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -37%;
	right: 8vw;
	margin: 0 auto;
	width: 12vw;
	height: 12vw;
	background-color: rgba(62, 62, 62, .4);
	cursor: pointer;
	font-size: 13px;
}
.btt i {
	color: #FFF;
}

/* 768px ~ 1399px */
@media screen and (min-width: 768px) {
	footer {
		margin-top: 25.3vw;
		padding: 3%;
	}
	.footer-logo {
		/* margin-bottom: 33px; */
		width: 110px;
	}
	.footer-text-flex {
		display: flex;
		justify-content: center;
	}
	.mail-address {
		position: relative;
		margin-left: 45px;
	}
	.mail-address::before {
		position: absolute;
		top: 32%;
		left: -6.2%;
		height: 1em;
		content: '';
		border-left: 1px solid #fff;
	}
	.footer-text {
		letter-spacing: .03em;
		font-size: 13px;
	}
	.footer-space {
		margin-left: 1em;
	}
	.mailto {
		text-decoration: none;
	}
	.mailto:hover {
		text-decoration: underline;
	}

	/* back to top */
	.btt {
		top: -73%;
		left: inherit;
		right: 5.5vw;
		width: 50px;
		height: 50px;
		transition: 200ms;
		
	}
	.btt:hover {
		background-color: rgba(62, 62, 62, .8);
	}
}

/* 1400px ~ */
@media screen and (min-width: 1400px) {
	footer {
		margin-top: 350px;
		padding: 40px 0 30px;
	}
}



/*------------------------------
  AOS調整
------------------------------*/
[data-aos=fade-up] {
	transform: translate3d(0,30px,0);
}
[data-aos=fade-right] {
	transform: translate3d(-30px,0,0);
}
@media screen and (max-width: 767px) {
	[data-aos=fade-right] {
		transform: translate3d(0,30px,0);
	}
}



/*------------------------------
  20221005 商品タイトル幅調整
------------------------------*/
.product-name-oversize-ex {
	white-space: nowrap;
}

/* ~ 767px */
@media screen and (max-width: 767px) {
	.product-name-oversize-ex {
		letter-spacing: -.15em !important;
	}
}

/* 768px ~ 1399px */
@media screen and (min-width: 768px) {
	.product-name-oversize-ex {
		margin-left: -2vw;
		width: 19vw;
	}
}

/* 1400px ~ */
@media screen and (min-width: 1400px) {
	.product-name-oversize-ex {
		margin-left: -25px;
		width: 260px;
	}
}



/*------------------------------
  202311 SKIN CARE & BEAUTY GEAR レイアウト追加
------------------------------*/
.skincare-beautygear-area {
	margin-bottom: 14.4%;
}
.skincare-beautygear-area h2 {
	font-size: 7.8vw;
	margin-bottom: 6.88%;
}
.skincare-beautygear-area li:nth-of-type(1),
.skincare-beautygear-area li:nth-of-type(2) {
	margin-bottom: 10.9%;
}
.skincare-beautygear-list-inner:nth-child(n+2) {
	margin-top: calc(19.3vw - 10.9%);
}

/* 768px ~ 1399px */
@media screen and (min-width: 768px) {
	.skincare-beautygear-area {
		margin-bottom: 6.5vw;
	}
	.skincare-beautygear-area .product-img-main {
		margin-bottom: 5.6vw;
	}
	.skincare-beautygear-list {
		display: flex;
		justify-content: center;
	}
	.skincare-beautygear-list-inner:nth-child(n+2) {
		margin-top: unset;
	}

	/* SKIN CARE＆BEAUTY GEARアイテム 3つまで */
	.skincare-beautygear-list.item-until-03 .skincare-beautygear-list-inner:first-of-type {
		padding-right: calc(17.4vw / 2);
	}
	.skincare-beautygear-list.item-until-03 .skincare-beautygear-list-inner:last-of-type {
		padding-left: calc(17.4vw / 2);
	}

	/* SKIN CARE＆BEAUTY GEARアイテム 4つまで */
	.skincare-beautygear-list.item-max-04 .skincare-beautygear-list-inner:first-of-type {
		padding-right: calc(10vw / 2);
	}
	.skincare-beautygear-list.item-max-04 .skincare-beautygear-list-inner:last-of-type {
		padding-left: calc(10vw / 2);
	}

	.skincare-beautygear-area h2 {
		font-size: 2.3vw;
		margin-bottom: 0;
	}
	.skincare-beautygear-area li:last-of-type {
		margin-right: 0;
	}
	.skincare-beautygear-area li:nth-of-type(1),
	.skincare-beautygear-area li:nth-of-type(2) {
		margin-bottom: 0;
	}
}

/* 1400px ~ */
@media screen and (min-width: 1400px) {
	.skincare-beautygear-area {
		margin-bottom: 90px;
	}
	.skincare-beautygear-area .product-img-main {
		margin-bottom: 60px;
	}
	.skincare-beautygear-area h2 {
		font-size: 32px;
		margin-bottom: 30px;
	}
}