/* ==================================================================
   外枠 ─ ヘッダー・パンくず・フッター・ドロワー
   ------------------------------------------------------------------
   本体（旧テーマ）の実測値に合わせてある。数値を変えるときは
   tools/measure/probe.py で測り直してから。

     ヘッダー   PC 80px（下線2px込み） / SP 60px
     ロゴ       PC 257.14×75 / SP 171.42×50
     パンくず   PC 70px / SP 50px（下線 1px #ddd）
     フッター   PC 232.02px / SP 120px
     基調色     白 #fff / 濃紺 #1013BA（旧テーマの --miki-accent-color 相当）
   ================================================================== */

:root {
  --miki-navy: #1013BA;
  --miki-ink:  #1a1a1a;
}

/* ---------------- ヘッダー ---------------- */

.l-header {
  background: #fff;
  border-bottom: 2px solid var(--miki-navy);
  color: var(--miki-ink);
}

/* 全幅で左右 40px。中身の高さ 78px ＋ 下線 2px ＝ 80px */
.l-header__body.l-container {
  max-width: none;
  padding-inline: 40px;
  min-height: 78px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

/* ★ ハンバーガーは右端。
   Arkhe の既定（header_btn_layout = l-r）は左に出るが、本体は右。
   ここは grid ではなく flex にしているので、order で右へ回す。 */
.l-header__drawerBtn { order: 9; }
/* ★ ボタンの箱の大きさが違う（本体 45x60 / Arkhe 40x40）ので、
   中のアイコンの位置がずれる。実測（SP・会社概要）:
     本体  アイコン 24x24 が x=464.5 / y=18
     Arkhe アイコン 24x24 が x=452   / y=17
   箱の大きさを変えると並びに響くので、見た目だけ動かす。 */
.l-header__drawerBtn { transform: translate(12.5px, 1px); }
.l-header__left { display: none; }
/* ★ Arkhe は .l-header__center に padding:8px 0 を入れている。
   これがあるとロゴ75px＋16px＝91px になり、本体の 80px に合わない。 */
.l-header__center { padding: 0; }
.l-header__center { margin-right: auto; }
.l-header__right { display: flex; align-items: center; margin-left: auto; }

/* ロゴ。高さは Arkhe の --ark-logo_size--pc / --sp（テーマ設定 75 / 50）。 */
.l-header__logo .c-headLogo { display: block; }
.l-header__logo img { display: block; }

/* ★ ナビは画面の中央。本体では position:absolute で中央に置かれていた。 */
#gnav.c-gnavWrap {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  /* ★ 本体のナビは下線（2px）を含む 80px の中で上下中央。
     .l-header__body は下線を含まない 78px なので、2px 足して同じにする。
     これを忘れると文字の位置が 1px 上にずれる（画素で比べると出る）。 */
  height: calc(100% + 2px);
}
.c-gnav { height: 100%; display: flex; align-items: stretch; }
.c-gnav > li { display: flex; align-items: stretch; }
.c-gnav > li > a { display: flex; align-items: center; height: 100%; padding-block: 0; }
/* ★ いま見ているページの項目は薄く（本体の
   移行元の現在地ナビと同じ）。 */
.c-gnav a[aria-current="page"] { opacity: .6; }

.c-gnav .c-gnav__a {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: 25px;   /* 実測: HOME 98px = 文字48 + 25×2 */
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--miki-ink);
  white-space: nowrap;
}

/* SNSアイコンの見た目と大きさは assets/css/miki-sns.css に分けた */

/* ハンバーガー */
.l-header .c-iconBtn { color: var(--miki-ink); }

@media (max-width: 959px) {
  .l-header__body.l-container { padding-inline: 20px; min-height: 58px; }
  /* ★ Arkhe は SP で .l-header__center を flex-basis:100% にしてロゴを中央に置く。
     本体は左寄せなので戻す。 */
  .l-header__center { flex-basis: auto; text-align: left; }
  #gnav.c-gnavWrap { display: none; }
}

