@charset "utf-8";

/* ひとりの仕事室 — guides v14（テーマ別ガイドと、記事のパンくず）
   styles.css / library-v8.css / support-v9.css の上に重ねる追加分だけを書く。既存CSSは変更しない。

   効く範囲を次の4つに限る。
     1. .gd-crumbs              … パンくず（記事30本・ガイド7ページ）
     2. .gd-page                … /guides/ と /guides/<テーマ>/ の7ページ
     3. .lib-group__guide       … 記事一覧の各テーマに足したガイドへのリンク
     4. .article-luxe の上書き  … 濃紺の first-client だけ、パンくずの色を変える

   320pxの画面でも横スクロールを出さない。押せる部分の高さは44px以上。 */

/* ══════════════════════════════════════════════════════
   1. パンくず
   ══════════════════════════════════════════════════════ */
.gd-crumbs {
  padding-top: 16px;
}
.gd-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
}
.gd-crumbs__list li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gd-crumbs__list li + li::before {
  content: "›";
  margin-right: 4px;
  opacity: 0.6;
}
.gd-crumbs__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gd-crumbs__list [aria-current="page"] {
  color: var(--lib-navy-soft, inherit);
}

/* 濃紺の first-client。地の色はほかの帯と同じにする */
.article-luxe .gd-crumbs {
  background: var(--navy);
  color: var(--ivory-soft);
}
.article-luxe .gd-crumbs__list [aria-current="page"] {
  color: var(--ivory-dim);
}

/* ══════════════════════════════════════════════════════
   2. テーマ別ガイド
   ══════════════════════════════════════════════════════ */
.gd-page .sp-hero {
  padding-top: 24px;
}
.gd-page .sp-h1 {
  overflow-wrap: anywhere;
}

/* 進め方の3つの手順 */
.support-page .gd-steps {
  max-width: var(--measure);
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.support-page .gd-step {
  margin: 0 0 16px;
  padding: 4px 20px 8px;
  background: var(--lib-card);
  border: 1px solid var(--lib-navy-line);
  border-radius: 10px;
}
.support-page .gd-step h3 {
  margin: 16px 0 8px;
  color: inherit;
}
.gd-step__num {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--lib-ochre);
}
.support-page .gd-step__links {
  font-size: 15px;
  line-height: 1.85;
  color: var(--lib-navy-soft);
  overflow-wrap: anywhere;
}

/* 読む順番（support-v9 の番号付きリンクを使う） */
.support-page .gd-reading,
.support-page .gd-hub__list {
  max-width: var(--measure);
  margin-bottom: 24px;
}
.gd-hub__cat {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lib-ochre);
}

/* 最初にやること */
.support-page .gd-action {
  max-width: var(--measure);
  padding: 4px 20px;
  border-left: 4px solid var(--lib-gold-deep);
  background: var(--lib-card);
}

/* ほかのテーマのガイド */
.support-page .gd-others li {
  margin-bottom: 12px;
}
.gd-others a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}
.gd-others__sum {
  display: block;
  font-size: 15px;
  line-height: 1.8;
  color: var(--lib-navy-soft);
}

/* ══════════════════════════════════════════════════════
   3. 記事一覧のガイドへのリンク
   ══════════════════════════════════════════════════════ */
.library-index .lib-group__guide {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.6;
}
.library-index .lib-group__guide a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lib-ochre);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* 狭い画面。ボタンの文字が長くても枠からはみ出さない */
@media (max-width: 480px) {
  .gd-page .sp-next__links .btn,
  .article-foot-nav .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .support-page .gd-step,
  .support-page .gd-action {
    padding-inline: 14px;
  }
}