@charset "utf-8";
/* ============================================================================
   鎌倉市介護お役立ち情報 — ハイブリッド型テンプレート v2（コンポーネント）
   ----------------------------------------------------------------------------
   ページ上半分 = 一覧型（見て拾う） / ページ下半分 = 読み物型（読んで確かめる）

   ★ 前提：トークンCSSを先に読み込むこと
     （モック: oyakudachi-tokens.css ／ テーマ: css/pages/oyakudachi-info-tokens.css）
   ★ このファイルに生値（px・カラーコード）を書かない。必ずトークンを使う。
     例外は「そこにしか出てこない構造的な値」のみで、その場合はコメントを添える。

   ・全ブロックを .oyk2 配下にスコープ。既存 oyakudachi-info.css には触れない
   ・テーマでは css/pages/oyakudachi-info-tokens.css ／ oyakudachi-info-v2.css として置き、
     inc/enqueue.php の kamakura_enqueue_page_styles() で tokens → v2 の順に読み込む
     （このファイルはモックと同じ内容に保つ。直すときはモック側を直してからコピーする）
   ========================================================================== */

/* ============================================================================
   基盤
   ========================================================================== */
.oyk2 {
  color: var(--oyk-text);
  text-align: left;
}
.oyk2 * { box-sizing: border-box; }

/* 既存の #subPage 側の font-size 指定に勝つための土台 */
#subPage .oyk2,
#subPage .oyk2 p,
#subPage .oyk2 li,
#subPage .oyk2 dd,
#subPage .oyk2 dt {
  font-family: var(--oyk-font);
  font-size: var(--oyk-fs-body);
  line-height: var(--oyk-lh-body);
  color: var(--oyk-text);
}

/* theme の reset.css が strong / b / em の font-weight を normal に潰すため復活させる */
#subPage .oyk2 strong,
#subPage .oyk2 b { font-weight: var(--oyk-fw-bold); }
#subPage .oyk2 em { font-style: italic; }

.oyk2__inner {
  width: 100%;
  max-width: var(--oyk-w-page);
  margin: 0 auto;
}

/* 本文中の強調（ブランド色）*/
.oyk-em {
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
}

/* アイコンの色はここで一括指定する。
   HTML側の <svg> は stroke="currentColor" にしてあるので、
   色を変えたいときは親に color を当てるだけでよい。
   個別に上書きする場合は .oyk2 svg（0,1,1）に勝つ詳細度が要る点に注意。 */
.oyk2 svg { color: var(--oyk-brand); }
/* 外部リンクの矢印だけは親の文字色に馴染ませる */
.oyk2 .oyk-links .ext { color: inherit; }

/* ============================================================================
   0. 記事メタ（カテゴリ／公開日）
   ========================================================================== */
.oyk-metarow {
  display: flex;
  align-items: center;
  gap: var(--oyk-sp-3);
  margin-bottom: var(--oyk-sp-3);
}
.oyk-cat {
  padding: var(--oyk-sp-1) var(--oyk-sp-3);
  border-radius: var(--oyk-r-xs);
  background: var(--oyk-brand);
  color: var(--oyk-on-brand);
  font-size: var(--oyk-fs-caption);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-snug);
}
#subPage .oyk2 .oyk-date {
  font-size: var(--oyk-fs-note);
  color: var(--oyk-muted);
}

/* ============================================================================
   1. ヒーロー
   ========================================================================== */
.oyk-hero {
  position: relative;
  margin-bottom: var(--oyk-gap-block);
  border-radius: var(--oyk-r-xl);
  overflow: hidden;
  background: var(--oyk-brand-pale);
}
.oyk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: stretch;
}
.oyk-hero__body {
  padding: var(--oyk-pad-hero);
  display: flex;
  flex-direction: column;
  gap: var(--oyk-sp-5);
}
.oyk-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--oyk-sp-2);
  align-self: flex-start;
  padding: var(--oyk-sp-1) var(--oyk-sp-4);
  border-radius: var(--oyk-r-pill);
  background: var(--oyk-brand);
  color: var(--oyk-on-brand);
  font-size: var(--oyk-fs-note);
  font-weight: var(--oyk-fw-bold);
  letter-spacing: .02em;
}
#subPage .oyk2 .oyk-hero__title {
  margin: 0;
  font-size: var(--oyk-fs-hero);
  line-height: var(--oyk-lh-hero);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
  letter-spacing: var(--oyk-ls-tight);
}
/* 注：theme の .sub（パンくず外枠 / padding-top:140px !important）と衝突するため
   ヒーロー内の副題は必ず .oyk-hero__title-sub を使うこと */
