@charset "UTF-8";
/* ============================================================
   HOKUSEI PRODUCTS - Top Page Mock v2
   デザイン基準（参考デザイン）のデザイン言語を
   ホクセイのカラー規定にマッピングして再構築
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* ホクセイプロダクツ正式カラーパレット */
  --color-hokusei-blue: #073489;
  --color-deep-navy: #0B1F3A;
  --color-aqua: #2DB8C5;
  --color-aqua-mist: #EAFBFD;
  --color-white: #FFFFFF;
  --color-mist: #FFFFFF;
  --color-harbor: #DFF5F6;
  --color-silver: #C9D1D9;
  --color-gold: #F1C75B;
  --color-green: #597A66;

  /* アクセント統合（D-028・参考デザイン引き算回帰）。
     参考デザインのオレンジ1色が担っていた役（重要数値/線画差し色/矢印/CTA塗り/下線マーク）を、
     すべて Hokusei Blue #073489 の1色に集約。旧 coral/gold の2差し色・3グラデは全廃。
     互換のため旧トークン名は残すが、いずれも Hokusei Blue / フラット面へ再ポイント */
  --c-coral: var(--color-aqua);
  --c-gold: var(--color-gold);
  --c-teal: var(--color-aqua);
  --c-green2: var(--color-green);
  --grad-dawn: var(--color-hokusei-blue);   /* グラデ全廃→フラット面 */
  --grad-beacon: var(--color-deep-navy);    /* CTAホバー＝Blue塗りをNavyへ沈める（フラット） */
  --grad-sea: var(--color-hokusei-blue);    /* グラデ全廃→フラット面 */
  /* アイソメイラストは本来の色を維持（S-3の単色化フィルタは色が不自然だったため撤回）。
     参考デザイン式の単色線画は新規アセット（紺一色ペン線画）受領時に差し替える */
  --illust-filter: saturate(1.15) contrast(1.05) brightness(1.03);

  /* フォント（デザイン基準と同系統） */
  --font-ja: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Plus Jakarta Sans", sans-serif;
  /* 明朝：物語セクション（p-story）の見出し限定。読み込み失敗時は游明朝系→ゴシックへ縮退 */
  --font-mincho: "Shippori Mincho B1", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;

  /* 超大型セクションタイトル（参考デザイン80〜130px準拠。B級で下限を引き上げ、
     中間〜狭幅VPでも巨大英字が痩せないように。1366では9.4vw≒128px＝参考デザイン上限域） */
  --fs-title-en: clamp(5.2rem, 6.8vw, 8.8rem);
  --fs-catch: clamp(2.6rem, 3.4vw, 4.2rem);
  --fs-hero: clamp(2.8rem, 3.8vw, 5.4rem);

  /* タイプスケール（2026-07-10 導入。役割ごとに乱立していたrem/clamp直書きを集約。
     値の表現は既存のclamp式を維持し、本文=1.5rem基準で階層を定義）
     ※ sticky 3セクション(Who/Purpose/Business)のvh連動clampは高さ収支のため凍結し対象外 */
  --fs-x2s: 1.1rem;                          /* 注記・コピーライト */
  --fs-xs: 1.2rem;                           /* キャプション・チップ */
  --fs-sm: 1.3rem;                           /* 小ラベル・キッカー */
  --fs-base: 1.5rem;                         /* 本文標準 */
  --fs-md: 1.6rem;                           /* 本文リード */
  --fs-lg: clamp(1.8rem, 2vw, 2.2rem);       /* 小見出し */
  --fs-xl: clamp(2.4rem, 2.6vw, 3.4rem);     /* セクションH2級 */

  /* 字間トークン（2026-07-10 原則v2 B-3/B-6・D-021準拠）。
     和文見出しは字間で「標識化」して格を上げ、英字ディスプレイは詰め、
     英字ラベル（eyebrow）は大きく開けて節の栞にする。役割別に4段で運用 */
  --ls-display: -0.015em;  /* 大型英字ディスプレイ（グロテスク大型は詰め気味に） */
  --ls-heading: 0.08em;    /* 和文の章キャッチ・節見出し */
  --ls-kicker: 0.12em;     /* 和文キッカー（ 〜 ）・小ラベル */
  --ls-label: 0.28em;      /* 英字eyebrow・節ラベル（標識化） */

  /* アニメーショントークン：新規実装は必ずこの値を参照する
     （場当たり的な個別秒数指定を減らし、サイト全体のテンポを統一） */
  /* 参考デザイン主イージング（強めのease-out・D-028/A-2）。旧: cubic-bezier(0.25,0.1,0.25,1)＝平凡。
     `--ease`は44+箇所の transition が参照するため、1点変更でサイト全体のテンポを参考デザイン調に統一 */
  --ease: cubic-bezier(0.65, 0.4, 0, 1);
  --dur-fast: 0.35s;  /* 出ていく側・小さな変化 */
  --dur-base: 0.8s;   /* 標準の入場フェード（参考デザインは大要素ほど長い .8〜1.2s） */
  --dur-slow: 1.2s;   /* 大きな遷移（円形モーフ等） */
  --anime-stagger: 0.12s; /* 兄弟要素の時間差 */

  /* 余白・角丸トークン（2026-07-10 導入。同値の直書きコピペを一元化） */
  --space-sec: clamp(104px, 13vh, 168px);
  --sp-head: 44px;
  --radius-xs: 2px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 18px;                        /* 浮遊カード（v3・16〜20px域） */
  --radius-lg: 24px;

  /* カード共通シャドウ（v3-1 #7 浮遊カード） */
  --shadow-card: 0 8px 24px rgba(7, 52, 137, 0.12);
  --shadow-card-hover: 0 18px 40px rgba(7, 52, 137, 0.18);
  --radius-full: 999px;

  --container: 1240px;
  --pad: 40px;
  --header-h: 92px;
}
@media (max-width: 767px) {
  :root {
    --pad: 20px;
    --header-h: 68px;
    --fs-title-en: clamp(5.6rem, 16vw, 7.6rem);
    --fs-catch: 2.4rem;
    --fs-hero: clamp(2.4rem, 7vw, 3.2rem);
  }
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-ja);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--color-deep-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 和文の約物・仮名を最適詰め（palt）。日本語タイポの上質さを決める最重要指定。
     行末約物のアキ・「」（）の間延びが締まり、見出し・本文とも別物の完成度になる */
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
}
/* 凍結セクション（Who/Purpose/Business）はsticky高さ収支保護（§8.5）のため、
   字幅に影響する palt と letter-spacing を旧メトリクスに厳密固定し、
   body側の字詰め刷新をこの3領域には波及させない（1366×768で収支実測・不変を確認） */
.p-mv__who,
.p-purpose,
.p-business {
  letter-spacing: 0.05em;
  line-height: 2.0;
  font-feature-settings: normal;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--color-hokusei-blue); outline-offset: 3px; }

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

/* ---------- Fade-in ---------- */
.js-fadein {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  transition-delay: var(--fadein-delay, 0s);
}
.js-fadein.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   デザイン基準移植：方向付きアニメーション（.js-anime + data-anime）
   ============================================================ */
.js-anime[data-anime="fadein-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.js-anime[data-anime="fadein-left"] {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.js-anime[data-anime="fadein-right"] {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.js-anime[data-anime="fadein-img"] {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js-anime.is-animated { opacity: 1; transform: none; }

/* 発火遅延（data-anime-delay） */
.js-anime[data-anime-delay="0.2"] { transition-delay: 0.2s; }
.js-anime[data-anime-delay="0.3"] { transition-delay: 0.3s; }
.js-anime[data-anime-delay="0.4"] { transition-delay: 0.4s; }
.js-anime[data-anime-delay="0.6"] { transition-delay: 0.6s; }
.js-anime[data-anime-delay="0.8"] { transition-delay: 0.8s; }

/* ---- 文字分割アニメ（txt-rollup：下から立ち上がる。回転は2026-07-15に廃止） ---- */
.js-txt-anime {
  /* overflow:hidden だと行高の詰まった見出しでディセンダー(g/y/p等)が下端で
     見切れる。overflow:clip + clip-margin にして、レイアウトを変えずにクリップ
     範囲を少しだけ外側へ広げ、ディセンダーを見せる（アニメ前の文字は約1em下に
     あるため、この程度のマージンでは隠れたまま）。 */
  overflow: clip;
  overflow-clip-margin: 0.3em;
  display: inline-block;
}
.js-txt-anime > span {
  display: inline-block;
  opacity: 0;
  /* 回転(rotate(45deg))は「不要」との指摘により廃止。下から立ち上がる動きのみ残す */
  transform: translateY(100%);
  /* split-textリビールも参考デザイン主イージング（強めease-out）に統一（B-2/A-2） */
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  letter-spacing: inherit;
}
.js-txt-anime > span.is-space { min-width: 0.28em; }
.js-txt-anime.is-animated > span {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ホクセイ・デコレーション（デザイン基準のc-deco01相当）
   波・青海波・航路・立山連峰・波紋をSVG線描画で「描く」演出。
   JSがgetTotalLengthでdasharray/offsetを設定し、可視化時にoffset→0
   ============================================================ */
.c-deco {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
  /* 装飾線専用の展開色（2026-07-10 デザイナーレビューで正式決定）。
     規定のPale Harbor Blue #DCEFF8 / Aluminum Silver #C9D1D9 / Muted Green #597A66 を
     基準に、1366px級の非Retina環境で線が消えず、かつテキスト背後に敷いても
     圧迫しない中間トーンへ調整。敷き運用のデコには別途 opacity:0.55 を併用 */
  --deco-blue: #9EDFE4;
  --deco-silver: #BBC6D0;
  --deco-green: #BCCFC3;
}
.c-deco svg { width: 100%; height: auto; display: block; overflow: visible; }
/* 航路のドットは線描画の後にフェードイン */
.js-deco .dot { opacity: 0; transition: opacity 0.5s var(--ease) 1.1s; }
.js-deco.is-drawn .dot { opacity: 1; }

/* --- 配置バリアント ---
   デザイナーレビュー(2026-07-10)に基づく座標系:
   ・「敷く」型(who-wave/recruit/contact)は装飾対象のタイトル要素の内部に置き、
     em単位（＝タイトルのfont-sizeに連動）で配置。タイポがclampで伸縮しても追従する
   ・「逃がす」型(mission/vision/value)はキャッチ要素の内部に置き、
     キャッチ上の余白内にem単位で完結させる
   ・固定px配置は可変タイポと交差するため禁止（過去バグの根因） */
.c-deco--who-wave { top: -0.28em; left: -0.3em; width: 3.6em; opacity: 0.55; z-index: -1; color: var(--deco-blue); }
.c-deco--mission  { top: -2.35em; left: -0.2em; width: 5.0em; z-index: -1; color: var(--deco-blue); }
.c-deco--vision   { top: -2.35em; left: -0.2em; width: 5.0em; z-index: -1; color: var(--deco-blue); }
/* Value＝価値観は緑系（サステナ・自然・地域資源と同じ意味カラー。D-019） */
.c-deco--value    { top: -1.8em; left: -0.1em; width: 5.2em; z-index: -1; color: var(--deco-green); }
.c-deco--network  { top: -26px; left: min(52vw, 620px); width: 110px; color: var(--deco-blue); }
.c-deco--data     { top: -8px; right: 6%; width: 190px; color: var(--deco-silver); }
.c-deco--recruit  { top: -0.25em; left: -0.22em; width: 3.4em; opacity: 0.55; z-index: -1; color: var(--deco-blue); }
.c-deco--contact  { top: -0.15em; left: -0.16em; width: 1.2em; opacity: 0.5; z-index: -1; color: var(--deco-blue); }
.c-deco--purpose-label { top: 34px; left: calc(var(--pad) + 6px); width: 170px; color: var(--deco-blue); }
.c-deco--business { top: -34px; right: -36px; width: 200px; color: var(--deco-blue); }
.c-deco--solutions { top: 26px; left: min(47vw, 620px); width: 250px; color: var(--deco-blue); }
.c-deco--sus      { top: -44px; left: -26px; width: 230px; color: var(--deco-green); }
.c-deco--news     { top: 10px; left: min(38vw, 470px); width: 230px; color: var(--deco-blue); }
.c-deco--insta    { top: 50%; right: 140px; transform: translateY(-50%); width: 96px; color: var(--deco-blue); }
.c-deco--story    { top: 6px; left: min(40vw, 520px); width: 220px; color: var(--deco-blue); }
.c-deco--process  { top: -34px; right: -30px; width: 190px; color: var(--deco-blue); }
@media (max-width: 767px) {
  .c-deco--story { left: auto; right: 0; top: -16px; width: 150px; }
  .c-deco--process { right: 0; width: 130px; }
}

/* === 幾何ドットグリッド装飾（統一）2026-07-13 =========================
   手描きの波・航路をやめ、精密なアクア色ドット格子のアクセントに統一。
   全モチーフを小さな正方形の格子として同サイズ・同色で敷く。 */
.c-deco { color: #2DB8C5; width: 46px; opacity: 1; }
.c-deco svg { width: 100%; overflow: visible; }
@media (max-width: 767px) {
  .c-deco { width: 38px; }
}

/* 「逃がす」型のアンカー: キャッチ自身を基準座標に。isolateでz-index:-1を内部に閉じ込め、
   キャッチの文字より奥・パネル背景より手前に確実に入れる */
.p-purpose__catch { position: relative; isolation: isolate; }
/* 「敷く」型のアンカー: タイトルh2をラッパーで包み、デコはその兄弟として置く。
   （h2内部に置くと .js-txt-anime > span の文字アニメ規則とoverflow:hiddenが
   デコを巻き込むため不可。）wrapのfont-sizeをタイトルと同値にすることで
   デコのem指定がタイトルサイズに連動する。inline-blockでテキスト幅に密着し、
   中央揃えセクションでも頭文字位置にleftが効く */
.c-title-wrap {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-size: var(--fs-title-en);
  line-height: 1.05;
}

/* デコの親に基準座標を持たせ、テキストが上に載るようにする */
.p-who__body,
.p-purpose__left,
.p-network__head,
.p-data__head,
.p-recruit__body,
.p-contact__inner,
.c-sec-label,
.p-business__fixed,
.p-solutions__head,
.p-sus__head,
.p-news__head,
.p-story__head,
.p-process__head,
.p-insta__box { position: relative; }
.p-who__body > *:not(.c-deco),
.p-purpose__left > *:not(.c-deco),
.p-network__head > *:not(.c-deco),
.p-data__head > *:not(.c-deco),
.p-recruit__body > *:not(.c-deco),
.p-contact__inner > *:not(.c-deco),
.c-sec-label > *:not(.c-deco),
.p-business__fixed > *:not(.c-deco),
.p-solutions__head > *:not(.c-deco),
.p-sus__head > *:not(.c-deco),
.p-news__head > *:not(.c-deco),
.p-story__head > *:not(.c-deco),
.p-process__head > *:not(.c-deco),
.p-insta__box > *:not(.c-deco) { position: relative; z-index: 1; }

@media (max-width: 767px) {
  /* who-wave / recruit / contact / mission / vision / value は
     em基準（タイポ連動）に移行したためSP個別上書き不要 */
  .c-deco--network { left: auto; right: 0; top: -60px; width: 72px; }
  .c-deco--data { right: 0; width: 150px; }
  .c-deco--business { right: 0; width: 130px; }
  .c-deco--solutions { left: auto; right: 0; top: -20px; width: 160px; }
  .c-deco--news { left: auto; right: 0; top: -16px; width: 150px; }
  .c-deco--sus { top: -36px; width: 180px; }
  /* SPのInstaバナーは縦積み中央揃えで波紋の居場所がないため非表示 */
  .c-deco--insta { display: none; }
  .c-deco--purpose-label { width: 130px; top: 28px; }
}

/* ---- マグネットボタン ---- */
.js-stalker {
  transition-property: transform, background-color, color, border-color;
  transition-duration: 0.25s, 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-fadein { opacity: 1; transform: none; transition: none; }
  .js-anime { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-txt-anime > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   共通コンポーネント
   ============================================================ */

/* 超大型英字タイトル + （ 和文 ）キッカー */
.c-title-en {
  font-family: var(--font-en);
  font-size: var(--fs-title-en);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  color: var(--color-deep-navy);
}
/* エコー（残像）: デザイン基準の巨大英字の奥行き表現。
   data-echo属性のテキストを淡いアウトライン文字として右下にずらして重ねる。
   js-txt-animeの文字分割はchildノードの置換のみなので疑似要素は影響を受けない */
.c-title-echo {
  position: relative;
  z-index: 0;
}
.c-title-echo::before {
  content: attr(data-echo);
  position: absolute;
  left: 0.045em;
  top: 0.09em;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-harbor);
  pointer-events: none;
  user-select: none;
}
.c-title-kicker {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-kicker);
  color: var(--color-deep-navy);
  margin-top: 10px;
}

/* キーワードの手描き風下線マーク（参考デザインの u-text-primary-300＝淡オレンジ手描き下線を、
   規定色 Hokusei Blue の淡色に翻訳）。核となる語の下に、緩やかにうねる1本の手描き風ストロークを敷き、
   親のjs-fadein発火（is-visible）で左→右に展開。淡色（Hokusei Blue α0.32）ゆえDeep Navy本文の可読性は不変 */
/* c-mark：核となる語の下にゴールドの帯を敷く。文字は常に表示したまま、
   下線（マーカー帯）だけが左→右に伸びてアニメーションする。表示トリガー
   （is-shown。JSのIntersectionObserver／purposeのパネル切替が付与）で線が伸びる。 */
.c-mark {
  position: relative;
  display: inline-block;
  padding: 0 0.08em;
  color: inherit;                   /* 文字色は周囲と同じ（キーワードだけ変色させない） */
  z-index: 0;
  background: none;                 /* 旧・波状ブラシSVGを無効化 */
}
/* マーカー帯（下地・ゴールド）。初期は幅0で、is-shown で左→右に伸びる */
.c-mark::after {
  content: "";
  position: absolute;
  left: 0.02em; right: 0.02em; bottom: 0.06em;
  height: 0.42em;
  z-index: -1;
  border-radius: 3px;
  background: linear-gradient(90deg, #F2B33B 0%, #FBD97A 100%);
  transform: scaleX(0);
  transform-origin: left center;
}
/* 表示トリガー：is-shown が付くと下線だけが左→右に伸びる（文字は常時表示） */
.c-mark.is-shown::after {
  animation: mark-line 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 2語ある場合は2つ目を少し遅らせて連続感を出す */
.c-mark.is-shown:nth-of-type(2)::after {
  animation-delay: 0.16s;
}
@keyframes mark-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .c-mark::after { animation: none !important; transform: scaleX(1); }
}

/* セクションラベル帯（Our Purpose ｜（ 企業理念 ）） */
.c-sec-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin-inline: auto;
  padding: 90px var(--pad) 36px;
}
.c-sec-label__en {
  font-family: var(--font-en);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  color: var(--color-deep-navy);
}
.c-sec-label__ja { font-size: var(--fs-sm); letter-spacing: var(--ls-kicker); }

/* ピル型ボタン（参考デザイン準拠・B-4）: radius9999 / 1px枠 / 背景透明 / 右に矢印 / 13px。
   左右非対称パディング（右に矢印の間）。塗りCTA(--fill)はBlue塗り＋白文字を維持。
   js-stalkerがtransformを持つためhover演出はcolor/border/背景のみ（transform不使用） */
.c-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4em;
  min-width: 200px;
  padding: 13px 20px 13px 26px;
  border: 1px solid var(--color-deep-navy);
  border-radius: 9999px;
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-deep-navy);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* 矢印はHokusei Blueの"点"（差し色1色・D-028）。ホバーで4pxスライド */
.c-btn-pill__arrow {
  font-family: var(--font-en);
  color: var(--color-aqua);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* アクセントはHokusei Blue1色（D-028）。Blue塗りには白文字を載せてAA担保
   （白 on Hokusei Blue #073489 ≒ 9.6:1。旧コーラルのnavy文字運用は撤回） */
.c-btn-pill:hover { background: var(--color-aqua); color: var(--color-deep-navy); border-color: var(--color-aqua); }
.c-btn-pill:hover .c-btn-pill__arrow { transform: translateX(4px); color: var(--color-deep-navy); }
/* 主要CTA（塗り）＝Hokusei Blueフラット塗り＋白文字。ホバーでDeep Navyへ沈める（グラデ全廃）。js-stalker競合回避のため自身はtransform不使用 */
.c-btn-pill--fill { background: var(--color-hokusei-blue); border-color: var(--color-hokusei-blue); color: var(--color-white); }
.c-btn-pill--fill .c-btn-pill__arrow { color: var(--color-white); }
.c-btn-pill--fill:hover { background: var(--grad-beacon); border-color: transparent; color: var(--color-white); box-shadow: 0 10px 26px rgba(7, 52, 137, 0.28); }
.c-btn-pill--fill:hover .c-btn-pill__arrow { color: var(--color-white); }
.c-btn-pill--large { min-width: 280px; padding: 17px 32px; font-size: var(--fs-base); }

/* 円形フローティングバッジ */
.c-float-badge {
  position: fixed;
  right: 34px;
  bottom: 34px;
  z-index: 90;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.7;
  background: var(--color-hokusei-blue);
  box-shadow: 0 12px 28px rgba(7, 52, 137, 0.28);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* js-stalkerがinline transformを持つため、hover演出はbackground/影のみ（transform不使用） */
.c-float-badge:hover { background: var(--grad-beacon); box-shadow: 0 16px 38px rgba(7, 52, 137, 0.4); }
@media (max-width: 767px) {
  .c-float-badge { width: 84px; height: 84px; right: 16px; bottom: 16px; font-size: 1.05rem; }
}

/* 波形セクション（上下に有機的な曲線）
   背景はベタ塗りではなく、角にほのかな色の滲みを重ねて奥行きを持たせる
   （デザイン基準のhome-purpose__bg等、淡いグラデーションを層状に重ねる手法を踏襲） */
.c-wave-sec {
  position: relative;
  /* D-028：多層radialの色滲みを撤去しフラットな暖色面へ（参考デザイン引き算） */
  background: var(--color-mist);
}
/* 境界を多クレストのSVG波形に格上げ（白の波が隣接セクションから寄せる）。
   background-position-x をドリフトさせてパララックス（上下で速度差）。
   background の移動なのでレイアウト・横スクロールに影響しない。reduced-motionで静止 */
.c-wave-sec::before,
.c-wave-sec::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px;
  background-repeat: repeat-x;
  background-size: 100% 100%;
  pointer-events: none;
}
/* 参考サイト準拠：ドリフトアニメを撤去し静止。浅く長い1周期の穏やかな曲線に絞って
   境界を上品に。白い章が隣接章へふわりと寄せる表現だけ残す。 */
.c-wave-sec::before {
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='50' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0 H1200 V30 C900 44 300 44 0 30 Z'/%3E%3C/svg%3E");
  background-position: 0 top;
}
.c-wave-sec::after {
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='50' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 50 H1200 V20 C900 6 300 6 0 20 Z'/%3E%3C/svg%3E");
  background-position: 0 bottom;
}
@media (max-width: 767px) {
  .c-wave-sec::before, .c-wave-sec::after { height: 30px; }
}

/* スティッキー機構 */
.js-sticky-sec { position: relative; }
.c-sticky-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.c-sticky-triggers { display: flex; flex-direction: column; }
.js-sticky-trigger { height: 100vh; }

/* 進捗ライン */
.c-progress {
  position: absolute;
  right: clamp(24px, 6vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 600;
}
/* 現在番号を大きく・色付きで（デザイン基準のアクセント番号相当） */
.c-progress__current {
  color: var(--color-hokusei-blue);
  font-size: 2rem;
  font-weight: 700;
}
.c-progress__total { color: var(--color-silver); }
.c-progress__rail {
  width: 3px;
  height: 130px;
  border-radius: var(--radius-xs);
  background: var(--color-silver);
  position: relative;
  overflow: hidden;
}
.c-progress__fill {
  position: absolute;
  inset: 0;
  background: var(--color-aqua);
  transform-origin: top;
  transform: scaleY(0.33);
  transition: transform 0.6s var(--ease);
}

/* ============================================================
   Header
   ============================================================ */
.c-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.c-header.is-scrolled { box-shadow: 0 1px 0 rgba(11, 31, 58, 0.08); }
.c-header__inner {
  height: 100%;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.c-header__logo { display: flex; align-items: center; gap: 10px; }
.c-header__logo-img { width: 40px; }
.c-header__logo-en {
  font-family: var(--font-en);
  font-size: var(--fs-x2s);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  color: var(--color-deep-navy);
}
.c-header__nav { display: flex; align-items: center; gap: 34px; }
.c-header__nav-list { display: flex; gap: 30px; }
.c-header__nav-link {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-deep-navy);
  position: relative;
  padding: 6px 0;
}
.c-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--c-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.c-header__nav-link:hover::after { transform: scaleX(1); }
.c-header__contact {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-white);
  background: var(--color-hokusei-blue);
  border-radius: 999px;
  padding: 13px 30px;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.c-header__contact:hover { background: var(--grad-beacon); box-shadow: 0 8px 20px rgba(7, 52, 137, 0.3); }
.c-header__hamburger { display: none; }

@media (max-width: 1099px) {
  .c-header__nav {
    position: fixed;
    inset: 0;
    background: var(--color-white);
    flex-direction: column;
    justify-content: center;
    gap: 44px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast);
  }
  .c-header__nav.is-open { opacity: 1; visibility: visible; }
  .c-header__nav-list { flex-direction: column; align-items: center; gap: 26px; }
  .c-header__nav-link { font-size: 1.7rem; }
  .c-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 48px; height: 48px;
    padding: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 110;
  }
  .c-header__hamburger span { display: block; width: 100%; height: 1.5px; background: var(--color-deep-navy); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast); }
  .c-header__hamburger.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .c-header__hamburger.is-open span:nth-child(2) { opacity: 0; }
  .c-header__hamburger.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
}

/* ============================================================
   1+2. Main Visual（Hero → Who Are We：sticky背景がcircleにモーフ）
   デザイン基準 参考デザイン の l-main-img 相当を再現
   ============================================================ */
.p-mv {
  position: relative;
  background: var(--color-white);
}

/* スティッキー背景：Hero〜Who Are Weの全スクロール区間で画面に固定され続け、
   is-who付与時にclip-pathが全画面円→ポートレート円へモーフする */
.p-mv__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 660px;
  overflow: hidden;
  z-index: 0;
  clip-path: circle(150vmax at 50% 42%);
  /* 逆方向（ヒーロー復帰）は 0.2s 遅延させ、先にwho円を消してから展開する。
     順方向は .is-who 側で遅延0に上書き（参考サイト l-main-img__bg と同じ非対称）。 */
  transition: clip-path 1.5s cubic-bezier(0.65, 0.4, 0, 1) 0.2s;
  will-change: clip-path;
}
.p-mv__bg.is-who {
  /* 半径を抑えめにし、テキスト側の可変幅と合わせてノートPC幅（1024〜1440px）
     でも円とテキストの間に余白が残るようにしている（旧27vw/400pxだと
     1024〜1440px幅で円がテキストと重なっていた） */
  clip-path: circle(min(22vw, 320px) at 27% 52%);
  /* 順方向は即座に円化 */
  transition-delay: 0s;
}

