/* フォントはHTML側の<link>で読み込み（@importより高速なため） */

/* =========================================
   デザイントークン
   白基調・文字と余白で見せる。装飾は「細い線・数字・小さなラベル」だけ
   ========================================= */
:root {
  --green: #00C362;          /* コーポレートグリーン（変更禁止） */
  --green-dark: #00994D;     /* 文字として使う緑（コントラスト確保） */
  --orange: #ff6b35;         /* 差し色。使う場所は1〜2箇所まで（CTAホバー等） */
  --ink: #0f172a;            /* 本文黒 */
  --ink-2: #475569;          /* サブテキスト */
  --ink-3: #94a3b8;          /* キャプション・英字ラベル */
  --line: #e2e8f0;           /* 罫線 */
  --paper: #ffffff;
  --paper-2: #f8fafc;        /* セクション交互背景に薄く使う程度 */
  --paper-green: #ecf8f1;    /* 緑の薄い色面（ヒーロー右・アイコン下地） */
  --green-deep: #0a4a31;     /* 深緑の帯（VISION・お問い合わせ）。白 → 薄緑 → 深緑 の3段階の最後 */
  --ink-band: var(--green-deep); /* 旧名。services.css からも参照 */
  /* ロゴ由来の波モチーフ（線画・緑）。背景としてごく薄く敷く */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 320' fill='none' stroke='%2300C362' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M-20 60c90-40 170 40 260 0s170-40 260 0 170 40 260 0 120-30 160-10'/%3E%3Cpath d='M-20 100c90-40 170 40 260 0s170-40 260 0 170 40 260 0 120-30 160-10'/%3E%3Cpath d='M-20 140c90-40 170 40 260 0s170-40 260 0 170 40 260 0 120-30 160-10'/%3E%3Cpath d='M-20 180c90-40 170 40 260 0s170-40 260 0 170 40 260 0 120-30 160-10'/%3E%3Cpath d='M-20 220c90-40 170 40 260 0s170-40 260 0 170 40 260 0 120-30 160-10'/%3E%3Cpath d='M-20 260c90-40 170 40 260 0s170-40 260 0 170 40 260 0 120-30 160-10'/%3E%3C/svg%3E");
  --font-en: 'Outfit', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --radius: 4px;             /* 角丸はこれ1種類。ボタンも同じ */
  --max: 1280px;             /* コンテンツ幅（大画面で左右が余りすぎないよう広め） */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 32px; --sp-4: 64px; --sp-5: 120px; /* 余白は5段階だけ */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* PCでは本文が小さく感じるため、ベースを1px上げる（rem基準なので全体が連動） */
@media (min-width: 900px) {
  html { font-size: 17px; }
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 1rem;
  line-height: 1.9;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* =========================================
   ヘッダー（白背景・下に1px罫線）
   ========================================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* スクロール時（main.js が付け外し）。差はほぼ出さない */
header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.logo-text {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.logo-text span {
  color: var(--green-dark);
}

nav ul {
  display: flex;
  list-style: none;
  gap: var(--sp-3);
}

nav a {
  font-family: var(--font-en);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  /* 「WHAT YOU CAN DO」のような複数語の項目が途中で折り返さないように */
  white-space: nowrap;
}

/* ハンバーガーボタンはスマホ幅（640px以下）でだけ表示 */
.nav-toggle {
  display: none;
}

nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--green);
}

/* =========================================
   共通レイアウト
   ========================================= */
.section {
  padding: var(--sp-5) 5%;
  /* 固定ヘッダーの高さぶん、アンカージャンプ位置を下げる */
  scroll-margin-top: 64px;
}

/* 各セクションの中身は最大幅で中央寄せ */
.section > * {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.section-header {
  margin-bottom: var(--sp-4);
}

/* 見出しの上に短い緑の罫線（セクションの目印） */
.section-header::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--green);
  margin-bottom: var(--sp-2);
}