#subPage .oyk2 .oyk-hero__title .oyk-hero__title-sub {
  display: block;
  padding: 0;
  font-size: .68em;              /* 親タイトルに追従させたいので em */
  color: var(--oyk-brand);
}
#subPage .oyk2 .oyk-hero__lead {
  font-size: var(--oyk-fs-lead);
  line-height: var(--oyk-lh-relaxed);
  font-weight: var(--oyk-fw-medium);
  color: var(--oyk-ink);
}

/* こんなお悩みはありませんか？（クリーム） */
.oyk-worry {
  margin-top: auto;
  padding: var(--oyk-pad-box) var(--oyk-sp-6);
  background: var(--oyk-accent-bg);
  border: var(--oyk-bw) solid var(--oyk-accent-line);
  border-radius: var(--oyk-r-lg);
}
#subPage .oyk2 .oyk-worry__title {
  margin: 0 0 var(--oyk-sp-3);
  font-size: var(--oyk-fs-title-sm);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-accent-ink);
}
#subPage .oyk2 ul.oyk-worry__list { margin: 0; padding: 0; list-style: none; }
#subPage .oyk2 ul.oyk-worry__list li {
  position: relative;
  padding-left: 30px;            /* アイコン19px + 余白 */
  font-size: var(--oyk-fs-body-sm);
  line-height: var(--oyk-lh-normal);
}
#subPage .oyk2 ul.oyk-worry__list li + li { margin-top: 7px; }
.oyk-worry__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .38em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--oyk-warn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
#subPage .oyk2 .oyk-worry__answer {
  margin: var(--oyk-sp-3) 0 0;
  padding-top: var(--oyk-sp-3);
  border-top: var(--oyk-bw) dashed var(--oyk-accent-line);
  font-size: var(--oyk-fs-body-sm);
  font-weight: var(--oyk-fw-medium);
  color: var(--oyk-ink);
}

.oyk-hero__figure { position: relative; min-height: 300px; }
.oyk-hero__figure img,
.oyk-hero__figure svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 枠からはみ出た部分をどこを基準に切るか。既定は中央。
     被写体が端に寄った写真だけ、img に style="--oyk-hero-focus: 22% 15%" のように指定する */
  object-position: var(--oyk-hero-focus, 50% 50%);
  display: block;
}
.oyk-hero__credit {
  position: absolute;
  right: var(--oyk-sp-2);
  bottom: var(--oyk-sp-2);
  z-index: 2;
  padding: 3px var(--oyk-sp-2);
  border-radius: var(--oyk-r-xs);
  background: var(--oyk-surface-veil);
  font-size: var(--oyk-fs-micro);
  color: var(--oyk-muted);
}

/* ============================================================================
   2. アイコンサマリー（PC 5列 → タブレット 3列 → SP 2列）
   ========================================================================== */
.oyk-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--oyk-sp-3);
  margin-bottom: var(--oyk-gap-block);
}
.oyk-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--oyk-sp-2);
  padding: var(--oyk-sp-5) var(--oyk-sp-3);
  background: var(--oyk-surface);
  border: var(--oyk-bw) solid var(--oyk-line);
  border-radius: var(--oyk-r-lg);
  box-shadow: var(--oyk-shadow);
  text-align: center;
  transition: transform var(--oyk-dur) var(--oyk-ease),
              border-color var(--oyk-dur) var(--oyk-ease);
}
a.oyk-summary__item:hover {
  transform: translateY(-3px);
  border-color: var(--oyk-brand-line);
}
#subPage .oyk2 .oyk-summary__label {
  margin: 0;
  font-size: var(--oyk-fs-ui);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
  line-height: var(--oyk-lh-title);
}
.oyk-summary__icon {
  width: var(--oyk-icon-badge);
  height: var(--oyk-icon-badge);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oyk-brand-pale);
}
.oyk-summary__icon svg {
  width: var(--oyk-icon-glyph);
  height: var(--oyk-icon-glyph);
  display: block;
}
#subPage .oyk2 .oyk-summary__text {
  margin: 0;
  font-size: var(--oyk-fs-note);
  line-height: var(--oyk-lh-snug);
  color: var(--oyk-muted);
}
.oyk-summary__item .oyk-summary__text strong { color: var(--oyk-ink); }

/* ============================================================================
   3. 詳細（2カラム）
   ========================================================================== */
