/*--------------------------------
  Reset
--------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/*--------------------------------
  Root Variables
--------------------------------*/
:root {
  /* Colors */
  --color-bg: #ff6d1f;
  --color-sub: #ff931f;
  --color-tx: #fff;
}

/*--------------------------------
共通
--------------------------------*/
html,
body,
.site,
.wp-site-blocks {
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
}

body {
  line-height: 1.6;
  color: var(--color-tx);
}

h3 {
  font-family: "Cherry Bomb One", cursive;
  font-size: 53px;
  line-height: 1;
  letter-spacing: 0.3rem;
  margin-bottom: 12px;
  text-align: center;
}

/* ENページ：見出しを太くする */
.is-en .news-title,
.is-en .fv-copy__title {
  font-weight: 900 !important;
}

.sub-ttl {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 40px;
  text-align: center;
}

/* Recommend 見出し（中央配置） */
.menu h4 {
  font-family: "Cherry Bomb One", cursive;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.2rem;
  margin: 0 0 8px;

  /* ここが重要：幅100%にして中央寄せ */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* 左右の装飾（線 + 文字側に丸） */
.menu h4::before,
.menu h4::after {
  content: "";
  display: block;

  flex: 1; /* ← ここが肝 */
  height: 6px; /* 丸を置くために少し高さを持たせる */

  /* 線は中央(50%)に1pxで描く */
  background-repeat: no-repeat;
  background-size: 100% 1px; /* 線の太さ1px */
  background-position: center;

  /* もし線がまだ上に見えるなら微調整 */
  transform: translateY(1px);
}

/* 左：丸は右端（文字側） */
.menu h4::before {
  background-image: radial-gradient(circle, #fff 0 2px, transparent 2.1px),
    linear-gradient(#fff, #fff);
  background-size: 4px 4px, /* 丸（直径4px） */ 100% 1px; /* 線 */
  background-position: right center, /* 丸を右（文字側）へ */ center; /* 線 */
}

/* 右：丸は左端（文字側） */
.menu h4::after {
  background-image: radial-gradient(circle, #fff 0 2px, transparent 2.1px),
    linear-gradient(#fff, #fff);
  background-size: 4px 4px, 100% 1px;
  background-position: left center, /* 丸を左（文字側）へ */ center;
}

.wave-svg--pc {
  display: none;
}

/*--------------------------------
PC/bg
--------------------------------*/
.pc-bg {
  display: none;
}

/*--------------------------------
header
--------------------------------*/
:root {
  --header-h: 92px; /* ←波の一番下まで入る高さ。合わなければ 84〜104で調整 */
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: auto;
  overflow: visible;

  z-index: 20;
  background: none; /* ★ 背景色は入れない（FVに板を乗せない） */
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h); /* ★ここで波の高さを確保 */
  background-image: url("../img/svg/wave_01.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 0;
}

.site-header::after {
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.3));
}

/* 中身を前に */
.site-header > * {
  position: relative;
  z-index: 1;
}

/* WP管理バー対策（ログイン時） */
.admin-bar .site-header {
  top: 46px;
}

.header-container {
  position: relative;
  display: flex;
  align-items: center;
  /* これで上下中央 */
  justify-content: space-between;
  padding: 10px 16px;
}

.site-logo {
  height: 100%;
  display: flex;
}

.site-logo a {
  display: flex;
  align-items: center;
}

.site-logo img {
  width: 177px;
  height: auto;
}

.header-right {
  height: 100%;
  display: flex;
  align-items: center;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
}

/* JP / EN */
.lang-switch a {
  color: rgba(255, 255, 255, 0.4);
}

.lang-switch a.is-active,
.lang-switch a[aria-current="page"] {
  color: #fff;
}

/* 区切り線 */
.lang-switch span {
  width: 1px;
  height: 16px;
  background: #fff;
}

/* =========================
  Hamburger button (丸＋3本線)
========================= */

.hamburger {
  margin-left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 線の間隔 */
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-bg);
  /* 線の色（オレンジ） */
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* ハンバーガーボタンのデフォルト外観を完全に消す */
button.hamburger {
  border: 0;
  outline: none;
  box-shadow: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent; /* iOS/Androidのタップハイライト対策 */
}

/* フォーカス系も念のため潰す */
button.hamburger:focus,
button.hamburger:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Firefoxの内側枠（これが“勝手な枠”に見えることがある） */
button.hamburger::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* =========================
  開いた状態（×にする）
  JSで button に .is-open を付ける想定
========================= */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/*--------------------------------
global-nav
--------------------------------*/
/* SP: ナビは閉じてる状態 */
.global-nav {
  position: fixed;
  inset: 0;
  /* top/left/width/height をまとめて指定 */
  width: 100%;
  height: 100%;
  opacity: 0;

  /* 見えない時にタップできないようにする */
  pointer-events: none;

  /* ふわっ：opacity と transform をアニメ */
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  visibility: hidden;
  background: rgba(255, 109, 31, 0.8);
  z-index: 10;

  /* 中身レイアウト */
  display: flex;
  flex-direction: column;
}

.global-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.global-nav__inner {
  position: absolute;
  top: 25%;
  left: 20%;
}

/* メニュー */
.global-nav__list {
  font-family: "Cherry Bomb One", cursive;
  font-size: 28px;
  letter-spacing: 0.2rem;
  line-height: 1;
}

.global-nav__list li {
  margin-bottom: 24px;
}

.global-nav__list li:first-child {
  display: none;
}

.global-nav__sns {
  margin-top: 64px;
  display: flex;
  gap: 28px;
}

.global-nav__sns a {
  font-size: 28px;
  line-height: 1;
}

/* 作業用：ヘッダーの“透明な板”が下を塞がないようにする */
.site-header {
  pointer-events: none;
}

.site-header a,
.site-header button {
  pointer-events: auto;
}

/*--------------------------------
fv
--------------------------------*/
/* FV全体 */
.fv {
  width: 100%;
}

/* ------------------------------
上：画像エリア（Main Visual）
------------------------------ */
.fv-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

/* 5枚重ねてフェード */
.fv-slider {
  position: absolute;
  inset: auto 0 0 0;
  top: 0;
  margin-top: 60px;
}

.fv-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity;
}

.fv-slide.is-active {
  opacity: 1;
}

/* ------------------------------
ロゴ（中央：浮き上がり→消える）
------------------------------ */
.fv-logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding-top: 30px;
  opacity: 0;
  transform: translateY(18px);
}

.fv-logo__img {
  width: min(52vw, 420px);
  height: auto;
  display: block;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.75));
}