/* Who Are We 円形イラスト：参考サイト(l-main-img__bg-second)の手法を踏襲。
   全面レイヤーにマスクのグラデーションを敷き、is-who付与（＝円形モーフ開始）で
   mask-position を 100%→0% へ動かして「柔らかい境界のワイプ」で差し替える。
   clip円ができた頃(遅延0.6s)にwho画像がスッと現れるタイミングにしている。
   画像自体はclip円と同心(27% 52%)・同径の円に整形し、親.p-mv__bgのclipが最終刈り取り。 */
.p-who__circle {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #fff 45%, rgba(255, 255, 255, 0) 55%);
          mask-image: linear-gradient(to right, #fff 45%, rgba(255, 255, 255, 0) 55%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-position: 100% center;
          mask-position: 100% center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* 逆方向（ヒーロー復帰）は速めに消して、展開するヒーローと重ならないようにする */
  transition: -webkit-mask-position 0.9s ease, mask-position 0.9s ease;
  will-change: mask-position;
}
.p-who__circle img {
  position: absolute;
  left: 27%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(46vw, 672px);
  height: min(46vw, 672px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: var(--illust-filter);
}
.p-mv__bg.is-who .p-who__circle {
  -webkit-mask-position: 0% center;
          mask-position: 0% center;
  transition-duration: 1.8s;
  transition-delay: 0.6s;
}

/* Heroテキスト：背景の上に絶対配置、通常フローでスクロールして流れ去る */
.p-mv__hero {
  position: absolute;
  inset: 0;
  height: 100vh;
  min-height: 660px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.p-mv__hero a { pointer-events: auto; }

/* Who Are We：スクロール用の縦の余白（runway）を確保し、
   内部コンテンツをスティッキーで追従表示させる。
   テキストはフレーム進入とほぼ同時に全て表示し終わるため、260vhでは
   「読み終えたのに何も変わらないままスクロールし続ける」無反応区間が
   2画面分近く発生していた。150vhに短縮して無反応区間を解消しつつ、
   Purposeへの遷移に最低限必要な間（モーフ1.2s＋一呼吸）は確保している */
.p-mv__who {
  position: relative;
  height: 150vh;
  z-index: 1;
}
.p-mv__who-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 660px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 円は clip-path: circle(min(22vw,320px) at 27%) で半径が320pxで頭打ちになるのに対し、
     本文は画面右端に追従するため、広い画面ほど両者が離れて間延びする（2000px幅で空白480px）。
     本文の右端を他セクションと同じ --container(1240px) の内側に揃える。 */
  padding-inline: max(var(--pad), calc((100vw - var(--container)) / 2));
  /* ヘッダー(92px)に見出しが潜り込まないよう最低限の上余白を確保し、
     Hero側との間に実際に見える「間」を作る。1366×768のような低いビュー
     ポートでは追記26のvh考慮clampでコンテンツ高がほぼ100vh一杯のため、
     控えめな値に留めて下端はみ出しを防ぐ */
  padding-top: clamp(0px, 3vh, 32px);
}
@media (min-height: 820px) {
  /* 縦に余裕のある画面でのみヘッダーからしっかり離す。長文化に伴い
     本文側のタイポを圧縮した分の余白を、ブロック全体を下げる方に使う */
  .p-mv__who-inner { padding-top: clamp(64px, 11vh, 140px); }
}
.p-who__illust-mobile { display: none; }
.js-mv-marker {
  position: absolute;
  top: -30vh;
  left: 0;
  width: 1px;
  height: 1px;
}

@media (max-width: 1023px) {
  /* SPは演出負荷とタップ操作性を優先し、シンプルな縦積みに切り替える。
     sticky解除でbgはHero分の高さだけを占有し、後続コンテンツは通常フローで続く */
  .p-mv__bg {
    position: relative;
    clip-path: none !important;
    transition: none;
  }
  .p-mv__who { height: auto; }
  .p-mv__who-inner {
    position: static;
    height: auto;
    min-height: 0;
    justify-content: center;
    padding-block: 70px var(--pad);
  }
  /* SPはモーフ無効のため、PC用の差し替え円は隠す */
  .p-who__circle { display: none; }
  .p-who__illust-mobile {
    display: block;
    width: min(78vw, 380px);
    aspect-ratio: 1;
    margin: 0 auto 40px;
    border-radius: 50%;
    /* 地色と内側の輪郭線で「円」を明確化（画像の白余白で円が消えて
       角丸の浮島に見えていた問題の解消。PCのクリップ円・ジオラマ円と統一）。
       PCの差し替え円と同じ、船が中央のイラストへ統一 */
    background: var(--color-harbor) url("../images/who-circle-2026.png") 50% 49% / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06), 0 20px 50px rgba(11, 31, 58, 0.08);
  }
}

.p-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(140px, 20vh, 220px);
}

/* ---- イラストステージ（全面背景・アスペクト固定でカバー） ---- */
.p-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-hero__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* アスペクト比を保ったままヒーロー全体をカバー（オーバーレイの%座標が画像とずれない）
     背景 hero-bg3.png = 1640x959 */
  width: max(100vw, 171vh);
  aspect-ratio: 1640 / 959;
}
/* Ken Burns：船・雲ごとステージ全体をごくゆっくり拡大縮小 */
.p-hero__stage-zoom {
  position: absolute;
  inset: 0;
  animation: stage-zoom 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes stage-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}
.p-hero__bg {
  width: 100%;
  height: 100%;
  display: block;
  /* 彩度・明度の底上げ（imgに適用。clip-pathは祖先.p-mv__bg側なので干渉しない） */
  filter: var(--illust-filter);
}

/* ============================================================
   見せ場FXレイヤー（Hero）: オーロラ帯＋港の灯り → D-028で撤去
   コーラル/ゴールド/シアンのオーロラ光条は参考デザイン引き算路線に反するため全廃。
   DOM（.p-mv__fx）はindex.htmlから削除済み。念のため残存しても不可視化する
   ============================================================ */
.p-mv__fx { display: none !important; }

/* 北前船：運河の軸（アイソメ2:1、船首=右上方向）に沿って前後にゆっくりシャトルする。
   x:y = 2:-1 を守ることで、船首方向への前進・船尾方向への後退に見せる */
.p-hero__ship-drift {
  position: absolute;
  left: 34.35%;
  top: 36.1%;
  width: 15%;
  animation: ship-drift 20s ease-in-out infinite alternate;
  will-change: transform;
}
.p-hero__ship {
  width: 100%;
  animation: ship-bob 6.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes ship-drift {
  from { transform: translate(-16%, 8%); }
  to   { transform: translate(16%, -8%); }
}
@keyframes ship-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1.2%) rotate(-0.5deg); }
}

/* 船尾の航跡リップル：淡青の楕円が広がりながら消える（水彩調に合わせて控えめに） */
.p-hero__ship-ripple {
  position: absolute;
  left: -1%;
  top: 58%;
  width: 26%;
  aspect-ratio: 3 / 1;
  border: 2px solid rgba(151, 199, 232, 0.55);
  border-radius: 50%;
  transform: rotate(-13deg) scale(0.35);
  opacity: 0;
  filter: blur(0.6px);
  animation: ship-ripple 5.4s ease-out infinite;
  pointer-events: none;
}
.p-hero__ship-ripple:nth-child(3) { animation-delay: 1.8s; }
.p-hero__ship-ripple:nth-child(4) { animation-delay: 3.6s; }
@keyframes ship-ripple {
  0%   { transform: rotate(-13deg) scale(0.35); opacity: 0; }
  12%  { opacity: 0.45; }
  70%  { opacity: 0.12; }
  100% { transform: rotate(-13deg) scale(1.1); opacity: 0; }
}

/* 船（ヨット）共通。現在ヒーローの vessel はヨット1隻のみ */
.p-hero__vessel {
  position: absolute;
  will-change: transform;
}
.p-hero__vessel img { width: 100%; display: block; }
/* ヨット：灯台の左の海（背景に描かれた既存ヨットと重ならない位置） */
.p-hero__vessel--yacht {
  left: 4.4%;
  top: 61.6%;
  width: 3.8%;
}
/* 波の上下揺れ（内側レイヤー） */
.p-hero__vessel-bob {
  animation: yacht-bob 8s ease-in-out infinite;
}
@keyframes yacht-bob {
  0%, 100% { transform: translateY(0) rotate(-1.6deg); }
  50%      { transform: translateY(-4%) rotate(1.6deg); }
}

/* トラック：直線移動だと道路の奥行きを無視して屋根や水面を横切ってしまうため、
   フォークリフト・カートと同じ「その場でピョコンと跳ねる」jump式に統一。
   素材の焼き込みシャドウ（淡青の大きなドロップシャドウ）はPillowで除去済みのため、
   接地感はCSSの極小drop-shadowで付与する（scratchpad/deshadow_apply.py） */
.p-hero__truck {
  position: absolute;
  animation: bit-jump 3s step-start infinite;
}
.p-hero__truck img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(11, 31, 58, 0.16));
}
/* 冷凍トラック：店舗前の岸壁道路（実証済み座標） */
.p-hero__truck--reefer {
  left: 28.3%;
  top: 42%;
  width: 3.7%;
  animation-delay: 0.5s;
}
/* 配送バン：右工場の玄関前の地上歩道（建物ファサード・断面フロアを避けた位置） */
.p-hero__truck--van {
  left: 78.8%;
  top: 44.6%;
  width: 3.3%;
  animation-delay: 1.25s;
}
/* 平ボディ：左上の道路（背景の描き込みトラック隊列の並び） */
.p-hero__truck--flat {
  left: 30%;
  top: 15.5%;
  width: 3.7%;
  animation-delay: 2s;
}

/* 飛行機：上空を右上から左下へ横断（機首の向き=進行方向）。
   素材の機首・尾翼の座標をピクセル解析した実測角度は水平から約38度と急なため、
   imgに+33度の静的回転をかけて見かけの機首角度を約5度まで寝かせ、
   そのゆるい角度に合わせてtranslateの経路（X:Y比）を設定することで
   「機体の向き＝進行方向」を一致させている。
   ヘッダー（高さ約92px）と重ならないよう、経路全体をヘッダー下端より低く保つ。
   translateはこの要素自身の幅・高さ基準の%（他の航行アニメと同じ考え方） */
.p-hero__plane {
  position: absolute;
  left: 44%;
  top: 15%;
  width: 8%;
  animation: plane-fly 34s linear infinite;
  will-change: transform;
}
.p-hero__plane img {
  width: 100%;
  display: block;
  transform: rotate(33deg);
  filter: drop-shadow(0 2px 3px rgba(11, 31, 58, 0.18));
}
@keyframes plane-fly {
  0%   { transform: translate(880%, -60%); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translate(-880%, 60%); opacity: 0; }
}

/* フォークリフト・カート：埠頭でピョコンと働く（デザイン基準jump式8bit挙動） */
.p-hero__worker {
  position: absolute;
  animation: bit-jump 3s step-start infinite;
}
.p-hero__worker--cart     { left: 53.0%; top: 23.0%; width: 2.2%; animation-delay: 0.75s; }
@keyframes bit-jump {
  0%, 90%, 100% { transform: translateY(0); }
  10%           { transform: translateY(-2px); }
}

/* 工場の煙突から立ちのぼる湯気 */
.p-hero__smoke {
  position: absolute;
  left: 31.3%;
  top: 8.2%;
  width: 1.4%;
  aspect-ratio: 1;
}
.p-hero__smoke span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  animation: smoke-rise 6.5s ease-out infinite;
}
.p-hero__smoke span:nth-child(2) { animation-delay: 2.2s; }
.p-hero__smoke span:nth-child(3) { animation-delay: 4.4s; }
@keyframes smoke-rise {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translateY(-380%) translateX(40%) scale(1.6); opacity: 0; }
}

/* 水面のきらめき */
.p-hero__glint {
  position: absolute;
  left: var(--gx);
  top: var(--gy);
  width: 1%;
  height: 2.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  transform: rotate(-24deg) scaleX(0.3);
  opacity: 0;
  animation: glint-twinkle 4.6s ease-in-out var(--gd, 0s) infinite;
}
@keyframes glint-twinkle {
  0%, 100% { opacity: 0; transform: rotate(-24deg) scaleX(0.3); }
  50%      { opacity: 0.9; transform: rotate(-24deg) scaleX(1); }
}

