@charset "UTF-8";

/* =========================================================
   トリプルナイン コーポレートサイト
   共通スタイルシート
   ========================================================= */

:root {
  --navy: #0a2438;
  --navy-deep: #061826;
  --accent: #17509e;
  --accent-bright: #5fa8f2;
  --accent-dark: #123f7d;
  --ink: #1c2530;
  --ink-mute: #5b6675;
  --line: #e2e7ec;
  --bg: #ffffff;
  --bg-soft: #f4f7f9;
  --radius: 8px;
  --wrap: 1120px;
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono",
    "Courier New", monospace;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--accent-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  line-height: 1.45;
  margin: 0;
  font-weight: 700;
}

p {
  margin: 0 0 1.2em;
}

p:last-child {
  margin-bottom: 0;
}

.container {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* 英字ラベル（モノスペース） */
.mono {
  font-family: var(--mono);
  letter-spacing: 0.08em;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 2026-08-29：ヘッダーの高さを約7割に。96px → 66px。 */
  min-height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.brand:hover {
  text-decoration: none;
}

.brand-logo {
  width: auto;
  /* 2026-08-29：ヘッダーを低くしたのに合わせて 60px → 42px。
     ロゴ全体が index.html へのリンク（.brand）です。 */
  height: 42px;
}

/* 2026-08-29：メニューの開閉ボタン。文字の「メニュー」から三本線アイコンに変更しました。
   開くと上下の線が回転して×になります（transform だけのアニメーションなので軽いです）。 */
.nav-toggle {
  /* 2026-08-30：PC幅でも常に出します（横並びメニューを廃止したため）。 */
  display: block;
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.nav-toggle:hover {
  background: var(--bg-soft);
  border-color: #c9d3de;
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
  margin: 0 auto;
}

.nav-toggle-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.6px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.26s ease, opacity 0.18s ease;
}

.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 6.2px; }
.nav-toggle-bars i:nth-child(3) { top: 12.4px; }

/* 開いているときは×に。中央の線を消し、上下を中央へ寄せて45度ずつ回します。 */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) {
  transform: translateY(6.2px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) {
  transform: translateY(-6.2px) rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  /* 2026-08-29：上下の余白と文字を少し詰めています（10px → 7px、14.5px → 14px）。
     「お問い合わせ」ボタン（.nav-cta）もこの余白で高さが決まります。 */
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink);
}

.site-nav a:hover {
  background: var(--bg-soft);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--navy);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* 2026-08-29：「お問い合わせ」ボタンは <nav> の外に出しました。
   ドロワーを閉じているときも常に見えるようにするためです（見た目は従来と同じ）。 */
.header-cta {
  flex: none;
  margin-left: 8px;
  padding: 7px 14px;
  border-radius: var(--radius);
  background: var(--navy);
  font-size: 14px;
  color: #fff;
}

.header-cta:hover {
  background: var(--navy-deep);
  color: #fff;
  text-decoration: none;
}

/* ドロワーでだけ出す項目（SDGs・パートナー募集・個人情報保護方針・利用規約）は
   広い画面では隠しておきます。 */
.nav-extra {
  display: none;
}

/* 2026-08-29：トップページはヘッダー＋ヒーロー＋コピーライトだけなので、
   画面が縦に長いとフッターの下に白い余白ができてしまいます。
   ページ全体を縦のフレックスにして、ヒーローで余った高さを吸収し、
   コピーライトが常に画面下端に来るようにしています（body.page-home＝index.html のみ）。
   ヒーローを grid ＋ align-content: center にしているのは、余白が上下均等に付くようにするためです。 */
.page-home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-home main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.page-home .hero {
  display: grid;
  /* 2026-08-29：中央寄せ（center）だと画面が縦に長いときにヘッダー直下の余白が
     46px → 97px に広がってしまい、「上を詰めたい」というご指示と逆になるため、
     内容は上に置いたままにして、余った高さは下（コピーライトとの間）に付けます。 */
  align-content: start;
  flex: 1 0 auto;
}

.page-home .site-footer {
  flex: none;
}

/* ---------- ヒーロー ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(95, 168, 242, 0.18), transparent 62%),
    linear-gradient(165deg, var(--navy-deep) 10%, var(--navy) 60%, #0e3d55 100%);
  color: #fff;
  /* 2026-08-29：ヘッダー直下の余白が広すぎたので、上を半分に詰めました（92px → 46px）。
     下はフッターとの間隔を見て 88px → 64px に少しだけ詰めています。 */
  padding: 46px 0 64px;
}

/* 背景の方眼グリッド */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 26% 34%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse at 26% 34%, #000 20%, transparent 78%);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  /* 2026-08-29：見出しの2行目「AIテックで世の中を変える。」を46pxのまま1行に収めるため、
     左（本文）を 1.08fr → 1.25fr に広げています（必要602px／従来の枠575px→665px）。
     右のターミナル風の飾りはそのぶん狭くなります（489px → 399px）。 */
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: center;
}

/* 2026-08-29：見出しの文字サイズを、この左カラムの幅に連動させるための入れ物です
   （cqi ＝ コンテナ幅の1%）。 */
.hero-copy {
  container-type: inline-size;
}

/* 2026-08-29：見出しは <br> の位置だけで2行に割り、画面幅が変わっても
   3行以上にならないようにしています。
   ・white-space: nowrap …… <br> 以外での折り返しを禁止します（<br> は効きます）
   ・font-size: min(46px, 7.4cqi) …… 長いほうの2行目「AIテックで世の中を変える。」は
     文字サイズの13.09倍の幅が必要なので、枠内に収まる上限は 100 ÷ 13.09 ＝ 7.64cqi。
     その約97%の 7.4cqi を採用し、広い画面では従来どおり46pxで頭打ちにしています。
     **係数 7.4cqi は「長いほうの行」の長さから決めています。**
     いま長いのは2行目（13.09倍）です。文言を変えるときは、
       ・2行目を変えた → 必要な倍率を数え直し、100 ÷ 倍率 の約97% を新しい係数にする
       ・1行目だけを変えた → 1行目が13.09倍を超えなければ、この指定のままで大丈夫
     という見方をしてください（全角1文字＝1倍、"AI" のような半角2文字＝約0.55倍で数えます）。 */
.hero h1 {
  font-size: min(46px, 7.4cqi);
  letter-spacing: 0.005em;
  margin-bottom: 22px;
  white-space: nowrap;
}

.hero h1 .hl {
  color: #fff;
}

.hero .lead {
  max-width: 38em;
  font-size: 16.5px;
  color: #fff;
}

.hero-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 12px;
  color: #fff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* 2026-08-29：ヒーローの「お問い合わせ」だけ横に長くします（149px → 216px、約1.45倍）。
   左端はフレックスの先頭なので動かず、右にだけ伸びます。
   高さ・文字サイズ・色は変えていません（padding はそのまま、min-width で広げています）。
   PCでは 216 + 12 + 222 + 12 + 118 ＝ 580px で、枠（665px）に3つとも横一列で収まります。
   スマホ（枠350px）でも収まる幅なので、はみ出しません。 */
.hero-actions .btn-primary {
  min-width: 216px;
  /* 2026-08-29：.btn は inline-block なので、幅を広げたぶん文字が左に寄ります。
     中央にそろえるため text-align: center を足しています。 */
  text-align: center;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.hero-tags li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
}

/* ---------- ターミナル風パネル ---------- */

.terminal {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(3, 14, 24, 0.66);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.045);
}

.terminal-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.terminal-bar em {
  margin-left: 10px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fff;
}

.terminal pre {
  margin: 0;
  padding: 20px 20px 24px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 2;
  color: #fff;
}

.terminal .c {
  color: #fff;
}

.terminal .ok {
  color: #fff;
}

.terminal .p {
  color: #fff;
}

/* --- ターミナルの起動アニメーション（装飾。JSが動かない環境では最初から全行表示） --- */

/* JS が用意できたときだけ行を隠す */
.terminal.is-live .tl {
  visibility: hidden;
}

.terminal.is-live .tl.is-on {
  visibility: visible;
}

/* コマンド行は左から打ち込まれるように見せる */
.terminal.is-live .tl-cmd .tw {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
}

.terminal.is-live .tl-cmd.is-on .tw {
  animation: term-type 0.95s steps(26, end) forwards;
}

