@charset 'UTF-8';/*  */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

/* Base
------------------------------------------------------------*/
html {
    font-size:1vw;
}
    
body {
      font-family: 'source-han-serif-japanese', serif;
    font-size:20px;
    font-style: lighter;
    line-height: 1.6;
    letter-spacing: .1em;
    color: #a8c3e6;
    text-align: left;
    text-decoration: none;
    background: rgb(2,0,36);
    background: linear-gradient(189deg, rgba(2,0,36,1) 0%, rgba(0,13,57,1) 35%, rgba(0,0,14,1) 100%);
    }
h2{
    margin:0px;
}
.content-box a{
    text-decoration: none;
    color:#a8c3e6;
}
.div {
    display:none;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}
hr{
    margin:0;
    height:0.1px;
}
.hide-area{
  display: none;
}
ul{
  list-style: none;
  padding:0;
  margin:3vh 0vw;
}
ul li a{
  color: #a8c3e6;
}

.tomo-box{
    display:flex;
    justify-content: center;
    padding: 0.5vw 0.5vw;
    border: solid 1px #a8c3e6;
    margin: auto;
}
.ticketbox a{
    text-decoration: none;
    color:#a8c3e6;
}
.tomo-box a{
    text-decoration: none;
    color:#a8c3e6;
}

.modaal-container{
    border-radius: 15px;
    background-color: #fff;;
}
.modaal-close {
    color:#a8c3e6;
}
.close:before {
    color:#a8c3e6;
}
.close:after {
    color:#a8c3e6;
}
/*---------------------------------font------------------------------------------------*/
.top{
    margin-top:10vh;
}
.line:before{
    content: '';
    display: block;
    position: fixed;
    z-index:-1;
    background-image: url(../img/color-reb-blue-resp.png);
    background-repeat: no-repeat;
    background-size:  cover;
    -webkit-background-size:cover;
    width:100%;
    height:100%;
}
.title h1, h3,h4, h5{
    margin:0vh;
}

.title{
    padding:10vh 5vw;
}

section{
    padding-bottom: 5vh;
    padding: 5vw;
}
.title3{
    padding:5vh 5vw;
}
.content-box{
    color:white;
    margin: 5vw 2vw; 
}


.map{
        width:90vw;
        height:60vh;
    }
.box-aomp{
    width:35vw;
    height:20vw;
    margin:1vw;
}
.flex{
    display:flex;
}

@media only screen and (min-width:600px) {
    body {
    font-size:25px;
    }
    .title{
    width:40vw;
    padding:20vh 30vw;
    }

    .title2{
    padding:20vh 5vw;
    }
     .title2{
    padding:10vh 30vw;
    }
    .line:before{
    background-image: url(../img/color-reb-blue.png);
    }
        
    .flex-box{
        display:flex;
        justify-content: space-around;
    }

    .content-box{
    color:white;
    margin: 5vw 2vw; 
    }
    .program-box{
        height:90vw;
        width:90vw;
    }
    .map{
        width:40vw;
        height:40vh;
    }
    .ticketbox{
    width:25vw;
    } 
    .tomo-box{
    width:60vw;
    }
    /*======================MODALr===================*/
    .modaal-wrapper {
        height:100vh;
    }
    .modaal-inner-wrapper {
        padding:2.5vw;
    }
    .modaal-video-wrap{
        margin:auto;
    }

}

@media only screen and (min-width:1080px) {

 .box{
    width:15vw;
    height:10vw;
    }
 .tomo-box{
    width:35vw;
    }
}