/*
Theme Name: 心斎橋筋北商店街
Description: 心斎橋筋北商店街（しんきた）公式サイトのオリジナルテーマ。静的HTML版（web/）から移植。
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: shinkita
*/

/* ==========================================================
   目次
   01. 共通（変数・リセット・ヘッダー・フッター・トップページ）  … 旧 style.css
   02. 下層共通（帯・パンくず・ページ送り・影絵）                … 旧 sub.css
   03. お店一覧                                                  … 旧 shop-list.css
   04. お店詳細                                                  … 旧 shop.css
   05. トピックス（一覧・記事）                                  … 旧 topics.css
   06. 「しんきた」とは                                          … 旧 about.css
   07. 心斎橋今昔                                                … 旧 history.css
   08. 観光者向けガイド                                          … 旧 guide.css
   09. お問い合わせ                                              … 旧 contact.css
   10. 会員向け                                                  … 旧 member.css
   11. プライバシーポリシー                                      … 旧 privacy.css
   12. WordPress 用の追加
   ========================================================== */


/* ==========================================================
   01. 共通（変数・リセット・ヘッダー・フッター・トップページ）（旧 style.css）
   ========================================================== */

/* ==========================================================
   心斎橋筋北商店街（しんきた）トップページ
   - 色はPCカンプ（top_sinkita_03_水色）を正とする
   - PC: 1600px幅カンプ基準（コンテンツ幅1400px）
   - SP: 375px幅基準（sp_top_sinkita_03 のレイアウトを参照）
   ========================================================== */

/* ----------------------------------------------------------
   変数
   ---------------------------------------------------------- */
:root {
  --navy: #2a495f;          /* 見出し・ボタン・INSTAGRAM背景 */
  --navy-dark: #021e3a;     /* ナビ・年号・GUIDE罫線 */
  --navy-footer: #253a50;   /* フッター文字 */
  --navy-box: #3b586e;      /* JP|EN 枠 */
  --text: #2a495f;
  --text-date: #333333;
  --bg-mv: #dfeff8;
  --bg-beige: #faf6f2;
  --bg-blue: #f3fafc;
  --bg-footer: #eef9fd;
  --ghost: #dfeff8;         /* 透かし英字見出し（ベージュ上） */
  --ghost-guide: #dde7ec;
  --ghost-blue: #d9e9f2;    /* 透かし（薄水色上） */
  --tag-pink: #f09da0;
  --tag-green: #6da696;
  --tag-blue: #276998;
  --timeline: #0184d1;
  --logo: #36a3cc;
  --line: #2a495f;

  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mincho: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Bodoni Moda", "Noto Serif JP", serif;

  --container: 1400px;
  --gutter: clamp(20px, 6.25vw, 100px);
  --header-h: 100px;
  --header-h-scrolled: 76px;
  --sec: 120px; /* 下層の章間余白 */
}

/* ----------------------------------------------------------
   リセット・ベース
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h-scrolled); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg-beige);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Bodoni Moda は opsz（光学サイズ）軸を持つ可変フォント。ブラウザ既定の自動切替だと
     190px の SHOP などに opsz 96（巨大印刷用）が当たり、H の横棒や O の細い線が消える。
     カンプ（Photoshop）は既定インスタンスで組まれているので自動切替を止めて合わせる。 */
  font-optical-sizing: none;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
svg { fill: currentColor; }
.arrow { flex: 0 0 auto; }
[hidden] { display: none !important; } /* display:flex 等の指定より hidden 属性を優先 */

.container {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.pc-only { display: inline; }
.sp-only { display: none; }

/* 画面には出さず、読み上げと検索エンジンにだけ渡す見出し */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   共通部品
   ---------------------------------------------------------- */
/* 透かし英字 */
.ghost {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 190px;
  line-height: 1;
  color: var(--ghost);
  letter-spacing: -.02em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* ネイビーのボタン */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 242px;
  height: 55px;
  padding: 0 52px 0 40px;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1;
  transition: background .25s;
}
.btn .arrow {
  position: absolute;
  right: 23px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .25s;
}
.btn:hover { background: var(--navy-box); }
.btn:hover .arrow { transform: translate(4px, -50%); }
.btn--block { display: flex; width: 100%; }

/* テキストリンク（商店街について →） */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.text-link .arrow { transition: transform .25s; }
.text-link:hover .arrow { transform: translateX(4px); }

/* タグ */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 125px;
  height: 33px;
  padding: 0 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.tag--blue  { background: var(--tag-blue); }
.tag--pink  { background: var(--tag-pink); }
.tag--green { background: var(--tag-green); }

/* 影絵の帯 */
.kagee-strip { line-height: 0; }
.kagee-strip img { width: 100%; }
.kagee-strip__sp { display: none; }

/* ----------------------------------------------------------
   header
   ---------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: background-color .3s, box-shadow .3s;
}
.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 clamp(20px, 2.9vw, 47px) 0 var(--gutter);
  transition: height .3s;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 14px rgba(42, 73, 95, .08);
}
/* 下層ページ：MVが無いのでヘッダーは最初から白地、本文はヘッダー分だけ下げる */
.site-header--solid {
  background: #fff;
  box-shadow: 0 2px 14px rgba(42, 73, 95, .08);
}
.page-sub { padding-top: var(--header-h); }
.site-header.is-scrolled .site-header__inner { height: var(--header-h-scrolled); }

.site-logo {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 27px);
  flex: 0 0 auto;
}
.site-logo__mark { width: 58px; height: 58px; }
.site-logo__text { width: clamp(200px, 16.75vw, 268px); height: auto; }

.gnav {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 32px; /* ロゴとの最低限の間隔 */
}
/* 1200〜1359px：ナビ6項目が入りきるよう少し詰める */
@media (min-width: 1200px) and (max-width: 1359px) {
  .site-logo { gap: 12px; }
  .site-logo__text { width: 200px; }
  .site-logo__mark { width: 44px; height: 44px; }
  .gnav { padding-left: 24px; }
  .gnav__list { gap: 16px; }
  .gnav__item a { font-size: 14px; }
  .lang-switch { margin-left: 20px; padding: 0 14px; font-size: 14px; }
}
.gnav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
}
.gnav__item a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 700;
  line-height: 1;
  color: var(--navy-dark);
  white-space: nowrap;
}
.gnav__item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
}
.gnav__item a:hover::after { transform: scaleX(1); transform-origin: left; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 41px;
  margin-left: clamp(16px, 2.7vw, 43px);
  padding: 0 20px;
  background: var(--navy-box);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.lang-switch__icon { margin-right: 3px; }
.lang-switch__link { opacity: .7; transition: opacity .2s; }
.lang-switch__link.is-current,
.lang-switch__link:hover { opacity: 1; }
.lang-switch__sep { font-weight: 400; margin: 0 -4px; }

.gnav__sns { display: none; }
.menu-toggle { display: none; }

/* ----------------------------------------------------------
   MV
   ---------------------------------------------------------- */
.mv {
  position: relative;
  height: 59.75vw;
  min-height: 600px;
  max-height: 956px;
  background: var(--bg-mv) url("images/mv_bg_pattern.jpg") center / cover no-repeat;
  overflow: hidden;
}
.mv__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 74%;
  overflow: hidden;
  clip-path: polygon(15.5% 0, 100% 0, 100% 100%, 0 100%);
}
/* 写真上部の白グラデーション：透過ヘッダーのナビを写真から浮かせる（768px以上。SPはヘッダーが写真に重ならない） */
@media (min-width: 768px) {
  .mv__photo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .40) 50%, rgba(255, 255, 255, 0) 100%);
  }
}
/* スライド：is-active が最前面でフェードイン、直前の1枚は is-prev として下に残す（暗転しないクロスフェード） */
.mv__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.mv__slide.is-prev   { z-index: 1; opacity: 1; }
.mv__slide.is-active { z-index: 2; opacity: 1; }
.mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform-origin: 50% 40%;
  will-change: transform;
}
/* ゆっくりズーム（奇数枚は寄り、偶数枚は引き）。表示中は is-active→is-prev と移っても同じアニメーションなので途切れない */
.mv__slide.is-active img,
.mv__slide.is-prev img { animation: mvZoomIn 9.5s linear forwards; }
.mv__slide:nth-child(even).is-active img,
.mv__slide:nth-child(even).is-prev img { animation-name: mvZoomOut; }
@keyframes mvZoomIn  { from { transform: scale(1); }    to { transform: scale(1.08); } }
@keyframes mvZoomOut { from { transform: scale(1.08); } to { transform: scale(1); } }
.mv__copy {
  position: absolute;
  top: clamp(130px, 11vw, 176px);
  left: var(--gutter);
  z-index: 2;
}
.mv__since {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--navy);
}
.mv__catch {
  margin: 44px 0 0 31px;
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: clamp(38px, 3.5vw, 56px);
  line-height: 1.7;
  letter-spacing: .18em;
  color: var(--navy);
  white-space: nowrap;
}
.mv__catch span { display: block; }
/* 影絵の帯：カンプでは kagee_short を等倍で左端-11pxに置き、右端1125px（画面幅の約70%）で終わる */
.mv__kagee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.mv__kagee-short {
  position: absolute;
  left: -0.7%;
  bottom: 0;
  width: 71%;
}

/* ----------------------------------------------------------
   SEARCH
   ---------------------------------------------------------- */
.search {
  background: var(--bg-beige);
  padding: 67px 0 40px;
}
.search__inner {
  display: grid;
  grid-template-columns: 508px 1fr;
  align-items: start;
}
.search__ghost {
  font-weight: 500;
  font-size: 112px;
  margin-left: -55px;
}
.search__title {
  margin-top: 4px;
  padding-left: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 35px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--navy);
  white-space: nowrap;
}
.search__form { padding-top: 14px; }
.search__label {
  display: block;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1;
  color: var(--navy);
}
.search__box {
  display: flex;
  align-items: stretch;
  height: 78px;
  border: 2px solid var(--navy);
  background: #fff;
}
.search__icon {
  align-self: center;
  margin-left: 22px;
  color: var(--navy);
}
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 20px 0 18px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--navy);
}
.search__input::placeholder { color: #8a9099; letter-spacing: .05em; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex: 0 0 194px;
  margin: -2px -2px -2px 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: .3em;
  text-indent: .3em;
  transition: background .25s;
}
.search__btn:hover { background: var(--navy-box); }

/* ----------------------------------------------------------
   ABOUT
   ---------------------------------------------------------- */
.about {
  background: var(--bg-beige);
  padding: 20px 0 115px;
}
.about__inner {
  display: grid;
  grid-template-columns: 576px 1fr 411px;
  align-items: start;
}
.about__photo1 {
  margin-top: 105px;
  border-radius: 16px;
  overflow: hidden;
}
.about__photo1 img { width: 100%; }
.about__photo2 {
  margin-top: 22px;
  border-radius: 50% 50% 0 0 / 32.5% 32.5% 0 0;
  overflow: hidden;
}
.about__photo2 img { width: 100%; }
.about__body {
  position: relative;
  min-height: 740px;
}
.about__title {
  position: absolute;
  top: 0;
  left: 33px;
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: 58px;
  line-height: 1.25;
  letter-spacing: .16em;
  color: var(--navy);
  white-space: nowrap;
}
.about__title span { display: block; }
.about__text {
  margin: 467px 0 0 124px;
  width: 262px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2.2;
  white-space: nowrap;
}
.about__body .text-link { margin: 26px 0 0 124px; }

/* ----------------------------------------------------------
   TOPICS
   ---------------------------------------------------------- */
.topics {
  background: var(--bg-beige);
  padding: 0 0 80px;
}
.topics__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
}
.topics__ghost {
  font-weight: 500;
  margin: 0 0 -8px -73px;
}
.topics__btn { margin-bottom: 30px; }
.topics__btn-sp { display: none; }

.topics__grid {
  display: grid;
  grid-template-columns: minmax(0, 709fr) minmax(0, 616fr);
  column-gap: 75px;
  align-items: start;
}
.topics__sub {
  display: grid;
  row-gap: 50px;
}
.topics-card { min-width: 0; }
.topics-card__link { display: block; }
.topics-card__img {
  overflow: hidden;
  background: #ddd;
}
.topics-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.topics-card__link:hover img { transform: scale(1.04); }
.topics-card__meta {
  display: flex;
  align-items: center;
  gap: 30px;
}
.topics-card__date {
  font-size: 14px;
  color: var(--text-date);
  letter-spacing: .02em;
}
.topics-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}

/* 1件目（大） */
.topics-card--large .topics-card__img { aspect-ratio: 709 / 462; }
.topics-card--large .topics-card__body { margin-top: 24px; }
.topics-card--large .topics-card__title { margin-top: 18px; }

/* 2・3件目 */
.topics__sub .topics-card__link {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  column-gap: 38px;
  align-items: start;
}
.topics__sub .topics-card__img { aspect-ratio: 4 / 3; }
.topics__sub .topics-card__meta { gap: 0; justify-content: space-between; padding-top: 8px; }
.topics__sub .topics-card__title { margin-top: 20px; }

/* ----------------------------------------------------------
   SHOP
   ---------------------------------------------------------- */
.shop {
  background: var(--bg-blue);
  padding: 115px 0 0;
}
.shop__inner {
  display: grid;
  grid-template-columns: 439px 1fr;
  grid-template-areas:
    "head list"
    "btn  list";
  align-items: start;
}
.shop__head { grid-area: head; }
.cat-list   { grid-area: list; }
.shop__btn  { grid-area: btn; }

.shop__title {
  margin-left: -63px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 190px;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -.02em;
}
.shop__sub {
  margin-top: 30px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 35px;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--navy);
}
.shop__lead {
  margin-top: 56px;
  padding-left: 3px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .08em;
  color: #0b2d4f;
}
.shop__btn { margin-top: 40px; }

.cat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-right: -63px; /* カンプではリストが右のコンテナ端より63px外まで伸びる */
}
.cat-item { border-top: 1px solid var(--line); }
.cat-item:nth-child(-n+2) { border-top: 0; }
.cat-item:nth-child(odd) { border-right: 1px solid var(--line); }
.cat-item__link {
  display: flex;
  align-items: center;
  height: 105px;
  padding: 0 27px 0 38px;
  color: var(--navy);
}
.cat-item__num {
  flex: 0 0 73px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--navy);
}
.cat-item__icon {
  flex: 0 0 68px;
  height: 68px;
  margin-right: 20px;
}
.cat-item__icon img { width: 100%; height: 100%; object-fit: contain; }
.cat-item__name {
  display: block;
  padding-right: 12px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  color: var(--navy);
  white-space: nowrap;
}
.cat-item__name small {
  display: block;
  margin-top: 6px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cat-item__link .arrow {
  width: 24px;  /* 32 → 24 */
  height: 11px;
  margin-left: auto;
  transition: transform .25s;
}
.cat-item__link:hover .arrow { transform: translateX(5px); }

.shop .kagee-strip { margin-top: 56px; }

/* ----------------------------------------------------------
   GUIDE
   ---------------------------------------------------------- */
.guide {
  background: var(--bg-beige);
  padding: 71px 0 0;
}
.guide__inner {
  position: relative;
  display: grid;
  grid-template-columns: 458px minmax(0, 1fr);
  grid-template-areas: "photo list";
  column-gap: 58px;
  align-items: start;
}
.guide__ghost {
  position: absolute;
  top: 0;
  right: calc(var(--gutter) - 56px);
  margin: 0;
  color: var(--ghost-guide);
}
.guide__photo {
  grid-area: photo;
  width: 483px;
  margin-left: -25px;
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  overflow: hidden;
}
.guide__photo img { width: 100%; }

.guide-list {
  grid-area: list;
  margin-top: 154px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--navy-dark);
  border-radius: 8px;
}
.guide-list::before,
.guide-list::after {
  content: "";
  position: absolute;
  background: var(--navy-dark);
  pointer-events: none;
}
.guide-list::before { left: 14px; right: 14px; top: 50%; height: 1px; }
.guide-list::after  { top: 10px; bottom: 10px; left: 50%; width: 1px; }

