/* =========================================
   _shared.css — デイキャンプくべる 共通CSS（完全整理版）
   index.html / en.html / cn.html / tw.html / kr.html 共用
========================================= */

/* ─── VARIABLES ─── */
:root {
  --fire:    #E8501A;
  --ember:   #F4A32B;
  --ash:     #F5F0E8;
  --charcoal:#1C1C1A;
  --smoke:   #6B6560;
  --wood:    #5C3D1E;
  --forest:  #2D4A2D;
  --cream:   #FDFAF4;
  --white:   #FFFFFF;
}

/* ─── BASE ─── */
* { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior:smooth;
  margin:0; padding:0;
  overflow-x:hidden;
  background:var(--charcoal);
}
body {
  margin:0; padding:0;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.8;
}

/* ─── LANGUAGE BAR ─── */
.lang-bar {
  position:absolute; top:28px; right:40px;
  z-index:10; display:flex; gap:8px; align-items:center;
}
.lang-bar a {
  color:rgba(255,255,255,0.75); text-decoration:none;
  font-size:11px; font-weight:400; letter-spacing:0.04em;
  padding:4px 10px; border:1px solid rgba(255,255,255,0.3);
  border-radius:2px; background:rgba(0,0,0,0.35);
  backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s, background .2s;
  white-space:nowrap;
}
.lang-bar a:hover {
  color:white; border-color:rgba(255,255,255,0.7);
  background:rgba(0,0,0,0.55);
}
.lang-bar a.active {
  color:white; border-color:var(--ember);
  background:rgba(232,80,26,0.3); font-weight:500;
}

/* ─── HERO ─── */
.hero {
  position:relative; height:1000px;
  background:var(--charcoal);
  display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden;
}
.hero-logo {
  position:absolute; top:96px; right:40px;
  z-index:3; pointer-events:none;
  animation:logoReveal 4s ease-out forwards;
}
.hero-logo img { width:200px; height:auto; display:block; }
@keyframes logoReveal {
  0%   { opacity:0; filter:blur(14px); }
  40%  { opacity:.6; filter:blur(5px); }
  70%  { opacity:.9; filter:blur(1px); }
  100% { opacity:1; filter:blur(0); }
}

/* HERO video wrap（インライン style から移行） */
.hero-video-wrap {
  position:absolute; inset:0; z-index:1; overflow:hidden;
}
.hero-video-wrap video { width:100%; height:100%; object-fit:cover; }
.hero-video-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); }

/* HERO 背景スライド */
.hero-bg {
  position:absolute; inset:0; overflow:hidden;
  grid-row:1/-1; grid-column:1; pointer-events:none;
}
.hero-bg-slides { opacity:0; transition:opacity 1s ease; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06); opacity:0;
  transition:opacity 1.6s ease-in-out;
  animation:heroZoom 14s ease-in-out infinite alternate;
}
.hero-slide.active { opacity:1; }
.hero-slide::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(28,28,26,0.2) 0%,rgba(28,28,26,0.82) 100%);
}
@keyframes heroZoom {
  from { transform:scale(1.06); }
  to   { transform:scale(1.13); }
}

/* HERO 内コンテンツ */
.hero-content {
  position:relative; z-index:2;
  padding:56px 48px 61px; width:100%;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero-eyebrow {
  display:flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:0.25em;
  color:var(--ember); margin-bottom:20px;
}
.hero-eyebrow::before {
  content:''; display:block; width:40px; height:1px; background:var(--ember);
}
.hero h1 {
  font-family:'Noto Serif JP',serif; font-size:96px;
  font-weight:900; color:white; line-height:1.05;
  letter-spacing:-0.01em; margin-bottom:24px;
}
.hero h1 em { font-style:normal; color:var(--ember); }
.hero-sub {
  font-size:17px; font-weight:300;
  color:rgba(255,255,255,0.8); line-height:1.9;
  max-width:480px; margin-bottom:36px;
}

/* HERO 内 YouTube サムネ */
.hero-yt-wrap { margin-bottom:20px; }
.hero-yt {
  display:inline-block; position:relative;
  border-radius:6px; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
  transition:transform .2s;
  width:min(340px,80vw);
}
.hero-yt:hover { transform:scale(1.02); }
.hero-yt img {
  width:100%; display:block;
  aspect-ratio:16/9; object-fit:cover;
}
.hero-yt-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,0.28);
}
.hero-yt-play {
  width:52px; height:52px;
  background:rgba(255,0,0,0.9); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
}
.hero-yt-caption {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.75));
  padding:18px 14px 10px; text-align:left;
}
.hero-yt-eyebrow {
  font-size:10px; letter-spacing:0.15em;
  color:rgba(255,255,255,0.7); margin-bottom:3px;
}
.hero-yt-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:17px; letter-spacing:0.1em;
  color:white; line-height:1.2;
}
.hero-yt-title .x { color:var(--ember); }

/* CTA ボタン */
.cta-group { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.btn-fire {
  background:var(--fire); color:white;
  padding:16px 40px; font-size:16px; font-weight:500;
  letter-spacing:0.08em; text-decoration:none; display:inline-block;
  transition:background .2s,transform .15s;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.btn-fire:hover { background:#cc3c0e; transform:translateY(-2px); }
.btn-outline {
  color:white; padding:16px 36px; font-size:15px;
  letter-spacing:0.06em; border:1px solid rgba(255,255,255,0.4);
  text-decoration:none; display:inline-block;
  transition:border-color .2s,background .2s;
}
.btn-outline:hover { border-color:white; background:rgba(255,255,255,0.1); }

/* HERO IMGS（旧モード・現在未使用だが残置） */
.hero-imgs {
  position:absolute; top:0; right:0; width:36%; height:100%;
  display:grid; grid-template-rows:1fr 1fr 1fr; gap:3px;
  z-index:1; opacity:0; animation:fadeInImgs 1.2s ease 0.6s forwards;
}
@keyframes fadeInImgs {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
.hero-imgs img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(0.8); transition:filter .3s;
}
.hero-imgs img:hover { filter:brightness(1); }
.hero-imgs::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right,#1C1C1A 0%,transparent 35%);
  z-index:1; pointer-events:none;
}

/* EMBERS（既存・実体はJSが描画する別レイヤー使用） */
.embers { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }

/* SCROLL HINT */
.scroll-hint {
  position:absolute; bottom:72px; right:40px; z-index:100;
  display:flex; flex-direction:column; align-items:center;
  gap:8px; opacity:1; transition:opacity .4s; pointer-events:none;
}
.scroll-hint.hidden { opacity:0; }
.scroll-hint span {
  font-size:10px; letter-spacing:0.25em;
  color:rgba(255,255,255,0.45);
  writing-mode:vertical-rl; text-transform:uppercase;
}
.scroll-arrow {
  display:flex; flex-direction:column; align-items:center;
  animation:arrowBounce 1.6s ease-in-out infinite;
}
.scroll-arrow svg { width:20px; height:20px; }
.scroll-arrow svg:nth-child(2) { margin-top:-8px; opacity:0.4; }
@keyframes arrowBounce {
  0%,100% { transform:translateY(0); opacity:0.55; }
  50%     { transform:translateY(7px); opacity:1; }
}

/* ─── SECTIONS ─── */
section {
  display:block; width:100vw; position:relative;
  left:50%; transform:translateX(-50%);
  box-sizing:border-box; padding:96px 0;
}
section.concept,
section.sites,
section.menu,
section.howto,
section.facilities,
section.access,
section.faq {
  padding-top:130px; padding-bottom:130px;
  margin-top:-48px; margin-bottom:-48px;
}
section.concept    { clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%); }
section.sites      { clip-path:polygon(0 0,100% 48px,100% 100%,0 calc(100% - 48px)); }
section.menu       { clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%); }
section.howto      { clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%); }
section.facilities { clip-path:polygon(0 0,100% 48px,100% 100%,0 calc(100% - 48px)); }
section.access     { clip-path:polygon(0 0,100% 48px,100% 100%,0 calc(100% - 48px)); }
section.faq        { clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%); }
.photo-strip {
  margin-top:-48px; margin-bottom:-48px;
  width:100vw; position:relative;
  left:50%; transform:translateX(-50%); z-index:0;
}
.fcta {
  clip-path:polygon(0 48px,100% 0,100% 100%,0 100%);
  padding-top:120px; margin-top:-48px;
}
.container { max-width:1080px; margin:0 auto; padding:0 48px; box-sizing:border-box; }

