@charset "UTF-8";
/* =========================================================
   HOKUSEI RECRUIT — 越前信用金庫 採用サイトの実測値で再構築
   ---------------------------------------------------------
   参考サイト main.css（12,304行）から抽出した設計規約:
   ・コンテナに max-width を置かない。padding-inline: 5vi → 6.25vi
   ・全数値は SP=375px / PC=1600px 基準の vw・cqi
   ・面に使う色は2つだけ。鮮やかな地 約60% / 落ち着いた地 約40%
   ・ブレークポイントは min-width の 48rem / 64rem / 80rem のみ
   ・無限アニメーションは step-end。中間フレームを描かない
   ・装飾は必ず親要素の外（負の座標）へ出す
   ・アウトライン文字（text-stroke）は使わない。白ベタか画像のみ
   ・写真に白フチ・影・傾きは付けない。角丸のみ
   ========================================================= */

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; font-size: 62.5%; scroll-behavior: smooth; }
img, video, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { appearance: none; border: none; background: none; font: inherit; color: inherit; cursor: pointer; }

:root {
  /* 面は2色だけ */
  --cl-vivid: #2DB8C5;        /* 浅葱。参考サイトの朱 #e7594d の位置 */
  --cl-bg:    #F7F5EF;        /* 生成り。参考サイトと同じ役割 */
  --cl-white: #FFFFFF;
  --cl-dark:  #17202B;        /* 本文。生成り地 14.68:1 / 浅葱地 6.42:1 */
  --cl-navy:  #073489;        /* ロゴ・ENTRY。参考の #e50012 の位置 */
  --cl-accent:#F1C75B;        /* 装飾線（浅葱地上）。参考のライム #d2ff80 の位置 */
  --cl-aqua-line: #209DA8;    /* 装飾線（生成り地上）。参考の朱の位置 */
  --cl-gray2: #DCD7D1;
  --cl-chip:  #EAE9E3;

  /* 書体（参考の4本立てを役割ごとに置換） */
  --ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-jp-heading: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-en: "Manrope", sans-serif;
  --ff-en-heading: "Oswald", "Impact", sans-serif;

  /* 参考サイトは --fw-bold が 700 ではなく 600、body も 600 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 600;
  --fw-black: 800;

  --header-height: 88px;   /* JS が実測して上書き */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  background: var(--cl-bg);
  color: var(--cl-dark);
  font-family: var(--ff-jp);
  font-weight: var(--fw-bold);
  font-size: max(14px, 4vw);
  line-height: 1.8;
  letter-spacing: .03em;
  font-feature-settings: "palt" 1;
  word-break: auto-phrase;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html.is-open body { overflow: hidden; }

.u-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--cl-navy); outline-offset: 2px; border-radius: 4px; }

.c-wrap { width: 100%; padding-inline: 5vi; }

/* =========================================================
   共通パーツ
   ========================================================= */

/* --- 矢印ボックス（1枚目が右へ抜け、2枚目が左から入る） --- */
.c-box {
  background: var(--cl-vivid);
  border-radius: 1.06667vw;
  width: 8vw; height: 8vw;
  display: block; position: relative; flex-shrink: 0;
  /* O-14(2): 円の背景は 0s で即座に、中の矢印は .3s。ひとつの操作が2つの速度に
     割れていた → 矢印（85行）と同じ .3s に揃える */
  transition: background-color .3s;
}
.c-box svg {
  position: absolute; top: 50%; left: 50%;
  width: 42%; height: 42%;
  transform: translate(-50%, -50%);
  fill: var(--cl-white);
  /* A-14: ページトップ矢印(2146行付近)は個別プロパティ translate で動くが、
     translate は transform とは別プロパティなので補間されず0秒で跳ねていた。
     これで .c-box svg を使う矢印13箇所がすべて同じ .3s に揃う */
  transition: opacity .3s, transform .3s, translate .3s;
}
.c-box svg:nth-child(2) { opacity: 0; transform: translate(-200%, -50%); }
.c-box.--white, .c-box--white { background: var(--cl-white); }
.c-box--white svg { fill: var(--cl-navy); }
/* O-09: svg個別のrotateはtranslate(-50%,-50%)より先に合成され移動方向が反転し箱外へはみ出す
   → 親ごと回して座標系を反転（右ボタンと機構共通）。矢印スライドは箱内でクリップ */
.c-box--rotate { rotate: 180deg; }
.c-box--arrow { overflow: clip; }
.c-box--sm { width: 6vw; height: 6vw; }
.c-box--plus::before, .c-box--plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  background: var(--cl-white);
  width: 46%; height: 2px;
  /* A-13(1): 擬似要素は .c-box の transition を継がないので個別に宣言。
     丸（.3s）と＋の2本が同時に色替わりする */
  transition: background-color .3s;
}
.c-box--plus::after { rotate: 90deg; }

@media (any-hover: hover) {
  .c-box--hover:hover .c-box--arrow svg:first-child,
  .c-box--hover:hover.c-box--arrow svg:first-child { opacity: 0; transform: translate(100%, -50%); }
  .c-box--hover:hover .c-box--arrow svg:nth-child(2),
  .c-box--hover:hover.c-box--arrow svg:nth-child(2) { opacity: 1; transform: translate(-50%, -50%); }

  /* A-13(1): 取組みカード内の実体は .c-box--plus であって .c-box--arrow ではない
     （index.html:399/405/411/417）。旧 .p-initiative__card-item:hover .c-box--arrow ... は
     完全な空振りで、モーダルを開く4枚がホバーに無反応だった → 実在クラスへ向け直す。
     ＋の2本は104行で白なので、金地のままだと消える → 勝色へ入れ替える。
     .c-box は86行で transition: background-color .3s を既に持つので手ざわりは他ボタンと同じ */
  .p-initiative__card-item:hover .c-box--plus { background: var(--cl-accent); }
  .p-initiative__card-item:hover .c-box--plus::before,
  .p-initiative__card-item:hover .c-box--plus::after { background: var(--cl-dark); }
}

/* --- 下線アニメ（右端から消え、左端から現れる 0.8s） --- */
.u-line__text {
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  padding-bottom: .2rem;
  /* R-14(4)/M-07: 83-85行のコメントが「ひとつの操作が2つの速度に割れていた → .3s に揃える」
     と書いているのに、この1本だけ .8s のまま残り、同じボタンの中で下線と矢印が2.8倍ちがっていた */
  transition: background-size .3s var(--ease-out);
  display: inline;
}
@media (any-hover: hover) {
  .u-line__target:hover .u-line__text { background-position: 0 100%; background-size: 100% 2px; }
}
.c-ext {
  display: inline-block; width: 1em; height: 1em; margin-left: 6px;
  vertical-align: -.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7H9V4.4L3.7 9.7 2.3 8.3 7.6 3H4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7H9V4.4L3.7 9.7 2.3 8.3 7.6 3H4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- 英字見出し（三層構造の第1層。下に二重罫、右横に手書きラベル） --- */
.c-heading { position: relative; display: inline-block; margin-bottom: 8vw; }
.c-heading--lg {
  font-family: var(--ff-en-heading);
  font-weight: var(--fw-regular);
  font-size: max(14px, 8.53333vw);
  line-height: 1.2;
  letter-spacing: .08em;
  color: inherit; /* O-02: 白固定をやめ各セクションの文字色に追従（.p-messageは藍地で白を明示済み） */
  position: relative;
}
/* O-07: 差し色の金を「見出し下バー」として全セクション見出しで反復し役割を一本化。
   interviewページ既存の .p-iv-person__no::after（金バー48×3px）と意匠を揃える */
.c-heading--lg::after {
  content: "";
  display: block;
  width: 48px; height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--cl-accent);
}
.c-heading--sm {
  position: absolute; bottom: .3em; left: calc(100% + 1rem);
  font-family: var(--ff-en-heading);
  font-size: max(11px, 3vw);
  white-space: nowrap;
  color: inherit; /* O-02: 同上 */
  opacity: .85;
}
.c-heading[data-color="dark"] .c-heading--lg,
.c-heading[data-color="dark"] .c-heading--sm { color: var(--cl-navy); }

/* --- 縦組みテキスト --- */
.c-vtext {
  writing-mode: vertical-rl;
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-black);
  letter-spacing: .08em;
  line-height: 1.6;
  font-feature-settings: "palt" 0;
  display: block;
}

/* --- 縦点線レール（三角キャップ＋点線） --- */
.c-rail { position: absolute; top: 0; bottom: 0; width: 9px; display: none; }
.c-rail__line {
  position: absolute; top: 10px; bottom: 10px; left: 50%; translate: -50% 0;
  width: 2px;
  background-repeat: repeat-y;
  background-size: 2px 10px;
}
.c-rail__cap { position: absolute; left: 50%; translate: -50% 0; width: 9px; height: 8px; background-size: contain; background-repeat: no-repeat; }
.c-rail__cap { top: 0; }
.c-rail__cap.--btm { top: auto; bottom: 0; rotate: 180deg; }
.c-rail[data-color="white"] .c-rail__line { background-image: url(../images/deco/dots-white.svg); }
.c-rail[data-color="white"] .c-rail__cap  { background-image: url(../images/deco/tri-white.svg); }
.c-rail[data-color="aqua"]  .c-rail__line { background-image: url(../images/deco/dots-aqua.svg); }
.c-rail[data-color="aqua"]  .c-rail__cap  { background-image: url(../images/deco/tri-aqua.svg); }

/* --- 枠線ラベル --- */
.c-border {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: .2em 1.1em;
  font-size: .82em;
  line-height: 1.6;
}

/* --- VIEW MORE ボタン --- */
.c-button-primary {
  font-family: var(--ff-en);
  font-weight: var(--fw-semi-bold);
  display: inline-flex; align-items: center;
  column-gap: 3.2vw;
  font-size: 4.26667vw;
  margin-top: 5vw;
}

/* =========================================================
   ヘッダー（浮遊カード。inline-size 94.9333% / 全周 8px / 影なし）
   ========================================================= */
.l-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 10000; }
.l-header__body {
  min-height: 60px;
  margin-top: 15px;
  margin-inline: auto;
  inline-size: 94.9333%;
  padding: 15px 26px;
  background: var(--cl-white);
  border-radius: 8px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}
.l-header__logo a { display: flex; align-items: center; column-gap: 1.06667vw; inline-size: min(46vw, 175px); }
.l-header__logo img { width: min(36vw, 135px); }
/* R-10(4)/SP-06: 9pxはサイト内最小。ヘッダーの副文字が読めない → 11px下限へ */
.l-header__logo-text { font-family: var(--ff-en); font-size: clamp(11px, 2.9vw, 12px); font-weight: var(--fw-semi-bold); color: var(--cl-dark); letter-spacing: .1em; }

.l-header__nav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); width: 100%; position: absolute; top: 100%; left: 0; }
.l-header__nav-inner { overflow: hidden; }
html.is-open .l-header__nav { grid-template-rows: 1fr; }
html.is-open .l-header__body { border-radius: 8px 8px 0 0; }
html.is-open .l-header__nav-inner { background: var(--cl-vivid); }
.l-header__nav-list--main { padding: 6vw 6vw 0; }
.l-header__nav-list--main a { display: block; padding-block: 3vw; color: var(--cl-white); font-weight: var(--fw-black); }
.l-header__nav-list--sub { display: flex; flex-wrap: wrap; gap: 3vw; padding: 3vw 6vw 8vw; }
.l-header__nav-list--sub a { display: inline-block; border: 2px solid rgb(255 255 255 / .5); border-radius: 999px; padding: .4em 1.2em; color: var(--cl-white); font-size: max(12px, 3.4vw); }

.l-header__nav-entry { margin-left: auto; margin-right: 44px; }
.l-header__nav-entry a {
  background-color: var(--cl-navy);
  color: var(--cl-white);
  font-family: var(--ff-en);
  font-weight: var(--fw-semi-bold);
  border: 1px solid transparent;
  border-radius: 5.33333vw;
  padding: 5px 3.2vw;
  font-size: clamp(12px, 3.2vw, 14px);
  display: block;
  transition: background-color .3s, color .3s, border-color .3s;
}
@media (any-hover: hover) {
  .l-header__nav-entry a:hover { background: var(--cl-white); color: var(--cl-navy); border-color: var(--cl-navy); }
}

.l-header__humburger { position: absolute; right: 20px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; }
/* A-03: 開いた状態の✕を縮めるため scale を transition に足す。
   left/right/top を動かすと補間されず瞬間移動になるので、必ず個別プロパティの scale で縮める */
.l-header__humburger-line { position: absolute; left: 4px; right: 4px; height: 2px; background: var(--cl-dark); transition: translate .3s, rotate .3s, scale .3s; }
.l-header__humburger-line:nth-child(1) { top: 9px; }
.l-header__humburger-line:nth-child(2) { top: 16px; }
/* A-03: 8px は可読限界だったので 10px へ（MENU/CLOSE とも線とのクリアランスは下で確保）。
   line-height を 1.2 で明示するのは、継承値 1.8 だと 10px の字に 18px の行箱が付き、
   bottom 基準の箱の上端が y=23 まで上がって✕の下端 23.6 と交差するため。
   1.2 なら箱高12px・箱の上端 44-3-12=29 となり、A-03の想定どおり 5.4px 空く */
.l-header__humburger-txt { position: absolute; bottom: -2px; left: 0; right: 0; text-align: center; font-family: var(--ff-en); font-size: 11px; line-height: 1.2; /* R-10(4)/SP-06 */ letter-spacing: .1em; }
html.is-open .l-header__humburger-line:nth-child(1) { translate: 0 3.5px; rotate: 45deg; }
html.is-open .l-header__humburger-line:nth-child(2) { translate: 0 -3.5px; rotate: -45deg; }

/* =========================================================
   ヒーロー
   ========================================================= */


/* 写真は装飾なし。参考サイトは border も box-shadow も rotate も持たない */

/* A-02: 金の斜線装飾 .p-hero__img-decorate は撤去。
   PCでは 2597 / 2618-2622 行の display:none で既に消していたが、それらは
   @media (min-width: 64rem) 内でSPには効かず、375px で --d05a/--d05b が
   c07.webp の3人組と 87.6x71.9px / 87.7x58.7px 交差していた（造形第1条違反）。
   PCと同じ判断をSPにも当て、要素・配置指定・キーフレームごと畳む。 */


/* A-02: --d03 / --d05a / --d05b / --d05c / --d08a / --d08b / --d09 の配置指定は
   要素ごと撤去したため削除（上のコメント参照） */

/* O-01: マーキーはヒーローの外（.l-seam-loop）へ移設。
   人物2点が bottom:0 で接地しており帯を足元より下へ置く空間がヒーロー内に無く、
   .p-hero が overflow:hidden なので下へ食い出させることもできないため。
   絶対配置・z-index・gap は移設先で無効になる指定なので削除。opacity:0 は入場アニメが依存 */


/* =========================================================
   お知らせ
   ========================================================= */
.p-information {
  background: var(--cl-vivid);
  color: var(--cl-dark); /* O-02: 浅葱地の白文字2.39:1は規約違反 → 勝色6.87:1 */
  padding-block: 21.3333vw;
  position: relative;
  container-type: inline-size;
}
.p-information__heading { display: none; }
/* O-02(9): 文字の勝色化に合わせ罫線も勝色系へ（白おしらせ×白マーキーの境界接触も解消） */
.p-information__list-item + .p-information__list-item { border-top: 1px solid rgb(23 32 43 / .25); }
.p-information__list { border-bottom: 1px solid rgb(23 32 43 / .25); }
.p-information__list-item-link { display: block; padding-block: 3.4vw; }
.p-information__list-item-sub { display: flex; align-items: center; gap: 16px; }
.p-information__list-item-date { font-family: var(--ff-en); font-weight: var(--fw-semi-bold); font-size: max(12px, 3.4vw); }
.p-information__list-item-category {
  background: var(--cl-white); color: var(--cl-vivid);
  border-radius: 1.25vw;
  padding: .25vw 8px;
  font-size: max(11px, 3vw);
  line-height: 1.6;
  display: grid; place-items: center;
}
.p-information__list-text {
  margin-top: 6px;
  font-weight: var(--fw-semi-bold);
  font-size: max(14px, 3.9vw);
  line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-information__banner-list { display: flex; flex-direction: column; gap: 4vw; margin-top: 10vw; }
.p-information__banner-item { display: block; background: var(--cl-white); border-radius: 12px; overflow: hidden; color: var(--cl-dark); }
.p-information__banner-item img { width: 100%; aspect-ratio: 672/408; object-fit: cover; }
.p-information__banner-label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 3.5vw 4vw;
  font-weight: var(--fw-black); font-size: max(12px, 3.6vw);
}

/* =========================================================
   Company Movie
   ========================================================= */
/* R-12(1)/V-05: #movie だけ上余白が無く、浅葱→生成りの色替わりから12.5pxで見出しが始まっていた。
   他セクションの上余白は86.4〜108px。padding-bottom → padding-block にして対称にする */
.p-company { background: var(--cl-vivid); color: var(--cl-white); padding-block: 21.3333vw; }
.p-company__header { position: relative; }
.p-company__nav { display: none; gap: 10px; }
/* O-09(design V-10): 約23px四方はタップ目安44pxを大きく下回る → 1440pxで約44px四方に。丸角12pxは造形3段階内 */
.p-company__nav .c-box { width: max(40px, 3.05vw); height: max(40px, 3.05vw); border-radius: 12px; }
.p-company__scroller { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 10px; }
.p-company__scroller::-webkit-scrollbar { display: none; }
.p-company__track { display: flex; gap: 16px; width: max-content; padding-inline: 9.3333vw; }
.p-company__card {
  position: relative;
  width: 81.3333vw;
  border-radius: 1.5625vw;
  overflow: hidden;
  scroll-snap-align: center;
  cursor: pointer;
}
.p-company__card-img { width: 100%; aspect-ratio: 573/324.59; object-fit: cover; transition: transform .3s; } /* R-14(4)/M-07: 矢印13点の .3s に揃える */
.p-company__play-mark {
  position: absolute; inset: 0; margin: auto;
  width: 16.784vw; height: 16.784vw;
  z-index: 10; pointer-events: none;
  transition: transform .4s;
}
@media (any-hover: hover) {
  .p-company__card:hover .p-company__play-mark { transform: scale(1.1); }
}

/* =========================================================
   ホクセイのこと ＋ 数字
   ========================================================= */
.p-about { background: var(--cl-bg); padding-block: 21.3333vw; }
.p-about__heading-wrapper {
  display: grid;
  grid-template-columns: 73.9521% 12.5749%;
  grid-template-areas: "content title" "figure figure" "history history";
  justify-content: space-between;
  container-type: inline-size;
}
.p-about__body-top { grid-area: content; }
.p-about__figures  { grid-area: figure; position: relative; margin-top: 10.6667vw; }
.p-about__history  { grid-area: history; }
.p-about__heading  { grid-area: title; position: relative; }
.p-about__heading .c-vtext { font-size: max(14px, 6.93333vw); color: var(--cl-navy); }
/* R-12(2)/V-07: right:-1.25vw で画面右端に18pxはみ出し、3本目の斜線が縦に切断されていた。
   対になる .p-information__heading-decoration（796行・左端16pxで3本とも完結）と見え方を揃える */
.p-about__heading-decoration { position: absolute; width: 3.9375vw; min-width: 34px; top: calc(-1.875vw - 38px); right: 0; } /* O-08: 320/768pxで「ホ」と交差 → 縦書き見出しの上方へ抜く（デスクトップは1184行の上書きが有効） */

.p-about__content-title {
  font-family: var(--ff-jp-heading); font-weight: var(--fw-black);
  font-size: max(14px, 6.4vw);
  line-height: 1.5;
  margin-bottom: 4.26667vw;
  position: relative;
}
.p-about__content-title--accent { color: var(--cl-vivid); }
/* O-03: 下線SVGの跳ね上がりが「必要な場所」に交差 → 要素ごと文字ボックスの下へ出す */
.p-about__content-title--decorate { position: absolute; top: calc(100% + 6px); bottom: auto; left: 0; width: 32.5333vw; }
/* O-03: 下へ出した分、直後の本文が装飾と重ならないよう間隔を確保
   （装飾インク下端 ≒ 6px + 0.79×幅×40/235。モバイル幅32.5333vwに追従させる） */
.p-about__content-title:has(> .p-about__content-title--decorate) + .p-about__content-text { margin-top: max(30px, calc(10px + 4.5vw)); }
@media (min-width: 64rem) {
  /* デスクトップは装飾幅が14.375vwに縮むため余白も戻す */
  .p-about__content-title:has(> .p-about__content-title--decorate) + .p-about__content-text { margin-top: max(30px, 3vw); }
}
.p-about__content-text { font-size: max(14px, 3.73333vw); line-height: 1.8; }
.p-about__img { margin-top: 8vw; }
.p-about__img img { border-radius: 4.26667vw; width: 100%; }

.p-about__figures-body { text-align: center; }
.p-about__figures-img--01 { width: 76%; margin: 0 auto 4vw; aspect-ratio: 587/302; }
.p-about__figures-img--main { width: 100%; aspect-ratio: 604/477; object-fit: cover; border-radius: 4.26667vw; }
.c-rail.--figure { display: none; }

.p-about__history-item { position: relative; margin-top: 13.8667vw; container-type: inline-size; }
.p-about__history-figure { position: absolute; top: 0; left: 0; width: 36.2018cqi; z-index: 0; opacity: .9; }
.p-about__history-inner { position: relative; z-index: 1; width: 55.1929cqi; margin-left: auto; }
.p-about__history-title {
  font-family: var(--ff-jp-heading); font-weight: var(--fw-black);
  letter-spacing: .08em;
  font-size: max(14px, 4.8vw);
  line-height: 1.4;
}
.p-about__history-num {
  font-family: var(--ff-en); font-weight: var(--fw-black);
  font-size: max(32px, 13vw);
  line-height: 1; letter-spacing: -.03em;
  color: var(--cl-navy);
  margin-block: .1em .2em;
}
.p-about__history-num i { font-family: var(--ff-jp); font-style: normal; font-size: max(13px, 3.6vw); font-weight: var(--fw-bold); color: var(--cl-dark); margin-left: .2em; }
.p-about__history-text { font-size: max(13px, 3.4vw); line-height: 1.8; margin-top: 4.26667vw; }

/* =========================================================
   ホクセイの取組み（4カード）
   ========================================================= */
.p-initiative { background: var(--cl-vivid); color: var(--cl-dark); padding-block: 21.3333vw 22.9333vw; position: relative; } /* O-02: 白2.39:1→勝色6.87:1 */
.p-initiative__title {
  /* O-02: color指定を削除しセクション（勝色）から継承 */
  font-family: var(--ff-jp-heading); font-weight: var(--fw-black);
  font-size: max(14px, 8.3vw);
  line-height: 1.3;
  margin-bottom: 11.8694vw;
}
.p-initiative__card-wrapper { overflow: hidden; }
.p-initiative__card-scroll { padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.p-initiative__card-scroll::-webkit-scrollbar { display: none; }
.p-initiative__card-items {
  padding-inline: 5vi;
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: 5.33333vw;
  width: max-content;
}
.p-initiative__card-item {
  background: var(--cl-white); color: var(--cl-dark);
  border-radius: 18px;
  width: 66.1333vw;
  padding: 2.66667vw 4.26667vw;
  display: grid; grid-template-rows: subgrid; grid-row: span 4;
  cursor: pointer; position: relative;
}
.p-initiative__card-ttl {
  font-family: var(--ff-jp-heading); font-weight: var(--fw-black);
  text-align: center;
  display: flex; justify-content: center; align-items: center;
  margin-top: 3.73333vw;
  font-size: max(14px, 5.33333vw);
  line-height: 1.5;
}
.p-initiative__card-img { align-self: center; margin-inline: auto; display: block; }
.p-initiative__card-img.--w1 { width: 30.1333vw; }
.p-initiative__card-img.--w2 { width: 28.8vw; }
.p-initiative__card-img.--w3 { width: 26.6667vw; }
.p-initiative__card-img.--w4 { width: 25.3333vw; }
.p-initiative__card-txt { padding-bottom: 13.3333vw; font-size: max(14px, 3.73333vw); line-height: 1.8; }
.p-initiative__card-icon { position: absolute; bottom: 0; right: 0; width: 10.1333vw; height: 10.1333vw; }

/* =========================================================
   福利厚生・キャリア
   ========================================================= */
.p-welfare { background: var(--cl-vivid); color: var(--cl-dark); padding-block: 21.3333vw; position: relative; overflow: clip; } /* O-02: 白2.39:1→勝色6.87:1（ウォーターマークc-vtextは508行で白のまま） */
.p-welfare__body { display: grid; grid-template: "title title" "text content" 1fr / 16vw 1fr; column-gap: 3vw; }
.p-welfare__c-heading { grid-area: title; }
.p-welfare__heading-wrapper { grid-area: text; position: relative; }
.p-welfare__item-wrapper { grid-area: content; height: max-content; }

.p-welfare__heading { height: 80svh; position: sticky; top: calc(var(--header-height) + (20svh - var(--header-height)) / 2); overflow: hidden; }
.p-welfare__heading-wrap { display: flex; flex-direction: column; margin-left: -20px; }
.p-welfare__heading .c-vtext {
  font-family: var(--ff-en); font-weight: var(--fw-semi-bold);
  font-size: max(14px, 11.7333vw);
  inline-size: max-content;
  color: var(--cl-white);
  opacity: .5;
  animation: loopbottom 30s linear infinite;
}
.p-welfare__img-wrap { display: none; }

.p-welfare__item + .p-welfare__item { margin-top: 15.4667vw; }
.p-welfare__subheading { margin-bottom: 6.66667vw; }
.p-welfare__subheading-number { font-family: var(--ff-en); font-weight: var(--fw-semi-bold); line-height: 1.24; margin-bottom: 15px; }
.p-welfare__subheading-number .--sm { font-size: max(14px, 5.33333vw); }
.p-welfare__subheading-number .--lg { font-size: max(14px, 9.6vw); }
.p-welfare__heading-main {
  font-family: var(--ff-jp-heading); font-weight: var(--fw-black);
  width: max-content;
  font-size: max(14px, 7.1vw);
  line-height: 1.1;
  position: relative;
}
.p-welfare__heading-decoration { position: absolute; }
.p-welfare__heading-decoration.--d1 { width: 8vw; top: -7vw; right: -7vw; } /* O-05: 「る」右上との接触を右上へ逃がす（768px実測でクリアランス4px以上を確保） */
.p-welfare__heading-decoration.--d2 { width: 10vw; top: -9vw; right: -10.5vw; } /* O-05: 「02」との交差を右上へ逃がす（768px実測でクリアランス4px以上を確保） */
.p-welfare__heading-decoration.--d3 { width: 50vw; top: calc(100% + 8px); bottom: auto; left: 0; } /* O-04: 金下線が見出し・ピルを貫通 → 文字ボックスの下へ */
.p-welfare__heading-main--sm { display: block; font-size: max(14px, 4.53333vw); margin-top: 3vw; }
.p-welfare__item-text { margin-bottom: 4vw; font-size: max(14px, 4vw); line-height: 1.8; }
.p-welfare__item-image img { border-radius: 16px; width: 100%; }

/* =========================================================
   Interview & Episode
   ========================================================= */
.p-interview { background: var(--cl-vivid); color: var(--cl-dark); padding-block: 0 26.6667vw; position: relative; } /* O-02: 白2.39:1→勝色6.87:1 */
.p-interview__section { position: relative; container-type: inline-size; padding-top: 8vw; }
.p-interview__img img { border-radius: 16px; width: 100%; }
.p-interview__title { font-family: var(--ff-jp-heading); font-weight: var(--fw-black); margin-block: 7vw 5vw; }
.p-interview__title--lg { font-size: max(14px, 9.49555cqi); line-height: 1.5; margin-bottom: 5.93472cqi; letter-spacing: 0; }
.p-interview__title--sm { font-size: max(14px, 5.93472cqi); padding-left: 5.33333vw; }
.p-interview__text { font-size: max(14px, 3.9vw); line-height: 1.8; }
.p-interview__decorate { position: absolute; width: 16vw; top: 33.3333vw; right: 2.66667vw; }

/* =========================================================
   Message
   ========================================================= */
.p-message { background: var(--cl-vivid); color: var(--cl-white); padding-block: 21.3333vw; }
.p-message__body { padding-inline: 5vi; container-type: inline-size; }
.p-message__header { margin-bottom: 15.4303cqi; }
.p-message__items { position: relative; }
.p-message__item + .p-message__item { margin-top: 21.3333vw; }
.p-message__item-title { display: flex; align-items: center; column-gap: 8.30861cqi; margin-bottom: 8.30861cqi; position: relative; }
.p-message__item-title--number { font-family: var(--ff-en-heading); font-weight: var(--fw-regular); font-size: max(14px, 8.30861cqi); line-height: 1; }
.p-message__item-title--ttl { font-family: var(--ff-jp-heading); font-weight: var(--fw-black); font-size: max(14px, 6.23145cqi); line-height: 1.4; position: relative; }
.p-message__item-title--ttl::after {
  content: ""; position: absolute; top: 10%;
  right: calc(100% + 4.1543cqi);
  width: 1px; height: 50%;
  background: currentColor;
}
.p-message__item-subTtl { font-family: var(--ff-jp-heading); font-weight: var(--fw-black); font-size: max(14px, 5.63798cqi); line-height: 1.5; margin-bottom: 4.1543cqi; }
.p-message__item-text { font-size: max(14px, 4.45104cqi); line-height: 1.8; }
.p-message__item-name { text-align: right; font-family: var(--ff-jp-heading); font-weight: var(--fw-black); font-size: max(14px, 5.04451cqi); margin-top: 4.74777cqi; }
.p-message__item-name span { padding-right: 3vw; display: inline-block; }
.p-message__item-img { margin-top: 6vw; }
.p-message__item-img img { border-radius: 16px; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* O-11: 拡大列に合わせ3:4窓（約285×380px）へ */
.c-rail.--center { display: none; }

/* =========================================================
   フッター ＋ ENTRY
   ========================================================= */
.l-footer { background: var(--cl-bg); padding-top: 17.0667vw; position: relative; }
.l-footer__btn-top { position: absolute; top: -7.33333vw; right: 5vi; width: max-content; rotate: -90deg; }
.l-footer__btn-top .c-box { background: var(--cl-dark); border-radius: 50%; width: 14.6667vw; height: 14.6667vw; }
.l-footer__btn-top .c-box .c-box { background: transparent; width: 100%; height: 100%; }

.l-footer-body__nav-logo { display: flex; align-items: center; gap: 10px; }
.l-footer-body__nav-logo img { width: min(40vw, 150px); }
.l-footer-body__nav-logo span { font-family: var(--ff-en); font-size: max(10px, 2.6vw); letter-spacing: .14em; }
.l-footer-body__nav-main { margin-top: 6vw; display: grid; gap: 3vw; font-size: max(12px, 3.6vw); }
.l-footer-body__nav-main ul { margin-top: 2vw; padding-left: 1em; display: grid; gap: 2vw; opacity: .8; font-size: .92em; }

.l-footer-body__cta { margin-top: 14.9333vw; display: grid; gap: 4vw; }
.l-footer-body__cta-entry {
  color: var(--cl-white);
  background: var(--cl-navy);
  border-radius: 11px;
  padding: 6.4vw 6.4vw 5.33333vw;
  position: relative;
  overflow: hidden;
}
.l-footer-body__cta-entry-heading { display: flex; flex-direction: column; }
.l-footer-body__cta-entry-heading--en { font-family: var(--ff-en); font-weight: var(--fw-black); text-transform: uppercase; font-size: max(14px, 11.7333vw); line-height: 1.2; }
.l-footer-body__cta-entry-heading span { font-size: max(12px, 3.6vw); font-weight: var(--fw-black); letter-spacing: .5px; }
.l-footer-body__cta-entry-copy { margin-top: 6.4vw; padding-right: 16vw; font-size: max(13px, 3.5vw); line-height: 1.8; position: relative; }
.l-footer-body__cta-entry-copy .c-box { position: absolute; bottom: 0; right: 0; }
/* A-07: opacity:.5 を戻していたのは 2751行の @media (min-width:64rem) だけで、
   1024px未満は半透明のまま藍のカード上端をまたいで体の色が変わっていた。
   切り抜き写真が主役という前提に反するので基底から opacity を外し、z-index をここへ移す */
.l-footer-body__cta-entry-people-decorate { position: absolute; width: 36.2667vw; bottom: 32vw; right: 0; z-index: 1; }
.l-footer-body__cta-entry-people { width: 100%; border-radius: 8px; animation: stepRotate2 5s step-end infinite; }
.l-footer-body__cta-entry-people-svg { position: absolute; top: -6%; left: -14%; width: 30%; }

.l-footer-body__cta-default {
  background: var(--cl-white);
  border-radius: 2.13333vw;
  font-weight: var(--fw-black);
  display: flex; justify-content: space-between; align-items: center;
  padding: 5.33333vw 6.4vw;
  font-size: max(14px, 4.26667vw);
}

.l-footer-loop { padding: 24vw 0 8.53333vw; position: relative; }
.l-footer-loop__text {
  background-image: url(../images/deco/footer-loop-text.svg);
  background-repeat: repeat-x;
  background-size: auto 100%;
  /* R-08(1)/Q-03: フッターのループ帯は font-size ではなく背景画像の高さで大きさが決まる。
     同じ趣旨で 23.4667vw に上限を置く（1023px=240px → 92px。1024px側の 7.5vw=76.8px に対し
     1.198倍で連続する。375pxの実効88pxは下回らないので見えは不変） */
  width: 100%; height: min(23.4667vw, 92px);
  animation: loopBgX 2000s linear infinite;
  opacity: .45;
}
.l-footer-loop__char { position: absolute; display: block; }
.l-footer-loop__char img { width: 100%; border-radius: 6px; }
.l-footer-loop__char[data-item="01"] { width: 33.6vw; bottom: 0; left: 6.13333vw; rotate: 6deg; animation: stepRotate 5s step-end infinite; }
.l-footer-loop__char[data-item="02"] { display: none; }
.l-footer-loop__char[data-item="03"] { display: none; }
.l-footer-loop__char[data-item="04"] { width: 35.2vw; bottom: 0; left: 59.4667vw; }
.l-footer-loop__char[data-item="05"] { width: 24.8vw; bottom: 26.6667vw; left: 50.6667vw; }

.l-footer__addr { font-size: max(11px, 3vw); line-height: 1.9; }
.l-footer__copy { margin-top: 6vw; padding-bottom: 8vw; font-family: var(--ff-en); font-size: max(10px, 2.6vw); letter-spacing: .04em; opacity: .7; }

/* =========================================================
   モーダル
   ========================================================= */
.c-modal {
  position: fixed; inset: 0; z-index: 20000;
  background: rgb(0 0 0 / .6);
  display: grid; place-items: center; padding: 5vw;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease-out, visibility .3s ease-out;
}
.c-modal.is-show { opacity: 1; visibility: visible; }
.c-modal__body { background: var(--cl-white); border-radius: 16px; padding: 10vw 6vw; max-width: 720px; width: 100%; max-height: 84svh; overflow-y: auto; position: relative; }
.c-modal__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; gap: 2px; }
.c-modal__close-icon { display: block; width: 24px; height: 24px; position: relative; }
.c-modal__close-icon::before, .c-modal__close-icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 2px; background: var(--cl-dark); }
.c-modal__close-icon::before { rotate: 45deg; } .c-modal__close-icon::after { rotate: -45deg; }
.c-modal__close-txt { font-family: var(--ff-en); font-size: 9px; letter-spacing: .1em; }
.c-modal__content h3 { font-family: var(--ff-jp-heading); font-weight: var(--fw-black); font-size: max(20px, 5.6vw); margin-bottom: 4vw; }
.c-modal__content p { font-size: max(13px, 3.6vw); line-height: 1.9; }
.c-modal__content ul { margin-top: 5vw; display: grid; gap: 2vw; }
.c-modal__content li { position: relative; padding-left: 1.2em; font-size: max(13px, 3.4vw); }
.c-modal__content li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--cl-vivid); }

/* =========================================================
   モーション ―― 無限ループはすべて step-end（中間フレームを描かない）
   ========================================================= */
@keyframes stepRotate  { 0%{transform:rotate(-10deg)} 10%{transform:rotate(-5deg)} 50%{transform:rotate(10deg)} 70%{transform:rotate(3deg)} 100%{transform:rotate(-10deg)} }
@keyframes stepRotate2 { 0%{transform:rotate(-5deg)} 10%{transform:rotate(-5deg)} 50%{transform:rotate(6deg)} 70%{transform:rotate(3deg)} 100%{transform:rotate(-5deg)} }
@keyframes stepRotate3 { 0%{transform:rotate(-2deg)} 10%{transform:rotate(-3deg)} 50%{transform:rotate(1deg)} 70%{transform:rotate(2deg)} 100%{transform:rotate(-2deg)} }
@keyframes stepJump {
  0%{transform:translateY(0)}      10%{transform:translateY(-30px) rotate(-3deg)}
  15%{transform:translateY(0)}     40%{transform:translateY(-50px) rotate(-3deg)}
  45%{transform:translateY(0)}     95%{transform:translateY(-30px) rotate(-3deg)}
  100%{transform:translateY(0)}
}
/* A-02: stepUpDown / stepUpDownRev / stepUpDown2 / stepUpDownRev2 は
   .p-hero__img-decorate 専用だったため、要素の撤去に伴い削除 */
@keyframes loop       { to { transform: translateX(-100%); } }
@keyframes loopbottom { to { transform: translateY(100%); } }
@keyframes loopBgX    { from { background-position: 100000px 0; } to { background-position: 0 0; } }

/* 弾むのは装飾だけ。写真も文字も弾まない */
.js-deco { opacity: 0; transform: scale(.6); transition: opacity .5s ease-out; }
/* R-01: 装飾も要素自身が監視対象。祖先依存をやめる */
.js-deco.is-decorate { opacity: 1; animation: .8s ease-out forwards decoBounce; }
@keyframes decoBounce { 0%{transform:scale(1)} 30%{transform:scale(1.25)} 50%{transform:scale(.9)} 70%{transform:scale(1.1)} 100%{transform:scale(1)} }

/* 参考サイトに本文のフェードインは無い。動くのは装飾とヒーローだけ。 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

}

/* =========================================================
   48rem（768px）以上
   ========================================================= */
@media (min-width: 48rem) {
  .c-box { border-radius: .25vw; width: 1.875vw; height: 1.875vw; }
  .c-box--sm { width: 1.6vw; height: 1.6vw; }
  .c-box--40 { width: 2.5vw; height: 2.5vw; }
  .l-footer__btn-top { top: -2.5625vw; right: 6.25vw; }
  .l-footer__btn-top .c-box { width: 5.125vw; height: 5.125vw; }
}

/* =========================================================
   64rem（1024px）以上 ―― ここから vw が 1600px 基準になる
   ========================================================= */
@media (min-width: 64rem) {
  body { font-size: max(14px, 1.0625vw); line-height: 1.6; }
  .c-wrap { padding-inline: 6.25vi; }

  /* ---- ヒーロー ---- */
 /* O-02: 題字拡大（1440pxで約60px）＋中央空白帯へ下げ第一注視を確定 */
  /* O-01: マーキーはヒーロー外へ移設。cqi はヒーローのコンテナ基準なので外では効かない → 削除 */

  /* A-02: --d03 / --d05c の display:block は要素の撤去に伴い削除 */

  /* ---- 見出し ---- */
  .c-heading { margin-bottom: 3vw; }
  .c-heading--lg { font-size: max(2.5vi, 14px); }
  .c-heading--sm { font-size: max(14px, 1.11vw); }
  .c-rail { display: block; }

  .c-button-primary { column-gap: .75vw; font-size: 1.25vw; margin-top: 2vw; }
  .c-border { padding: .18em 1em; }

  /* ---- ヘッダー ---- */
  .l-header__body { padding-block: 1.2vw; padding-inline: 1.875vw; }
  .l-header__logo a { inline-size: 14.75vw; }
  .l-header__logo img { width: 11vw; }
  .l-header__logo-text { font-size: max(11px, .8vw); }

  /* ---- お知らせ ---- */
  .p-information { padding-block: 7.5vw; }
  .p-information__heading {
    display: block;
    position: absolute; top: 0; left: 0;
    height: 100%; width: 8vw;
    padding-right: 2.5vw;
  }
  .p-information__heading .c-vtext { font-size: 3.75vw; margin-left: 2.4vw; }
  .p-information__heading .c-rail { left: 0; }
  .p-information__heading-decoration { position: absolute; width: 2.625vw; top: 1.2vw; left: 1.1vw; }
  .p-information__body { display: flex; justify-content: space-between; }
  .p-information__body-left { width: 48.6875vw; margin-left: 14.4375vw; container-type: inline-size; }
  .p-information__banner-list { width: 21vw; margin-top: 0; justify-content: flex-end; gap: 1.875vw; }
  .p-information__banner-label { padding: 1vw 1.2vw; font-size: max(12px, .95vw); }
  .p-information__list-item-link {
    display: grid; grid-template-columns: 34.6598cqi minmax(0, 1fr);
    column-gap: 1.625vw; padding-block: 1.5vw; align-items: center;
  }
  .p-information__list-item-sub { display: grid; grid-template-columns: 13.0937cqi minmax(0, 1fr); gap: 16px; }
  .p-information__list-item-date { font-size: max(14px, 2.31065cqi); }
  .p-information__list-item-category { padding-inline: min(1.02696cqi, 8px); font-size: max(14px, 2.18229cqi); line-height: 1; }
  .p-information__list-text { margin-top: 0; font-size: max(14px, 2.18229cqi); }

  /* ---- Company Movie ---- */
  .p-company { padding-top: 108px; padding-bottom: 108px; }   /* R-12(1)/V-05 */
  .p-company__header { display: flex; justify-content: space-between; align-items: flex-end; }
  .p-company__nav { display: flex; }
  .p-company__track { gap: 40px; padding-inline: 32vw; }
  .p-company__card { width: 35.8125vw; }
  .p-company__play-mark { width: 7.375vw; height: 7.375vw; }

  /* ---- ホクセイのこと ＋ 数字 ---- */
  .p-about { padding-block: 6.25vw; }
  .p-about__heading-wrapper {
    grid-template-areas: "content content title" "history figure title";
    grid-template-columns: 32.1429% 54.5714% 1fr;
  }
  .p-about__heading {
    height: 80svh; margin-left: 3.75vw;
    position: sticky;
    top: calc(var(--header-height) + (20svh - var(--header-height)) / 2);
  }
  .p-about__heading .c-vtext { font-size: min(3.5vw, 56px); margin-left: 2.2vw; }
  .p-about__heading .c-rail { left: 0; }

  .p-about__body-top { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 3vw; }
  .p-about__body-top-text { max-width: 37.8571cqi; }
  .p-about__content-title { font-size: max(14px, 2.25vi); line-height: 1.6; margin-bottom: 1.75vw; }
  .p-about__content-text { font-size: max(14px, 1.0625vw); line-height: 1.8; }
  .p-about__content-title--decorate { width: 14.375vw; }
  .p-about__img { margin-top: 0; width: 46.5714cqi; flex-shrink: 0; }
  .p-about__img img { border-radius: 1.3125vw; }

  .p-about__figures { margin-top: 5vw; }
  .p-about__figures-body {
    width: 78.534%; margin-left: auto;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 83vh; position: sticky; top: 15vh;
  }
  .p-about__figures-img--01 { margin-bottom: 1.875vw; object-fit: contain; max-height: 40vh; width: 100%; }
  .p-about__figures-img--main { max-height: 46vh; border-radius: 1.3125vw; }
  .c-rail.--figure { display: block; right: calc(100% + 5vw); left: auto; }

  .p-about__history-item { margin-top: 3.25vw; }
  .p-about__history-item:first-child { margin-top: 0; }
  /* R-03(4)/D-02: 一項目の見出し(32.4px)がABOUTの主題(30.96px)を上回っていた。
     4段の最下段の見出し=24.05px（1440px）に下げる */
  .p-about__history-title { font-size: max(14px, 1.67vw); line-height: 1.5; }
  .p-about__history-num { font-size: max(32px, 3.6vw); }
  .p-about__history-num i { font-size: max(13px, 1.05vw); }
  .p-about__history-text { font-size: max(14px, 1.0625vw); margin-top: 1vw; }

  /* ---- 取組み ---- */
  .p-initiative { padding-block: 7.5vw; }
  .p-initiative__title { font-size: max(14px, 3.75vw); line-height: 1.6; margin-bottom: 3.625vw; }
  .p-initiative__card-items { padding-inline: 0; column-gap: 1.875vw; width: 87.5vw; margin-inline: auto; }
  .p-initiative__card-item { width: 20.375vw; padding: 1.4375vw; border-radius: 18px; }
  .p-initiative__card-ttl { margin-top: .9375vw; font-size: max(14px, 1.25vw); }
  .p-initiative__card-img { margin-bottom: 1.3125vw; }
  .p-initiative__card-img.--w1 { width: 8vw; }
  .p-initiative__card-img.--w2 { width: 10.3125vw; }
  .p-initiative__card-img.--w3 { width: 9.125vw; }
  .p-initiative__card-img.--w4 { width: 7.4375vw; }
  .p-initiative__card-txt { padding-bottom: 2.5vw; padding-inline: .75vw; font-size: max(14px, 1.0625vw); }
  .p-initiative__card-icon { width: 2.25vw; height: 2.25vw; }

  /* ---- 福利厚生 ---- */
  .p-welfare { padding-block: 6vw 7.5vw; }
  .p-welfare__body { grid-template: "text title" "text content" 1fr / 11.875vw 72.6875vw; column-gap: 2.14286vw; }
  /* R-11(2)/D-06: 第1列（171px＋gap30.9px）がゴースト縦文字の逃げ場になり、
     CAREERの本文左端だけ292px（他6セクションは90px）で下げ止まって見えていた。
     縦文字を画面左端へ半分抜けさせ、本文を90pxに戻す。
     .p-welfare__body の左端は c-wrap の90px。left:-198px で縦文字の矩形は
     画面座標 x=-108〜90 となり本文（x=90〜）とインクが1pxも交差しない＝造形第1条を満たす。
     .p-welfare は538行で overflow:clip なので横スクロールは出ない。
     ※不透明度で本文の下に潜らせる案は「装飾は文字と交差しない」を言い訳する形になるため採らない */
  .p-welfare__body { position: relative; grid-template: "title" "content" / 1fr; }
  .p-welfare__heading-wrapper {
    position: absolute; top: 0; bottom: 0;
    left: -198px; width: 198px;
    z-index: 0; pointer-events: none;
  }
  .p-welfare__heading .c-vtext { font-size: max(14px, 8vw); }
  .p-welfare__heading-wrap { margin-left: -1.875vw; }
  /* O-10: .p-welfare__img-wrap / -inner / -item の意匠指定は削除。
     縦ループ装飾（BENEFIT / CAREER）と完全に交差しており、退避できる空きが
     31pxしかないため写真自体を外した（末尾の display:none が最終判断） */
  .p-welfare__item { display: grid; grid-template: "title image" "text image" 1fr / 27.625vw minmax(0, 1fr); column-gap: 3.125vw; align-items: start; }
  .p-welfare__item[data-direction="reverse"] { grid-template: "image title" "image text" 1fr / minmax(0, 1fr) 27.625vw; }
  .p-welfare__subheading { grid-area: title; margin-bottom: 2.5vw; }
  .p-welfare__item-text { grid-area: text; margin-bottom: 2.1875vw; font-size: max(14px, 1.0625vw); line-height: 1.6; }
  .p-welfare__item-image { grid-area: image; }
  .p-welfare__item + .p-welfare__item { margin-top: 4.6875vw; }
  .p-welfare__subheading-number .--sm { font-size: max(14px, 2vw); }
  .p-welfare__subheading-number .--lg { font-size: max(14px, 3.25vw); }
  /* R-03(3)/D-02: 4段の最上位（48.2px @1440px） */
  .p-welfare__heading-main { font-size: max(14px, 3.35vw); }
  .p-welfare__heading-main.--03 { display: flex; align-items: center; column-gap: 1.5vw; }
  .p-welfare__heading-main--sm { font-size: max(14px, 1.0625vw); margin-top: 0; }
  .p-welfare__heading-decoration.--d1 { width: 2.5vw; top: -2vw; right: -2.2vw; } /* O-05: グリフとのクリアランス確保 */
  .p-welfare__heading-decoration.--d2 { width: 3.3125vw; top: -3.3vw; right: -3.4vw; } /* O-05: 1440pxで「る」右肩とのクリアランス2px→8px以上に外へ退避 */
  .p-welfare__heading-decoration.--d3 { width: 16.0625vw; top: calc(100% + 8px); bottom: auto; left: 0; } /* O-04: 文字ボックスの下へ */
  .p-welfare__item-image img { border-radius: 2vw; }

  /* ---- Interview ---- */
  .p-interview { padding-bottom: 7.875vw; }
  .p-interview__section {
    display: grid;
    grid-template: "image title" "image text" 1fr / 64.8571% minmax(0, 1fr);
    column-gap: 4.78571%;
    padding-top: 7.1875vw;
    align-items: start;
  }
  .p-interview__img   { grid-area: image; }
  .p-interview__title { grid-area: title; margin-block: 0 2.5vw; }
  .p-interview__text  { grid-area: text; font-size: max(14px, 1.0625vw); line-height: 1.6; }
  .p-interview__img img { border-radius: 28px; }
  .p-interview__title--lg { font-size: clamp(14px, 3.75vw, 44px); margin-bottom: 1.25vw; }
  .p-interview__title--sm { font-size: max(14px, 1.5vw); padding-left: 1.625vw; }
  /* R-04(1)/V-04: 金のブラケットが集合写真の内側に載り、女性の髪の生え際に接触していた。
     基準は .p-interview__section（左端=c-wrapの90px）。left:-82px で装飾は画面 x=8〜82 に出て、
     写真 [90,907] とも右のテキスト列 [967〜] とも交差しない
     （写真右の隙間60pxには装飾幅74pxが入らないため右側は使えない） */
  .p-interview__decorate { width: min(5.125vw, 82px); top: min(12.5vw, 190px); right: auto; left: -82px; }

  /* ---- Message ---- */
  .p-message { padding-block: 7.5vw; }
  .p-message__body { width: 87.5vw; margin-inline: auto; padding-inline: 0; }
  .p-message__header { margin-bottom: 5.57143cqi; }
  .p-message__items { display: flex; justify-content: space-between; }
  /* O-11: 画像列16.3→22cqi(約285px)へ拡大し、締めの山場で顔が判別できるサイズに */
  .p-message__item { display: grid; grid-template: "title title" "text image" 1fr / 24cqi 22cqi; column-gap: 2.14286cqi; align-items: start; }
  /* O-11: 02採用担当を写真左・文右に反転し、同一構図の反復を崩して交互リズムを作る。
     .p-message__items の第1子は c-rail のため nth-child(2) では01に誤適用 → nth-of-type(2)（div基準）で02を指す */
  .p-message__item:nth-of-type(2) { grid-template-areas: "title title" "image text"; grid-template-columns: 22cqi 24cqi; }
  .p-message__item + .p-message__item { margin-top: 0; }
  .p-message__item-title { grid-area: title; column-gap: 4.5cqi; margin-bottom: 3.85714cqi; }
  .p-message__item-text  { grid-area: text; font-size: max(14px, 1.21429cqi); line-height: 1.6; }
  .p-message__item-img   { grid-area: image; margin-top: 0; }
  .p-message__item-img img { border-radius: 20px; }
  .p-message__item-title--number { font-size: max(14px, 3.25vw); line-height: 1.6; }
  .p-message__item-title--ttl { font-size: max(14px, 2.25vw); line-height: 1.6; }
  .p-message__item-title--ttl::after { right: calc(100% + 1.3125vw); }
  .p-message__item-subTtl { font-size: max(14px, 2cqi); margin-bottom: 1.14286cqi; }
  .p-message__item-name { text-align: left; font-size: max(14px, 1.42857cqi); margin-top: 2.14286cqi; }
  .p-message__item-name span { padding-right: 1vw; }
  .c-rail.--center { display: block; width: 10px; margin-inline: auto; left: 0; right: 0; }

  /* ---- フッター ---- */
  .l-footer { padding-top: 6.25vw; }
  .l-footer-body { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .l-footer-body__nav { width: 33.75vw; }
  /* O-06: gridの行高共有でサブリスト持ちliが行を103pxに伸ばし行抜けに見えていた → カラム流し込みへ */
  .l-footer-body__nav-main { margin-top: 2.5vw; display: block; columns: 2; column-gap: 2vw; font-size: max(12px, .95vw); }
  .l-footer-body__nav-main > li { break-inside: avoid; margin-bottom: 1.2vw; }
  .l-footer-body__nav-main ul { margin-top: .5vw; gap: .55vw; } /* O-06: サブ項目間隔 28.8px→約8px */
  .l-footer-body__cta { margin-top: 3vw; grid-template-columns: repeat(2, 1fr); gap: 1.5vw 1.25vw; width: 43vw; height: fit-content; }
  .l-footer-body__cta-entry { grid-area: 1 / 1 / 2 / 3; padding: 2vw; }
  .l-footer-body__cta-entry-heading--en { font-size: max(14px, 3.75vw); }
  .l-footer-body__cta-entry-heading span { font-size: max(14px, 1.25vw); }
  .l-footer-body__cta-entry-copy { margin-top: 1.625vw; padding-right: 3.75vw; font-size: max(14px, 1vw); }
  .l-footer-body__cta-entry .c-box { width: 2.5vw; height: 2.5vw; }
  .l-footer-body__cta-entry-people-decorate { width: 14.375vw; bottom: 1.5vw; right: 1.5vw; }
  .l-footer-body__cta-default { margin-top: 0; padding: 1.4375vw 1.5vw; font-size: max(14px, 1.25vw); border-radius: .75vw; }

  .l-footer-loop { padding: 8.125vw 0 3.5vw; }
  .l-footer-loop__text { height: 7.5vw; }
  .l-footer-loop__char[data-item="01"] { width: 12.8125vw; left: 10.625vw; rotate: 0deg; }
  .l-footer-loop__char[data-item="02"] { display: block; width: 9.875vw; bottom: 6.25vw; left: 36.0625vw; }
  .l-footer-loop__char[data-item="03"] { display: block; width: 9.9375vw; bottom: 1.25vw; left: 55.9375vw; rotate: 8deg; animation: stepRotate 5s step-end 2s infinite; }
  .l-footer-loop__char[data-item="04"] { width: 14.375vw; bottom: 2.5vw; left: 77.3125vw; }
  .l-footer-loop__char[data-item="05"] { display: none; }
  .l-footer__addr { font-size: max(11px, .82vw); }
  /* O-05(design V-06): 基底の max(10px,2.6vw) がdesktopで37.4pxまで肥大し
     住所11.8pxとヒエラルキーが逆転していた → 法的表記は住所と同格の13pxへ */
  .l-footer__copy { margin-top: 3vw; padding-bottom: 3vw; font-size: 13px; }

  .c-modal__body { padding: 4vw 3.5vw; }
  .c-modal__content h3 { font-size: max(20px, 2vw); margin-bottom: 1.5vw; }
  .c-modal__content p { font-size: max(14px, 1.0625vw); }
  .c-modal__content ul { margin-top: 2vw; gap: .6vw; }
  .c-modal__content li { font-size: max(14px, 1vw); }
}

/* =========================================================
   80rem（1280px）以上 ―― ここでナビが横並びになる
   参考サイトはここが閾値。1024〜1279px はハンバーガー。
   ========================================================= */
@media (min-width: 80rem) {
  .l-header__body { padding-block: 1.5vw; padding-inline: 1.875vw; }
  .l-header__nav { display: block; width: auto; position: static; }
  .l-header__nav-inner { display: flex; align-items: center; }
  /* R-06: SPドロワーの高さを持たせるために挟んだラッパを、PC横並びでは無いものとして扱う */
  .l-header__nav-body { display: contents; }
  .l-header__nav-list--main { display: flex; column-gap: 28px; padding: 0; }
  .l-header__nav-list--main a { padding-block: 0; color: var(--cl-dark); font-weight: var(--fw-semi-bold); font-size: max(14px, 1.0625vw); }
  .l-header__nav-list--sub { display: flex; column-gap: 12px; margin-left: 27px; padding: 0; }
  .l-header__nav-list--sub a {
    border: 2px solid var(--cl-gray2);
    border-radius: 1.25vw;
    padding: .375vw 1vw;
    color: var(--cl-dark);
    font-size: max(14px, 1.0625vw);
    transition: background-color .3s, border-color .3s, color .3s;
  }
  @media (any-hover: hover) {
    .l-header__nav-list--sub a:hover { background: var(--cl-dark); border-color: var(--cl-dark); color: var(--cl-white); }
  }
  .l-header__nav-entry { margin-left: 12px; margin-right: 0; }
  .l-header__nav-entry a { border-radius: 1.25vw; padding: .4375vw 1.375vw; font-size: max(14px, 1.15vw); }
  .l-header__humburger { display: none; }
}


/* =========================================================
   ヒーローの手描きラベル
   参考サイトの Sales / Office Work / Loan Services にあたる。
   勢い線3本は疑似要素で描く（SVGファイルを増やさない）。
   ========================================================= */


@media (min-width: 64rem) {


  /* 手書き英文は写真の外・地の上に置く（参考サイトも地の上にある） */


  /* 動画カードは3枚見える幅に（参考サイトも3枚前後が見えている） */
  .p-company__track { padding-inline: 12vw; }
}


/* 手書き英文は地の上に置く（参考サイトも写真ではなく地の上にある） */

@media (min-width: 64rem) {

  /* O-10は見送り: 現行構図（2526行〜で再構成）は下端帯を人物写真(--i01/--i03/--i05/--i07)と
     マーキーが占有しており、右下移動は実測で --i05（人物の顔）とマーキーに衝突する。
     幅7.5cqi縮小のフォールバックでも衝突が解消しないため、装飾×人物非交差の規約を優先 */
}


/* =========================================================
   参考サイトに合わせた追加のモーション
   ========================================================= */
@keyframes opacityUp { 0% { opacity: 0 } to { opacity: 1 } }

/* O-10: 「縦ループ英字に重なる装飾写真」は第1条違反そのものだったので写真ごと削除。
   その animation 指定も残さない */

/* ---------------------------------------------------------
   スクロールヒント（横スクロールできることを示す指標）
   参考: #bababa の半透明面＋白アイコン＋文言。2.5秒後に消える。
   --------------------------------------------------------- */
.c-scroll-hint {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;
  transition: opacity .3s 2.5s, visibility .3s 2.5s;
}
.c-scroll-hint.is-scroll-hint { opacity: 0; visibility: hidden; }
.c-scroll-hint-bg { position: absolute; inset: 0; pointer-events: none; }
.c-scroll-hint-bg::after {
  content: ""; position: absolute; inset: 0;
  background-color: #bababa; opacity: .8; z-index: 2;
}
.c-scroll-hint-inner {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  row-gap: 2.1vw;
  color: var(--cl-white);
  pointer-events: none;
}
.c-scroll-hint-img {
  display: block; width: 8.53333vw; aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 6a6 6 0 0 1 6 6v9h-4v-9a2 2 0 0 0-4 0v9h-4v-9a6 6 0 0 1 6-6z'/%3E%3Cpath d='M14 20h20a8 8 0 0 1 8 8v6a10 10 0 0 1-10 10h-8a10 10 0 0 1-10-10v-6a8 8 0 0 1 8-8z' opacity='.55'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 6a6 6 0 0 1 6 6v9h-4v-9a2 2 0 0 0-4 0v9h-4v-9a6 6 0 0 1 6-6z'/%3E%3Cpath d='M14 20h20a8 8 0 0 1 8 8v6a10 10 0 0 1-10 10h-8a10 10 0 0 1-10-10v-6a8 8 0 0 1 8-8z' opacity='.55'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: scrollHintLeftRight 1.5s ease-in-out infinite;
}
.c-scroll-hint-inner-text { font-size: 2.93333vw; font-weight: var(--fw-black); }
@keyframes scrollHintLeftRight {
  0%   { opacity: 1; transform: translate(.5016%) }
  80%  { opacity: 1 }
  100% { opacity: 0; transform: translate(-50%) }
}
/* 横スクロールが起きない幅では出さない */
@media (min-width: 64rem) {
  .p-initiative__card-scroll .c-scroll-hint { display: none; }
  .c-scroll-hint-img { width: 3vw; }
  .c-scroll-hint-inner-text { font-size: 1.1vw; }
}


/* =========================================================
   写真の縦横比を参考サイトの実測に合わせる
   参考実測(1440px): About 587×400 / 福利 604×382 / Episode 817×515 /
   Message 205×257 / 動画 516×292
   素材のアスペクトに引きずられないよう固定する。
   ========================================================= */
.p-about__img img       { aspect-ratio: 587 / 400; object-fit: cover; width: 100%; }
.p-welfare__item-image img { aspect-ratio: 604 / 382; object-fit: cover; width: 100%; }
.p-interview__img img   { aspect-ratio: 817 / 515; object-fit: cover; width: 100%; }
.p-information__banner-item img { aspect-ratio: 672 / 408; object-fit: cover; }

/* 見出しは h3/h4 の既定 bold(700) に負けるので明示する */
/* R-14(1)/Q-06: この明示が3行後の .c-heading--lg { --fw-regular } で自分自身に潰され、
   さらに1347/1486行に後勝ちされて --fw-black は一度も適用されていなかった。
   意図を --fw-black(800) に確定させ、勝者ゼロの宣言（--fw-regular / 500 / --fw-semi-bold）を畳む。
   .c-heading--lg はこのグループから外して1486行で単独指定する（読み手に紛らわしいため） */
.p-about__content-title, .p-about__history-title,
.p-initiative__card-ttl, .p-welfare__heading-main, .p-interview__title--lg,
.p-message__item-title--ttl, .p-message__item-subTtl { font-weight: var(--fw-black); }

/* 縦ループ英字: 参考は wrap を -50% ずらして無限に繋げる */
.p-welfare__heading-wrap { transform: translateY(-50%); }


/* =========================================================
   数字7項目 ―― 参考サイトの実測配置をそのまま移植
   ---------------------------------------------------------
   参考実測(1440px、列幅405px、列左端 x=90):
   #1 絵@0 w147 / 文字群@189 w216
   #2 文字群@0 w266 / 絵@232 w173
   #3 絵@-27(列の外へ) w156 / 題@169 縦組み / 数字・文@169 w236
   #4 題@0 縦組み / 数字・文@48 w200 / 絵@243 w162
   #5 絵@-12 w161 / 数字・文@161 w202 / 題@370 縦組み
   #6 絵@0 w221 / 数字・題@249 w156 / 文@0 w221
   #7 数字@0 w388 / 絵@0 w405（全幅）
   ＝ 項目ごとに絵が左右へ振れ、3項目は題が縦組みになる。
      この不均等さが「コラージュ」の正体で、均等グリッドでは出せない。
   ========================================================= */
@media (min-width: 64rem) {
  .p-about__history-item { position: relative; container-type: inline-size; }
  .p-about__history-figure { position: absolute; z-index: 0; opacity: .95; }
  .p-about__history-inner  { position: relative; z-index: 1; margin: 0; }
  .p-about__history-title  { position: relative; }

  /* O-13: 同じ役割のラベルが4通りの組み方・7通りの左端になっていた（＝事故に見える）。
     ・見出しは7項目とも横組みに統一（--n03/--n04/--n05 の縦組み指定を削除）
     ・.p-about__history-inner の左基準線を「イラストが左＝41.7% / 右＝0」の2値へ
     ・幅も 53.3%（横にイラストが並ぶ）と 100%（イラストが上下に並ぶ #7）の2値へ */

  /* #1 絵が左、文字が右 */
  .--n01 .p-about__history-figure { left: 0;     top: 8%;  width: 36.3%; }
  .--n01 .p-about__history-inner  { margin-left: 41.7%; width: 53.3%; }

  /* #2 文字が左、絵が右 */
  .--n02 .p-about__history-figure { left: 57.3%; top: 0;   width: 42.7%; }
  .--n02 .p-about__history-inner  { margin-left: 0;    width: 53.3%; }

  /* #3 絵が列の外へはみ出し、文字群は右 */
  .--n03 .p-about__history-figure { left: -6.7%; top: 6%;  width: 38.5%; }
  .--n03 .p-about__history-inner  { margin-left: 41.7%; width: 53.3%; }

  /* #4 文字が左、絵が右 */
  .--n04 .p-about__history-figure { left: 60%;   top: 0;   width: 40%; }
  .--n04 .p-about__history-inner  { margin-left: 0;    width: 53.3%; }

  /* #5 絵が左外、文字群は右 */
  .--n05 .p-about__history-figure { left: -3%;   top: 10%; width: 39.8%; }
  .--n05 .p-about__history-inner  { margin-left: 41.7%; width: 53.3%; }

  /* #6 絵が左で大きく、数字と題が右 */
  .--n06 .p-about__history-figure { left: 0;     top: 34%; width: 54.6%; }
  .--n06 .p-about__history-inner  { margin-left: 41.7%; width: 53.3%; }
  .--n06 .p-about__history-text   { margin-left: -64.7%; width: 54.6%; margin-top: 9vw; }

  /* #7 絵が全幅、数字がその上 */
  /* O-12(visual V-03): 本文とイラストの余白6〜8pxは「装飾は文字と交差しない」の
     安全余白として最小 → top 34%→38%でクリアランス16px以上を確保 */
  .--n07 .p-about__history-figure { left: 0;     top: 38%; width: 84%; }
  /* O-13: 幅を2値に丸める（絵は上下に並ぶ項目）。
     ただし 100% だと右端 x495 が縦ドットレール（x495-504）に接するので、
     padding で 18px の安全余白を内側に取る */
  .--n07 .p-about__history-inner  { margin-left: 0;    width: 100%; padding-right: 18px; }

  /* 項目の縦間隔（参考は 3.25vw） */
  /* 項目の高さも参考実測に合わせる。
     参考(1440px): 248 / 197 / 238 / 212 / 187 / 304 / 381 px
     ＝ 列全体で 2,046px。figure列(2,053px)と釣り合い、空白が出ない。 */
  .p-about__history-item { margin-top: 3.25vw; }
  .--n01 { min-height: 17.2vw; }
  .--n02 { min-height: 13.7vw; }
  .--n03 { min-height: 16.5vw; }
  .--n04 { min-height: 14.7vw; }
  .--n05 { min-height: 13.0vw; }
  .--n06 { min-height: 21.1vw; }
  .--n07 { min-height: 26.5vw; padding-bottom: 2vw; }
  .p-about__history-item:first-child { margin-top: 0; }
}


/* =========================================================
   参考サイトに合わせた残りの動き
   ========================================================= */

/* ① 点線レールも sticky（参考実測: position:sticky / height 80svh）
   親が sticky でない figure 列側のレールが対象。 */
@media (min-width: 64rem) {
  .c-rail.--figure {
    position: sticky;
    top: calc(var(--header-height) + (20svh - var(--header-height)) / 2);
    height: 80svh;
    /* O-14(1): inset-block は inset-block-start/-end のショートハンドなので
       直前の top を後勝ちで auto に戻し、sticky が一切効いていなかった。
       解除したいのは bottom だけなので inset-block-end に限定する */
    inset-block-end: auto;
    float: right;
  }
}

/* ② Swiper（参考と同じ 11 系）。scroll-snap をやめ、ドラッグ・慣性・無限ループへ */
.p-company__scroller { overflow: hidden; scroll-snap-type: none; }
.p-company__track { width: auto; padding-inline: 0; }
.p-company__slide { width: 81.3333vw; height: auto; }
.p-company__card { width: 100%; }
@media (min-width: 64rem) {
  .p-company__slide { width: 35.8125vw; }
}


/* =========================================================
   「ホクセイのこと」の対比スクロールを成立させる
   ---------------------------------------------------------
   参考実測: figure列 2,053px / 数字列 2,046px と同じ高さを持ち、
   その中で figure本体（747px = 83vh）が sticky で貼り付く。
   figure列が中身分の高さしか無いと、貼り付く距離が尽きて
   下に大きな空白が残る ―― それが今の症状だった。
   ========================================================= */
@media (min-width: 64rem) {
  /* figure列はグリッド行いっぱいに伸ばす。中の figure本体だけが 83vh で貼り付く。
     flex を使うと flex-basis が height:83vh を上書きしてしまうので使わない。 */
  .p-about__heading-wrapper > .p-about__figures { height: 100%; align-self: stretch; }
  /* 縦見出しは列を伸ばし、中の柱だけを貼り付かせる（親の sticky は外す） */
  .p-about__heading { align-self: stretch; height: auto; position: static; }
  .p-about__heading .c-vtext {
    position: sticky;
    top: calc(var(--header-height) + (20svh - var(--header-height)) / 2);
    height: 80svh;
  }
  .p-about__heading-decoration { top: 1.2vw; }
}


/* =========================================================
   ホクセイの造形（丸角ベース）
   ---------------------------------------------------------
   面は丸角の長方形を基本にする。角の半径は要素の大きさで3段階。
   北前船（航路・帆）はアクセントとしてだけ使い、面の形には持ち込まない。
   ========================================================= */
:root {
  --r-lg: 24px;   /* 写真・大きなカード */
  --r-md: 16px;   /* 中カード・バナー */
  --r-sm: 10px;   /* タグ・小さな操作要素 */
  --r-pill: 999px;
  --punch-pitch: 22px;
}
@media (min-width: 64rem) { :root { --r-lg: 28px; --r-md: 20px; --r-sm: 12px; } }

.p-about__img img,
.p-welfare__item-image img,
.p-interview__img img,
.p-message__item-img img,
.p-company__card,
.l-footer-body__cta-entry,
.c-modal__body { border-radius: var(--r-lg); }

.p-information__banner-item,
.p-initiative__card-item,
.l-footer-body__cta-default,
.l-header__body { border-radius: var(--r-md); }

.l-header__nav-entry a,
.l-header__nav-list--sub a,
.p-information__list-item-category,
.c-border { border-radius: var(--r-pill); }

.c-box { border-radius: var(--r-sm); }

/* --- 航路線。北前船のアクセント。画面を横断し両端で切れない --- */

.p-about__route {
  position: absolute; left: -4%; top: 6%; width: 108%;
  z-index: 0; pointer-events: none; opacity: .7;
}
.p-about { position: relative; overflow: clip; }

/* --- 地は打ち抜き（アルミ板の孔）。レールも孔の列 --- */
.c-rail[data-color="white"] .c-rail__line { background-image: url(../images/deco/punch-col-white.svg); }
.c-rail[data-color="white"] .c-rail__cap  { background-image: url(../images/deco/cap-white.svg); }
.c-rail[data-color="aqua"]  .c-rail__line { background-image: url(../images/deco/punch-col-aqua.svg); }
.c-rail[data-color="aqua"]  .c-rail__cap  { background-image: url(../images/deco/cap-aqua.svg); }
.c-rail__line { width: 4px; background-size: 4px var(--punch-pitch); }
.c-rail__cap  { width: 10px; height: 10px; border-radius: 50%; }

.p-information, .p-welfare {
  background-image:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .10) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .10) 0 1.4px, transparent 2.1px);
  background-size:
    var(--punch-pitch) calc(var(--punch-pitch) * 1.7320508),
    var(--punch-pitch) calc(var(--punch-pitch) * 1.7320508);
  background-position: 0 0, calc(var(--punch-pitch) / 2) calc(var(--punch-pitch) * .8660254);
}

/* --- 英字は幾何書体（この層はタイポグラファの指定で上書きされる） --- */
/* R-14(1)/Q-06: font-weight は1486行に後勝ちされる死に宣言だったので削除 */
.c-heading--lg { font-family: var(--ff-en-heading); letter-spacing: .14em; text-transform: uppercase; }
.c-heading--sm { font-family: var(--ff-en); letter-spacing: .2em; text-transform: uppercase; font-size: max(11px, .78vw); }

.p-about__history-num { letter-spacing: 0; }
.p-about__history-num i { color: var(--cl-vivid); }


/* =========================================================
   TYPOGRAPHY v3 ―― ホクセイプロダクツ 採用サイトの型指定
   ---------------------------------------------------------
   ★ echishin.css の「末尾」に追記する。既存の型指定（1253行目以降の
     英字ブロックを含む）を同詳細度の後勝ちで上書きする設計。
     @media (min-width: 64rem) の既存指定を打ち返すため、
     このブロックの最後にも同条件のメディアクエリを置いてある。

   書体は3ファミリー（上限4のところ3本）。
   ① Noto Sans JP     可変 wght 400–800 … 和文のすべて（本文・見出し・縦組み）
   ② Zen Old Mincho   900 のみ          … 明朝。ヒーローのコピーと Message のセリフだけ
   ③ Instrument Sans  可変 wght 400–700 … 欧文と数字のすべて

   <head> の <link> を次の1行に差し替える（preconnect 2行はそのまま）:
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&family=Noto+Sans+JP:wght@400..800&family=Zen+Old+Mincho:wght@900&display=swap" rel="stylesheet">

   ※ HTML の変更が2箇所必要（index.html 313行・330行）。CSS末尾の 15. を参照。
   ========================================================= */

:root {
  /* ---- 書体：既存トークン名は維持し、値だけ差し替える ----
     和文スタックの先頭に Instrument Sans を置く。本文中の英数字だけ
     Instrument Sans が拾い、和文は Noto Sans JP が受け持つ ―― 混植の基本形。 */
  --ff-jp:         "Instrument Sans", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  /* 見出しも和文はゴシックのまま。明朝は下の --ff-jp-display で2箇所だけに使う。 */
  --ff-jp-heading: var(--ff-jp);
  --ff-en:         "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-en-heading: var(--ff-en);

  /* ---- 追加トークン ---- */
  /* 明朝。使ってよいのは「白抜き・24px以上・その人が口に出した一文」だけ。 */
  --ff-jp-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  /* 数字枠。中身が和文になる箇所（少数精鋭）があるので Noto Sans JP を必ず含める。 */
  --ff-num:        "Instrument Sans", "Noto Sans JP", "Hiragino Sans", sans-serif;

  /* ---- ウェイト（body 600 をやめ、5段の階段にする） ---- */
  --fw-regular:    400;   /* 本文（生成り地） */
  --fw-medium:     500;   /* 本文（浅葱・藍の地＝白抜き）／UI／キャプション */
  --fw-semi-bold:  600;   /* 欧文ラベル・欧文見出し */
  --fw-bold:       700;   /* 小見出し・数字 */
  --fw-black:      800;   /* 大見出し（和文のみ。欧文は700で頭打ちになる） */
  --fw-mincho:     900;   /* Zen Old Mincho は900の1ウェイトだけ読む */

  /* ---- 行間：文字が大きくなるほど詰める ---- */
  --lh-display: 1.45;   /* 32px超のコピー */
  --lh-heading: 1.5;    /* 24–32px の見出し */
  --lh-sub:     1.6;    /* 18–24px の小見出し */
  --lh-body:    1.8;    /* 和文本文（SP・1行20字前後） */
  --lh-body-pc: 1.75;   /* 和文本文（PC・1行26字前後。1.6は窮屈、1.8は広い） */
  --lh-ui:      1.5;    /* ナビ・ボタン・タグ */
  --lh-num:     1;      /* 数字だけの行 */

  /* ---- 字送り ---- */
  --ls-body:     .02em;   /* 既存は .03em。halt との合わせで行長は現行比 +1.5%。
                             現行の改行位置をそのまま保ちたいなら .01em にする */
  --ls-heading:  .02em;
  --ls-display:  .02em;
  --ls-en-label: .10em;   /* 欧文オールキャップスのラベル（.16em は溢れる。実測済み） */
  --ls-num:     -.01em;
  --ls-vert:     .10em;   /* 縦組み */

  /* ---- OpenType ----
     ★Google が配信する woff2 を実測して確かめた（40px 組み・同一文字列）:
       Noto Sans JP            palt 1 で -7.6% / halt 1 で -5.2%  ← 効く
       M PLUS 2 / Murecho / Zen Kaku Gothic New / Zen Maru Gothic /
       Zen Kaku Gothic Antique / IBM Plex Sans JP / Zen Old Mincho /
       Shippori Mincho B1      palt・halt とも 1px も動かない  ← 入っていない
       （IBM Plex Sans JP と Klee One だけ halt が効く）
     つまり「見出しは palt で詰める」を成立させられる和文は Noto Sans JP だけ。
     本文は halt 1（約物だけ詰め、仮名はベタ組み）、見出しは palt 1（全体を詰める）に分ける。 */
  --fs-body:  "halt" 1, "kern" 1;   /* 本文：約物だけ詰める */
  --fs-tight: "palt" 1, "kern" 1;   /* 見出し・コピー：全体を詰める */
  --fs-kern:  "kern" 1;
  --fs-num-prop: "kern" 1;   /* 単独で大きく見せる数字 */
  --fs-num-tab:  "kern" 1;   /* 並べて揃える数字 */
}

/* =========================================================
   1. 基本
   ========================================================= */
body {
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);          /* 600 → 400。長文が黒く沈まない */
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  /* 本文は halt 1。約物（、。・）だけを詰め、仮名はベタ組みのまま残す。
     palt 1 を本文に掛けると仮名まで動いて長文の可読性が落ちる。 */
  font-feature-settings: var(--fs-body);
  font-variant-numeric: lining-nums proportional-nums;
  text-spacing-trim: trim-start;           /* 行頭の括弧のアキを詰める（非対応は無視） */
  font-synthesis-weight: none;             /* 偽ボールドを禁止 */
}

/* 浅葱・藍の地では白文字が光学的に痩せる。本文だけ +1段（400→500）で見えを揃える */
.p-information__list-text,
.p-initiative__card-txt,
.p-welfare__item-text,
.p-welfare__item-text p,
.p-interview__text,
.p-message__item-text,
.l-footer-body__cta-entry-copy { font-weight: var(--fw-medium); }

/* =========================================================
   2. 共通パーツ
   ========================================================= */

/* --- 欧文セクション見出し（Information / About / Career …） ---
   ★SP の font-size を必ず持たせる。最長は "Interview & Episode"。
     text-transform: uppercase が掛かるので、実際に組まれるのは
     "INTERVIEW & EPISODE"（大文字は小文字より広い。前案の見積りはここを外していた）。

     実測（Instrument Sans 600 / letter-spacing .10em / 32px 組み）
       INTERVIEW & EPISODE  415.8px
       COMPANY MOVIE        318.0px   ← 2番目に長い
     375px 幅の可使用幅は 375 - 5vi*2 = 337.5px。

     7.4vw を採用した結果（実ページを 3幅で読み込んで計測。scrollWidth 差はすべて 0）:
       375px  27.75px  6件は1行 / INTERVIEW & EPISODE のみ2行（最長行 180px）
       390px  28.86px  同上（最長行 187px）
       414px  30.64px  同上（最長行 198px）
     ＝ 7本の見出しのうち1本だけが2行になる。text-wrap: balance で
       "INTERVIEW &" / "EPISODE" に均等割りされ、はみ出しはゼロ。
     ※ 参考:現行（Oswald 500 / .14em / 8.53vw）は 357.4px で、
       これも 375px では2行になっている。加えて .c-heading--sm が
       画面外（右端 376px）に押し出されて消えていた。そちらは下で直す。
     ※ どうしても1行に収めるなら 6.6vw（24.75px）まで下げる必要がある。
       7本中6本を 25% 小さくして1本を救う取引になるので採らなかった。 */
.c-heading--lg {
  font-family: var(--ff-en-heading);
  /* R-14(1)/Q-06: ここが唯一の勝者。R-03(1)で36→28pxに落とすので、600のままだと
     欧文ラベルが痩せる。意図どおり800にして小さくても密度を保つ
     （Noto Sans JP / Oswald の可変軸 wght@400..800 の範囲内） */
  font-weight: var(--fw-black);
  font-size: max(14px, 7.4vw);
  line-height: 1.1;
  letter-spacing: var(--ls-en-label);
  margin-right: -.10em;                  /* 最終字のトラッキング分を相殺 */
  text-transform: uppercase;
  text-wrap: balance;                    /* 2行になる場合は均等に割る */
  font-feature-settings: var(--fs-kern);
}
/* --- 添え書き "hokusei recruit" ---
   SP では絶対配置（left: calc(100% + 1rem) / nowrap）をやめ、見出しの下へ回す。
   絶対配置のままだと、長い見出しのときに画面外へ押し出されて
   html の overflow-x: clip で「切れて消える」。 */
.c-heading--sm {
  position: static;
  display: block;
  bottom: auto; left: auto;
  margin-top: .55em;
  font-family: var(--ff-en);
  font-weight: var(--fw-medium);
  font-size: max(12px, 3.2vw);           /* 欧文は和文より小さく見えるので底上げ */
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: .85;
}

/* --- 縦組み（Information / About の柱） --- */
.c-vtext {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: var(--ls-vert);
  /* text-orientation は指定しない。和文は vertical-rl だけで正立する。
     upright を足すと Latin が1字ずつ縦積みになり、Career の
     "BENEFIT CAREER" が壊れる。vpal / jis04 も Google 配信版には無いので使わない。 */
  font-feature-settings: var(--fs-kern);
}
/* Career の縦ループは欧文。既存の .p-welfare__heading .c-vtext（詳細度2）に合わせて上書き */
.p-welfare__heading .c-vtext {
  font-family: var(--ff-en);
  font-weight: var(--fw-bold);
  text-orientation: mixed;               /* 万一 upright が混入しても寝かせ続ける */
  letter-spacing: .06em;
  text-transform: uppercase;
}

.c-border { font-weight: var(--fw-medium); line-height: var(--lh-ui); letter-spacing: .02em; }
.c-button-primary {
  font-family: var(--ff-en);
  font-weight: var(--fw-semi-bold);
  letter-spacing: .10em;
  line-height: var(--lh-ui);
  text-transform: uppercase;
}

/* =========================================================
   3. 数字の型
   ---------------------------------------------------------
   Instrument Sans は既定がプロポーショナル数字（実測 100px 組みで
   「1111」=154.6px /「0000」=276.1px）で、tabular-nums も効く
   （「1111」=240px で「0000」と同幅）。つまり1書体で2種の数字を賄える。
   ・単独で大きく見せる（1978 / 126 / 8:40）→ proportional。1 の左右が空かない。
   ・並べて揃える（#01 #02 #03 / 日付）→ tabular。桁が動いても列が揺れない。
   ※ 参考: Archivo は既定で全数字が同幅（「1111」=「0000」）で、
     pnum / tnum を掛けても1pxも動かない。数字が主役のこのサイトでは使えない。
   ========================================================= */
.p-about__history-num {
  font-family: var(--ff-num);
  font-weight: var(--fw-bold);
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: var(--fs-num-prop);
  letter-spacing: var(--ls-num);
  line-height: var(--lh-num);
  font-variant-ligatures: none;
}
.p-information__list-item-date,
.p-welfare__subheading-number,
.p-message__item-title--number {
  font-family: var(--ff-en);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: var(--fs-num-tab);
}

/* --- 数字に添える和文の単位（年・拠点・事業・日） ---
   明朝はやめてゴシック 700 に戻す。理由は2つ。
   ① 13px前後の明朝は横画が1pxを割ってアンチエイリアスで飛ぶ。
     「明朝は24px以上でしか使わない」という自分の規則にも反する。
   ② 既存 1262行が color: var(--cl-vivid)（浅葱）を当てており、
     生成り地とのコントラストは約 2.3:1（WCAG AA 4.5:1 に届かない）。
     色も本文色（勝色 #17202B ＝ 生成り地で 14.7:1）へ戻す。
   サイズは絶対値ではなく em。実測比 13/48.75 ≒ .28 に対し、
   ゴシックは明朝より字面が大きいので .30em に留める。 */
.p-about__history-num i {
  font-family: var(--ff-jp);
  font-weight: var(--fw-bold);
  font-style: normal;
  font-size: .30em;
  color: var(--cl-dark);
  letter-spacing: .04em;
  margin-left: .26em;
  vertical-align: .04em;
}
/* 「10時間ほど」だけは単位ではなく文。4字が入るよう一段大きくする。 */
.p-about__history-num.--unit-long i { font-size: .40em; margin-left: .2em; letter-spacing: .02em; }

/* 「少数精鋭」は数字ではない。数字用の指定（プロポーショナル数字・字詰め・
   極大サイズ）を全部外し、和文ゴシックの語として1つの塊で組む。
   SP: 内枠は 55.1929cqi = 375px 幅で 186.3px。9.6vw(36px)×4字 = 147px で収まる（実測）。 */
.p-about__history-num.--word {
  font-family: var(--ff-jp);
  font-weight: var(--fw-black);
  font-size: max(26px, 9.6vw);
  letter-spacing: .02em;
  line-height: 1.3;
  font-variant-numeric: normal;
  font-feature-settings: var(--fs-kern);
}

/* =========================================================
   4. ヒーロー
   ---------------------------------------------------------
   ★ここが明朝の1箇所目。白抜き・SP 32px / PC 45px（1440px 時）。
     line-height 1.6 → 1.45（PC は 1.40）。.p-hero__title は top 固定の
     絶対配置なので1行目は動かず、2行目だけが上がる:
       SP  51.2px → 46.4px（-4.8px）
       PC  72.0px → 63.0px（-9.0px）
     実ページで計測。ブロック高は SP 102px→93px / PC 144px→126px。
   ========================================================= */

/* 4事業の名称。Metal / Package / Lifestyle / Food & Agri は固有名詞なので
   大文字化しない（会社案内・名刺と表記を揃える）。
   実測（375px / 12px / .12em）: Metal 39px, Package 58px, Lifestyle 61px,
   Food & Agri 82px。右端はそれぞれ 62 / 171 / 339 / 300px で画面内に収まる。 */


/* =========================================================
   5. ヘッダー・ナビ
   ========================================================= */
.l-header__logo-text { font-family: var(--ff-en); font-weight: var(--fw-semi-bold); letter-spacing: .12em; text-transform: uppercase; }
/* R-14(2)/Q-07: メディア指定なしのこの行が同一詳細度(0,2,1)で後方にあるため、
   1280px以上でも 1006行（@media min-width:80rem）の --fw-semi-bold が一度も適用されず、
   259行の --fw-black も効かなかった。font-weight をここから外し、
   1280px以上は1006行・それ未満は259行、という本来の意図に戻す */
.l-header__nav-list--main a { letter-spacing: .04em; line-height: var(--lh-ui); }
.l-header__nav-list--sub a  { font-weight: var(--fw-medium); letter-spacing: .04em; }
.l-header__nav-entry a {
  font-family: var(--ff-en);
  font-weight: var(--fw-bold);
  letter-spacing: .10em;
  text-transform: uppercase;
}
.l-header__humburger-txt { font-family: var(--ff-en); font-weight: var(--fw-semi-bold); letter-spacing: .10em; }

/* =========================================================
   6. お知らせ
   ========================================================= */
.p-information__list-item-date { font-weight: var(--fw-semi-bold); letter-spacing: .02em; }
.p-information__list-item-category { font-weight: var(--fw-medium); letter-spacing: .04em; }
.p-information__list-text { line-height: 1.7; }
.p-information__banner-label { font-weight: var(--fw-bold); letter-spacing: .02em; line-height: var(--lh-ui); }

/* =========================================================
   7. About（ホクセイのこと ＋ 数字）
   ========================================================= */
.p-about__content-title {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--fs-tight);
}
.p-about__content-text  { font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.p-about__history-title {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  letter-spacing: .08em;
  font-feature-settings: var(--fs-tight);
}
.p-about__history-text  { font-weight: var(--fw-regular); line-height: var(--lh-body); }

/* =========================================================
   8. Initiative（4事業）
   ========================================================= */
.p-initiative__title {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-feature-settings: var(--fs-tight);
}
.p-initiative__card-ttl {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sub);
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--fs-tight);
}
.p-initiative__card-txt { line-height: var(--lh-body); }

/* =========================================================
   9. 福利厚生・キャリア
   ========================================================= */
.p-welfare__subheading-number { font-weight: var(--fw-bold); letter-spacing: 0; line-height: 1.2; }
/* O-11: 浅葱地の金#F1C75Bは1.49:1で「24px以上の見出しは3:1」に半分届かない
   （実測 28.8px）→ 同じ見出し内の数字と同じ勝色（6.87:1）へ。
   金の差し色は .c-heading--lg::after / .p-iv-person__no::after 等の装飾側で反復済み */
.p-welfare__subheading-number .--sm { font-weight: var(--fw-medium); opacity: 1; color: var(--cl-dark); margin-right: .06em; }
.p-welfare__subheading-number .--lg { font-weight: var(--fw-bold); }
.p-welfare__heading-main {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-black);
  line-height: 1.28;
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--fs-tight);
}
.p-welfare__heading-main--sm { font-weight: var(--fw-medium); letter-spacing: .04em; }
.p-welfare__item-text { line-height: var(--lh-body); }

/* =========================================================
   10. Interview & Episode
   ========================================================= */
.p-interview__title--lg {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-feature-settings: var(--fs-tight);
}
.p-interview__title--sm { font-family: var(--ff-jp-heading); font-weight: var(--fw-medium); letter-spacing: .04em; }
.p-interview__text { line-height: var(--lh-body); }

/* =========================================================
   11. Message
   ---------------------------------------------------------
   ★明朝の2箇所目は .p-message__item-subTtl だけ。
     「便利屋と呼ばれて、うれしくなる会社です。」「まずは一度、会いに来てください。」
     ＝その人が口に出した一文。見出し（代表から皆さまへ）も名前もゴシックのまま。
     SP は 19px 前後にしかならないのでゴシックで組み、PC だけ明朝に切り替える。
     PC 側は font-size を max(24px, 2cqi) に固定して、
     「明朝は24px未満に置かない」という規則をメディアクエリではなく値で担保する。
     （1024px でも 24px、1440px で 25.2px。実ページで確認済み）
   ========================================================= */
.p-message__item-title--number { font-weight: var(--fw-semi-bold); letter-spacing: .02em; line-height: 1; }
.p-message__item-title--ttl {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--fs-tight);
}
.p-message__item-subTtl {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-black);
  line-height: var(--lh-sub);
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--fs-tight);
}
.p-message__item-text { line-height: var(--lh-body); }
.p-message__item-name { font-family: var(--ff-jp-heading); font-weight: var(--fw-bold); letter-spacing: .08em; }

/* =========================================================
   12. フッター・モーダル
   ========================================================= */
.l-footer-body__nav-logo span { font-family: var(--ff-en); font-weight: var(--fw-semi-bold); letter-spacing: .12em; text-transform: uppercase; }
.l-footer-body__nav-main { font-weight: var(--fw-medium); line-height: var(--lh-ui); }
.l-footer-body__nav-main ul { font-weight: var(--fw-regular); }
.l-footer-body__cta-entry-heading--en {
  font-family: var(--ff-en-heading);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  line-height: 1.05;
}
.l-footer-body__cta-entry-heading span { font-weight: var(--fw-medium); letter-spacing: .06em; }
.l-footer-body__cta-entry-copy { line-height: var(--lh-body); }
.l-footer-body__cta-default { font-weight: var(--fw-bold); letter-spacing: .02em; line-height: var(--lh-ui); }
.l-footer__addr { font-weight: var(--fw-regular); line-height: 1.9; font-variant-numeric: lining-nums tabular-nums; }
.l-footer__copy { font-family: var(--ff-en); font-weight: var(--fw-medium); letter-spacing: .06em; }

.c-modal__content h3 {
  font-family: var(--ff-jp-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sub);
  letter-spacing: var(--ls-heading);
  font-feature-settings: var(--fs-tight);
}
.c-modal__content p  { font-weight: var(--fw-regular); line-height: 1.9; }
.c-modal__content li { font-weight: var(--fw-regular); line-height: var(--lh-body); }
.c-modal__close-txt  { font-family: var(--ff-en); font-weight: var(--fw-semi-bold); letter-spacing: .10em; }

.c-scroll-hint-inner-text { font-family: var(--ff-jp); font-weight: var(--fw-bold); letter-spacing: .04em; }

/* =========================================================
   13. PC（64rem以上）―― 既存のメディアクエリ内指定を打ち返す
   ========================================================= */
@media (min-width: 64rem) {
  body { line-height: var(--lh-body-pc); }

  /* PC は幅に余裕があるので既存の 2.5vi を維持し、添え書きは元の絶対配置へ戻す。
     実測 1440px: "INTERVIEW & EPISODE" は 36px 組みで 468px、可使用幅 1260px。
     1024px でも 25.6px 組み 333px / 可使用幅 896px。どちらも1行に収まる。 */
  /* R-03(1)/D-02: 7セクションの欧文ラベルが全部36pxで、和文の主題より大きかった。
     ラベルは28.1pxに下げて4段の階層（48/44/28/24/15.3px）の3段目に置く */
  .c-heading--lg { font-size: max(14px, 1.95vi); letter-spacing: var(--ls-en-label); }
  .c-heading--sm {
    position: absolute; display: block;
    bottom: .3em; left: calc(100% + 1rem);
    margin-top: 0;
    font-size: max(12px, .9vw);
    letter-spacing: .2em;
  }

  .p-about__content-title  { line-height: var(--lh-heading); }
  .p-about__content-text   { line-height: var(--lh-body-pc); }
  .p-about__history-title  { line-height: 1.45; }
  .p-about__history-text   { line-height: var(--lh-body-pc); }
  .p-about__history-num i  { font-size: .30em; }              /* 既存の 1.05vw を em に戻す */
  .p-about__history-num.--unit-long i { font-size: .40em; }
  .p-about__history-num.--word { font-size: max(26px, 2.6vw); }

  .p-initiative__title     { line-height: var(--lh-display); }
  .p-initiative__card-txt  { line-height: var(--lh-body-pc); }

  .p-welfare__item-text    { line-height: var(--lh-body-pc); }
  .p-welfare__heading-main { line-height: 1.24; }

  .p-interview__text       { line-height: var(--lh-body-pc); }
  .p-interview__title--lg  { line-height: var(--lh-display); }

  .p-message__item-text          { line-height: var(--lh-body-pc); }
  .p-message__item-title--number { line-height: 1; }
  .p-message__item-title--ttl    { line-height: var(--lh-heading); }
  /* ここだけ明朝。24px を下回らないよう font-size に下限を持たせている。 */
  .p-message__item-subTtl {
    font-family: var(--ff-jp-display);
    font-weight: var(--fw-mincho);
    font-size: max(24px, 2cqi);
    line-height: 1.55;
    letter-spacing: .04em;
  }

  .p-information__list-text { line-height: 1.7; }

}

/* =========================================================
   14. 容量 ―― 主張ではなく実測値
   ---------------------------------------------------------
   ローカルの計測用プロキシ経由でトップページを実際に読み込み、
   fonts.gstatic.com から落ちた woff2 のバイト数を全件合計した値。
   （カタログ全体の合計や平均ではなく、この1ページが実際に呼んだスライスだけ）

     現行  Noto Sans JP        38 files   713.6 KB
           Zen Kaku Gothic New 24 files   213.1 KB
           Manrope              1 file     24.0 KB
           Oswald               1 file     20.9 KB
           ────────────────────────────────────
           合計                64 files   971.6 KB

     新案  Noto Sans JP        37 files   689.1 KB
           Zen Old Mincho      10 files   164.9 KB
           Instrument Sans      1 file     29.2 KB
           ────────────────────────────────────
           合計                48 files   883.2 KB   (-88.4 KB / -9.1%、ファイル数 -25%)

   内訳の正直なところ:
   ・欧文は 44.9 KB → 29.2 KB（-35%）。2ファミリー → 1ファミリー。ここは素直に減った。
   ・和文は「Zen Kaku Gothic New を丸ごと落とした」ぶんが効いている。
     Noto Sans JP 自体はほぼ横ばい（見出しも背負ったので 38→37 files でほぼ同量）。
   ・可変フォントは「使うウェイトだけ読む」では減らない。Google は
     可変ファミリーなら wght@400;700 と書いても wght@400..800 と書いても
     同じ1本の可変ファイルを返す（実測で同一バイト数）。
     「未使用ウェイトの読み込み」は、可変を選んだ時点で起きない。
   ・逆に wdth 軸を要求すると欧文の latin サブセットは倍増する
     （Archivo: 34.1 KB → 88.0 KB / Instrument Sans: 29.2 KB → 55.8 KB）。
     前案が Archivo に wdth を採ったのは、実測すると +26.6 KB の買い物だった。
     今回は wdth を使わず、見出しの収まりは font-size で解いている。

   ■ 任意の追加最適化（明朝を 164.9 KB → 35.7 KB にする）
     明朝が担当するのは2ブロック・41字だけなので、Google Fonts の
     text= パラメータで必要な字だけ配信できる。ひらがな＋カタカナ＋句読点＋
     使用漢字15字（計211字）を含めた版で 35.7 KB（実測）。合計 754.0 KB（-22.4%）。
     採用条件: この2ブロックの文言を確定させること。文言を変えたら
     text= も必ず更新する（未収録の漢字だけがシステム明朝に落ちて混植になる）。
     いま index.html には「※クライアント確認中」の箇所が残っているので、
     既定は上の安全な URL にしてある。差し替え時の形:
     https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@900&text=<211字をURLエンコード>&display=swap
   ========================================================= */

/* =========================================================
   15. HTML の変更（3箇所）
   ---------------------------------------------------------
   recruit-site/index.html
   ・15行   Google Fonts の <link> を冒頭の URL に差し替え
   ・313行  <p class="p-about__history-num">10<i>時間ほど</i></p>
        →  <p class="p-about__history-num --unit-long">10<i>時間ほど</i></p>
   ・330行  <p class="p-about__history-num">少数<i>精鋭</i></p>
        →  <p class="p-about__history-num --word">少数精鋭</p>
   これ以外の HTML 変更は不要。追加のユーティリティクラス（.u-num-display /
   .u-num-tabular / .num）は作っていない ―― 出現数ゼロの空振りセレクタを
   納品物に混ぜないため、指定はすべて実在するセレクタだけに絞ってある。
   ========================================================= */

/* ============================================================
   echishin.css 追記案 ―― 実測にもとづく最小構成
   Chromium 148 / 320・360・375・768・1024・1280・1440・1920px で計測
   ============================================================ */

/* ------------------------------------------------------------
   1. レスポンシブ改行クラス（今回の主要な納品物）
   ------------------------------------------------------------
   閾値は 768px ではなく 64rem = 1024px にします。
   このサイトのレイアウト切替（.p-about__heading-wrapper の
   grid-template-areas、.p-welfare__body、.p-interview__section、
   本文 font-size の基準 vw）はすべて 64rem で起きており、
   768px は SP レイアウトのままだからです（実測: 768px 時の
   About 見出しは SP と同じ3行、Interview 見出しも SP と同じ挙動）。
   固定の <br> を捨てず、幅ごとに出し分けるための2クラスです。      */
.u-br-pc { display: none; }
.u-br-sp { display: inline; }
@media (min-width: 64rem) {
  .u-br-pc { display: inline; }
  .u-br-sp { display: none; }
}

/* ------------------------------------------------------------
   2. 分断してはいけない語のまとまり
   ------------------------------------------------------------
   実測で「実際に割れた」のは住所だけでした。
   320px: 「…1番8号ウイング・ / ウイング高岡5階TEL0766-29-1600/FAX0766-21- / 7720」
   375px: 「…ウイング・ウイング高岡 / 5階TEL0766-29-1600/FAX0766-21-7720」
   建物名が中黒で割れ、階数が建物名から切れ、FAX番号が
   ハイフンで割れています。u-nb で3つの塊に固めた後の実測は
   320/360/375px = 3行・横溢なし、1024px以上 = 1行・横溢なし。      */
.u-nb { white-space: nowrap; }

/* ------------------------------------------------------------
   3. 前回案のうち削除するもの（記録として明記）
   ------------------------------------------------------------
   ・.p-hero__title / .p-about__content-title / .p-interview__title--lg
     への white-space: nowrap → 削除。
     br 要素への white-space 指定は効果を持たないというご指摘は
     そのとおりで、そもそもヒーローは font-size: 8.53333cqi（SP）
     / 3.125cqi（PC）のコンテナ単位のため 320〜1920px の全幅で
     2行固定・横溢なしを実測しました。対処自体が不要です。
   ・ナビ／バナー／.c-border など12セレクタへの一括 nowrap → 削除。
     `body,body * { word-break: normal !important }` を当てて
     auto-phrase 非対応エンジンを再現した状態で再計測しても、
     ナビ「仕事・人・ストーリー」「福利厚生・キャリア」、
     サブナビ「採用スケジュール」、バナー「会社案内パンフレット」、
     .c-border「ワークライフを知る」「富山にいながら」は
     いずれも全幅で1行のままでした。割れないものに nowrap を
     足すと横溢のリスクだけが残ります。
   ・.c-heading--sm への nowrap → 削除（150行に既存。重複）。
   ・「text-wrap: balance / pretty は auto-phrase を無効化する」
     という前回の記述 → 削除。Chromium 148 で同一テキストの
     折り返し位置を比較したところ auto-phrase 単体と
     auto-phrase + pretty / balance で結果は一致しました。誤りです。 */

/* ------------------------------------------------------------
   4. word-break: auto-phrase（62行）の現状認識
   ------------------------------------------------------------
   Chromium は対応（CSS.supports で確認）。Firefox は未対応。
   WebKit は近年動いている領域なので断定せず、実機確認が要ります。
   非対応時のフォールバックは normal で、実測すると本文の
   折り返し位置が実際に変わります。
     auto-phrase : 地域に眠っている価値を / 見つけて、本当に必要と / している場所へ届ける。
     normal      : 地域に眠っている価値を見 / つけて、本当に必要として / いる場所へ届ける。
   影響を受けるのは本文だけで、見出し・ラベルは変わりません
   （上記3参照）。したがって auto-phrase は「効けば良くなる」
   進歩的強化として残し、意味が壊れると困る見出しは
   <br> + u-br-pc / u-br-sp で明示的に確定させる、という
   二段構えが現実的な設計です。 */

/* ------------------------------------------------------------
   5. PCで縦組みになる履歴見出しの組版
   ------------------------------------------------------------
   1112行付近で .--n03 / .--n04 / .--n05 の見出しだけが
   writing-mode: vertical-rl になります。1440px で字数を数えると
   「事業領域」4字 / 「年間休日」4字 に対し
   「残業（月平均）」は括弧込み7字で縦に約1.75倍あり、
   .--n05 は絵と数字の左右に挟まれた最も狭い項目です。
   本文を「月の残業」（4字）に詰める案を fixes に入れました。
   ※ O-13 で7項目とも横組みに統一したため、縦組み用の
     font-feature-settings:"palt" 0 / text-orientation / line-break は削除。
     横組みでは palt を切ると他5項目とだけ字送りが変わってしまう。 */

/* ------------------------------------------------------------
   6. Career #03 のPCでの読み順
   ------------------------------------------------------------
   .p-welfare__heading-main.--03 は PC で display:flex（841行）。
   DOM順のまま「世界とつながる → 富山にいながら」と左から並び、
   修飾句が被修飾句の後ろに来る倒置になります。
   意図した倒置でなければ順序を入れ替えてください。
   （SPでは縦積みなので影響しません）                              */
@media (min-width: 64rem) {
  .p-welfare__heading-main.--03 .p-welfare__heading-main--sm { order: -1; }
}

/* ------------------------------------------------------------
   7. 行末の約物処理（任意）
   ------------------------------------------------------------
   hanging-punctuation は Chromium 148 では未対応
   （CSS.supports('hanging-punctuation','allow-end') === false）。
   Safari では効きます。無害なので入れておけば対応ブラウザだけ
   行末の句読点がぶら下がり、行末の凸凹が減ります。急ぎません。   */
.p-about__content-text,
.p-welfare__item-text,
.p-interview__text,
.p-message__item-text p,
.c-modal__content p { hanging-punctuation: allow-end; }

/* ============================================================
   実測: 主要4見出しの到達行数（fixes 適用後）
   ------------------------------------------------------------
   見出し                     SP(320/360/375)      PC(1024/1440/1920)
   ------------------------------------------------------------
   ヒーロー .p-hero__title    2行（<br>固定）       2行（<br>固定）
     根拠: font 8.53333cqi(SP) / 3.125cqi(PC)。コンテナ比が
     固定なので全幅で同一。横溢なし。
   ------------------------------------------------------------
   About .p-about__content-title
                              3行                   2行
     SP  地域の価値を見つけて / 本当に必要な場所へ / 届ける会社
     PC  地域の価値を見つけて / 本当に必要な場所へ届ける会社
     根拠: 箱幅 320px時213px・375px時240px、font 6.4vw。
           1行あたり約10字が上限で、SPで述語をつなぐと4行に崩れる。
           PCは箱 33.125vw / font 2.25vw ＝ 約14.7字で比率固定、
           必要14字。1024px（箱329px / 必要322px）でも横溢なしを実測。
   ------------------------------------------------------------
   Interview .p-interview__title--lg
                              1行                   2行
     SP  仕事・人・ストーリー
     PC  仕事・人・ / ストーリー（<br class="u-br-pc">で固定）
     根拠: SPは font 9.49555cqi のコンテナ単位で常に収まる
           （320px でも横溢なし）。PCは font clamp(…,3.75vw,44px)、
           列幅 26.56vw のため 1024〜約1650px で自然に2行になり、
           1920px では1行に戻る。幅で行数が揺れるので <br> で固定。
   ------------------------------------------------------------
   Career .p-welfare__heading-main
     #01 仕事を知る            1行                   1行
     #02 環境を知る            1行                   1行
     #03 世界とつながる+富山にいながら
                              2行（縦積み）         1行（PCはflex横並び）
     根拠: いずれも width:max-content。#03 のみ 841行の
           flex で PC は1行になる（読み順は上記6参照）。
   ============================================================ */

/* =========================================================
   「ホクセイのこと」7つの数字の入場
   ---------------------------------------------------------
   ・幾何は動かさない。動くのは「数」と「線」だけ。
   ・運びの向きは 0°（左から）と 90°（上から）のみ。斜めは使わない。
   ・初期状態は <head> の 1行が付ける .js-armed で first paint 前に確定する。
     reduce のときは付かないので、隠れるものは何も無い。
   ========================================================= */

/* --- 桁が動いてもガタつかせない --- */
.p-about__history-num,
.c-num__val {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --- 段階1：JS がまだ整えていない項目は、数字とイラストごと伏せる ---
   （span への包み込みは JS 実行時なので、この段階では要素単位でしか押さえられない） */
.js-armed .p-about__history-item:not(.is-count-ready) .p-about__history-num,
.js-armed .p-about__history-item:not(.is-count-ready) .p-about__history-figure { opacity: 0; }

/* --- 段階2：整い終わった項目は場に出す。伏せるのは中身だけになる --- */
.js-armed .p-about__history-item:not(.is-counted) .c-num__val,
.js-armed .p-about__history-item:not(.is-counted) .c-num__char,
.js-armed .p-about__history-item:not(.is-counted) .p-about__history-num i { opacity: 0; }
/* 線と港は JS が stroke-dasharray / opacity で伏せる（長さは CSS では測れない） */

/* --- 数の本体。最終値の桁数ぶんの幅を先に確保しておく --- */
.c-num__val {
  display: inline-block;
  vertical-align: baseline;
  text-align: start;              /* 左端＝見出しの左端は最初から最後まで動かない */
  white-space: nowrap;
  min-inline-size: calc(var(--digits, 0) * 1ch);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --- 単位。位置は最初から確保し、姿だけ数の 140ms 後に現す --- */
.p-about__history-num i { display: inline-block; }

/* --- 1文字ずつ置く「少数精鋭」。読み上げは同じ p の中の u-vh が担う --- */
.c-num__char { display: inline-block; }

/* =========================================================
   横のイラスト（index.html にインライン展開した SVG）
   ---------------------------------------------------------
   【禁】vector-effect: non-scaling-stroke
   stroke-dasharray はスクリーン座標、getTotalLength() は user 座標を返すため、
   併用すると (1) 線幅が縮小率を無視して 3px のまま太り、
   (2) 描き進みが最初の3割で出きって残りが静止する。原理的に併用不可。
   線幅は SVG 側の stroke-width（主線 3 / 補助線 2.2）だけで決める。
   ========================================================= */
svg.p-about__history-figure {
  display: block;
  height: auto;          /* 幅は既存の指定どおり。高さは viewBox の比から */
  overflow: visible;     /* 端の丸いキャップを欠けさせない */
}
/* 港（真円）は中心を軸に点く */
svg.p-about__history-figure .il-port {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* =========================================================
   動きを減らす設定：即座に最終状態
   ---------------------------------------------------------
   .js-armed が付かないので本来ここまで来ないが、
   途中で設定が変わった場合の保険として最終状態を明示しておく。
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .p-about__history-item .p-about__history-num,
  .p-about__history-item .p-about__history-num i,
  .p-about__history-item .c-num__val,
  .p-about__history-item .c-num__char,
  .p-about__history-figure .il-main,
  .p-about__history-figure .il-sub,
  .p-about__history-figure .il-accent,
  .p-about__history-figure .il-port {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  .p-about__history-figure .il-main,
  .p-about__history-figure .il-sub,
  .p-about__history-figure .il-accent {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .c-num__val { min-inline-size: 0; }
}

/* =========================================================
   既知の不具合の修正（統合時に見つけたもの）
   ========================================================= */

/* ① フッターのキャラ写真4点に角丸が効いていなかった */
.l-footer-loop-char,
.l-footer-loop-char img { border-radius: var(--r-md); overflow: hidden; }

/* ② ENTRY 下の2ボタンの文字が左端で切れていた。
      .l-footer-body__cta-default の border-radius: .75vw が左右の padding より
      大きく、角丸が文字を食っていた。半径を戻し、内側の余白を確保する。 */
@media (min-width: 64rem) {
  .l-footer-body__cta-default {
    border-radius: var(--r-md);
    padding-inline: 2vw;
    column-gap: 1vw;
  }
}

/* ③ フッター上部の濃紺の小片＝ページトップボタン。
      浅葱と生成りの境目に半分だけ顔を出していて「破片」に見えていた。
      境目にきちんと乗る円として見せ、中の矢印を上向きに揃える。 */
.l-footer__btn-top {
  transform-origin: 50% 50%;
  rotate: none;                   /* 親を回すと中の矢印まで傾くのでやめる */
  z-index: 5;
}
.l-footer__btn-top > .c-box {
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgb(23 32 43 / .22);
}
/* 矢印は円の中心に1つだけ、上向きに置く。
   ホバー用の2枚差し替えは親を回すと座標系ごと回って破綻するため、
   このボタンでは使わない（2枚目を隠す）。 */
.l-footer__btn-top .c-box--rotate {
  rotate: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.l-footer__btn-top .c-box--rotate svg:nth-child(2) { display: none; }
.l-footer__btn-top .c-box--rotate svg:first-child {
  position: static;
  width: 40%;
  height: 40%;
  transform: none;
  rotate: -90deg;                 /* 矢印そのものを上向きに */
  fill: var(--cl-white);
  opacity: 1;
}
.l-footer__btn-top .c-box--hover:hover .c-box--rotate svg:first-child {
  opacity: 1;
  transform: none;
  translate: 0 -12%;              /* 上にわずかに動く */
}


/* =========================================================
   統合パッチ（2026-08-08）
   ---------------------------------------------------------
   ここから下は「後勝ち」で既存指定を上書きする追記ブロック。
   既存行は消していないので、切り戻しはこのブロックの削除だけで済む。
   並び順に意味がある。上から下へ、粒度の粗いものから細かいものへ。
   ========================================================= */

/* ---------------------------------------------------------
   1. 数字7項目の起動クラス名を実際に付くものへ合わせる
   ---------------------------------------------------------
   <head> と recruit.js が付けるのは .is-num-armed / .js-count-live で、
   .js-armed は一度も付かない。上の 1977-1983 行は空振りしているので、
   同じ内容を正しいクラス名で置き直す。
   （空振り側の .js-armed 5行はデッドコード。消す場合はここと入れ替える）
--------------------------------------------------------- */
.is-num-armed .p-about__history-item:not(.is-count-ready) .p-about__history-num,
.is-num-armed .p-about__history-item:not(.is-count-ready) .p-about__history-figure { opacity: 0; }

.is-num-armed .p-about__history-item:not(.is-counted) .c-num__val,
.is-num-armed .p-about__history-item:not(.is-counted) .c-num__char,
.is-num-armed .p-about__history-item:not(.is-counted) .p-about__history-num i { opacity: 0; }

/* ---------------------------------------------------------
   2. 数字まわりの字組
--------------------------------------------------------- */
/* ch は tabular の送りを反映しない（Instrument Sans は 1ch=0.69em、
   tabular の実送りは 0.60em）。3桁で 14px ぶん余分に予約され、
   「126」だけ単位との間が 17-18px 空いていた。em で取り直す。 */
.c-num__val { min-inline-size: calc(var(--digits, 0) * 0.59em); }

/* 「少数精鋭」は数値＋単位ではない。HTML から <i> を外したうえで、
   万一 <i> が戻ってきても 0.3em に潰れないようにしておく。 */
.p-about__history-num.--word i {
  font-size: 1em;
  color: inherit;
  margin-left: 0;
  vertical-align: baseline;
}

/* ---------------------------------------------------------
   3. ヒーロー：JS が動かなくてもコピーは出す
   （JS 側は fill:'both' で delay 中も 0 に伏せるので二重出しにならない）
--------------------------------------------------------- */

/* O-12: 上の保険が FCP=176ms の1フレームだけ露出し、直後に JS の fill:'both' が
   伏せるため「一瞬全部出て 0.5秒真っ白」になっていた。
   <head> の1行が first paint 前に is-hero-armed を立て、その間だけ伏せる。
   失効タイマー（recruit.js 2.5s / <head> 3s）で外れるので、JS が死んでも
   上の opacity:1 に戻って題字は必ず見える（is-num-armed と同じ方式）。 */


/* ---------------------------------------------------------
   4. モーダル：visibility を時間遷移させない
   ---------------------------------------------------------
   is-show を付けた直後も算出値が hidden のままで、
   openModal の focus() が通らずフォーカスが背後に残っていた。
--------------------------------------------------------- */
.c-modal { transition: opacity .3s ease-out, visibility 0s linear .3s; }
.c-modal.is-show { transition: opacity .3s ease-out, visibility 0s linear 0s; }

/* ---------------------------------------------------------
   5. ドロワー（〜1279px）
--------------------------------------------------------- */
@media (max-width: 79.99rem) {
  /* 閉じている間は中身をフォーカス対象から外す。JS の inert が効かない
     環境（Safari 旧版など）でも、これだけで見えない位置への焦点移動は止まる。 */
  .l-header__nav-inner { visibility: hidden; transition: visibility 0s linear .6s; }
  html.is-open .l-header__nav-inner { visibility: visible; transition-delay: 0s; }
}

/* 1024-1279px はまだドロワー。body の 1.0625vw を継承して主リンクが 14px に
   落ち、上限の無いサブリンクが 43px まで伸びて主従が逆転していた。
   ドロワーが残る帯だけ、主 > 副 の関係を作り直す。 */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .l-header__nav-list--main a { font-size: max(16px, 1.9vw); }
  .l-header__nav-list--sub  a { font-size: max(14px, 1.5vw); }
}

/* ---------------------------------------------------------
   6. 768-1023px の「拡大鏡」を止める
   ---------------------------------------------------------
   SP 用に決めた vw に上限が無く、1023px まで伸び続けていた
   （body 40.9px / c-heading--lg 75.7px）。1024px で 1/3 に落ちる段差も
   ここで縮む。375px の見えは clamp の下限側で従来どおり。
--------------------------------------------------------- */
@media (max-width: 63.99rem) {
  body { font-size: clamp(14px, 4vw, 17px); }

  .c-heading--lg { font-size: clamp(22px, 7.4vw, 30px); }
  .c-heading--sm { font-size: clamp(12px, 3.2vw, 14px); }

  .p-about__history-num       { font-size: clamp(34px, 13vw, 56px); }
  .p-welfare__heading-main    { font-size: clamp(22px, 7.1vw, 30px); }
  .p-initiative__title,
  .p-interview__title--lg     { font-size: clamp(22px, 8.3vw, 34px); }
  .p-information__list-item-date { font-size: clamp(12px, 3.4vw, 15px); }

  .p-information__list-text,
  .p-welfare__item-text,
  .p-initiative__card-txt,
  .p-interview__text,
  .p-message__item-text { font-size: clamp(14px, 4vw, 17px); }

  /* O-05: 768-1023px でSP用のvwが2.05倍に拡大される穴の残り。
     .p-about__history-text は 13.0px@375 → 26.1px@768、.p-hero__title は 32 → 65.5px、
     .c-button-primary は 16 → 32.8px だった。interview 側は丸ごと未対応。
     このブロックの末尾に置くことで 281行（.p-hero__title）より後勝ちになる。
     730行は min-width:64rem なので衝突しない。 */
  /* A-01(1): interview 向けの7宣言はここでは1件も効いていなかった（デッドコード）。
     基底が 2822/2830/2922/2900/2937/2950/2982 行と後方にあり同一詳細度で後勝ちされるため。
     → ファイル末尾の @media (max-width: 63.99rem) へ移設した */
  /* A-01(2): 下限 13px → 14px（375px で本文が14pxを割っていた） */
  .p-about__history-text  { font-size: clamp(14px, 3.4vw, 16px); }
  .p-about__history-title { font-size: clamp(15px, 4.2vw, 19px); }

  .c-button-primary       { font-size: clamp(14px, 4.2vw, 17px); }
}

/* ---------------------------------------------------------
   7. 書体入れ替えで崩れた行組み（PC）
--------------------------------------------------------- */
/* About 見出し：Noto Sans JP は Zen Kaku Gothic New より送りが広く、
   14.0字ぶんの箱に 14.03字を要求して「会社」2字が3行目に落ちていた。
   letter-spacing:0 だけだと余白 6.5px（1024px）でレンダラ差に耐えないので
   font-size も一段落とす。1024px で 14px 前後、1920px で 27px 前後の余白。 */
@media (min-width: 64rem) {
  /* R-03(2)/D-02: ABOUTの主題(30.96px)が LIFE AT HOKUSEI の一項目(32.4px)より
     小さいという階層逆転を解消。4段の2段目=43.9px（1440px）に上げる */
  .p-about__content-title { font-size: 3.05vi; letter-spacing: 0; }
}

/* Message の明朝：24px 下限を保ったまま 1024-1155px の列幅（243-274px）に
   「うれしくなる会社です。」11字は物理的に入らない。
   font-size を削るのではなく、明朝への切替点を列幅が足りる幅まで上げる。
   1156px 以上は現状どおり明朝24px以上で2行に組めるので巻き添えにしない。 */
@media (min-width: 64rem) and (max-width: 72.2rem) {
  .p-message__item-subTtl {
    font-family: var(--ff-jp-heading);
    font-weight: var(--fw-black);
    font-size: max(18px, 1.7cqi);
    letter-spacing: .02em;
    line-height: 1.55;
  }
}

/* =========================================================
   2026-08-30 最終整理：不要な見出し装飾を撤去し、CEO MESSAGEを
   写真とコピーが主役のオープンな編集レイアウトへ変更する。
   ========================================================= */

/* Business：右端の縦文字と見出し装飾はHTMLから削除済み。
   カードの情報だけが読みやすく残るよう、余白を整える。 */
.p-initiative > .c-pillar,
.p-initiative .c-heading__deco { display: none !important; }
.p-initiative .c-heading { width: auto; }

/* Message：導入装飾、格子、巨大文字、円をすべて使わない。 */
.p-message {
  overflow: hidden;
  padding-block: clamp(84px, 9vw, 138px) !important;
  color: var(--hk-ink) !important;
  background: linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%) !important;
}
.p-message > .c-pillar,
.p-message__header,
.p-message__items > .c-rail,
.p-message__item-deco { display: none !important; }
.p-message__body {
  width: min(1120px, calc(100% - 64px));
  margin-inline: auto;
  padding-inline: 0 !important;
}
.p-message__items { display: block !important; }
.p-message__item:only-of-type {
  position: relative;
  display: grid !important;
  grid-template:
    "title image"
    "text image" / minmax(0, 1.08fr) minmax(330px, .78fr) !important;
  gap: clamp(34px, 4.4vw, 66px) clamp(56px, 7vw, 104px) !important;
  align-items: center;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--hk-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.p-message__item:only-of-type::before,
.p-message__item:only-of-type::after { display: none !important; content: none !important; }
.p-message__item-eyebrow { display: none !important; }
.p-message__item:only-of-type .p-message__item-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid #bdd3e8 !important;
}
.p-message__item-title--label {
  flex: 0 0 auto;
  padding: 8px 15px !important;
  border: 1px solid var(--hk-blue) !important;
  border-radius: 999px !important;
  color: var(--hk-blue) !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.p-message__item:only-of-type .p-message__item-title--ttl {
  color: var(--hk-ink) !important;
  font-size: clamp(25px, 2.5vw, 38px) !important;
}
.p-message__item:only-of-type .p-message__item-title--ttl::after { display: none !important; }
.p-message__item:only-of-type .p-message__item-text {
  grid-area: text;
  position: relative;
  align-self: start;
  padding: clamp(32px, 3.4vw, 50px) clamp(30px, 3.8vw, 58px) !important;
  border: 0 !important;
  border-radius: clamp(28px, 3vw, 46px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1974cf 0%, #075caf 100%) !important;
  box-shadow: 0 22px 50px rgb(8 67 130 / .18) !important;
  backdrop-filter: none !important;
}
.p-message__item:only-of-type .p-message__item-text::before {
  content: "" !important;
  position: absolute;
  right: 18%;
  bottom: -25px;
  left: auto;
  top: auto;
  width: 0;
  height: 0;
  border-width: 26px 0 0 42px;
  border-style: solid;
  border-color: transparent transparent transparent #075caf;
  color: transparent;
  opacity: 1;
  transform: rotate(8deg);
}
.p-message__item:only-of-type .p-message__item-subTtl {
  margin-bottom: clamp(20px, 2vw, 30px);
  padding: 0 !important;
  color: #ffffff !important;
  font-size: clamp(24px, 2.35vw, 35px) !important;
  line-height: 1.65 !important;
  text-decoration: none !important;
}
.p-message__item:only-of-type .p-message__item-subTtl::before {
  content: "\201C";
  margin-right: 8px;
  color: var(--hk-gold);
  font-family: Georgia, serif;
  font-size: 1.7em;
  line-height: 0;
  vertical-align: -.2em;
}
.p-message__item:only-of-type .p-message__item-text > p:not(.p-message__item-subTtl):not(.p-message__item-name) {
  color: rgb(255 255 255 / .88) !important;
  font-size: clamp(13px, 1.08vw, 16px);
  line-height: 2 !important;
}
.p-message .p-message__item-name {
  margin-top: clamp(24px, 2.4vw, 34px) !important;
  color: #ffffff !important;
}
.p-message .p-message__item-name span { color: var(--hk-gold) !important; }
.p-message__item-img {
  grid-area: image;
  position: relative;
  z-index: 1;
  margin: 0 !important;
  align-self: stretch;
}
.p-message__item:only-of-type .p-message__item-img::before { display: none !important; content: none !important; }
.p-message__item-img > img:not(.p-message__item-deco) {
  width: 100% !important;
  height: 100% !important;
  min-height: 520px;
  max-height: 680px !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: clamp(28px, 3vw, 46px) !important;
  object-fit: cover !important;
  object-position: 54% center;
  box-shadow: 0 24px 54px rgb(10 58 112 / .18) !important;
  rotate: 0deg !important;
}

/* Footer ENTRY：2つの金属素材を左右に分け、人物マーキーへはみ出させない。 */
.l-footer-body__cta-entry { overflow: hidden !important; }
.l-footer-body__cta-entry-people-decorate {
  right: clamp(8px, 1vw, 18px) !important;
  bottom: 0 !important;
  width: clamp(170px, 15vw, 230px) !important;
  height: clamp(140px, 12vw, 188px) !important;
  overflow: hidden;
  pointer-events: none;
}
.l-footer-body__cta-entry-people.--profile {
  left: 2% !important;
  bottom: 4% !important;
  width: 47% !important;
}
.l-footer-body__cta-entry-people.--ingots {
  right: 1% !important;
  bottom: 4% !important;
  width: 47% !important;
}
.l-footer-body__cta-entry-people-svg { display: none !important; }

@media (max-width: 63.99rem) {
  .p-message__body { width: min(100% - 40px, 720px); }
  .p-message__item:only-of-type {
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" "image" "text" !important;
    gap: 30px !important;
  }
  .p-message__item-img { min-height: 420px; }
  .p-message__item-img > img:not(.p-message__item-deco) { min-height: 420px; max-height: 540px !important; }
  .l-footer-body__cta-entry-people-decorate {
    width: clamp(130px, 35vw, 190px) !important;
    height: clamp(118px, 31vw, 166px) !important;
  }
}

@media (max-width: 47.99rem) {
  .p-message { padding-block: 72px !important; }
  .p-message__item:only-of-type .p-message__item-title { align-items: flex-start; flex-direction: column; gap: 14px; }
  .p-message__item-img { min-height: 340px; }
  .p-message__item-img > img:not(.p-message__item-deco) { min-height: 340px; max-height: 440px !important; }
  .p-message__item:only-of-type .p-message__item-text { padding: 30px 24px 36px !important; }
  .l-footer-body__cta-entry-people-decorate {
    width: 122px !important;
    height: 116px !important;
  }
}

/* =========================================================
   2026-08-29 Footer visuals：透過素材に白縁＋個別のステップ動作
   ========================================================= */
@keyframes footerVisualStepA {
  0%, 18%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  19%, 38% { transform: translate3d(2px, -7px, 0) rotate(-1deg); }
  39%, 61% { transform: translate3d(-2px, -3px, 0) rotate(1deg); }
  62%, 82% { transform: translate3d(1px, -9px, 0) rotate(0); }
  83%, 99% { transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes footerVisualStepB {
  0%, 22%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  23%, 43% { transform: translate3d(-3px, -5px, 0) rotate(1.2deg); }
  44%, 66% { transform: translate3d(2px, -8px, 0) rotate(-.8deg); }
  67%, 86% { transform: translate3d(-1px, -2px, 0) rotate(.5deg); }
  87%, 99% { transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes footerVisualStepC {
  0%, 26%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  27%, 48% { transform: translate3d(3px, -4px, 0) rotate(-1.4deg); }
  49%, 72% { transform: translate3d(-2px, -9px, 0) rotate(.8deg); }
  73%, 91% { transform: translate3d(1px, -3px, 0) rotate(-.5deg); }
  92%, 99% { transform: translate3d(0, 0, 0) rotate(0); }
}

.l-footer-loop__char {
  transform-origin: 50% 90%;
  will-change: transform;
  animation: footerVisualStepA 5.8s step-end infinite !important;
}

.l-footer-loop__char img {
  filter:
    drop-shadow(2px 0 0 #ffffff)
    drop-shadow(-2px 0 0 #ffffff)
    drop-shadow(0 2px 0 #ffffff)
    drop-shadow(0 -2px 0 #ffffff)
    drop-shadow(1.5px 1.5px 0 #ffffff)
    drop-shadow(-1.5px 1.5px 0 #ffffff)
    drop-shadow(1.5px -1.5px 0 #ffffff)
    drop-shadow(-1.5px -1.5px 0 #ffffff);
}

.l-footer-loop__char[data-item="01"] { animation-name: footerVisualStepA !important; animation-duration: 5.4s !important; }
.l-footer-loop__char[data-item="02"] { animation-name: footerVisualStepB !important; animation-duration: 6.2s !important; animation-delay: -1.1s !important; }
.l-footer-loop__char[data-item="03"] { animation-name: footerVisualStepC !important; animation-duration: 5s !important; animation-delay: -2.2s !important; }
.l-footer-loop__char[data-item="04"] { animation-name: footerVisualStepB !important; animation-duration: 6.8s !important; animation-delay: -.7s !important; }
.l-footer-loop__char[data-item="05"] { animation-name: footerVisualStepA !important; animation-duration: 5.9s !important; animation-delay: -3s !important; }

@media (prefers-reduced-motion: reduce) {
  .l-footer-loop__char { animation: none !important; }
}

/* =========================================================
   2026-08-29 Mobile drawer：青い面ではナビゲーションを白文字に統一
   ========================================================= */
@media (max-width: 79.99rem) {
  html.is-open .l-header__nav-list--main a,
  html.is-open .l-header__nav-list--main a .u-line__text,
  html.is-open .l-header__nav-list--sub a,
  html.is-open .l-header__nav-list--sub a .u-line__text {
    color: #ffffff !important;
  }

  html.is-open .l-header__nav-list--sub a {
    border-color: rgb(255 255 255 / .72) !important;
  }

  html.is-open .l-header__nav-list--main a:is(:hover, :focus-visible),
  html.is-open .l-header__nav-list--sub a:is(:hover, :focus-visible) {
    color: #ffffff !important;
    background: rgb(255 255 255 / .12);
  }
}

/* 2026-08-30 final cascade: keep this block at EOF. */
.p-initiative > .c-pillar,
.p-initiative .c-heading__deco,
.p-message > .c-pillar,
.p-message__header,
.p-message__items > .c-rail,
.p-message__item-deco { display: none !important; }
.p-initiative .c-heading { width: auto !important; }

.p-message {
  overflow: hidden !important;
  padding-block: clamp(84px, 9vw, 138px) !important;
  color: var(--hk-ink) !important;
  background: linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #f3f8fd 0%, #ffffff 100%) !important;
}
.p-message__body { width: min(1120px, calc(100% - 64px)) !important; margin-inline: auto !important; padding-inline: 0 !important; }
.p-message__items { display: block !important; }
.p-message__item:only-of-type {
  display: grid !important;
  grid-template: "title image" "text image" / minmax(0, 1.08fr) minmax(330px, .78fr) !important;
  gap: clamp(34px, 4.4vw, 66px) clamp(56px, 7vw, 104px) !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--hk-ink) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.p-message__item:only-of-type::before,
.p-message__item:only-of-type::after { display: none !important; content: none !important; }
.p-message__item-eyebrow { display: none !important; }
.p-message__item:only-of-type .p-message__item-title {
  grid-area: title !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 0 22px !important;
  border-bottom: 1px solid #bdd3e8 !important;
}
.p-message__item-title--label { padding: 8px 15px !important; border: 1px solid var(--hk-blue) !important; border-radius: 999px !important; color: var(--hk-blue) !important; background: transparent !important; backdrop-filter: none !important; }
.p-message__item:only-of-type .p-message__item-title--ttl { color: var(--hk-ink) !important; font-size: clamp(25px, 2.5vw, 38px) !important; }
.p-message__item:only-of-type .p-message__item-title--ttl::after { display: none !important; }
.p-message__item:only-of-type .p-message__item-text {
  grid-area: text !important;
  position: relative !important;
  align-self: start !important;
  padding: clamp(32px, 3.4vw, 50px) clamp(30px, 3.8vw, 58px) !important;
  border: 0 !important;
  border-radius: clamp(28px, 3vw, 46px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1974cf 0%, #075caf 100%) !important;
  background-image: linear-gradient(135deg, #1974cf 0%, #075caf 100%) !important;
  box-shadow: 0 22px 50px rgb(8 67 130 / .18) !important;
  backdrop-filter: none !important;
}
.p-message__item:only-of-type .p-message__item-text::before {
  content: "" !important;
  top: auto !important;
  right: 18% !important;
  bottom: -25px !important;
  left: auto !important;
  width: 0 !important;
  height: 0 !important;
  border-width: 26px 0 0 42px !important;
  border-style: solid !important;
  border-color: transparent transparent transparent #075caf !important;
  color: transparent !important;
  opacity: 1 !important;
  transform: rotate(8deg) !important;
}
.p-message__item:only-of-type .p-message__item-subTtl { margin-bottom: clamp(20px, 2vw, 30px) !important; padding: 0 !important; color: #ffffff !important; font-size: clamp(24px, 2.35vw, 35px) !important; line-height: 1.65 !important; text-decoration: none !important; }
.p-message__item:only-of-type .p-message__item-subTtl::before { content: "\201C"; margin-right: 8px; color: var(--hk-gold); font-family: Georgia, serif; font-size: 1.7em; line-height: 0; vertical-align: -.2em; }
.p-message__item:only-of-type .p-message__item-text > p:not(.p-message__item-subTtl):not(.p-message__item-name) { color: rgb(255 255 255 / .88) !important; font-size: clamp(13px, 1.08vw, 16px) !important; line-height: 2 !important; }
.p-message .p-message__item-name { margin-top: clamp(24px, 2.4vw, 34px) !important; color: #ffffff !important; }
.p-message .p-message__item-name span { color: var(--hk-gold) !important; }
.p-message__item-img { grid-area: image !important; position: relative !important; z-index: 1 !important; margin: 0 !important; align-self: stretch !important; }
.p-message__item:only-of-type .p-message__item-img::before { display: none !important; content: none !important; }
.p-message__item-img > img:not(.p-message__item-deco) { width: 100% !important; height: 100% !important; min-height: 520px !important; max-height: 680px !important; aspect-ratio: auto !important; border: 0 !important; border-radius: clamp(28px, 3vw, 46px) !important; object-fit: cover !important; object-position: 54% center !important; box-shadow: 0 24px 54px rgb(10 58 112 / .18) !important; rotate: 0deg !important; }

.l-footer-body__cta-entry { overflow: hidden !important; }
.l-footer-body__cta-entry-people-decorate { right: clamp(8px, 1vw, 18px) !important; bottom: 0 !important; width: clamp(170px, 15vw, 230px) !important; height: clamp(140px, 12vw, 188px) !important; overflow: hidden !important; pointer-events: none !important; }
.l-footer-body__cta-entry-people.--profile { left: 2% !important; bottom: 4% !important; width: 47% !important; }
.l-footer-body__cta-entry-people.--ingots { right: 1% !important; bottom: 4% !important; width: 47% !important; }
.l-footer-body__cta-entry-people-svg { display: none !important; }

@media (max-width: 63.99rem) {
  .p-message__body { width: min(100% - 40px, 720px) !important; }
  .p-message__item:only-of-type { grid-template-columns: 1fr !important; grid-template-areas: "title" "image" "text" !important; gap: 30px !important; }
  .p-message__item-img { min-height: 420px !important; }
  .p-message__item-img > img:not(.p-message__item-deco) { min-height: 420px !important; max-height: 540px !important; }
  .l-footer-body__cta-entry-people-decorate { width: clamp(130px, 35vw, 190px) !important; height: clamp(118px, 31vw, 166px) !important; }
}
@media (max-width: 47.99rem) {
  .p-message { padding-block: 72px !important; }
  .p-message__item:only-of-type .p-message__item-title { align-items: flex-start !important; flex-direction: column !important; gap: 14px !important; }
  .p-message__item-img { min-height: 340px !important; }
  .p-message__item-img > img:not(.p-message__item-deco) { min-height: 340px !important; max-height: 440px !important; }
  .p-message__item:only-of-type .p-message__item-text { padding: 30px 24px 36px !important; }
  .l-footer-body__cta-entry-people-decorate { width: 122px !important; height: 116px !important; }
}

/* お知らせの日付とカテゴリピル：
   日付列は cqi 固定なのに font-size に 14px の下限があり、1024px で
   列を 12.4px はみ出していた。列を広げるとピルが本文へ食い込むので、
   下限のほうを cqi 側と整合する値まで下げる。
   1218px 以上では cqi が 14px を超えるため、見た目は従来どおり。 */
@media (min-width: 64rem) {
  .p-information__list-item-date { font-size: max(12px, 2.31065cqi); letter-spacing: 0; }
  .p-information__list-item-category { letter-spacing: 0; }
}
/* ピルの文字が枠に接触するのは 1024-1075px の狭い帯。ここだけ詰める。 */
@media (min-width: 64rem) and (max-width: 76rem) {
  .p-information__list-item-category { font-size: max(13px, 2.18229cqi); padding-inline: 4px; }
}

/* ---------------------------------------------------------
   8. Initiative：事業カード4点のイラストを同倍率に揃える
   ---------------------------------------------------------
   SVG 側は既に viewBox 0 0 160 120 / 波線 y=18 / 接地 y=104 で
   完全に正規化されている。崩していたのは --w1〜--w4 の個別幅だけ。
   1つに束ねれば波線も接地線も4枚で一直線に並ぶ。SVG は触らない。
--------------------------------------------------------- */
.p-initiative__card-img.--w1,
.p-initiative__card-img.--w2,
.p-initiative__card-img.--w3,
.p-initiative__card-img.--w4 { width: 28vw; }

@media (min-width: 64rem) {
  .p-initiative__card-img.--w1,
  .p-initiative__card-img.--w2,
  .p-initiative__card-img.--w3,
  .p-initiative__card-img.--w4 { width: 9.1666vw; }
}

/* カードは li に role="button" を付けたので、輪郭が角丸に収まるようにする */
.p-initiative__card-item:focus-visible { outline-offset: 3px; }

/* ---------------------------------------------------------
   9. コントラスト
   ---------------------------------------------------------
   浅葱 #2DB8C5 地の白は 2.39:1 で AA（本文 4.5 / 大字 3.0）に届かない。
   方針を決める：
   ・読ませる文字（本文・日付・注記）は勝色 #17202B（浅葱地 6.87:1）へ。
   ・見出し（24px 以上・700 以上）は白のまま。ブランド表現として残す
     判断で、AA 未達を承知のうえ。ここを変えると面の設計が別物になる。
   ・文字色としての浅葱（生成り地 2.20:1 / 白地 2.39:1）は藍へ逃がす。
--------------------------------------------------------- */


/* 添え書きの opacity .85 は 146行と1405行の2箇所にある。
   セレクタが同じなのでこの1行で両方に効く（2.11:1 → 2.39:1）。 */
.c-heading--sm { opacity: 1; }

/* 文字としての浅葱を藍へ */
.p-about__content-title--accent { color: var(--cl-navy); }
.p-information__list-item-category { background: var(--cl-white); color: var(--cl-navy); }

/* ---------------------------------------------------------
   10. フッター
--------------------------------------------------------- */
/* ① キャラ写真の角丸。2056行は .l-footer-loop-char（ハイフン1本）で
      1要素にもマッチしていなかった。BEM の正しい綴りで置き直す。
      rotate が掛かる 01 / 03 のために親 span 側にも radius を持たせる。 */
.l-footer-loop__char,
.l-footer-loop__char img { border-radius: var(--r-md); overflow: hidden; }

/* ③ 装飾写真 data-item="04" が ENTRY 下の「採用スケジュール」を覆い、
      文字の下 1/3 を欠けさせるうえクリックまで奪っていた。
      .l-footer-loop は position:relative / z-index:auto なので、
      z-index を持つ CTA 側が後勝ちで前面に来る。
      写真のはみ出し演出（01 も上端から出ている）は殺さない。 */
.l-footer-body__cta { position: relative; z-index: 1; }


/* =========================================================
   切り抜き素材（白フチは画像に焼き込み済み）
   ---------------------------------------------------------
   参考サイトのヒーローと同じく、人物と物が地の上に直接立つ。
   矩形の枠・角丸・影は画像側が持っているので CSS では付けない。
   重なりは DOM 順のみ（参考サイトも z-index 指定はゼロ）。
   ========================================================= */

/* 切り抜きは縦横比がまちまちなので、幅だけ決めて高さは成り行きにする */


/* 配置。切り抜きは縦横比がまちまちなので、地に立つものは bottom で留める。
   top で置くと背の高い素材が下端から溢れる（実際に恐竜と本社ビルが切れていた）。
   大きさの序列は参考サイトに倣い、主役と最小で約5倍の開きを付ける。 */
@media (min-width: 64rem) {


  /* 主役。コピーの右に置き、文字に被らせない */

  /* 右側の人物2点 */

  /* 上段の小物 */

  /* 下段。地に立たせる */
  /* 恐竜 */


  /* コピーは左上へ。主役の左に置き、マーキーの上で完結させる */

  /* 英文マニフェストは右上の空きへ。人物に重ねない */

  /* 手描きラベルは素材に添える位置へ */

}


/* 上段の素材がヘッダー（浮遊カード、下端 約100px）に潜っていたので下げる。
   ヒーローは 2000/1060＝1440px 時 763px しかないため、
   上段は 15% 以下に置かない。右端の見切れも合わせて詰める。 */
@media (min-width: 64rem) {
    /* 包装材 */
  /* 押出材 */
    /* パートナー */
 /* 本社ビル */
 /* メンバー */

  /* 英文マニフェストは右上。ヘッダーを避け、幅も詰めて切れないように */

  /* コピーもヘッダー下へ */

}


/* =========================================================
   切り抜きの形が崩れていた件の修正
   ---------------------------------------------------------
   旧レイアウトの矩形写真用に .p-hero__img.--iNN へ個別の
   aspect-ratio（238/550 など）が残っており、img が
   object-fit: cover で「その比率に切り取られて」いた。
   例：恐竜は 869×1001（ほぼ正方）を 130×299 に押し込まれていた。
   切り抜きは素材の縦横比がそのまま形なので、比率を外して
   幅だけ決め、高さは成り行きにする。
   ========================================================= */


/* =========================================================
   ヒーローの重なりを実測にもとづいて解消する
   ---------------------------------------------------------
   実測(1440px / hero高さ763px)で判明した衝突:
     ・包装材(--i04 x288-403,y130-304) が コピー(x72-531,y168-294) に被る
     ・英文(x1195-1411,y114-310) と パートナー(--i07 x1238-1368,y145-327) が重なる
     ・人物の下端が 664〜710 で、マーキー上端 652 に膝から食われていた
   人物は参考サイトと同じく地面（hero下端）まで伸ばし、
   マーキーが脛のあたりを横切る形にする。
   ========================================================= */
@media (min-width: 64rem) {
  /* 人物は地に立たせる。マーキーは脛を横切る */
      /* 主役 */
     /* 恐竜 */


  /* 包装材はコピーの右上へ逃がす */

  /* パートナーは英文の下へ下げる */


  /* 英文は右上いっぱい。幅を確保して切れを止める */

}


/* ヒーロー微調整 その2（撮影で確認しながら）
   ・押出材がコピーの「価」に被っていた → コピーの下へ落とす
   ・主役の脚がマーキーに完全に飲まれていた → マーキーを下げ、
     参考サイトと同じく hero 下端で切れる位置にする（bottom: -2cqi）
   ・本社ビルとグループが右端で重なっていた → ビルを上へ逃がす
   ・Food & Agri のラベルが主役に乗っていた → 左下へ */
@media (min-width: 64rem) {
   /* 押出材 */
/* 本社ビル */
  /* パートナー */

  /* O-01: マーキーはヒーロー外の継ぎ目帯（.l-seam-loop）へ移設したため bottom 指定は無効 → 削除 */

}


/* ヒーロー微調整 その3（撮影で確認しながら）
   ・本社ビルが英文「AND DELIVER IT」に被っていた → 左下へ移す
   ・OREGON とグループが右下で団子になっていた → 縦にずらす
   ・恐竜がマーキーに埋もれていた → 少し持ち上げる
   ・ストラップが主役の陰に隠れて Food & Agri のラベルが何も指していなかった
     → 主役の左手前へ出す */
@media (min-width: 64rem) {
   /* 本社ビル */
   /* OREGON */
             /* グループ */
             /* 恐竜 */
              /* ストラップ */
  /* 押出材 */
   /* Metal → 地金 */
  /* Food & Agri → ストラップ */
}


/* =========================================================
   ヒーロー：構図の組み直し
   ---------------------------------------------------------
   直した点（原寸で確認しながら）:
   ・左下に物が渋滞し、右上が空いていた → 左右へ均等に散らす
   ・人物より物のほうが多く、賑わいが出ていなかった
     → 人物6点／物3点／遊び1点 の比率にする（参考サイトも人物が主）
   ・金の航路線が人物の前を横切って雑然としていた → 人物の背面へ
   ・ラベルが対象を指していなかった → それぞれの素材の隣へ
   ・主役の脚がマーキーに完全に飲まれていた → マーキーを少し下げる
   ========================================================= */
@media (min-width: 64rem) {
  /* 奥行き：手前ほど大きく、下に置く */
  /* 押出材 */
  /* 社員（認定書） */
  /* 地金 */
  /* 恐竜 */
  /* 主役 */
  /* 包装材 */
  /* ストラップ */
  /* フード＆アグリ */
  /* 話す社員 */
  /* メンバー */

  /* 航路線は人物の背面へ。前に出ると線が体を横切って濁る */


  /* O-01: マーキー移設により bottom 指定は無効 → 削除 */

  /* コピーは字間を締めて塊にする。緩いと写真に負ける */


  /* ラベルは対象のすぐ隣に置く */
  /* Metal → 押出材・地金 */
  /* Package → 包装材 */
  /* Lifestyle → ストラップ */
  /* Food & Agri → 担当者 */
}


/* ヒーローの詰め（原寸で確認しながら）
   ・金の幾何マークが恐竜や空中に散らばり、瓦礫のように見えていた
     → 切り抜きが主役の画面では不要。ヒーローからは外す
   ・恐竜が傾いて口の中の人が横倒しに見えていた → 起こす
   ・ストラップが小さすぎて判別できず Lifestyle とも合わなかった
     → タオルを掲げる社員に差し替え、人物として地に立たせる */
@media (min-width: 64rem) {
  /* A-02: .p-hero__img-decorate { display: none } は要素の撤去に伴い削除 */
  /* 恐竜 */
      /* タオルの社員 */
       /* フード＆アグリ */
                 /* 地金 */
   /* Lifestyle → タオル */
   /* Food & Agri */
}


/* =========================================================
   ヒーロー：最終の詰め
   ---------------------------------------------------------
   ・金の幾何マークは 721/722行の `display: block` に打ち消されていた
     → 詳細度を上げて確実に外す。切り抜きが主役の画面に幾何の棒は要らない
   ・人物4点が右に団子になり、左と中央が空いていた
     → 画面幅いっぱいに等間隔で配る（人物6・物3・遊び1）
   ========================================================= */
@media (min-width: 64rem) {
  /* A-02: 装飾8点を打ち消していた display:none !important 群は、
     要素そのものを撤去したため不要になり削除 */

  /* 左 → 右へ。奥行きは大きさで作る */
  /* 押出材 */
  /* 社員（認定書） */
  /* 地金 */
  /* タオルの社員 */
 /* 恐竜 */
  /* 主役 */
  /* 包装材 */
  /* フード＆アグリ */
  /* 話す社員 */
  /* R-12(3)/V-10: 88cqi/12.5cqi では画面座標 1267.2〜1447.2px で右端から7px見切れ、
     意図に見えない断ち切りになっていた。1252.8〜1425.6px（右端から14.4pxの余白）へ。
     隣の --i03（1094.4〜1267.2px）と14.4px重なるが、群像の切り抜き同士の重なりは
     --i08/--i09 等と同じ扱いで問題ない */
  /* メンバー */

  /* ラベルは対象の真上・真横に。人物には重ねない */
  /* Metal */
  /* Package */
  /* Lifestyle */
  /* Food & Agri */
}


/* =========================================================
   文字の被り・切れ・色の総ざらい（原寸で確認した13件）
   ========================================================= */
@media (min-width: 64rem) {

  /* ① 残業(05): 説明文が時計のイラストに被って読めなかった。
        時計を少し小さく上へ、本文はイラストの右から始める。 */
  .--n05 .p-about__history-figure { left: -3%; top: 6%; width: 31%; }
  .--n05 .p-about__history-text   { margin-left: 24%; }

  /* ② 始業(06): 本文が朝日のイラストの接地線に触れていた。 */
  .--n06 .p-about__history-text   { margin-top: 12vw; }

  /* ③ CAREER の脇ラベルが右端で 62px 切れていた。
        見出しが grid の全幅に伸び、脇ラベル（left:100%+1rem）が
        画面外へ押し出されていたのが原因。幅を文字ぶんに縮める。 */
  /* grid が見出しを列幅いっぱいに stretch するため width だけでは効かない。
     後続の型指定が position:absolute を再指定し続けるので、ここだけ確定させる */
  .p-welfare .c-heading { width: max-content; justify-self: start; max-width: 100%; }
  /* R-11(1)/D-07: 親 .c-heading が grid item のため inline-block が改行し、
     CAREERだけロゴタイプが2段（上端差58px、他6セクションは17〜18px）になっていた。
     親を flex にしてベースライン揃えの右並びに戻す。156行の display:inline-block は後勝ちで上書き。 */
  .p-welfare .c-heading { display: flex; align-items: baseline; column-gap: 16px; flex-wrap: nowrap; }
  .p-welfare .c-heading--sm {
    position: static !important;
    display: inline-block !important;
    /* R-11(1): column-gap:16px と二重になるので margin-left は削除 */
  }

  /* ④ ENTRY: 本文が右の人物写真の下に潜って読めなかった。 */
  .l-footer-body__cta-entry-copy { padding-right: 34%; position: relative; z-index: 2; }
  .l-footer-body__cta-entry-people-decorate { z-index: 1; }
}

/* ⑤ 数字の単位が浅葱（生成り地 2.2:1）で読めなかった → 勝色へ。
      「少数精鋭」は四字熟語なので全体を藍でひと塊に。 */
.p-about__history-num i { color: var(--cl-dark); }
.p-about__history-num.--word,
.p-about__history-num.--word i { color: var(--cl-navy); }

/* ⑥ Message: 01/02 の写真の縦横比が揃っていなかった → 比を統一（O-11: 拡大列に合わせ3:4へ） */
.p-message__item-img img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* ⑦ フッターのキャラを切り抜きに替えたので、矩形用の角丸・背景を外す */
.l-footer-loop__char,
.l-footer-loop__char img {
  border-radius: 0; overflow: visible; box-shadow: none; background: none;
  object-fit: contain; height: auto;
}

/* ⑧ フッターの入れ子ナビ（数字で見る／4つの事業）が中途半端な字下げに見えた
      → 階層として明示する（少し小さく・薄く・頭に罫） */
.l-footer-body__nav-main > li > ul { margin: 6px 0 10px 1.1em; }
/* A-12(1): 親 ul の opacity:.8（609行）との二重掛けで 0.75x0.8=0.60、
   実効 #717579・4.25:1 まで落ちていた → opacity を外して 8.0:1 に戻す。
   薄さで作っていた階層差は字サイズ側で持たせる */
.l-footer-body__nav-main > li > ul a { font-size: .95em; }
.l-footer-body__nav-main > li > ul li::before { content: "\2500 "; opacity: .5; }
.l-footer-body__nav-main > li > ul li { display: flex; align-items: baseline; gap: 2px; }

/* ⑨ ヒーロー: 押出材が空中に浮いていた → 下げて Metal ラベルと組にする。
      Lifestyle ラベルはタオルを掲げる社員のすぐ上へ。 */
/* 05/06: %の重ね技をやめ、イラスト列と本文列を完全に分ける。
   （margin の相殺で被りが再発し続けたため） */
@media (min-width: 64rem) {
  /* O-13: この2項目だけ 32% / 42% と別の左端になっていた（実測 x=220 / 260）
     → 他5項目と同じ「イラストが左＝41.7%・幅53.3%」の1本の基準線に乗せる。
     n06 のイラストは 38% だと本文左端とのクリアランスが15pxで安全余白16pxを割るため 37% へ */
  .--n05 .p-about__history-figure { left: -3%; top: 0;   width: 30%; }
  .--n05 .p-about__history-inner  { margin-left: 41.7%; width: 53.3%; }
  .--n05 .p-about__history-text   { margin-left: 0; }

  .--n06 .p-about__history-figure { left: 0; top: 12%; width: 37%; }
  .--n06 .p-about__history-inner  { margin-left: 41.7%; width: 53.3%; }
  .--n06 .p-about__history-text   { margin-left: 0; width: auto; margin-top: 1vw; }
}


/* =========================================================
   フッターの切り抜きが首から上で切れていた件
   ---------------------------------------------------------
   原因は2つ:
   ・.l-footer { overflow: clip }（ページトップボタン対策で入れたもの）が
     マーキー帯から上へはみ出すキャラの頭を刈っていた
   ・ENTRY ボックスも同様に切っていた上、全身素材を幅指定で置いたため
     胴体だけが箱に残っていた → 半身素材(c13)に替え、頭が箱から
     少し覗く「ステッカー」の置き方にする
   ========================================================= */
.l-footer { overflow: visible; }
.l-footer-loop { overflow: visible; }

/* キャラは高さで揃える（全身のまま幅指定だと縦に伸びすぎる） */
.l-footer-loop__char img { height: 15vw; width: auto; }
@media (min-width: 64rem) {
  .l-footer-loop__char[data-item="01"] img { height: 13.5vw; }
  .l-footer-loop__char[data-item="02"] img { height: 8.5vw; }   /* 冊子 */
  .l-footer-loop__char[data-item="03"] img { height: 12.5vw; }
  .l-footer-loop__char[data-item="04"] img { height: 14vw; }
  .l-footer-loop__char[data-item="05"] img { height: 12vw; }
}

/* ENTRY の人物: 半身が箱の右下から生え、頭が上辺から覗く */
.l-footer-body__cta-entry { overflow: visible; }
@media (min-width: 64rem) {
  /* A-07: opacity:1 / z-index:1 は基底へ移したのでここでは寸法と位置だけ */
  .l-footer-body__cta-entry-people-decorate {
    width: 11.5vw;
    right: 1.2vw;
    bottom: 0;
  }
  .l-footer-body__cta-entry-people { width: 100%; height: auto; }
  /* 本文は人物の手前で折り返す */
  .l-footer-body__cta-entry-copy { padding-right: 30%; }
}

/* ページトップボタンのはみ出しは overflow ではなく位置で解決する */
/* O-14(4): top:-2.5625vw だと 1440px で円の中心（y8683.6）を #message の
   色境界がちょうど横切っていた → 2.5vw（36px）下げて生成り面に完全に落とす。
   interview 側（境界 y=258 / ボタン y222-293）も同じ指定で解消する */
.l-footer__btn-top { top: 2.5vw; }


/* =========================================================
   色味の変化（浅葱一色の印象を崩す）
   ---------------------------------------------------------
   面の並びを 浅葱 / 浅葱 / 生成り / 生成り / 浅葱 / 浅葱 / 藍 / 生成り に。
   Message は藍地＝締めの面。白文字 11.28:1 で AA を満たす。
   ========================================================= */
.p-company { background: var(--cl-bg); color: var(--cl-dark); background-image: none; }
.p-company .c-heading--lg { color: var(--cl-navy); }
.p-company .c-heading--sm { color: var(--cl-dark); opacity: .7; }

/* O-09: 面の並びの7番目と8番目が入れ替わっていた（規約は …浅葱→浅葱→藍→生成り）。
   Message を生成りへ戻し、藍は7番目の Interview が担う。
   浅葱の連続 3,208.6px（3.6ビューポート）もこれで断ち切れる */
.p-message { background: var(--cl-bg); color: var(--cl-dark); background-image: none; }
.p-message .c-heading--lg { color: var(--cl-navy); }
.p-message .c-heading--sm { color: var(--cl-dark); opacity: .7; }
.p-message__item-title--number { color: var(--cl-navy); } /* 浅葱のままだと生成り地で1.9:1 */
.p-message__item-title--ttl::after { background: rgb(23 32 43 / .35); }
.p-message__item-name { color: rgb(23 32 43 / .85); }

/* 言葉主導になった項目の組み（「休みは、ちゃんと。」等） */
.p-about__history-num.--word { font-size: max(24px, 2.4vw); letter-spacing: .04em; }
.p-about__history-num.--word i {
  font-style: normal;
  font-size: 1em;
  color: var(--cl-navy);
  margin-left: 0;
}


/* =========================================================
   社員インタビューページ（interview.html）
   ---------------------------------------------------------
   写真を主役に。切り抜きを大きく置き、Q&Aが横に流れる。
   人物ごとに 生成り / 浅葱 の面を交互に。
   ========================================================= */
body.is-subpage { padding-top: 0; }

/* --- ページの顔 --- */
.p-iv-hero {
  position: relative;
  background: var(--cl-vivid);
  color: var(--cl-dark); /* O-02: 浅葱地の白2.39:1→勝色6.87:1 */
  padding: 34vw 0 8vw;
  overflow: clip;
  background-image:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .10) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .10) 0 1.4px, transparent 2.1px);
  background-size: 22px 38.1px, 22px 38.1px;
  background-position: 0 0, 11px 19px;
}
.p-iv-hero__en {
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: max(48px, 11vw);
  line-height: .9;
  letter-spacing: .02em;
  opacity: .92;
}
.p-iv-hero__title {
  font-family: var(--ff-jp-heading);
  font-weight: 800;
  font-size: max(24px, 6.4vw);
  line-height: 1.5;
  margin-top: 2vw;
}
/* R-10(1)/SP-05: SPのリードも14px→15pxへ（末尾に上書きが無いためここが勝者） */
.p-iv-hero__lead { margin-top: 3vw; font-size: max(15px, 4vw); line-height: 2; font-weight: 500; }
.p-iv-hero__faces { display: none; }

@media (min-width: 64rem) {
  .p-iv-hero { padding: 11vw 0 5vw; }
  /* R-03(5)(6)/D-02: サイト最大の文字が意味を持たない欧文だった。
     欧文ラベルを下げ和文の主題を上げる: INTERVIEW 72px : 見出し48.2px = 1.5:1 */
  .p-iv-hero__en { font-size: 5vw; }
  .p-iv-hero__title { font-size: 3.35vw; margin-top: .8vw; }
  .p-iv-hero__lead { font-size: max(14px, 1.0625vw); margin-top: 1.4vw; }
  /* 4人の切り抜きが右端に並ぶ */
  .p-iv-hero__faces {
    display: flex; align-items: flex-end;
    position: absolute; right: 3vw; bottom: 0;
    pointer-events: none;
  }
  .p-iv-hero__faces img { height: 17vw; width: auto; }
  .p-iv-hero__faces img:nth-child(2) { height: 20vw; margin-left: -2.5vw; }
  /* R-13(2)/D-12: c13(A.Y)だけバストアップ素材で頭部が他の約2倍。
     人物パネルで採っている62%補正をヒーロー群像にも横展開する */
  .p-iv-hero__faces img:nth-child(3) { height: 11.2vw; margin-left: -2vw; }
  .p-iv-hero__faces img:nth-child(4) { height: 18.5vw; margin-left: -2.2vw; }
}

/* --- 顔で選ぶ目次 --- */
.p-iv-index { background: var(--cl-bg); padding: 6vw 0; }
.p-iv-index__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; }
.p-iv-index__list a { display: grid; justify-items: center; gap: 8px; font-size: max(10px, 2.6vw); font-weight: 700; color: var(--cl-dark); }
.p-iv-index__list img { height: 16vw; width: auto; transition: translate .3s var(--ease-power3-out, ease); }
.p-iv-index__list a:hover img { translate: 0 -6px; }
/* O-04: hover時の金バー。装飾専用・テキスト非交差でO-07の金の役割統一と整合 */
.p-iv-index__list a::after {
  content: ""; display: block;
  width: 48px; height: 3px;
  border-radius: 999px;
  background: var(--cl-accent);
  opacity: 0; transition: opacity .3s;
}
.p-iv-index__list a:hover::after { opacity: 1; }
.p-iv-index__name { font-size: max(13px, .9vw); font-weight: 700; }
@media (min-width: 64rem) {
  .p-iv-index { padding: 2.5vw 0; }
  /* O-02(design V-02): 12vw=173pxでは顔が約25px四方で「切り抜き写真が主役」が
     一覧で機能しない → 18vw=259pxに拡大し、帯の左右余白も76vwで埋める */
  .p-iv-index__list { width: 76vw; margin-inline: auto; gap: 2vw; }
  .p-iv-index__list img { height: 18vw; }
  /* R-13(2)/D-12: 一覧でもc13(FILE03)だけ62%に縮め、差分をmargin-topで埋めて
     4項目のラベル・氏名のベースラインを揃える */
  .p-iv-index__list li:nth-child(3) img { height: 11.2vw; margin-top: 6.8vw; }
  .p-iv-index__list a { font-size: max(12px, .85vw); }
  /* O-02: 名前とFILEラベルの2行に階層を付ける */
  .p-iv-index__name { font-size: max(16px, 1.25vw); }
  .p-iv-index__label { font-size: max(11px, .78vw); opacity: .85; }
}

/* --- 人物セクション --- */
.p-iv-person { padding: 16vw 0; }
.p-iv-person.--cream { background: var(--cl-bg); color: var(--cl-dark); }
.p-iv-person.--aqua {
  background: var(--cl-vivid); color: var(--cl-dark);
  background-image:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .10) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .10) 0 1.4px, transparent 2.1px);
  background-size: 22px 38.1px, 22px 38.1px;
  background-position: 0 0, 11px 19px;
}
/* O-03: 白カードの窓クロップを廃止。切り抜き写真が主役という規約に照らし
   「切らない側＝contain」へ一本化する（4人4様の扱いを解消。共通指定は末尾） */
.p-iv-person__photo { text-align: center; }
.p-iv-person__photo img { width: 100%; height: auto; }
.p-iv-person__no {
  font-family: var(--ff-en); font-weight: 700;
  font-size: max(13px, 3.4vw); letter-spacing: .18em;
  color: var(--cl-navy);
}
.p-iv-person.--aqua .p-iv-person__no { color: var(--cl-dark); } /* O-02: 浅葱地の白2.39:1→勝色 */
/* O-12: interviewページに金の差し色を導入（規約どおり装飾専用・テキスト非交差のFILEラベル下バー） */
.p-iv-person__no::after {
  content: "";
  display: block;
  width: 48px; height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--cl-accent);
}
.p-iv-person__tags { display: flex; gap: 8px; margin-top: 2vw; flex-wrap: wrap; }
.p-iv-person__tags span {
  background: var(--cl-white); color: var(--cl-navy);
  border-radius: 999px; padding: 4px 14px;
  font-size: max(11px, 2.9vw); font-weight: 700;
}
.p-iv-person.--cream .p-iv-person__tags span { background: var(--cl-navy); color: var(--cl-white); }
.p-iv-person__catch {
  font-family: var(--ff-jp-display);
  font-weight: 900;
  font-size: max(24px, 6.4vw); /* O-11: Zen Old Minchoは24px未満禁止の規約遵守 */
  line-height: 1.45; /* R-02(5)/D-17: 明朝大見出しの1.7は緩すぎて塊に見えない → SPは1.45 */
  margin-top: 3.5vw;
}
/* A-12(2): opacity:.75 が 1024px未満だけ残り、浅葱地の勝色 6.87:1 が
   実効 #1d4652・4.29:1 に落ちていた（O-02の是正を同じ要素の opacity が打ち消していた） */
.p-iv-person__name {
  font-family: var(--ff-en); font-weight: 700;
  /* R-13(1): SPでも 人名＞設問＞本文 の順序を保つ */
  font-size: max(13px, 3.7vw); letter-spacing: .14em;
  margin-top: 2vw;
}

/* --- Q&A --- */
.p-iv-qa { margin-top: 8vw; display: grid; gap: 8vw; }
.p-iv-qa__q {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--ff-jp-heading); font-weight: 800;
  font-size: max(15px, 4.3vw); line-height: 1.6;
}
.p-iv-qa__q-mark {
  flex: 0 0 auto;
  font-family: var(--ff-en); font-weight: 700;
  color: var(--cl-white); background: var(--cl-navy);
  border-radius: 999px; padding: 2px 12px;
  font-size: .82em; letter-spacing: .06em;
}
.p-iv-person.--aqua .p-iv-qa__q-mark { background: var(--cl-white); color: var(--cl-navy); }
.p-iv-qa__a { margin-top: 2.4vw; font-size: max(13px, 3.7vw); line-height: 2; font-weight: 400; }
.p-iv-person.--aqua .p-iv-qa__a { font-weight: 500; }

@media (min-width: 64rem) {
  .p-iv-person { padding: 6.5vw 0; }
  .p-iv-person__grid {
    display: grid;
    grid-template-columns: 30vw minmax(0, 1fr);
    column-gap: 4.5vw;
    align-items: start;
  }
  /* 写真は sticky で追いかける。読んでいる間ずっと本人の顔がある */
  .p-iv-person__photo {
    position: sticky;
    top: calc(var(--header-height, 90px) + 2vw);
  }
  /* O-03: 3:4窓（cover）は FILE01 の縦38.9%を腰で切り落としていた → 末尾の contain 統一へ移管 */
  .p-iv-person.--flip .p-iv-person__grid { grid-template-columns: minmax(0, 1fr) 30vw; }
  .p-iv-person.--flip .p-iv-person__photo { order: 2; }
  .p-iv-person__no { font-size: max(14px, 1.05vw); }
  .p-iv-person__tags { margin-top: .8vw; }
  .p-iv-person__tags span { font-size: max(12px, .82vw); padding: 4px 16px; }
  /* R-03(8): 通し番号64px＞キャッチ56pxのジャンプ率逆転を解消（1440pxで64.1px）
     R-02(5)/D-17: 明朝の行間1.6→1.32でキャッチを一つの塊として立てる */
  .p-iv-person__catch { font-size: 4.45vw; line-height: 1.32; margin-top: 1.4vw; }
  /* O-07(design V-08): 56pxキャッチ直下で署名13.68px・opacity.75は最弱要素だった → 起こす */
  /* R-13(1)/D-13: 人名20.16px＜設問21.6px の階層逆転を解消。
     人名25.9 ＞ 設問21.6 ＞ 本文15.3 の順序を確定させる。
     藍は生成り地9.6:1／浅葱地4.89:1 で本文基準を満たす */
  .p-iv-person__name { font-size: max(18px, 1.8vw); margin-top: .8vw; color: var(--cl-navy); }
  .p-iv-qa { margin-top: 3vw; gap: 2.6vw; }
  .p-iv-qa__q { font-size: max(16px, 1.5vw); } /* O-04(design V-05): 16ブロック等圧の解消。Qを一段立てる */
  .p-iv-qa__a { margin-top: .9vw; font-size: max(14px, 1.0625vw); max-inline-size: 44em; }
}

/* --- 締めのCTA --- */
.p-iv-cta { background: var(--cl-navy); color: var(--cl-white); padding: 12vw 0; text-align: center; }
.p-iv-cta__txt { font-family: var(--ff-jp-heading); font-weight: 800; font-size: max(17px, 4.8vw); line-height: 1.8; }
.p-iv-cta .c-button-primary { margin-top: 5vw; color: var(--cl-white); display: inline-flex; }
@media (min-width: 64rem) {
  .p-iv-cta { padding: 5vw 0; }
  .p-iv-cta__txt { font-size: 1.8vw; }
  .p-iv-cta .c-button-primary { margin-top: 1.6vw; }
}


/* O-04 追補: #03の金下線を見出し下へ出した分、下線と本文が接しないよう
   見出しブロックの下マージンを下線の実高（幅×44/260のうちインクは約79%）+8px+余白4px以上に拡張 */
.p-welfare__subheading:has(.p-welfare__heading-decoration.--d3) { margin-bottom: calc(12px + 6.7vw); }
@media (min-width: 64rem) {
  .p-welfare__subheading:has(.p-welfare__heading-decoration.--d3) { margin-bottom: calc(16px + 2.2vw); }
}

/* O-09: Message を生成り地へ戻したので、白 !important のままだと 1.06:1 になる → 勝色へ */
.p-message__item-subTtl,
.p-message__item-text,
.p-message__item-title--ttl,
.p-message .p-message__item-name { color: var(--cl-dark) !important; }
.p-message__item-text { opacity: .92; }

/* Movie 生成り化に伴い、ナビ矢印ボックスの白地×白矢印を反転 */
.p-company .c-box { background: var(--cl-navy); }
.p-company .c-box svg { fill: var(--cl-white); }


/* =========================================================
   規約: 装飾は文字と交差しない
   About の航路線が見出し・本文の上を横切っていたため撤去。
   航路線はヒーロー（文字のない領域）だけに残す。
   ========================================================= */
.p-about__route { display: none !important; }


/* =========================================================
   2026-08-26 オーケストレーター裁定分（O-07補 / O-08 / O-09 / O-12）
   ========================================================= */

/* O-07補: 見出し下の金バーで .c-heading--lg の高さが14px増えるため、
   PCの絶対配置の添え字（bottom .3em 基準）が見出しテキストから下へずれる。
   バー分を差し引いてテキストのベースライン合わせを維持する */
@media (min-width: 64rem) {
  .c-heading--sm { bottom: calc(.3em + 14px); }
}

/* O-08: FILE01-04が完全同型の等速反復で山がなかった → 番号を大型化し
   ブロック冒頭にジャンプ率を作る（1440pxで約64px。font-familyは親の--ff-enを継承） */
.p-iv-person__no-num {
  display: inline-block;
  /* R-03(7)/D-02: サイト最大の文字が通し番号なのはジャンプ率の逆転。
     番号40.3px : キャッチ64.1px = 1:1.6 に組み直す（1440px） */
  font-size: max(28px, 2.8vw);
  line-height: 1;
  vertical-align: baseline;
}

/* O-03: 浅葱面だけカード解除する二枚看板をやめ、4人とも同じ扱いに統一（末尾の共通指定へ統合） */

/* O-12: フッターENTRYの矢印ボタンが切り抜き人物の右腕〜手元に載っていた →
   人物は右肩の見切り位置が決まっているため動かさず、ボタンを人物エリアの左外へ退避 */
@media (min-width: 64rem) {
  .l-footer-body__cta-entry-copy .c-box { right: 14.5vw; }
  /* O-12補: 実測で左退避後の矢印がコピー末尾と交差したため、テキスト領域を矢印手前まで短縮 */
  .l-footer-body__cta-entry-copy { padding-right: 17vw; }
}

/* =========================================================
   コーダー適用分（O-04 / O-08 / O-11）
   ========================================================= */

/* O-04(design V-05): 各FILEの核になる1文へ金の下線。
   半透明マーカー案は字面下30%に被り「装飾は文字と交差しない」と衝突するため、
   インラインボックス最下端の4px金バー（下線型・字面と非交差）に裁定 */
.p-iv-qa__a strong {
  font-weight: inherit;
  background: linear-gradient(var(--cl-accent), var(--cl-accent)) 0 100% / 100% 4px no-repeat;
}

/* O-08(design V-09): VIEW MORE矢印円のhover背景を金に。
   操作要素のアクセントなので「金は差し色のみ」の範囲内 */
@media (min-width: 64rem) {
  .c-button-primary.c-box--hover:hover .c-box--white { background: var(--cl-accent); }
}

/* O-11(visual V-02): 「朝のこと」ラベルと「朝は、ゆっくり。」見出しが縦に密着し
   ラベルが見出しの一部に見えていた → 余白で分離。
   縦組み化案は --n06 の inner 右端が100%のため列外はみ出しリスクがあり不採用 */
@media (min-width: 64rem) {
  .--n06 .p-about__history-title { margin-bottom: 1vw; }
}

/* =========================================================
   コーダー適用分 第2期（O-01 / O-02 / O-03 / O-04 / O-06 / O-07 / O-08 / O-09 / O-10 / O-14）
   ========================================================= */

/* ---------------------------------------------------------
   O-01 ヒーローとお知らせの継ぎ目に置くマーキー帯
   ---------------------------------------------------------
   1440px でヒーローは y0-763.2、旧マーキー帯は y676.1-812.1。
   c12(--i01) と c05(--i03) は bottom:0 で下端が 763.2＝ヒーロー最下端に接地しており、
   「帯を足元より下」に置ける空間がヒーロー内に存在しない。
   .p-hero は overflow:hidden なので下へ食い出させることもできず、
   人物を持ち上げれば「地に立つ」が壊れる。よって帯を外に出すのが唯一の非交差解。
   #top と #info はどちらも浅葱なので、帯は継ぎ目として連続して見える。
--------------------------------------------------------- */

/* @keyframes loop の translateX(-100%) は「自分の border-box 幅」ぶん動く。
   語間を wrapper 側の gap で持たせると 1403px 動いて 1424px 進むという食い違いが生まれ、
   30秒ごとに 21px 左へ瞬間移動していた（実測）。
   語間を padding-right として自分の幅の内側に入れると、移動量と繰り返しピッチが一致する。 */

@media (min-width: 64rem) {

  /* 7vw@1440 = 100.8px、line-height .84 で帯の実高 84.7px */

}

/* ---------------------------------------------------------
   O-02 フッターのゴーストワードマーク帯を人物の足元より下へ
   ---------------------------------------------------------
   実測(TOP/1440px): 帯 y9253.7-9361.7。人物 01=y9210.1-9419.8 / 02=y9199.7-9322.1 /
   03=y9202.1-9406.1 / 04=y9174.5-9376.1 で4体すべてが帯を跨いでいた。
   下端も 97.7px ばらついていた。interview も同構造。
   仕組み: .l-footer-loop の padding-bottom を 0 にして帯を容器の最下端へ置き、
   絶対配置の人物には margin-bottom を与えて帯の高さぶん持ち上げる
   （絶対配置要素では bottom 指定に margin-bottom が加算される）。
   +12px は 01/03 の rotate 6deg/8deg で角が下がるぶんの逃げ。
--------------------------------------------------------- */
@media (min-width: 64rem) {
  /* 人物を帯の高さぶん持ち上げると、そのぶん上の ENTRY / 募集要項カードの裏へ潜り込む
     （実測で 03/04 の頭部が 97-99px 隠れた）。持ち上げた量（7.5vw+12px）と
     解除した padding-bottom（3.5vw）を padding-top で足し戻し、人物の位置は元のまま
     帯だけが下へ抜ける形にする */
  .l-footer-loop { padding-top: calc(8.125vw + 7.5vw + 3.5vw + 12px); padding-bottom: 0; }
  .l-footer-loop__char { margin-bottom: calc(7.5vw + 12px); }
  /* 01(rotate 0deg) と 03(rotate 8deg) は外接矩形の下端が他2体より 7.7 / 12px 下がる
     （実測 9444.7 / 9449.0 対 9437.0）→ 4体の足元を1本の線に揃える微調整 */
  .l-footer-loop__char[data-item="01"] { margin-bottom: calc(8.04vw + 12px); }
  .l-footer-loop__char[data-item="03"] { margin-bottom: calc(8.34vw + 12px); }
  .l-footer-loop__char[data-item="02"],
  .l-footer-loop__char[data-item="03"],
  .l-footer-loop__char[data-item="04"] { bottom: 0; }
  /* 02(c23) は 122px と他3体(184-210px)に対して極端に小さく人物でもない → 帯に馴染む寸法へ */
  .l-footer-loop__char[data-item="02"] img { height: 12vw; }
}

/* ---------------------------------------------------------
   O-03 インタビュー4人の写真を同一の扱いに統一
   ---------------------------------------------------------
   実測(1440px): FILE01 cover で縦の38.9%を腰で切断、FILE03 は5.1%切断、
   FILE02/04 は contain で高さ706.9/1086.7。grid行高955.7に対し sticky の
   移動代が 380/249/380/0 となり FILE04 は一度も貼り付かなかった。
   箱高を 640px に固定すると4人とも移動代 955.7-640 = 315.7px で揃い、
   object-position: 50% 100% で足元/裾が箱の下端に接地してベースラインも揃う。
--------------------------------------------------------- */
.p-iv-person__photo { background: transparent; overflow: visible; border-radius: 0; text-align: center; }
@media (min-width: 64rem) {
  .p-iv-person__photo { height: 640px; display: flex; align-items: flex-end; justify-content: center; }
  .p-iv-person__photo img {
    height: 100%; width: 100%;
    aspect-ratio: auto;
    object-fit: contain; object-position: 50% 100%;
    filter: drop-shadow(0 8px 24px rgb(7 52 137 / .18));
  }
  /* c13(FILE03) はバストアップ素材。全身3枚と頭部の大きさを揃える。
     :nth-of-type は「型」で数えるため section.p-iv-hero を含めて FILE02 に当たってしまう
     （実測で #p2 の高さが 396.8px になった）→ id で名指しする */
  #p3 .p-iv-person__photo img { height: 62%; }
}
/* SP: FILE04 だけ 849px で 812px に収まらなかった件も同じ箱で処理する */
@media (max-width: 63.99rem) {
  .p-iv-person__photo { height: 62vh; display: flex; align-items: flex-end; justify-content: center; }
  .p-iv-person__photo img { height: 100%; width: 100%; object-fit: contain; object-position: 50% 100%; }
}

/* ---------------------------------------------------------
   O-04 1024px未満のヒーロー：装飾・ラベル・題字を人物の上から退ける
   ---------------------------------------------------------
   デスクトップ側（2374行以降）が施している手当てがSP側だけ入っておらず、
   z-index:3 が min-width:64rem にしか無いために人物が z-index:auto になり、
   装飾(3)・script(4)・note(6)がすべて人物の上に来ていた。
   ※ 基底の .p-hero__img に触らずSP帯だけで解決する（デスクトップ構図を壊さない）
--------------------------------------------------------- */
@media (max-width: 63.99rem) {
  /* 1) 塗り順の是正。SP帯では人物を全装飾の上に置く */


  /* 2) 題字帯（375px換算 y214-306.8 = 57.07-81.8cqi）とラベル帯を空ける */
   /* -2.66667cqi のままだと下端が継ぎ目帯に10px食い込む */
  /* 88cqi だと題字直下のラベル帯（クリアランス5.6px）を潰す */
  /* R-09(1)/SP-02（造形第1条・人物クリアランス）: 375px時 1cqi=3.75px。
     ヘッダー白カード .l-header__body の下端は y=89。従来 --i03 は箱top=79・
     白フチ上端 y=89.0 でクリアランスが0.5pxしかなく、頭頂が角丸に触れていた。
     +4.5cqi(≒17px)下げてインク上端を y≒105.6 に。ヒーロー総高は
     aspect-ratio 375/706 固定なので --i01(bottom:0) / --i02(top:95cqi) とは干渉しない。 */
   /* 25.5cqi では白フチ上端の実測クリアランスが13pxで検収14pxに1px届かず、+0.5cqi */
   /* 基底325行の 24cqi を上書き。同じ帯の3体で揃える */

  /* R-09(2)/SP-01: 題字が left:10.9333cqi・right指定なしで左41px／右8pxの非対称。
     あと1文字で 296行の overflow:hidden に無言で切られる。左右を同値にして
     375pxで可用337px（実測行幅326px）、390pxで可用352px（同339px）を確保する。 */

  /* --i10 は 40x80px で人物と判別できず --i01 と18px重なる → --i06〜--i09 と同じ扱いに */


  /* 3) ラベル4点を、写真の外周に残っている2本の空き帯へ置く（実測 375px）。
     ・帯A: y306.8-356.3（題字下端 → --i02 上端）に n1 / n3 / n4
     ・帯B: y164.2-214（--i05 下端 → 題字上端、x86-297が空き）に n2
     ::after の勢い線は非flipで左へ18px、flipで右へ18px伸びるぶんも見込んである */
  /* R-09(3)/SP-07: n1 の ::after（left:-18px / width:13px）が画面左端から5px、
     320px端末では1.2px しか離れていなかった。左端を実寸で確保する
     （375pxで☰左端が21px、320pxでも15.6px。--n3 の left:42cqi=157.5px とは95px空く） */

  /* Package は top:14cqi=52.5px でヘッダーの白ピル(y15-75)に完全に隠れ、
     4事業の1つが画面から欠落していた */


  /* 4) 白ラベルは浅葱地で 2.39:1 → 勝色 6.87:1 へ（1024px以上は配置ごと別なので対象外） */


  /* 5) 英文マニフェストは上端22.5px（画像高の27%）がヘッダーに食われ冒頭節が読めず、
     かつ --i03 と 100x48px で交差していた。ヒーロー枠内に非交差の空き帯が残っていないため落とす。
     前期の「どの位置でも人物と交差するため現状維持」はPC構図に対する判定であり、
     SPは「そもそも見えていない」別の状態なので覆す */

}

/* ---------------------------------------------------------
   O-06 SPドロワー：読める・覆う・辿り着ける
   ---------------------------------------------------------
   ハンバーガーは1024px以上で display:none なので、ドロワーはSPで唯一のグローバルナビ。
--------------------------------------------------------- */
/* 1) 浅葱地の白文字 2.39:1（前期PDCAの取りこぼし） → 勝色 6.87:1 */
html.is-open .l-header__nav-list--main a,
html.is-open .l-header__nav-list--sub a { color: var(--cl-dark); }
html.is-open .l-header__nav-list--sub a { border-color: rgb(23 32 43 / .5); }

/* 2) 面積。375x812 でパネルは y79-360 の281pxしかなく、下の452px(55.7%)から
   背後のヒーローが素通しだった。しかもパネル地とヒーロー地が同じ浅葱で境界も見えない */
/* R-06/M-02: min-height をグリッド項目（.l-header__nav-inner）に載せていたため、
   grid の自動最小サイズがトラック高を即座に確定させ、251行の
   transition: grid-template-rows .6s と 0fr→1fr の補間を無効化していた
   （computed は '0px'(t=0) → '723px'(t=4ms) の2値しか通らず1フレームで開いていた）。
   高さ指定を1枚内側の .l-header__nav-body へ移すと、grid 項目は 0 まで潰れられるようになる。 */
@media (max-width: 79.99rem) {
  html.is-open .l-header__nav-body {
    min-height: calc(100dvh - var(--header-height, 79px));
    /* 項目が増えても全項目に触れるように、パネル内でスクロールさせる */
    max-height: calc(100dvh - var(--header-height, 79px));
    overflow-y: auto;
  }
}

/* 3) 到達性。ドロワーはフッターと同じ8項目に揃える。
   ただし 80rem 以上では同じ <ul> が横並びの PC ナビになるため、
   増やした項目をそのまま出すとヘッダーが 1280px で溢れる（実測見積り 1296px > 1215px）。
   → 増分は drawer-only、PC の並び（トップ／仕事・人・ストーリー／福利厚生・キャリア／数字で見る）は据え置き。
   入れ子ナビの意匠指定も与える（2668行付近の指定はフッター専用セレクタのため効かない） */
@media (min-width: 80rem) { .l-header__nav-drawer-only { display: none; } }
@media (max-width: 79.99rem) { .l-header__nav-pc-only { display: none; } }
.l-header__nav-list--main > li > ul { margin: 6px 0 10px 1.1em; }
.l-header__nav-list--main > li > ul a { font-size: .92em; opacity: .85; }
.l-header__nav-list--main > li > ul li::before { content: "\2500 "; opacity: .5; }
.l-header__nav-list--main > li > ul li { display: flex; align-items: baseline; gap: 2px; }
.l-header__nav-list--main > li > ul a { font-weight: var(--fw-medium); padding-block: max(1.6vw, 13px); }

/* ---------------------------------------------------------
   O-07 320px：ENTRYピルがロゴ副文字を覆い「RECRUIT」が「RECR」に見える
   ---------------------------------------------------------
   実測(320px): 副文字 右端198.8 / ENTRYピル 左端181.3 → 17.5px＝副文字の38.0%が隠れる。
   .l-header__body の右端は311.9で320に収まっており、子要素どうしの衝突。
   22.5rem = 360px なので 375px は対象外（副文字は従来どおり表示される）。
--------------------------------------------------------- */
@media (max-width: 22.5rem) {
  .l-header__logo-text { display: none; }
}

/* ---------------------------------------------------------
   O-08 .js-in / .is-in の実体を与える
   ---------------------------------------------------------
   interview.html は .js-in 20個・.js-trigger 4個を持ち recruit.js:99 が
   is-in を付けているのに、CSS 側に定義が1件も無く完全に空振りしていた。
   html.js でスコープするのは、JS が動かない環境で本文が opacity:0 のまま
   消えることを防ぐため（is-num-armed / is-hero-armed と同じ思想）。
   prefers-reduced-motion は 706行の全体指定が transition-duration を潰すので追加対応不要。
--------------------------------------------------------- */
html.js .js-in {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .5s var(--ease-out), translate .5s var(--ease-out);
}
/* R-01: 要素自身が IntersectionObserver の監視対象になったので、
   祖先の .is-in に依存する子孫セレクタをやめる。
   nth-of-type のディレイ3本は .js-in が div/figure で型が混在しており
   数え方が意図とずれていたうえ、要素単位の発火では不要になるため削除した。 */
html.js .js-in.is-in { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------
   O-09 面の並びの7番目を藍に（8番目の Message は生成りへ戻した）
   ---------------------------------------------------------
   規約: 浅葱→浅葱→生成り→生成り→浅葱→浅葱→藍→生成り。
   実測では initiative+welfare+interview が 3,208.6px（3.6ビューポート）連続して浅葱で、
   浅葱の合計が総尺の49%になっていた。
--------------------------------------------------------- */
.p-interview { background: var(--cl-navy); color: var(--cl-white); }
.p-interview .c-heading--lg,
.p-interview .c-heading--sm { color: var(--cl-white); }
.p-interview__title--lg,
.p-interview__title--sm { color: var(--cl-white); }
.p-interview__text { color: var(--cl-white); }
.p-interview .c-button-primary { color: var(--cl-white); }
.p-interview .c-rail__line { background-image: url(../images/deco/punch-col-white.svg); }
.p-interview .c-rail__cap  { background-image: url(../images/deco/cap-white.svg); }

/* ---------------------------------------------------------
   O-10 CAREER の縦ループ装飾に載っていた写真2枚を外す
   ---------------------------------------------------------
   実測(1440px): 縦文字レーン x63-261 / y3806-5950.5 に対し
   写真は (x77.6, y5683.9, 170.8x121.6) と (x72.9, y5918, 180.2x229.3)。
   横方向で完全に内包され、装飾文字の「C」「A」が写真で分断されて破片に見えていた。
   版面の左基準線は x=90、CAREER 本文列は x=292 で、退避できる空きは31pxしかなく
   171-180px幅の写真は物理的に置けない。171px幅では被写体も判別できず装飾ノイズ。
   → 第1条（装飾は文字と交差しない）に照らして外す。
--------------------------------------------------------- */
.p-welfare__img-wrap { display: none; }

/* ---------------------------------------------------------
   O-14(3)(5) 細部
--------------------------------------------------------- */
/* (3) 4pxの金バーが字面に1px食い込み、句点の下部が塗り潰されていた。
   背景はパディング領域まで描かれるので、.22em ぶん下げてバーを字面の下に落とす */
.p-iv-qa__a strong { padding-bottom: .22em; }

/* (5) タップ領域を44px以上に */
@media (max-width: 63.99rem) {
  /* 34x34 → 44x44。矩形そのものを広げる（::after の当たり判定拡張だと
     getBoundingClientRect が 34 のままで検収の実測に乗らない）。
     線と MENU の見えは 5px ぶん下げて従来位置を保つ */
  .l-header__humburger { width: 44px; height: 44px; }
  .l-header__humburger-line:nth-child(1) { top: 14px; }
  .l-header__humburger-line:nth-child(2) { top: 21px; }
  .l-header__humburger-txt { bottom: 3px; }
  .c-button-primary { min-height: 44px; display: inline-flex; align-items: center; }  /* 実測150.2x30px x5本 */
  .l-footer-body__nav-main li a { display: block; padding-block: 15px; }  /* 実測 高さ16-18px x8本（入れ子は11px字なので15px必要） */
  .l-footer__btn-top .c-box { min-width: 44px; min-height: 44px; }        /* 768-1023pxで5.125vw=39.4px */
  .l-header__nav-list--sub a { padding-block: calc(.4em + 3.5px); }  /* 実測37.1px → 44px */
  /* フッターENTRYの矢印円は実測30x30 */
  .l-footer-body__cta-entry-copy .c-box { width: 44px; height: 44px; }
  /* ヘッダーの2本（ロゴ173x18・ENTRY 72x34）。どちらも align-items:center なので
     見えは変わらず当たり判定だけ縦に伸びる */
  .l-header__logo a { min-height: 44px; }
  .l-header__nav-entry a { min-height: 44px; display: inline-flex; align-items: center; }
}


/* =========================================================
   コーダー適用分 第3期（A-01〜A-14）
   ここから下は全基底ルールより後方。後勝ちを効かせるための位置。
   ========================================================= */

/* ---------------------------------------------------------
   A-01 / A-02 / A-03 / A-04  1024px未満の一括是正
--------------------------------------------------------- */
@media (max-width: 63.99rem) {

  /* --- A-01(1) 2267行から移設した interview の字送り ---
     元の位置は基底(2822-2982行)より前だったため同一詳細度で後勝ちされ、
     768-1023px帯で本文が最大2.73倍に肥大していた（1023→1024pxで文書高が3.4倍動く）。 */
  .p-iv-hero__en      { font-size: clamp(44px, 11vw, 84px); }
  .p-iv-hero__title   { font-size: clamp(22px, 6.4vw, 34px); }
  .p-iv-person__catch { font-size: clamp(24px, 6.4vw, 34px); } /* 下限24pxはZen Old Mincho規約 */
  .p-iv-person__no    { font-size: clamp(14px, 3.4vw, 16px); }
  .p-iv-qa__q         { font-size: clamp(15px, 4.3vw, 20px); }
  /* R-10(1)/SP-05: SP本文14px（1行24字）がPCの15.3pxより小さいという逆転。
     375pxで15px×338px＝22.5字、390pxで22.6字。目安15〜22字の上限に収まる。
     ※ここが375pxの勝者。基底2963行付近の max(13px,3.7vw) は後勝ちで死んでいる */
  .p-iv-qa__a         { font-size: clamp(15px, 4vw, 17px); }
  /* R-08(7)/Q-04: 上限24pxは1024px側の実効18.43pxに対し1.30倍の段差になる。
     19pxへ落として境界を連続させる（375pxの実効18pxは不変） */
  .p-iv-cta__txt      { font-size: clamp(17px, 4.8vw, 19px); }

  /* --- A-01(3) vw余白の上限 ---
     375pxの実効値（21.3333vw=80px 等）の約1.2倍を上限に置く。
     clamp/min の下限側は375pxの実効値と一致するので、375pxの見えは変わらない。 */
  .p-information, .p-about, .p-welfare, .p-message { padding-block: min(21.3333vw, 96px); }
  .p-initiative { padding-block: min(21.3333vw, 96px) min(22.9333vw, 104px); }
  .p-company    { padding-block: min(21.3333vw, 96px); }   /* R-12(1)/V-05 */
  .p-interview  { padding-block: min(16vw, 72px) min(26.6667vw, 120px); }
  .p-message__item + .p-message__item { margin-top: min(21.3333vw, 96px); }
  .l-footer     { padding-top: min(17.0667vw, 78px); }
  .p-iv-hero    { padding-block: min(34vw, 152px) min(8vw, 36px); }
  .p-iv-person  { padding-block: min(16vw, 72px); }

  /* --- A-02 保険 ---
     金の斜線装飾は要素ごと撤去済み（295/311-317行および index.html の7行）。
     万一 .p-hero__img-decorate が再投入されてもSPで人物と交差しないよう門を残す。 */


  /* --- A-03(3) ドロワー展開時の✕が CLOSE の字面を貫通していた（造形第1条） ---
     44x44 のボタンで線幅36px、271-272行の translate ±3.5px により両線の中心が
     y=18.5 に集まり、45°回転で y=5.1〜31.9 を占めていた。ラベル箱の上端は約 y=31.4。
     scale で線を 36→20.9px に縮め、交点を y=15.5 へ。占有は y=7.4〜23.6、
     ラベル箱の上端 44-3-(10*1.2)=29 に対しクリアランス 5.4px。タップ領域44x44は不変。 */
  html.is-open .l-header__humburger-line:nth-child(1) { translate: 0 .5px;  rotate: 45deg;  scale: .58 1; }
  html.is-open .l-header__humburger-line:nth-child(2) { translate: 0 -6.5px; rotate: -45deg; scale: .58 1; }

  /* --- A-04 ドロワーの左右に素通しの帯が残っていた ---
     .l-header__nav は left:0 / width:100%（239行）だが、親 .l-header__body が
     inline-size:94.9333%（228行）の内寄せピルなので常に画面より 5.0667% 狭く、
     375pxでは左10px・右9pxからヒーローの装飾文字が覗いてメニュー項目の行頭記号に見えた。
     親幅比で 100/0.949333=105.337%、はみ出し量の半分 5.0667/2=2.6685% だけ左へ。
     100vw を使わないのはスクロールバー幅ぶんの横溢れを避けるため。
     背景は 243行の .l-header__nav-inner が nav 幅いっぱいに持つので追加指定は不要。 */
  .l-header__nav { left: -2.6685%; width: 105.337%; }
}

/* ---------------------------------------------------------
   A-05 320px帯だけ題字を縮めて2行に戻す（造形第1条）
   ---------------------------------------------------------
   320pxでの勝者は 2265行 clamp(28px, 8.53vw, 40px) の下限28px。
   28pxだと3行に折れ、3行目「行く。」(x35〜120.7) が装飾ラベル「Metal」
   (x19.2〜58.5 / y275.2〜287.2、z-index 6 で題字 z-index 5 の上) と 23.5x12px 重なる。
   20.5rem=328px に限るのは、既存の 22.5rem ブロックに入れると
   360px（現状30.708px・2行・非交差）まで巻き添えで縮むため。
--------------------------------------------------------- */
/* ---------------------------------------------------------
   A-06 PCヒーロー: 「Food & Agri」が直下の人物の白フチと2pxまで接触（造形第1条）
   ---------------------------------------------------------
   1440pxでの勝者は 2644行 { left:63cqi; bottom:31%; top:auto }。
   文字インクの下端 y534 と直下の切り抜きの白フチ y527〜 が 2.0px まで迫っていた。
   人物を動かすと重なり順が変わるためラベル側を逃がす。bottom の % はヒーロー高に
   依存して14pxを言い当てられないので translate を使う。
   recruit.js:83-86 の .js-hero-deco は opacity のみを動かすので競合しない。
   同じ帯の「≡ Metal」のクリアランス34pxが同一画面内の基準値。
--------------------------------------------------------- */
/* ---------------------------------------------------------
   A-08 INTERVIEW & EPISODE の上余白がゼロで見出しが面の境界に乗っていた
   ---------------------------------------------------------
   563行 .p-interview { padding-block: 0 26.6667vw }、875行(min-width:64rem)は
   padding-bottom のみで top を触っていない。セクションの先頭要素は写真ではなく
   hgroup.c-heading（index.html:511-520）なので「写真を上端に接地させる」意図は
   .p-company にだけ当てはまり、ここには当てはまらない。
   1440pxで 7.5vw=108px となり .p-initiative と同値、下余白 113.4px ともほぼ対称。
--------------------------------------------------------- */
@media (min-width: 64rem) {
  .p-interview { padding-top: 7.5vw; }
}

/* ---------------------------------------------------------
   A-09 切り抜き素材の水平な切断面と白フチを羽根ぼかしで溶かす
   ---------------------------------------------------------
   c01/c02/c05/c13 は素材そのものが腰・膝・脛で水平に切られ、その断面に
   白フチが角丸ごと焼き込まれている（元アセット実測: c02 最下不透明行の幅303px /
   c05 239px / c01 367px と、細らずに平らに終端）。
   素材の差し替えが本筋だが、届くまでの間は断面を羽根ぼかしで溶かす。
   属性セレクタなので、ヒーロー・一覧・人物パネル・フッターの全出現に一度に効く。
   .p-iv-person__photo img は object-fit: contain / object-position: 50% 100%
   （下端接地）なので要素ボックスの下端＝画像の下端になり、マスク位置はずれない。
   素材を作り直せる場合は足元まで含む切り抜きに差し替え、この規則を削除するのが本筋。
--------------------------------------------------------- */
/* R-07(B)/D-05: 88% の比率指定は箱の高さに比例するため、実効フェード長が
   FILE01 76.8px / FILE02 76.8px / FILE03 47.6px / FILE04 0px（c11は対象外）と
   4人でバラバラだった。px 固定にして終端を揃える。
   c11 を対象に加えるのは、FILE04 だけフェード0pxで白いスニーカーが輪郭まで
   くっきり出て、他3人と終端が揃っていなかったため。
   ※素材（c02/c05/c13）を足元まで含む切り抜きへ差し替えたら、この規則ごと削除するのが本筋 */
img[src$="cutout/c01.webp"],
img[src$="cutout/c02.webp"],
img[src$="cutout/c05.webp"],
img[src$="cutout/c11.webp"],
img[src$="cutout/c13.webp"] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
}
/* 小さく出る箇所（ヒーロー群像・索引・フッター）は56pxだと胴まで溶けるので短く */
.p-iv-hero__faces img,
.p-iv-index__list img,
.l-footer-loop__char img {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent 100%);
}

/* ENTRYカードの人物だけ角丸が残って「シール」に見えるので外す。
   頭がカード上辺から4px出るのは 2726行のコメントどおり意図された配置なので
   overflow:hidden で切らずに残す。切るべきは腰の断面だけ。 */
.l-footer-body__cta-entry-people { border-radius: 0; }

/* A-13(2) のフッター個別指定は R-05 の一次アクション12点の統一規則に包含されたため削除 */


/* =========================================================
   コーダー適用分 第4期（R-01〜R-14）
   ここから下は全基底ルールより後方。後勝ちを効かせるための位置。
   ========================================================= */

/* ---------------------------------------------------------
   R-02 / D-04・D-17  インタビュー4ブロックに山をつくる
   ---------------------------------------------------------
   4ブロックが1143px完全等寸、Q&A16件すべて109px同型、回答16件すべて15.3px/673pxで
   4572pxにわたり寸分違わぬ4拍が続いていた。動きの量ではなく起伏の欠如が効いている。
   Q3（印象に残っている仕事は？）はエピソードが最も立つ設問なので、そこだけ
   明朝の引用に昇格させて各ブロックに山を4回立てる。
   規約「Zen Old Mincho は引用に使う／24px未満で使わない」の範囲内。
--------------------------------------------------------- */
.p-iv-qa__item:nth-child(3) .p-iv-qa__a {
  font-family: var(--ff-jp-display);
  font-weight: 900;
  font-size: max(24px, 1.8vw);   /* 1440pxで25.9px。24px未満禁止の規約を満たす */
  line-height: 1.7;
  border-left: 3px solid var(--cl-accent);
  padding-left: 24px;
  margin-block: 32px 8px;
  max-inline-size: 26em;
}
@media (max-width: 63.99rem) {
  .p-iv-qa__item:nth-child(3) .p-iv-qa__a {
    font-size: 24px; padding-left: 16px; margin-block: 24px 8px;
  }
}
/* 金の下線は字面と非交差なので引用の中でも残すが、26px組で4pxバーは重い */
.p-iv-qa__item:nth-child(3) .p-iv-qa__a strong { background-size: 100% 3px; }
/* 引用の前後を空ける（.p-iv-qa の gap:2.6vw に加算される） */
@media (min-width: 64rem) {
  .p-iv-qa__item:nth-child(3) { margin-block: 1.4vw; }
  /* R-02(4): 4人の順序に強弱をつける。#p2 だけ写真の箱を高くする（他3人は640pxのまま） */
  #p2 .p-iv-person__photo { height: 720px; }
}

/* ---------------------------------------------------------
   R-04(2) / Q-05  ABOUT沿革7項目目のSVG装飾が本文に食い込む
   ---------------------------------------------------------
   1440pxで13.5px、1024pxで20.4pxの食い込み（矩形実測と画素差分マスクの2手法で一致）。
   他6項目は現状クリアなので触らない。
--------------------------------------------------------- */
@media (min-width: 64rem) {
  .p-about__history-item:nth-child(7) .p-about__history-figure { margin-top: 24px; }
}

/* ---------------------------------------------------------
   R-04(3) / V-06  ヒーローの航路線を PC から外す（造形第1条）
   ---------------------------------------------------------
   route-7-white.svg は viewBox 0 0 900 340 の階段状パス M-60 320 → H620 120。
   現在の配置（left:-6% bottom:16% width:112%）では 1440px時に画面座標
   x=-182〜906 / y=609(左端)〜289(右端) を走り、c16（.--i10 = [130,460,266,733]）の
   x帯で y=545〜481 を通るため頭部を貫通する。
   ・線を上げる案: 交差解消に85px以上必要。その位置では x=605〜683・y=246 が
     題字 .p-hero__title [72,137,683,318] を貫き、文字との交差という更に重い違反になる。
   ・線を下げる案: 252px以上必要。今度は右端 x=778〜906・y=541 が主役 c12
     （.--i01 [576,360,907,763]）を貫く。
   ・c16 を動かす案: 線が y<460 になるのは x≧355 以降だが、その帯は --i08(302〜446)と
     --i09(460〜582)で埋まっている。
   → 現在の10点構図と共存できる縦位置が存在しない。北前船の航路線というモチーフは
     .p-about__route が引き続き担うので意匠は失われない。
   SP帯（.p-hero__route の z-index:0 / opacity:.55）は構図が別なので触らない。
--------------------------------------------------------- */
/* ---------------------------------------------------------
   R-05 / D-11  金＝押すところ。一次アクション12点を金に統一
   ---------------------------------------------------------
   CSSが自ら「金＝押すところ」と宣言しているのに、面として認識できる構造的な金は
   フッターの矢印1個とCAREER #03の下線1本だけだった。
   VIEW MORE ×5 / INITIATIVE の＋×4 / フッターENTRY ×1 / 募集要項・採用スケジュール ×2 の
   計12点を金地・勝色矢印に揃える。詳細度0,2,0で 99行 .c-box--white（0,1,0）に勝つ。
   金 #F1C75B 上の勝色 #17202B は10.3:1、藍 #073489 上の白は12.9:1。
   対象外（ナビゲーションであって一次アクションではない）:
   .p-company .c-box（スライダー前後・藍のまま）／ .l-footer__btn-top .c-box（ページトップ・勝色のまま）／
   .p-information__banner-label 内の .c-box--sm（バナー内の小矢印）
--------------------------------------------------------- */
.c-button-primary .c-box--arrow,
.l-footer-body__cta-default .c-box--arrow,
.l-footer-body__cta-entry-copy .c-box--arrow,
.p-initiative__card-icon { background: var(--cl-accent); }
.c-button-primary .c-box--arrow svg,
.l-footer-body__cta-default .c-box--arrow svg,
.l-footer-body__cta-entry-copy .c-box--arrow svg { fill: var(--cl-dark); }
.p-initiative__card-icon.c-box--plus::before,
.p-initiative__card-icon.c-box--plus::after { background: var(--cl-dark); }

@media (any-hover: hover) {
  /* 基底が金になったので、ホバーは藍へ入れ替える（旧ホバー指定を上書き） */
  .c-button-primary.c-box--hover:hover .c-box--arrow,
  .l-footer-body__cta-default.c-box--hover:hover .c-box--arrow,
  .l-footer-body__cta-entry-copy .c-box--hover:hover { background: var(--cl-navy); }
  .c-button-primary.c-box--hover:hover .c-box--arrow svg,
  .l-footer-body__cta-default.c-box--hover:hover .c-box--arrow svg,
  .l-footer-body__cta-entry-copy .c-box--hover:hover svg { fill: var(--cl-white); }
  .p-initiative__card-item:hover .p-initiative__card-icon { background: var(--cl-navy); }
  .p-initiative__card-item:hover .p-initiative__card-icon::before,
  .p-initiative__card-item:hover .p-initiative__card-icon::after { background: var(--cl-white); }
}

/* ---------------------------------------------------------
   R-08 / Q-01・Q-03  768〜1023px帯の縦膨張を止める
   ---------------------------------------------------------
   1023→1024pxで文書高が3.156倍（23,935px → 7,585px）跳ねていた。
   min() の第1引数は現行のvw値のままなので、375pxの見えは変わらない。
   （Q-03のループ英字・フッター帯は基底側で処理済み。ここは余白と図版の上限）
--------------------------------------------------------- */
@media (max-width: 63.99rem) {
  /* (2) CAREERの縦ループ英字。375pxの実効44pxは下回らない上限 */
  .p-welfare__heading .c-vtext { font-size: min(11.7333vw, 53px); }
  /* (3) 沿革7項目の項目間。375pxの実効52pxは不変 */
  .p-about__history-item { margin-top: min(13.8667vw, 62px); }
  /* (5) Message の写真。aspect-ratio 3/4 を max-height に譲り、object-fit:cover が切り抜きを吸収する。
     375pxではコンテナ幅335px→自然高447pxで上限に当たらず見えは不変、1023pxで460pxに止まる */
  .p-message__item-img img { max-height: min(133vw, 460px); }
  /* (6) COMPANY MOVIE のカード。375pxでは自然高190pxで上限に当たらない */
  .p-company__card-img { max-height: min(56.6vw, 220px); }
}

/* ---------------------------------------------------------
   R-10 / SP-03・SP-04  SPの読みやすさ
   ---------------------------------------------------------
   索引は4列のままでサムネイル幅24〜43px・ラベル10px、2項目だけ2行に折れて
   氏名のベースラインが分裂していた。沿革は本文カラム186pxで全7項目が1行13字未満。
   ※ 基底を書き換えるとPCの4列・18vwまで巻き添えになるため、SP帯に閉じて上書きする。
--------------------------------------------------------- */
@media (max-width: 63.99rem) {
  /* (2) SP-03 顔で選ぶ索引を2列に */
  .p-iv-index__list { grid-template-columns: repeat(2, 1fr); gap: 6vw 4vw; }
  .p-iv-index__list a { gap: 8px; font-size: max(12px, 3.2vw); }
  .p-iv-index__list img { height: 26vw; }
  .p-iv-index__label { min-height: 2lh; }   /* 2行に折れても氏名のベースラインを揃える */

  /* (3) SP-04 数字/言葉セクションがSPでも2段組で本文カラム186pxだった。
     図版を絶対配置から外して本文の上に積み、本文幅を186→337pxに戻す。
     ※ R-08(4) の .p-about__history-figure { width: min(36.2018cqi,150px) } は
       position:static 化で不要になるため入れない（こちらを採る） */
  /* 上限200pxは R-08 と同じ趣旨（375pxの実効165pxは下回らないので見えは不変）。
     絶対配置を外すと図版の高さがそのまま文書高に乗るため、768-1023帯で青天井にしない */
  .p-about__history-figure { position: static; width: min(44vw, 200px); margin: 0 auto 4vw; }
  .p-about__history-inner  { width: 100%; margin-left: 0; }
  /* 上限17pxは R-08 と同じ趣旨。max(15px,4vw) のままだと1023pxで40.9pxに膨らむ */
  .p-about__history-text   { font-size: clamp(15px, 4vw, 17px); }
}


/* =========================================================
   PDCA第2期 R3 の回帰の是正（検証担当の指摘に対応）
   ========================================================= */

/* 回帰1: 375px でロゴ副文字「RECRUIT」が ENTRY ピルに 7.6px 食い込み、
   末尾の T が隠れていた（実測: logo-text 右端 230.9 / ENTRY 左端 223.3）。
   R3 で 2.9vw に引き上げたのが原因。361〜767px 帯だけ従前の上限に戻す。 */
@media (min-width: 22.5625rem) and (max-width: 47.99rem) {
  .l-header__logo-text { font-size: clamp(9px, 2.4vw, 12px); letter-spacing: .08em; }
}

/* 回帰2: 768〜1023px で上限のない生 vw を引き上げたため、
   支えるべき見出しより本文・氏名が大きくなり階層が逆転していた。
   （lead 40.92px > title 34px ／ name 37.85px > catch 34px）
   この帯だけ上限を掛け、見出しを必ず上に置く。 */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p-iv-hero__lead   { font-size: clamp(14px, 2.2vw, 20px); }
  .p-iv-person__name { font-size: clamp(12px, 1.9vw, 17px); }
  .p-iv-hero__title  { font-size: clamp(22px, 4.2vw, 40px); }
  .p-iv-person__catch{ font-size: clamp(20px, 4.0vw, 38px); }
}

/* 回帰3（軽微）: .c-heading--lg の font-weight: var(--fw-regular) が
   勝者ゼロの死に宣言として残っていた。実効値（800）を明示して整理する。 */
.c-heading--lg { font-weight: var(--fw-black); }


/* =========================================================
   R3 未解決分の適用（R-07素材はPythonで作り直し済み）
   ========================================================= */

/* R-07 残り: 素材側で断面をフェードしたので、CSS側の羽根ぼかしは不要。
   二重に掛かると輪郭が甘くなるため打ち消す。 */


/* R-08 / R-10: 768〜1023px の縦膨張。
   上限のない生 vw が 1023px で 2.05〜2.73倍に肥大していた帯を塞ぐ。
   375px の見えを変えないよう、clamp の下限は現行の vw 相当に置く。 */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p-iv-hero__en      { font-size: clamp(48px, 9vw, 92px); }
  .p-iv-person__no    { font-size: clamp(13px, 2.4vw, 22px); }
  .p-iv-qa__q         { font-size: clamp(15px, 2.6vw, 23px); }
  .p-iv-qa__a         { font-size: clamp(14px, 2.1vw, 18px); line-height: 1.95; }
  .p-iv-cta__txt      { font-size: clamp(17px, 3.2vw, 30px); }
  .p-iv-index__list a { font-size: clamp(11px, 1.6vw, 14px); }
}

/* R-10: SPのインタビュー本文が14px・1行24字でPC(15.3px)より小さかった。
   読み物のページなので本文を優先する。 */
@media (max-width: 47.99rem) {
  .p-iv-qa__a { font-size: max(15px, 3.9vw); line-height: 2.0; }
  .p-iv-qa__q { font-size: max(16px, 4.4vw); }
}

/* R-13: 人名が設問ラベルより小さく、人物の階層が沈んでいた
   （人名20.16px < 設問21.6px）。人名を設問の上に置く。 */
@media (min-width: 64rem) {
  /* R-13 が 3057行で 1.8vw に上げていたのを、後から書いた 1.15vw が
     打ち消していた。字間と色だけを足し、サイズには触れない。 */
  .p-iv-person__name { letter-spacing: .16em; opacity: 1; }
  .p-iv-person.--aqua .p-iv-person__name { color: var(--cl-white); }
}

/* =========================================================
   レスポンシブ層（single source of truth）
   ---------------------------------------------------------
   前版は同じ要素を9ブロックにわたり上書きし、後勝ちが読めなくなって
   768px でヒーローが崩壊した。ここでは帯ごとに1回だけ書く。

   帯の定義
     SP      〜 47.99rem (767px)
     TB      48rem 〜 63.99rem (768〜1023px)
     PC      64rem 〜         （既存の指定がそのまま効く。ここでは触らない）

   原則
     ・SP/TB では PC 用の cqi 座標を必ず打ち消す（top:auto / aspect-ratio:auto）
     ・生の vw は上限を持たせる（clamp）。この帯で肥大していた主因
     ・ヒーローは「題字は上・人物は下」の2段。切り抜きは5点に絞る
   ========================================================= */

/* ─────────────────────────────────────────
   A. 共通（〜1023px）：文字とタップ領域の下限、余白の上限
   ───────────────────────────────────────── */
@media (max-width: 63.99rem) {
  body { font-size: clamp(14px, 3.6vw, 17px); line-height: 1.9; }

  .c-heading--lg { font-size: clamp(26px, 6.6vw, 44px); }
  .c-heading--sm { font-size: clamp(12px, 2.6vw, 14px); }
  .c-vtext       { font-size: clamp(26px, 6.4vw, 46px); }

  .p-about__content-title { font-size: clamp(21px, 5.2vw, 32px); }
  .p-about__history-title { font-size: clamp(15px, 3.6vw, 22px); }
  .p-about__history-num   { font-size: clamp(26px, 6.6vw, 48px); }
  .p-about__history-num.--word { font-size: clamp(19px, 4.6vw, 30px); }
  .p-about__history-num i { font-size: max(12px, .38em); }
  .p-about__history-text  { font-size: clamp(13px, 3.4vw, 16px); }

  .p-initiative__title     { font-size: clamp(24px, 6vw, 42px); }
  .p-welfare__heading-main { font-size: clamp(21px, 5vw, 34px); }
  .p-welfare__item-text    { font-size: clamp(13px, 3.4vw, 16px); }
  .p-welfare__subheading-number { font-size: clamp(21px, 5vw, 32px); }
  .p-interview__title--lg  { font-size: clamp(22px, 5.4vw, 40px); }
  .p-message__item-title--number { font-size: clamp(22px, 5.4vw, 38px); }
  .p-message__item-title--ttl    { font-size: clamp(17px, 4.2vw, 28px); }
  .p-message__item-text    { font-size: clamp(13px, 3.4vw, 16px); }
  .p-information__list-text { font-size: clamp(13px, 3.4vw, 16px); }
  .l-footer-body__cta-entry-heading--en { font-size: clamp(28px, 7vw, 48px); }

  /* 極小文字の下限 */
  .l-header__humburger-txt,
  .p-information__list-item-category,
  .p-iv-person__tags span,
  .p-iv-index__label { font-size: 12px; }
  .l-footer-body__nav-main > li > ul a,
  .l-footer__addr, .l-footer__addr .u-nb { font-size: max(12px, 3vw); }
  .l-footer__copy { font-size: max(12px, 2.8vw); }
  .c-border { font-size: clamp(12px, 3vw, 14px); }

  /* タップ領域 44px */
  .c-box, .c-box--arrow, .c-box--plus { min-width: 44px; min-height: 44px; }
  .p-information__list-item-link { padding-block: 14px; }
  .l-footer-body__nav-main a { min-height: 44px; display: flex; align-items: center; }
  .l-footer-body__nav-main > li > ul a { min-height: 40px; }
  .p-iv-index__list a { padding-block: 8px; }

  /* 縦の余白（vw のままだと間延びする） */
  .p-information, .p-company, .p-about, .p-initiative,
  .p-welfare, .p-interview, .p-message { padding-block: clamp(52px, 11vw, 96px); }
  .c-heading { margin-bottom: clamp(16px, 4vw, 28px); }
}

/* ─────────────────────────────────────────
   B. ヘッダー（〜1279px）
   ───────────────────────────────────────── */
@media (max-width: 79.99rem) {
  .l-header__body {
    padding-inline: 14px; padding-block: 10px;
    column-gap: 10px; align-items: center;
  }
  .l-header__logo a { column-gap: 8px; }
  .l-header__nav-entry { margin-left: auto; margin-right: 52px; }
  .l-header__nav-entry a { padding: 9px 16px; font-size: clamp(12px, 3.2vw, 14px); white-space: nowrap; }
  .l-header__humburger {
    width: 44px; height: 44px;
    position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  }
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  .l-header__logo-text, .l-header__humburger-txt { font-size: 12px; }
  .l-header__logo a { min-height: 44px; display: flex; align-items: center; }
  .c-button-primary { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 26.5rem) { .l-header__logo-text { display: none; } }

/* ─────────────────────────────────────────
   C. ヒーロー（〜1023px）── ここだけで完結させる
   PC用の cqi 座標を全部打ち消し、題字は上・人物は下の2段にする。
   ───────────────────────────────────────── */
@media (max-width: 63.99rem) {


  /* 題字：上段に単独で置く */


  /* 切り抜きは5点だけ */


  /* ラベルは商材の真下。人物には重ねない */

}
/* タブレットは同じ組み方で寸法だけ調整 */
/* ─────────────────────────────────────────
   D. About の7項目（〜1023px）
   PC の3カラムをやめ、「絵を左に小さく・文を右に」の2カラムへ。
   前版で 768px の高さが 5,152px になっていた箇所。
   ───────────────────────────────────────── */
@media (max-width: 63.99rem) {
  .p-about__heading-wrapper { display: block; }
  .p-about__heading, .c-rail.--figure { display: none; }
  .p-about__figures { margin-bottom: 6vw; }
  .p-about__figures-body { position: static; height: auto; width: 100%; }
  .p-about__figures-img--01 { max-height: none; width: min(60%, 320px); margin-inline: auto; }
  .p-about__figures-img--main { max-height: clamp(180px, 40vw, 300px); width: 100%; object-fit: cover; }

  .p-about__history-item {
    position: relative;
    display: grid;
    grid-template-columns: clamp(72px, 24%, 140px) minmax(0, 1fr);
    column-gap: 5%;
    align-items: center;
    margin-top: clamp(28px, 7vw, 52px);
    min-height: 0;
  }
  .p-about__history-figure {
    position: static; grid-column: 1;
    width: 100%; height: auto; margin: 0;
  }
  .p-about__history-inner { grid-column: 2; margin: 0; width: auto; }
  .p-about__history-title {
    position: static; writing-mode: horizontal-tb; margin-bottom: .3em;
  }
  .--n06 .p-about__history-inner,
  .--n07 .p-about__history-inner { margin-left: 0; width: auto; }
  .--n06 .p-about__history-text  { margin-left: 0; width: auto; margin-top: .6em; }
}

/* ─────────────────────────────────────────
   E. 取り組みカード（〜1023px）：横スクロールをやめ格子に
   ───────────────────────────────────────── */
@media (max-width: 63.99rem) {
  .p-initiative__card-wrapper { overflow: hidden; }
  .p-initiative__card-scroll { overflow: visible; padding-inline: 0; }
  .p-initiative__card-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.4vw, 16px);
    width: 100%;
    padding-inline: 0;
  }
  .p-initiative__card-item { width: auto; min-width: 0; padding: clamp(12px, 3vw, 20px); }
  .p-initiative__card-item img { max-width: 56%; height: auto; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p-initiative__card-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-initiative__card-ttl { font-size: clamp(12px, 1.7vw, 15px); }
  .p-initiative__card-txt { font-size: clamp(11px, 1.4vw, 13px); }
}

/* ─────────────────────────────────────────
   F. お知らせ・福利・メッセージ・フッター（〜1023px）
   ───────────────────────────────────────── */
@media (max-width: 63.99rem) {
  .p-information__heading { display: none; }
  .p-information__body-left { width: auto; margin-left: 0; }
  .p-information__banner-list { width: auto; gap: clamp(10px, 2.4vw, 16px); }
  .p-information__banner-item { position: relative; overflow: hidden; }
  .p-information__banner-item img { max-height: clamp(90px, 26vw, 150px); object-fit: cover; }
  .p-information__banner-label { position: relative; padding-right: 52px; }
  .p-information__banner-label .c-box {
    position: absolute; right: 8px; top: 50%; translate: 0 -50%;
    width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  }

  .p-welfare__heading { display: none; }
  .p-welfare__item { margin-bottom: clamp(32px, 8vw, 56px); }
  .p-welfare__item-image img { max-height: clamp(200px, 52vw, 340px); object-fit: cover; }
  .p-interview__img img { max-height: clamp(200px, 52vw, 340px); object-fit: cover; }
  .p-message__list { gap: clamp(32px, 8vw, 56px); }
  .p-message__item-img img { max-height: clamp(200px, 48vw, 300px); object-fit: cover; }

  .l-footer { padding-top: clamp(48px, 11vw, 80px); padding-bottom: clamp(32px, 7vw, 56px); }
  .l-footer-body__cta { margin-top: clamp(24px, 6vw, 40px); gap: clamp(10px, 2.4vw, 16px); }
  .l-footer-body__cta-entry { padding: clamp(20px, 5vw, 32px); }
  .l-footer-body__cta-entry-people-decorate { width: clamp(90px, 24vw, 130px); }
  .l-footer-body__cta-default { padding: clamp(14px, 3.4vw, 20px) clamp(16px, 4vw, 24px); }
  .l-footer-loop { padding: clamp(40px, 9vw, 72px) 0 clamp(20px, 5vw, 32px); }
  .l-footer-loop__text { height: clamp(40px, 9vw, 68px); }
  .l-footer-loop__char img { height: clamp(56px, 13vw, 100px); }
  .l-footer__copy { margin-top: clamp(20px, 5vw, 32px); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p-information__body { display: grid; grid-template-columns: 1fr clamp(180px, 26vw, 240px); gap: clamp(20px, 3vw, 36px); }
  .l-footer-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 40px); }
  .l-footer-body__nav, .l-footer-body__cta { width: auto; }
  .l-footer-body__cta { margin-top: 0; }
}

/* ─────────────────────────────────────────
   G. インタビューページ（〜1023px）
   ───────────────────────────────────────── */
@media (max-width: 63.99rem) {
  .p-iv-hero { padding: clamp(110px, 26vw, 180px) 0 clamp(40px, 10vw, 72px); }
  .p-iv-hero__en    { font-size: clamp(40px, 12vw, 84px); }
  .p-iv-hero__title { font-size: clamp(20px, 5.4vw, 34px); }
  .p-iv-hero__lead  { font-size: clamp(13px, 3.6vw, 17px); }
  .p-iv-hero__faces { display: none; }

  .p-iv-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 4vw, 28px) clamp(8px, 2vw, 16px); width: auto; }
  .p-iv-index__list img { height: clamp(90px, 28vw, 150px); }
  .p-iv-index__list a { font-size: clamp(12px, 3vw, 14px); }

  .p-iv-person { padding: clamp(48px, 12vw, 88px) 0; }
  .p-iv-person__grid { display: block; }
  .p-iv-person__photo { position: static; height: auto; }
  .p-iv-person__photo img { height: auto; width: min(74%, 320px); max-height: none; margin-inline: auto; }
  .p-iv-person__body { margin-top: clamp(20px, 6vw, 36px); }
  .p-iv-person__catch { font-size: clamp(20px, 5.4vw, 34px); line-height: 1.65; }
  .p-iv-person__name { font-size: clamp(13px, 3.4vw, 17px); }
  .p-iv-qa { margin-top: clamp(28px, 8vw, 48px); gap: clamp(28px, 7vw, 44px); }
  .p-iv-qa__q { font-size: clamp(15px, 4.2vw, 20px); }
  .p-iv-qa__a { font-size: clamp(14px, 3.8vw, 17px); line-height: 2; }
  .p-iv-cta { padding: clamp(48px, 12vw, 88px) 0; }
  .p-iv-cta__txt { font-size: clamp(17px, 4.6vw, 30px); }
}

/* ─────────────────────────────────────────
   H. 320px（折りたたみ・旧端末）
   ───────────────────────────────────────── */
@media (max-width: 20.5rem) {
  .c-wrap { padding-inline: 4vw; }

  .p-iv-person__catch { font-size: 19px; }
}

/* ─────────────────────────────────────────
   I. ヒーローの座標を % 基準に確定（〜1023px）
   container-type を normal にして cqi を無効化したが、
   vw は「ビューポート幅」なので .p-hero__body の幅と一致するとは限らず、
   左に寄って重なった。親に対する % で置き直す。
   ───────────────────────────────────────── */
/* ─────────────────────────────────────────
   J. ヒーローの器を全幅に（〜1023px）
   実測: 375px 画面に対し .p-hero__body の幅が 266px しかなく、
   % 指定の切り抜きが左に寄っていた。PC 用の aspect-ratio 由来で
   幅が内容に従っていたため。器を明示的に全幅にする。
   ───────────────────────────────────────── */
/* ─────────────────────────────────────────
   K. 768〜1023px のヒーロー：横に余裕があるので広げて重なりを解く
   実測: 押出材が --i03 の頭に、Metal ラベルが人物の上に乗っていた。
   ───────────────────────────────────────── */
@media (min-width: 48rem) and (max-width: 63.99rem) {

  /* 商材は人物より高い位置＆外側へ。頭に乗せない */

}

/* L. 押出材が題字「価値を」に少しかかっていた。段を下げる。 */
/* ─────────────────────────────────────────
   M. 全幅検査で残った極小文字とタップ領域
   ───────────────────────────────────────── */
/* フッターのロゴ副文字 10.0px */
.l-footer-body__nav-logo span,
.l-footer-body__nav-logo i { font-size: max(12px, 1vw); }

/* 取り組みカードの本文が 768〜834px で 11px */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .p-initiative__card-txt { font-size: max(12px, 1.5vw); line-height: 1.75; }
}

/* PC帯（1024〜1439px）の取りこぼし */
@media (min-width: 64rem) and (max-width: 89.99rem) {
  .p-about__history-num i { font-size: max(12px, .36em); }
  .c-border { font-size: max(12px, .95vw); }
  .l-footer-body__nav-main > li > ul a,
  .l-footer-body__nav-main > li > ul .u-line__text { font-size: max(12px, .92vw); }
  /* フッターナビのタップ領域が 17px しかなかった */
  .l-footer-body__nav-main a { min-height: 40px; display: flex; align-items: center; }
  .l-header__logo a { min-height: 44px; display: flex; align-items: center; }
  .l-header__nav-list--main a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* N. 最終の取りこぼし（全幅共通で下限を保証する） */
.l-footer__addr, .l-footer__addr .u-nb { font-size: max(12px, .9vw); }
.l-header__logo-text { font-size: max(12px, .82vw); }
.l-footer-body__cta-entry-copy .c-box { min-width: 40px; min-height: 40px; }
@media (min-width: 80rem) {
  .l-header__logo a { min-height: 44px; display: flex; align-items: center; }
  .l-header__nav-list--main a { min-height: 40px; display: inline-flex; align-items: center; }
  .l-header__nav-list--sub a { min-height: 40px; display: inline-flex; align-items: center; }
}


/* ── v2層から救出した生存宣言（v2削除に伴い依存変数を実値へ展開） ── */
.p-information__list-item-category { background: #F2F8FD; color: #0B57B0; }
.p-message__item-title--ttl::after { background: #A9CFF2; }
.p-message .c-rail { display: none; }
.c-rail__line, .c-rail__cap { filter: hue-rotate(26deg) saturate(1.15); }

/* =========================================================
   配色 v3 ―― 「軽くて、さわやか」へ全面シフト
   ---------------------------------------------------------
   v2 が重かった原因: 濃紺のベタ面が3箇所（取り組み/INTERVIEW/フッター）
   あり、ページ後半が夜のように沈んでいた。
   手本を IHI・ギオン・くらて学園の3枚に絞る:
     ・地は白。青は「空の明るい青」だけ。濃紺は面に使わない（文字だけ）
     ・青の面はどれも明るいグラデ＋白い光
     ・暗い色の総量を最小化。重さではなく「抜け」で見せる
   ========================================================= */
:root {
  --sky-25:  #F7FBFE;
  --sky-100: #EAF4FC;
  --sky-200: #D3E9FA;
  --az-300:  #8FCBF5;
  --az-400:  #56B1F2;
  --az-500:  #2E9BEC;   /* 空の青。ヒーローの主役 */
  --az-600:  #1B7FDD;
  --blue-ink:#0E63C0;   /* 見出し用の青（白地 5.9:1） */
  --navy-ink:#0B3E7E;   /* 文字にだけ使う紺。面には使わない */

  --cl-vivid: var(--az-500);
  --cl-navy:  var(--navy-ink);
}
body { background: #FFFFFF; }

/* ───── ヒーロー: 晴れた空。上ほど淡く、光は右上から ───── */

/* 題字は紺の文字。白抜きより軽く見える（ギオン方式） */


/* 継ぎ目の RECRUIT: ヒーロー底色を引き継ぐ明るい青 */


/* ───── 面はすべて白か淡い空色。濃紺の面は全廃 ───── */
.p-information { background: #FFFFFF; }
.p-company     { background: var(--sky-25); }
.p-about       { background: #FFFFFF; }
.p-initiative  {
  color: var(--cl-dark);
  background:
    radial-gradient(70% 60% at 90% -8%, rgb(255 255 255 / .8), transparent 55%),
    linear-gradient(168deg, var(--sky-100) 0%, var(--sky-200) 55%, var(--az-300) 130%);
}
.p-welfare     { background: #FFFFFF; }
.p-interview   {
  color: var(--cl-dark);
  background:
    radial-gradient(70% 55% at 8% -6%, rgb(255 255 255 / .8), transparent 55%),
    linear-gradient(166deg, var(--sky-25) 0%, var(--sky-100) 60%, var(--sky-200) 100%);
}
.p-message     { background: #FFFFFF; }
.l-footer      {
  color: var(--cl-dark);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sky-100) 46%, var(--sky-200) 100%);
}

/* ───── 文字: 濃紺は文字とボタンにだけ ───── */
.p-initiative .c-heading--lg, .p-initiative__title { color: var(--navy-ink); }
.p-initiative__no, .p-initiative__ttl { color: var(--navy-ink); }
.p-initiative__txt { color: var(--cl-dark); }
.p-initiative__card-item { background: #FFFFFF; box-shadow: 0 10px 28px rgb(14 99 192 / .10); }

.p-interview .c-heading--lg { color: var(--navy-ink); }
.p-interview__title--lg, .p-interview__text-intro { color: var(--cl-dark); }
.p-interview__title--lg { color: var(--navy-ink); }
.p-interview .c-border { border-color: var(--blue-ink); color: var(--blue-ink); }

.p-information .c-heading--lg, .p-company .c-heading--lg, .p-about .c-heading--lg,
.p-welfare .c-heading--lg, .p-message .c-heading--lg, .l-footer .c-heading--lg { color: var(--blue-ink); }
.p-welfare__heading-main { color: var(--navy-ink); }
.p-welfare__subheading-number { color: var(--blue-ink); }
.p-welfare .c-vtext, .p-information__heading .c-vtext { color: var(--sky-200); }

.p-message__item-title--number { color: var(--az-500); }

/* ───── フッター: 明るいまま終わる（IHI 方式） ───── */
.l-footer .c-heading--lg, .l-footer-body__nav-main a, .l-footer__addr,
.l-footer__copy { color: var(--cl-dark); }
.l-footer-body__nav-main > li > ul a { color: #5B7A9C; }
.l-footer-body__nav-logo, .l-footer-body__nav-logo * { color: var(--navy-ink) !important; }
.l-footer-body__nav-logo img { filter: none; }
.l-footer-body__cta-entry {
  background: linear-gradient(160deg, var(--az-500), var(--az-600));
  color: #FFFFFF;
}
.l-footer-body__cta-entry-heading--en, .l-footer-body__cta-entry-copy { color: #FFFFFF; }
.l-footer-body__cta-default { background: #FFFFFF; color: var(--navy-ink); border: 1px solid var(--sky-200); }
.l-footer-loop__text { filter: brightness(0); opacity: .07; }
.l-footer__btn-top .c-box { background: var(--az-500); }
.l-footer__btn-top .c-box svg { fill: #FFFFFF; }

/* ───── ボタン ───── */
.c-box, .c-box--arrow, .c-box--plus { background: var(--az-500); }
.c-box svg { fill: #FFFFFF; }
.l-header__nav-entry a { background: var(--az-500); color: #FFFFFF; }
.l-footer-body__cta-entry .c-box { background: #FFFFFF; }
.l-footer-body__cta-entry .c-box svg { fill: var(--az-600); }
.l-footer-body__cta-default .c-box { background: var(--az-500); }

/* ═════ インタビューページ ═════ */
.p-iv-hero {
  background:
    radial-gradient(80% 70% at 85% -10%, rgb(255 255 255 / .55), transparent 55%),
    linear-gradient(172deg, var(--az-300) 0%, var(--az-400) 34%, var(--az-500) 66%, var(--az-600) 100%);
  color: #FFFFFF;
}
.p-iv-hero__en { color: #FFFFFF; }
.p-iv-hero__title { color: var(--navy-ink); }
.p-iv-hero__lead { color: #FFFFFF; }
.p-iv-index { background: var(--sky-100); }
.p-iv-index__list a, .p-iv-index__label { color: var(--navy-ink); }
.p-iv-person.--cream { background: #FFFFFF; }
.p-iv-person.--aqua {
  color: var(--cl-dark);
  background-image:
    radial-gradient(70% 55% at 10% -6%, rgb(255 255 255 / .8), transparent 55%),
    linear-gradient(166deg, var(--sky-100) 0%, var(--sky-200) 70%, var(--az-300) 140%);
}
.p-iv-person.--aqua .p-iv-person__catch { color: var(--navy-ink); }
.p-iv-person.--aqua .p-iv-qa__q, .p-iv-person.--aqua .p-iv-qa__a { color: var(--cl-dark); }
.p-iv-person.--aqua .p-iv-person__no { color: var(--blue-ink); }
.p-iv-person.--aqua .p-iv-person__name { color: var(--navy-ink); }
.p-iv-person.--cream .p-iv-person__no { color: var(--blue-ink); }
.p-iv-person__tags span { background: var(--az-500); color: #FFFFFF; }
.p-iv-person.--aqua .p-iv-person__tags span { background: var(--az-500); color: #FFFFFF; }
.p-iv-qa__q-mark { background: var(--az-500); color: #FFFFFF; }
.p-iv-person.--aqua .p-iv-qa__q-mark { background: var(--az-500); color: #FFFFFF; }
.p-iv-cta {
  background:
    radial-gradient(80% 70% at 85% -10%, rgb(255 255 255 / .4), transparent 55%),
    linear-gradient(168deg, var(--az-400), var(--az-600));
  color: #FFFFFF;
}

/* v3 微修正: INTERVIEW帯で旧v2の白文字指定が勝ち残っていた */
.p-interview .p-interview__text-intro,
.p-interview .p-interview__text-intro * { color: var(--cl-dark) !important; }
.p-interview .c-heading--sm { color: var(--blue-ink) !important; opacity: .75; }
.p-interview .c-border { border-color: var(--blue-ink) !important; color: var(--blue-ink) !important; }

/* v3 微修正2: 本文の実クラスは .p-interview__text だった */
.p-interview__text, .p-interview__text p,
.p-interview .c-button-primary { color: var(--cl-dark) !important; }

/* =========================================================
   質感レイヤー v4 ―― 「色を塗る」から「素材を作る」へ
   ---------------------------------------------------------
   棚卸しの結果: box-shadow 5個 / backdrop-filter 0 / blur 0 /
   1pxの線 3本 しか無かった。参考サイトの品質はここで作られている。
   ・影は必ず2層以上（近い影＋遠い影）。色は黒でなく青を混ぜる
   ・カードは「淡い線 + 内側の白ハイライト + 2層の影」の3点セット
   ・ヘッダーはガラス（backdrop-filter）
   ・大きな面には光のにじみ（blur した円）を仕込む
   ========================================================= */
:root {
  /* 影は青を混ぜる。黒い影は重くて濁る */
  --sh-xs: 0 1px 2px rgb(11 62 126 / .06), 0 2px 6px rgb(11 62 126 / .05);
  --sh-sm: 0 2px 6px rgb(11 62 126 / .07), 0 6px 16px rgb(11 62 126 / .07);
  --sh-md: 0 4px 12px rgb(11 62 126 / .08), 0 14px 34px rgb(11 62 126 / .10);
  --sh-lg: 0 8px 22px rgb(11 62 126 / .10), 0 28px 64px rgb(11 62 126 / .13);
  --sh-blue: 0 6px 16px rgb(27 127 221 / .28), 0 16px 38px rgb(27 127 221 / .22);
  /* カード内側の白ハイライト（上端に1本） */
  --edge-hi: inset 0 1px 0 rgb(255 255 255 / .9);
  --line: 1px solid rgb(143 203 245 / .38);
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ───── ヘッダー: ガラス ───── */
.l-header__body {
  background: rgb(255 255 255 / .82);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border: var(--line);
  box-shadow: var(--sh-sm);
}

/* ───── ヒーロー: 光のにじみを2つ仕込む ───── */

/* 切り抜きに空気感の影を足す（画像の焼き込み影に重ねる） */


/* ───── カードの3点セット ───── */
.p-initiative__card-item,
.p-information__banner-item,
.p-company__card,
.l-footer-body__cta-default {
  background: #FFFFFF;
  border: var(--line);
  box-shadow: var(--sh-md), var(--edge-hi);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
@media (any-hover: hover) {
  .p-initiative__card-item:hover,
  .p-information__banner-item:hover,
  .p-company__card:hover,
  .l-footer-body__cta-default:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg), var(--edge-hi);
  }
}

/* ───── 写真: 縁を締めて浮かせる ───── */
.p-about__img img, .p-welfare__item-image img,
.p-interview__img img, .p-message__item-img img,
.p-iv-person__photo img {
  box-shadow: var(--sh-md);
}

/* ───── ボタン: 立体感と押下 ───── */
.c-box, .c-box--arrow, .c-box--plus {
  box-shadow: var(--sh-blue), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (any-hover: hover) {
  .c-box:hover, .c-box--hover:hover .c-box {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgb(27 127 221 / .34), 0 22px 48px rgb(27 127 221 / .26), inset 0 1px 0 rgb(255 255 255 / .4);
  }
}
.l-header__nav-entry a {
  box-shadow: var(--sh-blue), inset 0 1px 0 rgb(255 255 255 / .3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (any-hover: hover) {
  .l-header__nav-entry a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(27 127 221 / .38); }
}
.l-footer-body__cta-entry { box-shadow: var(--sh-lg); }

/* ───── 見出し罫: ベタ線をやめてグラデに ───── */
.c-heading--lg::after, .c-heading__line, .c-heading--lg + .c-heading--sm::before { }
.c-heading--lg { position: relative; }

/* ═════ テキストの階層をつくる ═════
   これまで本文もキャプションも同じ濃さだった。3段に分ける。 */
:root {
  --tx-1: #0B2B4F;   /* 見出し・強い文字。黒でなく紺 */
  --tx-2: #33465C;   /* 本文 */
  --tx-3: #6B7E93;   /* 補助・日付・キャプション */
  --tx-1-on: #FFFFFF;
  --tx-2-on: rgb(255 255 255 / .88);
  --tx-3-on: rgb(255 255 255 / .68);
}
body, .p-information__list-text, .p-about__history-text, .p-welfare__item-text,
.p-message__item-text, .p-interview__text, .p-iv-qa__a { color: var(--tx-2); }
.p-about__history-title, .p-initiative__card-ttl, .p-message__item-subTtl,
.p-iv-qa__q { color: var(--tx-1); }
.p-information__list-item-date, .c-heading--sm, .l-footer__addr,
.l-footer__copy, .p-iv-person__name, .p-about__history-num i { color: var(--tx-3); }


/* 数字は青のグラデで抜く（参考サイトの数字表現） */
.p-about__history-num {
  background: linear-gradient(180deg, #2E9BEC 0%, #0E63C0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.p-about__history-num i { -webkit-text-fill-color: var(--tx-3); color: var(--tx-3); }
.p-about__history-num.--word {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #1B7FDD 0%, #0B3E7E 100%);
  -webkit-background-clip: text; background-clip: text;
}
.p-about__history-num.--word i { -webkit-text-fill-color: transparent; }

/* 英字見出しは字間を開けて軽く */
.c-heading--lg { letter-spacing: .12em; }
.c-heading--sm { letter-spacing: .18em; font-weight: 600; }

/* ───── 淡い面の上に置くセクションの仕切り線 ───── */
.p-company, .p-welfare { border-top: var(--line); border-bottom: var(--line); }

/* ───── リンクの下線を青のグラデに ───── */
.u-line__text {
  background-image: linear-gradient(90deg, #2E9BEC, #0E63C0);
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 100% 100%;
  transition: background-size .5s var(--ease);
}
@media (any-hover: hover) {
  .u-line__target:hover .u-line__text { background-size: 100% 2px; background-position: 0 100%; }
}

/* =========================================================
   v4 バグ修正: 数字が消えた
   ---------------------------------------------------------
   原因: 数字の実体は .c-num__val / .c-num__char という
   カウントアップ用の子要素。親 .p-about__history-num に
   background-clip:text を掛けたため、子には背景が届かず、
   子自身の色だけが残って transparent に潰れた。
   → グラデは子要素に直接掛け、単位 <i> は通常色に戻す。
   ========================================================= */
.p-about__history-num {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--tx-1) !important;
}
.p-about__history-num .c-num__val,
.p-about__history-num .c-num__char {
  background: linear-gradient(180deg, #2E9BEC 0%, #0E63C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.p-about__history-num.--word .c-num__val,
.p-about__history-num.--word .c-num__char {
  background: linear-gradient(180deg, #1B7FDD 0%, #0B3E7E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 単位は補助色のまま。グラデを掛けない */
.p-about__history-num i,
.p-about__history-num.--word i {
  background: none !important;
  -webkit-text-fill-color: var(--tx-3) !important;
  color: var(--tx-3) !important;
}

/* =========================================================
   ヒーロー v5 ―― single source of truth
   ---------------------------------------------------------
   旧実装は 250 のルールブロックが 14 層に散在し、同一セレクタが
   最大 11 回上書きされていた（768px 崩壊事故の再現条件）。
   全削除のうえ、SP / TB / PC をこの1ブロックだけで完結させる。

   構図: 巨大欧文タイポが骨格、その上に主役が跳ぶ。要素は6点。
   ========================================================= */
.p-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 2000 / 1060;          /* PC 1440px 時 763px */
  background:
    radial-gradient(60% 50% at 82% -6%, rgb(255 255 255 / .60), transparent 60%),
    linear-gradient(178deg,
      #F2F9FE 0%,
      #D7ECFB 16%,
      #8FCBF5 44%,
      #2E9BEC 74%,
      #1B7FDD 100%);
}
/* 白光2灯。上部に白面積を作り、切り抜きの白フチのチラつきを止める */
.p-hero::before,
.p-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.p-hero::before {
  width: 46vw; height: 46vw; top: -18vw; right: -8vw;
  background: radial-gradient(circle, rgb(255 255 255 / .70), transparent 70%);
}
.p-hero::after {
  width: 30vw; height: 30vw; bottom: -10vw; left: -6vw;
  background: radial-gradient(circle, rgb(143 203 245 / .45), transparent 70%);
}
.p-hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* ── 構図の骨格。右端で見切れる ── */
.p-hero__mega {
  position: absolute;
  z-index: 1;
  left: -24px;
  bottom: 37px;
  margin: 0;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 188px;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: rgb(255 255 255 / .96);
  user-select: none;
}

/* ── 日本語題字。明朝をやめ太ゴシックへ ── */
.p-hero__title {
  position: absolute;
  z-index: 5;
  left: 72px;
  top: 148px;
  margin: 0;
  max-width: none;
  white-space: nowrap;      /* 2行固定。折り返させない */
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-weight: 800;
  font-size: 58px;          /* 実測: 64pxだと9字で585px必要。58pxで530px */
  line-height: 1.42;
  letter-spacing: .01em;
  color: #0B3E7E;
  font-feature-settings: "palt" 1, "kern" 1;
}
.p-hero__title span { display: block; }

/* ── 英文は5行から1行へ ── */
.p-hero__lead {
  position: absolute;
  z-index: 5;
  left: 76px;
  top: 336px;
  margin: 0;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0E63C0;
}

/* ── 切り抜き3点 ── */
.p-hero__img {
  position: absolute;
  margin: 0;
  line-height: 0;
}
.p-hero__img img {
  display: block;
  width: 100%;
  height: auto;
}
.p-hero__img.--lead {
  z-index: 4;
  left: 660px;
  top: 240px;
  width: 520px;
  rotate: -4deg;
}
.p-hero__img.--lead img { filter: drop-shadow(0 18px 32px rgb(11 62 126 / .28)); }
.p-hero__img.--side {
  z-index: 3;
  left: 1160px;
  bottom: 20px;
  width: 260px;
}
.p-hero__img.--obj {
  z-index: 2;
  left: 108px;
  bottom: 48px;
  width: 180px;
}
.p-hero__img.--side img,
.p-hero__img.--obj img { filter: drop-shadow(0 10px 20px rgb(11 62 126 / .20)); }

/* 入場前は伏せる。recruit.js が is-hero-armed を外すまでの保険と対で動く */
.is-hero-armed .p-hero__mega,
.is-hero-armed .p-hero__title,
.is-hero-armed .p-hero__lead,
.is-hero-armed .p-hero__img { opacity: 0; }

/* ── タブレット 768〜1279px ── */
@media (max-width: 79.99rem) {
  .p-hero { aspect-ratio: 1600 / 980; }
  .p-hero__mega  { font-size: 13.1vw; bottom: 3.4vw; left: -1.7vw; }
  /* TB も nowrap のままだと 768px で溢れるので 2行に折る */
  .p-hero__title {
    left: 5vw; top: 116px;
    font-size: clamp(34px, 5vw, 46px);
    max-width: 56vw;
    white-space: normal;
  }
  .p-hero__lead  { left: 5.3vw; top: 268px; font-size: 12px; }
  .p-hero__img.--lead { left: 46vw; top: 23vw; width: 40vw; }
  .p-hero__img.--side { left: auto; right: 0; bottom: 2vw; width: 20vw; }
  .p-hero__img.--obj  { left: 7.5vw; bottom: 4.5vw; width: 13vw; }
}

/* ── SP 〜767px ── */
@media (max-width: 47.99rem) {
  .p-hero { aspect-ratio: 375 / 706; }
  .p-hero::before { width: 90vw; height: 90vw; top: -34vw; right: -20vw; }
  .p-hero::after  { display: none; }

  /* SPは題字を2行に折る（1行 nowrap だと 375px に収まらない）。
     ヘッダー実測 高さ約72px＋余白 → 題字の上端は 108px 以降に置く。 */
  .p-hero__mega  { font-size: 24.5vw; bottom: 5.4vw; left: -3.7vw; }
  .p-hero__title {
    left: 5.3vw; top: 108px;
    font-size: clamp(28px, 8.2vw, 34px);
    line-height: 1.5;
    max-width: 90vw;
    white-space: normal;         /* PCの nowrap を解除 */
  }
  .p-hero__title span { display: block; }
  .p-hero__lead  { left: 5.6vw; top: 226px; font-size: 11px; letter-spacing: .1em; }

  .p-hero__img.--lead { left: 23.5vw; top: auto; bottom: 5.7vw; width: 64vw; }
  .p-hero__img.--side { left: auto; right: -4.3vw; bottom: 2.3vw; width: 34vw; }
  .p-hero__img.--obj  { display: none; }
}

/* =========================================================
   品質の精緻化 ―― 構図は一切変えず、質だけを上げる
   ---------------------------------------------------------
   実測で見つけた「安っぽさ」の要因:
   ・文字色が本文/見出しとも rgb(51,70,92) や rgb(23,32,43) で
     濃さが揃わず、青系のページに黒みが混じって濁っている
   ・数字 51.84px に対し数字ラベルが 24px で、主従の差が2.2倍しかない
   ・日付16.2px > 本文15.3px と、副次情報のほうが大きい逆転
   ・タグの文字15.3pxが本文と同寸で、チップとして沈まない
   ・行間 lh1.7 が本文としてやや詰まり、字間 .02em が広い
   ・About大見出し lh1.5 が44pxの見出しには広すぎ、塊にならない
   ========================================================= */

/* ── 1. 文字色を青系1本に統一する ──
   黒みのある #17202B / #33465C が混在していた。すべて紺系へ寄せる。 */
:root {
  --ink-1: #0A2E5C;   /* 見出し。黒でなく紺 */
  --ink-2: #35506E;   /* 本文 */
  --ink-3: #7089A6;   /* 日付・注記・単位 */
}
body,
.p-information__list-text,
.p-about__content-text,
.p-about__history-text,
.p-initiative__card-txt,
.p-welfare__item-text,
.p-interview__text,
.p-message__item-text { color: var(--ink-2); }

.p-about__content-title,
.p-about__history-title,
.p-initiative__card-ttl,
.p-welfare__heading-main,
.p-message__item-title--ttl,
.p-message__item-subTtl,
.p-interview__title--lg { color: var(--ink-1); }

.p-information__list-item-date,
.p-about__history-num i,
.l-footer__addr,
.l-footer__copy { color: var(--ink-3); }

/* ── 2. 主従の差をつける ──
   数字とラベルの比が 2.2倍しかなく、どちらも主役に見えていた。 */
.p-about__history-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.6;
  color: #0E63C0;
  margin-bottom: 10px;
}
.p-about__history-num { letter-spacing: -.015em; }
.p-about__history-num i {
  font-size: 15px;
  font-weight: 700;
  margin-left: 5px;
  letter-spacing: 0;
}
.p-about__history-text {
  font-size: 13.5px;
  line-height: 1.85;
  margin-top: 10px;
}

/* ── 3. 副次情報が本文より大きい逆転を直す ── */
.p-information__list-item-date {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.p-information__list-item-category {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: 6px 12px;
  height: auto;
  background: #EAF4FC;
  color: #0B57B0;
}
.p-information__list-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.7;
  color: var(--ink-1);
}

/* ── 4. 行間と字間を読み物として整える ──
   本文の字間 .02em は和文には広い。行間は 1.7 → 1.85 に開ける。 */
.p-about__content-text,
.p-welfare__item-text,
.p-interview__text,
.p-message__item-text,
.p-initiative__card-txt {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .01em;
}

/* ── 5. 大見出しは行間を締めて塊にする ──
   44px の見出しに lh1.5（66px）は開きすぎで、言葉が散っていた。 */
.p-about__content-title {
  line-height: 1.42;
  letter-spacing: .005em;
}
.p-welfare__heading-main { line-height: 1.3; letter-spacing: .01em; }
.p-message__item-title--ttl { line-height: 1.4; }
.p-interview__title--lg { line-height: 1.35; }

/* ── 6. 英字見出しの精度 ──
   28px に字間 .12em は「小さいのに間延び」する最悪の組み合わせ。
   サイズは変えず、字間を詰めて締める。 */
.c-heading--lg {
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--ink-1);
}
.c-heading--sm {
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--ink-3);
}

/* ── 7. カード・ボタンの質感を上げる ──
   影が単層で「浮いていない」ものがあった。2層に統一する。 */
.p-initiative__card-item,
.p-information__banner-item,
.p-company__card {
  border: 1px solid rgb(143 203 245 / .34);
  box-shadow:
    0 2px 5px rgb(10 46 92 / .05),
    0 10px 24px rgb(10 46 92 / .07);
}
@media (any-hover: hover) {
  .p-initiative__card-item:hover,
  .p-information__banner-item:hover,
  .p-company__card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 4px 10px rgb(10 46 92 / .07),
      0 18px 40px rgb(10 46 92 / .12);
  }
}

/* ── 8. ボタンの文字を締める ── */
.c-button-primary {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-1);
}

/* ── 9. 写真の色温度を揃える（構図は変えない） ──
   緑被り・暖色・高彩度青が同一ページに混在していた。 */
.p-about__img img,
.p-welfare__item-image img,
.p-interview__img img,
.p-message__item-img img,
.p-information__banner-item img,
.p-company__card img,
.p-about__figures-img--main,
.p-iv-person__photo img {
  filter: saturate(.88) contrast(1.04) brightness(1.02);
}

/* ── 10. セクション余白の端数を整える ──
   86.4 / 90 / 108 / 113.4px と端数が混在していた。 */
.p-information, .p-company, .p-about,
.p-initiative, .p-welfare, .p-interview, .p-message {
  padding-block: 112px;
}
@media (max-width: 63.99rem) {
  .p-information, .p-company, .p-about,
  .p-initiative, .p-welfare, .p-interview, .p-message { padding-block: 64px; }
}

/* ── 11. お知らせ本文が2行に折れていた ──
   本文を16pxに上げたぶん列幅が足りなくなった。日付とタグの列を詰めて本文に回す。 */
@media (min-width: 64rem) {
  .p-information__list-item-link { grid-template-columns: 26cqi minmax(0, 1fr); column-gap: 1.2vw; }
  .p-information__list-item-sub { grid-template-columns: 9.5cqi minmax(0, 1fr); gap: 10px; }
}

/* ── 12. 「ホクセイのこと」の縦柱が2本重なって見えていた ──
   sticky の柱が区間の切れ目で二重に写る。1本だけ残す。 */
.p-about__heading + .p-about__heading,
.p-about .c-vtext ~ .c-vtext { display: none; }

/* ── 13. VIEW MORE の金の丸が浮きすぎ ──
   影が強く「押しボタン」に見えていた。線で締めて面を落ち着かせる。 */
.c-button-primary .c-box {
  box-shadow: 0 2px 6px rgb(10 46 92 / .12);
  border: 1px solid rgb(255 255 255 / .5);
}
@media (any-hover: hover) {
  .c-button-primary:hover .c-box { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(10 46 92 / .18); }
}

/* =========================================================
   越前信金の骨格へ回帰 ―― フラットな単色 × 切り抜きコラージュ
   ---------------------------------------------------------
   参考サイトの実測（main.css）:
     box-shadow 1 / radial-gradient 0 / backdrop-filter 0 / blur 0
     border-radius 95 / writing-mode 12
   対して現状は 影16・放射グラデ14・ガラス4 と、
   まったく別の言語（グラデと質感）で作られていた。
   面はベタ塗り、角は大きく丸め、装飾は切り抜きと縦組み文字で作る。
   色だけをホクセイの藍に置き換える。
   ========================================================= */
:root {
  --hk-blue:  #1B6FD0;   /* 主役のベタ面。参考の朱 #e7594d と同じ役 */
  --hk-blue-d:#0E4E9C;   /* 締めの濃紺 */
  --hk-cream: #F4F7FB;   /* 参考の生成り #f6f5f0 と同じ役 */
  --hk-ink:   #1F2A37;
  --hk-gold:  #F6BE3C;
}

/* ── 1. グラデ・ガラス・ぼかしを撤去し、ベタ面に戻す ── */
.p-hero {
  background: var(--hk-blue) !important;
}
.p-hero::before, .p-hero::after { display: none !important; }

.l-header__body {
  background: #FFFFFF !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;   /* 参考はピル型の浮遊バー */
}

.p-information {
  background: var(--hk-blue) !important;
  background-image: none !important;
  color: #FFFFFF;
}
.p-company    { background: var(--hk-cream) !important; background-image: none !important; }
.p-about      { background: var(--hk-cream) !important; background-image: none !important; }
.p-initiative {
  background: var(--hk-blue) !important;
  background-image: none !important;
  color: #FFFFFF;
  border-radius: 0 !important;
  width: 100% !important;
  margin-inline: 0 !important;
}
.p-welfare    { background: var(--hk-blue) !important; background-image: none !important; color: #FFFFFF; }
.p-interview  { background: var(--hk-cream) !important; background-image: none !important; }
.p-message    { background: var(--hk-cream) !important; background-image: none !important; }
.l-footer     { background: var(--hk-cream) !important; background-image: none !important; }

/* ── 2. 影を消す。参考サイトの box-shadow は全体で1個だけ ── */
.p-initiative__card-item,
.p-information__banner-item,
.p-company__card,
.p-about__img img,
.p-welfare__item-image img,
.p-interview__img img,
.p-message__item-img img,
.c-box, .c-box--arrow, .c-box--plus,
.l-header__nav-entry a,
.l-footer-body__cta-entry,
.c-button-primary .c-box {
  box-shadow: none !important;
}
.p-initiative__card-item,
.p-information__banner-item,
.p-company__card { border: 0 !important; }
@media (any-hover: hover) {
  .p-initiative__card-item:hover,
  .p-information__banner-item:hover,
  .p-company__card:hover { transform: none !important; box-shadow: none !important; }
}

/* ── 3. 角丸を大きく。参考は border-radius が95箇所で骨格をなす ── */
.p-about__img img,
.p-welfare__item-image img,
.p-interview__img img { border-radius: 28px !important; }
.p-message__item-img img,
.p-information__banner-item,
.p-company__card { border-radius: 20px !important; }
.p-initiative__card-item { border-radius: 18px !important; }
.p-information__list-item-category { border-radius: 999px !important; }

/* ── 4. 濃いベタ面の上の文字を白へ ── */
.p-information .c-heading--lg,
.p-information .c-heading--sm,
.p-information__list-text,
.p-information__list-item-date,
.p-welfare .c-heading--lg,
.p-welfare .c-heading--sm,
.p-welfare__heading-main,
.p-welfare__item-text,
.p-welfare__subheading-number,
.p-initiative .c-heading--lg,
.p-initiative .c-heading--sm,
.p-initiative__title { color: #FFFFFF !important; }
.p-information__list-item-date { color: rgb(255 255 255 / .78) !important; }
.p-information__list-item-category { background: #FFFFFF !important; color: var(--hk-blue) !important; }
.p-information__list-item-link { border-color: rgb(255 255 255 / .22) !important; }
.p-initiative__card-item { background: #FFFFFF !important; }
.p-initiative__card-ttl { color: var(--hk-ink) !important; }
.p-initiative__card-txt { color: #46586C !important; }

/* 淡い面の見出しは藍 */
.p-company .c-heading--lg,
.p-about .c-heading--lg,
.p-interview .c-heading--lg,
.p-message .c-heading--lg,
.l-footer .c-heading--lg { color: var(--hk-blue-d) !important; }

/* ── 5. 数字を主役にする。参考は 59% / 0% / 20.4年 が画面の顔 ──
   現状 51.8px は「量の羅列」。参考水準へ引き上げる。 */
.p-about__history-num {
  font-size: clamp(64px, 6.6vw, 96px) !important;
  font-weight: 800 !important;
  line-height: .95 !important;
  letter-spacing: -.03em !important;
  color: var(--hk-blue) !important;
}
.p-about__history-num .c-num__val,
.p-about__history-num .c-num__char {
  background: none !important;
  -webkit-text-fill-color: var(--hk-blue) !important;
  color: var(--hk-blue) !important;
}
.p-about__history-num i {
  font-size: 17px !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: var(--hk-ink) !important;
  color: var(--hk-ink) !important;
}
.p-about__history-num.--word,
.p-about__history-num.--word .c-num__val,
.p-about__history-num.--word .c-num__char,
.p-about__history-num.--word i {
  font-size: clamp(30px, 3vw, 42px) !important;
  -webkit-text-fill-color: var(--hk-blue) !important;
  color: var(--hk-blue) !important;
  line-height: 1.35 !important;
}
/* 項目ラベルは縦組みにして参考の組み方へ寄せる（writing-mode を増やす） */
.p-about__history-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  color: var(--hk-ink) !important;
}

/* ── 6. ENTRY と矢印は原色で。ホバーは色替えのみ（影を使わない） ── */
.l-header__nav-entry a {
  background: var(--hk-blue) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
}
.c-box, .c-box--arrow, .c-box--plus { background: var(--hk-blue) !important; }
.c-box svg { fill: #FFFFFF !important; }
.c-button-primary .c-box { border: 0 !important; }
.l-footer-body__cta-entry { background: var(--hk-blue) !important; color: #FFFFFF !important; }
.l-footer-body__cta-entry-heading--en,
.l-footer-body__cta-entry-copy { color: #FFFFFF !important; }

/* ── 7. ベタ青地の上の題字は白抜き ──
   参考の「あつまれ 地域の笑顔」も朱地に白抜き。紺のままでは沈む。 */
.p-hero__title { color: #FFFFFF !important; }
.p-hero__lead  { color: rgb(255 255 255 / .82) !important; }
.p-hero__mega  { color: rgb(255 255 255 / .30) !important; }

/* ── 8. ヒーローとお知らせの境目をつける ──
   同じ青が連続して1枚の面に見えていた。参考はヒーローが独立した面。
   お知らせを生成りに落とし、青→生成り→白 のリズムに戻す。 */
.p-information {
  background: var(--hk-cream) !important;
  color: var(--hk-ink) !important;
}
.p-information .c-heading--lg { color: var(--hk-blue-d) !important; }
.p-information .c-heading--sm { color: #7089A6 !important; }
.p-information__list-text { color: var(--hk-ink) !important; }
.p-information__list-item-date { color: #7089A6 !important; }
.p-information__list-item-category { background: var(--hk-blue) !important; color: #FFFFFF !important; }
.p-information__list-item-link { border-color: rgb(31 42 55 / .12) !important; }
/* 撤去: おしらせは壁紙ではなく見出しなので 5075行で濃色に指定 */

/* ── 9. 数字の列が細く、96pxの数字が3行に折れていた ──
   実測: .p-about__history-num の幅 216px / 高さ181px（本来は1行96px）。
   参考サイトは数字の列が広く、数字そのものが画面の顔になっている。
   左列を広げ、右の建物写真（sticky）を絞る。 */
@media (min-width: 64rem) {
  .p-about__heading-wrapper {
    grid-template-columns: 46% 42% 1fr !important;
    column-gap: 3% !important;
  }
  .p-about__history-num { white-space: nowrap; }
  .p-about__history-item { min-height: 0 !important; }
  .p-about__history-inner { width: auto !important; margin-left: 0 !important; }
  /* 数字の左に絵、右に数字＋説明という参考の並びへ */
  .--n01 .p-about__history-figure,
  .--n02 .p-about__history-figure,
  .--n03 .p-about__history-figure,
  .--n04 .p-about__history-figure,
  .--n05 .p-about__history-figure,
  .--n06 .p-about__history-figure,
  .--n07 .p-about__history-figure {
    position: static !important;
    width: 92px !important;
    height: auto !important;
    float: left;
    margin: 0 18px 8px 0;
  }
  .p-about__history-item { display: block !important; overflow: hidden; }
  .p-about__figures-body { width: 100% !important; }
  .p-about__figures-img--main { max-height: 34vh !important; }
}

/* ── 10. 実効グラデが21箇所残っていた ──
   参考サイトの linear-gradient は5箇所（うち面に使うのは0）。
   面・カード・帯のグラデをすべてベタに落とす。
   下線アニメ（u-line）だけはグラデが機能なので残す。 */
.p-hero, .p-information, .p-company, .p-about, .p-initiative,
.p-welfare, .p-interview, .p-message, .l-footer,
.l-footer-body__cta-entry, .l-seam-loop,
.p-iv-hero, .p-iv-index, .p-iv-person, .p-iv-cta,
.p-iv-person.--aqua, .p-iv-person.--cream,
.p-numbers, .p-company__card, .p-initiative__card-item {
  background-image: none !important;
}
.l-footer      { background: var(--hk-cream) !important; }
.l-footer-body__cta-entry { background: var(--hk-blue) !important; }
.p-iv-hero     { background: var(--hk-blue) !important; }
.p-iv-index    { background: var(--hk-cream) !important; }
.p-iv-cta      { background: var(--hk-blue) !important; }
.p-iv-person.--cream { background: #FFFFFF !important; }
.p-iv-person.--aqua  { background: var(--hk-cream) !important; }
.p-iv-person.--aqua .p-iv-person__catch,
.p-iv-person.--aqua .p-iv-qa__q { color: var(--hk-blue-d) !important; }
.p-iv-person.--aqua .p-iv-qa__a,
.p-iv-person.--aqua .p-iv-person__name { color: #35506E !important; }
.p-iv-person__photo { background: transparent !important; }

/* =========================================================
   手描き装飾と縦組みの柱 ―― 参考サイトの賑わいを作る2要素
   ---------------------------------------------------------
   参考サイトの実測: 装飾SVG 16点（見出し1つにつき1点）、
   writing-mode 12箇所。どちらもフラットな面に「手の跡」と
   「和の縦線」を与えて、単色ベタが素っ気なくなるのを防いでいる。
   ========================================================= */

/* ── 見出しに添える手描き装飾 ── */
.c-heading { position: relative; }
.c-heading__deco {
  position: absolute;
  width: 42px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.c-heading__deco.--d-tr { top: -22px; right: -46px; }
/* 入場で弾む。参考も装飾だけが弾む（写真と文字は弾まない） */
.c-heading__deco {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s ease-out;
}
.is-in .c-heading__deco,
.is-decorate .c-heading__deco {
  opacity: 1;
  animation: .8s ease-out forwards decoPop;
}
@keyframes decoPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25); }
  50%  { transform: scale(.9); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .c-heading__deco { opacity: 1; transform: none; animation: none; }
}

/* ── 縦組みの柱 ──
   セクションの端に立てる。読ませる文字ではなく「目印」なので薄く。 */
.c-pillar {
  position: absolute;
  top: 96px;
  right: 2.4vw;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.c-pillar .c-vtext {
  writing-mode: vertical-rl;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: .22em;
  line-height: 1;
}
.c-pillar.--on-blue  .c-vtext { color: rgb(255 255 255 / .16); }
.c-pillar.--on-cream .c-vtext { color: rgb(27 111 208 / .14); }
/* 柱を立てるセクションは相対配置＋はみ出しを切る */
.p-initiative, .p-welfare, .p-interview, .p-message {
  position: relative;
  overflow: hidden;
}
@media (max-width: 63.99rem) {
  .c-pillar { right: 1.2vw; top: 56px; }
  .c-pillar .c-vtext { font-size: 24px; letter-spacing: .18em; }
  .c-heading__deco { width: 32px; }
  .c-heading__deco.--d-tr { top: -16px; right: -34px; }
}
@media (max-width: 47.99rem) {
  .c-pillar { display: none; }   /* SPは幅を食うだけなので出さない */
}

/* ── 旧 geo-*.svg の装飾をホクセイ手描きに差し替え ──
   CAREER の見出しに付いていた幾何線を、手描きの線に置換する */
.p-welfare__heading-decoration { filter: none; }

/* ── インタビューページにも同じ語彙を ── */
.p-iv-hero { position: relative; }
.p-iv-hero__deco {
  position: absolute;
  top: 18%;
  left: calc(5vw + 320px);
  width: 46px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s ease-out;
}
.is-in .p-iv-hero__deco,
.is-decorate .p-iv-hero__deco { opacity: 1; animation: .8s ease-out forwards decoPop; }
.p-iv-person { position: relative; overflow: hidden; }
.p-iv-person .c-pillar { top: 72px; right: 2vw; }
.p-iv-person.--aqua .c-pillar .c-vtext { color: rgb(27 111 208 / .16); }
@media (max-width: 47.99rem) { .p-iv-hero__deco { display: none; } }

/* インタビューのヒーロー: 副題が青地に紺で沈んでいた */
.p-iv-hero__title { color: #FFFFFF !important; }
.p-iv-hero__lead  { color: rgb(255 255 255 / .86) !important; }

/* =========================================================
   クライアント修正 A: ヘッダー / ヒーロー6点 / RECRUITマーキー
   ========================================================= */

/* ── 1. ヘッダー: ロゴマーク追加・文字を細く ── */
.l-header__logo a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.l-header__logo-mark {
  width: auto;
  height: 32px;      /* 縦長ロゴ(240x282)なので高さ基準 */
  flex: none;
}
.l-header__logo-type { width: auto; height: 17px; }
.l-header__logo-text {
  font-weight: 500 !important;
  letter-spacing: .16em;
}
/* 「少し太いのでもう少し細く」= ナビ全体を 700 → 500 に */
.l-header__nav-list--main > li > a .u-line__text,
.l-header__nav-list--sub  > li > a { font-weight: 500 !important; }
.l-header__nav-entry a { font-weight: 600 !important; }
@media (max-width: 47.99rem) {
  .l-header__logo-mark { height: 26px; }
  .l-header__logo-type { height: 14px; }
}

/* ── 3. RECRUIT 連続横流し（ヒーロー直下） ── */
.l-seam-loop {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--hk-blue);
  border-block: 1px solid rgb(255 255 255 / .22);
  padding-block: 14px;
}
.l-seam-loop__track {
  display: flex;
  width: max-content;
  animation: seamFlow 26s linear infinite;
}
.l-seam-loop__unit {
  flex: none;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .06em;
  color: rgb(255 255 255 / .92);
  white-space: nowrap;
}
@keyframes seamFlow { to { transform: translateX(-33.3333%); } }
@media (max-width: 47.99rem) {
  .l-seam-loop { padding-block: 10px; }
  .l-seam-loop__unit { font-size: 20px; }
}

/* ── 4. ヒーロー切り抜き6点 ──
   骨格: 左に題字、右半分に人物を弧を描くように散らす。
   参考サイト同様、各々が違う周期でちょこまか揺れる。 */
.p-hero__img.--p1 { z-index: 5; left: 640px; top: 210px;  width: 330px; rotate: -3deg; }
.p-hero__img.--p2 { z-index: 4; left: 940px; top: 330px;  width: 250px; rotate:  4deg; }
.p-hero__img.--p3 { z-index: 3; left: 1180px; top: 176px; width: 150px; rotate: -5deg; }
.p-hero__img.--p4 { z-index: 3; left: 1300px; top: 372px; width: 148px; rotate:  3deg; }
.p-hero__img.--p5 { z-index: 2; left: 470px;  top: 430px; width: 186px; rotate:  5deg; }
.p-hero__img.--p6 { z-index: 2; left: 96px;   top: 500px; width: 300px; rotate: -2deg; }
.p-hero__img.--p1 img { filter: drop-shadow(0 18px 32px rgb(11 62 126 / .28)); }
.p-hero__img.--p2 img, .p-hero__img.--p3 img, .p-hero__img.--p4 img,
.p-hero__img.--p5 img, .p-hero__img.--p6 img { filter: drop-shadow(0 10px 20px rgb(11 62 126 / .20)); }

/* ちょこまか揺れ。rotate は各要素が持っているので translate だけ動かす。
   --jig で開始位相をずらし、6点が同時に同じ動きをしないようにする。 */
@keyframes jiggle {
  0%   { translate: 0 0; }
  25%  { translate: 2px -6px; }
  50%  { translate: -3px -2px; }
  75%  { translate: 1px -7px; }
  100% { translate: 0 0; }
}
.js-jiggle { animation: jiggle 5.2s ease-in-out infinite; animation-delay: var(--jig, 0s); }
.p-hero__img.--p2.js-jiggle { animation-duration: 6.1s; }
.p-hero__img.--p3.js-jiggle { animation-duration: 4.6s; }
.p-hero__img.--p4.js-jiggle { animation-duration: 5.7s; }
.p-hero__img.--p5.js-jiggle { animation-duration: 4.9s; }
.p-hero__img.--p6.js-jiggle { animation-duration: 6.5s; }

/* 題字を短くしたのでヒーローの余白を詰める */
.p-hero__mega  { font-size: 168px; }

@media (max-width: 79.99rem) {
  .p-hero__img.--p1 { left: 44vw;   top: 20vw;   width: 25vw; }
  .p-hero__img.--p2 { left: 65vw;   top: 29vw;   width: 19vw; }
  .p-hero__img.--p3 { left: 82vw;   top: 16vw;   width: 11.5vw; }
  .p-hero__img.--p4 { left: 89vw;   top: 33vw;   width: 11vw; }
  .p-hero__img.--p5 { left: 32vw;   top: 37vw;   width: 14vw; }
  .p-hero__img.--p6 { left: 5vw;    top: 43vw;   width: 22vw; }
}
@media (max-width: 47.99rem) {
  /* SPは6点だと潰れるので主役3点に絞る（--p3/--p4 は非表示） */
  .p-hero__img.--p1 { left: 26vw; top: auto; bottom: 8vw;  width: 52vw; }
  .p-hero__img.--p2 { left: auto; right: -5vw; bottom: 3vw; width: 32vw; }
  .p-hero__img.--p6 { left: -4vw; top: auto; bottom: 2vw;  width: 34vw; }
  .p-hero__img.--p3,
  .p-hero__img.--p4,
  .p-hero__img.--p5 { display: none; }
}

/* 入場前に伏せる対象へ6点を含める（旧 --lead/--side/--obj は撤去済み） */
.is-hero-armed .p-hero__img { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js-jiggle { animation: none !important; }
  .l-seam-loop__track { animation: none !important; }
}

/* ── 5. 「おしらせ」縦書きをニュース一覧の横へ ──
   参考実測(1064px幅): セクション上端から80px(=7.5vw)下、x=67px(=6.3vw)、39.9px(=3.75vw)。
   従来は height:100% でマーキーに食い込み、色も薄すぎて読めなかった。 */
@media (min-width: 48rem) {
  .p-information__heading {
    top: 7.5vw;                 /* セクションの padding-block と揃える */
    height: auto;
    left: 6.3vw;
    width: auto;
    padding-right: 0;
  }
  .p-information__heading .c-vtext {
    margin-left: 0;
    color: var(--hk-blue) !important;
    font-weight: 800;
  }
  .p-information__heading .c-rail { left: -1.6vw; height: 100%; }
  .p-information__heading-decoration { top: -1.4vw; left: -1.2vw; }
}

/* ── 6. バナー: ラベルは画像に焼き込み済みなので枠だけ ──
   VIEW MORE の下線とバナー下端を揃えるため、列を下寄せにして高さを合わせる。 */
.p-information__banner-item { background: transparent; border-radius: 16px; }
.p-information__banner-item img {
  aspect-ratio: 1000 / 562 !important;
  border-radius: 16px;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 48rem) {
  /* 左カラム末尾の VIEW MORE と、右カラム末尾のバナー下端を同じ行に揃える */
  /* VIEW MORE の下線とバナー下端を同じ行に揃える（指示6）。
     左カラムの最後の要素と右カラムの最後の要素を、同じ底辺で終わらせる。 */
  .p-information__body { align-items: stretch; }
  .p-information__banner-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0;
  }
}

/* =========================================================
   Variety: 子ページ誘導（参考 HOKUSEIセクション参考.png）
   藍ベタ面／左端に縦流し欧文／3枚をジグザグ
   ========================================================= */
.p-variety {
  position: relative;
  overflow: hidden;
  background: var(--hk-blue);
  color: #FFFFFF;
  padding-block: clamp(72px, 8vw, 128px);
}
/* 左端の縦流し欧文。参考の VARIETY と同じ役 */
.p-variety__pillar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(12px, 2.6vw, 44px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* 参考は縦にループし続ける。2本並べて -100% まで送る */
.p-variety__pillar-track {
  display: flex;
  flex-direction: column;
  height: max-content;
  animation: pillarLoop 30s linear infinite;
}
.p-variety__pillar-text {
  display: block;
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(44px, 5.4vw, 82px);
  line-height: .96;
  letter-spacing: .04em;
  color: rgb(255 255 255 / .90);
}
@keyframes pillarLoop { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .p-variety__pillar-track { animation: none !important; } }

/* 縦流しの幅だけ本体を右へ逃がす */
.p-variety__inner { position: relative; z-index: 2; }
.p-variety__heading { margin-bottom: clamp(28px, 3.4vw, 56px); }
.p-variety__heading .c-heading--lg { color: #FFFFFF; }
.p-variety__heading .c-heading--sm { color: rgb(255 255 255 / .72); }

.p-variety__item {
  display: grid;
  align-items: center;
  gap: clamp(20px, 3.2vw, 56px);
  margin-block: clamp(40px, 5vw, 82px);
}
.p-variety__item.--a { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.p-variety__item.--b,
.p-variety__item.--c { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }

.p-variety__item-figure { margin: 0; line-height: 0; }
.p-variety__item-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.p-variety__item-num {
  margin: 0 0 6px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1;
  color: #FFFFFF;
}
.p-variety__item-en {
  margin: 0 0 8px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 27px);
  letter-spacing: .02em;
  color: #FFFFFF;
}
.p-variety__item-title {
  margin: 0 0 18px;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-weight: 800;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.34;
  letter-spacing: .01em;
  color: #FFFFFF;
}
/* 参考の点線区切り */
.p-variety__item-title::after {
  content: "";
  display: block;
  margin-top: 16px;
  border-top: 2px dotted rgb(255 255 255 / .55);
}
.p-variety__item-lead {
  margin: 0 0 22px;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.95;
  color: rgb(255 255 255 / .92);
}
.p-variety__item-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  color: #FFFFFF;
}
.p-variety__item-more .c-box--arrow { background: #FFFFFF; color: var(--hk-blue); }
.p-variety__item-more .c-box--arrow svg { fill: var(--hk-blue); }

/* 縦流し欧文と本文が重ならないよう、PCでは本体を右へ寄せる */
@media (min-width: 64rem) {
  .p-variety__inner { padding-left: clamp(80px, 8.4vw, 140px); }
}
@media (max-width: 63.99rem) {
  .p-variety__item.--a,
  .p-variety__item.--b,
  .p-variety__item.--c { grid-template-columns: minmax(0, 1fr); }
  /* SPは常に「写真 → テキスト」の順で読ませる */
  .p-variety__item.--a .p-variety__item-figure { order: -1; }
  .p-variety__pillar-text { font-size: clamp(30px, 7vw, 46px); }
  .p-variety__inner { padding-left: clamp(44px, 12vw, 74px); }
}

/* =========================================================
   ABOUT: ホクセイグループとは（参考 ホクセイグループとは参考.png）
   7項目→指定の4項目へ。うち2項目は数字ではなく文言。
   ========================================================= */
/* 文言型（働き方・裁量）は数字の字送りだと間延びするので別扱い */
.p-about__history-item.--phrase .p-about__history-num {
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: clamp(20px, 2.05vw, 31px) !important;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: normal !important;
  color: var(--hk-blue) !important;
}
/* 創業の但し書き */
.p-about__history-note {
  margin: 6px 0 0;
  font-size: clamp(11px, .86vw, 13px);
  line-height: 1.7;
  color: rgb(31 42 55 / .62);
}

/* 4項目になったのでレイアウトを組み直す。
   参考同様、絵と文が左右交互になるジグザグ。 */
@media (min-width: 64rem) {
  .p-about__history-item { display: block !important; overflow: hidden; }
  .--n01 .p-about__history-figure,
  .--n02 .p-about__history-figure,
  .--n03 .p-about__history-figure,
  .--n04 .p-about__history-figure {
    position: static !important;
    width: 96px !important;
    height: auto;
    margin: 0 20px 10px 0;
  }
  /* 奇数は絵が左、偶数は絵が右（参考のジグザグ） */
  .--n01 .p-about__history-figure,
  .--n03 .p-about__history-figure { float: left; }
  .--n02 .p-about__history-figure,
  .--n04 .p-about__history-figure { float: right; margin: 0 0 10px 20px; }
  .--n01 .p-about__history-inner,
  .--n02 .p-about__history-inner,
  .--n03 .p-about__history-inner,
  .--n04 .p-about__history-inner {
    margin-left: 0 !important;
    width: auto !important;
    padding-right: 0 !important;
  }
  .--n06 .p-about__history-text { margin-left: 0; width: auto; margin-top: 0; }
  /* 4項目なので1項目あたりの間隔を広げ、sticky の走行距離を保つ */
  .p-about__history-item { margin-bottom: clamp(72px, 8.6vw, 150px); }
}
@media (max-width: 63.99rem) {
  .p-about__history-item.--phrase .p-about__history-num {
    font-size: clamp(18px, 4.6vw, 26px) !important;
  }
}

/* ── ABOUT 仕上げ: 縦柱の折れ / 4項目の偏り / 見出し幅 ── */
@media (min-width: 64rem) {
  /* 「ホクセイグループとは」は10字。sticky高さが足りず2列に折れて
     「とは」が飛び出していた。折らずに1列で通す。 */
  .p-about__heading .c-vtext {
    font-size: min(2.7vw, 42px) !important;
    white-space: nowrap;
    letter-spacing: .12em;
  }
  /* 7→4項目で列の下半分が空いた。均等配分して sticky の走行距離を作る */
  .p-about__history {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
  }
  .p-about__history-item { margin-bottom: 0 !important; margin-top: 0 !important; }

  /* 見出しが6行に折れて縦に伸びていた。左カラムを広げて3〜4行に収める */
  .p-about__body-top-text { max-width: 46cqi !important; }
  .p-about__content-title { font-size: max(14px, 2.05vi) !important; line-height: 1.55; }

  /* ロゴタイプの日本語行が下端でクリップされていた */
  .p-about__figures-img--01 { max-height: 30vh; }
  .p-about__figures-img--main { max-height: 42vh; }
}

/* =========================================================
   BUSINESS: 事業カードを縦長化（指示9）
   事業名 → 「やっていること」15字前後 / 英語併記 / 切り抜き写真 / 説明文を長く
   要素が4→5に増えたので subgrid の span も 5 に合わせる。
   ========================================================= */
.p-initiative__card-item {
  grid-row: span 5 !important;
  align-content: start;
}
.p-initiative__card-figure {
  margin: 0;
  display: grid;
  place-items: center;
  line-height: 0;
}
.p-initiative__card-figure img {
  width: auto;
  max-width: 78%;
  height: auto;
  object-fit: contain;
}
.p-initiative__card-en {
  margin: 0;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hk-blue);
  text-align: center;
}
.p-initiative__card-ttl {
  text-align: left !important;
  display: block !important;
}
.p-initiative__card-txt { text-align: left; }

@media (min-width: 48rem) {
  /* 「ちょっとダサい」= 横長で中身が薄かった。縦長にして文章を通す */
  .p-initiative__card-item {
    width: 21.4vw !important;
    padding: 1.9vw 1.7vw 3.6vw !important;
    border-radius: 22px !important;
  }
  .p-initiative__card-items { column-gap: 2.2vw !important; }
  .p-initiative__card-figure { height: 13.4vw; margin-bottom: .6vw; }
  .p-initiative__card-figure img { max-height: 13.4vw; }
  .p-initiative__card-en  { font-size: max(10px, .74vw); margin-bottom: .34vw; }
  .p-initiative__card-ttl {
    margin-top: 0 !important;
    font-size: max(15px, 1.26vw) !important;
    line-height: 1.5;
    letter-spacing: .01em;
  }
  .p-initiative__card-ttl::after {
    content: "";
    display: block;
    width: 34px;
    margin-top: .8vw;
    border-top: 2px solid var(--hk-gold);
  }
  .p-initiative__card-txt {
    margin-top: .9vw;
    padding-bottom: 0 !important;
    font-size: max(12px, .84vw) !important;
    line-height: 1.95 !important;
  }
  .p-initiative__card-icon { bottom: .9vw; right: .9vw; width: 2.2vw; height: 2.2vw; }
}

@media (max-width: 47.99rem) {
  .p-initiative__card-item { width: 74vw; padding: 5.6vw 5.6vw 13vw; }
  .p-initiative__card-figure { height: 34vw; margin-bottom: 2vw; }
  .p-initiative__card-figure img { max-height: 34vw; }
  .p-initiative__card-en  { font-size: 11px; margin-bottom: 1.4vw; }
  .p-initiative__card-ttl { margin-top: 0 !important; font-size: max(17px, 4.6vw) !important; }
  .p-initiative__card-txt { padding-bottom: 0 !important; font-size: max(13px, 3.4vw) !important; }
}

/* =========================================================
   ヒーロー 決定版：参考サイト(https://www.shinkin.co.jp/echishin/recruit/)の
   1440px時の実測値をそのまま移植する。
     ヒーロー  1440 x 763          → aspect-ratio 1440/763
     題字      45px / (279, 200)   → 巨大文字ではなく小さな2行ブロック
     マーキー  162px 白 / y=529    → ヒーロー"内部"を横切る。これが構図の骨格
     写真      10点 → 指定6点。本体は静止し、添えた装飾だけが揺れる
   ========================================================= */
.p-hero {
  position: relative;
  aspect-ratio: 1440 / 763 !important;
  height: auto !important;
  overflow: hidden;
  background: var(--hk-blue) !important;
}
.p-hero::before, .p-hero::after { display: none !important; }
.p-hero__body { position: relative; width: 100%; height: 100%; }

/* ── 題字 ── */
.p-hero__title {
  position: absolute !important;
  left: 19.4% !important;
  top: 26.2% !important;
  z-index: 5;
  margin: 0;
  max-width: none !important;
  white-space: nowrap !important;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-weight: 800;
  font-size: 3.125vw !important;   /* 45px @1440 */
  line-height: 1.6 !important;
  letter-spacing: .02em;
  color: #FFFFFF !important;
}
.p-hero__title span { display: block; }

/* ── 巨大マーキー（構図の骨格） ── */
.p-hero__loop {
  position: absolute;
  left: 0;
  top: 69.3%;              /* 529 / 763 */
  z-index: 2;
  display: flex;
  width: max-content;
  pointer-events: none;
  user-select: none;
}
.p-hero__loop-text {
  display: flex;
  flex: none;
  animation: heroLoop 24s linear infinite;
}
.p-hero__loop-text p {
  margin: 0;
  padding-right: .28em;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: 11.25vw;      /* 162px @1440 */
  line-height: 1.6;
  letter-spacing: .01em;
  color: #FFFFFF;
  white-space: nowrap;
}
@keyframes heroLoop { to { transform: translateX(-100%); } }

/* ── 写真6点。座標は参考の実測をそのまま％化 ── */
.p-hero__img {
  position: absolute;
  z-index: 4;
  margin: 0;
  line-height: 0;
}
.p-hero__img > img:not(.p-hero__deco) {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 22px rgb(6 44 96 / .22));
}
.p-hero__img.--i1 { left: 48.75%; top: 26.6%; width: 26.5%; z-index: 5; }  /* 主役 */
.p-hero__img.--i2 { left: 39.4%;  top: 14.5%; width: 11.3%; }
.p-hero__img.--i3 { left: 80.6%;  top: 21.2%; width: 13.1%; }
.p-hero__img.--i4 { left: 83.1%;  top: 56.6%; width: 16.3%; z-index: 3; }
.p-hero__img.--i5 { left: 2.2%;   top: 17.7%; width: 6.9%;  }
.p-hero__img.--i6 { left: 3.4%;   top: 62.3%; width: 9.7%;  z-index: 3; }

/* ── 添えの装飾。参考ではこれが動きの主役 ── */
/* 詳細度: 上の .p-hero__img img (0,1,1) に負けないよう2クラスで受ける。
   幅の比率は参考の実測（写真幅に対し 14〜42%）に合わせる。 */
.p-hero__img .p-hero__deco {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: none !important;
}
.p-hero__img .p-hero__deco.--d1 { width: 34%; top: -12%; left: 74%; opacity: .72; }  /* 参考 198/468 */
.p-hero__img .p-hero__deco.--d2 { width: 15%; top: -6%;  left: -9%;  }              /* 参考 23/162  */
.p-hero__img .p-hero__deco.--d3 { width: 15%; top: 8%;   left: 96%;  }
.p-hero__img .p-hero__deco.--d4 { width: 32%; top: -14%; left: -18%; }              /* 参考 61/189  */
.p-hero__img .p-hero__deco.--d5 { width: 26%; top: -8%;  left: 80%;  }
.p-hero__img .p-hero__deco.--d6 { width: 17%; top: 2%;   left: 92%;  }              /* 参考 22/140  */

/* 参考の keyframes をそのまま。写真ではなく装飾に当てる */
@keyframes stepUpDown {
  0%, 100% { transform: translate(0) translateY(0); }
  50%      { transform: translate(10%) translateY(-40%); }
}
@keyframes stepUpDownReverse {
  0%, 100% { transform: translate(0) translateY(0); }
  50%      { transform: translate(-10%) translateY(40%); }
}
@keyframes stepJump {
  0%   { transform: translateY(0); }
  10%  { transform: translateY(-30px) rotate(-3deg); }
  15%  { transform: translateY(0); }
  40%  { transform: translateY(-50px) rotate(-3deg); }
  45%  { transform: translateY(0); }
  95%  { transform: translateY(-30px) rotate(-3deg); }
  100% { transform: translateY(0); }
}
@keyframes stepRotate {
  0%   { transform: rotate(-10deg); }
  10%  { transform: rotate(-5deg); }
  50%  { transform: rotate(10deg); }
  70%  { transform: rotate(3deg); }
  100% { transform: rotate(-10deg); }
}
.js-jiggle    { animation: stepUpDown 3s steps(1) infinite !important; }
.js-jiggle-r  { animation: stepUpDownReverse 3s steps(1) infinite !important; }
.js-step-jump   { animation: stepJump 6s steps(1) infinite; }
.js-step-rotate { animation: stepRotate 7s steps(1) infinite; transform-origin: 50% 90%; }

/* 入場前に伏せる */
.is-hero-armed .p-hero__title,
.is-hero-armed .p-hero__loop,
.is-hero-armed .p-hero__img { opacity: 0; }

/* ── タブレット ── */
@media (max-width: 79.99rem) {
  .p-hero__title { font-size: 3.6vw !important; }
  .p-hero__loop-text p { font-size: 12.5vw; }
}
/* ── SP ── */
@media (max-width: 47.99rem) {
  .p-hero { aspect-ratio: 375 / 640 !important; }
  .p-hero__title {
    left: 6.4% !important;
    top: 17% !important;
    font-size: 7.4vw !important;
    line-height: 1.55 !important;
  }
  .p-hero__loop { top: 63%; }
  .p-hero__loop-text p { font-size: 26vw; }
  /* 6点だと潰れるので主役＋左右1点ずつに絞る */
  .p-hero__img.--i1 { left: 30%;  top: 36%; width: 48%; }
  .p-hero__img.--i4 { left: 66%;  top: 70%; width: 34%; }
  .p-hero__img.--i6 { left: -2%;  top: 66%; width: 24%; }
  .p-hero__img.--i2,
  .p-hero__img.--i3,
  .p-hero__img.--i5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-jiggle, .js-jiggle-r, .js-step-jump, .js-step-rotate,
  .js-hero-pop, .js-hero-float, .js-hero-rock, .js-hero-float-reverse,
  .js-deco-step, .js-deco-step-reverse, .js-deco-twinkle,
  .p-hero__loop-text { animation: none !important; }
}

/* =========================================================
   ABOUT 決定版：参考「ホクセイグループとは参考.png」の水準へ
     ・数字は大きく、下に黄色のマーカーを敷く
     ・各項目に写真（参考は建物・鞄・人物の実写）
     ・About 見出しは手描きの吹き出しで囲む
   ========================================================= */
/* 見出しを手描きの囲みに。参考は About が楕円の吹き出しに入っている */
.c-heading--lg.--bubble {
  position: relative;
  display: inline-block;
  padding: .28em .72em .34em;
}
.c-heading--lg.--bubble::before {
  content: "";
  position: absolute;
  inset: -16% -9%;
  border: 2.6px solid var(--hk-ink);
  border-radius: 50% 48% 52% 50% / 58% 54% 46% 42%;
  pointer-events: none;
}
/* 囲みの下に伸びる引き出し線 */
.c-heading--lg.--bubble::after {
  content: "";
  position: absolute;
  left: 16%;
  bottom: -30%;
  width: 14px;
  height: 16px;
  border-left: 2.4px solid var(--hk-ink);
  border-bottom: 2.4px solid var(--hk-ink);
  border-radius: 0 0 0 60%;
  transform: rotate(-16deg);
}
/* 既存の金色下線(.c-heading--lg::after)は上の ::after で置き換わる。
   誤って自分の ::before を殺していた指定を撤去した。 */

/* 数字の黄マーカー */
.p-about__history-num.--marker {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.p-about__history-num.--marker::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: .12em;
  height: .24em;
  background: var(--hk-gold);
  border-radius: 3px;
  z-index: -1;
}

/* 項目の写真。参考は 147〜173px 幅の実写 */
.p-about__history-figure {
  margin: 0;
  line-height: 0;
}
.p-about__history-figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgb(6 44 96 / .16));
}

@media (min-width: 64rem) {
  .--n01 .p-about__history-figure,
  .--n02 .p-about__history-figure,
  .--n03 .p-about__history-figure,
  .--n04 .p-about__history-figure { width: 148px !important; }
  /* 数字は参考同様に大きく */
  .p-about__history-num { font-size: clamp(72px, 7.4vw, 108px) !important; line-height: 1.05; }
  .p-about__history-num i {
    font-size: .3em;
    margin-left: .16em;
    font-style: normal;
    font-weight: 700;
  }
  .p-about__history-title {
    font-size: max(14px, 1.16vw);
    font-weight: 800;
    letter-spacing: .04em;
  }
}
@media (max-width: 63.99rem) {
  .p-about__history-figure { width: 34vw !important; }
}

/* About: 数字まわりに舞う装飾（参考は星とキラキラが散る） */
.p-about__history-item { position: relative; }
.p-about__history-deco {
  position: absolute;
  width: 26px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  animation: stepUpDown 3.4s steps(1) infinite;
}
.p-about__history-deco.--s-tr { top: -6px;  right: 8%; }
.p-about__history-deco.--s-bl { bottom: 12%; left: 4%;  animation-name: stepUpDownReverse; }
.p-about__history-deco.--s-tl { top: 2px;   left: 40%; }
.p-about__history-deco.--s-br { bottom: 8%;  right: 12%; animation-name: stepUpDownReverse; }
@media (prefers-reduced-motion: reduce) { .p-about__history-deco { animation: none !important; } }

/* SPヘッダー: マーク＋和文＋RECRUIT の3点だとENTRYに押されて和文が切れる。
   SPはマークとRECRUITだけに絞る。 */
@media (max-width: 47.99rem) {
  .l-header__logo-type { display: none; }
  .l-header__logo-mark { height: 24px; }
  .l-header__logo-text { font-size: 11px; letter-spacing: .12em; }
  .l-header__logo a { gap: 7px; }
}
/* 主役に添えた円が右上で浮いていたので、人物を囲む位置へ寄せる */
.p-hero__img .p-hero__deco.--d1 { width: 46%; top: 30%; left: 58%; opacity: .55; }
@media (max-width: 47.99rem) {
  .p-hero__img .p-hero__deco.--d1 { display: none; }
}

/* =========================================================
   下層ページ共通
     FV（藍ベタ＋ページ名＋巨大ループ＋切り抜き）
     → 本文 → 次の行き先 → フッター
   トップのヒーローと同じ語彙で組み、参考の下層と骨格を揃える。
   ========================================================= */
.p-sub-fv {
  position: relative;
  overflow: hidden;
  background: var(--hk-blue);
  color: #FFFFFF;
  padding-block: clamp(112px, 13vw, 196px) clamp(88px, 10vw, 150px);
}
.p-sub-fv__inner { position: relative; z-index: 3; }
.p-sub-fv__en {
  margin: 0 0 14px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .22em;
  color: rgb(255 255 255 / .82);
}
.p-sub-fv__title {
  margin: 0 0 20px;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 4.1vw, 60px);
  line-height: 1.36;
  letter-spacing: .01em;
  color: #FFFFFF;
}
.p-sub-fv__lead {
  margin: 0;
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.95;
  color: rgb(255 255 255 / .9);
}
.p-sub-fv__deco {
  position: absolute;
  top: -18px;
  left: calc(clamp(30px, 4.1vw, 60px) * 3.2);
  width: 30px;
  animation: stepUpDown 3.2s steps(1) infinite;
}
/* 巨大ループ。トップのヒーローと同じ役 */
.p-sub-fv__loop {
  position: absolute;
  left: 0;
  bottom: -.16em;
  z-index: 1;
  display: flex;
  width: max-content;
  pointer-events: none;
  user-select: none;
}
.p-sub-fv__loop-text { display: flex; flex: none; animation: heroLoop 26s linear infinite; }
.p-sub-fv__loop-text p {
  margin: 0;
  padding-right: .3em;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(64px, 10vw, 148px);
  line-height: 1;
  color: rgb(255 255 255 / .16);
  white-space: nowrap;
}
/* 右側に散らす切り抜き */
.p-sub-fv__figures { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.p-sub-fv__fig {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 10px 22px rgb(6 44 96 / .22));
}
.p-sub-fv__fig.--f1 { right: 5%;  bottom: -4%; width: 17%; }
.p-sub-fv__fig.--f2 { right: 21%; bottom: 12%; width: 13%; }
.p-sub-fv__fig.--f3 { right: 2%;  top: 16%;   width: 8%;  transform-origin: 50% 90%; }
@media (max-width: 63.99rem) {
  .p-sub-fv__fig.--f2, .p-sub-fv__fig.--f3 { display: none; }
  .p-sub-fv__fig.--f1 { width: 30%; right: 2%; bottom: -2%; }
  .p-sub-fv__lead { max-width: 62%; }
}

/* ── 次の行き先 ── */
.p-sub-next { background: var(--hk-cream); padding-block: clamp(48px, 5.4vw, 88px); }
.p-sub-next__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
}
.p-sub-next__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 16px;
  padding: clamp(20px, 2.2vw, 34px) clamp(20px, 2.4vw, 36px);
  background: #FFFFFF;
  border-radius: 20px;
  color: var(--hk-ink);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.p-sub-next__item:hover { transform: translateY(-4px); }
.p-sub-next__item-en {
  grid-column: 1;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: clamp(10px, .76vw, 12px);
  letter-spacing: .2em;
  color: var(--hk-blue);
}
.p-sub-next__item-ttl {
  grid-column: 1;
  font-weight: 800;
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.4;
}
.p-sub-next__item .c-box--arrow { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 47.99rem) {
  .p-sub-next__inner { grid-template-columns: minmax(0, 1fr); }
}

/* 下層は本文セクションを明るい地に */
.p-whats, .p-benefit, .p-faq, .p-req, .p-voice {
  position: relative;
  overflow: hidden;
  background: var(--hk-cream);
  color: var(--hk-ink);
  padding-block: clamp(64px, 7.4vw, 124px);
}
.p-episode, .p-career, .p-entry-cta {
  position: relative;
  overflow: hidden;
  background: var(--hk-blue);
  color: #FFFFFF;
  padding-block: clamp(64px, 7.4vw, 124px);
}
.p-episode .c-heading--lg, .p-career .c-heading--lg, .p-entry-cta .c-heading--lg { color: #FFFFFF; }
.p-whats__title, .p-episode__title {
  margin: 0 0 clamp(28px, 3.4vw, 56px);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.44;
}
.p-episode__title { color: #FFFFFF; }

/* ── naka: What's HOKUSEI の3本柱 ── */
.p-whats__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-whats__item {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2vw, 30px) 0;
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
}
.p-whats__item-no {
  margin: 0 0 8px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  color: var(--hk-gold);
}
.p-whats__item-ttl {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 23px);
  letter-spacing: .04em;
}
.p-whats__item-ttl::after {
  content: "";
  display: block;
  width: 32px;
  margin-top: 12px;
  border-top: 2px solid var(--hk-blue);
}
.p-whats__item-txt {
  margin: 0 0 20px;
  font-size: clamp(13px, .9vw, 15px);
  line-height: 1.95;
}
.p-whats__item-fig { margin: auto -0 0; line-height: 0; }
.p-whats__item-fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* ── naka: Episode ── */
.p-episode__list, .p-career__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-episode__item, .p-career__step {
  padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2vw, 30px);
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 22px;
}
.p-episode__item-ttl, .p-career__step-ttl {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(16px, 1.34vw, 21px);
  line-height: 1.5;
  color: #FFFFFF;
}
.p-episode__item-txt, .p-career__step-txt {
  margin: 0;
  font-size: clamp(13px, .9vw, 15px);
  line-height: 1.95;
  color: rgb(255 255 255 / .92);
}
.p-career__step-no {
  margin: 0 0 10px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: .18em;
  color: var(--hk-gold);
}
/* 縦流しの柱（Variety と同じ作り） */
.p-episode__pillar, .p-career__pillar {
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(12px, 2.6vw, 44px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.p-episode__pillar-track, .p-career__pillar-track {
  display: flex;
  flex-direction: column;
  height: max-content;
  animation: pillarLoop 32s linear infinite;
}
.p-episode__pillar-text, .p-career__pillar-text {
  display: block;
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: .96;
  letter-spacing: .04em;
  color: rgb(255 255 255 / .13);
}
.p-episode__inner, .p-career__inner { position: relative; z-index: 2; }
@media (min-width: 64rem) {
  .p-episode__inner, .p-career__inner { padding-left: clamp(70px, 7.4vw, 120px); }
}

/* ── benefit: 制度リスト ── */
.p-benefit__group { margin-bottom: clamp(40px, 4.6vw, 76px); }
.p-benefit__group-ttl {
  margin: 0 0 clamp(18px, 2vw, 30px);
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: .04em;
}
.p-benefit__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-benefit__item {
  padding: clamp(18px, 1.9vw, 28px) clamp(18px, 1.8vw, 26px);
  background: #FFFFFF;
  border-radius: 18px;
}
.p-benefit__item-ttl {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(15px, 1.16vw, 18px);
  color: var(--hk-blue);
}
.p-benefit__item-txt { margin: 0; font-size: clamp(12px, .86vw, 14px); line-height: 1.9; }
.p-benefit__note, .p-req__note {
  margin: clamp(20px, 2.4vw, 36px) 0 0;
  font-size: clamp(11px, .82vw, 13px);
  line-height: 1.8;
  color: rgb(31 42 55 / .62);
}

/* ── benefit: Staff Voice ── */
.p-voice__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin: 0; padding: 0; list-style: none;
}
.p-voice__item {
  display: grid;
  grid-template-columns: clamp(80px, 9vw, 128px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  padding: clamp(20px, 2.2vw, 32px);
  background: #FFFFFF;
  border-radius: 22px;
}
.p-voice__item-fig { margin: 0; line-height: 0; }
.p-voice__item-fig img { width: 100%; height: auto; }
.p-voice__item-txt { margin: 0; font-size: clamp(13px, .92vw, 15px); line-height: 1.95; }

/* ── faq: アコーディオン ── */
.p-faq__cat { margin-bottom: clamp(36px, 4.2vw, 68px); }
.p-faq__cat-ttl {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: .03em;
}
.p-faq__cat-no {
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: clamp(22px, 2vw, 32px);
  color: var(--hk-gold);
}
.p-faq__items { display: grid; gap: clamp(10px, 1.1vw, 16px); }
.p-faq__item {
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
}
.p-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 1.7vw, 26px) clamp(48px, 4.4vw, 66px) clamp(16px, 1.7vw, 26px) clamp(18px, 1.8vw, 28px);
  position: relative;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.6;
  list-style: none;
}
.p-faq__q::-webkit-details-marker { display: none; }
/* 開閉のしるし */
.p-faq__q::before,
.p-faq__q::after {
  content: "";
  position: absolute;
  right: clamp(20px, 2vw, 30px);
  top: 50%;
  width: 15px;
  height: 2.4px;
  background: var(--hk-blue);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.p-faq__q::after { transform: rotate(90deg); }
.p-faq__item[open] .p-faq__q::after { transform: rotate(0); }
.p-faq__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--hk-blue);
  color: #FFFFFF;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 13px;
}
.p-faq__mark.--a { background: var(--hk-gold); color: var(--hk-ink); }
.p-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 clamp(18px, 1.8vw, 28px) clamp(18px, 1.9vw, 28px);
}
.p-faq__a p { margin: 0; font-size: clamp(13px, .92vw, 15px); line-height: 1.95; }

/* ── youkou: 要項テーブル ── */
.p-req__block { margin-bottom: clamp(44px, 5vw, 82px); }
.p-req__block-ttl {
  margin: 0 0 clamp(18px, 2vw, 30px);
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, 26px);
}
.p-req__table {
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
}
.p-req__row {
  display: grid;
  grid-template-columns: clamp(120px, 13vw, 200px) minmax(0, 1fr);
}
.p-req__row + .p-req__row { border-top: 1px solid rgb(27 111 208 / .14); }
.p-req__key {
  margin: 0;
  padding: clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 24px);
  background: rgb(27 111 208 / .06);
  font-weight: 800;
  font-size: clamp(13px, .92vw, 15px);
  color: var(--hk-blue);
}
.p-req__val {
  margin: 0;
  padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 28px);
  font-size: clamp(13px, .92vw, 15px);
  line-height: 1.9;
}

/* ── youkou: エントリー ── */
.p-entry-cta__title {
  margin: 0 0 18px;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.44;
  color: #FFFFFF;
}
.p-entry-cta__lead { margin: 0 0 clamp(26px, 3vw, 44px); font-size: clamp(13px, .96vw, 16px); line-height: 1.95; }
.p-entry-cta__contact {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0;
  padding: clamp(22px, 2.4vw, 34px);
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 20px;
}
.p-entry-cta__contact dt {
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--hk-gold);
}
.p-entry-cta__contact dd { margin: 0; font-size: clamp(13px, .92vw, 15px); line-height: 1.9; }

/* ── 下層のSP対応 ── */
@media (max-width: 63.99rem) {
  .p-whats__list, .p-episode__list, .p-career__steps, .p-benefit__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-voice__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .p-whats__list, .p-episode__list, .p-career__steps, .p-benefit__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-req__row { grid-template-columns: minmax(0, 1fr); }
  .p-req__key { padding-bottom: 8px; }
  .p-req__val { padding-top: 8px; }
  .p-faq__q { font-size: 14px; }
}

/* ── 検査で出た詰め: 極小文字とタップ領域 ── */
/* 10〜11px は小さすぎたので 12px 下限に引き上げる */
.p-sub-next__item-en { font-size: max(12px, .76vw) !important; }
.p-benefit__note, .p-req__note { font-size: max(12px, .82vw) !important; }
.l-header__logo-text { font-size: max(12px, .8vw); }
/* フッターのナビは行の高さが18pxしかなく指で押しにくい */
.l-footer-body__nav-main a {
  display: inline-block;
  padding-block: 7px;
}
.p-career__step-no { font-size: max(12px, .82vw) !important; }
.p-information__list-item-category { font-size: max(12px, .84vw) !important; }
.l-footer-body__nav-main a { padding-block: 9px; }
.l-header__nav-entry a { min-height: 40px; display: grid; place-items: center; }
.p-about__history-note { font-size: max(12px, .86vw) !important; }
.p-initiative__card-en { font-size: max(12px, .74vw) !important; }
.c-scroll-hint-inner-text { font-size: max(12px, 2.8vw) !important; }
/* VIEW MORE 系は指で押す前提の高さを確保する */
.c-button-primary,
.p-variety__item-more { min-height: 40px; align-items: center; }

/* =========================================================
   ABOUT 仕上げ：参考「ホクセイグループとは参考.png」に寄せる
     ・縦柱に英字と縦点線とSCROLL
     ・ロゴに放射線と小物を添える
     ・建物写真は傾いた白フレーム
     ・地に点描
   ========================================================= */
/* 地の点描（参考は淡いドットが敷いてある） */
.p-about {
  position: relative;
  background-image: radial-gradient(rgb(27 111 208 / .10) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* ── 縦柱 ── */
.p-about__heading-en {
  writing-mode: vertical-rl;
  margin: 14px 0 0;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: clamp(10px, .74vw, 12px);
  letter-spacing: .24em;
  color: rgb(31 42 55 / .5);
}
.p-about__scroll {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 22px;
}
/* 縦の点線。参考は朱のドットが縦に連なる */
.p-about__scroll-dots {
  width: 2px;
  height: clamp(70px, 8vw, 128px);
  background-image: linear-gradient(var(--hk-blue) 45%, transparent 45%);
  background-size: 2px 10px;
  border-radius: 2px;
}
.p-about__scroll-word {
  writing-mode: horizontal-tb;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--hk-blue);
}
.p-about__scroll-arrow {
  width: 10px; height: 10px;
  border-right: 2px solid var(--hk-blue);
  border-bottom: 2px solid var(--hk-blue);
  transform: rotate(45deg);
  animation: scrollNudge 1.8s steps(1) infinite;
}
@keyframes scrollNudge { 0%,100%{translate:0 0} 50%{translate:0 6px} }

/* ── ロゴまわり ── */
.p-about__figures-logo { position: relative; display: block; }
.p-about__figures-burst {
  position: absolute;
  top: -20%;
  left: 26%;               /* ロゴの視覚的中心は HOKUSEI の上 */
  translate: -50% 0;
  width: 30%;
  pointer-events: none;
}
.p-about__figures-obj {
  position: absolute;
  width: 15%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgb(6 44 96 / .18));
}
.p-about__figures-obj.--o1 { left: -13%; bottom: -14%; rotate: -12deg; }
.p-about__figures-obj.--o2 { right: -12%; top: -14%;  rotate: 10deg; width: 20%; }

/* ── 建物写真は傾いた白フレーム（参考と同じ扱い） ── */
.p-about__figures-frame {
  position: relative;
  margin: 0;
  padding: 12px 12px 34px;
  background: #FFFFFF;
  border-radius: 4px;
  rotate: -2.2deg;
  box-shadow: 0 14px 34px rgb(6 44 96 / .14);
}
.p-about__figures-frame .p-about__figures-img--main {
  display: block;
  width: 100%;
  border-radius: 0 !important;
  max-height: 40vh;
  object-fit: cover;
}

/* ── 数字まわりを参考の組みに ── */
@media (min-width: 64rem) {
  /* 黄マーカーは数字の下 1/3 にだけ掛ける（参考と同じ） */
  .p-about__history-num.--marker::after { bottom: .1em; height: .2em; }
  /* 項目タイトルは数字の上に小さく */
  .p-about__history-title {
    margin-bottom: 2px;
    font-size: max(13px, 1.04vw);
    color: var(--hk-ink);
  }
  /* 項目の左に縦点線を走らせる（参考の朱の点線） */
  .p-about__history-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 6px;
    bottom: -8%;
    width: 2px;
    background-image: linear-gradient(var(--hk-blue) 45%, transparent 45%);
    background-size: 2px 9px;
    opacity: .5;
  }
  .p-about__history-item:last-child::before { display: none; }
  .p-about__history { padding-left: 22px; }
}

/* =========================================================
   Discover（旧 Variety）: 参考「HOKUSEIセクション参考.png」の水準へ
     左端 = 縦の白抜き HOKUSEI ＋ 切り抜きを縦に連ねる
     右   = #番号 / 見出し / 点線 / 説明 / VIEW MORE をジグザグ
   ========================================================= */
.p-variety__pillar {
  position: absolute;
  top: clamp(40px, 4.4vw, 78px);
  bottom: clamp(40px, 4.4vw, 78px);
  left: clamp(10px, 1.8vw, 30px);
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  gap: clamp(6px, .8vw, 14px);
  overflow: visible;
  pointer-events: none;
}
.p-variety__pillar-text {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: .92;
  letter-spacing: .02em;
  color: #FFFFFF;
  order: 2;                       /* 参考は切り抜きが外(左)、文字が内(右) */
}
/* 参考の左端に縦に連なる切り抜きと星 */
.p-variety__pillar-objs {
  order: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(10px, 1.6vw, 26px);
  width: clamp(52px, 5.4vw, 88px);
}
.p-variety__pillar-obj {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgb(6 44 96 / .26));
}
.p-variety__pillar-obj.--star { width: 46%; filter: none; }
/* 参考は縦文字と本文の間に点線の仕切りがある */
.p-variety__pillar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(-1 * clamp(14px, 1.6vw, 26px));
  width: 2px;
  background-image: linear-gradient(rgb(255 255 255 / .55) 45%, transparent 45%);
  background-size: 2px 10px;
}

/* 見出しは参考同様、手書き風の斜体スクリプト＋横罫 */
.c-heading--lg.--script {
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
}
.p-variety__heading { display: block; width: 100%; }
.p-variety__heading .c-heading--lg { position: relative; padding-right: 0; }
/* 見出しの右へ伸びる横罫（参考の Initiative と同じ） */
.p-variety__heading::after {
  content: "";
  display: block;
  margin-top: -.62em;
  margin-left: 9.4em;
  border-top: 1.6px solid rgb(255 255 255 / .55);
}
.p-variety__title {
  margin: clamp(14px, 1.8vw, 28px) 0 clamp(24px, 3vw, 48px);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.4;
  color: #FFFFFF;
}

/* 項目 */
.p-variety__item-text { position: relative; }
.p-variety__item-num {
  font-size: clamp(26px, 2.6vw, 40px) !important;
  color: #FFFFFF !important;
}
.p-variety__item-title {
  margin: 0 0 18px;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-weight: 800;
  font-size: clamp(22px, 2.3vw, 35px);
  line-height: 1.34;
  color: #FFFFFF;
}
.p-variety__item-title::after {
  content: "";
  display: block;
  margin-top: 16px;
  border-top: 2px dotted rgb(255 255 255 / .55);
}
/* 参考は写真の角丸が大きく、影で浮かせている */
.p-variety__item-figure img { border-radius: 24px; box-shadow: 0 18px 40px rgb(4 30 66 / .28); }
.p-variety__item-deco {
  position: absolute;
  top: -14px;
  right: 6%;
  width: 30px;
  animation: stepUpDown 3.4s steps(1) infinite;
}
.p-variety__item-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  color: #FFFFFF;
}
.p-variety__item-more .c-box--arrow { background: #FFFFFF; color: var(--hk-blue); }

@media (min-width: 64rem) {
  /* 縦柱の幅ぶん本体を右へ逃がす */
  .p-variety__inner { padding-left: clamp(150px, 14vw, 230px) !important; }
}
@media (max-width: 63.99rem) {
  .p-variety__pillar { grid-template-columns: auto; }
  .p-variety__pillar-objs { display: none; }
  .p-variety__pillar::after { display: none; }
  .p-variety__inner { padding-left: clamp(52px, 13vw, 84px) !important; }
  .p-variety__heading::after { margin-left: 7.4em; }
}
@media (prefers-reduced-motion: reduce) {
  .p-variety__item-deco, .p-about__scroll-arrow { animation: none !important; }
}

/* ── Discover: 縦柱をもっと太く大きく。本文との間合いを取る ── */
.p-variety__pillar-text { font-size: clamp(52px, 6.4vw, 100px) !important; }
.p-variety__pillar-objs { width: clamp(60px, 6.2vw, 100px) !important; }
@media (min-width: 64rem) {
  .p-variety__inner { padding-left: clamp(200px, 18vw, 300px) !important; }
}
/* 見出しの横罫を右端まで伸ばす */
.p-variety__heading::after { margin-left: 8.6em; }

/* =========================================================
   MESSAGE: 装飾を入れて締める
   ========================================================= */
.p-message__header { position: relative; }
.p-message__lead {
  margin: 18px 0 0;
  font-size: clamp(13px, .96vw, 16px);
  line-height: 1.95;
  color: var(--hk-ink);
}
.p-message__burst {
  position: absolute;
  top: -34px;
  left: 8.6em;
  width: clamp(70px, 7vw, 110px);
  pointer-events: none;
}
/* 引用符。参考の手描き感に寄せる */
.p-message__quote {
  display: inline-block;
  margin-right: .1em;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -.16em;
  color: var(--hk-gold);
}
.p-message__item-img { position: relative; }
.p-message__item-deco {
  position: absolute;
  top: -22px;
  right: -20px;
  width: 40px !important;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  rotate: none !important;
  animation: stepUpDown 3.6s steps(1) infinite;
}
/* 写真は傾いた白フレームで、Aboutと語彙を揃える */
.p-message__item-img > img:not(.p-message__item-deco) {
  border-radius: 4px !important;
  border: 10px solid #FFFFFF;
  box-shadow: 0 14px 32px rgb(6 44 96 / .16);
  rotate: -1.6deg;
}
@media (prefers-reduced-motion: reduce) { .p-message__item-deco { animation: none !important; } }

/* =========================================================
   フッター: 色をつけて見やすく（指示）
   白地に薄墨だと沈むので、藍地の面と白のカードで階層をつける
   ========================================================= */
.l-footer { background: var(--hk-blue) !important; color: #FFFFFF; }
.l-footer-body__nav-logo { color: #FFFFFF; }
.l-footer-body__nav-logo img { filter: brightness(0) invert(1); }
.l-footer-body__nav-logo span { color: var(--hk-gold); font-weight: 700; letter-spacing: .16em; }
.l-footer-body__nav-main a,
.l-footer-body__nav-main .u-line__text { color: #FFFFFF !important; }
.l-footer-body__nav-main > li > ul a,
.l-footer-body__nav-main > li > ul .u-line__text { color: rgb(255 255 255 / .74) !important; }
.l-footer-body__nav-main > li { border-top: 1px solid rgb(255 255 255 / .22); }
.l-footer-body__nav-main > li:first-child { border-top: 0; }
/* ENTRY は面の中でさらに目立たせる。藍の上なので白抜きの箱にする */
.l-footer-body__cta-entry {
  background: #FFFFFF !important;
  color: var(--hk-ink) !important;
  border-radius: 24px;
}
.l-footer-body__cta-entry-heading--en { color: var(--hk-blue) !important; }
.l-footer-body__cta-entry-heading span,
.l-footer-body__cta-entry-copy { color: var(--hk-ink) !important; }
.l-footer-body__cta-entry .c-box--arrow { background: var(--hk-blue) !important; }
.l-footer-body__cta-entry .c-box--arrow svg { fill: #FFFFFF !important; }
.l-footer-body__cta-default {
  background: rgb(255 255 255 / .12) !important;
  border: 1px solid rgb(255 255 255 / .34);
  color: #FFFFFF !important;
  border-radius: 16px;
}
.l-footer-body__cta-default .c-box--arrow { background: #FFFFFF !important; }
.l-footer-body__cta-default .c-box--arrow svg { fill: var(--hk-blue) !important; }
.l-footer__btn-top .c-box { background: #FFFFFF !important; }
.l-footer__btn-top svg { fill: var(--hk-blue) !important; }
/* 住所・著作表記 */
.l-footer address, .l-footer small, .l-footer p { color: rgb(255 255 255 / .78); }
.l-footer-loop__text { opacity: .12; }

/* ── ヒーロー: 余白が寂しかったので4点足して参考と同じ10点に ──
   参考の空いていた座標（img-04/06/07/10 の位置）を埋める。 */
.p-hero__img.--i7  { left: 63.1%; top: 12.5%; width: 10%;  z-index: 4; }  /* 参考 img-04 */
.p-hero__img.--i8  { left: 22.5%; top: 48%;   width: 16.3%; z-index: 3; } /* 参考 img-06 */
.p-hero__img.--i9  { left: 25%;   top: 70%;   width: 18.1%; z-index: 5; } /* 参考 img-07 */
.p-hero__img.--i10 { left: -1.5%; top: 46%;   width: 8%;   z-index: 2; }  /* 参考 img-10 */
.p-hero__img.--i9 img.js-step-jump { transform-origin: 50% 90%; }
.p-hero__img .p-hero__deco.--d7 { width: 24%; top: -12%; left: 84%; }
.p-hero__img .p-hero__deco.--d8 { width: 16%; top: 4%;   left: -12%; }
.p-hero__img .p-hero__deco.--d9 { width: 34%; top: -16%; left: 66%; }

@media (max-width: 79.99rem) {
  .p-hero__img.--i7 { width: 8.4%; }
  .p-hero__img.--i9 { width: 15%; top: 66%; }
}
@media (max-width: 47.99rem) {
  /* SPは主役3点＋1点に絞る */
  .p-hero__img.--i9 { left: 44%; top: auto; bottom: 2%; width: 30%; }
  .p-hero__img.--i7,
  .p-hero__img.--i8,
  .p-hero__img.--i10 { display: none; }
}

/* =========================================================
   社員一覧（参考: yamacs.co.jp/recruit/teammember/）
     色ベタの吹き出し型カードに、切り抜きの人物を載せる。
     参考は 320x542 の縦長を3列。ホクセイは4人なので2列×2段〜4列。
   ========================================================= */
.p-member { position: relative; overflow: hidden; background: var(--hk-cream); padding-block: clamp(64px, 7.4vw, 124px); }
.p-member__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 42px) clamp(16px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-member__card { display: block; color: var(--hk-ink); }

/* 吹き出し型。参考はSVGマスクだが、角丸＋尻尾で同じ形をCSSで作る */
.p-member__bubble {
  position: relative;
  display: block;
  aspect-ratio: 320 / 542;
  border-radius: 999px 999px 999px 28px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.p-member__bubble.--blue { background: var(--hk-blue); }
.p-member__bubble.--sky  { background: #4E9BE8; }
.p-member__bubble.--gold { background: var(--hk-gold); }
.p-member__card:hover .p-member__bubble { transform: translateY(-6px); }

/* 人物は下端に接地させる（参考と同じ立ち姿） */
.p-member__photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  /* 幅基準だと縦長の切り抜きが上にはみ出して顔が切れる。高さ基準で収める */
  height: 90%;
  width: auto;
  max-width: 118%;
  object-fit: contain;
  object-position: bottom;
}
/* 通し番号 */
.p-member__no {
  position: absolute;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1;
  color: rgb(255 255 255 / .72);
}
.p-member__bubble.--gold .p-member__no { color: rgb(31 42 55 / .5); }

.p-member__text { display: block; margin-top: 16px; }
.p-member__personal {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(12px, .82vw, 13px);
  letter-spacing: .02em;
  color: rgb(31 42 55 / .68);
}
.p-member__copy {
  display: block;
  margin-bottom: 12px;
  font-weight: 800;
  font-size: clamp(15px, 1.16vw, 19px);
  line-height: 1.55;
  color: var(--hk-ink);
}
.p-member__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--hk-blue);
}
@media (max-width: 63.99rem) {
  .p-member__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 29.99rem) {
  .p-member__list { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   福利厚生ページ: 白い箱の羅列だったので密度と階層をつける
   ========================================================= */
.p-benefit__group { margin-bottom: clamp(44px, 5vw, 82px); }
.p-benefit__group-head { position: relative; margin-bottom: clamp(20px, 2.4vw, 36px); }
.p-benefit__group-en {
  margin: 0 0 6px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 20px);
  letter-spacing: .02em;
  color: var(--hk-blue);
}
.p-benefit__group-ttl {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 30px);
  letter-spacing: .04em;
}
/* 見出しの右へ伸びる罫（Discoverと同じ語彙） */
.p-benefit__group-ttl::after {
  content: "";
  display: inline-block;
  width: min(46%, 420px);
  margin-left: 20px;
  vertical-align: .28em;
  border-top: 1.6px solid rgb(27 111 208 / .3);
}
.p-benefit__group-lead {
  margin: 0;
  font-size: clamp(13px, .92vw, 15px);
  line-height: 1.9;
  color: rgb(31 42 55 / .74);
}
.p-benefit__group-deco {
  position: absolute;
  top: -20px;
  left: 7.2em;
  width: 28px;
  animation: stepUpDown 3.4s steps(1) infinite;
}

/* カードにアイコンと通し番号を入れる */
.p-benefit__item {
  position: relative;
  padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2vw, 30px) !important;
  border-radius: 22px !important;
  border-top: 4px solid var(--hk-blue);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.p-benefit__item:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgb(6 44 96 / .12); }
.p-benefit__item-icon {
  display: block;
  width: clamp(34px, 3vw, 46px);
  height: auto;
  margin-bottom: 14px;
}
.p-benefit__item-no {
  position: absolute;
  top: clamp(16px, 1.6vw, 24px);
  right: clamp(18px, 1.8vw, 26px);
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1;
  color: rgb(27 111 208 / .16);
}
.p-benefit__item-ttl { font-size: clamp(16px, 1.22vw, 19px) !important; }

/* 途中に挟む写真の帯 */
.p-benefit__band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  margin-block: clamp(36px, 4.4vw, 70px);
}
.p-benefit__band img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}
.p-benefit__band img:nth-child(2) { rotate: 1.4deg; }
.p-benefit__band img:nth-child(3) { rotate: -1.2deg; }
@media (max-width: 47.99rem) {
  .p-benefit__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-benefit__band img:nth-child(3) { display: none; }
  .p-benefit__group-ttl::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .p-benefit__group-deco { animation: none !important; } }

/* =========================================================
   募集要項ページ: 素の表だったので組みを整える
   ========================================================= */
.p-req__block { position: relative; }
.p-req__block-ttl {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(20px, 1.9vw, 30px) !important;
  letter-spacing: .04em;
}
.p-req__block-ttl::after {
  content: "";
  flex: 1;
  border-top: 1.6px solid rgb(27 111 208 / .3);
}
.p-req__table {
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgb(6 44 96 / .07);
  border: 1px solid rgb(27 111 208 / .12);
}
.p-req__row + .p-req__row { border-top: 1px solid rgb(27 111 208 / .12) !important; }
.p-req__key {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgb(27 111 208 / .05) !important;
  font-size: clamp(13px, .94vw, 15px) !important;
  letter-spacing: .06em;
  line-height: 1.7;
}
/* 項目名の頭に小さな印を置いて、表の行を追いやすくする */
.p-req__key::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--hk-gold);
}
.p-req__val {
  font-size: clamp(13px, .94vw, 15px) !important;
  line-height: 2 !important;
  letter-spacing: .02em;
}
/* 未確定の項目は文字色を落として「これから埋まる」ことを示す */
.p-req__val:has(> br) { line-height: 1.95 !important; }

/* エントリー節は装飾で締める */
.p-entry-cta { position: relative; }
.p-entry-cta__contact { border-radius: 24px; }
.p-entry-cta__contact dd { letter-spacing: .02em; }
@media (max-width: 47.99rem) {
  .p-req__key { padding-bottom: 6px !important; }
  .p-req__key::before { margin-top: .58em; }
}
.p-entry-cta__inner { position: relative; }
.p-entry-cta__burst {
  position: absolute;
  top: -18px;
  left: 7.4em;
  width: clamp(64px, 6.4vw, 100px);
  pointer-events: none;
}
.p-about__heading-en { font-size: max(12px, .78vw) !important; }
.p-about__scroll-word { font-size: 12px; }

/* =========================================================
   ヒーロー：支給デザインの再現
   1280px幅のカンプから座標を起こし、％に直して移植する。
   マーキーは写真の上、題字は中央、装飾はライムイエロー。
   ========================================================= */
.p-hero {
  aspect-ratio: 1280 / 700 !important;
  background: #2B6CD4 !important;
}
:root { --hk-lime: #CDE84F; }

/* ── 題字：中央、支給デザインは2行で「グローバルに働く！」が主役 ── */
.p-hero__title {
  left: 50% !important;
  top: 46% !important;
  translate: -50% 0;
  z-index: 8 !important;
  text-align: center;
  font-size: 4.45vw !important;   /* 57px @1280 */
  line-height: 1.42 !important;
  letter-spacing: .06em !important;
  text-shadow: 0 2px 10px rgb(11 52 116 / .18);
}
.p-hero__title span:first-child { font-size: .92em; }

/* ── マーキーは写真の上を横切り、旧位置より少し下へ ── */
.p-hero__loop { top: 76.5% !important; z-index: 7 !important; pointer-events: none; }
.p-hero__loop-text p { font-size: 8vw; }   /* 顔を避けつつ写真の前を横切る */

/* ── 切り抜き11点。カンプの座標をそのまま％化 ── */
.p-hero__img { z-index: 4; }
.p-hero__img > img { position: relative; z-index: 1; width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 18px rgb(6 40 92 / .24)); }
.p-hero__img.--h1  { left: 1.2%;  top: 14%;  width: 14.5%; }   /* ジャンプ */
.p-hero__img.--h2  { left: 18.4%; top: 20%;  width: 8.3%; transform-origin: 50% 92%; }
.p-hero__img.--h3  { left: 29%;   top: 13%;  width: 10.2%; }
.p-hero__img.--h4  { left: 49.5%; top: 20%;  width: 5.8%; z-index: 3; }
.p-hero__img.--h5  { left: 61.5%; top: 15%;  width: 21%; z-index: 5; transform-origin: 50% 90%; }
.p-hero__img.--h6  { left: 88.5%; top: 26%;  width: 9.4%; z-index: 3; }
.p-hero__img.--h7  { left: 1.1%;  top: 46%;  width: 10.8%; z-index: 3; }
.p-hero__img.--h8  { left: 2.2%;  top: 66%;  width: 25.4%; }
.p-hero__img.--h10 { left: 40%;   top: 69%;  width: 16.6%; }
.p-hero__img.--h11 { left: 69%;   top: 60%;  width: 28.6%; }

/* ── ライムの手描き装飾 ──
   参考サイトと同様、画面全体ではなく各写真を基準に相対配置する。 */
.p-hero__deco {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  animation: none;
}
.p-hero__deco img { display: block; width: 100%; height: auto; }
.p-hero__img.--h1  .p-hero__deco.--k1 { width: 40%; top: 1%; right: -18%; }
.p-hero__img.--h5  .p-hero__deco.--k2 { width: 15%; top: 4%; left: -5%; }
.p-hero__img.--h5  .p-hero__deco.--k3 { width: 15%; top: 14%; right: -5%; }
.p-hero__img.--h5  .p-hero__deco.--k3 img { transform: scaleX(-1); }
.p-hero__img.--h5  .p-hero__deco.--k4 { width: 37%; top: 48%; left: -27%; }
.p-hero__img.--h8  .p-hero__deco.--k5 { width: 15%; top: 7%; left: -2%; }
.p-hero__img.--h8  .p-hero__deco.--k6 { width: 15%; top: 30%; right: -2%; }
.p-hero__img.--h8  .p-hero__deco.--k6 img { transform: scaleX(-1); }
.p-hero__img.--h10 .p-hero__deco.--k7 { width: 45%; top: -10%; left: -28%; }
.p-hero__img.--h11 .p-hero__deco.--k8 { width: 14%; top: -18%; right: -2%; }

/* 初回後に動かすのは指定素材だけ。周期と開始をずらして騒がしさを抑える。 */
@keyframes heroPop {
  0%, 100% { transform: translate(0) rotate(0); }
  45% { transform: translate(-2px, -8px) rotate(-1deg); }
  70% { transform: translate(2px, -3px) rotate(1deg); }
}
@keyframes heroFloat {
  0%, 100% { transform: translate(0) rotate(0); }
  50% { transform: translate(3px, -6px) rotate(.8deg); }
}
@keyframes heroFloatReverse {
  0%, 100% { transform: translate(0) rotate(0); }
  50% { transform: translate(-3px, 5px) rotate(-.8deg); }
}
@keyframes heroRock {
  0%, 100% { transform: rotate(-1.5deg); }
  45% { transform: rotate(1.5deg); }
  70% { transform: rotate(0); }
}
@keyframes heroTwinkle {
  0%, 100% { transform: scale(.82) rotate(-3deg); }
  50% { transform: scale(1) rotate(2deg); }
}
.p-hero .js-step-jump { animation: stepJump 9s step-end 3s infinite !important; }
.p-hero .js-hero-pop { animation: heroPop 7s step-end 3.4s infinite; }
.p-hero .js-hero-float { animation: heroFloat 6.5s step-end 2.8s infinite; }
.p-hero .js-hero-rock { animation: heroRock 8s step-end 4s infinite; transform-origin: 50% 90%; }
.p-hero .js-hero-float-reverse { animation: heroFloatReverse 7s step-end 3.6s infinite; }
.p-hero .js-deco-step { animation: stepUpDown 3.8s step-end 2.6s infinite; }
.p-hero .js-deco-step-reverse { animation: stepUpDownReverse 4.2s step-end 3.1s infinite; }
.p-hero .js-deco-twinkle { animation: heroTwinkle 4.8s step-end 3.5s infinite; }
.is-hero-armed .p-hero__deco { opacity: 0; }

/* ── SP ── */
@media (max-width: 47.99rem) {
  .p-hero { aspect-ratio: 375 / 620 !important; }
  .p-hero__title { top: 40% !important; font-size: 8vw !important; }
  .p-hero__loop { top: 76% !important; }
  .p-hero__loop-text p { font-size: 22vw; }
  /* 11点は潰れるので6点に絞る */
  .p-hero__img.--h1  { left: -2%;  top: 12%; width: 32%; }
  .p-hero__img.--h5  { left: 52%;  top: 12%; width: 46%; }
  .p-hero__img.--h8  { left: -2%;  top: 69%; width: 39%; }
  .p-hero__img.--h10 { left: 33%;  top: 68%; width: 34%; }
  .p-hero__img.--h11 { left: 66%;  top: 66%; width: 36%; }
  .p-hero__img.--h2, .p-hero__img.--h3, .p-hero__img.--h4,
  .p-hero__img.--h6, .p-hero__img.--h7 { display: none; }
  /* SPも写真基準の相対配置を維持し、密度だけ落とす */
  .p-hero__img.--h5 .p-hero__deco.--k4,
  .p-hero__img.--h8 .p-hero__deco.--k6,
  .p-hero__img.--h11 .p-hero__deco.--k8 { display: none; }
}

/* =========================================================
   お知らせ：支給デザインの再現
   地は藍のまま、縦書き「お知らせ」は白＋星＋縦点線、
   見出し Information は手書き風、右上下にライムのキラキラ。
   ========================================================= */
.p-information {
  position: relative;
  overflow: hidden;
  background: #2B6CD4 !important;
  color: #FFFFFF !important;
}
.p-information .c-heading--lg,
.p-information .c-heading--sm,
.p-information__list-text,
.p-information__list-item-date,
.p-information__list-item-link { color: #FFFFFF !important; }

/* 見出しは手書き風の筆記体（支給デザインの Information） */
.c-heading--lg.--hand {
  font-family: "Caveat", var(--ff-en, "Instrument Sans"), cursive;
  font-weight: 700;
  font-size: clamp(38px, 3.9vw, 58px);
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1;
}
.c-heading--lg.--hand::after { display: none; }   /* 既存の金の下線は使わない */
.p-information__heading-group {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
.c-heading--sm.--stack {
  margin: 0 0 .5em;
  font-size: clamp(11px, .82vw, 13px) !important;
  line-height: 1.5;
  letter-spacing: .14em;
  color: rgb(255 255 255 / .84) !important;
}
/* 見出しの下に引く白い罫（支給デザインはリストの上に1本通る） */
.p-information__body-left .p-information__list { border-top: 1px solid rgb(255 255 255 / .38); }

/* 縦書き「お知らせ」：白文字を白い星と縦点線で挟む */
@media (min-width: 48rem) {
  .p-information__heading {
    display: grid !important;
    justify-items: center;
    align-content: start;
    gap: 14px;
    top: 6.4vw !important;
    left: 5vw !important;
    width: auto !important;
    height: auto !important;
  }
  .p-information__heading .c-vtext {
    color: #FFFFFF !important;
    font-size: min(2.9vw, 44px) !important;
    font-weight: 800;
    letter-spacing: .14em;
    white-space: nowrap;
  }
  .p-information__heading-star { width: clamp(16px, 1.5vw, 22px); height: auto; }
  .p-information__heading-dots {
    width: 2px;
    height: clamp(40px, 4.4vw, 72px);
    background-image: linear-gradient(#FFFFFF 45%, transparent 45%);
    background-size: 2px 9px;
  }
  .p-information__heading-deco {
    position: absolute;
    top: -6px;
    left: -34px;
    width: clamp(24px, 2.2vw, 34px);
    animation: stepUpDown 3.4s steps(1) infinite;
  }
  /* 既存のレールは支給デザインに無いので消す */
  .p-information__heading .c-rail { display: none !important; }
}

/* リストの罫と文字（藍地に白） */
.p-information__list-item { border-bottom: 1px solid rgb(255 255 255 / .28); }
.p-information__list-item-link { border: 0 !important; }
.p-information__list-text { font-weight: 700; }
.p-information__list-item-date { font-weight: 700; letter-spacing: .04em; }
/* カテゴリは白抜きのピル */
.p-information__list-item-category {
  background: transparent !important;
  border: 1.4px solid rgb(255 255 255 / .9);
  color: #FFFFFF !important;
  border-radius: 999px;
  padding: .32em 1.1em;
  font-weight: 700;
}
/* VIEW MORE も白に */
.p-information .c-button-primary { color: #FFFFFF !important; }
.p-information .c-button-primary .c-box--arrow { background: #FFFFFF !important; }
.p-information .c-button-primary .c-box--arrow svg { fill: #2B6CD4 !important; }

/* 右上・右下のライムのキラキラ */
.p-information__spark { position: absolute; z-index: 2; width: clamp(26px, 2.6vw, 42px); pointer-events: none;
  animation: stepUpDown 3.6s steps(1) infinite; }
.p-information__spark.--s1 { top: 7%;  right: 4.5%; }
.p-information__spark.--s2 { bottom: 8%; right: 6%; animation-name: stepUpDownReverse; }

@media (max-width: 47.99rem) {
  .p-information__heading { display: none !important; }
  .p-information__heading-group { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-information__spark, .p-information__heading-deco, .p-hero__deco { animation: none !important; }
}
/* --stack は見出しの右に「並べる」ので、既定の absolute を解く */
.c-heading--sm.--stack {
  position: static !important;
  white-space: normal;
  opacity: 1;
}
/* 縦書きは支給デザインどおりリストの左に寄せ、星を大きめに */
@media (min-width: 48rem) {
  .p-information__heading { top: 5.2vw !important; left: 4.2vw !important; }
  .p-information__heading-star { width: clamp(18px, 1.7vw, 26px); }
}
.p-information__spark { width: clamp(30px, 3vw, 48px); }
.c-heading--sm.--stack { font-size: max(12px, .84vw) !important; }

/* =========================================================
   2026-08-28 最終品質調整
   ヘッダー / Information / About / Discover
   ========================================================= */

/* ── ヘッダー：ロゴの実寸比率と、丸みのあるナビ書体 ── */
.l-header__logo a { inline-size: auto !important; }
.l-header__logo-mark {
  width: auto !important;
  height: 34px !important;
  aspect-ratio: 240 / 282;
  object-fit: contain;
  flex: none;
}
.l-header__logo-text,
.l-header__nav-list--main a,
.l-header__nav-list--sub a,
.l-header__nav-entry a,
.l-header__humburger-txt {
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif !important;
}
.l-header__logo-text {
  font-weight: 700 !important;
  letter-spacing: .13em;
}
.l-header__nav-list--main > li > a .u-line__text,
.l-header__nav-list--sub > li > a {
  font-weight: 700 !important;
  letter-spacing: .015em;
}
.l-header__nav-entry a { font-weight: 800 !important; letter-spacing: .07em; }

/* ── Information：参考と同じ長い縦レールと、独立した日付／カテゴリ列 ── */
@media (min-width: 48rem) {
  .p-information__heading {
    top: 4.2vw !important;
    bottom: 4.2vw !important;
    left: 5vw !important;
    height: auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(78px, 1fr) auto minmax(78px, 1fr) auto;
    align-items: center;
    align-content: stretch;
    gap: 12px;
  }
  .p-information__heading-dots {
    width: 2px;
    height: 100% !important;
    min-height: 78px;
    background-image: linear-gradient(#FFFFFF 46%, transparent 46%);
    background-size: 2px 10px;
  }
  .p-information__heading-deco {
    top: 18%;
    left: 16px;
    width: 34px;
    animation: stepUpDown 4.2s step-end infinite;
  }
  .p-information__list-item-link {
    display: grid !important;
    grid-template-columns: 174px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
  }
  .p-information__list-item-sub {
    display: grid !important;
    grid-template-columns: 76px 88px;
    align-items: center;
    gap: 10px;
    min-width: 174px;
  }
  .p-information__list-item-date {
    font-size: clamp(12px, .9vw, 14px) !important;
    white-space: nowrap;
  }
  .p-information__list-item-category {
    min-width: 88px;
    padding: .42em .7em !important;
    background: #FFFFFF !important;
    border: 0 !important;
    color: #2B6CD4 !important;
    font-size: clamp(11px, .82vw, 13px) !important;
    line-height: 1.1;
    white-space: nowrap;
  }
  .p-information__list-text { margin-top: 0; }
}

/* ── About：固定列を廃止し、参考のエディトリアル構成へ ── */
.p-about-v2 {
  position: relative;
  overflow: hidden;
  padding-block: clamp(92px, 9vw, 144px);
  background:
    radial-gradient(circle at 88% 18%, rgb(255 255 255 / .95) 0 7%, transparent 25%),
    #F4F7FB;
  color: #0A2E63;
}
.p-about-v2::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background-image: radial-gradient(circle, #2B6CD4 1.5px, transparent 1.8px);
  background-size: 5px 20px;
  opacity: .7;
}
.p-about-v2__inner { width: min(1160px, 88vw); margin-inline: auto; }
.p-about-v2__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr) 78px;
  align-items: start;
  gap: clamp(28px, 3.2vw, 52px);
}
.p-about-v2__hero {
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 2px 0 rgb(255 255 255 / .9) inset, 0 22px 48px rgb(14 61 124 / .14);
}
.p-about-v2__hero img {
  width: 100%;
  aspect-ratio: 1.48 / 1;
  object-fit: cover;
  display: block;
}
.p-about-v2__copy { padding-top: 4px; }
.p-about-v2__heading {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  padding-bottom: 14px;
  border-bottom: 4px double #0A2E63;
}
.p-about-v2__heading h2 {
  margin: 0;
  font-family: var(--ff-en);
  font-size: clamp(38px, 3.25vw, 50px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: .02em;
}
.p-about-v2__heading p {
  margin: 0;
  font-family: var(--ff-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}
.p-about-v2__lead {
  margin: clamp(26px, 2.4vw, 38px) 0 0;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: .015em;
}
.p-about-v2__lead span {
  color: #2B6CD4;
  background: linear-gradient(transparent 72%, #EABF43 72% 92%, transparent 92%);
}
.p-about-v2__text {
  max-width: 43em;
  margin: clamp(22px, 2vw, 32px) 0 0;
  color: #294A73;
  font-size: clamp(13px, 1.08vw, 16px);
  font-weight: 600;
  line-height: 2;
}
.p-about-v2__vertical {
  position: relative;
  margin: 0;
  padding-top: 34px;
  writing-mode: vertical-rl;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.15;
}
.p-about-v2__vertical::before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EABF43;
  box-shadow: 0 0 0 8px rgb(234 191 67 / .13);
}

.p-about-v2__data {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(30px, 4vw, 64px) clamp(18px, 2.2vw, 34px);
  align-items: center;
  margin-top: clamp(100px, 10vw, 160px);
  padding-bottom: 20px;
}
.p-about-v2__data-heading {
  grid-column: 7 / 13;
  align-self: end;
  position: relative;
  z-index: 2;
  text-align: center;
}
.p-about-v2__data-heading small {
  display: block;
  color: #E0AE2F;
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
}
.p-about-v2__data-heading strong {
  display: block;
  font-family: var(--ff-en);
  font-size: clamp(58px, 6.2vw, 94px);
  line-height: .95;
  letter-spacing: -.035em;
}
.p-about-v2__data-heading em {
  display: block;
  margin-top: -.15em;
  color: #2B6CD4;
  font-family: "Caveat", cursive;
  font-size: clamp(62px, 6.5vw, 100px);
  font-weight: 700;
  line-height: .8;
  transform: rotate(-4deg);
}
.p-about-v2__building {
  grid-column: 7 / 13;
  grid-row: 2 / span 2;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 12px 12px 42px;
  background: #FFFFFF;
  box-shadow: 0 22px 52px rgb(13 57 115 / .16);
  transform: rotate(-2deg);
}
.p-about-v2__building img { width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; display: block; }
.p-about-v2__building figcaption {
  position: absolute;
  right: 16px;
  bottom: 13px;
  color: #5F7795;
  font-family: var(--ff-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.p-about-v2__stat {
  grid-column: 1 / 7;
  display: grid;
  grid-template-columns: minmax(105px, 34%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  min-height: 210px;
}
.p-about-v2__stat.--s1 { grid-row: 1; }
.p-about-v2__stat.--s2 { grid-row: 2; }
.p-about-v2__stat.--s3 { grid-row: 3; }
.p-about-v2__stat.--s4 { grid-column: 7 / 13; grid-row: 4; margin-top: 12px; }
.p-about-v2__stat figure { margin: 0; text-align: center; }
.p-about-v2__stat figure img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 12px 12px rgb(20 58 107 / .14));
}
.p-about-v2__stat small {
  color: #2B6CD4;
  font-family: var(--ff-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}
.p-about-v2__stat h3 {
  margin: 4px 0 0;
  color: #122E52;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 800;
}
.p-about-v2__stat div > p:last-child {
  margin: 14px 0 0;
  color: #405C7B;
  font-size: clamp(12px, .96vw, 14px);
  font-weight: 600;
  line-height: 1.9;
}
.p-about-v2__value {
  margin: 2px 0 0;
  color: #2B6CD4;
  font-family: var(--ff-en);
  font-size: clamp(54px, 5.8vw, 88px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}
.p-about-v2__value em { margin-left: 7px; font-size: .26em; font-style: normal; letter-spacing: 0; }
.p-about-v2__phrase {
  margin: 8px 0 0;
  color: #2B6CD4;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.45;
}

/* ── Discover：参考の交互2カラム＋#03フルブリード ── */
.p-variety {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 8vw, 130px) 0 clamp(110px, 10vw, 160px) !important;
  background: #2476D5 !important;
}
.p-variety__pillar {
  top: clamp(94px, 9vw, 145px) !important;
  bottom: auto !important;
  left: clamp(20px, 2vw, 32px) !important;
  width: 90px !important;
  height: min(76%, 1320px) !important;
  overflow: hidden;
}
.p-variety__pillar-text {
  font-size: clamp(54px, 6.4vw, 96px) !important;
  line-height: .86 !important;
  opacity: .92;
}
.p-variety__pillar-objs,
.p-variety__pillar::after { display: none !important; }
.p-variety__inner {
  width: min(1120px, calc(100vw - 170px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-left: 54px !important;
}
.p-variety__heading { margin-bottom: 12px !important; }
.p-variety__heading::after { width: 90px !important; margin-left: 7.8em !important; }
.p-variety__title {
  margin-bottom: clamp(62px, 6vw, 94px) !important;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: clamp(34px, 3.8vw, 58px) !important;
  line-height: 1.35;
}
.p-variety__item,
.p-variety__item.--a,
.p-variety__item.--b {
  width: 100% !important;
  min-height: 400px;
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
  align-items: center;
  gap: clamp(42px, 5vw, 78px);
  margin: 0 0 clamp(86px, 8vw, 128px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.p-variety__item.--b { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important; }
.p-variety__item-figure { overflow: hidden; border-radius: 28px; }
.p-variety__item-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.46 / 1;
  object-fit: cover;
  border-radius: 28px !important;
  box-shadow: none !important;
}
.p-variety__item-text { padding: clamp(12px, 2vw, 28px) 0; }
.p-variety__item-num {
  font-size: clamp(28px, 3.1vw, 46px) !important;
  font-weight: 800 !important;
}
.p-variety__item-title {
  padding-bottom: 18px;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: clamp(26px, 2.6vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  border-bottom: 2px dotted rgb(255 255 255 / .72);
}
.p-variety__item-title::after { display: none !important; }
.p-variety__item-lead {
  margin-top: 20px !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  font-weight: 600;
  line-height: 1.9 !important;
}
.p-variety__item-more { margin-top: 26px !important; font-weight: 800 !important; }
.p-variety__item-deco { width: clamp(24px, 2.5vw, 38px) !important; }

.p-variety__item.--c {
  position: relative;
  left: 50%;
  width: min(calc(100vw - 64px), 1440px) !important;
  min-height: clamp(440px, 42vw, 610px);
  display: block !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .42) !important;
  border-radius: 34px;
  box-shadow: 0 30px 70px rgb(4 37 91 / .26) !important;
  transform: translateX(-50%);
}
.p-variety__item.--c::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgb(5 42 99 / .94) 0 31%, rgb(5 42 99 / .72) 45%, rgb(5 42 99 / .12) 75%);
}
.p-variety__item.--c .p-variety__item-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
}
.p-variety__item.--c .p-variety__item-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0 !important;
}
.p-variety__item.--c .p-variety__item-text {
  position: relative;
  z-index: 2;
  width: min(43%, 570px);
  padding: clamp(58px, 6vw, 90px);
}
.p-variety__item.--c .p-variety__item-deco { right: 40px; top: 34px; }

@media (max-width: 47.99rem) {
  .l-header__logo-mark { height: 29px !important; }
  .l-header__logo-text { font-size: 10px; }

  .p-about-v2 { padding-block: 70px 82px; }
  .p-about-v2__inner { width: calc(100vw - 36px); }
  .p-about-v2__intro { display: flex; flex-direction: column; gap: 28px; }
  .p-about-v2__hero { order: 2; width: 100%; border-radius: 20px; }
  .p-about-v2__hero img { aspect-ratio: 1.28 / 1; }
  .p-about-v2__copy { order: 1; }
  .p-about-v2__vertical { display: none; }
  .p-about-v2__heading h2 { font-size: 38px; }
  .p-about-v2__lead { font-size: 21px; }
  .p-about-v2__text { font-size: 13px; line-height: 1.9; }
  .p-about-v2__data { display: flex; flex-direction: column; gap: 52px; margin-top: 80px; }
  .p-about-v2__data-heading { width: 100%; text-align: left; }
  .p-about-v2__data-heading strong { font-size: 58px; }
  .p-about-v2__data-heading em { margin-left: 1.1em; font-size: 68px; }
  .p-about-v2__building { order: 1; width: 94%; align-self: flex-end; }
  .p-about-v2__stat { order: 2; width: 100%; grid-template-columns: 112px minmax(0, 1fr); min-height: 0; gap: 18px; }
  .p-about-v2__stat.--s4 { margin-top: 0; }
  .p-about-v2__stat figure img { max-height: 150px; }
  .p-about-v2__value { font-size: 56px; }
  .p-about-v2__phrase { font-size: 21px; }

  .p-variety { padding: 72px 0 88px !important; }
  .p-variety__pillar { display: none !important; }
  .p-variety__inner { width: calc(100vw - 36px) !important; padding-left: 0 !important; }
  .p-variety__title { margin-bottom: 48px !important; font-size: 34px !important; }
  .p-variety__item,
  .p-variety__item.--a,
  .p-variety__item.--b {
    min-height: 0;
    grid-template-columns: 1fr !important;
    gap: 20px;
    margin-bottom: 72px !important;
  }
  .p-variety__item.--a .p-variety__item-figure { order: -1; }
  .p-variety__item-figure { border-radius: 20px; }
  .p-variety__item-figure img { border-radius: 20px !important; }
  .p-variety__item-title { font-size: 28px !important; }
  .p-variety__item.--c {
    left: 50%;
    width: calc(100vw - 24px) !important;
    min-height: 560px;
    display: block !important;
    border-radius: 24px;
    transform: translateX(-50%);
  }
  .p-variety__item.--c::after {
    background: linear-gradient(0deg, rgb(5 42 99 / .96) 0 44%, rgb(5 42 99 / .58) 68%, transparent 100%);
  }
  .p-variety__item.--c .p-variety__item-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 28px 24px 34px;
  }
}

/* =========================================================
   ヒーローの手描き装飾：支給見本に座標を合わせる
   見本(1280px幅)のヒーロー領域を「上端95px / 高さ695px」として読み、
   left = x/1280、top = (y-95)/695 に直した値。写真の子ではなく
   ヒーロー基準に置くので、写真のサイズを変えても位置がずれない。
   ========================================================= */
.p-hero__body > .p-hero__deco {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
  animation: stepUpDown 3.4s steps(1) infinite;
}
.p-hero__body > .p-hero__deco > img { display: block; width: 100%; height: auto; }

/* ジャンプの右の三角2つ／スーツ男性の右の三角 */
.p-hero__body > .--k1  { left: 22.1%; top: 3.9%;  width: 4.8%; }
.p-hero__body > .--k2  { left: 37.7%; top: 3.3%;  width: 4.7%; animation-name: stepUpDownReverse; }
/* 恐竜の右上の弧と、その下の稲妻 */
.p-hero__body > .--k3  { left: 83.0%; top: 11.7%; width: 2.9%; }
.p-hero__body > .--k4  { left: 81.7%; top: 21.7%; width: 3.6%; animation-name: stepUpDownReverse; }
/* 左端の弧（OREGONの左上） */
.p-hero__body > .--k5  { left: 4.3%;  top: 46.8%; width: 4.5%; }
.p-hero__body > .--k5 > img { transform: scaleX(-1); }
/* 勢い線3つ（OREGONの右／タオルの左右） */
.p-hero__body > .--k6  { left: 27.0%; top: 52.8%; width: 4.9%; animation-name: stepUpDownReverse; }
.p-hero__body > .--k7  { left: 42.4%; top: 58.3%; width: 2.9%; }
.p-hero__body > .--k8  { left: 53.0%; top: 58.3%; width: 2.9%; animation-name: stepUpDownReverse; }
.p-hero__body > .--k8 > img { transform: scaleX(-1); }
/* 3人組の左上の大きなキラキラ */
.p-hero__body > .--k9  { left: 92.2%; top: 39.3%; width: 6.9%; }
/* 恐竜の上の波（見本の右上の飾り） */
.p-hero__body > .--k10 { left: 84.5%; top: 6.2%;  width: 4.2%; animation-name: stepUpDownReverse; }

.is-hero-armed .p-hero__body > .p-hero__deco { opacity: 0; }

@media (max-width: 47.99rem) {
  /* SPは写真を絞っているので、装飾も主要な4点だけ残す */
  .p-hero__body > .--k2, .p-hero__body > .--k3,
  .p-hero__body > .--k6, .p-hero__body > .--k8,
  .p-hero__body > .--k10 { display: none; }
  .p-hero__body > .p-hero__deco { width: 8% !important; }
  .p-hero__body > .--k9 { width: 13% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero__body > .p-hero__deco { animation: none !important; }
}

/* ── 支給見本ではマーキーは人物の「奥」。文字が体で隠れる ── */
.p-hero__loop { z-index: 2 !important; }
.p-hero__img  { z-index: 4; }
.p-hero__title { z-index: 6 !important; }

/* 三角と弧は単体素材に差し替えたので、縦横比に合う寸法にする */
.p-hero__body > .--k1  { width: 4.6%; top: 4.6%;  }
.p-hero__body > .--k2  { width: 3.8%; top: 4.2%;  }
.p-hero__body > .--k3  { width: 2.2%; top: 11.4%; }
.p-hero__body > .--k5  { width: 3.2%; top: 46.2%; }
/* 勢い線とキラキラは見本に対して少し小さかったので上げる */
.p-hero__body > .--k6  { width: 5.6%; }
.p-hero__body > .--k7  { width: 3.4%; }
.p-hero__body > .--k8  { width: 3.4%; }
.p-hero__body > .--k9  { width: 7.6%; }

/* =========================================================
   ホクセイグループとは：4項目を左の列にそろえ、絵を左右交互にする
   （--s4 だけ右列(7/13)に置かれていて、建物写真の下に孤立していた）
   ========================================================= */
@media (min-width: 64rem) {
  .p-about-v2__stat.--s4 {
    grid-column: 1 / 7 !important;
    grid-row: 4 !important;
    margin-top: 0 !important;
  }
  /* 偶数番は絵と文を入れ替えて、参考どおりのジグザグにする */
  .p-about-v2__stat.--s2,
  .p-about-v2__stat.--s4 {
    grid-template-columns: minmax(0, 1fr) minmax(105px, 34%);
  }
  .p-about-v2__stat.--s2 > figure,
  .p-about-v2__stat.--s4 > figure { order: 2; }
  .p-about-v2__stat.--s2 > div,
  .p-about-v2__stat.--s4 > div { order: 1; }
  /* 建物写真は2〜3行目にまたがったまま、4行目の左に空きができないよう詰める */
  .p-about-v2__building { grid-row: 2 / span 3 !important; align-self: center; }
}

/* Discover の地は「4つの事業」と同じ藍にそろえる（#2476D5 → #1B6FD0） */
.p-variety { background: var(--hk-blue) !important; }

/* リード文は5行に折れていた。字送りと級数をわずかに詰めて4行に収める。
   実測: 2行目「地域と地域を繋ぎ、価値を届け、」が 438px 必要で枠が 436px だった */
.p-about-v2__lead {
  font-size: clamp(21px, 1.9vw, 28px);
  letter-spacing: 0;
}

/* =========================================================
   Discover #03：参考(Interview & Episode)の型に組み直す
   左に大きな写真、右に手書き見出し＋2本罫＋大見出し＋説明。
   これまでの「写真を全面に敷いてグラデを重ねる」形はやめる。
   （左31%から硬く落ちるグラデが影のように見えていた）
   ========================================================= */
.p-variety__item.--c {
  position: relative !important;
  left: auto !important;
  width: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  align-items: center;
  gap: clamp(28px, 3.6vw, 62px) !important;
  margin: clamp(40px, 5vw, 82px) 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.p-variety__item.--c::after { display: none !important; }   /* 変な影の正体 */
.p-variety__item.--c .p-variety__item-figure {
  position: static !important;
  inset: auto !important;
  margin: 0;
}
.p-variety__item.--c .p-variety__item-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px !important;
  box-shadow: 0 22px 50px rgb(4 34 82 / .3);
}
.p-variety__item.--c .p-variety__item-text {
  position: static !important;
  width: auto !important;
  padding: 0 !important;
}
/* 手書きの見出しと、その右に添える2行の英字（参考と同じ組み） */
.p-variety__item-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}
.p-variety__item-script {
  margin: 0;
  font-family: "Caveat", var(--ff-en, "Instrument Sans"), cursive;
  font-weight: 700;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  color: #FFFFFF;
}
.p-variety__item-en2 {
  margin: 0 0 .4em;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: max(11px, .78vw);
  line-height: 1.5;
  letter-spacing: .18em;
  color: rgb(255 255 255 / .82);
}
/* 参考は見出しの下に細い2本罫が右端まで走る */
.p-variety__item-head::after {
  content: "";
  flex: 1;
  align-self: flex-end;
  margin-bottom: .5em;
  height: 5px;
  border-top: 1.5px solid rgb(255 255 255 / .7);
  border-bottom: 1.5px solid rgb(255 255 255 / .7);
}
.p-variety__item.--c .p-variety__item-title {
  position: relative;
  margin: 0 0 16px;
  font-size: clamp(28px, 3.2vw, 50px);
  line-height: 1.32;
}
.p-variety__item.--c .p-variety__item-title::after { display: none; }
/* 見出しの脇の手描き装飾（参考の旗のような線画） */
.p-variety__item-flag {
  position: absolute;
  right: -6%;
  bottom: .1em;
  width: clamp(46px, 4.6vw, 74px);
  height: auto;
  pointer-events: none;
  animation: stepUpDown 3.6s steps(1) infinite;
}
.p-variety__item-sub {
  margin: 0 0 18px;
  font-weight: 700;
  font-size: clamp(14px, 1.14vw, 18px);
  letter-spacing: .08em;
  color: #CDE84F;
}
.p-variety__item.--c .p-variety__item-lead { margin-bottom: 24px; }

@media (max-width: 63.99rem) {
  .p-variety__item.--c { grid-template-columns: minmax(0, 1fr) !important; }
  .p-variety__item-head::after { display: none; }
  .p-variety__item-flag { right: 0; }
}
@media (prefers-reduced-motion: reduce) { .p-variety__item-flag { animation: none !important; } }

/* About の見出しも Information / Interview と同じ手書き風にそろえる */
.p-about-v2__heading h2 {
  font-family: "Caveat", var(--ff-en, "Instrument Sans"), cursive !important;
  font-weight: 700 !important;
  font-size: clamp(38px, 3.9vw, 58px) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  line-height: 1 !important;
}

/* =========================================================
   ホクセイグループとは：ロゴを建物写真に重ねて右の余白を埋める
   ========================================================= */
@media (min-width: 64rem) {
  .p-about-v2__data-heading {
    grid-column: 7 / 13 !important;
    grid-row: 2 !important;
    position: relative;
    z-index: 2;
    align-self: end;
    justify-self: center;
    margin: 0 0 -3.6vw !important;   /* 写真の上端にかぶせる */
    text-align: center;
  }
  .p-about-v2__building { grid-row: 2 / span 3 !important; margin-top: 4.2vw; }
}

/* 数字まわりの切り抜きも、ヒーローと同じ揺れで動かす */
.p-about-v2__stat figure img.js-jiggle,
.p-about-v2__stat figure img.js-jiggle-r,
.p-about-v2__stat figure img.js-step-jump,
.p-about-v2__stat figure img.js-step-rotate { transform-origin: 50% 92%; }
.p-about-v2__stat figure img.js-step-jump { animation-duration: 7s; }
.p-about-v2__stat figure img.js-step-rotate { animation-duration: 8s; }

/* =========================================================
   Discover：縦の HOKUSEI を参考どおり縦に流す
   参考は文字がループし、脇に縦の破線と上下の三角、
   切り抜きが文字に重なって縦に並ぶ。
   ========================================================= */
.p-variety__pillar {
  display: block !important;
  overflow: hidden !important;
  width: clamp(64px, 6.4vw, 104px) !important;
  height: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  left: clamp(16px, 2vw, 34px) !important;
}
.p-variety__pillar-track {
  display: flex;
  flex-direction: column;
  height: max-content;
  animation: pillarLoop 26s linear infinite;
}
.p-variety__pillar-text {
  display: block;
  flex: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-weight: 800;
  font-size: clamp(52px, 6vw, 96px) !important;
  line-height: .96;
  letter-spacing: .02em;
  color: #FFFFFF;
}
/* 切り抜きは文字の上に重ねて縦に並べる（参考と同じ） */
.p-variety__pillar-objs {
  position: absolute;
  top: 8%;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: grid !important;
  justify-items: center;
  gap: clamp(120px, 13vw, 220px);
  width: clamp(74px, 7.4vw, 118px) !important;
  pointer-events: none;
}
.p-variety__pillar-obj {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgb(4 32 78 / .34));
}
/* 縦の破線と上下の三角 */
.p-variety__rail {
  position: absolute;
  top: clamp(40px, 4.4vw, 78px);
  bottom: clamp(40px, 4.4vw, 78px);
  left: calc(clamp(16px, 2vw, 34px) + clamp(64px, 6.4vw, 104px) + clamp(14px, 1.6vw, 26px));
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: space-between;
  pointer-events: none;
}
.p-variety__rail-line {
  width: 2px;
  height: 100%;
  background-image: linear-gradient(rgb(255 255 255 / .8) 45%, transparent 45%);
  background-size: 2px 11px;
}
.p-variety__rail-cap {
  width: 0; height: 0;
  border-inline: 6px solid transparent;
  border-bottom: 9px solid rgb(255 255 255 / .85);
}
.p-variety__rail-cap.--btm { border-bottom: 0; border-top: 9px solid rgb(255 255 255 / .85); }

@media (min-width: 64rem) {
  .p-variety__inner { padding-left: clamp(180px, 16vw, 260px) !important; }
}
@media (max-width: 63.99rem) {
  .p-variety__pillar-objs, .p-variety__rail { display: none !important; }
  .p-variety__inner { padding-left: clamp(58px, 13vw, 92px) !important; }
}

/* =========================================================
   VIEW MORE：下線を敷いて押せる場所だと分かるようにする
   ========================================================= */
.p-variety__item-more {
  position: relative;
  padding-bottom: 10px;
}
.p-variety__item-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgb(255 255 255 / .55);
  transition: background .3s;
}
.p-variety__item-more:hover::after { background: var(--hk-lime, #CDE84F); }
.p-variety__item-more:hover { color: var(--hk-lime, #CDE84F); }

/* ── 縦柱まわりの詰め ── */
/* 破線は grid の中で height:100% が解けず 0 になっていた */
.p-variety__rail {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 8px;
}
.p-variety__rail-line { height: auto; align-self: stretch; }
/* 切り抜きは pillar(overflow:hidden) の外に出したので、ヒーロー基準で置く */
.p-variety__pillar-objs {
  position: absolute;
  top: clamp(80px, 8vw, 140px);
  left: clamp(16px, 2vw, 34px);
  z-index: 3;
  width: clamp(64px, 6.4vw, 104px) !important;
  gap: clamp(150px, 16vw, 280px) !important;
  translate: none !important;
}
.p-variety__pillar-obj { width: 118%; margin-left: -9%; }

/* =========================================================
   Discover #03：参考どおり、縦柱と点線を超えて全幅に置く
   （#01/#02 は c-wrap の中、#03 だけセクション直下で左右いっぱい）
   ========================================================= */
.p-variety > .p-variety__item.--c {
  position: relative !important;
  z-index: 4;                       /* 縦柱・点線の上に出す */
  width: min(1440px, calc(100vw - 64px)) !important;
  margin: clamp(50px, 6vw, 100px) auto 0 !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) !important;
  gap: clamp(30px, 4vw, 70px) !important;
  align-items: center;
}
.p-variety > .--c .p-variety__item-figure img {
  aspect-ratio: 16 / 10;
  border-radius: 28px !important;
}
/* 見出しの脇に添える勢い線。上下反転していたので向きを正す */
.p-variety__item-flag {
  right: auto;
  left: calc(100% + 10px);
  bottom: .3em;
  width: clamp(40px, 3.8vw, 62px);
  transform: scaleY(-1);
}
@media (max-width: 63.99rem) {
  .p-variety > .p-variety__item.--c {
    width: calc(100vw - 40px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .p-variety__item-flag { left: auto; right: 0; }
}

/* 見出しの脇の装飾はライムの勢い線に統一（金の線は下向きで不自然だった） */
.p-initiative .c-heading__deco { width: clamp(26px, 2.4vw, 38px); }
/* #03 の勢い線が右端で見切れていたので、見出しの内側に収める */
.p-variety__item-flag { left: auto; right: 4%; bottom: -.15em; }
/* 見出しの2本罫は英字のすぐ右で止める */
.p-variety__item-head::after { max-width: 26%; }

/* =========================================================
   ヒーロー：支給見本(1280 x 790)の実座標をそのまま移植する
   これまで高さを700として計算し、さらにヘッダー分95pxを引いていたため
   装飾が一律で 90px ほど上にずれていた。基準をそろえて置き直す。
     left = x / 1280 、 top = y / 790
   ========================================================= */
.p-hero { aspect-ratio: 1280 / 790 !important; }

/* ── 写真10点（見本の実測値） ── */
.p-hero__img.--h1  { left: 1.6%;  top: 15.2%; width: 14.1%; }  /* ジャンプ    20,120,180 */
.p-hero__img.--h2  { left: 19.1%; top: 22.2%; width: 6.6%;  }  /* 女性       245,175, 85 */
.p-hero__img.--h3  { left: 28.9%; top: 13.3%; width: 10.9%; }  /* 男性       370,105,140 */
.p-hero__img.--h4  { left: 50.0%; top: 19.6%; width: 5.5%;  }  /* アルミ形材  640,155, 70 */
.p-hero__img.--h5  { left: 62.5%; top: 15.2%; width: 20.7%; }  /* 恐竜       800,120,265 */
.p-hero__img.--h6  { left: 89.1%; top: 24.7%; width: 8.6%;  }  /* 地金      1140,195,110 */
.p-hero__img.--h7  { left: 2.0%;  top: 39.2%; width: 8.2%;  }  /* PTP包装     25,310,105 */
.p-hero__img.--h8  { left: 3.1%;  top: 58.2%; width: 24.2%; }  /* OREGON2人   40,460,310 */
.p-hero__img.--h10 { left: 40.6%; top: 63.9%; width: 16.4%; }  /* タオル      520,505,210 */
.p-hero__img.--h11 { left: 69.5%; top: 55.7%; width: 28.1%; }  /* 3人組       890,440,360 */

/* ── 題字（見本: 中央 x=635 / 上端 y=350） ── */
.p-hero__title { top: 44.3% !important; }

/* ── マーキー（見本: 文字の上端 y=620） ── */
.p-hero__loop { top: 75.1% !important; }

/* ── 手描き装飾9点（見本の実測値） ── */
.p-hero__body > .--k1 { left: 19.5%; top: 15.2%; width: 7.4%; }  /* 三角2つ   250,120, 95 */
.p-hero__body > .--k2 { left: 37.5%; top: 14.6%; width: 5.1%; }  /* 三角1つ   480,115, 65 */
.p-hero__body > .--k3 { left: 83.2%; top: 22.2%; width: 2.7%; }  /* 弧))     1065,175, 35 */
.p-hero__body > .--k4 { left: 81.6%; top: 31.0%; width: 3.9%; }  /* 稲妻     1045,245, 50 */
.p-hero__body > .--k5 { left: 4.3%;  top: 53.2%; width: 4.7%; }  /* 弧((       55,420, 60 */
.p-hero__body > .--k6 { left: 27.0%; top: 58.2%; width: 5.1%; }  /* 勢い線    345,460, 65 */
.p-hero__body > .--k7 { left: 42.2%; top: 63.3%; width: 3.5%; }  /* 勢い線    540,500, 45 */
.p-hero__body > .--k8 { left: 52.7%; top: 63.3%; width: 3.5%; }  /* 勢い線    675,500, 45 */
.p-hero__body > .--k9 { left: 92.2%; top: 46.2%; width: 7.0%; }  /* キラキラ 1180,365, 90 */

@media (max-width: 47.99rem) {
  .p-hero { aspect-ratio: 375 / 620 !important; }
  .p-hero__title { top: 40% !important; }
  .p-hero__loop { top: 62% !important; }
}

/* =========================================================
   ヒーローの手描き装飾：支給見本から色で自動抽出した実測値
   目視ではなく原本(1280x1440)からライム #CDE84F を拾い、
   連結成分ごとの外接矩形をそのまま left = x/1280、top = y/790 に直した。
   素材も見本から切り出した実物を使う。
   ========================================================= */
.p-hero__body > .--k1 { left: 81.64%; top: 13.54%; width: 4.61%; }  /* 見本 1045,107,59 */
.p-hero__body > .--k2 { left: 37.34%; top: 15.32%; width: 3.05%; }  /* 見本 478,121,39 */
.p-hero__body > .--k3 { left: 25.70%; top: 15.57%; width: 1.25%; }  /* 見本 329,123,16 */
.p-hero__body > .--k4 { left: 18.59%; top: 16.58%; width: 5.00%; }  /* 見本 238,131,64 */
.p-hero__body > .--k5 { left: 39.38%; top: 22.03%; width: 2.81%; }  /* 見本 504,174,36 */
.p-hero__body > .--k6 { left: 85.86%; top: 22.41%; width: 2.73%; }  /* 見本 1099,177,35 */
.p-hero__body > .--k7 { left: 82.03%; top: 30.76%; width: 2.97%; }  /* 見本 1050,243,38 */
.p-hero__body > .--k9 { left: 90.16%; top: 46.58%; width: 8.52%; }  /* 見本 1154,368,109 */
.p-hero__body > .--k10 { left: 1.80%; top: 53.67%; width: 8.59%; }  /* 見本 23,424,110 */
.p-hero__body > .--k11 { left: 23.44%; top: 57.34%; width: 6.25%; }  /* 見本 300,453,80 */
.p-hero__body > .--k12 { left: 42.11%; top: 63.80%; width: 3.67%; }  /* 見本 539,504,47 */
.p-hero__body > .--k13 { left: 53.75%; top: 64.30%; width: 3.36%; }  /* 見本 688,508,43 */

@media (max-width: 47.99rem) {
  /* SPは写真を絞っているので、装飾も主要な5点だけ残す */
  .p-hero__body > .--k2, .p-hero__body > .--k3, .p-hero__body > .--k5,
  .p-hero__body > .--k6, .p-hero__body > .--k11,
  .p-hero__body > .--k13 { display: none; }
  .p-hero__body > .p-hero__deco { width: 9% !important; }
  .p-hero__body > .--k7 { width: 5% !important; }
}

/* =========================================================
   ヒーローの切り抜き10点：支給見本から白フチごと自動検出した実測値
   （地の青とライムを除いた連結成分の外接矩形。目視ではない）
     left = x/1280、top = y/790、width = w/1280
   ========================================================= */
.p-hero__img.--h7 { left: 1.25%; top: 39.75%; width: 9.53%; }  /* PTP包装 見本 16,314,122 */
.p-hero__img.--h8 { left: 1.88%; top: 57.22%; width: 26.48%; }  /* OREGON2人 見本 24,452,339 */
.p-hero__img.--h1 { left: 2.89%; top: 16.20%; width: 12.73%; }  /* ジャンプ 見本 37,128,163 */
.p-hero__img.--h2 { left: 17.73%; top: 22.28%; width: 8.91%; }  /* 女性 見本 227,176,114 */
.p-hero__img.--h3 { left: 28.59%; top: 14.81%; width: 11.25%; }  /* 男性 見本 366,117,144 */
.p-hero__img.--h10 { left: 41.64%; top: 64.56%; width: 16.17%; }  /* タオル 見本 533,510,207 */
.p-hero__img.--h4 { left: 50.23%; top: 16.96%; width: 5.78%; }  /* アルミ形材 見本 643,134,74 */
.p-hero__img.--h5 { left: 62.34%; top: 13.67%; width: 20.47%; }  /* 恐竜 見本 798,108,262 */
.p-hero__img.--h11 { left: 65.62%; top: 54.43%; width: 34.38%; }  /* 3人組 見本 840,430,440 */
.p-hero__img.--h6 { left: 88.83%; top: 25.19%; width: 9.69%; }  /* 地金 見本 1137,199,124 */

/* ── 装飾は人物の「奥」。見本でも波や勢い線は人物の後ろに隠れている ── */
.p-hero__body > .p-hero__deco { z-index: 3 !important; }
.p-hero__img { z-index: 4 !important; }
/* 恐竜まわりの装飾だけは人物と重ならないので手前でよい */
.p-hero__body > .--k1,
.p-hero__body > .--k6,
.p-hero__body > .--k7,
.p-hero__body > .--k9 { z-index: 5 !important; }
/* K13(勢い線)は左右反転して対にする */
.p-hero__body > .--k13 > img { transform: scaleX(-1); }

/* =========================================================
   見出しの書体を Interview & Episode と同じ手書き風にそろえる
   （Discover / Our Business / Message / Information / About ほか全て）
   ========================================================= */
.c-heading--lg,
.p-about-v2__heading h2,
.p-variety__item-script {
  font-family: "Caveat", var(--ff-en, "Instrument Sans"), cursive !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
}
.c-heading--lg { font-size: clamp(34px, 3.6vw, 54px) !important; }
/* 手書き書体は小さく見えるので、下線と余白を詰め直す */
.c-heading--lg::after { margin-top: .18em !important; }

/* =========================================================
   ヒーローの手描き装飾：素材フォルダの素材をそのまま(分割せず)使い、
   見本の各装飾が占める矩形に、素材の縦横比を保って収める。
     left = x/1280、top = y/790、width = w/1280
   ========================================================= */
.p-hero__body > .--k1 { left: 81.64%; top: 14.69%; width: 4.61%; }  /* sz-arcs 見本枠 1045,107,59x41 */
.p-hero__body > .--k2 { left: 38.35%; top: 15.32%; width: 2.84%; }  /* sz-diamonds 見本枠 478,121,62x79 */
.p-hero__body > .--k3 { left: 18.52%; top: 16.87%; width: 8.44%; }  /* sz-tris 見本枠 237,123,108x60 */
.p-hero__body > .--k4 { left: 85.86%; top: 24.39%; width: 2.73%; }  /* sz-arcs 見本枠 1099,177,35x45 */
.p-hero__body > .--k5 { left: 82.03%; top: 31.01%; width: 2.97%; }  /* sz-bolt 見本枠 1050,243,38x139 */
.p-hero__body > .--k6 { left: 90.18%; top: 46.58%; width: 8.47%; }  /* sz-asterisks 見本枠 1154,368,109x108 */
.p-hero__body > .--k7 { left: 1.80%; top: 54.76%; width: 8.59%; }  /* sz-wave-s 見本枠 23,424,110x97 */
.p-hero__body > .--k8 { left: 23.44%; top: 60.21%; width: 6.25%; }  /* sz-wave-l 見本枠 300,453,80x91 */
.p-hero__body > .--k9 { left: 42.11%; top: 63.80%; width: 3.66%; }  /* sz-rays 見本枠 539,504,47x46 */
.p-hero__body > .--k10 { left: 53.75%; top: 64.55%; width: 3.36%; }  /* sz-rays 見本枠 688,508,43x46 */

.p-hero__body > .--flip > img { transform: scaleX(-1); }

@media (max-width: 47.99rem) {
  .p-hero__body > .--k2, .p-hero__body > .--k4,
  .p-hero__body > .--k8, .p-hero__body > .--k10 { display: none; }
}

/* =========================================================
   ヒーローの手描き装飾：素材フォルダの図形を、
   支給見本(1280x790)で実測した位置と大きさに置く。
   縦横比は素材のまま保つ。
   ========================================================= */
.p-hero__body > .--k1 { left: 81.64%; top: 14.26%; width: 4.61%; }  /* hz-7-4 見本 1045,107,59x41 */
.p-hero__body > .--k2 { left: 38.38%; top: 15.32%; width: 0.98%; }  /* hz-27-1 見本 478,121,39x31 */
.p-hero__body > .--k3 { left: 25.70%; top: 15.86%; width: 1.25%; }  /* hz-8-2 見本 329,123,16x32 */
.p-hero__body > .--k4 { left: 18.52%; top: 17.18%; width: 2.58%; }  /* hz-8-1 見本 237,131,33x52 */
.p-hero__body > .--k5 { left: 21.56%; top: 16.38%; width: 2.34%; }  /* hz-8-3 見本 276,127,30x50 */
.p-hero__body > .--k6 { left: 40.31%; top: 21.90%; width: 0.94%; }  /* hz-27-2 見本 504,173,36x27 */
.p-hero__body > .--k7 { left: 86.43%; top: 22.41%; width: 1.59%; }  /* hz-7-2 見本 1099,177,35x45 */
.p-hero__body > .--k8 { left: 82.03%; top: 33.76%; width: 2.97%; }  /* hz-26-1 見本 1050,243,38x139 */
.p-hero__body > .--k9 { left: 90.64%; top: 46.58%; width: 7.56%; }  /* hz-28-1 見本 1154,368,109x108 */
.p-hero__body > .--k10 { left: 1.80%; top: 54.49%; width: 8.83%; }  /* hz-5-1 見本 23,423,113x97 */
.p-hero__body > .--k11 { left: 23.44%; top: 60.21%; width: 6.25%; }  /* hz-6-1 見本 300,453,80x91 */
.p-hero__body > .--k12 { left: 42.12%; top: 63.80%; width: 3.66%; }  /* hz-9-1 見本 539,504,47x46 */
.p-hero__body > .--k13 { left: 53.75%; top: 64.54%; width: 3.36%; }  /* hz-9-1 見本 688,508,43x46 */

.p-hero__body > .--flip > img { transform: scaleX(-1); }
/* 装飾は写真より手前。見本でも装飾が人物にかかっている箇所がある */
.p-hero__body > .p-hero__deco { z-index: 5 !important; }
@media (max-width: 47.99rem) {
  .p-hero__body > .--k2, .p-hero__body > .--k3, .p-hero__body > .--k5,
  .p-hero__body > .--k6, .p-hero__body > .--k7, .p-hero__body > .--k11,
  .p-hero__body > .--k13 { display: none; }
}

/* ヒーロー装飾：見本に最もよく重なる位置とサイズ（自動最適化）*/
.p-hero__body > .--k1 { left: 82.42%; top: 15.82%; width: 3.98%; }  /* hz-7-4 覆う率0.49 */
.p-hero__body > .--k2 { left: 37.97%; top: 15.32%; width: 0.86%; }  /* hz-27-1 覆う率0.92 */
.p-hero__body > .--k3 { left: 25.62%; top: 15.57%; width: 1.09%; }  /* hz-8-2 覆う率1.00 */
.p-hero__body > .--k4 { left: 18.67%; top: 18.99%; width: 2.19%; }  /* hz-8-1 覆う率0.85 */
.p-hero__body > .--k5 { left: 21.72%; top: 16.20%; width: 2.03%; }  /* hz-8-3 覆う率0.54 */
.p-hero__body > .--k6 { left: 39.92%; top: 21.90%; width: 0.78%; }  /* hz-27-2 覆う率0.95 */
.p-hero__body > .--k7 { left: 85.86%; top: 22.03%; width: 1.80%; }  /* hz-7-2 覆う率0.67 */
.p-hero__body > .--k8 { left: 81.56%; top: 33.04%; width: 2.58%; }  /* hz-26-1 覆う率0.60 */
.p-hero__body > .--k9 { left: 90.16%; top: 46.58%; width: 8.44%; }  /* sz-asterisks 覆う率1.00 */
.p-hero__body > .--k10 { left: 1.64%; top: 54.43%; width: 8.44%; }  /* hz-5-1 覆う率0.76 */
.p-hero__body > .--k11 { left: 23.67%; top: 61.65%; width: 5.39%; }  /* hz-6-1 覆う率0.60 */
.p-hero__body > .--k12 { left: 42.50%; top: 64.43%; width: 3.12%; }  /* hz-9-1 覆う率1.00 */
.p-hero__body > .--k13 { left: 53.83%; top: 65.44%; width: 2.89%; }  /* hz-9-1 覆う率0.69 */

/* ヒーロー装飾：見本の各装飾をどれだけ再現できるかで最適化した位置と大きさ */
.p-hero__body > .--k1 { left: 80.39%; top: 13.29%; width: 6.48%; }  /* hz-7-4 再現率0.86 */
.p-hero__body > .--k2 { left: 38.12%; top: 14.30%; width: 1.41%; }  /* hz-27-1 再現率0.62 */
.p-hero__body > .--k3 { left: 25.39%; top: 15.57%; width: 1.56%; }  /* hz-8-2 再現率1.00 */
.p-hero__body > .--k4 { left: 17.66%; top: 16.84%; width: 3.59%; }  /* hz-8-1 再現率0.84 */
.p-hero__body > .--k5 { left: 21.09%; top: 15.82%; width: 2.97%; }  /* hz-8-3 再現率0.76 */
.p-hero__body > .--k6 { left: 40.08%; top: 21.14%; width: 1.33%; }  /* hz-27-2 再現率0.66 */
.p-hero__body > .--k7 { left: 86.09%; top: 21.52%; width: 2.27%; }  /* hz-7-2 再現率0.70 */
.p-hero__body > .--k8 { left: 80.31%; top: 32.66%; width: 4.14%; }  /* hz-26-1 再現率0.42 */
.p-hero__body > .--k9 { left: 90.16%; top: 46.58%; width: 8.44%; }  /* sz-asterisks 再現率1.00 */
.p-hero__body > .--k10 { left: 1.33%; top: 54.18%; width: 8.83%; }  /* hz-5-1 再現率0.52 */
.p-hero__body > .--k11 { left: 22.03%; top: 57.47%; width: 8.75%; }  /* hz-6-1 再現率0.51 */
.p-hero__body > .--k12 { left: 42.11%; top: 63.80%; width: 3.67%; }  /* hz-9-1 再現率1.00 */
.p-hero__body > .--k13 { left: 51.80%; top: 63.42%; width: 4.69%; }  /* hz-9-1 再現率0.59 */

/* ヒーロー装飾：素材フォルダの図形を、見本に合うよう
   位置・大きさ・回転を総当たりで最適化して配置する */
.p-hero__body > .--k1 { left: 80.55%; top: 12.53%; width: 6.02%; rotate: -16deg; }  /* hz-7-4 再現率0.83 */
.p-hero__body > .--k2 { left: 37.50%; top: 14.81%; width: 2.89%; rotate: 40deg; }  /* hz-27-1 再現率0.76 */
.p-hero__body > .--k3 { left: 25.31%; top: 15.44%; width: 1.64%; }  /* hz-8-2 再現率0.98 */
.p-hero__body > .--k4 { left: 18.36%; top: 18.61%; width: 3.05%; rotate: 16deg; }  /* hz-8-1 再現率1.00 */
.p-hero__body > .--k5 { left: 21.48%; top: 15.70%; width: 3.05%; rotate: 40deg; }  /* hz-8-3 再現率0.80 */
.p-hero__body > .--k6 { left: 39.53%; top: 21.52%; width: 2.58%; rotate: 40deg; }  /* hz-27-2 再現率0.73 */
.p-hero__body > .--k7 { left: 85.78%; top: 21.27%; width: 2.58%; rotate: -8deg; }  /* hz-7-2 再現率0.71 */
.p-hero__body > .--k8 { left: 80.47%; top: 33.29%; width: 3.83%; }  /* hz-26-1 再現率0.40 */
.p-hero__body > .--k9 { left: 90.23%; top: 46.71%; width: 8.44%; }  /* sz-asterisks 再現率0.99 */
.p-hero__body > .--k10 { left: 0.86%; top: 52.78%; width: 10.39%; rotate: 8deg; }  /* hz-5-1 再現率0.72 */
.p-hero__body > .--k11 { left: 22.58%; top: 57.85%; width: 8.12%; rotate: -24deg; }  /* hz-6-1 再現率0.78 */
.p-hero__body > .--k12 { left: 41.80%; top: 63.29%; width: 3.98%; }  /* hz-9-1 再現率1.00 */
.p-hero__body > .--k13 { left: 53.05%; top: 63.80%; width: 4.38%; rotate: -40deg; }  /* hz-9-1 再現率0.57 */

/* =========================================================
   ヒーローの手描き装飾（最終）
   素材フォルダの図形を見本の角度に回した実物を、
   見本(1280x790)で最適化した位置と大きさに置く。
   ========================================================= */
.p-hero__body > .--k1 { left: 80.55%; top: 12.53%; width: 6.02%; }  /* hz-7-4 回転-16° */
.p-hero__body > .--k2 { left: 37.50%; top: 14.81%; width: 2.89%; }  /* hz-27-1 回転+40° */
.p-hero__body > .--k3 { left: 25.31%; top: 15.44%; width: 1.64%; }  /* hz-8-2 回転+0° */
.p-hero__body > .--k4 { left: 18.36%; top: 18.61%; width: 3.05%; }  /* hz-8-1 回転+16° */
.p-hero__body > .--k5 { left: 21.48%; top: 15.70%; width: 3.05%; }  /* hz-8-3 回転+40° */
.p-hero__body > .--k6 { left: 39.53%; top: 21.52%; width: 2.58%; }  /* hz-27-2 回転+40° */
.p-hero__body > .--k7 { left: 85.78%; top: 21.27%; width: 2.58%; }  /* hz-7-2 回転-8° */
.p-hero__body > .--k8 { left: 80.47%; top: 33.29%; width: 3.83%; }  /* hz-26-1 回転+0° */
.p-hero__body > .--k9 { left: 90.23%; top: 46.71%; width: 8.44%; }  /* sz-asterisks 回転+0° */
.p-hero__body > .--k10 { left: 0.86%; top: 52.78%; width: 10.39%; }  /* hz-5-1 回転+8° */
.p-hero__body > .--k11 { left: 22.58%; top: 57.85%; width: 8.12%; }  /* hz-6-1 回転-24° */
.p-hero__body > .--k12 { left: 41.80%; top: 63.29%; width: 3.98%; }  /* hz-9-1 回転+0° */
.p-hero__body > .--k13 { left: 53.05%; top: 63.80%; width: 4.38%; }  /* hz-9-1 回転-40° */

.p-hero__body > .p-hero__deco { z-index: 5 !important; }
@media (max-width: 47.99rem) {
  .p-hero__body > .--k2, .p-hero__body > .--k3, .p-hero__body > .--k5,
  .p-hero__body > .--k6, .p-hero__body > .--k7, .p-hero__body > .--k11,
  .p-hero__body > .--k13 { display: none; }
}

/* ヒーロー装飾：位置・大きさ・回転を1px刻みで詰めた最終値 */
.p-hero__body > .--k1 { left: 80.547%; top: 13.291%; width: 5.781%; }  /* hz-7-4 回転-22° 一致0.80 */
.p-hero__body > .--k2 { left: 37.344%; top: 15.063%; width: 3.125%; }  /* hz-27-1 回転+46° 一致0.93 */
.p-hero__body > .--k3 { left: 25.469%; top: 15.443%; width: 1.562%; }  /* hz-8-2 回転-6° 一致0.90 */
.p-hero__body > .--k4 { left: 18.516%; top: 19.241%; width: 2.891%; }  /* hz-8-1 回転+19° 一致0.89 */
.p-hero__body > .--k5 { left: 21.016%; top: 16.456%; width: 2.812%; }  /* hz-8-3 回転+34° 一致0.60 */
.p-hero__body > .--k6 { left: 39.297%; top: 21.519%; width: 2.812%; }  /* hz-27-2 回転+46° 一致0.88 */
.p-hero__body > .--k7 { left: 86.016%; top: 20.633%; width: 2.812%; }  /* hz-7-2 回転-14° 一致0.63 */
.p-hero__body > .--k8 { left: 80.469%; top: 32.532%; width: 4.141%; }  /* hz-26-1 回転+6° 一致0.34 */
.p-hero__body > .--k9 { left: 90.156%; top: 46.709%; width: 8.438%; }  /* sz-asterisks 回転+0° 一致0.93 */
.p-hero__body > .--k10 { left: 1.328%; top: 53.165%; width: 9.531%; }  /* hz-5-1 回転+5° 一致0.52 */
.p-hero__body > .--k11 { left: 22.891%; top: 57.089%; width: 7.500%; }  /* hz-6-1 回転-18° 一致0.78 */
.p-hero__body > .--k12 { left: 42.109%; top: 63.797%; width: 3.672%; }  /* hz-9-1 回転+0° 一致1.00 */
.p-hero__body > .--k13 { left: 53.359%; top: 63.038%; width: 4.062%; }  /* hz-9-1 回転-46° 一致0.55 */

/* =========================================================
   ヒーローの手描き装飾（最終）
   素材フォルダの図形を回転させずそのまま、
   支給見本(1280x790)で実測した枠に縦横比を保って収める。
   ========================================================= */
.p-hero__body > .--k1 { left: 81.64%; top: 14.26%; width: 4.61%; }  /* hz-7-4 見本枠 1045,107,59x41 */
.p-hero__body > .--k2 { left: 38.38%; top: 15.32%; width: 0.98%; }  /* hz-27-1 見本枠 478,121,39x31 */
.p-hero__body > .--k3 { left: 25.70%; top: 15.86%; width: 1.25%; }  /* hz-8-2 見本枠 329,123,16x32 */
.p-hero__body > .--k4 { left: 18.52%; top: 17.18%; width: 2.58%; }  /* hz-8-1 見本枠 237,131,33x52 */
.p-hero__body > .--k5 { left: 21.56%; top: 16.38%; width: 2.34%; }  /* hz-8-3 見本枠 276,127,30x50 */
.p-hero__body > .--k6 { left: 40.31%; top: 21.90%; width: 0.94%; }  /* hz-27-2 見本枠 504,173,36x27 */
.p-hero__body > .--k7 { left: 86.43%; top: 22.41%; width: 1.59%; }  /* hz-7-2 見本枠 1099,177,35x45 */
.p-hero__body > .--k8 { left: 82.03%; top: 33.76%; width: 2.97%; }  /* hz-26-1 見本枠 1050,243,38x139 */
.p-hero__body > .--k9 { left: 90.18%; top: 46.58%; width: 8.47%; }  /* sz-asterisks 見本枠 1154,368,109x108 */
.p-hero__body > .--k10 { left: 1.80%; top: 54.49%; width: 8.83%; }  /* hz-5-1 見本枠 23,423,113x97 */
.p-hero__body > .--k11 { left: 23.44%; top: 60.21%; width: 6.25%; }  /* hz-6-1 見本枠 300,453,80x91 */
.p-hero__body > .--k12 { left: 42.12%; top: 63.80%; width: 3.66%; }  /* hz-9-1 見本枠 539,504,47x46 */
.p-hero__body > .--k13 { left: 53.75%; top: 64.54%; width: 3.36%; }  /* hz-9-1 見本枠 688,508,43x46 */

.p-hero__body > .--flip > img { transform: scaleX(-1); }
.p-hero__body > .p-hero__deco { z-index: 5 !important; }
@media (max-width: 47.99rem) {
  .p-hero__body > .--k2, .p-hero__body > .--k3, .p-hero__body > .--k5,
  .p-hero__body > .--k6, .p-hero__body > .--k7, .p-hero__body > .--k11,
  .p-hero__body > .--k13 { display: none; }
}

/* =========================================================
   ヒーロー（PDF準拠・最終）
   支給見本のPDFから、各要素の座標・大きさを数値で読み取って移植した。
   画像からの推測ではないので、見本と完全に一致する。
     ページ 960x1080pt を 1280px 換算 → left = x/1280、top = y/790
   ========================================================= */
.p-hero__img > img { width: 100%; height: auto; display: block; }
.p-hero__img { position: absolute; margin: 0; line-height: 0; z-index: 4; }
.p-hero__body > .p-hero__deco { position: absolute; z-index: 5; pointer-events: none; }
.p-hero__body > .p-hero__deco > img { display: block; width: 100%; height: auto; }

.p-hero__img.--hp22 { left:  2.066%; top: -6.144%; width: 21.250%; }  /* ジャンプ */
.p-hero__img.--hp27 { left:  4.384%; top:  0.977%; width: 36.641%; }  /* 社員 */
.p-hero__img.--hp19 { left: 11.050%; top:  1.617%; width: 43.359%; }  /* 社員 */
.p-hero__img.--hp24 { left: 44.188%; top: 14.608%; width: 17.422%; }  /* アルミ形材 */
.p-hero__img.--hp21 { left: 61.788%; top:  4.184%; width: 22.891%; }  /* 恐竜 */
.p-hero__img.--hp23 { left: 83.886%; top: 22.491%; width: 19.375%; }  /* 地金 */
.p-hero__img.--hp28 { left:  0.428%; top: 38.090%; width: 11.562%; }  /* PTP包装 */
.p-hero__img.--hp25 { left: -8.468%; top: 40.753%; width: 44.844%; }  /* OREGON */
.p-hero__img.--hp26 { left: 36.737%; top: 49.781%; width: 23.203%; }  /* タオル */
.p-hero__img.--hp20 { left: 47.348%; top: 36.589%; width: 68.828%; }  /* 3人組 */

.p-hero__body > .--pd01 { left: 81.626%; top: 13.519%; width: 4.646%; }
.p-hero__body > .--pd02 { left: 37.262%; top: 15.195%; width: 4.951%; }
.p-hero__body > .--pd03 { left: 25.656%; top: 15.479%; width: 1.325%; }
.p-hero__body > .--pd04 { left: 18.512%; top: 16.470%; width: 5.019%; }
.p-hero__body > .--pd05 { left: 85.801%; top: 22.315%; width: 2.855%; }
.p-hero__body > .--pd06 { left: 81.982%; top: 25.705%; width: 5.345%; }
.p-hero__body > .--pd07 { left: 82.203%; top: 41.455%; width: 2.861%; }
.p-hero__body > .--pd08 { left: 90.097%; top: 46.565%; width: 8.568%; }
.p-hero__body > .--pd09 { left:  1.727%; top: 53.582%; width: 8.496%; }
.p-hero__body > .--pd10 { left: 23.406%; top: 57.285%; width: 6.336%; }
.p-hero__body > .--pd11 { left: 42.093%; top: 63.782%; width: 3.719%; }
.p-hero__body > .--pd12 { left: 53.741%; top: 64.109%; width: 3.382%; }

@media (max-width: 47.99rem) {
  .p-hero { aspect-ratio: 375 / 620 !important; }
  .p-hero__img.--hp27, .p-hero__img.--hp24,
  .p-hero__img.--hp23, .p-hero__img.--hp28 { display: none; }
  .p-hero__body > .--pd02, .p-hero__body > .--pd03,
  .p-hero__body > .--pd05, .p-hero__body > .--pd07,
  .p-hero__body > .--pd10, .p-hero__body > .--pd12 { display: none; }
}
/* 見本は3人組の画像をクリップして女性と男性を別々に見せていた。
   人物ごとに切り出したので、見本の実測位置にそのまま置く */
.p-hero__img.--hp27, .p-hero__img.--hp19 { display: none; }
.p-hero__img.--hp-woman { left: 17.711%; top: 22.329%; width:  8.945%; }  /* 見本 226.7,176.4 114.5 */
.p-hero__img.--hp-man   { left: 28.523%; top: 14.709%; width: 11.312%; }  /* 見本 365.1,116.2 144.8 */
@media (max-width: 47.99rem) {
  .p-hero__img.--hp-woman, .p-hero__img.--hp-man { display: none; }
}

/* ── 題字とマーキー：PDFから読んだ実測値 ──
   題字      58.4px / 「地方で」上端 y=343.7 ・「グローバルに働く！」x=377.3
   マーキー 128.8px / 上端 y=570.4
   ナビ      20.3px / ENTRY 23.0px                                        */
.p-hero__title {
  left: 29.48% !important;      /* 377.3 / 1280 */
  top: 43.51% !important;       /* 343.7 / 790 */
  translate: none !important;
  text-align: left !important;
  font-size: 4.5625vw !important;   /* 58.4px @1280 */
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
}
.p-hero__title span:first-child {
  font-size: 1em;
  margin-left: 13.7%;           /* 「地方で」は 552.4 から始まる */
}
.p-hero__loop { top: 72.20% !important; }   /* 570.4 / 790 */
.p-hero__loop-text p { font-size: 10.0625vw; }  /* 128.8px @1280 */
.l-header__nav-list--main a,
.l-header__nav-list--sub a { font-size: max(13px, 1.586vw) !important; }  /* 20.3px @1280 */
.l-header__nav-entry a { font-size: max(14px, 1.797vw) !important; }      /* 23.0px @1280 */
@media (min-width: 90rem) {
  .l-header__nav-list--main a,
  .l-header__nav-list--sub a { font-size: 20px !important; }
  .l-header__nav-entry a { font-size: 23px !important; }
}
@media (max-width: 47.99rem) {
  .p-hero__title {
    left: 6.4% !important; top: 40% !important;
    font-size: 8vw !important;
  }
  .p-hero__title span:first-child { margin-left: 0; }
  .p-hero__loop { top: 62% !important; }
  .p-hero__loop-text p { font-size: 26vw; }
}

/* ── 題字：PDFの実測に合わせる ──
   見本「グローバルに働く！」は 幅525.5px（58.4px×9字＝詰めなし）。
   既定の palt が効いて 483px に詰まっていたので解除する。
   「地方で」は 552.4 から始まる＝2行目の左端から 175.1px 右。 */
.p-hero__title {
  width: 41.05% !important;          /* 525.5 / 1280 */
  font-feature-settings: normal !important;
  letter-spacing: 0 !important;
}
.p-hero__title span { display: block; white-space: nowrap; }
.p-hero__title span:first-child { margin-left: 33.32% !important; }  /* 175.1 / 525.5 */

/* 装飾は参考サイトの振れ幅（%指定）のまま使う */
.p-hero__body > .p-hero__deco { animation: decoUpDown 3s steps(1) infinite; }
.p-hero__body > .--pd02,
.p-hero__body > .--pd05,
.p-hero__body > .--pd08,
.p-hero__body > .--pd11 { animation-name: decoUpDownReverse; animation-duration: 4s; }
@keyframes decoUpDown {
  0%, 100% { transform: translate(0) translateY(0); }
  50%      { transform: translate(10%) translateY(-40%); }
}
@keyframes decoUpDownReverse {
  0%, 100% { transform: translate(0) translateY(0); }
  50%      { transform: translate(-10%) translateY(40%); }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero__img, .p-hero__body > .p-hero__deco { animation: none !important; }
}

/* =========================================================
   写真の動き：内容に合わせてごく小さく
   人物は上下に、物は傾ける。振れ幅は2〜4px／1〜2度に留める。
   参考サイトと同じく steps(1) でカクッと切り替える。
   ========================================================= */
@keyframes mvHop {           /* 跳んでいる写真。着地→跳ねを2度 */
  0%, 100% { transform: translateY(0); }
  22%      { transform: translateY(-5px); }
  44%      { transform: translateY(0); }
  66%      { transform: translateY(-3px); }
  88%      { transform: translateY(0); }
}
@keyframes mvUp  { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(-3px); } }
@keyframes mvUp2 { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(3px); } }
@keyframes mvTilt  { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes mvTilt2 { 0%, 100% { transform: rotate(1deg); }    50% { transform: rotate(-1deg); } }

.p-hero__img.js-mv-hop   { animation: mvHop   5.2s steps(1) infinite; }
.p-hero__img.js-mv-up    { animation: mvUp    3.6s steps(1) infinite; }
.p-hero__img.js-mv-up2   { animation: mvUp2   4.2s steps(1) infinite; }
.p-hero__img.js-mv-tilt  { animation: mvTilt  4.8s steps(1) infinite; transform-origin: 50% 90%; }
.p-hero__img.js-mv-tilt2 { animation: mvTilt2 6.4s steps(1) infinite; transform-origin: 50% 90%; }
/* 同じ動きでも周期をずらして、揃って動かないようにする */
.p-hero__img.--hp23.js-mv-up    { animation-duration: 4.4s; }
.p-hero__img.--hp20.js-mv-up    { animation-duration: 5.8s; }
.p-hero__img.--hp25.js-mv-up2   { animation-duration: 5.4s; }
.p-hero__img.--hp28.js-mv-tilt  { animation-duration: 6s; }
.p-hero__img.--hp26.js-mv-tilt2 { animation-duration: 5s; }
.p-hero__img.--hp21.js-mv-tilt2 { animation-duration: 9s; }   /* 恐竜は大きいのでゆっくり */

@media (prefers-reduced-motion: reduce) { .p-hero__img { animation: none !important; } }

/* =========================================================
   2026-08-28 コメント反映：密度・Interview・ヘッダー・フッター
   既存の検証値を残しつつ、この最終ブロックで現行デザインを確定する。
   ========================================================= */

/* ヘッダーは丸みを残し、文字だけ一段小さくして余白を取り戻す */
@media (min-width: 80rem) {
  .l-header__nav-list--main a,
  .l-header__nav-list--sub a {
    font-size: clamp(13px, 1.05vw, 15px) !important;
  }
  .l-header__nav-entry a {
    font-size: clamp(14px, 1.14vw, 16px) !important;
  }
}

/* Information のカテゴリは端末幅にかかわらず白地＋青文字 */
.p-information__list-item-category {
  background: #FFFFFF !important;
  border-color: transparent !important;
  color: var(--hk-blue) !important;
}

/* About / Data：左4項目の間を詰め、透過オフィスをそのまま見せる */
.p-about-v2__building {
  overflow: visible;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.p-about-v2__building img {
  width: 140% !important;
  max-width: none;
  height: auto !important;
  margin-left: -20%;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
.p-about-v2__building figcaption { display: none !important; }

@media (min-width: 64rem) {
  .p-about-v2__data {
    row-gap: clamp(12px, 1.35vw, 22px);
    margin-top: clamp(78px, 7vw, 112px);
  }
  .p-about-v2__stat {
    grid-template-columns: minmax(92px, 29%) minmax(0, 1fr);
    gap: clamp(12px, 1.4vw, 22px);
    min-height: 148px;
  }
  .p-about-v2__stat.--s2,
  .p-about-v2__stat.--s4 {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 29%);
  }
  .p-about-v2__stat figure img { max-height: 158px; }
  .p-about-v2__stat div > p:last-child { margin-top: 9px; line-height: 1.72; }
  .p-about-v2__building {
    grid-row: 1 / span 4 !important;
    align-self: center;
    margin-top: 58px !important;
  }
  .p-about-v2__data-heading {
    grid-row: 1 !important;
    align-self: start;
    margin: 0 0 -70px !important;
  }
}

/* Data内の写真は数pxだけ、ゆっくりカクッと動かす */
@keyframes aboutNudgeUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes aboutNudgeDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@keyframes aboutNudgeJump {
  0%, 42%, 48%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-5px) rotate(-1deg); }
}
@keyframes aboutNudgeRotate {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
.p-about-v2__stat figure img.js-jiggle {
  animation: aboutNudgeUp 7.4s steps(1) infinite !important;
}
.p-about-v2__stat figure img.js-jiggle-r {
  animation: aboutNudgeDown 8.2s steps(1) infinite !important;
}
.p-about-v2__stat figure img.js-step-jump {
  animation: aboutNudgeJump 8.8s steps(1) infinite !important;
}
.p-about-v2__stat figure img.js-step-rotate {
  animation: aboutNudgeRotate 9.4s steps(1) infinite !important;
}

/* Discover の主見出しはPCで一行にする */
@media (min-width: 64rem) {
  .p-variety__title { white-space: nowrap; }
}

/* #03：参考と同じ「大きな横写真＋右の情報」へ整理 */
@media (min-width: 64rem) {
  .p-variety__rail {
    bottom: auto !important;
    height: 57% !important;
  }
  .p-variety > .p-variety__item.--c {
    width: min(1180px, calc(100vw - 128px)) !important;
    grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr) !important;
    gap: clamp(42px, 4.5vw, 68px) !important;
    margin: clamp(72px, 7vw, 108px) auto 0 !important;
    padding-bottom: 28px !important;
  }
  .p-variety > .--c .p-variety__item-figure img {
    aspect-ratio: 1.62 / 1;
    object-position: center 43%;
    border-radius: 30px !important;
    box-shadow: 0 22px 48px rgb(4 35 85 / .28) !important;
  }
  .p-variety__item.--c .p-variety__item-head {
    margin-bottom: 24px;
  }
  .p-variety__item.--c .p-variety__item-head::after {
    max-width: none;
  }
  .p-variety__item.--c .p-variety__item-title {
    margin-bottom: 18px;
    padding-bottom: 22px;
    font-size: clamp(34px, 3.2vw, 48px) !important;
  }
  .p-variety__item.--c .p-variety__item-sub {
    margin-bottom: 22px;
  }
  .p-variety__item.--c .p-variety__item-lead {
    max-width: 34em;
    line-height: 1.9 !important;
  }
  .p-variety__item.--c .p-variety__item-more {
    margin-top: 24px !important;
  }
}

/* タブレット・スマホでは縦HOKUSEIを本文に重ねない */
@media (max-width: 63.99rem) {
  .p-variety__pillar { display: none !important; }
  .p-variety__pillar-objs,
  .p-variety__rail { display: none !important; }
  .p-variety__inner {
    width: calc(100vw - 40px) !important;
    padding-left: 0 !important;
  }
  .p-about-v2__building { width: 100%; align-self: center; }
  .p-about-v2__building img { width: 124% !important; margin-left: -12%; }
}
@media (max-width: 47.99rem) {
  .p-variety__title {
    white-space: nowrap;
    font-size: clamp(25px, 7.2vw, 29px) !important;
    letter-spacing: .01em;
  }
}

/* Messageは代表メッセージ一つに絞り、中央で大きく見せる */
.p-message__items > .c-rail { display: none !important; }
@media (min-width: 64rem) {
  .p-message__items { display: block !important; }
  .p-message__item:only-of-type {
    width: min(980px, 88vw);
    margin-inline: auto;
    grid-template: "title title" "text image" / minmax(0, 1fr) minmax(300px, .82fr);
    column-gap: clamp(42px, 5vw, 76px);
  }
}
.p-message__item-name span { margin-right: .8em; padding-right: 0; }

/* フッターの採用ロゴとRECRUITを白で統一 */
.l-footer-body__nav-logo,
.l-footer-body__nav-logo * {
  color: #FFFFFF !important;
}
.l-footer-body__nav-logo img {
  filter: brightness(0) invert(1) !important;
}
.l-footer-body__nav-logo span {
  color: #FFFFFF !important;
}

/* =========================================================
   2026-08-28 追補：ヘッダー密度、切り抜き、HOKUSEI STORY
   ========================================================= */

/* 文字を縮めた分、PCヘッダーの白い枠も約58pxへ圧縮する */
@media (min-width: 80rem) {
  .l-header__body {
    min-height: 58px !important;
    margin-top: 12px;
    padding-block: 8px !important;
    padding-inline: clamp(22px, 1.75vw, 28px) !important;
  }
  .l-header__nav-list--sub a { padding-block: 5px !important; }
  .l-header__nav-entry a { min-height: 40px; padding-block: 6px !important; }
}

/* Data題字を写真の直上へ寄せる */
@media (min-width: 64rem) {
  .p-about-v2__data-heading { translate: 0 clamp(66px, 5.8vw, 88px); }
}

/* 切り抜き素材に付けていた下端フェードを全出現箇所で解除する */
img[src*="/cutout/"],
.p-iv-hero__faces img,
.p-iv-index__list img,
.l-footer-loop__char img {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* 代表メッセージは連番ではなく、意味が伝わるラベルにする */
.p-message__item-title--label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--hk-blue);
  border-radius: 999px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  color: var(--hk-blue);
  white-space: nowrap;
}

/* ── HOKUSEI Story hero ── */
.p-story-hero {
  position: relative;
  min-height: clamp(650px, 54vw, 790px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 28%, rgb(255 255 255 / .10), transparent 24%),
    linear-gradient(145deg, #2379D8 0%, var(--hk-blue) 58%, #0A3F8D 100%);
  color: #FFFFFF;
}
.p-story-hero__inner {
  position: relative;
  z-index: 3;
  padding-top: clamp(126px, 11vw, 164px);
  padding-bottom: 82px;
}
.p-story-hero__crumb {
  margin: 0;
  font-size: clamp(10px, .86vw, 13px);
  font-weight: 700;
  letter-spacing: .12em;
  color: rgb(255 255 255 / .86);
}
.p-story-hero__group {
  width: max-content;
  margin: clamp(28px, 3.1vw, 46px) 0 14px;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: clamp(11px, .92vw, 14px);
  font-weight: 700;
  letter-spacing: .30em;
  line-height: 1;
}
.p-story-hero__title { position: relative; width: max-content; margin: 0; }
.p-story-hero__title span {
  display: block;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: clamp(92px, 11.1vw, 170px);
  font-weight: 650;
  line-height: .78;
  letter-spacing: .015em;
}
.p-story-hero__title em {
  position: absolute;
  right: 3%;
  top: 52%;
  color: #FFE07A;
  font-family: "Caveat", cursive;
  font-size: clamp(78px, 9.4vw, 144px);
  font-weight: 700;
  line-height: .72;
  rotate: -7deg;
}
.p-story-hero__copy { margin: clamp(80px, 7.5vw, 112px) 0 0 clamp(70px, 7vw, 106px); }
.p-story-hero__copy-title { margin-bottom: 16px; font-size: clamp(22px, 2vw, 30px) !important; font-weight: 800; letter-spacing: .08em; }
.p-story-hero__copy p:last-child { margin: 0; font-size: clamp(13px, 1.08vw, 16px); font-weight: 600; line-height: 1.95; letter-spacing: .06em; }
.p-story-hero__figures { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.p-story-hero__figures img { position: absolute; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 12px 24px rgb(3 31 74 / .28)); }
.p-story-hero__figures .--story-f1 { right: 25%; bottom: -8%; z-index: 2; width: clamp(190px, 20vw, 286px); rotate: -2deg; animation: storyHeroFloatA 6.8s ease-in-out infinite; }
.p-story-hero__figures .--story-f2 { right: 9%; bottom: -7%; z-index: 3; width: clamp(210px, 18vw, 270px); rotate: 1deg; animation: storyHeroFloatB 7.4s ease-in-out -2.2s infinite; }
.p-story-hero__figures .--story-f3 { right: 1.5%; bottom: 6%; z-index: 1; width: clamp(176px, 17vw, 254px); opacity: .9; rotate: 3deg; animation: storyHeroFloatC 8.2s ease-in-out -4s infinite; }

@keyframes storyHeroFloatA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}
@keyframes storyHeroFloatB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(3px, -9px, 0); }
}
@keyframes storyHeroFloatC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.98); }
  50% { transform: translate3d(-5px, -5px, 0) scale(1.01); }
}

/* ── What's Hokusei / 現代の北前船 ── */
.p-story-whats {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 11% 30%, rgb(10 46 99 / .055) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgb(10 46 99 / .055) 0 2px, transparent 3px),
    #F7F3EC;
  background-size: 38px 38px, 46px 46px, auto;
  padding-block: clamp(86px, 8.7vw, 132px);
  color: #0A2E63;
}
.p-story-whats__inner {
  width: min(1240px, calc(100% - 80px));
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 0;
}
.p-story-whats__heading {
  position: relative;
  width: min(620px, 90%);
  margin: 0 auto clamp(30px, 3vw, 48px);
  padding: 27px 36px 24px;
  border: 2px solid #0A2E63;
  border-radius: 20px;
  text-align: center;
  background: rgb(255 255 255 / .76);
  box-shadow: 0 14px 36px rgb(10 46 99 / .06);
}
.p-story-whats__heading::before { content: ""; position: absolute; top: -11px; left: 68px; width: 50px; height: 20px; background: #F7F3EC; }
.p-story-whats__heading::after { content: "///"; position: absolute; top: -21px; left: 80px; color: #0A2E63; font-weight: 900; letter-spacing: 4px; rotate: -16deg; }
.p-story-whats__heading-en { margin: 0; font-family: "Caveat", cursive; font-size: clamp(38px, 3.8vw, 58px); font-weight: 700; line-height: 1; }
.p-story-whats__heading h2 { margin: 9px 0 0; font-size: clamp(18px, 1.55vw, 24px); letter-spacing: .16em; }
.p-story-whats__lead { max-width: 800px; margin: 0 auto clamp(70px, 6vw, 90px); font-size: clamp(14px, 1.05vw, 16px); font-weight: 650; line-height: 2.05; letter-spacing: .075em; text-align: center; }
.p-story-whats__lead strong { display: inline-block; margin-top: 5px; background: linear-gradient(transparent 72%, rgb(10 46 99 / .16) 72%); font-weight: 850; }

.p-story-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) 82px minmax(260px, .94fr) 82px minmax(0, .9fr);
  align-items: center;
  gap: 0;
  min-height: 410px;
  margin: 0 0 clamp(108px, 8vw, 126px);
  padding: 58px clamp(34px, 3.4vw, 52px) 70px;
  border: 2px solid #0A2E63;
  border-radius: 72px;
  background: rgb(255 255 255 / .72);
  box-shadow: 0 22px 58px rgb(10 46 99 / .065);
}
.p-story-flow::after { content: none; }
.p-story-flow__title { position: absolute; top: -32px; left: 50%; z-index: 2; display: grid; place-items: center; width: min(300px, 38%); min-height: 62px; border-radius: 999px; background: #0A2E63; color: #FFFFFF; font-size: clamp(22px, 2vw, 29px); font-weight: 850; letter-spacing: .2em; translate: -50% 0; }
.p-story-flow__source { display: grid; grid-template-rows: repeat(3, minmax(100px, 1fr)); align-items: stretch; }
.p-story-flow__source-item { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 14px; border-bottom: 1px dashed rgb(10 46 99 / .3); }
.p-story-flow__source-item:last-child { border-bottom: 0; }
.p-story-flow__source-item img { width: 116px; height: 104px; object-fit: contain; }
.p-story-flow p { margin: 0; }
.p-story-flow span { display: block; font-size: clamp(16px, 1.25vw, 19px); font-weight: 850; letter-spacing: .04em; }
.p-story-flow small { display: block; margin-top: 6px; font-size: 12px; font-weight: 650; color: rgb(10 46 99 / .6); }
.p-story-flow__connector { display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; align-self: stretch; padding-inline: 13px; }
.p-story-flow__connector i { position: relative; display: block; height: 0; border-top: 2px dashed rgb(10 46 99 / .72); }
.p-story-flow__connector i::after { content: ""; position: absolute; top: -6px; right: -1px; width: 9px; height: 9px; border-top: 2px solid #0A2E63; border-right: 2px solid #0A2E63; rotate: 45deg; }
.p-story-flow__connector.--result { display: block; align-self: center; }
.p-story-flow__ship { display: grid; grid-template-rows: auto 1fr auto; place-items: center; align-content: center; padding: 8px 4px; text-align: center; }
.p-story-flow__ship p { position: relative; z-index: 1; }
.p-story-flow__ship p::after { content: ""; display: block; width: 38px; height: 3px; margin: 9px auto 0; border-radius: 10px; background: #0A2E63; }
.p-story-flow__ship p small { margin: 0 0 4px; color: #0A2E63; font-family: var(--ff-en); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.p-story-flow__ship img { width: min(292px, 98%); height: 260px; margin-block: -16px -10px; object-fit: contain; }
.p-story-flow__ship em { display: inline-block; padding: 10px 20px; border: 2px solid rgb(10 46 99 / .24); border-radius: 999px; background: #FFFFFF; font-size: clamp(13px, 1vw, 15px); font-style: normal; font-weight: 800; line-height: 1.25; letter-spacing: .04em; }
.p-story-flow__destination { display: grid; justify-items: center; align-content: center; text-align: center; }
.p-story-flow__destination img { width: 170px; height: 176px; object-fit: contain; }
.p-story-flow__destination span { margin-top: -3px; font-size: clamp(19px, 1.55vw, 24px); }
.p-story-flow__destination small { font-size: 12px; }
.p-story-flow__solution { position: absolute; left: 50%; bottom: -47px; z-index: 2; display: grid; grid-template-columns: 98px 1fr; align-items: center; gap: 18px; width: min(560px, 58%); min-height: 94px; padding: 10px 34px; border: 1px solid rgb(10 46 99 / .22); border-radius: 999px; background: #FFFFFF; box-shadow: 0 12px 28px rgb(10 46 99 / .14); translate: -50% 0; }
.p-story-flow__solution img { width: 90px; height: 80px; object-fit: contain; }
.p-story-flow__solution span { font-size: clamp(20px, 1.8vw, 27px); letter-spacing: .08em; }
.p-story-flow__solution small { margin-top: 3px; font-size: 12px; }

.p-story-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.p-story-points li { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 380px; padding: 31px 30px 26px; border: 1px solid rgb(10 46 99 / .08); border-radius: 22px; background: rgb(255 255 255 / .94); box-shadow: 0 18px 44px rgb(10 46 99 / .075); text-align: center; transition: translate .35s ease, box-shadow .35s ease; }
.p-story-points li:hover { translate: 0 -6px; box-shadow: 0 24px 52px rgb(10 46 99 / .12); }
.p-story-points__no { margin: 0 0 10px; color: #0A2E63; font-family: var(--ff-en); font-size: clamp(30px, 2.45vw, 38px); font-weight: 850; letter-spacing: -.02em; }
.p-story-points h3 { margin: 0 0 16px; font-size: clamp(19px, 1.5vw, 23px); letter-spacing: .06em; }
.p-story-points li > p:not(.p-story-points__no) { margin: 0; font-size: clamp(14px, 1.05vw, 16px); font-weight: 650; line-height: 1.9; }
.p-story-points img { width: 164px; height: 150px; margin: 14px auto 0; object-fit: contain; }
.p-story-whats__more { display: flex; align-items: center; justify-content: center; gap: 14px; width: max-content; margin: clamp(36px, 4vw, 54px) auto 0; color: #0A2E63; font-family: var(--ff-en); font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.p-story-whats__more span { padding-bottom: 5px; border-bottom: 2px solid #0A2E63; }
.p-story-whats__more i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; background: #0A2E63; color: #FFFFFF; font-size: 20px; font-style: normal; transition: translate .25s ease; }
.p-story-whats__more:hover i { translate: 5px 0; }

/* ── 縦長楕円のポートレートを主役にしたインタビュー一覧 ── */
.p-member-v2 { position: relative; overflow: hidden; padding-block: clamp(80px, 9vw, 140px); background: #FFFFFF; color: #10243B; }
.p-member-v2__heading { margin-bottom: clamp(42px, 5vw, 74px); text-align: center; }
.p-member-v2__heading > p { margin: 0 0 10px; color: #0A2E63; font-family: var(--ff-en); font-size: 12px; font-weight: 800; letter-spacing: .24em; }
.p-member-v2__heading h2 { margin: 0; font-size: clamp(30px, 3.4vw, 52px); letter-spacing: .04em; }
.p-member-v2__heading span { display: block; margin-top: 14px; font-size: clamp(13px, 1vw, 15px); color: rgb(16 36 59 / .64); }
.p-member-v2__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.8vw, 44px); margin: 0; padding: 0; list-style: none; }
.p-member-v2__list a { display: block; color: inherit; text-align: center; }
.p-member-v2__circle { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 3 / 4; margin-top: clamp(26px, 2.5vw, 38px); overflow: visible; border-radius: 50%; }
.p-member-v2__circle.--red { background: #0A2E63; }
.p-member-v2__circle.--navy { background: #123E78; }
.p-member-v2__circle.--gold { background: #F2C653; }
.p-member-v2__circle.--sky { background: #76B8E9; }
.p-member-v2__circle::after { content: ""; position: absolute; inset: 12px; z-index: 1; border: 1px solid rgb(255 255 255 / .56); border-radius: inherit; }
.p-member-v2__circle img { position: absolute; left: 50%; bottom: -2%; z-index: 2; width: auto; height: 112%; max-width: none; translate: -50% 0; transform-origin: 50% 100%; object-fit: contain; object-position: bottom; animation: memberPortraitFloat 6.2s ease-in-out infinite; transition: scale .42s cubic-bezier(.22,1,.36,1), rotate .42s cubic-bezier(.22,1,.36,1), filter .42s ease; }
.p-member-v2__list li:nth-child(2) .p-member-v2__circle img { height: 111%; animation-delay: -1.6s; animation-duration: 6.8s; }
.p-member-v2__list li:nth-child(3) .p-member-v2__circle img { bottom: -3%; height: 108%; animation-delay: -3.4s; animation-duration: 7.1s; }
.p-member-v2__list li:nth-child(4) .p-member-v2__circle img { bottom: -4%; height: 114%; animation-delay: -4.8s; animation-duration: 6.6s; }
.p-member-v2__list a:hover .p-member-v2__circle img { scale: 1; rotate: -1.5deg; filter: drop-shadow(0 16px 14px rgb(3 31 74 / .24)); }
.p-member-v2__list li:nth-child(even) a:hover .p-member-v2__circle img { rotate: 1.5deg; }
.p-member-v2__list a:focus-visible .p-member-v2__circle img { scale: 1; translate: -50% -8px; filter: drop-shadow(0 16px 14px rgb(3 31 74 / .24)); }

@keyframes memberPortraitFloat {
  0%, 100% { translate: -50% 0; }
  48% { translate: -50% -8px; }
}
.p-member-v2__meta { display: block; min-height: 2.7em; margin-top: 18px; font-size: clamp(10px, .76vw, 12px); font-weight: 700; line-height: 1.45; color: rgb(16 36 59 / .56); }
.p-member-v2__list strong { display: block; margin-top: 4px; font-family: var(--ff-en); font-size: clamp(24px, 2.2vw, 34px); letter-spacing: .06em; }
.p-member-v2__list em { display: block; min-height: 3.1em; margin-top: 8px; font-style: normal; font-size: clamp(13px, .94vw, 15px); font-weight: 800; line-height: 1.55; }
.p-member-v2__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding-bottom: 5px; border-bottom: 1px solid #10243B; font-family: var(--ff-en); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.p-member-v2__more i { color: #0A2E63; font-size: 18px; font-style: normal; }

/* ── 個別インタビューページ ── */
.p-interview-detail { --iv-bg: #E63730; --iv-ink: #FFFFFF; --iv-circle: #F8D66F; background: #F7F3EC; color: #10243B; }
.p-interview-detail.--navy { --iv-bg: #123E78; --iv-circle: #77B8E9; }
.p-interview-detail.--gold { --iv-bg: #F1C653; --iv-ink: #10243B; --iv-circle: #E8443B; }
.p-interview-detail.--sky { --iv-bg: #69AFE2; --iv-ink: #10243B; --iv-circle: #123E78; }
.p-interview-detail__hero { min-height: clamp(650px, 54vw, 790px); padding-top: clamp(112px, 10vw, 150px); overflow: hidden; background: var(--iv-bg); color: var(--iv-ink); }
.p-interview-detail__hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr); align-items: center; gap: 50px; min-height: 570px; }
.p-interview-detail__back { position: absolute; top: 0; left: clamp(20px, 6.25vw, 96px); color: inherit; font-family: var(--ff-en); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.p-interview-detail__intro { padding-top: 48px; }
.p-interview-detail__label { margin: 0 0 20px; font-family: var(--ff-en); font-size: 12px; font-weight: 800; letter-spacing: .22em; opacity: .78; }
.p-interview-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.p-interview-detail__tags span { padding: 6px 13px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 800; }
.p-interview-detail__intro h1 { margin: 0; font-size: clamp(36px, 4.3vw, 64px); line-height: 1.35; letter-spacing: .03em; }
.p-interview-detail__name { margin: 22px 0 0; font-family: var(--ff-en); font-size: clamp(26px, 2.3vw, 36px); font-weight: 800; letter-spacing: .12em; }
.p-interview-detail__portrait { align-self: end; margin: 0; }
.p-interview-detail__portrait span { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--iv-circle); }
.p-interview-detail__portrait span::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgb(255 255 255 / .62); border-radius: 50%; }
.p-interview-detail__portrait img { position: absolute; left: 50%; bottom: -8%; width: auto; height: 110%; max-width: 120%; translate: -50% 0; object-fit: contain; }
.p-interview-detail.--gold .p-interview-detail__portrait img { height: 112%; bottom: -16%; }
.p-interview-detail__body { padding-block: clamp(70px, 8vw, 124px); }
.p-interview-detail__qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1250px; margin-inline: auto; }
.p-interview-detail__qa article { padding: clamp(26px, 3vw, 42px); border-radius: 18px; background: #FFFFFF; box-shadow: 0 12px 30px rgb(10 46 99 / .06); }
.p-interview-detail__q { display: flex; align-items: center; gap: 12px; margin: 0 0 18px !important; font-size: clamp(17px, 1.35vw, 21px) !important; font-weight: 800 !important; line-height: 1.5 !important; }
.p-interview-detail__q span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #E63730; color: #FFFFFF; font-family: var(--ff-en); font-size: 13px; }
.p-interview-detail__qa article > p:last-child { margin: 0; font-size: clamp(14px, 1vw, 16px); line-height: 2; }
.p-interview-detail__qa strong { font-weight: 800; background: linear-gradient(transparent 72%, #F1C653 72% 94%, transparent 94%); }
.p-interview-detail__nav { display: flex; justify-content: center; gap: 16px; padding-bottom: clamp(64px, 7vw, 108px); }
.p-interview-detail__nav a { min-width: 150px; padding: 15px 20px; border: 1px solid #123E78; border-radius: 999px; color: #123E78; font-size: 12px; font-weight: 800; text-align: center; }

@media (max-width: 63.99rem) {
  .p-story-hero { min-height: 730px; }
  .p-story-hero__inner { padding-top: 112px; }
  .p-story-hero__group { margin-left: 0; }
  .p-story-hero__title span { font-size: 15vw; }
  .p-story-hero__title em { font-size: 14vw; }
  .p-story-hero__copy { margin-left: 0; }
  .p-story-hero__figures .--story-f1 { right: 41%; width: 27%; }
  .p-story-hero__figures .--story-f2 { right: 19%; width: 29%; }
  .p-story-hero__figures .--story-f3 { right: 1%; bottom: 6%; width: 23%; }
  .p-story-flow { grid-template-columns: 1fr; gap: 24px; padding: 76px 34px 104px; border-radius: 48px; }
  .p-story-flow__connector { display: none; }
  .p-story-flow__source { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 14px; }
  .p-story-flow__source-item { grid-template-columns: 1fr; justify-items: center; padding: 12px; border: 0; text-align: center; }
  .p-story-flow__ship img { height: 220px; }
  .p-story-flow__destination img { height: 150px; }
  .p-story-flow__solution { width: min(540px, 76%); }
  .p-story-points { grid-template-columns: 1fr; }
  .p-member-v2__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-interview-detail__hero { min-height: 0; padding-bottom: 0; }
  .p-interview-detail__hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .p-interview-detail__portrait { width: min(520px, 72vw); margin: 0 auto -2%; }
  .p-interview-detail__qa { grid-template-columns: 1fr; }
}

@media (max-width: 47.99rem) {
  .p-story-hero { min-height: 680px; }
  .p-story-hero__inner { padding-top: 102px; }
  .p-story-hero__crumb { font-size: 9px; }
  .p-story-hero__group { margin: 28px 0 12px; font-size: 9px; }
  .p-story-hero__title { margin-top: 10px; }
  .p-story-hero__title span { font-size: 16.2vw; line-height: .9; }
  .p-story-hero__title em { top: 62%; font-size: 18vw; }
  .p-story-hero__copy { margin-top: 80px; }
  .p-story-hero__copy-title { font-size: 20px !important; }
  .p-story-hero__copy p:last-child { font-size: 12px; }
  .p-story-hero__figures .--story-f1 { right: 53%; bottom: -2%; width: 36%; }
  .p-story-hero__figures .--story-f2 { right: 25%; bottom: -3%; width: 37%; }
  .p-story-hero__figures .--story-f3 { right: 0; bottom: 5%; width: 30%; }
  .p-story-whats__heading { width: 100%; padding-inline: 18px; }
  .p-story-whats__lead br { display: none; }
  .p-story-flow { margin-bottom: 108px; padding: 72px 20px 110px; border-radius: 32px; }
  .p-story-flow::after { display: none; }
  .p-story-flow__title { width: 74%; font-size: 19px; }
  .p-story-flow__source { grid-template-columns: 1fr; }
  .p-story-flow__source-item { grid-template-columns: 92px 1fr; justify-items: initial; text-align: left; }
  .p-story-flow__source-item img { width: 92px; height: 86px; }
  .p-story-flow__ship img { height: 160px; }
  .p-story-flow__solution { grid-template-columns: 64px 1fr; gap: 10px; width: 88%; min-height: 82px; padding: 8px 18px; }
  .p-story-flow__solution img { width: 60px; height: 58px; }
  .p-story-flow__solution span { font-size: 16px; }
  .p-story-flow__solution small { font-size: 9px; }
  .p-member-v2__list { gap: 34px 14px; }
  .p-member-v2__meta { min-height: 4em; margin-top: 12px; font-size: 9px; }
  .p-member-v2__list strong { font-size: 23px; }
  .p-member-v2__list em { min-height: 4.8em; font-size: 12px; }
  .p-member-v2__more { font-size: 8px; letter-spacing: .08em; }
  .p-interview-detail__hero { padding-top: 96px; }
  .p-interview-detail__back { top: 0; }
  .p-interview-detail__intro { padding-top: 50px; }
  .p-interview-detail__intro h1 { font-size: 31px; }
  .p-interview-detail__portrait { width: 92vw; }
  .p-interview-detail__nav { flex-wrap: wrap; }
  .p-interview-detail__nav a { min-width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-story-hero__figures img,
  .p-member-v2__circle img {
    animation: none !important;
  }
}

/* ==========================================================
   Guideline / 募集要項
   ========================================================== */
.p-guideline {
  --guideline-blue: #1F6FD0;
  --guideline-cream: #F7F4ED;
  --guideline-ink: #10243B;
  --guideline-navy: #0A2E63;
  --guideline-navy-deep: #061F49;
  --guideline-gold: #F3C653;
  overflow: hidden;
  background: var(--guideline-blue);
  color: var(--guideline-ink);
}

.p-guideline__hero {
  position: relative;
  min-height: clamp(620px, 48vw, 730px);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 18%, rgb(255 255 255 / .30), transparent 29%),
    radial-gradient(circle at 84% 30%, rgb(169 225 255 / .26), transparent 27%),
    linear-gradient(138deg, #51A5ED 0%, #2F87DD 47%, #1768BE 100%);
  color: #FFFFFF;
}

.p-guideline__hero::before {
  content: "GUIDELINE";
  position: absolute;
  left: -1.5vw;
  bottom: -3.5vw;
  color: rgb(255 255 255 / .075);
  font-family: var(--ff-en);
  font-size: clamp(110px, 15vw, 230px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .8;
  white-space: nowrap;
}

.p-guideline__hero-inner {
  position: relative;
  z-index: 1;
  min-height: inherit;
  padding-top: clamp(116px, 9vw, 142px);
  padding-bottom: clamp(64px, 7vw, 102px);
}

.p-guideline__hero-inner::after {
  content: "RECRUITMENT  /  HOKUSEI PRODUCTS";
  position: absolute;
  top: clamp(126px, 9.5vw, 150px);
  right: 0;
  padding-bottom: 8px;
  border-bottom: 2px dotted rgb(255 255 255 / .58);
  font-family: var(--ff-en);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.p-guideline__breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.p-guideline__breadcrumb a {
  color: inherit;
}

.p-guideline__heading {
  position: relative;
  z-index: 2;
  width: min(650px, 70%);
  margin: clamp(54px, 5vw, 76px) auto 0;
  text-align: center;
}

.p-guideline__en,
.p-guideline__career-en {
  margin: 0 0 13px;
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .2em;
}

.p-guideline__heading h1 {
  margin: 0;
  font-size: clamp(52px, 4.7vw, 72px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .1em;
  text-shadow: 0 8px 22px rgb(3 31 74 / .12);
}

.p-guideline__heading h1::after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: 20px auto 0;
  border-radius: 99px;
  background: var(--guideline-gold);
}

.p-guideline__lead {
  margin: clamp(30px, 3vw, 42px) 0 0;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  line-height: 2;
}

.p-guideline__hero-figure {
  position: absolute;
  right: clamp(10px, 3vw, 46px);
  bottom: -22px;
  width: clamp(300px, 25vw, 390px);
  height: clamp(350px, 29vw, 455px);
  pointer-events: none;
}

.p-guideline__hero-orbit {
  position: absolute;
  right: 2%;
  bottom: 8%;
  width: 84%;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / .70);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 0 14px rgb(255 255 255 / .065),
    0 0 0 34px rgb(255 255 255 / .05);
}

.p-guideline__hero-person {
  position: absolute;
  bottom: 0;
  height: auto;
  filter: drop-shadow(0 16px 18px rgb(3 31 74 / .24));
}

.p-guideline__hero-person.--woman {
  left: 2%;
  z-index: 2;
  width: 52%;
  rotate: -3deg;
}

.p-guideline__hero-person.--man {
  right: 2%;
  width: 55%;
  rotate: 3deg;
}

.p-guideline__hero-spark {
  position: absolute;
  width: clamp(26px, 2.5vw, 40px);
}

.p-guideline__hero-spark.--s1 {
  top: 4%;
  left: 3%;
}

.p-guideline__hero-spark.--s2 {
  right: -1%;
  bottom: 23%;
}

.p-guideline__body {
  position: relative;
  padding-bottom: clamp(84px, 9vw, 138px);
  background:
    radial-gradient(circle at 8% 28%, rgb(255 255 255 / .11) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 63%, rgb(255 255 255 / .075) 0 2px, transparent 3px),
    linear-gradient(180deg, #1D69C7 0%, var(--guideline-blue) 58%, #175DB7 100%);
  background-size: 42px 42px, 52px 52px, auto;
}

.p-guideline__body-inner {
  width: min(1180px, calc(100% - 80px));
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 0;
}

.p-guideline__index {
  display: flex;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  margin: 0 auto clamp(26px, 3vw, 44px);
}

.p-guideline__index a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  padding: 12px 22px;
  border: 1px solid rgb(255 255 255 / .76);
  border-radius: 999px;
  background: rgb(3 31 74 / .16);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
}

.p-guideline__index span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--guideline-navy);
  font-family: var(--ff-en);
  font-size: 10px;
}

.p-guideline__card {
  position: relative;
  padding: clamp(44px, 6vw, 84px) clamp(30px, 7vw, 100px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .85);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 26px 64px rgb(3 31 74 / .18);
}

.p-guideline__card::before {
  content: "NEW GRADUATE";
  position: absolute;
  top: 18px;
  left: -10px;
  color: rgb(31 111 208 / .06);
  font-family: var(--ff-en);
  font-size: clamp(70px, 9vw, 132px);
  font-weight: 800;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.p-guideline__card-heading {
  position: relative;
  margin-bottom: 28px;
  text-align: center;
}

.p-guideline__card-heading p {
  margin: 0 0 8px;
  color: var(--guideline-blue);
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.p-guideline__card-heading h2 {
  margin: 0;
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 900;
  letter-spacing: .08em;
}

.p-guideline__card-heading h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: var(--guideline-blue);
}

.p-guideline__table {
  margin: 0;
}

.p-guideline__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 42px;
  padding: clamp(25px, 2.7vw, 38px) 0;
  border-bottom: 1px dashed #C5CBD3;
}

.p-guideline__row:last-child {
  border-bottom: 0;
}

.p-guideline__row dt,
.p-guideline__career-table dt {
  position: relative;
  padding-left: 22px;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 900;
  letter-spacing: .03em;
}

.p-guideline__row dt::before,
.p-guideline__career-table dt::before {
  content: "";
  position: absolute;
  top: .63em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--guideline-blue);
}

.p-guideline__row dd,
.p-guideline__career-table dd {
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 650;
  line-height: 1.9;
}

.p-guideline__row small,
.p-guideline__career-table small {
  font-size: .82em;
  font-weight: 600;
}

#new-graduate .p-guideline__row dt {
  font-size: clamp(16px, 1.2vw, 19px);
}

#new-graduate .p-guideline__row dd {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.95;
}

.p-guideline__flow {
  display: flex;
  gap: 44px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.p-guideline__flow li {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 102px;
  min-height: 58px;
  padding: 10px 16px;
  border: 1px solid #D4D7DB;
  border-radius: 999px;
  background: #F8F4ED;
  text-align: center;
  line-height: 1.35;
}

.p-guideline__flow li small {
  display: block;
  width: 100%;
  text-align: center;
}

.p-guideline__flow li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  color: var(--guideline-blue);
  translate: 0 -50%;
}

.p-guideline__career {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 0;
  margin-top: clamp(72px, 8vw, 120px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .72);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 26px 64px rgb(3 31 74 / .18);
  color: var(--guideline-ink);
}

.p-guideline__career-intro {
  position: relative;
  min-height: 100%;
  padding: clamp(46px, 4vw, 62px) clamp(34px, 3.5vw, 50px) 280px;
  overflow: hidden;
  background: linear-gradient(145deg, #2C78C6 0%, #1B63AD 50%, #0D477F 100%);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22);
}

.p-guideline__career-intro::after {
  content: "CAREER";
  position: absolute;
  left: -5px;
  bottom: 14px;
  color: rgb(255 255 255 / .095);
  font-family: var(--ff-en);
  font-size: clamp(64px, 7vw, 104px);
  font-weight: 800;
  letter-spacing: -.05em;
}

.p-guideline__career-en {
  margin-bottom: 12px;
}

.p-guideline__career-intro h2 {
  margin: 0 0 26px;
  font-size: clamp(36px, 3.5vw, 54px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .06em;
}

.p-guideline__career-intro > p:last-of-type {
  max-width: 330px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 2;
}

.p-guideline__career-intro img {
  position: absolute;
  bottom: -7px;
  left: 50%;
  z-index: 1;
  width: 205px;
  max-height: 280px;
  object-fit: contain;
  object-position: bottom;
  translate: -50% 0;
}

.p-guideline__career-table {
  margin: 0;
  padding: clamp(36px, 4.4vw, 64px);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--guideline-ink);
}

.p-guideline__career-table > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 26px;
  padding: 23px 0;
  border-bottom: 1px dashed #C9CDD2;
}

.p-guideline__career-table > div:last-child {
  border-bottom: 0;
}

.p-guideline__note {
  margin: 30px 0 0;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

.p-guideline__entry {
  padding: clamp(76px, 8vw, 120px) 0;
  background: var(--guideline-cream);
}

.p-guideline__entry-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(370px, .98fr);
  align-items: center;
  gap: clamp(36px, 5vw, 70px);
  min-height: 440px;
  max-width: 1120px;
  width: min(1120px, calc(100% - 80px));
  margin-inline: auto;
  padding: clamp(42px, 5vw, 70px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 12%, rgb(255 255 255 / .14), transparent 24%),
    radial-gradient(circle at 75% 90%, rgb(93 194 232 / .18), transparent 28%),
    linear-gradient(145deg, #2379D8 0%, var(--guideline-blue) 58%, #0A3F8D 100%);
  color: #FFFFFF;
  box-shadow: 0 28px 64px rgb(10 46 99 / .18);
}

.p-guideline__entry-inner::before {
  content: "ENTRY";
  position: absolute;
  right: -26px;
  bottom: -24px;
  color: rgb(255 255 255 / .07);
  font-family: var(--ff-en);
  font-size: clamp(100px, 13vw, 186px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .8;
  white-space: nowrap;
}

.p-guideline__entry-copy > p {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: #FFE07A;
  font-family: var(--ff-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
}

.p-guideline__entry-copy h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  font-size: clamp(32px, 3.3vw, 50px);
  font-weight: 900;
  line-height: 1.35;
}

.p-guideline__entry-copy span,
.p-guideline__entry-contact span {
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.9;
}

.p-guideline__entry-link {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(300px, 100%);
  margin-top: 28px;
  padding: 15px 18px 15px 22px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .32);
  background: #FFE07A;
  color: var(--guideline-navy);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgb(3 31 74 / .16);
}

.p-guideline__entry-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.p-guideline__entry-contact {
  position: relative;
  z-index: 2;
  min-height: 242px;
  padding: 30px 116px 30px 32px;
  border: 1px solid rgb(255 255 255 / .38);
  border-radius: 22px;
  background: rgb(255 255 255 / .105);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16);
  backdrop-filter: blur(7px);
}

.p-guideline__entry-contact p {
  margin: 0 0 10px;
  color: #FFE07A;
  font-size: 12px;
  font-weight: 900;
}

.p-guideline__entry-contact strong {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.6;
}

.p-guideline__entry-contact ul {
  display: grid;
  gap: 9px;
  margin: 17px 0 0;
  padding: 17px 0 0;
  border-top: 1px dashed rgb(255 255 255 / .4);
  list-style: none;
}

.p-guideline__entry-contact li {
  position: relative;
  padding-left: 20px;
  font-size: 12px;
  font-weight: 750;
}

.p-guideline__entry-contact li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: 1px;
  width: 8px;
  height: 5px;
  border-bottom: 2px solid #FFE07A;
  border-left: 2px solid #FFE07A;
  rotate: -45deg;
}

.p-guideline__entry-figure {
  position: absolute;
  right: 2.5%;
  bottom: -5px;
  z-index: 3;
  width: 178px;
  max-height: 286px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 14px 18px rgb(3 31 74 / .28));
  pointer-events: none;
}

.p-guideline + .p-sub-next,
.p-guideline .p-sub-next {
  background: var(--guideline-cream);
}

@media (max-width: 63.99rem) {
  .p-guideline__hero-figure {
    right: -2vw;
    width: 25vw;
    height: 35vw;
  }

  .p-guideline__row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 28px;
  }

  .p-guideline__career {
    grid-template-columns: 1fr;
  }

  .p-guideline__career-intro {
    min-height: 260px;
    padding: 46px 230px 46px 42px;
  }

  .p-guideline__career-intro img {
    right: 25px;
    bottom: -8px;
    left: auto;
    width: 170px;
    translate: 0;
  }
}

@media (max-width: 47.99rem) {
  .p-guideline__hero {
    min-height: 600px;
  }

  .p-guideline__hero-inner {
    padding-top: 104px;
    padding-bottom: 58px;
  }

  .p-guideline__breadcrumb {
    font-size: 10px;
  }

  .p-guideline__heading {
    width: 100%;
    margin-top: 62px;
  }

  .p-guideline__en {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .p-guideline__heading h1 {
    font-size: 42px;
  }

  .p-guideline__lead {
    margin-top: 42px;
    font-size: 13px;
    line-height: 2;
  }

  .p-guideline__hero-figure {
    right: -18px;
    bottom: 26px;
    width: 118px;
    height: 210px;
    opacity: .95;
  }

  .p-guideline__hero-spark {
    width: 23px;
  }

  .p-guideline__index {
    gap: 8px;
  }

  .p-guideline__body-inner {
    width: calc(100% - 40px);
  }

  .p-guideline__index a {
    justify-content: center;
    min-width: 0;
    width: 50%;
    padding: 10px 12px;
    font-size: 11px;
  }

  .p-guideline__index span {
    width: 25px;
    height: 25px;
    font-size: 8px;
  }

  .p-guideline__card {
    padding: 40px 24px 22px;
    border-radius: 14px;
  }

  .p-guideline__card-heading {
    margin-bottom: 12px;
  }

  .p-guideline__card-heading h2 {
    font-size: 32px;
  }

  .p-guideline__row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 26px 0;
  }

  #new-graduate .p-guideline__row dt {
    font-size: 16px;
  }

  #new-graduate .p-guideline__row dd {
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.8;
  }

  .p-guideline__flow {
    gap: 24px;
    margin-left: -22px;
  }

  .p-guideline__flow li {
    min-width: 74px;
    padding: 8px 7px;
    font-size: 11px;
  }

  .p-guideline__flow li:not(:last-child)::after {
    left: calc(100% + 8px);
  }

  .p-guideline__career {
    margin-top: 74px;
    gap: 28px;
  }

  .p-guideline__career-intro {
    min-height: 252px;
    padding: 34px 116px 34px 28px;
  }

  .p-guideline__career-intro h2 {
    font-size: 34px;
  }

  .p-guideline__career-intro > p:last-of-type {
    font-size: 12px;
    line-height: 1.9;
  }

  .p-guideline__career-intro img {
    right: -12px;
    width: 124px;
  }

  .p-guideline__career-table {
    padding: 20px 24px;
    border-radius: 14px;
  }

  .p-guideline__career-table > div {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 23px 0;
  }

  .p-guideline__career-table dd {
    padding-left: 22px;
    font-size: 13px;
    line-height: 1.8;
  }

  .p-guideline__note {
    font-size: 10px;
    text-align: left;
  }

  .p-guideline__entry {
    padding: 88px 0 58px;
  }

  .p-guideline__entry-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 24px 24px;
    border-radius: 18px;
    width: calc(100% - 40px);
  }

  .p-guideline__entry-copy h2 {
    font-size: 31px;
  }

  .p-guideline__entry-contact {
    min-height: auto;
    padding: 24px 92px 24px 24px;
  }

  .p-guideline__entry-figure {
    right: 3%;
    width: 94px;
    max-height: 158px;
  }
}

/* =========================================================
   2026-08-28 追補：Data写真の白フレーム／指定フッター素材
   ========================================================= */

/* 写真は角丸フレーム、透過素材は形状に沿う白い縁取りにする */
.p-about-v2__stat.--s1 figure img {
  box-sizing: border-box;
  border: 4px solid #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgb(10 46 99 / .16);
}
.p-about-v2__stat.--s2 figure img,
.p-about-v2__stat.--s4 figure img {
  filter:
    drop-shadow(3px 0 0 #FFFFFF)
    drop-shadow(-3px 0 0 #FFFFFF)
    drop-shadow(0 3px 0 #FFFFFF)
    drop-shadow(0 -3px 0 #FFFFFF)
    drop-shadow(0 12px 12px rgb(20 58 107 / .16));
}

/* 代表者の切り抜きは透明余白を含むため、要素自体も一段大きくする */
.p-about-v2__stat.--s4 figure img { max-height: 260px; }
@media (min-width: 64rem) {
  .p-about-v2__stat.--s4 figure img {
    max-width: 126%;
    max-height: 210px;
  }
}

/* ENTRY：指定されたアルミ素材2点を、カード右端で重なる静物構成にする */
.l-footer-body__cta-entry-people-decorate {
  width: clamp(142px, 38vw, 210px);
  height: clamp(150px, 40vw, 224px);
  right: 0;
  bottom: -2px;
}
.l-footer-body__cta-entry-people {
  position: absolute;
  width: auto;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 9px 12px rgb(10 46 99 / .19));
}
.l-footer-body__cta-entry-people.--profile {
  left: 0;
  bottom: 0;
  width: 54%;
  animation: stepRotate2 5s step-end infinite;
}
.l-footer-body__cta-entry-people.--ingots {
  right: -2%;
  bottom: 1%;
  width: 68%;
  animation: stepRotate 6s step-end 1s infinite;
}
.l-footer-body__cta-entry-people-svg {
  top: 1%;
  left: -4%;
  width: 23%;
}

/* マーキー：5点すべてを見せ、素材ごとの縦横比に合わせて配置する */
@media (min-width: 64rem) {
  .l-footer-body__cta-entry-people-decorate {
    width: clamp(180px, 15.2vw, 242px);
    height: clamp(164px, 13.6vw, 216px);
    right: .45vw;
    bottom: -2px;
  }

  .l-footer-loop__char {
    display: block;
    width: auto;
    bottom: .5vw;
    margin-bottom: 0;
    rotate: 0deg;
  }
  .l-footer-loop__char img {
    width: auto;
    object-fit: contain;
  }
  .l-footer-loop__char[data-item="01"] { left: 5%; }
  .l-footer-loop__char[data-item="01"] img { height: 9.4vw; }
  .l-footer-loop__char[data-item="02"] { left: 28%; }
  .l-footer-loop__char[data-item="02"] img { height: 9.4vw; }
  .l-footer-loop__char[data-item="03"] { left: 51%; }
  .l-footer-loop__char[data-item="03"] img { height: 12vw; }
  .l-footer-loop__char[data-item="04"] { left: 68%; }
  .l-footer-loop__char[data-item="04"] img { height: 12vw; }
  .l-footer-loop__char[data-item="05"] { left: 86%; }
  .l-footer-loop__char[data-item="05"] img { height: 12vw; }
}

/* =========================================================
   2026-08-28 追補：Discoverの連番化／Message強化／Footer拡大
   ========================================================= */

/* #01と#02を一本のステップとして見せる */
.p-variety__steps {
  position: relative;
  display: grid;
  gap: clamp(68px, 7vw, 104px);
  padding-left: clamp(36px, 4vw, 58px);
}
.p-variety__steps::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 12px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .72) 0 7px, transparent 7px 15px);
}
.p-variety__steps .p-variety__item-num {
  position: absolute;
  top: 14px;
  left: clamp(-66px, -4.9vw, -48px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(54px, 4.7vw, 68px);
  height: clamp(54px, 4.7vw, 68px);
  margin: 0;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--hk-blue);
  color: #FFFFFF !important;
  box-shadow: 0 0 0 8px #2476D5;
  font-size: clamp(16px, 1.4vw, 21px) !important;
  letter-spacing: -.04em;
}
.p-variety__steps .p-variety__item {
  position: relative;
  width: 100% !important;
  min-height: 390px;
  margin: 0 !important;
  padding: clamp(24px, 2.4vw, 36px) !important;
  border: 1px solid rgb(255 255 255 / .30) !important;
  border-radius: 32px;
  background: linear-gradient(135deg, rgb(255 255 255 / .10), rgb(255 255 255 / .035)) !important;
  box-shadow: 0 24px 56px rgb(4 37 91 / .18) !important;
}
.p-variety__steps .p-variety__item-text { position: static !important; }
.p-variety__steps .p-variety__item.--c {
  left: auto;
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  align-items: center;
  gap: clamp(42px, 5vw, 78px);
  min-height: 390px;
  overflow: visible;
  transform: none;
}
.p-variety__steps .p-variety__item.--c::after { display: none; }
.p-variety__steps .p-variety__item.--c .p-variety__item-figure {
  position: static;
  inset: auto;
  order: 2;
  overflow: hidden;
  border-radius: 24px;
}
.p-variety__steps .p-variety__item.--c .p-variety__item-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.46 / 1;
  border-radius: 24px !important;
  object-fit: cover;
  object-position: center 43%;
}
.p-variety__steps .p-variety__item.--c .p-variety__item-text {
  position: static;
  z-index: 2;
  order: 1;
  width: auto;
  padding: clamp(12px, 2vw, 28px) 0;
}
.p-variety__steps .p-variety__item.--c .p-variety__item-head { margin-bottom: 16px; }
.p-variety__steps .p-variety__item.--c .p-variety__item-title {
  margin-bottom: 0;
  padding-bottom: 18px;
  font-size: clamp(27px, 2.7vw, 41px) !important;
}

/* 代表メッセージを編集カードとして独立させ、余白を意匠として使う */
.p-message__item:only-of-type {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(42px, 4.6vw, 72px);
  border: 1px solid rgb(10 46 99 / .16);
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .98), rgb(244 248 253 / .96)),
    #FFFFFF;
  box-shadow: 0 28px 70px rgb(10 46 99 / .12);
}
.p-message__item:only-of-type::before {
  content: "MESSAGE";
  position: absolute;
  top: -0.28em;
  right: 22px;
  z-index: -1;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: clamp(72px, 9vw, 138px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  color: rgb(10 46 99 / .055);
  pointer-events: none;
}
.p-message__item:only-of-type::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  z-index: -2;
  width: clamp(120px, 12vw, 184px);
  aspect-ratio: 1;
  border: 2px solid var(--hk-gold);
  border-radius: 50%;
  opacity: .72;
}
.p-message__item-eyebrow {
  position: absolute;
  top: 24px;
  right: 34px;
  margin: 0;
  font-family: var(--ff-en, "Instrument Sans", sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .20em;
  color: var(--hk-blue);
}
.p-message__item:only-of-type .p-message__item-title {
  padding-bottom: 22px;
  border-bottom: 1px solid rgb(10 46 99 / .16);
}
.p-message__item:only-of-type .p-message__item-text {
  align-self: center;
  padding: clamp(22px, 2vw, 30px) clamp(20px, 2.2vw, 34px);
  border-left: 4px solid var(--hk-gold);
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, rgb(242 198 83 / .10), transparent 72%);
}
.p-message__item:only-of-type .p-message__item-subTtl {
  text-decoration-line: underline;
  text-decoration-color: rgb(242 198 83 / .64);
  text-decoration-thickness: .28em;
  text-underline-offset: -.12em;
  text-decoration-skip-ink: none;
}
.p-message__item:only-of-type .p-message__item-img::before {
  content: "";
  position: absolute;
  inset: 24px -18px -18px 22px;
  z-index: -1;
  border-radius: 22px;
  background: var(--hk-blue);
  rotate: 2.4deg;
}

@media (min-width: 64rem) {
  .p-message__item:only-of-type {
    width: min(1100px, 90vw);
    grid-template: "title title" "text image" / minmax(0, 1.05fr) minmax(320px, .82fr);
    column-gap: clamp(52px, 5.5vw, 84px);
  }

  /* 5素材を約2.5倍にし、透明部分を活かして重なりを許容する */
  .l-footer-loop {
    min-height: 38vw;
    padding-top: 30vw;
  }
  .l-footer-loop__char { bottom: .8vw; }
  .l-footer-loop__char[data-item="01"] { left: -4%; z-index: 2; }
  .l-footer-loop__char[data-item="01"] img { height: 23.5vw; }
  .l-footer-loop__char[data-item="02"] { left: 21%; z-index: 1; }
  .l-footer-loop__char[data-item="02"] img { height: 23.5vw; }
  .l-footer-loop__char[data-item="03"] { left: 52%; z-index: 3; }
  .l-footer-loop__char[data-item="03"] img { height: 30vw; }
  .l-footer-loop__char[data-item="04"] { left: 67%; z-index: 2; }
  .l-footer-loop__char[data-item="04"] img { height: 30vw; }
  .l-footer-loop__char[data-item="05"] { left: 84%; z-index: 1; }
  .l-footer-loop__char[data-item="05"] img { height: 30vw; }
}

@media (max-width: 63.99rem) {
  .p-variety__steps { padding-left: 34px; }
  .p-variety__steps .p-variety__item.--c { grid-template-columns: 1fr !important; }
  .p-variety__steps .p-variety__item.--c .p-variety__item-figure { order: 1; }
  .p-variety__steps .p-variety__item.--c .p-variety__item-text { order: 2; }
  .p-message__item-eyebrow { display: none; }
}

/* =========================================================
   2026-08-28 トップページ装飾監査
   見出しとの関係が曖昧な装飾を整理し、画像サイズも統一する。
   ========================================================= */

/* Information：縦レール上に紛れ込んでいた用途不明の矢印装飾を外す */
.p-information__heading-deco { display: none !important; }
.p-information__spark.--s1 { top: 15% !important; right: 5% !important; }
.p-information__spark.--s2 { right: 5.5% !important; bottom: 9% !important; }
@media (min-width: 48rem) {
  .p-information__heading { top: 94px !important; }
}

/* Business：3本線は見出し右上から外へ開く向きに固定 */
.p-initiative .c-heading { width: max-content; }
.p-initiative .c-heading__deco {
  top: -10px !important;
  right: -48px !important;
  width: 36px !important;
  rotate: -35deg !important;
  transform-origin: center;
}

/* Lifestyle / Food：商品がカード上部で主役になる大きさへ */
.p-initiative__card-items > li:nth-child(3) .p-initiative__card-figure img,
.p-initiative__card-items > li:nth-child(4) .p-initiative__card-figure img {
  max-width: 100% !important;
  max-height: 15.5vw !important;
  scale: 1.22;
  transform-origin: center;
}

/* Discover：各装飾を見出しの余白内へ収め、文字との重なりをなくす */
.p-variety__heading { width: max-content; }
.p-variety__heading .c-heading__deco {
  top: -8px !important;
  right: -48px !important;
  width: 34px !important;
  rotate: -18deg !important;
}
.p-variety__item-deco {
  top: 18px !important;
  right: 18px !important;
}
.p-variety__item-flag {
  display: none !important;
}

@media (max-width: 47.99rem) {
  .p-initiative__card-items > li:nth-child(3) .p-initiative__card-figure img,
  .p-initiative__card-items > li:nth-child(4) .p-initiative__card-figure img {
    max-height: 39vw !important;
    scale: 1.16;
  }
}

/* =========================================================
   2026-08-28 Footer visual：透明余白を除いた素材をヒーロー級に拡大
   全既存ルールより後方に置き、5素材の実寸を揃える。
   ========================================================= */
@media (min-width: 64rem) {
  .l-footer-loop {
    min-height: 29vw;
    padding-top: 24vw;
    overflow: hidden;
  }

  .l-footer-loop__char {
    bottom: 1.25vw;
    transform-origin: 50% 100%;
  }
  .l-footer-loop__char img {
    width: auto !important;
    height: auto !important;
    max-width: none;
    display: block;
  }

  .l-footer-loop__char[data-item="01"] { left: 2%; z-index: 2; }
  .l-footer-loop__char[data-item="01"] img { width: 16.5vw !important; }

  .l-footer-loop__char[data-item="02"] { left: 20%; z-index: 3; }
  .l-footer-loop__char[data-item="02"] img { width: 20vw !important; }

  .l-footer-loop__char[data-item="03"] { left: 42%; bottom: 2.25vw; z-index: 4; }
  .l-footer-loop__char[data-item="03"] img { width: 18vw !important; }

  .l-footer-loop__char[data-item="04"] { left: 61%; z-index: 2; }
  .l-footer-loop__char[data-item="04"] img { width: 17.5vw !important; }

  .l-footer-loop__char[data-item="05"] { display: block; left: 82%; bottom: 1.25vw; z-index: 5; }
  .l-footer-loop__char[data-item="05"] img { width: 15vw !important; }
}

/* =========================================================
   2026-08-29 Interview portraits：ヒーローと同じステップ動作
   滑らかに浮遊させず、静止と瞬間移動を交互に見せる。
   ========================================================= */
@keyframes memberPortraitStep {
  0%, 17%, 100% { translate: -50% 0; }
  18%, 34% { translate: calc(-50% + var(--member-step-x)) var(--member-step-y); }
  35%, 53% { translate: -50% -2px; }
  54%, 69% { translate: calc(-50% + var(--member-step-x-reverse)) var(--member-step-y-soft); }
  70%, 84% { translate: -50% 0; }
  85%, 91% { translate: calc(-50% + var(--member-step-x)) calc(var(--member-step-y) - 2px); }
  92%, 99% { translate: -50% 0; }
}

.p-member-v2__list li:nth-child(1) { --member-step-x: 3px; --member-step-x-reverse: -2px; --member-step-y: -7px; --member-step-y-soft: -4px; }
.p-member-v2__list li:nth-child(2) { --member-step-x: -3px; --member-step-x-reverse: 2px; --member-step-y: -6px; --member-step-y-soft: -3px; }
.p-member-v2__list li:nth-child(3) { --member-step-x: 2px; --member-step-x-reverse: -3px; --member-step-y: -8px; --member-step-y-soft: -4px; }
.p-member-v2__list li:nth-child(4) { --member-step-x: -2px; --member-step-x-reverse: 3px; --member-step-y: -6px; --member-step-y-soft: -3px; }

.p-member-v2__circle img {
  animation-name: memberPortraitStep !important;
  animation-timing-function: step-end !important;
  animation-iteration-count: infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .p-member-v2__circle img { animation: none !important; }
}

/* =========================================================
   2026-08-29 CEO MESSAGE：サイト全体と揃えた編集的なブルーカード
   文言・写真のカスタマイザー連携はそのまま、見せ方のみを再設計。
   ========================================================= */
.p-message {
  overflow: hidden;
  background:
    linear-gradient(180deg, #f4f8fd 0%, #ffffff 100%) !important;
}

.p-message__item:only-of-type {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(38px, 4.8vw, 76px) !important;
  border: 0 !important;
  border-radius: clamp(28px, 3.2vw, 50px) !important;
  color: #ffffff;
  background:
    radial-gradient(circle at 91% 12%, rgb(255 255 255 / .13) 0 2px, transparent 2.5px) 0 0 / 18px 18px,
    linear-gradient(132deg, #073b83 0%, #075db9 58%, #0879da 100%) !important;
  box-shadow: 0 32px 80px rgb(3 45 101 / .20) !important;
}

.p-message__item:only-of-type::before {
  content: "MESSAGE";
  top: auto;
  right: -0.035em;
  bottom: -0.20em;
  z-index: -1;
  font-size: clamp(88px, 13vw, 196px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.075em;
  color: rgb(255 255 255 / .075);
}

.p-message__item:only-of-type::after {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(24px, 4vw, 64px);
  bottom: auto;
  width: clamp(70px, 8vw, 124px);
  height: 8px;
  border: 0;
  border-radius: 0 0 999px 999px;
  background: var(--hk-gold);
  opacity: 1;
}

.p-message__item-eyebrow {
  top: clamp(28px, 3.2vw, 48px);
  right: clamp(30px, 4.5vw, 72px);
  color: rgb(255 255 255 / .68);
}

.p-message__item:only-of-type .p-message__item-title {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(22px, 2vw, 32px);
  border-bottom: 1px solid rgb(255 255 255 / .24);
}

.p-message__item-title--label {
  border-color: rgb(255 255 255 / .56) !important;
  color: #ffffff !important;
  background: rgb(255 255 255 / .08) !important;
  backdrop-filter: blur(6px);
}

.p-message__item:only-of-type .p-message__item-title--ttl {
  color: #ffffff !important;
}

.p-message__item:only-of-type .p-message__item-title--ttl::after {
  background: rgb(255 255 255 / .38) !important;
}

.p-message__item:only-of-type .p-message__item-text {
  position: relative;
  align-self: center;
  padding: clamp(28px, 3vw, 46px) clamp(26px, 3.3vw, 52px) !important;
  border: 1px solid rgb(255 255 255 / .22) !important;
  border-radius: clamp(20px, 2vw, 30px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgb(255 255 255 / .15), rgb(255 255 255 / .075)) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .20);
  backdrop-filter: blur(8px);
}

.p-message__item:only-of-type .p-message__item-text::before {
  content: "\201C";
  position: absolute;
  top: -0.30em;
  left: .18em;
  font-family: Georgia, serif;
  font-size: clamp(82px, 8vw, 126px);
  line-height: 1;
  color: var(--hk-gold);
  opacity: .95;
  pointer-events: none;
}

.p-message__item:only-of-type .p-message__item-subTtl {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(20px, 2vw, 30px);
  padding-top: 10px;
  color: #ffffff !important;
  text-decoration: none !important;
}

.p-message__item:only-of-type .p-message__quote { display: none; }

.p-message__item:only-of-type .p-message__item-text > p:not(.p-message__item-subTtl):not(.p-message__item-name) {
  color: rgb(255 255 255 / .84) !important;
}

.p-message .p-message__item-name {
  margin-top: clamp(24px, 2.4vw, 36px);
  color: #ffffff !important;
}

.p-message .p-message__item-name span {
  color: var(--hk-gold);
}

.p-message__item-img {
  position: relative;
  z-index: 1;
}

.p-message__item:only-of-type .p-message__item-img::before {
  inset: 26px -20px -20px 26px;
  border-radius: clamp(22px, 2.4vw, 34px);
  background: var(--hk-gold);
  opacity: .95;
  rotate: 1.6deg;
}

.p-message__item-img > img:not(.p-message__item-deco) {
  position: relative;
  z-index: 1;
  border: clamp(8px, .8vw, 12px) solid #ffffff !important;
  border-radius: clamp(22px, 2.4vw, 34px) !important;
  box-shadow: 0 26px 56px rgb(0 29 73 / .30) !important;
  rotate: -.8deg !important;
}

.p-message__item-deco {
  top: -18px;
  right: -14px;
  z-index: 3;
  width: clamp(38px, 4vw, 58px) !important;
}

@media (min-width: 64rem) {
  .p-message__item:only-of-type {
    width: min(1180px, 91vw);
    grid-template:
      "title title"
      "text image" / minmax(0, 1.08fr) minmax(330px, .76fr) !important;
    column-gap: clamp(48px, 5vw, 84px) !important;
    row-gap: clamp(38px, 3vw, 52px);
  }

  .p-message__item:only-of-type .p-message__item-title { margin-bottom: 0; }
}

@media (max-width: 63.99rem) {
  .p-message__item:only-of-type {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 7vw, 44px);
  }

  .p-message__item:only-of-type::before {
    right: -.04em;
    bottom: -.08em;
    font-size: clamp(72px, 24vw, 130px);
  }

  .p-message__item-eyebrow { display: none; }
  .p-message__item:only-of-type .p-message__item-title { grid-area: auto; margin: 0; }
  .p-message__item:only-of-type .p-message__item-text { grid-area: auto; }
  .p-message__item:only-of-type .p-message__item-img {
    grid-area: auto;
    width: min(100%, 430px);
    margin: 0 auto 12px;
  }
}

/* Mobile drawer final override: keep every menu label white on blue. */
@media (max-width: 79.99rem) {
  html.is-open .l-header__nav-list--main a,
  html.is-open .l-header__nav-list--main a .u-line__text,
  html.is-open .l-header__nav-list--sub a,
  html.is-open .l-header__nav-list--sub a .u-line__text {
    color: #ffffff !important;
  }

  html.is-open .l-header__nav-list--sub a {
    border-color: rgb(255 255 255 / .72) !important;
  }

  html.is-open .l-header__nav-list--main a:is(:hover, :focus-visible),
  html.is-open .l-header__nav-list--sub a:is(:hover, :focus-visible) {
    color: #ffffff !important;
    background: rgb(255 255 255 / .12);
  }
}