@-webkit-keyframes bg
{
    0%
    {
        width: 0;
    }
    100%
    {
        width: 50%;
    }
}
@keyframes bg
{
    0%
    {
        width: 0;
    }
    100%
    {
        width: 50%;
    }
}
@-webkit-keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
@keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
@-webkit-keyframes fadeInBtn
{
    0%
    {
        bottom: -10px; 

        opacity: 0;
    }
    100%
    {
        bottom: 0; 

        opacity: 1;
    }
}
@keyframes fadeInBtn
{
    0%
    {
        bottom: -10px; 

        opacity: 0;
    }
    100%
    {
        bottom: 0; 

        opacity: 1;
    }
}
@-webkit-keyframes fadeInImage
{
    0%
    {
        top: -10px; 

        opacity: 0;
    }
    100%
    {
        top: 0; 

        opacity: 1;
    }
}
@keyframes fadeInImage
{
    0%
    {
        top: -10px; 

        opacity: 0;
    }
    100%
    {
        top: 0; 

        opacity: 1;
    }
}
@-webkit-keyframes moveTxt
{
    0%
    {
        -webkit-transform: translate(0, 1.1em);
                transform: translate(0, 1.1em);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);

        opacity: 1;
    }
}
@keyframes moveTxt
{
    0%
    {
        -webkit-transform: translate(0, 1.1em);
                transform: translate(0, 1.1em);

        opacity: 0;
    }
    100%
    {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);

        opacity: 1;
    }
}
.myStory .btn,
.myQuarity .btn,
.myReview .btn,
.my1Dyaybutton .btn
{
    position: relative;
    bottom: -10px;

    max-width: 210px;
    padding-bottom: 2px;

    opacity: 0;
}
@media only screen and (max-width: 600px)
{
    .myStory .btn,
    .myQuarity .btn,
    .myReview .btn,
    .my1Dyaybutton .btn
    {
        max-width: 140px;
    }
}
.ieUnder .myStory .btn,
.myStory .ieUnder .btn,
.ieUnder .myQuarity .btn,
.myQuarity .ieUnder .btn,
.ieUnder .myReview .btn,
.myReview .ieUnder .btn,
.ieUnder .my1Dyaybutton .btn,
.my1Dyaybutton .ieUnder .btn
{
    opacity: 1;
}
.myStory .active.btn,
.myQuarity .active.btn,
.myReview .active.btn,
.my1Dyaybutton .active.btn
{
    -webkit-animation: fadeInBtn;
            animation: fadeInBtn;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

#header
{
    position: absolute;
    z-index: 1000; 
    top: 0;
    right: 0;
    left: 0;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.ieUnder #header
{
    opacity: 1;
}
#header .siteTitle .type01
{
    display: inline;
}
#header .siteTitle .type02
{
    display: none;
}

#gNav ul a
{
    color: #fff;
}
@media only screen and (max-width: 1024px)
{
    #gNav ul a
    {
        color: #332e2b;
    }
}
#gNav ul a span::after
{
    background-color: #fff;
}

#contents
{
    overflow: hidden;
}

.myMainvisual
{
    position: relative;
    z-index: 10; 

    overflow: hidden;

    height: 100vh;
    min-height: 890px;
    max-height: 1400px;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual
    {
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 50px 0 80px;
    }
}
@media only screen and (max-width: 992px)
{
    .myMainvisual
    {
        padding: 50px 0;
    }
}
.myMainvisual .bgL,
.myMainvisual .bgR
{
    position: absolute;
    top: 0;
    bottom: 0;
}
.myMainvisual .bgL
{
    left: 0;

    -webkit-animation: bg;
            animation: bg;
    -webkit-animation-duration: .7s;
            animation-duration: .7s;
    -webkit-animation-timing-function: cubic-bezier(.8, 0, 0, 1);
            animation-timing-function: cubic-bezier(.8, 0, 0, 1);
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    background-color: #01acc6;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.ieUnder .myMainvisual .bgL
{
    width: 50%;
}
.myMainvisual .bgR
{
    left: 50%;

    -webkit-animation: bg;
            animation: bg;
    -webkit-animation-duration: .78s;
            animation-duration: .78s;
    -webkit-animation-timing-function: cubic-bezier(.8, 0, 0, 1);
            animation-timing-function: cubic-bezier(.8, 0, 0, 1);
    -webkit-animation-delay: .72s;
            animation-delay: .72s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    background-color: #2bb9cf;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.ieUnder .myMainvisual .bgR
{
    width: 50%;
}
.myMainvisual .inner
{
    position: relative;

    max-width: 1360px;
    height: 100vh;
    min-height: 890px;
    max-height: 1400px;
    margin: 0 auto;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual .inner
    {
        height: auto; 
        min-height: 0;
        max-height: none;
    }
}
.myMainvisual .bgImg01,
.myMainvisual .bgImg02,
.myMainvisual .bgImg03,
.myMainvisual .bgImg04
{
    position: absolute;
    z-index: 100; 

    opacity: 0;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual .bgImg01,
    .myMainvisual .bgImg02,
    .myMainvisual .bgImg03,
    .myMainvisual .bgImg04
    {
        display: none;
    }
}
.ieUnder .myMainvisual .bgImg01,
.ieUnder
    .myMainvisual .bgImg02,
.ieUnder
    .myMainvisual .bgImg03,
.ieUnder
    .myMainvisual .bgImg04
{
    opacity: 1;
}
.myMainvisual .bgImg01
{
    top: 14%;
    left: 0;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .bgImg02
{
    top: 44%;
    left: -14%;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .bgImg03
{
    top: 18%;
    right: -18%;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .bgImg04
{
    top: 64%;
    right: -6%;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .mainImg
{
    position: absolute;
    z-index: 100;
    top: 10%;
    right: 0;
    left: 0;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    text-align: center;

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual .mainImg
    {
        display: none;
    }
}
.ieUnder .myMainvisual .mainImg
{
    opacity: 1;
}
.myMainvisual .mainImgSp
{
    display: none;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual .mainImgSp
    {
        display: block;

        margin: -5% 0 0;
        padding: 10% 8% 0 8%; 

        -webkit-animation: fadeIn;
                animation: fadeIn;
        -webkit-animation-duration: 1s;
                animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-delay: 1s;
                animation-delay: 1s;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
        text-align: center;

        opacity: 0;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
@media only screen and (max-width: 600px)
{
    .myMainvisual .mainImgSp
    {
        display: block;

        padding: 5% 2% 0 2%;
    }
}
.myMainvisual .mainImgSp img
{
    width: 100%;
}
.myMainvisual .txt
{
    position: absolute;
    top: 66%;
    right: 0;
    left: 0;

    text-align: center;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual .txt
    {
        position: static;

        margin-bottom: 30px;
    }
}
.myMainvisual .txt .wrap
{
    font-size: 36px;
    font-size: 3.6rem;
    line-height: 1.1;

    position: relative;
    z-index: 1000;

    overflow: hidden;

    width: 100%;
    height: 1.1em;
    margin-bottom: 15px;

    color: #fff;
}
@media only screen and (max-width: 992px)
{
    .myMainvisual .txt .wrap
    {
        font-size: 20px;
        font-size: 2rem;
    }
}
.myMainvisual .txt .wrap span
{
    display: inline-block;

    -webkit-transform: translate(0, 1em);
        -ms-transform: translate(0, 1em);
            transform: translate(0, 1em);

    opacity: 0;
}
.ieUnder .myMainvisual .txt .wrap span
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); 

    opacity: 1;
}
.myMainvisual .txt .wrap.move span:nth-child(1)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .05s;
            animation-delay: .05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(2)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .1s;
            animation-delay: .1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(3)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .15s;
            animation-delay: .15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(4)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .2s;
            animation-delay: .2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(5)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .25s;
            animation-delay: .25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(6)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .3s;
            animation-delay: .3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(7)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .35s;
            animation-delay: .35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(8)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .4s;
            animation-delay: .4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(9)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .45s;
            animation-delay: .45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(10)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .5s;
            animation-delay: .5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(11)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .55s;
            animation-delay: .55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(12)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .6s;
            animation-delay: .6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(13)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .65s;
            animation-delay: .65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(14)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .7s;
            animation-delay: .7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(15)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .75s;
            animation-delay: .75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(16)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .8s;
            animation-delay: .8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(17)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .85s;
            animation-delay: .85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(18)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .9s;
            animation-delay: .9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(19)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: .95s;
            animation-delay: .95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .txt .wrap.move span:nth-child(20)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMainvisual .comingTxt
{
    font-size: 28px;
    font-size: 2.8rem; 

    position: absolute;
    top: calc(70% + 80px);
    right: 0;
    left: 0;

    width: 300px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    text-align: center;

    opacity: 0;
    color: #fff;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual .comingTxt
    {
        position: static;

        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 600px)
{
    .myMainvisual .comingTxt
    {
        margin-bottom: 0;
    }
}
.ieUnder .myMainvisual .comingTxt
{
    opacity: 1;
}
@media only screen and (max-width: 600px)
{
    .myMainvisual .comingTxt
    {
        font-size: 18px;
        font-size: 1.8rem;
    }
}
.myMainvisual .comingTxt .num
{
    font-family: 'jins_nextmedium';
    font-weight: normal;
}
.myMainvisual .comingTxt .small
{
    font-size: 80%;
}
.myMainvisual .btn
{
    position: absolute;
    top: calc(70% + 128px);
    right: 0;
    left: 0;

    width: 300px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;

    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2.2s;
            animation-delay: 2.2s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    text-align: center; 

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 1300px)
{
    .myMainvisual .btn
    {
        position: static;
    }
}
@media only screen and (max-width: 992px)
{
    .myMainvisual .btn
    {
        width: auto;
        max-width: 280px;
    }
}
.ieUnder .myMainvisual .btn
{
    opacity: 1;
}
.myMainvisual .btn .modBtn01
{
    border-color: #fff;
}
.myMainvisual .btn .modBtn01:hover
{
    color: #00aec7; 
    background-color: rgba(255, 255, 255, .8);
}
.myMainvisual .btn .modBtn01:hover:before
{
    display: none;
}
.myMainvisual .btn .modBtn01:hover:after
{
    background-position: 0 0;
}
.myMainvisual.coming .btn
{
    top: calc(70% + 150px);
}

.myMoremoisture
{
    position: relative;

    height: 86vh;
    max-height: 1000px; 
    padding: 10% 0 20%;
}
@media only screen and (max-width: 992px)
{
    .myMoremoisture
    {
        height: auto;
        max-height: none;
        padding: 50px 0 0;
    }
}
.myMoremoisture .container
{
    position: relative;
}
@media only screen and (max-width: 992px)
{
    .myMoremoisture .container
    {
        position: static;
    }
}
.myMoremoisture .inner
{
    position: relative;
    z-index: 10;
}
.myMoremoisture .bg
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 110%;
    max-width: 1402px;
    margin: auto auto auto -55%;
}
.myMoremoisture .bg img
{
    width: 100%;
}
@media only screen and (max-width: 992px)
{
    .myMoremoisture .bg
    {
        position: static;

        width: auto;
        height: auto;
        margin: -15% -30px 0;
    }
    .myMoremoisture .bg img
    {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

.myMoveTxt
{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.5;

    margin-bottom: 40px;

    opacity: 0;
}
@media only screen and (max-width: 600px)
{
    .myMoveTxt
    {
        font-size: 13px;
        font-size: 1.3rem; 
        line-height: 1.8;

        margin-bottom: 30px;
    }
}
.ieUnder .myMoveTxt
{
    opacity: 1;
}
.myMoveTxt.active
{
    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt span
{
    display: block;
}
@media only screen and (max-width: 992px)
{
    .myMoveTxt span
    {
        display: inline;
    }
}

.myMoveTxt02
{
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.1;

    position: relative;
    z-index: 1000;

    overflow: hidden;

    width: 100%;
    height: 1.1em;
    margin-bottom: 10px;

    color: #00aec7;
}
@media only screen and (max-width: 992px)
{
    .myMoveTxt02
    {
        font-size: 18px;
        font-size: 1.8rem;
    }
}
@media only screen and (max-width: 600px)
{
    .myMoveTxt02
    {
        font-size: 13px;
        font-size: 1.3rem;
    }
}
.myMoveTxt02 span
{
    display: inline-block;

    -webkit-transform: translate(0, 1.1em);
        -ms-transform: translate(0, 1.1em);
            transform: translate(0, 1.1em); 

    opacity: 0;
}
.ieUnder .myMoveTxt02 span
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); 

    opacity: 1;
}
.myMoveTxt02.active span:nth-child(1)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .05s;
            animation-delay: .05s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(2)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .1s;
            animation-delay: .1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(3)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .15s;
            animation-delay: .15s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(4)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .2s;
            animation-delay: .2s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(5)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .25s;
            animation-delay: .25s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(6)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .3s;
            animation-delay: .3s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(7)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .35s;
            animation-delay: .35s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(8)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .4s;
            animation-delay: .4s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(9)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .45s;
            animation-delay: .45s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(10)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;
            animation-delay: .5s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(11)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .55s;
            animation-delay: .55s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(12)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .6s;
            animation-delay: .6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(13)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .65s;
            animation-delay: .65s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(14)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .7s;
            animation-delay: .7s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(15)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .75s;
            animation-delay: .75s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(16)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .8s;
            animation-delay: .8s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(17)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .85s;
            animation-delay: .85s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(18)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .9s;
            animation-delay: .9s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(19)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: .95s;
            animation-delay: .95s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myMoveTxt02.active span:nth-child(20)
{
    -webkit-animation: moveTxt;
            animation: moveTxt;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.myStory
{
    position: relative;

    height: 96vh;
    max-height: 1000px; 
    padding: 10% 0 20%;
}
@media only screen and (max-width: 992px)
{
    .myStory
    {
        height: auto;
        max-height: none;
        margin-bottom: 30px; 
        padding: 50px 0 0;
    }
}
@media only screen and (max-width: 600px)
{
    .myStory
    {
        padding: 20px 0 0;
    }
}
.myStory .container
{
    position: relative;
}
.myStory .container:after
{
    display: block;
    visibility: hidden; 
    clear: both;

    height: 0;

    content: '.';
}
@media only screen and (max-width: 992px)
{
    .myStory .container
    {
        position: static;
    }
}
.myStory .inner
{
    position: relative;
    z-index: 10; 

    float: right;

    min-width: 32em;
}
@media only screen and (max-width: 992px)
{
    .myStory .inner
    {
        float: none; 

        min-width: 0;
        padding-left: 0;
    }
}
.myStory .bg
{
    position: absolute;
    top: -10%;
    left: 0;

    width: 66%;
    max-width: 867px;

    text-align: center;
}
@media only screen and (max-width: 1380px)
{
    .myStory .bg
    {
        top: -10%;
    }
}
@media only screen and (max-width: 1180px)
{
    .myStory .bg
    {
        width: 56%;
    }
}
@media only screen and (max-width: 992px)
{
    .myStory .bg
    {
        position: static;

        width: auto;
        max-width: none;
        height: auto;
        margin: 0 -30px;
    }
}
.myStory .bg img
{
    width: 100%;
    max-width: none;
}
@media only screen and (max-width: 992px)
{
    .myStory .bg img
    {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

.myQuarity
{
    position: relative;

    height: 90vh;
    max-height: 1000px; 
    padding: 10% 0 20%;
}
@media only screen and (max-width: 992px)
{
    .myQuarity
    {
        height: auto;
        max-height: none;
        padding: 0 0 80px;
    }
}
.myQuarity.coming
{
    padding-bottom: 40%;
}
@media only screen and (max-width: 992px)
{
    .myQuarity.coming
    {
        padding-bottom: 80px;
    }
}
.myQuarity .container
{
    position: relative;
}
@media only screen and (max-width: 992px)
{
    .myQuarity .container
    {
        position: static;
    }
}
.myQuarity .inner
{
    position: relative;
}
.myQuarity .bg
{
    position: absolute;
    top: 30%;
    right: -80px;
    left: 40%;

    width: 64%;
    max-width: 859px;

    text-align: center;
}
@media only screen and (max-width: 1200px)
{
    .myQuarity .bg
    {
        width: 52%;
    }
}
@media only screen and (max-width: 1024px)
{
    .myQuarity .bg
    {
        top: 30%;
        right: 20px; 
        left: auto;
    }
}
@media only screen and (max-width: 992px)
{
    .myQuarity .bg
    {
        position: static;

        width: auto;
        max-width: none;
        height: auto;
        margin: 40px -30px 0;
    }
}
.myQuarity .bg img
{
    width: 100%;
}
@media only screen and (max-width: 992px)
{
    .myQuarity .bg img
    {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}
.myQuarity .icon
{
    max-width: 420px;
    margin-bottom: 60px;

    opacity: 0;
}
@media only screen and (max-width: 992px)
{
    .myQuarity .icon
    {
        margin-bottom: 46px;
    }
}
.myQuarity .icon.active
{
    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.myReview
{
    position: relative;

    margin: 10% 0 130px;
}
@media only screen and (max-width: 992px)
{
    .myReview
    {
        margin: 0;
        padding: 0 0 30px;
    }
}
.myReview .container
{
    display: table;

    width: 100%;

    table-layout: fixed;
}
@media only screen and (max-width: 1024px)
{
    .myReview .container
    {
        display: block;

        width: auto;
    }
}
.myReview .left
{
    position: relative;

    display: table-cell;

    text-align: center; 
    vertical-align: top;
}
@media only screen and (max-width: 1024px)
{
    .myReview .left
    {
        display: none;
    }
}
.myReview .left:before
{
    position: absolute;
    top: 260px;
    right: 0;
    bottom: 120px; 
    left: 0;

    content: '';

    background-color: #00aec7;
}
@media only screen and (max-width: 1024px)
{
    .myReview .left:before
    {
        display: none;
    }
}
.myReview .left .image
{
    position: relative;
    top: -10px;

    opacity: 0;
}
.ieUnder .myReview .left .image
{
    opacity: 1;
}
.myReview .left .image.active
{
    -webkit-animation: fadeInImage;
            animation: fadeInImage;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myReview .inner
{
    position: relative; 

    display: table-cell;

    box-sizing: content-box;
    width: 500px;
    padding-left: 110px;

    vertical-align: top;

    background-color: #fff;
}
@media only screen and (max-width: 1024px)
{
    .myReview .inner
    {
        display: block; 

        width: auto;
        padding-left: 0;
    }
}
.myReview .btn
{
    margin-left: 30px;
}
@media only screen and (max-width: 1024px)
{
    .myReview .btn
    {
        margin-right: auto;
        margin-left: auto;
    }
}

@-webkit-keyframes myCicle
{
    0%
    {
        stroke-dasharray: 0 1000;
    }
    93%,
    to
    {
        stroke-dasharray: 760 ,1000;
    }
}
@keyframes myCicle
{
    0%
    {
        stroke-dasharray: 0 1000;
    }
    93%,
    to
    {
        stroke-dasharray: 760 ,1000;
    }
}
@-webkit-keyframes myCicleSp
{
    0%
    {
        stroke-dasharray: 0 1000;
    }
    93%,
    to
    {
        stroke-dasharray: 620 ,1000;
    }
}
@keyframes myCicleSp
{
    0%
    {
        stroke-dasharray: 0 1000;
    }
    93%,
    to
    {
        stroke-dasharray: 620 ,1000;
    }
}
@-webkit-keyframes myCicleTxt
{
    0%
    {
        content: '0';
    }
    1%
    {
        content: '1';
    }
    2%
    {
        content: '2';
    }
    3%
    {
        content: '3';
    }
    4%
    {
        content: '4';
    }
    5%
    {
        content: '5';
    }
    6%
    {
        content: '6';
    }
    7%
    {
        content: '7';
    }
    8%
    {
        content: '8';
    }
    9%
    {
        content: '9';
    }
    10%
    {
        content: '10';
    }
    11%
    {
        content: '11';
    }
    12%
    {
        content: '12';
    }
    13%
    {
        content: '13';
    }
    14%
    {
        content: '14';
    }
    15%
    {
        content: '15';
    }
    16%
    {
        content: '16';
    }
    17%
    {
        content: '17';
    }
    18%
    {
        content: '18';
    }
    19%
    {
        content: '19';
    }
    20%
    {
        content: '20';
    }
    21%
    {
        content: '21';
    }
    22%
    {
        content: '22';
    }
    23%
    {
        content: '23';
    }
    24%
    {
        content: '24';
    }
    25%
    {
        content: '25';
    }
    26%
    {
        content: '26';
    }
    27%
    {
        content: '27';
    }
    28%
    {
        content: '28';
    }
    29%
    {
        content: '29';
    }
    30%
    {
        content: '30';
    }
    31%
    {
        content: '31';
    }
    32%
    {
        content: '32';
    }
    33%
    {
        content: '33';
    }
    34%
    {
        content: '34';
    }
    35%
    {
        content: '35';
    }
    36%
    {
        content: '36';
    }
    37%
    {
        content: '37';
    }
    38%
    {
        content: '38';
    }
    39%
    {
        content: '39';
    }
    40%
    {
        content: '40';
    }
    41%
    {
        content: '41';
    }
    42%
    {
        content: '42';
    }
    43%
    {
        content: '43';
    }
    44%
    {
        content: '44';
    }
    45%
    {
        content: '45';
    }
    46%
    {
        content: '46';
    }
    47%
    {
        content: '47';
    }
    48%
    {
        content: '48';
    }
    49%
    {
        content: '49';
    }
    50%
    {
        content: '50';
    }
    51%
    {
        content: '51';
    }
    52%
    {
        content: '52';
    }
    53%
    {
        content: '53';
    }
    54%
    {
        content: '54';
    }
    55%
    {
        content: '55';
    }
    56%
    {
        content: '56';
    }
    57%
    {
        content: '57';
    }
    58%
    {
        content: '58';
    }
    59%
    {
        content: '59';
    }
    60%
    {
        content: '60';
    }
    61%
    {
        content: '61';
    }
    62%
    {
        content: '62';
    }
    63%
    {
        content: '63';
    }
    64%
    {
        content: '64';
    }
    65%
    {
        content: '65';
    }
    66%
    {
        content: '66';
    }
    67%
    {
        content: '67';
    }
    68%
    {
        content: '68';
    }
    69%
    {
        content: '69';
    }
    70%
    {
        content: '70';
    }
    71%
    {
        content: '71';
    }
    72%
    {
        content: '72';
    }
    73%
    {
        content: '73';
    }
    74%
    {
        content: '74';
    }
    75%
    {
        content: '75';
    }
    76%
    {
        content: '76';
    }
    77%
    {
        content: '77';
    }
    78%
    {
        content: '78';
    }
    79%
    {
        content: '79';
    }
    80%
    {
        content: '80';
    }
    81%
    {
        content: '81';
    }
    82%
    {
        content: '82';
    }
    83%
    {
        content: '83';
    }
    84%
    {
        content: '84';
    }
    85%
    {
        content: '85';
    }
    86%
    {
        content: '86';
    }
    87%
    {
        content: '87';
    }
    88%
    {
        content: '88';
    }
    89%
    {
        content: '89';
    }
    90%
    {
        content: '90';
    }
    91%,
    to
    {
        content: '91';
    }
}
@keyframes myCicleTxt
{
    0%
    {
        content: '0';
    }
    1%
    {
        content: '1';
    }
    2%
    {
        content: '2';
    }
    3%
    {
        content: '3';
    }
    4%
    {
        content: '4';
    }
    5%
    {
        content: '5';
    }
    6%
    {
        content: '6';
    }
    7%
    {
        content: '7';
    }
    8%
    {
        content: '8';
    }
    9%
    {
        content: '9';
    }
    10%
    {
        content: '10';
    }
    11%
    {
        content: '11';
    }
    12%
    {
        content: '12';
    }
    13%
    {
        content: '13';
    }
    14%
    {
        content: '14';
    }
    15%
    {
        content: '15';
    }
    16%
    {
        content: '16';
    }
    17%
    {
        content: '17';
    }
    18%
    {
        content: '18';
    }
    19%
    {
        content: '19';
    }
    20%
    {
        content: '20';
    }
    21%
    {
        content: '21';
    }
    22%
    {
        content: '22';
    }
    23%
    {
        content: '23';
    }
    24%
    {
        content: '24';
    }
    25%
    {
        content: '25';
    }
    26%
    {
        content: '26';
    }
    27%
    {
        content: '27';
    }
    28%
    {
        content: '28';
    }
    29%
    {
        content: '29';
    }
    30%
    {
        content: '30';
    }
    31%
    {
        content: '31';
    }
    32%
    {
        content: '32';
    }
    33%
    {
        content: '33';
    }
    34%
    {
        content: '34';
    }
    35%
    {
        content: '35';
    }
    36%
    {
        content: '36';
    }
    37%
    {
        content: '37';
    }
    38%
    {
        content: '38';
    }
    39%
    {
        content: '39';
    }
    40%
    {
        content: '40';
    }
    41%
    {
        content: '41';
    }
    42%
    {
        content: '42';
    }
    43%
    {
        content: '43';
    }
    44%
    {
        content: '44';
    }
    45%
    {
        content: '45';
    }
    46%
    {
        content: '46';
    }
    47%
    {
        content: '47';
    }
    48%
    {
        content: '48';
    }
    49%
    {
        content: '49';
    }
    50%
    {
        content: '50';
    }
    51%
    {
        content: '51';
    }
    52%
    {
        content: '52';
    }
    53%
    {
        content: '53';
    }
    54%
    {
        content: '54';
    }
    55%
    {
        content: '55';
    }
    56%
    {
        content: '56';
    }
    57%
    {
        content: '57';
    }
    58%
    {
        content: '58';
    }
    59%
    {
        content: '59';
    }
    60%
    {
        content: '60';
    }
    61%
    {
        content: '61';
    }
    62%
    {
        content: '62';
    }
    63%
    {
        content: '63';
    }
    64%
    {
        content: '64';
    }
    65%
    {
        content: '65';
    }
    66%
    {
        content: '66';
    }
    67%
    {
        content: '67';
    }
    68%
    {
        content: '68';
    }
    69%
    {
        content: '69';
    }
    70%
    {
        content: '70';
    }
    71%
    {
        content: '71';
    }
    72%
    {
        content: '72';
    }
    73%
    {
        content: '73';
    }
    74%
    {
        content: '74';
    }
    75%
    {
        content: '75';
    }
    76%
    {
        content: '76';
    }
    77%
    {
        content: '77';
    }
    78%
    {
        content: '78';
    }
    79%
    {
        content: '79';
    }
    80%
    {
        content: '80';
    }
    81%
    {
        content: '81';
    }
    82%
    {
        content: '82';
    }
    83%
    {
        content: '83';
    }
    84%
    {
        content: '84';
    }
    85%
    {
        content: '85';
    }
    86%
    {
        content: '86';
    }
    87%
    {
        content: '87';
    }
    88%
    {
        content: '88';
    }
    89%
    {
        content: '89';
    }
    90%
    {
        content: '90';
    }
    91%,
    to
    {
        content: '91';
    }
}
@media only screen and (max-width: 600px)
{
    .myCicle
    {
        display: none;
    }
}

.myCicleSp
{
    display: none;
}
@media only screen and (max-width: 600px)
{
    .myCicleSp
    {
        display: block;
    }
}

.myCicle,
.myCicleSp
{
    position: relative;

    width: 272px;
    height: 272px;
    margin-bottom: 70px;
}
@media only screen and (max-width: 992px)
{
    .myCicle,
    .myCicleSp
    {
        margin: 0 auto 30px;
    }
}
@media only screen and (max-width: 600px)
{
    .myCicle,
    .myCicleSp
    {
        width: 230px;
        height: 230px;
    }
}
.myCicle:before,
.myCicleSp:before
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    content: '';

    border: solid 8px #d3d0cf; 
    border-radius: 50%;
}
.myCicle svg,
.myCicleSp svg
{
    position: relative; 

    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
}
@media only screen and (max-width: 600px)
{
    .myCicle svg,
    .myCicleSp svg
    {
        width: 230px;
        height: 230px;
    }
}
.myCicle circle,
.myCicleSp circle
{
    fill: transparent;
    stroke: #00aec7;
    stroke-width: 8;
    stroke-dasharray: 760 ,1000;
}
.myCicle.active circle,
.myCicleSp.active circle
{
    -webkit-animation: myCicle;
            animation: myCicle;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(.645, .045, .355, 1);
            animation-timing-function: cubic-bezier(.645, .045, .355, 1);
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 600px)
{
    .myCicle.active circle,
    .myCicleSp.active circle
    {
        -webkit-animation: myCicleSp;
                animation: myCicleSp;
        -webkit-animation-duration: 2s;
                animation-duration: 2s;
        -webkit-animation-timing-function: cubic-bezier(.645, .045, .355, 1);
                animation-timing-function: cubic-bezier(.645, .045, .355, 1);
        -webkit-animation-delay: 0;
                animation-delay: 0; 
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}
.myCicle .txt,
.myCicleSp .txt
{
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 500; 

    position: absolute;
    top: 70px;
    right: 0;
    left: 0;

    text-align: center;
}
@media only screen and (max-width: 600px)
{
    .myCicle .txt,
    .myCicleSp .txt
    {
        font-size: 20px;
        font-size: 2rem; 

        top: 55px;
    }
}
.myCicle .num,
.myCicleSp .num
{
    font-family: 'jins_nextlight';
    font-size: 60px;
    font-size: 6rem; 

    position: absolute;
    top: 100px;
    right: 0;
    left: 0;

    text-align: center;

    color: #00aec7;
}
@media only screen and (max-width: 600px)
{
    .myCicle .num,
    .myCicleSp .num
    {
        top: 80px;
    }
}
.myCicle .num span,
.myCicleSp .num span
{
    font-size: 80px;
    font-size: 8rem;
}
@media only screen and (max-width: 600px)
{
    .myCicle .num span,
    .myCicleSp .num span
    {
        font-size: 65px;
        font-size: 6.5rem;
    }
}
.myCicle .num span:before,
.myCicleSp .num span:before
{
    content: '91';
}
.myCicle.active .num span:before,
.myCicleSp.active .num span:before
{
    -webkit-animation: myCicleTxt;
            animation: myCicleTxt;
    -webkit-animation-duration: 1.2s;
            animation-duration: 1.2s;
    -webkit-animation-timing-function: cubic-bezier(.645, .045, .355, 1);
            animation-timing-function: cubic-bezier(.645, .045, .355, 1);
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.my1Dyaybutton
{
    padding: 130px 0;
}
@media only screen and (max-width: 1024px)
{
    .my1Dyaybutton
    {
        padding: 50px 0;
    }
}
.my1Dyaybutton .inner
{
    display: table;

    width: 100%;

    table-layout: fixed;
}
@media only screen and (max-width: 1024px)
{
    .my1Dyaybutton .inner
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
            flex-direction: column; 

        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
    }
}
.my1Dyaybutton .modTitle01,
.my1Dyaybutton .imgDushBtn,
.my1Dyaybutton .detail
{
    display: table-cell;

    vertical-align: top;
}
@media only screen and (max-width: 1024px)
{
    .my1Dyaybutton .modTitle01,
    .my1Dyaybutton .imgDushBtn,
    .my1Dyaybutton .detail
    {
        display: block;

        width: 100%;
    }
}
.my1Dyaybutton .modTitle01
{
    width: 28em;
}
@media only screen and (max-width: 1360px)
{
    .my1Dyaybutton .modTitle01
    {
        font-size: 5vw; 

        width: 5.5em;
    }
}
@media only screen and (max-width: 1024px)
{
    .my1Dyaybutton .modTitle01
    {
        width: auto;
        margin-bottom: 0; 

        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
}
.my1Dyaybutton .modTitle01 .title > span
{
    font-size: 70px;
    font-size: 7rem;

    letter-spacing: .02em;
}
@media only screen and (max-width: 1360px)
{
    .my1Dyaybutton .modTitle01 .title > span
    {
        font-size: 5vw;
    }
}
@media only screen and (max-width: 600px)
{
    .my1Dyaybutton .modTitle01 .title > span
    {
        font-size: 36px;
        font-size: 3.6rem;
    }
}
.my1Dyaybutton .imgDushBtn
{
    text-align: center; 
    vertical-align: middle;
}
@media only screen and (max-width: 1024px)
{
    .my1Dyaybutton .imgDushBtn
    {
        position: relative; 

        width: 100%;
        margin-bottom: 30px;

        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    .my1Dyaybutton .imgDushBtn .imgInner
    {
        position: relative;
    }
    .my1Dyaybutton .imgDushBtn:before
    {
        position: absolute;
        top: 40px;
        right: -30px;
        bottom: 0; 
        left: -30px;

        content: '';

        background-color: #00aec7;
    }
}
.my1Dyaybutton .detail
{
    width: 28%;

    vertical-align: middle;
}
@media only screen and (max-width: 1024px)
{
    .my1Dyaybutton .detail
    {
        width: 100%;

        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }
}
@media only screen and (max-width: 1024px)
{
    .my1Dyaybutton .btn
    {
        margin-right: auto;
        margin-left: auto;
    }
}

.myFirstSet
{
    padding: 50px 0;
}
@media only screen and (max-width: 992px)
{
    .myFirstSet
    {
        padding: 30px 0;
    }
}
.myFirstSet .btn
{
    max-width: 300px;
    margin: 0 auto;
    padding: 2px 0;

    opacity: 0;
}
@media only screen and (max-width: 992px)
{
    .myFirstSet .btn
    {
        width: auto;
        max-width: 280px;
    }
}
.ieUnder .myFirstSet .btn
{
    opacity: 1;
}

.myBottomBlock.active .myFirstSet .btn
{
    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: .5s;
            animation-duration: .5s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: .6s;
            animation-delay: .6s; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
@media only screen and (max-width: 600px)
{
    .myBottomBlock.active .myFirstSet .btn
    {
        -webkit-animation: fadeIn;
                animation: fadeIn;
        -webkit-animation-duration: .5s;
                animation-duration: .5s;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
        -webkit-animation-delay: .4s;
                animation-delay: .4s; 
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
}

@-webkit-keyframes fadeInImageTop
{
    0%
    {
        top: -10px; 

        opacity: 0;
    }
    100%
    {
        top: 0; 

        opacity: 1;
    }
}
@keyframes fadeInImageTop
{
    0%
    {
        top: -10px; 

        opacity: 0;
    }
    100%
    {
        top: 0; 

        opacity: 1;
    }
}
.myBlock06 .head .modTitle02
{
    margin-left: 20px;
}
@media only screen and (max-width: 992px)
{
    .myBlock06 .head .modTitle02
    {
        margin-left: 0;
    }
}
.myBlock06 .body
{
    margin: 60px 0 0; 
    padding: 45px 0 70px;

    background-color: #00aec7;
}
@media only screen and (max-width: 992px)
{
    .myBlock06 .body
    {
        margin-top: 80px; 
        padding: 0 0 45px;
    }
}
.myBlock06 .inner
{
    display: table;

    width: 100%;

    table-layout: fixed;
}
@media only screen and (max-width: 992px)
{
    .myBlock06 .inner
    {
        display: block;

        width: auto;
    }
}
.myBlock06 .inner .left,
.myBlock06 .inner .right
{
    display: table-cell;

    vertical-align: top;
}
@media only screen and (max-width: 992px)
{
    .myBlock06 .inner .left,
    .myBlock06 .inner .right
    {
        display: block;
    }
}
.myBlock06 .left
{
    width: 40%;
    padding-left: 20px;

    opacity: 0;
    color: #fff;
}
.ieUnder .myBlock06 .left
{
    opacity: 1;
}
@media only screen and (max-width: 992px)
{
    .myBlock06 .left
    {
        width: auto;
        margin-bottom: 35px;
    }
}
.myBlock06 .left.active
{
    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myBlock06 .left dl
{
    font-size: 16px;
    font-size: 1.6rem; 

    display: table;

    width: 100%;

    table-layout: fixed;
}
@media only screen and (max-width: 600px)
{
    .myBlock06 .left dl
    {
        font-size: 13px;
        font-size: 1.3rem;
    }
}
.myBlock06 .left dl:not(:last-child)
{
    margin-bottom: 12px;
}
.myBlock06 .left dt,
.myBlock06 .left dd
{
    display: table-cell;

    vertical-align: top;
}
.myBlock06 .left dt
{
    font-weight: bold; 

    width: 8.5em;
}
.myBlock06 .left dd sup
{
    font-size: 12px;
    font-size: 1.2rem;

    margin-left: 2px;

    vertical-align: top;
}
.myBlock06 .left .caution
{
    font-size: 12px;
    font-size: 1.2rem; 

    margin: 30px 0 15px;
}
@media only screen and (max-width: 600px)
{
    .myBlock06 .left .caution
    {
        font-size: 10px;
        font-size: 1rem; 

        margin: 20px 0 6px;
    }
}
.myBlock06 .left .caution li
{
    margin-left: 2.5em;

    text-indent: -2.5em;
}
.myBlock06 .left .caution02
{
    font-size: 12px;
    font-size: 1.2rem;
}
@media only screen and (max-width: 600px)
{
    .myBlock06 .left .caution02
    {
        font-size: 10px;
        font-size: 1rem;
    }
}
.myBlock06 .right .image
{
    position: relative;

    margin-top: -210px;

    opacity: 0;
}
.ieUnder .myBlock06 .right .image
{
    opacity: 1;
}
@media only screen and (max-width: 992px)
{
    .myBlock06 .right .image
    {
        display: none;
    }
}
.myBlock06 .right .image.active
{
    -webkit-animation: fadeInImageTop;
            animation: fadeInImageTop;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myBlock06 .right .btn
{
    max-width: 250px;
    margin: 0 auto;

    opacity: 0;
}
.ieUnder .myBlock06 .right .btn
{
    opacity: 1;
}
.myBlock06 .right .btn.active
{
    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.myBlock06 .imageSp
{
    position: relative;
    top: -80px;

    display: none;

    margin-bottom: -45px; 

    opacity: 0;
}
@media only screen and (max-width: 992px)
{
    .myBlock06 .imageSp
    {
        display: block;
    }
}
.myBlock06 .imageSp.active
{
    -webkit-animation: fadeIn;
            animation: fadeIn;
    -webkit-animation-duration: .6s;
            animation-duration: .6s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0;
            animation-delay: 0; 
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;

    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}