@charset "UTF-8";
/* ### reset.scss ### */
/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html { color: #000; background: #FFF; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; vertical-align: top; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; font-variant: normal; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; *font-size: 100%; }

legend { color: #000; }

#yui3-css-stamp.cssreset { display: none; }

figure { margin: 0; }

/* ### mixin.scss ### */
/* ### setting.scss ### */
.header .headerCont, .mainVisual .mainVisualCont, .mainVisual .text2 p, .mainVisual .buttonArea ul, .contents, .main, .footer .footerCont { width: 1080px; margin-left: auto; margin-right: auto; }

@media screen and (max-width: 767px) { .header .headerCont, .mainVisual .mainVisualCont, .mainVisual .text2 p, .mainVisual .buttonArea ul, .contents, .main, .footer .footerCont { width: auto; } }
.header .headerCont, .mainVisual .mainVisualCont, .contents, .footer .footerCont, .boxColumn, .contactTable ul { *zoom: 1; }
.header .headerCont:after, .mainVisual .mainVisualCont:after, .contents:after, .footer .footerCont:after, .boxColumn:after, .contactTable ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

/* ### adjust.scss ### */
.center { text-align: center !important; }

.right { text-align: right !important; }

.left { text-align: left !important; }

.mt0 { margin-top: 0px !important; }

.mt1 { margin-top: 1px !important; }

.mt2 { margin-top: 2px !important; }

.mt3 { margin-top: 3px !important; }

.mt4 { margin-top: 4px !important; }

.mt5 { margin-top: 5px !important; }

.mt6 { margin-top: 6px !important; }

.mt7 { margin-top: 7px !important; }

.mt8 { margin-top: 8px !important; }

.mt9 { margin-top: 9px !important; }

.mt10 { margin-top: 10px !important; }

.mt15 { margin-top: 15px !important; }

.mt20 { margin-top: 20px !important; }

.mt25 { margin-top: 25px !important; }

.mt30 { margin-top: 30px !important; }

.mt35 { margin-top: 35px !important; }

.mt40 { margin-top: 40px !important; }

.mt45 { margin-top: 45px !important; }

.mt50 { margin-top: 50px !important; }

.ml0 { margin-left: 0px !important; }

.ml1 { margin-left: 1px !important; }

.ml2 { margin-left: 2px !important; }

.ml3 { margin-left: 3px !important; }

.ml4 { margin-left: 4px !important; }

.ml5 { margin-left: 5px !important; }

.ml6 { margin-left: 6px !important; }

.ml7 { margin-left: 7px !important; }

.ml8 { margin-left: 8px !important; }

.ml9 { margin-left: 9px !important; }

.ml10 { margin-left: 10px !important; }

.ml5 { margin-left: 5px !important; }

.ml10 { margin-left: 10px !important; }

.ml15 { margin-left: 15px !important; }

.ml20 { margin-left: 20px !important; }

.ml25 { margin-left: 25px !important; }

.ml30 { margin-left: 30px !important; }

.ml35 { margin-left: 35px !important; }

.ml40 { margin-left: 40px !important; }

.ml45 { margin-left: 45px !important; }

.ml50 { margin-left: 50px !important; }

.mb0 { margin-bottom: 0px !important; }

.mb1 { margin-bottom: 1px !important; }

.mb2 { margin-bottom: 2px !important; }

.mb3 { margin-bottom: 3px !important; }

.mb4 { margin-bottom: 4px !important; }

.mb5 { margin-bottom: 5px !important; }

.mb6 { margin-bottom: 6px !important; }

.mb7 { margin-bottom: 7px !important; }

.mb8 { margin-bottom: 8px !important; }

.mb9 { margin-bottom: 9px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb15 { margin-bottom: 15px !important; }

.mb20 { margin-bottom: 20px !important; }

.mb25 { margin-bottom: 25px !important; }

.mb30 { margin-bottom: 30px !important; }

.mb35 { margin-bottom: 35px !important; }

.mb40 { margin-bottom: 40px !important; }

.mb45 { margin-bottom: 45px !important; }

.mb50 { margin-bottom: 50px !important; }

.mr0 { margin-right: 0px !important; }

.mr1 { margin-right: 1px !important; }

.mr2 { margin-right: 2px !important; }

.mr3 { margin-right: 3px !important; }

.mr4 { margin-right: 4px !important; }

.mr5 { margin-right: 5px !important; }

.mr6 { margin-right: 6px !important; }

.mr7 { margin-right: 7px !important; }

.mr8 { margin-right: 8px !important; }

.mr9 { margin-right: 9px !important; }

.mr10 { margin-right: 10px !important; }

.mr15 { margin-right: 15px !important; }

.mr20 { margin-right: 20px !important; }

.mr25 { margin-right: 25px !important; }

.mr30 { margin-right: 30px !important; }

.mr35 { margin-right: 35px !important; }

.mr40 { margin-right: 40px !important; }

.mr45 { margin-right: 45px !important; }

.mr50 { margin-right: 50px !important; }

.pt0 { padding-top: 0px !important; }

.pt1 { padding-top: 1px !important; }

.pt2 { padding-top: 2px !important; }

.pt3 { padding-top: 3px !important; }

.pt4 { padding-top: 4px !important; }

.pt5 { padding-top: 5px !important; }

.pt6 { padding-top: 6px !important; }

.pt7 { padding-top: 7px !important; }

.pt8 { padding-top: 8px !important; }

.pt9 { padding-top: 9px !important; }

.pt10 { padding-top: 10px !important; }

.pt15 { padding-top: 15px !important; }

.pt20 { padding-top: 20px !important; }

.pt25 { padding-top: 25px !important; }

.pt30 { padding-top: 30px !important; }

.pt35 { padding-top: 35px !important; }

.pt40 { padding-top: 40px !important; }

.pt45 { padding-top: 45px !important; }

.pt50 { padding-top: 50px !important; }

.pl0 { padding-left: 0px !important; }

.pl1 { padding-left: 1px !important; }

.pl2 { padding-left: 2px !important; }

.pl3 { padding-left: 3px !important; }

.pl4 { padding-left: 4px !important; }

.pl5 { padding-left: 5px !important; }

.pl6 { padding-left: 6px !important; }

.pl7 { padding-left: 7px !important; }

.pl8 { padding-left: 8px !important; }

.pl9 { padding-left: 9px !important; }

.pl10 { padding-left: 10px !important; }

.pl15 { padding-left: 15px !important; }

.pl20 { padding-left: 20px !important; }

.pl25 { padding-left: 25px !important; }

.pl30 { padding-left: 30px !important; }

.pl35 { padding-left: 35px !important; }

.pl40 { padding-left: 40px !important; }

.pl45 { padding-left: 45px !important; }

.pl50 { padding-left: 50px !important; }

.pb0 { padding-bottom: 0px !important; }

.pb1 { padding-bottom: 1px !important; }

.pb2 { padding-bottom: 2px !important; }

.pb3 { padding-bottom: 3px !important; }

.pb4 { padding-bottom: 4px !important; }

.pb5 { padding-bottom: 5px !important; }

.pb6 { padding-bottom: 6px !important; }

.pb7 { padding-bottom: 7px !important; }

.pb8 { padding-bottom: 8px !important; }

.pb9 { padding-bottom: 9px !important; }

.pb10 { padding-bottom: 10px !important; }

.pb15 { padding-bottom: 15px !important; }

.pb20 { padding-bottom: 20px !important; }

.pb25 { padding-bottom: 25px !important; }

.pb30 { padding-bottom: 30px !important; }

.pb35 { padding-bottom: 35px !important; }

.pb40 { padding-bottom: 40px !important; }

.pb45 { padding-bottom: 45px !important; }

.pb50 { padding-bottom: 50px !important; }

.pr0 { padding-right: 0px !important; }

.pr1 { padding-right: 1px !important; }

.pr2 { padding-right: 2px !important; }

.pr3 { padding-right: 3px !important; }

.pr4 { padding-right: 4px !important; }

.pr5 { padding-right: 5px !important; }

.pr6 { padding-right: 6px !important; }

.pr7 { padding-right: 7px !important; }

.pr8 { padding-right: 8px !important; }

.pr9 { padding-right: 9px !important; }

.pr10 { padding-right: 10px !important; }

.pr15 { padding-right: 15px !important; }

.pr20 { padding-right: 20px !important; }

.pr25 { padding-right: 25px !important; }

.pr30 { padding-right: 30px !important; }

.pr35 { padding-right: 35px !important; }

.pr40 { padding-right: 40px !important; }

.pr45 { padding-right: 45px !important; }

.pr50 { padding-right: 50px !important; }

.w10 { width: 10px !important; }

.w20 { width: 20px !important; }

.w30 { width: 30px !important; }

.w40 { width: 40px !important; }

.w50 { width: 50px !important; }

.w60 { width: 60px !important; }

.w70 { width: 70px !important; }

.w80 { width: 80px !important; }

.w90 { width: 90px !important; }

.w100 { width: 100px !important; }

.w110 { width: 110px !important; }

.w120 { width: 120px !important; }

.w130 { width: 130px !important; }

.w140 { width: 140px !important; }

.w150 { width: 150px !important; }

.w160 { width: 160px !important; }

.w170 { width: 170px !important; }

.w180 { width: 180px !important; }

.w190 { width: 190px !important; }

.w200 { width: 200px !important; }

.w210 { width: 210px !important; }

.w220 { width: 220px !important; }

.w230 { width: 230px !important; }

.w240 { width: 240px !important; }

.w250 { width: 250px !important; }

.w260 { width: 260px !important; }

.w270 { width: 270px !important; }

.w280 { width: 280px !important; }

.w290 { width: 290px !important; }

.w300 { width: 300px !important; }

.w310 { width: 310px !important; }

.w320 { width: 320px !important; }

.w330 { width: 330px !important; }

.w340 { width: 340px !important; }

.w350 { width: 350px !important; }

.w360 { width: 360px !important; }

.w370 { width: 370px !important; }

.w380 { width: 380px !important; }

.w390 { width: 390px !important; }

.w400 { width: 400px !important; }

.w410 { width: 410px !important; }

.w420 { width: 420px !important; }

.w430 { width: 430px !important; }

.w440 { width: 440px !important; }

.w450 { width: 450px !important; }

.w460 { width: 460px !important; }

.w470 { width: 470px !important; }

.w480 { width: 480px !important; }

.w490 { width: 490px !important; }

.w500 { width: 500px !important; }

.w510 { width: 510px !important; }

.w520 { width: 520px !important; }

.w530 { width: 530px !important; }

.w540 { width: 540px !important; }

.w550 { width: 550px !important; }

.w560 { width: 560px !important; }

.w570 { width: 570px !important; }

.w580 { width: 580px !important; }

.w590 { width: 590px !important; }

.w600 { width: 600px !important; }

.w610 { width: 610px !important; }

.w620 { width: 620px !important; }

.w630 { width: 630px !important; }

.w640 { width: 640px !important; }

.w650 { width: 650px !important; }

.w660 { width: 660px !important; }

.w670 { width: 670px !important; }

.w680 { width: 680px !important; }

.w690 { width: 690px !important; }

.w700 { width: 700px !important; }

.w710 { width: 710px !important; }

.w720 { width: 720px !important; }

.w730 { width: 730px !important; }

.w740 { width: 740px !important; }

.w750 { width: 750px !important; }

.w760 { width: 760px !important; }

.w770 { width: 770px !important; }

.w780 { width: 780px !important; }

.w790 { width: 790px !important; }

.w800 { width: 800px !important; }

.w810 { width: 810px !important; }

.w820 { width: 820px !important; }

.w830 { width: 830px !important; }

.w840 { width: 840px !important; }

.w850 { width: 850px !important; }

.w860 { width: 860px !important; }

.w870 { width: 870px !important; }

.w880 { width: 880px !important; }

.w890 { width: 890px !important; }

.w900 { width: 900px !important; }

.w910 { width: 910px !important; }

.w920 { width: 920px !important; }

.w930 { width: 930px !important; }

.w940 { width: 940px !important; }

.w950 { width: 950px !important; }

.bdrNone { border: none !important; }

.bgNone { background: none !important; }

.top { vertical-align: top !important; }

.middle { vertical-align: middle !important; }

.bottom { vertical-align: bottom !important; }

.bold { font-weight: bold !important; }

.fnt80 { font-size: 80% !important; }

.fnt85 { font-size: 85% !important; }

.fnt90 { font-size: 90% !important; }

.fnt95 { font-size: 95% !important; }

.fnt100 { font-size: 100% !important; }

.fnt110 { font-size: 110% !important; }

.fnt120 { font-size: 120% !important; }

.fnt130 { font-size: 130% !important; }

.fnt140 { font-size: 140% !important; }

.floR { float: right !important; }

.floL { float: left !important; }

.floNone { float: none !important; }

.block { display: block !important; }

.inline { display: inline !important; }

.colorRed { color: #cc0000 !important; }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

body { font-size: 90%; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','MS Pゴシック','MS PGothic',sans-serif; color: #3c3c3c; line-height: 1.5; -webkit-text-size-adjust: 100%; }
@media screen and (max-width: 767px) { body { font-size: 14px; } }
@media screen and (min-width: 768px) { body { animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal; } }

main { display: block; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
a { color: #333; text-decoration: none; }
a:hover { text-decoration: underline; }

@media screen and (max-width: 767px) { img { max-width: 100%; height: auto; } }
.sp { display: none; }
@media screen and (max-width: 767px) { .sp { display: inline-block; } }

@media screen and (max-width: 767px) { .pc { display: none; } }
.header { position: relative; z-index: 2; background-color: #faeded; border-bottom: 1px solid #fa6868; }
.header .headerCont { position: relative; }
.header .headline { float: left; padding: 5px 0; }
@media screen and (max-width: 767px) { .header .headline { font-size: 10px; float: none; padding: 6px 10px; } }
.header .logo { background-color: #fff; position: absolute; left: 0; top: 0; padding: 10px 20px; border-radius: 0 0 8px 8px; }
@media screen and (min-width: 768px) { .header .logo { box-shadow: 3px 3px 3px -2px #999; -moz-box-shadow: 3px 3px 3px -2px #999; -webkit-box-shadow: 3px 3px 3px -2px #999; } }
@media screen and (max-width: 767px) { .header .logo { float: none; text-align: center; position: static; }
  .header .logo img { width: 140px; height: auto; } }

.header .navi { position: absolute; right: 0; top: 0; background-color: #fa6868; padding: 7px 20px; border-radius: 0 0 5px 5px; }
@media screen and (max-width: 767px) { .header .navi { display: none; } }
.header .navi li { float: left; }
.header .navi li:first-child { margin-right: 20px; }
.header .navi a { color: #fff; background: url(/img/icon_arrow.png) no-repeat 0 50%; padding: 0 0 0 15px; }
@media screen and (max-width: 767px) {
  .header .inner{position: relative;}
  .header .navi { float: none; text-align: center; position: static; border-radius: 0;padding:0;}
  .header .navi li { float: none;border-bottom: 1px solid #ff7f7f;  }
  .header .navi li:first-child{margin-right: 0;}
  .header .navi li a{display: block;padding:15px;background-position: 10px 50%;}
}

.contact .header .headline { text-align: center; float: none; }


.spMenu{position: absolute;right:10px;top:10px;z-index: 2;}
.spMenu .off{display: none;}


.mainVisual { background: url(/img/mainvisual.jpg) no-repeat top center; clear: both; position: relative; padding: 45px 0 70px; overflow: hidden; }
@media screen and (max-width: 767px) { .mainVisual { padding: 0; } }
.mainVisual .mainVisualCont { position: relative; }
@media screen and (max-width: 767px) { .mainVisual .logo { position: absolute; top: 30px; width: 230px; right: 0; left: 0; margin: auto; text-align: center; } }
.mainVisual .thumb { float: left; position: relative; padding-top: 34px; z-index: 2; }
.mainVisual .thumb .fuki { position: absolute; left: -60px; top: -40px; }
@media screen and (max-width: 767px) { .mainVisual .thumb { float: none; margin: 120px 0 20px; }
  .mainVisual .thumb .app { width: 230px; margin: 0 auto; }
  .mainVisual .thumb .fuki { left: 0; width: 140px; top: -20px; } }
.mainVisual .inner { text-align: center; width: 465px; float: right; }
.mainVisual .text1 { margin-bottom: 30px; }
@media screen and (max-width: 767px) { .mainVisual .text1 { margin-bottom: 5px; } }
.mainVisual .logo { margin-bottom: 30px; }
.mainVisual .text2 { padding: 20px 0; }
.mainVisual .text2 p { text-align: center; padding-left: 328px; }
@media screen and (max-width: 767px) { .mainVisual .text2 { position: static; }
  .mainVisual .text2 p { padding-left: 0; } }
.mainVisual .buttonArea { padding: 15px 0; background: rgba(250, 104, 104, 0.8); position: absolute; left: 0; bottom: 0; width: 100%; }
@media screen and (max-width: 767px) { .mainVisual .buttonArea { position: static; background-color: #fa6868; padding: 5px 20px; } }
.mainVisual .buttonArea ul { text-align: center; }
@media screen and (max-width: 767px) { .mainVisual .buttonArea ul { display: table-cell; } }
.mainVisual .buttonArea li { display: inline-block; padding: 0 5px; }
@media screen and (max-width: 767px) { .mainVisual .buttonArea li { display: table-cell; } }
@media screen and (max-width: 767px) { .mainVisual .buttonArea { position: static; }
  .mainVisual .buttonArea ul { padding-left: 0; } }

#js-move1, #js-move2, #js-move3, #js-move4, #js-move5 { opacity: 0; }

@media screen and (max-width: 767px) { .spMaintext { padding: 20px 10px; text-align: center; display: block; }
  .spMaintext img { max-width: 300px; } }
.main { margin: 100px auto; }
@media screen and (max-width: 767px) { .main { margin: 50px auto; } }

.footer { background-color: #faeded; padding: 20px 0; }
.footer .nav { float: left; }
@media screen and (max-width: 767px) { .footer .nav { text-align: center; float: none; } }
.footer .nav li { display: inline-block; margin-right: 15px; font-weight: bold; }
.footer .nav a { text-decoration: underline; }
.footer .nav a:hover { text-decoration: none; }
.footer .copyright { font-size: 12px; float: right; }
@media screen and (max-width: 767px) { .footer .copyright { text-align: center; float: none; } }

.social { position: relative; float: right; margin: 22px 0 0; }
.social ul li { float: left; }
.social ul li * { line-height: 1; vertical-align: middle; }
@media screen and (max-width: 767px) { .social { float: none; text-align: center; margin-bottom: 20px; }
  .social ul li { float: none; padding: 0 5px; display: inline-block; } }

/* ### contents.scss ### */
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); } }
@-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); } }
@-o-keyframes spin { 0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
.fuki { animation: fukiAnim 3s linear infinite; transform-origin: 50% 50%; }

@keyframes fukiAnim { 0% { transform: translateY(0); }
  25% { transform: translateY(-6px); }
  50% { transform: translateY(0); }
  100% { transform: translateY(0); } }
.headline2 { text-align: center; margin-bottom: 70px; }
@media screen and (max-width: 767px) { .headline2 { margin-bottom: 30px; } }

.boxColumn .inner { float: left; width: 340px; padding: 30px; border-radius: 15px; box-shadow: 3px 3px 3px -2px #e8d3d3; -moz-box-shadow: 3px 3px 3px -2px #e8d3d3; -webkit-box-shadow: 3px 3px 3px -2px #e8d3d3; opacity: 0; }
@media screen and (max-width: 767px) { .boxColumn .inner { width: 100%; padding: 20px; } }
.boxColumn .inner:not(:first-child) { margin-left: 30px; }
@media screen and (max-width: 767px) { .boxColumn .inner:not(:first-child) { margin: 15px 0 0; } }
.boxColumn .inner figure { text-align: center; margin-bottom: 20px; }
.boxColumn .inner h3 { font-weight: bold; font-size: 21px; text-align: center; margin-bottom: 20px; }
@media screen and (max-width: 767px) { .boxColumn .inner h3 { font-size: 18px; } }

.qualityArea { padding: 80px 0; background-color: #fff7f7; }
@media screen and (max-width: 767px) { .qualityArea { padding: 30px 10px; } }
.qualityArea .boxColumn .inner { background-color: #fff; padding-top: 10px; }
.qualityArea .boxColumn .en { color: #fa6868; font-weight: bold; font-size: 30px; text-align: center; font-family: 'Archivo Narrow', sans-serif; }
@media screen and (max-width: 767px) { .qualityArea .boxColumn .en { font-size: 20px; } }
.qualityArea .boxColumn .en span { font-size: 60px; }
@media screen and (max-width: 767px) { .qualityArea .boxColumn .en span { font-size: 40px; } }

.productArea { padding: 80px 0; background-color: #fa6868; position: relative; }
@media screen and (max-width: 767px) { .productArea { padding: 30px 10px; } }
.productArea:before, .productArea:after { content: ''; display: block; width: 100%; position: absolute; left: 0; height: 12px; }
@media screen and (max-width: 767px) { .productArea:before, .productArea:after { height: 6px; } }
.productArea:before { top: -12px; background: url(/img/waku_t.png) repeat-x top center; }
@media screen and (max-width: 767px) { .productArea:before { top: -5px; background-size: 19px auto; } }
.productArea:after { bottom: -12px; background: url(/img/waku_b.png) repeat-x top center; }
@media screen and (max-width: 767px) { .productArea:after { bottom: -5px; background-size: 19px auto; } }
.productArea .boxColumn .inner { background-color: #fff; }
.productArea .boxColumn h3 { color: #fa6868; }
.productArea figure { min-height: 129px; }
@media screen and (max-width: 767px) {.productArea figure{min-height: 0;}}
.voiceArea { padding: 80px 0; }
@media screen and (max-width: 767px) { .voiceArea { padding: 30px 10px; } }
.voiceArea .boxColumn .inner { background-color: #faeded; position: relative; }
.voiceArea .boxColumn figure { position: absolute; left: -20px; top: -30px; }
@media screen and (max-width: 767px) { .voiceArea .boxColumn figure { left: 5px; top: -10px; width: 60px; height: 60px; } }
.voiceArea .boxColumn h3 { font-size: 18px; }

.appArea { background-color: #fa6868; text-align: center; padding-bottom: 30px; position: relative; }
@media screen and (max-width: 767px) { .appArea { padding: 20px; } }
.appArea:before, .appArea:after { content: ''; display: block; width: 100%; position: absolute; left: 0; height: 12px; }
@media screen and (max-width: 767px) { .appArea:before, .appArea:after { height: 6px; } }
.appArea:before { top: -12px; background: url(/img/waku_t.png) repeat-x top center; }
@media screen and (max-width: 767px) { .appArea:before { top: -5px; background-size: 19px auto; } }
.appArea:after { bottom: -12px; background: url(/img/waku_b.png) repeat-x top center; }
@media screen and (max-width: 767px) { .appArea:after { bottom: -5px; background-size: 19px auto; } }
.appArea .inner { padding-top: 100px; background: url(/img/main.jpg) no-repeat top center fixed; background-size: cover; }
.appArea .logo { padding-top: 30px; }
@media screen and (max-width: 767px) { .appArea .logo { padding-top: 0; }
  .appArea .logo img { width: 200px; } }
.appArea .text2 { margin: 10px 0 30px; }
@media screen and (max-width: 767px) { .appArea .text2 { padding: 0 10px; } }
.appArea .buttonArea { background: rgba(250, 104, 104, 0.8); }
@media screen and (max-width: 767px) { .appArea .buttonArea { display: table; width: 100%; } }
.appArea .buttonArea li { display: inline-block; padding: 0 5px; }
@media screen and (max-width: 767px) { .appArea .buttonArea li { display: table-cell; } }

.fbArea { text-align: center; padding: 40px 0 30px; }
.fbArea figure { display: inline-block; vertical-align: top; }
@media screen and (max-width: 767px) { .fbArea figure { display: none; } }
.fbArea .inner { display: inline-block; text-align: center; vertical-align: middle; }
.fbArea .text { font-weight: bold; font-size: 20px; padding: 0 0 15px 30px; }
@media screen and (max-width: 767px) { .fbArea .text span { display: none; } }
.fbArea .fb-like { transform: scale(1.5); }
@media screen and (max-width: 767px) { .fbArea { padding: 25px 20px 20px; }
  .fbArea .text { padding-left: 0; font-size: 12px; } }

.buttonArea a:hover { opacity: 0.6; }

/* ### parts.scss ### */
.underHeadline { background-color: #fa6868; text-align: center; padding: 80px 0; line-height: 1; position: relative; }
@media screen and (max-width: 767px) { .underHeadline { padding: 30px; }
  .underHeadline img { width: 200px; height: auto; } }
.underHeadline:after { content: ''; display: block; width: 100%; position: absolute; left: 0; height: 12px; bottom: -12px; background: url(/img/waku_b.png) repeat-x top center; }
@media screen and (max-width: 767px) { .underHeadline:after { height: 6px; bottom: -5px; background-size: 19px auto; } }

.contactTable { width: 765px; margin: 0 auto 60px; font-size: 16px; }
@media screen and (max-width: 767px) { .contactTable { width: auto; margin: 0 0 20px; } }
.contactTable th { background-color: #faeded; padding: 18px; border-bottom: 1px solid #fff; width: 250px; vertical-align: top; }
@media screen and (max-width: 767px) { .contactTable th { display: block; width: 100%; margin-bottom: 10px; padding: 10px 18px; } }
.contactTable td { padding: 0 15px; vertical-align: middle; }
.contactTable td span { font-weight: bold; display: block; }
@media screen and (max-width: 767px) { .contactTable td { display: block; width: 100%; padding-bottom: 20px; } }
.contactTable .area { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; }
.contactTable .require { background-color: #fff; border-radius: 5px; color: #fa6868; padding: 5px 10px; font-size: 12px; float: right; }
.contactTable ul { margin: 15px 0; }
.contactTable ul li { padding-right: 20px; float: left; }
.contactTable ul input { margin-right: 5px; }
.contactTable .error { color: #fa6868; }

.ppBoxWrap { margin: 0 auto 20px; width: 765px; border: 5px solid #faeded; padding: 20px; height: 200px; overflow-y: scroll; }
.ppBoxWrap .spButton { display: none; }
@media screen and (max-width: 767px) { .ppBoxWrap { width: auto; overflow: visible; height: auto; margin: 0 10px 20px; padding: 10px; border: 3px solid #faeded; }
  .ppBoxWrap .inner { display: none; }
  .ppBoxWrap .spButton { padding: 10px; display: block; background-color: #faeded; text-align: center; font-weight: bold; margin-top: 15px; } }
.ppBoxWrap dt { font-weight: bold; margin-top: 20px; }
.ppBoxWrap .inquiry_box { margin-top: 20px; }
.ppBoxWrap .spBtnArea { display: none; }
@media screen and (max-width: 767px) { .ppBoxWrap .spBtnArea { display: block; } }

.agreeCheck { text-align: center; margin-bottom: 60px; }
@media screen and (max-width: 767px) { .agreeCheck { margin-bottom: 20px; } }
.agreeCheck input { margin-right: 10px; }

.formButton { text-align: center; }
.formButton li { background-color: #fa6868; color: #fff; width: 240px; margin: 0 10px; text-align: center; position: relative; display: inline-block; }
.formButton li:after { content: ''; display: block; width: 8px; height: 12px; position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; background: url(/img/icon_arrow.png) no-repeat 0 50%; background-size: 100% auto; }
.formButton li.back { background-color: #666; }
.formButton li.back:after { right: inherit; left: 10px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.formButton li input { color: #fff; font-size: 18px; border: none; outline: none; padding: 15px; background: none; display: block; width: 100%; cursor: pointer; }
.formButton li a { color: #fff; font-size: 18px; border: none; outline: none; padding: 15px; background: none; display: block; width: 100%; cursor: pointer; }
.formButton li a:hover { text-decoration: none; }
.formButton li:hover { opacity: 0.7; }

.boldText { font-weight: bold; margin-bottom: 45px; font-size: 30px; }

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */
.animated { animation-duration: 1s; animation-fill-mode: both; }

.animated:hover { animation-duration: 1s; animation-fill-mode: both; }

.animated.infinite { animation-iteration-count: infinite; }

.animated.hinge { animation-duration: 2s; }

.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { animation-duration: .75s; }

@keyframes bounce { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); }
  40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); }
  70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); }
  90% { transform: translate3d(0, -4px, 0); } }
.bounce { animation-name: bounce; transform-origin: center bottom; }

@keyframes flash { from, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0; } }
.flash { animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes pulse { from { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  to { transform: scale3d(1, 1, 1); } }
.pulse { animation-name: pulse; }

@keyframes rubberBand { from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); } }
.rubberBand { animation-name: rubberBand; }

@keyframes shake { from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } }
.shake { animation-name: shake; }

@keyframes headShake { 0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); } }
.headShake { animation-timing-function: ease-in-out; animation-name: headShake; }

@keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); }
  40% { transform: rotate3d(0, 0, 1, -10deg); }
  60% { transform: rotate3d(0, 0, 1, 5deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  to { transform: rotate3d(0, 0, 1, 0deg); } }
.swing { transform-origin: top center; animation-name: swing; }

@keyframes tada { from { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to { transform: scale3d(1, 1, 1); } }
.tada { animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes wobble { from { transform: none; }
  15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { transform: none; } }
.wobble { animation-name: wobble; }

@keyframes jello { from, 11.1%, to { transform: none; }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% { transform: skewX(-0.19531deg) skewY(-0.19531deg); } }
.jello { animation-name: jello; transform-origin: center; }

@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); } }
.bounceIn { animation-name: bounceIn; }

@keyframes bounceInDown { from, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0); }
  75% { transform: translate3d(0, -10px, 0); }
  90% { transform: translate3d(0, 5px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); } }
@-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0); }
  75% { transform: translate3d(0, -10px, 0); }
  90% { transform: translate3d(0, 5px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); } }
.bounceInDown { animation-name: bounceInDown; }

@keyframes bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-10px, 0, 0); }
  90% { transform: translate3d(5px, 0, 0); }
  to { transform: none; } }
.bounceInLeft { animation-name: bounceInLeft; }

@keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(3000px, 0, 0); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0); }
  75% { transform: translate3d(10px, 0, 0); }
  90% { transform: translate3d(-5px, 0, 0); }
  to { transform: none; } }
.bounceInRight { animation-name: bounceInRight; }

@keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(0, 3000px, 0); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0); }
  75% { transform: translate3d(0, 10px, 0); }
  90% { transform: translate3d(0, -5px, 0); }
  to { transform: translate3d(0, 0, 0); } }
.bounceInUp { animation-name: bounceInUp; }

@keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
  to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } }
.bounceOut { animation-name: bounceOut; }

@keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); }
  40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); }
  to { opacity: 0; transform: translate3d(0, 2000px, 0); } }
.bounceOutDown { animation-name: bounceOutDown; }

@keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); }
  to { opacity: 0; transform: translate3d(-2000px, 0, 0); } }
