/* ============================================================
   EVIDENTIA Corporate Website — Stylesheet
   ============================================================
   設計方針:
   - 超大型日本語タイポグラフィ、非対称構図、セクション番号ラベル、
     構造としての hairline
   - 12カラムグリッド、整然とした行揃い、ウォームオフホワイト
   - デザイントークンは :root の CSS Custom Properties で統一定義
   ============================================================ */

/* Web fonts are loaded with a <link> in the document head, not with @import.
   An @import inside a stylesheet is fetched only after this file has parsed,
   which serialises two round trips before any text can paint. The families and
   weights are unchanged: Noto Sans JP 300/400/500, Inter 300/400/500/600 and
   Crimson Pro 300 (+ italic). See src/layout.html. */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   ここで定義した値以外の色・サイズを各ページで直書きしない
   ============================================================ */
:root {

  /* === BRAND === */
  --brand:      #0A1F33;
  --brand-mid:  #1a3a55;

  /* === SURFACE === */
  --bg:         #FAFAF8;   /* warm off-white (Aから) */
  --bg-white:   #FEFDFB;
  --bg-section: #F2EFE9;   /* alternate section (Bから) */
  --bg-footer:  #EDE9E3;

  /* === TEXT === */
  --text-primary:   #0A1F33;
  --text-secondary: #445566;
  --text-muted:     #5a6b7c;

  /* === HAIRLINE (統一ルール) ===
     hairline は装飾ではなく構造として使う。
     以下2値以外の border-color を使わない。           */
  --hairline:        rgba(10,31,51,0.12);  /* 通常の仕切り */
  --hairline-strong: rgba(10,31,51,0.20);  /* 強調・accent */

  /* === FONT === */
  --font-jp:    'Noto Sans JP', sans-serif;
  --font-en:    'Inter', sans-serif;
  --font-serif: 'Crimson Pro', serif;  /* セクション番号アクセントのみ */

  /* === TYPE SCALE ===
     ページごとに勝手な級数を使わない。必ずここを参照する。 */
  --ts-hero:    clamp(30px, 5.6vw, 78px);  /* Hero H1 のみ */
  --ts-display: clamp(36px, 5vw, 64px);     /* About statement 等 */
  --ts-h1:      clamp(28px, 3.5vw, 48px);   /* Page hero */
  --ts-h2:      clamp(22px, 2.8vw, 36px);   /* Section heading */
  --ts-h3:      clamp(17px, 2vw, 22px);     /* Sub heading */
  --ts-body-lg: 17px;                        /* Hero sub, featured */
  --ts-body:    16px;                        /* Standard body */
  --ts-small:   14px;                        /* Secondary body */
  --ts-caption: 13px;                        /* Captions, notes */
  --ts-label:   11px;                        /* Section labels, meta */

  /* === SPACING SCALE === */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  80px;
  --sp-8:  96px;
  --sp-section: clamp(80px, 10vw, 120px);  /* Section 間余白 */
  --sp-inner:   clamp(48px, 6vw, 80px);    /* Section 内コンポーネント間 */
  --sp-block:   clamp(32px, 4vw, 48px);    /* Block 間 */

  /* === GRID (12カラム) === */
  --grid-cols: 12;
  --max-width:  1320px;
  --gutter:     clamp(24px, 4vw, 60px);
  --col-gap:    clamp(16px, 2vw, 24px);

  /* === TRANSITIONS === */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.18s;
  --dur-std:  0.28s;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-jp);
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--ts-body);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ── Focus ring (visible, accessible) ── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ── Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  z-index: 9999;
}
.skip-link:focus { top: 0; }

/* ============================================================
   LAYOUT — Container & Grid
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 12-column grid base */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
}

/* Editorial: 非対称 (A から受け継ぐ)
   12カラム上で cols 1-4 / 5-12 に相当 */
.grid-editorial {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--col-gap);
}

/* 対称 3カラム (B から) */
.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 100;
  background: rgba(250,250,248,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
}

.header-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo a {
  display: flex;
  align-items: center;
}

