@charset "UTF-8";
/* ==========================================================
   privacy.css — プライバシーポリシー
   style2.css ベース / Bootstrap不使用 / 既存マークアップ維持
   読み込み順： style2.css → privacy.css
   scope : .hero-section 直下に article.card を持つ main
   ========================================================== */

main:has(.hero-section):has(article.card) {
  /* インラインstyleの var(--bg-base) をここで解決する */
  --bg-base: var(--soft);
}

/* ==========================================================
   0. 使用されているユーティリティの最小shim
   ========================================================== */
main:has(.hero-section):has(article.card) .d-flex { display: flex }
main:has(.hero-section):has(article.card) .flex-column { flex-direction: column }
main:has(.hero-section):has(article.card) .position-relative { position: relative }
main:has(.hero-section):has(article.card) .text-center { text-align: center }
main:has(.hero-section):has(article.card) .text-start { text-align: left }
main:has(.hero-section):has(article.card) .mx-auto { margin-inline: auto }

main:has(.hero-section):has(article.card) .gap-5 { gap: 2.7rem }
main:has(.hero-section):has(article.card) .mb-0 { margin-bottom: 0 }
main:has(.hero-section):has(article.card) .mb-3 { margin-bottom: 1rem }
main:has(.hero-section):has(article.card) .mb-4 { margin-bottom: 1.35rem }
main:has(.hero-section):has(article.card) .pb-2 { padding-bottom: .5em }
main:has(.hero-section):has(article.card) .pb-5 { padding-bottom: 2.7rem }
main:has(.hero-section):has(article.card) .ps-4 { padding-left: 1.35rem }

main:has(.hero-section):has(article.card) .fw-black { font-weight: 700 }
main:has(.hero-section):has(article.card) .fw-bold { font-weight: 700 }
main:has(.hero-section):has(article.card) .fw-medium { font-weight: 500 }
main:has(.hero-section):has(article.card) .fs-6 { font-size: 1em }
main:has(.hero-section):has(article.card) .text-dark { color: var(--ink) }
main:has(.hero-section):has(article.card) .text-sub { color: #44515c }
main:has(.hero-section):has(article.card) .text-orange { color: var(--orange) }
main:has(.hero-section):has(article.card) .text-decoration-none { text-decoration: none }
main:has(.hero-section):has(article.card) .lh-lg { line-height: 1.95 }
main:has(.hero-section):has(article.card) .lh-base { line-height: 1.7 }

/* デザインシステムは角丸・影・ブロブ装飾を使わない */
main:has(.hero-section):has(article.card) .rounded-4 { border-radius: 0 }
main:has(.hero-section):has(article.card) .shadow-sm { box-shadow: none }
main:has(.hero-section):has(article.card) .hero-blob { display: none }

@media (min-width: 768px) {
  main:has(.hero-section):has(article.card) .text-md-center { text-align: center }
  main:has(.hero-section):has(article.card) .d-md-block { display: block }
}
@media (max-width: 767px) {
  main:has(.hero-section):has(article.card) br.d-none { display: none }
}

/* ==========================================================
   1. ヒーロー（ページ見出し）
   ========================================================== */
main:has(.hero-section):has(article.card) .hero-section {
  padding: 3.4rem 0 2.7rem;
}

main:has(.hero-section):has(article.card) .col-lg-8 {
  max-width: 52em;
  margin-inline: auto;
}

main:has(.hero-section):has(article.card) .hero-title {
  margin: 0 0 .5em;
  font-size: clamp(2.1rem, 5vw, 3.375rem);
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}

main:has(.hero-section):has(article.card) .hero-section p {
  margin: 0;
  color: #34414c;
  line-height: 1.95;
  text-wrap: pretty;
}

/* ==========================================================
   2. 本文セクション（ソフト背景 + 白カード）
   ========================================================== */
main:has(.hero-section):has(article.card) .section-py {
  padding: 3.9rem 0 5rem;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

main:has(.hero-section):has(article.card) .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

main:has(.hero-section):has(article.card) .col-lg-9 {
  width: 100%;
  max-width: 56em;
  min-width: 0;
}

main:has(.hero-section):has(article.card) article.card {
  padding: 2.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
}

/* ==========================================================
   3. 条項（h2 / 本文 / リスト）
   ========================================================== */
main:has(.hero-section):has(article.card) article.card h2 {
  margin: 0 0 .8em;
  padding: 0 0 0 .6em;
  border-bottom: 0;
  border-left: .18em solid var(--orange);
  font-size: 1.25em;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

main:has(.hero-section):has(article.card) article.card p {
  margin: 0 0 1em;
  line-height: 1.9;
  color: #44515c;
  text-wrap: pretty;
}

main:has(.hero-section):has(article.card) article.card p:last-child { margin-bottom: 0 }

main:has(.hero-section):has(article.card) article.card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

main:has(.hero-section):has(article.card) article.card ul li {
  position: relative;
  padding: .55em .5em .55em 1.5em;
  border-bottom: 1px solid var(--line);
  line-height: 1.8;
  color: #44515c;
}

main:has(.hero-section):has(article.card) article.card ul li::before {
  content: "✓";
  position: absolute;
  left: .25em;
  color: var(--orange);
  font-weight: 700;
}

/* 文中リンク */
main:has(.hero-section):has(article.card) article.card a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25em;
  transition: color .2s;
}

main:has(.hero-section):has(article.card) article.card a:hover {
  color: var(--orange-dark);
}

/* ==========================================================
   4. 初回表示のフェードイン（JS不要）
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  main:has(.hero-section):has(article.card) article.card {
    transition: opacity .45s ease, translate .45s ease;
    transition-behavior: allow-discrete;
  }
  @starting-style {
    main:has(.hero-section):has(article.card) article.card {
      opacity: 0;
      translate: 0 .75em;
    }
  }
}

/* ==========================================================
   5. レスポンシブ
   ========================================================== */
@media (max-width: 800px) {
  main:has(.hero-section):has(article.card) .hero-section { padding: 2.7rem 0 2rem }
  main:has(.hero-section):has(article.card) .hero-title { font-size: 2.1rem }  /* ≒29.4px（上限30px内） */
  main:has(.hero-section):has(article.card) .section-py { padding: 2.7rem 0 3.6rem }
  main:has(.hero-section):has(article.card) article.card { padding: 1.35rem 1rem }
  main:has(.hero-section):has(article.card) .d-flex.flex-column.gap-5 { gap: 2rem }
}