@import url('https://fonts.googleapis.com/earlyaccess/sawarabigothic.css');

/* ================================================== 
   Harmony Theme - Japanese Minimalist Zen
   Awwwards Quality Standard
   
   Concept: 調和、静寂、余白の美
   美術館のキャプションのような、知的で落ち着いた佇まい
================================================== */

/* ==================================================
   CSS Variables - Japanese Minimalist Palette
================================================== */
:root {
  /* ============================================
     Colors - 和の配色
  ============================================ */
  --color-washi: #FCFBF9;        /* 和紙の白 - Background */
  --color-sumi-dark: #2C2C2C;     /* 墨色（暗） - Primary Text */
  --color-sumi-medium: #5A5A5A;   /* 墨色（中） - Secondary Text */
  --color-sumi-light: #8C8C8C;    /* 墨色（薄） - Tertiary Text */
  --color-white: #FFFFFF;          /* 純白 - Accents */
  --color-border: #E5E5E3;         /* 境界線 */
  
  /* Dynamic Colors - style.phpで動的に変更される */
  --color-primary: #6F814D;        /* プライマリカラー */
  --color-primary-light: #93A66A;  /* プライマリライト */
  --color-primary-dark: #56643B;   /* プライマリダーク */
  --color-secondary: #C7D3AF;      /* セカンダリカラー */
  --color-secondary-light: #E0E8D2;/* セカンダリライト */

  /* ============================================
     Typography - Fluid & Responsive
  ============================================ */
  /* clamp(最小値, 可変値, 最大値) */
  --font-size-xs: clamp(1.2rem, 1vw + 0.8rem, 1.4rem);
  --font-size-sm: clamp(1.4rem, 1vw + 1rem, 1.6rem);
  --font-size-base: clamp(1.6rem, 1vw + 1.2rem, 1.8rem);
  --font-size-md: clamp(1.8rem, 1.5vw + 1rem, 2.4rem);
  --font-size-lg: clamp(2.4rem, 2vw + 1.2rem, 3.6rem);
  --font-size-xl: clamp(3.2rem, 3vw + 1.5rem, 5.6rem);
  --font-size-2xl: clamp(4.8rem, 4vw + 2rem, 8rem);

  /* 日本語組版 - 呼吸するような行間 */
  --line-height-tight: 1.3;
  --line-height-base: 1.8;
  --line-height-relaxed: 2.0;

  /* 字間 - 落ち着きと調和 */
  --letter-spacing-tight: 0.02em;
  --letter-spacing-base: 0.04em;
  --letter-spacing-wide: 0.08em;

  /* ============================================
     Spacing - Vertical Rhythm (16px base)
     調和の取れたスペーシング: 広めだが実用的
  ============================================ */
  --space-unit: 16px;
  --space-xs: calc(var(--space-unit) * 0.5);    /* 8px */
  --space-sm: var(--space-unit);                /* 16px */
  --space-md: calc(var(--space-unit) * 1.5);    /* 24px */
  --space-lg: calc(var(--space-unit) * 2);      /* 32px */
  --space-xl: calc(var(--space-unit) * 3);      /* 48px */
  --space-2xl: calc(var(--space-unit) * 4);     /* 64px */

  /* ============================================
     Animation - Physics-based
  ============================================ */
  /* Awwwards Standard: cubic-bezier(0.2, 0.8, 0.2, 1) */
  --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
  
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;

  /* ============================================
     Shadows - Soft & Subtle
  ============================================ */
  --shadow-subtle: 0 2px 8px rgba(44, 44, 44, 0.04);
  --shadow-medium: 0 4px 16px rgba(44, 44, 44, 0.06);
  --shadow-strong: 0 8px 24px rgba(44, 44, 44, 0.08);
  --shadow-dramatic: 0 16px 48px rgba(44, 44, 44, 0.12);

  /* ============================================
     Border Radius - Organic Forms
  ============================================ */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-full: 50%;

  /* ============================================
     Container & Layout
  ============================================ */
  --container-max-width: 1200px;
  --container-padding: var(--space-xl);
}

/* ==================================================
   Reset & Base Styles
================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}
body {
  font-family: 'Sawarabi Gothic';
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
  background: var(--color-washi);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


/* 明朝体クラス */
.font-serif {
  font-family: 'Sawarabi Gothic';
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

a:hover {
  color: var(--color-primary);
}

/* スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リスト */
ul, ol {
  list-style: none;
}

/* ==================================================
   BEM: .harmony-container
================================================== */
.inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

#container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==================================================
   BEM: .harmony-header
================================================== */
#header {
  background: var(--color-white);
  border-bottom: none;
  position: relative;
}

#header > .inner {
  position: relative;
}

/* BEM: .harmony-header__top */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

/* Phone */
.element.shop_tel {
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  letter-spacing: var(--letter-spacing-tight);
}

.element.shop_tel a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-small);
  transition: all var(--duration-base) var(--ease-natural);
}

.element.shop_tel a:hover {
  background: var(--color-washi);
  transform: translateY(-1px);
}

/* Social Icons */
.social_icons {
  display: flex;
  gap: var(--space-sm);
}

.social_icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: transparent;
  transition: all var(--duration-base) var(--ease-natural);
}

.social_icons a:hover {
  background: var(--color-primary);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-medium);
}

.social_icons a:hover svg {
  fill: var(--color-white);
}

.social_icons svg {
  width: 18px;
  height: 18px;
  fill: var(--color-sumi-medium);
  transition: fill var(--duration-base) var(--ease-natural);
}

/* Logo */
.element.logo {
  padding: clamp(18px, 3vw, 36px) 0 var(--space-md);
  text-align: center;
}

.shop_sitename {
  display: inline-block;
  font-size: var(--font-size-xl);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-sumi-dark);
  transition: all var(--duration-base) var(--ease-natural);
}

.shop_sitename:hover {
  transform: translateY(-2px);
  color: var(--color-primary);
}

/* Site Description */
.element.site_description {
  text-align: center;
  padding-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  letter-spacing: var(--letter-spacing-wide);
  max-width: min(92%, 960px);
  margin: 0 auto;
}

/* ==================================================
   BEM: .harmony-nav - Navigation
================================================== */
.element.navi.primary-nav {
  display: block;
  width: 100%;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  position: relative;
  overflow: visible;
}

.element.navi.primary-nav .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.navi_list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: var(--space-xs);
  justify-content: center;
  flex-wrap: nowrap;
}

.navi_list > li {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.navi_list > li > a {
  display: block;
  padding: var(--space-md) clamp(12px, 1.4vw, 20px);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-sumi-medium);
  transition: all var(--duration-base) var(--ease-natural);
  border-radius: var(--radius-small);
  white-space: nowrap;  /* テキストの改行を防ぐ */
}

.navi_list > li > a:hover {
  color: var(--color-primary);
  background: var(--color-washi);
  transform: translateY(-1px);
}

.navi_list > li.active > a {
  color: var(--color-primary);
  background: var(--color-washi);
  transform: none;
}

/* ==================================================
   Dropdown Menu - Hierarchical Structure
   階層構造は常に保持され、どのページでもホバーで表示される
================================================== */

.navi-overflow {
  display: none;
}

.navi-overflow.is-visible {
  display: block;
}

.navi-overflow > a::after {
  content: '▾';
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.8em;
  color: currentColor;
}

/* Base: すべてのサブメニュー（ulと.sub_navi）に適用 */
.navi_list > li > ul,
.navi_list > li > .sub_navi {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Desktop: ホバーでドロップダウン表示 (1024px以上) */
@media (min-width: 1024px) {
  /* デスクトップでは絶対配置でドロップダウンメニューとして表示 */
  .navi_list > li > ul,
  .navi_list > li > .sub_navi {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-strong);
    padding: var(--space-sm) 0;
    z-index: 1000;
    /* 初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--duration-base) var(--ease-natural), 
                visibility var(--duration-base) var(--ease-natural), 
                transform var(--duration-base) var(--ease-natural);
    /* 重要: display: block でレンダリング、pointer-eventsで制御 */
    display: block;
    pointer-events: none;
  }

  /* ホバー時に表示（どのページでも、すべての親項目で動作） */
  .navi_list > li:hover > ul,
  .navi_list > li:hover > .sub_navi {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* サブメニュー項目のスタイル */
  .navi_list > li > ul > li,
  .navi_list > li > .sub_navi > li {
    margin: 0;
    padding: 0;
  }

  .navi_list > li > ul > li > a,
  .navi_list > li > .sub_navi > li > a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-sumi-medium);
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-natural);
  }

  /* サブメニュー項目のホバー */
  .navi_list > li > ul > li > a:hover,
  .navi_list > li > .sub_navi > li > a:hover {
    background: var(--color-washi);
    color: var(--color-primary);
    padding-left: calc(var(--space-md) + 6px);
  }

  /* 現在のページの表示 */
  .navi_list > li > ul > li.current > a,
  .navi_list > li > .sub_navi > li.current > a {
    background: var(--color-washi);
    color: var(--color-primary);
    font-weight: 500;
  }

  .navi_list > li.navi-overflow {
    position: relative;
  }

  .navi_list > li.navi-overflow > .sub_navi {
    left: auto;
    right: 0;
    margin-right: 0;
    background: var(--color-white);
    background-clip: padding-box;
    min-width: clamp(240px, 24vw, 340px);
    max-width: min(86vw, 380px);
    max-height: min(68vh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    border-radius: var(--radius-medium);
    transform-origin: top right;
    contain: paint;
    transform: none;
  }

  .navi-overflow.is-open > .sub_navi {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .navi_list > li.navi-overflow:hover > ul,
  .navi_list > li.navi-overflow:hover > .sub_navi {
    transform: none;
  }

  .navi-overflow .sub_navi > li.is-overflowed {
    width: 100%;
  }

  .navi-overflow .sub_navi > li.is-overflowed > a {
    display: block;
    font-family: 'Sawarabi Gothic';
    font-size: var(--font-size-sm);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-tight);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .navi-overflow .sub_navi > li.is-overflowed > :is(ul, .sub_navi) {
    list-style: none;
    display: block;
    margin: 0 0 var(--space-xs);
    padding: 0 0 0 var(--space-sm);
  }

  .navi-overflow .sub_navi > li.is-overflowed > :is(ul, .sub_navi) > li {
    margin: 0;
    padding: 0;
  }

  .navi-overflow .sub_navi > li.is-overflowed > :is(ul, .sub_navi) > li > a {
    display: block;
    padding: calc(var(--space-xs) - 2px) var(--space-md) calc(var(--space-xs) - 2px) var(--space-sm);
    font-family: 'Sawarabi Gothic';
    font-size: var(--font-size-sm);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-sumi-medium);
    line-height: var(--line-height-tight);
    white-space: normal;
    overflow-wrap: anywhere;
    transition: all var(--duration-fast) var(--ease-natural);
  }

  .navi-overflow .sub_navi > li.is-overflowed > :is(ul, .sub_navi) > li > a:hover {
    color: var(--color-primary);
    background: rgba(44, 44, 44, 0.04);
    padding-left: calc(var(--space-sm) + 6px);
  }

  /* 「その他」内の現在ページは通常メニューactiveと同等表示に固定（hover変化なし） */
  .navi-overflow .sub_navi > li.is-overflowed:is(.active, .current) > a,
  .navi-overflow .sub_navi > li.is-overflowed > :is(ul, .sub_navi) > li:is(.active, .current) > a {
    background: var(--color-washi);
    color: var(--color-primary);
    font-weight: 400;
  }

  .navi-overflow .sub_navi > li.is-overflowed:is(.active, .current) > :is(ul, .sub_navi),
  .navi-overflow .sub_navi > li.is-overflowed:is(.active, .current) > :is(ul, .sub_navi) > li > a {
    background: var(--color-washi);
  }

  .navi-overflow .sub_navi > li.is-overflowed:is(.active, .current) > a:hover {
    background: var(--color-washi);
    color: var(--color-primary);
    padding-left: var(--space-md);
  }

  .navi-overflow .sub_navi > li.is-overflowed > :is(ul, .sub_navi) > li:is(.active, .current) > a:hover {
    background: var(--color-washi);
    color: var(--color-primary);
    padding-left: var(--space-sm);
  }
}

/* Narrow Desktop Guard (iPad Pro 1024px など):
   「その他」ドロップダウンが右端で見切れないよう位置と幅を補正 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .element.navi.primary-nav {
    overflow: visible;
  }

  .element.navi.primary-nav .inner {
    padding-inline: var(--space-md);
    overflow: visible;
  }

  .navi_list {
    gap: 6px;
    overflow: visible;
  }

  .navi_list > li > a {
    padding: var(--space-md) clamp(10px, 1.1vw, 14px);
    letter-spacing: var(--letter-spacing-base);
  }

  /* 「その他」はli基準で安定配置し、トリガー右端にドロップダウン右端を揃える */
  .navi_list > li.navi-overflow {
    position: relative;
  }

  .navi_list > li.navi-overflow > .sub_navi {
    left: auto;
    right: 0;
    margin-right: 0;
    background: var(--color-white);
    background-clip: padding-box;
    min-width: clamp(220px, 28vw, 280px);
    max-width: min(320px, calc(100vw - (var(--space-md) * 2)));
    overflow-x: hidden;
    overscroll-behavior-y: none;
    transform: none;
  }
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  position: absolute;
  right: var(--container-padding);
  top: var(--space-sm);
  z-index: 70;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.navi_trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: var(--radius-small);
  transition: all var(--duration-base) var(--ease-natural);
}

.navi_trigger svg {
  width: 24px;
  height: 24px;
  fill: var(--color-sumi-dark);
  stroke: var(--color-sumi-dark);
}

@media (hover: hover) and (pointer: fine) {
  .navi_trigger:hover {
    background: var(--color-washi);
  }

  .mobile-toggle:hover .navi_trigger {
    background: var(--color-washi);
  }
}

/* ==================================================
   BEM: .harmony-slideshow - Elegant & Minimal
================================================== */
#wrap_slider {
  position: relative;
  margin-bottom: var(--space-2xl);
}

body#top #wrap_slider {
  max-width: calc(var(--container-max-width) + (var(--container-padding) * 2));
  margin-top: var(--container-padding);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-padding);
  --top-slideshow-aspect-ratio: 3 / 2;
  --top-slideshow-zoom-duration: 5000ms;
  --top-slideshow-zoom-scale: 1.04;
}

body#top #wrap_slider .rslides {
  position: relative;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-large);
  background: var(--color-white);
  box-shadow: var(--shadow-subtle);
}

body#top #wrap_slider .rslides .article {
  position: relative;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}

body#top #wrap_slider .rslides .slide_image_wrap,
body#top #wrap_slider .rslides .article > span {
  display: block;
  padding: 0;
  aspect-ratio: var(--top-slideshow-aspect-ratio);
  overflow: hidden;
}

body#top #wrap_slider .rslides .slide_image_wrap > a,
body#top #wrap_slider .rslides .article > span > a {
  display: block;
  width: 100%;
  height: 100%;
}

#wrap_slider .article:hover {
  box-shadow: none;
  transform: none;
}

body#top #wrap_slider .rslides li img,
body#top #wrap_slider .rslides .slide_image_wrap img,
body#top #wrap_slider .rslides .article img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
}

body#top #wrap_slider .rslides .article .slide_image_wrap img,
body#top #wrap_slider .rslides .article > span img {
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}

body#top #wrap_slider .rslides .article.is-active .slide_image_wrap img,
body#top #wrap_slider .rslides .article.is-active > span img {
  animation: topSlideshowKenBurns var(--top-slideshow-zoom-duration) linear forwards;
}

@keyframes topSlideshowKenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(var(--top-slideshow-zoom-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  body#top #wrap_slider .rslides .article.is-active .slide_image_wrap img,
  body#top #wrap_slider .rslides .article.is-active > span img {
    animation: none;
    transform: none;
  }
}

/* Slideshow Caption */
#wrap_slider .caption {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-medium);
  background: linear-gradient(
    180deg,
    rgba(44, 44, 44, 0.1) 0%,
    rgba(44, 44, 44, 0.68) 100%
  );
  backdrop-filter: blur(2px);
  color: var(--color-white);
}

#wrap_slider .caption_txt {
  max-width: min(92%, 860px);
  margin: 0 auto;
  font-size: clamp(1.4rem, 0.7vw + 1.2rem, 2rem);
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-base);
  text-align: left;
}

#wrap_slider .caption_txt a {
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color var(--duration-base) var(--ease-natural);
}

#wrap_slider .caption_txt a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

#wrap_slider .caption_txt a:empty {
  display: none;
}

#wrap_slider .caption:has(.caption_txt a:empty),
#wrap_slider .caption:has(.caption_txt:empty) {
  display: none;
}

/* Slideshow Controls - 洗練された美しいデザイン */
#wrap_slider .slideshow-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-sm);
  pointer-events: none;
  z-index: 20;
}

#wrap_slider .slideshow-controls button {
  width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  background: rgba(252, 251, 249, 0.92);
  border: 1px solid rgba(44, 44, 44, 0.16);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: all var(--duration-base) var(--ease-natural);
  box-shadow: var(--shadow-subtle);
  position: relative;
  overflow: hidden;
}

/* ナビゲーションボタンの矢印 */
#wrap_slider .slideshow-controls button::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--color-sumi-medium);
  border-right: 2px solid var(--color-sumi-medium);
  transition: all var(--duration-base) var(--ease-natural);
}

#wrap_slider .slideshow-controls .slide-prev::before {
  transform: rotate(-135deg);
  margin-left: 2px;
}

#wrap_slider .slideshow-controls .slide-next::before {
  transform: rotate(45deg);
  margin-right: 2px;
}

#wrap_slider .slideshow-controls button:hover {
  background: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-primary);
}

#wrap_slider .slideshow-controls button:hover::before {
  border-color: var(--color-primary);
}

#wrap_slider .slideshow-controls button:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-subtle);
}

/* スライドインジケーター */
#wrap_slider .slideshow-indicators {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: var(--space-sm) auto 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

#wrap_slider .slideshow-indicators button {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid rgba(44, 44, 44, 0.34);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-natural);
  padding: 0;
  opacity: 0.58;
}

