@charset "utf-8";
/* =============================================================================
   blocks.css — 既存テーマ mitsuki のUIブロックを静的に再現したスタイル
   -----------------------------------------------------------------------------
   出典：wordpress-theme/mitsuki/assets/sass/style.scss（5,977行）
         wordpress-theme/mitsuki/assets/sass/change.scss（937行）
   色・寸法・余白・角丸・影・ホバーはすべて既存コードの実値を移植しています。
   新しいブランドカラーやフォントは追加していません。

   既存と変えている点（design-lab側でのアクセシビリティ改善。見た目は維持）：
     - :focus-visible のアウトラインを新規に定義（既存テーマにはCSS上1件も無い）
     - px直書きだった font-size を rem 化（文字サイズ拡大に追随させるため）
     - white-space:nowrap による横スクロールの原因を撤去
     - prefers-reduced-motion への配慮
     - 見出しの視覚サイズはクラスで与え、見出しレベル(h1〜h6)は文書構造に従う
   ========================================================================== */

/* ---------- デザイントークン（既存テーマの実値） ---------- */
:root {
  /* 色：style.scss:3-6 の変数、および各所のリテラル */
  --navy: #071943;        /* $blue  主要アクセント */
  --coral: #f6867c;       /* $orange 副アクセント */
  --cream: #f9f4ef;       /* $gray  セクション背景 */
  --ink: #000000;         /* $c-main */
  --ink-soft: #333333;    /* 下層ページ見出し・本文 */
  --ink-body: #1d1d1d;
  --slate: #43485b;
  --line: #bcbcbc;
  --line-light: #e0e0e0;
  --line-table: #dfe5e8;
  --line-strong: #707070;
  --line-column: #717171;
  --gray-panel: #f5f5f5;
  --white: #ffffff;
  --white-panel: #fffffe;
  --white-soft: #fafafa;
  --cat-navy: #000937;    /* カテゴリタグ・ページネーション枠 */
  --brick: #c1341f;       /* 会社ページ見出し下線・記事タグ */
  --line-green: #00b301;  /* LINE相談ボタン専用 */

  /* 書体：style.scss:8-12 / header.php の Typekit kitId nud4ons */
  --font-heading: "dnp-shuei-mgothic-std", "Noto Sans JP", "Hiragino Sans",
                  "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", sans-serif;
  --font-num: "Overpass", "Roboto", "Inter", sans-serif;

  /* レイアウト定数 */
  --w-1000: 1000px;
  --w-1160: 1160px;
  --w-1200: 1200px;
  --w-1240: 1240px;
  --w-1280: 1280px;

  /* 影：style.scss:896 / 4913 */
  --shadow-card: 0 2px 8px 0 rgba(143, 147, 145, 0.16);
  --shadow-hover: 2px 2px 5px gray;
}

/* ---------- ベース ---------- */
html {
  font-size: 62.5%; /* 1rem = 10px。既存テーマ style.scss:118-121 と同値 */
}
body {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 500;
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  /* 「Purpose/Vision/Mission」のような分割できない長い語で
     横スクロールが発生しないようにする（文字拡大時の保険） */
  overflow-wrap: anywhere;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; border: 0; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }

/* フォーカス表示：既存テーマには :focus の定義が1件も無いため新規に追加 */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible,
.bk-cta :focus-visible,
.bk-faq :focus-visible,
.bk-audience :focus-visible,
.bk-story :focus-visible {
  outline-color: var(--white);
}

/* モーション配慮：既存テーマは未対応 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* スクリーンリーダー専用テキスト */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 共通コンテナ ---------- */
.bk-inner { max-width: var(--w-1240); margin-inline: auto; padding-inline: 20px; }
.bk-inner--1000 { max-width: var(--w-1000); }
.bk-inner--1160 { max-width: var(--w-1160); }
.bk-inner--1200 { max-width: var(--w-1200); }
.bk-inner--1280 { max-width: var(--w-1280); }

.bk-sec { padding-block: 120px; }
.bk-sec--cream { background-color: var(--cream); }
.bk-sec--navy { background-color: var(--navy); color: var(--white); }
.bk-sec--tight { padding-block: 80px; }
@media (max-width: 767px) {
  .bk-sec { padding-block: 80px; }
  .bk-sec--tight { padding-block: 56px; }
}

/* =============================================================================
   C-01 section-heading-centered — 標準セクション見出し
   出典 style.scss:767-778 ほか（4.8rem / dnp / 600 / letter-spacing .06em）
   ========================================================================== */
