@charset "utf-8";
body { color: #882f08;}
#hd .menu { background: #fffabf;}
#hd .menu ul.brand li.top:after { border-right: solid 15px #fffabf;}
.menu-trig div span { background: #42220f;}
.menu-cart a svg { fill: #42220f;}

.bogo-language-switcher .ja { display: none !important;}

.menu-btn { opacity: 0; transition: 0.4s linear 0.4s;}
/* loading
-------------------------------------------------- */
#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 100; transition: 1.2s linear; transition-delay: 0.8s;}
#loading .base { position: relative; width: 100%; height: 100%; background: rgba(255,255,255,1);}
#loading .loading-logo { position: relative; width: 100%; height: 100%; text-align: center; z-index: 1; opacity: 1; transition-delay: 1.2s;}
#loading .loading-logo svg { width: 50%; max-width: 320px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-55%); fill: #7e3807;}
#loading.start .loading-logo { opacity: 0.5;}
#loading .loading-logo { position: relative; width: 100%; height: 100%; text-align: center; z-index: 8; opacity: 1; transition: 1.6s; transition-delay: 2.8s;}
#loading .loading-logo img { width: 100%; max-width: 1280px;
 mask-image: url("/img/pixie/loading/mask.svg");
 mask-repeat: no-repeat;
 mask-position: 50% 45%;
 mask-size: 320px;
 /* Chrome, Safari用 */
 -webkit-mask-image: url("/img/pixie/loading/mask.svg");
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: 50% 45%;
 -webkit-mask-size: 320px;
}
#loading .loading-logo img.sp { display: none;}
#loading.start .loading-logo { opacity: 0;}

#loading .btn-skip { position: absolute; left: 0px; bottom: 40px; width: 100%; z-index: 10;}
#loading .btn-skip .inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px;}
#loading .btn-skip .skip { width: 80%; max-width: 210px; margin: 0 0 0 auto; padding: 10px 0;
 border: solid 1px #868686; border-radius: 50px; background: rgba(255,255,255,0.4); line-height: 1; text-align: center; cursor: pointer;
}
#loading .btn-skip .skip img { width: 50%; vertical-align: middle;}
#loading .transition { position: absolute; left: 0; width: 100%; top: 0%; transform: translateY(-100%);}
#loading .transition .space { width: 100%; height: 100vh; background: #fff;}
#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 .transition.transition-1 { z-index: 4; opacity: 0.5; transform: translateY(-20%);}
#loading.start .transition.transition-1 { animation: move-bottom1 5.0s cubic-bezier(0.85, 0, 0.15, 1) 0.8s forwards;}

#loading .transition.transition-2 { z-index: 5; opacity: 0.8; transform: translateY(-20%);}
#loading.start .transition.transition-2 { animation: move-bottom1 4.6s cubic-bezier(0.85, 0, 0.15, 1) 1.8s forwards;}

#loading .transition.transition-3 { z-index: 6;}
#loading.start .transition.transition-3 { animation: move-bottom2 2.8s cubic-bezier(0.85, 0, 0.15, 1) 4.2s forwards;}


#loading .image1,
#loading .image2 { position: absolute; top: 0; left: 50%; width: 100%; max-width: 1280px; height: 100%; transform: translate(-50%,0); opacity: 0; overflow: hidden;}


#loading .image1 { z-index: 2; transition: 1.6s ease; transition-delay: 1.8s;}
#loading .image1 img { min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 0%; transform: translate(-50%,0%);}
#loading .image1 img.sp { display: none;}
#loading.start .image1 { opacity: 1;}

#loading .image2 { z-index: 3; transition: 0.1s ease; transition-delay: 6.0s; opacity: 0;}
#loading .image2 img.pc-bg { width: 100%; position: absolute; left: 50%; top: 0%; transform: translate(-50%,0%); z-index: 1;}
#loading .image2 img.sp-bg { display: none; width: 100%; position: absolute; left: 50%; top: 0%; transform: translate(-50%,0%); z-index: 1;}
#loading .image2 .foot { position: absolute; z-index: 2; width: 14%; max-width: 168px; top: 188px; right: 28px;}
#loading .image2 .foot img { width: 100%; opacity: 0; transition: 0.2s linear;}
#loading .image2 .foot img:nth-child(1) { position: relative; transition-delay: 7.6s;}
#loading .image2 .foot img:nth-child(2) { position: absolute; right: 0; top: 0; transition-delay: 8.0s;}
#loading .image2 .foot img:nth-child(3) { position: absolute; right: 0; top: 0; transition-delay: 8.4s;}
#loading .image2 .foot img:nth-child(4) { position: absolute; right: 0; top: 0; transition-delay: 8.8s;}
#loading .image2 .foot img:nth-child(5) { position: absolute; right: 0; top: 0; transition-delay: 9.2s;}
#loading.start .image2 { opacity: 1;}
#loading.start .image2 .foot img { opacity: 1;}

#loading.fadeOut { opacity: 0;}

@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-bottom1 {
  0% { transform: translateY(-20%);}
 80% { transform: translateY(60%);}
100% { transform: translateY(100%);}
}

@keyframes move-bottom2 {
  0% { transform: translateY(-100%);}
 50% { transform: translateY(-20%);}
100% { transform: translateY(100%);}
}


@media (max-width: 1281px) {
	#loading .image2 .foot { top: 14.2vw; right: 2%;}
}
@media (max-width: 801px) {
	#loading .loading-logo svg { top: 40%; transform: translateY(-65%);}
	#loading .loading-logo img.pc { display: none;}
	#loading .loading-logo img.sp { display: block;
		 mask-image: url("/img/pixie/loading/mask.svg");
		 mask-repeat: no-repeat;
		 mask-position: 50% 45%;
		 mask-size: 230px;
		/* Chrome, Safari用 */
	 -webkit-mask-image: url("/img/pixie/loading/mask.svg");
	 -webkit-mask-repeat: no-repeat;
	 -webkit-mask-position: 50% 45%;
	 -webkit-mask-size: 230px;
	}

	#loading .btn-skip { bottom: 24vw;}
	#loading .btn-skip .skip { width: 90%; max-width: 80%; margin: 0 auto; padding: 6px 0;}
	#loading .btn-skip .skip img { width: 45%;}

	#loading .transition .space { height: 110vh;}
	#loading .image1 img { min-width: 100%; width: 100%; min-height: auto;}
	#loading .image1 img.pc { display: none;}
	#loading .image1 img.sp { display: block;}
	#loading .image2 .foot { width: 22%;top: 69vw; right: -2vw;}
	#loading .image2 img.pc-bg { display: none;}
	#loading .image2 img.sp-bg { display: block;}
}

