@charset "utf-8";

/* loading
-------------------------------------------------- */
#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 100; transition: 0.8s; transition-delay: 2.8s;}
#loading .base { position: relative; width: 100%; height: 100%; background: #fff;}
#loading .base svg#logo { position: absolute; left: 50%; top: 50%; width: 200px; fill:#53321a; transform: translate(-50%,-60%); transition-delay: 0.8s;}

#loading .transition { position: absolute; left: 0; width: 100%; top: 0%; transform: translateY(100%);}
#loading .transition .space { width: 100%; height: 92vh; background: #ffe750;}
#loading .transition svg.waves-top { vertical-align: bottom;}
#loading .transition svg.waves-btm { position: relative; width: 100%; transform: rotate(180deg);}
#loading .transition svg.waves-top .parallax1 > use { animation: move-forever1 15s cubic-bezier(.55,.5,.45,.5) infinite; animation-delay: -2s; animation-duration: 1.4s;}
#loading .transition svg.waves-btm .parallax2 > use { animation: move-forever2 15s cubic-bezier(.55,.5,.45,.5) infinite; animation-delay: -2s; animation-duration: 1.4s;}
#loading .mask { width: 100%; max-width: 1280px; margin: 0 auto;}
#loading .mask svg { width: 100%; height: auto;}
#loading .mask .mask1pc { transform-origin: 50% 50%; transform: translate(-100%,-60%);}
#loading .mask .mask2pc { transform-origin: 50% 50%; transform: translate(100%,-100%);}
#loading .mask .mask3pc { transform-origin: 50% 50%; transform: translate(-100%,100%);}
#loading .mask .mask4pc { transform-origin: 50% 50%; transform: translate(100%,100%);}

#loading .mask .mask1sp { transform-origin: 50% 50%; transform: translate(-100%,-60%);}
#loading .mask .mask2sp { transform-origin: 50% 50%; transform: translate(100%,-100%);}
#loading .mask .mask3sp { transform-origin: 50% 50%; transform: translate(-100%,100%);}
#loading .mask .mask4sp { transform-origin: 50% 50%; transform: translate(100%,100%);}

#loading .mask svg image{ width: 100%;}

#loading.start { opacity: 0;}
#loading.start .base svg#logo { opacity: 0;}
#loading.start .transition { animation: move-top 2.0s cubic-bezier(0.85, 0, 0.15, 1) 0.3s forwards;}
#loading.start .mask .mask1pc { animation: move-circle1pc 1.8s ease-in-out forwards; animation-delay: 1.2s;}
#loading.start .mask .mask2pc { animation: move-circle2pc 1.8s ease-in-out forwards; animation-delay: 1.2s;}
#loading.start .mask .mask3pc { animation: move-circle3pc 1.8s ease-in-out forwards; animation-delay: 1.2s;}
#loading.start .mask .mask4pc { animation: move-circle4pc 1.8s ease-in-out forwards; animation-delay: 1.2s;}

#loading .mask svg.mask-sp { display: none;}
#loading.start .mask .mask1sp { animation: move-circle1sp 1.8s ease-in-out forwards; animation-delay: 1.2s;}
#loading.start .mask .mask2sp { animation: move-circle2sp 1.8s ease-in-out forwards; animation-delay: 1.2s;}
#loading.start .mask .mask3sp { animation: move-circle3sp 1.8s ease-in-out forwards; animation-delay: 1.2s;}
#loading.start .mask .mask4sp { animation: move-circle4sp 1.8s ease-in-out forwards; animation-delay: 1.2s;}
@keyframes move-forever1 {
  0% { transform: translate3d(-90px,0,0);}
100% { transform: translate3d(85px,0,0);}
}
@keyframes move-forever2 {
  0% { transform: translate3d(-90px,0,0);}
100% { transform: translate3d(85px,0,0);}
}
@keyframes move-top {
  0% { transform: translateY(100%);}
 50% { transform: translateY(-20%);}
100% { transform: translateY(-100%);}
}

