@charset "UTF-8";

/* --------------------------------------------------------------------------
   1. CSS 変数定義（:root）
   -------------------------------------------------------------------------- */
:root {
  /* Rewind 固有変数 */
  --rw-primary: #6B8F71;
  --rw-accent: #C47D5C;
  --rw-bg-main: #EFF3EF;

  /* 派生色・装飾用 */
  --rw-text-primary: #2C2C2C;
  --rw-text-secondary: #5A5A5A;
  --rw-text-muted: #8A8A8A;
  --rw-border: rgba(44, 44, 44, 0.12);
  --rw-border-strong: rgba(44, 44, 44, 0.22);
  --rw-surface: #FFFFFF;
  --rw-surface-alt: rgba(255, 255, 255, 0.65);
  --rw-grid-line: rgba(44, 44, 44, 0.06);
  /* 影は残骸として残すが、原則使わない（90年代印刷物的フラット指向）。
     フォーム focus ring 等、機能上必要な箇所のみ個別に定義する。 */
  --rw-shadow-sm: none;
  --rw-shadow-md: none;

  /* タイポグラフィ（デフォルトは読みやすさ優先で BIZ UDPGothic を使用。
     ユニバーサルデザイン書体で長文の可読性が高い） */
  --rw-font-display: 'BIZ UDPGothic', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rw-font-body: 'BIZ UDPGothic', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rw-font-ui: 'BIZ UDPGothic', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rw-tracking-heading: 0.15em;
  --rw-tracking-caps: 0.22em;

  /* レイアウト（90年代印刷物寄りに角を立てる） */
  --rw-container-max: 1080px;
  --rw-gutter: 24px;
  --rw-radius-sm: 0;
  --rw-radius-md: 0;

  /* モーション */
  --rw-transition: 180ms ease;

  /* Bootstrap 変数の上書き（--bs-* を --rw-* に連動させる） */
  --bs-primary: var(--rw-primary);
  --bs-primary-rgb: 45, 143, 143;
  --bs-link-color: var(--rw-primary);
  --bs-link-hover-color: var(--rw-accent);
  --bs-body-bg: var(--rw-bg-main);
  --bs-body-color: var(--rw-text-primary);
  --bs-body-font-family: var(--rw-font-body);
  --bs-border-color: var(--rw-border);
  --bs-border-radius: var(--rw-radius-md);
  --bs-secondary-color: var(--rw-text-secondary);
  --bs-emphasis-color: var(--rw-text-primary);
}

/* --------------------------------------------------------------------------
   2. ベース要素
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--rw-font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--rw-text-primary);
  background-color: var(--rw-bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--rw-primary); text-decoration: none; transition: color var(--rw-transition); }
a:hover, a:focus { color: var(--rw-accent); }
a:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--rw-border);
  margin: 2.5rem 0;
}

p { margin: 0 0 1.25em; }

.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. タイポグラフィ（雑誌風エディトリアル）
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.page_title, .section_title, .article_title {
  font-family: var(--rw-font-display);
  font-weight: 900;
  color: var(--rw-text-primary);
  line-height: 1.25;
  letter-spacing: var(--rw-tracking-heading);
  margin: 0 0 0.75em;
}

h1 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h2 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.2vw + 0.75rem, 1.5rem); }
h4 { font-size: 1.15rem; }

.section_title,
.page_title {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 1.5em;
  text-transform: uppercase;
}
.section_title::before,
.page_title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.63em;
  width: 1em;
  height: 3px;
  background: var(--rw-accent);
}

/* トップページ: .section_title は .inner の外側に置かれるため、
   .inner と同じ max-width / gutter に揃える。
   ::before は .inner 先頭に合わせて gutter 分オフセットする。 */
.section > .section_title {
  max-width: var(--rw-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--rw-gutter) + 1.5em);
  padding-right: var(--rw-gutter);
}
.section > .section_title::before {
  left: var(--rw-gutter);
}

.textfield {
  font-family: var(--rw-font-body);
  line-height: 1.9;
}
.textfield a { text-decoration: underline; text-underline-offset: 0.2em; }

.date,
.category {
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: var(--rw-text-secondary);
}

/* --------------------------------------------------------------------------
   4. レイアウト骨格
   -------------------------------------------------------------------------- */
#container {
  position: relative;
  min-height: 100vh;
  /* グリッドライン装飾（薄い縦横ライン） */
  background-image:
    linear-gradient(to right, var(--rw-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rw-grid-line) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: 0 0, 0 0;
}

#content {
  position: relative;
  z-index: 1;
}

.inner {
  max-width: var(--rw-container-max);
  margin: 0 auto;
  padding-left: var(--rw-gutter);
  padding-right: var(--rw-gutter);
}

.section {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.section + .section {
  border-top: 1px solid var(--rw-border);
}

/* --------------------------------------------------------------------------
   5. ヘッダー / ナビゲーション
   -------------------------------------------------------------------------- */
#header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--rw-bg-main);
  border-bottom: 1px solid var(--rw-border-strong);
  transition: transform .3s ease;
  will-change: transform;
}
#header.is-hidden {
  transform: translateY(-100%);
}
#header > .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.primary-nav {
  flex: 1 1 100%;
}

#header .logo {
  margin: 0;
  font-family: var(--rw-font-display);
  font-size: 1.25rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
}
#header .logo a,
#header .shop_sitename {
  color: var(--rw-text-primary);
  text-decoration: none;
}
/* ロゴ画像は /setting/logo/ で4サイズ（オリジナル/L/M/S）選べる。
   画像ファイル自体の物理サイズが違うので、CSS で一律 max-height するとその差が潰れる。
   PC では max-height を 120px まで許容し、admin の選択差が出るようにする（極端に大きい
   画像だけ安全弁で抑える）。モバイルでの固定サイズは下の @media で別途 48px に制限。 */
#header .logo img {
  max-height: 120px;
  max-width: 100%;
  width: auto;
  height: auto;
}

#header .site_description {
  flex: 1 1 auto;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  color: var(--rw-text-secondary);
  letter-spacing: 0.05em;
}

/* プライマリナビ（デスクトップ水平表示） */
.primary-nav .navi_list {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
.primary-nav .navi_list > li > a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  letter-spacing: var(--rw-tracking-heading);
  text-transform: uppercase;
  color: var(--rw-text-primary);
  border-bottom: 2px solid transparent;
  transition: border-color var(--rw-transition), color var(--rw-transition);
}
.primary-nav .navi_list > li > a:hover,
.primary-nav .navi_list > li:is(.active, .current) > a {
  color: var(--rw-primary);
  border-bottom-color: var(--rw-accent);
}
/* 現在地はホバー時との識別性を高めるため太字にする
   （テンプレート出力が .active の場合と .current の場合の両方に対応） */
.primary-nav .navi_list > li:is(.active, .current) > a {
  font-weight: 700;
}

/* サブメニュー（{navi_sub} が展開する <ul>）共通リセット */
.primary-nav .navi_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 親項目に子メニューがある場合のインジケータ（▼） */
.primary-nav .navi_list > li:has(> ul) > a::after {
  content: "\25BE"; /* ▾ */
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.85em;
  color: var(--rw-accent);
}

/* デスクトップ：ドロップダウン表示 */
@media (min-width: 1024px) {
  .primary-nav .navi_list > li { position: relative; }

  /* 現在地の下線をホバー時（2px）より太くして識別性を上げる。
     padding-bottom を 1px 詰めて総高さを他リンクと揃える。 */
  .primary-nav .navi_list > li:is(.active, .current) > a {
    border-bottom-width: 3px;
    padding-bottom: calc(0.5rem - 1px);
  }

  .primary-nav .navi_list > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--rw-bg-main);
    border: 1px solid var(--rw-border-strong);
    border-left: 3px solid var(--rw-accent);
    padding: 0.5rem 0;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--rw-transition), visibility var(--rw-transition);
  }

  .primary-nav .navi_list > li:hover > ul,
  .primary-nav .navi_list > li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .primary-nav .navi_list > li > ul > li > a {
    display: block;
    padding: 0.5rem 1rem;
    font-family: var(--rw-font-ui);
    font-size: 0.8125rem;
    letter-spacing: var(--rw-tracking-heading);
    text-transform: uppercase;
    color: var(--rw-text-primary);
    white-space: nowrap;
    border-bottom: 0;
    transition: background var(--rw-transition), color var(--rw-transition);
  }

  .primary-nav .navi_list > li > ul > li > a:hover,
  .primary-nav .navi_list > li > ul > li:is(.active, .current) > a {
    background: rgba(44, 44, 44, 0.05);
    color: var(--rw-primary);
  }
}

/* モバイル：ドロワー内でインデント縦並び */
@media (max-width: 1023px) {
  .primary-nav .navi_list > li > ul {
    margin: 0 0 0 1rem;
    padding: 0 0 0.5rem 0.75rem;
    border-left: 2px solid var(--rw-accent);
  }
  .primary-nav .navi_list > li > ul > li > a {
    display: block;
    padding: 0.55rem 0.25rem;
    font-family: var(--rw-font-ui);
    font-size: 0.8125rem;
    letter-spacing: var(--rw-tracking-heading);
    text-transform: uppercase;
    color: var(--rw-text-primary);
  }
  .primary-nav .navi_list > li > ul > li:is(.active, .current) > a {
    color: var(--rw-primary);
  }
}

/* モバイルトグル */
.mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rw-text-primary);
  color: var(--rw-text-primary);
  width: 44px;
  height: 44px;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mobile-toggle:hover { background-color: rgba(44, 44, 44, 0.04); }
.mobile-toggle svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   6. ヒーロー / スライドショー
   -------------------------------------------------------------------------- */
#wrap_slider {
  position: relative;
  overflow: hidden;
}
#wrap_slider .rslides {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* .article 自体を 1200px 中央寄せにすることで、
   キャプション／矢印／インジケーターの座標基準（.article または #wrap_slider）と
   画像の表示領域を一致させる。 */
#wrap_slider .article {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
/* スライド画像の表示枠: 全デバイスで厳密に 16:9 を維持する。
   幅は親（.article = 最大1200px）に追従。
   cover + 上寄せ切り抜きで主題（上半分）を残す。 */
#wrap_slider .slide_image_wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#wrap_slider .slide_image_wrap a {
  display: block;
  width: 100%;
  height: 100%;
}
#wrap_slider .slide_image_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
#wrap_slider .caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: fit-content;
  max-width: calc(100% - 8rem);
  background: rgba(245, 240, 235, 0.72);
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--rw-accent);
}
#wrap_slider .caption_txt a {
  color: var(--rw-text-primary);
  font-family: var(--rw-font-display);
  letter-spacing: var(--rw-tracking-heading);
  word-break: break-word;
  font-size: 0.8rem;
}
#wrap_slider .caption:has(.caption_txt a:empty) {
  display: none;
}

.slideshow-controls button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 0;
  border: 1px solid var(--rw-text-primary);
  background: rgba(245, 240, 235, 0.85);
  cursor: pointer;
  transition: background var(--rw-transition), opacity var(--rw-transition);
}
.slideshow-controls button:hover {
  background: var(--rw-accent);
  border-color: var(--rw-accent);
}
.slideshow-controls button:focus-visible {
  outline: 2px solid var(--rw-primary);
  outline-offset: 2px;
}
.slide-prev { left: 1rem; }
.slide-next { right: 1rem; }
.slide-prev::before,
.slide-next::before {
  content: "";
  display: block;
  width: 10px; height: 10px;
  border-top: 2px solid var(--rw-text-primary);
  border-left: 2px solid var(--rw-text-primary);
  margin: 0 auto;
}
.slide-prev::before { transform: rotate(-45deg) translate(2px, 2px); }
.slide-next::before { transform: rotate(135deg) translate(2px, 2px); }

