@font-face {
  font-family: "RocknRoll One";
  src: url(Subset-RocknRollOne-Regular.ttf);
}

.aboutphoto{
  width: 100vw;
}

.header {
    width: 100vw;
    height: 20vw;
    top: 0;
    left: 0;
    /*position: absolute;*/
    display: block;
    background-color: #181818;
    z-index: 90;
  }
  
.kokoyade {
width: 40vw;
z-index: 80;
padding: 3vw;
position: relative;
}

body {
text-align: center;
align-items: center;

margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

margin: 2.5vw;

font-family: 'RocknRoll One', sans-serif;
/*font-weight: bold;*/
background-color: #181818;
}

h1,
h2,
h3,
p,
li,
a {
color:#ffffff;
text-decoration: none;
}

.otameshi h2, p{
  text-align: left;
  padding-left: 2.5vw;
}

p {
  font-size: 3vw;
}

.aboutnishinsu p { 
  text-align: center;
}

.past {
  width: 28vw;
  text-align: center;
}

td {
  border-bottom: 0.25vw dashed white;
}

td .stage {
  width: 80vw;
}

td .photo {
  width: 20vw;
}

.togakusai {
  width: 35vw;
  padding-right: 2.5vw;
}

span {
  font-size: 2.5vw;
}

.toplink {
  color: #aaeeee;
  font-size: 4vw;
}

spann {
  color: #22aaaa;
}

/*text*/

h1 {
  color:#ffffff;
  text-decoration: none;
  text-align: center;
  font-size: 5vw;
}


h2 {
color:#ffffff;
text-decoration: none;
text-align: center;
font-size: 4.5vw;
}


h3 {
    font-size: 4.5vw;
    color:#ffffff;
    text-decoration: none;
}

h4 {
    font-size: 3.5vw;
    color: #ffffff;
    text-decoration: none;
    text-align: left;
}

p {
    font-size: 3vw;
    color:#ffffff;
    text-decoration: none;
}

sp {
    color: #ffffff;
    font-size: 2.25vw;
}

a {
color:#ffffff;
text-decoration: none;
text-align: center;
}

.furigana {
  color: #ffffff;
  left: 55vw;
  
}

/*スマホ*/
@media only screen and (max-aspect-ratio: 3/4) {
  .tatenaga {
      display: block;
  }

  .yokonaga {
      display: none;
  }

  .pcnaga {
      display: none;
  }

  h1 {
      color:#ffffff;
      text-decoration: none;
      font-size: 5vw;
  }
  
  p {
      color:#ffffff;
      text-decoration: none;
      font-size: 2.5vw;
  }
  
  li,
  a {
  color:#ffffff;
  text-decoration: none;
  }
  
  .toplink {
      color: #aaeeee;
      font-size: 4vw;
  }
}

/*タブレット*/
@media only screen and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3) {
  .tatenaga {
      display: none;
  }

  .yokonaga {
      display: block;
  }

  .pcnaga {
      display: none;
  }

  .header {
      width: 100vw;
      height: 10vw;
      top: 0;
      left: 0;
      display: block;
      background-color: #181818;
      z-index: 90;
  }
    
  .kokoyade {
      width: 20vw;
      z-index: 80;
      padding: 2.5vw;
      position: relative;
  }

  .aboutphoto{
    width: 37.5vw;
  }
  
  li,
  a {
    color:#ffffff;
    text-decoration: none;
  }
  
  .toplink {
    color: #aaeeee;
    font-size: 2vw;
  }

  a {
    font-size: 2vw;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
  }

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

  h2 {
    margin: 0;
    font-size: 3vw;
  }

  h3 {
    font-size: 2.5vw;
    color: #aaeeee;
  }

  h4 {
    font-size: 2.25vw;
    margin: 0;
  }

  p {
    font-size: 1.75vw;
    padding: 0vw;
    align-items: center;
    text-align: center;
    justify-content:center;
  }

  span {
    font-size: 2.5vw;
    color: #aaeeee;
  }

  .attention {
    font-size: 1.5vw;
  }

  .aboutnishinsu p {
    text-align: left;
    margin-left: 2.5vw;
  }

  .abouttd {
    border: none;
    padding: 0;
  }

  table {
    margin: 2.5vw 0;
  }

  .stage {
    width: 70vw;

  }

  .stage p {
    text-align: left;
  }
  
  .photo {
    width: 20vw;
    margin: auto 0;
  }

  .past {
    width: 20vw;
    text-align: center;
  }

  .togakusai {
    width: 27.5vw;
  }

  td {
    padding: 2.5vw 0;
  }

}

/*pc*/
@media only screen and (min-aspect-ratio: 4/3){
  .tatenaga {
      display: none;
  }

  .yokonaga {
      display: none;
  }

  .pcnaga {
      display: block;
  }

  .header {
      width: 100vw;
      height: 5vw;
      top: 0;
      left: 0;
      display: block;
      background-color: #181818;
      z-index: 90;
    }
    
  .kokoyade {
      width: 15vw;
      z-index: 80;
      padding: 1.25vw;
      position: relative;
  }

  .aboutphoto{
    width: 30vw;
  }
  
  li,
  a {
    color:#ffffff;
    text-decoration: none;
  }
  
  .toplink {
    color: #aaeeee;
    font-size: 2vw;
  }

  a {
    font-size: 1.25vw;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
  }

  h1 {
    margin: 0;
    font-size: 2.5vw;
  }

  h2 {
    margin: 0;
    font-size: 2vw;
  }

  h3 {
    font-size: 1.75vw;
    color: #aaeeee;
  }

  h4 {
    font-size: 1vw;
    margin: 0;
  }

  p {
    font-size: 1vw;
    padding: 0vw;
    align-items: center;
    text-align: center;
    justify-content:center;
  }

  span {
    font-size: 1vw;
    color: #aaeeee;
  }

  .attention {
    font-size: 0.75vw;
  }

  .aboutnishinsu p {
    text-align: left;
    margin-left: 2.5vw;
  }

  .abouttd {
    border: none;
  }

  table {
    margin: 2.5vw 0;
  }

  .stage {
    width: 35vw;

  }

  .stage p {
    text-align: left;
  }
  
  .photo {
    width: 10vw;
    margin: auto 0;
  }

  .past {
    width: 10vw;
    text-align: center;
  }

  .togakusai {
    width: 15vw;
    padding: 0;
  }

  td {
    padding: 0.75vw;
  }

  .otameshi p {
    font-size: 0.75vw;
  }
}