@charset "UTF-8";

/*------------------------------------------------
    メイン
------------------------------------------------*/
.main {
    width: 100vw;
    height: 45.83vw;
    background: url(../img/top/main_bg.jpg) no-repeat center top;
    background-size: 100%;
    position: relative;
    overflow: hidden;
}
.main .koko, .main .wilson, .main .brewster {
    width: 33.33vw;
    height: 45.83vw;
    position: relative;
    overflow: hidden;
}
.main .koko {
    position: absolute;
    top: 0;
    left: 0;
}
.main .koko figure {
    width: 40.5vw;
    position: absolute;
    right: -7vw;
    top: 10.83vw;
}
.main .wilson {
    position: absolute;
    top: 0;
    left: 33.33vw;
}
.main .wilson figure {
    width: 30.42vw;
    position: absolute;
    right: 1.45vw;
    bottom: -5vw;
}
.main .brewster {
    position: absolute;
    top: 0;
    left: 66.66vw;
}
.main .brewster figure {
    width: 32.67vw;
    position: absolute;
    left: -0.58vw;
    top: 8.33vw;
}
.main .balloon1 figure {
    width: 5vw;
    position: absolute;
    left: -0.83vw;
    bottom: -5vw;
}
.main .balloon2 figure {
    width: 9.17vw;
    position: absolute;
    top: 5.83vw;
    left: 25.58vw;
}
.main .balloon3 figure {
    width: 7.92vw;
    position: absolute;
    top: 7vw;
    right: 27.25vw;
}
.main .balloon4 figure {
    width: 7.25vw;
    position: absolute;
    bottom: -10vw;
    right: -1.25vw;
}
@media screen and (max-width:768px) {
    .main {
        width: 100vw;
        height: 113.87vw;
        background: url(../img/top/main_bg_sp.jpg) no-repeat center top;
        background-size: 100%;
        position: relative;
        overflow: hidden;
    }
    .main .brewster {
        width: 100vw;
        height: 37.1vw;
        position: relative;
        overflow: hidden;
    }
    .main .wilson {
        width: 100vw;
        height: 38.53vw;
        position: relative;
        overflow: hidden;
    }
    .main .koko {
        width: 100vw;
        height: 38.67vw;
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
    }
    .main .koko figure {
        width: 70vw;
        position: absolute;
        right: 15vw;
        top: -2vw;
    }
    .main .wilson {
        position: absolute;
        top: 36.8vw;
        left: 0;
    }
    .main .wilson figure {
        width: 48vw;
        position: absolute;
        right: 24.67vw;
        bottom: auto;
        top: -7.47vw;
    }
    .main .brewster {
        position: absolute;
        top: 0;
        left: 0;
    }
    .main .brewster figure {
        width: 51.47vw;
        position: absolute;
        left: 23.87vw;
        top: -4.67vw;
    }
    .main .balloon1 figure {
        width: 12vw;
        position: absolute;
        left: 6.27vw;
        bottom: 0;
    }
    .main .balloon2 figure {
        width: 22.27vw;
        position: absolute;
        top: 20vw;
        left: -2.67vw;
    }
    .main .balloon3 figure {
        width: 19.07vw;
        position: absolute;
        top: auto;
        bottom: 5.33vw;
        right: -1.33vw;
    }
    .main .balloon4 figure {
        width: 17.33vw;
        position: absolute;
        bottom: auto;
        top: 22.67vw;
        right: 6vw;
    }
}
/*------------------------------------------------
   キャラクター 
------------------------------------------------*/

