@charset "utf-8";

#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 100;}
#loading .inner { position: relative; width: 100%; height: 100%; background: #fff;}
#loading video { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 100%; min-height: 100%; z-index: 1;}
@media (max-width: 641px) {
	#loading video { width: 100% !important; min-height: auto;}
}


@keyframes wave1 {
	 0% { transform: translateY(0px);}
  50% { transform: translateY(10px);}
 100% { transform: translateY(0px);}
}
@keyframes wave2 {
	 0% { transform: translateY(0px);}
  50% { transform: translateY(10px);}
 100% { transform: translateY(0px);}
}

#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: 2;}
#kv .ctn .inner { position: relative; width: 94%; max-width: 1100px; margin: 0 auto; padding-top: 150px;}
#kv .ctn .logo { position: relative; width: 54%; max-width: 520px; margin-bottom: 30px;}
#kv .ctn .logo h1 { text-align: center; transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 0.5s; opacity: 0;}
#kv .ctn .logo h1 img { width: 32%; max-width: 240px;}
#kv .ctn .txt { width: 52%; max-width: 520px;}
#kv .ctn .txt p { text-align: center; transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 0.8s; opacity: 0;}
#kv .ctn .txt p img { width: 100%; max-width: 520px;}
#kv .news { position: absolute; left: 0; bottom: 80px; width: 100%; z-index: 2;}
#kv .news .inner { width: 94%; max-width: 1100px; margin: 0 auto;}
#kv .news .inner div { width: 54%; max-width: 520px; transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 1.6s; opacity: 0;}
#kv .news div a { position: relative; display: block; width: 80%; max-width: 430px; margin: 0 auto; background: #fff; box-shadow: 2px 2px 5px #666;}
#kv .news div a img { width: 100%;}
#kv .news div a:hover img { opacity: 0.8;}

#kv .note { position: absolute; left: 0; bottom: 0; z-index: 2;}
#kv .note div { width: 94%; max-width: 1080px; margin: 0 auto; padding: 20px;
 transition: 1.6s cubic-bezier(0.7, 0, 0.84, 0); transition-delay: 1.8s; opacity: 0;
}
#kv .note ul { width: 100%; max-width: 480px;}
#kv .note ul li { color: #5b341c;}
#kv .kv-bg { position: relative; z-index: 1; background: url('./img/kv.jpg') no-repeat 50% 50% / cover;}
#kv .kv-bg:after { content: ''; display: block; width: 100%; padding-top: 680px;
/* background: url('./img/kv.jpg') no-repeat 50% 50% / cover;
 opacity: 0; transition: 2s linear; transition-delay: 9s;
*/
}

#kv.show .ctn .logo h1 { opacity: 1;}
#kv.show .ctn .txt p { opacity: 1;}
#kv.show .news .inner div { opacity: 1;}
#kv.show .note div { opacity: 1;}
#kv.show .kv-bg:after { opacity: 1;}
@media (max-width: 1281px) {
	#kv .ctn .inner { padding-top: 10vw;}
	#kv .ctn .logo { margin-bottom: 20px;}
	#kv .kv-bg:after { padding-top: 54%;}
}
@media (max-width: 1001px) {
	#kv .ctn .logo { margin-bottom: 12px;}
	#kv .news { bottom: 60px;}
	#kv .note div { padding: 12px;}
	#kv .note ul { max-width: 100%;}
}
@media (max-width: 801px) {
	#kv .ctn .inner { padding-top: 12vw;}
	#kv .ctn .logo { width: 100%; max-width: 100%; margin: 0 auto 24px;}
	#kv .ctn .logo h1 img { width: 38%;}
	#kv .ctn .txt { width: 92%; margin: 0 auto;}
	#kv .news { bottom: 100px;}
	#kv .news .inner div { width: 100%;}
	#kv .news div a { width: 92%;}
	#kv .kv-bg { background: url('./img/kv@sp.jpg') no-repeat 50% 50% / cover;}
	#kv .kv-bg:after { padding-top: 192%; /* background: url('./img/kv@sp.jpg') no-repeat 50% 50% / cover; */}
}
@media (max-width: 481px) {
	#kv .ctn .logo { margin-bottom: 12px;}
	#kv .ctn .txt { bottom: 58vw;}
	#kv .news { bottom: 65px;}
}





#award { position: relative; z-index: 5;}
#award .award-tit { position: relative; padding: 1px 0; background: #fff; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px;
 border-top: solid 2px #6a3906; border-right: solid 2px #6a3906;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-72%) rotate(135deg); margin-left: 300px;
}
#award .award-tit.open:after { transform: translate(-50%,-35%) rotate(-45deg);}
#award .award-tit div { position: relative; padding: 12px 0 16px; background: linear-gradient(90deg,#f1ca4b 5%, #f5e8bb 15%, #efc230 30%, #efc230 70%, #f5e8bb 85%, #f1ca4b 95%);}
#award .award-tit h2 { color: #6a3906; font-size: 30px; letter-spacing: 0.2rem; line-height: 1; text-align: center;}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 38px; height: 30px;
 background: url('/img/icn-award.png') no-repeat 50% 50% / 100% auto; vertical-align: middle;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