.label {
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.35em;
  color:var(--fire); margin-bottom:14px; text-transform:uppercase;
}
.label::after { content:''; width:48px; height:1px; background:var(--fire); }
h2.ttl {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(30px,4.5vw,52px);
  font-weight:700; line-height:1.25; margin-bottom:20px;
}
.lead {
  font-size:16px; font-weight:300;
  color:var(--smoke); line-height:2; max-width:600px;
}

/* ─── INSTAGRAM ─── */
.insta-section { background:var(--charcoal); padding:64px 0 72px; text-align:center; }
.insta-header { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; margin-top:20px; }
.insta-header svg { color:var(--ember); flex-shrink:0; }
.insta-handle { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:0.12em; color:white; }
.insta-sub { font-size:13px; color:rgba(255,255,255,0.45); margin-bottom:32px; letter-spacing:0.06em; }
.insta-widget-wrap {
  max-width:1080px; margin:0 auto; padding:0 48px;
  min-height:200px; display:flex; align-items:center; justify-content:center;
}
.insta-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; width:100%; }
.insta-cell { position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer; }
.insta-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.insta-cell:hover img { transform:scale(1.07); }
.insta-overlay {
  position:absolute; inset:0; background:rgba(232,80,26,0.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.insta-cell:hover .insta-overlay { opacity:1; }
.insta-follow-btn {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:28px; padding:11px 28px;
  border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.8);
  text-decoration:none; font-size:13px; letter-spacing:0.08em;
  border-radius:40px; transition:border-color .2s, color .2s;
}
.insta-follow-btn:hover { border-color:var(--ember); color:var(--ember); }

/* ─── CONCEPT ─── */
.concept { background:var(--charcoal); color:white; position:relative; overflow:hidden; }
.concept .ttl { color:white; }
.concept .lead { color:rgba(255,255,255,0.65); max-width:712px; }
.badge {
  display:inline-block; background:var(--fire); color:white;
  font-size:11px; letter-spacing:0.12em; padding:5px 12px; margin-bottom:28px;
}
.concept-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.concept-img { overflow:hidden; aspect-ratio:4/3; }
.concept-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}

/* ─── SITES ─── */
.sites { background:white; }
.area-map-wrap { margin-bottom:40px; margin-top:32px; }
.area-map { width:100%; max-width:800px; display:block; margin:0 auto; border-radius:4px; }
.sites-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.site-card {
  background:var(--cream); border:1px solid rgba(0,0,0,0.08);
  border-top:4px solid var(--site-accent,var(--fire));
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.site-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,0,0,0.13); }
.site-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:4px; background:var(--site-accent,var(--fire)); pointer-events:none; z-index:2;
}
.site-card::after {
  content:''; position:absolute; bottom:0; right:0;
  width:4px; height:48px; background:var(--site-accent,var(--fire)); pointer-events:none; z-index:2;
}
.site-header-bar {
  display:flex; align-items:baseline; gap:6px;
  padding:14px 16px 0;
  border-left:4px solid var(--site-accent,var(--fire));
  margin:0 0 4px;
}
.site-number { font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:0.15em; color:var(--smoke); }
.site-kana { font-family:'Noto Serif JP',serif; font-size:32px; font-weight:700; color:var(--site-accent,var(--fire)); line-height:1; }
.site-meta-inline { padding:8px 16px 6px; }
.site-desc-inline { padding:0 16px; margin:0 0 10px; }
.site-meta { display:flex; gap:5px; margin-bottom:10px; flex-wrap:nowrap; align-items:center; overflow:hidden; }
.site-tag { font-size:12px; letter-spacing:0.08em; color:white; background:var(--charcoal); padding:4px 10px; white-space:nowrap; }
.site-tag.tag-car { background:var(--charcoal); color:var(--ember); font-weight:700; border:1.5px solid var(--ember); }
.tag-feature { background:transparent; border:1.5px solid currentColor; font-weight:600; }
.site-desc { font-size:13px; color:var(--smoke); line-height:1.8; margin:10px 0 14px; }
.site-body { padding:14px 16px 16px; display:flex; flex-direction:column; }
.site-price { margin-top:12px; padding-top:12px; border-top:1px solid rgba(0,0,0,0.08); }
.site-price-main { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--fire); line-height:1; margin-bottom:4px; }
.site-price-main .sp-unit { font-family:'Noto Sans JP',sans-serif; font-size:13px; color:var(--smoke); font-weight:300; }
.site-price-sub { font-size:12px; color:var(--smoke); line-height:1.8; }
.site-book-btn {
  display:block; margin-top:12px; padding:10px 0;
  background:var(--fire); color:white; text-align:center;
  text-decoration:none; font-size:13px; font-weight:500;
  letter-spacing:0.06em; border-radius:4px;
}
.site-imgs-wrap { position:relative; padding:0 10px; background:white; }
.site-main-img {
  width:100%; height:200px; object-fit:cover; display:block;
  cursor:pointer; transition:opacity .3s;
  border-top-left-radius:32px; border-bottom-right-radius:32px;
}
.site-main-img:hover { opacity:.9; }
.site-sub-imgs { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:2px; }
.site-sub-imgs img { width:100%; height:70px; object-fit:cover; display:block; cursor:pointer; transition:opacity .3s; }
.site-sub-imgs img:hover { opacity:.8; }
.site-imgs-hint {
  font-size:10px; color:rgba(255,255,255,0.55);
  text-align:right; padding:3px 6px;
  background:var(--charcoal); letter-spacing:0.05em; margin-bottom:24px;
}
.site-modal-btns {
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:center; margin-top:32px;
}

