/* --- ベースとなる変数定義（3色対応） --- */
:root {
  --main-color: #795548; /* メイン（ロゴ、見出し、電話ボタンなど） */
  --sub-color: #f5f5dc; /* サブ（背景色や薄いセクション用） */
  --accent-color: #d84315; /* アクセント（目立たせるバッジや小さなボタンなど） */
  --line-color: #06c755;
}

/* --- テーマ適用用のユーティリティクラス（追加） --- */
.theme-text-main {
  color: var(--main-color) !important;
}
.theme-bg-main {
  background-color: var(--main-color) !important;
  color: #fff !important;
}
.theme-bg-sub {
  background-color: var(--sub-color) !important;
}
.theme-bg-accent {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  scroll-behavior: smooth; /* ページ内リンクでスムーズにスクロールさせる */
}

/* --- 営業用デモ設定ボタン --- */
.demo-settings-btn {
  position: fixed;
  bottom: 30px;
  left: 20px;
  z-index: 1050;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin-slow 10s linear infinite;
}
@keyframes spin-slow {
  100% {
    transform: rotate(360deg);
  }
}

/* パネル内のカラーボタン */
.color-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  padding: 0;
}

/* --- 連絡先フローティングボタン（画面右下） --- */
.fixed-bottom-right {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn-contact {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  transition: transform 0.2s;
}
.btn-contact:hover {
  transform: scale(1.1);
  color: #fff;
}
.btn-mail {
  background-color: #6c757d;
}
.btn-line {
  background-color: var(--line-color);
}
/* --- 電話ボタンの修正 --- */
.btn-phone {
  width: 65px;
  height: 65px;
  font-size: 1.6rem;
  background-color: var(
    --main-color
  ); /* ←ここをメインカラーに連動させました！ */
  color: #ffffff;
  animation: pulse 2s infinite;
}
/* 電話ボタンの波紋アニメーションの色もメインカラーに合わせる */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--main-color);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* --- ナビゲーションのカスタムスタイル --- */
.navbar {
  transition: all 0.3s ease; /* スクロール時の変化を滑らかに */
}

/* リンクテキストの基本設定 */
.navbar .nav-link {
  position: relative;
  color: #555;
  transition: color 0.3s;
  padding-right: 1.2rem !important;
  padding-left: 1.2rem !important;
  font-size: 1.05rem;
}

/* ホバー時の下線アニメーション（中央から左右に広がる） */
.navbar .hover-effect::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 5px; /* 文字の少し下に配置 */
  left: 50%;
  background-color: var(--main-color); /* テーマカラーに連動 */
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* ホバーした時、または現在いるページ（active）の下線を表示 */
.navbar .hover-effect:hover::after,
.navbar .nav-link.active::after {
  width: 70%;
}

/* ホバーした時、または現在いるページ（active）の文字色をテーマカラーに */
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--main-color) !important;
}

/* スマホ閲覧時（ハンバーガーメニュー展開時）の余白調整 */
@media (max-width: 991.98px) {
  .navbar .nav-link {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }
  /* スマホでは下線アニメーションを無効化（タップ操作のみのため） */
  .navbar .hover-effect::after {
    display: none;
  }
}

/* --- 透過ヘッダー用のアニメーションとスタイル --- */

/* 1. 全体のトランジション（変化を滑らかに） */
.transition-nav {
  transition: all 0.4s ease-in-out;
  background-color: transparent; /* 初期は透明 */
}

/* 2. スクロール後にJSで付与されるクラス（完全版グラスモーフィズム） */
.nav-scrolled {
  background-color: color-mix(
    in srgb,
    var(--sub-color) 30%,
    transparent
  ) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
  transition: all 0.4s ease;
}

/* 3. 文字色の制御（初期は動画/画像の上なので白） */
.nav-text-color {
  color: #ffffff !important;
  transition: color 0.4s;
}

/* スクロール後はテーマカラーに変更 */
.nav-scrolled .nav-text-color {
  color: var(--main-color) !important;
}

