@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;600;700;900&display=swap);
/* Rules */
body {
  margin: 0;
  padding: 0;
}

#suitist *, #suitists *::before, #suitist *::after {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* Base CSS */
#suitist {
  width: 100%;
  margin: 0 auto 30px;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  font-size: 12px;
  color: #000;
  letter-spacing: 0.075rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#suitist img:hover {
  opacity: 1;
}
#suitist img {
  width: 100%;
  border: none;
  vertical-align: bottom;
}
#suitist ul, #suitist li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#suitist .outerwrap {
  width: 94%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
#suitist .pc {
  display: block;
}
#suitist .sp {
  display: none;
}
#suitist p {
  margin: 0;
}
#suitist h3 {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 2.25rem;
  font-weight: 400;
  padding-left: 1.275rem;
  padding: 0;
  margin: 40px auto 50px;
}

@media screen and (max-width: 768px) {
  #suitist {
    font-size: 2.9vw;
    margin: 0 auto 4%;
  }
  #suitist .pc {
    display: none;
  }
  #suitist .sp {
    display: block;
  }
  #suitist h3 {
    font-size: 2rem;
    margin: 8% auto 10%;
  }
}
#suitist h4.head {
  background: #f3f4f6;
  padding: 12px 3%;
  font-size: 1.35rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  #suitist h4.head {
    padding: 10px 5%;
  }
}
#suitist ul.shop {
  margin: 0 0 40px;
  padding: 0;
  width: 100%;
}
#suitist ul.shop li {
  display: flex;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: flex-start;
  align-content: stretch;
  padding: 15px 3%;
  margin: 0;
  border-bottom: 1px solid #eee;
}
#suitist ul.shop li h5 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 1.25rem;
  width: 37%;
  line-height: 190%;
}
#suitist ul.shop li .info {
  margin: 0;
  padding: 0;
  width: 63%;
  text-align: left;
}
#suitist ul.shop li .info p {
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  line-height: 190%;
}

@media screen and (max-width: 768px) {
  #suitist ul.shop {
    margin: 0 0 8%;
  }
  #suitist ul.shop li {
    flex-wrap: wrap;
    padding: 4.5% 5%;
    margin: 0;
    border-bottom: 1px solid #eee;
  }
  #suitist ul.shop li h5 {
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 1.2rem;
    width: 100%;
    line-height: 190%;
  }
  #suitist ul.shop li .info {
    width: 100%;
  }
  #suitist ul.shop li .info p {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    line-height: 190%;
  }
}/*# sourceMappingURL=shoplist.css.map */

/* 地域ナビ：PC→4列×2行 中央寄せ、SP→横スクロール式 */
#suitist .pref-nav {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 20px 24px;
  margin: 30px auto;
  padding: 20px 5%;
  max-width: 880px;
  background: #f3f4f6;
}

#suitist .pref-nav a {
  display: inline-block;
  padding: 16px 28px;
  background: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  transition: background 0.2s ease;
}

#suitist .pref-nav a:hover {
  background: #e0e0e0;
}

/* スマホ表示：横スクロール／1行のみ */
@media screen and (max-width: 768px) {
  #suitist .pref-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding: 16px 4%;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
  }

  #suitist .pref-nav a {
    font-size: 1.2rem;
    padding: 16px 24px;
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}


/* スクロール領域を囲うラッパー */
#suitist .scroll-wrap {
  position: relative;
  overflow: hidden;
}

/* フェード（左右） */
#suitist .scroll-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 1;
}

#suitist .scroll-fade.left {
  left: 0;
  background: linear-gradient(to right, #f3f4f6, rgba(243, 244, 246, 0));
}

#suitist .scroll-fade.right {
  right: 0;
  background: linear-gradient(to left, #f3f4f6, rgba(243, 244, 246, 0));
}

/* ナビ本体（スマホ用 横スクロール） */
@media screen and (max-width: 768px) {
  #suitist .pref-nav {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    padding: 16px 4%;
    gap: 12px;
    position: relative;
    z-index: 2;
  }

  #suitist .pref-nav a {
    font-size: 1.2rem;
    padding: 16px 24px;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* PC時はそのまま */
@media screen and (min-width: 769px) {
  #suitist .scroll-fade {
    display: none;
  }
}