.header-logo svg {
  height: 18px;
  width: auto;
  display: block;
}

/* Desktop nav */
.header-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.header-nav a {
  font-family: var(--font-en);
  font-size: var(--ts-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-std) var(--ease);
}

.header-nav a:hover { color: var(--brand); }
.header-nav a:hover::after { transform: scaleX(1); }
.header-nav a[aria-current="page"] { color: var(--brand); }
.header-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Header utility links */
.header-util {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-util-link {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.header-util-link:hover { color: var(--brand); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--brand);
  transition: transform var(--dur-std), opacity var(--dur-std);
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 99;
  padding: 48px var(--gutter) var(--sp-7);
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 300;
  color: var(--text-primary);
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
  letter-spacing: 0.02em;
  transition: color var(--dur-fast);
}

.mobile-nav a:hover { color: var(--brand); }

.mobile-nav-footer {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  gap: 20px;
}

.mobile-nav-footer a {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0;
  border: none;
  font-size: 11px;
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.page-wrap {
  padding-top: 64px;
}

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
.section {
  padding: var(--sp-section) 0;
}

/* hairline between sections */
.section + .section {
  border-top: 1px solid var(--hairline);
}

/* alternate background sections */
.section-alt {
  background: var(--bg-section);
}

/* ── Section Label (A-style, 全ページ共通コンポーネント) ──
   英字ラベル + 通し番号 + 配置が共通型
   使い方: <div class="section-label">
             <span class="section-num">01</span>
             <span class="section-tag">About EVIDENTIA</span>
           </div>                                              */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--sp-5);
}

.section-num {
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1;
}

.section-tag {
  font-family: var(--font-en);
  font-size: var(--ts-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Section CTA link ── */
.section-cta {
  font-family: var(--font-en);
  font-size: var(--ts-small);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-4);
  transition: color var(--dur-fast) var(--ease);
}

.section-cta:hover { color: var(--brand); }
.section-cta:hover .arrow { transform: translateX(3px); }
.section-cta .arrow { transition: transform var(--dur-std) var(--ease); display: inline-block; }

/* ============================================================
   HERO (A から、強度は同等以上を保つ)
   ============================================================ */
.hero {
  padding: clamp(88px, 14vh, 160px) 0 clamp(64px, 10vh, 120px);
  position: relative;
  overflow: hidden;
}

/* hero の下にのみ hairline を引く */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--hairline);
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero-eyebrow {
  font-family: var(--font-en);
  font-size: var(--ts-label);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: clamp(28px, 5vh, 56px);
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--hairline-strong);
  flex-shrink: 0;
}

/* 超大型日本語タイポグラフィ — A の最大の資産 */
.hero-copy {
  font-family: var(--font-jp);
  font-size: var(--ts-hero);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: clamp(36px, 6vh, 64px);
  /* 日本語の意味単位で折り返す。指定した <br> 以外で行が割れないようにする */
  max-width: none;
  white-space: nowrap;
}

.hero-sub-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
}

.hero-sub {
  font-size: var(--ts-body-lg);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.9;
  border-left: 1px solid var(--hairline-strong);
  padding-left: 20px;
  max-width: 480px;
}

.hero-cta-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.hero-cta {
  font-family: var(--font-en);
  font-size: var(--ts-small);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color var(--dur-fast) var(--ease);
  min-height: 44px;
}

.hero-cta:hover { color: var(--brand); }
.hero-cta:hover .cta-arrow { transform: translateX(4px); }
.cta-arrow { transition: transform var(--dur-std) var(--ease); display: inline-block; }

/* ============================================================
   PAGE HERO (サブページ共通)
   ============================================================ */
.page-hero {
  padding: clamp(64px, 9vh, 112px) 0 clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--hairline);
}

.page-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-hero-eyebrow {
  font-family: var(--font-en);
  font-size: var(--ts-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--hairline-strong);
}

.page-hero-title {
  font-size: var(--ts-h1);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 800px;
}

