@charset "utf-8";

/*
**************************************************************************
* 雪印メグミルク - 工場見学 - オンライン工場見学 - TOP
**************************************************************************/

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

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

/*----------------------------------------
  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-online-title) {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}
#stage .is-animation.onAnimation #contentArea > *:not(.wrp-online-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-online-title {
    position: relative;
    width: 801px;
    height: 247px;
    margin: 26px auto 47px;
}

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

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

/* ロゴ画像
----------------------------------*/
#stage .wrp-online-title .logoCharacter {
    position: absolute;
    left: 203.5px;
    top: 7px;
    width: 399px;
    height: 152.5px;
    background: url('/fun/factory/assets/online/top/img/img_title_character.png') no-repeat left top;
    background-size: 100% auto;
}

#stage .wrp-online-title .logoText {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 98px;
    background: no-repeat left top;
    background-size: 100% auto;
}
#stage .wrp-online-title .logoText.text1 {
    left: 10px;
    width: 67.5px;
    background-image: url('/fun/factory/assets/online/top/img/img_title_text_01.png');
}
#stage .wrp-online-title .logoText.text2 {
    left: 77.5px;
    width: 69px;
    background-image: url('/fun/factory/assets/online/top/img/img_title_text_02.png');
}
#stage .wrp-online-title .logoText.text3 {
    left: 146.5px;
    width: 69px;
    background-image: url('/fun/factory/assets/online/top/img/img_title_text_03.png');
}
#stage .wrp-online-title .logoText.text4 {
    left: 215.5px;
    width: 65px;
    background-image: url('/fun/factory/assets/online/top/img/img_title_text_04.png');
}
#stage .wrp-online-title .logoText.text5 {
    left: 280.5px;
    width: 66px;
    background-image: url('/fun/factory/assets/online/top/img/img_title_text_05.png');
}
#stage .wrp-online-title .logoText.text6 {
    left: 346.5px;
    width: 126.5px;
    background-image: url('/fun/factory/assets/online/top/img/img_title_text_06.png');
}
#stage .wrp-online-title .logoText.text7 {
    left: 482.5px;
    width: 298px;
    background-image: url('/fun/factory/assets/online/top/img/img_title_text_07.png');
}

/* ロゴ アニメーション
----------------------------------*/
/* miku */
#stage .is-animation .wrp-online-title .logoCharacter {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
    opacity: 0;
}
#stage .is-animation.onAnimation .wrp-online-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-online-title .logoText {
    opacity: 0;
}
#stage .is-animation.onAnimation .wrp-online-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-online-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-online-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-online-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-online-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-online-title .logoText.text5 {
    -webkit-transition-delay: 1.8s;
    transition-delay: 1.8s;
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
#stage .is-animation.onAnimation .wrp-online-title .logoText.text6 {
    -webkit-transition-delay: 2.0s;
    transition-delay: 2.0s;
    -webkit-animation-delay: 2.0s;
    animation-delay: 2.0s;
}
#stage .is-animation.onAnimation .wrp-online-title .logoText.text7 {
    -webkit-transition-delay: 2.2s;
    transition-delay: 2.2s;
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}

/* バルーン */
#stage .is-animation .wrp-online-title .balloon a {
    opacity: 0;
}
#stage .is-animation.onAnimation .wrp-online-title .balloon a {
    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-online-title .balloon a {
    -webkit-transition-delay: 2.4s;
    transition-delay: 2.4s;
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}

