/* ui-cards.css */
/* カード要素のスタイル */

/* 特徴カード */
.feature-card {
  background-color: rgba(255, 255, 255, 0.85); /* 半透明の背景に変更 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  scroll-snap-align: center;
  height: auto; /* 高さを自動調整に変更 */
  min-width: 100%;
  width: 100%;
  flex: 0 0 100%;
  padding: var(--spacing-large) var(--spacing-medium); /* パディングを増やして高さ調整 */
  border-radius: var(--border-radius);
}

.feature-circle {
  background-color: rgba(255, 255, 255, 0.95); /* 半透明の背景に変更 */
  border-radius: 50%;
  width: 285px; /* サイズ縮小 */
  height: 285px; /* サイズ縮小 */
  position: relative;
  box-shadow: var(--shadow-medium);
  margin: var(--spacing-medium) auto; /* 上下にマージンを追加 */
  overflow: hidden; /* 内部のはみ出しを防止 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* サークルの外枠 - ゴールドの縁を追加 */
.feature-circle::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  z-index: -1;
}

/* アイコンコンテナ - サークル上部に配置 */
.feature-circle__icon-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-medium);
  margin-bottom: var(--spacing-small);
}

.feature-card__icon {
  width: 90px; /* サイズを拡大 */
  height: 90px; /* サイズを拡大 */
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* アイコンを切り抜くために必須 */
}

.feature-card__img {
  width: 100%; /* 幅を100%に変更 */
  height: 100%; /* 高さを100%に変更 */
  object-fit: cover; /* 画像が切り抜かれるよう調整 */
}

/* コンテンツ部分 - 残りのスペースを使用 */
.feature-card__content {
  padding: 0 var(--spacing-medium);
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 見出し部分 */
.feature-card__title {
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-medium);
  color: var(--color-secondary);
}

/* 説明文部分 */
.feature-card__description {
  color: var(--color-text-light);
  font-size: var(--font-size-small);
  line-height: 1.4;
  overflow-y: auto; /* 必要に応じてスクロール */
  max-width: 90%;
  margin: 0 auto;
}

/* タブレット以上のサイズ */
@media (min-width: var(--breakpoint-md)) {
  .feature-circle {
    width: 340px;
    height: 340px;
  }
  
  .feature-card__icon {
    width: 100px;
    height: 100px;
  }
  
  .feature-card__title {
    font-size: var(--font-size-large);
  }
  
  .feature-card__description {
    font-size: var(--font-size-medium);
  }
}

/* デスクトップサイズ */
@media (min-width: var(--breakpoint-lg)) {
  .feature-circle {
    width: 390px;
    height: 390px;
  }
  
  .feature-card__icon {
    width: 120px;
    height: 120px;
  }
  
  .feature-card__title {
    font-size: var(--font-size-xlarge);
    margin-bottom: var(--spacing-medium);
  }
}

/* お客様の声カード */
.testimonial-card {
  background-color: rgba(255, 255, 255, 0.85); /* 半透明の背景に変更 */
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  box-shadow: var(--shadow-medium);
  scroll-snap-align: center;
  height: 100%;
  min-width: 100%;
  width: 100%;
  flex: 0 0 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-circle);
  overflow: hidden;
  margin: 0 auto var(--spacing-medium);
  border: 2px solid var(--color-secondary);
}

.testimonial-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  font-weight: bold;
  margin-bottom: var(--spacing-medium);
  color: var(--color-secondary);
}

.testimonial-card__text {
  text-align: left;
  margin-bottom: var(--spacing-large);
  color: var(--color-text-light);
  line-height: 1.6;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-card__image {
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* ステップカード */
.step-card {
  background-color: rgba(255, 255, 255, 0.85); /* 半透明の背景に変更 */
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  box-shadow: var(--shadow-medium);
  display: flex;
  align-items: center;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-large);
}

.step-card__number {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius);
  margin-right: var(--spacing-medium);
  font-weight: bold;
}

.step-card__title {
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-small);
}

.step-card__description {
  color: var(--color-text-light);
}

/* サンプルコンテンツセクション */
.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; /* インラインブロックで中央揃え */
}

