/*
 * みかも喫茶 - カスタムスタイル
 * 温かみのあるレトロな喫茶店デザイン
 */

/* ========================================
   CSS変数（カラーパレット）
   ======================================== */
:root {
  /* メインカラー */
  --cafe-dark-brown: #3D2314;
  --cafe-brown: #5D4037;
  --cafe-medium-brown: #795548;
  --cafe-light-brown: #A1887F;

  /* アクセントカラー */
  --cafe-gold: #C9A66B;
  --cafe-amber: #D4A574;
  --cafe-copper: #B87333;

  /* 背景色 */
  --cafe-cream: #FDF8EF;
  --cafe-warm-white: #FFFAF5;
  --cafe-beige: #F5F0E6;
  --cafe-soft-brown: #EDE0D4;

  /* テキスト */
  --cafe-text-dark: #2C1810;
  --cafe-text-medium: #5D4037;
  --cafe-text-light: #8D6E63;

  /* シャドウ */
  --cafe-shadow: rgba(61, 35, 20, 0.1);
  --cafe-shadow-dark: rgba(61, 35, 20, 0.2);

  /* ボーダー */
  --cafe-border: #D7CCC8;
  --cafe-border-dark: #BCAAA4;
}

/* ========================================
   Google Fonts インポート
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* ========================================
   基本スタイル
   ======================================== */
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--cafe-cream);
  color: var(--cafe-text-dark);
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* 背景パターン（繊細なテクスチャ） */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(201, 166, 107, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(93, 64, 55, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(212, 165, 116, 0.03) 0%, transparent 50%);
  z-index: -1;
}

/* ========================================
   ヘッダー
   ======================================== */
.site-header,
#site-header,
header.site-header {
  background: linear-gradient(135deg, var(--cafe-dark-brown) 0%, var(--cafe-brown) 100%) !important;
  box-shadow: 0 4px 20px var(--cafe-shadow-dark);
  border-bottom: 3px solid var(--cafe-gold);
  position: relative;
}

/* ヘッダーの装飾ライン */
.site-header::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cafe-amber) 20%,
    var(--cafe-gold) 50%,
    var(--cafe-amber) 80%,
    transparent 100%
  );
}

/* サイトタイトル */
.site-header .site-title,
.site-header-logo,
.navbar-brand,
.site-title a {
  font-family: 'Noto Serif JP', 'Playfair Display', serif !important;
  font-weight: 600 !important;
  color: var(--cafe-cream) !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}

.site-title a:hover {
  color: var(--cafe-gold) !important;
  text-decoration: none;
}

/* ========================================
   ロゴスタイル（上品な表示）
   ======================================== */
.site-header-logo img,
.site-header-logo a img,
#site-header img,
header.site-header img,
.custom-logo,
.site-logo img {
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  opacity: 0.98 !important;
}

.site-header-logo a:hover img,
#site-header a:hover img,
header.site-header a:hover img {
  filter: drop-shadow(0 4px 12px rgba(201, 166, 107, 0.4)) brightness(1.05) !important;
  transform: scale(1.02) !important;
}

/* ロゴコンテナーの余白調整 */
.site-header-logo,
#site-header .site-header-logo {
  padding: 1rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* モバイルでのロゴサイズ調整 */
@media (max-width: 767px) {
  .site-header-logo img,
  .site-header-logo a img,
  #site-header img,
  header.site-header img,
  .custom-logo,
  .site-logo img {
    max-height: 60px !important;
  }
  
  .site-header-logo,
  #site-header .site-header-logo {
    padding: 0.8rem 0 !important;
  }
}

/* タブレットでのロゴサイズ調整 */
@media (min-width: 768px) and (max-width: 991px) {
  .site-header-logo img,
  .site-header-logo a img,
  #site-header img,
  header.site-header img,
  .custom-logo,
  .site-logo img {
    max-height: 70px !important;
  }
}

/* ナビゲーション */
.global-nav,
.navbar-nav,
.main-navigation {
  background: transparent !important;
}

.global-nav a,
.navbar-nav .nav-link,
.main-navigation a,
.global-nav-list > li > a {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  color: var(--cafe-cream) !important;
  letter-spacing: 0.05em;
  padding: 0.8em 1.2em !important;
  position: relative;
  transition: all 0.3s ease;
}

