@charset "utf-8";

/*
**************************************************************************
* 雪印メグミルク - 工場見学 - バーチャル工場見学 - TOP
**************************************************************************/

/*----------------------------------------
  override
----------------------------------------*/
#content #contentFoot {
    margin-top: 140px;
}

@media screen and (max-width: 736px) {
    #content #contentFoot {
        margin-top: -20px;
    }
}

/*----------------------------------------
  keyframes
----------------------------------------*/
@-webkit-keyframes logoAnimation {
    0% {-webkit-transform: translateY(40px);}
    16% {-webkit-transform: translateY(-12.8px);}
    28% {-webkit-transform: translateY(5.2px);}
    44% {-webkit-transform: translateY(-2px);}
    59% {-webkit-transform: translateY(0.8px);}
    73% {-webkit-transform: translateY(-0.4px);}
    88% {-webkit-transform: translateY(0px);}
    100% {-webkit-transform: translateY(0px);}
}
@keyframes logoAnimation {
    0% {transform: translateY(40px);}
    16% {transform: translateY(-12.8px);}
    28% {transform: translateY(5.2px);}
    44% {transform: translateY(-2px);}
    59% {transform: translateY(0.8px);}
    73% {transform: translateY(-0.4px);}
    88% {transform: translateY(0px);}
    100% {transform: translateY(0px);}
}

@-webkit-keyframes boundIn {
    0% {-webkit-transform: scale(0.4, 0.4);}
    5% {-webkit-transform: scale(0.5, 0.5);}
    40% {-webkit-transform: scale(1.2, 1.2);}
    60% {-webkit-transform: scale(0.95, 0.95);}
    80% {-webkit-transform: scale(1.03, 1.03);}
    100% {-webkit-transform: scale(1, 1);}
}
@keyframes boundIn {
    0% {transform: scale(0.4, 0.4);}
    5% {transform: scale(0.5, 0.5);}
    40% {transform: scale(1.2, 1.2);}
    60% {transform: scale(0.95, 0.95);}
    80% {transform: scale(1.03, 1.03);}
    100% {transform: scale(1, 1);}
}

@-webkit-keyframes btnRotation {
    0% {-webkit-transform: scale(1, 1);}
    50% {-webkit-transform: scale(0, 1);}
    100% {-webkit-transform: scale(1, 1);}
}
@keyframes btnRotation {
    0% {transform: scale(1, 1);}
    50% {transform: scale(0, 1);}
    100% {transform: scale(1, 1);}
}


/*----------------------------------------
  オープニング アニメーション設定
----------------------------------------*/
#content.preload > * {
    opacity: 0;
}

/* アニメーションあり
----------------------------------*/
/* メニューボタン */
#stage .is-animation #contentHead .lnav-toggle {
    opacity: 0;
}
#stage .is-animation.onAnimation #contentHead .lnav-toggle {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out 3s;
    transition: opacity .4s ease-out 3s;
}

/* トップへ戻るボタン */
#stage .is-animation #contentFoot .factory-pagetop {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}
#stage .is-animation.onAnimation #contentFoot .factory-pagetop {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .4s ease-out 3s;
    transition: all .4s ease-out 3s;
}

/* コンテンツエリア（タイトルエリア以外） */
#stage .is-animation #contentArea > *:not(.wrp-virtual-title) {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}
#stage .is-animation.onAnimation #contentArea > *:not(.wrp-virtual-title) {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .6s ease-out;
    transition: all .6s ease-out;
}

@media screen and (max-width: 736px) {
    /* アニメーションあり
    ----------------------------------*/
    /* メニューボタン */
    #stage .is-animation #contentHead .lnav-toggle {
        opacity: 1;
    }

    /* トップへ戻るボタン */
    #stage .is-animation #contentFoot .factory-pagetop {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}


