/* css reset ============================= */
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-spacing: 0; border-collapse: collapse; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: 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 { font-variant: normal; border: 0; }
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; }
/* common ============================= */
* { box-sizing: border-box; }
body { font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; width: 100%; min-width: 100%; margin: 0; padding: 0; }
img { vertical-align: top; }
.inner { position: relative; width: 960px; margin: auto; }
.fadeUp { opacity: 0; -webkit-transform: translateY(70px); -ms-transform: translateY(70px); transform: translateY(70px); -webkit-transition-duration: 1s; transition-duration: 1s; }
/* fixed ============================= */
#anchor { display: none; position: fixed; top: 100px; right: 20px; z-index: 9999; }
#anchor:hover { opacity: 0.8; }
/* wrap ============================= */
#wrap { position: relative; min-width: 1020px; margin: auto; background-color: #254019; overflow: hidden; }
#main { max-width: 2000px; margin: 0 auto; background-color: #000; }
#fvVideo { position: absolute; top: 48px; left: 50%; width: 2000px; height: -webkit-calc(100vh - 186px); height: calc(100vh - 186px); min-height: 632px; margin-left: -1000px; overflow: hidden; }
#fvVideo #preImg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto; min-height: 719px; background-color: #000; }
#fvVideo.on #preImg { width: auto; height: 100%; }
#fvVideo video { position: absolute; top: 30%; left: 50%; transform: translate(-50%,-30%); width: 106%; height: auto; min-height: 719px; margin-left: 3%; background-color: #000; }
#fvVideo.on video { width: auto; height: 106%; }
#fvWrap { position: relative; left: 50%; width: 2000px; height: -webkit-calc(100vh - 186px); height: calc(100vh - 186px); min-height: 680px; margin-left: -1000px; background: url(../images/fv_bg01.png) center center no-repeat; background-size: cover; }
#fvWrap:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/fv_bg02.png) left top repeat; }
#fvWrap .fv { height: 100%; }
#fvWrap .fv:after { content: ""; position: absolute; bottom: -15px; padding-top: 38px; padding-left: 100%; background: url(../images/bg_bar.png) center bottom repeat-x; z-index: 1; }
#fvWrap .fv .fvBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/fv_bg04.png) center top no-repeat; }
#fvWrap .fv .fvBg:after { content: ""; position: absolute; bottom: 0; padding-top: 130px; padding-left: 100%; background: url(../images/fv_grass.png) center bottom no-repeat; }
#fvWrap .fv .fvBg #woodWrap { position: absolute; top: 144px; left: 0; right: 0; }
#fvWrap .fv .fvBg #woodWrap:before { content: ""; position: absolute; top: 0; left: 0; padding-top: 611px; padding-left: 357px; background: url(../images/fv_bg05.png) left top no-repeat; }
#fvWrap .fv .fvBg #woodWrap:after { content: ""; position: absolute; top: 0; right: 0; padding-top: 611px; padding-left: 357px; background: url(../images/fv_bg05.png) left top no-repeat; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }
#fvWrap .fv #headWrap { position: relative; top: 0; left: 509px; }
#fvWrap .fv #headWrap #headerLogo01 { position: absolute; top: 0; left: 0; }
#fvWrap .fv #headWrap #headerLogo02 { position: absolute; top: 12px; left: 867px; }
#fvWrap .fv #headWrap #headerDescription { position: absolute; top: 13px; left: 214px; font-size: 16px; font-weight: bold; }
#fvWrap .fv h2 { position: absolute; bottom: -webkit-calc(54.564533053515vh - 186px); bottom: calc(54.564533053515vh - 186px); left: 0; right: 0; text-align: center; }
#fvWrap .fv h2.on { bottom: 287px; }
#fvWrap .fv .chara01 { position: absolute; bottom: 126px; left: 0; right: 762px; text-align: center; }
#fvWrap .fv .chara01 img { width: -webkit-calc(66.211962224554vh - 186px); width: calc(66.211962224554vh - 186px); max-width: 445px; min-width: 388px; height: auto; }
#fvWrap .fv .chara02 { position: absolute; bottom: 141px; left: 745px; right: 0; text-align: center; }
#fvWrap .fv .chara02 img { width: -webkit-calc(63.903462749213vh - 186px); width: calc(63.903462749213vh - 186px); max-width: 423px; min-width: 367px; height: auto; }
#fvWrap .fv .notes { position: absolute; bottom: 12px; left: 830px; right: 0; height: 10px; text-align: center; }
#fvWrap .fv #scrollWrap { position: absolute; bottom: -147px; left: 0; right: 8px; width: 112px; margin: 0 auto; z-index: 2; }
#fvWrap .fv #scrollWrap .fvScroll01 { position: absolute; left: 18px; bottom: -webkit-calc(53.8300104931794vh - 186px); bottom: calc(53.8300104931794vh - 186px); width: 77px; height: 123px; margin: 0 auto; overflow: hidden; }
#fvWrap .fv #scrollWrap .fvScroll01.on { bottom: 280px; }
#fvWrap .fv #scrollWrap .fvScroll02 { position: absolute; bottom: 0; width: 112px; height: 176px; margin: 0 auto; overflow: hidden; }
#fvWrap .fv #leafWrap01 { position: absolute; bottom: 454px; width: 100%; z-index: 1000; }
#fvWrap .fv #leafWrap01:before { content: ""; position: absolute; top: 0; left: 0; width: 335px; height: 604px; background: url(../images/fv_leafL.png) left top no-repeat; }
#fvWrap .fv #leafWrap01:after { content: ""; position: absolute; top: 0; right: 0; width: 356px; height: 606px; background: url(../images/fv_leafR.png) right top no-repeat; }
#sec01 { position: relative; overflow: hidden; height: 1475px; background: url(../images/sec01_bg.png) center top no-repeat; }
#sec01 .title { padding-top: 179px; text-align: center; }
#sec01 .box01 { position: absolute; top: 284px; width: 100%; }
#sec01 .box01 #textWrap01 { position: absolute; top: 0px; left: 120px; }
#sec01 .box01 #textWrap01 .text { padding-top: 23px; }
#sec01 .box01 #ill01 { position: absolute; top: -53px; left: 504px; }
#sec01 .box01 #ill01.on { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
#sec01 .box02 { position: absolute; top: 611px; width: 100%; }
#sec01 .box02 #textWrap02 { position: absolute; top: 0px; left: 505px; }
#sec01 .box02 #textWrap02 .text { padding-top: 21px; padding-left: 1px; }
#sec01 .box02 #ill02 { position: absolute; top: -35px; left: -45px; }
#sec01 .box02 #ill02.on { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
#sec01 .box03 { position: absolute; top: 956px; width: 100%; }
#sec01 .box03 #textWrap03 { position: absolute; top: 0px; left: 0; right: 0; text-align: center; }
#sec01 .box03 #textWrap03 .text { padding-top: 22px; padding-right: 8px; }
#sec01 .box03 #ill03 { position: absolute; top: 210px; left: 104px; }
#sec01 .box03 #ill03.on { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); }
#sec02 { position: relative; overflow: hidden; height: 2041px; background: url(../images/sec02_bg.jpg) center top no-repeat; }
#sec02 .title { padding-top: 40px; text-align: center; }
#sec02 #flowerWrap { position: absolute; top: 541px; left: 50%; width: 2000px; margin-left: -1000px; }
#sec02:before { content: ""; position: absolute; top: 679px; left: 50%; margin-left: -1000px; padding-top: 130px; padding-left: 2000px; background: url(../images/sec02_grass.png) center top no-repeat; z-index: 1; }
#sec02 #flowerWrap #flower01 { position: absolute; top: 4px; left: 362px; width: 121px; height: 237px; overflow: hidden; }
#sec02 #flowerWrap #flower02 { position: absolute; top: 0px; right: 306px; width: 189px; height: 259px; overflow: hidden; }
#sec02 #flowerWrap:after { content: ""; position: absolute; top: 245px; padding-top: 38px; padding-left: 2000px; background: url(../images/bg_bar.png) center bottom repeat-x; z-index: 3; }
#sec02 #leafWrap02 { position: absolute; top: 268px; left: 50%; width: 2000px; margin-left: -1000px; z-index: 1000; }
#sec02 #leafWrap02:before { content: ""; position: absolute; top: 0; left: -320px; padding-top: 604px; padding-left: 320px; background: url(../images/sec02_leafL.png) left top no-repeat; -webkit-transition-duration: 300ms; -ms-transition-duration: 300ms; transition-duration: 300ms; }
#sec02 #leafWrap02:after { content: ""; position: absolute; top: 124px; right: -486px; padding-top: 486px; padding-left: 428px; background: url(../images/sec02_leafR.png) right top no-repeat; -webkit-transition-duration: 300ms; -ms-transition-duration: 300ms; transition-duration: 300ms; }
#sec02 #leafWrap02.on:before { left: 0; }
#sec02 #leafWrap02.on:after { right: 0; }
#sec02 #videoWrap { position: absolute; top: 244px; left: 0; right: 0; width: 688px; height: 415px; margin: 0 auto; background: url(../images/sec02_frame.png) center top no-repeat; z-index: 4; }
#sec02 #videoWrap video { display: block; position: relative; top: 50%; width: 652px; height: 378px; margin: 0 auto; background-color: #000; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
#sec02 .chara01 { position: absolute; top: 510px; left: -25px; z-index: 2; }
#sec02 .chara02 { position: absolute; top: 522px; right: -27px; z-index: 2; }
#sec02 .content { position: absolute; top: 809px; width: 100%; text-align: center; }
#sec02 .content #sarani { position: absolute; top: -39px; left: 0; right: 0; z-index: 4; }
#sec02 .content h4 { position: absolute; top: 66px; left: 76px; right: 0; }
#sec02 .content #aniWrap03 { position: absolute; top: 115px; right: -3px; }
#sec02 .content #aniWrap03 .aniText { position: relative; z-index: 3; }
#sec02 .content #aniWrap03 .ani { position: relative; top: -22px; left: 8px;  width: 158px; height: 158px; overflow: hidden; z-index: 2; }
#sec02 .content #mazuha { position: absolute; top: 630px; left: 4px; right: 0; z-index: 4; }
#sec02 .content #aniWrap04 { position: absolute; top: 658px; left: 4px; right: 0; }
#sec02 .content #aniWrap04 #crash { height: 377px; padding-top: 47px; background: url(../images/sec02_img02_bg.png) center top no-repeat; }
#sec02 .content #aniWrap04 #crash p { position: relative; z-index: 1;}
#sec02 .content .chara03 { position: absolute; top: 26px; right: -125px; }
#sec02 .content #dakara { position: absolute; top: 1133px; left: 6px; right: 0; }
#sec02 .content #pagetop { position: absolute; top: 1090px; right: -120px; }
#sec02 .content #pagetop:hover { opacity: 0.8; }
/* cvWrap ============================= */
#cvArea { height: 186px; background-color: #4f3a01; }
#cvWrap.on { position: fixed; bottom: 0; }
#cvWrap.on.fixed { position: absolute; top: 680px; }
#cvWrap { position: relative; width: 100%; min-width: 1020px; height: 186px; background: url(../images/cv_bg.png) center top repeat-x; z-index: 100; }
#cvWrap .cvButton { display: table; margin: 0 auto; padding-top: 10px; }
#cvWrap .text { position: absolute; top: 115px; left: 0; right: 0; text-align: center; }
#cvWrap .cvButton .play, #cvWrap .cvButton .login { display: table-cell; }
/* footer ============================= */
#footer { min-width: 1020px; overflow: hidden; padding: 50px 0 15px; background-color: #fff; }
#footer .openidArea { margin: 0 auto; width: 464px; height: 40px; padding-top: 8px; padding-left: 243px; background: url(../images/sns_bg.png) center top no-repeat; }
#footer .openidArea li { float: left; padding-right: 12px; }
#footer .openidArea li.sns4 { padding-right: 6px; }
#footer .openidArea li a { display: block; }
#footer .footLogo { margin-top: 50px; text-align: center; }
#footer .copyright { font-size: 11px; margin-top: 10px; text-align: center; }
/* animation ============================= */
#fvWrap .fv #scrollWrap .fvScroll01 img { -webkit-animation: scroll01 1500ms steps(12) infinite; animation: scroll01 1500ms steps(12) infinite; }
@-webkit-keyframes scroll01 { from { margin-top: 0px; } to { margin-top: -1476px; } }
@keyframes scroll01 { from { margin-top: 0px; } to { margin-top: -1476px; } }

