@charset "utf-8";
#loading { position: fixed; left: 0; bottom: 0; width: 100%; height: 100vh; z-index: 10;}
#loading .base { position: absolute; left: 0; top: -220px; width: 100%; background: linear-gradient(rgba(255,255,255,0), #fff 15%);	transition: 0.8s linear;}
#loading .base:before { content: ''; display: block; width: 100%; height: calc( 100vh + 240px );
	background: url('../img/loading.png') no-repeat 50% 0% / cover;
}
#loading.down .base { top: 100%;}

#fix-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
#fix-bg div { width: 100%; max-width: 1280px; margin: 0 auto;}
#fix-bg div:after { content: ''; display: block; width: 100%; height: 100vh;}

.wrap { position: relative;}

@keyframes wave{
   0% { transform: translateY(0px);}
  50% { transform: translateY(12px);}
 100% { transform: translateY(0px);}
}
.bubble { position: absolute; }
.bubble:before { content: ''; display: block; width: 100%; padding-top: 100%;
 background-image: url('../img/bubble-2.png'); background-repeat: no-repeat;
 animation: 6.0s wave infinite;
}



#kv { position: absolute; width: 100%; left: 0; top: 0; z-index: 2;}
#kv.fixed { position: fixed;}
#kv .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#kv .ctn { position: absolute; left: 0; top: 0; width: 100%; z-index: 6;}
#kv .ctn .logo { width: 100%; padding-top: 40px; text-align: center;}
#kv .ctn .logo img { width: 32%; max-width: 180px;}

#kv .bg { position: relative; z-index: 1;}
#kv .bg picture { display: block; width: 100%;}
#kv .bg picture img { width: 100%;}
@media (max-width: 1281px) {
	#kv .ctn .logo { padding-top: 2vw;}
}
@media (max-width: 801px) {
	#kv .ctn .logo { padding-top: 8vw;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
}

#kv .lead { position: relative; padding-bottom: 30px;}
#kv .lead h1 { margin-bottom: 30px; font-size: clamp(24px,4.0vw,36px); text-align: center; }
#kv .lead p { font-size: clamp(18px,3.2vw,24px); text-align: center;}
#kv .lead p span { display: block;}
#kv .lead p sub { font-size: 14px;}
#kv .note div { width: 92%; max-width: 1000px; margin: 0 auto;}

#kv .bubble.L1 { width: 80px; left: 2%; top: 20px; z-index: 5;}
#kv .bubble.L1:before { background-position: 0% 50%; background-size: auto 100%; animation-delay: 0.7s; opacity: 0.8;}
#kv .bubble.L2 { display: none; width: 70px; left: 8%; bottom: 16%; z-index: 5;}
#kv .bubble.L2:before { background-position: 50% 50%; background-size: auto 100%; animation-delay: 0.3s; opacity: 0.8;}
#kv .bubble.R1 { width: 72px; right: 8%; top: 10%; z-index: 5;}
#kv .bubble.R1:before { background-position: 50% 100%; background-size: 100% auto; opacity: 0.8;}
#kv .bubble.R2 { width: 70px; right: 16%; bottom: 20%; z-index: 5;}
#kv .bubble.R2:before { background-position: 50% 50%; background-size: auto 100%; animation-delay: 0.3s; opacity: 0.8;}
@media (max-width: 801px) {
	#kv .bubble.L2 { display: block;}
	#kv .bubble.R2 { width: 40px; right: 6%; bottom: 6%;}
}
@media (max-width: 481px) {
	#kv .lead p sub { font-size: 10px;}
	#kv .bubble.L1 { width: 60px; top: 0px;}
	#kv .bubble.L1:before { padding-top: 75%;}
	#kv .bubble.R1 { width: 60px; right: 6%;}
	#kv .bubble.L2 { width: 40px; left: 5%; bottom: 30%;}
	#kv .bubble.R2 { width: 30px; right: 4%; bottom: 8%;}
}



.spacer { position: relative; width: 100%;}
.spacer:after { content: ''; display: block; width: 100%; padding-top: 72%;}
@media (max-width: 801px) {
	.spacer:after { padding-top: 164%;}
}


.bg-bubble { position: relative; background: url('../img/common/bg.jpg') no-repeat 50% 0% / 1280px auto;}