/* ============================================================
   ABOUT SECTION (A editorial style on B grid)
   ============================================================ */
.about-statement {
  font-size: var(--ts-display);
  word-break: keep-all;
  overflow-wrap: normal;
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}

.about-supporting {
  font-size: var(--ts-body-lg);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.9;
  max-width: 520px;
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.product-item {
  display: grid;
  /* 12カラム上の非対称: 3 / 9 相当 */
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-inner) 0;
}

.product-item + .product-item {
  border-top: 1px solid var(--hairline);
}

.product-label-col {
  padding-top: 4px;
}

.product-num {
  font-family: var(--font-serif);
  font-size: 52px;
  font-style: italic;
  font-weight: 300;
  color: var(--hairline-strong);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.product-category {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-name {
  font-size: var(--ts-h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-2);
}

.product-desc-short {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}

.product-desc-long {
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: var(--sp-4);
  max-width: 480px;
}

.product-link {
  font-family: var(--font-en);
  font-size: var(--ts-small);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  min-height: 44px;
}

.product-link:hover { color: var(--brand); border-color: var(--brand); }

/* ============================================================
   OUR APPROACH
   ============================================================ */
.approach-list {
  display: flex;
  flex-direction: column;
}

.approach-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--hairline);
  align-items: start;
}

.approach-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.approach-num {
  font-family: var(--font-serif);
  font-size: 44px;
  font-style: italic;
  font-weight: 300;
  color: var(--hairline-strong);
  line-height: 1;
  padding-top: 4px;
}

.approach-heading {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-1);
}

.approach-sub {
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  display: block;
  margin-bottom: var(--sp-1);
  letter-spacing: 0.02em;
}

.approach-body {
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.85;
}

/* ============================================================
   NEWS (B の整然リスト + A のラベルシステム)
   ============================================================ */
.news-list {
  display: flex;
  flex-direction: column;
}

/* ── 3カラムグリッド: date / category / title ── */
.news-item {
  display: grid;
  grid-template-columns: 120px 100px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
  transition: background var(--dur-fast);
}

.news-item:last-child {
  border-bottom: 1px solid var(--hairline);
}

.news-date {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.news-category {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.news-title {
  font-size: var(--ts-small);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.65;
  color: var(--text-primary);
  transition: color var(--dur-fast);
}

.news-item:hover .news-title { color: var(--brand); }

/* ── News filter ── */
.news-filter {
  display: flex;
  gap: 4px;
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.filter-btn {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--hairline);
  padding: 6px 14px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  min-height: 36px;
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--brand);
  border-color: var(--hairline-strong);
  background: rgba(10,31,51,0.03);
}

/* ============================================================
   COMPANY PREVIEW (ホームpage)
   ============================================================ */
.company-preview {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-7);
  align-items: start;
}

.company-heading {
  font-family: var(--font-en);
  font-size: var(--ts-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.company-name-large {
  font-size: var(--ts-h3);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-1);
}

.company-location {
  font-family: var(--font-en);
  font-size: var(--ts-small);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* ============================================================
   COMPANY PAGE — PROFILE TABLE (B の整然リスト)
   ============================================================ */
.profile-table {
  display: flex;
  flex-direction: column;
  max-width: 680px;
}

.profile-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}

.profile-row:last-child { border-bottom: 1px solid var(--hairline); }

.profile-term {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.profile-value {
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.7;
}

/* Philosophy statement (Company page) */
.philosophy-statement {
  font-size: clamp(20px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

/* ============================================================
   NEWS DETAIL
   ============================================================ */
.article-header {
  padding: clamp(64px, 9vh, 112px) 0 clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--hairline);
}

.article-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.article-category {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
}

.article-date {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.article-title {
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.01em;
  max-width: 760px;
}

/* Article body — narrow column for readability */
.article-body-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.article-body {
  max-width: 640px;
  padding: clamp(40px, 6vh, 72px) 0;
}

.article-body p {
  font-size: 15px;
  font-weight: 300;
  line-height: 2.05;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}

.article-body h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: var(--sp-6) 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  width: 100%;
  transition: color var(--dur-fast);
  min-height: 44px;
}

.article-back:hover { color: var(--brand); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-7);
}

.contact-info-label {
  font-family: var(--font-en);
  font-size: var(--ts-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.contact-info-body {
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.9;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.form-field label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.form-required {
  color: var(--text-muted);
  margin-left: 4px;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-jp);
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--hairline);
  border-bottom-color: var(--hairline-strong);
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--dur-fast);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(10,31,51,0.06);
}

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

.form-privacy {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}

.form-privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast);
}
.form-privacy a:hover { color: var(--brand); }

