@charset "utf-8";

#index{
    visibility: hidden;
}



body.loaded #index{
    visibility: visible;
}



@media print,screen and (min-width: 769px) {

    body{
/*        overflow: hidden;*/
        overflow-x: hidden;
        background-color: #000;
    }

    #wrapper{
        background-color: #000;
        background-image: none;
    }


    #index{

        overflow: hidden;
        position: relative;
        width: 0;
/*        border:15px #0a1f4b solid;*/
        background-color: #fff;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-image: url("../../common/img/back.png");

    }


/*
    #index .outer{
        position: absolute;
        left: 50%;
        top: 0;
    }
*/

    #index .inner{
        position: absolute;
        left: 0;
        top: 0;
        width: 8320px;
        height: 1400px;
        overflow: hidden;
    }

    #index .line_top{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 15px;
        background-color: #e59a36;
    }
    #index .line_bottom{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 15px;
        background-color: #e59a36;
    }

    #index .line_right{
        position: absolute;
        right: 0;
        top: 0;
        width: 15px;
        height: 100%;
        background-color: #e59a36;
    }

    #index .inner .illust{
        position: relative;
        width: 100%;
        height: 100%;
/*        background-image: url("../img/atari.jpg");*/
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }


    #index h1{
        background-image: url("../img/title.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        left: 100px;
        bottom: 10px;
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
        left: 100px;
        bottom: 10px;
        height: 11vh;
        width: calc( 11vh / 170 * 2307 );
    }


    #index .logo{
        background-image: url("../img/logo.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        left: 100px;
        top: 30px;
        width: 300px;
        height: 24.66px;
        text-indent: -9999px;
        overflow: hidden;
    }

    #index .buttons{
        position: absolute;
        left: 38%;
        top: 10vh;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        height: 80vh;
        overflow: hidden;
        z-index: 1;
        width: 34%;
        justify-content:space-between;
    }

    #index .buttons li{
        position: relative;
    }



    #index .buttons li a{
        display: block;
        position: relative;
        height: 80vh;
        width: calc(80vh / 1200 * 320);
    }


    #index .buttons li a:hover{
        opacity:1;
    }


    #index .buttons li .bk{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