.bk-h-center {
  margin: 0 0 60px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.bk-sec--navy .bk-h-center { color: var(--white); }
@media (max-width: 767px) {
  .bk-h-center { font-size: 3.2rem; margin-bottom: 40px; }
}

/* =============================================================================
   C-02 section-heading-underline-accent — 下線アクセント付き見出し
   出典 style.scss:2302-2337（85x8px / radius 4px / #f6867c / bottom -20px）
   既存は <span> 必須だったが、::after に変更して span 依存を解消
   ========================================================================== */
.bk-h-accent {
  position: relative;
  margin: 0 0 108px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bk-h-accent::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 85px;
  height: 8px;
  margin-left: -42.5px;
  border-radius: 4px;
  background-color: var(--coral);
}
.bk-sec--navy .bk-h-accent { color: var(--white); }
@media (max-width: 767px) {
  .bk-h-accent { font-size: 3.2rem; margin-bottom: 80px; line-height: 1.25; }
  .bk-h-accent::after { bottom: -32px; }
}

/* C-03 section-heading-badge — 白バッジ型見出し（style.scss:1778-1802） */
.bk-h-badge {
  margin: 0 0 80px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 2;
}
.bk-h-badge > span {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 10px;
  background-color: var(--white);
  color: var(--navy);
}
@media (max-width: 767px) {
  .bk-h-badge { font-size: 2.6rem; margin-bottom: 48px; line-height: 1.3; }
  .bk-h-badge > span { display: block; padding: 20px 12px; }
}

/* B-04 page-title-centered（style.scss:4432-4459） */
.bk-page-title {
  margin: 0 0 96px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.bk-page-title > span { position: relative; display: inline-block; }
.bk-page-title > span::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -24px;
  width: 64px; height: 4px; margin-left: -32px;
  border-radius: 2px;
  background-color: var(--brick);
}
@media (max-width: 767px) { .bk-page-title { font-size: 3.2rem; margin-bottom: 56px; } }

/* B-03 hero-eyebrow-heading（style.scss:1441-1475） */
.bk-eyebrow {
  margin: 0 0 40px;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bk-eyebrow--small { font-size: 1.6rem; color: var(--coral); font-family: "Roboto", sans-serif; }
@media (max-width: 767px) { .bk-eyebrow { font-size: 2.4rem; margin-bottom: 32px; } }

/* =============================================================================
   I-01 btn-pill-primary — ピル型ボタン
   出典 style.scss:818-834 / 611-627 / 3050-3066 / 4907-4915
   既存の固定px幅は撤去し、内容に応じて可変にしている（文字拡大時のはみ出し防止）
   ========================================================================== */
.bk-btn {
  display: inline-block;
  position: relative;
  top: 0;
  min-width: 280px;
  padding: 1.7rem 4rem;
  border-radius: 99px;
  background-color: var(--navy);
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  transition: all 0.4s;
}
.bk-btn:hover { top: -3px; box-shadow: var(--shadow-hover); }
.bk-btn--line {
  /* 既存は #00b301。白文字とのコントラスト比が約2.6:1でWCAG AA未達のため、
     色相を保ったまま暗くした #157a2b を採用（比 5.2:1）。要MTG合意。 */
  background-color: #157a2b;
}
.bk-btn--ghost { background-color: var(--white); color: var(--navy); }
.bk-btn--wide { display: block; width: 80%; margin-inline: auto; font-size: 2.8rem; }
.bk-btn__note { display: block; margin-top: 0.4em; font-size: 1.4rem; font-weight: 500; opacity: 0.9; }
@media (max-width: 767px) {
  .bk-btn { min-width: 0; width: 100%; font-size: 1.8rem; padding: 1.6rem 2rem; }
  .bk-btn--wide { width: 100%; font-size: 2.2rem; }
}

/* テキストリンク（下線付き） */
.bk-textlink {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  line-height: 1.7;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.4s;
}
.bk-textlink:hover { opacity: 0.8; }

/* =============================================================================
   I-02 decorative-shapes — 装飾図形
   出典 style.scss:715-761 ほか。既存は絶対配置のピクセル決め打ちだが、
   design-lab では親セクション基準の % 配置にして崩れにくくしている。
   ========================================================================== */
.bk-deco { position: relative; overflow: hidden; }
.bk-deco > .bk-deco__shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.bk-deco > * { position: relative; z-index: 1; }
.bk-deco__shape--tr { top: -60px; right: -70px; width: 250px; }
.bk-deco__shape--bl { bottom: -80px; left: -50px; width: 240px; }
.bk-deco__shape--tl { top: 40px; left: -100px; width: 170px; }
.bk-deco__shape--br { right: -40px; bottom: 40px; width: 170px; }
@media (max-width: 767px) {
  .bk-deco__shape--tr { width: 150px; right: -50px; }
  .bk-deco__shape--bl { width: 130px; left: -50px; }
  .bk-deco__shape--tl { width: 110px; left: -50px; }
  .bk-deco__shape--br { width: 100px; right: -30px; }
}

/* =============================================================================
   A-01 site-header-global — グローバルヘッダー
   出典 header.php / style.scss:179-341
   改善：<nav> を追加、閉状態のメニューを完全に隠す、フォーカス表示
   ========================================================================== */
.bk-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 16px 20px;
  background-color: var(--white);
  transition: background-color 0.4s;
}
.bk-header__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1371px;
  margin-inline: auto;
}
.bk-header__logo img { width: 146px; height: auto; }
.bk-header__nav ul {
  display: flex;
  flex-wrap: wrap;          /* 文字サイズ200%でも横あふれしないように折り返す */
  align-items: center;
  gap: 10px 32px;
  margin: 0; padding: 0;
  list-style: none;
}
.bk-header__nav a {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.bk-header__nav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 6px; }
.bk-header__spacer { margin-left: auto; }
@media (max-width: 1024px) {
  .bk-header__nav ul { flex-wrap: wrap; gap: 12px 20px; }
  .bk-header__nav a { font-size: 1.5rem; }
}
@media (max-width: 767px) {
  .bk-header__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bk-header__spacer { margin-left: 0; }
}