/* 数字表記のエディトリアル・インジケーター（"01" "02" ...）
   キャプション（画像左下）と重ならないよう右下に配置 */
.slideshow-indicators {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: calc(100% - 2rem);
}
.slideshow-indicators .slide-indicator {
  min-width: 28px;
  height: 28px;
  padding: 0 0.35rem;
  border: 1px solid var(--rw-text-primary);
  background: var(--rw-bg-main);
  color: var(--rw-text-primary);
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--rw-transition), color var(--rw-transition);
  border-radius: 0;
}
.slideshow-indicators .slide-indicator:hover {
  background: var(--rw-accent);
  border-color: var(--rw-accent);
}
.slideshow-indicators .slide-indicator.active {
  background: var(--rw-primary);
  color: var(--rw-bg-main);
  border-color: var(--rw-primary);
}

/* --------------------------------------------------------------------------
   7. セクション共通（お知らせ / 写真 / 店舗情報 etc.）
   -------------------------------------------------------------------------- */
.section .list {
  display: grid;
  gap: 1.5rem;
}
.section .list .article {
  background: var(--rw-surface);
  border: 1px solid var(--rw-border-strong);
  border-radius: 0;
  padding: 1.25rem;
  transition: border-color var(--rw-transition), background var(--rw-transition);
}
.section .list .article:hover {
  border-color: var(--rw-text-primary);
  background: var(--rw-surface);
}

/* information（お知らせ）— エディトリアル・リスト風（90年代雑誌の目次イメージ） */
.section.information .list {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rw-border);
}
.section.information .article {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding: 1.1rem 0.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rw-border);
  border-radius: 0;
  box-shadow: none;
  transition: padding-left var(--rw-transition), background var(--rw-transition);
}
.section.information .article:hover {
  padding-left: 0.75rem;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.section.information .article .date {
  color: var(--rw-primary);
  font-family: var(--rw-font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.section.information .article .title {
  font-family: var(--rw-font-display);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--rw-text-primary);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.section.information .article:hover .title {
  color: var(--rw-primary);
}

/* photo（トップ写真・マガジン風モザイク）
   shop 側の f_GetPhotos($gShopInfo, 6) で最大6枚が渡る前提。
   12カラムベースで「1枚目=大（span 6, row 2）、2-3枚目=中（span 3）、
   4-6枚目=小（span 2）」の非対称モザイク。
   :has() で4枚以上のときだけ1枚目の row span 2 を有効化し、
   1〜3枚のときも破綻しないようフォールバック。
   CSS counter で 01/02 の通し番号を写真下に自動表示する。 */
.section.section_photo .list.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: photo;
}
.section.section_photo .list.photo-mosaic > li {
  grid-column: span 3;
  counter-increment: photo;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.section.section_photo .list.photo-mosaic > li:first-child {
  grid-column: span 6;
}
.section.section_photo .list.photo-mosaic:has(> li:nth-child(4)) > li:first-child {
  grid-row: span 2;
}
.section.section_photo .list.photo-mosaic > li:nth-child(n+4) {
  grid-column: span 2;
}
.photo_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.photo_frame {
  display: block;
  overflow: hidden;
}
.photo_frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.section.section_photo .list.photo-mosaic > li:not(:first-child) .photo_frame {
  aspect-ratio: 1 / 1;
}
.section.section_photo .list.photo-mosaic:not(:has(> li:nth-child(4))) > li:first-child .photo_frame {
  aspect-ratio: 3 / 2;
}
.section.section_photo .list.photo-mosaic:has(> li:nth-child(4)) > li:first-child .photo_frame {
  flex: 1;
  min-height: 0;
}
.photo_meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--rw-border);
}
.photo_meta::before {
  content: counter(photo, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-primary);
  font-variant-numeric: tabular-nums;
}
.photo_title {
  font-family: var(--rw-font-display);
  font-size: 0.9rem;
  letter-spacing: var(--rw-tracking-heading);
  color: var(--rw-text-primary);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .section.section_photo .list.photo-mosaic {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .section.section_photo .list.photo-mosaic > li,
  .section.section_photo .list.photo-mosaic > li:first-child,
  .section.section_photo .list.photo-mosaic > li:nth-child(n+4),
  .section.section_photo .list.photo-mosaic:has(> li:nth-child(4)) > li:first-child {
    grid-column: span 1;
    grid-row: auto;
  }
  .section.section_photo .list.photo-mosaic > li:not(:first-child) .photo_frame,
  .section.section_photo .list.photo-mosaic > li:first-child .photo_frame {
    aspect-ratio: 4 / 3;
  }
}

/* about */
.section.about .inner { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.section.about .block.map iframe { width: 100%; min-height: 300px; border: 0; }

/* トップの店舗情報テーブル（{top_about_all} は <table> を出力する）:
   /about ページのテーブルスタイルと視覚的に揃える。 */
.section.about .block.summary table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.section.about .block.summary table tr {
  border-bottom: 1px solid var(--rw-border);
}
.section.about .block.summary table tr:last-child {
  border-bottom: 0;
}
.section.about .block.summary table th,
.section.about .block.summary table td {
  padding: 1rem 0.5rem;
  vertical-align: top;
  text-align: left;
  background: transparent;
}
.section.about .block.summary table th {
  width: 10rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-secondary);
  white-space: nowrap;
}
.section.about .block.summary table td {
  color: var(--rw-text-primary);
  line-height: 1.8;
}

/* /about ページ（body#about）: 店舗情報テーブル・地図 */
body#about .map {
  max-width: 1000px;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--rw-border);
}
body#about .map iframe,
body#about .map img {
  display: block;
  width: 100%;
  min-height: 300px;
  border: 0;
}
body#about .summary > .table_detail {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
body#about .summary > .table_detail tr {
  border-bottom: 1px solid var(--rw-border);
}
body#about .summary > .table_detail tr:last-child {
  border-bottom: 0;
}
body#about .summary > .table_detail th,
body#about .summary > .table_detail td {
  padding: 1rem 0.5rem;
  vertical-align: top;
  text-align: left;
  background: transparent;
}
body#about .summary > .table_detail th {
  width: 10rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-secondary);
  white-space: nowrap;
}
body#about .summary > .table_detail td {
  color: var(--rw-text-primary);
  line-height: 1.8;
}

/* モバイル: 店舗情報テーブルを縦積みに */
@media (max-width: 767px) {
  body#about .summary > .table_detail,
  body#about .summary > .table_detail tbody,
  body#about .summary > .table_detail tr,
  body#about .summary > .table_detail th,
  body#about .summary > .table_detail td,
  .section.about .block.summary table,
  .section.about .block.summary table tbody,
  .section.about .block.summary table tr,
  .section.about .block.summary table th,
  .section.about .block.summary table td {
    display: block;
    width: 100%;
  }
  body#about .summary > .table_detail tr,
  .section.about .block.summary table tr {
    padding: 0.75rem 0;
  }
  body#about .summary > .table_detail th,
  .section.about .block.summary table th {
    padding: 0 0 0.25rem;
  }
  body#about .summary > .table_detail td,
  .section.about .block.summary table td {
    padding: 0;
  }
  body#about .map iframe,
  body#about .map img {
    min-height: 220px;
  }
}

.btn_details {
  margin-top: 1.5rem;
  text-align: right;
}
.btn_details a {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: var(--rw-text-primary);
  border: 1px solid var(--rw-text-primary);
  border-radius: 0;
  transition: color var(--rw-transition), background var(--rw-transition);
}
.btn_details a:hover {
  color: var(--rw-bg-main);
  background: var(--rw-accent);
  border-color: var(--rw-accent);
}

/* --------------------------------------------------------------------------
   8. フォーム / ボタン（Bootstrap 上書き含む）
   -------------------------------------------------------------------------- */
.contact_form,
form .message,
.form-group { margin-bottom: 1.25rem; }

/* フォーム上部の通知（contact / reservation / event_reservation 共通）
   出力構造： <div class="message"><div class="error_message|success_message">...</div></div> */
form .message :is(.error_message, .success_message) {
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--rw-accent);
  background-color: rgba(232, 168, 124, 0.12);
  color: var(--rw-text-primary);
  font-family: var(--rw-font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  border-radius: 0;
}
form .message .success_message {
  border-left-color: var(--rw-primary);
  background-color: color-mix(in srgb, var(--rw-primary) 10%, transparent);
}

/* イベント予約エントリーページ（/reservation/event/entry/）専用のBEM構造
   上記 .message 系とは別のHTML構造（p-notification / p-fieldset / p-confirm-list）が使われているため、
   body#event-reservation でスコープして他ページに影響させない */
body#event-reservation .p-notification.p-notification--warning {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--rw-accent);
  background-color: rgba(232, 168, 124, 0.12);
  color: var(--rw-text-primary);
  font-family: var(--rw-font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  border-radius: 0;
}
body#event-reservation .p-notification.p-notification--warning strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-heading);
  color: var(--rw-text-primary);
}
/* 必須ラベル: `.p-form-field__required-label` はラベルテキストを囲うだけなので、
   CSS の ::after で末尾に " *" を補い、他フォームの必須表記と見た目を揃える。 */
body#event-reservation form[name="reservation-event"] .p-form-field__required-label::after {
  content: " *";
}

body#event-reservation .p-fieldset.p-fieldset--bgcolor {
  margin: 0 0 1.25rem;
}
/* お申し込み内容（.p-confirm-list を含むブロック）のみ白カードで浮かせる。
   予約情報・注意事項は他フォームと揃えるため素の背景のままにする。 */
body#event-reservation .p-fieldset.p-fieldset--bgcolor:has(.p-confirm-list) {
  padding: 1.5rem;
  background-color: var(--rw-surface-alt);
  border: 1px solid var(--rw-border);
  border-radius: 0;
}
body#event-reservation .p-fieldset.p-fieldset--bgcolor .p-fieldset__title {
  margin: 0 0 1rem;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--rw-border);
  background: transparent;
  font-family: var(--rw-font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--rw-tracking-heading);
  color: var(--rw-text-primary);
}
body#event-reservation .p-fieldset.p-fieldset--bgcolor .p-fieldset__body {
  margin: 0;
  padding: 0;
}

body#event-reservation .p-confirm-list {
  margin: 0;
  padding: 0;
}
body#event-reservation .p-confirm-list__item {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rw-border);
}
body#event-reservation .p-confirm-list__item:first-child {
  padding-top: 0;
  border-top: 0;
}
body#event-reservation .p-confirm-list__item dt {
  margin: 0;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--rw-tracking-heading);
  text-transform: uppercase;
  color: var(--rw-text-secondary);
}
body#event-reservation .p-confirm-list__item dd {
  margin: 0;
  font-family: var(--rw-font-body);
  font-size: 1rem;
  color: var(--rw-text-primary);
  line-height: 1.6;
}

