/* メインスタイル */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* Mobile Menu Fix - Placed at top to ensure parsing */
#mobile-nav {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background-color: white !important;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out, visibility 0.3s !important;
  visibility: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
}

#mobile-nav.active {
  transform: translateX(0) !important;
  visibility: visible !important;
}

/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

:root {
  --primary-color: #233A5C;
  --primary-light: #3A5B8C;
  --secondary-color: #A68B5B;
  --bg-accent: #F8F9FB;
  --text-dark: #2C3241;
}

@layer base {
  html {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-dark);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Noto Serif JP', 'Playfair Display', serif;
    font-weight: 600;
  }

  body {
    @apply leading-relaxed;
  }

  /* パララックス効果 */
  .parallax-container {
    position: relative;
    overflow: hidden;
    height: 60vh;
  }

  .parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center;
    transform: translateZ(0);
    will-change: transform;
  }

  .parallax-image {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
  }

  .service-parallax {
    height: 60vh;
  }

  @media (min-width: 768px) {
    .service-parallax {
      height: 70vh;
    }
  }

  .service-parallax-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .service-parallax-img {
    width: 100%;
    height: 60vh;
    object-fit: contain;
    object-position: center;
    transform: translateZ(0);
    will-change: transform;
  }

  @media (min-width: 768px) {
    .service-parallax-img {
      height: 70vh;
    }
  }

  /* 高級感のあるデザイン要素 */

  /* サービスタグのスタイル */
  .service-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: var(--secondary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* サービスセクションの改善 */
  .service-section {
    padding: 3rem 0;
  }

  .service-section:nth-child(even) {
    background-color: var(--bg-accent);
  }

  .service-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
  }

  .service-description {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    line-height: 1.7;
  }

  .service-features {
    list-style: none;
    padding: 0;
  }

  .service-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: #6b7280;
  }

  .service-features li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
  }

  .luxury-bg {
    @apply bg-gradient-to-r from-gray-50 via-white to-gray-50;
  }

  .elegant-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }

  .gold-border {
    @apply border-[#A68B5B];
  }
}

@layer components {
  .container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (min-width: 640px) {
    .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }

  .btn {
    @apply inline-block px-6 py-3 rounded-sm text-center font-medium transition-all duration-300 uppercase tracking-wider text-sm;
  }

  .btn-primary {
    @apply btn bg-[#233A5C] text-white hover:bg-[#1A2A45] shadow-md hover:shadow-lg;
  }

  .btn-outline {
    @apply btn border border-[#233A5C] text-[#233A5C] hover:bg-[#233A5C] hover:text-white shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply btn bg-[#A68B5B] text-white hover:bg-[#8A7349] shadow-md hover:shadow-lg;
  }

  .section {
    @apply py-16 md:py-20 lg:py-24;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold mb-10 md:mb-12 text-center relative;
  }

  .section-title::after {
    content: '';
    @apply block absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-1 bg-[#A68B5B] mt-4;
  }

  .card {
    @apply bg-white rounded-sm shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg border-b-4 border-transparent hover:border-[#A68B5B];
  }
}

/* ナビゲーション */
.nav-link {
  @apply block py-2 px-3 text-gray-700 hover:text-[#233A5C] transition-colors font-medium tracking-wide;
}

.nav-link.active {
  @apply text-[#233A5C] font-semibold border-b-2 border-[#A68B5B];
}

/* ヘッダー - スクロールしても固定表示 */
header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 50;
  background: rgba(255, 255, 255, 0.8);
  /* 背景を半透明に変更 */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /* Tailwind default ease */
  transition-duration: 300ms;
  /* backdrop-filter: blur(5px); */
  /* すりガラス効果を追加 */
  /* -webkit-backdrop-filter: blur(5px); */
  /* Safari用 */
}

/* モバイルナビゲーション */
#mobile-nav {
  position: fixed;
  inset: 0;
  background-color: white;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out, visibility 0.3s;
  visibility: hidden;
  overflow-y: auto;
  /* メニュー内のスクロールを許可 */
  -webkit-overflow-scrolling: touch;
  /* iOSでのスクロールを滑らかに */
}

#mobile-nav.active {
  transform: translateX(0);
  visibility: visible;
}


/* お問い合わせフォーム */
.form-group {
  @apply mb-6;
}

.form-label {
  @apply block mb-2 font-medium text-gray-700;
}

.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-[#233A5C] focus:border-transparent transition-all duration-200;
}

.form-input.error {
  @apply border-red-500 focus:ring-red-500;
}

.error-message {
  @apply mt-1 text-sm text-red-500;
}

/* パンくずリスト */
.breadcrumb {
  @apply flex items-center py-3 text-sm;
}

.breadcrumb-item {
  @apply text-gray-500;
}

.breadcrumb-item.active {
  @apply text-gray-900;
}

.breadcrumb-separator {
  @apply mx-2 text-gray-400;
}

/* 高級感を出すための追加スタイル */
.highlight-text {
  @apply text-[#A68B5B] italic;
}

.luxury-divider {
  @apply h-px w-full bg-gradient-to-r from-transparent via-[#A68B5B] to-transparent my-12 opacity-60;
}

.testimonial-card {
  @apply bg-white p-6 rounded-sm shadow-md border-l-4 border-[#A68B5B] italic;
}

.fancy-number {
  @apply inline-flex items-center justify-center w-12 h-12 rounded-full bg-[#233A5C] text-white text-xl font-bold;
}

.awards-badge {
  @apply inline-flex items-center bg-[#F0EBE0] text-[#A68B5B] px-3 py-1 rounded-sm text-sm;
}

.gold-accent {
  @apply border-[#A68B5B];
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ヒーローセクション パララックススタイル */
.hero-parallax-bg {
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 0.5s ease-out;
}

.hero-parallax-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1;
}

@media (max-width: 768px) {
  .hero-parallax-bg::after {
    opacity: 0.3;
  }

  .hero-parallax-bg {
    background-attachment: scroll;
  }
}