/* =============================================================================
   A-03 a11y-display-controls — 表示切替UI（見た目のみ再現）
   出典 style.scss:350-445。既存の <li role="button"> を <button> に置換し、
   aria-pressed とフォーカス表示を付与。実際の切替処理は本番テーマ側の責務。
   ========================================================================== */
.bk-a11ybar { padding: 12px 20px; background-color: inherit; }
.bk-a11ybar__inner {
  display: flex;
  flex-wrap: wrap;          /* 文字サイズ200%でも横あふれしないように折り返す */
  justify-content: flex-end;
  gap: 16px 40px;
  max-width: var(--w-1240);
  margin-inline: auto;
}
.bk-a11ybar__group { flex-wrap: wrap; }
.bk-a11ybar__btns { flex-wrap: wrap; }
.bk-a11ybar__group { display: flex; align-items: center; gap: 16px; }
.bk-a11ybar__label {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
}
.bk-a11ybar__btns { display: flex; gap: 8px; }
.bk-a11ybar__btn {
  min-width: 3.2em;
  padding: 0.2em 0.6em;
  border: 2px solid var(--navy);
  border-radius: 99px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 1.8rem;
  line-height: 1.6;
  cursor: pointer;
}
.bk-a11ybar__btn[aria-pressed="true"] {
  background-color: var(--navy);
  color: var(--white);
}
@media (max-width: 767px) {
  .bk-a11ybar__inner { justify-content: space-between; gap: 16px; }
  .bk-a11ybar__group { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bk-a11ybar__label { font-size: 1.5rem; }
  .bk-a11ybar__btn { font-size: 1.6rem; }
}

/* =============================================================================
   B-01 hero-text-illust-cta — テキスト主体のヒーロー
   出典 front-page.php / style.scss:447-527
   改善：イラストの絶対配置（top:-410px 等）をやめ、グリッドで並べている
   ========================================================================== */
.bk-hero-text { padding-block: 64px 96px; }
.bk-hero-text__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 368px;
  gap: 40px;
  align-items: end;
}
.bk-hero-text__title {
  margin: 0 0 1.2em;
  font-family: var(--font-heading);
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 1.57;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.bk-hero-text__lead { margin: 0 0 1.4em; font-size: 2.2rem; line-height: 1.818; }
.bk-hero-text__note { margin: 0; font-size: 1.8rem; line-height: 1.7; letter-spacing: 0.06em; }
@media (max-width: 1024px) {
  .bk-hero-text__grid { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 767px) {
  .bk-hero-text { padding-block: 40px 64px; }
  .bk-hero-text__grid { grid-template-columns: 1fr; gap: 24px; }
  .bk-hero-text__title { font-size: 2.8rem; }
  .bk-hero-text__lead { font-size: 1.8rem; }
  .bk-hero-text__note { font-size: 1.6rem; }
  .bk-hero-text__media { max-width: 260px; margin-inline: auto; }
}

/* =============================================================================
   B-02 hero-split-text-image — 左右分割ヒーロー
   出典 style.scss:1873-1941 / 5189-5272（47% : 53%）
   改善：SPの padding-left:140px を撤去
   ========================================================================== */
.bk-hero-split { background-color: var(--cream); padding-block: 56px 40px; }
.bk-hero-split__grid {
  display: grid;
  grid-template-columns: 47% 53%;
  gap: 40px;
  align-items: center;
}
.bk-hero-split__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.bk-hero-split__logo { width: min(90%, 320px); margin-top: 20px; }
.bk-hero-split__sub { margin: 0; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.4; }
.bk-hero-split__media img { width: 100%; }
@media (max-width: 1024px) { .bk-hero-split__grid { grid-template-columns: 55% 45%; } }
@media (max-width: 767px) {
  .bk-hero-split__grid { grid-template-columns: 1fr; gap: 24px; }
  .bk-hero-split__title { font-size: 2.8rem; }
  .bk-hero-split__sub { font-size: 1.7rem; }
}

/* =============================================================================
   D-08 person-story-overlay — 人物写真＋半透明パネル
   出典 style.scss:2340-2438 / 5606-5643
   改善：PC用写真をCSS背景から <img> に変更（alt を持てるように）
         パネルの不透明度を .57 → .92 に上げてコントラストを確保
   ========================================================================== */
.bk-person { position: relative; }
.bk-person + .bk-person { margin-top: 4px; }
.bk-person__media { position: relative; margin: 0; }
.bk-person__media img {
  display: block;
  width: 100%;
  height: clamp(360px, 46vw, 640px);
  object-fit: cover;
}
.bk-person__panel {
  position: absolute;
  right: 6%;
  bottom: 10%;
  width: min(577px, 46%);
  padding: 40px 28px;
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.92);
}
.bk-person--left .bk-person__panel { right: auto; left: 6%; }
.bk-person__role {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brick);
}
.bk-person__name {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bk-person__text { margin: 0; font-size: 1.7rem; line-height: 1.85; color: var(--ink-soft); }
@media (max-width: 1024px) {
  .bk-person__panel { width: min(577px, 56%); padding: 28px 20px; }
  .bk-person__name { font-size: 2.4rem; }
}
@media (max-width: 767px) {
  .bk-person__media img { height: 260px; }
  .bk-person__panel,
  .bk-person--left .bk-person__panel {
    position: relative;
    z-index: 1;
    right: auto; left: auto; bottom: auto; top: auto;
    width: 100%;
    margin-top: -32px;
    border-radius: 16px;
    padding: 24px 20px;
    background-color: rgba(255, 255, 255, 0.96);
  }
  .bk-person__name { font-size: 2.2rem; margin-bottom: 16px; }
  .bk-person__text { font-size: 1.6rem; }
}

/* ヒーローとして使う場合（B案） */
.bk-person--hero .bk-person__media img { height: clamp(420px, 60vw, 720px); }
.bk-person--hero .bk-person__name { font-size: 3.6rem; }
.bk-person--hero .bk-person__panel { bottom: auto; top: 12%; }
@media (max-width: 767px) {
  .bk-person--hero .bk-person__media img { height: 300px; }
  .bk-person--hero .bk-person__name { font-size: 2.6rem; }
  .bk-person--hero .bk-person__panel { top: auto; }
}

/* =============================================================================
   D-05 audience-3col-columns — 対象者別カラム（目的別導線）
   出典 style.scss:1972-2091 / 5295-5337（ネイビー面＋白ピルのラベル）
   改善：親の height:calc(100% - 290px) 依存を撤去。リンク化してタブ移動可能に
   ========================================================================== */
.bk-audience { background-color: var(--navy); color: var(--white); padding-block: 100px; }
.bk-audience__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0; padding: 0;
  list-style: none;
}
.bk-audience__list--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-audience__item { padding-inline: 32px; border-left: 1px solid var(--line-column); }
.bk-audience__item:first-child { border-left: 0; padding-left: 0; }
.bk-audience__item:last-child { padding-right: 0; }
.bk-audience__link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  position: relative;
  top: 0;
  transition: all 0.4s;
}
.bk-audience__link:hover { top: -3px; }
.bk-audience__tag {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 10px;
  background-color: var(--white);
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.bk-audience__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.38;
  color: var(--white);
}
.bk-audience__desc { margin: 0; font-size: 1.6rem; line-height: 1.6; color: var(--white); }
.bk-audience__arrow {
  margin-top: auto;
  padding-top: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (max-width: 1024px) {
  .bk-audience__list,
  .bk-audience__list--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .bk-audience__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .bk-audience { padding-block: 64px; }
  .bk-audience__list,
  .bk-audience__list--3col { grid-template-columns: 1fr; gap: 0; }
  .bk-audience__item {
    padding: 32px 0;
    border-left: 0;
    border-top: 1px solid var(--line-column);
  }
  .bk-audience__item:first-child { border-top: 0; padding-top: 0; }
}

/* =============================================================================
   D-01 service-image-text-alternating — 事業紹介・左右交互
   出典 front-page.php:47-80 / style.scss:705-856
   改善：2件固定の .flex/.flex2 をグリッド化。左右交互を --reverse で制御
   ========================================================================== */
.bk-service { display: grid; gap: 120px; }
.bk-service__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.bk-service__item--reverse .bk-service__media { order: -1; }
.bk-service__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 4px;
  background-color: var(--navy);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bk-service__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
}
.bk-service__logo { display: block; width: min(100%, 300px); margin-bottom: 24px; }
.bk-service__desc { margin: 0 0 32px; font-size: 2rem; line-height: 1.66; }
.bk-service__media img { width: 100%; }
.bk-service__media--rounded img { border-radius: 20px; }
@media (max-width: 900px) {
  .bk-service { gap: 72px; }
  .bk-service__item { grid-template-columns: 1fr; gap: 24px; }
  .bk-service__item--reverse .bk-service__media { order: 0; }
  .bk-service__title { font-size: 2.6rem; }
  .bk-service__desc { font-size: 1.7rem; margin-bottom: 24px; }
}