/* 3画面（エントリー/確認/完了）の本文幅を揃える。
   エントリー/確認は form が 800px 制限されているが、完了画面は form がないため
   .p-event-reservation 側で同じ max-width を持たせる。 */
body#event-reservation .p-event-reservation {
  max-width: 800px;
  margin: 0 auto;
}

/* 完了画面の「ご予約ありがとうございます」通知（p-notification、--warning なし）。
   エラー通知と同構造で primary カラーのバリアントを作る。 */
body#event-reservation .p-notification:not(.p-notification--warning) {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--rw-primary);
  background-color: color-mix(in srgb, var(--rw-primary) 10%, transparent);
  color: var(--rw-text-primary);
  font-family: var(--rw-font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  border-radius: 0;
}
body#event-reservation .p-notification:not(.p-notification--warning) strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-heading);
  color: var(--rw-text-primary);
}
/* 通知本文中の <br> を無効化し、自然な折り返しに任せる。
   ただし警告通知（バリデーション失敗時）は <br> 区切りで複数エラーが出力されるため、
   `:not(.p-notification--warning)` で除外し、警告内の <br> は残す。 */
body#event-reservation .p-notification:not(.p-notification--warning) br {
  display: none;
}

/* ボタンと戻るリンクの並び。モバイルでは縦積み、デスクトップでは横並び。 */
body#event-reservation .p-link-unit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0;
}
@media (max-width: 767px) {
  body#event-reservation .p-link-unit {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  body#event-reservation .p-link-unit .p-link-text {
    align-self: center;
  }
}

/* 完了画面「日程」下の「Googleカレンダーに登録」リンクを Rewind 風の小ボタンに。 */
body#event-reservation .p-confirm-list__button {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.4rem 0.9rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--rw-primary);
  background: transparent;
  border: 1px solid var(--rw-primary);
  border-radius: 0;
  text-decoration: none;
  transition: color var(--rw-transition), background var(--rw-transition);
}
body#event-reservation .p-confirm-list__button:hover {
  color: var(--rw-bg-main);
  background: var(--rw-primary);
}

/* ==========================================================================
   イベント予約 一覧ページ（/reservation/event/）
   ========================================================================== */

/* 素の .p-fieldset は装飾なしのコンテナ。一覧・詳細で共通して使われる */
body#event-reservation .p-fieldset {
  margin: 0 0 1.5rem;
}
body#event-reservation .p-fieldset:not(.p-fieldset--bgcolor) > .p-fieldset__body {
  margin: 0;
  padding: 0;
}

/* 「全N件」カウント */
body#event-reservation .p-result-stats {
  margin: 0 0 1rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-heading);
  text-transform: uppercase;
  color: var(--rw-text-secondary);
}

/* サービス一覧（カードの縦積み） */
body#event-reservation .p-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
body#event-reservation .p-service-list__item {
  margin: 0;
  padding: 0;
  background-color: var(--rw-surface-alt);
  border: 1px solid var(--rw-border);
  transition: border-color var(--rw-transition), background var(--rw-transition);
}
body#event-reservation .p-service-list__item:hover {
  border-color: var(--rw-primary);
  background-color: var(--rw-surface);
}
body#event-reservation .p-service-list__item > a {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  padding: 1rem;
  color: var(--rw-text-primary);
  text-decoration: none;
}
body#event-reservation .p-service-list__item > a:hover {
  color: var(--rw-text-primary);
}
body#event-reservation .p-service-list__detail {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}
body#event-reservation .p-service-text__title {
  margin: 0;
  font-family: var(--rw-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--rw-text-primary);
  letter-spacing: 0.03em;
}
body#event-reservation .p-service-text__price {
  margin: 0;
  font-family: var(--rw-font-ui);
  font-size: 0.9375rem;
  color: var(--rw-accent);
  letter-spacing: 0.03em;
}
body#event-reservation .p-service-list__thumbnail {
  flex: 0 0 160px;
  width: 160px;
  height: 110px;
  background-color: var(--rw-bg-main);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rw-border);
}
@media (max-width: 767px) {
  body#event-reservation .p-service-list__item > a {
    flex-direction: column-reverse;
    gap: 0.85rem;
    padding: 0.9rem;
  }
  body#event-reservation .p-service-list__thumbnail {
    flex: 0 0 auto;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  }
}

/* ==========================================================================
   イベント予約 詳細ページ（/reservation/event/detail/xxx）
   ========================================================================== */

/* サービス詳細カード */
body#event-reservation .p-fieldset.p-fieldset--bgcolor:has(.p-service-detail) {
  padding: 1.5rem;
  background-color: var(--rw-surface-alt);
  border: 1px solid var(--rw-border);
}
body#event-reservation .p-service-detail {
  display: grid;
  gap: 0.75rem;
}
body#event-reservation .p-service-detail__title {
  margin: 0;
  font-family: var(--rw-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--rw-tracking-heading);
  color: var(--rw-text-primary);
}
body#event-reservation .p-service-detail__price {
  margin: 0;
  font-family: var(--rw-font-ui);
  font-size: 1rem;
  color: var(--rw-accent);
  letter-spacing: 0.03em;
}
body#event-reservation .p-service-detail__thumbnail {
  margin: 0.5rem 0;
  border: 1px solid var(--rw-border);
  background-color: var(--rw-bg-main);
}
body#event-reservation .p-service-detail__thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}
body#event-reservation .p-service-detail__explanation {
  margin: 0;
  font-family: var(--rw-font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--rw-text-primary);
}
body#event-reservation .p-service-detail__start {
  margin: 0.25rem 0 0;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--rw-accent);
  background-color: rgba(232, 168, 124, 0.10);
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  color: var(--rw-text-secondary);
}

/* カレンダー本体（v-date-picker）の枠調整。
   VCalendar 側が .vc-container に角丸 + 独自枠線を持っているため、
   自前の外枠は付けず、VCalendar の内部枠線だけを Rewind のフラット調に上書きする。 */
body#event-reservation .p-event-reservation__calendar {
  margin: 0 0 1.25rem;
}
body#event-reservation .p-event-reservation__calendar .vc-container,
body#event-reservation .p-event-reservation__calendar .vc-bordered {
  border-radius: 0;
  border-color: var(--rw-border);
  background-color: var(--rw-surface);
}

/* v-calendar 2.4.1 の既定カラー（blue / gray 円）を Rewind の primary / accent に差し替える。
   shop 側で color プロパティが未指定のため .vc-blue クラスが付与されるが、
   テーマとしては色クラスに依存せず .vc-highlight-* を直接上書きして常に Rewind 色で塗る。
   NOTE: 以下の .vc-highlight* / .vc-bar 等に付く !important は、v-calendar 自体が
   詳細度の高い独自セレクタ（一部はインラインスタイル相当）でカラーを当てているため、
   テーマ側のセレクタだけでは確実に勝てない。!important で必ず上書きする。 */
body#event-reservation .p-event-reservation__calendar .vc-title {
  font-family: var(--rw-font-display);
  font-weight: 600;
  color: var(--rw-text-primary);
  letter-spacing: var(--rw-tracking-heading);
}
body#event-reservation .p-event-reservation__calendar .vc-weekday {
  color: var(--rw-text-secondary);
  font-family: var(--rw-font-ui);
  letter-spacing: 0.05em;
  font-weight: 500;
}
/* ナビ矢印（< / >）のホバー背景 */
body#event-reservation .p-event-reservation__calendar .vc-arrow:hover,
body#event-reservation .p-event-reservation__calendar .vc-nav-arrow:hover {
  background-color: color-mix(in srgb, var(--rw-primary) 10%, transparent);
  border-radius: 0;
}
body#event-reservation .p-event-reservation__calendar .vc-arrow svg,
body#event-reservation .p-event-reservation__calendar .vc-nav-arrow svg {
  color: var(--rw-text-primary);
}
/* 日セルの数字ホバー（予約可能日の「21」など、薄グレー円を primary 薄色に） */
body#event-reservation .p-event-reservation__calendar .vc-day-content:hover:not(.is-disabled) {
  background-color: color-mix(in srgb, var(--rw-primary) 10%, transparent);
  border-radius: 0;
}
body#event-reservation .p-event-reservation__calendar .vc-day-content:focus:not(.is-disabled) {
  background-color: color-mix(in srgb, var(--rw-primary) 15%, transparent);
}
/* 選択日の塗りつぶし円（「27」）を primary に、角もフラット化 */
body#event-reservation .p-event-reservation__calendar .vc-highlight,
body#event-reservation .p-event-reservation__calendar .vc-highlight-bg-solid,
body#event-reservation .p-event-reservation__calendar .vc-highlights .vc-highlight {
  background-color: var(--rw-primary) !important;
  border-color: var(--rw-primary) !important;
  border-radius: 0 !important;
}
/* 選択日の薄色背景バリアント（範囲選択や "今日" マーカー等）を accent 薄色に */
body#event-reservation .p-event-reservation__calendar .vc-highlight-bg-light {
  background-color: rgba(232, 168, 124, 0.18) !important;
  border-radius: 0 !important;
}
/* 今日の日付マーカー。
   v-calendar 2.4.1 は .vc-day.is-today クラスを付与するが既定スタイルは未定義。
   shop 側で today 属性は登録されていないため、テーマ側で accent 枠線を当てて視認性を確保する。
   選択時は .vc-highlight-bg-solid 側（primary 塗りつぶし）が優先される。 */
body#event-reservation .p-event-reservation__calendar .vc-day.is-today .vc-day-content {
  border: 1px solid var(--rw-accent);
  border-radius: 0;
  color: var(--rw-accent);
  font-weight: 600;
}
/* 選択日の上に載る数字は bg-main で抜き色に */
body#event-reservation .p-event-reservation__calendar .vc-highlight-content-solid,
body#event-reservation .p-event-reservation__calendar .vc-highlight-content-light,
body#event-reservation .p-event-reservation__calendar .vc-highlight-content-outline {
  color: var(--rw-bg-main) !important;
}
/* 予約可能日マーカーの bar（.vc-bar）を primary に、在庫切れ日は text-muted に */
body#event-reservation .p-event-reservation__calendar .vc-bar {
  background-color: var(--rw-primary) !important;
}
body#event-reservation .p-event-reservation__calendar .vc-bars ~ .vc-bars .vc-bar,
body#event-reservation .p-event-reservation__calendar .vc-gray .vc-bar {
  background-color: var(--rw-text-muted) !important;
}
/* フィルタ解除リンク（クリックされた日の右に表示） */
body#event-reservation .p-event-reservation__cancel-filter {
  display: inline-block;
  margin-left: 0.75rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--rw-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body#event-reservation .p-event-reservation__cancel-filter:hover {
  color: var(--rw-accent);
}

