@charset "utf-8";

body { color: #692407;}

.sct { position: relative;}
.pos { position: absolute;}

.ttl { position: relative; width: 100%;}
.ttl:after { content: ''; display: block; width: 100%; height: 364px;
 background: url('../img/top/ttl/bg-1.png') no-repeat 50% 50% / auto 100%;
 position: relative; left: 0; top: 0; z-index: 1;
}
.ttl h2 { position: absolute; left: 0; width: 100%; text-align: center; z-index: 2;}
.ttl h2 img { width: 80%; max-width: 420px;}
@media (max-width: 801px) {
	.ttl:after { height: 0px; padding-top: 64%; background: url('../img/top/ttl/bg-1@sp.png') no-repeat 50% 50% / auto 100%;}
}


@keyframes moving {
	 0% { transform: translateY(0px);}
	50% { transform: translateY(8px);}
 100% { transform: translateY(0px);}
}


#kv .inner-kv { position: relative;}
#kv .logo { position: absolute; width: 100%; left: 0; top: 0; z-index: 3;}
#kv .logo .inner { position: relative;width: 90%; max-width: 900px; margin: 0 auto;}
#kv .logo .inner div { width: 52%; max-width: 440px; margin: 0 0 0 auto; padding-top: 120px; text-align: center;}
#kv .logo .inner div img { width: 80%; max-width: 180px; }
#kv .ctn { position: absolute; width: 100%; left: 0; top: 0; z-index: 2;}
#kv .ctn .txt { position: relative; width: 90%; max-width: 900px; margin: 0 auto; transition: 0.8s linear 0.6s; opacity: 0;}
#kv .ctn .txt .inner { position: relative; width: 52%; max-width: 440px; margin: 0 0 0 auto; padding-top: 300px;}
#kv .ctn .txt .inner:before { content: ''; display: block; width: 140px; height: 200px;
 position: absolute; right: -50px; top: 80px;
 background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 0 / 100% auto;
}
#kv .ctn .txt h1 { text-align: center;}
#kv .ctn .txt h1 img { width: 92%; max-width: 270px;}
#kv .ctn .txt h1 img.sp { display: none;}
#kv .note { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px; z-index: 2;}
#kv .note ul { max-width: 540px; margin: 0 0 0 auto;}
#kv .note ul li { color: #636363; font-size: 10px; text-align: left;}

#kv .bg { position: relative; width: 100%;}
#kv .bg img { width: 100%;}
#kv .bg img.sp { display: none;}
#kv.show .ctn .txt { opacity: 1;}
@media (max-width: 1281px) {
	#kv .logo .inner div { padding-top: 8vw;}
	#kv .ctn .txt { padding-top: 3.5vw;}
	#kv .ctn .txt .inner { padding-top: 18vw;}
	#kv .ctn .txt .inner:before { width: 120px; height: 180px;}
}
@media (max-width: 1001px) {
	#kv .logo .inner div { padding-top: 10vw;}
}
@media (max-width: 801px) {
	#kv .logo .inner div { width: 68%; margin: 0 auto; padding-top: 8vw;}
	#kv .logo .inner div img { width: 60%; max-width: 280px; }

	#kv .ctn .txt .inner { padding-top: 20vw;}

	#kv .ctn {}
	#kv .ctn .txt {}
	#kv .ctn .txt .inner { width: 100%; max-width: 500px; margin: 0 auto; padding-top: 30vw;}
	#kv .ctn .txt .inner:before { right: auto; left: -100px;}
	#kv .ctn .txt h1 img.pc { display: none;}
	#kv .ctn .txt h1 img.sp { display: block; width: 92%; max-width: 92%; margin: 0 auto;}
	#kv .note ul { max-width: 90%; margin: 0 auto;}

	#kv .bg img.pc { display: none;}
	#kv .bg img.sp { display: block;}
}
@media (max-width: 481px) {
	#kv .ctn .txt .inner { padding-top: 28vw;}
	#kv .ctn .txt .inner:before { width: 72px; height: 100px; left: 0px; top: 4%;}

	#kv .note { padding: 12px;}
	#kv .note ul { width: 100%; max-width: 100%;}
	#kv .note ul li { line-height: 1.25;}
	#kv .note ul li br { display: none; }
}


#award .award-tit { position: relative; background: #f89200; padding: 12px 0; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 12px; height: 12px;
 border-top: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(135deg); margin-left: 300px;
}
#award .award-tit.open:after { transform: translate(-50%,-35%) rotate(-45deg);}
#award .award-tit h2 { color: #fff; font-size: 30px; letter-spacing: 0.2rem; 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-awrad.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 { padding: 6px 0;}
	#award .award-tit:after { right: 20px; width: 10px; height: 10px;}
	#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;}


#concept { position: relative; background: #fef4c6;}
#concept .ttl h2 { top: 16%; transition: 0.4s linear; opacity: 0;}
#concept .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding-bottom: 60px; z-index: 2;}
#concept .ctn { position: relative; width: 100%; max-width: 820px; margin: 0 auto; transition: 0.4s linear; opacity: 1;}
#concept .ctn figure { position: relative; text-align: center; z-index: 2;}
#concept .ctn figure img { width: 88%; max-width: 600px;}

#concept .ctn .fuwa { position: absolute; animation: 2s moving linear infinite;}
#concept .ctn .fuwa.fuwa-1 { background: url('../img/top/fuwa-1.png') no-repeat 50% 50% / 100%;}
#concept .ctn .fuwa.fuwa-2 { background: url('../img/top/fuwa-2.png') no-repeat 50% 50% / 100%;}
#concept .ctn .fuwa.l1 { width: 110px; height: 110px; left: -40px; top: -90px;}
#concept .ctn .fuwa.l2 { width: 80px; height: 80px; left: 4%; top: 20%; animation-delay: 0.3s;}
#concept .ctn .fuwa.l3 { width: 140px; height: 140px; left: -100px; top: 40%; animation-delay: 0.9s;}
#concept .ctn .fuwa.r1 { width: 120px; height: 120px; right: -100px; top: 30%; animation-delay: 0.6s;}
#concept .ctn .fuwa.r2 { width: 100px; height: 100px; right: 2%; bottom: 20%; animation-delay: 0.3s;}
#concept .ctn .fuwa.r3 { width: 60px; height: 60px; right: -40px; bottom: 10%; animation-delay: 0.6s;}
#concept.show  .ttl h2 { opacity: 1;}
#concept.show .ctn { opacity: 1;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#concept .ctn .fuwa.l3,
	#concept .ctn .fuwa.r3 { display: none;}
	#concept .ctn .fuwa.l1 { left: 30%; top: -120px;}
	#concept .ctn .fuwa.l2 { width: 120px; height: 150px; left: 0%; top: 55%; background-position: 100% 0; background-size: auto 100%;}
	#concept .ctn .fuwa.r1 { width: 100px; height: 100px; right: 6%; top: 25%;}
	#concept .ctn .fuwa.r2 { width: 80px; height: 150px; right: 0%; top: 70%; background-position: 0% 0; background-size: auto 100%;}

}
@media (max-width: 641px) {
	#concept .ttl { margin-bottom: 0px;}
	#concept .ctn .fuwa.r1 { width: 80px; height: 80px;}
	#concept .ctn .fuwa.r2 { width: 60px; height: 120px;}
}
@media (max-width: 481px) {
	#concept .ctn .fuwa.l1 { width: 60px; height: 60px; top: -60px;}
	#concept .ctn .fuwa.l2 { width: 100px; height: 120px; top: 40%;}
	#concept .ctn .fuwa.r1 { width: 50px; height: 50px; right: 2%; top: 10%;}
	#concept .ctn .fuwa.r2 { width: 40px; height: 100px;}
}