.form-submit {
  font-family: var(--font-jp);
  font-size: var(--ts-small);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--bg);
  background: var(--brand);
  border: none;
  padding: 14px 40px;
  cursor: pointer;
  transition: background var(--dur-fast);
  min-height: 52px;
  text-align: center;
  align-self: flex-start;
}

.form-submit:hover { background: var(--brand-mid); }
.form-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.form-success {
  display: none;
  padding: 24px;
  border: 1px solid var(--hairline);
  background: var(--bg-white);
  font-size: var(--ts-small);
  color: var(--text-secondary);
  line-height: 1.7;
}

.form-success.visible { display: block; }

/* ============================================================
   PRIVACY
   ============================================================ */
.privacy-body {
  max-width: 680px;
  padding: clamp(40px, 6vh, 72px) 0;
}

.privacy-body h2 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: var(--sp-6) 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}

.privacy-body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.privacy-body p,
.privacy-body li {
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 2.0;
  margin-bottom: var(--sp-2);
}

.privacy-body ul { padding-left: 20px; list-style: disc; }
.privacy-body li { margin-bottom: var(--sp-1); }

.privacy-updated {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--hairline);
  padding: clamp(48px, 6vw, 80px) 0 var(--sp-4);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-4);
}

.footer-logo {
  margin-bottom: var(--sp-3);
}

.footer-logo svg {
  height: 20px;
  width: auto;
  display: block;
}

.footer-tagline {
  font-size: var(--ts-caption);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.8;
}

