/* main.css : 全画面共通スタイル。ページ固有のスタイルは functions.php の
   wp_enqueue_style() でページ判定ごとに個別 CSS (front-page.css 等) を追加ロードする。 */

:root {
  --ink: #1f1f1f;
  --text: #333333;
  --sub: #666666;
  --line: #e5e7eb;
  --line-soft: #f0f1f4;
  /* 装飾アイコン・セパレータ用の控えめなグレー (対応工程ステッパーの矢印等) */
  --line-muted: #b3b6bb;
  --bg: #ffffff;
  --bg-tint: #f2f4f7;
  --bg-band: #f7f8fa;
  --primary: #1b3a5b;
  --primary-deep: #11253e;
  --primary-soft: #e2e7ee;
  /* WCAG 1.4.11 (Non-text Contrast) 3:1 を満たすフォーム枠用グレー */
  --line-form: #9ca3af;
  /* フォーム入力欄フォーカス用。primary（紺）は濃すぎて「黒枠」に見えるため、
     一般的なブラウザフォーカス相当の明るい青を使う。チェックボックス accent-color も同色。 */
  --focus: #2563eb;
  --line-dark: #333;
  --line-on-dark: rgba(255, 255, 255, 0.5);
  --text-on-dark: #bdbdbd;
  --text-on-dark-sub: #999;
  --accent: #bc5a3c;
  --accent-deep: #964830;
  /* Material UI error.main。フォームバリデーション専用 (サイトのブランドカラーとは独立)。 */
  --error: #d32f2f;
  --gold: #c9a227;
  --t: 180ms ease-out;
  --t-slow: 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bullet-w: 6px;
  --bullet-h: 1px;
  --fs-xs: 0.75rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-2xl: 1.25rem;
  --fs-4xl: 1.75rem;
  --fs-5xl: 2.625rem;
  --ls-base: 0.04em;
  --ls-label: 0.1em;
  --lh-icon: 1;
  --lh-h2: 1.4;
  --lh-h3: 1.55;
  --lh-h1: 1.6;
  --lh-body: 1.85;
  --lh-lead: 1.95;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;
  --sp-22: 88px;
  --sp-24: 96px;
  /* Lucide icons (mask-image用、background-color:currentColor で色追従) */
  --icon-chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* case-process 用 (single-case.php)。同じく Lucide、background-color:currentColor で色追従 */
  --icon-chev-right-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
  --icon-list-checks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E");
  --icon-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E");
  --icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
  --icon-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2' ry='2'/%3E%3Cline x1='6' x2='6.01' y1='6' y2='6'/%3E%3Cline x1='6' x2='6.01' y1='18' y2='18'/%3E%3C/svg%3E");
  --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  /* circle 系アイコンは他の Lucide (stroke-width 2) より太い 3/2.5 で工程ラベルを目立たせる */
  --icon-circle-dashed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.1 2.182a10 10 0 0 1 3.8 0'/%3E%3Cpath d='M13.9 21.818a10 10 0 0 1-3.8 0'/%3E%3Cpath d='M17.609 3.721a10 10 0 0 1 2.69 2.7'/%3E%3Cpath d='M2.182 13.9a10 10 0 0 1 0-3.8'/%3E%3Cpath d='M20.279 17.609a10 10 0 0 1-2.7 2.69'/%3E%3Cpath d='M21.818 10.1a10 10 0 0 1 0 3.8'/%3E%3Cpath d='M3.721 6.391a10 10 0 0 1 2.7-2.69'/%3E%3Cpath d='M6.391 20.279a10 10 0 0 1-2.69-2.7'/%3E%3C/svg%3E");
  --icon-circle-check-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
  /* nav-toggle 用 (header.php) */
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 100%;
  scroll-padding-top: 72px;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
#main {
  flex: 1 0 auto;
}
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: var(--bw-1);
  text-decoration-color: rgba(27, 58, 91, 0.4);
  text-underline-offset: 0.22em;
  transition:
    color var(--t),
    text-decoration-color var(--t),
    text-decoration-thickness var(--t);
}
a:hover {
  color: var(--primary-deep);
  text-decoration-color: var(--accent);
  text-decoration-thickness: var(--bw-2);
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: var(--ls-base);
}

