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

    .top{
        background: #E2E2E2;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .logo{
        width:60%;
    }

    .logo1{
        display: none;
    }

            /* ハンバーガーメニューのCSS */

            .hamburger-menu{
                display:block ;
            }
        
            .menu-btn {
                position: fixed;/* 固定 */
                top: 30px; /* 上からの距離 */
                right: 30px; /* 右からの距離 */
                display: flex; 
                height: 40px; /* ハンバーガーメニューの背景の高さ */
                width: 40px; /* ハンバーガーメニューの背景の幅 */
                justify-content: center; /* 三本線の左右の中央寄せ */
                align-items: center; /* 三本線の上下の中央寄せ */
                z-index: 90; /* 被った時に上に表示されるように */
                background-color: #E2E2E2; /* ハンバーガーメニューの背景色 */
            }
            .menu-btn span,
            .menu-btn span:before,
            .menu-btn span:after {
                content: '';
                display: block;
                height: 3px; /* 三本線の上下幅 */
                width: 25px; /* 三本線の左右幅 */
                border-radius: 3px; /* 三本線の丸み */
                background-color: #000; /* 三本線の色 */
                position: absolute;
            }
            .menu-btn span:before {
                bottom: 8px; /* 真ん中の線を起点とした時の一番上の線の距離 */
            }
            .menu-btn span:after {
                top: 8px;  /* 真ん中の線を起点とした時の一番下の線の距離 */
            }
        
            #menu-btn-check:checked ~ .menu-btn span {
            background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
            }
        
            #menu-btn-check:checked ~ .menu-btn span::before {
            bottom: 0;
            transform: rotate(45deg);/* 押したら回転する */
            }
        
            #menu-btn-check:checked ~ .menu-btn span::after {
            top: 0;
            transform: rotate(-45deg);/* 押したら回転する */
            }
        
            #menu-btn-check {
                display: none;
            }
        
            /* ここから、ハンバーガーメニューを押したら表示されるメニューのCSS */
        
            .menu-content {
                width: 100%; /* メニューの横幅 */
                height: 100%; /* メニューの縦幅 */
                position: fixed;
                top: 0;
                left: 100%;/* leftの値を変更してメニューを画面外へ */
                z-index: 80;
                background-color: #E2E2E2;/* メニューの背景色 */
                transition: all 0.5s;/* メニューが現れる秒数 */
            }
        
            .menu-content ul {
                padding: 50px 10px 0; /* メニュー全体の余白 */
            }
        
            .menu-content ul li {
                list-style: none;
            }
        
            .menu-content ul li a { /* メニューの文字のCSS */
                display: block;
                width: 100%;
                font-size: 18px;
                box-sizing: border-box;
                color:#000;
                text-decoration: none;
                padding: 20px 70px;
                font-family: "Source Han Sans JP";
                font-weight: bold;
                line-height: 3.8;
                text-align: center;
                position: relative;
				display:inline-block;
            }
        
            #menu-btn-check:checked ~ .menu-content {
                left: 0;/*ハンバーガーメニューを押したら、メニューを画面内へ*/
            }

    .black2{
        font-size: 40px;
        line-height: 1.5;
        text-align: center;
        width:70%;
        font-weight: bold;
        padding-top: 40px;
        padding-bottom: 0;
    }

    .line{
        display: none;
    }

    .line2{
        width:35%;
        padding-bottom: 40px;
        display: block;
        margin: 0 auto;
        height: 20px;
        padding-top: 0;
        padding-left: 15px;
    }

    h3{
        font-size: 20px;
        line-height: 1.8;
        padding-bottom: 20px;
    }

    .title{
        padding-bottom: 15px;
    }

    .title1{
        width:90%;
        padding-bottom: 45px;
    }

    .image{
        width:45%;
    }

    .local{
        padding-left: 0;
        padding-left: 20px;
        width:60%;
    }

    .monday{
        font-family: "Source Han Sans JP";
        font-weight: normal;
        font-size: 13px;
        line-height: 3;
        color: #000;
        display:block;
        text-align: left;
    }

    h4{
        font-size: 18px;
        line-height: 1.9;
        padding-bottom: 0;
        word-wrap: break-word;
        width:100%;
    }

    p{
        font-size: 15px;
        line-height: 1.5;
    }

    .face{
        padding-top:0;
        padding-bottom: 20px;
        font-size: 20px;
        line-height: 1.8;
    }

    .member{
        padding-bottom: 80px;
    }

    .mask{
        max-width:90%;
        margin:0 auto;
        display: block;
    }

    .post01{
        display: none;
    }

    .gran{
        width: 60%;
        padding-top: 20px;
    }

    .mokuji1{
        font-size: 12px;
        line-height: 1.1;
        padding-right: 0;
        width:30%;
    }

    .toi0{
        font-size: 12px;
        line-height: 1.1;
        width:30%;
    }

    .ltd{
        font-size: 12px;
        line-height: 1.5;
        padding-top: 14px;
        padding-bottom: 20px;
    }

}

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

    .top{
        background: #E2E2E2;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .logo{
        width:60%;
    }

    .logo1{
        display: none;
    }

    /* ハンバーガーメニューのCSS */

    .hamburger-menu{
        display:block ;
    }

    .menu-btn {
        position: fixed;/* 固定 */
        top: 15px; /* 上からの距離 */
        right: 15px; /* 右からの距離 */
        display: flex; 
        height: 30px; /* ハンバーガーメニューの背景の高さ */
        width: 30px; /* ハンバーガーメニューの背景の幅 */
        justify-content: center; /* 三本線の左右の中央寄せ */
        align-items: center; /* 三本線の上下の中央寄せ */
        z-index: 90; /* 被った時に上に表示されるように */
        background-color: #E2E2E2; /* ハンバーガーメニューの背景色 */
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px; /* 三本線の上下幅 */
        width: 25px; /* 三本線の左右幅 */
        border-radius: 3px; /* 三本線の丸み */
        background-color: #000; /* 三本線の色 */
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 8px; /* 真ん中の線を起点とした時の一番上の線の距離 */
    }
    .menu-btn span:after {
        top: 8px;  /* 真ん中の線を起点とした時の一番下の線の距離 */
    }

    #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }

    #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);/* 押したら回転する */
    }

    #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);/* 押したら回転する */
    }

    #menu-btn-check {
        display: none;
    }

    /* ここから、ハンバーガーメニューを押したら表示されるメニューのCSS */

    .menu-content {
        width: 100%; /* メニューの横幅 */
        height: 100%; /* メニューの縦幅 */
        position: fixed;
        top: 0;
        left: 100%;/* leftの値を変更してメニューを画面外へ */
        z-index: 80;
        background-color: #E2E2E2;/* メニューの背景色 */
        transition: all 0.5s;/* メニューが現れる秒数 */
    }

    .menu-content ul {
        padding:20px  10px 0; /* メニュー全体の余白 */
    }

    .menu-content ul li {
        list-style: none;
    }

    .menu-content ul li a { /* メニューの文字のCSS */
        display: block;
        width: 100%;
        font-size: 14px;
        box-sizing: border-box;
        color:#000;
        text-decoration: none;
        padding: 20px 70px;
        font-family: "Source Han Sans JP";
        font-weight: bold;
        line-height: 3.8;
        text-align: center;
        position: relative;
    }

    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*ハンバーガーメニューを押したら、メニューを画面内へ*/
    }

    .ball{
        display:flex;
        background-color: black;
    }

    .apply01{
        flex-basis: 50%;
        border-right: 2px solid white;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .apply02{
        flex-basis: 50%;
        border-left: 2px solid white;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .mini {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .file1{
        display: inline-block;
    }

    .black2{
        font-size: 35px;
        line-height: 1.5;
        text-align: center;
        width:70%;
        font-weight: bold;
        padding-top: 40px;
    }

    .line{
        display: none;
    }

    .line2{
        width:57%;
        padding-bottom: 40px;
        display: block;
        margin: 0 auto;
        padding-left: 0;
    }

    h3{
        font-size: 18px;
        line-height: 1.8;
        padding-bottom: 20px;
    }

    .title1{
        width:90%;
        margin:0 auto;
        padding-bottom: 35px;
    }

    .image{
        height: 120px;
        width:45%;
    }

    .local{
        padding-left: 0;
        padding-left: 10px;
    }

    .monday{
        font-family: "Source Han Sans JP";
        font-weight: normal;
        font-size: 12px;
        line-height: 1;
        color: #000;
        display:block;
        text-align: left;
    }

    h4{
        font-size: 14px;
        line-height: 1.3;
        padding-bottom: 0;
    }

    p{
        font-size: 8px;
        line-height: 1.5;
    }

    .face{
        padding-top:0;
        padding-bottom: 20px;
    }

    .member{
        padding-bottom: 80px;
    }

    .mask{
        max-width:100%;
        margin:0 auto;
        display: block;
    }

    .gran{
        width: 60%;
        padding-top: 20px;
    }

    .mokuji1{
        font-size: 12px;
        line-height: 1.1;
        padding-right: 0;
        width:30%;
    }

    .toi0{
        font-size: 12px;
        line-height: 1.1;
        width:30%;
    }

    .ltd{
        font-size: 12px;
        line-height: 1.5;
        padding-top: 14px;
        padding-bottom: 20px;
    }
}