/* バルーン
----------------------------------*/
#stage .wrp-online-title .balloon {
    position: absolute;
    right: -146px;
    top: 183px;
    z-index: 1000;
}
#stage .wrp-online-title .balloon a {
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 171px;
    height: 171px;
    background: #15388D;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    transition: top .2s ease-in-out;
}
#stage .wrp-online-title .balloon a:hover {
    top: 3px;
}
#stage .wrp-online-title .balloon a::before {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    display: block;
    content: '';
    border: 3px solid #fff;
    border-radius: 50%;
}
#stage .wrp-online-title .balloon a::after {
    display: block;
    content: '';
    width: 11px;
    height: 10px;
    position: absolute;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    transform-origin: center;
    background: url(/fun/factory/assets/online/common/img/ico_arrow_right_white.png) no-repeat center center;
    background-size: 11px auto;
}

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

    /* ロゴ画像
    ----------------------------------*/
    #stage .wrp-online-title {
        position: relative;
        width: calc(692/750*100%);
        height: calc(488/750*100vw);
        margin: 12px auto 70px;
    }
    #stage .wrp-online-title .logoCharacter {
        left: calc(94/750*100vw);
        top: 0;
        width: calc(530/750*100vw);
        height: calc(203/750*100vw);
    }
    #stage .wrp-online-title .logoText {
        top: calc(209/750*100vw);
        height: 98px;
        background: no-repeat left top;
        background-size: 100% auto;
    }
    #stage .wrp-online-title .logoText.text1 {
        left: calc(68/750*100vw);
        width: calc(105/750*100vw);
        background-image: url('/fun/factory/assets/online/top/img/img_title_text_01_sp.png');
    }
    #stage .wrp-online-title .logoText.text2 {
        left: calc(173/750*100vw);
        width: calc(116/750*100vw);
        background-image: url('/fun/factory/assets/online/top/img/img_title_text_02_sp.png');
    }
    #stage .wrp-online-title .logoText.text3 {
        left: calc(289/750*100vw);
        width: calc(108/750*100vw);
        background-image: url('/fun/factory/assets/online/top/img/img_title_text_03_sp.png');
    }
    #stage .wrp-online-title .logoText.text4 {
        left: calc(397/750*100vw);
        width: calc(108/750*100vw);
        background-image: url('/fun/factory/assets/online/top/img/img_title_text_04_sp.png');
    }
    #stage .wrp-online-title .logoText.text5 {
        left: calc(505/750*100vw);
        width: calc(110/750*100vw);
        background-image: url('/fun/factory/assets/online/top/img/img_title_text_05_sp.png');
    }
    #stage .wrp-online-title .logoText.text6 {
        top: calc(328/750*100vw);
        left: calc(68/750*100vw);
        width: calc(560/750*100vw);
        background-image: url('/fun/factory/assets/online/top/img/img_title_text_06_sp.png');
    }
    #stage .wrp-online-title .logoText.text7 {
        top: calc(352/750*100vw);
        left: calc(68/750*100vw);
        width: calc(588/750*100vw);
        background-image: url('/fun/factory/assets/online/top/img/img_title_text_07_sp.png');
    }

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

    /* バルーン
    ----------------------------------*/
    #stage .wrp-online-title .balloon {
        right: auto;
        left: 50%;
        top: calc( 244/375*100vw + 10px );
        z-index: 1000;
        transform: translateX(-50%);
    }
    #stage .wrp-online-title .balloon a {
        width: 129px;
        height: 129px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
    }
    #stage .wrp-online-title .balloon a:hover {
        top: 0;
    }
    #stage .wrp-online-title .balloon a::before {
        top: 3px;
        right: 3px;
        bottom: 3px;
        left: 3px;
        border: 2px solid #fff;
    }
    #stage .wrp-online-title .balloon a::after {
        bottom: 12px;
    }
}

/*----------------------------------------
    とは
----------------------------------------*/
#stage .wrp-outline-area {
    position: relative;
    margin-bottom: 60px;
}
#stage .wrp-outline-area::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: block;
    content: '';
    width: 100%;
    height: 45px;
    background-image: url('/fun/factory/assets/online/top/img/bg_areatop_decoration.png');
    background-repeat: repeat-x;
    background-position: 50% top;
    background-size: 45px auto;
}
#stage .wrp-outline-area .img-hero {
    position: relative;
    height: 390px;
}
#stage .wrp-outline-area .img-hero > p img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: auto;
    height: 390px;
}
#stage .wrp-outline-area .img-hero .img-tip {
    position: absolute;
    bottom: -82px;
    left: 50%;
}
#stage .wrp-outline-area .img-hero .img-tip-left {
    margin-left: -548px;
    width: 281px;
}
#stage .wrp-outline-area .img-hero .img-tip-right {
    margin-left: 235px;
    width: 347px;
}
#stage .wrp-outline-area .img-hero .img-tip img {
    width: 100%;
}
#stage .wrp-outline-area .inner {
    margin: 0 auto;
    width: 670px;
}
#stage .wrp-outline-area .sttl {
    margin-top: 70px;
    margin-bottom: 30px;
    color: #0039a6;
    font-size: 32px;
    line-height: 1.4;
    text-align: center;
}
#stage .wrp-outline-area .description {
    font-size: 18px;
    line-height: 1.722222222;
}

