@charset "utf-8";

/*====================ブレイクポイント PC：768px以下====================*/
@media only screen and (max-width:768px) {

    header {
        height: 60px;
    }

    header .mainLogoBox {
        width: 100%;
    }

    header .mainLogoBox h1 {
        padding: 14px;
        color: white;
        font-size: 28px;
        font-weight: 600;
        vertical-align:middle;

    }
    
    header .mainLogoBox h1 span {
        font-size: 18px;
        vertical-align: 3px;
        font-weight: 400;
        padding-inline-end: 20px;
    }

    .snsBox {
        display: none;
    }


    .snsBox2 {
        display: flex;
        right: 70px;
        color: white;
        height: 80px;
        width: 180px;
        margin: 20px auto;
    }
    
    .snsBox2 a {
        padding: 20px;
        height: 80px;
        width: 50px;
    }
    
    .snsBox2 img {
        height: 40px;
        width: 40px;
    }


    .naviBox {
        height: 100vh;  /* ビューポートの高さいっぱいに */
    }

    .naviBox .naviMenu {
        display: flex;
        flex-direction: column; 
        align-items: center;      /* 横方向は中央揃え */
        justify-content: flex-start;  /* 縦方向は上寄せ */
        padding-top: 0px;        /* 上に余白を少し入れる場合 */
        height: 100%;
    }
    

    /* ハンバーガー */
    .naviWrapper {
        width: 50px;
    }

    .humberger {
        width: 50px;
    }

    .menuToggle {
        width: 50px;
        height: 50px;
    }

    .menu {
        display: none;
    }

    .menuToggle span {
        left: 10px;
    }

    .footercover {
        display: block;
        width: 100%;
        height: auto;
    }

    .footerLeft {
        width: 100%;
        padding: 10px;
    }

    .copyright {
        width: 100%;
    }

    .footerRight {
        display: none;
    }

}