/* ORIGIN static site css (generated) */
:root {
  --origin-bg: #ffa9e6;
  --origin-surface: #d07aff;
  --origin-text: #d3e0ff;
  --origin-text-muted: #666666;
  --origin-accent: #f7b6d5;
  --origin-border: #ff959a;
  --origin-heading-font: 'Zen Maru Gothic','Hiragino Maru Gothic ProN','Noto Sans JP',sans-serif;
  --origin-body-font: 'Noto Sans JP',sans-serif;
  --origin-heading-weight: 700;
  --origin-heading-size: 2.00rem;
  --origin-body-size: 1.00rem;
  --origin-radius: 6px;
  --origin-max-width: 960px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--origin-body-font, sans-serif);
  font-size: var(--origin-body-size, 1rem);
  line-height: 1.7;
  color: var(--origin-text, #222);
  background: var(--origin-bg, #fff);
}
img { max-width: 100%; height: auto; display: block; }
/* 画像の不透明度 (2026-07-31)。--origin-image-opacity は設定したサイトだけが
   持つ変数で、未設定サイトは 1 = 従来表示。画像ごとの個別指定は inline style
   が勝つ。透過 PNG / WebP は下地を敷かないので透明部分はそのまま抜ける。 */
/* 対象はセクション内の画像 ([data-section] は hero を含む全セクションの根に付く)。
   ヘッダーのロゴは対象外 — ロゴは siteLogoOpacity で個別に調整する。 */
[data-site-root] [data-section] img { opacity: var(--origin-image-opacity, 1); background: transparent; }
h1, h2, h3 {
  font-family: var(--origin-heading-font, inherit);
  font-weight: var(--origin-heading-weight, 700);
}
.sect-wrap, .hero-sect { max-width: var(--origin-max-width, 960px); margin: 0 auto; padding: 48px 20px; }
/* セクションごとの色 (2026-08-02)。CSS 変数だけを配るラッパーなので
   レイアウトへ影響を与えない (display:contents は変数の継承を妨げない)。
   背景色を指定したセクションでは、その面が実際に塗られるよう block へ戻す。 */
.sect-colors { display: contents; }
/* --- ブログ (2026-08-02) --- */
.blog-list { display: flex; flex-direction: column; gap: 18px; }
.blog-post { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--origin-border, #ddd); border-radius: 12px; background: var(--origin-surface, #fff); }
.blog-post-img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex: none; }
.blog-post-main { min-width: 0; flex: 1 1 auto; }
.blog-post-meta { display: flex; align-items: center; gap: 10px; font-size: 0.82em; color: var(--origin-text-muted, #666); }
.blog-post-tag { border: 1px solid var(--origin-border, #ddd); border-radius: 999px; padding: 1px 10px; }
.blog-post-title { margin: 6px 0 4px; font-size: 1.05em; }
.blog-post-excerpt { margin: 0; color: var(--origin-text-muted, #666); }
.blog-post-more > summary { cursor: pointer; margin-top: 8px; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--origin-accent, #2151c6); }
.blog-post-body p { margin: 0 0 8px; }
@media (max-width: 600px) {
  .blog-post { flex-direction: column; }
  .blog-post-img { width: 100%; height: 180px; }
}
.sect-colors[style*="--origin-bg"] { display: block; background: var(--origin-bg); }
.sect-heading { font-size: var(--origin-heading-size, 2rem); margin: 0 0 16px; }
.sect-intro { color: var(--origin-text-muted, #666); margin: 0 0 20px; }

/* --- site header / nav (behavior: site-nav) --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--origin-bg, #fff);
  border-bottom: 1px solid var(--origin-border, #ddd);
}
.site-logo { text-decoration: none; color: var(--origin-text); display: flex; align-items: center; min-width: 0; max-width: 100%; }
/* サイト名は既定では本文サイズを継承する (--origin-site-name-size は設定時のみ出力)。
   長い名前でもナビを押し出さないよう、折り返しと最大幅だけ常に効かせる。 */
.site-logo-text {
  font-family: var(--origin-heading-font); font-weight: var(--origin-heading-weight);
  font-size: var(--origin-site-name-size, inherit);
  line-height: 1.25; overflow-wrap: anywhere; min-width: 0;
}
.site-logo-img { max-height: 40px; width: auto; }
/* サイト名の横位置 (未設定 = 属性が付かない = 従来どおり左寄せ)。
   ハンバーガーと重ならないよう左右に余白を確保する。 */
.site-header[data-logo-align="center"] { position: relative; }
.site-header[data-logo-align="center"] .site-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 120px); justify-content: center; text-align: center;
}
.site-header[data-logo-align="right"] { justify-content: flex-end; }
.site-header[data-logo-align="right"] .site-logo { order: 2; margin-left: auto; text-align: right; }
.nav-hamburger {
  display: flex; flex-direction: column; gap: 4px;
  /* a11y: タップ領域はプロジェクト下限の 44px を満たす (従来は 40x32 だった)。
     バー自体の見た目は変えず、当たり判定だけを広げる */
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: var(--origin-nav-burger-bg, transparent);
  border: 1px solid var(--origin-nav-burger-border-color, transparent);
  border-radius: var(--origin-nav-burger-radius, 0);
  cursor: pointer; padding: 8px; z-index: 60;
}
.nav-hamburger-bar {
  width: var(--origin-nav-burger-size, 22px); height: 2px;
  background: var(--origin-nav-burger-color, var(--origin-text, #222));
}
.site-nav-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(var(--origin-nav-panel-width, 320px), 92vw);
  background: var(--origin-nav-panel-bg, var(--origin-surface, #fff));
  color: var(--origin-nav-panel-text, inherit);
  z-index: 55;
  display: flex; flex-direction: column; gap: var(--origin-nav-item-gap, 4px);
  padding: 64px 20px 20px;
  transform: translateX(100%); overflow-y: auto;
  /* OVERFLOW_FIX(a11y): 閉状態は visibility:hidden で Tab 順から除外し、
     iOS Safari での fixed+transform スクロール寄与も封じる。
     visibility の 0.2s 遅延で閉アニメーション(transform)は従来どおり見える */
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-nav-panel[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform 0.2s ease; }
/* NAV_FOCUS_CONTAINMENT: behavior が閉じ完了後に付与する hidden 属性を
   モバイル幅でだけ display:none にする (Tab 順から確実に除外)。
   author の display:flex が UA の [hidden] を上書きするため明示が必要。
   PC (≥768px) は静的表示のためこの規則を適用しない */
@media (max-width: 767.98px) {
  .site-nav-panel[hidden] { display: none; }
}
.site-nav-backdrop {
  position: fixed; inset: 0; background: var(--origin-nav-backdrop, rgba(0,0,0,0.5));
  z-index: 54; display: none;
}
.site-nav-backdrop[data-open="true"] { display: block; }
.site-nav-link {
  color: var(--origin-nav-panel-text, var(--origin-text)); text-decoration: none; padding: 8px 4px;
  border-bottom: 1px solid var(--origin-border);
}

/* --- モバイルナビの見た目設定 (未設定サイトには一切効かない属性セレクタ) --- */
/* 左から開く */
.site-header[data-nav-side="left"] .site-nav-panel { right: auto; left: 0; transform: translateX(-100%); }
.site-header[data-nav-side="left"] .site-nav-panel[data-open="true"] { transform: translateX(0); }
/* ハンバーガーを左に置く (ロゴより前へ) */
.site-header[data-burger-align="left"] .nav-hamburger { order: -1; }
/* ドロップダウン: 画面上部から下ろす帯 */
.site-header[data-nav-mode="dropdown"] .site-nav-panel {
  top: 0; left: 0; right: 0; bottom: auto; width: auto;
  max-height: min(80vh, 560px); padding: 64px 20px 20px;
  transform: translateY(-100%);
}
.site-header[data-nav-mode="dropdown"] .site-nav-panel[data-open="true"] { transform: translateY(0); }
/* メニュー項目の配置 */
.site-header[data-item-align="center"] .site-nav-link { text-align: center; }
.site-header[data-item-align="right"] .site-nav-link { text-align: right; }
.site-header[data-item-align="left"] .site-nav-link { text-align: left; }
/* メニュー内スクロール固定。溢れているときは behavior が data-scroll-overflow="true"
   を付けるので、そのときだけ auto へ戻して閉じ操作と項目への到達性を守る */
.site-header[data-menu-scroll="locked"] .site-nav-panel[data-scroll-overflow="false"] { overflow-y: hidden; }
/* パネル内のロゴ / サイト名 / 閉じるボタン */
.site-nav-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.site-nav-logo { max-height: 32px; width: auto; }
.site-nav-title { font-family: var(--origin-heading-font); font-weight: var(--origin-heading-weight); }
.site-nav-close {
  position: absolute; top: 12px; right: 12px;
  min-width: 44px; min-height: 44px; font-size: 24px; line-height: 1;
  background: transparent; border: none; cursor: pointer;
  color: var(--origin-nav-panel-text, var(--origin-text));
}
.site-header[data-nav-side="left"] .site-nav-close { right: auto; left: 12px; }
@media (min-width: 768px) {
  .nav-hamburger { display: none; }
  .site-nav-backdrop { display: none !important; }
  .site-nav-panel {
    position: static; transform: none; transition: none; width: auto; visibility: visible;
    flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 0;
    background: transparent; overflow: visible;
  }
  .site-nav-link { border-bottom: none; padding: 4px 0; font-size: 0.9em; }
  /* モバイル向け設定を PC の静的表示へ漏らさない (幅・位置・スクロール・装飾) */
  .site-header[data-nav-side="left"] .site-nav-panel,
  .site-header[data-nav-mode="dropdown"] .site-nav-panel {
    position: static; transform: none; width: auto; max-height: none; padding: 0;
    left: auto; right: auto; top: auto; bottom: auto;
  }
  .site-header[data-menu-scroll="locked"] .site-nav-panel[data-scroll-overflow="false"] { overflow: visible; }
  .site-nav-close, .site-nav-head { display: none; }
  /* PC ではメニューが静的表示になるため、絶対配置の中央寄せだとサイト名が
     メニューへ重なる (2026-08-02 実機確認)。3 カラムにして重ならずに中央へ置く。 */
  .site-header[data-logo-align="center"] { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header[data-logo-align="center"] .site-logo {
    position: static; transform: none; grid-column: 2; justify-self: center; max-width: 100%;
  }
  .site-header[data-logo-align="center"] .site-nav-panel { grid-column: 3; justify-content: flex-end; }
}

/* --- SNS band --- */
.sns-band { text-align: center; padding: 20px; border-bottom: 1px solid var(--origin-border); }
.sns-band-label { margin: 0 0 10px; font-size: 12px; color: var(--origin-text-muted); }
.sns-band-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sns-link {
  color: var(--origin-text); text-decoration: none; font-size: 12px;
  border: 1px solid var(--origin-border); border-radius: 999px; padding: 6px 14px;
}

/* --- hero --- */
.hero-eyebrow { letter-spacing: 0.2em; font-size: 12px; margin: 16px 0 8px; color: var(--origin-text-muted); }
.hero-title { margin: 0 0 12px; font-size: calc(var(--origin-heading-size, 2rem) * 1.3); }
.hero-subtitle { margin: 0 0 16px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Phase C2: 文字配置 / ボタン配置 (非defaultのときだけ class が付く) */
.hero-sect.valign-top { justify-content: flex-start; }
.hero-sect.valign-center { justify-content: center; }
.hero-text.halign-left { text-align: left; align-items: flex-start; }
.hero-text.halign-right { text-align: right; align-items: flex-end; }
.hero-ctas.btn-align-left { justify-content: flex-start; }
.hero-ctas.btn-align-center { justify-content: center; }
.hero-ctas.btn-align-right { justify-content: flex-end; }
/* Phase C2: Hero 動画自動再生の iframe (videoAutoplay=true 時のみ) */
.hero-photo.is-video .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.hero-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--origin-radius, 6px); }
.hero-cta-btn, .item-link-btn, .info-map-link, .show-more-toggle {
  display: inline-block; padding: 10px 18px;
  border: 1px solid var(--origin-accent, #222);
  color: var(--origin-text, inherit); background: transparent;
  text-decoration: none; border-radius: var(--origin-radius, 6px);
  font: inherit; cursor: pointer;
}
.hero-img { width: 100%; border-radius: var(--origin-radius, 6px); }
/* Phase C1: cover 背景視覚 (非defaultの背景設定があるときだけ出力される構造) */
.hero-cover-frame { position: relative; overflow: hidden; border-radius: var(--origin-radius, 6px); }
.hero-cover-frame .hero-cover-img { display: block; object-fit: cover; border-radius: 0; }
.hero-cover-darken { position: absolute; inset: 0; pointer-events: none; }

/* hero displayMode 'card' 系 (THE WASTED 現行仕様) */
.hero-sect[data-display-mode="card"], .hero-sect[data-display-mode="card-media-first"] {
  background: linear-gradient(160deg, color-mix(in srgb, var(--origin-accent) 22%, var(--origin-bg)), var(--origin-bg) 55%);
}
.hero-media-card { margin-top: 20px; }
.hero-sect[data-display-mode="card-media-first"] .hero-media-card { margin: 0 0 20px; }
.hero-media-card .hero-img, .hero-media-card .hero-carousel { border-radius: var(--origin-radius, 6px); overflow: hidden; }
.hero-sect[data-display-mode="card"] .hero-cta-btn {
  background: var(--origin-accent); color: #fff; border-color: var(--origin-accent);
  border-radius: 999px;
}

/* --- hero carousel --- */
.hero-carousel { position: relative; }
.hero-carousel-slide { display: none; }
.hero-carousel-slide[data-active="true"] { display: block; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.45); color: #fff; border: none;
  font-size: 26px; line-height: 1; padding: 8px 14px; cursor: pointer;
  border-radius: var(--origin-radius, 6px);
}
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.45); cursor: pointer; padding: 0;
}
.carousel-dot[data-active="true"] { background: var(--origin-accent, #fff); }

/* --- cards --- */
.item-card-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.item-card {
  border: 1px solid var(--origin-border, #ddd);
  background: var(--origin-surface, transparent);
  padding: 16px; border-radius: var(--origin-radius, 6px);
}
.item-card-title { margin: 12px 0 8px; }
.item-meta, .item-price { color: var(--origin-text-muted); font-size: 0.9em; }
.item-card-img { width: 100%; border-radius: var(--origin-radius, 6px); }

/* 横スクロール (PR-180D 互換: モバイル向けフィルムストリップ) */
.item-card-list.layout-horizontalScroll {
  display: flex; overflow-x: auto; gap: 16px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.item-card-list.layout-horizontalScroll > .item-card {
  flex: 0 0 82%; max-width: 380px; scroll-snap-align: start;
}

/* --- schedule --- */
.show-list { display: grid; gap: 20px; }
.show-card {
  border: 1px solid var(--origin-border, #ddd);
  background: var(--origin-surface, transparent);
  border-radius: var(--origin-radius, 6px); overflow: hidden;
}
.show-body { padding: 16px; }
.show-date { color: var(--origin-accent); font-weight: bold; margin: 0 0 4px; }
.show-title { margin: 0 0 8px; }
.show-venue, .show-time, .show-prices { margin: 0 0 4px; color: var(--origin-text-muted); }
.show-note { font-size: 0.9em; }
.show-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* schedule show.size 互換 (small=コンパクト行 / large=大判) */
@media (min-width: 640px) {
  .show-card.show-size-small { display: flex; align-items: flex-start; }
  .show-card.show-size-small .show-img { width: 180px; flex: 0 0 auto; }
}
.show-card.show-size-large .show-img { width: 100%; }

/* --- news --- */
.news-list { display: grid; gap: 20px; }
.news-post { border-bottom: 1px solid var(--origin-border, #ddd); padding-bottom: 16px; }
.news-date { color: var(--origin-text-muted); font-size: 0.85em; margin: 8px 0 4px; }
.news-title { margin: 0 0 8px; }
.news-img { max-width: min(100%, 480px); border-radius: var(--origin-radius, 6px); } /* OVERFLOW_FIX: 固定480pxが狭幅でgrid行を膨張させ page横スクロールの主因だった */

/* 横スクロール (Phase C2-A1)。schema/Renderer は既に layoutMode に対応済みで、
   .news-list 向けの規則だけが欠けていた。.item-card-list.layout-horizontalScroll と
   同じ設計に揃える (flex + snap + 82% でカードが画面幅いっぱいに伸びず次が覗く)。
   normal 表示 (.news-list 単体の grid) は変更していない。 */
.news-list.layout-horizontalScroll {
  display: flex; overflow-x: auto; gap: 16px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.news-list.layout-horizontalScroll > .news-post {
  flex: 0 0 82%; max-width: 380px; min-width: 0; scroll-snap-align: start;
}

/* --- videos --- */
.video-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); } /* OVERFLOW_FIX: ハード最小280pxが幅320px未満で+20px溢れていた */
.video-facade {
  position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: #000; color: #fff; cursor: pointer;
  border-radius: var(--origin-radius, 6px);
}
/* βフィードバック #5: サムネイル + 再生ボタンのカード UI。
   サムネイルは背景として敷き、その上に ▶ とラベルを重ねる。 */
.video-facade { overflow: hidden; text-decoration: none; }
.video-facade-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* 白文字の可読性を確保するため少し暗く敷く (色だけに頼らない設計) */
  filter: brightness(0.62);
}
.video-facade-play {
  position: relative; font-size: 34px; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.video-facade-label, .video-facade-sub { position: relative; }
.video-facade-label { font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6); text-align: center; padding: 0 12px; }
.video-facade-sub { font-size: 0.82em; opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.video-facade-channel { color: #fff; background: linear-gradient(135deg, #1c1c1c, #3a0d0d); }
.video-facade-empty { cursor: default; opacity: 0.6; }
.video-embed-iframe { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: var(--origin-radius, 6px); }
.video-title { margin: 10px 0 4px; font-size: 1em; }
.video-desc { margin: 0; color: var(--origin-text-muted); font-size: 0.9em; }

/* --- gallery --- */
.gallery-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gallery-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--origin-radius, 6px); }
/* Phase A2: 横スクロール (layoutMode=horizontalScroll のときのみ class が付く) */
.gallery-grid.layout-horizontalScroll { display: flex; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.gallery-grid.layout-horizontalScroll > .gallery-item { flex: 0 0 min(60vw, 240px); scroll-snap-align: start; }
/* G1: 横スクロール帯のスクロールバーを隠す (自動/手動どちらでも見た目を整える) */
.gallery-grid.layout-horizontalScroll { scrollbar-width: none; }
.gallery-grid.layout-horizontalScroll::-webkit-scrollbar { display: none; }
/* Phase A2: キャプション (caption 設定時のみ出力される) */
/* 2026-08-04: gallery-item は <a> なので色を継承させないと UA 既定の
   リンク青 (#0000EE) がキャプションまで伝播する。テーマ変数は
   --origin-text (--origin-body は存在しない変数だった = 常に fallback)。 */
.gallery-item { display: block; text-decoration: none; color: var(--origin-text, inherit); }
.gallery-caption { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--origin-text, inherit); opacity: .85; }
/* 横スクロール帯: 最後の 1 枚が端で切れたまま到達不能にならないよう
   スクロール終端に余白を作り、snap の基準もそろえる */
.gallery-grid.layout-horizontalScroll { scroll-padding-inline: 0; padding-inline-end: 8px; }
/* 画像未読込でも高さが確定していてレイアウトシフトを起こさない */
.gallery-grid.layout-horizontalScroll > .gallery-item > .gallery-img { aspect-ratio: 1; }

/* --- lightbox (behavior が body 直下に生成) --- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-img { max-width: 88vw; max-height: 88vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 14px; right: 14px; }
.lightbox-prev { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  background: rgba(255,255,255,0.14); color: #fff; border: none;
  font-size: 22px; padding: 8px 14px; cursor: pointer; border-radius: 6px;
}
.lightbox-prev:disabled, .lightbox-next:disabled { opacity: 0.3; cursor: default; }

/* --- info --- */
.info-list dt { font-weight: bold; margin-top: 12px; }
.info-list dd { margin: 0; }
.reservation-notice { border: 1px solid var(--origin-border); padding: 12px; border-radius: var(--origin-radius, 6px); }

/* --- contact (B-1) --- */
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-label { font-size: 14px; font-weight: bold; }
.contact-input {
  font: inherit; color: var(--origin-text, #222);
  background: var(--origin-surface, #fff);
  border: 1px solid var(--origin-border, #ddd);
  border-radius: var(--origin-radius, 6px);
  padding: 10px 12px;
}
.contact-input:focus { outline: 2px solid var(--origin-accent, #666); outline-offset: 1px; }
.contact-textarea { resize: vertical; min-height: 120px; }
/* honeypot: 視覚・支援技術の双方から隠す (display:none だと一部 bot が無視するため画面外へ) */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-status { margin: 0; }
.contact-status[data-contact-state="error"] { color: var(--origin-error, #c00); }
.contact-submit {
  align-self: flex-start; cursor: pointer; font: inherit; font-weight: bold;
  color: #fff; background: var(--origin-accent, #333);
  border: none; border-radius: var(--origin-radius, 6px); padding: 12px 28px;
}
.contact-submit:disabled { opacity: 0.5; cursor: default; }

.site-footer { text-align: center; padding: 32px 20px; color: var(--origin-text-muted); font-size: 12px; }

/* --- スマホ固定 CTA バー (B-2 / P2-2) ---
   要素は「設定して初めて」HTML に出る。ここでは既定を display:none にして
   おき、スマホ幅でだけ表示する = PC の見た目は一切変わらない。 */
.sticky-bar, .sticky-bar-spacer { display: none; }
@media (max-width: 767.98px) {
  .sticky-bar {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--origin-surface, #fff);
    border-top: 1px solid var(--origin-border, #ddd);
  }
  .sticky-bar-action {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    /* a11y: タップ領域はプロジェクト下限の 44px を満たす */
    min-height: 44px; padding: 0 12px;
    font-weight: bold; font-size: 15px; text-align: center; text-decoration: none;
    border-radius: var(--origin-radius, 6px);
    color: var(--origin-accent, #333); background: var(--origin-surface, #fff);
    border: 1px solid var(--origin-accent, #333);
  }
  .sticky-bar-action[data-sticky-bar-role="primary"] {
    color: #fff; background: var(--origin-accent, #333);
  }
  /* バーが footer を覆わないための下余白 (バーと同時にしか出ない)。
     61px = 上下 padding 8px + タップ領域 44px + border-top 1px = バー実高 */
  .sticky-bar-spacer { display: block; height: calc(61px + env(safe-area-inset-bottom, 0px)); }
}

/* --- behavior: show-more --- */
[data-behavior="show-more"][data-collapsed="true"] [data-show-more-content][data-clamp="lines"] {
  max-height: 7.5em; overflow: hidden;
}
[data-behavior="show-more"][data-collapsed="true"] [data-more-overflow] { display: none; }
.show-more-toggle { margin-top: 12px; }

/* ================================================================== */
/* 共通表示方式 (sect-display) — 2026-08-04                            */
/* ------------------------------------------------------------------ */
/* 繰り返しセクション (gallery/menu/news/blog/goods/videos/schedule/    */
/* member/biography/custom) 共通。1 画面の表示数は React が             */
/* --sd-basis-mobile / --sd-basis-pc (flex-basis) として渡す。          */
/* JS 無しでも「横に並んでスワイプできる一覧」として成立する。          */

.sect-display { --sd-gap: 16px; --sd-basis: var(--sd-basis-mobile, 82%); }
@media (min-width: 768px) {
  .sect-display { --sd-basis: var(--sd-basis-pc, 33%); }
}

/* --- 横並び (横スクロール / 横自動 / スライダー / カルーセル) --- */
.sect-display-h .sect-display-stage { position: relative; }
.sect-display-h [data-display-viewport] {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--sd-gap);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 0; padding-inline-end: 8px;
  scrollbar-width: none;
}
.sect-display-h [data-display-viewport]::-webkit-scrollbar { display: none; }
.sect-display-h [data-display-viewport] > * {
  flex: 0 0 var(--sd-basis); min-width: 0; scroll-snap-align: start;
}
/* スライダーは 1 枚を大きく見せる方式なので上限幅を掛けない */
.sect-display-slider [data-display-viewport] > * { max-width: none; }
.sect-display-horizontal_scroll [data-display-viewport] > *,
.sect-display-auto_scroll [data-display-viewport] > *,
.sect-display-carousel [data-display-viewport] > * { max-width: 380px; }
/* ギャラリーは 1 枚が小さいので上限を掛けない (旧 min(60vw,240px) 相当は
   1画面表示数の既定で表現する) */
.sect-display-h .gallery-grid > * { max-width: none; }
.sect-display-h .gallery-grid { gap: 8px; }
.sect-display-h .gallery-item > .gallery-img { aspect-ratio: 1; }
/* ドラッグ中は文字選択させない (掴んで動かす操作の邪魔になる) */
[data-display-viewport].is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }

/* --- 矢印 --- */
.sect-display-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  border: 1px solid var(--origin-border, #ddd);
  background: var(--origin-surface, #fff); color: var(--origin-text, #222);
  opacity: .9;
}
.sect-display-arrow:hover { opacity: 1; }
.sect-display-prev { left: -6px; }
.sect-display-next { right: -6px; }
@media (max-width: 767px) {
  /* スマホでは指のスワイプが主操作。矢印はカードに被らないよう小さく */
  .sect-display-arrow { width: 36px; height: 36px; font-size: 20px; }
  .sect-display-prev { left: -2px; }
  .sect-display-next { right: -2px; }
}

/* --- インジケータ (点) --- */
.sect-display-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.sect-display-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--origin-accent, #888); background: transparent;
}
.sect-display-dot[aria-selected="true"] { background: var(--origin-accent, #888); }
/* タップ判定は 10px の点そのものだと小さすぎるので当たり判定を広げる */
.sect-display-dot::before { content: ""; position: absolute; inset: -11px; }
.sect-display-dots { position: relative; }
.sect-display-dot { position: relative; }

/* --- 横タブ展開 (tab_more) --- */
.sect-display-tabbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sect-display-tab {
  min-width: 44px; min-height: 44px; padding: 0 12px; cursor: pointer;
  border-radius: var(--origin-radius, 6px);
  border: 1px solid var(--origin-border, #ddd);
  background: var(--origin-surface, transparent); color: var(--origin-text, inherit);
}
.sect-display-tab[aria-selected="true"] {
  background: var(--origin-accent, #333); color: var(--origin-bg, #fff);
  border-color: var(--origin-accent, #333);
}
/* 非選択ページの非表示は section-display ビヘイビアが [hidden] を付けて行う
   (ページ数に上限のない方式)。JS が無い環境では全件が並ぶだけで、
   情報は一切失われない。 */
.sect-display-tabs [data-tab-page][hidden] { display: none; }

/* 動きを減らす設定の人には自動送り・スムーススクロールを掛けない */
@media (prefers-reduced-motion: reduce) {
  .sect-display-h [data-display-viewport] { scroll-behavior: auto; }
}