/* 雲：空をゆっくり流れる */
.p-hero__cloud {
  position: absolute;
  opacity: 0;
  filter: blur(0.5px);
}
.p-hero__cloud--1 {
  width: 9%;
  top: 5%;
  left: 0;
  /* 負のdelayでロード時から画面内を流れている状態に */
  animation: cloud-pass 85s linear -20s infinite;
}
.p-hero__cloud--2 {
  width: 6.5%;
  top: 13%;
  left: 0;
  animation: cloud-pass 115s linear -75s infinite;
}
.p-hero__cloud--3 {
  width: 7.5%;
  top: 2%;
  left: 0;
  animation: cloud-pass 100s linear -48s infinite;
}
@keyframes cloud-pass {
  0%   { transform: translateX(-12vw); opacity: 0; }
  6%   { opacity: 0.85; }
  92%  { opacity: 0.85; }
  100% { transform: translateX(100vw); opacity: 0; }
}

/* 渡り鳥：空を横切る */
.p-hero__birds {
  position: absolute;
  left: 0;
  width: 6%;
  opacity: 0; /* アニメーション開始遅延中は非表示 */
}
.p-hero__birds--1 {
  top: 8%;
  /* 負のdelayでロード直後から空の途中を飛行 */
  animation: birds-fly 45s linear -18s infinite;
}
.p-hero__birds--2 {
  top: 17%;
  width: 4.5%;
  animation: birds-fly 58s linear -47s infinite;
}
.p-hero__birds svg {
  width: 100%;
  animation: birds-bob 3.5s ease-in-out infinite alternate;
}
@keyframes birds-fly {
  0%   { transform: translateX(105vw); opacity: 0; }
  4%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(-15vw); opacity: 0; }
}
@keyframes birds-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(14%); }
}
.p-hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-deep-navy);
  /* フェードの代わりに文字自体へ淡い白グロー（イラストを隠さない可読性確保） */
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 26px rgba(255, 255, 255, 0.75),
    0 2px 42px rgba(255, 255, 255, 0.6);
}
.p-hero__title-line { display: block; }
/* タイトルは.js-txt-animeの文字分割ロールアップで表示 */

.p-hero__sub {
  margin-top: 20px;
  font-family: var(--font-en);
  font-size: clamp(1.2rem, 1.3vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-deep-navy);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 24px rgba(255, 255, 255, 0.75);
  opacity: 0;
  animation: hero-fade 0.9s var(--ease) 0.55s forwards;
}
@keyframes hero-fade { to { opacity: 1; } }

/* Pick Up バー
   右端の採用フローティングバッジ(c-float-badge: 幅108px+right34px)と
   重ならないよう right を確保し、完全なピル型にする */
.p-hero__pickup {
  position: absolute;
  right: 176px;
  bottom: 56px;
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--color-mist);
  border-radius: 999px;
  padding: 20px 44px 20px 36px;
  min-width: min(460px, 60vw);
  opacity: 0;
  animation: hero-fade 0.9s var(--ease) 0.9s forwards;
}
.p-hero__pickup-label {
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-hokusei-blue);
  flex-shrink: 0;
}
.p-hero__pickup-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-hero__pickup-date { font-family: var(--font-en); font-size: var(--fs-x2s); color: var(--color-deep-navy); opacity: 0.65; }
.p-hero__pickup-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-hero__pickup-link:hover .p-hero__pickup-title { color: var(--color-hokusei-blue); }
.p-hero__pickup-nav { display: flex; gap: 14px; flex-shrink: 0; font-family: var(--font-en); }
.p-hero__pickup-arrow { color: var(--color-silver); }
.p-hero__pickup-arrow.is-next { color: var(--color-deep-navy); }
@media (max-width: 767px) {
  .p-mv__bg, .p-mv__hero { height: 92vh; min-height: 560px; }
  /* SPは船が画面中央に来るよう拡大＆オフセット
     船中心 = ステージ幅の41.85%（left 30.8% + width 22.1% の中心）を画面中央へ */
  .p-hero__stage {
    width: max(230vw, 177.7vh);
    left: 50%;
    right: auto;
    transform: translate(-41.85%, -50%);
  }
  .p-hero__pickup { bottom: 24px; padding: 14px 24px; gap: 16px; }
  .p-hero__pickup-nav { display: none; }
  /* SPはステージが上へ大きくオフセットされる（translate -50%）ため、
     top基準の飛行機がヘッダーの下に隠れないよう経路を下げる */
  .p-hero__plane { top: 22%; }
}

/* ============================================================
   2. Who Are We
   ============================================================ */
.p-who__body {
  /* 円の右端との間隔を確保するため、デスクトップ幅では可変（vw）で
     やや狭める */
  max-width: clamp(400px, 42vw, 620px);
  width: 100%;
  /* モーフ完了後は円の外側が白背景になるため、パネル装飾は持たせない。
     モーフ中の一瞬だけ文字グローで可読性を保つ */
  padding: clamp(28px, 3vw, 44px) 0;
}
.p-who__body .c-title-en,
.p-who__catch {
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.85),
    0 0 30px rgba(255, 255, 255, 0.6);
}
.p-who__catch {
  margin-top: 44px;
  font-size: var(--fs-catch);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.p-who__text { margin-top: 32px; font-size: 1.6rem; line-height: 2; }
.p-who__text p { margin-bottom: 0.5em; }
/* 結びの一文（航路の広がり・商社としての姿勢） */
.p-who__fact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-silver);
  font-size: var(--fs-sm);
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--color-deep-navy);
  opacity: 0.75;
}
.p-who__btn { margin-top: 40px; }
/* Who Are Weのsticky固定枠（100vh）に収める調整。PC幅（1024px以上）でのみ
   高さ基準(vh)も加味して見出し・余白を縮小する。1366x768等の低め・横長な
   ノートPCで見出しが枠上端に隠れ、ボタンが枠下端からはみ出す不具合があったため対応。
   SPはposition:staticの通常フローで高さ制約がないため対象外 */
@media (min-width: 1024px) {
  /* c-title-wrapも同値にする: 内部のwho-waveデコ(em指定)がタイトルサイズに追従するため */
  .p-mv__who-inner .c-title-en,
  .p-mv__who-inner .c-title-wrap {
    font-size: clamp(5.2rem, min(7.5vw, 10vh), 13rem);
  }
  /* 見出しに次いで縦幅を圧迫していたキャッチコピー（2行）もvh連動で縮小 */
  .p-who__catch { font-size: clamp(2rem, min(2.8vw, 3.8vh), 4.2rem); }
  .p-who__catch { margin-top: clamp(12px, 2.4vh, 44px); }
  .p-who__text { margin-top: clamp(10px, 1.8vh, 32px); font-size: clamp(1.3rem, 1.6vh, 1.6rem); line-height: 1.9; }
  .p-who__fact {
    margin-top: clamp(8px, 1.4vh, 22px);
    padding-top: clamp(6px, 1.1vh, 18px);
    font-size: clamp(1.15rem, 1.35vh, 1.3rem);
  }
  .p-who__btn { margin-top: clamp(10px, 2vh, 40px); }
}
@media (min-width: 1024px) and (max-height: 799px) {
  /* 1366×768のような低め・横長ノートPCでは、上余白そのものも最小限に留める。
     820px以上は既存の @media(min-height:820px) の余裕ある余白を維持するため、
     ここでは799px以下に限定して衝突を避ける。長文化に伴いタイポを圧縮した分の
     下端余白を、見出しをヘッダーからしっかり離すために使う */
  .p-mv__who-inner { padding-top: clamp(88px, 14vh, 150px); }
}
@media (max-width: 1023px) {
  .p-who__body { max-width: 560px; background: none; backdrop-filter: none; padding: 0 var(--pad); }
}

/* ============================================================
   3. Our Purpose（スティッキー3枚）
   ============================================================ */
.p-purpose {
  background: var(--color-mist);
}
/* パネル切替：出るパネルは素早く消え（0.3s）、入るパネルは少し待ってから
   下から現れる（0.5s / delay 0.25s）。同時に半透明で重なって前後の
   テキストが混ざって見える「ゴースト」を防ぐための時間差設計 */
.p-purpose__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 20px) clamp(24px, 8vw, 140px) 60px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition:
    opacity 0.3s var(--ease),
    transform 0s linear 0.3s,
    visibility 0s linear 0.3s;
}
.p-purpose__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.5s var(--ease) 0.25s,
    transform 0.5s var(--ease) 0.25s,
    visibility 0s linear 0.25s;
}

.p-purpose__head { display: flex; align-items: flex-start; gap: 10px; }
.p-purpose__num {
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-hokusei-blue);
  margin-top: 10px;
}
.p-purpose__title-en {
  font-family: var(--font-en);
  font-size: clamp(5.2rem, 7vw, 9.6rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--color-deep-navy);
}
.p-purpose__grid {
  display: grid;
  /* 中央のジオラマを主役にする配分（デザイン基準のイラスト比率に合わせ拡大） */
  grid-template-columns: 1fr 1.25fr 0.85fr;
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  margin-top: clamp(24px, 4vh, 56px);
}
.p-purpose__catch {
  font-size: clamp(2.2rem, 2.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 36px;
}
.p-purpose__catch-en {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.p-purpose__right p { font-size: 1.45rem; line-height: 2.2; }

/* ---- 円形ジオラマ：ヒーローの港町世界の「別の場所」をクローズアップ ----
   簡易線画SVGの代替。hero-bg2.jpgの円形クロップに動くsprite（船・カート等）を
   重ね、パネルごとに世界の違う表情を見せる。生成イラスト（ASSET_PROMPTS第2弾）
   が届いたら panel-*.png に差し替え予定 */
.p-purpose__diorama {
  position: relative;
  width: min(100%, 54vh);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background-image: url("../images/isometric-world.jpg");
  background-size: var(--zoom, 300%);
  background-position: var(--pos, 50% 50%);
  overflow: hidden;
  filter: var(--illust-filter);
  /* 円の輪郭をわずかに沈めて背景と馴染ませる */
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06), 0 24px 60px rgba(11, 31, 58, 0.10);
}
/* パネル活性化でふわっと拡大しながら現れる */
.p-purpose__panel .p-purpose__diorama {
  transform: scale(0.94);
  transition: transform 0.7s var(--ease) 0.3s;
}
.p-purpose__panel.is-active .p-purpose__diorama { transform: scale(1); }

/* Mission: 北前船が運河をゆく（ヒーローと同じship-bob/driftを流用） */
.p-purpose__diorama-ship {
  position: absolute;
  left: 20%;
  top: 32%;
  width: 56%;
  animation: ship-bob 6.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(11, 31, 58, 0.18));
}
/* Vision: 灯台から伸びる航路（活性化で点線とドットがフェードイン） */
.p-purpose__diorama-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.p-purpose__diorama-route .rt {
  fill: none;
  stroke: var(--color-hokusei-blue);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}
.p-purpose__diorama-route .pt { fill: var(--color-hokusei-blue); }
.p-purpose__diorama-route {
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.9s;
}
.p-purpose__panel.is-active .p-purpose__diorama-route { opacity: 1; }
/* Value: 広場で働くカート（ヒーローと同じbit-jump） */
.p-purpose__diorama-cart {
  position: absolute;
  left: 46%;
  top: 52%;
  width: 13%;
  animation: bit-jump 3s step-start infinite;
  animation-delay: 0.75s;
}

@media (max-width: 1023px) {
  /* SPはスティッキーを解除して縦積み */
  .p-purpose .c-sticky-viewport { position: static; height: auto; overflow: visible; }
  .p-purpose .c-sticky-triggers { display: none; }
  .p-purpose .c-progress { display: none; }
  .p-purpose__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    padding: 70px var(--pad);
  }
  .p-purpose__grid { grid-template-columns: 1fr; gap: 32px; }
  .p-purpose__illust { order: -1; }
}

/* ============================================================
   4. Business（スティッキー4枚）
   ============================================================ */
.p-business {
  background: var(--color-white);
}
.p-business__fixed {
  position: absolute;
  top: 50%;
  right: clamp(90px, 14vw, 260px);
  transform: translateY(-130%);
  z-index: 4;
  text-align: left;
}
/* Purposeと同じ「出0.3s→入0.5s(0.25s遅れ)」の時間差切替でゴーストを防止 */
.p-business__panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 48% 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 90px);
  padding: calc(var(--header-h) + 10px) clamp(24px, 7vw, 120px) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition:
    opacity 0.3s var(--ease),
    transform 0s linear 0.3s,
    visibility 0s linear 0.3s;
}
.p-business__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.5s var(--ease) 0.25s,
    transform 0.5s var(--ease) 0.25s,
    visibility 0s linear 0.25s;
}

.p-business__circle {
  width: min(100%, 72vh);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background-image: url("../images/isometric-world.jpg");
  background-size: var(--zoom, 300%);
  background-position: var(--pos, 50% 50%);
  filter: var(--illust-filter);
  transition: background-position 0.8s var(--ease);
}
.p-business__item { max-width: 420px; margin-top: 22vh; }
/* 見出し行を「番号バッジ＋事業名＋下ヘアライン罫」で標識化（薄井土木の見る事業紹介）。
   sticky高さ収支(businessMax=360@1366×768)を守るため、見出しline-heightを1.3に締めて
   バッジ・罫・padding分を吸収する */
.p-business__name {
  font-size: clamp(2.4rem, 3.2vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-silver);
}
/* Hokusei Blue の丸番号バッジ（01〜04） */
.p-business__no {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-hokusei-blue);
  color: var(--color-white);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0;
}
.p-business__text { margin-top: 16px; font-size: 1.45rem; line-height: 2.0; }
/* 取扱品目チップ：事業の実像を一目で伝える（デザイン基準の情報密度に相当） */
.p-business__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.p-business__tags li {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 8px 14px;
  border: 1px solid var(--color-silver);
  border-radius: 999px;
  color: var(--color-deep-navy);
  background: var(--color-mist);
}
.p-business__item .c-btn-pill { margin-top: 22px; }

/* 円の左右交互反転（PC限定）: パネル2・4はビジュアルを右へ。
   薄井土木の「左右交互の見る事業紹介」を1画面クロスフェード内で擬似再現。
   高さには影響しない（視覚順のみ）。SPは既存の縦積み（円が上）を維持 */
/* 2026-07-14 修正：偶数パネルで円を右へ入れ替えると、右上の固定見出し
   「Business」とイラストが重なる不具合があったため、左右の入れ替えを廃止し
   全パネルで「円=左／本文=右」に固定（見出しは常に右余白側で被らない）。 */

@media (max-width: 1023px) {
  .p-business .c-sticky-viewport { position: static; height: auto; overflow: visible; }
  .p-business .c-sticky-triggers { display: none; }
  .p-business .c-progress { display: none; }
  .p-business__fixed {
    position: static;
    transform: none;
    padding: 90px var(--pad) 0;
  }
  .p-business__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    grid-template-columns: 1fr;
    padding: 50px var(--pad);
    gap: 28px;
  }
  .p-business__circle { max-width: 340px; }
  .p-business__item { margin-top: 0; max-width: none; }
}

/* ============================================================
   5.5 Creed（私たちの商社観：「商社とは、究極の便利屋。」）
   ============================================================ */
.p-creed {
  position: relative;
  overflow: hidden;
  padding-block: clamp(110px, 14vh, 170px);
  /* 金言を読ませる「間」: フラットな暖色クリーム面で前後と呼吸を変える（D-028・グラデ廃止） */
  background: var(--color-mist);
}
/* 浮遊円デコ（デザイン基準の丸装飾に相当）。淡いHarbor Blueのリングを左右に */
.p-creed::before,
.p-creed::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--color-harbor);
  opacity: 0.55;
  pointer-events: none;
}
.p-creed::before { width: 190px; height: 190px; left: -60px; top: 12%; }
.p-creed::after { width: 120px; height: 120px; right: 6%; bottom: 10%; border-width: 1.5px; }
.p-creed__inner {
  position: relative;
  text-align: center;
  max-width: 860px;
  margin-inline: auto;
}
.p-creed__inner > *:not(.c-deco) { position: relative; z-index: 1; }
.p-creed__kicker {
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  margin-bottom: 22px;
}
.p-creed__catch {
  font-size: clamp(2.8rem, 4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  line-height: 1.6;
  margin-bottom: 30px;
  text-wrap: balance;
}
.p-creed__catch em {
  font-style: normal;
  color: var(--color-hokusei-blue);
  /* SPで「究極の便利／屋。」と語中で割れるのを防ぐ */
  display: inline-block;
}
.p-creed__text { font-size: var(--fs-base); line-height: 2.1; max-width: 720px; margin-inline: auto; text-wrap: pretty; }
.c-deco--creed {
  top: -46px;
  left: calc(50% + 110px);
  width: 240px;
  color: var(--deco-blue);
}
@media (max-width: 767px) {
  /* SPはキッカー行と交差しない高さまで上げる（セクション上パディング110px内に収まる） */
  .c-deco--creed { left: auto; right: 0; top: -78px; width: 150px; }
}

/* ============================================================
   5. Network
   ============================================================ */
.p-network { padding-block: var(--space-sec); }
.p-network__head { margin-bottom: var(--sp-head); }
.p-network__map {
  /* 無地のHarbor一色だと抽象的だったため、淡いグラデーションで
     「日本海の海面」らしい奥行きを与える（規定色内で完結） */
  /* 海面はフラットな淡Harbor面（規定：Pale Harbor＝海・航路）。グラデ廃止 */
  background: var(--color-harbor);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 40px);
}
.p-network__svg { width: 100%; height: auto; }
.p-network__route {
  fill: none;
  stroke: var(--color-hokusei-blue);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  opacity: 0.5;
}
.js-draw .p-network__route {
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 2s var(--ease) 0.4s;
}
.js-draw.is-visible .p-network__route { stroke-dashoffset: 0; }
.p-network__dot { fill: var(--color-hokusei-blue); }
.p-network__dot--hub { stroke: var(--color-white); stroke-width: 3; }
.p-network__label { font-family: var(--font-ja); font-size: 15px; font-weight: 700; fill: var(--color-deep-navy); }
.p-network__label--hub { font-size: 17px; fill: var(--color-hokusei-blue); }
.p-network__sublabel { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.06em; fill: var(--color-deep-navy); opacity: 0.65; }
.js-draw .p-network__point {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity var(--dur-fast) var(--ease) var(--pt-delay, 0s), transform var(--dur-fast) var(--ease) var(--pt-delay, 0s);
}
.js-draw.is-visible .p-network__point { opacity: 1; transform: scale(1); }
/* 拠点紹介文：全幅だと1行60字超で可読性・上質さが落ちるため、約38字相当に制御。
   text-wrap:pretty で行末の泣き別れ・孤立を自動回避 */
.p-network__note {
  margin-top: 40px;
  margin-inline: auto;
  max-width: 660px;
  text-align: center;
  text-wrap: pretty;
  line-height: 2.0;
}
.p-network__btn { margin-top: 40px; text-align: center; }

/* ============================================================
   6. Solutions（横スクロールカード）
   ============================================================ */
.p-solutions {
  padding-block: var(--space-sec);
  background: var(--color-white);
}
.p-solutions__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: var(--sp-head);
}
.p-solutions__head { flex: 1 1 auto; }
/* カルーセルUI（PC）。既存の横スクロール／スワイプは維持したまま、参考デザイン式の
   カテゴリタブ＋進捗バー＋前後矢印を重ね掛け（A-4）。SPでは非表示でネイティブスワイプに委ねる */