/* 予約可能日一覧 */
body#event-reservation .p-reservation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
body#event-reservation .p-reservation-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background-color: var(--rw-surface-alt);
  border: 1px solid var(--rw-border);
}
body#event-reservation .p-reservation-list__none {
  padding: 1rem;
  text-align: center;
  color: var(--rw-text-secondary);
  font-family: var(--rw-font-body);
  background-color: var(--rw-surface-alt);
  border: 1px dashed var(--rw-border);
}
body#event-reservation .p-reservation-list__none p { margin: 0; }
body#event-reservation .p-reservation-list__date-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}
body#event-reservation .p-reservation-list__date {
  margin: 0;
  font-family: var(--rw-font-body);
  font-size: 0.9375rem;
  color: var(--rw-text-primary);
}
body#event-reservation .p-reservation-list__time {
  margin: 0;
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  color: var(--rw-text-secondary);
  letter-spacing: 0.03em;
}
body#event-reservation .p-reservation-list__time--pick-date {
  color: var(--rw-text-primary);
  font-weight: 600;
}
body#event-reservation .p-reservation-list__note {
  margin: 0;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  color: var(--rw-text-muted);
  letter-spacing: 0.02em;
}
body#event-reservation .p-reservation-list__note > span + span {
  margin-left: 0.75rem;
}
body#event-reservation .p-reservation-list__link {
  flex: 0 0 auto;
}

/* 予約ボタン（プライマリ / 無効 / 「すべて表示」） */
body#event-reservation .p-link-button {
  display: inline-block;
  padding: 0.55rem 1.25rem;
  font-family: var(--rw-font-display);
  font-size: 0.875rem;
  letter-spacing: var(--rw-tracking-heading);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--rw-transition), color var(--rw-transition), border-color var(--rw-transition);
}
body#event-reservation .p-link-button--primary {
  color: var(--rw-bg-main);
  background-color: var(--rw-primary);
  border-color: var(--rw-primary);
}
body#event-reservation .p-link-button--primary:hover {
  background-color: var(--rw-accent);
  border-color: var(--rw-accent);
  color: var(--rw-text-primary);
}
body#event-reservation .p-link-button--disabled {
  color: var(--rw-text-muted);
  background-color: transparent;
  border-color: var(--rw-border-strong);
  cursor: not-allowed;
  margin: 0;
}
body#event-reservation .p-link-button--more {
  display: block;
  width: 100%;
  margin-top: 1rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-primary);
  background-color: transparent;
  border-color: var(--rw-text-primary);
}
body#event-reservation .p-link-button--more:hover {
  background-color: var(--rw-accent);
  border-color: var(--rw-accent);
  color: var(--rw-bg-main);
}

@media (max-width: 767px) {
  body#event-reservation .p-reservation-list__item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  body#event-reservation .p-link-button {
    display: block;
    width: 100%;
  }
  body#event-reservation .p-event-reservation__cancel-filter {
    display: block;
    margin: 0.4rem 0 0;
  }
}

label,
.form-label {
  display: block;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-heading);
  text-transform: uppercase;
  color: var(--rw-text-secondary);
  margin-bottom: 0.4rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea,
.form-control {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: var(--rw-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rw-text-primary);
  background-color: var(--rw-surface);
  border: 1px solid var(--rw-border-strong);
  border-radius: 0;
  transition: border-color var(--rw-transition), box-shadow var(--rw-transition);
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none;
  border-color: var(--rw-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-primary) 15%, transparent);
}
textarea { min-height: 140px; resize: vertical; }

.button,
input[type="submit"],
button[type="submit"],
button.btn,
.btn,
.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-family: var(--rw-font-display);
  font-size: 0.95rem;
  letter-spacing: var(--rw-tracking-heading);
  text-transform: uppercase;
  color: var(--rw-bg-main);
  background-color: var(--rw-primary);
  border: 1px solid var(--rw-primary);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--rw-transition), color var(--rw-transition), border-color var(--rw-transition);
}
.button:hover, .button:active,
input[type="submit"]:hover, input[type="submit"]:active,
button[type="submit"]:hover, button[type="submit"]:active,
button.btn:hover, button.btn:active,
.btn:hover, .btn:active,
.btn-primary:hover, .btn-primary:active {
  background-color: var(--rw-accent);
  border-color: var(--rw-accent);
  color: var(--rw-text-primary);
}
/* Bootstrap 5.3 は `.btn:focus-visible` で `--bs-btn-hover-bg` を当てるため、
   テーマ側で上書きしないと選択カラーから外れる。ここでは通常時の主カラーを
   キープしつつ、accent の outline で focus を視認可能にする。 */
.button:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
button.btn:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible {
  background-color: var(--rw-primary);
  border-color: var(--rw-primary);
  color: var(--rw-bg-main);
  outline: 2px solid var(--rw-accent);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-secondary {
  background-color: transparent;
  color: var(--rw-text-primary);
  border-color: var(--rw-text-primary);
}
.btn-secondary:hover {
  background-color: var(--rw-text-primary);
  color: var(--rw-bg-main);
}

.personal_info {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background-color: rgba(44, 44, 44, 0.03);
  border-left: 3px solid var(--rw-accent);
  font-size: 0.875rem;
  color: var(--rw-text-secondary);
}

/* ==========================================================================
   統一フォームレイヤー
   対象: top_contact / contact / reservation / event-reservation
   目的: 近接の法則でラベル⇔入力欄をグループ化し、グループ間とボタン前に
         十分な余白を確保する
   ========================================================================== */
.section.contact form.contact_form,
body#contact form[name="frm"],
body#reservation form[name="frm"],
body#event-reservation form {
  max-width: 800px;
  margin: 0 auto;
}

.section.contact form.contact_form input[type="hidden"],
body#contact form[name="frm"] input[type="hidden"],
body#reservation form[name="frm"] input[type="hidden"],
body#event-reservation form input[type="hidden"] {
  display: none;
}

/* {question} は label + <br> + input + <br> など随所に <br> が挟まれて出力される。
   <br> が残ると 1 行分（約 17px）の余白ができ、特に入力欄→次グループ間で間延びする。
   ラッパ内の <br> はレイアウト目的ではなく Smarty テンプレート由来の改行なので一律非表示にする。
   `.personal_info` や `.message` 内の改行を誤って消さないよう、
   スコープは `.contact_area` / `.reservation_area` 配下に限定する。 */
.section.contact form.contact_form :is(.contact_area, .reservation_area) br,
body#contact form[name="frm"] :is(.contact_area, .reservation_area) br,
body#reservation form[name="frm"] :is(.contact_area, .reservation_area) br,
body#event-reservation form :is(.contact_area, .reservation_area) br {
  display: none;
}

/* ラベルは直下の入力欄と近接させる（0.4rem） */
.section.contact form.contact_form label,
body#contact form[name="frm"] label,
body#reservation form[name="frm"] label,
body#event-reservation form label {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

/* 入力欄は次のグループとの間に明確な余白を開ける（1.75rem） */
.section.contact form.contact_form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select),
body#contact form[name="frm"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select),
body#reservation form[name="frm"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select),
body#event-reservation form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select) {
  margin-top: 0;
  margin-bottom: 1.75rem;
}

/* 送信ボタンは入力群から明確に離す（2.5rem） */
.section.contact form.contact_form :is(input[type="submit"], button[type="submit"], .button.btn, .btn.btn-primary),
body#contact form[name="frm"] :is(input[type="submit"], button[type="submit"], .button.btn, .btn.btn-primary),
body#reservation form[name="frm"] :is(input[type="submit"], button[type="submit"], .button.btn, .btn.btn-primary),
body#event-reservation form :is(input[type="submit"], button[type="submit"], .button.btn, .btn.btn-primary) {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

/* reCAPTCHAは直前の入力との距離を確保 */
.section.contact form.contact_form .g-recaptcha,
.section.contact form.contact_form [id*="recaptcha" i],
body#contact form[name="frm"] .g-recaptcha,
body#contact form[name="frm"] [id*="recaptcha" i] {
  margin-top: 2rem;
}

/* モバイルでは送信ボタンを最大幅に（event-reservation の .p-link-unit 縦積みと揃える） */
@media (max-width: 767px) {
  .section.contact form.contact_form :is(input[type="submit"], button[type="submit"], .button.btn, .btn.btn-primary),
  body#contact form[name="frm"] :is(input[type="submit"], button[type="submit"], .button.btn, .btn.btn-primary),
  body#reservation form[name="frm"] :is(input[type="submit"], button[type="submit"], .button.btn, .btn.btn-primary) {
    display: block;
    width: 100%;
  }
}

/* 年月日・時分の select/input は横並び表示（必要時折り返し） */
.section.contact form.contact_form :is(input, select):is([name*="year" i], [name*="month" i], [name*="day" i], [name*="hour" i], [name*="minute" i], [id*="year" i], [id*="month" i], [id*="day" i], [id*="hour" i], [id*="minute" i]),
body#contact form[name="frm"] :is(input, select):is([name*="year" i], [name*="month" i], [name*="day" i], [name*="hour" i], [name*="minute" i], [id*="year" i], [id*="month" i], [id*="day" i], [id*="hour" i], [id*="minute" i]),
body#reservation form[name="frm"] :is(input, select):is([name*="year" i], [name*="month" i], [name*="day" i], [name*="hour" i], [name*="minute" i], [id*="year" i], [id*="month" i], [id*="day" i], [id*="hour" i], [id*="minute" i]),
body#event-reservation form :is(input, select):is([name*="year" i], [name*="month" i], [name*="day" i], [name*="hour" i], [name*="minute" i], [id*="year" i], [id*="month" i], [id*="day" i], [id*="hour" i], [id*="minute" i]) {
  display: inline-block;
  width: clamp(80px, 18vw, 120px);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  vertical-align: middle;
}

/* フィールドグループ（.reservation_area / .contact_area）間の余白 */
.section.contact form.contact_form :is(.reservation_area, .contact_area) + :is(.reservation_area, .contact_area),
body#contact form[name="frm"] :is(.reservation_area, .contact_area) + :is(.reservation_area, .contact_area),
body#reservation form[name="frm"] :is(.reservation_area, .contact_area) + :is(.reservation_area, .contact_area),
body#event-reservation form :is(.reservation_area, .contact_area) + :is(.reservation_area, .contact_area) {
  margin-top: 1.75rem;
}

/* ラッパ内の入力要素は下マージンをラッパ側に委ね、二重余白を回避。
   （入力要素の margin-bottom 1.75rem + 次ラッパの margin-top 1.75rem が足し合わさって
     テキストフォーム大 → チェックボックス間などで間延びするのを防ぐ） */
.section.contact form.contact_form :is(.reservation_area, .contact_area) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select),
body#contact form[name="frm"] :is(.reservation_area, .contact_area) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select),
body#reservation form[name="frm"] :is(.reservation_area, .contact_area) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select),
body#event-reservation form :is(.reservation_area, .contact_area) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select) {
  margin-bottom: 0;
}

/* テキストフォーム小・中・大のサイズ出し分け
   入力フィールドに付く `.contact_small` / `.contact_medium` / `.contact_large` で
   幅を出し分ける。期待される文字量のヒントになるため、デスクトップでは幅を区別。
   モバイル（<768px）はタップしやすさ優先で全て 100% を維持する。 */
@media (min-width: 768px) {
  .section.contact form.contact_form input.contact_small,
  body#contact form[name="frm"] input.contact_small,
  body#reservation form[name="frm"] input.contact_small {
    width: clamp(140px, 28%, 220px);
  }
  .section.contact form.contact_form input.contact_medium,
  body#contact form[name="frm"] input.contact_medium,
  body#reservation form[name="frm"] input.contact_medium {
    width: clamp(260px, 55%, 440px);
  }
}
/* 大は textarea として出力される想定。横幅は 100% のまま、縦を少し高めに。 */
.section.contact form.contact_form textarea.contact_large,
body#contact form[name="frm"] textarea.contact_large,
body#reservation form[name="frm"] textarea.contact_large {
  min-height: 160px;
}

