@charset "UTF-8";
/* - - - - - - - - - - - - - - - - - - - - */
/*
Name:    mocom lp
Author・  H.Hata
Date:    2016.10.07
- - - - - - - - - -
css index
‐　Reset　／
‐　Base　／
‐　Contents　／
- - - - - - - - - -
@media screen and (max-width: 768px)
@media screen and (max-width: 480px)
*/
/* - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - */
/*
Reset
*/
/* - - - - - - - - - - - - - - - - - - - - */
* {
    margin: 0;
    padding: 0;
}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-weight: 100;
    line-height: 1.2;
    font-size: 14px;
    color: #222;
    vertical-align: baseline;
}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}
html{ overflow-y: scroll; position: relative; height: 100%;}
blockquote, q { quotes: none;}
table{
    width:100%;
    border-collapse: collapse;
    border-spacing:0;
}
img {
    max-width:100%;
    width: auto;
    height: auto;
    display: block;
}
a {text-decoration: none;}
a:hover{text-decoration: underline;}
a img:hover {
    filter: alpha(opacity=75);
    -moz-opacity:0.75;
    opacity:0.75;
}
ul,ol{ list-style: none;}
video {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    vertical-align: baseline;
}
/* - - - - - - - - - - - - - - - - - - - - */
/*
Base
*/
/* - - - - - - - - - - - - - - - - - - - - */
body{
    font-family: "ＭＳ ゴシック", "MS Gothic", Osaka-mono, monospace;
    position: relative;
    background-color: #eee;
}
#backgroundimage{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    max-width: 640px;
    width: 100%;
    height: auto;
    margin:auto;
}
a{}
a:hover{}
a:click{}

header {}
header h1 img{
    display: block;
    margin: 0 auto;
}
article {
}

footer {}
footer p{
    display: block;
    text-align: center;
}
/* creafix */
br.clear {
    display: block;
    margin: 0;
    padding: 0;
    clear: both;
    height: 0;
    border: none;
    visibility: hidden;
    font-size: 0.1em;
    line-height: 0;
    overflow: hidden;
}
/*:after {
  display:block;
  clear:both;
  height:0;
  line-height:0;
  visibility:hidden;
  content: ".";
  font-size: 0.1em;
}
{
  display:inline-block;
}
animation: pop-animation 3s ease-out 1s infinite;
*/
/* - - - - - - - - - - - - - - - - - - - - */
/*
Contents
*/
/* - - - - - - - - - - - - - - - - - - - - */
#wrap {
    position: relative;
    z-index: 100;
    max-width: 640px;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
    overflow: hidden;
}
#wrap_background{}
/* - - - - - - - - - - - - - - */
#sec01{
    position: relative;
}
#sec01 img{
}
#sec01 img.pagetitle{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: logoanimation 0.5s ease 1;
       -moz-animation: logoanimation 0.5s ease 1;
         -o-animation: logoanimation 0.5s ease 1;
            animation: logoanimation 0.5s ease 1;
}
/* - - - - - - - - - - - - - - */
#sec02,
#sec06 {
    position: relative;
}
#sec02 .button_wrap,
#sec06 .button_wrap{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 55%;
    z-index: 10;
}
#sec02 .button_ui,
#sec06 .button_ui{
    width: 90.15625%;
    margin: 0 auto 2%;
}
#sec02 a,
#sec06 a {
    display: block;
}
#sec02 .button_txt,
#sec06 .button_txt{
    width: 87.65625%;
    margin: 0 auto;
}
#sec02 .button_pop,
#sec06 .button_pop {
    width: 70.3125%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 80%;
    margin: auto;
    z-index: 11;
    -webkit-animation: bounce 2s infinite;
       -moz-animation: bounce 2s infinite;
         -o-animation: bounce 2s infinite;
            animation: bounce 2s infinite;
}
#sec02 a,
#sec06 a{
}
/* - - - - - - - - - - - - - - */
#sec03{}
/* - - - - - - - - - - - - - - */
#sec04{
    position: relative;
}
#sec04 .movie_button {
    display: block;
}
#sec04 .movie_button img {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    display: block;
}
/* - - - - - - - - - - - - - - */
#sec05{}
/* - - - - - - - - - - - - - - */
#sec06{}
/* - - - - - - - - - - - - - - */
#sec07{
    position: relative;
}
.permission {
    display: block;
    height: 2.3em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    color: #EC6298;
    text-align: center;
    font-weight: normal;
}
footer .copy {
    background-color: #FFF;
    color: #EC6298;
    padding: 20px 0;
}

/* - - - - - - - - - - - - - - */
/* animation */
/* - - - - - - - - - - - - - - */
@-webkit-keyframes bounce {
    0% { top: -2%;}
    50% { top: 2%;}
    100% { top: -2%;}
}
@-moz-keyframes bounce {
    0% { top: -2%;}
    50% { top: 2%;}
    100% { top: -2%;}
}
@-o-keyframes bounce {
    0% { top: -2%;}
    50% { top: 2%;}
    100% { top: -2%;}
}
@keyframes bounce {
    0% { top: -2%;}
    50% { top: 2%;}
    100% { top: -2%;}
}

@-webkit-keyframes logoanimation {
    0%   {
            width: 0%;
            transform: rotate(-40deg);
         }
    60%  {
            width: 100%;
            transform: rotate(0deg);
         }
    80%  { width: 90%; }
    100% { width: 100%; }
}
@-moz-keyframes logoanimation {
    0%   {
            width: 0%;
            transform: rotate(-40deg);
         }
    60%  {
            width: 100%;
            transform: rotate(0deg);
         }
    80%  { width: 90%; }
    100% { width: 100%; }
}
@-o-keyframes logoanimation {
    0%   {
            width: 0%;
            transform: rotate(-40deg);
         }
    60%  {
            width: 100%;
            transform: rotate(0deg);
         }
    80%  { width: 90%; }
    100% { width: 100%; }
}
@keyframes logoanimation {
    0%   {
            width: 0%;
            transform: rotate(-40deg);
         }
    60%  {
            width: 100%;
            transform: rotate(0deg);
         }
    80%  { width: 90%; }
    100% { width: 100%; }
}