@charset "utf-8";

.btn { width: 92%; margin: 0 auto;}
.btn .btn-inner { position: relative; width: 100%;}
.btn .btn-inner:before,
.btn .btn-inner:after { content: ''; display: block; height: 100%; position: absolute; position: absolute; top: 0; transform: skew(-15deg);}
.btn .btn-inner:before{ width: 6px; left: 0;}
.btn .btn-inner:after { width: calc(100% - 10px); left: 10px;}
.btn .btn-inner a { display: block; position: relative; z-index: 2;
 line-height: 1; font-weight: 700; text-align: center; text-decoration: none;
}
.btn .btn-inner a span { position: relative;}
.btn .btn-inner a:after{ content: ''; display: block; width: 90%;
 position: absolute; top: 1px; right: 10px; transform: skew(-15deg); transition: 0.4s linear 0.5s;
}



#kv .bg{ width: 100%; background: url('../img/top/bg-kv.jpg') no-repeat 50% 100% / cover;}
#kv .inner { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; opacity: 0; transition: 0.4s linear;}
#kv h1 { text-align: center;}
#kv h1 img { width: 100%;}
#kv h1 img.sp { display: none;}
#kv figure { display: none;}
#kv figure img { width: 100%;}

#kv .news { background: #fff; opacity: 0; transition: 0.4s linear 0.4s;}
#kv .news .inner { width: 100%; padding: 20px 0; background: url('../img/top/bg-news.jpg') no-repeat 50% 50%;}
#kv .news a { display: block; width: 90%; max-width: 320px; margin: 0 auto; color: #464646; text-decoration: none;}
#kv .news a dl { display: table; width: 100%;}
#kv .news a dl dt,
#kv .news a dl dd { display: table-cell; vertical-align: middle;}
#kv .news a dl dt { width: 90px;}
#kv .news a dl dt img { width: 100%;}
#kv .news a dl dd { width: auto; padding-left: 18px; font-size: 14px;}
#kv .news a dl dd span.tit { display: block; margin-bottom: 4px; font-weight: 700;}
#kv .news a dl dd span.date{ display: block;}
#kv .news a:hover { opacity: 0.85;}

#kv.show .inner,
#kv.show .news { opacity: 1;}
@media (max-width: 801px) {
	#kv h1 img.pc { display: none;}
	#kv h1 img.sp { display: block;}
	#kv figure { display: block;}
}
@media (max-width: 641px) {
	#kv .news .inner { padding: 30px 0; background: url('../img/top/bg-news-sp.jpg') no-repeat 50% 50% / 100% auto;}
}
@media (max-width: 481px) {
	#kv .news .inner { padding: 20px 0;}
	#kv .news a { max-width: 310px;}
	#kv .news a dl dd { padding-left: 10px;}
}