.guide-item__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 237px;
  padding: 40px 20px 50px 40px;
  color: var(--navy);
}
.guide-item__icon {
  flex: 0 0 120px;
  height: 120px;
  margin-right: 28px;
}
.guide-item__icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.guide-item__body { display: block; }
.guide-item__title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}
.guide-item__text {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0;
  font-feature-settings: "palt";
  white-space: nowrap;
}
.guide-item__link .arrow {
  position: absolute;
  right: 28px;
  bottom: 24px;
  width: 36px;  /* 54 → 36 */
  height: 17px;
  color: var(--navy-dark);
  transition: transform .25s;
}
.guide-item__link:hover .arrow { transform: translateX(6px); }

/* ----------------------------------------------------------
   HISTORY
   ---------------------------------------------------------- */
.history {
  position: relative;
  z-index: 1;
  display: flow-root; /* 子のマイナスマージンを親と相殺させない */
  overflow-x: clip;
  background: var(--bg-blue);
  margin-top: 89px;
  padding: 0 0 61px;
}
/* 透かし文字は前のセクション（ベージュ）に上28pxぶん食い込む */
.history__ghost {
  position: relative;
  margin-top: -47px;
  text-align: center;
  color: var(--ghost-blue);
}
.timeline-wrap { margin-top: 52px; }
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-top: 11px;
}
/* 点線・丸・矢印はすべて中心を y=11px（= padding-top）に揃える */
.timeline::before {
  content: "";
  position: absolute;
  top: 10px;          /* 線の太さ2px → 中心 11px */
  left: 10%;
  right: 12px;        /* 矢印の手前5pxで止める（カンプと同じ、点線の間隔と同じリズム） */
  border-top: 2px dashed var(--timeline);
}
.timeline::after {
  content: "";
  position: absolute;
  top: 5px;           /* 12pxの箱の中心 → 11px（4pxだと1px上にずれる） */
  right: 1px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--timeline);
  border-right: 2px solid var(--timeline);
  transform: rotate(45deg);
}
.timeline__item {
  position: relative;
  padding: 42px 16px 0;
  text-align: center;
}
.timeline__item::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--timeline);
  transform: translateX(-50%);
}
.timeline__era {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 33px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--navy-dark);
}
.timeline__text {
  margin-top: 26px;
  min-height: 54px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-dark);
  white-space: nowrap;
}
.timeline__img { margin-top: 24px; }
.timeline__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.history__btn {
  margin-top: 58px;
  text-align: center;
}

/* ----------------------------------------------------------
   INSTAGRAM
   ---------------------------------------------------------- */
.instagram {
  background: var(--navy);
  padding: 77px 0 65px;
  color: #fff;
}
.instagram__head {
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.instagram__title {
  font-family: var(--font-en);
  font-weight: 600;
  /* 2026-10-15 セクションの「札」として控えめに：78px/.02em → 65px/.08em
     （大文字組みはサイズを落として字間を開けるほど締まる。写真6枚を主役に戻す） */
  font-size: 65px;
  line-height: 1;
  letter-spacing: .08em;
}
.instagram__account {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .02em;
  transition: opacity .2s;
}
.instagram__account:hover { opacity: .7; }
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 17px;
  margin-top: 58px;
}
.instagram__grid a { display: block; overflow: hidden; }
.instagram__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .5s, opacity .3s;
}
.instagram__grid a:hover img { transform: scale(1.05); opacity: .85; }

/* ----------------------------------------------------------
   footer
   ---------------------------------------------------------- */
.site-footer {
  background: var(--bg-footer);
  color: var(--navy-footer);
  padding: 77px 0 110px;
}
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-left: -5px;
}
.site-footer__mark { width: 56px; height: 56px; }
.site-footer__text { width: 377px; height: auto; }

/* フッターナビ：ヘッダーの6項目を見出し（リンク）にし、子ページがあるものだけ下に並べる */
.site-footer__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 60px;
  margin-top: 64px;
}
.fnav {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  column-gap: clamp(36px, 4.5vw, 72px);
}
.fnav__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.fnav__title + .fnav__title { margin-top: 22px; }
.fnav__title a { transition: opacity .2s; }
.fnav__title a:hover { opacity: .6; }
.fnav__list { margin-top: 16px; }
.fnav__list li { line-height: 2.1; }
.fnav__list a {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  font-feature-settings: "palt";
  transition: opacity .2s;
}
.fnav__list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 7px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.fnav__list a:hover { opacity: .6; }
.fnav__list--2col {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 32px;
}

.site-footer__side {
  justify-self: end;
  padding-top: 66px;
  text-align: right;
}
.sns {
  display: flex;
  justify-content: flex-end;
  gap: 19px;
}
.sns a { display: block; color: var(--navy-footer); transition: opacity .2s; }
.sns a:hover { opacity: .6; }
.copyright {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1;
}
.privacy {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1;
}
.privacy:hover { text-decoration: underline; }
/* 会員向けページへの動線（フッター右下） */
.member-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 18px 0 0 auto;
  padding: 7px 16px;
  border: 1px solid var(--navy-footer);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--navy-footer);
  transition: background .2s, color .2s;
}
.member-link svg { fill: none; }
.member-link:hover { background: var(--navy-footer); color: #fff; }

/* ==========================================================
   PC 1200〜1599px：px固定レイアウトの3セクションを比率で縮小
   ========================================================== */
@media (min-width: 1200px) and (max-width: 1599px) {
  .about__inner, .topics__grid, .shop__inner, .guide__inner { zoom: .9; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .about__inner, .topics__grid, .shop__inner, .guide__inner { zoom: .85; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  .about__inner, .topics__grid, .shop__inner, .guide__inner { zoom: .8; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .about__inner, .topics__grid, .shop__inner, .guide__inner { zoom: .75; }
}

/* ==========================================================
   タブレット（768〜1199px）：PCレイアウトを簡略化
   ========================================================== */
@media (max-width: 1199px) {
  :root { --sec: 84px; }
  .ghost { font-size: 130px; }
  .mv { min-height: 520px; }

  .search__inner { grid-template-columns: 1fr; row-gap: 30px; }
  .search__ghost { font-size: 90px; }
  .search__title { padding-left: 20px; font-size: 28px; }
  .search__box { height: 64px; }
  .search__btn { flex-basis: 150px; font-size: 18px; }

  .about__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photo1 body"
      "photo2 body";
    column-gap: 40px;
    row-gap: 30px;
  }
  .about__photo1 { grid-area: photo1; margin-top: 0; }
  .about__photo2 { grid-area: photo2; margin-top: 0; width: 60%; justify-self: center; }
  .about__body { grid-area: body; min-height: 0; }
  .about__title { position: static; writing-mode: horizontal-tb; font-size: 36px; line-height: 1.4; }
  .about__text { margin: 30px 0 0; width: auto; white-space: normal; }
  .about__body .text-link { margin: 24px 0 0; }

  .topics__ghost { margin-left: -30px; }
  .topics__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .topics__sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; }
  .topics__sub .topics-card__link { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }

  .shop { padding-top: 70px; }
  .shop__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "list" "btn";
  }
  .shop__title { margin-left: -20px; font-size: 130px; }
  .shop__sub { margin-top: 20px; }
  .shop__lead { margin-top: 16px; }
  .shop__lead br { display: none; }
  .cat-list { margin-top: 40px; margin-right: 0; border-top: 1px solid var(--line); }
  .cat-item:nth-child(-n+2) { border-top: 0; }
  .cat-item__link { height: 92px; padding: 0 16px 0 20px; }
  .cat-item__num { flex-basis: 54px; font-size: 24px; }
  .cat-item__icon { flex-basis: 52px; height: 52px; margin-right: 14px; }
  .cat-item__name { font-size: 17px; white-space: normal; }
  .cat-item__name small { font-size: 11px; }
  .shop__btn { margin-top: 40px; text-align: center; }

  .guide__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "ghost" "photo" "list";
    row-gap: 30px;
  }
  .guide__ghost { position: static; margin: 0; }
  .guide__photo { margin-left: 0; width: min(45%, 360px); justify-self: center; }
  .guide-list { margin-top: 0; }
  .guide-item__link { min-height: 0; padding: 30px 24px 48px 24px; }
  .guide-item__icon { flex-basis: 96px; height: 96px; margin-right: 20px; }
  .guide-item__text { white-space: normal; }

  .timeline__item { padding-left: 6px; padding-right: 6px; }
  .timeline__era { font-size: 26px; }
  .timeline__text { font-size: 14px; white-space: normal; }

  .instagram__title { font-size: 50px; letter-spacing: .07em; }
  .instagram__account { font-size: 22px; }
  .instagram__grid { grid-template-columns: repeat(3, 1fr); }

  .site-footer__text { width: 300px; }
  .site-footer__nav { grid-template-columns: 1fr; row-gap: 44px; }
  .fnav { grid-template-columns: auto auto auto; column-gap: 48px; row-gap: 36px; }
  .fnav__group--shop { grid-column: 1 / -1; }
  .fnav__list--2col { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 48px; }
  .site-footer__side { grid-column: 1 / -1; justify-self: start; padding-top: 0; text-align: left; }
  .sns { justify-content: flex-start; }
  .member-link { margin-left: 0; }
}

/* ==========================================================
   〜1199px：ヘッダーはハンバーガー＋ドロワー
   ========================================================== */