@keyframes openNews {
   0% { width: 8px;}
 100% { width: calc( 100% - 90px);}
}
@keyframes openNewsSp {
   0% { width: 6px;}
 100% { width: calc( 100% - 40px);}
}
@keyframes hideSp {
   0% { width: 6px;}
  100%{ width: 0px; margin-right: 0;}
}

.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}

#kv { position: relative; z-index: 1; margin-bottom: -40px;}
#kv .inner-kv { position: relative; width: 100%;}
#kv .inner-kv:after { content: ''; display: block; width: 100%; height: 90px; background: url('/img/pixie/top/wave-202412.png') no-repeat 50% 100%;
 position: absolute; left: 0; bottom: -4px; z-index: 2;
}
#kv .ctn { position: absolute; width: 100%; z-index: 10;}
#kv .ctn div { position: relative; width: 100%; margin: 0 auto; padding-top: 180px;}
#kv .ctn div:after { content: ''; display: block; width: 100px; height: 150px;
 background: url('/img/awards/badge-no1-202412.png') no-repeat 50% 50% / 100% auto;
 position: absolute;
}
#kv.ctnR .ctn div { width: 48%; max-width: 610px; margin: 0 0 0 auto; padding-top: 100px;}
#kv.ctnR .ctn div:after { left: 5%; top: 30px;}
#kv .ctn h1 { /* margin-bottom: 12px; */ margin-bottom: 50px; text-align: center;}
#kv .ctn h1 img { position: relative; /* width: 28%; */ width: 55%; max-width: 300px; transition: 0.4s linear 0.2s; opacity: 0; transform: translateY(20px);}
#kv .ctn p { /* margin-bottom: 20px; */ text-align: center;}
#kv .ctn p img { position: relative; /* width: 60%; max-width: 640px; */ width: 85%; max-width: 480px; transition: 0.4s linear 0.5s; opacity: 0; transform: translateY(20px);}
#kv .sp-txt { display: none; width: 100%; position: absolute; left: 0; z-index: 3;}
#kv .sp-txt p { text-align: center;}
#kv .sp-txt p img { width: 80%;}
#kv .news { position: absolute; left: 0; /* bottom: 130px; */ bottom: 180px; width: 100%; z-index: 2;}
#kv .news .outer { width: 48%; max-width: 610px; margin: 0 auto;}
#kv.ctnR .news .outer { width: 48%; max-width: 610px; margin: 0 0 0 auto;}
#kv .news .inner { width: 94%; max-width: 500px; height: 100px; margin: 0 auto; overflow: hidden;}
#kv .news .inner div { position: relative; width: 8px; height: 100%; float: left; margin-right: 6px; /* background: #f5f1dc; */ background: #f5f1dc; overflow: hidden;
 transition: 0.4s ease-out; transform: translateX(500px);
}
#kv .news .inner div:nth-child(1) { transition-delay: 0.0s;}
#kv .news .inner div:nth-child(2) { transition-delay: 0.18s;}
#kv .news .inner div:nth-child(3) { transition-delay: 0.36s;}
#kv .news .inner div:nth-child(4) { transition-delay: 0.54s;}
#kv .news .inner div:nth-child(5) { transition-delay: 0.72s;}
#kv .news .inner div:nth-child(6) { transition-delay: 0.90s;}
#kv .news .inner div:nth-child(7) { transition-delay: 1.08s;}
#kv .news .inner div:last-child { margin-right: 0px;}
#kv .news ul li { display: none;}
#kv .news ul li:first-child { display: block;}
#kv .news ul li a { position: absolute; left: 0; display: block; width: 390px; height: 100px;
 color: #882f08; text-decoration: none; opacity: 0; transition: 0.2s linear 1.8s;
}
#kv .news ul li a dl { position: relative; width: 100%; padding-left: 110px;}
#kv .news ul li a dl dt { position: absolute; left: 0; top: 0; width: 100px;}
#kv .news ul li a dl dt img { width: 100%;}
#kv .news ul li a dl dd { padding-top: 1.2em; font-size: 12px; line-height: 1.4;}
#kv .news ul li a dl dd span.tit { display: block; font-weight: 700;}
#kv .news ul li a dl dd span.update{ display: block; font-size: 12px;}
#kv .news ul li a:hover dl { opacity: 0.8;}

