@charset "UTF-8";

/* =========================================================
   KANEKO Corporate Site — Top Page
   - Base: #fff / Main: #072d99 (navy)
   - Sans-serif only (no serif)
   - No circles / curves / waves — straight lines & rectangles
   - WCAG 2.1 AA (JIS X 8341-3:2016 A & AA)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --color-base: #ffffff;
  --color-main: #072d99;
  --color-main-dark: #051f6c;
  --color-main-soft: #e8edf8;
  --color-ink: #14181f;
  --color-text: #2a2f3a;
  --color-muted: #5a6072;
  --color-line: #d8dce4;
  --color-line-strong: #b9c0cc;
  --color-bg-soft: #f5f7fb;
  --color-bg-band: #f0f3f9;

  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 48px);
  --section-pad-y: clamp(56px, 8vw, 96px);

  --font-sans-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --font-sans-en: "Helvetica Neue", Arial, system-ui, sans-serif;

  --radius-xs: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  --shadow-card: 0 1px 0 rgba(20,24,31,0.04);

  --header-h: 96px;
  --header-h-sp: 68px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* メガメニュー展開など「にゅっ」と出て静かに止まる動き用 (expo out) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base reset ---------- */
*,
*::before,
*::after {box-sizing: border-box;}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* 全幅ブリード要素 (100vw 指定など) がスクロールバー幅ぶんはみ出しても
     画面全体の横スクロールを出さない。clip は overflow:hidden と違い
     スクロールコンテナを作らないので position: sticky を壊さない */
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-sans-ja);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--color-main);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
a:hover { color: var(--color-main-dark); }
a:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 3px;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* ---------- A11y helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--color-main);
  color: #fff;
  font-weight: 700;
  transform: translateY(-110%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(8px); color: #fff; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section-head {
  margin-bottom: clamp(24px, 4vw, 40px);
}
.section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.section-eyebrow {
  font-family: var(--font-sans-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-main);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.section-eyebrow--white { color: #fff; opacity: 0.9; }

.section-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
  position: relative;
  padding-bottom: 12px;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--color-main);
}

.section-cta {
  margin: 0;
}

/* ---------- Link arrow / buttons (no circles) ---------- */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 26px;
  color: var(--color-main);
  font-weight: 700;
  font-size: 16px;
}
.link-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--color-main);
  transform: translateY(-50%);
  transition: transform 0.2s var(--ease-out);
}
.link-arrow::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-main);
  border-right: 2px solid var(--color-main);
  transform: translate(0, -50%) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.link-arrow:hover::after,
.link-arrow:hover::before { transform: translate(4px, -50%) rotate(0); }
.link-arrow:hover::before { transform: translate(4px, -50%) rotate(45deg); }
.link-arrow--small { font-size: 16px; padding-right: 22px; }

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 14px 22px;
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  position: relative;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn-outline-white::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  position: relative;
  top: -1px;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
  color: #fff;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--color-line);
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.home-page .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.8);
  border-bottom-color: transparent;
  box-shadow: 1.634px 2.516px 12px 0px rgba(147, 137, 129, 0.18);
}

.home-page .site-header.is-compact {
  background: #fff;
}

/* Compact state — triggered after scroll. Desktop only.
   On mobile we keep the standard compact-by-default header layout. */
@media (min-width: 1025px) {
  .site-header.is-compact .brand-tagline,
  .site-header.is-compact .site-header__utility {
    display: none;
  }
  .site-header.is-compact .site-header__inner {
    min-height: 0;
    grid-template-rows: 1fr;
    padding-top: 8px;
    padding-bottom: 8px;
    row-gap: 0;
    align-items: center;
  }
  .site-header.is-compact .site-header__brand { grid-row: 1; }
  .site-header.is-compact .global-nav,
  .site-header.is-compact .site-header__cta,
  .site-header.is-compact .site-header__phone {
    grid-row: 1;
  }
  .site-header.is-compact .brand img { height: 36px !important; transition: height 0.2s var(--ease-out); }
  .site-header.is-compact .site-header__phone-img { height: 22px !important; }
  .site-header.is-compact .site-header__phone-hours { display: none; }
  .site-header.is-compact .site-header__phone { margin-bottom: 0; align-items: center; justify-content: center; }
  .site-header.is-compact .site-header__cta { padding: 0.6em 22px; min-width: 152px; font-size: 16px; }
  .site-header.is-compact .global-nav { padding-bottom: 0; }
}
.brand img { transition: height 0.2s var(--ease-out); }
.site-header__cta { transition: background-color 0.2s var(--ease-out), padding 0.2s var(--ease-out), font-size 0.2s var(--ease-out); }
.site-header__phone-img { transition: height 0.2s var(--ease-out), opacity 0.2s var(--ease-out); }
.site-header__inner {
  width: 100%;
  margin-inline: auto;
  padding: 6px 2rem 12px;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 20px;
  row-gap: 12px;
}
.site-header__brand {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: anchor-center;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 6px;
}
.brand img {
  display: block;
  height: 46px;
  width: auto;
}
.brand-tagline {
  color: var(--color-muted);
  line-height: 1.4;
  padding-left: 0;
}

.site-header__utility {
  grid-column: 2 / span 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin-right: calc(var(--container-pad) * -1);
  padding-right: var(--container-pad);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

/* Header CTA: contact button (row 2, right) */
.site-header__cta {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 168px;
  padding: .8em 26px;
  background: var(--color-main);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: background-color 0.2s var(--ease-out);
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
  background: var(--color-main-dark);
  color: #fff;
}
.site-header__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header__cta svg { flex-shrink: 0; }

/* Header phone block (row 2, far right) */
.site-header__phone {
  grid-column: 4;
  grid-row: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: -10px;            /* tighten gap to お問い合わせ button by ~half */
  margin-bottom: -2px;
}
.site-header__phone-num {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}
.site-header__phone-num:hover .site-header__phone-img,
.site-header__phone-num:focus-visible .site-header__phone-img { opacity: 0.78; }
.site-header__phone-img {
  display: block;
  height: 1.5em;
  width: auto;
  transition: opacity 0.2s var(--ease-out);
}
.site-header__phone-hours {
  font-size: 16px;
  color: var(--color-muted);
  margin-top: 6px;
  white-space: nowrap;
}
.site-search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-line-strong);
  height: 2em;
}
.site-search input[type="search"] {
  border: 0;
  padding: 0 10px;
  width: 200px;
  font-size: 16px;
  background: transparent;
  color: var(--color-text);
}
.site-search input[type="search"]::placeholder { color: var(--color-muted); }
.site-search input[type="search"]:focus { outline: none; }
.site-search:focus-within {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}
.site-search__submit {
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  color: #fff;
}
.site-search__submit:hover { background: var(--color-main-dark); }

/* ===== 製品案内ページ用 キーワード + カテゴリ 複合検索フォーム ===== */
.product-search-form {
  display: block;
  width: 100%;
}
.product-search-form__row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-line-strong);
  background: #fff;
  height: 48px;
}
.product-search-form__row:focus-within {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}
.product-search-form__field {
  display: flex;
  align-items: center;
  position: relative;
}
.product-search-form__field--keyword {
  flex: 1;
  min-width: 0;
}
.product-search-form__field--cat {
  flex: 0 0 auto;
  width: 220px;
  border-left: 1px solid var(--color-line);
}
.product-search-form__field--keyword input[type="search"] {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 14px;
  color: var(--color-text);
  font-family: inherit;
}
.product-search-form__field--keyword input[type="search"]:focus { outline: none; }
.product-search-form__field--keyword input[type="search"]::placeholder { color: var(--color-muted); }
.product-search-form__field--cat select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 36px 0 14px;
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
}
.product-search-form__field--cat select:focus { outline: none; }
.product-search-form__caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-muted);
  display: inline-flex;
}
.product-search-form__submit {
  flex: 0 0 auto;
  width: auto;
  min-width: 100px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-main);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s var(--ease-out);
}
.product-search-form__submit:hover { background: var(--color-main-dark); }
.product-search-form__submit svg { flex-shrink: 0; }

/* SP: 縦並びに切り替え */
@media (max-width: 768px) {
  .product-search-form__row {
    flex-direction: column;
    height: auto;
  }
  .product-search-form__field--keyword,
  .product-search-form__field--cat,
  .product-search-form__submit {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--color-line);
  }
  .product-search-form__field--keyword {
    border-top: 0;
    height: 48px;
  }
  .product-search-form__field--cat { height: 48px; }
  .product-search-form__submit { height: 48px; }
}

.lang-switch {
  display: flex;
  gap: 0;
  align-items: center;
  font-family: var(--font-sans-en);
  letter-spacing: 0.06em;
}
.lang-switch li + li::before {
  content: "|";
  margin: 0 8px;
  color: var(--color-line-strong);
}
.lang-switch a { color: var(--color-ink); font-weight: 700; }
.lang-switch [aria-current="page"] { color: var(--color-main); }
.lang-switch [aria-disabled="true"] {
  color: var(--color-muted);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--color-line-strong);
}

.global-nav {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  padding-bottom: 2px;
}
/* On desktop the お問い合わせ link is rendered by .site-header__cta (right column).
   Hide the duplicates inside the nav. */
.global-nav__item--cta { display: none; }
.global-nav__item--lang { display: none; }
.global-nav__item--phone { display: none; }
.global-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.global-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  color: var(--color-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
}
.global-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--color-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.global-nav__link:hover,
.global-nav__link:focus-visible,
.global-nav__item.is-open > .global-nav__link {
  color: var(--color-main);
}
.global-nav__link:hover::after,
.global-nav__link:focus-visible::after,
.global-nav__item.is-open > .global-nav__link::after { transform: scaleX(1); }

.global-nav__link--cta {
  margin-left: 8px;
  background: var(--color-main);
  color: #fff;
  padding: 10px 20px;
}
.global-nav__link--cta::after { display: none; }
.global-nav__link--cta:hover,
.global-nav__link--cta:focus-visible {
  color: #fff;
  background: var(--color-main-dark);
}

/* ----- Mega dropdown (A&D-style two-pane) ----- */
.global-nav__item.has-mega { position: static; }
/* 製品案内の下向き矢印 (SVG)。開封時に 180° 回転してアコーディオン風に見せる */
.global-nav__chevron {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  transition: transform 0.35s var(--ease-out-expo);
}
.global-nav__item.is-open > .global-nav__link .global-nav__chevron { transform: rotate(180deg); }

/* パネル本体 (参考: 日本郵便サイトのグローバルナビ):
   - 開く: ページを暗くするオーバーレイ (body::after) と同時に、パネルの高さが
     0fr→1fr に伸びて「にゅっ」と現れる (中身は最終位置のまま、マスクが下へ広がる)。
   - 閉じる: フェードアウトしてから高さを 0 に戻す。
   display:none (hidden 属性) からは transition が走らないため、JS が hidden を外して
   1 度レイアウトさせてから .is-open を付け、閉じるときは transition 後に hidden へ戻す。
   .mega__inner (min-height:0 / overflow:hidden) が 0fr→1fr の伸縮を受け持つ。 */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--color-line);
  border-bottom: 3px solid var(--color-main);
  box-shadow: 0 16px 28px -16px rgba(20,24,31,0.18);
  z-index: 90;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  /* 閉じる: 0.2s でフェードアウト → その後 (遅延 0.2s) 高さを 0 に戻す */
  transition: opacity 0.2s var(--ease-out), grid-template-rows 0s linear 0.2s;
}
.mega[hidden] { display: none; }
.global-nav__item.is-open > .mega {
  grid-template-rows: 1fr;
  opacity: 1;
  /* 開く: 高さが 0.35s で伸びる。不透明度はすぐ 1 に (枠線のチラつき防止の 0.1s のみ) */
  transition: grid-template-rows 0.35s var(--ease-out-expo), opacity 0.1s linear;
}
.mega__inner {
  min-height: 0;
  overflow: hidden;
}
.mega__back, .mega__title { display: none; }

.mega__layout {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 380px;
}

/* Sidebar (left): navy panel with category buttons */
.mega__sidebar {
  background: var(--color-main);
  color: #fff;
  padding: 8px 0 20px;
}
/* 「製品案内トップ」リンク。初期表示 (トップパネル) のあいだは .is-active で
   カテゴリボタンの選択状態と同じ白抜きにする (JS が付け外し) */
.mega__sidebar-head {
  display: block;
  padding: 12px 20px;
  margin-bottom: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  position: relative;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.mega__sidebar-head::before {
  content: ">";
  margin-right: 6px;
  font-weight: 400;
  opacity: 0.7;
}
.mega__sidebar-head:hover { color: rgba(255,255,255,0.85); }
.mega__sidebar-head.is-active {
  background: #fff;
  color: var(--color-main);
  border-bottom-color: transparent;
}
.mega__sidebar-head.is-active:hover { color: var(--color-main-dark); }

/* メガメニュー展開中のページ暗転オーバーレイ (PC のみ)。
   body::after を fixed で全面に敷き、ヘッダー (.site-header z-index:100) より下・
   本文より上 (z-index:99) に置くのでヘッダーとパネルは暗くならない。
   pointer-events:none で本文へのクリックは通り、JS の「外側クリックで閉じる」が働く。
   JS が body に .is-mega-open を付け外しする。 */
@media (min-width: 1025px) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(20, 24, 31, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
  }
  body.is-mega-open::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s var(--ease-out), visibility 0s linear 0s;
  }
}

.mega__sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega__sidebar-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: left;
  line-height: 1.45;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-out);
  position: relative;
}
.mega__sidebar-btn > span:first-child { flex: 1; }
.mega__sidebar-btn:hover {
  background: rgba(255,255,255,0.1);
}
.mega__sidebar-btn.is-active {
  background: #fff;
  color: var(--color-main);
}
.mega__sidebar-btn:focus-visible { outline-offset: -2px; outline-color: #fff; }

.mega__sidebar-arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.8;
}

/* Right: content panels */
.mega__content {
  padding: 28px 32px;
  background: #fff;
}
.mega__panel { display: none; }
.mega__panel.is-active { display: block; }
.mega__panel[hidden] { display: none; }
.mega__panel.is-active[hidden] { display: block; }

.mega__panel-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-main);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
  letter-spacing: 0.04em;
  width: 100%;
}
.mega__panel-head::before {
  content: ">";
  font-weight: 400;
}
.mega__panel-head:hover { color: var(--color-main-dark); }

.mega__panel-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
}
.mega__panel-group {}
.mega__panel-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-line);
  position: relative;
}
.mega__panel-heading::before {
  content: ">";
  margin-right: 6px;
  font-weight: 400;
  color: var(--color-main);
}
.mega__panel-heading a {
  color: inherit;
  text-decoration: none;
}
.mega__panel-heading a:hover { color: var(--color-main); }
/* 第一階層のカテゴリ直下に製品がある場合: 製品 1 件 = 見出し 1 つ（見出し自体が製品リンク） */
.mega__panel-group--product .mega__panel-heading { margin-bottom: 0; }
.mega__panel-more { color: var(--color-muted); }
.mega__panel-empty {
  color: var(--color-muted);
  font-size: 13px;
}
.mega__panel-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega__panel-group ul li { margin-bottom: 4px; }
.mega__panel-group ul a {
  display: block;
  padding: 4px 0 4px 16px;
  font-size: 16px;
  color: var(--color-ink);
  line-height: 1.55;
  position: relative;
}
.mega__panel-group ul a::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--color-main);
  font-weight: 400;
}
.mega__panel-group ul a:hover {
  color: var(--color-main);
  text-decoration: underline;
}

/* ----- Mobile nav extras (hidden on desktop) ----- */
.nav-search { display: none; }

/* ----- Mobile nav toggle ----- */
.nav-toggle {
  display: none;
  width: var(--header-h-sp);
  height: var(--header-h-sp);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 0 10px;
  background: var(--color-main);
  color: #fff;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-toggle__label {
  letter-spacing: 0.1em;
  font-family: var(--font-sans-en);
  font-weight: 700;
  line-height: 1;
  margin-top: 0;
}

/* メニューオープン時: 3本線を × に変化 */
body.is-nav-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.is-nav-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.is-nav-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   Hero Carousel
   ========================================================= */
.hero { background: var(--color-bg-soft); }

.carousel {
  position: relative;
  background: #02278e;
  overflow: hidden;
}

.carousel__rail,
.carousel__stage {
  display: contents;
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  height: clamp(600px, calc(100svh - 120px), 760px);
}
.carousel__track {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0s;
  z-index: 2;
}
.carousel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #02278e;
  /* PC 用画像（CSS 変数 --bg-pc がインラインで定義される） */
  background-image: var(--bg-pc);
}
.carousel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(43 18 126 / 80%) 0%, rgb(26 51 115 / 50%) 35%, rgb(6 30 61 / 12%) 50%, rgb(0 0 0 / 0%) 63%), linear-gradient(180deg, rgb(23 19 52 / 85%) 0%, rgb(0 0 0 / 20%) 10%, rgba(255, 255, 255, 0) 22%);
  pointer-events: none;
}

.carousel__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  /* transform: translateY(-50%); */
  z-index: 3;
  padding: clamp(48px, 5vw, 70px) clamp(118px, 14vw, 210px) clamp(48px, 5vw, 70px) clamp(134px, 12vw, 190px);
  color: var(--color-ink);
}
/* キャプション背景パネル: デザインの SVG 多角形（同形・同塗り）を 2 枚重ねで配置。
   頂点: (0,0) → (37%,0) → (100%,46.3%) → (0,99%)。背景の上・テキストの下。
   2 枚は塗りもシャドウも同一。違いはオフセットのみ（前=オリジナル / 後ろ=右下にズラし）。 */
.carousel__slide::before,
.carousel__slide::after {
  /* content: ""; */
  position: absolute;
  top: -15vh;
  left: 0;
  /* SVG 実寸 935×1197 のアスペクト比を維持。スライド高(876px)より高くなり、
     底辺の「とんがり」がスライド下端で水平にカットされる＝デザイン通りになる。 */
  width: clamp(540px, 49.4vw, 935px);
  aspect-ratio: 935 / 1197;
  background: rgba(243, 246, 253, 0.702);
  clip-path: polygon(0% 0%, 37% 0%, 100% 46.3%, 0% 99%);
  filter: drop-shadow(2px 3px 7px rgba(147, 137, 129, 0.18));
  pointer-events: none;
  /* box-shadow: 1.634px 2.516px 12px 0px rgba(147, 137, 129, 0.18); */8); */
}
.carousel__slide::before {
  /* 後ろのレイヤ: デザインの 2 枚パネルに合わせた大きめオフセット。
     1600px時で右≒224px / 下≒64px、後ろの右ピークが前のピークから
     約1/3パネル幅分右へ突き出すバランス。 */
  left: -6%;
  z-index: 1;
}
.carousel__slide::after {
  /* 前のレイヤ: オリジナル位置 */
  z-index: 2;
}
.carousel__caption > * {
  position: relative;
  z-index: 1;
}
.carousel__headline {
  font-size: clamp(42px, 8.3vw, 86px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-base);
  overflow-wrap: anywhere;
}
/* 長い行 (英語など) / 行数が多いときは template-parts/fv.php が修飾クラスを付けて文字サイズを段階的に小さくする
   (--long: 1行 8〜12 文字幅相当 or 4〜5 行 / --xlong: それ以上) */
.carousel__headline--long {
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.carousel__headline--xlong {
  font-size: clamp(24px, 3.8vw, 40px);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.carousel__headline-accent {color: #ebb933;}
.carousel__lead {
  font-size: clamp(16px, 1.3vw, 17px);
  line-height: 1.9;
  max-width: 560px;
  color: var(--color-ink);
  font-weight: 700;
}

.carousel__hud {
  position: absolute;
  left: clamp(24px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--color-ink);
}
.carousel__counter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-sans-en);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1;
  color: var(--color-ink);
}
.carousel__counter-current {
  font-size: 32px;
  color: var(--color-main);
}
.carousel__counter-sep {
  display: block;
  width: 2px;
  height: 26px;
  background: rgba(20,24,31,0.55);
  overflow: hidden;
  text-indent: -999em;
  transform: rotate(28deg);
  transform-origin: center;
  margin: 4px 8px;
  align-self: center;
}
.carousel__counter-total {
  font-size: 16px;
  color: var(--color-muted);
  align-self: flex-end;
}

.carousel__indicators {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.carousel__indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(20,24,31,0.32);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.carousel__indicators button[aria-selected="true"] {
  background: var(--color-main);
}
.carousel__indicators button:hover {
  background: var(--color-main-dark);
  transform: scale(1.12);
}

.carousel__nav,
.carousel__buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-main);
  padding: 4px;
}
.carousel__btn {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.carousel__btn:hover { background: rgba(255,255,255,0.12); }
.carousel__btn:focus-visible { outline-offset: -2px; outline-color: #fff; }
.carousel__btn--toggle .icon-play { display: none; }
.carousel__btn--toggle[aria-pressed="true"] .icon-pause { display: none; }
.carousel__btn--toggle[aria-pressed="true"] .icon-play { display: inline-block; }

.carousel__thumbs {
  position: absolute;
  left: clamp(122px, 10vw, 220px);
  bottom: clamp(32px, 4vw, 54px);
  display: flex;
  z-index: 4;
  list-style: none;
  padding: 0;
  margin: 0;
  width: clamp(460px, 49%, 780px);  /* 一回り小さく (PC のみ) */
  justify-content: flex-start;
}
.carousel__thumbs li {clip-path: polygon(46.13% 0, 99.81% 0, 53.68% 100%, 0% 100%);aspect-ratio: 16 / 9;position: relative;height: 220px;}
.carousel__thumbs li:before {content:"";display:block;background:var(--color-main);width:100%;height:100%;position:absolute;z-index: -1;}
.carousel__thumb {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.carousel__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.25s var(--ease-out);
}
.carousel__thumb.is-active img { opacity: 1; }
.carousel__thumb img { opacity: 0.5; }
.carousel__thumb:focus-visible { outline-offset: 2px; }

.carousel__cta-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(300px, 20%, 560px);
  height: clamp(210px, 20%, 340px);
  background: var(--color-main);
  z-index: 4;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  opacity: .8;
}
.carousel__cta {
  position: absolute;
  right: clamp(20px, 2.5vw, 40px);
  bottom: clamp(28px, 4vw, 48px);
  z-index: 5;
  margin: 0;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-width: 260px;
  padding: 19px 24px;
  background: #fff;
  color: var(--color-main);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow: 0 6px 20px -8px rgba(2,39,142,0.4);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.hero-cta:hover,
.hero-cta:focus-visible {
  background: var(--color-main-dark);
  color: #fff;
}
.hero-cta__arrow {
  position: relative;
  width: 32px;
  height: 12px;
  display: inline-block;
  flex-shrink: 0;
}
.hero-cta__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}
.hero-cta__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(0, -50%) rotate(45deg);
}

