/* Scoped to the guide so shared site styles do not change other pages. */
.howto-page { margin: 0; padding: 0; max-width: none; background: #f5f7fa; color: #222b36; font-family: 'Noto Sans JP', sans-serif; line-height: 1.85; }
.howto-page *, .howto-page *::before, .howto-page *::after { box-sizing: border-box; }
.howto-page a { color: #155da6; text-underline-offset: 4px; }
.howto-page a:focus-visible, .howto-page summary:focus-visible { outline: 3px solid #1674c6; outline-offset: 5px; }
.howto-page [id] { scroll-margin-top: 24px; }
.howto-page .skip-link { position: absolute; top: -80px; left: 16px; z-index: 10; padding: 10px 16px; background: white; }
.howto-page .skip-link:focus { top: 12px; }
.guide-shell { width: min(100% - 40px, 1000px); margin: 0 auto; padding: 24px 0 40px; }
.guide-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; font-size: 14px; }
.guide-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; }
.howto-page .guide-brand { color: #222b36; }
.guide-brand img { width: 36px; height: 36px; }
.guide-hero { text-align: center; }
.howto-page .eyebrow { margin: 0 0 10px; color: #637186; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.howto-page h1 { margin: 0 0 16px; color: #222b36; font-size: clamp(30px, 4vw, 42px); line-height: 1.4; text-shadow: none; }
.howto-page .hero-lead { margin: 0 0 12px; color: #d60013; font-size: 17px; font-weight: 700; }
.guide-hero > p:last-of-type { margin: 0 auto 26px; color: #526173; font-size: 15px; }
.howto-page figure { margin: 20px 0; }
.howto-page figure img { display: block; max-width: 100%; height: auto; }
.howto-page figcaption { padding: 12px 16px; color: #526173; font-size: 13px; }
.howto-page .watch-example { max-width: 850px; margin-inline: auto; overflow: hidden; border: 1px solid #dbe1e8; border-radius: 16px; background: white; box-shadow: 0 12px 30px #2334480d; }
/* Present the supplied screenshot's video/chat area, without changing its pixels. */
.watch-example-window { position: relative; overflow: hidden; aspect-ratio: 1317 / 625; background: #1c1f25; }
.watch-example-window img { position: absolute; width: 100%; top: 0; }
.watch-example figcaption { display: flex; justify-content: center; gap: 32px; }
.watch-example b { margin-right: 6px; color: #d60013; }
.guide-paths { margin: 42px 0 28px; }
.howto-page h2 { margin: 0 0 20px; font-size: clamp(21px, 3vw, 27px); line-height: 1.5; color: #222b36; }
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.howto-page .path-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border: 1px solid #d5dce6; border-top: 4px solid #69778b; border-radius: 12px; background: white; color: #222b36; text-decoration: none; }
.howto-page .path-card:hover { background: #f0f5fb; border-color: #64748b; }
.path-card strong { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; }
.path-card > span:last-child { font-size: 13px; color: #526173; }
.path-kicker { font-size: 12px; font-weight: 700; }
.howto-page .friend-path { border-top-color: #1674c6; }
.howto-page .public-path { border-top-color: #e50018; }
.friend-path .path-kicker { color: #155da6; }
.public-path .path-kicker { color: #c30013; }
.guide-shortcuts { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 18px 0 0; font-size: 14px; }
.guide-shortcuts a { padding: 4px 0; }
.guide-section { margin: 24px 0; padding: 34px; border: 1px solid #dfe4eb; border-radius: 16px; background: #fff; }
.guide-section > p { margin: 0 0 20px; }
.guide-section.preparation { background: #f1f7fd; border-color: #c9dff3; }
.requirement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0 0 20px; }
.requirement-grid li { display: flex; flex-direction: column; gap: 6px; }
.requirement-grid span { font-size: 14px; color: #526173; }
.howto-page .guide-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 48px; border-radius: 9px; color: white; text-decoration: none; font-weight: 700; text-align: center; }
.guide-button.blue { background: #176db9; }
.guide-button.red { background: #dc0015; }
.guide-button:hover { filter: brightness(.92); }
.howto-page .small-note { font-size: 13px; color: #526173; }
.guide-section > .small-note { margin: 16px 0 0; }
.guide-details { border-top: 1px solid #dfe4eb; }
.guide-details:last-child { border-bottom: 1px solid #dfe4eb; }
.guide-details summary { cursor: pointer; padding: 18px 4px; font-size: 15px; font-weight: 700; }
.guide-details summary:hover { color: #155da6; }
.details-body { padding: 0 4px 20px; }
.details-body p { margin: 0 0 12px; }
.details-body p:last-child { margin-bottom: 0; }
.preparation > .guide-details { margin-top: 24px; }
.store-example { border: 1px solid #dfe4eb; border-radius: 10px; overflow: hidden; background: white; }
.store-example-window { position: relative; overflow: hidden; aspect-ratio: 1185 / 160; }
.store-example-window img { position: absolute; width: 100%; top: -62.5%; }
.guide-steps { list-style: none; margin: 24px 0; padding: 0; counter-reset: step; }
.guide-steps > li { position: relative; padding: 0 0 28px 52px; counter-increment: step; }
.guide-steps > li:last-child { padding-bottom: 0; }
.guide-steps > li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 34px; height: 34px; background: #edf1f6; border-radius: 50%; color: #364152; font-size: 16px; font-weight: 700; }
.friend-section .guide-steps > li::before { background: #e8f3ff; color: #155da6; }
.public-section .guide-steps > li::before { background: #ffedef; color: #bf0012; }
.howto-page h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
.howto-page .guide-steps h4 { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
.howto-page .guide-subtitle { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid #dfe4eb; font-size: 19px; }
.guide-section > .guide-button { margin-top: 24px; }
.guide-steps p { margin: 0; color: #526173; font-size: 15px; }
.mode-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.mode-pair > div { padding: 16px; background: #f5f7fa; border-radius: 8px; }
.mode-pair b { display: block; margin-bottom: 4px; font-size: 14px; }
.mode-pair p { margin: 0; font-size: 14px; }
.guide-section .guide-tip { padding: 16px 18px; margin: 20px 0 0; border-left: 3px solid #7794b3; border-radius: 0 8px 8px 0; background: #f5f7fa; font-size: 14px; }
.guide-section .guide-tip + p { margin-top: 16px; font-size: 14px; }
/* 手順の動画の並べ方。動画そのものの見た目は guide-clips.css */
.clip-block { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 24px; }
.clip-text p { margin: 0 0 12px; }
.details-body .clip-block { margin-top: 0; align-items: start; }
.clip-text p:last-child { margin-bottom: 0; }
.clip-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 28px; align-items: start; }
.clip-steps .guide-clip { position: sticky; top: 20px; margin-top: 24px; }
.clip-steps .name-example { max-width: 100%; border: 1px solid #dfe4eb; border-radius: 10px; }
.mode-example { overflow: hidden; border: 1px solid #dfe4eb; border-radius: 10px; background: #f5f7fa; }
.mode-example img { width: 100%; }
.name-example { max-width: 575px; }
.panel-open-example { max-width: 419px; }
.panel-open-example-window { position: relative; overflow: hidden; aspect-ratio: 419 / 250; }
.panel-open-example-window img { position: absolute; width: 100%; top: -16%; }
.ending-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ending-grid p { margin: 0; font-size: 14px; }
.ending-grid img { display: block; width: 100%; max-width: 383px; height: auto; margin-top: 16px; border: 1px solid #dbe3ef; border-radius: 8px; }
@media (min-width: 681px) {
  .ending-grid { row-gap: 0; }
  .ending-grid > article { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  .ending-grid img { align-self: start; }
}
.guide-footer { padding: 16px 0 0; text-align: center; }
.guide-footer > p:first-child { font-weight: 700; }
.guide-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.guide-footer > a { display: inline-block; margin: 8px 0 20px; }
@media (max-width: 680px) {
  .guide-shell { width: calc(100% - 28px); padding-top: 18px; }
  .guide-nav { margin-bottom: 28px; font-size: 12px; gap: 8px; }
  .guide-brand { gap: 6px; }
  .guide-brand img { width: 28px; height: 28px; }
  .guide-hero > p:last-of-type { font-size: 14px; }
  .desktop-break { display: none; }
  .watch-example { border-radius: 10px; }
  .watch-example figcaption { flex-direction: column; gap: 0; padding: 10px; text-align: left; font-size: 12px; }
  .guide-paths { margin-top: 28px; }
  .path-grid, .requirement-grid, .ending-grid, .mode-pair, .clip-block, .clip-steps { grid-template-columns: 1fr; }
  .clip-steps .guide-clip { position: static; order: -1; margin: 16px auto 0; }
  .guide-clip { margin-inline: auto; }
  .howto-page .path-card { padding: 16px; gap: 6px; }
  .guide-shortcuts { gap: 6px 18px; }
  .guide-section { padding: 24px 18px; border-radius: 12px; }
  .guide-steps > li { padding-left: 40px; }
  .guide-steps > li::before { width: 28px; height: 28px; font-size: 14px; }
  .howto-page h3 { font-size: 16px; }
  .guide-actions { flex-direction: column; }
  .guide-button { width: 100%; font-size: 14px; }
  .guide-details summary { font-size: 14px; }
}