.p-solutions__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  flex-shrink: 0;
  padding-bottom: 6px;
}
/* カテゴリタブ：押すと該当事例へスクロール。現在表示中のカテゴリを点灯 */
.p-solutions__tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.p-solutions__tab {
  position: relative;
  font-family: var(--font-ja);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-deep-navy);
  background: transparent;
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.p-solutions__tab:hover { border-color: var(--color-hokusei-blue); color: var(--color-hokusei-blue); }
.p-solutions__tab.is-active { background: var(--color-hokusei-blue); color: var(--color-white); border-color: var(--color-hokusei-blue); }
/* B磨き込み：アクティブタブ背後にHokusei Blueの筆致（参考デザインの筆致タブ準拠）。
   ピルより一回り大きく敷き、はみ出した淡いにじみだけが見える（z-index:-1でピル塗りの背面）。淡く最小限 */
.p-solutions__tab.is-active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 176%;
  height: 260%;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240' preserveAspectRatio='none'%3E%3Cpath fill='%23073489' d='M26 140 C 66 84 152 74 232 96 C 300 114 386 90 452 128 C 472 140 466 158 428 166 C 348 184 250 178 180 166 C 112 154 60 182 34 164 C 16 152 14 156 26 140 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
  z-index: -1;
}
/* 進捗バー＋矢印を横並び */
.p-solutions__nav-group { display: flex; align-items: center; gap: 14px; }
.p-solutions__progress {
  width: clamp(70px, 9vw, 130px);
  height: 2px;
  background: var(--color-silver);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}
.p-solutions__progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 30%;
  background: var(--color-hokusei-blue);
  transition: left 0.25s var(--ease), width 0.25s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .p-solutions__progress-fill { transition: none; }
}
.p-solutions__nav {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--color-silver);
  background: var(--color-white);
  color: var(--color-deep-navy);
  font-family: var(--font-en);
  font-size: var(--fs-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.p-solutions__nav:hover { background: var(--color-deep-navy); color: var(--color-white); border-color: var(--color-deep-navy); }
.p-solutions__nav:disabled { opacity: 0.32; cursor: default; }
.p-solutions__nav:disabled:hover { background: var(--color-white); color: var(--color-deep-navy); border-color: var(--color-silver); }
@media (max-width: 767px) {
  /* SPは自然なスワイプ操作に委ね、ボタンは隠す */
  .p-solutions__controls { display: none; }
  .p-solutions__bar { display: block; }
}
.p-solutions__scroller {
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  overflow-x: auto;
  padding: 4px max(var(--pad), calc((100vw - var(--container)) / 2)) 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.p-solutions__scroller::-webkit-scrollbar { height: 4px; }
.p-solutions__scroller::-webkit-scrollbar-thumb { background: var(--color-silver); border-radius: var(--radius-xs); }
.p-solutions__card { flex: 0 0 min(420px, 78vw); scroll-snap-align: start; }
.p-solutions__media {
  aspect-ratio: 4 / 3;
  /* 参考デザイン式の有機形切り抜き（角丸矩形→上部ドームの有機シルエット・B級磨き込み）。
     下辺は小Rで※注記の居場所を確保、SPでも比率維持で0×0/見切れなし */
  border-radius: 48% 48% 12px 12px / 32% 32% 12px 12px;
  background-image: url("../images/isometric-world.jpg");
  background-size: var(--zoom, 260%);
  background-position: var(--pos, 50% 50%);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), background-size 0.6s var(--ease), box-shadow var(--dur-fast) var(--ease);
  filter: var(--illust-filter);
  /* 浮遊カード：静止影＋常時の細い内側リング。ホバーでNavyの細ヘアラインが締まる（コーラル廃止・D-028） */
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.07), var(--shadow-card);
}
@media (hover: hover) {
  .p-solutions__card:hover .p-solutions__media {
    transform: translateY(-6px);
    background-size: calc(var(--zoom, 260%) + 22%);
    box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.12), var(--shadow-card-hover);
  }
}
.p-solutions__media-note {
  position: absolute;
  right: 10px; bottom: 8px;
  font-size: var(--fs-x2s);
  color: var(--color-deep-navy);
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 10px;
  border-radius: 999px;
}
.p-solutions__lead {
  margin-top: 26px;
  font-size: var(--fs-base);
  line-height: 2.0;
  text-wrap: balance;
}
.p-solutions__title { margin-top: 18px; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.05em; }
/* 「何をどうつないだか」の一行要約 */
.p-solutions__sum { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.9; }
/* カテゴリはアウトラインチップに。事業の帰属を一目で示し、カード下端を締める */
.p-solutions__cat {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 14px;
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--color-hokusei-blue);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.p-solutions__card:hover .p-solutions__cat { border-color: var(--color-harbor); background: var(--color-mist); }
.p-solutions__foot { margin-top: 30px; text-align: right; padding-inline: var(--pad); }

/* ============================================================
   7. Data（ひと目でわかるホクセイ）
   ============================================================ */
.p-data {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-sec);
  background: var(--color-white);
}
/* 浮遊円デコ：数字の無機質さをやわらげる淡いリング。
   ::before/::after は c-wave-sec の波境界が使用しているため、
   内側コンテナ側の擬似要素に付与する */
.p-data > .l-container { position: relative; }
.p-data > .l-container::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -120px;
  top: -40px;
  border-radius: 50%;
  border: 2px solid var(--color-harbor);
  opacity: 0.5;
  pointer-events: none;
}
.p-data__head { margin-bottom: var(--sp-head); }
.p-data__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(24px, 3vw, 56px);
}
.p-data__item {
  position: relative;
  border-top: 1px solid var(--color-silver);
  padding-top: 26px;
}
/* 罫線の起点にホクセイブルーの短いアクセントタブ。出現時に左から引かれ、
   無機質な数字列に「掘り起こした価値」らしい方向性を与える */
.p-data__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--color-hokusei-blue);
  transition: width 0.9s var(--ease) 0.15s;
}
.p-data__item.is-visible::before { width: 52px; }
.p-data__label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-kicker); color: var(--color-hokusei-blue); }
.p-data__value {
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: clamp(3.4rem, 3.6vw, 4.8rem);
  font-weight: 700;
  /* 重要数値はHokusei Blue（差し色1色・D-028）。暖色オフホワイト地でAA十分 */
  color: var(--color-hokusei-blue);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}
.p-data__unit { font-family: var(--font-ja); font-size: var(--fs-base); font-weight: 700; margin-left: 4px; }
.p-data__note { margin-top: 10px; font-size: var(--fs-xs); line-height: 1.9; opacity: 0.75; }
.p-data__foot { margin-top: 56px; text-align: center; }
@media (max-width: 1023px) { .p-data__list { grid-template-columns: repeat(2, 1fr); gap: 40px clamp(24px, 3vw, 56px); } }
@media (max-width: 599px) { .p-data__list { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   8. Sustainability / Social
   ============================================================ */
.p-sus {
  padding-block: var(--space-sec);
  background: var(--color-white);
}
.p-sus__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.p-sus__catch {
  margin: 40px 0 24px;
  font-size: var(--fs-catch);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.p-sus__lead {
  margin-bottom: 32px;
  font-size: var(--fs-sm);
  line-height: 2.0;
  opacity: 0.9;
  max-width: 480px;
  text-wrap: pretty;
}
.p-sus__list { display: flex; flex-direction: column; }
.p-sus__item {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 30px 4px;
  border-top: 1px solid var(--color-silver);
  transition: transform var(--dur-fast) var(--ease);
}
.p-sus__item:last-child { border-bottom: 1px solid var(--color-silver); }
/* 番号を緑の円バッジに（サステナ＝グリーンの限定使用）。地域資源の
   「循環」を丸で示唆。ホバーで塗りが反転して活性を伝える */
.p-sus__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-green);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-green);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.p-sus__item:hover { transform: translateX(4px); }
.p-sus__item:hover .p-sus__num { background: var(--color-green); color: var(--color-white); }
.p-sus__item-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color var(--dur-fast) var(--ease);
}
.p-sus__item:hover .p-sus__item-title { color: var(--color-hokusei-blue); }
.p-sus__item-text { margin-top: 8px; font-size: var(--fs-sm); line-height: 2.0; opacity: 0.8; }
@media (max-width: 1023px) { .p-sus__grid { grid-template-columns: 1fr; } }

/* ============================================================
   9. News
   ============================================================ */
.p-news { padding-block: var(--space-sec); }
.p-news__head { margin-bottom: var(--sp-head); }
.p-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.p-news__card { position: relative; padding: 0 clamp(20px, 2.6vw, 44px); }
.p-news__card + .p-news__card { border-left: 1px solid var(--color-silver); }
.p-news__link { display: block; position: relative; }
.p-news__media-wrap { position: relative; }
.p-news__media {
  aspect-ratio: 4 / 3;
  /* 参考デザイン式の有機形切り抜き（上部ドーム。下辺は小Rでバッジ/日付と干渉しない） */
  border-radius: 48% 48% 12px 12px / 32% 32% 12px 12px;
  background-image: url("../images/isometric-world.jpg");
  background-size: var(--zoom, 240%);
  background-position: var(--pos, 50% 50%);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), background-size 0.6s var(--ease), box-shadow var(--dur-fast) var(--ease);
  filter: var(--illust-filter);
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.07), var(--shadow-card);
}
@media (hover: hover) {
  .p-news__link:hover .p-news__media {
    transform: translateY(-6px);
    background-size: calc(var(--zoom, 240%) + 20%);
    box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.12), var(--shadow-card-hover);
  }
}
/* 浮遊バッジ：カード上端にオーバーラップさせ、box-shadowで浮遊感を出す
   （デザイン基準c-archive02__badgeの手法を踏襲） */
.p-news__badge {
  position: absolute;
  left: 18px;
  bottom: -14px;
  z-index: 1;
  padding: 8px 20px;
  border-radius: 9999px;
  background: var(--color-hokusei-blue);
  color: var(--color-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 4px 8px 18px rgba(11, 31, 58, 0.22);
}
.p-news__year { margin-top: 34px; font-family: var(--font-en); font-size: var(--fs-xs); letter-spacing: 0.1em; opacity: 0.65; }
.p-news__date { font-family: var(--font-en); font-size: clamp(2.6rem, 2.6vw, 3.4rem); font-weight: 500; line-height: 1.2; }
.p-news__title { margin-top: 12px; font-size: 1.45rem; font-weight: 700; line-height: 1.9; }
.p-news__link:hover .p-news__title { color: var(--color-hokusei-blue); }
.p-news__foot { margin-top: 60px; text-align: center; }
@media (max-width: 1023px) {
  .p-news__grid { grid-template-columns: 1fr; gap: 44px; }
  .p-news__card + .p-news__card { border-left: none; border-top: 1px solid var(--color-silver); padding-top: 44px; }
}

/* ============================================================
   10. Instagram
   ============================================================ */
.p-insta { padding-block: clamp(60px, 8vh, 110px); background: var(--color-white); }
.p-insta__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  background: var(--color-mist);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 70px);
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.05);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.p-insta__box:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(11, 31, 58, 0.12);
}
.p-insta__icon {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--color-hokusei-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease);
}
.p-insta__box:hover .p-insta__icon { transform: scale(1.1); }
.p-insta__icon svg { width: 34px; height: 34px; }
.p-insta__body { display: block; flex: 1; }
.p-insta__lead { display: block; font-size: var(--fs-sm); opacity: 0.8; }
.p-insta__title { display: block; font-size: var(--fs-lg); font-weight: 700; margin-top: 4px; }
.p-insta__account {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-hokusei-blue);
}
.p-insta__arw {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-silver);
  font-family: var(--font-en);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.p-insta__box:hover .p-insta__arw {
  transform: translateX(6px);
  background: var(--color-hokusei-blue);
  border-color: var(--color-hokusei-blue);
  color: var(--color-white);
}
@media (max-width: 599px) {
  .p-insta__box { flex-direction: column; text-align: center; }
  .p-insta__arw { display: none; }
}

/* ============================================================
   11. Recruit
   ============================================================ */
.p-recruit {
  padding-block: var(--space-sec);
  background: var(--color-white);
}
.p-recruit__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.p-recruit__photo {
  aspect-ratio: 4 / 5;
  max-height: 620px;
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
  background: var(--color-harbor) url("../images/isometric-world.jpg");
  background-size: cover;
  background-position: 56% 15%;
  position: relative;
  overflow: hidden;
  /* 背景画像カードにも彩度トーンを統一（他のイラスト面と同じ--illust-filter） */
  filter: var(--illust-filter);
}
.p-recruit__photo-note {
  position: absolute;
  right: 12px; bottom: 10px;
  font-size: var(--fs-x2s);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 10px;
  border-radius: 999px;
}
.p-recruit__catch {
  margin-top: 44px;
  font-size: var(--fs-catch);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.p-recruit__text { margin-top: 26px; max-width: 30em; text-wrap: pretty; }
/* 現行採用ページの一次情報に基づくファクトチップ */
.p-recruit__facts {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-recruit__facts li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--color-silver);
  border-radius: 999px;
  padding: 8px 18px;
  background: var(--color-white);
}
.p-recruit__facts span {
  font-size: var(--fs-x2s);
  letter-spacing: 0.08em;
  color: var(--color-hokusei-blue);
  font-weight: 700;
}
.p-recruit__facts strong { font-size: var(--fs-sm); font-weight: 700; }
.p-recruit__body .c-btn-pill { margin-top: 32px; }
@media (max-width: 1023px) {
  .p-recruit__grid { grid-template-columns: 1fr; }
  .p-recruit__photo { max-width: 420px; margin-inline: auto; }
}

/* ============================================================
   12. Contact
   ============================================================ */
.p-contact { padding-block: var(--space-sec); }
.p-contact__inner { text-align: center; }
.p-contact__lead {
  margin-top: 40px;
  /* 章の主メッセージ。格下だったInstaバナー見出しとのサイズ逆転を解消するため昇格 */
  font-size: clamp(2.2rem, 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.p-contact__text { margin-top: 18px; margin-inline: auto; max-width: 620px; text-wrap: pretty; }
/* B-1：CTA近傍にHokusei Blueの筆致（参考デザインのオレンジ筆致の役をBlueに翻訳）。
   淡く敷き、円形CTAの背後に置く。js-stalkerのtransformと競合しないよう親の擬似要素に */
.p-contact__cta { margin-top: 56px; position: relative; }
.p-contact__cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(300px, 36vw, 480px);
  height: clamp(150px, 18vw, 240px);
  transform: translate(-50%, -50%) rotate(-7deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 240' preserveAspectRatio='none'%3E%3Cpath fill='%23073489' d='M26 140 C 66 84 152 74 232 96 C 300 114 386 90 452 128 C 472 140 466 158 428 166 C 348 184 250 178 180 166 C 112 154 60 182 34 164 C 16 152 14 156 26 140 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .p-contact__cta::before { transition: opacity var(--dur-base) var(--ease); }
}
/* 大型円形CTA（デザイン基準c-cv01の「大きな円形ボタン＋hoverでポップ」を踏襲） */
.p-contact__circle-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: clamp(150px, 16vw, 200px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--color-hokusei-blue);
  color: var(--color-white);
  box-shadow: 0 20px 46px rgba(7, 52, 137, 0.26);
  transition: box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
.p-contact__circle-btn-ico { width: 30px; height: 30px; }
.p-contact__circle-btn-ico svg { width: 100%; height: 100%; }
.p-contact__circle-btn-txt {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.05em;
}
/* transformはjs-stalker（マグネットボタン）がインラインstyleで制御するため、
   hover演出は色・影のみで表現する（transform:scaleは競合し上書きされるため使わない） */
.p-contact__circle-btn:hover {
  background: var(--grad-beacon);
  box-shadow: 0 26px 60px rgba(7, 52, 137, 0.36);
}
.p-contact__tel {
  margin-top: 36px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.p-contact__tel-label { font-family: var(--font-en); font-size: 1.4rem; font-weight: 600; color: var(--color-hokusei-blue); }
.p-contact__tel-num { font-family: var(--font-en); font-size: clamp(2.6rem, 3vw, 3.6rem); font-weight: 600; color: var(--color-deep-navy); }
.p-contact__tel-note { font-size: var(--fs-xs); opacity: 0.7; }

/* ============================================================
   4.5 Sea Break（海のダーク英字ブレイク：緩急の見せ場）
   Deep Navy面＋画面幅級の巨大英字（regular/bold混植）。和文は小さなeyebrowに退く
   ============================================================ */
.p-seabreak {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 88% -10%, rgba(7, 52, 137, 0.55) 0%, rgba(7, 52, 137, 0) 60%),
    radial-gradient(60% 100% at 6% 110%, rgba(7, 52, 137, 0.4) 0%, rgba(7, 52, 137, 0) 60%),
    var(--color-deep-navy);
  color: var(--color-white);
  padding-block: clamp(90px, 15vh, 180px);
}
/* 淡い水平線（海の水平線）を数本、透明度で重ねる（規定色内・青の階調のみ） */
.p-seabreak::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(220, 239, 248, 0) 0%, rgba(220, 239, 248, 0.14) 50%, rgba(220, 239, 248, 0) 100%);
  background-size: 100% 2px;
  background-position: 0 62%;
  background-repeat: no-repeat;
  opacity: 0.6;
  pointer-events: none;
}
/* ------------------------------------------------------------
   Sea Break：浮遊アクセント（GSAP data-speed パララックスの見せ場）
   暗いネイビー地に、アクア/ブルー/ゴールドの小さなピルとぼかしブロブを散らし、
   要素ごとに data-speed で異なる速度で流す（gsap.com のデモに相当）。
   セクションの overflow:hidden で枠外はクリップ。テキスト(__inner)の背面(z-index0)。
   ------------------------------------------------------------ */