@keyframes term-type {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* 出力行はふわっと出す */
.terminal.is-live .tl:not(.tl-cmd).is-on {
  animation: term-fade 0.42s ease-out both;
}

@keyframes term-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 稼働中サービスのランプ */
.terminal .dot {
  animation: term-pulse 2.6s ease-in-out infinite;
}

.terminal .tl:nth-of-type(3) .dot { animation-delay: 0.4s; }
.terminal .tl:nth-of-type(5) .dot { animation-delay: 0.8s; }
.terminal .tl:nth-of-type(6) .dot { animation-delay: 1.2s; }

@keyframes term-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* 最終行のカーソル */
.tl-caret i {
  display: inline-block;
  width: 7px;
  height: 14px;
  vertical-align: -2px;
  background: #fff;
  animation: term-caret 1.1s steps(1, end) infinite;
}

@keyframes term-caret {
  0%, 50% {
    opacity: 1;
  }
  50.01%, 100% {
    opacity: 0;
  }
}

/* 2026-08-29：事業内容ページ（services.html）だけ、ページ全体をコンパクトにします。
   セクションの上下余白・見出し回り・カードの余白を詰めたもので、
   文字サイズ・左右の余白・背景色・枠線・角丸は変えていません。
   ほかのページ（about・sdgs・partner など）は従来のままです。 */
.page-services .page-head {
  padding: 32px 0 28px;          /* 64/58 → 32/28 */
}

.page-services .section {
  padding: 32px 0;               /* 84 → 32（全8セクションぶん効きます） */
}

.page-services .section-head {
  margin-bottom: 16px;           /* 42 → 16 */
}

.page-services .section-head .en {
  margin-bottom: 6px;            /* 10 → 6 */
}

.page-services .section-head p {
  margin-top: 10px;              /* 14 → 10 */
}

.page-services .cards {
  gap: 10px;                     /* 22 → 10 */
}

.page-services .card {
  padding: 14px 18px;            /* 28/26 → 14/18 */
}

.page-services .card-num {
  margin-bottom: 6px;            /* 10 → 6 */
}

.page-services .card h3 {
  margin-bottom: 8px;            /* 12 → 8 */
}

.page-services .card ul,
.page-services .tags {
  margin-top: 10px;              /* 14 → 10 */
}

/* カードの中身。行間を 1.85 → 1.5 に詰め、それでも目標の高さに届かなかったため、
   本文だけ 14.5px → 13.5px（箇条書きは14 → 13px）に下げています。
   見出し（h3・h2）とラベルの文字サイズは変更していません。 */
.page-services .card p,
.page-services .case dd {
  font-size: 13.5px;
}

.page-services .card ul {
  font-size: 13px;
}

.page-services .tags {
  gap: 5px;
  margin-top: 8px;
}
/* カードの中身。文字サイズは変えず、行間と項目の間隔だけ詰めます
   （1.85 → 1.6。カードが高さの大半を占めているため、ここがいちばん効きます）。 */
.page-services .card p,
.page-services .card li,
.page-services .case dd {
  line-height: 1.5;
}

.page-services .case dt {
  margin-top: 6px;               /* 16 → 6 */
}

.page-services .case dd {
  margin-top: 2px;               /* 4 → 2 */
}

.page-services .tags li {
  padding: 3px 8px;              /* 4/10 → 3/8 */
}

.page-services .section-head p {
  line-height: 1.7;              /* 1.85 → 1.7 */
}

/* 「開発の進め方」の5ステップ。枠線・角丸はそのままで余白だけ詰めます。 */
.page-services .steps {
  gap: 14px;                     /* 20 → 14 */
}

.page-services .steps li {
  padding: 16px 16px 14px;       /* 26/22/24 → 16/16/14 */
}

.page-services .steps li::before {
  margin-bottom: 6px;            /* 10 → 6 */
}

.page-services .steps strong {
  margin-bottom: 5px;            /* 8 → 5 */
}

.page-services .steps p {
  line-height: 1.6;
}

/* 「主な対応技術」と2カラム、数字の並び */
.page-services .split {
  gap: 20px;
}

.page-services .card li {
  margin-bottom: 2px;
}

.page-services .stats {
  gap: 14px;
}

/* 自社プロダクトの3枚は独自の余白指定（.cards-product .card）を持っていて
   詳細度が同じ0-2-0のため、こちらを後ろに置いて上書きします。 */
.page-services .cards-product .card {
  padding: 14px 18px;
}

.page-services .cards-product .card p {
  line-height: 1.5;
}

.page-services .cards-product .card ul {
  margin-top: 8px;
}

/* 最後の紺の帯（どのサービスが合うか分からない場合も） */
.page-services .cta-band {
  padding: 44px 0;               /* 66 → 44 */
}

.page-services .cta-band h2 {
  margin-bottom: 10px;           /* 14 → 10 */
}

.page-services .cta-band p {
  margin-bottom: 20px;           /* 28 → 20 */
  line-height: 1.7;
}

/* 数字の箱と注記 */
.page-services .stat {
  padding: 4px 0 4px 14px;
}

.page-services .form-note {
  line-height: 1.7;
}

/* ---------- ページヘッダー（下層） ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 320px at 88% 0%, rgba(95, 168, 242, 0.16), transparent 60%),
    linear-gradient(150deg, var(--navy-deep), var(--navy));
  color: #fff;
  padding: 64px 0 58px;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 50%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at 20% 50%, #000 10%, transparent 72%);
}

.page-head > .container {
  position: relative;
  z-index: 1;
}

.page-head h1 {
  font-size: clamp(25px, 3.4vw, 36px);
}

.page-head .en {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #fff;
}

.page-head .desc {
  margin: 14px 0 0;
  max-width: 44em;
  font-size: 15.5px;
  color: #fff;
}

/* 2026-08-29：リード文をコンテナ（--wrap: 1120px）の幅いっぱいまで広げる指定です。
   既定の 44em（.page-head .desc＝682px）／48em（.section-head p）だと右側に大きな余白が
   残る、というご指摘への対応で、付けた段落だけが対象です（class="… desc-wide"）。
   見出し・英字ラベルと左右の位置がそろい、余白も左右均等（.container の余白）になります。
   詳細度の注意：打ち消す相手が .page-head .desc（0-2-0）と .section-head p（0-1-1）なので、
   前者は同じ0-2-0でこの規則を後ろに置いて勝たせ、後者は p.desc-wide（0-2-1）で上回っています。
   使っている場所：services.html のリード文7か所（ページ見出しの「事業内容」＋各セクションの
   6つの事業ドメイン／自社プロダクト／受託開発／補助金／開発の進め方／主な対応技術）と、
   index.html の2か所（自社プロダクト・サービス／生成AI導入・システム開発）。
   ほかのページ（about・partner・sdgs）の .section-head p は 48em のままです。 */
.page-head .desc-wide,
.section-head p.desc-wide {
  max-width: none;
}

/* 濃色背景の中のリンクも本文と同じ白にする（下線でリンクだと分かるようにする） */
.hero a:not(.btn),
.page-head a,
.section-dark a:not(.btn),
.cta-band a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- ボタン ---------- */

.btn {
  display: inline-block;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

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

.btn-primary:hover {
  background: var(--accent-dark);
}

/* 2026-08-30：トップページのヒーローにある「お問い合わせ」ボタン。
   青ベタ塗り＋白文字 → 白地＋青い枠線に反転しました。
   ヒーローは濃紺の背景なので、地を透明にすると文字が沈みます。
   ここは白地にして、となりの白抜きボタン（.btn-ghost）と見分けが付くようにしています。

   文字色は「背景色に」というご指示で、ヒーローの地と同じ濃紺（--navy #0a2438）です。
   枠線は先のご指示どおり青（--accent #17509e）のままにしています。

   大きさ・角丸は共通の .btn のままなので、寸法は変わりません
   （.btn の border は 1px solid transparent なので、色を付けても幅は増えません）。 */
.btn-primary-invert {
  background: #fff;
  color: var(--navy);
  border-color: var(--accent);
}

.btn-primary-invert:hover {
  /* 押せることが分かる程度の、ごく薄い青。文字色は変えません。 */
  background: #e8f0fa;
  color: var(--navy);
  border-color: var(--accent-dark);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-bright);
}

/* ---------- セクション ---------- */

.section {
  padding: 84px 0;
}

.section-soft {
  background: var(--bg-soft);
}

.section-dark {
  background:
    radial-gradient(760px 400px at 84% 8%, rgba(95, 168, 242, 0.14), transparent 62%),
    linear-gradient(160deg, var(--navy-deep), var(--navy));
  color: #fff;
}

.section-dark .section-head .en {
  color: #fff;
}

.section-dark .section-head p {
  color: #fff;
}

.section-head {
  margin-bottom: 42px;
}

.section-head .en {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent-dark);
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: clamp(22px, 3vw, 30px);
}

.section-head p {
  margin-top: 14px;
  max-width: 48em;
  color: var(--ink-mute);
}

/* MEMBERS の説明文は途中で折り返さず、画面幅いっぱいまで1行で表示する */
#members .section-head p {
  max-width: none;
  text-wrap: pretty;
}

/* 2026-08-29：行末の泣き別れ（最終行に2文字だけ残るなど）を防ぎます。
   指定内容は上の MEMBERS の説明文と同じ text-wrap: pretty です。
   対応していないブラウザでは無視されるだけで、従来どおりの折り返しになります。 */
.text-pretty {
  text-wrap: pretty;
}

/* ---------- メンバー ---------- */

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.member {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.member-photo {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 6px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
  background: var(--bg-soft);
}

.member-photo-none {
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, var(--navy), #143d70);
}

.member-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}

.member-post {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-dark);
  white-space: nowrap;
}

.member-role {
  margin: 1px 0 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.member-focus {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-mute);
}

.member-note {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--ink-mute);
}

/* ---------- 注意喚起バー ---------- */

/* 2026-08-29：注意喚起バーは「お知らせ（news.html）だけに出す」方針に変更しました。
   マークアップは各ページに残したまま、既定で非表示にし、
   出したいページの <div class="alert-bar"> に is-shown を足す形にしています。
   （別のページにも出したくなったら、そのページのバーに is-shown を足すだけです） */
.alert-bar {
  display: none;
  background: #fdf1ee;
  border-bottom: 1px solid #f0c9c0;
  color: #8f3722;
  font-size: 13px;
  line-height: 1.7;
}

.alert-bar.is-shown {
  display: block;
}

.alert-bar > .container {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
}

