/* ══════════════════════════════════════════
   使い方ガイド（/guide/）
   画面でも A4 印刷でも読めるようにする。印刷用の PDF はこのページから作る
   （docs/customer-guides/user-guide/README.md）。
   スマホ向けの指定は @media screen に閉じる。印刷幅（約 700px）にも効いてしまうため。
   ══════════════════════════════════════════ */

.guide-hero {
  padding: 132px 0 40px;
  background: var(--color-bg-subtle, #fffbf8);
  border-bottom: 1px solid var(--color-border, #ede5df);
  text-align: center;
}
.guide-hero__chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a0aec0);
  margin-bottom: 12px;
}
.guide-hero__title {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text, #1a202c);
  margin: 0 0 12px;
}
.guide-hero__lead {
  font-size: 1rem;
  color: var(--color-text-secondary, #4a5568);
  line-height: 1.8;
  margin: 0 auto 20px;
  max-width: 40em;
}
.guide-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--color-border, #ede5df);
  color: var(--color-text, #1a202c);
  background: #fff;
}
.guide-btn--primary {
  background: var(--gradient-orange);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--gradient-orange-glow);
}
.guide-btn svg { width: 18px; height: 18px; }
.guide-hero__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted, #a0aec0);
}

/* 本文と目次 */
.guide-body { padding: 48px 0 96px; }
.guide-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  max-width: 1080px;
  margin: 0 auto;
}
.guide-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  font-size: 0.88rem;
}
.guide-toc__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-text-muted, #a0aec0);
  margin: 0 0 10px;
}
.guide-toc ol { list-style: none; margin: 0; padding: 0; }
.guide-toc > ol > li { margin-bottom: 10px; }
.guide-toc a {
  color: var(--color-text-secondary, #4a5568);
  text-decoration: none;
  line-height: 1.5;
}
.guide-toc a:hover { color: var(--color-primary, #e8461e); }
.guide-toc > ol > li > a { font-weight: 700; color: var(--color-text, #1a202c); }
.guide-toc ol ol { margin: 6px 0 0 12px; }
.guide-toc ol ol li { margin-bottom: 4px; }

.guide-content { min-width: 0; color: var(--color-text, #1a202c); }
.guide-content p,
.guide-content li { font-size: 1rem; line-height: 1.85; }
.guide-content a { color: var(--color-primary, #e8461e); }

/* 章 */
.guide-chapter { margin-bottom: 72px; scroll-margin-top: 90px; }
.guide-chapter > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-text, #1a202c);
}
.guide-chapter__num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gradient-orange);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  flex: none;
}
.guide-chapter__lead {
  color: var(--color-text-secondary, #4a5568);
  margin: 14px 0 28px;
}

/* 節 */
.guide-section { margin: 44px 0 0; scroll-margin-top: 90px; }
.guide-section > h3 {
  font-size: 1.22rem;
  font-weight: 800;
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--color-primary, #e8461e);
  line-height: 1.4;
}
.guide-section h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 28px 0 10px;
}

/* 手順＋画面 */
.step-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 28px;
  align-items: start;
  margin: 16px 0 24px;
}
.step-block--wide { grid-template-columns: minmax(0, 1fr); }
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 14px 46px;
  min-height: 34px;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-text, #1a202c);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
  line-height: 1;
}
.steps > li > .step-note {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--color-text-secondary, #4a5568);
  line-height: 1.75;
}
.ui {
  display: inline-block;
  padding: 0 7px;
  margin: 0 1px;
  border-radius: 6px;
  background: var(--color-bg-alt, #fff7f2);
  border: 1px solid var(--color-border, #ede5df);
  font-weight: 700;
  font-size: 0.94em;
  line-height: 1.55;
  white-space: nowrap;
}
kbd {
  display: inline-block;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid #cfc8c2;
  border-bottom-width: 2px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.5;
}

/* 画面写真 */
.shot { margin: 0; text-align: center; }
.shot img { display: block; margin: 0 auto; height: auto; }
.shot--phone img {
  width: 100%;
  max-width: 248px;
  border-radius: 30px;
  border: 1px solid #e3dcd6;
  box-shadow: 0 10px 30px rgba(26, 32, 44, 0.10);
}
.shot--desktop img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e3dcd6;
  box-shadow: 0 10px 30px rgba(26, 32, 44, 0.08);
}
.shot--card img {
  width: 100%;
  max-width: 248px;
  border-radius: 16px;
  border: 1px solid #e3dcd6;
}
.shot--orb img {
  width: 100%;
  max-width: 248px;
  border-radius: 14px;
}
.shot figcaption {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted, #8a94a6);
  line-height: 1.5;
}
.shot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 18px 0 26px;
}
.shot-row .shot--phone img { max-width: 220px; }

/* 補足の枠 */
.callout {
  border-radius: 14px;
  padding: 16px 20px;
  margin: 18px 0;
  background: var(--color-bg-alt, #fff7f2);
  border: 1px solid var(--color-border, #ede5df);
}
.callout > p { margin: 0; font-size: 0.95rem; }
.callout > p + p,
.callout > ul + p { margin-top: 6px; }
.callout > ul { margin: 6px 0 0; padding-left: 1.2em; }
.callout > ul li { font-size: 0.95rem; line-height: 1.8; }
.callout__title { font-weight: 800; margin-bottom: 4px !important; }
.callout--tip { background: #f1f8f5; border-color: #cfe9dd; }
.callout--warn { background: #fff4ec; border-color: #f6cfb3; }

/* 表 */
.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 0.94rem;
}
.guide-table th,
.guide-table td {
  border: 1px solid var(--color-border, #ede5df);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.guide-table thead th { background: var(--color-bg-alt, #fff7f2); font-weight: 700; }
.guide-table .ui { white-space: normal; }
.guide-table td.c { text-align: center; }

/* 機能の一覧（はじめに） */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
}
.feature-list li {
  border: 1px solid var(--color-border, #ede5df);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.7;
}
.feature-list strong { display: block; margin-bottom: 2px; }

/* QR（インストール先） */
.qr-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 14px 0 20px;
}
.qr-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--color-border, #ede5df);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: var(--color-text, #1a202c) !important;
  font-size: 0.9rem;
  line-height: 1.6;
}
.qr-link img { width: 92px; height: 92px; image-rendering: pixelated; }
.qr-link strong { display: block; font-size: 0.98rem; }

/* 1.0.6 から変わるところの目印 */
.ver-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #3056a8;
  border: 1px solid #cfdcf6;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.7;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.guide-contact {
  border: 1px solid var(--color-border, #ede5df);
  border-radius: 16px;
  padding: 20px 24px;
  background: #fff;
}
.guide-contact dl { margin: 0; display: grid; grid-template-columns: 9em 1fr; gap: 8px 16px; }
.guide-contact dt { font-weight: 700; }
.guide-contact dd { margin: 0; }

/* 印刷のときだけ出す表紙・ヘッダー */
.print-only { display: none; }

@media screen and (max-width: 1024px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 760px; }
  .guide-toc {
    position: static;
    border: 1px solid var(--color-border, #ede5df);
    border-radius: 14px;
    padding: 18px 20px;
    background: var(--color-bg-alt, #fff7f2);
  }
}
@media screen and (max-width: 720px) {
  .guide-hero { padding: 112px 0 32px; }
  .step-block { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .step-block .shot--phone img { max-width: 240px; }
  .guide-chapter > h2 { font-size: 1.35rem; }
  .ui { white-space: normal; }
  .guide-table { font-size: 0.86rem; }
  .guide-table th, .guide-table td { padding: 8px; overflow-wrap: anywhere; }
  .guide-contact dl { grid-template-columns: 1fr; gap: 2px; }
  .guide-contact dd { margin-bottom: 10px; }
}

/* ── A4 印刷 ── */
@page { size: A4; margin: 14mm 13mm 14mm; }
@media print {
  html, body { background: #fff !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .legal-nav-lp, .footer-dark, .guide-hero, .guide-toc, .no-print { display: none !important; }
  .print-only { display: block; }
  .guide-body { padding: 0; }
  .guide-body > .container { max-width: none; padding: 0; }
  .guide-layout { display: block; max-width: none; }
  .guide-content p, .guide-content li { font-size: 10.5pt; line-height: 1.7; }
  .guide-content a { color: inherit; text-decoration: none; }

  .print-cover {
    height: 262mm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    break-after: page;
  }
  .print-cover__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13pt; }
  .print-cover__brand img { width: 30px; height: 30px; }
  .print-cover__title { font-size: 30pt; font-weight: 800; margin: 0 0 6mm; letter-spacing: -0.01em; }
  .print-cover__lead { font-size: 12pt; color: #4a5568; line-height: 1.8; margin: 0; }
  .print-cover__toc { border-top: 2px solid #1a202c; padding-top: 6mm; }
  .print-cover__toc ol { margin: 0; padding-left: 1.4em; font-size: 12pt; line-height: 2; }
  .print-cover__foot { display: flex; align-items: center; gap: 5mm; font-size: 9.5pt; color: #6b7280; line-height: 1.7; }
  .print-cover__qr { width: 22mm; height: 22mm; image-rendering: pixelated; }

  .guide-chapter { margin: 0; break-before: page; }
  .guide-chapter:first-of-type { break-before: auto; }
  .guide-chapter > h2 { font-size: 18pt; padding-bottom: 3mm; }
  .guide-chapter__num { width: 30px; height: 30px; font-size: 13pt; }
  .guide-chapter__lead { margin: 3mm 0 4mm; }
  .guide-section { margin-top: 7mm; }
  .guide-section > h3 { font-size: 13pt; break-after: avoid; }
  .guide-section h4 { break-after: avoid; }
  .step-block { grid-template-columns: minmax(0, 1fr) 40mm; gap: 7mm; break-inside: avoid; margin: 3mm 0 4mm; }
  .step-block--wide { grid-template-columns: minmax(0, 1fr); }
  .shot--phone img { max-width: 40mm; border-radius: 4.5mm; box-shadow: none; }
  .shot--card img { max-width: 40mm; border-radius: 3mm; }
  .shot--orb img { max-width: 52mm; }
  .shot--desktop { break-inside: avoid; margin: 3mm 0 5mm; }
  .shot--desktop img { max-width: 132mm; box-shadow: none; }
  .shot-row { break-inside: avoid; gap: 5mm; grid-template-columns: repeat(4, 1fr); margin: 3mm 0 5mm; }
  .shot-row .shot--phone img { max-width: 40mm; }
  .shot figcaption { font-size: 8pt; }
  .steps > li { padding-bottom: 2.5mm; }
  .steps > li::before { width: 24px; height: 24px; font-size: 9.5pt; }
  .steps > li { padding-left: 34px; }
  .callout, .guide-table, .feature-list li, .qr-link, .guide-contact { break-inside: avoid; }
  .guide-table { font-size: 9.5pt; }
  .feature-list { grid-template-columns: repeat(2, 1fr); gap: 3mm; }
  .qr-link img { width: 26mm; height: 26mm; }
  .ver-tag { border-color: #b8c8ec; }
}