/* 英字ラベル（MISSION / SERVICES 等） */
.section-tag {
  font-family: var(--font-en);
  color: var(--green-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  display: block;
  margin-bottom: var(--sp-1);
}

.section-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* =========================================
   ボタン（影なし・移動なし・色の transition のみ）
   ========================================= */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-jp);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background-color: var(--green);
  border-color: var(--green);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-secondary:hover {
  background-color: var(--ink);
  color: #fff;
}

.btn-container {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* =========================================
   ヒーロー
   ========================================= */
.hero {
  /* 画面高いっぱいまでは伸ばしすぎない */
  min-height: min(100vh, 820px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 44%);
  align-items: stretch;
  gap: var(--sp-4);
  /* 固定ヘッダーぶん上を空ける。左は 5% か、コンテンツ幅 --max に収まる余白の広い方。右は色面を端まで伸ばすので 0 */
  padding: 64px 0 0 max(5%, calc((100% - var(--max)) / 2));
}

.hero-content {
  align-self: center;
  padding: var(--sp-4) 0;
}

.hero-tag {
  font-family: var(--font-en);
  color: var(--ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  margin-bottom: var(--sp-2);
}

.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-3);
}

/* 2行目「最新のAI」は太字のまま（蛍光ペンは廃止） */
.hero h1 .marker-text {
  font-weight: 700;
}

/* 3行目は緑文字 */
.hero h1 .highlight-text {
  color: var(--green-dark);
}

.hero-content > p {
  color: var(--ink-2);
  max-width: 40em;
  margin-bottom: var(--sp-3);
}

/* 控えめな注釈（線1本＋小さいラベル） */
.hero-notes {
  list-style: none;
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.hero-notes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
}

.hero-notes .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--green-dark);
}

.hero-note-en {
  display: block;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  line-height: 1.5;
}

.hero-note-jp {
  display: block;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* 右側：緑の薄い色面を画面右端まで伸ばし、波の線画の上にロゴを大きく置く */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper-green);
  overflow: hidden;
  /* ロゴは上寄せ。下 34% は波モチーフ専用の帯にして、ロゴと絶対に重ねない */
  padding-bottom: 34%;
}

.hero-visual::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -4%;
  height: 30%;
  background: var(--wave) center top / 120% auto no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.hero-visual img {
  position: relative;
  width: min(64%, 400px);
  height: auto;
}

/* 色面の左下に、控えめな英字キャプション */
.hero-visual::after {
  content: 'Niigata, Japan';
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
}

/* =========================================
   理念（MISSION / VALUE / VISION）
   左に細い列（番号・英字・日本語ラベル）、右に本文。ブロック間は罫線
   ========================================= */
/* 01 → 02 → 03 を色の濃さで「いま → 日々 → 未来」の流れとして見せる
   01 白（罫線）→ 02 薄緑 → 03 濃紺。ブロック同士は短い縦線でつなぐ */
.mvv-vertical-container {
  display: flex;
  flex-direction: column;
}

.mvv-block {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
}

/* ブロック間のつなぎ（縦の短い線） */
.mvv-block + .mvv-block {
  margin-top: var(--sp-4);
}

/* 線は「前のブロックの下」から生やす（03 は overflow:hidden なので上からは出せない） */
.mvv-block:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--sp-4) + 18px); /* 番号の中心あたり */
  bottom: calc(-1 * var(--sp-4));
  height: var(--sp-4);
  width: 1px;
  background: var(--green);
}

/* 01 MISSION：白地に罫線 */
.mission-block {
  border: 1px solid var(--line);
}

/* 02 VALUE：薄緑 */
.value-block {
  background-color: var(--paper-green);
}

.value-block .mvv-num-badge {
  color: var(--green-dark);
}

.mvv-block-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 番号は大きく薄く。視線のアンカーにする */
.mvv-num-badge {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  color: var(--green);
  margin-bottom: var(--sp-1);
}

.mvv-label-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.mvv-label-jp {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}

.mvv-block-body {
  max-width: 40em;
}

