/*
 Theme Name: BRIGHT (TT4 Child)
 Theme URI: https://example.com/
 Description: Twenty Twenty-Four の子テーマ
 Author: Your Name
 Template: twentytwentyfour
 Version: 1.0.0
 Text Domain: bright-tt4-child
*/
/* ===== Variables (色は必要に応じて微調整) ===== */
:root{
  --hero-h: 88vh;
  --ink: #e9e7e3;           /* 暗背景上の文字色 */
  --paper: #efece6;         /* 淡いベージュ */
  --red: #8f1b1e;           /* ボタン(参考 #a8191d を落ち着かせ) */
  --red-d: #6f1417;         /* ボタンhover */
  --gold: #c2a869;          /* 細アクセント */
  --w-1000: 1000px;
  --w-1240: 1240px;
  --w-1500: 1500px;
  --gpad: clamp(16px, 3vw, 40px); /* 横余白の既定 */
}

/* 中央寄せのコンテナ幅 */
.mw-1000, .mw-1240, .mw-1500{
  margin-inline: auto;
  padding-inline: var(--gpad);
}
.mw-1000{ max-width: var(--w-1000); }
.mw-1240{ max-width: var(--w-1240); }
.mw-1500{ max-width: var(--w-1500); }

:root :where(.is-layout-constrained) > .no-margin-section {
  margin-block-start: 0!important;
  margin-block-end: 0!important;
}

/* “背景はフル、内側だけ制限” の汎用パターン */
.full-bg{ position: relative; }
.full-bg > .inner{
  max-width: var(--w-1240); /* 必要に応じて --w-1000 / --w-1500 に変更 */
  margin-inline: auto;
  padding-inline: var(--gpad);
}

/* === ヘッダー：上部固定／最初は透過、スクロールで黒 === */
:root { --header-h: 72px; }               /* 適宜調整（SPは後述） */
.site-header{
  position: fixed; inset: 0 0 auto 0;     /* 上に固定 */
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 clamp(16px,3vw,40px);
  z-index: 1000;
  background: transparent;                /* 初期は透過 */
  color: var(--wp--preset--color--ink);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
  padding: 0;
}
.site-header > .header-inner {
  width: 100%;
  height: 100%;
  margin: 0;
}
.site-header .custom-logo-link img {
  height: 65px;
  width: auto;
}
.site-header .wp-block-site-title {
  display: none;
}
.site-header .wp-block-navigation {
  font-family: "Hina Mincho", serif;
  letter-spacing: 0.2em;
}
.site-header .header-cta {
  margin-left: auto;
  height: 100%;
}
.site-header .header-cta .btn-tel a {
  border: none;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", sans-serif;
  letter-spacing: 0.1em;
  font-family: "Marcellus", serif;
}
.site-header .header-cta .btn-tel i {
  margin-right: 0.5em;
}
.site-header .header-cta .btn-contact {
  height: 100%;
}
.site-header .header-cta .btn-contact a {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  font-size: 2rem;
  border-radius: 0;
}
.site-header .header-cta .btn-contact a span {
  font-size: 0.5rem;
}
.site-header .wp-block-navigation {
  letter-spacing: 0.2em;
  font-size: 1.5rem;
}

/* 管理バーがある時は被らないようにズラす */
.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){ .admin-bar .site-header{ top: 46px; }}

/* スクロール後の見た目（HTMLに .is-scrolled が付く） */
.is-scrolled .site-header{
  background: rgba(0,0,0,.9);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(2px); /* 任意：質感UP */
}

/* ヘッダー高さぶんのスクロール余白（アンカー飛びの食い込み防止） */
html{ scroll-padding-top: var(--header-h); }

/* SPでヘッダー高を少し低めに（任意） */
@media (max-width: 768px){
  :root{ --header-h: 64px; }
}

/* ==== Hero layout: full-bleed & full-height ==== */
.bright-hero{
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  margin-inline: calc(50% - 50vw); /* 親の制限幅を超えて横いっぱい */
  isolation: isolate;
  background:#0f1214; /* 読み込み中の保険 */
}
.bright-hero__slides,
.bright-hero__slide{ position:absolute; inset:0; }
.bright-hero__slides{ z-index:0; }

/* images: ひと回り拡大 + Ken Burns風の横スライド */
.bright-hero__slide img{
  position:absolute; top:50%; left:50%;
  width:110%; height:110%; object-fit:cover;
  transform:translate(-50%,-50%) scale(1.08);
  animation: hero-pan 18s linear infinite;
}

