/*
 * よくある質問（support）個別ページ用。
 *
 * タイポグラフィと装飾は Web困りごとガイド（plugins/enol-content-publisher/assets/css/web-guide.css）
 * に合わせている。値の正本はあちら。行間2・字送り .015em・見出し800、
 * 補足は #6fc3ff、エノルの見解は #e6452e、注意喚起は #ffa53d という対応も同じ。
 */

/* ---------- レイアウト ---------- */
.enol_sp_layout {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .enol_sp_layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 3.5rem;
  }
  /* 目次が無いページは1カラム。読み幅が広がりすぎないよう上限を置く。 */
  .enol_sp_layout--single {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 目次が無いぶん幅を使うが、上限は置く。
   全幅にすると1行60文字を超えて日本語が読みにくくなるため、
   参照にしている Web困りごとガイド（約53文字/行）と同じ行長に合わせる。 */
.enol_sp_layout--single .enol_sp_main {
  max-width: 53rem;
  margin-inline: auto;
}

.enol_sp_main {
  min-width: 0;
  letter-spacing: .015em;
  line-height: 2;
}

/* ---------- 目次サイドバー（他テンプレートでも使う） ---------- */
.enol_toc {
  border-left: 1px solid rgba(255, 255, 255, .18);
  padding-left: 1.1rem;
}
/* スマホでは結論より先に目次が来ないよう、本文を先に出す。
   PCでは左カラムに戻し、スクロールに追従させる。 */
.enol_sp_layout > .enol_toc { order: 2; }
@media (min-width: 992px) {
  .enol_sp_layout > .enol_toc { order: 0; }
  .enol_toc {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}

.enol_toc_label {
  margin: 0 0 .9rem;
  color: rgba(255, 255, 255, .55);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
}
.enol_toc_list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.enol_toc_item { margin-bottom: .7rem; }
.enol_toc_item--h3 { padding-left: .9rem; }
.enol_toc_item a {
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.enol_toc_item a:hover,
.enol_toc_item a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .5);
}

/* ---------- ヘッダー ---------- */
.enol_sp_trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin-bottom: 1.2rem;
  color: rgba(255, 255, 255, .6);
  font-size: .85rem;
  font-weight: 700;
}
.enol_sp_trail a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
}
.enol_sp_trail a:hover { color: #fff; text-decoration: underline; }

.enol_sp_title {
  margin: 0 0 1.4rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.5;
}
@media (min-width: 992px) {
  .enol_sp_title { font-size: 2.2rem; }
}

.enol_sp_visual {
  margin: 0 0 2rem;
  border-radius: .75rem;
  overflow: hidden;
  line-height: 0;
}
.enol_sp_visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 結論（AI経由の着地で最初に読まれる1行） ---------- */
.enol_sp_answer {
  margin: 0 0 2.4rem;
  padding: 1.4rem 1.5rem;
  border-left: 4px solid #6fc3ff;
  background: rgba(255, 255, 255, .06);
}
.enol_sp_answer_label {
  margin: 0 0 .5rem;
  color: #6fc3ff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.enol_sp_answer_text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 2;
}

/* ---------- 本文 ---------- */
.enol_sp_body { overflow-wrap: anywhere; }
.enol_sp_body > :last-child { margin-bottom: 0; }
.enol_sp_body p {
  margin: 0 0 1.6em;
  line-height: 2;
}
.enol_sp_body h2 {
  margin: 3rem 0 1.1rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.5;
  scroll-margin-top: 6rem;
}
.enol_sp_body h2:first-child { margin-top: 0; }
.enol_sp_body h3 {
  margin: 2.2rem 0 .9rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.6;
  scroll-margin-top: 6rem;
}
.enol_sp_body ul,
.enol_sp_body ol {
  margin: 0 0 1.6em;
  padding-left: 1.3em;
}
.enol_sp_body li {
  margin-bottom: .6em;
  line-height: 2;
}
.enol_sp_body a {
  color: #6fc3ff;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.enol_sp_body a:hover { color: #a5d9ff; }
.enol_sp_body strong { font-weight: 800; }

/* ---------- 表 ---------- */
.enol_sp_body .table-responsive { margin: 0 0 1.8em; }
.enol_sp_body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.85;
}
.enol_sp_body th,
.enol_sp_body td {
  padding: .8em 1em;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
  vertical-align: top;
}
.enol_sp_body thead th {
  border-bottom-color: rgba(255, 255, 255, .38);
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}
.enol_sp_body tbody td:nth-child(2) {
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.enol_sp_body tbody th:first-child,
.enol_sp_body tbody td:first-child { width: 34%; }

/* ---------- 図解 ---------- */
.enol_figure {
  margin: 0 0 2em;
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .04);
  overflow-x: auto;
}
.enol_figure svg {
  width: 100%;
  height: auto;
  display: block;
  min-width: 460px;
}
.enol_figure_caption {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .65);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.8;
}

/* ---------- フッター ---------- */
.enol_sp_meta {
  margin: 2.5rem 0 0;
  color: rgba(255, 255, 255, .55);
  font-size: .82rem;
  font-weight: 700;
}
.enol_sp_cta {
  margin-top: 2.5rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .06);
}
.enol_sp_cta_title {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 800;
}
.enol_sp_cta_text {
  margin: 0 0 1.2rem;
  color: rgba(255, 255, 255, .85);
  font-size: .95rem;
  line-height: 1.9;
}
.enol_sp_cta_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.enol_sp_cta_link {
  color: rgba(255, 255, 255, .9);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: underline;
}
.enol_sp_cta_link:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .enol_toc { scroll-behavior: auto; }
}