.p-seabreak__accents {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.p-sb-pill {
  position: absolute;
  width: 9px;
  height: 42px;                 /* 個別の高さは HTML の inline style で上書き */
  border-radius: 999px;
  opacity: 0.9;
  filter: drop-shadow(0 0 12px rgba(45, 184, 197, 0.45));
}
/* 配色バリエーション（アクア/ライトアクア/ブルー/ゴールドのグラデ） */
.p-sb-pill.is-aqua { background: linear-gradient(160deg, #2DB8C5, #1E7FC2); }
.p-sb-pill.is-lt   { background: linear-gradient(160deg, #9DEFF6, #2DB8C5); }
.p-sb-pill.is-blue { background: linear-gradient(160deg, #4A9BE0, #1E7FC2); }
.p-sb-pill.is-gold { background: linear-gradient(160deg, #F1C75B, #E0A93A); opacity: 0.8;
  filter: drop-shadow(0 0 12px rgba(241, 199, 91, 0.4)); }
.p-sb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.6;
}
.p-sb-blob--1 { width: 320px; height: 320px; top: -16%; left: -7%;
  background: radial-gradient(circle, rgba(45, 184, 197, 0.55) 0%, rgba(45, 184, 197, 0) 68%); }
.p-sb-blob--2 { width: 280px; height: 280px; bottom: -20%; right: -7%; top: auto;
  background: radial-gradient(circle, rgba(30, 127, 194, 0.5) 0%, rgba(30, 127, 194, 0) 68%); }
.p-sb-blob--3 { width: 220px; height: 220px; top: 40%; left: 46%;
  background: radial-gradient(circle, rgba(241, 199, 91, 0.28) 0%, rgba(241, 199, 91, 0) 70%); }
@media (max-width: 767px) {
  .p-sb-pill.is-sp-hide { display: none; } /* SPは一部間引き */
}

.p-seabreak__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--container) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
  text-align: center;
}
.p-seabreak__eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-kicker);
  color: var(--color-harbor);
  margin-bottom: 20px;
}
.p-seabreak__title {
  font-family: var(--font-en);
  font-size: clamp(4.6rem, 11vw, 14rem);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-white);
}
.p-seabreak__line { display: inline-block; }
.p-seabreak__title .is-thin { font-weight: 400; color: var(--color-harbor); }
.p-seabreak__title .is-bold { font-weight: 700; }
/* ダーク地のキーワード差し色は淡Harbor（harbor on navy≒高コントラストでAA。D-028＝差し色はBlue系1系統に集約） */
.p-seabreak__title .is-gold { font-weight: 700; color: var(--color-harbor); }
.p-seabreak__sub {
  margin-top: 24px;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-heading);
  color: rgba(255, 255, 255, 0.86);
}

/* ============================================================
   4.6 Story（現代の北前船：章立ての読み物。明朝見出し＋アイソメ切り抜き）
   ============================================================ */
.p-story {
  padding-block: var(--space-sec);
  background: var(--color-mist);
}
.p-story__head { margin-bottom: clamp(48px, 7vh, 96px); }
.p-story__list { display: flex; flex-direction: column; gap: clamp(48px, 8vh, 110px); }
.p-story__chapter {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(32px, 5vw, 90px);
}
.p-story__chapter--reverse .p-story__visual { order: 2; }
.p-story__visual {
  width: min(100%, 46vh);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background-image: url("../images/isometric-world.jpg");
  background-size: var(--zoom, 300%);
  background-position: var(--pos, 50% 50%);
  filter: var(--illust-filter);
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06), 0 24px 60px rgba(11, 31, 58, 0.10);
}
.p-story__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-en);
  color: var(--color-hokusei-blue);
  margin-bottom: 18px;
}
.p-story__ch { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-label); }
.p-story__no { font-size: clamp(2.6rem, 3vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: var(--ls-display); }
/* 物語の格を出す明朝見出し（このセクション限定） */
.p-story__title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(2.2rem, 2.8vw, 3.4rem);
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--color-deep-navy);
  text-wrap: balance;
}
.p-story__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-hokusei-blue);
  margin-bottom: 22px;
}
.p-story__text {
  margin-top: 22px;
  font-size: var(--fs-md);
  line-height: 2.0;
  max-width: 34em;
  text-wrap: pretty;
}
@media (max-width: 767px) {
  .p-story__chapter { grid-template-columns: 1fr; gap: 28px; }
  .p-story__chapter--reverse .p-story__visual { order: -1; }
  .p-story__visual { order: -1; max-width: 300px; }
}

/* ============================================================
   5.6 Process（仕事の流れ：横型プロセス図。線アイコン＋番号＋シェブロン）
   ============================================================ */
.p-process {
  padding-block: var(--space-sec);
  background: var(--color-white);
}
.p-process__head { margin-bottom: var(--sp-head); }
.p-process__lead { margin-top: 22px; font-size: var(--fs-base); line-height: 2.0; text-wrap: balance; }
.p-process__flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.p-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 28px);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-card);
  /* フラットな暖色カード面（D-028・グラデ廃止） */
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .p-process__step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-hokusei-blue);
  }
}
/* ステップ間のシェブロン（›）。線でつなぐ横型プロセスの矢羽根 */
.p-process__step:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: calc(clamp(16px, 2vw, 28px) / -2 - 5px);
  transform: translate(50%, -50%);
  font-family: var(--font-en);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-silver);
  z-index: 2;
}
.p-process__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-hokusei-blue);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 20px;
}
.p-process__icon {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--color-hokusei-blue);
  margin-bottom: 16px;
}
.p-process__icon svg { width: 100%; height: 100%; display: block; }
.p-process__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  color: var(--color-deep-navy);
}
.p-process__en {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--color-hokusei-blue);
  opacity: 0.85;
}
.p-process__text { margin-top: 14px; font-size: var(--fs-sm); line-height: 1.9; text-wrap: pretty; }
.p-process__tag {
  margin-top: 18px;
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  line-height: 1;
  border: 1px solid var(--color-silver);
}
/* 分野色タグ（D-019意味体系: 青=事業系／緑=価値観系） */
.p-process__tag--biz { color: var(--color-hokusei-blue); background: rgba(7, 52, 137, 0.06); border-color: rgba(7, 52, 137, 0.18); }
.p-process__tag--value { color: var(--color-green); background: rgba(89, 122, 102, 0.08); border-color: rgba(89, 122, 102, 0.28); }
@media (max-width: 1023px) {
  .p-process__flow { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .p-process__step:nth-child(2)::after { display: none; }
}
@media (max-width: 599px) {
  .p-process__flow { grid-template-columns: 1fr; }
  /* SPは縦積み：シェブロンを下向きに、各ステップ下端中央へ */
  .p-process__step::after { display: none !important; }
  .p-process__step:not(:last-child) {
    position: relative;
    margin-bottom: 34px;
  }
  .p-process__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -24px;
    width: 2px;
    height: 18px;
    background: var(--color-silver);
    transform: translateX(-50%);
  }
}

/* ============================================================
   Footer
   ============================================================ */
.c-footer {
  position: relative;
  background: var(--color-deep-navy);
  color: var(--color-white);
  padding: clamp(70px, 9vh, 110px) 0 0;
  overflow: hidden;
}
/* 最上部に淡いハーバーブルーのハーフライン。ネイビーの塊に境界の呼吸を与える */
.c-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(220, 239, 248, 0) 0%, rgba(220, 239, 248, 0.35) 50%, rgba(220, 239, 248, 0) 100%);
}
.c-footer__inner {
  max-width: calc(var(--container) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.c-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.c-footer__nav { display: flex; gap: clamp(40px, 6vw, 110px); }
.c-footer__nav-col li { margin-bottom: 18px; }
.c-footer__nav-col a {
  position: relative;
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-white);
  transition: color var(--dur-fast) var(--ease);
}
.c-footer__nav-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1.5px;
  background: var(--color-harbor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.c-footer__nav-col a:hover { color: var(--color-harbor); }
.c-footer__nav-col a:hover::after { transform: scaleX(1); }
.c-footer__tel {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  padding: 24px 38px;
  text-align: center;
}
.c-footer__tel-num { font-family: var(--font-en); font-size: clamp(2rem, 2.2vw, 2.8rem); font-weight: 600; }
.c-footer__tel-note { margin-top: 6px; font-size: var(--fs-xs); opacity: 0.7; }

.c-footer__bottom {
  margin-top: clamp(60px, 8vh, 110px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 34px;
}
.c-footer__tagline {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  color: var(--color-harbor);
}
.c-footer__logo { font-family: var(--font-en); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.1em; }
.c-footer__address { margin-top: 16px; font-size: var(--fs-xs); line-height: 2.0; opacity: 0.8; }
.c-footer__privacy { display: inline-block; margin-top: 18px; font-size: var(--fs-xs); opacity: 0.8; }
.c-footer__privacy:hover { color: var(--color-harbor); }
.c-footer__copyright {
  font-family: var(--font-en);
  font-size: clamp(4.4rem, 7.5vw, 10.4rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.95;
}
@media (max-width: 1023px) {
  .c-footer__bottom { flex-direction: column; align-items: flex-start; }
  .c-footer__copyright { font-size: clamp(3rem, 9vw, 6rem); }
}

/* === HERO-2026-FINAL: 背景1枚＋新規の船・飛行機だけを動かす === */
/* 背景はアスペクト固定のステージ全面をカバー（フィルタ補正なし） */
.p-hero__stage-zoom > .p-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.14) contrast(1.06) brightness(0.99) !important;
}
/* 水彩雲：サイズ・高さ・速度をずらして、穏やかな遠近感をつくる。 */
.p-hero__new-cloud {
  position: absolute;
  left: -35%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.78;
  will-change: transform, opacity;
}
.p-hero__new-cloud img {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
  filter: saturate(1.24) contrast(1.08) drop-shadow(0 6px 12px rgba(93, 157, 199, 0.14));
}
.p-hero__new-cloud--a { top: 4%;  width: 24%; animation: hero-cloud-drift 82s linear -18s infinite; }
.p-hero__new-cloud--b { top: 19%; width: 15%; animation: hero-cloud-drift-soft 64s linear -43s infinite; }
.p-hero__new-cloud--c { top: 36%; width: 19%; animation: hero-cloud-drift 96s linear -67s infinite; }
/* 追加レイヤー：上端から水面付近まで縦全体に配置し、奥行き（大きさ・速度・濃度）を散らす */
.p-hero__new-cloud--d { top: 9%;  width: 12%; animation: hero-cloud-drift 58s linear -30s infinite; }
.p-hero__new-cloud--e { top: 27%; width: 30%; animation: hero-cloud-drift-far 122s linear -84s infinite; }
.p-hero__new-cloud--f { top: 48%; width: 13%; animation: hero-cloud-drift-soft 72s linear -20s infinite; }
.p-hero__new-cloud--g { top: 62%; width: 17%; animation: hero-cloud-drift-wisp 104s linear -50s infinite; }
.p-hero__new-cloud--h { top: 76%; width: 10%; animation: hero-cloud-drift-wisp 52s linear -12s infinite; }
@keyframes hero-cloud-drift {
  0%   { transform: translateX(0); opacity: 0.78; }
  100% { transform: translateX(470%); opacity: 0.78; }
}
@keyframes hero-cloud-drift-soft {
  0%   { transform: translateX(0) scale(0.94); opacity: 0.62; }
  100% { transform: translateX(620%) scale(1.03); opacity: 0.62; }
}
/* 大きく遠い雲：ゆっくり・薄く・わずかに膨らみながら流れる（奥行きの背景層） */
@keyframes hero-cloud-drift-far {
  0%   { transform: translateX(0) scale(0.98); opacity: 0.5; }
  100% { transform: translateX(360%) scale(1.06); opacity: 0.5; }
}
/* 低い位置のもや：小さく速く、上下にわずかに揺れながら水面上を流れる（前景の霞） */
@keyframes hero-cloud-drift-wisp {
  0%   { transform: translate(0, 0);            opacity: 0.55; }
  50%  { transform: translate(340%, -1.6%);     opacity: 0.6; }
  100% { transform: translate(680%, 0);         opacity: 0.55; }
}

/* 船：航路上の位置は固定し、波による浮沈と微かな傾きだけを与える。 */
.p-hero__new-ship {
  position: absolute;
  left: 35%;
  top: 27%;
  width: 25%;
  z-index: 2;
}
.p-hero__new-ship img {
  display: block;
  width: 100%;
  filter: saturate(1.10) contrast(1.05);
  animation: hero-new-ship-bob 4.8s ease-in-out infinite;
}
@keyframes hero-new-ship-bob {
  0%, 100% { transform: translateY(1.2%) rotate(0.45deg); }
  25%      { transform: translateY(-0.8%) rotate(0deg); }
  50%      { transform: translateY(-1.5%) rotate(-0.45deg); }
  75%      { transform: translateY(-0.4%) rotate(0deg); }
}

/* 飛行機：ヘッダーを避けながら、画面右上から左下へゆっくり横断する。 */
.p-hero__new-plane {
  position: absolute;
  left: 18%;
  top: 13%;
  width: 10.5%;
  z-index: 3;
  animation: hero-new-plane-flight 28s linear infinite;
  animation-delay: -7s;
  will-change: transform, opacity;
}
.p-hero__new-plane img {
  display: block;
  width: 100%;
  transform: rotate(-14deg);
  filter: saturate(1.10) contrast(1.05) drop-shadow(0 2px 3px rgba(11, 31, 58, 0.18));
}
@keyframes hero-new-plane-flight {
  0%   { transform: translate(-250%, 20%); opacity: 0; }
  7%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { transform: translate(750%, -20%); opacity: 0; }
}

@media (max-width: 767px) {
  .p-hero__new-plane { top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero__stage-zoom,
  .p-hero__new-ship img,
  .p-hero__new-plane,
  .p-hero__new-cloud { animation: none !important; }
  .p-hero__new-plane { display: none; }
  .p-hero__new-cloud { opacity: 0.18; }
}
/* === /HERO-2026-FINAL === */

/* ============================================================
   ACCENT-2026 — 明るい差し色でサイト全体に軽やかさを付与
   ・ネイビー(--c-navy)は主役として維持
   ・番号／英字見出し／CTA／リンク等、視線が集まる要所を
     鮮やかなアクセント(--c-accent系)で発色させる
   ・末尾一括ブロックで管理（既存ルールを上書き）
   ============================================================ */

/* 番号・インデックス（事業/サービス/バリュー等）を鮮やかに */
.p-biz__num,
.p-service__num,
.p-service__index,
.p-value__num,
.p-mission__num {
  color: var(--c-accent) !important;
  opacity: 1 !important;
}

/* 英字リード／ラベル（eyebrow）をアクセント寄りに */
.p-hero__lead-en,
.p-about__en,
.p-about__label-en,
.p-about__label {
  color: var(--c-accent-deep);
}

/* CTAボタン（primary）を明るいブルーのグラデで発色させる */
.c-btn--primary {
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-deep) 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(0, 137, 199, 0.28) !important;
}
.c-btn--primary:hover,
.c-btn--primary:focus-visible {
  background: linear-gradient(135deg, var(--c-accent-2) 0%, var(--c-accent) 100%) !important;
  box-shadow: 0 8px 22px rgba(0, 167, 225, 0.36) !important;
}

/* ghostボタンの枠・文字をアクセントに */
.c-btn--ghost {
  color: var(--c-accent-deep) !important;
  border-color: var(--c-accent) !important;
}
.c-btn--ghost:hover,
.c-btn--ghost:focus-visible {
  background: var(--c-accent-tint) !important;
}

/* 本文中リンクのアクセント（ボタン類は除外：ホバー文字色を上書きしないため） */
a:not([class*="btn"]):not(.c-header__contact):not(.p-contact__circle-btn):hover {
  color: var(--c-accent-deep);
}

/* セクション見出しの区切り装飾（下線バー）をアクセントに */
.c-section-head__en::after,
.c-section-head__ja::after {
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
}
/* === /ACCENT-2026 === */

/* ============================================================
   HOKUSEI BRAND PALETTE 2026
   White 65–70% / Blue-Navy 18–22% / Aqua Mist 4–7% /
   Aqua 3–6% / Silver-Green 2–4% / Gold 1–2%
   ============================================================ */
.c-title-echo::before { -webkit-text-stroke-color: rgba(45, 184, 197, 0.34); }
.c-progress__current { color: var(--color-hokusei-blue); }
.c-progress__rail { background: rgba(201, 209, 217, 0.72); }

/* 明るい面を主体にし、淡いアクア面は章の切り替えに限定する。 */
.p-purpose { background: var(--color-aqua-mist); }
.p-creed,
.p-story { background: var(--color-mist); }
/* Network も他のwave章と同じAqua Mist面へ（近白のままだと白い波境界が見えず無意味だった） */
.p-network { background: var(--color-aqua-mist); }
.p-network__map { background: var(--color-aqua-mist); }
.p-news { background: var(--color-aqua-mist); }
.p-insta__box { background: var(--color-aqua-mist); }

/* Aqua＝交流・航路・未来・動き。文字の主要情報はBlue/Navyのまま維持する。 */
.p-purpose__num,
.p-purpose__catch-en { color: var(--color-hokusei-blue); }
.p-purpose__diorama-route .rt { stroke: var(--color-aqua); }
.p-purpose__diorama-route .pt { fill: var(--color-aqua); }
.p-network__route { stroke: var(--color-aqua); opacity: 0.82; }
.p-network__dot { fill: var(--color-aqua); }
.p-network__dot--hub { fill: var(--color-hokusei-blue); }
.p-data__item::before { background: var(--color-aqua); }
.p-process__icon { color: var(--color-aqua); }
.p-story__title::before { background: var(--color-aqua); }
.p-solutions__cat {
  color: var(--color-deep-navy);
  border-color: rgba(45, 184, 197, 0.45);
  background: rgba(223, 245, 246, 0.72);
}
.p-solutions__card:hover .p-solutions__cat {
  border-color: var(--color-aqua);
  background: var(--color-aqua-mist);
}
.p-news__card + .p-news__card { border-left-color: rgba(45, 184, 197, 0.35); }
.p-insta__arw { border-color: rgba(45, 184, 197, 0.62); }
.p-insta__box:hover .p-insta__arw {
  background: var(--color-aqua);
  border-color: var(--color-aqua);
  color: var(--color-deep-navy);
}

/* Gold＝発見・地域価値。点と短いハイライトだけに限定する。 */
.p-news__badge::before,
.p-story__label::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  flex: 0 0 auto;
}
.p-news__badge::before { margin-right: 8px; vertical-align: 0.08em; }
.p-seabreak {
  background: var(--color-hokusei-blue);
}
.p-seabreak__eyebrow,
.p-seabreak__title .is-thin { color: var(--color-aqua-mist); }
.p-seabreak__title .is-gold { color: var(--color-gold); }

/* 下層ページも同じ色文法へ統一。 */
.p-sub-sec--tint { background: var(--color-mist); }
.c-fact-strip__value,
.c-sec-head__en { color: var(--color-hokusei-blue); }
.c-news-list__link:hover { background: var(--color-aqua-mist); }
.c-entry__cat--event,
.c-news-list__cat--event { background: var(--color-aqua-mist); color: var(--color-deep-navy); }

@media (max-width: 1023px) {
  .p-news__card + .p-news__card {
    border-left: none;
    border-top-color: rgba(45, 184, 197, 0.35);
  }
}

/* ============================================================
   LIGHT AQUA CORPORATE SKIN
   添付イメージの「明るい面・コンパクトな情報カード・矩形メディア」を、
   現行構成とコンテンツを維持したまま反映する。
   ============================================================ */
.c-title-en { color: var(--color-hokusei-blue); }
.c-title-echo::before {
  left: 0.025em;
  top: 0.055em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(45, 184, 197, 0.28);
}
.c-title-kicker { margin-top: 6px; }
.c-sec-label { padding-top: 64px; padding-bottom: 28px; }

/* Purpose・Business：既存のstickyを保ち、表示内容を淡いカードとしてまとめる。 */
.p-purpose__grid {
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(45, 184, 197, 0.18);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(7, 52, 137, 0.08);
}
.p-business__item {
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(45, 184, 197, 0.18);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 34px rgba(7, 52, 137, 0.08);
}
.p-business__no {
  background: var(--color-aqua);
  color: var(--color-deep-navy);
}
.p-business__tags li {
  border-color: rgba(45, 184, 197, 0.32);
  background: var(--color-aqua-mist);
}

/* 中盤：添付のMission/Worksカードに近い、薄い輪郭と軽い浮遊感。 */
.p-creed__inner,
.p-network__map,
.p-story__chapter,
.p-process__step {
  border: 1px solid rgba(45, 184, 197, 0.16);
  box-shadow: 0 10px 30px rgba(7, 52, 137, 0.07);
}
.p-creed__inner {
  padding: clamp(36px, 5vw, 64px);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.88);
}
.p-story__chapter {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-card);
  background: var(--color-white);
}
.p-process__step { background: var(--color-white); }

/* Works / Solutions：有機ドームから、添付に近い明快な矩形カードへ。 */
.p-solutions__scroller { gap: clamp(18px, 2vw, 28px); }
.p-solutions__card {
  padding: 14px 14px 22px;
  border: 1px solid rgba(45, 184, 197, 0.16);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: 0 10px 28px rgba(7, 52, 137, 0.08);
}
.p-solutions__media {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06);
}
.p-solutions__lead { margin-top: 18px; }
.p-solutions__title { margin-top: 16px; }
.p-solutions__progress-fill { background: var(--color-aqua); }