#wrap_slider .slideshow-indicators button.active,
#wrap_slider .slideshow-indicators button:hover {
  width: 9px;
  background: var(--color-sumi-medium);
  border-color: var(--color-sumi-medium);
  opacity: 1;
  transform: scale(1.12);
  box-shadow: none;
}

#wrap_slider.is-single .slideshow-controls,
#wrap_slider.is-single .slideshow-indicators,
#wrap_slider .slideshow-controls[hidden],
#wrap_slider .slideshow-indicators[hidden] {
  display: none;
}

#wrap_slider .slideshow-controls button:focus-visible,
#wrap_slider .slideshow-indicators button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  #wrap_slider {
    margin-bottom: var(--space-xl);
  }

  #wrap_slider .caption {
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
  }

  #wrap_slider .caption_txt {
    text-align: center;
  }
}

@media (max-width: 768px) {
  body#top #wrap_slider {
    padding: 0 var(--space-md);
  }

  body#top #wrap_slider .rslides {
    border-radius: var(--radius-medium);
  }

  #wrap_slider .caption {
    padding: var(--space-xs) var(--space-sm);
  }

  #wrap_slider .caption_txt {
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }

  #wrap_slider .slideshow-controls {
    padding: 0 var(--space-xs);
  }

  #wrap_slider .slideshow-indicators {
    margin-top: var(--space-xs);
    gap: 8px;
  }
}

@media (max-width: 480px) {
  #wrap_slider .slideshow-controls {
    display: none;
  }
}

/* ==================================================
   BEM: .harmony-content - Main Content Area
================================================== */
#content {
  flex: 1;
  position: relative;
  padding-top: var(--space-xs);
}

/* ==================================================
   BEM: .harmony-section - Sections
================================================== */
.section {
  padding: var(--space-2xl) 0;  /* 64px - バランスの取れた余白 */
  position: relative;
  /* 背景色を削除: body背景を継承 */
}

.section > .inner {
  position: relative;
}

/* Section Title */
.section_title,
.headline {
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-sumi-dark);
  text-align: center;
  margin-bottom: var(--space-xl);  /* 48px - セクション見出しの余白 */
  position: relative;
  padding-bottom: var(--space-md);
}

.section_title::after,
.headline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--color-primary);
}

/* Inner Page Header Rhythm */
#content > .inner,
#content > .page .inner {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.page_title {
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
  color: var(--color-sumi-dark);
  margin: 0;
}

.page_title span {
  display: inline-block;
}

/* page_title直下の余白を /info と同等のリズムに統一 */
#content > .inner > .page_title + *,
#content > .page .inner > .page_title + * {
  margin-top: var(--space-xl);
}

/* ==================================================
   BEM: .harmony-article - Article Cards
================================================== */
.article {
  background: var(--color-white);
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: all var(--duration-base) var(--ease-natural);
}

.article:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-4px);
}

.article .photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-border);
}

.article .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-natural);
}

.article:hover .photo img {
  transform: scale(1.05);
}

.article .text {
  padding: var(--space-md);  /* 24px - カード内部の余白 */
}

.article .title {
  font-size: var(--font-size-md);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-tight);
}

.article .detail {
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

.article .date {
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  letter-spacing: var(--letter-spacing-tight);
}

/* ==================================================
   BEM: .harmony-grid - Broken Grid Layout
================================================== */
/* Auto-fit Grid: コンテンツ量に応じて自然に非対称 */
.section.information .list,
.section_photo .list,
.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);  /* 32px - グリッド間の余白 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==================================================
   Photo Section - Top Gallery Preview
================================================== */
.section_photo .list {
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: 0;
}

.section_photo .list li {
  list-style: none;
}

.section_photo .list li .photo_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(44, 44, 44, 0.04);
  border-radius: var(--radius-large);
  box-shadow: 0 8px 20px rgba(44, 44, 44, 0.06);
  transition: transform var(--duration-base) var(--ease-natural),
              box-shadow var(--duration-base) var(--ease-natural),
              border-color var(--duration-base) var(--ease-natural);
}

.section_photo .list li .photo_card .photo_frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--color-washi);
}

.section_photo .list li .photo_card .photo_frame :is(span, img) {
  display: block;
  width: 100%;
  height: 100%;
}

.section_photo .list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-natural);
}

@media (hover: hover) and (pointer: fine) {
  .section_photo .list li .photo_card:hover {
    border-color: rgba(107, 114, 128, 0.08);
    box-shadow: 0 10px 20px rgba(44, 44, 44, 0.08);
  }

  .section_photo .list li .photo_card:hover img {
    transform: scale(1.01);
  }
}

.section_photo .list li .photo_meta {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  display: grid;
  gap: calc(var(--space-xs) * 0.5);
  padding: calc(var(--space-xs) + 2px) var(--space-sm);
  border-radius: var(--radius-medium);
  background: rgba(252, 251, 249, 0.82);
  backdrop-filter: blur(2px);
  opacity: 0.72;
  transform: translateY(2px);
  transition: opacity var(--duration-base) var(--ease-natural),
              transform var(--duration-base) var(--ease-natural),
              background-color var(--duration-base) var(--ease-natural);
  pointer-events: none;
}

.section_photo .list li .photo_card:hover .photo_meta {
  opacity: 0.96;
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.9);
}

.section_photo .list li .photo_meta:not(:has(.photo_title:not(:empty), .photo_date:not(:empty))) {
  display: none;
}

.section_photo .list li .photo_title {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section_photo .list li .photo_date {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-sumi-medium);
}

.section_photo .list li .photo_title:empty,
.section_photo .list li .photo_date:empty {
  display: none;
}

@media (min-width: 768px) {
  .section_photo .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

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

/* ==================================================
   Information Section - Article Cards
================================================== */
.section.information .list {
  margin-bottom: var(--space-xl);  /* 48px */
}

.section.information .list .article {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section.information .list .article .photo {
  aspect-ratio: 16 / 10;
  background: var(--color-border);
  overflow: hidden;
}

.section.information .list .article .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-natural);
}

.section.information .list .article:hover .photo img {
  transform: scale(1.05);
}

.section.information .list .article .summary {
  padding: var(--space-md);  /* 24px */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section.information .list .article .summary .inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 日付とタイトルのレイアウト調整 */
.section.information .list .article .summary .date {
  display: block;
  margin-bottom: var(--space-xs);  /* 8px - より接近した配置 */
}

.section.information .list .article .summary .title {
  display: block;
  margin: 0;
  margin-top: var(--space-md);  /* 24px - タイトル上の余白 */
  margin-bottom: var(--space-md);  /* 24px - タイトル下の余白 */
}

.section.information .list .article .date {
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  letter-spacing: var(--letter-spacing-tight);
}

.section.information .list .article .title {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-sumi-dark);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
  margin-top: var(--space-md);  /* 24px - タイトル上の余白 */
  margin-bottom: var(--space-md);  /* 24px - タイトル下の余白 */
}

/* Top Information Cards: 画像任意対応 + 情報リズム最適化 */
body#top .section.information .list .article .photo:empty,
body#top .section.information .list .article .photo:not(:has(img, picture, video, iframe, canvas, svg, object, embed)) {
  display: none;
}

body#top .section.information .list .article .summary {
  /* タイトルの存在感は維持しつつ、折返し頻度を抑える */
  padding: clamp(18px, 2vw, 24px);
}

body#top .section.information .list .article .summary .inner {
  /* 共通 .inner の左右padding/max-width継承をカード内だけ無効化 */
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  gap: clamp(12px, 1.8vw, 20px);
}

body#top .section.information .list .article .summary .date,
body#top .section.information .list .article .date {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.5;
}

body#top .section.information .list .article .summary .title,
body#top .section.information .list .article .title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
  text-wrap: pretty;
}

/* Top Information: お知らせ0件時は見出し線と導線を含めてセクションごと非表示 */
body#top .section.information:not(:has(.list .article)),
body#top .section.information.is-empty {
  display: none;
}

/* ==================================================
   "More" Button - Consistent with Submit Buttons
================================================== */
.btn_details {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-xl);  /* 48px */
  /* 罫線を削除: 別セクションとの誤認を防ぐ */
}

.btn_details a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-white);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-medium);
  transition: all var(--duration-base) var(--ease-natural);
  text-decoration: none;
  box-shadow: var(--shadow-subtle);
  transform: scale(1);
}

.btn_details a:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

.btn_details a:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-subtle);
}

/* ==================================================
   BEM: .harmony-button - Buttons
================================================== */
.button,
.submit_button,
.btn_submit,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-sm);
  font-family: 'Sawarabi Gothic';
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-white);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-medium);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-natural);
  box-shadow: var(--shadow-subtle);
  transform: scale(1);
}

.button:hover,
.submit_button:hover,
.btn_submit:hover,
input[type="submit"]:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

.button:active,
.submit_button:active,
.btn_submit:active,
input[type="submit"]:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-subtle);
}

/* ==================================================
   BEM: .harmony-form - Forms
================================================== */
.contact_form {
  max-width: 800px;
  margin: 0 auto;
}

/* ==================================================
   Unified Form Layer
   target: 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[name="frm"] {
  --harmony-form-cta-gap: var(--space-xl);
  --harmony-form-cta-pad-top: var(--space-lg);
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-xl);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

.section.contact form.contact_form > * + *,
body#contact form[name="frm"] > * + *,
body#reservation form[name="frm"] > * + *,
body#event-reservation form[name="frm"] > * + * {
  margin-top: var(--space-lg);
}

.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[name="frm"] input[type="hidden"] {
  display: none;
}

.section.contact form.contact_form :is(table, .table, .form_table),
body#contact form[name="frm"] :is(table, .table, .form_table),
body#reservation form[name="frm"] :is(table, .table, .form_table),
body#event-reservation form[name="frm"] :is(table, .table, .form_table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.section.contact form.contact_form :is(tr),
body#contact form[name="frm"] :is(tr),
body#reservation form[name="frm"] :is(tr),
body#event-reservation form[name="frm"] :is(tr) {
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: none;
}

.section.contact form.contact_form :is(tr:last-child),
body#contact form[name="frm"] :is(tr:last-child),
body#reservation form[name="frm"] :is(tr:last-child),
body#event-reservation form[name="frm"] :is(tr:last-child) {
  border-bottom: none;
}

.section.contact form.contact_form :is(th, td, dt, dd, label),
body#contact form[name="frm"] :is(th, td, dt, dd, label),
body#reservation form[name="frm"] :is(th, td, dt, dd, label),
body#event-reservation form[name="frm"] :is(th, td, dt, dd, label) {
  display: block;
  width: 100%;
  text-align: left;
}

.section.contact form.contact_form :is(th, dt, label),
body#contact form[name="frm"] :is(th, dt, label),
body#reservation form[name="frm"] :is(th, dt, label),
body#event-reservation form[name="frm"] :is(th, dt, label) {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-sumi-dark);
  letter-spacing: var(--letter-spacing-base);
  margin-bottom: var(--space-xs);
}

/* フォーム出力HTMLの `label + br + input` ギャップを抑制 */
.section.contact form.contact_form :is(.contact_area, .reservation_area, .p-form-field) > label + br,
body#contact form[name="frm"] :is(.contact_area, .reservation_area, .p-form-field) > label + br,
body#reservation form[name="frm"] :is(.contact_area, .reservation_area, .p-form-field) > label + br,
body#event-reservation form[name="frm"] :is(.contact_area, .reservation_area, .p-form-field) > label + br,
.section.contact form.contact_form :is(.contact_area, .reservation_area, .p-form-field) > br,
body#contact form[name="frm"] :is(.contact_area, .reservation_area, .p-form-field) > br,
body#reservation form[name="frm"] :is(.contact_area, .reservation_area, .p-form-field) > br,
body#event-reservation form[name="frm"] :is(.contact_area, .reservation_area, .p-form-field) > br {
  display: none;
}

.section.contact form.contact_form :is(td, dd),
body#contact form[name="frm"] :is(td, dd),
body#reservation form[name="frm"] :is(td, dd),
body#event-reservation form[name="frm"] :is(td, dd) {
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

.section.contact form.contact_form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"], textarea, select),
body#contact form[name="frm"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"], textarea, select),
body#reservation form[name="frm"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"], textarea, select),
body#event-reservation form[name="frm"] :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"], textarea, select) {
  margin-top: 0;
}

.section.contact form.contact_form :is(input[type="checkbox"], input[type="radio"]),
body#contact form[name="frm"] :is(input[type="checkbox"], input[type="radio"]),
body#reservation form[name="frm"] :is(input[type="checkbox"], input[type="radio"]),
body#event-reservation form[name="frm"] :is(input[type="checkbox"], input[type="radio"]) {
  margin-right: var(--space-xs);
}

.section.contact form.contact_form :is(.required, .must, .hissu, .required_mark),
body#contact form[name="frm"] :is(.required, .must, .hissu, .required_mark),
body#reservation form[name="frm"] :is(.required, .must, .hissu, .required_mark),
body#event-reservation form[name="frm"] :is(.required, .must, .hissu, .required_mark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6em;
  padding: 0.2em 0.6em;
  margin-left: var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-small);
}

.section.contact form.contact_form :is(.error, .error_message, .validation_error),
body#contact form[name="frm"] :is(.error, .error_message, .validation_error),
body#reservation form[name="frm"] :is(.error, .error_message, .validation_error),
body#event-reservation form[name="frm"] :is(.error, .error_message, .validation_error) {
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: #b42318;
  line-height: 1.6;
}

/* contact/sendmail・reservation の送信アラート文言を event warning と同じトーンに揃える */
body#contact form[name="frm"] :is(.message, .contact-message) :is(.error, .error_message, .validation_error),
body#reservation form[name="frm"] .message :is(.error, .error_message, .validation_error) {
  font-size: var(--font-size-base);
  color: var(--color-sumi-dark);
}

.section.contact form.contact_form :is(input[type="submit"], .button, .submit_button, .btn_submit),
body#contact form[name="frm"] :is(input[type="submit"], .button, .submit_button, .btn_submit),
body#reservation form[name="frm"] :is(input[type="submit"], .button, .submit_button, .btn_submit),
body#event-reservation form[name="frm"] :is(input[type="submit"], .button, .submit_button, .btn_submit) {
  min-height: 52px;
  width: min(100%, 420px);
  padding: var(--space-md) calc(var(--space-xl) + var(--space-sm));
  margin: var(--harmony-form-cta-gap) auto 0;
  display: flex;
}

body#contact .personal_info,
body#reservation .personal_info,
body#event-reservation .personal_info {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

/* reCAPTCHAは中央配置し、ボタンとの距離を確保 */
.section.contact form.contact_form .g-recaptcha,
body#contact form[name="frm"] .g-recaptcha,
body#reservation form[name="frm"] .g-recaptcha,
body#event-reservation form[name="frm"] .g-recaptcha,
.section.contact form.contact_form [id*="recaptcha" i],
body#contact form[name="frm"] [id*="recaptcha" i],
body#reservation form[name="frm"] [id*="recaptcha" i],
body#event-reservation form[name="frm"] [id*="recaptcha" i] {
  display: table;
  margin: var(--space-xl) auto 0;
}

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

.form_row {
  margin-bottom: var(--space-xl);
}

.form_label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
  margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: var(--space-md);
  font-size: var(--font-size-base);
  font-family: 'Sawarabi Gothic';
  color: var(--color-sumi-dark);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  transition: all var(--duration-base) var(--ease-natural);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

textarea {
  min-height: 200px;
  resize: vertical;
}

@media (max-width: 767px) {
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"] {
    padding: clamp(10px, 3vw, var(--space-lg));
  }

  .section.contact form.contact_form :is(input[type="submit"], .button, .submit_button, .btn_submit),
  body#contact form[name="frm"] :is(input[type="submit"], .button, .submit_button, .btn_submit),
  body#reservation form[name="frm"] :is(input[type="submit"], .button, .submit_button, .btn_submit),
  body#event-reservation form[name="frm"] :is(input[type="submit"], .button, .submit_button, .btn_submit) {
    width: min(100%, 360px);
  }
}

@media (min-width: 768px) {
  .section.contact form.contact_form :is(tr),
  body#contact form[name="frm"] :is(tr),
  body#reservation form[name="frm"] :is(tr),
  body#event-reservation form[name="frm"] :is(tr) {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  .section.contact form.contact_form :is(th, dt),
  body#contact form[name="frm"] :is(th, dt),
  body#reservation form[name="frm"] :is(th, dt),
  body#event-reservation form[name="frm"] :is(th, dt) {
    margin-bottom: 0;
    padding-top: var(--space-xs);
  }
}

/* ==================================================
   Form Consistency Patch (4 forms)
================================================== */
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.contact_area, .reservation_area, .p-form-field) {
  margin: 0;
  padding: var(--space-sm) 0;
  border-bottom: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.contact_area, .reservation_area, .p-form-field):last-child {
  border-bottom: none;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.contact_area, .reservation_area, .p-form-field) > label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
  margin: 0 0 var(--space-xs);
  line-height: var(--line-height-tight);
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.contact_area, .reservation_area, .p-form-field) > label + :is(input, select, textarea, .radio, .checkbox, .p-reservation-number, .p-link-unit) {
  margin-top: 0;
}

/* reservation: 年月日・時分は横並び */
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) .reservation_area :is(
  select[name*="reserve_date"],
  select[name*="reserve_time"],
  select[name*="Year"],
  select[name*="Month"],
  select[name*="Day"],
  select[name*="Hour"],
  select[name*="Minute"],
  input[name*="Year"],
  input[name*="Month"],
  input[name*="Day"],
  input[name*="Hour"],
  input[name*="Minute"]
) {
  display: inline-block;
  width: auto;
  min-width: 88px;
  margin-right: var(--space-xs);
  vertical-align: middle;
}

/* reservation: コースは縦積み */
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) .reservation_area .radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) .reservation_area .radio + .radio {
  margin-top: var(--space-sm);
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) .reservation_area .radio :is(label, a) {
  display: inline;
  width: auto;
}

/* reservation: コースラジオのコントロールと文言を全幅で縦中央に揃える */
body#reservation form[name="frm"] .reservation_area .radio {
  align-items: center;
  margin-top: 0;
}

body#reservation form[name="frm"] .reservation_area .radio input[type="radio"] {
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

body#reservation form[name="frm"] .reservation_area .radio :is(label, a) {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
  color: var(--color-sumi-dark);
  cursor: pointer;
}

