/*--------------------------------
共通
--------------------------------*/
h3 {
  font-size: 72px;
  margin-bottom: 16px;
}

.sub-ttl {
  font-size: 24px;
  margin-bottom: 56px;
}

.menu h4 {
  font-size: 38px;
  margin: 0 0 16px;
}

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

/*--------------------------------
WRAPPER / HEADER / MAIN
--------------------------------*/
.wrapper {
  max-width: 1040px;
  padding: 0 40px;
  margin: 0 auto;
  position: relative;
}

main {
  max-width: 496px; /* 赤枠 */
  margin-left: auto; /* 念のため右寄せ */
  margin-right: 0;
}

/*--------------------------------
PC/bg
--------------------------------*/
.pc-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* 黒＋ぼかしレイヤー */
.pc-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* Safari */
  z-index: 2;
}

.pc-bg__item {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
  z-index: 1;
}

.pc-bg__item.is-active {
  opacity: 1;
}

.pc-bg__item:nth-child(1) {
  background-image: url("../img/bg/bg_01.webp");
}

.pc-bg__item:nth-child(2) {
  background-image: url("../img/bg/bg_02.webp");
}

.pc-bg__item:nth-child(3) {
  background-image: url("../img/bg/bg_03.webp");
}

/*--------------------------------
header
--------------------------------*/
.header-container {
  padding: 25px 30px;
}

.site-logo img {
  width: 235px;
}

.lang-switch {
  gap: 12px;
  font-size: 24px;
}

.lang-switch span {
  height: 22px;
}

/*--------------------------------
global-nav
--------------------------------*/
/* PC: ハンバーガー不要 */
.hamburger {
  display: none;
}

/* PC: ナビは左固定で常時表示 */
.global-nav {
  position: fixed;
  top: 0;
  left: max(0px, calc(50% - 520px));
  transform: none;
  width: 250px;
  /* お好みで */
  height: 100vh;
  background: transparent;
  /* 背景なしなら */
  backdrop-filter: none;
  z-index: 10;
  /* 背面に行かないように */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.global-nav__list li:first-child {
  display: block;
  margin-bottom: 40px;
}

.global-nav__inner {
  top: 10%;
}

/* PC: 暗幕は不要 */
.nav-backdrop {
  display: none;
}

/*--------------------------------
FV
--------------------------------*/

.fv-visual {
  min-height: 698px;
}

.fv-logo__img {
  width: 200px;
}

.fv-call-btn {
  right: 30px;
  bottom: 30px;
  width: 90px;
}

.fv-copy {
  padding: 66px 30px 85px;
}

.fv-copy__title {
  margin: 0 0 32px;
  font-size: 32px;
  line-height: 1.4;
}

.fv-copy__text {
  font-size: 20px;
}

/* ------------------------------
news
------------------------------ */
.news-inner {
  padding-top: 69px;
  padding-bottom: 85px;
  padding-inline: 20px;
}

.news-item {
  margin-bottom: 40px;
}

.news-date {
  font-size: 20px;
  margin-bottom: 20px;
}

.news-title {
  font-size: 24px;
}

.news-title[href] {
  text-underline-offset: 6px;
}

.subcut {
  width: 160px;
}

/* ------------------------------
menu
------------------------------ */
.menu {
  padding: 85px 30px 0;
}

.menu-inner {
  max-width: 436px;
}

.menu-block {
  margin: 56px 0 85px;
}

.menu-block-sub {
  font-size: 18x;
  margin-bottom: 56px;
}

.menu-recommend {
  gap: 40px;
}

.menu-item__badge {
  left: -15px;
  top: -15px;
  width: 111px;
}

.menu-item__badgeImg {
  width: 111px;
}

.menu-item__body {
  margin-top: 16px;
}

.menu-item__name {
  font-size: 20px;
}

.menu-item__price {
  font-size: 20px;
}

.menu-others {
  gap: 32px 16px;
  margin-bottom: 56px;
}

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

.menu-list__item {
  padding: 16px 10px;
}

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

.main-drink {
  margin-bottom: 56px;
}

.notice {
  font-size: 16px;
  margin-top: 56px;
}

.subcuts-reverse {
  width: 496px;
  margin-left: -30px;
}

/* ------------------------------
FEATURES
------------------------------ */
.features {
  padding: 85px 30px;
}

/* ==============================
  INFO
============================== */
.info-inner {
  padding: 69px 0 48px;
}

/* ロゴ */
.info-logo {
  width: 204px;
  margin: 0px auto 56px;
}

.info-row {
  padding: 12px 0;
  gap: 28px;
}

.info-row dt {
  font-size: 20px;
}

.info-row dd {
  font-size: 20px;
}

.info-block {
  margin-top: 85px;
}

.info-h4 {
  font-size: 38px;
  margin: 0 0 16px;
}

.info-sub {
  font-size: 18px;
  margin-bottom: 40px;
}

.info-sns {
  margin: 85px 0 0;
  gap: 40px;
}

.info-sns__link i {
  font-size: 40px;
}

/*--------------------------------
FOOTER
--------------------------------*/
.footer-inner {
  width: 496px;
  margin-left: auto; /* 念のため右寄せ */
  margin-right: 0;
  padding: 0 0 85px;
}

.copy {
  font-size: 14px;
}

/* =========================================
   prefers-reduced-motion : reduce（PC用）
   ※PC専用の演出だけ止める
========================================= */
@media (prefers-reduced-motion: reduce) {
  /* PC背景フェード */
  .pc-bg__item {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important; /* 1枚目を表示 */
  }
}

/* pc.cssの一番下に置く */
@media (min-width: 497px) {
  :root {
    --pc-col: 496px;
    --pc-header-h: 120px;
  }

  body > .site-header {
    position: fixed;
    top: 0;
    left: auto;
    right: max(40px, calc(50% - 480px));
    width: var(--pc-col);
    height: auto;
    min-height: var(--pc-header-h);
    overflow: visible;
    z-index: 9999;
  }

  .fv-slider {
    top: 0;
  }

  body.admin-bar > .site-header {
    top: 32px;
  }
  .admin-bar .fv-slider {
    top: calc(var(--pc-header-h) + 32px);
  }
}
/* =========================================
PC: fixed が親 transform 等で無効化されるのを潰す
========================================= */
@media (min-width: 497px) {
  /* WPでありがちなラッパーの transform/filter が fixed を壊すのを無効化 */
  html,
  body,
  #page,
  .site,
  .site-content,
  .wrapper {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
  }

  /* ついでに確実に固定（右カラム位置） */
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: auto !important;
    right: max(40px, calc(50% - 480px)) !important;
    width: 496px !important;
    max-width: none !important;
    z-index: 99999 !important;
  }
}

.site-header::before,
.site-header::after {
  height: auto;
  min-height: var(--pc-header-h);
}