@charset "UTF-8";

/*----------------------------------------------------
    ☆Course
----------------------------------------------------*/


/* 20151216 add start*/
#gNav .child{
    position: relative;
    z-index:10;
}

#newsSubtitle {
    display: block;
    padding: 60px 0;
    text-align: center;
}

#newsSubtitle img {
    margin: 0 0 10px;
}

#newsSubtitle p {
    font-size: 40px;
    color: #eac100;
    font-weight: bold;
}

.news {
    display: block;
    padding: 0 0 100px;
    text-align: center;
    background: url(../images/index/line.gif) bottom repeat-x !important;
}

.news .newsInr,
.news .newsMain {
    padding: 0 !important;
}

.news h2 {
    float: none;
}

.news .data {
    width: 100% !important;
    float: none;
}

.news .data li,
.news .data li a {
    width: 100% !important;
    text-align: left;
}

.news .data li a .date {
    margin: 0;
    width: 11% !important;
    color: #000;
}

.news .data li a .txt {
    margin: 0;
    width: 85% !important;
    font-size: 16px;
}

.toMoreNews {
    display: inline-block;
    margin: 50px 0;
    padding: 20px 100px;
    border-radius: 10px;
    background: #d0395f;
    text-decoration: none !important;
}

.toMoreNews span {
    padding: 0 0 0 20px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    background: url(../images/index/to_morenews.png) left center no-repeat;
}


/* 20151216  add end*/


/* 20151222  add start*/

#dappaArea {
    display: block;
    width: 100%;
    padding: 5px 0 30px;
    background: url(../images/index/bg.gif) fixed;
}

#dappaWrap {
    display: block;
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

#dappaWrap {
    text-align: center;
}

#dappaWrap > img:nth-of-type(1) {
    margin: 0 0 30px;
}

#dappaDengon,
#dappaOsusume {
    display: block;
    width: 319px;
    height: 323px;
    position: absolute;
    top: 180px;
}

#dappaDengon ul,
#dappaOsusume ul {
    display: block;
    width: 100%;
    margin: 0 0 15px;
    text-align: left;
}

#dappaDengon ul li,
#dappaOsusume ul li {
    display: block;
    width: 48%;
    margin-bottom:4%;
    border-radius:5px;
    float:left;
    transition:0.3s;
}
#dappaDengon ul li:hover,
#dappaOsusume ul li:hover {
    opacity: 0.8;
}

#dappaDengon ul li a,
#dappaOsusume ul li a{
    display: block;
    width: 100%;
    padding: 33px 0px;
    margin-bottom:4%;
    border-radius:5px;
    float:left;
}


#dappaDengon ul li:nth-of-type(2n),
#dappaOsusume ul li:nth-of-type(2n) {
    margin-left: 4%;
}

#dappaDengon ul li:nth-of-type(1){
    background-color: #70a94a;
}
#dappaDengon ul li:nth-of-type(2){
    background-color: #38a07c;
}
#dappaDengon ul li:nth-of-type(3){
    background-color: #ac83b8;
}
#dappaDengon ul li:nth-of-type(4){
    background-color: #eb6d75;
}
#dappaOsusume ul li:nth-of-type(1){
    background-color: #63a4d6;
}
#dappaOsusume ul li:nth-of-type(2){
    background-color: #fa9a11;
}
#dappaOsusume ul li:nth-of-type(3){
    background-color: #5dba71;
}
#dappaOsusume ul li:nth-of-type(4){
    padding:0;
}


#dappaDengon ul li img,
#dappaOsusume ul li img {
    display: block;
    width: 100%;
    height: auto;
    font-size: 14px;
    color: #fff;
}

#dappaDengon ul li span,
#dappaOsusume ul li span {
    display: block;
    width: 100%;
    font-size: 13px;
    font-weight: bold;
}

#dappaDengon {
    padding-right:20px;
    left: 0;
}

#dappaOsusume {
    padding-left:20px;
    right: 0;
}

#dappaSns {
    display: block;
    width: 100%;
    padding: 30px;
    border: 10px solid #FFF;
    border-radius: 20px;
    font-size: 0;
}

#dappaSns div{
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

