/*
Theme Name: Bronco Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: A custom WordPress theme that implements the BRONCO one‑page design. The theme
             turns the static HTML into a dynamic CMS, allowing the news section to be updated via
             WordPress posts and providing separate pages for the food and drink menus. This file
             contains the primary styles used throughout the site. If you need to make further
             adjustments, create a child theme or override styles in the customizer.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bronco
*/

/* =========================================================
   BRONCO - CSS 改訂版（整理 / 堅実性UP）
   ✅ 見出し：MENU基準で全セクション統一（.main-title）
   ✅ ABOUT：左カード＋右ポスター枠 / SPは写真上オーバーレイ
   ✅ ABOUT↔NEWS 間の“変な影”を完全撤去（world-fade / news fog 無効化）
   ✅ タイポ修正：rradial-gradient → radial-gradient
   ✅ 未定義変数対策：--accent-hot を追加
========================================================= */

/* ===== TOKENS ===== */
:root{
  /* ===== RED NIGHTMARE ===== */
  --bg0: #050004;
  --bg1: #090006;

  --ink: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --thin: rgba(255,255,255,0.10);
  --thin2: rgba(255,255,255,0.06);

  --red: #ff003c;
  --dark-red: rgba(255,0,60,0.25);
  --gold: #d6b46a;

  --font-western: "Sancreek", "Rye", system-ui;
  --font-condensed: "Roboto Condensed", "Bebas Neue", system-ui;
  --font-type: "Zen Kaku Gothic New", system-ui;
  --font-serif: "Shippori Mincho B1","Zen Old Mincho", serif;
  --font-impact: "Bebas Neue","Roboto Condensed", system-ui;

  --radius: 18px;
  --shadow: 0 22px 60px rgba(0,0,0,0.75);
  --max: 1120px;

  /* background tuning */
  --world-overlay: rgba(0,0,0,0.62);
  --world-vignette: rgba(0,0,0,0.78);

  /* safety */
  --accent-hot: var(--red);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color: var(--ink);
  font-family: var(--font-type);
  overflow-x:hidden;

  /* ✅ HERO〜ABOUTは黒世界維持 */
  background:
    radial-gradient(1200px 800px at 70% 10%, rgba(255,0,60,0.18), transparent 60%),
    radial-gradient(900px 700px at 10% 40%, rgba(0,180,255,0.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.layer{ position:relative; }

/* =========================================================
   NAV
========================================================= */
.topnav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.28));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.nav-brand{
  font-family: var(--font-western);
  letter-spacing: 0.08em;
  color: var(--red);
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255,0,60,0.35);
  font-size: 1.4rem;
  line-height:1;
  white-space:nowrap;
}
.nav-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
}
.nav-links{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav-links a{
  font-family: var(--font-condensed);
  letter-spacing: 0.14em;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
}
.nav-links a:hover{
  border-color: rgba(255,0,60,0.55);
  color: var(--red);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.nav-ig{
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
}
.nav-ig:hover{
  border-color: rgba(255,0,60,0.55);
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 32px rgba(255,0,60,0.22);
}
.nav-ig svg{ width: 20px; height: 20px; fill: rgba(255,255,255,0.88); }
.nav-ig:hover svg{ fill: var(--red); }

.nav-reserve{
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 14px;
  border-radius: 0;
  border: none;
  background: var(--red);
  color:#000;
  font-family: var(--font-impact);
  letter-spacing: 0.14em;
  box-shadow: 0 0 26px rgba(255,0,60,0.22);
  white-space:nowrap;
}
.nav-reserve:hover{
  filter: brightness(1.06);
  box-shadow: 0 0 44px rgba(255,0,60,0.35);
  transform: translateY(-1px);
}

/* =========================================================
   SECTION COMMON
========================================================= */
.section-wrap{ padding: 86px 0 92px; }
.main-container{
  width:100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
}

.section-hero{
  margin-bottom: 26px;
  position:relative;
  z-index: 2;
}
.section-hero-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
}

/* ✅ 見出し：MENU基準で全セクション統一 */
.main-title{
  font-family: var(--font-western);
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
  text-shadow: 4px 4px 0 #000, 0 0 30px rgba(255,0,60,0.4);
  margin: 0;
}
.kicker{
  font-family: var(--font-condensed);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.28em;
  font-size: 0.8rem;
  margin-top: 10px;
}

/* =========================================================
   HERO
========================================================= */
.hero-bg{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 120px 0 60px;
  position:relative;
  z-index: 3;
}
.hero-grid{
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6vw;
  display:grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items:center;
}
@media (min-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr 0.92fr;
    gap: 34px;
  }
}

