@charset "UTF-8";

/* ==========================================================================
   Reset
   カンプ再現を前提とした最小構成のリセット。
   ブラウザ既定の装飾を落としつつ、アクセシビリティ上必要な挙動は残す。
   ========================================================================== */

/* box-sizing
   padding と border を width に含める。
   これが無いと「幅300pxにpadding20px」で実寸340pxになり、カンプと合わなくなる。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 既定マージンの除去
   見出し・段落・リストの上下マージンはブラウザごとに値が違う。
   余白は CSS変数のスケールで統一管理するため、一度ゼロに戻す。 */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

/* 見出しのフォントサイズ・太さ
   既定の h1=2em などはカンプと一致しないため継承に戻す。
   サイズは各セクションの CSS で明示する。 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* リストの装飾除去
   role="list" を付けたリストは読み上げ対象として残る。
   装飾を消すと一部スクリーンリーダーがリストとして認識しなくなるため、
   マークアップ側で role="list" を付けること。 */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ルート要素 */
html {
  /* ページ内リンクでスクロールを滑らかに */
  scroll-behavior: smooth;
  /* iOS で横向きにしたとき文字が拡大されるのを防ぐ */
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  /* line-height は日本語では 1.7〜1.8 が読みやすい。
     英語圏のリセットでよく使われる 1.5 は日本語には詰まって見える。 */
  line-height: 1.8;
  /* 約物（括弧・句読点）の余分な空きを詰める */
  font-feature-settings: "palt";
  /* 単語途中での改行を避けつつ、長い英単語ははみ出させない */
  word-break: normal;
  overflow-wrap: anywhere;
  /* 文字の描画を滑らかに */
  -webkit-font-smoothing: antialiased;
}

/* 見出しやボタンなど短い文字列は行間を詰める */
h1, h2, h3, h4, h5, h6,
button {
  line-height: 1.4;
}

/* メディア要素
   inline 既定だと下に4pxの隙間ができる。これが「なぜか余白が残る」の原因になりやすい。 */
img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* フォーム要素
   フォントは既定で継承されないため明示する。
   これが無いとフォーム内だけ別の書体になる。 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

/* リンク
   色とアンダーラインは各所で指定する。 */
a {
  color: inherit;
  text-decoration: none;
}

/* テーブル */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* キーボード操作時のフォーカス表示
   マウス操作では出さず、Tabキー操作時のみ表示する。
   outline を全消しするとキーボードだけで操作する人が現在地を見失う。 */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* アニメーションを減らす設定をしている人への配慮
   OS側で「視差効果を減らす」を有効にしている場合、動きを抑制する。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 視覚的には隠すが読み上げには残す
   ロゴ画像内のテキストや、アイコンのみのボタンの説明文に使う。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Design tokens
   色・余白・書体はすべてここで定義し、各セクションからは変数名で呼ぶ。
   「やっぱり色を変えたい」となったとき、ここ1行の修正で全ページに反映される。
   ========================================================================== */

:root {
  /* Color ------------------------------------------------------------- */
  /* カンプを原寸で測った結果、見出しの青は3種類が使い分けられていた */
  --color-main: #127fae;        /* 日本語見出しの青 */
  --color-main-dark: #0b6288;   /* ホバー時など、少し沈めたい場面 */
  --color-heading-en: #067195;  /* 英字セリフ見出し（Message / Our business など） */
  --color-label: #4b9ec1;       /* 縦書きラベルと装飾アイコン */
  --color-accent: #ffc248;      /* ロゴ・アイコンのオレンジ */
  --color-sky: #80c2d6;         /* フッター・帯の水色 */
  --color-sky-muted: #a0c6d2;   /* ボタンの水色 */
  --color-sky-pale: #d2e3ed;    /* 淡い背景 */
  --color-text: #4c4b48;        /* 本文 */
  --color-text-light: #6b6a67;  /* 補助テキスト */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f8fa;      /* 薄いグレーの背景 */
  --color-navy: #2c3f4d;        /* パートナー企業セクションの濃色背景 */
  --color-lead: #4e4f4f;        /* Message のリード文（濃いグレー） */
  --color-hero-en: #5fa6b6;     /* 下層ページのヒーロー英字（写真の上に乗る淡い青） */
  --color-partner-label: #b8edff; /* 濃色セクションの水色見出し・縦ラベル */

  --color-block: #bed6df;       /* 事業紹介の水色ブロック */
  --color-line: #d8dee2;        /* 罫線 */

  /* Brand ------------------------------------------------------------
     ロゴSVGから取り出した正確なブランドカラー。
     ロゴは黄→緑→水色→青のグラデーションで構成されている。 */
  --color-brand-yellow: #f5bc1a;
  --color-brand-orange: #f4a417;
  --color-brand-green: #8fcfce;
  --color-brand-cyan: #76c9e2;
  --color-brand-blue: #2ca6e0;
  --color-logo-gray: #636161;   /* ロゴの「EN」とタグラインの文字色 */

  /* Hero / Header ----------------------------------------------------
     写真の上に重なる文字の色。背景が明るいため本文用より淡い。
     ただしナビだけは明るい空の写真の上でコントラスト比が 2.45 しか出ず読めないため、
     カンプの #5b95a5 より濃くしてある（2026-09-28・依頼者の指示）。
     写真側の明るさの実測（下位5%）は index が 0.7192、下層ページが 0.7856。
     #0f5e75 なら最悪の箇所で 5.34、いちばん暗い画素でも 4.91 で 4.5:1 を満たす。 */
  --color-nav: #0f5e75;
  --color-nav-hover: #0b4a5c;
  --shadow-nav-sub: 0 8px 24px rgba(15, 94, 117, 0.14); /* 事業・サービスの下に出す一覧の影 */
  --color-hero-catch: #2d7687;
  --color-hero-band: rgba(23, 118, 143, 0.45);
  --color-hero-band-edge: rgba(20, 96, 117, 0.55);

  /* AI活用コンサル（business-ai.html）----------------------------------
     B案カンプ（2026-10-31）の配色。このページだけで使う。
     カンプの青 #397f91 は白地で 4.55:1 だが、淡い水色・淡いグレーの面では
     4.0〜4.3:1 に落ちる。24px未満の文字には一段濃い --color-ai-accent-text を使う。
     ボタンの文字もカンプの #40565e だと水色の面で 4.29:1 なので少し濃くした。 */
  --color-ai-accent: #397f91;       /* 見出し・大きい数字（24px以上） */
  --color-ai-accent-text: #2f6e7e;  /* 小見出し・ラベルなど24px未満の青い文字 */
  --color-ai-text: #40565e;         /* 本文 */
  --color-ai-pale: #e7f1f3;         /* 淡い水色の面 */
  --color-ai-gray: #f7f9f9;         /* 淡いグレーの面 */
  --color-ai-button: #a3c7d0;
  --color-ai-button-hover: #8fbac5;
  --color-ai-button-text: #34474e;  /* 水色のボタン上で 5.4:1 */
  /* 相談ボタン（.ai-button）の色。2026-10-31 依頼者の指示で淡い水色から変更。
     CLAUDE.md のメインカラー。ヒーローの濃い青緑の帯と見分けられる青にした。白文字で 5.2:1 */
  --color-ai-cta: #0074a7;
  --color-ai-band: #e9c777;         /* 「御社の現場と、GOENの実践をつなぐ」の帯 */
  /* ヒーロー写真の下側（山並み）は暗く、白い薄幕なしでは注記の文字が 2.5:1 しか出ない */
  --color-ai-veil-strong: rgba(255, 255, 255, 0.62);
  --color-ai-veil-soft: rgba(255, 255, 255, 0.45);

  /* Typography -------------------------------------------------------- */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 英字の見出しはカンプが Times 系のため、字幅の合う Tinos を先に置く。
     日本語は Tinos に字がないので自動的に Noto Serif JP が使われる。 */
  --font-serif: "Tinos", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 英字も Noto Serif JP で組む明朝（AI活用コンサルのB案。カンプは英字も Noto Serif JP） */
  --font-serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-base: 1rem;    /* 16px */
  --fs-body: 1.0625rem; /* 17px カンプの本文サイズ */
  --fs-md: 1.125rem;  /* 18px */
  --fs-lead: 1.25rem; /* 20px 代表挨拶のリード文・署名 */
  --fs-lg: 1.5rem;    /* 24px */
  --fs-xl: 2rem;      /* 32px */
  --fs-2xl: 2.5rem;   /* 40px */
  --fs-3xl: 3.5rem;   /* 56px */

  /* Spacing ------------------------------------------------------------
     8px を基準単位とする。中途半端な余白を作らないための共通スケール。 */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;
  --space-2xl: 140px;

  /* Layout ------------------------------------------------------------ */
  --container: 1200px;
  --gutter: 24px;
  --header-height: 200px;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ==========================================================================
   Layout
   ========================================================================== */

/* 左右の余白を共通化する箱。中身の最大幅を揃えるために全セクションで使う。 */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* セクションの上下余白。セクションごとに書かず、この1クラスで統一する。 */
.section {
  padding-block: var(--space-2xl);
}

@media (max-width: 768px) {
  :root {
    --space-2xl: 72px;
    --space-xl: 56px;
    --gutter: 20px;
    --header-height: 76px;
  }
}

/* ==========================================================================
   Section titles（全ページ共通の見出し部品）
   ========================================================================== */

/* 英字の見出し（Message / Our business / Topics / Contact） */
.section-title-en {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 400;
  color: var(--color-heading-en);
  line-height: 1.3;
}

/* 日本語の見出し（私たちが「ご縁」に込める想い など） */
.section-title-ja {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--color-main);
  /* カンプの字間はかなり広い（1文字あたりの送り 48.4px / 文字 40px） */
  letter-spacing: 0.22em;
  line-height: 1.3;
}

/* 見出しに添える小さい方の文字（事業内容 / 新着情報 など） */
.section-title-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  /* カンプの「新着情報」「お問い合わせ」は32px相当 */
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* 「Our business 事業内容」のように、英字の右へ並べる小見出し */
.section-title-sub--inline {
  display: inline;
  margin-top: 0;
  margin-left: 35px;
  font-size: 26px;
  letter-spacing: 0.23em;
}

@media (max-width: 768px) {
  .section-title-en { font-size: var(--fs-xl); }
  .section-title-sub--inline { font-size: var(--fs-base); margin-left: 16px; }
  .section-title-ja { font-size: var(--fs-lg); }
  .section-title-sub { font-size: var(--fs-lg); }
}

/* ==========================================================================
   Header（全ページ共通）
   ヒーロー画像の上に重ねて表示する。背景色は持たせない。
   ========================================================================== */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: var(--header-height);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 50px;
}

.site-logo img {
  /* 画面が狭いときはロゴも縮める。固定幅だとナビを押し出して折り返す。 */
  width: clamp(150px, 15vw, 208px);
  height: auto;
}

.global-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}

.global-nav__list a {
  display: block;
  padding-block: 4px;
  /* 項目名の途中で改行させない */
  white-space: nowrap;
  font-size: clamp(13px, 1.25vw, 17px);
  letter-spacing: clamp(0.04em, 0.2vw, 0.2em);
  color: var(--color-nav);
  transition: color 0.2s;
}

.global-nav__list a:hover {
  color: var(--color-nav-hover);
}

/* 事業・サービスの下に出す事業一覧（2026-10-31 追加・依頼者の指示）。
   マウスを乗せたとき・Tabキーで「事業・サービス」に移ったときに開く。JavaScript は使わない。
   「事業・サービス」そのものを押すと、従来どおりトップの事業紹介へ移動する。 */
.global-nav__has-sub {
  position: relative;
}

/* 一覧があることを示す小さな下向きの印 */
.global-nav__has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  vertical-align: 0.3em;
  transform: rotate(45deg);
}

.global-nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 30;
  min-width: 220px;
  padding-block: var(--space-xs);
  background: var(--color-bg);
  box-shadow: var(--shadow-nav-sub);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

/* 「事業・サービス」から一覧へマウスを動かす途中で閉じないよう、すき間を透明な帯で埋める */
.global-nav__sub::before {
  content: "";
  position: absolute;
  inset: -14px 0 auto;
  height: 14px;
}

.global-nav__has-sub:hover .global-nav__sub,
.global-nav__has-sub:focus-within .global-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 6px);
}