#about { position: relative; z-index: 3;}
#about .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 0px 60px;}
#about .ctn { position: relative; width: 100%; height: 2000px;}
#about .ctn .fix-ctn { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%);}
#about .ctn.fixed .fix-ctn { position: fixed;}
#about .ctn .main { position: relative; width: 100%; max-width: 680px; margin: 0 auto;}
#about .ctn .main:after { content: ''; display: block; width: 100%; padding-top: 85%;}
#about .ctn .main.deep:after { background: url('../img/deep/fig-0.png') no-repeat 50% 50% / 100% auto;}
#about .ctn .main.melty:after { background: url('../img/melty/fig-0.png') no-repeat 50% 50% / 100% auto;}
#about .ctn .main.clear:after { background: url('../img/clear/fig-0.png') no-repeat 50% 50% / 100% auto;}
#about .ctn .main .sub { width: 36%; max-width: 230px; position: absolute; transition: 0.8s linear; opacity: 0;}
#about .ctn .main .sub.sub-1 { left: 2%; top: 2%; transform: translate(80%,80%);}
#about .ctn .main .sub.sub-2 { right: 2%; top: 2%; transform: translate(-80%,80%);}
#about .ctn .main .sub.sub-3 { left: 2%; bottom: 2%; transform: translate(80%,-80%);}
#about .ctn .main .sub.sub-4 { right: 2%; bottom: 2%; transform: translate(-80%,-80%);}
#about .ctn .main .sub img { width: 100%;}
#about .ctn .open .main .sub { opacity: 1; transform: translate(0%,0%);}
#about .note { position: absolute; left: 0; bottom: 40px; width: 100%;}
#about .note div { width: 90%; max-width: 680px; margin: 0 auto;}
@media (max-width: 481px) {
	#about .inner-sct { padding: 20px 0px 40px;}
	#about .note { bottom: 20px;}
}



#aroma { position: relative;}
#aroma .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 60px 0px 120px;}
#aroma .ctn { position: relative; width: 90%; max-width: 920px; margin: 0 auto;}
#aroma .ctn .badge { position: absolute; left: 5%; top: -15%; width: 30%; max-width: 240px; z-index: 2;}
#aroma .ctn .badge img { width: 100%;}
#aroma .ctn picture { position: relative; display: block; width: 100%; z-index: 1;}
#aroma .ctn picture img { width: 100%;}
@media (max-width: 801px) {
	#aroma .inner-sct { padding: 40px 0 80px;}
	#aroma .ctn .badge { display: none;}
}
@media (max-width: 481px) {
	#aroma .inner-sct { padding: 20px 0px 40px;}
}


#products { position: relative; z-index: 3;}
#products .ttl { position: relative; width: 100%; padding-top: 32px;}
#products .ttl:before,
#products .ttl:after { content: ''; display: block; width: 100%; max-width: 1280px; position: absolute; left: 0%;}

#products .ttl:before { padding-top: 240px; top: -120px; z-index: 2;
 background: linear-gradient(rgba(255,255,255,0),#fff 25%,#fff 72%,rgba(255,255,255,0),rgba(255,255,255,0));
}
#products .ttl:after { padding-top: 380px; top: -120px; z-index: 1; background: url('../img/bg-ttl.png') no-repeat 50% 50%;}
#products .ttl div { position: relative; z-index: 3;}
#products .ttl h2 { font-size: clamp(24px,5.0vw,42px); font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#products .ttl p { font-size: clamp(16px,2.4vw,28px); font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#products .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 120px 0px;}
#products.deep .inner-sct { background: url('../img/deep/base.jpg') no-repeat 50% 50%;}
#products.melty .inner-sct { background: url('../img/melty/base.jpg') no-repeat 50% 50%;}
#products.clear .inner-sct { background: url('../img/clear/base.jpg') no-repeat 50% 50%;}
#products .bloc { padding: 30px 0;}
#products .ctn { width: 94%; max-width: 680px; margin: 0 auto; display: flex; justify-content: space-around; align-items: center;}
#products .ctn.re { flex-direction: row-reverse;}
#products .ctn .img { width: 50%;}
#products .ctn .txt { width: 50%;}
#products .ctn .img figure { text-align: center;}
#products .ctn .img figure img { width: 80%; max-width: 230px;}
#products .ctn .txt h3 { margin-bottom: 30px; font-size: clamp(16px,3.5vw,24px); line-height: 1.45;}
#products .ctn .txt p { font-size: clamp(14px,2.6vw,20px); font-weight: 700;}
#products .ctn .txt p.price { margin-bottom: 30px;}
#products .ctn .txt p.price span { display: block; font-size: clamp(12px,2.0vw,18px); text-indent: -0.5em;}
#products .ctn .txt .cart { width: 80%; max-width: 260px;}
#products .ctn .txt .cart a { position: relative; display: block; width: 100%; padding: 12px 0; border-radius: 50px; box-shadow: 2px 2px 5px #aaa;
 color: #fff; font-size: clamp(13px,2.0vw,22px); text-decoration: none; text-align: center; text-indent: 30px; text-shadow: 2px 2px 5px #999;
}
#products .ctn .txt .cart.deep a { background: url('../img/common/btn-deep.jpg') no-repeat 50% 50% / cover;}
#products .ctn .txt .cart.melty a { background: url('../img/common/btn-melty.jpg') no-repeat 50% 50% / cover;}
#products .ctn .txt .cart.clear a { background: url('../img/common/btn-clear.jpg') no-repeat 50% 50% / cover;}
#products .ctn .txt .cart a:after { content: ''; display: block; width: 24px; height: 24px;
 position: absolute; left: 20%; top: 50%; transform: translateY(-50%);
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill="%23fff"><path d="M41.3.5c-.9,0-1.7.6-1.9,1.5l-1.9,7.5H3.3c-.6,0-1.2.3-1.6.8-.4.5-.5,1.1-.3,1.7l5.6,19.5c.2.8,1,1.4,1.9,1.4h22.5l-.8,3.3H9.1v3.5h22.6c.9,0,1.7-.6,1.9-1.5L42.4,4h6.3V.5h-7.4ZM34,22.9l-1.7,6.6h-4.3v-6.6h6ZM36.5,12.9l-1.7,6.5h-6.9v-6.5h8.6ZM24.5,22.9v6.6h-7.4v-6.6h7.4ZM24.5,12.9v6.5h-7.4v-6.5h7.4ZM14.2,12.9v6.5h-7.1l-1.9-6.5h9ZM14.2,22.9v6.6h-4.2l-1.9-6.6h6.1Z"/><path d="M12.4,42.3c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5,3.5-1.6,3.5-3.5-1.6-3.5-3.5-3.5Z"/><path d="M29.2,42.5c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5,3.5-1.6,3.5-3.5-1.6-3.5-3.5-3.5Z"/></g></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;
}
#products .ctn .txt .cart span { position: relative; display: block; width: 100%; padding: 12px 0; border-radius: 50px; box-shadow: 2px 2px 5px #aaa;
 color: #fff; font-size: clamp(13px,2.0vw,22px); text-decoration: none; text-align: center; text-shadow: 2px 2px 5px #999;
 background: #ccc;
}
@media (max-width: 801px) {
	#products .ttl:before { padding-top: 32%; top: -80px;}
	#products .ttl:after { padding-top: 42%; top: -8vw; background: url('../img/bg-ttl@sp.png') no-repeat 50% 50% / 100% auto;}
	#products .bloc { padding: 20px 0;}
	#products .ctn .txt h3 { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#products .ttl:before { top: -40px;}
	#products .ttl { padding-top: 20px;}
	#products .inner-sct { padding: 60px 0px;}
	#products .bloc { padding: 16px 0;}
	#products .ctn .img { width: 45%;}
	#products .ctn .txt { width: 52%;}
	#products .ctn .txt h3 { margin-bottom: 12px;}
	#products .ctn .txt p.price { margin-bottom: 12px;}
	#products .ctn .txt .cart a { padding: 8px 0;}
	#products .ctn.re .txt h3 { text-align: right;}
	#products .ctn.re .txt p { text-align: right;}
	#products .ctn.re .txt .cart {  margin: 0 0 0 auto;}
}