#kv.show .ctn h1 img{ opacity: 1; transform: translateY(0px);}
#kv.show .ctn p img { opacity: 1; transform: translateY(0px);}
#kv.show .news .inner div { transform: translateX(0px);}
#kv.show .news .inner div { transform: translateX(0px);}
#kv.show .news .inner div.box { animation: 0.2s openNews ease 1.8s forwards;}
#kv.show .news ul li a { opacity: 1;}

#kv .note { position: absolute; left: 0; bottom: 100px; width: 100%; z-index: 2;}
#kv .note ul { max-width: 600px; margin: 0 0 0 auto; padding: 0 40px;}
#kv .note ul li { position: relative; padding-left: 1.2em; color: #636363; line-height: 1.4;}
#kv .note ul li:before { content: '※'; position: absolute; left: 0;}
#kv .note ul li span { display: block;}

#kv .bg-kv { width: 100%; position: relative; z-index: 1;}
#kv .bg-kv img { width: 100%;}
#kv .bg-kv img.sp { display: none;}
@media (max-width: 1281px) {
	#kv { margin-bottom: -3.2vw;}
	#kv .inner-kv:after { bottom: -10px; height: 9.6vw;}
	#kv .ctn div { padding-top: 10vw;}
	#kv.ctnR .ctn div { padding-top: 6.5vw;}
	#kv .ctn h1 { margin-bottom: 1.2vw;}
	#kv .news {/* bottom: 8.8vw;*/ bottom: 15.0vw;}
	#kv .note { bottom: 80px;}
	#kv .note ul { max-width: 550px; padding: 0 20px;}
}
@media (max-width: 801px) {
	#kv .inner-kv:after { height: 15vw; background: url('/img/pixie/top/wave-202412-sp.png') no-repeat 50% 100% / 100% auto;}
	#kv .ctn div { width: 100%; padding-top: 4vw; margin: 0 auto;}
	#kv.ctnR .ctn div { width: 100%; margin: 0 auto; padding-top: 4vw;}
	#kv .ctn h1 img { width: 62%;}
	#kv .ctn p { display: none;}
	#kv .sp-txt { display: block; bottom: 42vw;}
	#kv .news { bottom: 22vw;}
	#kv .news .outer { width: 100%; margin: 0 auto;}
	#kv.ctnR .news .outer { width: 100%; max-width: 100; margin: 0 auto;}
	#kv .note { bottom: 15vw;}
	#kv .note ul { max-width: 600px; margin: 0 auto;}
	#kv .note ul li span { display: inline-block;}
	#kv .bg-kv img.pc { display: none;}
	#kv .bg-kv img.sp { display: block;}
}
@media (max-width: 481px) {
	#kv { margin-bottom: -4.6vw;}
	#kv.ctnR .ctn div { padding-top: 2.6vw;}
	#kv .ctn div:after { width: 60px; height: 90px;}
	#kv.ctnR .ctn div:after { left: 10%; top: 10px;}

	#kv .ctn h1 img { width: 44%;}
	#kv .sp-txt { bottom: 46vw;}
	#kv .news { bottom: 25vw;}
	#kv .news .inner { height: 80px;}
	#kv .news .inner div { width: 6px; margin-right: 4px;}
	#kv .news ul li a { width: 320px; height: 80px;}
	#kv .news ul li a dl { padding-left: 90px;}
	#kv .news ul li a dl dt { width: 80px;}

	#kv .news ul li a dl dd { padding-top: 1.0em; font-size: 10px;}
	#kv .news ul li a dl dd span.update{ font-size: 10px;}

	#kv .note { bottom: 45px;}
	#kv .note ul { padding: 0 12px;}

	#kv.show .news .inner div:nth-child(3) { animation: 0.2s hideSp ease 1.8s forwards;}
	#kv.show .news .inner div:nth-child(4) { animation: 0.2s hideSp ease 1.8s forwards;}
	#kv.show .news .inner div.box { animation: 0.2s openNewsSp ease 1.8s forwards;}
}



