@charset 'utf-8';

*
{
    box-sizing: border-box;  word-break: break-all !important;
}
html,
body
{
    width: 100%;  height: 100%;  min-height: 100%;
}
html
{
    font-size: 62.5%;
}
body
{
    font-family: 'Segoe UI',SegoeUI,'Microsoft JhengHei',微軟正黑體,'Helvetica Neue',Helvetica,Arial,sans-serif;  line-height: 1.4;  position: relative;  z-index: 0;  min-width: 320px;  margin: 0 auto;  color: #222;  background-color: #fff;
}
img
{
    max-width: 100%;  height: auto;
}
a:focus,
*:focus
{
    outline: none;
}

/*clearfix*/
.cf:before,
.cf:after
{
    display: table;  content: '';
}
.cf:after
{
    clear: both;
}



/* ====================
 common item
==================== */
.innerWrap
{
    position: relative;  z-index: 0;  width: 100%;  min-width: 320px;  max-width: 1024px;  margin: 0 auto;
}

.nobr
{
    white-space: nowrap !important;  word-break: normal !important;
}



/*==== animation ====*/
.animated
{
        -webkit-animation-duration: .8s;                animation-duration: .8s;  opacity: 0;          -webkit-animation-fill-mode: forwards;                  animation-fill-mode: forwards;
}
@-webkit-keyframes bounceInUp
{
    from,
    60%,
    75%,
    90%,
    to
    {
                      -webkit-animation-timing-function: cubic-bezier(.215, .610, .355, 1.000);                              animation-timing-function: cubic-bezier(.215, .610, .355, 1.000);
    }

    from
    {
                      -webkit-transform: translate3d(0, 3000px, 0);                              transform: translate3d(0, 3000px, 0);  opacity: 0;
    }

    60%
    {
                      -webkit-transform: translate3d(0, -20px, 0);                              transform: translate3d(0, -20px, 0);  opacity: 1;
    }

    75%
    {
                      -webkit-transform: translate3d(0, 10px, 0);                              transform: translate3d(0, 10px, 0);  opacity: 1;
    }

    90%
    {
                      -webkit-transform: translate3d(0, -5px, 0);                              transform: translate3d(0, -5px, 0);  opacity: 1;
    }

    to
    {
                      -webkit-transform: translate3d(0, 0, 0);                              transform: translate3d(0, 0, 0);  opacity: 1;
    }
}

@keyframes bounceInUp
{
    from,
    60%,
    75%,
    90%,
    to
    {
                      -webkit-animation-timing-function: cubic-bezier(.215, .610, .355, 1.000);                              animation-timing-function: cubic-bezier(.215, .610, .355, 1.000);
    }

    from
    {
                      -webkit-transform: translate3d(0, 3000px, 0);                              transform: translate3d(0, 3000px, 0);  opacity: 0;
    }

    60%
    {
                      -webkit-transform: translate3d(0, -20px, 0);                              transform: translate3d(0, -20px, 0);  opacity: 1;
    }

    75%
    {
                      -webkit-transform: translate3d(0, 10px, 0);                              transform: translate3d(0, 10px, 0);  opacity: 1;
    }

    90%
    {
                      -webkit-transform: translate3d(0, -5px, 0);                              transform: translate3d(0, -5px, 0);  opacity: 1;
    }

    to
    {
                      -webkit-transform: translate3d(0, 0, 0);                              transform: translate3d(0, 0, 0);  opacity: 1;
    }
}
.bounceInUp
{
              -webkit-animation-name: bounceInUp;                      animation-name: bounceInUp;
}



/* ====================
 header
==================== */
.header
{
    position: relative;  z-index: 0;  overflow: hidden;  padding-top: 712px;
}

.header:before,
.header:after
{
    position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  content: '';
}
.header:before
{
    z-index: -1;  background-image:    -moz-linear-gradient( 90deg, rgba(0,175,154,.63) 0%, rgba(4,231,204,.63) 100%);  background-image: -webkit-linear-gradient( 90deg, rgba(0,175,154,.63) 0%, rgba(4,231,204,.63) 100%);  background-image:     -ms-linear-gradient( 90deg, rgba(0,175,154,.63) 0%, rgba(4,231,204,.63) 100%);
}
.header:after
{
    z-index: -2;  background-image: url(../images/mainvisual-bg.jpg);  background-position: 50% 50%;  background-size: cover;
}
.header .mainvisual.innerWrap
{
    position: absolute;  top: 0;  left: 50%;  width: 100%;  height: 100%;  transform: translateX(-50%);
}
.header .item
{
    position: absolute;  z-index: 1;  display: block;
}
.header .item.chara
{
    top: 5%;  left: 0;  display: none;  width: 53%;  max-width: 540px;
}
.header .item.chara.bounceInUp
{
    display: block;
}
.header .item.logo
{
    top: 8%;  right: 3%;  width: 44.1%;  max-width: 451px;  margin: 0;
}
.header .item.text
{
    top: 43%;  right: 6.3%;  width: 37%;  max-width: 373px;
}