/* クロスフェード（3枚/18s＝1枚6s） */
.bright-hero__slide{ opacity:0; animation: hero-fade 18s ease-in-out infinite; }
.bright-hero__slide:nth-child(1){ animation-delay:0s;  }
.bright-hero__slide:nth-child(1) img{ animation-delay:0s;  }
.bright-hero__slide:nth-child(2){ animation-delay:6s;  }
.bright-hero__slide:nth-child(2) img{ animation-delay:6s; animation-name:hero-pan-r; }
.bright-hero__slide:nth-child(3){ animation-delay:12s; }
.bright-hero__slide:nth-child(3) img{ animation-delay:12s; animation-name:hero-pan-s; }

@keyframes hero-fade{
  0%{opacity:0} 6%{opacity:1} 28%{opacity:1} 34%{opacity:0} 100%{opacity:0}
}
@keyframes hero-pan{   0%{transform:translate(-52%,-50%) scale(1.08)} 50%{transform:translate(-48%,-50%) scale(1.10)} 100%{transform:translate(-52%,-50%) scale(1.08)} }
@keyframes hero-pan-r{ 0%{transform:translate(-48%,-50%) scale(1.08)} 50%{transform:translate(-52%,-50%) scale(1.10)} 100%{transform:translate(-48%,-50%) scale(1.08)} }
@keyframes hero-pan-s{ 0%{transform:translate(-51%,-50%) scale(1.08)} 50%{transform:translate(-49%,-50%) scale(1.11)} 100%{transform:translate(-51%,-50%) scale(1.08)} }

/* overlay */
.bright-hero__overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 10%, rgba(0,0,0,0.45) 100%);
}

/* content（右寄せ・縦書き） */
.bright-hero__content{
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  color:#f3f1ed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
}
.bright-hero .catch-copy{
  font-size:clamp(20px,2.2vw,28px);
  line-height:2;
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 1rem 1rem 1rem .6rem;
  font-family: 'Shippori Mincho', serif;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  letter-spacing: 0.2em;
}
.bright-hero .catch-copy > span {
  background: #231815;
  background: rgba(35, 24, 21, 0.8);
  height: fit-content;
  padding: 15px 0 0;
}
.bright-hero .catch-copy > span:last-of-type {
  margin-top: 5em;
}
.bright-hero .catch-copy > span > span {
  color: #b68f65;
}
.bright-hero__logo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 600px;
  opacity: 0.15;
}
.bright-hero__logo img {
  width: 100%;
}

/* 操作中は一時停止（好みで） */
.bright-hero:hover .bright-hero__slide,
.bright-hero:hover .bright-hero__slide img{ animation-play-state:paused; }

/* 動きが苦手な環境では停止 */
@media (prefers-reduced-motion: reduce){
  .bright-hero__slide, .bright-hero__slide img{ animation:none !important; }
  .bright-hero__slide:nth-child(1){ opacity:1; }
}

/* SP: 縦書きを横書きに */
@media (max-width: 768px){
  .bright-hero__content{ justify-content:center; padding-right:0; text-align:center; }
  .bright-hero .catch-copy{ writing-mode:horizontal-tb; background:none; border:none; }
}

/* fixed header との干渉対策（既に導入済み想定） */
html{ scroll-padding-top: var(--header-h,72px); }


/* ====== in-view animation: base ====== */
[data-animate]{
  opacity: 0;
  --inview-ty: 22px;              /* フェードアップ用のY量 */
  --float: 0px;                   /* パララックス用のY量（JSで更新） */
  transform: translateY(var(--inview-ty)) translateY(var(--float));
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.6,.2,1);
  will-change: transform, opacity;
}

/* ① コンテナ方式：親に .is-inview が付いたら */
.is-inview [data-animate]{
  opacity: 1;
  --inview-ty: 0px;               /* フェードアップのYを0に */
}

/* ② スタンドアロン方式：要素自身に .is-inview が付いたら */
[data-animate].is-inview{
  opacity: 1;
  --inview-ty: 0px;
}

/* スタッガー */
.is-inview [data-animate][data-stagger="100"],
[data-animate].is-inview[data-stagger="100"]{ transition-delay:.1s; }
.is-inview [data-animate][data-stagger="200"],
[data-animate].is-inview[data-stagger="200"]{ transition-delay:.2s; }
.is-inview [data-animate][data-stagger="300"],
[data-animate].is-inview[data-stagger="300"]{ transition-delay:.3s; }

/* サブタイトル（パララックス） */
.concept-subtitle{
  /* ここで transform を上書きしない。上の [data-animate] の transform に合流させるため */
}