.alert-bar strong {
  flex: none;
  padding: 1px 9px;
  border-radius: 999px;
  background: #a8412c;
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.alert-bar p {
  margin: 0;
}

.alert-bar a {
  color: #8f3722;
  text-decoration: underline;
  white-space: nowrap;
}

/* ---------- 方針・規程などの文書ページ ---------- */

.policy h2 {
  margin: 40px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 18px;
}

.policy h2:first-of-type {
  margin-top: 30px;
}

.policy ul {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.policy li {
  margin-bottom: 4px;
}

/* ---------- お知らせ ---------- */

.container-narrow {
  max-width: 780px;
}

.news-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.news-item:first-of-type {
  padding-top: 0;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}

.news-meta time {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.news-tag {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--ink-mute);
  background: var(--bg-soft);
}

.news-tag-important {
  border-color: #f0c9c0;
  color: #a8412c;
  background: #fdf1ee;
}

.news-tag-product {
  border-color: rgba(23, 80, 158, 0.35);
  color: var(--accent-dark);
  background: rgba(23, 80, 158, 0.08);
}

.news-item h2 {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.2vw, 21px);
}

.news-item h3 {
  margin: 26px 0 8px;
  font-size: 15px;
}

.news-item p,
.news-item li {
  color: var(--ink);
}

.news-item ul,
.news-item ol {
  margin: 0 0 14px;
  padding-left: 1.3em;
}

.news-item li {
  margin-bottom: 4px;
}

/* ---------- SDGs ---------- */

.goal-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -14px 0 30px;
  padding: 0;
  list-style: none;
}

.goal-icons img {
  width: 72px;
  height: 72px;
  border-radius: 4px;
}

/* ---------- カード ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform 0.16s ease, box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: #c9d8dc;
  box-shadow: 0 14px 34px rgba(10, 36, 56, 0.09);
}

.card-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  margin-bottom: 10px;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

/* 「補助金Manager（補助金マネージャー）」のように長い見出しを、
   カード幅に合わせて文字サイズを詰めながら1行に収める（18pxが上限）。
   1行目の font-size は cqi 非対応ブラウザ向けの控えめな固定値。 */
.card-wide-title {
  container-type: inline-size;
}

.card-wide-title h3 {
  white-space: nowrap;
  font-size: 16px;
  font-size: min(18px, 5.4cqi);
}

/* 2026-08-29：.card-wide-title と同じ考え方で、さらに長いサービス名を1行に収めます。
   「士業向けAI開発サービス「サポートAI」」は18pxのとき320px必要で、
   全角17.78文字ぶんに相当します。いちばん狭いカード（幅280px／見出し欄226px）でも
   収めるには 17.78 × (k/100) × カード幅 ≤ 見出し欄 から k ≤ 4.54 が必要なので、
   余裕をみて 4.4cqi にしています（.card-wide-title の 5.4cqi では溢れます）。
   vw ではなくカード幅に連動させているのは、画面幅が同じでも
   1列/2列/3列でカードの幅が変わるためです。 */
.card-title-1line {
  container-type: inline-size;
}

.card-title-1line h3 {
  white-space: nowrap;
  font-size: 16px;
  font-size: min(18px, 4.4cqi);
}

.card p {
  font-size: 14.5px;
  color: var(--ink-mute);
}

.card ul {
  margin: 14px 0 0;
  padding-left: 1.2em;
  font-size: 14px;
  color: var(--ink-mute);
}

.card li {
  margin-bottom: 4px;
}

.section-dark .card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.section-dark .card:hover {
  border-color: rgba(95, 168, 242, 0.5);
  box-shadow: none;
}

.section-dark .card p,
.section-dark .card ul {
  color: #fff;
}

.section-dark .card-num {
  color: #fff;
}

/* 2026-08-29：自社プロダクト・サービスの3枚（PatentStart／ComplAI／サポートAI）だけ
   余白・文字を詰めて高さを抑えます。.card は他のセクションでも使っているので、
   この囲み（.cards-product）の中に限定しています。
   3枚の高さは並びの中でいちばん高いカードに揃います。 */
.cards-product .card {
  padding: 20px 20px;
}

.cards-product .card-num {
  margin-bottom: 6px;
}

.cards-product .card h3 {
  margin-bottom: 8px;
}

.cards-product .card p {
  font-size: 13.5px;
  line-height: 1.7;
}

.cards-product .card ul {
  margin-top: 10px;
  font-size: 13px;
}

.cards-product .card li {
  margin-bottom: 2px;
}

.cards-product .tags li {
  padding: 3px 8px;
  font-size: 11px;
}

.cards-product .tags-stack {
  gap: 4px;
}

/* ---------- 開発事例カード ---------- */

.case h3 {
  font-size: 17.5px;
  padding-bottom: 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.section-dark .case h3 {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.case dl {
  margin: 0;
  font-size: 14.5px;
}

.case dt {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--accent-dark);
}

.section-dark .case dt {
  color: #fff;
}

.case dd {
  margin: 4px 0 0;
  color: var(--ink-mute);
}

.section-dark .case dd {
  color: #fff;
}

/* ---------- 技術タグ ---------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.tags li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink-mute);
}

/* サポートAIカードの対応士業。2026-08-29に「1列の縦積み」から「横3列」に変更しました。
   5件なので1段目3つ・2段目2つになります。minmax(0, 1fr) は、
   長い項目が来ても列がはみ出さないようにするためです。 */
.tags-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.section-dark .tags li,
.case dd .tags li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.section:not(.section-dark) .case dd .tags li {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--ink-mute);
}

/* 2026-08-29：地色だけ白系にして、カードは紺のまま残すセクション（services.html の
   「受託開発・AI導入支援」で使用）。カードの見た目は .section-dark の指定をそのまま使うため、
   section-dark を外さずに、このクラスで背景と見出しの色だけ上書きしています。
   ・.section-dark（0-1-0）と同じ詳細度なので、必ずこの規則を後ろに置くこと
   ・カードの地は半透明の白（rgba(255,255,255,.045)）のままだと白地に溶けるため、
     実体のある紺の塗りに変えています */
.section-light-bg {
  background: var(--bg-soft);
  color: var(--ink);
}

/* 2026-08-29：打ち消す相手（.section-dark .section-head .en など）と詳細度が同じ0-3-0で、
   記述順だけで勝っている状態だったため、.section-dark を足して 0-4-0 に上げました。
   これで並び順やファイルの読み込み順に関係なく、必ずこちらが優先されます。 */
.section-light-bg .section-head .en,
.section-dark.section-light-bg .section-head .en {
  color: var(--accent-dark);
}

.section-light-bg .section-head h2,
.section-dark.section-light-bg .section-head h2,
.section-dark.section-light-bg h2 {
  color: var(--navy);
}

.section-light-bg .section-head p,
.section-dark.section-light-bg .section-head p {
  color: var(--ink-mute);
}

/* 見出しエリア全体の既定の文字色も、念のため濃い色にしておきます
   （.section-dark の color: #fff を打ち消すため）。 */
.section-dark.section-light-bg,
.section-dark.section-light-bg .section-head {
  color: var(--ink);
}

/* 2026-08-30（再修正）：カード上部のタイトルバーの紺を、1段階明るくしました。
   #061826 / #0a2438 / #0e3d55 → #1c3f66 / #245081 / #2a6288。
   白文字とのコントラストは、いちばん明るい #2a6288 でも 6.6:1 あります
   （右上の青いにじみが重なるところでも 6.3:1）。
   カードの下半分（白地の dl・タグ）には触れていません。 */
.section-light-bg .card {
  background:
    radial-gradient(420px 240px at 80% 8%, rgba(95, 168, 242, 0.18), transparent 62%),
    linear-gradient(165deg, #1c3f66 10%, #245081 60%, #2a6288 100%);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* 2026-08-30：タイトルの文字だけをバーの中央に寄せます。
   下線（.case h3 の border-bottom）はバーの幅いっぱいのままです。 */
.section-light-bg .card h3 {
  text-align: center;
}

.section-light-bg .card:hover {
  border-color: rgba(95, 168, 242, 0.5);
}

/* 2026-08-29：受託開発カードを3つのゾーンに分けます。
     上＝タイトル（紺地・白文字。カードの地をそのまま使用）
     中＝本文（白地・黒文字。よくある課題／当社の対応／主な技術要素のラベルまで）
     下＝タグ（紺地・白文字）
   .card の左右padding（18px）・下padding（14px）を負のマージンで打ち消して、
   白と紺の帯がカードの端まで届くようにしています。
   角丸からはみ出さないよう、カードに overflow: hidden を付けています。 */
.section-light-bg .card {
  overflow: hidden;
  /* 2026-08-29（再修正）：CASEカードとそろえて 0.35 → 0.85（白地の上でも濃く見える値）。 */
  border-color: rgba(8, 35, 74, 0.85);
}

/* 中央の白いゾーン。dl をカード幅いっぱいに広げます。 */
.section-light-bg .card dl {
  margin: 14px -18px -14px;
  padding: 14px 18px 0;
  background: #fff;
  color: var(--ink);
}

.section-light-bg .card dt {
  color: var(--navy);
}

.section-light-bg .card dd {
  color: var(--ink);
}

/* 「当社の対応」「主な技術要素」の手前に黒系の区切り線を入れます。 */
.section-light-bg .card dt + dd + dt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(8, 35, 74, 0.18);
}

/* 2026-08-29（再修正）：タグが並ぶエリアの地は白にします。
   紺のまま残すのは「タイトルバー」と「タグのチップそのもの」だけです。 */
.section-light-bg .card dd:last-of-type {
  margin: 10px -18px 0;
  padding: 4px 18px 14px;
  background: #fff;
}

.section-light-bg .card dd:last-of-type .tags {
  margin-top: 0;
}

/* 2026-08-29：補助金セクションの具体例カード（CASE 01〜03）の枠線も、
   受託開発カードと同じ濃い紺（rgba(8,35,74,.35)）にそろえます。
   既定の `.card { border: 1px solid var(--line) }`（薄いグレー）を打ち消す指定です。
   背景・文字色・タグの見た目は従来のままにしています。 */
.page-services #subsidy-ai .card {
  /* 2026-08-29（再修正）：0.35 だと白地の上では rgb(169,178,192) ＝ 薄いグレーに見えるため、
     0.85（＝ rgb(45,68,101) の濃紺）に上げました。 */
  border-color: rgba(8, 35, 74, 0.85);
}