/*----------------------------------------
  タイトル
----------------------------------------*/
#stage .wrp-virtual-title {
    position: relative;
    width: 745px;
    height: 250px;
    margin: 20px auto 50px;
}

#stage .wrp-virtual-title .ttl {
    height: 0;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

#stage .wrp-virtual-title span {
    display: block;
}

/* ロゴ画像
----------------------------------*/
#stage .wrp-virtual-title .logoCharacter {
    position: absolute;
    left: 151px;
    top: 6px;
    width: 416px;
    height: 159px;
    background: url('/fun/factory/assets/virtual/top/img/img_title_character.png') no-repeat left top;
    background-size: 416px auto;
}

#stage .wrp-virtual-title .logoText {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 96px;
    background: no-repeat left top;
}
#stage .wrp-virtual-title .logoText.text1 {
    left: 14px;
    width: 88px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_01.png');
    background-size: 88px auto;
}
#stage .wrp-virtual-title .logoText.text2 {
    left: 101px;
    width: 39.5px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_02.png');
    background-size: 39.5px auto;
}
#stage .wrp-virtual-title .logoText.text3 {
    left: 151px;
    width: 66px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_03.png');
    background-size: 66px auto;
}
#stage .wrp-virtual-title .logoText.text4 {
    left: 232px;
    width: 53.5px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_04.png');
    background-size: 53.5px auto;
}
#stage .wrp-virtual-title .logoText.text5 {
    left: 293px;
    width: 78.5px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_05.png');
    background-size: 78.5px auto;
}
#stage .wrp-virtual-title .logoText.text6 {
    left: 376.5px;
    width: 75px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_06.png');
    background-size: 75px auto;
}
#stage .wrp-virtual-title .logoText.text7 {
    left: 462.5px;
    width: 94px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_07.png');
    background-size: 94px auto;
}
#stage .wrp-virtual-title .logoText.text8 {
    left: 565.5px;
    width: 70px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_08.png');
    background-size: 70px auto;
}
#stage .wrp-virtual-title .logoText.text9 {
    left: 647px;
    width: 83px;
    background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_09.png');
    background-size: 83px auto;
}

/* ロゴ アニメーション
----------------------------------*/
/* miku */
#stage .is-animation .wrp-virtual-title .logoCharacter {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
    opacity: 0;
}
#stage .is-animation.onAnimation .wrp-virtual-title .logoCharacter {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all .9s cubic-bezier(0.65, 0, 0.35, 1);
    transition: transform .9s cubic-bezier(0.65, 0, 0.35, 1), opacity ease-out .9s;
}

/* 文字 */
#stage .is-animation .wrp-virtual-title .logoText {
    opacity: 0;
}
#stage .is-animation.onAnimation .wrp-virtual-title .logoText {
    opacity: 1;
    -webkit-transition: opacity .6s ease-out 2.4s;
    transition: opacity .6s ease-out 2.4s;
    -webkit-animation: logoAnimation 1.2s ease-out 1 alternate 2.4s;
    animation: logoAnimation 1.2s ease-out 1 alternate 2.4s;
}

#stage .is-animation.onAnimation .wrp-virtual-title .logoText.text1 {
    -webkit-transition-delay: 1.0s;
    transition-delay: 1.0s;
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
}
#stage .is-animation.onAnimation .wrp-virtual-title .logoText.text2 {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
#stage .is-animation.onAnimation .wrp-virtual-title .logoText.text3 {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
#stage .is-animation.onAnimation .wrp-virtual-title .logoText.text4 {
    -webkit-transition-delay: 1.6s;
    transition-delay: 1.6s;
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
#stage .is-animation.onAnimation .wrp-virtual-title .logoText.text5 {
    -webkit-transition-delay: 1.8s;
    transition-delay: 1.8s;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