.oyk-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--oyk-gap-grid);
  align-items: start;
  margin-bottom: var(--oyk-sp-8);
}
.oyk-card {
  padding: var(--oyk-pad-card-y) var(--oyk-pad-card);
  background: var(--oyk-surface);
  border: var(--oyk-bw) solid var(--oyk-line);
  border-radius: var(--oyk-r-lg);
  box-shadow: var(--oyk-shadow);
}
.oyk-card + .oyk-card { margin-top: var(--oyk-gap-grid); }
.oyk-card__head {
  display: flex;
  align-items: center;
  gap: var(--oyk-sp-3);
  margin-bottom: var(--oyk-sp-4);
  padding-bottom: var(--oyk-sp-3);
  border-bottom: var(--oyk-bw-head) solid var(--oyk-brand-line);
}
.oyk-card__head svg {
  width: var(--oyk-icon-head);
  height: var(--oyk-icon-head);
  flex: none;
}
#subPage .oyk2 .oyk-card__head h4,
#subPage .oyk2 .oyk-card__head h3 {
  margin: 0;
  font-size: var(--oyk-fs-title);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
  line-height: var(--oyk-lh-title);
}
#subPage .oyk2 .oyk-card__note {
  margin: var(--oyk-sp-3) 0 0;
  font-size: var(--oyk-fs-note);
  color: var(--oyk-muted);
}
#subPage .oyk2 .oyk-card__intro {
  margin: 0 0 var(--oyk-sp-3);
  font-size: var(--oyk-fs-body-sm);
}

/* チェックリスト（対象となる方） */
#subPage .oyk2 ul.oyk-check { margin: 0; padding: 0; list-style: none; }
#subPage .oyk2 ul.oyk-check > li {
  position: relative;
  padding-left: 30px;            /* チェック20px + 余白 */
  font-size: var(--oyk-fs-body-sm);
  line-height: var(--oyk-lh-normal);
}
#subPage .oyk2 ul.oyk-check > li + li { margin-top: var(--oyk-sp-2); }
.oyk-check > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3em;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--oyk-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
#subPage .oyk2 ul.oyk-check ul.oyk-check-sub {
  margin: var(--oyk-sp-2) 0 0;
  padding: var(--oyk-sp-3);
  list-style: none;
  background: var(--oyk-brand-pale);
  border-radius: var(--oyk-r-sm);
}
#subPage .oyk2 ul.oyk-check ul.oyk-check-sub li {
  position: relative;
  padding-left: var(--oyk-sp-4);
  font-size: var(--oyk-fs-ui);
  line-height: var(--oyk-lh-snug);
}
#subPage .oyk2 ul.oyk-check ul.oyk-check-sub li + li { margin-top: 5px; }
.oyk-check-sub li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oyk-brand-mid);
}

/* 支給されるもの：品目タグ + 点数バッジ */
.oyk-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oyk-sp-2);
  margin: var(--oyk-sp-1) 0 0;
  padding: 0;
  list-style: none;
}
#subPage .oyk2 ul.oyk-items li {
  padding: 7px var(--oyk-sp-4);
  background: var(--oyk-brand-pale);
  border: var(--oyk-bw) solid var(--oyk-brand-line);
  border-radius: var(--oyk-r-pill);
  font-size: var(--oyk-fs-ui-sm);
  line-height: 1.5;
  color: var(--oyk-brand-deep);
}
#subPage .oyk2 ul.oyk-items li.is-etc {
  background: transparent;
  border-style: dashed;
  color: var(--oyk-muted);
}
.oyk-limit {
  display: flex;
  align-items: center;
  gap: var(--oyk-sp-3);
  margin-top: var(--oyk-sp-4);
  padding: var(--oyk-sp-3) var(--oyk-sp-4);
  background: var(--oyk-accent-bg);
  border: var(--oyk-bw) solid var(--oyk-accent-line);
  border-radius: var(--oyk-r-md);
}
.oyk-limit__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--oyk-warn);
  color: var(--oyk-on-brand);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-none);
}
.oyk-limit__num b { font-size: var(--oyk-fs-num); }
.oyk-limit__num span { font-size: var(--oyk-fs-micro); }
#subPage .oyk2 .oyk-limit__text {
  margin: 0;
  font-size: var(--oyk-fs-ui);
  font-weight: var(--oyk-fw-medium);
  line-height: var(--oyk-lh-snug);
  color: var(--oyk-ink);
}

