@charset "UTF-8";
        /*端末ごとの文字サイズ変化に対応*/
        html {
            font-size: 100%;
        }

        
/* ヘッダーFIXのため全体をヘッダー画像分下へずらす
------------------------------- */
body {
    margin-top: 100px;
}

/* デスクトップ版
------------------------------- */

#test {
  display: none;
}

.pointer {
   cursor : pointer;
}

/* ハンバーガーボタン
------------------------------- */
  .hambergerIconSize {
    height: 60px;
    width: 60px;
  }
  .searchIconSize {
    height: 60px;
    width: 60px;
  }

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  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: 4px;
  width: 28px;
  border-radius: 3px;
  background: white;
  transition: 0.5s;
  position: absolute;
}
    
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 10px;
}

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

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

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
 

/* メニューのデザイン*/
.nav_content {
  width: 80%;
  height: 100%;
  position: fixed;/*消すと崩れた*/
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 100;
  background: black;
  transition: .5s;
  display: block;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
  margin-top: 100px;
}

.nav_item  {
    text-align: center;
    margin-top: 10px;
}


/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}
/* モバイル対応（小さな画面では位置を調整） */
@media screen and (min-width: 601px) {
  /* アイコンがクリックされたらメニューを表示 */
  #drawer_input:checked ~ .nav_content {
    left: 0;/* メニューを画面に入れる */
    margin-left: 110px;
  }
}

/* 検索ボタン
------------------------------- */

/* 検索アイコンの設置スペース 使いまわしのため不要**/
.drawer_open2 {
  display: flex;
  /*height: 60px;*/
  /*width: 60px;*/
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* 検索メニューのアイコン */
.drawer_open2 span,
.drawer_open2 span:before,
.drawer_open2 span:after {
  content: '';
  display: block;
  height: 4px;
  width: 28px;
  border-radius: 3px;
  background: white;
  transition: 0.5s;
  position: absolute;
  
}

/* 三本線の中心の棒の位置調整をしたい */
.drawer_open2 span {
  background: rgba(255, 255, 255, 0);
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open2 span:before {
  bottom: 10px;    
  background: rgba(255, 255, 255, 0);
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open2 span:after {
  top: 10px;    
  background: rgba(255, 255, 255, 0);
}

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

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input2:checked ~ .drawer_open2 span::before {
  bottom: 0;
  background: rgba(255, 255, 255, 255);  
  transform: rotate(45deg);
}

#drawer_input2:checked ~ .drawer_open2 span::after {
  top: 0;
  background: rgba(255, 255, 255, 255);  
  transform: rotate(-45deg);
}

/* アイコンがクリックされたら検索アイコンを非表示 */
#drawer_input2:checked ~ .drawer_open2 img {
    display: none;     
}

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



/* メニューのデザイン*/
.nav_content2 {
  width: 80%;
  height: 100%;
  position: fixed;/*消すと崩れた*/
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 100; /* メインメニューの下に表示 */
  background: black;
  transition: .5s;
  display: block;
}


/* 検索フォーム
------------------------------- */

.searchIconSize {
  height: 60px;
  width: 60px;
}

/*フォームにマウスオーバーしたときのカラー変更*/
input[type="text"]:focus {
outline: 1px solid White;/*Grey1 on focus*/
opacity: 0.5;
}

/*検索入力フォームのレイアウト*/
.search_form {
    color: white;
    background: #292524 /*Grey1 default*/;    
}

/*  border: 1px #23201F solid;    */



/*検索実行ボタンのレイアウト*/
.search_button {
    color: white;
}

/*固定検索タグのレイアウト*/
.search input{
    color: white;
    background: black;    
outline: 1px solid white;
    
}

.font-hint {
    color: #757575;
    background: #292524 /*Grey1 default*/;        
}





/* 年齢確認
------------------------------- */

/* モーダルオーバーレイのスタイル */
#ageModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#ageModal img{
    text-align: center;
    max-width: 350px;
    max-height: 350px;
}
/* モーダルコンテンツのスタイル */
#ageModal .modal-content {
  background-color: black;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
#ageModal .modal-content h2 {
  margin-top: 0;
}
/* ボタンのスタイル */
#ageModal .btn {
  margin: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
}
#ageModal .btn-yes {
  background-color: #F6ADC6;
  color: #fff;
}
#ageModal .btn-no {
  background-color: #292524;
  color: #F0F8FF;
}


/* topへ戻るボタン
------------------------------- */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: none;
}

#backToTop img {
  width: 40px;
  height: 40px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

#backToTop img:hover {
  opacity: 1.0;
}


/* 検索ボタン実装
------------------------------- */

  #searchBar {

    max-width: 800px;
    width: 80%;
    margin-left: 0;
    background-color: black;
    padding: 8px;
    display: flex;
    align-items: center;
  }
#searchBar > * {
  font-size: 1rem;
}

  #searchInput {
    flex: 1;
    /*padding: 5px;*/
    font-size: 1em;
  }

  .icon-btn {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .highlight {
    background-color: yellow;
    font-weight: bold;
  }

  .active {
    background-color: orange;
  }

  #counter {
    min-width: 30px;
    text-align: right;
    font-size: 0.9em;
  }

/* toggle-swich title
------------------------------- */
.toggle-title{
   /* 何もしない jQueryでスイッチ対応 */
}

/* モバイル対応（小さな画面では位置を調整） */
@media screen and (max-width: 600px) {
  #backToTop {
    bottom: 15px;
    right: 15px;
  }

  #backToTop img {
    width: 35px;
    height: 35px;
  }
  #mainLogo {
    width: 80px;
    height: 80px;
  }
  .hambergerIconSize {
    justify-content: center;
    height: 50px;
    width: 50px;
    margin-top: 10px;
  }
  .icon-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  #searchBar {
    height: 80px;
    width: 200px;
    background-color: black;
    /*padding: 8px;*/
    display: flex;
    /*gap: 6px;*/
    align-items: center;
  }
  .searchIconSize {
    height: 24px;
    width: 24px;
  }
  .searchInputSize {
    height: 24px;
    width: 100px;
    margin: 0;
    margin-left: 0;
  }


}

#mainLogo {
  margin-right: 0;

}