/* ============================================================
   マニュアル群 (manual/*.html) — 共通スタイル
   共通トークン・共通コンポーネント(service-nav/header/footer/
   page-heading/breadcrumb/btn)は css/style.css を参照。
   ============================================================ */

/* アンカーリンクでの移動時、上部に100pxの余白を確保 */
html { scroll-padding-top: 100px; }
@media (max-width: 768px) {
  html { scroll-padding-top: 80px; }
}
/* ===== manual-index (マニュアルトップ: カテゴリ一覧) ===== */
.manual-index { background: #fff; padding: 100px 24px; }
.manual-index__grid {
  width: 1000px;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.manual-category {
  background: var(--bg-quaternary);
  border-radius: 4px;
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.manual-category__head { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.manual-category__icon { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.manual-category__title { font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.manual-category__list { display: flex; flex-direction: column; }
.manual-category__list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  transition: color .2s;
}
.manual-category__list li a:hover { color: var(--primary-main); }
.manual-category__list li a img { width: 14px; height: 14px; flex-shrink: 0; }
.manual-category__list li a:hover img { filter: var(--filter-icon-primary); }


/* ===== manual-support (FAQ・サポートフォーラム誘導) ===== */
.manual-support { background: var(--bg-secondary); padding: 48px 24px; display: flex; justify-content: center; }
.manual-support__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.manual-support__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.manual-support__title { font-size: 24px; font-weight: 700; line-height: 1.6; color: var(--text-primary); }
.manual-support__desc { font-size: 15px; line-height: 1.6; color: var(--text-primary); }
.manual-support__actions { display: flex; gap: 40px; }
.manual-support__btn { width: 200px; height: 56px; padding-right: 10px; justify-content: center; font-size: 15px; position: relative; }
.manual-support__btn-icon { width: 16px; height: 16px; flex-shrink: 0; filter: var(--filter-icon-white); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 10; }

/* ===== manual-detail (マニュアル詳細ページ共通レイアウト) ===== */
.manual-detail { background: #fff; padding: 100px 24px; }
.manual-detail__layout {
  width: 1000px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: center;
}

/* --- sidebar --- */
.manual-detail__sidebar { display: flex; flex-direction: column; gap: 56px; flex-shrink: 0; width: 252px; }
.manual-nav { display: flex; flex-direction: column; align-items: stretch; }
.manual-nav__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 47px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-secondary);
  cursor: pointer;
  user-select: none;
}
.manual-nav__category-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.manual-nav__chevron { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .3s ease; }
.manual-nav__category:hover .manual-nav__category-title { color: var(--primary-main); }
.manual-nav__category:hover .manual-nav__chevron { filter: var(--filter-icon-primary-dark); }
.manual-nav__category--active .manual-nav__chevron { transform: rotate(180deg); }
.manual-nav__group { display: flex; flex-direction: column; overflow: hidden; transition: max-height .3s ease; }
.manual-nav__item {
  display: block;
  padding: 15px 12px 15px 24px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-secondary);
  transition: color .2s;
}
.manual-nav__item:hover { color: var(--primary-main); }
.manual-nav__item--current { background: var(--bg-nav-active); color: var(--primary-main); }
.manual-nav__back {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-primary);
  transition: color .2s;
}
.manual-nav__back img { width: 14px; height: 14px; flex-shrink: 0; transform: rotate(90deg); }
.manual-nav__back:hover { color: var(--primary-main); }
.manual-nav__back:hover img { filter: var(--filter-icon-primary-dark); }

/* --- content --- */
.manual-detail__content { flex: 1; min-width: 0; }
.manual-detail__title {
  width: 700px;
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: 40px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
}
.manual-detail__intro { display: flex; flex-direction: column; gap: 32px; padding-bottom: 56px; }
.manual-detail__lead { font-size: 16px; line-height: 1.6; color: var(--text-primary); }
.manual-detail__note { display: block; padding-left: 1em; text-indent: -1em; }
.manual-detail__default { display: flex; flex-wrap: wrap; align-items: center; }
.manual-detail__default-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--primary-main); flex-shrink: 0; }
.manual-detail__default-dot--muted { background: #929292; }
.manual-detail__default-label { margin: 0 24px 0 8px; font-weight: 600; font-size: 16px; line-height: 1.8; color: var(--text-primary); }
.manual-detail__default-desc { font-size: 13px; line-height: 1.8; color: var(--text-primary); }


.manual-heading-lg { display: flex; flex-direction: column; gap: 16px; }
.manual-heading-lg__title { font-size: 26px; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.manual-heading-lg__rule { position: relative; display: block; height: 4px; border-radius: 10px; background: var(--border-default); }
.manual-heading-lg__rule::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 96px; height: 4px;
  border-radius: 10px;
  background: var(--gradient-brand);
}

/* 本文 */
.manual-detail__body { display: flex; flex-direction: column; gap: 32px; padding: 32px 0 56px; }
.manual-detail__body > p { font-size: 16px; line-height: 1.6; color: var(--text-primary); word-break: break-all; }

/* Heading/h3 相当（縦バー + 20px太字）: セクション見出し */
.manual-heading-md { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.manual-heading-md__bar { width: 4px; height: 30px; border-radius: 10px; background: var(--gradient-brand); flex-shrink: 0; }
.manual-heading-md__title { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--text-primary); }

/* List(見出し)相当（丸ドット + 18px太字）: サブセクション見出し */
.manual-heading-sm { display: flex; align-items: center; gap: 12px; width: 100%; }
.manual-heading-sm__dot { width: 12px; height: 12px; border-radius: 10px; background: var(--gradient-brand); flex-shrink: 0; }
.manual-heading-sm__title { font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.64px; color: var(--text-primary); }

/* 設定項目の説明リスト（見出し+説明文の縦積みリスト） */
.manual-detail__list { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.manual-detail__list-term {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--text-primary);
}
.manual-detail__list-dot {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background: var(--text-primary);
}
.manual-detail__list-desc { padding-left: 32px; font-size: 16px; line-height: 1.6; color: var(--text-primary); margin-top: 4px; }
.manual-detail__list-items {
  list-style: disc;
  padding-left: 56px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* 設定項目の説明リスト（軽量：丸ドット + 16px通常） */
.manual-detail__list-light { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.manual-detail__list-light .manual-detail__list-term {
  font-weight: 400;
}
.manual-detail__list--compact { gap: 4px; }
.manual-detail__list-note {
  padding-top: 4px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- 見出し＋リストのまとまり --- */
.manual-detail__group { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.manual-detail__group-heading { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--text-primary); }
.manual-detail__group-note { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--text-primary); }

/* --- ドット付きリスト(除外プラグイン名) --- */
.manual-list { display: flex; flex-direction: column; }
.manual-list__item {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
}
.manual-list__item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background: var(--text-primary);
}

/* スクリーンショット画像 */
.manual-detail__screenshot {
  display: block;
  width: 608px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
}

/* 本文中のインラインリンク（他マニュアルページへの参照） */
.manual-detail__link { color: var(--primary-main); text-decoration: underline; }
.manual-detail__link:hover { opacity: 0.8; }

/* 外部リンクアイコン */
.manual-detail__ext-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-left: 2px; filter: var(--filter-icon-primary-dark);}

/* 設定項目のテーブル */
.manual-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.5; }
.manual-table__col--key { width: 256px; }
.manual-table th {
  background: var(--text-secondary);
  color: var(--text-white);
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--text-secondary);
}
.manual-table th:first-child { border-right: 1px solid var(--text-white); }
.manual-table td {
  border: 1px solid var(--border-default);
  padding: 12px 16px;
  color: var(--text-primary);
  vertical-align: top;
}
.manual-table td:first-child { background: var(--bg-tertiary); font-weight: 700; }
.manual-table__note { display: inline-block; margin-top: 2px; font-size: 14px; font-weight: 400; }

