@charset "UTF-8";
/* - - - - - - - - - - - - - - - - - - - - */
/*
Name:    mocom lp
Author・  H.Hata
Date:    2016.06.09
- - - - - - - - - -
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%;
    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: #ecc7ae;
}
#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;
*/
img {
    max-width: 100%;
    width: auto;
    height: auto;
}
/* - - - - - - - - - - - - - - - - - - - - */
/*
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;
    padding: 50%;
    margin: 0 0 40px 0;
}
#sec01 img{
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
#sec01 img.pagetitle{
    background-size: 27px 22px;
    /*animation: pop-animation 3s ease-out 1s infinite;*/
}
/* - - - - - - - - - - - - - - */
#sec02,
#sec07 {
    position: relative;
    padding: 0 20px 0 20px;
    margin: 0 auto 10%;
}
#sec07 {}

#sec02 img.pop,
#sec07 img.pop {
    width: 87.96875%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0%;
    margin: auto;
    -webkit-animation: bounce 2s infinite;
       -moz-animation: bounce 2s infinite;
         -o-animation: bounce 2s infinite;
            animation: bounce 2s infinite;
}
#sec02 a,
#sec07 a{
    display: block;
    margin: 0 0 10px 0;
    padding: 35% 0 0 0;
}
#sec02 img.txt,
#sec07 img.txt {
    display: block;
    margin: 0 auto 10px;
}
/* - - - - - - - - - - - - - - */
#sec03{
    position: relative;
}
#sec03 img.border{ margin: 0 auto 20px; }
#sec03 img.title{ width: 50%;margin: 0 auto 20px; }
#sec03 img.txt{ width: 77.96875%; margin: 0 auto 120px; }
#sec03 img.movie{ width: 87.5%; margin: 0 auto 40px; }

#sec03 img.lady_img01,
#sec03 img.lady_img02,
#sec03 img.lady_img03,
#sec03 img.lady_img04,
#sec03 img.lady_img05,
#sec03 img.lady_img06,
#sec03 img.lady_img07,
#sec03 img.lady_img08{
    position: absolute;
    max-width: 100%;
}
#sec03 img.lady_img01{ top:1%; left: 7%; width: 16.5625%; }
#sec03 img.lady_img02{ top:20%; left: 0; width: 15.78125%; }
#sec03 img.lady_img03{ top:45%; left: 18%; width: 15.625%; }
#sec03 img.lady_img04{ top:0.5%; right: 20%; width: 12.65625%; }
#sec03 img.lady_img05{ top:5%; right: 0; width: 18.59375%; }
#sec03 img.lady_img06{ top:24%; right: 5%; width: 12.65625%; }
#sec03 img.lady_img07{ top:37%; right: 0%; width: 10.3125%;}
#sec03 img.lady_img08{ top:43%; right: 26%; width: 10.46875%;}

/*#sec03 img.lady_img01{ animation: fuwafuwa 5s 0s infinite;}
#sec03 img.lady_img02{ animation: fuwafuwa 5s 1.5s infinite;}
#sec03 img.lady_img03{ animation: fuwafuwa 5s 3s infinite;}
#sec03 img.lady_img04{ animation: fuwafuwa 5s 4.5s infinite;}
#sec03 img.lady_img05{ animation: fuwafuwa 5s 4.5s infinite;}
#sec03 img.lady_img06{ animation: fuwafuwa 5s 3s infinite;}
#sec03 img.lady_img07{ animation: fuwafuwa 5s 1.5s infinite;}
#sec03 img.lady_img08{ animation: fuwafuwa 5s 0s infinite;}*/


.seishi01,
.seishi02,
.seishi03,
.voice01,
.voice02,
.voice03,
.voice04{
    z-index: 50;
    position: absolute;
}
.seishi01{ width: 20.46875%;top: 22%; left: -10%; }
.seishi02{ width: 15.9375%; top: 5%; left: 42%; }
.seishi03{ width: 19.21875%; top: 21%; left: 58%; }

.seishi01 {
    -webkit-animation: seishi01 3s 1s infinite;
       -moz-animation: seishi01 3s 1s infinite;
         -o-animation: seishi01 3s 1s infinite;
            animation: seishi01 3s 1s infinite;
}
.seishi02 {
    -webkit-animation: seishi02 3s 1.5s infinite;
       -moz-animation: seishi02 3s 1.5s infinite;
         -o-animation: seishi02 3s 1.5s infinite;
            animation: seishi02 3s 1.5s infinite;
}
.seishi03 {
    -webkit-animation: seishi03 3s 2s infinite;
       -moz-animation: seishi03 3s 2s infinite;
         -o-animation: seishi03 3s 2s infinite;
            animation: seishi03 3s 2s infinite;
}