/* .global-nav__list a の字間・可変サイズは一覧には大きすぎるので上書きする */
.global-nav__sub a {
  padding: 10px var(--space-md);
  font-size: 15px;
  letter-spacing: 0.06em;
  transition: color 0.2s, background-color 0.2s;
}

.global-nav__sub a:hover {
  background: var(--color-bg-alt);
}

/* ハンバーガーボタン（スマホのみ表示） */
.nav-toggle {
  display: none;
}

@media (max-width: 768px) {
  .site-header__inner {
    padding-inline: var(--gutter);
  }

  .site-logo img {
    width: 150px;
  }

  /* メニューは閉じた状態を初期値とし、開閉は js/main.js で切り替える */
  .global-nav {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .global-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .global-nav__list {
    flex-direction: column;
    gap: var(--space-md);
  }

  .global-nav__list a {
    font-size: var(--fs-md);
    color: var(--color-main);
  }

  /* スマホにはホバーが無いので、事業一覧は「事業・サービス」の下に最初から並べる */
  .global-nav__has-sub {
    text-align: center;
  }

  .global-nav__has-sub > a::after {
    content: none;
  }

  .global-nav__sub {
    position: static;
    min-width: 0;
    margin-top: var(--space-xs);
    padding-block: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /* スマホでも触れると :hover / :focus-within が付く。PC用の「中央寄せ＋下へずらす」が
     効くと一覧が左へ70pxずれて、押した指がリンクから外れる（2026-10-31 実際に起きた） */
  .global-nav__has-sub:hover .global-nav__sub,
  .global-nav__has-sub:focus-within .global-nav__sub {
    transform: none;
  }

  .global-nav__sub::before {
    content: none;
  }

  .global-nav__sub a {
    padding: 6px 0;
    font-size: var(--fs-sm);
    color: var(--color-text-light);
  }

  .global-nav__sub a:hover {
    background: none;
  }

  /* メニューを開いているあいだ、背面のページが動かないようにする。
     このルールはスマホ幅の中だけに置く。こうしておくと、開いたまま
     ウィンドウを広げてもスクロールが止まったままにならない。 */
  body.is-nav-open {
    overflow: hidden;
  }

  .nav-toggle {
    position: relative;
    z-index: 20;
    display: block;
    width: 32px;
    height: 24px;
  }

  /* 3本線。中央の線を実体とし、上下は疑似要素で作る */
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    position: absolute;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--color-main);
    transition: transform 0.3s, opacity 0.3s;
  }

  .nav-toggle__bar {
    top: 11px;
  }

  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    content: "";
  }

  .nav-toggle__bar::before { top: -9px; }
  .nav-toggle__bar::after  { top: 9px; }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* ==========================================================================
   Hero（トップページ）
   ========================================================================== */

/* ファーストビューを画面の高さいっぱいにする。
   単位は vh ではなく svh。スマホの vh は「アドレスバーが隠れたときの高さ」なので、
   読み込み直後は下端がバーの裏に入り、スクロールで見える高さが変わるたびに
   ページが飛び跳ねる。svh は「バーが出ている状態の高さ」で固定なので揺れない。
   （dvh はスクロール中に伸び縮みするので、ここでは使わない）
   1行目の vh は svh を知らない古いブラウザ向けの保険。 */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
}

.hero__bg,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* キャッチコピー。カンプでは左端から165px（コンテナ内側から82px）の位置。 */
.hero__catch {
  position: absolute;
  /* 高さ基準にすると、縦の短い窓でヒーローが縮んで36%がヘッダーの裏に入る。
     ヘッダー下端＋24px より上には行かないように下限をかけている。 */
  top: max(36%, calc(var(--header-height) + 24px));
  left: calc(var(--gutter) + 82px);
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.93;
  letter-spacing: 0.05em;
  color: var(--color-hero-catch);
}

/* ヒーロー下端の帯。写真の上に半透明の青を重ねている。 */
.hero__band {
  position: absolute;
  inset: auto 0 0;
  height: 8%;
  background: var(--color-hero-band);
  border-bottom: 10px solid var(--color-hero-band-edge);
}

@media (max-width: 768px) {

  .hero__catch {
    top: 28%;
    left: var(--gutter);
    /* スマホでは画面幅に対して文字が大きすぎると右端に触れるため、少し落とす */
    font-size: 24px;
    line-height: 1.9;
  }
}

/* ==========================================================================
   Footer（全ページ共通）
   カンプは6列24項目だが、公開時点で存在するページが3つのため、
   実際に移動できる3リンクのみを中央に並べる。
   ページが増えたらここに項目を足していく。
   ========================================================================== */

.site-footer {
  padding-block: 90px 56px;
  background: var(--color-sky);
  color: var(--color-bg);
  text-align: center;
}

.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
}

.footer-nav__list a {
  display: inline-block;
  padding-block: 4px;
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.12em;
  transition: opacity 0.2s;
}

.footer-nav__list a:hover {
  opacity: 0.7;
}

.copyright {
  margin-top: var(--space-xl);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
}

@media (max-width: 768px) {
  .site-footer {
    padding-block: 56px 40px;
  }

  .footer-nav__list {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .copyright {
    margin-top: var(--space-lg);
  }
}

/* ==========================================================================
   共通部品：矢印つきのリンクボタン
   カンプでは幅336px・高さ64px・左内側63pxの位置から文字が始まる。
   ========================================================================== */

.link-button {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding-inline: 63px var(--space-md);
  background: var(--color-sky-muted);
  color: var(--color-bg);
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
  transition: background-color 0.2s;
}

.link-button::before {
  content: "＞";
}

.link-button:hover {
  background: var(--color-sky);
}

@media (max-width: 768px) {
  .link-button {
    justify-content: center;
    min-height: 56px;
    padding-inline: var(--space-md);
  }
}

/* ==========================================================================
   About：私たちが「ご縁」に込める想い
   カンプ実測（1366px幅）
     写真      x0-690 / y1055-1862（左端に張り付き）
     ラベル    x762 / 見出し・本文 x808 / 右端 1287
     ボタン行  y1917-1981・幅1039・中央揃え
   ========================================================================== */

.about {
  /* 写真の幅と、写真〜本文の間隔。カンプの比率をそのまま保つ */
  --about-photo-width: 50.51%;
  --about-body-indent: 10.65%;
  padding-top: 80px;
}

.about__inner {
  display: grid;
  grid-template-columns: var(--about-photo-width) 1fr;
}

/* 写真はコンテナの外に出して画面左端まで伸ばす */
.about__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 690 / 807;
  object-fit: cover;
}

.about__body {
  display: flex;
  align-items: flex-start;
  /* 原稿が写真の高さより短いため、写真に対して上下中央に置く。
     カンプ通り上揃えにすると、文章の下に写真1枚分近い空白が残ってしまう。 */
  align-self: center;
  gap: 31px;
  padding-left: var(--about-body-indent);
  padding-right: var(--gutter);
}

/* 縦書きのセクションラベル。
   装飾と文字を縦に積むため、外側は通常の横書きのまま、文字だけ縦書きにする。 */
.about__label {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 16px;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--color-label);
}

.about__label span {
  writing-mode: vertical-rl;
}

/* ラベルの上に置く3本バーの装飾 */
.about__label::before {
  content: "";
  display: block;
  width: 13px;
  height: 26px;
  margin-bottom: 12px;
  background-image:
    linear-gradient(var(--color-label), var(--color-label)),
    linear-gradient(var(--color-label), var(--color-label)),
    linear-gradient(var(--color-label), var(--color-label));
  background-size: 13px 10px, 13px 7px, 13px 5px;
  background-position: 0 0, 0 12px, 0 21px;
  background-repeat: no-repeat;
}

.about__text {
  max-width: 480px;
}

.about__text p {
  margin-top: 18px;
  font-size: var(--fs-body);
  letter-spacing: 0.11em;
  /* カンプの行送りは41.5px（本文17px に対して約2.44倍） */
  line-height: 2.44;
}

/* 段落どうしの間は、ちょうど1行分あける（カンプが83px＝行送りの2倍） */
.about__text p + p {
  margin-top: 2.44em;
}

.about__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: calc(1040px + var(--gutter) * 2);
  margin-inline: auto;
  margin-top: 55px;
  padding-inline: var(--gutter);
}

/* 作成済みのページが1つだけのため、中央の列に置いて中央揃えに見せる。
   会社情報・サステナビリティのページができたら、左右の列に追加する。 */
.about__links > :only-child {
  grid-column: 2;
}

@media (max-width: 768px) {
  .about {
    padding-top: 56px;
  }

  /* スマホでは写真を上、本文を下に積む */
  .about__inner {
    grid-template-columns: 1fr;
  }

  .about__photo img {
    aspect-ratio: 4 / 3;
  }

  .about__body {
    gap: 20px;
    padding-top: 40px;
    padding-left: var(--gutter);
  }

  /* スマホは縦積みなので中央寄せは不要 */
  .about__body {
    align-self: stretch;
  }

  .about__text p {
    line-height: 2.1;
  }

  .about__links {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .about__links > :only-child {
    grid-column: 1;
  }
}

/* PC のみ有効な改行（スマホでは文章を自然に折り返す） */
@media (max-width: 768px) {
  .br-pc {
    display: none;
  }
}

/* ==========================================================================
   Message
   カンプ実測（1366px幅）
     Message(セリフ)  x177 / ink y2161-2213
     グラデ帯          x0-1044 / y2196-3065（左端に張り付き）
     リード・本文      x154 / 最大幅 612
     写真              x878-1366 / y2318-2932（右端に張り付き）
     ボタン            y3049-3117・幅360×3・間隔32（グラデ帯の下端に16px重なる）
   ========================================================================== */

.message {
  padding-top: 90px;
}

.message__area {
  position: relative;
  padding-block: 76px 145px;
}

.message__bg {
  position: absolute;
  inset: 0 auto 0 0;
  width: 76.43%;
  --g-tl: #d9e7ff;
  --g-tr: #d9f9ff;
  --g-bl: #eaeaf0;
  --g-br: #fbefd5;
}

/* 「Message」はグラデ帯の上端をまたいで配置される */
.message__title {
  position: absolute;
  top: -44px;
  left: max(var(--gutter), calc(50% - 600px + 94px));
  line-height: 1.3;
}

.message__inner {
  position: relative;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.message__lead,
.message__text {
  margin-left: 71px;
}

/* リード文は2行で収まる幅にする（狭いと3行に折り返してしまう） */
.message__lead {
  max-width: 660px;
}

.message__text {
  max-width: 620px;
}

.message__lead {
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: 0.25em;
  line-height: 1.35;
  color: var(--color-lead);
}

.message__text {
  margin-top: 139px;
}

.message__text p {
  font-size: var(--fs-body);
  letter-spacing: 0.11em;
  line-height: 2.44;
}

.message__text p + p {
  margin-top: 2.44em;
}

/* 写真は右端に張り付く。上下の余白を固定し、高さは切り抜きで合わせる */
.message__photo {
  position: absolute;
  top: 122px;
  bottom: 133px;
  right: 0;
  width: 35.72%;
  max-width: 560px;
}

.message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message__links {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: calc(1142px + var(--gutter) * 2);
  margin-inline: auto;
  margin-top: -16px;
  padding-inline: var(--gutter);
}

@media (max-width: 768px) {
  .message {
    padding-top: 56px;
  }

  .message__area {
    padding-block: 64px 0;
  }

  /* スマホではグラデーションを画面幅いっぱいに広げる */
  .message__bg {
    width: 100%;
  }

  .message__title {
    top: -30px;
    left: var(--gutter);
    font-size: var(--fs-xl);
  }

  .message__lead,
  .message__text {
    margin-left: 0;
  }

  .message__lead {
    font-size: var(--fs-lg);
    letter-spacing: 0.12em;
  }

  .message__text {
    margin-top: 32px;
  }

  .message__text p {
    line-height: 2.1;
  }

  /* 写真は本文の下に回す */
  .message__photo {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 40px;
  }

  .message__photo img {
    height: auto;
    aspect-ratio: 490 / 400;
  }

  .message__links {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 32px;
  }
}

/* ==========================================================================
   Our business 事業内容
   カンプ実測（1366px幅）
     見出し      x155 / ink y3254
     青見出し    x153 / ink y3416・3496（行送り80px）
     本文        x154 / 最大幅 約530 / ink y3814〜4243
     写真        x539-1366 / y3406-4124（右端に張り付き）
     3つの円の図 x733-1264 / y3805-4419
   ========================================================================== */

.business {
  position: relative;
  padding-top: 137px;
  /* 図の下端まで高さを確保する（写真も図も絶対配置のため） */
  padding-bottom: 162px;
}

.business__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.business__lead,
.business__text {
  margin-left: 71px;
}

.business__lead {
  max-width: 680px;
  margin-top: 84px;
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: 0.25em;
  /* カンプの行送りは80px（文字40pxに対して2倍） */
  line-height: 2;
  color: var(--color-main);
}

.business__text {
  max-width: 540px;
  margin-top: 247px;
}

.business__text p {
  font-size: var(--fs-body);
  letter-spacing: 0.11em;
  line-height: 2.44;
}

.business__text p + p {
  margin-top: 2.44em;
}

/* 写真と図。どちらも本文の背面に置く */
.business__photo {
  position: absolute;
  top: 303px;
  right: 0;
  width: 60.54%;
  height: 719px;
}

.business__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* カンプは写真の左端（白い壁の部分）を残した切り抜き。
     中央寄せにすると壁が切れ、青い見出しが人物に重なって読めなくなる。 */
  object-position: left center;
}

.business__diagram {
  position: absolute;
  top: 702px;
  left: 53.66%;
  width: 38.87%;
  max-width: 531px;
}

.business__diagram img {
  width: 100%;
  height: auto;
}

/* 中間の幅（769px〜1365px）の作り直し —— Message と Our business
   ------------------------------------------------------------------
   写真と図は幅の％で置いているのに、文章の幅・字送り・インデントは px の
   固定値だった。そのため 1366px より狭いと、文章だけが縮まずに右へ伸びて
   写真の下に潜り、読めなくなっていた（2026-09-28 に 1024px で発見）。

   直し方：1366px の組みをそのまま縮める。
   --k は「幅が 1366px のとき 1px」になる長さなので、
   カンプの 40px は calc(40 * var(--k)) と書けば比例して縮む。

   ただし本文（17px）は縮めない。1024px では 12.7px まで落ちてしまい、
   読みやすさの下限を割るため。本文は幅だけ詰めて行数で吸収する。
   リード文も 24px を下限にする。 */
@media (min-width: 769px) and (max-width: 1365px) {
  .message,
  .business {
    --k: calc(100vw / 1366);
  }

  .message__lead,
  .message__text,
  .business__lead,
  .business__text {
    margin-left: calc(71 * var(--k));
  }

  .message__lead {
    max-width: calc(660 * var(--k));
    font-size: clamp(24px, calc(40 * var(--k)), 40px);
  }

  .message__text {
    max-width: calc(620 * var(--k));
  }

  .business__lead {
    max-width: calc(680 * var(--k));
    font-size: clamp(24px, calc(40 * var(--k)), 40px);
  }

  .business__text {
    max-width: calc(540 * var(--k));
  }
}

@media (max-width: 768px) {
  .business {
    padding-top: 56px;
    padding-bottom: 0;
  }

  .business__lead,
  .business__text {
    margin-left: 0;
  }

  .business__lead {
    margin-top: 32px;
    font-size: var(--fs-lg);
    letter-spacing: 0.12em;
    line-height: 1.8;
  }

  .business__text {
    margin-top: 32px;
  }

  .business__text p {
    line-height: 2.1;
  }

  /* スマホでは写真と図を本文の下に順番に置く */
  .business__visual {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }

  .business__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
  }

  .business__diagram {
    position: static;
    width: 86%;
    margin: 24px auto 0;
  }
}