.top-intro__chara {
    position: relative;
    height: 140px;
}
.top-intro__chara .koko {
    width: 150px;
    position: absolute;
    left: -150px;
    bottom: 0;
    z-index: 3;
}
.top-intro__chara .brewster {
    width: 150px;
    position: absolute;
    left: -150px;
    bottom: 0;
    z-index: 2;
}
.top-intro__chara .willson {
    width: 150px;
    position: absolute;
    left: -150px;
    bottom: 0;
    z-index: 1;
}
.top-intro__chara .vee {
    width: 50px;
    position: absolute;
    right: 100px;
    bottom: 0;
    z-index: 1;
}
@media screen and (max-width:768px) {
    .top-intro__chara {
        height: 33.33vw;
    }
    .top-intro__chara .koko {
        width: 26.67vw;
        position: absolute;
        left: -26.67vw;
        bottom: 0;
        z-index: 3;
    }
    .top-intro__chara .brewster {
        width: 26.67vw;
        position: absolute;
        left: -26.67vw;
        bottom: 0;
        z-index: 2;
    }
    .top-intro__chara .willson {
        width: 26.67vw;
        position: absolute;
        left: -26.67vw;
        bottom: 0;
        z-index: 1;
    }
    .top-intro__chara .vee {
        width:9.73vw;
        position: absolute;
        right: 25px;
        bottom: 0;
    }
}

/*------------------------------------------------
    イントロ
------------------------------------------------*/
.top-intro {
    position: relative;
    padding: min(10vw, 100px) 0 0 0;
    border-bottom-right-radius: min(10.67vw, 80px);
    overflow: hidden;
    box-shadow: 0 8px 10px rgba(0, 0, 0, .15);
}
.top-intro .nav {
    position: absolute;
    right: 0;
    top: 0;
}
.top-intro__lead {
    width: 100%;
    padding-bottom: min(5vw, 50px);
    text-align: center;
}
.top-intro__img1 {
    width: 230px;
    position: absolute;
    top: 175px;
    left: 65px;
}
.top-intro__img2 {
    width: 280px;
    position: absolute;
    top: 100px;
    right: 45px;
}
.top-intro__img3 {
    width: 407px;
    position: absolute;
    top: 280px;
    left: -120px;
}
.top-intro__img4 {
    width: 346px;
    position: absolute;
    top: 250px;
    right: -100px;
}
.top-intro__lead h2 {
    width: min(32.5vw, 325px);
    margin: 0 auto;
}
.top-intro__lead p {
    font-size: min(2.4vw, 24px);
    margin-top: min(3vw, 30px);
    color: #FFF;
}
@media screen and (max-width:1200px) {
    .top-intro__img1 {
        width: 19.17vw;
        position: absolute;
        top: 16.67vw;
        left: 5.42vw;
    }
    .top-intro__img2 {
        width: 23.33vw;
        position: absolute;
        top: 9.17vw;
        right: 3.75vw;
    }
    .top-intro__img3 {
        width: 33.92vw;
        position: absolute;
        top: 26.67vw;
        left: -10vw;
    }
    .top-intro__img4 {
        width: 28.83vw;
        position: absolute;
        top: 21.17vw;
        right: -8.33vw;
    }
}
@media screen and (max-width:768px) {
    .top-intro {
        padding: 6.67vw 0 0 0;
        border-bottom-right-radius: 10.67vw;
    }
    .top-intro__lead {
        width: 100%;
        padding: 28vw 0 0 0;
    }
    .top-intro__img1 {
        width: 30.67vw;
        position: absolute;
        top: 18.13vw;
        left: -2.67vw;
    }
    .top-intro__img2 {
        width: 37.33vw;
        position: absolute;
        top: 6.67vw;
        right: -1.33vw;
    }
    .top-intro__img3 {
        width: 54.27vw;
        position: absolute;
        top: 32vw;
        left: -32vw;
    }
    .top-intro__img4 {
        width: 46.13vw;
        position: absolute;
        top: 26.67vw;
        right: -26.67vw;
    }
    .top-intro__lead h2 {
        width: 48.67vw;
        margin: 0 auto;
    }
    .top-intro__lead p {
        font-size: 5.33vw;
        margin-top: 4vw;
        line-height: 1.8;
    }
}
.nav-btn {
    width: min(82.5vw, 825px);
    margin: 0 auto;
}
.nav-btn ul {
    display: flex;
    flex-wrap: wrap;
}
.nav-btn ul li {
    width: min(27.5vw, 275px);
    height: min(27.5vw, 275px);
}
.nav-btn ul li a {
    width: min(27.5vw, 275px);
    height: min(27.5vw, 275px);
}
.nav-btn ul li a {
    display: block;
    width: 100%;
    position: relative;
    transition-duration: 0.3s;
}
.nav-btn ul li a:hover {
    transform: scale(1.1, 1.1);
}
.nav-btn ul li a:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    opacity: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
}
.nav-btn ul li.nav1 a:after {
    background: url(../img/common/nav1_on.png) no-repeat right center;
    background-size: 100%;
}
.nav-btn ul li.nav2 a:after {
    background: url(../img/common/nav2_on.png) no-repeat right center;
    background-size: 100%;
}
.nav-btn ul li.nav3 a:after {
    background: url(../img/common/nav3_on.png) no-repeat right center;
    background-size: 100%;
}
.nav-btn ul li.nav4 a:after {
    background: url(../img/common/nav4_on.png) no-repeat right center;
    background-size: 100%;
}
.nav-btn ul li.nav5 a:after {
    background: url(../img/common/nav5_on.png) no-repeat right center;
    background-size: 100%;
}
.nav-btn ul li.nav6 a:after {
    background: url(../img/common/nav6_on.png) no-repeat right center;
    background-size: 100%;
}
.nav-btn ul li a:hover:after {
    opacity: 1;
}
.bnr-15th {
    width: min(60vw, 600px);
    margin: min(5vw, 50px) auto 0 auto;
}
.bnr-15th a img {
    transition-duration: 0.3s;
}
.bnr-15th a:hover img {
    transform: scale(1.05, 1.05);
}
@media screen and (max-width:768px) {
    .nav-btn {
        width: 92vw;
        margin: 2vw auto 0 auto;
    }
    .nav-btn ul li {
        width: 46vw;
        height: 46vw;
        margin-top:0;
    }
    .nav-btn ul li a {
        width: 46vw;
        height: 46vw;
    }
    .nav-btn ul li a {
        display: block;
        width: 100%;
        position: relative;
        transition-duration: 0.3s;
    }
    .nav-btn ul li a:hover {
        transform: scale(1, 1);
    }
    .bnr-15th {
        width: 74.67vw;
        margin: 8vw auto 0 auto;
    }
    .bnr-15th a img {
        transition-duration: 0.3s;
    }
    .bnr-15th a:hover img {
        transform: scale(1, 1);
    }
}

