/* スマホ（幅 767px 以下） */
@media (max-width: 767px) {
    header {
    text-align: left; 
    }
    .menu{
        display:none;
    }

    /*ハンバーガーメニュー*/
    .hamburger_menu{
        position: relative;
    }

    /*チェックボックス等は非表示に*/
    .nav-unshown {
        display:none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
        position: fixed; /* 画面の右上に固定 */
        top: 20px; /* 画面上からの距離 */
        right: 10px; /* 画面右からの距離 */
        z-index: 10000; /* 他の要素より前面に */
        cursor: pointer;
    }

    /*ハンバーガーの形をCSSで表現*/
    #nav-open span, #nav-open span:before, #nav-open span:after {
        position: absolute;
        height: 3px;/*線の太さ*/
        width: 25px;/*長さ*/
        border-radius: 3px;
        background: #fff;
        display: block;
        content: '';
        cursor: pointer;
    }
    #nav-open span:before {
        bottom: -8px;
    }
    #nav-open span:after {
        bottom: -16px;
    }

    /*閉じる用の薄黒箇所*/
    #nav-close {
        display: none;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }

    /*メニューの中身*/
    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 90%;
        max-width: 330px;/*最大幅（お好みで調整を）*/
        height: 100%;
        background: rgb(0 0 0 / 90%);;
        transition: .3s ease-in-out;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
    }

    /*チェックがついたら表示させる*/
    #nav-input:checked ~ #nav-close {
        display: block;
        opacity: .5;
    }

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 6px 0 25px rgba(0,0,0,.15);
    }

    .header-logo-menu{
        display: flex;
        display: -moz-flex;
        display: -o-flex;
        display: -webkit-flex;
        display: -ms-flex;
        flex-direction: row;
        -moz-flex-direction: row;
        -o-flex-direction: row;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
    }

    /*ロゴやサイトタイトルをセンタリング*/
    .logo-area{text-align:center;margin:auto;}


    /*ハンバーガーメニューの中のul liのscc*/
    .nav-menu ul {
        list-style: none;
        padding: 0;
        margin-top: 50px;
        font-family: Arial, sans-serif;
    }

    .nav-menu ul > li {
        padding: 12px 20px;
    }

    .nav-menu ul > li > a {
        color: #ffffff;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        display: block;
        transition: color 0.3s;
    }

    /* ホバー時 */
    .nav-menu ul > li:hover > a {
        color: #1abc9c;
    }

    /* サブメニュー */
    .nav-menu ul > li > ul {
        display: block;
        margin: 0;
        padding-left: 20px;
    }

    .nav-menu ul > li > ul > li {
        padding: 8px 10px;
    }

    .nav-menu ul > li > ul > li > a {
        color: #cccccc;
        font-weight: bold;
        font-size: 16px;
    }

    .nav-menu ul > li > ul > li:hover > a {
        color: #1abc9c;
    }
  
}