@charset "UTF-8";
/* ================================
   共通（Base / Fonts）
================================ */
/* サイト全体のデフォルト設定 */
body {
  /* 英数字は EB Garamond、日本語は 游ゴシック */
  font-family: 'EB Garamond', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic Medium', 'Yu Gothic', 'YuGothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  color: #141414;
  background-color: #fff;
}

/* original.css打ち消し */
#ch-plugin {
  display: none !important;
}
header {
  box-shadow: none;
}
main.fs-l-main {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
.fs-l-pageMain {
  max-width: none;
}
img {
  width: 100%;
  height: auto;
}
a {
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.3s,
    color 0.3s,
    background-color 0.3s;
  color: #fff;
}
a:hover {
  opacity: 0.7;
  text-decoration: none !important;
}
a:visited {
  text-decoration: none !important;
}
a:active {
  text-decoration: none !important;
}
a:focus {
  color: inherit;
  text-decoration: none !important;
  outline: none;
}
.p-cafe-drawer-nav__link,
.p-cafe-drawer-nav__link:visited,
.p-cafe-drawer-nav__link:active,
.p-cafe-drawer-nav__link:focus {
  color: var(--cafe-gray-dark);
  text-decoration: none;
  outline: none;
}

:root {
  /* テキスト系 */
  --cafe-black-main: #141414;

  --cafe-gray-main: #9d9d9e;

  --cafe-gray-dark: #686868;

  --cafe-gray-light: #a7abb1;

  --cafe-green: #495b39;

  /* BGカラー */
  --cafe-bg-gray-light: #f7f7f7;
  /* --cafe-bg-gray-light: #dcc2ff; */
  /* 色が分かりづらいので一時的に変更 */

  /* Layout: l-cafe-inner */
  --cafe-side-padding: 10vw;

  /* Font-size: */
  --cafe-section-h2-font-size: 10vw;
  --cafe-normal-font-size: 3.3vw;
}

@media (min-width: 768px) {
  :root {
    /* Layout: l-cafe-inner */
    --cafe-side-padding: 17vw;

    /* Font-size: */
    --cafe-section-h2-font-size: 5vw;
    --cafe-normal-font-size: 1.37vw;
  }
}

/* ==========================================================================
   Utility
   ========================================================================== */
/* Utility: Font */
/* A1明朝の代わり（しっぽり明朝） */
.u-font-mincho {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

/* 小塚ゴシックの代わり（Noto Sans JP） */
.u-font-noto {
  font-family: 'Noto Sans JP', sans-serif;
}

/* 太さの微調整用（必要に応じて） */
.u-fw-medium {
  font-weight: 500 !important;
}
.u-fw-bold {
  font-weight: 700 !important;
}
.u-fw-black {
  font-weight: 900 !important;
}

.u-fs-0-5 {
  font-size: 0.5em !important;
}
.u-fs-0-6 {
  font-size: 0.6em !important;
}
.u-fs-0-7 {
  font-size: 0.7em !important;
}
.u-fs-0-75 {
  font-size: 0.75em !important;
}

/* Utility: Color */
.u-color-white {
  color: #fff !important;
}
.u-color-gray-light {
  color: var(--cafe-gray-light) !important;
}

.u-color-gray {
  color: var(--cafe-gray-main) !important;
}

.u-color-gray-dark {
  color: var(--cafe-gray-dark) !important;
}

.u-color-green {
  color: var(--cafe-green) !important;
}

/* Utility: BG-Color */
.u-bg-gray-light {
  background-color: var(--cafe-bg-gray-light) !important;
}
.u-bg-white {
  background-color: #fff !important;
}

/* Utility: Alignment */
.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-right {
  text-align: right !important;
}

.u-m-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Utility: letter-spacing */
.u-ls-0 {
  letter-spacing: 0 !important;
}
.u-ls-0-1 {
  letter-spacing: 0.1em !important;
}
.u-ls-1 {
  letter-spacing: 1em !important;
}

/* Utility: line-height */
.u-lh-1 {
  line-height: 1 !important;
}

.u-lh-1-2 {
  line-height: 1.2 !important;
}

.u-lh-1-3 {
  line-height: 1.3 !important;
}

.u-lh-1-4 {
  line-height: 1.4 !important;
}

.u-lh-1-5 {
  line-height: 1.5 !important;
}

/* Utility: Display */
.u-d-block {
  display: block !important;
}

.u-d-none {
  display: none !important;
}

.u-d-flex {
  display: flex !important;
}

.u-d-inline-flex {
  display: inline-flex !important;
}

.u-d-grid {
  display: grid !important;
}

.u-d-inline-block {
  display: inline-block !important;
}

/* Utility: Positioning */
/* 親要素に指定する用 */
.u-rel {
  position: relative !important;
}

/* 子要素を浮かせる用 */
.u-abs {
  position: absolute !important;
}

/* 枠いっぱいに広げる（背景オーバーレイなどに便利） */
.u-abs-full {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 真ん中に配置するセット */
.u-abs-center {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Utility: Padding */
.u-pl-cafe-side-padding {
  padding-left: var(--cafe-side-padding) !important;
}

.u-pr-cafe-side-padding {
  padding-right: var(--cafe-side-padding) !important;
}

/* Utility: hidden */
/* 768px未満（スマホ）の時に要素を隠す */
@media (max-width: 767px) {
  .u-hidden-sp {
    display: none !important;
  }
}

/* 逆に、PCの時にハンバーガーボタンなどを隠したい場合は以下も用意すると便利です */
@media (min-width: 768px) {
  .u-hidden-pc {
    display: none !important;
  }
}

/* ==========================================================================
   アニメーション
   ========================================================================== */
/* フェードインの初期状態 */
.fadein {
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition:
    opacity 0.88s,
    transform 0.88s,
    visibility 0.88s;
}

/* スクロールして表示された時の状態 */
.fadein.fadein-has-started {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 初期状態：少し大きく、少しボケている */
.fadein-zoom {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03); /* 少し拡大 */
  filter: blur(2px); /* わずかにぼかすと質感が上がる */
  transition:
    opacity 1s cubic-bezier(0.33, 1, 0.68, 1),
    transform 1s cubic-bezier(0.33, 1, 0.68, 1),
    filter 1s ease;
}

/* 表示時 */
.fadein-zoom.fadein-has-started {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  filter: blur(0);
}

/* アニメーションの種類：FV用のじわーっとした演出（動きをさらに控えめに） */
.u-fv-reveal {
  opacity: 0;
  filter: blur(20px);
  transition:
    opacity 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  will-change: opacity, filter, transform;
}

/* 状態：アクティブになったら表示 */
.u-fv-reveal.is-active {
  opacity: 1;
  filter: blur(0);
}

/* ==========================================================================
   Layout: l-cafe-header
   ========================================================================== */
.l-cafe-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1900;
  padding: 5vw;
}
.l-cafe-header.is-fixed {
  position: fixed;
  padding: 2.5vw 5vw; /* 追従時は少しコンパクトに */
  background-color: rgba(255, 255, 255, 0.7); /* 背景を白に（少し透過） */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 追従時のロゴ・アイコン・ボタンの色調整 */
.l-cafe-header.is-fixed .c-cafe-logo__img,
.l-cafe-header.is-fixed .c-cafe-icon-link__img {
  /* ターゲットカラー #9d9d9e を再現する精密なフィルター設定 */
  filter: brightness(0) saturate(100%) invert(65%) sepia(2%) saturate(100%) hue-rotate(202deg) brightness(88%) contrast(95%) !important;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

.l-cafe-header.is-fixed .p-cafe-nav__link {
  color: var(--cafe-gray-main);
}

.l-cafe-header.is-fixed .c-cafe-hamburger__line::before,
.l-cafe-header.is-fixed .c-cafe-hamburger__line::after {
  background-color: var(--cafe-gray-main);
}

.l-cafe-header.is-fixed .c-cafe-btn-reserve {
  background-color: var(--cafe-gray-main);
}

/* --- 追従時（is-fixed）のホバーアクション --- */

/* 1. ロゴとアイコン画像（フィルターで #141414 を再現） */
.l-cafe-header.is-fixed .c-cafe-logo:hover .c-cafe-logo__img,
.l-cafe-header.is-fixed .c-cafe-icon-link:hover .c-cafe-icon-link__img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(93%) contrast(93%) !important;
  opacity: 1;
}

/* 2. ナビゲーションリンク */
.l-cafe-header.is-fixed .p-cafe-nav__link:hover {
  color: var(--cafe-black-main);
  opacity: 1;
}

/* 3. 予約ボタン */
.l-cafe-header.is-fixed .c-cafe-btn-reserve:hover {
  background-color: var(--cafe-black-main);
  opacity: 1;
}

.l-cafe-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   Component: Logo, Button, Hamburger
   ========================================================================== */
.c-cafe-logo__img {
  width: 22vw;
}
.c-cafe-btn-reserve {
  display: -webkit-inline-flex;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  color: #fff;
  padding: 2.1vw 7vw;
}
.l-cafe-header .c-cafe-btn-reserve {
  width: 40vw;
  background-color: rgba(255, 255, 255, 0.4);
}
.c-cafe-icon-link__img {
  width: 7.6vw;
  margin-left: 3vw;
}
.c-cafe-hamburger {
  width: 7vw;
  height: 6vw;
  position: relative;
  margin-top: -1.3vw;
  margin-left: 3.5vw;
  cursor: pointer;
}
/* 共通の線設定 */
.c-cafe-hamburger__line::before,
.c-cafe-hamburger__line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px; /* デザインに合わせて1px〜2pxで調整 */
  background-color: #fff;
  transition: all 0.3s ease;
  transition:
    transform 0.3s ease,
    top 0.3s ease,
    bottom 0.3s ease;
}

/* 通常時：上下に配置 */
.c-cafe-hamburger__line::before {
  top: 6px; /* 上の線の位置 */
}
.c-cafe-hamburger__line::after {
  bottom: 6px; /* 下の線の位置 */
}

/* ✖に変わる時 (is-active付与時) */
.c-cafe-hamburger.is-active .c-cafe-hamburger__line::before {
  top: 10px;
  transform: rotate(45deg);
}
.c-cafe-hamburger.is-active .c-cafe-hamburger__line::after {
  bottom: 9px;
  transform: rotate(-45deg);
}

/* ==========================================================================
   Project: p-cafe-drawer
   ========================================================================== */
.p-cafe-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100dvh;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 2000;
  transition: right 0.5s ease;
  overflow: auto;
}

.p-cafe-drawer.is-open {
  right: 0;
}

.p-cafe-drawer__inner {
  min-height: 100dvh;
  padding: 5vw 10vw 10vw;
  display: flex;
  flex-direction: column;
}

.p-cafe-drawer__reserve {
  padding-left: 1vw;
  margin-bottom: 10vw;
}

.p-cafe-drawer-nav__item {
  border-bottom: 1px solid var(--cafe-gray-main);
}

.p-cafe-drawer-nav__link {
  display: block;
  padding: 0.76em 0.6em 0.57em;
  font-family: 'EB Garamond', serif;
  font-size: 5vw;
  color: var(--cafe-gray-dark);
  text-decoration: none;
  letter-spacing: 0.15em;
  transition: color 0.3s ease;
}
.p-cafe-drawer-nav__link:hover,
.p-cafe-drawer-nav__link:active,
.p-cafe-drawer-nav__link:visited,
.p-cafe-drawer-nav__link:focus {
  color: var(--cafe-gray-dark);
}

.p-cafe-drawer__sns {
  margin: 10vw 0 8vw;
  text-align: left; /* デザイン通り左側に配置 */
}

.p-cafe-drawer__sns img {
  width: 6.3vw;
  height: auto;
  transition: filter 0.3s ease;
}

.p-cafe-drawer__footer {
  text-align: right;
}
.p-cafe-drawer__sub-nav li {
  line-height: 1;
}
.p-cafe-drawer__sub-nav a {
  color: var(--cafe-gray-main);
  font-size: 2.3vw;
  text-decoration: none;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.p-cafe-drawer__copyright {
  color: var(--cafe-gray-main);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8vw;
  margin-top: 2vw;
  letter-spacing: 0.15em;
}

.p-cafe-drawer .p-cafe-drawer-nav__link:hover,
.p-cafe-drawer .p-cafe-drawer__sub-nav a:hover {
  opacity: 1;
  color: var(--cafe-black-main);
}
.p-cafe-drawer__sns img:hover {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(8%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(93%) contrast(93%) !important;
}

/* 閉じるボタン（バツ印） */
.p-cafe-drawer__close {
  position: absolute;
  top: 5vw;
  right: 5vw;
  width: 7.5vw;
  height: 7.5vw;
  cursor: pointer;
  z-index: 2001;
}
.p-cafe-drawer__close span::before,
.p-cafe-drawer__close span::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--cafe-gray-dark);
  transition: all 0.3s ease;
}
/* 3. 初期状態（戻る時の目的地）：rotate(0deg) を必ず書く */
.p-cafe-drawer__close span::before {
  /* 横線に戻る時に「0度に戻る」という命令が必要 */
  transform: translateY(-5px) rotate(0deg);
}
.p-cafe-drawer__close span::after {
  transform: translateY(5px) rotate(0deg);
}

/* 4. ドロワーが開いている時（.is-openが付いた時）の設定 */
.p-cafe-drawer.is-open .p-cafe-drawer__close span::before {
  transform: translateY(0) rotate(45deg);
}
.p-cafe-drawer.is-open .p-cafe-drawer__close span::after {
  transform: translateY(0) rotate(-45deg);
}
/* オーバーレイの基本スタイル */
.p-cafe-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1999; /* ドロワー(2000)より下、ヘッダーより上に設定 */

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  /* 最初は隠す */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

/* ドロワーが開いている時（親要素やbodyにis-openが付く場合） */
.p-cafe-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Component: c-cafe-btn-reserve (ドロワー専用)
   ========================================================================== */
.c-cafe-btn-reserve--drawer {
  display: -webkit-inline-flex;
  background-color: var(--cafe-green);
  border-radius: 50px;
  color: #fff;
  padding: 2.3vw 8.5vw;
  width: 82%;
}
.c-cafe-btn-reserve--drawer:active {
  filter: brightness(0.85);
}

.c-cafe-btn-reserve--drawer img {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); /* 軽い影で浮かせる */
}

/* ==========================================================================
   Responsive: PC (768px以上)
   ========================================================================== */
@media (min-width: 768px) {
  .l-cafe-header {
    padding: 1.8vw 2.5vw;
  }
  .l-cafe-header.is-fixed {
    padding: 1.3vw 2.5vw;
  }
  .c-cafe-logo__img {
    width: 11vw;
  }
  .l-cafe-header__main {
    display: flex;
    align-items: center;
    gap: 3.5vw;
  }
  .p-cafe-nav__list {
    display: flex;
    gap: 2.7vw;
  }
  .p-cafe-nav__link {
    color: #fff;
    font-family: 'EB Garamond', serif;
    font-size: 1.2vw;
    letter-spacing: 0.12vw;
  }
  .p-cafe-nav__link:hover,
  .p-cafe-nav__link:active,
  .p-cafe-nav__link:visited,
  .p-cafe-nav__link:focus {
    color: #fff;
  }

  .l-cafe-header .c-cafe-btn-reserve {
    width: 17vw;
    padding: 0.7vw 2.7vw;
  }
  .c-cafe-icon-link__img {
    width: 2.65vw;
    margin-left: 1.2vw;
  }
  .c-cafe-hamburger {
    width: 2.8vw;
    height: 2vw;
    margin-top: 0;
    margin-left: 1.5vw;
    vertical-align: sub;
  }
  .p-cafe-drawer {
    width: 28%;
  }
  .p-cafe-drawer__inner {
    padding: 2.2vw 4vw 0;
  }
  .p-cafe-drawer__close {
    top: 1.5vw;
    right: 2.2vw;
    width: 3.2vw;
    height: 3.2vw;
  }
  .p-cafe-drawer__close span::before,
  .p-cafe-drawer__close span::after {
    top: 2vw;
  }
  .p-cafe-drawer__reserve {
    margin-bottom: 4vw;
    margin-left: 0;
    padding-left: 0;
    text-align: center;
  }
  .c-cafe-btn-reserve--drawer {
    width: 73%;
    color: #fff;
    padding: 0.6vw 2.4vw;
    width: 73%;
    margin-right: 1.2vw;
    margin-top: 0.25vw;
  }
  .p-cafe-drawer-nav__link {
    font-size: 1.6vw;
  }
  .p-cafe-drawer__sns {
    margin: 4vw 0 4vw;
  }
  .p-cafe-drawer__sns img {
    width: 2.3vw;
  }
  .p-cafe-drawer__sub-nav a {
    font-size: 0.9vw;
  }
  .p-cafe-drawer__copyright {
    font-size: 0.6vw;
    margin-top: 1vw;
  }
}

/* ================================
   共通（footer）
================================ */
/* Layout: l-cafe-footer */
.l-cafe-footer {
  background-color: #fff;
}

.p-cafe-footer__logo {
  position: absolute;
  top: -15vw;
  left: -2vw;
  width: 33vw;
}

/* メインコンテンツエリア（変形済み画像を背景に設定） */
.p-cafe-footer__main {
  background-image: url('https://amazeplus7.itembox.cloud/item/amepla-cafe/images/amepla-cafe-footer-bg_sp.webp');
  background-size: 100% auto;
  background-position: left top;
  background-repeat: no-repeat;
  margin-left: var(--cafe-side-padding);
  color: #fff;
  position: relative;
  z-index: 1;
}

.p-cafe-footer__main-content {
  padding: 19.8vw 8vw 10vw 0;
  text-align: right;
}

/* ナビゲーション */
.p-cafe-footer__nav {
  display: inline-block;
  width: 55%;
  margin-bottom: 5vw;
}

.p-cafe-footer__nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.p-cafe-footer__nav-item a {
  display: block;
  padding: 0.58em 0.5em;
  font-family: 'EB Garamond', serif;
  font-size: 4.1vw;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.2em;
}

/* 予約ボタン */
.p-cafe-footer__reserve {
  margin: 3vw 0 8vw;
}

.l-cafe-footer .c-cafe-btn-reserve {
  width: 55%;
  padding: 0.6em 2.2em;
}

/* 補助リンク・コピーライト */
.p-cafe-footer__utils {
  margin-bottom: 3vw;
}

.p-cafe-footer__utils li {
  line-height: 1;
}

.p-cafe-footer__utils a {
  font-size: 2.3vw;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.p-cafe-footer__copyright {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8vw;
  margin-top: 2vw;
  letter-spacing: 0.15em;
}

/* -----------------------------------------------------------
   PC調整 (768px以上)
   ----------------------------------------------------------- */
@media (min-width: 768px) {
  .p-cafe-footer__logo {
    width: 18vw;
    padding: 0;
    top: 0vw;
    left: -16.5vw;
  }

  .p-cafe-footer__main {
    background-image: url('https://amazeplus7.itembox.cloud/item/amepla-cafe/images/amepla-cafe-footer-bg_pc.webp');
    margin-top: 0;
    margin-left: 24vw;
    background-size: 100% auto;
  }

  .p-cafe-footer__main-content {
    padding: 13vw 4vw 2vw;
  }

  .p-cafe-footer__nav {
    width: 23%;
    margin-bottom: 0;
  }

  .p-cafe-footer__nav-item a {
    font-size: 1.2vw;
    padding: 1em 0.5em;
    text-align: left;
  }

  .p-cafe-footer__reserve {
    margin: 3vw 0;
  }

  .l-cafe-footer .c-cafe-btn-reserve {
    width: 23%;
    padding: 0.6em 2.6em;
  }

  .p-cafe-footer__utils {
    margin-bottom: 1vw;
  }

  .p-cafe-footer__utils a {
    font-size: 0.8vw;
  }

  .p-cafe-footer__copyright {
    font-size: 0.7vw;
    margin-top: 0;
  }
}

/* ================================
   共通パーツ（ボタン、セクション等）
================================ */
.l-cafe-section {
  padding: 12vw 0;
}
@media (min-width: 768px) {
  .l-cafe-section {
    padding: 6vw 0;
  }
}
.l-cafe-inner {
  width: 100%;
  padding-left: var(--cafe-side-padding);
  padding-right: var(--cafe-side-padding);
  margin-left: auto;
  margin-right: auto;
}

/* ------- Modifier: フルワイド用 ------- */
.l-cafe-inner--full {
  padding-left: 0;
  padding-right: 0;
}

/* ------- h2タイトル ------- */
.c-cafe-heading {
  font-family: 'EB Garamond', serif;
  font-size: 7vw;
  font-weight: 500;
  color: #333;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.c-cafe-heading span {
  display: inline-block;
  font-size: 0.45em;
  font-weight: 900;
  -webkit-text-stroke: 0.08em currentColor;
  margin: 0 0.7em;
  vertical-align: 0.18em;
  transform: scaleX(0.8);
}

@media (min-width: 768px) {
  .c-cafe-heading {
    font-size: 3.6vw;
    letter-spacing: 0.14em;
  }
}

/* ------- ノーマルテキスト ------ */
.c-cafe-normal-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--cafe-normal-font-size);
  font-weight: normal;
  color: var(--cafe-black-main);
  text-align: left;
  line-height: 2;
  letter-spacing: 0.25em;
  margin-bottom: 1em;
}
@media (min-width: 768px) {
}