@media (max-width: 801px) {
	#award .award-tit:after { left: auto; right: 30px; transform: translate(0%,-50%) rotate(135deg); margin-left: 0px;}
}
@media (max-width: 481px) {
	#award .award-tit:after { right: 20px; width: 10px; height: 10px;}
	#award .award-tit div { padding: 8px 0 12px; background: linear-gradient(120deg,#f1ca4b 5%, #f5e8bb 15%, #efc230 30%, #efc230 70%, #f5e8bb 85%, #f1ca4b 95%);}
	#award .award-tit h2 { font-size: 20px;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 32px; height: 24px;}
}
#award .ctn { display: none;}
#award .ctn .inner { background: #fff;}




.ttl { position: absolute; left: 0; top: 0; width: 100%;}
.ttl:before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; background: url('./img/ttl/bg.png') no-repeat 50% 100% / 1280px auto;}
.ttl div { position: relative; }
.ttl h2 { text-align: center;}
.ttl h2 img { width: 45%; max-width: 280px;}
@media (max-width: 801px) {
	.ttl:before { background: url('./img/ttl/bg@sp.png') no-repeat 50% 100% / 100% auto;}
	.ttl div { padding: 18px 0px;}
}
@media (max-width: 481px) {
	.ttl div { padding: 12px 0px;}
}


#concept { position: relative;}
#concept .ttl:before { padding-top: 320px;}
#concept .ttl div { padding-top: 32px;}
#concept .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 180px 0 60px;
	background: url('./img/bg/concept.jpg') no-repeat 50% 50% / cover;
}
#concept .ctn { position: relative; z-index: 1; width: 100%; max-width: 1000px; margin: 0 auto 40px;}
#concept .ctn .txt { width: 100%; max-width: 500px; padding-left: 20px; transition: 1.2s cubic-bezier(0.7, 0, 0.84, 0); opacity: 0;}
#concept .ctn .txt h3 { margin-bottom: 24px;}
#concept .ctn .txt h3:after { content: ''; display: block; width: 92%; height: 2px; background: #e2890e; margin: 20px auto 0;}
#concept .ctn .txt h3 img { width: 100%;}
#concept .ctn .txt div { width: 92%; margin: 0 auto;}
#concept .ctn .txt p { font-size: clamp(13px,2.8vw,23px); font-weight: 700; line-height: 2;}
#concept .ctn .txt p span { display: block;}
#concept .ctn .txt p sub { font-size: 12px;}
#concept .ctn .img { position: absolute; right: 0; top: 0; width: 50%;}
#concept .ctn .img:before,
#concept .ctn .img:after { content: ''; display: block; position: absolute; }
#concept .ctn .img:before{ top: 0; left: 0; width: 280px; height: 260px; background: url('./img/img-concept-2.png') no-repeat 50% 50% / 100% auto;
 animation: 3s linear wave2 infinite;
}
#concept .ctn .img:after { top: 50px; right: 5%; width: 100%; padding-top: 620px; background: url('./img/img-concept-1.png') no-repeat 65% 50% / 94% auto;
 animation: 5s linear wave1 infinite;
}
#concept .note div { width: 88%; max-width: 1000px; margin: 0 auto;}
#concept .note ul { width: 100%; max-width: 620px;}
#concept .ctn.show .txt { opacity: 1;}
@media (max-width: 801px) {
	#concept .ttl:before { padding-top: 38%;}
	#concept .ttl div { padding-top: 18px;}
	#concept .inner-sct { padding: 22vw 0 40px;}
	#concept .ctn { padding-right: 200px;}
	#concept .ctn .txt { padding-top: 60px;}
	#concept .ctn .img:before{ width: 220px; height: 200px;}
	#concept .note ul { width: 100%; max-width: 100%;}
}
@media (max-width: 641px) {
	#concept .ctn .img:before{ width: 180px; height: 160px;}
	#concept .ctn .img:after { padding-top: 140%; top: 80px; right: 0%; background-size: auto 100%;}
}
@media (max-width: 481px) {
	#concept .inner-sct { padding: 26vw 0 40px;}
	#concept .ttl div { padding-top: 10px;}
	#concept .ctn { margin-bottom: 20px; padding-right: 90px;}
	#concept .ctn .txt { padding-top: 12px; padding-left: 8px;}
	#concept .ctn .txt h3 { margin-bottom: 12px;}
	#concept .ctn .txt h3:after { height: 1px; margin: 12px auto 0;}
	#concept .ctn .txt h3 img { width: 88%;}
	#concept .ctn .txt p sub { font-size: 10px;}
	#concept .ctn .img { width: 45%;}
	#concept .ctn .img:before{ width: 120px; height: 100px; left: -20px;}
}




