/* =========================
   Plans page styles
   ========================= */

/* セクション全体 */
#plans {
  padding: 60px 0;
}

/* タイトル */
#plans .section-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  color: #0f172a;
}

/* 横スクロール対応 */
#plans .container > div {
  overflow-x: auto;
}

/* =========================
   プラン比較テーブル
   ========================= */

.plan-table {
  width: 100%;
  min-width: 720px; /* スマホで横スクロール */
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #ffffff;
}

/* セル共通 */
.plan-table th,
.plan-table td {
  border: 1px solid #e5e7eb;
  padding: 14px 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.6;
}

/* 見出し */
.plan-table thead th {
  background: #f1f5f9;
  font-weight: 700;
  color: #0f172a;
}

/* 左列（項目名） */
.plan-table tbody th {
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  color: #334155;
}

/* Pro列（おすすめ） */
.plan-table .recommended {
  background: #eef2ff;
  font-weight: 600;
}

/* 補足テキスト */
.plan-table small {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #64748b;
}

/* =========================
   ボタン調整（plans専用）
   ========================= */

#plans .btn-primary {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 6px;
  text-decoration: none;
}

#plans .btn-sm {
  font-size: 0.85rem;
  padding: 7px 14px;
}

/* =========================
   レスポンシブ微調整
   ========================= */

@media (max-width: 768px) {
  #plans {
    padding: 40px 0;
  }

  #plans .section-title {
    font-size: 1.5rem;
  }
}

/* =========================
   Plans hero
   ========================= */

.plans-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 80px 20px 70px;
  text-align: center;
}

.plans-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* ラベル */
.plans-hero-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #2563eb;
  background: #e0e7ff;
  padding: 6px 12px;
  border-radius: 9999px;
  margin-bottom: 16px;
}

/* タイトル */
.plans-hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
}

/* 説明文 */
.plans-hero-text {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 32px;
}

/* ボタン */
.plans-hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* outlineボタン（plans専用） */
.plans-hero .btn-outline {
  display: inline-block;
  padding: 10px 20px;
  font-size: 0.95rem;
  border-radius: 6px;
  border: 1px solid #c7d2fe;
  color: #2563eb;
  text-decoration: none;
  background: #ffffff;
}

.plans-hero .btn-outline:hover {
  background: #eef2ff;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 768px) {
  .plans-hero {
    padding: 60px 16px 50px;
  }

  .plans-hero-title {
    font-size: 2rem;
  }

  .plans-hero-text {
    font-size: 0.95rem;
  }
}


/* =========================
   Image hero (plans)
   ========================= */

.plans-hero.image-hero {
  position: relative;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.85) 45%,
      rgba(255,255,255,0.4) 70%,
      rgba(255,255,255,0.0) 100%
    ),
    url("/dist/assets/img/host_hero.png") right center / cover no-repeat;
  padding: 90px 20px 80px;
}

@media (max-width: 768px) {
  .plans-hero.image-hero {
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.85) 55%,
        rgba(255,255,255,0.4) 100%
      ),
      url("/dist/assets/img/host_hero.png") center top / cover no-repeat;
    padding: 70px 16px 60px;
  }
}

/* =========================
   FAQ
   ========================= */

.plans-faq {
  background: #f8fafc;
  padding: 70px 0;
}

.plans-faq .section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 0;
}

.faq-item summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  color: #0f172a;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "＋";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #64748b;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding: 0 18px 18px;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.7;
}