@charset "UTF-8";
/* =========================================================
   HASEGAWA GROUP — main.css
   デザインPDF(2604 PC/SP 0514)忠実再現
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
	--c-yellow: #FBE200;
	--c-yellow-2: #F7D800;
	--c-ink: #231815;         /* 本文スミ */
	--c-sumi: #22171B;        /* ABOUT背景 */
	--c-sumi-deep: #1B1311;   /* フッター */
	--c-blue: #3655EE;
	--c-blue-deep: #17246e;
	--c-white: #ffffff;
	--c-gray: #7c7c7c;
	--c-gray-2: #9a9a9a;
	--c-line: #e2e2e2;
	--c-line-dark: rgba(255,255,255,.28);

	/* 英語見出しのみ Unbounded。日本語は Noto Sans JP に統一。
	   （--f-mincho も互換のため残すが実体は Noto Sans JP）

	   Noto Sans JP が届くまでの代替書体を明示しておく。
	   単に sans-serif とすると Windows では MS Pゴシック等に落ちて見た目が大きく崩れる。
	   OS標準の游ゴシック / ヒラギノを先に指定しておけば、
	   Webフォント到着前でも本来のデザインに近い状態で読める。 */
	--f-jp-fallback: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	--f-en: "Unbounded", system-ui, sans-serif;
	--f-mincho: "Noto Sans JP", var(--f-jp-fallback);
	--f-gothic: "Noto Sans JP", var(--f-jp-fallback);
	--f-body: "Noto Sans JP", var(--f-jp-fallback);

	--container: 1300px;
	--pad: clamp(20px, 5vw, 90px);
	--header-h: 69px;

	--ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: ローディング／イントロ中はスクロールを止める（＝バーが消える）ため、
   解除した瞬間に本文幅が縮んでレイアウトが横にズレる。バーの領域を常に確保して防ぐ。 */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
	margin: 0;
	font-family: var(--f-body);
	color: var(--c-ink);
	background: #fff;
	line-height: 1.9;
	font-weight: 400;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
address { font-style: normal; }

/* ---------- 日本語の行末処理（禁則処理） ----------
   指定が無いとブラウザはどこでも折り返すため、
   スマホの狭い幅で「リノベーシ / ョン」「家 / づくり」のように
   語の途中で切れる。実測（390px）で多数発生していた。

   line-break: strict … 拗音・促音・長音符（ゃゅょっー）を行頭に置かない。
                        Safari(iOS) も対応しているので、これが土台になる。
   word-break: auto-phrase … 文節（自然な区切り）で折り返す。Chrome 119+。
                        非対応ブラウザは直前の normal にフォールバックする。 */
body {
	line-break: strict;
	word-break: normal;
	word-break: auto-phrase;
}
/* 見出しは行長を揃える（最終行が1文字だけ残るのを防ぐ）。
   text-wrap はブラウザが行分けを何度も試すためレイアウトコストが高い。
   本文を含む広い範囲にかけると初回描画が遅くなるので、
   DB由来で文節分割できない見出しだけに限定する。
   （テーマ内の固定コピーは .phrase で明示的に制御している） */
.pickup__headline, .col-card__title, .news-item__title {
	text-wrap: balance;
}

/* 文節のまとまり（hasegawa_phrases() が出力）。
   auto-phrase は Chrome 系限定なので、iOS Safari でも文節単位で
   折り返すために inline-block にする。
   幅が足りないときは span の中で通常通り折り返すので、横にはあふれない。 */
.phrase { display: inline-block; }
mark { background: var(--c-ink); color: var(--c-yellow); padding: 0 .12em; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: fixed; left: -999px; top: 0; z-index: 2000; }
.skip-link:focus { left: 10px; top: 10px; background:#fff; padding:8px 14px; }

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

/* ---------- Section common ---------- */
.section { position: relative; }
.sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px) clamp(14px, 2vw, 34px); }
.sec-head__en {
	font-family: var(--f-en);
	font-weight: 300;
	font-size: clamp(52px, 9.2vw, 150px);
	line-height: .95;
	letter-spacing: -.01em;
	color: var(--c-ink);
}
.sec-head__ja {
	font-family: var(--f-gothic);
	font-weight: 500;
	font-size: clamp(14px, 1.3vw, 21px);
	letter-spacing: .12em;
	color: var(--c-ink);
	white-space: nowrap;
}
.sec-head--onDark .sec-head__en { color: var(--c-yellow); }
.sec-head--onDark .sec-head__ja { color: var(--c-yellow); }
.sec-head--onYellow .sec-head__en { color: var(--c-ink); }
.sec-lead { margin-top: 22px; font-family: var(--f-gothic); font-size: clamp(14px,1.05vw,17px); color: var(--c-ink); letter-spacing: .06em; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 1000;
	height: var(--header-h);
	display: flex; align-items: center;
	/* 透過(最上部) / 隠れる(is-hidden) / 白背景固定(is-scrolled) の3状態を、
	   transform と background のトランジションでフェード＆スライドさせる。 */
	transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header__inner {
	width: 100%;
	/* 中央寄せの枠を外して全幅にし、ロゴを画面左端・ハンバーガーを画面右端に置く */
	max-width: none;
	margin-inline: 0;
	padding-inline: clamp(18px, 2.4vw, 44px);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-logo { display: flex; align-items: center; color: var(--c-ink); }
/* ロゴSVGはマスクで現在色(=ヘッダー文字色 ink)に着色。テーマが変わっても色追従する */
.site-logo__wordmark { display: block; width: clamp(168px,16vw,220px); aspect-ratio: 319.5 / 62.1; background: currentColor; -webkit-mask: var(--logo-header-mask, url(../img/logo-header.svg)) no-repeat left center / contain; mask: var(--logo-header-mask, url(../img/logo-header.svg)) no-repeat left center / contain; }
.brand-mark { width: 100%; height: auto; display: block; }

.global-nav__list { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 40px); }
.global-nav__list a {
	font-family: var(--f-gothic); font-weight: 500; font-size: 15px; letter-spacing: .06em;
	color: var(--c-ink); position: relative; padding: 6px 0;
}
.global-nav__list a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: currentColor; transition: width .3s var(--ease); }
.global-nav__list a:hover::after { width: 100%; }

.hamburger { width: 54px; height: 40px; display: grid; place-items: center; }
.hamburger__lines { display: block; width: 40px; height: 14px; position: relative; }
.hamburger__lines span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--c-ink); transition: .35s var(--ease); }
.hamburger__lines span { transform-origin: center; }
.hamburger__lines span:nth-child(1) { top: 2px; }
.hamburger__lines span:nth-child(2) { bottom: 2px; }
/* メニューを開くと2本の線が中央でクロスして✕になる */
.hamburger[aria-expanded="true"] .hamburger__lines span { background: #fff; }
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(1) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(2) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }
/* 開いている間はハンバーガー(ヘッダー)をドロワーより前面に出す */
body.drawer-open .site-header { z-index: 1300; }

/* header state on scroll */
.site-header.is-scrolled { transform: translateY(0); background: rgba(255,255,255,.94); box-shadow: 0 1px 20px rgba(0,0,0,.06); backdrop-filter: blur(6px); }
.site-header.is-hidden { transform: translateY(-100%); }
body.drawer-open .site-header { opacity: 0; pointer-events: none; }

/* =========================================================
   DRAWER
   ========================================================= */
.drawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.15); opacity: 0; transition: opacity .4s var(--ease); }
.drawer__panel {
	position: absolute; inset: 0; background: var(--c-yellow);
	transform: translateX(100%); transition: transform .55s var(--ease);
	overflow-y: auto;
}
.drawer.is-open { visibility: visible; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: translateX(0); }
/* 黄色が右から画面全体にスライドし終えてから中身を表示。閉じる時は中身を消し、黄色が右へ戻る */
.drawer__inner { opacity: 0; transition: opacity .3s var(--ease); }
.drawer.is-open .drawer__inner { opacity: 1; transition-delay: .45s; }

/* ✕ はハンバーガー（幅54・ヘッダー高の中央・右padding-inline位置）とぴったり同じ位置に置く */
.drawer__close { position: absolute; top: 0; right: clamp(18px,2.4vw,44px); width: 54px; height: var(--header-h); font-size: 32px; color: var(--c-ink); display:grid; place-items:center; }
.drawer__close .fa-xmark { font-weight: 300; }
.drawer__inner { max-width: 1180px; margin-inline: auto; padding: clamp(90px,12vh,150px) var(--pad) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,90px); align-items: start; }
/* ドロワーのロゴはフッターと同じ logo.svg ワードマーク。黄色背景に映えるよう ink 色で着色 */
.drawer__logo { display: block; color: var(--c-ink); }
.drawer__logo-wordmark { display: block; width: clamp(240px,30vw,340px); aspect-ratio: 319.4 / 76.3; background: currentColor; -webkit-mask: var(--logo-mask, url(../img/logo.svg)) no-repeat left center / contain; mask: var(--logo-mask, url(../img/logo.svg)) no-repeat left center / contain; }

/* 左カラム（資料請求・来場予約・SNS・規約リンク）を1セルにまとめ、
   右のナビ（アコーディオン）が展開しても押されないようにする。 */
.drawer__side { grid-column: 1 / 2; }
.drawer__cta { margin-top: 30px; display: grid; gap: 16px; }
.drawer-nav { grid-column: 2 / 3; grid-row: 1 / 3; align-self: start; }
/* ドロワーの項目（リンク・アコーディオン行 共通）。フォントはフッターナビに合わせる */
/* トップ項目（直下のリンク・アコーディオン行のみ）。サブリンクには適用せず二重線を防ぐ */
.drawer-nav__list > li > a, .drawer-nav__row {
	position: relative; overflow: hidden; z-index: 0; isolation: isolate;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	width: 100%; border: 0; border-bottom: 1px solid rgba(0,0,0,.85);
	color: var(--c-ink);
}
.drawer-nav__list > li > a { padding: 20px 6px; background: none; text-align: left; font-family: var(--f-gothic); font-weight: 500; font-size: clamp(15px,1.2vw,18px); letter-spacing: .08em; white-space: nowrap; }
.drawer-nav__list > li:first-child > a,
.drawer-nav__list > li:first-child .drawer-nav__row { border-top: 1px solid rgba(0,0,0,.85); }
/* アコーディオン行：ラベル（クリックで遷移）＋ ＋ボタン（クリックで開閉） */
.drawer-nav__link { flex: 1 1 auto; position: relative; z-index: 1; display: flex; align-items: center; padding: 20px 6px; font-family: var(--f-gothic); font-weight: 500; font-size: clamp(15px,1.2vw,18px); letter-spacing: .08em; color: inherit; white-space: nowrap; }
.drawer-nav__toggle { flex: 0 0 auto; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 54px; padding: 20px 6px; border: 0; background: none; cursor: pointer; color: inherit; }
.drawer-nav__list > li > a > span, .drawer-nav__link > span { position: relative; z-index: 1; white-space: nowrap; }
.drawer-nav__list > li > a i, .drawer-nav__toggle i { position: relative; z-index: 1; font-size: 18px; transition: transform .3s var(--ease); }
/* 左から ink 反転（複製レイヤーは使わず ::before をスケール。高さに影響しない） */
.drawer-nav__list > li > a::before, .drawer-nav__row::before { content:""; position:absolute; inset:0; z-index:0; background: var(--c-ink); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); pointer-events:none; }
.drawer-nav__list > li > a:hover::before, .drawer-nav__row:hover::before { transform: scaleX(1); }
.drawer-nav__list > li > a:hover, .drawer-nav__row:hover .drawer-nav__link, .drawer-nav__row:hover .drawer-nav__toggle { color: var(--c-yellow); }
/* アコーディオン：＋ が開くと × に回転 */
.drawer-nav__item.has-children .drawer-nav__toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.drawer-nav__sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.drawer-nav__item.is-open .drawer-nav__sub { max-height: 560px; }
.drawer-nav__sub a { display:flex; justify-content:space-between; padding: 13px 6px 13px 22px; border-bottom: 1px solid rgba(0,0,0,.22); font-size: clamp(13px,1vw,15px); color: var(--c-ink); }
.drawer-nav__sub li:last-child a { border-bottom: 0; }
/* ドロワーのSNS・規約リンク（黄背景に映える濃色系） */
.drawer-social { grid-column: 1 / 2; display: flex; gap: 14px; margin-top: 26px; list-style: none; padding: 0; }
.drawer-social a { width: 46px; height: 46px; border-radius: 50%; background: var(--c-sumi); color: var(--c-yellow); display: grid; place-items: center; font-size: 19px; transition: opacity .3s var(--ease); }
.drawer-social a:hover { opacity: .7; }
.drawer-legal { grid-column: 1 / 2; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; list-style: none; padding: 0; }
.drawer-legal a { font-family: var(--f-gothic); font-size: 13px; color: rgba(34,23,27,.72); }
.drawer-legal a:hover { color: var(--c-ink); }

/* CTA bars (drawer) */
.cta-bar { display: flex; align-items: center; gap: 18px; padding: 24px 30px; border: 1.5px solid var(--c-ink); }
.cta-bar__ja { font-family: var(--f-gothic); font-weight: 700; font-size: 19px; letter-spacing: .14em; }
.cta-bar__en { font-family: var(--f-en); font-weight: 400; font-size: 13px; letter-spacing: .08em; }
.cta-bar i { margin-left: auto; font-size: 18px; }
.cta-bar--dark { background: var(--c-sumi); color: var(--c-yellow); border-color: var(--c-sumi); }
.cta-bar--outline { background: transparent; color: var(--c-ink); }
.cta-bar:hover { opacity: .85; }

/* =========================================================
   BUTTONS
   ========================================================= */
/* ===== ボタン共通 =====
   ホバー時：境界線・元の文字色はそのまま。黄色背景＋黒文字の複製レイヤー（.btn__fill）を
   左からクリップで見せることで、「黄色が乗った部分から文字が黒くなる」動きを同期させる。
   .btn__fill は JS（main.js）が各ボタンの中身を複製して生成する。 */