.mvv-block-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: var(--sp-2);
}

/* VISION の強調は緑文字のみ（蛍光ペンは廃止） */
.vision-accent {
  color: var(--green-dark);
}

.mvv-block-body p {
  color: var(--ink-2);
}

/* VISION だけ濃紺の帯にして、理念の締めとして強く見せる */
.vision-block {
  background-color: var(--ink-band);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* 帯の右下に波モチーフ */
.vision-block::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: 60%;
  height: 60%;
  background: var(--wave) right bottom / 100% auto no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

.vision-block > * {
  position: relative;
  z-index: 1;
}

.vision-block .mvv-num-badge {
  color: #6EE7A8;
}

.vision-block .mvv-label-jp,
.vision-block .mvv-block-body h3,
.vision-block .value-vertical-item h4 {
  color: #fff;
}

.vision-block .mvv-label-en,
.vision-block .value-vertical-item h4 .val-en {
  color: rgba(255, 255, 255, 0.55);
}

.vision-block .mvv-block-body p {
  color: rgba(255, 255, 255, 0.78);
}

.vision-block .value-vertical-item p strong {
  color: #fff;
}

.vision-block .vision-accent {
  color: #6EE7A8; /* 深緑地でも読める明るい緑 */
}

.vision-lead {
  margin-bottom: var(--sp-2);
}

/* 下位項目（見出し＋本文の素朴なリスト） */
.value-vertical-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.value-vertical-item h4 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-1);
}

/* 英字キャプション：バッジではなく、見出しの下に小さく */
.value-vertical-item h4 .val-en {
  order: 1;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 2px;
}

.value-vertical-item p strong {
  color: var(--ink);
  font-weight: 700;
}

/* =========================================
   事業内容（3列グリッド・枠なし・上端の罫線のみ）
   ========================================= */
/* 事業内容は薄いグレー地にして、白のセクションとリズムをつける */
#services {
  background-color: var(--paper-2);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4) var(--sp-3);
}

.service-item {
  position: relative;
  border-top: 1px solid var(--ink);
  padding-top: var(--sp-3);
  display: flex;
  flex-direction: column;
}

