@charset "UTF-8";
/* =========================================================
   Shiomi Precision corporate site
   - Mobile first / breakpoints: 768px (tablet), 1024px (PC)
   - 1. Design tokens（デザインのルール）を最初に定義し、全ページで使い回す
   - 色・文字サイズ・余白は直接書かず、必ず変数を通す
   ========================================================= */

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  /* ---------- Color ---------- */
  --color-primary: #12304d;        /* ネイビー：ヘッダー文字、見出し、ヒーロー背景 */
  --color-primary-dark: #0b2036;   /* フッター背景 */
  --color-accent: #1d6aa8;         /* スチールブルー：ボタン、リンク、強調 */
  --color-accent-dark: #155384;    /* ボタンのホバー */
  --color-accent-light: #e6f0f8;   /* 選択中・ラベルの背景 */
  --color-signal: #e08a2b;         /* 図面の寸法線のような差し色（装飾のみ。文字には使わない） */
  --color-text: #1c2630;           /* 本文 */
  --color-text-sub: #4d5b69;       /* 補足文（白・薄グレー背景で 4.5:1 以上） */
  --color-text-inverse: #fff;
  --color-text-inverse-sub: #c3d0dc;
  --color-bg: #fff;
  --color-bg-alt: #f3f5f8;         /* 交互に入れるセクションの背景 */
  --color-line: #d6dde4;
  --color-error: #b3261e;
  --color-error-bg: #fdf0ef;

  /* ---------- Typography ---------- */
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Segoe UI", "Helvetica Neue", Arial, sans-serif;  /* 数字・英字ラベル */

  /* 文字サイズ：8 段階。大きい見出しは画面幅に合わせて伸び縮みする */
  --fs-xs: .75rem;     /* 12px 英字ラベル、注記 */
  --fs-sm: .875rem;    /* 14px 補足、表、パンくず */
  --fs-base: 1rem;     /* 16px 本文 */
  --fs-md: 1.125rem;   /* 18px リード文、カード見出し */
  --fs-lg: 1.25rem;    /* 20px 小見出し（h3） */
  --fs-xl: clamp(1.375rem, 1.2rem + .75vw, 1.75rem);   /* 22→28px セクション見出し（h2） */
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);    /* 28→40px ページタイトル（h1） */
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);      /* 32→52px トップのキャッチコピー */

  --lh-tight: 1.35;    /* 見出し */
  --lh-base: 1.85;     /* 本文（日本語） */
  --lh-base-en: 1.65;  /* 本文（英語） */

  /* ---------- Spacing（8px グリッド） ---------- */
  --space-1: .25rem;   /*  4px */
  --space-2: .5rem;    /*  8px */
  --space-3: .75rem;   /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --section-y: clamp(var(--space-8), 8vw, 7rem);  /* セクションの上下余白 64→112px */

  /* ---------- Layout / parts ---------- */
  --container: 1160px;
  --container-narrow: 880px;
  --container-form: 720px;
  --gutter: var(--space-4);
  --header-h: 64px;
  --radius-sm: 4px;
  --radius: 8px;
  --shadow: 0 2px 4px rgba(18, 48, 77, .06), 0 8px 24px rgba(18, 48, 77, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --duration: .2s;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-6); }
}
@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}