@media (max-width: 1199px) {
  :root {
    --header-h: 64px;
    --header-h-scrolled: 56px;
  }
  .site-header__inner { padding: 0 var(--gutter); }
  .site-logo { gap: 10px; }
  .site-logo__mark { width: 33px; height: 33px; }
  .site-logo__text { width: 170px; }

  .menu-toggle {
    position: relative;
    z-index: 110;
    display: block;
    width: 36px;
    height: 26px;
    margin-left: auto;
  }
  .menu-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--navy-dark);
    transition: transform .3s, opacity .3s, top .3s;
  }
  .menu-toggle__bar:nth-child(1) { top: 0; }
  .menu-toggle__bar:nth-child(2) { top: 12px; }
  .menu-toggle__bar:nth-child(3) { top: 24px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { top: 12px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { top: 12px; transform: rotate(-45deg); }

  .gnav {
    position: fixed;
    inset: 0;
    z-index: 105;
    display: block;
    margin: 0;
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    background: var(--navy);
    color: #fff;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: transform .35s, opacity .35s, visibility 0s .35s;
  }
  .is-menu-open .gnav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: transform .35s, opacity .35s, visibility 0s;
  }
  .is-menu-open .site-header { background: #fff; }
  .is-menu-open { overflow: hidden; }
  .gnav__list { display: block; }
  .gnav__item { border-bottom: 1px solid rgba(255, 255, 255, .25); }
  .gnav__item a { padding: 18px 4px; font-size: 17px; color: #fff; }
  .gnav__item a::after { display: none; }
  .lang-switch { margin: 28px 0 0; width: 126px; justify-content: center; }
  .gnav__sns {
    display: flex;
    gap: 26px;
    margin-top: 36px;
  }
  .gnav__sns a { display: block; color: #fff; }
}

/* ==========================================================
   SP（〜767px）：sp_top_sinkita_03 のレイアウト
   ========================================================== */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --sec: 56px;
  }
  body { font-size: 14px; }
  .pc-only { display: none; }
  .sp-only { display: inline; }
  .ghost { font-size: 92px; }

  .btn {
    min-width: 0;
    height: 50px;
    font-size: 15px;
  }
  .btn--block { padding: 0 60px; }
  .btn--block .arrow { right: 24px; }
  .tag { min-width: 72px; height: 24px; font-size: 11px; padding: 0 12px; }
  .kagee-strip__pc { display: none; }
  .kagee-strip__sp { display: block; width: 120%; max-width: none; margin-left: -4%; }

  /* MV -------------------------------------------------- */
  .mv {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-top: var(--header-h);
    background-size: auto 520px;
  }
  .mv__copy  { order: 1; }
  .mv__kagee { order: 2; }
  .mv__photo { order: 3; }
  .mv__copy {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 26px 0 0;
  }
  .mv__catch {
    margin: 0;
    font-size: 28px;
    line-height: 1.7;
    letter-spacing: .22em;
    height: 250px;
  }
  .mv__since { margin: 26px 0 22px; font-size: 12px; } /* 下は影絵の帯との間（2026-10-14 余白を広げる） */
  .mv__kagee {
    position: relative;
    margin-top: 10px;
    height: 70px;
  }
  .mv__kagee-short {
    left: -6%;
    bottom: 0;
    width: 116%;
    max-width: none;
  }
  .mv__photo {
    position: relative;
    width: 100%;
    height: 297px;
    clip-path: none;
  }

  /* SEARCH ---------------------------------------------- */
  .search { padding: 24px 0 44px; }
  .search__inner { grid-template-columns: 1fr; row-gap: 0; }
  .search__ghost { font-size: 64px; margin-left: -2px; }
  .search__title { margin-top: -6px; padding-left: 0; font-size: 20px; letter-spacing: .08em; }
  .search__form { padding-top: 28px; }
  .search__label { margin-bottom: 10px; font-size: 12px; }
  .search__box { height: 44px; border-width: 1px; }
  .search__icon { width: 20px; height: 20px; margin-left: 12px; }
  .search__input { padding: 0 10px; font-size: 13px; }
  .search__btn { flex-basis: 72px; gap: 8px; margin: -1px -1px -1px 0; font-size: 14px; letter-spacing: .15em; text-indent: 0; }
  .search__btn .arrow { width: 18px; }

  /* ABOUT ----------------------------------------------- */
  .about {
    padding: 0 0 40px;
    overflow: hidden;
    /* ガス燈写真（photo2）の「画面に見えている幅」。
       広い画面ではカンプどおり115px、狭い画面では本文の行長（14px×18文字＝252px）を
       確保するために自動で縮める。これで本文・見出しと写真が重ならない。 */
    --photo-vis: clamp(56px, calc(100vw - var(--gutter) - 272px), 115px);
  }
  .about__inner {
    position: relative;
    display: block;
    padding: 0;
  }
  .about__photo1 {
    margin: 0;
    border-radius: 0;
    height: 250px;
  }
  .about__photo1 img { width: 100%; height: 100%; object-fit: cover; }
  .about__photo2 {
    position: absolute;
    top: 222px;
    right: -25px;
    width: calc(var(--photo-vis) + 25px); /* 25px は画面右外へのはみ出し分 */
    margin: 0;
    z-index: 2;
  }
  /* 本文・見出し・リンクは写真の手前（16px）で折り返す */
  .about__title,
  .about__text,
  .about__body .text-link {
    max-width: calc(100% - var(--photo-vis) + var(--gutter) - 16px);
  }
  .about__body {
    min-height: 0;
    padding: 30px var(--gutter) 0;
  }
  .about__title {
    position: static;
    writing-mode: horizontal-tb;
    font-size: 24px;
    line-height: 1.55;
    letter-spacing: .14em;
  }
  .about__title span { display: block; }
  .about__text {
    margin: 22px 0 0;
    width: 255px;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 2;
    white-space: normal;
  }
  .about__body .text-link { margin: 18px 0 0; font-size: 15px; gap: 12px; }

  /* TOPICS ---------------------------------------------- */
  .topics { padding: 0 0 46px; }
  .topics__head { margin-bottom: 20px; }
  /* 92px だと 360px 未満の画面で文字が画面幅を超え、ページ全体が縮小表示になるため上限を設ける */
  .topics__ghost { margin: 0 0 -10px -2px; font-size: min(92px, 25vw); }
  .topics__btn { display: none; }
  .topics__btn-sp { display: flex; margin-top: 30px; }
  .topics__grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .topics-card--large .topics-card__img { aspect-ratio: 335 / 215; }
  .topics-card--large .topics-card__body { margin-top: 16px; }
  .topics-card--large .topics-card__meta { gap: 14px; }
  .topics-card--large .topics-card__title { margin-top: 14px; font-size: 19px; line-height: 1.5; }
  .topics__sub { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 26px; }
  .topics__sub .topics-card__link { grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; }
  .topics__sub .topics-card__img { aspect-ratio: 4 / 3; }
  .topics__sub .topics-card__meta { padding-top: 0; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
  .topics-card__meta .tag { min-width: 0; height: 20px; padding: 0 8px; font-size: 10.5px; letter-spacing: .02em; }
  .topics__sub .topics-card__date { font-size: 12px; }
  .topics__sub .topics-card__title { margin-top: 10px; font-size: 16px; line-height: 1.55; }

  /* SHOP ------------------------------------------------ */
  .shop { padding-top: 34px; }
  .shop__inner {
    display: block;
    padding: 0 var(--gutter);
  }
  .shop__title { margin-left: -3px; font-size: 92px; }
  .shop__sub { margin-top: 22px; font-size: 25px; }
  .shop__lead { margin-top: 18px; padding-left: 0; font-size: 14px; line-height: 1.8; }
  .shop__lead br { display: none; }
  .cat-list {
    margin-top: 32px;
    margin-right: 0;
    border-top: 1px solid var(--line);
  }
  .cat-item:nth-child(-n+2) { border-top: 0; }
  .cat-item__link {
    position: relative;
    align-items: center;
    height: 90px;
    padding: 0 10px 0 0;
  }
  .cat-item__num { display: none; } /* SPは幅が狭いので番号を省き、その分アイコンを大きく（2026-10-14） */
  .cat-item__icon { flex: 0 0 44px; height: 44px; margin-right: 10px; }
  .cat-item__name {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
  }
  .cat-item__name small { display: none; }
  .cat-item__name .seg { display: inline-block; }
  .cat-item__name { font-size: 12.5px; font-feature-settings: "palt"; }
  .cat-item:nth-child(even) .cat-item__link { padding-left: 14px; }
  .cat-item__link .arrow {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 9px;
    margin: 0;
  }
  .shop__btn { margin-top: 24px; }
  .shop__btn .btn { width: 100%; padding: 0 60px; }
  .shop__btn .btn .arrow { right: 24px; }
  .shop .kagee-strip { margin-top: 30px; overflow: hidden; }

  /* GUIDE ----------------------------------------------- */
  .guide { padding: 38px 0 0; }
  .guide__inner {
    display: block;
    overflow: hidden;
  }
  .guide__ghost { position: static; text-align: right; margin: 0 -24px 0 0; }
  .guide__photo {
    width: 240px;
    margin: 12px auto 0;
    border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  }
  .guide-list {
    margin-top: 22px;
    border: 0;
    border-radius: 0;
  }
  .guide-list::before { left: 0; right: 0; }
  .guide-list::after { top: 0; bottom: 0; }
  .guide-item { display: flex; }
  .guide-item__link {
    flex: 1 1 auto; /* 左右のカードを同じ高さに伸ばす */
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 20px 12px 18px;
    text-align: center;
  }
  .guide-item__icon {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    margin: 0;
  }
  .guide-item__title { margin-top: 14px; font-size: 17px; line-height: 1.35; }
  .guide-item__text { margin-top: 10px; font-size: 12px; line-height: 1.65; white-space: normal; text-align: left; }
  .guide-item__text br { display: none; }
  .guide-item__link .arrow {
    position: static;
    width: 28px;
    height: 13px;
    margin-top: auto; /* 矢印はカードの下端にそろえる */
    padding-top: 14px;
    box-sizing: content-box;
  }

  /* HISTORY --------------------------------------------- */
  .history { margin-top: 48px; padding-bottom: 50px; }
  .history__ghost {
    margin: -42px 0 0 -2px;
    text-align: left;
    font-size: 92px;
  }
  .timeline-wrap {
    margin: 50px calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .timeline-wrap::-webkit-scrollbar { display: none; }
  .timeline {
    display: flex;
    gap: 32px;
    width: max-content;
    padding-top: 8px;
    padding-right: var(--gutter);
  }
  /* SPは中心を y=8px（= padding-top）に揃える。
     矢印の先端は「現在」の写真の右端にぴったり合わせる（画面幅によらず一致）。
     var(--gutter) は .timeline の padding-right を打ち消す分、+2px は45度回転した
     箱の先端が箱の外へ約2px出る分の補正。点線は矢印の5px手前で止める。 */
  .timeline::before { top: 7px; left: 98px; right: calc(var(--gutter) + 12px); }
  .timeline::after { top: 3px; right: calc(var(--gutter) + 2px); width: 10px; height: 10px; }
  .timeline__item {
    flex: 0 0 195px;
    padding: 36px 0 0;
  }
  .timeline__item::before { top: -8px; width: 16px; height: 16px; } /* 偶数にして中心を8pxちょうどに */
  .timeline__era { font-size: 24px; }
  .timeline__text { margin-top: 16px; min-height: 3.2em; font-size: 13px; line-height: 1.6; } /* 2行分を確保し、1行の説明でも写真の位置をそろえる */
  .timeline__img { margin-top: 16px; }
  .history__btn { margin-top: 36px; }
  .history__btn .btn { width: 100%; padding: 0 60px; }
  .history__btn .btn .arrow { right: 24px; }

  /* INSTAGRAM ------------------------------------------- */
  .instagram { padding: 44px 0 50px; }
  .instagram__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .instagram__title { font-size: 42px; letter-spacing: .06em; }
  .instagram__account { font-size: 18px; }
  .instagram__grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }

  /* footer ---------------------------------------------- */
  .site-footer { padding: 36px 0 36px; }
  .site-footer__logo { justify-content: center; gap: 12px; margin: 0; }
  .site-footer__mark { width: 36px; height: 36px; }
  .site-footer__text { width: 262px; }
  .site-footer__nav {
    display: block;
    margin: 44px 0 0;
  }
  .fnav { display: none; } /* SPはドロワーメニューにナビがあるため非表示（カンプどおり） */
  .site-footer__side { justify-self: stretch; padding: 0; text-align: center; }
  .sns { justify-content: center; gap: 22px; }
  .sns svg { width: 30px; height: 30px; }
  .copyright { margin-top: 30px; font-size: 14px; }
  .privacy { margin-top: 14px; font-size: 12px; }
  .member-link { margin: 18px auto 0; }
}


/* ==========================================================
   下層ページ共通：章見出し・章間の余白（2026-10-09 統一）
   - 章見出しは明朝700・44px、英字の副題は <small> で下に添える
   - 章と章の間は --sec（PC120 / タブレット84 / SP56）
   ========================================================== */
.about-title,
.hist-title,
.guide-title,
.ct-title,
.mb-title,
.shop-section__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.45;
  letter-spacing: .08em;
  color: var(--navy-dark);
}
.about-title small,
.hist-title small,
.guide-title small,
.ct-title small,
.mb-title small,
.shop-section__title small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: .16em;
  color: var(--tag-blue);
}
@media (max-width: 1199px) {
  .about-title, .hist-title, .guide-title, .ct-title, .mb-title, .shop-section__title { font-size: 34px; }
}
@media (max-width: 767px) {
  .about-title, .hist-title, .guide-title, .ct-title, .mb-title, .shop-section__title { font-size: 25px; line-height: 1.5; letter-spacing: .04em; }
  .about-title small, .hist-title small, .guide-title small, .ct-title small, .mb-title small, .shop-section__title small { margin-top: 6px; font-size: 12px; }
}

/* ----------------------------------------------------------
   モーション配慮
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  /* MVのスライドはフェードだけ残し、ズームは止める */
  .mv__slide { transition: opacity 1.6s ease !important; }
  .mv__slide img { animation: none !important; }
}


/* ==========================================================
   02. 下層共通（帯・パンくず・ページ送り・影絵）（旧 sub.css）
   ========================================================== */

/* ==========================================================
   下層ページ共通（shop_list / topics_list / topics_detail …）
   - ページヘッダー（模様入り水色の帯＋透かし英字）
   - パンくず
   - ページ送り
   - 影絵の帯の上余白
   ※ shop_detail.html は shop.css 側に独自のパンくず定義あり
   ========================================================== */

/* ----------------------------------------------------------
   ページヘッダー
   ---------------------------------------------------------- */
/* 高さは全ページ共通で固定（2026-10-09）。中身は「パンくず＋見出し＋リード2行まで」 */
.page-hero {
  position: relative;
  height: 280px; /* 2026-10-14 320 → 280（下の空きを詰める） */
  overflow: hidden;
  /* 模様の大きさ：画面幅追従だと広い画面で柄が大きくなりすぎるので 1250px で頭打ち
     （1600px幅でモチーフのピッチ約77px。1176px以下は従来どおり画面幅追従） */
  background: var(--bg-mv) url("images/mv_bg_pattern.jpg") left top / min(106.25vw, 1250px) auto repeat;
}
.page-hero__ghost {
  position: absolute;
  right: -0.5%;
  bottom: -0.1em;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: min(230px, 14.4vw);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #b3cfe5;
  user-select: none;
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  padding-top: 25px;
}
.page-hero__title {
  margin-top: 48px;
  font-family: var(--font-serif);
  font-weight: 700; /* 2026-10-08 ユーザー指示で 500 → 700 */
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: .1em;
  color: var(--navy-dark);
}
.page-hero__lead {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .08em;
  color: #0b2d4f;
}
/* リードの下の説明文（任意） */
.page-hero__text {
  margin-top: 28px;
  max-width: 640px;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}
/* 帯の直後に置く導入文（帯に入りきらない説明を移す先） */
.page-intro { padding-top: 80px; }
.page-intro p {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 2.1;
  letter-spacing: .06em;
  color: var(--navy-dark);
}
/* 記事ページ用：帯なし、ベージュ地にパンくずのみ */
.page-crumb { padding-top: 25px; }

/* ----------------------------------------------------------
   パンくず
   ---------------------------------------------------------- */
.breadcrumb { color: var(--navy); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
/* 区切り：SVGのシェブロン（mask で文字色に追従） */
.breadcrumb__list li + li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 11px;
  margin: 0 16px;
  vertical-align: 1px;
  background: currentColor;
  opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb__list a { transition: opacity .2s; }
.breadcrumb__list a:hover { opacity: .7; }
.breadcrumb__list li[aria-current] {
  max-width: 32em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   ページ送り
   ---------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 80px;
}
.pagination__list {
  display: flex;
  gap: 10px;
}
.pagination__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--navy);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  color: var(--navy);
  transition: background .2s, color .2s;
}
a.pagination__num:hover,
.pagination__num.is-current {
  background: var(--navy);
  color: #fff;
}
.pagination__prev,
.pagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--navy);
  transition: transform .25s, opacity .2s;
}
/* 前後：パンくずと同じSVGシェブロン */
.pagination__prev::before,
.pagination__next::before {
  content: "";
  width: 9px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pagination__prev::before { transform: scaleX(-1); }
.pagination__next:hover { transform: translateX(3px); }
.pagination__prev:hover { transform: translateX(-3px); }
.pagination__prev.is-disabled { opacity: .25; pointer-events: none; }

/* 影絵の帯 → フッター */
.list-kagee { margin-top: var(--sec); }

/* ==========================================================
   タブレット（768〜1199px）
   ========================================================== */
@media (max-width: 1199px) {
  .page-hero__ghost { font-size: 13vw; } /* 2026-10-14 帯を低くしたのに合わせ 15vw → 13vw（リードに重ならないように） */
  .page-hero { height: 240px; } /* 2026-10-14 270 → 240 */
  .page-hero__title { margin-top: 32px; font-size: 34px; }
  .page-hero__lead { margin-top: 12px; font-size: 15px; }
  .pagination { margin-top: 60px; }
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767px) {
  .page-hero { background-size: auto 520px; }
  .page-hero__ghost { font-size: 21vw; right: -1%; bottom: -.1em; color: #c9deef; }
  .page-hero { height: 165px; } /* 2026-10-14 200 → 165 */
  .page-hero__inner { padding-top: 16px; }
  .page-hero__title { margin-top: 18px; font-size: 26px; }
  .page-hero__lead { margin-top: 8px; font-size: 13px; letter-spacing: .04em; }
  .page-hero__lead br { display: none; }
  .page-intro { padding-top: 44px; }
  .page-intro p { font-size: 15px; line-height: 2; }
  .page-intro br { display: none; }
  .page-crumb { padding-top: 16px; }
  .breadcrumb__list { font-size: 12px; }
  .breadcrumb__list li + li::before { width: 6px; height: 9px; margin: 0 9px; }
  .breadcrumb__list { flex-wrap: nowrap; }
  .breadcrumb__list li { flex: 0 0 auto; white-space: nowrap; }
  .breadcrumb__list li[aria-current] { flex: 0 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; }

  .pagination { gap: 12px; margin-top: 44px; }
  .pagination__list { gap: 6px; }
  .pagination__num,
  .pagination__prev,
  .pagination__next { width: 40px; height: 40px; font-size: 16px; }
  .list-kagee { overflow: hidden; }
}


/* ==========================================================
   03. お店一覧（旧 shop-list.css）
   ========================================================== */

/* ==========================================================
   店舗一覧ページ（shop_list.html）
   - カンプ無し。トップ（SHOPセクション）と店舗詳細のトーンで構成
   - 配色・部品は style.css の変数と共通クラス（.btn / .container など）
   - ページヘッダー・パンくず・ページ送りは sub.css（下層共通）
   ========================================================== */

/* ----------------------------------------------------------
   カテゴリナビ：トップのSHOPと同じアイコンを使ったチップ
   ---------------------------------------------------------- */
.cat-nav {
  background: #fff;
  border-bottom: 1px solid #e3e9ee;
}
.cat-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding: 22px 0;
}
.cat-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--navy);
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.cat-nav__item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: filter .2s;
}
.cat-nav__item:hover,
.cat-nav__item.is-current {
  background: var(--navy);
  color: #fff;
}
.cat-nav__item:hover img,
.cat-nav__item.is-current img { filter: brightness(0) invert(1); }

/* ----------------------------------------------------------
   絞り込み：キーワード＋タグ
   ---------------------------------------------------------- */
.shop-filter {
  background: var(--bg-beige); /* 一覧と同じベージュ地（2026-10-07 ユーザー指示で薄水色帯をやめる） */
}
.shop-filter__inner {
  position: relative;
  display: grid;
  grid-template-columns: 440px 1fr;
  column-gap: 60px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 8px;
}