/* ------- ボタン ------- */
.c-cafe-btn-more {
  display: inline-block;
}
.c-cafe-btn-more img {
  filter: drop-shadow(4px 4px 4px rgba(192, 192, 192, 0.3));
}

/* ------- FV ------- */
.c-cafe-main-visual {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面いっぱいに表示 */
  overflow: hidden;
  background-color: #000; /* 動画読み込み前のバックアップ */
}

/* 背景メディアのラップ（動画・画像共通） */
.c-cafe-main-visual__media-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 動画の上に薄いオーバーレイを敷いて視認性を確保 */
.c-cafe-main-visual__media-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15); /* デザインに応じて濃度調整 */
}

/* 背景メディア本体 */
.c-cafe-main-visual__media {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画面比率に関わらず隙間なく埋める */
  display: block;
}

/* 中央コンテンツ（画像等を中央配置するコンテナ） */
.c-cafe-main-visual__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-cafe-main-visual__logo {
  width: 56vw;
  max-width: 600px;
  margin-top: -5vw;
}

@media (min-width: 768px) {
  .c-cafe-main-visual__logo {
    width: 23vw;
    margin-top: 0;
  }
}
.c-cafe-main-visual__logo-img {
  width: 100%;
  height: auto;
  display: block;
}

.c-cafe-main-visual__text {
  position: absolute;
  bottom: 7vw;
  left: 7vw;
  width: 25vw;
  height: auto;
}