/* Data / Social：横並びの情報を小さな淡色カードにする。 */
.p-data__list { gap: 18px; }
.p-data__item {
  padding: 24px 22px;
  border: 1px solid rgba(45, 184, 197, 0.18);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: 0 8px 24px rgba(7, 52, 137, 0.06);
}
.p-data__item::before { top: -1px; left: 22px; }
.p-sus__list { gap: 12px; }
.p-sus__item,
.p-sus__item:last-child {
  padding: 24px;
  border: 1px solid rgba(45, 184, 197, 0.16);
  border-radius: var(--radius-card);
  background: var(--color-mist);
}

/* News：矩形画像＋白カード。アクア面の上で情報を読みやすく分離する。 */
.p-news__grid { gap: clamp(18px, 2vw, 28px); }
.p-news__card {
  padding: 14px 14px 24px;
  border: 1px solid rgba(45, 184, 197, 0.16);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(7, 52, 137, 0.08);
}
.p-news__card + .p-news__card { border-left: 1px solid rgba(45, 184, 197, 0.16); }
.p-news__media { border-radius: 12px; }
.p-news__badge {
  left: 12px;
  bottom: -12px;
  padding: 6px 14px;
  box-shadow: 0 8px 18px rgba(7, 52, 137, 0.18);
}
.p-news__year { margin-top: 28px; }
.p-news__date { font-size: clamp(2.2rem, 2.1vw, 2.8rem); color: var(--color-hokusei-blue); }

/* Recruit / Contact：添付の横長バナー型に近づける。 */
.p-recruit { background: var(--color-white); }
.p-recruit__grid {
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(30px, 5vw, 76px);
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(45, 184, 197, 0.18);
  border-radius: 28px;
  background: var(--color-aqua-mist);
  box-shadow: 0 14px 36px rgba(7, 52, 137, 0.08);
}
.p-recruit__photo {
  aspect-ratio: 4 / 3;
  max-height: 420px;
  border-radius: 16px;
}
.p-recruit__catch { margin-top: 28px; }
.p-contact__inner {
  padding: clamp(40px, 6vw, 76px);
  border: 1px solid rgba(45, 184, 197, 0.18);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(7, 52, 137, 0.08);
}
.p-contact__circle-btn {
  width: clamp(132px, 13vw, 168px);
  box-shadow: 0 16px 36px rgba(7, 52, 137, 0.22);
}

.c-footer { background: var(--color-hokusei-blue); }

@media (max-width: 1023px) {
  .p-purpose__grid { padding: 22px; }
  .p-business__item { padding: 24px; }
  .p-news__grid { gap: 18px; }
  .p-news__card + .p-news__card { border-left: 1px solid rgba(45, 184, 197, 0.16); border-top: 1px solid rgba(45, 184, 197, 0.16); }
  .p-recruit__grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .p-purpose__grid,
  .p-story__chapter,
  .p-recruit__grid,
  .p-contact__inner { padding: 22px; border-radius: 18px; }
  .p-data__list { gap: 14px; }
}

/* ============================================================
   VIVID AQUA REFINEMENT
   白の余白は守りつつ、アクアの発色・輪郭・面を明確にする。
   ============================================================ */
.c-deco { --deco-blue: #2DB8C5; }

.c-btn-pill:not(.c-btn-pill--fill) {
  border-color: rgba(45, 184, 197, 0.72);
  box-shadow: 0 6px 18px rgba(45, 184, 197, 0.11);
}
.c-btn-pill--fill:hover {
  background: var(--color-deep-navy);
  border-color: var(--color-deep-navy);
}

.p-purpose__grid,
.p-business__item,
.p-creed__inner,
.p-network__map,
.p-story__chapter,
.p-process__step,
.p-solutions__card,
.p-data__item,
.p-news__card,
.p-recruit__grid,
.p-contact__inner {
  border-color: rgba(45, 184, 197, 0.30);
  box-shadow: 0 12px 32px rgba(45, 184, 197, 0.12);
}

.p-solutions__tab {
  border-color: rgba(45, 184, 197, 0.55);
}
.p-solutions__tab:hover,
.p-solutions__tab.is-active {
  border-color: var(--color-aqua);
  background: var(--color-aqua);
  color: var(--color-deep-navy);
}
.p-solutions__tab.is-active::before { background: var(--color-deep-navy); }

.p-data,
.p-contact { background: var(--color-aqua-mist); }
.p-data__item::before { height: 5px; }

.p-sus__item,
.p-sus__item:last-child {
  border-color: rgba(45, 184, 197, 0.30);
  background: rgba(223, 245, 246, 0.76);
  box-shadow: 0 8px 24px rgba(45, 184, 197, 0.09);
}
.p-process__no {
  border-color: var(--color-aqua);
  background: var(--color-aqua);
  color: var(--color-deep-navy);
}
.p-recruit__grid { border-color: rgba(45, 184, 197, 0.44); }
.p-contact__inner { background: var(--color-white); }
.c-footer { border-top: 5px solid var(--color-aqua); }

/* ============================================================
   幾何ドットグリッド装飾 — 最終統一（末尾オーバーライドで全指定に勝たせる）
   全 c-deco を同一サイズ(46px正方)・アクア色のドット格子に固定する。
   位置(top/left/right)は各 c-deco--X の指定を維持する。
   ============================================================ */
.c-deco { width: 132px !important; height: auto; opacity: 1; }
.c-deco svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 767px) {
  .c-deco { width: 100px !important; }
}
/* 位置の統一（2026-07-14）：装飾は各見出しコンテナの先頭にあるので、
   通常フローのブロックにして「見出しの真上・左端そろえ・一定間隔」に揃える。
   旧モチーフ用の top/left/right/transform を全て無効化して被り・左右ズレを解消。 */
.c-deco--story, .c-deco--network, .c-deco--process, .c-deco--solutions,
.c-deco--data, .c-deco--news, .c-deco--sus, .c-deco--business,
.c-deco--creed, .c-deco--insta, .c-deco--purpose-label,
.c-deco--who-wave, .c-deco--recruit, .c-deco--contact,
.c-deco--mission, .c-deco--vision, .c-deco--value,
.c-deco--head-l, .c-deco--head-r, .c-deco--ph {
  position: static !important;
  display: block !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  margin: 0 0 14px 0 !important;
}

/* ============================================================
   EN見出しをドット配色に統一：全見出しを1文字ごとにブルー→アクア→ゴールドで巡回。
   全見出し(c-title-en / c-page-header__title / p-purpose__title-en)を1文字span化し、
   方式をグラデから1文字配色へ完全統一（Mission/Vision/Valueも同方式）。
   p-seabreak(ACROSS THE SEA)は青地に白のため対象外。
   ============================================================ */
.c-title-en span:nth-of-type(3n+1),
.c-page-header__title span:nth-of-type(3n+1),
.p-purpose__title-en span:nth-of-type(3n+1) { color: #1E7FC2 !important; -webkit-text-fill-color: #1E7FC2 !important; }
.c-title-en span:nth-of-type(3n+2),
.c-page-header__title span:nth-of-type(3n+2),
.p-purpose__title-en span:nth-of-type(3n+2) { color: #2DB8C5 !important; -webkit-text-fill-color: #2DB8C5 !important; }
.c-title-en span:nth-of-type(3n),
.c-page-header__title span:nth-of-type(3n),
.p-purpose__title-en span:nth-of-type(3n)   { color: #D19A2E !important; -webkit-text-fill-color: #D19A2E !important; }

/* ============================================================
   背景デザイン刷新（2026-07-14）：参考サイトの「単一背景」の発想を借用。
   白／淡アクアの交互・波境界を廃止し、全コンテンツを1つのごく淡い統一背景へ。
   色はブランド寄り（クリームではなく淡いアクア白）。明るく・洗練・一体感。
   ・濃紺ブレイク面(ACROSS THE SEA)は締めとして維持
   ・スクロール演出（円形モーフ／フェード等）は保持（モックに無くても消さない）
   ============================================================ */
body { background: #F1FAFC; }
.p-purpose, .p-business, .p-story, .p-network, .p-creed, .p-process,
.p-solutions, .p-data, .p-sus, .p-news, .p-insta, .p-recruit, .p-contact {
  background: transparent !important;
}
/* 波境界は撤去（統一面をクリーンに保つ） */
.c-wave-sec::before, .c-wave-sec::after { display: none !important; }

/* ============================================================
   Business レイアウト調整（2026-07-14）：
   ・事業情報のカード装飾（白背景/枠線/角丸/影/padding）を撤去し、統一背景に直置き
   ・大見出し「Business」を事業情報と同じ左端に揃え、意図的な整列に
   ============================================================ */
.p-business__item {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* 説明文をもっと右まで伸ばす：進捗インジケーター(01〜04)手前まで幅を拡張。
   item左(53.3%)と進捗(≈92%)がともに幅に比例するため 37.5vw で追従。上限540px。 */
@media (min-width: 1024px) {
  .p-business__item { max-width: min(540px, 37.5vw) !important; }
}

/* ============================================================
   丸番号バッジ：円“そのもの”を小さなドットで構成（2026-07-14 更新）
   solidな地・枠線を廃し、アクアの小さなドットの集まりが円形を形づくる。
   円の縁はマスクでなめらかにフェードさせ、ドットのクラスター感を出す。
   中央に濃紺ブルー×太字の番号。business/process/sustainability 共通。
   ============================================================ */
.p-business__no,
.p-process__badge,
.p-sus__num,
.p-sus__item:hover .p-sus__num {
  background-color: transparent !important;
  background-image: radial-gradient(var(--color-aqua) 1.2px, transparent 1.7px) !important;
  background-size: 6px 6px !important;
  background-position: center !important;
  border: 0 !important;
  /* 円の内側にだけドットを見せ、縁へ向けてなめらかに消す＝ドットで円を構成 */
  -webkit-mask-image: radial-gradient(circle at center, #000 62%, transparent 82%);
  mask-image: radial-gradient(circle at center, #000 62%, transparent 82%);
  color: var(--color-hokusei-blue) !important;
  -webkit-text-fill-color: var(--color-hokusei-blue) !important;
  font-weight: 800 !important;
}

/* ============================================================
   日本語の改行を文節境界で（2026-07-14）：単語の途中(例「土/地」)で切れる
   不自然な改行を抑える。auto-phrase 非対応環境は通常折り返しにフォールバック。
   本文・キャッチ・ラベルなど日本語テキスト全般へ継承させる。
   ============================================================ */
body {
  word-break: auto-phrase;
  line-break: normal;
}
/* 「（ … ）」の短いラベル/アイブロウは途中改行させない（「企業理/念」の分断防止） */
.c-title-kicker,
.c-sec-label__ja,
.p-seabreak__eyebrow,
.p-creed__kicker {
  white-space: nowrap;
}
/* 見出しの1文字分割を「単語」でまとめ、単語の途中では改行させない。
   折り返しは単語間の空白でのみ起き、「Who Are / We?」のように単語＋記号が
   まとまって改行される（「?」だけが次行に落ちる不自然な改行を防止）。 */
.js-txt-anime .c-word { white-space: nowrap; }
@media (min-width: 1024px) {
  /* 見出しの左端を事業情報カラム(53.3%で一定)に正確に合わせる。旧 right 指定は解除 */
  .p-business__fixed { left: 53.3%; right: auto; }
}

/* ============================================================
   Mission/Vision/Value（2026-07-14）
   ・カード（白い箱／枠線／浮遊シャドウ）を撤廃し、淡い統一背景に
     コンテンツをそのまま溶け込ませる（Businessと統一感を持たせる）。
   ・中央のジオラマを「常にコンテンツ領域の中心」へ。左右カラムを
     対称(1fr : ジオラマ : 1fr)にすることで中央列がパネル中心に一致。
   ============================================================ */
.p-purpose__grid {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
@media (min-width: 1024px) {
  .p-purpose__grid {
    /* 左右を等幅(1fr)にして中央のジオラマ列を真ん中に固定 */
    grid-template-columns: 1fr min(52vh, 40vw) 1fr;
    gap: clamp(28px, 4vw, 72px);
    align-items: center;
  }
}

/* ============================================================
   ボタンのホバー演出を「上品なカラートランジション」に統一（2026-07-14）
   ・浮遊感の出る強いドロップシャドウ／グローを廃止
   ・鮮やかなアクア塗りをやめ、ブランドのディープネイビーへ
     “自身のインクが静かに満ちる”ように反転／深化させる
   ・トランジションをやや長く滑らかにして余韻を持たせる
   transform はマグネットボタン(js-stalker)がインライン制御するため
   ボタン本体では使わず、色のみで演出する（矢印のスライドは別要素で許容）
   ============================================================ */
.c-btn-pill,
.c-btn-pill__arrow,
.c-header__contact,
.p-contact__circle-btn {
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   ホバー演出＝ブランドの「ドットフィル」（2026-07-14 改）
   ・下中央からブルーのドットの面が円形に広がって満ちる（追従なし）。
   ・文字色は白へ滑らかに変化（濃ブルー地×白文字でしっかり可読）。
   ・面は疑似要素(::before)が担うので、汎用リンクhoverと干渉しない。
   ============================================================ */
.c-btn-pill { position: relative; overflow: hidden; z-index: 0; }
/* ドットフィル層（アウトライン・ピル） */
.c-btn-pill:not(.c-btn-pill--fill)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-hokusei-blue);
  background-image: radial-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1.5px);
  background-size: 7px 7px;
  /* フィルの起点はマウスが入った位置（--fx/--fy）。JS未設定時は下中央から。 */
  clip-path: circle(0% at var(--fx, 50%) var(--fy, 120%));
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-btn-pill:not(.c-btn-pill--fill):hover::before,
.c-btn-pill:not(.c-btn-pill--fill):focus-visible::before {
  /* どの位置が起点でもボタン全体を覆えるよう半径は大きめに */
  clip-path: circle(175% at var(--fx, 50%) var(--fy, 120%));
}
/* 文字・矢印・枠線（a.c-btn-pill で詳細度を確保し汎用リンクhoverに勝つ）。
   文字色は少し遅らせて反転→フィルが十分に満ちてから白くなり、常に可読を保つ */
a.c-btn-pill:not(.c-btn-pill--fill):hover,
a.c-btn-pill:not(.c-btn-pill--fill):focus-visible {
  color: var(--color-white);
  border-color: var(--color-hokusei-blue);
  background: transparent;
  box-shadow: none;
  transition: color 0.2s ease 0.16s, border-color 0.4s var(--ease);
}
.c-btn-pill:hover .c-btn-pill__arrow,
.c-btn-pill:focus-visible .c-btn-pill__arrow {
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  transform: translateX(4px);
  transition: color 0.2s ease 0.16s, transform 0.4s var(--ease) 0.1s;
}

/* 塗りCTA：自前の地(ブルー)があるため、ドットフィルではなくディープネイビーへ
   静かに深化＋細かいドットの陰影を重ねる（白文字は維持・しっかり可読） */
.c-btn-pill--fill:not(:hover)::before { content: none; }
a.c-btn-pill--fill:hover,
a.c-btn-pill--fill:focus-visible {
  background-color: var(--color-deep-navy);
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.5px);
  background-size: 7px 7px;
  border-color: var(--color-deep-navy);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(11, 31, 58, 0.16);
}

/* ヘッダー CONTACT：ディープネイビーへ深化＋ごく淡い影（白文字は維持） */
a.c-header__contact:hover {
  background: var(--color-deep-navy);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(11, 31, 58, 0.16);
}

/* Contact 円形ボタン：静かに深化＋抑えた接地影（白文字は維持） */
a.p-contact__circle-btn:hover {
  background: var(--color-deep-navy);
  color: var(--color-white);
  box-shadow: 0 10px 26px rgba(11, 31, 58, 0.16);
}

/* ============================================================
   Recruit（2026-07-14）：カード枠（枠線・角丸・ミント背景・浮遊影）を撤廃し、
   写真＋見出し＋本文＋CTAを背景に溶け込ませる（Business/Purpose と統一）。
   事実チップ(年間休日 等)はHTMLごと削除済み。
   ============================================================ */
.p-recruit__grid {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ============================================================
   Mission/Vision/Value のキャッチを主役化（2026-07-14）
   大切なポイントなのに目立っていなかったため、サイズ・太さを上げ、核となる
   語（価値／届ける／北前船／与える）に手描きブラシ下線(c-mark)を引く。
   下線はパネルがアクティブになると左から描かれる（パネル内デコの描画と同じ挙動）。
   ============================================================ */
.p-purpose__catch {
  font-size: clamp(2.4rem, 2.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
/* キーワード強調（c-mark）の演出はグローバル定義（ファイル上部）に統一。
   purpose も含め「初期は非表示→表示された時に左→右ワイプで線＋文字が同時に出る」。 */

/* ============================================================
   c-photo：写真プレースホルダ（差し替え用・全ページ共通）2026-07-14
   既存のブランドイラストは残しつつ、実態を伝える「実写真」を各所に
   足すための共通枠。実写真が入るまではラベル付きの枠を表示し、
   <figure class="c-photo"><img src="…" alt="…"></figure> のように
   img を入れるだけで全面カバー表示に切り替わる（プレースホルダは隠れる）。
   ============================================================ */
.c-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(45, 184, 197, 0.12), transparent 60%),
    var(--color-aqua-mist);
  border: 1.5px dashed rgba(45, 184, 197, 0.55);
  color: var(--color-hokusei-blue);
  isolation: isolate;
}
/* プレースホルダ中身（カメラアイコン＋文言） */
.c-photo__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.c-photo__ph svg { width: 38px; height: 38px; opacity: 0.72; }
.c-photo__ph-text { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; }
.c-photo__ph-note { font-size: var(--fs-x2s); opacity: 0.7; }
/* 実写真を入れたら全面カバー（プレースホルダの上に重なる） */
.c-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* 実写真(img)を入れたら、プレースホルダ文言と差し替え目印は自動で隠す。
   → 写真の差し替えは <figure class="c-photo"> の中に <img> を置くだけでよい。 */
.c-photo:has(img) {
  border-style: solid;
  border-color: transparent;
}
.c-photo:has(img) .c-photo__ph,
.c-photo:has(img) .c-photo__tag { display: none; }
/* 差し替え目印（任意）：右下の小さなラベル */
.c-photo__tag {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 2;
  font-size: var(--fs-x2s);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-deep-navy);
  padding: 2px 10px;
  border-radius: 999px;
}
/* アスペクト比バリエーション */
.c-photo--wide { aspect-ratio: 16 / 9; }
.c-photo--portrait { aspect-ratio: 3 / 4; }
.c-photo--square { aspect-ratio: 1 / 1; }
.c-photo--tall { aspect-ratio: 4 / 5; }

/* 写真ギャラリー：横並びの写真枠（トップの「現場スナップ」等） */
.c-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: clamp(28px, 4vh, 48px);
}
@media (max-width: 900px) {
  .c-photo-grid { grid-template-columns: repeat(2, 1fr); }
}
/* トップの「現場スナップ」ギャラリー用セクション */
.p-field { padding-block: var(--space-sec); }
.p-field__head { margin-bottom: clamp(20px, 3vh, 36px); }

/* ============================================================
   ヒーローのテキストを目立たせる（2026-07-14）
   大きなイラスト背景に対して主役として立つよう、見出しを一回り大きく・
   白ハローを強めて浮き立たせる。サブ英字も発色＋強調して視認性を上げる。
   ============================================================ */
.p-hero__title {
  font-size: clamp(3rem, 6vw, 7rem);
  line-height: 1.28;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.98),
    0 0 32px rgba(255, 255, 255, 0.88),
    0 0 64px rgba(255, 255, 255, 0.72),
    0 4px 54px rgba(255, 255, 255, 0.6);
}
.p-hero__sub {
  margin-top: 22px;
  font-size: clamp(1.4rem, 1.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-hokusei-blue);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.98),
    0 0 28px rgba(255, 255, 255, 0.85);
}
@media (max-width: 767px) {
  .p-hero__title { font-size: clamp(3rem, 9vw, 4.4rem); }
}

/* ============================================================
   常時アニメーション（アンビエント）2026-07-14
   サイト全体にさりげない動きを添える。ブランドのドット装飾を
   ゆっくり明滅（きらめき）させ、採用フローティングバッジを上下に
   ゆらす。いずれも控えめ・低負荷で、reduce設定時は停止する。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* ドット装飾：各ドットがゆっくり明滅（大きくズラして“さざめき”に） */
  @keyframes deco-twinkle {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
  }
  .c-deco svg circle {
    animation: deco-twinkle 3.8s ease-in-out infinite;
    will-change: opacity;
  }
  .c-deco svg circle:nth-child(4n)   { animation-duration: 4.6s; animation-delay: -0.5s; }
  .c-deco svg circle:nth-child(4n+1) { animation-duration: 3.3s; animation-delay: -1.7s; }
  .c-deco svg circle:nth-child(4n+2) { animation-duration: 4.1s; animation-delay: -2.8s; }
  .c-deco svg circle:nth-child(4n+3) { animation-duration: 5.0s; animation-delay: -1.2s; }

  /* 採用フローティングバッジ：ふわっと上下に浮遊 */
  @keyframes badge-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }
  .c-float-badge { animation: badge-bob 4.5s ease-in-out infinite; }
}

/* ============================================================
   Our Purpose ラベルをスティッキー内に常駐（2026-07-14）
   独立ブロックで浮いて見えた「Our Purpose（企業理念）」を、Purposeの
   スティッキー面の左上に常駐させ、Mission/Vision/Value と同セクションに
   一体化。パネル内容は上下中央なので、上部の余白に収まり重ならない。
   ============================================================ */
.p-purpose__label {
  position: absolute;
  top: calc(var(--header-h) + clamp(12px, 2.6vh, 30px));
  left: clamp(24px, 8vw, 140px);
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 12px;
  pointer-events: none;
}
/* ドットはパネル側（Mission等）に任せ、ラベルはテキストのみでコンパクトに
   （ドット装飾の統一ブロックに勝たせるため !important） */
.p-purpose__label .c-deco { display: none !important; }
.p-purpose__label .c-sec-label__en {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  color: var(--color-deep-navy);
}
.p-purpose__label .c-sec-label__ja {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-kicker);
  color: var(--color-deep-navy);
  opacity: 0.85;
}
@media (max-width: 1023px) {
  /* SPはスティッキー解除・パネル縦積みのため、ラベルは通常フローの見出しに戻す */
  .p-purpose__label {
    position: static;
    left: auto;
    padding: 64px var(--pad) 4px;
  }
}