@media (min-width: 1025px) {
  .carousel {
    display: flex;
    align-items: stretch;
    background: #fff;
  }

  .carousel__rail {
    display: block;
    position: relative;
    flex: 0 0 122px;
    width: 122px;
    background: #fff;
  }

  .carousel__stage {
    display: block;
    position: relative;
    width: calc(100% - 122px);
    overflow: hidden;
  }

  .carousel__viewport {
    margin-left: 0;
    width: 100%;
    min-height: 680px;
    height: clamp(680px, 100svh, 876px);
  }

  .carousel__caption {
    padding-left: clamp(58px, 4.4vw, 70px);
    padding-right: clamp(64px, 8vw, 128px);
  }

  .carousel__headline {
    font-size: clamp(48px, 9.5vw, 97px);
    line-height: 1.18;
    letter-spacing: 0.02em;
  }
  .carousel__headline--long {
    font-size: clamp(34px, 6.2vw, 64px);
    line-height: 1.28;
    letter-spacing: 0.01em;
  }
  .carousel__headline--xlong {
    font-size: clamp(26px, 4.3vw, 46px);
    line-height: 1.35;
    letter-spacing: 0;
  }

  .carousel__lead {
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1.75;
    max-width: 720px;
  }

  .carousel__hud {
    left: 0;
    right: 0;
    top: 52%;
    width: 100%;
    transform: translateY(-50%);
    gap: clamp(28px, 3.2vw, 42px);
    color: var(--color-ink);
  }

  .carousel__counter {
    align-items: center;
    gap: 8px;
    color: var(--color-ink);
  }

  .carousel__counter-current {
    font-size: clamp(25px, 1.875vw, 30px);
    color: var(--color-main);
    line-height: 1;
  }

  .carousel__counter-sep {
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    text-indent: 0;
    background: transparent;
    color: var(--color-ink);
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: 1;
    transform: none;
  }

  .carousel__counter-total {
    align-self: center;
    font-size: clamp(16px, 1vw, 16px);
    color: var(--color-text);
  }

  .carousel__indicators {
    gap: 14px;
  }

  .carousel__indicators button {
    width: 14px;
    height: 14px;
    background: #b6bfce;
  }

  .carousel__indicators button[aria-selected="true"] {
    background: var(--color-main);
  }

  .carousel__nav,
  .carousel__buttons {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 48px;
    gap: 0;
    padding: 0;
    justify-content: stretch;
  }

  .carousel__btn {
    flex: 1;
    width: auto;
    height: 48px;
  }

  .carousel__thumbs {
    /* 左端を stage の負方向へ押し出し、stage の overflow:hidden で左レール右端
       (=stage の x=0) から切らせる。幅は約83vw（1440pxで1200px=高さ約270px）。 */
    left: clamp(-180px, -5vw, -80px);
    bottom: clamp(34px, 4vw, 54px);
    width: clamp(700px, 83vw, 840px);
  }
  /* サムネ間隔: li 幅 40%（ul 基準）、隣接 li を負マージンで重ねる。
     clip-path slant 46.13% に対し、perfect tessellation = -18.74%（隙間0）。
     -17% で約20px、-16% で約33px、-15% で約45pxの隙間。今は -16% で控えめに。 */
  .carousel__thumbs > li {
    flex: 0 0 40%;
    height: auto; /* aspect-ratio: 16/9 で幅から高さを自動計算（272px固定を解除） */
  }
  .carousel__thumbs > li + li {
    margin-left: -16%;
  }
  .carousel__thumb img {
    height: 100%;
    object-fit: cover;
  }

  .carousel__cta-bg {
    height: clamp(200px, 20%, 328px);
  }
}

/* =========================================================
   About — 惑星（土星）オービットデザイン
   企業ロゴの土星モチーフに合わせ、中央テキストを「惑星本体」、
   info1〜10.jpg を「環」として傾いた楕円軌道上で常時周回させる。
   軌道の寸法 (--orbit-*) は main.js の initAboutOrbit() が
   テキスト量を計測して注入する（テキストと手前の写真が重ならない
   よう縦半径を自動調整するため、静的な値にはできない）。
   ========================================================= */
/* セクション全体 = グリッドの1マス重ね:
   背面いっぱいを無限スライドが流れ、その上にテキストカードが重なる */
/* 上（FV）・下（新製品・注目製品）と白い余白で区切り、
   左: テキスト / 右: 無限スライダー の2カラム。
   スライダーの高さはテキストエリアの高さに揃える
   （トラックを absolute にしてスライダー自身は行の高さに従う） */
.about {
  position: relative;
  background: #fff;
  padding-block: var(--section-pad-y);
  overflow: hidden;
}
.about__row {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

/* --- 横スライド（テキストと同じ高さで、右は画面端までブリード） --- */
.about-slider {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  /* コンテナ右端 → ビューポート右端まで伸ばす（はみ出しは .about が隠す） */
  margin-right: calc(-1 * ((100vw - min(var(--container-max), 100vw)) / 2 + var(--container-pad)));
}
.about-slider__track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 2px;
  width: max-content;
  will-change: transform; /* transform は JS (無限マーキー) が毎フレーム更新 */
}
.about-slider__panel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 20vw, 320px);
  height: 100%;
  overflow: hidden;
}
.about-slider__panel-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.about-slider__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 青のオーバーレイ（下ほど濃く、タイトルの可読性を確保） */
.about-slider__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(7, 45, 153, 0.28) 65%,
    rgba(7, 45, 153, 0.78) 100%
  ); */
}
.about-slider__panel-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

/* 送りボタン: スライダー右下に重ねた白い正方形 */
.about-slider__nav {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 2px;
}
.about-slider__btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--color-main);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.about-slider__btn:hover {
  background: var(--color-main);
  color: #fff;
}

/* --- テキストエリア（左カラム・スライダーと同じ高さで上下中央） --- */
.about__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.about__title {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 24px;
}
.about__title-accent {
  color: var(--color-main);
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.about__text {
  font-size: clamp(15px, 1.4vw, 16px);
  line-height: 2.0;
  color: var(--color-text);
  margin: 0;
  text-align: left;
}
.about__cta { margin: 0; }

/* =========================================================
   Business page（事業内容: page-business.php）
   右カラムに追従型ページ内リンク。スライダーはグリッドの全列に
   またがらせた上でビューポート幅いっぱいにはみ出させる
   ========================================================= */
.business-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  column-gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
/* 全列スパンのスライダーと追従ナビ列を重ねるため、行はすべて明示指定
   （自動配置では重なりが許されず、スライダーが最下段へ押し出される） */
.business-onestop { grid-column: 1; grid-row: 1; }
.business-slider  { grid-row: 2; }
.business-sections { grid-column: 1; grid-row: 3; min-width: 0; }

/* 右: 追従ナビ（コンテンツ全行にまたがる列。スライダーの上に重なる） */
.business-page__aside {
  grid-column: 2;
  grid-row: 1 / 4;
  position: relative;
  z-index: 5;
  align-self: stretch;
}
.business-localnav {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 16px;
}
.business-localnav__label {
  font-family: var(--font-sans-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-main);
  margin: 0 0 10px;
}
.business-localnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.business-localnav__list a {
  display: block;
  padding: 8px 8px 8px 12px;
  border-left: 2px solid var(--color-line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.business-localnav__list a:hover { color: var(--color-main); }
.business-localnav__list a.is-current {
  color: var(--color-main);
  border-left-color: var(--color-main);
  font-weight: 700;
}

/* セクション共通: アンカー移動時に固定ヘッダーへ潜らないよう余白を確保 */
.business-section { scroll-margin-top: calc(var(--header-h) + 24px); }

/* 1. キャッチコピー */
.business-catch {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  margin: 0 0 20px;
}
.business-text {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 1.6em;
}
.business-text:last-child { margin-bottom: 0; }

/* 2. 無限スライダー
   グリッド全列にまたがるアイテムの基準はコンテナ（画面中央寄せ）なので、
   calc(50% - 50vw) でビューポート左端まで正確に張り出せる。
   画像は幅300px固定・height:auto（CSS でのアスペクト調整はしない） */
.business-slider {
  grid-column: 1 / -1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(36px, 5vw, 56px);
  margin-bottom: clamp(44px, 6vw, 72px);
  overflow: hidden;
}
.business-slider__track {
  display: flex;
  width: max-content;
  animation: kaneko-biz-marquee 48s linear infinite;
}
.business-slider__group { display: flex; }
.business-slider__group img {
  display: block;
  width: 300px;
  height: auto;
  flex: 0 0 auto;
}
/* 同一セット2周分を -50% 流すことでシームレスな無限ループになる */
@keyframes kaneko-biz-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .business-slider__track { animation: none; }
}

/* 3. 測定業務 */
.business-h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  padding-left: 16px;
  border-left: 4px solid var(--color-main);
  margin: 0 0 24px;
}
.business-measure__media { margin: 0 0 28px; }
.business-measure__media img {
  display: block;
  max-width: 100%;
  height: auto; /* トリミングしない */
}
.business-measure__cta { margin: 32px 0 0; }

/* コンテンツセクション（見出し + 本文）: 管理画面から任意の数を追加 */
.business-block + .business-block { margin-top: clamp(40px, 6vw, 64px); }
.business-richtext > * { margin: 0 0 1.6em; }
.business-richtext > *:last-child { margin-bottom: 0; }
.business-richtext p,
.business-richtext li {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}
.business-richtext ul,
.business-richtext ol {
  padding-left: 1.6em;
  display: grid;
  gap: 4px;
}
.business-richtext ul { list-style: square; }
.business-richtext ol { list-style: decimal; }
.business-richtext h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
  margin-bottom: 0.8em;
}
.business-richtext h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
  margin-bottom: 0.6em;
}
.business-richtext a { text-decoration: underline; }
.business-richtext img { max-width: 100%; height: auto; }
.business-richtext blockquote {
  border-left: 3px solid var(--color-line-strong);
  padding-left: 1em;
  color: var(--color-muted);
}
.business-cta { margin: 36px 0 0; }

/* =========================================================
   Products
   ========================================================= */
.products {
  padding: var(--section-pad-y) 0;
  background: var(--color-bg-soft);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.product-card {
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
  display: flex;
}
.product-card__link {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  width: 100%;
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.product-card:hover {
  border-color: var(--color-main);
}
.product-card:hover .product-card__title { color: var(--color-main); }
.product-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-band);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out);
}
.product-card:hover .product-card__media img {
  transform: scale(1.03);
}
.product-card__badge {
  position: absolute;
  left: 0;
  top: 16px;
  background: var(--color-main);
  color: #fff;
  font-family: var(--font-sans-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 12px 6px 14px;
}
.product-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.product-card__model {
  font-family: var(--font-sans-en);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 700;
}
.product-card__title {
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--color-ink);
  transition: color 0.2s var(--ease-out);
}
.product-card__lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
  flex: 1;
}
.product-card__body .link-arrow {
  margin-top: 4px;
  align-self: flex-start;
}

/* =========================================================
   Feature banner (防災製品特集) — card inside products section
   ========================================================= */
.feature-banner {
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--color-line);
  background: #fff;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.55fr);
  overflow: hidden;
}

/* Left intro side (white background, navy headline) */
.feature-banner__intro {
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.feature-banner__intro .section-eyebrow { margin-bottom: 4px; }
.feature-banner__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: var(--color-main);
}
.feature-banner__lead {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.7;
}
.feature-banner__cta { margin-top: 20px; }

.btn-feature {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 220px;
  padding: 16px 24px;
  background: var(--color-main);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.btn-feature:hover,
.btn-feature:focus-visible { background: var(--color-main-dark); color: #fff; }
.btn-feature__arrow {
  display: inline-flex;
  position: relative;
  width: 24px;
  height: 12px;
}
.btn-feature__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: #fff;
  transform: translateY(-50%);
}
.btn-feature__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translate(0, -50%) rotate(45deg);
}

/* Right side: products on bousai_bg */
.feature-banner__products {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(20px, 2.6vw, 32px);
  background-image: url("../images/bousai_bg.jpg");
  background-size: cover;
  background-position: center;
  background-color: var(--color-main);
}
.feature-banner__product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s var(--ease-out);
}
.feature-banner__product:hover,
.feature-banner__product:focus-visible {
  color: #fff;
  transform: translateY(-2px);
}
.feature-banner__product-media {
  display: block;
  background: #fff;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5);
}
.feature-banner__product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  transition: transform 0.3s var(--ease-out);
}
.feature-banner__product:hover .feature-banner__product-media img { transform: scale(1.04); }
.feature-banner__product-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 4px rgba(7,11,30,0.45);
}

/* =========================================================
   Tags
   ========================================================= */
.tags {
  padding: var(--section-pad-y) 0;
  background: var(--color-bg-soft);
}

/* Two-pane tag finder (mega-style) */
.tag-finder {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  border: 1px solid var(--color-line);
  background: #fff;
  overflow: hidden;
  min-height: 320px;
}

.tag-finder__sidebar {
  background: var(--color-main);
  color: #fff;
  padding: 14px 0;
}
.tag-finder__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag-finder__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: transparent;
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: left;
  line-height: 1.45;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.tag-finder__btn > span:first-of-type { flex: 1; }
.tag-finder__btn:hover { background: rgba(255,255,255,0.1); }
.tag-finder__btn.is-active {
  background: #fff;
  color: var(--color-main);
}
.tag-finder__btn:focus-visible { outline-offset: -2px; outline-color: #fff; }
.tag-finder__arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.8;
}

.tag-finder__content {
  padding: 28px 32px;
}
.tag-finder__panel { display: none; }
.tag-finder__panel.is-active { display: block; }
.tag-finder__panel[hidden] { display: none; }
.tag-finder__panel.is-active[hidden] { display: block; }
.tag-finder__heading,
.tag-finder__sp-heading {
  /* PC では非表示 (カテゴリ名はサイドバーの active タブで明確) */
  display: none;
}

/* ===== 投稿・製品の本文エリア (the_content) ===== */
.wp-content {
  font-family: var(--font-sans-ja);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}
/* 子要素の明朝体回避 (ブラウザデフォルトの table/blockquote/code が serif になる対策) */
.wp-content *,
.wp-content table,
.wp-content tr,
.wp-content th,
.wp-content td,
.wp-content blockquote,
.wp-content figcaption,
.wp-content input,
.wp-content button,
.wp-content select,
.wp-content textarea {
  font-family: inherit;
}

/* --- 見出し --- */
.wp-content h2 {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--color-ink);
  margin: 2em 0 0.8em;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--color-main);
  line-height: 1.45;
}
.wp-content h3 {
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 700;
  color: var(--color-ink);
  margin: 1.8em 0 0.6em;
  padding: 0 0 0 14px;
  border-left: 4px solid var(--color-main);
  line-height: 1.5;
}
.wp-content h4 {
  font-weight: 700;
  color: var(--color-main);
  margin: 1.4em 0 0.4em;
  line-height: 1.5;
}
.wp-content h5 {
  font-weight: 700;
  color: var(--color-ink);
  margin: 1.2em 0 0.3em;
}
.wp-content h6 {
  font-weight: 700;
  color: var(--color-muted);
  margin: 1.2em 0 0.3em;
}

/* --- 段落 --- */
.wp-content p { margin: 1em 0; }

/* --- リンク --- */
.wp-content a:not([class]) {
  color: var(--color-main);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.wp-content a:not([class]):hover {
  color: var(--color-main-dark);
  text-decoration-thickness: 2px;
}

/* --- リスト --- */
.wp-content ul,
.wp-content ol {
  margin: 1em 0;
  padding-left: 1.8em;
}
.wp-content ul { list-style: disc outside; }
.wp-content ol { list-style: decimal outside; }
.wp-content ul ul,
.wp-content ol ol,
.wp-content ul ol,
.wp-content ol ul { margin: 0.3em 0; }
.wp-content li { margin: 0.4em 0; }
.wp-content li::marker { color: var(--color-main); }

/* --- 表 --- */
.wp-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
}
.wp-content table th,
.wp-content table td {
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  vertical-align: top;
  text-align: left;
}
.wp-content table th {
  background: var(--color-bg-band);
  font-weight: 700;
  color: var(--color-ink);
}
.wp-content table thead th { background: var(--color-main-soft); }

/* --- 引用 --- */
.wp-content blockquote {
  margin: 1.6em 0;
  padding: 16px 20px;
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-line-strong);
  color: var(--color-text);
  font-style: normal;
}
.wp-content blockquote p:first-child { margin-top: 0; }
.wp-content blockquote p:last-child { margin-bottom: 0; }
.wp-content cite {
  display: block;
  color: var(--color-muted);
  margin-top: 8px;
  font-style: normal;
}

/* --- コード --- */
.wp-content code {
  background: var(--color-bg-band);
  padding: 2px 6px;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.92em;
  border-radius: 2px;
}
.wp-content pre {
  background: var(--color-ink);
  color: #fff;
  padding: 16px 18px;
  margin: 1.4em 0;
  overflow-x: auto;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  line-height: 1.6;
}
.wp-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* --- 区切り線 --- */
.wp-content hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 2.2em 0;
}

/* --- 画像 --- */
.wp-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
}
.wp-content figure {
  margin: 1.6em 0;
}
.wp-content figcaption {
  color: var(--color-muted);
  text-align: center;
  margin-top: 6px;
  line-height: 1.5;
}
/* WordPress クラシック画像配置 */
:is(.wp-content, .business-richtext) .alignleft   { float: left;  margin: 6px 24px 12px 0; }
:is(.wp-content, .business-richtext) .alignright  { float: right; margin: 6px 0 12px 24px; }
:is(.wp-content, .business-richtext) .aligncenter { display: block; margin-left: auto; margin-right: auto; }
:is(.wp-content, .business-richtext) .alignnone   { margin: 1em 0; }
:is(.wp-content, .business-richtext) .alignwide   { max-width: 100%; }

/* --- WordPress ギャラリー (クラシック [gallery] ショートコード) ---
   事業内容ページのエディタ本文 (.business-richtext) でも同じ見た目にする --- */