/* 4. ホバーエフェクトの下線の色も連動させる */
.navbar .hover-effect::after {
  background-color: #ffffff; /* 初期は白線 */
}
.nav-scrolled .hover-effect::after {
  background-color: var(--main-color); /* スクロール後はテーマカラー線 */
}

/* 5. スマホ用ハンバーガーアイコンの色制御（CSSフィルターで白黒反転させるテクニック） */
.custom-toggler {
  filter: invert(1) brightness(2); /* 初期は白くする */
  transition: filter 0.4s;
}
.nav-scrolled .custom-toggler {
  filter: none; /* スクロール後は元の黒系に戻す */
}

/* 6. スマホでメニューを開いた時の背景色対応 */
@media (max-width: 991.98px) {
  /* 透明な時にメニューを開くと文字が読めないため、半透明の黒背景を敷く */
  .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 10px;
    transition: background-color 0.4s;
  }
}

/* --- ヒーローエリア用スタイル --- */

/* 画像・動画を要素いっぱいに歪みなく広げる */
.object-fit-cover {
  object-fit: cover;
}

/* スクロール指示の矢印をバウンドさせるアニメーション */
.animate-bounce {
  display: inline-block;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-7px);
  }
}

/* ヒーローエリア内の文字（z-index調整） */
#hero-section .carousel-caption,
#hero-section .translate-middle {
  z-index: 10;
}

/* お知らせリストのホバーエフェクト */
.transition-hover {
  transition: background-color 0.3s ease;
}
.list-group-item-action.transition-hover:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* note動的読み込み時のタイトル省略（2行まで表示） */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Googleカレンダー用レスポンシブスタイル --- */
.gcal-container {
  position: relative;
  padding-bottom: 80%; /* スマホ閲覧時の縦横比（少し縦長） */
  height: 0;
  overflow: hidden;
  background-color: #f8f9fa;
}

@media (min-width: 768px) {
  .gcal-container {
    padding-bottom: 50%; /* PC閲覧時の縦横比（横長） */
  }
}

.gcal-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hover-opacity-100:hover {
  opacity: 1 !important;
}

/* =========================================
   下層ページ（Menu, Shopなど）の共通スタイル
   ========================================= */

/* 1. ページ上部のヒーローエリア（タイトル部分） */
.page-hero {
  height: 40vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* メニューページ専用の背景画像 */
.bg-menu-hero {
  background-image: url("https://images.unsplash.com/photo-1497935586351-b67a49e012bf?auto=format&fit=crop&w=1920&q=80");
}

/* 2. メニューカードの画像ラッパー（枠） */
.menu-img-wrap {
  height: 200px;
}

/* 横長レイアウト（Food & Sweets）の時の画像ラッパー */
.menu-img-wrap-horizontal {
  min-height: 200px;
}

/* スマホ表示時の横長カードを縦積みにする調整（レスポンシブ対応） */
@media (max-width: 575.98px) {
  .w-sm-50 {
    width: 100% !important;
  }
  .flex-sm-row {
    flex-direction: column !important;
  }
}

/* Shopページ専用の背景画像（カフェの焙煎機や豆のイメージ） */
.bg-shop-hero {
  background-image: url("https://images.unsplash.com/photo-1453614512568-c4024d13c247?auto=format&fit=crop&w=1920&q=80");
}

/* Instagramボタンの「座布団」と文字色の設定 */
.btn-insta {
  /* インスタ特有のグラデーション背景 */
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  ) !important;

  /* アイコンの色を白に固定 */
  color: #ffffff !important;

  /* 枠線を消して影を強調 */
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ホバーした時に少し明るくして「押せる感」を出す */
.btn-insta:hover {
  opacity: 0.9;
  color: #ffffff !important;
}

/* --- フローティングボタンの表示制御 --- */

/* 1. 基本は「非表示」にする（PCなど大画面時） */
#floating-container {
  display: none;
}

/* 2. 画面幅が「991.98px以下（スマホ・タブレット）」の時だけ表示する */
@media (max-width: 991.98px) {
  #floating-container {
    display: block;
  }
}