/* SP - Mask */
@keyframes move-circle1pc {
  0% { transform: translate(-100%,-60%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(3.6);}
}
@keyframes move-circle2pc {
  0% { transform: translate(100%,-100%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(3.6);}
}
@keyframes move-circle3pc {
  0% { transform: translate(-100%,100%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(3.6);}
}
@keyframes move-circle4pc {
  0% { transform: translate(100%,100%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(3.6);}
}

/* SP - Mask */
@keyframes move-circle1sp {
  0% { transform: translate(-100%,-60%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(2.8);}
}
@keyframes move-circle2sp {
  0% { transform: translate(100%,-100%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(2.8);}
}
@keyframes move-circle3sp {
  0% { transform: translate(-100%,100%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(2.8);}
}
@keyframes move-circle4sp {
  0% { transform: translate(100%,100%);}
 80% { transform: translate(0%,0%) scale(1.0);}
 81% { transform: translate(0%,0%) scale(1.0);}
100% { transform: translate(0%,0%) scale(2.8);}
}

@media (max-width: 801px) {
	#loading .base svg#logo { width: 100px; transform: translate(-50%,-65%);}
	#loading .mask svg.mask-pc { display: none;}
	#loading .mask svg.mask-sp { display: block;}
	#loading .transition .space { height: 96vh;}
}

@keyframes bounceInUp {
   0% { opacity: 0; -webkit-transform: translate3d(0, 125%, 0) scaleY(0.9); transform: translate3d(0, 125%, 0) scaleY(0.9); }
  50% { -webkit-transform: translate3d(0, -5%, 0) scaleY(0.97); transform: translate3d(0, -5%, 0) scaleY(0.97); }
  70% { -webkit-transform: translate3d(0, 5%, 0) scaleY(0.95); transform: translate3d(0, 5%, 0) scaleY(0.95); }
  85% { opacity: 1; -webkit-transform: translate3d(0, -2.5%, 0) scaleY(1); transform: translate3d(0, -2.5%, 0) scaleY(1); }
 100% { opacity: 1; -webkit-transform: translate3d(0, 0%, 0) scaleY(1); transform: translate3d(0, 0%, 0) scaleY(1);}
}


.bg-fix { position: fixed; left: 0; top: 0; width: 100%; height: 100vw; z-index: 1;}
.bg-fix div { position: absolute; left: 0; top: 0; width: 100%; height: 900px;}
.bg-fix div:before { content: ''; display: block; width: 100%; max-width: 1280px; height: 100%; margin: 0 auto;
 background: url('../img/top/bg/1.jpg') no-repeat 50% 50% / cover;
}
@media (max-width: 801px) {
	.bg-fix div { height: 100vh;}
	.bg-fix div:before { background: url('../img/top/bg/1@sp.jpg') no-repeat 50% 50% / cover;}
}

.note { width: 100%;}
.note ul { width: 100%;}
.note ul li { font-size: 10px;}

.spacer { width: 100%; height: 80vh;}


#kv { position: relative; z-index: 3; background: #fab612;}
#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: 10;}
#kv .ctn div { position: relative; width: 95%; margin: 0 auto; padding-top: 160px;}

#kv .ctn div:after { content: ''; display: block; width: 90px; height: 130px;
 background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;
 position: absolute; right: 8%; top: 120px; opacity: 0; transition: 0.6s linear;
}

#kv h1 { width: 55%; margin: 0 0 0 auto; text-align: center;}
#kv h1 img { position: relative; width: 55%; max-width: 250px; opacity: 0;}
#kv .news { position: absolute; left: 0; top: 360px; width: 100%; z-index: 3;}
#kv .news .inner { width: 95%; margin: 0 auto;}
#kv .news .inner div { width: 50%; margin: 0 0 0 auto;}
#kv .news a { display: block; width: 88%; max-width: 400px; margin: 0 auto; padding: 40px 40px 35px;
 background: url('../img/news/bg.png') no-repeat 50% 50% / 100% 100%;
 color: #8c4811; text-decoration: none; opacity: 0;
}
#kv .news a:hover { opacity: 0.8;}
#kv .news a dl { display: table; width: 100%;}
#kv .news a dl dt,
#kv .news a dl dd { display: table-cell; vertical-align: middle;}
#kv .news a dl dt { width: 80px;}
#kv .news a dl dt img { width: 100%; border-radius: 8px;}
#kv .news a dl dd { width: auto; padding-left: 10px; font-size: 11px;}
#kv .news a dl dd span { display: block;}
#kv .news a dl dd span.tit { font-size: 12px; font-weight: 700;}
#kv .bg-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto -150px; z-index: 1; background: #fff;}
#kv .bg-kv img { width: 100%;}
#kv .bg-kv img.sp { display: none;}
#kv .bg-kv .logo { position: absolute; left: 0; top: 0; width: 100%; padding-top: 150px;}
#kv .bg-kv .logo p { width: 55%; margin: 0 0 0 auto; text-align: center;}
#kv .bg-kv .logo p img { position: relative; width: 50%; max-width: 220px; margin: 0 auto;}

#kv.show .ctn div:after { opacity: 1;}

#kv.show h1 img {
 animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
 -webkit-animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
#kv.show .news a {
 animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
 -webkit-animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) normal forwards;
 animation-delay: 0.4s;
 -webkit-animation-delay: 0.4s;
}

#kv .lead { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 2;}
#kv .lead:after { content: ''; display: block; width: 100%; height: 380px; z-index: 1;
 background: url('../img/top/bg/lead.png') no-repeat 50% 50%;
}
#kv .lead .inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 100px; z-index: 2;}
#kv .lead .copy { position: relative; width: 80%; max-width: 420px; margin: 0 auto 20px;}
#kv .lead .copy img { width: 100%; opacity: 0;}
#kv .lead .copy img:nth-child(1){ position: absolute; left: 0; top: 0;}
#kv .lead .copy img:nth-child(2){ position: absolute; left: 0; top: 0;}
#kv .lead .copy img:nth-child(3){ position: absolute; left: 0; top: 0;}
#kv .lead .copy img:nth-child(4){ position: absolute; left: 0; top: 0;}
#kv .lead .copy img:nth-child(5){ position: relative;}

#kv.show .lead .copy img {
 animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
 -webkit-animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) normal forwards;
}
#kv.show .lead .copy img:nth-child(1){ position: absolute; left: 0; top: 0; animation-delay: 0.2s;}
#kv.show .lead .copy img:nth-child(2){ position: absolute; left: 0; top: 0; animation-delay: 0.25s;}
#kv.show .lead .copy img:nth-child(3){ position: absolute; left: 0; top: 0; animation-delay: 0.3s;}
#kv.show .lead .copy img:nth-child(4){ position: absolute; left: 0; top: 0; animation-delay: 0.35s;}
#kv.show .lead .copy img:nth-child(5){ position: relative; animation-delay: 0.40s;}
#kv .lead .note { position: absolute; left: 0; bottom: 80px; width: 100%; z-index: 3;}
#kv .lead .note ul { width: 50%; max-width: 520px; margin: 0 0 0 auto;}
#kv .lead .note ul li { color: #fff;}
#kv .lead .note ul li span { display: block;}
@media (max-width: 1281px) {
	#kv .ctn div { padding-top: 12vw;}
	#kv .bg-kv .logo { padding-top: 12vw;}
	#kv .news { top: 30vw;}
}
@media (max-width: 801px) {
	#kv {}
	#kv .ctn div { padding-top: 8vw;}
	#kv .ctn div:after { width: 90px; height: 130px; right: auto; left: 8%;}

	#kv .bg-kv .logo { padding-top: 8vw;}
	#kv .bg-kv .logo p { width: 100%;}
	#kv .bg-kv .logo p img { width: 40%;}

	#kv h1 { width: 100%; margin: 0 auto;}
	#kv h1 img { width: 40%;}

	#kv .news { top: auto; bottom: 32vw;}
	#kv .news .inner { width: 94%; margin: 0 auto;}
	#kv .news .inner div { width: 100%; margin: 0 auto;}

	#kv .bg-kv { margin: 0 auto -18vw;}
	#kv .bg-kv img.pc { display: none;}
	#kv .bg-kv img.sp { display: block;}

	#kv .lead {}
	#kv .lead:after { height: 0px; padding-top: 100%; background: url('../img/top/bg/lead@sp.png') no-repeat 50% 50% / 100% 100%;}
	#kv .lead .inner { padding-top: 21vw;}
	#kv .lead .copy { margin: 0 auto 28vw;}
	#kv .lead .note { bottom: 18vw;}
	#kv .lead .note ul { width: 100%; max-width: 100%; padding: 0 20px;}
	#kv .lead .note ul li span { display: inline;}

/*
	#kv.show .news a { animation: none; -webkit-animation: none;}
	#kv .news.show a {
	 animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	 -webkit-animation: bounceInUp 0.625s cubic-bezier(0.215, 0.61, 0.355, 1) normal forwards;
	}
*/
}
@media (max-width: 641px) {
	#kv .bg-kv { margin: 0 auto -16vw;}
}
@media (max-width: 481px) {
	#kv { margin-bottom: -14vw;}
	#kv .ctn div:after { width: 64px; height: 92px; left: 5%; top: 30px;}
	#kv .news { bottom: 120px;}
	#kv .news a { width: 100%; padding: 24px 0 24px 40px;}
	#kv .news a dl dt { width: 65px;}
	#kv .news a dl dd { font-size: 10px;}
	#kv .news a dl dd span.tit { font-size: 11px;}
	#kv .lead .inner { padding: 14vw 0 15vw;}
	#kv .lead .note { bottom: 55px;}
	#kv .lead .note ul { padding: 0 12px;}
}



