/* 追加: アスペクト比に基づく微調整 */
@media (min-width: 768px) and (max-height: 600px) {
  .header__main-copy {
    line-height: 1.1; /* 行間をさらに狭める */
    margin-bottom: min(var(--spacing-small), 1vh); /* 余白を縮小 */
    font-size: min(8vw, 10vh); /* サイズをさらに調整 */
    max-width: none; /* 幅の制限を解除 */
    white-space: nowrap; /* 自動改行なし */
  }

  .header__logo-container {
    margin-top: 0; /* ロゴ上の余白をなくす */
  }
  
  .header__logo {
    width: min(20vw, 20vh); /* ロゴをさらに小さく */
  }
  
  .scroll-indicator {
    bottom: min(0.5rem, 1vh); /* インジケーターの位置をさらに上げる */
  }
}

/* 超低い高さのディスプレイへの追加対応 */
@media (min-width: 768px) and (max-height: 450px) {
  .header__main-copy {
    font-size: min(6vw, 8vh); /* さらに小さく */
    line-height: 1;
    max-width: none; /* 幅の制限を解除 */
    white-space: nowrap; /* 自動改行なし */
  }
  
  .header__logo {
    width: min(15vw, 15vh); /* ロゴをさらに小さく */
  }
  
  .scroll-indicator {
    bottom: 0.5rem; /* 固定値で調整 */
    padding: 3px 8px; /* パディングも小さく */
    font-size: 0.8rem;
  }
}/* ⑤カルーセルをセンター合わせ（修正版） */
.testimonials__slider-inner,
.product__slider-inner {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--spacing-small) 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  position: relative;
  width: 100%;
  margin: 0 auto;
}/* NEWSセクション */
.news__content {
  display: flex;
  justify-content: center;
  padding: var(--spacing-medium);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
}

.news__twitter-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Twitterのウィジェットフレームをゴールド系統色にカスタマイズ */
.twitter-timeline {
  border: 2px solid var(--color-secondary) !important;
  border-radius: var(--border-radius) !important;
  padding: var(--spacing-small) !important;
}

/* Twitter埋め込みスタイルオーバーライド */
iframe.twitter-timeline {
  border-color: var(--color-secondary) !important;
}

/* オーバーレイ背景を削除 */

/* layout.css */
/* レイアウト関連のスタイル */

/* コンテナ */
.container {
  width: var(--container-width-mobile);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* モバイル以上（576px以上）での調整 */
@media (min-width: var(--breakpoint-sm)) {
  .container {
    width: var(--container-width-tablet);
  }
}

/* タブレット以上（768px以上）での調整 */
@media (min-width: var(--breakpoint-md)) {
  .container {
    width: var(--container-width-desktop);
  }
}

/* デスクトップ以上（992px以上）での調整 */
@media (min-width: var(--breakpoint-lg)) {
  .container {
    width: var(--container-width-large);
  }
}

/* セクション共通スタイル */
.section {
  padding: var(--section-spacing-mobile) 0;
  position: relative;
  margin: 0; /* マージンを0に変更 */
  /* 背景色と角丸を削除 */
  /* background-color: rgba(255, 255, 255, 0.95); */
  /* border-radius: var(--border-radius); */
  
  /* グレーの破線区切りを追加 */
  border-bottom: 2px dashed var(--color-light-gray);
}

/* 最後のセクションは区切り線を表示しない */
.section:last-of-type {
  border-bottom: none;
}

@media (min-width: var(--breakpoint-lg)) {
  .section {
    padding: var(--section-spacing-desktop) 0;
  }
}

/* ①セクションタイトルの背景削除 */
.section-title {
  text-align: center;
  font-size: var(--font-size-xxlarge);
  margin-bottom: var(--spacing-medium);
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
}

/* ①セクションサブタイトルの背景削除 */
.section-subtitle {
  text-align: center;
  font-size: var(--font-size-medium);
  margin-bottom: var(--spacing-xlarge);
  color: var(--color-text-light);
  margin-left: auto;
  margin-right: auto;
}

/* ④ヘッダーナビゲーション - 画面幅全域対応 */
.header-nav {
  background-color: var(--color-white);
  box-shadow: var(--shadow-small);
  position: relative; /* stickyから通常のスクロールに変更 */
  z-index: 100; /* 他の要素より前面に表示 */
  padding: var(--spacing-xsmall) 0; /* パディングを小さくして全体の高さを調整 */
  width: 100%;
}

.header-nav .container {
  max-width: 100%; /* コンテナの最大幅を解除 */
  width: 95%; /* 画面幅に対して少し余白を持たせる */
}

.header-nav__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-nav__logo {
  max-width: 180px; /* 横長ロゴに合わせて幅を増やす */
  height: auto;
  display: flex;
  align-items: center; /* 垂直方向に中央揃え */
}

.header-nav__logo-img {
  width: 100%;
  height: auto;
  max-height: 40px; /* 高さの最大値を設定して余白を削減 */
  object-fit: contain; /* アスペクト比を保持 */
}

/* 右側の要素（ボタンとメニュー）をまとめる */
.header-nav__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
}