/* =========================================================
   2. Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ja);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: .03em;
  overflow-wrap: anywhere;   /* 長い英単語や URL で横スクロールを出さない */
  line-break: strict;
}
html[lang="en"] body {
  font-family: var(--font-en);
  line-height: var(--lh-base-en);
  letter-spacing: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { line-height: var(--lh-tight); font-weight: 700; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-underline-offset: .2em; }
a:hover { color: var(--color-accent-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
main:focus { outline: none; }

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

.skip-link {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--color-text-inverse); }

/* =========================================================
   3. Layout
   ========================================================= */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--form { max-width: calc(var(--container-form) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-bg-alt); }

/* =========================================================
   4. Components — headings / buttons
   ========================================================= */

/* ---------- Section heading：英字ラベル + 寸法線のようなバー + h2 ---------- */
.section-head { margin-bottom: var(--space-7); }
.section-head__label,
.page-header__label,
.hero__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
}
.section-head__label::before,
.page-header__label::before,
.hero__label::before {
  content: "";
  width: var(--space-6);
  height: 2px;
  background: linear-gradient(90deg, var(--color-signal) 0 6px, transparent 6px 10px, currentColor 10px);
}
.section-head__label--light { color: var(--color-text-inverse-sub); }
.section-head__title {
  color: var(--color-primary);
  font-size: var(--fs-xl);
}
.section-head__lead {
  max-width: 44em;
  margin-top: var(--space-4);
  color: var(--color-text-sub);
}
.section-more {
  margin-top: var(--space-7);
  text-align: center;
}
.section-more__note {
  margin-top: var(--space-3);
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
}

/* ---------- Buttons ---------- */
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn::after {
  content: "";
  width: .5em; height: .5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.btn--primary { background: var(--color-accent); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-accent-dark); color: var(--color-text-inverse); }
.btn--outline { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-bg); }
.btn--outline:hover { background: var(--color-accent); color: var(--color-text-inverse); }
.btn--outline-light { border-color: var(--color-text-inverse); color: var(--color-text-inverse); }
.btn--outline-light:hover { background: var(--color-text-inverse); color: var(--color-primary); }
.btn--lg { min-height: 56px; padding-inline: var(--space-7); font-size: var(--fs-md); }
.btn--block { width: 100%; }

/* =========================================================
   5. Header
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--color-line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-h);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  color: var(--color-primary);
  text-decoration: none;
}
.logo:hover { color: var(--color-primary); }
.logo__mark { width: 32px; flex-shrink: 0; color: var(--color-accent); }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__name { font-size: var(--fs-md); font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
html[lang="en"] .logo__name { letter-spacing: .01em; }
.logo__sub { font-family: var(--font-num); font-size: .625rem; letter-spacing: .2em; color: var(--color-text-sub); }

/* ---------- Language switch ---------- */
.lang-switch__list {
  display: flex;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lang-switch__link {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 36px;
  padding-inline: var(--space-2);
  color: var(--color-text-sub);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}
.lang-switch__link:hover { background: var(--color-accent-light); color: var(--color-accent-dark); }
.lang-switch__link[aria-current="true"] { background: var(--color-primary); color: var(--color-text-inverse); }

/* ---------- Hamburger (〜1023px) ---------- */
.menu-btn {
  position: relative;
  z-index: 110;
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-btn__bar {
  display: block;
  width: 24px; height: 2px;
  background: var(--color-primary);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav__link {
  display: block;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}
.nav__link:hover { color: var(--color-accent); }

@media (max-width: 1023px) {
  /* JS がある時だけメニューを隠す（JS 無しでも全リンクにたどり着ける） */
  .js .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 105;
    overflow-y: auto;
    padding: var(--space-5) var(--gutter) var(--space-8);
    background: var(--color-bg);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration) var(--ease), visibility var(--duration);
  }
  /* 開くときは visibility を即時に切り替え、直後のフォーカス移動を確実にする */
  .js .nav.is-open { visibility: visible; opacity: 1; transition: opacity var(--duration) var(--ease), visibility 0s; }
  .nav { order: 10; }
  html:not(.js) .header__inner { flex-wrap: wrap; height: auto; padding-block: var(--space-3); }
  html:not(.js) .nav { width: 100%; }
  html:not(.js) .menu-btn { display: none; }
  .nav__list li { border-bottom: 1px solid var(--color-line); }
  .nav__link { padding: var(--space-4) var(--space-2); font-size: var(--fs-md); }
  .nav__link[aria-current="page"] { color: var(--color-accent); }
  .nav__link--cta { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-text-inverse); text-align: center; }
  .nav__link--cta:hover, .nav__link--cta[aria-current="page"] { background: var(--color-accent-dark); color: var(--color-text-inverse); }
  .nav__list li:has(.nav__link--cta) { border-bottom: 0; }
  body.is-menu-open { overflow: hidden; }
}

@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .nav { order: 0; }
  .nav__list { display: flex; align-items: center; gap: var(--space-1); }
  .nav__home { display: none; }
  .nav__link {
    position: relative;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .nav__link:not(.nav__link--cta)::after {
    content: "";
    position: absolute;
    left: var(--space-3); right: var(--space-3); bottom: 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--duration) var(--ease);
  }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link--cta {
    margin-left: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-text-inverse);
  }
  .nav__link--cta:hover, .nav__link--cta[aria-current="page"] { background: var(--color-accent-dark); color: var(--color-text-inverse); }
  .lang-switch { margin-left: var(--space-2); }
}