#fvWrap .fv #scrollWrap .fvScroll02 img { -webkit-animation: scroll02 750ms steps(6) infinite; animation: scroll02 750ms steps(6) infinite; }
@-webkit-keyframes scroll02 { from { margin-top: 0px; } to { margin-top: -1056px; } }
@keyframes scroll02 { from { margin-top: 0px; } to { margin-top: -1056px; } }

#sec02 #flowerWrap #flower01 img { -webkit-animation: flower01 1500ms steps(8) infinite; animation: flower01 1500ms steps(8) infinite; }
@-webkit-keyframes flower01 { from { margin-top: 0px; } to { margin-top: -1896px; } }
@keyframes flower01 { from { margin-top: 0px; } to { margin-top: -1896px; } }

#sec02 #flowerWrap #flower02 img { -webkit-animation: flower02 1500ms steps(8) infinite; animation: flower02 1500ms steps(8) infinite; }
@-webkit-keyframes flower02 { from { margin-top: 0px; } to { margin-top: -2072px; } }
@keyframes flower02 { from { margin-top: 0px; } to { margin-top: -2072px; } }

#sec02 .content #aniWrap03 .ani img { -webkit-animation: ani01 1500ms steps(18) infinite; animation: ani01 1500ms steps(18) infinite; }
@-webkit-keyframes ani01 { from { margin-top: 0px; } to { margin-top: -2844px; } }
@keyframes ani01 { from { margin-top: 0px; } to { margin-top: -2844px; } }

#sec02 .content #sarani.on img { -webkit-animation: jump01 1500ms 2; animation: jump01 1500ms 2; }
#sec02 .content #mazuha.on img { -webkit-animation: jump01 1500ms 1; animation: jump01 1500ms 1; }
#sec02 .content #dakara.on img { -webkit-animation: jump01 1500ms 1; animation: jump01 1500ms 1; }
@-webkit-keyframes jump01 { 0% { margin-top: 0px; } 15% { margin-top: 10px; } 30% { margin-top: -20px; } 45% { margin-top: 10px; } 70% { margin-top: -4px; } 80% { margin-top: 0px; } 100% { margin-top: 0px; } }
@keyframes jump01 { 0% { margin-top: 0px; } 15% { margin-top: 10px; } 30% { margin-top: -20px; } 45% { margin-top: 10px; } 70% { margin-top: -4px; } 80% { margin-top: 0px; } 100% { margin-top: 0px; } }