@media screen and (max-width: 736px) {
    #stage .wrp-outline-area {
        margin-bottom: 50px;
    }
    #stage .wrp-outline-area::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        display: block;
        content: '';
        width: 100%;
        height: 45px;
        background-image: url('/fun/factory/assets/online/top/img/bg_areatop_decoration.png');
        background-repeat: repeat-x;
        background-position: 50% top;
        background-size: 45px auto;
    }
    #stage .wrp-outline-area .img-hero {
        height: auto;
    }
    #stage .wrp-outline-area .img-hero > p img {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        display: block;
        width: 100%;
        height: auto;
    }
    #stage .wrp-outline-area .img-hero .img-tip {
        bottom: calc(-10/375*100vw);
        left: 0;
    }
    #stage .wrp-outline-area .img-hero .img-tip-left {
        left: calc(5/375*100vw);
        margin-left: 0;
        width: calc(173/375*100vw);
    }
    #stage .wrp-outline-area .img-hero .img-tip-right {
        left: calc(212/375*100vw);
        margin-left: 0;
        width: calc(140/375*100vw);
    }
    #stage .wrp-outline-area .inner {
        padding: 0 20px;
        width: 100%;
    }
    #stage .wrp-outline-area .sttl {
        margin-top: 40px;
        margin-bottom: 24px;
        font-size: 24px;
    }
}

/*----------------------------------------
    おすすめ
----------------------------------------*/
#stage .wrp-recommend {
    padding: 60px 0;
    background: #BCEAF8;
}
#stage .wrp-recommend .inner {
    margin: 0 auto;
    max-width: 1000px;
}
#stage .wrp-recommend .recommend {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
#stage .wrp-recommend .recommend-items {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
#stage .wrp-recommend .recommend-items:nth-of-type(1) {
    margin-right: 40px;
    width: 306px;
}
#stage .wrp-recommend .recommend-items:nth-of-type(2) {
    width: calc((100% - 40px * 2 ) / 3 * 2 + 40px );
}
#stage .wrp-recommend .recommend-item {
    position: relative;
    width: 306px;
}
#stage .wrp-recommend .recommend-item + .recommend-item {
    margin-left: 40px;
}
#stage .wrp-recommend .recommend-item .img {
    border: 6px solid #fff;
    border-radius: 15px;
    overflow: hidden;
}
#stage .wrp-recommend .recommend-item .img img {
    width: 100%;
}
#stage .wrp-recommend .recommend-items .description {
    position: relative;
    margin-top: 52px;
    width: 100%;
    font-size: 18px;
    line-height: 1.722222222;
}
#stage .wrp-recommend .recommend-items .description::before {
    position: absolute;
    top: -72px;
    left: 20px;
    display: block;
    content: 'おすすめ！';
    padding: 17px 0;
    width: 110px;
    background: #fff;
    border-radius: 15px;
    color: #0039a6;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}
#stage .wrp-recommend .recommend-items .description::after {
    position: absolute;
    top: -22px;
    left: calc(( 110px / 2 ) + 10px);
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-color: #fff transparent transparent transparent;
    border-width: 13px 7px 0 7px;
    border-style: solid;
}