/* ─── LIGHTBOX ─── */
.lb-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.88); z-index:9999;
  align-items:center; justify-content:center;
  flex-direction:column; gap:10px;
}
.lb-overlay.open { display:flex; }
.lb-img {
  max-width:90vw; max-height:72vh; object-fit:contain;
  border-radius:2px; box-shadow:0 8px 40px rgba(0,0,0,0.6);
}
.lb-caption { color:rgba(255,255,255,0.6); font-size:12px; margin:0; min-height:1em; }
.lb-nav { display:none; align-items:center; gap:16px; }
.lb-nav.show { display:flex; }
.lb-nav-btn {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:white; font-size:22px; width:44px; height:44px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lb-counter { color:rgba(255,255,255,0.5); font-size:12px; min-width:40px; text-align:center; }
.lb-hint { color:rgba(255,255,255,0.3); font-size:11px; margin:0; }

/* ─── MENU / BBQ ─── */
.menu { background:var(--ash); }
.bbq-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.bbq-img { overflow:hidden; aspect-ratio:4/3; }
.bbq-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.bbq-note { font-size:0.8em; opacity:0.7; }
.bbq-cta-stack { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.bbq-tel-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--fire); color:white; text-decoration:none;
  font-size:15px; font-weight:700; padding:14px 24px;
  border-radius:4px; letter-spacing:0.06em;
  box-shadow:0 2px 12px rgba(232,80,26,0.4);
}
.bbq-detail-btns { display:flex; gap:10px; }
.bbq-detail-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--charcoal); color:white; border:none; cursor:pointer;
  font-size:13px; padding:10px 18px; border-radius:4px;
  letter-spacing:0.05em; font-family:inherit;
}

/* ─── HOW TO ─── */
.howto { background:white; }
.steps {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0; margin-top:52px; position:relative;
}
.steps::before {
  content:''; position:absolute; top:28px; left:8%; right:8%; height:1px;
  background:repeating-linear-gradient(to right,var(--ember) 0,var(--ember) 8px,transparent 8px,transparent 18px);
}
.step { text-align:center; padding:0 20px; position:relative; z-index:1; }
.step-num {
  width:56px; height:56px; background:var(--charcoal); color:var(--ember);
  font-family:'Bebas Neue',sans-serif; font-size:24px; border-radius:50%;
  border:3px solid var(--ember);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.step h3 { font-size:15px; font-weight:500; margin-bottom:8px; }
.step p { font-size:13px; color:var(--smoke); line-height:1.8; word-break:keep-all; overflow-wrap:break-word; }
.step-cta { margin-top:48px; text-align:center; }
.step-cta-btn { font-size:17px; padding:20px 52px; }

/* ─── FACILITIES ─── */
.facilities { background:var(--ash); }
.facilities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.fac-card { background:white; display:flex; flex-direction:column; overflow:hidden; }
.fac-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .5s ease; }
.fac-inner { padding:24px 22px 28px; display:flex; flex-direction:column; gap:16px; }
.fac-title { font-family:'Noto Serif JP',serif; font-size:16px; font-weight:700; color:var(--charcoal); }
.fac-desc { font-size:13px; color:var(--smoke); line-height:1.9; }

/* ─── PHOTO STRIP ─── */
.photo-strip {
  overflow:hidden; background:var(--charcoal); width:100%;
  clip-path:polygon(0 32px,100% 0,100% calc(100% - 32px),0 100%);
  margin:-32px 0;
}
.photo-strip-track { display:flex; gap:4px; width:max-content; animation:photoScroll 70s linear infinite; }
.photo-strip:hover .photo-strip-track { animation-play-state:paused; }
@keyframes photoScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.photo-strip img { height:200px; width:auto; flex-shrink:0; object-fit:cover; filter:brightness(0.9); transition:filter .3s; }
.photo-strip img:hover { filter:brightness(1.05); }

/* ─── ACCESS ─── */
.access { background:var(--charcoal); color:white; }
.access .ttl { color:white; }
.access-grid { display:grid; grid-template-columns:1fr 2fr; gap:56px; margin-top:52px; }
.access-info h3 { font-family:'Noto Serif JP',serif; font-size:22px; color:var(--ember); margin-bottom:24px; }
.info-item { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.07); }
.info-item:last-child { border-bottom:none; }
.i-label { font-size:16px; letter-spacing:0.12em; color:var(--ember); margin-bottom:6px; }
.i-val { font-size:15px; color:rgba(255,255,255,0.82); line-height:1.7; }
.i-val small { color:rgba(255,255,255,0.42); font-size:13px; }
.map-wrap { overflow:hidden; border:1px solid rgba(255,255,255,0.1); }
.map-wrap iframe { width:100%; height:520px; display:block; }

/* ACCESS - 入口（道順4枚） */
.entrance-section { margin-top:40px; margin-bottom:48px; }
.entrance-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.route-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.route-cell {
  position:relative; overflow:hidden; border-radius:4px;
  border:1px solid rgba(255,255,255,0.1); cursor:pointer;
}
.route-cell img {
  width:100%; height:130px; object-fit:cover; display:block;
  filter:brightness(0.85);
}
.route-step {
  position:absolute; top:6px; left:6px;
  background:var(--fire); color:white;
  font-size:10px; font-weight:700; letter-spacing:0.1em;
  padding:3px 8px; border-radius:2px;
}
.route-caption {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.8));
  color:white; font-size:11px; padding:14px 8px 6px; letter-spacing:0.04em;
}
.entrance-desc {
  font-size:14px; color:rgba(255,255,255,0.72);
  line-height:2.0; margin:0;
}
.entrance-desc strong { color:white; }
.entrance-desc .em { color:var(--ember); }
.entrance-hint { font-size:12px; color:rgba(255,255,255,0.45); margin-top:10px; }
.entrance-tel {
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  color:white; text-decoration:none;
  font-size:14px; font-weight:500;
  padding:10px 20px; border-radius:4px; letter-spacing:0.06em;
  transition:background .2s;
}
.entrance-tel:hover { background:rgba(255,255,255,0.14); }

/* ─── NEARBY ─── */
.nearby-header { margin-top:72px; }
.nearby-header-row {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:8px;
}
.nearby-title {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(20px,2.5vw,28px);
  color:white; margin:0;
}
.nearby-pdf-btns { display:flex; gap:12px; flex-wrap:wrap; }
.pdf-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--fire); color:white; text-decoration:none;
  font-size:14px; font-weight:500; padding:10px 20px; border-radius:4px;
  letter-spacing:0.06em; box-shadow:0 2px 12px rgba(232,80,26,0.5);
  transition:all .2s;
}
.nearby-sub { font-size:14px; color:rgba(255,255,255,0.55); margin-bottom:0; }
.nearby-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.nearby-card {
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
}
.nearby-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .5s ease; }
.nearby-inner { padding:14px 16px 18px; display:flex; flex-direction:column; flex:1; }
.nearby-cat { font-size:10px; letter-spacing:0.15em; color:var(--ember); text-transform:uppercase; margin-bottom:8px; }
.nearby-name { font-family:'Noto Serif JP',serif; font-size:14px; color:white; margin-bottom:4px; font-weight:700; }
.nearby-dist { font-size:13px; color:var(--ember); font-family:'Bebas Neue',sans-serif; letter-spacing:0.05em; }
.nearby-note { font-size:12px; color:rgba(255,255,255,0.5); margin-top:4px; line-height:1.6; }
.nearby-note small {
  display:inline-block; margin-top:6px;
  font-size:11px; color:#888;
  letter-spacing:0.02em; line-height:1.5;
}
.nearby-link-btn {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:12px;
  font-size:12px; color:var(--ember); text-decoration:none;
  letter-spacing:0.06em;
  border-top:1px solid rgba(255,255,255,0.08);
  transition:color .2s;
}
.nearby-link-btn:hover { color:var(--fire); }

