/* Tech会「よくあるご質問」(tech/user/faqs#index)。bd ba3-62c。
 * 見た目は確認用 HTML (docs/design/tech-faq-v2/preview/faq_v2_preview.html) に合わせる。
 * 色はここで役割名のトークンとして定義し、下の規則では var() だけを使う。
 * 1rem = 10px (html の font-size が 62.5%) を前提にしている。 */
.tech-faq {
  --tech-faq-primary: #205dc9;
  --tech-faq-primary-dark: #264d90;
  --tech-faq-primary-tint: #e7edf9;
  --tech-faq-ink: #333333;
  --tech-faq-muted: #777777;
  --tech-faq-line: #d7d7d7;
  --tech-faq-panel: #f5f5f5;
  --tech-faq-surface: #ffffff;

  background: var(--tech-faq-surface);
  color: var(--tech-faq-ink);
  font-size: 1.6rem;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 1320px;
  padding: 4rem 5rem 4rem;
}

@media (max-width: 700px) {
  .tech-faq {
    padding: 2.4rem 2rem 3.2rem;
  }
}

.tech-faq a {
  overflow-wrap: anywhere;
}

/* ページ見出し */
.tech-faq .tech-faq_header {
  border-bottom: 2px solid var(--tech-faq-primary);
  padding: 0 0 2rem;
}

.tech-faq .tech-faq_title {
  color: var(--tech-faq-primary);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0;
}

/* 節への目次 */
.tech-faq .tech-faq_toc {
  border-bottom: 1px solid var(--tech-faq-line);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.5rem;
  gap: 0.8rem 2rem;
  padding: 2rem 0;
}

.tech-faq .tech-faq_toc a {
  border-bottom: 2px solid transparent;
  padding: 0.4rem 0;
  text-decoration: none;
}

.tech-faq .tech-faq_toc a:hover {
  border-bottom-color: var(--tech-faq-primary);
}

/* お問い合わせ先を横に置く分、このページだけ外枠の幅を広げて図の大きさを保つ。
 * :has() に未対応のブラウザでは従来の幅 (1100px) のままで、表示は崩れない。 */
.tech_user .main-content #content .content:has(.tech-faq) {
  max-width: 1360px;
}

/* 本文 (左) と、常に見えるお問い合わせ先 (右)。狭い画面では、お問い合わせ先を本文の上に置く */
.tech-faq .tech-faq_layout {
  align-items: start;
  display: grid;
  gap: 3.2rem;
  grid-template-columns: minmax(0, 1fr) 30rem;
}

.tech-faq .tech-faq_main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.tech-faq .tech-faq_side {
  display: grid;
  gap: 1.6rem;
  grid-column: 2;
  grid-row: 1;
  margin-top: 2.8rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  position: sticky;
  top: 2rem;
}

.tech-faq .tech-faq_side-block {
  background: var(--tech-faq-primary-tint);
  border-left: 4px solid var(--tech-faq-primary);
  border-radius: 4px;
  font-size: 1.4rem;
  padding: 1.6rem;
}

.tech-faq .tech-faq_side-title {
  border: 0;
  color: var(--tech-faq-primary-dark);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.8rem;
  padding: 0;
}

.tech-faq .tech-faq_side-block p {
  margin: 0 0 0.8rem;
}

.tech-faq .tech-faq_side-block p:last-child {
  margin-bottom: 0;
}

.tech-faq .tech-faq_side-note {
  color: var(--tech-faq-muted);
  font-size: 1.3rem;
}

@media (max-width: 991px) {
  .tech-faq .tech-faq_layout {
    display: block;
  }

  .tech-faq .tech-faq_side {
    margin-top: 2rem;
    max-height: none;
    overflow-y: visible;
    position: static;
  }
}

/* お手続きの場所 */
.tech-faq .tech-faq_overview {
  background: var(--tech-faq-panel);
  border: 1px solid var(--tech-faq-line);
  border-radius: 6px;
  margin: 2.8rem 0 0.8rem;
  padding: 2rem;
}

.tech-faq .tech-faq_overview-title {
  border: 0;
  color: var(--tech-faq-primary);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.8rem;
  padding: 0;
}

.tech-faq .tech-faq_overview p {
  margin: 0;
}

/* 図 */
.tech-faq .tech-faq_figure {
  margin: 1.6rem 0 0;
}

.tech-faq .tech-faq_figure img {
  background: var(--tech-faq-surface);
  border: 1px solid var(--tech-faq-line);
  border-radius: 4px;
  display: block;
  height: auto;
  width: 100%;
}

/* 節 */
.tech-faq .tech-faq_section {
  padding: 3.6rem 0 0.8rem;
  scroll-margin-top: 8rem;
}

.tech-faq .tech-faq_section-title {
  background: var(--tech-faq-primary);
  border: 0;
  border-radius: 4px;
  color: var(--tech-faq-surface);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1.6rem;
  padding: 1rem 1.6rem;
}

/* 質問と回答 (details 要素。JavaScript は使わない) */
.tech-faq .tech-faq_item {
  background: var(--tech-faq-surface);
  border: 1px solid var(--tech-faq-line);
  border-radius: 6px;
  margin: 0 0 1.2rem;
}

.tech-faq .tech-faq_question {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 1.7rem;
  font-weight: 700;
  gap: 1.2rem;
  list-style: none;
  padding: 1.4rem 1.6rem;
}

.tech-faq .tech-faq_question::-webkit-details-marker {
  display: none;
}

.tech-faq .tech-faq_question::after {
  color: var(--tech-faq-primary);
  content: "＋";
  font-weight: 400;
  margin-left: auto;
}

.tech-faq .tech-faq_item[open] > .tech-faq_question::after {
  content: "－";
}

.tech-faq .tech-faq_question:focus-visible {
  outline: 2px solid var(--tech-faq-primary);
  outline-offset: 2px;
}

.tech-faq .tech-faq_question-text {
  flex: 1 1 auto;
  white-space: pre-line;
}

.tech-faq .tech-faq_mark {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  margin-top: 0.2rem;
  width: 28px;
}

.tech-faq .tech-faq_mark-q {
  background: var(--tech-faq-primary);
  color: var(--tech-faq-surface);
}

.tech-faq .tech-faq_mark-a {
  background: var(--tech-faq-panel);
  border: 1px solid var(--tech-faq-line);
  color: var(--tech-faq-primary-dark);
}

.tech-faq .tech-faq_answer {
  border-top: 1px dashed var(--tech-faq-line);
  display: flex;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem 1.6rem;
}

.tech-faq .tech-faq_answer-body {
  flex: 1 1 auto;
  min-width: 0;
}

.tech-faq .tech-faq_answer-body p {
  margin: 0 0 1rem;
}

.tech-faq .tech-faq_answer-body ol,
.tech-faq .tech-faq_answer-body ul {
  margin: 0 0 1rem;
  padding-left: 2.4rem;
}

.tech-faq .tech-faq_answer-body ol {
  list-style: decimal;
}

.tech-faq .tech-faq_answer-body ul {
  list-style: disc;
}

.tech-faq .tech-faq_answer-body li {
  margin: 0.2rem 0;
}

.tech-faq .tech-faq_answer-body h4 {
  color: var(--tech-faq-primary-dark);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1rem 0 0.4rem;
}

@media (max-width: 700px) {
  .tech-faq .tech-faq_title {
    font-size: 2.4rem;
  }

  .tech-faq .tech-faq_question {
    font-size: 1.5rem;
  }
}

@media print {
  .tech-faq .tech-faq_question::after {
    display: none;
  }

  .tech-faq .tech-faq_item {
    break-inside: avoid;
  }
}