/* =========================================================
   6. Breadcrumb / page header
   ========================================================= */
.breadcrumb {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-1) 0; }
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: .45em; height: .45em;
  margin-inline: var(--space-3);
  border-top: 1px solid var(--color-text-sub);
  border-right: 1px solid var(--color-text-sub);
  transform: rotate(45deg);
}
.breadcrumb a { color: var(--color-text-sub); }
.breadcrumb a[aria-current="page"] { color: var(--color-text); text-decoration: none; }

.page-header {
  padding-block: var(--space-8) var(--space-7);
  background:
    linear-gradient(var(--color-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--color-bg-alt);
  background-blend-mode: normal;
  border-bottom: 1px solid var(--color-line);
}
.page-header .container { position: relative; }
.page-header__title { color: var(--color-primary); font-size: var(--fs-2xl); }
.page-header__lead { max-width: 40em; margin-top: var(--space-4); font-size: var(--fs-md); }

/* =========================================================
   7. Top page
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--color-primary);
  color: var(--color-text-inverse);
}
.hero__inner { display: grid; gap: var(--space-7); align-items: center; }
.hero__label { color: var(--color-text-inverse-sub); }
.hero__title { font-size: var(--fs-3xl); letter-spacing: .04em; }
html[lang="en"] .hero__title { letter-spacing: -.01em; max-width: 14em; }
.hero__lead { max-width: 34em; margin-block: var(--space-5) var(--space-6); color: var(--color-text-inverse-sub); font-size: var(--fs-md); }
.hero__visual { max-width: 520px; margin-inline: auto; }

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-9); }
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---------- Stats（数字で見る） ---------- */
.stats { border-bottom: 1px solid var(--color-line); }
.stats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--color-line);
}
.stats__item:nth-child(odd) { border-right: 1px solid var(--color-line); }
.stats__label { color: var(--color-text-sub); font-size: var(--fs-sm); line-height: 1.5; }
.stats__value { color: var(--color-primary); font-family: var(--font-num); line-height: 1.2; }
.stats__num { font-size: var(--fs-2xl); font-weight: 700; }
.stats__unit { margin-left: var(--space-1); font-size: var(--fs-sm); font-weight: 700; }

@media (min-width: 768px) {
  .stats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats__item { border-bottom: 0; border-right: 1px solid var(--color-line); }
  .stats__item:last-child { border-right: 0; }
}

/* 採用ページの白背景版（3 つ並び） */
.stats__list--light {
  margin-bottom: var(--space-7);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  grid-template-columns: minmax(0, 1fr);
}
.stats__list--light .stats__item { border-right: 0; }
.stats__list--light .stats__item:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .stats__list--light { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats__list--light .stats__item { border-bottom: 0; border-right: 1px solid var(--color-line); }
  .stats__list--light .stats__item:last-child { border-right: 0; }
}

/* ---------- Service list ---------- */
.service-list { display: grid; gap: var(--space-5); }
.service-list__item {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border-top: 3px solid var(--color-primary);
  background: var(--color-bg-alt);
}
.service-list__num {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
}
.service-list__title { margin-bottom: var(--space-3); color: var(--color-primary); font-size: var(--fs-lg); }
@media (min-width: 768px) {
  .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- News ---------- */
.news-list { border-top: 1px solid var(--color-line); }
.news-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.news-list__date { color: var(--color-text-sub); font-family: var(--font-num); font-size: var(--fs-sm); }
.news-list__cat {
  justify-self: start;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.9;
  white-space: nowrap;
}
.news-list__title { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .news-list__item { grid-template-columns: 9em 8em minmax(0, 1fr); }
  .news-list__title { grid-column: auto; }
}

/* ---------- CTA band ---------- */
.cta-band {
  padding-block: var(--space-8);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.cta-band__inner { display: grid; gap: var(--space-6); align-items: center; }
.cta-band__title { margin-bottom: var(--space-3); font-size: var(--fs-xl); }
.cta-band__text p { color: var(--color-text-inverse-sub); max-width: 40em; }
@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); }
}