#brand { background: linear-gradient(90deg,#d5e0e8 0%,#fff 40%,#d8dfea 100%);}
#brand .inner-sct { width: 92%; max-width: 1024px; margin: 0 auto; padding: 110px 0;}
#brand .ctn-flex { display: flex; justify-content: space-between;}
#brand .txt { width: 57%;}
#brand .pht { width: 40%;}
#brand .txt .logo { width: 50%; max-width: 180px; margin: 0 auto 60px;}
#brand .txt .logo img { width: 100%;}
#brand .txt h2 { margin-bottom: 60px;}
#brand .txt h2 img { width: 100%;}
#brand .txt figure { display: none;}
#brand .txt figure img { width: 100%;}
#brand .txt .btn { max-width: 350px;}
#brand .txt .btn .btn-inner { height: 42px;}
#brand .txt .btn .btn-inner:before,
#brand .txt .btn .btn-inner:after { background: #474747;}
#brand .txt .btn .btn-inner a:after{ height: 40px;}
#brand .txt .btn .btn-inner a { padding: 13px 0; color: #fff; font-size: 16px;}
#brand .txt .btn .btn-inner a:after{ background: #474747;}
#brand .txt .btn .btn-inner a:hover { opacity: 0.9;}
#brand .pht figure img { width: 100%;}
#brand.show .txt .btn .btn-inner a:after { width: 0%;}
@media (max-width: 1001px) {
	#brand .inner-sct { padding: 80px 0;}
	#brand .txt .logo { margin: 0 auto 30px;}
	#brand .txt h2 { margin-bottom: 30px;}
}
@media (max-width: 641px) {
	#brand .inner-sct { padding: 40px 0;}
	#brand .ctn-flex { display: block;}
	#brand .txt { width: 100%;}
	#brand .pht { display: none;}
	#brand .txt .logo { margin: 0 auto 20px;}
	#brand .txt figure { display: block; width: 60%; margin: 0 auto 30px; text-align: center;}
}
@media (max-width: 481px) {
	#brand .txt .btn { max-width: 200px;}
	#brand .txt .btn .btn-inner { height: 32px;}
	#brand .txt .btn .btn-inner a:after{ height: 30px;}
	#brand .txt .btn .btn-inner a { padding: 9px 0; font-size: 13px;}
}


#product { background: #e83d51;}
#product .inner-sct { width: 92%; max-width: 1024px; margin: 0 auto; padding: 110px 0;}
#product .ttl { margin: 0 auto 40px;}
#product .ttl h2 { margin-bottom: 10px; color: #fff; font-size: 52px; line-height: 1; text-align: center;}
#product .ttl h2 span{  font-weight: 900; letter-spacing: 0.4rem;}
#product .ttl p { color: #fff; text-align: center;}
#product .ctn-flex { display: flex; justify-content: space-between;}
#product .haircare { width: 57.6%;}
#product .bodycare { width: 41.2%;}
#product .item a { display: block; text-align: center; text-decoration: none;}
#product .item figure img{ width: 100%;}
#product .item figure img.sp { display: none;}
#product .item .more { position: relative; padding: 12px 0; background: #fff251;}
#product .item .more:before,
#product .item .more:after { content: ''; }
#product .item .more:before{ display: block; width: 100%; height: 100%; background: #fff251;
 position: absolute; right: 0; top: 0; z-index: 3; transition: 0.4s linear 0.5s;
}
#product .item .more:after { display: inline-block; vertical-align: middle;
 width: 14px; height: 14px; border-top: solid 1px #333; border-right: solid 1px #333;
 position: relative; transform: rotate(45deg);
}
#product .item .more span { display: inline-block; margin-right: 10px; font-size: 16px; font-weight: 700; line-height: 1; vertical-align: middle;}
#product.show .item .more:before{ width: 0%;}
@media (max-width: 641px) {
	#product .inner-sct { padding: 60px 0;}
	#product .ttl { margin: 0 auto 30px;}
	#product .haircare { width: 55.6%;}
	#product .bodycare { width: 43.3%;}
	#product .item figure img.pc { display: none;}
	#product .item figure img.sp { display: block;}
}
@media (max-width: 481px) {
	#product .ttl h2 { margin-bottom: 12px; font-size: 36px;}
	#product .ttl h2 span{ letter-spacing: 0.25rem;}
	#product .ttl p { font-size: 14px;}
	#product .item .more { padding: 2px 0 4px;}
	#product .item .more:after { width: 10px; height: 10px;}
	#product .item .more span { margin-right: 8px; font-size: 13px;}
}