@media (min-width: 768px) {
  .c-cafe-main-visual__text {
    bottom: 4vw;
    left: 4vw;
    width: 11vw;
  }
}

/* スクロール指示器（Down） */
.c-cafe-main-visual__scroll {
  position: absolute;
  right: 7vw;
  bottom: 7vw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-cafe-main-visual__scroll-text {
  display: block;
  width: 8vw;
}

.c-cafe-main-visual__scroll-text img {
  width: 100%;
  height: auto;
}

/* --- 土台の線（静止しているグレーの線） --- */
/* .c-cafe-main-visual__scroll::before {
  content: '';
  width: 1px;
  height: 30vw;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 12vw;
  right: 1.5vw;
} */

/* --- 動く線（光が流れる演出） --- */
.c-cafe-main-visual__scroll::after {
  content: '';
  position: absolute;
  top: 30px; /* 画像の下端からの位置（Down画像の高さに合わせて調整） */
  right: 1.1vw;
  transform: translateX(-50%);
  width: 2px;
  height: 0;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));

  /* ぼわっとした発光感 */
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(255, 255, 255, 0.4);
  filter: blur(0.5px);

  /* 等速でループさせる */
  animation: scrollLineFlowVw 1.5s linear infinite;
}

/* アニメーションの内容は前回と同じでOK */
@keyframes scrollLineFlowVw {
  0% {
    /* 開始：起点から透明でスタート */
    top: 12vw;
    height: 0;
    opacity: 0;
  }
  25% {
    /* 伸びる：25%の地点で長さを 20vw まで広げる */
    top: 12vw;
    height: 20vw;
    opacity: 1;
  }
  75% {
    /* 移動：ガイド線の終端(12vw + 30vw = 42vw)に光の先端が届く位置まで移動
       top(22vw) + height(20vw) = 42vw */
    top: calc(12vw + 10vw);
    height: 20vw;
    opacity: 1;
  }
  100% {
    /* 消失：ガイド線の終端を完全に突き抜けて消える */
    top: calc(12vw + 30vw);
    height: 0;
    opacity: 0;
  }
}