.header-nav__button {
  margin-bottom: var(--spacing-xsmall);
}

/* ②ログイン・会員登録ボタン */
.header-nav__login-link {
  display: inline-block;
  background-color: var(--color-secondary);
  color: var(--color-white) !important;
  padding: calc(var(--spacing-small) * 0.6) calc(var(--spacing-medium) * 0.6); /* パディングを小さく */
  border-radius: 50px;
  font-weight: 500;
  text-decoration: none;
  font-size: calc(var(--font-size-medium) * 0.7); /* フォントサイズを小さく */
  transition: all var(--transition-fast);
  text-align: center;
  transform: scale(0.8); /* サイズを80%に縮小 */
  transform-origin: right center; /* 右寄せ状態を維持 */
}

.header-nav__login-link:hover {
  transform: scale(0.8) translateY(-2px); /* スケールを維持しつつ浮き上がる効果 */
  box-shadow: var(--shadow-small);
  background-color: #BFA27D; /* Darken the secondary color */
}

.header-nav__menu {
  display: flex;
  gap: var(--spacing-medium);
}

.header-nav__link {
  color: var(--color-text);
  font-weight: 500;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.header-nav__link:hover {
  color: var(--color-secondary);
}

/* ⑤ハンバーガーメニューの修正 */
/* ハンバーガーメニューデフォルトでは非表示 */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 20px;
  position: relative;
  z-index: 110;
}

.hamburger-menu__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  position: absolute;
  left: 0;
  transition: var(--transition-medium);
}

.hamburger-menu__bar:nth-child(1) {
  top: 0;
}
.hamburger-menu__bar:nth-child(2) {
  top: 9px;
}
.hamburger-menu__bar:nth-child(3) {
  top: 18px;
}

.hamburger-menu.is-active .hamburger-menu__bar:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}
.hamburger-menu.is-active .hamburger-menu__bar:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.is-active .hamburger-menu__bar:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}

/* モバイル向けの調整を明確に */
@media screen and (max-width: 767px) {
  .hamburger-menu {
    display: block; /* モバイルではハンバーガー表示 */
  }
  
  .header-nav__right {
    position: fixed;
    top: 0;
    right: -80%; /* 初期状態は画面外に配置 */
    width: 80%;
    height: 100vh;
    background-color: var(--color-white);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
    box-shadow: var(--shadow-large);
    z-index: 100;
    transition: right 0.3s ease; /* 右からスライドするアニメーション */
  }
  
  .header-nav__right.is-active {
    right: 0; /* アクティブ時に画面内に表示 */
  }
  
  .header-nav__button {
    margin-bottom: var(--spacing-medium);
    width: 100%;
    text-align: center;
  }
  
  .header-nav__login-link {
    /* ボタンスタイルをリセットしてテキストリンク化 */
    background-color: transparent;
    color: var(--color-text) !important;
    padding: var(--spacing-small) 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    width: 100%;
    text-align: center;
    transform: none; /* モバイルではスケール変換をリセット */
  }
  
  .header-nav__login-link:hover {
    transform: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-secondary) !important;
  }
  
  .header-nav__menu {
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--spacing-medium);
  }
  
  .header-nav__link {
    display: block;
    padding: var(--spacing-small) 0;
    width: 100%;
    text-align: center;
  }
}

/* 新しいヘッダースタイル - 根本的に改造 */
.header {
  padding: 0;
  text-align: center;
  border-bottom: 2px dashed var(--color-light-gray);
  margin-top: 0;
  overflow: hidden; /* はみ出る部分を隠す */
  position: relative;
  /* 下部のパディングを削除し、コンテナ内で調整 */
}