/*------------------------------------------------
    おしらせ
------------------------------------------------*/

.top-news {
    padding: min(8vw, 80px) 0 min(6vw, 60px) 0;
    margin-top: min(-8vw, -80px);
}
.top-news__contents {
    padding-top: min(8vw, 80px); 
}
.top-news__title {
     width: 94%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-bottom: min(3vw, 30px);
}
.top-news__title h2 {
    width: min(18vw, 180px);
    margin-right: min(1.5vw, 15px);
}
.top-news__title p {
    display: flex;
    font-size: min(2vw, 20px);
    color: #0c2e6e;
    line-height: 1;
    align-items: flex-end;
}
.top-news__nav{
    width: min(10vw, 100px);
    position: absolute;
    right: 0;
    bottom: min(2vw, 20px);
    display: flex;
    flex-wrap: wrap;
}
.top-news__nav button {
    width: 50%;
    padding: min(.4vw, 4px);
    border: none;
    background: inherit;
    cursor: pointer;
}
.top-news__nav .top-news__prev:disabled {
    opacity: 0.6;
    cursor: default;
}
.top-news__nav .top-news__next:disabled {
    opacity: 0.6;
    cursor: default;
}
.top-news__next{
    transform: scale(-1, 1);
}
.top-news__wrap {
    position: relative;
    overflow: hidden;
    padding: 0 min(2vw, 20px);
}
.top-news__list {
    display: flex;
    gap: min(2vw, 20px);
    overflow-x: auto;
    scrollbar-width: none;
    /* ドラッグ可能感 */
    cursor: grab;
    /* テキスト選択防止 */
    user-select: none;
    /* 画像のドラッグ防止 */
    -webkit-user-drag: none;
}
.top-news__list.dragging {
    cursor: grabbing;
}
.top-news__list::-webkit-scrollbar {
    display: none;
}
.top-news__list li {
    flex: 0 0 auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: min(26vw, 260px);
}
.top-news__list li.dragging {
    cursor: grabbing;
}
.top-news__list li img {
  /* 縦横比を保ったまま埋める */
  object-fit: cover;
  /* 中央を表示 */
  object-position: center;
  /* 画像ドラッグ無効（Safari/Chrome） */
  -webkit-user-drag: none;
  user-select: none;
  /* 画像でポインターを拾わない */
  pointer-events: none;
}
.top-news__list li .clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 4;
  -webkit-line-clamp: 4;
}
.top-news__list li .news-item .top-news__info {
    transition-duration: 0.3s;
}
.top-news__list li .news-item:hover .top-news__info {
    text-decoration: underline;
    color: #0f6cb6;
}
.top-news__info {
    color: #333;
    margin-top: min(1vw, 10px);
    font-size: min(1.6vw, 16px);
    line-height: 1.5;
}
.top-news__date {
    color: #777;
    font-size: min(1.4vw, 14px);
    margin-top: min(.5vw, 5px);
}
.top-news .link {
    width: 94%;
    max-width: 1080px;
    margin: 0 auto;
    margin-top: min(3vw, 30px);
    display: flex;
    justify-content: flex-end;
}
.news-item figure img {
    border-radius: 8px;
    border: 2px solid #0c2e6e;
}