#point { position: relative; background: linear-gradient(#fff,#fef4c6 40%);}
#point .ttl { transition: 0.4s linear; opacity: 0;}
#point .ttl .fuwa { position: absolute; width: 100%; z-index: 2;
 width: 120px; height: 120px; background: url('../img/top/fuwa-2.png') no-repeat 50% 50% / 100%;
 left: 55%; top: 280px; animation-delay: 0.3s;
}
#point .ttl .fuwa:before,
#point .ttl .fuwa:after { content: ''; position: absolute; animation: 2s moving linear infinite;}
#point .ttl .fuwa:before{ display: none;
 width: 100px; height: 100px; background: url('../img/top/fuwa-1.png') no-repeat 50% 50% / 100%;
 left: 25%; top: 180px;
}

#point .ttl h2 { top: 16%; }
#point .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding-bottom: 100px;}
#point .bloc { position: relative; padding: 50px 0; transition: 0.4s linear; opacity: 0;}
#point .bloc#point-3 { margin-bottom: 90px;}
#point .bloc .ctn { position: relative; width: 100%; max-width: 940px; margin: 0 auto;}
#point .bloc .tit { position: absolute; top: 0; left: 0; width: 48%; padding-left: 60px; }
#point .bloc .pht { width: 58%; margin: 0 0 0 auto; padding-top: 60px;}
#point .bloc .tit h3 img { width: 100%; max-width: 340px;}
#point .bloc .tit h3 img.sp { display: none;}
#point .bloc .pht figure { position: relative; text-align: center;}
#point .bloc .pht figure img { width: 100%;}

#point .bloc#point-1 .pht figure img { max-width: 540px;}
#point .bloc#point-2 .pht figure img { max-width: 430px;}
#point .bloc#point-3 .pht figure img { max-width: 560px;}


/*
#point .bloc .comment div p { color: #1685a9; font-size: 15px; font-weight: 700; line-height: 1.8;}
#point .bloc .comment div p sub { font-size: 12px; vertical-align: baseline;}
#point .bloc .comment div p span.block{ font-size: 18px;}
#point .bloc .comment div p span.ruby { position: relative; padding-bottom: 12px;}
#point .bloc .comment div p span.ruby em { display: block; font-size: 10px; line-height: 1.4; text-align: right;
 position: absolute; right: 0; bottom: 0;
}

#point .bloc .ctn .comment {}
#point .bloc .ctn .comment .comment-1 { width: 80%; max-width: 340px; margin: 0 0 0 auto; padding: 50px 40px 40px 50px;
 background: url('../img/comment-1.png') no-repeat 50% 50% / 100% 100%;
}
#point .bloc .ctn .comment .comment-2 { width: 72%; max-width: 320px; margin: 0 0 0 auto; padding: 60px 0px 50px 28px;
 background: url('./img/comment-2.png') no-repeat 50% 50% / 100% 100%;
}
#point .bloc .ctn .comment .comment-3 { width: 88%; max-width: 390px; margin: 0 auto; padding: 50px 50px 40px;
 background: url('./img/comment-3.png') no-repeat 50% 50% / 100% 100%;
}
*/

#point .note ul { width: 90%; max-width: 800px; margin: 0 auto; }
#point .note ul li { color: #8b8b8b;}

#point .free { position: relative; padding: 100px 0;}
#point .free h4 { margin-bottom: 30px; text-align: center;}
#point .free h4 img { width: 80%; max-width: 370px;}
#point .free p.min { margin-bottom: 30px; font-size: 22px; font-weight: 700; text-align: center;}
#point .free figure { margin-bottom: 20px; position: relative; text-align: center;}
#point .free figure img { width: 90%; max-width: 390px; border-radius: 15px;}
#point .free .comment .comment-4 { width: 86%; max-width: 390px; margin: 0 auto; padding: 40px 25px 30px;
 background: url('../img/top/comment-4.png') no-repeat 50% 50% / 100% 100%;
}
#point .free .comment .comment-4 p { color: #692407; font-size: 15px; font-weight: 700; line-height: 1.8; text-align: center;}


#point .bloc .fuwa { position: absolute; animation: 2s moving linear infinite;}
#point .bloc .fuwa.fuwa-1 { background: url('../img/top/fuwa-1.png') no-repeat 50% 50% / 100%;}
#point .bloc .fuwa.fuwa-2 { background: url('../img/top/fuwa-2.png') no-repeat 50% 50% / 100%;}
#point .bloc .fuwa.l11 { width: 60px; height: 60px; left: 34%; top: 30px;}
#point .bloc .fuwa.l12 { width: 140px; height: 140px; left: 22%; top: 65%; animation-delay: 0.3s;}
#point .bloc .fuwa.l13 { width: 50px; height: 50px; left: 32%; bottom: 10%;}
#point .bloc .fuwa.r11 { width: 80px; height: 80px; right: 15%; bottom: 6%; animation-delay: 0.3s;}
#point .bloc .fuwa.r12 { display: none;}

#point .bloc .fuwa.l21 { width: 120px; height: 120px; left: 18%; top: 60%;}
#point .bloc .fuwa.l22 { width: 60px; height: 60px; left: 25%; top: 78%; animation-delay: 0.3s;}
#point .bloc .fuwa.r21 { width: 120px; height: 120px; right: 40%; top: -30px; animation-delay: 0.6s;}
#point .bloc .fuwa.r22 { width: 80px; height: 80px; right: 10%; bottom: 4%;}