body#reservation form[name="frm"] .reservation_area .radio span {
  cursor: pointer;
}

/* reservation: コース詳細は専用カードへ集約して表示 */
/* NOTE: 既存出力の display 指定を確実に無効化するため !important を維持 */
body#reservation.js-harmony-course-detail-ready form[name="frm"] .reservation_area :is(.reservation_course_body, [id^="c_d_"]) {
  display: none !important;
}

body#reservation form[name="frm"] .reservation_area .h-reservation-course-detail {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-washi);
}

body#reservation form[name="frm"] .reservation_area .h-reservation-course-detail[hidden] {
  display: none;
}

body#reservation form[name="frm"] .reservation_area .h-reservation-course-detail__inner {
  display: grid;
  gap: var(--space-sm);
}

body#reservation form[name="frm"] .reservation_area .h-reservation-course-detail__inner p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-sumi-medium);
}

body#reservation form[name="frm"] .reservation_area .h-reservation-course-detail__inner img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-small);
}

@media (min-width: 768px) {
  body#reservation form[name="frm"] .reservation_area .h-reservation-course-detail__inner.has-media {
    grid-template-columns: minmax(0, 180px) 1fr;
    align-items: start;
  }
}

/* contact/top_contact: 動的項目（checkbox/radio/select）の整列を安定化 */
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area :is(.checkbox, .radio) {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  max-width: 100%;
  cursor: pointer;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area :is(.checkbox, .radio) + :is(.checkbox, .radio) {
  margin-top: var(--space-sm);
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area :is(.checkbox, .radio) > input:is([type="checkbox"], [type="radio"]) {
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
  width: 1.8rem;
  height: 1.8rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area :is(.checkbox, .radio) > label {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
  color: var(--color-sumi-dark);
  cursor: pointer;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area :is(.checkbox, .radio) :is(a, span) {
  cursor: pointer;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area select.frm_text {
  width: min(100%, 420px);
  max-width: 100%;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area :is(input.contact_small, input.contact_name) {
  width: min(100%, 260px);
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"]
) .contact_area :is(input.contact_medium, input.contact_tel, input.contact_email) {
  width: min(100%, 420px);
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.contact_area, .reservation_area, .p-form-field) .requier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6em;
  padding: 0.2em 0.6em;
  margin-left: var(--space-xs);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-small);
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) .p-form-field__required-label {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* top_contact / contact / reservation の必須ラベルをHarmony方針に統一 */
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"]
) :is(.contact_area, .reservation_area, .p-form-field) :is(.requier, .required, .must, .hissu, .required_mark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4em;
  padding: 0.14em 0.56em;
  margin-left: var(--space-xs);
  font-size: clamp(1.05rem, 0.32vw + 0.86rem, 1.16rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-primary-dark);
  background: var(--color-secondary-light);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-small);
  vertical-align: baseline;
  white-space: nowrap;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.button_area, .p-link-unit) {
  margin-top: var(--harmony-form-cta-gap);
  padding-top: var(--harmony-form-cta-pad-top);
  border-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

/* CTAコンテナ内ではボタンのフォールバック余白を無効化（2重余白防止） */
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.button_area, .p-link-unit) :is(
  input[type="submit"],
  .button,
  .submit_button,
  .btn_submit,
  .p-link-button,
  .p-link-button--primary
) {
  /* NOTE: 旧テーマ由来の margin を確実に打ち消すため !important を維持 */
  margin-top: 0 !important;
}

/* reservation / reservation-event はボタン上ボーダーを非表示 */
body#reservation :is(.button_area, .p-link-unit),
body#event-reservation :is(.button_area, .p-link-unit) {
  border-top: none;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(input[type="submit"], .button, .submit_button, .btn_submit, .p-link-button, .p-link-button--primary) {
  min-height: 52px;
  width: min(100%, 420px);
  margin-top: var(--harmony-form-cta-gap);
  margin-left: auto;
  margin-right: auto;
}

/* event entry のボタン見た目を他フォームと統一 */
:is(
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.p-link-button, .p-link-button--primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: min(100%, 420px);
  padding: var(--space-md) calc(var(--space-xl) + var(--space-sm));
  font-size: var(--font-size-sm);
  font-family: 'Sawarabi Gothic';
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-white);
  text-decoration: none;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-natural);
}

:is(
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.p-link-button, .p-link-button--primary):hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

:is(
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.p-link-button, .p-link-button--primary):active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-subtle);
}

:is(
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.p-link-button, .p-link-button--primary):is(:link, :visited, :active) {
  color: var(--color-white);
  text-decoration: none;
}

:is(
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) .p-link-button--disabled {
  opacity: 0.6;
  pointer-events: none;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  .textfield .p-event-reservation form[name="reservation-event"]
) :is(.g-recaptcha, [id*="recaptcha" i]) {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  :is(
    .section.contact form.contact_form,
    body#contact form[name="frm"],
    body#reservation form[name="frm"],
    body#event-reservation form[name="frm"],
    body#event-reservation form[name="reservation-event"],
    .textfield .p-event-reservation form[name="reservation-event"]
  ) :is(.contact_area, .reservation_area, .p-form-field) {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    column-gap: var(--space-lg);
    align-items: start;
  }

  :is(
    .section.contact form.contact_form,
    body#contact form[name="frm"],
    body#reservation form[name="frm"],
    body#event-reservation form[name="frm"],
    body#event-reservation form[name="reservation-event"],
    .textfield .p-event-reservation form[name="reservation-event"]
  ) :is(.contact_area, .reservation_area, .p-form-field) > label {
    margin-bottom: 0;
    padding-top: var(--space-xs);
  }

  /* contact/top_contact: checkbox/radio の複数行でも右カラムに固定 */
  :is(
    .section.contact form.contact_form,
    body#contact form[name="frm"]
  ) .contact_area > label {
    grid-column: 1;
  }

  :is(
    .section.contact form.contact_form,
    body#contact form[name="frm"]
  ) .contact_area > :not(label) {
    grid-column: 2;
  }

}

@media (min-width: 768px) {
  /* reservation: 見た目は2カラム維持しつつ、日時要素の分解を防ぐ */
  body#reservation form[name="frm"] .reservation_area {
    --harmony-reservation-label-width: 200px;
    display: block;
    position: relative;
    padding: var(--space-sm) 0 var(--space-sm) calc(var(--harmony-reservation-label-width) + var(--space-lg));
  }

  body#reservation form[name="frm"] .reservation_area > label {
    position: absolute;
    left: 0;
    top: var(--space-sm);
    width: var(--harmony-reservation-label-width);
    margin: 0;
    padding-top: 0;
    line-height: var(--line-height-tight);
  }

  /* 予約日時・時分: 右カラム内で横並びを維持 */
  body#reservation form[name="frm"] .reservation_area :is(
    select[name*="reserve_date" i],
    select[name*="reserve_time" i],
    select[name*="year" i],
    select[name*="month" i],
    select[name*="day" i],
    select[name*="hour" i],
    select[name*="minute" i],
    input[name*="reserve_date" i],
    input[name*="reserve_time" i],
    input[name*="year" i],
    input[name*="month" i],
    input[name*="day" i],
    input[name*="hour" i],
    input[name*="minute" i],
    .reservation_small
  ) {
    display: inline-block;
    width: auto;
    min-width: 5.1em;
    max-width: 6.2em;
    padding: var(--space-sm) var(--space-sm);
    margin-right: var(--space-xs);
    vertical-align: middle;
  }

  body#reservation form[name="frm"] .reservation_area .radio {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: 0;
  }

  body#reservation form[name="frm"] .reservation_area .radio input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
  }

  body#reservation form[name="frm"] .reservation_area .radio + .radio {
    margin-top: var(--space-sm);
  }

  /* 最後の案内文は1カラムで全幅を使用 */
  body#reservation form[name="frm"] .reservation_area:last-of-type > p {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 767px) {
  /* モバイル: 日時セレクトのサイズを詰めて2段化を防ぐ */
  body#reservation form[name="frm"] .reservation_area :is(
    select[name*="reserve_date" i],
    select[name*="reserve_time" i],
    select[name*="year" i],
    select[name*="month" i],
    select[name*="day" i],
    select[name*="hour" i],
    select[name*="minute" i],
    input[name*="reserve_date" i],
    input[name*="reserve_time" i],
    input[name*="year" i],
    input[name*="month" i],
    input[name*="day" i],
    input[name*="hour" i],
    input[name*="minute" i],
    .reservation_small
  ) {
    width: clamp(3.9em, 20vw, 4.8em);
    min-width: 3.9em;
    max-width: 4.8em;
    padding: clamp(8px, 2.2vw, 10px) clamp(6px, 1.8vw, 8px);
    margin-right: clamp(2px, 1vw, 6px);
    font-size: clamp(1.4rem, 3.6vw, var(--font-size-sm));
    vertical-align: middle;
  }
}

/* ==================================================
   Gadgets & Social Section - Shared Utility Zone
================================================== */
.gadgets {
  padding: var(--space-2xl) 0;
}

.gadgets .inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: stretch;
  inline-size: clamp(320px, 72vw, 760px);
  max-inline-size: calc(100% - (var(--space-lg) * 2));
  margin-inline: auto;
  padding: var(--space-xl);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

.gadgets #navi_parts {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.gadgets #navi_parts {
  gap: 0;
  inline-size: 100%;
}

.gadgets #navi_parts > * {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.gadgets #navi_parts > * + * {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: none;
}

.gadgets #navi_parts > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(88%, 560px);
  border-top: 1px solid var(--color-border);
  transform: translateX(-50%);
}

@media (max-width: 1023px) {
  .gadgets .inner {
    inline-size: auto;
    max-inline-size: calc(100% - (var(--space-lg) * 2));
    padding: var(--space-lg);
  }

  .gadgets #navi_parts > * + * {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
  }

  .gadgets #navi_parts > * + *::before {
    width: min(92%, 420px);
  }
}

.gadgets .sidebar {
  padding: 0;
}

.gadgets .sidebar .section {
  margin-bottom: var(--space-md);
}

.gadgets .sidebar .section:last-child {
  margin-bottom: 0;
}

.gadgets .navi_parts_detail {
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: clamp(120px, 18vw, 240px);
  padding: var(--space-sm);
  text-align: center;
}

.gadgets .navi_parts_detail > a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-inline-size: 100%;
  border-radius: var(--radius-medium);
  transition: transform var(--duration-base) var(--ease-natural),
              box-shadow var(--duration-base) var(--ease-natural),
              opacity var(--duration-base) var(--ease-natural);
}

.gadgets .navi_parts_detail > a:focus-visible {
  outline-offset: 4px;
  box-shadow: var(--shadow-medium);
}

@media (hover: hover) and (pointer: fine) {
  .gadgets .navi_parts_detail > a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    opacity: 0.98;
  }
}

.gadgets .navi_parts_detail img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(140px, 28vw, 320px);
  margin-inline: auto;
  object-fit: contain;
  height: auto;
}

@media (max-width: 1023px) {
  .gadgets .navi_parts_detail img {
    max-height: clamp(120px, 36vw, 260px);
  }

  .gadgets .navi_parts_detail {
    min-block-size: clamp(112px, 26vw, 200px);
  }
}

.gadgets #social_widgets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.gadgets .social_widget {
  max-width: 100%;
}

.gadgets .social_widget iframe {
  max-width: 100%;
}

.gadgets #navi_parts br {
  display: none;
}

/* ==================================================
   Social Section - External Service Utility Layer
================================================== */
#container > .social {
  padding: var(--space-lg) 0 0;
}

#container > .social > .inner {
  inline-size: clamp(320px, 72vw, 760px);
  max-inline-size: calc(100% - (var(--space-lg) * 2));
  margin-inline: auto;
  padding: 0;
}

#container > .social #navi_parts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

#container > .social #navi_parts > * {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

#container > .social .navi_parts_detail {
  display: grid;
  place-items: center;
  text-align: center;
}

#container > .social .navi_parts_detail img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

#container > .social #social_widgets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-sm) var(--space-md);
}

#container > .social .social_widget {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
}

#container > .social .social_widget iframe {
  display: block;
  max-width: 100%;
}

#container > .social #navi_parts br {
  display: none;
}

#container > .social + #footer {
  margin-top: var(--space-xl);
}

@media (max-width: 1023px) {
  #container > .social > .inner {
    max-inline-size: calc(100% - (var(--space-lg) * 2));
  }
}

/* ==================================================
   Autopagerize Elements - Content Spacing
================================================== */
.autopagerize_page_element {
  padding: var(--space-lg) 0;  /* 32px */
}

.autopagerize_page_element .article,
.autopagerize_page_element > .inner > * {
  margin-bottom: var(--space-lg);  /* 32px */
}

.autopagerize_page_element .article:last-child {
  margin-bottom: 0;
}

/* Info Page - Autopagerize */
#info .autopagerize_page_element {
  padding: var(--space-xl) 0;  /* 48px */
}

/* 共通のmargin-topと重複させない */
#content > .inner > .page_title + .autopagerize_page_element,
#content > .page .inner > .page_title + .autopagerize_page_element {
  padding-top: 0;
}

#info .autopagerize_page_element .article {
  background: var(--color-white);
  border-radius: var(--radius-large);
  padding: var(--space-lg);  /* 32px */
  margin-bottom: var(--space-lg);  /* 32px */
  box-shadow: var(--shadow-subtle);
  transition: all var(--duration-base) var(--ease-natural);
}

/* /info: article内の縦リズムは body の gap で一元管理 */
body#info .autopagerize_page_element .article .body {
  display: grid;
  gap: var(--space-md);
}

/* /info: 画像未登録時はグレー領域を出さない */
body#info .autopagerize_page_element .article .photo:not(:has(*)) {
  display: none;
}

/* /info: 余白は body 側で管理するため個別marginは持たせない */
body#info .autopagerize_page_element .article .photo:has(*) {
  margin: 0;
}

/* /info: 本文先頭の不要余白を除去（画像有無で差が出ないようにする） */
body#info .autopagerize_page_element .article .body .textfield {
  padding: 0;
}

#info .autopagerize_page_element .article:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-2px);
}

#info .autopagerize_page_element .article:last-child {
  margin-bottom: 0;
}

/* /infoページの日付スタイル */
#info .autopagerize_page_element .article .date,
#info .article .date,
body#info .article .date {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-xs);  /* 8px */
  margin-top: 0;
}

/* /infoページの記事タイトルに適切な余白を追加 */
#info .autopagerize_page_element .article .article_title,
#info .autopagerize_page_element .article .title,
#info .autopagerize_page_element .article h3,
#info .article .article_title,
#info .article .title,
#info .article h3,
body#info .article .article_title,
body#info .article .title,
body#info .article h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-sumi-dark);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
}

/* ==================================================
   Content Areas - Generous Padding
================================================== */
.content,
.main_content,
.textfield {
  padding: var(--space-xl) 0;  /* 48px */
}

.content .inner,
.main_content .inner,
.textfield .inner {
  padding: var(--space-lg);  /* 32px */
}

/* Text Content - Breathing Space */
.textfield p,
.textfield .text p {
  margin-bottom: var(--space-md);  /* 24px */
  line-height: var(--line-height-relaxed);
}

.textfield h1,
.textfield h2,
.textfield h3,
.textfield h4 {
  margin-top: var(--space-lg);  /* 32px */
  margin-bottom: var(--space-md);  /* 24px */
}

.textfield h1:first-child,
.textfield h2:first-child,
.textfield h3:first-child {
  margin-top: 0;
}

/* Images within content */
.textfield img {
  margin: var(--space-lg) 0;  /* 32px */
  border-radius: var(--radius-large);
}

/* Lists within content */
.textfield ul,
.textfield ol {
  padding-left: var(--space-lg);  /* 32px */
  margin-bottom: var(--space-md);  /* 24px */
}

.textfield li {
  margin-bottom: var(--space-xs);  /* 8px */
  line-height: var(--line-height-relaxed);
}

/* ==================================================
   Free Page (/free/xxxx) - Harmony Editorial
================================================== */
body#free #content > .inner > .textfield {
  padding: 0;
}

body#free #content > .inner > .textfield > .free-content {
  margin: 0;
  padding: var(--space-lg);  /* /info・/diaryカードと同じ 32px */
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  color: var(--color-sumi-medium);
}

body#free #content > .inner > .textfield > .free-content > :where(script, style):first-child,
body#free #content > .inner > .textfield > .free-content > :where(script, style):last-child {
  margin: 0;
}

body#free .free-content > :not(script):not(style) + :not(script):not(style) {
  margin-top: var(--space-md);
}

body#free .free-content :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--color-sumi-dark);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
}

body#free .free-content h1 {
  font-size: clamp(2.3rem, 2.2vw, 3.2rem);
}

body#free .free-content h2 {
  font-size: clamp(2.1rem, 2vw, 2.8rem);
}

body#free .free-content h3 {
  font-size: clamp(1.9rem, 1.8vw, 2.4rem);
}

body#free .free-content h4 {
  font-size: clamp(1.7rem, 1.4vw, 2rem);
}

body#free .free-content :is(h1, h2, h3, h4) + :not(script):not(style) {
  margin-top: var(--space-sm);
}

body#free .free-content p {
  margin: 0;
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

body#free .free-content :is(ul, ol):not([class]) {
  margin: 0;
  padding-left: clamp(2.2rem, 3.2vw, 3.2rem);
}

body#free .free-content ul:not([class]) {
  list-style: disc;
}

body#free .free-content ol:not([class]) {
  list-style: decimal;
}

body#free .free-content :is(ul, ol):not([class]) li {
  margin: 0;
}

body#free .free-content :is(ul ul, ol ul):not([class]) {
  list-style: circle;
  margin-top: var(--space-xs);
}

body#free .free-content :is(ol ol, ul ol):not([class]) {
  list-style: lower-alpha;
  margin-top: var(--space-xs);
}

body#free .free-content :is(img, video, iframe) {
  margin: 0;
  width: min(100%, 100%);
  max-width: 100%;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-subtle);
  background: var(--color-washi);
}

body#free .free-content iframe {
  border: 0;
  min-height: 240px;
}

body#free .free-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--duration-base) var(--ease-natural);
}

body#free .free-content a:hover {
  color: var(--color-primary-dark);
}

body#free .free-content :is(table):not([class]) {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-subtle);
}