/* ==========================================================================
   共通部品：四隅の色が違うグラデーション面
   カンプのグラデーションは「左上=青紫／右上=水色／左下=灰／右下=クリーム」のように
   四隅すべて色が違う。CSSの通常のグラデーションは1方向しか表現できないため、
   縦グラデーションを2枚重ね、上の1枚を右へ向かって効かせることで再現する。
   使う側で --g-tl / --g-tr / --g-bl / --g-br を指定する。
   ========================================================================== */

.grad-panel {
  position: relative;
  background-image: linear-gradient(to bottom, var(--g-tl), var(--g-bl));
}

.grad-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, var(--g-tr), var(--g-br));
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
  mask-image: linear-gradient(to right, transparent, #000);
}

/* ==========================================================================
   事業紹介（子育て・教育／住宅／金融）
   カンプ実測（1366px幅）
     1つの列  幅1231（写真496 + ブロック735）・高さ640
     奇数番は画面左端、偶数番は画面右端に寄せる
     ブロック内 左内側50 / 見出しの位置 上から194
   ========================================================================== */

.business-list {
  display: grid;
  /* 3つのブロックは上下を離さず、そのまま積む（2026-09-28 依頼者の指示）。
     カンプは8px空いていた。 */
  gap: 0;
  padding-top: 127px;
}

/* カンプは行の幅が90.12%で、写真と反対側に画面幅の約10%の白が残る。
   その白を無くし、色の面を画面の端まで伸ばしている（2026-09-28 依頼者の指示）。
   写真の幅は変えない：90.12% × 40.29% = 36.31% が元と同じ496px（1366px時）。 */
.biz {
  display: grid;
  grid-template-columns: 36.31% 1fr;
  width: 100%;
}

/* 偶数番は左右を入れ替える */
.biz--reverse {
  grid-template-columns: 1fr 36.31%;
}

.biz--reverse .biz__photo {
  order: 2;
}

/* 写真は行の高さを決めない。絶対配置にして .biz__body の min-height だけで
   高さが決まるようにしている。こうしないと、写真ごとの元の縦横比の違いが
   そのまま行の高さに出て、3つのブロックの背が揃わない（実測 640/655/645）。 */
.biz__photo {
  position: relative;
  overflow: hidden;
}

.biz__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 高さを詰めたぶん上下が切れる。中央で切ると金融の写真だけ人物の顔が
     完全に外れるため、少し上寄り（20%）で切っている。3枚とも顔が残る位置。 */
  object-position: center 20%;
}

/* カンプは高さ640・見出しを上から194の位置に置く組みだが、本文が3行しかなく
   下に270px以上の空きが残る。高さを詰めたうえで上下中央に置いている。
   （「私たちが「ご縁」に込める想い」で同じ理由の調整を入れたのと同じ考え方） */
.biz__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
  padding: 60px 50px;
  background-color: var(--color-block);
  /* カンプは白文字だが、水色の面（#bed6df）との**コントラスト比が1.51:1**しかなく、
     本文の基準4.5:1を大きく下回る。濃いグレーなら5.8:1。
     住宅関連事業は同じ理由で先に濃いグレーへ直してあり、面ごとに揃っていなかった。
     2026-10-29、依頼者の判断で残り3ブロックもこちらへ揃えた。
     （CLAUDE.md「カンプの指定でも読みやすさの基準を下回る場合は読める側を優先する」） */
  color: var(--color-text);
}

/* 色の面を左端まで伸ばしても、文字は元の位置（画面左から185px）のまま残す。
   185 ÷ 870（色の面の幅）＝ 21.26%。どちらも画面幅に比例するので、
   幅が変わっても文字の位置は元の比率のままになる。 */
.biz--reverse .biz__body {
  padding-left: 21.26%;
}

/* グラデーションの面を使うブロック。
   カンプでは住宅関連事業だけがグラデーションで、他は水色の平らな面（--color-block）だった。
   2026-10-31、依頼者の指示で4事業すべてをこのグラデーションに揃えた。
   以前は .biz--reverse（写真を右に置く指定）に面の色もぶら下げていたが、
   「写真の左右」と「面の色」を別のクラスに分けてある（2026-10-29）。
   平らな面に戻すときは、index.html の該当ブロックから biz--grad と grad-panel を外す。 */
.biz--grad .biz__body {
  --g-tl: #d2e0ff;
  --g-tr: #def3f1;
  --g-bl: #dee1f3;
  --g-br: #fee8ba;
  background-color: transparent;
  color: var(--color-text);
}

/* グラデーション面では、重ねた層より文字を前に出す */
.biz--grad .biz__title,
.biz--grad .biz__text {
  position: relative;
  z-index: 1;
}