.footer-nav-heading {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list a {
  font-size: var(--ts-caption);
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  transition: color var(--dur-fast);
}

.footer-nav-list a:hover { color: var(--brand); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy {
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── Footer: system link ── */
.footer-system-link {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast);
}
.footer-system-link:hover { color: var(--brand); }

/* ============================================================
   DIVIDERS
   ============================================================ */
/* hairline full-width */
hr.divider {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: var(--sp-block) 0;
}

/* hairline with label */
.divider-labeled {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: var(--sp-block) 0;
}

.divider-labeled::before,
.divider-labeled::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.divider-label-text {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-visible {
  animation: fadeUp 0.65s var(--ease) forwards;
}

.reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal:nth-child(4) { animation-delay: 0.24s; }

/* prefers-reduced-motion: 最終状態で静止表示 */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-en { font-family: var(--font-en); }
.font-serif { font-family: var(--font-serif); }

/* ============================================================
   RESPONSIVE — Mobile First
   Breakpoints: 1280 / 1024 / 768 / 480
   ============================================================ */

/* 1280px以下 */
@media (max-width: 1280px) {
  .hero-copy { letter-spacing: -0.005em; }
}

/* 1024px以下 */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > *:first-child { grid-column: 1 / -1; }

  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* 768px以下 (Tablet → Mobile) */
@media (max-width: 768px) {
  /* Header */
  .header-nav { display: none; }
  .nav-toggle { display: flex; }

  /* Hero */
  .hero-sub-wrap { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero-cta-wrap { justify-content: flex-start; }

  /* Editorial grid → single col */
  .grid-editorial { grid-template-columns: 1fr; }
  .grid-editorial > *:first-child { display: none; } /* 空のオフセット列を非表示 */

  /* Products */
  .product-item { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Approach */
  .approach-item { grid-template-columns: 48px 1fr; gap: var(--sp-3); }
  .approach-num { font-size: 32px; }

  /* News */
  .news-item { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .news-title { grid-column: 1 / -1; padding-top: 4px; }

  /* Company preview */
  .company-preview { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* Company profile */
  .profile-row { grid-template-columns: 120px 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-bottom { flex-direction: column; gap: var(--sp-1); text-align: center; }
}

/* 480px以下 (Mobile) */
@media (max-width: 480px) {
  :root {
    --sp-section: clamp(60px, 12vw, 80px);
  }

  /* News: 全て縦積み */
  .news-item { grid-template-columns: 1fr; }
  .news-title { grid-column: 1; }

  /* Profile table: 縦積み */
  .profile-row { grid-template-columns: 1fr; gap: 4px; }

  /* Article meta: 縦積み */
  .article-meta { flex-direction: column; gap: 8px; }

  /* Footer */
  .footer-copy:last-child { display: none; }
}

/* Desktop: 1440px 最適化 */
@media (min-width: 1280px) {
  .hero-copy { letter-spacing: -0.015em; }
}

/* ============================================================
   SESSION 7 — Philosophy / NND / Closing 追加要素
   CSS変数・グリッド・カラーは既存トークン流用のみ
   ============================================================ */

/* Hero — 英語補助タグ（eyebrow 直下の小さなラベル） */
.hero-en-tag {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--sp-5);
}

/* About — 旧コピーを引き受ける補助行 */
.about-tagline {
  font-family: var(--font-jp);
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}

/* Philosophy — セクション導入文 */
.philosophy-intro {
  font-size: var(--ts-body-lg);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.9;
  max-width: 640px;
  margin-bottom: var(--sp-6);
}

/* No New Destination — Statement セクション */
.nnd-statement {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}

.nnd-en-label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--sp-3);
}

.nnd-body {
  font-size: var(--ts-body-lg);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.9;
  max-width: 640px;
}

/* Closing — Hero と呼応する大型タイポ */
.closing-section {
  padding: var(--sp-section) 0;
  border-top: 1px solid var(--hairline);
}

  /* keep-all: 日本語の語中改行を防ぐ */
.closing-main {
  font-family: var(--font-jp);
  font-size: clamp(26px, 3.4vw, 46px);
  word-break: keep-all;
  overflow-wrap: normal;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
  max-width: 800px;
}

.closing-sub {
  font-size: var(--ts-body-lg);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.9;
  max-width: 560px;
}

/* PC改行 / モバイル非表示 */
.pc-br { display: block; }
.sp-br { display: none; }
@media (max-width: 768px) {
  .pc-br { display: none; }
  .nnd-statement { font-size: clamp(24px, 6vw, 36px); }
  .closing-main  { font-size: clamp(22px, 5.5vw, 36px); }
}

/* ============================================================
   SESSION 9 — SVG 図解コンテナ
   概念図・ミニ図解・ワークフロー・プロダクトフロー用レイアウト
   ============================================================ */

/* ── CORE IDEA: 大型概念図コンテナ ── */
.concept-diagram-wrap {
  margin-top: var(--sp-6);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-white);
  overflow: hidden;
  padding: var(--sp-6) var(--sp-5);
}

.concept-diagram-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── PRODUCT PHILOSOPHY: 3原則 + ミニ図解 ── */
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--sp-inner);
  border-top: 1px solid var(--hairline);
}

.philosophy-principle {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.philosophy-principle:last-child {
  border-right: none;
}

.principle-diagram {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}

.principle-num {
  font-family: var(--font-serif);
  font-size: 11px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  line-height: 1;
}

.principle-title {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.3;
}

.principle-body {
  font-size: var(--ts-small);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.85;
}

/* ── WORKFLOW: 抽象ワークフローグラフィック ── */
.workflow-diagram-wrap {
  margin-top: var(--sp-6);
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-5) 0;
}

.workflow-diagram-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── PRODUCTS: 行動フロー図 ── */
.product-flow-wrap {
  margin: var(--sp-5) 0 var(--sp-6);
}

.product-flow-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
}

/* ── CLOSING / CONTACT ── */
.closing-contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
  margin-top: var(--sp-inner);
}

