/* Tailwind CSS with custom brand colors */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

/* Custom CSS Variables for brand colors */
:root {
  --tt-color-main: #00725F;
  --tt-color-main-dark: #005a4a;
  --tt-color-sub: #009E8E;
  --tt-color-accent: #FF8000;
  --tt-color-text: #1f2937;
  --tt-color-bg: #ffffff;
  --tt-color-gray-50: #f9fafb;
  --tt-color-gray-100: #f3f4f6;
  --tt-color-gray-200: #e5e7eb;
  --tt-color-gray-300: #d1d5db;
  --tt-color-gray-400: #9ca3af;
  --tt-color-gray-500: #6b7280;
  --tt-color-gray-600: #4b5563;
  --tt-color-gray-700: #374151;
  --tt-color-gray-800: #1f2937;
  --tt-color-gray-900: #111827;
}

/* Single Post Sidebar Styles */
.single-post-sidebar {
  width: 100%;
  max-width: 350px;
}

.sidebar-widget {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  overflow: hidden;
}

.widget-header {
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  border-bottom: 1px solid var(--tt-color-gray-100);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tt-color-text);
  margin: 0;
}

/* Related Posts Styles */
.related-posts-list {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.related-post-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tt-color-gray-100);
}

.related-post-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.related-post-image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 0.5rem;
  overflow: hidden;
}

.related-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-post-placeholder {
  width: 100%;
  height: 100%;
  background: var(--tt-color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.related-post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.related-post-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 0.25rem 0;
}

.related-post-title a {
  color: var(--tt-color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.related-post-title a:hover {
  color: var(--tt-color-main);
}

.related-post-meta {
  font-size: 0.75rem;
  color: var(--tt-color-gray-500);
}

/* Model Tours Styles */
.model-tours-list {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.model-tour-item {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tt-color-gray-100);
}

.model-tour-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.model-tour-image {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.model-tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-tour-placeholder {
  width: 100%;
  height: 100%;
  background: var(--tt-color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.model-tour-region {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--tt-color-main);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.model-tour-content {
  text-align: left;
}

.model-tour-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
}

.model-tour-title a {
  color: var(--tt-color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.model-tour-title a:hover {
  color: var(--tt-color-main);
}

.model-tour-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tt-color-main);
}

/* Tour Card Badge Styles */
.tour-overview-cards {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: 1rem;
}

.tour-overview-cards .card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tour-overview-cards .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Apple-Style Hero Section for Tour Details
   ======================================== */

/* Apple Hero Section */
.apple-hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Apple Hero Image */
.apple-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Apple Hero Overlay */
.apple-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
}

/* Apple Hero Content */
.apple-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Apple Hero Text */
.apple-hero-text {
  width: 100%;
  max-width: 800px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Apple Hero Title */
.apple-hero-title {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.5rem auto;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: white;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

/* Apple Hero Subtitle */
.apple-hero-subtitle {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 2rem auto;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* Apple Hero Meta */
.apple-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  width: 100%;
}

/* Apple Hero Actions */
.apple-hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

/* Apple Hero Button */
.apple-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 114, 95, 0.3);
}

.apple-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 114, 95, 0.5);
  background: linear-gradient(135deg, #005a4a 0%, #007a6b 100%);
}

/* Apple Hero Meta Items */
.apple-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tt-color-text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.apple-meta-item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.apple-meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--tt-color-main);
  flex-shrink: 0;
}

.apple-meta-item span {
  white-space: nowrap;
}

/* Responsive Design for Apple Hero */
@media (max-width: 768px) {
  .apple-hero-section {
    min-height: 70vh;
  }
  
  .apple-hero-content {
    padding: 0 1.5rem;
  }
  
  .apple-hero-text {
    max-width: 100%;
  }
  
  .apple-hero-title {
    font-size: clamp(1.75rem, 6vw, 3rem);
    margin-bottom: 1.25rem;
  }
  
  .apple-hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.25rem);
    max-width: 100%;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }
  
  .apple-hero-meta {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }
  
  .apple-meta-item {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
  }
  
  .apple-hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .apple-hero-btn {
    width: 100%;
    max-width: 300px;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .apple-hero-section {
    min-height: 60vh;
  }
  
  .apple-hero-content {
    padding: 0 1rem;
  }
  
  .apple-hero-title {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
  }
  
  .apple-hero-subtitle {
    font-size: clamp(0.9375rem, 4vw, 1.125rem);
  }
  
  .apple-meta-item {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
  
  .apple-meta-item svg {
    width: 14px;
    height: 14px;
  }
}

/* Category Badge */
.category-badge {
  background: var(--tt-color-main);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--tt-color-text);
  background-color: var(--tt-color-bg);
  margin: 0;
  padding: 0;
}

body.menu-open {
  overflow: hidden;
}

/* Apple/Airbnb inspired utility classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 2rem;
  }
}

/* Typography */
.text-hero {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .text-hero {
    font-size: 2.5rem;
  }
}

.text-title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.text-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tt-color-gray-600);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  color: white;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 114, 95, 0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 114, 95, 0.4);
  background: linear-gradient(135deg, #005a4a 0%, #007a6b 100%);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--tt-color-sub) 0%, var(--tt-color-main) 100%);
  color: white;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 158, 142, 0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 158, 142, 0.4);
  background: linear-gradient(135deg, #007a6b 0%, #005a4a 100%);
}

.btn-accent {
  background-color: var(--tt-color-accent);
  color: white;
}

.btn-accent:hover {
  background-color: #e67300;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(255, 128, 0, 0.3);
}

.btn-outline {
  background-color: transparent;
  color: var(--tt-color-main);
  border: 2px solid var(--tt-color-main);
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  font-weight: 600;
  font-size: 1.125rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-outline:hover {
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 114, 95, 0.4);
}

/* Cards */
.card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Grid layouts */
.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Spacing utilities */
.section {
  padding: 4rem 0;
}

.section-sm {
  padding: 2rem 0;
}

.section-lg {
  padding: 6rem 0;
}

/* Page content spacing to account for fixed header */
.page-content {
  padding-top: 0;
  margin-top: 0;
}

/* WordPress admin bar adjustments - 管理バーのみ考慮 */
.admin-bar .page-content {
  padding-top: 32px; /* 管理バーの高さのみ */
}




@media screen and (max-width: 782px) {
  .admin-bar .page-content {
    padding-top: 46px; /* モバイル管理バーの高さ */
  }
}

/* Legacy Apple Hero styles removed - see Modern Hero Section below */


/* Ensure all main content has proper spacing - ヘッダーはstickyなので不要 */
main {
  padding-top: 0;
}

main.page-content {
  padding-top: 0;
}

/* Header styles - モバイル対応の固定ヘッダー */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  height: 80px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* トランスフォームを使用してGPUアクセラレーションを有効化 */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
  /* スムーズなトランジション */
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              background 0.3s ease, 
              box-shadow 0.3s ease, 
              border-bottom 0.3s ease;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                      background 0.3s ease, 
                      box-shadow 0.3s ease, 
                      border-bottom 0.3s ease;
  /* パフォーマンス最適化 */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 3Dレンダリングを強制してパフォーマンス向上 */
  -webkit-perspective: 1000;
  perspective: 1000;
}

/* ヘッダーを上に隠す（モバイルのみ適用） */
.header-hidden {
  transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  box-shadow: none;
}

/* タブレット用 */
@media (max-width: 1024px) {
  .header {
    height: 75px;
  }
}