.dappaSnsItem {
    display: inline-block;
    height: auto;
}

img.dappaSnsItem {
    margin: 0 10px 0 0;
}

#titleArea {
    display: block;
    width: 100%;
    height: 580px;
    background: url(../images/index/animation/sora.gif) top repeat-x;
    position: relative;
    overflow: hidden;
}

#titleArea > img {
    display: block;
    margin: 50px auto 0;
    position: relative;
    z-index: 0;
}

#cloud03,
#cloud02,
#cloud01,
#tori01,
#tori02,
#kesiki,
#sunLink,
#namiMain,
#namiAoline01,
#mainShip,
#namiAoline02,
#namiSiro {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
}

#cloud03 {
    height: 30px;
    background: url(../images/index/animation/cloud03.png) top repeat-x;
    top: 0;
    -moz-animation: cloud03 5s linear infinite;
    -webkit-animation: cloud03 5s linear infinite;
    animation: cloud03 5s linear infinite;
}

@keyframes cloud03 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 185px 0px;
    }
    100% {
        background-position: 369px 0px;
    }
}

@-webkit-keyframes cloud03 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 185px 0px;
    }
    100% {
        background-position: 369px 0px;
    }
}

@-moz-keyframes cloud03 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 185px 0px;
    }
    100% {
        background-position: 369px 0px;
    }
}

#cloud02 {
    height: 77px;
    background: url(../images/index/animation/cloud02.png) top repeat-x;
    top: 100px;
    -moz-animation: cloud02 30s linear infinite;
    -webkit-animation: cloud02 30s linear infinite;
    animation: cloud02 30s linear infinite;
}

@keyframes cloud02 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -303px 0px;
    }
    100% {
        background-position: -607px 0px;
    }
}

@-webkit-keyframes cloud02 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -303px 0px;
    }
    100% {
        background-position: -607px 0px;
    }
}

@-moz-keyframes cloud02 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -303px 0px;
    }
    100% {
        background-position: -607px 0px;
    }
}

#cloud01 {
    height: 140px;
    background: url(../images/index/animation/cloud01.png) top repeat-x;
    top: 100px;
    -moz-animation: cloud01 20s linear infinite;
    -webkit-animation: cloud01 20s linear infinite;
    animation: cloud01 20s linear infinite;
}

@keyframes cloud01 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -542px 0px;
    }
    100% {
        background-position: -1084px 0px;
    }
}

@-webkit-keyframes cloud01 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -542px 0px;
    }
    100% {
        background-position: -1084px 0px;
    }
}

@-moz-keyframes cloud01 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -542px 0px;
    }
    100% {
        background-position: -1084px 0px;
    }
}

#kesiki {
    height: 227px;
    background: url(../images/index/animation/kesiki.png) top repeat-x;
    top: 280px;
    -moz-animation: kesiki 120s linear infinite;
    -webkit-animation: kesiki 120s linear infinite;
    animation: kesiki 120s linear infinite;
}

@keyframes kesiki {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -829px 0px;
    }
    100% {
        background-position: -1658px 0px;
    }
}

@-webkit-keyframes kesiki {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -829px 0px;
    }
    100% {
        background-position: -1658px 0px;
    }
}

@-moz-keyframes kesiki {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: -829px 0px;
    }
    100% {
        background-position: -1658px 0px;
    }
}

#sunLink {
    width:42px;
    height: 42px;
    background: url(../images/index/animation/sun.png) top no-repeat;
    top: 240px;
    -moz-animation: sunLink 200s linear infinite;
    -webkit-animation: sunLink 200s linear infinite;
    animation: sunLink 200s linear infinite;
}
@keyframes sunLink {
    0% {
        left: 100%;
    }
    50% {
        left: 48.5%;
    }
    100% {
        left: -5%;
    }
}

@-webkit-keyframes sunLink {
    0% {
        left: 100%;
    }
    50% {
        left: 48.5%;
    }
    100% {
        left: -5%;
    }
}

@-moz-keyframes sunLink {
    0% {
        left: 100%;
    }
    50% {
        left: 48.5%;
    }
    100% {
        left: -5%;
    }
}