@media screen and (max-width:768px) {
    .top-news {
        padding: 10.67vw 0 13.33vw 0;
        margin-top: -13.33vw;
    }
    .top-news__contents {
        margin: 0 auto;
        padding-top: 16vw;
    }
    .top-news__title {
        display: block;
        padding-bottom: 0;
        width: 92%;
        max-width: auto;
    }
    .top-news__title h2 {
        width: 36vw;
        margin-right: 0;
    }
    .top-news__title p {
        display: block;
        font-size: 4.27vw;
        margin-top: 4vw;
    }
    .top-news__nav{
        width:29.33vw;
        position: absolute;
        right: 0;
        bottom: min(2vw, 20px);
        display: flex;
        flex-wrap: wrap;
    }
    .top-news__nav div{
        width: 13.33vw;
        margin: 1.33vw 0 1.33vw 1.33vw;
    }
    .top-news__wrap {
        padding: 0 4vw;
    }
    .top-news__list {
        margin-top:8vw;
    }
    .top-news__list li {
        width: 55.73vw;
    }
    .top-news__list li .news-item .top-news__info {
        font-size: 4.27vw;
        line-height: 1.5
    }
    .top-news__list li .news-item:hover .top-news__info {
        text-decoration: underline;
    }
    .top-news__info {
        margin-top: 3.33vw;
    }
    .top-news__date {
        font-size: 3.2vw;
        margin-top: 2vw;
    }
    .top-news .link {
        margin-top: 8vw;
        display: block;
        text-align: center;
    }
     .news-item figure img {
        border-radius: 2.13vw;
        border: 0.53vw solid #0c2e6e;
    }
}
/*------------------------------------------------
    YouTube 
------------------------------------------------*/