.header .discArea
{
    position: absolute;  z-index: 1;  bottom: 0;  left: 0;  width: 100%;  padding: 28px 0 25px;  text-align: center;  color: #fff;  background-image: url(../images/bg02.png);  background-repeat: repeat;  text-shadow: 0 0 5px #0778c8;
}

.header .discArea .discTextBox,
.header .discArea .discText p
{
    display: flex;
}
.header .discArea .discTextBox
{
    width: 80%;  margin: auto;
}
.header .discArea .discText
{
    font-size: 1.6rem;  width: 48%;  padding: 0 1%;  text-align: left;
}
.header .discArea .discText p
{
    margin: 0 0 1%;
}
.header .discArea .discText p > span
{
    float: left;
}
.header .discArea .discText p > span:first-child
{
    width: 8%;  min-width: 5.5em;
}
.header .discArea .discText p > span:last-child
{
    width: 92%;
}
.header .discArea .discText .discText-lang
{
    display: inline-block;  margin-bottom: 7px;
}
.header .discArea .cero
{
    display: inline-block;  width: 40px;  margin: 0 15px;  vertical-align: bottom;
}


@media (max-width: 1024px)
{
    .header
    {
        padding-top: 69%;
    }
    .header .discArea
    {
        padding: 2% 0;
    }
    .header .discArea .cero
    {
        width: 5%;
    }
}
@media (max-width: 760px)
{
    .header
    {
        padding-top: 74%;
    }
    .header .discArea .discText
    {
        font-size: 1.8rem;
    }
    .header .discArea .discTextBox
    {
        width: 90%;  margin: auto;
    }
}
@media (max-width: 640px)
{
    .header
    {
        padding-top: 95%;
    }
    .header .item.chara
    {
        top: 4%;  left: -2.8%;  width: 60%;
    }
    .header .item.logo
    {
        top: 10.5%;  right: 2.5%;  width: 44.7%;
    }
    .header .item.text
    {
        top: 36%;  width: 37.5%;
    }
    .header .discArea
    {
        padding: 3% 0;
    }
    .header .discArea .discTextBox
    {
        display: inline-block;  width: 100%;
    }
    .header .discArea .discText
    {
        font-size: 2.5rem;  display: block;  width: 90%;  margin: 0 auto;
    }
    .header .discArea .cero
    {
        position: absolute;  z-index: 0;  right: 15%;  bottom: 4%;  width: 6.25%;  margin: 0;
    }
}
@media (max-width: 320px)
{
    .header
    {
        padding-top: 100%;
    }
    .header .item.logo
    {
        top: 9.0%;
    }
    .header .item.text
    {
        top: 33%;  right: 5.8%;
    }
    .header .discArea .discText p span:first-child
    {
        min-width: 6.3em;
    }
}
/* ====================
 main
==================== */
main
{
    position: relative;  z-index: 0;  display: block;  padding: 3% 0 0;
}
main:before,
main:after
{
    position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  content: '';
}
main:before
{
    z-index: -2;  background-image:    -moz-linear-gradient( 90deg, rgb(224,224,224) 0%, rgb(255,255,255) 100%);  background-image: -webkit-linear-gradient( 90deg, rgb(224,224,224) 0%, rgb(255,255,255) 100%);  background-image:     -ms-linear-gradient( 90deg, rgb(224,224,224) 0%, rgb(255,255,255) 100%);
}
main:after
{
    z-index: -1;  background-image: url(../images/bg01.png);  background-repeat: repeat;
}
@media (max-width: 1024px)
{
    main:after
    {
        background-size: 100% auto;
    }
}

main h2
{
    max-width: 739px;  margin: 6% auto 6%;
}

.toNewsLinkWrap
{
    padding: 0 4% 0;
}
.toNewsLink
{
    font-size: 1.6rem;  font-weight: bold;  display: block;  width: 100%;  max-width: 700px;  margin: auto;  padding: 1% 0;  text-align: center;  color: #ff3131;  border: 1px solid #ff3131;  background-color: rgba(255,255,255,1);
}
.toNewsLink:hover
{
    text-decoration: none;
}
@media (max-width: 760px)
{
    .toNewsLinkWrap
    {
        padding: 4% 4% 0;
    }

    main h2
    {
        width: 90%;
    }
}
@media (max-width: 640px)
{
    .toNewsLink
    {
        font-size: 2.5rem;
    }
}