#namiMain {
    height: 84px;
    background: url(../images/index/animation/nami_main.png) top repeat-x;
    bottom: 0;
    -moz-animation: namiMain 5s linear infinite;
    -webkit-animation: namiMain 5s linear infinite;
    animation: namiMain 5s linear infinite;
}

@keyframes namiMain {
    0% {
        background-position: 0px 5px;
    }
    50% {
        background-position: -180px 0px;
    }
    100% {
        background-position: -360px 5px;
    }
}

@-webkit-keyframes namiMain {
    0% {
        background-position: 0px 5px;
    }
    50% {
        background-position: -180px 0px;
    }
    100% {
        background-position: -360px 5px;
    }
}

@-moz-keyframes namiMain {
    0% {
        background-position: 0px 5px;
    }
    50% {
        background-position: -180px 0px;
    }
    100% {
        background-position: -360px 5px;
    }
}

#namiAoline01 {
    height: 7px;
    background: url(../images/index/animation/nami_aoline01.png) top repeat-x;
    bottom: 75px;
    -moz-animation: namiAoline01 5s linear infinite;
    -webkit-animation: namiAoline01 5s linear infinite;
    animation: namiAoline01 5s linear infinite;
}

@keyframes namiAoline01 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 212px 0px;
    }
    100% {
        background-position: 423px 0px;
    }
}

@-webkit-keyframes namiAoline01 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 212px 0px;
    }
    100% {
        background-position: 423px 0px;
    }
}

@-moz-keyframes namiAoline01 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 212px 0px;
    }
    100% {
        background-position: 423px 0px;
    }
}

#mainShip {
    width: 520px;
    height: 57px;
    background: url(../images/index/animation/ship.png) top no-repeat;
    bottom: -5px;
    -moz-animation: mainShip 15s linear infinite;
    -webkit-animation: mainShip 15s linear infinite;
    animation: mainShip 15s linear infinite;
}

@keyframes mainShip {
    0% {
        left: -30%;
        transform: rotate(-2.5deg);
    }
    3% {
        left: -10%;
        transform: rotate(-0deg);
    }
    5% {
        left: 0%;
        transform: rotate(-2.5deg);
    }
    10% {
        left: 10%;
        transform: rotate(-4deg);
    }
    20% {
        left: 20%;
        transform: rotate(-7deg);
    }
    30% {
        left: 30%;
        transform: rotate(-8deg);
    }
    40% {
        left: 40%;
        transform: rotate(-0deg);
    }
    50% {
        left: 45%;
        transform: rotate(-2.5deg);
    }
    60% {
        left: 60%;
        transform: rotate(-0deg);
    }
    70% {
        left: 75%;
        transform: rotate(-0deg);
    }
    80% {
        left: 80%;
        transform: rotate(-0deg);
    }
    90% {
        left: 95%;
        transform: rotate(-2.5deg);
    }
    95% {
        left: 100%;
        transform: rotate(-2.5deg);
    }
    100% {
        left: 120%;
        transform: rotate(-2.5deg);
    }
}

@-webkit-keyframes mainShip {
    0% {
        left: 30%;
        transform: rotate(-2.5deg);
    }
    3% {
        left: 31%;
        transform: rotate(-0deg);
    }
    5% {
        left: 33%;
        transform: rotate(-2.5deg);
    }
    10% {
        left: 40%;
        transform: rotate(-4deg);
    }
    20% {
        left: 50%;
        transform: rotate(-7deg);
    }
    30% {
        left: 52%;
        transform: rotate(-8deg);
    }
    40% {
        left: 55%;
        transform: rotate(-0deg);
    }
    50% {
        left: 45%;
        transform: rotate(-2.5deg);
    }
    60% {
        left: 40%;
        transform: rotate(-0deg);
    }
    70% {
        left: 41%;
        transform: rotate(-0deg);
    }
    80% {
        left: 42%;
        transform: rotate(-0deg);
    }
    90% {
        left: 43%;
        transform: rotate(-2.5deg);
    }
    95% {
        left: 35%;
        transform: rotate(-2.5deg);
    }
    98% {
        left: 32%;
        transform: rotate(-2.5deg);
    }
    100% {
        left: 30%;
        transform: rotate(-2.5deg);
    }
}