/* 3事業のつながりを示す帯（04_product_philosophy.md の三層構造） */
.bk-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 72px;
  padding: 0;
  list-style: none;
  counter-reset: chain;
}
.bk-chain__item {
  position: relative;
  padding: 28px 24px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background-color: var(--white);
}
.bk-chain__item::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  font-size: 2.4rem;
  color: var(--coral);
  font-weight: 700;
}
.bk-chain__item:last-child::after { content: none; }
.bk-chain__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
}
.bk-chain__desc { margin: 0; font-size: 1.6rem; line-height: 1.7; }
@media (max-width: 767px) {
  .bk-chain { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  .bk-chain__item::after {
    content: "↓";
    top: auto; right: auto;
    left: 50%; bottom: -28px;
    transform: translateX(-50%);
  }
}

/* =============================================================================
   D-04 merit-list-with-image — 項目リスト＋写真
   出典 style.scss:2187-2338（左 calc(100% - 500px) / 右 500px / 丸ポチ見出し）
   改善：中間幅で潰れる calc をグリッドの minmax に変更
   ========================================================================== */
.bk-merit { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 50px; align-items: start; }
.bk-merit--reverse .bk-merit__media { order: -1; }
.bk-merit__list { margin: 0; padding: 0; list-style: none; }
.bk-merit__item { padding-block: 40px; border-top: 1px solid var(--line-light); }
.bk-merit__item:last-child { border-bottom: 1px solid var(--line-light); }
.bk-merit__title {
  position: relative;
  margin: 0 0 16px;
  padding-left: 1.2em;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bk-merit__title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--coral);
}
.bk-merit__text { margin: 0; padding-left: 1.2em; font-size: 1.7rem; line-height: 1.7; color: var(--ink-body); }
.bk-merit__media img { width: 100%; border-radius: 20px; }
@media (max-width: 1024px) {
  .bk-merit { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; }
}
@media (max-width: 767px) {
  .bk-merit { grid-template-columns: 1fr; gap: 24px; }
  .bk-merit--reverse .bk-merit__media { order: 0; }
  .bk-merit__item { padding-block: 28px; }
  .bk-merit__title { font-size: 1.9rem; }
  .bk-merit__text { font-size: 1.6rem; }
}