body#free .free-content :is(table):not([class]) :is(th, td) {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(44, 44, 44, 0.08);
  text-align: left;
  vertical-align: top;
  line-height: var(--line-height-relaxed);
}

body#free .free-content :is(table):not([class]) th {
  width: min(38%, 14em);
  background: rgba(107, 114, 128, 0.08);
  color: var(--color-sumi-dark);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
}

body#free .free-content :is(table):not([class]) td {
  color: var(--color-sumi-medium);
}

body#free .free-content blockquote:not([class]) {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-primary);
  background: rgba(107, 114, 128, 0.08);
  color: var(--color-sumi-medium);
  border-radius: var(--radius-small);
}

body#free .free-content hr:not([class]) {
  border: 0;
  border-top: 1px solid rgba(44, 44, 44, 0.12);
  margin: var(--space-md) 0;
}

@media (min-width: 1024px) {
  body#free .free-content :is(table):not([class]) th {
    width: min(34%, 16em);
  }
}

/* ==================================================
   Photo Page - Harmony
================================================== */
body#photo #index,
body#photo #entries {
  width: 100%;
}

body#photo #index {
  display: grid;
  gap: var(--space-2xl);
}

body#photo #index .album {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

body#photo #index .album:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

body#photo #index .album .album_title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
}

body#photo #index .album .album_title a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  background: rgba(107, 114, 128, 0.08);
  border-radius: var(--radius-small);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

body#photo #index .album .album_title a::after {
  content: none;
}

body#photo #index .album .album_title a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

body#photo #index .album .album_title a:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.18);
  outline: none;
}

body#photo #index .album .album_title a:hover::after {
  content: none;
}

body#photo #index .thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-medium);
  aspect-ratio: 4 / 3;
  background: var(--color-border);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--duration-base) var(--ease-natural),
              box-shadow var(--duration-base) var(--ease-natural);
}

body#photo #index .thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

body#photo #index .thumb > a {
  display: block;
  width: 100%;
  height: 100%;
}

body#photo #index .thumb :is(span, img) {
  display: block;
  width: 100%;
  height: 100%;
}

body#photo #index .thumb img {
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-natural);
}

body#photo #index .thumb:hover img {
  transform: scale(1.04);
}

body#photo #entries {
  margin-top: 0;
}

/* アルバム一覧が存在する時だけ、一覧と詳細の間に間を作る */
body#photo #index:has(.album) + #entries {
  margin-top: var(--space-2xl);
}

/* アルバム一覧が空のページでは余白生成源を無効化 */
body#photo #index:not(:has(.album)) {
  display: none;
}

/* アルバム一覧が空でも、page_title直下の余白リズムを維持 */
body#photo #index:not(:has(.album)) + #entries {
  margin-top: var(--space-xl);
}

body#photo #entries > h3 {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-size-md);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
  color: var(--color-sumi-dark);
}

body#photo #entries .autopagerize_page_element {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
}

body#photo #entries .article {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: 0 4px 16px rgba(44, 44, 44, 0.06);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-natural),
              box-shadow var(--duration-base) var(--ease-natural);
}

body#photo #entries .article:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(44, 44, 44, 0.1);
}

body#photo #entries .article .photo {
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--color-washi);
  overflow: hidden;
}

body#photo #entries .article .photo > a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

body#photo #entries .article .photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-natural);
}

body#photo #entries .article:hover .photo img {
  transform: scale(1.03);
}

body#photo #entries .article > h4 {
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  font-size: var(--font-size-base);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-tight);
  color: var(--color-sumi-dark);
}

body#photo #entries .article .textfield {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

body#photo #entries .article .textfield:empty {
  display: none;
}

/* /photoカード内の末尾段落マージンを打ち消し、下余白の過剰化を防ぐ */
body#photo #entries .article .textfield > :last-child {
  margin-bottom: 0;
}

/* 日付があるカードだけ本文末尾余白を日付側へ委譲 */
body#photo #entries .article:has(.date:not(:empty)) .textfield {
  padding-bottom: 0;
}

/* 日付非表示 + 本文なしの時は、タイトル直下の余白を補完 */
body#photo #entries .article:has(.textfield:empty):not(:has(.date:not(:empty))) > h4 {
  padding-bottom: var(--space-md);
}

body#photo #entries .article .date {
  margin-top: auto;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  letter-spacing: var(--letter-spacing-tight);
}

/* 日付非表示設定時の空要素はレイアウトから除外 */
body#photo #entries .article .date:empty {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body#photo #index .album {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body#photo #entries .autopagerize_page_element {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body#photo #index .album {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body#photo #entries .autopagerize_page_element {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==================================================
   Photo Modal - Harmony
================================================== */
.photo-modal-dialog {
  width: min(920px, 86vw);
  max-height: 84vh;
  border: none;
  padding: 0;
  background: transparent;
  overflow: hidden;
  margin: auto;
}

.photo-modal-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}

.photo-modal-dialog::backdrop {
  background: rgba(44, 44, 44, 0.52);
  backdrop-filter: blur(3px);
}

.photo-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 84vh;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(44, 44, 44, 0.08);
  border-radius: var(--radius-large);
  box-shadow: 0 14px 36px rgba(44, 44, 44, 0.18);
}

.photo-modal-close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(44, 44, 44, 0.12);
  border-radius: var(--radius-full);
  background: rgba(252, 251, 249, 0.82);
  color: var(--color-sumi-medium);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: all var(--duration-base) var(--ease-natural);
}

.photo-modal-close:hover {
  color: var(--color-primary);
  border-color: rgba(107, 114, 128, 0.28);
  background: rgba(255, 255, 255, 0.96);
  transform: rotate(90deg) scale(1.02);
}

.photo-modal-image {
  aspect-ratio: 16 / 10;
  background: var(--color-washi);
  overflow: hidden;
}

.photo-modal-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto;
}

.photo-modal-body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  overflow: auto;
  border-top: 1px solid rgba(44, 44, 44, 0.06);
  background: rgba(252, 251, 249, 0.94);
}

.photo-modal-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-sumi-dark);
  line-height: var(--line-height-tight);
}

.photo-modal-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

.photo-modal-text :is(p, ul, ol) {
  margin: 0;
}

.photo-modal-date {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  letter-spacing: var(--letter-spacing-tight);
}

.photo-modal-title:empty,
.photo-modal-text:empty,
.photo-modal-date:empty {
  display: none;
}

@media (max-width: 767px) {
  body#photo #index:has(.album) + #entries {
    margin-top: var(--space-xl);
  }

  body#photo #index:not(:has(.album)) + #entries {
    margin-top: var(--space-lg);
  }

  .photo-modal-dialog {
    width: calc(100vw - (var(--space-md) * 2));
    max-height: 86vh;
  }

  .photo-modal-close {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    font-size: 1.7rem;
  }

  .photo-modal-image {
    aspect-ratio: 4 / 3;
  }

  .photo-modal-body {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
  }

  body#photo #index .album {
    grid-template-columns: 1fr;
  }

  body#photo #index .album .album_title a {
    min-height: 44px;
  }

  body#photo #entries .article .photo {
    aspect-ratio: 4 / 3;
  }

  body#photo #entries .article .photo img {
    max-height: none;
  }
}

/* ==================================================
   Diary Page - /infoページと完全に同じスタイル
================================================== */
/* すべての可能なセレクタを網羅 */
body#diary .autopagerize_page_element,
body#diary .list,
body#diary #entries,
#diary .autopagerize_page_element,
#diary .list,
#diary #entries {
  padding: 0 0 var(--space-xl);  /* 上余白はpage_title直下の共通ルールで管理 */
}

/* freeページの本文は上paddingを持つため、二重余白を防ぐ */
#content > .inner > .page_title + .textfield,
#content > .page .inner > .page_title + .textfield {
  padding-top: 0;
}

/* 記事カード - Infoと完全に同じ */
body#diary .autopagerize_page_element .article,
body#diary .list .article,
body#diary #entries .article,
#diary .autopagerize_page_element .article,
#diary .list .article,
#diary #entries .article {
  background: var(--color-white);
  border-radius: var(--radius-large);
  padding: var(--space-lg);  /* 32px */
  margin-bottom: var(--space-lg);  /* 32px */
  box-shadow: var(--shadow-subtle);
  transition: all var(--duration-base) var(--ease-natural);
  display: block;
}

/* ホバーエフェクト - Infoと同じ */
body#diary .autopagerize_page_element .article:hover,
body#diary .list .article:hover,
body#diary #entries .article:hover,
#diary .autopagerize_page_element .article:hover,
#diary .list .article:hover,
#diary #entries .article:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-2px);
}

/* 最後の記事のマージン */
body#diary .autopagerize_page_element .article:last-child,
body#diary .list .article:last-child,
body#diary #entries .article:last-child,
#diary .autopagerize_page_element .article:last-child,
#diary .list .article:last-child,
#diary #entries .article:last-child {
  margin-bottom: 0;
}

/* 記事の写真 - Infoと同じ16:10 */
body#diary .article .photo,
#diary .article .photo {
  aspect-ratio: 16 / 10;
  background: var(--color-border);
  overflow: hidden;
  border-radius: var(--radius-large);
  margin-bottom: var(--space-md);
  margin-top: var(--space-md);
  position: relative;
}

/* 写真の画像 */
body#diary .article .photo img,
#diary .article .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-natural);
  display: block;
}

/* 画像のズームインエフェクト */
body#diary .article:hover .photo img,
#diary .article:hover .photo img {
  transform: scale(1.05);
}

/* ==================================================
   Diary Page Styles - /infoページと完全に統一
   実際のHTML: .textfield > .p-diary > .p-diary__unit > .p-diary__date
================================================== */

/* 日付スタイル - /infoと統一 */
.p-diary__date,
#diary .p-diary__date,
body#diary .p-diary__date,
#diary .article .date,
body#diary .article .date {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-xs);  /* 8px */
  margin-top: 0;
  padding: 0;
  line-height: 1.5;
}

/* タイトルスタイル - /infoと統一 */
body#diary .article_title,
body#diary .title,
body#diary h3,
#diary .article_title,
#diary .title,
#diary h3,
.p-diary__unit .article_title,
.p-diary__unit .title,
.p-diary__unit h3 {
  display: block;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-sumi-dark);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
  margin-top: var(--space-md);  /* 24px */
  margin-bottom: var(--space-md);  /* 24px */
  padding: 0;
}

/* タイトルリンク */
body#diary .article_title a,
body#diary .title a,
body#diary h3 a,
#diary .article_title a,
#diary .title a,
#diary h3 a {
  color: var(--color-sumi-dark);
  transition: color var(--duration-base) var(--ease-natural);
}

body#diary .article_title a:hover,
body#diary .title a:hover,
body#diary h3 a:hover,
#diary .article_title a:hover,
#diary .title a:hover,
#diary h3 a:hover {
  color: var(--color-primary);
}

/* 本文スタイル */
body#diary .textfield,
body#diary .body,
body#diary .text,
#diary .textfield,
#diary .body,
#diary .text {
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
  padding: 0;
}

/* ==================================================
   Diary Page - .p-diary__unit カードデザイン
   /infoページの.articleと同じスタイルを適用
================================================== */
body#diary .p-diary__unit,
#diary .p-diary__unit {
  background: var(--color-white);
  border-radius: var(--radius-large);
  padding: var(--space-lg);  /* 32px */
  margin-bottom: var(--space-lg);  /* 32px */
  box-shadow: var(--shadow-subtle);
  transition: all var(--duration-base) var(--ease-natural);
  display: block;
}

/* ホバーエフェクト */
body#diary .p-diary__unit:hover,
#diary .p-diary__unit:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-2px);
}

/* カテゴリー表示 - タグ/バッジスタイル */
body#diary .p-diary__category,
#diary .p-diary__category {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);  /* 8px 24px */
  margin-bottom: var(--space-md);  /* 24px */
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  background: rgba(107, 114, 128, 0.08);  /* プライマリカラーの8%透明度 */
  border-radius: var(--radius-small);  /* 4px */
  transition: all var(--duration-base) var(--ease-natural);
}

/* バッジホバー時のスタイル（カードホバーではなく） */
body#diary .p-diary__category:hover,
#diary .p-diary__category:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* カテゴリー内のリンク */
body#diary .p-diary__category a,
#diary .p-diary__category a {
  color: inherit;
  text-decoration: none;
}

/* 記事内の写真（.p-diary__unit内） */
body#diary .p-diary__unit .photo,
#diary .p-diary__unit .photo {
  aspect-ratio: 16 / 10;
  background: var(--color-border);
  overflow: hidden;
  border-radius: var(--radius-large);
  margin-bottom: var(--space-md);
  margin-top: var(--space-md);
  position: relative;
}

/* 写真の画像 */
body#diary .p-diary__unit .photo img,
#diary .p-diary__unit .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-natural);
  display: block;
}

/* 画像のズームインエフェクト */
body#diary .p-diary__unit:hover .photo img,
#diary .p-diary__unit:hover .photo img {
  transform: scale(1.05);
}

/* 日付・タイトル・本文スタイルは上部で統一されています（line 1397-1465） */

/* Menu styles are consolidated in "Menu Section - Unified Experience" */

/* ==================================================
   Page-specific Sections - Proper Spacing
================================================== */
/* About Section - Top/Aboutページ共通コンポーネント */
.section.about .inner,
body#about #content > .inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

body#about #content > .inner > .page_title + * {
  margin-top: 0;
}

.section.about .inner > .summary,
.section.about .inner > .map,
body#about #content > .inner > .summary,
body#about #content > .inner > .map {
  background: var(--color-white);
  border: 1px solid rgba(44, 44, 44, 0.06);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

.section.about .inner > .summary,
body#about #content > .inner > .summary {
  order: 1;
  padding: var(--space-lg);
}

.section.about .inner > .summary :is(p, li),
body#about #content > .inner > .summary :is(p, li) {
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

.section.about .inner > .summary table,
body#about #content > .inner > .summary table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.section.about .inner > .summary :is(tbody, tr, th, td),
body#about #content > .inner > .summary :is(tbody, tr, th, td) {
  display: block;
  width: 100%;
}

.section.about .inner > .summary tr,
body#about #content > .inner > .summary tr {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(44, 44, 44, 0.08);
}

.section.about .inner > .summary tr:last-child,
body#about #content > .inner > .summary tr:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section.about .inner > .summary th,
body#about #content > .inner > .summary th {
  padding: 0;
  margin: 0;
  font-weight: 600;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-base);
  line-height: 1.8;
  text-align: left;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  margin-bottom: 4px;
}

.section.about .inner > .summary td,
body#about #content > .inner > .summary td {
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-sm);
  line-height: 1.75;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 0;
}

.section.about .inner > .summary td br + br,
body#about #content > .inner > .summary td br + br {
  display: none;
}

.section.about .inner > .summary td :is(p, ul, ol),
body#about #content > .inner > .summary td :is(p, ul, ol) {
  margin: 0;
}

.section.about .inner > .summary td > * + *,
body#about #content > .inner > .summary td > * + * {
  margin-top: var(--space-xs);
}

.section.about .inner > .summary dl,
body#about #content > .inner > .summary dl {
  display: block;
}

.section.about .inner > .summary dt,
body#about #content > .inner > .summary dt {
  margin: 0;
  font-weight: 600;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-base);
  line-height: 1.8;
  padding-top: 0;
  white-space: nowrap;
  word-break: keep-all;
  margin-bottom: 4px;
}

.section.about .inner > .summary dd,
body#about #content > .inner > .summary dd {
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-sm);
  line-height: 1.75;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(44, 44, 44, 0.08);
  margin-bottom: var(--space-sm);
}

.section.about .inner > .summary dd br + br,
body#about #content > .inner > .summary dd br + br {
  display: none;
}

.section.about .inner > .summary dd :is(p, ul, ol),
body#about #content > .inner > .summary dd :is(p, ul, ol) {
  margin: 0;
}

.section.about .inner > .summary dd > * + *,
body#about #content > .inner > .summary dd > * + * {
  margin-top: var(--space-xs);
}

.section.about .inner > .summary dd:last-child,
body#about #content > .inner > .summary dd:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.section.about .inner > .summary a,
body#about #content > .inner > .summary a {
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

.section.about .inner > .summary a:hover,
body#about #content > .inner > .summary a:hover {
  color: var(--color-primary-dark);
}

.section.about .inner > .summary a:focus-visible,
body#about #content > .inner > .summary a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.16);
  border-radius: 2px;
}

.section.about .inner > .map,
body#about #content > .inner > .map {
  order: 2;
  overflow: hidden;
}

.section.about .inner > .map:empty,
body#about #content > .inner > .map:empty {
  display: none;
}

.section.about .inner > .map :is(iframe, img),
body#about #content > .inner > .map :is(iframe, img) {
  display: block;
  width: 100%;
  min-height: clamp(240px, 36vw, 420px);
  border: 0;
}

@media (max-width: 767px) {
  .section.about .inner > .summary,
  body#about #content > .inner > .summary {
    padding: var(--space-md);
  }

  .section.about .inner > .summary tr,
  body#about #content > .inner > .summary tr {
    padding: var(--space-xs) 0;
  }

  .section.about .inner > .summary dd:last-child,
  body#about #content > .inner > .summary dd:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  body#about #content > .inner > .page_title {
    grid-column: 1 / -1;
  }

  .section.about .inner.about--has-map,
  body#about #content > .inner.about--has-map {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: var(--space-xl);
  }

  .section.about .inner.about--no-map,
  body#about #content > .inner.about--no-map {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .section.about .inner.about--no-map > .summary,
  body#about #content > .inner.about--no-map > .summary {
    max-width: 960px;
    width: 100%;
    margin-inline: auto;
  }

  .section.about .inner > .summary,
  body#about #content > .inner > .summary,
  .section.about .inner > .map,
  body#about #content > .inner > .map {
    min-width: 0;
  }
}

/* Welcome Message */
.section.welcomemessage {
  padding: var(--space-2xl) 0;  /* 64px */
}

.section.welcomemessage .inner {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Top welcome message: フォーム用 .message スタイルと分離して導入文カード化 */
body#top .section.welcomemessage .message.textfield {
  --harmony-welcome-card-max: 980px;
  --harmony-welcome-card-inset: clamp(12px, 2.2vw, 32px);
  width: min(calc(100% - (var(--harmony-welcome-card-inset) * 2)), var(--harmony-welcome-card-max));
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 52px);
  border: 1px solid rgba(44, 44, 44, 0.05);
  border-radius: var(--radius-large);
  background: var(--color-white);
  box-shadow: var(--shadow-subtle);
  overflow: visible;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-base);
}