/* ---------------- ヘッダー2段（第2回修正・2026-10-01） ----------------
   1段目 = ロゴ（.l-header）、2段目 = ナビ＋SNS（.l-headerUnder。inc/header.php が move_gnav_under を入れる）
   ★ 2段目は Arkhe が 999px 以下で隠す（親テーマの CSS）。スマホは1段目（ロゴ＋ドロワーボタン）だけ。
   ★ 下線（濃紺 2px）は2段目の下へ移す。1段目と2段目の間は薄い線 1px。
     高さ: 1段目 78px ＋ 線 1px ＋ 2段目 52px ＋ 下線 2px ＝ 133px（以前は 1段 80px）
   ★ 2段とも追従（fix_header_pc / fix_gnav）。2段目の top は Arkhe の JS が入れる --ark-header_height。 */
@media (min-width: 1000px) {
  .l-header { border-bottom: 1px solid #e5e5e5; }
  /* move_gnav_under のとき Arkhe はロゴを中央（data-logo="center"）にする。左に戻す */
  .l-header[data-logo="center"] .l-header__center { text-align: left; }

  /* ★ z-index は 1段目（.l-header 100）のすぐ下。Arkhe の既定（1）のままだと、本文の外にある
     お問い合わせ帯（.miki-contact__inner z-index:2）がスクロールで2段目の上に重なった（2026-10-01 Ken の実機確認） */
  .l-headerUnder { border-bottom: 2px solid var(--miki-navy); z-index: 99; }
  .l-headerUnder__inner.l-container {
    max-width: none;
    padding-inline: 40px;
    min-height: 52px;
    display: flex;
    align-items: stretch;
    justify-content: center;          /* ナビ6項目＋SNS をひとまとまりで画面中央に（2026-10-01 指示） */
  }
  /* 1段のときの「画面中央に絶対配置」をやめ、左から並べる */
  .l-headerUnder #gnav.c-gnavWrap {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
  }
  .l-headerUnder .c-gnav { justify-content: center; width: auto; height: 100%; }
  .l-headerUnder .c-gnav .c-gnav__a,
  .l-headerUnder .c-gnav > .menu-item > a {
    position: relative;
    padding: 0 20px;
  }
  /* ★ 色付き下線（2026-10-01 手直し・依頼文どおり）: 6項目すべてに常時、濃紺 2px。
     現在ページは 3px に太くして区別（色は変えない）。hover は下線の色を少し明るく。
     以前の「現在ページを薄く（opacity .6）」はやめた。SNS は .c-gnav の外なので下線は付かない */
  .l-headerUnder .c-gnav a[aria-current="page"] { opacity: 1; }
  .l-headerUnder .c-gnav .c-gnav__a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 11px;
    height: 2px;
    background: var(--miki-navy);
    transition: background-color .2s ease, height .2s ease;
  }
  /* マウスオーバー（2026-10-01 指示で強めた）: 文字を濃紺に、うっすら濃紺の地、下線を明るい青で 3px に */
  .l-headerUnder .c-gnav .c-gnav__a { transition: color .2s ease, background-color .2s ease; }
  .l-headerUnder .c-gnav .c-gnav__a:hover { color: var(--miki-navy); background-color: rgba(16, 19, 186, .06); opacity: 1; }
  .l-headerUnder .c-gnav .c-gnav__a:hover::after { background: #4a4ee0; height: 3px; bottom: 10px; }
  .l-headerUnder .c-gnav .c-gnav__a[aria-current="page"]::after { height: 3px; bottom: 10px; }
  .l-headerUnder .c-gnav .c-gnav__a[aria-current="page"] { font-weight: 600; }

  /* SNS はナビのすぐ右（ナビと一緒に中央へ寄る） */
  .l-headerUnder .miki-header-sns { margin-left: 28px; margin-right: 0; }
  .l-headerUnder .miki-sns-icons-item { transition: transform .2s ease, opacity .2s ease; }
  .l-headerUnder .miki-sns-icons-item:hover { transform: translateY(-3px); opacity: .8; }
  .l-headerUnder .miki-header-sns .miki-sns-icons.miki-sns-icons { font-size: 28px; gap: 16px; }
}

/* ★ ページ内リンク（#…）の飛び先がヘッダーに隠れないように（2026-10-01・M5）。
   ヘッダーは追従するので、飛び先の上端がヘッダーの下に潜る。
   --ark-header_height は Arkhe の JS が入れる1段目の高さ（PC 79 / SP 60）。
   2段目（54px・下線込み）は 1000px 以上でだけ出るので、そこで足す。 */