.sample-content__link {
  color: var(--color-secondary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.sample-content__link:hover {
  color: darken(var(--color-secondary), 10%);
}

/* 商品スライド */
.product-slide {
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.85); /* 半透明の背景に変更 */
  overflow: hidden;
  scroll-snap-align: center;
  min-width: 100%;
  width: 100%;
  flex: 0 0 100%;
  box-shadow: var(--shadow-medium);
}

.product-slide__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 商品スライド画像 - fixed.cssから移植 */
.product-slide__image {
  width: 100%;
  max-width: 300px; /* Voiceの画像と同じ最大幅を適用 */
  margin: 0 auto;
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* 素材リスト */
.material-title {
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-medium);
}

.material-list {
  margin-bottom: var(--spacing-large);
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
}

.material-item {
  padding: var(--spacing-small) 0;
  border-bottom: 1px solid var(--color-light-gray);
}

/* キャンペーンステップ */
.campaign-step {
  background-color: rgba(255, 255, 255, 0.85); /* 半透明の背景に変更 */
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  box-shadow: var(--shadow-medium);
}

.campaign-step__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-medium);
}

.campaign-step__number {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius);
  margin-right: var(--spacing-medium);
  font-weight: bold;
}

.campaign-step__title {
  font-size: var(--font-size-large);
}

.campaign-step__description {
  margin-bottom: var(--spacing-medium);
}

.campaign-step__note {
  font-size: var(--font-size-small);
  color: var(--color-text-light);
  margin-top: var(--spacing-medium);
}

.campaign-step__video {
  margin-top: var(--spacing-large);
}

/* 料金プランカード */
.plan-card {
  background-color: rgba(255, 255, 255, 0.85); /* 半透明の背景に変更 */
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-medium);
  box-shadow: var(--shadow-medium);
  height: 100%;
  overflow: hidden;
  width: 100%; /* 幅を100%に設定（特にSP表示用） */
}

/* モバイル表示用の明示的なスタイル */
@media (max-width: calc(var(--breakpoint-lg) - 1px)) {
  .plan-card {
    width: 100% !important;
    margin-bottom: var(--spacing-large);
  }
}

.plan-card__header {
  display: flex !important; /* 強制的にflex表示に */
  flex-direction: row !important; /* 強制的に横並びに */
  align-items: center !important; /* 中央揃え */
  padding: var(--spacing-medium) var(--spacing-large);
  background-color: rgba(238, 238, 238, 0.9); /* 半透明の背景に変更 */
  cursor: pointer;
  position: relative;
  width: 100%;
}

/* アクティブ状態でも同じ配置を保持 */
.plan-card__header.is-active {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.plan-card__icon {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-circle);
  background-color: var(--color-white);
  margin-right: var(--spacing-medium);
  flex: 0 0 50px; /* 幅を固定 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--color-secondary);
  position: relative; /* 位置を固定 */
}

.plan-card__icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-card__title-wrapper {
  flex: 1 1 auto; /* 柔軟に幅を調整しつつ領域を確保 */
  margin-right: var(--spacing-medium);
  min-width: 0; /* 必要に応じて縮小できるように */
  overflow: hidden; /* はみ出し防止 */
  text-overflow: ellipsis; /* 長いテキストは省略 */
}

.plan-card__title {
  font-size: var(--font-size-large);
  margin-bottom: 0; 
  white-space: nowrap; /* タイトルが折り返さないように */
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card__subtitle {
  white-space: nowrap; /* サブタイトルも折り返さないように */
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card__content {
  padding: var(--spacing-large);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; /* トランジションをやや長めに設定 */
  display: flex;
  flex-direction: column;
}

/* 明示的にアクティブ状態のスタイルを定義 */
.plan-card__header.is-active + .plan-card__content {
  max-height: 2000px; /* 十分大きな値 */
  overflow: visible;
}

.plan-card__description {
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--spacing-large);
  /* PCレイアウト用に追加 */
  transition: height 0.3s ease;
}

.plan-card__description strong {
  color: var(--color-secondary);
  display: block;
  margin-bottom: var(--spacing-small);
  font-size: var(--font-size-medium);
}

.plan-card__image {
  margin: var(--spacing-medium) auto; /* 左右マージンをautoに変更して中央揃え */
  border-radius: var(--border-radius);
  overflow: hidden;
  text-align: center;
  max-width: 320px; /* feature-point-imageと同じサイズに統一 */
}

.plan-card__img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.plan-card__purchase-info {
  color: var(--color-text-light);
  font-style: italic;
  margin-top: var(--spacing-medium);
}

/* PC表示用のアイコン制御 */
@media (min-width: var(--breakpoint-lg)) {
  /* PC表示ではアコーディオンアイコンを非表示 */
  .plan-card__header .faq-item__icon {
    display: none;
  }
  
  /* PC表示では説明文と画像配置を統一 */
  .plan-card__content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .plan-card__description {
    flex-shrink: 0; /* 高さが固定されるように */
  }
  
  .plan-card__image {
    flex-grow: 1; /* 残りのスペースを埋める */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向の中央揃え */
    max-width: 100%; /* PC表示時は幅制限を解除 */
    margin: var(--spacing-medium) 0; /* PC表示時は左右マージンを0に戻す */
  }
}

/* クーポンアイテム */
.coupon-item {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--border-radius);
  padding: var(--spacing-large);
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.coupon-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-large);
}