.bounceOutLeft { animation-name: bounceOutLeft; }

@keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); }
  to { opacity: 0; transform: translate3d(2000px, 0, 0); } }
.bounceOutRight { animation-name: bounceOutRight; }

@keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); }
  40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); }
  to { opacity: 0; transform: translate3d(0, -2000px, 0); } }
.bounceOutUp { animation-name: bounceOutUp; }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -2000px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDownBig { animation-name: fadeInDownBig; }

@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInLeftBig { animation-name: fadeInLeftBig; }

@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; }

@keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInRightBig { animation-name: fadeInRightBig; }

@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUpBig { animation-name: fadeInUpBig; }

@keyframes fadeOut { from { opacity: 1; }
  to { opacity: 0; } }
.fadeOut { animation-name: fadeOut; }

@keyframes fadeOutDown { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, 100%, 0); } }
.fadeOutDown { animation-name: fadeOutDown; }

@keyframes fadeOutDownBig { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, 2000px, 0); } }
.fadeOutDownBig { animation-name: fadeOutDownBig; }

@keyframes fadeOutLeft { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(-100%, 0, 0); } }
.fadeOutLeft { animation-name: fadeOutLeft; }

@keyframes fadeOutLeftBig { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(-2000px, 0, 0); } }
.fadeOutLeftBig { animation-name: fadeOutLeftBig; }