/*
        background-image: url("../img/btn_tex.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
*/
        background-color: #fff;
    }



    #index .buttons li .t{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        display: block;
    }


    #index .buttons li:not(.coming):hover .bk{
      opacity:0.8;
    }




    #index .buttons li.coming  .cm{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: -moz-linear-gradient(top,  rgba(10,31,75,0.9) 0%, rgba(10,31,75,0.9) 1%, rgba(10,31,75,0.9) 70%, rgba(10,31,75,0) 100%);
        background: -webkit-linear-gradient(top,  rgba(10,31,75,0.9) 0%,rgba(10,31,75,0.9) 1%,rgba(10,31,75,0.9) 70%,rgba(10,31,75,0) 100%);
        background: linear-gradient(to bottom,  rgba(10,31,75,0.9) 0%,rgba(10,31,75,0.9) 1%,rgba(10,31,75,0.9) 70%,rgba(10,31,75,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60a1f4b', endColorstr='#000a1f4b',GradientType=0 );
    }
    #index .buttons li.coming .cm span{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        background-image: url("../img/btn_coming.png");
        background-repeat: no-repeat;
        background-position: center calc(8vh) ;
        -webkit-background-size:calc(48vh / 726 * 52) calc(48vh) ;
        background-size:calc(48vh / 726 * 52) calc(48vh) ;
        text-indent: -9999px;
        overflow: hidden;
    }



    #index .buttons li:nth-child(1) .t{
        background-image: url("../img/btn1.png");
    }


    #index .buttons li:nth-child(2) .t{
        background-image: url("../img/btn2.png");
    }


    #index .buttons li:nth-child(3) .t{
        background-image: url("../img/btn3.png");
    }


    #index .buttons li:nth-child(4) .t{
        background-image: url("../img/btn4.png");
    }


    #index .buttons li:nth-child(5) .t{
        background-image: url("../img/btn5.png");
    }

    #index .buttons li:nth-child(6) .t{
        background-image: url("../img/btn6.png");

    }




    #index .entry{
        position: absolute;
        left: 81.7%;
        top: 48vh;
    }

    #index .entry .tit{
        position: absolute;
        left: -220px;
        top: -200px;
        width: 460px;

    }
    #index .entry .btn a{
                display: block;
        position: absolute;
        left: -90px;
        top: 40px;
        width: 200px;


    }



    #index .fudes {
        position: absolute;
        left: 0;
        top: 0;
        width: 7680px;
        height: 1400px;
        overflow: hidden;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        z-index: 100;
        pointer-events: none;

    }

    #index .fudes .fude {
        height: 100vh;
        width: calc(100vh / 1000 * 800);
        margin-left:  calc((-100vh / 1000 * 800) * 0.8);
        overflow: hidden;
    }

    #index .fudes .fude div {
        height: 100vh;
        width: calc(100vh / 1000 * 800);
        overflow: hidden;
    }

    #index .fudes .fude span {
        display: block;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        height: 100vh;
        width: calc(100vh / 1000 * 800);
    }


    #index .fudes .fude.close div {
        width:0;
        transform:translateX( calc(100vh / 1000 * 800) );
        visibility:hidden;
        transition-duration: 100ms;
        transition-property: width,visibility,transform;
        transition-timing-function: linear;
    }
    #index .fudes .fude.close div span {
        transform:translateX( calc(-100vh / 1000 * 800) );
        transition-duration:100ms;
        transition-property:transform;
        transition-timing-function: linear;
    }

    #index .fudes .fude.fude1 span {
        background-image: url("../img/fude1.png");
    }
    #index .fudes .fude.fude2 span {
        background-image: url("../img/fude2.png");
    }
    #index .fudes .fude.fude3 span {
        background-image: url("../img/fude3.png");
    }
    #index .fudes .fude.fude4 span {
        background-image: url("../img/fude4.png");
    }

}



@media only screen and (max-width: 768px) {



    body{
        background-color: #000;
    }

    #wrapper{
        background-color: #000;
        background-image: none;
    }


    #index{

        overflow: hidden;
        position: relative;
        width: 100vw;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background-image: url("../../common/img/back.png");

    }



    #index .inner{
        width: 100vw;
        height: calc(100vw / 750 * 5600);
        overflow: hidden;
    }

    #index .line_top{
        position: fixed;
        left: 0;
        top: 0;
        width: 8px;
        height: 100%;
        background-color: #e59a36;
    }
    #index .line_bottom{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 8px;
        background-color: #e59a36;
    }

    #index .line_right{
        position: fixed;
        right: 0;
        top: 0;
        width: 8px;
        height: 100%;
        background-color: #e59a36;
    }

    #index .inner .illust{
        position: relative;
        width: 100%;
        height: 100%;
/*                background-image: url("http://www.marusen.co.jp/recruit/index/img/obj/atari_sp2.jpg");*/
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }


    #index h1{
        background-image: url("../img/title_sp.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        left: 100px;
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
        left: 6vw;
        top: calc(6vw + 50px);
        width: 11vw;
        height: calc(11vw / 95 * 1039);

    }


    #index .logo{
        background-image: url("../img/logo.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        right: 6vw;
        top: calc(3vw + 50px);
        width: 300px;
        height: 24.66px;
        text-indent: -9999px;
        overflow: hidden;
    }

    #index .buttons{
        position: absolute;
        left: 6vw;
        top: 300vw;
        overflow: hidden;
        z-index: 1;
        width: 88vw;
    }

    #index .buttons li{
        position: relative;
    }


    #index .buttons li a{
        display: block;
        position: relative;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
        width: 88vw;
        height: calc(88vw / 600 * 161);
        margin-bottom: 6vw;
    }



    #index .buttons li .bk{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
