@charset "utf-8";

body{
  font-family: 'メイリオ','Meiryo','Hiragino Kaku Gothic Pro', sans-serif;
  background-color: #cd5593;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

div#wrap{
  position: relative;
  z-index: 11;
}

header{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
}
header h1{
  width: 1000px;
  text-align: center;
}

main{
  padding: 200px 0 200px 0;
  font-family: "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

section{
  margin: 0 0 200px 0;
}

section#intro{}

section#intro p{
  text-align: center;
  font-size: 5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}
section#intro p span{
  letter-spacing: 0.4vw;
}
section#intro button#tit{
  height: auto;
  font-size: 2.5rem;
  line-height: 2.5rem;
  padding: 0.7rem 0 0.9rem 0;
}
section#intro button#tit span{
  display: block;
  font-size: 1.2rem;
}

section#day{}
section#day p{
  text-align: center;
  font-size: 5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}
section#day p span#hid{
  visibility: hidden;
}
section#day p span#ex{
  display: block;
  margin: 20px 0 0 0;
  font-size: 1.6vw;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  line-height: 2rem;
}

section#place{}
section#place p{
  text-align: center;
  font-size: 5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}
section#place p span{
  display: block;
  margin: 20px 0 0 0;
  font-size: 1.6vw;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
}
section#place a button{
  width: 100px;
  height: 100px;
  padding: 0 0 0.5rem 0;
  font-size: 2rem;
  line-height: 0;
}
section#place button a{
  color: #000;
}

section#ticket{}
section#ticket p{
  text-align: center;
  font-size: 5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}
section#ticket p span#hid{
  visibility: hidden;
}
section#ticket p span#ex{
  display: block;
  margin: 20px 0 0 0;
  font-size: 1.6vw;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  line-height: 2rem;
}
section#ticket a button{
  width: 200px;
  height: 200px;
  padding: 0.5rem 0 0 0;
  font-size: 2.5rem;
  line-height: 1.2;
}
section#ticket button a{
  color: #000;
}

section#cast{}
section#cast div.cast-box{
  display: flex;
  /*align-items: center;*/
  width: 70vw;
  margin: 0 auto 50px auto;
  padding: 50px;
  box-sizing: border-box;
  background-color: #fffc;
  border-radius: 50px;
}
section#cast div.cast-box figure{
  width: 40%;
  height: 700px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 0%;
}
section#cast div.cast-box figure#cast-01{background-image: url(../images/chara01.png);}
section#cast div.cast-box figure#cast-02{background-image: url(../images/chara02.png);}
section#cast div.cast-box figure#cast-03{background-image: url(../images/chara03.png);}
section#cast div.cast-box figure#cast-04{background-image: url(../images/chara04.png);}
section#cast div.cast-box table{
  width: 60%;
}
section#cast div.cast-box table th{
  text-align: left;
  font-size: 5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;

}
section#cast div.cast-box table th span{
  margin: 0 0 0 2vw;
  font-size: 1.5vw;
}
section#cast div.cast-box table td.belong{
  padding: 0 0 0 0;
  font-size: 2.5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}
section#cast div.cast-box table td{
  padding: 2rem 0 0 1.5rem;
  font-size: 1.6vw;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
section#cast div.cast-box table td span{
  margin: 2rem 0 0 -1.5rem;
  font-size: 2.5vw;
}

section#staff{}
section#staff p{
  text-align: center;
  font-size: 5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}
section#staff p span#ex{
  font-size: 3vw;
}

section#thanks{}
section#thanks p{
  text-align: center;
  font-size: 5vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}
section#thanks p span#ex{
  font-size: 3vw;
}
section#thanks p span#right{
  margin: 0 0 0 50vw;
  font-size: 3vw;
}

footer{
  padding: 0 0 100px 0;
  text-align: center;
  font-size: 2vw;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 20px #000 , 0 0 20px #000 , 0 0 20px #000;
}



/* ページトップへ戻るボタン */
div#pagetop{
  position: fixed;
  z-index: 9999;
  bottom: 100px;
  right: 100px;
}
div#pagetop a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  text-decoration: none;
  font-size: 3rem;
  color: #fff;
  background-color: #cd5593;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff;
}
div#pagetop a:hover{
  opacity: 0.5;
}
div#pagetop a span{
  margin: -5px 0 0 0;
}



/* ########### 599px以下 ########### */
@media (max-width: 599px) {

  header{
    height: 80vh;
  }

  section#intro button#tit{
    padding: 0.7rem 1rem 0.9rem 1rem;
    
  }

  section#intro p , section#ticket p{
    line-height: 1.4;
    font-size: 5.5vw;
  }
  section#day p{
    line-height: 1.4;
    font-size: 6vw;
  }
  section#place p , section#ticket p{
    line-height: 1.4;
    font-size: 8vw;
  }


  section#day p span#ex , section#place p span , section#ticket p span#ex{
    text-shadow: 0 0 10px #000 , 0 0 10px #000 , 0 0 10px #000 , 0 0 10px #000;
    line-height: 1.4rem;
  }

  section#cast div.cast-box{
    display: block;
    padding: 1rem;
  }

  section#cast div.cast-box figure{
    width: 100%;
    height: 300px;
  }
  section#cast div.cast-box table{
    width: 100%;
    margin: 1rem auto 0 auto;
  }
  section#cast div.cast-box table th{
    text-align: center;
    font-size: 8vw;
  }
  section#cast div.cast-box table th span{
    text-shadow: 0 0 10px #000 , 0 0 10px #000 , 0 0 10px #000 , 0 0 10px #000;
  }
  section#cast div.cast-box table td.belong{
    padding: 0.5rem 0 0 0;
    text-align: center;
  }
  section#cast div.cast-box table td{
    font-size: 4.5vw;
    padding: 2rem 0 2rem 3rem;
  }
  section#cast div.cast-box table td span{
    font-size: 6vw;
  }

  section#staff p , section#thanks p{
    font-size: 6.5vw;
    line-height: 1.6;
  }

  footer{
    padding: 0 0 30px 0;
    font-size: 2.5vw;
  }

  div#pagetop{
    bottom: 8vh;
    right: 5vw;
  }

  div#pagetop a{
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

}



/* ########### 600px以上～768px以下 ########### */
@media (min-width: 600px) and (max-width: 768px) {}



/* ########### 769px以上 ########### */
@media (min-width: 769px) {}



/* ########### 1000px以上 ########### */
@media (min-width: 1000px) {}