#point { position: relative;}
#point .ttl:before { padding-top: 340px;}
#point .ttl div { padding-top: 24px;}
#point .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding:  240px 0 90px;
	background: url('./img/bg/point.jpg') no-repeat 50% 50% / cover;
}
#point .ctn { position: relative; width: 94%; max-width: 1080px; margin: 0 auto -150px;}
#point .ctn ul { font-size: 0;}
#point .ctn ul li { position: relative; transition: 1.2s cubic-bezier(0.7, 0, 0.84, 0); transform: translateY(20px); opacity: 0;}
#point .ctn ul li:nth-child(1) { margin-bottom: -150px;}
#point .ctn ul li:nth-child(2) { margin-bottom: -200px;}
#point .ctn ul li:nth-child(3) { margin-bottom: -150px;}
#point .ctn ul li:nth-child(even) { text-align: right;}
#point .ctn ul li:last-child { margin-bottom: 0px;}
#point .ctn ul li img { width: 58%; max-width: 640px;}
#point .ctn ul li.show { transform: translateY(0px); opacity: 1;}

#point .note div { width: 92%; max-width: 1000px; margin: 0 auto;}
#point .note ul { width: 52%; max-width: 520px;}

@media (max-width: 1201px) {
}
@media (max-width: 801px) {
	#point .ttl:before { padding-top: 42%;}
	#point .ttl div { padding-top: 12px;}
	#point .ctn { width: 100%; margin-bottom: 20px;}
	#point .ctn ul li:nth-child(1) { margin-bottom: -12vw;}
	#point .ctn ul li:nth-child(2) { margin-bottom: -12vw;}
	#point .ctn ul li:nth-child(3) { margin-bottom: -12vw;}
	#point .note ul { width: 100%; max-width: 100%;}
}
@media (max-width: 641px) {
	#point .inner-sct { padding: 26vw 0 40px;	background: url('./img/bg/point@sp.jpg') no-repeat 50% 50% / cover;}
	#point .ctn ul li:nth-child(1) { margin-bottom: -5vw;}
	#point .ctn ul li:nth-child(2) { margin-bottom: -5vw;}
	#point .ctn ul li:nth-child(3) { margin-bottom: -5vw;}
	#point .ctn ul li img { width: 92%; max-width: 640px;}
}
@media (max-width: 481px) {
	#point .ttl div { padding-top: 8px;}
}




#howto { position: relative;}
#howto .tit { padding: 1px 0; background: #fff;}
#howto .tit div { padding: 20px 0; background: linear-gradient(90deg,#f1ca4b 5%, #f5e8bb 15%, #efc230 30%, #efc230 70%, #f5e8bb 85%, #f1ca4b 95%);}
#howto .tit h2 { text-align: center;}
#howto .tit h2 img { width: 45%; max-width: 280px;}
#howto .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;
	background: url('./img/bg/howto.jpg') no-repeat 50% 50% / cover;
}
#howto .ctn { position: relative; z-index: 1; width: 94%; max-width: 1040px; margin: 0 auto; padding: 100px 0 80px;}
#howto .ctn p { margin-bottom: 50px; font-size: clamp(13px,3.0vw, 24px); font-weight: 700; text-align: center;}
#howto .ctn figure { text-align: center;}
#howto .ctn figure img { width: 92%; max-width: 860px;}
@media (max-width: 801px) {
	#howto .tit div { padding: 12px 0;}
	#howto .ctn { width: 100%;}
	#howto .ctn p { margin-bottom: 30px;}
}
@media (max-width: 641px) {
	#howto .ctn { padding: 60px 0px;}
}
@media (max-width: 481px) {
	#howto .tit div { padding: 8px 0; background: linear-gradient(120deg,#f1ca4b 5%, #f5e8bb 15%, #efc230 30%, #efc230 70%, #f5e8bb 85%, #f1ca4b 95%);}
	#howto .ctn { padding: 40px 0px;}
	#howto .ctn p { margin-bottom: 12px;}
}



#product { position: relative;}
#product .ttl:before { padding-top: 320px;}
#product .ttl div { padding-top: 32px;}
#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 200px 0px 60px;
	background: linear-gradient(-5deg,#fefdbf,#f0d881);
}
#product .ctn { position: relative; width: 92%; max-width: 720px; margin: 0 auto;}
#product .ctn picture { display: block;}
#product .ctn picture img { width: 100%;}