.contact-cta-block {
  padding: var(--sp-6);
  border: 1px solid var(--hairline);
  background: var(--bg-white);
}

.contact-cta-label {
  font-family: var(--font-en);
  font-size: var(--ts-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--sp-3);
}

.contact-cta-heading {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}

.contact-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: var(--ts-small);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--bg);
  background: var(--brand);
  padding: 12px 28px;
  min-height: 48px;
  transition: background var(--dur-fast) var(--ease);
}

.contact-cta-link:hover {
  background: var(--brand-mid);
}

/* Responsive adjustments for new sections */
@media (max-width: 820px) {
  .philosophy-grid {
    grid-template-columns: 1fr;
  }
  .philosophy-principle {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: var(--sp-5) 0;
  }
  .philosophy-principle:last-child {
    border-bottom: none;
  }
  .closing-contact-wrap {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}


@media (max-width: 900px) {
  .hero-copy { white-space: normal; word-break: keep-all; overflow-wrap: normal; }
}

.text-link {
  color: var(--brand);
  border-bottom: 1px solid rgba(10,31,51,0.25);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}
.text-link:hover { border-color: var(--brand); }

/* ============================================================
   DIAGRAM: desktop / mobile 切り替え
   ============================================================ */
svg.dg-mobile { display: none !important; }
svg.dg-desktop { display: block; }

@media (max-width: 820px) {
  svg.dg-desktop { display: none !important; }
  svg.dg-mobile { display: block !important; }
}

/* Tablet: モバイル図を中央に置き、幅を持たせる */
@media (min-width: 768px) and (max-width: 820px) {
  svg.dg-mobile { max-width: 520px; margin-left: auto; margin-right: auto; }
  .principle-diagram { max-width: 320px; }
  .product-flow-wrap svg.dg-mobile { max-width: 460px; margin-left: 0; }
}

/* Laptop/tablet landscape: keep the approved three-column composition while
   preserving the SVG diagrams at their authored size. The default 48px side
   padding makes a 9px diagram label render at 7.5px around 1024px. */
@media (min-width: 821px) and (max-width: 1100px) {
  .concept-diagram-wrap {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .philosophy-principle {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
}

/* ============================================================
   MOBILE 最適化 (390px 主基準 / 430px 耐性)
   ============================================================ */
@media (max-width: 767px) {
  /* --- 余白: ブランドは維持しつつスクロール量を抑える --- */
  .section { padding-top: 76px; padding-bottom: 76px; }
  .hero { padding-top: 92px; padding-bottom: 72px; }

  /* --- 01 HERO: 意図的な改行をモバイル用に置き換え --- */
  .hero-copy {
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 1.34;
    letter-spacing: 0;
  }
  .hero-copy .pc-br { display: none; }
  .sp-br { display: block; }
  .hero-sub-wrap { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero-sub { font-size: 14px; line-height: 1.85; padding-left: 16px; max-width: none; }
  .hero-cta-wrap { justify-content: flex-start; }

  /* --- 見出し全般 --- */
  .about-statement { font-size: clamp(24px, 6.6vw, 31px); line-height: 1.4; }
  .nnd-statement   { font-size: clamp(24px, 6.6vw, 31px); line-height: 1.4; word-break: keep-all; overflow-wrap: normal; }
  .closing-main    { font-size: clamp(23px, 6.2vw, 29px); line-height: 1.45; }
  .about-supporting { font-size: 14px; line-height: 1.85; }

  /* --- 02 CORE IDEA: 図に十分な面積を与える --- */
  .concept-diagram-wrap {
    margin-top: 40px;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    border-left: none;
    border-right: none;
    padding: 20px 16px;
  }

  /* --- 03 PRODUCT PHILOSOPHY: 縦配置 --- */
  .philosophy-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .philosophy-principle {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: 32px 0;
    gap: 20px;
  }
  .philosophy-principle:last-child { border-bottom: none; }
  .principle-diagram { height: auto; width: 100%; max-width: 340px; }
  .principle-title { font-size: 16px; }
  .principle-body { font-size: 13.5px; line-height: 1.8; }

  /* --- 04 WORKFLOW PRINCIPLE --- */
  .workflow-diagram-wrap { margin-top: 40px; }

  /* --- 05 PRODUCTS --- */
  .product-item { grid-template-columns: 1fr; gap: 20px; }
  .product-label-col { display: flex; align-items: baseline; gap: 16px; }
  .product-num { font-size: 30px; }
  .product-name { font-size: 15px; }
  .product-desc-short { font-size: clamp(20px, 5.4vw, 25px); line-height: 1.5; }
  .product-desc-long { font-size: 13.5px; line-height: 1.85; }
  .product-flow-wrap { margin: 28px 0 32px; }

  /* --- 06 NEWS --- */
  .news-item { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .news-date { font-size: 11.5px; }
  .news-title { font-size: 14px; line-height: 1.7; }

  /* --- 07 CLOSING --- */
  .closing-contact-wrap { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .contact-cta-block { padding: 28px 22px; }
  .contact-cta-heading { font-size: 16px; line-height: 1.7; }

  /* --- Company Profile: 横表 → 縦カード --- */
  .profile-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .profile-term { font-size: 11px; letter-spacing: 0.1em; color: var(--text-muted); }
  .profile-value { font-size: 14.5px; line-height: 1.75; }

  /* --- ページ見出し --- */
  .page-hero { padding-top: 88px; padding-bottom: 40px; }
}

/* 430px: 破綻防止の微調整 */
@media (min-width: 400px) and (max-width: 767px) {
  .hero-copy { font-size: 36px; }
  .about-statement, .nnd-statement { font-size: 29px; }
}

/* ============================================================
   TAP TARGET: 全リンク・ボタンの最小タップ領域を44pxに揃える
   ============================================================ */
.header-nav a,
.footer-nav-list a,
.section-cta,
.product-link,
.text-link,
.news-more,
.filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.header-logo a,
.footer-logo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.news-title {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer-nav-list li { line-height: 1.1; }

.nav-toggle {
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

.mobile-nav a { min-height: 56px; display: flex; align-items: center; }

/* ============================================================
   PRODUCTION ADDITIONS
   ============================================================
   承認済みデザインに対する追加のみ。既存セレクタの値は変更しない。
   - [hidden] の徹底（.news-item / .contact-form は display 指定を持つため）
   - リンクしないニュース見出し（本文が存在しない記事）のホバー抑止
   - フォームのエラー表示とハニーポット
   ============================================================ */

[hidden] { display: none !important; }

/* 本文が存在しないお知らせは <span class="news-title"> で出力される。
   リンクではないので、ホバーでリンク色に変えない。 */
.news-item:hover span.news-title { color: var(--text-primary); }
span.news-title { cursor: default; }

/* フォーム: フィールド単位のエラー。aria-describedby で入力欄に関連付ける。 */
.field-error {
  font-family: var(--font-jp);
  font-size: var(--ts-caption);
  line-height: 1.6;
  color: #9b2226;
  margin-top: 2px;
}

.contact-form input[aria-invalid='true'],
.contact-form select[aria-invalid='true'],
.contact-form textarea[aria-invalid='true'] {
  border-color: #9b2226;
}

/* フォーム全体のエラー。送信失敗時に成功表示の代わりに出る。 */
.form-error {
  padding: 16px 20px;
  border: 1px solid #9b2226;
  background: var(--bg-white);
  font-family: var(--font-jp);
  font-size: var(--ts-small);
  line-height: 1.8;
  color: #9b2226;
}

.form-submit[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.form-success:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ハニーポット: 人にも支援技術にも見せない。表示のためだけの指定で、
   display:none は一部のボットに無視されるためオフスクリーンに逃がす。 */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}