/* --- 動く線（光が流れる演出） --- */
/* .c-cafe-main-visual__scroll::after {
  content: '';
  position: absolute;
  top: 30px;
  right: 1.1vw;
  transform: translateX(-50%);
  width: 2px;
  height: 30vw;
  background: linear-gradient(to bottom, transparent, #fff 50%, transparent);
  background-size: 100% 200%;
  animation: scrollLineFlowVw 2s linear infinite;
}

@keyframes scrollLineFlowVw {
  0% {
    top: 12vw;
    height: 0;
    opacity: 0;
  }
  15% {
    top: 12vw;
    height: 10vw;
    opacity: 1;
  }
  85% {
    top: calc(12vw + 20vw);
    height: 10vw;
    opacity: 1;
  }
  100% {
    top: calc(12vw + 30vw);
    height: 0;
    opacity: 0;
  }
} */

@media (min-width: 768px) {
  .c-cafe-main-visual__scroll {
    right: 4vw;
    bottom: 4vw;
  }
  /* .c-cafe-main-visual__scroll::before {
    width: 1px;
    height: 11.1vw;
    top: 4.55vw;
    right: 0.5vw;
  } */
  .c-cafe-main-visual__scroll::after {
    right: 0.47vw;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.22));
    animation: scrollLineFlowVwPC 2s linear infinite;
  }
  .c-cafe-main-visual__scroll-text {
    width: 3vw;
  }
}

