@charset "utf-8";
@import "keyframes.css";
#container { background: #4f80b0;}
body.fixed { position: fixed;}
.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 2;}
.bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.bg .base { width: 100%; max-width: 1280px; height: 100%; margin: 0 auto; background: url('../img/hairpack/bg-base.jpg') repeat-y 50% 0 / 100% auto;}
.bg .stars { position: absolute; left: 0; top: 0; z-index: 8; width: 100%; height: 100%;}
.bg .stars div { position: relative; width: 100%; height: 100%;}
.bg .stars div span { position: absolute; display: block; width: 15px; height: 20px;
background: url('../img/top/star.png') no-repeat 50% 50% / 100% 100%; opacity: 1;
}
.bg .stars div.s span { animation: flash-s 2.0s infinite;}
.bg .stars div.s span:nth-of-type(1){ top: 10%; left: 38%; animation-delay: 0.0s;}
.bg .stars div.s span:nth-of-type(2){ top: 28%; left: 34%; animation-delay: 1.0s;}
.bg .stars div.s span:nth-of-type(3){ top: 50%; left: 20%; animation-delay: 3.0s;}
.bg .stars div.s span:nth-of-type(4){ top: 70%; right: 10%; animation-delay: 2.5s;}
.bg .stars div.s span:nth-of-type(5){ top: 80%; right: 15%; animation-delay: 1.0s;}
.bg .stars div.s span:nth-of-type(6){ top: 85%; right: 45%; animation-delay: 0.0s;}
.bg .stars div.s span:nth-of-type(7){ top: 90%; left: 28%; animation-delay: 1.0s;}
.bg .stars div.m span { animation: flash-m 2.25s infinite;}
.bg .stars div.m span:nth-of-type(1){ top: 6%; right: 28%; animation-delay: 2.2s;}
.bg .stars div.m span:nth-of-type(2){ top: 15%; right: 35%; animation-delay: 2.0s;}
.bg .stars div.m span:nth-of-type(3){ top: 10%; right: 10%; animation-delay: 1.4s;}
.bg .stars div.m span:nth-of-type(4){ top: 35%; left: 18%; animation-delay: 0.0s;}
.bg .stars div.m span:nth-of-type(5){ top: 42%; left: 16%; animation-delay: 1.5s;}
.bg .stars div.m span:nth-of-type(6){ top: 90%; right: 16%; animation-delay: 1.0s;}
.bg-2 {}
@media (max-width: 801px) {
}
#ft { max-width: 1280px; background: url('../img/bg/ft-sv.jpg') no-repeat 50% 50% / cover;}
@media (max-width: 641px) {
#ft { background: url('../img/bg/ft-sv@sp.jpg') no-repeat 50% 100% / cover;}
}
.note ul { width: 92%;}
.note ul li { color: #fff; font-size: 10px;}
.mfp-bg { background: #000;}
.mfp-figure:after { content: none;}
.mfp-figure figure { width: calc( 100% - 48px ); max-width: 640px; margin: 0 auto; padding: 24px 0;}
.mfp-figure figure img { border: solid 1px #fff; border-radius: 20px;}
.mfp-close:after { content: ''; display: block; width: 42px; height: 42px; position: absolute; right: 0; top: 0;
background-image: url('data:image/svg+xml;utf8,');
background-position: 100% 50%; background-size: auto 100%; background-repeat: no-repeat;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close { right: 0%;}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
.mfp-figure figure { padding: 24px 0;}
.mfp-figure figure img { border-radius: 12px;}
}
@keyframes shooting {
0% { opacity: 0; width: 0px;}
30% { opacity: 1;}
50% { opacity: 0; width: 800px; }
80% { opacity: 0; transform: translateX(-400px);}
100% { opacity: 0;}
}
@keyframes updown {
0% { transform: translateY(0px);}
50% { transform: translateY(8px);}
100% { transform: translateY(0px);}
}
#kv-hairpack { position: relative; width: 100%; overflow: hidden;}
#kv-hairpack .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#kv-hairpack .icn-new { position: absolute; left: 42%; top: 12%; width: 10vw; max-width: 120px; z-index: 9;}
#kv-hairpack .icn-new img { position: relative; width: 100%; transition: 0.4s linear 0.8s; opacity: 0;}
#kv-hairpack .txt { position: absolute; left: 0; top: 0; z-index: 10; width: 100%;}
#kv-hairpack .txt .inner { width: 94%; max-width: 1200px; margin: 0 auto;}
#kv-hairpack .txt .inner div { width: 60%; padding-top: 140px;}
#kv-hairpack .txt h1 { margin-bottom: 50px; text-align: center;}
#kv-hairpack .txt h1 img { position: relative; width: 42%; max-width: 310px;
transition: 0.4s linear 0.4s; opacity: 0; transform: translateY(20px);
}
#kv-hairpack .txt p { text-align: center;}
#kv-hairpack .txt p img { position: relative; width: 90%; max-width: 450px;
transition: 0.4s linear 0.4s; opacity: 0; transform: translateY(20px);
}
#kv-hairpack .txt p img.sp { display: none;}
#kv-hairpack .bg-kv { position: relative; width: 100%; z-index: 1;}
#kv-hairpack .bg-kv picture { display: block; width: 100%;}
#kv-hairpack .bg-kv picture img { width: 100%; height: auto;}
#kv-hairpack .news { position: absolute; left: 0%; top: 540px; width: 100%; z-index: 3;}
#kv-hairpack .news .inner { position: relative; width: 94%; max-width: 1200px; margin: 0 auto; transition: 0.4s linear 0.8s; opacity: 0; transform: translateY(20px);}
#kv-hairpack .news .inner div { width: 60%;}
#kv-hairpack .news .inner div a { display: block; margin: 0 auto; width: 88%; max-width: 350px; margin: 0 auto; padding: 20px; background: url('../img/bg/news.png') no-repeat 50% 50% / 100% 100%; color: #0f275d; text-decoration: none;}
#kv-hairpack .news a dl { display: table; width: 100%; margin: 0 auto;}
#kv-hairpack .news a dl dt,
#kv-hairpack .news a dl dd { display: table-cell; vertical-align: middle;}
#kv-hairpack .news a dl dt { width: 90px;}
#kv-hairpack .news a dl dt img{ width: 100%;}
#kv-hairpack .news a dl dd { width: auto; padding-left: 15px; font-size: 13px;}
#kv-hairpack .news a dl dd span.date { display: block; font-size: 12px;}
#kv-hairpack .news a:hover { opacity: 0.85;}
#kv-hairpack.show .icn-new img { opacity: 1;}
#kv-hairpack.show .txt h1 img,
#kv-hairpack.show .txt p img,
#kv-hairpack.show .news div { opacity: 1; transform: translateY(0px);}
#kv-hairpack.show .txt-sp p img { opacity: 1; transform: translateY(0px);}
#kv-hairpack.show .bg-kv .c { opacity: 1;}
@media (max-width: 1281px) {
#kv-hairpack .txt .inner div { padding-top: 10vw;}
#kv-hairpack .txt h1 { margin-bottom: 4vw;}
#kv-hairpack .news { top: 45vw;}
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
#kv-hairpack { padding-bottom: 0px;}
#kv-hairpack .txt { position: absolute; left: 0%; width: 100%;}
#kv-hairpack .txt .inner div { width: 100%; padding-top: 10vw;}
#kv-hairpack .news { top: auto; bottom: 18vw; left: 0px; width: 100%;}
#kv-hairpack .news .inner div { width: 100%; margin: 0 auto;}
#kv-hairpack .note { bottom: 4%;}
#kv-hairpack .note ul { margin: 0 auto; text-align: left;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
#kv-hairpack .news { bottom: 12vw;}
#kv-hairpack .news a dl dt { width: 60px;}
#kv-hairpack .news a dl dd { font-size: 13px;}
#kv-hairpack .news a dl dd span.date { font-size: 11px;}
}
.lead { width: 100%; position: relative; z-index: 2;}
.lead .inner { position: relative; padding: 80px 0px 30px;}
.lead h2 { position: absolute; left: 0; top: -60px; width: 100%; text-align: center;}
.lead h2 img { width: 72%; max-width: 580px; height: auto;}
.lead p { color: #fff; font-size: clamp(14px,2.8vw,28px); font-weight: 700; letter-spacing: 0.075rem; text-align: center;}
.lead p img { display: block; width: 72%; max-width: 580px; margin: 0 auto 30px;}
.lead p span { display: block;}
.lead p sub { font-size: 16px; vertical-align: baseline;}
@media (max-width: 801px) {
.lead .inner{ padding: 60px 0 20px;}
.lead h2 { top: -6vw;}
.lead p { font-size: 3.6vw;}
.lead p sub { font-size: 12px;}
}
@media (max-width: 481px) {
.lead .inner{ padding: 40px 0 12px;}
.lead h2 { top: -4vw;}
.lead p img { margin-bottom: 20px;}
.lead p sub { font-size: 10px;}
}
#story {}
#story .inner-sct { width: 92%; margin: 0 auto; padding: 30px 0 0px;}
#story h2 { margin-bottom: 40px; text-align: center;}
#story h2 img { width: 72%; max-width: 480px; height: auto;}
#story .movie { width: 90%; max-width: 630px; margin: 0 auto 20px;}
#story .movie .inner { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden;}
#story .movie .preload { position: absolute; left: 0; top: 0; z-index: 2; width: 100%;}
#story .movie .preload img { width: 100%; opacity: 1; transition: 0.3s linear;}
#story .movie .preload.fade img { opacity: 0;}
#story .movie iframe{ position: absolute; z-index: 1; width: 100%; top: 50%; transform: translateY(-50%);}
#story .movie video { position: relative; z-index: 1; width: 100%;}
#story .note ul { max-width: 640px; margin: 0 auto;}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
#story .inner-sct { padding: 12px 0 20px;}
}
.ttl h2 { line-height: 1; text-align: center;}
.ttl h2 img { width: 85%; max-width: 500px; height: auto;}
.ttl p { margin-top: -10px; color: #fff; font-size: 15px; text-align: center;}
@media (max-width: 481px) {
.ttl p { margin-top: -6px; font-size: 12px;}
}
#point { padding: 40px 0;}
#point h2 { line-height: 1; text-align: center;}
#point h2 img { width: 72%; max-width: 500px; height: auto;}
#point .ctn-pc { position: relative;}
#point .ctn-pc .box { position: absolute; left: 0; top: 0; width: 100%; padding-top: 40px;}
#point .ctn-pc.fixed .box { position: fixed;}
#point .ctn-pc .box.show {}
#point .ctn-pc .box h2 { margin-bottom: 32px;}
#point .ctn-pc .box .inner-box { width: 88%; max-width: 1024px; margin: 0 auto; padding: 40px 0; transition: 0.3s linear; opacity: 0;}
#point .ctn-pc .box.show .inner-box { opacity: 1;}
#point .ctn-pc .box .ctn-flex { display: flex; width: 100%; justify-content: space-between;}
#point .ctn-pc .box .tit { width: 48%; max-width: 480px;}
#point .ctn-pc .box .fig { width: 50%;}
#point .ctn-pc .box .tit img { width: 100%; height: auto;}
#point .ctn-pc .box .fig figure { width: 100%; border-radius: 30px; overflow: hidden;}
#point .ctn-pc .box .fig figure img { width: 100%; height: auto;}
#point .ctn-sp { display: none; margin: 0 auto;}
#point .ctn-sp h2 { margin-bottom: 30px;}
#point .ctn-sp ul { width: 92%; max-width: 680px; margin: 0 auto;}
#point .ctn-sp ul li { margin: 0 auto;}
#point .ctn-sp ul li:last-child { margin: 0 auto;}
#point .ctn-sp ul li dl { position: relative; width: 85%; padding: 16px 0;}
#point .ctn-sp ul li:nth-child(even) dl { margin: 0 0 0 auto;}
#point .ctn-sp ul li dl dt { position: absolute; left: 0; top: 0; width: 28%; max-width: 150px;}
#point .ctn-sp ul li dl dd {}
#point .ctn-sp ul li dl dt img { width: 100%;}
#point .ctn-sp ul li dl dd img { width: 100%;}
#point .note { padding-top: 40px;}
#point .note ul { width: 92%; max-width: 980px; margin: 0 auto;}
@media (max-width: 801px) {
#point .ctn-pc { display: none;}
#point .ctn-sp { display: block;}
#point .note { padding-top: 20px;}
}
@media (max-width: 481px) {
#point { padding-bottom: 40px;}
#point .ctn-sp h2 { margin-bottom: 20px;}
#point .ctn-sp ul li dl { padding: 8px 0;}
}
#pickup .inner-sct { width: 92%; max-width: 1080px; margin: 0 auto; padding: 60px 0 120px;}
#pickup .ttl { margin-bottom: 50px;}
#pickup .ctn { width: 100%; margin: 0 auto 40px;}
#pickup .ctn .board { width: 100%; max-width: 700px; margin: 0 auto 30px;
border: solid 2px #fff;
background: rgba(255,255,255,0.25);
box-shadow: 0 0 30px rgba(255,255,255,0.6), 0 0 30px rgba(255,255,255,0.6), 0 0 40px inset rgba(255,255,255,0.6);
}
#pickup .ctn .board img { width: 100%;}
#pickup .ctn picture { display: block; width: 100%; max-width: 900px; margin: 0 auto 30px;}
#pickup .ctn picture img { width: 100%;}
#pickup .use { position: relative; width: 90%; max-width: 720px; margin: 0 auto; background: #006ab7;}
#pickup .use dl { display: table; width: 100%; padding: 20px 30px;}
#pickup .use dl dt,
#pickup .use dl dd { display: table-cell; vertical-align: middle;}
#pickup .use dl dt { width: 230px; }
#pickup .use dl dt img { width: 100%;}
#pickup .use dl dd { padding-left: 30px; color: #fff; font-size: clamp(11px,2.1vw,21px); line-height: 1.4;}
#pickup .use dl dd span { display: block; font-size: clamp(12px,2.2vw,22px);}
#pickup .note {}
#pickup .note ul { max-width: 1024px; margin: 0 auto;}
@media (max-width: 801px) {
#pickup .use dl dt { width: 180px; }
#pickup .use dl dd { padding-left: 20px;}
}
@media (max-width: 481px) {
#pickup .inner-sct { width: 100%; padding: 40px 0;}
#pickup .ttl { margin-bottom: 20px;}
#pickup .ctn { margin: 0 auto 20px;}
#pickup .ctn .board { width: 82%; margin: 0 auto 20px; box-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 20px rgba(255,255,255,0.6), 0 0 20px inset rgba(255,255,255,0.6);}
#pickup .ctn picture { margin-bottom: 12px;}
#pickup .use dl { padding: 12px 15px;}
#pickup .use dl dt { width: 100px; }
}
#product { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#product .inner-sct { padding: 40px 0;}
#product .bloc { position: relative; width: 90%; max-width: 1080px; margin: 0 auto; padding: 50px 40px 60px;}
#product .bloc:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
background: #c5d5ed; border-radius: 20px;
box-shadow: 0 0 30px rgba(255,255,255,0.6), 0 0 30px rgba(255,255,255,0.6), 0 0 40px inset rgba(255,255,255,0.6);
filter: blur(20px);
}
#product .bloc .tit { position: relative; margin-bottom: 30px; z-index: 2;}
#product .bloc h2 { text-align: center; }
#product .bloc h2 img { display: block; width: 64%; max-width: 380px; margin: 0 auto 6px;}
#product .bloc h2 span { display: block; color: #0343a1; font-size: 14px; font-weight: 700; letter-spacing: 0.1rem;}
#product .bloc .ctn-flex { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 920px; margin: 0 auto; z-index: 2;}
#product .bloc .img-ctn { width: 34%;}
#product .bloc .txt-ctn { width: 65%; position: relative;}
#product .bloc .cart { width: 100%; max-width: 340px;}
#product .bloc .cart form { display: block; position: relative; background: linear-gradient(30deg,#274a6d, #335678 20%, #43739b 50%, #335678 80%, #274a6d); border-radius: 50px; overflow: hidden;}
#product .bloc .cart form:before { content: none; display: none; width: 24px; height: 24px; position: absolute; left: 15%; top: 50%; transform: translateY(-50%);
background-image: url('data:image/svg+xml;utf8,');
background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% auto; transition: 0.4s linear;
}
#product .bloc .cart form input[type="submit"]{ display: block; width: 100%; padding: 18px 0; border: none;
background: rgba(255,255,255,0); transition: 0.3s linear;
color: #fff; font-size: clamp(15px,2.4vw,24px);; line-height: 1; text-align: center; text-indent: 24px;
}
#product .bloc .cart form:hover input[type="submit"]{ background: rgba(255,255,255,0.15);}
#product .bloc .cart span { display: block; position: relative; padding: 18px 0; background: #a1a1a1; border-radius: 50px;
line-height: 1; text-align: center; overflow: hidden;}
#product .bloc .cart span em { display: inline-block; color: #fff; font-size: 24px; vertical-align: middle;}
#product .bloc .img-ctn figure { text-align: center;}
#product .bloc .img-ctn figure img { width: 88%; max-width: 230px;}
#product .bloc .txt-ctn .name { margin-bottom: 20px;}
#product .bloc .txt-ctn .name h3 { color: #0f275d; font-size: clamp(18px,3.4vw,40px); line-height: 1.2;}
#product .bloc .txt-ctn .aside { position: relative;}
#product .bloc .txt-ctn .amount { margin-bottom: 20px;}
#product .bloc .txt-ctn .amount p { color: #0e275d; font-size: 24px; font-weight: 700; line-height: 1.2;}
#product .bloc .txt-ctn p.price { margin-bottom: 40px; color: #0e275d; font-size: clamp(13px,2.2vw,22px);}
#product .bloc .txt-ctn p.price span { display: block; font-size: clamp(16px,3.0vw,28px); font-weight: 700;}
#product .bloc .txt-ctn .howto { margin-bottom: 40px;}
#product .bloc .txt-ctn .howto {}
#product .bloc .txt-ctn .howto a { display: block; width: 92%; max-width: 400px; border: solid 1px #fff; border-radius: 15px; overflow: hidden;}
#product .bloc .txt-ctn .howto a img { width: 100%;}
@media (max-width: 1201px) {
#product .bloc .txt-ctn p.price { margin-bottom: 40px;}
#product .bloc .txt-ctn .flavor { left: 55%; width: 45%;}
}
@media (max-width: 641px) {
#product .bloc .inner-bloc { padding: 30px 0 40px;}
#product .bloc:after { border-radius: 12px;
box-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 20px rgba(255,255,255,0.6), 0 0 30px inset rgba(255,255,255,0.6);
filter: blur(12px);
}
#product .bloc .ctn-flex { display: block;}
#product .bloc .img-ctn { width: 100%; margin: 0 auto 20px;}
#product .bloc .txt-ctn { width: 100%;}
#product .bloc .img-ctn figure img { width: 45%;}
#product .bloc .txt-ctn .name {}
#product .bloc .txt-ctn .name h3 { text-align: center;}
#product .bloc .txt-ctn .aside {}
#product .bloc .txt-ctn .amount p { font-size: 16px; text-align: center;}
#product .bloc .txt-ctn p.price { text-align: center;}
#product .bloc .txt-ctn p.price span { display: inline-block;}
#product .bloc .txt-ctn .howto { margin-bottom: 30px;}
#product .bloc .txt-ctn .howto a { margin: 0 auto;}
#product .bloc .txt-ctn .cart { width: 100%; max-width: 100%; margin: 0 auto;}
#product .bloc .txt-ctn .cart form { width: 80%; max-width: 320px; margin: 0 auto;}
#product .bloc .cart span { width: 80%; max-width: 320px; margin: 0 auto;}
#product .bloc .cart form input[type="submit"]{ font-weight: 700;}
}
@media (max-width: 481px) {
#product .bloc { padding: 30px 30px 40px;}
#product .bloc .tit { margin-bottom: 20px;}
#product .bloc h2 span { font-size: 11px;}
#product .bloc .cart form svg { left: 24%; top: 24%; width: 18px;}
#product .bloc .cart form:before { left: 24%; width: 18px; height: 18px;}
#product .bloc .cart form input[type="submit"]{ padding: 12px 0; font-size: 16px;}
#product .bloc .txt-ctn .name { margin-bottom: 10px;}
#product .bloc .txt-ctn .amount { margin-bottom: 12px;}
#product .bloc .txt-ctn .amount p { font-size: 14px;}
#product .bloc .txt-ctn p.price { margin-bottom: 20px;}
#product .bloc .cart span { padding: 10px 0; font-size: 12px;}
#product .bloc .cart span svg{ width: 14px;}
#product .bloc .cart span em { font-size: 12px;}
}
#shop { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 2;}
#shop .inner-sct { width: 92%; margin: 0 auto; padding: 60px 0;}
#shop .ttl { margin-bottom: 20px;}
#shop h3 { color: #fff; font-size: 25px; text-align: center;}
#shop p { margin-bottom: 40px; color: #fff; text-align: center;}
#shop .parts { max-width: 330px; margin: 0 auto;}
#shop .parts a.btn { border-width: 2px;}
#shop .parts a.btn span { font-size: clamp(24px,4.5vw,45px); font-weight: 700; line-height: 1.4;}
#shop .parts a.btn span:after { width: 18px; height: 18px; border-top: solid 3px #fff; border-right: solid 3px #fff; right: 30px;}
@media (max-width: 481px) {
#shop .inner-sct { padding: 40px 0;}
#shop h3 { font-size: 17px;}
#shop p { margin-bottom: 20px; font-size: 12px;}
#shop .parts { max-width: 180px;}
#shop .parts a.btn span:after { width: 12px; height: 12px; border-width: 2px; right: 20px;}
}
#campaign .inner-sct { width: 92%; max-width: 800px; margin: 0 auto; padding: 30px 0 60px;}
#campaign .board { position: relative; width: 100%;}
#campaign .board img { width: 100%;}
#campaign .board .btn { position: absolute; left: 49%; bottom: 12%; width: 42%; }
#campaign .board .btn a { display: block; width: 100%; max-width: 290px; margin: 0 auto 10px; padding: 8px 0;
background: linear-gradient(-25deg,#274a6d, #335678 20%, #43739b 50%, #335678 80%, #274a6d); border-radius: 50px;
color: #fff; font-size: clamp(13px,2.1vw,21px); text-align: center; text-decoration: none;
}
#campaign .board .btn a:hover { opacity: 0.8;}
#campaign .board .btn p { color: #0e275d; font-size: clamp(11px,2.1vw,21px); line-height: 1; text-align: center;}
@media (max-width: 481px) {
#campaign .inner-sct { padding: 30px 0;}
#campaign .board .btn { bottom: 8%;}
#campaign .board .btn a { margin-bottom: 6px; padding: 4px 0;}
}
@media (max-width: 641px) {
aside.other { display: none;}
}
.bnr-link { display: none;}
.bnr-link .inner{ padding: 40px 12px;}
.bnr-link h4 { color: #fff; font-size: clamp(14px, 4.2vw, 40px); text-align: center;}
.bnr-link h4 span { display: block; padding-top: 8px; font-size: clamp(16px, 4.6vw, 40px);}
.bnr-link ul { font-size: 0; text-align: center;}
.bnr-link ul li { display: inline-block; width: 50%; padding: 12px 6px;}
.bnr-link ul li a { display: block; width: 100%; border-radius: 12px; overflow: hidden;}
.bnr-link ul li a img { width: 100%; }
@media (max-width: 641px) {
.bnr-link { display: block;}
.bnr-link ul li { padding: 8px 5px;}
}