#point .bloc .fuwa.l31 { width: 120px; height: 120px; left: 16%; top: 60%;}
#point .bloc .fuwa.l32 { width: 50px; height: 50px; left: 28%; bottom: 8%; animation-delay: 0.3s;}
#point .bloc .fuwa.r31 { width: 100px; height: 100px; right: 34%; top: 0px; animation-delay: 0.6s;}
#point .bloc .fuwa.r32 { width: 120px; height: 120px; right: 6%; bottom: -20px;}

#point .free .fuwa { position: absolute; animation: 2s moving linear infinite;}
#point .free .fuwa.fuwa-1 { background: url('../img/top/fuwa-1.png') no-repeat 50% 50% / 100%;}
#point .free .fuwa.fuwa-2 { background: url('../img/top/fuwa-2.png') no-repeat 50% 50% / 100%;}
#point .free .fuwa.l1 { width: 120px; height: 120px; left: 14%; top: 35%;}
#point .free .fuwa.l2 { width: 60px; height: 120px; left: 24%; top: 45%; animation-delay: 0.3s;}
#point .free .fuwa.l3 { width: 80px; height: 80px; left: 18%; bottom: 12%;}
#point .free .fuwa.r1 { width: 120px; height: 120px; right: 15%; top: 30%;}
#point .free .fuwa.r2 { width: 60px; height: 120px; right: 12%; top: 45%; animation-delay: 0.3s;}
#point .free .fuwa.r3 { width: 120px; height: 120px; right: 18%; bottom: 12%;}

#point.show .ttl { opacity: 1;}
#point .bloc.show { opacity: 1;}
@media (max-width: 1001px) {
	#point .bloc .tit { padding-left: 30px;}
	#point .bloc .fuwa.r11 { right: 6%;}
	#point .bloc .fuwa.l21 { width: 100px; height: 100px; left: 2%; top: 60%;}
	#point .bloc .fuwa.l22 { left: 32%;}
	#point .bloc .fuwa.r22 { right: 45%; }
	#point .bloc .fuwa.l31 { width: 100px; height: 100px; left: 2%; top: 50%;}
	#point .free .fuwa.l1 { right: 80%;}
}
@media (max-width: 801px) {
	#point .inner-sct { padding-bottom: 50px;}
	#point .ttl { margin-bottom: -80px;}
	#point .ttl .fuwa { width: 100px; height: 100px;
	 background: url('../img/top/fuwa-1.png') no-repeat 50% 50% / 100%;
	 left: 62%; top: 45vw;
	}
	
	#point .bloc { padding: 30px 0;}
	#point .bloc .ctn { display: block;}
	#point .bloc .tit { position: relative; left: auto; top: auto; width: 100%; margin: 0 auto; padding: 0;}
	#point .bloc .pht { width: 100%;}

	#point .bloc#point-1 .pht { display: none;}
	#point .bloc .tit h3 img.pc { display: none;}
	#point .bloc .tit h3 img.sp { display: block; max-width: 100%;}

	#point .bloc#point-2 .tit { padding: 0 9vw;}
	#point .bloc#point-2 .tit h3 img { width: 88%; max-width: 88%;}
	#point .bloc .tit h3 img { width: 100%; max-width: 340px;}

	#point .bloc#point-2 .pht figure img { max-width: 85%;}
	#point .bloc#point-3 .pht figure { display: none;}

	#point .bloc .fuwa.l11 { display: none;}
	#point .bloc .fuwa.l12 { width: 120px; height: 120px; left: 6%; top: 72%;}
	#point .bloc .fuwa.l13 { display: none;}
	#point .bloc .fuwa.r11 { width: 180px; height: 180px; right: 30%; bottom: auto; top: 5%;}
	#point .bloc .fuwa.r12 { display: block; width: 60px; height: 120px; right: 0%; bottom: 25%;
	 background-position: 0% 50%; background-size: auto 100%;
	}

	#point .bloc .fuwa.l21 { width: 120px; height: 120px; left: auto; right: 4%; top: 0%;}
	#point .bloc .fuwa.l22 { width: 40px; height: 80px; left: auto; right: 0; top: 12%; background-position: 0% 50%;
	 background-size: auto 100%;}
	#point .bloc .fuwa.r21 { display: none;}
	#point .bloc .fuwa.r22 { width: 100px; height: 150px; right: 0%; bottom: -40px;
	 background-position: 0% 50%; background-size: auto 100%;
	}
	
	#point .bloc .fuwa.l31 { width: 120px; height: 120px; left: 60%; top: auto; bottom: 2%;}
	#point .bloc .fuwa.l32 { display: none;}
	#point .bloc .fuwa.r31 { display: none;}
	#point .bloc .fuwa.r32 { width: 120px; height: 180px; right: auto; left: 0; bottom: -50px;
	 background-position: 100% 50%; background-size: auto 100%;
	}

	#point .free .fuwa.l1 { display: none;}
	#point .free .fuwa.l2 { width: 120px; height: 150px; left: 0%; top: 65%;}
	#point .free .fuwa.l3 { width: 80px; height: 80px; left: 18%; bottom: 3%;}
	#point .free .fuwa.r1 { width: 120px; height: 120px; right: 5%; top: 0px;}
	#point .free .fuwa.r2 { display: none;}
	#point .free .fuwa.r3 { display: none;}
}
@media (max-width: 641px) {
	#point .ttl { margin-bottom: -12vw;}
	#point .bloc#point-3 { margin-bottom: 20px;}
	#point .bloc .pht { padding-top: 40px;}

	#point .bloc .fuwa.l12 { width: 100px; height: 100px; left: 4%;}
	#point .bloc .fuwa.r11 { width: 150px; height: 150px;}
	#point .bloc .fuwa.r22 { width: 80px; height: 120px;}

	#point .free { padding: 60px 0;}
	#point .free .fuwa.r1 { width: 100px; height: 100px; right: 3%;}
}
@media (max-width: 481px) {
	#point .ttl .fuwa { width: 80px; height: 80px;}
	#point .bloc .tit {}
	#point .bloc .pht { padding-top: 10px;}

	#point .bloc .ctn .comment .comment-1 { margin: 0 30px 0 auto; padding: 40px 30px 30px 40px;}
	#point .bloc .ctn .comment .comment-2 { margin: 0 12px 0 auto; padding: 32px 0px 30px 20px;}
	#point .bloc .ctn .comment .comment-3 { padding: 40px 32px 30px;}

	#point .bloc .comment div p { font-size: 14px; line-height: 1.65;}
	#point .bloc .comment div p sub { font-size: 10px;}
	#point .bloc .comment div p span.block{ font-size: 16px;}

	#point .free p.min { margin-bottom: 30px; font-size: 18px;}


	#point .bloc .fuwa.r11 { width: 100px; height: 100px;}
	#point .bloc .fuwa.l12 { width: 60px; height: 60px; top: 68%;}
	#point .bloc .fuwa.r12 { width: 40px; height: 80px;}

	#point .bloc .fuwa.l21 { width: 100px; height: 100px;}
	#point .bloc .fuwa.l22 { width: 30px; height: 60px;}
	#point .bloc .fuwa.r22 { width: 60px; height: 100px;}

	#point .bloc .fuwa.l31 { width: 60px; height: 60px;}
	#point .bloc .fuwa.r32 { width: 80px; height: 100px; bottom: -20px;}


	#point .free h4 { margin-bottom: 24px;}
	#point .free .comment .comment-4 { padding: 30px 25px 20px;}
	#point .free .comment .comment-4 p { font-size: 14px;}

	#point .free .fuwa.l2 { width: 60px; height: 60px; left: 0%; top: 78%;}
	#point .free .fuwa.l3 { width: 50px; height: 50px; left: 18%; bottom: 3%;}
	#point .free .fuwa.r1 { width: 80px; height: 80px; right: 0%;}

}


