/* アイコンを綺麗な円状に配置するためのパーツ（HTMLタグ削減用） */
.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ホバー時のモダンなマイクロインタラクション */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06) !important;
}

/* 行間を詰めて洗練されたフォント表示に */
.card p {
  line-height: 1.6;
}

/**device */
/* テーブルのスタイルをCSSに集約しHTMLタグを削減 */
.spec-table th {
  width: 25%;
  min-width: 130px;
  background-color: var(--bs-tertiary-bg);
  font-weight: 600;
  color: var(--bs-dark);
  padding-left: 1.5rem;
}

.spec-table td {
  padding-right: 1.5rem;
  font-size: 0.925rem;
}

/* アコーディオンの矢印アイコン位置調整とスタイリング */
.accordion-button:not(.collapsed) {
  background-color: #fff;
  color: var(--bs-primary);
}

.accordion-button:focus {
  box-shadow: none;
}

/* 背景グラデーション */
section.pricing {

  /* 背景のサイズを大きめに設定して動かす余白を作る */
  background: linear-gradient(135deg, #beb1ec 0%, #eceef0 100%);
  background-size: 200% 200%;
  
  /* アニメーションの設定：3秒かけて無限に往復 */
  animation: gradientAnimation 3s ease infinite;
}

/* 背景の位置（位置指定）を動かすアニメーション定義 */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* カードの見た目とホバーアニメーション */
.pricing .hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing .hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important;
}

/* ボタンのホバーエフェクト */
.pricing .btn-primary {
  transition: background-color 0.2s, transform 0.2s;
}

.pricing .btn-primary:hover {
  transform: scale(1.02);
}
/* 幅の制限用クラス */
.max-w-700 {
  max-width: 700px;
}

/* テーブルの共通設定 */
.spec-table th, .spec-table td {
  padding: 1.25rem 1rem;
}

/* ホバーで浮き上がるアニメーション */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}
/* アイコン用の丸形枠 */
.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ホバーアニメーション */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

/* 補足テキスト用サイズ */
.fs-7 {
  font-size: 0.8rem;
}

/* アコーディオン背景調整 */
.accordion-button:not(.collapsed) {
  background-color: #fff;
  color: var(--bs-primary);
}

.accordion-button:focus {
  box-shadow: none;
}
/* 画像の高さを固定して揃える枠 */
.plan-img-wrapper {
  height: 140px;
  width: 100%;
}

/* ホバーでカードが少し浮き上がるアニメーション */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}
        .img-container {
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .img-container img {
            max-height: 100%;
            object-fit: contain;
        }