@media screen and (max-width: 736px) {
    #stage .wrp-virtual-title {
        width: 300px;
        height: 275px;
        margin: 10px auto 25px;
    }

    /* ロゴ画像
    ----------------------------------*/
    #stage .wrp-virtual-title .logoCharacter {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 150px;
        background: url('/fun/factory/assets/virtual/top/img/img_title_character.png') no-repeat left top;
        background-size: 300px auto;
    }

    #stage .wrp-virtual-title .logoText {
        height: auto;
    }
    #stage .wrp-virtual-title .logoText.text1,
    #stage .wrp-virtual-title .logoText.text2,
    #stage .wrp-virtual-title .logoText.text3,
    #stage .wrp-virtual-title .logoText.text4,
    #stage .wrp-virtual-title .logoText.text5 {
        height: 56.5px;
        bottom: 100px;
    }
    #stage .wrp-virtual-title .logoText.text6,
    #stage .wrp-virtual-title .logoText.text7,
    #stage .wrp-virtual-title .logoText.text8,
    #stage .wrp-virtual-title .logoText.text9 {
        height: 81px;
        bottom: 6.5px;
    }

    #stage .wrp-virtual-title .logoText.text1 {
        left: 0;
        width: 73.5px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_01@sp.png');
        background-size: 73.5px auto;
    }
    #stage .wrp-virtual-title .logoText.text2 {
        left: 73px;
        width: 33px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_02@sp.png');
        background-size: 33px auto;
    }
    #stage .wrp-virtual-title .logoText.text3 {
        left: 114.5px;
        width: 55.5px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_03@sp.png');
        background-size: 55.5px auto;
    }
    #stage .wrp-virtual-title .logoText.text4 {
        left: 183.5px;
        width: 44.5px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_04@sp.png');
        background-size: 44.5px auto;
    }
    #stage .wrp-virtual-title .logoText.text5 {
        left: 234.5px;
        width: 65.5px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_05@sp.png');
        background-size: 65.5px auto;
    }
    #stage .wrp-virtual-title .logoText.text6 {
        left: 1px;
        width: 63px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_06@sp.png');
        background-size: 63px auto;
    }
    #stage .wrp-virtual-title .logoText.text7 {
        left: 73.5px;
        width: 79px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_07@sp.png');
        background-size: 79px auto;
    }
    #stage .wrp-virtual-title .logoText.text8 {
        left: 160.5px;
        width: 59px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_08@sp.png');
        background-size: 59px auto;
    }
    #stage .wrp-virtual-title .logoText.text9 {
        left: 229.5px;
        width: 69px;
        background-image: url('/fun/factory/assets/virtual/top/img/img_title_text_09@sp.png');
        background-size: 69px auto;
    }


    /* ロゴ アニメーション
    ----------------------------------*/
    /* miku */
    #stage .is-animation .wrp-virtual-title .logoCharacter {
        -webkit-transform: translateX(350px);
        transform: translateX(350px);
    }
}


/*----------------------------------------
  工場エリア
----------------------------------------*/
#stage .wrp-factorys-area {
    margin-bottom: 60px;
}

#stage .wrp-factorys-area > .wrp-factorys:first-child {
    background-image: url('/fun/factory/assets/virtual/top/img/bg_areatop_decoration.png');
    background-repeat: repeat-x;
    background-position: 50% top;
    background-size: 45px auto;
}

#stage .wrp-factorys {
    position: relative;
    margin-bottom: 30px;
}
#stage .wrp-factorys::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: 24px;
    width: 100%;
    background-color: #FFFFFF;
}

#stage .wrp-factorys > .inner {
    position: relative;
    max-width: 1200px;
    height: 544px;
    margin: 0 auto;
    padding-top: 55px;
    text-align: center;
}
#stage .wrp-factorys > .inner::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 24px;
    display: block;
    background: no-repeat center bottom;
    background-size: cover;
}

#stage .wrp-factorys .sttl {
    display: inline-block;
    padding-left: 50px;
    background: no-repeat left center;
    background-size: 40px auto;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
}
#stage .wrp-factorys .description {
    font-size: 18px;
}
#stage .wrp-factorys .description > br {
    display: none;
}

