/* ドロワーメニュー:リセットCSS */
 @media only screen and (max-width: 896px){
    ::before , ::after {
      box-sizing: inherit;
    }
    button {
      display: block;
      margin: 0;
      padding: 0;
      outline: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: inherit;
      text-align: inherit;
      font: inherit;
      /* -webkit-appearance: none; */
      appearance: none;
    }
    /**************** 以下、ハンバーガーボタンのスタイリング ****************/
    .btn {
        /* ボタンの配置位置  */
        position: fixed;
        top: 20px;
        right: 8px;
        /* 最前面に */
        z-index: 998;
        /* ボタンの大きさ  */
        width: 40px;
        height: 40px;
        background-color: #fa9628;
        cursor: pointer;
    }
    /***** 真ん中のバーガー線 *****/
    .btn-line {
        display: block;
        /* バーガー線の位置基準として設定 */
        position: relative;
        /* 線の長さと高さ */
        width: 70%;
        height: 2px;
        /* バーガー線の色 */
        background-color: #fefefe;
        transition: .2s;
      /* 真ん中に */
      margin: 0 auto;
    }
    /***** 上下のバーガー線 *****/
    .btn-line::before , .btn-line::after {
        content: "";
        /* 基準線と同じ大きさと色 */
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fefefefe;
        transition: .5s;
    }
    .btn-line::before {
        /* 上の線の位置 */
        transform: translateY(-10px);
    }
    .btn-line::after {
        /* 下の線の位置 */
        transform: translateY(10px);
    }
    /***** メニューオープン時 *****/
    .btn-line.open {
        /* 真ん中の線を透明に */
        background-color: transparent;
    }
    .btn-line.open::before , .btn-line.open::after {
        content: "";
        background-color: #fefefe;
        transition: .2s;
    }
    .btn-line.open::before {
        /* 上の線を傾ける */
        transform: rotate(45deg);
    }
    .btn-line.open::after {
        /* 上の線を傾ける */
        transform: rotate(-45deg);
    }
    }
  
  /**************** ここまで、ハンバーガーボタンのスタイリング ****************/
  
  @media only screen and (max-width: 896px){
    header{
      min-width: 320px;
      width: 100vw;
      height: auto;
    }
      .menu{
          /* メニューを縦に */
          display: flex;
          flex-direction: column;
          position: fixed;
          /* メニューの位置マイナス指定で画面外に */
          right: -100%;
          width: 100%;
          height: 100vh;
          background-color: rgba(80, 49, 29, .8);
          color: #fefefe;
          transition: .3s;
      }
      .menu-list {
          /* メニューテキスト位置をリスト内中心に */
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          margin: 0;
      }
      .menu li{
        padding: 0;
      }
      .menu-list:hover {
        background-color: rgba(255, 255, 255, .5);
        color: #fefefe;
        cursor: pointer;
        transition: .3s;
      }
      .menu-list:last-child{
        padding-bottom: 10px;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .menu-list:last-child p{
        font-family: 'Cantarell', sans-serif;
      }
      .menu-list:last-child span{
        font-size: 20px;
        line-height: 2;
      }
      .menu-list:nth-last-child(3){
        display: inherit;
      }
      .menu-list:nth-child(2){
        display: inherit;
        margin: 10px 0;
        background-color: transparent;
      }
      .menu-list:nth-child(2) img{
        width: 50%;
      }
      .menu-list:first-child{
        display: none;
      }
      .menu-list:nth-last-child(3):hover{
        background-color: rgba(80, 49, 29, .8);
        color: #fefefe;
      }
      .menu-list:nth-last-child(2){
        display: none;
      }
      nav ul li a{
        color: #fefefe;
        font-size: 20px;
      }
      nav ul li img {
        width: 50px;
        padding: 0 30px;
      }
      #gnavi{
        height: 0;
      }
      nav .font12{
        padding-top: 2px;
        font-size: 16px;
      }
    }
  
    @media only screen and (max-width: 896px){
      /* common */
      #container {
        width: 100%;
        overflow: hidden;
        min-width: 320px;
      }
      .tel,#page_top{
        display: none;
      }
      
      .qa_kv{
        display: none;
      }
      .qa_kv_sp{
        display: block;
      }
      .qa_kv_sp img{
        width: 100%;
      }
      /* /common */

      .wrap{
        padding-left: 0;
      }

      .flex{
        display: block;
        padding: 0 30px;
        margin-top: 30px;
      }

      .q_img{
        text-align: center;
        padding-bottom: 8%;
      }

      .answer{
        line-height: 2;
      }

      .sp_none{
        display: none;
      }

      footer{
        height: auto;
      }
      footer .flex{
        display: block;
        padding: 0 25px 10px;
      }
      .footer_logo img{
        width: 225px;
        display: block;
        margin: 0 auto;
        padding: 30px 20px;
      }
      .footer_text {
        width: 100%;
      }
      
      /* ベイクモール追加 */
      .sp_bakemall{
        display: block;
      }
      .sp_bakemall img{
        width: 140px;
      }
      .footer_logo a {
        display: none;
      }
      /* ここまで */

      footer .link_tel a{
        color: #fefefe;
      }
      .footer_menu{
        width: 100%;
      }
      .footer_menu img{
        width: 35px;
        padding: 10px 0px 10px 25px;
      }
      footer .footer_menu_wrap ul li::after{
        padding: 0 4px;
      }
      small{
        padding: 10px;
      }
    }