/* ヘッダーレイアウトコンテナ */
.header__layout-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: url('../img/FirstViewImage.png');
  background-size: cover; /* 短辺に合わせて拡大表示 */
  background-position: center center;
  background-repeat: no-repeat;
}

/* SP表示用のレイアウト */
@media (max-width: 767px) {
  .header__layout-container {
    flex-direction: column;
    position: relative;
    height: auto;
    min-height: 100vh; /* 最低でも画面の高さ確保 */
  }
  
  /* SP用の動画コンテナスタイル */
  .header__video-container {
    width: 100%;
    height: 100vh; /* 画面の高さいっぱいに */
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
  }
  
  /* SP用の動画スタイル */
  .sp-video-container {
    width: 100%;
    height: 100vh; /* 画面の高さいっぱいに */
    overflow: hidden;
    position: relative;
  }
  
  .sp-video {
    height: 100vh; /* 高さを画面いっぱいに */
    width: auto; /* 幅は自動調整 */
    min-width: 100%; /* 最低でも画面幅いっぱいに */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央配置 */
    display: block;
    object-fit: cover; /* 画面いっぱいに表示 */
  }
  
  /* SP用コピーエリア */
@media (max-width: 767px) {
  .header__copy-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 下部揃え */
    align-items: center; /* 中央揃えに変更 */
    padding: var(--spacing-large);
    padding-bottom: calc(var(--spacing-xlarge) + 60px); /* スクロールインジケーター用に余白を増やす */
    z-index: 10;
  }
  
  .header__main-copy {
    font-size: 2rem;
    text-align: left; /* テキスト自体は左寄せのまま */
    margin-bottom: var(--spacing-small);
    color: #333;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    max-width: none; /* 幅の制限を解除 */
    white-space: nowrap; /* 自動改行なし */
  }
  
  .header__logo-container {
    text-align: center; /* ロゴのみ中央揃え */
    width: 100%;
  }
  
  .header__logo {
    max-width: 180px;
    margin: 0 auto; /* ロゴのみ中央揃え */
  }
}
}

/* PC表示用のレイアウト */
@media (min-width: 768px) {
  .header__layout-container {
    flex-direction: row;
    position: relative;
    height: calc(100vh - 60px); /* ヘッダーナビの高さ(約60px)を引く */
    width: 100%;
    overflow: hidden;
  }
  
  /* PCのグラデーションオーバーレイ */
  .header__layout-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-gradient-pc);
    z-index: 12; /* 動画（z-index: 10）の上、コピー（z-index: 15）の下に配置 */
    pointer-events: none;
  }
  
  /* PC用のコピーコンテナスタイル - 大きく表示して動画にオーバーレイするように変更 */
  .header__copy-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 95%; /* 幅をさらに拡大 */
    height: 80%; /* 高さを制限して下部にスペースを確保 */
    padding: min(var(--spacing-medium), 3vh); /* 画面高さに応じてパディングを調整 */
    padding-top: min(3vh, 20px); /* 上部のスペースを画面高さに合わせて調整 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    z-index: 15; /* 動画の上に表示されるように調整 */
  }
  
  /* PC用の動画コンテナスタイル */
  .header__video-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* 幅を100%に */
    height: 100%;
    display: flex;
    justify-content: flex-end; /* 右端に配置（元に戻す） */
    align-items: center;
    overflow: hidden;
    z-index: 10;
  }
  
  /* 動画のアスペクト比コンテナ調整 - 1:1対応 */
  .aspect-ratio-1-1 {
    position: relative;
    width: calc(100vh - 60px); /* ヘッダーナビの高さを引いた正方形 */
    height: calc(100vh - 60px); /* ヘッダーナビの高さを引いた正方形 */
    padding-top: 0; /* 既定のpadding-topをリセット */
    aspect-ratio: 1/1; /* アスペクト比を1:1に変更 */
    margin-right: 0; /* 右端に配置 */
  }
  
  /* PC版の動画自体のスタイル */
  .header-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* カバーに変更して全体表示 */
    max-width: none; /* 幅の制限を解除 */
  }
}