.global-nav-list > li > a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--cafe-gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.global-nav-list > li > a:hover::after {
  width: 80%;
}

.global-nav a:hover,
.navbar-nav .nav-link:hover,
.global-nav-list > li > a:hover {
  color: var(--cafe-gold) !important;
}

/* サブメニュー */
.global-nav .sub-menu,
.dropdown-menu {
  background: var(--cafe-warm-white) !important;
  border: 1px solid var(--cafe-border);
  border-radius: 8px;
  box-shadow: 0 8px 25px var(--cafe-shadow-dark);
}

.global-nav .sub-menu a,
.dropdown-menu a {
  color: var(--cafe-text-dark) !important;
}

.global-nav .sub-menu a:hover,
.dropdown-menu a:hover {
  background: var(--cafe-beige) !important;
  color: var(--cafe-brown) !important;
}

/* ========================================
   メインビジュアル / ヒーローセクション
   ======================================== */
.home-hero,
.hero-section,
.main-visual,
.vk_slider,
.swiper-slide {
  position: relative;
}

.home-hero::before,
.hero-section::before,
.main-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(61, 35, 20, 0.4) 0%,
    rgba(61, 35, 20, 0.2) 50%,
    rgba(61, 35, 20, 0.5) 100%
  );
  z-index: 1;
}

/* ヒーローテキスト */
.hero-text,
.main-visual-text,
.vk_slider_item_caption {
  font-family: 'Noto Serif JP', serif !important;
  color: var(--cafe-cream);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}

/* ========================================
   見出しスタイル
   ======================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
  font-family: 'Noto Serif JP', 'Playfair Display', serif !important;
  color: var(--cafe-dark-brown);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* セクション見出し装飾 */
.main h2,
.entry-content h2 {
  position: relative;
  text-align: center;
  padding-bottom: 1em;
  margin-bottom: 2em;
  margin-top: 2em;
}

.main h2::after,
.entry-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--cafe-gold), var(--cafe-amber));
  border-radius: 2px;
}

/* コーヒーカップアイコン装飾 */
.main h2::before,
.entry-content h2::before {
  content: '\2615';
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.5em;
  opacity: 0.7;
}

/* h3スタイル */
.main h3,
.entry-content h3 {
  border-left: 4px solid var(--cafe-gold);
  padding-left: 1em;
  margin: 1.5em 0 1em;
}

/* ========================================
   コンテンツエリア
   ======================================== */
.site-body,
.site-content,
#main,
main {
  background-color: var(--cafe-warm-white);
}

.container,
.site-body-container {
  max-width: 1200px;
  padding: 2rem;
}

/* ========================================
   カードスタイル
   ======================================== */
.card,
.vk_post,
.media,
.vk_prBlocks_item {
  background: var(--cafe-warm-white) !important;
  border: 1px solid var(--cafe-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px var(--cafe-shadow) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow: hidden;
}

.card:hover,
.vk_post:hover,
.media:hover,
.vk_prBlocks_item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px var(--cafe-shadow-dark) !important;
  border-color: var(--cafe-gold) !important;
}

/* カードヘッダー装飾 */
.card-header,
.vk_post_imgOuter {
  position: relative;
  overflow: hidden;
}

.vk_post_imgOuter::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cafe-gold), var(--cafe-amber), var(--cafe-gold));
}

/* ========================================
   ボタンスタイル
   ======================================== */
.btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em;
  padding: 0.8em 2em !important;
  border-radius: 30px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

/* プライマリボタン */
.btn-primary,
.btn-main,
.vk_button_link_primary,
.wp-block-button__link,
.btn-default {
  background: linear-gradient(135deg, var(--cafe-brown) 0%, var(--cafe-dark-brown) 100%) !important;
  border: none !important;
  color: var(--cafe-cream) !important;
  box-shadow: 0 4px 15px var(--cafe-shadow) !important;
}

.btn-primary:hover,
.btn-main:hover,
.vk_button_link_primary:hover,
.wp-block-button__link:hover,
.btn-default:hover {
  background: linear-gradient(135deg, var(--cafe-gold) 0%, var(--cafe-amber) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--cafe-shadow-dark) !important;
  color: var(--cafe-dark-brown) !important;
}

/* ボタンのシャイン効果 */
.btn::before,
.wp-block-button__link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.btn:hover::before,
.wp-block-button__link:hover::before {
  left: 100%;
}