@keyframes fadeOutRight { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(100%, 0, 0); } }
.fadeOutRight { animation-name: fadeOutRight; }

@keyframes fadeOutRightBig { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(2000px, 0, 0); } }
.fadeOutRightBig { animation-name: fadeOutRightBig; }

@keyframes fadeOutUp { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, -100%, 0); } }
.fadeOutUp { animation-name: fadeOutUp; }

@keyframes fadeOutUpBig { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(0, -2000px, 0); } }
.fadeOutUpBig { animation-name: fadeOutUpBig; }

@keyframes flip { from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; }
  40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; }
  50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; }
  80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; }
  to { transform: perspective(400px); animation-timing-function: ease-in; } }
.animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip; }

@keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { transform: perspective(400px); } }
.flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX; }

@keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { transform: perspective(400px); } }
.flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInY; }

@keyframes flipOutX { from { transform: perspective(400px); }
  30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } }
.flipOutX { animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@keyframes flipOutY { from { transform: perspective(400px); }
  30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; }
  to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } }
.flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutY; }

@keyframes lightSpeedIn { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60% { transform: skewX(20deg); opacity: 1; }
  80% { transform: skewX(-5deg); opacity: 1; }
  to { transform: none; opacity: 1; } }
.lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; }