.voice01{ width: 12.65625%; left: 6%; bottom: 34%; }
.voice02{ width: 12.1875%; left: 37%; bottom: 43%; }
.voice03{ width: 12.96875%; left: 34%; bottom: 15%; }
.voice04{ width: 9.375%; left: 21%; bottom: 9%; }

.voice01{
    -webkit-animation: voice02 2s infinite;
       -moz-animation: voice02 2s infinite;
         -o-animation: voice02 2s infinite;
            animation: voice02 2s infinite;
}
.voice02{
    -webkit-animation: voice01 2s infinite;
       -moz-animation: voice01 2s infinite;
         -o-animation: voice01 2s infinite;
            animation: voice01 2s infinite;
}
.voice03{
    -webkit-animation: voice03 2s infinite;
       -moz-animation: voice03 2s infinite;
         -o-animation: voice03 2s infinite;
            animation: voice03 2s infinite;
}
.voice04{
    -webkit-animation: voice04 2s infinite;
       -moz-animation: voice04 2s infinite;
         -o-animation: voice04 2s infinite;
            animation: voice04 2s infinite;
}
/* - - - - - - - - - - - - - - */
#sec04{}
#sec04 img {
    margin: 0 0 -9.42%  0;
}
/* - - - - - - - - - - - - - - */
#sec05{
    position: relative;
}
#sec05 img.title,
#sec05 img.txt,
#sec05 img.sample,
#sec05 img.phone{
    position: absolute;
}
#sec05 img.title{ width: 72.1875%; top: 10%; left: 0; }
#sec05 img.txt{ width: 58.125%; top: 32%; left: 3%; }
#sec05 img.sample{ width: 28.4375%; left: 13%; bottom: 8%; z-index: 50; }
#sec05 img.phone{ width: 49.0625%; left: 0; bottom: -1.7%; z-index: 49; }
#sec05 img.model{ width: 53.75%; float: right; margin: 0 0 -8% 0; }
/* - - - - - - - - - - - - - - */
#sec06{}
#sec06 img{
    position: relative;
    margin: -10% 0 0 0;
}
/* - - - - - - - - - - - - - - */
.permission {
    background-image: url(../img/footer_bg.gif);
    color: #FFF;
    font-size: 14px;
    padding: 30px 0;
    line-height: 1.5;
    font-weight: normal;
}
footer .copy {
    background-color: #FFF;
    color: #EC6298;
    padding: 20px 0;
}

/* - - - - - - - - - - - - - - */
/* animation */
/* - - - - - - - - - - - - - - */
/*@keyframes pop-animation {
    0% { transform: scale(1, 1);}
    40% { transform: scale(1, 1); }
    53% { transform: scale(0.6, 0.6) rotate(5deg); }
    55%{ transform: scale(1.2, 1.2) rotate(0deg); }
    60% { transform: scale(0.8, 0.8) rotate(-5deg); }
    65% { transform: scale(1.1, 1.1) rotate(2deg); }
    70% { transform: scale(1, 1) rotate(0deg); }
    80% { transform: scale(1, 1); }
    100% { transform: scale(1, 1); }
}*/
@-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 seishi01{
        0% { opacity:0;top: 22%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 22%;}
        90% { opacity:1; top: 23%;}
        100% { opacity:0; top: 23%;}
    }
    @-moz-keyframes seishi01{
        0% { opacity:0;top: 22%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 22%;}
        90% { opacity:1; top: 23%;}
        100% { opacity:0; top: 23%;}
    }
    @-o-keyframes seishi01{
        0% { opacity:0;top: 22%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 22%;}
        90% { opacity:1; top: 23%;}
        100% { opacity:0; top: 23%;}
    }
    @keyframes seishi01{
        0% { opacity:0;top: 22%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 22%;}
        90% { opacity:1; top: 23%;}
        100% { opacity:0; top: 23%;}
    }
/* - - - - - - - - - - - - - - */
    @-webkit-keyframes seishi02{
        0% { opacity:0;top: 5%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 5%;}
        90% { opacity:1; top: 6%;}
        100% { opacity:0; top: 6%;}
    }
    @-moz-keyframes seishi02{
        0% { opacity:0;top: 5%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 5%;}
        90% { opacity:1; top: 6%;}
        100% { opacity:0; top: 6%;}
    }
    @-o-keyframes seishi02{
        0% { opacity:0;top: 5%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 5%;}
        90% { opacity:1; top: 6%;}
        100% { opacity:0; top: 6%;}
    }
    @keyframes seishi02{
        0% { opacity:0;top: 5%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 5%;}
        90% { opacity:1; top: 6%;}
        100% { opacity:0; top: 6%;}
    }