#develop { background: linear-gradient(-45deg,#5eb8de 10%,#ffca3f 30%,#f2655e 80%);}
#develop .tit.tit-R { margin-bottom: 10px; background: url('../img/top/bg-tit-R.png') no-repeat 0% 50%;}
#develop .tit.tit-L { background: url('../img/top/bg-tit-L.png') no-repeat 100% 50%;}
#develop .tit .inner { width: 92%; margin: 0 auto; padding: 28px 0;}
#develop .tit h2 { text-align: center;}
#develop .tit h2 img { width: 100%; max-width: 520px;}
#develop .tit h2 img.sp { display: none;}
#develop .inner-sct { width: 94%; margin: 0 auto; padding: 50px 0 40px;}
#develop ul { width: 92%; max-width: 1024px; margin: 0 auto 40px; font-size: 0; text-align: center;}
#develop ul li { display: inline-block; width: 50%; }
#develop ul li img { width: 92%; }
#develop .note { width: 100%; max-width: 1200px; margin: 0 auto;}
#develop .note p { color: #fff; font-size: 12px; text-align: right;}
@media (max-width: 1601px) {
	#develop .tit.tit-R { background-position: 100% 50%;}
	#develop .tit.tit-L { background-position: 0% 50%;}
}
@media (max-width: 1001px) {
	#develop .tit .inner { width: 50%; margin: 0 auto; padding: 28px 0;}
}
@media (max-width: 801px) {
	#develop .tit .inner { width: 100%; padding: 0px;}
	#develop .tit h2 img { max-width: 100%;}
	#develop .tit h2 img.pc { display: none;}
	#develop .tit h2 img.sp { display: block;}
	#develop .inner-sct { width: 90%; padding: 30px 0;}
	#develop ul { margin: 0 auto 20px;}
	#develop ul li { display: block; width: 100%; margin: 0 auto 20px;}
	#develop ul li:last-child { margin: 0 auto;}
}
@media (max-width: 481px) {
	#develop ul { margin: 0 auto 10px;}
	#develop ul li { margin: 0 auto 12px;}
	#develop .note p { font-size: 10px;}
}


#shop { background: url('../img/top/shop-wide.jpg') no-repeat 50% 50% / cover;}
#shop .inner-sct{ position: relative; width: 100%; max-width: 1200px; margin: 0 auto;}
#shop .ctn { position: absolute; width: 50%; top: 50%; transform: translateY(-45%); z-index: 2;}
#shop .ttl { margin: 0 auto 40px;}
#shop .ttl h2 { margin-bottom: 6px; color: #fff; font-size: 52px; font-weight: 900; line-height: 1; text-align: center;}
#shop .ttl h2 span{ display: inline-block; letter-spacing: 0.4rem; vertical-align: middle; text-shadow: 0 0 12px #008aca, 0 0 12px #008aca, 0 0 12px #008aca, 0 0 12px #008aca;}
#shop .ttl p { color: #fff; text-align: center; text-shadow: 0 0 6px #008aca, 0 0 6px #008aca, 0 0 6px #008aca, 0 0 6px #008aca;}
#shop h3 { margin-bottom: 10px; color: #fff; font-size: 30px; font-weight: 900; line-height: 1.2; text-align: center; text-shadow: 0 0 12px #008aca, 0 0 12px #008aca, 0 0 12px #008aca, 0 0 12px #008aca;}
#shop h3 span { display: block;}
#shop p.note { margin-bottom: 40px; color: #fff; text-align: center; text-shadow: 0 0 6px #008aca, 0 0 6px #008aca, 0 0 6px #008aca, 0 0 6px #008aca;}
#shop .btn-shop { width: 92%; max-width: 260px; margin: 0 auto;}
#shop .btn-shop .btn-inner { position: relative; width: 100%; height: 52px;}
#shop .btn-shop .btn-inner:before,
#shop .btn-shop .btn-inner:after { content: ''; display: block; position: absolute; position: absolute;}
#shop .btn-shop .btn-inner:before{ width: 100%; height: 100%; top: 0; transform: skew(-15deg); background: #fff251;}
#shop .btn-shop .btn-inner:after { width: 10px; height: 10px; border-top: solid 1px #333; border-right: solid 1px #333;
 top: 50%; right: 40px; transform: translate(0,-50%) rotate(45deg);
}
#shop .btn-shop .btn-inner a { display: block; padding: 13px 0; position: relative; z-index: 2;
 color: #484848; font-size: 23px; line-height: 1; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
}
#shop .btn-shop .btn-inner a span { position: relative;}
#shop .btn-shop .btn-inner a:after{ content: ''; display: block; width: 90%; height: 50px;
 position: absolute; top: 1px; right: 10px; transform: skew(-15deg); background: #fff251; transition: 0.4s linear 0.5s;
}
#shop .bg { position: relative; z-index: 1;}
#shop .bg img { width: 100%; opacity: 0;}
#shop .bg img.sp{ display: none;}
#shop.show .btn-shop .btn-inner a:after { width: 0%;}
@media (max-width: 1201px) {
	#shop { background: none;}
	#shop .ctn { transform: translateY(-52%);}
	#shop .ttl { margin: 0 auto 20px;}
	#shop h3 { margin-bottom: 10px; font-size: 24px;}
	#shop p.note { margin-bottom: 20px; font-size: 12px;}
	#shop .bg img { opacity: 1;}
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#shop .ctn { width: 100%; top: auto; bottom: 50px; transform: translateY(0%);}
	#shop .ttl { display: none;}
	#shop h3 { display: none;}
	#shop p.note { display: none;}
	#shop .bg img.pc { display: none;}
	#shop .bg img.sp { display: block;}
}
@media (max-width: 481px) {
	#shop .ctn { bottom: 32px;}
	#shop .btn-shop { max-width: 180px;}
	#shop .btn-shop .btn-inner { height: 36px;}
	#shop .btn-shop .btn-inner:after { top: 50%; right: 40px; transform: translate(0,-50%) rotate(45deg);}
	#shop .btn-shop .btn-inner a { padding: 7px 0; font-size: 20px;}
	#shop .btn-shop .btn-inner a:after{ height: 34px;}
}