#lead { position: relative; background: url('/img/pixie/top/bg/lead.png') no-repeat 50% 0; z-index: 2;}
#lead .inner-sct { width: 92%; margin: 0 auto; padding: 60px 0 20px;}
#lead h2 { margin-bottom: 30px; text-align: center;}
#lead h2 img{ width: 92%; max-width: 620px;}
#lead figure { position: relative; width: 100%; max-width: 540px; margin: 0 auto; text-align: center;}
#lead figure img { width: 100%; opacity: 0; opacity: 0; transition: 0.8s ease-in-out;}
#lead figure img:nth-child(1) { position: absolute; left: 0; top: 0; transform: translate(20px, 50%); transition-delay: 0.0s;}
#lead figure img:nth-child(2) { position: absolute; left: 0; top: 0; transform: translate(-10px, 50%); transition-delay: 0.4s;}
#lead figure img:nth-child(3) { position: absolute; left: 0; top: 0; transform: translate(-20px, 50%); transition-delay: 0.2s;}
#lead figure img:nth-child(4) { position: relative; left: 0; top: 0; transform: translate(20px, 50%); transition-delay: 0.6s;}
#lead p { text-align: center;}
#lead p img { width: 80%; max-width: 530px;}
#lead .note { margin: -10px auto 0;}
#lead .note ul { max-width: 220px; margin: 0 0 0 auto;}
#lead .code { width: 130px; position: absolute; right: 10%; top: -60px;}
#lead .code a { display: block;}
#lead .code a img { width: 100%;}
#lead .code a:hover { opacity: 0.8;}
#lead.show figure img:nth-child(1),
#lead.show figure img:nth-child(2),
#lead.show figure img:nth-child(3),
#lead.show figure img:nth-child(4) { transform: translate(0px, 0%); opacity: 1;}
@media (max-width: 801px) {
	#lead { background: url('/img/pixie/top/bg/lead-sp.png') no-repeat 50% 0 / 100% auto;}
	#lead .note { margin: 0px auto; padding-top: 10px;}
	#lead .note ul { max-width: 64%; margin: 0 auto;}
}
@media (max-width: 641px) {
	#lead .inner-sct { padding: 10vw 0 4vw;}
	#lead h2 { margin-bottom: 4vw;}
	#lead .code { width: 100px; right: 4%; top: -40px;}
}
@media (max-width: 481px) {
	#lead .inner-sct { overflow: hidden;}
	#lead .code { width: 110px; right: 2.5%; top: -40px;}
}