.poster-container{
  position:relative;
  padding: 18px;
  transform: rotate(-2deg);
}
.poster-container::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 1px,
      transparent 2px,
      transparent 6px
    ),
    linear-gradient(180deg, #3b1f12, #2a140c);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.4),
    inset 0 8px 20px rgba(0,0,0,0.45),
    0 28px 70px rgba(0,0,0,0.85);
  filter: saturate(1.1) contrast(1.05);
}
.poster-img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  filter: brightness(0.92) contrast(1.05);
  box-shadow: 0 30px 60px rgba(0,0,0,0.95);
  border-radius: 6px;
}

.hero-info{
  position:relative;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 28px;
  backdrop-filter: blur(6px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.85);
}
@media (min-width: 900px){
  .hero-info{ padding: 34px; }
}

.hero-brand{
  font-family: var(--font-western);
  font-size: 3rem;
  line-height: 1;
  color: var(--red);
  text-shadow: 4px 4px 0 #000, 0 0 30px rgba(255,0,60,0.35);
  margin: 0 0 8px;
}
.hero-catch{
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: rgba(255,255,255,0.92);
  line-height: 2;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(255,0,60,0.22);
  padding-bottom: 16px;
}
.info-list{
  list-style:none;
  padding:0;
  margin: 0 0 18px;
  font-family: var(--font-condensed);
  color: rgba(255,255,255,0.82);
  line-height: 2.1;
}
.info-list li{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  padding: 6px 0;
}
.info-list span:first-child{
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space:nowrap;
}

.hero-cta{
  display:flex;
  gap: 12px;
  margin-top: 12px;
}
.btn{
  flex: 1;
  padding: 16px 14px;
  text-align:center;
  font-family: var(--font-impact);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, color .18s ease, border-color .18s ease;
  user-select:none;
}
.btn-primary{
  background: var(--red);
  color:#000;
  border: none;
  box-shadow: 0 0 26px rgba(255,0,60,0.30);
}
.btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 0 40px rgba(255,0,60,0.40);
}
.btn-secondary{
  background: transparent;
  color: rgba(255,255,255,0.92);
}
.btn-secondary:hover{
  color: var(--red);
  border-color: rgba(255,0,60,0.55);
  transform: translateY(-1px);
}

/* =========================================================
   ✅ 固定背景：NEWS以降だけ broncoh.png
========================================================= */
.world-wrap{
  position: relative;
  z-index: auto;
}
.world-wrap::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -999;
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)),
    url("broncoh.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translateZ(0);
  will-change: transform;
}
.world-wrap::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: -998;
  pointer-events:none;

  background:
    radial-gradient(1000px 700px at 50% 5%, rgba(0,0,0,0.22), transparent 60%),
    radial-gradient(1200px 900px at 30% 40%, rgba(0,180,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
}

/* ✅ ABOUT↔NEWS間の“変な影”は完全撤去 */
.world-fade{ display:none !important; }

/* world-section 霞（赤）を弱める */
.world-section{ position: relative; }
.world-section::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 80% 10%, rgba(255,0,60,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.28));
  opacity: 0.50;
  z-index: 0;
}
.world-section > *{ position: relative; z-index: 1; }

/* =========================================================
   ABOUT（安定化）
========================================================= */
#about-wrap{ position: relative; z-index: 5; }

.about-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
  }
}

/* 左：カード */
.about-box{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    linear-gradient(90deg, rgba(20,0,5,0.90), rgba(10,10,10,0.82));
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--red);
  box-shadow: var(--shadow);
  padding: 26px 20px;
  position: relative;
  overflow:hidden;
}
.about-box::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 500px at 10% 0%, rgba(255,0,60,0.18), transparent 55%),
    radial-gradient(900px 600px at 90% 60%, rgba(0,180,255,0.10), transparent 60%);
  opacity: 0.40;
  pointer-events:none;
  z-index:0;
}
.about-box > *{ position:relative; z-index:1; }