/* ラジオ・チェックボックスは各行を縦積み */
.section.contact form.contact_form :is(.reservation_area, .contact_area) :is(.radio, .checkbox),
body#contact form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox),
body#reservation form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox),
body#event-reservation form :is(.reservation_area, .contact_area) :is(.radio, .checkbox) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.section.contact form.contact_form :is(.reservation_area, .contact_area) :is(.radio, .checkbox) + :is(.radio, .checkbox),
body#contact form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox) + :is(.radio, .checkbox),
body#reservation form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox) + :is(.radio, .checkbox),
body#event-reservation form :is(.reservation_area, .contact_area) :is(.radio, .checkbox) + :is(.radio, .checkbox) {
  margin-top: 0.75rem;
}

.section.contact form.contact_form :is(.reservation_area, .contact_area) :is(.radio, .checkbox) :is(label, a),
body#contact form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox) :is(label, a),
body#reservation form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox) :is(label, a),
body#event-reservation form :is(.reservation_area, .contact_area) :is(.radio, .checkbox) :is(label, a) {
  display: inline;
  width: auto;
  margin: 0;
  color: var(--rw-text-primary);
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
}

.section.contact form.contact_form :is(.reservation_area, .contact_area) :is(.radio, .checkbox) input:is([type="radio"], [type="checkbox"]),
body#contact form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox) input:is([type="radio"], [type="checkbox"]),
body#reservation form[name="frm"] :is(.reservation_area, .contact_area) :is(.radio, .checkbox) input:is([type="radio"], [type="checkbox"]),
body#event-reservation form :is(.reservation_area, .contact_area) :is(.radio, .checkbox) input:is([type="radio"], [type="checkbox"]) {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--rw-primary);
  cursor: pointer;
  flex: 0 0 auto;
}

/* コース詳細の二重表示防止：JSがカードを生成したら、元の詳細要素は隠す。
   !important は、shop 側が出力する元 DOM に id ベース等の高詳細度ルールが当たる可能性が
   あり、テーマセレクタだけでは確実に隠せないため。JS 状態クラス連動の確定的な非表示として使う。 */
body.js-rewind-course-detail-ready form :is(.reservation_course_body, [id^="c_d_"]) {
  display: none !important;
}

/* JSが生成する選択中コース詳細カード */
.h-reservation-course-detail {
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--rw-border-strong);
  border-left: 3px solid var(--rw-primary);
  background: var(--rw-surface-alt);
  color: var(--rw-text-primary);
}

.h-reservation-course-detail img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   9. ページ個別（メニュー / カレンダー / スタッフ / 求人 / クーポン など）
   -------------------------------------------------------------------------- */
.page_title {
  padding-top: 1rem;
}

/* menu */
body#menu .category_title {
  font-family: var(--rw-font-display);
  font-size: 1.25rem;
  letter-spacing: var(--rw-tracking-heading);
  padding: 0.75rem 0;
  border-bottom: 2px solid var(--rw-primary);
  margin: 2rem 0 1rem;
}
body#menu .article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rw-border);
}
body#menu .article .photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
body#menu .menu-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25em 1em;
}
body#menu .recommend {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  margin-right: 0.5rem;
  background: var(--rw-accent);
  color: var(--rw-text-primary);
  font-family: var(--rw-font-ui);
  font-size: 0.7rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
}
body#menu .price {
  font-family: var(--rw-font-display);
  color: var(--rw-text-primary);
  white-space: nowrap;
}

/* menu detail (個別ページ /menu/{id}) */
body#menu.is-menu-detail .article {
  display: block;
  padding: 0;
  border-bottom: none;
}
body#menu.is-menu-detail .photo {
  margin-bottom: 1.5rem;
}
body#menu.is-menu-detail .photo img {
  aspect-ratio: 3 / 2;
}
body#menu.is-menu-detail .menu-header {
  display: block;
  margin-bottom: 1rem;
}
body#menu.is-menu-detail .article_title {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
body#menu.is-menu-detail .price {
  font-size: 1.5rem;
}
body#menu.is-menu-detail .text.textfield {
  margin-top: 1rem;
}

/* diary / info detail */
.article_title {
  font-size: 1.35rem;
  letter-spacing: var(--rw-tracking-heading);
}

/* info list & detail ─ hybrid journal layout
   マークアップ: .article > .date + .body (.article_title + .photo + .textfield)
   写真がある記事はデスクトップで左右2カラム、無い記事は1カラム。
   一覧では #01, #02... の通し番号を付し、タイトル上部に太い primary 罫線。
   詳細ページ（:only-child）では番号を消し、本文幅を max-width で可読性優先。 */
body#info .autopagerize_page_element {
  counter-reset: rw-article;
}

body#info .article {
  counter-increment: rw-article;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.85rem;
  padding: 0 0 3rem;
  margin-bottom: 3rem;
}
body#info .article:last-child,
body#info .article:only-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

body#info .article:not(:only-child)::before {
  content: "#" counter(rw-article, decimal-leading-zero);
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-secondary);
  text-transform: uppercase;
}

body#info .article > .date {
  font-family: var(--rw-font-display);
  font-size: 1.15rem;
  color: var(--rw-primary);
  letter-spacing: var(--rw-tracking-heading);
}

body#info .article > .body {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
  column-gap: 2rem;
  grid-template-areas:
    "title"
    "photo"
    "text";
}
body#info .article .article_title {
  grid-area: title;
  margin: 0;
  padding-top: 0.85rem;
  border-top: 3px solid var(--rw-primary);
  line-height: 1.35;
}
body#info .article .article_title a {
  color: inherit;
}
body#info .article .article_title a:hover,
body#info .article .article_title a:focus {
  color: var(--rw-primary);
}
body#info .article .photo {
  grid-area: photo;
  margin: 0;
}
body#info .article .photo img {
  width: 100%;
  height: auto;
  display: block;
}
body#info .article .textfield {
  grid-area: text;
  margin: 0;
}
body#info .article > .body:not(:has(.photo img)) .photo {
  display: none;
}

/* デスクトップ: 写真あり記事は左右2カラム (一覧のみ) */
@media (min-width: 768px) {
  body#info .article:not(:only-child) > .body:has(.photo img) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas:
      "photo title"
      "photo text";
    align-items: start;
  }
  body#info .article:not(:only-child) > .body:has(.photo img) .photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* 詳細ページ (1件のみ): 本文幅を絞って可読性優先、写真は幅いっぱい */
body#info .article:only-child .textfield {
  max-width: 42em;
}

/* モバイル: タイトの内部余白でスタック */
@media (max-width: 767px) {
  body#info .article {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    row-gap: 0.7rem;
  }
  body#info .article > .body {
    row-gap: 0.75rem;
  }
}

/* diary list & detail ─ ジャーナル風レイアウト
   構造: .textfield > .free-content > .p-diary > .p-diary__unit >
       .p-diary__date + .p-diary__title + .p-diary__category + .p-diary__body
   画像領域がないため写真2カラムは適用せず、タイトル直上の太い罫線・通し番号・
   タイトルリンク色の統一で記事の区切りを表現する。
   `.textfield a { text-decoration: underline }` の指定は
   タイトル / カテゴリでは打ち消す。 */
body#diary .p-diary {
  counter-reset: rw-article;
}

body#diary .p-diary__unit {
  counter-increment: rw-article;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.85rem;
  padding: 0 0 3rem;
  margin-bottom: 3rem;
}
body#diary .p-diary__unit:last-child,
body#diary .p-diary__unit:only-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

body#diary .p-diary__unit:not(:only-child)::before {
  content: "#" counter(rw-article, decimal-leading-zero);
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-secondary);
  text-transform: uppercase;
}

body#diary .p-diary__date {
  font-family: var(--rw-font-display);
  font-size: 1.15rem;
  color: var(--rw-primary);
  letter-spacing: var(--rw-tracking-heading);
  font-variant-numeric: tabular-nums;
}

body#diary .p-diary__title {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 3px solid var(--rw-primary);
  line-height: 1.35;
  font-size: 1.35rem;
}
body#diary .p-diary__title a {
  color: inherit;
  text-decoration: none;
}
body#diary .p-diary__title a:hover,
body#diary .p-diary__title a:focus {
  color: var(--rw-primary);
}

/* カテゴリは 90s 雑誌のセクションラベル風に罫線囲みでラベル化する。
   Rule 2（罫線/グリッド装飾）と Rule 3（Editorial Typography）の両方に呼応させ、
   .date との視覚差を確保する。複数カテゴリが並ぶケースに備えて、
   ラベル化はラッパではなくリンク要素 <a> に施す（プレフィックスやセパレータの
   テキストノードがあっても破綻しないよう、ラッパは inline のまま）。
   日本語カテゴリは uppercase が無効、英字カテゴリも入力をそのまま表示させたい
   （admin入力と表示の不一致を避ける）ため text-transform は指定しない。 */
body#diary .p-diary__category {
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-secondary);
  line-height: 2.2;
}
body#diary .p-diary__category a {
  display: inline-block;
  padding: 0.2em 0.7em;
  margin-right: 0.3rem;
  border: 1.5px solid var(--rw-text-secondary);
  border-radius: 0;
  color: var(--rw-text-secondary);
  text-decoration: none;
  transition: background var(--rw-transition), border-color var(--rw-transition), color var(--rw-transition);
}
body#diary .p-diary__category a:hover,
body#diary .p-diary__category a:focus {
  background: var(--rw-primary);
  border-color: var(--rw-primary);
  color: var(--rw-bg-main);
}
/* カテゴリ未設定の記事では <a> がテキストなしで出力され、罫線だけの空枠が
   見えてしまう。空 <a> を非表示にし、さらにラッパ自体に意味のある中身が
   1 つもなければラッパごと畳んで縦余白も詰める。 */
body#diary .p-diary__category a:empty {
  display: none;
}
body#diary .p-diary__category:not(:has(a:not(:empty))) {
  display: none;
}

body#diary .p-diary__body {
  margin: 0;
}

/* 詳細ページ (1件のみ): 本文幅を絞って可読性優先 */
body#diary .p-diary__unit:only-child .p-diary__body {
  max-width: 42em;
}

@media (max-width: 767px) {
  body#diary .p-diary__unit {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    row-gap: 0.7rem;
  }
}

/* ==========================================================================
   calendar
   対象マークアップ:
     body#calendar .wrap_calendar > .navi + table.table_calendar
       table.table_calendar > tr > th(.sun/.sat) + tr > td(.sun/.sat/.holiday) > p.day + a.hotspot>img
     body#calendar .schedule > dl.article(dt.date + dd > span.category + a > span.schedule_time + span.schedule_title)
     body#calendar .details > div(span.category + span.date) + h3 + div.body.textfield + div.image
   ========================================================================== */

/* 月ナビゲーション */
.wrap_calendar {
  padding: 1rem 1.25rem 1.25rem;
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
}
.wrap_calendar .navi {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px dashed var(--rw-border-strong);
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  letter-spacing: var(--rw-tracking-heading);
  color: var(--rw-text-primary);
}
.wrap_calendar .navi a {
  color: var(--rw-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--rw-transition), border-color var(--rw-transition);
}
.wrap_calendar .navi a:hover {
  color: var(--rw-accent);
  border-bottom-color: var(--rw-accent);
}