/* キーワード */
.shop-search__label,
.shop-tags__label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--navy);
}
.shop-tags__label small {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: #6d7b88;
}
.shop-search__box {
  display: flex;
  align-items: stretch;
  height: 52px;
  border: 1px solid var(--navy);
  background: #fff;
}
.shop-search__icon {
  align-self: center;
  flex: 0 0 auto;
  margin-left: 16px;
  color: var(--navy);
}
.shop-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 14px 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--navy);
}
.shop-search__input::placeholder { color: #8a9099; }
.shop-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.shop-search__input:focus-visible { box-shadow: inset 0 0 0 2px rgba(42, 73, 95, .25); }
.shop-search__btn {
  flex: 0 0 96px;
  margin: -1px -1px -1px 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: .2em;
  text-indent: .2em;
  transition: background .25s;
}
.shop-search__btn:hover { background: var(--navy-box); }

/* タグ */
.shop-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #c6d6e2;
  border-radius: 17px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.tag-chip:hover { border-color: var(--navy); }
.tag-chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* 条件をクリア */
.shop-filter__clear {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.shop-filter__clear::before {
  content: "×";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.shop-filter__clear:hover { opacity: .7; }

/* ----------------------------------------------------------
   一覧
   ---------------------------------------------------------- */
.shop-list { padding: 56px 0 0; }
.shop-list__empty {
  padding: 72px 20px;
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}
.shop-list__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--navy);
  color: var(--navy-dark);
}
.shop-list__count-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .08em;
}
.shop-list__count-num {
  margin-left: auto;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  color: var(--navy);
}
.shop-list__count-unit { font-size: 14px; font-weight: 700; }

.shop-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  margin-top: 40px;
}
.shop-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  color: var(--navy);
  transition: box-shadow .3s, transform .3s;
}
.shop-card__link:hover {
  box-shadow: 0 12px 30px rgba(42, 73, 95, .12);
  transform: translateY(-3px);
}
.shop-card__img {
  overflow: hidden;
  background: #e8edf1;
}
.shop-card__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s;
}
.shop-card__link:hover .shop-card__img img { transform: scale(1.04); }
.shop-card__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 44px;
}
.shop-card__cat {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid var(--navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--navy);
}
.shop-card__name {
  word-break: keep-all;      /* 語の途中で改行しない（長い語は下の指定で折る） */
  overflow-wrap: anywhere;
  word-break: auto-phrase;   /* 対応ブラウザ（Chrome等）では文節で改行 */
  margin-top: 14px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: .03em;
  color: var(--navy-dark);
}
.shop-card__catch {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--navy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.shop-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #6d7b88;
}
.shop-card__body .arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  transition: transform .25s;
  width: 22px;
  height: 10px;
  opacity: .75;
}
.shop-card__link:hover .arrow { transform: translateX(5px); }

/* ==========================================================
   タブレット（768〜1199px）
   ========================================================== */
@media (max-width: 1199px) {
  .cat-nav__list { padding: 16px 0; }
  .cat-nav__item { height: 40px; padding: 0 14px; font-size: 13px; }
  .shop-filter__inner { grid-template-columns: 1fr; row-gap: 24px; padding-top: 32px; padding-bottom: 0; }
  .shop-search { max-width: 520px; }
  .shop-list { padding-top: 40px; }
  .shop-cards { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; margin-top: 30px; }
  .shop-card__name { font-size: 19px; }
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767px) {

  /* カテゴリ：横スクロール */
  .cat-nav__list {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 14px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cat-nav__list::-webkit-scrollbar { display: none; }
  .cat-nav__list li { flex: 0 0 auto; }
  .cat-nav__list li:last-child { padding-right: var(--gutter); }
  .cat-nav__item { height: 38px; padding: 0 14px; font-size: 13px; gap: 6px; }
  .cat-nav__item img { width: 20px; height: 20px; }

  .shop-filter__inner { grid-template-columns: 1fr; row-gap: 20px; padding-top: 24px; padding-bottom: 0; }
  .shop-search__label, .shop-tags__label { margin-bottom: 8px; font-size: 13px; }
  .shop-tags__label small { display: block; margin: 6px 0 0; }
  .shop-search__box { height: 46px; }
  .shop-search__icon { width: 18px; height: 18px; margin-left: 12px; }
  .shop-search__input { padding: 0 10px; font-size: 14px; }
  .shop-search__btn { flex-basis: 72px; font-size: 14px; letter-spacing: .1em; text-indent: 0; }
  .shop-tags__list { gap: 6px; }
  .tag-chip { height: 30px; padding: 0 11px; font-size: 12px; }
  .shop-filter__clear { margin-top: 0; }
  .shop-list__empty { padding: 48px 10px; font-size: 14px; }
  .shop-card__tags { gap: 2px 8px; margin-top: 8px; font-size: 11px; }

  .shop-list { padding-top: 28px; }
  .shop-list__count { padding-bottom: 12px; }
  .shop-list__count-label { font-size: 17px; }
  .shop-list__count-num { font-size: 26px; }
  .shop-list__count-unit { font-size: 12px; }

  .shop-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
    margin-top: 20px;
  }
  .shop-card__body { padding: 12px 12px 16px; }
  .shop-card__cat { padding: 1px 0 1px 7px; border: 0; border-left: 2px solid var(--navy); font-size: 11px; line-height: 1.45; letter-spacing: 0; }
  .shop-card__name { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .shop-card__catch { margin-top: 6px; font-size: 12px; line-height: 1.6; }
  .shop-card__body .arrow { display: none; } /* SPはカード全体がリンクなので矢印は省略 */

}


/* ==========================================================
   04. お店詳細（旧 shop.css）
   ========================================================== */

/* ==========================================================
   店舗詳細ページ（shop_detail.html）
   - 配色は index.html（style.css の変数）に合わせる
     カンプの青帯 → ネイビー、薄青帯 → 薄水色、白地 → ベージュ
   - PC: 1600px幅カンプ基準（店舗個別ページ.png）
   ========================================================== */

/* ----------------------------------------------------------
   店舗ヘッダー
   ---------------------------------------------------------- */
.shop-hero {
  position: relative;
}
/* 帯（左2/3）：トップページMVと同じ模様入りの水色（2026-10-07 ユーザー指示でネイビーから変更）。
   高さ＝hero の下端（＝写真の下端）から 40px 上。2026-10-15 ユーザー指示で 70px → 40px に
   （カンプ実測は 56px 上だが、差が小さく実機で分かりにくいため少し下げている）。
   模様の大きさは下層ページヘッダー（sub.css）と揃える：1250px で頭打ち */
.shop-hero__band {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 40px;
  width: 67.5%;
  background: var(--bg-mv) url("images/mv_bg_pattern.jpg") left top / min(106.25vw, 1250px) auto repeat;
  /* カテゴリ英字の透かしは 2026-10-14 に廃止（単語の長さで切れ方がばらつくため） */
  pointer-events: none;
}
.shop-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 668fr 732fr;
  grid-template-areas:
    "crumb crumb"
    "card  photo";
  align-items: start;
}

/* パンくず */
.shop-hero .breadcrumb {
  grid-area: crumb;
  height: 95px; /* 帯の中でパンくずが占める高さ（写真の上端まで）。195 → 165 → 135 → 95（2026-10-14 英字の透かし廃止で詰める） */
  padding-top: 25px;
  color: var(--navy);
}
.shop-hero .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
/* 区切り：SVGのシェブロン（mask で文字色に追従） */
.shop-hero .breadcrumb__list li + li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 11px;
  margin: 0 16px;
  vertical-align: 1px;
  background: currentColor;
  opacity: .6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shop-hero .breadcrumb__list a { transition: opacity .2s; }
.shop-hero .breadcrumb__list a:hover { opacity: .7; }

/* 白いカード */
.shop-hero__card {
  grid-area: card;
  margin-top: 90px; /* 2026-10-14 130 → 90 */
  padding: 66px 40px 44px 43px;
  background: #fff;
}
.shop-hero__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.3;
  letter-spacing: .12em;
  color: var(--navy-dark);
}
.shop-hero__catch {
  margin-top: 26px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--navy-dark);
}
.shop-hero__text {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--navy);
  font-size: 15px;
  line-height: 2.1;
  color: var(--navy);
}
.shop-hero__text p + p { margin-top: 0; }

/* メイン写真 */
.shop-hero__photo {
  grid-area: photo;
  height: 617px;
}
.shop-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   店舗写真（サブ）
   ---------------------------------------------------------- */
.shop-gallery { margin-top: 93px; }
.shop-gallery__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
}
.shop-gallery__list img {
  width: 100%;
  aspect-ratio: 438 / 271;
  object-fit: cover;
}

/* ----------------------------------------------------------
   セクション見出し（おすすめの商品 / 店舗情報 / Google Map）
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   おすすめの商品
   ---------------------------------------------------------- */
.shop-recommend {
  margin-top: var(--sec);
  padding: var(--sec) 0;
  background: var(--bg-blue);
}
.shop-recommend__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 67px;
  margin-top: 46px;
}
.shop-item__img img {
  width: 100%;
  aspect-ratio: 667 / 412;
  object-fit: cover;
}
.shop-item__title {
  margin-top: 40px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.shop-item__text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--navy);
}

/* ----------------------------------------------------------
   店舗情報
   ---------------------------------------------------------- */
.shop-info { padding-top: var(--sec); }
.shop-info__table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 90px 43px 0;
  border-top: 1px solid var(--navy);
}
.shop-info__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  min-height: 70px;
  padding: 10px 40px;
  border-bottom: 1px solid var(--navy);
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy-dark);
}
.shop-info__row dt { font-weight: 700; }
.shop-info__row dd a { text-decoration: underline; text-underline-offset: 3px; transition: opacity .2s; }
.shop-info__row dd a:hover { opacity: .7; }

/* ----------------------------------------------------------
   Google Map
   ---------------------------------------------------------- */
.shop-map { padding-top: var(--sec); }
.shop-map__frame {
  margin-top: 60px;
  background: var(--bg-blue);
}
.shop-map__frame iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}
/* 地図の下の「Google Mapで見る」（index の .btn を流用・中央寄せ） */
.shop-map__btn {
  margin-top: 36px;
  text-align: center;
}

/* 影絵の帯 → フッター */
.shop-kagee { margin-top: var(--sec); }

/* ==========================================================
   タブレット（768〜1199px）
   ========================================================== */
@media (max-width: 1199px) {
  .shop-hero__band { width: 72%; }
  .shop-hero__inner { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .shop-hero .breadcrumb { height: 80px; }
  .shop-hero__card { margin-top: 90px; padding: 40px 30px 32px; }
  .shop-hero__name { font-size: 28px; letter-spacing: .08em; }
  .shop-hero__catch { font-size: 18px; }
  .shop-hero__text { margin-top: 28px; padding-top: 24px; font-size: 14px; }
  .shop-hero__text br { display: none; }
  .shop-hero__photo { align-self: stretch; height: auto; } /* 写真はカードの下端まで伸ばす（PCと同じ） */

  .shop-gallery { margin-top: 60px; }
  .shop-gallery__list { gap: 20px; }
  .shop-recommend__list { gap: 32px; margin-top: 32px; }
  .shop-item__title { margin-top: 24px; font-size: 19px; }
  .shop-item__text { font-size: 14px; }
  .shop-item__text br { display: none; }
  .shop-info__table { margin: 48px 0 0; }
  .shop-info__row { padding: 8px 16px; grid-template-columns: 90px 1fr; font-size: 14px; }
  .shop-map__frame { margin-top: 36px; }
  .shop-map__frame iframe { height: 380px; }
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767px) {
  /* 帯（全幅）→ パンくず → 写真（帯の下端に重なる）→ 白カード（写真の下端に重なる） */
  .shop-hero__band { width: 100%; bottom: auto; height: 198px; background-size: auto 520px; overflow: hidden; }
  .shop-hero__inner {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .shop-hero .breadcrumb {
    order: 1;
    height: auto;
    padding: 16px var(--gutter) 0;
  }
  .shop-hero .breadcrumb__list { font-size: 12px; }
  .shop-hero .breadcrumb__list li + li::before { width: 6px; height: 9px; margin: 0 9px; }

  .shop-hero__photo {
    order: 2;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 30px;
  }
  .shop-hero__card {
    order: 3;
    position: relative;
    margin: -40px var(--gutter) 0;
    padding: 28px 22px 24px;
  }
  .shop-hero__name { font-size: 24px; letter-spacing: .08em; }
  .shop-hero__catch { margin-top: 14px; font-size: 17px; }
  .shop-hero__text { margin-top: 22px; padding-top: 20px; font-size: 14px; line-height: 1.9; }
  .shop-hero__text br { display: none; }
  .shop-hero__text p + p { margin-top: 12px; }

  /* サブ写真：横スクロール */
  .shop-gallery { margin-top: 40px; }
  .shop-gallery__list {
    display: flex;
    gap: 12px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .shop-gallery__list::-webkit-scrollbar { display: none; }
  .shop-gallery__list li { flex: 0 0 72%; scroll-snap-align: start; }
  .shop-gallery__list li:last-child { margin-right: var(--gutter); }

  .shop-recommend__list { grid-template-columns: 1fr; gap: 36px; margin-top: 24px; }
  .shop-item__title { margin-top: 18px; font-size: 17px; }
  .shop-item__text { margin-top: 10px; font-size: 14px; line-height: 1.9; }
  .shop-item__text br { display: none; }

  .shop-info__table { grid-template-columns: 1fr; margin: 24px 0 0; }
  .shop-info__row { grid-template-columns: 84px 1fr; min-height: 54px; padding: 10px 6px; font-size: 14px; line-height: 1.6; }

  .shop-map__frame { margin-top: 20px; }
  .shop-map__frame iframe { height: 260px; }
  .shop-map__btn { margin-top: 24px; }
  .shop-map__btn .btn { display: flex; width: 100%; padding: 0 60px; }
  .shop-map__btn .btn .arrow { right: 24px; }
  .shop-kagee { overflow: hidden; }
}

/* 統合時の追加：下層共通（02）のパンくず指定がお店詳細に効かないよう、旧 shop.css 単独時の状態に戻す */
.shop-hero .breadcrumb__list li[aria-current] { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; }
@media (max-width: 767px) {
  .shop-hero .breadcrumb__list { flex-wrap: wrap; }
  .shop-hero .breadcrumb__list li { flex: initial; white-space: normal; }
  .shop-hero .breadcrumb__list li[aria-current] { flex: initial; min-width: auto; overflow: visible; }
}


/* ==========================================================
   05. トピックス（一覧・記事）（旧 topics.css）
   ========================================================== */

/* ==========================================================
   トピックス（topics_list.html / topics_detail.html）
   - カンプ無し。トップのTOPICSセクションと店舗一覧のトーンで構成
   - ページヘッダー・パンくず・ページ送りは sub.css
   - タグ色（.tag--blue/pink/green）は style.css
   ========================================================== */

/* ----------------------------------------------------------
   カテゴリナビ（白帯・色の丸付きチップ）
   ---------------------------------------------------------- */
.topics-nav {
  background: #fff;
  border-bottom: 1px solid #e3e9ee;
}
.topics-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding: 22px 0;
}
.topics-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--navy);
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.topics-nav__item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
}
.topics-nav__item[data-cat="info"]::before  { background: var(--tag-blue); }
.topics-nav__item[data-cat="event"]::before { background: var(--tag-pink); }
.topics-nav__item[data-cat="shop"]::before  { background: var(--tag-green); }
.topics-nav__item[data-cat=""]::before { display: none; }
.topics-nav__item:hover,
.topics-nav__item.is-current {
  background: var(--navy);
  color: #fff;
}

/* ----------------------------------------------------------
   一覧
   ---------------------------------------------------------- */