.biz__title {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

/* 見出しの下に小さく添える事業の中身（2026-10-29 依頼者の指示でAI関連事業に追加）。
   他の3つには無い要素。見出しとひとかたまりに見えるよう、間は詰めてある。
   色は指定しない（.biz__body の文字色をそのまま継がせ、面ごとの色分けに従う）。 */
.biz__sub {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.5;
}

.biz__text {
  max-width: 640px;
  margin-top: 34px;
  font-size: 19px;
  letter-spacing: 0.04em;
  line-height: 1.55;
}

/* 事業ブロックから各ブランドの公式サイトへ出るリンク（2026-10-29 追加・カンプにはない）。
   .biz__body は縦並びの flex なので、入れ物を挟まないとボタンが面の幅いっぱいに伸びる。 */
.biz__links {
  margin-top: 34px;
}

/* 共通部品のボタンの水色（#a0c6d2）は、白文字とのコントラストが 1.8:1 しかない。
   白地のセクションでは面の形で読めていたが、事業ブロックの水色の面（#bed6df）に
   載せると面との差も消えてボタンに見えなくなるため、ここだけ濃い青にしている。
   白文字とのコントラストは 6.7:1 で、本文の基準 4.5:1 を満たす。
   幅はカンプの共通ボタンと同じ336px。 */
.biz__links .link-button {
  width: 336px;
  max-width: 100%;
  background: var(--color-main-dark);
}

.biz__links .link-button:hover {
  background: var(--color-nav-hover);
}

/* グラデーションの面（住宅関連事業）では、重ねた層より前に出す */
.biz--grad .biz__links {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  /* この幅から下は写真の元の縦横比で高さを決める（従来どおり）。
     絶対配置のままだと、スマホで写真の入れ物に高さが無くなり潰れる。 */
  .biz__photo img {
    position: static;
    object-position: center;
  }

  .biz__body {
    min-height: 0;
    padding: 56px 40px;
  }

  /* 上の指定より詳しいセレクタなので、ここで明示的に戻す */
  .biz--reverse .biz__body {
    padding-left: 40px;
  }

  .biz__title {
    font-size: var(--fs-xl);
  }

  .biz__sub {
    margin-top: 10px;
    font-size: var(--fs-base);
  }
}

@media (max-width: 768px) {
  .business-list {
    gap: 0;
    padding-top: 56px;
  }

  /* スマホでは写真を上、説明を下に積み、画面幅いっぱいに広げる */
  .biz,
  .biz--reverse {
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
  }

  .biz--reverse .biz__photo {
    order: 0;
  }

  /* 3:2に切り替わるぶん上下が大きく切れる。中央で切ると3枚とも顔が外れるので、
     PCと同じく少し上寄り（20%）で切っている。 */
  .biz__photo img {
    aspect-ratio: 3 / 2;
    object-position: center 20%;
  }

  .biz__body {
    padding: 40px var(--gutter);
  }

  /* 上の指定より詳しいセレクタなので、ここでも明示的に戻す */
  .biz--reverse .biz__body {
    padding-left: var(--gutter);
  }

  .biz__title {
    font-size: var(--fs-lg);
  }

  .biz__sub {
    margin-top: 8px;
    font-size: var(--fs-sm);
  }

  .biz__text {
    margin-top: 20px;
    font-size: var(--fs-base);
    line-height: 1.9;
  }

  /* 本文とのあきは本文どうしのあきに合わせる。ボタンは画面幅いっぱいに広げる
     （共通部品が768px以下で中央揃え・高さ56pxに切り替わる） */
  .biz__links {
    margin-top: 24px;
  }

  .biz__links .link-button {
    width: 100%;
  }
}

/* ==========================================================================
   Topics 新着情報
   カンプ実測（1366px幅）
     Topics      x147 / ink y6556
     新着情報    x147 / ink y6619
     カード      x134-1252・4枚（幅251・間隔39）
     サムネイル  251×159
   ========================================================================== */

.topics {
  padding-top: 193px;
}

.topics__inner {
  max-width: calc(1120px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* お問い合わせはカンプ上、Topicsより少し内側（1048px幅） */
.contact__inner {
  max-width: calc(1048px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 「＞一覧を見る」。カンプでは ink y6669-6683.5・右端はカード右端（1252）に揃う。
   カード上端 y6702.5 との間は19px。行の高さ22pxの上下に3.5pxずつ余るので、
   上16px ＋ 行22px ＋ 下16px ＝ 54px で、カードの位置は元のまま動かない。 */
.topics__more {
  margin-top: 16px;
  text-align: right;
  line-height: 1.3;
}

.topics__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 39px;
  margin-top: 16px;
}

/* カード全体をリンクにする。カンプの見た目は変えず、触れる範囲だけ広げる。 */
.topic-card__link {
  display: block;
  transition: opacity 0.2s;
}

.topic-card__link:hover {
  opacity: 0.75;
}

.topic-card__link:hover .topic-card__title {
  color: var(--color-main);
}

.topic-card__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 251 / 159;
  object-fit: cover;
}

.topic-card__date {
  margin-top: 14px;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

.topic-card__title {
  margin-top: 12px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.5;
}

.topic-card__text {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
}

.topic-card__cat {
  margin-top: 20px;
  font-size: 15px;
  color: var(--color-text-light);
}

/* ==========================================================================
   Contact お問い合わせ
   カンプ実測（1366px幅）
     Contact  x166 / ink y7605
     ロゴ     x155-443（288×95）
     ボタン   x843-1203（361×70）
   ========================================================================== */

.contact {
  padding-block: 196px 140px;
}

.contact__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: 90px;
}

/* ロゴと受賞エンブレムを横に並べ、下端をそろえる */
.contact__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
}

.contact__logo {
  width: 288px;
  height: auto;
}

/* 「大分を代表する企業100選」エンブレム（横組み）。社名ロゴより主張させないよう
   小さめに抑えている。外部サイト（Made in Local）へのリンク。 */
.contact__emblem {
  flex: 0 0 auto;
  transition: opacity 0.2s;
}

.contact__emblem:hover,
.contact__emblem:focus-visible {
  opacity: 0.7;
}

.contact__emblem img {
  width: 220px;
  height: auto;
}

.contact__note {
  margin-top: 44px;
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
}

.contact__button {
  flex: 0 0 auto;
  width: 361px;
}

@media (max-width: 768px) {
  .topics {
    padding-top: 72px;
  }

  /* スマホでは横4枚だと1枚あたりが小さすぎるため2枚ずつ並べる */
  .topics__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    margin-top: 32px;
  }

  .contact {
    padding-block: 72px;
  }

  .contact__body {
    margin-top: 40px;
  }

  .contact__logo {
    width: 220px;
  }

  /* スマホは横に並びきらないため、ロゴの下へ折り返す */
  .contact__emblem img {
    width: 190px;
  }

  .contact__note {
    margin-top: 24px;
    font-size: var(--fs-sm);
  }

  .contact__button {
    width: 100%;
  }
}

/* ==========================================================================
   下層ページの見出し（写真なしのシンプルな構成）
   ========================================================================== */

.page-head {
  padding-block: calc(var(--header-height) + 72px) 0;
}

.page-head__inner,
.form-section__inner,
.legal__inner {
  max-width: calc(880px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   お問い合わせフォーム
   ========================================================================== */

.form-section {
  padding-block: 64px 140px;
}

.form-section__note {
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
  line-height: 2.2;
}

.form {
  margin-top: 56px;
}

.form__row {
  display: grid;
  gap: 12px;
  margin-top: 32px;
  border: 0;
  padding: 0;
}

.form__row:first-child {
  margin-top: 0;
}

.form__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.06em;
  /* fieldset の legend でも段組みが崩れないようにする */
  float: left;
  width: 100%;
}

.form__required {
  padding: 3px 10px;
  background: var(--color-main);
  color: var(--color-bg);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* 任意項目の目印（従業員数・2026-10-29 追加）。
   必須の目印と同じ形にし、色だけ落として「必須ではない」ことを示す。
   枠線＋文字の組み合わせで、面の色に頼らず見分けられるようにしている。 */
.form__optional {
  padding: 2px 9px;
  border: 1px solid var(--color-text-light);
  color: var(--color-text-light);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
}

.form__control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  background: var(--color-bg);
  font-size: var(--fs-base);
  line-height: 1.8;
  transition: border-color 0.2s;
}

.form__control::placeholder {
  color: #a8a8a5;
}

.form__control:focus {
  border-color: var(--color-main);
  outline: 2px solid var(--color-main);
  outline-offset: -2px;
}

.form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: 4px;
}

.form__radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form__radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-main);
}

/* 自動投稿よけ（Cloudflare Turnstile）の置き場所。
   ウィジェットは Cloudflare 側が差し込む iframe で、幅300px・高さ65px固定。
   中身の見た目はこちらから変えられないので、位置だけ決めている。
   送信ボタンと同じ中央ぞろえにして、上のあきを他の行より広めに取る。 */
.form__turnstile {
  justify-items: center;
  margin-top: 40px;
}

.form__agreement {
  margin-top: 40px;
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

.form__agreement a {
  color: var(--color-main);
  text-decoration: underline;
}

.form__submit {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.form__button {
  justify-content: center;
  width: 361px;
  padding-inline: var(--space-md);
}

/* ==========================================================================
   規約系ページ（プライバシーポリシーなど）
   ========================================================================== */

.legal {
  padding-block: 64px 140px;
  line-height: 2.1;
}

.legal__lead {
  font-size: var(--fs-base);
}

.legal__h2 {
  margin-top: 64px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-main);
}

.legal__h3 {
  margin-top: 48px;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.legal__h3 + p,
.legal__h3 + ul,
.legal__h3 + ol {
  margin-top: 12px;
}

.legal p + p,
.legal p + ul,
.legal p + ol,
.legal ul + p,
.legal ol + p {
  margin-top: 20px;
}

.legal__sub {
  margin-top: 28px;
  font-weight: 700;
}

.legal__list,
.legal__ol,
.legal__links {
  padding-left: 1.4em;
}

.legal__list {
  list-style: disc;
}

.legal__ol {
  list-style: decimal;
}

.legal__links {
  list-style: none;
  padding-left: 0;
}

.legal__list li,
.legal__ol li,
.legal__links li {
  margin-top: 10px;
}

.legal a {
  color: var(--color-main);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.legal__address {
  margin-top: 20px;
  padding: 24px;
  background: var(--color-bg-alt);
  font-style: normal;
}

.legal__signature {
  margin-top: 48px;
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

@media (max-width: 768px) {
  .page-head {
    padding-block: calc(var(--header-height) + 40px) 0;
  }

  .form-section,
  .legal {
    padding-block: 40px 72px;
  }

  .form__button {
    width: 100%;
  }

  .legal__h2 {
    margin-top: 48px;
  }

  .legal__h3 {
    margin-top: 32px;
  }
}

/* 写真のない下層ページでは、白地の上でナビが薄すぎるので濃くする */
.page-plain .global-nav__list a {
  color: var(--color-main);
}

/* 自動投稿よけの入力欄。人間には見せず、読み上げ対象からも外す。
   display:none にすると一部のボットに検知されるため、画面外へ逃がす。 */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信完了ページの補足文 */
.form-section__note + .form-section__note {
  margin-top: 24px;
}

.form-section__note a {
  color: var(--color-main);
  text-decoration: underline;
}

/* ==========================================================================
   下層ページのヒーロー（企業理念・代表挨拶で共用）
   カンプ実測（1366px幅）
     写真      全幅 / y0-756
     Message   セリフ120px / ink y308.5-422.5
     企業理念   42px・字間0.32em / ink y435.5-475
     Corporate philosophy  セリフ40px / ink y511-549.5
   ========================================================================== */

.page-hero {
  position: relative;
  height: 756px;
  overflow: hidden;
}

.page-hero__bg,
.page-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__inner {
  position: relative;
  padding-top: 287px;
  text-align: center;
}

.page-hero__title {
  font-family: var(--font-serif);
  font-size: 120px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-hero-en);
}

.page-hero__ja {
  margin-top: 18px;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.32em;
  /* 字間は文字の右側に付くため、中央揃えだと左へずれて見える。
     同じ量を先頭に足して打ち消す。 */
  text-indent: 0.32em;
  line-height: 1.3;
  color: var(--color-main);
}

.page-hero__en {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1.3;
  color: var(--color-main);
}

/* ==========================================================================
   企業理念：私たちGOENは、
   カンプ実測（1366px幅）
     写真      x0-545 / y894-1575（左端に張り付き）
     見出し・本文  x656
     見出し    30px / 行送り74.5
     本文      17px / 行送り45.5 / 段落間は1行
   ========================================================================== */

.philosophy-lead {
  padding-bottom: 153px;
}

.philosophy-lead__inner {
  display: grid;
  /* 545 / 1366 */
  grid-template-columns: 39.9% 1fr;
}

.philosophy-lead__photo {
  margin-top: 138px;
}

.philosophy-lead__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 545 / 682;
  object-fit: cover;
}

.philosophy-lead__body {
  padding-top: 93px;
  /* 写真の右端から見出しの左端まで 111px */
  padding-left: 8.13%;
  padding-right: var(--gutter);
}

.philosophy-lead__title {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.18em;
  /* 74.5px / 30px */
  line-height: 2.48;
  color: var(--color-text);
}

.philosophy-lead__text {
  margin-top: 113px;
}

.philosophy-lead__text p {
  font-size: var(--fs-body);
  letter-spacing: 0.11em;
  /* 45.5px / 17px */
  line-height: 2.68;
}

/* 段落どうしの間は、ちょうど1行分あける */
.philosophy-lead__text p + p {
  margin-top: 2.68em;
}

/* ==========================================================================
   企業理念：パートナー企業の皆さまへ
   カンプ実測（1366px幅）
     帯        全幅 / y1749.5-2660（写真の上に濃色を重ねる）
     見出し    42px・水色 / 右端 x1174.5
     縦ラベル   セリフ36px / x1240.5-1264.5 / y1835-2083
     大見出し・本文  x223.5（白）
   ========================================================================== */

.for-partners {
  position: relative;
  overflow: hidden;
  color: var(--color-bg);
}

.for-partners__bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-navy);
}

.for-partners__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の上でも白文字が読めるように濃い色を重ねる。
   支給写真は暗さが焼き込み済みなので、本文が4.5:1を満たす最小量だけ足す */
.for-partners__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(20, 38, 50, 0.32);
}

.for-partners__inner {
  position: relative;
  padding-top: 52px;
  padding-bottom: 119px;
}

.for-partners__title {
  padding-right: 108px;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1.5;
  text-align: right;
  color: var(--color-partner-label);
}

.for-partners__label {
  position: absolute;
  top: 85px;
  right: max(var(--gutter), calc(50% - 600px + 18px));
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  color: var(--color-partner-label);
}

.for-partners__label span {
  writing-mode: vertical-rl;
}

.for-partners__lead {
  margin-top: 66px;
  /* 大見出し・本文はコンテナ左端からさらに 140px 内側 */
  margin-left: 140px;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.18em;
  /* 75px / 30px */
  line-height: 2.5;
}

.for-partners__text {
  margin-top: 48px;
  margin-left: 140px;
}

.for-partners__text p {
  font-size: var(--fs-body);
  letter-spacing: 0.11em;
  /* 51.5px / 17px */
  line-height: 3.03;
}

.for-partners__text p + p {
  margin-top: 3.03em;
}

/* ==========================================================================
   企業理念：従業員とそのご家族へ
   カンプ実測（1366px幅）
     見出し    42px / x232 / y2761-2800
     英字      セリフ30px / y2822.5-2850.5
     円写真    直径975 / 左端x431・上端y2856（右端は画面外へ40pxはみ出す）
     縦書き    46px / 2列・列間74.5 / x219.5-336.5
     本文      16px / 行送り39 / x196
     線画      x835.5-1366 / y3983.5-4382
   ========================================================================== */

.for-employees {
  position: relative;
  overflow: hidden;
  padding-bottom: 89px;
}

.for-employees__head {
  padding-top: 89px;
}

.for-employees__title {
  /* コンテナ左端からさらに 148px 内側 */
  margin-left: 148px;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1.4;
  color: var(--color-main);
}