/* ABOUT内の追加要素（あなたのHTMLに合わせて補完） */
.about-lead-k{
  font-family: var(--font-condensed);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.62);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.about-lead-h{
  font-family: var(--font-serif);
  color: rgba(255,255,255,0.92);
  margin: 0 0 10px;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.about-lead-t{
  font-family: var(--font-serif);
  line-height: 2;
  color: rgba(255,255,255,0.74);
  margin:0;
}

/* NOTE */
.about-note{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,0,60,0.10), rgba(0,0,0,0.18));
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.note-k{
  font-family: var(--font-impact);
  letter-spacing: 0.18em;
  color: var(--red);
  text-shadow: 2px 2px 0 #000;
  white-space:nowrap;
  padding-top: 2px;
}
.note-t{
  margin:0;
  color: rgba(255,255,255,0.70);
  font-family: var(--font-serif);
  line-height: 1.8;
}

/* 右：ポスター（枠＜写真に見える） */
.about-visual{ position: relative; }

.about-poster{
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 4px),
    linear-gradient(180deg, rgba(0,0,0,0.44), rgba(0,0,0,0.18));
  box-shadow: 0 28px 80px rgba(0,0,0,0.85);
  overflow: hidden;
  padding: 18px;
  transform: rotate(-1.2deg);
}

.about-media{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.65);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ✅ パララックス用：写真は枠より大きく（上下に逃げ） */
.about-parallax{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 140%;
  object-fit: cover;
  transform: translate3d(-50%, -55%, 0);
  filter: brightness(0.86) contrast(1.18) saturate(0.92);
  will-change: transform;
  backface-visibility: hidden;
  transform-style: flat; /* preserve-3d が悪さする端末対策 */
  z-index: 2;
}

/* 空気（霞/ビネット） */
.about-poster::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(255,0,60,0.22), transparent 60%),
    radial-gradient(1100px 900px at 60% 90%, rgba(0,0,0,0.72), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.48));
  z-index: 0;
}

/* 素材感（スキャンライン） */
.about-poster::after{
  content:"";
  position:absolute;
  inset:-10px;
  pointer-events:none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 2px,
      transparent 7px
    );
  mix-blend-mode: overlay;
  opacity: 0.22;
}

/* キャプション */
.about-cap{
  position:absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  background: rgba(0,0,0,0.58);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.75);
}
.cap-no{
  font-family: var(--font-condensed);
  letter-spacing: .22em;
  color: rgba(255,255,255,0.62);
  font-size: .78rem;
}
.cap-text{
  font-family: var(--font-impact);
  letter-spacing: .14em;
  color: var(--red);
  text-shadow: 2px 2px 0 #000;
  font-size: .9rem;
}

/* ✅ SP/タブレット：写真の上にカードをオーバーレイ */
@media (max-width: 1024px){
  .about-visual{ order: 1; }
  .about-box{ order: 2; }

  .about-visual{ position: relative; } /* ←absoluteの迷子防止 */

  .about-visual{
    min-height: clamp(560px, 74vh, 820px);
  }
  .about-poster {
    transform: none;
    padding: 0;
    border-radius: 16px;

    /* ▼▼▼ ここから追記（3行） ▼▼▼ */
    position: absolute; /* 親(about-visual)の領域に合わせて絶対配置 */
    inset: 0;           /* 上下左右ピッタリ張り付かせる */
    height: 100%;       /* 高さを強制確保 */
    /* ▲▲▲ ここまで追記 ▲▲▲ */
  }
  .about-media{
    height: 100%;
    aspect-ratio: auto;
    border: none;
    box-shadow: none;
  }
  .about-box{
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 10;

    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.38) 18%,
      rgba(0,0,0,0.72) 55%,
      rgba(0,0,0,0.86) 100%
    );
    border: 1px solid rgba(255,255,255,0.14);
    border-left: 2px solid rgba(255,0,60,0.75);
    box-shadow: 0 22px 60px rgba(0,0,0,0.78);
    backdrop-filter: blur(10px);
    padding: 16px 14px;
  }

  .about-lead-h{ font-size: 1.1rem; }
  .about-lead-t{
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.86);
  }

  .about-note{
    margin-top: 10px;
    padding: 10px 10px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .note-k{ font-size: 0.82rem; }
  .note-t{
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.78);
  }

  .about-cap{ opacity: 0.90; }
}
@media (max-width: 520px){
  .about-visual{
    min-height: clamp(520px, 78vh, 760px);
  }
}