/* 動画スタイル */
.header-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* メインキャッチフレーズスタイル */
.header__main-copy {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: var(--spacing-medium);
  line-height: 1.2;
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* PC表示用の調整 */
@media (min-width: 768px) {
  .header__main-copy {
    font-size: min(10vw, 14vh); /* 画面の幅と高さの小さい方に合わせてサイズ調整 */
    font-weight: 900; /* 最大の太さに */
    line-height: 1.2; /* 行間を広げて読みやすく */
    letter-spacing: -0.03em; /* 文字間をさらに詰める */
    text-transform: uppercase; /* 大文字表示（必要に応じて） */
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* コントラスト調整 */
    margin-bottom: var(--spacing-small); /* 下マージンを減らす */
    color: #333; /* 背景が白くなるので文字色を濃いグレーに変更 */
  }
  
  /* 画面サイズに応じた調整 */
  @media (min-width: 1200px) {
    .header__main-copy {
      font-size: min(120px, 14vh); /* 大画面では最大サイズを制限しつつ、高さにも対応 */
    }
  }
}

/* ロゴコンテナスタイル */
.header__logo-container {
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
}

.header__logo {
  max-width: 220px;
  height: auto;
}

@media (min-width: 768px) {
  .header__logo-container {
    margin-top: var(--spacing-small);
    display: flex;
    align-items: center;
    align-self: flex-start; /* コピーテキストのアラインに合わせる */
  }
  
  .header__logo {
    max-width: unset; /* 固定幅の制限を解除 */
    width: min(25vw, 35vh); /* 画面の幅と高さに合わせて調整 */
    height: auto; /* アスペクト比を維持 */
    opacity: 0.95; /* 高い透明度で視認性確保 */
  }
}

/* PC版用テキストカラー調整 - 削除してすべて白に統一 */
/* テキストシャドウは維持して視認性を確保 */

/* SP表示用のコピーサイズ調整 - 削除（上記に統合） */

/* CTA部分（削除済み、スタイルのみ残す） */
.header__cta {
  margin-top: var(--spacing-medium);
  z-index: 15;
}

/* CTAボタンのSP/PC切替 */
@media (max-width: 767px) {
  .header__cta {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .header__cta {
    text-align: left;
  }
}

/* スクロールインジケーター */
.scroll-indicator {
  position: absolute;
  bottom: min(1.5rem, 3vh); /* 位置を上に調整 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333; /* 背景に合わせて色を変更 */
  font-size: min(0.9rem, 2vh); /* 画面高さに応じてサイズ調整 */
  letter-spacing: 0.15em;
  z-index: 20;
  animation: fadeInUp 3s ease-in-out infinite; /* アニメーション時間を延長 */
  cursor: pointer; /* クリック可能なことを示す */
}

.scroll-indicator__text {
  margin-bottom: 0.2rem; /* 隙間を減らす */
  font-weight: 500;
  text-transform: uppercase;
}

.scroll-indicator__arrow {
  width: 20px;
  height: 16px; /* 高さを少し減らす */
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-indicator__arrow span {
  width: 8px;
  height: 8px;
  border-right: 2px solid #333; /* 背景に合わせて色を変更 */
  border-bottom: 2px solid #333; /* 背景に合わせて色を変更 */
  transform: rotate(45deg);
  display: block;
}

@keyframes fadeInUp {
  0% {
    opacity: 0.3; /* 完全に消えないように最低限の透明度を維持 */
    transform: translate(-50%, 5px);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0.3;
    transform: translate(-50%, -5px); /* 動きを小さくする */
  }
}

/* キャンペーンバナー - 改修版 */
.campaign-banner-container {
  margin: var(--spacing-large) auto var(--spacing-medium);
  width: auto;
  max-width: 300px; /* ボタン幅に合わせて調整 */
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-medium);
  text-align: center; /* 中央揃え */
}

.campaign-banner-container:hover {
  transform: translateY(-5px);
}

.campaign-banner__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
}

/* 会員登録ボタンコンテナ - キャンペーンバナー下 */
.header-signup-container {
  text-align: center;
  margin: 0 auto var(--spacing-large);
  width: 100%;
  max-width: 300px; /* キャンペーンバナーと同じ幅に調整 */
}

/* 特徴セクション - SP用スタイル */
.features__slider {
  position: relative;
  margin: 0 -var(--container-padding);
  padding: 0 var(--container-padding);
  overflow: hidden;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--border-radius);
  padding-bottom: var(--spacing-large);
}