@keyframes shakes {
    0% { transform: translate(0px,0px) rotate(0deg);}
 12.5% { transform: translate(0px,1px) rotate(3deg);}
 25.0% { transform: translate(1px,0px) rotate(0deg);}
 37.5% { transform: translate(1px,-1px) rotate(-3deg);}
 50.0% { transform: translate(0px,0px) rotate(0deg);}
 62.5% { transform: translate(-1px,0px) rotate(2deg);}
 75.0% { transform: translate(0px,-1px) rotate(0deg);}
 87.5% { transform: translate(-1px,0px) rotate(-2deg);}
  100% { transform: translate(0px,0px) rotate(0deg);}
}


#product { position: relative;}
#product .ttl { z-index: 4;}

#product .ttl h2 { top: 18%;}
#product .ttl h2 img { max-width: 480px;}
#product .ttl h2 img.sp { display: none;}
#product .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto;}

#product .check { position: relative;}
#product .check.mb0{ margin-bottom: 0px;}
#product .check .pos { position: absolute; top: 200px;}
#product .check .pos#check-deep { top: -40px;}
#product .check#deep { z-index: 3;}
#product .check#melty { z-index: 2;}
#product .check#savon { z-index: 1; padding-bottom: 50px; background: linear-gradient(#fff,#d0ebf3 60%, #d0ebf3 80%, #f5f4f1 92%);}

#product .check .inner-check { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#product .check .inner-check:before { content: ''; display: block; width: 100%; height: 346px; position: absolute; left: 0; top: 0;}
#product .check .inner-check.bg-1 { padding: 0px 0 20px; background: linear-gradient(#fff,#fef4c6 60%);}
#product .check .inner-check.bg-1:before { content: none;}
#product .check .inner-check.bg-2 { padding: 330px 0 20px; background: linear-gradient(#fff,#fcdfe8 60%);}
#product .check .inner-check.bg-2:before { background: url('../img/top/ttl/bg-2.png') no-repeat 50% 0%;}
#product .check .inner-check.bg-3 { padding: 330px 0 20px;}
#product .check .inner-check.bg-3:before { background: url('../img/top/ttl/bg-3.png') no-repeat 50% 0%;}

#product .check h3.type { position: relative; z-index: 2; margin-bottom: 50px; text-align: center; transition: 0.4s linear; opacity: 0;}
#product .check h3.type img { width: 50%; max-width: 300px;}
#product .check .ctn-flex { display: flex; align-items: center; width: 92%; max-width: 1024px; margin: 0 auto;}
#product .check .pht { width: 50%; transition: 0.4s linear; opacity: 1;}
#product .check .txt { width: 50%; transition: 0.4s linear; opacity: 1;}
#product .check .pht .pht-ctn { position: relative; width: 100%;}
#product .check .pht .pht-ctn .item { position: relative; width: 240px; margin: 0 auto;}
#product .check .pht .pht-ctn .item img { width: 100%;}
#product .check .pht .pht-ctn .icn { position: absolute; animation: 2s moving linear infinite;}
#product .check .pht .pht-ctn .icn.icn-1 { width: 140px; top: 15%; right: 75%; animation-delay: 0.0s}
#product .check .pht .pht-ctn .icn.icn-2 { width: 120px; top: 45%; left: 68%; animation-delay: 0.8s}
#product .check .pht .pht-ctn .icn.icn-3 { width: 140px; bottom: 50px; right: 70%; animation-delay: 0.6s}
#product .check .pht .pht-ctn .icn img { width: 100%;}
#product .check .pht h3.sp-tit { display: none; text-align: center;}
#product .check .pht p { font-weight: 700; text-align: center;}
#product .check .pht p.name { margin-bottom: 10px; font-size: 20px;}
#product .check .pht p.price { margin-bottom: 18px; font-size: 18px;}
#product .check .pht form { position: relative; width: 100%; max-width: 380px; margin: 0 auto;}
#product .check .pht form:after { content: ''; display: block; width: 8px; height: 8px; border-top: solid 2px #6a3906; border-right: solid 2px #6a3906;
 position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(45deg); z-index: 2;
}

#product .check .pht form input[type="submit"]{ position: relative; width: 100%; padding: 16px 0; border-radius: 50px; border: none; z-index: 1;
 color: #6a3906; font-size: 14px; font-weight: 700; text-indent: 20px; text-align: center;
}
#product .check .pht form svg { width: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-80px, -50%); fill: #6a3906; z-index: 2;}
#product .check .pht form input[type="submit"].btn-deep { background: #ffdb67;}
#product .check .pht form input[type="submit"].btn-melty { background: #fbbbc6;}
#product .check .pht form input[type="submit"].btn-savon { background: #a3d2e5;}

#product .check .txt h3.pc-tit { margin-bottom: 30px; font-size: 26px; letter-spacing: 0.1rem; text-align: center;}
#product .check#deep .txt h3.pc-tit { color: #f2a001;}
#product .check#melty .txt h3.pc-tit { color: #e04776;}
#product .check#savon .txt h3.pc-tit { color: #2594ac;}
#product .check .txt h3.pc-tit span.block { display: block;}
#product .check .txt h3.pc-tit span.ruby { position: relative; padding-bottom: 18px;}
#product .check .txt h3.pc-tit span.ruby em { display: block; font-size: 14px; line-height: 1.4; text-align: right;
 position: absolute; right: 0; bottom: 0;
}