/* ロゴIN / OUT（JSで付け外し） */
.fv-logo.is-in {
  animation: fvLogoIn 0.9s ease-out forwards;
}

.fv-logo.is-out {
  animation: fvLogoOut 0.7s ease-in forwards;
}

@keyframes fvLogoIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fvLogoOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ------------------------------
ご予約ボタン（右下）
------------------------------ */
.fv-call-btn {
  position: absolute;
  right: 15px;
  bottom: 32px;
  z-index: 3;
  display: block;

  width: 80px;
  /* SVGの見た目に合わせて調整 */
  height: auto;

  -webkit-tap-highlight-color: transparent;
}

.fv-call-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------
波（wave_02.svg を img で挟む）
------------------------------ */
.fv-wave {
  line-height: 0;
  margin-top: -20px; /* つなぎ目の隙間対策 */
  overflow: hidden; /* 端の1pxはみ出し対策（環境による） */
  position: relative;
  z-index: 5;
}

.fv-wave__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------
下：テキストブロック
------------------------------ */
.fv-copy {
  background: var(--color-bg);
  color: var(--color-tx);
  padding: 50px 16px 64px;
  margin-top: -1px;
}

.fv-copy__title {
  font-weight: 500;
  margin: 0 0 24px;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
}

.fv-copy__text {
  font-size: 16px;
  text-align: center;
}