body#top .section.welcomemessage .message.textfield > :not(script):not(style) {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body#top .section.welcomemessage .message.textfield > :first-child {
  margin-top: 0;
}

body#top .section.welcomemessage .message.textfield > :last-child {
  margin-bottom: 0;
}

body#top .section.welcomemessage .message.textfield :is(p, ul, ol) {
  margin: 0;
}

body#top .section.welcomemessage .message.textfield :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: var(--space-md);
}

/* 空データ時は導入カード自体を非表示にして不要な余白を出さない */
body#top .section.welcomemessage.is-empty,
body#top .section.welcomemessage:has(.message.textfield:empty) {
  display: none;
}

@media (max-width: 1023px) {
  /* 非デスクトップは他セクションと同じ外周ガター基準に統一 */
  .section.welcomemessage .inner {
    padding: 0 var(--container-padding);
  }

  body#top .section.welcomemessage .message.textfield {
    --harmony-welcome-card-inset: 0px;
  }
}

/* Calendar Section */
.wrap_calendar {
  padding: var(--space-lg);  /* 32px */
  background: var(--color-white);
  border-radius: var(--radius-large);  /* 16px - 角丸を維持 */
  box-shadow: var(--shadow-subtle);
  margin-bottom: var(--space-lg);  /* 32px */
  max-width: 100%;  /* モバイル対応 */
  overflow-x: auto;  /* モバイル対応 */
}

/* Calendar Navigation (Month Navigation) */
.calendar-nav,
.wrap_calendar > p,
.wrap_calendar > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-washi);
  /* border-radius removed */
}

.calendar-nav a,
.wrap_calendar > p a,
.wrap_calendar > div:first-child a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-primary);  /* 2px → 1px 統一 */
  /* border-radius removed */
  transition: all var(--duration-base) var(--ease-natural);
  text-decoration: none;
}

.calendar-nav a:hover,
.wrap_calendar > p a:hover,
.wrap_calendar > div:first-child a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.calendar-nav .current-month,
.wrap_calendar > p strong,
.wrap_calendar > div:first-child strong {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-sumi-dark);
  letter-spacing: var(--letter-spacing-base);
}

.table_calendar {
  margin-bottom: var(--space-md);  /* 24px */
  width: 100%;
  border-collapse: collapse;  /* separate → collapse 統一 */
  max-width: 100%;  /* モバイル対応 */
}

/* テーブルのスタイリング */
.table_calendar table {
  width: 100%;
  border-collapse: collapse;  /* separate → collapse 統一 */
  /* border-radius removed */
  /* overflow removed */
  box-shadow: var(--shadow-subtle);
  border: 1px solid var(--color-border);  /* 枠線追加 */
}

.table_calendar th,
.table_calendar td {
  padding: var(--space-md);
  text-align: center;
  border: 1px solid var(--color-border);  /* 統一 */
  transition: all var(--duration-base) var(--ease-natural);
  vertical-align: middle;  /* 垂直方向中央揃え */
}

.table_calendar th {
  background: var(--color-washi);
  font-weight: 500;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-base);
}

.table_calendar td {
  background: var(--color-white);
  color: var(--color-sumi-dark);
  font-size: var(--font-size-base);
  /* 高さ指定は #calendar .table_calendar td で管理 */
}

.table_calendar td:hover {
  background: var(--color-washi);
  transform: scale(1.02);
  box-shadow: var(--shadow-medium);
}

.table_calendar td.today {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 500;
}

.table_calendar td.disabled {
  color: var(--color-sumi-light);
  background: var(--color-washi);
  opacity: 0.5;
}

/* Previous/Next month dates - make them more muted */
.table_calendar td.prev-month,
.table_calendar td.next-month,
.table_calendar td[class*="other-month"] {
  color: var(--color-sumi-light);
  background: var(--color-washi);
  opacity: 0.4;
  font-size: var(--font-size-xs);
}

.table_calendar td.prev-month:hover,
.table_calendar td.next-month:hover,
.table_calendar td[class*="other-month"]:hover {
  opacity: 0.6;
  background: var(--color-washi);
  transform: none;
  box-shadow: none;
  cursor: default;
}

/* スケジュールの日付（カードヘッダー） */
#calendar .schedule dt.date {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 500;
  color: var(--color-sumi-dark);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  line-height: var(--line-height-tight);
}

/* アイコンがimg要素の場合 */
#calendar .schedule dt.date img {
  margin-right: 0;
}

/* スケジュール項目 */
#calendar .schedule dd {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  row-gap: 6px;
}

#calendar .schedule dd + dd {
  margin-top: var(--space-sm);
}

/* スケジュール項目内の要素間の余白 */
#calendar .schedule dd .category {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 2px 10px;
  border-radius: var(--radius-small);
  background: rgba(107, 114, 128, 0.08);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.4;
}

#calendar .schedule dd .category img {
  max-width: 16px;
  max-height: 16px;
  margin-right: 6px;
}

#calendar .schedule dd > a {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  row-gap: 2px;
  min-width: 0;
}

#calendar .schedule dd .schedule_time {
  display: block;
  min-width: 0;
  font-weight: 500;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
}

#calendar .schedule dd .schedule_title {
  display: block;
  color: var(--color-sumi-dark);
  font-weight: 500;
  line-height: 1.6;
  font-size: var(--font-size-base);
  overflow-wrap: anywhere;
  word-break: normal;
}

#calendar .schedule dd > a:hover .schedule_title {
  color: var(--color-primary);
}

/* calendar/<id>: スケジュール詳細 */
body#calendar #content > .inner > .details {
  display: grid;
  gap: var(--space-lg);
  max-width: 920px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

body#calendar #content > .inner > .details > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0 0 var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

body#calendar #content > .inner > .details .category {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-small);
  background: rgba(107, 114, 128, 0.08);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.4;
}

body#calendar #content > .inner > .details .date {
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.5;
}

body#calendar #content > .inner > .details h3 {
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-tight);
}

body#calendar #content > .inner > .details .body.textfield {
  margin: 0;
  padding: 0;
}

body#calendar #content > .inner > .details .body.textfield > *:first-child {
  margin-top: 0;
}

body#calendar #content > .inner > .details .body.textfield > *:last-child {
  margin-bottom: 0;
}

body#calendar #content > .inner > .details .image {
  margin: 0;
}

body#calendar #content > .inner > .details .image:empty {
  display: none;
}

body#calendar #content > .inner > .details .image :is(a, img) {
  display: block;
}

body#calendar #content > .inner > .details .image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-subtle);
}

@media (max-width: 767px) {
  body#calendar #content > .inner > .details {
    gap: var(--space-md);
    padding: var(--space-md);
  }

  body#calendar #content > .inner > .details h3 {
    font-size: var(--font-size-md);
  }
}

/* Menu Section */
.menu_category,
#menu .category {
  margin-bottom: var(--space-2xl);
}

.menu_category_title,
#menu .category_title,
#menu .menu_category h2 {
  margin: 0;
  padding: 0;
  border: none;
}

/* Menu Section - Unified Experience (/menu, /menu/c<id>, /menu/<id>) */
#menu .list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0 0 var(--space-2xl);
  padding: 0;
  list-style: none;
}

#menu .list:last-of-type {
  margin-bottom: 0;
}

#menu .list .category_title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

#menu .list .category_title :is(a, span) {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-primary);
  background: rgba(107, 114, 128, 0.08);
  border-radius: var(--radius-small);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

.menu_item,
#menu .list .article {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid rgba(44, 44, 44, 0.08);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--duration-base) var(--ease-natural),
              box-shadow var(--duration-base) var(--ease-natural),
              border-color var(--duration-base) var(--ease-natural);
  height: 100%;
}

.menu_item:hover,
#menu .list .article:hover {
  border-color: rgba(107, 114, 128, 0.2);
  box-shadow: var(--shadow-strong);
  transform: translateY(-3px);
}

.menu_item:focus-within,
#menu .list .article:focus-within {
  border-color: rgba(107, 114, 128, 0.28);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.14);
}

/* メニューアイテムの画像 */
.menu_item .photo,
#menu .list .article .photo {
  width: 100%;
  aspect-ratio: 16 / 10;  /* 横長の画像 */
  border-radius: var(--radius-medium);
  overflow: hidden;
  margin-bottom: var(--space-md);
  background: var(--color-washi);
}

.menu_item .photo img,
#menu .list .article .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-natural);
}

.menu_item:hover .photo img,
#menu .list .article:hover .photo img {
  transform: scale(1.05);
}

/* メニュー名と価格のヘッダー */
.menu_item .menu-header,
#menu .list .article .menu-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.menu_item .article_title,
#menu .list .article .article_title {
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
  margin: 0;
}

.menu_item .article_title .recommend,
#menu .list .article .article_title .recommend {
  display: inline-flex;
  align-items: center;
  margin: 0 0.55em 0.35em 0;
  padding: 2px 8px;
  border-radius: var(--radius-small);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-primary);
  background: rgba(107, 114, 128, 0.12);
  vertical-align: middle;
}

/* メニュー価格 */
.menu_item .price,
#menu .list .article .price {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.4;
}

/* メニュー説明 */
.menu_item .text,
.menu_item .textfield,
#menu .list .article .text,
#menu .list .article .textfield {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
  flex: 1;
}

#menu .list .article :is(.text, .textfield) :is(p, ul, ol) {
  margin: 0;
}

#menu .list .article :is(.text, .textfield) > * + * {
  margin-top: var(--space-xs);
}

body#menu #content > .inner > .list.menu-list--grid .article :is(.text, .textfield) {
  display: none;
}

body#menu #content > .inner > .list.menu-list--grid .article .menu-header {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  #menu .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  #menu .list.menu-list--single {
    grid-template-columns: 1fr;
  }

  .menu_item,
  #menu .list .article {
    padding: var(--space-lg);
  }

  .menu_item .article_title,
  #menu .list .article .article_title {
    font-size: var(--font-size-base);
  }
}

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

  #menu .list.menu-list--single {
    grid-template-columns: 1fr;
  }

  #menu .list.menu-list--single .article {
    max-width: 960px;
    width: 100%;
    margin-inline: auto;
    padding: var(--space-xl);
  }

  #menu .list.menu-list--single .article .photo {
    aspect-ratio: 16 / 9;
  }

  #menu .list.menu-list--single .article .article_title {
    font-size: var(--font-size-md);
  }
}

/* Staff Section - カードデザイン */
.staff_wrap,
.staff_list,
#staff .list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);  /* 32px */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* スタッフカード */
.staff_wrap .article,
.staff_list .article,
#staff .list .article,
#staff .staff_item {
  background: var(--color-white);
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: all var(--duration-base) var(--ease-natural);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.staff_wrap .article:hover,
.staff_list .article:hover,
#staff .list .article:hover,
#staff .staff_item:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-4px);
}

/* スタッフ写真 */
.staff_wrap .photo,
.staff_list .photo,
#staff .photo,
#staff .staff_photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;  /* 正方形 */
  background: var(--color-border);
}

.staff_wrap .photo img,
.staff_list .photo img,
#staff .photo img,
#staff .staff_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-natural);
}

.staff_wrap .article:hover .photo img,
.staff_list .article:hover .photo img,
#staff .list .article:hover .photo img,
#staff .staff_item:hover .staff_photo img {
  transform: scale(1.05);
}

/* スタッフ情報 */
.staff__text,
.staff_info,
#staff .text {
  padding: var(--space-lg);  /* 32px */
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* スタッフ名 */
.staff_name,
#staff .name,
.staff__text h3 {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-sumi-dark);
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-tight);
}

/* スタッフ役職 */
.staff_role,
#staff .role {
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  margin-bottom: var(--space-md);
}

/* スタッフ紹介文 */
.staff_description,
#staff .description,
.staff__text p {
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
  flex: 1;
}

/* SNSリンク */
.staff__text__social,
#staff .social {
  margin-top: var(--space-md);  /* 24px */
  padding-top: var(--space-md);  /* 24px */
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-sm);
}

.staff__text__social a,
#staff .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-washi);
  transition: all var(--duration-base) var(--ease-natural);
}

.staff__text__social a:hover,
#staff .social a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px) scale(1.1);
  box-shadow: var(--shadow-medium);
}

/* ==================================================
   Recruit Page - Harmony Vertical Rhythm
   対象:
   1) body#recruit の専用求人ページ
   2) freeページで出力される #recruit.c-recruit-table
================================================== */
body#recruit .recruit_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3.2rem, 4.2vw, 5.6rem);
  margin: 0;
  padding: 0;
}

body#recruit .recruit_list > .article {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: clamp(2.4rem, 3vw, 4rem);
  background: linear-gradient(
    180deg,
    rgba(252, 251, 249, 0.92) 0%,
    rgba(255, 255, 255, 1) 24%
  );
  border: 1px solid rgba(44, 44, 44, 0.08);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  overflow: visible;
  transition: transform var(--duration-base) var(--ease-natural),
              box-shadow var(--duration-base) var(--ease-natural),
              border-color var(--duration-base) var(--ease-natural);
}

body#recruit .recruit_list > .article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(107, 114, 128, 0.2);
}

body#recruit .recruit_list > .article + .article {
  margin-top: 0;
}

body#recruit .recruit_list > .article > .article_title {
  margin: 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(44, 44, 44, 0.1);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-sumi-dark);
}

body#recruit .recruit_list > .article > .photo {
  margin: 0;
  border-radius: var(--radius-medium);
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-subtle);
}

body#recruit .recruit_list > .article > .photo:not(:has(*)) {
  display: none;
}

body#recruit .recruit_list > .article > .textfield {
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-sumi-medium);
}

body#recruit .recruit_list > .article > .textfield :is(p, ul, ol) {
  margin: 0;
}

body#recruit .recruit_list > .article > .textfield > * + * {
  margin-top: var(--space-sm);
}

body#recruit .recruit_list > .article > .details {
  padding: var(--space-md);
  background: rgba(252, 251, 249, 0.78);
  border: 1px solid rgba(44, 44, 44, 0.08);
  border-radius: var(--radius-medium);
}

body#recruit .recruit_list > .article > .details dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-xs);
  column-gap: var(--space-md);
}

body#recruit .recruit_list > .article > .details dt {
  margin: 0;
  padding: var(--space-xs) 0 0;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-sumi-medium);
}

body#recruit .recruit_list > .article > .details dd {
  margin: 0;
  padding: 0 0 var(--space-sm);
  border-bottom: 1px solid rgba(44, 44, 44, 0.08);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-sumi-dark);
  overflow-wrap: anywhere;
}

body#recruit .recruit_list > .article > .details dd:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* 空値項目は表示しない（モダンブラウザ前提） */
body#recruit .recruit_list > .article > .details dd:empty {
  display: none;
}

body#recruit .recruit_list > .article > .details dt:has(+ dd:empty) {
  display: none;
}

/* 旧クラス互換 */
.recruit_item {
  padding: clamp(2.4rem, 3vw, 4rem);
  background: linear-gradient(
    180deg,
    rgba(252, 251, 249, 0.92) 0%,
    rgba(255, 255, 255, 1) 24%
  );
  border: 1px solid rgba(44, 44, 44, 0.08);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

.recruit_item dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-xs);
}

.recruit_item dd {
  margin: 0;
}

@media (min-width: 768px) {
  body#recruit .recruit_list > .article > .details {
    padding: var(--space-lg);
  }

  body#recruit .recruit_list > .article > .details dt {
    padding-top: var(--space-xs);
  }

  body#recruit .recruit_list > .article > .details dd {
    padding-bottom: var(--space-xs);
  }
}

@media (min-width: 1024px) {
  body#recruit .recruit_list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  }
}

/* Freeページに埋め込まれる求人テーブル */
.free-content .c-recruit-table,
.textfield #recruit.c-recruit-table {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 3vw, 3.2rem);
  background: var(--color-white);
  border: 1px solid rgba(44, 44, 44, 0.08);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

.free-content .c-recruit-table__note,
.textfield #recruit .c-recruit-table__note {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-medium);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  text-align: center;
}

.free-content .c-recruit-table__note--message,
.textfield #recruit .c-recruit-table__note--message {
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-sumi-dark);
  font-weight: 500;
}

.free-content .c-recruit-table__note--period,
.textfield #recruit .c-recruit-table__note--period {
  margin-top: var(--space-md);
  margin-bottom: 0;
  background: rgba(44, 44, 44, 0.05);
  color: var(--color-sumi-medium);
}

.free-content .c-recruit-table__row,
.textfield #recruit .c-recruit-table__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(44, 44, 44, 0.08);
}

.free-content .c-recruit-table__row:last-of-type,
.textfield #recruit .c-recruit-table__row:last-of-type {
  border-bottom: none;
}

.free-content .c-recruit-table__header-cell,
.textfield #recruit .c-recruit-table__header-cell {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-sumi-medium);
}

.free-content .c-recruit-table__data-cell,
.textfield #recruit .c-recruit-table__data-cell {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-sumi-dark);
}

@media (min-width: 768px) {
  .free-content .c-recruit-table__note,
  .textfield #recruit .c-recruit-table__note {
    padding: var(--space-md);
  }
}