.topics-list { padding: 56px 0 0; }
.topics-list__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--navy);
  color: var(--navy-dark);
}
.topics-list__label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .08em;
}
.topics-list__num {
  margin-left: auto;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 34px;
  line-height: 1;
  color: var(--navy);
}
.topics-list__unit { font-size: 14px; font-weight: 700; }
.topics-list__empty {
  padding: 72px 20px;
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}

.topics-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  margin-top: 40px;
}
.t-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  color: var(--navy);
  transition: box-shadow .3s, transform .3s;
}
.t-card__link:hover {
  box-shadow: 0 12px 30px rgba(42, 73, 95, .12);
  transform: translateY(-3px);
}
.t-card__img {
  overflow: hidden;
  background: #e8edf1;
}
.t-card__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s;
}
.t-card__link:hover .t-card__img img { transform: scale(1.04); }
.t-card__body {
  position: relative;
  flex: 1 1 auto;
  padding: 22px 24px 44px;
}
.t-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.t-card__date {
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--text-date);
}
.t-card__meta .tag { min-width: 0; height: 26px; padding: 0 12px; font-size: 12px; }
.t-card__title {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.t-card__body .arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  transition: transform .25s;
  width: 22px;
  height: 10px;
  opacity: .75;
}
.t-card__link:hover .arrow { transform: translateX(5px); }

/* ----------------------------------------------------------
   記事
   ---------------------------------------------------------- */
.article { padding-top: 48px; }
.article__inner {
  max-width: 960px;
  margin: 0 auto;
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.article__date {
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--text-date);
}
.article__title {
  margin-top: 18px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .03em;
  color: var(--navy-dark);
}
.article__hero {
  margin-top: 40px;
  overflow: hidden;
}
.article__hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 本文（WP のエディタ出力を想定した要素スタイル） */
.article__body {
  margin-top: 48px;
  font-size: 16px;
  line-height: 2.1;
  color: var(--navy);
}
.article__body > * + * { margin-top: 1.6em; }
.article__body h2 {
  margin-top: 2.6em;
  padding: 6px 0 6px 20px;
  border-left: 4px solid var(--navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.article__body h3 {
  margin-top: 2em;
  padding-bottom: 8px;
  border-bottom: 1px solid #c1cfdc;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.article__body h2 + *,
.article__body h3 + * { margin-top: 1em; }
.article__body a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #7f99ad;
}
.article__body a:hover { text-decoration-color: var(--navy); }
.article__body ul,
.article__body ol { padding-left: 1.6em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li + li { margin-top: .4em; }
.article__body strong { font-weight: 700; color: var(--navy-dark); }
.article__body figure { margin: 2.2em 0; }
.article__body figure img { width: 100%; }
.article__body figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: #6d7b88;
}
.article__body blockquote {
  padding: 20px 28px;
  background: var(--bg-blue);
  border-left: 4px solid #c1cfdc;
}
.article__body .wp-block-table,
.article__body table { width: 100%; border-collapse: collapse; }
.article__body th,
.article__body td {
  padding: 12px 16px;
  border: 1px solid #c1cfdc;
  font-size: 15px;
  text-align: left;
  vertical-align: top;
}
.article__body th { background: var(--bg-blue); font-weight: 700; }

/* 情報ボックス（開催概要など） */
.article__box {
  padding: 28px 32px;
  background: #fff;
}
.article__box dl { display: grid; grid-template-columns: 6em 1fr; gap: 8px 20px; }
.article__box dt { font-weight: 700; color: var(--navy-dark); }
.article__box dd { margin: 0; }

/* シェア */
.article__share {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid #c1cfdc;
}
.article__share-label {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .1em;
  color: var(--navy);
}
.article__share-list { display: flex; gap: 10px; }
.article__share-list a,
.article__share-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  transition: background .2s, color .2s;
}
.article__share-list a:hover,
.article__share-list button:hover { background: var(--navy); color: #fff; }
.article__share-copied {
  font-size: 13px;
  color: var(--navy);
  opacity: 0;
  transition: opacity .3s;
}
.article__share-copied.is-shown { opacity: 1; }

/* 前後の記事 */
.article__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
}
.article__nav-link {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 110px;
  padding: 22px 28px;
  color: var(--navy);
  transition: background .2s;
}
.article__nav-link:hover { background: #fff; }
.article__nav-link--prev { border-right: 1px solid #c1cfdc; }
.article__nav-link--next { justify-content: flex-end; text-align: right; }
/* 前後の記事：パンくず・ページ送りと同じSVGシェブロン */
.article__nav-link--prev::before,
.article__nav-link--next::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 15px;
  background: currentColor;
  transition: transform .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cpath d='M1 1l4.5 4.5L1 10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article__nav-link--prev::before { transform: scaleX(-1); }
.article__nav-link--prev:hover::before { transform: scaleX(-1) translateX(3px); }
.article__nav-link--next:hover::after { transform: translateX(3px); }
.article__nav-dir {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #6d7b88;
}
.article__nav-title {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.article__back { margin-top: 48px; text-align: center; }

/* 関連トピックス */
.related { padding-top: 110px; }
.related__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: .08em;
  color: var(--navy-dark);
}
.related__title small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  color: #6d7b88;
}
.related .topics-cards { margin-top: 36px; }

/* ==========================================================
   タブレット（768〜1199px）
   ========================================================== */
@media (max-width: 1199px) {
  .topics-nav__list { padding: 16px 0; }
  .topics-nav__item { height: 40px; padding: 0 16px; font-size: 13px; }
  .topics-list { padding-top: 40px; }
  .topics-cards { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; margin-top: 30px; }
  .article { padding-top: 40px; }
  .article__title { font-size: 28px; }
  .article__hero { margin-top: 28px; }
  .article__body { margin-top: 36px; font-size: 15px; }
  .article__body h2 { font-size: 21px; }
  .article__body h3 { font-size: 18px; }
  .related { padding-top: 80px; }
  .related__title { font-size: 24px; }
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767px) {
  /* カテゴリ：横スクロール */
  .topics-nav__list {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 14px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topics-nav__list::-webkit-scrollbar { display: none; }
  .topics-nav__list li { flex: 0 0 auto; }
  .topics-nav__list li:last-child { padding-right: var(--gutter); }
  .topics-nav__item { height: 38px; padding: 0 14px; font-size: 13px; gap: 8px; }
  .topics-nav__item::before { width: 8px; height: 8px; }

  .topics-list { padding-top: 28px; }
  .topics-list__head { padding-bottom: 12px; }
  .topics-list__label { font-size: 17px; }
  .topics-list__num { font-size: 26px; }
  .topics-list__unit { font-size: 12px; }
  .topics-list__empty { padding: 48px 10px; font-size: 14px; }

  /* カード：写真左・テキスト右（トップのTOPICS 2・3件目と同じ形） */
  .topics-cards { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .t-card__link { flex-direction: row; }
  /* サムネイルは 4:3 の枠に固定し、カードの高さを全記事でそろえる */
  .t-card__link { align-items: stretch; height: 112px; }
  .t-card__img { position: relative; flex: 0 0 150px; height: 100%; }
  .t-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .t-card__body { display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 12px 16px; }
  .t-card__meta { gap: 10px; }
  .t-card__date { font-size: 12px; }
  .t-card__meta .tag { height: 22px; padding: 0 8px; font-size: 11px; }
  .t-card__title { margin-top: 8px; font-size: 14px; line-height: 1.55; }
  .t-card__body .arrow { display: none; } /* SPはカード全体がリンクなので矢印は省略 */

  .article { padding-top: 24px; }
  .article__meta { gap: 12px; }
  .article__date { font-size: 13px; }
  .article__title { margin-top: 12px; font-size: 22px; line-height: 1.5; }
  .article__hero { margin: 20px calc(var(--gutter) * -1) 0; }
  .article__body { margin-top: 28px; font-size: 15px; line-height: 1.9; }
  .article__body h2 { padding-left: 14px; font-size: 19px; }
  .article__body h3 { font-size: 17px; }
  .article__body blockquote { padding: 16px 18px; }
  .article__box { padding: 18px 18px; }
  .article__box dl { grid-template-columns: 5em 1fr; gap: 6px 12px; font-size: 14px; }
  .article__share { gap: 14px; margin-top: 44px; padding-top: 20px; }
  .article__share-list a, .article__share-list button { width: 40px; height: 40px; }
  .article__nav { grid-template-columns: 1fr; margin-top: 36px; }
  .article__nav-link { min-height: 0; padding: 16px 12px; gap: 12px; }
  .article__nav-link--prev { border-right: 0; border-bottom: 1px solid #c1cfdc; }
  .article__nav-title { font-size: 14px; }
  .article__back { margin-top: 32px; }
  .article__back .btn { display: flex; width: 100%; padding: 0 60px; }
  .article__back .btn .arrow { right: 24px; }
  .related { padding-top: 64px; }
  .related__title { font-size: 21px; }
  .related__title small { font-size: 12px; }
  .related .topics-cards { margin-top: 20px; }
}


/* ==========================================================
   06. 「しんきた」とは（旧 about.css）
   ========================================================== */

/* ==========================================================
   しんきたとは（about.html）
   - カンプ `しんきたとは.jpg`（1600×5163）を元に構成。キャラクター紹介は除外
   - 「基本情報」「SNS」はコンテンツ提案として追加
   - ページヘッダー・パンくずは sub.css
   ========================================================== */

.about-text {
  font-size: 15px;
  line-height: 2.1;
  color: var(--navy);
}
.about-text p + p { margin-top: 1.4em; }
.about-lead {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}

/* ----------------------------------------------------------
   1. 通称「しんきた」
   ---------------------------------------------------------- */
.ab-intro { padding: var(--sec) 0; }
.ab-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 726px;
  column-gap: 80px;
  align-items: center;
}
.ab-intro .about-text { margin-top: 48px; }
.ab-intro__img img {
  width: 100%;
  aspect-ratio: 726 / 446;
  object-fit: cover;
}

/* ----------------------------------------------------------
   3. 基本情報（提案）
   ---------------------------------------------------------- */
.ab-data {
  margin-top: var(--sec);
  padding: 80px 0 90px;
  background: var(--bg-blue);
}
.ab-data__inner {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  column-gap: 80px;
  align-items: start;
}
.ab-data__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--navy-dark);
}
.ab-data__title small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  color: #6d7b88;
}
.ab-data__list {
  border-top: 1px solid var(--navy);
}
.ab-data__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 24px;
  padding: 18px 8px;
  border-bottom: 1px solid var(--navy);
  font-size: 15px;
  line-height: 1.8;
  color: var(--navy-dark);
}
.ab-data__row dt { font-weight: 700; }
.ab-data__row dd a { text-decoration: underline; text-underline-offset: 3px; }
.ab-data__row dd a:hover { opacity: .7; }

/* ----------------------------------------------------------
   3. 3つの魅力
   ---------------------------------------------------------- */
.ab-points { padding: var(--sec) 0 0; }
.ab-points__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 70px;
}
/* リンクを各カードの下端にそろえる */
.ab-point { display: flex; flex-direction: column; }
.ab-point__text { flex: 1 1 auto; }
.ab-point__head {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--navy-dark);
}
.ab-point__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--navy-dark);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
}
.ab-point__img {
  margin-top: 44px;
  overflow: hidden;
}
.ab-point__img img {
  width: 100%;
  aspect-ratio: 440 / 290;
  object-fit: cover;
}
.ab-point__text {
  margin-top: 30px;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}
.ab-point__link {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.ab-point__link .text-link { font-size: 17px; }

/* ----------------------------------------------------------
   4. ちょっと楽しい日（年中行事）
   ---------------------------------------------------------- */
.ab-days { padding: var(--sec) 0 0; }
.ab-days .about-lead { margin-top: 36px; }
.ab-days__list { margin-top: 80px; }
.ab-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 726px;
  grid-template-areas: "body img";
  column-gap: 100px;
  align-items: center;
}
.ab-day + .ab-day { margin-top: 110px; }
.ab-day:nth-child(even) {
  grid-template-columns: 726px minmax(0, 1fr);
  grid-template-areas: "img body";
}
.ab-day__img { grid-area: img; overflow: hidden; }
.ab-day__img img {
  width: 100%;
  aspect-ratio: 726 / 446;
  object-fit: cover;
}
/* 正方形のポスター画像など、上側を優先して見せたいとき */
.ab-day__img--top img { object-position: center top; }
.ab-day__body { grid-area: body; }
.ab-day__season {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tag-blue);
}
.ab-day__season::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--tag-blue);
}
.ab-day__title {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--navy-dark);
}
.ab-day__text {
  margin-top: 32px;
  font-size: 15px;
  line-height: 2.1;
  color: var(--navy);
}
.ab-days__btn { margin-top: 90px; text-align: center; }

/* ----------------------------------------------------------
   5. SNS（提案）
   ---------------------------------------------------------- */
.ab-sns {
  padding: var(--sec) 0;
  text-align: center;
}
.ab-sns__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--navy-dark);
}
.ab-sns__text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}
.ab-sns__list {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.ab-sns__list a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 26px;
  border: 1px solid var(--navy);
  border-radius: 28px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  transition: background .2s, color .2s;
}
.ab-sns__list a:hover { background: var(--navy); color: #fff; }

/* 影絵の帯 */
.ab-kagee { margin-top: 0; }

/* ==========================================================
   タブレット（768〜1199px）
   ========================================================== */
@media (max-width: 1199px) {
  .ab-intro__inner { grid-template-columns: minmax(0, 1fr) 46%; column-gap: 40px; }
  .ab-intro .about-text { margin-top: 28px; }
  .ab-data { padding: 56px 0 64px; }
  .ab-data__inner { grid-template-columns: 1fr; row-gap: 28px; }
  .ab-data__title { font-size: 26px; }
  .ab-data__row { grid-template-columns: 130px 1fr; padding: 14px 4px; font-size: 14px; }
  .ab-points__list { gap: 24px; margin-top: 44px; }
  .ab-point__head { gap: 10px; font-size: 18px; letter-spacing: 0; }
  .ab-point__num { width: 40px; height: 40px; font-size: 17px; }
  .ab-point__img { margin-top: 28px; }
  .ab-point__text { margin-top: 20px; font-size: 14px; }
  .ab-point__link { margin-top: 20px; }
  .ab-days__list { margin-top: 48px; }
  .ab-day, .ab-day:nth-child(even) { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ab-day + .ab-day { margin-top: 72px; }
  .ab-day__title { font-size: 28px; }
  .ab-day__text { margin-top: 20px; font-size: 14px; }
  .ab-days__btn { margin-top: 64px; }
  .ab-sns__title { font-size: 24px; }
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767px) {
  .about-text { font-size: 14px; line-height: 1.95; }
  .about-text br { display: none; }
  .about-lead { margin-top: 14px; font-size: 14px; line-height: 1.9; }

  .ab-intro__inner { grid-template-columns: 1fr; row-gap: 24px; }
  /* 2026-10-15 ユーザー指示：SPは本文が先、写真は下 */
  .ab-intro__img { margin: 0 calc(var(--gutter) * -1); }
  .ab-intro .about-text { margin-top: 18px; }

  .ab-data { padding: 44px 0 48px; }
  .ab-data__inner { grid-template-columns: 1fr; row-gap: 20px; }
  .ab-data__title { font-size: 22px; }
  .ab-data__title small { font-size: 12px; }
  .ab-data__row { grid-template-columns: 1fr; row-gap: 4px; padding: 12px 2px; font-size: 14px; line-height: 1.7; }
  .ab-data__row dt { font-size: 13px; color: var(--navy); }

  .ab-points__list { grid-template-columns: 1fr; gap: 40px; margin-top: 28px; }
  .ab-point__head { gap: 12px; font-size: 19px; }
  .ab-point__num { width: 40px; height: 40px; font-size: 17px; }
  .ab-point__img { margin-top: 18px; }
  .ab-point__text { margin-top: 16px; font-size: 14px; line-height: 1.9; }
  .ab-point__link { margin-top: 14px; }
  .ab-point__link .text-link { font-size: 15px; }

  .ab-days .about-lead { margin-top: 16px; }
  .ab-days__list { margin-top: 36px; }
  .ab-day, .ab-day:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "body";
    row-gap: 20px;
  }
  .ab-day + .ab-day { margin-top: 48px; }
  .ab-day__img { margin: 0 calc(var(--gutter) * -1); }
  .ab-day__season { font-size: 12px; }
  .ab-day__title { margin-top: 10px; font-size: 24px; }
  .ab-day__text { margin-top: 14px; font-size: 14px; line-height: 1.9; }
  .ab-day__text br { display: none; }
  .ab-days__btn { margin-top: 40px; }
  .ab-days__btn .btn { display: flex; width: 100%; padding: 0 60px; }
  .ab-days__btn .btn .arrow { right: 24px; }

  .ab-sns__title { font-size: 20px; }
  .ab-sns__text { margin-top: 10px; font-size: 13px; }
  .ab-sns__text br { display: none; }
  .ab-sns__list { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .ab-sns__list a { justify-content: center; height: 50px; }
}

/* ==========================================================
   2. キャラクター紹介（2026-10-08 レイアウト再設計）
   - キャラクターを主役に、アーチ型の白い舞台に乗せる
   - 篠原先生は「キャラクターデザイン」のクレジットとして下段の横長カード
   ========================================================== */
.ab-chara { padding: var(--sec) 0; background: var(--bg-blue); }
.ab-chara__main {
  display: grid;
  grid-template-columns: 640px minmax(0, 1fr);
  column-gap: 90px;
  align-items: center;
}
/* トップのABOUT・GUIDEと同じアーチ型 */
.ab-chara__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 640 / 560;
  padding: 0 40px 48px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
}
.ab-chara__stage img { width: 100%; max-width: 540px; height: auto; }
.ab-chara__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .16em;
  color: var(--tag-blue);
}
.ab-chara__body .about-title { margin-top: 0; }
.ab-chara__body .about-text { margin-top: 36px; }