/* カレンダー本体 */
.table_calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--rw-font-ui);
}
.table_calendar th {
  padding: 0.5rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--rw-tracking-heading);
  text-align: center;
  color: var(--rw-text-secondary);
  border-bottom: 1px solid var(--rw-border-strong);
  border-right: 1px dashed var(--rw-border);
  background: transparent;
}
.table_calendar tr th:last-child { border-right: 0; }
.table_calendar th.sun { color: var(--rw-accent); }
.table_calendar th.sat { color: var(--rw-primary); }
.table_calendar td {
  padding: 0.375rem 0.25rem 0.5rem;
  height: 4.5rem;
  vertical-align: top;
  border-bottom: 1px dashed var(--rw-border);
  border-right: 1px dashed var(--rw-border);
  text-align: center;
  position: relative;
}
.table_calendar tr td:last-child { border-right: 0; }
.table_calendar tr:last-child td { border-bottom: 0; }
.table_calendar .day {
  margin: 0 0 0.25rem;
  font-family: var(--rw-font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--rw-text-primary);
  line-height: 1.2;
}
.table_calendar td.sun .day { color: var(--rw-accent); }
.table_calendar td.sat .day { color: var(--rw-primary); }
.table_calendar td.holiday { background: rgba(232, 168, 124, 0.06); }
.table_calendar td.holiday .day { color: var(--rw-accent); }
.table_calendar td img { max-width: 1.5rem; height: auto; vertical-align: middle; }
.table_calendar td a.hotspot {
  display: inline-block;
  transition: transform var(--rw-transition);
}
.table_calendar td a.hotspot:hover { transform: scale(1.15); }

/* 予定リスト（カレンダー下部） */
body#calendar .schedule {
  margin-top: 1.5rem;
}
body#calendar .schedule .article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  padding: 0.875rem 0;
  margin: 0;
  border-bottom: 1px dashed var(--rw-border-strong);
}
body#calendar .schedule .article:last-child { border-bottom: 0; }
body#calendar .schedule .date {
  font-family: var(--rw-font-display);
  color: var(--rw-primary);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  margin: 0;
}
body#calendar .schedule dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}
body#calendar .schedule .category {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-primary);
  border: 1px solid var(--rw-border-strong);
  background: var(--rw-bg-main);
}
body#calendar .schedule .schedule_time {
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--rw-text-secondary);
}
body#calendar .schedule dd a {
  color: var(--rw-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--rw-transition), border-color var(--rw-transition);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}
body#calendar .schedule dd a:hover {
  color: var(--rw-accent);
  border-bottom-color: var(--rw-accent);
}
body#calendar .schedule .schedule_title {
  font-family: var(--rw-font-body);
  font-size: 1rem;
  color: inherit;
}

/* カレンダー詳細ページ（/calendar/{id}） */
body#calendar .details {
  padding: 0.5rem 0 1.5rem;
}
body#calendar .details > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
body#calendar .details .category {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-primary);
  border: 1px solid var(--rw-border-strong);
  background: var(--rw-bg-main);
}
body#calendar .details .date {
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--rw-text-secondary);
}
body#calendar .details h3 {
  font-family: var(--rw-font-display);
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  color: var(--rw-text-primary);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--rw-primary);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
body#calendar .details .body.textfield { margin-bottom: 1.5rem; }
body#calendar .details .image { margin-top: 1.5rem; }
body#calendar .details .image img { max-width: 100%; height: auto; }

/* calendar: モバイル対応 */
@media (max-width: 767px) {
  .wrap_calendar { padding: 0.75rem 0.75rem 1rem; }
  .wrap_calendar .navi { gap: 0.25rem 0.75rem; font-size: 0.8125rem; }
  .table_calendar th { padding: 0.375rem 0.125rem; font-size: 0.6875rem; }
  .table_calendar td { padding: 0.25rem 0.125rem 0.375rem; height: 3.25rem; }
  .table_calendar .day { font-size: 0.875rem; }
  .table_calendar td img { max-width: 1.125rem; }
  body#calendar .schedule .article {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
  body#calendar .details h3 { font-size: 1.375rem; padding-bottom: 0.5rem; }
}

/* staff / recruit */
.staff_list .article,
.recruit_list .article {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  padding: 1.5rem;
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  margin-bottom: 1.5rem;
}
.staff_list .article .photo img,
.recruit_list .article .photo img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}
.staff_list .position {
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: var(--rw-text-secondary);
}

/* ==========================================================================
   Staff free-page output (#custom_staff)
   ========================================================================== */
#custom_staff {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  counter-reset: rw-staff-counter;
}

@media (min-width: 768px) {
  #custom_staff {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  /* 90sエディトリアル風の微小オフセット（偶数番目を下げて紙面のリズムを出す） */
  #custom_staff .staff_wrap:nth-of-type(even) {
    transform: translateY(1.5rem);
  }
}

@media (min-width: 1024px) {
  #custom_staff {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* スタッフ1人の場合はマガジン風の横長フィーチャー記事レイアウトへ切り替え */
@media (min-width: 768px) {
  #custom_staff:has(.staff_wrap:only-of-type) {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: 0 auto;
  }

  #custom_staff .staff_wrap:only-of-type {
    display: grid;
    grid-template-columns: minmax(220px, 40%) 1fr;
    gap: 2rem;
    padding: 4.5rem 2rem 2rem;
    align-items: start;
    transform: none;
  }

  #custom_staff .staff_wrap:only-of-type .staff__text {
    align-self: start;
  }
}

#custom_staff > br {
  display: none;
}

#custom_staff .staff_wrap {
  position: relative;
  margin: 0;
  padding: 4.5rem 1.5rem 1.5rem;
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  border-left: 3px solid var(--rw-primary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-increment: rw-staff-counter;
}

/* エディトリアル風のスタッフ番号（01, 02, 03...） */
#custom_staff .staff_wrap::before {
  content: counter(rw-staff-counter, decimal-leading-zero);
  position: absolute;
  top: 0.9rem;
  left: 1.5rem;
  font-family: var(--rw-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--rw-primary);
  pointer-events: none;
}

#custom_staff .staff--image {
  float: none;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0;
  background-color: var(--rw-surface-alt);
  background-size: cover;
  background-position: center;
  border-radius: 0;
}

#custom_staff .staff__text {
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  text-align: left;
}

#custom_staff .staff__text--name {
  margin: 0;
  font-family: var(--rw-font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--rw-text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* 90sエディトリアル定番の emダッシュを名前の頭にプレフィックス */
#custom_staff .staff__text--name::before {
  content: "— ";
  color: var(--rw-primary);
  font-weight: 700;
}

#custom_staff .staff__text--job {
  margin: 0;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: var(--rw-primary);
}

#custom_staff .staff__text--description {
  margin: 0;
  color: var(--rw-text-primary);
  font-size: 0.9375rem;
  line-height: 1.75;
}

#custom_staff .staff__text--description p {
  margin: 0 0 0.6rem;
}

#custom_staff .staff__text--description p:last-child {
  margin-bottom: 0;
}

#custom_staff .staff__text__social {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rw-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

#custom_staff .staff__text__social_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding-bottom: 2px;
  background: transparent;
  color: var(--rw-text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#custom_staff .staff__text__social_icon img {
  width: 22px;
  height: 22px;
  margin: 0;
  object-fit: contain;
  display: block;
  vertical-align: middle;
}

#custom_staff .staff__text__social_icon:hover {
  border-bottom-color: var(--rw-primary);
  transform: translateY(-2px);
}

#custom_staff .staff__text__social_text {
  display: none;
}

/* ==========================================================================
   Recruit free-page output (#recruit.c-recruit-table)
   ========================================================================== */
#recruit.c-recruit-table {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
}

#recruit.c-recruit-table .c-recruit-table__note {
  padding: 0.9rem 1.25rem;
  margin: 0 0 1.5rem;
}

#recruit.c-recruit-table .c-recruit-table__note--message {
  background: var(--rw-surface-alt);
  border-left: 3px solid var(--rw-primary);
  color: var(--rw-text-primary);
  font-family: var(--rw-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
}

#recruit.c-recruit-table .c-recruit-table__row {
  display: block;
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  border: none;
  border-bottom: 1px solid var(--rw-border);
  background: transparent;
}

#recruit.c-recruit-table .c-recruit-table__row:last-of-type {
  margin-bottom: 1.5rem;
  border-bottom: none;
  padding-bottom: 0;
}

#recruit.c-recruit-table .c-recruit-table__header-cell {
  display: block;
  flex: none;
  padding: 0 0 0.4rem;
  margin: 0;
  background: transparent;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: var(--rw-primary);
}

#recruit.c-recruit-table .c-recruit-table__data-cell {
  display: block;
  flex: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--rw-text-primary);
  overflow-wrap: anywhere;
}

#recruit.c-recruit-table .c-recruit-table__data-cell br {
  line-height: 2;
}

#recruit.c-recruit-table .c-recruit-table__note--period {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--rw-text-secondary);
  font-size: 0.8125rem;
  text-align: right;
}

/* coupon */
.coupon_list .article {
  background: var(--rw-surface);
  border: 1px dashed rgba(44, 44, 44, 0.45);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.coupon_list .article::before,
.coupon_list .article::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rw-bg-main);
  border: 1px dashed rgba(44, 44, 44, 0.45);
  top: 50%; transform: translateY(-50%);
}
.coupon_list .article::before { left: -7px; }
.coupon_list .article::after { right: -7px; }
.coupon_list .qrcode img { width: 96px; height: 96px; }

.print {
  margin-top: 1.5rem;
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  letter-spacing: var(--rw-tracking-heading);
}
.print a {
  color: var(--rw-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--rw-transition), border-color var(--rw-transition);
}
.print a:hover {
  color: var(--rw-accent);
  border-bottom-color: var(--rw-accent);
}

/* event reservation */
.event_list .article {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   TinyMCE rich-text common styling
   TinyMCE で本文を入力しているページの .textfield ラッパー配下に共通適用する
   リッチテキスト・スタイル。対象は /free, /info, /diary, /menu, /event,
   /calendar 予定詳細, /staff, /recruit, /photo 写真説明, および top の
   ウェルカムメッセージ（.section.welcomemessage .message.textfield）。
   外側コンテナ装飾はスコープ外（フリーページ専用の card 装飾は body#free
   .free-content 側で定義する）。
   -------------------------------------------------------------------------- */
.free-content { padding: 1rem 0; }

/* 連続する要素に一定のリズムを与える。script/style は視覚要素ではないため除外。 */
.textfield > :not(script):not(style) + :not(script):not(style) {
  margin-top: 1.25rem;
}

.textfield :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--rw-font-display);
  color: var(--rw-text-primary);
  line-height: 1.3;
  letter-spacing: var(--rw-tracking-heading);
}

.textfield h1 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem); }
.textfield h2 { font-size: clamp(1.35rem, 1.6vw + 0.75rem, 1.75rem); }
.textfield h3 { font-size: clamp(1.2rem, 1.2vw + 0.75rem, 1.5rem); }
.textfield h4 { font-size: 1.125rem; }

/* h2 / h3 は下辺に primary 罫を引いて編集誌の小見出し扱いにする。
   クラス付き見出し（例: .p-diary__title など各ページが独自装飾しているもの）には
   影響させない。TinyMCE 出力のベアな <h2>/<h3> にのみ適用する。 */