.for-employees__en {
  margin-top: 1px;
  margin-left: 148px;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.6;
  color: var(--color-main);
}

.for-employees__visual {
  position: relative;
}

/* 左端だけ半円に抜いた写真。右端は画面の右端にぴったり付く。
   形は画像側の透過で持っているので、ここでは切り抜かない */
.for-employees__photo {
  /* 935 / 1366 */
  width: 68.45%;
  max-width: 935px;
  margin-left: auto;
}

.for-employees__photo img {
  width: 100%;
  height: auto;
}

.for-employees__vertical {
  position: absolute;
  top: 154px;
  left: max(var(--gutter), calc(50% - 600px + 120px));
}

.for-employees__vertical span {
  display: block;
  writing-mode: vertical-rl;
  /* 英字も日本語と同じく正立させる（カンプがその組み方） */
  text-orientation: upright;
  height: 716px;
  font-size: 46px;
  font-weight: 400;
  letter-spacing: 0.11em;
  /* 列の間隔 74.5px / 46px */
  line-height: 1.62;
  text-align: center;
  color: var(--color-text);
}

.for-employees__body {
  position: relative;
}

.for-employees__text {
  /* 円写真の下端にそろえる */
  margin-top: -1px;
  /* コンテナ左端からさらに 112px 内側 */
  margin-left: 112px;
}

.for-employees__text p {
  font-size: var(--fs-base);
  letter-spacing: 0.11em;
  /* 39px / 16px */
  line-height: 2.44;
}

.for-employees__text p + p {
  margin-top: 2.44em;
}

/* 手を重ねる線画。文字の背面に置く装飾。
   画面幅が狭いとセクションが縮むので、上端ではなく下端からの距離で置く。 */
.for-employees__illust {
  position: absolute;
  bottom: 5px;
  right: 0;
  z-index: -1;
  /* 支給データは 545x399.5。カンプでは右端の14pxが画面外にはみ出して切れている
     （見える幅は531px）。translateX の % は要素自身の幅が基準なので、
     14 / 545 = 2.569% ずらせばどの画面幅でも同じ比率で切れる。
     セクション側の overflow: hidden ではみ出しは隠れる。 */
  width: 39.90%;
  max-width: 545px;
  height: auto;
  transform: translateX(2.569%);
}

/* ==========================================================================
   企業理念：未来へ
   カンプ実測（1366px幅）
     写真      x0-1020 / y4387-5141（左端に張り付き・右端は半円）
     見出し    42px / x1048
     英字      セリフ30px
     本文      16px / 行送り39 / x887・右端はコンテナ右端
   ========================================================================== */

.for-future {
  position: relative;
  overflow: hidden;
}

.for-future__photo {
  position: absolute;
  top: 0;
  left: 0;
  /* 1020 / 1366 */
  width: 74.67%;
  max-width: 1020px;
}

.for-future__photo img {
  width: 100%;
  height: auto;
}

.for-future__inner {
  position: relative;
  padding-top: 406px;
  padding-bottom: 105px;
}

.for-future__body {
  width: 410px;
  margin-left: auto;
  /* カンプは句読点が半角に詰まるぶん行が短い。ウェブフォントは全角のため、
     折り返さないよう13pxだけコンテナの外へ出す。 */
  margin-right: -13px;
}

.for-future__title {
  /* 本文より 161px 右にずらす */
  margin-left: 161px;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1.4;
  color: var(--color-main);
}

.for-future__en {
  margin-top: 8px;
  margin-left: 161px;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.6;
  color: var(--color-main);
}

.for-future__text {
  margin-top: 91px;
}