/* チップは白地の上でも同じ見え方になるよう、実体のある塗りにします
   （既定は半透明の白 rgba(255,255,255,.06) で、白地だと消えてしまうため）。
   打ち消す相手が .section-dark .tags li（0-2-0）なので、こちらは0-3-0で指定します。
   2026-08-30（再修正）：濃紺グラデーションから、薄い黒（ダークグレー）に変更しました。
   2026-08-30（3回目）：そこからさらに1段階明るいグレーへ。
     #4a5058 / #3a4048 / #33383f → #6a7079 / #5a6068 / #52585f
   2026-08-30（4回目）：もう1段階明るく。
     #6a7079 / #5a6068 / #52585f → #71777f / #61666e / #595e66
   2026-08-30（5回目）：白文字のままだと #71777f（4.52:1）が明るさの上限だったため、
   ご相談のうえ「文字色を濃いグレー／黒に変える」方針に切り替えました。
   これで地をライトグレーまで明るくできます。
     地   #71777f / #61666e / #595e66 → #e9eaec / #dfe1e5 / #d9dbe0
     文字 #fff → var(--ink)（#1c2530）
   コントラストは、いちばん濃い #d9dbe0 の上でも 11.2:1 と十分です。
   枠線はカードの白地から輪郭が浮くよう、うっすらした紺寄りのグレーにしています。
   このセクション（services.html の ENGINEERING）のチップだけが対象で、
   TECH STACK など他のセクションのタグには影響しません。 */
.section-light-bg .card .tags li {
  background: linear-gradient(165deg, #e9eaec 10%, #dfe1e5 60%, #d9dbe0 100%);
  border-color: rgba(8, 35, 74, 0.22);
  color: var(--ink);
}

/* 技術スタック一覧 */
.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

.stack h3 {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: #fff;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---------- 開発プロセス ---------- */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.steps li {
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.steps li::before {
  counter-increment: step;
  content: "STEP 0" counter(step);
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--accent-dark);
}

.steps strong {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
}

.steps p {
  font-size: 14px;
  color: var(--ink-mute);
}

/* 2026-08-29：「申請から開発、その後まで」の4ステップだけ、高さを半分程度に詰めた版です。
   ・PCは2列×2段（4つなのでバランスがよく、縦が約半分になります）
   ・上下の余白 26/24px → 12px、カード間 20px → 10px
   ・STEPラベル 10.5 → 9.5px、見出し 16 → 14px、本文 14 → 12.5px（各1段階）
   ・本文の行間 1.85 → 1.55
   枠線・角丸・背景（.steps li の border / border-radius / #fff）はそのままです。 */
.steps-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.steps-compact li {
  padding: 12px 14px;
}

.steps-compact li::before {
  margin-bottom: 4px;
  font-size: 9.5px;
}

.steps-compact strong {
  font-size: 14px;
  margin-bottom: 3px;
}

.steps-compact p {
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 700px) {
  /* スマホは縦1列。詰めた余白・文字サイズはそのまま保ちます。 */
  .steps-compact {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 数値 ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.stat {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 18px;
}

/* 2026-08-29：会社概要（about.html）の表の上に置く数字サマリ。
   .stats は既定が auto-fit minmax(180px) なので、コンテナ幅1120pxだと6列に並んでしまいます。
   トップページと同じ「2列×2行」にしたいので、ここだけ2列で固定しています。
   下に表が続くので、その間隔として margin-bottom を持たせています。 */
.profile-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 48px;
  margin: 0 0 40px;
}

/* 2026-08-29：代表挨拶の署名。本文の段落間（19.2px）と同じだと本文の続きに見えるので、
   上だけ少し空けます。文字サイズ・左寄せ・太字は既存のまま（.section 内の p と共通）です。 */
.message-sign {
  margin-top: 32px;
}

@media (max-width: 700px) {
  /* 2列だと1枠が狭くなりすぎるので、縦1列に積みます。 */
  .profile-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

.stat .num {
  display: block;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

.stat .num small {
  font-size: 14px;
  font-weight: 700;
  margin-left: 3px;
}

.stat .label {
  font-size: 13.5px;
  color: var(--ink-mute);
}

/* ---------- テーブル（会社概要） ---------- */

.table-outline {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  font-size: 15px;
  background: #fff;
}

.table-outline th,
.table-outline td {
  border-bottom: 1px solid var(--line);
  padding: 16px 14px;
  text-align: left;
  vertical-align: top;
}

.table-outline th {
  width: 200px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  background: var(--bg-soft);
}

/* ---------- 沿革 ---------- */

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line);
}

.history li {
  position: relative;
  padding: 0 0 26px 26px;
}

.history li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.history .year {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--navy);
  font-size: 13.5px;
  letter-spacing: 0.04em;
}

.history p {
  margin: 2px 0 0;
  font-size: 14.5px;
  color: var(--ink-mute);
}

/* ---------- 二段組 ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2026-08-29：48px → 32px。index.html のお知らせ欄で、左カラムの本文と
     右カラム（統計）の境目の空きが広く見えるとのご指摘への対応です。
     左右のカラムは gap が減ったぶんだけ均等に広がります（1120px幅なら 536px → 544px）。
     .split は6ページ（index・about・contact・partner・sdgs・services）で使っています。
     スマホ（860px以下）は1カラムに変わり、そちらの gap は元から32pxです。 */
  gap: 32px;
  align-items: start;
}

/* 2026-08-29：index.html のお知らせ欄だけ、左（本文）を広く・右（統計）を狭くします。
   本文の右端と右カラムの境界線（.stat の縦線）の間を約20pxまで詰めるための比率で、
   1120px幅のとき 左650px／間20px／右450px（従来は 544/32/544）。実測で本文右端→縦線は24pxです。
   統計は2列のまま・文字サイズもそのままですが、幅が 262px → 215px になるぶん行が増えます。
   1000px前後より狭いと .stats（auto-fit minmax(180px)）が1列に変わります。
   ほかの5ページ（about・contact・partner・sdgs・services）の .split は 1fr 1fr のままです。
   ※ 860px以下は後方の @media が1カラム＋gap32pxで上書きします（同じ詳細度で後ろが勝つ）。 */
.split-notice {
  grid-template-columns: 1.3fr 0.9fr;
  /* 2026-08-29：20px → 14px。下の text-align: justify と合わせて、
     本文の右端から統計の縦線までを 24px → 14px にしています。 */
  gap: 14px;
}

/* 2026-08-29：本文の行末を左カラムの右端にそろえます（両端そろえ）。
   日本語は1文字ぶん（約16px）単位で折り返すため、そろえないと行ごとに
   4〜19pxのばらつきが出て、その分だけ余白が広く見えていました。
   最終行だけは通常どおり左寄せのまま残ります。 */
.split-notice .text-pretty {
  text-align: justify;
}

/* ---------- フォーム ---------- */

.form {
  max-width: 720px;
}

.field {
  margin-bottom: 26px;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 8px;
}

.req,
.opt {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

.req {
  background: #fdecec;
  color: #c0392b;
}

.opt {
  background: var(--bg-soft);
  color: var(--ink-mute);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cdd5dd;
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field .hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}

.field .error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #c0392b;
  background: #fffafa;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
}

.check input {
  width: auto;
  margin-top: 6px;
}

.form-note {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 36px;
}

.form-result {
  border: 1px solid var(--accent);
  background: #eefaf8;
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 28px;
}

.form-result h2 {
  font-size: 17px;
  margin-bottom: 8px;
  color: var(--accent-dark);
}

.form-result p {
  font-size: 14.5px;
}

[hidden] {
  display: none !important;
}

/* ---------- 連絡先ボックス ---------- */

.contact-side {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.contact-side h2 {
  font-size: 17px;
  margin-bottom: 14px;
}

.contact-side dl {
  margin: 0;
  font-size: 14.5px;
}

.contact-side dt {
  font-weight: 700;
  color: var(--navy);
  margin-top: 14px;
}

.contact-side dt:first-child {
  margin-top: 0;
}

.contact-side dd {
  margin: 2px 0 0;
  color: var(--ink-mute);
}

/* ---------- お知らせの事実表記リスト（dt／dd の対で並べる表） ---------- */

.notice-facts {
  display: grid;
  grid-template-columns: 84px 1fr;
  margin: 0 0 22px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}

.notice-facts dt,
.contact-side .notice-facts dt {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mute);
}

.notice-facts dd,
.contact-side .notice-facts dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.notice-facts .mono {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}

/* ---------- CTA 帯 ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(95, 168, 242, 0.18), transparent 65%),
    var(--navy);
  color: #fff;
  padding: 66px 0;
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(20px, 2.6vw, 27px);
  margin-bottom: 14px;
}

.cta-band p {
  color: #fff;
  margin-bottom: 28px;
}

/* ---------- フッター ---------- */

/* 2026-08-29：フッターを6〜7割の高さに圧縮しました。
   上下余白 56/28 → 34/18px、本文 14 → 13px（住所・メニューとも1段階小さく）。
   ロゴ・社名・行間・リンク間隔・コピーライトの余白も下でまとめて詰めています。 */