/* モバイル用 */
@media (max-width: 768px) {
  .header {
    height: 70px;
    /* モバイルでより軽いブラー効果 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* 小型モバイル用 */
@media (max-width: 480px) {
  .header {
    height: 65px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* スクロール時のヘッダースタイル */
.header-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .header-scrolled {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.97);
  }
}

/* Fix for WordPress admin bar */
.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
}

/* Additional fixes for header visibility */
html {
  margin-top: 0 !important;
}

body.admin-bar {
  margin-top: 0 !important;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.logo {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--tt-color-main);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.025em;
  position: relative;
}

.logo:hover {
  color: var(--tt-color-sub);
  transform: scale(1.05);
}

.logo::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tt-color-main), var(--tt-color-sub));
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo:hover::after {
  width: 100%;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-link {
  color: var(--tt-color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  position: relative;
  letter-spacing: -0.01em;
}

.nav-link:hover {
  color: var(--tt-color-main);
  background-color: rgba(0, 114, 95, 0.08);
  transform: translateY(-1px);
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 114, 95, 0.1), rgba(0, 158, 142, 0.1));
  border-radius: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.nav-link.active {
  color: var(--tt-color-main);
  background-color: rgba(0, 114, 95, 0.12);
  font-weight: 600;
}

.nav-link.active::before {
  opacity: 1;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--tt-color-text);
  padding: 0.75rem;
  border-radius: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.mobile-menu-toggle:hover {
  background-color: rgba(0, 114, 95, 0.08);
  color: var(--tt-color-main);
  transform: scale(1.05);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

/* モバイルレスポンシブ対応 */
@media (max-width: 768px) {
  .header-inner {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .logo {
    font-size: 1.5rem;
    z-index: 1001;
    position: relative;
  }
  
  .mobile-menu-toggle {
    display: block;
    z-index: 1001;
    position: relative;
  }
  
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    z-index: 1001;
    /* スムーズなアニメーション */
    animation: slideDown 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* パフォーマンス最適化 */
    will-change: opacity, transform;
    transform: translate3d(0, 0, 0);
  }
  
  .nav.open {
    display: flex;
  }
  
  .nav-link {
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    margin: 0.25rem 0;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    /* リンクのアニメーション */
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeInUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  
  /* 各リンクに遅延を追加して、順番に表示 */
  .nav.open .nav-link:nth-child(1) {
    animation-delay: 0.05s;
  }
  
  .nav.open .nav-link:nth-child(2) {
    animation-delay: 0.1s;
  }
  
  .nav.open .nav-link:nth-child(3) {
    animation-delay: 0.15s;
  }
  
  .nav.open .nav-link:nth-child(4) {
    animation-delay: 0.2s;
  }
  
  .nav.open .nav-link:nth-child(5) {
    animation-delay: 0.25s;
  }
}

/* モバイルメニューのアニメーション */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 小型モバイルデバイス用 */
@media (max-width: 480px) {
  .header-inner {
    padding: 0.5rem 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .logo {
    font-size: 1.25rem;
  }
  
  .nav {
    padding: 1rem;
    max-height: calc(100vh - 65px);
  }
  
  .nav-link {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    margin: 0.2rem 0;
  }
  
  .mobile-menu-toggle {
    padding: 0.5rem;
  }
}

/* Legacy hero styles removed - see Modern Hero Section below */

/* Tour Hero with improved text visibility */
.tour-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 85vh;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 1;
}

.tour-hero .container {
  position: relative;
  z-index: 2;
}

.tour-hero-title {
  color: white;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tour-hero-subtitle {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: 2rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: block;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.tour-hero-btn {
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.tour-hero-btn:hover {
  box-shadow: 
    0 8px 20px rgba(0, 114, 95, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .tour-hero {
    min-height: 70vh;
  }
  
  .tour-hero-title {
    font-size: 2rem;
  }
  
  .tour-hero-subtitle {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

/* Tour Summary Grid - Responsive */
.tour-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 968px) {
  .tour-summary-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Experiences Grid */
.experiences-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.experience-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--tt-color-gray-50);
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  border: 1px solid var(--tt-color-gray-200);
}

.experience-item:hover {
  background: var(--tt-color-gray-100);
  transform: translateX(4px);
  border-color: var(--tt-color-main);
}

.experience-icon {
  color: var(--tt-color-main);
  flex-shrink: 0;
}

.experience-item span {
  color: var(--tt-color-gray-700);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .experiences-grid {
    grid-template-columns: 1fr;
  }
}

/* Tour Included/Excluded Grid - Responsive */
.tour-included-excluded-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .tour-included-excluded-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Tour Overview Cards - Responsive */
.tour-overview-cards {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .tour-overview-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tour-overview-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .tour-overview-cards .card {
    margin-bottom: 0;
  }
  
  .tour-overview-cards .card > div {
    padding: 1rem !important;
  }
  
  .tour-overview-cards .card > div > div:first-child {
    font-size: 0.75rem !important;
  }
  
  .tour-overview-cards .card > div > div:last-child {
    font-size: 1rem !important;
  }
}

/* Footer */
.footer {
  background: var(--tt-color-gray-50);
  border-top: 1px solid var(--tt-color-gray-200);
  padding: 3rem 0 2rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-text {
  color: var(--tt-color-gray-600);
  margin: 0;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  color: var(--tt-color-gray-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

.social-link:hover {
  color: var(--tt-color-main);
}

/* About This Tour Section - Responsive */
.about-tour-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .about-tour-content {
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .about-tour-content {
    max-width: 1000px;
  }
}

@media (max-width: 768px) {
  .about-tour-content {
    max-width: 100%;
    padding: 0 0.5rem;
  }
}

/* Tour Card Description - Text Truncation */
.tour-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 4.5em; /* 3 lines × 1.5 line-height */
}

/* Tour Card Height Consistency */
.tour-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tour-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tour-card-footer {
  margin-top: auto;
}

/* Form styles */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--tt-color-text);
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--tt-color-gray-200);
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--tt-color-main);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery hover effects */
.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item:hover div {
  opacity: 1 !important;
}


/* Gallery carousel buttons */
.gallery-prev:hover,
.gallery-next:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translateY(-50%) scale(1.1);
}

.gallery-dot:hover {
  background: var(--tt-color-main) !important;
}

/* Lightbox Navigation - Mobile Responsive */
@media (max-width: 768px) {
  .lightbox-nav {
    left: 10px !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }
  
  .lightbox-next {
    left: auto !important;
    right: 10px !important;
  }
  
  .lightbox-image {
    max-width: 95vw !important;
    max-height: 85vh !important;
  }
  
  .lightbox-counter {
    bottom: 20px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}

@media (max-width: 480px) {
  .lightbox-nav {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }
}

/* Modern Itinerary Styling */
.modern-itinerary-day {
  margin-bottom: 1.5rem;
  border: 2px solid var(--tt-color-gray-200);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
}

.modern-itinerary-day:hover {
  border-color: var(--tt-color-main);
  box-shadow: 0 8px 16px rgba(0, 114, 95, 0.1);
  transform: translateY(-2px);
}

.modern-itinerary-summary {
  padding: 1.5rem;
  background: var(--tt-color-gray-50);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.modern-itinerary-summary::-webkit-details-marker {
  display: none;
}

.modern-itinerary-summary:hover {
  background: var(--tt-color-gray-100);
}

.modern-itinerary-day[open] .modern-itinerary-summary {
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  color: white;
}

.itinerary-day-badge {
  flex-shrink: 0;
  background: var(--tt-color-main);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(0, 114, 95, 0.2);
  transition: all 0.3s ease;
}

.modern-itinerary-day[open] .itinerary-day-badge {
  background: white;
  color: var(--tt-color-main);
}

.itinerary-route-container {
  flex: 1;
  min-width: 0;
}

.itinerary-route {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.route-from,
.route-to,
.route-single {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tt-color-text);
  letter-spacing: -0.02em;
}

.modern-itinerary-day[open] .route-from,
.modern-itinerary-day[open] .route-to,
.modern-itinerary-day[open] .route-single {
  color: white;
}

.route-icon {
  color: var(--tt-color-main);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 114, 95, 0.2));
  transition: all 0.3s ease;
}

.modern-itinerary-day[open] .route-icon {
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.expand-icon {
  flex-shrink: 0;
  color: var(--tt-color-gray-400);
  transition: transform 0.3s ease;
}

.modern-itinerary-day[open] .expand-icon {
  transform: rotate(180deg);
  color: white;
}

.modern-itinerary-content {
  padding: 2rem;
  background: white;
}

.itinerary-description {
  margin: 0;
  line-height: 1.8;
  color: var(--tt-color-gray-700);
  font-size: 1rem;
}

/* Meta Bar */
.itinerary-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1.5rem;
  background: var(--tt-color-gray-50);
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--tt-color-gray-200);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-icon {
  color: var(--tt-color-main);
  flex-shrink: 0;
}

.meta-label {
  font-weight: 600;
  color: var(--tt-color-gray-700);
  font-size: 0.875rem;
  margin-right: 0.5rem;
}

.meta-value {
  font-weight: 600;
  color: var(--tt-color-gray-700);
  font-size: 0.875rem;
}

/* Meals Indicators */
.meals-meta {
  flex-wrap: wrap;
  align-items: center;
}

.meals-indicators {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
}

.meal-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.meal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tt-color-main);
  border: 2px solid var(--tt-color-main);
  transition: all 0.2s ease;
  box-shadow: 0 0 0 3px rgba(0, 114, 95, 0.1);
}

.meal-cross {
  color: var(--tt-color-gray-400);
  flex-shrink: 0;
}

.meal-text {
  font-size: 0.875rem;
  color: var(--tt-color-gray-600);
  font-weight: 500;
}

.meal-item.active .meal-text {
  color: var(--tt-color-main);
  font-weight: 600;
}

.meal-item.inactive .meal-text {
  color: var(--tt-color-gray-400);
}

/* Itinerary Images */
.itinerary-images-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.itinerary-gallery-item {
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.itinerary-gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.itinerary-gallery-item img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  display: block;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modern-itinerary-summary {
    padding: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .itinerary-day-badge {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
  
  .route-from,
  .route-to,
  .route-single {
    font-size: 1rem;
  }
  
  .route-icon {
    width: 20px;
    height: 20px;
  }
  
  .modern-itinerary-content {
    padding: 1.5rem;
  }
  
  .itinerary-meta-bar {
    gap: 1rem;
    padding: 1rem;
  }
  
  .meta-item {
    font-size: 0.8125rem;
  }
  
  .meals-indicators {
    gap: 0.75rem;
    flex-wrap: nowrap;
  }
  
  .itinerary-gallery-item img {
    width: 100px;
    height: 75px;
  }
}

@media (max-width: 480px) {
  .modern-itinerary-summary {
    padding: 0.875rem;
    gap: 0.75rem;
  }
  
  .itinerary-route {
    gap: 0.5rem;
  }
  
  .route-from,
  .route-to,
  .route-single {
    font-size: 0.9375rem;
  }
  
  .itinerary-meta-bar {
    flex-direction: column;
    gap: 1rem;
  }
  
  .meta-item {
    width: 100%;
  }
  
  .meals-meta {
    flex-wrap: wrap;
    align-items: center;
  }
  
  .meals-indicators {
    gap: 0.5rem;
  }
  
  .itinerary-gallery-item img {
    width: 80px;
    height: 60px;
  }
}

/* Legacy itinerary styling for backward compatibility */
.itinerary-day:hover {
  border-color: var(--tt-color-main) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.itinerary-day summary:hover {
  background: var(--tt-color-gray-100) !important;
}

.itinerary-day[open] summary {
  background: var(--tt-color-main) !important;
  color: white !important;
}

.itinerary-day[open] summary * {
  color: white !important;
}

.itinerary-day[open] summary div:first-child div:first-child {
  background: white !important;
  color: var(--tt-color-main) !important;
}

.itinerary-day[open] summary svg {
  transform: rotate(180deg);
  color: white !important;
  fill: white !important;
}

/* Tour image styling */
.tour-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover .tour-image {
  transform: scale(1.05);
}

/* Hamburger menu styling */
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--tt-color-text);
  margin: 4px 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
  background-color: var(--tt-color-main);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
  background-color: var(--tt-color-main);
}

/* Responsive utilities */
.hidden {
  display: none;
}

@media (min-width: 769px) {
  .hidden-md {
    display: none;
  }
}

@media (max-width: 768px) {
  .hidden-sm {
    display: none;
  }
}


/* Gallery Grid Styling */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.gallery-grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--tt-color-gray-100);
}

.gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-grid-item:hover img {
  transform: scale(1.05);
}

.gallery-grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-grid-item:hover .gallery-grid-overlay {
  opacity: 1;
}

.gallery-zoom-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Hidden gallery items */
.gallery-item-hidden {
  display: none;
}

/* Tablet responsive */
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  .gallery-item-hidden-mobile {
    display: block;
  }
}

/* Desktop responsive */
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  
  .gallery-item-hidden-tablet {
    display: block;
  }
}

/* Gallery Modal */
.gallery-modal-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10000;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-modal-overlay.active {
  opacity: 1;
}

.gallery-modal-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  z-index: 10001 !important;
  padding: 1rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  height: 80px !important;
  box-sizing: border-box !important;
}

.gallery-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
}

.gallery-modal-close {
  position: fixed !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002 !important;
  transition: all 0.3s ease;
}

.gallery-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.gallery-modal-close svg {
  color: white;
}

.gallery-modal-content {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.gallery-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.gallery-modal-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--tt-color-gray-100);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.gallery-modal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.gallery-modal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .gallery-modal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .gallery-modal-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  .gallery-modal-content {
    padding: 2rem;
  }
}

/* Hide header when modal is open */
body.gallery-modal-open .header {
  visibility: hidden;
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10005;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10006;
  transition: all 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav.prev {
  left: 2rem;
}

.lightbox-nav.next {
  right: 2rem;
}

.lightbox-counter {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  z-index: 10006;
}

/* Gallery Grid Responsive Display Control */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.gallery-grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--tt-color-gray-100);
}

.gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-grid-item:hover img {
  transform: scale(1.05);
}

.gallery-grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-grid-item:hover .gallery-grid-overlay {
  opacity: 1;
}

.gallery-zoom-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Mobile: Show only first 4 images (2x2 grid) */
.gallery-item-hidden-mobile {
  display: none;
}

/* Tablet: Show 6 images (3x2 grid) */
.gallery-item-hidden-tablet {
  display: none;
}

/* Desktop: Show 8 images (4x2 grid) */
.gallery-item-hidden {
  display: none;
}

/* Tablet responsive - 3 columns, show 6 images */
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  /* Show images 5-6 on tablet */
  .gallery-item-hidden-mobile {
    display: block;
  }
  
  /* But keep 7+ hidden */
  .gallery-item-hidden-tablet {
    display: none;
  }
}

/* Desktop responsive - 4 columns, show 8 images */
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  
  /* Show images 5-8 on desktop */
  .gallery-item-hidden-mobile,
  .gallery-item-hidden-tablet {
    display: block;
  }
  
  /* But keep 9+ hidden */
  .gallery-item-hidden {
    display: none;
  }
}

/* Gallery Modal */
.gallery-modal-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10000;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-modal-overlay.active {
  opacity: 1;
}

.gallery-modal-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  z-index: 10001 !important;
  padding: 1rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  height: 80px !important;
  box-sizing: border-box !important;
}

.gallery-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
}

.gallery-modal-close {
  position: fixed !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002 !important;
  transition: all 0.3s ease;
}

.gallery-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.gallery-modal-close svg {
  color: white;
}

.gallery-modal-content {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.gallery-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.gallery-modal-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--tt-color-gray-100);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.gallery-modal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.gallery-modal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .gallery-modal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .gallery-modal-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  .gallery-modal-content {
    padding: 2rem;
  }
}

/* Hide header when modal is open */
body.gallery-modal-open .header {
  visibility: hidden;
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10005;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10006;
  transition: all 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav.prev {
  left: 2rem;
}

.lightbox-nav.next {
  right: 2rem;
}

.lightbox-counter {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  z-index: 10006;
}


/* Modern Gallery Carousel Section */
.modern-gallery-section {
  padding: 6rem 0;
  background: var(--tt-color-gray-50);
}

.gallery-carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1rem;
}