a:focus-visible,
button:focus-visible {
  outline: var(--bw-2) solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 var(--sp-1) var(--primary-soft);
  text-decoration-color: currentColor;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff !important;
  padding: var(--sp-3) var(--sp-5);
  z-index: 200;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-base);
}
.skip-link:focus {
  left: 0;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}
/* 狭幅: 記事本文・法務文書など長文の可読性優先（日本語1行40字基準, W3C JLREQ / WCAG C20）*/
.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

/* ============================================================
   Header (site-header)
   ============================================================ */
header.site {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 var(--bw-2) var(--sp-2) rgba(31, 26, 20, 0.04);
}
.nav {
  display: flex;
  align-items: center;
  height: 72px;
  gap: var(--sp-12);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none !important;
  color: var(--ink);
}
.logo .mark {
  height: 40px;
  width: auto;
  display: block;
}
.logo .corp {
  font-size: var(--fs-xs);
  color: var(--sub);
  letter-spacing: var(--ls-label);
  font-weight: 400;
}
.nav > nav {
  margin-left: auto;
}
.gnav {
  display: flex;
  gap: var(--sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-md);
  font-weight: 400;
}
.gnav a {
  text-decoration: none !important;
  color: var(--ink);
  padding: var(--sp-6) 0;
  position: relative;
  transition: color var(--t);
}
.gnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-5);
  height: var(--bw-2);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t);
}
.gnav a:hover {
  color: var(--primary-deep);
}
.gnav a:hover::after,
.gnav a:focus-visible::after {
  transform: scaleX(1);
}
.gnav-contact-item {
  display: none;
}
.nav-right {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}
.nav-toggle {
  display: none;
  position: relative;
  width: var(--sp-11);
  height: var(--sp-11);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--sp-6);
  height: var(--sp-6);
  background-color: var(--ink);
  -webkit-mask: var(--icon-menu) center / contain no-repeat;
  mask: var(--icon-menu) center / contain no-repeat;
}
.nav-toggle[aria-expanded="true"]::before {
  -webkit-mask-image: var(--icon-x);
  mask-image: var(--icon-x);
}
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: var(--ls-base);
  background: var(--primary);
  color: #fff !important;
  padding: var(--sp-4) var(--sp-7);
  min-height: var(--sp-11);
  text-decoration: none !important;
  transition: background var(--t);
}
.btn-contact::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-chev-right) center / contain no-repeat;
  mask: var(--icon-chev-right) center / contain no-repeat;
  transition: transform var(--t);
}
.btn-contact:hover {
  background: var(--primary-deep);
}
.btn-contact:hover::after {
  transform: translateX(var(--sp-1));
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.crumb {
  background: var(--bg-band);
  font-size: var(--fs-xs);
  color: var(--sub);
  padding: var(--sp-4) 0;
  letter-spacing: var(--ls-base);
}
.crumb a {
  color: var(--sub);
  text-decoration: none;
  transition: color var(--t);
}
.crumb a:hover {
  color: var(--primary);
}
.crumb .sep {
  margin: 0 var(--sp-3);
  color: var(--line);
}
.crumb .current {
  color: var(--ink);
}

/* ============================================================
   Article head (solution / news 共通)
   ============================================================ */
.article-head {
  padding: 72px 0 var(--sp-8);
}
.article-meta-top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.article-meta-top .article-group {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.article-meta-top .date {
  font-size: var(--fs-xs);
  color: var(--sub);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-base);
}
.article-head h1 {
  font-size: var(--fs-4xl);
  color: var(--ink);
  line-height: var(--lh-h2);
  margin: 0 0 var(--sp-5);
}
.article-head .lead {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-lead);
  margin: 0 0 var(--sp-6);
}
.article-head .article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.article-head .tag {
  font-size: var(--fs-xs);
  color: var(--sub);
  border: var(--bw-1) solid var(--line);
  padding: var(--sp-1) var(--sp-3);
  letter-spacing: var(--ls-base);
}
@media (max-width: 960px) {
  .article-head {
    padding: 48px 0 var(--sp-8);
  }
  .article-head h1 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-h3);
  }
}