/* =========================================================
   ✅ NEWS（余計なフォグ/影を完全停止）
========================================================= */
#news-wrap{ position: relative; z-index: 2; }
#news-wrap::before,
#news-wrap::after{
  content: none !important;
  display: none !important;
}

.news-shell{
  max-width: 960px;
  margin: 0 auto;
  padding: 42px 20px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, rgba(20,0,5,0.90), rgba(10,10,10,0.82));
  border-left: 3px solid var(--red);
  box-shadow: 0 0 30px rgba(0,0,0,0.55);
  position: relative;
  z-index: 2;
}
.news-label{
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.4);
  display:block;
  margin-bottom: 18px;
}
.news-item{
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.news-item:last-child{ border-bottom:none; }
.news-date{
  font-family: var(--font-condensed);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.14em;
  font-size: 0.9rem;
}
.news-title{
  margin: 6px 0 0;
  font-family: var(--font-serif);
  color: rgba(255,255,255,0.9);
  font-size: 1.05rem;
  line-height: 1.8;
}

/* =========================================================
   MENU（既存維持）
========================================================= */
.menu-mega{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 42px 20px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, rgba(20,0,5,0.90), rgba(10,10,10,0.82));
  border-left: 3px solid var(--red);
  box-shadow: 0 0 30px rgba(0,0,0,0.55);
  position: relative;
  z-index: 2;
}
.menu-label{
  font-family: var(--font-type);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.4);
  display: block;
  margin-bottom: 22px;
}
.menu-section{ margin: 0 0 92px; }
.menu-section:last-child{ margin-bottom: 0; }

.section-head{
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.section-title{
  font-family: var(--font-condensed);
  letter-spacing: 0.18em;
  margin: 0 0 6px;
  color: rgba(255,255,255,0.92);
  font-size: 1.35rem;
}
.section-desc{
  margin:0;
  color: rgba(255,255,255,0.62);
  font-family: var(--font-serif);
  line-height: 1.9;
}

.menu-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}
.menu-item{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.12));
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  position: relative;
  z-index: 2;
}
@media (min-width: 860px){
  .menu-item{
    grid-template-columns: 0.95fr 1.05fr;
    gap: 18px;
    align-items:center;
  }
}
.menu-visual .frame{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.65);
  overflow:hidden;
}
.imgbox{
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background: rgba(255,255,255,0.02);
}
.imgbox img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.08);
  transform: scale(1.02);
}

.menu-info .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
}
.menu-info .cat{
  font-family: var(--font-condensed);
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.62);
  font-size: 0.95rem;
}
.menu-info .no{
  font-family: var(--font-condensed);
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.14em;
  font-size: 0.95rem;
}
.dish{
  margin: 0 0 6px;
  font-family: var(--font-serif);
  color: rgba(255,255,255,0.92);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}
.desc{
  margin: 0 0 12px;
  color: rgba(255,255,255,0.68);
  line-height: 1.9;
  font-family: var(--font-serif);
}
.price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
.tag{
  font-family: var(--font-condensed);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
}
.price{
  font-family: var(--font-condensed);
  color: var(--red);
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255,0,60,0.25);
  white-space:nowrap;
}

.section-footer{
  margin-top: 18px;
  text-align:center;
}
.btn-more{
  display:inline-block;
  padding: 12px 16px;
  border: none;
  background: var(--red);
  color:#000;
  font-family: var(--font-impact);
  letter-spacing: 0.14em;
  box-shadow: 0 0 26px rgba(255,0,60,0.22);
}
.btn-more:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 0 44px rgba(255,0,60,0.35);
}

/* =========================================================
   ACCESS
========================================================= */
.access-shell{
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.access-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  position: relative;
  z-index: 2;
}
@media (min-width: 980px){
  .access-grid{
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    align-items:stretch;
  }
}

