/* ======================================================
   TDR GO — コンテンツ共通デザインシステム
   (FAQ Design.html 準拠 / ページCSSの後に読み込んで上書き)
   対象: .section / .ks-section / .tw-single-content の本文
   ====================================================== */

/* ───── h2: セクション見出し ───── */
.section > h2,
.ks-section > h2,
.tw-entry-content h2,
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 18px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.3;
}
.section > h2::before,
.ks-section > h2::before,
.tw-entry-content h2::before,
.section-title::before {
  content: '';
  width: 6px;
  align-self: stretch;
  min-height: 1.1em;
  flex: 0 0 auto;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--b), var(--p));
}

/* ───── h3: 中見出し ───── */
.section > h3,
.ks-section > h3,
.tw-entry-content h3,
.tw-single-content h3,
.forecast-summary-title,
.month-peak-title,
.wait-area-name,
.day-section-h2,
.day-section-h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 20px;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}
.section > h3::before,
.ks-section > h3::before,
.tw-entry-content h3::before,
.tw-single-content h3::before,
.forecast-summary-title::before,
.month-peak-title::before {
  content: '';
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--b), var(--p));
  transform: rotate(45deg);
}
/* 機能ページ小見出しは各ウィジェットのレイアウトに合わせ余白を調整 */
.month-peak-title,
.wait-area-name,
.day-section-h2,
.day-section-h3 { margin: 0; }
.forecast-summary-title { margin: 0 0 12px; }

/* ───── h4: 小見出し ───── */
.section > h4,
.ks-section > h4,
.tw-entry-content h4,
.tw-single-content h4 {
  display: inline-block;
  margin: 18px 0 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--b);
  letter-spacing: .02em;
  padding-bottom: 6px;
  border-bottom: 2px dotted color-mix(in oklab, var(--b) 35%, #fff);
}

/* ───── ul: 箇条書き ───── */
.section > ul,
.ks-section ul,
.tw-entry-content ul,
.tw-single-content ul,
.a-ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.section > ul > li,
.ks-section ul li,
.tw-entry-content ul li,
.tw-single-content ul li,
.a-ul li {
  position: relative;
  padding: 4px 0 4px 26px;
  color: var(--body-text);
  line-height: 1.7;
}
.section > ul > li::before,
.ks-section ul li::before,
.tw-entry-content ul li::before,
.tw-single-content ul li::before,
.a-ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: calc(4px + 0.93em);
  width: 7px;
  height: 7px;
  border-radius: 2px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--p);
}

/* ───── ol: 手順リスト ───── */
.section > ol,
.ks-section ol,
.tw-entry-content ol,
.tw-single-content ol,
.a-ol {
  counter-reset: step;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section > ol > li,
.ks-section ol li,
.tw-entry-content ol li,
.tw-single-content ol li,
.a-ol li {
  counter-increment: step;
  position: relative;
  padding: 3px 0 3px 40px;
  color: var(--body-text);
  line-height: 1.7;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.section > ol > li::before,
.ks-section ol li::before,
.tw-entry-content ol li::before,
.tw-single-content ol li::before,
.a-ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--b), var(--p));
}

/* ───── FAQ アコーディオン (既存 .faq > details を流用) ───── */
.faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.faq details {
  padding: 0;                 /* ページCSSの汎用 details パディングを打ち消す */
  border: 1px solid var(--line2);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] {
  border-color: color-mix(in oklab, var(--b) 32%, #fff);
  box-shadow: 0 10px 26px rgba(40,70,110,.08);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.45;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: '';
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D7DC8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
    var(--tint);
  transition: transform .3s, background .2s;
}
.faq summary:hover { color: var(--b); }
.faq details[open] summary::before {
  transform: rotate(90deg);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
    linear-gradient(120deg, var(--b), var(--p));
}
.faq details > :not(summary) {
  margin: 0;
  padding: 0 22px 20px 60px;
  color: var(--body-text);
  font-size: 15px;
  line-height: 1.7;
}

/* ───── チェックリスト (既存 .checklist / 任意 .a-checklist) ───── */
.checklist,
.a-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 16px;
  padding: 14px 16px;
  background: var(--tint);
  border: 1px solid var(--line2);
  border-radius: 14px;
}
.checklist-item,
.a-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink2);
  line-height: 1.5;
  user-select: none;
  transition: background .15s;
}
.checklist-item:hover,
.a-check:hover { background: #fff; }
.checklist-item input[type="checkbox"],
.a-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--b);
}

/* ───── 補足カラウト (既存 .callout / 任意 .a-note) ───── */
.callout,
.a-note {
  display: flex;
  gap: 12px;
  margin: 14px 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  background: color-mix(in oklab, var(--p) 7%, #fff);
  border: 1px solid color-mix(in oklab, var(--p) 28%, #fff);
  color: var(--ink2);
}
.callout::before,
.a-note .a-note-ico {
  content: '!';
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--p);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
}
.callout strong { color: var(--ink); font-weight: 800; }

@media (max-width: 560px) {
  .section > h2,
  .ks-section > h2,
  .tw-entry-content h2,
  .section-title { font-size: 21px; gap: 12px; }
  .faq summary { padding: 16px; font-size: 15px; }
  .faq details > :not(summary) { padding: 0 16px 16px 50px; }
}