/*====================
    参考値
 - -479px：スマートフォン縦
 - 480px?599px：スマートフォン横
 - 600px?959px：タブレット
 - 960px?1279px：小型PC
 - 1280px?：大型PC
====================*/


/*
.nav-header {
    display: none;
}*/


/* -479px：SP縦
------------------------------ */

@media screen and (max-width:479px) {
    body {
        min-width: auto;
    }
    #contents {
        top: 100;
        left: 0;
        padding: 5%;
        width: 90%;
    }
    #contents img {
        width: 100%;
    }
    #menu {
        display: none;
    }
    /*------------------------
  ハンバーガーメニュー(CSSだけ仕様)
  ------------------------*/
    .nav-header {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        padding: 0;
        width: 100%;
        background: #fff;
    }
    #nav-drawer {
        position: absolute;
        right: 0;
        padding: 10px;
    }
    /*チェックボックス等は非表示に*/
    .nav-unshown {
        display: none;
    }
    /*アイコンのスペース*/
    #nav-open {
        display: flex;
        width: 25px;
        height: 22px;
        align-items: center;
    }
    /*ハンバーガーの形をCSSで表現*/
    #nav-open span.hbg-menu,
    #nav-open span.hbg-menu:before,
    #nav-open span.hbg-menu:after {
        z-index: 9999;
        height: 3px;
        /*線の太さ*/
        width: 25px;
        /*長さ*/
        border-radius: 3px;
        background: #555;
        display: block;
        content: '';
        cursor: pointer;
        transition: .2s ease-in-out;
    }
    #nav-open span.hbg-menu {
        position: relative;
    }
    #nav-open span:before {
        position: absolute;
        transform: translateY(-8px);
    }
    #nav-open span:after {
        position: absolute;
        transform: translateY(8px);
    }
    /*ハンバーガーメニューのタイトル*/
    .hbg-menu-title {
        padding-left: 30px;
    }
    /*閉じる用の薄黒箇所*/
    #nav-close {
        display: block;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        visibility: hidden;
        transition: .2s ease-in-out;
    }
    /*メニューの中身*/
    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        width: 90%;
        max-width: 330px;
        /*最大幅（お好みで調整を）*/
        height: 100%;
        background: #fff;
        transition: .3s ease-in-out;
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
    }
    /*チェックがついたら表示させる*/
    #nav-input:checked~#nav-close {
        visibility: visible;
        opacity: .5;
        transition: .2s ease-in-out;
    }
    #nav-input:checked~#nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
    }
    #nav-input:checked~#nav-open .hbg-menu {
        background-color: transparent;
    }
    #nav-input:checked~#nav-open .hbg-menu:before {
        transform: rotate(45deg);
    }
    #nav-input:checked~#nav-open .hbg-menu:after {
        transform: rotate(-45deg);
    }
    #nav-input:checked~#nav-open .hbg-menu,
    #nav-input:checked~#nav-open .hbg-menu:before,
    #nav-input:checked~#nav-open .hbg-menu:after {
        transition: .2s ease-in-out;
    }
    .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 {
        display: block;
        position: relative;
        text-align: left;
    }
    /*------------------------
    ハンバーガーメニュー終わり*/
}