/* 配送スケジュール */
.oyk-schedule {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
#subPage .oyk2 ul.oyk-schedule li {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  font-size: var(--oyk-fs-caption);
  line-height: 1.35;
  color: var(--oyk-muted);
}
.oyk-schedule li .m {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 42px;
  padding: 5px 2px;
  border-radius: var(--oyk-r-sm);
  background: var(--oyk-brand-pale);
  border: var(--oyk-bw) solid var(--oyk-brand-line);
  font-size: var(--oyk-fs-ui);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
}
.oyk-schedule li.is-first .m {
  background: var(--oyk-brand);
  border-color: var(--oyk-brand);
  color: var(--oyk-on-brand);
}
.oyk-schedule li .cap { font-size: var(--oyk-fs-micro); }

.oyk-note-inline {
  margin-top: var(--oyk-sp-3);
  padding: var(--oyk-sp-3) var(--oyk-sp-4);
  background: var(--oyk-accent-bg);
  border-left: var(--oyk-sp-1) solid var(--oyk-warn);
  border-radius: 0 var(--oyk-r-sm) var(--oyk-r-sm) 0;
}
#subPage .oyk2 .oyk-note-inline p {
  margin: 0;
  font-size: var(--oyk-fs-ui-sm);
  line-height: var(--oyk-lh-normal);
}

/* 申請ステップ（番号付き） */
.oyk-steps { margin: 0; padding: 0; list-style: none; counter-reset: oykstep; }
#subPage .oyk2 ol.oyk-steps > li {
  position: relative;
  padding-left: 44px;            /* 番号30px + 余白 */
  font-size: var(--oyk-fs-body-sm);
  line-height: var(--oyk-lh-normal);
}
#subPage .oyk2 ol.oyk-steps > li + li {
  margin-top: var(--oyk-sp-3);
  padding-top: var(--oyk-sp-3);
  border-top: var(--oyk-bw) dashed var(--oyk-line);
}
.oyk-steps > li::before {
  counter-increment: oykstep;
  content: counter(oykstep);
  position: absolute;
  left: 0;
  top: .12em;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oyk-brand);
  color: var(--oyk-on-brand);
  font-size: var(--oyk-fs-ui);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-none);
}
/* 2つ目以降は上の余白ぶん番号も下げる */
#subPage .oyk2 ol.oyk-steps > li + li::before { top: calc(.12em + var(--oyk-sp-3)); }
.oyk-steps b { color: var(--oyk-brand-deep); }

/* PDF / 外部リンク */
.oyk-links { margin: 6px 0 0; padding: 0; list-style: none; }
#subPage .oyk2 ul.oyk-links li + li { margin-top: var(--oyk-sp-2); }
.oyk-links a {
  display: flex;
  align-items: center;
  gap: var(--oyk-sp-3);
  padding: var(--oyk-sp-3) var(--oyk-sp-4);
  background: var(--oyk-surface);
  border: var(--oyk-bw) solid var(--oyk-line);
  border-radius: var(--oyk-r-md);
  font-size: var(--oyk-fs-ui);
  line-height: 1.5;
  color: var(--oyk-ink);
  transition: background var(--oyk-dur-fast) var(--oyk-ease),
              border-color var(--oyk-dur-fast) var(--oyk-ease);
}
.oyk-links a:hover {
  background: var(--oyk-brand-pale);
  border-color: var(--oyk-brand-line);
}
.oyk-links .tag {
  flex: none;
  padding: 3px 7px;
  border-radius: var(--oyk-r-xs);
  background: var(--oyk-doc);
  color: var(--oyk-on-brand);
  font-size: 10.5px;             /* タグ専用。これ以上小さくすると潰れる */
  font-weight: var(--oyk-fw-bold);
  letter-spacing: var(--oyk-ls-wide);
}
.oyk-links .tag.is-web { background: var(--oyk-brand); }
.oyk-links .name { flex: 1 1 auto; }
.oyk-links .size {
  flex: none;
  font-size: var(--oyk-fs-caption);
  color: var(--oyk-muted);
}
.oyk-links .ext { flex: none; width: 15px; height: 15px; opacity: .5; }

/* ============================================================================
   4. 注意喚起バー（オレンジ）
   ========================================================================== */
.oyk-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--oyk-sp-4);
  margin-bottom: var(--oyk-sp-6);
  padding: var(--oyk-sp-5) var(--oyk-sp-6);
  background: var(--oyk-warn-bg);
  border: var(--oyk-bw) solid var(--oyk-warn-line);
  border-left: var(--oyk-bw-bar) solid var(--oyk-warn);
  border-radius: var(--oyk-r-md);
}
/* .oyk2 svg（0,1,1）に勝つ詳細度が必要なので .oyk2 から書く */
.oyk2 .oyk-alert__icon {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  color: var(--oyk-warn);
}
#subPage .oyk2 .oyk-alert__title {
  margin: 0 0 5px;
  font-size: var(--oyk-fs-title-sm);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-warn-ink);
}
#subPage .oyk2 .oyk-alert__body {
  margin: 0;
  font-size: var(--oyk-fs-body-sm);
  line-height: var(--oyk-lh-normal);
}