/* =============================================================================
   D-09 vision-mission-block — Purpose / Vision / Mission
   出典 style.scss:4501-4533（白パネル radius:30px / ラベル Roboto #f6867c）
   改善：ラベルを <p> に、見出しは h2/h3 に。ラベル色のコントラストを確保
   ========================================================================== */
.bk-vision {
  max-width: var(--w-1000);
  margin-inline: auto;
  padding: 80px 133px 96px;
  border-radius: 30px;
  background-color: var(--white-panel);
}
.bk-vision__item { padding-top: 57px; border-bottom: 1px solid var(--line-table); }
.bk-vision__item:first-child { padding-top: 0; }
.bk-vision__item:last-child { border-bottom: 0; }
.bk-vision__label {
  margin: 0 0 24px;
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* 既存の #f6867c は白背景に対し約2.6:1でAA未達。同系で暗くした値を使用 */
  color: #b8483c;
}
.bk-vision__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.666;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.bk-vision__text { margin: 0 0 55px; font-size: 1.8rem; line-height: 1.8; letter-spacing: 0.06em; }
.bk-vision__item:last-child .bk-vision__text { margin-bottom: 0; }
.bk-vision rt { font-size: 0.5em; }
@media (max-width: 1024px) { .bk-vision { padding: 56px 50px 64px; } }
@media (max-width: 767px) {
  .bk-vision { padding: 40px 20px 48px; border-radius: 16px; }
  .bk-vision__item { padding-top: 40px; }
  .bk-vision__title { font-size: 2.4rem; }
  .bk-vision__text { font-size: 1.6rem; margin-bottom: 40px; }
}

/* =============================================================================
   D-10 business-summary-list — 事業内容リスト
   出典 style.scss:4534-4591（丸ポチ付き h4 / 下罫線）
   ========================================================================== */
.bk-summary { max-width: var(--w-1000); margin-inline: auto; }
.bk-summary__group + .bk-summary__group { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line-table); }
.bk-summary__group-title {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.54;
  color: var(--ink-soft);
}
.bk-summary__item + .bk-summary__item { margin-top: 40px; }
.bk-summary__title {
  position: relative;
  margin: 0 0 16px;
  padding-left: 0.9em;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.bk-summary__title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background-color: var(--coral);
}
.bk-summary__text { margin: 0; padding-left: 0.9em; font-size: 1.8rem; line-height: 1.8; letter-spacing: 0.06em; }
@media (max-width: 767px) {
  .bk-summary__group-title { font-size: 2.4rem; }
  .bk-summary__title { font-size: 2rem; }
  .bk-summary__text { font-size: 1.6rem; }
}

/* =============================================================================
   D-11 photo-rounded-figure — 角丸写真
   出典 style.scss:4654-4659 / 5586-5595（radius 30px / height 368px / cover）
   ========================================================================== */
.bk-photo { margin: 0; }
.bk-photo img {
  width: 100%;
  height: 368px;
  border-radius: 30px;
  object-fit: cover;
}
.bk-photo--tall img { height: 480px; }
.bk-photo__caption { margin: 12px 0 0; font-size: 1.5rem; color: var(--ink-soft); }
@media (max-width: 767px) {
  .bk-photo img { height: 220px; border-radius: 16px; }
  .bk-photo--tall img { height: 260px; }
}