.artist { margin-top: 90px; }
.artist__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--navy);
}
.artist__label::after { content: ""; flex: 1 1 auto; height: 1px; background: #c1cfdc; }
.artist__card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 56px;
  margin-top: 24px;
  padding: 48px 56px;
  background: #fff;
}
.artist__head { text-align: center; }
.artist__portrait {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border: 1px solid #dfe6ec;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.artist__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.artist__name {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: .1em;
  color: var(--navy-dark);
}
.artist__name small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
  color: #6d7b88;
}
.artist__bio { font-size: 15px; line-height: 2; color: var(--navy); }
.artist__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 48px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #dfe6ec;
}
.artist__history,
.artist__history dd { margin: 0; }
.artist__history div {
  display: grid;
  grid-template-columns: 8em 1fr;
  column-gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dotted #c1cfdc;
  font-size: 14px;
  line-height: 1.7;
  color: var(--navy-dark);
}
.artist__history dt { font-weight: 700; color: var(--tag-blue); }
.artist__titles { display: flex; flex-direction: column; gap: 10px; }
.artist__titles li {
  padding: 10px 16px;
  background: var(--bg-blue);
  border-left: 3px solid var(--navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy-dark);
}

@media (max-width: 1199px) {
  .ab-chara__main { grid-template-columns: 46% minmax(0, 1fr); column-gap: 44px; }
  .ab-chara__body .about-text { margin-top: 24px; }
  .artist { margin-top: 60px; }
  .artist__card { grid-template-columns: 160px minmax(0, 1fr); column-gap: 32px; padding: 36px 32px; }
  .artist__portrait { width: 140px; height: 140px; }
  .artist__name { font-size: 22px; }
  .artist__bio { font-size: 14px; }
  .artist__cols { grid-template-columns: 1fr; row-gap: 20px; }
}
@media (max-width: 767px) {
  .ab-chara__main { grid-template-columns: 1fr; row-gap: 28px; }
  .ab-chara__body { order: -1; }
  .ab-chara__en { font-size: 14px; }
  .ab-chara__body .about-title { margin-top: 8px; }
  .ab-chara__body .about-text { margin-top: 16px; }
  .ab-chara__stage { padding: 0 20px 24px; }
  .artist { margin-top: 40px; }
  .artist__label { font-size: 13px; }
  .artist__card { grid-template-columns: 1fr; row-gap: 24px; margin-top: 16px; padding: 28px 20px; }
  .artist__head { display: flex; align-items: center; gap: 18px; text-align: left; }
  .artist__portrait { flex: 0 0 96px; width: 96px; height: 96px; margin: 0; }
  .artist__name { margin-top: 0; font-size: 21px; }
  .artist__bio { font-size: 13.5px; line-height: 1.9; }
  .artist__cols { margin-top: 20px; padding-top: 20px; }
  .artist__history div { grid-template-columns: 7.5em 1fr; font-size: 13px; }
  .artist__titles li { font-size: 13px; padding: 9px 12px; }
}


/* ==========================================================
   07. 心斎橋今昔（旧 history.css）
   ========================================================== */

/* ==========================================================
   心斎橋今昔（history.html）
   - カンプ `心斎橋筋今昔.jpg`（1600×5525）を元に、ページヘッダーは
     他の下層ページと共通（sub.css の page-hero）に置き換え
   - 配色：ベージュ地 / 薄水色帯（bg-blue）/ 白カード
   ========================================================== */

/* 共通：セクション見出し（明朝・大） */
.hist-text {
  font-size: 15px;
  line-height: 2.1;
  color: var(--navy);
}
.hist-text p + p { margin-top: 1.4em; }

/* ----------------------------------------------------------
   1. 橋からはじまり、商いの街へ
   ---------------------------------------------------------- */
.hist-intro { padding: var(--sec) 0; }
.hist-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 762px;
  column-gap: 80px;
  align-items: start;
}
.hist-intro .hist-title { margin-top: 20px; }
.hist-intro .hist-text { margin-top: 44px; }
.hist-intro__img img { width: 100%; }

/* ----------------------------------------------------------
   2. 心斎橋を照らした、文明開化の灯り（薄水色帯）
   ---------------------------------------------------------- */
.hist-meiji {
  padding: var(--sec) 0;
  background: var(--bg-blue);
}
.hist-meiji__inner {
  display: grid;
  grid-template-columns: 548px minmax(0, 1fr);
  column-gap: 120px;
  align-items: start;
}
.hist-meiji__img img { width: 100%; }
.hist-meiji__label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .08em;
  color: var(--tag-blue);
}
.hist-meiji .hist-title { margin-top: 18px; }
.hist-meiji .hist-text { margin-top: 44px; }

/* ----------------------------------------------------------
   3. ガス灯の系譜（年表）
   ---------------------------------------------------------- */
.hist-timeline { padding: var(--sec) 0 60px; }
.hist-timeline__title {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--navy-dark);
}
.hist-timeline__title::before,
.hist-timeline__title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--navy);
}
.tl-list { margin-top: 100px; }
.tl-item {
  display: grid;
  grid-template-columns: 367px 180px minmax(0, 1fr);
  column-gap: 0;
  align-items: center;
  padding-left: 73px;
}
/* 写真どうしが縦につながって見えないよう上下に余白（縦罫線は切らさない） */
.tl-item__img { margin: 30px 0; }
.tl-item__img img {
  width: 100%;
  aspect-ratio: 367 / 226;
  object-fit: cover;
}
.tl-item__year {
  padding-left: 60px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--tag-blue);
}
.tl-item__body {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 60px 50px 66px;
  border-left: 1px solid transparent; /* 罫線の位置ぶんの幅は確保したまま、線は ::after で引く */
}
/* 縦罫線（上下端は写真の高さに合わせて止める） */
.tl-item__body::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tag-blue);
}
.tl-item:first-child .tl-item__body::after { top: 30px; }
.tl-item:last-child .tl-item__body::after { bottom: 30px; }
/* 年の横の丸 */
.tl-item__body::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--tag-blue);
}
.tl-item__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.tl-item__text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}

/* ----------------------------------------------------------
   4. 2026年完成（薄水色のボックス）
   ---------------------------------------------------------- */
.hist-new { padding: 80px 0 0; }
.hist-new__box {
  padding: 90px 136px 105px;
  background: var(--bg-blue);
}
.hist-new__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-align: center;
  color: var(--navy-dark);
}
.hist-new__img {
  margin-top: 56px;
  overflow: hidden;
}
.hist-new__img img {
  width: 100%;
  aspect-ratio: 1128 / 520;
  object-fit: cover;
}
.hist-new .hist-text { margin-top: 56px; }

/* ----------------------------------------------------------
   5. もっと知る・もっと楽しむ
   ---------------------------------------------------------- */
.hist-more { padding: var(--sec) 0 0; }
.more-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.more-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  overflow: hidden;
  color: var(--navy);
  transition: box-shadow .3s, transform .3s;
}
.more-card__link:hover {
  box-shadow: 0 12px 30px rgba(42, 73, 95, .12);
  transform: translateY(-3px);
}
.more-card__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e8edf1;
}
.more-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.more-card__link:hover .more-card__img img { transform: scale(1.04); }
/* 画像未定の仮置き：模様地にロゴマーク */
.more-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-mv) url("images/mv_bg_pattern.jpg") center / 80% auto repeat;
}
.more-card__img--placeholder img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: .45;
}
.more-card__body {
  position: relative;
  flex: 1 1 auto;
  padding: 28px 26px 72px;
}
.more-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.more-card__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--navy);
}
.more-card__arrow {
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  color: var(--navy);
  transition: background .25s, color .25s;
}
.more-card__arrow svg { width: 16px; height: 8px; }
.more-card__link:hover .more-card__arrow { background: var(--navy); color: #fff; }

/* ==========================================================
   タブレット（768〜1199px）
   ========================================================== */
@media (max-width: 1199px) {
  .hist-intro__inner { grid-template-columns: minmax(0, 1fr) 46%; column-gap: 40px; }
  .hist-intro .hist-text { margin-top: 28px; }
  .hist-meiji__inner { grid-template-columns: 42% minmax(0, 1fr); column-gap: 48px; }
  .hist-meiji__label { font-size: 17px; }
  .hist-meiji .hist-text { margin-top: 28px; }
  .hist-timeline { padding: var(--sec) 0 40px; }
  .hist-timeline__title { font-size: 26px; gap: 16px; }
  .tl-list { margin-top: 60px; }
  .tl-item { grid-template-columns: 30% 120px minmax(0, 1fr); padding-left: 0; }
  .tl-item__year { padding-left: 28px; font-size: 34px; }
  .tl-item__body { padding: 36px 20px 36px 40px; }
  .tl-item__title { font-size: 20px; }
  .tl-item__text { font-size: 14px; }
  .hist-new { padding-top: 56px; }
  .hist-new__box { padding: 56px 48px 64px; }
  .hist-new__title { font-size: 28px; }
  .hist-new__img { margin-top: 36px; }
  .hist-new .hist-text { margin-top: 36px; }
  .more-cards { gap: 24px; margin-top: 36px; }
  .more-card__body { padding: 22px 20px 64px; }
  .more-card__title { font-size: 18px; }
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767px) {
  .hist-text { font-size: 14px; line-height: 1.95; }
  .hist-text br { display: none; }

  .hist-intro__inner { grid-template-columns: 1fr; row-gap: 28px; }
  .hist-intro .hist-title { margin-top: 0; }
  .hist-intro .hist-text { margin-top: 20px; }
  .hist-intro__img { order: -1; }

  .hist-meiji__inner { grid-template-columns: 1fr; row-gap: 24px; }
  .hist-meiji__label { font-size: 15px; }
  .hist-meiji .hist-title { margin-top: 10px; }
  .hist-meiji .hist-text { margin-top: 20px; }

  .hist-timeline { padding: var(--sec) 0 24px; }
  /* SPは左右の罫線をやめ、中央揃え＋下に短い罫線 */
  .hist-timeline__title { display: block; font-size: 20px; letter-spacing: .06em; text-align: center; }
  .hist-timeline__title::before { display: none; }
  .hist-timeline__title::after { display: block; width: 48px; height: 1px; margin: 16px auto 0; }
  .tl-list { margin-top: 36px; }
  .tl-item {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "body";
    padding-left: 0;
  }
  /* SPは写真と本文が交互に並ぶので上下の余白は不要 */
  .tl-item__img { grid-area: img; margin: 0; }
  .tl-item:first-child .tl-item__body::after { top: 0; }
  .tl-item:last-child .tl-item__body::after { bottom: 0; }
  .tl-item__year {
    grid-area: body;
    align-self: start;
    padding: 24px 0 0 34px;
    font-size: 28px;
  }
  .tl-item__body {
    grid-area: body;
    margin-left: 10px;
    padding: 64px 0 40px 24px;
  }
  .tl-item__body::before { top: 30px; margin-top: 0; }
  .tl-item__title { font-size: 18px; }
  .tl-item__text { margin-top: 10px; font-size: 14px; line-height: 1.9; }
  .tl-item:last-child .tl-item__body { padding-bottom: 8px; }

  .hist-new { padding-top: 40px; }
  .hist-new__box { margin: 0 calc(var(--gutter) * -1); padding: 44px var(--gutter) 48px; }
  .hist-new__title { font-size: 21px; }
  .hist-new__img { margin: 28px 0 0; }
  .hist-new__img img { aspect-ratio: 4 / 3; }
  .hist-new .hist-text { margin-top: 24px; }

  .more-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .more-card__link { flex-direction: row; }
  .more-card__img { flex: 0 0 38%; aspect-ratio: auto; }
  .more-card__img--placeholder img { width: 44px; height: 44px; }
  .more-card__body { padding: 16px 14px 52px; }
  .more-card__title { font-size: 15px; }
  .more-card__text { margin-top: 6px; font-size: 12px; line-height: 1.7; }
  .more-card__arrow { right: 12px; bottom: 10px; width: 34px; height: 34px; }
  .more-card__arrow svg { width: 20px; height: 9px; }
}


/* ==========================================================
   08. 観光者向けガイド（旧 guide.css）
   ========================================================== */

/* ==========================================================
   観光者向けガイド（guide.html）
   - カンプ `観光者向けガイド.jpg`（1600×5137）を元に構成
   - ページヘッダー・パンくずは sub.css（カンプのMVは再現しない）
   - 周辺スポット・観光客へのお願いの内容はこちらで作成
   ========================================================== */

.guide-lead {
  margin-top: 28px;
  font-size: 15px;
  line-height: 2;
  color: var(--navy);
}
.guide-sec { padding-top: var(--sec); scroll-margin-top: 100px; }

/* ----------------------------------------------------------
   ページ内ナビ
   ---------------------------------------------------------- */
.guide-nav { background: #fff; border-bottom: 1px solid #e3e9ee; }
.guide-nav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.guide-nav__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 76px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy);
  transition: background .2s;
}
.guide-nav__list li + li a { border-left: 1px solid #e3e9ee; }
.guide-nav__list a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.guide-nav__list a:hover { background: var(--bg-blue); }

/* ----------------------------------------------------------
   パンフレット
   ---------------------------------------------------------- */
.pamph-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 60px;
}
.pamph {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  padding: 32px;
  background: #fff;
}
.pamph__img { box-shadow: 0 6px 18px rgba(42, 73, 95, .12); }
.pamph__img img { width: 100%; aspect-ratio: 800 / 494; object-fit: cover; }
.pamph__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.pamph__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--navy);
}
.pamph__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.pamph__langs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--navy);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  transition: background .2s, color .2s;
}
.pamph__langs a::before {
  content: "PDF";
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .06em;
  opacity: .7;
}
.pamph__langs a:hover { background: var(--navy); color: #fff; }
.pamph-note {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.8;
  color: #6d7b88;
}

/* ----------------------------------------------------------
   周辺観光スポット
   ---------------------------------------------------------- */
.spot-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.spot__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  overflow: hidden;
  color: var(--navy);
  transition: box-shadow .3s, transform .3s;
}
.spot__link:hover { box-shadow: 0 12px 30px rgba(42, 73, 95, .12); transform: translateY(-3px); }
.spot__img { overflow: hidden; }
.spot__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.spot__link:hover .spot__img img { transform: scale(1.04); }
.spot__body { position: relative; flex: 1 1 auto; padding: 24px 24px 70px; }
.spot__area {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}
.spot__name {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.spot__text { margin-top: 8px; font-size: 14px; line-height: 1.9; }
.spot__map {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  color: #6d7b88;
}
.spot__arrow {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  transition: background .25s, color .25s;
}
.spot__arrow svg { width: 16px; height: 8px; }
.spot__link:hover .spot__arrow { background: var(--navy); color: #fff; }

/* ----------------------------------------------------------
   アクセス
   ---------------------------------------------------------- */
.access__train {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 680px;
  column-gap: 80px;
  align-items: start;
  margin-top: 60px;
}
.access__h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--navy-dark);
}
.route { padding: 32px 0; border-bottom: 1px solid #c1cfdc; }
.route:last-child { border-bottom: 0; }
.route__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.route__from { font-size: 21px; font-weight: 700; color: var(--navy-dark); }
.route__line { font-size: 14px; color: var(--navy); }
.route__point {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-dark);
}
.route__point em {
  font-style: normal;
  padding: 0 4px;
  background: linear-gradient(transparent 62%, #d9e9f2 62%);
}
.route__text { margin-top: 14px; font-size: 14px; line-height: 2; color: var(--navy); }
.access__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 680 / 620;
  border: 0;
  background: var(--bg-blue);
}
.access__maplink { margin-top: 14px; text-align: center; }