/* ========================================
   フォーム要素
   ======================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: 'Noto Sans JP', sans-serif !important;
  background: var(--cafe-warm-white) !important;
  border: 2px solid var(--cafe-border) !important;
  border-radius: 8px !important;
  padding: 0.8em 1.2em !important;
  transition: all 0.3s ease !important;
  color: var(--cafe-text-dark) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--cafe-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.2) !important;
  background: white !important;
}

/* プレースホルダー */
::placeholder {
  color: var(--cafe-text-light) !important;
  font-style: italic;
}

/* ========================================
   フッター
   ======================================== */
.site-footer,
footer {
  background: linear-gradient(135deg, var(--cafe-dark-brown) 0%, #2C1810 100%) !important;
  color: var(--cafe-beige) !important;
  border-top: 4px solid var(--cafe-gold) !important;
  position: relative;
}

/* フッター装飾 */
.site-footer::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(180deg, transparent, rgba(61, 35, 20, 0.1));
}

.site-footer a {
  color: var(--cafe-amber) !important;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: var(--cafe-gold) !important;
}

/* フッターウィジェット */
.footer-widget,
.site-footer .widget {
  padding: 2em;
}

.site-footer .widget-title {
  color: var(--cafe-gold) !important;
  border-bottom: 2px solid var(--cafe-amber);
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

/* コピーライト */
.site-footer-copyright,
.copyright {
  background: rgba(0, 0, 0, 0.2);
  padding: 1.5em;
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.1em;
}

/* フッターコピーライトテキストのコントラスト改善（モバイル最適化） */
.site-footer-copyright p,
.copyright p {
  color: #F5F0E6 !important; /* 明るいベージュで高コントラスト */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
}

/* フッターナビゲーションのコントラスト改善 */
.footer-nav,
.footer-nav-list {
  background: transparent !important;
}

.footer-nav a,
.footer-nav-list a,
.footer-nav-list li a {
  color: #F5F0E6 !important; /* 明るいベージュで高コントラスト */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
  padding: 0.8em 1em !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(245, 240, 230, 0.2) !important;
}

.footer-nav a:hover,
.footer-nav-list a:hover,
.footer-nav-list li a:hover {
  color: #C9A66B !important; /* ゴールドでホバー */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
  background: rgba(201, 166, 107, 0.1) !important;
}

/* フッターウィジェットのテキストコントラスト改善 */
.site-footer .widget,
.footer-widget {
  color: #F5F0E6 !important; /* 明るいベージュで高コントラスト */
}

.site-footer .widget p,
.footer-widget p,
.site-footer .widget li,
.footer-widget li {
  color: #F5F0E6 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  line-height: 1.8 !important;
}

.site-footer .widget a,
.footer-widget a {
  color: #C9A66B !important; /* ゴールドでリンク */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(201, 166, 107, 0.5) !important;
  transition: all 0.3s ease !important;
}

.site-footer .widget a:hover,
.footer-widget a:hover {
  color: #D4A574 !important; /* より明るいゴールドでホバー */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
  text-decoration-color: #D4A574 !important;
}

/* フッターウィジェットの見出し */
.site-footer .widget-title,
.footer-widget .widget-title {
  color: #C9A66B !important; /* ゴールドで見出し */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 600 !important;
  border-bottom-color: rgba(201, 166, 107, 0.5) !important;
}

/* モバイル最適化：フッターのテキストサイズとコントラスト */
@media (max-width: 767px) {
  .site-footer-copyright,
  .copyright {
    padding: 1.2em 1em !important;
    font-size: 0.85em !important;
  }

  .site-footer-copyright p,
  .copyright p {
    font-size: 0.9em !important;
    line-height: 1.9 !important;
    color: #FDF8EF !important; /* より明るい色でモバイルでの可読性向上 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .footer-nav a,
  .footer-nav-list a,
  .footer-nav-list li a {
    font-size: 0.95em !important;
    padding: 0.7em 0.8em !important;
    color: #FDF8EF !important; /* より明るい色でモバイルでの可読性向上 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .site-footer .widget,
  .footer-widget {
    padding: 1.5em 1em !important;
  }

  .site-footer .widget p,
  .footer-widget p,
  .site-footer .widget li,
  .footer-widget li {
    font-size: 0.9em !important;
    color: #FDF8EF !important; /* より明るい色でモバイルでの可読性向上 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .site-footer .widget a,
  .footer-widget a {
    font-size: 0.95em !important;
    color: #C9A66B !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .site-footer .widget-title,
  .footer-widget .widget-title {
    font-size: 1.05em !important;
    color: #C9A66B !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }
}

/* ========================================
   サイドバー / ウィジェット
   ======================================== */
.sidebar,
#sidebar,
aside.widget-area {
  background: var(--cafe-beige);
  border-radius: 12px;
  padding: 1.5em;
}

.widget {
  background: var(--cafe-warm-white) !important;
  border: 1px solid var(--cafe-border) !important;
  border-radius: 10px !important;
  padding: 1.5em !important;
  margin-bottom: 1.5em !important;
  box-shadow: 0 2px 10px var(--cafe-shadow) !important;
}

.widget-title,
.widget .widget-title {
  font-size: 1.1em !important;
  color: var(--cafe-brown) !important;
  border-left: 4px solid var(--cafe-gold) !important;
  padding-left: 1em !important;
  margin-bottom: 1em !important;
  background: transparent !important;
}

.widget ul {
  list-style: none !important;
  padding: 0 !important;
}

.widget ul li {
  padding: 0.5em 0 !important;
  border-bottom: 1px dashed var(--cafe-border) !important;
}

.widget ul li:last-child {
  border-bottom: none !important;
}

.widget ul li a {
  color: var(--cafe-text-medium) !important;
  transition: all 0.3s ease !important;
  display: block;
  padding-left: 1em;
  position: relative;
}

.widget ul li a::before {
  content: '\25B8';
  position: absolute;
  left: 0;
  color: var(--cafe-gold);
  transition: transform 0.3s ease;
}

.widget ul li a:hover {
  color: var(--cafe-brown) !important;
  padding-left: 1.5em;
}

.widget ul li a:hover::before {
  transform: translateX(5px);
}

/* ========================================
   記事リスト / アーカイブ
   ======================================== */
.vk_posts,
.post-list {
  display: grid;
  gap: 2em;
}

.vk_post_title,
.post-title,
.entry-title {
  font-family: 'Noto Serif JP', serif !important;
  color: var(--cafe-dark-brown) !important;
}

.vk_post_title a,
.entry-title a {
  color: var(--cafe-dark-brown) !important;
  transition: color 0.3s ease;
}

.vk_post_title a:hover,
.entry-title a:hover {
  color: var(--cafe-gold) !important;
}

.vk_post_excerpt,
.post-excerpt {
  color: var(--cafe-text-medium) !important;
  font-size: 0.95em;
  line-height: 1.8;
}

/* 投稿メタ情報 */
.vk_post_meta,
.post-meta,
.entry-meta {
  color: var(--cafe-text-light) !important;
  font-size: 0.85em;
}

/* カテゴリー・タグ */
.cat-links a,
.tag-links a,
.vk_post_cat,
.taxonomy-label {
  background: var(--cafe-beige) !important;
  color: var(--cafe-brown) !important;
  padding: 0.3em 0.8em !important;
  border-radius: 20px !important;
  font-size: 0.8em !important;
  transition: all 0.3s ease !important;
  border: 1px solid var(--cafe-border) !important;
}

.cat-links a:hover,
.tag-links a:hover,
.vk_post_cat:hover {
  background: var(--cafe-gold) !important;
  color: var(--cafe-dark-brown) !important;
  border-color: var(--cafe-gold) !important;
}

/* ========================================
   ページネーション
   ======================================== */
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin: 3em 0;
}

.pagination a,
.pagination span,
.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 45px;
  background: var(--cafe-warm-white) !important;
  border: 2px solid var(--cafe-border) !important;
  border-radius: 50% !important;
  color: var(--cafe-text-medium) !important;
  font-weight: 500;
  transition: all 0.3s ease !important;
}

.pagination a:hover,
.page-numbers:hover {
  background: var(--cafe-brown) !important;
  border-color: var(--cafe-brown) !important;
  color: var(--cafe-cream) !important;
  transform: scale(1.1);
}

.pagination .current,
.page-numbers.current {
  background: var(--cafe-gold) !important;
  border-color: var(--cafe-gold) !important;
  color: var(--cafe-dark-brown) !important;
}

/* ========================================
   スクロールトップボタン
   ======================================== */
.pagetop,
.scroll-top,
#page-top,
.vk-mobile-nav-menu-btn {
  background: linear-gradient(135deg, var(--cafe-brown), var(--cafe-dark-brown)) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px var(--cafe-shadow-dark) !important;
  transition: all 0.3s ease !important;
}

.pagetop:hover,
.scroll-top:hover,
#page-top:hover {
  background: linear-gradient(135deg, var(--cafe-gold), var(--cafe-amber)) !important;
  transform: translateY(-5px);
}

/* ========================================
   テーブルスタイル
   ======================================== */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cafe-warm-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--cafe-shadow);
}

th {
  background: var(--cafe-brown) !important;
  color: var(--cafe-cream) !important;
  font-weight: 600;
  padding: 1em;
  text-align: left;
}

td {
  padding: 1em;
  border-bottom: 1px solid var(--cafe-border);
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--cafe-beige);
}

