@charset "utf-8";
/* =============================================================================
   pages.css — 下層ページ（about / guide / odekakekun / recruit）の新規ブロック
   -----------------------------------------------------------------------------
   blocks.css（既存テーマのUIブロック再現）と concept-d.css（D案のヘッダー・
   表示切替UI・目的別お問い合わせ）は変更せず、このファイルだけを追加します。

   色・書体・角丸・余白は blocks.css のデザイントークンをそのまま使用し、
   新しいブランドカラーや書体は追加していません。

   新規ブロック：
     pg-breadcrumb  パンくずリスト（既存テーマに存在しなかった）
     pg-hero        下層ページのヒーロー
     pg-anchornav   ページ内目次（遷移を増やさずに要点へ飛ぶ）
     pg-paths       目的別の2〜3導線（お問い合わせとは別意匠）
     pg-note        引用・思想を示す囲み
     pg-faqlink     FAQへの導線
     pg-jobs        募集職種カード
     pg-def         定義リスト（同行援護とは 等）
   ========================================================================== */

/* =============================================================================
   pg-breadcrumb — パンくずリスト
   ========================================================================== */
.pg-breadcrumb { background-color: var(--cream); }
.pg-breadcrumb__inner {
  max-width: var(--w-1280);
  margin-inline: auto;
  padding: 12px 20px;
}
.pg-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 1.4rem;
}
.pg-breadcrumb__list li { display: flex; align-items: center; gap: 8px; color: var(--slate); }
.pg-breadcrumb__list li + li::before { content: "›"; color: var(--slate); }
.pg-breadcrumb__list a { text-decoration: underline; text-underline-offset: 3px; }
.pg-breadcrumb__list [aria-current="page"] { font-weight: 700; color: var(--ink-soft); }

/* =============================================================================
   pg-hero — 下層ページのヒーロー
   ========================================================================== */
.pg-hero { position: relative; padding-block: 64px 56px; }
.pg-hero--cream { background-color: var(--cream); }
.pg-hero__inner { max-width: var(--w-1160); margin-inline: auto; padding-inline: 20px; }
.pg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: center; }
.pg-hero__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 16px;
  border-radius: 4px;
  background-color: var(--navy);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.pg-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 4.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.pg-hero__lead { margin: 0; font-size: 2rem; line-height: 1.9; }
.pg-hero__media img { width: 100%; border-radius: 20px; }
.pg-hero__logo { display: block; width: min(100%, 300px); margin-bottom: 20px; }
@media (max-width: 900px) {
  .pg-hero__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  .pg-hero { padding-block: 36px 40px; }
  .pg-hero__title { font-size: 2.8rem; }
  .pg-hero__lead { font-size: 1.7rem; }
}

/* =============================================================================
   pg-anchornav — ページ内目次
   視覚障害のある利用者のためにページ遷移を増やしすぎない、という方針の実装
   ========================================================================== */
.pg-anchornav { border-block: 1px solid var(--line-light); background-color: var(--white); }
.pg-anchornav__inner { max-width: var(--w-1160); margin-inline: auto; padding: 20px; }
.pg-anchornav__title { margin: 0 0 12px; font-size: 1.5rem; font-weight: 700; color: var(--slate); }
.pg-anchornav__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-anchornav__list a {
  display: block;
  padding: 10px 18px;
  border: 2px solid var(--navy);
  border-radius: 99px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}
.pg-anchornav__list a:hover { background-color: var(--navy); color: var(--white); }
@media (max-width: 767px) {
  .pg-anchornav__list { flex-direction: column; }
  .pg-anchornav__list a { text-align: center; padding: 14px 18px; }
}

/* =============================================================================
   pg-def — 定義リスト（「同行援護とは」など）
   ========================================================================== */
.pg-def { margin: 0; }
.pg-def__item { padding: 28px 0; border-bottom: 1px solid var(--line-light); }
.pg-def__item:first-child { border-top: 1px solid var(--line-light); }
.pg-def__term {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}
.pg-def__desc { margin: 0; font-size: 1.7rem; line-height: 1.9; }
@media (max-width: 767px) {
  .pg-def__item { padding: 20px 0; }
  .pg-def__term { font-size: 1.9rem; }
  .pg-def__desc { font-size: 1.6rem; }
}

/* =============================================================================
   pg-paths — 目的別の導線（お問い合わせブロックとは別意匠）
   カード型＋大きな番号。d-contact は「左に太い縦罫のリスト型」なので区別できる
   ========================================================================== */
