@charset "utf-8";

/**************************************/
/*     　ドロップダウンメニュー       */
/**************************************/
/* CSSソース内の「★」部分は必ず記述する必要があります。それ以外の装飾は自由に調整して下さい。 */
/* ソース参考ページ：https://allabout.co.jp/gm/gc/23911/6/ */

*{box-sizing: border-box;}
/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.global-navi{
    text-align: center;  /* メインメニューの文字列の配置(中央寄せ) */
    font-weight: bold;   /* 太字にする */
    font-family: F66筆ずいせん;  /* フォントの種類 */
    letter-spacing: 0.1em;   /* ◆フォントの字間（メニュー文字）※ 0.05em～0.1emで設定する */
    background-color: #3e312b; /* バーの背景色 */
    padding: 0px 0px 0px 0px;  /* メニューバー内側の余白(左に15px) */
    margin: 0;  /* ◆自分で付け足し。ヘッダー隙間対策 */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.global-navi li{
   width: 13%;         /* メニュー項目の横幅(デフォルト/125px) */
   display: inline-block; /* ★横並びに配置する */
   list-style-type: none; /* ★リストの先頭記号を消す */
   position:relative;     /* ★サブメニュー表示の基準位置にする */
}
ul.global-navi li a{
   display: block; /* ◆メニュー文字２段の整列用 *//* ★項目内全域をリンク可能にする */
   text-decoration: none; /* ◆文字装飾。リンクの下線なし */
   background-color: #4b403c; /* メニュー項目の背景色(#6b4e4c/#361e27) */
   color: #fff; /* メニュー項目の文字色(白色) */
   line-height: 30px; /* メニュー項目のリンクの高さ(行間) */
      height: auto;   /* ◆バー背景の高さにメニュー項目の高さピッタリ合わせる */
      padding: 1rem;   
}
/*** メニュー文字・2段の上の方（上段）の装飾（非表示） 
ul.global-navi a:first-line{ 
    font-size: 16px;
    font-weight: bold;
}
***/
/* リンクのホバー色（Notリンクでホバーしても背景色変わらないための仕様。自力で解決コード） */
ul.global-navi li a:hover{
    background: #731322; /* メニュー項目にマウスが載ったときの背景色 */
    color: wheat;        /* メニュー項目にマウスが載ったときの文字色*/
}
/* リンクのホバー色（元コード。<a href～>のリンク外してもホバーで色が変わる。）
ul.global-navi li:hover{
background: #731322;
}*/

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */ /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.global-navi li:hover ul {
   display: block;  /* ★マウスポインタが載っている項目の内部にあるリストを表示する */
}
/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.global-navi ul {
   margin: 0;         /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0;        /* ★サブメニュー内側の余白(ゼロ) */
   display: none;       /* ★標準では非表示にする */
   position: absolute;  /* ★絶対配置にする */
 z-index: 2;/* ◆ドロップダウン（サブメニュー）手前に表示 */
}
/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.global-navi ul li {
   width: 260px;        /* サブメニュー1項目の横幅(元コード/135px) */
   border-top: 1px solid whitesmoke; /* サブメニュー項目上側の枠線 */
}
ul.global-navi ul li a {
   line-height: 25px;     /* サブメニュー1項目の高さ*/
   text-align: center;    /* 文字列の配置 */
   padding-left: 5px;     /* 文字列左側の余白 */
   font-weight: bolder;    /* サブメニュー文字の太さ（normal＝太くしない） */    
}
ul.global-navi ul li a:hover {
   background-color: #731322;  /* サブメニュー（<a href=""～>リンク）項目にマウスが載ったときの背景色 */
   color: wheat;          /* サブメニュー項目にマウスが載ったときの文字色 */
}





/***** --------------- <hr> --------------- *****/




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

スマホ用ハンバーガーメニュー（PC非表示）※※ 削除禁止 ※※

--------------------------*/
.nav{
 display: none; /* （PC非表示） */
}





/***** --------------- <hr> --------------- *****/





/* ◆ スマホ用CSS（PC版のドロップダウンメニュー）ここから（PC非表示） ◆ */
@media screen and (max-width: 520px) {

/* PC版ドロップダウンメニュー（スマホ/ 非表示） */
ul.global-navi{
 display: none;
}

/* スマホ用ハンバーガーメニュー（スマホ表示させる）*/
.nav{
 display: inline-block;
}



/*** 旧・スマホ表示用（現在未使用）
ul.s-phone_menu {
  display: inline-block; 
} 
***/

  }
/* ◆ スマホ用CSS（ドロップダウンメニュー）ここまで ◆ */


/* ◆ タブレット用CSS（ドロップダウンメニュー）ここから（PC非表示） ◆ */
@media screen and (max-width: 960px) {

/* PC版ドロップダウンメニュー（小さいタブレット/ 非表示） */
ul.global-navi{
  display: none; 
}

/* スマホ用ハンバーガーメニュー（スマホ表示させる）*/
.nav{
 display: inline-block;
}

/*** 旧・スマホ表示用（現在未使用）
ul.s-phone_menu {
  display: inline-block;
}
 ***/

  }
/* ◆ タブレット用CSS（ドロップダウンメニュー）ここまで ◆ */





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

旧・スマホ用サイトメニュー（現在未使用）ここから

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

/**************************************/
/*    スマホ用メニュー（PC非表示）    */
/**************************************/

ul.s-phone_menu {
 display: none;  /* （PC非表示）*/
    margin: 0;  /* ヘッダー隙間対策 */
    padding: 0; 
    width: 100%;
    text-align: center;  /* メインメニューの文字列の配置(中央寄せ) */
    font-weight: bold;   /* 太字にする */
    font-family: F66筆ずいせん;
    letter-spacing: 0.1em;
    background-color: #3e312b;
}
/* メインメニュー項目 */
ul.s-phone_menu li{         
    display: block;
    list-style-type: none; /* リストの先頭記号を消す */
    position:relative;     /* サブメニュー表示の基準位置にする */
}
ul.s-phone_menu li a{
    display: block; /* メニュー文字２段の整列用 *//* 項目内全域をリンク可能にする */
    text-decoration: none; /* リンクの下線なし */
    background-color: #4b403c; /* メニュー項目の背景色(#6b4e4c/#361e27) */
    color: #fff; /* メニュー項目の文字色(白色) */
    line-height: 30px; /* メニュー項目のリンクの高さ(行間) */
    height: auto;   /* ◆バー背景の高さにメニュー項目の高さピッタリ合わせる */
    padding: 1rem;  
}
ul.s-phone_menu li a:hover{
    background: #731322; /* メニュー項目にマウスが載ったときの背景色 */
    color: wheat;        /* メニュー項目にマウスが載ったときの文字色*/
}
/* ▼サブメニュー */
ul.s-phone_menu li:hover ul {
    display: block;   
    font-weight: bolder; /* サブメニュー文字の太さ（normal＝太くしない） */ 
  /* z-index: 1;　◆ドロップダウン（サブメニュー）手前に表示 */
}
ul.s-phone_menu ul {
    margin: 0;         /* ★サブメニュー外側の余白(ゼロ) */
    padding: 0;        /* ★サブメニュー内側の余白(ゼロ) */
    display: none;       /* ★標準では非表示にする */
/* ★    position: absolute;  　絶対配置にする */
}
ul.s-phone_menu ul li {
/*     width: 200px;        サブメニュー1項目の横幅(元コード/135px) */
    border-top: 1px solid whitesmoke; /* サブメニュー項目上側の枠線 */
}
ul.s-phone_menu ul li a {
    line-height: 25px;     /* サブメニュー1項目の高さ*/
    text-align: center;    /* 文字列の配置 */
    background-color: #333333;
}
ul.s-phone_menu ul li a:hover {
    background-color: #731322;  /* サブメニュー項目にマウスが載ったときの背景色 */
    color: wheat;          /* サブメニュー項目にマウスが載ったときの文字色 */
}
/* スマホ用TOPメニュー　ここまで */

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

旧・スマホ用サイトメニュー（現在未使用）ここまで

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





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

2022年8月12日追加 / スマホ用・ハンバーガーメニューCSSコード（元コードそのまま使用）

参考（コピペ）サイト：
https://web-camp.io/magazine/archives/88361

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

/* （header / 元コード）（現在未使用）
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #fff;
}

.logo {
  font-size: 24px;
}
*/

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #ffffff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になるように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
    background-color: #333333; /* ✕印の色（自分で追加） */
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
    background-color: #333333; /* ✕印の色（自分で追加） */
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 70%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: antiquewhite; /* ハンバーガーメニューの背景全体色（クリック後） */
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;  /* リスト左の黒ポチ消去 */ 
    background-color: oldlace; /* ハンバーガーメニュー（リンク）背景色 */
    border-radius: 0; /* なぜか影響しているINDEX.sideの<ul>リンクcssの角丸リセット */
    font-size: nomal;
    margin: 0; 
    padding: 0;
    text-align: left;
    
    
}

/* ハンバーガーリンクの上下スペース調整（自分で追加） */
ul.nav_list li {
    margin: 0;
    padding: 10px 0px 10px 80px;
}

/* ハンバーガーリンクのホバー色（マウスを乗せた時の色）（自分で追加） */
ul.nav_list li a:hover {
    display: block;  /* マウスホバー時、リンクの背景色全体の色を変える */   
    background-color: indianred;  /* メニュー項目にマウスが載ったときの背景色 */
    color: wheat;  /* メニュー項目にマウスが載ったときの文字色*/
    padding: 15px; /* リンクにマウスホバー時、リンクスペースをpadding調整で大きく見せる */
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}