@charset "UTF-8";




#top .chara1{
    background-image: url(../../common/img/home-icon01.png);
    transition-delay:400ms;
}
#top .chara2{
    background-image: url(../../common/img/home-icon02.png);
    transition-delay: 200ms;
}
#top .chara3{
    background-image: url(../../common/img/home-icon03.png);
    transition-delay: 0ms;
}

#top .chara4{
    background-image: url(../../common/img/home-icon04.png);
    transition-delay: 200ms;
}




header .logo{
    position: absolute;
}
#top .back{
    background-image: url(img/back.png);
    background-position: center bottom;
}


    
    
  
    #top .inner1{
        /* background-color: rgba(255,0,0,0.2); */
        top: calc((100% - 102px ) / 2 - (600px / 2) );
    }

    #top .inner2{
        /* background-color: rgba(0,255,0,0.2); */
        top:calc(100%   - 600px - 32px - 80px );
        transform-origin: center bottom;
    }

    #top h1{
        margin-top: 50px;
       background-image: url(../../common/img/home-alsok-connect.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: calc(1472px / 2);
        height: calc(244px / 2);
        text-indent: -9999px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }

    #top h2{
       background-image: url(img/title.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: calc(1400px / 2);
        height: calc(382px / 2);
        text-indent: -9999px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }
    #top .lead{
       
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        line-height: 1.5em;
       margin-top: -20px;
    }
    
    
    .startbtn{
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
        width: 290px;
        height: 84px;
        border: 3px #1F469C solid;
        border-radius: 100px;
        box-shadow: 0 4px 0 #1F469C;
        background-color: #1F469C;
    }

 
    .startbtn a{
        width: 290px;
        height: 84px;
        display: block;
        background-color: #FFEF01;
        text-decoration: none;
        line-height: 1em;
        color: #1F469C;
        font-weight: bold;
        font-size: 26px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items: center;
        align-items: center;
        background-image: url(../../common/img/next.png);
        -webkit-background-size: calc(40px / 2) calc(40px / 2);
        background-size: calc(40px / 2) calc(40px / 2);
        background-position: calc(100% - 20px) center;
        background-repeat: no-repeat;
        border-radius: 100px;
        border:3px #fff solid;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 20px;
    }

    
    .time{
        font-size: 20px;
        margin-top: 25px;
        text-align: center;
        font-weight: bold;
    }



    
 
    





    #top .chara{
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: calc(250px / 2);
        height: calc(1000px / 2);
        position: absolute;
    }

    #top .chara1{
        left: 100px;
        top: 120px;
        width: 150px;
        height: 150px;
    }
    #top .chara2{
        left: 240px;
        top: 50%;
        width: 100px;
        height: 100px;
    }
    #top .chara3{
        left: 80px;
        bottom: 120px;
        width: 120px;
        height: 120px;
    }
    
    #top .chara4{
        right: 100px;
        bottom: 40%;
        width: 250px;
        height: 250px;
    }
  


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

    #top .inner1{
        top: 0;
    }

    .contents {
        margin: 0;
        padding: 0;
        /* height: calc(100vw / 750 * 1240 ); */
       /* height: calc(100vh - 30px); 
        display: flex;
        flex-direction: column;
       justify-content: space-between;*/
    }
    .contents .up{
        position: relative;
        background-color: #67D2FD;
        /*flex:1;*/
    }
    .contents .bottom{
        position: relative;
        background-color: #B2F7C3;
        /*flex:1;*/
    }
    .contents .content {
        height: 110vh;
        position: relative;
        padding-top: 0;
        overflow:visible;
        align-items: normal;
        top: 0;
      
    }
    .contents .content .inner {
    }

    /*#top .back{
        background-size: 100% auto;
        background-image: url(img/back_sp.png);
        background-position: center bottom;
    }*/

  
    
    #top .inner{
        height: 100vh;
        padding-top: 50px;
    }
    #top h1 {
        margin-top: 0;
    }

    #top h2{
        background-image: url(img/title.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: calc(86vw);
        height: calc(86vw / 3064 * 852 );
        text-indent: -9999px;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }
    #top .lead{
        text-align: center;
        margin-top:-4vw;
        font-size: 20px;
        line-height: 1.75em;
        font-weight: bold;
    }


    /*.startbtn{
        margin-top: 4vw;
        margin-left: auto;
        margin-right: auto;
        width: 80vw;
        height: calc(80vw / 300 * 50);
        border: 3px #00504a solid;
        border-radius: 100px;
        box-shadow: 0 4px 0 #00504a;
        background-color: #00504a;
    }


    .startbtn a{
        width: 80vw;
        height: calc(80vw / 300 * 50);
        display: block;
        background-color: #ed9700;
        text-decoration: none;
        line-height: 1em;
        color: #fff;
        font-weight: bold;
        font-size: 5vw;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items: center;
        align-items: center;
        background-image: url(../../common/img/next.png);
        background-size:  calc(6vw) calc(6vw);
        background-position: calc(100% - 4vw) center;
        background-repeat: no-repeat;
        border-radius: 100px;
        border:3px #fff solid;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 6vw;
    }*/

    .time{
        font-size: 3vw;
        margin-top: 3vw;
        text-align: center;
        font-weight: bold;
        padding-bottom: 6vw;
    }

    #top .charas{ 
        margin-top: 3vw;
        position: relative;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
    }
    #top .chara{
        margin-left: 0vw;
        margin-right: 0vw;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        /*width: calc(13vw);
        height: calc(13vw / 250 * 1000 );*/
    }
    #top .chara1{
        left: -35px;
        top: -165px;
        width: 150px;
        height: 150px;
    }
    #top .chara2{
        left: 110px;
        top: 85px;
        width: 100px;
        height: 100px;
    }
    #top .chara3{
        left: 20px;
        bottom: -340px;
        width: 120px;
        height: 120px;
    }
    
    #top .chara4{
        right: -25px;
        bottom: -185px;
        width: 200px;
        height: 200px;
    }
}

@media only screen and (max-width: 480px) {
    #top h1 {
        line-height: 4;
        width: 100%;
        height: auto;
    }
    .startbtn {
        margin-top: 150px;
    }
    #top .chara1{
        left: -35px;
        top: 10px;
        width: 120px;
        height: 120px;
    }
    #top .chara2{
        left: 110px;
        top: 55px;
        width: 90px;
        height: 90px;
    }
    #top .chara3{
        left: 20px;
        bottom: -360px;
        width: 100px;
        height: 100px;
    }
    
    #top .chara4{
        right: -25px;
        bottom: -185px;
        width: 150px;
        height: 150px;
    }
    #top .inner{
        height: 100vh;
        padding-top: 30px;
    }
}