:is(.wp-content, .business-richtext) .gallery {
  display: grid;
  grid-template-columns: repeat(var(--kaneko-gallery-cols, 3), 1fr);
  gap: 10px;
  margin: 1.4em 0; align-items: end;
}
:is(.wp-content, .business-richtext) .gallery.gallery-columns-1 { --kaneko-gallery-cols: 1; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-2 { --kaneko-gallery-cols: 2; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-3 { --kaneko-gallery-cols: 3; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-4 { --kaneko-gallery-cols: 4; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-5 { --kaneko-gallery-cols: 5; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-6 { --kaneko-gallery-cols: 6; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-7 { --kaneko-gallery-cols: 7; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-8 { --kaneko-gallery-cols: 8; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-9 { --kaneko-gallery-cols: 9; }
:is(.wp-content, .business-richtext) .gallery-item {
  margin: 0 !important;
  text-align: center;
  width: 100% !important; /* WP 既存 inline width を上書き */
}
:is(.wp-content, .business-richtext) .gallery-item img {
  margin: 0 auto;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--color-line);
  display: block;
}
:is(.wp-content, .business-richtext) .gallery-icon img { border: 1px solid var(--color-line); }
:is(.wp-content, .business-richtext) .gallery-caption {
  display: block;
  color: var(--color-muted);
  margin-top: 6px;
  line-height: 1.5;
}
/* ギャラリー画像はクリック不可表示にもなる (cursor: default) */
:is(.wp-content, .business-richtext) .gallery-item img,
:is(.wp-content, .business-richtext) .gallery-icon img { cursor: default; }
/* スマホでは列数を強制的に減らす */
@media (max-width: 768px) {
  :is(.wp-content, .business-richtext) .gallery { --kaneko-gallery-cols: 2 !important; }
  :is(.wp-content, .business-richtext) .gallery.gallery-columns-1 { --kaneko-gallery-cols: 1 !important; }
}

/* --- カスタムレイアウト (本製品でできること エディタで挿入) --- */
/* 1) 2列レイアウト: 画像が違う高さでも両カラムの「下端」で揃う
   - align-items: end でカラム全体を行の下端に寄せる              */
.wp-content .kaneko-layout-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 1.6em 0;
  align-items: end;                 /* ← 下端揃え */
}
.wp-content .kaneko-layout-2col__img { margin: 0 0 12px; }
.wp-content .kaneko-layout-2col__img img {
  display: block;
  width: 100%;
  height: auto;
}
.wp-content .kaneko-layout-2col__text > :first-child { margin-top: 0; }
.wp-content .kaneko-layout-2col__text > :last-child  { margin-bottom: 0; }

/* 2) 画像左+テキスト右 (回り込みなし — Grid で完結) */
.wp-content .kaneko-layout-imgtext {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr;
  gap: 28px;
  align-items: start;
  margin: 1.6em 0;
}
.wp-content .kaneko-layout-imgtext__img img {
  display: block;
  width: 100%;
  height: auto;
}
.wp-content .kaneko-layout-imgtext__body > :first-child { margin-top: 0; }
.wp-content .kaneko-layout-imgtext__body > :last-child  { margin-bottom: 0; }

/* SP では 1 列縦並びに */
@media (max-width: 600px) {
  .wp-content .kaneko-layout-2col,
  .wp-content .kaneko-layout-imgtext {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* --- 強調 / マーカー --- */
.wp-content strong { font-weight: 700; }
.wp-content em { font-style: italic; }
.wp-content mark {
  background: linear-gradient(to bottom, transparent 60%, var(--color-main-soft) 60%);
  padding: 0 2px;
}

/* --- 動画 / iframe --- */
.wp-content iframe,
.wp-content embed,
.wp-content video {
  max-width: 100%;
  margin: 1.4em 0;
}

/* --- 製品詳細ページのフリースペース部分にも適用 --- */
.product-section__content { /* セクション内 wp-content の余白調整 */ }
.product-section__content > :first-child { margin-top: 0; }
.product-section__content > :last-child { margin-bottom: 0; }


.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
/* ※ セレクタは a.tag に限定すること。
   WordPress はタグアーカイブの body にも class="tag" を付与するため、
   .tag のままだとページ全体が枠線で囲われる不具合になる */
a.tag {
  display: inline-block;
  padding: 8px 14px;
  font-size: 16px;
  /* --tag-color はカテゴリー色設定（inc/category-colors.php）から
     インラインで注入される。未設定時はテーマ既定色 */
  color: var(--tag-color, var(--color-main));
  border: 1px solid var(--tag-color, var(--color-main));
  background: #fff;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
  line-height: 1.4;
}
a.tag:hover,
a.tag:focus-visible {
  background: var(--tag-color, var(--color-main));
  color: #fff;
}

/* =========================================================
   News
   ========================================================= */
.news {
  padding: var(--section-pad-y) 0;
  background: #fff;
}
.news-list {
  border-top: 1px solid var(--color-line);
}
.news-item {
  display: grid;
grid-template-columns: 215px 1fr;
  gap: 24px 32px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--color-line);
}
.news-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.news-item__date {
  font-family: var(--font-sans-en);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: 0.04em;
}
.news-item__category {
  display: inline-block;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  padding: 3px 10px;
  min-width: 86px;
  text-align: center;
  line-height: 1.4;
  font-weight: 700;
}
.news-item__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.8;
}
.news-item__body a {
  color: var(--color-text);
  text-decoration: none;
}
.news-item__body a:hover {
  color: var(--color-main);
  text-decoration: underline;
}
.news-item__body img {
  align-self: flex-start;
  border: 1px solid var(--color-line);
}

/* =========================================================
   Business
   ========================================================= */
.business {
  padding: var(--section-pad-y) 0;
  background: var(--color-bg-soft);
}
.business-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.business-card {
  border: 1px solid var(--color-line);
  background: #fff;
  transition: border-color 0.2s var(--ease-out);
}
.business-card:hover { border-color: var(--color-main); }
.business-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-text);
}
.business-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-band);
}
.business-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-out);
}
.business-card:hover .business-card__media img { transform: scale(1.04); }
.business-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.business-card__num {
  font-family: var(--font-sans-en);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-main);
}
.business-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.4;
  padding-bottom: 8px;
  margin-bottom: 4px;
  position: relative;
}
.business-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--color-main);
}
.business-card__lead {
  font-size: 16px;
  line-height: 1.75;
}

/* =========================================================
   Recruit（トップページ 採用情報: 管理画面で写真・文言を編集可）
   ========================================================= */
.recruit {
  padding: var(--section-pad-y) 0;
}
.recruit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-main);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: filter 0.2s var(--ease-out);
}
.recruit-card:hover { filter: brightness(1.05); }
.recruit-card__media {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  background: #0a1430;
}
.recruit-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-card__body {
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  color: #fff;
}
.recruit-card__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #fff;
}
.recruit-card__lead {
  font-size: 16px;
  line-height: 1.85;
  opacity: 0.92;
}
.recruit-card__lead p + p { margin-top: 0.8em; }
.recruit-card .btn-outline-white { margin-top: 10px; align-self: flex-start; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--color-line);
  padding-top: 0;
  position: relative;
}

/* 1. Logo + HQ address + phone block at the very top of the footer */
.footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--color-line);
}
.footer-meta__brand { flex-shrink: 0; }
.footer-meta__brand img { height: 44px; width: auto; display: block; }
.footer-meta__divider {
  display: inline-block;
  width: 1px;
  height: 44px;
  background: var(--color-line-strong);
}
.footer-meta__address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  font-style: normal;
}
.footer-meta__zip {
  font-family: var(--font-sans-en);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.footer-meta__street { font-weight: 500; }
.footer-meta__phone {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.footer-meta__phone-link {
  display: inline-flex;
  line-height: 1;
}
.footer-meta__phone-img {
  display: block;
  height: 32px;
  width: auto;
  transition: opacity 0.2s var(--ease-out);
}
.footer-meta__phone-link:hover .footer-meta__phone-img,
.footer-meta__phone-link:focus-visible .footer-meta__phone-img { opacity: 0.78; }
.footer-meta__phone-hours {
  font-size: 16px;
  color: var(--color-muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 2. Sitemap (4 cols) + ISO mark (5th col) */
.footer-mid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 180px;
  gap: 32px;
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--color-line);
}
.footer-nav {
  display: contents;
}
.footer-nav__head {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-main);
}
.footer-nav__head a { color: var(--color-ink); }
.footer-nav__head a:hover { color: var(--color-main); }
.footer-nav__col ul li { margin-bottom: 6px; }
.footer-nav__col ul a {
  font-size: 16px;
  color: var(--color-text);
}
.footer-nav__col ul a:hover { color: var(--color-main); }
/* 下層リンク（採用情報 > カネコの事業を知る の 6 ページ） */
.footer-nav__sub {
  margin: 6px 0 2px;
  padding-left: 12px;
  border-left: 1px solid var(--color-line);
}
.footer-nav__col .footer-nav__sub li { margin-bottom: 4px; }
.footer-nav__col .footer-nav__sub a { font-size: 14px; color: var(--color-muted); }
.footer-nav__col .footer-nav__sub a:hover { color: var(--color-main); }

.footer-iso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-iso img {
  display: block;
  height: auto;
  max-width: 160px;
  width: 100%;
}
.footer-iso__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
}

/* 3. Slim bottom bar with just the secondary links */
.footer-bottom {
  display: flex;
  justify-content: center;
  padding: 18px 0 8px;
}
.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.footer-bottom__links li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--color-line-strong);
  margin: 0 14px;
  vertical-align: middle;
}
.footer-bottom__links a {
  font-size: 16px;
  color: var(--color-text);
  font-weight: 500;
}
.footer-bottom__links a:hover { color: var(--color-main); }

.footer-copy {
  font-family: var(--font-sans-en);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  text-align: center;
  padding: 4px 0 32px;
}

.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  background: var(--color-main);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  z-index: 80;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
  pointer-events: none;
}
.page-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.page-top:hover { background: var(--color-main-dark); }
.page-top[hidden] { display: none; }

/* =========================================================
   Pagination (the_posts_pagination 出力)
   <nav class="navigation pagination">
     <div class="nav-links">
       <a/.span class="page-numbers (current|prev|next|dots)">...</...>
     </div>
   </nav>
   ========================================================= */
.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-sans-en);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.15s var(--ease-out),
              background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
}
.navigation.pagination a.page-numbers:hover {
  color: var(--color-main);
  border-color: var(--color-main);
  background: rgba(7, 45, 153, 0.04);
}
.navigation.pagination .page-numbers.current {
  background: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
  cursor: default;
}
.navigation.pagination .page-numbers.dots {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: default;
  min-width: 24px;
  padding: 0 4px;
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  padding: 0 16px;
  letter-spacing: 0.04em;
  font-weight: 500;
  font-family: var(--font-sans-ja);
}
@media (max-width: 600px) {
  .navigation.pagination .nav-links { gap: 4px; }
  .navigation.pagination .page-numbers {
    min-width: 36px; height: 36px;
    padding: 0 10px; font-size: 14px;
  }
  .navigation.pagination .page-numbers.prev,
  .navigation.pagination .page-numbers.next { padding: 0 12px; }
}

/* =========================================================
   製品一覧ページ (archive-product) を 1行ごとの横並びレイアウトに
   - 画像: 左 (固定幅) / テキスト: 右 (残り全部)
   - その他の場所で使う .product-grid (トップページの注目製品など) は
     既存の 3 列グリッドのままにする
   ========================================================= */
body.post-type-archive-product .product-grid,
body.tax-product_cat .product-grid,
body.tax-product_tag .product-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.post-type-archive-product .product-grid .product-card,
body.tax-product_cat .product-grid .product-card,
body.tax-product_tag .product-grid .product-card {
  width: 100%;
}
body.post-type-archive-product .product-grid .product-card__link,
body.tax-product_cat .product-grid .product-card__link,
body.tax-product_tag .product-grid .product-card__link {
  flex-direction: row;
  align-items: stretch;
}
body.post-type-archive-product .product-grid .product-card__media,
body.tax-product_cat .product-grid .product-card__media,
body.tax-product_tag .product-grid .product-card__media {
  flex: 0 0 280px;
  aspect-ratio: 4 / 3;
}
body.post-type-archive-product .product-grid .product-card__body,
body.tax-product_cat .product-grid .product-card__body,
body.tax-product_tag .product-grid .product-card__body {
  padding: 20px 26px;
  justify-content: center;
}

/* SP: 横スナップスライダー化 CSS (max-width:768px) との衝突を打ち消し */
@media (max-width: 768px) {
  body.post-type-archive-product .product-grid,
  body.tax-product_cat .product-grid,
  body.tax-product_tag .product-grid {
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: none;
  }
  body.post-type-archive-product .product-grid > .product-card,
  body.tax-product_cat .product-grid > .product-card,
  body.tax-product_tag .product-grid > .product-card {
    flex: 1 1 auto;
  }
}

/* SP では縦並びに戻す (画像左+テキスト右だと窮屈) */
@media (max-width: 600px) {
  body.post-type-archive-product .product-grid .product-card__link,
  body.tax-product_cat .product-grid .product-card__link,
  body.tax-product_tag .product-grid .product-card__link {
    flex-direction: column;
  }
  body.post-type-archive-product .product-grid .product-card__media,
  body.tax-product_cat .product-grid .product-card__media,
  body.tax-product_tag .product-grid .product-card__media {
    flex-basis: auto;
    width: 100%;
  }
  body.post-type-archive-product .product-grid .product-card__body,
  body.tax-product_cat .product-grid .product-card__body,
  body.tax-product_tag .product-grid .product-card__body {
    padding: 18px 20px;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-mid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-iso { grid-column: 1 / -1; align-items: center; text-align: center; }

  .site-header__inner {
    height: var(--header-h-sp);
    min-height: var(--header-h-sp);
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: var(--container-pad);
  }
  .site-header__brand {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    align-items: center;
    padding-bottom: 0;
  }
  .brand img { height: 28px; }
  .brand-tagline { display: none; }
  .site-header__utility { display: none; }
  .site-header__cta { display: none; }
  .site-header__phone { display: none; }
  .global-nav__item--cta { display: list-item; }
  .nav-toggle {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-right: calc(var(--container-pad) * -1);
  }

  .global-nav {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
    position: fixed;
    top: var(--header-h-sp);
    left: 0;
    right: 0;
    height: calc(100lvh - var(--header-h-sp));
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 32px;
    border-top: 1px solid var(--color-line);
    z-index: 95;
    display: flex;
    flex-direction: column;
  }
  body.is-nav-open .global-nav {
    transform: translateX(0);
  }
  body.is-nav-open { overflow: hidden; }

  /* Search at the top of the mobile drawer */
  .nav-search {
    display: flex;
    align-items: stretch;
    margin: 16px 20px 8px;
    border: 1px solid var(--color-line-strong);
    height: 44px;
    background: #fff;
  }
  .nav-search input[type="search"] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0 12px;
    font-size: 16px;
    color: var(--color-text);
  }
  .nav-search input[type="search"]::placeholder { color: var(--color-muted); }
  .nav-search input[type="search"]:focus { outline: none; }
  .nav-search:focus-within {
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
  }
  .nav-search__submit {
    width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-main);
    color: #fff;
  }
  .nav-search__submit:hover { background: var(--color-main-dark); }

  .global-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .global-nav__item {
    border-bottom: 1px solid var(--color-line);
  }
  .global-nav__link {
    width: 100%;
    padding: 18px 24px;
    justify-content: space-between;
  }
  .global-nav__link::after { display: none; }

  /* Chevron on the 製品案内 item:
     SP ではサブドロワーが右からスライドインするので右向き (-90°) のまま回転させない */
  .global-nav__chevron {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    color: var(--color-muted);
    transform: rotate(-90deg);
    transition: none;
  }
  .global-nav__item.is-open > .global-nav__link .global-nav__chevron {
    color: var(--color-main);
    transform: rotate(-90deg);
  }

  /* Language switch in the mobile drawer */
  .global-nav__item--lang {
    display: block;
    border-bottom: 0;
    padding: 18px 24px 4px;
  }
  .lang-switch--nav {
    justify-content: center;
  }
  .lang-switch--nav li + li::before { margin: 0 12px; }
  .lang-switch--nav a,
  .lang-switch--nav span { padding: 6px 4px; display: inline-block; }

  /* Full-width お問い合わせ button */
  .global-nav__item--cta {
    border-bottom: 0;
    padding: 8px 20px 4px;
    margin-top: auto;
  }
  .global-nav__link--cta {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 18px 24px;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.08em;
  }

  /* Phone block at the bottom of the mobile drawer */
  .global-nav__item--phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 20px 24px;
    border-bottom: 0;
  }
  .global-nav__phone-link {
    display: inline-flex;
    line-height: 1;
  }
  .global-nav__phone-img {
    display: block;
    height: 30px;
    width: auto;
  }
  .global-nav__phone-hours {
    font-size: 12px;
    color: var(--color-muted);
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 2px;
  }

  /* Mega panel becomes a slide-in sub-drawer (within the nav) */
  .mega {
    position: absolute;
    inset: 0;
    background: #fff;
    box-shadow: none;
    border-top: 0;
    border-bottom: 0;
    /* PC 用の grid 伸縮 / フェードは使わず、横スライドのみ */
    display: block;
    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 32px;
    z-index: 5;
  }
  .mega[hidden] {
    display: block;
    transform: translateX(100%);
    visibility: hidden;
  }
  .global-nav__item.is-open .mega,
  .global-nav__item.is-open > .mega {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s var(--ease-out);
  }
  .global-nav__item.is-open .mega[hidden] {
    transform: translateX(0);
    visibility: visible;
  }
  .mega__inner {
    min-height: 0;
    overflow: visible;
  }
  .mega__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    color: var(--color-main);
    font-weight: 700;
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-line);
    text-align: left;
  }
  .mega__back:hover { background: var(--color-main-soft); }
  .mega__title {
    display: block;
    padding: 18px 24px 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-line);
  }
  /* Mobile: アコーディオンレイアウト */
  .mega__layout {
    grid-template-columns: 1fr;
    padding: 0;
    min-height: 0;
  }
  /* サイドバーをアコーディオンリストとして表示 */
  .mega__sidebar {
    display: block;
    background: #fff;
    width: 100%;
    padding: 0;
  }
  .mega__sidebar-head,
  .mega__sidebar-head.is-active {
    padding: 14px 24px;
    background: #fff;
    color: var(--color-main);
    font-weight: 700;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 0;
  }
  .mega__sidebar-head::before { display: none; }
  .mega__sidebar-list { padding: 0; }
  /* ボタン: 白背景・ダークテキスト */
  .mega__sidebar-btn {
    background: #fff;
    color: var(--color-ink);
    padding: 14px 24px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-line);
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .mega__sidebar-btn::before { display: none; }
  .mega__sidebar-btn.is-active {
    background: #fff;
    color: var(--color-ink);
  }
  .mega__sidebar-btn.is-active::before { display: none; }
  /* 矢印: 閉=下向き ↓、開=上向き ↑ */
  .mega__sidebar-arrow {
    transform: rotate(135deg);
    transition: transform 0.2s var(--ease-out);
  }
  .mega__sidebar-btn.is-open .mega__sidebar-arrow {
    transform: rotate(-45deg);
  }
  /* コンテンツペインは非表示（パネルはサイドバー内にインライン展開） */
  .mega__content { display: none; }
  /* パネル: デフォルト非表示。.is-open クラスでアコーディオン展開 */
  .mega__panel { display: none !important; padding: 0; border: none; }
  .mega__panel[hidden] { display: none !important; }
  .mega__panel.is-open { display: block !important; border-bottom: 1px solid var(--color-line); }
  .mega__panel.is-open[hidden] { display: none !important; }
  /* パネルヘッド（カテゴリートップへのリンク） */
  .mega__panel-head {
    display: block;
    padding: 13px 24px;
    margin: 0;
    border-bottom: 1px solid var(--color-line);
    font-weight: 700;
    background: var(--color-bg-soft);
    width: 100%;
  }
  .mega__panel-body {
    grid-template-columns: 1fr;
    padding: 8px 24px 16px;
    gap: 16px;
  }
  .mega__panel-heading { margin-top: 8px; }
  .mega__panel-group ul a {
    padding: 8px 0 8px 16px;
  }

  /* ============================================================
     Carousel: 水平レール（≤1024px）
     .carousel__rail を画面下部に横並びバーとして表示
     ============================================================ */
  .carousel__rail {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: rgba(255,255,255,0.96);
    border-top: 1px solid var(--color-line);
    z-index: 6;
    padding: 0 20px;
    gap: 0;
  }

  /* HUD: position:absolute を解除してフレックスアイテムに */
  .carousel__hud {
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex: 1;
    color: var(--color-ink);
  }

  /* カウンター: 横並び */
  .carousel__counter {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .carousel__counter-current {
    font-size: 18px;
    line-height: 1;
  }
  .carousel__counter-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(20,24,31,0.35);
    overflow: hidden;
    text-indent: -999em;
    transform: rotate(20deg);
    margin: 0 3px;
    align-self: center;
  }
  .carousel__counter-total {
    align-self: center;
  }

  /* インジケーター: 横並びドット */
  .carousel__indicators {
    flex-direction: row;
    gap: 7px;
  }
  .carousel__indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #b6bfce;
  }
  .carousel__indicators button[aria-selected="true"] {
    background: var(--color-main);
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }

  /* ナビボタン: 右寄せ、白背景なし */
  .carousel__nav,
  .carousel__buttons {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    gap: 2px;
    margin-left: auto;
    justify-content: flex-end;
    align-items: center;
  }
  .carousel__btn {
    color: var(--color-main);
    width: 36px;
    height: 36px;
  }
  .carousel__btn:hover { background: var(--color-main-soft); }

  /* ---- キャプション: 左レール不要になった分 padding 縮小 ---- */
  .carousel__caption {
    padding-left: clamp(24px, 3.5vw, 48px);
    padding-right: clamp(24px, 5vw, 48px);
    bottom: 1.5em;
  }

  /* ---- サムネイル: PC同様に 40%幅 + -16%重ね + 左寄せ ---- */
  .carousel__thumbs {
    left: clamp(-40px, -3vw, 0px);
    bottom: calc(52px + clamp(20px, 3vw, 32px));
    width: clamp(600px, 88vw, 1050px);
  }
  .carousel__thumbs li {
    flex: 0 0 40%;
    width: auto;
    height: auto;
  }
  .carousel__thumbs > li + li {
    margin-left: -16%;
  }
  .carousel__cta {
    bottom: calc(52px + 14px);
  }
  .carousel__cta-bg {
    bottom: 52px;
  }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  /* ---- 新製品・注目製品 / 事業紹介: SP 横スナップスライダー（peek あり） ---- */
  .product-grid,
  .business-grid {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    /* コンテナ余白を打ち消して全画面幅に、先頭カードはコンテナ分インデント */
    margin-left: calc(var(--container-pad) * -1);
    margin-right: calc(var(--container-pad) * -1);
    padding-left: var(--container-pad);
    padding-right: calc(var(--container-pad) * 0.5);
    scroll-padding-left: var(--container-pad);
  }
  .product-grid::-webkit-scrollbar,
  .business-grid::-webkit-scrollbar { display: none; }

  /* 各カード: 80vw で次のカードが右端に peek する */
  .product-grid > .product-card {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }
  .business-grid > .business-card {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }

  /* ---- SP スライダー UI（ドット・矢印・一時停止） ---- */
  .sp-slider-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0 4px;
  }
  .sp-slider-btn {
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-main);
    padding: 0;
    border-radius: 50%;
    transition: background 0.15s;
  }
  .sp-slider-btn:hover,
  .sp-slider-btn:focus-visible { background: var(--color-main-soft); outline: none; }
  .sp-slider-dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .sp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(20, 24, 31, 0.22);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .sp-dot.is-active {
    background: var(--color-main);
  }
  /* ===== SP: タブ UI 廃止、コンパクトなアコーディオンに ===== */
  .tag-finder {
    display: block;
    border: 0;
    background: transparent;
    min-height: 0;
    overflow: visible;
  }
  .tag-finder__sidebar { display: none; }
  .tag-finder__content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* 全パネルを常時 DOM 上に表示するが、中身は折り畳む */
  .tag-finder__panel,
  .tag-finder__panel[hidden] {
    display: block !important;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  /* 見出し = アコーディオンの開閉トリガー */
  .tag-finder__sp-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-ink);
    background: #f6f8fb;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
  }
  .tag-finder__sp-heading::after {
    content: "+";
    display: inline-block;
    width: 22px; height: 22px;
    line-height: 20px; text-align: center;
    font-size: 20px; font-weight: 400;
    color: var(--color-main);
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s, background 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .tag-finder__panel.is-sp-open .tag-finder__sp-heading {
    background: var(--color-main);
    color: #fff;
  }
  .tag-finder__panel.is-sp-open .tag-finder__sp-heading::after {
    content: "−";
    background: #fff;
    color: var(--color-main);
  }
  /* タグリスト本体: デフォルトは閉じる、is-sp-open で表示 */
  .tag-finder__panel .tag-list {
    display: none;
    margin: 0;
    padding: 14px 16px 16px;
    gap: 6px 8px;
    flex-wrap: wrap;
  }
  .tag-finder__panel.is-sp-open .tag-list { display: flex; }
  .tag-finder__panel .tag {
    font-size: 12.5px;
    padding: 5px 11px;
  }

  /* about: SP は 1カラム（テキスト → スライダー）。
     スライダーは高さ固定で左右いっぱいにブリード */
  .about__title { font-size: clamp(28px, 7vw, 36px); letter-spacing: 0.04em; margin-bottom: 18px; }
  .about__row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .about__body { gap: 18px; }
  .about-slider {
    min-height: 0;
    height: 220px;
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
  }

  /* 事業内容: 1カラム化し、ページ内リンクは本文上部の横並びバーとして追従 */
  /* minmax(0,1fr): ナビのピル行の内容幅でカラムが押し広げられるのを防ぐ */
  .business-page__inner { grid-template-columns: minmax(0, 1fr); }
  .business-page__aside {
    grid-column: 1;
    grid-row: 1;
    align-self: auto;
    margin-bottom: 28px;
  }
  .business-onestop { grid-column: 1; grid-row: 2; }
  .business-slider  { grid-column: 1; grid-row: 3; }
  .business-sections { grid-column: 1; grid-row: 4; }
  .business-localnav {
    top: calc(var(--header-h-sp) + 8px);
    padding: 10px 12px;
    border-radius: 10px;
  }
  .business-localnav__label { display: none; }
  .business-localnav__list {
    grid-auto-flow: column;
    justify-content: start;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .business-localnav__list a {
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .business-localnav__list a.is-current {
    border-color: var(--color-main);
  }
  .business-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }

  .news-item { grid-template-columns: 1fr; gap: 8px; padding: 18px 4px; }
  .news-item__meta { gap: 8px 12px; }

  .recruit-card { grid-template-columns: 1fr; }
  .recruit-card__media { min-height: 200px; aspect-ratio: 16 / 10; }

  .footer-mid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 0;
  }
  .footer-nav__col {
    border-bottom: 1px solid var(--color-line);
    padding: 14px 0;
  }
  .footer-nav__head { margin-bottom: 8px; padding-bottom: 0; border-bottom: 0; }
  .footer-nav__col ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
  }
  /* 下層リンクを持つ項目は 2 列分に広げ、下層は 2 列で並べる */
  .footer-nav__col ul > li:has(.footer-nav__sub) { grid-column: 1 / -1; }
  .footer-nav__sub { margin-top: 6px; gap: 4px 16px; }
  .footer-iso {
    grid-column: auto;
    align-items: center;
    text-align: center;
    padding: 20px 0 8px;
    margin: auto;
    max-width: initial;
  }
  .footer-iso img { max-width: 200px; }

  /* Stack the footer meta on mobile */
  .footer-meta {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 32px 0 24px;
  }
  .footer-meta__divider { display: none; }
  .footer-meta__address { align-items: center; }
  .footer-meta__phone {
    margin-left: 0;
    align-items: center;
  }
  .footer-meta__phone-img { height: 28px; }

  .feature-banner__inner { flex-direction: column; align-items: flex-start; }

  /* 防災製品特集: SP ではイントロ+製品エリアを縦積み（製品カードは2列維持） */
  .feature-banner {
    grid-template-columns: 1fr;
  }

  /* ---- Carousel: SP（≤768px）レイアウト調整 ---- */

  /* レール: ≤1024px の 52px を 48px に上書き */
  .carousel__rail {
    height: 48px;
    padding: 0 16px;
  }

  /* SP インジケーター: ドットスタイルに */
  .carousel__indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(20,24,31,0.28);
  }
  .carousel__indicators button[aria-selected="true"] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-main);
  }
  .carousel__counter-current { font-size: 16px; }
  .carousel__counter-sep {
    transform: rotate(20deg);
  }
  .carousel__counter-total { font-size: 12px; }

  /* ---- Viewport ---- */
  .carousel__viewport {
    height: clamp(520px, calc(100svh - var(--header-h-sp)), 720px);
    min-height: 600px;
  }

  /* ---- 背景 ---- */
  .carousel__bg {
    background-position: center top;
    /* SP 用画像（--bg-sp）が指定されていればそれを優先、なければ --bg-pc にフォールバック */
    background-image: var(--bg-sp, var(--bg-pc));
  }
  .carousel__bg::after {
    background: linear-gradient(180deg, rgb(25 11 77 / 0%) 0%, rgb(10 21 78 / 0%) 35%, rgb(17 39 93 / 55%) 62%, rgb(29 46 104 / 90%) 100%);
  }

  /* ---- パネル: SP では下端に反転配置してテキスト背景に ---- */
  .carousel__slide::before,
  .carousel__slide::after {
    display: block;
    width: clamp(290px, 88vw, 480px);
    top: auto;
    bottom: 0;
    transform: scaleY(-1);
  }

  /* ---- サムネイル: SP 用小型化 ---- */
  .carousel__thumbs {
    left: -9%;
    right: 0;
    width: 118%;
    padding: 0;                  /* 左右パディングなし → justify-center で均等はみ出し */
    bottom: 140px; /* レール48 + gap12 + CTAボタン67 + gap13 = 140px */
    gap: 0;
    justify-content: center;    /* アイテム全体を中央寄せ → 左右均等に見切れ */
    max-width: none;
  }
  /* clip-path・aspect-ratio はベース (46.13% slant / 16:9) を継承
     flex・margin は PC と同じ 48% / -19% でテッセレーション（gap 半減） */
  .carousel__thumbs > li {
    flex: 0 0 48%; /* 20%拡大: 40% × 1.2 = 48% */
    width: auto;
    max-width: none;
    height: auto;
  }
  .carousel__thumbs > li + li {
    margin-left: -19%; /* -16% → -19%: サムネイル間の隙間を半分に */
  }
  .carousel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- キャプション: サムネイルの上 ---- */
  /* thumbnail 高さ = 48% × 118%コンテナ × 9/16 ≈ 32vw
     bottom = thumbnail_bottom(140px) + thumb高さ(32vw) + 余白14px = calc(154px + 32vw) */
  .carousel__caption {
    top: auto;
    bottom: 9em;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0 20px;
  }
  .carousel__headline {
    font-size: clamp(30px, 12vw, 50px);
    line-height: 1.25;
  }
  .carousel__headline--long {
    font-size: clamp(22px, 7.5vw, 34px);
    line-height: 1.3;
  }
  .carousel__headline--xlong {
    font-size: clamp(18px, 5.8vw, 26px);
    line-height: 1.35;
  }
  .carousel__lead {
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.75;
    max-width: none;
  }

  /* ---- CTA: サムネイル下・中央配置 ---- */
  .carousel__cta {
    display: block;
    right: auto;
    left: 0;
    right: 0;
    bottom: calc(48px + 12px); /* レール直上 */
    white-space: nowrap;
    width: 96%;
    margin: auto;
  }
  .carousel__cta .hero-cta {
    display: flex;
    border: 3px solid;
}

  /* ---- 青い三角: サムネイルの下・中央（上向き二等辺三角形） ---- */
  .carousel__cta-bg {
    display: block;
    right: 0;
    bottom: 48px;              /* レール直上 */
    width: 50vw;
    /* left:0 + right:0 でフル幅 */
    height: 31%;
     /* 上向き △ */
    z-index: 2;
  }
}