/* ─── FAQ ─── */
.faq { background:var(--ash); }
.faq-list { margin-top:52px; max-width:780px; }
.faq-item { background:white; margin-bottom:6px; overflow:hidden; }
.faq-q {
  padding:20px 24px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-weight:500; font-size:15px; gap:12px; user-select:none;
  transition:background .2s;
}
.faq-q:hover { background:#e8e0d8; }
.faq-q .qlabel { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--fire); flex-shrink:0; margin-right:4px; }
.faq-q .chevron { font-size:22px; color:var(--smoke); transition:transform .3s; flex-shrink:0; }
.faq-item.open .chevron { transform:rotate(45deg); color:var(--fire); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a { max-height:400px; }
.faq-a-body {
  border-top:1px solid #eee;
  padding:16px 24px 20px calc(24px + 32px);
  font-size:14px; color:var(--smoke); line-height:1.9;
}

/* ─── REVIEWS ─── */
.reviews-section { background:#faf7f3; padding:80px 0; }
.reviews-lead-strong { color:var(--fire); font-size:1.2em; }
.reviews-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:40px;
}
.review-card {
  background:white; padding:24px; border-radius:4px;
  box-shadow:0 2px 16px rgba(0,0,0,0.06);
  display:flex; flex-direction:column;
}
.review-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.review-stars { color:var(--fire); font-size:14px; }
.review-meta { font-size:11px; color:var(--smoke); }
.review-title { font-size:14px; font-weight:700; color:var(--charcoal); margin-bottom:8px; }
.review-body { font-size:13px; color:#555; line-height:1.8; margin:0; flex:1; }
.review-author {
  font-size:11px; color:var(--smoke);
  margin-top:12px; border-top:1px solid #f0ebe4; padding-top:10px;
}
.reviews-more-wrap { text-align:center; margin-top:32px; }
.reviews-more {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--charcoal); color:white; text-decoration:none;
  font-size:13px; padding:12px 24px; border-radius:3px; letter-spacing:0.08em;
}

/* ─── CONTACT ─── */
.contact-section { background:var(--charcoal); padding:80px 0; }
.contact-section .ttl { color:white; }
.contact-lead { color:rgba(255,255,255,0.65); }
.contact-required-note {
  font-size:12px; color:rgba(255,255,255,0.4);
  margin-bottom:0; margin-top:40px;
}
.contact-required-mark { color:var(--fire); font-size:12px; }
.contact-form {
  max-width:600px; margin-top:12px;
  display:flex; flex-direction:column; gap:20px;
}
.contact-field label {
  display:block; font-size:12px; letter-spacing:0.1em;
  color:rgba(255,255,255,0.5); margin-bottom:8px;
}
.contact-field .req { color:var(--fire); }
.contact-field input,
.contact-field textarea {
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  color:white; padding:14px 16px; font-size:14px;
  border-radius:3px; outline:none; font-family:inherit;
}
.contact-field textarea { resize:vertical; line-height:1.7; }
.contact-field input:focus,
.contact-field textarea:focus { border-color:var(--fire); }
.contact-submit {
  background:var(--fire); color:white; border:none; cursor:pointer;
  font-size:15px; font-weight:700; padding:16px 48px; border-radius:3px;
  letter-spacing:0.1em; font-family:inherit; transition:opacity .2s;
}
.contact-submit:hover { opacity:.85; }

/* ─── FOOTER CTA ─── */
.fcta {
  background:var(--fire); color:white; text-align:center;
  padding:88px 48px; width:100vw; position:relative;
  left:50%; transform:translateX(-50%); box-sizing:border-box;
}
.fcta h2 {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(28px,4.5vw,52px);
  font-weight:700; line-height:1.4; margin-bottom:16px;
}
.fcta p { font-size:17px; opacity:.85; margin-bottom:36px; }
.btn-white {
  background:white; color:var(--fire); padding:18px 52px;
  font-size:16px; font-weight:500; letter-spacing:0.08em;
  text-decoration:none; display:inline-block;
  transition:transform .2s, box-shadow .2s;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,0.2); }

/* ─── FOOTER ─── */
footer {
  background:var(--charcoal); color:rgba(255,255,255,0.38);
  text-align:center; padding:32px; font-size:13px; line-height:2;
  width:100vw; position:relative; left:50%; transform:translateX(-50%);
  box-sizing:border-box; display:block;
}
footer a { color:var(--ember); text-decoration:none; }
.footer-strong { color:rgba(255,255,255,0.7); }
.footer-privacy-btn {
  background:none; border:none; color:var(--ember); cursor:pointer;
  font-size:13px; text-decoration:underline; padding:0;
  font-family:inherit; letter-spacing:0.05em;
}

/* ─── FIXED 予約ボタン ─── */
.fixed-book-btn {
  position:fixed; bottom:230px; right:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background:var(--fire); color:white; text-decoration:none;
  font-size:11px; font-weight:500; letter-spacing:0.2em;
  writing-mode:vertical-rl; padding:16px 10px;
  box-shadow:-2px 2px 16px rgba(232,80,26,0.45);
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));
  opacity:0; transform:translateX(8px);
  transition:opacity .4s, transform .4s;
  pointer-events:none;
}

/* ─── REVEAL ─── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.vis { opacity:1; transform:none; }

/* ─── MODAL ─── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.75); z-index:9998;
  align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:white; max-width:680px; width:100%;
  border-radius:4px; overflow:hidden; position:relative; margin:auto;
}
.modal-header {
  background:var(--charcoal); color:white; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h3 { font-family:'Noto Serif JP',serif; font-size:18px; margin:0; letter-spacing:0.08em; }
.modal-close { background:none; border:none; color:white; font-size:28px; cursor:pointer; line-height:1; padding:0; opacity:.7; }
.modal-close:hover { opacity:1; }
.modal-body { padding:28px; }
.modal-section { margin-bottom:28px; }
.modal-section:last-child { margin-bottom:0; }
.modal-section-title {
  font-family:'Noto Serif JP',serif; font-size:14px; font-weight:700;
  color:var(--charcoal); border-left:3px solid var(--fire);
  padding-left:10px; margin-bottom:12px; letter-spacing:0.06em;
}
.modal-table { width:100%; border-collapse:collapse; font-size:13px; }
.modal-table th, .modal-table td { padding:10px 12px; border:1px solid #e8e0d8; text-align:left; }
.modal-table th { background:#f5f0ea; font-weight:600; width:40%; color:var(--charcoal); }
.modal-table td { color:#444; line-height:1.7; }
.modal-example {
  background:#faf7f3; border-radius:3px; padding:14px 16px;
  font-size:12px; color:#555; line-height:1.9; margin-top:10px;
}
.modal-example strong { color:var(--charcoal); }
.modal-list { list-style:none; padding:0; margin:0; font-size:13px; color:#444; }
.modal-list li {
  padding:8px 0; border-bottom:1px solid #f0ebe4;
  line-height:1.6; display:flex; gap:8px;
}
.modal-list li:last-child { border-bottom:none; }
.modal-list li::before { content:'■'; color:var(--fire); font-size:10px; flex-shrink:0; margin-top:3px; }
.modal-note { font-size:12px; color:var(--smoke); background:#faf7f3; padding:12px 16px; border-radius:3px; line-height:1.8; margin-top:12px; }
.btn-modal {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--charcoal); color:white; border:none; cursor:pointer;
  font-size:12px; padding:8px 16px; border-radius:3px;
  letter-spacing:0.06em; font-family:inherit; transition:background .2s;
}
.btn-modal:hover { background:var(--fire); }

/* =========================================
   BONFIRE WIDGET
========================================= */
#bf-wrap {
  position:fixed; bottom:20px; right:18px; z-index:9999;
  display:flex; flex-direction:column; align-items:center;
  user-select:none; -webkit-user-select:none;
}
#bf-btn {
  position: fixed;
  right: 20px;
  bottom: 90px; /* reCAPTCHAを避けるため、元の「bottom: 80px」などから上に引き上げます */
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--charcoal);
  border: 1px solid var(--ember);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}