/* ============================================================
   Page header
   ============================================================ */
.page-hd {
  padding: var(--sp-12) 0;
}
.page-hd h1 {
  font-size: var(--fs-5xl);
  line-height: var(--lh-h1);
  color: var(--ink);
  margin: 0 0 var(--sp-5);
  font-weight: 700;
}
.page-hd .page-lead {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-lead);
  margin: 0;
}

/* ============================================================
   Legal 文書 (プライバシーポリシー / 情報セキュリティ方針 等)
   .container-narrow と組み合わせて使う。条文 H2 = 左縦バー 3px primary。
   ============================================================ */
.legal-section {
  padding: 0 0 var(--sp-22);
  background: var(--bg);
}
.legal-lead,
.legal-clause p,
.legal-clause li,
.legal-clause dd {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.legal-lead {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-lead);
  margin: 0 0 var(--sp-14);
}
.legal-clause {
  margin-bottom: var(--sp-14);
}
.legal-clause:last-of-type {
  margin-bottom: var(--sp-16);
}
.legal-clause h2 {
  font-size: var(--fs-2xl);
  color: var(--ink);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-h3);
  padding-left: var(--sp-4);
  border-left: var(--bw-3) solid var(--primary);
}
.legal-clause p {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-lead);
  margin: 0 0 var(--sp-4);
}
.legal-clause p:last-child {
  margin-bottom: 0;
}
.legal-clause ol {
  margin: var(--sp-2) 0 var(--sp-4);
  padding-left: var(--sp-7);
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-body);
}
.legal-clause ol li {
  padding: var(--sp-1) 0;
}
.legal-clause ul {
  list-style: none;
  margin: var(--sp-2) 0 var(--sp-4);
  padding: 0;
}
.legal-clause ul li {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-body);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  position: relative;
}
.legal-clause ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sp-4);
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
}
.legal-foot {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: var(--bw-1) solid var(--line);
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-body);
}
.legal-foot p {
  margin: 0 0 var(--sp-1);
}
.legal-foot p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   L3 共通装飾：左縦バー 3px primary
   サブセクション見出し（H3 / fieldset legend / 一部 H2）に流用。
   .legal-clause h2（Legal セクション内）と .callout（注意喚起ブロック）は
   同じ左縦バーモチーフを使うが、文脈が異なるため個別定義に残す。
   ============================================================ */
.sol-name,
.info-block-head h3,
.area-head,
.contact-form legend,
.contact-alt-section h2,
.thanks-info h2 {
  padding-left: var(--sp-4);
  border-left: var(--bw-3) solid var(--primary);
}

/* ============================================================
   Section heading（基本型 1：下線 2px primary）
   ============================================================ */
.sec-head {
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw-2) solid var(--primary);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
}
.sec-title {
  font-size: var(--fs-4xl);
  color: var(--ink);
  margin: 0;
  line-height: var(--lh-h2);
}
.sec-lead {
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-lead);
  margin: 0 0 var(--sp-12);
}
.sec-cta {
  margin-top: var(--sp-12);
  text-align: right;
}

/* ============================================================
   Case card（ソリューション事例の article-card とビジュアルを統一）
   index.html の導入事例ダイジェスト / cases.html の事例一覧カード / front-page 抜粋で共通利用
   ============================================================ */