.gallery-no-images {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 2rem;
  text-align: center;
  background: var(--tt-color-gray-50);
  border-radius: 1rem;
  border: 2px dashed var(--tt-color-gray-300);
}

.gallery-no-images p {
  color: var(--tt-color-gray-600);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.gallery-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.gallery-carousel-item {
  flex: 0 0 25%; /* 4つの画像を表示 */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  background: var(--tt-color-gray-100);
  transition: all 0.3s ease;
}

.gallery-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-carousel-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-carousel-item:hover img {
  transform: scale(1.05);
}

.gallery-overlay svg {
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.gallery-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gallery-carousel-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.gallery-carousel-btn--prev {
  left: 1rem;
}

.gallery-carousel-btn--next {
  right: 1rem;
}

.gallery-carousel-btn svg {
  color: var(--tt-color-text);
  transition: color 0.3s ease;
}

.gallery-carousel-btn:hover svg {
  color: var(--tt-color-main);
}

/* Mobile responsive for carousel */
@media (max-width: 768px) {
  .gallery-carousel-item {
    flex: 0 0 50%; /* モバイルでは2つの画像を表示 */
  }
  
  .gallery-carousel-btn {
    width: 40px;
    height: 40px;
  }
  
  .gallery-carousel-btn--prev {
    left: 0.5rem;
  }
  
  .gallery-carousel-btn--next {
    right: 0.5rem;
  }
}

@media (max-width: 480px) {
  .gallery-carousel-item {
    flex: 0 0 100%; /* 小型モバイルでは1つの画像を表示 */
  }
  
  .gallery-carousel-btn {
    width: 36px;
    height: 36px;
  }
  
  .gallery-carousel-btn svg {
    width: 20px;
    height: 20px;
  }
}


/* ========================================
   Refined About Page Styles - Clean & Modern
   ======================================== */

/* Refined Hero Section */
.about-hero-refined {
  padding: 8rem 0 6rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.about-hero-refined .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.about-hero-refined .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.hero-background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(0, 114, 95, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 158, 142, 0.05) 0%, transparent 50%);
  z-index: 1;
}

.about-hero-refined .container {
  position: relative;
  z-index: 3;
}

.hero-content-refined {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-badge-refined {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tt-color-text);
  margin-bottom: 3rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.hero-badge-refined:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.hero-badge-refined .typing-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--tt-color-main);
  animation: blink-caret 0.75s step-end infinite;
}

.hero-badge-refined .typing-text.typing {
  animation: typing 3s steps(20, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--tt-color-main); }
}

.badge-icon {
  font-size: 1.125rem;
}

.hero-title-refined {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tt-color-text);
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.about-hero-refined .hero-overlay ~ .container .hero-title-refined {
  color: white;
}

.hero-subtitle-refined {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--tt-color-gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.about-hero-refined .hero-overlay ~ .container .hero-subtitle-refined {
  color: rgba(255, 255, 255, 0.9);
}

/* Our Story Section */
.our-story-section {
  padding: 6rem 0;
  background: #ffffff;
}

.story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.story-text {
  padding-right: 2rem;
}

.section-title-refined {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.story-description {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--tt-color-gray-600);
  margin-bottom: 1.5rem;
}

.story-description:last-child {
  margin-bottom: 0;
}

.story-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-image {
  width: 100%;
  height: 400px;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 114, 95, 0.15);
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.story-image:hover img {
  transform: scale(1.05);
}

.story-image-placeholder {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, var(--tt-color-main), var(--tt-color-sub));
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 20px 40px rgba(0, 114, 95, 0.15);
  position: relative;
  overflow: hidden;
}

.story-image-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  z-index: 1;
}

.story-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  z-index: 2;
  position: relative;
}

.story-caption {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  z-index: 2;
  position: relative;
}

/* Why Choose Us Section - Airbnb Style */
.why-choose-section {
  padding: 6rem 0;
  background: #ffffff;
}

.section-header-refined {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-description-refined {
  font-size: 1.125rem;
  color: var(--tt-color-gray-600);
  margin: 0;
  line-height: 1.6;
}

.features-grid-airbnb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card-airbnb {
  background: white;
  padding: 0;
  border-radius: 2rem;
  border: 1px solid rgba(0, 114, 95, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.feature-card-airbnb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tt-color-main), var(--tt-color-sub));
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.feature-card-airbnb:hover::before {
  transform: scaleX(1);
}

.feature-card-airbnb:hover {
  border-color: rgba(0, 114, 95, 0.2);
  box-shadow: 0 20px 60px rgba(0, 114, 95, 0.15);
  transform: translateY(-8px);
}

.feature-icon-airbnb {
  width: 100%;
  height: 120px;
  background: var(--tt-color-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: white;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.feature-icon-airbnb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card-airbnb:hover .feature-icon-airbnb::before {
  opacity: 1;
}

.feature-card-airbnb:hover .feature-icon-airbnb {
  transform: scale(1.05);
}

.feature-icon-airbnb span {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.feature-content-airbnb {
  padding: 2rem 2rem 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-content-airbnb h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.feature-content-airbnb p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tt-color-gray-600);
  margin: 0;
  flex: 1;
}

/* Responsive Design for Refined About Page */
@media (max-width: 1024px) {
  .story-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .story-text {
    padding-right: 0;
  }
  
  .features-grid-airbnb {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 -1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  .features-grid-airbnb::-webkit-scrollbar {
    height: 4px;
  }
  
  .features-grid-airbnb::-webkit-scrollbar-track {
    background: var(--tt-color-gray-100);
    border-radius: 2px;
  }
  
  .features-grid-airbnb::-webkit-scrollbar-thumb {
    background: var(--tt-color-main);
    border-radius: 2px;
  }
  
  .features-grid-airbnb::-webkit-scrollbar-thumb:hover {
    background: var(--tt-color-main-dark);
  }
  
  .feature-card-airbnb {
    flex: 0 0 85vw;
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {
  .about-hero-refined {
    padding: 6rem 0 4rem;
  }
  
  .hero-badge-refined {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
    margin-bottom: 2rem;
  }
  
  .hero-title-refined {
    font-size: 2rem;
  }
  
  .hero-subtitle-refined {
    font-size: 1rem;
  }
  
  .our-story-section,
  .why-choose-section {
    padding: 4rem 0;
  }
  
  .section-title-refined {
    font-size: 2rem;
  }
  
  .story-description {
    font-size: 1rem;
  }
  
  .story-image,
  .story-image-placeholder {
    height: 300px;
  }
  
  .story-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .story-caption {
    font-size: 1rem;
  }
  
  .feature-icon-airbnb {
    height: 100px;
    font-size: 2.5rem;
  }
  
  .feature-content-airbnb {
    padding: 1.5rem 1.5rem 2rem;
  }
  
  .feature-content-airbnb h3 {
    font-size: 1.375rem;
  }
  
  .feature-content-airbnb p {
    font-size: 0.9375rem;
  }
}

@media (max-width: 480px) {
  .about-hero-refined {
    padding: 4rem 0 3rem;
  }
  
  .hero-badge-refined {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .hero-title-refined {
    font-size: 1.75rem;
  }
  
  .hero-subtitle-refined {
    font-size: 0.95rem;
  }
  
  .our-story-section,
  .why-choose-section {
    padding: 3rem 0;
  }
  
  .features-grid-airbnb {
    gap: 0.75rem;
    padding: 0 0.75rem;
    margin: 0 -0.75rem;
  }
  
  .feature-card-airbnb {
    flex: 0 0 85vw;
  }
  
  .section-title-refined {
    font-size: 1.75rem;
  }
  
  .story-description {
    font-size: 0.9375rem;
  }
  
  .story-image,
  .story-image-placeholder {
    height: 250px;
  }
  
  .story-icon {
    font-size: 2.5rem;
  }
  
  .story-caption {
    font-size: 0.875rem;
  }
  
  .feature-icon-airbnb {
    height: 80px;
    font-size: 2rem;
  }
  
  .feature-content-airbnb {
    padding: 1.25rem 1.25rem 1.75rem;
  }
  
  .feature-content-airbnb h3 {
    font-size: 1.25rem;
  }
  
  .feature-content-airbnb p {
    font-size: 0.875rem;
  }
}

/* ========================================
   Modern Airbnb-Inspired Styles
   ======================================== */

/* Modern Header Styles */
.modern-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  height: 80px;
  transition: all 0.3s ease;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--tt-color-main);
  font-size: 1.5rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.header-logo:hover {
  color: var(--tt-color-sub);
  transform: scale(1.05);
}

.header-logo img {
  height: 32px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* カスタムロゴ専用スタイル */
.custom-logo-img {
  height: 32px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.header-logo:hover .custom-logo-img {
  transform: scale(1.05);
}

.header-logo svg {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}

.header-logo:hover svg {
  transform: rotate(15deg);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-item {
  color: var(--tt-color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.75rem 1.25rem;
  border-radius: 2rem;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  color: var(--tt-color-main);
  background-color: rgba(0, 114, 95, 0.08);
}

.nav-item.active {
  color: var(--tt-color-main);
  background-color: rgba(0, 114, 95, 0.12);
  font-weight: 600;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.mobile-toggle:hover {
  background-color: rgba(0, 114, 95, 0.08);
}

.toggle-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--tt-color-text);
  margin: 4px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
}

.mobile-toggle.active .toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active .toggle-line:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active .toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* ========================================
   Modern Hero Section - Unified Structure
   ======================================== */

/* Hero Container */
.modern-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hero Background & Overlay */
.modern-hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.modern-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
}

/* Hero Container Wrapper */
.modern-hero .container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero Content */
.modern-hero .hero-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Hero Badge */
.modern-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tt-color-text);
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hero Title */
.modern-hero .hero-title {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.5rem auto;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: white;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

/* Hero Subtitle */
.modern-hero .hero-subtitle {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 3rem auto;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* Hero Actions */
.modern-hero .hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.modern-hero .hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-hero .hero-btn.primary {
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 114, 95, 0.3);
}

.modern-hero .hero-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 114, 95, 0.5);
  background: linear-gradient(135deg, #005a4a 0%, #007a6b 100%);
}

/* Typing Animation */
.modern-hero .typing-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--tt-color-main);
  animation: blink-caret 0.75s step-end infinite;
}

.modern-hero .typing-text.typing {
  animation: typing 3s steps(20, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--tt-color-main); }
}

/* ========================================
   Modern Hero Section - Responsive Design
   ======================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
  .modern-hero .container {
    padding: 0 1.5rem;
  }
  
  .modern-hero .hero-content {
    max-width: 100%;
  }
  
  .modern-hero .hero-badge {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
    margin-bottom: 1.5rem;
  }
  
  .modern-hero .hero-title {
    font-size: clamp(1.75rem, 6vw, 3rem);
    margin-bottom: 1.25rem;
  }
  
  .modern-hero .hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.25rem);
    max-width: 100%;
    margin-bottom: 2.5rem;
    line-height: 1.5;
  }
  
  .modern-hero .hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .modern-hero .hero-btn {
    width: 100%;
    max-width: 300px;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
  }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  .modern-hero .container {
    padding: 0 1rem;
  }
  
  .modern-hero .hero-badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    margin-bottom: 1.25rem;
  }
  
  .modern-hero .hero-title {
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    margin-bottom: 1rem;
  }
  
  .modern-hero .hero-subtitle {
    font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
    margin-bottom: 2rem;
    line-height: 1.5;
  }
  
  .modern-hero .hero-btn {
    max-width: 280px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
  }
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
  text-align: center;
  width: 100%;
}

.section-description {
  font-size: 1.125rem;
  color: var(--tt-color-gray-600);
  margin: 0 auto;
  max-width: 600px;
  text-align: center !important;
  line-height: 1.6;
  display: block;
  width: 100%;
}

/* Ensure all section descriptions are centered */
.section-header .section-description,
.modern-gallery-section .section-description,
.tour-process-section .section-description,
.modern-testimonials-section .section-description,
.modern-contact-section .section-description {
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
  width: 100% !important;
}

/* Modern Testimonials Section */
.modern-testimonials-section {
  padding: 6rem 0;
  background: #ffffff;
}

.testimonials-carousel {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.carousel-container {
  overflow: hidden;
  border-radius: 1rem;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial-card {
  background: white;
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 100%;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
}

.testimonial-card.active {
  opacity: 1;
  transform: translateX(0);
}

.testimonial-rating {
  margin-bottom: 1.5rem;
  text-align: center;
}

.testimonial-rating span {
  color: #fbbf24;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.testimonial-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--tt-color-gray-700);
  margin: 0 0 2rem 0;
  text-align: center;
  font-style: italic;
  position: relative;
}

.testimonial-text::before {
  content: "「";
  font-size: 1.5rem;
  color: var(--tt-color-main);
  font-weight: bold;
}

.testimonial-text::after {
  content: "」";
  font-size: 1.5rem;
  color: var(--tt-color-main);
  font-weight: bold;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-avatar.placeholder {
  background: linear-gradient(135deg, var(--tt-color-main), var(--tt-color-sub));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
}

.author-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tt-color-text);
  margin: 0 0 0.25rem 0;
}

.author-location {
  font-size: 0.95rem;
  color: var(--tt-color-gray-500);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--tt-color-gray-200);
  color: var(--tt-color-gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: var(--tt-color-main);
  color: white;
  border-color: var(--tt-color-main);
  transform: scale(1.05);
}

.carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.carousel-dots {
  display: flex;
  gap: 0.75rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tt-color-gray-300);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: var(--tt-color-main);
  transform: scale(1.2);
}

.dot:hover {
  background: var(--tt-color-sub);
}

/* Responsive Design for Testimonials */
@media (max-width: 768px) {
  .modern-testimonials-section {
    padding: 4rem 0;
  }
  
  .testimonials-carousel {
    padding: 0 1rem;
  }
  
  .testimonial-card {
    padding: 2rem;
  }
  
  .testimonial-text {
    font-size: 1rem;
  }
  
  .carousel-controls {
    gap: 1.5rem;
  }
  
  .carousel-btn {
    width: 40px;
    height: 40px;
  }
}

.testimonials-carousel {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.carousel-container {
  overflow: hidden;
  border-radius: 1rem;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial-card {
  background: white;
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 100%;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
}

.testimonial-card.active {
  opacity: 1;
  transform: translateX(0);
}

.testimonial-rating {
  margin-bottom: 1.5rem;
  text-align: center;
}

.testimonial-rating span {
  color: #fbbf24;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.testimonial-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--tt-color-gray-700);
  margin: 0 0 2rem 0;
  text-align: center;
  font-style: italic;
  quotes: "「" "」";
}

.testimonial-text::before {
  content: open-quote;
}

.testimonial-text::after {
  content: close-quote;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-avatar.placeholder {
  background: linear-gradient(135deg, var(--tt-color-main), var(--tt-color-sub));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
}

.author-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tt-color-text);
  margin: 0 0 0.25rem 0;
}

.author-location {
  font-size: 0.95rem;
  color: var(--tt-color-gray-500);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--tt-color-gray-200);
  color: var(--tt-color-gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: var(--tt-color-main);
  color: white;
  border-color: var(--tt-color-main);
  transform: scale(1.05);
}

.carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.carousel-dots {
  display: flex;
  gap: 0.75rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tt-color-gray-300);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: var(--tt-color-main);
  transform: scale(1.2);
}

.dot:hover {
  background: var(--tt-color-sub);
}

/* Modern Contact Section */
.modern-contact-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.contact-content {
  max-width: 800px;
  margin: 0 auto;
}

.contact-form-wrapper {
  background: white;
  padding: 3rem;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive Design for Contact Section */
@media (max-width: 768px) {
  .modern-contact-section {
    padding: 4rem 0;
  }
  
  .contact-content {
    padding: 0 1rem;
  }
  
  .contact-form-wrapper {
    padding: 2rem;
    border-radius: 1rem;
  }
}

.contact-form-message {
  text-align: center;
  color: var(--tt-color-gray-600);
  padding: 2rem;
  background: var(--tt-color-gray-100);
  border-radius: 0.75rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-container {
    padding: 0 1rem;
  }
  
  /* Elementorコンテナのモバイル版パディング調整 */
  .e-con {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
  }
  
  /* プロセスステップコンテナの中央揃え */
  .process-steps-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px);
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  
  .header-nav.open {
    display: flex;
  }
  
  .nav-item {
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: center;
    margin: 0.25rem 0;
  }
  
  .mobile-toggle {
    display: block;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 0.75rem;
  }
  
  .header-logo {
    font-size: 1.25rem;
  }
  
  .header-logo svg {
    width: 28px;
    height: 28px;
  }
  
  .modern-hero .hero-content {
    padding: 1rem;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  .hero-badge {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
  }
  
  .testimonial-card {
    padding: 1.5rem;
  }
  
  .contact-form-wrapper {
    padding: 1.5rem;
  }
  
  .contact-item {
    padding: 1rem;
  }
  
  .contact-icon {
    width: 40px;
    height: 40px;
  }
}

/* ========================================
   BLOG PAGE STYLES - Refined Modern Design
   ======================================== */

/* Blog Hero Section */
.blog-hero-modern {
  position: relative;
  min-height: 300px;
  padding: 4rem 0 2rem 0;
  background: var(--tt-color-bg);
  border-bottom: 1px solid var(--tt-color-gray-200);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.blog-hero-modern .blog-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.blog-hero-modern .blog-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
}

.blog-hero-modern .container {
  position: relative;
  z-index: 3;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.blog-hero-content {
  padding: 0 1rem;
}

.blog-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tt-color-gray-50);
  border: 1px solid var(--tt-color-gray-200);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tt-color-main);
  margin-bottom: 1.5rem;
  transition: all 0.2s ease;
}

.blog-hero-modern .blog-hero-overlay + .container .blog-hero-badge {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  color: var(--tt-color-bg);
}

.blog-hero-badge:hover {
  background: var(--tt-color-gray-100);
  border-color: var(--tt-color-gray-300);
}

.blog-hero-modern .blog-hero-overlay + .container .blog-hero-badge:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.blog-hero-badge .typing-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--tt-color-main);
  animation: blink-caret 0.75s step-end infinite;
}

.blog-hero-badge .typing-text.typing {
  animation: typing 2s steps(10, end), blink-caret 0.75s step-end infinite;
}

.blog-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
  margin: 0 0 1rem 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.blog-hero-modern .blog-hero-overlay + .container .blog-hero-title {
  color: var(--tt-color-bg);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.blog-hero-subtitle {
  font-size: 1.125rem;
  color: var(--tt-color-gray-600);
  margin: 0;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.blog-hero-modern .blog-hero-overlay + .container .blog-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Blog Category Filter */
.blog-category-filter {
  margin-bottom: 3rem;
  text-align: center;
}

.blog-category-filter h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tt-color-text);
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.category-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--tt-color-gray-200);
  border-radius: 25px;
  background: var(--tt-color-bg);
  color: var(--tt-color-gray-600);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-btn:hover {
  border-color: var(--tt-color-main);
  color: var(--tt-color-main);
  background: var(--tt-color-gray-50);
}

.category-btn.active {
  border-color: var(--tt-color-main);
  background: var(--tt-color-main);
  color: var(--tt-color-bg);
}

/* Blog Category Section */
.blog-category-section {
  margin-bottom: 4rem;
}

.blog-category-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tt-color-text);
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--tt-color-main);
  position: relative;
}