.map-frame .frame{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  background: rgba(0,0,0,0.35);
  position: relative;
  z-index: 2;
}
.map-embed{
  width:100%;
  height: 420px;
  border:0;
  filter: saturate(0.95) contrast(1.05);
}
@media (min-width: 980px){
  .map-embed{ height: 520px; }
}

.access-panel{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.20));
  padding: 18px 16px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.access-kicker{
  font-family: var(--font-condensed);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
}
.access-title{
  font-family: var(--font-western);
  color: var(--red);
  text-shadow: 4px 4px 0 #000, 0 0 26px rgba(255,0,60,0.30);
  font-size: 2.2rem;
  margin: 8px 0 12px;
  line-height: 1;
}
.access-lines{
  color: rgba(255,255,255,0.74);
  font-family: var(--font-serif);
  line-height: 2;
  font-size: 1rem;
}
.access-lines b{ color: rgba(255,255,255,0.92); }

.btn-direction{
  margin-top: 16px;
  display:block;
  text-align:center;
  padding: 14px 12px;
  background: var(--red);
  color:#000;
  font-family: var(--font-impact);
  letter-spacing: 0.14em;
  box-shadow: 0 0 26px rgba(255,0,60,0.28);
}
.btn-direction:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 38px rgba(255,0,60,0.38);
  transform: translateY(-1px);
}

/* =========================================================
   FAQ
========================================================= */
.faq-area{
  margin-top: 60px;
  border-top: 1px solid rgba(255,0,60,0.28);
  padding-top: 38px;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.faq-h{
  font-family: var(--font-type);
  color: var(--red);
  margin-bottom: 18px;
  text-align: center;
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  opacity: 0.95;
}
.faq-area details{
  margin-bottom: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 4px),
    linear-gradient(180deg, rgba(20,0,6,0.92), rgba(6,0,2,0.88));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.faq-area summary{
  padding: 16px 16px;
  cursor: pointer;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-condensed);
  letter-spacing: 0.08em;
  list-style: none;
  position: relative;
}
.faq-area summary::-webkit-details-marker{ display:none; }
.faq-area summary::after{
  content:"+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-weight: 900;
}
.faq-area details[open] summary::after{ content:"-"; }
.faq-area .ans{
  padding: 14px 16px 18px;
  color: rgba(255,255,255,0.70);
  font-family: var(--font-serif);
  border-top: 1px solid rgba(255,255,255,0.08);
  line-height: 1.8;
}

/* =========================================================
   FOOTER
========================================================= */
footer{
  padding: 44px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
  position: relative;
  z-index: 2;
}
.foot{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-condensed);
  letter-spacing: 0.14em;
}

/* =========================================================
   Buttons / scroll glow（堅実）
========================================================= */
.btn,
.btn-more,
.nav-links a,
.btn-direction,
.nav-reserve,
.nav-ig{
  position: relative;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}

body.is-scrolling .btn-primary,
body.is-scrolling .btn-direction,
body.is-scrolling .bottom-tab{
  box-shadow: 0 0 0 1px rgba(255,0,60,0.18), 0 0 36px rgba(255,0,60,0.16);
  filter: brightness(1.02);
}

/* =========================================================
   SP: burger + drawer
========================================================= */
.nav-links--pc{ display:flex; }
.nav-actions--pc{ display:flex; }

.nav-burger{
  display:none;
  width:44px;
  height:44px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  cursor:pointer;
  padding: 10px;
}
.nav-burger span{
  display:block;
  height:2px;
  margin: 6px 0;
  background: rgba(255,255,255,0.85);
}
@media (max-width: 860px){
  .nav-links--pc{ display:none; }
  .nav-actions--pc{ display:none; }
  .nav-burger{ display:block; }
}

/* Drawer */
.drawer{ position: fixed; inset: 0; z-index: 80; pointer-events:none; }
.drawer.is-open{ pointer-events:auto; }

.drawer__bg{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(8px);
  opacity:0;
  transition: opacity .22s ease;
}
.drawer.is-open .drawer__bg{ opacity:1; }