.pg-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0; padding: 0;
  list-style: none;
}
.pg-paths--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-paths__item { display: flex; }
.pg-paths__link {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 32px 28px 28px;
  border: 2px solid var(--navy);
  border-radius: 16px;
  background-color: var(--white);
  transition: all 0.4s;
}
.pg-paths__link:hover { top: -3px; box-shadow: var(--shadow-hover); }
.pg-paths__num {
  font-family: var(--font-num);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--coral);
}
.pg-paths__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pg-paths__desc { margin: 0; font-size: 1.6rem; line-height: 1.8; }
.pg-paths__go { margin-top: auto; padding-top: 12px; font-size: 1.6rem; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 767px) {
  .pg-paths, .pg-paths--3 { grid-template-columns: 1fr; gap: 16px; }
  .pg-paths__link { padding: 24px 20px; }
  .pg-paths__title { font-size: 1.9rem; }
}

/* =============================================================================
   pg-note — 思想・考え方を示す囲み
   ========================================================================== */
.pg-note {
  max-width: 820px;
  margin-inline: auto;
  padding: 36px 40px;
  border-left: 8px solid var(--coral);
  border-radius: 0 16px 16px 0;
  background-color: var(--cream);
}
.pg-note__lead {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
}
.pg-note__text { margin: 0; font-size: 1.7rem; line-height: 1.9; }
.pg-note__text + .pg-note__text { margin-top: 1em; }
@media (max-width: 767px) {
  .pg-note { padding: 24px 20px; border-left-width: 6px; }
  .pg-note__lead { font-size: 1.9rem; }
  .pg-note__text { font-size: 1.6rem; }
}

/* =============================================================================
   pg-faqlink — FAQへの導線
   ========================================================================== */
.pg-faqlink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  max-width: var(--w-1000);
  margin-inline: auto;
  padding: 28px 32px;
  border: 2px dashed var(--navy);
  border-radius: 16px;
}
.pg-faqlink__text { margin: 0; font-size: 1.8rem; line-height: 1.7; }
.pg-faqlink__text strong { font-family: var(--font-heading); }
.pg-faqlink__action { margin: 0 0 0 auto; }
@media (max-width: 767px) {
  .pg-faqlink { padding: 20px; }
  .pg-faqlink__action { margin-left: 0; width: 100%; }
}

/* =============================================================================
   pg-jobs — 募集職種カード
   ========================================================================== */
.pg-jobs { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.pg-jobs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  padding: 28px 32px;
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: var(--shadow-card);
}
.pg-jobs__tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: var(--cream);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
}
.pg-jobs__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; line-height: 1.5; }
.pg-jobs__desc { margin: 0; font-size: 1.6rem; line-height: 1.8; }
@media (max-width: 767px) {
  .pg-jobs__item { grid-template-columns: 1fr; padding: 22px 20px; }
  .pg-jobs__title { font-size: 1.9rem; }
}

/* =============================================================================
   pg-area — 対象となる事業所（おでかけくん）
   ========================================================================== */
.pg-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg-area__item {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 12px;
  background-color: var(--white);
  font-size: 1.7rem;
  line-height: 1.7;
}
.pg-area__item::before { content: "✓"; flex: 0 0 auto; font-weight: 700; color: var(--coral); }
@media (max-width: 767px) { .pg-area { grid-template-columns: 1fr; } }

/* =============================================================================
   共通の小物
   ========================================================================== */
.pg-lead { max-width: 42em; margin: 0 auto 48px; font-size: 1.8rem; line-height: 1.9; text-align: center; }
.pg-lead--left { margin-inline: 0; text-align: left; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 40px 0 0; }
.pg-actions--center { justify-content: center; }
@media (max-width: 767px) {
  .pg-lead { font-size: 1.6rem; margin-bottom: 32px; text-align: left; }
  .pg-actions { flex-direction: column; }
}

/* 黒背景モードの追い込み（concept-d.css のトークン差し替えで大半は追従する） */
html[data-theme="dark"] .pg-breadcrumb,
html[data-theme="dark"] .pg-hero--cream,
html[data-theme="dark"] .pg-note { background-color: #1a1a1a; }
html[data-theme="dark"] .pg-anchornav,
html[data-theme="dark"] .pg-paths__link,
html[data-theme="dark"] .pg-jobs__item,
html[data-theme="dark"] .pg-area__item { background-color: #2a2a2a; }
html[data-theme="dark"] .pg-anchornav__list a { border-color: #fff; color: #fff; }
html[data-theme="dark"] .pg-anchornav__list a:hover { background-color: #fff; color: #000; }
html[data-theme="dark"] .pg-faqlink { border-color: #fff; }
html[data-theme="dark"] .pg-hero__eyebrow { background-color: #fff; color: #000; }