html, body{
    font-size: 1rem;
    font-family: 'Libre Baskerville', 'Noto Serif JP', serif;
    line-height: 1.7;
    color: black;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    overflow-x: hidden;
}


/*
mobile
*/

@media screen and (max-width: 700px) {

    p{
        font-size: 0.8rem;
    }

    a, label{
        text-decoration: none;
        color: #000;
        filter: drop-shadow(0 0 2px transparent);
        transition: 1s ease-in-out;
    }
    
    a:hover, label:hover{
        filter: drop-shadow(0 0 2px black);
        cursor: pointer;
    }
    
    input[type="checkbox"]{
        display: none;
    }
    
    img{
        max-width: 100%;
    }
    
    ul{
        list-style: none;
    }
    
    .japanese{
        display: inline-block;
        font-size: 60%;
        margin-left: 0.2rem;
    }
    
    h2{
        font-size: 1rem;
    }
    
    h2, h3{
        font-weight: bold;
    }
    

    /* mobile header */
    header{ 
        width:100%;
        max-width: 100%;
        position: fixed;
        z-index: 1;
    }

    .logo{
        width: 271px;
        font-size: 1rem;
        letter-spacing: 1rem;
        margin-top: 10px;
        margin-left: 10px;
    }

    .discription{
        font-size: 0.6rem;
        margin-top: 0;
        margin-left: 10px;
    }

    .nav{
        font-size: 1rem;
        line-height: 2rem;
        margin-top: 10px;
        margin-left: 10px;
    }


    /*inquiry*/
    /*
    .inquiry{
        display: none;
    }

    #checkbox-inquiry:checked ~ .inquiry{
        position: fixed;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.95);
        display: block;
        animation: fadein 1s ease-in-out forwards;
    }

    .close-box{
        width: 100%;
        text-align: right;
        margin-bottom: 5%;
    }

    .close-button{
        font-size: 1rem;
    }

    @keyframes fadein{
        0%{
            opacity: 0
        }
        100%{
            opacity: 1
        }
    }

    form{
        position: fixed;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 1rem;
        line-height: 1rem;
    }

    .form-item{
        margin: 10% auto;
    }

    input:not(input[type="submit"]){
        border-width: 0 0 1px 0;
        border-color: black;
        background-color: transparent;
        width: 100%;
    }

    textarea{
        border-color: black;
        background-color: transparent;
    }

    .submit{
        width: 100%;
        text-align: right;
    }

    input[type="submit"]{
        display: inline-block;
        cursor: pointer;
        padding: 0.5rem;
        background-color: white;
        border-color: black;
        border-width: 1px;
        border-radius: 0.5rem;
        filter: drop-shadow(0 0 2px transparent);
        transition: 1s ease-in-out;
    }

    input[type="submit"]:hover{
        filter: drop-shadow(0 0 2px black);
    }
    */

    /* mobile top */
    .top{
        height: 100%;
    }

    .pc{
        position: fixed;
        left:50%;
        transform: translate(-50%, 0);
        bottom: 0;
        z-index: 0;
        aspect-ratio: 6420 / 3933;
        height: 250%;
        max-height: 1000%;
        width: auto;
        max-width: 1000%;
        filter: drop-shadow(0 0 3px black);
    }

    .instagram{
        z-index: -1;
        aspect-ratio: 1 / 1;
        height: 40%;
        width: auto;
        pointer-events: none;
        border: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }


    /* mobile work */

    #work{
        display: block;
        width: 80%;
        margin: 100px auto 0;
    }

    #more{
        width: 102px;
        margin: 0 auto 100px;
    }

    #work iframe{
        pointer-events: none;
    }

    /* mobile about */
    #body-about{
        background-image: url(../img/background.jpeg);
        background-size: 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: repeat;
    }

    #about{
        width: 80%;
        text-align: center;
        color: black;
        margin: 40vh auto 200px;
        line-height: 1.5;
        filter: drop-shadow(0 0 3px white);
    }

    #about li{
        margin-top: 20px;
        font-size: 0.8rem;
    }

    .scroll{
        margin-top: 150px;
        line-height: 1.5rem;
    }

    .archievement{
        margin-top: 200px;
    }

    .stockists{
        margin-top: 100px;
    }

    .stockists h3{
        margin: 0 0 20px;
    }

    .media{
        margin-top: 50px;
    }


    /*thanks*/
    #thanks{
        text-align: center;
        font-size: 1rem;
        line-height: 2rem;
        padding-top: 40vh;
    }

    .back{
        padding-top: 3rem;
        cursor: pointer;
    }

    /*footer*/
    footer{
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translate(-50%);
    }

    #copyright{
        font-size: 0.5rem;
        text-align: center;
    }
}