/* Coupon Section */
.coupon {
  padding: var(--space-lg);  /* 32px */
  margin-bottom: var(--space-lg);  /* 32px */
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

.coupon_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.coupon_list .article {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  height: 100%;
}

.coupon_list .article .summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.coupon_list .article .image {
  margin: 0;
}

/* 画像未登録時は空のimage要素を非表示にして不自然な余白を防ぐ */
.coupon_list .article .image:not(:has(*)) {
  display: none;
}

/* 画像がある場合のみ、summaryとの間に余白を付与 */
.coupon_list .article .image:has(*) {
  margin-bottom: var(--space-xs);
}

.coupon_list .article .qrcode {
  margin: 0;
  justify-self: start;
}

.coupon_list .article .qrcode img {
  width: 96px;
  height: auto;
}

.coupon_list .article .article_title {
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  color: var(--color-sumi-dark);
}

.coupon_list .article .text {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

.coupon_list .article .text li {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2px;
  margin: 0;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.5;
}

.coupon_list .article .text li + li {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.coupon_list .article .text li > span {
  display: block;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

.coupon_list + .print {
  margin-top: var(--space-xl);
}

.coupon_list + .print a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-white);
  color: var(--color-sumi-medium);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

.coupon_list + .print a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(107, 114, 128, 0.06);
}

@media (min-width: 769px) {
  .coupon_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.qr_area {
  padding: var(--space-lg);  /* 32px */
  margin: var(--space-lg) 0;  /* 32px */
  text-align: center;
}

/* ==================================================
   Event Reservation List (/reservation/event/)
   Free page output: .p-event-reservation .p-service-list
================================================== */
.textfield .p-event-reservation .p-service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
}

.textfield .p-event-reservation .p-service-list__item {
  margin: 0;
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  transition: all var(--duration-base) var(--ease-natural);
}

.textfield .p-event-reservation .p-service-list__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.textfield .p-event-reservation .p-service-list__item + .p-service-list__item {
  margin-top: 0;
}

.textfield .p-event-reservation .p-service-list__item > a {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-md);
  padding: var(--space-lg);
  text-decoration: none;
}

.textfield .p-event-reservation .p-service-list__thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-medium);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-color: var(--color-border);
}

.textfield .p-event-reservation .p-service-list__thumbnail:not([style*="url("]) {
  display: none;
}

.textfield .p-event-reservation .p-service-text {
  display: grid;
  gap: var(--space-xs);
}

.textfield .p-event-reservation .p-service-text__title {
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: var(--line-height-tight);
}