.top-movie {
    padding: min(6vw, 60px) 0 min(8vw, 80px) 0;
    position: relative;
    border-bottom-left-radius: min(8vw, 80px);
    box-shadow: 0 8px 10px rgba(0, 0, 0, .15);
}
.top-movie .link {
    text-align: center;
    margin-top: min(4vw, 40px);
}
.top-movie__contents {
    width: 94%;
    max-width: 1080px;
    margin: 0 auto;
}
.top-movie__title {
    text-align: center;
    color: #FFF;
    font-size: min(1.8vw, 18px);
}
.top-movie__title h2 {
    width: min(28vw, 280px);
    margin: 0 auto;
}
.top-movie__title p {
    margin-top: min(.5vw, 5px);
}
.top-movie__list {
    display: flex;
    margin-top: min(2vw, 20px);
}
.top-movie__list li {
    width: calc((100% - min(6vw, 60px))/ 3);
    margin-right: min(3vw, 30px);
    box-sizing: border-box;
    cursor: pointer;
    transition-duration: 0.3s;
}
.top-movie__list li:hover {
    transform: scale(1.1, 1.1);
}
.top-movie__list li:nth-child(3n) {
    margin-right: 0
}
.top-movie__list li:before {
    width: min(5vw, 50px);
    height: min(3.2vw, 32px);
    content: "";
    display: block;
    margin: 0 auto;
    background: url(../img/top/youtube_antenna.png) no-repeat center top;
    background-size: 100%;
}
.top-movie__list li figure {
    position: relative;
    width: 100%;
}
.top-movie__list li figure::after {
    position: absolute;
    content: "";
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/top/btn_play.png) no-repeat center top;
    background-size: min(10vw, 100px);
    width: min(10vw, 100px);
    height: min(10vw, 100px);
}
.top-movie__list li figure img {
    border-radius: min(1.2vw, 12px);
    border: min(.8vw, 8px) solid #FFF;
}
.top-movie__img1 {
    width: min(30vw, 300px);
    position: absolute;
    top: min(-8vw, -80px);
    left: min(-2.5vw, -25px);
}
.top-movie__img2 {
    width: min(24.2vw, 242px);
    position: absolute;
    bottom: min(-6vw, -60px);
    right: min(-1.5vw, -15px);
}
.top-movie__info {
    color: #FFF;
    margin-top: min(1vw, 10px);
    line-height: 1.5;
    font-size: min(1.6vw, 16px);
}
@media screen and (max-width:768px) {
    .top-movie {
        padding: 20vw 0;
        position: relative;
        border-bottom-left-radius: 10.67vw;
        box-shadow: 0 8px 10px rgba(0, 0, 0, .15);
    }
    .top-movie .link {
        text-align: center;
        margin-top: 10.67vw;
    }
    .top-movie__contents {
        width: 89.33vw;
        max-width: auto;
        margin: 0 auto;
    }
    .top-movie__title {
        font-size: 4.27vw;
    }
    .top-movie__title h2 {
        width: 55.73vw;
        margin: 0 auto;
    }
    .top-movie__title p {
        margin-top: 2vw;
    }
    .top-movie__list {
        display: block;
        margin-top: 0;
    }
    .top-movie__list li {
        width: 100%;
        margin-right: 0;
        margin-top: 6vw;
    }
    .top-movie__list li:hover {
        transform: scale(1, 1);
    }
    .top-movie__list li:nth-child(3n) {
        margin-right: 0;
    }
    .top-movie__list li:before {
        width: 12.53vw;
        height: 8.27vw;
        content: "";
        display: block;
        margin: 0 auto;
        background: url(../img/top/youtube_antenna.png) no-repeat center top;
        background-size: 100%;
    }
    .top-movie__list li figure {
        position: relative;
        width: 100%;
    }
    .top-movie__list li figure::after {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(../img/top/btn_play.png) no-repeat center top;
        background-size: 25.33vw;
        width: 25.33vw;
        height: 25.33vw;
    }
    .top-movie__list li figure img {
        border-radius: min(1.2vw, 12px);
        border: min(.8vw, 8px) solid #FFF;
    }
    .top-movie__img1 {
        width: 41.33vw;
        position: absolute;
        top: -13.33vw;
        left: -4.67vw;
    }
    .top-movie__img2 {
        width: 32vw;
        position: absolute;
        bottom: -13.33vw;
        right: -4.67vw;
    }
    .top-movie__info {
        margin-top: 2.67vw;
        font-size: 4.27vw;
    }
}
/*------------------------------------------------
    保育関係者向け / 法人向け 
------------------------------------------------*/
.top-link {
    padding: min(8vw, 80px) 0 0 0;
}
.top-link__contents {
    width: 94%;
    max-width: 1080px;
    margin: 0 auto;
}
.top-link__contents ul {
    border-radius: min(4vw, 40px);
    background: #FFF;
    display: flex;
    flex-wrap: wrap;
    padding: min(5vw, 50px) 0;
}
.top-link__contents li {
    width: 50%;
    padding: 0 min(6vw, 80px);
    text-align: center;
}
.top-link__contents li:first-child {
    border-right: 1px solid #b6c0d3;
}
.top-link__contents li h3 {
    color: #0c2e6e;
    line-height: 1.4;
    font-size: min(1.6vw, 16px);
    letter-spacing: .02em;
}
.top-link__contents li h3 span {
    display: block;
    font-size: min(3.2vw, 32px);
    font-weight: 800;
}
.top-link__contents li .top-link__txt {
    font-size: min(1.8vw, 18px);
    margin-top: min(2vw, 20px);
    padding-bottom: min(2vw, 20px);
}
.top-link__contents li .link {
    margin-top: min(4vw, 40px);
}
@media screen and (max-width:768px) {
    .top-link {
        padding: 16vw 0 0 0;
    }
    .top-link__contents {
        width: 89.33vw;
    }
    .top-link__contents ul {
        border-radius: 10.67vw;
        display: block;
        padding: 0 4.8vw;
    }
    .top-link__contents li {
        width: 100%;
        padding: 9.33vw 0;
        text-align: center;
    }
    .top-link__contents li:first-child {
        border-right: none;
        border-bottom: 1px solid #b6c0d3;
    }
    .top-link__contents li h3 {
        font-size: 3.73vw;
    }
    .top-link__contents li h3 span {
        font-size: 6.4vw;
    }
    .top-link__contents li .top-link__txt {
        font-size: 4.27vw;
        margin-top: 5.33vw;
        padding-bottom: vw;
    }
    .top-link__contents li .link {
        margin-top:4vw;
    }
    .top-link__contents li .link a {
        width: 80vw;
    }
}
/*------------------------------------------------
    SNS公式アカウント
------------------------------------------------*/
.top-sns dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: min(1.8vw, 18px);
    margin-top: min(6vw, 60px);
}
.top-sns ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.top-sns ul li {
    padding: 0 min(1vw, 10px);
    text-align: left;
}
.top-sns dt img {
    width: min(13.6vw, 136px);
    margin-bottom: min(.5vw, 5px);
}
.top-sns ul li a img {
    width: min(11vw, 110px);
    transition-duration: 0.3s;
}
.top-sns ul li a:hover img {
    transform: scale(.96, .96);
    opacity: .6;
}
@media screen and (max-width:768px) {
    .top-sns dl {
        display: block;
        font-size: 4.27vw;
        margin-top: 10.67vw;
        text-align: center;
    }
    .top-sns ul {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        margin-top: 10.67vw;
    }
    .top-sns ul li {
        padding: 0 2vw;
        text-align: left;
    }
    .top-sns dt img {
        width: 26.67vw;
        margin-bottom: 2.67vw;
    }
    .top-sns ul li a img {
        width: 19.33vw;
    }
    .top-sns ul li a:hover img {
        transform: scale(1, 1);
        opacity: 1;
    }
}

