/* ドロワーメニュー:リセット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;
    }
      
    section{
      padding: 0 30px;
    }

    .news_kv{
      display: none;
    }
    .news_kv_sp{
      display: block;
    }
    .news_kv_sp img{
      width: 100%;
    }
    /* /common */

    section .flex{
      display: block;
      text-align: center;
    }
    section .flex img{
      display: block;
      margin: 0 auto;
      width: 100%;
    }

    #news{
      padding-top: 50px;
    }

    h2{
      margin-top: 85px;
    }

    .date{
      margin-left: 0;
      text-align: start;
      /* font-size: inherit; */
      line-height: 2;
    }

    .news_text_wrap{
      display: inline-block;
      padding: 0;
      margin: 30px 0 0;
    }
    /* .news_text,.season_bread_img{
      margin: 0;
    } */

    .news_text,.season_bread_text{
      text-align: left;
	    display: inline-block;
      padding-top: 20px;
      margin: 0;
    }
    .news_text{
      padding-top: 0;
    }

    .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;
    }
  }