.for-future__text p {
  font-size: var(--fs-base);
  letter-spacing: 0.11em;
  /* 39px / 16px */
  line-height: 2.44;
  /* カンプどおり1行目の先頭数文字が写真の端に重なる。
     そこだけ背景が暗く 3.3:1 まで落ちるので、白いごく薄い縁を敷いて読めるようにする。
     白い紙の上では見えない。 */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   企業理念ページ：中間の幅（タブレット横〜小さめのノートPC）
   カンプは1366px前提。これより狭いと縦書きや円写真が本文に重なるため、
   重なる2か所だけ「上下に並べる」形に切り替える。
   ========================================================================== */

@media (max-width: 1100px) {
  /* 縦書きは円写真の下に横書きで置く */
  .for-employees__vertical {
    position: static;
    margin-top: 40px;
    padding-inline: var(--gutter);
  }

  .for-employees__vertical span {
    writing-mode: horizontal-tb;
    height: auto;
    font-size: 30px;
    letter-spacing: 0.1em;
    line-height: 1.9;
    text-align: left;
  }

  .for-employees__body {
    margin-top: 48px;
  }

  .for-employees__text {
    margin-top: 0;
  }

  /* 未来へ：写真の上に本文が重なるので、写真の下に本文を置く */
  .for-future__photo {
    position: static;
  }

  .for-future__inner {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .for-future__body {
    width: auto;
    max-width: 420px;
    margin-right: 0;
  }

  .for-future__title,
  .for-future__en {
    margin-left: 0;
  }

  .for-future__text {
    margin-top: 40px;
  }
}

/* ==========================================================================
   企業理念ページ：スマホ
   ========================================================================== */

@media (max-width: 768px) {
  .page-hero {
    height: auto;
    padding-bottom: 56px;
  }

  .page-hero__inner {
    padding-top: calc(var(--header-height) + 72px);
    padding-inline: var(--gutter);
  }

  .page-hero__title { font-size: 56px; }
  .page-hero__ja { margin-top: 8px; font-size: 26px; }
  .page-hero__en { margin-top: 10px; font-size: 22px; }

  .philosophy-lead {
    padding-bottom: 72px;
  }

  .philosophy-lead__inner {
    grid-template-columns: 1fr;
  }

  .philosophy-lead__photo {
    margin-top: 0;
  }

  .philosophy-lead__photo img {
    aspect-ratio: 4 / 3;
  }

  .philosophy-lead__body {
    padding-top: 40px;
    padding-inline: var(--gutter);
  }

  .philosophy-lead__title {
    font-size: var(--fs-lg);
    line-height: 1.9;
  }

  .philosophy-lead__text {
    margin-top: 32px;
  }

  .philosophy-lead__text p {
    font-size: var(--fs-base);
    line-height: 2.1;
  }

  .philosophy-lead__text p + p {
    margin-top: 2.1em;
  }

  .for-partners__inner {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .for-partners__title {
    padding-right: 0;
    font-size: var(--fs-lg);
    text-align: left;
  }

  /* 縦書きラベルはスマホでは重なってしまうので見出しの下に横書きで出す */
  .for-partners__label {
    position: static;
    margin-top: 8px;
    font-size: var(--fs-md);
  }

  .for-partners__label span {
    writing-mode: horizontal-tb;
  }

  .for-partners__lead {
    margin-top: 32px;
    margin-left: 0;
    font-size: var(--fs-md);
    line-height: 2;
  }

  .for-partners__text {
    margin-top: 28px;
    margin-left: 0;
  }

  .for-partners__text p {
    font-size: var(--fs-base);
    line-height: 2.1;
  }

  .for-partners__text p + p {
    margin-top: 2.1em;
  }

  .for-employees {
    padding-bottom: 56px;
  }

  .for-employees__head {
    padding-top: 56px;
  }

  .for-employees__title {
    margin-left: 0;
    font-size: var(--fs-lg);
  }

  .for-employees__en {
    margin-left: 0;
    font-size: var(--fs-md);
  }

  .for-employees__visual {
    margin-top: 32px;
  }

  .for-employees__photo {
    width: 100%;
    max-width: none;
  }

  /* スマホでは縦書きをやめ、写真の下に横書きで置く */
  .for-employees__vertical {
    position: static;
    margin-top: 32px;
    padding-inline: var(--gutter);
  }

  .for-employees__vertical span {
    writing-mode: horizontal-tb;
    height: auto;
    font-size: var(--fs-lg);
    line-height: 1.9;
    text-align: left;
  }

  .for-employees__body {
    margin-top: 32px;
  }

  .for-employees__text {
    margin-left: 0;
  }

  .for-employees__text p {
    font-size: var(--fs-base);
    line-height: 2.1;
  }

  .for-employees__text p + p {
    margin-top: 2.1em;
  }

  .for-employees__illust {
    display: none;
  }

  .for-future__photo {
    position: static;
    width: 100%;
    max-width: none;
  }

  .for-future__inner {
    padding-top: 40px;
    padding-bottom: 72px;
  }

  .for-future__body {
    width: auto;
    margin-right: 0;
  }

  .for-future__title {
    margin-left: 0;
    font-size: var(--fs-lg);
  }

  .for-future__en {
    margin-left: 0;
    font-size: var(--fs-md);
  }

  .for-future__text {
    margin-top: 24px;
  }

  .for-future__text p {
    font-size: var(--fs-base);
    line-height: 2.1;
  }
}

/* ==========================================================================
   代表挨拶（greeting.html）
   カンプ実測（1366px幅・ヒーロー下端 y754.5 を 0 とした値）
     見出し「代表挨拶」   ink y85.5 / x187      38px・字間0.30em
     縦ラベル            ink y84.5-407 / x109.5-143.5  セリフ36px
     リード3行           ink y225 から 行送り41.5  20px・字間0.11em
     本文31行            ink y393 から 行送り41.5  17px・字間0.11em／段落間は1行
     グラデーション円     中心(236, 2150.5)・直径934（左は画面外へ231pxはみ出す）
     代表の写真          x111-497.5 / y1908-2864（387×956・下端はページ下端で切れる）
     署名                ink y1601 / 1641 / 1683（写真の上に白文字）
   本文・リードの左端はコンテナ左端＋299px、見出しは＋104px。
   ========================================================================== */

.greeting {
  position: relative;
  /* 見出しの文字の上端をカンプの y85.5 に合わせるための余白 */
  padding-top: 73px;
  /* 写真の下端をそのままフッターの上端にくっつける（2026-09-28 依頼者の指示）。
     写真は absolute なのでセクションの高さを押し広げない。写真の下端
     ＝「写真の上位置1908px ＋ 写真の高さ」をセクションの最低の高さにして、
     本文がそれより短くても、下に白が残らないようにしている。
     写真の高さは 387px 幅のときの ceo.webp（774×1912）の高さ＝956.17px。 */
  padding-bottom: 0;
  min-height: calc(1908px + 387px * 1912 / 774);
  /* 円と写真をこの箱の中で切り取る（円は左へはみ出す） */
  overflow: hidden;
}

/* コンテナの内側の左端。円・写真・縦ラベルの基準にする */
.greeting__visual,
.greeting__label {
  --edge: max(var(--gutter), calc(50% - var(--container) / 2));
}

/* 縦書きの英字ラベル。企業理念ページと違い、こちらは左側に置く */
.greeting__label {
  position: absolute;
  top: 83px;
  left: calc(var(--edge) + 31px);
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  color: var(--color-main);
}

.greeting__label span {
  writing-mode: vertical-rl;
}

.greeting__inner {
  position: relative;
  /* 円と写真より前面に出す */
  z-index: 1;
}

.greeting__title {
  margin-left: 104px;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.30em;
  line-height: 1.4;
  color: var(--color-main);
}

/* 冒頭の挨拶。カンプには無い一文なので、本文と同じ級数でリード文の前に置く */
.greeting__salutation {
  margin-top: 85px;
  margin-left: 299px;
  font-size: var(--fs-body);
  letter-spacing: 0.11em;
  line-height: 2.44;
  color: var(--color-text);
}

.greeting__lead {
  margin-top: 42px;
  margin-left: 299px;
  font-size: var(--fs-lead);
  letter-spacing: 0.11em;
  /* 41.6px / 20px */
  line-height: 2.08;
  color: var(--color-text);
}

.greeting__text {
  margin-top: 42px;
  margin-left: 299px;
}

.greeting__text p {
  font-size: var(--fs-body);
  letter-spacing: 0.11em;
  /* 41.5px / 17px */
  line-height: 2.44;
  color: var(--color-text);
}

/* 段落どうしの間は、ちょうど1行分あける */
.greeting__text p + p {
  margin-top: 2.44em;
}

/* 円と写真。本文の背面に敷く */
.greeting__visual {
  position: absolute;
  inset: 0;
  /* 本文より後ろ、かつ文字の邪魔をしない */
  pointer-events: none;
}

/* ロゴの配色を使った斜めのグラデーション円。左端は画面の外へ出る */
.greeting__circle {
  --circle-sky: #a2c6cf;
  --circle-gold: #facf71;
  position: absolute;
  top: 1682px;
  left: calc(var(--edge) + 153px - 467px);
  width: 934px;
  height: 934px;
  border-radius: 50%;
  background-image: linear-gradient(
    36.6deg,
    var(--circle-sky) 0%,
    var(--circle-sky) 54%,
    var(--circle-gold) 81%
  );
}

.greeting__photo {
  position: absolute;
  top: 1908px;
  left: calc(var(--edge) + 28px);
  width: 387px;
}

.greeting__photo img {
  width: 100%;
  height: auto;
}

/* 署名。写真（濃紺のジャケット）の上に白文字で乗る。
   カンプでは「代表取締役」の右端が写真からはみ出して水色の円にかかり、
   白文字とのコントラスト比が 1.82:1 しかなく読めない。
   カンプの見た目（白文字）は保ったまま、文字の背後にごく薄い影を敷いて読める側に寄せる。
   濃紺のジャケットの上では影は見えない。 */
.greeting__sign {
  position: absolute;
  top: 441px;
  left: 151px;
  color: var(--color-bg);
  text-shadow: 0 1px 10px rgba(26, 42, 52, 0.7), 0 0 3px rgba(26, 42, 52, 0.5);
}

.greeting__sign span {
  display: block;
  line-height: 1.4;
  white-space: nowrap;
}

.greeting__sign-role {
  font-size: var(--fs-lead);
  letter-spacing: 0.14em;
}

.greeting__sign-name {
  margin-top: 9px;
  margin-left: 94px;
  font-size: 30px;
  letter-spacing: 0.18em;
}

.greeting__sign-en {
  margin-top: 1px;
  margin-left: 113px;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   代表挨拶：中間の幅（タブレット横〜小さめのノートPC）
   カンプは1366px前提。これより狭いと本文が折り返して背が伸び、
   決め打ちの位置に置いた円と写真が本文に重なるため、縦に並べる形へ切り替える。
   ========================================================================== */

@media (max-width: 1100px) {
  .greeting {
    padding-top: 56px;
    /* この幅から下は写真が本文の下に流れて入るので、最低の高さの指定は外す。
       写真の下端をフッターに付ける点は広い画面と同じ。 */
    padding-bottom: 0;
    min-height: 0;
  }

  /* 縦書きラベルは本文と重なるので、見出しの上に横書きで出す */
  .greeting__label {
    position: static;
    margin-bottom: 8px;
    padding-inline: var(--gutter);
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    font-size: 26px;
  }

  .greeting__label span {
    writing-mode: horizontal-tb;
  }

  .greeting__title,
  .greeting__salutation,
  .greeting__lead,
  .greeting__text {
    margin-left: 0;
  }

  .greeting__salutation {
    margin-top: 32px;
  }

  .greeting__lead {
    margin-top: 24px;
  }

  /* 円の上に写真を重ねたまま、本文の下へ流し込む */
  .greeting__visual {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    margin-top: 64px;
  }

  .greeting__circle {
    top: 50%;
    left: 50%;
    width: min(680px, 90vw);
    height: min(680px, 90vw);
    transform: translate(-50%, -50%);
  }

  .greeting__photo {
    position: relative;
    top: auto;
    left: auto;
  }
}

/* ==========================================================================
   代表挨拶：スマホ
   ========================================================================== */

@media (max-width: 768px) {
  .greeting__label {
    font-size: var(--fs-md);
  }

  .greeting__title {
    font-size: var(--fs-xl);
    letter-spacing: 0.22em;
  }

  .greeting__salutation {
    margin-top: 24px;
    font-size: var(--fs-base);
    line-height: 2.1;
  }

  .greeting__lead {
    margin-top: 16px;
    font-size: var(--fs-md);
    line-height: 2;
  }

  .greeting__text {
    margin-top: 28px;
  }

  .greeting__text p {
    font-size: var(--fs-base);
    line-height: 2.1;
  }

  .greeting__text p + p {
    margin-top: 2.1em;
  }

  .greeting__visual {
    margin-top: 48px;
  }

  .greeting__photo {
    width: min(387px, 82vw);
  }

  /* 写真が縮むぶん、署名も一緒に縮める。
     横幅の狭い端末でも署名が画面からはみ出さない位置にする */
  .greeting__sign {
    top: 46%;
    left: 34%;
  }

  .greeting__sign-role {
    font-size: var(--fs-sm);
  }

  .greeting__sign-name {
    margin-top: 4px;
    margin-left: 27%;
    font-size: var(--fs-xl);
  }

  .greeting__sign-en {
    margin-left: 31%;
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   共通部品：矢印つきのテキストリンク（＞一覧を見る）
   カンプ実測（1366px幅）：ink x1138-1231.5 / y6669-6683.5（ink高15px・太字）
   カンプの「＞」は palt で半角に詰まっているため、ブラウザで組むと
   全角ぶん（約8px）だけ横に長くなる。右端はカードの右端に揃えている。
   ========================================================================== */

.text-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text-light);
  transition: color 0.2s;
}

.text-link::before {
  content: "＞";
}

.text-link:hover {
  color: var(--color-main);
}

/* ==========================================================================
   新着情報の一覧（news.html）
   カンプなし。トップの Topics セクションの寸法に合わせて組んでいる。
     サムネイル 251×159（トップのカードと同じ。書き出しは1点で足りる）
   ========================================================================== */

.news-list {
  padding-block: 72px 140px;
}

.news-list__inner {
  max-width: calc(1120px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.news-list__items {
  border-top: 1px solid var(--color-line);
}

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

.news-item__link {
  display: grid;
  grid-template-columns: 251px 1fr;
  gap: var(--space-lg);
  align-items: start;
  padding-block: var(--space-md);
  transition: background-color 0.2s;
}

.news-item__link:hover {
  background: var(--color-bg-alt);
}

.news-item__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 251 / 159;
  object-fit: cover;
}

.news-item__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

.news-item__title {
  margin-top: 12px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
}

.news-item__link:hover .news-item__title {
  color: var(--color-main);
}

.news-item__text {
  margin-top: var(--space-xs);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--color-text-light);
}

/* 記事が1本も無いときに出す文言 */
.news-list__empty {
  padding-block: var(--space-xl);
  text-align: center;
  color: var(--color-text-light);
}

@media (max-width: 768px) {
  .news-list {
    padding-block: var(--space-lg) var(--space-xl);
  }

  .news-item__link {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding-block: var(--space-md);
  }

  .news-item__title {
    font-size: var(--fs-base);
  }
}

/* ==========================================================================
   記事ページ（news-*.html）
   カンプなし。本文の組みは個人情報保護方針（.legal）に合わせている。
   ========================================================================== */

.news-article {
  /* ヘッダーは position: absolute なので、その高さぶんを自分で空ける。
     .page-head と同じ計算式（ヘッダー高 + 72px）にそろえている。 */
  padding-block: calc(var(--header-height) + 72px) 140px;
}

.news-article__inner {
  max-width: calc(880px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.news-article__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

.news-article__title {
  margin-top: 12px;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-main);
}

.news-article__figure {
  margin-top: var(--space-lg);
}

.news-article__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.news-article__body {
  margin-top: var(--space-lg);
  font-size: var(--fs-body);
  line-height: 2.2;
}

.news-article__body p + p {
  margin-top: 1.5em;
}

.news-article__body h2 {
  margin-top: 2em;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-main);
}

.news-article__body h2 + p {
  margin-top: 0.8em;
}

.news-article__body ul {
  margin-top: 1em;
  padding-left: 1.2em;
  list-style: disc;
}

.news-article__body a {
  color: var(--color-main);
  text-decoration: underline;
}

.news-article__body a:hover {
  color: var(--color-main-dark);
}

.news-article__back {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

@media (max-width: 768px) {
  .news-article {
    padding-block: calc(var(--header-height) + 40px) var(--space-xl);
  }

  .news-article__title {
    font-size: var(--fs-md);
  }

  .news-article__body {
    font-size: var(--fs-base);
    line-height: 2;
  }

  .news-article__back {
    margin-top: var(--space-lg);
  }
}

/* ==========================================================================
   AI活用コンサル（business-ai.html）
   B案カンプ（design/B案｜GOENのトップページに馴染むPCデザイン.png・幅1440px）
   2026-10-31 に全面的に作り直した。旧版は design/backup/ に退避してある。
   カンプのコンテンツ幅は 1200px（x120〜1320）で、サイト共通の .container と同じ。
   ヘッダー・フッターはカンプのものではなく、サイト共通の部品をそのまま使っている。
   クラス名はすべて ai- で始まり、他ページのCSSとは分かれている。
   ========================================================================== */

.ai-page {
  color: var(--color-ai-text);
}

.ai-inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- 共通の小部品 ------------------------------------------------------ */

/* 見出しの上の小さいラベル（CHALLENGES など） */
.ai-label {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--color-ai-accent-text);
}

/* 「Our approach」だけは明朝の大きめのラベル */
.ai-label--serif {
  font-family: var(--font-serif-jp);
  font-size: 22px;
  letter-spacing: 0.02em;
}

.ai-title {
  margin-top: 12px;
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-ai-accent);
}

.ai-title--lg {
  font-size: 36px;
}

.ai-lead {
  margin-top: 20px;
  font-size: var(--fs-base);
}

/* セクション末尾の、中央に置く一文 */
.ai-closing {
  margin-top: 56px;
  font-size: 19px;
  text-align: center;
  color: var(--color-ai-accent-text);
}

.ai-note {
  margin-top: var(--space-lg);
  font-size: 13px;
}

/* 3列の並び。カンプは列幅328・間隔80で、コンテンツ幅から左右28px内側に入る */
.ai-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
  padding-inline: 28px;
}

/* 「自社で試す → 現場で磨く → 御社に伴走」のような流れ */
.ai-flow {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}

.ai-flow li + li::before {
  content: "→";
  margin-inline: 14px;
}

/* スマホだけで効かせる改行。見出しの最後の1文字だけが次の行に落ちるのを防ぐ（2026-10-31） */
@media (min-width: 769px) {
  .ai-br-sp {
    display: none;
  }
}

/* 流れを矢羽根の帯で見せる（依頼者の指示・2026-10-31）。
   進むほど色を濃くし、最後の段を一番強くする。文字との差はどれも 4.5:1 以上 */
.ai-flow--steps {
  --step-notch: 14px;
  flex-wrap: nowrap;
  column-gap: 4px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-flow--steps li {
  flex: 1;
  padding: 12px calc(var(--step-notch) + 8px);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - var(--step-notch)) 0, 100% 50%, calc(100% - var(--step-notch)) 100%, 0 100%, var(--step-notch) 50%);
}

.ai-flow--steps li:first-child {
  clip-path: polygon(0 0, calc(100% - var(--step-notch)) 0, 100% 50%, calc(100% - var(--step-notch)) 100%, 0 100%);
}

/* 矢羽根の形が矢印の代わりなので、「→」は出さない */
.ai-flow--steps li + li::before {
  content: none;
}

.ai-flow--steps li:nth-child(1) {
  background: var(--color-ai-pale);
  color: var(--color-ai-accent-text);
}

.ai-flow--steps li:nth-child(2) {
  background: var(--color-ai-button);
  color: var(--color-ai-button-text);
}

.ai-flow--steps li:nth-child(3) {
  background: var(--color-ai-accent);
  color: var(--color-bg);
}

/* 段の数に関係なく、最後は一番濃い色 */
.ai-flow--steps li:last-child {
  background: var(--color-ai-accent-text);
  color: var(--color-bg);
}

/* 相談ボタン。右端に白い四角の矢印が付く */
.ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-width: 310px;
  min-height: 58px;
  padding-inline: 18px;
  background: var(--color-ai-cta);
  color: var(--color-bg);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color 0.2s;
}

/* 白い四角の中の矢印はボタンと同じ青（白地で 5.2:1） */
.ai-button::after {
  content: "→";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--color-bg);
  color: var(--color-ai-cta);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* ホバーはサイト共通の「沈めた青」。白文字で 6.7:1 */