.storeBanner
{
    display:         flex;    display: -webkit-flex;          -webkit-align-items: center;                  align-items: center;  -webkit-justify-content: center;          justify-content: center;  width: 100%;  max-width: 700px;  margin: 0 auto;  padding: 3% 4% 0;
}

.storeBanner p
{
    width: 50%;  text-align: center;
}

.storeBanner p a:hover
{
    position: relative;  top: 1px;  left: 1px;
}

@media (max-width: 760px)
{
    .storeBanner
    {
        padding: 4% 4% 0;
    }
}

/*==== sonicArea ====*/

.SonicArea
{
    width: 90%;  margin: 0 auto;  margin-top: 3%;  border-radius: 20px;  background: rgba(78,200,179,.7);  box-shadow: 0 0 9px -2px rgba(0,0,0,.6);
}

.SonicArea .inner
{
    width: 94%;  margin: 0 auto;  padding: 4% 0;
}

.SonicArea .inner h2
{
    width: 60%;  max-width: 271px ;  margin: 0 auto;
}

.SonicArea .inner h3
{
    font-size: 26px;  width: 80%;  margin: 2% auto 1% auto;  padding: 1% 0;  text-align: center;  color: #fff;  background: #f9a91b;
}

.SonicArea .inner .ss
{
    display: block;  width: 80%;  max-width: 950px;  margin: 2% auto;
}

.SonicArea .inner .discArea
{
    width: 60%;  margin: auto;  background: #0778c8;
}

.SonicArea .inner .discArea .discTitle
{
    font-size: 1.6rem;  font-weight: bold;  display: block;  padding-top: 2%;  text-align: center;  color: #fff;
}
.SonicArea .inner .discText p
{
    display: flex;
}

.SonicArea .inner .discArea p.atte
{
    font-size: 14px;  margin: 0; padding: 0 2% 2% 2% ; padding-top: 0; color: #fff;
}

.SonicArea .inner .discText
{
    font-size: 1.6rem;  font-weight: bold;  width: 100%;  margin: auto;  padding: 2%;  text-align: left;  color: #fff;
}
.SonicArea .inner .discText p
{
    margin: 0 0 1%;
}


.SonicArea .inner .discText p > span
{
    float: left;
}
.SonicArea .inner .discText p > span:first-child
{
    width: 30%;  min-width: 5.5em;
}
.SonicArea .inner .discText p > span:last-child
{
    width: 70%;
}

.heading
{
    font-size: 36px;  font-weight: bold;  text-align: center;  color: #0778c8;
}

.heading02
{
    font-size: 26px;  font-weight: bold;  text-align: center;  color: #0778c8;
}

.text
{
    font-size: 20px;  font-weight: bold;  text-align: center;
}

@media (max-width: 800px)
{
    .SonicArea
    {
        margin-top: 4%;
    }
    .SonicArea .inner h3
    {
        font-size: 3vw;
    }

    .heading
    {
        font-size: 5vw;
    }
    .text
    {
        font-size: 2.6vw;
    }
    .heading02
    {
        font-size: 3.6vw;
    }
    .SonicArea .inner .discArea
    {
        width: 90%;
    }

    .SonicArea .inner .discArea p.atte
    {
        font-size: 2vw;
    }
    .SonicArea .inner .discArea .discTitle
    {
        font-size: 2.4vw;
    }
    .SonicArea .inner .discText
    {
        font-size: 2.4vw;
    }
}


/*==== jepackArea ====*/
.jePackArea
{
    max-width: 780px;  margin: 0 auto 3%;  text-align: center;  border-radius: 10px;  background: #08aadf;  background:    -moz-linear-gradient(top,  #08aadf 0%, #0778c8 100%);  background: -webkit-linear-gradient(top,  #08aadf 0%,#0778c8 100%);  background:         linear-gradient(to bottom,  #08aadf 0%,#0778c8 100%);  box-shadow: 0 0 6px 0 rgba(0,0,0,.54);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08aadf', endColorstr='#0778c8',GradientType=0 );
}

.jePackArea .jePackinnerWrap
{
    padding: 3.5% 1% 4.5%;  border-radius: 10px;  background: url(../images/img_packarea_bg.png) center center no-repeat;  background-size: auto 100%;
}
.jePackArea .jePackinnerWrap p
{
    margin-bottom: 2%;
}

@media (max-width: 800px)
{
    .jePackArea
    {
        width: 90%;
    }
    .jePackArea .jePackinnerWrap img
    {
        width: 80%;
    }
}