.blog-category-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--tt-color-main);
}

/* Blog Posts Grid - Updated Layout */
.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Blog Card Design - Updated for smaller images */
.blog-card-airbnb {
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-gray-200);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.blog-card-airbnb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border-color: var(--tt-color-gray-300);
}

.blog-card-image {
  position: relative;
  overflow: hidden;
  flex: 0 0 120px;
  height: 120px;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card-airbnb:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--tt-color-gray-100) 0%, var(--tt-color-gray-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-icon {
  font-size: 2rem;
  opacity: 0.6;
}

.blog-card-category {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: transparent;
  backdrop-filter: none;
  border-radius: 12px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tt-color-main);
  border: none;
}

.blog-card-content {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--tt-color-gray-500);
}

.blog-date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.blog-author {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.blog-card-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.blog-card-title a {
  color: var(--tt-color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card-title a:hover {
  color: var(--tt-color-main);
}


.blog-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tt-color-main);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8125rem;
  transition: all 0.2s ease;
}

.blog-read-more:hover {
  color: var(--tt-color-sub);
  transform: translateX(2px);
}

.blog-read-more svg {
  transition: transform 0.2s ease;
}

.blog-read-more:hover svg {
  transform: translateX(2px);
}

/* Blog Pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.blog-pagination .page-numbers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-pagination .page-numbers li {
  margin: 0;
}

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.blog-pagination .page-numbers a {
  color: var(--tt-color-gray-600);
  background: var(--tt-color-gray-50);
}

.blog-pagination .page-numbers a:hover {
  color: var(--tt-color-main);
  background: var(--tt-color-gray-100);
  border-color: var(--tt-color-gray-200);
}

.blog-pagination .page-numbers .current {
  color: var(--tt-color-bg);
  background: var(--tt-color-main);
  border-color: var(--tt-color-main);
}

.blog-pagination .page-numbers .prev,
.blog-pagination .page-numbers .next {
  gap: 0.5rem;
}

/* No Posts State */
.blog-no-posts {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--tt-color-gray-50);
  border-radius: 16px;
  border: 1px solid var(--tt-color-gray-200);
}

.no-posts-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.blog-no-posts h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tt-color-text);
}

.blog-no-posts p {
  margin: 0;
  color: var(--tt-color-gray-600);
  font-size: 1rem;
  line-height: 1.6;
}

/* Home Button */
.blog-home-button {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.blog-home-button .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.blog-home-button .btn svg {
  transition: transform 0.2s ease;
}

.blog-home-button .btn:hover svg {
  transform: translateY(-1px);
}

/* Tours Page Styles */
.tours-hero-modern {
  padding: 6rem 0 4rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.tours-hero-modern .tours-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.tours-hero-modern .tours-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 2;
}

.tours-hero-modern .container {
  position: relative;
  z-index: 3;
}

.tours-hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.tours-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-gray-200);
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tt-color-text);
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.tours-hero-modern .tours-hero-overlay + .container .tours-hero-badge {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  color: var(--tt-color-bg);
}

.tours-hero-badge:hover {
  background: var(--tt-color-gray-100);
  border-color: var(--tt-color-gray-300);
}

.tours-hero-modern .tours-hero-overlay + .container .tours-hero-badge:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.tours-hero-badge .typing-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--tt-color-main);
  animation: blink-caret 0.75s step-end infinite;
}

.tours-hero-badge .typing-text.typing {
  animation: typing 2s steps(10, end), blink-caret 0.75s step-end infinite;
}

.tours-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
}

.tours-hero-modern .tours-hero-overlay + .container .tours-hero-title {
  color: var(--tt-color-bg);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.tours-hero-subtitle {
  font-size: 1.125rem;
  color: var(--tt-color-gray-600);
  margin: 0;
  line-height: 1.6;
}

.tours-hero-modern .tours-hero-overlay + .container .tours-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Tours Grid */
.tours-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

/* Tour Card Modern */
.tour-card-modern {
  background: var(--tt-color-bg);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid var(--tt-color-gray-100);
  position: relative;
}

.tour-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tt-color-main);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  z-index: 1;
}

.tour-card-modern:hover::before {
  transform: scaleX(1);
}

.tour-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--tt-color-main);
}

.tour-card-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.tour-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tour-card-modern:hover .tour-card-image img {
  transform: scale(1.05);
}

.tour-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--tt-color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-color-gray-400);
}

.tour-icon {
  font-size: 3rem;
}