/*
        background-image: url("../img/btn_tex.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
*/
        background-color: #fff;
    }


    #index .buttons li .t{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }




    #index .buttons li.coming .cm{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: -moz-linear-gradient(left,  rgba(10,31,75,0.9) 0%, rgba(10,31,75,0.9) 1%, rgba(10,31,75,0.9) 70%, rgba(10,31,75,0) 100%);
        background: -webkit-linear-gradient(left,  rgba(10,31,75,0.9) 0%,rgba(10,31,75,0.9) 1%,rgba(10,31,75,0.9) 70%,rgba(10,31,75,0) 100%);
        background: linear-gradient(to right,  rgba(10,31,75,0.9) 0%,rgba(10,31,75,0.9) 1%,rgba(10,31,75,0.9) 70%,rgba(10,31,75,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60a1f4b', endColorstr='#000a1f4b',GradientType=1 );

    }
    #index .buttons li.coming .cm span{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        background-image: url("../img/btn_coming_sp.png");
        background-repeat: no-repeat;
        background-position: 10vw center ;
        -webkit-background-size:calc(50vw) calc(50vw / 306 * 26) ;
        background-size:calc(50vw) calc(50vw / 306 * 26) ;
    }



    #index .buttons li:nth-child(1) .t{
        background-image: url("../img/btn1_sp.png");
    }


    #index .buttons li:nth-child(2) .t{
        background-image: url("../img/btn2_sp.png");
    }


    #index .buttons li:nth-child(3) .t{
        background-image: url("../img/btn3_sp.png");
    }


    #index .buttons li:nth-child(4) .t{
        background-image: url("../img/btn4_sp.png");
    }


    #index .buttons li:nth-child(5) .t{
        background-image: url("../img/btn5_sp.png");
    }

    #index .buttons li:nth-child(6) .t{
        background-image: url("../img/btn6_sp.png");

    }




    #index .entry{
        position: absolute;
        left: 0;
        top: 522vw;
        width: 100vw;
    }

    #index .entry .tit{
        width: 45vw;
        margin-left: auto;
        margin-right: auto;
    }
    #index .entry .btn a{
        margin-top: 3vw;
        display: block;
        width: 26vw;
        margin-left: auto;
        margin-right: auto;
    }



    #index .fudes {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: calc(100vw / 750 * 5600);
        overflow: hidden;
        z-index: 100;
        pointer-events: none;
    }

    #index .fudes .fude {
        width: 100vw;
        height: calc(100vw / 750 * 375 );
        margin-top:  calc((-100vw / 750 * 375) * 0.8);
        overflow: hidden;
    }

    #index .fudes .fude div {
        width: 100vw;
        height: calc(100vw / 750 * 375 );
        overflow: hidden;
    }

    #index .fudes .fude span {
        display: block;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: 100vw;
        height: calc(100vw / 750 * 375 );
    }


    #index .fudes .fude.close div {
        height:0;
        transform:translateY( calc(100vw / 750 * 375) );
        visibility:hidden;
        transition-duration: 100ms;
        transition-property: height,visibility,transform;
        transition-timing-function: linear;
    }
    #index .fudes .fude.close div span {
        transform:translateY( calc(-100vw / 750 * 375) );
        transition-duration:100ms;
        transition-property:transform;
        transition-timing-function: linear;
    }

    #index .fudes .fude.fude1 span {
        background-image: url("../img/fude1_sp.png");
    }
    #index .fudes .fude.fude2 span {
        background-image: url("../img/fude2_sp.png");
    }
    #index .fudes .fude.fude3 span {
        background-image: url("../img/fude3_sp.png");
    }
    #index .fudes .fude.fude4 span {
        background-image: url("../img/fude4_sp.png");
    }


}