/*================================================
    !! 追加 !!
================================================*/
/*------------------------------------------------
    グローバルナビ
------------------------------------------------*/
#nav-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/*------------------------------------------------
    風船アニメーション
------------------------------------------------*/
.balloon1-anime {
  opacity: 0;
  -webkit-animation:
    fadeIn 3s ease forwards 2s,
    float1 3s ease-in-out infinite 2s;
          animation:
    fadeIn 3s ease forwards 2s,
    float1 3s ease-in-out infinite 2s;
}

.balloon2-anime {
  opacity: 0;
  -webkit-animation:
    fadeIn 3s ease forwards 2s,
    float2 4s ease-in-out infinite 3s;
          animation:
    fadeIn 3s ease forwards 2s,
    float2 4s ease-in-out infinite 3s;
}

.balloon3-anime {
  opacity: 0;
  -webkit-animation:
    fadeIn 3s ease forwards 2s,
    float1 3.3s ease-in-out infinite 3.3s;
          animation:
    fadeIn 3s ease forwards 2s,
    float1 3.3s ease-in-out infinite 3.3s;
}

.balloon4-anime {
  opacity: 0;
  -webkit-animation:
    fadeIn 3s ease forwards 2s,
    float2 4s ease-in-out infinite 4s;
          animation:
    fadeIn 3s ease forwards 2s,
    float2 4s ease-in-out infinite 4s;
}

