/* 丸五市場 お店紹介（一覧 /shop と個店ページ）用のスタイル
   site.css の後に読み込む。PC は旧 Wix サイトの座標（幅 980px の白い箱）に合わせ、
   スマホ（〜767px）は site.css と同じ --u（= 100vw / 320）を単位にして旧サイトの 320px 組みを拡大する。 */

/* ---------- 白い箱（ヘッダーとフッターの間） ---------- */
.shp-main {
  width: 980px;
  margin: 0 auto;
  background: #fff;
  padding: 9px 0 0;
}
.shp-title {
  margin-left: 20px;
  font-family: var(--gothic);
  font-size: 40px;
  line-height: 60px;
  color: var(--ink);
  white-space: nowrap;
}
.shp-title .meiryo { font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif; position: relative; top: 5px; }
.shp-rule { height: 0; border-top: 1px solid var(--ink); }
.shp-main > .shp-rule { width: 950px; margin: 0 0 0 10px; }

/* ---------- 一覧 ---------- */
.shp-list .shp-rule { margin-top: 8px; }
.shp-lead {
  margin: 26px 0 0 20px;
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  font-size: 24px;
  line-height: 30px;
}
.shp-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 306px);
  gap: 13px;
  align-items: start;
  margin: 28px 0 0 13px;
  padding: 0 0 10px;
}
.shp-card a {
  display: block;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .33);
  color: #000;
  text-decoration: none;
  text-align: center;
  font-family: Arial, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.shp-card img { width: 306px; height: 204px; object-fit: cover; transition: opacity .2s; }
.shp-card a:hover img { opacity: .85; }
.shp-card h2 { padding: 20px 20px 0; font-size: 18px; line-height: 27px; font-weight: 400; }
.shp-card p { padding: 10px 20px 20px; font-size: 12px; line-height: 17px; }

/* ---------- 個店ページ ---------- */
.shp-store { padding-bottom: 91px; }
.shp-store .shp-rule { margin-top: 0; }
.shp-info {
  margin: 39px 0 0 20px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 24px;
}
.shp-info a { color: inherit; text-decoration: none; }
.shp-main > .shp-endrule { width: 936px; margin: 30px 0 0 20px; }

/* スライドショー */
.shp-slides {
  position: relative;
  width: 980px;
  height: 559px;
  margin-top: 18px;
  overflow: hidden;
  background: #000;
}
.shp-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.shp-slide.is-active { visibility: visible; }
.shp-slide.is-moving { visibility: visible; transition: transform .6s ease; }
.shp-slide > img { width: 100%; height: 100%; object-fit: cover; }
.shp-slide .al-l { object-position: 0% 50%; }
.shp-slide .al-r { object-position: 100% 50%; }

/* 写真に乗った英字ロゴ */
.shp-logo-a,
.shp-logo-b {
  position: absolute;
  margin: 0;
  color: #fff;
  text-align: center;
  font-weight: 400;
}
.shp-logo-a { font-family: var(--script); font-size: 46px; line-height: 74px; }
.shp-logo-b { font-family: var(--cond); font-size: 80px; line-height: 95px; padding-top: 19px; }