#award { background: #fff; border-bottom: solid 2px #fff;}
#award .award-tit { position: relative; padding: 15px 0; background: url('/img/pixie/top/bg/ttl.jpg') no-repeat 50% 0% / cover; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 4px #621a14; border-right: solid 4px #621a14;
 position: absolute; left: 50%; top: 50%; transform: translateY(-70%) rotate(45deg); transition: 0.4s linear;
}
#award .award-tit.open:after { transform: translateY(-30%) rotate(-135deg);}
#award .award-tit h2 { padding: 16px 0;
 color: #621a14; font-size: 32px; font-weight: 600; letter-spacing: 0.12rem; line-height: 1; text-align: center;
}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 50px; height: 40px; vertical-align: middle;
 background: url('/img/pixie/top/icn-award.png') no-repeat 50% 50% / 100% auto;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
#award .ctn { display: none;}
@media (max-width: 801px) {
	#award .award-tit:after { margin: 0px; left: auto; right: 5%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#award { border-width: 1px;}
	#award .award-tit { padding: 4px 0;}
	#award .award-tit:after { width: 15px; height: 15px; border-width: 2px;}
	#award .award-tit h2 { padding: 8px 0; font-size: 20px; letter-spacing: 0rem;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 30px; height: 24px;}
	#award .award-tit h2 span { margin: 0 12px;}
}



#concept { background: url('/img/pixie/top/bg/concept.jpg') no-repeat 50% 0%;}
#concept .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}

#concept .concept-tit { position: relative; display: block; padding: 24px 0; background: url('/img/pixie/top/bg/ttl.jpg') no-repeat 50% 0% / cover; cursor: pointer;}
#concept .concept-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 4px #621a14; border-right: solid 4px #621a14;
 position: absolute; left: 50%; top: 50%; transform: translateY(-70%) rotate(45deg); transition: 0.4s linear;
}
#concept .concept-tit.open:after { transform: translateY(-30%) rotate(-135deg);}
#concept .concept-tit h2 { position: relative; color: #621a14; font-size: 32px; font-size: 600; letter-spacing: 0.12rem; line-height: 1; text-align: center;}
#concept .concept-tit h2 svg { display: inline-block; width: 50px; margin-right: 20px; fill: #621a14; vertical-align: middle;}
#concept .concept-tit h2 span{ display: inline-block; vertical-align: middle;}

#concept .concept-ctn { display: none; width: 100%;}
#concept .concept-ctn .ctn { padding: 40px 0 60px;}
#concept .concept-ctn h3 { text-align: center;}
#concept .concept-ctn h3 img { position: relative; width: 65%; max-width: 420px;}
#concept .concept-ctn ul { padding-top: 20px; text-align: center;}
#concept .concept-ctn ul li { padding: 12px 0;}
#concept .concept-ctn ul li img { width: 65%; max-width: 350px;}
@media (max-width: 801px) {
	#concept .concept-tit:after { margin: 0px; left: auto; right: 5%;}
}
@media (max-width: 641px) {
	#concept { background: url('/img/pixie/top/bg/concept-sp.jpg') no-repeat 50% 100% / 100% auto;}
	#concept .concept-tit div { padding: 15px 0;}
	#concept .concept-tit div:after { width: 14px; height: 14px;}
}
@media (max-width: 481px) {
	#concept .concept-tit { padding: 4px 0;}
	#concept .concept-tit:after { width: 15px; height: 15px; border-width: 2px;}
	#concept .concept-tit h2 { padding: 5px 0; font-size: 20px; letter-spacing: 0rem;}
	#concept .concept-tit h2 svg { width: 28px; margin-right: 12px;}
	#concept .concept-ctn .ctn { padding: 20px 0 30px;}
	#concept .concept-ctn ul { padding-top: 12px;}
	#concept .concept-ctn ul li { padding: 6px 0;}
}