@media screen and (max-width: 736px) {
    #stage .wrp-recommend {
        padding: 32px 0 53px;
        background: #BCEAF8;
    }
    #stage .wrp-recommend .inner {
        margin: 0 auto;
        max-width: 1000px;
    }
    #stage .wrp-recommend .recommend {
        display: block;
        padding: 0 20px;
    }
    #stage .wrp-recommend .recommend-items {
        display: block;
    }
    #stage .wrp-recommend .recommend-items:nth-of-type(1) {
        margin-right: 0;
        width: 100%;
    }
    #stage .wrp-recommend .recommend-items:nth-of-type(2) {
        margin-top: 40px;
        width: 100%;
    }
    #stage .wrp-recommend .recommend-item {
        width: 100%;
    }
    #stage .wrp-recommend .recommend-item + .recommend-item {
        margin-top: 10px;
        margin-left: 0;
    }
    #stage .wrp-recommend .recommend-item:not(:nth-of-type(1))::before,
    #stage .wrp-recommend .recommend-item:not(:nth-of-type(1))::after {
        display: none;
    }
    #stage .wrp-recommend .recommend-items .description::before {
        top: -88px;
        left: 50%;
        transform: translateX(-50%);
        padding: 20px 0;
        width: 190px;
        font-size: 20px;
    }
    #stage .wrp-recommend .recommend-items .description::after {
        top: -28px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/*----------------------------------------
    申し込み
----------------------------------------*/
#stage .wrp-application {
    position: relative;
    padding: 0 0 80px;
}
#stage .wrp-application::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: block;
    content: '';
    width: 100%;
    height: 45px;
    background-image: url('/fun/factory/assets/online/top/img/bg_areatop_decoration_lightblue.png');
    background-repeat: repeat-x;
    background-position: 50% top;
    background-size: 45px auto;
}
#stage .wrp-application .inner {
    margin: 0 auto;
    max-width: 1000px;
}
#stage .wrp-application .ttl {
    position: relative;
    padding: 110px 0 70px 90px;
    color: #023692;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.6875;
    text-align: center;
}
#stage .wrp-application .ttl span {
    display: inline-block;
    background: linear-gradient( to top, transparent 10%, #CBF4A7 10%, #CBF4A7 35%, transparent 35%);
}
#stage .wrp-application .application {
    display: flex;
    flex-wrap: wrap;
}
#stage .wrp-application .application-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
    width: calc((100% - 40px) / 2);
    background: #EFFBFF;
    border-radius: 15px;
    overflow: hidden;
}
#stage .wrp-application .application-item + .application-item {
    margin-left: 40px;
}
#stage .wrp-application .application-item .img {
    margin-bottom: 30px;
}
#stage .wrp-application .application-item .sttl {
    margin-bottom: 30px;
    padding: 0 40px;
    color: #023692;
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
    font-weight: 700;
}
#stage .wrp-application .application-item .description {
    margin-bottom: auto;
    padding: 0 40px 30px;
    font-size: 18px;
    line-height: 1.722222222;
}
#stage .wrp-application .application-item .detail {
    margin: 0 20px 30px;
    padding: 28px 20px;
    background: #fff;
}
#stage .wrp-application .application-item .detail-sttl {
    margin-bottom: 18px;
    color: #023692;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
}
#stage .wrp-application .application-item .detail-description {
    font-size: 18px;
    line-height: 1.722222222;
}
#stage .wrp-application .application-item .button {
    position: relative;
    margin: 0 auto;
    width: 300px;
}
#stage .wrp-application .application-item .button a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 21px 40px;
    width: 300px;
    height: 100%;
    background: #0039A6;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    transform: scale(1);
    transition: transform .3s;
}
#stage .wrp-application .application-item .button a:hover {
    transform: scale(1.02);
}
#stage .wrp-application .application-item .button a::before {
    display: block;
    content: '';
    width: 11px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-49.5%);
    background: url(/fun/factory/assets/online/common/img/ico_arrow_right_white.png) no-repeat center center;
    background-size: 11px auto;
}
#stage .wrp-application .note {
    margin-top: 20px;
    color: #566E80;
    font-size: 14px;
    line-height: 1.5;
}
#stage .wrp-application .note > p {
    margin-left: 1em;
    text-indent: -1em;
}
@media screen and (min-width: 737px) {
    #stage .wrp-application .application-item .img {
        margin-bottom: 30px;
        height: 220px;
    }
    #stage .wrp-application .application-item .img p {
        height: 100%;
        overflow: hidden;
    }
    #stage .wrp-application .application-item .img a {
        display: block;
        height: 100%;
        overflow: hidden;
    }
    #stage .wrp-application .application-item .img a img {
        width: auto;
        height: 100%;
        transform: scale(1);
        transition: transform .3s;
    }
    #stage .wrp-application .application-item .img a:hover img {
        transform: scale(1.02);
    }
}
@media screen and (max-width: 736px) {
    #stage .wrp-application {
        position: relative;
        padding: 80px 0;
    }
    #stage .wrp-application::before {
        top: 0;
    }
    #stage .wrp-application .inner {
        padding: 0 20px;
    }
    #stage .wrp-application .ttl {
        padding: 0 0 74px;
        font-size: 24px;
    }
    #stage .wrp-application .ttl::before {
        top: 0;
        z-index: 2;
        margin-left: -64px;
        width: 143px;
        height: 263px;
    }
    #stage .wrp-application .application {
        display: block;
    }
    #stage .wrp-application .application-item {
        display: block;
        width: 100%;
    }
    #stage .wrp-application .application-item + .application-item {
        margin-top: 30px;
        margin-left: 0;
    }
    #stage .wrp-application .application-item .img {
        margin-bottom: 30px;
    }
    #stage .wrp-application .application-item .img img {
        width: 100%;
        height: auto;
    }
    #stage .wrp-application .application-item .sttl {
        margin-bottom: 20px;
        padding: 0 20px;
        font-size: 20px;
    }
    #stage .wrp-application .application-item .description {
        margin-bottom: auto;
        padding: 0 20px 30px;
    }
    #stage .wrp-application .application-item .detail {
        margin: 0 10px 30px;
        padding: 25px 10px;
    }
    #stage .wrp-application .application-item .detail-sttl {
        margin-bottom: 15px;
        font-size: 18px;
    }
    #stage .wrp-application .application-item .detail-description {
        font-size: 18px;
        line-height: 1.722222222;
    }
    #stage .wrp-application .application-item .button {
        padding: 0 16px;
        width: 100%;
        min-width: 300px;
    }
    #stage .wrp-application .application-item .button a {
        margin: 0 auto;
        width: 100%;
        max-width: 300px;
        height: 100%;
    }
    #stage .wrp-application .application-item .button a:hover {
        transform: scale(1);
    }
}