#insta { background: linear-gradient(90deg,#d5e0e8 0%,#fff 40%,#d8dfea 100%);}
#insta .inner-sct { width: 92%; margin: 0 auto; padding: 90px 0;}
#insta .ttl { margin: 0 auto 40px;}
#insta .ttl h2 { margin-bottom: 20px; color: #474747; font-size: 52px; font-weight: 900; line-height: 1; text-align: center;}
#insta .ttl h2 svg { display: inline-block; width: 46px; margin-right: 20px; vertical-align: middle; fill: #474747;}
#insta .ttl h2 span{ display: inline-block; letter-spacing: 0.4rem; vertical-align: middle;}
#insta .ttl p { color: #474747; font-weight: 700; text-align: center;}
#insta ul { width: 100%; max-width: 1024px; margin: 0 auto 40px; font-size: 0; text-align: center;}
#insta ul li { display: inline-block; width: 33%;}
#insta ul li a { display: block; width: 92%; margin: 0 auto; }
#insta ul li a img { width: 100%;}
#insta .btn-follow { width: 92%; max-width: 330px; margin: 0 auto;}
#insta .btn-follow .btn-inner { position: relative; width: 100%; height: 52px;}
#insta .btn-follow .btn-inner:before,
#insta .btn-follow .btn-inner:after { content: ''; display: block; position: absolute; position: absolute;}
#insta .btn-follow .btn-inner:before{ width: 100%; height: 100%; top: 0; transform: skew(-15deg); background: #fff251;}
#insta .btn-follow .btn-inner:after { width: 10px; height: 10px; border-top: solid 1px #333; border-right: solid 1px #333;
 top: 50%; right: 40px; transform: translate(0,-50%) rotate(45deg);
}
#insta .btn-follow .btn-inner a { display: block; padding: 13px 0; position: relative; z-index: 2;
 color: #484848; font-size: 23px; line-height: 1; font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
}
#insta .btn-follow .btn-inner a span { position: relative;}
#insta .btn-follow .btn-inner a:after{ content: ''; display: block; width: 90%; height: 50px;
 position: absolute; top: 1px; right: 6px; transform: skew(-15deg); background: #fff251; transition: 0.4s linear 0.5s;
}
#insta.show .btn-follow .btn-inner a:after { width: 0%;}
@media (max-width: 801px) {
	#insta .inner-sct { padding: 60px 0;}
}
@media (max-width: 481px) {
	#insta .inner-sct { padding: 40px 0;}
	#insta .ttl { margin: 0 auto 20px;}
	#insta .ttl h2 { margin-bottom: 12px; font-size: 36px;}
	#insta .ttl h2 svg { width: 32px; margin-right: 10px;}
	#insta .ttl h2 span{ letter-spacing: 0.25rem;}
	#insta .ttl p { font-size: 12px;}
	#insta ul { margin: 0 auto 20px;}

	#insta .btn-follow { max-width: 180px;}
	#insta .btn-follow .btn-inner { height: 36px;}
	#insta .btn-follow .btn-inner:after { width: 10px; height: 10px; right: 10px;}
	#insta .btn-follow .btn-inner a { padding: 7px 0; font-size: 20px;}
	#insta .btn-follow .btn-inner a:after{ height: 34px;}
}