/* 動きが苦手な設定の配慮 */
@media (prefers-reduced-motion: reduce){
  [data-animate]{ opacity:1 !important; --inview-ty:0px !important; transform:none !important; transition:none !important; }
}
/* ============================================================
   Concept Section
============================================================ */
.no-global-padding > * {
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.concept-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1000px;
  min-height: 1080px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* タイトル（右上寄せ・透過30%） */
.concept-title {
  position: absolute;
  top: 0;
  right: 100px;
  font-size: clamp(60px, 8vw, 140px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.05em;
  font-family: 'Marcellus', serif;
  z-index: 5;
}

/* 内枠 */
.concept-inner {
  position: relative;
  width: 1000px;
  height: auto;
  background: rgba(0,0,0,0.5);
  color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

/* イメージ画像（重ね） */
.concept-image {
  position: absolute;
  z-index: 3;
}
.concept-image--top {
  top: 50px;
  right: 900px;
}
.concept-image--bottom {
  bottom: 50px;
  left: 900px;
}
.concept-image img {
  height: 380px;
  width: auto;
  object-fit: cover;
  display: block;
}

/* コンテンツ部 */
.concept-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 80px;
}

/* サブタイトル（縦書き） */
.concept-subtitle {
  font-family: 'Shippori Mincho', serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 2;
  white-space: nowrap;
}

/* 本文 */
.concept-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 300%;
  max-width: 560px;
}

/* スマホ対応 */
@media (max-width: 1000px) {
  .concept-section { min-width: auto; min-height: auto; height: auto; padding: 100px 0; }
  .concept-inner { width: 90%; flex-direction: column; padding: 40px; }
  .concept-content { flex-direction: column; gap: 20px; padding: 40px 20px; }
  .concept-subtitle { writing-mode: horizontal-tb; text-orientation: initial; }
  .concept-image--top,
  .concept-image--bottom { display:none; }
}

/* ========== Drink Section ========== */
#drink.drink-section{
  position: relative;
  width: 100vw;
  //height: 100vh;                     /* 外枠 … 100vh */
  background: #231815;               /* 外枠背景 */
  overflow: hidden;
  margin-inline: calc(50% - 50vw);   /* 画面端まで */
}

/* 右上の背景イメージ */
.drink-bg{
  position:absolute; inset:0 0 0 0; pointer-events:none;
  background-repeat:no-repeat;
  background-position: right 0 top 0;   /* 右上 */
  background-size: auto 58%;            /* 調整可 */
  opacity:1;
  mix-blend-mode: normal;
  z-index: 0;
}

/* メイン部（半透明） */
.drink-main{
  position: relative;
  z-index: 1;
  //width: min(1240px, 92%);
  margin: 0 auto;
  background: rgba(0,0,0,.5);          /* 指定どおり */
  //height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;        /* 上:コピー + カルーセル */
  padding: clamp(24px, 4vw, 40px);
  width: 100vw;
  margin-top: 120px;
  margin-bottom: 60px;
}
.drink-main-inner {
  width: 1000px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
}
/* タイトル（左下／少しはみ出す） */
.drink-title{
  position: absolute;
  left: clamp(16px, 3vw, 24px);
  bottom: -0.15em;                     /* はみ出し */
  font-size: clamp(78px, 12vw, 140px);
  line-height: 1;
  letter-spacing: .06em;
  color: rgba(255,255,255,.30);
  font-family: 'Marcellus', serif;
  user-select: none;
  bottom: -0.5em;
  padding: 0;
  margin: 0;
}

/* コピー部（縦見出し＋本文 横並び） */
.drink-copy{
  align-self: start;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(10px, 2vh, 20px);
}
.drink-subtitle{
  background:#fff;                     /* 指定どおり */
  color:#111;
  padding: .8rem .9rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family:'Shippori Mincho', serif;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem 0;
}
.drink-text{
  color:#fff;                          /* 本文 … 白 */
  font-family:'Noto Sans JP', sans-serif;
  line-height: 300%;
  font-size: 15px;
  margin-bottom: 120px;
}

/* --- カルーセル --- */
.drink-carousel{
  position: relative;
  margin-top: clamp(24px, 3vh, 40px);
  margin-bottom: 60px;
  padding: 30px;
}
.drink-carousel-inner {
padding: 30px 50px;
}
.dc-track{
  display: flex;               /* grid→flex に変更 */
  width: 100%;
  //overflow: hidden;
  gap: 0;                      /* ずれ防止：ギャップは付けない */
  transition: transform .4s ease;
  will-change: transform;
}