.textfield .p-event-reservation .p-service-text__price {
  margin: 0;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

@media (min-width: 768px) {
  .textfield .p-event-reservation .p-service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .textfield .p-event-reservation .p-service-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==================================================
   Event Reservation Entry/Confirm
   /reservation/event/entry/ , /reservation/event/confirm/
================================================== */
body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) {
  display: grid;
  gap: var(--space-lg);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) > .p-fieldset {
  margin: 0;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-notification.p-notification--warning {
  margin: 0;
  padding: var(--space-md);
  border-radius: var(--radius-medium);
  border-left: 4px solid var(--color-primary);
  background: var(--color-washi);
  color: var(--color-sumi-dark);
  text-align: left;
  line-height: var(--line-height-base);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-notification.p-notification--warning strong {
  display: block;
  margin: 0 0 var(--space-xs);
  color: var(--color-sumi-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) > .p-fieldset.p-fieldset--bgcolor {
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  color: var(--color-sumi-medium);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) > .p-fieldset.p-fieldset--bgcolor .p-fieldset__title {
  margin: 0;
  padding: 0 0 var(--space-sm);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) > .p-fieldset.p-fieldset--bgcolor .p-fieldset__body {
  margin-top: var(--space-md);
  padding: 0;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-sm);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-confirm-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-confirm-list__item {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-confirm-list__item:first-child {
  padding-top: 0;
  border-top: none;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-confirm-list__item:last-child {
  padding-bottom: 0;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-confirm-list__item dt {
  margin: 0;
  color: var(--color-sumi-light);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.5;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-confirm-list__item dd {
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-tight);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"][action*="/reservation/event/entry/"] .p-form-field__required-label::after {
  content: "必須";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2em;
  padding: 0.15em 0.5em;
  margin-left: var(--space-xs);
  border-radius: var(--radius-small);
  background: var(--color-secondary-light);
  border: 1px solid var(--color-secondary);
  color: var(--color-primary-dark);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"][action*="/reservation/event/entry/"] textarea {
  min-height: 160px;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-link-unit {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  align-items: flex-start;
  gap: var(--space-sm);
  text-align: left;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-link-unit .p-link-button {
  width: min(100%, 420px);
  align-self: center;
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-link-unit .p-link-text {
  align-self: flex-start;
}

/* ==================================================
   Event Reservation Complete (/reservation/event/complete/)
================================================== */
body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) {
  display: grid;
  gap: var(--space-xl);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) > .p-fieldset {
  margin: 0;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) > .p-fieldset.p-fieldset--bgcolor {
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  color: var(--color-sumi-medium);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) > .p-fieldset.p-fieldset--bgcolor .p-fieldset__title {
  margin: 0;
  padding: 0 0 var(--space-sm);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-sumi-dark);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) > .p-fieldset.p-fieldset--bgcolor .p-fieldset__body {
  margin-top: var(--space-md);
  padding: 0;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item {
  margin: 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-xs);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item:first-child {
  border-top: none;
  padding-top: 0;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item:last-child {
  padding-bottom: 0;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item dt {
  margin: 0;
  color: var(--color-sumi-light);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.5;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item dd {
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-tight);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item dd:empty::before {
  content: "未入力";
  color: var(--color-sumi-light);
  font-weight: 400;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__button {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-xs);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__button:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(107, 114, 128, 0.06);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) :is(
  .p-notification--success,
  .p-notification:not(.p-notification--warning):not(.p-notification--error)
) {
  margin: 0;
  padding: var(--space-lg);
  border-radius: var(--radius-large);
  border-left: 4px solid var(--color-primary-dark);
  background: rgba(107, 114, 128, 0.06);
  color: var(--color-sumi-dark);
  text-align: left;
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) :is(
  .p-notification--success,
  .p-notification:not(.p-notification--warning):not(.p-notification--error)
) strong {
  display: block;
  margin: 0 0 var(--space-xs);
  color: var(--color-sumi-dark);
  font-size: clamp(2.6rem, 2.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--letter-spacing-tight);
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) :is(
  .p-notification--success,
  .p-notification:not(.p-notification--warning):not(.p-notification--error)
) br {
  display: none;
}

body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-link-unit {
  margin-top: var(--space-lg);
}

@media (max-width: 767px) {
  body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) > .p-fieldset.p-fieldset--bgcolor {
    padding: var(--space-md);
  }

  body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) :is(
    .p-notification--success,
    .p-notification:not(.p-notification--warning):not(.p-notification--error)
  ) {
    padding: var(--space-md);
  }

  body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) :is(
    .p-notification--success,
    .p-notification:not(.p-notification--warning):not(.p-notification--error)
  ) strong {
    font-size: clamp(2.2rem, 7.2vw, 3rem);
  }

  body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
    [action*="/reservation/event/entry/"],
    [action*="/reservation/event/confirm/"]
  ) > .p-fieldset.p-fieldset--bgcolor {
    padding: var(--space-md);
  }
}

@media (min-width: 768px) {
  body#event-reservation .textfield .p-event-reservation form[name="reservation-event"][action*="/reservation/event/entry/"] .p-form-field {
    grid-template-columns: minmax(200px, 260px) 1fr;
  }

  body#event-reservation .textfield .p-event-reservation form[name="reservation-event"][action*="/reservation/event/entry/"] .p-form-field > label {
    white-space: nowrap;
  }

  body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
    [action*="/reservation/event/entry/"],
    [action*="/reservation/event/confirm/"]
  ) .p-confirm-list__item {
    grid-template-columns: minmax(120px, 180px) 1fr;
    align-items: start;
    gap: var(--space-md);
  }

  body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
    [action*="/reservation/event/entry/"],
    [action*="/reservation/event/confirm/"]
  ) .p-confirm-list__item dt {
    padding-top: 2px;
  }

  body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item {
    grid-template-columns: minmax(150px, 220px) 1fr;
    align-items: start;
    column-gap: var(--space-md);
  }

  body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-confirm-list__item dt {
    padding-top: 2px;
  }
}

/* ==================================================
   Event Reservation Detail (/reservation/event/detail/<id>)
   Service summary card only (do not affect calendar fieldset)
================================================== */
body#event-reservation .textfield .p-event-reservation:has(> #app-reseration-event-detail-calendar) > .p-fieldset.p-fieldset--bgcolor {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  color: var(--color-sumi-medium);
}

body#event-reservation .textfield .p-event-reservation:has(> #app-reseration-event-detail-calendar) > .p-fieldset.p-fieldset--bgcolor > .p-fieldset__body {
  margin: 0;
  padding: 0;
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor + #app-reseration-event-detail-calendar {
  margin-top: var(--space-lg);
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__title {
  order: 1;
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: clamp(1.6rem, 2.9vw, 2.3rem);
  font-weight: 700;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-base);
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__price {
  order: 2;
  margin: 0;
  margin-top: var(--space-xs);
  color: var(--color-primary-dark);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: var(--line-height-tight);
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__start {
  order: 3;
  margin: 0;
  margin-top: var(--space-xs);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-small);
  background: rgba(107, 114, 128, 0.08);
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.6;
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__thumbnail {
  order: 4;
  margin-top: var(--space-sm);
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: transparent;
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__thumbnail img {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__explanation {
  order: 5;
  margin: 0;
  margin-top: var(--space-md);
  color: var(--color-sumi-medium);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__price + .p-service-detail__explanation {
  margin-top: var(--space-sm);
}

@media (min-width: 768px) {
  body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail {
    --harmony-service-thumb-width: clamp(220px, 30vw, 360px);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(var(--harmony-service-thumb-width) * 10 / 16);
    padding-right: calc(var(--harmony-service-thumb-width) + var(--space-lg));
    overflow: hidden;
  }

  body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__thumbnail {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--harmony-service-thumb-width);
    aspect-ratio: 16 / 10;
    margin-top: 0;
  }

  body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  body#event-reservation .textfield .p-event-reservation > .p-fieldset.p-fieldset--bgcolor .p-service-detail:not(:has(.p-service-detail__thumbnail)) {
    min-height: 0;
    padding-right: 0;
  }
}

/* ==================================================
   Event Reservation Detail (/reservation/event/detail/<id>)
   Free page output: .p-reservation-list
================================================== */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__item {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: all var(--duration-base) var(--ease-natural);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__item + .p-reservation-list__item {
  padding-top: var(--space-lg);
  border-top: none;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__date-wrap {
  display: grid;
  gap: 6px;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__date {
  margin: 0;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.5;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__time {
  margin: 0;
  color: var(--color-sumi-dark);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__time--pick-date {
  font-size: var(--font-size-md);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__note {
  margin: 0;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__stock,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__reception {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-small);
  background: rgba(107, 114, 128, 0.08);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__stock + .p-reservation-list__reception,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__reception + .p-reservation-list__stock {
  margin-top: 4px;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  margin-top: auto;
  min-width: 0;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__link :is(a, p.p-link-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-medium);
  border: none;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  transition: all var(--duration-base) var(--ease-natural);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__link p.p-link-button {
  margin: 0;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__link a.p-link-button--primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-subtle);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__link a.p-link-button--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__link :is(.p-link-button--disabled, .p-link-button--more) {
  background: var(--color-washi);
  color: var(--color-sumi-medium);
  border: 1px solid var(--color-border);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar button.p-link-button--more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 46px;
  margin: var(--space-md) auto 0;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-medium);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-family: 'Sawarabi Gothic';
  font-weight: 500;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.4;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all var(--duration-base) var(--ease-natural);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar button.p-link-button--more:hover {
  color: var(--color-primary-dark);
  background: rgba(107, 114, 128, 0.08);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar button.p-link-button--more:active {
  transform: translateY(0);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar button.p-link-button--more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.16);
}

@media (min-width: 768px) {
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-reservation-list__link :is(a, p.p-link-button) {
    width: min(100%, 240px);
    min-width: 0;
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
  }
}

/* 選択中日付 + 絞り込み解除の可視化 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-fieldset__title:has(.p-event-reservation__cancel-filter) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__cancel-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-white);
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-natural);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__cancel-filter::before {
  content: "×";
  font-weight: 600;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__cancel-filter:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(107, 114, 128, 0.06);
}

/* イベント予約詳細: フィールドセット全体のカード化は無効化（カレンダーのみカード化する） */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-fieldset--bgcolor {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-fieldset--bgcolor .p-fieldset__body {
  padding: 0;
}

/* カレンダー領域のみカード化 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar {
  --harmony-event-calendar-nav-pad-inline: 56px;
  --harmony-event-calendar-nav-side-gap: var(--space-md);
  --harmony-event-calendar-nav-button-height: 5.2rem;
  --harmony-event-calendar-title-size: clamp(2rem, 0.9vw + 1.2rem, 2.6rem);
  --harmony-event-calendar-header-bg: transparent;
  --harmony-event-calendar-header-radius: 0;
  --harmony-event-calendar-header-shadow: none;
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-lg);
  overflow: hidden;
  box-sizing: border-box;
}

/* カレンダー配色を /calendar のテーブル見た目に合わせる（v-calendar） */
/* NOTE:
   v-calendar が付与する構造/状態クラス・インライン相当の既定スタイルを上書きするため、
   このブロックではレイアウト固定に必要な !important を意図的に残している。 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-container {
  display: block;
  width: 100%;
  max-width: 100%;
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--harmony-event-calendar-nav-pad-inline, 56px);
  min-height: 32px;
  line-height: 32px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  background: var(--harmony-event-calendar-header-bg);
  border-radius: var(--harmony-event-calendar-header-radius);
  box-shadow: var(--harmony-event-calendar-header-shadow);
  border: 0;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-title {
  font-size: var(--harmony-event-calendar-title-size);
  font-weight: 700;
  color: var(--color-sumi-dark);
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  font-family: 'Sawarabi Gothic';
  line-height: 1.2;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* v-calendar内部でタイトル実体が別要素でも /calendar と同一タイポを維持 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar :is(.vc-title, .vc-nav-title, .vc-nav-title-content),
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar :is(.vc-title, .vc-nav-title, .vc-nav-title-content) * {
  font-family: 'Sawarabi Gothic';
  font-size: var(--harmony-event-calendar-title-size);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.2;
  color: var(--color-sumi-dark);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header .vc-arrows-container {
  position: absolute;
  top: 0;
  right: var(--harmony-event-calendar-nav-side-gap, var(--space-md));
  bottom: 0;
  left: var(--harmony-event-calendar-nav-side-gap, var(--space-md));
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  transform: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 3;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header .vc-arrows-container .vc-arrow {
  pointer-events: auto;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: var(--harmony-event-calendar-nav-button-height);
  min-width: 0;
  min-height: var(--harmony-event-calendar-nav-button-height);
  padding: 0 var(--space-md);
  font-size: 0;
  line-height: 1;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-white);
  border-radius: 0;
  transition: all var(--duration-base) var(--ease-natural);
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: 'Sawarabi Gothic';
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow:first-of-type {
  grid-column: auto;
  justify-self: auto;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow:last-of-type {
  grid-column: auto;
  justify-self: auto;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow svg {
  display: none;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow:first-of-type::after {
  content: "\00AB前の月";
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow:last-of-type::after {
  content: "次の月\00BB";
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow::after {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: inherit;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: none;
  box-shadow: none;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-weekdays {
  display: flex;
  margin: 0;
  gap: 0;
  background: var(--color-washi);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-bottom: 0;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-weekday {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 64px;
  height: 64px;
  padding: 0 var(--space-xs);
  color: var(--color-sumi-medium);
  font-weight: 600;
  text-align: center;
  background: var(--color-washi);
  border: 0;
  border-right: 1px solid var(--color-border);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-weekday:last-child {
  border-right: 0;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-weeks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-right: 0;
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-white);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  min-height: 0;
  height: auto;
  padding: 0;
  transition: box-shadow var(--duration-base) var(--ease-natural);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-weeks:hover {
  box-shadow: var(--shadow-strong);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-week,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-row {
  display: contents;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day {
  margin: 0;
  padding: 0;
  min-height: 64px;
  height: 64px;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: 0;
  border-top: 1px solid var(--color-border);
  border-left: 0;
  border-right: 1px solid var(--color-border);
  border-bottom: 0;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day-content {
  margin: 0;
  position: relative;
  transform: none;
  z-index: 2;
  color: var(--color-sumi-medium);
  border-radius: var(--radius-small);
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 500;
  pointer-events: auto;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day :is(.vc-highlights, .vc-highlight) {
  z-index: 1;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day-content:hover {
  background: rgba(107, 114, 128, 0.08);
  color: var(--color-sumi-dark);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-today .vc-day-content {
  color: var(--color-sumi-dark);
  font-weight: 600;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day-content.is-selected,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day-content[aria-selected="true"] {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  -webkit-text-fill-color: var(--color-white) !important;
  border-radius: var(--radius-small);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.28);
  opacity: 1;
}

/* ID差異（reseration/reservation）やDOM差分があっても選択色をテーマ色で固定 */
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content.is-selected,
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content[aria-selected="true"],
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight-bg-solid,
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight.vc-highlight-bg-solid {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content[aria-selected="true"],
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight-content-solid {
  color: var(--color-white) !important;
  -webkit-text-fill-color: var(--color-white) !important;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-selected .vc-day-content *,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day-content[aria-selected="true"],
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day-content[aria-selected="true"] * {
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  opacity: 1;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day:has(.vc-highlight-bg-solid) .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day:has(.vc-highlight-content-solid) .vc-day-content {
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  opacity: 1;
}

/* v-calendar側ハイライトも選択状態として可視化 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-highlight,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-highlight-bg-light {
  border: 0 !important;
  box-shadow: none !important;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-highlight-bg-light {
  background: rgba(107, 114, 128, 0.18) !important;
  background-color: rgba(107, 114, 128, 0.18) !important;
  border-radius: var(--radius-small);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-highlight-content-light {
  color: var(--color-sumi-dark) !important;
  -webkit-text-fill-color: var(--color-sumi-dark) !important;
  font-weight: 600;
  opacity: 1;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-highlight-content-outline {
  color: var(--color-primary-dark) !important;
  -webkit-text-fill-color: var(--color-primary-dark) !important;
  border: 0;
  opacity: 1;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-highlight-bg-solid {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: var(--radius-small);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-highlight-content-solid {
  color: var(--color-white) !important;
  font-weight: 700;
  opacity: 1;
}

/* イベント有無の視認差を付与 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.has-event .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day[data-has-event="1"] .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day .vc-day-content[data-has-event="1"] {
  background: rgba(107, 114, 128, 0.20);
  border: 1px solid rgba(75, 85, 99, 0.36);
  color: var(--color-sumi-dark);
  -webkit-text-fill-color: var(--color-sumi-dark);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(75, 85, 99, 0.28);
}

/* ID差異があってもJS付与の data-has-event を視認可能にする */
body#event-reservation .textfield .p-event-reservation .p-event-reservation__calendar .vc-day[data-has-event="1"] .vc-day-content {
  background: rgba(107, 114, 128, 0.20) !important;
  border: 1px solid rgba(75, 85, 99, 0.36) !important;
  color: var(--color-sumi-dark) !important;
  -webkit-text-fill-color: var(--color-sumi-dark) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(75, 85, 99, 0.28);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.has-event:not(.is-selected),
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day[data-has-event="1"]:not(.is-selected) {
  background: rgba(107, 114, 128, 0.03);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day:not(.has-event):not([data-has-event="1"]):not(.is-selected) .vc-day-content {
  background: transparent;
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-disabled .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-not-in-month .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.in-month-0 .vc-day-content {
  color: var(--color-sumi-light);
  opacity: 0.45;
  background: transparent;
}

/* disabled系クラスが混在しても、選択中の日付数字は必ず視認できる状態を優先 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day.is-selected .vc-day-content * {
  color: var(--color-white);
  opacity: 1;
}

/* v-calendar由来の固定高さ対策（最終行の不自然な余白を抑止） */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar :is(.vc-pane-layout, .vc-pane, .vc-pane-container) {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* body_id が event-reservation 以外（free/reservation）でも
   予約可能日強調と選択色を同じトーンで維持する */
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day[data-has-event="1"] .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day .vc-day-content[data-has-event="1"],
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day.has-event .vc-day-content {
  background: rgba(107, 114, 128, 0.20) !important;
  border: 1px solid rgba(75, 85, 99, 0.36) !important;
  color: var(--color-sumi-dark) !important;
  -webkit-text-fill-color: var(--color-sumi-dark) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(75, 85, 99, 0.28);
}

.textfield .p-event-reservation .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content.is-selected,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content[aria-selected="true"],
.textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight-bg-solid,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight.vc-highlight-bg-solid {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.textfield .p-event-reservation .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day.is-selected .vc-day-content *,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content[aria-selected="true"],
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content[aria-selected="true"] *,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight-content-solid,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day:has(.vc-highlight-bg-solid) .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day:has(.vc-highlight-content-solid) .vc-day-content {
  color: var(--color-white) !important;
  -webkit-text-fill-color: var(--color-white) !important;
  opacity: 1 !important;
}

/* v-calendar の既定blueアクセントをHarmonyカラーに置換 */
.textfield .p-event-reservation .p-event-reservation__calendar :is(.vc-container, .vc-pane, .vc-pane-container, .vc-blue) {
  --vc-accent-50: var(--color-secondary-light);
  --vc-accent-100: var(--color-secondary);
  --vc-accent-200: var(--color-primary-light);
  --vc-accent-300: var(--color-primary-light);
  --vc-accent-400: var(--color-primary);
  --vc-accent-500: var(--color-primary);
  --vc-accent-600: var(--color-primary-dark);
  --vc-accent-700: var(--color-primary-dark);
  --vc-accent-800: var(--color-sumi-dark);
  --vc-accent-900: var(--color-sumi-dark);
  --blue-50: var(--color-secondary-light);
  --blue-100: var(--color-secondary);
  --blue-200: var(--color-primary-light);
  --blue-300: var(--color-primary-light);
  --blue-400: var(--color-primary);
  --blue-500: var(--color-primary);
  --blue-600: var(--color-primary-dark);
  --blue-700: var(--color-primary-dark);
  --blue-800: var(--color-sumi-dark);
  --blue-900: var(--color-sumi-dark);
}

/* 予約不可日をライト化して、予約可能日との差分を明確化 */
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day:is(.is-disabled, .is-not-in-month, .in-month-0, .in-prev-month, .in-next-month) .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content:is(.is-disabled, [aria-disabled="true"]) {
  color: var(--color-sumi-light) !important;
  -webkit-text-fill-color: var(--color-sumi-light) !important;
  opacity: 0.45 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 予約可能日は中間トーンで未選択でも判別できるようにする */
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day:is(.is-event-available, [data-has-event="1"]) .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content:is(.is-event-available, [data-has-event="1"]) {
  background: rgba(107, 114, 128, 0.20) !important;
  border: 1px solid rgba(75, 85, 99, 0.36) !important;
  color: var(--color-sumi-dark) !important;
  -webkit-text-fill-color: var(--color-sumi-dark) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 rgba(75, 85, 99, 0.28) !important;
  opacity: 1 !important;
}

/* 選択中は常にテーマの主色で視認性を固定 */
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content:is(.is-selected, .is-highlighted, [aria-selected="true"]),
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day.is-selected .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight.vc-highlight-bg-solid {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content:is(.is-selected, .is-highlighted, [aria-selected="true"]),
.textfield .p-event-reservation .p-event-reservation__calendar .vc-day-content:is(.is-selected, .is-highlighted, [aria-selected="true"]) *,
.textfield .p-event-reservation .p-event-reservation__calendar .vc-highlight-content-solid {
  color: var(--color-white) !important;
  -webkit-text-fill-color: var(--color-white) !important;
  opacity: 1 !important;
}

/* v-calendarのblueユーティリティが残るケース向けの最終上書き */
.textfield .p-event-reservation .p-event-reservation__calendar :is(
  .vc-day.is-selected,
  .vc-day:has(.vc-day-content.is-selected),
  .vc-day:has(.vc-day-content[aria-selected="true"]),
  .vc-day:has(.vc-highlight-bg-solid),
  .vc-day:has(.vc-highlight-content-solid)
) :is(
  .vc-highlight,
  .vc-highlight-bg-solid,
  .vc-highlight-bg-light,
  [class*="vc-bg-blue"],
  [class*="bg-blue"],
  [class*="vc-border-blue"]
) {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.textfield .p-event-reservation .p-event-reservation__calendar :is(
  .vc-day.is-selected,
  .vc-day:has(.vc-day-content.is-selected),
  .vc-day:has(.vc-day-content[aria-selected="true"]),
  .vc-day:has(.vc-highlight-content-solid)
) :is(
  .vc-day-content,
  .vc-highlight-content-solid,
  [class*="vc-text-blue"],
  [class*="text-blue"],
  [class*="vc-text-white"]
) {
  color: var(--color-white) !important;
  -webkit-text-fill-color: var(--color-white) !important;
  fill: var(--color-white) !important;
  opacity: 1 !important;
}

/* 予約可能日が0件のときは全日をライト表示に統一して誤強調を防ぐ */
.textfield .p-event-reservation .p-event-reservation__calendar.is-no-available-dates .vc-day .vc-day-content,
.textfield .p-event-reservation .p-event-reservation__calendar.is-no-available-dates .vc-day-content {
  color: var(--color-sumi-light) !important;
  -webkit-text-fill-color: var(--color-sumi-light) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0.45 !important;
  font-weight: 400 !important;
  cursor: default;
}

.textfield .p-event-reservation .p-event-reservation__calendar.is-no-available-dates .vc-day-content:is(.is-selected, .is-highlighted, [aria-selected="true"]),
.textfield .p-event-reservation .p-event-reservation__calendar.is-no-available-dates .vc-day-content:is(.is-selected, .is-highlighted, [aria-selected="true"]) * {
  color: var(--color-sumi-light) !important;
  -webkit-text-fill-color: var(--color-sumi-light) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0.45 !important;
}

.textfield .p-event-reservation .p-event-reservation__calendar.is-no-available-dates :is(
  .vc-highlight,
  .vc-highlight-bg-solid,
  .vc-highlight-bg-light,
  [class*="vc-bg-blue"],
  [class*="bg-blue"],
  [class*="vc-border-blue"]
) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.textfield .p-event-reservation .p-event-reservation__calendar.is-no-available-dates :is(
  .vc-highlight-content-solid,
  [class*="vc-text-blue"],
  [class*="text-blue"],
  [class*="vc-text-white"]
) {
  color: var(--color-sumi-light) !important;
  -webkit-text-fill-color: var(--color-sumi-light) !important;
  fill: var(--color-sumi-light) !important;
  opacity: 0.45 !important;
}

@media (max-width: 767px) {
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar {
    --harmony-event-calendar-nav-pad-inline: 56px;
    --harmony-event-calendar-nav-side-gap: var(--space-xs);
    padding: var(--space-sm);
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-weekday {
    min-height: 52px;
    height: 52px;
    padding: 0 var(--space-xs);
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day {
    min-height: 52px;
    height: 52px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-day-content {
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--space-sm);
    padding: 0 var(--harmony-event-calendar-nav-pad-inline, 56px);
    min-height: 32px;
    line-height: 32px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    border: 0;
    grid-template-columns: none;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar :is(.vc-title, .vc-nav-title, .vc-nav-title-content),
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar :is(.vc-title, .vc-nav-title, .vc-nav-title-content) * {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 500;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow {
    position: static;
    top: auto;
    bottom: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    min-height: auto;
    width: auto;
    height: auto;
    padding: 2px 6px;
    line-height: 1.2;
    font-size: 0;
    margin: 0;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow::after {
    font-size: 1rem;
    line-height: 1.2;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header .vc-arrows-container {
    position: absolute;
    top: 0;
    right: var(--harmony-event-calendar-nav-side-gap, var(--space-xs));
    bottom: 0;
    left: var(--harmony-event-calendar-nav-side-gap, var(--space-xs));
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    pointer-events: none;
    z-index: 2;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header .vc-arrows-container .vc-arrow {
    pointer-events: auto;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow:first-of-type {
    left: auto;
    right: auto;
    grid-column: auto;
    justify-self: auto;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow:last-of-type {
    right: auto;
    left: auto;
    grid-column: auto;
    justify-self: auto;
  }
}

@media (max-width: 430px) {
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar {
    --harmony-event-calendar-nav-pad-inline: 52px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header {
    font-size: 1rem;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow {
    padding: 2px 5px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow::after {
    font-size: 0.95rem;
  }
}

@media (max-width: 390px) {
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar {
    --harmony-event-calendar-nav-pad-inline: 48px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header {
    font-size: 1rem;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow {
    padding: 2px 5px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow::after {
    font-size: 0.9rem;
  }
}

@media (max-width: 360px) {
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar {
    --harmony-event-calendar-nav-pad-inline: 44px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header {
    font-size: 0.95rem;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow {
    padding: 2px 4px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow::after {
    font-size: 0.85rem;
  }
}

@media (max-width: 320px) {
  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar {
    --harmony-event-calendar-nav-pad-inline: 40px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-header {
    font-size: 0.9rem;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow {
    padding: 2px 4px;
  }

  body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar .vc-arrow::after {
    font-size: 0.8rem;
  }
}

/* セクション間余白のリズムを統一 */
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__calendar {
  margin-bottom: var(--space-xl);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-event-reservation__list {
  margin-top: var(--space-xl);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-fieldset + .p-fieldset {
  margin-top: var(--space-xl);
}

body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-link-unit {
  margin-top: var(--space-lg);
}

/* イベント予約フローの「戻る」リンクを detail 基準で統一 */
body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-link-unit .p-link-text,
body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-link-unit .p-link-text,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-link-unit .p-link-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-white);
  color: var(--color-sumi-medium);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

body#event-reservation .textfield .p-event-reservation form[name="reservation-event"]:is(
  [action*="/reservation/event/entry/"],
  [action*="/reservation/event/confirm/"]
) .p-link-unit .p-link-text:hover,
body#event-reservation .textfield .p-event-reservation:has(.p-confirm-list):not(:has(form[name="reservation-event"])) .p-link-unit .p-link-text:hover,
body#event-reservation .textfield .p-event-reservation #app-reseration-event-detail-calendar .p-link-unit .p-link-text:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(107, 114, 128, 0.06);
}

/* ==================================================
   Event List (event-reservation block)
================================================== */
#event-reservation .event_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

#event-reservation .event_list > .article {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  height: 100%;
}

#event-reservation .event_list > .article + .article {
  margin-top: 0;
}

#event-reservation .event_list > .article .summary {
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

#event-reservation .event_list > .article .article_title {
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
}

#event-reservation .event_list > .article .date {
  margin: 0;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-xs);
}

#event-reservation .event_list > .article .textfield {
  font-size: var(--font-size-sm);
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  #event-reservation .event_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* Reservation Section */
.reservation_area {
  padding: var(--space-lg);  /* 32px */
  margin-bottom: var(--space-lg);  /* 32px */
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

/* Vertical card spacing on inner pages */
.articles > .article + .article,
.recruit_list > .article + .article,
.event_list > .article + .article,
.staff_list > .article + .article {
  margin-top: var(--space-xl);
}

.articles .article .summary,
.event_list .article .summary,
.staff_list .article .summary {
  padding: var(--space-lg);
}

/* ==================================================
   Staff Page (/staff) - vertical card layout
   Free page output: #custom_staff .staff_wrap
================================================== */
#custom_staff {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

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

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

#custom_staff > br {
  display: none;
}

#custom_staff .staff_wrap {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
  transition: all var(--duration-base) var(--ease-natural);
}

#custom_staff .staff_wrap:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

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

#custom_staff .staff__text {
  overflow: visible;
  display: grid;
  gap: var(--space-sm);
  padding: 0;
}

#custom_staff .staff__text--name {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-sumi-dark);
  line-height: var(--line-height-tight);
}

#custom_staff .staff__text--job {
  margin: 0;
  color: var(--color-sumi-medium);
  font-size: var(--font-size-sm);
}

#custom_staff .staff__text--description {
  color: var(--color-sumi-medium);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

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

#custom_staff .staff__text__social {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}

#custom_staff .staff__text__social_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-washi);
  color: var(--color-sumi-medium);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-natural);
}

#custom_staff .staff__text__social_icon img {
  margin-right: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

#custom_staff .staff__text__social_icon:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

#custom_staff .staff__text__social_icon:hover img {
  filter: brightness(0) invert(1);
}

#custom_staff .staff__text__social_text {
  display: none;
}

.button_area {
  margin-top: var(--space-lg);  /* 32px */
  padding-top: var(--space-lg);  /* 32px */
  border-top: 1px solid var(--color-border);
  text-align: center;
}

/* reservation / reservation-event: 汎用 .button_area の後段上書きでボーダーを確実に無効化 */
body#reservation .button_area,
body#reservation .p-link-unit,
body#event-reservation .button_area,
body#event-reservation .p-link-unit {
  border-top: none;
}

/* ===================================================== */
/* Calendar Page */
/* ===================================================== */

/* Calendar navigation (prev/next month) */
#calendar .wrap_calendar {
  margin-bottom: var(--space-xl);  /* 48px */
  max-width: 100%;  /* モバイルでビューに収める */
  overflow-x: auto;  /* 必要に応じて横スクロールを許可 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
}

#calendar .calendar_navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);  /* 32px */
  padding: var(--space-md);  /* 24px */
  background: var(--color-white);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-subtle);
}

#calendar .calendar_navi .prev,
#calendar .calendar_navi .next {
  padding: var(--space-sm) var(--space-md);  /* 16px 24px */
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-small);
  transition: all var(--duration-base) var(--ease-natural);
  font-weight: 500;
}

#calendar .calendar_navi .prev:hover,
#calendar .calendar_navi .next:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

#calendar .calendar_navi .current_month {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-sumi-dark);
  letter-spacing: var(--letter-spacing-wide);
}

/* Calendar table */
#calendar .table_calendar {
  width: 100%;
  max-width: 100%;  /* モバイルでビューに収める */
  min-width: 0;
  border-collapse: collapse;
  background: var(--color-white);
  box-shadow: var(--shadow-medium);
  overflow: hidden;  /* はみ出しを防ぐ */
  border: 1px solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-natural);
  box-sizing: border-box;
  table-layout: fixed;
}

#calendar .table_calendar table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
}

#calendar .table_calendar:hover {
  box-shadow: var(--shadow-strong);
}

#calendar .table_calendar th {
  padding: var(--space-md);  /* 24px */
  background: var(--color-washi);
  color: var(--color-sumi-medium);
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  border: 1px solid var(--color-border);
}

#calendar .table_calendar td {
  padding: var(--space-sm);  /* 16px */
  padding-bottom: calc(var(--space-xs) * 3 + 20px);  /* 日付とアイコンの間隔 + アイコン領域を確保 */
  text-align: center;
  vertical-align: top;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  transition: all var(--duration-base) var(--ease-natural);
  position: relative;  /* 子要素の絶対配置用 */
}

#calendar .table_calendar td:hover {
  transform: none;
  box-shadow: none;
  z-index: auto;
}

#calendar .table_calendar td p.day {
  display: inline-block;
  margin: 0 0 var(--space-xs);  /* 日付とアイコンの間に余白を確保 */
  padding: 0;  /* 余白を最小化 */
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-sumi-dark);
  border-radius: var(--radius-small);
  line-height: 1;  /* 行の高さを最小化 */
  flex-shrink: 0;  /* サイズ縮小を防ぐ */
}

/* Today's date - highly visible */
#calendar .table_calendar td.today {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
  z-index: 2;
}

#calendar .table_calendar td.today p.day {
  color: var(--color-white);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
}

#calendar .table_calendar td.today:hover {
  transform: none;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
}

/* Sunday (日曜日) */
#calendar .table_calendar td.sun p.day {
  color: #E74C3C;
  font-weight: 600;
}

/* Saturday (土曜日) */
#calendar .table_calendar td.sat p.day {
  color: #3498DB;
  font-weight: 600;
}

/* Has event/schedule */
#calendar .table_calendar td.has-event {
  background: rgba(52, 152, 219, 0.1);
}

#calendar .table_calendar td.has-event::after {
  content: '';
  position: absolute;
  bottom: var(--space-xs);
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* Event icons and links */
#calendar .table_calendar td a.hotspot {
  position: absolute;  /* フローから外す */
  left: var(--space-xs);  /* セル内で左寄せ */
  bottom: var(--space-xs);
  transform: none;
  margin-top: 0;  /* 余白をリセット */
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-natural);
  max-height: 20px;  /* アイコンの高さをさらに制限 */
  height: 20px;  /* 固定高さ */
  overflow: hidden;  /* はみ出し防止 */
  line-height: 1;  /* 行の高さを最小化 */
  flex-shrink: 0;  /* サイズ縮小を防ぐ */
}

#calendar .table_calendar td a.hotspot:hover {
  transform: translateY(-1px) scale(1.05);
}

#calendar .table_calendar td a.hotspot img {
  max-width: 20px;
  max-height: 20px;  /* 画像の高さを制限 */
  width: 20px;  /* 固定幅 */
  height: 20px;  /* 固定高さ */
  display: block;  /* inline要素による余白を削除 */
  object-fit: contain;  /* 画像を枠内に収める */
}

/* Calendar list container (no nested card) */
#calendar .schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-left: none;
}

#calendar .schedule .article {
  padding: var(--space-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 769px) {
  #calendar .schedule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.schedule_title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-sumi-dark);
  margin-bottom: var(--space-sm);  /* 16px */
}

.schedule_body {
  color: var(--color-sumi-medium);
  line-height: var(--line-height-relaxed);
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  #calendar .schedule {
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  #calendar .schedule .article {
    padding: var(--space-md);
  }

  #calendar .schedule dd {
    row-gap: 4px;
  }

  #calendar .schedule dd > a {
    row-gap: 2px;
  }

  #calendar .schedule dd .schedule_time {
    min-width: 0;
  }

  #calendar .schedule dd .schedule_title {
    line-height: var(--line-height-tight);
  }

  #calendar .wrap_calendar {
    padding: var(--space-sm) var(--space-md) 0;  /* デスクトップに寄せた左右余白を確保 */
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* ナビはマークアップ差異に依存せず1行表示（左右ボタン + 中央月） */
  #calendar .wrap_calendar > .navi,
  #calendar .calendar_navi {
    position: relative;
    margin: 0 0 var(--space-sm);
    padding: 0 56px;
    min-height: 32px;
    line-height: 32px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    display: block;
    background: var(--color-washi);
  }

  #calendar .calendar_navi {
    background: var(--color-washi);
    border-radius: 0;
    box-shadow: none;
  }

  #calendar .wrap_calendar > .navi a,
  #calendar .calendar_navi a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    width: auto;
    text-align: center;
    padding: 2px 6px;
    line-height: 1.2;
    font-size: 1rem;
  }

  #calendar .wrap_calendar > .navi a:first-of-type,
  #calendar .calendar_navi .prev {
    left: var(--space-xs);
  }

  #calendar .wrap_calendar > .navi a:last-of-type,
  #calendar .calendar_navi .next {
    right: var(--space-xs);
  }

  #calendar .wrap_calendar > .navi strong,
  #calendar .calendar_navi .current_month,
  #calendar .calendar_navi strong {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    line-height: 1.2;
    font-size: inherit;
    font-weight: 500;
  }

  #calendar .table_calendar {
    font-size: var(--font-size-xs);  /* フォントサイズを小さく */
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #calendar .table_calendar th {
    padding: var(--space-xs);  /* 24px → 8px */
    font-size: var(--font-size-xs);  /* フォントサイズを小さく */
    letter-spacing: 0.02em;
  }

  #calendar .table_calendar td {
    padding: var(--space-xs);  /* 8px */
    padding-bottom: calc(var(--space-xs) * 2 + 16px);  /* モバイルでも日付とアイコンの間隔を維持 */
    height: 60px;  /* モバイルでは60pxに縮小 */
    min-height: 60px;  /* 最小高さも固定 */
    max-height: 60px;  /* 最大高さも固定 */
    overflow: hidden;  /* はみ出し防止 */
    box-sizing: border-box;  /* パディングを含めた高さ計算 */
    font-size: var(--font-size-xs);
  }

  #calendar .table_calendar td p.day {
    font-size: var(--font-size-xs);
    padding: 4px;
    margin: 0 0 4px;
  }

  #calendar .table_calendar td a.hotspot img {
    max-width: 16px;  /* アイコンサイズを縮小 */
    max-height: 16px;  /* 高さも制限 */
    width: 16px;  /* 固定幅 */
    height: 16px;  /* 固定高さ */
  }

}