#bf-btn:hover {
  transform: scale(1.05);
  background: #2a2a28;
}
#bf-btn.off { filter:none; }
#bf-btn.on  { filter:none; border-color:rgba(255,140,20,0.55); animation:bfGlow 2.8s ease-in-out infinite; }
@keyframes bfGlow {
  0%,100% { box-shadow:0 0 8px 2px rgba(255,120,10,0.20),0 2px 12px rgba(0,0,0,0.65); }
  50%     { box-shadow:0 0 22px 8px rgba(255,165,30,0.40),0 2px 12px rgba(0,0,0,0.65); }
}
#bf-fire-img { width:46px; height:46px; border-radius:50%; display:block; pointer-events:none; }
#bf-state-label {
  font-family:'Arial Narrow',Arial,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:0.22em; color:rgba(180,170,155,0.50); margin-top:5px;
  transition:color .4s; text-align:center; line-height:1;
}
#bf-state-label.on { color:rgba(255,205,80,0.95); }
#bf-sound-txt {
  font-family:'Arial Narrow',Arial,sans-serif; font-size:9px;
  letter-spacing:0.25em; color:rgba(170,155,130,0.40); margin-top:3px;
  text-align:center; transition:color .4s;
}
#bf-sound-txt.on { color:rgba(255,185,55,0.78); }
#bf-popup {
  position:fixed; bottom:108px; right:10px; left:auto;
  width:auto; max-width:calc(100vw - 16px);
  pointer-events:none; opacity:0;
  transform:translateY(6px) scale(0.97);
  transition:opacity .55s ease, transform .55s ease;
  z-index:10000; text-align:right;
  white-space:nowrap; overflow:visible; line-height:1;
}
#bf-popup.show { opacity:1; transform:translateY(0) scale(1); }
.bf-bg {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:130%; height:112%;
  background:radial-gradient(ellipse 100% 100% at 50% 50%,
    rgba(0,0,0,1.00) 0%, rgba(0,0,0,1.00) 40%, rgba(0,0,0,0.98) 58%,
    rgba(0,0,0,0.92) 70%, rgba(0,0,0,0.60) 82%, rgba(0,0,0,0.20) 92%,
    rgba(0,0,0,0) 100%);
  border-radius:50% / 18%; filter:blur(8px); z-index:0; pointer-events:none;
}
#bf-popup .bf-title {
  display:inline-block; position:relative; z-index:1;
  font-family:'Cinzel','EB Garamond','Palatino Linotype',Georgia,serif;
  font-weight:400; font-size:22px;
  transform:scaleX(0.90); transform-origin:right center;
  letter-spacing:0.04em; line-height:1; white-space:nowrap;
  background:radial-gradient(ellipse 120% 90% at 50% 50%,
    #ffffff 0%, #fff8c0 10%, #ffe066 22%, #ffaa00 36%,
    #ff7700 52%, #ff4400 66%, #cc2200 80%, #7a1200 92%, #3d0800 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#FFB830;
  filter:
    drop-shadow(0 0 3px rgba(255,245,120,0.95))
    drop-shadow(0 0 8px rgba(255,160,0,0.85))
    drop-shadow(0 0 18px rgba(220,80,0,0.65))
    drop-shadow(0 0 32px rgba(160,30,0,0.45));
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
#bf-sparks {
  position:fixed; bottom:50px; right:18px;
  width:58px; height:58px; pointer-events:none;
  z-index:10001; overflow:visible;
}
.bf-spark {
  position:absolute;
  left:50%; top:50%;
  width:3px; height:3px;
  border-radius:50%;
  background:radial-gradient(circle, #ffe066 0%, #ff8800 60%, transparent 100%);
  box-shadow:0 0 4px #ffaa30, 0 0 8px rgba(255,140,30,0.6);
  opacity:0;
  transform:translate(-50%,-50%);
  animation-name:bfSparkFly;
  animation-iteration-count:infinite;
  animation-timing-function:ease-out;
  --sx:0px;
  --sy:-40px;
}
@keyframes bfSparkFly {
  0%   { opacity:.95; transform:translate(-50%,-50%) scale(1.1); }
  70%  { opacity:.40; }
  100% { opacity:0; transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(0.25); }
}

/* ─── TOPに戻るボタン ─── */
#to-top-btn {
  position: fixed;
  right: 20px;
  bottom: 150px; /* SOUNDボタン(140px)のさらに上 */
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #1C1C1A;
  border: 1px solid #F5F0E8;
  color: #F5F0E8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
transition: transform 0.2s ease, opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.8s;
}
text-decoration: none;
  
  /* ─── 初期状態は非表示（JSでコントロールするため） ─── */
  opacity: 0;
  visibility: hidden;
}

#to-top-btn:hover {
  transform: scale(1.05);
  border-color: #F4A32B; /* ホバー時はオレンジに */
  color: #F4A32B;
}

/* TOPボタン内の矢印と文字のスタイル */
.to-top-arrow {
  font-size: 16px;
  line-height: 1;
  margin-top: -2px;
  color: #F5F0E8; /* 矢印の色を強制 */
}
#to-top-btn:hover .to-top-arrow {
  color: #F4A32B;
}

.to-top-text {
  font-size: 8px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-top: 2px;
  color: #F5F0E8; /* テキストの色を強制 */
}
#to-top-btn:hover .to-top-text {
  color: #F4A32B;
}

/* ─── スマホ表示（メディアクエリ）での調整 ─── */
/* 既存の @media (max-width: 768px) や 480px の中にある 
   #bf-btn の位置指定（もしあれば）も、必要に応じて bottom を調整してください。
   例えば、予約ボタン（fixed-book-btn）と被らない位置に調整します。 */
@media (max-width: 768px) {
  #bf-btn {
    right: 16px;
    bottom: 90px; /* スマホ用予約ボタン等の上になるよう調整 */
  }
  #to-top-btn {
    right: 16px;
    bottom: 150px;
  }
}

/* EMBER CANVAS */
#ember-canvas { position:fixed; inset:0; pointer-events:none; z-index:8999; }

