@charset "UTF-8";

/* CSS Document */

@media only screen and (max-width : 768px) {

  /*-------------------------------------
スマホ用レイアウト(768px以下スクリーン)
-------------------------------------*/
  /* body全体の初期スタイル調整 */
  body {
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /*-----------------------------------
見出しタグ設定(スマホ)
-------------------------------------*/
  h2 {
    font-size: 1.6em;
  }

  h3 {
    font-size: 1.4em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1em;
  }

  /*-------------------------------------
全体レイアウト/背景設定(スマホ)
-------------------------------------*/
  /* 記事(ボディ)エリア */
  .article {
    border-left: none;
    border-right: none;
    width: 100%;
  }

  /* カラム全体の幅を変更する */
  .top_image_in,
  .section_inr {
    width: 100%;
  }

  .content_layout {
    flex-direction: column;
  }

  .content_layout.column_reverse {
    flex-direction: column-reverse;
  }

  /*-------------------------------------
ハンバーガーメニュー
-------------------------------------*/
  .btn-gNav {
    display: flex;
    float: right;
  }

  .gNav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(98, 96, 99, 0.9);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 1;
    padding-top: 50px;
    transition: .3s;
  }

  .gNav.open {
    right: 0;
  }

  .gNav .gNav-menu {
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
    flex-direction: column;
    text-align: center;
    /*justify-content: center;*/
  }

  .gNav .gNav-menu li {
    width: 85%;
    padding: 20px;
    border-bottom: #fff 1px solid;
  }

  .gNav .gNav-menu a {
    color: #fff;
  }

  /* Common Css must add */
  svg {
    height: 100%;
    position: absolute;
    width: 40px;
    cursor: pointer;
    /*   border: 1px solid black; */
    background-color: #fff;
  }

  .plate {
    height: 41px;
    width: 41px;
  }

  .burger {
    filter: url(#gooeyness);
  }

  .x {
    transform: scale(0);
    transition: transform 400ms;
  }

  .line {
    fill: none;
    stroke: #42362c;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: 50%;
    transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms,
      transform 500ms 200ms;
  }

  .x .line {
    stroke-width: 5.5px;
  }

  /* Common Css must add end */


  /* Forth Menu Css */
  .plate4 .x {
    transition: transform 400ms;
  }

  .plate4 .line {
    transform-origin: 50%;
    transition: transform 400ms 100ms;
  }

  .active.plate4 .line {
    transition: transform 400ms;
  }

  .active.plate4 .line1 {
    transform: translateX(18px) translateY(-3px) rotate(-45deg) scale(0.7);
  }

  .active.plate4 .line2 {
    transform: translateX(-18px) translateY(-3px) rotate(45deg) scale(0.7);
  }

  .active.plate4 .line3 {
    transform: translateY(0px) rotate(45deg) scale(0.7);
  }

  .active.plate4 .line4 {
    transform: translateY(0px) rotate(-45deg) scale(0.7);
  }

  .active.plate4 .line5 {
    transform: translateX(18px) translateY(3px) rotate(45deg) scale(0.7);
  }

  .active.plate4 .line6 {
    transform: translateX(-18px) translateY(3px) rotate(-45deg) scale(0.7);
  }

  .active.plate4 .x {
    transition: transform 400ms 100ms;
    transform: scale(1);
  }

  .active svg {
    background-color: #fff;
  }

  /* Fourth Menu Css end */
  /*-------------------------------------
上部固定ヘッダー設定
-------------------------------------*/
  /* ヘッダー部分をカラム幅にする */
  .header_inr {
    max-width: 100%;
  }

  /* ヘッダーのロゴ */
  .header_logo {
    width: 80%;
  }

  /* ヘッダーの電話ボタン */
  .header_tel {
    display: none;
  }

  .fixed_phone {
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-color: #e1dba8;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin: 0 auto;
    overflow: hidden;
    max-height: 60px;
  }

  .fix_tel {
    width: 80%;
  }

  .fix_insta {
    width: 20%;
  }

  .fix_insta img,
  .fix_tel img {
    width: 100%;
    object-fit: contain;
    height: 100%;
  }

  /*-------------------------------------
ファーストビュー設定
-------------------------------------*/
  .top_image {
    background-image: none;
  }

  .slider {
    width: 100vw;
    height: calc(100vw * 1.38);
  }

  .slider div:first-of-type {
    background-image: url(../images/top_image_front_sp.jpg);
  }

  .slider div:nth-of-type(2) {
    background-image: url(../images/top_image_sweet_sp.jpg);
  }

  .slider div:last-of-type {
    background-image: url(../images/top_image_store_sp.jpg);
  }


  /*-------------------------------------
メニューエリア設定
-------------------------------------*/

  .menu_list,
  .pizza_menu_list {
    padding: 2rem 1rem;
    max-width: 90%;
  }

  /*-------------------------------------
店舗情報エリア設定
-------------------------------------*/
  .store_area {
    width: 100%;
    margin-bottom: 2rem;
  }

  .store_area .row:nth-child(1) {
    flex-direction: column;
    align-items: center;
  }

  .store_area img {
    object-fit: contain;
    width: 100%;
  }

  .store_area .store_detail {
    padding: 0 1em;
  }

  .store_area .store_detail img {
    width: 80%;
  }

  .store_area .store_info_txt {
    width: 70%;
  }

  .info_content {
    padding: 0 1rem;
  }

  /*-------------------------------------
フッター設定
-------------------------------------*/
  .footer {
    font-size: 1.2em;
  }
}