#types .ttl { position: relative; width: 100%; padding-top: 40px; z-index: 4;}
#types .ttl:after { content: ''; display: block; width: 100%; padding-top: 380px; position: absolute; left: 0; top: -132px; z-index: 1;
 background: url('../img/bg-ttl.png') no-repeat 50% 50%;
}
#types .ttl h2 { position: relative; text-align: center; z-index: 2;}
#types .ttl h2 img { width: 86%; max-width: 650px;}
#types .read { margin-bottom: 50px;}
#types .read p { font-size: clamp(14px,3.5vw,24px); line-height: 1.8; text-align: center;}
#types .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 140px 0px 60px;}
#types.deep .inner-sct { background: url('../img/deep/base.jpg') no-repeat 50% 50%;}
#types.melty .inner-sct { background: url('../img/melty/base.jpg') no-repeat 50% 50%;}
#types.clear .inner-sct { background: url('../img/clear/base.jpg') no-repeat 50% 50%;}

#types .inner-sct:after { content: ''; display: block; width: 100%; height: 400px; background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
 position: absolute; left: 0; bottom: 0; z-index: 1;
}
#types .types-slider { z-index: 2;}
#types .note { position: relative; z-index: 2;}
#types .note ul { text-align: center;}
#types .note ul li { display: inline-block;}
@media (max-width: 801px) {
	#types .ttl:after { padding-top: 42%; top: -12vw; background: url('../img/bg-ttl@sp.png') no-repeat 50% 50% / 100% auto;}
	#types .inner-sct { padding: 120px 0 80px;}
	#types .read { margin-bottom: 30px;}
}
@media (max-width: 481px) {
	#types .ttl { position: relative; width: 100%; padding-top: 16px;}
	#types .inner-sct { padding: 90px 0 60px;}
	#types .read { margin-bottom: 20px;}
	#types .note { width: 90%; margin: 0 auto;}
	#types .note ul { text-align: left;}
	#types .note ul li { display: block;}
}



#back { background: #fff;}
#back .inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 0;}

#back .btn { width: 62%; max-width: 420px; margin: 0 auto;}
#back .btn a { position: relative; display: block; padding: 2px; background: linear-gradient(90deg,#f3c900,#ff7f37); border-radius: 6px;
 color: #fff; font-size: clamp(14px,2.0vw,18px); font-weight: 700; letter-spacing: 0.1rem; text-align: center; text-decoration: none;
}
#back .btn a span { display: block; padding: 18px; padding-left: 30px; border: solid 2px #fff; border-radius: 4px;}
#back .btn a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	#back .btn a span { padding: 10px; border-width: 1px;}
}