/* =========================================
   KONAMI EDITOR
========================================= */
#kec-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(10,8,6,0.93);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  z-index:99999; overflow-y:auto; padding:24px 16px 100px;
  box-sizing:border-box;
}
#kec-overlay.open { display:block; }
#kec-panel { max-width:1120px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
#kec-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:18px 24px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10); border-radius:6px;
  flex-wrap:wrap; gap:14px;
}
#kec-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:0.18em; color:#F4A32B; }
#kec-subtitle { font-size:11px; color:rgba(255,255,255,0.35); letter-spacing:0.10em; margin-top:3px; line-height:1.8; }
#kec-header-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
#kec-close-btn {
  background:rgba(232,80,26,0.20);
  border:1px solid rgba(232,80,26,0.45);
  color:rgba(255,255,255,0.80); font-size:12px; letter-spacing:0.08em;
  padding:8px 18px; border-radius:4px; cursor:pointer;
  font-family:inherit; transition:background .2s;
}
#kec-close-btn:hover { background:rgba(232,80,26,0.50); color:white; }
#kec-tabs {
  display:flex; gap:4px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  padding:0 2px; flex-wrap:wrap;
}
.kec-tab {
  padding:10px 20px; font-size:12px; letter-spacing:0.12em;
  color:rgba(255,255,255,0.40); cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
  user-select:none; white-space:nowrap;
}
.kec-tab:hover { color:rgba(255,255,255,0.70); }
.kec-tab.active { color:#F4A32B; border-bottom-color:#E8501A; }
.kec-tabpane { display:none; }
.kec-tabpane.active { display:block; }
.kec-sec-title {
  font-family:'Bebas Neue',sans-serif; font-size:13px; letter-spacing:0.22em;
  color:#F4A32B; margin-bottom:12px;
  padding-left:10px; border-left:3px solid #E8501A;
}
.kec-sync-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; letter-spacing:0.12em; color:rgba(255,255,255,0.38);
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10);
  padding:4px 10px; border-radius:20px;
}
.kec-sync-badge .dot { width:6px; height:6px; border-radius:50%; background:#4caf50; animation:syncPulse 2s ease-in-out infinite; }
@keyframes syncPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(0.7); }
}
#kec-img-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:8px;
}
.kec-img-cell {
  position:relative; aspect-ratio:1; overflow:hidden;
  border:2px solid rgba(255,255,255,0.07); border-radius:4px;
  cursor:pointer; transition:border-color .2s, transform .2s; background:#111;
}
.kec-img-cell:hover { border-color:#F4A32B; transform:scale(1.03); }
.kec-img-cell.selected { border-color:#E8501A; box-shadow:0 0 0 2px #E8501A, 0 0 20px rgba(232,80,26,0.40); }
.kec-img-cell img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.kec-img-cell .kec-cell-badge {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.82));
  padding:14px 4px 4px; font-size:9px; color:rgba(255,255,255,0.65);
  text-align:center; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; letter-spacing:0.04em;
}
.kec-img-cell .kec-select-check {
  position:absolute; top:5px; right:5px;
  width:18px; height:18px; background:#E8501A; border-radius:50%;
  display:none; align-items:center; justify-content:center;
}
.kec-img-cell.selected .kec-select-check { display:flex; }
.kec-img-cell .kec-modified-tag {
  position:absolute; top:5px; left:5px;
  font-size:9px; background:rgba(76,175,80,0.85); color:white;
  padding:2px 6px; border-radius:2px; letter-spacing:0.08em; display:none;
}
.kec-img-cell.modified .kec-modified-tag { display:block; }
#kec-editor {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.08);
  border-radius:6px; padding:22px; display:none;
}
#kec-editor.visible { display:block; }
#kec-editor-inner { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
#kec-preview-wrap { position:relative; background:#0a0808; border-radius:4px; overflow:hidden; aspect-ratio:4/3; }
#kec-preview-img { width:100%; height:100%; object-fit:cover; display:block; transition:filter .12s; }
#kec-controls { display:flex; flex-direction:column; gap:14px; }
.kec-ctrl-row { display:flex; flex-direction:column; gap:5px; }
.kec-ctrl-label {
  font-size:10px; color:rgba(255,255,255,0.40);
  letter-spacing:0.14em;
  display:flex; justify-content:space-between; align-items:center;
}
.kec-ctrl-label span.kec-val {
  color:#F4A32B; font-family:'Bebas Neue',sans-serif;
  font-size:13px; letter-spacing:0.06em; min-width:40px; text-align:right;
}
.kec-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.12); outline:none; cursor:pointer;
}
.kec-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:#E8501A; cursor:pointer;
  box-shadow:0 0 5px rgba(232,80,26,0.55); transition:transform .12s;
}
.kec-slider::-webkit-slider-thumb:hover { transform:scale(1.25); }
.kec-slider::-moz-range-thumb {
  width:15px; height:15px; border-radius:50%;
  background:#E8501A; cursor:pointer; border:none;
}
.kec-divider { height:1px; background:rgba(255,255,255,0.07); margin:2px 0; }
#kec-url-input {
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  color:white; padding:9px 11px; font-size:11px;
  border-radius:3px; font-family:monospace; outline:none;
  transition:border-color .2s;
}
#kec-url-input:focus { border-color:#F4A32B; }
#kec-url-input::placeholder { color:rgba(255,255,255,0.20); }
#kec-selected-info {
  font-size:11px; color:rgba(255,255,255,0.32);
  letter-spacing:0.05em; padding:8px 12px;
  background:rgba(255,255,255,0.025); border-radius:3px;
  min-height:28px; display:flex; align-items:center;
  word-break:break-all; line-height:1.5;
}
.kec-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.kec-btn {
  padding:8px 16px; font-size:11px; letter-spacing:0.08em;
  border-radius:3px; cursor:pointer; font-family:inherit; border:none;
  transition:opacity .2s, transform .12s; white-space:nowrap;
}
.kec-btn:hover { opacity:.82; transform:translateY(-1px); }
.kec-btn.primary   { background:#E8501A; color:white; font-weight:700; }
.kec-btn.secondary { background:rgba(255,255,255,0.09); color:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.16); }
.kec-btn.success   { background:rgba(76,175,80,0.25); color:#81c784; border:1px solid rgba(76,175,80,0.35); }
.kec-btn.danger    { background:rgba(180,30,30,0.30); color:rgba(255,120,120,0.88); border:1px solid rgba(180,60,60,0.30); }
.kec-btn.warning   { background:rgba(255,193,7,0.20); color:#ffd54f; border:1px solid rgba(255,193,7,0.30); }
#kec-copy-area {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.08);
  border-radius:6px; padding:20px 22px;
}
#kec-css-output {
  width:100%; box-sizing:border-box;
  background:rgba(0,0,0,0.40); border:1px solid rgba(255,255,255,0.09);
  color:rgba(255,255,255,0.72); padding:12px 14px;
  font-size:11px; font-family:'Courier New',monospace;
  border-radius:3px; resize:vertical; min-height:90px;
  outline:none; line-height:1.85; margin-top:10px;
}

/* PDF管理 */
#kec-pdf-area { display:flex; flex-direction:column; gap:18px; }
.kec-pdf-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.09);
  border-radius:5px; padding:20px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.kec-pdf-title { font-size:13px; color:white; font-weight:500; letter-spacing:0.06em; }
