/* 全体の設定 */



#bg {
    height: 100vh;
    position: relative;
    background: -moz-linear-gradient(top, skyblue, #fff);
    background: -webkit-linear-gradient(top, skyblue, #fff);
    background: linear-gradient(to bottom, skyblue, #fff);
    overflow:hidden;
}

#TOP {
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

#TOP-banner-box {
    margin-top: 2vh ;
    margin: 2vh 0% 0% 3vh;

}

#TOP-banner{
    width: 42vh;
}



#exp{
    width:42vh;
    font-size:2.25vh;
    margin-top:1vh;
    color:dodgerblue;
    text-align:center;
    font-weight: bold;
    line-height: 150%;
    margin: 0 ;
    padding: 0;
    
}

#up-menu {
    color: white;
    font-size:2.5vh;
    font-weight: bold; 
    text-align: center;
    display: flex;
    margin: 10vh 1% 0 0;

}


#kousha{
    position:absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);

}

#kousha-img{
    height: 100vh;
     vertical-align: top;
}


#left-door{
    position:absolute;
    bottom:12.75vh;
    left:50%;
    transform: translateX(-100%);
    transform-origin: left;
    transition: transform 3s;
}

#left-door img{
    width:10.5vh;
}

#right-door{
    position:absolute;
    bottom:12.75vh;
    left:50%;
    transform: translateX(-5%);
    transform-origin: right;
    transition: transform 3s;
}

#right-door img{
    width:10.5vh;
}

#door-case{
    width: 20vh;
    height:20vh;
    left:50%;
    bottom:12.75vh;
    transform: translateX(-50%);
    position:absolute;
}



#yobikake {
    width: 31vh;
    position:absolute;
    left:50%;
    bottom: 50%;
    transform: translateX(-180%) translateY(210%);
    font-weight: bold;
    font-size: 2.15vh;
}

ul {
  list-style-type: none;
}    

#yobikake-2 {
    display:none;
}

#click{
    color:red;
}

#tomoni{
    color:blue;
}
   

.global-nav {
    background-color: #b3b3b3;
}

.nav-item {
    display: inline-block;
    padding: 20px 15px;
    margin: 0;
    font-weight: bold;
    color:white;
}
.nav-lite {
    color:blue;
}

.genzaiti {
    color: black;
}



@media(max-width: 1030px){
    

    #TOP-banner-box {
        margin: 0 auto;
        text-align: center;
    }


    #exp {
        margin: 0 auto;
        padding: 10px;
    }
    
  #up-menu {
    margin: 10px auto ;
}
    
    
    
    #kousha{
    position:absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);

}

    #kousha-img{
     height: 78vh;
     vertical-align: top;
}
    #left-door{
    position:absolute;
    bottom:9.7vh;
    left:50%;
    transform: translateX(-100%);
    transform-origin: left;
    transition: transform 3s;
}
    #left-door img{
    width:8.3vh;
}

    #right-door{
    position:absolute;
    bottom:9.7vh;
    left:50%;
    transform: translateX(-4%);
    transform-origin: right;
    transition: transform 3s;
}

   #right-door img{
    width:8.3vh;
}

#door-case{
    width: 20vh;
    height:20vh;
    left:50%;
    bottom:12.75vh;
    transform: translateX(-50%);
    position:absolute;
}
    
#yobikake {
    width: 24vh;
    position:absolute;
    left:50%;
    bottom: 50%;
    transform: translateX(-180%) translateY(300%);
    font-weight: bold;
    font-size: 1.7vh;
}


}


@media(max-width: 650px),(max-aspect-ratio: 1/1){
    #yobikake {
        display:none;
    }
    
  #yobikake-2 {
      position: absolute;
      width:90%;
     bottom:1vh;
      left:50%;
      transform: translateX(-50%);
    display:inline;
    text-align: center;
    background-color: white;
    font-weight: bold;
    font-size: 2vh;
}
}




@media(max-width: 650px){
    .nav-box {
        position:relative;
    margin: 0 auto;
    display:flex;
    flex-direction: column;
}
    
    .nav-item {
    background-color: darkgray; 
    border: solid 0.25px;
    border-color:dimgrey;
    text-align: center;
    }
}