/* ------------------------------
news
------------------------------ */
.news-wave,
.info-wave {
  line-height: 0;
  margin-top: -1px; /* つなぎ目の隙間対策 */
  overflow: hidden; /* 端の1pxはみ出し対策（環境による） */
  position: relative;
  z-index: 5;
}

.news-wave__img,
.info-wave__img {
  display: block;
  width: 100%;
  height: auto;
}

.news-inner {
  background-color: var(--color-sub);
  padding-top: 52px;
  padding-bottom: 64px;
  margin-top: -1px;
}

.news-item {
  margin-bottom: 32px;
  text-align: center;
  display: block;
}

.news-list .news-item:nth-child(3) {
  margin-bottom: 0px;
}

.news-date {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

.news-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
}

/* 遷移あり */
.news-title[href] {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 遷移なし */
.news-title.is-no-link {
  cursor: default;
  text-decoration-thickness: 1px;
  opacity: 0.9;
}

/* ===== subcuts：丸サブカット帯 ===== */
.subcuts {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #ff931f 0%,
    /* 上の色 */ #ff931f 50%,
    #ff6d1f 50%,
    /* 下の色 */ #ff6d1f 100%
  );
}
.subcuts-reverse {
  width: calc(100% + 52px);
  margin-left: -26px;
  margin-right: -26px;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #ff6d1f 0%,
    /* 上の色 */ #ff6d1f 50%,
    #ff931f 50%,
    /* 下の色 */ #ff931f 100%
  );
}

/* 流れる本体 */
.subcuts__marquee {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 18s linear infinite reverse;
}

/* 1周分の塊（← gapなし） */
.subcuts__track {
  display: flex;
  gap: 0;
  /* ★ 隙間なし */
  padding-right: 0;
  /* ★ 継ぎ目ゼロ */
}

/* 丸 */
.subcut {
  flex: 0 0 auto;
  width: clamp(120px, 30vw, 210px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
}

/* 中身はずっと回転 */
.subcut__inner {
  width: 100%;
  height: 100%;
  animation: spin 4s linear infinite;
}

.subcut img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 2トラック分の半分＝1周分だけ移動 */
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------
menu
------------------------------ */
.menu {
  padding: 64px 26px 0;
  background-color: var(--color-bg);
}

.menu-inner {
  max-width: 420px;
  margin: 0 auto;
}

.menu-block {
  margin: 40px 0 64px;
}

.menu-block-sub {
  text-align: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  margin-bottom: 40px;
}

/* ========== Recommend cards ========== */
.menu-recommend {
  display: grid;
  gap: 32px;
}

.menu-item {
  position: relative;
}

.menu-item__badge {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 84px;
  height: auto;
  display: grid;
  place-items: center;
}

.menu-item__badgeImg {
  width: 84px;
  height: auto;
  display: block;
}

.menu-item__media {
  border-radius: 16px;
  overflow: hidden;
}

.menu-item__media img {
  width: 100%;
  height: auto;
  display: block;
}

.menu-item__body {
  margin-top: 12px;
  text-align: center;
}

.menu-item__name {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

.menu-item__price {
  font-size: 16px;
  text-align: center;
}

/* ========== Others grid（2列） ========== */
.menu-others {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
  margin-bottom: 40px;
}

.other-item__media {
  margin-bottom: 12px;
}

.other-item__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ========== long list area ========== */
.menu-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.menu-list__item span {
  font-size: 16px;
}

.menu-list__item:first-child {
  padding-top: 0;
}

.menu-list__item:last-child {
  padding-bottom: 0;
}

.menu-list__item:last-child {
  border-bottom: none;
}

.main-drink {
  border-radius: 16px;
  margin-bottom: 40px;
}

.notice {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 40px;
}

/* ==============================
  Reveal Animation
  - 下からふわっと
============================== */
.js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}

/* JSで付与 */
.js-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* delay をCSS変数で受け取る（Othersで使う） */
.js-reveal {
  transition-delay: var(--delay, 0ms);
}

/* ==============================
  FEATURES
============================== */
.features {
  background: var(--color-sub);
  padding: 64px 27.5px;
}

.features-inner {
  max-width: 420px;
  margin: 0 auto;
}

.features-list {
  display: grid;
  gap: 0px;
}

.feature-img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateZ(0);
  will-change: transform;
}