/* 番号は右上に小さく */
.service-num {
  position: absolute;
  top: var(--sp-3);
  right: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* アイコンは薄緑の正方形の上に。ホバーで緑地に白のアイコン */
.service-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background-color: var(--paper-green);
  color: var(--green-dark);
  margin-bottom: var(--sp-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.service-icon .icon {
  width: 26px;
  height: 26px;
}

.service-item:hover .service-icon {
  background-color: var(--green);
  color: #fff;
}

.service-item h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: var(--sp-1);
}

.service-item p {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin-bottom: var(--sp-2);
  flex: 1;
}

.service-note {
  display: block;
  margin-top: var(--sp-1);
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* 対応例（小さめの箇条書き・装飾なし） */
.service-examples {
  margin-bottom: var(--sp-2);
  font-size: 0.9rem;
  color: var(--ink-2);
}

.service-examples-label {
  display: block;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.service-examples ul {
  list-style: none;
}

.service-examples li {
  position: relative;
  padding-left: 1em;
  line-height: 1.7;
  margin-bottom: 4px;
}

/* 行頭の小さな点（記号「・」の代わり） */
.service-examples li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}

/* 実績を示す小さな緑ラベル */
.example-tag {
  display: inline-block;
  font-family: var(--font-en), var(--font-jp);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--green-dark);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0 5px;
  line-height: 1.5;
  margin-right: 6px;
  vertical-align: 1px;
}

/* 「詳細・料金を見る」は文字リンク＋→ */
.service-link {
  align-self: flex-start;
  color: var(--green-dark);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.service-link:hover {
  border-bottom-color: var(--green-dark);
}

/* 見出しは文節で折り返す（「コンサルティン／グ」のような1文字落ちを防ぐ） */
.service-item h3 {
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}

/* グリッド下の控えめな案内リンク */
.services-more {
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-2);
}

.services-more a {
  white-space: nowrap;
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.services-more a:hover {
  border-bottom-color: var(--green-dark);
}

/* =========================================
   会社概要（素の定義表）
   ========================================= */
.company-container {
  max-width: 1080px; /* 2カラム化（写真300px＋表）に合わせて拡大。旧800px */
  margin: 0 auto;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
}

.info-table tr {
  border-bottom: 1px solid var(--line);
}

.info-table th,
.info-table td {
  padding: var(--sp-2) 0;
  text-align: left;
  vertical-align: top;
}

.info-table th {
  width: 160px;
  font-family: var(--font-en), var(--font-jp);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-right: var(--sp-2);
  padding-top: calc(var(--sp-2) + 3px);
}

.info-table td {
  color: var(--ink);
}

/* 主な事業内容の各行。折り返し2行目が番号の下に潜らないよう、ぶら下げインデントにする */
.info-table .biz-item {
  display: block;
  padding-left: 1.4em;
  text-indent: -1.4em;
}

/* 代表プロフィール（会社概要の左カラム・2026-08-25 写真を大きく独立させた） */
.company-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.company-rep {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rep-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 691 / 800;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.rep-role {
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.rep-name {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 4px;
}

.rep-kana {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 0.8em;
  letter-spacing: 0.06em;
}

.rep-bio {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.9;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .company-container {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .rep-photo {
    width: min(260px, 70vw);
  }
}

.founder-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease;
}

.founder-link:hover {
  border-bottom-color: var(--ink);
}

.founder-link .link-icon {
  font-size: 0.8em;
  color: var(--ink-3);
}

/* =========================================
   お問い合わせ（中央寄せ・箱なし・背景だけ薄く）
   ========================================= */
/* 濃紺の帯で締める。波モチーフを左右に薄く */
#contact {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-band);
  color: #fff;
  text-align: center;
}

#contact::before,
#contact::after {
  content: '';
  position: absolute;
  bottom: -20%;
  width: 55%;
  height: 90%;
  background: var(--wave) center / 100% auto no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

#contact::before { left: -18%; }
#contact::after  { right: -18%; transform: scaleX(-1); }

#contact > * {
  position: relative;
  z-index: 1;
}

#contact .section-header {
  margin-bottom: var(--sp-3);
}

/* 中央寄せなので緑の罫線も中央に */
#contact .section-header::before {
  margin-left: auto;
  margin-right: auto;
}

#contact .section-tag {
  color: #6EE7A8;
}

.contact-lead {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-3);
}

/* =========================================
   フッター（上に罫線。地味でよい）
   ========================================= */
footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-4) 5% var(--sp-3);
}