/* PC専用のアニメーション定義（数値計算済み） */
@keyframes scrollLineFlowVwPC {
  0% {
    /* 開始：ガイド線の起点(4.55vw)から */
    top: 4.55vw;
    height: 0;
    opacity: 0;
  }
  25% {
    /* 伸びる：光の長さを 7vw 程度に設定 */
    top: 4.55vw;
    height: 7vw;
    opacity: 1;
  }
  75% {
    /* 移動：ガイド線の終端(4.55vw + 11.1vw = 15.65vw)の手前まで
       終点15.65vw - 光の長さ7vw = 8.65vw */
    top: 8.65vw;
    height: 7vw;
    opacity: 1;
  }
  100% {
    /* 消失：ガイド線の終端(15.65vw)を突き抜けて消える */
    top: 15.65vw;
    height: 0;
    opacity: 0;
  }
}

/* ------- テキスト ------- */
.c-cafe-section-head {
  margin-bottom: 12vw;
}

.c-cafe-section-head__sub {
  font-family: 'Shippori Mincho', 'Noto Sans JP', sans-serif;
  font-size: 3.4vw;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 0.9em;
}

.c-cafe-section-head__main {
  font-family: 'Shippori Mincho', serif;
  font-size: 6.3vw;
  letter-spacing: 0.15em;
  margin-bottom: 0.7em;
}