#product .check .txt h3.pc-tit sup { font-size: 16px; vertical-align: baseline;}
#product .check .txt figure { position: relative; width: 95%; max-width: 420px; margin: 0 auto;}
#product .check .txt figure img.base { position: relative; z-index: 1; width: 100%;}
#product .check .txt figure img.icn1,
#product .check .txt figure img.icn2,
#product .check .txt figure img.icn3 { position: absolute; z-index: 2;}
#product .check .txt figure img.icn1 { width: 125px; right: 12%; top: 27%;
 animation: shakes 2.0s linear infinite; animation-delay: 0.3s;
}
#product .check .txt figure img.icn2 { width: 100px; right: 2%; top: 52.5%;
 animation: shakes 2.0s linear infinite; animation-delay: 0.6s;
}
#product .check .txt figure img.icn3 { width: 100px; right: 17%; top: 68.5%;
 animation: shakes 2.0s linear infinite; animation-delay: 0.9s;
}
#product .btn { padding: 80px 0;}
#product .btn a { position: relative; display: block; width: 65%; max-width: 320px; margin: 0 auto; padding: 5px; background: #fff;
 color: #2594ac; font-size: 20px; font-weight: 700; line-height: 1; text-align: center; text-decoration: none;
}
#product .btn a:after { content: ''; display: block; width: 8px; height: 8px; border-top: solid 2px #2594ac; border-right: solid 2px #2594ac;
 position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#product .btn a span { display: block; width: 100%; padding: 20px 0; border: solid 1px #2594ac; letter-spacing: 0.1rem;}
#product .note {}
#product .note ul { width: 90%; max-width: 800px; margin: 0 auto;}
#product .note ul li { color: #8b8b8b;}

#product.show .ttl { opacity: 1;}
#product.show .check h3.type { opacity: 1;}
#product .bloc.show { opacity: 1;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#product .ttl { margin-bottom: -8vw;}

	#product .check .inner-check:before { height: 0px; padding-top: 63%;}
	#product .check .inner-check.bg-2 { padding: 38vw 0 20px;}
	#product .check .inner-check.bg-2:before { top: -15vw; background: url('../img/top/ttl/bg-2@sp.png') no-repeat 50% 0% / 100% auto;}
	#product .check .inner-check.bg-3 { padding: 38vw 0 20px;}
	#product .check .inner-check.bg-3:before { top: -15vw; background: url('../img/top/ttl/bg-3@sp.png') no-repeat 50% 0% / 100% auto;}

	#product .check .ctn-flex { display: block;}
	#product .check .pht { width: 100%; margin-bottom: 40px;}
	#product .check .txt { width: 100%;}

	#product .check h3.type { margin-bottom: 20px;}
	#product .check .pht h3.sp-tit { display: block; margin-bottom: 24px; font-size: 4.0vw;}
	#product .check#deep .pht h3.sp-tit { color: #f2a001;}
	#product .check#melty .pht h3.sp-tit { color: #e04776;}
	#product .check#savon .pht h3.sp-tit { color: #2594ac;}
	#product .check .pht h3.sp-tit span.block { display: block;}
	#product .check .pht h3.sp-tit span.ruby { position: relative; padding-bottom: 18px;}
	#product .check .pht h3.sp-tit span.ruby em { display: block; font-size: 14px; line-height: 1.4; text-align: right;
	 position: absolute; right: 0; bottom: 0;
	}
	#product .check .txt h3.pc-tit { display: none;}

	#product .btn { padding: 30px 0 60px;}

	#product .fuwa.fuwa-1 { width: 140px; height: 140px; left: 0%; top: 25%;}
	#product .fuwa.fuwa-2 { display: none;}
	#product .fuwa.fuwa-3 { width: 100px; height: 100px; right: 8%; top: 50%;}
}
@media (max-width: 641px) {
	#product .fuwa.fuwa-1 { width: 80px; height: 100px; left: 0%; top: 25%; background-size: auto 100%; background-position: 100% 50%;}
	#product .fuwa.fuwa-3 { width: 100px; height: 100px; right: 4%; top: 50%;}
}
@media (max-width: 481px) {

	#product .ttl h2 { top: 12%;}
	#product .ttl h2 img.pc { display: none;}
	#product .ttl h2 img.sp { display: block; margin: 0 auto;}

	#product .check .pos { top: 80px;}

	#product .check .inner-check.bg-1 { padding: 0px;}
	#product .check .inner-check.bg-2 { padding: 38vw 0px 0px;}
	#product .check .inner-check.bg-3 { padding: 38vw 0px 0px;}

	#product .ctn .txt { margin-bottom: 12px;}

	#product .check .pht .pht-ctn { padding-left: 10px;}
	#product .check .pht .pht-ctn .item { width: 180px;}
	#product .check .pht .pht-ctn .icn.icn-1 { width: 110px; top: 10%; right: 68%;}
	#product .check .pht .pht-ctn .icn.icn-2 { width: 90px; top: 45%; left: 72%;}
	#product .check .pht .pht-ctn .icn.icn-3 { width: 120px; bottom: 30px; right: auto; left: 0px;}
	#product .check .pht h3.sp-tit { margin: 0 auto 10px; font-size: 18px; letter-spacing: -0.05rem;}
	#product .check .pht h3.sp-tit span.ruby { padding-bottom: 12px;}
	#product .check .pht h3.sp-tit span.ruby em { font-size: 10px;}

	#product .ctn figure { margin-bottom: -18px;}
	#product .check .pht p.name { margin-bottom: 6px; font-size: 15px; letter-spacing: -0.05rem;}
	#product .check .pht p.price { margin-bottom: 16px; font-size: 13px;}

	#product .check .txt figure img.icn1 { width: 100px;}
	#product .check .txt figure img.icn2 { width: 78px;}
	#product .check .txt figure img.icn3 { width: 78px;}

	#product .check .pht form { width: 88%; max-width: 280px;}
	#product .check .pht form:after { border-width: 1px; right: 5%;}
	#product .check .pht form:after { width: 8px; height: 8px; right: 15px;}
	#product .check .pht form input[type="submit"]{ padding: 10px 0; font-size: 13px; text-indent: 20px;}
	#product .check .pht form svg { width: 18px; transform: translate(-60px, -50%);}

	#product .fuwa.fuwa-1 { width: 50px; height: 72px; top: 20%; background-size: auto 100%; background-position: 100% 50%;}
	#product .fuwa.fuwa-2 { display: none;}
	#product .fuwa.fuwa-3 { width: 60px; height: 60px; right: 6%; top: 48%;}

	#product .btn a { padding: 4px; font-size: 14px;}
	#product .btn a:after { border-width: 1px;}
	#product .btn a span { padding: 12px 0;}

	#product .note { padding: 0 12px;}
	#product .note ul { width: 100%; max-width: 100%;}

}