/* --- step group (番号付き手順＋スクリーンショット) --- */
.manual-step-group { display: flex; flex-direction: column; gap: 16px; width: 700px; max-width: 100%; }
.manual-steps { padding-left: 24px; font-size: 16px; line-height: 1.6; color: var(--text-primary); word-break: break-all; }
.manual-steps li { padding-left: 4px; }
.manual-figure { padding: 16px 24px 20px; }
.manual-figure img { display: block; max-width: 100%; height: auto; }
.manual-figure__img--bordered { border: 1px solid var(--border-default); }
.manual-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--text-tertiary); }

/* --- callout / note box (注意書き・補足) --- */
.manual-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--bg-primary);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-primary);
}
.manual-callout__title { font-size: 15px; font-weight: 700; line-height: 1.5; width: 100%; }
.manual-callout__list { display: flex; flex-direction: column; gap: 8px; }
.manual-callout__item { padding-left: 1em; text-indent: -1em; font-size: 15px; line-height: 1.6; }
.manual-callout__content { font-size: 15px; line-height: 1.6; }

@media (max-width: 1040px) {
  .manual-index__grid { gap: 32px; }
  .manual-detail__layout { gap: 40px; }
  .manual-detail__sidebar { width: 236px; }
  .manual-detail__title { font-size: clamp(24px, 3.4vw, 30px); }
}