/* 特徴カードを完全に透明に */
.feature-card {
  background-color: transparent !important;
}

/* 追加ポイント画像 */
.feature-point-image {
  text-align: center;
  padding: 0 var(--spacing-medium) var(--spacing-medium);
  max-width: 320px;
  margin: 0 auto;
}

.feature-point-img {
  width: 100%;
  height: auto;
  display: block;
}

.features__slider-inner {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--spacing-small) 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.features__slider-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* ②PCスケール時のサービス名称カルーセルを画面幅全域に */
@media (min-width: var(--breakpoint-lg)) {
  /* サービス名称セクションをPCでは横並びに表示 */
  .features__slider {
    overflow: visible;
    width: 100vw; /* ビューポート幅いっぱいに */
    margin-left: calc(-50vw + 50%); /* 中央揃え */
    margin-right: calc(-50vw + 50%);
    padding: 0 0 var(--spacing-large);
  }
  
  .features__slider-inner {
    display: flex; /* flexで3つ並べる */
    flex-wrap: nowrap;
    justify-content: center; /* 中央に配置 */
    gap: 2rem; /* パネル間の間隔を広げる */
    overflow: visible;
    width: 100%;
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto;
    padding: 0 2rem; /* 左右余白 */
  }
  
  /* 特徴カードを均等に配置 */
  .feature-card {
    min-width: auto; /* 最小幅の制限を解除 */
    width: 320px; /* 固定幅に設定 */
    flex: 0 0 320px; /* サイズを固定 */
    margin: 0;
  }
  
  /* スライダーナビゲーションを非表示 - サービス名称のみ */
  .features__slider .slider-nav {
    display: none;
  }
  
  /* PCレイアウト時のポイント画像 */
  .feature-point-image {
    max-width: 320px;
    margin: var(--spacing-medium) auto 0;
    padding: 0;
  }
}

.features__slider-inner::-webkit-scrollbar,
.testimonials__slider-inner::-webkit-scrollbar,
.product__slider-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* お客様の声セクション */
.testimonials__slider {
  position: relative;
  margin: 0 -var(--container-padding);
  padding: 0 var(--container-padding);
  overflow: hidden;
}

/* 使い方セクション */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  margin-bottom: var(--spacing-xlarge);
}

/* ⑦利用環境についてのボックスをセンター合わせ */
.sample-content__description {
  text-align: center;
  margin-bottom: var(--spacing-large);
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  display: inline-block;
}

.sample-content__iframe-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto var(--spacing-large);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  background-color: rgba(255, 255, 255, 0.85);
}

.iframe-placeholder {
  background-color: var(--color-light-gray);
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-style: italic;
}

.sample-content__note {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--font-size-small);
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius);
  display: inline-block; /* インラインブロックで中央揃え */
  margin: 0 auto; /* 中央揃え */
}

/* 商品紹介セクション */
.product__description {
  margin-bottom: var(--spacing-large);
  text-align: center;
  /* 視認性を高めるための背景 */
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  display: block;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.product__materials {
  margin-bottom: var(--spacing-large);
}

.product__slider {
  position: relative;
  margin: 0 -var(--container-padding);
  padding: 0 var(--container-padding);
  overflow: hidden;
}

/* 商品スライドのスタイリング */
.product-slide__content {
  padding: var(--spacing-large);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius);
}

.product-slide__title {
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-medium);
  color: var(--color-secondary);
}

.product-slide__description {
  margin-bottom: var(--spacing-large);
  color: var(--color-text-light);
  text-align: center;
}

/* コンセプトセクション - 改修 */
.concept__content {
  display: flex;
  justify-content: center;
  width: 100%;
}

.concept__image {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.concept__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

.concept__message {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%; /* 下半分のみを使用 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上部から配置 */
  align-items: flex-start; /* 左揃え */
  padding: var(--spacing-large);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); /* グラデーションオーバーレイ */
  text-align: left;
}

.concept__text {
  font-size: var(--font-size-large);
  line-height: 1.6;
  color: var(--color-white); /* テキスト色を白に */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 視認性向上のための影 */
  max-width: 95%;
}

