@charset "UTF-8";
    /* == top == */
    
    .btn {
        background-image: url(../images/common/btn.png);
        background-repeat: no-repeat;
        background-position: center;
        padding: 4rem;
        text-align: center;
    }
    
    .btn a {
        color: #ffff;
        font-size: 25px;
    }
    
    .btn a:hover {
        opacity: 50%;
    }
    
    .top {
        margin-top: 16rem;
        text-align: center;
    }
    
    h1 {
        font-size: 40px;
        font-family: noto-sans, sans-serif;
        font-weight: 800;
        font-style: normal;
        padding-bottom: 2rem;
    }
    
    h2 {
        padding-bottom: 3rem;
        padding-top: 10rem;
    }
    
    .top .illust {
        padding-top: 4rem;
        padding-bottom: 10rem;
    }
    
    .top .text p {
        text-align: left;
    }
    /* == insta == */
    
    .insta {
        text-align: center;
    }
    
    .id {
        padding-top: 3rem;
        padding-bottom: 1rem;
        font-size: 28px;
    }
    
    .illlust {
        text-align: right;
        margin-top: -5rem;
    }
    
    .illl {
        text-align: left;
        margin-top: -5rem;
        margin-bottom: 3rem;
    }
    /* == access == */
    
    .access {
        text-align: center;
    }
    /* == reserve == */
    
    .reserve {
        text-align: center;
    }
    
    .reserve li a {
        color: #ffff;
        background-color: #272B5A;
        padding: 1.3rem;
        border-radius: 1rem;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 -4px 5px -2px #a4a6a8 inset;
        transition: .3s;
    }
    
    .reserve li a:hover {
        box-shadow: -5px -5px 10px #000000 inset;
        opacity: 70%;
    }
    
    .reserve ul {
        margin: 3rem 3rem 9rem 3rem;
    }
    /* == coffee == */
    
    .coffee {
        background-image: url(../images/top/back_01.jpeg);
        background-repeat: no-repeat;
        background-size: 97%;
        background-position: center top;
        padding-top: 5rem;
        color: #000000;
    }
    /* .j_sl {
         justify-content: left;
     } */
    
    .j_sr {
        justify-content: right;
    }
    
    h3 {
        text-align: center;
        font-size: 2rem;
        padding-bottom: 2rem;
    }
    
    .coffee .textbox {
        width: 16rem;
        height: 20rem;
        font-size: 1rem;
        line-height: 1.6rem;
    }
    
    .zu img {
        width: 89%;
        padding-top: 10rem;
        padding-left: 1rem;
    }
    
    .coffee img {
        width: 88%;
    }
    
    .textbox p:first-child {
        text-align: center;
        font-size: 1.2rem;
    }
    
    .yado {
        font-size: 25px;
    }
    /* ===================================
responsive
=================================== */
    
    @media screen and (max-width: 640px) {
        .top {
            margin-top: 1rem;
            text-align: center;
        }
        h1 {
            margin-top: -5rem;
            font-size: 2rem;
            line-height: 2.3rem;
        }
        img {
            width: 100%;
        }
        .top .illust {
            padding-top: 4rem;
            padding-bottom: 3rem;
        }
        .llu img {
            width: 80%;
        }
        .ill img {
            width: 80%;
        }
        .llu {
            padding-left: 14rem;
        }
        .illlust img {
            width: 50%;
        }
        .illlust {
            margin-top: 1rem;
        }
        iframe {
            width: 100%;
        }
        .btn {
            padding: 0rem;
            background-size: 50%;
            padding: 4rem;
        }
        .btn a {
            color: #ffff;
            font-size: 20px;
        }
        .id {
            padding-top: 0rem;
            padding-bottom: 1rem;
        }
        h2 {
            padding-bottom: 3rem;
            padding-top: 5rem;
        }
        .reserve ul {
            margin: 0;
        }
        .reserve li {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
        .reserve li a {
            color: #ffff;
            background-color: none;
            padding: 0;
            border-radius: 1rem;
            box-shadow: none;
            transition: none;
        }
        .reserve li {
            color: #ffff;
            background-color: #272B5A;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-radius: 2rem;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 -4px 5px -2px #a4a6a8 inset;
            transition: .3s;
        }
        .reserve li a:hover {
            box-shadow: none;
            opacity: 70%;
        }
        /* .yado {
            padding-top: 4rem;
        } */
        .illl img {
            width: 70%;
        }
        .illl {
            margin-top: 1rem;
        }
        .coffee {
            background-image: url(../images/top/comp04_05.png);
            background-repeat: repeat-y;
            background-size: 97%;
            background-position: center top;
            padding-top: 5rem;
            color: #000000;
        }
        .coffee .illust {
            width: 60%;
        }
        .coffee .d_ff {
            display: flex;
            justify-content: center;
        }
        .textbox p {
            font-size: 70%;
            padding: 1px;
        }
        .coffee {
            margin-right: auto;
            margin-left: auto;
        }
        .zu img {
            width: 100%;
            padding-top: 5rem;
            padding-left: 0rem;
        }
        .llu {
            padding-left: 0rem;
        }
        .reserve .d_f {
            display: block;
        }
    }