@charset "UTF-8";

/* PC用CSSに追加　↓メニュー用　≡　の指定　 ------------------ */
.navmenu {  display: none; /* PCは非表示 */ }

/*  ------------------------------------------------------------ */


/*  ▼ スマホ用　767px以下の時 ▼ ▼ ▼ ▼ ▼
================================================================================================ */
@media (max-width: 767px) {



/* --------------------------------------------------------------- 
    ▼ スライドして出てくるメニュー
    ▼ 以下は、分かる部分や★の部分を必要に応じて変更して下さい
---------------------------------------------------------------  */  
    
/* 出てくるメニューの方の指定 ---------------------------- */
.ulmenu {
    position: fixed; /* ポジション固定 */
    top: -999px; /* 上に隠れている */
    left:0; /* ★左から0px  */
    z-index: 999; /* 画面の重なり */
    width: 100%; /* ★横幅 メニューの横幅 */
    height: 100%; /* 高さ100％ */
    background-color: rgba(0,0,0,0.7); /* ★背景色 */
}




/* ≡　の指定 ---------------------------- */  
    .navmenu { 
            display: block; /* 表示 */
            color: #f5f3eb; /* ★文字色 */
            text-align: center; /* 文字揃え */
            background-color: #7b6c3e; /* ★背景色 */          
            position: fixed; /* 絶対配置 */
            right:0; /* ★右から0px  */
            top:0; /* ★上から0px  */
            z-index: 9999; /* 画面の重なり一番上 */
            width: 50px; /* 横幅 */
            line-height: 50px; /* 高さ */
            border-bottom: solid 1px #fff;/* 下線 */
            border-left: solid 1px #fff;/* 左線 */
            }
    .navmenu:before{ content: "≡";/* ★≡　表示 *//* ×にアニメ効果をつけるため */
    				transition: all 0.8s; /* ★変わるまでの時間を設定（1sは1秒） */
    				font-size: 30px; /* ★文字サイズ */
    				} 
    
    input[type="checkbox"].on-off{
            display: none; /* 通常は非表示 */
            }
 
    input[type="checkbox"].on-off ~ .ulmenu { /*  ~ ul 後ろにある .ulmenuに適用 */
              overflow: hidden; /* display: none;では高さが出ない */
              transition: all 0.8s ease-out /* ★変わるまでの時間を設定 ease-out ゆっくり終わる（1sは1秒） */
            }
 
    input[type="checkbox"].on-off:checked ~ .ulmenu { /* :checkedは疑似クラス チェックボックスがオンの状態の時 */
        top: 0; /* top マイナスにしていた上を0に戻す */
 }
     .navmenu { cursor: pointer; } /* ★マウスカーソルの形状 ポインター */
     
     
/* チェックボックスオンの時 */
input[type="checkbox"].on-off:checked ~ .navmenu:before{
 content: "×"; /* ★×　表示 */
 display: inline-block;/* アニメ効果をつけるため */
 transform: rotateX(360deg) scale(1.5); /* ★回転風になる ちょっと大きくする */
}
    




/* ▼ スマホ用メニューのレイアウト　▼　ここから下は好みで書き換える　▼
--------------------------------------------------------------------------------------- */
.nav-header ul li {
    margin-bottom: 0; /* 要素外下余白 PC　1emから変更 */
    text-align: center; /* 行そろえleftから変更 */
    border-bottom: solid 1px #7b6c3e; /* メニュ―下線*/
}

/* ナビゲーションメニュー PC版を変更 */
.nav-header ul li a {
    color: #FFFFFF; /* リンクの色　変更 */
    display: block; /* 追加：リンクの行全体が押せるように */
    padding: 2em; /* 追加：ボタン部分内側余白 */
}

/* グローバルメニューリンク文字 */
.nav-header ul li a:hover { /* マウスが重なった時　変更 */
    color: #FFFFFF; /* 文字色 */
    background-color: rgba(123, 108, 62, 0.8); /* 追加：背景色 */
    text-shadow: 1px 2px 3px #ffffff; /* 追加：文字影 */
/* 文字影：水平方向の距離 垂直方向の距離 影のぼかし半径 影の色; */
}





/*--------------------------------------------------------------------------------------------- */
  } /* スマホ用　ここまで */
/*--------------------------------------------------------------------------------------------- */