/* ============================================================
   Data セクションの数値を、見出し（Data）と同じ「1文字ずつの色替わり」に
   （2026-07-14）。カウントアップ確定後、JSが各桁を 青/アクア/金 の span で
   描画する。カウント途中や単位はブランドブルーを基調にする。
   ============================================================ */
.p-data__value {
  color: var(--color-hokusei-blue);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ============================================================
   GSAP 連携（2026-07-14）
   GSAP + ScrollTrigger が読み込まれると main.js が html に .gsap-ready を付与。
   その場合、.js-fadein のリビールは GSAP が担うため、CSSトランジションは切って
   競合（GSAPの毎フレーム更新をCSS transitionが追いかけて鈍る）を防ぐ。
   GSAP未読込時は .gsap-ready が付かず、従来のCSS/IntersectionObserverで動作。
   ============================================================ */
html.gsap-ready .js-fadein {
  transition: none;
}
/* パララックス対象はGSAPがtransformを制御するため、初期transformは無効化 */
html.gsap-ready .js-parallax {
  will-change: transform;
}

/* ============================================================
   全CTAでホバー演出を統一（2026-07-15）
   塗り系ボタン（塗りピル / ヘッダーCONTACT / お問い合わせ丸 / フロートバッジ）にも、
   アウトラインピルと同じ「カーソル侵入位置からドットの面が円状に広がる」演出を付与。
   自前のブルー地の上に ::before（ディープネイビー＋白ドット）が広がり、
   従来の“色深化のみ / グラデ”hover は無効化して動きを一本化する。
   ============================================================ */
.c-btn-pill--fill,
.c-header__contact,
.p-contact__circle-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ::before(z-index:-1) をボタン内部に閉じる */
}
/* フロートバッジは position:fixed（右下固定）を維持。relative上書きは固定が外れて消えるためNG */
.c-float-badge {
  overflow: hidden;
  isolation: isolate;
}
/* ドットフィル層（塗り系4ボタン共通）。3364 の content:none も打ち消す */
.c-btn-pill--fill::before,
.c-header__contact::before,
.p-contact__circle-btn::before,
.c-float-badge::before,
.c-btn-pill--fill:not(:hover)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* ホバーで広がるフィルの地。白は「変」との指摘によりブランドのゴールドへ。
     ドット・角のシェーディングは濃紺のまま（ゴールド地でも文字・矢印が濃紺で可読）。 */
  background-color: var(--color-gold);
  background-image:
    radial-gradient(rgba(7, 52, 137, 0.22) 1.1px, transparent 1.6px),
    linear-gradient(125deg, rgba(11, 31, 58, 0) 40%, rgba(11, 31, 58, 0.22) 100%);
  background-size: 7px 7px, 100% 100%;
  background-repeat: repeat, no-repeat;
  /* 起点はカーソル侵入位置（--fx/--fy）。JS未設定時は下中央から */
  clip-path: circle(0% at var(--fx, 50%) var(--fy, 120%));
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.c-btn-pill--fill:hover::before,      .c-btn-pill--fill:focus-visible::before,
.c-header__contact:hover::before,     .c-header__contact:focus-visible::before,
.p-contact__circle-btn:hover::before, .p-contact__circle-btn:focus-visible::before,
.c-float-badge:hover::before,         .c-float-badge:focus-visible::before {
  clip-path: circle(175% at var(--fx, 50%) var(--fy, 120%));
}
/* 旧hover（グラデ / 影 / 背景ドット直塗り）を無効化。地はブルー保持・文字は白 */
a.c-btn-pill--fill:hover,      a.c-btn-pill--fill:focus-visible,
a.c-header__contact:hover,     a.c-header__contact:focus-visible,
a.p-contact__circle-btn:hover, a.p-contact__circle-btn:focus-visible,
a.c-float-badge:hover,         a.c-float-badge:focus-visible {
  background-color: var(--color-hokusei-blue);
  background-image: none;
  box-shadow: none;
  color: var(--color-deep-navy);
}
/* 塗りピルの矢印もホバーで濃紺（白フィルの上で可読に）。共有の白矢印ルールを上書き */
.c-btn-pill--fill:hover .c-btn-pill__arrow,
.c-btn-pill--fill:focus-visible .c-btn-pill__arrow {
  color: var(--color-deep-navy);
  -webkit-text-fill-color: var(--color-deep-navy);
}

/* ============================================================
   #2 Data 数字のカウント中も配色（ネイビー一色を回避）2026-07-15
   カウント中の .js-counter は最終色に近い 青→アクア→金 のグラデ文字。
   カウント完了後は JS(colorizeValue) が1文字ずつの確定配色に置換する。
   ============================================================ */