.textfield :is(h2, h3):not([class]) {
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--rw-primary);
}

.textfield :is(h1, h2, h3, h4, h5, h6) + :not(script):not(style) {
  margin-top: 1rem;
}

.textfield p {
  margin: 0;
  color: var(--rw-text-primary);
}

/* グローバル .textfield a { text-decoration: underline } は既存のため、
   ここでは hover の色味のみ accent に切り替える。 */
.textfield a:hover { color: var(--rw-accent); }

.textfield :is(ul, ol):not([class]) {
  margin: 0;
  padding-left: 1.5rem;
}
.textfield ul:not([class]) { list-style: disc; }
.textfield ol:not([class]) { list-style: decimal; }
.textfield :is(ul, ol):not([class]) li { margin: 0; }
.textfield :is(ul, ol):not([class]) li::marker { color: var(--rw-primary); }
.textfield :is(ul ul, ol ul):not([class]) { list-style: circle; margin-top: 0.4rem; }
.textfield :is(ol ol, ul ol):not([class]) { list-style: lower-alpha; margin-top: 0.4rem; }

/* 引用は contact の .personal_info と同じ意匠（accent 左罫 + ごく薄い灰背景）に
   揃え、外枠カードの primary 罫と視覚的に競合しない「注釈」トーンを保つ。 */
.textfield blockquote:not([class]) {
  margin: 0;
  padding: 1rem 1.25rem;
  background-color: rgba(44, 44, 44, 0.03);
  border-left: 3px solid var(--rw-accent);
  font-size: 0.875rem;
  color: var(--rw-text-secondary);
}

.textfield hr:not([class]) {
  border: 0;
  border-top: 1px solid var(--rw-primary);
  margin: 1.5rem 0;
}

.textfield :is(img, video, iframe) {
  max-width: 100%;
  height: auto;
  background: var(--rw-surface-alt);
  border: 1px solid var(--rw-border);
}
.textfield iframe { border: 1px solid var(--rw-border); min-height: 240px; }

/* SNS アイコンのブランドカラー画像は .textfield の装飾 border を継承しない */
.textfield .staff__text__social_icon img,
.textfield .staff__text__social img {
  background: transparent;
  border: 0;
}

/* 表は「下辺だけに罫を引く」編集誌トーン。既存のクラス付き表には影響させない。 */
.textfield :is(table):not([class]) {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.textfield :is(table):not([class]) :is(th, td) {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rw-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.textfield :is(table):not([class]) th {
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: var(--rw-primary);
  border-bottom-color: var(--rw-primary);
  font-weight: 700;
  width: min(34%, 14em);
}

/* --------------------------------------------------------------------------
   /free 固有のカード装飾
   フリーページは TinyMCE 本文を 1 枚の編集カード（白 surface + 1px 外枠 +
   左 3px primary 罫）で囲むため、body#free 側だけに適用する。
   -------------------------------------------------------------------------- */
body#free #content > .inner > .textfield { padding: 0; }

body#free .free-content {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--rw-surface);
  border: 1px solid var(--rw-border);
  border-left: 3px solid var(--rw-primary);
  color: var(--rw-text-primary);
}

/* --------------------------------------------------------------------------
   10. フォトギャラリー / モーダル
   -------------------------------------------------------------------------- */
/* #index: アルバム一覧（軽モザイク）。
   album 直下に album_title + 複数の .thumb が並ぶ。album 自体を grid にして
   album_title を全幅配置、.thumb を均等配置しつつ、4枚以上あるアルバムでは
   1枚目の .thumb だけ 2x2 で大きく見せる編集誌的な軽モザイクに。
   CSS counter で各 thumb 右下に通し番号、アルバム見出しに ALBUM 01 を自動表示。 */
#index { counter-reset: album-no; }
.album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 3rem;
  counter-reset: album-photo;
  counter-increment: album-no;
}
.album_title {
  grid-column: 1 / -1;
  font-family: var(--rw-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-heading);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--rw-primary);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.album_title::before {
  content: "ALBUM " counter(album-no, decimal-leading-zero);
  display: block;
  font-family: var(--rw-font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-primary);
  margin-bottom: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.album .thumb {
  position: relative;
  counter-increment: album-photo;
  margin: 0;
}
/* 4枚以上あるアルバムでのみ 1枚目を 2x2 に拡大。1〜3枚時は均等のまま。 */
.album:has(> .thumb:nth-of-type(4)) > .thumb:first-of-type {
  grid-column: span 2;
  grid-row: span 2;
}
.album .thumb a {
  display: block;
  overflow: hidden;
  height: 100%;
}
.album .thumb a img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: opacity var(--rw-transition);
}
.album .thumb a:hover img { opacity: 0.8; }
.album .thumb::after {
  content: counter(album-photo, decimal-leading-zero);
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.15rem 0.4rem;
  font-family: var(--rw-font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-bg-main);
  background: var(--rw-text-primary);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (max-width: 479px) {
  /* 小画面では 2x2 拡大を解除（列数が少なく横はみ出しを防ぐため） */
  .album:has(> .thumb:nth-of-type(4)) > .thumb:first-of-type {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* #entries: 記事形式の写真リスト。editorial な2カラム（左=写真、右=メタ情報）。
   モバイルは縦1列、カード装飾なし、区切りは罫線のみ。 */
#entries > h3 {
  font-family: var(--rw-font-display);
  font-size: 1.25rem;
  letter-spacing: var(--rw-tracking-heading);
  padding: 0.75rem 0;
  border-bottom: 2px solid var(--rw-primary);
  margin: 2.5rem 0 1rem;
}
#entries .autopagerize_page_element { counter-reset: entry-photo; }
/* .article は grid-template-areas で明示配置。
   :nth-child(odd) は「写真左 / メタ右」、:nth-child(even) は左右反転して
   誌面見開きのリズムを作る。番号は h4 の上に大書きで配置。 */
#entries .article {
  display: grid;
  grid-template-columns: 5fr 6fr;
  grid-template-areas:
    "photo title"
    "photo date"
    "photo body"
    "photo .";
  column-gap: 2rem;
  row-gap: 0.4rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--rw-border);
  counter-increment: entry-photo;
  align-items: start;
}
#entries .article:nth-child(even) {
  grid-template-columns: 6fr 5fr;
  grid-template-areas:
    "title photo"
    "date photo"
    "body photo"
    ".    photo";
}
#entries .article .photo {
  grid-area: photo;
  grid-row: 1 / span 4;
}
#entries .article .photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
#entries .article h4 {
  grid-area: title;
  margin: 0;
  font-family: var(--rw-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-heading);
  line-height: 1.35;
}
#entries .article h4::before {
  content: counter(entry-photo, decimal-leading-zero);
  display: block;
  font-family: var(--rw-font-display);
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--rw-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
#entries .article .date {
  grid-area: date;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-secondary);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rw-border);
}
#entries .article .textfield {
  grid-area: body;
  font-family: var(--rw-font-body);
  font-size: 0.9rem;
  color: var(--rw-text-primary);
  line-height: 1.75;
  margin-top: 0.4rem;
}

@media (max-width: 767px) {
  /* モバイルは縦1列・偶奇反転は解除。グルーピング強化のため情報デザインを見直し:
     - 内部（写真↔メタ情報）は row-gap を極小にして密着させる
     - 記事↔記事は広い余白＋accent 色の水平罫線で明確に分離
     - メタ情報（h4 / date / textfield）の左に primary 色の縦罫を入れ、
       上の写真にぶら下がっているキャプションに見せる */
  #entries .article,
  #entries .article:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "title"
      "date"
      "body";
    column-gap: 0;
    row-gap: 0.35rem;
    padding: 0 0 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--rw-accent);
  }
  #entries .article:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  #entries .article .photo,
  #entries .article:nth-child(even) .photo {
    grid-row: auto;
  }
  #entries .article h4,
  #entries .article .date,
  #entries .article .textfield {
    padding-left: 0.65rem;
    border-left: 2px solid var(--rw-primary);
    margin-top: 0;
  }
  #entries .article .date {
    border-bottom: 0;
    padding-bottom: 0;
  }
  #entries .article h4::before {
    font-size: 2rem;
    margin-bottom: 0.4rem;
  }
}

/* photo-modal（ライトボックス・編集誌カタログ型）
   左=写真大判、右=番号/タイトル/日付/本文のメタ情報カラム。
   前後ナビゲーション（矢印キー・ボタン両対応）、位置表示「02 / 24」付き。 */
.photo-modal-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(1200px, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  color: var(--rw-text-primary);
}
.photo-modal-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 1px, transparent 1.5px) 0 0 / 18px 18px,
    rgba(24, 24, 24, 0.92);
}
.photo-modal-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 0;
  background: var(--rw-bg-main);
  border: 1px solid var(--rw-text-primary);
  max-height: 92vh;
  overflow: hidden;
}
.photo-modal-image {
  background: var(--rw-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 1.25rem;
}
.photo-modal-image img {
  max-width: 100%;
  max-height: min(80vh, 700px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.photo-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.5rem;
  border-left: 1px solid var(--rw-border);
  overflow-y: auto;
  min-width: 0;
}
.photo-modal-index {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--rw-font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-primary);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rw-border);
}
.photo-modal-index-separator {
  color: var(--rw-text-secondary);
  margin: 0 0.1rem;
}
.photo-modal-title {
  margin: 0;
  font-family: var(--rw-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-heading);
  line-height: 1.4;
}
.photo-modal-title:empty { display: none; }
.photo-modal-date {
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-secondary);
  font-variant-numeric: tabular-nums;
}
.photo-modal-date:empty { display: none; }
.photo-modal-text {
  font-family: var(--rw-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--rw-text-primary);
}
.photo-modal-text:empty { display: none; }

.photo-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: var(--rw-bg-main);
  border: 1px solid var(--rw-text-primary);
  border-radius: 0;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-primary);
  cursor: pointer;
  transition: color var(--rw-transition), background var(--rw-transition);
}
.photo-modal-close:hover {
  color: var(--rw-bg-main);
  background: var(--rw-text-primary);
}
.photo-modal-close-mark {
  font-size: 1rem;
  line-height: 1;
}

.photo-modal-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.75rem;
  pointer-events: none;
}
.photo-modal-nav button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: var(--rw-bg-main);
  border: 1px solid var(--rw-text-primary);
  border-radius: 0;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--rw-tracking-caps);
  color: var(--rw-text-primary);
  cursor: pointer;
  transition: color var(--rw-transition), background var(--rw-transition);
}
.photo-modal-nav button:hover {
  color: var(--rw-bg-main);
  background: var(--rw-accent);
  border-color: var(--rw-accent);
}
.photo-modal-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.photo-modal-nav button:disabled:hover {
  color: var(--rw-text-primary);
  background: var(--rw-bg-main);
  border-color: var(--rw-text-primary);
}

@media (max-width: 767px) {
  .photo-modal-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
  }
  .photo-modal-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    max-height: 100vh;
  }
  .photo-modal-image {
    padding: 0.75rem;
  }
  .photo-modal-image img {
    max-height: 55vh;
  }
  .photo-modal-body {
    border-left: 0;
    border-top: 1px solid var(--rw-border);
    padding: 1rem 1rem 3.5rem;
  }
  .photo-modal-nav { bottom: 0.5rem; }
  .photo-modal-nav-label { display: none; }
}

