/* 
こんな感じ
<header>
    <div class="title">
        <div class="logo">三雲屋</div>

        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>        
    </div>
</header>

<nav>
    <ul class="menu">
        <li><a href="#">ホーム</a></li>
        <li>
            <a href="#">会社概要</a>
            <ul>
                <li><a href="#">会社概要</a></li>
                <li><a href="#">姉妹店 C'est toi(セトワ)</a></li>
            </ul>
        </li>
        <li><a href="#">取扱商品</a></li>
        <li><a href="#">よくある質問</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>
*/

* { box-sizing: border-box; }

a {
	text-decoration: none;
}

ul, li {
	/* padding: 0px;
	margin: 0px;
	list-style: none; */
}


header .title {
    display: flex;
    /* height: 50px; */
    padding: 0px 10px;
    position: fixed;
    top: -5px;
    right: 20px;
    z-index: 300;
}
  
header .title div:nth-child(1) { /* ハンバーガーボタンを指定 */
    margin-right: auto;
}

/* メニュー */
/* メニューの一覧 */
nav {
    /* background-color: #d60000; */
    text-align: center;
    z-index: 100;

}
ul.menu {
    letter-spacing: -100px; /* inline-blockで要素を横並びにした時の隙間を無くす */
    max-width: 800px;
    margin: auto;
    /* padding-left: 0; */
}
ul.menu > li{
    width: 20%;
}
 
/* メイン */
ul.menu li {
    position: relative;
    display: inline-block; /* これが無いと、子と孫の位置がかなりずれる */
    letter-spacing: normal; /* 上で指定したletter-spacingを元通りに */
}

ul.menu a {
    display: block; /* リンクボタン全体をクリック出来るように */
    padding: 15px; /* ここでメニューのサイズ */
    /* color: #fff; */
    font-weight: 500;
    text-decoration: none;
}

ul.menu a:hover {
    background: rgba(128, 128, 128, 0.2); /* グレーの薄さ0.2 文字色はそのまま */
}
 
/* サブメニュー(hover時) */
ul.menu li:hover > ul {
    display: block; /* ここで表示(hover時) */
}
 
/* サブメニュー */
ul.menu ul {
    display: none;
    position: absolute;
    z-index: 100;
    padding-left: 0;
}
 
/* サブメニュー以降 */
ul.menu ul li {
    width: 160px; /* ここである程度の長さを指定しないと、文字が縦並びになる(px指定) */
    background-color: #f5f3f0;
}

/* ハンバーガーメニュー */
/* ここでハンバーガー枠全体のサイズ */
.hamburger {
    position: relative;
    width: 30px;
    height: 22px;
    top: 30px;
    left: 10px;
}
  
/* 三本線 */
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    border-radius: 3px;
}

/* 三本線の上の部分 */
.hamburger span:nth-of-type(1) {
    top: 0;
}

/* 三本線の中心部分 */
.hamburger span:nth-of-type(2) {
    top: 10px;
}

/* 三本線の下の部分 */
.hamburger span:nth-of-type(3) {
    bottom: 0;
}
  
  
/* ハンバーガー三本線：棒の動きや傾き加減など */
.hamburger,
.hamburger span {
    display: none;
    transition: all .4s; /* クリックしてからの動作時間 */
    z-index: 10;
}
  
  
/* ここで数字を変えて傾きなどを調節 */
.hamburger.active span {
    background-color: #fff;
}
.hamburger.active span:nth-of-type(1) { /* 上の棒線 */
    transform: translateY(13px) rotate(-45deg);
    -webkit-transform: translateY(10px) rotate(-45deg);
}

.hamburger.active span:nth-of-type(2) { /* クリックしたら消える真ん中の棒線 */
    opacity: 0;
}

.hamburger.active span:nth-of-type(3) { /* 下の棒線 */
    transform: translateY(-15px) rotate(45deg);
    -webkit-transform: translateY(-10px) rotate(45deg);
}

/* スマホ、PC 切り替え */
@media (max-width: 768px) {

    
}

/* スマホ */
@media only screen and (max-width:768px) {
    .hamburger,
    .hamburger span {
        display: inline-block;
        z-index: 200;
    }
    
    header {
        position: relative;
    }
    
    /* メニュー部分 */
    nav {
        margin-top: 0;
        padding: 20px 0;
        position: fixed;
        top: 0;
        left: 40px;
        width: 340px;
        transform: translateX(100%);
        transition: all .3s;
        background-color: #d60000;
        color: #fff;
        text-align: left;
        height: 100%; /* スクロールできるように */
        overflow: auto; /* スクロールできるように */
        -webkit-overflow-scrolling: touch; /* スクロールできるように */
    }
    /* メニュー部分：アクティブ時 */
    nav.active {
        /* display: block; */
        transform: translateX(0%);
        transition: all .3s;
    }
    ul.menu a {
        width: 80%;
    }
    
    ul.menu li {
        display: initial;
    }
    
    ul.menu ul {
        display: initial;
        position: initial;
    }
    
    ul.menu ul ul {
        display: initial;
        position: initial;
        top: initial;
        left: initial;
    }
    ul.menu > li a {
        /* padding-left: 40px; */
    }
    ul.menu ul li a {
        padding-left: 40px;
    }
}

/*閉じる用の薄黒カバー*/
#nav-back {
    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-back.active {
    display: block;/*カバーを表示*/
    opacity: .5;
}