@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: 14px;
}

body {
    font-family: 'Noto Serif JP', serif;
    font-style: lighter;
    line-height: 1.6;
    letter-spacing: .1em;
    color: #393E46;/*------------------------color3--------------------------------*/
    text-align: left;
    text-decoration: none;
    flex: 1;
    background-color: #e5e5e5;
    margin: 0;
    }

hr{
  margin: 0.5vh  0vh;
  size:1;
  color:#393E46;
}

h3{
  margin:0.5vh;
}

/*------------------------header--------------------------------*/
header{
  margin:5vh 0vh ;
}

/*------------------------main-content--------------------------------*/
main{
  margin:5vw;
}

.info-list{
  list-style: none;
  padding:0vw;
  .info{color:#333;}
}
.hide-area{
  display: none;
}
section{
  margin:5vh 0vw;
}

/*------------------------popup--------------------------------*/

.trigger-btn {
  background: #e5e5e5;
  font-weight: 800;
  border: 2px solid #e5e5e5;
}

.close-btn {
  background: none;
  border: none;
  position: absolute;
  right: 0.25rem;
  top: 0.5rem;
  filter: grayscale() brightness(10);
}
span{
  color:#333;
}

.my-popover {
  background: #E5E5E5;
  color: #333;
  font-weight: 400;
  padding: 1rem;
  line-height: 1.4;
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding-top: 2rem;
}

/*------------------------footer--------------------------------*/
footer{
  display: flex;
  background-color:#393E46;
  justify-content: center;
}
footer a{
  color:#E5E5E5;
  margin:0vw;
}

/*------------------------ul--------------------------------*/
.music-ul{
  padding-left:2.5vw;
}
.music-ul li{
  margin:1vh 0vw;
}


/*------------------------img--------------------------------*/

.top-img{
  height:50vh;
  width:100vw;
  background-image: url(../img/WOSlogo.jpg);
  background-size: cover;
  background-position: center;
  background-color: #e5e5e5;
}
.sugi-img{
  background-image: url(../img/sugino.jpg);
  height:30vh;
  width:100%;
  background-size: cover;
  background-position: left;
  
}
.nai-img{
  background-image: url(../img/naito.jpg);
  height:30vh;
  width:100%;
  background-size: cover;
  background-position: left;
}
.first-img{
  background-image: url(../img/woscd1.png);
  height:90vw;
  width:90vw;
  background-size: cover;
  background-position: left;
}


/*------------------------box--------------------------------*/
.ticketbox{
  display:flex;
  justify-content: center;
  padding: 0.5vw 0.5vw;
  border: double 5px #a8c3e6;
  width:35vw;
  margin: auto;
}


/*------------------------tab--------------------------------*/


/*------------------------modal--------------------------------*/
.modaal-close:before{
  background: #828282;
}
.modaal-close:after{
  background: #828282;
}


@media only screen and (min-width:600px) {
  .top-img{
    height:65vh;
  }
  .sugi-img{
    height:40vh;
  }
  .nai-img{
    height:40vh;
  }
  .first-img{
    height:50vw;
    width:50vw;
  }
}


@media only screen and (min-width:1025px) {
  .top-img{
    height:100vh;
    width:60vw;
    margin:auto;
  }
  .sugi-img{
    height:50vh;
  }
  .nai-img{
    height:50vh;
  }
  .first-img{
    height:25vw;
    width:25vw;
  }
}