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

.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;

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

/*スマホ*/
@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;
    }
    
    .togakusai {
        width: 40vw;
        padding: 0;
        margin: auto;
    }
    
    .zengakusai {
        width: 40vw;
        padding: 0;
        margin: auto;
    }
    
    .pickupcontents {
        margin: auto;
        justify-content: center;
    }
    
    .toplink {
        color: #aaeeee;
        font-size: 4vw;
    }
    
    .wakiyaku {
        width: 80vw;
        padding: 0;
        margin: auto;
    }
    
    figcaption {
        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;
    }

    h1 {
        color:#ffffff;
        text-decoration: none;
        font-size: 4vw;
    }
    
    p {
        color:#ffffff;
        text-decoration: none;
        font-size: 2vw;
    }
    
    li,
    a {
    color:#ffffff;
    text-decoration: none;
    }
    
    .pickupcontents {
        margin: auto;
        justify-content: center;
    }
    
    .toplink {
        color: #aaeeee;
        font-size: 2vw;
    }

    td {
        width: 50vw;
        margin: auto;
    }
    
    .wakiyaku {
        width: 35vw;
        padding: 0;
        margin: auto;
    }
    
    figcaption {
        font-size: 2.5vw;
    }
}

/*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;
    }

    h1 {
        color:#ffffff;
        text-decoration: none;
        font-size: 2.5vw;
    }
    
    p {
        color:#ffffff;
        text-decoration: none;
        font-size: 2.5vw;
    }
    
    li,
    a {
    color:#ffffff;
    text-decoration: none;
    }
    
    .pickupcontents {
        margin: auto;
        justify-content: center;
    }
    
    .toplink {
        color: #aaeeee;
        font-size: 1.5vw;
        padding: 2.5vw;
    }

    td {
        width: 50vw;
        margin: auto;
    }
    
    .wakiyaku {
        width: 25vw;
        padding: 0;
        margin: auto;
    }
    
    figcaption {
        font-size: 1.5vw;
    }
}