.site-footer {
  /* 2026-08-31：#061826（--navy-deep の単色）から #0f2739 に変更しました。
     index.html のヒーローはグラデーションで、画面全体の平均色は #112a3b 付近です。
     フッターはその開始色 #061826 のままだったため、並べると暗く沈んで見えていました。
     ヒーローの平均色に寄せた #0f2739 にすることで、色差が 23 → 4 に縮まります。
     白文字とのコントラスト比は 15.3:1（WCAG AAA の基準7:1を大きく上回ります）。
     ※ --navy-deep 自体は変えていません（ヒーローのグラデーション開始色などで使われているためです）。 */
  background: #0f2739;
  color: #fff;
  padding: 34px 0 18px;
  /* 2026-08-29（2回目）：14px → 13px → 11.5px。住所・メニューリンクの基準サイズです。
     スマホでは小さすぎるので、下の max-width:700px で12.5pxに戻しています。 */
  font-size: 11.5px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;   /* 2026-08-29：40px → 28px */
}

/* 住所・連絡先の行間を詰めます（1.85 → 1.6 → 1.55）。 */
.footer-inner p {
  margin: 0;
  line-height: 1.55;
}

.footer-logo {
  width: auto;
  /* 2026-08-29：40px → 32px、下の余白も 14px → 8px。 */
  height: 32px;
  margin-bottom: 8px;
  opacity: 0.92;
}

.site-footer strong {
  display: block;
  color: #fff;
  /* 2026-08-29：15.5px → 14.5px →（2回目）13px。下の余白も 10px → 6px → 5px。
     本文（11.5px）より1.5px大きく・太字のままで、社名と「メニュー」の強弱は保っています。 */
  font-size: 13px;
  margin-bottom: 5px;
  line-height: 1.45;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  /* 2026-08-29：リンクの縦間隔を 8px → 4px →（2回目）3px に。行間も詰めています。 */
  margin-bottom: 3px;
  line-height: 1.55;
}

/* 2026-09-03：ai-support.html と業種LP9ページの共通フッター用です。
   リンクを3つ（会社紹介／個人情報保護方針／利用規約）に絞ったので、
   「メニュー」の見出しを外し、横1列（狭い画面では縦）に並べます。
   もともと ai-support.html の <style> に直接書いていた指定を、
   10ページで使い回すためにこちらへ移しました。
   .site-footer 側の指定（背景・色・余白）はそのまま使っています。 */
.ind-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-footer-links a {
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 700px) {
  .ind-footer-links {
    flex-direction: column;
    gap: 6px;
  }
}

/* 2026-09-03：フッターに置いた9業種へのリンクです（ai-support.html と業種LP9ページ）。
   会社情報＋3リンクの下に、横いっぱいで1行に並べます。
   文字色は .site-footer a（白）、文字サイズは上の .ind-footer-links a と同じ14pxにそろえています。
   区切りは記号を使わず、隣り合うリンクの間隔（22px）で分けています。
   既存の3リンクと同じ考え方なので、フッター内で書き方が二通りにならずに済みます。
   9項目あるので、狭い画面では flex-wrap で自然に折り返します。 */
