/* 丸五市場 公式サイト 共通スタイル
   旧 Wix サイト（2026-10 時点）の見た目を、素の HTML/CSS で再現したもの。
   PC は幅 980px の中央寄せ、スマホ（〜767px）は1列に組み替える。 */

:root {
  --ink: #363636;
  --gold: #ebba4d;
  --red: #e20d0d;
  --line: #c4c4c4;
  --pale: #fafafa;
  --footer: #363636;
  --w: 980px;
  --serif: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  --round: "Varela Round", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --hand: "Yusei Magic", "Hiragino Maru Gothic ProN", sans-serif;
  --wide: "Syncopate", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "MS PGothic", sans-serif;
  --pmincho: "MS PMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --cond: "Oswald", "Arial Narrow", sans-serif;
  --script: "Yellowtail", cursive;
  --baskerville: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.4;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

/* 背景の金と赤の筆跡（画面に固定） */
.bg-brush {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #fff url(../images/845cd7_ead1a4b3c6e045dd82cacd8d6248068e.jpg) center / cover no-repeat;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }

.wrap { width: var(--w); margin: 0 auto; position: relative; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  background: #fff;
}
.gnav {
  width: 925px;
  margin: 0 auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.gnav a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.gnav a[aria-current="page"],
.gnav a:hover { color: var(--gold); }
.nav-toggle { display: none; }

/* ---------- フッター ---------- */
.site-footer {
  background: var(--footer);
  height: 219px;
  text-align: center;
  color: #fff;
}
.to-top {
  display: inline-block;
  margin-top: 34px;
  width: 33px;
  height: 33px;
  padding-top: 8px;
}
.to-top img { width: 33px; height: 17px; margin: 0 auto; }
.copyright {
  margin-top: 26px;
  font-size: 13px;
  font-style: italic;
}

/* ---------- 共通の部品 ---------- */
.rule-dark { width: 800px; height: 0; margin: 0 auto; border-top: 1px solid var(--ink); }
.pale { background: var(--pale); }
.white { background: #fff; }

/* ---------- トップ: ロゴと TOPICS ---------- */
.hero { height: 1132px; position: relative; }
.hero-logo { width: 441px; height: 441px; margin: 0 auto; padding-top: 104px; box-sizing: content-box; }
.hero-catch {
  margin-top: 6px;
  text-align: center;
  font-family: var(--baskerville);
  font-size: 35px;
  letter-spacing: 3.5px;
  color: var(--red);
}
.topics { width: 627px; margin: 66px 0 0 214px; position: relative; }
.topics h2 {
  font-family: var(--wide);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 33px;
}
.topics h2::after {
  content: "";
  position: absolute;
  left: 124px;
  top: 16px;
  width: 503px;
  border-top: 1px solid var(--line);
}
.topics ul { list-style: none; margin: 46px 0 0 2px; padding: 0; }
.topics li { margin: 0; }
.topics li a {
  display: inline-block;
  vertical-align: top;
  font-family: var(--round);
  font-size: 18px;
  line-height: 36px;
  color: #000;
}

/* ---------- トップ: イベント告知 ---------- */
.event { padding: 72px 0 34px; }
.event .rule-dark { margin-top: 46px; }
.event .rule-after-photos { margin-top: 72px; }
.event h2 {
  font-family: var(--hand);
  font-size: 60px;
  line-height: 56px;
  letter-spacing: 27px;
  text-align: center;
  margin-right: -27px;
  color: var(--ink);
}
.event-poster { width: 601px; height: auto; margin: 51px auto 0; }
.event-body { width: 645px; margin: 52px 0 0 166px; }
.event-lead { font-size: 15px; line-height: 21px; }
.event-info {
  margin-top: 65px;
  font-family: var(--round);
  font-size: 18px;
  line-height: 25.2px;
}
.event-info p { white-space: pre-line; }
.event-info p + p { margin-top: 3px; }
.event-photos {
  display: grid;
  grid-template-columns: repeat(3, 190px);
  column-gap: 15px;
  row-gap: 15px;
  width: 600px;
  margin: 47px 0 0 188px;
}
.event-photos figure { margin: 0; position: relative; width: 190px; height: 110px; background: var(--ink); overflow: hidden; }
.event-photos img { width: 100%; height: 100%; object-fit: cover; }
.event-photos figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  font-size: 16px;
  line-height: 20.8px;
  text-align: center;
  color: var(--gold);
  background: rgba(54, 54, 54, .85);
  opacity: 0;
  transition: opacity .2s;
}
.event-photos figure:hover figcaption { opacity: 1; }
.event-end { padding-bottom: 34px; }

/* ---------- トップ: 写真の帯とギャラリー ---------- */
.photo-band {
  height: 1118px;
  background: var(--pale) url(../images/a86d5d_a8a43c720196480ba1df619848a50c3a.jpg) center / cover no-repeat fixed;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #fff;
}
.gallery a { display: block; aspect-ratio: 426 / 318; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery a:hover img { transform: scale(1.04); }

/* ---------- トップ: 丸五市場について ---------- */
.about { background: #fff; padding: 156px 0 0; }
.about h2 {
  text-align: center;
  font-family: var(--wide);
  font-size: 50px;
  font-weight: 700;
  line-height: 75px;
}
.about-cols { display: flex; justify-content: space-between; width: 945px; margin: 71px 0 0 36px; }
.about-text { width: 480px; font-size: 16px; line-height: 22.4px; white-space: pre-line; }
.about-text + p { margin-top: 2px; }
.about-photo { width: 441px; height: 582px; object-fit: cover; }
.about-org { margin: 43px 0 0 51px; padding-top: 26px; width: 435px; border-top: 1px solid var(--gold); }
.about-org h3 { font-size: 20px; font-weight: 700; line-height: 25px; }
.about-org p { font-size: 15px; line-height: 23px; }
.map { width: 883px; height: 534px; margin: 15px 0 0 51px; border: 0; display: block; }
.access { margin: 15px 0 0 51px; font-size: 15px; line-height: 23px; padding-bottom: 30px; }
.access p + p { margin-top: 23px; }

/* ---------- お店紹介（一覧） ---------- */
.page-box { background: #fff; }
.page-title {
  font-family: var(--gothic);
  font-size: 34px;
  line-height: 1.3;
  padding: 0 0 6px 10px;
  border-bottom: 1px solid #888;
  margin: 0 0 0 0;
}

/* ---------- スマホ（〜767px） ----------
   旧サイトのスマホ表示は幅320pxで組んだ画面を端末幅に拡大する作りだったので、
   --u（＝画面幅の 1/320）を単位にして同じ比率で並べる。 */
.quickbar { display: none; }

@media (max-width: 767px) {
  :root { --w: 100%; --u: calc(100vw / 320); }
  body { position: relative; font-size: calc(14 * var(--u)); }
  /* 旧サイトのスマホ表示では、筆跡の画像が縦に引き伸ばされてページ全体に縦に繰り返されていた */
  .bg-brush {
    position: absolute;
    inset: 0;
    background-size: calc(687 * var(--u)) calc(485 * var(--u));
    background-position: calc(-231 * var(--u)) calc(99 * var(--u));
    background-repeat: repeat-y;
  }
  .wrap { width: 100%; }

  .site-header { height: calc(74 * var(--u)); background: #fff; }
  .nav-toggle {
    display: block;
    position: absolute;
    right: calc(19 * var(--u));
    top: calc(9 * var(--u));
    width: calc(50 * var(--u));
    height: calc(56 * var(--u));
    padding: 0;
    border: 0;
    background: #fff;
    cursor: pointer;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: calc(22 * var(--u));
    height: 2px;
    margin: 0 auto;
    background: var(--gold);
    position: relative;
    content: "";
  }
  .nav-toggle span::before { position: absolute; top: calc(-8 * var(--u)); }
  .nav-toggle span::after { position: absolute; top: calc(8 * var(--u)); }
  .gnav {
    display: none;
    position: fixed;
    top: calc(74 * var(--u));
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: calc(16 * var(--u)) 0;
    flex-direction: column;
    justify-content: flex-start;
    background: rgba(255, 255, 255, .97);
    overflow-y: auto;
  }
  .nav-open .gnav { display: flex; }
  .gnav a {
    height: calc(52 * var(--u));
    line-height: calc(52 * var(--u));
    text-align: center;
    font-size: calc(16 * var(--u));
  }

  /* 画面下に固定のボタン帯（メニュー・電話・地図） */
  .quickbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: calc(45 * var(--u));
    background: linear-gradient(#fff 35%, #d7d7d7 80%);
  }
  .quickbar > * {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid #d9d9d9;
    background: none;
    color: #555;
    padding: 0;
    cursor: pointer;
  }
  .quickbar > :first-child { border-left: 0; }
  .quickbar svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }

  .hero { height: auto; padding-bottom: calc(38 * var(--u)); }
  .hero-logo { width: calc(282 * var(--u)); height: calc(279 * var(--u)); padding-top: calc(10 * var(--u)); }
  .hero-catch {
    margin-top: calc(11 * var(--u));
    padding-left: calc(14 * var(--u));
    text-align: left;
    font-size: calc(18 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
  }
  .topics { width: auto; margin: calc(20 * var(--u)) 0 0 calc(20 * var(--u)); }
  .topics h2 { font-size: calc(19 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: calc(1.5 * var(--u)); }
  .topics h2::after {
    position: static;
    display: block;
    margin-top: calc(20 * var(--u));
    width: calc(281 * var(--u));
  }
  .topics ul { margin: calc(39 * var(--u)) 0 0 calc(3 * var(--u)); }
  .topics li a { font-size: calc(12 * var(--u)); line-height: calc(24 * var(--u)); }

  .event { padding: calc(52 * var(--u)) 0 calc(22 * var(--u)); }
  .event h2 {
    font-size: calc(16 * var(--u));
    font-weight: 700;
    line-height: calc(18.2 * var(--u));
    letter-spacing: calc(7.2 * var(--u));
    margin-right: calc(-7.2 * var(--u));
  }
  .event-poster { width: calc(280 * var(--u)); margin: calc(21 * var(--u)) auto 0; }
  .event-body { width: auto; margin: calc(10 * var(--u)) calc(12 * var(--u)) 0 calc(13 * var(--u)); }
  .event-lead { font-size: calc(16 * var(--u)); line-height: calc(22.4 * var(--u)); }
  .event-info { margin-top: calc(13 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22.4 * var(--u)); }
  .event-info p + p { margin-top: calc(3 * var(--u)); }
  .event-photos {
    width: auto;
    margin: calc(21 * var(--u)) 0 0 calc(20 * var(--u));
    grid-template-columns: repeat(3, calc(83 * var(--u)));
    column-gap: calc(15 * var(--u));
    row-gap: calc(15 * var(--u));
  }
  .event-photos figure { width: auto; height: calc(110 * var(--u)); }
  .event-photos figcaption { display: none; }
  .rule-dark { width: calc(280 * var(--u)); margin-left: calc(20 * var(--u)); }
  .event .rule-dark { margin-top: calc(22 * var(--u)); }
  .event .rule-after-photos { margin-top: calc(45 * var(--u)); }

  .photo-band { height: calc(253 * var(--u)); margin-top: calc(4 * var(--u)); background-attachment: scroll; }
  .gallery {
    display: flex;
    gap: 0;
    margin-top: calc(10 * var(--u));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery a { flex: 0 0 100%; height: calc(316 * var(--u)); aspect-ratio: auto; scroll-snap-align: start; }

  /* 旧サイトのスマホ表示と同じ並び: 組合 → 地図 → 交通 → 見出し → 写真 → 本文 */
  .about { padding: calc(35 * var(--u)) 0 calc(173 * var(--u)); }
  .about .wrap { display: flex; flex-direction: column; }
  .about-org { order: 1; width: auto; margin: 0 0 0 calc(22 * var(--u)); padding-top: 0; border-top: 0; }
  .about-org h3 { font-size: calc(19 * var(--u)); line-height: calc(24 * var(--u)); }
  .about-org p { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); }
  .map { order: 2; width: calc(280 * var(--u)); height: calc(240 * var(--u)); margin: calc(41 * var(--u)) 0 0 calc(31 * var(--u)); }
  .access { order: 3; margin: calc(12 * var(--u)) 0 0 calc(31 * var(--u)); padding-bottom: 0; font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u)); }
  .access p + p { margin-top: calc(20 * var(--u)); }
  .about h2 { order: 4; margin-top: calc(30 * var(--u)); font-size: calc(29 * var(--u)); line-height: calc(43 * var(--u)); }
  .about-cols { order: 5; display: flex; flex-direction: column; width: auto; margin: calc(12 * var(--u)) 0 0; }
  .about-photo { order: -1; width: calc(300 * var(--u)); height: calc(401 * var(--u)); margin-left: calc(22 * var(--u)); }
  .about-text { width: calc(218 * var(--u)); margin: calc(1 * var(--u)) 0 0 calc(62 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(19.6 * var(--u)); }
  .about-note { width: calc(218 * var(--u)); margin: calc(3 * var(--u)) 0 0 calc(62 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.25; }

  .site-footer { height: calc(152 * var(--u)); }
  .to-top { margin-top: calc(25 * var(--u)); width: calc(33 * var(--u)); height: calc(33 * var(--u)); padding-top: calc(8 * var(--u)); }
  .to-top img { width: calc(33 * var(--u)); height: auto; }
  .copyright { width: calc(279 * var(--u)); margin: calc(14 * var(--u)) auto 0; font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
}

/* ---------- スマホの読みやすさ（2026-11-05 追加） ----------
   上の指定は画面幅に合わせて文字も拡大するため、大きい機種では本文が約21pxまで大きくなり、
   1行に入る字が少なくなっていた。読ませる文字だけを標準的な大きさ（本文16px）と行間に固定する。
   写真や区画の幅・見出しなどの飾り文字は、上の比率のまま。
   本文の書体 Playfair Display は斜体だけを読み込んでいて、日付・時間・電話番号の数字が細い斜体で出るため、
   スマホの本文は日本語の明朝体にそろえる（見出しなど書体を指定している所は変わらない） */
@media (max-width: 767px) {
  body { font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; font-size: 17px; }
  .gnav a { font-size: 18px; }
  .hero-catch { font-size: 19px; line-height: 1.5; letter-spacing: .08em; }
  .topics li a { font-size: 16px; }
  .event-body { margin: calc(12 * var(--u)) calc(20 * var(--u)) 0; }
  .event-lead { font-size: 17px; line-height: 1.8; line-break: strict; text-wrap: pretty; }
  .event-info { font-size: 17px; line-height: 1.7; line-break: strict; text-wrap: pretty; }
  /* 電話番号は「078-」で行が分かれないようにする */
  .nowrap, a[href^="tel:"] { white-space: nowrap; }
  .about-org p { font-size: 16px; line-height: 1.7; }
  .access { margin-right: calc(20 * var(--u)); font-size: 16px; line-height: 1.7; }
  .about-text { width: auto; margin: calc(8 * var(--u)) calc(20 * var(--u)) 0; font-size: 17px; line-height: 1.8; }
  .about-note { width: auto; margin: calc(8 * var(--u)) calc(20 * var(--u)) 0; font-size: 16px; line-height: 1.7; }
  .copyright { font-size: 14px; line-height: 1.5; }
}