/* ========================================
   引用スタイル
   ======================================== */
blockquote {
  background: var(--cafe-beige) !important;
  border-left: 4px solid var(--cafe-gold) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 1.5em 2em !important;
  margin: 2em 0 !important;
  font-style: italic;
  position: relative;
}

blockquote::before {
  content: '\201C';
  font-family: 'Playfair Display', serif;
  font-size: 4em;
  color: var(--cafe-gold);
  position: absolute;
  top: -0.2em;
  left: 0.2em;
  opacity: 0.3;
}

/* ========================================
   画像スタイル
   ======================================== */
.wp-block-image img,
.entry-content img {
  border-radius: 8px !important;
  box-shadow: 0 4px 15px var(--cafe-shadow);
  transition: all 0.4s ease;
}

.wp-block-image:hover img,
figure:hover img {
  box-shadow: 0 8px 25px var(--cafe-shadow-dark);
  transform: scale(1.02);
}

/* 画像キャプション */
figcaption,
.wp-caption-text {
  font-size: 0.9em !important;
  color: var(--cafe-text-light) !important;
  text-align: center;
  font-style: italic;
  margin-top: 0.5em;
}

/* ========================================
   アニメーション
   ======================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes steam {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-10px) scale(1.1);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0;
  }
}

/* フェードインアニメーション適用 */
.card,
.vk_post,
article,
.widget,
.vk_prBlocks_item {
  animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   Lightning テーマ固有の調整
   ======================================== */
/* VK Blocks 調整 */
.vk_prBlocks_item,
.vk_flow,
.vk_borderBox {
  background: var(--cafe-warm-white) !important;
  border-radius: 12px !important;
  border: 1px solid var(--cafe-border) !important;
}

.vk_prBlocks_item_title,
.vk_flow_title {
  font-family: 'Noto Serif JP', serif !important;
  color: var(--cafe-dark-brown) !important;
}

.vk_prBlocks_item_icon {
  color: var(--cafe-gold) !important;
}

/* VK ボタン */
.vk_button .btn {
  border-radius: 30px !important;
}

/* VK 見出し */
.is-style-vk-heading-plain,
.is-style-vk-heading-background_fill_lightgray,
.is-style-vk-heading-double_black,
.is-style-vk-heading-double_bottomborder_black {
  font-family: 'Noto Serif JP', serif !important;
}

/* ========================================
   特別セクション - メニュー表示
   ======================================== */
.menu-section,
.cafe-menu,
.wp-block-group.is-style-vk-group-solid {
  background: linear-gradient(135deg, var(--cafe-beige) 0%, var(--cafe-soft-brown) 100%) !important;
  padding: 2em !important;
  border-radius: 15px !important;
  position: relative;
}

/* ========================================
   営業時間・アクセス情報
   ======================================== */
.info-box,
.business-hours,
.wp-block-group.is-style-vk-group-solid-roundcorner {
  background: var(--cafe-warm-white) !important;
  border: 2px solid var(--cafe-gold) !important;
  border-radius: 12px !important;
  padding: 2em !important;
}

/* ========================================
   パンくずリスト
   ======================================== */
.breadcrumb,
.vk_breadcrumb {
  background: var(--cafe-beige) !important;
  padding: 1em 1.5em !important;
  border-radius: 8px !important;
  margin-bottom: 2em !important;
}

.breadcrumb a,
.vk_breadcrumb a {
  color: var(--cafe-brown) !important;
}

.breadcrumb a:hover,
.vk_breadcrumb a:hover {
  color: var(--cafe-gold) !important;
}

/* ========================================
   レスポンシブ対応
   ======================================== */
@media (max-width: 991px) {
  .container,
  .site-body-container {
    padding: 1.5rem;
  }

  .main h2::before,
  .entry-content h2::before {
    font-size: 1.2rem;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .container,
  .site-body-container {
    padding: 1rem;
  }

  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.3em; }

  .card,
  .vk_post,
  article,
  .vk_prBlocks_item {
    border-radius: 8px !important;
  }

  .btn,
  .wp-block-button__link {
    padding: 0.7em 1.5em !important;
  }

  /* モバイルナビゲーション */
  .vk-mobile-nav {
    background: var(--cafe-dark-brown) !important;
  }

  .vk-mobile-nav a {
    color: var(--cafe-cream) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* ========================================
   フッターテキストコントラスト改善（モバイル最適化）
   ======================================== */

/* フッターコピーライトテキストのコントラスト改善 */
.site-footer-copyright p,
.copyright p {
  color: #F5F0E6 !important; /* 明るいベージュで高コントラスト */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
}

/* フッターナビゲーションのコントラスト改善 */
.footer-nav,
.footer-nav-list {
  background: transparent !important;
}

.footer-nav a,
.footer-nav-list a,
.footer-nav-list li a {
  color: #F5F0E6 !important; /* 明るいベージュで高コントラスト */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
  padding: 0.8em 1em !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(245, 240, 230, 0.2) !important;
}

.footer-nav a:hover,
.footer-nav-list a:hover,
.footer-nav-list li a:hover {
  color: #C9A66B !important; /* ゴールドでホバー */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
  background: rgba(201, 166, 107, 0.1) !important;
}

/* フッターウィジェットのテキストコントラスト改善 */
.site-footer .widget,
.footer-widget {
  color: #F5F0E6 !important; /* 明るいベージュで高コントラスト */
}

.site-footer .widget p,
.footer-widget p,
.site-footer .widget li,
.footer-widget li {
  color: #F5F0E6 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  line-height: 1.8 !important;
}

.site-footer .widget a,
.footer-widget a {
  color: #C9A66B !important; /* ゴールドでリンク */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(201, 166, 107, 0.5) !important;
  transition: all 0.3s ease !important;
}

.site-footer .widget a:hover,
.footer-widget a:hover {
  color: #D4A574 !important; /* より明るいゴールドでホバー */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
  text-decoration-color: #D4A574 !important;
}

/* フッターウィジェットの見出し */
.site-footer .widget-title,
.footer-widget .widget-title {
  color: #C9A66B !important; /* ゴールドで見出し */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 600 !important;
  border-bottom-color: rgba(201, 166, 107, 0.5) !important;
}

/* モバイル最適化：フッターのテキストサイズとコントラスト */
@media (max-width: 767px) {
  .site-footer-copyright,
  .copyright {
    padding: 1.2em 1em !important;
    font-size: 0.85em !important;
  }

  .site-footer-copyright p,
  .copyright p {
    font-size: 0.9em !important;
    line-height: 1.9 !important;
    color: #FDF8EF !important; /* より明るい色でモバイルでの可読性向上 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .footer-nav a,
  .footer-nav-list a,
  .footer-nav-list li a {
    font-size: 0.95em !important;
    padding: 0.7em 0.8em !important;
    color: #FDF8EF !important; /* より明るい色でモバイルでの可読性向上 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .site-footer .widget,
  .footer-widget {
    padding: 1.5em 1em !important;
  }

  .site-footer .widget p,
  .footer-widget p,
  .site-footer .widget li,
  .footer-widget li {
    font-size: 0.9em !important;
    color: #FDF8EF !important; /* より明るい色でモバイルでの可読性向上 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .site-footer .widget a,
  .footer-widget a {
    font-size: 0.95em !important;
    color: #C9A66B !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }

  .site-footer .widget-title,
  .footer-widget .widget-title {
    font-size: 1.05em !important;
    color: #C9A66B !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
  }
}

/* ========================================
   印刷スタイル
   ======================================== */
@media print {
  body {
    background: white !important;
    color: black !important;
  }

  .site-header,
  .site-footer,
  .sidebar,
  .pagetop {
    display: none !important;
  }

  .card,
  article {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}