@media (max-width: 480px) {
  .news-item__category { min-width: 0; }
}

/* =========================================================
   Product detail page (下層 / 製品テンプレート)
   ========================================================= */

/* ----- Breadcrumb (horizontally scrollable) ----- */
.breadcrumb {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
}
.breadcrumb .container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 0;
  white-space: nowrap;
  line-height: 1.5;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 12px 0 10px;
  border-top: 1px solid var(--color-line-strong);
  border-right: 1px solid var(--color-line-strong);
  transform: rotate(45deg);
}
.breadcrumb__item a {
  color: var(--color-text);
}
.breadcrumb__item a:hover { color: var(--color-main); }
.breadcrumb__item[aria-current="page"] {
  color: var(--color-main);
  font-weight: 700;
}

/* ----- Product page grid ----- */
.product-page {
  padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 6vw, 80px);
  background: #fff;
}
.product-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* ----- Product head ----- */
.product-head {
  margin-bottom: clamp(20px, 3vw, 32px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}
.product-head__model {
  font-family: var(--font-sans-en);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-main);
  margin-bottom: 8px;
}
.product-head__title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.product-head__tagline {
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--color-text);
  line-height: 1.7;
}

/* ----- Gallery: main stage ----- */
.product-gallery {
  margin-bottom: clamp(32px, 4vw, 48px);
}
.product-gallery__stage {
  position: relative;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.product-gallery__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #0a1430;
}
.product-gallery__slide {
  position: absolute;
  inset: 0;
  padding: 0;
  background: #0a1430;
  border: 0;
  cursor: zoom-in;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.product-gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}
.product-gallery__slide[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
}
.product-gallery__slide img,
.product-gallery__slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a1430;
}
.product-gallery__slide[data-type="video"] { cursor: pointer; }
.product-gallery__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.product-gallery__slide.is-playing .product-gallery__play { display: none; }

.product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(7,45,153,0.75);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.product-gallery__nav:hover,
.product-gallery__nav:focus-visible { background: var(--color-main); }
.product-gallery__nav--prev { left: 8px; }
.product-gallery__nav--next { right: 8px; }

.product-gallery__hint {
  margin: 8px 0 16px;
  font-size: 12.5px;
  color: var(--color-muted);
  text-align: right;
}

.product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.product-gallery__thumb {
  position: relative;
  padding: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-soft);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out);
}
.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s var(--ease-out);
}
.product-gallery__thumb:hover img { opacity: 0.85; }
.product-gallery__thumb.is-active {
  border-color: var(--color-main);
}
.product-gallery__thumb.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7,45,153,0.05);
  pointer-events: none;
}
.product-gallery__thumb-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  background: rgba(7,45,153,0.9);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  pointer-events: none;
}
.product-gallery__thumb-badge svg { display: block; }

/* ----- Product body (content) ----- */
.product-body {
  margin-top: clamp(28px, 4vw, 40px);
}
.product-section {
  padding-bottom: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--color-line);
}
.product-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.product-section__title {
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  padding-left: 14px;
  position: relative;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.product-section__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--color-main);
}
.product-subsection__title {
  font-weight: 700;
  color: var(--color-ink);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-line);
}
.product-section p {
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 1em;
}
.product-section p:last-child { margin-bottom: 0; }

/* feature card */
.product-feature {
  padding: 18px 22px;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-main);
  margin-bottom: 12px;
}
.product-feature__title {
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.product-feature__title::before {
  content: "■ ";
  color: var(--color-main);
  margin-right: 2px;
}
.product-feature p {
  line-height: 1.85;
  margin: 0;
}

/* list templates */
.product-list {
  line-height: 1.9;
  color: var(--color-text);
  padding-left: 1.4em;
  list-style: disc;
}
.product-list--ordered { list-style: decimal; }
.product-list li { margin-bottom: 4px; }
.product-list li::marker { color: var(--color-main); }

/* table */
.product-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line);
  margin-bottom: 8px;
}
.product-table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.65;
  background: #fff;
  /* セル境界線をはっきり (結合セルも見やすく) */
  border: 1px solid var(--color-line);
}
.product-table th,
.product-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;          /* 上下中央揃え (管理画面ビルダーと一致) */
  /* td にも左右・下に境界線を入れて、結合セルなどがひと目で分かるように */
  border: 1px solid var(--color-line);
}
/* 仕様ビルダーで指定した横揃え (.ta-left/center/right) */
.product-table .ta-left   { text-align: left; }
.product-table .ta-center { text-align: center; }
.product-table .ta-right  { text-align: right; }

/* ============================================================
   製品仕様 専用テーブルビルダー (ビジュアル編集モードのモーダル内で使用)
   ※ 管理画面 (inc/meta-boxes.php 内のインライン CSS) と同じ内容。
   ============================================================ */
.kaneko-specs-builder { margin-top: 8px; }
.kaneko-specs-builder__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 10px;
  background: #f6f8fb;
  border: 1px solid #d8dde6;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}
.kaneko-specs-builder__group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 10px;
  border-right: 1px solid #d8dde6;
}
.kaneko-specs-builder__group:last-child { border-right: 0; padding-right: 0; }
.kaneko-specs-builder__group-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #5c6779;
  letter-spacing: 0.04em;
  margin-right: 3px;
}
.kaneko-specs-builder__btn {
  background: #fff;
  border: 1px solid #c0c6d2;
  color: #2a2f3a;
  padding: 3px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  min-height: 0;
  height: auto;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.kaneko-specs-builder__btn:hover { background: #eef1f6; border-color: #8a93a4; }
.kaneko-specs-builder__btn:active { background: #dee3eb; }
.kaneko-specs-builder__btn code {
  background: rgba(0,0,0,.06);
  padding: 0 3px;
  border-radius: 2px;
  font-size: 10.5px;
}
/* アイコンのみのボタン (揃え用 SVG など) */
.kaneko-specs-builder__btn--icon {
  padding: 4px 6px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2a2f3a;
}
.kaneko-specs-builder__btn--icon svg { display: block; }
.kaneko-specs-builder__btn--icon:hover { color: #135e96; }
.kaneko-specs-builder__hint {
  font-size: 12px;
  color: #5c6779;
  background: #fff8e1;
  border: 1px solid #f0d75c;
  border-radius: 4px;
  padding: 8px 12px;
  margin: 8px 0 0;
}
.kaneko-specs-builder__handle-demo {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  background: #e0e3ea;
  color: #6a7184;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.kaneko-specs-builder__table-wrap {
  border: 1px solid #d8dde6;
  border-top: 0;
  background: #fff;
  overflow-x: auto;
  padding: 12px;
  border-radius: 0 0 6px 6px;
}
.kaneko-specs-builder__table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.kaneko-specs-builder__table th,
.kaneko-specs-builder__table td {
  border: 1px solid #c9cfd9;
  padding: 8px 10px;
  vertical-align: middle;
  background: #fff;
  min-width: 90px;
  position: relative;
}
.kaneko-specs-builder__table .kaneko-specs-builder__corner {
  background: #e0e3ea;
  border-color: #c3c8d3;
  min-width: initial;
  width: 26px;
  padding: 2px;
  cursor: default;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle,
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle {
  background: #eef0f4;
  color: #8a91a0;
  font-size: 10.5px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  border-color: #c3c8d3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  min-width: initial;
  vertical-align: middle;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle {
  width: 26px;
  padding: 2px 4px;
}
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle {
  padding: 2px 6px;
  height: 22px;
  line-height: 1.2;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle:hover,
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle:hover {
  background: #d8dde6;
  color: #4a5060;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle.is-selected,
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle.is-selected {
  background: #c9ced8;
  color: #2a2f3a;
}
.kaneko-specs-builder__table .kaneko-specs-builder__cell.ta-left   { text-align: left; }
.kaneko-specs-builder__table .kaneko-specs-builder__cell.ta-center { text-align: center; }
.kaneko-specs-builder__table .kaneko-specs-builder__cell.ta-right  { text-align: right; }
.kaneko-specs-builder__cell--th {
  background: #f1f6ff;
  color: #0a2960;
  font-weight: 700;
}
.kaneko-specs-builder__cell--td { background: #fff; }
.kaneko-specs-builder__cell { min-height: 28px; outline: none; }
.kaneko-specs-builder__cell:focus { box-shadow: inset 0 0 0 2px #80a8ff; }
.kaneko-specs-builder__cell.is-selected {
  box-shadow: inset 0 0 0 2px #f7b500;
  background: #fff8e1 !important;
}
.kaneko-specs-builder__cell--th.is-selected { background: #ffe9a0 !important; }
.kaneko-specs-builder__cell.is-range {
  background: rgba(247, 181, 0, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(247, 181, 0, 0.6);
}
.kaneko-specs-builder__cell--th.is-range { background: rgba(247, 181, 0, 0.22) !important; }
.kaneko-specs-builder__legend {
  display: flex;
  gap: 18px;
  margin: 10px 0 0;
  font-size: 12px;
  color: #5c6779;
}
.kaneko-specs-builder__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.kaneko-specs-builder__legend-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid #c9cfd9;
  border-radius: 2px;
}
.kaneko-specs-builder__legend-swatch--th { background: #f1f6ff; }
.kaneko-specs-builder__legend-swatch--td { background: #fff; }
/* th セルの装飾 (背景・文字色・太字)。幅と nowrap は外して
   結合セル・複数列レイアウト等にも対応できるようにする。 */
.product-table th {
  background: var(--color-bg-soft);
  color: var(--color-ink);
  font-weight: 700;
}
.product-table td { color: var(--color-text); }
.product-note {
  font-size: 12.5px;
  color: var(--color-muted);
  margin-top: 6px !important;
}

/* embed (YouTube etc.) */
.product-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a1430;
  overflow: hidden;
  border: 1px solid var(--color-line);
}
.product-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* document/PDF download list */
.doc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
}
.doc-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.doc-link:hover,
.doc-link:focus-visible {
  border-color: var(--color-main);
  color: var(--color-main);
}
.doc-link__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-main-soft);
  color: var(--color-main);
}
.doc-link__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.doc-link__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.4;
}
.doc-link:hover .doc-link__title { color: var(--color-main); }
.doc-link__meta {
  font-size: 12px;
  color: var(--color-muted);
  font-family: var(--font-sans-en);
  letter-spacing: 0.04em;
}

.ext-icon {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-sans-en);
  color: var(--color-muted);
}

/* ----- Sidebar: local nav (accordion) ----- */
.product-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}
.product-sidebar__head {
  font-weight: 700;
  color: var(--color-ink);
  padding: 14px 16px;
  background: var(--color-main);
  color: #fff;
  letter-spacing: 0.06em;
}

.local-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-line);
  border-top: 0;
  background: #fff;
}
.local-nav__group + .local-nav__group {
  border-top: 1px solid var(--color-line);
}
.local-nav__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  color: var(--color-ink);
  font-weight: 700;
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  transition: background-color 0.2s var(--ease-out);
}
.local-nav__toggle:hover {
  background: var(--color-bg-soft);
  color: var(--color-main);
}
.local-nav__toggle:focus-visible {
  outline-offset: -2px;
}
.local-nav__caret {
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-muted);
  border-right: 2px solid var(--color-muted);
  transform: rotate(135deg);
  margin-top: -3px;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.local-nav__toggle.is-open .local-nav__caret {
  transform: rotate(-45deg);
  margin-top: 4px;
  border-color: var(--color-main);
}

.local-nav__sub {
  list-style: none;
  margin: 0;
  padding: 4px 0 12px;
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-line);
}
.local-nav__sub[hidden] { display: none; }
.local-nav__sub li {
  margin: 0;
}
.local-nav__sub a {
  display: block;
  padding: 8px 22px 8px 30px;
  line-height: 1.55;
  color: var(--color-text);
  position: relative;
}
.local-nav__sub a::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--color-line-strong);
}
.local-nav__sub a:hover {
  background: #fff;
  color: var(--color-main);
}
.local-nav__sub a[aria-current="page"] {
  color: var(--color-main);
  font-weight: 700;
  background: #fff;
}
.local-nav__sub a[aria-current="page"]::before {
  background: var(--color-main);
  width: 10px;
  height: 2px;
}