/* =============================================================================
   D-02 feature-point-list — POINT番号付き特徴リスト
   出典 style.scss:858-957（白カード radius 8px / 丸バッジ 75px / 影）
   ========================================================================== */
.bk-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 32px; }
.bk-points__item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  border-radius: 8px;
  background-color: var(--white);
  box-shadow: var(--shadow-card);
}
.bk-points__badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 75px; height: 75px;
  border-radius: 50%;
  background-color: var(--navy);
  color: var(--white);
}
.bk-points__badge-label { font-family: var(--font-num); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; }
.bk-points__badge-num { font-family: var(--font-num); font-size: 2.4rem; font-weight: 500; line-height: 1.1; }
.bk-points__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  .bk-points__item { flex-direction: column; text-align: center; gap: 20px; padding: 28px 20px; }
  .bk-points__title { font-size: 2rem; }
}

/* =============================================================================
   D-03 merit-numbered-cards — 番号付きメリットカード
   出典 style.scss:1567-1629（ネイビー帯 radius 8px 8px 0 0 ／白本文）
   ========================================================================== */
.bk-numcards { max-width: 720px; margin-inline: auto; padding: 0; list-style: none; display: grid; gap: 24px; }
.bk-numcards__head {
  margin: 0;
  padding: 16px 24px;
  border-radius: 8px 8px 0 0;
  background-color: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.bk-numcards__body {
  margin: 0;
  padding: 20px 29px;
  border-radius: 0 0 8px 8px;
  background-color: var(--white);
  font-size: 1.7rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  .bk-numcards__head { font-size: 1.8rem; padding: 16px 18px; }
  .bk-numcards__body { padding: 20px 18px; font-size: 1.6rem; }
}

/* =============================================================================
   D-12 achievement-cards / 拠点カード
   出典 style.scss:1254-1296（白カード radius 20px）
   ========================================================================== */
.bk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.bk-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-cards__item {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 32px;
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: var(--shadow-card);
}
.bk-cards__region {
  margin: 0 0 10px;
  font-family: var(--font-num);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brick);
}
.bk-cards__title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-soft);
}
.bk-cards__text { margin: 0; font-size: 1.6rem; line-height: 1.7; }
@media (max-width: 1024px) { .bk-cards, .bk-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bk-cards, .bk-cards--3 { grid-template-columns: 1fr; } }

/* =============================================================================
   E-03 flow-steps-illustrated — ステップ
   出典 style.scss:1063-1153（コーラルの丸バッジ 50px / 下罫線）
   ========================================================================== */
.bk-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.bk-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 40px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.bk-steps__item:last-child { border-bottom: 0; }
.bk-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: var(--coral);
  color: var(--white);
  font-family: var(--font-num);
  font-size: 2.2rem;
  font-weight: 700;
}
.bk-steps__icon { margin-bottom: 24px; }
.bk-steps__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
@media (max-width: 767px) { .bk-steps__title { font-size: 2.2rem; } }

/* =============================================================================
   E-01 price-navy-box — ネイビー訴求ボックス
   出典 style.scss:959-1061（radius 10px / padding 30px 40px）
   ========================================================================== */