/* 工場イラスト
----------------------------------*/
#stage .wrp-factorys .img-factory {
    position: absolute;
    left: 50%;
    bottom: 0;
}

/* ミルク&ヨーグルト */
#stage .wrp-factorys .img-factory.img-red01 {
    margin-left: -343px;
}
#stage .wrp-factorys .img-factory.img-red01 img {
    width: 356px;
    height: 289px;
}

#stage .wrp-factorys .img-factory.img-red02 {
    margin-left: 108px;
}
#stage .wrp-factorys .img-factory.img-red02 img {
    width: 331px;
    height: 171px;
}

/* バター&マーガリン */
#stage .wrp-factorys .img-factory.img-yellow01 {
    margin-left: -400px;
}
#stage .wrp-factorys .img-factory.img-yellow01 img {
    width: 370px;
    height: 134px;
}

#stage .wrp-factorys .img-factory.img-yellow02 {
    margin-left: 52px;
}
#stage .wrp-factorys .img-factory.img-yellow02 img {
    width: 349px;
    height: 177px;
}

/* チーズ */
#stage .wrp-factorys .img-factory.img-blue01 {
    margin-left: -346px;
}
#stage .wrp-factorys .img-factory.img-blue01 img {
    width: 674px;
    height: 165px;
}

/* 商品画像ボタン
----------------------------------*/
#stage .wrp-factorys .btn-virtual {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 150px;
    height: 163px;
}
#stage .wrp-factorys .btn-virtual a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#stage .wrp-factorys .btn-virtual .btn-inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 163px;
    padding-bottom: 13px;
    background: no-repeat center top;
    background-size: cover;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    backface-visibility: hidden;
}
#stage .wrp-factorys .btn-virtual .btn-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    display: block;
    width: 150px;
    height: 163px;
    background: no-repeat center top;
    background-size: cover;
    -webkit-transition: all .3s ease-out .04s;
    transition: all .3s ease-out .04s;
}

/* 中のパーツ */
#stage .wrp-factorys .btn-virtual img {
    width: 110px;
    -webkit-transition: all .26s ease-out .04s;
    transition: all .26s ease-out .04s;
}
#stage .wrp-factorys .btn-virtual .text {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    line-height: 1.4;
    -webkit-transition: all .3s ease-out .04s;
    transition: all .3s ease-out .04s;
}

/* hover */
#stage .wrp-factorys .btn-virtual:hover .btn-inner {
    -webkit-animation: btnRotation .4s cubic-bezier(0.33, 1, 0.68, 1) 1 normal;
    animation: btnRotation .4s cubic-bezier(0.33, 1, 0.68, 1) 1 normal;
}
#stage .wrp-factorys .btn-virtual:hover .btn-inner::before {
    opacity: 1;
}
#stage .wrp-factorys .btn-virtual:hover img {
    opacity: 0;
}
#stage .wrp-factorys .btn-virtual:hover .text {
    opacity: 1;
    z-index: 1;
}

/* ミルク&ヨーグルト */
#stage .wrp-factorys .btn-virtual.btn-red01 {
    bottom: 194px;
    margin-left: -315px;
}

#stage .wrp-factorys .btn-virtual.btn-red02 {
    bottom: 181px;
    margin-left: 191px;
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
}

/* バター&マーガリン */
#stage .wrp-factorys .btn-virtual.btn-yellow01 {
    bottom: 158px;
    margin-left: -260px;
}

#stage .wrp-factorys .btn-virtual.btn-yellow02 {
    bottom: 172px;
    margin-left: 134px;
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
}

/* チーズ */
#stage .wrp-factorys .btn-virtual.btn-blue01 {
    bottom: 135px;
    margin-left: -356px;
}