.product-sidebar__notice {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  line-height: 1.7;
  color: var(--color-muted);
}
.product-sidebar__notice a { font-weight: 700; }

/* ----- CTA banner ----- */
.product-cta {
  background: var(--color-main);
  color: #fff;
  padding: clamp(40px, 6vw, 64px) 0;
}
.product-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
}
.product-cta__eyebrow {
  font-family: var(--font-sans-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.85;
  margin-bottom: 8px;
}
.product-cta__title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin-bottom: 8px;
}
.product-cta__lead {
  line-height: 1.85;
  opacity: 0.92;
  max-width: 640px;
}

/* ----- Share buttons ----- */
.product-share {
  padding: clamp(32px, 4vw, 56px) 0;
  background: var(--color-bg-soft);
}
.product-share__title {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  text-align: center;
  margin-bottom: 18px;
}
.product-share__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.product-share__btn:hover,
.product-share__btn:focus-visible {
  border-color: var(--color-main);
  color: var(--color-main);
}
.product-share__btn svg { display: block; flex-shrink: 0; }
.product-share__btn .product-share__icon {
  display: block; flex-shrink: 0;
  width: 20px; height: 20px;
  object-fit: contain;
}
/* ===== ビジュアル編集モード: 画面上の編集スポット ===== */
.kaneko-editable-spot {
  position: relative;
  cursor: pointer;
  transition: outline-color 0.18s, background 0.18s;
  outline: 2px dashed transparent;
  outline-offset: 4px;
}
.kaneko-editable-spot:hover {
  outline-color: rgba(7, 45, 153, 0.5);
  background: rgba(7, 45, 153, 0.03);
}
.kaneko-editable-spot__hint {
  position: absolute;
  top: -10px; right: -2px;
  background: var(--color-main);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1;
  display: none;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 99996;
  white-space: nowrap;
}
.kaneko-editable-spot:hover > .kaneko-editable-spot__hint { display: inline-flex; }

/* 編集スポットが section の場合: バッジを少し位置調整 */
section.kaneko-editable-spot > .kaneko-editable-spot__hint {
  top: -10px; right: 12px;
}

/* プレースホルダー (まだ未入力) */
.kaneko-edit-placeholder {
  color: #8c8f94;
  font-style: italic;
  padding: 14px 18px;
  background: #f6f7fb;
  border: 1px dashed #c3c4c7;
  border-radius: 4px;
  margin: 0;
}

/* ====== 未入力欄 (ビジュアル編集モード時) ======
   それぞれの項目を「未入力ですよ」と分かる薄い枠で表示し、
   その場でクリックして編集パネルを開けるようにする。
   (フロントエンドの通常表示では .is-empty-editable は付かないので
    一般訪問者には影響しない) */
.is-empty-editable {
  outline: 2px dashed rgba(7, 45, 153, 0.45);
  outline-offset: 4px;
  background: rgba(7, 45, 153, 0.025);
  position: relative;
  min-height: 36px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s, outline-color 0.15s;
}
.is-empty-editable:hover {
  outline-color: var(--color-main);
  background: rgba(7, 45, 153, 0.06);
}
.is-empty-editable::before {
  content: "未入力 — クリックで編集";
  position: absolute;
  top: -10px; left: 12px;
  background: var(--color-main);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
  pointer-events: none;
  white-space: nowrap;
}
.is-empty-editable.is-revealed {
  animation: kaneko-empty-reveal 0.4s ease;
}
/* タイトル H1 の未入力プレースホルダ */
h1.product-head__title.is-empty-editable {
  color: rgba(7, 45, 153, 0.55);
  font-style: italic;
}
/* ショートコード (ギャラリー等) のプレースホルダ表示 */
.kaneko-content-shortcode-placeholder {
  display: block;
  background: #fff8e1;
  border: 1px dashed #d4a942;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 14px 0;
  text-align: center;
  color: #6f5414;
  font-size: 14px;
  line-height: 1.55;
}
.kaneko-content-shortcode-placeholder small {
  display: inline-block; margin-top: 4px;
  font-size: 12px; opacity: 0.75;
}
@keyframes kaneko-empty-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== 未入力項目を追加 パネル ====== */
.kaneko-add-panel {
  margin: 36px 0 12px;
  padding: 20px 22px;
  border: 2px dashed var(--color-main);
  background: #f6f8ff;
  border-radius: 8px;
}
.kaneko-add-panel__head { margin-bottom: 14px; }
.kaneko-add-panel__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-main);
}
.kaneko-add-panel__lead {
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
}
.kaneko-add-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kaneko-add-field-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid var(--color-main);
  color: var(--color-main);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.kaneko-add-field-btn:hover {
  background: var(--color-main);
  color: #fff;
}
.kaneko-add-field-btn__plus { font-size: 16px; font-weight: 700; line-height: 1; }
.kaneko-add-field-btn.is-done {
  opacity: 0.4;
  pointer-events: none;
  text-decoration: line-through;
}

/* スポットポップアップ (画面上の絶対配置・<body> 直下に挿入される) */
.kaneko-spot-popup {
  position: absolute;
  z-index: 99997;
  background: #fff;
  border: 2px solid var(--color-main);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(7,45,153,0.25);
  text-align: left;
  cursor: auto;
  font-family: var(--font-sans-ja);
  font-style: normal;
  color: var(--color-text);
  width: 460px;
  max-width: calc(100vw - 40px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.kaneko-spot-popup__header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-main);
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px 4px 0 0;
}
.kaneko-spot-popup__title {
  font-size: 13px; font-weight: 700; color: #fff;
}
.kaneko-spot-popup__close {
  background: transparent; color: #fff;
  border: 0; cursor: pointer;
  width: 28px; height: 28px;
  font-size: 20px; line-height: 1;
  border-radius: 50%;
  flex-shrink: 0;
}
.kaneko-spot-popup__close:hover { background: rgba(255,255,255,0.2); }
.kaneko-spot-popup__body {
  padding: 14px 16px 16px;
  overflow-y: auto;
  flex: 1;
}
.kaneko-spot-popup__label {
  display: block;
  font-size: 12px; font-weight: 700;
  color: #1d2327;
  margin: 0 0 6px;
}
.kaneko-spot-popup__input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #c3c4c7;
  border-radius: 3px;
  font-family: inherit;
  font-style: normal;
  color: var(--color-text);
  background: #fff;
}
.kaneko-spot-popup__input:focus { outline: 2px solid var(--color-main); outline-offset: 1px; }

/* ヒントテキスト (ツールバーの右側) */
.kaneko-edit-bar__hint {
  display: inline-flex; align-items: center;
  margin-left: 12px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.3;
}

/* ===== ビジュアル編集モード 上部ツールバー ===== */
body.kaneko-has-edit-bar { padding-top: 56px; }
body.kaneko-has-edit-bar.admin-bar { padding-top: 88px; } /* WP管理バー高さ補正 */
body.kaneko-has-edit-bar .site-header { top: 56px; }       /* 固定ヘッダがある場合の補正用 */

.kaneko-edit-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99998;
  background: #1d2327;
  color: #fff;
  font-family: var(--font-sans-ja);
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.admin-bar .kaneko-edit-bar { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .kaneko-edit-bar { top: 46px; }
}

.kaneko-edit-bar__inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  min-height: 56px;
  flex-wrap: wrap;
}
.kaneko-edit-bar__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: #fff;
  padding-right: 12px;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.kaneko-edit-bar__type {
  font-size: 11px; font-weight: 400;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px; border-radius: 2px;
}
.kaneko-edit-bar__actions {
  display: flex; gap: 4px; flex-wrap: wrap;
  flex: 1;
}
.kaneko-edit-bar__right {
  display: flex; align-items: center; gap: 8px;
}
.kaneko-edit-bar__status {
  background: rgba(255,255,255,0.12);
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
}
.kaneko-edit-bar__status[data-status="publish"] { background: #2e7d3a; }
.kaneko-edit-bar__status[data-status="draft"]   { background: #b8860b; }
.kaneko-edit-bar__status[data-status="future"]  { background: #2271b1; }

.kaneko-edit-bar__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.kaneko-edit-bar__btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }
.kaneko-edit-bar__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kaneko-edit-bar__btn--action.is-open {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
}
.kaneko-edit-bar__btn--primary {
  background: #2271b1; border-color: #2271b1;
}
.kaneko-edit-bar__btn--primary:hover { background: #135e96; border-color: #135e96; }
.kaneko-edit-bar__btn--ghost {
  background: transparent;
}
.kaneko-edit-bar__btn--exit {
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  width: 30px; height: 30px; padding: 0;
  font-size: 18px; line-height: 1;
  justify-content: center;
}
.kaneko-edit-bar__btn--exit:hover { background: rgba(255,0,0,0.4); border-color: rgba(255,0,0,0.6); }

/* パネル (タイトル / 日付 / カテゴリ / タグ) */
.kaneko-edit-bar__panels { position: relative; }
.kaneko-edit-popup {
  position: absolute;
  top: 0; left: 14px;
  margin-top: 0;
  background: #fff; color: #1d2327;
  padding: 16px 18px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  min-width: 320px;
  max-width: 460px;
  border: 1px solid #c3c4c7;
  border-top: 0;
}
.kaneko-edit-popup__label {
  display: block;
  font-size: 12px; font-weight: 700;
  margin: 0 0 6px; color: #50575e;
}
.kaneko-edit-popup__input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #c3c4c7;
  border-radius: 3px;
  font-family: inherit;
}
.kaneko-edit-popup__input:focus { outline: 2px solid #2271b1; outline-offset: 1px; }
.kaneko-edit-popup__hint {
  font-size: 11px; color: #646970;
  margin: 8px 0 0;
}
.kaneko-edit-popup__list {
  list-style: none;
  padding: 0; margin: 0;
  max-height: 280px; overflow-y: auto;
  border: 1px solid #e2e4e7;
  border-radius: 3px;
  background: #fafbfc;
}
.kaneko-edit-popup__list li {
  padding: 6px 12px;
  border-bottom: 1px solid #f0f2f4;
  font-size: 13px;
}
.kaneko-edit-popup__list li:last-child { border-bottom: 0; }
.kaneko-edit-popup__list li:hover { background: #fff; }
.kaneko-edit-popup__list label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}

/* リストパネル (スペック / 特長 / カタログ / 関連リンク) */
.kaneko-edit-popup--list { min-width: 420px; max-width: 540px; }
.kaneko-meta-list {
  list-style: none; padding: 0; margin: 8px 0 12px;
  max-height: 360px; overflow-y: auto;
}
.kaneko-meta-list li {
  background: #fafbfd;
  border: 1px solid #e2e4e7;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
}
.kaneko-meta-list__label {
  display: block;
  font-size: 11px; font-weight: 600; color: #50575e;
  margin: 6px 0 3px;
}
.kaneko-meta-list__label:first-child { margin-top: 0; }
.kaneko-meta-list li input[type="text"],
.kaneko-meta-list li textarea {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #c3c4c7;
  border-radius: 3px;
  font-family: inherit;
}
.kaneko-meta-list-remove {
  position: absolute;
  top: 6px; right: 6px;
  background: #fff; color: #d63638;
  border: 1px solid #d63638;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px; cursor: pointer;
}
.kaneko-meta-list-remove:hover { background: #d63638; color: #fff; }
.kaneko-meta-add-btn {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  background: #2271b1; color: #fff;
  border: 0; border-radius: 3px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.kaneko-meta-add-btn:hover { background: #135e96; }

/* ポップアップ内の注記 */
.kaneko-spot-popup__note {
  font-size: 11px;
  color: #646970;
  margin: 10px 0 0;
  padding: 8px 10px;
  background: #fafbfd;
  border-left: 3px solid #2271b1;
  border-radius: 0 3px 3px 0;
}

/* ギャラリー編集ポップアップ — サムネ一覧 */
.kaneko-spot-popup .kaneko-gallery-thumbs {
  list-style: none;
  padding: 0; margin: 8px 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.kaneko-gthumb {
  position: relative;
  cursor: grab;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f3f9;
  aspect-ratio: 4 / 3;
}
.kaneko-gthumb:hover { border-color: #2271b1; }
.kaneko-gthumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kaneko-gthumb-yt {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  background: rgba(255, 0, 0, 0.85);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  pointer-events: none;
}
.kaneko-gthumb-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 22px; height: 22px;
  background: rgba(214,54,56,0.95);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 14px; line-height: 18px;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.kaneko-gthumb-remove:hover { background: #d63638; }

/* 関連リンク 編集 (専用 UI) */
.kaneko-related-edit-list {
  list-style: none;
  padding: 0; margin: 8px 0 12px;
}
.kaneko-related-edit-item {
  background: #fafbfd;
  border: 1px solid #e2e4e7;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  position: relative;
}
.kaneko-related-edit-item select,
.kaneko-related-edit-item input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #c3c4c7;
  border-radius: 3px;
  font-family: inherit;
}
.kaneko-related-edit-item .kaneko-related-internal,
.kaneko-related-edit-item .kaneko-related-external {
  margin-top: 6px;
  padding: 8px;
  background: #fff;
  border-radius: 3px;
}
.kaneko-related-edit-item .kaneko-meta-list-remove {
  position: absolute;
  top: 6px; right: 6px;
}

/* メディアファイル選択 ボタン */
.kaneko-meta-mediapick .button {
  background: #2271b1 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 12px !important;
  cursor: pointer;
}
.kaneko-meta-mediapick .button:hover { background: #135e96 !important; }

/* ===== フロントエンド インライン編集 (ログイン中 + 編集権限ユーザーのみ表示) ===== */

/* 編集可能エリアにマウスを乗せた時のハイライト */
.kaneko-inline-editable {
  position: relative;
  outline: 1px dashed transparent;
  outline-offset: 6px;
  transition: outline-color 0.2s;
}
.kaneko-inline-editable:hover {
  outline-color: rgba(7, 45, 153, 0.4);
}

/* 「ここを編集」ボタン (本文の直前に表示) */
.kaneko-inline-edit-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin: 0 0 14px;
  background: var(--color-main);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-sans-ja);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.15s, transform 0.15s;
  line-height: 1;
}
.kaneko-inline-edit-trigger:hover,
.kaneko-inline-edit-trigger:focus {
  background: var(--color-main-dark);
  transform: translateY(-1px);
}
.kaneko-inline-edit-trigger__icon {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ====== 本文編集モーダル (Visual Edit Mode) ====== */
.kaneko-modal-editor {
  /*
   * 注意: TinyMCE は display:none で初期化すると iframe サイズが 0 になる。
   * 初期状態は visibility:hidden + opacity:0 + pointer-events:none で
   * 要素サイズを保ちつつ非表示にする。
   * JS が is-open クラスを付けたら可視化される。
   */
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.kaneko-modal-editor.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.kaneko-modal-editor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 40, 0.55);
  backdrop-filter: blur(2px);
}
.kaneko-modal-editor__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  width: min(1100px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kaneko-modal-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--color-main);
  color: #fff;
  flex: 0 0 auto;
}
.kaneko-modal-editor__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.kaneko-modal-editor__close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.kaneko-modal-editor__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 18px;
  background: #f6f7fb;
}
.kaneko-modal-editor__body .wp-editor-wrap { background: #fff; }
.kaneko-modal-editor__foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid var(--color-line);
  flex: 0 0 auto;
}
body.kaneko-modal-open { overflow: hidden; }

/* 仕様スペック表ビルダー用モーダル — 横にもう少し広く */
.kaneko-modal-editor--specs .kaneko-modal-editor__panel {
  width: min(1280px, 96vw);
}
.kaneko-modal-editor--specs .kaneko-modal-editor__body {
  padding: 16px 20px;
}

/* エディタ本体 */
.kaneko-inline-editor-box {
  margin: 0 0 18px;
  padding: 0;
  border: 2px solid var(--color-main);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(7, 45, 153, 0.12);
  overflow: hidden;
}
.kaneko-inline-editor-box__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--color-main);
  color: #fff;
  padding: 8px 14px;
  font-size: 13px;
}
.kaneko-inline-editor-box__title { font-weight: 700; }
.kaneko-inline-editor-box__status { font-size: 12px; opacity: 0.9; }
.kaneko-inline-editor-box .wp-editor-wrap { margin: 0; }
.kaneko-inline-editor-box .wp-editor-container { border-radius: 0; }
.kaneko-inline-editor-box .mce-toolbar-grp,
.kaneko-inline-editor-box .quicktags-toolbar { border-top: 0; }
.kaneko-inline-editor-box__actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 14px;
  background: #f6f7fb;
  border-top: 1px solid var(--color-line);
}
.kaneko-inline-editor-btn {
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans-ja);
  line-height: 1;
  border: 0;
}
.kaneko-inline-editor-btn--save {
  background: var(--color-main);
  color: #fff;
}
.kaneko-inline-editor-btn--save:hover { background: var(--color-main-dark); }
.kaneko-inline-editor-btn--save:disabled { opacity: 0.6; cursor: not-allowed; }
.kaneko-inline-editor-btn--cancel {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
}
.kaneko-inline-editor-btn--cancel:hover { background: #f0f3f9; }

/* 保存完了 / エラー トースト */
.kaneko-inline-edit-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 99999;
  padding: 12px 22px;
  background: var(--color-main);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  font-size: 14px;
  font-weight: 600;
  display: none;
  font-family: var(--font-sans-ja);
}
.kaneko-inline-edit-toast.is-error { background: #d63638; }

.product-share__btn--copy.is-copied {
  background: var(--color-main);
  color: #fff;
  border-color: var(--color-main);
}
.product-share__feedback {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-muted);
  margin-top: 12px;
  min-height: 1em;
}

/* ----- Lightbox modal ----- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7,11,30,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px clamp(48px, 8vw, 96px);
}
.lightbox[hidden] { display: none; }
.lightbox__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lightbox__media {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__media img,
.lightbox__media video {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  display: block;
  background: #0a1430;
}
.lightbox__youtube {
  width: min(1200px, 100%, calc((100vh - 140px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.lightbox__youtube iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.lightbox__caption {
  text-align: center;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  z-index: 2;
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

/* ----- Responsive overrides for product page ----- */
@media (max-width: 1024px) {
  .product-page__inner {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
  }
  /* (旧: .product-table th の幅指定はビルダー化により削除) */
}

@media (max-width: 768px) {
  .product-page__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-sidebar {
    position: static;
    order: 2;  /* sidebar moves below content */
  }
  .product-main { order: 1; }

  .product-gallery__viewport { aspect-ratio: 4 / 3; }
  .product-gallery__nav { width: 40px; height: 40px; }

  .product-cta__inner { flex-direction: column; align-items: flex-start; }

  .lightbox { padding: 16px; }
  .lightbox__close { top: 8px; right: 8px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
.carousel__slide { transition: opacity 0.2s linear; }
}

/* =========================================================
   製品仕様テーブル — 枠線幅バリエーション (フロントエンド表示)
   border-thick       : 太い枠線 (2px)
   border-extra-thick : 極太枠線 (4px)
   ※ デフォルト (クラスなし) は style.css の .product-table th/td で
      定義済み (1px solid var(--color-line))
   ========================================================= */
.product-table.border-thick,
.product-table.border-thick th,
.product-table.border-thick td {
  border-width: 2px;
}
.product-table.border-extra-thick,
.product-table.border-extra-thick th,
.product-table.border-extra-thick td {
  border-width: 4px;
}

/* =========================================================
   仕様ビルダー v2 — 追加 UI パーツ
   ========================================================= */

/* アクティブな枠線幅ボタン */
.kaneko-specs-builder__btn.is-active {
  background: #0073aa;
  border-color: #006291;
  color: #fff;
  font-weight: 700;
}
.kaneko-specs-builder__btn.is-active:hover {
  background: #005c8a;
}

/* カラーピッカー付きボタン (背景色)
   label 要素でネイティブ input[type="color"] をラップする形。
   input の inline スタイル (22×22px) をそのまま表示する。 */
.kaneko-specs-builder__btn--color {
  padding: 2px 4px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kaneko-specs-builder__btn--color input[type="color"] {
  display: block;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.18) !important;
  cursor: pointer;
  flex-shrink: 0;
}

/* 列ハンドルセルは resize ハンドルを収めるため relative 必須 */
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle {
  position: relative;
  overflow: visible;
}

/* 列幅リサイズハンドル */
.kaneko-specs-builder__col-resize {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kaneko-specs-builder__col-resize::after {
  content: '';
  display: block;
  width: 2px;
  height: 70%;
  background: #a0a8b8;
  border-radius: 1px;
  transition: background 0.15s;
}
.kaneko-specs-builder__col-resize:hover::after,
.kaneko-specs-builder__col-resize.is-dragging::after {
  background: #0073aa;
  height: 90%;
}

/* リサイズ中のカーソルをページ全体に適用 (テキスト選択も防止) */
body.kaneko-col-resizing,
body.kaneko-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ビルダー内テーブルの border-thick / border-extra-thick プレビュー */
.kaneko-specs-builder__table.border-thick th,
.kaneko-specs-builder__table.border-thick td {
  border-width: 2px;
}
.kaneko-specs-builder__table.border-extra-thick th,
.kaneko-specs-builder__table.border-extra-thick td {
  border-width: 4px;
}

/* =========================================================
   Print
   ========================================================= */
@media print {
.site-header, .page-top, .carousel__controls, .carousel__nav, .carousel__thumbs, .carousel__cta, .carousel__cta-bg, .carousel__indicators, .nav-toggle { display: none !important; }
.carousel__slide { position: relative; opacity: 1; visibility: visible; }
a { color: inherit; text-decoration: underline; }
}

/* =========================================================
   Contact (お問い合わせ / 送信完了)
   ========================================================= */
.contact-page {
  padding-top: 48px;
  padding-bottom: 80px;
}

/* ステップインジケーター (入力 / 確認 / 完了) */
.contact-steps {
  list-style: none;
  display: flex;
  gap: 3px; /* 項目間の白い境界線。矢印部分は次項目の切り欠きが追従する */
  padding: 0;
  margin: 0 0 36px;
}
.contact-steps__item {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  background: #e2e6ec;
  color: #5c6779;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}
/* 1・2番目の右端に三角 (進行方向を示す矢印)。
   三角は隣の項目の「切り欠き」内に収まり、周囲 3px が白い境界線になる */
.contact-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 14px;
  height: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 2;
  pointer-events: none;
}
.contact-steps__item.is-active {
  background: var(--color-main);
  color: #fff;
}
/* 2番目以降: 左辺を矢印形に切り欠く。
   前の項目の三角と平行な輪郭になり、上下端まで均一な白線が通る。
   右辺は +14px 拡張し、自身の ::after 三角がクリップされないようにする */
.contact-steps__item + .contact-steps__item {
  padding-left: 25px;
  clip-path: polygon(
    0 0,
    calc(100% + 14px) 0,
    calc(100% + 14px) 100%,
    0 100%,
    14px 50%
  );
}

/* 導入文 (ワイド配置のリード文) */
.contact-intro-lead {
  margin: 0 0 36px;
  line-height: 2;
}
.contact-intro-lead a { color: var(--color-main); text-decoration: underline; }

/* 電話・FAX 案内ボックス */
.contact-intro { margin-bottom: 44px; }

/* ===== フォーム本体 ===== */
.kcf-step-label {
  margin: 0 0 2px;
  color: var(--color-main);
  font-family: var(--font-sans-en);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
}
.kcf-step-title {
  margin: 0 0 28px;
  padding-bottom: 12px;
  font-size: 22px;
  border-bottom: 2px solid var(--color-main);
}
.kcf-field { margin-bottom: 28px; }
.kcf-label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}
.kcf-req {
  display: inline-block;
  background: #d63638;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 2px;
  margin-left: 10px;
  vertical-align: 2px;
}
.kcf .wpcf7-form-control-wrap { display: block; }
.kcf input[type="text"],
.kcf input[type="email"],
.kcf input[type="tel"],
.kcf select,
.kcf textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #c8cdd6;
  border-radius: 4px;
  background: #fff;
  color: var(--color-text);
}
.kcf select { cursor: pointer; }
.kcf input:focus,
.kcf select:focus,
.kcf textarea:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 2px rgba(7, 45, 153, 0.12);
}
/* お問い合わせ内容: JS で高さ自動調整するためリサイズハンドルは無効化 */
.kcf textarea {
  resize: none;
  overflow: hidden;
  min-height: 150px;
  line-height: 1.8;
}