/* =========================================================
   8. Cards / lists（下層ページでも共通）
   ========================================================= */
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow);
}
.product-card__img { aspect-ratio: 4 / 3; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-line); }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; padding: var(--space-5); }
.product-card__category { color: var(--color-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; }
.product-card__name { color: var(--color-primary); font-size: var(--fs-lg); }
.product-card__text { color: var(--color-text-sub); font-size: var(--fs-sm); }
.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}
.product-card__specs li {
  padding: 0 var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  line-height: 2;
}

/* ---------- Feature list（番号付きの特長） ---------- */
.feature-list { display: grid; gap: var(--space-5); }
.feature-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow);
}
.feature-list__num {
  color: var(--color-accent);
  font-family: var(--font-num);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
}
.feature-list__title { margin-bottom: var(--space-2); color: var(--color-primary); font-size: var(--fs-lg); }

/* ---------- Media（画像 + テキスト） ---------- */
.media { display: grid; gap: var(--space-6); align-items: center; margin-bottom: var(--space-7); }
.media__img { max-width: 520px; margin-inline: auto; }
@media (min-width: 1024px) {
  .media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
}

.point-list { display: grid; gap: var(--space-5); }
.point-grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .point-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.point-list__item { padding-left: var(--space-5); border-left: 3px solid var(--color-accent); }
.point-list__title { margin-bottom: var(--space-2); color: var(--color-primary); font-size: var(--fs-md); }

/* ---------- Data table ---------- */
.table-wrap { max-width: 100%; }
.data-table {
  border-top: 2px solid var(--color-primary);
  background: var(--color-bg);
  font-size: var(--fs-sm);
}
.data-table caption {
  padding-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: left;
}
.data-table th, .data-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}
.data-table th { color: var(--color-primary); font-weight: 700; }
.data-table tbody th { background: var(--color-bg-alt); }

/* スマートフォンでは 1 行ずつ縦に積んで横スクロールを出さない */
@media (max-width: 767px) {
  .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table tbody th { padding-block: var(--space-2); }
  .data-table td { padding-top: var(--space-3); }
  .data-table--cols thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--cols td::before {
    content: attr(data-label);
    display: block;
    color: var(--color-text-sub);
    font-size: var(--fs-xs);
    font-weight: 700;
  }
}
@media (min-width: 768px) {
  .data-table tbody th { width: 26%; }
  .data-table--cols tbody th { width: auto; }
  .data-table--cols thead th { background: var(--color-bg-alt); }
}

/* =========================================================
   9. Company page
   ========================================================= */
.message { display: grid; gap: var(--space-6); }
.message__img { max-width: 320px; margin-inline: auto; }
.message__body { display: grid; gap: var(--space-4); }
.message__heading { color: var(--color-primary); font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight); }
.message__sign { margin-top: var(--space-3); text-align: right; font-size: var(--fs-sm); }
.message__name { margin-left: var(--space-4); font-size: var(--fs-lg); font-weight: 700; }
@media (min-width: 768px) {
  .message { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
}

.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  top: var(--space-3); bottom: var(--space-3); left: 5px;
  width: 2px;
  background: var(--color-line);
}
.timeline__item {
  position: relative;
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding: 0 0 var(--space-5) var(--space-6);
}
.timeline__item::before {
  content: "";
  position: absolute;
  top: .5em; left: 0;
  width: 12px; height: 12px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg);
}
.timeline__year { color: var(--color-accent); font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; line-height: 1.6; }
@media (min-width: 768px) {
  .timeline__item { grid-template-columns: 5em minmax(0, 1fr); }
}

.access { display: grid; gap: var(--space-6); }
.access__map { border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; background: var(--color-bg); }
.access__map img { width: 100%; }
.access__info { display: grid; gap: var(--space-3); align-content: start; }
.access__name { color: var(--color-primary); font-size: var(--fs-lg); }
.access__list { display: grid; gap: var(--space-3); }
.access__list div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
.access__list dt {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 2.2;
  align-self: start;
  white-space: nowrap;
}
.access__note { color: var(--color-text-sub); font-size: var(--fs-sm); }
@media (min-width: 1024px) {
  .access { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-7); }
}

/* =========================================================
   10. Recruit page
   ========================================================= */