#stage .wrp-factorys .btn-virtual.btn-blue02 {
    bottom: 165px;
    margin-left: -84px;
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
}

#stage .wrp-factorys .btn-virtual.btn-blue03 {
    bottom: 136px;
    margin-left: 219px;
    -webkit-animation-delay: 2.0s;
    animation-delay: 2.0s;
}

/* カラーバリエーション
----------------------------------*/
#stage .wrp-factorys.color-red {
    background-color: #FFD3B7;
}

#stage .wrp-factorys.color-yellow {
    background-color: #FFEC9A;
}

#stage .wrp-factorys.color-blue {
    background-color: #BEF0F5;
}

/* エリア背景画像 */
#stage .wrp-factorys.color-red > .inner {
    padding-top: 50px;
}
#stage .wrp-factorys.color-red > .inner::before {
    width: 1150px;
    height: 340px;
    margin-left: -575px;
    background-image: url('/fun/factory/assets/virtual/common/img/bg_area_red.png');
}

#stage .wrp-factorys.color-yellow > .inner {
    height: 519px;
}
#stage .wrp-factorys.color-yellow > .inner::before {
    width: 1150px;
    height: 340px;
    margin-left: -665px;
    background-image: url('/fun/factory/assets/virtual/common/img/bg_area_yellow.png');
}

#stage .wrp-factorys.color-blue > .inner {
    height: 500px;
}
#stage .wrp-factorys.color-blue > .inner::before {
    width: 1150px;
    height: 340px;
    margin-left: -515px;
    background-image: url('/fun/factory/assets/virtual/common/img/bg_area_blue.png');
}

/* タイトル */
#stage .wrp-factorys.color-red .sttl {
    background-image: url('/fun/factory/assets/virtual/common/img/icn_category_red.png');
    color: #F73921;
}

#stage .wrp-factorys.color-yellow .sttl {
    background-image: url('/fun/factory/assets/virtual/common/img/icn_category_yellow.png');
    color: #F59700;
}

#stage .wrp-factorys.color-blue .sttl {
    background-image: url('/fun/factory/assets/virtual/common/img/icn_category_blue.png');
    color: #007C93;
}

/* ボタン */
#stage .wrp-factorys.color-red .btn-virtual .btn-inner {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_red_def.png');
}
#stage .wrp-factorys.color-red .btn-virtual .btn-inner::before {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_red_over.png');
}

#stage .wrp-factorys.color-yellow .btn-virtual .btn-inner {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_yellow_def.png');
}
#stage .wrp-factorys.color-yellow .btn-virtual .btn-inner::before {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_yellow_over.png');
}

#stage .wrp-factorys.color-blue .btn-virtual .btn-inner {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_def.png');
}
#stage .wrp-factorys.color-blue .btn-virtual .btn-inner::before {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_over.png');
}

#stage .wrp-factorys.color-blue .btn-virtual.btn-blue01 .btn-inner {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_left_dev.png');
}
#stage .wrp-factorys.color-blue .btn-virtual.btn-blue01 .btn-inner::before {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_left_over.png');
}

#stage .wrp-factorys.color-blue .btn-virtual.btn-blue03 .btn-inner {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_right_dev.png');
}
#stage .wrp-factorys.color-blue .btn-virtual.btn-blue03 .btn-inner::before {
    background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_right_over.png');
}

/* スクロール アニメーション
----------------------------------*/
/* 工場イラスト */
#stage .is-animation .wrp-factorys .img-factory {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

#stage .is-animation .wrp-factorys.is-active .img-factory {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .45s cubic-bezier(0.5, 1, 0.89, 1);
    transition: transform .45s cubic-bezier(0.5, 1, 0.89, 1), opacity .55s cubic-bezier(0.76, 0, 0.24, 1);
}

#stage .is-animation .wrp-factorys.is-active .img-factory.img-red02 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}

#stage .is-animation .wrp-factorys.is-active .img-factory.img-yellow02 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}