.kec-pdf-desc { font-size:11px; color:rgba(255,255,255,0.38); line-height:1.7; }
.kec-pdf-current { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kec-pdf-current a { color:#F4A32B; font-size:12px; text-decoration:none; letter-spacing:0.05em; }
.kec-pdf-current a:hover { text-decoration:underline; }
.kec-pdf-status { font-size:10px; letter-spacing:0.10em; padding:3px 9px; border-radius:2px; }
.kec-pdf-status.set  { background:rgba(76,175,80,0.20); color:#81c784; }
.kec-pdf-status.none { background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.30); }
.kec-file-drop {
  border:2px dashed rgba(255,255,255,0.15); border-radius:5px;
  padding:24px 20px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s; position:relative;
}
.kec-file-drop:hover, .kec-file-drop.dragover {
  border-color:#F4A32B; background:rgba(244,163,43,0.06);
}
.kec-file-drop input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer;
  width:100%; height:100%;
}
.kec-file-drop .drop-icon { font-size:28px; margin-bottom:6px; display:block; }
.kec-file-drop .drop-text { font-size:12px; color:rgba(255,255,255,0.40); line-height:1.8; letter-spacing:0.06em; }
.kec-file-drop .drop-text strong { color:rgba(255,255,255,0.65); }
.kec-pdf-actions { display:flex; gap:8px; flex-wrap:wrap; }
.kec-pdf-size-warn {
  font-size:10px; color:rgba(255,193,7,0.70); letter-spacing:0.06em;
  padding:6px 10px; background:rgba(255,193,7,0.08);
  border-radius:3px; display:none;
}

/* アップロードゾーン（タブ内） */
.kec-drop-zone {
  border:2px dashed rgba(255,255,255,0.18); border-radius:5px;
  padding:28px 20px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s; position:relative;
}
.kec-drop-zone:hover, .kec-drop-zone.dragover {
  border-color:#F4A32B; background:rgba(244,163,43,0.05);
}
.kec-drop-zone input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.kec-drop-zone p {
  font-size:12px; color:rgba(255,255,255,0.40);
  margin-top:8px; letter-spacing:0.06em; line-height:1.7;
}
.kec-drop-zone .drop-icon { font-size:32px; }

/* サーバーライブラリ */
#kec-lib-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:6px; max-height:260px; overflow-y:auto; margin-top:8px;
}
.kec-lib-cell {
  position:relative; aspect-ratio:1; overflow:hidden;
  border:2px solid rgba(255,255,255,0.07); border-radius:3px;
  cursor:pointer; transition:border-color .2s;
}
.kec-lib-cell:hover { border-color:#F4A32B; }
.kec-lib-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.kec-lib-cell .kec-lib-del {
  position:absolute; top:2px; right:2px;
  width:18px; height:18px; background:rgba(200,30,30,0.80);
  border:none; border-radius:50%; color:white; font-size:11px;
  cursor:pointer; display:none;
  align-items:center; justify-content:center; line-height:1;
}
.kec-lib-cell:hover .kec-lib-del { display:flex; }
.kec-lib-pdf {
  background:rgba(255,255,255,0.04);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; font-size:9px; color:rgba(255,255,255,0.50);
  letter-spacing:0.06em; text-align:center; padding:4px;
}

/* テキストエディター */
#kec-txt-list {
  display:flex; flex-direction:column; gap:4px;
  max-height:380px; overflow-y:auto; padding-right:4px;
}
.kec-txt-item {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:3px; padding:10px 14px; cursor:pointer;
  transition:background .2s, border-color .2s; position:relative;
}
.kec-txt-item:hover { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.14); }
.kec-txt-item.selected { background:rgba(232,80,26,0.12); border-color:rgba(232,80,26,0.45); }
.kec-txt-item.modified { border-left:3px solid var(--ember); }
.kec-txt-tag {
  flex-shrink:0; background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.45); font-size:9px;
  letter-spacing:0.15em; padding:2px 7px; border-radius:2px;
  margin-top:2px; font-family:monospace; min-width:32px; text-align:center;
}
.kec-txt-tag.tag-h1  { background:rgba(232,80,26,0.3);  color:#ff8a65; }
.kec-txt-tag.tag-h2  { background:rgba(244,163,43,0.3); color:#ffcc80; }
.kec-txt-tag.tag-h3  { background:rgba(91,138,95,0.3);  color:#a5d6a7; }
.kec-txt-tag.tag-p   { background:rgba(107,127,160,0.3);color:#90caf9; }
.kec-txt-tag.tag-btn { background:rgba(139,110,139,0.3);color:#ce93d8; }
.kec-txt-content {
  flex:1; font-size:12px; color:rgba(255,255,255,0.60);
  line-height:1.6; word-break:break-all; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.kec-txt-content.modified-text { color:var(--ember); }
.kec-txt-modified-badge {
  position:absolute; top:6px; right:8px;
  font-size:9px; background:rgba(244,163,43,0.2);
  color:var(--ember); padding:2px 6px; border-radius:2px; letter-spacing:0.10em;
}
.kec-txt-filter-btn {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.45); font-size:10px; letter-spacing:0.10em;
  padding:4px 12px; border-radius:2px; cursor:pointer;
  font-family:inherit; transition:all .2s;
}
.kec-txt-filter-btn:hover { background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.75); }
.kec-txt-filter-btn.active {
  background:rgba(232,80,26,0.25); border-color:rgba(232,80,26,0.55);
  color:var(--ember);
}

/* ライブラリピッカー */
.kec-lib-picker-cell {
  position:relative; aspect-ratio:1; overflow:hidden;
  border-radius:3px; cursor:pointer;
  border:2px solid transparent;
  transition:border-color .2s, transform .15s;
  background:rgba(0,0,0,0.3);
}
.kec-lib-picker-cell:hover { border-color:rgba(255,255,255,0.4); transform:scale(1.04); }
.kec-lib-picker-cell.selected { border-color:var(--ember); box-shadow:0 0 0 1px var(--ember); }
.kec-lib-picker-cell img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.kec-lib-picker-cell .kec-pic-check {
  position:absolute; top:4px; right:4px;
  width:18px; height:18px; background:var(--ember);
  border-radius:50%; display:none;
  align-items:center; justify-content:center;
}
.kec-lib-picker-cell.selected .kec-pic-check { display:flex; }
.kec-lib-picker-cell .kec-pic-name {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(0,0,0,0.72); font-size:8px; color:rgba(255,255,255,0.65);
  padding:3px 5px; letter-spacing:0.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity .2s;
}
.kec-lib-picker-cell:hover .kec-pic-name,
.kec-lib-picker-cell.selected .kec-pic-name { opacity:1; }
#kec-lib-compare { display:none; }
#kec-lib-compare.show { display:flex !important; }

/* TOAST */
#kec-toast {
  position:fixed; bottom:40px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(20,18,14,0.97);
  border:1px solid rgba(244,163,43,0.38);
  color:#F4A32B; font-size:12px; letter-spacing:0.10em;
  padding:11px 22px; border-radius:3px;
  opacity:0; pointer-events:none;
  transition:opacity .28s, transform .28s;
  z-index:100001; white-space:nowrap; max-width:90vw;
}
#kec-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* 認証モーダル */
#kec-auth-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.88); z-index:100003;
  align-items:center; justify-content:center; padding:20px;
}
#kec-auth-modal.open { display:flex; }
#kec-auth-box {
  background:#1a1814; border:1px solid rgba(255,255,255,0.12);
  border-radius:6px; width:100%; max-width:360px;
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
#kec-auth-title {
  font-family:'Bebas Neue',sans-serif; font-size:18px;
  letter-spacing:0.18em; color:#F4A32B; text-align:center;
}
#kec-auth-input {
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  color:white; padding:12px 14px; font-size:14px;
  border-radius:3px; outline:none; font-family:inherit;
  letter-spacing:0.08em; transition:border-color .2s;
}
#kec-auth-input:focus { border-color:#F4A32B; }
#kec-auth-msg { font-size:12px; min-height:18px; text-align:center; letter-spacing:0.06em; }
#kec-auth-msg.err { color:#e57373; }
#kec-auth-msg.ok  { color:#81c784; }