/* ============================================================================
   5. 問い合わせ先（緑・電話番号大）
   ========================================================================== */
.oyk-contact {
  margin-bottom: var(--oyk-sp-4);
  padding: var(--oyk-pad-contact);
  background: var(--oyk-brand-pale);
  border: var(--oyk-bw) solid var(--oyk-brand-line);
  border-radius: var(--oyk-r-xl);
}
.oyk-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--oyk-sp-6);
  align-items: center;
}
#subPage .oyk2 .oyk-contact__label {
  margin: 0 0 3px;
  font-size: var(--oyk-fs-note);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand);
  letter-spacing: var(--oyk-ls-wide);
}
#subPage .oyk2 .oyk-contact__name {
  margin: 0 0 var(--oyk-sp-3);
  font-size: var(--oyk-fs-title-lg);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-title);
  color: var(--oyk-ink);
}
.oyk-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--oyk-sp-3);
  padding: var(--oyk-sp-3) var(--oyk-sp-6) var(--oyk-sp-3) var(--oyk-sp-5);
  background: var(--oyk-brand);
  border-radius: var(--oyk-r-pill);
  color: var(--oyk-on-brand);
  transition: transform var(--oyk-dur) var(--oyk-ease),
              opacity var(--oyk-dur) var(--oyk-ease);
}
.oyk-tel:hover { transform: translateY(-2px); opacity: .92; }
.oyk-tel svg {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--oyk-on-brand);
}
.oyk-tel .num {
  font-family: var(--oyk-font-num);
  font-size: var(--oyk-fs-tel);
  font-weight: var(--oyk-fw-medium);
  line-height: 1.1;
  letter-spacing: var(--oyk-ls-tight);
  white-space: nowrap;           /* 電話番号は絶対に折り返さない（最重要導線） */
}
.oyk-contact__side {
  padding: var(--oyk-sp-4) var(--oyk-sp-5);
  background: var(--oyk-surface-veil);
  border-radius: var(--oyk-r-md);
}
#subPage .oyk2 dl.oyk-meta { margin: 0; }
#subPage .oyk2 dl.oyk-meta div { display: flex; gap: var(--oyk-sp-2); }
#subPage .oyk2 dl.oyk-meta div + div { margin-top: 7px; }
#subPage .oyk2 dl.oyk-meta dt {
  flex: none;
  width: 5.2em;
  font-size: var(--oyk-fs-ui-sm);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
}
#subPage .oyk2 dl.oyk-meta dd {
  flex: 1 1 auto;
  font-size: var(--oyk-fs-ui-sm);
  line-height: var(--oyk-lh-snug);
}
.oyk-meta a {
  color: var(--oyk-brand-deep);
  text-decoration: underline;
  word-break: break-all;
}

/* 免責注記 */
#subPage .oyk2 p.oyk-disclaimer {
  margin: 0;
  padding: 0 var(--oyk-sp-1);
  font-size: var(--oyk-fs-note);
  line-height: var(--oyk-lh-relaxed);
  color: var(--oyk-muted);
  text-align: center;
}

/* ============================================================================
   一覧型 ↔ 読み物型 の切り替え
   ========================================================================== */
.oyk-switch {
  position: relative;
  margin: var(--oyk-gap-switch) 0 var(--oyk-sp-8);
  text-align: center;
}
.oyk-switch::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: var(--oyk-bw) solid var(--oyk-line);
}
#subPage .oyk2 .oyk-switch span {
  position: relative;
  display: inline-block;
  padding: 0 var(--oyk-sp-5);
  background: var(--oyk-surface);
  font-size: var(--oyk-fs-title);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-muted);
  letter-spacing: var(--oyk-ls-wide);
}

/* ============================================================================
   6. 読み物パート
   ========================================================================== */
.oyk-read { max-width: var(--oyk-w-read); margin: 0 auto; }