@-moz-keyframes mainShip {
    0% {
        left: 30%;
        transform: rotate(-2.5deg);
    }
    3% {
        left: 31%;
        transform: rotate(-0deg);
    }
    5% {
        left: 33%;
        transform: rotate(-2.5deg);
    }
    10% {
        left: 40%;
        transform: rotate(-4deg);
    }
    20% {
        left: 50%;
        transform: rotate(-7deg);
    }
    30% {
        left: 52%;
        transform: rotate(-8deg);
    }
    40% {
        left: 55%;
        transform: rotate(-0deg);
    }
    50% {
        left: 45%;
        transform: rotate(-2.5deg);
    }
    60% {
        left: 40%;
        transform: rotate(-0deg);
    }
    70% {
        left: 41%;
        transform: rotate(-0deg);
    }
    80% {
        left: 42%;
        transform: rotate(-0deg);
    }
    90% {
        left: 43%;
        transform: rotate(-2.5deg);
    }
    95% {
        left: 35%;
        transform: rotate(-2.5deg);
    }
    98% {
        left: 32%;
        transform: rotate(-2.5deg);
    }
    100% {
        left: 30%;
        transform: rotate(-2.5deg);
    }
}

#namiAoline02 {
    height: 14px;
    background: url(../images/index/animation/nami_aoline02.png) top repeat-x;
    bottom: 0px;
    -moz-animation: namiAoline02 15s linear infinite;
    -webkit-animation: namiAoline02 15s linear infinite;
    animation: namiAoline02 15s linear infinite;
}

@keyframes namiAoline02 {
    0% {
        background-position: 0px 7px;
    }
    50% {
        background-position: 199px 0px;
    }
    100% {
        background-position: 398px 7px;
    }
}

@-webkit-keyframes namiAoline02 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 199px 0px;
    }
    100% {
        background-position: 398px 0px;
    }
}

@-moz-keyframes namiAoline02 {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 199px 0px;
    }
    100% {
        background-position: 398px 0px;
    }
}

#namiSiro {
    height: 84px;
    background: url(../images/index/animation/nami_siro.png) top repeat-x;
    bottom: -75px;
    -moz-animation: namiSiro 5s linear infinite;
    -webkit-animation: namiSiro 5s linear infinite;
    animation: namiSiro 5s linear infinite;
}

@keyframes namiSiro {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 180px 10px;
    }
    100% {
        background-position: 360px 0px;
    }
}

@-webkit-keyframes namiSiro {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 180px 10px;
    }
    100% {
        background-position: 360px 0px;
    }
}

@-moz-keyframes namiSiro {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 180px 10px;
    }
    100% {
        background-position: 360px 0px;
    }
}


/* 20151222  add end*/


/*===========================
 For SP
===========================*/


/*デバイスの横幅が750px以下の場合*/

@media only screen and (max-width: 750px) {
    #header {
        border-bottom: none !important;
    }
    /* 20151216  add start*/
    #newsSubtitle {
        padding: 10px 0 30px;
        background: url(../images/news/linebg.png) top repeat-x;
        text-align: center;
    }
    #newsSubtitle img {
        width: 80%;
        height: auto;
        margin: 0 0 10px;
    }
    #newsSubtitle p {
        font-size: 40px;
        color: #eac100;
        font-weight: bold;
    }
    .news {
        padding: 0 10px;
    }
    .news .newsInr,
    .news .newsMain {
        padding: 0 !important;
    }
    .news h2 {
        float: none;
    }
    .news .data {
        width: 100% !important;
        float: none;
    }
    .news .data li,
    .news .data li a {
        width: 100% !important;
        text-align: left;
    }
    .news .data li a .date {
        margin: 0;
        width: 100% !important;
        color: #000;
    }
    .news .data li a .txt {
        margin: 0;
        width: 100% !important;
    }
    .toMoreNews {
        width: 100%;
        padding: 20px 10px;
        border-radius: 5px;
        box-shadow: -3px -3px 0px rgba(219, 66, 0, 1) inset;
    }
    .toMoreNews span {
        padding: 0 0 0 20px;
        font-size: 20px;
        background-size: 15px 15px;
    }
    /* 20151216  add end*/
    /* 20151223  add start*/
    #dappaArea {
        display: block;
        width: 100%;
        padding: 5px 0 0;
        background: url(../images/index/bg.gif) fixed;
    }
    #dappaWrap {
        display: block;
        width: 100%;
        margin: 0 auto;
        position: relative;
    }
    #dappaWrap {
        text-align: center;
    }
    #dappaWrap > img:nth-of-type(1) {
        width: 90%;
        height: auto;
        margin: 0 0 30px;
    }
    #dappaWrap > img:nth-of-type(2) {
        width: 90%;
        height: auto;
        margin: 0;
    }