#slider { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 2;}
#slider .spacer { width: 100%; height: 100px;}
#slider .inner { padding: 60px 0 180px; background: #f5f4f1;}
#slider .ctn { width: 90%; margin: 0 auto;}
#slider .ctn h3 { margin-bottom: 40px; text-align: center;}
#slider .ctn h3 img { width: 90%; max-width: 480px;}
#slider .js-slider { padding: 0 40px;}
#slider .slide { position: relative; width: 100%; margin: 0 auto;}
#slider .slide img{ position: relative; width: 100%;}
#slider .slide img.sp { display: none;}
#slider .slide .more { width: 100%; position: absolute; bottom: 0; left: 0; padding-left: 20px;}
#slider .slide .more a { display: block; width: 60%; max-width: 520px; margin: 0 auto; padding: 10px;}
#slider .slide .more a img { width: 80%; max-width: 300px; margin: 0 auto;}
#slider .slide .more a:hover { opacity: 0.8;}
#slider .slick-arrow{ width: 150px; height: 80%; position: absolute; bottom: 10%;
 border: none; z-index: 100; background: rgba(2545,244,241,0);
 text-indent: -9999em; outline: none;
}
#slider .slick-prev { left: 0%;}
#slider .slick-next { right: 0%;}
#slider .slick-arrow:before{ position: absolute; content: ''; display: block; width: 32px; height: 32px; top: 50%; transform: translateY(-50%) rotate(45deg);}
#slider .slick-prev:before { left: 0%; border-bottom: solid 2px #692407; border-left: solid 2px #692407;}
#slider .slick-next:before { right: 0%; border-top: solid 2px #692407; border-right: solid 2px #692407;}
#slider .slick-arrow:hover { background: rgba(2545,244,241,0.15);}
@media (max-width: 801px) {
	#slider .slide img.pc { display: none;}
	#slider .slide img.sp { display: block; margin: 0 auto 30px;}
	#slider .slide .more { position: relative; bottom: auto; left: 0; padding-left: 0px;}
	#slider .slide .more a.btn-deep { background: #f8eb95;}
	#slider .slide .more a.btn-melty { background: #ffd2c9;}
	#slider .slide .more a.btn-savon { background: #a3d2e5}
	#slider .slick-arrow{ height: 62%; bottom: auto; top: 0;}
}
@media (max-width: 641px) {
	#slider .js-slider { padding: 0px;}
	#slider .slide img.sp { margin: 0 auto 20px;}
	#slider ul li:first-child a{ padding-left: 8px;}
	#slider ul li:last-child a { padding-right: 8px;}
}
@media (max-width: 481px) {
	#slider .inner { padding: 40px 0 50px;}
	#slider .ctn h3 { margin-bottom: 20px;}
	#slider .slide img.sp { margin: 0 auto 10px;}
	#slider .slick-arrow{ width: 100px;}
	#slider .slick-arrow:before{ width: 24px; height: 24px;}
	#slider .slick-prev:before { left: 10%;}
	#slider .slick-next:before { right: 10%;}
}





#campaign { position: relative; background: #fef4c6; transition: 0.4s linear; opacity: 0;}
#campaign .ttl { }
#campaign .ttl .fuwa { position: relative; width: 100%; z-index: 2;}
#campaign .ttl .fuwa:after { content: ''; position: absolute; animation: 2s moving linear infinite;
 width: 100px; height: 100px;
 background: url('../img/top/fuwa-1.png') no-repeat 50% 50% / 100%;
 right: 30%; top: 280px;
}
#campaign .ttl h2 { top: 20%;}
#campaign .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 2;}
#campaign .ctn { position: relative; width: 100%; max-width: 920px; margin: 0 auto; padding: 60px 0 180px; z-index: 2;}
#campaign .ctn figure { position: relative; margin-bottom: -60px; text-align: center;}
#campaign .ctn figure img { width: 100%;}
#campaign .ctn figure img.sp { display: none;}

#campaign .ctn .btn { position: relative; width: 100%; max-width: 320px; margin: 0 auto; z-index: 2;}
#campaign .ctn .btn a { display: block; width: 100%; padding: 5px; background: #fff;
 color: #f89200; font-size: 20px; font-weight: 700; letter-spacing: 0.05rem; text-align: center; text-decoration: none;
}
#campaign .ctn .btn a span { display: block; padding: 20px 0; border: solid 1px #f89200;}
#campaign .ctn .btn a:after { content: ''; display: block; width: 10px; height: 10px;
 border-top: solid 2px #f89200; border-right: solid 2px #f89200;
 position: absolute; right: 25px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#campaign .ctn .btn a:hover { background: rgba(255,255,255,0.8);}

#campaign .ctn .badge { width: 230px; position: absolute; left: -40px; top: -180px;}
#campaign .ctn .badge img { width: 100%;}

#campaign .ctn .fuwa { position: absolute; animation: 2s moving linear infinite;}
#campaign .ctn .fuwa.fuwa-1 { background: url('../img/top/fuwa-1.png') no-repeat 50% 50% / 100%;}
#campaign .ctn .fuwa.fuwa-2 { background: url('../img/top/fuwa-2.png') no-repeat 50% 50% / 100%;}
#campaign .ctn .fuwa.l1 { width: 80px; height: 80px; left: 20%; top: 6%;}
#campaign .ctn .fuwa.l2 { width: 150px; height: 150px; left: -20px; bottom: 10%; animation-delay: 0.3s;}
#campaign .ctn .fuwa.r1 { width: 140px; height: 140px; right: -40px; bottom: 10%; animation-delay: 0.3s;}
#campaign .ctn .fuwa.r2 { width: 80px; height: 80px; right: 12%; bottom: 5%;}