.ai-button:hover {
  background: var(--color-main-dark);
}

/* 線と矢じりで描く矢印（AI Staff と伴走の図で使う）。読み上げ対象からは外して使う */
.ai-arrow {
  --arrow-length: 34px;
  position: relative;
  display: block;
  width: var(--arrow-length);
  height: 2px;
  background: var(--color-ai-text);
}

.ai-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1px;
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--color-ai-text);
  border-right: 2px solid var(--color-ai-text);
  transform: translateY(-50%) rotate(45deg);
}

.ai-arrow--left {
  transform: scaleX(-1);
}

/* --- ヒーロー -------------------------------------------------------------
   カンプ実測：写真 1440×590（ヘッダーの下）/ 文字の左端 x160（コンテンツ幅の40px内側）
   共通ヘッダーは写真の上に重なる作りなので、そのぶん上を空けて背を伸ばしている。 */

.ai-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--header-height) 80px;
}

.ai-hero__bg,
.ai-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* カンプは写真の上下を切って中央を見せている。こちらはヘッダーが重なるぶん背が高いので、
     上端から合わせるとカンプとほぼ同じ範囲（山並みまで・川と木立は出ない）になる */
  object-position: center top;
}

/* 文字の背面に敷く白い薄幕。写真の右側（雲と山）は見せたいので左から右へ薄くする */
.ai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--color-ai-veil-strong), var(--color-ai-veil-soft) 45%, transparent 75%);
}

.ai-hero__inner {
  position: relative;
  z-index: 2;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + 40px) var(--gutter);
}

.ai-hero__en {
  font-family: var(--font-serif-jp);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-ai-accent-text);
}

.ai-hero__title {
  margin-top: var(--space-md);
  font-family: var(--font-serif-jp);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-ai-accent);
}

/* 大事な一文なので帯にして白抜きにする（依頼者の指示・2026-10-31）。
   白文字との差は 5.8:1（--color-ai-accent だと 18px には足りないので濃いほうを使う） */
.ai-hero__catch {
  display: inline-block;
  margin-top: 20px;
  padding: 6px 16px;
  font-size: var(--fs-md);
  font-weight: 500;
  background: var(--color-ai-accent-text);
  color: var(--color-bg);
}

.ai-hero__text {
  margin-top: 18px;
  line-height: 2;
}

.ai-hero .ai-button {
  margin-top: 22px;
}

.ai-hero__note {
  margin-top: 22px;
  font-size: 13px;
}

/* --- 私たちも、同じ中小企業です ------------------------------------------
   カンプ実測：写真 x120 520×360 / 文字 x720〜1320
   カンプではヒーローの直後だが、「私たち“も”」が受ける相手（読み手の悩み）が
   まだ出ていないため、依頼者の指示で CHALLENGES の後ろへ移した（2026-10-31・原稿の順番）。
   白い面が続かないよう、CHALLENGES と面の色を入れ替えてある（こちらがグレー） */

.ai-approach {
  padding-block: 100px;
  background: var(--color-ai-gray);
}

.ai-approach__inner {
  display: grid;
  grid-template-columns: 520px 1fr;
  column-gap: 80px;
  align-items: center;
}

.ai-approach__photo img {
  width: 100%;
  /* カンプの指定どおり、写真を少しだけ白に溶かす */
  opacity: 0.9;
}

.ai-approach__body .ai-title {
  margin-top: var(--space-md);
  font-size: 38px;
}

.ai-approach__text {
  margin-top: var(--space-md);
  font-size: var(--fs-body);
  line-height: 1.76;
}

.ai-approach__strong {
  margin-top: 28px;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-ai-accent-text);
}

.ai-approach__flow {
  margin-top: 28px;
}

/* --- CHALLENGES -----------------------------------------------------------
   ヒーローの直後に置いている（カンプでは「私たちも〜」の後ろ）。面はカンプのグレーから白へ */

.ai-challenges {
  padding-block: 80px;
}

/* カンプは説明文が列幅328を越えて隣の列との間隔まで使っている。
   328幅だと「情報漏えいや誤回答が不安」が折り返すので、列の間隔を詰めて文字の幅を確保した */
.ai-issues {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
  margin-top: var(--space-lg);
  padding-inline: var(--space-sm);
}

/* アイコンは2行ぶん（見出し＋説明）の左に置く */
.ai-issue {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto 1fr;
}

.ai-issue__icon {
  grid-row: 1 / 3;
  width: 96px;
  opacity: 0.92;
}

.ai-issue__title {
  font-size: 20px;
  line-height: 1.5;
}

.ai-issue__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.75;
}

/* --- GOEN'S PRACTICE ----------------------------------------------------- */

.ai-practice {
  padding-block: 80px;
}

/* CASE の区切りが線1本では分かりにくいので、「CASE 01 / 部署」の行を濃い青の帯にした（2026-10-31）。
   いったん淡い水色の面にも載せたが、見た目が重くなったので面はやめ、帯だけ残した（依頼者の判断） */
.ai-cases {
  margin-top: 40px;
}

/* 白文字との差は 5.8:1 */
.ai-case__meta {
  padding: 10px var(--space-sm);
  font-size: 13px;
  font-weight: 700;
  background: var(--color-ai-accent-text);
  color: var(--color-bg);
}

.ai-case__title {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 400;
}

.ai-case__img {
  margin: 26px auto 0;
  opacity: 0.72;
}

.ai-case__time {
  margin-top: 26px;
}

.ai-case__time dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.ai-case__before dd {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.4;
}

/* BEFORE と AFTER のあいだの長い矢印。dl の中に要素を足せないので疑似要素で描く */
.ai-case__after {
  position: relative;
  margin-top: 22px;
  padding-top: 20px;
}

.ai-case__after::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 2px;
  background: var(--color-ai-text);
}

.ai-case__after::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 3px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-ai-text);
  border-right: 2px solid var(--color-ai-text);
  transform: translateY(-50%) rotate(45deg);
}

.ai-case__after dt {
  color: var(--color-ai-accent-text);
}

.ai-case__after dd {
  margin-top: 10px;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ai-accent);
}

.ai-case__text {
  margin-top: var(--space-md);
  line-height: 1.75;
}

.ai-case__result {
  margin-top: 30px;
}

/* 「御社では、どの仕事から変えられそうですか？」の帯 */
.ai-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: 28px;
  padding: 32px var(--space-md);
  background: var(--color-ai-pale);
}

.ai-prompt__title {
  font-size: var(--fs-lg);
  line-height: 1.4;
}

.ai-prompt__text {
  margin-top: 12px;
}

.ai-prompt .ai-button {
  min-width: 330px;
}

/* --- OUR SERVICES -------------------------------------------------------- */

.ai-services {
  padding-block: 80px 100px;
  background: var(--color-ai-gray);
}

.ai-services__list {
  margin-top: 40px;
}

.ai-service__title {
  font-size: var(--fs-lg);
  font-weight: 400;
}

.ai-service__num {
  margin-right: 12px;
}

/* イラストと「学ぶ → 試す → できる」を載せる白い箱 */
.ai-service__figure {
  margin-top: 22px;
  padding: 18px var(--space-sm) 12px;
  background: var(--color-bg);
  text-align: center;
}

.ai-service__figure img {
  margin-inline: auto;
  opacity: 0.82;
}

.ai-service__figure figcaption {
  margin-top: 4px;
  font-size: var(--fs-md);
  color: var(--color-ai-accent-text);
}

.ai-service__catch {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  color: var(--color-ai-accent-text);
}

.ai-service__text {
  margin-top: 18px;
  line-height: 1.875;
}

/* 「目指す変化」は大事な部分なので枠で囲って目立たせる（依頼者の指示・2026-10-31）。
   ラベルは白抜きの札、変化の言葉は太字の青 */
.ai-service__goal {
  margin-top: 34px;
  padding: 18px 20px 20px;
  border: 2px solid var(--color-ai-accent-text);
  background: var(--color-bg);
}

.ai-service__goal dt {
  display: inline-block;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
  background: var(--color-ai-accent-text);
  color: var(--color-bg);
}

.ai-service__goal dd {
  margin-top: 10px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-ai-accent-text);
}

/* --- TRAINING（研修メニュー） ----------------------------------------------
   B案には無いセクション（2026-10-31 依頼者の指示で追加）。
   前後が灰色（OUR SERVICES）と白（AI STAFF）なので、淡い水色の面にして区切る。
   カードは「3つの支援」と同じ白地。4枚の見出し・対象の段を subgrid でそろえる */

.ai-training {
  padding-block: var(--space-xl);
  background: var(--color-ai-pale);
}

.ai-training__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: 40px;
}

.ai-training__item {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: var(--space-sm);
  align-content: start;
  padding: var(--space-md);
  background: var(--color-bg);
}

.ai-training__num {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-ai-accent);
}

.ai-training__name {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ai-accent-text);
}

/* 「こんな方に」は白抜きの札＋対象。「目指す変化」の札と同じ見せ方 */
.ai-training__target dt {
  display: inline-block;
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--color-ai-accent-text);
  color: var(--color-bg);
}

.ai-training__target dd {
  margin-top: var(--space-xs);
  font-weight: 700;
}

.ai-training__text {
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.ai-training__set {
  align-self: end;
  padding: 4px var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  background: var(--color-ai-pale);
  color: var(--color-ai-accent-text);
}

.ai-training__notes {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.ai-training__notes li + li {
  margin-top: 4px;
}

.ai-training__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  text-align: center;
}

.ai-training__cta-text {
  font-size: var(--fs-md);
  color: var(--color-ai-accent-text);
}

/* --- AI STAFF --------------------------------------------------------------
   カンプ実測：図の箱 x120〜1320 / 高さ358。左の列・中央のロボット・右の列を矢印でつなぐ */

.ai-staff {
  padding-block: 80px 100px;
}

/* カンプの列幅（左282・右386）のままだとロボットが箱の中央より52px左に寄るので、
   左右の列を同じ幅にし、中身をそれぞれの列の中央に置く（依頼者の指示・2026-10-31） */
.ai-staff__diagram {
  display: grid;
  grid-template-columns: 1fr auto 300px auto 1fr;
  align-items: center;
  column-gap: var(--space-md);
  margin-top: 28px;
  padding: var(--space-lg) 32px;
  background: var(--color-ai-gray);
}

/* 左右の列は上揃えにして、2つの見出しの高さをそろえる（依頼者の指示・2026-10-31）。
   中央のロボットと矢印は上下中央のまま */
.ai-staff__col {
  align-self: start;
  justify-self: center;
}

/* 図の見出し・項目は太字にして目立たせる（依頼者の指示・2026-10-31）。説明の小さい文字は中太 */
.ai-staff__heading {
  font-size: 20px;
  font-weight: 700;
}

.ai-staff__sources {
  display: grid;
  row-gap: 36px;
  margin-top: 30px;
  padding-left: 12px;
  font-weight: 700;
}

.ai-staff__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 40px;
  background: var(--color-bg);
}

.ai-staff__arrow .ai-arrow {
  --arrow-length: 30px;
}

.ai-staff__core {
  text-align: center;
}

.ai-staff__core img {
  margin-inline: auto;
  opacity: 0.82;
}

.ai-staff__name {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ai-accent);
}

.ai-staff__desc {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.ai-staff__uses {
  display: grid;
  row-gap: 18px;
  margin-top: 18px;
}

.ai-staff__uses dt {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-ai-accent-text);
}

.ai-staff__uses dd {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
}

.ai-staff__note {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
}

/* 4段を図の幅いっぱいに伸ばすと間延びするので、幅を絞って中央に置く */
.ai-staff__flow {
  max-width: 880px;
  margin: 40px auto 0;
}

/* --- AI活用の伴走 ----------------------------------------------------------
   カンプ実測：GOEN と御社のカード 300×277 / 矢印の箱 70×98 / 間隔14 */

.ai-support {
  padding-block: 86px 96px;
  background: var(--color-ai-pale);
}

.ai-support__head {
  display: grid;
  grid-template-columns: 1fr 520px;
  column-gap: 80px;
}

.ai-support__text {
  margin-top: 30px;
  line-height: 1.875;
}

.ai-support__band {
  width: 400px;
  max-width: 100%;
  margin: 50px auto 0;
  padding: 10px var(--space-sm);
  background: var(--color-ai-band);
  font-size: var(--fs-sm);
  text-align: center;
}