.ind-footer-industries {
  display: flex;
  flex-wrap: wrap;
  /* 2026-09-03：左揃え → 中央揃えに変更しました。justify-content は行ごとに効くので、
     狭い画面で2行に折り返したときも、それぞれの行が中央にそろいます。
     この指定は .ind-footer-industries だけに付いていて、
     ロゴ・社名・住所・受付時間・3リンク・コピーライトの配置には影響しません。 */
  justify-content: center;
  gap: 6px 22px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

/* .site-footer li の margin-bottom: 3px は、ここでは gap と二重になるので打ち消します。 */
.ind-footer-industries li {
  margin-bottom: 0;
}

.ind-footer-industries a {
  font-size: 14px;
  line-height: 1.9;
}

/* すぐ下のコピーライトにも区切り線があるため、線が二重に見えないよう
   ここでは上の余白だけを詰めています（線そのものは残します）。 */
.ind-footer-industries + .copyright {
  margin-top: 14px;
}

@media (max-width: 700px) {
  /* 縦積みにすると9行ぶん高くなるので、折り返しのまま間隔だけ詰めます。 */
  .ind-footer-industries {
    gap: 6px 18px;
  }
}

/* 2026-08-29：フッターの「メニュー」を左右2列に分けます。
   grid-auto-flow: column ＋ grid-template-rows: repeat(5, auto) の組み合わせで、
   上から順に「5項目ぶん縦に並べてから次の列へ」という流れになります。
   （既定の行方向の流れだと「ホーム／会社紹介」「事業内容／お知らせ」…と
   横に並んでしまい、ご指定の分け方になりません）
   結果：左＝ホーム／会社紹介／事業内容／お知らせ／SDGsへの取り組み
         右＝士業パートナー募集／お問い合わせ／個人情報保護方針／利用規約 */
.footer-menu {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 32px;
}

/* 2026-08-29：フッターの高さを詰めるため、スマホでもメニューは2列のままにします
   （1列だとリンク9本が縦に並び、フッターが約100px高くなります）。
   実測で320px幅でも「士業パートナー募集」がはみ出さないことを確認済みです。
   列の間隔だけ、狭い画面では 32px → 20px に詰めます。
   （1列に戻すときは行の指定も解除しないと、5行目以降が消えます） */
@media (max-width: 700px) {
  .footer-menu {
    column-gap: 20px;
  }

  /* 2026-08-29：スマホでは11.5pxだと小さすぎるため、読める大きさに戻します
     （本文12.5px／社名・メニュー見出し13.5px）。 */
  .site-footer {
    font-size: 12.5px;
  }

  .site-footer strong {
    font-size: 13.5px;
  }
}

@media (max-width: 319px) {
  .footer-menu {
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover {
  color: #fff;
}

/* 2026-08-29：トップページ用の、コピーライト1行だけのフッターです。
   会社情報とメニューを消したので、区切り線と上の余白は不要（ヒーローの直下に線が出て
   しまうため）。上下の余白だけで整えています。 */
.site-footer-min {
  padding: 16px 0 14px;
}

.site-footer-min .copyright {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.copyright {
  /* 2026-08-29：上の余白 40 → 20px、区切り線からの間隔 20 → 12px。
     同日、コピーライトは中央揃えにしました。 */
  margin-top: 20px;
  padding-top: 12px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #fff;
}

/* ---------- レスポンシブ ---------- */

@media (max-width: 940px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 860px) {
  .split,
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* 2026-08-29：ハンバーガーに切り替える幅を 900px → 1024px →（再調整）1280px に広げました。
   1024pxでは切り替わらない幅（1100〜1280pxのノートPC・タブレット横向き）でも
   ナビが窮屈に見える、というご指摘への対応です。1281px以上は従来どおりテキストリンクです。
   ドロワーは display の切り替えではなく、透明度・位置・visibility の変化で
   すっと開くようにしています（display: none だとアニメーションできません）。 */
/* 2026-08-30：ハンバーガーのアイコンとドロップダウンは、画面幅に関係なく出します。
   （PC用の横並びメニューを廃止したため、以前の @media (max-width:1280px) から
   ここへ出しました。狭い画面だけの調整は下のメディアクエリに残しています。） */
.header-inner {
  position: relative;
}

.header-cta {
  margin-left: auto;
}

.nav-toggle {
  display: block;
}

.header-inner {
  position: relative;
}

/* 2026-08-29：画面いっぱいの帯だったドロワーを、
   ハンバーガーの真下に出る小さなカード型のドロップダウンに変えました。
   ・右端をボタンにそろえる（right: 0＝コンテナの右端＝ボタンの右端）
   ・幅は 240px、狭い画面では画面幅の半分（50vw）まで
   ・角丸＋枠線＋影で、カードとして浮いて見えるようにしています */
.site-nav {
  position: absolute;
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  width: min(240px, 50vw);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  /* 2026-08-30：パネルの地をトップページのヒーローと同じ濃紺グラデーションにしました。
     （.hero と同じ2層。上に薄い青の光、下に濃紺→紺→深い青緑のグラデーション） */
  background:
    radial-gradient(420px 240px at 80% 8%, rgba(95, 168, 242, 0.18), transparent 62%),
    linear-gradient(165deg, var(--navy-deep) 10%, var(--navy) 60%, #0e3d55 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 18px 34px rgba(6, 24, 38, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 2026-08-29：カードに収まるよう、各項目の余白と文字を詰めています。
   2026-08-30：紺地になったので、文字と区切り線を白系にしました。 */
.site-nav a {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #fff;
}

.site-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* 現在のページを示す下線。紺地でも見えるよう、明るい青（--accent-bright）にします。 */
.site-nav a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--accent-bright);
}

.site-nav a:last-child {
  border-bottom: 0;
}

/* ドロワーの中でだけ、下の項目を出します（本文より一回り小さく）。
   2026-08-30：紺地に合わせて、少しだけ落とした白にしています。 */
.nav-extra {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* 2026-08-30：以前はスマホ・タブレットでヘッダーの「お問い合わせ」を隠していましたが、
   横並びメニューを廃止してヘッダーが「ロゴ＋お問い合わせ＋三本線」だけになったため、
   全幅で表示するようにしました（ドロワーの中にも同じリンクが入っています）。 */

/* ドロワー内の「お問い合わせ」。他の項目と区別できるよう、ヘッダーのボタンと同じ
   紺のボタンの形にしています（罫線は付けず、下に少し余白を取ります）。 */
/* ※ 直前の `.site-nav a`（詳細度 0-1-1）が色と角丸を上書きしてしまうため、
   こちらは `.site-nav a.nav-cta-drawer`（0-2-1）で指定しています。 */
/* 2026-08-30：メニュー項目を全て外し、パネルの中身が「お問い合わせ」だけになったので、
   先頭に来たときは上の余白を作らず、パネル自体の余白も詰めます。 */
.site-nav:has(> a.nav-cta-drawer:first-of-type:last-of-type) {
  padding: 8px;
}

.site-nav a.nav-cta-drawer:first-of-type:last-of-type {
  margin-top: 0;
}

.site-nav a.nav-cta-drawer {
  margin-top: 6px;
  padding: 9px 10px;
  /* 2026-08-30：パネルが紺になったので、ボタンだと分かるよう細い白枠だけ足しています
     （地の濃紺と白文字は従来どおりです）。 */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: var(--navy);
  font-size: 13px;
  color: #fff;
  text-align: center;
}

.site-nav a.nav-cta-drawer:hover {
  background: var(--navy-deep);
  color: #fff;
}

.site-nav a.nav-cta-drawer[aria-current="page"] {
  color: #fff;
  box-shadow: none;
}

@media (max-width: 1280px) {
  .header-inner {
    min-height: 56px;   /* 2026-08-29：80px → 56px（PCと同じく約7割） */
  }

  /* 2026-08-30：スマホ・タブレットでは、ヘッダーに出すのは三本線アイコンだけにします。
     「お問い合わせ」はドロワーの中にも入っているため、ヘッダーに出すと二重になります。
     （PC幅＝1281px以上では、従来どおりヘッダーにボタンを出します） */
  .header-cta {
    display: none;
  }

  .brand-logo {
    height: 38px;   /* 2026-08-29：50px → 38px */
  }

  .header-inner {
    gap: 10px;
  }
}


@media (max-width: 420px) {
  /* 開閉ボタンと横に並べても収まるよう、CTAを一回り小さくします。 */
  .header-cta {
    padding: 6px 10px;
    font-size: 12.5px;
  }
}

@media (max-width: 700px) {
  .hero {
    /* 2026-08-29：スマホも同様に上を半分に（64px → 32px）、下は 56px → 44px。 */
    padding: 32px 0 44px;
  }

  .section {
    padding: 60px 0;
  }

  .brand-logo {
    height: 36px;   /* 2026-08-29：44px → 36px */
  }

  .table-outline th {
    width: 120px;
    font-size: 14px;
    padding: 14px 10px;
  }

  .table-outline td {
    padding: 14px 10px;
  }
}

@media (max-width: 420px) {
  /* 開閉ボタンと横に並べても収まる幅に抑える */
  .brand-logo {
    height: 32px;   /* 2026-08-29：40px → 32px */
  }

  .member {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card:hover {
    transform: none;
  }

  .terminal .dot,
  .tl-caret i {
    animation: none;
  }

  /* 2026-08-29：メニューの開閉と三本線→×の動きも止めます（表示・非表示は従来どおり動きます）。 */
  .site-nav,
  .nav-toggle-bars i {
    transition: none;
  }
}

/* ---------- 迷惑送信よけの隠し項目（画面には表示しません） ---------- */

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- サポートAIからのご相談内容の表示 ---------- */

/* サポートAIのページから ?service= / ?plan= 付きで来たときだけ、
   js/ai-params.js が表示します。ai-detail.css と同じ見た目です。 */
.ai-request-note {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 18px;
  border: 1px solid rgba(23, 119, 242, 0.3);
  border-radius: 8px;
  background: rgba(23, 119, 242, 0.06);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}

.ai-request-note-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #1777f2;
  color: #fff;
}


/* ==========================================================================
   認定・登録・加盟団体（about.html の CERTIFICATIONS セクション）だけの詰め指定

   2026-08-30：「3枚のカードの高さを低くしたい」というご指示。
   `.section` `.card` `.card p` はサイト9ページ共通なので値は変えず、
   about.html のこのセクションにだけ `certifications` クラスを付けて上書きしています。
   ※ 2026-08-30 の並べ替えでこのセクションは濃紺の見出し帯（.page-head）の直後に移り、
     セクション上下の余白は標準（84px／スマホ60px）に戻しました。
     いま残しているのは**カードの中身の詰め**だけです。

   ・カードの上下の内側余白：28px → 16px（左右26pxは**変えていません**。
     左右を変えると1行に入る文字数が変わり、`<br>` 以外の折り返し位置がずれるためです）
   ・見出し（h3）と本文の間：12px → 8px
   ・本文の行間：1.85（26.825px）→ 1.45（21.025px）。**font-size は14.5pxのまま**なので、
     折り返し位置は変わりません（行間は行送りだけを変え、1行に入る文字数に影響しません）
   カードの横幅・枠線・角丸・背景・3列の並び（.cards のグリッド）は触っていません。
   ========================================================================== */

/* 2026-08-30：`.section-tight-bottom` は about.html の #members に付けていましたが、
   並べ替えで隣り合うセクションが変わったため外しました（クラス定義は将来のために残します）。 */
.section-tight-bottom {
  padding-bottom: 40px;
}

/* 2026-08-30：セクションの並べ替え（MESSAGE と入れ替えて #price… ではなく
   ページ上部＝濃紺の見出し帯の直後へ移動）にともない、ここにあった
   `.certifications { padding-top: 44px }` は削除しました。
   直前がセクションではなく `.page-head` になり、余白が二重にならなくなったため、
   ほかのセクションと同じ標準の 84px（スマホ60px）に戻しています。
   カードの内側の詰め（padding・行間）はそのまま残しています。 */

.certifications .card {
  padding-top: 16px;
  padding-bottom: 16px;
}

.certifications .card h3 {
  margin-bottom: 8px;
}

.certifications .card p {
  line-height: 1.45;
}

@media (max-width: 700px) {
  .section-tight-bottom {
    padding-bottom: 28px;
  }

}


/* ==========================================================================
   お知らせページ（news.html）だけの詰め指定

   2026-08-30：「ページ全体の高さを低くしたい」というご指示。
   `.page-head` `.section` `.news-item` `.notice-facts` はいずれも複数ページで
   使い回しているクラスなので値は変えず、news.html の <body> に付けた
   `page-news` で囲って上書きしています（`.page-services …` と同じやり方）。

   **文字サイズ・文言・リンク・1カラムの構成は変えていません。**
   行間（line-height）は行送りだけを変えるもので、1行に入る文字数は
   font-size と幅で決まるため、**折り返し位置は変わりません**。
   ========================================================================== */

/* 1) ページ上部（濃紺の見出し帯） */
.page-news .page-head {
  padding: 40px 0 34px;      /* 64px / 58px から */
}

.page-news .page-head .desc {
  margin-top: 10px;          /* 14px から */
}

/* 2) 本文セクションの上下 */
.page-news main .section {
  padding: 44px 0;           /* 84px から */
}

/* 3) お知らせ1件ぶんの上下（区切り線の上下スペース） */
.page-news .news-item {
  padding: 18px 0;           /* 28px から */
}

/* 各かたまりの先頭記事は、元どおり上を詰めたままにします
   （`.news-item:first-of-type`（0-2-0）は上の指定と同じ詳細度で、
     後ろに書いたこちらが負けるため、ここで書き直しています）。 */
.page-news .news-item:first-of-type {
  padding-top: 0;
}

/* 4) 日付・タグの行と見出しの間
   ※ `.news-meta` は `<p class="news-meta">` なので、下の
     `.page-news .news-item p`（0-2-1）に負けます。ここは3クラス（0-3-0）にすること。 */
.page-news .news-item .news-meta {
  margin-bottom: 5px;        /* 8px から */
}

/* 5) 見出しと本文の間 */
.page-news .news-item h2 {
  margin-bottom: 8px;        /* 12px から */
}

.page-news .news-item h3 {
  margin: 16px 0 6px;        /* 26px / 8px から */
}

/* 6) 本文の行間と段落間。font-size は据え置きなので折り返しは変わりません。 */
.page-news .news-item p,
.page-news .news-item li {
  line-height: 1.6;          /* 1.85（29.6px）から */
}

.page-news .news-item p {
  margin-bottom: 12px;       /* 19.2px から */
}

.page-news .news-item ul,
.page-news .news-item ol {
  margin-bottom: 10px;       /* 14px から */
}

.page-news .news-item li {
  margin-bottom: 2px;        /* 4px から */
}

/* 7) お知らせの中の事実表記リスト（.notice-facts）の表 */
.page-news .notice-facts {
  margin-bottom: 14px;       /* 22px から */
}

.page-news .notice-facts dt,
.page-news .notice-facts dd {
  padding: 7px 0;            /* 11px から */
}

@media (max-width: 700px) {
  .page-news .page-head {
    padding: 32px 0 28px;
  }

  .page-news main .section {
    padding: 32px 0;         /* スマホの既定60pxから */
  }
}


/* ==========================================================================
   お問い合わせページ（contact.html）だけの詰め指定

   2026-08-30：「ページ全体の高さを低くしたい」というご指示。
   `.page-head` `.section` `.form-note` `.field` `.contact-side` はいずれも
   複数ページで使い回しているクラスなので値は変えず、contact.html の <body> に
   付けた `page-contact` で囲って上書きしています（`.page-services …` と同じやり方）。

   **文字サイズ・入力欄の横幅・項目の種類・文言・2カラムの構成は変えていません。**
   縮めているのは余白（padding / margin）だけです。
   ========================================================================== */

/* 1) ページ上部（濃紺の見出し帯） */
.page-contact .page-head {
  padding: 28px 0 24px;      /* 64px / 58px → 40px / 34px → さらに 28px / 24px */
}

.page-contact .page-head .desc {
  margin-top: 8px;           /* 14px → 10px → 8px */
}

/* 2) 本文セクションの上下 */
.page-contact main .section {
  padding: 32px 0;           /* 84px → 44px → 32px */
}

/* 3) 個人情報の取り扱いに関する注意書きボックス */
.page-contact .form-note {
  padding: 8px 20px;         /* 18px → 12px → 8px（左右はそのまま） */
  margin-bottom: 14px;       /* 36px → 22px → 14px */
}

/* 4) 入力項目どうしの間隔と、ラベル → 入力欄の間隔 */
.page-contact .field {
  margin-bottom: 10px;       /* 26px → 16px → 10px */
}

.page-contact .field label {
  margin-bottom: 3px;        /* 8px → 5px → 3px */
}

/* 「例）〜」などの補足文と入力欄の間隔 */
.page-contact .field .hint {
  margin-top: 3px;           /* 6px から */
}

/* 5) 右カラム「お電話・メールでのお問い合わせ」ボックス */
.page-contact .contact-side {
  padding: 10px 24px;        /* 26px → 16px → 10px（左右はそのまま） */
}

.page-contact .contact-side h2 {
  margin-bottom: 5px;        /* 14px → 8px → 5px */
}

.page-contact .contact-side dt {
  margin-top: 6px;           /* 14px → 9px → 6px */
}

.page-contact .contact-side dd {
  margin-top: 0;             /* 2px → 1px → 0 */
}

/* ボックス末尾の「ご返信は2営業日以内〜」。HTML側の style="margin-top:18px" を
   contact.html で 8px に直しています（インラインなのでCSSからは上書きできません）。 */

@media (max-width: 700px) {
  .page-contact .page-head {
    padding: 24px 0 20px;
  }

  .page-contact main .section {
    padding: 24px 0;         /* スマホの既定60pxから */
  }
}


/* ==========================================================================
   お問い合わせフォームの入力支援（contact.html / terms.html）
   js/contact-form.js とセットです。
   ========================================================================== */

/* 入力が終わった項目の見た目。緑の枠線と、右端のチェックマーク。
   チェックマークは背景画像なので、入力欄の幅は変わりません
   （右側の内側余白だけを広げて、文字と重ならないようにしています）。 */
.page-contact .field input.is-filled,
.page-contact .field select.is-filled,
.page-contact .field textarea.is-filled {
  border-color: #1f8a5b;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px 17px;
  padding-right: 38px;
}

/* <select> は右端にブラウザ標準の矢印が出るので、その手前に置きます。 */
.page-contact .field select.is-filled {
  background-position: right 32px center;
  padding-right: 56px;
}

/* 複数行の入力欄は、1行目の高さに合わせて上寄せにします。 */
.page-contact .field textarea.is-filled {
  background-position: right 12px top 12px;
}

/* 入力中（フォーカス中）は、これまでどおり青い枠線を優先します。 */
.page-contact .field input.is-filled:focus,
.page-contact .field select.is-filled:focus,
.page-contact .field textarea.is-filled:focus {
  border-color: var(--accent);
}

/* 形式が正しくないときの赤い枠線は、チェックマークより優先します。 */
.page-contact .field input[aria-invalid="true"],
.page-contact .field select[aria-invalid="true"],
.page-contact .field textarea[aria-invalid="true"] {
  border-color: #c0392b;
  background-image: none;
}

/* 利用規約・個人情報保護方針に出す「戻る」ボタン。
   js/contact-form.js が本文（.policy）の下に1つだけ差し込みます。 */
.back-to-contact {
  margin: 0;
}

.back-to-contact-bottom {
  margin: 34px 0 0;
}

/* 白地・黒文字・黒い枠線のボタン。
   大きさ・角丸・文字の太さは共通の .btn のままなので、
   .btn-primary と入れ替えても見た目の寸法は変わりません。 */
.btn-back {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-back:hover {
  /* 押せることが分かる程度の、ごく薄いグレー */
  background: #f2f3f4;
  color: var(--ink);
}


/* ==========================================================================
   会社紹介ページ（about.html）だけの詰め指定

   2026-08-30：「ページの縦の長さを短くしたい」というご指示。
   `.page-head` `.section` `.section-head` `.stats` `.table-outline` `.cards`
   `.member-grid` などはいずれも複数ページで使い回しているクラスなので値は変えず、
   about.html の <body> に付けた `page-about` で囲って上書きしています
   （`.page-news` / `.page-contact` と同じやり方）。

   **文字サイズ・文言・カラム数・画像サイズは変えていません。**
   縮めているのは余白（padding / margin / gap）と本文の行間だけです。
   ========================================================================== */

/* 1) ページ上部（濃紺の見出し帯） */
.page-about .page-head {
  padding: 40px 0 34px;      /* 64px / 58px から */
}

.page-about .page-head .desc {
  margin-top: 10px;          /* 14px から */
}

/* 2) セクションどうしの間隔（上下の余白） */
.page-about main .section {
  padding: 48px 0;           /* 84px から。48＋48＝96px が section 間の空きです */
}

/* 3) 見出しのかたまりと、その下の本文との間隔 */
.page-about .section-head {
  margin-bottom: 26px;       /* 42px から */
}

.page-about .section-head p {
  margin-top: 10px;          /* 14px から */
}

/* 4) 本文（代表挨拶などの段落）の行間と段落間。文字サイズは変えていません。
      認定カードの中の文（.certifications .card p）は詳細度が上なので 1.45 のままです。 */
.page-about main .section > .container > p {
  line-height: 1.7;          /* 1.85 から */
  margin-bottom: 0.85em;     /* 1.2em から */
}

/* 5) 会社概要：数字の4項目 */
.page-about .stats {
  gap: 14px 32px;            /* 22px / 48px から */
  margin-top: 4px;           /* 8px から */
}

.page-about .stat {
  padding: 4px 0 4px 16px;   /* 6px 0 6px 18px から（左の罫線からの距離） */
}

/* 6) 会社概要の表 */
.page-about .table-outline th,
.page-about .table-outline td {
  padding: 10px 14px;        /* 16px 14px から（左右はそのまま） */
}

/* 7) 認定・登録・加盟団体：カードどうしの間隔
      （カードの内側の余白は .certifications .card 側で 16px に詰め済みです） */
.page-about .cards {
  gap: 16px;                 /* 22px から */
}

/* 8) パートナー：メンバーカード */
.page-about .member-grid {
  gap: 10px 14px;            /* 14px 18px から */
}

.page-about .member {
  padding: 10px;             /* 14px から */
}

.page-about .member-note {
  margin-top: 14px;          /* 22px から */
}

@media (max-width: 700px) {
  .page-about .page-head {
    padding: 32px 0 28px;
  }

  .page-about main .section {
    padding: 36px 0;         /* スマホの既定60pxから */
  }

  .page-about .table-outline th,
  .page-about .table-outline td {
    padding: 9px 10px;       /* 14px 10px から */
  }

  .page-about .member {
    padding: 9px;            /* 12px から */
  }
}

/* 2026-08-30：お問い合わせフォームの送信ボタン。
   青ベタ塗り＋白文字 → 白地＋黒文字＋黒い枠線にしました。
   .page-contact と #contact-form で囲っているので、
   ほかのページの .btn-primary（青いまま）には影響しません。
   大きさ・角丸は共通の .btn のままです
   （.btn の border は 1px solid transparent なので、色を付けても寸法は変わりません）。 */
.page-contact #contact-form .btn-primary {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

.page-contact #contact-form .btn-primary:hover {
  /* 押せることが分かる程度の、ごく薄いグレー */
  background: #f2f3f4;
  color: var(--ink);
  border-color: var(--ink);
}

/* 2026-08-30：サービスカードの右下に置くサービスロゴ（our-services.html）。
   各サービスの公式サイトのアイコンを img/service-logo/ に保存して使っています。

   カード（.card）は position: relative なので、ロゴは絶対配置で右下に置いています。
   位置はカードの内側余白と同じ（右18px・下14px）にそろえ、本文の右端・下端と
   きれいに並ぶようにしました。文字・タグ・リンクと重ならないよう、
   .card-has-logo 側で下の余白を広げてロゴの居場所を作っています
   （文字サイズ・タグ・リンクの位置は変えていません）。
   高さは34pxでそろえ、横幅は縦横比なりに収めます（object-fit: contain）。

   padding は .page-services .cards-product .card（0-3-0）まで指定があるので、
   打ち消せるように同じ強さのセレクタを併記しています。 */
.page-services .cards-product .card-has-logo,
.page-services .card-has-logo,
.cards-product .card-has-logo,
.card-has-logo {
  /* 2026-08-30：最後のリンク・タグとロゴの間に空きすぎだったので詰めました。
     94px（ロゴ1個ぶんを丸ごと空ける）→ 40px。
     ロゴは右下の絶対配置で、最後の行（リンクやタグ）は左に寄っているため、
     縦に少し重なる位置まで詰めても、横では重なりません。
     この値がカードの下側の余白そのものになります。 */
  padding-bottom: 40px;
}

/* 2026-08-30：「他のロゴが小さすぎる、サポートAIロゴと同じ大きさに」というご指示で
   34px → 68px に拡大しました。
   サポートAIだけは横長の文字ロゴ（142×34）なので、正方形のマークと
   縦の高さではそろえられません。そこで **見た目の面積** をそろえています。
   142 × 34 ＝ 4,828 平方ピクセル → 同じ面積の正方形は 69px角。
   きりのよい 68px にしたので、5つのロゴはほぼ同じ大きさに見えます。
   元画像は 180px角・192px角・ベクター（SVG）なので、68pxまで拡大しても荒れません。 */
.card-logo {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 68px;
  height: 68px;
  object-fit: contain;
  object-position: right bottom;
}

/* =========================================================
   2026-08-30：our-services.html のカードの高さをそろえます。

   下段3枚（補助金UP／Manager／マガジン）は現状のままにして、
   中身の多い **上段3枚だけ** 余白を詰めて高さを近づけます。
   対象は .cards-product の1〜3番目のカードです。
   文字サイズ・文言・ロゴの大きさ・3カラムの構成は変えていません。
   詰めているのは「要素どうしの間隔」と「カードの内側の余白」、
   それにタグの内側の余白と本文の行間です。
   ========================================================= */

.page-services .cards-product .card:nth-child(-n + 3),
.cards-product .card:nth-child(-n + 3) {
  padding-top: 10px;
  padding-bottom: 24px;
}

.page-services .cards-product .card:nth-child(-n + 3) .card-num,
.cards-product .card:nth-child(-n + 3) .card-num {
  margin-bottom: 2px;
  line-height: 1.2;
}

.page-services .cards-product .card:nth-child(-n + 3) h3,
.cards-product .card:nth-child(-n + 3) h3 {
  margin-bottom: 3px;
  line-height: 1.3;
}

.page-services .cards-product .card:nth-child(-n + 3) p,
.cards-product .card:nth-child(-n + 3) p {
  margin-bottom: 6px;
  /* 行間だけを詰めています（文字の大きさは13.5pxのまま） */
  line-height: 1.3;
}

.page-services .cards-product .card:nth-child(-n + 3) .tags,
.cards-product .card:nth-child(-n + 3) .tags {
  margin-top: 4px;
  gap: 2px;
}

.page-services .cards-product .card:nth-child(-n + 3) .tags li,
.cards-product .card:nth-child(-n + 3) .tags li {
  /* 3px 8px → 1px 8px。文字の大きさ（11px）は変えていません。 */
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1.25;
}

/* ComplAI®（3枚目）だけは、最後のタグの行と右下の「近々公開予定」が
   同じ高さに来て重なるため、下の余白を少し多めに取ります。
   文字の高さ21px＋下余白14px＝35pxなので、そこに3px足した38pxです。 */
.page-services .cards-product .card:nth-child(3),
.cards-product .card:nth-child(3) {
  padding-bottom: 38px;
}

.page-services .cards-product .card:nth-child(-n + 3) > ul:not(.tags),
.cards-product .card:nth-child(-n + 3) > ul:not(.tags) {
  margin-top: 4px;
}

/* 2026-08-30：ComplAI® はロゴがまだ無いため、ほかのカードのロゴと
   同じ位置（右18px・下14px）に「近々公開予定」の文字を置いています。
   ロゴと同じくらいの存在感になるよう太字にしつつ、色は本文より薄い
   グレー（#8a93a2）にして、カードの中で主張しすぎないようにしました。 */
/* .page-services .cards-product .card p（0-3-1）に文字サイズと色の指定があるので、
   打ち消せるように同じ強さのセレクタを併記しています（padding と同じやり方です）。 */
.page-services .cards-product .card .card-logo-text,
.page-services .card .card-logo-text,
.cards-product .card .card-logo-text,
.card-logo-text {
  position: absolute;
  right: 18px;
  bottom: 14px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #8a93a2;
}

/* 2026-08-30：「サポートAI」だけは正方形のマークではなく、
   ai-samurai.html のヒーロー見出しと同じ書体・太さ（900）の文字ロゴです。
   書体はサイト本文と同じ指定を画像（SVG）側に持たせているので、
   見出しと同じ字面で表示されます。
   ほかのロゴと**高さ・位置は同じ**にして、横幅だけ文字なりに伸ばします。 */
.card-logo-wordmark {
  width: auto;
  height: 34px;
  max-width: calc(100% - 36px);
}

@media (max-width: 700px) {
  .page-services .cards-product .card-has-logo,
  .page-services .card-has-logo,
  .cards-product .card-has-logo,
  .card-has-logo {
    /* 2026-08-30：36pxまで詰めたところ、320px幅で長いリンク文字が
       ロゴに重なりました。ロゴの上端（下から74px）までは空けます。 */
    padding-bottom: 76px;
  }

  /* 上段3枚の詰めた指定も、スマホでは同じ下余白に戻します */
  .page-services .cards-product .card:nth-child(-n + 3),
  .cards-product .card:nth-child(-n + 3),
  .page-services .cards-product .card:nth-child(3),
  .cards-product .card:nth-child(3) {
    padding-bottom: 76px;
  }

  .card-logo {
    width: 60px;
    height: 60px;
  }

  .card-logo-wordmark {
    width: auto;
    height: 30px;
  }

  .page-services .cards-product .card .card-logo-text,
  .page-services .card .card-logo-text,
  .cards-product .card .card-logo-text,
  .card-logo-text {
    font-size: 14px;
  }
}

/* =========================================================
   2026-08-30：TECH STACK（services.html「主な対応技術」）の地色を、
   濃紺から明るいネイビーグレーに変更しました。

   .section-dark は付けたままにして、このクラスで
   「地色」と「文字・枠線の色」だけを上書きしています
   （タグの形・並び・文言・4カラムの構成には触れていません）。

   打ち消す相手の詳細度に合わせて、セレクタは次のようにしています。
     ・.section-dark .section-head .en / p（0-3-0）→ 0-4-0
     ・.section-dark .tags li（0-2-0）        → 0-3-0
     ・.stack h3（0-1-1）                     → 0-2-1

   配色は #e9e9eb を基準に、本文 #5b6675 で 4.7:1、
   見出し #0a2438 で 12.9:1 を確保しています。
   ========================================================= */
.section-stack-light,
.section-dark.section-stack-light {
  /* 2026-08-30（再修正）：青みのあるグレーから、ニュートラルなごく淡いグレーへ。
     右上の白いにじみは、この明るさではほぼ見えないので外しました。
     2026-08-30（3回目）：PROCESSを直下に移したことで、上下とも #f4f7f9 の
     セクションに挟まれる位置になりました。グラデーションだと明るい側の端
     （#f2f2f3）が #f4f7f9 とほぼ同じ明るさで境界が消えるため、
     上下どちらに対しても同じだけ差が出るフラットな1色にしています
     （#e9e9eb と #f4f7f9 の明度差は 1.13 倍）。 */
  background: #e9e9eb;
  color: var(--ink);
}

.section-dark.section-stack-light .section-head {
  color: var(--ink);
}

.section-dark.section-stack-light .section-head .en {
  color: var(--accent-dark);
}

.section-dark.section-stack-light .section-head h2 {
  color: var(--navy);
}

.section-dark.section-stack-light .section-head p {
  color: var(--ink-mute);
}

/* FRONTEND / BACKEND / AI・LLM / INFRA・OTHER のラベルと、その下の区切り線 */
.section-stack-light .stack h3 {
  color: var(--accent-dark);
  border-bottom-color: rgba(8, 35, 74, 0.2);
}

/* タグは白地＋紺文字に。形（padding 4px 10px・角丸4px・枠線1px）はそのままです。 */
.section-dark.section-stack-light .tags li {
  background: #fff;
  border-color: rgba(8, 35, 74, 0.28);
  color: var(--navy);
}

/* 2026-08-30：PROCESS「開発の進め方」（services.html のSTEP 01〜05）の
   カードの高さを詰めます。文字サイズ・文言・カード幅・列数（PC5列）は変えていません。

   同じページの .steps-compact（「申請から開発、その後まで」の4ステップ）には
   かからないよう、:not(.steps-compact) を付けて分けています
   （詳細度は 0-3-1 で、.page-services .steps li の 0-2-1 に勝ちます）。

   行の高さをそろえる grid-auto-rows: 1fr を入れているので、
   画面幅が狭くて折り返したときも5枚の高さが同じになります。 */
.page-services .steps:not(.steps-compact) {
  grid-auto-rows: 1fr;
}

.page-services .steps:not(.steps-compact) li {
  padding: 11px 16px 10px;       /* 16/16/14 → 11/16/10 */
}

.page-services .steps:not(.steps-compact) li::before {
  margin-bottom: 4px;            /* 6 → 4 */
  line-height: 1.3;              /* 本文と同じ1.85を継いでいたので詰めます */
}

.page-services .steps:not(.steps-compact) strong {
  margin-bottom: 3px;            /* 5 → 3 */
  line-height: 1.35;             /* 1.45 → 1.35 */
}

.page-services .steps:not(.steps-compact) p {
  line-height: 1.5;              /* 1.6 → 1.5 */
}

/* 2026-08-30：SUBSIDY × AI（services.html「補助金を活用したAI開発」）の
   区切りを分かりやすくします。直前は PROCESS（地色 #f4f7f9）で、
   こちらは白地なので明度差が1.06倍しかなく、境目がほとんど見えませんでした。

   ・上に薄いグレーの罫線を1本入れる（サイト共通の --line）
   ・上の余白を 32px → 60px に広げて、間に空間をつくる

   2026-08-30（追加）：背景色も付けました。
   ご指定の #f5f7fb は、直前の PROCESS（#f4f7f9）とほぼ同じ明るさで
   境目が消えてしまうため（明度差 1.003 倍）、同じ青みのグレー系のまま
   もう少し濃い #e4ebf5 にしています。これで
     ・上の PROCESS（#f4f7f9）との差  1.115倍
     ・中の白いカードとの差          1.200倍
   となり、セクションの範囲がはっきり分かります。
   文字は既存の色のままで、本文 4.9:1／見出し 13.2:1／ENラベル 8.6:1 を確保。
   id 指定（1-0-0）なので、このセクションだけに効きます。 */
#subsidy-ai {
  background: #e4ebf5;
  border-top: 1px solid var(--line);
  padding-top: 60px;
}

@media (max-width: 700px) {
  #subsidy-ai {
    padding-top: 44px;
  }
}