/* 目次 */
.oyk-toc {
  margin-bottom: var(--oyk-gap-block);
  padding: var(--oyk-pad-box) var(--oyk-pad-card);
  background: var(--oyk-accent-bg);
  border: var(--oyk-bw) solid var(--oyk-accent-line);
  border-radius: var(--oyk-r-lg);
}
#subPage .oyk2 .oyk-toc__title {
  margin: 0 0 var(--oyk-sp-3);
  font-size: var(--oyk-fs-body);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-accent-ink-2);
}
#subPage .oyk2 ol.oyk-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: oyktoc;
  columns: 2;
  column-gap: var(--oyk-sp-8);
}
#subPage .oyk2 ol.oyk-toc__list li {
  break-inside: avoid;
  font-size: var(--oyk-fs-body-sm);
  line-height: var(--oyk-lh-snug);
}
#subPage .oyk2 ol.oyk-toc__list li + li { margin-top: var(--oyk-sp-2); }
.oyk-toc__list a {
  position: relative;
  display: block;
  padding-left: var(--oyk-sp-8);
  color: var(--oyk-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(60, 67, 58, .28);
}
.oyk-toc__list a:hover { color: var(--oyk-brand-deep); }
.oyk-toc__list a::before {
  counter-increment: oyktoc;
  content: counter(oyktoc);
  position: absolute;
  left: 0;
  top: .18em;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oyk-surface);
  border: var(--oyk-bw) solid var(--oyk-accent-line);
  font-size: var(--oyk-fs-micro);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-accent-ink-2);
  line-height: var(--oyk-lh-none);
}

/* 見出し */
#subPage .oyk2 .oyk-h2 {
  margin: var(--oyk-sp-13) 0 var(--oyk-sp-4);
  padding: var(--oyk-sp-3) var(--oyk-pad-box);
  background: var(--oyk-brand);
  border-radius: var(--oyk-r-sm);
  font-size: var(--oyk-fs-h2);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-tight);
  color: var(--oyk-on-brand);
  scroll-margin-top: var(--oyk-sp-6);
}
#subPage .oyk2 .oyk-h2:first-child { margin-top: 0; }
#subPage .oyk2 .oyk-h3 {
  margin: var(--oyk-sp-8) 0 var(--oyk-sp-3);
  padding-left: var(--oyk-sp-3);
  border-left: var(--oyk-bw-accent) solid var(--oyk-brand-mid);
  font-size: var(--oyk-fs-h3);
  font-weight: var(--oyk-fw-bold);
  line-height: 1.5;
  color: var(--oyk-brand-deep);
}
#subPage .oyk2 .oyk-read p { margin: 0 0 var(--oyk-sp-4); }
#subPage .oyk2 .oyk-read p:last-child { margin-bottom: 0; }

/* 本文中のリスト */
#subPage .oyk2 ul.oyk-dot { margin: 0 0 var(--oyk-sp-4); padding: 0; list-style: none; }
#subPage .oyk2 ul.oyk-dot li {
  position: relative;
  padding-left: var(--oyk-sp-5);
  font-size: var(--oyk-fs-body);
  line-height: 1.8;
}
#subPage .oyk2 ul.oyk-dot li + li { margin-top: 6px; }
.oyk-dot li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .74em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oyk-brand-mid);
}

/* テーブル */
.oyk-table-wrap { margin: 0 0 var(--oyk-sp-4); overflow-x: auto; }
#subPage .oyk2 table.oyk-table {
  width: 100%;
  min-width: 480px;              /* これ以下だと折返しが崩れる。SPは横スクロール */
  border-collapse: collapse;
  background: var(--oyk-surface);
  border: var(--oyk-bw) solid var(--oyk-line);
  border-radius: var(--oyk-r-sm);
  overflow: hidden;
}
#subPage .oyk2 table.oyk-table th,
#subPage .oyk2 table.oyk-table td {
  padding: var(--oyk-sp-3) var(--oyk-sp-4);
  border: var(--oyk-bw) solid var(--oyk-line);
  font-size: var(--oyk-fs-ui);
  line-height: var(--oyk-lh-snug);
  text-align: left;
  vertical-align: top;
}
#subPage .oyk2 table.oyk-table thead th {
  background: var(--oyk-brand-pale);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
  white-space: nowrap;
}
#subPage .oyk2 table.oyk-table tbody th {
  width: 30%;
  background: var(--oyk-surface-sub);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-ink);
}

/* 補足ボックス */
.oyk-tip {
  margin: 0 0 var(--oyk-sp-4);
  padding: var(--oyk-pad-box);
  background: var(--oyk-brand-pale);
  border-radius: var(--oyk-r-md);
}
#subPage .oyk2 .oyk-tip__title {
  margin: 0 0 7px;
  font-size: var(--oyk-fs-body-sm);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-brand-deep);
}
#subPage .oyk2 .oyk-tip p:last-child { margin-bottom: 0; }

