@charset "utf-8";

/* ひとりの仕事室 — support v9（案内3ページと、全ページ共通のフッター案内）
   styles.css / library-v8.css の上に重ねる追加分だけを書く。既存CSSは変更しない。

   効く範囲を次の4つに限る。
     1. .foot-nav          … v9で足したフッターの案内（全ページ共通。既存要素には触れない）
     2. .support-page      … 新規3ページ /start/ /about/ /worksheet/
     3. .home-playroom .pl-worksheet__link … トップに1本だけ足したリンク
     4. @media print       … /worksheet/（body.sp-worksheet）だけ

   色はトップと記事ページから引き継ぐ。クリーム #fbf4e6 / ネイビー #101c30 / 金 #dcc08a。
   新規3ページは body に .article-note も付けるので、library-v8.css の変数が使える。
   JSなしでも全文が読める。横スクロールを出さない。 */

/* ══════════════════════════════════════════════════════
   1. 共通フッターの案内（全ページ）
   ══════════════════════════════════════════════════════ */
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin-top: 24px;
  padding-top: 8px;
  border-top: 1px solid rgba(245, 242, 233, 0.28);
}

/* 文字が大きいときも折り返して収まるようにする。高さは44px以上 */
.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════
   2. 新規3ページ共通
   ══════════════════════════════════════════════════════ */
.support-page .sp-hero {
  padding-block: 40px 8px;
}
.support-page .sp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--lib-ochre);
}
.support-page .sp-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--lib-gold-deep);
}
.support-page .sp-h1 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.3;
  margin: 0 0 16px;
}
.support-page .sp-hero__body {
  max-width: var(--measure);
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.95;
}

.support-page .sp-note {
  max-width: var(--measure);
  font-size: 15px;
  line-height: 1.85;
  color: var(--lib-navy-soft);
  border-left: 3px solid var(--lib-mint);
  padding-left: 16px;
}

.support-page .sp-next__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 24px 0;
}

/* ── /start/ 読み順 ─────────────────────────────────── */
.support-page .sp-routes {
  padding-block: 24px 8px;
}
.support-page .sp-route {
  max-width: var(--measure);
  margin: 0 0 40px;
  padding: 24px;
  background: var(--lib-card);
  border: 1px solid var(--lib-navy-line);
  border-radius: 10px;
}
.support-page .sp-route__num {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--lib-paper);
  background: var(--lib-navy);
  border-radius: 999px;
  padding: 5px 14px;
  display: inline-block;
}
.support-page .sp-route__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.4;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--lib-gold);
}
.support-page .sp-route__lead {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--lib-navy-soft);
}
.support-page .sp-route__list {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
.support-page .sp-route__list > li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 40px;
}
.support-page .sp-route__list > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lib-navy);
  color: var(--lib-paper);
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}
.support-page .sp-step {
  display: block;
  min-height: 44px;
  padding: 14px 16px;
  background: var(--lib-paper);
  border: 1px solid var(--lib-navy-line);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.support-page .sp-step:hover {
  border-color: var(--lib-gold-deep);
  background: var(--lib-paper-2);
}
.support-page .sp-step__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.support-page .sp-step__gain {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--lib-navy-soft);
}
.support-page .sp-step__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lib-ochre);
}
.support-page .sp-step__arrow {
  font-size: 15px;
}

.support-page .sp-next {
  padding-block: 8px 48px;
}
.support-page .sp-next__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.4;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--lib-gold);
  max-width: var(--measure);
}
.support-page .sp-next p {
  max-width: var(--measure);
  font-size: 17px;
  line-height: 1.95;
}

/* ── /about/ 本文 ──────────────────────────────────── */
.support-page .sp-body {
  padding-block: 24px 48px;
}
.support-page .sp-body h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.4;
  margin: 48px 0 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--lib-gold);
  max-width: var(--measure);
}
.support-page .sp-body h3 {
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 32px 0 12px;
  color: var(--lib-ochre);
  max-width: var(--measure);
}
.support-page .sp-body p {
  max-width: var(--measure);
  font-size: 17px;
  line-height: 1.95;
}
.support-page .sp-body ul {
  max-width: var(--measure);
  margin: 0 0 24px;
  padding-left: 1.4em;
  font-size: 17px;
  line-height: 1.95;
}
.support-page .sp-body li {
  margin-bottom: 8px;
}

/* 外部リンク。別サイトであることと確認日を文字でも出す */
.support-page .sp-ext__list {
  list-style: none;
  max-width: var(--measure);
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--lib-paper-2);
  border-radius: 8px;
  font-size: 16px;
}
.support-page .sp-ext__list li {
  margin: 0;
}
.support-page .sp-ext {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lib-ochre);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}
.support-page .sp-ext__mark,
.support-page .sp-ext__seen {
  font-size: 13px;
  color: var(--lib-navy-soft);
  white-space: nowrap;
}
.support-page .sp-ext__seen {
  margin-left: 8px;
}