#campaign.show { opacity: 1;}
@media (max-width: 1001px) {
	#campaign .ctn .badge { left: 0px; top: -180px;}
}
@media (max-width: 801px) {
	#campaign .ttl { margin-bottom: -6vw;}
	#campaign .ttl h2 { top: 16%;}

	#campaign .ctn figure { margin-bottom: 0px;}
	#campaign .ctn figure img.pc { display: none;}
	#campaign .ctn figure img.sp { display: block;}
	
	#campaign .ctn .badge { width: 200px; left: 2%;}

	#campaign .ctn .fuwa.l1 { width: 80px; height: 80px; left: 21%; top: 6%;}
	#campaign .ctn .fuwa.l2 { width: 100px; height: 150px; left: 0px; bottom: 10%;
	 background-size: auto 100%; background-position: 100% 50%;}
	#campaign .ctn .fuwa.r1 { width: 80px; height: 140px; right: 0px; bottom: 10%; background-size: auto 100%; background-position: 0% 50%;}
	#campaign .ctn .fuwa.r2 { width: 80px; height: 80px; right: 12%; bottom: 5%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#campaign .ttl .fuwa:after{ width: 72px; height: 72px; right: 20%; top: 150px;}

	#campaign .ctn { width: 100%; padding: 0px 0px 80px;}
	#campaign .ctn figure img { width: 100%;}
	#campaign .ctn .btn { width: 68%; max-width: 280px;}
	#campaign .ctn .btn a { padding: 4px; font-size: 14px; letter-spacing: 0.1rem;}
	#campaign .ctn .btn a span { padding: 12px 0; }
	#campaign .ctn .btn a:after { width: 8px; height: 8x; right: 15px; border-width: 2px;}

	#campaign .ctn .badge { width: 100px; top: -100px;}

	#campaign .ctn .fuwa.l1 { width: 50px; height: 50px; top: 0%;}
	#campaign .ctn .fuwa.l2 { width: 60px; height: 100px; left: 0px; bottom: 10%;}
	#campaign .ctn .fuwa.r1 { width: 50px; height: 100px; right: 0px; bottom: 12%;}
	#campaign .ctn .fuwa.r2 { width: 50px; height: 50px;}
}



#shop { position: relative; background: #fef4c6; transition: 0.4s linear; opacity: 0;}
#shop .ttl { margin-bottom: -40px;}
#shop .ttl h2 { top: 28%;}
#shop .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0px 0 120px;}
#shop h3 { margin-bottom: 12px; font-size: 23px; font-weight: 700; text-align: center;}
#shop h3 span { display: block;}
#shop p { margin-bottom: 40px; font-size: 16px; font-weight: 700; text-align: center;}

#shop ul.shoplist { width: 92%; max-width: 880px; margin: 0 auto 80px; font-size: 0;}
#shop ul.shoplist li { display: inline-block; width: 33.33334%; padding: 15px; vertical-align: top; font-size: 16px;}
#shop ul.shoplist li a { position: relative; display: block; width: 100%; padding: 3px; background: #fff; border-radius: 8px;
 color: #67524c; font-weight: 700; text-align: left; text-decoration: none;
}
#shop ul.shoplist li a span { position: relative; display: block; width: 100%; padding: 18px; padding-left: 50px;
 background: #fff; border: solid 1px #f89200; border-radius: 8px;
 color: #67524c; font-weight: 700; text-align: left; text-decoration: none;
}
#shop ul.shoplist li a span:before { content: ''; display: block; width: 24px; height: 100%;
 position: absolute; left: 12px; top: 50%; transform: translate(0,-50%);
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42"><path d="M587.92,8214.28a12,12,0,0,0-2.78-2c-.13-.08-.27-.12-.4-.19a26.2,26.2,0,0,0,1.92-2.48,18,18,0,0,0,1.56-3.14,2.37,2.37,0,0,0,.13-1.38c-.1-.47-.35-.83-.79-.88a1.11,1.11,0,0,0-1.1.63,2.65,2.65,0,0,0-.3,1.18,14.33,14.33,0,0,1-.55,3.15,6.38,6.38,0,0,1-1.69,2.54,8.46,8.46,0,0,0-4.21-.61,5.83,5.83,0,0,0-3.39,1.61,1.2,1.2,0,0,0-.35,1.36.48.48,0,0,0,.57.26,1.48,1.48,0,0,0,.8-.46,4.52,4.52,0,0,1,2.49-1.64,6.4,6.4,0,0,1,3,.44c-.12.1-.23.2-.36.29a34.24,34.24,0,0,1-5.89,3.14c-1.86.81-3.87,1.6-6,2.37-.89-.63-2.44-1.82-3.69-2.81a22,22,0,0,0-4.2-2.85,10.28,10.28,0,0,0-5.22-1.13,6.34,6.34,0,0,0-4.92,2.61,6.12,6.12,0,0,0-1,5.86,6.68,6.68,0,0,0,3.9,3.81,10.7,10.7,0,0,0,5.9.26c2.44-.47,9.4-3.66,9.81-3.85a29.26,29.26,0,0,0,7.38,3.48,10.89,10.89,0,0,0,7.16-.43c2.17-.87,4.06-2.86,4.09-5.16A5.58,5.58,0,0,0,587.92,8214.28ZM565,8220.34a27.5,27.5,0,0,1-4.21,1.14,15.74,15.74,0,0,1-4-.17,4.69,4.69,0,0,1-2.76-2.2,3.92,3.92,0,0,1,.23-3.58,4.36,4.36,0,0,1,3.34-2.15,8.24,8.24,0,0,1,4.42.71,20.22,20.22,0,0,1,4,2.56c1,.8,2,1.57,3,2.32Zm21.22,0a9.12,9.12,0,0,1-4.93,1.41,18.74,18.74,0,0,1-8.64-2.06c1.61-.76,3.14-1.52,4.56-2.3,2.21-1.21,6.31-4.07,6.55-4.28,1.15.48,4.13,2.68,4.07,4.94A3.07,3.07,0,0,1,586.19,8220.32Zm-16.38-5.47a27.18,27.18,0,0,1-3.94-4.65,9.27,9.27,0,0,1-1.62-5.15,5.8,5.8,0,0,1,1.91-3.95,6.62,6.62,0,0,1,8.79,0,5.89,5.89,0,0,1,1.91,3.95,9.27,9.27,0,0,1-1.62,5.15,28.15,28.15,0,0,1-3.94,4.65,1.44,1.44,0,0,1-.75.35A1.42,1.42,0,0,1,569.81,8214.85Zm.74-.64c.27,0,1.86-2.15,2.8-3.77a11.49,11.49,0,0,0,1.46-4,3.81,3.81,0,0,0-1.06-3.23,4.63,4.63,0,0,0-6.39,0,3.78,3.78,0,0,0-1.06,3.23,11.49,11.49,0,0,0,1.46,4C568.7,8212.06,570.28,8214.21,570.55,8214.21ZM565.71,8232c0-.13.06-.29.1-.45h9.49c0,.16.07.32.1.45a3.75,3.75,0,0,1,0,1.14h-9.61A3.21,3.21,0,0,1,565.71,8232Zm8.24-3.64c.32.57.58,1.11.79,1.59h-8.37a15.32,15.32,0,0,1,.78-1.59Zm-3.4-4.51a11.66,11.66,0,0,1,2.42,2.91h-4.84A12.13,12.13,0,0,1,570.55,8223.87Zm0,12.89a5.54,5.54,0,0,1-3.55-1.38,3.67,3.67,0,0,1-.56-.63h8.22a3.6,3.6,0,0,1-.55.63A5.54,5.54,0,0,1,570.55,8236.76Zm-1.59,1.15.84,1.27a.88.88,0,0,0,1.5,0c.26-.4.65-1,.84-1.27a6.68,6.68,0,0,0,2.9-1.32,5.08,5.08,0,0,0,1.84-4,11.67,11.67,0,0,0-1.87-4.92,31.6,31.6,0,0,0-3.72-4.69,1.45,1.45,0,0,0-.74-.36,1.43,1.43,0,0,0-.73.36,30.94,30.94,0,0,0-3.72,4.69,11.53,11.53,0,0,0-1.87,4.92,5.1,5.1,0,0,0,1.83,4A6.73,6.73,0,0,0,569,8237.91Z" transform="translate(-551.15 -8199.43)" fill="%23f89200" /></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; 
}
#shop ul.shoplist li a:hover { opacity: 0.85;}
#shop.show,
#shop p.show,
#shop ul.show { opacity: 1;}