/* フェードイン */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ふわふわ浮遊 */
@-webkit-keyframes float1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes float1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes float2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes float2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/*------------------------------------------------
    電車移動アニメーション
------------------------------------------------*/
.train-wrap {
  display: block;
  position: absolute;
  bottom: 0;
  -webkit-animation-name: move, flip, upDown;
          animation-name: move, flip, upDown;
  -webkit-animation-duration: 21s, 21s, 0.1s;
          animation-duration: 21s, 21s, 0.1s;
  -webkit-animation-timing-function: linear, steps(2, end), steps(2);
          animation-timing-function: linear, steps(2, end), steps(2);
  -webkit-animation-iteration-count: infinite, infinite, infinite;
          animation-iteration-count: infinite, infinite, infinite;
  -webkit-animation-fill-mode: none, none, none;
          animation-fill-mode: none, none, none;
  -webkit-animation-direction: normal, normal, alternate;
          animation-direction: normal, normal, alternate;
}

/* 各車両の開始タイミングをずらす */
.rail .move1 {
  -webkit-animation-delay: 0s, 0s;
          animation-delay: 0s, 0s;
}

.rail .move2 {
  -webkit-animation-delay: 7s, 7s;
          animation-delay: 7s, 7s;
}

.rail .move3 {
  -webkit-animation-delay: 14s, 14s;
          animation-delay: 14s, 14s;
}

/* 移動 */
@-webkit-keyframes move {
  0% {
    left: -150px;
  }
  33.333% {
    left: calc(100% - 100px - 150px - 60px + 20px); /* 全体 - 右スペース - 電車画像横幅 - vee画像横幅 - 微調整 */
  }
  66.666% {
    left: -150px;
  }
  100% {
    left: -150px;
  }    
}
@keyframes move {
  0% {
    left: -150px;
  }
  33.333% {
    left: calc(100% - 100px - 150px - 60px + 20px); /* 全体 - 右スペース - 電車画像横幅 - vee画像横幅 - 微調整 */
  }
  66.666% {
    left: -150px;
  }
  100% {
    left: -150px;
  }    
}

/* 反転 */
@-webkit-keyframes flip {
  0%, 33.332% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  33.334%, 100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes flip {
  0%, 33.332% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  33.334%, 100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}

/* 縦揺れ */
@-webkit-keyframes upDown {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 2px;
  }
}
@keyframes upDown {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 2px;
  }
}

@media screen and (max-width:768px) {
  @-webkit-keyframes move {
    0% {
      left: -26.67vw;
    }
    33.333% {
      left: calc(100% - 10px - 26.67vw - 15.6vw + 20px); /* 全体 - 右スペース - 電車画像横幅 - vee画像横幅 - 微調整 */
    }
    66.666% {
      left: -26.67vw;
    }
    100% {
      left: -26.67vw;
    }    
  }
  @keyframes move {
    0% {
      left: -26.67vw;
    }
    33.333% {
      left: calc(100% - 10px - 26.67vw - 15.6vw + 20px); /* 全体 - 右スペース - 電車画像横幅 - vee画像横幅 - 微調整 */
    }
    66.666% {
      left: -26.67vw;
    }
    100% {
      left: -26.67vw;
    }    
  }
}