.btn-outline, .btn-fill, .btn-sweep {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
	font-family: var(--f-en); font-weight: 400; letter-spacing: .04em;
	position: relative; overflow: hidden; isolation: isolate;
}
.btn-outline { min-width: 300px; padding: 20px 30px; border: 1px solid currentColor; font-size: 17px; color: var(--c-ink); }
.btn-fill    { min-width: 300px; padding: 22px 32px; background: var(--c-sumi); color: #fff; font-size: 17px; }
.btn-sweep   { min-width: 240px; padding: 18px 26px 18px 58px; border: 1px solid var(--c-ink); font-size: 16px; color: var(--c-ink); gap: 34px; }
.btn-outline--light { color: #fff; border-color: rgba(255,255,255,.85); }
.btn-outline--yellow { color: var(--c-yellow); border-color: var(--c-yellow); }

.btn__fill {
	/* inset:-1px で枠(border 1px)まで覆い、枠との境界に地色が覗く細い線を防ぐ */
	position: absolute; inset: -1px; z-index: 2; pointer-events: none;
	display: flex; align-items: center; justify-content: space-between;
	background: var(--c-yellow); color: var(--c-sumi);
	clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease);
}
.btn-outline .btn__fill { padding: 20px 30px; gap: 40px; }
.btn-fill .btn__fill    { padding: 22px 32px; gap: 40px; }
.btn-sweep .btn__fill   { padding: 18px 26px 18px 58px; gap: 34px; }
.btn-outline:hover .btn__fill,
.btn-fill:hover .btn__fill,
.btn-sweep:hover .btn__fill { clip-path: inset(0 0 0 0); }

/* 矢印：横線を従来の約2.5倍長くしたカスタム矢印（FontAwesomeグリフは使わず線＋矢じりで描く）。
   ホバーでは動かさない。 */
/* ページ内の右向き矢印(fa-arrow-right-long)は、ボタン内と同じ「線＋斜線1本」の形状に統一。
   em ベースで描くので文字サイズに追従。ボタン内は下の px 指定が後勝ちで優先される。 */
i.fa-arrow-right-long {
	position: relative; display: inline-block; width: 2.6em; height: 1em; font-size: inherit; vertical-align: -0.12em;
}
i.fa-arrow-right-long::before {
	content: "" !important; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px;
	background: currentColor; transform: translateY(-50%);
}
i.fa-arrow-right-long::after {
	content: ""; position: absolute; right: 0; top: 50%; width: .5em; height: 1.5px;
	background: currentColor; transform-origin: right center; transform: translateY(-50%) rotate(42deg);
}

.btn-outline i, .btn-fill i, .btn-sweep i {
	position: relative; display: inline-block; flex: 0 0 auto; width: 52px; height: 10px; font-size: 0;
}
.btn-outline i::before, .btn-fill i::before, .btn-sweep i::before {
	content: "" !important; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px;
	background: currentColor; transform: translateY(-50%);
}
/* 矢じりは斜線1本のみ。横線の右端(先端)から下方向へ伸びる（上下反転）。 */
.btn-outline i::after, .btn-fill i::after, .btn-sweep i::after {
	content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 1.5px;
	background: currentColor; transform-origin: right center;
	transform: translateY(-50%) rotate(42deg);
}

/* =========================================================
   FV / HERO
   ========================================================= */
/* ファーストビューは1画面(100vh)に収め、黄色:動画 = 3:7（30vh:70vh）にする */
.fv { position: relative; background: var(--c-yellow); overflow: hidden; height: 100vh; }
.fv__bg { position: absolute; left: 0; right: 0; bottom: 0; top: calc(34vh + 10px); z-index: 0; }
.fv__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.fv__bg-tint {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(54,85,238,.72) 0%, rgba(40,64,200,.66) 45%, rgba(20,30,90,.72) 100%),
	            radial-gradient(120% 80% at 50% 0%, rgba(80,110,255,.35), transparent 60%);
	mix-blend-mode: normal;
}
.fv__wordmark-wrap { position: relative; z-index: 2; height: 34vh; min-height: 210px; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 clamp(10px,2.2vh,26px); overflow: hidden; }
.fv__wordmark {
	font-family: var(--f-en); font-weight: 400; color: var(--c-ink);
	font-size: 13.3vw; line-height: .8; letter-spacing: -.015em; white-space: nowrap;
	transform: translateY(0); will-change: transform;
}
.fv__body { position: relative; z-index: 2; width: 100%; max-width: calc(var(--container) + var(--pad) * 2); margin-inline: auto; padding: clamp(22px,3.4vh,48px) var(--pad) clamp(32px,5.5vh,72px); height: 66vh; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.fv__catch { font-family: var(--f-mincho); font-weight: 600; font-size: clamp(46px, 6vw, 104px); line-height: 1.14; color: #fff; letter-spacing: .04em; }
.fv__catch .u-underline { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: .04em; }
.fv__en { margin-top: 14px; font-family: var(--f-en); font-weight: 300; font-size: clamp(18px,1.9vw,32px); line-height: 1.25; color: #fff; letter-spacing: .02em; }
/* キャッチ（雪国の暮らしを豊かに）は、リード文より上の空間で縦中央に置く */
.fv__catch-wrap { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.fv__lead { margin-top: auto; }
/* ヒーローの「HASEGAWAについて」ボタンは文字を中央揃えにする */
.fv__lead .btn-outline,
.fv__lead .btn-outline .btn__fill { justify-content: center; }

/* ヒーロー右側のスクロール誘導。縦書き「SCROLL」＋線の中を白いセグメントが下へ流れる */
.fv__scroll { position: absolute; right: clamp(16px,2.2vw,40px); bottom: 0; z-index: 3;
	display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; pointer-events: none; }
.fv__scroll-text { writing-mode: vertical-rl; font-family: var(--f-en); font-weight: 400;
	font-size: 12px; letter-spacing: .34em; text-indent: .34em; }
.fv__scroll-line { position: relative; width: 1px; height: clamp(56px,9vh,96px); background: rgba(255,255,255,.32); overflow: hidden; }
.fv__scroll-line::after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 45%;
	background: #fff; transform: translateY(-100%); animation: fvScroll 1.9s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes fvScroll { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(230%); } }
.fv__lead p { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(14px,1.05vw,17px); line-height: 2.0; color: #fff; letter-spacing: .05em; }
.fv__lead .btn-outline { margin-top: clamp(20px,2.6vh,38px); }

/* =========================================================
   COLUMN
   ========================================================= */
.column { padding-block: clamp(80px,11vh,150px); background: #fff; }
/* COLUMN 見出し行：左に見出し、右に VIEW ALL ボタン */
.column__head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px,2vw,34px); flex-wrap: wrap; }
.column__viewall { min-width: clamp(200px,20vw,280px); }
.column__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(30px,4vw,66px); margin-top: clamp(36px,4vw,60px); align-items: start; }

/* PICK UP big card */
.pickup__card { position: relative; display: block; aspect-ratio: 8 / 5; background: #2c2c2e; overflow: hidden; color: #fff; }
/* ピックアップ用サムネイルをカード全面に表示（話者名・肩書・カードタイトルの重ねは廃止） */
.pickup__media { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.pickup__more { position: absolute; right: 0; bottom: 0; z-index: 4; display:inline-flex; align-items:center; gap: 20px; background:#fff; color: var(--c-ink); padding: 16px 26px; font-family: var(--f-en); font-size: 15px; border: 1px solid var(--c-ink); overflow: hidden; isolation: isolate; }
.pickup__more .btn__fill { justify-content: flex-start; gap: 20px; padding: 16px 26px; }
.pickup__more i { transition: transform .3s var(--ease); }
.pickup__card:hover .pickup__more i { transform: translateX(6px); }

.pickup__meta { margin-top: 30px; }
.pickup__meta-head { display:flex; align-items:center; gap: 20px; }
.tag { display:inline-block; font-family: var(--f-en); font-size: 14px; letter-spacing:.1em; padding: 6px 16px; }
.tag--pickup { background: var(--c-sumi); color:#fff; }
.pickup__meta time { font-family: var(--f-en); font-size: 15px; color: var(--c-ink); }
.pickup__headline { margin-top: 20px; font-family: var(--f-gothic); font-weight: 700; font-size: clamp(24px,2.4vw,38px); line-height: 1.4; }
.pickup__excerpt { margin-top: 16px; font-family: var(--f-gothic); font-size: 15px; color:#333; line-height: 2; }
.pickup__foot { margin-top: 34px; display:flex; justify-content:flex-start; }
.pickup__foot .btn-outline { min-width: 340px; }

/* sub cards */
.column__sub { display: grid; gap: clamp(24px,2.4vw,36px); }
.col-card a { display:block; }
.col-card__thumb { position: relative; display:block; overflow:hidden; aspect-ratio: 8 / 5; }
.col-card__thumb img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); }
.col-card a:hover img { transform: scale(1.05); }
.col-card__label { position:absolute; left:0; top:0; z-index:2; background: rgba(20,28,60,.86); color:#fff; font-family: var(--f-gothic); font-weight: 700; font-size: clamp(15px,1.4vw,21px); line-height:1.4; padding: 14px 18px; letter-spacing:.02em; }
.col-card__label mark { background: var(--c-yellow); color: var(--c-ink); }
.col-card__label b { color: var(--c-yellow); }
.col-card__date { display:block; margin-top: 14px; font-family: var(--f-en); font-size: 14px; }
.col-card__title { margin-top: 6px; font-family: var(--f-gothic); font-size: 15px; line-height: 1.85; }
.column__sub-foot { display:flex; justify-content:flex-end; margin-top: 6px; }

/* =========================================================
   CONCEPT
   ========================================================= */
/* CONCEPT：山の画像をスクロールに合わせて拡大し、ブロックの背景として貼り付ける。
   .concept__hero を sticky で画面に固定し、その上を本文(.concept__body)がせり上がって重なる。
   画像の拡大率は JS が data-concept-zoom に --zoom を与える。 */
.concept { background: #12162a; position: relative; }
.concept__hero { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0; isolation: isolate; }
/* 画像は既定モノクロ。拡大率(--zoom)はJSが与える */
.concept__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
	transform: scale(var(--zoom, 1)); transform-origin: center; will-change: transform;
	filter: grayscale(1) contrast(1.06); transition: filter 1.7s var(--ease); }
/* 拡大が進むほど「黄×黒デュオトーン」を強める（JSが --duo を上げる）。乗算で明部が黄・暗部が黒に寄る。
   画像(transform で別レイヤー)より前面に置かないと乗算が画像に効かないので z-index を上げる。 */
.concept__hero::before { content:""; position:absolute; inset:0; z-index:2;
	background: var(--c-yellow); mix-blend-mode: multiply; opacity: var(--duo, 0); transition: opacity .2s linear; }
/* 見出しの可読性スクリム（デュオトーンより前面） */
.concept__hero::after { content:""; position:absolute; inset:0; z-index:3;
	background: linear-gradient(180deg, rgba(12,16,38,.10) 0%, rgba(12,16,38,.32) 55%, rgba(12,16,38,.60) 100%); }
/* マウスオーバーでフルカラーに戻す（グレースケール・デュオトーン解除） */
.concept__hero.is-color img { filter: grayscale(0) contrast(1); }
/* ホバーでの色戻し（デュオトーン解除）はゆっくり */
.concept__hero.is-color::before { opacity: 0; transition: opacity 1.7s var(--ease); }

.concept__body { position: relative; z-index: 1; margin-top: -100vh; padding: 52vh 0 clamp(60px,8vw,120px); pointer-events: none; }
/* 本文の余白部分はクリック透過して、背面の山画像をホバーできるようにする */
.concept__body > * { pointer-events: auto; }
/* 山の上に出る見出しは白抜きにする */
.concept .sec-head__en, .concept .sec-head__ja { color: #fff; }
.concept__body .sec-head { padding-inline: var(--pad); max-width: calc(var(--container) + var(--pad)*2); margin-inline:auto; }
.concept__panel { max-width: var(--container); margin: clamp(30px,4vw,60px) auto 0; padding: 0; }
/* 03 VALUE が sticky(top:139px)で止まり、その間 01・02 の上端が少し覗いたまま重なって停止する。
   停止の長さ＝このスペーサーの高さ（後続の実コンテンツが last-child sticky を保持させる）。 */
.concept__stack-spacer { height: clamp(160px,42vh,460px); pointer-events: none; }

/* 01/02/03 は白いカード。スクロールに合わせて sticky で少しずつ上に重なって積み上がる。
   top を段階的にずらすことで、前のカードの上端が少しだけ覗いて見える。 */
.concept-block { position: sticky; background: #fff; border-radius: 6px;
	box-shadow: 0 -10px 40px rgba(0,0,0,.16);
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,70px); align-items: center;
	padding: clamp(34px,4vw,64px) clamp(28px,4vw,72px); }
.concept-block:nth-child(1) { top: calc(var(--header-h) + 30px); }
.concept-block:nth-child(2) { top: calc(var(--header-h) + 50px); }
.concept-block:nth-child(3) { top: calc(var(--header-h) + 70px); }
/* カードは連続配置（上の余白なし）。sticky の top 差だけ前のカードの上端が覗く */
.concept-block + .concept-block { margin-top: 0; }
/* 退出時に重なりを保つための仕掛け：各カードの「実効下端（margin-box）」を揃える。
   top が +20px ずつ下がる分を margin-bottom で相殺（40/20/0）すると、3枚が同時に
   コンテナ末尾に到達して一斉に解放され、20px ずつズレたまま一緒にスクロールアウトする。
   ※背の高い単列（≤1080px）では3枚が揃う前に解放され崩れるため、2列のデスクトップ限定。 */
@media (min-width: 1081px) {
	.concept-block:nth-child(1) { margin-bottom: 40px; }
	.concept-block:nth-child(2) { margin-bottom: 20px; }
	.concept-block:nth-child(3) { margin-bottom: 0; }
}
.concept-block__no { font-family: var(--f-en); font-weight: 300; font-size: clamp(16px,1.4vw,22px); vertical-align: super; margin-right: 10px; }
.concept-block__en { font-family: var(--f-en); font-weight: 300; font-size: clamp(28px,3.2vw,52px); letter-spacing: .01em; }
.concept-block__title { margin-top: clamp(20px,2.4vw,40px); font-family: var(--f-gothic); font-weight: 700; font-size: clamp(24px,2.3vw,38px); line-height: 1.5; letter-spacing: .02em; }
.concept-block__desc { margin-top: 22px; font-family: var(--f-gothic); font-size: clamp(14px,1vw,16px); line-height: 2.1; color:#333; }
/* VIEW MORE はダーク塗りをやめ、黒枠＋文字のアウトライン表示に。ホバーで左から黄色になる（.btn__fill流用） */
.concept-block__text .btn-fill { margin-top: 34px; background: transparent; border: 1px solid var(--c-ink); color: var(--c-ink); }
.concept-block__media img { width:100%; aspect-ratio: 1/1; object-fit: cover; }

/* VALUE wheel */
.value-wheel { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1/1; background: var(--c-yellow); }
.value-wheel__ring { position:absolute; inset: 22%; border: 1px solid rgba(0,0,0,.55); border-radius: 50%; }
.value-wheel__center { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width: 30%; aspect-ratio:1; border-radius:50%; background: var(--c-sumi); color: var(--c-yellow); display:grid; place-items:center; text-align:center; }
.value-wheel__center span { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(11px,1.15vw,16px); line-height: 1.4; }
.value-node { position:absolute; transform: translate(-50%,-50%); width: 17%; aspect-ratio:1; border-radius:50%; background: var(--c-sumi); color: var(--c-yellow); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.value-node__no { font-family: var(--f-en); font-weight: 400; font-size: clamp(11px,1.3vw,18px); line-height: 1; }
.value-node__label { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(7px,.7vw,10px); line-height: 1.15; margin-top: 3px; }

/* =========================================================
   ABOUT
   ========================================================= */
.about { background: var(--c-sumi); color:#fff; overflow: hidden; }
.about__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px,5vw,80px); align-items: stretch; max-width: calc(var(--container) + var(--pad)*2); margin-inline:auto; padding-right: var(--pad); }
.about__media { position: relative; align-self: stretch; }
.about__media img { width:100%; height:100%; min-height: 460px; max-height: none; object-fit: cover; object-position: center 22%; }
.about__content { padding-block: clamp(60px,8vw,120px); padding-right: clamp(0px,2vw,30px); }
.about .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.about .sec-head__ja { white-space: normal; }
.about-menu { margin-top: clamp(30px,4vw,56px); }
.about-menu a { display:flex; align-items:center; justify-content: space-between; gap: 20px; padding: 22px clamp(16px,1.6vw,28px); border-bottom: 1px solid var(--c-line-dark); color: var(--c-yellow); font-family: var(--f-gothic); font-weight: 500; font-size: clamp(15px,1.2vw,19px); letter-spacing:.08em; transition: color .3s var(--ease); }
.about-menu li:first-child a { border-top: 1px solid var(--c-line-dark); }
.about-menu a i { transition: transform .3s var(--ease); }
.about-menu a:hover i { transform: translateX(8px); }

/* リンク行のホバー：左から黄色が入り、背景が変わった部分から文字も黒へ同期反転する。
   ボタンと同じ複製レイヤー .btn__fill を JS が生成し、行のレイアウトに合わせてクリップ表示する。 */
.news-item a, .about-menu a, .footer-nav a { position: relative; overflow: hidden; z-index: 0; isolation: isolate; }
/* 複製レイヤーは各行のレイアウトに合わせる（黄色地・黒文字） */
.about-menu a .btn__fill, .footer-nav a .btn__fill { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.about-menu a .btn__fill { padding: 22px clamp(16px,1.6vw,28px); }
.footer-nav a .btn__fill { padding: 20px clamp(14px,1.4vw,24px); }
.news-item a .btn__fill { display:grid; grid-template-columns: 104px 150px 1fr 28px; align-items:center; gap: clamp(14px,1.6vw,32px); padding: clamp(20px,2vw,30px) clamp(14px,1.6vw,26px); }
.news-item a .btn__fill .news-item__cat { justify-self:start; }
.news-item a .btn__fill i { justify-self:end; }
.about__content .btn-outline { margin-top: clamp(34px,4vw,54px); }

/* =========================================================
   SERVICE
   ========================================================= */
.service { padding-block: clamp(80px,11vh,150px); background:#fff; }
.service__head { display:flex; align-items:flex-end; justify-content: space-between; gap: clamp(24px,4vw,60px); flex-wrap: wrap; }
.service__lead { font-family: var(--f-gothic); font-size: clamp(14px,1.05vw,17px); line-height:1.9; letter-spacing:.05em; }
/* 事業カードは 2列（2×2）の均等グリッド。事業数が偶数でも自然に収まる。 */
.service__grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(14px,1.4vw,22px); margin-top: clamp(34px,4vw,56px); }
.service-card { position: relative; display:block; overflow:hidden; aspect-ratio: 16/9; }
.service-card__img { position:absolute; inset:0; }
/* 既定はモノクロ。ホバーした画像だけカラーになる（全カード共通） */
.service-card__img img { width:100%; height:100%; object-fit: cover; filter: grayscale(1); transition: filter .5s var(--ease), transform .6s var(--ease); }
.service-card:hover .service-card__img img { filter: grayscale(0); transform: scale(1.04); }
.service-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.5) 100%); }
.service-card__label { position:absolute; left: clamp(14px,1.4vw,26px); bottom: clamp(12px,1.2vw,22px); right: clamp(14px,1.4vw,26px); z-index:2; display:flex; align-items:baseline; gap: 14px; color:#fff; }
.service-card__en { font-family: var(--f-en); font-weight: 300; font-size: clamp(26px,2.6vw,44px); line-height:1; white-space: nowrap; }
.service-card__ja { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(11px,.95vw,15px); letter-spacing:.02em; white-space: nowrap; }
.service-card__label i { margin-left:auto; font-size: 15px; align-self:center; flex:0 0 auto; }

/* =========================================================
   RECRUIT
   ========================================================= */
.recruit { background: var(--c-yellow); padding-block: clamp(70px,9vh,130px) 0; overflow: hidden; }
.recruit .sec-head { margin-bottom: clamp(30px,4vw,50px); }
.recruit__hero { height: clamp(280px,36vw,540px); overflow:hidden; }
.recruit__hero img { width:100%; height:100%; object-fit: cover; filter: grayscale(1); transition: filter 1.4s var(--ease); }
.recruit__hero:hover img, .recruit__hero.is-color img { filter: grayscale(0); }
.recruit__marquee { overflow:hidden; white-space:nowrap; margin: -2.2vw 0 0; }
.recruit__marquee-track { display:inline-flex; gap: 0.4em; will-change: transform; animation: marquee 22s linear infinite; }
.recruit__marquee-track span { font-family: var(--f-en); font-weight: 400; font-size: 12vw; line-height:1; color: var(--c-ink); padding-right: .4em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.recruit__cards { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,3vw,50px); background:#fff; padding: clamp(30px,4vw,64px); margin-top: clamp(10px,2vw,30px); margin-bottom: clamp(60px,8vw,120px); }
.recruit-card { display:grid; grid-template-columns: 1fr 1fr; background: var(--c-yellow); overflow:hidden; }
.recruit-card__img { overflow:hidden; }
.recruit-card__img img { width:100%; height:100%; object-fit: cover; filter: grayscale(1); transition: filter 1.4s var(--ease); }
.recruit-card:hover .recruit-card__img img { filter: grayscale(0); }
.recruit-card__body { display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 22px; padding: clamp(20px,2.5vw,40px); text-align:center; }
.recruit-card__ttl { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(18px,1.7vw,26px); line-height:1.4; color: var(--c-ink); }
.recruit-card__ttl b { font-family: var(--f-en); font-weight: 400; }
.recruit-card__btn { position: relative; overflow: hidden; z-index: 0; isolation: isolate; border:1px solid var(--c-ink); padding: 12px 40px; font-family: var(--f-en); font-size: 14px; letter-spacing:.08em; }
/* カードのホバーで、墨色が左から入り黄色文字に反転（複製レイヤーをクリップ表示） */
.recruit-card__btn .btn__fill { justify-content: center; padding: 12px 40px; background: var(--c-ink); color: var(--c-yellow); }
.recruit-card:hover .recruit-card__btn .btn__fill { clip-path: inset(0 0 0 0); }

/* =========================================================
   NEWS
   ========================================================= */
.news { padding-block: clamp(80px,11vh,150px); background:#fff; }
.news-list { margin-top: clamp(34px,4vw,56px); }
/* 日付・カテゴリー・タイトルの左端を各行で揃えるため、固定列のグリッドにする */
.news-item a { display:grid; grid-template-columns: 104px 150px 1fr 28px; align-items:center; gap: clamp(14px,1.6vw,32px); padding: clamp(20px,2vw,30px) clamp(14px,1.6vw,26px); border-bottom: 1px solid var(--c-line); }
.news-item:first-child a { border-top: 1px solid var(--c-line); }
.news-item__date { font-family: var(--f-en); font-size: 15px; color: var(--c-ink); }
.news-item__cat { justify-self: start; background: var(--c-sumi); color:#fff; font-family: var(--f-gothic); font-size: 13px; letter-spacing:.06em; padding: 5px 18px; white-space: nowrap; }
.news-item__title { font-family: var(--f-gothic); font-size: clamp(14px,1.1vw,17px); }
.news-item a i { justify-self:end; transition: transform .3s var(--ease); }
.news-item a:hover i { transform: translateX(8px); }
.news__foot { display:flex; justify-content:center; margin-top: clamp(40px,5vw,70px); }
.news__foot .btn-outline { min-width: 340px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding-block: clamp(70px,9vh,120px) 0; background:#fff; }
.contact__bars { margin-top: clamp(34px,4vw,56px); }
.contact-bar { display:block; }
.contact-bar__inner { display:flex; align-items:center; gap: clamp(20px,3vw,50px); padding-block: clamp(30px,3.4vw,54px); }
.contact-bar__ja { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(22px,2.4vw,38px); letter-spacing:.14em; }
.contact-bar__en { font-family: var(--f-en); font-weight: 300; font-size: clamp(14px,1.2vw,20px); letter-spacing:.06em; }
.contact-bar i { margin-left:auto; font-size: clamp(20px,1.6vw,26px); transition: transform .3s var(--ease); }
.contact-bar:hover i { transform: translateX(12px); }
.contact-bar--yellow { background: var(--c-yellow); color: var(--c-ink); }
.contact-bar--dark { background: var(--c-sumi); color: var(--c-yellow); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--c-sumi-deep); color:#fff; padding-block: clamp(60px,7vw,100px) 30px; }
.site-footer__inner { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,100px); max-width: calc(var(--container) + var(--pad)*2); margin-inline:auto; padding-inline: var(--pad); }
.footer-logo { display:flex; flex-direction:column; align-items:flex-start; gap: 16px; color: var(--c-yellow); }
/* ロゴSVGはマスクで現在色(黄)に着色（濃色フッターに載せるため） */
.footer-logo__wordmark { display:block; width: clamp(220px,26vw,320px); aspect-ratio: 319.4 / 76.3; background: currentColor; -webkit-mask: var(--logo-mask, url(../img/logo.svg)) no-repeat left center / contain; mask: var(--logo-mask, url(../img/logo.svg)) no-repeat left center / contain; }
.footer-logo__tag { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(13px,1.1vw,16px); letter-spacing:.1em; display:block; }
.footer-address { margin-top: clamp(26px,3vw,44px); font-family: var(--f-en); font-weight: 300; font-size: clamp(14px,1.1vw,17px); line-height: 1.9; color:#fff; letter-spacing:.02em; }
.footer-social { display:flex; gap: 18px; margin-top: clamp(24px,3vw,40px); }
/* SNSボタン：ホバーで墨色が左から入り、背景が反転した部分からアイコンも黄色に反転する
   （ボタンと同じ複製レイヤー .btn__fill を JS が生成し、左からクリップ表示して同期させる） */
.footer-social a { position: relative; overflow: hidden; z-index: 0; isolation: isolate; width: 52px; height: 52px; border-radius:50%; background: var(--c-yellow); color: var(--c-sumi); display:grid; place-items:center; font-size: 22px; }
.footer-social a i { position: relative; z-index: 1; }
.footer-social a .btn__fill { border-radius: 50%; background: var(--c-sumi); color: var(--c-yellow); display: grid; place-items: center; justify-content: center; padding: 0; }
.footer-nav ul { margin-top: 6px; }
.footer-nav > ul > li > a, .footer-nav__row { display:flex; align-items:center; justify-content:space-between; gap: 20px; border-bottom: 1px solid var(--c-line-dark); }
.footer-nav > ul > li > a { padding: 20px clamp(14px,1.4vw,24px); color: var(--c-yellow); font-family: var(--f-gothic); font-weight:500; font-size: clamp(15px,1.2vw,18px); letter-spacing:.08em; }
.footer-nav > ul > li:first-child > a,
.footer-nav > ul > li:first-child .footer-nav__row { border-top: 1px solid var(--c-line-dark); }
.footer-nav > ul > li > a i { transition: transform .3s var(--ease); }
.footer-nav > ul > li > a:hover i { transform: translateX(8px); }
/* フッターのアコーディオン（ハセガワについて）：ラベル＝リンク遷移／＋＝開閉 */
.footer-nav__link { flex:1 1 auto; display:flex; align-items:center; padding:20px clamp(14px,1.4vw,24px); color:var(--c-yellow); font-family:var(--f-gothic); font-weight:500; font-size:clamp(15px,1.2vw,18px); letter-spacing:.08em; }
.footer-nav__link:hover { color:#fff; }
.footer-nav__toggle { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:58px; padding:20px 0; border:0; background:none; cursor:pointer; color:var(--c-yellow); }
.footer-nav__toggle:hover { color:#fff; }
.footer-nav__toggle i { transition: transform .3s var(--ease); }
.footer-nav .has-children.is-open .footer-nav__toggle i { transform: rotate(45deg); }
.footer-nav__sub { list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.footer-nav .has-children.is-open .footer-nav__sub { max-height: 520px; }
.footer-nav__sub a { display:flex; justify-content:space-between; gap:16px; padding:12px clamp(14px,1.4vw,24px) 12px 28px; color: rgba(251,226,0,.72); font-family:var(--f-gothic); font-size:13px; letter-spacing:.06em; }
.footer-nav__sub a:hover { color: var(--c-yellow); }
.site-footer__copy { max-width: calc(var(--container) + var(--pad)*2); margin: clamp(40px,5vw,70px) auto 0; padding-inline: var(--pad); }
.site-footer__copy small { font-family: var(--f-en); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing:.06em; }

/* to top */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 52px; height: 52px; border-radius:50%; background: var(--c-sumi); color: var(--c-yellow); display:grid; place-items:center; font-size: 18px; opacity:0; pointer-events:none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.to-top.is-show { opacity:1; pointer-events:auto; }
.to-top:hover { transform: translateY(-4px); }

/* =========================================================
   Reveal / animation utilities
   ========================================================= */
/* ページ全体：ホバーで矢印を横に動かす演出は全廃（左からの色反転に統一） */
.pickup__card:hover .pickup__more i,
.about-menu a:hover i,
.news-item a:hover i,
.contact-bar:hover i,
.footer-nav a:hover i,
.biz-card a:hover .biz-card__more i,
.form-link:hover i,
.about-menu a:hover i.fa-arrow-right-long { transform: none !important; }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
[data-popup] { opacity: 0; transform: translateY(60px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-popup].is-in { opacity:1; transform:none; }
/* 英語見出しの1文字ずつ浮き上がり（左から順に、下から）。
   1文字ずつ span にすると文字間で改行し得るため、見出しは nowrap にして単語のまま保つ。 */
.sec-head__en { white-space: nowrap; }
.sec-head__en .char { display: inline-block; opacity: 0; transform: translateY(.85em); white-space: pre; }
.sec-head__en.is-in .char { animation: charRise .55s var(--ease) both; animation-delay: calc(var(--i) * .045s); }
@keyframes charRise { from { opacity: 0; transform: translateY(.85em); } to { opacity: 1; transform: translateY(0); } }
.wipe { position: relative; }
.wipe__cover { position:absolute; inset:0; z-index: 6; background: var(--c-yellow); transform: translateX(0); transition: transform .8s var(--ease); }
.wipe.is-in .wipe__cover { transform: translateX(-101%); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
	/* ヘッダーの「白背景フェード＆スライド」は reduce でも残す（潰すと一瞬で切替＝フェードしない） */
	.site-header { transition: transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease) !important; transition-duration: .5s !important; }
	/* ボタン等の「左から色反転」スイープは意図した演出なので残す */
	.btn__fill { transition: clip-path .35s var(--ease) !important; transition-duration: .35s !important; }
	/* ドロワー開閉（黄色スライド＋中身フェード） */
	.drawer__panel { transition: transform .55s var(--ease) !important; transition-duration: .55s !important; }
	.drawer__inner { transition: opacity .3s var(--ease) !important; }
	.drawer.is-open .drawer__inner { transition-delay: .45s !important; }
	/* アコーディオン開閉 */
	.drawer-nav__sub, .footer-nav__sub { transition: max-height .45s var(--ease) !important; transition-duration: .45s !important; }
	.drawer-nav__toggle i, .footer-nav__toggle i { transition: transform .3s var(--ease) !important; }
	/* コラムのマーカー（ハイライト）アニメ */
	.entry-content .marker { transition: background-size .8s var(--ease) !important; transition-duration: .8s !important; }
	/* お問い合わせタブ・ドロワーのホバー反転 */
	.form-tab::before,
	.drawer-nav__list > li > a::before, .drawer-nav__row::before { transition: transform .35s var(--ease) !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---- Tablet (<=1080px) ---- */
@media (max-width: 1080px) {
	:root { --header-h: 57px; }
	.global-nav { display: none; }
	.column__grid { grid-template-columns: 1fr; }
	.concept-block { grid-template-columns: 1fr; gap: 26px; }
	.concept-block__media { order: 2; }
	.about__inner { grid-template-columns: 1fr; padding-right: 0; }
	.about__media { order: 2; }
	.about__media img { max-height: 520px; width: 100%; }
	.about__content { padding-inline: var(--pad); }
	.service__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile (<=767px) ---- */
@media (max-width: 767px) {
	:root { --header-h: 48px; --pad: 20px; }
	body { line-height: 1.85; }

	.site-header__inner { padding-inline: 18px; }
	.site-logo__wordmark { width: min(148px, 44vw); }
	.hamburger { width: 44px; height: 32px; }
	.hamburger__lines { width: 32px; }

	.sec-head { flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
	.sec-head__en { font-size: clamp(46px, 15vw, 92px); }
	.sec-head__ja { font-size: 13px; }

	/* FV */
	.fv__bg { top: 26vh; }
	.fv__wordmark-wrap { height: 34vh; min-height: 168px; padding: 0 0 clamp(44px, 12vh, 96px); }
	.fv__wordmark { font-size: 13.3vw; }
	.fv__body { padding: 34px 22px 70px; min-height: auto; }
	.fv__catch { font-size: clamp(40px, 12vw, 64px); }
	.fv__en { font-size: 20px; }
	.fv__lead { margin-top: 60px; }
	.fv__lead p { line-height: 2; padding-right: 32px; } /* 右のSCROLL誘導を避ける */
	/* <br> はスマホでも残す。
	   以前は「スマホでは流し込む」実装にしていたが、
	   文節を .phrase で包むようにしたので、区切りを残したままでも
	   各行が文節単位できれいに折り返る。
	   また「土台に」のように読点を置かず改行で区切る箇所は、
	   <br> がないと次の文と連続して読めなくなる。 */
	.fv__lead .btn-outline { display: none; } /* スマホでは非表示 */

	/* buttons full width */
	.btn-outline, .btn-fill, .btn-sweep { min-width: 0; width: 100%; padding-inline: 24px; gap: 20px; }
	.pickup__foot .btn-outline, .news__foot .btn-outline { min-width: 0; width: 100%; }
	.pickup__foot, .news__foot { justify-content: stretch; }
	/* VIEW MORE 等はスマホでも折り返さないよう、文字と矢印を小さくする */
	.btn-outline, .btn-fill, .btn-sweep { font-size: 14px; white-space: nowrap; }
	.btn-outline i, .btn-fill i, .btn-sweep i { width: 34px; }
	.pickup__more { gap: 12px; padding: 12px 16px; font-size: 13px; white-space: nowrap; }
	.pickup__more i { width: 30px; }

	/* COLUMN */
	.column { padding-block: 64px; }
	.column__grid { gap: 40px; }
	.pickup__card { aspect-ratio: 8 / 5; }
	.pickup__headline { font-size: 21px; }
	.column__sub-foot { justify-content: stretch; }
	.column__sub-foot .btn-sweep { width: 100%; }

	/* CONCEPT：スマホは重なり演出を解除して通常の縦積みに（COLUMNへの食い込み防止） */
	.concept__hero { position: static; height: 52vw; min-height: 200px; }
	.concept__body { margin-top: 0; padding: clamp(28px,7vw,48px) 0 clamp(40px,8vw,70px); }
	.concept-block { position: static; margin-bottom: 0 !important; box-shadow: 0 6px 24px rgba(0,0,0,.12); padding-inline: 14px; }
	.concept-block + .concept-block { margin-top: 20px; }
	.concept__stack-spacer { display: none; }
	.concept__panel { padding: 24px 20px; margin-inline: 16px; }
	.concept-block__en { font-size: clamp(26px, 8vw, 40px); }
	.concept-block__title { font-size: clamp(20px, 5.6vw, 28px); }
	.value-wheel { max-width: 380px; }
	.value-node__label { font-size: 8px; }
	.value-wheel__center span { font-size: 12px; }

	/* ABOUT */
	.about__content { padding-block: 56px; }
	.about .sec-head__en { font-size: clamp(52px, 17vw, 92px); }

	/* SERVICE */
	.service { padding-block: 64px; }
	.service__head { flex-direction: column; align-items: flex-start; gap: 18px; }
	.service__grid { grid-template-columns: 1fr; gap: 12px; }
	.service-card, .service-card:nth-child(1), .service-card:nth-child(2) { aspect-ratio: 16/9; }
	.service-card__en { font-size: 30px; }
	.service-card__ja { font-size: 13px; }

	/* RECRUIT */
	.recruit__hero { height: 56vw; }
	.recruit__marquee-track span { font-size: 17vw; }
	.recruit__cards { grid-template-columns: 1fr; padding: 20px; gap: 20px; margin-bottom: 64px; }
	.recruit-card { grid-template-columns: 1fr 1fr; }
	.recruit-card__ttl { font-size: 18px; }

	/* NEWS */
	.news { padding-block: 64px; }
	/* スマホ：日付＋カテゴリーを1行目、タイトルを2行目に。左端は揃える */
	.news-item a { grid-template-columns: auto 1fr; gap: 8px 14px; padding: 18px 2px; position: relative; }
	.news-item__date { grid-column: 1; }
	.news-item__cat { grid-column: 2; justify-self: start; }
	.news-item__title { grid-column: 1 / -1; order: 3; }
	.news-item a i { position: absolute; right: 2px; top: 20px; }

	/* CONTACT */
	.contact-bar__inner { gap: 14px; padding-block: 30px; }
	.contact-bar__ja { font-size: clamp(20px, 6vw, 30px); }
	.contact-bar__en { font-size: 13px; }

	/* FOOTER */
	.site-footer__inner { grid-template-columns: 1fr; gap: 44px; }
	.footer-nav { order: -1; }
	.footer-logo__wordmark { width: min(260px, 74vw); }

	/* DRAWER */
	.drawer__inner { grid-template-columns: 1fr; padding: 84px 24px 60px; gap: 30px; }
	.drawer__logo { display: none; }
	.drawer-nav { grid-column: 1; grid-row: auto; }
	.drawer__cta { grid-column: 1; margin-top: 6px; }
	.drawer-nav__list a, .drawer-nav__toggle { font-size: 15px; padding: 12px 4px; }
	.drawer-nav__sub a { font-size: 13px; padding: 9px 4px 9px 16px; }
	.drawer__close { top: 0; right: 18px; width: 44px; height: var(--header-h); }
	/* CATALOG / RESERVATION ボタン：フォント小さめ・高さ低め */
	.drawer__cta { gap: 10px; }
	.cta-bar { padding: 13px 18px; gap: 12px; }
	.cta-bar__ja { font-size: 15px; letter-spacing: .1em; }
	.cta-bar__en { font-size: 10px; }
	.cta-bar i { font-size: 15px; }
	/* フッター住所：TELとFAXを改行 */
	.footer-address__sep { display: none; }
	.footer-address__line { display: block; }

	.to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* ---- Small phones (<=400px) ---- */
@media (max-width: 400px) {
	.recruit-card { grid-template-columns: 1fr; }
	.recruit-card__img { aspect-ratio: 16/10; }
	.value-node__no { font-size: 13px; }
}

/* =========================================================
   LOWER PAGES (固定ページ / 投稿 / アーカイブ / 404)
   ========================================================= */

/* 下層は固定ヘッダーを常時ソリッドに */
body:not(.home) .site-header { background: #fff; box-shadow: 0 1px 20px rgba(0,0,0,.06); }
body:not(.home) .site-main { padding-top: var(--header-h); }

.page-hero { position: relative; background: var(--c-yellow); padding: clamp(50px,7vw,96px) 0 clamp(40px,5vw,70px); overflow: hidden; }
.page-hero__inner { max-width: calc(var(--container) + var(--pad)*2); margin-inline: auto; padding-inline: var(--pad); }
.page-hero__en { font-family: var(--f-en); font-weight: 300; font-size: clamp(44px,7vw,110px); line-height: .95; color: var(--c-ink); letter-spacing: -.01em; }
/* 日本語は大きな英語見出しの右に、ベースラインを合わせて配置 */
.page-hero__ja { display: inline-block; margin-left: clamp(14px,1.6vw,30px); font-family: var(--f-gothic); font-weight: 500; font-size: clamp(14px,1.3vw,20px); letter-spacing: .1em; color: var(--c-ink); }
.breadcrumb { margin-top: 24px; font-family: var(--f-gothic); font-size: 13px; color: var(--c-ink); letter-spacing: .04em; }
/* パンくずのリンクは下線なし（ホバーは薄く） */
.breadcrumb a { text-decoration: none; transition: opacity .2s var(--ease); }
.breadcrumb a:hover { opacity: .6; }
.breadcrumb span { opacity: .6; }
/* コラム・お知らせの詳細ページは本文幅を900pxに絞る */
.container.container--single { max-width: 900px; }

.page-shell { padding-block: clamp(56px,7vw,110px); background: #fff; }
.entry-content { font-family: var(--f-body); font-size: 16px; line-height: 2.1; }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(22px,2vw,30px); line-height: 1.5; margin-top: 2em; padding-left: 16px; border-left: 5px solid var(--c-yellow); }
.entry-content h3 { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(18px,1.6vw,23px); margin-top: 1.8em; }
/* テキストリンク：黄(#FBE200)の補色寄りの青＋太字。下線なし、ホバーで濃く */
.entry-content a { color: #1b44d8; font-weight: 700; text-decoration: none; }
.entry-content a:hover { color: #1230a0; }
.entry-content img { margin-block: 1.4em; }
.entry-content ul { list-style: disc; padding-left: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.4em; }
/* --- コラム本文のリッチ要素 --- */
.entry-content h4 { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(16px,1.3vw,19px); margin-top: 1.6em; color: var(--c-ink); }
.entry-content strong, .entry-content b { font-weight: 700; }
/* ハイライトアニメーション（マーカー）：表示時に左から黄色い蛍光ペンが引かれる */
.entry-content .marker { background: linear-gradient(transparent 58%, rgba(251,226,0,.85) 58%) left center / 0% 100% no-repeat; color: var(--c-ink); padding: 0 .08em; font-weight: 700; transition: background-size .8s var(--ease); }
.entry-content .marker.is-in { background-size: 100% 100%; }
/* 写真＋キャプション（エディタ標準の画像＋キャプションブロック） */
.entry-content figure { margin-block: 1.8em; }
.entry-content figure img { width: 100%; margin: 0; }
.entry-content figcaption, .entry-content .wp-caption-text { margin-top: 10px; font-family: var(--f-gothic); font-size: 13px; color: #666; line-height: 1.7; }

/* 吹き出し（顔写真＋氏名、左/右） */
.bubble { display: flex; gap: 16px; align-items: flex-start; margin-block: 1.8em; }
.bubble--right { flex-direction: row-reverse; }
.bubble__avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #eee; }
.bubble__avatar img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.bubble__body { position: relative; max-width: calc(100% - 90px); }
.bubble__name { display: block; font-family: var(--f-gothic); font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--c-ink); }
.bubble--right .bubble__name { text-align: right; }
.bubble__text { position: relative; background: #f4f4f2; border-radius: 14px; padding: 16px 20px; font-size: 15px; line-height: 1.9; }
.bubble--right .bubble__text { background: rgba(251,226,0,.28); }
.bubble__text > :first-child { margin-top: 0; }
.bubble__text::before { content: ""; position: absolute; top: 18px; width: 0; height: 0; border: 8px solid transparent; }
.bubble--left .bubble__text::before { left: -14px; border-right-color: #f4f4f2; }
.bubble--right .bubble__text::before { right: -14px; border-left-color: rgba(251,226,0,.28); }

/* 注釈ボックス */
.note-box { margin-block: 1.8em; border: 1px solid var(--c-yellow); border-radius: 8px; background: rgba(251,226,0,.10); padding: clamp(18px,2vw,26px); }
.note-box__label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-gothic); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--c-ink); margin-bottom: 10px; }
.note-box__label i { color: #c9a800; font-size: 15px; }
.note-box__body { font-size: 15px; line-height: 1.95; }
.note-box__body > :first-child { margin-top: 0; }

/* 顔写真つき投稿者紹介 */
.author-card { position: relative; display: flex; gap: clamp(18px,2.4vw,30px); align-items: flex-start; margin-top: 3em; padding: clamp(24px,2.8vw,36px) clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px); border-radius: 10px; background: var(--c-sumi); color: #fff; }
.author-card__head { position: absolute; top: -11px; left: clamp(22px,2.6vw,34px); background: var(--c-yellow); color: var(--c-sumi); font-family: var(--f-en); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 3px 10px; border-radius: 3px; }
.author-card__avatar { flex: 0 0 auto; width: clamp(76px,9vw,104px); height: clamp(76px,9vw,104px); border-radius: 50%; overflow: hidden; background: #333; }
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.author-card__inner { flex: 1 1 auto; }
.author-card__role { display: block; font-family: var(--f-gothic); font-size: 12px; color: var(--c-yellow); letter-spacing: .06em; }
.author-card__name { display: block; font-family: var(--f-gothic); font-weight: 700; font-size: clamp(18px,1.6vw,22px); margin-top: 2px; }
.author-card__bio { margin-top: 12px; font-size: 14px; line-height: 1.95; color: rgba(255,255,255,.85); }
.author-card__bio > :first-child { margin-top: 0; }
.author-card__bio a { color: var(--c-yellow); }
@media (max-width: 600px) {
	.author-card { flex-direction: column; align-items: center; text-align: center; }
	.bubble__body { max-width: calc(100% - 80px); }
}

/* --- 規約ページ（個人情報保護方針・コンプライアンス基本方針） --- */
.legal { font-size: 15px; line-height: 2.0; }
.legal .legal-title { margin-top: 0; font-family: var(--f-gothic); font-weight: 700; font-size: clamp(22px,2.4vw,32px); line-height: 1.4; padding: 0 0 14px; border-left: 0; border-bottom: 3px solid var(--c-yellow); }
.legal .legal-title:not(:first-child) { margin-top: 1em; }
.legal .legal-title__en { display: block; font-family: var(--f-en); font-weight: 400; font-size: 12px; letter-spacing: .1em; color: var(--c-gray); margin-top: 6px; }
.legal h3 { font-size: clamp(16px,1.4vw,19px); margin-top: 2.2em; padding-left: 0; border-left: 0; }
.legal p { margin-top: .9em; }
.legal ul { list-style: disc; padding-left: 1.5em; margin-top: .8em; }
.legal ul li { margin-top: .3em; line-height: 1.85; }
.legal-note { font-size: 13px; color: #666; }
.legal-sep { border: 0; border-top: 1px solid var(--c-line); margin: clamp(50px,7vw,90px) 0; }
.legal-date { margin-top: 2em; font-size: 13px; color: #666; }
.legal-contact { margin-top: 1.2em; padding: clamp(20px,2.4vw,30px); background: #f7f7f5; border-radius: 8px; }
.legal-contact p { margin: 2px 0; font-size: 14px; line-height: 1.9; }
.legal-contact .legal-contact__lead { margin-bottom: 12px; }
.legal-contact .legal-contact__name { font-weight: 700; font-size: 16px; }
.legal-contact a { color: #1b44d8; font-weight: 700; text-decoration: none; }
.legal-table-wrap { overflow-x: auto; margin: 1.2em 0; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 660px; }
.legal-table th, .legal-table td { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.7; }
.legal-table th { background: #f2f2ef; font-weight: 700; white-space: nowrap; }
.entry-meta { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.entry-meta time { font-family: var(--f-en); font-size: 15px; }
.entry-title { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(24px,2.6vw,40px); line-height: 1.5; margin-bottom: 30px; }

/* archive: column grid */
.archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,2.4vw,40px); }
.archive-card a { display: block; }
.archive-card__thumb { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: #eee; }
.archive-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.archive-card a:hover img { transform: scale(1.05); }
.archive-card time { display: block; margin-top: 14px; font-family: var(--f-en); font-size: 13px; }
.archive-card__title { margin-top: 6px; font-family: var(--f-gothic); font-weight: 500; font-size: 16px; line-height: 1.7; }

/* archive: news list reuse .news-list */
.archive-news { margin-inline: auto; }

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 60px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border: 1px solid var(--c-line); font-family: var(--f-en); font-size: 15px; }
.pagination .current { background: var(--c-sumi); color: #fff; border-color: var(--c-sumi); }

.notfound { text-align: center; padding-block: clamp(80px,12vw,180px); }
.notfound__code { font-family: var(--f-en); font-weight: 300; font-size: clamp(80px,16vw,220px); line-height: 1; color: var(--c-yellow); -webkit-text-stroke: 2px var(--c-ink); }
.notfound__msg { margin-top: 20px; font-family: var(--f-gothic); font-size: 18px; }
.notfound .btn-outline { margin-top: 40px; }

.back-link { display: flex; justify-content: center; margin-top: 60px; }

@media (max-width: 767px) {
	.archive-grid { grid-template-columns: 1fr; }
	body:not(.home) .site-header { background: #fff; }
}

/* =========================================================
   下層ページ 共通コンポーネント
   ========================================================= */
.container--narrow { max-width: calc(var(--container) + var(--pad) * 2); }
.lower-note { margin-top: 20px; font-size: 12px; color: var(--c-gray); }
.lower-cta { margin-top: 40px; display: flex; justify-content: center; }
/* ENTRY等の下部CTA：黒枠アウトラインを基本に、ホバーで黒が左から入る（文字は白へ反転） */
.lower-cta .btn-fill { min-width: clamp(360px, 46vw, 560px); justify-content: center; gap: 34px; background: transparent; border: 1px solid var(--c-ink); color: var(--c-ink); }
.lower-cta .btn-fill .btn__fill { justify-content: center; background: var(--c-sumi); color: #fff; }

/* ページ内タブ */
.lower-tabs { border-bottom: 1px solid var(--c-line); position: sticky; top: var(--header-h); z-index: 50; background: #fff; }
.lower-tabs ul { display: flex; flex-wrap: wrap; gap: clamp(14px,2.4vw,44px); }
.lower-tabs a { display: inline-block; padding: 20px 2px; font-family: var(--f-gothic); font-weight: 500; font-size: 15px; letter-spacing: .04em; position: relative; }
.lower-tabs a::after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px; background: var(--c-yellow); transition: width .3s var(--ease); }
.lower-tabs a:hover::after { width: 100%; }
/* スクロール位置に応じて現在のセクションのタブにマーク（下線＋太字） */
.lower-tabs a.is-active { font-weight: 700; }
.lower-tabs a.is-active::after { width: 100%; }

/* カテゴリタブ */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px,4vw,50px); }
.cat-tabs a { font-family: var(--f-gothic); font-size: 14px; letter-spacing: .04em; padding: 9px 22px; border: 1px solid var(--c-line); border-radius: 999px; transition: .25s var(--ease); }
.cat-tabs a:hover, .cat-tabs a.is-active { background: var(--c-sumi); color:#fff; border-color: var(--c-sumi); }

/* 汎用セクション */
.about-sec { padding-block: clamp(56px,7vw,110px); scroll-margin-top: calc(var(--header-h) + 56px); }
.about-sec--tint { background: #faf8ef; }
.about-sec .sec-head { margin-bottom: clamp(30px,4vw,50px); }

/* 代表メッセージ */
.message-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,4vw,64px); align-items: center; }
.message-block__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.message-block__lead { font-family: var(--f-mincho); font-weight: 600; font-size: clamp(24px,2.6vw,38px); line-height: 1.5; margin-bottom: 24px; }
.message-block__body p { font-family: var(--f-gothic); line-height: 2.1; margin-bottom: 1.2em; }
.message-block__sign { font-weight: 500; color: var(--c-gray); font-size: 15px; text-align: right; margin-top: 2em; line-height: 1.5; }
/* 代表者名は署名の下に、太字・大きめで配置 */
.message-block__name { display: block; margin-top: 6px; font-weight: 700; color: var(--c-ink); font-size: clamp(22px,2.4vw,32px); letter-spacing: .08em; }

/* 企業理念 */
.philosophy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,34px); }
.philosophy-card { background: #fff; border: 1px solid var(--c-line); padding: clamp(24px,2.6vw,40px); }
.philosophy-card__no { font-family: var(--f-en); font-weight: 300; font-size: 20px; }
.philosophy-card__en { display: block; font-family: var(--f-en); font-weight: 300; font-size: clamp(22px,2vw,30px); margin: 4px 0 18px; }
.philosophy-card h3 { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(18px,1.5vw,22px); line-height: 1.5; margin-bottom: 14px; }
.philosophy-card p { font-family: var(--f-gothic); font-size: 14px; line-height: 2; color:#444; }

/* 会社概要テーブル */
.info-table { width: 100%; border-collapse: collapse; font-family: var(--f-gothic); }
.info-table th, .info-table td { text-align: left; padding: 20px 8px; border-bottom: 1px solid var(--c-line); font-size: 15px; line-height: 1.8; vertical-align: top; }
.info-table th { width: 30%; font-weight: 700; white-space: nowrap; }

/* 沿革タイムライン */
.timeline { position: relative; }
.timeline__item { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 22px 0 22px 0; border-left: 2px solid var(--c-yellow); padding-left: 30px; margin-left: 8px; }
.timeline__year { font-family: var(--f-en); font-weight: 400; font-size: 22px; position: relative; }
.timeline__year::before { content:""; position:absolute; left:-39px; top:6px; width:14px; height:14px; border-radius:50%; background: var(--c-sumi); border: 3px solid var(--c-yellow); }
.timeline__text { font-family: var(--f-gothic); line-height: 2; }

/* ハセガワの強み */
.strength-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--c-line); border: 1px solid var(--c-line); margin-top: 34px; }
.strength-cell { background: #fff; padding: clamp(20px,2.4vw,34px); display: flex; align-items: baseline; gap: 14px; }
.strength-cell__no { font-family: var(--f-en); font-weight: 300; font-size: clamp(22px,2vw,32px); color: var(--c-yellow); -webkit-text-stroke: 1px var(--c-sumi); }
.strength-cell__label { font-family: var(--f-gothic); font-weight: 500; font-size: 15px; }

/* 事業カード（一覧） */
.biz-list { display: grid; gap: clamp(20px,2.4vw,34px); }
.biz-card a { display: grid; grid-template-columns: 1fr 1fr; align-items: center; border: 1px solid var(--c-line); overflow: hidden; }
.biz-card:nth-child(even) a { grid-template-columns: 1fr 1fr; direction: rtl; }
.biz-card:nth-child(even) .biz-card__body { direction: ltr; }
.biz-card__img { overflow: hidden; aspect-ratio: 16 / 9; }
.biz-card__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15); transition: transform .5s var(--ease); }
.biz-card a:hover img { transform: scale(1.04); }
.biz-card__body { direction: ltr; padding: clamp(26px,3vw,50px); display: flex; flex-direction: column; justify-content: center; }
.biz-card__no { font-family: var(--f-en); font-weight: 300; font-size: 16px; color: var(--c-gray); }
.biz-card__en { font-family: var(--f-en); font-weight: 300; font-size: clamp(26px,2.6vw,42px); line-height: 1; margin: 6px 0 8px; }
.biz-card__ja { font-family: var(--f-gothic); font-weight: 700; font-size: 16px; }
.biz-card__desc { font-family: var(--f-gothic); font-size: 14px; line-height: 2; color:#444; margin-top: 16px; }
.biz-card__more { margin-top: 26px; font-family: var(--f-en); font-size: 14px; display: inline-flex; align-items: center; gap: 14px; }
.biz-card__more i { transition: transform .3s var(--ease); }
.biz-card a:hover .biz-card__more i { transform: translateX(8px); }

/* 採用ヒーロー */
.recruit-hero-sec { position: relative; color: #fff; }
.recruit-hero-sec__img { height: clamp(320px,42vw,560px); }
.recruit-hero-sec__img img { width: 100%; height: 100%; object-fit: cover; }
.recruit-hero-sec__img::after { content:""; }
.recruit-hero-sec__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg, rgba(0,0,0,.55), transparent 70%); }
.recruit-hero-sec__catch { font-family: var(--f-mincho); font-weight: 600; font-size: clamp(28px,4vw,56px); line-height: 1.4; margin-bottom: 20px; }
.recruit-hero-sec__body p:last-child { max-width: 620px; font-family: var(--f-gothic); line-height: 2; }

/* ハセガワを知る（数値） */
.know-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,2vw,30px); margin-top: 34px; }
.know-cell { text-align: center; background: #fff; border: 1px solid var(--c-line); padding: clamp(24px,3vw,44px) 10px; }
.know-cell__num { display: block; font-family: var(--f-en); font-weight: 300; font-size: clamp(40px,5vw,72px); line-height: 1; color: var(--c-sumi); white-space: nowrap; }
.know-cell__num small { font-size: .4em; }
.know-cell__label { display: block; margin-top: 12px; font-family: var(--f-gothic); font-size: 14px; }

/* 求める人材 */
.wanted-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px,1.6vw,24px); margin-top: clamp(30px,4vw,54px); }
@media (max-width: 600px) { .wanted-list { grid-template-columns: 1fr; } }
.wanted-item { display: flex; gap: clamp(14px,1.4vw,22px); align-items: center; background: #fff; border: 1px solid var(--c-line); padding: clamp(22px,2.6vw,36px); }
.wanted-item__no { flex: 0 0 auto; width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 50%; background: var(--c-yellow); color: var(--c-sumi); font-family: var(--f-en); font-weight: 400; font-size: clamp(15px,1.3vw,19px); }
.wanted-item__text { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(15px,1.05vw,17px); line-height: 1.85; }

/* エントリー：電話でのご応募 */
.form-anchor { position: relative; top: calc(var(--header-h) * -1 - 10px); }
.entry-contact { margin-top: clamp(34px,4vw,56px); text-align: center; background: var(--c-sumi); color: #fff; padding: clamp(26px,3.4vw,44px); }
.entry-contact__lead { margin: 0; font-family: var(--f-gothic); font-size: 14px; letter-spacing: .04em; }
.entry-contact__tel { display: inline-block; margin: 8px 0 4px; font-family: var(--f-en); font-weight: 400; font-size: clamp(30px,3.6vw,46px); letter-spacing: .04em; color: var(--c-yellow); }
.entry-contact__note { margin: 0; font-family: var(--f-gothic); font-size: 13px; color: rgba(255,255,255,.72); }

/* 社員インタビュー */
.interview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,34px); }
.interview-card__img { overflow: hidden; aspect-ratio: 4/3; }
.interview-card__img img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); }
.interview-card a:hover img { transform: scale(1.05); }
.interview-card__meta { display: block; margin-top: 14px; font-family: var(--f-gothic); font-size: 13px; color: var(--c-gray); }
.interview-card__title { display: block; margin-top: 6px; font-family: var(--f-gothic); font-weight: 700; font-size: 17px; line-height: 1.6; }

/* お問い合わせフォーム */
.form-notice { padding: 18px 22px; margin-bottom: 30px; font-family: var(--f-gothic); border-radius: 4px; }
.form-notice--ok { background: #eef8ee; border: 1px solid #b8ddb8; color: #1d6b1d; }
.form-notice--ng { background: #fdeeee; border: 1px solid #e3b1b1; color: #a12727; }
/* お問い合わせページ：4種フォームの切替タブ */
.form-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(18px,2.4vw,30px) 0 clamp(26px,3vw,40px); }
/* 日本語＋英語のボタン。黄背景×黒文字、ホバーで左から黒反転（.btn__fill）、選択中は黒地 */
.form-tab {
	position: relative; overflow: hidden; z-index: 0; isolation: isolate;
	flex: 1 1 auto; min-width: 150px;
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 15px 16px; border: 1px solid var(--c-ink);
	background: var(--c-yellow); color: var(--c-sumi);
	font-family: var(--f-gothic); cursor: pointer;
}
.form-tab__ja { position: relative; z-index: 1; font-weight: 700; font-size: clamp(14px,1.1vw,16px); letter-spacing: .04em; white-space: nowrap; }
.form-tab__en { position: relative; z-index: 1; font-family: var(--f-en); font-weight: 400; font-size: 10px; letter-spacing: .12em; opacity: .68; }
.form-tab .btn__fill { flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--c-sumi); color: var(--c-yellow); }
.form-tab.is-active { background: var(--c-sumi); color: var(--c-yellow); }
.form-panel[hidden] { display: none; }
.contact-form { margin-top: 34px; }
/* 送信ボタン上の注意書き（自動メール・電話）：幅は狭く中央揃え */
.form-pre-note { max-width: 600px; margin: clamp(24px,3vw,36px) auto 0; padding: clamp(18px,2vw,26px); background: #f7f7f5; border: 1px solid var(--c-line); border-radius: 8px; font-family: var(--f-gothic); font-size: 13px; line-height: 1.9; text-align: center; }
.form-pre-note p { margin: 0 0 10px; }
.form-pre-note p:last-child { margin-bottom: 0; }
.form-pre-note__head { font-weight: 700; color: var(--c-ink); }
.form-pre-note__tel { display: inline-block; font-family: var(--f-en); font-weight: 700; font-size: 18px; color: #1b44d8; text-decoration: none; letter-spacing: .04em; }
.form-pre-note a { color: #1b44d8; font-weight: 700; text-decoration: none; }
/* 同意文（ボックス外・中央・幅控えめ） */
.form-consent { max-width: 600px; margin: 16px auto 0; text-align: center; font-family: var(--f-gothic); font-size: 12.5px; line-height: 1.9; color: #666; }
.form-consent a { color: #1b44d8; font-weight: 700; text-decoration: none; }

/* 資料請求：希望資料の選択チップ */
.material-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.material-chip { position: relative; }
.material-chip input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.material-chip span { display: inline-block; padding: 11px 20px; border: 1px solid var(--c-ink); border-radius: 4px; font-family: var(--f-gothic); font-size: 14px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.material-chip:hover span { background: rgba(34,23,27,.06); }
.material-chip input:checked + span { background: var(--c-sumi); color: #fff; }
.material-chip input:focus-visible + span { outline: 2px solid var(--c-yellow); outline-offset: 1px; }
.material-chips__note { margin-top: 8px; font-size: 12px; color: #888; }

/* 来場予約：ご相談希望の事業／来場先の選択ボタン（単一選択・ラジオ） */
.biz-chips, .place-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.biz-chip, .place-chip { position: relative; }
.biz-chip input, .place-chip input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.biz-chip__box, .place-chip__box { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; border: 1px solid var(--c-ink); border-radius: 4px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.biz-chip:hover .biz-chip__box, .place-chip:hover .place-chip__box { background: rgba(34,23,27,.06); }
.biz-chip input:checked + .biz-chip__box, .place-chip input:checked + .place-chip__box { background: var(--c-sumi); color: #fff; }
.biz-chip input:focus-visible + .biz-chip__box, .place-chip input:focus-visible + .place-chip__box { outline: 2px solid var(--c-yellow); outline-offset: 1px; }
.biz-chip__en { font-family: var(--f-en); font-weight: 500; font-size: 15px; letter-spacing: .04em; }
.biz-chip__ja { font-family: var(--f-gothic); font-size: 12px; opacity: .82; }
.place-chip__name { font-family: var(--f-gothic); font-weight: 700; font-size: 14px; }
.place-chip__addr { font-family: var(--f-gothic); font-size: 11px; opacity: .78; }
.contact-form .form-row--place[hidden] { display: none; }
.place-chip[hidden] { display: none; }

/* 日付・時刻ピッカー（来場予約） */
.dtp-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 280px; padding: 13px 16px; border: 1px solid #ccc; background: #fff; font: inherit; font-family: var(--f-gothic); color: var(--c-ink); cursor: pointer; text-align: left; }
.dtp-field:hover { border-color: var(--c-yellow); }
.dtp-field:focus { outline: 2px solid var(--c-yellow); border-color: var(--c-yellow); }
.dtp-field__text { color: #999; }
.dtp-field__text.is-set { color: var(--c-ink); }
.dtp-field i { color: #888; }
.dtp-wdtag { margin-left: 2px; }
.dtp-wdtag.is-sat { color: #2271b1; } .dtp-wdtag.is-sun { color: #d63638; }
.dtp-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(18,22,40,.5); padding: 20px; }
.dtp-modal.is-open { display: flex; }
.dtp-modal__box { position: relative; background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 22px 24px; font-family: var(--f-gothic); color: var(--c-ink); max-width: calc(100vw - 40px); }
.dtp-modal__close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--c-sumi); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.3); }
.dtp-modal__body { max-height: 86vh; overflow: auto; }
.dtp-cal__head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.dtp-cal__nav { width: 34px; height: 34px; border: 1px solid var(--c-line); background: #fff; border-radius: 6px; font-size: 18px; cursor: pointer; }
.dtp-cal__nav:hover { background: #f2f2ef; }
.dtp-cal__title { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.dtp-cal__title select { font: inherit; padding: 4px 6px; border: 1px solid var(--c-line); border-radius: 5px; }
.dtp-cal__months { display: flex; gap: 24px; }
.dtp-cal__sep { width: 1px; background: var(--c-line); align-self: stretch; }
.dtp-mo__label { text-align: center; font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.dtp-mo__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.dtp-wd { display: grid; place-items: center; height: 28px; font-size: 11px; color: #666; }
.dtp-wd.is-sat { color: #2271b1; } .dtp-wd.is-sun { color: #d63638; }
.dtp-day { display: grid; place-items: center; height: 34px; border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer; border-radius: 6px; color: var(--c-ink); }
.dtp-day:hover { background: var(--c-yellow); }
.dtp-day.is-sat { color: #2271b1; } .dtp-day.is-sun { color: #d63638; }
.dtp-day.is-empty { pointer-events: none; }
.dtp-day.is-disabled { color: #cfcfcf; cursor: not-allowed; text-decoration: line-through; }
.dtp-day.is-disabled:hover { background: none; }
.dtp-time { display: flex; gap: 26px; }
.dtp-time__title { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 10px; }
.dtp-time__label { font-size: 11px; color: #888; margin: 8px 0 4px; }
.dtp-time__grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 5px; }
.dtp-time__grid--min { grid-template-columns: repeat(4, 48px); }
.dtp-time__grid button { height: 38px; border: 1px solid var(--c-line); background: #fff; font: inherit; font-size: 14px; cursor: pointer; border-radius: 6px; }
.dtp-time__grid button:hover { background: #f2f2ef; }
.dtp-time__grid button.is-on { background: var(--c-sumi); color: #fff; border-color: var(--c-sumi); }
@media (max-width: 600px) {
	.dtp-cal__months { flex-direction: column; gap: 18px; }
	.dtp-cal__sep { display: none; }
	.dtp-time { flex-direction: column; gap: 16px; }
	.dtp-mo__grid { grid-template-columns: repeat(7, 1fr); }
	.dtp-time__grid { grid-template-columns: repeat(6, 1fr); }
	.dtp-time__grid--min { grid-template-columns: repeat(4, 1fr); }
}
.hp { position: absolute; left: -9999px; }
.form-row { margin-bottom: 24px; }
.form-row label { display: block; font-family: var(--f-gothic); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 14px 16px; border: 1px solid #ccc; font: inherit; font-family: var(--f-gothic); background: #fff; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--c-yellow); border-color: var(--c-yellow); }
/* 必須／任意バッジ：項目名の「前」に置く */
.badge { display: inline-block; margin-right: 8px; font-family: var(--f-gothic); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 3px; vertical-align: middle; }
.badge.req { background: var(--c-yellow); color: var(--c-sumi); }
.badge.opt { background: #e6e6e6; color: #555; }
.req { display: inline-block; background: var(--c-yellow); color: var(--c-sumi); font-family: var(--f-gothic); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; vertical-align: middle; }
.form-agree { display: flex; align-items: center; gap: 10px; font-family: var(--f-gothic); font-size: 14px; margin-top: 10px; }
.form-agree a { text-decoration: underline; }

/* 法人ボックス */
.corp-box { margin-top: 30px; background: #fff; border: 1px solid var(--c-line); padding: clamp(26px,3vw,44px); text-align: center; }
.corp-box__label { font-family: var(--f-gothic); font-weight: 700; margin-bottom: 12px; }
.corp-box__mail { font-family: var(--f-en); font-size: clamp(20px,2.4vw,32px); }
.corp-box__mail a { text-decoration: underline; text-underline-offset: 4px; }

/* サイトマップ */
.sitemap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(30px,4vw,56px); }
.sitemap-col__head { border-bottom: 2px solid var(--c-sumi); padding-bottom: 14px; margin-bottom: 18px; }
.sitemap-col__en { display: block; font-family: var(--f-en); font-weight: 300; font-size: clamp(22px,2vw,30px); }
.sitemap-col__ja { display: block; font-family: var(--f-gothic); font-size: 13px; color: var(--c-gray); margin-top: 4px; }
.sitemap-col__list a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-family: var(--f-gothic); font-size: 15px; }
.sitemap-col__list i { color: var(--c-yellow); }
.sitemap-col__list a:hover { color: var(--c-gray); }

/* archive card category badge */
.archive-card__thumb { position: relative; }
.archive-card__cat { position: absolute; left: 0; top: 0; z-index: 2; background: var(--c-sumi); color: #fff; font-family: var(--f-gothic); font-size: 12px; padding: 5px 14px; }

/* footer legal links */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 16px; }
.footer-legal a { font-family: var(--f-gothic); font-size: 13px; color: rgba(255,255,255,.7); }
.footer-legal a:hover { color: var(--c-yellow); }

/* ---- responsive ---- */
@media (max-width: 900px) {
	.philosophy-grid, .strength-grid, .know-grid, .interview-grid, .sitemap-grid { grid-template-columns: repeat(2,1fr); }
	.message-block { grid-template-columns: 1fr; }
	.message-block__media img { aspect-ratio: 16/10; }
	.biz-card a, .biz-card:nth-child(even) a { grid-template-columns: 1fr; direction: ltr; }
	.biz-card__img { min-height: 200px; aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
	.philosophy-grid, .strength-grid, .know-grid, .interview-grid, .sitemap-grid { grid-template-columns: 1fr; }
	.info-table th { width: 38%; }
	.timeline__item { grid-template-columns: 84px 1fr; gap: 14px; }
	.lower-tabs ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.lower-tabs a { white-space: nowrap; }
	.lower-cta .btn-fill, .contact-form .btn-fill { width: 100%; min-width: 0; }
}

/* 事業強み：実績スタッツ */
.proof-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--c-line); border: 1px solid var(--c-line); margin: clamp(28px,3vw,42px) 0; }
.proof-cell { background: #fff; text-align: center; padding: clamp(22px,2.6vw,38px) 8px; }
.proof-cell__num { display: block; font-family: var(--f-en); font-weight: 300; font-size: clamp(30px,4vw,56px); line-height: 1; color: var(--c-sumi); }
.proof-cell__num small { font-size: .34em; font-family: var(--f-gothic); }
.proof-cell__label { display: block; margin-top: 12px; font-family: var(--f-gothic); font-size: 13px; }
.proof-cell__label small { font-size: 10px; color: var(--c-gray); }
.strength-subhead { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(16px,1.4vw,20px); margin-top: 10px; }

/* 企業理念ステートメント */
.philosophy-statement { text-align: center; padding: clamp(20px,3vw,40px) 0 clamp(30px,4vw,54px); }
.philosophy-statement__ja { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(30px,5vw,64px); letter-spacing: .06em; }
.philosophy-statement__note { margin-top: 18px; font-family: var(--f-gothic); font-size: clamp(13px,1vw,16px); line-height: 2; color: #444; }

/* グループ会社 */
.group-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2vw,26px); margin-top: 34px; }
.group-card { border: 1px solid var(--c-line); padding: clamp(24px,2.6vw,40px); background: #fff; }
.group-card__en { display: block; font-family: var(--f-en); font-weight: 300; font-size: clamp(24px,2.4vw,38px); line-height: 1; }
.group-card__name { display: block; font-family: var(--f-gothic); font-weight: 700; font-size: 18px; margin-top: 10px; }
.group-card__cat { display: inline-block; margin-top: 12px; font-family: var(--f-gothic); font-size: 12px; letter-spacing: .04em; background: var(--c-yellow); color: var(--c-sumi); padding: 3px 12px; }
.group-card__desc { margin-top: 16px; font-family: var(--f-gothic); font-size: 14px; line-height: 2; color: #444; }

@media (max-width: 767px) {
	.proof-row { grid-template-columns: repeat(2,1fr); }
	.group-grid { grid-template-columns: 1fr; }
}

/* お問い合わせ：その他フォームへの導線 */
.form-links { display: grid; gap: 14px; margin-top: 30px; }
.form-link { display: flex; align-items: baseline; gap: 16px; padding: 24px 28px; border: 1px solid var(--c-line); background: #fff; font-family: var(--f-gothic); transition: .25s var(--ease); }
.form-link span { font-weight: 700; font-size: clamp(16px,1.4vw,19px); }
.form-link small { font-family: var(--f-en); font-size: 12px; color: var(--c-gray); letter-spacing: .06em; }
.form-link i { margin-left: auto; align-self: center; transition: transform .3s var(--ease); }
.form-link:hover { border-color: var(--c-sumi); background: #faf8ef; }
.form-link:hover i { transform: translateX(8px); }

/* 社員インタビュー詳細 */
.interview-detail__head { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px,3vw,48px); align-items: center; margin-bottom: clamp(34px,4vw,56px); }
.interview-detail__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.interview-detail__meta { font-family: var(--f-gothic); font-size: 14px; color: var(--c-gray); letter-spacing: .04em; }
.interview-detail__name { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(26px,3vw,44px); margin: 10px 0 18px; }
.interview-detail__catch { font-family: var(--f-mincho); font-weight: 600; font-size: clamp(20px,2.2vw,32px); line-height: 1.5; color: var(--c-ink); }
.interview-detail__body h2 { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(18px,1.6vw,24px); margin-top: 2em; padding-left: 16px; border-left: 5px solid var(--c-yellow); }
@media (max-width: 767px) {
	.interview-detail__head { grid-template-columns: 1fr; }
	.interview-detail__photo img { aspect-ratio: 16/10; }
}

/* =========================================================
   リブランディング告知ページ
   ========================================================= */
.rebrand__date { font-family: var(--f-en); font-size: 15px; color: var(--c-gray); }
.rebrand__title { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(24px,3vw,42px); line-height: 1.5; margin: 14px 0 30px; }
.rebrand-sec { padding-block: clamp(46px,6vw,88px); }
.rebrand-sec .sec-head { margin-bottom: clamp(24px,3vw,40px); }

/* 新ロゴのステージ */
.rebrand-logo { margin: clamp(30px,4vw,56px) 0; background: var(--c-yellow); }
.rebrand-logo__stage { display: flex; align-items: center; justify-content: center; gap: clamp(20px,3vw,46px); padding: clamp(50px,8vw,120px) var(--pad); color: var(--c-ink); }
/* 新ロゴはブランド使用規定の公式ロゴ（縦組みロックアップ）をインラインSVGで掲出。黄背景に墨色。
   インライン化により、ロゴ差し替え時はキャッシュに影響されず即反映される。 */
.rebrand-logo__official { display: block; width: clamp(220px,36vw,400px); color: var(--c-ink); }
.rebrand-logo__official .brand-lockup { display: block; width: 100%; height: auto; fill: currentColor; }

/* カラー説明 */
.color-list { display: grid; gap: 16px; margin-top: 28px; }
.color-list__item { display: flex; align-items: flex-start; gap: 18px; border: 1px solid var(--c-line); padding: 20px 22px; }
.color-chip { width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.12); }
.color-list__body { font-family: var(--f-gothic); }
.color-list__body b { font-weight: 700; font-size: 17px; }
.color-list__code { font-family: var(--f-en); font-size: 12px; color: var(--c-gray); margin-left: 12px; }
.color-list__body small { display: block; margin-top: 8px; font-size: 14px; line-height: 1.9; color: #444; }

/* スローガン */
.rebrand-slogan { text-align: center; padding: clamp(30px,4vw,56px) 20px; background: #faf8ef; border: 1px solid var(--c-line); }
.rebrand-slogan__ja { font-family: var(--f-mincho); font-weight: 700; font-size: clamp(28px,4.4vw,58px); letter-spacing: .06em; }
.rebrand-slogan__en { font-family: var(--f-en); font-weight: 300; font-size: clamp(14px,1.5vw,22px); margin-top: 14px; color: #444; }

/* 協賛企業（5段階サイズ） */
.rebrand-sponsors { background: #fff; }
.sponsor-tier + .sponsor-tier { margin-top: clamp(48px,5.5vw,80px); padding-top: clamp(48px,5.5vw,80px); border-top: 1px solid var(--c-ink); }
.sponsor-tier__label { font-family: var(--f-gothic); font-weight: 700; font-size: 15px; letter-spacing: .1em; margin-bottom: 18px; display: inline-block; background: var(--c-sumi); color: #fff; padding: 5px 18px; }
.sponsor-grid { display: grid; gap: clamp(10px,1.2vw,18px); }
.sponsor-cell { border: 1px solid var(--c-line); background: #fff; display: grid; place-items: center; padding: 10px; }
.sponsor-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor-cell__ph { font-family: var(--f-gothic); color: #b5b5b5; text-align: center; line-height: 1.3; }

/* 5段階（A1〜A5）：上位ほど大きく、列数が少ない */
.sponsor-tier--a1 .sponsor-grid { grid-template-columns: repeat(2,1fr); }
.sponsor-tier--a1 .sponsor-cell { aspect-ratio: 5/2; }
.sponsor-tier--a1 .sponsor-cell__ph { font-size: 17px; }

.sponsor-tier--a2 .sponsor-grid { grid-template-columns: repeat(3,1fr); }
.sponsor-tier--a2 .sponsor-cell { aspect-ratio: 5/2; }
.sponsor-tier--a2 .sponsor-cell__ph { font-size: 15px; }

.sponsor-tier--a3 .sponsor-grid { grid-template-columns: repeat(4,1fr); }
.sponsor-tier--a3 .sponsor-cell { aspect-ratio: 5/2; }
.sponsor-tier--a3 .sponsor-cell__ph { font-size: 14px; }

.sponsor-tier--a4 .sponsor-grid { grid-template-columns: repeat(5,1fr); }
.sponsor-tier--a4 .sponsor-cell { aspect-ratio: 5/2; }
.sponsor-tier--a4 .sponsor-cell__ph { font-size: 12px; }

.sponsor-tier--a5 .sponsor-grid { grid-template-columns: repeat(8,1fr); }
.sponsor-tier--a5 .sponsor-cell { aspect-ratio: 5/2; }
.sponsor-tier--a5 .sponsor-cell__ph { font-size: 10px; }

@media (max-width: 900px) {
	.sponsor-tier--a1 .sponsor-grid { grid-template-columns: repeat(2,1fr); }
	.sponsor-tier--a2 .sponsor-grid { grid-template-columns: repeat(3,1fr); }
	.sponsor-tier--a3 .sponsor-grid { grid-template-columns: repeat(3,1fr); }
	.sponsor-tier--a4 .sponsor-grid { grid-template-columns: repeat(4,1fr); }
	.sponsor-tier--a5 .sponsor-grid { grid-template-columns: repeat(5,1fr); }
}
@media (max-width: 600px) {
	.rebrand-logo__stage { flex-direction: column; text-align: center; }
	.sponsor-tier--a1 .sponsor-grid { grid-template-columns: repeat(1,1fr); }
	.sponsor-tier--a2 .sponsor-grid { grid-template-columns: repeat(2,1fr); }
	.sponsor-tier--a3 .sponsor-grid { grid-template-columns: repeat(2,1fr); }
	.sponsor-tier--a4 .sponsor-grid { grid-template-columns: repeat(3,1fr); }
	.sponsor-tier--a5 .sponsor-grid { grid-template-columns: repeat(4,1fr); }
	.color-list__item { flex-direction: column; }
}

/* フォーム：広い画面ではラベル＋入力の2カラム（1300px幅でも間延びしない） */
@media (min-width: 768px) {
	.form-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 6px 32px; align-items: start; }
	.form-row label { margin-bottom: 0; padding-top: 15px; }
	.form-row input, .form-row select { max-width: 560px; }
	.form-row textarea { max-width: 780px; }
	.form-agree { padding-left: 272px; }
}

/* 下層ページのセクション英語見出しは、ページヘッダー(.page-hero__en)より一回り小さく
   ※ トップページ(.home)はデザイン再現のため従来サイズを維持 */
body:not(.home) .sec-head__en { font-size: clamp(32px, 5vw, 76px); }

/* 社員インタビューが1件のときは横並びのフィーチャー表示 */
.interview-grid--single { grid-template-columns: 1fr; }
.interview-grid--single .interview-card a { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(20px,3vw,44px); align-items: center; }
.interview-grid--single .interview-card__img { aspect-ratio: 4/3; }
.interview-grid--single .interview-card__meta { margin-top: 0; font-size: 14px; }
.interview-grid--single .interview-card__title { font-size: clamp(20px,2.2vw,32px); line-height: 1.5; margin-top: 10px; }
.interview-grid--single .interview-card__more { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; font-family: var(--f-en); font-size: 14px; }
@media (max-width: 767px) {
	.interview-grid--single .interview-card a { grid-template-columns: 1fr; }
}

/* 採用ページ内に埋め込む社員インタビュー */
.interview-block + .interview-block { margin-top: clamp(40px,5vw,72px); padding-top: clamp(40px,5vw,72px); border-top: 1px solid var(--c-line); }
/* ヘッダー（INTERVIEW番号・部署/入社年・氏名）は画像の上 */
.interview-block__head { margin-bottom: clamp(20px,2.4vw,32px); }
.interview-block__row { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(24px,3.4vw,56px); align-items: start; }
.interview-block__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.interview-block__no { display: inline-block; font-family: var(--f-en); font-weight: 300; font-size: 13px; letter-spacing: .12em; background: var(--c-yellow); color: var(--c-ink); padding: 4px 14px; }
/* 氏名の右に部署・入社年を配置（ベースライン揃え） */
.interview-block__namewrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.interview-block__meta { margin: 0; font-family: var(--f-gothic); font-size: 14px; color: var(--c-gray); letter-spacing: .04em; }
.interview-block__name { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(24px,2.6vw,38px); margin: 0; }
.interview-block__catch { font-family: var(--f-mincho); font-weight: 600; font-size: clamp(19px,2vw,30px); line-height: 1.6; margin-top: 16px; }
.interview-block__body { margin-top: clamp(24px,2.6vw,36px); }
.interview-block__body h2 { font-family: var(--f-gothic); font-weight: 700; font-size: clamp(17px,1.5vw,21px); margin-top: 1.9em; padding-left: 14px; border-left: 5px solid var(--c-yellow); }
.interview-block__body h2:first-child { margin-top: 0; }
.interview-block__body p { font-size: 15px; line-height: 2.1; margin-top: .8em; }
@media (max-width: 767px) {
	.interview-block__row { grid-template-columns: 1fr; }
	.interview-block__photo img { aspect-ratio: 4/3; }
}

/* FVキャッチをSVG画像に差し替え（雪国の暮らしを豊かに＋英語・白） */
.fv__catch-svg { margin: 0; line-height: 0; }
.fv__catch-svg img { width: clamp(260px, 33vw, 480px); height: auto; display: block; }
@media (max-width: 767px) {
	.fv__catch-svg img { width: min(78vw, 420px); }
}

/* FV背景動画（上越の四季・クロスフェード） */
.fv__video { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.fv__video-item {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 1s linear; will-change: opacity;
}
.fv__video-item.is-active { opacity: 1; }
/* 動画読込前に見えるフォールバック画像（動画レイヤーの下） */
.fv__bg-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.fv__bg-tint { z-index: 1; }
/* 「動きを減らす」設定時は切替アニメを止め、1本目を静止表示（背景は成立させる） */
/* 「動きを減らす」設定でも、背景動画のクロスフェードだけは維持する
   （全体ルールの transition-duration:.001ms を上書き。切替が瞬間的になるのを防ぐ） */
@media (prefers-reduced-motion: reduce) {
	.fv__video-item { transition: opacity 1s linear !important; }
}

/* =========================================================
   ローディングアニメーション
   ========================================================= */
.loader {
	position: fixed; inset: 0; z-index: 3000;
	display: grid; place-items: center;
	background: var(--c-yellow);
	/* visibility は時間をかけて変化させない（合成できずメインスレッドを使うため）。
	   フェードは opacity だけで行い、visibility は .7s 後に一気に切り替える。 */
	transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.loader__mark {
	width: clamp(64px, 9vw, 104px); height: clamp(64px, 9vw, 104px);
	color: var(--c-ink); display: block;
	/* マークは点滅させず、最初に一度だけふわっと出すだけにする */
	opacity: 0; animation: loaderFadeIn .7s var(--ease) both;
}
.loader__mark .brand-mark { width: 100%; height: 100%; }
.loader__text {
	font-family: var(--f-en); font-weight: 400; font-size: clamp(13px, 1.3vw, 17px);
	letter-spacing: .28em; text-indent: .28em; color: var(--c-ink);
	opacity: 0; animation: loaderText .8s var(--ease) .2s forwards;
}
.loader__bar { width: clamp(140px, 18vw, 220px); height: 2px; background: rgba(35,24,21,.18); overflow: hidden; display: block; }
.loader__bar i { display: block; width: 100%; height: 100%; background: var(--c-ink); transform: scaleX(0); transform-origin: left center; animation: loaderBar 1.6s cubic-bezier(.65,0,.35,1) infinite; }

/* FVイントロへつなぐときは、イントロ冒頭と同じ「黒地に黄色」にしておく。
   ローディングがフェードアウトすると、そのまま黒背景のイントロに溶け込む。 */
html.will-intro .loader { background: #000; }
html.will-intro .loader__mark,
html.will-intro .loader__text { color: var(--c-yellow); }
html.will-intro .loader__bar { background: rgba(251,226,0,.22); }
html.will-intro .loader__bar i { background: var(--c-yellow); }

@keyframes loaderText { to { opacity: 1; } }
/* バーは左端から伸びきったあと、右端へ収束して次の周回に入る（点滅させない）
   transform-origin をキーフレーム内で切り替えると GPU で合成できずメインスレッドを使うため、
   原点は left 固定にして、収束は translateX との組み合わせで表現する。
   translateX(100%-ぶん) と scaleX を同じ割合で動かすと右端が幅いっぱいに留まる。 */
@keyframes loaderBar {
	0%   { transform: translateX(0) scaleX(0); }
	48%  { transform: translateX(0) scaleX(1); }
	52%  { transform: translateX(0) scaleX(1); }
	100% { transform: translateX(100%) scaleX(0); }
}

/* 読み込み完了 */
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* ローディング中は背面をスクロールさせない。
   ローダーが存在する間は既定でロックし、解除時(.loaded)に戻す方式にして
   低速回線でJS到達が遅れてもロックが確実に効くようにする。 */
html:has(#loader:not(.is-done)) { overflow: hidden; }
body:has(#loader:not(.is-done)) { overflow: hidden !important; }

/* ローディング解除後、FVの主要素をふわっと出す。
   イントロ演出がある場合はキャッチもリードも黒い覆いの下に置いたままにし、
   帯が通り過ぎるのに合わせて現れるので、ここでのフェードは掛けない（.had-intro）。 */
body:has(#loader:not(.is-done)) .fv__wordmark,
body:has(#loader:not(.is-done)) .fv__catch-wrap,
body:has(#loader:not(.is-done)) .fv__lead { opacity: 0; }
.fv__wordmark, .fv__catch-wrap, .fv__lead {
	opacity: 1; transition: opacity .9s var(--ease), transform .9s var(--ease);
}
body.fv-ready:not(.had-intro) .fv__catch-wrap { animation: fvRise 1s var(--ease) .15s both; }
body.fv-ready:not(.had-intro) .fv__lead { animation: fvRise 1s var(--ease) .35s both; }
@keyframes fvRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* 「視差効果を減らす」設定でも、ローディングが止まって見えないようにする。
   バーの伸縮と不透明度の変化は不快感の原因になる動きではないためそのまま活かし、
   上部の全体指定（.001ms !important）で潰される duration だけを戻す。
   FVの見出しは、せり上がり（移動）をやめて不透明度のみのフェードに差し替える。 */
@media (prefers-reduced-motion: reduce) {
	.loader__mark { animation-duration: .7s !important; }
	.loader__text { animation-duration: .8s !important; }
	.loader__bar i { animation-duration: 1.6s !important; }
	/* 読み込み完了時のフェードアウトは「動き」ではないので、reduce 環境でも残す
	   （全体指定の .001ms で潰されると、パッと消えてしまうため戻す） */
	.loader { transition: opacity .7s ease, visibility .7s ease !important; }
	body.fv-ready:not(.had-intro) .fv__catch-wrap { animation: loaderFadeIn .9s ease .15s both !important; animation-duration: .9s !important; }
	body.fv-ready:not(.had-intro) .fv__lead { animation: loaderFadeIn .9s ease .35s both !important; animation-duration: .9s !important; }
	/* イントロは演出の骨格そのものなので、duration を戻して最後まで再生させる */
	.fv-intro { transition-duration: .5s !important; }
	.fv-intro.is-playing .fv-intro__ch { animation-duration: .62s !important; }
	.fv-intro.is-playing .fv-intro__word { animation-duration: 1.15s !important; }
	.fv-intro.is-playing .fv-intro__band,
	.fv-intro.is-playing .fv-intro__veil { animation-duration: 1.32s !important; }
}
@keyframes loaderFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   FV イントロアニメーション（トップページ）
   黒背景に黄色の HASEGAWA が1文字ずつせり上がって画面下部に揃い、
   そのあと文字と黄色い帯がそれぞれ最終位置へイーズインイーズアウトで移動する。
   帯は mix-blend-mode:difference のため、黒地の上では黄色に、
   黄色の文字に重なった部分は黒に反転する（＝通常表示と同じ配色になる）。
   最終位置は実FVのワードマークをJSが実測してCSS変数で渡す。
   ========================================================= */
.fv-intro {
	position: fixed; inset: 0; z-index: 2500;
	overflow: hidden; pointer-events: none;
	transition: opacity .5s var(--ease);
	/* JSが実FVを実測して各位置(--band-top 等)を入れるまでは描画しない。
	   仮の初期値のまま一度描いてしまうと、実測値が入った瞬間に
	   黒い覆いが大きく動き、レイアウトシフト(CLS)として計上される。
	   実測後に JS が .is-ready を付ける。JSが動かない環境では
	   イントロ自体が出ないが、通常のFV表示になるだけで破綻はしない。 */
	visibility: hidden;
}
.fv-intro.is-ready { visibility: visible; }
.fv-intro.is-done { opacity: 0; }
/* 黒い覆い。帯と同じアニメーションで動かし、帯が通り過ぎた部分から順に
   実FV（動画＋青オーバーレイ＋白文字）が現れるようにする。
   下端は帯の下端より2px上に置く。境界を1本の辺（帯の下端）だけにして、
   端が重なった2枚のレイヤーの丸め差でスジが出るのを防ぐ。 */
.fv-intro__veil {
	position: absolute; left: 0; width: 100%;
	top: calc(var(--band-top, 40vh) + var(--band-h, 60vh) - var(--veil-h, 300vh) - 2px);
	height: var(--veil-h, 300vh);
	background: #000;
	transform: translateY(var(--band-shift, 100vh));
}
/* イントロ中はヘッダーを演出より前に出し、帯が覆った範囲だけJSがクリップして見せる */
body.is-intro .site-header { z-index: 2600; }
.fv-intro__word {
	position: absolute; left: var(--iw-left, 0); top: var(--iw-top, 60vh);
	transform: translateY(var(--iw-shift, 30vh));
	font-family: var(--f-en); font-weight: 400;
	font-size: 13.3vw; line-height: .8; letter-spacing: -.015em; white-space: nowrap;
}
/* 帯に覆われた部分だけ墨色に変わって見えるよう、同じ文字を色違いで2枚重ね、
   帯の上端を境にJSがクリップし分ける。合成モードを使わないので色が濁らず、
   墨色の側は実FVのワードマークと完全に同色・同位置になる。 */
.fv-intro__word--y { color: var(--c-yellow); }
.fv-intro__word--k { color: var(--c-ink); }
/* 1文字ずつspanに割るとカーニングが効かず実FVと字送りがズレるため、
   実FVのワードマークから1文字ごとのX座標を実測してJSが絶対配置する。 */
.fv-intro__ch { position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(.7em); }
.fv-intro__band {
	position: absolute; left: 0; width: 100%;
	top: var(--band-top, 40vh); height: var(--band-h, 60vh);
	background: var(--c-yellow);
	transform: translateY(var(--band-shift, 100vh));
}
/* 再生開始（ローディング解除後にJSが is-playing を付与） */
.fv-intro.is-playing .fv-intro__ch {
	animation: fviChar .62s cubic-bezier(.22,.9,.28,1) both;
	animation-delay: calc(var(--i) * .06s); /* 左から1文字ずつズレて立ち上がる */
}
.fv-intro.is-playing .fv-intro__word { animation: fviWord 1.15s cubic-bezier(.65,0,.35,1) 1.25s both; }
.fv-intro.is-playing .fv-intro__band,
.fv-intro.is-playing .fv-intro__veil { animation: fviBand 1.32s cubic-bezier(.65,0,.35,1) 1.42s both; }
@keyframes fviChar { from { opacity: 0; transform: translateY(.7em); } to { opacity: 1; transform: translateY(0); } }
@keyframes fviWord { from { transform: translateY(var(--iw-shift)); } to { transform: translateY(0); } }
@keyframes fviBand { from { transform: translateY(var(--band-shift)); } to { transform: translateY(0); } }
/* イントロ中は背面をスクロールさせない（JSで付け外しするためJS無効時は何も起きない） */
body.is-intro { overflow: hidden; }
html:has(body.is-intro) { overflow: hidden; }

/* リブランディング：公式ロゴ基本形（縦組み）＋MISSION/VISION/VALUE */
.rebrand-logo__stage { flex-direction: column; gap: clamp(14px,2vw,26px); }
.rebrand-logo__type { text-align: center; }
.rebrand-logo__tag { font-family: var(--f-gothic); font-weight: 500; font-size: clamp(13px,1.4vw,20px); letter-spacing: .34em; text-indent: .34em; color: var(--c-ink); }
.rebrand-slogan__label { font-family: var(--f-en); font-size: 12px; letter-spacing: .18em; color: var(--c-gray); margin-bottom: 14px; }
.mv-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2vw,26px); margin-top: clamp(20px,2.6vw,34px); }
.mv-card { border: 1px solid var(--c-line); padding: clamp(24px,2.6vw,40px); background: #fff; text-align: center; }
.mv-card__en { display: block; font-family: var(--f-en); font-weight: 300; font-size: clamp(20px,2vw,30px); }
.mv-card__ja { display: block; font-family: var(--f-gothic); font-size: 12px; color: var(--c-gray); margin-top: 4px; }
.mv-card__body { margin-top: 18px; font-family: var(--f-gothic); font-weight: 500; font-size: clamp(14px,1.2vw,17px); line-height: 2; }
@media (max-width: 767px) { .mv-grid { grid-template-columns: 1fr; } }

/* VISION / VALUE：スローガンと同じ1列表示（複数行なので少し小さめ・行間広め） */
.rebrand-slogan__ja--sm { font-size: clamp(20px,2.9vw,38px); line-height: 1.75; }

/* 協賛ロゴ：枠内に収めつつ、余白を絞ってロゴを大きめに見せる */
.sponsor-cell { padding: clamp(3px,0.35vw,6px); }
.sponsor-cell img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* 協賛ロゴ一覧の直後の注記が、縦長ロゴと重ならないよう余白を確保 */
.rebrand-sponsors .lower-note { margin-top: clamp(24px,3vw,40px); }

/* ロゴは枠内で中央揃え。比率を保ったまま枠いっぱいまで拡大する。
   width/height を 100% にしたうえで object-fit:contain とすることで、
   小さい原画（HAL等）も枠ギリギリまで引き伸ばされ、余白の空きすぎを防ぐ。 */
.sponsor-cell { overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.sponsor-cell img,
.sponsor-cell svg { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.sponsor-grid > .sponsor-cell { min-width: 0; min-height: 0; }

/* 協賛ロゴのリンク：枠いっぱい表示を保ちつつ、ホバーで反応を返す */
.sponsor-cell__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transform: scale(1); transform-origin: center; will-change: transform; transition: opacity .5s var(--ease), transform .5s cubic-bezier(.22,.61,.36,1); }
.sponsor-cell__link:hover { opacity: .78; transform: scale(1.05); }
.sponsor-cell__link:focus-visible { outline: 2px solid var(--c-sumi); outline-offset: 2px; }
/* ホバーの拡大は利用者が起こす操作なので、reduce 環境でもなめらかに動かす
   （全体指定の .001ms で潰されるとカクッと切り替わるため戻す） */
@media (prefers-reduced-motion: reduce) {
	.sponsor-cell__link { transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1) !important; }
	/* ホバー操作で起こす色変化・拡大は「動き出しの不快感」が無いので、reduce環境でも
	   なめらかに残す（全体指定の .001ms で潰さない） */
	.concept__hero img { transition: filter 1.7s ease !important; }
	.concept__hero.is-color::before { transition: opacity 1.7s ease !important; }
	.concept__hero::after { transition: opacity .7s ease !important; }
	/* 四角ボタン・SNSボタンの「左から黄色に塗る」ホバー */
	.btn__fill { transition: clip-path .3s ease !important; }
	/* 見出しの1文字ずつ浮き上がりは残す */
	.sec-head__en.is-in .char { animation: charRise .55s ease both !important; animation-delay: calc(var(--i) * .045s) !important; }
	/* RECRUITの「JOIN US」マーキーは流し続ける */
	.recruit__marquee-track { animation: marquee 22s linear infinite !important; animation-duration: 22s !important; }
	/* RECRUITカードENTRYの左から反転も残す */
	.recruit-card__btn .btn__fill { transition: clip-path .4s ease !important; }
	/* ヒーローのスクロール誘導は動き続けてこそ意味があるので残す */
	.fv__scroll-line::after { animation: fvScroll 1.9s cubic-bezier(.7,0,.3,1) infinite !important; animation-duration: 1.9s !important; }
	/* 画像リンクのホバー拡大 */
	.col-card__thumb img,
	.archive-card__thumb img,
	.biz-card__img img,
	.interview-card__img img,
	.service-card__img img { transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .5s ease !important; }
	/* ハンバーガー→✕ の変形は残す */
	.hamburger__lines span { transition: top .35s ease, transform .35s ease, background .35s ease !important; }
}

/* 協賛ロゴ：列数に満たない行（端数の行）も中央に揃える。
   grid の列指定のままだと左詰めになるため、flex + 折り返しで中央寄せにする。
   1枠の幅は「(100% - 余白) ÷ 列数」で算出し、列数は各段階で維持する。 */
.sponsor-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sponsor-grid > .sponsor-cell { flex: 0 0 auto; }
/* 実質協賛金額のランク別 列数（PC）
   A1=2 / A2=4 / A3=4 / A4=6 / A5=6 / A6=6　※A3・A5はモノクロ、A6は社名テキスト */
.sponsor-tier--a1 .sponsor-cell { width: calc((100% - 1 * clamp(10px,1.2vw,18px)) / 2); }
.sponsor-tier--a2 .sponsor-cell { width: calc((100% - 3 * clamp(10px,1.2vw,18px)) / 4); }
.sponsor-tier--a3 .sponsor-cell { width: calc((100% - 3 * clamp(10px,1.2vw,18px)) / 4); }
.sponsor-tier--a4 .sponsor-cell { width: calc((100% - 5 * clamp(10px,1.2vw,18px)) / 6); }
.sponsor-tier--a5 .sponsor-cell { width: calc((100% - 5 * clamp(10px,1.2vw,18px)) / 6); }
.sponsor-tier--a6 .sponsor-cell { width: calc((100% - 5 * clamp(10px,1.2vw,18px)) / 6); }

/* タブレット（中間） */
@media (max-width: 900px) {
	.sponsor-tier--a1 .sponsor-cell { width: calc((100% - 1 * clamp(10px,1.2vw,18px)) / 2); }
	.sponsor-tier--a2 .sponsor-cell,
	.sponsor-tier--a3 .sponsor-cell { width: calc((100% - 2 * clamp(10px,1.2vw,18px)) / 3); }
	.sponsor-tier--a4 .sponsor-cell,
	.sponsor-tier--a5 .sponsor-cell,
	.sponsor-tier--a6 .sponsor-cell { width: calc((100% - 3 * clamp(10px,1.2vw,18px)) / 4); }
}
/* スマホ　A1=1 / A2=2 / A3=2 / A4=3 / A5=3 / A6=2 */
@media (max-width: 600px) {
	.sponsor-tier--a1 .sponsor-cell { width: 100%; }
	.sponsor-tier--a2 .sponsor-cell,
	.sponsor-tier--a3 .sponsor-cell,
	.sponsor-tier--a6 .sponsor-cell { width: calc((100% - 1 * clamp(10px,1.2vw,18px)) / 2); }
	.sponsor-tier--a4 .sponsor-cell,
	.sponsor-tier--a5 .sponsor-cell { width: calc((100% - 2 * clamp(10px,1.2vw,18px)) / 3); }
}

/* A1（特大）は枠とロゴの間の余白を広めにとって、ゆとりを持たせる */
.sponsor-tier--a1 .sponsor-cell { padding: clamp(24px,3vw,52px); }

/* A3・A5 はモノクロ掲出（ロゴをグレースケール化） */
.sponsor-tier--a3 .sponsor-cell img,
.sponsor-tier--a3 .sponsor-cell svg,
.sponsor-tier--a5 .sponsor-cell img,
.sponsor-tier--a5 .sponsor-cell svg { filter: grayscale(1); }

/* ロゴ画像が無い企業は社名テキストで表示（読める濃さにする） */
.sponsor-cell__name {
	font-family: var(--f-gothic); font-weight: 500; color: var(--c-ink);
	text-align: center; line-height: 1.35; letter-spacing: .01em;
	font-size: clamp(11px, 1vw, 14px); padding: 4px 6px;
	/* 日本語は文節（自然な区切り）で改行。auto-phrase 非対応ブラウザは normal にフォールバック */
	word-break: normal; word-break: auto-phrase; overflow-wrap: anywhere;
}
/* A6（3万円）は社名テキストのみ。枠は軽く、高さを抑える */
.sponsor-tier--text .sponsor-cell { aspect-ratio: auto; min-height: 54px; border-color: var(--c-line); }
.sponsor-tier--text .sponsor-cell__name { font-size: clamp(12px, 1.15vw, 15px); }

/* A1〜A5 のロゴが無い企業は、社名を大きく・太字で表示（ランクに応じて段階的に）。
   テキストセルは固定比率を外し、大きな文字でも見切れないよう高さを可変にする。 */
.sponsor-tier--a1 .sponsor-cell--text,
.sponsor-tier--a2 .sponsor-cell--text,
.sponsor-tier--a3 .sponsor-cell--text,
.sponsor-tier--a4 .sponsor-cell--text,
.sponsor-tier--a5 .sponsor-cell--text { aspect-ratio: auto; min-height: 72px; padding: 16px 12px; }
.sponsor-tier--a1 .sponsor-cell--text .sponsor-cell__name { font-weight: 700; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.25; }
.sponsor-tier--a2 .sponsor-cell--text .sponsor-cell__name { font-weight: 700; font-size: clamp(19px, 2.3vw, 32px); line-height: 1.25; }
.sponsor-tier--a3 .sponsor-cell--text .sponsor-cell__name { font-weight: 700; font-size: clamp(16px, 1.9vw, 26px); line-height: 1.3; }
.sponsor-tier--a4 .sponsor-cell--text .sponsor-cell__name { font-weight: 700; font-size: clamp(14px, 1.5vw, 20px); line-height: 1.3; }
.sponsor-tier--a5 .sponsor-cell--text .sponsor-cell__name { font-weight: 700; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.35; }

/* =========================================================
   コラム・お知らせ詳細：本文画像の拡大ボタン＋スライドショー
   ========================================================= */
/* 本文画像は列幅いっぱいに大きく表示。拡大ボタン(虫めがね)を右下に重ねる */
.col-slide { position: relative; display: block; cursor: zoom-in; line-height: 0; }
.entry-content .col-slide { margin: clamp(20px,3vw,34px) auto; }
.entry-content .col-slide img { width: 100%; height: auto; display: block; margin: 0; }
.col-slide::after {
	content: ""; position: absolute; right: 14px; bottom: 14px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--c-sumi) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='6.5'/%3E%3Cline%20x1='15.5'%20y1='15.5'%20x2='21'%20y2='21'/%3E%3Cline%20x1='10.5'%20y1='7.5'%20x2='10.5'%20y2='13.5'/%3E%3Cline%20x1='7.5'%20y1='10.5'%20x2='13.5'%20y2='10.5'/%3E%3C/svg%3E") center / 20px no-repeat;
	opacity: .9; transform: scale(.96); pointer-events: none;
	transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.col-slide:hover::after { opacity: 1; transform: none; }

/* 本文画像リンク色はテキストリンクの装飾を打ち消す */
.entry-content a.col-slide { color: inherit; }

/* ライトボックス本体 */
body.jg-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.jg-lightbox { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: rgba(20,15,17,.93); padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), visibility .3s; }
.jg-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
/* パネルには overflow を付けない（はみ出す閉じるボタンが切れるため）。スクロールは内側 __scroll に持たせる */
.jg-lightbox__panel { position: relative; display: flex; flex-direction: column; width: min(88vw, 1200px); max-height: 88vh; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5); transform: translateY(16px) scale(.98); transition: transform .35s var(--ease); }
.jg-lightbox.is-open .jg-lightbox__panel { transform: none; }
.jg-lightbox__scroll { display: flex; flex-direction: column; overflow-y: auto; }
.jg-lightbox__head { padding: 16px 24px 10px; }
.jg-lightbox__title { font-family: var(--f-gothic); font-weight: 700; font-size: 16px; color: var(--c-ink); line-height: 1.4; }
.jg-lightbox__sub { font-family: var(--f-en); font-size: 12px; color: #999; letter-spacing: .06em; }
.jg-lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; background: #14100f; touch-action: pan-y; user-select: none; }
.jg-lightbox__img { display: block; max-width: 100%; max-height: calc(88vh - 210px); object-fit: contain; transition: opacity .3s var(--ease); }
.jg-lightbox__img.is-switching { opacity: 0; transition: none; }
.jg-lightbox__btn { border: 0; background: none; cursor: pointer; padding: 0; color: inherit; font-family: var(--f-en); }
.jg-lightbox__nav { position: absolute; top: 0; bottom: 0; z-index: 2; width: 42%; display: flex; align-items: center; color: #fff; font-size: clamp(30px,4vw,48px); text-shadow: 0 2px 14px rgba(0,0,0,.7); opacity: .5; transition: opacity .2s var(--ease); padding: 0 clamp(10px,2vw,24px); }
.jg-lightbox__nav:hover { opacity: 1; }
.jg-lightbox__prev { left: 0; justify-content: flex-start; }
.jg-lightbox__next { right: 0; justify-content: flex-end; }
.jg-lightbox__thumbs { display: flex; gap: 8px; padding: 12px 20px; overflow-x: auto; }
.jg-lightbox__thumb { flex: 0 0 auto; width: 66px; height: 48px; border: 2px solid transparent; border-radius: 4px; background: #eee center/cover no-repeat; opacity: .55; cursor: pointer; transition: opacity .2s var(--ease), border-color .2s var(--ease); }
.jg-lightbox__thumb.is-active { opacity: 1; border-color: var(--c-sumi); }
.jg-lightbox__count { padding: 0 20px 14px; text-align: center; font-family: var(--f-en); font-size: 13px; color: #777; }
.jg-lightbox__close { position: absolute; top: -18px; right: -18px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-sumi); color: #fff; font-size: 22px; line-height: 1; box-shadow: 0 4px 16px rgba(0,0,0,.4); transition: transform .2s var(--ease); }
.jg-lightbox__close:hover { transform: scale(1.08); }
@media (max-width: 768px) {
	.jg-lightbox { padding: 14px; }
	.jg-lightbox__panel { width: 94vw; max-height: 90vh; }
	.jg-lightbox__img { max-height: calc(90vh - 180px); }
	.jg-lightbox__close { top: 6px; right: 6px; width: 38px; height: 38px; font-size: 20px; }
	.jg-lightbox__thumbs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.jg-lightbox, .jg-lightbox__panel, .jg-lightbox__img, .col-slide::after { transition: opacity .2s var(--ease) !important; }
}

/* リブランディング特設ページへの導線（HASEGAWAについて） */
.rebrand-banner { display:block; position:relative; padding: clamp(28px,4vw,48px); border-radius:12px; background: var(--c-sumi); color:#fff; overflow:hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.rebrand-banner:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0,0,0,.22); }
.rebrand-banner__catch { display:block; font-weight:700; font-size: clamp(18px,2.4vw,26px); line-height:1.5; letter-spacing:.02em; }
.rebrand-banner__lead { display:block; margin-top:14px; color: rgba(255,255,255,.82); font-size:14px; line-height:1.95; max-width:680px; }
.rebrand-banner__more { display:inline-flex; align-items:center; gap:10px; margin-top:20px; font-family: var(--f-en); font-weight:700; letter-spacing:.06em; color: var(--c-yellow); }
.rebrand-banner__more i { transition: transform .3s var(--ease); }
.rebrand-banner:hover .rebrand-banner__more i { transform: translateX(6px); }
t-size:14px; line-height:1.95; max-width:680px; }
.rebrand-banner__more { display:inline-flex; align-items:center; gap:10px; margin-top:20px; font-family: var(--f-en); font-weight:700; letter-spacing:.06em; color: var(--c-yellow); }
.rebrand-banner__more i { transition: transform .3s var(--ease); }
.rebrand-banner:hover .rebrand-banner__more i { transform: translateX(6px); }

/* =========================================================
   スマホ表示の個別調整（2026-08-14）
   ここは意図的にファイル末尾に置く。上で定義済みの値を確実に上書きするため。
   ========================================================= */
@media (max-width: 767px) {

	/* --- 事業紹介カード：ラベルが幅に収まらず横スクロールが出ていた ---
	   英語名(30px)と日本語(13px)を1行に並べ、どちらも white-space:nowrap のため
	   カード幅322pxを最大71pxはみ出していた（実測390pxで document.scrollWidth 456px）。
	   日本語を英語の下の行へ回し、矢印アイコンは右下に固定する。 */
	.service-card__label { flex-wrap: wrap; gap: 2px 12px; padding-right: 28px; }
	.service-card__en { font-size: 26px; }
	.service-card__ja { flex: 0 0 100%; font-size: 12px; white-space: normal; }
	.service-card__label i { position: absolute; right: 0; bottom: 6px; margin-left: 0; }

	/* --- CONTACT（資料請求〜法人様のご相談）：文字が大きく詰まって見えるため縮小 --- */
	.contact-bar__inner { gap: 12px; padding-block: 24px; }
	.contact-bar__ja { font-size: clamp(17px, 4.6vw, 24px); letter-spacing: .1em; }
	.contact-bar__en { font-size: 11px; }
	.contact-bar i { font-size: 17px; }

	/* --- お問い合わせページのタブ：flex:1 1 auto で内容量に応じて幅がバラついていた ---
	   2列グリッドにして4つとも同じ幅・同じ高さに揃える。 */
	.form-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.form-tab { min-width: 0; padding-inline: 8px; }
	.form-tab__ja { white-space: normal; font-size: 13px; }
}