.job-grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.job-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
}
.job-card__dept { color: var(--color-text-sub); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; }
.job-card__name { color: var(--color-primary); font-size: var(--fs-lg); }

.steps { display: grid; gap: var(--space-4); counter-reset: step; }
.steps__item {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow);
}
.steps__num { color: var(--color-accent); font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; }
.steps__title { margin-block: var(--space-1) var(--space-2); color: var(--color-primary); font-size: var(--fs-md); }
.steps__item p:last-child { color: var(--color-text-sub); font-size: var(--fs-sm); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  .steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%; right: calc(var(--space-6) / -2 - 5px);
    width: 10px; height: 10px;
    border-top: 2px solid var(--color-accent);
    border-right: 2px solid var(--color-accent);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* =========================================================
   11. Contact form
   ========================================================= */
.notice {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-signal);
  background: var(--color-bg-alt);
  font-size: var(--fs-sm);
}
.form { display: grid; gap: var(--space-6); }
.form__row { display: grid; gap: var(--space-2); }
.form__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 700; }
.form__hint { color: var(--color-text-sub); font-size: var(--fs-sm); }
.badge {
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-text-sub);
  color: var(--color-text-inverse);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.8;
}
.badge--req { background: var(--color-error); }
.form__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #8796a5;   /* 入力欄の枠は背景と 3:1 以上 */
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: var(--fs-base);   /* 16px 未満だと iOS で拡大される */
}
.form__input::placeholder { color: #6b7885; }
.form__input:focus-visible { outline-offset: 0; border-color: var(--color-accent); }
.form__input[aria-invalid="true"] { border: 2px solid var(--color-error); background: var(--color-error-bg); }
.form__textarea { resize: vertical; min-height: 12em; }
.form__select { position: relative; }
.form__select select { appearance: none; padding-right: var(--space-7); }
.form__select::after {
  content: "";
  position: absolute;
  top: 50%; right: var(--space-4);
  width: .5em; height: .5em;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.form__error { color: var(--color-error); font-size: var(--fs-sm); font-weight: 700; }
.form__error:empty { display: none; }
.form__error:not(:empty)::before { content: "! "; }

.form__summary:empty { display: none; }
.form__summary {
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-weight: 700;
}
.form__summary:focus { outline: none; }

.form__privacy-title { font-size: var(--fs-base); }
.form__privacy {
  max-height: 10em;
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: var(--fs-sm);
}
.form__privacy ul { display: grid; gap: var(--space-2); padding-left: 1.2em; list-style: disc; }
.form__check { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.form__check input { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--color-accent); }
.form__check label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 700; cursor: pointer; }
.form__submit { margin-top: var(--space-4); }

/* ---------- Thanks ---------- */
.thanks { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.thanks__icon { width: 64px; color: var(--color-accent); }
.thanks__heading { color: var(--color-primary); font-size: var(--fs-xl); }
.thanks__demo { color: var(--color-text-sub); font-size: var(--fs-sm); }
.thanks .section-more { margin-top: var(--space-5); }

/* =========================================================
   12. Footer / page top
   ========================================================= */
.footer { background: var(--color-primary-dark); color: var(--color-text-inverse-sub); font-size: var(--fs-sm); }
.footer a { color: var(--color-text-inverse); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--color-text-inverse); }
.footer__inner { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-7); }
.footer__logo { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--color-text-inverse); font-size: var(--fs-md); font-weight: 700; }
.footer__logo svg { width: 28px; }
.footer__heading { margin-bottom: var(--space-3); color: var(--color-text-inverse); font-family: var(--font-num); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; }
.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-5); }
.footer__links a { display: inline-block; padding-block: var(--space-2); }
.footer__bottom { padding-block: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .15); }
.footer__note { margin-bottom: var(--space-2); color: var(--color-text-inverse); }
.footer__copy { font-family: var(--font-num); }
@media (min-width: 768px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .footer__links { grid-template-columns: repeat(3, auto); }
}

.pagetop {
  position: fixed;
  right: var(--space-4); bottom: var(--space-4);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow);
  transition: opacity var(--duration) var(--ease), visibility var(--duration), background-color var(--duration);
}
.pagetop:hover { background: var(--color-accent-dark); color: var(--color-text-inverse); }
.js .pagetop:not(.is-visible) { opacity: 0; visibility: hidden; }