/* --------------------------------------------------------------------------
   11. フッター直前: .gadgets（外部パーツ） / .social（SNS連携ボタン）
   -------------------------------------------------------------------------- */

/* `.gadgets`（外部パーツ）と `.social`（SNSウィジェット）は隣接して並ぶ。
   どちらも中身が空であれば main.html の JS が要素ごと削除する。 */

.gadgets,
.social {
  margin-top: 3rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rw-border);
}
/* .gadgets と .social が連続表示される場合の二重ボーダー／余白を回避 */
.gadgets + .social {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
.gadgets .inner,
.social .inner {
  max-width: var(--rw-container-max);
  margin: 0 auto;
  padding: 0 var(--rw-gutter);
}

/* .gadgets: 外部パーツ（バナー画像 + 任意ウィジェットHTML）の並び */
#navi_parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}
.navi_parts_detail {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navi_parts_detail a {
  display: inline-block;
  line-height: 0;
}
.navi_parts_detail img {
  display: block;
  max-width: 100%;
  height: auto;
}
.navi_parts_detail iframe {
  max-width: 100%;
}

/* .social: SNS連携ボタン群（X フォロー/ポスト、Facebook Like/Follow、LINE送る）。
   各ボタンは X / LINE 等が生成する iframe/画像で、サービスごとに高さがバラつく。
   center 揃えだと高いボタン（LINE）の上端が下がって見えるため、flex-start で
   上端を揃える。下端は揃わないが、視覚的なライン整列を優先する。 */
#social_widgets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
}
.social_widget {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social_widget iframe {
  max-width: 100%;
}
/* Facebook Like Box（ページプロフィール）は大きいため独立行に落として中央揃え */
#widget_facebook_follow {
  flex-basis: 100%;
  margin-top: 0.75rem;
}

#footer {
  position: relative;
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
  background: var(--rw-text-primary);
  color: var(--rw-bg-main);
  /* フッターにもドットグリッドを薄く */
  background-image: radial-gradient(
    rgba(245, 240, 235, 0.06) 1px,
    transparent 1.5px
  );
  background-size: 20px 20px;
}
#footer a { color: var(--rw-bg-main); }
#footer a:hover { color: var(--rw-accent); }

#footer .shop_name {
  font-family: var(--rw-font-display);
  font-size: 1.15rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

#footer .header-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-top: 1px solid rgba(245, 240, 235, 0.15);
  border-bottom: 1px solid rgba(245, 240, 235, 0.15);
}

#footer .shop_tel a {
  font-family: var(--rw-font-display);
  font-size: 1.25rem;
  letter-spacing: var(--rw-tracking-heading);
}

.social_icons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.social_icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--rw-bg-main);
  transition: transform var(--rw-transition), border-color var(--rw-transition);
}
#footer .social_icons a {
  border: 1px solid rgba(245, 240, 235, 0.3);
  border-radius: 0;
}
#footer .social_icons a:hover {
  background: transparent;
  color: var(--rw-bg-main);
  border-color: var(--rw-primary);
  transform: translateY(-2px);
}

#footer .introduction {
  margin-top: 1.5rem;
  text-align: center;
}

#footer .copyright {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--rw-font-ui);
  font-size: 0.75rem;
  letter-spacing: var(--rw-tracking-caps);
  text-transform: uppercase;
  color: rgba(245, 240, 235, 0.7);
}

/* --------------------------------------------------------------------------
   12. Pager / トップに戻る / ユーティリティ
   -------------------------------------------------------------------------- */
.pager {
  padding: 2rem 0;
  text-align: center;
}
.pager a,
.pager span {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  margin: 0 0.15rem;
  font-family: var(--rw-font-ui);
  font-size: 0.875rem;
  letter-spacing: var(--rw-tracking-heading);
  border: 1px solid var(--rw-border);
  color: var(--rw-text-primary);
  text-decoration: none;
}
.pager a:hover { background: var(--rw-accent); border-color: var(--rw-accent); }
.pager .current,
.pager .chk {
  background: var(--rw-primary);
  color: var(--rw-bg-main);
  border-color: var(--rw-primary);
}

.totop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
}
.totop .button {
  width: 44px; height: 44px;
  border-radius: 0;
  font-size: 1.25rem;
  padding: 0;
  background: var(--rw-primary);
  color: var(--rw-bg-main);
  border-color: var(--rw-primary);
  transition: background var(--rw-transition), border-color var(--rw-transition), transform var(--rw-transition);
}
.totop .button:hover {
  background: var(--rw-accent);
  color: var(--rw-text-primary);
  border-color: var(--rw-accent);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   13. レスポンシブ（モバイルファースト）
   -------------------------------------------------------------------------- */

/* タブレット以上 */
@media (min-width: 768px) {
  body { font-size: 17px; }

  .section.about .inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .section.about .inner.about--no-map {
    grid-template-columns: 1fr;
  }

  body#menu:not(.is-menu-detail) .article:has(.photo img[src]:not([src=""])) {
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "photo header"
      "photo text";
    align-items: start;
  }
  body#menu:not(.is-menu-detail) .article:has(.photo img[src]:not([src=""])) .photo        { grid-area: photo; }
  body#menu:not(.is-menu-detail) .article:has(.photo img[src]:not([src=""])) .menu-header  { grid-area: header; }
  body#menu:not(.is-menu-detail) .article:has(.photo img[src]:not([src=""])) .text         { grid-area: text; }

  .staff_list .article,
  .recruit_list .article,
  .event_list .article {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
}

/* デスクトップ以上：モバイルメニュー非表示 / 水平ナビ表示。
   .primary-nav には Bootstrap 5 の `.navbar-collapse` クラスも付いており、
   Bootstrap 自体が `.navbar-expand-* .navbar-collapse { display: flex !important; }`
   等で `!important` を使ってくる。これに勝つためテーマ側も !important で
   display を確定させる必要がある。 */
@media (min-width: 1024px) {
  .mobile-toggle { display: none; }
  .primary-nav { display: block !important; }
}

/* モバイル：水平ナビをドロワー化 */
@media (max-width: 1023px) {
  #header > .inner {
    flex-wrap: wrap;
  }
  /* ロゴとハンバーガーを同じ行に収めるため、order で表示順を制御する。
     HTML 順では logo → site_description → mobile-toggle → primary-nav だが、
     キャッチコピー（site_description）が長いとロゴ行からあふれてハンバーガーが
     次行に落ち、ロゴとの高さがずれる。order でロゴ→ハンバーガー→キャッチコピー→ナビ
     の順に並べ替え、flex-basis: 100% で改行位置を制御する。 */
  /* ロゴ（文字）は長い店舗名（日本語併記など）で横に伸びがち。
     flex-basis を許してハンバーガー分の領域を確保し、フォントを流体で縮める。
     それでも入らない場合は 2 行に折り返し、ハンバーガーは常に 1 行目の右に固定。 */
  /* flex-basis を 0 にすることで、ロゴの初期幅をテキスト自然幅ではなく「残りスペース」
     から計算させる。auto だと自然幅 + ハンバーガー44px がコンテナ幅をわずかに超えた
     瞬間に flex-wrap が先に発動し、ハンバーガーが次行に落ちる事象が再発するため。 */
  #header .logo {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    font-size: clamp(0.95rem, 3.8vw, 1.25rem);
    letter-spacing: 0.05em;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* モバイルはスペース優先でロゴ画像を 48px に抑える（PC の 120px は上の定義に譲る） */
  #header .logo img { max-height: 48px; }
  .mobile-toggle {
    order: 1;
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    margin-left: auto;
  }
  #header .site_description {
    order: 2;
    flex: 1 1 100%;
    margin-top: 0.5rem;
  }
  .primary-nav {
    order: 3;
    flex-basis: 100%;
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--rw-transition);
  }
  .primary-nav.menu-open {
    display: block;
    max-height: 80vh;
    overflow-y: auto;
    padding-top: 0.75rem;
  }
  .primary-nav .navi_list {
    flex-direction: column;
    gap: 0;
  }
  .primary-nav .navi_list > li {
    border-top: 1px solid var(--rw-border);
  }
  .primary-nav .navi_list > li > a {
    display: block;
    padding: 0.85rem 0.5rem;
    border-bottom: 0;
  }
  #wrap_slider .caption {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
  }
}

/* モバイル：スライダーのナビ・キャプションを軽量化して写真を邪魔しない */
@media (max-width: 767px) {
  .slideshow-controls button {
    width: 32px;
    height: 32px;
    background: rgba(245, 240, 235, 0.6);
  }
  .slideshow-controls button::before {
    width: 8px;
    height: 8px;
  }
  .slide-prev { left: 0.5rem; }
  .slide-next { right: 0.5rem; }

  /* キャプションは画像内・左下に（インジケーター分の右余白を確保） */
  #wrap_slider .caption {
    left: 0.5rem;
    right: auto;
    bottom: 0.5rem;
    max-width: calc(100% - 5rem);
    padding: 0.3rem 0.55rem;
    border-left-width: 2px;
  }
  #wrap_slider .caption_txt a {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .slideshow-indicators {
    right: 0.5rem;
    bottom: 0.5rem;
    gap: 0.3rem;
  }
  .slideshow-indicators .slide-indicator {
    min-width: 24px;
    height: 24px;
    font-size: 0.7rem;
    padding: 0 0.3rem;
  }
}

/* 大画面でのコンテナ余白強化 */
@media (min-width: 1200px) {
  .inner { padding-left: 32px; padding-right: 32px; }
  .section > .section_title {
    padding-left: calc(32px + 1.5em);
    padding-right: 32px;
  }
  .section > .section_title::before {
    left: 32px;
  }

  /* スライダーの矢印・インジケーターは #wrap_slider（全幅）の子で
     absolute 配置されているため、画像の最大幅 1200px 中央寄せに合わせて
     calc() で内側に寄せる。50% が中心、600px がコンテナ半幅、1rem はインセット。 */
  .slide-prev            { left:  max(1rem, calc(50% - 600px + 1rem)); }
  .slide-next            { right: max(1rem, calc(50% - 600px + 1rem)); }
  .slideshow-indicators  { right: max(1rem, calc(50% - 600px + 1rem)); }
}

/* --------------------------------------------------------------------------
   14. アクセシビリティ：アニメーション抑制
   -------------------------------------------------------------------------- */
/* ユーザー OS の "視覚モーション抑制" 設定を尊重する。
   全要素のアニメーション・トランジションを実質ゼロにするため !important で全上書きする
   のが MDN 等で示される標準パターン。個別要素側の指定に勝つ必要があるため不可欠。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. 印刷
   -------------------------------------------------------------------------- */
/* 印刷時の body / a 再定義は意図的に設けない（ブラウザ既定に委ねる）。 */
/* 印刷時はヘッダー/フッター/操作UIを必ず非表示にしたい。
   通常ルール側で display 指定（block / flex 等）が当たっている要素もあるため、
   !important で確実に上書きして紙面に余分な要素を残さない。 */
@media print {
  #container { background: none; }
  #header, #footer, .totop, .slideshow-controls, .slideshow-indicators,
  .mobile-toggle, .pager, .btn_details { display: none !important; }
}
.shop_sitename {
  font-size: 100%;
}