html { scroll-padding-top: var(--ark-header_height, 60px); }
@media (min-width: 1000px) {
  html { scroll-padding-top: calc(var(--ark-header_height, 79px) + 54px); }
}

/* ---------------- 2段の色（2026-10-01 手直し・参照「ヘッダーメニューの雰囲気」） ----------------
   参照（小林製作所）と同じく、1段目＝色地に白い社名、2段目＝白地にナビ。
   1段目の色は**フッターに合わせる**（Ken の指示。参照の黒ではない）。フッターのナビの段と同じ --miki-navy。
   住所・電話は1段目に入れていない（参照の構図は写さない。M5 の指示）。 */
.l-header { background: var(--miki-navy); color: #fff; }
.l-header .c-iconBtn { color: #fff; }              /* SP のドロワーボタン */
@media (min-width: 1000px) {
  .l-header { border-bottom-color: var(--miki-navy); }   /* 色地と白の境目が区切り。線は地と同じ色にして高さ 79px は保つ */
  .l-headerUnder { background: #fff; }
}
@media (max-width: 999px) {
  .l-header { border-bottom-color: var(--miki-navy); }
}

/* ---------------- 社名ロゴ（マーク＋社名の文字。ヘッダー1段目とフッター・2026-10-01 M5-b） ----------------
   inc/header.php の miki_brand_html()。取引先.pdf のロゴ枠の比に合わせる（マークの高さ＝1）:
     有限会社 0.294 / 三木鐵工所 0.425 / 英字（大文字の高さ）0.145
     マーク→和文 0.294 / 有限会社→三木鐵工所 0.162 / 和文の下→英字の上 0.215
     並び: **マーク・漢字・英字の横一列**（依頼文「【ロゴ】有限会社三木鐵工所 MIKI METAL WORKS」が正）。
           チラシの2段組み（英字が下）は使わない。字の大きさの比だけチラシに寄せる。和文はチラシと同じく斜体
   PC はマーク 62px（ヘッダー1段目 79px の中）、SP は 44px で和文1行目だけ。
   ★ 1段目全体をホームへのリンクに: .l-header__center を伸ばし、リンクを高さいっぱいにする */
.l-header__center { flex: 1 1 auto; align-self: stretch; display: flex; }
.l-header__logo.has-miki-brand { display: flex; flex: 1 1 auto; margin: 0; }
/* ★ (0,2,0) 以上にする。.l-header__logo .c-headLogo { display:block }（0,2,0）に負けると改行して伸びる */
.c-headLogo.miki-brand {
  --mark: 62px;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 100%;
  color: #fff;
  text-decoration: none;
  font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  font-weight: 900;
}
.miki-brand__mark { display: block; height: var(--mark); width: auto; flex: none; }
/* ★ 2026-10-01（Ken）: マーク → 和文 → 英字の横一列。英字（画像）は和文の下端にそろえる */
.miki-brand__txt {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-left: calc(var(--mark) * .294);
}
.miki-brand__r1 {
  display: flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
  transform: skewX(-10deg);           /* チラシの和文は斜体 */
  transform-origin: left bottom;
}
/* 和文の字面の高さ ≒ 0.88em なので、比から逆算した値 */
.miki-brand__co   { font-size: calc(var(--mark) * .294 / .88); }
.miki-brand__name { font-size: calc(var(--mark) * .425 / .88); margin-left: calc(var(--mark) * .162); }
/* 英字は画像（チラシの英字の行）。高さは「三木鐵工所」の字の約 45%＝マーク×0.19。
   和文との間はマークと和文の間と同じ（マーク×0.294）。下端は和文の字面の下端に合わせる（画像の下の余白ぶん少し下げる） */
.miki-brand__en {
  display: block;
  height: calc(var(--mark) * .247);   /* 2026-10-01（Ken）: 小さく見にくいので 1.3倍（.19 → .247） */
  width: auto;
  margin-left: calc(var(--mark) * .294);
  margin-bottom: calc(var(--mark) * -.01);
}

@media (max-width: 999px) {
  .c-headLogo.miki-brand { --mark: 44px; }
  .l-header .miki-brand__en { display: none; }    /* SP のヘッダーは和文1行目だけ */
}

/* フッター（濃い紺の帯）でも同じ組み。帯の高さ PC 80 / SP 60 は変えない */
.miki-footer-logo_sns .c-headLogo.miki-brand { flex: 0 1 auto; --mark: 62px; }
@media (max-width: 991px) {
  .miki-footer-logo_sns .c-headLogo.miki-brand { --mark: 44px; }
  .miki-footer-logo_sns .miki-brand__en { display: none; }
}

/* ---------------- パンくず ---------------- */

.p-breadcrumb {
  height: 70px;
  display: flex;
  align-items: center;
  /* ★ 本体は #dddd（4桁＝不透明度 dd）。実測 rgba(221,221,221,0.867)。 */
  border-bottom: 1px solid #dddd;
  /* 本体は背景を指定していない（ページの地の白がそのまま出る） */
  background: transparent;
  padding-block: 0;
  width: 100%;
  max-width: none;
}
.p-breadcrumb__list {
  display: flex;
  column-gap: 12px;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline: 32px;
  color: #000;
  letter-spacing: normal;
}
/* ★ Arkhe は .p-breadcrumb__text を親より小さくする（実測 11px）。
   本体は 14px（SP 12px）そのまま。文字の大きさは項目側で決まるので、
   リストに書くだけでは効かない（2026-09-06 に実機で見つかった）。 */
.p-breadcrumb__item,
.p-breadcrumb__text,
.p-breadcrumb__item > span,
.p-breadcrumb__text > span {
  font-size: 1em;
  letter-spacing: normal;
}
.p-breadcrumb__item:last-of-type { color: #999; }
.p-breadcrumb__item:last-of-type .p-breadcrumb__text { color: #999; }
/* ★ Arkhe は最後の項目に u-color-thin を付ける（opacity:var(--ark-opacity--thin) ＝ .75）。
   本体は #999 の不透明。色は上で合わせてあるので、不透明度だけ戻す。
   高さでは出ない差で、要素ごとの計算値の突き合わせで見つかった（2026-09-06）。 */
.p-breadcrumb__text.u-color-thin { opacity: 1; }

/* ★ 先頭の「HOME」は本体では文字を出さず、家のアイコンだけ。
   読み上げには残すので display:none ではなく画面から隠す書き方にする。 */
.p-breadcrumb__item:first-child .p-breadcrumb__text > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.p-breadcrumb__item:first-child .p-breadcrumb__text { display: inline-flex; align-items: center; }
.p-breadcrumb__item svg { font-size: 1.5em; }

/* ★ 家のアイコンは本体（親テーマ）の字形に合わせる。
   Arkhe の既定は塗りつぶしの家で、本体は線の細い家。並べると別物に見える。
   Arkhe の SVG は隠し、本体と同じ形を mask で置く。 */
.p-breadcrumb__item:first-child .p-breadcrumb__text > svg { display: none; }
/* ★ 家のアイコンの位置。本体は svg に margin:-0.2em を掛けて左へ寄せている
   （実測 PC -4.2px / SP -3.6px ＝ アイコン 1.5em の 0.2 倍）。
   幅を変えると後ろの項目まで動くので、見た目だけ動かす。 */
.p-breadcrumb__item:first-child .p-breadcrumb__text::before { transform: translateX(-0.3em); }
/* ★ 2件目のラベルの開始位置を本体に合わせる。実測（会社概要）:
     本体  PC x=79.25 / SP x=63.63
     Arkhe PC x=87    / SP x=72     ← li の padding-right 12 ＋ margin-right 10
                                       ＋ 並びの column-gap 12 のぶん右に出る
   区切りの「>」は先頭の項目に付いているので、最後の項目だけ引き寄せれば
   区切りの位置は動かない。 */
.p-breadcrumb__item:last-of-type { margin-left: -7.75px; }

.p-breadcrumb__item:first-child .p-breadcrumb__text::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M240-200h147.69v-203.08q0-13.73%209.29-23.02%209.29-9.28%2023.02-9.28h120q13.73%200%2023.02%209.28%209.29%209.29%209.29%2023.02V-200H720v-347.69q0-6.16-2.69-11.16t-7.31-8.84L494.62-730q-6.16-5.38-14.62-5.38-8.46%200-14.62%205.38L250-567.69q-4.62%203.84-7.31%208.84-2.69%205-2.69%2011.16V-200Zm-40%200v-347.69q0-15.35%206.87-29.08%206.86-13.73%2018.98-22.61l215.38-163.08q16.91-12.92%2038.65-12.92t38.89%2012.92l215.38%20163.08q12.12%208.88%2018.98%2022.61%206.87%2013.73%206.87%2029.08V-200q0%2016.08-11.96%2028.04T720-160H564.62q-13.74%200-23.02-9.29-9.29-9.29-9.29-23.02v-203.07H427.69v203.07q0%2013.73-9.29%2023.02-9.28%209.29-23.02%209.29H240q-16.08%200-28.04-11.96T200-200Zm280-268.46Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20d%3D%22M240-200h147.69v-203.08q0-13.73%209.29-23.02%209.29-9.28%2023.02-9.28h120q13.73%200%2023.02%209.28%209.29%209.29%209.29%2023.02V-200H720v-347.69q0-6.16-2.69-11.16t-7.31-8.84L494.62-730q-6.16-5.38-14.62-5.38-8.46%200-14.62%205.38L250-567.69q-4.62%203.84-7.31%208.84-2.69%205-2.69%2011.16V-200Zm-40%200v-347.69q0-15.35%206.87-29.08%206.86-13.73%2018.98-22.61l215.38-163.08q16.91-12.92%2038.65-12.92t38.89%2012.92l215.38%20163.08q12.12%208.88%2018.98%2022.61%206.87%2013.73%206.87%2029.08V-200q0%2016.08-11.96%2028.04T720-160H564.62q-13.74%200-23.02-9.29-9.29-9.29-9.29-23.02v-203.07H427.69v203.07q0%2013.73-9.29%2023.02-9.28%209.29-23.02%209.29H240q-16.08%200-28.04-11.96T200-200Zm280-268.46Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

@media (max-width: 959px) {
  .p-breadcrumb { height: 50px; }
  .p-breadcrumb__list { font-size: 12px; padding-inline: 20px; }
  .p-breadcrumb__item:last-of-type { margin-left: -8.37px; }
}

/* ---------------- 大きなページタイトル帯は出さない ----------------
   本体の下層4ページにはページ見出しが無い（実測で高さ0）。
   お問い合わせとプライバシーポリシーだけは本体に見出しがあるので、
   そこは下の「ページ見出し」で出す。 */
body:not(.page-ask):not(.page-privacy-policy) .p-page__title.c-pageTitle { display: none; }

/* ---------------- コンテンツの外側の余白 ----------------
   ★ Arkhe は .l-content__body に上下 48px の余白を持っている。
     本体（旧テーマ）は 0 で、パンくずの直後から本文が始まる。
     実測: これがあると本文の開始が 48px 下がり、ページ全体が 96px 伸びる。 */
.l-content__body.l-container { margin-block: 0; }

/* ★ 本文の下の余白。
   本体は親テーマ layout.css の `.l-container{ padding-bottom:150px }`（SP 40px）。
   ただし下層4ページでは、子テーマ miki-pages.css が
     body:has(:is(.miki-company,…)) .l-container{ padding-bottom:0 !important }
   で打ち消している。**同じ出し分けをここで再現する。**
   body クラス .miki-legacy は inc/security.php が4ページに付けている。 */
.l-content__body.l-container { padding-bottom: 150px; }
body.miki-legacy .l-content__body.l-container { padding-bottom: 0; }

/* ★ スマホだけは本体にパンくずと本文の間に 20px ある（実測）。 */
@media (max-width: 959px) {
  .l-content__body.l-container { margin-top: 20px; padding-bottom: 40px; }
  body.miki-legacy .l-content__body.l-container { padding-bottom: 0; }
}

/* ---------------- ページ見出し ----------------
   お問い合わせ と プライバシーポリシーだけ。本体の実測値に合わせてある。
     PC  上 62.5px / 見出し 45px / 下 93.5px
     SP  上 15px  / 見出し 30px / 下 56px */
.miki-page-header {
  padding-top: 62.5px;
  padding-bottom: 42.5px;
}
.miki-page-header__title {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  font-family: 'Shippori Mincho', serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 45px;
  text-align: center;
  /* 本体は theme/style.css に letter-spacing:.08em があり、色は body の #000 を継承する。
     Arkhe の既定色 #1a1a1a を引き継がないよう明示する（2026-09-06 の実測差分）。 */
  letter-spacing: .08em;
  color: #000;
}
/* お問い合わせページの見出しだけゴシック（2026-09-05 の指示を引き継ぐ） */
body.miki-ask .miki-page-header__title { font-family: 'Noto Sans JP', sans-serif; }

@media (max-width: 959px) {
  .miki-page-header { padding-top: 15px; padding-bottom: 5px; }
  .miki-page-header__title {
    max-width: none;
    margin-inline: 20px;
    font-size: 20px;
    line-height: 30px;
    padding-block: 5px;   /* 本体は枠が 40px（行の高さ30＋上下5px） */
  }
}

/* ---------------- フッター ----------------
   ★ 本体のフッターは白ではない。**紺の帯が2段**ある。
     ナビの段     `--miki-accent-color`  #1013BA
     ロゴ＋SNSの段 その 90% ＋ 黒10%（`color-mix`）
   どちらも `border-image: linear-gradient(色 0 0) fill 0 / 1 / 0 100vi`
   という書き方で塗られていた。**画面いっぱいに広げるための書き方**で、
   要素自体は 1150px しかないのに色だけ端まで伸びる。
   同じ書き方をそのまま使う（background では端まで届かない）。

   高さの内訳（実測）:
     PC  ナビ 33 + 16.02 + 33 ＝ 82.02 / ロゴ 80 / コピーライト 70 ＝ 232.02
     SP  ナビは非表示 / ロゴ 60 / コピーライト 60 ＝ 120
*/

/* ★ 本体のフッターの地の文は黒（body の既定を継いでいる）。
   Arkhe の既定は #333。コピーライトの色に出る。 */
.l-footer { background: #fff; color: #000; }
.l-footer__inner { padding: 0; }
.l-footer__foot { padding: 0; }

/* 内側は「画面幅−40px、上限1150px」を中央に（移行元のフッター内側と同じ） */
.l-footer__foot > .l-container {
  inline-size: min(calc(100% - 40px), 1150px);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  padding-block: 0;
}

/* ナビの段（紺）。PCのみ。 */
.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 30px;
  margin: 0;
  padding-block: 33px;
  list-style: none;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  border-image: linear-gradient(var(--miki-navy) 0 0) fill 0 / 1 / 0 100vi;
  border-inline: 1px solid color-mix(in srgb, var(--miki-navy) 80%, #fff);
}
/* ★ Arkhe の既定は font-size:.8rem / padding:0 .75em / display:block。
   本体は 16px・余白なし・inline で行の高さ 1.4。
   項目には half-read ぶんの負の余白が入り、並びの高さが
   22.4 → 16.02px になる。**ページ全体の高さの −0.02px はここだった。** */
.l-footer__nav a {
  color: inherit;
  font-size: 16px;
  padding: 0;
  display: inline;
  line-height: 1.4;
}
.l-footer__nav > li {
  line-height: 1.4;
  margin-block: calc((1em - 1lh) / 2);
}

/* ロゴ＋SNS の段（濃い紺） */
.miki-footer-logo_sns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  color: #fff;
  border-image: linear-gradient(color-mix(in srgb, var(--miki-navy) 90%, #000) 0 0) fill 0 / 1 / 0 100vi;
}
.miki-footer-logo { display: block; }
.miki-footer-logo .c-headLogo__img { display: block; height: 75px; width: auto; max-width: none; }
/* 本体は帯の中の文字色が白（アイコンは背景画像なので見た目は変わらないが揃える） */
.miki-footer-logo_sns .miki-sns-icons,
.miki-footer-logo_sns .miki-sns-icons-item { color: #fff; }

/* コピーライト（白地・黒文字） */
.c-copyright {
  display: grid;
  place-items: center;
  block-size: 70px;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: #000;
}

@media (max-width: 991px) {
  .l-footer__nav { display: none; }          /* 本体も 991px 以下で消す */
  .miki-footer-logo_sns { height: 60px; }
  .miki-footer-logo .c-headLogo__img { height: 50px; }
  .c-copyright { block-size: 60px; }
}

/* ---------------- ドロワー ----------------
   本体の実測（開いた状態）:
     面      濃紺 #1013BA / 文字 白
     幅      SP は画面いっぱい（504px）/ PC は右から 360px
     高さ    画面いっぱい（804px）
     項目    高さ 49px・50px 間隔（＝区切り線 1px）・14px・全幅
     SNS     項目の下 30px の位置に 20px（SP）/ 24px（PC）で中央 */

#drawer_menu.p-drawer,
#drawer_menu .p-drawer__inner {
  background: var(--miki-navy);
  color: #fff;
}
/* PC は右端から 360px（本体と同じ）。PCではハンバーガーが出ないので
   実際には開かないが、位置だけ合わせてある。 */
#drawer_menu.p-drawer { width: 360px; max-width: 100%; left: auto; right: 0; }
#drawer_menu .p-drawer__body { padding: 49px 0 0; position: relative; }
/* ★ Arkhe は .p-drawer__inner をヘッダーの高さ（60px）だけ下げる。
   本体のドロワーは画面の一番上から始まり、項目は y=49 から並ぶ。
   下げたままだと中身が丸ごと 60px 低い位置に出る（2026-09-06 の実測）。 */
#drawer_menu.p-drawer { padding-top: 0; }

/* 閉じるボタンは本体と同じく右上。Arkhe の既定は「× CLOSE」を
   メニューの下に置くので、位置と文字を合わせる。 */
#drawer_menu .p-drawer__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 49px;
  justify-content: center;
  color: #fff;
  font-size: 0;          /* 「CLOSE」の文字は出さない（本体は×だけ） */
}
#drawer_menu .p-drawer__close svg { width: 16px; height: 16px; }

#drawer_menu .c-drawerNav {
  border: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
#drawer_menu .c-drawerNav .menu-item {
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  margin: 0;
}
#drawer_menu .c-drawerNav .menu-item:first-child { border-top: 1px solid rgba(255, 255, 255, .18); }
#drawer_menu .c-drawerNav__a,
#drawer_menu .c-drawerNav a {
  display: flex;
  align-items: center;
  height: 49px;
  padding-inline: 25px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}
#drawer_menu .p-drawer__close { color: #fff; }


@media (max-width: 959px) {
  #drawer_menu.p-drawer { width: 100%; }
}


/* ------------------------------------------------------------------
   スマホのヘッダーSNSの位置（2026-09-07）
   ------------------------------------------------------------------
   ★ **値をそのまま引き継ぐと、周りの構造が違うぶんだけ結果がずれる**という例。

   miki-sns.css の `@media (max-width:991px){ .miki-header-sns{ margin-right:14px } }`
   は移行元から採った値そのものだが、移行元では

     右側の帯に padding-right:20px があり、
     ハンバーガーの箱が 45px 幅で margin-right:-15px

   という組み合わせで釣り合っていた。Arkhe はハンバーガーの箱が 40px で
   負の余白も無いため、**同じ 14px でも SNS が 10px 左に出る。**

     移行元  アイコン x=351.61 / 406（右端 440）
     Arkhe   アイコン x=341.61 / 396（右端 430）   ← 10px 左

   ハンバーガーの絵そのものは 24×24・x=464.5・y=18 で**両側とも同じ位置**。
   ずれているのは SNS だけなので、ここで 10px ぶんだけ詰めて合わせる。

   ★ miki-sns.css を直さないのは、あれが buildcss.py の出力そのものだから。
     手で直すと「ファイルは道具が出すもの」が崩れ、作り直すたびに戻る。
     **意図した調整は、道具が持たないファイルに書く。**
     miki-sns.css のほうが後に読み込まれるので、(0,2,0) にして勝たせている。
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .l-header .miki-header-sns { margin-right: 4px; }
}