.c-cafe-section-head__lead {
  /* リード文全体の調整が必要な場合 */
}

.c-cafe-section-head .c-cafe-normal-text {
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* ------- メニューアイテム ------- */
.c-cafe-menu-list {
  display: flex;
  flex-direction: column;
  gap: 9.2vw;
  margin-bottom: 20vw;
}

.c-cafe-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 5vw;
}

.c-cafe-menu-item__icon {
  flex-shrink: 0;
  width: 14vw;
  margin-top: 2.5%;
}

.c-cafe-menu-item__icon img {
  width: 100%;
  height: auto;
  display: block;
}

.c-cafe-menu-item__title {
  font-family: 'EB Garamond', serif;
  font-size: 5.5vw;
  color: #555;
  margin-bottom: 0.2em;
  letter-spacing: 0.03em;
}

.c-cafe-menu-item__title span {
  font-family: 'Shippori Mincho', sans-serif;
  font-size: 4.2vw;
  font-weight: 500;
}

.c-cafe-menu-item__text {
  font-size: 2.4vw;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--cafe-gray-dark);
  margin-bottom: 0.3em;
}

.c-cafe-menu-item__scenario {
  font-size: 2.4vw;
  color: var(--cafe-gray-dark);
  display: flex;
  align-items: center;
  gap: 1.3vw;
  white-space: nowrap;
}