/* 表示されたらジャンプ（1回） */
.feature-item.is-jump .feature-img {
  animation: featureJump 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes featureJump {
  0% {
    transform: translateY(0);
  }
  28% {
    transform: translateY(-14px);
  }
  55% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ==============================
  INFO
============================== */
.info {
  background: var(--color-bg);
}

.info-inner {
  padding: 52px 26px 40px;
  max-width: 420px;
  margin: 0 auto;
}

/* ロゴ */
.info-logo {
  width: 45%;
  height: auto;
  display: block;
  margin: 0px auto 40px;
}

/* ------------------------------
  基本情報（表）
------------------------------ */
.info-table {
  border-top: 2px dotted #fff;
}

.info-row {
  margin: 0;
  padding: 8px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  border-bottom: 2px dotted rgba(255, 255, 255, 0.72);
}

.info-row dt {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.info-row dd {
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

/* ------------------------------
  CALENDAR / MAP
------------------------------ */
.info-block {
  margin-top: 54px;
}

.info-h4 {
  font-family: "Cherry Bomb One", cursive;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.2rem;
  text-align: center;
  margin: 0 0 8px;
  color: #fff;
}

.info-sub {
  text-align: center;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  margin-bottom: 32px;
}

/* iframe 枠 */
.info-frame {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.info-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* SP（デフォルト） */
.info-frame--calendar {
  aspect-ratio: 1 / 1;
}

.info-frame--map {
  aspect-ratio: 1 / 1;
}

/* NEWS → CALENDAR アンカー用（固定ヘッダー対策） */
#calendar {
  scroll-margin-top: 110px; /* 固定ヘッダー＋余白分（必要なら調整） */
}

/* ------------------------------
  SNS
------------------------------ */
.info-sns {
  margin: 64px 0 40px;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.info-sns__link {
  display: grid;
  place-items: center;
  color: #fff;
}

.info-sns__link i {
  font-size: 32px;
  line-height: 1;
}

/* ------------------------------
  footer
------------------------------ */
.footer-inner {
  padding: 0 0 64px;
  background-color: var(--color-bg);
}
.copy {
  color: var(--color-tx);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

/* ==================================================
   prefers-reduced-motion : reduce
   動きを最小限にする（CSS統合版）
================================================== */
@media (prefers-reduced-motion: reduce) {
  /* ---------------------------------
     全体：transition / animation を無効化
     --------------------------------- */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* ---------------------------------
     FV：スライド（フェード切替）
     --------------------------------- */
  .fv-slide {
    transition: none !important;
  }

  /* ---------------------------------
     FV：ロゴ IN / OUT
     --------------------------------- */
  .fv-logo,
  .fv-logo.is-in,
  .fv-logo.is-out {
    animation: none !important;
    transform: none !important;
  }

  /* ロゴを出さない運用の場合（おすすめ） */
  .fv-logo {
    opacity: 0 !important;
  }
  /*
  // 出しっぱなしにしたい場合はこちらに切替
  .fv-logo {
    opacity: 1 !important;
  }
  */

  /* ---------------------------------
     ハンバーガー（×変形）
     --------------------------------- */
  .hamburger span {
    transition: none !important;
  }

  /* ---------------------------------
     グローバルナビ（フェード）
     --------------------------------- */
  .global-nav,
  .global-nav.is-open {
    transition: none !important;
  }

  /* ---------------------------------
     subcuts：流れる帯・回転
     --------------------------------- */
  .subcuts__marquee {
    animation: none !important;
    transform: none !important;
  }

  .subcut__inner {
    animation: none !important;
    transform: none !important;
  }

  /* ---------------------------------
     reveal（下からふわっ）
     --------------------------------- */
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ---------------------------------
     FEATURES：ジャンプアニメ
     --------------------------------- */
  .feature-item.is-jump .feature-img {
    animation: none !important;
    transform: none !important;
  }
}