/* 電話番号・営業時間等の下からの位置
/* (これをここに書いているのはPC版だけに必要だから）
-----------------------------------------------------------------*/
.home-yoyaku-position{
  position:absolute;
  bottom:5vh;
}

/* 1100より小さい時
-----------------------------------------------------------------*/
@media(max-width:1100px){
  #home{
    background-image: url(../images/home-top-pc2.jpg);
  }
  #menu{
    background-image: url(../images/menu-top-tablet.jpg);
  }
}

/* 950より小さい時
/*（950以下になった時から、メニューバーのnaviの文字が段落落ちしてしまう。）
-----------------------------------------------------------------*/
@media(max-width:950px){
    /* ロゴのサイズ */
    .logo{
      margin-top:35px;
      max-width:300px;
      min-width:300px;
    }
    /* ナビの位置  */
    .main-nav {
      font-size:1rem;
      margin-top:60px;
    }
    /*ナビの余白 */
    .main-nav li{
      margin:0px 10px;
      margin-left: 15px;
      margin-right:10px;
    }

    /* 202103-add ↓ */
    /* カレンダーと予約についてを縦並びに */
    #calender-info{
      flex-direction:column;
    }

   #calender-info .contact-left,
   #calender-info .contact-right{
     width: 100%;
   }
   .calender-coment{
      padding-top:20px;
      padding-bottom:30px;
      line-height: 1.35;
   }
    /* 202103-add ↑ */
}

/* 780より小さい時 （横並びを立て並びに）
/*-----------------------------------------------------------------*/
@media(max-width:780px){
    /* TOP画像(header部）の高さ変更 */
    #menu,
    #oil,
    #contact-top{
      height:250px;
    }
    .page-title{
      display:none;
    }

    /* #menu#
    /*-----------------------------------*/
    /* ヘッダー情報 2段に */
    .page-header{
      flex-direction: column;
      align-items:center;
    }
    .main-nav {
      margin-top:10px;
    }
    /*ナビの余白 */
    .main-nav li{
      margin-left: 45px;
      margin-right:15px;
    }

    /* menu画像と値段表を縦並びに */
    .menu-type{
      flex-direction: column;
      align-items:center;
      width:100%;
      margin-top:10px;
    }
    /* 横並び時に上で指定していた%解除 */
    .menu-type p,
    .menu-type table{
      width:100%;
    }
    /*画像周りの余白微調整*/
    .menu-type img{
      margin-top: -30px;
      margin-bottom:40px;
    }

    /* #oil#
    /*-----------------------------------*/
    .oil-type{
      flex-direction:column;   /* oil画像・説明を一列に */
    }
    /* オイル画像 */
    .oil-type img{
      width:100%;
      margin:0 auto;/* 中央に配置する指定 */
    }
    /* オイルの説明 */
    .oil-type p{
      width:100%;
    }

    /* #contact#
    /*-----------------------------------*/
    /* 住所とラインの情報を縦並びに*/
    .contact-info{
      flex-direction:column;
    }
    /* facebookと「当店について」縦並びに*/
    .aside-contact{
      flex-direction:column;
    }

    /* 住所情報サイズ */
    .contact-left{
      width: 100%;
    }
    /* ライン情報サイズ */
    .contact-right{
      width: 100%;
      padding-top:15px;
    }
}

/* 600より小さい時
/*-----------------------------------------------------------------*/
@media(max-width: 600px){
  .main-nav li{
    margin-left: 25px;
  }
}

/* 500より小さい時
/*-----------------------------------------------------------------*/
@media(max-width:500px){
    /*ナビの余白 */
    .main-nav li{
      margin-left: 10px;
      margin-right:10px;
    }
    .post-title{
      font-size:1.4rem;
    }
    /* 表題、カテゴリー名の左余白 */
    .post-cat2{
      margin-top:20px;
      margin-left:30px;
    }
    /* -ラインボタン右からの位置調整---*/
    .line-button img{
      right: 5vh;
    }
    /* 202103-add ↓ */
    .calender{
       width:380px;
   }
   /* 202103-add ↑ */
    /* 店舗情報・地図  */
    #contact,#sns{
      padding:2% 3% 2% 5%;   /* 左右の余白  上下の余白(これ抜かすと背景が一部白に）*/
    }
  }