/* FAQ */
.oyk-faq { margin: 0 0 var(--oyk-sp-4); border-top: var(--oyk-bw) solid var(--oyk-line); }
.oyk-faq__item { border-bottom: var(--oyk-bw) solid var(--oyk-line); }
.oyk-faq__item summary {
  position: relative;
  display: block;
  padding: var(--oyk-sp-4) 46px var(--oyk-sp-4) 38px;  /* Qバッジ26px / 開閉矢印ぶん */
  font-size: var(--oyk-fs-body);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-snug);
  color: var(--oyk-ink);
  cursor: pointer;
  list-style: none;
}
.oyk-faq__item summary::-webkit-details-marker { display: none; }
.oyk-faq__item summary::before,
.oyk-faq__body::before {
  position: absolute;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: var(--oyk-fs-caption);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-none);
}
.oyk-faq__item summary::before {
  content: 'Q';
  left: 0;
  top: 15px;
  background: var(--oyk-brand);
  color: var(--oyk-on-brand);
}
.oyk-faq__item summary::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-right: var(--oyk-bw-head) solid var(--oyk-brand);
  border-bottom: var(--oyk-bw-head) solid var(--oyk-brand);
  transform: rotate(45deg);
  transition: transform var(--oyk-dur) var(--oyk-ease);
}
.oyk-faq__item[open] summary::after { transform: rotate(-135deg); }
.oyk-faq__body { position: relative; padding: 0 var(--oyk-sp-5) var(--oyk-sp-5) 38px; }
.oyk-faq__body::before {
  content: 'A';
  left: 0;
  top: 0;
  background: var(--oyk-accent-bg-2);
  color: var(--oyk-accent-ink-2);
}
#subPage .oyk2 .oyk-faq__body p {
  margin: 0 0 var(--oyk-sp-2);
  font-size: var(--oyk-fs-body-sm);
}
#subPage .oyk2 .oyk-faq__body p:last-child { margin-bottom: 0; }

/* 関連リンクボタン */
.oyk-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oyk-sp-2);
  max-width: var(--oyk-w-cta);
  margin: var(--oyk-sp-6) auto 0;
  padding: var(--oyk-sp-4) var(--oyk-sp-6);
  background: var(--oyk-brand);
  border-radius: var(--oyk-r-lg);
  color: var(--oyk-on-brand);
  font-size: var(--oyk-fs-title-sm);
  font-weight: var(--oyk-fw-bold);
  line-height: var(--oyk-lh-tight);
  text-align: center;
  transition: transform var(--oyk-dur) var(--oyk-ease),
              opacity var(--oyk-dur) var(--oyk-ease);
}
.oyk-cta:hover { transform: translateY(-2px); opacity: .92; }
.oyk-cta svg {
  width: var(--oyk-icon-inline);
  height: var(--oyk-icon-inline);
  flex: none;
  color: var(--oyk-on-brand);
}
/* サイト内の事業所一覧へのボタン。電話ボタンと見分けるため、白地に緑の枠線にする */
.oyk2 .oyk-cta.is-sub {
  background: var(--oyk-surface);
  border: var(--oyk-bw-head) solid var(--oyk-brand);
  color: var(--oyk-brand-deep);
}
.oyk2 .oyk-cta.is-sub svg { color: var(--oyk-brand); }

/* 出典 */
.oyk-source {
  margin-top: var(--oyk-gap-block);
  padding: var(--oyk-sp-4) var(--oyk-pad-box);
  background: var(--oyk-surface-sub);
  border: var(--oyk-bw) solid var(--oyk-line);
  border-radius: var(--oyk-r-md);
}
#subPage .oyk2 .oyk-source__title {
  margin: 0 0 7px;
  font-size: var(--oyk-fs-ui-sm);
  font-weight: var(--oyk-fw-bold);
  color: var(--oyk-ink);
}
#subPage .oyk2 .oyk-source p {
  margin: 0;
  font-size: var(--oyk-fs-note);
  line-height: var(--oyk-lh-relaxed);
  color: var(--oyk-muted);
}
.oyk-source a {
  color: var(--oyk-brand-deep);
  text-decoration: underline;
  word-break: break-all;
}

/* ============================================================================
   レスポンシブ — 「構造が変わるところ」だけ書く。
   文字サイズ・余白・角丸はトークン側（oyakudachi-tokens.css）で切り替わるので
   ここに font-size を足さないこと。増やすと記事ごとにズレる原因になる。
   ========================================================================== */