#dappaDengon,
#dappaOsusume {
    width: 100%;
    height: auto;
    padding:0 20px;
    position: static;
    top: auto;
}

#dappaDengon ul,
#dappaOsusume ul {
    width: 100%;
    margin: 0;
    text-align: center;
}

#dappaDengon ul li,
#dappaOsusume ul li {
    display: block;
    width: 48%;
    margin-bottom:4%;
    border-radius:5px;
    float:left;
    transition:0.3s;
}

#dappaDengon ul li a,
#dappaOsusume ul li a{
    display: block;
    width: 100%;
    margin:0;
    padding: 10px 0px;
    font-size:0;
    border-radius:5px;
    float:none;
}


#dappaDengon ul li:nth-of-type(2n),
#dappaOsusume ul li:nth-of-type(2n) {
    margin-left: 4%;
}

#dappaDengon ul li img,
#dappaOsusume ul li img {
    display: inline-block;
    width: 70px;
    height: auto;
    margin:0 auto;
}

#dappaDengon ul li span,
#dappaOsusume ul li span {
    display: none;
}

#dappaDengon {
    padding-top:4%;
    padding-right:20px;
    left: 0;
}

#dappaOsusume {
    padding-left:20px;
    right: 0;
}
    #dappaSns {
        display: block;
        width: 100%;
        padding: 20px;
        border: none;
        border-radius: 0;
        font-size: 0;
    }
    .dappaSnsItem {
        display: inline-block;
        width: 100%;
        height: auto;
    }
    img.dappaSnsItem {
        margin: 0;
    }
    #titleArea {
        display: block;
        width: 100%;
        height: 350px;
        background: url(../images/index/animation/sora.gif) top repeat-x;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
    }
    #titleArea > img {
        display: block;
        width: 90%;
        height: auto;
        margin: 50px auto;
    }
    #cloud03,
    #cloud02,
    #cloud01,
    #tori01,
    #tori02,
    #kesiki,
    #namiMain,
    #namiAoline01,
    #mainShip,
    #namiAoline02,
    #namiSiro {
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
    }
    #cloud03 {
        height: 15px;
        background: url(../images/index/animation/cloud03.png) bottom repeat-x;
        background-size: 185px auto;
        top: 0;
        -moz-animation: cloud03 5s linear infinite;
        -webkit-animation: cloud03 5s linear infinite;
        animation: cloud03 5s linear infinite;
    }
    @keyframes cloud03 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 92.5px 0px;
        }
        100% {
            background-position: 185px 0px;
        }
    }
    @-webkit-keyframes cloud03 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 92.5px 0px;
        }
        100% {
            background-position: 185px 0px;
        }
    }
    @-moz-keyframes cloud03 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 92.5px 0px;
        }
        100% {
            background-position: 185px 0px;
        }
    }
    #cloud02 {
        height: 39px;
        background: url(../images/index/animation/cloud02.png) top repeat-x;
        background-size: 303px auto;
        top: 100px;
        -moz-animation: cloud02 30s linear infinite;
        -webkit-animation: cloud02 30s linear infinite;
        animation: cloud02 30s linear infinite;
    }
    @keyframes cloud02 {
        0% {
            background-position: 0% 0px;
        }
        50% {
            background-position: -151.5px 0px;
        }
        100% {
            background-position: -303px 0px;
        }
    }
    @-webkit-keyframes cloud02 {
        0% {
            background-position: 0% 0px;
        }
        50% {
            background-position: -151.5px 0px;
        }
        100% {
            background-position: -303px 0px;
        }
    }
    @-moz-keyframes cloud02 {
        0% {
            background-position: 0% 0px;
        }
        50% {
            background-position: -151.5px 0px;
        }
        100% {
            background-position: -303px 0px;
        }
    }
    #cloud01 {
        height: 70px;
        background: url(../images/index/animation/cloud01.png) top repeat-x;
        background-size: 542px auto;
        top: 110px;
        -moz-animation: cloud01 20s linear infinite;
        -webkit-animation: cloud01 20s linear infinite;
        animation: cloud01 20s linear infinite;
    }
    @keyframes cloud01 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: -271px 0px;
        }
        100% {
            background-position: -542px 0px;
        }
    }
    @-webkit-keyframes cloud01 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: -271px 0px;
        }
        100% {
            background-position: -542px 0px;
        }
    }
    @-moz-keyframes cloud01 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: -271px 0px;
        }
        100% {
            background-position: -542px 0px;
        }
    }
    #kesiki {
        height: 113.5px;
        background: url(../images/index/animation/kesiki.png) top repeat-x;
        background-size: 829px auto;
        top: 203px;
        -moz-animation: kesiki 120s linear infinite;
        -webkit-animation: kesiki 120s linear infinite;
        animation: kesiki 120s linear infinite;
    }
    @keyframes kesiki {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: -415px 0px;
        }
        100% {
            background-position: -829px 0px;
        }
    }
    @-webkit-keyframes kesiki {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: -415px 0px;
        }
        100% {
            background-position: -829px 0px;
        }
    }
    @-moz-keyframes kesiki {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: -415px 0px;
        }
        100% {
            background-position: -829px 0px;
        }
    }
    #namiMain {
        height: 42px;
        background: url(../images/index/animation/nami_main.png) top repeat-x;
        background-size: 180px auto;
        bottom: 0;
        -moz-animation: namiMain 5s linear infinite;
        -webkit-animation: namiMain 5s linear infinite;
        animation: namiMain 5s linear infinite;
    }
    @keyframes namiMain {
        0% {
            background-position: 0px 5px;
        }
        50% {
            background-position: -90px 0px;
        }
        100% {
            background-position: -180px 5px;
        }
    }
    @-webkit-keyframes namiMain {
        0% {
            background-position: 0px 5px;
        }
        50% {
            background-position: -90px 0px;
        }
        100% {
            background-position: -180px 5px;
        }
    }
    @-moz-keyframes namiMain {
        0% {
            background-position: 0px 5px;
        }
        50% {
            background-position: -90px 0px;
        }
        100% {
            background-position: -180px 5px;
        }
    }
    #namiAoline01 {
        height: 3.5px;
        background: url(../images/index/animation/nami_aoline01.png) top repeat-x;
        background-size: 212px auto;
        bottom: 36px;
        -moz-animation: namiAoline01 5s linear infinite;
        -webkit-animation: namiAoline01 5s linear infinite;
        animation: namiAoline01 5s linear infinite;
    }
    @keyframes namiAoline01 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 106px 0px;
        }
        100% {
            background-position: 212px 0px;
        }
    }
    @-webkit-keyframes namiAoline01 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 106px 0px;
        }
        100% {
            background-position: 212px 0px;
        }
    }
    @-moz-keyframes namiAoline01 {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 106px 0px;
        }
        100% {
            background-position: 212px 0px;
        }
    }
    #mainShip {
        width: 150px;
        height: 29px;
        background: url(../images/index/animation/ship.png) top no-repeat;
        background-size: 100% auto;
        bottom: -10px;
        -moz-animation: mainShip 15s linear infinite;
        -webkit-animation: mainShip 15s linear infinite;
        animation: mainShip 15s linear infinite;
    }
    @keyframes mainShip {
        0% {
            left: -10%;
            transform: rotate(-5deg);
        }
        10% {
            left: 2%;
            transform: rotate(-15deg);
        }
        20% {
            left: 10%;
            transform: rotate(-25deg);
        }
        30% {
            left: 15%;
            transform: rotate(-30deg);
        }
        40% {
            left: 12%;
            transform: rotate(-0deg);
        }
        50% {
            left: 5%;
            transform: rotate(-5deg);
        }
        60% {
            left: 0%;
            transform: rotate(-0deg);
        }
        70% {
            left: 1%;
            transform: rotate(-0deg);
        }
        80% {
            left: 2%;
            transform: rotate(-0deg);
        }
        90% {
            left: 3%;
            transform: rotate(-5deg);
        }
        100% {
            left: -10%;
            transform: rotate(-5deg);
        }
    }
    @-webkit-keyframes mainShip {
        0% {
            left: -10%;
            transform: rotate(-5deg);
        }
        10% {
            left: 2%;
            transform: rotate(-15deg);
        }
        20% {
            left: 10%;
            transform: rotate(-25deg);
        }
        30% {
            left: 15%;
            transform: rotate(-30deg);
        }
        40% {
            left: 12%;
            transform: rotate(-0deg);
        }
        50% {
            left: 5%;
            transform: rotate(-5deg);
        }
        60% {
            left: 0%;
            transform: rotate(-0deg);
        }
        70% {
            left: 1%;
            transform: rotate(-0deg);
        }
        80% {
            left: 2%;
            transform: rotate(-0deg);
        }
        90% {
            left: 3%;
            transform: rotate(-5deg);
        }
        100% {
            left: -10%;
            transform: rotate(-5deg);
        }
    }
    @-moz-keyframes mainShip {
        0% {
            left: -10%;
            transform: rotate(-5deg);
        }
        10% {
            left: 2%;
            transform: rotate(-15deg);
        }
        20% {
            left: 10%;
            transform: rotate(-25deg);
        }
        30% {
            left: 15%;
            transform: rotate(-30deg);
        }
        40% {
            left: 12%;
            transform: rotate(-0deg);
        }
        50% {
            left: 5%;
            transform: rotate(-5deg);
        }
        60% {
            left: 0%;
            transform: rotate(-0deg);
        }
        70% {
            left: 1%;
            transform: rotate(-0deg);
        }
        80% {
            left: 2%;
            transform: rotate(-0deg);
        }
        90% {
            left: 3%;
            transform: rotate(-5deg);
        }
        100% {
            left: -10%;
            transform: rotate(-5deg);
        }
    }
    #namiAoline02 {
        height: 7px;
        background: url(../images/index/animation/nami_aoline02.png) top repeat-x;
        background-size: 199px auto;
        bottom: 0px;
        -moz-animation: namiAoline02 15s linear infinite;
        -webkit-animation: namiAoline02 15s linear infinite;
        animation: namiAoline02 15s linear infinite;
    }
    @keyframes namiAoline02 {
        0% {
            background-position: 0px 7px;
        }
        50% {
            background-position: 100px 0px;
        }
        100% {
            background-position: 199px 7px;
        }
    }
    @-webkit-keyframes namiAoline02 {
        0% {
            background-position: 0px 7px;
        }
        50% {
            background-position: 100px 0px;
        }
        100% {
            background-position: 199px 7px;
        }
    }
    @-moz-keyframes namiAoline02 {
        0% {
            background-position: 0px 7px;
        }
        50% {
            background-position: 100px 0px;
        }
        100% {
            background-position: 199px 7px;
        }
    }
    #namiSiro {
        height: 42px;
        background: url(../images/index/animation/nami_siro.png) top repeat-x;
        background-size: 180px auto;
        bottom: -37px;
        -moz-animation: namiSiro 5s linear infinite;
        -webkit-animation: namiSiro 5s linear infinite;
        animation: namiSiro 5s linear infinite;
    }
    @keyframes namiSiro {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 90px 10px;
        }
        100% {
            background-position: 180px 0px;
        }
    }
    @-webkit-keyframes namiSiro {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 90px 10px;
        }
        100% {
            background-position: 180px 0px;
        }
    }
    @-moz-keyframes namiSiro {
        0% {
            background-position: 0px 0px;
        }
        50% {
            background-position: 90px 10px;
        }
        100% {
            background-position: 180px 0px;
        }
    }
    /* 20151223  add end*/
}