.coupon-item__title {
  font-size: var(--font-size-large);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-small);
}

/* クーポンコードコンテナ（親要素） */
.coupon-item__code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--spacing-medium);
  width: 100%;
}

/* クーポンコードラベル */
.coupon-item__code-label {
  font-size: 0.7rem;
  color: var(--color-text-light);
  margin-bottom: 2px;
  text-align: center;
}

/* クーポンコードラッパー */
.coupon-item__code-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 80%;
}

/* クーポンコード表示エリア */
.coupon-item__code {
  background-color: var(--color-light-gray);
  border: 1px dashed var(--color-secondary);
  border-radius: var(--spacing-xsmall);
  padding: var(--spacing-xsmall) var(--spacing-small);
  font-family: monospace;
  font-size: 0.9rem; /* 文字サイズを小さく */
  font-weight: bold;
  color: var(--color-secondary);
  margin-right: var(--spacing-small);
  flex-grow: 1;
  text-align: center;
  height: 30px; /* 高さを指定 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コピーボタン - 絵文字表示用に修正 */
.coupon-item__copy-btn {
  background-color: var(--color-secondary);
  border: none;
  border-radius: var(--border-radius);
  width: 32px;
  height: 30px; /* クーポンコードと同じ高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.coupon-item__copy-btn:hover {
  background-color: #a88d69; /* var(--color-secondary)より少し暗く */
  transform: translateY(-2px);
  box-shadow: var(--shadow-small);
}

.coupon-item__copy-btn:active {
  transform: translateY(0);
}

/* 絵文字スタイル */
.coupon-item__copy-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

/* コピー成功時のアニメーション */
.coupon-item__copy-btn.copied .coupon-item__copy-emoji {
  /* ✅ の絵文字に変更 */
  content: '✅';
}

@keyframes copiedPulse {
  0% { transform: scale(1); }
  10% { transform: scale(1.2); }
  20% { transform: scale(0.9); }
  30% { transform: scale(1.1); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

.coupon-item__copy-success {
  position: absolute;
  top: -35px;
  right: -10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--color-white);
  padding: var(--spacing-xsmall) var(--spacing-small);
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  white-space: nowrap;
  z-index: 5;
  box-shadow: var(--shadow-small);
}

/* 成功メッセージの下向き三角形 */
.coupon-item__copy-success::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.8);
}

/* SP表示時のカルーセル対応 */
@media (max-width: 767px) {
  .coupon-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem var(--spacing-medium);
    gap: var(--spacing-medium);
    margin: 0 -1rem var(--spacing-large); /* 左右にネガティブマージンを追加 */
    width: calc(100% + 2rem); /* 幅を広げる */
  }
  
  .coupon-item {
    flex: 0 0 85%;
    scroll-snap-align: center;
    min-width: 250px;
  }
  
  /* スクロールバーを非表示 */
  .coupon-grid::-webkit-scrollbar {
    display: none;
  }
  
  .coupon-grid {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* 最初と最後の要素に余白を追加 */
  .coupon-item:first-child {
    margin-left: 1rem;
  }
  
  .coupon-item:last-child {
    margin-right: 1rem;
  }
}

.coupon-item__thumbnail {
  width: 100%;
  margin-bottom: var(--spacing-medium);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.coupon-item__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-fast);
}

.coupon-item:hover .coupon-item__img {
  transform: scale(1.05);
}

.coupon-item__description {
  margin-bottom: var(--spacing-medium);
  color: var(--color-text-light);
  line-height: 1.5;
  flex-grow: 1;
}

.coupon-item__btn {
  display: inline-block;
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-small);
  color: white; /* 文字色を白に変更 */
}

/* 注釈ブロック */
.coupon-note {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--border-radius);
  padding: var(--spacing-medium);
  margin-top: var(--spacing-large);
  text-align: center;
  box-shadow: var(--shadow-small);
}

.coupon-note__text {
  margin-bottom: var(--spacing-medium);
  font-size: var(--font-size-medium);
  color: var(--color-text-light);
}

.coupon-note__btn {
  display: inline-block;
  margin-top: var(--spacing-small);
}