.tour-card-region {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--tt-color-main);
  color: var(--tt-color-bg);
  padding: 0.375rem 0.875rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.tour-card-content {
  padding: 1.5rem;
}

.tour-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.tour-card-title a {
  color: var(--tt-color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.tour-card-title a:hover {
  color: var(--tt-color-main);
}

.tour-card-description {
  color: var(--tt-color-gray-600);
  margin: 0 0 1rem 0;
  line-height: 1.6;
  font-size: 0.9375rem;
}

.tour-card-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tour-meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--tt-color-gray-500);
}

.tour-meta-icon {
  font-size: 1rem;
}

.tour-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tour-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tour-old-price {
  text-decoration: line-through;
  color: var(--tt-color-gray-400);
  font-size: 0.875rem;
}

.tour-current-price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tt-color-main);
}

.tour-card-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tt-color-accent);
  color: var(--tt-color-bg);
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tour-card-button:hover {
  background-color: #e67300;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(255, 128, 0, 0.3);
}

.tour-card-button svg {
  transition: transform 0.3s ease;
}

.tour-card-button:hover svg {
  transform: translateX(2px);
}

/* Tours Home Button */
.tours-home-button {
  text-align: center;
  margin-top: 3rem;
}

.tours-home-button .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tours-home-button .btn svg {
  transition: transform 0.3s ease;
}

.tours-home-button .btn:hover svg {
  transform: translateY(-1px);
}

/* Tours No Posts */
.tours-no-posts {
  text-align: center;
  padding: 4rem 2rem;
}

.no-tours-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.tours-no-posts h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tt-color-text);
  margin: 0 0 1rem 0;
}

.tours-no-posts p {
  color: var(--tt-color-gray-600);
  margin: 0 0 2rem 0;
  font-size: 1rem;
}

/* Footer Styles */
.site-footer {
	background: var(--tt-color-gray-900);
	color: var(--tt-color-gray-300);
	padding: 3rem 0 0;
	margin-top: 4rem;
	clear: both;
}

.footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.footer-content {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

.footer-section h4 {
	color: var(--tt-color-bg);
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.footer-logo-image {
	margin-bottom: 0.5rem;
}

.footer-logo-img {
	max-width: 100%;
	height: auto;
	max-height: 2.5rem; /* Same height as h3 would be */
	width: auto;
	object-fit: contain;
}

.footer-company h3 {
	color: var(--tt-color-bg);
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.footer-company p {
	color: var(--tt-color-gray-400);
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.footer-description {
	color: var(--tt-color-gray-400);
	font-size: 0.875rem;
	line-height: 1.6;
	max-width: 300px;
}

.footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-contact-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.footer-contact-icon {
	font-size: 1rem;
	width: 20px;
	text-align: center;
}

.footer-contact-link {
	color: var(--tt-color-gray-300);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.3s ease;
}

.footer-contact-link:hover {
	color: var(--tt-color-bg);
}

.footer-social-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-social-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--tt-color-gray-300);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.3s ease;
}

.footer-social-link:hover {
	color: var(--tt-color-bg);
}

.footer-social-link svg,
.footer-social-link img {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

.footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-nav-list a {
	color: var(--tt-color-gray-300);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.3s ease;
}

.footer-nav-list a:hover {
	color: var(--tt-color-bg);
}

.footer-bottom {
	border-top: 1px solid var(--tt-color-gray-800);
	padding: 2rem 0;
}

.footer-bottom-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-copyright p {
	color: var(--tt-color-gray-400);
	font-size: 0.875rem;
	margin: 0;
}

.footer-legal-link {
	color: var(--tt-color-gray-400);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.3s ease;
}

.footer-legal-link:hover {
	color: var(--tt-color-bg);
}

/* Terms Page Styles */
.terms-hero-modern {
	padding: 6rem 0 4rem;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	position: relative;
	overflow: hidden;
	min-height: 300px;
	display: flex;
	align-items: center;
}

.terms-hero-content {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1rem;
}

.terms-hero-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--tt-color-text);
	margin: 0 0 1rem 0;
	line-height: 1.2;
}

.terms-hero-subtitle {
	font-size: 1.125rem;
	color: var(--tt-color-gray-600);
	margin: 0;
	line-height: 1.6;
}

.terms-content-section {
	padding: 4rem 0;
	background: var(--tt-color-bg);
}

.terms-content-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.terms-content {
	line-height: 1.8;
	color: var(--tt-color-text);
}

.terms-content h2 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--tt-color-text);
	margin: 2rem 0 1rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--tt-color-main);
}

.terms-content h2:first-child {
	margin-top: 0;
}

.terms-content p {
	margin-bottom: 1rem;
	font-size: 0.95rem;
}

.terms-content ul {
	margin: 1rem 0;
	padding-left: 1.5rem;
}

.terms-content li {
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.terms-footer {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--tt-color-gray-200);
	text-align: center;
}

.terms-footer p {
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	color: var(--tt-color-gray-600);
}

/* Responsive Footer */
@media (max-width: 1024px) {
	.footer-content {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}


@media (max-width: 768px) {
	.site-footer {
		padding: 2rem 0 0;
		margin-top: 4rem;
	}
	
	.footer-content {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
	
	.footer-description {
		max-width: none;
	}
	
	.footer-contact-list,
	.footer-social-list {
		align-items: center;
	}
	
	.footer-nav-list {
		align-items: center;
	}
	
	.footer-bottom-content {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
	
	.terms-hero-modern {
		padding: 4rem 0 3rem;
		min-height: 250px;
	}
	
	.terms-hero-title {
		font-size: 2rem;
	}
	
	.terms-hero-subtitle {
		font-size: 1rem;
	}
	
	.terms-content-section {
		padding: 3rem 0;
	}
}


@media (max-width: 480px) {
	.footer-container {
		padding: 0 0.75rem;
	}
	
	.footer-content {
		gap: 1.5rem;
	}
	
	.footer-section h4 {
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}
	
	.footer-company h3 {
		font-size: 1.25rem;
	}
	
	.footer-logo-img {
		max-height: 2rem; /* Smaller on mobile */
	}
	
	.footer-description,
	.footer-contact-link,
	.footer-social-link,
	.footer-nav-list a {
		font-size: 0.8rem;
	}
	
	.footer-bottom {
		padding: 1.5rem 0;
	}
	
	.footer-copyright p,
	.footer-legal-link {
		font-size: 0.8rem;
	}
	
	.terms-hero-modern {
		padding: 3rem 0 2rem;
		min-height: 200px;
	}
	
	.terms-hero-title {
		font-size: 1.75rem;
	}
	
	.terms-hero-subtitle {
		font-size: 0.95rem;
	}
	
	.terms-content-section {
		padding: 2rem 0;
	}
	
	.terms-content h2 {
		font-size: 1.125rem;
	}
	
	.terms-content p,
	.terms-content li {
		font-size: 0.9rem;
	}
}


/* Contact Page Styles */
.contact-hero-modern {
  padding: 6rem 0 4rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.contact-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.contact-hero-background .hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 2;
}

.contact-hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 3;
}

.contact-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-gray-200);
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tt-color-text);
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.contact-hero-badge:hover {
  background: var(--tt-color-gray-100);
  border-color: var(--tt-color-gray-300);
}

.contact-hero-badge .typing-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--tt-color-main);
  animation: blink-caret 0.75s step-end infinite;
}

.contact-hero-badge .typing-text.typing {
  animation: typing 2s steps(10, end), blink-caret 0.75s step-end infinite;
}

.contact-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tt-color-text);
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
}

.contact-hero-subtitle {
  font-size: 1.125rem;
  color: var(--tt-color-gray-600);
  margin: 0;
  line-height: 1.6;
}

/* Text color when overlay is present */
.contact-hero-modern .contact-hero-overlay ~ .container .contact-hero-title {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-hero-modern .contact-hero-overlay ~ .container .contact-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Contact Info Section */
.contact-info-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.contact-info-grid-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.contact-info-card-simple {
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-gray-100);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.contact-info-card-simple:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--tt-color-main);
}

.contact-info-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	justify-content: center;
	padding: 0.5rem;
	background: var(--tt-color-gray-50);
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}

.contact-info-item:hover {
	background: var(--tt-color-gray-100);
	transform: translateX(2px);
}

.contact-info-handle {
	flex: 1;
	font-size: 0.875rem;
	color: var(--tt-color-gray-600);
	font-weight: 500;
	text-align: left;
}

.contact-copy-btn {
  flex-shrink: 0;
  background: var(--tt-color-gray-200);
  border: none;
  border-radius: 0.375rem;
  padding: 0.375rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-copy-btn:hover {
  background: var(--tt-color-main);
  color: var(--tt-color-bg);
  transform: scale(1.1);
}

.contact-copy-btn svg {
  width: 16px;
  height: 16px;
}

.contact-copy-btn.copied {
  background: var(--tt-color-accent);
  color: var(--tt-color-bg);
}

.contact-copy-btn.copied svg {
  transform: scale(1.2);
}

.contact-info-emoji {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
}

.contact-info-text {
  font-size: 0.9375rem;
  color: var(--tt-color-gray-600);
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;
}

/* SNS Card Styles */
.contact-info-card-sns {
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-gray-100);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.contact-info-card-sns:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--tt-color-main);
}

.sns-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sns-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: var(--tt-color-gray-50);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.sns-item:hover {
  background: var(--tt-color-gray-100);
  transform: translateX(2px);
}

.sns-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sns-icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.sns-icon svg {
  width: 100%;
  height: 100%;
}

.sns-icon svg[fill="currentColor"] {
  fill: currentColor;
}

/* SNS Icon Colors */
.sns-item:nth-child(1) .sns-icon svg {
  color: #E4405F; /* Instagram */
}

.sns-item:nth-child(2) .sns-icon svg {
  color: #1DA1F2; /* Twitter */
}

.sns-item:nth-child(3) .sns-icon svg {
  color: #1877F2; /* Facebook */
}

.sns-item:nth-child(4) .sns-icon svg {
  color: #FF0000; /* YouTube */
}

.sns-handle {
  flex: 1;
  font-size: 0.875rem;
  color: var(--tt-color-gray-600);
  font-weight: 500;
  text-align: left;
}

.sns-copy-btn {
  flex-shrink: 0;
  background: var(--tt-color-gray-200);
  border: none;
  border-radius: 0.375rem;
  padding: 0.375rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sns-copy-btn:hover {
  background: var(--tt-color-main);
  color: var(--tt-color-bg);
  transform: scale(1.1);
}

.sns-copy-btn svg {
  width: 16px;
  height: 16px;
}

.sns-copy-btn.copied {
  background: var(--tt-color-accent);
  color: var(--tt-color-bg);
}

.sns-copy-btn.copied svg {
  transform: scale(1.2);
}

/* Desktop Copy Feedback Animation */
@keyframes copyPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 158, 142, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(0, 158, 142, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 158, 142, 0);
  }
}

/* Contact Form Section */
.contact-form-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.contact-form-wrapper-single {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 600px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-form-header {
  margin-bottom: 2rem;
  text-align: center;
}

.contact-form-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--tt-color-text);
}

.contact-form-header p {
  color: var(--tt-color-gray-600);
  margin: 0;
  font-size: 0.9375rem;
}

/* Modern Form Styles */
.contact-form-modern {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group-modern {
  display: flex;
  flex-direction: column;
}

.form-label-modern {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tt-color-text);
  margin-bottom: 0.5rem;
}

.form-input-modern {
  padding: 0.875rem 1rem;
  border: 1px solid var(--tt-color-gray-200);
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  background: var(--tt-color-bg);
}

.form-input-modern:focus {
  outline: none;
  border-color: var(--tt-color-main);
}

.form-textarea-modern {
  min-height: 120px;
  resize: vertical;
}

.form-submit-modern {
  text-align: center;
  margin-top: 1rem;
}

.btn-primary-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tt-color-main);
  color: var(--tt-color-bg);
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary-modern:hover {
  background: var(--tt-color-main-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 158, 142, 0.3);
}