.footer-content {
  max-width: var(--max);
  margin: 0 auto var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.footer-tagline {
  color: var(--ink-2);
  font-size: 0.9rem;
}

.footer-copyright {
  max-width: var(--max);
  margin: 0 auto;
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* =========================================
   スクロール表示（main.js が .active を付ける）
   初期状態でも見えるようにし、.active が付いた瞬間に短くフェードするだけ
   ========================================= */
.reveal {
  opacity: 1;
}

.reveal.active {
  animation: revealFade 0.6s ease both;
}

@keyframes revealFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================
   レスポンシブ
   ========================================= */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
    gap: var(--sp-3);
  }
  .hero-visual img {
    width: min(70%, 300px);
  }
  .mvv-num-badge {
    font-size: 2.4rem;
  }
  .mvv-block {
    padding: var(--sp-3);
  }
  .mvv-block:not(:last-child)::after {
    left: calc(var(--sp-3) + 16px);
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mvv-block {
    grid-template-columns: 180px 1fr;
    gap: var(--sp-3);
  }
}

@media (max-width: 768px) {
  header {
    height: 56px;
    padding: 0 4%;
  }
  .logo-text {
    font-size: 0.95rem;
  }
  nav ul {
    gap: var(--sp-2);
  }
  nav a {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
  .section {
    padding: var(--sp-4) 5%;
    scroll-margin-top: 56px;
  }
  .section-header {
    margin-bottom: var(--sp-3);
  }
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 56px 0 0;
    gap: 0;
  }
  .hero-content {
    padding: var(--sp-3) 5% var(--sp-4);
  }
  /* 緑の色面は上に。高さを抑えてロゴを中央に */
  .hero-visual {
    order: -1;
    padding: var(--sp-3) 0 96px;
  }
  /* 波は下端に揃えて必ず数本入るように。キャプションは帯の外（左上）へ */
  .hero-visual::before {
    bottom: 0;
    height: 110px;
    background: var(--wave) center bottom / 130% auto no-repeat;
  }
  .hero-visual img {
    width: 150px;
  }
  .hero-visual::after {
    left: 5%;
    top: var(--sp-2);
    bottom: auto;
  }
  .mvv-num-badge {
    font-size: 2rem;
  }
  .service-num {
    top: var(--sp-3);
  }
  .hero-notes {
    gap: var(--sp-2);
    flex-direction: column;
  }
  .mvv-block {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
  }
  .mvv-block + .mvv-block {
    margin-top: var(--sp-3);
  }
  .mvv-block:not(:last-child)::after {
    left: calc(var(--sp-2) + 14px);
    bottom: calc(-1 * var(--sp-3));
    height: var(--sp-3);
  }
  .mvv-block-header {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-2);
  }
  .mvv-label-jp {
    margin-top: 0;
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .info-table th,
  .info-table td {
    display: block;
    width: 100%;
    padding: 0;
  }
  .info-table th {
    padding-top: var(--sp-2);
  }
  .info-table td {
    padding-bottom: var(--sp-2);
  }
  /* スマホでは写真・プロフィールの直下に区切り線が密集して見えるので、表の上端の線を消して間隔を空ける */
  .info-table {
    border-top: none;
    margin-top: var(--sp-2);
  }
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================
   スマホのナビ（ハンバーガーメニュー・2026-08-26 追加）
   ナビ5項目が640px以下で収まらなくなったため、開閉式に切り替える。
   services.html のヘッダー（戻るボタンだけの nav）には影響しないよう
   .global-nav / .nav-toggle に限定して指定する。
   ========================================= */
@media (max-width: 640px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  /* 開いている間は3本線を×印に変形 */
  header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .global-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  header.nav-open .global-nav {
    display: block;
  }
  .global-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 6px 4% 10px;
  }
  .global-nav a {
    display: block;
    padding: 12px 0;
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  /* ナビがハンバーガー化して余白ができたので、ヘッダーの社名ロゴはスマホでも表示する */
  footer .logo-text {
    font-size: 0.9rem;
  }
  .btn {
    width: 100%;
    text-align: center;
  }
  /* 「公共・法人・個人へ。」が1行に収まる大きさに */
  .hero h1 {
    font-size: 2rem;
  }
  /* 強制改行をやめて自然に折り返す */
  .contact-lead br {
    display: none;
  }
}

/* 大画面：文字とコンテンツ幅を一段大きくして、左右の余白が目立たないようにする */
@media (min-width: 1600px) {
  :root {
    --max: 1400px;
  }
  html {
    font-size: 17px;
  }
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal.active {
    animation: none;
  }
  * {
    transition: none !important;
  }
}

/* ---------- AIでできること（index #can-do） ---------- */
/* 「AIで何ができるか分からない」への答え。カードは使わず、罫線＋番号で既存の作法に揃える */
.cando-lead {
  max-width: 68ch;
  margin-top: var(--sp-2);
  color: var(--ink-2);
  line-height: 1.95;
  font-size: 0.9375rem;
}
.cando-lead strong { color: var(--ink); font-weight: 700; }

.cando-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.cando-item {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-2);
}
.cando-num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--green-dark);
}
.cando-item h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 6px 0 8px;
}
.cando-item p {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.85;
}

@media (max-width: 900px) {
  .cando-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cando-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
}