.ai-support__diagram {
  display: grid;
  grid-template-columns: 300px 70px 1fr 70px 300px;
  column-gap: 14px;
  margin-top: 50px;
  padding-inline: 32px;
}

.ai-support__card {
  padding: 30px 20px 26px;
  background: var(--color-bg);
  text-align: center;
}

.ai-support__card img,
.ai-support__center img {
  margin-inline: auto;
  opacity: 0.82;
}

.ai-support__name {
  margin-top: 14px;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--color-ai-accent);
}

.ai-support__role {
  margin-top: 14px;
  line-height: 1.8;
}

.ai-support__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ai-support__link-label {
  font-size: var(--fs-xs);
  color: var(--color-ai-accent-text);
}

.ai-support__arrows {
  display: grid;
  place-content: center;
  row-gap: 26px;
  width: 70px;
  height: 98px;
  background: var(--color-bg);
}

.ai-support__arrows .ai-arrow {
  --arrow-length: 54px;
}

.ai-support__center {
  text-align: center;
}

.ai-support__center-title {
  font-size: 22px;
}

.ai-support__center img {
  margin-top: 12px;
}

/* 「課題整理 → 実践 → 振り返り」も矢羽根にそろえた（依頼者の指示・2026-10-31）。
   面が淡い水色で1段目と同じ色になるため、ここだけ1段目を白地にする */
.ai-support__center-caption {
  margin-top: 12px;
  font-size: 15px;
}

.ai-support__center-caption li:nth-child(1) {
  background: var(--color-bg);
}

/* 伴走の締めはカンプで本文色 */
.ai-support__closing {
  margin-top: var(--space-lg);
  font-size: 20px;
  color: var(--color-ai-text);
}

/* --- FAQ（B案には無い。旧版から移し、B案の配色に合わせて組み直した） ---------
   伴走（淡い水色）の次・お問い合わせ導線（白）の前なので、淡いグレーの面にして区切る */

.ai-faq {
  padding-block: 80px;
  background: var(--color-ai-gray);
}

.ai-faq__list {
  margin-top: 40px;
  padding-inline: 28px;
}

.ai-faq__item {
  border-bottom: 1px solid var(--color-ai-button);
}

.ai-faq__item:first-child {
  border-top: 1px solid var(--color-ai-button);
}

.ai-faq__q {
  position: relative;
  padding: 22px 48px 22px 40px;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  /* 標準の三角マーカーを消す（Safari は ::-webkit-details-marker が要る） */
  list-style: none;
}

.ai-faq__q::-webkit-details-marker {
  display: none;
}

.ai-faq__q::before {
  content: "Q";
  position: absolute;
  left: 4px;
  font-family: var(--font-serif-jp);
  font-size: 20px;
  line-height: 1.45;
  color: var(--color-ai-accent-text);
}

/* 開閉の目印。開いているときは横棒だけにする */
.ai-faq__q::after {
  content: "＋";
  position: absolute;
  /* 質問が2行になっても1行目の高さに置く（上の余白と同じ値） */
  top: 22px;
  right: 8px;
  font-weight: 400;
  color: var(--color-ai-accent-text);
}

.ai-faq__item[open] .ai-faq__q::after {
  content: "−";
}

.ai-faq__q:hover {
  color: var(--color-ai-accent-text);
}

.ai-faq__a {
  position: relative;
  max-width: 860px;
  padding: 0 48px 24px 40px;
  line-height: 1.9;
}

.ai-faq__a::before {
  content: "A";
  position: absolute;
  top: -2px;
  left: 4px;
  font-family: var(--font-serif-jp);
  font-size: 20px;
  line-height: 1.45;
  color: var(--color-ai-accent);
}

/* --- お問い合わせへの導線 -------------------------------------------------- */

.ai-cta {
  padding-block: 90px 72px;
  text-align: center;
}

.ai-cta__title {
  font-family: var(--font-serif-jp);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-ai-accent);
}

.ai-cta__text {
  margin-top: 30px;
}

.ai-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: 30px;
}

.ai-cta .ai-button {
  min-width: 340px;
}

/* ==========================================================================
   AI活用コンサル：タブレット（1100px以下）
   ========================================================================== */

@media (max-width: 1100px) {
  .ai-cols,
  .ai-issues {
    column-gap: 40px;
    padding-inline: 0;
  }

  .ai-faq__list {
    padding-inline: 0;
  }

  .ai-hero__inner {
    padding-inline: var(--gutter);
  }

  /* 箱が狭くなると「手作業 → AIで効率化 → 確認」が折り返すので一段小さくする */
  .ai-service__figure figcaption {
    font-size: 15px;
  }

  .ai-hero__title {
    font-size: 38px;
  }

  .ai-approach__inner {
    grid-template-columns: 45% 1fr;
    column-gap: var(--space-lg);
  }

  .ai-approach__body .ai-title {
    font-size: 32px;
  }

  .ai-support__head {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-lg);
  }

  /* 3列だと「情報漏えいや誤回答が不安」が1文字だけ折り返すので2列にする */
  .ai-issues {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-support__diagram {
    grid-template-columns: 240px 70px 1fr 70px 240px;
    padding-inline: 0;
  }

  /* カードが240幅になると「使い方を提案し、改善を支える」が1文字だけ折り返す */
  .ai-support__card {
    padding-inline: 12px;
  }

  .ai-support__role {
    font-size: var(--fs-sm);
  }

  .ai-staff__diagram {
    grid-template-columns: 1fr auto 240px auto 1fr;
    padding-inline: var(--space-md);
  }

  /* 4枚並びだと研修名が3〜4行に折れるので2枚ずつにする */
  .ai-training__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 図を横に並べる余裕が無くなったら、縦積みにして矢印を下向きにする */
@media (max-width: 960px) {
  .ai-service__figure figcaption {
    font-size: var(--fs-sm);
  }

  /* 3列のまま列が狭くなり、「CASE 01 / 経営企画部・管理部」の帯だけ2行になって
     帯の高さがそろわなくなるので、余白と文字を少し詰める（スマホの1列では下で戻す） */
  .ai-case__meta {
    padding-inline: 12px;
    font-size: var(--fs-xs);
  }

  /* 問いかけの文が「か？」だけ次の行に落ちるので、ボタンを下に回す */
  .ai-prompt {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-staff__diagram {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: var(--space-md);
    padding: 40px var(--space-md);
    text-align: center;
  }

  .ai-staff__sources {
    row-gap: 12px;
    margin-top: var(--space-sm);
    padding-left: 0;
  }

  .ai-staff__arrow .ai-arrow {
    transform: rotate(90deg);
  }

  .ai-support__head {
    grid-template-columns: 1fr;
  }

  .ai-support__text {
    margin-top: var(--space-md);
  }

  .ai-support__diagram {
    grid-template-columns: 1fr;
    row-gap: var(--space-sm);
    max-width: 440px;
    margin-inline: auto;
  }

  /* 「↓ 提案・改善 ↑」の並びで白い箱に入れる（依頼者の指示・2026-10-31）。
     矢印の入れ物を display: contents で外し、1本目の矢印だけ文字の前に出す */
  .ai-support__link {
    flex-direction: row;
    gap: 4px;
    justify-self: center;
    min-height: 70px;
    padding-inline: var(--space-sm);
    background: var(--color-bg);
  }

  .ai-support__arrows {
    display: contents;
  }

  .ai-support__link .ai-arrow:first-child {
    order: -1;
  }

  /* 回したあとの縦の長さ */
  .ai-support__arrows .ai-arrow {
    --arrow-length: 44px;
    transform: rotate(90deg);
  }

  .ai-support__arrows .ai-arrow--left {
    transform: rotate(-90deg);
  }
}

/* ==========================================================================
   AI活用コンサル：スマホ（768px以下）
   ========================================================================== */

@media (max-width: 768px) {
  .ai-title {
    margin-top: 12px;
    font-size: var(--fs-lg);
  }

  .ai-title--lg,
  .ai-approach__body .ai-title {
    font-size: 26px;
  }

  .ai-label--serif {
    font-size: var(--fs-md);
  }

  .ai-lead {
    margin-top: 20px;
  }

  .ai-closing {
    margin-top: 40px;
    font-size: var(--fs-body);
  }

  .ai-cols {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }

  .ai-flow li + li::before {
    margin-inline: 8px;
  }

  .ai-button {
    width: 100%;
    min-width: 0;
    max-width: 400px;
  }

  /* ヒーロー：文字が画面の幅いっぱいに乗るので、薄幕も全面に均一に敷く */
  .ai-hero {
    padding-block: calc(var(--header-height) + 40px) 56px;
  }

  .ai-hero::before {
    background: var(--color-ai-veil-strong);
  }

  .ai-hero__en {
    font-size: var(--fs-base);
  }

  .ai-hero__title {
    margin-top: var(--space-sm);
    font-size: 27px;
  }

  .ai-hero__catch {
    font-size: var(--fs-base);
  }

  .ai-hero__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .ai-approach {
    padding-block: 64px;
  }

  .ai-approach__inner {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .ai-approach__strong {
    font-size: var(--fs-md);
  }

  /* 矢羽根を小さくする（16pxのままだと3段でも右に19pxはみ出す） */
  .ai-flow--steps {
    --step-notch: 10px;
    font-size: var(--fs-sm);
  }

  .ai-flow--steps li {
    padding-inline: calc(var(--step-notch) + 4px);
  }

  /* 4段は1行に収まらないので2段×2行にする */
  .ai-staff__flow {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .ai-staff__flow li {
    flex-basis: calc(50% - 2px);
  }

  .ai-challenges,
  .ai-practice,
  .ai-services,
  .ai-staff {
    padding-block: 64px;
  }

  .ai-issues {
    grid-template-columns: 1fr;
    row-gap: 32px;
    margin-top: 32px;
  }

  .ai-issue {
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
  }

  .ai-issue__icon {
    width: 72px;
  }

  .ai-issue__title {
    font-size: var(--fs-md);
  }

  .ai-cases,
  .ai-services__list {
    margin-top: 32px;
  }

  .ai-case__meta {
    padding-inline: var(--space-sm);
    font-size: 13px;
  }

  .ai-case__after dd {
    font-size: 36px;
  }

  .ai-case__result {
    margin-top: 20px;
  }

  .ai-prompt {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md) 20px;
  }

  .ai-prompt__title {
    font-size: 20px;
  }

  .ai-prompt .ai-button {
    min-width: 0;
  }

  .ai-service__goal {
    margin-top: 20px;
  }

  .ai-training__list {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  /* 1枚ずつなら高さをそろえる必要が無いので、subgrid をやめて中身の分だけにする */
  .ai-training__item {
    grid-row: auto;
    grid-template-rows: none;
  }

  .ai-training__set {
    justify-self: start;
  }

  .ai-training__cta-text {
    font-size: var(--fs-base);
    text-align: left;
  }

  .ai-staff__note,
  .ai-cta__text {
    text-align: left;
  }

  .ai-support {
    padding-block: 64px;
  }

  .ai-support__band {
    margin-top: 32px;
  }

  .ai-support__diagram {
    margin-top: 32px;
  }

  .ai-support__closing {
    margin-top: 32px;
    font-size: var(--fs-body);
  }

  .ai-faq {
    padding-block: 64px;
  }

  .ai-faq__list {
    margin-top: 32px;
    padding-inline: 0;
  }

  .ai-faq__q {
    padding: 18px 32px 18px 30px;
    font-size: var(--fs-base);
  }

  .ai-faq__q::before,
  .ai-faq__a::before {
    left: 0;
    font-size: var(--fs-md);
  }

  .ai-faq__q::after {
    top: 18px;
    right: 0;
  }

  .ai-faq__a {
    padding: 0 0 20px 30px;
    font-size: 15px;
  }

  .ai-cta {
    padding-block: 64px;
  }

  .ai-cta__title {
    font-size: var(--fs-lg);
  }

  .ai-cta .ai-button {
    min-width: 0;
  }
}

/* 幅320pxの端末では14pxでも「自社で試す」の段が収まらず、右の余白に14pxはみ出すので一段小さくする */
@media (max-width: 360px) {
  .ai-flow--steps {
    --step-notch: 8px;
    font-size: var(--fs-xs);
  }
}