#story {}
#story .inner-win { width: 92%; max-width: 900px; height: 480px; margin: 0 auto; padding: 20px 6px; background: #fff; border-radius: 8px;}
#story .scroll-y { width: 100%; height: 100%; padding: 20px 40px; overflow-y: scroll;}
#story .tit { position: relative; margin-bottom: 15px;}
#story .tit:before,
#story .tit:after { content: ''; display: block; height: 100%; position: absolute; top: 0; transform: skew(-20deg);}
#story .tit:before{ width: 3px; right: 4px; background: #fff; z-index: 2;}
#story .tit:after { width: 100%; left: 0; z-index: 1;}
#story .tit#tit-1:after { background: #e83d51;}
#story .tit#tit-2:after { background: #ef9731;}
#story .tit#tit-3:after { background: #248dcf;}
#story .tit h3 { position: relative; z-index: 2; display: block; padding: 8px 20px; color: #fff; font-size: 18px; line-height: 1;}
#story .tit h3:after { content: ''; display: block; height: 100%; position: absolute; top: 0; transform: skew(-20deg); width: 3px; right: 11px; background: #fff;}
#story p.min{ margin-bottom: 10px; font-size: 24px; font-weight: 900; line-height: 1.2;}
#story p.min.color-1 { color: #e83d51;}
#story p.min.color-2 { color: #ef9731;}
#story p.min.color-3 { color: #248dcf;}
#story p.mb { margin-bottom: 40px;}
#story p.txt{ font-size: 15px;}
#story .win-close { position: relative; width: 92%; max-width: 900px; margin: 0 auto; z-index: 1045;}
#story .win-close div { position: relative; width: 100px; margin: 0 0 0 auto; padding: 8px 0 8px 40px; color: #FFF; font-size: 18px; cursor: pointer;}
#story .win-close div:before,
#story .win-close div:after { content: ''; display: block; width: 1px; height: 30px; position: absolute; left: 18px; top: 50%; background: #fff;}
#story .win-close div:before{ transform: translateY(-50%) rotate(45deg);}
#story .win-close div:after { transform: translateY(-50%) rotate(-45deg);}
@media (max-width: 481px) {
	#story .inner-win { padding: 10px 2px;}
	#story .scroll-y { padding: 10px 12px;}
	#story .tit h3 { padding: 4px 10px; font-size: 16px;}
	#story p.min{ font-size: 16px;}
	#story p.txt{ font-size: 13px;}
	#story p.mb { margin-bottom: 30px;}
	#story .win-close div { width: 86px; padding: 6px 0 6px 30px; font-size: 14px;}
	#story .win-close div:before,
	#story .win-close div:after { height: 20px; left: 12px;}

}