/* Seen.タグ */
.c-cafe-tag-img {
  flex-shrink: 0;
  width: 3em;
}

/* PC調整 (768px以上) */
@media (min-width: 768px) {
  .c-cafe-section-head {
    margin-bottom: 4vw;
  }
  .c-cafe-section-head__sub {
    font-size: 2vw;
    font-weight: 500;
    letter-spacing: 0.2em;
  }
  .c-cafe-section-head__main {
    font-size: 4.2vw;
    font-weight: 500;
    letter-spacing: 0.18em;
  }

  .c-cafe-menu-list {
    flex-direction: unset;
    justify-content: center;
    gap: 5vw;
    margin-bottom: 10vw;
  }

  .c-cafe-menu-item {
    display: block;
    gap: 2.5vw;
  }
  .c-cafe-menu-item__icon {
    width: 8vw;
    margin: 0 auto;
  }
  .c-cafe-menu-item:nth-child(n + 2) .c-cafe-menu-item__content {
    margin-left: 2vw;
  }
  .c-cafe-menu-item__title {
    font-size: 2vw;
    font-weight: 500;
    margin-top: 1em;
  }
  .c-cafe-menu-item__title span {
    font-size: 1.6vw;
    font-weight: 600;
  }
  .c-cafe-menu-item__text {
    font-size: 0.7vw;
    line-height: 2;
  }
  .c-cafe-menu-item__scenario {
    font-size: 0.6vw;
    gap: 0.2vw;
    margin-top: 1em;
    letter-spacing: 0.05em;
  }
  .c-cafe-tag {
    font-size: 0.8vw;
  }
}