/* キャンペーンセクション */
.campaign__info {
  margin-bottom: var(--spacing-large);
  text-align: center;
  /* 視認性を高めるための背景 */
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  display: block;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.campaign__steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

/* 料金プランセクション */
.pricing__description {
  text-align: center;
  margin-bottom: var(--spacing-large);
  /* 視認性を高めるための背景 */
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  display: block;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* 基本は縦並び（SP表示優先） */
.pricing__plans {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  width: 100%;
}

/* スマホ・タブレット用に明示的に縦並びを指定 */
@media (max-width: calc(var(--breakpoint-lg) - 1px)) {
  .pricing__plans {
    flex-direction: column !important;
    width: 100%;
  }
  
  .plan-card {
    width: 100%;
    margin-bottom: var(--spacing-medium);
  }
}

/* PCのみ横並び */
@media (min-width: var(--breakpoint-lg)) {
  .pricing__plans {
    flex-direction: row;
    gap: var(--spacing-medium);
    align-items: stretch; /* 高さを揃える */
  }
  
  /* PC表示ではプランカードを均等に分割 */
  .plan-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* コンテンツ部分を常に表示 */
  .plan-card__content {
    flex-grow: 1; /* 空きスペースを埋める */
    max-height: none !important; /* アコーディオンの高さ制限を解除 */
    transition: none; /* トランジションを無効化 */
    overflow: visible !important; /* オーバーフローを許可 */
  }
  
  /* ヘッダーのカーソル効果を削除 */
  .plan-card__header {
    cursor: default;
  }
}

/* よくある質問セクション */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
}

/* ④フッターの背景を透明に */
.footer {
  color: var(--color-white);
  padding: var(--spacing-xlarge) 0;
  background-color: rgba(51, 51, 51, 0.9); /* 半透明に変更 */
  /* 区切り線は不要（違う背景色なので） */
  border-bottom: none;
  position: relative;
  z-index: 1;
}

.footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-medium);
  text-align: center;
}

/* フッターリンクのコンテナ */
.footer__links-container {
  width: 100%;
  display: flex;
  justify-content: flex-end; /* 中央揃えから右寄せに変更 */
  margin: var(--spacing-medium) 0;
}

/* フッターリンク */
.footer__links {
  width: 50%; /* 80%から50%に変更して横幅を半分に */
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左寄せのまま */
  gap: var(--spacing-small);
}

/* メディアクエリ：タブレット以上 */
@media (min-width: var(--breakpoint-md)) {
  .concept__text {
    font-size: var(--font-size-xlarge);
  }
  
  .footer__links {
    width: 50%; /* タブレット以上でも50%を維持 */
  }
}

/* メディアクエリ：デスクトップ以上で文字サイズをさらに大きく */
@media (min-width: var(--breakpoint-lg)) {
  .concept__text {
    font-size: var(--font-size-xxlarge);
    line-height: 1.4; /* 大きいフォントサイズに合わせて行間を調整 */
  }
  
  .pricing__plans {
    flex-direction: row;
    gap: var(--spacing-medium);
  }
  
  /* ステップカードを縦並びに戻す */
  .steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
  }
}

/* Sampleコンテンツのディスクリプションをセンター合わせ */
.sample-content__description {
  text-align: center;
  margin: 0 auto var(--spacing-large);
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  display: inline-block;
}

/* メディアクエリ：デスクトップ以上 */
@media (min-width: var(--breakpoint-lg)) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* サービス名称セクションをPCでは横並びに表示 */
  .features__slider {
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  
  /* お客様の声を2カラムに */
  .testimonials__slider-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-medium);
    overflow: visible;
    width: 100%;
    margin-left: 0;
  }
  
  .testimonial-card {
    min-width: initial;
    width: 100%;
    flex: initial;
  }
  
  /* お客様の声カルーセルのナビゲーションは表示したままにする（削除） */
  /* .testimonials__slider .slider-nav {
    display: none;
  } */
  
  /* 商品スライドも2カラムに */
  .product__slider-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-medium);
    overflow: visible;
    width: 100%;
    margin-left: 0;
  }
  
  .product-slide {
    min-width: initial;
    width: 100%;
    flex: initial;
  }
  
  /* 商品紹介カルーセルのナビゲーションも表示したままにする（削除） */
  /* .product__slider .slider-nav {
    display: none;
  } */
}