#step { position: relative; z-index: 2; padding-bottom: 60px; background: url('/img/pixie/top/bg/step.jpg') repeat-y 50% 0;}
#step .inner-sct { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding-top: 80px; background: url('/img/pixie/top/bg/step-top.png') no-repeat 50% 0;}
#step h2 { margin-top: -40px; margin-bottom: 20px; text-align: center;}
#step h2 img { width: 88%; max-width: 760px;}
#step h2 img.sp { display: none;}
#step p.read { font-size: 18px; font-weight: 700;line-height: 1.4; text-align: center;}
#step p.read sub { font-size: 10px; vertical-align: baseline;}
#step .ctn-pc { position: relative;}
#step .ctn-pc .box { position: absolute; left: 0; top: 0; width: 100%;}
#step .ctn-pc.fixed .box { position: fixed;}
#step .ctn-pc .box.show {}
#step .ctn-pc .box .inner-box { width: 100%; max-width: 1280px; margin: 0 auto; padding: 10px 0 40px; transition: 0.3s linear; opacity: 0;}
#step .ctn-pc .box.show .inner-box { opacity: 1;}
#step .ctn-pc .box ol { width: 100%; max-width: 400px; margin: 0 auto 8px; padding: 0 8px; font-size: 0px; text-align: right;}
#step .ctn-pc .box ol li { display: inline-block; margin: 0 4px; color: #ffc265; font-size: 16px; font-weight: 700;}
#step .ctn-pc .box ol li.on { color: #ff6e00;}
#step .ctn-pc .box figure { position: relative; width: 90%; max-width: 480px; margin: 0 auto 10px; padding-left: 30px; text-align: center;}
#step .ctn-pc .box figure img { width: 100%; height: auto; transform-origin: 0 100%;}
#step .ctn-pc .box figure img:nth-child(1) { position: absolute; left: 0; top: 0; z-index: 2;}
#step .ctn-pc .box figure img:nth-child(2) { position: relative; z-index: 1; transform: translate(0px,0px) rotate(2.5deg);}

#step .ctn-pc .box.show figure img.slideOut  { animation: 0.8s slideOut ease forwards;}
#step .ctn-pc .box.show figure img.slide { animation: 0.6s slideIn linear forwards;}

#step .ctn-pc .box .txt { width: 100%; max-width: 500px; margin: 0 auto; padding-left: 30px;}
#step .ctn-pc .box .txt p { margin-bottom: 10px; font-size: 18px; font-weight: 700; line-height: 1.4;}
#step .ctn-pc .box .txt p sub{ font-size: 12px; vertical-align: baseline;}
#step .ctn-pc .box .txt ul li { font-size: 10px; line-height: 1.4;}
#step .note { width: 90%; margin: 0 auto; }
#step .note ul { text-align: right;}
@keyframes slideOut {
   0% { transform: translate(0px,0px) rotate(0deg); opacity: 1;}
  60% { transform: translate(-150px,-40px) rotate(-15deg); opacity: 1;}
 100% { transform: translate(-150px,-40px) rotate(-20deg); opacity: 0;}
}
@keyframes slideIn {
	  0% { transform: translate(0px,0px) rotate(2.5deg);}
	100%{ transform: translate(0px,0px) rotate(0deg);}
}