.btn-primary-modern svg {
  transition: transform 0.3s ease;
}

.btn-primary-modern:hover svg {
  transform: translateX(2px);
}


/* Responsive Design for Contact */
@media (max-width: 1024px) {
  .contact-info-grid-simple {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  .contact-hero-modern {
    min-height: 250px;
    padding: 4rem 0 3rem 0;
  }
  
  .contact-hero-title {
    font-size: 2.25rem;
  }
}

@media (max-width: 768px) {
  .contact-hero-modern {
    min-height: 200px;
    padding: 3rem 0 2rem 0;
  }
  
  .contact-hero-title {
    font-size: 2rem;
  }
  
  .contact-hero-subtitle {
    font-size: 1rem;
  }
  
  .contact-info-grid-simple {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .contact-info-card-simple {
    padding: 1.25rem;
  }
  
  .contact-form-wrapper-single {
    padding: 2rem;
  }
  
  .contact-form-header h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .contact-hero-modern {
    min-height: 180px;
    padding: 2.5rem 0 2rem 0;
  }
  
  .contact-hero-content {
    padding: 0 0.5rem;
  }
  
  .contact-hero-title {
    font-size: 1.75rem;
  }
  
  .contact-hero-subtitle {
    font-size: 0.95rem;
  }
  
  .contact-hero-badge {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
  }
  
  .contact-info-section,
  .contact-form-section {
    padding: 3rem 0;
  }
  
  .contact-info-card-simple,
  .contact-info-card-sns {
    padding: 1rem;
    gap: 0.5rem;
  }
  
  .contact-info-emoji {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  .contact-info-text {
    font-size: 0.875rem;
  }
  
  .contact-info-content,
  .contact-info-item {
    gap: 0.5rem;
  }
  
  .contact-info-item {
    padding: 0.375rem;
  }
  
  .contact-copy-btn {
    padding: 0.25rem;
  }
  
  .contact-copy-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .sns-list {
    gap: 0.5rem;
  }
  
  .sns-item {
    padding: 0.375rem;
    gap: 0.5rem;
  }
  
  .sns-icon {
    width: 18px;
    height: 18px;
  }
  
  .sns-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  
  .sns-handle {
    font-size: 0.8125rem;
  }
  
  .sns-copy-btn {
    padding: 0.25rem;
  }
  
  .sns-copy-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .contact-form-wrapper-single {
    padding: 1.5rem;
  }
}

/* Tour Detail Contact Form Styles */
#tour-contact-form .contact-form-wrapper {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

#tour-contact-form .card {
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Ensure Contact Form 7 styles work properly in tour detail */
#tour-contact-form .wpcf7-form {
  max-width: 100%;
  margin: 0;
}

#tour-contact-form .wpcf7-form p {
  margin-bottom: 1.5rem;
}

#tour-contact-form .wpcf7-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--tt-color-text);
}

#tour-contact-form .wpcf7-form input[type="text"],
#tour-contact-form .wpcf7-form input[type="email"],
#tour-contact-form .wpcf7-form input[type="tel"],
#tour-contact-form .wpcf7-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--tt-color-gray-200);
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

#tour-contact-form .wpcf7-form input:focus,
#tour-contact-form .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--tt-color-main);
}

#tour-contact-form .wpcf7-form input[type="submit"] {
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  color: white;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 114, 95, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto;
}

#tour-contact-form .wpcf7-form p:has(input[type="submit"]) {
  text-align: center;
}

#tour-contact-form .wpcf7-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 114, 95, 0.4);
  background: linear-gradient(135deg, #005a4a 0%, #007a6b 100%);
}

/* Responsive Design for Tour Contact Form */
@media (max-width: 768px) {
  #tour-contact-form .card {
    margin: 0 1rem;
    padding: 1.5rem;
  }
  
  #tour-contact-form .wpcf7-form input[type="submit"] {
    width: 100%;
    max-width: 300px;
  }
}

/* ========================================
   Contact Page - Contact Form 7 Styles
   ======================================== */

/* Contact Page Contact Form 7 Styles */
.contact-form-section .wpcf7-form {
  max-width: 100%;
  margin: 0;
}

.contact-form-section .wpcf7-form p {
  margin-bottom: 1.5rem;
}

.contact-form-section .wpcf7-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--tt-color-text);
  font-size: 0.875rem;
}

.contact-form-section .wpcf7-form input[type="text"],
.contact-form-section .wpcf7-form input[type="email"],
.contact-form-section .wpcf7-form input[type="tel"],
.contact-form-section .wpcf7-form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--tt-color-gray-300);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease;
  background: var(--tt-color-bg);
  font-family: inherit;
}

.contact-form-section .wpcf7-form input:focus,
.contact-form-section .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--tt-color-main);
}

.contact-form-section .wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form-section .wpcf7-form input[type="submit"] {
  background: var(--tt-color-main);
  color: var(--tt-color-bg);
  border: none;
  border-radius: 0.5rem;
  padding: 0.875rem 2rem;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
  width: auto;
  min-width: 150px;
}

.contact-form-section .wpcf7-form p:has(input[type="submit"]) {
  text-align: center;
  margin-top: 1rem;
}

.contact-form-section .wpcf7-form input[type="submit"]:hover {
  background: var(--tt-color-main-dark);
}

/* Contact Form 7 Validation Styles */
.contact-form-section .wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

.contact-form-section .wpcf7-not-valid {
  border-color: #dc2626 !important;
  box-shadow: none !important;
}

.contact-form-section .wpcf7-response-output {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
}

.contact-form-section .wpcf7-mail-sent-ok {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.contact-form-section .wpcf7-validation-errors {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.contact-form-section .wpcf7-spam-blocked {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

/* Responsive Design for Contact Page Form */
@media (max-width: 768px) {
  .contact-form-section .wpcf7-form input[type="submit"] {
    width: 100%;
    max-width: 300px;
  }
  
  .contact-form-wrapper-single {
    margin: 0 1rem;
  }
}

/* ========================================
   Tour Section Navigation - Modern Design
   ======================================== */

/* Tour Section Navigation Container */
.tour-section-nav {
  background: linear-gradient(135deg, #f8fffe 0%, #ffffff 100%);
  border-top: 1px solid rgba(0, 158, 142, 0.1);
  border-bottom: 1px solid rgba(0, 158, 142, 0.1);
  padding: 2rem 0;
  position: sticky;
  top: 80px;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Section Navigation Container */
.section-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section Navigation List */
.section-nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Section Navigation Item */
.section-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 158, 142, 0.2);
  border-radius: 2rem;
  text-decoration: none;
  color: var(--tt-color-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.section-nav-item:hover {
  color: white;
  border-color: var(--tt-color-main);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 158, 142, 0.3);
}

.section-nav-item:hover::before {
  left: 0;
}

.section-nav-item:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(0, 158, 142, 0.2);
}

/* Section Navigation Icon */
.section-nav-icon {
  width: 18px;
  height: 18px;
  color: var(--tt-color-main);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.section-nav-item:hover .section-nav-icon {
  color: white;
  transform: scale(1.1);
}

/* Active State */
.section-nav-item.active {
  background: linear-gradient(135deg, var(--tt-color-main) 0%, var(--tt-color-sub) 100%);
  color: white;
  border-color: var(--tt-color-main);
  box-shadow: 0 4px 15px rgba(0, 158, 142, 0.3);
}

.section-nav-item.active .section-nav-icon {
  color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .tour-section-nav {
    padding: 1.5rem 0;
  }
  
  .section-nav-container {
    padding: 0 1.5rem;
  }
  
  .section-nav-list {
    gap: 0.375rem;
  }
  
  .section-nav-item {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }
  
  .section-nav-icon {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .tour-section-nav {
    padding: 0.75rem 0;
    position: static;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 158, 142, 0.1);
    border-bottom: 1px solid rgba(0, 158, 142, 0.1);
    z-index: 100;
  }
  
  .section-nav-container {
    padding: 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .section-nav-container::-webkit-scrollbar {
    display: none;
  }
  
  .section-nav-list {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    padding: 0;
    min-width: max-content;
    white-space: nowrap;
  }
  
  .section-nav-item {
    justify-content: center;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    border-radius: 1.5rem;
    min-width: auto;
    height: 36px;
    flex-direction: row;
    gap: 0.375rem;
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  .section-nav-item span {
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }
  
  .section-nav-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .tour-section-nav {
    padding: 0.5rem 0;
  }
  
  .section-nav-container {
    padding: 0 0.75rem;
  }
  
  .section-nav-list {
    gap: 0.375rem;
  }
  
  .section-nav-item {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    height: 32px;
    gap: 0.25rem;
  }
  
  .section-nav-item span {
    font-size: 0.6875rem;
  }
  
  .section-nav-icon {
    width: 12px;
    height: 12px;
  }
}

/* ========================================
   Tour Process Section - Mobile Optimized
   Version: 2.1.0 - Complete Pseudo Element Removal
   ======================================== */

/* Tour Process Section */
.tour-process-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f8fffe 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.tour-process-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="%23009E8E" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  z-index: 0;
}

.tour-process-section .container {
  position: relative;
  z-index: 1;
}

/* Process Steps Container - デスクトップ版 */
@media (min-width: 769px) {
  .process-steps {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    justify-content: center;
    align-items: flex-start;
  }
  
  /* デスクトップ版ではprocess-steps-innerを無視 */
  .process-steps-inner {
    display: contents;
  }
}

/* Step Item - デスクトップ版 */
@media (min-width: 769px) {
  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    position: relative;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease;
    width: 200px;
    height: 280px;
    justify-content: flex-start;
    flex-shrink: 0;
  }
  
  /* ステップコンテンツのレイアウト調整 */
  .step-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
  }
  
  .step-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
  }
  
  .step-description {
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
    color: #666;
  }
  
  /* デスクトップ版ではスワイプ誘導を非表示 */
  .swipe-hint-below {
    display: none !important;
  }
}

/* JavaScriptが無効な場合のフォールバック */
.no-js .step-item {
  opacity: 1;
  transform: translateY(0);
}

.step-item.animate-in {
  opacity: 0;
  transform: translateY(30px);
}

.step-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Step Number */
.step-number {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--tt-color-main), var(--tt-color-sub));
  color: white;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 8px 20px -4px rgba(0, 158, 142, 0.3);
  border: 4px solid white;
  position: relative;
  transition: all 0.3s ease;
}

.step-item.visible .step-num {
  animation: stepPulse 0.6s ease-out;
}