/*
pc
*/

@media screen and (min-width: 701px) {

    a, label{
        text-decoration: none;
        color: #000;
        filter: drop-shadow(0 0 2px transparent);
        transition: 1s ease-in-out;
    }
    
    a:hover, label:hover{
        filter: drop-shadow(0 0 2px black);
        cursor: pointer;
    }
    
    input[type="checkbox"]{
        display: none;
    }
    
    img{
        max-width: 100%;
    }
    
    ul{
        list-style: none;
    }
    
    .japanese{
        font-size: 60%;
        margin-left: 0.2rem;
    }
    
    h2{
        font-size: 1.5rem;
    }
    
    h2, h3{
        font-weight: bold;
    }
    

    /*header*/
    header{ 
        width:100%;
        max-width: 100%;
        position: fixed;
        z-index: 1;
    }

    .logo{
        font-size: 2rem;
        letter-spacing: 1rem;
        padding-top: 10px;
        padding-left: 10px;
    }

    .discription{
        font-size: 1rem;
        padding-left: 10px;
    }

    .nav{
        font-size: 1.5rem;
        line-height: 3rem;
        padding-top: 30px;
        padding-left: 10px;
    }


    /*inquiry*/
    /*
    .inquiry{
        display: none;
    }

    #checkbox-inquiry:checked ~ .inquiry{
        position: fixed;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.95);
        display: block;
        animation: fadein 1s ease-in-out forwards;
    }

    .close-box{
        width: 100%;
        text-align: right;
        margin-bottom: 5%;
    }

    .close-button{
        font-size: 1rem;
    }

    @keyframes fadein{
        0%{
            opacity: 0
        }
        100%{
            opacity: 1
        }
    }

    form{
        position: fixed;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 1rem;
        line-height: 1rem;
    }

    .form-item{
        margin: 10% auto;
    }

    input:not(input[type="submit"]){
        border-width: 0 0 1px 0;
        border-color: black;
        background-color: transparent;
        width: 100%;
    }

    textarea{
        border-color: black;
        background-color: transparent;
    }

    .submit{
        width: 100%;
        text-align: right;
    }

    input[type="submit"]{
        display: inline-block;
        cursor: pointer;
        padding: 0.5rem;
        background-color: white;
        border-color: black;
        border-width: 1px;
        border-radius: 0.5rem;
        filter: drop-shadow(0 0 2px transparent);
        transition: 1s ease-in-out;
    }

    input[type="submit"]:hover{
        filter: drop-shadow(0 0 2px black);
    }
    */

    /*top*/
    .top{
        height: 100%;
    }

    .pc{
        position: fixed;
        left:50%;
        transform: translate(-50%, 0);
        bottom: 0;
        z-index: 0;
        aspect-ratio: 6420 / 3933;
        height: 250%;
        max-height: 1000%;
        width: auto;
        max-width: 1000%;
        filter: drop-shadow(0 0 3px black);
    }

    .instagram{
        z-index: -1;
        aspect-ratio: 1 / 1;
        height: 40%;
        width: auto;
        pointer-events: none;
        border: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }


    /*
    work
    */

    #work{
        display: block;
        width: 80%;
        margin: 100px auto 0;
    }

    #more{
        width: 102px;
        margin: 50px auto 200px;
    }

    #work iframe{
        pointer-events: none;
    }

    /*
    about
    */
    #body-about{
        background-image: url(../img/background.jpeg);
        background-size: 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: repeat;
    }

    #about{
        width: 80%;
        text-align: center;
        color: black;
        margin: 40vh auto 200px;
        line-height: 2;
        filter: drop-shadow(0 0 3px white);
    }

    #about li{
        margin-top: 20px;
    }

    .scroll{
        margin-top: 150px;
        line-height: 1.5rem;
    }

    .archievement{
        margin-top: 200px;
    }

    .stockists{
        margin-top: 100px;
    }

    .stockists h3{
        margin: 0 0 20px;
    }

    .media{
        margin-top: 50px;
    }


    /*thanks*/
    #thanks{
        text-align: center;
        font-size: 1rem;
        line-height: 2rem;
        padding-top: 40vh;
    }

    .back{
        padding-top: 3rem;
        cursor: pointer;
    }

    /*footer*/
    footer{
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translate(-50%);
    }

    #copyright{
        font-size: 0.8rem;
        text-align: center;
    }
}