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

  ここから下がハンバーガーメニュー
  に関するCSS

------------------------------*/
@media(max-width:797px){

  header{
    position: fixed;
    width: 100%;
    padding-left: 16px;
    z-index: 500;
  }

  .header-s {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #fff;
  }


  .drawer{
    display: block;
  }

  /* チェックボックスは非表示に */
  .drawer-hidden {
    display: none;
  }

  /* ハンバーガーアイコンの設置スペース */
  .drawer-open {
    display: flex;
    height: 72px;
    width: 72px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;/* 重なり順を一番上に */
    cursor: pointer;
    background-color: #F3914D;
    color: #fff;

  }

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

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

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

  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer-check:checked ~ .drawer-open span {
    background-color: #F3914D;
  }

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

  #drawer-check:checked ~ .drawer-open span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* メニューのデザイン*/
  .drawer-content {
    width: 100%;
    height: 800px;
    position: fixed;
    top: 72px;
    left: 100%;/* メニューを画面の外に飛ばす */
    z-index: 99;
    background: #F3914D;
    transition: .5s;

    font-size: 18px;
  }

  .drawer-content img{
    width: 40px;
    height: auto;
  }

  .drawer-content ul li a{
    text-decoration: none;
    color: #fff;
  }

  .sp-list{
    border:solid #fff;
    border-width: 0 0 1px 0;
    padding:15px 0 15px 63px;
  }

  .sp-list:hover{
    background-color: #fff;
    color: #F3914D;
    transition: 0.5s;

  }

  .sp_kaitai{
    margin-top: -18px;
  }

  .sp_kaitai,
  .sp_kinkyu,
  .sp_ryokin,
  .sp_flow,
  .sp_question{
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center left 50px;
    padding-left: 100px;
    padding:30px 0 30px 100px;
  }

  .sp_kaitai{
    background-image: url("../img/common/white/01_shovelcar_white.png");
  }
  .sp_kinkyu{
    background-image: url("../img/common/white/02_exclamation_white.png");
  }
  .sp_ryokin{
    background-image: url("../img/common/white/03_wallet_white.png");
  }
  .sp_flow{
    background-image: url("../img/common/white/04_home_white.png");
  }
  .sp_question{
    background-image: url("../img/common/white/05_question_white.png");
  }


  .sp_kaitai:hover{
    background-image: url("../img/common/orange/01_shovelcar_orange.png");
    transition: 0.5s;
  }
  .sp_kinkyu:hover{
    background-image: url("../img/common/orange/02_exclamation_orange.png");
    transition: 0.5s;
  }
  .sp_ryokin:hover{
    background-image: url("../img/common/orange/03_wallet_orange.png");
    transition: 0.5s;
  }
  .sp_flow:hover{
    background-image: url("../img/common/orange/04_home_orange.png");
    transition: 0.5s;
  }
  .sp_question:hover{
    background-image: url("../img/common/orange/05_question_orange.png");
    transition: 0.5s;
  }




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

  }

}