/* ラジオボタン (ボックス選択式)
   SP: 2列×2行 / PC: 4つ横並び1列。選択中は青い枠でハイライト */
.kcf-radios .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.kcf-radios .wpcf7-list-item {
  display: block;
  margin: 0;
}
.kcf-radios .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 13px 12px;
  border: 1px solid #c8cdd6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.15s var(--ease-out),
              background-color 0.15s var(--ease-out),
              box-shadow 0.15s var(--ease-out);
}
.kcf-radios .wpcf7-list-item label:hover { border-color: var(--color-main); }
/* 選択中: 青背景 + 白文字で明示 */
.kcf-radios .wpcf7-list-item.is-selected label {
  border-color: var(--color-main);
  background: var(--color-main);
  color: #fff;
}
.kcf-radios input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-main);
}
.kcf-radios .wpcf7-list-item.is-selected input[type="radio"] {
  accent-color: #fff;
}
@media (min-width: 768px) {
  .kcf-radios .wpcf7-radio { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kcf-help {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* 住所 */
.kcf-address {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 20px 22px 10px;
  margin: 0 0 28px;
}
.kcf-address legend {
  padding: 0 8px;
  margin-left: -8px;
}
.kcf-subfield { margin-bottom: 16px; }
.kcf-subfield--zip input { max-width: 220px; }
.kcf-sublabel {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
/* 郵便番号: 入力欄の左に〒マーク */
.kcf-subfield--zip .wpcf7-form-control-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kcf-subfield--zip .wpcf7-form-control-wrap::before {
  content: "〒";
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
/* width:100% のままだと〒の隣に収まらず折り返すため、flex で残り幅に収める */
.kcf-subfield--zip .wpcf7-form-control-wrap input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.kcf-subfield--zip .wpcf7-not-valid-tip { flex-basis: 100%; }

/* 郵便番号 + 都道府県は SP でも横並びを維持 */
.kcf-address-row {
  display: flex;
  gap: 0 14px;
  flex-wrap: wrap;
}
.kcf-address-row .kcf-subfield--zip  { flex: 0 0 128px; }
.kcf-address-row .kcf-subfield--pref { flex: 1 1 0; min-width: 0; }

/* ===== PC (768px〜): 項目名と入力欄を横並びに ===== */
@media (min-width: 768px) {
  /* 通常フィールド (お問い合わせ内容・種別・住所ブロックを除く — JS が --inline を付与) */
  .kcf-field--inline {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 0 24px;
    align-items: center;
  }
  .kcf-field--inline > .kcf-label { margin-bottom: 0; }

  /* 住所ブロック:
     1行目 = 郵便番号 + 都道府県 (横並び)
     2行目 = 市区郡町村 + 番地以降 (横並び)
     いずれも項目名は各入力欄の上 */
  .kcf-address {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
  .kcf-address .kcf-address-row { grid-column: 1 / -1; }
  .kcf-address-row { gap: 0 18px; }
  /* 郵便番号は 7 桁が収まる程度の幅に抑える */
  .kcf-address-row .kcf-subfield--zip  { flex-basis: 150px; }
  .kcf-address-row .kcf-subfield--pref { flex: 0 0 280px; }
  .kcf-subfield--zip input { max-width: none; }
}

/* ナビボタン */
.kcf-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.kcf-btn {
  display: inline-block;
  padding: 15px 36px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.kcf-btn--primary {
  background: var(--color-main);
  color: #fff;
}
.kcf-btn--primary:hover:not(:disabled) { opacity: 0.85; }
.kcf-btn--primary:disabled {
  background: #aab1bd;
  cursor: not-allowed;
}
.kcf-btn--ghost {
  background: #fff;
  color: var(--color-text);
  border-color: #c8cdd6;
}
.kcf-btn--ghost:hover { background: #f2f4f8; }

/* メールアドレス予測変換 */
.kcf-email-wrap { position: relative; }
.kcf-email-suggest {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #c8cdd6;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  max-height: 240px;
  overflow-y: auto;
}
.kcf-email-suggest li {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 15px;
  border-bottom: 1px solid #f0f2f5;
}
.kcf-email-suggest li:last-child { border-bottom: 0; }
.kcf-email-suggest li:hover,
.kcf-email-suggest li.is-focus { background: #eef4fb; }

/* 確認画面 */
.kcf-confirm-lead { margin: 0 0 20px; }
.kcf-confirm {
  margin: 0 0 32px;
  border-top: 1px solid var(--color-line);
}
.kcf-confirm dt {
  padding: 16px 10px 4px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-muted);
}
.kcf-confirm dd {
  margin: 0;
  padding: 0 10px 16px;
  border-bottom: 1px solid var(--color-line);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 16px;
  line-height: 1.8;
}
.kcf-agree {
  background: var(--color-bg-soft);
  text-align: center;
  padding: 24px 20px;
  border-radius: 6px;
}
.kcf-agree p { margin: 0 0 10px; }
.kcf-agree p:last-child { margin: 0; }
.kcf-agree-link a {
  color: var(--color-main);
  text-decoration: underline;
  font-weight: 700;
}
.kcf-agree-note {
  font-size: 13px;
  color: var(--color-muted);
}

/* CF7 のレスポンス表示 */
.wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 12px 16px;
  border-radius: 4px;
}
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
}

/* CF7 未有効時の案内 */
.contact-form-missing {
  background: #fff8e5;
  border-left: 4px solid #f0b849;
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
}

/* 注意点 */
.contact-notes {
  margin-top: 56px;
  background: var(--color-bg-soft);
  padding: 24px 28px;
  border-radius: 6px;
  font-size: 14px;
}
.contact-notes__title { font-size: 15px; margin: 0 0 12px; }
.contact-notes__list {
  margin: 0;
  padding-left: 1.4em;
  line-height: 1.9;
}
.contact-notes__list ul {
  padding-left: 1.4em;
  margin: 4px 0;
  list-style: disc;
}

/* ===== サンクスページ ===== */
.thanks-title {
  font-size: 24px;
  margin: 0 0 20px;
}
.thanks-lead {
  line-height: 2;
  margin: 0 0 32px;
}
.thanks-check {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 22px 26px;
  margin-bottom: 24px;
}
.thanks-check__title { font-size: 16px; margin: 0 0 12px; }
.thanks-check__list {
  margin: 0;
  padding-left: 1.4em;
  line-height: 1.9;
}
.thanks-check__list li { margin-bottom: 10px; }
.thanks-domain { color: var(--color-main); }
.thanks-note {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.9;
  margin: 0 0 36px;
}
.thanks-back { text-align: center; }

/* レスポンシブ */
@media (max-width: 640px) {
  .contact-steps__item {
    /* テキスト量に応じて幅を配分 (均等にしない) —
       1番目「お問い合わせ内容入力」の折り返しを防ぐ */
    flex: 1 1 auto;
    font-size: 12px;
    padding: 10px 8px;
    white-space: nowrap;
  }
  .contact-steps { gap: 2px; }
  .contact-steps__item:not(:last-child)::after { width: 10px; }
  .contact-steps__item + .contact-steps__item {
    padding-left: 18px;
    clip-path: polygon(
      0 0,
      calc(100% + 10px) 0,
      calc(100% + 10px) 100%,
      0 100%,
      10px 50%
    );
  }
  .kcf-nav { flex-direction: column-reverse; }
  .kcf-nav .kcf-btn { width: 100%; text-align: center; }
  .kcf-address { padding: 16px 14px 6px; }
}

/* =========================================================
   Page hero band (下層ページの h1 帯)
   青 + わずかなグラデーション + 白の格子柄 / 文字は左揃え
   ========================================================= */
.page-hero-band {
  position: relative;
  background: linear-gradient(115deg, #0e3ba9 0%, var(--color-main) 60%, #062578 100%);
  color: #fff;
  overflow: hidden;
}
/* 薄い白の碁盤目 (格子柄) */
.page-hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.page-hero-band .container {
  position: relative;
  padding-top: 40px;
  padding-bottom: 38px;
  text-align: left;
}
.page-hero-band__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-sans-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.page-hero-band__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.page-hero-band__lead {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 640px) {
  .page-hero-band .container {
    padding-top: 28px;
    padding-bottom: 26px;
  }
}

/* =========================================================
   共通ユーティリティ / パンくず (インライン style の代替)
   ========================================================= */
/* 下層ページ本文コンテナの標準余白 */
.container.sub {
  padding-top: 48px;
  padding-bottom: 80px;
}

/* ニュース: カテゴリ切替ナビ / ページネーション (インライン style の代替) */
.news-cat-nav { margin-bottom: 40px; }
.news-pagination {
  margin-top: 48px;
  text-align: center;
}

/* パンくず (kaneko_breadcrumb) */
.breadcrumb-bar {
  background: var(--color-bg-soft);
  padding: 12px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--color-line);
}
.breadcrumb-bar .container { color: var(--color-muted); }
.breadcrumb-bar__sep { margin: 0 6px; }
.breadcrumb-bar__current { color: var(--color-text); }

/* =========================================================
   Contact: 電話・FAX 案内行 + 反転 CTA ボタン
   ========================================================= */
.contact-tel-row {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 20px;
}
.contact-tel-row__text {
  margin: 0;
  line-height: 2;
}
.contact-tel-row .hero-cta { width: 100%; }
/* hero-cta の反転版: 青背景 + 白文字/白矢印 → ホバーで白背景 + 青。下線なし */
.hero-cta--invert {
  background: var(--color-main);
  color: #fff;
  border: 1px solid var(--color-main);
  text-decoration: none;
}
.hero-cta--invert:hover,
.hero-cta--invert:focus-visible {
  background: #fff;
  color: var(--color-main);
  text-decoration: none;
}

/* PC (1200px〜): ステップ・リード文・注意点はワイド、
   電話案内 (320px) とフォームの 2 カラム構成 */
@media (min-width: 1200px) {
  .contact-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .contact-page .contact-steps { width: 100%; }
  .contact-page .contact-intro-lead { width: 100%; }
  .contact-page .contact-intro {
    width: 320px;
    margin-bottom: 0;
  }
  .contact-page .contact-form-area { width: calc(96% - 320px); }
  .contact-page .contact-notes { width: 100%; }
}

/* =========================================================
   News single (記事ページ 2カラム + サイドバー)
   ========================================================= */
.news-page {
  padding: 48px 0 80px;
  background: #fff;
}
.news-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* 記事ヘッダー */
.news-entry-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
}
.news-entry-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.news-entry-header__title {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}
.news-entry-thumb { margin: 0 0 32px; }
.news-entry-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* 本文カラム内の共有セクション */
.product-share--inpage {
  margin-top: 56px;
  padding: 32px 20px;
  border-radius: 6px;
}

/* 関連記事 */
.news-related { margin-top: 48px; }
.news-related__title {
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-size: 20px;
  border-bottom: 2px solid var(--color-main);
}
.news-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.news-related__item a {
  display: block;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s var(--ease-out);
}
.news-related__item a:hover { border-color: var(--color-main); }
.news-related__date {
  font-family: var(--font-sans-en);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-muted);
}
.news-related__name {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.news-related__item a:hover .news-related__name {
  color: var(--color-main);
  text-decoration: underline;
}

/* 前後記事ナビ (インライン style からクラス化) */
.post-navigation {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.post-navigation__next { text-align: right; }
.post-navigation a {
  display: block;
  text-decoration: none;
}
.post-navigation__label {
  font-size: 12px;
  color: var(--color-muted);
}
.post-navigation__title {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--color-main);
}
.news-back-link {
  margin-top: 48px;
  text-align: center;
}

/* ----- サイドバー ----- */
.news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.news-widget__title {
  margin: 0 0 14px;
  padding-bottom: 8px;
  font-size: 16px;
  border-bottom: 2px solid var(--color-main);
}
.news-widget__posts,
.news-widget__cats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-widget__posts li,
.news-widget__cats li {
  border-bottom: 1px solid var(--color-line);
}
.news-widget__posts a {
  display: block;
  padding: 10px 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  text-decoration: none;
}
.news-widget__date {
  display: block;
  font-family: var(--font-sans-en);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted);
}
.news-widget__posts a:hover .news-widget__post-title {
  color: var(--color-main);
  text-decoration: underline;
}
.news-widget__cats a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
}
.news-widget__cats a:hover { color: var(--color-main); }
.news-widget__count {
  font-size: 12px;
  color: var(--color-muted);
}
.news-widget__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.news-widget__tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--color-main);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.news-widget__tag:hover {
  border-color: var(--color-main);
  background: var(--color-main);
  color: #fff;
}
.news-widget__more {
  margin-top: 12px;
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-main);
  background: #fff;
  border: 1px solid var(--color-main);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.news-widget__more:hover {
  background: var(--color-main);
  color: #fff;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .news-page__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .news-related__list { grid-template-columns: 1fr; }
}

/* =========================================================
   Company page（会社情報: page-company.php）
   事業内容ページと同じ2カラム骨格。右の追従ナビは
   .business-localnav を流用（スタイル・JS 共通）
   ========================================================= */
.company-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  column-gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.company-page__main { grid-column: 1; min-width: 0; }
.company-page__aside {
  grid-column: 2;
  position: relative;
  z-index: 5;
  align-self: stretch;
}

/* セクション共通 */
.company-section {
  scroll-margin-top: calc(var(--header-h) + 24px);
  margin-bottom: clamp(56px, 7vw, 88px);
}
.company-section:last-child { margin-bottom: 0; }
.company-h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  padding-left: 16px;
  border-left: 4px solid var(--color-main);
  margin: 0 0 28px;
}
.company-text {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 1.6em;
}
.company-text:last-child { margin-bottom: 0; }

/* 1. ご挨拶 */
.company-greeting__body p {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 1.6em;
}
.company-greeting__body p:last-child { margin-bottom: 0; }
.company-greeting__body img { max-width: 100%; height: auto; }
/* 署名 (写真 + 役職 + 氏名): 本文の右上に配置し、テキストが回り込む */
.company-greeting::after { content: ""; display: block; clear: both; }
.company-greeting__sign {
  float: right;
  width: 180px;
  margin: 0 0 20px 28px;
  text-align: center;
}
.company-greeting__sign-photo { margin: 0 0 12px; }
.company-greeting__sign-photo img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}
.company-greeting__sign-role {
  font-size: 13px;
  color: var(--color-muted);
}
.company-greeting__sign-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
}

/* 2. 経営理念 */
.company-shaze {
  background: var(--color-main);
  color: #fff;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  margin: 0 0 32px;
}
.company-shaze__label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-block;
  padding-bottom: 6px;
  margin: 0 0 18px;
}
.company-shaze__list {
  display: grid;
  gap: 10px;
}
.company-shaze__list li {
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.company-philosophy__points {
  display: grid;
  gap: 10px;
  margin: 0 0 1.6em;
}
.company-philosophy__points li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}
.company-philosophy__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  background: var(--color-main);
}

/* 3. 会社概要 */
.company-profile {
  border-top: 1px solid var(--color-line);
}
.company-profile__row {
  display: grid;
  grid-template-columns: 127px minmax(0, 1fr);
  gap: 6px 28px;
  padding: 18px 6px;
  border-bottom: 1px solid var(--color-line);
}
.company-profile__label {
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.9;
}
.company-profile__value {
  line-height: 1.9;
  color: var(--color-text);
}

/* 4. 組織図 */
.company-org { margin: 0; }
.company-org img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}
.company-org-placeholder {
  border: 2px dashed var(--color-line-strong);
  background: var(--color-bg-soft);
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.8;
  padding: 32px 24px;
  text-align: center;
}

/* 5. 沿革（年ごとにグループ化した縦タイムライン） */
.company-history__group {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 36px);
}
.company-history__year {
  font-family: var(--font-sans-en);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-main);
  line-height: 1.4;
  padding: 14px 0;
}
.company-history__events {
  position: relative;
  border-left: 2px solid var(--color-main-soft);
  padding: 14px 0 14px clamp(18px, 2.5vw, 28px);
  display: grid;
  gap: 10px;
}
.company-history__group:last-child .company-history__events { padding-bottom: 24px; }
.company-history__event {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}
.company-history__event::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(18px, 2.5vw, 28px) - 5px);
  top: 0.7em;
  width: 8px;
  height: 8px;
  background: var(--color-main);
}
.company-history__month {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-muted);
  line-height: 2;
  white-space: nowrap;
}
.company-history__text {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
}
.company-history__photo { margin: 10px 0 6px; }
.company-history__photo img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}

/* 6. 支店・営業所一覧 */
/* 見出し直下の自由入力欄（管理画面エディタ: 写真・テキスト）。
   .wp-content を併用して画像配置 (alignleft 等) やギャラリーの見た目を共通化 */
.company-offices__intro {
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.company-offices__intro::after { content: ""; display: block; clear: both; }
.company-offices__intro p {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 1.6em;
}
.company-offices__intro p:last-child { margin-bottom: 0; }
.company-offices__intro img { max-width: 100%; height: auto; }
.company-offices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.company-office {
}
.company-office__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  padding-bottom: 12px;
  margin: 0 0 14px;
  border-bottom: 2px solid var(--color-main);
}
.company-office__dl { display: grid; gap: 8px; }
.company-office__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
}
.company-office__row dt {
  font-weight: 700;
  color: var(--color-main);
  line-height: 2;
}
.company-office__row dd {
  color: var(--color-text);
}
.company-office__zip { color: var(--color-muted); }
.company-office__gmap { margin: 16px 0 0; }
.company-office__gmap iframe {
  display: block;
  width: 100%;
  height: 200px;
  border: 1px solid var(--color-line);
}
.company-office__map { margin: 12px 0 0; }

/* 7. 出版紹介（3列） */
.company-pubs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.company-pub__title {
  position: relative;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-ink);
  padding: 0 0 10px 18px;
}
.company-pub__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--color-main);
}
.company-pub__media { margin: 0; background: var(--color-bg-soft); }
.company-pub__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}
.company-pub__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 14px 0 0;
}