.access__more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  margin-top: 80px;
}
.area-list { margin-top: 24px; border-top: 1px solid #c1cfdc; }
.area-list > div {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid #c1cfdc;
}
.area-list dt { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--navy-dark); }
.area-list dd { margin: 0; font-size: 14px; line-height: 1.9; color: var(--navy); }
.air { margin-top: 24px; }
.air__item + .air__item { margin-top: 28px; }
.air__name { font-size: 18px; font-weight: 700; color: var(--navy-dark); }
.air__text { margin-top: 8px; font-size: 14px; line-height: 1.9; color: var(--navy); }
.access__car { margin-top: 48px; padding: 28px 32px; background: var(--bg-blue); }
.access__car .access__h3 { font-size: 20px; }
.access__note { margin-top: 10px; font-size: 13px; line-height: 1.8; color: #6d7b88; }

/* ----------------------------------------------------------
   観光客へのお願い（薄水色帯）
   ---------------------------------------------------------- */
.manner {
  margin-top: var(--sec);
  padding: var(--sec) 0;
  background: var(--bg-blue);
}
.manner .guide-lead small { display: block; margin-top: 6px; font-size: 13px; color: #6d7b88; }
.manner-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.manner-item {
  padding: 32px 24px 30px;
  background: #fff;
  text-align: center;
}
.manner-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--bg-blue);
  color: var(--navy);
}
.manner-item__icon svg { fill: none; }
.manner-item__title {
  margin-top: 20px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-dark);
}
.manner-item__en {
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--tag-blue);
}
.manner-item__text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  text-align: left;
  color: var(--navy);
}

.emergency {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 40px;
  align-items: center;
  margin-top: 56px;
  padding: 32px 40px;
  background: #fff;
  border: 1px solid var(--navy);
}
.emergency__title { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--navy-dark); }
.emergency__title small { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--tag-blue); }
.emergency__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.emergency__list div { padding-left: 16px; border-left: 3px solid var(--navy); }
.emergency__list dt { font-size: 13px; font-weight: 700; color: var(--navy); }
.emergency__list dd { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--navy); }
.emergency__list dd strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy-dark);
}

.guide-kagee { margin-top: 0; background: var(--bg-blue); } /* 上のマナー欄と同じ水色地に（ベージュだと影絵の帯だけ浮いて見える） */

/* ==========================================================
   タブレット（768〜1199px）
   ========================================================== */
@media (max-width: 1199px) {
  .guide-nav__list a { height: 64px; font-size: 14px; }
  .pamph-list { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .spot-list { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
  .access__train { grid-template-columns: 1fr; row-gap: 32px; margin-top: 40px; }
  .access__more { grid-template-columns: 1fr; row-gap: 56px; margin-top: 56px; }
  .manner-list { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .emergency { grid-template-columns: 1fr; row-gap: 20px; }
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (max-width: 767px) {
  .guide-lead { margin-top: 16px; font-size: 14px; line-height: 1.9; }
  .guide-lead br { display: none; }
  .guide-sec { scroll-margin-top: 70px; }

  .guide-nav__list { grid-template-columns: 1fr 1fr; }
  .guide-nav__list a { height: 52px; font-size: 13px; gap: 8px; }
  .guide-nav__list li:nth-child(3) a { border-left: 0; }
  .guide-nav__list li:nth-child(n+3) a { border-top: 1px solid #e3e9ee; }

  .pamph { grid-template-columns: 1fr; row-gap: 18px; padding: 20px; }
  .pamph__title { font-size: 18px; }
  .pamph__langs a { height: 34px; padding: 0 12px; }

  .spot-list { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .spot__link { flex-direction: row; }
  .spot__img { flex: 0 0 38%; }
  .spot__img img { height: 100%; aspect-ratio: auto; }
  .spot__body { padding: 14px 14px 36px; }
  .spot__area { font-size: 11px; padding: 3px 8px; }
  .spot__name { margin-top: 8px; font-size: 16px; }
  .spot__text { font-size: 12px; line-height: 1.7; }
  .spot__map { left: 14px; bottom: 14px; font-size: 11px; }
  .spot__arrow { display: none; } /* SPはカード全体がリンクなので矢印は省略 */

  .access__h3 { font-size: 21px; }
  .route { padding: 22px 0; }
  .route__from { font-size: 18px; }
  .route__line { font-size: 12px; }
  .route__point { font-size: 15px; }
  .route__text { font-size: 13.5px; line-height: 1.9; }
  .access__map { margin: 0 calc(var(--gutter) * -1); }
  .access__map iframe { aspect-ratio: 1 / 1; }
  .area-list > div { grid-template-columns: 1fr; row-gap: 6px; padding: 16px 0; }
  .area-list dt { font-size: 16px; }
  .area-list dt br { display: none; }
  .access__car { padding: 22px 18px; }

  .manner-list { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .manner-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 18px;
    text-align: left;
  }
  .manner-item__icon { grid-row: 1 / 4; width: 56px; height: 56px; margin: 0; }
  .manner-item__icon svg { width: 28px; height: 28px; }
  .manner-item__title { margin-top: 0; font-size: 16px; }
  .manner-item__en { font-size: 12px; }
  .manner-item__text { margin-top: 8px; font-size: 13px; }
  .emergency { margin-top: 36px; padding: 24px 20px; }
  .emergency__list { grid-template-columns: 1fr; gap: 14px; }
}


/* ==========================================================
   09. お問い合わせ（旧 contact.css）
   ========================================================== */

/* ==========================================================
   お問合せ（contact.html）フォームなし
   - カンプ `お問合せ.jpg` を元に、内容別の案内・取材撮影・FAQを追加
   ========================================================== */
.ct-lead { margin-top: 28px; font-size: 15px; line-height: 2; color: var(--navy); }
.ct-sec { padding-top: var(--sec); }

/* 1. お問い合わせ先 */
.ct-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  column-gap: 80px;
  align-items: start;
}
.ct-table { margin-top: 44px; border-top: 1px solid var(--navy); }
.ct-table > div {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  column-gap: 24px;
  padding: 20px 8px;
  border-bottom: 1px solid #c1cfdc;
  font-size: 15px;
  line-height: 1.8;
  color: var(--navy-dark);
}
.ct-table dt { font-weight: 700; }
.ct-table dd { margin: 0; }
.ct-table dd a { text-decoration: underline; text-underline-offset: 3px; }
.ct-table small { display: block; font-size: 12.5px; color: #6d7b88; }
/* メールのカード（2026-10-15 クライアント指示で電話は非掲載）*/
.ct-call {
  padding: 44px 40px;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.ct-call__label { font-size: 14px; font-weight: 700; letter-spacing: .12em; }
/* .ct-call__tel は現在未使用（電話を再掲載する場合のために残置）*/
.ct-call__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
}
.ct-call__tel svg { fill: none; }
.ct-call__time { margin-top: 10px; font-size: 14px; opacity: .85; }
.ct-call__line { height: 1px; margin: 28px 0; background: rgba(255, 255, 255, .25); }
.ct-call__mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: 26px;
  letter-spacing: .02em;
  line-height: 1.3;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: rgba(255, 255, 255, .4);
}
.ct-call__mail svg { flex: none; fill: none; }
.ct-call__note { margin-top: 20px; font-size: 12.5px; line-height: 1.8; opacity: .8; text-align: left; }

/* 2. 内容別のご案内 */
.ct-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.ct-topic {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: #fff;
  border-top: 3px solid var(--navy);
}
.ct-topic__to {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--tag-blue);
}
.ct-topic__to--shop { background: var(--tag-green); }
.ct-topic__to--other { background: #8a9099; }
.ct-topic__title { margin-top: 14px; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--navy-dark); }
.ct-topic__text { margin-top: 10px; font-size: 14px; line-height: 1.9; color: var(--navy); flex: 1 1 auto; }
.ct-topic .text-link { margin-top: 18px; font-size: 14px; align-self: flex-end; }

/* 3. 取材・撮影について（薄水色帯） */
.ct-press { margin-top: var(--sec); padding: var(--sec) 0; background: var(--bg-blue); }
.ct-press__inner {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  column-gap: 80px;
  align-items: start;
}
.ct-press__list { counter-reset: press; border-top: 1px solid var(--navy); }
.ct-press__list li {
  counter-increment: press;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid #c1cfdc;
  font-size: 15px;
  line-height: 1.85;
  color: var(--navy-dark);
}
.ct-press__list li::before {
  content: counter(press, decimal-leading-zero);
  font-family: var(--font-en);
  font-size: 22px;
  line-height: 1.2;
  color: var(--tag-blue);
}
.ct-press__list strong { display: block; font-weight: 700; }
.ct-press__list span { font-size: 14px; color: var(--navy); }

/* 4. よくあるご質問 */
.faq { margin-top: 48px; border-top: 1px solid var(--navy); }
.faq details { border-bottom: 1px solid #c1cfdc; }
.faq summary {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 22px 56px 22px 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy-dark);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq__a::before {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 22px;
  line-height: 1.1;
  color: var(--tag-blue);
}
.faq summary::before { content: "Q"; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
  transform: rotate(45deg);
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a {
  display: flex;
  gap: 16px;
  padding: 0 24px 24px 4px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--navy);
}
.faq__a::before { content: "A"; color: var(--tag-pink); }
.faq__a a { text-decoration: underline; text-underline-offset: 3px; }

/* 5. 事務局・アクセス */
.ct-office {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  column-gap: 60px;
  align-items: start;
  margin-top: 48px;
}
.ct-office__addr { font-size: 15px; line-height: 2; color: var(--navy-dark); }
.ct-office__addr strong { display: block; font-size: 17px; }
.ct-office .text-link { margin-top: 24px; font-size: 14px; }
.ct-office__map iframe { display: block; width: 100%; height: 400px; border: 0; background: var(--bg-blue); }
.ct-kagee { margin-top: var(--sec); }

@media (max-width: 1199px) {
  .ct-main { grid-template-columns: 1fr; row-gap: 40px; }
  .ct-topics { grid-template-columns: repeat(2, 1fr); }
  .ct-press__inner { grid-template-columns: 1fr; row-gap: 32px; }
  .ct-office { grid-template-columns: 1fr; row-gap: 28px; }

}
@media (max-width: 767px) {
  .ct-lead { margin-top: 16px; font-size: 14px; line-height: 1.9; }
  .ct-lead br { display: none; }
  .ct-table { margin-top: 28px; }
  .ct-table > div { grid-template-columns: 1fr; row-gap: 2px; padding: 14px 2px; font-size: 14px; }
  .ct-table dt { font-size: 13px; color: var(--navy); }
  .ct-call { margin: 0 calc(var(--gutter) * -1); padding: 32px var(--gutter); }
  .ct-call__tel { font-size: 30px; }
  .ct-call__mail { font-size: 20px; gap: 10px; }
  .ct-call__mail svg { width: 22px; height: 22px; }
  .ct-topics { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .ct-topic { padding: 22px 20px; }
  .ct-topic__title { font-size: 17px; }
  .ct-topic__text { font-size: 13.5px; }
  .ct-press__list li { grid-template-columns: 38px minmax(0, 1fr); font-size: 14px; padding: 16px 0; }
  .ct-press__list li::before { font-size: 18px; }
  .ct-press__list span { font-size: 13px; }
  .faq { margin-top: 28px; }
  .faq summary { padding: 18px 40px 18px 2px; font-size: 14.5px; gap: 12px; }
  .faq summary::after { right: 8px; }
  .faq__a { padding: 0 8px 18px 2px; font-size: 14px; gap: 12px; }
  .ct-office { margin-top: 28px; }
  .ct-office__map { margin: 0 calc(var(--gutter) * -1); }
  .ct-office__map iframe { height: 300px; }
  .ct-kagee { overflow: hidden; }
}


/* ==========================================================
   10. 会員向け（旧 member.css）
   ========================================================== */

/* ==========================================================
   会員向け（member.html）
   - カンプ `会員向け.jpg`（1600×3168）を元に構成
   - 静的HTMLのため閲覧制限なし。WP化時にパスワード保護 or 会員プラグインで制限する
   ========================================================== */
.mb-lead { margin-top: 28px; font-size: 15px; line-height: 2; color: var(--navy); }
.mb-sec { padding-top: var(--sec); }

/* 資料の種類で絞り込み */
.doc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.doc-filter button {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--navy);
  border-radius: 19px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  transition: background .2s, color .2s;
}
.doc-filter button:hover,
.doc-filter button.is-current { background: var(--navy); color: #fff; }

/* 資料カード */
.doc-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}
.doc {
  display: flex;
  flex-direction: column;
  padding: 40px 28px 36px;
  background: #fff;
}
.doc__cat {
  align-self: center;
  padding: 4px 12px;
  border: 1px solid var(--navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--navy);
}
.doc__title {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--navy-dark);
}
.doc__text { margin-top: 18px; font-size: 14px; line-height: 1.9; color: var(--navy); flex: 1 1 auto; }
.doc__meta { margin-top: 22px; font-size: 13px; letter-spacing: .02em; color: #6d7b88; }
.doc__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-top: 28px;
  border: 1px solid var(--navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--navy);
  transition: background .25s, color .25s;
}
.doc__btn svg { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); fill: none; }
.doc__btn:hover { background: var(--navy); color: #fff; }
.doc[hidden] { display: none; }

/* お知らせ */
.mb-news { margin-top: 44px; border-top: 1px solid var(--navy); }
.mb-news li { border-bottom: 1px solid #c1cfdc; }
.mb-news a,
.mb-news div {
  display: grid;
  grid-template-columns: 9em 7em minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
  padding: 24px 4px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy-dark);
}
.mb-news a { transition: background .2s; }
.mb-news a:hover { background: #fff; }
.mb-news time { font-size: 14px; letter-spacing: .04em; color: var(--text-date); }
.mb-news__tag {
  justify-self: start;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--tag-blue);
}
.mb-news__tag--important { background: var(--tag-pink); }

/* 事務局連絡先 */
.mb-office {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  align-items: center;
  margin-top: var(--sec);
  padding: 40px 48px;
  background: var(--bg-blue);
}
.mb-office__title { font-size: 20px; font-weight: 700; color: var(--navy-dark); }
.mb-office__text { margin-top: 10px; font-size: 14px; line-height: 1.9; color: var(--navy); }
.mb-kagee { margin-top: var(--sec); }

@media (max-width: 1199px) {
  .doc-list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .mb-office { grid-template-columns: 1fr; row-gap: 24px; }
}
@media (max-width: 767px) {
  .mb-lead { margin-top: 16px; font-size: 14px; line-height: 1.9; }
  .doc-filter { gap: 6px; margin-top: 24px; }
  .doc-filter button { height: 34px; padding: 0 14px; font-size: 12px; }
  .doc-list { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .doc { padding: 26px 20px 22px; }
  .doc__title { font-size: 18px; }
  .doc__text { margin-top: 12px; font-size: 13.5px; }
  .doc__meta { margin-top: 14px; font-size: 12px; }
  .doc__btn { height: 50px; margin-top: 18px; }
  .mb-news a,
  .mb-news div { grid-template-columns: auto 1fr; row-gap: 6px; column-gap: 12px; padding: 16px 2px; font-size: 14px; }
  .mb-news p { grid-column: 1 / -1; }
  .mb-news time { font-size: 13px; }
  .mb-office { margin: var(--sec) calc(var(--gutter) * -1) 0; padding: 28px var(--gutter); }
  .mb-office__title { font-size: 17px; }
  .mb-office .btn { display: flex; width: 100%; padding: 0 60px; }
  .mb-office .btn .arrow { right: 24px; }
  .mb-kagee { overflow: hidden; }
}


/* ==========================================================
   11. プライバシーポリシー（旧 privacy.css）
   ========================================================== */

/* ==========================================================
   プライバシーポリシー（privacy.html）
   ========================================================== */
.policy { padding-top: var(--sec); }
.policy__inner { max-width: 960px; margin: 0 auto; }
.policy__intro { font-size: 15px; line-height: 2.1; color: var(--navy); }

.policy__toc {
  margin-top: 48px;
  padding: 28px 36px;
  background: #fff;
}
.policy__toc-title { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--navy-dark); }
.policy__toc ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 32px;
  margin-top: 14px;
  counter-reset: toc;
}
.policy__toc li { counter-increment: toc; font-size: 14px; line-height: 1.8; }
.policy__toc li::before {
  content: counter(toc) ".";
  display: inline-block;
  width: 1.8em;
  font-family: var(--font-en);
  color: var(--tag-blue);
}
.policy__toc a { color: var(--navy); transition: opacity .2s; }
.policy__toc a:hover { opacity: .65; text-decoration: underline; }

.policy__sec { padding-top: 64px; scroll-margin-top: 100px; }
.policy__h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--navy);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--navy-dark);
}
.policy__h2 span {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 28px;
  color: var(--tag-blue);
}
.policy__body { margin-top: 22px; font-size: 15px; line-height: 2.05; color: var(--navy); }
.policy__body > * + * { margin-top: 1em; }
.policy__body ol,
.policy__body ul { padding-left: 1.6em; }
.policy__body ol { list-style: decimal; }
.policy__body ul { list-style: disc; }
.policy__body li + li { margin-top: .3em; }
.policy__body a { text-decoration: underline; text-underline-offset: 3px; }

