/* ============================================================
   North AI Works — トップページ固有のスタイル
   トークンは tokens.css。ここで色や書体を直書きしない。

   規範（/DESIGN.md より）:
   - 番号付きマーカー（01/02/03）を装飾で使わない
   - 同型カードを3枚横並びにしない（AI生成UIの判別パターン）
   - 影を使わない / 角丸は最大4px / グラデーションを使わない
   ============================================================ */

/* --- ③ お悩み ------------------------------------------------ */
/* カードを並べず、罫線で区切ったリストにする。
   番号は付けない（順序に意味がないため装飾になる） */
.naw-problems {
  margin-top: var(--sp-xl);
  border-top: 1px solid var(--color-line);
}

.naw-problem {
  padding-block: var(--sp-lg);
  border-bottom: 1px solid var(--color-line);
  font-size: 1.0625rem;
  max-width: 42em;
}

/* --- ④ 伴走の説明 -------------------------------------------- */
/* ④は白地。主力商品の枠は罫線で示す（面の色分けは使わない） */
.naw-fde {
  margin-top: var(--sp-xl);
  padding: var(--sp-xl);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
}

.naw-fde h3 { margin-bottom: var(--sp-md); }

/* 入口商品。カード3枚並べを避け、横一列の罫線区切りにする */
.naw-entry-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: var(--sp-xl);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}

.naw-entry-list li {
  padding: var(--sp-lg);
  border-bottom: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
}

.naw-entry-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .naw-entry-list { grid-template-columns: 1fr; }
}

/* --- ⑤ 選ばれる理由 ------------------------------------------ */
/* 同型カード3枚の横並びを避け、1枚を大きく2枚を小さくする非対称配置。
   signature（中央軸の対称）に対する意図的な破調でもある */
.naw-reasons {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-xl);
  margin-top: var(--sp-xl);
  align-items: start;
}

.naw-reason--lead {
  grid-row: span 2;
  background: var(--color-sage);
  padding: var(--sp-xl);
  border-radius: var(--r-md);
}

/* セージの面に載せてよい文字は fg のみ（4.58 AA）。
   muted は3.35、白は1.94で不足する */
.naw-reason--lead h3,
.naw-reason--lead p { color: var(--color-fg); }

.naw-reason h3 { margin-bottom: var(--sp-sm); }

.naw-reason:not(.naw-reason--lead) {
  padding-left: var(--sp-lg);
  border-left: 2px solid var(--color-line);
}

@media (max-width: 768px) {
  .naw-reasons { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .naw-reason--lead { grid-row: auto; }
}

/* --- ⑥ 料金 -------------------------------------------------- */
.naw-price {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-xl);
}

.naw-price th,
.naw-price td {
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: baseline;
}

.naw-price th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
}

.naw-price td {
  text-align: right;
  white-space: nowrap;
  font-size: 0.9375rem;
}

.naw-price-unit {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
  margin-left: 2px;
}

/* 「主力」バッジ。accent は CTA 専用なので muted の文字で示す */
.naw-price-tag {
  display: inline-block;
  margin-left: var(--sp-sm);
  padding: 2px 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  white-space: nowrap;
}

/* .naw-note は site.css に定義 */

@media (max-width: 600px) {
  .naw-price th,
  .naw-price td { display: block; text-align: left; }
  .naw-price th { border-bottom: 0; padding-bottom: var(--sp-xs); }
  .naw-price td { padding-top: 0; }
}

/* --- ⑦ 会社概要 ---------------------------------------------- */
/* .naw-profile は site.css に定義（page-contact.php でも使うため） */

/* --- ⑧ FAQ --------------------------------------------------- */
.naw-faq { margin-top: var(--sp-xl); border-top: 1px solid var(--color-line); }

.naw-faq details { border-bottom: 1px solid var(--color-line); }

.naw-faq summary {
  padding: var(--sp-lg) var(--sp-xl) var(--sp-lg) 0;
  cursor: pointer;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
}

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

.naw-faq summary::after {
  content: '';
  position: absolute;
  right: var(--sp-sm);
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}

.naw-faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .naw-faq summary::after { transition: none; }
}

.naw-faq details p {
  padding-bottom: var(--sp-lg);
  color: var(--color-muted);
}

/* --- ⑨ 最終CTA ----------------------------------------------- */
/* signature の終点。幅を最も狭くし、accent を中央に置いて消失点へ戻す */
.naw-final { text-align: center; }
.naw-final h2 { margin-inline: auto; }
.naw-final .naw-lead { margin-inline: auto; }
.naw-final-actions { justify-content: center; }
.naw-final .naw-note { margin-top: var(--sp-lg); }