@media (max-width: 801px) {
	#step { background: url('/img/pixie/top/bg/step-sp.jpg') repeat-y 50% 0 / 100% auto;}
	#step .inner-sct { padding-top: 40px; background: url('/img/pixie/top/bg/step-top-sp.jpg')no-repeat 50% 0 / 100% auto;}
	#step .ctn-pc .box {}
	#step .ctn-pc .box .inner-box { padding: 12vw 0;}
	#step p.read { margin-bottom: 4vw; font-size: 3.2vw;}
}
@media (max-width: 641px) {
	#step .inner-sct { padding-top: 26vw;}
	#step .ctn-pc .box .inner-box { padding: 8vw 0;}
	#step h2 { margin-top: -20vw;}
	#step h2 img.pc { display: none;}
	#step h2 img.sp { display: block; margin: 0 auto;}
	#step p.read { margin-bottom: 0px;}
	#step .note { width: 100%; max-width: 480px; padding: 0 40px;}
	#step .note ul { text-align: left;}
}
@media (max-width: 481px) {
	#step { padding-bottom: 40px;}
	#step .ctn-pc .box .inner-box { padding: 2vw 0 5vw; overflow: hidden;}
	#step h2 { margin-bottom: 12px;}
	#step p.read { font-size: 14px;}
	#step p.read sub { font-size: 10px;}
	#step .ctn-pc .box ol { padding: 0 20px;}
	#step .ctn-pc .box ol li { font-size: 13px;}
	#step .ctn-pc .box figure { padding-left: 15px;}
	#step .ctn-pc .box figure img { width: 94%;}
	#step .ctn-pc .box .txt { padding: 0 36px;}
	#step .ctn-pc .box .txt p { font-size: 14px;}
	#step .ctn-pc .box .txt p sub{ font-size: 10px; vertical-align: baseline;}
}


#care { overflow: hidden; background: url('/img/pixie/top/bg/care.jpg') no-repeat 50% 50% / cover;}
#care .pc-care { width: 100%; max-width: 1280px; margin: 0 auto; overflow: hidden;}
#care .sp-care { display: none;}
#care .area { overflow: hidden;}
#care .ctn { display: flex;}
#care .bloc { position: relative; display: flex; width: 100%; height: 100vh; justify-content: center;}
#care .bloc.bloc00 { padding-top: 80px; background: url('/img/pixie/top/bg/care-0.jpg') no-repeat 50% 50% / cover; z-index: 6;}
#care .bloc.bloc01 { z-index: 5;}
#care .bloc.bloc02 { z-index: 4;}
#care h2 { margin-bottom: 20px; text-align: center;}
#care h2 img { width: 100%; max-width: 700px;}
#care p { font-size: 21px; font-weight: 700; letter-spacing: 0.06rem; text-align: center;}
#care p img { width: 72%; max-width: 360px;}
#care .txt { position: absolute; width: 1280px; left: 12%; top: 12%; z-index: 3;}
#care .txt p { font-size: 26px; text-align: left;}
#care .bloc figure { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-40%);z-index: 2;}
#care .bloc.bloc01 figure { text-align: right;}
#care .bloc.bloc02 figure { text-align: left;}
#care .bloc figure img { width: 94%; max-width: 940px;}
#care .bloc .bg { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1;}
#care .bloc .bg img { width: 100%;}
/*
#care .bloc img.item { position: absolute; top: 50%; transform: translateY(-50%); min-width: 100%; max-width: 100%; max-height: 100%; z-index: 1;}
#care .bloc img.item01 { right: 0;}
#care .bloc img.item02 { left: 0;}
*/
@media (max-width: 1001px) {
	#care .txt { width: 1280px; left: 10%; top: 50%; transform: translateY(-240px);}
}
@media (max-width: 801px) {
	#care .pc-care { display: none;}
	#care .sp-care { display: block;}

	#care .bloc.bloc00 { padding-top: 80px; background: url('/img/pixie/top/bg/care-0-sp.jpg') no-repeat 50% 30% / 100%;}
	#care .bloc.bloc03 { z-index: 3;}
	#care .bloc.bloc04 { z-index: 2;}
	#care .bloc.bloc05 { z-index: 1;}
	#care .txt { width: 1280px; left: 20%; top: 50%; transform: translateY(-60vw);}
	#care .txt p { font-size: 24px;}
	#care img.item { min-width: 100%; max-width: 100%; width: 100%; max-height: none; height: auto;}
	#care img.item01 { right: auto;}
	#care img.item02 { left: auto;}
}
@media (max-width: 641px) {
	#care .bloc.bloc00 { padding-top: 10vw;}
	#care h2 img { width: 90%;}
}
@media (max-width: 481px) {
	#care p { font-size: 16px;}
	#care .txt { width: 1000px;}
	#care .txt p { font-size: 20px;}
}