@keyframes lightSpeedOut { from { opacity: 1; }
  to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } }
.lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; }

@keyframes rotateIn { from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  to { transform-origin: center; transform: none; opacity: 1; } }
.rotateIn { animation-name: rotateIn; }

@keyframes rotateInDownLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
  to { transform-origin: left bottom; transform: none; opacity: 1; } }
.rotateInDownLeft { animation-name: rotateInDownLeft; }

@keyframes rotateInDownRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { transform-origin: right bottom; transform: none; opacity: 1; } }
.rotateInDownRight { animation-name: rotateInDownRight; }

@keyframes rotateInUpLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { transform-origin: left bottom; transform: none; opacity: 1; } }
.rotateInUpLeft { animation-name: rotateInUpLeft; }

@keyframes rotateInUpRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
  to { transform-origin: right bottom; transform: none; opacity: 1; } }
.rotateInUpRight { animation-name: rotateInUpRight; }

@keyframes rotateOut { from { transform-origin: center; opacity: 1; }
  to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } }
.rotateOut { animation-name: rotateOut; }

@keyframes rotateOutDownLeft { from { transform-origin: left bottom; opacity: 1; }
  to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } }
.rotateOutDownLeft { animation-name: rotateOutDownLeft; }

@keyframes rotateOutDownRight { from { transform-origin: right bottom; opacity: 1; }
  to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } }
.rotateOutDownRight { animation-name: rotateOutDownRight; }

@keyframes rotateOutUpLeft { from { transform-origin: left bottom; opacity: 1; }
  to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } }
.rotateOutUpLeft { animation-name: rotateOutUpLeft; }

@keyframes rotateOutUpRight { from { transform-origin: right bottom; opacity: 1; }
  to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } }
.rotateOutUpRight { animation-name: rotateOutUpRight; }

@keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; }
  to { transform: translate3d(0, 700px, 0); opacity: 0; } }
.hinge { animation-name: hinge; }

@keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; }
  50% { transform: rotate(-10deg); }
  70% { transform: rotate(3deg); }
  to { opacity: 1; transform: scale(1); } }
.jackInTheBox { animation-name: jackInTheBox; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to { opacity: 1; transform: none; } }
.rollIn { animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollOut { from { opacity: 1; }
  to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
.rollOut { animation-name: rollOut; }

@keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }
.zoomIn { animation-name: zoomIn; }

@keyframes zoomInDown { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInDown { animation-name: zoomInDown; }

@keyframes zoomInLeft { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInLeft { animation-name: zoomInLeft; }

@keyframes zoomInRight { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInRight { animation-name: zoomInRight; }

@keyframes zoomInUp { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInUp { animation-name: zoomInUp; }

@keyframes zoomOut { from { opacity: 1; }
  50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  to { opacity: 0; } }
.zoomOut { animation-name: zoomOut; }

@keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutDown { animation-name: zoomOutDown; }

@keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } }
.zoomOutLeft { animation-name: zoomOutLeft; }

@keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } }
.zoomOutRight { animation-name: zoomOutRight; }

@keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomOutUp { animation-name: zoomOutUp; }

@keyframes slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); } }
.slideInDown { animation-name: slideInDown; }

@keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); } }
.slideInLeft { animation-name: slideInLeft; }

@keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); } }
.slideInRight { animation-name: slideInRight; }

@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; }
  to { transform: translate3d(0, 0, 0); } }
.slideInUp { animation-name: slideInUp; }

@keyframes slideOutDown { from { transform: translate3d(0, 0, 0); }
  to { visibility: hidden; transform: translate3d(0, 100%, 0); } }
.slideOutDown { animation-name: slideOutDown; }

@keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); }
  to { visibility: hidden; transform: translate3d(-100%, 0, 0); } }
.slideOutLeft { animation-name: slideOutLeft; }

@keyframes slideOutRight { from { transform: translate3d(0, 0, 0); }
  to { visibility: hidden; transform: translate3d(100%, 0, 0); } }
.slideOutRight { animation-name: slideOutRight; }

@keyframes slideOutUp { from { transform: translate3d(0, 0, 0); }
  to { visibility: hidden; transform: translate3d(0, -100%, 0); } }
.slideOutUp { animation-name: slideOutUp; }

/*# sourceMappingURL=base.css.map */