/* --- タブレット（max-width: 900px）---------------------------------------- */
@media (max-width: 900px) {
  .oyk-hero__grid { grid-template-columns: 1fr; }
  .oyk-hero__figure { min-height: 0; aspect-ratio: 16 / 9; order: -1; }
  .oyk-summary { grid-template-columns: repeat(3, 1fr); }
  .oyk-detail { grid-template-columns: 1fr; }
  .oyk-contact__grid { grid-template-columns: 1fr; gap: var(--oyk-sp-4); }
}

/* --- スマートフォン（max-width: 640px）------------------------------------ */
@media (max-width: 640px) {
  /* 5列 → 2列。5つめ（詳しい品目）は横いっぱいに使ってCTA化する */
  .oyk-summary { grid-template-columns: repeat(2, 1fr); }
  .oyk-summary__item:nth-child(5) {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: var(--oyk-sp-3);
    padding: var(--oyk-sp-3) var(--oyk-sp-4);
  }
  .oyk-summary__item:nth-child(5) > div { flex: 1 1 auto; }

  /* 配送月：6つ横並びは詰まるので 3列 × 2段 */
  .oyk-schedule { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oyk-sp-2); }

  /* PDFリンク：タイトルを2行目に落として、種別とサイズを1行目にまとめる */
  .oyk-links a { flex-wrap: wrap; }
  .oyk-links .name { flex: 1 1 100%; order: 3; margin-top: 2px; }

  /* 電話ボタンは横幅いっぱい＝タップ面積を最大化 */
  .oyk-tel { width: 100%; justify-content: center; gap: var(--oyk-sp-2); padding: var(--oyk-sp-3); }
  .oyk-tel svg { width: 24px; height: 24px; }

  #subPage .oyk2 dl.oyk-meta dt { width: 4.6em; }
  #subPage .oyk2 p.oyk-disclaimer { text-align: left; }

  /* 目次は2段組をやめる */
  #subPage .oyk2 ol.oyk-toc__list { columns: 1; }

  .oyk-faq__item summary { padding: var(--oyk-sp-3) 36px var(--oyk-sp-3) 34px; }
  .oyk-faq__body { padding: 0 6px var(--oyk-sp-4) 34px; }
}

/* ============================================================================
   スマホ用 追従電話バー（紙にはできない、Webだけの導線）
   ========================================================================== */
.oyk-tel-scroll {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--oyk-z-bar);
  padding: var(--oyk-sp-2) var(--oyk-sp-3) calc(var(--oyk-sp-2) + env(safe-area-inset-bottom));
  background: var(--oyk-surface-bar);
  border-top: var(--oyk-bw) solid var(--oyk-line);
  box-shadow: var(--oyk-shadow-bar);
  transform: translateY(110%);
  transition: transform var(--oyk-dur-slow) var(--oyk-ease);
}
.oyk-tel-scroll.is-visible { transform: translateY(0); }
.oyk-tel-scroll a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oyk-sp-2);
  padding: var(--oyk-sp-3);
  background: var(--oyk-brand);
  border-radius: var(--oyk-r-md);
  color: var(--oyk-on-brand);
}
.oyk-tel-scroll svg {
  width: var(--oyk-icon-inline);
  height: var(--oyk-icon-inline);
  flex: none;
  color: var(--oyk-on-brand);
}
.oyk-tel-scroll .t {
  font-size: var(--oyk-fs-note);
  font-weight: var(--oyk-fw-bold);
}
.oyk-tel-scroll .n {
  font-family: var(--oyk-font-num);
  font-size: var(--oyk-fs-tel-bar);
  font-weight: var(--oyk-fw-medium);
  line-height: var(--oyk-lh-none);
  white-space: nowrap;
}
/* 表示はスマホのみ。この定義は .oyk-tel-scroll の後ろに置くこと（後勝ちのため） */
@media (max-width: 640px) {
  .oyk-tel-scroll { display: block; }
}

/* ============================================================================
   印刷（A4）— リーダーの原案はそのまま紙としても成立させる
   ========================================================================== */
@media print {
  #header, #header_sp, #nav, #footer, #bread, #pageUp,
  .oyk-tel-scroll, .oyk-switch, .oyk-read, .skip-link { display: none !important; }
  .oyk-summary { grid-template-columns: repeat(5, 1fr); }
  .oyk-detail { grid-template-columns: repeat(2, 1fr); }
  .oyk-card, .oyk-hero, .oyk-contact, .oyk-alert { break-inside: avoid; }
  .oyk2, .oyk2 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}