/* ============================================================
   SP layout (max-width: 768px)
   マニュアル詳細ページ共通テンプレート(disable_login / 1226:35383 基準)
   + マニュアルトップ(index / 1221:43179)。768px以下でのみ適用。
   これらのクラスは manual/*.html 全19ページ共通のテンプレートとして、
   disable_login.php で確立したものを他ページへ機械的に展開できる
   （個別ページ固有の差分のみ css/manual-<slug>.css 側で追加対応する）。
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Breadcrumb位置の入れ替え ----
     Figma SP (1226:35383 / 1221:43179 とも) では breadcrumb が
     Page heading直後ではなく、本文・CTA(manual-support)の後・
     footer直前に配置されている（デスクトップと表示順が異なる）。
     breadcrumb自体のCSS/HTML(style.css側)は変更せず、body を
     縦積みflexにしてorderで並び替えるだけに留める
     （768px以下でのみ有効。他の要素はorder未指定=0のままなので
     DOM順を維持し、breadcrumbとfooterだけを末尾へ送る）。 */
  body { display: flex; flex-direction: column; }
  .breadcrumb { order: 1; }
  .footer { order: 2; }

  /* ---- manual-index (マニュアルトップ: カテゴリ一覧) ---- */
  .manual-index { padding: 64px 0; }
  .manual-index__grid { width: 100%; grid-template-columns: 1fr; padding-inline: 20px; gap: 24px; } /* 1カラム化は既存の@media(1040px)で適用済み */

  .manual-category { padding: 16px 24px 24px; gap: 8px; }
  .manual-category__head { gap: 12px; }
  .manual-category__icon { width: 20px; height: 20px; }
  .manual-category__title { font-size: 18px; }

  /* ---- manual-support (FAQ・サポートフォーラム誘導。index/detail共通) ---- */
  .manual-support__title { font-size: 22px; }
  .manual-support__actions { flex-direction: column; gap: 24px; }

  /* ---- manual-detail (マニュアル詳細ページ共通レイアウト) ---- */
  .manual-detail { padding: 64px clamp(16px, 3.4vw, 24px); }

  /* サイドバー(カテゴリナビ)はFigma SPデザインに存在しないため非表示。
     「マニュアルトップに戻る」リンクもサイドバー内にあるため同時に消える。 */
  .manual-detail__sidebar { display: none; }

  /* .manual-detail__layout はデスクトップの横並び用に align-items:flex-start
     を持つ。@media(1040px)でflex-direction:columnになった際そのまま残ると、
     縦積みモードでは「幅いっぱいに伸ばす(stretch)」ではなく「内容の幅に
     合わせる」挙動になり、.manual-detail__content が子要素(タイトル700px等)
     の内容幅まで広がってページ全体が横スクロールしてしまう。768px以下では
     サイドバーを隠して.manual-detail__contentが唯一の子になるため、
     stretchに戻して確実に幅100%まで広げる。 */
  .manual-detail__layout { align-items: stretch; }

  .manual-detail__title { font-size: 24px; }

  .manual-heading { gap: 12px; }
  .manual-heading-lg__title { font-size: 22px; }
  .manual-heading-md__title { font-size: 18px; }
  .manual-heading-sm__title { font-size: 16px; }

  .manual-callout { padding: 20px; }

  /* 設定項目テーブル: デスクトップの「項目/選択肢」2カラム表から、
     キー行(グレー背景)→値行(白背景)を縦に積むカード形式に変更。
     ヘッダー行(thead)はFigmaのSPデザインに存在しないため非表示。 */
  .manual-table { font-size: 14px; }
  .manual-table__note { font-size: 13px; }
  .manual-table,
  .manual-table tbody,
  .manual-table tr,
  .manual-table td { display: block; width: 100%; }
  .manual-table thead { display: none; }
  .manual-table tbody td { margin-top: -1px; } /* 1pxボーダーの二重線を防ぐ */
  .manual-table tbody tr:first-child td:first-child { margin-top: 0; }

  /* スクリーンショット: Figmaでは幅いっぱいに見せるため右/下の
     余白を詰める。ただしサイドメニュー項目を赤枠で示す小さいスクショ
     (.manual-figure__frameでラップされているもの)は元の四方余白のまま。 */
  .manual-figure { padding: 16px 0 0 24px; }
  .manual-figure:has(.manual-figure__frame) { padding: 16px 24px 20px; }
}