/* 8. カネコのあゆみ（タイムライン） */
.company-ayumi {
  display: grid;
  counter-reset: none;
}
.company-ayumi__item {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 36px);
  padding-bottom: 34px;
}
.company-ayumi__item:last-child { padding-bottom: 0; }
/* 本文列の左に縦ライン + 角ドット */
.company-ayumi__body {
  position: relative;
  border-left: 2px solid var(--color-main-soft);
  padding-left: clamp(18px, 2.5vw, 28px);
}
.company-ayumi__item:last-child .company-ayumi__body { border-left-color: transparent; }
.company-ayumi__body::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0.35em;
  width: 10px;
  height: 10px;
  background: var(--color-main);
}
.company-ayumi__yearcol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0;
}
.company-ayumi__year {
  font-family: var(--font-sans-en);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-main);
}
.company-ayumi__era {
  font-size: 12px;
  color: var(--color-muted);
}
.company-ayumi__events {
  display: grid;
  gap: 6px;
  margin: 0 0 4px;
}
.company-ayumi__events li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
}
.company-ayumi__events li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  background: var(--color-line-strong);
}
.company-ayumi__products {
  background: var(--color-bg-soft);
  padding: 14px 16px;
  margin-top: 12px;
}
.company-ayumi__products-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-main);
  margin-bottom: 8px;
}
.company-ayumi__products ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.company-ayumi__product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--color-line);
  font-size: 13px;
  line-height: 1.6;
  padding: 4px 12px;
  color: var(--color-text);
}
/* 写真付き製品: クリックでポップアップ表示するボタン */
button.company-ayumi__product--photo {
  cursor: pointer;
  color: var(--color-main);
  border-color: var(--color-main);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
button.company-ayumi__product--photo:hover {
  background: var(--color-main);
  color: #fff;
}
.company-ayumi__product-icon { flex: 0 0 auto; }
.company-ayumi__photo { margin: 14px 0 0; }
.company-ayumi__photo img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}

/* レスポンシブ: 1カラム化＋ページ内リンクを本文上部の横並びバーに
   （.business-localnav の SP スタイルは既存定義を流用） */
@media (max-width: 768px) {
  .company-page__inner { grid-template-columns: minmax(0, 1fr); }
  .company-page__aside {
    grid-column: 1;
    grid-row: 1;
    align-self: auto;
    margin-bottom: 28px;
  }
  .company-page__main { grid-row: 2; }
  .company-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }

  .company-profile__row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 14px 4px;
  }
  .company-offices { grid-template-columns: 1fr; }
  .company-pubs { grid-template-columns: 1fr; gap: 32px; }
  .company-history__group { grid-template-columns: 84px minmax(0, 1fr); }
  .company-history__year { font-size: 17px; }
  .company-history__event { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
  .company-ayumi__item {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .company-ayumi__yearcol {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }
  .company-ayumi__body { border-left-width: 0; padding-left: 0; }
  .company-ayumi__body::before { content: none; }
  .company-ayumi__item { border-bottom: 1px solid var(--color-line); padding-bottom: 24px; margin-bottom: 24px; }
  .company-ayumi__item:last-child { border-bottom: 0; margin-bottom: 0; }
  .company-greeting__sign { width: 128px; margin: 0 0 14px 16px; }
}

/* =========================================================
   画像ポップアップ (カネコのあゆみ 製品写真など)
   マークアップは assets/js/company.js が生成
   ========================================================= */
.kaneko-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 24, 31, 0.72);
}
.kaneko-popup[hidden] { display: none; }
.kaneko-popup__figure {
  margin: 0;
  max-width: min(880px, 100%);
  background: #fff;
  padding: 14px;
}
.kaneko-popup__figure img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  margin-inline: auto;
}
.kaneko-popup__caption {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  padding: 12px 8px 2px;
}
.kaneko-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--color-ink);
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kaneko-popup__close:hover { background: var(--color-main); color: #fff; }

/* =========================================================
   Recruit pages（採用情報配下: page-guide.php / page-faq.php / page-saiyou_contact.php）
   募集要項は会社情報と同じ2カラム骨格。右の追従ナビは .business-localnav を流用
   ========================================================= */
.recruit-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  column-gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.recruit-page__main { grid-column: 1; min-width: 0; }
.recruit-page__aside {
  grid-column: 2;
  position: relative;
  z-index: 5;
  align-self: stretch;
}
.recruit-section {
  scroll-margin-top: calc(var(--header-h) + 24px);
  margin-bottom: clamp(56px, 7vw, 88px);
}
.recruit-section:last-child { margin-bottom: 0; }
.recruit-h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  padding-left: 16px;
  border-left: 4px solid var(--color-main);
  margin: 0 0 28px;
}
.recruit-text {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 1.4em;
}
.recruit-text:last-child { margin-bottom: 0; }

/* 募集要項の項目リスト */
.recruit-dl {
  border-top: 1px solid var(--color-line);
  margin: 0 0 28px;
}
.recruit-dl__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 6px 28px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--color-line);
}
.recruit-dl__label {
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.9;
}
.recruit-dl__value {
  line-height: 1.9;
  color: var(--color-text);
}
.recruit-dl__value a { text-decoration: underline; }

/* ボタン行（.kcf-btn を流用） */
.recruit-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}
.recruit-cta .kcf-btn { text-align: center; }

/* よくあるご質問 */
.recruit-faq-page { max-width: 900px; }
.recruit-faq__intro { margin-bottom: 36px; }
.recruit-faq__list {
  display: grid;
  gap: 16px;
}
.recruit-faq__item {
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.recruit-faq__q,
.recruit-faq__a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
  padding: 18px 22px;
}
.recruit-faq__q {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-ink);
}
.recruit-faq__a p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
}
.recruit-faq__mark {
  font-family: var(--font-sans-en);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-main);
}
.recruit-faq__a .recruit-faq__mark { color: var(--color-muted); }
.recruit-faq__more {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  text-align: center;
}
.recruit-faq__more .recruit-cta { justify-content: center; }

/* ===== エントリーフォーム 追加パーツ（.kcf 共通スタイルの上に載せる） ===== */
/* 「任意」バッジ（必須バッジと対になるグレー） */
.kcf-opt {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: #8a94a6;
  border-radius: 2px;
  vertical-align: middle;
}
/* 生年月日: 年・月・日を1行に */
.kcf-birth-row {
  display: flex;
  align-items: flex-start;
  gap: 10px 14px;
  flex-wrap: wrap;
}
.kcf-birth-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kcf-birth-unit .wpcf7-form-control-wrap { display: inline-block; }
.kcf .kcf-birth-unit input[type="text"] {
  width: 4.5em;
  text-align: center;
}
.kcf .kcf-birth-unit--year input[type="text"] { width: 6em; }
.kcf-unit { font-size: 15px; color: var(--color-text); }
/* 学校情報ブロック（住所ブロックと同じ見た目） */
.kcf-school {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 20px 22px 6px;
  margin: 0 0 28px;
  min-width: 0;
}
.kcf-school legend {
  padding: 0 8px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .kcf-school {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
  .kcf-school legend { grid-column: 1 / -1; }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .recruit-page__inner { grid-template-columns: minmax(0, 1fr); }
  .recruit-page__aside {
    grid-column: 1;
    grid-row: 1;
    align-self: auto;
    margin-bottom: 28px;
  }
  .recruit-page__main { grid-row: 2; }
  .recruit-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }
  .recruit-dl__row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 14px 4px;
  }
  .recruit-faq__q,
  .recruit-faq__a {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 10px;
    padding: 14px 16px;
  }
  .recruit-faq__mark { font-size: 18px; }
  .recruit-cta .kcf-btn { flex: 1 1 100%; }
}

/* =========================================================
   採用コンテンツ（本文内レイアウト）
   座談会の吹き出し / 社員紹介の Q&A / 追加の画像レイアウト
   挿入ボタン: inc/recruit-editor.php   エディタ側の見た目: editor-style.css
   ========================================================= */

/* --- 吹き出し（話者の写真・名前 + 発言） --- */
.wp-content .kaneko-talk {
  --talk-bg: #eaf0fb;
  --talk-line: #b9c9ec;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 1.6em 0;
}
.wp-content .kaneko-talk--right { flex-direction: row-reverse; }
.wp-content .kaneko-talk__who {
  flex: 0 0 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.wp-content .kaneko-talk__photo {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  margin: 0;
}
.wp-content .kaneko-talk__name {
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}
.wp-content .kaneko-talk__name img {border-radius:999px;margin: 0 0 .4em;}
.wp-content .kaneko-talk__bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--talk-bg);
  border: 1px solid var(--talk-line);
  border-radius: 8px;
  padding: 14px 18px;
}
/* しっぽ: 角を 45° 回した正方形の 2 辺だけ線を出す */
.wp-content .kaneko-talk__bubble::before {
  content: "";
  position: absolute;
  top: 26px;
  left: -8px;
  width: 14px;
  height: 14px;
  background: var(--talk-bg);
  border-left: 1px solid var(--talk-line);
  border-bottom: 1px solid var(--talk-line);
  transform: rotate(45deg);
}
.wp-content .kaneko-talk--right .kaneko-talk__bubble::before {
  left: auto;
  right: -8px;
  border-left: 0;
  border-bottom: 0;
  border-right: 1px solid var(--talk-line);
  border-top: 1px solid var(--talk-line);
}
.wp-content .kaneko-talk__bubble > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}
.wp-content .kaneko-talk__bubble > p + p { margin-top: 0.8em; }
/* 色バリエーション（c0 = 司会・進行用グレー） */
.wp-content .kaneko-talk--c1 { --talk-bg: #eaf0fb; --talk-line: #b9c9ec; }
.wp-content .kaneko-talk--c2 { --talk-bg: #e6f4fa; --talk-line: #a9d6e8; }
.wp-content .kaneko-talk--c3 { --talk-bg: #e9f5ec; --talk-line: #b3d9bd; }
.wp-content .kaneko-talk--c4 { --talk-bg: #fdf1e4; --talk-line: #f0cda6; }
.wp-content .kaneko-talk--c5 { --talk-bg: #fbeaf0; --talk-line: #ecb6c8; }
.wp-content .kaneko-talk--c0 { --talk-bg: #f1f3f6; --talk-line: #cfd5de; }
.wp-content .kaneko-talk--c0 .kaneko-talk__name { color: var(--color-muted); }
/* 右側（司会・進行役）の吹き出しは白塗り（枠線は色バリエーションのまま） */
.wp-content .kaneko-talk--right { --talk-bg: #fff; }

/* 座談会: 参加者行 */
.wp-content .kaneko-symposium-members {
  background: var(--color-bg-soft);
  padding: 10px 16px;
}

/* --- Q&A（社員紹介インタビュー） --- */
.wp-content .kaneko-qa {
  margin: 1.8em 0;
}
.wp-content .kaneko-qa__q,
.wp-content .kaneko-qa__a {
  position: relative;
  margin: 0;
  padding: 16px 20px 16px 58px;
  line-height: 1.9;
}
.wp-content .kaneko-qa__q {
  background: var(--color-bg-soft);
  font-weight: 700;
  color: var(--color-ink);
}
.wp-content .kaneko-qa__q::before,
.wp-content .kaneko-qa__a::before {
  position: absolute;
  left: 20px;
  top: 14px;
  font-family: var(--font-sans-en);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.wp-content .kaneko-qa__q::before { content: "Q."; color: var(--color-main); }
.wp-content .kaneko-qa__a::before { content: "A."; color: var(--color-muted); }

/* --- 画像レイアウトの追加バリエーション --- */
/* 画像右+テキスト左 */
.wp-content .kaneko-layout-imgtext--rev { grid-template-columns: 1fr minmax(0, 38%); }
.wp-content .kaneko-layout-imgtext--rev .kaneko-layout-imgtext__img { order: 2; }
/* 1:1 */
.wp-content .kaneko-layout-imgtext--half,
.wp-content .kaneko-layout-imgtext--half.kaneko-layout-imgtext--rev { grid-template-columns: 1fr 1fr; }
/* 画像のみ（全幅・キャプション付き） */
.wp-content .kaneko-figure { margin: 1.6em 0; }
.wp-content .kaneko-figure__img img {
  display: block;
  width: 100%;
  height: auto;
}
.wp-content .kaneko-figure__cap {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
}
/* 画像2枚横並び */
.wp-content .kaneko-layout-2img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 1.6em 0;
}
.wp-content .kaneko-layout-2img__item img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  .wp-content .kaneko-layout-imgtext--rev,
  .wp-content .kaneko-layout-imgtext--half { grid-template-columns: 1fr; }
  .wp-content .kaneko-layout-imgtext--rev .kaneko-layout-imgtext__img { order: 0; }
  .wp-content .kaneko-layout-2img { gap: 12px; }
  .wp-content .kaneko-talk { gap: 10px; }
  .wp-content .kaneko-talk__who { flex-basis: 56px; }
  .wp-content .kaneko-talk__photo { width: 56px; height: 56px; }
  .wp-content .kaneko-talk__bubble { padding: 12px 14px; }
  .wp-content .kaneko-talk__bubble > p { font-size: 14px; }
  .wp-content .kaneko-qa__q,
  .wp-content .kaneko-qa__a { padding: 14px 14px 14px 46px; }
  .wp-content .kaneko-qa__q::before,
  .wp-content .kaneko-qa__a::before { left: 14px; font-size: 17px; }
}

/* =========================================================
   新入社員座談会（page-symposium.php）
   ========================================================= */
.symposium-page { max-width: 900px; }

/* =========================================================
   社員紹介（archive-staff.php / single-staff.php）
   ========================================================= */
.staff-archive__intro { margin-bottom: 36px; }
.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.staff-card {
  display: flex;
  background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease-out);
}
.staff-card:hover { border-color: var(--color-main); }
.staff-card:hover .staff-card__title { color: var(--color-main); }
.staff-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--color-text);
}
.staff-card__media {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-band);
}
.staff-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.staff-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}
.staff-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
  transition: color 0.2s var(--ease-out);
}
.staff-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 13px;
  color: var(--color-muted);
}
.staff-card__name { font-weight: 700; color: var(--color-text); }
.staff-card .link-arrow { margin-top: auto; }

.staff-single__head {
  display: grid;
  grid-template-columns: minmax(0, 25%) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 56px);
  background: var(--color-bg-soft);
}
.staff-single__media { margin: 0; }
.staff-single__media img {
  display: block;
  width: 100%;
  height: auto;
}
.staff-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 14px;
  color: var(--color-muted);
  margin: 0 0 12px;
}
.staff-single__name { font-size: 16px; font-weight: 700; color: var(--color-text); }
.staff-single__title {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 16px;
}
.staff-single__copy {
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}
.staff-single__content { max-width: 900px; }
.staff-others { margin-top: clamp(56px, 7vw, 88px); }
.staff-others__cta { justify-content: center; margin-top: 32px; }

/* =========================================================
   採用の流れ（page-flow.php）
   ========================================================= */
.recruit-flow-page { max-width: 960px; }
.recruit-flow__intro { margin-bottom: 36px; }
.recruit-flow { display: grid; }
.recruit-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 36px);
  padding: 0 0 clamp(32px, 4vw, 48px);
}
.recruit-flow__step--has-image {
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 32%);
}
/* STEP をつなぐ縦線 */
.recruit-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 47px;
  top: 96px;
  bottom: 0;
  width: 2px;
  background: var(--color-main-soft);
}
.recruit-flow__num {
  width: 96px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  color: #fff;
  line-height: 1;
}
.recruit-flow__num-label {
  font-family: var(--font-sans-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.recruit-flow__num-value {
  font-family: var(--font-sans-en);
  font-size: 34px;
  font-weight: 700;
  margin-top: 4px;
}
.recruit-flow__body { padding-top: 6px; }
.recruit-flow__title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.recruit-flow__text {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
}
.recruit-flow__text a { text-decoration: underline; }
.recruit-flow__link { margin: 16px 0 0; }
.recruit-flow__media { margin: 0; align-self: start; }
.recruit-flow__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}

@media (max-width: 768px) {
  .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .staff-single__head { grid-template-columns: 1fr; gap: 20px; }
  .recruit-flow__step,
  .recruit-flow__step--has-image { grid-template-columns: 64px minmax(0, 1fr); row-gap: 14px; }
  .recruit-flow__media { grid-column: 2; }
  .recruit-flow__num { width: 64px; height: 64px; }
  .recruit-flow__num-label { font-size: 10px; }
  .recruit-flow__num-value { font-size: 24px; }
  .recruit-flow__step:not(:last-child)::before { left: 31px; top: 64px; }
}
@media (max-width: 480px) {
  .staff-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   採用情報トップ（page-recruit.php）
   下層ページとはテイストを変えたワイド／全画面構成。
   - 文字サイズは % 指定（本文 16px = 100% 基準）
   - 角丸・字間は付けない
   ========================================================= */
.recruit-top { font-size: 100%; }

/* --- 共通パーツ --- */
.rt-eyebrow {
  font-family: var(--font-sans-en);
  font-size: 81.25%;
  font-weight: 700;
  color: var(--color-main);
  margin: 0 0 14px;
}
.rt-eyebrow--white { color: #fff; opacity: 0.9; }
.rt-h2 {
  font-size: 250%;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0;
}
.rt-catch {
  font-size: 237.5%;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
  margin: 0 0 24px;
}
.rt-text {
  font-size: 106.25%;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 1.4em;
}
.rt-text:last-child { margin-bottom: 0; }
.rt-head { margin-bottom: clamp(32px, 4vw, 48px); }

/* ボタン（矢印は右端のシェブロン） */
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 240px;
  padding: 18px 24px;
  font-size: 106.25%;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.rt-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.rt-btn--white { background: #fff; color: var(--color-main); }
.rt-btn--white:hover,
.rt-btn--white:focus-visible { background: var(--color-main-dark); color: #fff; }
.rt-btn--strong { background: var(--color-ink); color: #fff; }
.rt-btn--strong:hover,
.rt-btn--strong:focus-visible { background: #fff; color: var(--color-main); }
.rt-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.rt-btn--outline:hover,
.rt-btn--outline:focus-visible { background: #fff; color: var(--color-main); border-color: #fff; }

/* --- 1. FV --- */
.rt-fv {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h));
  background: var(--color-main);
  color: #fff;
  overflow: hidden;
}
.rt-fv__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.rt-fv__en {
  font-family: var(--font-sans-en);
  font-size: 800%;
  font-weight: 700;
  line-height: 0.95;
  margin: 0 0 0 -0.04em;
  color: #ebb933;
}
.rt-fv__ja {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 150%;
  font-weight: 700;
  line-height: 1.3;
  margin: 20px 0 0;
}
.rt-fv__ja::before {
  content: "";
  width: 40px;
  height: 2px;
  background: #fff;
}
.rt-fv__jobs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  margin-top: clamp(40px, 6vh, 72px);
  padding: 10px 10px 10px 20px;
  background: #1d3fa0;
  max-width: max-content;
}
.rt-fv__jobs-label {
  font-size: 100%;
  font-weight: 700;
}
.rt-fv__jobs-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* 業務写真の無限スライド（CSS のみ・同一セットを2周並べて -50% 流す） */
.rt-marquee {
  flex: 0 0 auto;
  height: clamp(180px, 34vh, 320px);
  overflow: hidden;
  background: var(--color-main-dark);
}
.rt-marquee__track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: rt-marquee 70s linear infinite;
}
.rt-marquee__group { display: flex; height: 100%; }
.rt-marquee__group img {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@keyframes rt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 2. About（テキスト + ベン図） --- */
.rt-about {
  padding: clamp(64px, 9vw, 120px) 0;
  background: #fff;
}
.rt-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.rt-venn {
  display: block;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
/* 管理画面でイラストを設定したときは円の図の代わりに表示 */
.rt-about__illust {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}
/* 円: 画面に入ったら (.is-inview) 線を描く → 中央を青で塗る */
.rt-venn__ring {
  fill: none;
  stroke: var(--color-main);
  stroke-width: 2;
  stroke-dasharray: 786; /* 2πr (r=125) */
  stroke-dashoffset: 786;
  transition: stroke-dashoffset 1.3s var(--ease-out);
}
.rt-venn__ring--2 { transition-delay: 0.25s; }
.rt-venn__ring--3 { transition-delay: 0.5s; }
.rt-venn__core {
  fill: var(--color-main);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out) 1.5s;
}
.rt-venn__label {
  font-family: var(--font-sans-ja);
  font-size: 137.5%;
  font-weight: 700;
  fill: var(--color-main);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.9s;
}
.rt-venn__label--2 { transition-delay: 1.15s; }
.rt-venn__label--3 { transition-delay: 1.4s; }
.rt-venn.is-inview .rt-venn__ring  { stroke-dashoffset: 0; }
.rt-venn.is-inview .rt-venn__core,
.rt-venn.is-inview .rt-venn__label { opacity: 1; }

/* --- 3. Values（求める働き方） --- */
.rt-values {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--color-bg-soft);
}
.rt-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.rt-values__item {
  
   /* 上はダイヤ数字がはみ出すぶん広め */
}
/* イラストの置き場（4:3・未設定は点線枠） */
.rt-values__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 0 22px;
  display: grid;
  place-items: center;
  background: var(--color-bg-soft);
  border: 1px dashed var(--color-line-strong);
}
.rt-values__visual--set { background: none; border: 0; }
.rt-values__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rt-values__visual-note { color: var(--color-muted); font-size: 81.25%; }
/* 数字: 紺のダイヤ（45° 回した正方形）の上に白抜き。画像の上端中央に重ねる */
.rt-values__num {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}
.rt-values__num::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-main);
  transform: rotate(45deg);
  border: 2px solid #FFF;
}
.rt-values__num > span {
  position: relative;
  font-family: var(--font-sans-en);
  font-size: 106.25%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.rt-values__text {
  font-size: 130%;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--color-ink);
  margin: 0 auto;
  max-width: 270px;
  word-break: auto-phrase;
  font-feature-settings: "palt";
}

/* --- 4. Message（採用メッセージ） ---
   写真・氏名は置かず、キャッチコピーを画面幅いっぱいの大きさで見せる。
   - 画面の左端にぴったり付けた大きな英文 (Don't be afraid / of failure) を背景として置き、
     要素ごと 90° 時計回りに回した縦 2 行で表示（writing-mode: vertical-rl =
     段落を右に倒した並びなので 1 行目が右、2 行目がその左）。キャッチコピーの背面に重なる
   - 画面に入る (.reveal-js.is-inview: main.js initReveal) と
     キャッチが下から競り上がり、本文の段落が順に浮き上がる */
.rt-message {
  --rt-msg-pad: clamp(80px, 11vw, 160px);
  position: relative;
  padding: var(--rt-msg-pad) 0;
  background: #fff;
  overflow: hidden;
}
/* 背景: 画面左端に密着し、内容と同じ高さから始める。文字は薄い紺なので上に重なる本文は読める */
.rt-message__side {
  position: absolute;
  left: 0;
  top: var(--rt-msg-pad);
  z-index: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin: -0.06em 0 0;
  font-family: var(--font-sans-en);
  font-size: clamp(72px, 9vw, 135px);
  font-weight: 700;
  line-height: 0.92;
  color: var(--color-main-soft);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.rt-message__inner { position: relative; z-index: 1; }
.rt-message__main { min-width: 0; }
.rt-message__catch {
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  font-size: 148.75%; /* 本文 (.rt-text 106.25%) の 140% */
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
  font-feature-settings: "palt";
  word-break: auto-phrase;
  /* 競り上がりのマスク（上下は文字のはみ出しぶん余裕をもたせる） */
  clip-path: inset(-0.15em 0 -0.12em 0);
}
.rt-message__catch-text { display: inline-block; }
/* 本文の行: 本文は右寄せ (左は背景の縦文字のための空き)。イラストを設定したときだけ左の空きにイラストを置く */
.rt-message__body {
  max-width: 760px;
  margin-left: auto;
}
.rt-message__row--illust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 760px);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.rt-message__row--illust .rt-message__body { max-width: none; margin-left: 0; }
.rt-message__visual img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
}