@keyframes stepPulse {
  0% {
    transform: scale(0.8);
    box-shadow: 0 8px 20px -4px rgba(0, 158, 142, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 12px 30px -4px rgba(0, 158, 142, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px -4px rgba(0, 158, 142, 0.3);
  }
}

/* Connecting Line */
.step-item::after {
  content: '';
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2rem;
  background: linear-gradient(to bottom, var(--tt-color-main), transparent);
  opacity: 0;
  transition: all 0.6s ease;
  z-index: 1;
}

.step-item:not(:last-child)::after {
  opacity: 1;
}

.step-item.visible::after {
  background: linear-gradient(to bottom, var(--tt-color-main), var(--tt-color-sub));
  animation: lineFill 0.8s ease-out 0.3s forwards;
}

@keyframes lineFill {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 2rem;
    opacity: 1;
  }
}

/* Step Content */
.step-content {
  flex: 1;
  background: white;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  border: 2px solid rgba(0, 158, 142, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  opacity: 1;
}

/* JavaScriptが無効な場合のフォールバック */
.no-js .step-content {
  transform: translateY(0);
  opacity: 1;
}

.step-item.animate-in .step-content {
  transform: translateY(20px);
  opacity: 0;
}

.step-item.visible .step-content {
  transform: translateY(0);
  opacity: 1;
}

/* すべての疑似要素で緑の棒を完全削除 */
.step-content::before,
.step-content::after,
.step-item::before,
.step-item::after,
.step-item .step-content::before,
.step-item .step-content::after,
.step-item:nth-child(1)::before,
.step-item:nth-child(1)::after,
.step-item:nth-child(2)::before,
.step-item:nth-child(2)::after,
.step-item:nth-child(3)::before,
.step-item:nth-child(3)::after,
.step-item:nth-child(4)::before,
.step-item:nth-child(4)::after,
.step-item:nth-child(5)::before,
.step-item:nth-child(5)::after {
  display: none !important;
}

.step-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -8px rgba(0, 158, 142, 0.2);
  border-color: rgba(0, 158, 142, 0.4);
}

.step-content:hover::before {
  height: 6px;
  background: linear-gradient(90deg, var(--tt-color-main), var(--tt-color-sub), var(--tt-color-main));
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tt-color-text);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.step-description {
  font-size: 0.95rem;
  color: var(--tt-color-gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Mobile Layout - 横スクロールレイアウト */
@media (max-width: 768px) {
  .tour-process-section {
    padding: 3rem 0;
    overflow: hidden;
  }
  
  /* 横スクロール誘導UI - スクロール下に表示 */
  .process-steps-container {
    position: relative;
  }
  
  .process-steps {
    position: relative;
  }
  
  /* スワイプ誘導 - スクロール下に表示（モバイル版のみ） */
  .swipe-hint-below {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 158, 142, 0.1);
    color: #666;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 400;
    box-shadow: none;
    animation: none;
    pointer-events: none;
    border: 1px solid rgba(0, 158, 142, 0.15);
    position: relative;
    overflow: hidden;
  }
  
  .swipe-hint-text {
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }
  
  .process-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  /* ステップカードを横スクロール用のコンテナにラップ */
  .process-steps-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  .process-steps-inner::-webkit-scrollbar {
    display: none !important;
  }
  
  .process-steps::-webkit-scrollbar {
    display: none !important;
  }
  
  .step-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
    width: 280px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    scroll-snap-align: center !important;
    position: relative;
    /* モバイル版ではアニメーションを無効化 */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* 矢印を一旦削除 */
  .step-item:not(:last-child)::after {
    display: none !important;
  }
  
  /* 5番目のステップも通常のサイズに */
  .step-item-center {
    width: 280px !important;
    flex-shrink: 0 !important;
  }
  
  /* モバイル版ではアニメーション関連のクラスを無効化 */
  .step-item.animate-in,
  .step-item.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .step-number {
    position: relative;
    z-index: 2;
  }
  
  .step-num {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  
  .step-content {
    padding: 1.25rem;
    width: 100%;
    transform: translateY(0);
    opacity: 1;
  }
  
  /* JavaScriptが無効な場合のフォールバック */
  .no-js .step-content {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* モバイル版ではアニメーションを軽量化 */
  .step-item.animate-in .step-content {
    opacity: 0.7;
  }
  
  .step-item.visible .step-content {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  
  /* モバイル版でもすべての疑似要素で緑の棒を完全削除 */
  .step-content::before,
  .step-content::after,
  .step-item::before,
  .step-item::after,
  .step-item .step-content::before,
  .step-item .step-content::after,
  .step-item:nth-child(1)::before,
  .step-item:nth-child(1)::after,
  .step-item:nth-child(2)::before,
  .step-item:nth-child(2)::after,
  .step-item:nth-child(3)::before,
  .step-item:nth-child(3)::after,
  .step-item:nth-child(4)::before,
  .step-item:nth-child(4)::after,
  .step-item:nth-child(5)::before,
  .step-item:nth-child(5)::after {
    display: none !important;
  }
  
  .step-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  
  .step-description {
    font-size: 0.875rem;
  }
  
  /* モバイル版では重いアニメーションを削除（軽量化） */
}

/* Small mobile devices */
@media (max-width: 480px) {
  .tour-process-section {
    padding: 2.5rem 0;
  }
  
  .process-steps {
    gap: 1rem;
  }
  
  .step-num {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  
  .step-content {
    padding: 1rem;
  }
  
  .step-title {
    font-size: 1rem;
  }
  
  .step-description {
    font-size: 0.8rem;
  }
}

/* ========================================
   Tour Detail Content - Full Width Sections
   ======================================== */

/* Gallery Content */
.gallery-content {
  width: 100%;
  max-width: 100%;
}

/* Itinerary Content */
.itinerary-content {
  width: 100%;
  max-width: 100%;
}

/* Map Content */
.map-content {
  width: 100%;
  max-width: 100%;
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

/* Contact Form Content */
.contact-form-content {
  width: 100%;
  max-width: 100%;
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

/* Included/Excluded Content */
.included-excluded-content {
  width: 100%;
  max-width: 100%;
}

/* Responsive adjustments for full-width content */
@media (max-width: 768px) {
  .gallery-content,
  .itinerary-content,
  .map-content,
  .contact-form-content,
  .included-excluded-content {
    margin: 0 -1rem;
    border-radius: 0;
  }
  
  .map-content,
  .contact-form-content {
    box-shadow: none;
    border-left: none;
    border-right: none;
  }
}

@media (max-width: 480px) {
  .gallery-content,
  .itinerary-content,
  .map-content,
  .contact-form-content,
  .included-excluded-content {
    margin: 0 -0.75rem;
  }
}

/* Offset for sticky header */
.section-nav-item[href^="#"] {
  scroll-margin-top: 120px;
}

.tours-hero-modern .tours-hero-background {
  background-attachment: scroll;
}

@media (max-width: 768px) {
  .tours-hero-modern {
    min-height: 200px;
    padding: 3rem 0 2rem 0;
  }
  
  .tours-hero-title {
    font-size: 2rem;
  }
  
  .tours-hero-subtitle {
    font-size: 1rem;
  }
  
  .tours-grid-modern {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .tour-card-image {
    height: 200px;
  }
  
  .tour-card-content {
    padding: 1.25rem;
  }
  
  .tours-hero-modern .tours-hero-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
  }
}

@media (max-width: 480px) {
  .tours-hero-modern {
    min-height: 180px;
    padding: 2.5rem 0 2rem 0;
  }
  
  .tours-hero-content {
    padding: 0 0.5rem;
  }
  
  .tours-hero-title {
    font-size: 1.75rem;
  }
  
  .tours-hero-subtitle {
    font-size: 0.95rem;
  }
  
  .tours-hero-badge {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
  }
  
  .tours-section {
    padding: 3rem 0;
  }
  
  .tour-card-content {
    padding: 1rem;
  }
  
  .tour-card-image {
    height: 180px;
  }
  
  .tour-card-title {
    font-size: 1.125rem;
  }
  
  .tour-card-description {
    font-size: 0.875rem;
  }
  
  .tours-hero-modern .tours-hero-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
  }
}

/* Responsive Design for Blog */
@media (max-width: 1024px) {
  .blog-posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .blog-category-title {
    font-size: 1.75rem;
  }
  
  .blog-hero-modern {
    min-height: 250px;
    padding: 3rem 0 1.5rem 0;
  }
  
  .blog-hero-title {
    font-size: 2.25rem;
  }
  
  .blog-hero-modern .blog-hero-background {
    background-attachment: scroll;
  }
  
  .category-buttons {
    gap: 0.5rem;
  }
  
  .category-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 768px) {
  .blog-hero-modern {
    min-height: 200px;
    padding: 2.5rem 0 1.5rem 0;
  }

  .blog-hero-title {
    font-size: 2rem;
  }

  .blog-hero-subtitle {
    font-size: 1rem;
  }

  .blog-posts-grid {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 -1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  .blog-posts-grid::-webkit-scrollbar {
    height: 4px;
  }
  
  .blog-posts-grid::-webkit-scrollbar-track {
    background: var(--tt-color-gray-100);
    border-radius: 2px;
  }
  
  .blog-posts-grid::-webkit-scrollbar-thumb {
    background: var(--tt-color-main);
    border-radius: 2px;
  }
  
  .blog-posts-grid::-webkit-scrollbar-thumb:hover {
    background: var(--tt-color-main-dark);
  }
  
  .blog-category-title {
    font-size: 1.5rem;
  }
  
  .blog-card-airbnb {
    flex: 0 0 85vw;
    flex-direction: column;
    scroll-snap-align: start;
  }
  
  .blog-card-image {
    flex: none;
    height: 160px;
  }
  
  .blog-card-content {
    padding: 1rem;
  }
  
  .blog-hero-modern .blog-hero-overlay {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.7) 100%
    );
  }
  
  .category-buttons {
    gap: 0.5rem;
  }
  
  .category-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .blog-hero-modern {
    min-height: 180px;
    padding: 2rem 0 1rem 0;
  }

  .blog-hero-content {
    padding: 0 0.5rem;
  }

  .blog-hero-title {
    font-size: 1.75rem;
  }

  .blog-hero-subtitle {
    font-size: 0.95rem;
  }

  .blog-hero-badge {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
  }

  .blog-posts-section {
    padding: 3rem 0;
  }
  
  .blog-category-title {
    font-size: 1.25rem;
  }
  
  .blog-posts-grid {
    gap: 0.75rem;
    padding: 0 0.75rem;
    margin: 0 -0.75rem;
  }
  
  .blog-card-airbnb {
    flex: 0 0 85vw;
  }
  
  .blog-card-content {
    padding: 0.875rem;
  }
  
  .blog-card-image {
    height: 140px;
  }
  
  .blog-card-title {
    font-size: 1rem;
  }
  
  
  .blog-hero-modern .blog-hero-overlay {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
  
  .category-buttons {
    gap: 0.375rem;
  }
  
  .category-btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
  }
  
  .blog-category-filter h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}

/* ========================================
   Single Post Styles - Complete Redesign
   ======================================== */

/* Single Post Page Container */
.single-post-page {
	min-height: 100vh;
	background: var(--tt-color-bg);
}

/* Single Post Hero Section */
.single-post-hero {
	padding: 6rem 0 4rem;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	position: relative;
	overflow: hidden;
}

.single-post-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23f3f4f6" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
	opacity: 0.3;
	pointer-events: none;
}

.single-post-hero-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1rem;
	text-align: center;
	position: relative;
	z-index: 1;
}

.single-post-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.single-post-category .category-badge {
	background: var(--tt-color-main);
	color: var(--tt-color-bg);
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.single-post-date {
	color: var(--tt-color-gray-600);
	font-size: 0.875rem;
	font-weight: 500;
}

.single-post-title {
	font-size: 3rem;
	font-weight: 700;
	color: var(--tt-color-text);
	margin: 0 0 2rem 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.single-post-featured-image {
	margin-top: 3rem;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.single-post-featured-image:hover {
	transform: translateY(-5px);
}

.single-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Single Post Content Section */
.single-post-content-section {
	padding: 4rem 0;
	background: var(--tt-color-bg);
}

.single-post-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 4rem;
	align-items: start;
}

.single-post-main-content {
	min-width: 0;
}

.single-post-sidebar {
	position: sticky;
	top: 2rem;
}

.single-post-article {
	background: var(--tt-color-bg);
	border-radius: 1rem;
	padding: 3rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--tt-color-gray-200);
}

.single-post-content {
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--tt-color-text);
	margin-bottom: 3rem;
}

.single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
	color: var(--tt-color-text);
	margin: 2.5rem 0 1.5rem 0;
	font-weight: 600;
}

.single-post-content h2 {
	font-size: 1.75rem;
	border-bottom: 2px solid var(--tt-color-main);
	padding-bottom: 0.5rem;
}

.single-post-content h3 {
	font-size: 1.5rem;
}

.single-post-content p {
	margin-bottom: 1.5rem;
}

.single-post-content ul,
.single-post-content ol {
	margin: 1.5rem 0;
	padding-left: 2rem;
}

.single-post-content li {
	margin-bottom: 0.75rem;
}

.single-post-content blockquote {
	border-left: 4px solid var(--tt-color-main);
	padding-left: 2rem;
	margin: 2.5rem 0;
	font-style: italic;
	color: var(--tt-color-gray-600);
	background: var(--tt-color-gray-50);
	padding: 1.5rem 2rem;
	border-radius: 0.5rem;
}

.single-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
	margin: 2rem 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.single-post-content a {
	color: var(--tt-color-main);
	text-decoration: none;
	transition: color 0.3s ease;
	font-weight: 500;
}

.single-post-content a:hover {
	color: var(--tt-color-main-dark);
	text-decoration: underline;
}

/* Post Tags */
.single-post-tags {
	margin: 3rem 0;
	padding-top: 2rem;
	border-top: 1px solid var(--tt-color-gray-200);
}

.single-post-tags h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--tt-color-text);
	margin: 0 0 1rem 0;
}

.tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag-link {
	background: var(--tt-color-gray-100);
	color: var(--tt-color-gray-700);
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	font-size: 0.875rem;
	text-decoration: none;
	transition: all 0.3s ease;
}

.tag-link:hover {
	background: var(--tt-color-main);
	color: var(--tt-color-bg);
	transform: translateY(-1px);
}

/* Post Navigation */
.single-post-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--tt-color-gray-200);
}

