/* ---------- Common Variables ---------- */
:root {
  --shine-color: rgba(255, 255, 255, 0.3);
  --dark-shine-color: rgba(255, 255, 255, 0.3);
  --saturate-level: 1.5;
  --dark-saturate-level: 1.5;
  --shine-skew: -25deg;
  --shine-duration: 0.75s;
  --zoom-scale: 1.05;
  --color-text-h2: #6BAF75;
  --color-service-h2: #4A4A4A;
  --color-service-bg: #F5F5F7;
  --color-service-bg-dark: #2D2D2D;
  --color-border: #4A4A4A;
  --color-text: #1D1D1F;
  --color-secondary-text: #555;
  --dark-color-text: #E5E5E7;
  --dark-color-secondary-text: #A3A092;
}

/* ---------- Hero Section ---------- */
/* Hero Section */
.hero {
  position: relative; /* テキストを絶対配置するための基準 */
  height: 40vh; /* 高さを固定 */
  overflow: hidden; /* はみ出しを隠す */
}

/* Slider */
.slider {
  height: 100%; /* 親要素の高さに合わせる */
}

.slider div {
  height: 100%; /* スライドの高さを親に合わせる */
}

.slider img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1980 / 655; /* アスペクト比を固定 */
  object-fit: cover; /* 画像をカバーするように表示 */
}

 /* Slick Dots Adjustments */
 .hero .slick-dots {
  bottom: 5px; /* Reposition dots within the hero area */
  z-index: 1;
}

.hero .slick-dots li button:before {
  font-size: 8px;
  color: #ffffff; /* White dots for contrast */
  opacity: 1;
}

.hero .slick-dots li.slick-active button:before {
  color: #6BAF75; /* アクティブなドット：赤（見やすい色に変更） */
  opacity: 1;
}

/* Hero Text Overlay */
.hero-text {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%); /* 上下中央揃え */
  color: #fff;
  background: rgba(0, 0, 0, 0.3); /* 読みやすさのための半透明背景 */
  max-width: 90%;
  padding: 0.5em 1em 0.8em 1em;
  box-sizing: border-box; /* パディングを幅に含める */
  z-index: 10; /* スライダーより手前に表示 */
}

/* Hero Text 内要素のスタイル */
.hero-text h1 {
  font-size: 1.8rem;
  margin: 0; /* 余白をリセット */
  line-height: 1.2; /* 行間を調整して高さを抑える */
}

.hero-text p {
  font-size: 1rem;
  margin: 0.5em 0 1em 0;
  line-height: 1.3; /* 行間を調整 */
}

/* ---------- Main Content ---------- */
.yokohama-main {
  padding: 15px;
  background-color: #ffffff;
}

/* ---------- Section Wrapper ---------- */
.section-wrapper {
  padding: 20px 0 40px 0;
  margin-bottom: 40px;
}

.section-wrapper h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-text-h2);
  margin-bottom: 40px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.section-wrapper h2::after {
  content: '';
  display: block;
  width: 50%;
  height: 3px;
  background: var(--color-text-h2);
  margin: 10px auto 0;
  border-radius: 2px;
}

/* ---------- Product Grid ---------- */
/* Layout remains unchanged as per your instructions */
.product-grid {
  display: grid;
  grid-gap: 70px;
  grid-template-columns: 1fr;
}

/* ---------- Product Block (Updated Visual Treatments) ---------- */
.product-block {
  position: relative;
  transition: transform 0.3s ease;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px; /* size remains unchanged */
}

.product-block:hover {
  transform: translateY(-5px);
}

.product-block .card-img {
  position: relative;
  overflow: hidden;
}

.product-block img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.product-block:hover img {
  filter: saturate(var(--saturate-level));
  transform: scale(var(--zoom-scale));
}

.card-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--shine-color) 100%);
  transform: skewX(var(--shine-skew));
  transition: all 0.3s ease;
}

.product-block:hover .card-img::before {
  animation: shine var(--shine-duration) forwards;
}

@keyframes shine {
  100% { left: 125%; }
}

.product-block h3 {
  font-weight: bold;
  margin-bottom: 0.5em;
  padding: 0.5em 0.5em 0;
  font-size: 1.3rem;
  color: #222;
  text-align: center;
}

.product-block p {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 1em;
  padding: 0 0.5em;
  /* text-align: center; */
  flex-grow: 1;
}

.product-block .cta-container {
  margin-top: auto;
}

/* ボタンの共通スタイル */
.cta-btn {
  display: inline-block; /* 上下のマージンを効かせる */
  width: auto; /* 幅をコンテンツに合わせる */
  height: auto; /* 高さをコンテンツに合わせる */
  background: #0078d7; /* デフォルトの背景色 */
  color: #fff; /* 文字色 */
  text-decoration: none; /* リンクの下線を削除 */
  border-radius: 30px; /* 角を丸く */
  transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out; /* ホバー時のアニメーション */
  text-align: center; /* テキストを中央揃え */
}

/* クリック可能な状態の場合のみhover効果を適用 */
.cta-btn:not(.disabled):hover {
  background: #005bb5;
}