.dc-slide{
  flex: 0 0 50%;              /* 各スライド=ビューポートの幅 */
  display: grid;
  grid-template-columns: auto 1fr; /* 画像+カードの2列はそのまま */
  align-items: end;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}

.dc-media{ width: 480px; height: 320px; }
.dc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 説明カード：右側、左へ20px被せる */
.dc-card{
  background:#2b2a26;                 /* 指定どおり */
  color:#e9e7e3;
  width: 480px;
  //height: 260px;        /* 指定サイズ */
  padding: 20px 22px;
  margin-left: -20px;                  /* 画像に 20px かぶせ */
  display:flex; flex-direction:column; justify-content:flex-start;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.dc-name{
  font-family:'Shippori Mincho', serif;
  font-size: 22px; margin: 0 0 8px;
}
.dc-name span{
  font-family:'Noto Sans JP', sans-serif;
  font-size: 13px; opacity:.8; margin-left:.3em;
}
.dc-desc{
  font-size: 14px; line-height: 2; margin: 0;
  opacity: 0.6;
}

/* 矢印 */
.dc-arrow{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.35);
  color: #fff; font-size: 20px; line-height: 40px; text-align: center;
  cursor: pointer; z-index: 2;
}
.dc-prev{ left: 30px; }
.dc-next{ right: 30px; }
.dc-arrow:hover{ background: rgba(0,0,0,.55); }

/* レスポンシブ */
@media (max-width: 1024px){
  .dc-media{ width: min(480px, 56vw); height: calc(min(480px,56vw) * 2 / 3); }
  .dc-card{ width: min(425px, 44vw); }
}
@media (max-width: 820px){
  .drink-copy{ grid-template-columns: 1fr; }
  .drink-subtitle{ writing-mode: horizontal-tb; }
  .dc-slide{ grid-template-columns: 1fr; }
  .dc-card{ width: 100%; height: auto; margin-left: 0; margin-top: -14px; }
  .dc-prev{ left: 6px; } .dc-next{ right: 6px; }
  .drink-bg{ background-size: auto 52%; opacity:.45; }
}


/* ================= FOOD SECTION ================= */
#food.food-section{
  position: relative;
  width: 100vw;
  //height: 100vh;                         /* 外枠 … 100vh */
  background-size: cover;
  background-position: center;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