#lineup { position: relative;}
#lineup .inner-sct { position: relative;}
#lineup .ctn { width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2;}
#lineup .ctn .ctn-inner { width: 35%; max-width: 360px; margin: 0 80px 0 auto;}
#lineup .ctn h2 { margin-bottom: 40px; text-align: center;}
#lineup .ctn h2 img { width: 100%;}
#lineup .ctn .btn { width: 90%; margin: 0 auto;}
#lineup .ctn .btn a { display: block; width: 100%; padding: 3px; background: #f1e6cb; border-radius: 30px;}
#lineup .ctn .btn a img { width: 100%; border: solid 1px #ad8d76; border-radius: 30px;}
#lineup .ctn .btn a img.sp { display: none;}
#lineup .ctn .btn a img:hover { opacity: 0.6;}
#lineup .bg { position: relative; width: 100%; z-index: 1;}
#lineup .bg img { width: 100%;}
#lineup .bg img.sp { display: none;}
@media (max-width: 1001px) {
	#lineup .ctn .ctn-inner { margin: 0 4% 0 auto;}
	#lineup .ctn h2 { margin-bottom: 3vw;}
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
	#lineup .ctn { top: auto; bottom: 30px; transform: translateY(0%);}
	#lineup .ctn h2 { display: none;}
	#lineup .ctn .ctn-inner { width: 72%; max-width: 360px; margin: 0 auto;}

	#lineup .bg img.pc { display: none;}
	#lineup .bg img.sp { display: block;}
}


#series { position: relative; background: url('/img/pixie/top/bg/series.jpg') no-repeat 50% 50% / cover;}
#series .inner { width: 96%; max-width: 1200px; margin: 0 auto; padding: 80px 0;}
#series h2 { margin-bottom: 30px; text-align: center;}
#series h2 img { width: 80%; max-width: 450px;}
#series h2 img.sp { display: none;}

#series .check h3 { margin-bottom: 20px; color: #621a14; font-size: 30px; text-align: center; text-shadow: 0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;}
#series .check ul.bnr { width: 84%; max-width: 720px; margin: 0 auto; font-size: 0;}
#series .check ul.bnr li { position: relative; display: inline-block; width: 50%; padding: 10px 0;}
#series .check ul.bnr li.sp-links { display: none;}
#series .check ul.bnr li a { display: block; width: 94%; margin: 0 auto;}
#series .check ul.bnr li a img { width: 100%;}
#series .check ul.bnr li a img.sp { display: none;}
#series .check ul.bnr li a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#series .inner { width: 100%; padding: 50px 0;}
	#series h2 img.pc { display: none;}
	#series h2 img.sp { display: block; margin: 0 auto;}
}
@media (max-width: 481px) {
	#series .inner { padding: 40px 0;}
	#series h2 { margin-bottom: 15px;}
	#series .check h3 { margin-bottom: 15px; font-size: 22px;}
	#series .check ul.bnr li { display: block; width: 100%; margin: 0px auto -8px; padding: 0px;}
	#series .check ul.bnr li.pc-links { display: none !important;}
	#series .check ul.bnr li.sp-links { display: block;}
	#series .check ul.bnr li:last-child { margin: 0px auto;}
}


#shop { position: relative; background: url('/img/pixie/bg-shop.jpg') no-repeat 50% 50% / cover;}
#shop .inner-sct { padding: 100px 0 120px;}
#shop .ctn { width: 72%; max-width: 580px; margin: 0 auto;}
#shop h2 { margin-bottom: 10px; text-align: center;}
#shop h2 img { width: 100%;}
#shop h2 img.sp { display: none;}
#shop p { margin-bottom: 40px; font-size: 15px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#shop .btn { width: 100%; max-width: 350px; margin: 0 auto;}
#shop .btn a { display: block; width: 100%; padding: 3px; background: #f1e6cb; border-radius: 50px;}
#shop .btn a img { width: 100%; border: solid 1px #ad8d76; border-radius: 50px;}
#shop .btn a img.sp { display: none;}
#shop .btn a img:hover { opacity: 0.6;}
@media (max-width: 801px) {
	#shop .inner-sct { padding: 60px 0;}
}
@media (max-width: 641px) {
	#shop h2 img.pc { display: none;}
	#shop h2 img.sp { display: block;}
}
@media (max-width: 481px) {
	#shop .inner-sct { padding: 40px 0;}
	#shop p { margin-bottom: 20px; font-size: 12px;}
	#shop .btn a img.pc { display: none;}
	#shop .btn a img.sp { display: block;}
}