#concept { position: relative; z-index: 3; width: 100%; max-width: 1280px; margin: 0 auto;}
#concept .inner-sct { width: 100%; margin: 0 auto; background: url('../img/top/bg/concept-2.png') no-repeat 50% 100% / 100% 100%;}
#concept p { font-weight: 700; text-align: center;}
#concept p sub { font-size: 12px; vertical-align: baseline;}
#concept .ctn-1 { position: relative; padding: 80px 0 40px; background: url('../img/top/bg/concept-1.png') no-repeat 50% 100%;}
#concept .ctn-1 h2 { margin-bottom: 20px; text-align: center;}
#concept .ctn-1 h2 img { width: 62%; max-width: 400px;}
#concept .ctn-1 p { margin-bottom: 50px; font-size: 20px;}
#concept .ctn-1 .note ul { max-width: 300px; margin: 0 0 0 auto;}
#concept .ctn-1 .note ul li {}
#concept .ctn-2 { position: relative; padding: 20px 0 160px;}
#concept .ctn-2 h3 { margin-bottom: 20px; text-align: center;}
#concept .ctn-2 h3 img { width: 80%; max-width: 640px;}
#concept .ctn-2 h3 img.sp { display: none;}
#concept .ctn-2 p { margin-bottom: 30px; font-size: 24px;}
#concept .ctn-2 p span { display: block;}
#concept .ctn-2 ul { width: 92%; max-width: 960px; margin: 0 auto; font-size: 0; text-align: center;}
#concept .ctn-2 ul li { display: inline-block; width: 50%;}
#concept .ctn-2 ul li a { display: block; width: 94%; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 0 12px #ff7f37; background: #fff;}
#concept .ctn-2 ul li a img { width: 100%;}
#concept .ctn-2 ul li a:hover img { opacity: 0.8;}
@media (max-width: 801px) {
	#concept .inner-sct { background: url('../img/top/bg/concept-2@sp.png') no-repeat 50% 100% / 100% auto;}
	#concept .ctn-1 { padding: 6vw 0 12vw; background: url('../img/top/bg/concept-1@sp.png') no-repeat 50% 100% / 100% auto;}
	#concept .ctn-1 .note ul { max-width: 220px;}
	#concept .ctn-2 { padding: 0vw 0 21vw;}
	#concept .ctn-2 ul li { display: block; width: 100%; padding: 10px 0;}
}
@media (max-width: 641px) {
	#concept .ctn-1 p { font-size: 3.0vw;}
	#concept .ctn-1 p span { display: block;}
	#concept .ctn-2 p { font-size: 3.6vw;}
}
@media (max-width: 481px) {
	#concept p sub { font-size: 10px;}
	#concept .ctn-1 { padding: 4vw 0 18vw;}
	#concept .ctn-1 h2 { margin-bottom: 10px;}
	#concept .ctn-1 p { margin-bottom: 12px; font-size: 13px;}
	#concept .ctn-1 .note ul { max-width: 180px;}
	#concept .ctn-2 h3 img.pc { display: none;}
	#concept .ctn-2 h3 img.sp { display: block; width: 72%; margin: 0 auto;}
	#concept .ctn-2 p { margin-bottom: 12px; font-size: 15px;}
	#concept .ctn-2 ul { width: 88%;}
}