.case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.case-item {
  display: flex;
}
.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  background: #fff;
  border: var(--bw-1) solid var(--line);
  padding: var(--sp-8);
  padding-right: calc(var(--sp-8) + var(--sp-7));
  text-decoration: none !important;
  color: inherit;
  position: relative;
  transition: box-shadow var(--t);
}
.case-card::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: var(--sp-8);
  bottom: var(--sp-8);
  background-color: var(--primary);
  -webkit-mask: var(--icon-chev-right) center / contain no-repeat;
  mask: var(--icon-chev-right) center / contain no-repeat;
  transition: transform var(--t);
}
.case-card:hover {
  box-shadow: inset 0 0 0 var(--bw-2) var(--gold);
}
.case-card:hover::after {
  transform: translateX(var(--sp-1));
}
.case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-4);
}
.case-client {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: var(--lh-h3);
}
.case-tag {
  font-size: var(--fs-xs);
  color: var(--sub);
  background: transparent;
  border: var(--bw-1) solid var(--line);
  padding: var(--sp-1) var(--sp-3);
  letter-spacing: var(--ls-base);
  display: inline-block;
  line-height: var(--lh-h3);
}
.case-tag.industry {
  color: var(--ink);
  background: var(--bg-tint);
  border-color: var(--bg-tint);
  font-weight: 700;
  font-size: var(--fs-base);
  padding: var(--sp-1) var(--sp-4);
}
.case-tag.case-tag-highlight {
  color: var(--primary);
  border-color: var(--primary);
}
.case-title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-h3);
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--ls-base);
}
.case-lead {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-body);
  margin: 0;
}
.case-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
}
.case-stack-label {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  margin-right: var(--sp-2);
}

/* ============================================================
   contact-mini : archive / single 末尾の CTA バナー (共通)
   template-parts/contact-mini.php で全 archive/single から共有
   ============================================================ */
.contact-mini {
  background: var(--primary-deep);
  color: #fff;
  padding: 64px 0;
}
.contact-mini h2 {
  font-size: var(--fs-4xl);
  color: #fff;
  line-height: var(--lh-h2);
  margin: 0 0 var(--sp-5);
}
.contact-mini p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  margin: 0 0 var(--sp-7);
  max-width: 720px;
}
@media (max-width: 960px) {
  .contact-mini h2 {
    font-size: var(--fs-2xl);
  }
  .contact-mini .btn-primary {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .page-hd-cta .btn-contact {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ============================================================
   btn-primary : 濃背景上の白塗り CTA
   primary-deep セクション内（index #contact / contact-mini）共通
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: #fff;
  color: var(--primary-deep) !important;
  padding: var(--sp-4) var(--sp-8);
  text-decoration: none !important;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-base);
  border: var(--bw-1) solid #fff;
  min-height: var(--sp-11);
  transition:
    background var(--t),
    color var(--t);
}
.btn-primary::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-chev-right) center / contain no-repeat;
  mask: var(--icon-chev-right) center / contain no-repeat;
  transition: transform var(--t);
}
.btn-primary:hover {
  background: var(--primary-soft);
  color: var(--primary-deep) !important;
}
.btn-primary:hover::after {
  transform: translateX(var(--sp-1));
}

/* ============================================================
   btn-outline : 明背景上の primary outline CTA
   hover は背景を載せず、文字と枠を primary-deep に濃くするだけ
   ============================================================ */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: var(--ls-base);
  color: var(--primary) !important;
  background: transparent;
  border: var(--bw-1) solid var(--primary);
  text-decoration: none !important;
  min-height: var(--sp-11);
  transition: opacity var(--t);
}
.btn-outline::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon-chev-right) center / contain no-repeat;
  mask: var(--icon-chev-right) center / contain no-repeat;
  transition: transform var(--t);
}
.btn-outline:hover {
  opacity: 0.6;
}
.btn-outline:hover::after {
  transform: translateX(var(--sp-1));
}