/* 登場アニメーション（JS が動く環境のみ初期状態で隠す） */
.rt-message.reveal-js .rt-message__side {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.8s var(--ease-out) 0.1s, transform 0.8s var(--ease-out) 0.1s;
}
.rt-message.reveal-js .rt-eyebrow {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.rt-message.reveal-js .rt-message__catch-text {
  opacity: 0;
  transform: translateY(105%);
  transition: opacity 0.5s var(--ease-out) 0.15s, transform 1.1s var(--ease-out) 0.15s;
}
.rt-message.reveal-js .rt-message__body .rt-text,
.rt-message.reveal-js .rt-message__visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.rt-message.reveal-js .rt-message__visual { transition-delay: 0.7s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(1) { transition-delay: 0.85s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(2) { transition-delay: 1.0s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(3) { transition-delay: 1.15s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(n+4) { transition-delay: 1.3s; }
.rt-message.reveal-js.is-inview .rt-message__side,
.rt-message.reveal-js.is-inview .rt-eyebrow,
.rt-message.reveal-js.is-inview .rt-message__catch-text,
.rt-message.reveal-js.is-inview .rt-message__visual,
.rt-message.reveal-js.is-inview .rt-message__body .rt-text { opacity: 1; transform: none; }

/* --- 5. Know（画面固定スライド） ---
   セクション全体 = スライド数 × 画面高さ。内側の .rt-know__sticky が
   ヘッダー直下に固定され、スクロール量で 01→03 が切り替わる（JS: recruit.js）。
   --rt-header はヘッダーの実高さ（JS が更新。未設定時は --header-h） */
.rt-know {
  position: relative;
  height: calc(var(--rt-know-n, 3) * (100svh - var(--rt-header, var(--header-h))));
  background: var(--color-main-dark);
  color: #fff;
}
.rt-know__sticky {
  position: sticky;
  top: var(--rt-header, var(--header-h));
  height: calc(100svh - var(--rt-header, var(--header-h)));
  overflow: hidden;
}
.rt-know__slides { position: relative; height: 100%; }
.rt-know__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease-out), visibility 0s 0.7s;
}
.rt-know__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease-out);
}
/* 背景写真: 表示時にふわっと（フェード + わずかなズームアウト） */
.rt-know__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s var(--ease-out), transform 7s var(--ease-out);
}
.rt-know__slide.is-active .rt-know__bg { opacity: 1; transform: scale(1); }
/* 写真の上に紺のグラデーション（左ほど濃く、文字の可読性を確保） */
.rt-know__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 31, 108, 0.88) 0%, rgba(5, 31, 108, 0.55) 55%, rgba(5, 31, 108, 0.3) 100%);
}
.rt-know__bg--noimg::before {
  background: linear-gradient(115deg, #0e3ba9 0%, var(--color-main) 60%, #062578 100%);
}
.rt-know__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(48px, 8vh, 96px) clamp(120px, 14vw, 200px) clamp(48px, 8vh, 96px) var(--container-pad);
  /* 中身が画面高さに収まらないとき（スマホなど文字量が多い場合）は、この中だけを縦スクロールさせる。
     収まるときは従来どおり上下中央。内側のスクロールが端に達するとページ側のスクロールに
     連鎖して次のスライドへ進む（PC のホイールは recruit.js が端に達するまで切り替えない） */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}
.rt-know__catch {
  font-size: 275%;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 24px;
}
.rt-know__text {
  font-size: 106.25%;
  line-height: 2;
  max-width: 760px;
  margin: 0 0 32px;
}
.rt-know__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
/* 右側の縦インジケーター */
.rt-know__nav {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.rt-know__nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #fff;
  opacity: 0.55;
  font-family: var(--font-sans-en);
  font-size: 87.5%;
  font-weight: 700;
  line-height: 1;
  transition: opacity 0.2s var(--ease-out);
}
.rt-know__nav button::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: width 0.3s var(--ease-out);
}
.rt-know__nav button:hover,
.rt-know__nav button.is-active { opacity: 1; }
.rt-know__nav button.is-active::before { width: 48px; }
.rt-know__nav-label { font-family: var(--font-sans-ja); font-size: 87.5%; }

/* --- 6. Flow（/recruit/flow/ の内容を流用） --- */
.rt-flow { padding: clamp(64px, 9vw, 120px) 0; background: #fff; }
.rt-flow__body { max-width: 960px; }

/* --- 7. CTA（青ベース + 薄い格子） --- */
.rt-cta {
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0;
  background: linear-gradient(115deg, #0e3ba9 0%, var(--color-main) 60%, #062578 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.rt-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.rt-cta__inner { position: relative; }
.rt-cta__en {
  font-family: var(--font-sans-en);
  font-size: 400%;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
.rt-cta__label {
  font-size: 100%;
  font-weight: 700;
  margin: 8px 0 28px;
  opacity: 0.9;
}
.rt-cta__catch {
  font-size: 275%;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 36px;
}
.rt-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.rt-cta__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin: 28px 0 0;
  padding: 0;
}
.rt-cta__links a {
  color: #fff;
  font-size: 100%;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rt-cta__links a:hover { opacity: 0.8; }

/* --- レスポンシブ --- */
@media (max-width: 1024px) {
  .rt-fv__en { font-size: 600%; }
  .rt-know__catch { font-size: 225%; }
}
@media (max-width: 768px) {
  .rt-fv { min-height: calc(100svh - var(--header-h-sp)); }
  .rt-fv__en { font-size: 450%; }
  .rt-fv__ja { font-size: 125%; }
  .rt-fv__jobs { gap: 14px; }
  .rt-fv__jobs-btns { width: 100%; }
  .rt-fv__jobs-btns .rt-btn { flex: 1 1 100%; min-width: 0; }
  .rt-marquee { height: clamp(140px, 26vh, 220px); }
  .rt-h2 { font-size: 187.5%; }
  .rt-catch { font-size: 175%; }
  .rt-text { font-size: 100%; }
  .rt-about__inner { grid-template-columns: 1fr; gap: 36px; }
  .rt-venn { max-width: 320px; }
  .rt-values__list { grid-template-columns: 1fr; gap: 16px; }
  .rt-message { --rt-msg-pad: 64px; padding-bottom: 72px; }
  /* スマホ: 縦文字は本文と重ねず、その幅 + 余白ぶん本文を右へ（--rt-side-w は recruit.js が実測して設定）。
     縦文字の高さをセクションの内側に固定し、1 列で収まらない長さのときだけ 2 列に折り返す */
  .rt-message__side {
    font-size: 52px;
    bottom: 72px;
    white-space: normal;
  }
  .rt-message__side br { display: none; }
  .rt-message__main { padding-left: var(--rt-side-w, 0px); }
  .rt-message__catch { font-size: 140%; margin-bottom: 24px; } /* スマホの本文 (.rt-text 100%) の 140% */
  .rt-message__body { max-width: none; }
  /* スマホ: イラストは本文の上に小さめに */
  .rt-message__row--illust { grid-template-columns: 1fr; gap: 24px; }
  .rt-message__visual img { max-width: 260px; }
  /* スマホ: 下部インジケーター (01 02 03) のぶんはスライド側の余白で確保し、
     スクロール領域 (.rt-know__inner) と重ならないようにする */
  .rt-know__slide { padding-bottom: 84px; }
  .rt-know__inner { padding: 40px var(--container-pad) 24px; }
  .rt-know__catch { font-size: 175%; }
  .rt-know__text { font-size: 100%; }
  .rt-know__links .rt-btn { flex: 1 1 100%; min-width: 0; }
  /* インジケーターは下部中央に横並び */
  .rt-know__nav {
    top: auto;
    bottom: 28px;
    right: 50%;
    transform: translateX(50%);
    grid-auto-flow: column;
    gap: 20px;
  }
  .rt-know__nav-label { display: none; }
  .rt-cta__en { font-size: 250%; }
  .rt-cta__catch { font-size: 175%; }
  .rt-cta__btns .rt-btn { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 480px) {
  .rt-fv__en { font-size: 340%; }
  .rt-values__num { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-marquee__track { animation: none; }
  .rt-know__slide,
  .rt-know__slide.is-active,
  .rt-know__bg,
  .rt-venn__ring, .rt-venn__core, .rt-venn__label { transition: none; }
  .rt-venn__ring { stroke-dashoffset: 0; }
  .rt-venn__core, .rt-venn__label { opacity: 1; }
  /* メッセージ: 登場アニメーションを止めて静止表示 */
  .rt-message__side,
  .rt-eyebrow,
  .rt-message__catch-text,
  .rt-message__visual,
  .rt-message__body .rt-text { transform: none; transition: none; }
}

/* =========================================================
   フォーム利用ページ: スマホで入力欄をタップしても拡大されないように
   （iOS は 16px 未満の入力欄にフォーカスすると自動ズームするため 16px 以上を保証）
   ========================================================= */
@media (max-width: 768px) {
  .kcf input[type="text"],
  .kcf input[type="email"],
  .kcf input[type="tel"],
  .kcf select,
  .kcf textarea,
  .wpcf7-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
  .wpcf7-form select,
  .wpcf7-form textarea,
  .searchform input[type="search"],
  .searchform input[type="text"] {
    font-size: 16px !important;
  }
}
.kcf input,
.kcf select,
.kcf textarea,
.kcf button,
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea { touch-action: manipulation; }


/* =========================================================
   採用FAQ: グループ見出し（page-faq.php。右の追従目次は .recruit-page__inner 共通）
   ========================================================= */
.recruit-faq__group .recruit-h2 { margin-bottom: 20px; }
.recruit-faq__group + .recruit-faq__group { margin-top: clamp(48px, 6vw, 72px); }

/* =========================================================
   外部リンク: 文字の右側に別窓アイコン（a タグに class="link-ext"）
   ========================================================= */
.link-ext {
  padding-right: 1.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23072d99' d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.95em auto;
}
.link-ext--white {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
}

/* 画像ポップアップ: 縦長のページ画像を幅いっぱい + 枠内スクロールで表示 */
.kaneko-popup--scroll .kaneko-popup__figure {
  max-width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kaneko-popup--scroll .kaneko-popup__figure img { max-height: none; width: 100%; }
.kaneko-popup--scroll .kaneko-popup__caption { position: sticky; bottom: 0; background: #fff; }

/* =========================================================
   カネコの事業を知る（page-know.php / page-know-detail.php）
   ========================================================= */
/* 上部ナビ: 7 ページのタブ。ヘッダーの下に追従 */
.know-nav {
  position: sticky;
  top: var(--header-actual, var(--header-h)); /* 実高さは main.js が同期（ヘッダー縮小時の隙間防止） */
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--color-line);
}
.know-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.know-nav__list::-webkit-scrollbar { display: none; }
.know-nav__item { flex: 0 0 auto; }
.know-nav__item a {
  display: block;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.know-nav__item:first-child a { padding-left: 0; }
.know-nav__item a:hover,
.know-nav__item a.is-current { color: var(--color-main); border-bottom-color: var(--color-main); }

/* 導入 */
.know-intro { margin-bottom: clamp(48px, 6vw, 72px); }
.know-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 48px;
  align-items: start;
}
.know-intro__grid.has-photo { grid-template-columns: minmax(0, 1fr) minmax(240px, 32%); }
.know-catch {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 24px;
}
.know-page--index .know-intro__lead { max-width: 900px; }
.know-intro__photo { margin: 0; }
.know-intro__photo img { display: block; width: 100%; height: auto; }
.know-intro__fv { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 820px; }
.know-intro__fv img { display: block; width: 100%; height: auto; }

/* セクション */
.know-section {
  scroll-margin-top: calc(var(--header-h) + 80px);
  margin-bottom: clamp(56px, 7vw, 88px);
}
.know-section:last-child { margin-bottom: 0; }
/* 大見出し: 製品案内ページの .product-feature（■付きの帯）を流用 */
.know-section__head { margin: 0 0 24px; }
.know-section__head .product-feature__title {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  margin: 0;
}
.know-section__lead { margin-bottom: 28px; }
.know-section__fig { margin: 0 auto 36px; max-width: 820px; }
.know-section__fig img { display: block; width: 100%; height: auto; }
.know-section__more { margin: 40px 0 0; text-align: center; }

/* 詳細: 写真付きの行 */
.know-list { border-top: 1px solid var(--color-line); }
.know-item {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--color-line);
}
.know-item--no-image { grid-template-columns: minmax(0, 1fr); }
.know-item__media { margin: 0; }
.know-item__media img { display: block; width: 100%; height: auto; border: 1px solid var(--color-line); }
.know-item__title {
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
  margin: 0 0 12px;
}
.know-badge {
  display: inline-block;
  vertical-align: 0.2em;
  margin-left: 8px;
  padding: 3px 10px 2px;
  font-family: var(--font-sans-en);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--color-main);
}
.know-item__text {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
}
.know-item__text a { text-decoration: underline; }
.know-item__link { margin: 14px 0 0; }

/* 一覧: 横並びカード（見出し → 写真 → 本文 → リンク） */
.know-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 36px 28px;
}
.know-card { display: flex; flex-direction: column; min-width: 0; }
.know-card__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--color-main);
}
.know-card__media { margin: 0 0 16px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-soft); }
.know-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.know-card__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}
.know-card__text a { text-decoration: underline; }
.know-card__link { margin: 14px 0 0; padding-top: 4px; }
.know-card__link:last-child { margin-top: auto; padding-top: 18px; }

/* 写真ギャラリー: 画面幅いっぱい・隙間なし */
.know-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.know-gallery--1 { grid-template-columns: minmax(0, 1fr); }
.know-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.know-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.know-gallery--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.know-gallery--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.know-gallery__item { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-soft); }
.know-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 〜の流れ: うすブルーの帯 + 番号付き STEP（紹介項目とはトーンを変える） */
.know-flow {
  background: var(--color-bg-band);
  padding: var(--section-pad-y) 0;
}
.know-flow__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  text-align: center;
  margin: 0 0 clamp(32px, 4vw, 48px);
}
.know-flow__en {
  font-family: var(--font-sans-en);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-main);
}
.know-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  display: grid;
  gap: 16px;
}
.know-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 26%);
  column-gap: clamp(20px, 3vw, 32px);
  align-items: start;
  background: #fff;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
  box-shadow: var(--shadow-card);
}
.know-step--no-image { grid-template-columns: 64px minmax(0, 1fr); }
.know-step__num {
  font-family: var(--font-sans-en);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-main);
  padding-top: 2px;
}
.know-step__title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
  margin: 4px 0 10px;
}
.know-step__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}
.know-step__media { margin: 0; }
.know-step__media img { display: block; width: 100%; height: auto; }
.know-flow__note {
  max-width: 1000px;
  margin: 28px auto 0;
  padding: 18px 24px;
  background: #fff;
  border-left: 4px solid var(--color-main);
}
.know-flow__note-text { font-size: 14px; line-height: 1.9; color: var(--color-text); margin: 0 0 0.8em; }
.know-flow__note-text:last-child { margin-bottom: 0; }

/* お客様の安全のために: 斜めストライプの淡色帯 + 白カード（このエリアだけトーンを変える。
   直後の Entry CTA（紺）と色が重ならないよう淡色にする） */
.know-cases {
  position: relative;
  padding: var(--section-pad-y) 0;
  background-color: var(--color-bg-band);
  background-image: repeating-linear-gradient(135deg, rgba(7, 45, 153, 0.05) 0 2px, transparent 2px 14px);
  color: var(--color-text);
}
.know-cases__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  text-align: center;
  margin: 0 0 20px;
}
.know-cases__en {
  font-family: var(--font-sans-en);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-main);
}
.know-cases__lead {
  font-size: 16px;
  line-height: 2;
  text-align: center;
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.know-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
  align-items: start;
}
.know-case {
  background: #fff;
  color: var(--color-text);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
}
.know-case__company {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-main);
}
.know-case__company a { color: var(--color-main); text-decoration: none; }
.know-case__company a:hover { text-decoration: underline; }
.know-case__item + .know-case__item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.know-case__item-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0;
}
.know-case__item-title a { color: var(--color-main); text-decoration: underline; }
.know-case__item-title a:hover { text-decoration: none; }
.know-case__img-btn {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main);
  background: #fff;
  border: 1px solid var(--color-main);
  cursor: pointer;
  vertical-align: 0.1em;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.know-case__img-btn:hover { background: var(--color-main); color: #fff; }
.know-case__text {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 8px 0 0;
}
.know-case__text a { color: var(--color-main); text-decoration: underline; }

/* レスポンシブ */
@media (max-width: 900px) {
  .know-item { grid-template-columns: 240px minmax(0, 1fr); }
  .know-step { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 30%); }
}
@media (max-width: 768px) {
  .know-nav { top: var(--header-actual, var(--header-h-sp)); }
  .know-nav__item a { padding: 12px 12px; font-size: 13px; }
  .know-intro__grid.has-photo { grid-template-columns: minmax(0, 1fr); }
  .know-intro__photo { max-width: 360px; }
  .know-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }
  .know-item,
  .know-item--no-image { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .know-item__media { max-width: 360px; }
  .know-step,
  .know-step--no-image { grid-template-columns: 44px minmax(0, 1fr); row-gap: 14px; }
  .know-step__num { font-size: 30px; }
  .know-step__media { grid-column: 2; max-width: 320px; }
  .know-cases__grid { gap: 16px; }
}


/* =========================================================
   サイトマップ（page-sitemap.php）: 公開中の固定ページを自動一覧
   ========================================================= */
.sitemap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.sitemap__col { min-width: 0; }
.sitemap__group + .sitemap__group { margin-top: clamp(32px, 4vw, 44px); }
.sitemap__title {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
  padding-left: 14px;
  border-left: 4px solid var(--color-main);
  margin: 0 0 18px;
}
.sitemap__list { list-style: none; margin: 0; padding: 0; }
.sitemap__list--l0 > .sitemap__item { padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.sitemap__list--l0 > .sitemap__item > a {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}
.sitemap__list--sub { margin-top: 8px; padding-left: 4px; display: grid; gap: 6px; }
.sitemap__list--sub .sitemap__list--sub { margin-top: 6px; padding-left: 18px; gap: 4px; }
.sitemap__list--sub > .sitemap__item > a {
  position: relative;
  display: inline-block;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text);
  text-decoration: none;
}
.sitemap__list--sub > .sitemap__item > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 8px;
  height: 1px;
  background: var(--color-main);
}
.sitemap__list--sub .sitemap__list--sub > .sitemap__item > a { font-size: 13.5px; color: var(--color-muted); }
.sitemap a:hover { color: var(--color-main); text-decoration: underline; }
@media (max-width: 768px) {
  .sitemap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ============================================================
   英語ページ (body.lang-en): 英字の見出しラベル (eyebrow) は h1 / 見出しと重複するため非表示
   (テンプレート側でも出力していないが、取りこぼし用の保険)
   ============================================================ */
.lang-en .page-hero-band__eyebrow,
.lang-en .section-eyebrow,
.lang-en .rt-eyebrow,
.lang-en .product-cta__eyebrow,
.lang-en .rt-fv__en,
.lang-en .rt-cta__en { display: none; }