@media screen and (min-width:300px){
  body:before{
    content:"";
    display:block;
    position:fixed;    
    height: 100%;
    width:100%;
    top:0;
    left:0;
    z-index:-1;
    background-image: url("117thポスター3.jpg");
    background-size: cover;
  }
  body{
    margin:0;
  }
  
  h2{
    font-size: 5vw;
  }


  p{
    margin:0;
    font-size:4vw;
  }

  
  header {
    margin-right: auto;
    margin-left: auto;
    max-width:100%;
    height:10.1vw;
    background-color: white;
    display: flex;
    align-items:center;
    justify-content: space-between;
  }
  .nuso_logo{
    padding:0.7vw;
    list-style: none;
    height:7vw;
  }
  .side-menu ul{
    margin:0;
  }
  .side-menu li {
    display: inline-block;
    padding:1.5vw;
  }
  .side-menu a{
    text-decoration: none;
  }

  .mail-logo{
    list-style: none;
    width: 8vw;
    height:8vw;
    align-items:center;
    padding-top:1.4vw;
    margin:0;
  }
  .image-twitter{ 
    list-style: none;
    height:8vw;
    align-items:center;
    padding-top:1.4vw;
    padding-right:1.5vw;
    margin:0;
  }

  .main{
    position:relative;
    margin:0;
    padding:0;
  }
  
  .title{
    background-color:rgba(255,255,255,0.55); 
    margin-top:0;
    margin-bottom:0;
    margin-right: auto;
    margin-left: auto;
    padding-bottom:10px;
    vertical-align: middle;
    text-align: center;
  }
  .top{
    margin-top:0;
    margin-bottom:0;
    padding-top:1.5vw;
    color:black;
    font-size: 5.5vw;
    font-family: 'PT Serif' , serif;
  }
  .sbtop{
    margin-top:1.5vw;
    margin-bottom:2.5vw;
    color:black;
    font-size: 4vw;
    font-family: 'Pacifico' , cursive;
  }

  .poster {
    width: 100%;
    height: 100%;
  }

  .naiyou{
    padding-left: 10%;
    padding-right: 10%;
  }

  .gmap{
    margin-top:2vw;
    height:0;
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
  }
  .gmap iframe{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    z-index:-1;
    border:none;
  }

  .公演情報{margin-bottom:2vw;}
  .アクセス{margin-bottom: 2vw;}
  .チケット情報{margin-bottom:2vw;}
  .copylights{
    margin-top:14vw;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:0;
    background-color: rgba(255,255,255,0.55);
    color:black;
    font-size: 1.5vh;
    bottom: 0;
    width: 100%;
    height: 2.5vh;
  }

  .zdo_drawer_button * {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    font: inherit;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: left;
    text-decoration: none;
    list-style: none;
  }

  .zdo_drawer_menu{
    background-color:rgba(255,255,255,0.7);
    display: block;
    width:16vw;
    height:16vw;
    position:fixed;
    border-radius: 8vw;
    margin:0;
    padding:0;
    bottom:9.3vw;
    right:4.5vw;
  }
  
  .zdo_drawer_button {
    display: block;
    padding: 0;
    width: 10vw;
    height: 6.5vw;
    position: relative;
    background: none;
    border: none;
    text-align: center;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none;
  }
  
  .zdo_drawer_button .zdo_drawer_bar {
    display: block;
    width: 10vw;
    height: 1.5vw;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    transform: translateY(-50%);
    position: absolute;
    left: 0;
  }
  
  .zdo_drawer_button .zdo_drawer_bar1 {
    top: 0;
  }
  
  .zdo_drawer_button .zdo_drawer_bar2 {
    top: 50%;
  }
  
  .zdo_drawer_button .zdo_drawer_bar3 {
    top: 100%;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar {
    width: 10vw;
    left: 2vw;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar1 {
    transform: rotate(0.7853981634rad) translateY(-50%);
    top: 0px;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar2 {
    opacity: 0;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar3 {
    transform: rotate(-0.7853981634rad) translateY(-50%);
    top: calc(100% - 0px);
  }
  
  .zdo_drawer_button.active .zdo_drawer_menu_text {
    display: none;
  }
  
  .zdo_drawer_button.active .zdo_drawer_close {
    display: block;
  }
  
  .zdo_drawer_text {
    width: 100%;
    position: absolute;
    bottom: -4.5vw;
    left: 0;
    text-align: center;
    font-size: 3vw;
  }
  
  .zdo_drawer_close {
    letter-spacing: 0.08em;
    display: none;
  }
  
  /*+++ Default Button Color +++*/
  .zdo_drawer_button {
    color: rgb(209,48,38);
  }
  
  .zdo_drawer_button .zdo_drawer_bar1 {
    background-color: white;
  }
  .zdo_drawer_button .zdo_drawer_bar2 {
    background-color: #2040A0;
  }
  .zdo_drawer_button .zdo_drawer_bar3 {
    background-color: rgb(209,48,38);
  }

  
  
  /* === Hambuerger Button's Style End === */
  .zdo_drawer_menu .zdo_drawer_button {
    /*+++ Hamburger Button Position +++*/
    position: fixed;
    bottom: 15vw;
    right: 7.5vw;
    z-index: 1001;
  }
  .zdo_drawer_menu a {
    color: inherit;
    text-decoration: none;
  }
  .zdo_drawer_menu a:visited {
    color: inherit;
  }
  .zdo_drawer_menu .zdo_drawer_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    background-color: rgba(51, 51, 51, 0.5);
    display: none;
    top: 0;
    left: 0;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper {
    width: 100%;
    height: 100%;
    transition: all 0.2s;
    transform: translate(100%);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(48,48,48,1);
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper.open {
    transform: translate(0);
  }
  .zdo_drawer_menu.left .zdo_drawer_button {
    right: auto;
    left: 32px;
  }
  .zdo_drawer_menu.left .zdo_drawer_nav_wrapper {
    transform: translate(-100%);
    right: auto;
    left: 0;
  }
  .zdo_drawer_menu.left .zdo_drawer_nav_wrapper.open {
    transform: translate(0);
  }
  
  /*+++ Default Navigation CSS +++*/
  .zdo_drawer_menu .zdo_drawer_nav {
    padding: 112px 24px;
  }
  .menu-head{
    text-align: center;
    list-style: none;
    color: white;
    font-size: 8vw;
  }
  .zdo_drawer_menu .zdo_drawer_nav li {
    text-align: center;
    list-style:none;
    color:white;
    font-size: 6vw;
    margin-bottom: 15px;
  }
  .homepage{
    text-align: center;
    list-style:none;
    color: white;
    font-size: 3.5vw;
  }
}

@media screen and (min-width:600px){
  body:before{
    content:"";
    display:block;
    position:fixed;    
    height: 100%;
    width:100%;
    top:0;
    left:0;
    z-index:-1;
    background-image: url("117thポスター3.jpg");
    background-size: cover;
  }
  body{
    margin:0;
  }
  
  h2{
    font-size: 5vw;
  }


  p{
    margin:0;
    font-size:4vw;
  }

  
  header {
    margin-right: auto;
    margin-left: auto;
    max-width:100%;
    height:10.1vw;
    background-color: white;
    display: flex;
    align-items:center;
    justify-content: space-between;
  }
  .nuso_logo{
    padding:0.7vw;
    list-style: none;
    height:7vw;
  }
  .side-menu ul{
    margin:0;
  }
  .side-menu li {
    display: inline-block;
    padding:1.5vw;
  }
  .side-menu a{
    text-decoration: none;
  }

  .mail-logo{
    list-style: none;
    width: 8vw;
    height:8vw;
    align-items:center;
    padding-top:1.4vw;
    margin:0;
  }
  .image-twitter{ 
    list-style: none;
    height:8vw;
    align-items:center;
    padding-top:1.4vw;
    padding-right:1.5vw;
    margin:0;
  }

  .main{
    position:relative;
    margin:0;
    padding:0;
  }
  
  .title{
    background-color:rgba(255,255,255,0.55); 
    margin-top:0;
    margin-bottom:0;
    margin-right: auto;
    margin-left: auto;
    padding-bottom:10px;
    vertical-align: middle;
    text-align: center;
  }
  .top{
    margin-top:0;
    margin-bottom:0;
    padding-top:1.5vw;
    color:black;
    font-size: 5.5vw;
    font-family: 'PT Serif' , serif;
  }
  .sbtop{
    margin-top:1.5vw;
    margin-bottom:2.5vw;
    color:black;
    font-size: 4vw;
    font-family: 'Pacifico' , cursive;
  }

  .poster {
    width: 100%;
    height: 100%;
  }

  .naiyou{
    padding-left: 10%;
    padding-right: 10%;
  }

  .gmap{
    margin-top:2vw;
    height:0;
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
  }
  .gmap iframe{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    z-index:-1;
    border:none;
  }

  .公演情報{margin-bottom:2vw;}
  .アクセス{margin-bottom: 2vw;}
  .チケット情報{margin-bottom:2vw;}
  .copylights{
    margin-top:14vw;
    margin-right: auto;
    margin-left: auto;
    margin-bottom:0;
    background-color: rgba(255,255,255,0.55);
    color:black;
    font-size: 1.5vh;
    bottom: 0;
    width: 100%;
    height: 2.5vh;
  }

  .zdo_drawer_button * {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    font: inherit;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: left;
    text-decoration: none;
    list-style: none;
  }

  .zdo_drawer_menu{
    background-color:rgba(255,255,255,0.7);
    display: block;
    width:16vw;
    height:16vw;
    position:fixed;
    border-radius: 8vw;
    margin:0;
    padding:0;
    bottom:9.3vw;
    right:4.5vw;
  }
  
  .zdo_drawer_button {
    display: block;
    padding: 0;
    width: 10vw;
    height: 6.5vw;
    position: relative;
    background: none;
    border: none;
    text-align: center;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none;
  }
  
  .zdo_drawer_button .zdo_drawer_bar {
    display: block;
    width: 10vw;
    height: 1.5vw;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    transform: translateY(-50%);
    position: absolute;
    left: 0;
  }
  
  .zdo_drawer_button .zdo_drawer_bar1 {
    top: 0;
  }
  
  .zdo_drawer_button .zdo_drawer_bar2 {
    top: 50%;
  }
  
  .zdo_drawer_button .zdo_drawer_bar3 {
    top: 100%;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar {
    width: 10vw;
    left: 2vw;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar1 {
    transform: rotate(0.7853981634rad) translateY(-50%);
    top: 0px;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar2 {
    opacity: 0;
  }
  
  .zdo_drawer_button.active .zdo_drawer_bar3 {
    transform: rotate(-0.7853981634rad) translateY(-50%);
    top: calc(100% - 0px);
  }
  
  .zdo_drawer_button.active .zdo_drawer_menu_text {
    display: none;
  }
  
  .zdo_drawer_button.active .zdo_drawer_close {
    display: block;
  }
  
  .zdo_drawer_text {
    width: 100%;
    position: absolute;
    bottom: -4.5vw;
    left: 0;
    text-align: center;
    font-size: 3vw;
  }
  
  .zdo_drawer_close {
    letter-spacing: 0.08em;
    display: none;
  }
  
  /*+++ Default Button Color +++*/
  .zdo_drawer_button {
    color: rgb(209,48,38);
  }
  
  .zdo_drawer_button .zdo_drawer_bar1 {
    background-color: white;
  }
  .zdo_drawer_button .zdo_drawer_bar2 {
    background-color: #2040A0;
  }
  .zdo_drawer_button .zdo_drawer_bar3 {
    background-color: rgb(209,48,38);
  }

  
  
  /* === Hambuerger Button's Style End === */
  .zdo_drawer_menu .zdo_drawer_button {
    /*+++ Hamburger Button Position +++*/
    position: fixed;
    bottom: 15vw;
    right: 7.5vw;
    z-index: 1001;
  }
  .zdo_drawer_menu a {
    color: inherit;
    text-decoration: none;
  }
  .zdo_drawer_menu a:visited {
    color: inherit;
  }
  .zdo_drawer_menu .zdo_drawer_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    background-color: rgba(51, 51, 51, 0.5);
    display: none;
    top: 0;
    left: 0;
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper {
    width: 100%;
    height: 100%;
    transition: all 0.2s;
    transform: translate(100%);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(48,48,48,1);
  }
  .zdo_drawer_menu .zdo_drawer_nav_wrapper.open {
    transform: translate(0);
  }
  .zdo_drawer_menu.left .zdo_drawer_button {
    right: auto;
    left: 32px;
  }
  .zdo_drawer_menu.left .zdo_drawer_nav_wrapper {
    transform: translate(-100%);
    right: auto;
    left: 0;
  }
  .zdo_drawer_menu.left .zdo_drawer_nav_wrapper.open {
    transform: translate(0);
  }
  
  /*+++ Default Navigation CSS +++*/
  .zdo_drawer_menu .zdo_drawer_nav {
    padding: 112px 24px;
  }
  .menu-head{
    text-align: center;
    list-style: none;
    color: white;
    font-size: 8vw;
  }
  .zdo_drawer_menu .zdo_drawer_nav li {
    text-align: center;
    list-style:none;
    color:white;
    font-size: 6vw;
    margin-bottom: 15px;
  }
  .homepage{
    text-align: center;
    list-style:none;
    color: white;
    font-size: 3.5vw;
  }
}

@media screen and (min-width:1200px){
  /*0px以上で適用する内容*/
}