/* 商品画像ボタン */
#stage .is-animation .wrp-factorys .btn-virtual {
    opacity: 0;
    backface-visibility: hidden;
}
#stage .is-animation .wrp-factorys.is-active .btn-virtual {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out;
    transition: opacity .4s ease-out;
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
    -webkit-animation: boundIn .5s cubic-bezier(0.4, 0, 0.4, 1) both;
    animation: boundIn .5s cubic-bezier(0.4, 0, 0.4, 1) both;
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
    perspective: 1000;
}

#stage .is-animation .wrp-factorys.is-active .btn-virtual.btn-red02 {
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}

#stage .is-animation .wrp-factorys.is-active .btn-virtual.btn-yellow02 {
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}

#stage .is-animation .wrp-factorys.is-active .btn-virtual.btn-blue02 {
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}

#stage .is-animation .wrp-factorys.is-active .btn-virtual.btn-blue03 {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}

#stage .is-animation .wrp-factorys .btn-virtual.completed {
    -webkit-animation: none !important;
    animation: none !important;
}

@media screen and (max-width: 736px) {
    #stage .wrp-factorys-area {
        margin-bottom: 54px;
    }

    #stage .wrp-factorys {
        margin-bottom: 20px;
    }
    #stage .wrp-factorys::before {
        height: 10px;
    }

    #stage .wrp-factorys > .inner {
        height: 490px;
        padding-top: 20px;
    }
    #stage .wrp-factorys > .inner::before {
        bottom: 10px;
    }

    #stage .wrp-factorys .sttl {
        display: inline-block;
        margin-bottom: 5px;
        padding-left: 0;
        padding-top: 60px;
        background: no-repeat center top;
        background-size: 50px auto;
        font-size: 28px;
    }
    #stage .wrp-factorys .description {
        font-size: 16px;
    }
    #stage .wrp-factorys .description > br {
        display: inline;
    }

    /* 工場イラスト
    ----------------------------------*/
    /* ミルク&ヨーグルト */
    #stage .wrp-factorys .img-factory.img-red01 {
        margin-left: -161px;
    }
    #stage .wrp-factorys .img-factory.img-red01 img {
        width: 161px;
        height: auto;
    }

    #stage .wrp-factorys .img-factory.img-red02 {
        margin-left: 17px;
    }
    #stage .wrp-factorys .img-factory.img-red02 img {
        width: 152px;
        height: auto;
    }

    /* バター&マーガリン */
    #stage .wrp-factorys .img-factory.img-yellow01 {
        margin-left: -172px;
    }
    #stage .wrp-factorys .img-factory.img-yellow01 img {
        width: 172px;
        height: auto;
    }

    #stage .wrp-factorys .img-factory.img-yellow02 {
        margin-left: 11px;
    }
    #stage .wrp-factorys .img-factory.img-yellow02 img {
        width: 162px;
        height: auto;
    }

    /* チーズ */
    #stage .wrp-factorys .img-factory.img-blue01 {
        margin-left: -163px;
    }
    #stage .wrp-factorys .img-factory.img-blue01 img {
        width: 312px;
        height: auto;
    }

    /* 商品画像ボタン
    ----------------------------------*/
    #stage .wrp-factorys .btn-virtual {
        width: 115px;
        height: 125px;
    }

    #stage .wrp-factorys .btn-virtual .btn-inner {
        width: 115px;
        height: 125px;
        padding-bottom: 10px;
        font-size: 14px;
    }
    #stage .wrp-factorys .btn-virtual .btn-inner::before {
        width: 115px;
        height: 125px;
    }

    /* 中のパーツ */
    #stage .wrp-factorys .btn-virtual img {
        width: 110px;
        width: 86px;
    }
    #stage .wrp-factorys .btn-virtual .text {
        width: 115px;
        height: 115px;
    }

    /* hover */
    #stage .wrp-factorys .btn-virtual:hover .btn-inner {
        -webkit-animation: none;
        animation: none;
    }
    #stage .wrp-factorys .btn-virtual:hover .btn-inner::before {
        opacity: 0;
    }
    #stage .wrp-factorys .btn-virtual:hover img {
        opacity: 1;
    }
    #stage .wrp-factorys .btn-virtual:hover .text {
        opacity: 0;
    }

    /* ミルク&ヨーグルト */
    #stage .wrp-factorys .btn-virtual.btn-red01 {
        bottom: 136px;
        margin-left: -148px;
    }

    #stage .wrp-factorys .btn-virtual.btn-red02 {
        bottom: 103px;
        margin-left: 35px;
    }

    /* バター&マーガリン */
    #stage .wrp-factorys .btn-virtual.btn-yellow01 {
        bottom: 85px;
        margin-left: -143px;
    }

    #stage .wrp-factorys .btn-virtual.btn-yellow02 {
        bottom: 89px;
        margin-left: 26px;
    }

    /* チーズ */
    #stage .wrp-factorys .btn-virtual.btn-blue01 {
        bottom: 137px;
        margin-left: -178px;
    }

    #stage .wrp-factorys .btn-virtual.btn-blue02 {
        bottom: 77px;
        margin-left: -55px;
    }

    #stage .wrp-factorys .btn-virtual.btn-blue03 {
        bottom: 111px;
        margin-left: 62px;
    }

    /* カラーバリエーション
    ----------------------------------*/
    /* エリア背景画像 */
    #stage .wrp-factorys.color-red > .inner {
        padding-top: 50px;
    }
    #stage .wrp-factorys.color-red > .inner::before {
        width: 846px;
        height: 250px;
        margin-left: -491px;
    }

    #stage .wrp-factorys.color-yellow > .inner {
        height: 440px;
    }
    #stage .wrp-factorys.color-yellow > .inner::before {
        width: 846px;
        height: 250px;
        margin-left: -438px;
    }

    #stage .wrp-factorys.color-blue > .inner {
        height: 443px;
    }
    #stage .wrp-factorys.color-blue > .inner::before {
        width: 672px;
        height: 199px;
        margin-left: -336px;
    }

    /* ボタン */
    #stage .wrp-factorys.color-red .btn-virtual .btn-inner {
        background-image: url('/fun/factory/assets/virtual/top/img/btn_item_red_def@sp.png');
    }
    #stage .wrp-factorys.color-red .btn-virtual .btn-inner::before {
        background-image: url('/fun/factory/assets/virtual/top/img/btn_item_red_over@sp.png');
    }

    #stage .wrp-factorys.color-yellow .btn-virtual .btn-inner {
        background-image: url('/fun/factory/assets/virtual/top/img/btn_item_yellow_def@sp.png');
    }
    #stage .wrp-factorys.color-yellow .btn-virtual .btn-inner::before {
        background-image: url('/fun/factory/assets/virtual/top/img/btn_item_yellow_over@sp.png');
    }

    #stage .wrp-factorys.color-blue .btn-virtual .btn-inner,
    #stage .wrp-factorys.color-blue .btn-virtual.btn-blue01 .btn-inner,
    #stage .wrp-factorys.color-blue .btn-virtual.btn-blue03 .btn-inner {
        background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_def@sp.png');
    }
    #stage .wrp-factorys.color-blue .btn-virtual .btn-inner::before,
    #stage .wrp-factorys.color-blue .btn-virtual.btn-blue01 .btn-inner::before,
    #stage .wrp-factorys.color-blue .btn-virtual.btn-blue03 .btn-inner::before {
        background-image: url('/fun/factory/assets/virtual/top/img/btn_item_blue_over@sp.png');
    }

    /* スクロール アニメーション
    ----------------------------------*/
    /* 工場イラスト */
    #stage .is-animation .wrp-factorys .img-factory {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
}