/* .hero 用のボタンスタイル */
.cta-btn.hero-btn {
  padding: 8px 16px;
  font-weight: bold;
}

/* .hero 以外のボタンスタイル */
.cta-btn:not(.hero-btn) {
  padding: 10px 20px;
  margin: 10px 0 15px;
  margin-top: auto;
  align-self: center;
}

.cta-btn:focus {
  outline: 2px solid #0078d7;
  outline-offset: 2px;
}

/* disabled状態のボタン */
.cta-btn.disabled{
  background: #ccc;
  color: #333;
  cursor: not-allowed;
  pointer-events: none;
  font-weight: 100;
  border-radius: 30px;
  /* transitionはそのままでも問題ありません */
}

.product-block.coming-soon {
  background-color: #fff;
  border: 2px dashed #6BAF75;
}

.product-block.coming-soon h3 {
  font-size: 1.5rem;
  font-weight: bold;
}

.product-block.coming-soon p {
  font-style: italic;
}

/* ---------- Experience Description ---------- */
.experience-description {
  background-color: #fafafa;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 15px 20px;
  margin: 50px 15px 30px 15px;
  text-align: left;
}

.experience-description h2 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #6BAF75;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  font-weight: 700;
}

.experience-description p {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.5;
}

.experience-description .cta-rnd-btn {
  display: inline-block;
  padding: 10px 20px; /* size remains unchanged */
  background: #fff;
  color: #0078D7;
  border: 1px solid #0078D7;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s ease-in-out;
}

.experience-description .cta-rnd-btn:hover {
  background: #0078D7;
  color: #fff;
}

.cta-wrapper {
  text-align: center;
}

/* ---------- Responsive Adjustments ---------- */
@media (min-width: 768px) {
  .hero {
    height: 50vh;
  }
  .hero-text h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .hero-text p {
    font-size: 1.1rem;
  }
  .section-wrapper h2 {
    font-size: 2rem;
  }

  /* .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
    justify-content: center;
    gap: 100px 70px;
  } */

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 最小幅を300pxに減らし、最大は1frに */
    gap: 30px; /* グリッド間の隙間を40pxから20pxに減らす */
    padding: 0 10px; /* 左右の余白を追加して調整 */
    max-width: 1200px; /* コンテナの最大幅を制限 */
    margin: 0 auto; /* 中央揃え */
  }

  .product-block {
    min-width: 300px; /* カードが300px以下に縮まないように固定 */
    border-radius: 0 0 8px 8px;
  }

  .product-block img {
    height: 250px;
    border-radius: 8px 8px 0 0;
  }

  .product-block .card-img {
    border-radius: 8px 8px 0 0;
  }

  .product-block.coming-soon {
    border-radius: 8px 8px;
  }

  .experience-description {
    max-width: 60%;
    margin: 50px auto 20px;
    padding: 20px 30px;
  }
  .experience-description h2 {
    font-size: 1.5rem;
  }
  .experience-description p {
    font-size: 1rem;
  }
  .cta-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  /* Dark mode for product block – matching reference’s teaser-card styling */
  html.dark-mode .product-block {
    border-radius: 8px 8px;
  }
}

/* ---------- Dark Mode Overrides (Updated to match reference) ---------- */
html.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

html.dark-mode .slick-dots li button:before {
  color: #555; /* ダークモード用の通常のドットカラー */
  opacity: 1;
}

html.dark-mode .slick-dots li.slick-active button:before {
  color: #ffffff; /* ダークモード用のアクティブドットカラー */
}

html.dark-mode .yokohama-main {
  background-color: #121212;
  color: #e0e0e0;
}

html.dark-mode .section-wrapper {
  background: #1e1e1e;
  box-shadow: none;
}

html.dark-mode .section-wrapper h2 {
  color: var(--color-text-h2);
}

html.dark-mode .section-wrapper h2::after {
  background: var(--color-text-h2);
}

html.dark-mode .product-block {
  background: #232323;
  box-shadow: none;
  border: 1px solid #444;
}

html.dark-mode .product-block.coming-soon {
  border: 2px dashed #555;
}

html.dark-mode .product-block h3 {
  color: #E5E5E7;
}

html.dark-mode .product-block p {
  color: var(--dark-color-secondary-text); /* 例: #A3A092 */
}

html.dark-mode .product-block img {
  filter: brightness(0.8) contrast(1.1);
}

html.dark-mode .product-block:hover img {
  filter: saturate(var(--dark-saturate-level));
  transform: scale(var(--zoom-scale));
}

html.dark-mode .card-img::before {
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--dark-shine-color) 100%);
}

/* Dark mode for experience description */
html.dark-mode .experience-description {
  background-color: #2D2D2D;
  border-color: #555;
}

html.dark-mode .experience-description p {
  color: #E5E5E7;
}

/* Optional: Dark mode adjustments for coming soon text if needed */
html.dark-mode .coming-soon-text {
  color: #A3A092;
}

/* Learn More ボタン */
html.dark-mode .cta-rnd-btn {
  background: #0078D7;
  color: #fff;
  /* border: solid 1px #0078D7; */
}

html.dark-mode .cta-rnd-btn:hover {
  background: #fff;
  color: #0078D7;
}