/* ============================================================
   Footer (site-footer)
   ============================================================ */
footer.site {
  background: var(--bg-band);
  color: var(--text);
  padding: var(--sp-14) 0 var(--sp-5);
  font-size: var(--fs-base);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: var(--bw-1) solid var(--line);
}
.footer-brand .logo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}
.footer-brand .logo .mark {
  height: 60px;
  width: auto;
  display: block;
}
.footer-brand .logo .corp {
  font-size: var(--fs-xs);
  color: var(--sub);
  letter-spacing: var(--ls-label);
  font-weight: 400;
}
.footer-cert {
  margin-top: var(--sp-5);
  display: inline-block;
}
.footer-cert-logo {
  height: 76px;
  width: auto;
  display: block;
}
.footer-cert-no {
  font-size: var(--fs-xs);
  color: var(--sub);
  margin-top: var(--sp-2);
  letter-spacing: var(--ls-base);
}

.footer-col h3 {
  font-size: var(--fs-base);
  color: var(--ink);
  letter-spacing: var(--ls-label);
  font-weight: 700;
  margin: 0 0 var(--sp-4);
  padding-bottom: 10px;
  border-bottom: var(--bw-1) solid var(--line);
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer li {
  margin: 0;
}
footer a {
  color: var(--text);
  text-decoration: none !important;
  padding: var(--sp-2) 0;
  font-size: var(--fs-base);
  position: relative;
  display: inline-block;
  transition: color var(--t);
}
footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: var(--bw-2);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t);
}
footer a:hover {
  color: var(--primary-deep);
}
footer a:hover::after,
footer a:focus-visible::after {
  transform: scaleX(1);
}

.footer-bottom {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--sub);
  letter-spacing: var(--ls-base);
}
.copy {
  letter-spacing: var(--ls-base);
}

/* ============================================================
   PageToTop (右下固定。スクロール400px超で表示)
   ============================================================ */
.page-to-top {
  position: fixed;
  right: var(--sp-10);
  bottom: var(--sp-10);
  width: var(--sp-20);
  height: var(--sp-20);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 100;
}
.page-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.page-to-top:hover {
  opacity: 0.7;
}
.page-to-top img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ============================================================
   Responsive (共通分のみ。ページ固有 @media は HTML 内に残す)
   ============================================================ */
@media (max-width: 960px) {
  .container {
    padding: 0 var(--sp-5);
  }
  .container-narrow {
    padding: 0 var(--sp-5);
  }
  .page-hd {
    padding: var(--sp-8) 0;
  }
  .page-hd h1 {
    font-size: var(--fs-4xl);
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-4);
    text-align: center;
  }
  .footer-brand .logo .mark {
    height: 40px;
  }
  .footer-cert-logo {
    height: 50px;
  }
  .page-to-top {
    display: none;
  }
  .footer-brand .footer-cert {
    margin-top: 0;
  }
  .logo .corp {
    display: none;
  }
  .nav {
    position: relative;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .gnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--sp-2) var(--sp-5);
    background: #fff;
    box-shadow: 0 var(--bw-2) var(--sp-2) rgba(31, 26, 20, 0.08);
  }
  .gnav.is-open {
    display: flex;
  }
  .gnav a {
    display: block;
    padding: var(--sp-5) 0;
  }
  .gnav-contact-item {
    display: block;
    margin-top: var(--sp-2);
    border-top: var(--bw-1) solid var(--line);
  }
  .gnav-contact-item a {
    color: var(--primary) !important;
    font-weight: 700;
  }
  .nav-right .btn-contact {
    display: none;
  }
  .sec-cta .btn-contact,
  .contact-actions .btn-primary {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .legal-section {
    padding: 0 0 var(--sp-18);
  }
  .case-list {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .case-card {
    padding: var(--sp-7);
  }
  .case-title {
    font-size: var(--fs-md);
  }
}