@media (max-width: 430px) {
  #calendar .wrap_calendar > .navi {
    padding-right: 52px;
    padding-left: 52px;
    font-size: 1rem;
  }

  #calendar .wrap_calendar > .navi a,
  #calendar .calendar_navi a {
    padding: 2px 5px;
    font-size: 0.95rem;
  }

  #calendar .table_calendar th {
    padding: 6px 4px;
    font-size: 1.2rem;
  }
}

@media (max-width: 390px) {
  #calendar .wrap_calendar {
    padding-right: var(--space-sm);
    padding-left: var(--space-sm);
  }

  #calendar .wrap_calendar > .navi {
    padding-right: 48px;
    padding-left: 48px;
    font-size: 1rem;
  }

  #calendar .wrap_calendar > .navi a,
  #calendar .calendar_navi a {
    padding: 2px 5px;
    font-size: 0.9rem;
  }

  #calendar .table_calendar th {
    padding: 6px 3px;
    font-size: 1.1rem;
  }
}

@media (max-width: 360px) {
  #calendar .wrap_calendar > .navi {
    padding-right: 44px;
    padding-left: 44px;
    font-size: 0.95rem;
  }

  #calendar .wrap_calendar > .navi a,
  #calendar .calendar_navi a {
    padding: 2px 4px;
    font-size: 0.85rem;
  }

  #calendar .table_calendar th {
    padding: 5px 2px;
    font-size: 1rem;
  }
}

@media (max-width: 320px) {
  #calendar .wrap_calendar {
    padding-right: 12px;
    padding-left: 12px;
  }

  #calendar .wrap_calendar > .navi {
    padding-right: 40px;
    padding-left: 40px;
    font-size: 0.9rem;
  }

  #calendar .wrap_calendar > .navi a,
  #calendar .calendar_navi a {
    padding: 2px 4px;
    font-size: 0.8rem;
  }

  #calendar .table_calendar th {
    padding: 4px 1px;
    font-size: 0.95rem;
  }
}

/* Alert Messages */
.alert,
.message {
  padding: var(--space-md);  /* 24px */
  margin-bottom: var(--space-lg);  /* 32px */
  border-radius: var(--radius-medium);
  border-left: 4px solid var(--color-primary);
  background: var(--color-washi);
}

.success {
  border-left-color: #48BB78;
  background: #F0FFF4;
}

.error {
  border-left-color: #F56565;
  background: #FFF5F5;
}

.warning {
  border-left-color: #ED8936;
  background: #FFFAF0;
}

.info {
  border-left-color: #4299E1;
  background: #EBF8FF;
}

/* Pager - Pagination */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);  /* 8px */
  padding: var(--space-xl) 0;  /* 48px */
  margin-top: var(--space-lg);  /* 32px */
}

.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-sumi-medium);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  transition: all var(--duration-base) var(--ease-natural);
}

.pager a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.pager .current {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Sidebar */
.sidebar {
  padding: var(--space-lg);  /* 32px */
}

.sidebar .section {
  padding: var(--space-md);  /* 24px */
  margin-bottom: var(--space-lg);  /* 32px */
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
}

.sidebar .section:last-child {
  margin-bottom: 0;
}

.sidebar .section_title {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-md);  /* 24px */
}

/* Sub Navigation */
.sub_navi {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar .sub_navi li {
  margin-bottom: var(--space-sm);
}

.sidebar .sub_navi li:last-child {
  margin-bottom: 0;
}

.sidebar .sub_navi a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-sumi-medium);
  border-radius: var(--radius-small);
  transition: all var(--duration-base) var(--ease-natural);
}

.sidebar .sub_navi a:hover {
  background: var(--color-washi);
  color: var(--color-primary);
  padding-left: calc(var(--space-md) + 6px);
}

.sidebar .sub_navi li.current a {
  background: var(--color-washi);
  color: var(--color-primary);
  font-weight: 500;
}

/* ==================================================
   BEM: .harmony-footer - Footer
================================================== */
#footer {
  background: var(--color-sumi-dark);
  color: var(--color-white);
  padding: var(--space-xl) 0 var(--space-md);  /* 48px上 24px下 */
  margin-top: var(--space-2xl);  /* 64px */
}

#footer .inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

#footer a {
  color: var(--color-white);
  opacity: 0.8;
  transition: opacity var(--duration-base) var(--ease-natural);
}

#footer a:hover {
  opacity: 1;
}

#footer .shop_name {
  text-align: center;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
}

#footer .shop_name a {
  opacity: 1;
  font-weight: 500;
}

#footer .header-top {
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 0;
  border-bottom: none;
}

#footer .element.shop_tel[data-shoptel=""],
#footer .element.shop_tel:has(a:empty),
#footer .social_icons:empty {
  display: none;
}

#footer .header-top:not(:has(.element.shop_tel:not([data-shoptel=""]), .social_icons:not(:empty))) {
  display: none;
}

#footer .element.shop_tel {
  color: var(--color-white);
}

#footer .element.shop_tel a {
  padding: 0;
  opacity: 0.86;
}

#footer .element.shop_tel a:hover {
  background: transparent;
  transform: none;
  opacity: 1;
}

#footer .social_icons {
  align-items: center;
}

#footer .social_icons a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
}

#footer .social_icons a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: none;
}

#footer .social_icons svg {
  fill: var(--color-white);
}

#footer .introduction {
  display: flex;
  justify-content: center;
  align-items: center;
}

#footer .introduction img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  opacity: 0.86;
  transition: opacity var(--duration-base) var(--ease-natural);
}

#footer .introduction a:hover img {
  opacity: 1;
}

#footer .copyright {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-sumi-light);
  margin-top: 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

@media (min-width: 768px) {
  #footer .inner {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-xl);
    row-gap: var(--space-md);
  }

  #footer .shop_name {
    grid-column: 1 / 2;
    grid-row: 1;
    text-align: left;
  }

  #footer .header-top {
    grid-column: 1 / 2;
    grid-row: 2;
    justify-content: flex-start;
  }

  #footer .introduction {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    justify-content: flex-end;
    align-self: center;
  }

  #footer .copyright {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
  }
}

/* ==================================================
   BEM: .harmony-totop - Back to Top Button
================================================== */
.totop {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-base) var(--ease-natural);
}

.totop.is-visible {
  opacity: 1;
  visibility: visible;
}

.totop .button {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  box-shadow: var(--shadow-strong);
}

.totop .button:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: var(--shadow-dramatic);
}

/* ==================================================
   Responsive - Mobile First
================================================== */
@media (max-width: 1023px) {
  #header,
  #header > .inner {
    overflow: visible;
  }

  #header > .inner {
    padding-top: 0;
  }

  .element.logo {
    padding: var(--space-xs) calc(44px + var(--space-lg)) var(--space-xs) 0;
    text-align: left;
  }

  .element.logo .shop_sitename {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    line-height: 1.2;
  }

  .element.logo .shop_sitename img {
    display: block;
    width: auto;
    height: clamp(30px, 5vw, 42px);
    max-width: min(56vw, 220px);
    max-height: 42px;
  }

  .element.site_description {
    padding-bottom: var(--space-sm);
    text-align: left;
    margin: 0;
    max-width: calc(100% - (44px + var(--space-lg)));
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .element.navi.primary-nav {
    border-top: none;
    border-bottom: none;
    min-height: 0;
    z-index: 40;
  }

  .element.navi.primary-nav::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(44, 44, 44, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-natural), visibility var(--duration-base) var(--ease-natural);
    pointer-events: none;
    z-index: 1190;
  }

  .element.navi.primary-nav.menu-open::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .navi_list {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 380px);
    height: 100dvh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--color-white);
    border-left: 1px solid var(--color-border);
    padding: calc(var(--space-xl) + 12px) var(--space-md) var(--space-lg);
    gap: 0;
    transform: translateX(104%);
    transition: transform var(--duration-base) var(--ease-natural);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1200;
  }

  .element.navi.primary-nav.menu-open .navi_list {
    transform: translateX(0);
  }

  .navi_list > li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid rgba(44, 44, 44, 0.08);
  }

  .navi_list > li:last-child {
    border-bottom: none;
  }

  .navi_list > li > a {
    padding: var(--space-md) var(--space-xs);
    border-radius: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }

  /* サブメニュー矢印の表示領域を確保してテキスト重なりを防ぐ */
  .navi_list > li > a.has-dropdown {
    padding-right: calc(var(--space-xs) + 40px);
  }

  .navi-overflow {
    display: none;
  }

  .navi_list > li > ul,
  .navi_list > li > .sub_navi {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    background: var(--color-washi);
    margin: 0;
    padding: 0;
    display: none;
    pointer-events: auto;
    min-width: 0;
  }

  .navi_list > li.submenu-open > ul,
  .navi_list > li.submenu-open > .sub_navi {
    display: block;
  }

  .navi_list > li > ul > li,
  .navi_list > li > .sub_navi > li {
    margin: 0;
    padding: 0;
  }

  .navi_list > li > ul > li > a,
  .navi_list > li > .sub_navi > li > a {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-xs);
    display: block;
  }

  .navi_list > li > .submenu-arrow {
    position: absolute;
    right: var(--space-xs);
    top: var(--space-md);
    transform: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-fast);
  }

  .navi_list > li > .submenu-arrow::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-sumi-medium);
    transition: transform var(--duration-fast) var(--ease-natural);
  }

  .navi_list > li.submenu-open > .submenu-arrow::after {
    transform: rotate(180deg);
  }
}

@media (max-width: 768px) {
  :root {
    --space-unit: 16px;  /* 16px base (モバイルも同じ) */
    --container-padding: var(--space-md);  /* 24px */
  }

  .mobile-toggle {
    right: var(--space-md);
    top: var(--space-xs);
  }

  .element.logo {
    padding-right: calc(44px + var(--space-md));
  }

  .element.logo .shop_sitename {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }

  .element.logo .shop_sitename img {
    height: clamp(28px, 9vw, 38px);
    max-width: min(62vw, 200px);
    max-height: 38px;
  }

  .element.site_description {
    max-width: calc(100% - (44px + var(--space-md)));
  }

  .navi_list {
    width: min(92vw, 340px);
  }

  .gadgets {
    padding: var(--space-xl) 0;
  }

  #container > .social {
    padding: var(--space-md) 0 0;
  }

  .gadgets .inner {
    inline-size: auto;
    max-inline-size: calc(100% - (var(--space-md) * 2));
    padding: var(--space-md);
  }

  .gadgets #navi_parts > * {
    padding: 0;
  }

  .gadgets #navi_parts > * + * {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
  }

  .gadgets #navi_parts > * + *::before {
    width: min(94%, 340px);
  }

  .gadgets .navi_parts_detail {
    min-block-size: clamp(96px, 30vw, 160px);
    padding: var(--space-xs);
  }

  .gadgets .navi_parts_detail img {
    max-height: clamp(100px, 48vw, 220px);
  }

  #container > .social > .inner {
    max-inline-size: calc(100% - (var(--space-md) * 2));
  }

  #container > .social #social_widgets {
    justify-content: center;
    gap: var(--space-xs) var(--space-sm);
  }

  /* Section Spacing - モバイル */
  .section {
    padding: var(--space-xl) 0;  /* 48px (モバイル) */
  }

  /* Grid - Single Column on Mobile */
  .list {
    grid-template-columns: 1fr;
  }

  /* Calendar - Mobile */
  .wrap_calendar {
    padding: var(--space-md);  /* モバイルでパディングを削減 */
    overflow-x: auto;  /* 横スクロール可能に */
  }

  .table_calendar {
    min-width: 100%;  /* テーブルの最小幅を確保 */
  }

  .table_calendar table {
    min-width: 100%;  /* テーブルの最小幅を確保 */
    width: 100%;
  }

  .table_calendar th,
  .table_calendar td {
    padding: var(--space-sm);  /* モバイルでパディングを削減 */
    font-size: var(--font-size-xs);  /* モバイルでフォントサイズを削減 */
    min-height: 48px;  /* モバイルでセルの高さを調整 */
    height: 48px;
  }

  .calendar-nav,
  .wrap_calendar > p,
  .wrap_calendar > div:first-child {
    flex-wrap: wrap;  /* モバイルで折り返し可能に */
    gap: var(--space-sm);
  }

  .calendar-nav a,
  .wrap_calendar > p a,
  .wrap_calendar > div:first-child a {
    font-size: var(--font-size-xs);  /* モバイルでフォントサイズを削減 */
    padding: var(--space-xs) var(--space-sm);
  }

  #content > .inner,
  #content > .page .inner {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .page_title {
    margin: 0;
  }

  .coupon_list .article {
    padding: var(--space-lg);
  }
}

/* ==================================================
   Print Styles
================================================== */
@media print {
  .totop,
  .mobile-toggle,
  .social_icons {
    display: none;
  }

  .coupon_list + .print {
    display: none;
  }
}

/* ==================================================
   Accessibility - Reduced Motion
================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==================================================
   Focus Visible - Keyboard Navigation
================================================== */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==================================================
   Form CTA Final Guard
   後段/外部CSSがあってもボタン直前余白を統一
================================================== */
/* NOTE: フォーム系の多系統CSS（既存テーマ/外部CSS）より優先するため !important を維持 */
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  form[action*="/contact/"],
  form[action*="/reservation/"],
  form[action*="/reservation/event/"]
) :is(.button_area, .p-link-unit) {
  margin-top: var(--harmony-form-cta-gap, var(--space-xl)) !important;
  padding-top: var(--harmony-form-cta-pad-top, var(--space-lg)) !important;
  border-top: 0 !important;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  form[action*="/contact/"],
  form[action*="/reservation/"],
  form[action*="/reservation/event/"]
) :is(.button_area, .p-link-unit)::before,
:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  form[action*="/contact/"],
  form[action*="/reservation/"],
  form[action*="/reservation/event/"]
) :is(.button_area, .p-link-unit)::after {
  border-top: 0 !important;
  box-shadow: none !important;
}

:is(
  .section.contact form.contact_form,
  body#contact form[name="frm"],
  body#reservation form[name="frm"],
  body#event-reservation form[name="frm"],
  body#event-reservation form[name="reservation-event"],
  form[action*="/contact/"],
  form[action*="/reservation/"],
  form[action*="/reservation/event/"]
) :is(.button_area, .p-link-unit) hr {
  display: none !important;
}
.web-font {
  font-family: 'Sawarabi Gothic';
}
.shop_sitename {
  font-size: 60%;
}
@media screen and (max-width: 768px){
  header img{
    max-height:120px !important;
    height:auto !important;
    width:auto !important;
  }
}