.bk-navybox {
  padding: 40px;
  border-radius: 10px;
  background-color: var(--navy);
  color: var(--white);
}
.bk-navybox__title {
  margin: 0 0 20px;
  padding-bottom: 17px;
  border-bottom: 2px solid #ededed;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #FFF;
}
.bk-navybox__list { margin: 0 0 20px; padding-left: 1.2em; }
.bk-navybox__list li { margin-bottom: 10px; font-size: 2rem; line-height: 1.666; letter-spacing: 0.06em; color:#FFF; }
.bk-navybox__note { margin: 0; font-size: 1.5rem; line-height: 1.8; letter-spacing: 0.06em; color:#FFF; }
@media (max-width: 767px) {
  .bk-navybox { padding: 28px 20px; }
  .bk-navybox__title { font-size: 2.2rem; }
  .bk-navybox__list li { font-size: 1.7rem; }
}

/* =============================================================================
   E-05 faq-qa-list — FAQ
   出典 style.scss:2767-2841（ネイビー面＋白パネル radius 16px / Q A マーク）
   改善：Q/A を ::before ではなく実テキスト＋視覚的非表示ラベルで提供
   ========================================================================== */
.bk-faq { background-color: var(--navy); padding-block: 100px; }
.bk-faq__panel { border-radius: 16px; background-color: var(--white); padding: 64px 40px; }
.bk-faq__list { max-width: 827px; margin-inline: auto; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.bk-faq__item { padding-block: 32px; border-bottom: 1px solid var(--line-strong); }
.bk-faq__q, .bk-faq__a { position: relative; padding-left: 2em; font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.77; letter-spacing: 0.06em; color: var(--ink-soft); }
.bk-faq__q { margin: 0 0 24px; font-weight: 700; }
.bk-faq__a { margin: 0; font-weight: 500; }
.bk-faq__mark { position: absolute; left: 0; top: 0; font-family: var(--font-num); font-weight: 700; color: #b8483c; }
@media (max-width: 767px) {
  .bk-faq { padding-block: 64px; }
  .bk-faq__panel { padding: 32px 16px; }
}

/* =============================================================================
   G-02 article-card-3col — 記事カード3件
   出典 page-media.php / style.scss:2954-3074
   （radius 20px / height 245px cover / カテゴリタグ左下 / ホバー scale(1.1)）
   ========================================================================== */
.bk-articles { background-color: var(--cream); }
.bk-articles__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin: 0 0 64px;
  padding: 0;
  list-style: none;
}
.bk-articles__card { display: block; }
.bk-articles__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin: 0;
}
.bk-articles__thumb img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  transition: transform 0.4s;
}
.bk-articles__card:hover .bk-articles__thumb img { transform: scale(1.1); }
.bk-articles__cat {
  position: absolute;
  left: 0; bottom: 0;
  padding: 4px 12px;
  background-color: var(--navy);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
}
.bk-articles__title {
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.77;
  color: var(--ink-soft);
  /* 既存テーマは SP で -webkit-line-clamp:3 により3行で省略していたが、
     文字サイズ200%でタイトルが読めなくなるため design-lab では省略しない */
}
.bk-articles__more { display: flex; justify-content: center; }
@media (max-width: 900px) {
  .bk-articles__list { grid-template-columns: 1fr; gap: 40px; }
}

/* =============================================================================
   H-01 cta-line-navy — ネイビーのCTAボックス
   出典 template/cta.php / style.scss:529-703（radius 20px / 白の区切り線）
   ========================================================================== */
.bk-cta {
  max-width: var(--w-1000);
  margin-inline: auto;
  padding: 48px 40px 40px;
  border-radius: 20px;
  background-color: var(--navy);
  color: var(--white);
  text-align: center;
}
.bk-cta__title {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.bk-cta__text { margin: 0 0 32px; font-size: 2rem; line-height: 1.6; letter-spacing: 0.06em; }
.bk-cta__foot { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.bk-cta__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.bk-cta__col { padding: 8px 32px; }
.bk-cta__col + .bk-cta__col { border-left: 1px solid rgba(255, 255, 255, 0.6); }
@media (max-width: 767px) {
  .bk-cta { padding: 32px 20px; }
  .bk-cta__title { font-size: 2.4rem; }
  .bk-cta__text { font-size: 1.7rem; }
  .bk-cta__cols { grid-template-columns: 1fr; }
  .bk-cta__col { padding: 32px 0; }
  .bk-cta__col + .bk-cta__col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.6); }
}

/* =============================================================================
   H-02 cta-dual-contact-panel — 白パネル2択CTA
   出典 style.scss:2093-2185（radius 20px / 上下 2px solid #43485b の区切り）
   ========================================================================== */
.bk-dualcta {
  max-width: var(--w-1240);
  margin-inline: auto;
  padding: 60px 80px 72px;
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: var(--shadow-card);
}
.bk-dualcta__title { margin: 0 0 20px; font-family: var(--font-heading); font-size: 3.2rem; font-weight: 700; }
.bk-dualcta__text { margin: 0 0 40px; font-size: 1.7rem; line-height: 1.7; }
.bk-dualcta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.bk-dualcta__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  top: 0;
  padding: 40px 0 20px;
  border-top: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transition: all 0.4s;
}
.bk-dualcta__col:hover { top: -3px; }
.bk-dualcta__col-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
}
.bk-dualcta__icon { display: flex; justify-content: center; min-height: 58px; align-items: center; }
.bk-dualcta__arrow { text-align: right; font-size: 2rem; color: var(--navy); }
@media (max-width: 767px) {
  .bk-dualcta { padding: 40px 20px 48px; }
  .bk-dualcta__title { font-size: 2.4rem; }
  .bk-dualcta__grid { grid-template-columns: 1fr; gap: 32px; }
  .bk-dualcta__col-title { font-size: 2.2rem; }
}

/* =============================================================================
   H-03 contact-audience-cards — 対象者別問い合わせカード
   出典 style.scss:5784-5915（グレーカード radius 10px / 紺の縦バー）
   改善：px直書きの font-size を rem 化、ボタンの絶対配置を撤去
   ========================================================================== */
.bk-contactcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: 0; padding: 0;
  list-style: none;
}
.bk-contactcards__item {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-radius: 10px;
  background-color: var(--gray-panel);
}
.bk-contactcards__title {
  position: relative;
  margin: 0 0 20px;
  padding-left: 22px;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}