/* ------- メニューアイテム : ランチ・カフェ・ディナー ------- */
.c-cafe-time-block {
  width: 100%;
  /* 背景の切り替え：
     上側75%を白、残りを透明（セクションのグレーが見える）に設定。
     画像が背景の境目に重なることで、デザインの「被り」を再現します。
  */
  background: linear-gradient(to bottom, #fff 0%, #fff 76%, transparent 76%, transparent 100%);
  padding-top: 16vw; /* ブロックごとの上部余白 */
  padding-bottom: 7vw;
}
@media (max-width: 767px) {
  .c-cafe-time-block:first-of-type {
    padding-top: 20vw;
  }
}

.c-cafe-time-block__head {
  text-align: left;
  margin-bottom: 5vw;
  padding-left: var(--cafe-side-padding);
}

/* ラベル：／ Lunch Time */
.c-cafe-time-block__label {
  font-family: 'EB Garamond', serif;
  font-size: 4.8vw;
  font-weight: 500;
  color: var(--cafe-black-main);
  letter-spacing: 0.08em;
  margin-bottom: 0.4em;
}
.c-cafe-time-block__label span {
  display: inline-block;
  font-size: 0.45em;
  font-weight: 900;
  -webkit-text-stroke: 0.08em currentColor;
  margin-right: 0.7em;
  vertical-align: 0.18em;
  transform: scaleX(0.8);
}

/* タイトル：身体を整える食事 */
.c-cafe-time-block__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 8.3vw;
  font-weight: 500;
  color: var(--cafe-black-main);
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
}

/* リード文：管理栄養士監修... */
.c-cafe-time-block__lead {
  font-size: 3.6vw;
  line-height: 1.8;
  letter-spacing: 0.15em;
  color: var(--cafe-gray-main);
}

/* 画像エリア：左右いっぱい */
.c-cafe-time-block__image {
  width: 100%;
}

.c-cafe-time-block__image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .c-cafe-time-block {
    background: #fff;
    padding-top: 8vw;
    padding-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .c-cafe-time-block:nth-child(odd) {
    flex-direction: row-reverse;
  }
  .c-cafe-time-block__head {
    width: 47%;
    flex-shrink: 0;
    padding-left: 0;
    padding-bottom: 1.8vw;
    margin-bottom: 0;
    border-bottom: 7.5vw solid #f7f7f7;
  }
  .c-cafe-time-block__label {
    font-size: 2vw;
    text-align: center;
  }
  .c-cafe-time-block__title {
    font-size: 2.8vw;
    letter-spacing: 0.15em;
    text-align: center;
  }
  .c-cafe-time-block__lead {
    font-size: 1.07vw;
    text-align: center;
    letter-spacing: 0.25em;
  }
  .c-cafe-time-block__image {
    padding: 0 !important;
  }
}