/* ドロワーメニュー:リセット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{
          top: 0;
          /* メニューを縦に */
          display: flex;
          flex-direction: column;
          position: fixed;
          /* メニューの位置マイナス指定で画面外に */
          right: -100%;
          width: 100%;
          height: 100vh;
          background-color: rgba(80, 49, 29, .8);
      /* background-color: #50311d; */
          color: #fefefe;
          transition: .3s;
      }
      .menu-list {
          /* メニューテキスト位置をリスト内中心に */
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          margin: 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:last-child p{
      color: #fefefe;
    }
    .menu-list:nth-last-child(2):hover{
      background-color: rgba(80, 49, 29, .8);
  }
    nav ul li a{
      color: #fefefe;
      font-size: 20px;
    }
    nav ul li img {
      width: 50px;
      padding: 0 30px;
    }
    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;
      }
      h2{
        line-height: 35px;
      }
      .ja{
        font-size: 16px;
      }
      .slider{
        display: none;
      }

      .slider_sp{
        display: block;
      }

      /* /common */
  
      header .kv_logo img{
        width: 60%;
        padding-bottom: 0;
      }
  
      #news{
        width: 100%;
      }
      #news .flex{
        display: block;
      }
      #news h2{
        text-align: center;
        line-height: 1;
        display: block;
        width: auto;
      }
      #news h2::after{
        display: none;
      }
      #news p{
        padding: 0px 30px 0px 30px;
      }
      #news .orange{
        padding: 5px 10px 5px;
      }
      #news a{
        line-height: 2;
      }
      #news .sp_text{
        display: block;
      }
      #news .banner img{
        width: 90%;
      }
  
      #about{
        width: 100%;
      }
      
      .concept{
        position: relative;
        background-image: url(images/yellow_frame_sp.png);
        background-size: contain;
        height: 500px;
      }
      
      .concept_text{
        position: absolute;
        font-size: 16px;
        line-height: 28px;
        width: 100%;
        top: -47px;
      }
      .circle .flex{
        display: block;
      }
      .circle img{
        display: block;
        margin: 0 auto;
      }
      .circle_text_wrap{
        padding-left: 0;
        padding: 30px 0 25px;
      }

      .circle_text_wrap:nth-of-type(2n+1) {
        padding-right: 0;
      }

      .circle_text_wrap h3{
        font-weight: bold;
        padding-bottom: 10px;
        line-height: 1.5;
      }
      
      .square_wrap{
        margin-top: -55px;
      }
      .square_inner{
        padding: 0 30px;
      }
      .square {
        width: 100%;
        box-sizing: border-box;
      }
      .squere_img1 img{
        width: 200px;
        top: -10px;
      }
      .squere_img1_1 img {
        left: 60%;
        top: 100%;
      }
      .squere_img2 img{
        top: 0%;
        width: 250px;
      }

      .sp_none{
        display: none;
      }

      .squere_img3 img{
        top: -5%;
        width: 200px;
      }
      .rebake_img img{
        display: none;
      }
      .rebake_img2 img{
        display: none;
      }
      .rebake_img3{
        display: none;
      }
      .frame3{
        padding-bottom: 30px;
      }
      .sp_rebake_img3{
        display: block;
        text-align: center;
        padding-top: 30px;
      }
      .sp_rebake_img3 img{
        width: 200px;
      }

      .pickup_img_wrap{
        margin: 50px 0;
      }
  
      .pickup_img {
        margin: 40px 0;
      }
      .pickup_img ul li{
        display: none;
      }
      .pickup_img{
        display: block;
      }

      figure{
        margin-bottom: 35px;
      }
      figcaption{
        padding-top: 15px;
      }

      #pickup .button{
        margin: 0 auto;
        width: 150px;
      }
  
      #information .shop{
        padding-top: 50px;
        padding-bottom: 20px;
      }
      #information .shop img{
        width: 100%;
      }
      .information_logo {
        display: none;
      }
      #information .flex{
        display: block;
      }
      .access img{
        width: 225px;
        padding-top: 18px;
      }
      .link_tel a{
        text-decoration: none;
        color: #4d4d4d;
      }
      .map{
        margin: 0 auto;
      }
      .map img{
        width: 100%;
        padding-top: 70px;
      }
  
      #sns{
        padding: 50px 30px 50px;
        margin: 0;
      }
      .sns_title{
        padding: 10px 0 30px;
        margin-top: 10%;
      }
      .sns_title img{
        width: 100%;
      }
      #sns .flex{
        display: block;
        text-align: center;
      }
      .sns_logo{
        padding-right: 0;
      }
      /* .sns_logo img {
        padding: 5px 0;
      } */
      .sns_text{
        padding: 10px;
      }
  
      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;
      }
    }