.shp-arrow {
  position: absolute;
  top: 260px;
  width: 18px;
  height: 35px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  fill: #fff;
}
.shp-arrow svg { width: 18px; height: 35px; display: block; }
.shp-prev { left: 19px; }
.shp-next { right: 19px; }
.shp-next svg { transform: scaleX(-1); }
.shp-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.shp-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.shp-dots button[aria-current="true"] { width: 11px; height: 11px; background: none; border: 2px solid #fff; }

/* 写真を並べたページ（ここキムチ・いりちゃん）。写真の位置は旧サイトの座標どおり */
.shp-collage { position: relative; margin-left: 10px; }
.shp-collage img {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  object-fit: cover;
}
.shp-name-a, .shp-name-b { margin: 0; font-weight: 400; color: #000; white-space: nowrap; }
.shp-name-a { font-family: var(--script); font-size: 46px; line-height: 74px; }
.shp-name-b { font-family: var(--cond); font-size: 80px; line-height: 95px; }

/* ここキムチ */
.p-kokokimuchi .shp-collage { height: 461px; margin-top: 36px; }
.p-kokokimuchi .shp-name-b { margin: 51px 0 0 10px; }
.p-kokokimuchi .shp-info { margin-top: 16px; }
.p-kokokimuchi .shp-endrule { margin-top: 12px; }
.p-kokokimuchi.shp-store { padding-bottom: 53px; }

/* いりちゃん */
.p-irichan .shp-collage { height: 897px; margin-top: 4px; }
.p-irichan .shp-name-a { position: relative; margin: -44px 0 0 30px; }
.p-irichan .shp-name-b { margin: 15px 0 0 29px; }
.p-irichan .shp-info { margin-top: 33px; }
.p-irichan.shp-store { padding-bottom: 63px; }

/* カフェ WiLL（見出しの「WiLL」だけメイリオで、下が3px低い） */
.p-cafe-will .shp-title { padding-bottom: 3px; }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  .shp-main { width: calc(300 * var(--u)); padding-top: calc(10 * var(--u)); }
  .shp-title { margin-left: calc(10 * var(--u)); font-size: calc(29 * var(--u)); line-height: calc(43 * var(--u)); white-space: normal; }
  .shp-title .meiryo { top: calc(3 * var(--u)); }
  .shp-main > .shp-rule { width: calc(280 * var(--u)); margin: calc(22 * var(--u)) 0 0 calc(10 * var(--u)); }

  .shp-lead { margin: calc(14 * var(--u)) 0 0 calc(10 * var(--u)); width: calc(280 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(22.4 * var(--u)); }
  .shp-lead br { display: none; }
  .shp-lead span { display: block; }
  .shp-lead span + span { margin-top: calc(5 * var(--u)); }
  .shp-cards { grid-template-columns: calc(274 * var(--u)); gap: calc(15 * var(--u)); margin: calc(17 * var(--u)) 0 0 calc(13 * var(--u)); padding-bottom: calc(15 * var(--u)); }
  .shp-card img { width: 100%; height: calc(183 * var(--u)); }
  .shp-card h2 { padding: calc(20 * var(--u)) calc(15 * var(--u)) 0; font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); }
  .shp-card p { padding: calc(10 * var(--u)) calc(15 * var(--u)) calc(20 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); }

  .shp-slides { width: calc(280 * var(--u)); height: calc(377 * var(--u)); margin: calc(14 * var(--u)) 0 0 calc(10 * var(--u)); }
  .shp-logo-a { font-size: calc(47 * var(--u)); line-height: calc(76 * var(--u)); }
  .shp-logo-b { font-size: calc(65 * var(--u)); line-height: calc(77 * var(--u)); padding-top: calc(15 * var(--u)); }
  .shp-arrow { top: calc(172 * var(--u)); width: calc(15 * var(--u)); height: calc(29 * var(--u)); }
  .shp-arrow svg { width: calc(15 * var(--u)); height: calc(29 * var(--u)); }
  .shp-prev { left: calc(15 * var(--u)); }
  .shp-next { right: calc(14 * var(--u)); }
  .shp-dots { bottom: calc(20 * var(--u)); gap: calc(15 * var(--u)); }
  .shp-dots button { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
  .shp-dots button[aria-current="true"] { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }

  .shp-info { width: calc(280 * var(--u)); margin: calc(10 * var(--u)) 0 0 calc(10 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
  .shp-main > .shp-endrule { width: calc(280 * var(--u)); margin: calc(44 * var(--u)) 0 0 calc(10 * var(--u)); }
  .shp-store { padding-bottom: calc(4 * var(--u)); }

  /* 写真を並べたページは、スマホでは写真を1列に積む */
  .p-kokokimuchi, .p-irichan { padding-top: calc(20 * var(--u)); }
  .p-kokokimuchi .shp-collage,
  .p-irichan .shp-collage { height: auto; margin: calc(14 * var(--u)) 0 0 calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
  .shp-collage img { position: static; flex: none; width: calc(281 * var(--u)); height: calc(211 * var(--u)); }
  .shp-collage img.tall { height: calc(375 * var(--u)); }
  .p-kokokimuchi .shp-name-b, .p-irichan .shp-name-a { display: none; }
  .p-irichan .shp-name-b { margin: calc(17 * var(--u)) 0 0 calc(10 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(38 * var(--u)); }
  .p-kokokimuchi .shp-info { margin-top: calc(10 * var(--u)); }
  .p-irichan .shp-info { margin-top: calc(12 * var(--u)); }
  .p-kokokimuchi .shp-endrule { margin-top: calc(20 * var(--u)); }
  .p-kokokimuchi.shp-store { padding-bottom: calc(24 * var(--u)); }
  .p-irichan.shp-store { padding-bottom: calc(15 * var(--u)); }
  .p-cafe-will .shp-title { padding-bottom: calc(2 * var(--u)); }
}

/* スマホの読みやすさ（2026-11-05 追加）: 読ませる文字を標準的な大きさと行間に固定する（site.css の同名の節と対） */
@media (max-width: 767px) {
  .shp-lead { font-size: 18px; line-height: 1.7; }
  .shp-card h2 { font-size: 19px; line-height: 1.5; }
  .shp-card p { font-size: 16px; line-height: 1.6; }
  .shp-info { font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; font-size: 17px; line-height: 1.75; }
}