@charset "UTF-8";


/* 800px以下 */
@media (max-width: 800px) {

  /* サイトトップ */
  .title h2 {
    font-size: 28px;
  }


  .img {
    margin-bottom: 20px;
  }

  .site-menu {
    /* width: 800px;
    max-width: 100%; */
    margin-left: 0;

  }


  .accordion_button {
    width: 200px;
    max-width: 100%;
    font-size: 26px;
    margin-left: 0;
  }

  .submenu {
    width: 300px;
    max-width: 100%;
  }

  .search-btn {
    width: 200px;
    margin-left: 10px;
  }

  .mainimg,
  .mainimg img,
  .mainimg img.active {
    width: 380px;
    height: 380px;
    margin: 0;
    padding: 0;
  }



  /* newアイテム*/
  .shop-item,
  .message {
    width: 800px;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .item,
  .ranking-item {
    width: 800px;
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
  }

  .item1 {
    width: 250px;
  }

  .item1 img {
    width: 200px;
    max-width: 100%;
    height: 200px;
    align-items: center;
  }

  .main-top {
    height: 500px;
  }

  .mainimg img {
    width: 480px;
    height: 480px;
    max-width: 90%;
    margin: 0;
  }

  /* お知らせ */
  .info1,
  .info2,
  .info3 {
    width: 250px;
    max-width: 100%;
    margin: 0;
  }

  .message h2 {
    width: 180px;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
  }


  .map-page h2 {
    margin-top: 30px;
  }



  /* ハンバーガーメニュー */
  .hamburger,
  .toggle-menu-btn {
    display: block;
    margin-right: 20px;
  }


  .toggle-menu-btn {
    width: 100px;
    max-width: 100%;
    height: 100px;
    background-image: url(../img/メニューの無料アイコン5.png);
    background-size: 95%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }


  .hamburger-text {
    position: absolute;
    top: 30%;
    left: 0;
    width: 430px;
    height: 50px;
    max-width: 100%;
    background-color: rgb(214, 206, 206);
    display: none;
    z-index: 10;
  }

  .hamburger-text ul {
    display: flex;
    text-align: center;
  }


  .hamburger-text li {
    font-size: 16px;
    margin-left: 20px;
    margin-top: 10px;
  }

  .hamburger-text.is-show {
    display: block;
  }

}


/* 430px以下 */
@media (max-width: 430px) {

  .log-img {
    width: 150px;
    height: 75px;
  }

  .title h2 {
    font-size: 25px;
    word-break: keep-all;
  }


  .toggle-menu-btn {
    width: 80px;
    height: 80px;
    margin: 0;
  }

  .accordion_button {
    width: 130px;
    max-width: 100%;
    font-size: 16px;
    margin-left: 0;
  }

  .accordion_button img {
    width: 18px;
    height: 18px;
    margin-left: 10px;
  }

  .cartin {
    width: 130px;
    max-width: 100%;
  }

  .cartin img {
    width: 50px;
    height: 50px;
    margin: 0;
  }

  .cartin-text,
  .cartin-text form {
    width: 130px;
    height: 80px;
  }

  .cartin-text input {
    width: 80px;
  }


  /* 検索 */

  .submenu {
    width: 420px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .search-img {
    width: 420px;
    max-width: 100%;
    margin-left: 20px;
  }

  .search-img input {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .search-btn {
    width: 300px;
    margin: 0;
  }


  .list {
    display: none;
  }

  .main-top {
    display: block;
    height: auto;
  }

  .search-img {
    margin: 0;
  }

  /* top画像 */

  .mainimg {
    width: 420px;
    max-width: 90%;
    height: 300px;
    margin: 0 10px 20px 30px;
  }

  .mainimg img,
  .active2 {
    width: 400px;
    height: 300px;
  }

  .list h2,
  .list li {
    font-size: 18px;
  }

  /* new以降 */
  .item,
  .ranking-item {
    display: block;
    margin: 0;
  }

  .item img,
  .ranking-item img,
  .item1 img {
    margin: 0;
    padding: 10px;
    background-color: cadetblue;
  }

  .item p,
  .ranking-item p {
    margin-bottom: 20px;
  }

  .item1 {
    margin-left: auto;
    margin-right: auto;
  }

  .item1 img {
    width: 300px;
    height: 300px;

  }

  .btn-area {
    margin-left: 0;
  }

  .item,
  .ranking-item {
    width: 420px;
    max-width: 95%;
  }


  /* お知らせ部分*/
  .info1,
  .info2,
  .info3,
  #info1btn-text p,
  #info2btn-text p,
  #info3btn-text p,
  #info1btn-text,
  #info2btn-text,
  #info3btn-text {
    width: 120px;
  }

  .info1 h2,
  .info2 h2,
  .info3 h2 {
    width: 120px;
    font-size: 12px;
    word-break: keep-all;
  }

  .info1 img,
  .info2 img,
  .info3 img {
    margin: 0;
  }

  .shop-item p {
    word-break: keep-all;
  }

  .message {
    width: 400px;
    max-width: 100%;
    margin-left: 10px;
    margin-right: 10px;
  }

  .message h2 {
    font-size: 14px;
    margin: 0;
  }

  .fotnav ul {
    font-size: 12px;
  }



}