/* - - - - - - - - - - - - - - */
    @-webkit-keyframes seishi03{
        0% { opacity:0;top: 21%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 21%;}
        90% { opacity:1; top: 22%;}
        100% { opacity:0; top: 22%;}
    }
    @-moz-keyframes seishi03{
        0% { opacity:0;top: 21%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 21%;}
        90% { opacity:1; top: 22%;}
        100% { opacity:0; top: 22%;}
    }
    @-o-keyframes seishi03{
        0% { opacity:0;top: 21%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 21%;}
        90% { opacity:1; top: 22%;}
        100% { opacity:0; top: 22%;}
    }
    @keyframes seishi03{
        0% { opacity:0;top: 21%;}
        10% { opacity:0;transform: scale(0.8, 0.8)}
        20% { opacity:1; transform: scale(1, 1);}
        30% { top: 21%;}
        90% { opacity:1; top: 22%;}
        100% { opacity:0; top: 22%;}
    }
/* - - - - - - - - - - - - - - */
    @-webkit-keyframes voice01{
        0% { opacity:1;}
        25% { opacity:1;}
        26% { opacity:0;}
        100% { opacity:0;}
    }
    @-moz-keyframes voice01{
        0% { opacity:1;}
        25% { opacity:1;}
        26% { opacity:0;}
        100% { opacity:0;}
    }
    @-o-keyframes voice01{
        0% { opacity:1;}
        25% { opacity:1;}
        26% { opacity:0;}
        100% { opacity:0;}
    }
    @keyframes voice01{
        0% { opacity:1;}
        25% { opacity:1;}
        26% { opacity:0;}
        100% { opacity:0;}
    }
/* - - - - - - - - - - - - - - */
    @-webkit-keyframes voice02{
        0% { opacity:0;}
        24% { opacity:0;}
        25% { opacity:1;}
        50% { opacity:1;}
        51% { opacity:0;}
        100% { opacity:0;}
    }
    @-moz-keyframes voice02{
        0% { opacity:0;}
        24% { opacity:0;}
        25% { opacity:1;}
        50% { opacity:1;}
        51% { opacity:0;}
        100% { opacity:0;}
    }
    @-o-keyframes voice02{
        0% { opacity:0;}
        24% { opacity:0;}
        25% { opacity:1;}
        50% { opacity:1;}
        51% { opacity:0;}
        100% { opacity:0;}
    }
    @keyframes voice02{
        0% { opacity:0;}
        24% { opacity:0;}
        25% { opacity:1;}
        50% { opacity:1;}
        51% { opacity:0;}
        100% { opacity:0;}
    }
/* - - - - - - - - - - - - - - */
    @-webkit-keyframes voice03{
        0% { opacity:0;}
        49% { opacity:0;}
        50% { opacity:1;}
        75% { opacity:1;}
        76% { opacity:0;}
        100% { opacity:0;}
    }
    @-moz-keyframes voice03{
        0% { opacity:0;}
        49% { opacity:0;}
        50% { opacity:1;}
        75% { opacity:1;}
        76% { opacity:0;}
        100% { opacity:0;}
    }
    @-o-keyframes voice03{
        0% { opacity:0;}
        49% { opacity:0;}
        50% { opacity:1;}
        75% { opacity:1;}
        76% { opacity:0;}
        100% { opacity:0;}
    }
    @keyframes voice03{
        0% { opacity:0;}
        49% { opacity:0;}
        50% { opacity:1;}
        75% { opacity:1;}
        76% { opacity:0;}
        100% { opacity:0;}
    }
/* - - - - - - - - - - - - - - */
    @-webkit-keyframes voice04{
        0% { opacity:0;}
        74% { opacity:0;}
        75% { opacity:1;}
        100% { opacity:1;}
    }
    @-moz-keyframes voice04{
        0% { opacity:0;}
        74% { opacity:0;}
        75% { opacity:1;}
        100% { opacity:1;}
    }
    @-o-keyframes voice04{
        0% { opacity:0;}
        74% { opacity:0;}
        75% { opacity:1;}
        100% { opacity:1;}
    }
    @keyframes voice04{
        0% { opacity:0;}
        74% { opacity:0;}
        75% { opacity:1;}
        100% { opacity:1;}
    }