@charset "UTF-8";

/* ==========================================================================
   inner.css
   トップページ以外の下層ページ（お申し込み／プライバシーポリシー／
   特定商取引法／お知らせ詳細／404）で使う共通レイアウト。
   base.css の読み込みが前提。
   ========================================================================== */

/* ==========================================================================
   下層ページ共通の中央カードレイアウト
   ========================================================================== */
/* このレイアウトのページには下層ヒーローがないため、上に余白を取らないと
   カードが背景の「夜空」（暗い帯）にかかり、濃紺の文字が読みづらくなる。
   空が明るくなりきる位置までカードを下げる。 */
/* 上の余白は margin ではなく padding で取ること。
   margin だと body まで相殺（マージン相殺）が伝わり、背景の空（.sky）の
   上端まで一緒に押し下げられて、ページ最上部に地の色の帯が出てしまう。 */
.inner-section {
  padding: clamp(200px, 26vw, 320px) 0 120px 0;
}
/* 半透明にすると夜空が透けて文字のコントラストが落ちるため、面は白で塗る */
.inner-card {
  max-width: 850px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 60px 50px;
  box-shadow: 0 25px 50px rgba(var(--shadow-rgb), 0.1);
}
@media (max-width: 665px) {
  .inner-card {
    padding: 40px 20px;
  }
}

/* ==========================================================================
   お申し込みページ：料金概算ボックス・プラン選択
   ========================================================================== */
.price-estimation-box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  padding: 22px;
  border-radius: 4px;
  margin-bottom: 30px;
}
.est-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 14px;
}
.est-flex {
  display: flex;
  gap: 40px;
  margin-bottom: 8px;
}
.est-label {
  color: var(--text-main);
  margin-right: 8px;
}
.est-value {
  font-family: "Montserrat", sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--accent-secondary);
}
.est-note {
  font-size: 0.78rem;
  color: rgba(var(--ink-rgb), 0.6);
}
.est-note-highlight {
  margin-top: 8px;
  color: var(--accent-secondary);
  font-weight: 500;
}
.est-note-highlight[hidden] {
  display: none;
}

@media (max-width: 665px) {
  .est-flex {
    flex-direction: column;
    gap: 12px;
  }
}

.info-text {
  color: rgba(var(--ink-rgb), 0.7);
  font-size: 0.85rem;
  margin-top: 5px;
}

/* ==========================================================================
   プライバシーポリシー／特定商取引法／お知らせ詳細：本文レイアウト
   ========================================================================== */
.privacy-body h3 {
  font-size: 1.2rem;
  color: var(--text-heading);
  margin: 30px 0 10px 0;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
.privacy-body p {
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.8;
  margin-bottom: 15px;
}
.privacy-body ul {
  padding-left: 20px;
  margin-bottom: 20px;
}
.privacy-body li {
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 8px;
}

.legal-section-title {
  margin-top: 80px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(var(--ink-rgb), 0.06);
}
.legal-table th,
.legal-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  text-align: left;
  vertical-align: top;
}
.legal-table tr:last-child th,
.legal-table tr:last-child td {
  border-bottom: none;
}
.legal-table th {
  width: 30%;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-heading);
  white-space: nowrap;
  background: rgba(var(--accent-rgb), 0.06);
}
.legal-table td {
  font-size: 0.92rem;
  color: var(--text-main);
  line-height: 1.8;
}
.legal-note {
  font-size: 0.85rem;
  color: rgba(var(--ink-rgb), 0.7);
  margin-top: 16px;
}
@media (max-width: 665px) {
  .legal-table th,
  .legal-table td {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .legal-table th {
    border-bottom: none;
    padding-bottom: 6px;
  }
  .legal-table td {
    padding-top: 0;
    padding-bottom: 20px;
  }
}