.policy__contact { margin-top: 18px; padding: 24px 28px; background: #fff; }
.policy__contact dl { display: grid; grid-template-columns: 7em 1fr; gap: 6px 16px; }
.policy__contact dt { font-weight: 700; color: var(--navy-dark); }
.policy__contact dd { margin: 0; }

.policy__date { margin-top: 64px; text-align: right; font-size: 14px; line-height: 1.9; color: var(--navy); }
.policy-kagee { margin-top: var(--sec); }

@media (max-width: 1199px) {
}
@media (max-width: 767px) {
  .policy__intro { font-size: 14px; line-height: 1.95; }
  .policy__toc { margin-top: 32px; padding: 20px 18px; }
  .policy__toc ol { grid-template-columns: 1fr; }
  .policy__toc li { font-size: 13.5px; }
  .policy__sec { padding-top: 44px; scroll-margin-top: 70px; }
  .policy__h2 { gap: 12px; font-size: 18px; }
  .policy__h2 span { font-size: 22px; }
  .policy__body { margin-top: 16px; font-size: 14px; line-height: 1.95; }
  .policy__contact { padding: 18px; }
  .policy__contact dl { grid-template-columns: 1fr; gap: 0; }
  .policy__contact dd + dt { margin-top: 8px; }
  .policy__date { margin-top: 44px; font-size: 13px; }
  .policy-kagee { overflow: hidden; }
}


/* ==========================================================
   12. WordPress 用の追加
   ========================================================== */

/* 管理バー表示中（ログイン時）は固定ヘッダーを下げる */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
  .admin-bar .site-header.is-scrolled { top: 0; }
}

/* WordPress の配置クラス（トピックス本文） */
.article__body .alignleft { float: left; margin: 0 1.5em 1em 0; }
.article__body .alignright { float: right; margin: 0 0 1em 1.5em; }
.article__body .aligncenter { margin-left: auto; margin-right: auto; }
.article__body .wp-block-image img { height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* パスワード保護ページ（会員向け） */
.post-password-form { max-width: 560px; margin: var(--sec) auto; padding: 48px 40px; background: #fff; text-align: center; }
.post-password-form p { line-height: 1.9; }
.post-password-form p + p { margin-top: 24px; }
.post-password-form input[type="password"] { width: 100%; max-width: 320px; margin-top: 8px; padding: 12px 14px; border: 1px solid #c1cfdc; font-size: 16px; }
.post-password-form input[type="submit"] { margin-top: 16px; padding: 12px 40px; border: 0; background: var(--navy); color: #fff; font-size: 15px; letter-spacing: .1em; cursor: pointer; }

/* ページ送りの「…」 */
.pagination__dots { display: flex; align-items: flex-end; justify-content: center; width: 24px; height: 48px; padding-bottom: 10px; color: var(--navy); }
@media (max-width: 767px) { .pagination__dots { height: 40px; width: 16px; } }

/* 検索結果・404 */
.search-results-list { display: grid; gap: 0; border-top: 1px solid #c1cfdc; }
.search-result { border-bottom: 1px solid #c1cfdc; }
.search-result__link { display: block; padding: 28px 8px; transition: background .2s; }
.search-result__link:hover { background: #fff; }
.search-result__type { display: inline-block; font-size: 12px; letter-spacing: .08em; color: var(--tag-blue); }
.search-result__title { margin-top: 6px; font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 1.5; color: var(--navy-dark); }
.search-result__excerpt { margin-top: 8px; font-size: 14px; line-height: 1.8; color: #6d7b88; }
.notfound { padding: var(--sec) 0; text-align: center; line-height: 2; }
.notfound .btn { margin-top: 40px; }

/* 店舗情報：長いURLや営業時間で表がはみ出さないように */
.shop-info__row dd { min-width: 0; overflow-wrap: anywhere; }

/* 写真が無いときの代わり：グレー地の中央にロゴ（枠の縦横比はそれぞれの写真の指定のまま） */
img.noimage { box-sizing: border-box; padding: 0 24%; background: #e6e6e6; object-fit: contain !important; }

/* 「しんきた」とは：基本情報とキャラクター紹介が同じ水色帯で続くので、間は基本情報の下余白だけにする（2026-10-30） */
.ab-data + .ab-chara { padding-top: 0; }
/* トップ：LINE公式アカウントのバナー（HISTORYとINSTAGRAMの間・2026-10-31 カンプ準拠） */
.line-banner { background: var(--bg-beige); padding: 42px 0; }
.line-banner__inner { display: flex; align-items: stretch; max-width: 1130px; margin: 0 auto; padding: 58px 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
.line-banner__main { flex: 1; min-width: 0; padding: 0 48px; border-right: 1px solid var(--navy); }
.line-banner__icon { flex: none; display: block; width: 64px; height: 64px; }
.line-banner__title { display: flex; align-items: center; gap: 24px; font-family: var(--font-mincho); font-weight: 700; font-size: 42px; line-height: 1.4; letter-spacing: .04em; color: var(--navy-dark); }
.line-banner__name > span { white-space: nowrap; }
.line-banner__text { margin-top: 14px; font-size: 18px; line-height: 1.8; letter-spacing: .04em; color: var(--text); }
.line-banner__btn { display: inline-flex; align-items: center; gap: 20px; height: 52px; margin-top: 24px; padding: 0 40px 0 32px; border: 1px solid var(--navy-dark); color: var(--navy-dark); font-weight: 500; font-size: 17px; letter-spacing: .14em; transition: background .2s, color .2s; }
.line-banner__btn:hover { background: var(--navy-dark); color: #fff; }
.line-banner__plus { position: relative; flex: none; width: 20px; height: 20px; }
.line-banner__plus::before, .line-banner__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: #06c755; transform: translate(-50%, -50%); }
.line-banner__plus::before { width: 20px; height: 2px; }
.line-banner__plus::after { width: 2px; height: 20px; }
.line-banner__qr { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 352px; margin: 0; }
.line-banner__qr figcaption { font-size: 14px; letter-spacing: .06em; color: var(--navy-dark); }
.line-banner__qr img { display: block; width: 166px; height: 166px; margin-top: 24px; padding: 8px; border: 1px solid var(--navy-dark); background: #fff; }
@media (max-width: 1199px) {
  .line-banner__main { padding: 0 36px; }
  .line-banner__title { font-size: 30px; }
  .line-banner__text { font-size: 16px; }
  .line-banner__qr { width: 280px; }
}
@media (max-width: 1023px) {
  .line-banner__inner { padding: 48px 0; }
  .line-banner__main { padding: 0 24px; border-right: 0; }
  .line-banner__qr { display: none; }
}
@media (max-width: 767px) {
  .line-banner { padding: 56px 0; }
  .line-banner__inner { display: block; padding: 0; border-top: 0; border-bottom: 0; }
  .line-banner__main { padding: 0; }
  .line-banner__title { gap: 16px; }
  .line-banner__icon { width: 52px; height: 52px; }
  .line-banner__title { font-size: 26px; line-height: 1.45; }
  .line-banner__name > span { display: block; }
  .line-banner__text { margin-top: 18px; font-size: 15px; line-height: 1.9; }
  .line-banner__btn { display: flex; width: 100%; height: 62px; margin-top: 36px; padding: 0 24px; gap: 28px; border: 0; background: #06c755; color: #fff; font-size: 18px; }
  .line-banner__btn:hover { background: #05b04b; color: #fff; }
  .line-banner__plus::before, .line-banner__plus::after { background: #fff; }
}

/* ロゴ下の英字＋創業年（2026-11-09 画像焼き込みをやめてテキスト化。英字は和文ロゴより横に長くてよい＝ロゴ全体の幅に含めてナビを押す） */
.site-logo__name,
.site-footer__name { display: flex; flex-direction: column; align-items: flex-start; }
.site-logo__name .site-logo__text { display: block; width: clamp(200px, 16.75vw, 268px); height: auto; }
.site-footer__name .site-footer__text { display: block; width: 377px; height: auto; }
.logo-en {
  display: block;
  margin-top: 1em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: #2a495f;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
}
.site-footer .logo-en { font-size: 13px; }
.logo-en__since { display: block; margin-top: .25em; } /* 2026-11-10 SINCE は下の行に、英字名は1行 */
/* MVの SINCE 表記はロゴへ移したので削除（2026-11-09） */
@media (min-width: 768px) { .mv__catch { margin-top: 20px; } } /* SINCE が無くなった分キャッチを上へ（元より39px上） */
@media (max-width: 767px) { .mv__copy { padding-bottom: 22px; } }
@media (min-width: 1200px) and (max-width: 1359px) {
  .site-logo__name .site-logo__text { width: 200px; }
  .site-logo .logo-en { font-size: 8.5px; }
  /* 英字のぶんロゴが横に伸びるので、ナビを少し詰める */
  .gnav { padding-left: 20px; }
  .gnav__list { gap: 10px; }
  .gnav__item a { font-size: 13px; }
}
@media (min-width: 1360px) and (max-width: 1479px) {
  .gnav { padding-left: 20px; }
  .gnav__list { gap: calc(2.5vw - 8px); /* 英字でロゴが伸びたぶん詰める */ }
}
@media (max-width: 1199px) {
  .site-logo__name .site-logo__text { width: 170px; }
  /* 1199px以下のヘッダーも英字名1行＋SINCE 1968 の2行（2026-11-10） */
  .site-header .logo-en { margin-top: 5px; font-size: 8.5px; letter-spacing: .1em; line-height: 1.3; }
  .site-header .site-logo__mark { width: 44px; height: 44px; } /* 文字が2行で縦に伸びた分、マークを合わせる（33→44px） */
  .site-footer__name .site-footer__text { width: 300px; }
  .site-footer .logo-en { font-size: 11px; }
}
@media (max-width: 767px) {
  .site-footer__name .site-footer__text { width: 262px; }
  .site-footer .logo-en { font-size: 9px; }
}

/* 2026-11-10 観光者向けガイド：困ったとき（4項目は2列）・中央区お役立ち連絡先・おおさかメディカルネット */
.emergency__list--4 { grid-template-columns: repeat(2, 1fr); }
.emergency--sub { margin-top: 20px; }
.emergency__list dt br { display: none; }
.medical-net {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  padding: 24px 40px;
  background: #fff;
  border: 1px solid var(--navy);
  color: var(--navy);
  text-decoration: none;
  transition: background-color .2s;
}
.medical-net:hover { background: var(--bg-blue); }
.medical-net__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tag-blue);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.medical-net__body { flex: 1; min-width: 0; }
.medical-net__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--navy-dark); }
.medical-net__en { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--tag-blue); }
.medical-net__text { display: block; margin-top: 6px; font-size: 13px; line-height: 1.7; }
.medical-net__text span { display: block; }
.medical-net__go { flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
@media (max-width: 767px) {
  .emergency__list--4 { grid-template-columns: 1fr; }
  .emergency__list dt br { display: inline; }
  .medical-net { flex-wrap: wrap; gap: 14px 16px; padding: 22px 20px; }
  .medical-net__icon { width: 40px; height: 40px; font-size: 24px; }
  .medical-net__body { flex-basis: calc(100% - 56px); }
  .medical-net__title { font-size: 16px; }
  .medical-net__go { margin-left: 56px; }
}