.bk-contactcards__title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 6px; height: calc(100% - 0.5em);
  background-color: var(--navy);
}
.bk-contactcards__text { margin: 0 0 32px; padding-left: 22px; font-size: 1.7rem; line-height: 1.7; }
.bk-contactcards__foot { margin-top: auto; text-align: center; }
@media (max-width: 767px) {
  .bk-contactcards { grid-template-columns: 1fr; gap: 20px; }
  .bk-contactcards__item { padding: 24px 20px; }
  .bk-contactcards__title { font-size: 2rem; }
}

/* =============================================================================
   H-05 cta-recruit-entry — 採用CTA（2カラム）
   出典 page-recruit.php:270-303 + style.scss:529-703
   改善：既存の閉じタグ不整合を解消した正しい入れ子
   ========================================================================== */
.bk-recruitcta {
  max-width: var(--w-1000);
  margin-inline: auto;
  padding: 48px 40px;
  border-radius: 20px;
  background-color: var(--navy);
  color: var(--white);
}
.bk-recruitcta__lead { margin: 0 0 40px; text-align: center; font-size: 2rem; line-height: 1.7; color: #FFF; }
.bk-recruitcta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-recruitcta__col { padding: 8px 32px; text-align: center; }
.bk-recruitcta__col + .bk-recruitcta__col { border-left: 1px solid rgba(255, 255, 255, 0.6); }
.bk-recruitcta__title { margin: 0 0 16px; font-family: var(--font-heading); font-size: 2.8rem; font-weight: 600; letter-spacing: 0.06em; color: #FFF; }
.bk-recruitcta__text { margin: 0 0 28px; font-size: 1.7rem; line-height: 1.7; color: #FFF;}
@media (max-width: 767px) {
  .bk-recruitcta { padding: 32px 20px; }
  .bk-recruitcta__grid { grid-template-columns: 1fr; }
  .bk-recruitcta__col { padding: 28px 0; }
  .bk-recruitcta__col + .bk-recruitcta__col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.6); }
  .bk-recruitcta__title { font-size: 2.2rem; }
}

/* =============================================================================
   F-01 company-info-table — 会社概要表
   出典 style.scss:4593-4652（th 177px / 上下 30px / 罫線 #dfe5e8）
   改善：<th scope="row"> と <caption> を前提にした構造。SPでも表構造を維持
   ========================================================================== */
.bk-table { width: 100%; border-collapse: collapse; }
.bk-table caption {
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
.bk-table th, .bk-table td {
  padding: 24px 0;
  border-bottom: 1px solid var(--line-table);
  font-size: 1.7rem;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-align: left;
  vertical-align: baseline;
}
.bk-table th { width: 177px; font-weight: 700; }
.bk-table tr:last-child th, .bk-table tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .bk-table th, .bk-table td { display: block; width: auto; }
  .bk-table th { padding-bottom: 4px; border-bottom: 0; }
  .bk-table td { padding-top: 4px; }
}

/* =============================================================================
   A-02 site-footer-global — グローバルフッター
   出典 footer.php / style.scss:1316-1429
   改善：ロゴリンクに名前を付与、<nav> でラベル付け
   ========================================================================== */
.bk-footer__top {
  max-width: var(--w-1240);
  margin-inline: auto;
  padding: 48px 20px 64px;
  border-top: 1px solid var(--line);
}
.bk-footer__head { display: flex; align-items: center; gap: 32px; margin-bottom: 32px; }
.bk-footer__logo img { width: 144px; height: auto; }
.bk-footer__sns { display: flex; gap: 24px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.bk-footer__sns img { width: 32px; height: auto; }
.bk-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0; padding: 0;
  list-style: none;
}
.bk-footer__nav a { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.05em; }
.bk-footer__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.bk-footer__bottom { padding: 36px 20px; background-color: var(--navy); }
.bk-footer__bottom-inner { max-width: var(--w-1240); margin-inline: auto; }
.bk-footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin: 0 0 18px; padding: 0;
  list-style: none;
}
.bk-footer__bottom a { color: var(--white); font-size: 1.4rem; line-height: 1.42; }
.bk-footer__bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bk-footer__copy { margin: 0; text-align: center; font-family: "Roboto", sans-serif; font-size: 1.5rem; color: var(--white); }
@media (max-width: 767px) {
  .bk-footer__head { flex-wrap: wrap; gap: 20px; }
  .bk-footer__sns { margin-left: 0; }
  .bk-footer__nav ul { flex-direction: column; gap: 20px; }
}

/* =============================================================================
   プレースホルダー（元画像が存在しない箇所に表示）
   ========================================================================== */
.bk-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 24px;
  border: 2px dashed var(--navy);
  border-radius: 20px;
  background-color: var(--cream);
  text-align: center;
}
.bk-ph__label { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--navy); }
.bk-ph__file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.3rem; color: var(--ink-soft); word-break: break-all; }
.bk-ph__note { margin: 0; font-size: 1.3rem; color: var(--ink-soft); }
.bk-ph--tall { min-height: 368px; }

/* 外部遷移の明示（既存テーマは未実装） */
.bk-ext::after { content: "（外部サイト）"; font-size: 0.75em; margin-left: 0.3em; }