/* ── /worksheet/ シート ─────────────────────────────── */
.support-page .sp-sheet {
  padding-block: 16px 48px;
}
.support-page .ws-tools {
  max-width: var(--measure);
  margin: 0 0 32px;
}
.support-page .ws-print {
  margin-bottom: 8px;
}
.support-page .ws-tools__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--lib-navy-soft);
}

.support-page .ws-block {
  max-width: var(--measure);
  margin: 0 0 28px;
  padding: 20px 24px;
  background: var(--lib-card);
  border: 1px solid var(--lib-navy-line);
  border-radius: 10px;
}
.support-page .ws-block__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--lib-gold);
}
.support-page .ws-block__num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lib-navy);
  color: var(--lib-paper);
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}
.support-page .ws-block__hint {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--lib-navy-soft);
}
.support-page .ws-block__example {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--lib-paper-2);
  border-left: 6px solid var(--lib-gold);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.85;
}
.support-page .ws-fields {
  margin: 0;
}
.support-page .ws-fields dt {
  font-size: 15px;
  font-weight: 700;
  margin-top: 16px;
}
.support-page .ws-fields dd {
  margin: 6px 0 0;
}
/* 手で書く空の罫線。styles.css の .blank を紙面の色に合わせる */
.support-page .ws-fields .blank {
  height: 32px;
  border-bottom: 1px dashed var(--lib-navy-line);
}
.support-page .ws-fields .blank + .blank {
  margin-top: 8px;
}
.support-page .ws-foot {
  max-width: var(--measure);
  margin-top: 32px;
}

/* ══════════════════════════════════════════════════════
   3. トップページに足した1本のリンク
   ══════════════════════════════════════════════════════ */
.home-playroom .pl-worksheet__link {
  margin: 16px 0 0;
}

/* ══════════════════════════════════════════════════════
   4. 印刷（/worksheet/ だけ）
   紙は白黒。操作するものは出さない。区画の途中で改ページしない。
   ══════════════════════════════════════════════════════ */
@media print {
  @page {
    margin: 14mm;
  }

  .sp-worksheet {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  /* 押すもの・たどるものは紙に出さない */
  .sp-worksheet .skip,
  .sp-worksheet .masthead__nav,
  .sp-worksheet .ws-tools,
  .sp-worksheet .sp-next__links,
  .sp-worksheet .foot-nav,
  .sp-worksheet .foot__inner a,
  .sp-worksheet .btn {
    display: none !important;
  }

  .sp-worksheet .notice,
  .sp-worksheet .masthead,
  .sp-worksheet .foot {
    background: #fff;
    color: #000;
    border: 0;
    padding-block: 0;
  }
  .sp-worksheet .notice p {
    font-size: 9pt;
  }
  .sp-worksheet .masthead__by,
  .sp-worksheet .masthead__tagline,
  .sp-worksheet .foot__by,
  .sp-worksheet .foot__sub,
  .sp-worksheet .sp-kicker,
  .sp-worksheet .ws-block__hint,
  .sp-worksheet .sp-note {
    color: #000;
  }
  .sp-worksheet .sp-hero {
    padding-block: 8pt 0;
  }
  .sp-worksheet .sp-sheet {
    padding-block: 0;
  }

  /* 枠は細い黒線だけにする。塗りつぶしは紙で読みにくいので外す */
  .sp-worksheet .ws-block,
  .sp-worksheet .ws-block__example,
  .sp-worksheet .sp-note {
    background: #fff;
    border-color: #000;
  }
  .sp-worksheet .ws-block {
    border: 1px solid #000;
    margin-bottom: 10pt;
    padding: 8pt 10pt;
  }
  .sp-worksheet .ws-block__head {
    border-bottom: 1px solid #000;
    font-size: 13pt;
  }
  .sp-worksheet .ws-block__num {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    line-height: 26px;
  }
  .sp-worksheet .ws-block__example {
    border-left: 3px solid #000;
    font-size: 9pt;
  }
  .sp-worksheet .ws-fields .blank {
    border-bottom: 1px solid #000;
  }

  /* 区画・見出し・記入欄が改ページで割れないようにする */
  .sp-worksheet .ws-block,
  .sp-worksheet .ws-block__head,
  .sp-worksheet .ws-fields dt,
  .sp-worksheet .ws-fields dd {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .sp-worksheet .ws-block__head,
  .sp-worksheet .ws-fields dt {
    break-after: avoid;
    page-break-after: avoid;
  }
}