/* docs.css
   静的ドキュメントページ（/privacy・/terms・/help）のページエントリーポイント。
   lp.css のトークン（.lp-page スコープ）を前提に、.docs-page 配下へ文書向けスタイルを追加する。
   Static document pages (/privacy, /terms, /help) entry point.
   Builds on lp.css tokens (scoped to .lp-page) and adds document styles under .docs-page. */

/* ---- ヒーロー / Hero ---- */

.docs-hero {
  background:
    radial-gradient(55% 90% at 90% 0%, rgba(80, 163, 91, 0.12), transparent 70%),
    var(--lp-paper);
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}

/* LPと同じ縦書きキッカーでブランドの連続性を保つ
   Vertical-writing kicker shared with the LP for brand continuity */
.docs-hero__kicker {
  color: var(--lp-green-deep);
  font-family: var(--lp-font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.42em;
  opacity: 0.55;
  position: absolute;
  right: clamp(0.75rem, 2.5vw, 2rem);
  top: clamp(3.5rem, 7vw, 5.5rem);
  writing-mode: vertical-rl;
}

.docs-hero__title {
  font-family: var(--lp-font-display);
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-bottom: var(--space-4);
}

.docs-hero__lead {
  color: var(--lp-muted);
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  margin-bottom: var(--space-5);
  max-width: 42em;
}

/* 制定日・改定日などのメタ情報 / Meta info such as established and updated dates */
.docs-hero__meta {
  color: var(--lp-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  gap: var(--space-2) var(--space-5);
  list-style: none;
}

.docs-hero__meta li {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.docs-hero__meta li::before {
  background: var(--lp-green);
  border-radius: 50%;
  content: "";
  height: 5px;
  width: 5px;
}

/* ---- 要点サマリー / Plain-language summary ---- */

.docs-summary {
  background: var(--lp-paper-tint);
  border-block: 1px solid var(--lp-line);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.docs-summary__label {
  color: var(--lp-green-deep);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-4);
}

.docs-summary__grid {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  list-style: none;
}

.docs-summary__card {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(1rem, 2vw, 1.35rem);
}

.docs-summary__icon {
  align-items: center;
  background: var(--lp-green-soft);
  border-radius: var(--radius-sm);
  color: var(--lp-green-deep);
  display: inline-flex;
  font-size: 1rem;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.docs-summary__title {
  font-size: var(--text-md);
  font-weight: 700;
}

.docs-summary__text {
  color: var(--lp-muted);
  font-size: var(--text-sm);
}

.docs-summary__note {
  color: var(--lp-muted);
  font-size: var(--text-2xs);
  margin-top: var(--space-4);
}

/* ---- 本文レイアウト（目次＋条文） / Body layout (TOC + articles) ---- */

.docs-body {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem);
}

.docs-body__inner {
  align-items: start;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 230px minmax(0, 1fr);
}

.docs-toc {
  position: sticky;
  top: calc(68px + 2rem);
}

.docs-toc__label {
  color: var(--lp-green-deep);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-3);
}

.docs-toc__list {
  border-left: 2px solid var(--lp-green-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}

.docs-page .docs-toc__list a {
  border-left: 2px solid transparent;
  color: var(--lp-muted);
  display: block;
  font-size: var(--text-sm);
  margin-left: -2px;
  padding: 0.15rem 0 0.15rem var(--space-3);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.docs-page .docs-toc__list a:hover {
  border-left-color: var(--lp-green);
  color: var(--lp-green-deep);
}

/* ---- 条文・本文 / Article body ---- */

.docs-article {
  max-width: 46em;
}

.docs-article__section {
  scroll-margin-top: calc(68px + 2rem);
}

.docs-article__section + .docs-article__section {
  border-top: 1px solid var(--lp-line);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
}

.docs-article__heading {
  align-items: baseline;
  display: flex;
  font-family: var(--lp-font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 600;
  gap: var(--space-3);
  line-height: 1.4;
  margin-bottom: var(--space-4);
}

/* 条番号は明朝の緑で静かに立たせる / Article numbers stand quietly in green Mincho */
.docs-article__number {
  color: var(--lp-green);
  flex-shrink: 0;
  font-size: 0.85em;
  letter-spacing: 0.06em;
}

.docs-article__section p {
  font-size: 0.95rem;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.docs-article__section ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin-bottom: var(--space-3);
}

.docs-article__section li {
  font-size: 0.95rem;
  line-height: var(--leading-relaxed);
  padding-left: 1.1em;
  position: relative;
}

.docs-article__section li::before {
  color: var(--lp-green);
  content: "・";
  left: 0;
  position: absolute;
}

.docs-page .docs-article__section a {
  color: var(--lp-green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.docs-page .docs-article__section a:hover {
  color: var(--lp-green);
}

/* ---- ヘルプ：クイックスタート / Help: quick start ---- */

.help-quickstart {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.help-quickstart__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- ヘルプ：FAQ本体 / Help: FAQ body ---- */

.help-body {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem);
}

.help-body__inner {
  align-items: start;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: 230px minmax(0, 1fr);
}

.help-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 760px;
}

.help-section {
  scroll-margin-top: calc(68px + 2rem);
}

.help-section__title {
  align-items: center;
  display: flex;
  font-family: var(--lp-font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 600;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.help-section__icon {
  align-items: center;
  background: var(--lp-green-soft);
  border-radius: var(--radius-sm);
  color: var(--lp-green-deep);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.95rem;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.help-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ネイティブdetailsによるアコーディオン（JS不要）
   Native details-based accordion (no JS required) */
.help-qa {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-m);
  transition: border-color var(--transition-fast);
}

.help-qa[open] {
  border-color: var(--lp-green);
}

.help-qa__question {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  font-size: var(--text-md);
  font-weight: 700;
  gap: var(--space-3);
  list-style: none;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.5vw, 1.4rem);
  position: relative;
}

.help-qa__question::-webkit-details-marker {
  display: none;
}

.help-qa__question::before {
  color: var(--lp-green);
  content: "Q";
  font-family: var(--lp-font-display);
  font-weight: 600;
}

/* 開閉インジケーター（＋ → ×） / Open-close indicator (plus rotates to a cross) */
.help-qa__question::after {
  color: var(--lp-muted);
  content: "＋";
  font-weight: 400;
  margin-left: auto;
  transition: transform var(--transition-normal), color var(--transition-normal);
}

.help-qa[open] .help-qa__question::after {
  color: var(--lp-green-deep);
  transform: rotate(45deg);
}

.help-qa__answer {
  border-top: 1px dashed var(--lp-line);
  color: var(--lp-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  padding: clamp(0.9rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.4rem);
}

.help-qa__answer p + p {
  margin-top: var(--space-2);
}

.docs-page .help-qa__answer a {
  color: var(--lp-green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- お問い合わせ導線 / Contact strip ---- */

.docs-contact {
  background: var(--lp-paper-tint);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.docs-contact__copy {
  flex: 1 1 320px;
}

.docs-contact__title {
  font-family: var(--lp-font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.docs-contact__text {
  color: var(--lp-muted);
  font-size: var(--text-sm);
}

.docs-contact__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- レスポンシブ / Responsive ---- */

@media (max-width: 992px) {
  .docs-hero__kicker {
    display: none;
  }

  .docs-body__inner,
  .help-body__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-toc {
    position: static;
  }

  .help-quickstart__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
}