.p-data__value .js-counter {
  background: linear-gradient(90deg, #1E7FC2 0%, #2DB8C5 50%, #D19A2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   #4 Business 番号（01…）：ドットで構成した円をやめ、見出しに
   静かに馴染む英数字インデックスに（2026-07-15）。
   process/sus の番号は現状維持（このルールは business のみ対象）。
   ============================================================ */
.p-business__no {
  width: auto !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--color-hokusei-blue) !important;
  -webkit-text-fill-color: var(--color-hokusei-blue) !important;
  font-family: var(--font-en);
  font-weight: 700 !important;
  font-size: clamp(1.7rem, 2.1vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin-right: 0.5em;
  padding: 0 !important;
  align-self: baseline;
}

/* ============================================================
   Story章見出し：墨がじんわり染み広がり、その途中から金の逆光が走る
   （2026-07-15 改4）
     1) 墨がゆっくり染み広がる … mask の境界を長く柔らかくして低速スイープ
     2) 墨の輪郭の揺らぎ        … feTurbulence + feDisplacementMap（#inkTexture）
     3) 滲み → じわじわ乾く     … blur と text-shadow が少しずつ収束
     4) 金の逆光は「墨の途中」から … 墨の終了を待たず 1.3s 時点で重ねて開始。
        直列(2.3+1.25=3.55s) → 並走(1.3+1.25=2.55s) で体感を約1秒短縮。
     5) 走り終えたら .is-done で確定 … アニメを止め通常の文字色へ戻す

   ※2つのアニメを同時に走らせるため animation はカンマ区切りで .is-inked に
     まとめて宣言する。クラス追加で animation を差し替えると、その瞬間に
     墨アニメが再スタートしてしまうため。
   ============================================================ */
.js-ink {
  opacity: 0;
  /* 2) 墨の輪郭の揺らぎ ＋ 3) 最初はぼんやり滲んでいる */
  filter: url(#inkTexture) blur(3.5px);
  /* 1) 墨の染み広がり：境界を長く柔らかく取り、じんわり左から染みる */
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 20%, rgba(0, 0, 0, 0.78) 36%, rgba(0, 0, 0, 0.42) 52%, rgba(0, 0, 0, 0.14) 68%, transparent 84%);
          mask-image: linear-gradient(100deg, #000 0%, #000 20%, rgba(0, 0, 0, 0.78) 36%, rgba(0, 0, 0, 0.42) 52%, rgba(0, 0, 0, 0.14) 68%, transparent 84%);
  -webkit-mask-size: 320% 100%;
          mask-size: 320% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  will-change: mask-position, filter, opacity, text-shadow;
}
.js-ink.is-inked {
  /* 金の帯。開始前は background-position:0% ＝ currentColor が見えるので通常の文字色 */
  background-image: linear-gradient(100deg,
    currentColor 0%, currentColor 24%,
    #A9761B 32%,
    #E9B949 41%, #FFE9A8 47%, #FFFDF2 50%, #FFE9A8 53%, #E9B949 59%,
    #A9761B 68%,
    currentColor 76%, currentColor 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 墨と金を並走させる（金は 1.3s 遅れ＝墨がまだ滲んでいる最中に開始） */
  animation:
    ink-brush 2.3s cubic-bezier(0.28, 0.62, 0.3, 1) forwards,
    ink-gold 1.25s cubic-bezier(0.32, 0, 0.18, 1) 1.3s forwards;
}
/* 5) 走り終えた最終状態：アニメを止め、通常の文字色・くっきりした輪郭で確定 */
.js-ink.is-done {
  animation: none;
  opacity: 1;
  filter: none;
  -webkit-mask-image: none;
          mask-image: none;
  background-image: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  will-change: auto;
}
@keyframes ink-brush {
  0% {
    opacity: 1;
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    filter: url(#inkTexture) blur(3.5px);
    /* 墨をたっぷり含んで大きく滲んでいる */
    text-shadow: 0 0 28px rgba(11, 31, 58, 0.45), 0 0 12px rgba(11, 31, 58, 0.34);
  }
  55% {
    filter: url(#inkTexture) blur(1.8px);
    text-shadow: 0 0 20px rgba(11, 31, 58, 0.32), 0 0 9px rgba(11, 31, 58, 0.24);
  }
  100% {
    opacity: 1;
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
    filter: url(#inkTexture) blur(0px);
    /* じわじわ乾いて締まる */
    text-shadow: 0 0 5px rgba(11, 31, 58, 0.1);
  }
}
/* 金の逆光：金の帯が左→右へ抜け、背後から金の光が差す（2026-07-15に向きを反転）。
   background-size:260% の窓を動かす方式のため、position を 100%→0% と動かすと
   帯は左→右へ進む（0%→100% だと逆に右→左になるので注意）。
   text-shadow は ink-brush と競合するが、animation の後勝ちで金が優先される。 */
@keyframes ink-gold {
  0% {
    background-position: 100% 0;
  }
  38% {
    /* 逆光の金。2026-07-15：強すぎたため発光を約半分に抑制 */
    text-shadow:
      0 0 8px rgba(255, 245, 210, 0.55),
      0 0 22px rgba(255, 214, 110, 0.42),
      0 0 44px rgba(233, 185, 73, 0.28);
  }
  62% {
    text-shadow:
      0 0 6px rgba(255, 245, 210, 0.34),
      0 0 16px rgba(255, 214, 110, 0.24),
      0 0 34px rgba(233, 185, 73, 0.15);
  }
  100% {
    background-position: 0% 0;
    text-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-ink,
  .js-ink.is-inked,
  .js-ink.is-done {
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
            mask-image: none;
    background-image: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    animation: none;
  }
}

/* ============================================================
   英字見出し：1文字ずつ線が描かれ、塗りが入る（2026-07-15）
   参考: CodePen "Stroke Logo Animation"（jkantner）

   Penと同じ原理を徹底再現するため、フォント(Plus Jakarta Sans 600)の字形を
   1文字ずつSVGパス化し、stroke-dasharray/stroke-dashoffset で線を伸ばして描く。
   パス長は字形ごとに異なるため、JS が getTotalLength() で実測して設定する。
   （マスクで拭き取る代用では「線がパスに沿って伸びる」感じが出ないため廃止）
   ============================================================ */
.c-title-svg-wrap { position: relative; }

/* SEO・読み上げ用のテキスト（視覚的には非表示） */
.c-title-svg__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 見出しの font-size に追従させる（viewBoxの高さ126 ≒ 1.26em）。
   ただしSVGは文字と違って折り返せないため、幅の広い画面で font-size が
   大きくなるとコンテナからはみ出す（例: 2000px幅で見出し648px > 枠620px）。
   コンテナ幅を上限にして比例縮小させる。--ar（viewBoxの縦横比）はJSが設定。 */
.c-title-svg {
  display: block;
  /* 幅は font-size 基準の確定値にする（%だと、親 .c-title-wrap が inline-block＝
     内容依存幅のため相互依存になり、SVGの既定値300pxに落ちてしまう）。
     はみ出しは max-width の上限だけで抑える（親の幅が決まった後に解決される）。 */
  width: calc(1.26em * var(--ar, 5));
  max-width: 100%;
  height: auto;
  overflow: visible;
}
/* 見出しを内容幅で包む inline-block。SVGが枠を超えないよう上限を渡す */
.c-title-wrap { max-width: 100%; }
.c-title-svg__l {
  stroke: var(--color-hokusei-blue);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill-opacity: 0;
}
/* 塗りは既存の「1文字ずつの配色（青→アクア→金）」を踏襲。
   金フラッシュで一旦金にしてから元の色へ戻すため、色は変数にも持たせる。 */
.c-title-svg__l:nth-of-type(3n+1) { --c: #1E7FC2; fill: var(--c); }
.c-title-svg__l:nth-of-type(3n+2) { --c: #2DB8C5; fill: var(--c); }
.c-title-svg__l:nth-of-type(3n)   { --c: #D19A2E; fill: var(--c); }

@media (prefers-reduced-motion: reduce) {
  .c-title-svg__l { fill-opacity: 1; stroke-opacity: 0; }
}

/* ============================================================
   Purpose：パネルのドット装飾を非表示（2026-07-15）
   .c-deco--mission/vision/value は top:-2.35em でパネル上方に置かれており、
   スティッキー上部に固定表示される「Our Purpose」ラベルと同じ位置に来て
   文字に重なってしまう（実測：ラベル 239x44 に対し deco 132x54 がほぼ完全に重複）。
   ラベル自身の deco は既に非表示（.p-purpose__label .c-deco）なので、それに揃える。
   ============================================================ */
.c-deco--mission,
.c-deco--vision,
.c-deco--value { display: none !important; }

/* ============================================================
   文中の強調（商社とは、究極の便利屋。）も1文字ずつ線で描く（2026-07-15）
   Zen Kaku Gothic New 700 の字形をSVGパス化。文中インラインなので、
   ベースラインを本文に合わせる（フォントの descender 分だけ下げる）。
   ============================================================ */
.c-title-svg-wrap--inline { display: inline-block; }
.c-title-svg--inline {
  display: inline-block;
  width: calc(1.448em * var(--ar, 4));  /* (ascender 1160 + |descender| 288) / upem 1000 */
  max-width: 100%;
  height: auto;
  vertical-align: -0.288em;     /* descender 分下げて本文のベースラインに乗せる */
}
/* 文中強調も見出しと同じ「1文字ずつの配色」。線だけ細めにする */
.c-title-svg--inline .c-title-svg__l { stroke-width: 1.2; }

/* 描き終わりの金フラッシュ。Story見出しの ink-gold は background-clip:text で
   「金の帯が文字を通り抜ける」演出だが、SVGでは同手法が使えないため、
   各文字の fill を時間差で金へ→元の色へ戻すことで“帯が渡る”を再現する。
   グローは ink-gold と同じ3層（10/32/70px）。 */
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l {
  animation: creed-gold 0.95s cubic-bezier(0.32, 0, 0.18, 1) both;
}
@keyframes creed-gold {
  0%, 100% {
    fill: var(--c);
    filter: none;
  }
  45% {
    /* 白飛び気味だった #FFF3C8 を落ち着いた金へ。グローもStoryと揃えて約半分に */
    fill: #F5DE9B;
    filter: drop-shadow(0 0 8px rgba(255, 245, 210, 0.55))
            drop-shadow(0 0 22px rgba(255, 214, 110, 0.42))
            drop-shadow(0 0 44px rgba(233, 185, 73, 0.28));
  }
}
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(1) { animation-delay: 0.00s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(2) { animation-delay: 0.09s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(3) { animation-delay: 0.18s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(4) { animation-delay: 0.27s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(5) { animation-delay: 0.36s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(6) { animation-delay: 0.45s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(7) { animation-delay: 0.54s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(8) { animation-delay: 0.63s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(9) { animation-delay: 0.72s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(10) { animation-delay: 0.81s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(11) { animation-delay: 0.90s; }
.c-title-svg-wrap--inline.is-flashed .c-title-svg__l:nth-of-type(12) { animation-delay: 0.99s; }
@media (prefers-reduced-motion: reduce) {
  .c-title-svg-wrap--inline.is-flashed .c-title-svg__l { animation: none; }
}

/* Who章のキャッチ「現代の北前船として、地域と世界を結ぶ。」を強調（2026-07-15）
   既定は 700。Zen Kaku Gothic New は 900 まで読み込み済みのため、
   合成太字ではなく本物のBlackウェイトで太くする。 */
.p-who__catch { font-weight: 900; }

/* ============================================================
   セクション背景：角丸パネル方式（2026-07-15）
   ------------------------------------------------------------
   参考：マルイユナイト https://marui-unite.co.jp/ の実装を実測。
     ・パネル left:40px / 幅:1286px（＝1366幅で両端40pxインセット）
     ・border-radius: 24px
     ・パネル間の隙間 40px
     ・パネルは淡色、その内側に白いカード(#fff, radius 24px)を入れ子
     ・地（パネルの外）は白
   これまでの「波」「円弧で切る」は面を分断する発想で、この方式とは
   併存しないため全て破棄した。角丸パネルは面を“置く”発想。
   ------------------------------------------------------------
   注意：このブロックは必ず末尾に追記する。途中を書き換えると後続の
   墨汁アニメ・見出しSVG・カウントアップ等を巻き添えで消す（実際に事故った）。
   ============================================================ */

/* 地：パネルの外側は白。パネルの淡色が浮いて見える */
body { background: #FFFFFF; }
body::before, body::after { content: none !important; }   /* 方眼・波紋は破棄 */
.c-wave-sec::before, .c-wave-sec::after { display: none !important; }

/* --- パネル本体 ------------------------------------------------
   セクションを角丸の面として“置く”。--gap がインセットと隙間を兼ねる。 */
.p-purpose, .p-business, .p-seabreak, .p-story, .p-creed,
.p-data, .p-sus, .p-news, .p-insta, .p-recruit, .p-contact {
  --gap: clamp(12px, 2.9vw, 40px);
  position: relative;
  margin-inline: var(--gap);
  margin-block: calc(var(--gap) / 2);
  border-radius: clamp(14px, 1.8vw, 24px);
}
/* 波・円弧の残骸を消す（::before はこの下でドットに再利用するので触らない） */
.p-business::after, .p-data::after, .p-news::after,
.p-recruit::after, .p-seabreak::after { content: none !important; }

/* --- パネルの色 --------------------------------------------------
   参考サイト(マルイユナイト)の淡色は、色相こそ違うが「明度がほぼ揃い、
   彩度は低め」で統一されているため、並べても喧嘩しない。
     #F1EEEA / #FDF6F3 / #CEEFE5 / #E6EEF0 / #E1F4F7
   前回は彩度を上げすぎ、特にサンドが黄色く浮いていた。
   明度を約93%に揃え、彩度を落として4系統を調律する。
   サンドはブランドのゴールド由来だが、黄色ではなく「暖かいグレー」に寄せる。 */
.p-purpose  { background: #DDEFF2 !important; }   /* アクア */
.p-business { background: #E1E9F4 !important; }   /* スカイ */
.p-story    { background: #F0EBE2 !important; }   /* サンド：北前船＝歴史の章に暖色 */
.p-creed    { background: #DEF0E8 !important; }   /* ミント */
.p-data     { background: #DDEFF2 !important; }   /* アクア */
.p-sus      { background: #DEF0E8 !important; }   /* ミント */
.p-news     { background: #E1E9F4 !important; }   /* スカイ */
.p-insta    { background: #F0EBE2 !important; }   /* サンド */
.p-recruit  { background: #DDEFF2 !important; }   /* アクア */
.p-contact  { background: #E1E9F4 !important; }   /* スカイ */
.p-seabreak { background: var(--color-hokusei-blue) !important; }  /* 濃紺のアクセント */

/* --- 角：ただの四角にしない ---------------------------------------
   参考サイトも 24px 24px 24px 32px と角ごとに変えている。
   こちらは1隅だけ大きく取り、章ごとに左右を振って流れを作る。
   帆のように面が抜ける形になり、海運の世界観とも合う。 */
.p-purpose, .p-business, .p-seabreak, .p-story, .p-creed,
.p-data, .p-sus, .p-news, .p-insta, .p-recruit, .p-contact {
  --r: clamp(14px, 1.8vw, 24px);          /* 基本の角 */
  --R: clamp(28px, 6.4vw, 88px);          /* 大きく抜く角 */
}
/* 奇数章：左下を大きく */
.p-purpose, .p-seabreak, .p-creed, .p-sus, .p-insta, .p-contact {
  border-radius: var(--r) var(--r) var(--r) var(--R);
}
/* 偶数章：右上を大きく（対角に振って視線を蛇行させる） */
.p-business, .p-story, .p-data, .p-news, .p-recruit {
  border-radius: var(--r) var(--R) var(--r) var(--r);
}

/* --- 角の窪みは不採用 ---------------------------------------------
   参考サイトの「白ブロックで左上を噛み取る」技法を試したが、あちらは
   窪みの中にセクションのラベル(● Marui Group)が入って初めて成立する。
   中身が空だと、パネルの左上の角が白ブロックに覆われて消え、
   噛み取った形ではなく「白い浮いたタブ」に見えた（3.2倍で確認）。
   ラベルをHTMLごと窪みへ移すまでは採用しない。 */

/* --- ドットの装飾 -------------------------------------------------
   最初は radial-gradient の無限格子で作ったが、3色を別レイヤーで半ピッチ
   ずらした結果「ゴールドだけの行」「ブルーだけの行」に分離し、
   帯が92px＝約3行しかないためマスクで削られて1〜2行だけが残り、
   等間隔の“点線の罫線”に見えていた（3.4倍で確認）。端の切れ方も不自然だった。

   サイト既存のドット装飾(c-deco)は 6×3 の有限なクラスターで、
   色（アクア/ブルー/ゴールド）とサイズが行内で混ざっている。
   その SVG をそのまま流用し、語彙を完全に揃える。
   無限格子ではないので端で切れず、マスクも不要。

   置き場所は実測で決定。各章の余白は 左右40px／上104〜197px／下104〜217px。
   隅に置くと白いカードの背後に沈むため、確実に空く「下辺」の、
   大きく抜いた角の対角へ。Business だけ下の余白が0・上が768pxなので上辺。 */
.p-business::before, .p-story::before, .p-data::before, .p-sus::before,
.p-news::before, .p-insta::before, .p-recruit::before, .p-contact::before {
  content: "" !important;
  /* p-data / p-news / p-contact / p-purpose は c-wave-sec を持ち、7/14の
     撤去ルール(display:none !important)と旧波の top:0 が ::before に残る。
     4辺を auto に戻してから配置し直す。 */
  display: block !important;
  position: absolute;
  top: auto; right: auto; bottom: auto; left: auto;
  z-index: 0;                 /* パネル背景の上・コンテンツの下（ツリー順で本文が上） */
  width: clamp(150px, 19vw, 246px);
  height: clamp(61px, 7.7vw, 100px);   /* 246:100 ≒ SVGの 320:130 */
  pointer-events: none;
  opacity: 0.5;               /* 背景装飾として控えめに */
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20320%20130%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2226%22%20cy%3D%2224%22%20r%3D%226%22%20fill%3D%22%232DB8C5%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%2280%22%20cy%3D%2224%22%20r%3D%228%22%20fill%3D%22%232DB8C5%22%2F%3E%20%3Ccircle%20cx%3D%22134%22%20cy%3D%2224%22%20r%3D%226%22%20fill%3D%22%231E7FC2%22%2F%3E%20%3Ccircle%20cx%3D%22188%22%20cy%3D%2224%22%20r%3D%229%22%20fill%3D%22%232DB8C5%22%2F%3E%20%3Ccircle%20cx%3D%22242%22%20cy%3D%2224%22%20r%3D%226%22%20fill%3D%22%23F1C75B%22%2F%3E%20%3Ccircle%20cx%3D%22294%22%20cy%3D%2224%22%20r%3D%225%22%20fill%3D%22%232DB8C5%22%20opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%2226%22%20cy%3D%2265%22%20r%3D%228%22%20fill%3D%22%232DB8C5%22%2F%3E%20%3Ccircle%20cx%3D%2280%22%20cy%3D%2265%22%20r%3D%2211%22%20fill%3D%22%231E7FC2%22%2F%3E%20%3Ccircle%20cx%3D%22134%22%20cy%3D%2265%22%20r%3D%228%22%20fill%3D%22%232DB8C5%22%2F%3E%20%3Ccircle%20cx%3D%22188%22%20cy%3D%2265%22%20r%3D%2210%22%20fill%3D%22%231E7FC2%22%2F%3E%20%3Ccircle%20cx%3D%22242%22%20cy%3D%2265%22%20r%3D%228%22%20fill%3D%22%232DB8C5%22%2F%3E%20%3Ccircle%20cx%3D%22294%22%20cy%3D%2265%22%20r%3D%227%22%20fill%3D%22%231E7FC2%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%2226%22%20cy%3D%22106%22%20r%3D%225%22%20fill%3D%22%232DB8C5%22%20opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%2280%22%20cy%3D%22106%22%20r%3D%227%22%20fill%3D%22%23F1C75B%22%20opacity%3D%220.9%22%2F%3E%20%3Ccircle%20cx%3D%22134%22%20cy%3D%22106%22%20r%3D%227%22%20fill%3D%22%232DB8C5%22%2F%3E%20%3Ccircle%20cx%3D%22188%22%20cy%3D%22106%22%20r%3D%226%22%20fill%3D%22%231E7FC2%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%22242%22%20cy%3D%22106%22%20r%3D%228%22%20fill%3D%22%232DB8C5%22%2F%3E%20%3Ccircle%20cx%3D%22294%22%20cy%3D%22106%22%20r%3D%229%22%20fill%3D%22%231E7FC2%22%2F%3E%20%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* 奇数章：大きい角は左下 → ドットは下辺の右側へ */
.p-sus::before, .p-insta::before, .p-contact::before {
  right: clamp(16px, 2.6vw, 36px);
  bottom: clamp(16px, 2.6vw, 34px);
}
/* 偶数章：大きい角は右上 → ドットは下辺の左側へ */
.p-story::before, .p-data::before, .p-news::before, .p-recruit::before {
  left: clamp(16px, 2.6vw, 36px);
  bottom: clamp(16px, 2.6vw, 34px);
}
/* Business は下の余白が 0。上に 768px 空くのでそちらへ */
.p-business::before {
  left: clamp(16px, 2.6vw, 36px);
  top: clamp(16px, 2.6vw, 34px);
}

/* MVは全画面のヒーローなのでパネルにしない */
.p-mv { margin: 0; border-radius: 0; }

/* Who章のキャッチを3行にしたことによる高さ収支の再調整（2026-07-15）
   2行→3行で+21px。1366x768は収まるが、768より低い画面（実測1366x640）で
   9pxはみ出した。この章は sticky で 100vh に収める設計のため、
   既存の vh 連動（font-size:3.8vh / line-height:1.7）を締めて吸収する。
   1366x640 で収まる値：3.45vh × 1.55 ≒ 34px/行 × 3行 = 103px。 */
.p-who__catch {
  font-size: clamp(2rem, min(2.8vw, 3.45vh), 4.2rem);
  line-height: 1.55;
}

/* Who章の窮屈感を解消（2026-07-15）
   3行化に合わせてキャッチを 3.45vh / 行間1.55 まで締めたが窮屈だった。
   実測した内訳（1366x768・body 611px / 余裕25px）：
     padding 41+41=82 ／ 見出し205 ／ キャッチ123 ／ 本文99 ／ ボタン54
   padding が最も削れる（この章は inner 側で中央寄せされるため、
   body 自身の上下 padding は余白として二重になっている）。
   ここを原資にキャッチを大きくし、行間と要素間の余白を広げる。
   すべて vh 連動なので、低い画面では自動で締まる（sticky の 100vh 収支を守る）。 */
.p-who__body { padding-block: clamp(10px, 1.5vh, 22px); }
.p-who__catch {
  font-size: clamp(2.2rem, min(2.9vw, 3.9vh), 4.4rem);
  line-height: 1.7;
  margin-top: clamp(16px, 3.2vh, 52px);
}
.p-who__text { margin-top: clamp(14px, 2.4vh, 36px); }
.p-who__btn  { margin-top: clamp(18px, 2.8vh, 44px); }

/* Purpose(MVV)：狭い画面ではテキストではなくイラストを縮める（2026-07-15）
   従来 grid-template-columns: 1fr min(52vh,40vw) 1fr
   中央のイラスト列が先に幅を確保し、左右の 1fr（テキスト）が残りを分ける構造
   だったため、画面が狭まるとテキストだけが縮んでいた。
   実測：1366px→左280/中央399/右280 ／ 1100px→左200/中央399(不変)/右183
   テキスト列に下限(minmax)を与え、イラスト列を可変(200px まで縮む)にして
   優先順位を逆転させる。下限は 1366px 時の実幅を基準にした。 */
@media (min-width: 1024px) {
  .p-purpose__grid {
    grid-template-columns:
      minmax(272px, 1fr)                    /* 左：キャッチ＋ボタン */
      minmax(200px, min(52vh, 40vw))        /* 中央：ジオラマ（ここが縮む） */
      minmax(268px, 1fr);                   /* 右：本文＋進捗 */
  }
}

/* ============================================================
   パネルを少し内側でなぞる「動く枠線」（2026-07-16／全ページ共通）
   ------------------------------------------------------------
   もとは sub.css にあったが、TOP は sub.css を読まない（下層専用）ため
   全ページが読む style.css へ移設。JSが各パネルにSVG（c-panel-trace）を
   生成し、パネル実寸・実角丸から少し内側の角丸パスを作る。
     base   ＝薄い全周ライン（＝少し内側の枠線）
     sleeve ＝走る線分の下に敷く細い濃紺のキーライン（縁取り）
     run    ＝白い線本体（ゆっくり周回＋液体的に伸縮）
   線分長・速度・位相・全長はJSが svg 側の変数に設定し、run と sleeve が継承する。
   クラス名が固有なのでスコープは付けない（=TOP/About両方のパネルに効く）。 */
.c-panel-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
/* 線はすべて白で統一。base＝白の全周ライン、sleeve＝白のやや太い下地、
   run＝白い芯。濃紺は使わない（淡いパネルでは白が控えめになるが、線の色は白）。 */
.c-panel-trace__base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
}
.c-panel-trace__sleeve,
.c-panel-trace__run {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: var(--seg, 120px) var(--gap, 1000px);
  stroke-dashoffset: var(--trace-len, 0);
  animation:
    panelTrace var(--trace-dur, 20s) linear var(--trace-delay, 0s) infinite,
    panelBlob  calc(var(--trace-dur, 20s) * 0.5) ease-in-out var(--trace-delay, 0s) infinite;
}
/* 下地：白のやや太い線。白い芯に柔らかい肉付けを与える（にじみ・光彩ではない）。 */
.c-panel-trace__sleeve {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2.8;
}
/* 白い芯。 */
.c-panel-trace__run {
  stroke: #FFFFFF;
  stroke-width: 1.8;
  animation:
    panelTrace var(--trace-dur, 20s) linear var(--trace-delay, 0s) infinite,
    panelBlob  calc(var(--trace-dur, 20s) * 0.5) ease-in-out var(--trace-delay, 0s) infinite,
    panelBreath calc(var(--trace-dur, 20s) * 0.5) ease-in-out var(--trace-delay, 0s) infinite;
}
/* 画面外のパネルはアニメを止める（TOPは11枚あるため描画負荷を抑える） */
.c-panel-trace.is-trace-paused .c-panel-trace__sleeve,
.c-panel-trace.is-trace-paused .c-panel-trace__run { animation-play-state: paused; }
@keyframes panelTrace {
  to { stroke-dashoffset: 0; }
}
@keyframes panelBlob {
  0%, 100% { stroke-dasharray: var(--seg, 120px) var(--gap, 1000px); }
  50%      { stroke-dasharray: calc(var(--seg, 120px) * 1.9) calc(var(--gap, 1000px) - var(--seg, 120px) * 0.9); }
}
@keyframes panelBreath {
  0%, 100% { stroke-width: 1.2; }
  50%      { stroke-width: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  .c-panel-trace__sleeve,
  .c-panel-trace__run { animation: none; opacity: 0; }
}

/* ============================================================
   Sea Break：背景に動画を差し込めるようにする（2026-07-16）
   ------------------------------------------------------------
   紺の地(section背景)はフォールバックとして残し、その上に動画レイヤーを
   敷く。動画は z-index:-1（isolationで紺地の上・装飾/本文の下に収める）。
   白文字の可読性のため、動画の上に紺のオーバーレイを重ねる。
   動画は has-video のときだけ表示（未設定＝従来の紺の面のまま）。
   本番はこの mp4 を差し替えるか、WPはカスタマイザーのURLで設定。 */
.p-seabreak { isolation: isolate; }
.p-seabreak__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  display: none;                 /* 既定は非表示（動画なし＝紺の面） */
}
.p-seabreak.has-video .p-seabreak__media { display: block; }
.p-seabreak__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 動画の上に紺のオーバーレイ。既存セクションと同じ放射グラデ＋ベースの紺で
   どんな動画でも白文字が沈まないようにする。 */
.p-seabreak__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 120% at 88% -10%, rgba(7, 52, 137, 0.55) 0%, rgba(7, 52, 137, 0) 60%),
    radial-gradient(60% 100% at 6% 110%, rgba(7, 52, 137, 0.40) 0%, rgba(7, 52, 137, 0) 60%),
    rgba(7, 26, 58, 0.58);
}
@media (prefers-reduced-motion: reduce) {
  .p-seabreak__video { display: none; }   /* 動きを避ける設定では静止（紺の面）に */
}

/* ============================================================
   .c-cover-img：カバー画像の基本ルール（復元）2026-07-16
   ------------------------------------------------------------
   hokusei_photo_cover() が全テンプレートで出力する <img class="c-cover-img">
   の「覆い方」。この基本ルールが style.css から欠落しており、写真を設定した
   ディオラマ・各ビジュアルで画像が枠を覆えずズレていた（ライブで発覚）。
   コンテナの position に依存しないよう、absolute ではなく「枠いっぱいのブロック＋
   自身を角丸クリップ」で覆う。コンテナは aspect-ratio 等で高さが確定していれば良い
   （円形ビジュアルは aspect-ratio:1）。--pos で寄せを合わせる。
   ※About ヒーローは .p-about-intro__mv .c-cover-img の専用ルールが優先される。 */
.c-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  border-radius: inherit;
}

/* ============================================================
   丸いCTA（お問い合わせ丸ボタン／採用情報フロートバッジ）（2026-07-16→17）
   ------------------------------------------------------------
   通常：ヘッダーCONTACTと同じネイビー（#073489）・白文字。
   ホバー：塗りピル（採用情報を見る等）と同じ「ゴールドのフィル＋濃紺文字」に
   統一（そちらの方が見やすいとの指摘）。ホバーの見た目は共有ルール
   （.c-btn-pill--fill::before 等のゴールド＋a.〜:hover の濃紺文字）に委ねる
   ため、ここでは通常色と影だけを指定し、::before・文字色は上書きしない。 */
.p-contact__circle-btn,
.c-float-badge {
  background: var(--color-hokusei-blue);
  color: var(--color-white);
  box-shadow: 0 16px 40px rgba(7, 52, 137, 0.24);
}
.p-contact__circle-btn:hover,
.c-float-badge:hover {
  box-shadow: 0 22px 52px rgba(7, 52, 137, 0.32);
}

/* ============================================================
   ヒーローの Pick Up（お知らせpill）を白背景から見えるように（2026-07-16）
   ------------------------------------------------------------
   地が白（--color-mist=#FFF）で、淡いヒーローの上だと枠が無く埋もれていた。
   細い枠線＋柔らかい影で輪郭と浮きを出す。 */
.p-hero__pickup {
  border: 1px solid rgba(11, 31, 58, 0.14);
  box-shadow: 0 12px 34px rgba(7, 52, 137, 0.14);
}

/* ============================================================
   「究極の便利屋」（文中インラインSVG）の太字化（2026-07-17 改）
   ------------------------------------------------------------
   旧：塗り字形に太い線(stroke-width:4)を敷いて外側へ太らせていたが、
   複雑な漢字（極・便・屋 等）の内側が潰れて可読性が落ちていた。
   現：字形そのものを太字ウェイト（M PLUS 2 Black）で再生成したため、
   線での増肉は不要。描き込みアニメの線色（各文字の--c）だけを与える。 */
.c-title-svg--inline .c-title-svg__l {
  stroke: var(--c);
}

/* ============================================================
   本文テキストの底上げ（2026-07-17）— 全体的に本文が小さく感じるため、
   本文系のフォントサイズ変数を一段大きく。見出し系は据え置き。 */
:root {
  --fs-x2s: 1.2rem;   /* 11 → 12px 注記 */
  --fs-xs:  1.3rem;   /* 12 → 13px キャプション */
  --fs-sm:  1.45rem;  /* 13 → 14.5px 小ラベル・キッカー */
  --fs-base: 1.7rem;  /* 15 → 17px 本文標準 */
  --fs-md:  1.85rem;  /* 16 → 18.5px 本文リード */
}