.nav-previous,
.nav-next {
	flex: 1;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--tt-color-main);
	text-decoration: none;
	font-weight: 500;
	padding: 1rem 1.5rem;
	border-radius: 0.75rem;
	background: var(--tt-color-gray-50);
	transition: all 0.3s ease;
	border: 1px solid var(--tt-color-gray-200);
}

.nav-link:hover {
	color: var(--tt-color-main-dark);
	background: var(--tt-color-gray-100);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-next {
	text-align: right;
}

.sidebar-widget {
	background: var(--tt-color-bg);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--tt-color-gray-200);
}

.widget-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--tt-color-text);
	margin: 0 0 1.5rem 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--tt-color-main);
}

/* Related Posts Widget */
.related-posts-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.related-post-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.75rem;
	border-radius: 0.5rem;
	transition: background-color 0.3s ease;
}

.related-post-item:hover {
	background: var(--tt-color-gray-50);
}

.related-post-image {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 0.5rem;
	overflow: hidden;
}

.related-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-post-placeholder {
	width: 100%;
	height: 100%;
	background: var(--tt-color-gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

.related-post-content {
	flex: 1;
	min-width: 0;
}

.related-post-title {
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0 0 0.25rem 0;
	line-height: 1.4;
}

.related-post-title a {
	color: var(--tt-color-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

.related-post-title a:hover {
	color: var(--tt-color-main);
}

.related-post-meta {
	font-size: 0.75rem;
	color: var(--tt-color-gray-500);
}

/* Model Tours Widget */
.model-tours-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.model-tour-item {
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--tt-color-bg);
	border: 1px solid var(--tt-color-gray-200);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.model-tour-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.model-tour-image {
	position: relative;
	width: 100%;
	height: 120px;
	overflow: hidden;
}

.model-tour-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.model-tour-item:hover .model-tour-image img {
	transform: scale(1.05);
}

.model-tour-placeholder {
	width: 100%;
	height: 100%;
	background: var(--tt-color-gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

.model-tour-region {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background: var(--tt-color-main);
	color: var(--tt-color-bg);
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.model-tour-content {
	padding: 1rem;
}

.model-tour-title {
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
	line-height: 1.4;
}

.model-tour-title a {
	color: var(--tt-color-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

.model-tour-title a:hover {
	color: var(--tt-color-main);
}

.model-tour-price {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tt-color-main);
}

/* Responsive Single Post */
@media (max-width: 1024px) {
	.single-post-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.single-post-sidebar {
		position: static;
		order: -1;
	}
}

@media (max-width: 768px) {
	.single-post-hero {
		padding: 3rem 0 1.5rem;
	}
	
	.single-post-title {
		font-size: 2rem;
	}
	
	.single-post-meta {
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.single-post-content-section {
		padding: 2rem 0;
	}
	
	.single-post-layout {
		gap: 1.5rem;
	}
	
	.single-post-article {
		padding: 1.5rem;
	}
	
	.single-post-content {
		font-size: 1rem;
	}
	
	.single-post-navigation {
		flex-direction: column;
		gap: 1rem;
	}
	
	.nav-previous,
	.nav-next {
		text-align: center;
	}
	
	.sidebar-widget {
		padding: 1rem;
		margin-bottom: 1.5rem;
	}
	
	.widget-title {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	
	.related-post-item {
		padding: 0.5rem;
	}
	
	.related-post-image {
		width: 50px;
		height: 50px;
	}
	
	.model-tour-image {
		height: 100px;
	}
	
	.model-tour-content {
		padding: 0.75rem;
	}
}

@media (max-width: 480px) {
	.single-post-hero {
		padding: 2rem 0 1rem;
	}
	
	.single-post-title {
		font-size: 1.75rem;
	}
	
	.single-post-article {
		padding: 1rem;
	}
	
	.single-post-content {
		font-size: 0.95rem;
	}
	
	.sidebar-widget {
		padding: 0.75rem;
	}
	
	.related-post-image {
		width: 45px;
		height: 45px;
	}
	
	.model-tour-image {
		height: 80px;
	}
}

/* Single Post Page Styles */
.single-post-page {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 100vh;
}

/* Hero Section */
.single-post-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 3rem 0 4rem;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

.single-post-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tt-color-main), var(--tt-color-sub));
}

.single-post-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Breadcrumb */
.single-post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--tt-color-gray-600);
}

.breadcrumb-link {
  color: var(--tt-color-gray-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: var(--tt-color-main);
}

.breadcrumb-separator {
  color: var(--tt-color-gray-400);
}

.breadcrumb-current {
  color: var(--tt-color-gray-800);
  font-weight: 500;
}

/* Meta Information */
.single-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
  align-items: center;
}

.single-post-category .category-badge {
  background: linear-gradient(135deg, var(--tt-color-main), var(--tt-color-sub));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 114, 95, 0.2);
}

.single-post-date,
.single-post-reading-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tt-color-gray-600);
  font-size: 0.875rem;
}

.single-post-date svg,
.single-post-reading-time svg {
  color: var(--tt-color-gray-400);
}

/* Title */
.single-post-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tt-color-gray-900);
  margin-bottom: 2rem;
  background: linear-gradient(135deg, var(--tt-color-gray-900), var(--tt-color-gray-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Featured Image */
.single-post-featured-image {
  margin-top: 2rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  aspect-ratio: 3/2;
}

.single-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content Section */
.single-post-content-section {
  padding: 4rem 0;
}

.single-post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start;
}

.single-post-main-content {
  padding: 0;
}

.single-post-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--tt-color-gray-700);
  margin-bottom: 3rem;
}

.single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
  color: var(--tt-color-gray-900);
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.single-post-content h2 {
  font-size: 1.75rem;
  border-bottom: 2px solid var(--tt-color-gray-200);
  padding-bottom: 0.5rem;
}

.single-post-content p {
  margin-bottom: 1.5rem;
}

.single-post-content blockquote {
  border-left: 4px solid var(--tt-color-main);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--tt-color-gray-600);
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

/* Tags */
.single-post-tags {
  margin-bottom: 3rem;
  padding: 0;
}

.tags-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.tags-header svg {
  color: var(--tt-color-main);
}

.tags-header h4 {
  margin: 0;
  color: var(--tt-color-gray-800);
  font-size: 1.125rem;
  font-weight: 600;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tag-link {
  background: white;
  color: var(--tt-color-gray-700);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  text-decoration: none;
  font-size: 0.875rem;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.tag-link:hover {
  background: var(--tt-color-main);
  color: white;
  border-color: var(--tt-color-main);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 114, 95, 0.3);
}

/* Navigation */
.single-post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-link:hover {
  transform: translateY(-2px);
}

.nav-link-prev {
  text-align: left;
}

.nav-link-next {
  text-align: right;
}

.nav-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--tt-color-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-color-gray-600);
}

.nav-link:hover .nav-icon {
  background: var(--tt-color-main);
  color: white;
}

.nav-content {
  flex: 1;
}

.nav-label {
  display: block;
  font-size: 0.875rem;
  color: var(--tt-color-gray-500);
  margin-bottom: 0.25rem;
}

.nav-title {
  display: block;
  font-weight: 600;
  color: var(--tt-color-gray-800);
  line-height: 1.4;
}

/* Sidebar */
.single-post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidebar-widget {
  padding: 0;
}

.widget-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f1f5f9;
}

.widget-header svg {
  color: var(--tt-color-main);
}

.widget-title {
  margin: 0;
  color: var(--tt-color-gray-800);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Related Posts */
.related-posts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.related-post-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.related-post-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.related-post-image {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.related-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-post-placeholder {
  width: 100%;
  height: 100%;
  background: var(--tt-color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.related-post-content {
  flex: 1;
}

.related-post-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.related-post-title a {
  color: var(--tt-color-gray-800);
  text-decoration: none;
}

.related-post-title a:hover {
  color: var(--tt-color-main);
}

.related-post-meta {
  font-size: 0.75rem;
  color: var(--tt-color-gray-500);
}

/* Model Tours */
.model-tours-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.model-tour-item {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.model-tour-item:hover {
  border-color: var(--tt-color-main);
  box-shadow: 0 8px 25px rgba(0, 114, 95, 0.15);
  transform: translateY(-2px);
}

.model-tour-image {
  position: relative;
  height: 8rem;
  overflow: hidden;
}

.model-tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-tour-placeholder {
  width: 100%;
  height: 100%;
  background: var(--tt-color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.model-tour-region {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.model-tour-content {
  padding: 1rem;
}

.model-tour-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.model-tour-title a {
  color: var(--tt-color-gray-800);
  text-decoration: none;
}

.model-tour-title a:hover {
  color: var(--tt-color-main);
}

.model-tour-price {
  font-size: 0.875rem;
  font-weight: 600;
}

.model-tour-price .price {
  color: var(--tt-color-main);
}

/* Responsive adjustments for single post */
@media (max-width: 768px) {
  .single-post-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .single-post-sidebar {
    order: 1;
  }
  
  .single-post-title {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  
  .single-post-content {
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .single-post-content h2 {
    font-size: 1.5rem;
  }
  
  .single-post-content h3 {
    font-size: 1.25rem;
  }
  
  .single-post-navigation {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .nav-link {
    padding: 0.75rem;
  }
  
  .nav-link-next {
    text-align: left;
  }
  
  .single-post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .single-post-date,
  .single-post-reading-time {
    font-size: 0.8rem;
  }
  
  .breadcrumb-link,
  .breadcrumb-current {
    font-size: 0.8rem;
  }
  
  .single-post-breadcrumb {
    margin-bottom: 1.5rem;
  }
  
  .single-post-hero {
    padding: 2rem 0 3rem;
  }
  
  .single-post-content-section {
    padding: 2rem 0;
  }
  
  .tags-header h4 {
    font-size: 1rem;
  }
  
  .tag-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  
  .widget-title {
    font-size: 1rem;
  }
  
  .related-post-title {
    font-size: 0.8rem;
  }
  
  .model-tour-title {
    font-size: 0.8rem;
  }
  
  .nav-title {
    font-size: 0.9rem;
  }
  
  .nav-label {
    font-size: 0.8rem;
  }
  
  /* Mobile: Simplify related posts and tours display */
  .related-post-item {
    flex-direction: column;
    text-align: center;
    padding: 0.75rem;
  }
  
  .related-post-image {
    width: 100%;
    height: 6rem;
    margin-bottom: 0.5rem;
  }
  
  .model-tour-item {
    margin-bottom: 1rem;
  }
  
  .model-tour-image {
    height: 6rem;
  }
  
  .model-tour-content {
    padding: 0.75rem;
  }
  
  /* Mobile: Reduce widget spacing */
  .single-post-sidebar {
    gap: 1.5rem;
  }
  
  .widget-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }
  
  /* Mobile: Hide breadcrumb navigation */
  .single-post-breadcrumb {
    display: none;
  }
}