#lineup { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; background: #ffffe8;}
#lineup .inner-sct { padding: 0px 0 100px;}
#lineup .ttl { margin-bottom: 40px; padding: 40px 0 80px; background: url('../img/common/bg/ttl.png') no-repeat 50% 100%;}
#lineup .ttl h2 { text-align: center;}
#lineup .ttl h2 img { width: 30%; max-width: 170px;}
#lineup figure { text-align: center;}
#lineup figure img.sp { display: none;}

#lineup .main { position: relative; width: 90%; max-width: 780px; margin: 0 auto;}
#lineup .main figure img { width: 100%;}
#lineup .main .btn { width: 100%; position: absolute; left: 0; bottom: 14%;}
#lineup .main .btn ul { width: 70%; margin: 0 0 0 auto; text-align: center;}
#lineup .main .btn ul li { padding: 4px 0;}
#lineup .main .btn ul li a { display: block; width: 100%; max-width: 180px; margin: 0 auto; padding: 6px 0; border-radius: 8px; background: #efba78;
 color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
}
#lineup .main .btn ul li form { position: relative; width: 100%; max-width: 180px; margin: 0 auto;}
#lineup .main .btn ul li form input[type="submit"] { position: relative; display: block; width: 100%; padding: 6px 0;
 border-radius: 8px; background: #efba78; border: none; z-index: 1;
 color: #fff; font-size: 12px; font-weight: 700; text-indent: 20px;
}
#lineup .main .btn ul li form svg { width: 18px; fill: #fff; position: absolute; left: 25px; top: 50%; transform: translateY(-50%); z-index: 2;}

