@charset "UTF-8";
/* ==========================================================
   野崎参道商店街 共通スタイル
   カラー・フォントは糸藤さん支給後に差し替え(仮値)
   ========================================================== */

:root {
  /* colors (支給ロゴSVG・指示書 20260704 準拠) */
  --c-primary: #E94829;   /* オレンジ(ボタン・アクセント) */
  --c-tag:     #C3B336;   /* タグ(カテゴリ) */
  --c-dark:    #323232;   /* フッター背景 */
  --c-text:    #333333;
  --c-gray-bg: #F2F2F2;   /* カード・セクション背景 */
  --c-white:   #FFFFFF;

  /* typography(指示書 20260704)
     本文: UD デジタル 教科書体 NP(Windows標準)。Mac/iOS向け代替に Klee One(要糸藤さん確認)
     見出し和文: Noto Sans JP Black / 見出し英字: Yu Gothic UI Light */
  --font-base: "UD デジタル 教科書体 NP", "UD Digital Kyokasho NP-R", "Klee One", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-head-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-head-en: "Yu Gothic UI", "YuGothic", "Yu Gothic", sans-serif;

  /* layout(カンプ実測 @1920px) */
  --content-w: 1200px;
  --content-w-wide: 1684px; /* 地図・店舗カード等の広幅セクション */
  --radius: 14px;
  --header-h: 96px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.8;
  letter-spacing: .05em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.header__inner {
  width: 100%;
  max-width: 1840px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header__logo img { height: 60px; width: auto; }
.header__right { display: flex; align-items: center; gap: 24px; }
.header__sns { display: flex; color: var(--c-text); transition: opacity .2s; }
.header__sns:hover { opacity: .8; }
.gnav__list { white-space: nowrap; display: flex; align-items: center; font-size: 15px; }
.gnav__list li:not(:first-child)::before { content: "・"; }
.gnav__list a:hover { color: var(--c-primary); }
.header__contact {
  white-space: nowrap;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 15px;
  padding: 8px 22px;
  transition: opacity .2s;
}
.header__contact:hover { opacity: .8; }

/* hamburger (SP) */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  position: relative;
}
.menu-btn span,
.menu-btn::before,
.menu-btn::after {
  content: "";
  position: absolute; left: 10px;
  width: 24px; height: 2px;
  background: var(--c-text);
  transition: .3s;
}
.menu-btn::before { top: 14px; }
.menu-btn span   { top: 21px; }
.menu-btn::after { top: 28px; }
.menu-btn.is-open::before { transform: translateY(7px) rotate(45deg); }
.menu-btn.is-open span { opacity: 0; }
.menu-btn.is-open::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- section title ---------- */
.sec-title {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 28px; /* カンプ実測 */
  font-weight: 500;
  margin-bottom: 48px;
}
.sec-title .en { font-size: 22px; font-weight: 400; color: var(--c-text); }
.sec-title::before,
.sec-title::after {
  content: "";
  height: 1px;
  background: var(--c-text);
}
.sec-title::before,
.sec-title::after { flex: 1; }

/* ---------- buttons / tags ---------- */
.btn-more {
  display: inline-block;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 16px;
  padding: 6px 42px;
  border-radius: 999px;
  transition: opacity .2s;
}
.btn-more:hover { opacity: .8; }

.tag {
  display: inline-block;
  background: var(--c-tag);
  color: var(--c-white);
  font-size: 14px;
  line-height: 1.7;
  padding: 0 12px;
}

.link-arrow { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover { color: var(--c-primary); }

/* ---------- page title (下層) ---------- */
.page-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 40px;
  max-width: none;              /* カンプ実測: 左端約104px から開始 */
  padding: 20px 24px 40px 5.4vw;
  font-family: var(--font-head-ja);
  font-size: clamp(40px, 5.7vw, 110px); /* カンプ実測 約110px @1920 */
  font-weight: 900; /* Noto Sans JP Black */
  line-height: 1.2;
}
.page-title .en {
  font-family: var(--font-head-en);
  font-size: clamp(26px, 4vw, 77px); /* カンプ実測 約77px @1920 */
  font-weight: 300; /* Yu Gothic UI Light */
  color: #555;
}

/* ---------- footer ---------- */
.footer {
  background: var(--c-dark);
  color: var(--c-white);
  padding: 48px 24px 32px;
  font-size: 13px;
}
.footer__logo { text-align: center; }
.footer__logo img { height: 88px; width: auto; margin: 0 auto; }
.footer__address { text-align: center; margin: 8px 0 40px; }
.footer__nav {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.footer__col dt {
  font-size: 15px;
  border-bottom: 1px solid var(--c-white);
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.footer__col dt:not(:first-child) { margin-top: 24px; }
.footer__col dd { padding-left: 1em; margin-bottom: 6px; }
.footer__col a:hover { text-decoration: underline; }
.footer__copy { text-align: right; margin-top: 32px; }

/* ---------- responsive ---------- */

/* 横並びのナビが収まらなくなる前にメニューへ切り替える。 */
@media (max-width: 1199px) {
  .menu-btn { display: block; flex-shrink: 0; }
  .header__right {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--c-white);
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 0;
    visibility: hidden;
    transform: translateY(-150%);
    transition: transform .3s;
    box-shadow: 0 8px 16px rgba(0,0,0,.1);
  }
  .header__right.is-open { visibility: visible; transform: translateY(0); }
  .gnav__list { flex-direction: column; align-items: stretch; }
  .gnav__list li::before { content: none !important; }
  .gnav__list a { display: block; padding: 12px 0; border-bottom: 1px solid #eee; }
  .header__contact { text-align: center; margin-top: 16px; padding: 12px; }
}

@media (max-width: 767px) {
  :root {
    --header-h: 72px;
    --header-h-compact: 0px;
  }
  .header {
    position: fixed;
    right: 0;
    left: 0;
    height: var(--header-h);
    transition: height .3s cubic-bezier(.22, 1, .36, 1);
  }
  main { padding-top: var(--header-h); }
  .header__inner {
    height: 100%;
    padding: 0 14px 0 18px;
  }
  .header__logo {
    transform-origin: left center;
    transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }
  .header__logo img { height: 48px; }
  .header.is-scrolled { height: var(--header-h-compact); }
  .header.is-scrolled .header__logo {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
  }
  .menu-btn {
    display: block;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 101;
    transition: top .3s cubic-bezier(.22, 1, .36, 1);
  }
  .header.is-scrolled .menu-btn { top: 4px; }
  .header.is-scrolled .header__right { top: 48px; }
  .sec-title { font-size: 20px; gap: 12px; }
  .sec-title .en { font-size: 15px; }
  .page-title {
    position: sticky;
    top: var(--header-h);
    z-index: 90;
    overflow-anchor: none;
    gap: 2px 12px;
    padding: 12px 20px 14px;
    background: var(--c-white);
    font-size: 34px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), padding .3s cubic-bezier(.22, 1, .36, 1), gap .3s cubic-bezier(.22, 1, .36, 1);
  }
  .page-title__ja {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(20px, min(calc(5.714vw + 11.714px), var(--page-title-fit)), 34px);
    transition: font-size .3s cubic-bezier(.22, 1, .36, 1);
  }
  .header.is-scrolled + main .page-title {
    transform: translateY(calc(-1 * var(--header-h)));
    min-height: 52px;
    gap: 0 10px;
    padding: 7px 64px 9px 20px;
  }
  .header.is-scrolled + main .page-title__ja {
    font-size: clamp(20px, min(calc(4.286vw + 13.286px), var(--page-title-fit-compact)), 30px);
  }
  .page-title .en {
    flex-basis: 100%;
    font-size: 22px;
    transition: font-size .3s cubic-bezier(.22, 1, .36, 1);
  }
  .header.is-scrolled + main .page-title .en { font-size: 19px; }
  .footer { padding: 36px 20px 24px; }
  .footer__logo img { height: 52px; }
  .footer__address { margin: 6px 0 32px; font-size: 11px; }
  .footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 140px));
    align-items: start;
    gap: 32px 24px;
  }
  .footer__col { min-width: 0; }
  .footer__col dt { font-size: 14px; }
  .footer__col dd { padding-left: .75em; }
  .footer__copy { text-align: center; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .header,
  .header__logo,
  .menu-btn,
  .page-title,
  .page-title__ja,
  .page-title .en { transition: none; }
}