/*==== movieArea ====*/
.movieArea
{
    padding: 50px 0;
}
.movieArea .movieWrap
{
    width: 39%;  max-width: 390px;  margin: auto;
}
.movieArea .movie
{
    font-size: 0;  position: relative;  z-index: 0;  display: block;  overflow: hidden;  width: 100%;  border-radius: 4px;
}
.movieArea .movie:before
{
    position: absolute;  z-index: -1;  top: 0;  left: 0;  width: 100%;  height: 100%;  content: '';          -webkit-transition: opacity .3s;              -ms-transition: opacity .3s;                  transition: opacity .3s;  opacity: 0;  background-color: rgba(0,0,0,.4);  background-image: url(../images/movie-mark.png);  background-repeat: no-repeat;  background-position: 50% 50%;  background-size: 18%;
}
.movieArea .movie .movieThum
{
    position: absolute;  z-index: -2;  top: 0;  left: 0;  display: block;  width: 100%;          -webkit-transition: transform .3s;              -ms-transition: transform .3s;                  transition: transform .3s;
}
.movieArea .movie:hover .movieThum
{
              -webkit-transform: scale(1.1);                  -ms-transform: scale(1.1);                      transform: scale(1.1);
}
.movieArea .movie:hover:before
{
    opacity: 1;
}

.movieArea .movieTitle
{
    font-size: 1.4rem;  margin: 2% 0;  text-align: center;  color: #198677;
}
@media (max-width: 760px)
{
    .movieArea .movieTitle
    {
        font-size: 1.7rem;
    }
}
@media (max-width: 640px)
{
    .movieArea .movieWrap
    {
        width: 62.5%;
    }
    .movieArea .movieTitle
    {
        font-size: 2.4rem;
    }
}



/* ====================
 footer
==================== */
.footer .innerWrap
{
    padding: 20px;
}
.footer .logoWrap
{
    vertical-align: bottom;
}
.footer .logo
{
    display: inline-block;  margin: 0 10px 0 0;  vertical-align: bottom;
}
.footer .logo01
{
    width: 100px;
}
.footer .logo01 img
{
    width: 100%;
}
.footer .logo02
{
    width: 100px;
}
.footer .logo03
{
    width: 60px;
}
.footer .text
{
    font-size: 1.2rem;  margin: 5px 0;
}
.footer small
{
    font-size: 100%;
}
.footer .linksWrap .item
{
    display: inline-block;  margin: 5px 10px 5px 0;
}
.footer .linksWrap .item01
{
    width: 180px;
}
.footer .linksWrap .item02
{
    width: 150px;
}
.footer .linksWrap .item03
{
    width: 106px;
}
.footer .ps4Small
{
    height: 12px;
}

@media (max-width: 640px)
{
    .footer .innerWrap
    {
        padding: 4% 2%;
    }
    .footer .logo01
    {
        width: 80px;
    }
    .footer .logo02
    {
        width: 90px;
    }
    .footer .logo03
    {
        width: 53px;
    }
    .footer .text
    {
        font-size: 2rem;  margin: 2% 0;
    }
    .footer .linksWrap
    {
        margin-top: 3%;
    }
    .footer .linksWrap .item
    {
        height: 26px;  margin: 2% 4% 2% 0;
    }
    .footer .linksWrap .item img
    {
        width: auto;  height: 100%;
    }
    .footer .linksWrap .item01
    {
        width: auto;
    }
    .footer .linksWrap .item02
    {
        width: auto;
    }
    .footer .linksWrap .item03
    {
        width: auto;
    }
}



/* ====================
 error / news
==================== */
body.error .header
{
    padding-top: 540px;
}
body.error .header:before
{
    background-color: rgba(4,231,204,.63);  background-image: none;
}
body.error .header .item.chara
{
    display: block;
}
body.error .header .item.logo
{
    top: 19%;
}
body.error .header .discArea
{
    padding: 15px 0;
}
body.error main .innerWrap
{
    padding: 0 0 100px;
}
body.error main .upperText,
body.error main .text
{
    font-size: 24px;  padding: 0 2%;  text-align: center;  word-break: normal !important;  text-shadow: #fff 1px 0 1px, #fff -1px 0 1px, #fff 0 -1px 1px, #fff 0 1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff5cb 1px -1px 1px, #fff -1px -1px 1px;
}
body.error main .upperText.-color02
{
    color: #ff3131;
}
body.error main .text a
{
    color: #222;
}
body.error main .text a.link02
{
    font-weight: bold;  color: #198677;  text-underline-position: under;
}
body.error main .text a:hover
{
    text-decoration: none;
}
@media (max-width: 1024px)
{
    body.error .header
    {
        padding-top: 53%;
    }
}
@media (max-width: 980px)
{
    body.error main .upperText,
    body.error main .text
    {
        font-size: 2.4rem;
    }
}
@media (max-width: 760px)
{
    body.error main .innerWrap
    {
        padding: 40px 0;
    }
}
@media (max-width: 640px)
{
    body.error .header .item.chara
    {
        top: 5%;  left: 0;  width: 53%;
    }
    body.error main .upperText,
    body.error main .text
    {
        font-size: 3rem;
    }
}