#product .ctn .cart { position: absolute; left: 0; bottom: 30px; width: 100%; padding-left: 25%;}
#product .ctn .cart a { position: relative; display: block; width: 80%; max-width: 340px; margin: 0 auto;
 border: solid 1px #fff; border-radius: 50px;
 background: linear-gradient(120deg, #f1ca4b 5%, #f5e8bb 15%, #efc230 25%, #efc230 75%, #f5e8bb 85%, #f1ca4b 95%);
 box-shadow: 2px 2px 2px #b09e90; overflow: hidden;
 color: #fff; font-size: clamp(14px,2.0vw,20px); line-height: 1.2; font-weight: 700; text-align: center; text-decoration: none;
 pointer-events: none;
}
#product .cart a:after { content: ''; display: none; width: 30px; height: 30px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><g fill="%23fff"><path d="M5.7,26.5a1.06,1.06,0,0,1,0-2.11H20l.66-2.46H5.54a1.07,1.07,0,0,1-1-.77L.77,7.78A1.05,1.05,0,0,1,1,6.86a1.07,1.07,0,0,1,.84-.42h23L26.22,1a1.06,1.06,0,0,1,1-.79h5a1.07,1.07,0,0,1,1.06,1.06,1.06,1.06,0,0,1-1.06,1.05H28.05L21.81,25.72a1.05,1.05,0,0,1-1,.78Zm12.48-6.68h3l1.21-4.58H18.18Zm-7.1,0h5V15.24h-5Zm-4.74,0H9V15.24H5.06Zm11.84-6.69H23l1.21-4.58h-6Zm-7.1,0h5V8.55h-5Zm-6.62,0H9V8.55H3.18Z"></path><path d="M7.94,33.84a3,3,0,1,1,3-3A3,3,0,0,1,7.94,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.91.91,0,0,0,7.94,29.92Z"></path><path d="M19,33.84a3,3,0,1,1,3-3A3,3,0,0,1,19,33.84Zm0-3.92a.91.91,0,1,0,.9.9A.9.9,0,0,0,19,29.92Z"></path></g></svg>');
 position: absolute; left: 24%; top: 50%; transform: translateY(-50%); z-index: 2;
}
#product .cart a span { display: block; padding: 12px 0; /* text-indent: 20px; */}
#product .cart a:hover { opacity: 0.8;}

@media (max-width: 801px) {
	#product .ttl:before { padding-top: 38%;}
	#product .ttl div { padding-top: 20px;}
	#product .inner-sct { padding: 28vw 0px 40px;}
	#product .ctn picture { margin-bottom: 20px;}
	#product .ctn .cart { position: relative; left: auto; bottom: auto; width: 100%; padding-left: 0%;}
}
@media (max-width: 481px) {
	#product .ttl div { padding-top: 12px;}
	#product .ctn picture { margin-bottom: 12px;}
}


#shop { position: relative;}
#shop .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 0 70px; background: url('./img/bg/shop.jpg') no-repeat 50% 50% / cover;}
#shop h3 { margin-bottom: 20px; font-size: clamp(20px,2.8vw,24px); font-weight: 700; text-align: center; text-shadow: 0 0 6px #fff,0 0 6px #fff,0 0 6px #fff;}
#shop p { margin-bottom: 40px; font-size: 10px; text-align: center;}
#shop .btn { width: 65%; max-width: 420px; margin: 0 auto;}
#shop .btn a { position: relative; display: block; padding: 2px;
 background: #fff; border: solid 3px #f6ac0f; border-radius: 50px; box-shadow: 2px 2px 6px #9fa0a0;
 color: #fff; font-size: clamp(15px,2.4vw,20px); font-weight: 700; text-align: center; text-decoration: none;
}
#shop .btn a:after { content: ''; display: none; width: 12px; height: 12px; border-top: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#shop .btn a span { position: relative; display: block; padding: 18px; background: #f6ac0f; border-radius: 50px;}
@media (max-width: 801px) {
	#shop .inner-sct { padding: 40px 0;}
	#shop h3 { margin-bottom: 10px;}
	#shop h3 span { display: block;}
	#shop p { margin-bottom: 10px;}
	#shop .btn a { border-width: 2px; padding: 1px;}
	#shop .btn a:after { width: 9px; height: 9px; border-width: 2px;}
	#shop .btn a span { padding: 6px;}
}


#lineup { position: relative;}
#lineup .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 220px 0px 60px; background: #fbf9de;}
#lineup .ttl:before { padding-top: 340px;}
#lineup .ttl div { padding-top: 24px;}
#lineup .ctn { margin: 0 auto;}
@media (max-width: 801px) {
	#lineup .ttl:before { padding-top: 38%;}
	#lineup .ttl div { padding-top: 20px;}
	#lineup .inner-sct { padding: 28vw 0px 40px;}
}
@media (max-width: 801px) {
	#lineup .ttl div { padding-top: 12px;}
}