.drawer__panel{
  position:absolute;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 4px),
    linear-gradient(180deg, rgba(20,0,6,0.94), rgba(6,0,2,0.92));
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -30px 0 80px rgba(0,0,0,0.78);
  transform: translateX(104%);
  transition: transform .26s ease;
  padding: 16px 16px 22px;
}
.drawer.is-open .drawer__panel{ transform: translateX(0%); }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 6px 14px;
  border-bottom: 1px solid rgba(255,0,60,0.22);
  margin-bottom: 12px;
}
.drawer__title{
  font-family: var(--font-western);
  color: var(--red);
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(255,0,60,0.35);
  font-size: 1.4rem;
}
.drawer__close{
  width:44px; height:44px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  font-size: 1.6rem;
  cursor:pointer;
}

.drawer__section{ margin-top: 14px; }
.drawer__label{
  font-family: var(--font-condensed);
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem;
  margin: 10px 4px 10px;
}
.drawer__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.drawer__actions{ display:grid; gap: 10px; }

.btn-ghost{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
}
.btn-ghost:hover{
  border-color: rgba(255,0,60,0.55);
  color: var(--red);
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 32px rgba(255,0,60,0.22);
}

/* =========================================================
   SP Bottom Tabs（固定 / 色分け・アイコン対応版）
========================================================= */
.bottom-tab{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 60;

  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr; /* 左:中:右 の比率 */
  gap: 10px;

  padding: 10px;
  border-radius: 18px;
  /* 全体の背景：少し濃いめの黒にしてボタンの色を引き立てる */
  background: rgba(15, 15, 15, 0.85);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.85);

  transform: translateZ(0);
}
@media (min-width: 861px){
  .bottom-tab{ display:none; }
}

/* --- 共通ボタン設定 --- */
.bottom-tab a,
.bottom-tab button{
  height: 52px;
  border-radius: 14px;
  
  /* デフォルト（MAPなど）：薄いグレー */
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.8);

  font-family: var(--font-impact);
  letter-spacing: 0.08em; /* 文字数増えるので少し詰める */
  font-size: 0.85rem;     /* 文字サイズ微調整 */
  
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px; /* アイコンと文字の間隔 */
  
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* --- ① INSTAGRAM (真ん中) --- */
.bottom-tab .tab--ig{
  /* インスタ風：薄い紫ピンクの背景 ＋ 濃いピンクの枠 */
  background: rgba(193, 53, 132, 0.15);
  border: 1px solid rgba(193, 53, 132, 0.6);
  color: #fff;
}
.bottom-tab .tab--ig svg{
  fill: #fff; /* アイコン白 */
}
/* タップした時に少し光る */
.bottom-tab .tab--ig:active{
  background: rgba(193, 53, 132, 0.3);
}

/* --- ② RESERVE (右) --- */
.bottom-tab .tab--reserve{
  /* 赤塗りつぶし */
  background: var(--red);
  border: none;
  color: #000;
  box-shadow: 0 0 20px rgba(255,0,60,0.35); /* 発光表現 */
}
.bottom-tab .tab--reserve svg{
  fill: #000; /* アイコン黒 */
}
/* タップした時 */
.bottom-tab .tab--reserve:active{
  filter: brightness(0.9);
  transform: scale(0.96);
}

/* ホバー時の動き（PCでウィンドウ幅狭めた時用） */
.bottom-tab a:hover{
  transform: translateY(-1px);
}

/* =========================================================
   小物：区切り線・汎用カード（予備）
========================================================= */
.hr-hot{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,0,60,0.55), transparent);
  margin: 20px 0;
  opacity: .75;
}
.card-glass{
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
}

/* ✅ “写真が枠より小さい”見え方の微調整（共通） */
.frame-tight{
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 18px 44px rgba(0,0,0,0.70);
}
.frame-tight img{
  width: 100%;
  height: auto;
  display:block;
  filter: brightness(0.92) contrast(1.06);
}

/* ✅ アクセシビリティ：フォーカスリング */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline: 2px solid rgba(255,0,60,0.85);
  outline-offset: 3px;
}

/* ✅ iOS Safari の100vh問題の保険 */
@supports (height: 100svh){
  .hero-bg{ min-height: 100svh; }
}

/* ✅ reduce motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .about-parallax{ will-change: auto; }
  .btn, .btn-more, .nav-links a, .btn-direction, .nav-reserve, .nav-ig,
  .bottom-tab a, .bottom-tab button{
    transition: none;
  }
}

/* =========================================================
   END
========================================================= */