/* 左右分割の背景（50%ずつ / 80%不透明 / Yを58pxずらし） */
.food-bg-split{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.food-bg.half{
  position: absolute;
  top:0;
  //bottom:700px;
  opacity:.8;
  background-size:cover;
  background-position:center;
  width:50%;
  height:640px
}
.food-bg.left{ left:0; }
.food-bg.right{ right:0; top: 120px; }

/* メインボックス（1000px／半透明／メニューまで伸ばす） */
.food-main{
  position: relative;
  z-index:1;
  width: 1000px;
  margin: 0 auto;
  //height: 100vh;                          /* メイン … 100vh */
  background: rgba(0,0,0,.7);
  //display: grid;
  //place-items: center;
  padding: 0 40px;
  padding-bottom: 240px;                  /* メニューをabsoluteで重ねる分の確保（調整可） */
  display: flex;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: 900px;
}

/* 縦タイトル（左端・回転・0.3） */
.food-title{
  position:absolute;
  left:0;
  //bottom: 580px;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  font-size: clamp(72px, 11vw, 160px);
  line-height:1;
  color: rgba(255,255,255,.3);
  font-family: 'Marcellus', serif;
  letter-spacing:.06em;
  user-select:none;
  top: 480px;
}

/* 中央コピー */
.food-copy{ text-align:center; color:#fff; max-width: 720px; }
.food-subtitle{
  display:inline-block;
  background:#fff; color:#111;
  font-family:'Shippori Mincho', serif;
  font-size: clamp(18px, 2.2vw, 26px);
  padding: .6rem 1rem;
  margin-bottom: 18px;
}
.food-subtitle .gold{ color:#c2a869; } /* 語らい／彩る をゴールドに */
.food-text{ line-height: 300%; font-size:15px; }

/* ====== メニュー（フェードスライダー） ====== */
.food-menu{
  position: absolute; left:50%; bottom: 24px; transform: translateX(-50%);
  width: min(1240px, 92%); z-index:2; color:#eee;
}
.fm-stage{ position: relative; height: 560px; } /* 画像240 + カード高さ想定 */
.fm-slide{
  position:absolute;
  inset:0;
  display:flex;
  place-items:center;
  gap:18px;
  grid-template-rows: auto auto; opacity:0; pointer-events:none;
  transition: opacity 2.6s ease;
}
.fm-slide.is-active{ opacity:1; pointer-events:auto; }

.fm-media img{ width:640px; height: 480px; object-fit:cover; display:block; margin-inline:auto; }
.fm-card{
  width: min(720px, 90%);
  margin-inline:auto;
  background:#2b2a26; color:#e9e7e3;
  padding: 20px 22px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  text-align:left;
}
.fm-name{ font-family:'Shippori Mincho',serif; font-size:22px; margin:0 0 8px; }
.fm-desc{ font-size:14px; line-height:1.9; margin:0; }

/* コントローラ（カードの下に配置） */
.fm-controls{
  margin-top: 10px; display:flex; align-items:center; justify-content:center; gap:14px;
}
.fm-dots{ display:flex; gap:10px; }
.fm-dots button{
  width:10px; height:10px; border-radius:50%; border:1px solid #fff; background:transparent; cursor:pointer;
  opacity:.6; transition:opacity .2s;
}
.fm-dots button.is-active{ background:#fff; opacity:1; }
.fm-prev, .fm-next{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.35); color:#fff; line-height:34px; text-align:center; cursor:pointer;
}
.fm-prev:hover, .fm-next:hover{ background: rgba(0,0,0,.55); }

/* レスポンシブ */
@media (max-width: 1100px){
  .food-main{ width: 92%; }
  .fm-media img{ width:min(640px, 88vw); height: calc(min(640px,88vw) * 0.375); }
}
@media (max-width: 820px){
  .food-title{ bottom: 8%; font-size: clamp(54px, 14vw, 120px); }
  .food-subtitle{ white-space: nowrap; }
  .fm-card{ width: 100%; }
}



/* ========== CAFE SECTION ========== */
#cafe.cafe-section{
  position: relative;
  width: 100vw;
  background-size: cover;
  background-position: center;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  padding: clamp(40px, 6vw, 80px) 0;
}

/* 背景レイヤー（左右分割） */
.cafe-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cafe-container{ position:relative; z-index:2; width:min(1240px, 92%); margin:0 auto; }

/* 左…100%幅で左下寄せ・30%不透明 */
.cafe-left{
  position: absolute;
  left: 0;
  bottom: 0;
  top: 30%;
  right: 640px; /* 右側 640px を空ける */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  opacity: .3;
}

/* 右…幅640px／ゆっくり左→右にスライド（ループ） */
.cafe-right{
  position:absolute; top:0; right:0; width:640px; height:100%;
  overflow:hidden;
}
.cafe-right-img{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-size:cover; background-position:center;
  opacity:.75;
  animation: cafe-pan 180s linear infinite;
  width: 200%;
}
@keyframes cafe-pan{
  0%{ transform: translateX(0%); }
  50%{ transform: translateX(-50%); }
  100%{ transform: translateX(0%); }
}
/* ロゴ（右上・50%不透明） */
.cafe-logo{
  position: absolute;
  top: 24px;
  right: 24px;
  width: 320px;
  height: auto;
  opacity: .3;
}

/* 左右の境の赤ライン（#8f1b1e / 30px） */
.cafe-divider{
  position:absolute; top:0; bottom:0; right:640px; width:30px; background:#8f1b1e;
}

/* 画面左に2本の半透明ライン + 縦タイトル */
.cafe-rails{ position:absolute; inset:0 auto 0 0; width:115px; z-index:1; left: 65px; }
.cafe-rails .rail{ position:absolute; top:0; bottom:0; background:rgba(255,255,255,.5); }
.cafe-rails .rail-bold{ left:0;  width:60px; }
.cafe-rails .rail-thin{  right:0; width:10px; }

.cafe-vert{
  position:absolute;
  top:30%; left:65px;
  transform-origin:center; margin:0;
  font-size: clamp(54px, 12vw, 160px);
  color:#42210b;
  letter-spacing:.06em; z-index:2; user-select:none;
  left: 120px;
  transform: translate(-50%, -50%) rotate(90deg);
  font-family: 'Marcellus', serif;
}

/* ===== メイン（左寄せ 640px / 半透明白） ===== */
.cafe-main{
  width:640px;
  background: rgba(255,255,255,.75);
  padding: clamp(20px, 3vw, 28px);
  box-sizing: border-box;
}
.cafe-lead{ color:#42210b; }
.cafe-subtitle{
  text-align:center;
  color:#231815;
  font-family:'Shippori Mincho', serif;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height:1.8;
  margin-bottom: 12px;
}
.cafe-subtitle br + *{ display:inline-block; } /* 2行目の開始位置を右に */
.gold{ color:#b68f65; }

.cafe-text{ line-height:2; font-size:15px; }

/* 営業時間 */
.cafe-hours{ margin-top: 16px; }
.cafe-hours__title{
  background:#42210b;
  color:#fff;
  padding:.4rem .8rem;
  display: block;
  font-weight:600;
}
.cafe-hours__body{
  background:#fff; color:#42210b; padding:.8rem; margin:0; display:block;
}
.cafe-hours__body > div{ display:flex; justify-content:space-between; gap:20px; padding:.2rem 0; }
.cafe-hours__body dt, .cafe-hours__body dd{ margin:0; }

/* ===== カフェメニューブロック（1240px / 半透明白） ===== */
.cafe-menu{
  position:relative;
  width: 1240px;
  margin: clamp(24px, 4vw, 40px) auto 0;
  background: rgba(255,255,255,.75);
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 28px) clamp(28px, 4vw, 36px);
}
.cafe-menu__title{
  position:absolute; top:0; left:50%; transform: translate(-50%, -50%);
  margin:0;
  font-family:'Shippori Mincho', serif;
  color:#b68f65; text-shadow: 0 2px 0 rgba(255,255,255,.9);
  font-size: clamp(28px, 3.4vw, 44px);
}

/* --- タブ（フェード/カルーセル以外：ワイプ＋スライドイン） --- */
.ct-tabs{ display:flex; justify-content:center; gap:10px; margin-top:12px; }
.ct-tab{
  background:#fff; color:#42210b; border:1px solid #d9d3c9; padding:.4rem .9rem; border-radius:18px;
  cursor:pointer; transition: all .2s ease;
}
.ct-tab.is-active{ background:#b68f65; color:#fff; border-color:#b68f65; }

.ct-stage{ position:relative; margin-top: 18px; min-height: 360px; }
.ct-panel{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  clip-path: inset(0 0 100% 0); /* 下からワイプ */
  transition: clip-path .6s ease, opacity .6s ease, transform .6s ease;
  display: flex;
  place-items: center;
  gap: 16px;
}
.ct-panel.is-active{
  opacity:1; pointer-events:auto; transform:none; clip-path: inset(0 0 0 0);
}
.ct-media img {
  width: 640px;
  height: 480px;
  object-fit: cover;
  display: block;
  margin-inline: auto;
}
.ct-card{ width:min(720px, 90%); background:#2b2a26; color:#e9e7e3; padding:20px 22px; box-shadow:0 8px 18px rgba(0,0,0,.35); }
.ct-name{ font-family:'Shippori Mincho',serif; font-size:22px; margin:0 0 8px; }
.ct-desc{ font-size:14px; line-height:1.9; margin:0; }

/* レスポンシブ */
@media (max-width: 1100px){
  .cafe-left{ right: 56vw; }
  .cafe-right{ width: 56vw; }
  .cafe-divider{ right: 56vw; }
}
@media (max-width: 820px){
  .cafe-main{ width: 100%; }
  .cafe-vert{ font-size: clamp(48px, 18vw, 120px); }
  .cafe-right{ display:none; } /* 右側演出はモバイルでは非表示でもOK */
  .cafe-left{ right:0; opacity:.22; }
}



/* ========== SHOP INFO ========== */
#info.info-section{
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: clamp(40px, 6vw, 80px) 0;
  color: #e8e6e2;
}

/* 右上の大きな薄いタイトル */
.info-title{
  position: absolute;
  top: 20px; right: min(3vw, 40px);
  margin: 0;
  font-family: "Marcellus", serif;
  font-size: clamp(64px, 8vw, 180px);
  line-height: 1;
  color: rgba(255,255,255,.2);     /* opacity:0.2 相当 */
  letter-spacing: .06em;
  pointer-events: none;
  user-select: none;
}

/* メイン 1240px */
.info-main{
  position: relative;
  width: min(1240px, 92%);
  margin: 0 auto;
  background: rgba(0,0,0,.5);
  display: grid;
  grid-template-columns: 420px 1fr;        /* 左パネル固定幅 */
  gap: clamp(24px, 3vw, 40px);
  min-height: 520px;
  padding: clamp(24px, 3vw, 32px);
}

/* 左パネル（上端〜下端まで） */
.info-left{
  background: rgba(37,37,37,.8);           /* #252525 透過0.8 */
  padding: clamp(18px, 2.5vw, 24px);
  display: flex; flex-direction: column; gap: 28px;
  padding-top: 60px;
  padding-bottom: 60px;
}
.info-box{
  margin-bottom: 60px;
}
.info-smallttl{
  font-size: 14px; letter-spacing: .2em; opacity: .9; margin: 0 0 8px;
}
.info-tel{
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 10px;
  text-align: center;
  font-family: "Marcellus", serif;
}
.info-tel i{ margin-right: .5em; color: #fff; }
.info-btn{
  display: inline-block;
  background: #a8191d; color: #fff; text-decoration: none;
  padding: .7rem 1.2rem;
  border-radius: 4px;
  margin: 0 auto;
}
div.info-box:nth-child(1) > p:nth-child(3) {
  text-align: center;
}
.info-address{ font-style: normal; line-height: 2; }

/* 右カラム */
.info-right{
  padding: clamp(8px, 1.5vw, 12px) 0;
  padding-top: 60px;
  padding-bottom: 60px;
}
.info-list{ margin:0; }
.info-list > div{ display:grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 10px 0; }
.info-list dt{ margin:0; color:#f0efec; opacity:.9; }
.info-list dd{ margin:0; color:#e0ded8; }
.info-sub{ font-weight:600; letter-spacing:.1em; }
.info-sub.mt{ margin-top:.5em; }

/* レスポンシブ */
@media (max-width: 980px){
  .info-main{ grid-template-columns: 1fr; }
  .info-left{ order: 2; }
  .info-right{ order: 1; }
  .info-title{ font-size: clamp(48px, 8vw, 120px); }
  .info-list > div {
    flex-direction: column;
    display: flex;
  }
  .info-list dt {
    background: rgba(0, 0, 0, 0.8);
    padding: 5px;
    text-align: center;
    box-sizing: border-box;
  }
  .info-main {
    box-sizing: border-box;
  }
}



/* ===== Open Banner base (既存の見た目) ===== */
.bright-open-banner{
  background: linear-gradient(to right,#111,#1a1a1a);
  color:#e5e4e1; text-align:center; position:relative; overflow:hidden;
  border-block:1px solid rgba(255,255,255,.05);
  padding: clamp(40px,6vw,80px) 20px;
  width:100vw; margin-inline:calc(50% - 50vw);
}
.bright-open-inner{ max-width:840px; margin:0 auto; position:relative; z-index:1; }
.bright-open-date{ font-size:clamp(20px,2vw,26px); color:#b68f65; letter-spacing:.1em; margin:.1em 0; font-family:'Shippori Mincho',serif; }
.bright-open-title{ font-size:clamp(36px,4vw,60px); font-family:'Shippori Mincho',serif; color:#fff; margin:.2em 0 .6em; letter-spacing:.08em; }
.bright-open-text{ font-size:clamp(14px,1.6vw,18px); line-height:1.9; color:#e5e4e1; margin:0 0 1.6em; }
.bright-open-btn{ display:inline-block; background:#a8191d; color:#fff; text-decoration:none; padding:.9em 2em; border-radius:2em; letter-spacing:.05em; transition:.3s ease; font-size:15px; }
.bright-open-btn:hover{ background:#c92025; transform:translateY(-2px); box-shadow:0 3px 10px rgba(168,25,29,.4); }


/* PC時は従来どおり */
@media (max-width: 960px){

  /* ナビの標準トグルボタン（.wp-block-navigation__responsive-container-open）をハンバーガー風に */
  .wp-block-navigation__responsive-container-open {
    width: 44px; height: 44px;
    //border: 1px solid rgba(255,255,255,.35);
    //background: rgba(0,0,0,.25);
    //border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
  }
  /* デフォルトのアイコンを消して自前の3本線を描く */
  .wp-block-navigation__responsive-container-open svg { display: none; }
  .wp-block-navigation__responsive-container-open::before,
  .wp-block-navigation__responsive-container-open::after,
  .wp-block-navigation__responsive-container-open span{
    content:""; display:block; width:22px; height:2px; background:#fff;
    position:absolute; left:50%; transform:translateX(-50%);
    transition: transform .2s ease, opacity .2s ease;
  }
  .wp-block-navigation__responsive-container-open::before{ top: 14px; }
  .wp-block-navigation__responsive-container-open span{      top: 21px; }
  .wp-block-navigation__responsive-container-open::after{  top: 28px; }

  /* 開いたとき（.has-modal-open が body に付与）に “×” へ */
  .has-modal-open .wp-block-navigation__responsive-container-open::before{
    transform: translateX(-50%) rotate(45deg);
    top: 21px;
  }
  .has-modal-open .wp-block-navigation__responsive-container-open::after{
    transform: translateX(-50%) rotate(-45deg);
    top: 21px;
  }
  .has-modal-open .wp-block-navigation__responsive-container-open span{
    opacity: 0;
  }

  /* オーバーレイ側（標準のモーダルコンテナ）を右スライド風に */
  .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(0,0,0,.96);
  }
  .wp-block-navigation__responsive-container-content {
    /* 右からスライドインする幅 */
    width: min(86vw, 360px);
    margin-left: auto;   /* 右寄せ */
    min-height: calc(100dvh - var(--wp-admin--admin-bar-offset,0px));
    padding: 16px 20px;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .has-modal-open .wp-block-navigation__responsive-container-content{
    transform: translateX(0);
  }

  /* 背景スクリーン（標準の <div class="wp-block-navigation__responsive-dialog"> 背景） */
  .wp-block-navigation__responsive-dialog::backdrop{
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px);
  }

  /* メニュー縦並び＆タップ余白を確保 */
  .wp-block-navigation__container{
    display:flex; flex-direction: column; gap: 12px;
  }
  .wp-block-navigation-item__content{
    padding: .8rem 0;
  }
  
  .site-header > .header-inner {
    flex-wrap: nowrap;
    gap: 0;
  }
  .site-header {
    width: 100vw;
  }
  .site-header .wp-block-navigation {
    order: 5;
    background: #333;
    padding: 10px;
  }
  .site-header .header-cta {
    gap: 0;
    align-items: stretch;
  }
  .site-header .header-cta .btn-tel i {
    margin-right: 0;
  }
  .site-header .header-cta .btn-tel span {
    display: none;
  }
  .btn-tel {
    display: flex;
    flex-direction: column;
    background: #00844c;
  }
  
  .bright-hero__logo {
    width: 50%;
    left: auto;
    right: 0;
  }
  .bright-hero .catch-copy > span {
    padding: 0 15px;
  }
  .bright-hero .catch-copy > span:last-of-type {
    margin-top: 1.5em;
  }
  
  .bright-open-banner {
    width: 100%;
    box-sizing: border-box;
  }
  
  .bright-open-banner::before {
    width: 100%;
  }
  
  .concept-text {
    text-align: center;
  }
  .drink-main-inner {
    width: 100%;
  }
  .drink-main {
    box-sizing: border-box;
  }
  .drink-subtitle {
    padding: 10px 15px;
  }
  .drink-text {
    margin-bottom: 30px;
  }
  .dc-slide {
    flex-direction: column;
    width: 100%;
    padding-left: 75px;
    padding-right: 75px;
    box-sizing: border-box;
  }
  .drink-carousel {
    padding-left: 0;
    padding-right: 0;
  }
  .drink-carousel-inner {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .dc-media {
    width: 100%;
  }
  .food-main {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 15px;
    padding-top: 15px;
  }
  .food-menu {
    position: relative;
    left: auto;
    bottom: auto;
    transform: translateX(0);
    width: 100%;
    background: rgba(0,0,0,.7);
  }
  .fm-slide {
    flex-direction: column;
    position: relative;
    top: 0;
  }
  .fm-stage {
    height: fit-content;
  }
  .fm-slide {
    opacity: 1;
    margin-bottom: 60px;
    padding: 0 20px;
  }
  .fm-card {
    box-sizing: border-box;
  }
  .fm-controls {
    display: none;
  }
  
  
  /* タブUIを隠す */
  .cafe-menu .ct-tabs{ display:none; }

  /* “タブの中身”は全部表示（JSが hidden を付けても見えるように） */
  .cafe-menu [hidden]{
    display:block !important;
  }
  .cafe-menu .ct-panel{
    display:block !important;   /* 全パネル表示 */
    opacity:1;
    transform:none;
    clip-path:none;
    pointer-events:auto;
    margin-top:16px;
    position: relative;
    margin-bottom: 30px;
  }

  /* 画像とカードの absolute を無効化（通常フローに戻す） */
  .cafe-menu .ct-media,
  .cafe-menu .ct-card{
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  /* 画像は幅いっぱい、比率維持 */
  .cafe-menu .ct-media img{
    width:100%;
    height:auto;
    aspect-ratio: 4 / 3; /* 必要なら 16 / 9 に変更 */
    object-fit: cover;
    border-radius:6px;
  }

  /* カードは全幅 */
  .cafe-menu .ct-card{
    width:100%;
    margin-top:8px;
    box-sizing: border-box;
  }
  
  .cafe-menu {
    width: 100%;
    box-sizing: border-box;
  }
  .ct-media img {
    width: 100%;
  }
  .cafe-vert {
    top: 10%;
  }
}

.wp-block-post-title {
  display: none;
}