#shop .check { width: 92%; max-width: 920px; margin: 0 auto; transition: 0.4s linear; opacity: 0;}
#shop .check h4 { margin-bottom: 50px; font-size: 22px; text-align: center;}
#shop .check ul { font-size: 0; text-align: center;}
#shop .check ul li { display: inline-block; width: 20%;}
#shop .check ul li.blank{ display: none;}
#shop .check ul li a { display: block; width: 94%; max-width: 164px; margin: 0 auto; color: #fff; text-decoration: none;}
#shop .check ul li dl dt { width: 80px; margin: 0 auto 15px;}
#shop .check ul li dl dt img { width: 100%;}
#shop .check ul li dl dd { font-size: 16px; font-weight: 700; line-height: 1.2;}
#shop .check ul li dl dd { position: relative;}
#shop .check ul li dl dd:before,
#shop .check ul li dl dd:after { content: ''; display: block; width: 0; height: 0; position: absolute; top: 50%; transform: translate(0,-50%);
 border: solid 24px transparent;
}
#shop .check ul li dl dd:before{ left: 0; border-right: 0; border-left: solid 13px #fef4c6;}
#shop .check ul li dl dd:after { right: 0; border-left: 0; border-right: solid 13px #fef4c6;}

#shop .check ul li dl dd span { display: block; padding: 12px 6px;}
#shop .check ul li dl dd br { display: none;}
#shop .check ul li:nth-child(1) dl dd span { background: #e5864b;}
#shop .check ul li:nth-child(2) dl dd span { background: #e78c8f;}
#shop .check ul li:nth-child(3) dl dd span { background: #ffcf26;}
#shop .check ul li:nth-child(4) dl dd span { background: #e06b51;}
/*#shop .check ul li:nth-child(5) dl dd span { background: #f5bf4b;}*/
#shop .check ul li:nth-child(5) dl dd span { background: #bd9cdb;}
#shop .check ul li dl dd span:after { content: ''; display: block; width: 9px; height: 9px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 24px; top: 50%; transform: translate(0,-50%) rotate(45deg);
}
#shop .check ul li a:hover { opacity: 0.8;}
#shop .check.show{ opacity: 1;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#shop .ttl { margin-bottom: -10vw;}
	#shop .ttl .fuwa:before{ right: 5%; top: 120px;}
	#shop .ttl .fuwa:after { left: 8%; top: 320px;}

	#shop ul.shoplist li { width: 50%; padding: 10px; font-size: 18px;}
	#shop ul.shoplist li a { }
	#shop ul.shoplist li a span{ padding: 15px; padding-left: 60px;}
	#shop ul.shoplist li a:before { width: 30px; left: 15px;}

	#shop .check h4 { margin-bottom: 20px;}
	#shop .check ul li { width: 33%; padding: 12px 0;}
	#shop .check ul li dl dd { font-size: 15px;}
	#shop .check ul li dl dd:before,
	#shop .check ul li dl dd:after { border: solid 20px transparent;}
	#shop .check ul li dl dd:before{ border-right: 0; border-left: solid 10px #fef4c6;}
	#shop .check ul li dl dd:after { border-left: 0; border-right: solid 10px #fef4c6;}

	#shop .check ul li dl dd span { padding: 6px;}
	#shop .check ul li dl dd br { display: block;}
	#shop .check ul li dl dd span:after { right: 20px;}
}
@media (max-width: 641px) {
	#shop .ttl h2 { top: 24%;}
	#shop .ttl .fuwa:before{ width: 100px; height: 100px; right: 4%; top: 10vw;}
	#shop .ttl .fuwa:after { width: 80px; height: 80px; left: 6%; top: 42vw;}
	#shop .inner-sct { padding: 0px 0 80px;}
	#shop h3 { margin-bottom: 20px; font-size: 30px;}
	#shop p { margin-bottom: 30px; font-size: 18px;}
	#shop ul.shoplist { margin: 0 auto 60px;}
	#shop ul.shoplist li { padding: 6px; font-size: 15px;}
	#shop .check h4 { margin-bottom: 10px; font-size: 20px;}
	#shop .check ul li { width: 50%; padding: 10px;}
	#shop .check ul li.blank{ display: inline-block;}

	#shop .check ul li dl dd { font-size: 14px;}
}
@media (max-width: 481px) {
	#shop .ttl { margin-bottom: -8vw;}
	#shop .ttl .fuwa:before{ width: 72px; height: 72px; top: 8vw;}
	#shop .ttl .fuwa:after { width: 80px; height: 80px; top: 36vw;}

	#shop h3 { margin-bottom: 10px; font-size: 20px;}
	#shop p { margin-bottom: 20px; font-size: 13px;}
	#shop ul.shoplist { margin: 0 auto 40px;}
	#shop ul.shoplist li { padding: 5px; font-size: 12px;}
	#shop ul.shoplist li a { padding: 2px; border-radius: 6px;}
	#shop ul.shoplist li a span { padding: 6px 0; padding-left: 30px; border-radius: 4px;}
	#shop ul.shoplist li a span:before { width: 18px; left: 6px;}
	#shop .check h4 { margin-bottom: 20px; font-size: 18px;}
	#shop .check ul li dl dt { width: 50px;}
	#shop .check ul li dl dd span { font-size: 12px;}
	#shop .check ul li dl dd span:after { width: 6px; height: 6px; right: 18px;}
}