/* =========================================
   HERO YOUTUBE — 2枚横並び
========================================= */
.hero-yt-wrap--multi {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.hero-yt-wrap--multi .hero-yt {
  flex:1 1 160px;
  min-width:140px;
  max-width:220px;
}

/* =========================================
   CONTACT — 迷惑メール注釈・任意ラベル
========================================= */
.contact-spam-note {
  margin:12px 0 20px;
  padding:10px 14px;
  font-size:0.78rem;
  line-height:1.7;
  color:rgba(255,255,255,0.55);
  border-left:2px solid rgba(232,80,26,0.5);
  background:rgba(232,80,26,0.06);
  border-radius:0 4px 4px 0;
}
.contact-spam-note strong {
  color:rgba(255,255,255,0.8);
  font-weight:600;
}
/* 任意ラベル */
.opt {
  font-size:0.75em;
  font-weight:400;
  color:rgba(255,255,255,0.4);
  margin-left:4px;
}

/* =========================================
   RESPONSIVE — ブレークポイント別に統合
========================================= */

/* 600px 以上では sp-only を隠す */
@media (min-width:600px) {
  .sp-only { display:none; }
}

/* TABLET (1024px) */
@media (max-width:1024px) {
  .hero { height:auto; min-height:600px; }
  .concept-layout { grid-template-columns:1fr; gap:24px; }
  .concept-img { aspect-ratio:16/9; max-height:300px; }
  .bbq-layout { grid-template-columns:1fr; gap:24px; }
  .bbq-img { display:none; }
  .sites-grid { grid-template-columns:repeat(2,1fr); }
  .nearby-grid { grid-template-columns:repeat(3,1fr); }
  .lead { font-size:13px; line-height:1.8; }
}

/* MOBILE (768px) */
@media (max-width:768px) {
  .lang-bar { top:12px; right:16px; gap:4px; flex-wrap:nowrap; }
  .lang-bar a { font-size:11px; padding:5px 9px; }
  .hero { min-height:0; padding-bottom:0; }
  .hero h1 { font-size:clamp(40px,11vw,72px); }
  .hero-logo { top:54px; right:16px; }
  .hero-logo img { width:130px; }
  .hero-content { padding:140px 20px 40px; }
  .hero-yt { width:160px; }
  .photo-strip img { height:140px; }
  .concept-img { display:none; }
  .sites-grid { grid-template-columns:1fr; gap:40px; }
  .site-sub-imgs img { height:56px; }
  .steps { grid-template-columns:1fr; gap:32px; justify-items:center; }
  .step {
    display:flex; flex-direction:column; align-items:center;
    text-align:center; width:100%; max-width:320px;
    padding:0 16px; box-sizing:border-box;
  }
  .step p { text-align:center; word-break:break-all; overflow-wrap:anywhere; }
  .steps::before { display:none; }
  .access-grid { grid-template-columns:1fr; gap:32px; }
  .entrance-grid { grid-template-columns:1fr; gap:24px; }
  .facilities-grid { grid-template-columns:repeat(2,1fr); }
  .nearby-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:1fr; }
  .faq-list { margin-top:32px; }
  .insta-grid { grid-template-columns:repeat(3,1fr); }
  .insta-cell:nth-child(n+4) { display:none; }
  section { padding:56px 0; }
  .container { padding:0 20px; }
  .fcta h2 { font-size:clamp(28px,8vw,48px); }
  #fixed-book-btn,
  .fixed-book-btn { font-size:10px; padding:12px 8px; bottom:230px; }
	  .reviews-more-wrap {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;            /* ボタン同士の間隔 */
  }
  .reviews-more {
    width:100%;
    max-width:280px;     /* ボタンの幅をそろえる */
    justify-content:center;
    box-sizing:border-box;
  }
}

/* SMALL MOBILE (480px) */
@media (max-width:480px) {
  .hero h1 { font-size:clamp(36px,12vw,60px); }
  .nearby-grid { grid-template-columns:1fr; }
  .facilities-grid { grid-template-columns:1fr; }
  .site-sub-imgs img { height:48px; }
  .lang-bar a { font-size:9px; padding:2px 5px; }
  .step-cta-btn,
  .step-cta .btn-fire { font-size:14px; padding:14px 28px; }
  #kec-img-grid { grid-template-columns:repeat(3,1fr); }
  #kec-header { padding:12px 16px; }
  .kec-tab { padding:8px 12px; font-size:11px; }
  .hero-yt-wrap--multi .hero-yt {
    flex:1 1 calc(50% - 5px);
    max-width:none;
  }
}

/* SITES EDITOR INNER GRID（小画面で縦並び） */
@media (max-width:680px) {
  #kec-editor-inner { grid-template-columns:1fr; }
}

/* ==========================================================
   【完全解決】スマホ版「出張BBQ」画像強制表示リセット
   ========================================================== */
@media (max-width: 768px) {

  /* 1. アニメーション（reveal）のバグで透明のまま固まるのを強制解除 */
  section.catering,
  .catering-grid,
  .catering-visual,
  .catering-img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* 2. グリッドレイアウトを解除して縦並びにする */
  section.catering .catering-grid {
    display: flex !important;
    flex-direction: column-reverse !important; /* スマホでは画像が下、テキストが上 */
    gap: 24px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 3. PC版の絶対配置(absolute)を完全に打ち消し、スマホ用の高さを確保 */
  section.catering .catering-visual,
  .catering-visual {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 250px !important; /* スマホでの画像の高さ */
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* 4. 画像自体のサイズを最大化 */
  section.catering .catering-img,
  .catering-img,
  .catering-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* 480px以下の小さなスマホでの表示微調整 */
@media (max-width: 480px) {
  section.catering .catering-visual,
  .catering-visual {
    height: 220px !important; /* 小さ目のスマホ用に高さを220pxに調整 */
  }
}

/* ==========================================================
   【完全版】スマホ版画像表示修正（閉じカッコを厳密に管理）
   ========================================================== */

@media (max-width: 768px) {
  
  /* --- Concept (About) セクションの修正 --- */
  .concept-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .concept-img {
    display: block !important;
    width: 100% !important;
    height: 250px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .concept-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important; /* アニメーションの透明化を解除 */
  }

  /* --- MENU (BBQ) セクションの修正 --- */
  .bbq-layout {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 24px !important;
  }
  .bbq-img {
    display: block !important;
    width: 100% !important;
    height: 250px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .bbq-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important; /* アニメーションの透明化を解除 */
  }
} /* ここでメディアクエリを確実に閉じる */