#lineup .main .btn ul li span { position: relative; display: block; width: 100%; max-width: 180px;
 margin: 0 auto; padding: 6px 0; border-radius: 8px; background: #efba78; background: #a0a0a0;
 color: #fff; font-size: 13px; font-weight: 700; text-indent: 16px; text-decoration: none;
}
#lineup .main .btn ul li span svg { width: 18px; fill: #fff; position: absolute; left: 25px; top: 50%; transform: translateY(-50%); z-index: 2;}

#lineup .ctn-flex { display: flex; justify-content: space-between; width: 92%; margin: 0 auto; padding: 20px 0 70px;}
@media (max-width: 1281px) {
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#lineup .ttl { margin-bottom: 20px; padding: 4vw 0 10vw; background: url('../img/common/bg/ttl-sp.png') no-repeat 50% 100% / 100% auto;}
}
@media (max-width: 641px) {
	#lineup figure img.pc { display: none;}
	#lineup figure img.sp { display: block; margin: 0 auto;}

	#lineup .main .btn { bottom: 10%;}
	#lineup .main .btn ul { width: 100%; margin: 0 auto;}
}
@media (max-width: 481px) {
	#lineup .inner-sct { padding: 0px 0 60px;}
	#lineup .ttl { padding: 2.5vw 0 10vw;}

	#lineup .main .btn { bottom: 6%;}
}


#shop ul li.jel { display: none;}