@charset "utf-8";
/* ==========================================================================
   藤井冷熱 — style.css
   順序: tokens → base → l- → c- → p- → motion → responsive
   数値はすべて _ref/comp-*.tsv（カンプ実測）から取っている。目分量禁止。
   ========================================================================== */

/* ==========================================================================
   1. tokens
   ========================================================================== */
:root {
	/* 冷（お客様導線）— ロゴの青（#5870a8〜#90a8d0）から導出。
	   本文・CTAに使うため、彩度を保ったまま明度を落として
	   白地でコントラスト 8.3:1 を確保している。 */
	--blue: #2e4c87;
	--blue-d: #1e3663;
	--blue-l: #eef2f9;
	--blue-m: #b9c6e0;
	--blue-logo: #5870a8;
	/* 熱（採用導線） */
	--cop: #b4552a;
	--cop-d: #8b3e1b;
	--cop-l: #fbeee6;
	--cop-m: #e8c0a6;
	--cop-2: #e08a55;
	--cop-3: #f6c3a0;
	--cop-4: #ffe3d0;
	/* Cタイプ用。A=藍 B=銅 C=緑 の3択を一目で見分けるため。 */
	--grn: #3d6b57;
	--grn-l: #eaf1ee;
	--grn-d: #2b4d3f;
	--grn-m: #b3ccc0;
	/* ニュートラル */
	--w: #fff;
	--bg: #f5f7fb;
	--bg-2: #e9edf4;
	--ink: #0d141a;
	--ink-2: #33424b;
	--mut: #6a7982;
	--line: #dde5ea;
	--line-2: #edf2f4;
	/* 暗部 */
	--dk: #121620;
	--dk-2: #1d2230;
	--dk-3: #2a3142;
	--wd: #1a120e;
	--wd-2: #241a14;
	--wd-3: #32241b;
	/* 書体 */
	--ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--ff-dp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
	--ff-lt: "Archivo", "Helvetica Neue", Arial, sans-serif;
	/* 寸法 */
	--page: 1440px;
	--inner: 1284px;   /* ヒーロー画像の左余白（幅の5.44%）に本文の左端を合わせる */
	--inner-wide: 1320px;
	--head-h: 89px;
	/* 動き */
	--e-out: cubic-bezier(.16, 1, .3, 1);
	--e-io: cubic-bezier(.65, 0, .35, 1);
	--d: 0ms;
}

/* ==========================================================================
   2. base
   ========================================================================== */
body {
	background: var(--w);
	color: var(--ink);
	font-family: var(--ff-jp);
	font-size: 16px;
	line-height: 1.9;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.u-dp {
	font-family: var(--ff-dp);
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1.3;
	text-wrap: balance;
}

.u-dp7 {
	font-family: var(--ff-dp);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.5;
}

.u-lt {
	font-family: var(--ff-lt);
}

.u-tabnum {
	font-family: var(--ff-lt);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. l- layout
   ========================================================================== */
.l-inner {
	width: var(--inner);
	margin-inline: auto;
}

.l-inner--wide {
	width: var(--inner-wide);
	margin-inline: auto;
}

.l-section {
	padding-block: 76px;
}

.l-section--sm {
	padding-block: 62px;
}

/* 採用ページの標準セクション。トップ(100px)とは値が違う（カンプ実測）。 */
.l-section--r {
	padding-block: 80px;
}

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

.l-seam {
	height: 5px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* --- header --------------------------------------------------------- */
.l-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--w);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .4s var(--e-out);
}

.l-header.is-scrolled {
	box-shadow: 0 4px 24px -12px rgba(13, 20, 26, .28);
}

.l-header__inner {
	width: var(--inner-wide);
	margin-inline: auto;
	height: 88px;
	display: flex;
	align-items: center;
	gap: 44px;
}

.l-header__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.l-header__mark {
	width: 46px;
	height: auto;
	flex: none;
}

.l-header__wordmark {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.l-header__logo b {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 24px;
	letter-spacing: .08em;
	line-height: 1;
}

.l-header__logo i {
	font-style: normal;
	font-family: var(--ff-lt);
	font-weight: 600;
	font-size: 9px;
	letter-spacing: .24em;
	color: var(--mut);
	line-height: 1;
}

.l-header__badge {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 9.5px;
	letter-spacing: .18em;
	color: var(--cop);
	background: var(--cop-l);
	padding: 5px 9px;
	border-radius: 3px;
	margin-left: -4px;
	align-self: center;
}

.l-header__nav {
	display: flex;
	gap: 26px;
	margin-left: auto;
}

.l-header__nav a {
	position: relative;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-2);
	transition: color .3s var(--e-out);
}

.l-header__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--e-out);
}

.l-header__doors {
	display: flex;
	align-items: stretch;
	gap: 10px;
	padding-left: 24px;
	border-left: 1px solid var(--line);
}

.l-header__door {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
}

.l-header__door > span {
	font-size: 9.5px;
	letter-spacing: .06em;
	color: var(--mut);
	line-height: 1;
}

.l-header__tel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-right: 20px;
	border-right: 1px solid var(--line);
	margin-right: 4px;
}

.l-header__tel b {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 20px;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.l-header__tel span {
	font-size: 10px;
	color: var(--mut);
	line-height: 1.2;
}

/* --- footer --------------------------------------------------------- */
.l-footer {
	background: var(--dk);
	padding: 58px 0 44px;
}

.l-footer__inner {
	display: flex;
	gap: 80px;
	align-items: flex-start;
}

.l-footer__brand {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.l-footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.l-footer__mark {
	width: 46px;
	height: auto;
	flex: none;
}

.l-footer__wordmark {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.l-footer__brand b {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 24px;
	letter-spacing: .08em;
	line-height: 1;
	color: var(--w);
}

.l-footer__brand i {
	font-style: normal;
	font-family: var(--ff-lt);
	font-weight: 600;
	font-size: 9px;
	letter-spacing: .24em;
	color: #6f778e;
	line-height: 1;
}

.l-footer__biz {
	font-size: 13.5px;
	color: #a8b0c6;
	margin-top: 12px;
}

.l-footer__ph {
	font-size: 13px;
	color: #656d84;
}

.l-footer__tels {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.l-footer__telrow {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.l-footer__tel {
	font-family: var(--ff-lt);
	font-size: 21px;
	font-weight: 700;
	color: var(--w);
	font-variant-numeric: tabular-nums;
	transition: color .3s var(--e-out);
}

.l-footer__hours {
	font-size: 12px;
	color: #656d84;
}

.l-footer__navs {
	display: flex;
	gap: 60px;
}

.l-footer__col {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.l-footer__col a {
	font-size: 13.5px;
	color: #c7cddd;
	transition: color .3s var(--e-out), transform .3s var(--e-out);
}

.l-footer__col--recruit a {
	color: #e4a57f;
}

.l-footer__spacer {
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   4. c- components
   ========================================================================== */

/* --- eyebrow（ゾーンの色分けの要） ---------------------------------- */
.c-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ff-lt);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1;
}

.c-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	flex: none;
	transform-origin: left;
}

.c-eyebrow i {
	font-style: normal;
	opacity: .62;
	letter-spacing: .14em;
}

.c-eyebrow--xs {
	font-size: 9.5px;
}

.c-eyebrow--client {
	color: var(--blue);
}

.c-eyebrow--client::before {
	background: var(--blue);
}

.c-eyebrow--recruit {
	color: var(--cop);
}

.c-eyebrow--recruit::before {
	background: var(--cop);
}

.c-eyebrow--dark {
	color: #8fa6d4;
}

.c-eyebrow--dark::before {
	background: #8fa6d4;
}

.c-eyebrow--white {
	color: var(--w);
}

.c-eyebrow--white::before {
	background: var(--w);
}

.c-eyebrow--sand {
	color: var(--cop-3);
}

.c-eyebrow--sand::before {
	background: var(--cop-3);
}

/* --- section head ---------------------------------------------------- */
.c-sechead {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.c-sechead h2 {
	font-size: 40px;
}

/* 見出しの大きさは段階で持つ。インラインで書くとメディアクエリに勝ってしまう。
   .c-sechead h2 が (0,1,1) なので、要素名を足して詳細度を揃える。 */
h2.c-sechead__h--xl { font-size: 44px; }
h2.c-sechead__h--lg { font-size: 42px; }
h2.c-sechead__h--md { font-size: 36px; }
h2.c-sechead__h--sm { font-size: 34px; }

.c-sechead__lead {
	font-size: 15.5px;
	color: var(--ink-2);
	max-width: 62ch;
}

.c-sechead--center {
	align-items: center;
	text-align: center;
}

.c-sechead--center .c-sechead__lead {
	text-align: center;
}

/* --- button ------------------------------------------------------------
   役割ごとに挙動を変える。
   ・塗り  ＝ ポインタが入った位置から塗りが広がる（押せる面という感覚）
   ・線    ＝ 塗らずに枠が引かれる（副次的な選択肢という感覚）
   ・押下  ＝ 沈む。影を畳む。指で押した手応えを返す
   ------------------------------------------------------------------------ */
.c-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 15px;
	padding: 18px 30px;
	border-radius: 2px;
	border: 1px solid transparent;
	line-height: 1.35;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	--mx: 50%;
	--my: 50%;
	transition:
		transform .5s var(--e-out),
		box-shadow .5s var(--e-out),
		color .3s var(--e-out),
		border-color .35s var(--e-out);
}

.c-btn > * {
	position: relative;
	z-index: 1;
}

/* 塗りが広がる面。ポインタの位置を原点にする。 */
.c-btn::before {
	content: "";
	position: absolute;
	left: var(--mx);
	top: var(--my);
	width: 0;
	height: 0;
	z-index: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width .62s var(--e-out), height .62s var(--e-out), opacity .3s linear;
}

.c-btn:active {
	transform: translateY(0) scale(.978);
	transition-duration: .09s;
}

.c-btn__ic {
	width: 16px;
	height: 16px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .55s var(--e-out);
}

@keyframes ring {
	0%, 100% { transform: rotate(0); }
	22% { transform: rotate(-13deg); }
	44% { transform: rotate(10deg); }
	66% { transform: rotate(-6deg); }
}

.c-btn--sm {
	padding: 12px 20px;
	font-size: 13.5px;
}

.c-btn--blue {
	background: var(--blue);
	color: var(--w);
	border-color: var(--blue);
	box-shadow: 0 2px 10px -6px rgba(46, 76, 135, .8);
}

.c-btn--blue::before { background: var(--blue-d); }

.c-btn--blue:active {
	box-shadow: 0 1px 4px -3px rgba(46, 76, 135, .9);
}

.c-btn--cop {
	background: var(--cop);
	color: var(--w);
	border-color: var(--cop);
	box-shadow: 0 2px 10px -6px rgba(180, 85, 42, .8);
}

.c-btn--cop::before { background: var(--cop-d); }

.c-btn--cop:active {
	box-shadow: 0 1px 4px -3px rgba(180, 85, 42, .9);
}

.c-btn--white {
	background: var(--w);
	color: var(--cop);
	border-color: var(--w);
}

.c-btn--white::before { background: var(--cop-l); }

/* 線のボタンは塗らない。枠を引く。 */
.c-btn--oblue,
.c-btn--ocop,
.c-btn--ow {
	overflow: visible;
}

.c-btn--oblue::before,
.c-btn--ocop::before,
.c-btn--ow::before {
	content: none;
}

.c-btn--oblue::after,
.c-btn--ocop::after,
.c-btn--ow::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 2px;
	border: 1px solid currentColor;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .5s var(--e-out);
	pointer-events: none;
}

.c-btn--oblue {
	color: var(--blue);
	border-color: var(--blue-m);
}

.c-btn--ocop {
	color: var(--cop);
	border-color: var(--cop-m);
}

.c-btn--ow {
	color: var(--w);
	border-color: rgba(255, 255, 255, .55);
}

/* --- tag / chip / icon box ------------------------------------------- */
.c-tag {
	align-self: flex-start;
	font-family: var(--ff-lt);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .18em;
	padding: 5px 9px;
	border-radius: 2px;
	line-height: 1;
}

.c-tag--blue {
	background: var(--blue-l);
	color: var(--blue);
}

.c-tag--white {
	background: var(--w);
	color: var(--blue);
}

.c-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(246, 195, 160, .28);
	color: var(--cop-4);
	padding: 9px 15px;
	border-radius: 999px;
	font-size: 13px;
	transition: background .4s var(--e-out), border-color .4s var(--e-out), transform .4s var(--e-out);
}

.c-chip--light {
	background: var(--w);
	border-color: var(--cop-m);
	color: var(--cop-d);
	font-weight: 700;
	padding: 11px 18px;
	font-size: 13.5px;
}

.c-ic {
	width: 24px;
	height: 24px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.c-ic--16 { width: 16px; height: 16px; }
.c-ic--18 { width: 18px; height: 18px; }
.c-ic--20 { width: 20px; height: 20px; }
.c-ic--28 { width: 28px; height: 28px; }

.c-icbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	flex: none;
	transition: transform .5s var(--e-out);
}

.c-icbox--cop {
	background: var(--cop-l);
	color: var(--cop);
}

.c-icbox--sky {
	background: rgba(143, 166, 212, .16);
	color: #a9bce2;
	width: 42px;
	height: 42px;
}

/* --- photo placeholder（撮影メモ入り） ------------------------------- */
.c-photo {
	position: relative;
	overflow: hidden;
	background: repeating-linear-gradient(135deg, #e4ebef 0 9px, #ebf1f4 9px 18px);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}

.c-photo__grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: repeating-linear-gradient(to right, rgba(255, 255, 255, .5) 0 1px, transparent 1px 25%);
}

.c-photo__note {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, .9);
	border: 1px solid #cbd8e0;
	padding: 13px 15px;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.c-photo__hd {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 9.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #5e7a8b;
}

.c-photo__ti {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 13px;
	color: #2e4552;
	line-height: 1.5;
	letter-spacing: -.01em;
}

.c-photo__note ul {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.c-photo__note li {
	font-size: 11px;
	line-height: 1.65;
	color: #5b7181;
	padding-left: 12px;
	position: relative;
}

.c-photo__note li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 1px;
	background: #9fb3c0;
}

.c-photo__rt {
	font-family: var(--ff-lt);
	font-size: 9.5px;
	letter-spacing: .14em;
	color: #7e95a4;
	border-top: 1px solid #dde7ec;
	padding-top: 6px;
	margin-top: 1px;
}

.c-photo--tiny .c-photo__note {
	max-width: none;
	padding: 9px 11px;
	gap: 4px;
}

.c-photo--tiny .c-photo__ti { font-size: 11.5px; }
.c-photo--tiny .c-photo__note li { font-size: 10px; }

.c-photo--circ { border-radius: 50%; }

/* 円の内接矩形は直径の約7割しかない。注記を内側に収める。 */
.c-photo--circ .c-photo__note {
	max-width: 64%;
	padding: 9px 11px;
	gap: 4px;
}

.c-photo--circ .c-photo__ti { font-size: 11px; }
.c-photo--circ .c-photo__hd { font-size: 8.5px; }
.c-photo--circ .c-photo__note li { font-size: 9.5px; line-height: 1.55; }
.c-photo--circ .c-photo__rt { font-size: 8.5px; padding-top: 5px; }

.c-photo--dark {
	background: repeating-linear-gradient(135deg, #242f36 0 9px, #2b3841 9px 18px);
	border-color: #31404a;
}

.c-photo--dark .c-photo__note {
	background: rgba(14, 23, 29, .9);
	border-color: #3b4c57;
}

.c-photo--dark .c-photo__hd { color: #7e97a6; }
.c-photo--dark .c-photo__ti { color: #d3e0e7; }
.c-photo--dark .c-photo__note li { color: #93a8b4; }
.c-photo--dark .c-photo__note li::before { background: #5c7382; }
.c-photo--dark .c-photo__rt { color: #7e97a6; border-top-color: #33434e; }

/* --- card ------------------------------------------------------------ */
.c-card {
	background: var(--w);
	border: 1px solid var(--line);
	padding: 23px 22px 25px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* ==========================================================================
   5. p- ページ固有 ／ トップ（お客様）
   ========================================================================== */

/* --- hero ------------------------------------------------------------ */
/* --- 二枚扉 ---------------------------------------------------------- */
.p-doors {
	background: linear-gradient(90deg, var(--bg) 0 891px, var(--line) 891px 892px, var(--cop-l) 892px 100%);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.p-doors__inner {
	width: var(--inner);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 771px 429px;
}

.p-doors__client {
	padding: 38px 52px 40px 0;
}

.p-doors__recruit {
	padding: 38px 0 40px 52px;
}

.p-doors__ttl {
	font-size: 27px;
	margin-top: 16px;
}

.p-doors__ttl--sm {
	font-size: 23px;
	color: var(--cop-d);
	font-family: var(--ff-dp);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.5;
}

.p-doors__lead {
	font-size: 14px;
	color: var(--ink-2);
	margin-top: 12px;
	max-width: 44ch;
}

.p-doors__lead--sm {
	font-size: 13.5px;
	max-width: 34ch;
}

.p-doors__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 18px;
}

.p-doors__links a {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--blue);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: transform .35s var(--e-out), color .3s var(--e-out);
}

.p-doors__recruit .p-doors__links a {
	color: var(--cop);
}

.p-doors__btn {
	margin-top: 22px;
	align-self: flex-start;
	display: inline-flex;
}

.p-doors__btn--sm {
	padding: 14px 24px;
	font-size: 14px;
}

/* --- 2本柱 ------------------------------------------------------------ */
.p-pillars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--line);
}

.p-pillars__cell {
	padding: 38px 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.p-pillars__cell + .p-pillars__cell {
	border-left: 1px solid var(--line);
}

.p-pillars__cell b {
	font-size: 26px;
}

.p-pillars__cell p {
	font-size: 15px;
	color: var(--ink-2);
}

/* --- services --------------------------------------------------------- */
.p-services__main {
	margin-top: 36px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.p-services__card {
	background: var(--w);
	border: 1px solid var(--line);
	transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}

.p-services__thumb {
	height: 196px;
	border: 0;
	border-bottom: 1px solid var(--line);
}

.p-services__body {
	padding: 21px 23px 24px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.p-services__body b {
	font-size: 20px;
}

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

.p-services__sub {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.p-services__sub .c-card {
	padding: 22px 20px 24px;
	gap: 9px;
	transition: background .4s var(--e-out);
}

.p-services__sub b {
	font-size: 16px;
}

.p-services__sub p {
	font-size: 12.5px;
	color: var(--mut);
	line-height: 1.8;
}

.p-services__sub .c-card--other {
	background: var(--blue-l);
	border: 0;
}

.p-services__sub .c-card--other p {
	color: var(--ink-2);
}

.p-services__foot {
	margin-top: 26px;
	display: flex;
	align-items: center;
	gap: 22px;
}

.p-services__hint {
	font-size: 13px;
	color: var(--mut);
}

/* --- works ------------------------------------------------------------ */
.p-works__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.p-works__grid {
	margin-top: 34px;
	display: grid;
	grid-template-columns: 696px 1fr;
	gap: 40px;
	align-items: start;
}

.p-works__lead {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.p-works__leadph {
	height: 466px;
}

.p-works__cap {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.p-works__cap b {
	font-size: 23px;
}

.p-works__meta {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--mut);
	border-top: 1px solid var(--line);
	padding-top: 12px;
}

.p-works__meta b {
	color: var(--ink-2);
	font-weight: 500;
	font-size: 12.5px;
}

.p-works__side {
	padding-top: 58px;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.p-works__item {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.p-works__itemph {
	height: 212px;
}

.p-works__itemcap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.p-works__itemcap b {
	font-size: 17px;
}

.p-works__note {
	margin-top: 24px;
	font-size: 12.5px;
	color: var(--mut);
}

/* --- flow -------------------------------------------------------------- */
.p-flow {
	padding-block: 72px;
}

.p-flow__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--line);
	background: var(--w);
}

/* 進行線。左から引かれ、通過に合わせて各段が出る。 */
.p-flow__rail {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--blue-m), var(--blue));
	z-index: 2;
	transition-duration: 1.15s;
}

.p-flow__item {
	padding: 25px 24px 27px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.p-flow__item + .p-flow__item {
	border-left: 1px solid var(--line);
}

.p-flow__num {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 30px;
	color: var(--blue-m);
	line-height: 1;
	transition: color .5s var(--e-out);
}

.p-flow__item b {
	font-size: 17px;
}

.p-flow__item p {
	font-size: 13px;
	color: var(--ink-2);
}

/* --- about ------------------------------------------------------------- */
.p-about__inner {
	display: grid;
	grid-template-columns: 1fr 486px;
	gap: 64px;
	align-items: center;
}

.p-about__ttl {
	font-size: 40px;
	margin-top: 20px;
}

.p-about__lead {
	font-size: 15.5px;
	color: var(--ink-2);
	margin-top: 20px;
	max-width: 38em;
}

.p-about__words {
	margin-top: 28px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.7fr;
	border: 1px solid var(--line);
}

.p-about__words div {
	padding: 20px 18px;
	font-family: var(--ff-dp);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.5;
}

.p-about__words div + div {
	border-left: 1px solid var(--line);
}

.p-about__goal {
	margin-top: 28px;
	border-left: 3px solid var(--blue);
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.p-about__goal b {
	font-size: 20px;
}

.p-about__goal p {
	font-size: 14px;
	color: var(--mut);
	max-width: 52ch;
}

.p-about__visual {
	position: relative;
	height: 556px;
}

.p-about__ph1 {
	position: absolute;
	top: 0;
	right: 0;
	width: 378px;
	height: 472px;
}

.p-about__ph2 {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 266px;
	height: 266px;
	border: 6px solid var(--w);
	outline: 1px solid var(--line);
	z-index: 2;
}

/* --- 会社概要 ---------------------------------------------------------- */
.p-profile {
	padding-block: 64px;
}

.p-profile__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 26px;
}

.p-profile__ttl {
	font-size: 32px;
	margin-top: 16px;
}

.p-profile__area {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--blue-l);
	border: 1px solid var(--blue-m);
	border-radius: 4px;
	padding: 14px 20px;
}

.p-profile__area b {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 16px;
	color: var(--blue-d);
}

.p-profile__area span {
	font-size: 12.5px;
	color: var(--mut);
}

.p-profile__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.p-profile__cell {
	background: var(--w);
	padding: 19px 22px 21px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.p-profile__k {
	font-family: var(--ff-lt);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blue);
}

.p-profile__v {
	font-size: 15px;
	color: var(--ink);
	line-height: 1.75;
}

.p-profile__v .u-tabnum {
	font-size: 19px;
	font-weight: 700;
}

/* --- faq ---------------------------------------------------------------- */
.p-faq {
	padding-block: 72px;
}

.p-faq__inner {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}

.p-faq__ttl {
	font-size: 32px;
	margin-top: 20px;
}

.p-faq__more {
	display: inline-block;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--blue);
	border-bottom: 1px solid var(--blue-m);
	padding-bottom: 3px;
}

.p-faq__list {
	border-top: 1px solid var(--line);
}

.p-faq__item {
	border-bottom: 1px solid var(--line);
	padding: 19px 0;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 0 18px;
}

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

.p-faq__q,
.p-faq__a {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.65;
}

.p-faq__q { color: var(--blue); }
.p-faq__a { color: var(--mut); margin-top: 7px; }

.p-faq__item b {
	display: block;
	font-size: 18px;
}

.p-faq__item p {
	font-size: 14px;
	color: var(--ink-2);
	margin-top: 7px;
}

/* --- contact ------------------------------------------------------------ */
.p-contact {
	background: var(--bg-2);
	padding-block: 76px;
}

.p-contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.p-contact__ttl {
	font-size: 38px;
	margin-top: 20px;
}

.p-contact__lead {
	font-size: 15.5px;
	color: var(--ink-2);
	margin-top: 20px;
	max-width: 44ch;
}

/* --- 電話の開示 ---------------------------------------------------------
   番号を看板のように出さない。押したら現れて、そこからかける。
   ------------------------------------------------------------------------ */
.c-tel {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.c-tel__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px 34px 24px;
	opacity: 0;
	transform: translateY(-8px) scale(.97);
	transform-origin: top center;
	transition:
		opacity .4s var(--e-out),
		transform .5s var(--e-out);
}

.c-tel__panel[hidden] {
	display: none;
}

.c-tel.is-open .c-tel__panel {
	opacity: 1;
	transform: none;
}

.c-tel__num {
	font-family: var(--ff-lt);
	font-size: 26px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	transition: color .3s var(--e-out);
}

.c-tel__hours {
	font-size: 12.5px;
	color: var(--mut);
}

/* ヘッダー用：小さく、押したら真下に開く */
.c-tel--head {
	position: relative;
	align-items: stretch;
	gap: 0;
}

.c-tel--head .c-tel__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 60;
	box-shadow: 0 20px 44px -22px rgba(13, 20, 26, .5);
	padding: 18px 24px 20px;
	white-space: nowrap;
}

.c-tel--head .c-tel__num {
	font-size: 22px;
}

/* フッター用 */
.c-tel--foot {
	align-items: flex-start;
	gap: 10px;
}

.c-tel--foot .c-tel__panel {
	align-items: flex-start;
	background: var(--dk-2);
	border-color: var(--dk-3);
	padding: 16px 20px 18px;
}

.c-tel--foot .c-tel__num {
	color: var(--w);
	font-size: 21px;
}

.c-tel--foot .c-tel__hours {
	color: #8a92a8;
}

.p-contact__btn {
	margin-top: 26px;
}

.p-contact__sub {
	font-size: 12.5px;
	color: var(--mut);
	margin-top: 14px;
}

/* --- initiative（章の変わり目） ------------------------------------------ */
.p-initiative {
	background: var(--dk);
	padding-block: 80px;
}

.p-initiative__inner {
	display: grid;
	grid-template-columns: 1fr 486px;
	gap: 64px;
	align-items: center;
}

.p-initiative__ttl {
	font-size: 38px;
	color: var(--w);
	margin-top: 20px;
}

.p-initiative__lead {
	font-size: 15px;
	color: #a8b0c6;
	margin-top: 22px;
	max-width: 42em;
}

.p-initiative__tiles {
	margin-top: 34px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.p-initiative__tile {
	background: var(--dk-2);
	border: 1px solid var(--dk-3);
	padding: 20px 18px;
	font-size: 13.5px;
	color: #d8dcea;
	line-height: 1.7;
	transition: border-color .4s var(--e-out), transform .4s var(--e-out);
}

.p-initiative__more {
	display: inline-block;
	margin-top: 26px;
	font-size: 14px;
	color: #a9bce2;
	border-bottom: 1px solid #38405a;
	padding-bottom: 4px;
}

.p-initiative__ph {
	height: 372px;
}

/* --- ゾーン切替バー -------------------------------------------------------- */
.p-zbar {
	background: var(--cop);
	color: var(--w);
}

.p-zbar__inner {
	width: var(--inner);
	margin-inline: auto;
	height: 66px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.p-zbar__txt {
	font-size: 16px;
	color: var(--w);
}

.p-zbar__arrow {
	margin-left: auto;
	width: 20px;
	height: 20px;
	stroke: var(--w);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	animation: bob 2.4s var(--e-io) infinite;
}

@keyframes bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

/* --- 採用バンド ------------------------------------------------------------ */
.p-band {
	background: linear-gradient(150deg, #b4552a 0%, #9a431f 60%, #7c3416 100%);
	padding-block: 92px;
}

.p-band__inner {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 76px;
	align-items: center;
}

.p-band__slot {
	display: flex;
	align-items: center;
	gap: 14px;
}

.p-band__slotbadge {
	background: var(--w);
	color: var(--cop-d);
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 12.5px;
	padding: 6px 13px;
	line-height: 1.3;
}

.p-band__ttl {
	font-size: 46px;
	color: var(--w);
	margin-top: 22px;
}

.p-band__lead {
	font-size: 15.5px;
	color: #f7e5da;
	margin-top: 22px;
	max-width: 40em;
}

.p-band__paths {
	margin-top: 34px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .28);
	border: 1px solid rgba(255, 255, 255, .28);
}

.p-band__path {
	background: rgba(255, 255, 255, .08);
	padding: 16px 14px;
	font-size: 13px;
	color: var(--w);
	line-height: 1.6;
	transition: background .4s var(--e-out);
}

.p-band__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.p-band__note {
	font-size: 12.5px;
	color: #f3d8c8;
	text-align: center;
	line-height: 1.7;
}

/* ==========================================================================
   6. p- ページ固有 ／ 採用
   ========================================================================== */

/* --- hero --------------------------------------------------------------- */
.p-rhero {
	position: relative;
	overflow: hidden;
	/* 銅色を1点に集めず、上から下へ 淡→濃の階調にして奥行きを出す */
	background:
		radial-gradient(1100px 620px at 84% 6%, rgba(224, 138, 85, .30) 0%, rgba(224, 138, 85, 0) 64%),
		radial-gradient(760px 560px at 6% 96%, rgba(140, 62, 28, .20) 0%, rgba(140, 62, 28, 0) 62%),
		linear-gradient(166deg, #fffdfb 0%, #fdf3ec 40%, #f7e3d6 76%, #f2d8c8 100%);
}

/* 背景の質感は、抽象的な模様ではなく実際に扱っている材料から取る。
   亀甲金網（IMG_0786 の実写）をハイパスで線だけ抜いたもの。
   AIで作った背景はどの会社でも成立してしまうが、これは藤井冷熱の現場にしかない。 */
.p-rhero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("../img/tex-mesh.webp");
	background-size: 760px auto;
	background-position: 68% 12%;
	background-repeat: repeat;
	opacity: .085;
	mix-blend-mode: multiply;
	/* 文字の後ろは薄く、外側ほど出す。読みやすさを最優先する */
	-webkit-mask-image: radial-gradient(900px 620px at 22% 46%, transparent 0%, transparent 34%, #000 78%);
	mask-image: radial-gradient(900px 620px at 22% 46%, transparent 0%, transparent 34%, #000 78%);
}

/* 縦罫は残すが、テクスチャと喧嘩しないよう間隔を広げて薄くする */
.p-rhero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(to right, rgba(140, 62, 28, .045) 0 1px, transparent 1px 120px);
}

.p-rhero__inner {
	position: relative;
	z-index: 2;
	width: var(--page);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 790px 650px;
	align-items: center;
	min-height: 700px;
}

.p-rhero__body {
	padding: 0 48px 0 120px;
}

.p-rhero__ttl {
	font-size: 46px;
	margin-top: 22px;
}

.p-rhero__lead {
	font-size: 16px;
	color: var(--ink-2);
	margin-top: 24px;
	max-width: 30em;
}

.p-rhero__cta {
	display: flex;
	gap: 12px;
	margin-top: 36px;
}

.p-rhero__note {
	font-size: 12.5px;
	color: var(--mut);
	margin-top: 16px;
}

.p-rhero__visual {
	position: relative;
	height: 700px;
}

.p-rhero__glow {
	position: absolute;
	top: 96px;
	left: 36px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, rgba(224, 138, 85, .3), rgba(224, 138, 85, 0) 68%);
}

.p-rhero__main {
	position: absolute;
	top: 112px;
	left: 40px;
	width: 368px;
	height: 368px;
	border: 8px solid var(--w);
	outline: 1px solid var(--cop-m);
	padding: 22px;
}

.p-rhero__main .c-photo__note {
	max-width: 264px;
	border-color: var(--cop-m);
}

.p-rhero__sat {
	border: 6px solid var(--w);
	outline: 1px solid var(--cop-m);
	position: absolute;
}

.p-rhero__sat--1 { right: 30px; top: 62px; width: 178px; height: 178px; padding: 12px; }
.p-rhero__sat--2 { right: -6px; bottom: 168px; width: 206px; height: 206px; padding: 14px; }
.p-rhero__sat--3 { left: 6px; bottom: 88px; width: 160px; height: 160px; padding: 11px; }

.p-slot {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--w);
	border: 1px solid var(--cop-m);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cop-d);
	font-family: var(--ff-dp);
}

.p-slot__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cop);
	flex: none;
}

.p-future {
	padding: 80px 0 72px;
}

/* --- 3年のタイムライン ---------------------------------------------------- */
.p-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 52px;
}

.p-timeline__rail {
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	top: 31px;
	height: 2px;
	background: linear-gradient(90deg, var(--cop-m), var(--cop) 40%, var(--cop-2));
	transform-origin: left;
}

.p-timeline__item {
	position: relative;
	padding: 0 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.p-timeline__pin {
	position: relative;
	z-index: 2;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--w);
	border: 2px solid var(--cop);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cop);
	transition: transform .5s var(--e-out);
}

.p-timeline__pin--on {
	background: var(--cop);
	color: var(--w);
	box-shadow: 0 0 0 8px rgba(180, 85, 42, .12);
}

.p-timeline__yr {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--cop);
}

.p-timeline__item b {
	font-size: 19px;
}

.p-timeline__item p {
	font-size: 13.5px;
	color: var(--ink-2);
}

/* --- 仕事を知る ------------------------------------------------------------ */
.p-rwork__grid {
	margin-top: 36px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.p-rwork__card {
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}

.p-rwork__thumb {
	height: 206px;
	border: 0;
	border-bottom: 1px solid var(--line);
}

.p-rwork__body {
	padding: 21px 23px 24px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.p-rwork__body b {
	font-size: 20px;
}

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

/* --- こんな人を探しています --------------------------------------------------- */
.p-who__grid {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.p-who__cell {
	background: var(--w);
	padding: 20px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: background .4s var(--e-out);
}

.p-who__cell b {
	font-size: 17px;
}

.p-who__note {
	margin-top: 24px;
	background: linear-gradient(120deg, #fbeee6 0%, #f7e2d3 100%);
	border: 1px solid var(--cop-m);
	border-radius: 10px;
	padding: 38px 44px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.p-who__note h3 {
	font-size: 28px;
	color: var(--cop-d);
	font-family: var(--ff-dp);
	font-weight: 900;
	letter-spacing: -.025em;
	line-height: 1.3;
}

.p-who__note p {
	font-size: 14.5px;
	color: var(--ink-2);
	margin-top: 16px;
}

.p-who__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* --- キャリア分岐図 --------------------------------------------------------- */
.p-tree {
	margin-top: 36px;
}

.p-tree__trunk {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.p-tree__step {
	width: 420px;
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.p-tree__step--cur {
	border-color: var(--cop);
	box-shadow: 0 0 0 4px rgba(180, 85, 42, .08);
}

.p-tree__n {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 13px;
	color: var(--cop);
	background: var(--cop-l);
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.p-tree__step--cur .p-tree__n {
	background: var(--cop);
	color: var(--w);
}

.p-tree__step b {
	font-size: 19px;
}

.p-tree__step p {
	font-size: 13px;
	color: var(--mut);
}

.p-tree__link {
	width: 2px;
	height: 34px;
	background: linear-gradient(180deg, var(--cop-m), var(--cop));
	opacity: .85;
	transform-origin: top;
}

.p-tree__fork {
	display: block;
}

.p-tree__fork path {
	stroke: var(--cop-m);
	stroke-width: 2;
	fill: none;
}

.p-tree__forklabel {
	display: flex;
	justify-content: center;
	margin: -70px 0 40px;
}

.p-tree__forklabel span {
	background: var(--bg);
	padding: 0 18px;
	font-size: 13.5px;
	color: var(--cop);
	font-weight: 700;
	font-family: var(--ff-dp);
}

.p-tree__branch {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.p-tree__card {
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 22px 21px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 3px solid var(--cop);
	transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}

.p-tree__card b {
	font-size: 19px;
}

.p-tree__card p {
	font-size: 13.5px;
	color: var(--ink-2);
}

.p-tree__msg {
	margin-top: 28px;
	background: var(--w);
	border: 1px solid var(--cop-m);
	border-radius: 8px;
	padding: 24px 30px;
	display: flex;
	align-items: center;
	gap: 18px;
}

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

/* --- 給与モデル ------------------------------------------------------------- */
.p-salary {
	position: relative;
	overflow: hidden;
	padding: 80px 0 76px;
	background:
		radial-gradient(900px 500px at 74% 10%, rgba(224, 138, 85, .28) 0%, rgba(224, 138, 85, 0) 60%),
		linear-gradient(168deg, #241a14 0%, #1a120e 58%, #150f0c 100%);
}

.p-salary::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(to top, rgba(255, 255, 255, .045) 0 1px, transparent 1px 68px);
}

.p-salary__inner {
	position: relative;
	z-index: 2;
}

.p-salary__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
}

.p-salary__ttl {
	font-size: 44px;
	color: var(--w);
	margin-top: 20px;
}

.p-salary__note {
	font-size: 15px;
	color: #c3b0a4;
	max-width: 40ch;
	padding-bottom: 8px;
}

.p-chart {
	position: relative;
	z-index: 2;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	align-items: end;
	height: 470px;
	margin-top: 56px;
}

.p-chart__trend,
.p-chart__pts {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
	overflow: visible;
}

.p-chart__bar {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 26px;
	height: 100%;
}

.p-chart__amt {
	font-family: var(--ff-lt);
	font-weight: 700;
	color: var(--w);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 3px;
}

.p-chart__amt em {
	font-style: normal;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 14px;
	color: var(--cop-3);
}

.p-chart__amt--1 { font-size: 36px; }
.p-chart__amt--2 { font-size: 38px; }
.p-chart__amt--4 { font-size: 42px; }
.p-chart__amt--5 { font-size: 40px; color: var(--cop-3); }
.p-chart__amt--5 em { color: var(--cop-3); }

.p-chart__txt {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 17px;
	color: var(--w);
	text-align: center;
	line-height: 1.5;
}

.p-chart__col {
	width: 100%;
	flex: 0 0 auto;
	border-radius: 6px 6px 0 0;
	position: relative;
	transform-origin: bottom;
	background: linear-gradient(180deg, var(--cop-2) 0%, #b4552a 62%, #8b3e1b 100%);
}

.p-chart__col::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	border-radius: 6px 6px 0 0;
	background: var(--cop-3);
}

.p-chart__bar--future .p-chart__col {
	background:
		radial-gradient(130% 76% at 50% 0%, rgba(246, 195, 160, .42) 0%, rgba(246, 195, 160, .04) 72%),
		linear-gradient(180deg, rgba(224, 138, 85, .26) 0%, rgba(180, 85, 42, .12) 100%);
	border: 2px dashed var(--cop-3);
	border-bottom: 0;
}

.p-chart__bar--future .p-chart__col::after {
	display: none;
}

.p-salary__foot {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-top: 18px;
}

.p-salary__foot > div {
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.p-salary__role {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 15px;
	color: var(--w);
}

.p-salary__role--f {
	color: var(--cop-3);
}

.p-salary__foot p {
	font-size: 12.5px;
	color: #b9a79c;
	line-height: 1.75;
}

.p-salary__foot b {
	color: var(--w);
	font-weight: 700;
}

.p-salary__disc {
	font-size: 12.5px;
	color: #93827a;
	margin-top: 32px;
	max-width: 78ch;
	line-height: 1.9;
}

.p-salary__axis {
	margin-top: 56px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 40px;
}

.p-salary__axishd {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}

.p-salary__axishd b {
	font-size: 19px;
	color: var(--w);
}

.p-salary__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* --- 教育 ------------------------------------------------------------------ */
.p-training__inner {
	display: grid;
	grid-template-columns: 1fr 430px;
	gap: 64px;
	align-items: center;
}

.p-training__ttl {
	font-size: 38px;
	margin-top: 20px;
}

.p-training__lead {
	font-size: 15.5px;
	color: var(--ink-2);
	margin-top: 22px;
	max-width: 38em;
}

.p-training__grid {
	margin-top: 34px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.p-training__cell {
	background: var(--w);
	padding: 17px 19px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	transition: background .4s var(--e-out);
}

.p-training__cell svg {
	color: var(--cop);
	margin-top: 3px;
}

.p-training__cell b {
	font-size: 15px;
}

.p-training__cell p {
	font-size: 12.5px;
	color: var(--mut);
	line-height: 1.75;
}

.p-training__sup {
	margin-top: 22px;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--cop-l);
	border-radius: 8px;
	padding: 18px 22px;
}

.p-training__sup > span {
	font-size: 13.5px;
	color: var(--cop-d);
}

.p-training__ph {
	height: 520px;
	border-radius: 8px;
}

/* --- 一日の流れ -------------------------------------------------------------- */
.p-day__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
}

.p-day__ttl {
	font-size: 36px;
	margin-top: 20px;
}

.p-day__lead {
	font-size: 15px;
	color: var(--ink-2);
	margin-top: 20px;
}

.p-day__list {
	position: relative;
	margin-top: 38px;
	border-left: 2px solid var(--cop-m);
}

/* 縦線が上から降り、通過に合わせて各行が出る。 */
.p-day__rail {
	position: absolute;
	left: -2px;
	top: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, var(--cop), var(--cop-m));
	z-index: 1;
	transition-duration: 1.5s;
}

.p-day__item {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 24px;
	padding: 0 0 22px;
	position: relative;
}

.p-day__item:last-child {
	padding-bottom: 0;
}

.p-day__item::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--w);
	border: 2px solid var(--cop);
}

.p-day__t {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 15px;
	color: var(--cop);
	padding-left: 24px;
}

.p-day__item b {
	font-size: 16px;
}

.p-day__item p {
	font-size: 13px;
	color: var(--mut);
}

.p-day__visual {
	position: relative;
	padding-top: 20px;
}

.p-day__ph1 { height: 340px; border-radius: 8px; }
.p-day__ph2 { height: 230px; margin-top: 20px; margin-left: 60px; border-radius: 8px; }

/* --- 数字 -------------------------------------------------------------------- */
.p-numbers {
	padding-block: 72px;
}

.p-numbers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.p-numbers__cell {
	background: var(--w);
	padding: 23px 22px 25px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.p-numbers__v {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 42px;
	color: var(--cop);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.p-numbers__v small {
	font-size: 16px;
	color: var(--mut);
	font-weight: 600;
	margin-left: 3px;
}

.p-numbers__cell p {
	font-size: 13px;
	color: var(--mut);
}

.p-numbers__disc {
	font-size: 12.5px;
	color: var(--mut);
	margin-top: 18px;
}

/* --- 仕事とプライベート -------------------------------------------------------- */
.p-life {
	background: linear-gradient(172deg, #fff9f5 0%, #fbeee6 100%);
	padding: 80px 0 88px;
}

h2.p-life__ttl {
	font-size: 42px;
}

.p-life__scatter {
	position: relative;
	height: 520px;
	margin-top: 44px;
}

.p-life__scatter .c-photo {
	position: absolute;
	transition: transform .6s var(--e-out);
}

.p-life__p1 { left: 0; top: 26px; width: 420px; height: 280px; border-radius: 8px; }
.p-life__p2 { left: 392px; top: 0; width: 196px; height: 196px; border: 6px solid var(--w); padding: 14px; }
.p-life__p3 { left: 456px; top: 224px; width: 330px; height: 250px; border-radius: 8px; }
.p-life__p4 { right: 158px; top: 34px; width: 172px; height: 172px; border: 6px solid var(--w); padding: 12px; }
.p-life__p5 { right: 0; top: 232px; width: 300px; height: 230px; border-radius: 8px; }

.p-life__chips {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 36px;
	flex-wrap: wrap;
}

/* --- tech ------------------------------------------------------------------- */
.p-tech {
	background: var(--dk);
	padding-block: 80px;
}

.p-tech__inner {
	display: grid;
	grid-template-columns: 1fr 470px;
	gap: 64px;
	align-items: center;
}

.p-tech__ttl {
	font-size: 38px;
	color: var(--w);
	margin-top: 20px;
}

.p-tech__lead {
	font-size: 15px;
	color: #a8b0c6;
	margin-top: 22px;
	max-width: 42em;
}

.p-tech__tiles {
	margin-top: 34px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.p-tech__tile {
	background: var(--dk-2);
	border: 1px solid var(--dk-3);
	border-radius: 8px;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color .4s var(--e-out), transform .4s var(--e-out);
}

.p-tech__tile b {
	font-size: 14.5px;
	color: var(--w);
}

.p-tech__ph {
	height: 380px;
	border-radius: 8px;
}

/* --- 募集要項 ----------------------------------------------------------------- */
.p-req {
	padding-block: 72px;
}

.p-req__inner {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}

.p-req__ttl {
	font-size: 32px;
	margin-top: 20px;
}

.p-req__slot {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--cop-l);
	border: 1px solid var(--cop-m);
	padding: 10px 16px;
	border-radius: 999px;
}

.p-req__slot b {
	font-size: 13.5px;
	color: var(--cop-d);
}

.p-req__aside {
	font-size: 13px;
	color: var(--mut);
	margin-top: 18px;
}

.p-req__table {
	border-top: 1px solid var(--line);
	width: 100%;
}

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

.p-req__table th {
	width: 170px;
	font-size: 13.5px;
	color: var(--mut);
	font-weight: 400;
}

.p-req__table td {
	font-size: 14.5px;
}

.p-req__table .is-tbd {
	color: var(--mut);
}

.p-req__table a {
	color: var(--cop);
	font-weight: 700;
}

/* --- 採用FAQ ------------------------------------------------------------------ */
.p-rfaq {
	padding-block: 72px;
}

.p-rfaq__inner {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 64px;
	align-items: start;
}

.p-rfaq__ttl {
	font-size: 32px;
	margin-top: 20px;
}

.p-rfaq__box {
	margin-top: 26px;
	background: var(--w);
	border: 1px solid var(--cop-m);
	border-radius: 8px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.p-rfaq__box p {
	font-size: 13.5px;
	color: var(--ink-2);
}

.p-rfaq__list {
	border-top: 1px solid var(--line);
}

.p-rfaq__item {
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	display: grid;
	grid-template-columns: 1fr 24px;
	gap: 16px;
	align-items: start;
}

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

.p-rfaq__item b {
	font-size: 17.5px;
}

.p-rfaq__item p {
	font-size: 14px;
	color: var(--ink-2);
	margin-top: 8px;
}

.p-rfaq__item svg {
	color: var(--cop);
	margin-top: 4px;
	transition: transform .45s var(--e-out);
}

/* --- エントリー ------------------------------------------------------------------ */
.p-entry {
	position: relative;
	overflow: hidden;
	padding-block: 88px;
	background:
		radial-gradient(760px 460px at 22% 16%, rgba(246, 195, 160, .3) 0%, rgba(246, 195, 160, 0) 62%),
		linear-gradient(150deg, #b4552a 0%, #9a431f 58%, #7c3416 100%);
}

.p-entry__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.p-entry__ttl {
	font-size: 44px;
	color: var(--w);
	margin-top: 20px;
}

.p-entry__lead {
	font-size: 15.5px;
	color: #f7e5da;
	margin-top: 20px;
	max-width: 48ch;
}

.p-entry__cta {
	display: flex;
	gap: 12px;
	margin-top: 26px;
}

.p-entry__hint {
	font-size: 13.5px;
	color: #f7e5da;
	margin-top: 22px;
}

.p-entry__note {
	font-size: 12.5px;
	color: #f3d8c8;
	margin-top: 18px;
}

/* ==========================================================================
   7. motion
   ------------------------------------------------------------------------
   方針：動きはそのセクションが「何であるか」から導く。
   全部を同じフェードで出さない。保温・板金の仕事の語彙を動きに使う。

     巻く   → 端から端へ拭うワイプ（clip-path）
     包む   → 中から外へ開く／外から中へ閉じる
     継ぎ目 → 中央から左右へ、上下へ割れる
     反射   → 金属面を一度だけ走る光

   初期状態は必ず .js-fadein 側に置く（撮影・計測の中和CSSが拾うため）。
   高さは触らない。transform と clip-path だけで作る。
   ========================================================================== */
.js .js-fadein {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity .7s var(--e-out) var(--d),
		transform .7s var(--e-out) var(--d);
}

.js-fadein.is-inview {
	opacity: 1;
	transform: none;
}

/* --- 行マスク：見出しは1行ずつ、下から起き上がる ------------------------- */
.js-inview-lines .ln {
	display: block;
	overflow: hidden;
}

.js .js-inview-ln {
	display: block;
	font-style: inherit;
	transform: translateY(105%);
	transition: transform .8s var(--e-out) var(--d);
}

.js-inview-lines.is-inview .js-inview-ln {
	transform: none;
}

/* --- ワイプ：端から拭う。写真と帯に使う ---------------------------------- */
.js .js-fadein--wipe-l,
.js .js-fadein--wipe-r,
.js .js-fadein--wipe-d,
.js .js-fadein--wipe-u,
.js .js-fadein--diag,
.js .js-fadein--open {
	opacity: 1;
	transform: none;
	transition: clip-path .8s var(--e-out) var(--d);
}

.js .js-fadein--wipe-l { clip-path: inset(0 100% 0 0); }
.js .js-fadein--wipe-r { clip-path: inset(0 0 0 100%); }
.js .js-fadein--wipe-d { clip-path: inset(0 0 100% 0); }
.js .js-fadein--wipe-u { clip-path: inset(100% 0 0 0); }
/* 継ぎ目が割れるように、中央から上下へ開く */
.js .js-fadein--open { clip-path: inset(50% 0 50% 0); }
/* ロゴの斜線・ヒーローの斜めカットと呼応する斜めワイプ */
.js .js-fadein--diag { clip-path: polygon(0 0, 0 0, -40% 100%, -40% 100%); }

.js-fadein--wipe-l.is-inview,
.js-fadein--wipe-r.is-inview,
.js-fadein--wipe-d.is-inview,
.js-fadein--wipe-u.is-inview,
.js-fadein--open.is-inview { clip-path: inset(0 0 0 0); }

.js-fadein--diag.is-inview { clip-path: polygon(0 0, 140% 0, 100% 100%, -40% 100%); }

/* 写真は枠が開くと同時に、中身がわずかに寄ってくる */
.js .js-inview-zoom {
	transform: scale(1.07);
	transition: transform 1.1s var(--e-out) var(--d);
}

.js-inview-zoom.is-inview { transform: none; }

/* --- 金属の反射：一度だけ光が走る -------------------------------------- */
/* 宿主は .c-photo（position:relative 済み）。ここで position を書くと
   絶対配置している写真を在来配置に戻してしまうので、書かない。 */

.js-inview-sheen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(104deg,
		rgba(255, 255, 255, 0) 38%,
		rgba(255, 255, 255, .58) 50%,
		rgba(255, 255, 255, 0) 62%);
	transform: translateX(-120%);
	opacity: 0;
}

.js-inview-sheen.is-inview::after {
	animation: sheen 1.25s var(--e-out) calc(var(--d) + .35s) 1 forwards;
}

@keyframes sheen {
	0% { transform: translateX(-120%); opacity: 0; }
	14% { opacity: 1; }
	86% { opacity: 1; }
	100% { transform: translateX(120%); opacity: 0; }
}

/* --- 線が伸びる -------------------------------------------------------- */
.js .js-fadein--growx,
.js .js-fadein--growy,
.js .js-fadein--growc {
	opacity: 1;
	transition: transform .8s var(--e-out) var(--d);
}

.js .js-fadein--growx { transform: scaleX(0); transform-origin: left; }
.js .js-fadein--growy { transform: scaleY(0); transform-origin: top; }
.js .js-fadein--growc { transform: scaleX(0); transform-origin: center; }

.js-fadein--growx.is-inview,
.js-fadein--growy.is-inview,
.js-fadein--growc.is-inview { transform: none; }

/* --- 弾む・傾く -------------------------------------------------------- */
.js .js-fadein--pop {
	transform: scale(.55);
	transition:
		opacity .4s var(--e-out) var(--d),
		transform .72s cubic-bezier(.34, 1.5, .5, 1) var(--d);
}

.js-fadein--pop.is-inview { transform: none; }

/* 散らした写真は、それぞれ違う角度から戻る */
.js .js-fadein--drop {
	transform: translateY(34px) rotate(var(--rot, -2.5deg)) scale(.96);
	transition:
		opacity .6s var(--e-out) var(--d),
		transform .95s cubic-bezier(.24, 1.2, .38, 1) var(--d);
}

.js-fadein--drop.is-inview { transform: none; }

/* キーワードの札は面が起き上がる */
.js .js-fadein--flip {
	transform: perspective(900px) rotateX(-42deg);
	transform-origin: bottom;
	transition:
		opacity .5s var(--e-out) var(--d),
		transform .8s var(--e-out) var(--d);
}

.js-fadein--flip.is-inview { transform: none; }

/* 横から寄る（本文ブロック用。SPでは無効化する） */
.js .js-fadein--left { transform: translateX(-30px); }
.js .js-fadein--right { transform: translateX(30px); }

/* --- 数字：桁がひとつずつ立ち上がる ------------------------------------- */
.js .js-inview-dg {
	display: inline-block;
	transform: translateY(70%);
	opacity: 0;
	transition:
		transform .6s var(--e-out) var(--dd, 0ms),
		opacity .4s linear var(--dd, 0ms);
}

.js-inview-digits.is-inview .js-inview-dg {
	transform: none;
	opacity: 1;
}

/* --- 給与バー：床から積み上がる ---------------------------------------- */
.js .p-chart__col.js-fadein {
	opacity: 1;
	transform: scaleY(0);
	transition: transform .85s cubic-bezier(.2, .9, .3, 1) var(--d);
}

.js .p-chart__col.js-fadein.is-inview { transform: none; }

/* 「その先」のバーだけ、着地後に一度だけ息をする */
.p-chart__bar--future .p-chart__col.is-inview {
	animation: breathe 3.4s var(--e-io) 1.2s 3;
}

@keyframes breathe {
	0%, 100% { box-shadow: 0 0 0 0 rgba(246, 195, 160, 0); }
	50% { box-shadow: 0 0 34px -6px rgba(246, 195, 160, .32); }
}

/* --- SVGの線を描く（分岐図） -------------------------------------------- */
.js .js-inview-draw path,
.js .js-inview-draw polyline {
	stroke-dasharray: var(--len, 1200);
	stroke-dashoffset: var(--len, 1200);
	transition: stroke-dashoffset .9s var(--e-out) var(--d);
}

.js-inview-draw.is-inview path,
.js-inview-draw.is-inview polyline { stroke-dashoffset: 0; }

.js .js-inview-draw circle {
	opacity: 0;
	transition: opacity .45s var(--e-out) calc(var(--d) + .85s);
}

.js-inview-draw.is-inview circle { opacity: 1; }

/* --- ゾーン切替バーの矢印は、帯が着いてから動きはじめる ------------------ */
.p-zbar__arrow { animation: none; }

.p-zbar.is-inview .p-zbar__arrow {
	animation: bob 2.4s var(--e-io) 1s infinite;
}

/* --- ホバーの作り込み ---------------------------------------------------- */
.p-doors__client,
.p-doors__recruit {
	position: relative;
	transition: background-color .5s var(--e-out);
}

.p-doors__client::before,
.p-doors__recruit::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .55s var(--e-out);
}

.p-doors__client::before { background: var(--blue); }
.p-doors__recruit::before { background: var(--cop); transform-origin: right; }

/* テキストリンクの矢印は、送り出して入れ替える */
.p-doors__links a {
	overflow: hidden;
}

.p-profile__cell,
.p-numbers__cell,
.p-who__cell {
	transition: background-color .45s var(--e-out), transform .45s var(--e-out);
}

/* --- 保険 ----------------------------------------------------------------
   演出の所要時間を過ぎたら、クリップも変形も外して確実に見える状態にする。
   環境差でトランジションが完走しなくても、ここで必ず表示される。
   （タブが裏にある間はアニメーションが凍る等、完走しない状況は実在する） */
/* !important は本来避けるが、ここは「何があっても表示する」ための最終防衛線。
   通常の詳細度だと .js .p-chart__col.js-fadein (0,3,0) のような
   個別ルールに負けて、保険として機能しない（実際に負けていた）。 */
.js-fadein.is-done,
.js-inview-zoom.is-done {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition: none !important;
}

.js-inview-lines.is-done .js-inview-ln,
.js-inview-digits.is-done .js-inview-dg {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.js-inview-draw.is-done path,
.js-inview-draw.is-done polyline {
	stroke-dashoffset: 0 !important;
	transition: none !important;
}

.js-inview-draw.is-done circle {
	opacity: 1 !important;
	transition: none !important;
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.js .js-fadein,
	.js .js-inview-ln,
	.js .js-inview-zoom,
	.js .js-inview-dg,
	.js .p-chart__col.js-fadein {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	.js .js-inview-draw path,
	.js .js-inview-draw polyline { stroke-dashoffset: 0 !important; }

	.js .js-inview-draw circle { opacity: 1 !important; }

	.js-inview-sheen::after { display: none !important; }
}

/* ==========================================================================
   8. responsive
   PC(1440)の完全再現が先。以下はPCルールを上書きするだけで、PCを変えない。
   1240px以下〜769pxはページ幅を固定して横スクロールさせる（崩れ防止）。
   ========================================================================== */
@media screen and (max-width: 1360px) and (min-width: 769px) {
	/* コンテンツ幅(1320px)を割ったらページ幅ごと固定して横スクロールさせる。
	   可変にすると片方が潰れ片方がはみ出して崩壊する（SKILL.md C-3）。 */
	html,
	body {
		width: 1360px;
	}

	.l-header {
		position: static;
	}

}

@media screen and (max-width: 768px) {
	:root {
		--inner: 100%;
		--inner-wide: 100%;
		--page: 100%;
	}

	body {
		font-size: 16px;
	}

	.l-inner,
	.l-inner--wide {
		width: 100%;
		padding-inline: 20px;
	}

	.l-section,
	.l-section--sm,
	.p-flow,
	.p-faq,
	.p-contact,
	.p-numbers,
	.p-req,
	.p-rfaq {
		padding-block: 64px;
	}

	/* header：ロゴ＋電話＋メニューの3点だけ */
	.l-header__inner {
		height: 60px;
		gap: 12px;
		padding-inline: 16px;
	}

	.l-header__nav,
	.l-header__tel span,
	.l-header__door span {
		display: none;
	}

	.l-header__logo b { font-size: 19px; }
	.l-header__doors { padding-left: 12px; gap: 8px; }
	.l-header__tel { padding-right: 12px; margin-right: 0; }
	.l-header__tel b { font-size: 15px; }

	/* hero */
	.p-rhero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		padding-block: 40px 56px;
	}

	.p-rhero__body {
		padding: 0 20px;
	}

	.p-rhero__ttl { font-size: 34px; }
	.p-rhero__cta {
		flex-direction: column;
	}


	.p-rhero__visual { height: 360px; margin-top: 24px; }
	.p-rhero__glow { display: none; }
	.p-rhero__main { position: relative; top: 0; left: 0; width: 260px; height: 260px; margin-inline: auto; padding: 14px; }
	.p-rhero__sat { display: none; }

	/* 二枚扉：縦に積んで、色面で切る */
	.p-doors {
		background: none;
	}

	.p-doors__inner {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.p-doors__client {
		background: var(--bg);
		padding: 32px 20px 34px;
	}

	.p-doors__recruit {
		background: var(--cop-l);
		padding: 32px 20px 34px;
		border-top: 1px solid var(--line);
	}

	.p-doors__ttl { font-size: 21px; }
	.p-doors__ttl--sm { font-size: 19px; }

	/* グリッドを縦積みへ */
	.p-pillars,
	.p-services__main,
	.p-services__sub,
	.p-works__grid,
	.p-flow__list,
	.p-about__inner,
	.p-faq__inner,
	.p-initiative__inner,
	.p-initiative__tiles,
	.p-band__inner,
	.p-band__paths,
	.p-rwork__grid,
	.p-who__grid,
	.p-who__note,
	.p-tree__branch,
	.p-training__inner,
	.p-training__grid,
	.p-day__inner,
	.p-numbers__grid,
	.p-tech__inner,
	.p-tech__tiles,
	.p-req__inner,
	.p-rfaq__inner,
	.p-profile__grid,
	.p-profile__head,
	.p-timeline {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.p-pillars__cell + .p-pillars__cell,
	.p-flow__item + .p-flow__item,
	.p-about__words div + div {
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	.p-about__words { grid-template-columns: 1fr 1fr; }
	.p-about__visual { height: 420px; }
	.p-about__ph1 { width: 240px; height: 300px; }
	.p-about__ph2 { width: 170px; height: 170px; }

	.p-works__side { padding-top: 0; }
	.p-works__leadph { height: 240px; }
	.p-works__itemph { height: 200px; }

	.c-sechead h2 { font-size: 26px; }
	.p-band__ttl,
	.p-entry__ttl,
	.p-salary__ttl,
	.p-life__ttl { font-size: 30px; }
	.p-about__ttl,
	.p-contact__ttl,
	.p-initiative__ttl,
	.p-tech__ttl,
	.p-training__ttl,
	.p-day__ttl { font-size: 26px; }
	.p-faq__ttl,
	.p-req__ttl,
	.p-rfaq__ttl { font-size: 24px; }

	.c-tel { width: 100%; }
	.c-tel__panel { width: 100%; padding: 18px 16px 20px; }
	.c-tel__num { font-size: 24px; }

	/* タイムライン：横→縦 */
	.p-timeline__rail { display: none; }
	.p-timeline__item {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: 16px;
		padding: 0;
		border-left: 2px solid var(--cop-m);
		padding-left: 22px;
		padding-bottom: 24px;
	}

	.p-timeline__pin { width: 48px; height: 48px; }

	/* キャリア図：横4分岐→縦積み */
	.p-tree__step { width: 100%; }
	.p-tree__fork { display: none; }
	.p-tree__forklabel { margin: 24px 0 20px; }
	.p-tree__card { border-left: 3px solid var(--cop); border-top: 1px solid var(--line); }

	/* 給与：階段を縦に */
	.p-salary { padding-block: 64px; }
	.p-salary__head { flex-direction: column; align-items: flex-start; gap: 18px; }
	.p-chart {
		grid-template-columns: 1fr;
		height: auto;
		gap: 14px;
	}

	.p-chart__trend,
	.p-chart__pts { display: none; }

	/* 横棒に組み替える。長さの比はPCの高さの比をそのまま使う。
	   全部同じ長さにすると「上がっていく」が消える。 */
	.p-chart__bar {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		height: auto;
		gap: 12px;
	}

	.p-chart__amt,
	.p-chart__txt {
		width: 98px;
		flex: none;
		justify-content: flex-start;
		text-align: left;
	}

	.p-chart__col {
		height: 44px !important;
		flex: none;
		/* ラベル98px + gap12px を引いた残りに対する比。
		   単純な % だと親の全幅基準になり、はみ出す。 */
		width: calc((100% - 110px) * var(--wf, 1));
		border-radius: 0 5px 5px 0;
		transform-origin: left;
	}

	.p-chart__col.js-fadein { transform: scaleX(0); }
	.p-chart__col.js-fadein.is-inview { transform: scaleX(1); }
	.p-chart__amt--1, .p-chart__amt--2, .p-chart__amt--4 { font-size: 24px; }
	.p-chart__amt--5 { font-size: 20px; }
	.p-chart__amt em { font-size: 11px; }
	.p-chart__txt { font-size: 12px; line-height: 1.4; }
	.p-salary__foot { grid-template-columns: 1fr; gap: 14px; }

	/* プライベート：散らし→2列ずらし */
	.p-life__scatter {
		height: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.p-life__scatter .c-photo {
		position: static;
		width: auto;
		height: 170px;
		border-radius: 6px;
		border-width: 1px;
		padding: 10px;
	}

	.p-life__p2, .p-life__p4 { margin-top: 40px; }
	.p-life__p5 { grid-column: 1 / -1; }

	.p-day__list { margin-top: 28px; }
	.p-day__item { grid-template-columns: 74px 1fr; gap: 14px; }
	.p-day__ph2 { margin-left: 0; }

	.p-req__table th { width: 120px; font-size: 12.5px; }
	.p-req__table td { font-size: 13.5px; }

	.l-footer__inner { flex-direction: column; gap: 36px; }
	.l-footer__navs { flex-wrap: wrap; gap: 28px 40px; }
	.l-footer__spacer { display: none; }

	.p-zbar__inner { height: auto; padding: 16px 20px; flex-wrap: wrap; gap: 10px; }
	.p-zbar__txt { font-size: 14px; }
}

@media screen and (max-width: 768px) {
	/* SPでは横方向の移動をやめる。全幅要素をX方向に動かすと、
	   出現前に横方向のはみ出しを作り、12pxの横スクロールが出る（実測）。
	   ※ 元の宣言が .js 接頭辞つき（0,2,0）なので、ここも .js を付けないと
	     メディアクエリでも負ける。詳細度は記述順より強い。 */
	.js .js-fadein--left,
	.js .js-fadein--right {
		transform: translateY(28px);
	}
}

/* ==========================================================================
   9. SP の作り込み
   PCのルールは触らない。ここだけで完結させる。
   ========================================================================== */
@media screen and (max-width: 768px) {

	/* --- 日本語の折り返し --------------------------------------------------
	   「保温」「絞って」のように語の途中で折れるのを止める。
	   auto-phrase は文節で折り返す。非対応ブラウザでは通常折り返しに戻るだけ。 */
	h1, h2, h3,
	.u-dp, .u-dp7,
	.c-sechead h2,
	.p-doors__ttl,
	.p-doors__ttl--sm,
	.p-pillars__cell b,
	.p-services__body b,
	.p-tree__card b,
	.p-timeline__item b {
		word-break: auto-phrase;
		text-wrap: pretty;
		/* 文節が1行に入りきらない時だけ、語中でも折る。
		   これが無いと画面からはみ出す。 */
		overflow-wrap: break-word;
	}

	/* SPでは <br> による行分けをやめ、文節折り返しに任せる。
	   行マスクの代わりに素直なフェードにする。 */
	.js-inview-lines .ln {
		display: inline;
		overflow: visible;
	}

	.js .js-inview-lines .js-inview-ln {
		display: inline;
		transform: none;
		transition: none;
	}

	.js .js-inview-lines {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .8s var(--e-out) var(--d), transform .8s var(--e-out) var(--d);
	}

	.js-inview-lines.is-inview {
		opacity: 1;
		transform: none;
	}

	/* --- アイブロウ：2行になっても重ならないように --------------------------- */
	.c-eyebrow {
		flex-wrap: wrap;
		align-items: flex-start;
		line-height: 1.65;
		font-size: 10px;
		letter-spacing: .14em;
		gap: 8px;
	}

	.c-eyebrow::before {
		margin-top: .62em;
	}

	/* --- 見出しの大きさ ------------------------------------------------------ */
	h2.c-sechead__h--xl { font-size: 28px; }
	h2.c-sechead__h--lg { font-size: 27px; }
	h2.c-sechead__h--md { font-size: 25px; }
	h2.c-sechead__h--sm { font-size: 24px; }

	.p-rhero__ttl { font-size: 32px; }
	.p-doors__ttl { font-size: 20px; }
	.p-doors__ttl--sm { font-size: 18px; }
	.p-pillars__cell b { font-size: 21px; }
	.p-services__body b { font-size: 18px; }

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

	/* 小さい円は注記が読めないので出さない。写真が入ったら戻す。 */
	.p-rhero__sat { display: none; }


	.p-rhero__visual { height: 320px; }
	.p-rhero__main { width: 240px; height: 240px; padding: 12px; }

	/* --- 余白を詰める -------------------------------------------------------- */
	.p-pillars__cell { padding: 30px 22px; }
	.p-services__body { padding: 20px 20px 24px; }
	.p-rwork__body { padding: 20px 20px 24px; }
	.p-who__cell { padding: 18px 20px; }
	.p-who__note { padding: 26px 22px; }
	.p-tree__card { padding: 22px 20px 24px; }
	.p-profile__cell { padding: 18px 20px 20px; }
	.p-flow__item { padding: 24px 22px 26px; }
	.p-training__cell { padding: 16px 18px; }
	.p-numbers__cell { padding: 22px 20px 24px; }
	.p-doors__client,
	.p-doors__recruit { padding: 28px 20px 30px; }

	/* --- 写真の注記はSPだと読み切れないので、主要な枠だけ残す ----------------- */
	.c-photo--tiny .c-photo__note li:nth-child(n + 3) { display: none; }
	.c-photo__note { max-width: 100%; }

	/* --- 会社概要 ------------------------------------------------------------ */
	.p-profile__head { gap: 18px; align-items: flex-start; }
	.p-profile__area { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
	.p-profile__area b { font-size: 14px; }
	.p-profile__ttl { font-size: 26px; }

	/* --- ヘッダー：アイコン3つに絞る ------------------------------------------ */
	.l-header__inner { gap: 10px; }
	.l-header__mark { width: 34px; }
	.l-header__wordmark b { font-size: 17px; }
	.l-header__wordmark i { font-size: 7.5px; }
	.l-header__badge { display: none; }
	.l-header__doors { border-left: 0; padding-left: 0; gap: 6px; }
	.l-header__door .c-btn span { display: none; }
	.l-header__door .c-btn { padding: 11px 13px; }
	.l-header__door .c-btn__ic { width: 18px; height: 18px; }

	/* ヘッダーの電話パネルは画面幅に合わせる */
	.c-tel--head .c-tel__panel {
		position: fixed;
		top: 66px;
		left: 12px;
		right: 12px;
		white-space: normal;
		align-items: center;
	}

	/* --- ボタンは縦積み。幅いっぱい ------------------------------------------ */
	.p-rhero__cta .c-btn,
	.p-entry__cta .c-btn,
	.p-band__cta .c-btn,
	.p-doors__btn,
	.p-contact__btn {
		width: 100%;
	}

	.p-entry__cta { flex-direction: column; width: 100%; }
	.c-tel { width: 100%; }
	.c-tel__trigger { width: 100%; }
}

/* ==========================================================================
   10. 求人サイト用の部品
   ========================================================================== */

/* --- パンくずの旧定義は削除 -------------------------------------------
   下層ページ用の .c-crumb が後方（l-pagehead の直前）にあり、そちらが実体。
   旧定義の padding:14px 0 だけが残って余白が二重に付いていた。 */

.c-crumb b {
	color: var(--ink);
	font-weight: 500;
}

/* --- 3つの選択肢カード ---------------------------------------------------- */
.p-choice {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.p-choice__card {
	display: flex;
	flex-direction: column;
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	transition: transform .55s var(--e-out), box-shadow .55s var(--e-out), border-color .4s var(--e-out);
}

.p-choice__top {
	height: 5px;
}

.p-choice__ph {
	height: 190px;
	border: 0;
	border-bottom: 1px solid var(--line);
}

.p-choice__body {
	padding: 26px 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.p-choice__k {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 3px;
}

.p-choice__ttl {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: -.025em;
}

.p-choice__quote {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.9;
	padding-left: 15px;
	border-left: 2px solid var(--line);
}

.p-choice__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 2px;
}

.p-choice__list li {
	display: flex;
	gap: 9px;
	font-size: 13.5px;
	color: var(--ink-2);
	line-height: 1.75;
}

.p-choice__list svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 4px;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.p-choice__foot {
	margin-top: auto;
	padding-top: 6px;
}

.p-choice__foot .c-btn { width: 100%; }

/* A＝藍 */
.p-choice__card--a .p-choice__top { background: var(--blue); }
.p-choice__card--a .p-choice__k { background: var(--blue-l); color: var(--blue); }
.p-choice__card--a .p-choice__list svg { stroke: var(--blue); }
/* B＝銅 */
.p-choice__card--b .p-choice__top { background: var(--cop); }
.p-choice__card--b .p-choice__k { background: var(--cop-l); color: var(--cop-d); }
.p-choice__card--b .p-choice__list svg { stroke: var(--cop); }
/* C＝緑 */
.p-choice__card--c .p-choice__top { background: var(--grn); }
.p-choice__card--c .p-choice__k { background: var(--grn-l); color: var(--grn-d); }
.p-choice__card--c .p-choice__list svg { stroke: var(--grn); }

.c-btn--grn {
	background: var(--grn);
	color: var(--w);
	border-color: var(--grn);
	box-shadow: 0 2px 10px -6px rgba(61, 107, 87, .8);
}

.c-btn--grn::before { background: var(--grn-d); }

/* --- 「この3つだけが正解ではありません」 ----------------------------------- */
.p-other {
	margin-top: 40px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 40px 44px 44px;
	text-align: center;
}

.p-other__lead {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 19px;
	color: var(--ink);
}

.p-other__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin: 24px auto 28px;
	max-width: 720px;
}

.p-other__tags span {
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 17px;
	font-size: 13.5px;
	color: var(--ink-2);
}

.p-other__q {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -.025em;
	line-height: 1.45;
}

/* --- 目標を一緒に立てる（循環） -------------------------------------------- */
.p-cycle {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 40px;
	position: relative;
}

.p-cycle__step {
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 24px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 11px;
	position: relative;
}

.p-cycle__n {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--cop);
}

.p-cycle__step b {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
}

.p-cycle__step p {
	font-size: 13.5px;
	color: var(--ink-2);
	line-height: 1.8;
}

.p-cycle__step::after {
	content: "";
	position: absolute;
	right: -11px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--cop-m);
	border-right: 2px solid var(--cop-m);
	transform: translateY(-50%) rotate(45deg);
}

.p-cycle__step:last-child::after { display: none; }

.p-cycle__back {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--cop-l);
	border: 1px solid var(--cop-m);
	border-radius: 8px;
	padding: 16px 24px;
	font-size: 14px;
	color: var(--cop-d);
}

.p-cycle__back b { font-family: var(--ff-dp); font-weight: 700; }

/* --- 次に見るもの --------------------------------------------------------- */
.p-next {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 34px;
}

.p-next__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 26px 24px 24px;
	transition: transform .5s var(--e-out), border-color .4s var(--e-out), box-shadow .5s var(--e-out);
}

.p-next__card b {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 19px;
}

.p-next__card p {
	font-size: 13.5px;
	color: var(--mut);
	line-height: 1.8;
}

.p-next__go {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--cop);
}

.p-next__go svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .45s var(--e-out);
}

/* --- アコーディオンの旧定義は削除 ------------------------------------------
   FAQのマークアップは <span class="c-acc__mark">Q</span> と
   <span class="c-acc__ic"></span> に分かれているのに、旧定義が
   .c-acc__mark::before / ::after でプラス記号を描いており、
   「Q」の文字の上に ＋ が重なって表示されていた。
   実体は下の「アコーディオン（FAQ）」の定義のみ。ここでは <b> の指定だけ残す。 */
.c-acc__a b {
	color: var(--ink);
	font-weight: 700;
}

/* --- カテゴリのタブ ------------------------------------------------------- */
.c-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}

.c-tabs button {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 14px;
	padding: 11px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink-2);
	background: var(--w);
	transition: background .35s var(--e-out), color .35s var(--e-out), border-color .35s var(--e-out), transform .35s var(--e-out);
}

.c-tabs button.is-active {
	background: var(--cop);
	border-color: var(--cop);
	color: var(--w);
}

.c-tabs button span {
	font-family: var(--ff-lt);
	font-size: 11px;
	opacity: .65;
	margin-left: 6px;
}

.c-tabpanel[hidden] { display: none; }

/* --- SP用の固定バー ------------------------------------------------------- */
.c-bar { display: none; }

/* --- セクションの導入（問い） ---------------------------------------------- */
.p-ask {
	text-align: center;
}

.p-ask__q {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 40px;
	letter-spacing: -.03em;
	line-height: 1.4;
	margin-top: 18px;
}

.p-ask__lead {
	font-size: 15.5px;
	color: var(--ink-2);
	margin: 18px auto 0;
	max-width: 52ch;
}

/* --- 会社の未来 × あなたの未来 --------------------------------------------- */
.p-two {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 28px;
	align-items: center;
	margin-top: 38px;
}

.p-two__side {
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 30px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.p-two__side b {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 22px;
	line-height: 1.45;
	letter-spacing: -.02em;
}

.p-two__side p {
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.9;
}

.p-two__x {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 26px;
	color: var(--cop);
}

.p-two__out {
	margin-top: 24px;
	background: linear-gradient(150deg, #b4552a 0%, #9a431f 60%, #7c3416 100%);
	border-radius: 10px;
	padding: 34px 38px;
	text-align: center;
	color: var(--w);
}

.p-two__out b {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -.02em;
	line-height: 1.5;
}

.p-two__out p {
	font-size: 14.5px;
	color: #f7e5da;
	margin-top: 12px;
}

/* ==========================================================================
   10. 下層ページ（採用）
   ========================================================================== */

/* --- ページ見出し＋パンくず ------------------------------------------------ */
.l-pagehead {
	position: relative;
	overflow: hidden;
	padding: 46px 0 54px;
	background:
		radial-gradient(720px 420px at 82% 14%, rgba(224, 138, 85, .26) 0%, rgba(224, 138, 85, 0) 62%),
		linear-gradient(160deg, #fff 0%, #fff7f2 52%, #fbeadf 100%);
}

.l-pagehead::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(to right, rgba(180, 85, 42, .05) 0 1px, transparent 1px 80px);
}

.l-pagehead__inner {
	position: relative;
	z-index: 2;
}

.c-crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--mut);
	margin-bottom: 18px;
}

.c-crumb a {
	color: var(--cop);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: transform .35s var(--e-out);
}
.c-crumb svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.c-crumb span { color: var(--mut); }

.l-pagehead__ttl {
	font-size: 44px;
	margin-top: 4px;
}

.l-pagehead__lead {
	font-size: 15.5px;
	color: var(--ink-2);
	margin-top: 18px;
	max-width: 60ch;
}

/* --- ページ内アンカー ------------------------------------------------------ */
.c-anchor {
	position: sticky;
	top: 88px;
	z-index: 30;
	/* 背後を隠すための帯なので不透明にする。
	   backdrop-filter は「ぼかす」だけで「隠さない」ため、
	   半透明のままだと下を流れる文字の輪郭が残る。 */
	background: var(--w);
	border-bottom: 1px solid var(--line);
}

.c-anchor__inner {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.c-anchor__inner::-webkit-scrollbar { display: none; }

.c-anchor a {
	position: relative;
	flex: none;
	padding: 16px 18px;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ink-2);
	white-space: nowrap;
	transition: color .3s var(--e-out);
}

.c-anchor a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 2px;
	background: var(--cop);
	transform: scaleX(0);
	transition: transform .4s var(--e-out);
}

/* --- 働き方の詳細ブロック --------------------------------------------------- */
.p-type {
	scroll-margin-top: 150px;
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.p-type + .p-type { margin-top: 34px; }

.p-type__head {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	padding: 34px 38px 30px;
	align-items: center;
}

.p-type__k {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 3px;
	align-self: flex-start;
	display: inline-block;
}

.p-type--a .p-type__k { background: var(--blue-l); color: var(--blue); }
.p-type--b .p-type__k { background: var(--cop-l); color: var(--cop-d); }
.p-type--c .p-type__k { background: #e6f2ec; color: #2c6b4f; }

.p-type__ttl {
	font-size: 32px;
	margin-top: 14px;
}

.p-type__lead {
	font-size: 15px;
	color: var(--ink-2);
	margin-top: 14px;
}

.p-type__ph { height: 220px; border-radius: 8px; }

.p-type__body {
	border-top: 1px solid var(--line);
	padding: 30px 38px 34px;
	background: var(--bg);
}

.p-type__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.p-type__cell {
	background: var(--w);
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.p-type__cell b { font-family: var(--ff-dp); font-weight: 700; font-size: 16px; }
.p-type__cell p { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }

.p-type__note {
	margin-top: 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--w);
	border: 1px solid var(--cop-m);
	border-radius: 8px;
	padding: 18px 22px;
}

.p-type__note svg { color: var(--cop); flex: none; margin-top: 2px; }
.p-type__note p { font-size: 14px; color: var(--ink-2); }

/* --- 役割のタグ群（Type C） ------------------------------------------------- */
.p-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 18px;
}

.p-roles span {
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 13.5px;
	font-family: var(--ff-dp);
	font-weight: 700;
	color: var(--ink-2);
	transition: border-color .35s var(--e-out), transform .35s var(--e-out), color .35s var(--e-out);
}

/* --- アコーディオン（FAQ） -------------------------------------------------- */
.c-acc {
	border-top: 1px solid var(--line);
}

.c-acc__item { border-bottom: 1px solid var(--line); }

.c-acc__q {
	width: 100%;
	display: grid;
	grid-template-columns: 26px 1fr 22px;
	gap: 0 16px;
	align-items: start;
	padding: 19px 4px;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .3s var(--e-out);
}

.c-acc__mark {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 14px;
	color: var(--cop);
	line-height: 1.7;
}

.c-acc__t {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.65;
}

.c-acc__ic {
	position: relative;
	width: 18px;
	height: 18px;
	margin-top: 5px;
	flex: none;
}

.c-acc__ic::before,
.c-acc__ic::after {
	content: "";
	position: absolute;
	background: var(--cop);
	border-radius: 1px;
	transition: transform .4s var(--e-out), opacity .3s var(--e-out);
}

.c-acc__ic::before { left: 0; right: 0; top: 8px; height: 2px; }
.c-acc__ic::after { top: 0; bottom: 0; left: 8px; width: 2px; }

.c-acc__item.is-open .c-acc__ic::after { transform: scaleY(0); }

.c-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .42s var(--e-out);
}

.c-acc__item.is-open .c-acc__panel { grid-template-rows: 1fr; }

.c-acc__inner { overflow: hidden; }

.c-acc__a {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 0 16px;
	padding: 0 4px 20px;
}

.c-acc__a > span {
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 14px;
	color: var(--mut);
	line-height: 1.7;
}

.c-acc__a p {
	font-size: 14.5px;
	color: var(--ink-2);
	line-height: 1.9;
}

.c-acc__a p + p { margin-top: 8px; }

/* --- FAQのカテゴリ --------------------------------------------------------- */
.p-faqcat { scroll-margin-top: 150px; }
.p-faqcat + .p-faqcat { margin-top: 52px; }

.p-faqcat__h {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 6px;
}

.p-faqcat__h b {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -.02em;
}

.p-faqcat__h span {
	font-family: var(--ff-lt);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cop);
}

/* --- ストーリー（これまで／いま／これから） ----------------------------------- */
.p-story { display: flex; flex-direction: column; gap: 0; }

.p-story__row {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 40px;
	padding: 34px 0;
	border-top: 1px solid var(--line);
	align-items: start;
}

.p-story__row:last-child { border-bottom: 1px solid var(--line); }

.p-story__k {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: sticky;
	top: 120px;
}

.p-story__k em {
	font-style: normal;
	font-family: var(--ff-lt);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cop);
}

.p-story__k b {
	font-family: var(--ff-dp);
	font-weight: 900;
	font-size: 24px;
	letter-spacing: -.02em;
}

.p-story__row p { font-size: 15px; color: var(--ink-2); }
.p-story__row p + p { margin-top: 12px; }

/* --- 本文＋写真の2カラム ---------------------------------------------------
   インラインstyleで組むとメディアクエリに勝ってしまい、SPで崩れる。
   必ずクラスにする。 */
.p-lead2 {
	display: grid;
	grid-template-columns: 1fr 470px;
	gap: 64px;
	align-items: center;
}

/* --- 道具・持ち物 ----------------------------------------------------------- */
.p-tools {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-top: 28px;
}

.p-tools div {
	background: var(--w);
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.p-tools b { font-family: var(--ff-dp); font-weight: 700; font-size: 15.5px; }
.p-tools p { font-size: 12.5px; color: var(--mut); line-height: 1.75; }

/* --- 施工前後の比較 --------------------------------------------------------- */
.p-ba {
	display: grid;
	grid-template-columns: 1fr 40px 1fr;
	gap: 0;
	align-items: center;
	margin-top: 28px;
}

.p-ba__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cop);
}

.p-ba figure { height: 280px; border-radius: 8px; }

.p-ba__cap {
	display: block;
	margin-top: 10px;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 14px;
	text-align: center;
}

/* ==========================================================================
   11. 下層ページ SP
   ========================================================================== */
@media screen and (max-width: 768px) {
	.l-pagehead { padding: 30px 0 34px; }
	.l-pagehead__ttl { font-size: 28px; }
	.l-pagehead__lead { font-size: 14.5px; margin-top: 14px; }
	.c-crumb { font-size: 12px; margin-bottom: 12px; }

	.c-anchor { top: 60px; }
	.c-anchor__inner { padding-inline: 20px; }
	.c-anchor a { padding: 13px 12px; font-size: 12.5px; }

	.p-type { border-radius: 8px; scroll-margin-top: 112px; }
	.p-type + .p-type { margin-top: 22px; }
	.p-type__head { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px 22px; }
	.p-type__ttl { font-size: 24px; }
	.p-type__ph { height: 180px; }
	.p-type__body { padding: 22px 20px 24px; }
	.p-type__grid { grid-template-columns: 1fr; }
	.p-type__cell { padding: 18px 18px 20px; }
	.p-type__note { padding: 15px 17px; }

	.c-acc__q { grid-template-columns: 20px 1fr 18px; gap: 0 11px; padding: 15px 2px; }
	.c-acc__t { font-size: 15px; }
	.c-acc__a { grid-template-columns: 20px 1fr; gap: 0 11px; padding: 0 2px 16px; }
	.c-acc__a p { font-size: 14px; }

	.p-faqcat + .p-faqcat { margin-top: 36px; }
	.p-faqcat__h { flex-direction: column; align-items: flex-start; gap: 4px; }
	.p-faqcat__h b { font-size: 21px; }
	.p-faqcat { scroll-margin-top: 112px; }

	.p-story__row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
	.p-story__k { position: static; flex-direction: row; align-items: baseline; gap: 10px; }
	.p-story__k b { font-size: 20px; }
	.p-story__row p { font-size: 14.5px; }

	.p-lead2 { grid-template-columns: 1fr; gap: 24px; }
	.p-cycle { grid-template-columns: 1fr; gap: 12px; }
	.p-cycle__step::after { display: none; }
	.p-tools { grid-template-columns: 1fr 1fr; }
	.p-tools div { padding: 16px 16px 18px; }

	.p-ba { grid-template-columns: 1fr; gap: 14px; }
	.p-ba figure { height: 200px; }
	.p-ba__arrow { transform: rotate(90deg); height: 30px; }

	.p-roles span { font-size: 12.5px; padding: 8px 13px; }
}

/* ==========================================================================
   12. 実写真が入った枠
   仮枠（ハッチング＋撮影メモ）から、実写真へ切り替えるための指定。
   figure に --has を足して、中に <img> を入れるだけで置き換わる。
   ========================================================================== */
.c-photo--has {
	background: var(--bg-2);
	padding: 0;
	align-items: stretch;
	justify-content: stretch;
}

.c-photo--has > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	display: block;
}

/* 円形の枠に入れたとき、注記用のパディングを打ち消す */
.c-photo--has.c-photo--circ { padding: 0; }

/* 撮影メモは実写真が入ったら出さない */
.c-photo--has .c-photo__note { display: none; }

/* 縦グリッド線は写真の上にも残す（設計された面に見せるため） */
.c-photo--has .c-photo__grid { display: none; }  /* 実写真が入ったら仮枠のグリッドは不要 */

/* 暗いセクションの中では、写真をわずかに沈ませて文字を読みやすく */
.c-photo--dark.c-photo--has > img { filter: brightness(.88) saturate(.95); }


/* ---------------------------------------------------------------
   13. 写真の注記
   AI生成画像を使っている枠があるため、実在の社員・実績と
   受け取られないように明示する。小さくするが、読める大きさは保つ。
--------------------------------------------------------------- */
.l-footer__note {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.10);
	font-size: 11.5px;
	line-height: 1.7;
	letter-spacing: .04em;
	color: rgba(255,255,255,.42);
}
.p-day__note {
	margin-top: 18px;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--ink-2);
	opacity: .8;
}

/* ---------------------------------------------------------------
   14. 採用トップ SP
   セクション6（採用ページ用）の定義が、上のSPメディアクエリより後ろに
   書かれているため上書きできていなかった。ここで明示的に1列へ落とす。
   （375pxで .p-choice が97px幅になり、見出しが1文字ずつ改行されていた）
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.p-choice { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
	.p-next   { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }

	.p-two {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 26px;
	}
	/* 「×」は縦並びでは行と行のあいだの記号として中央に置く */
	.p-two__x {
		text-align: center;
		font-size: 20px;
		line-height: 1;
	}
}

/* ---------------------------------------------------------------
   15. 改行と行長
   計測して分かった3点を直す。
   ・PCで1行が最長84字になっていた（日本語の可読上限は40〜45字）
   ・最終行に「す。」だけが残る泣き別れが多発（スマホで39件）
   ・小書き仮名（っ ゃ ゅ ょ）が行頭に来る禁則違反
--------------------------------------------------------------- */

/* 行頭・行末の禁則を厳密に。既定の line-break:auto は小書き仮名の
   行頭を許してしまうため、strict にして「っ」「ゃ」等を送る。 */
body { line-break: strict; }

/* 最終行に1〜2文字だけ残るのを避ける（Chrome 117+ / Safari 17.4+）。
   非対応ブラウザでは無視されるだけなので安全に足せる。 */
p, li, dd, dt, figcaption, .c-sechead__lead, .c-acc__a {
	text-wrap: pretty;
}

/* 見出しとボタンラベルは行数が少ないので、均等割りのほうが収まりが良い */
h1, h2, h3, .c-btn span, .c-eyebrow {
	text-wrap: balance;
}

/* 本文の行長の上限。日本語は 1em ≒ 1文字なので em で指定する。
   左寄せのブロックは左端を維持し、中央寄せのブロックだけ中央に置く。 */
.c-acc__a p,
.p-story__row p,
.p-faq__item dd,
.p-cycle__back p,
.p-type__note p,
.p-tree__msg p,
.p-works__note,
.p-entry__hint,
.p-type__lead,
.p-rhero__note,
.p-salary__disc,
.p-choice__quote,
.p-day__note,
.p-req__aside,
.p-contact__sub,
.p-hero__note {
	max-width: 42em;
}
.p-two__out p {
	max-width: 42em;
	margin-inline: auto;   /* 親が text-align:center のため中央に置く */
}

/* 泣き別れの個別対応（計測で出たものを1件ずつ潰す） */

/* 数値＋単位が「約50／年」と割れていた */
.p-numbers__v { white-space: nowrap; }

/* FAQの質問文が「〜ません／か？」で割れていた。span なので明示的にブロック化する */
.c-acc__t { display: block; text-wrap: pretty; }

/* 見出し的な問いかけ、表のセルも同様に */
.p-other__q { text-wrap: balance; }
td, th { text-wrap: pretty; }

/* フッター住所：スマホでは「／」で改行し「三重」だけが残るのを避ける */
@media screen and (max-width: 768px) {
	.l-footer__sep { display: none; }
	.l-footer__area { display: block; }
}

/* タブレット幅（〜768px）で本文の1行が45emを超えていた。
   内側コンテナに上限を設けて、行長を44em以内に収める。
   スマホ（335px）では元々下回るので影響しない。 */
@media screen and (max-width: 768px) {
	.l-inner { max-width: 664px; }
}

/* 短いラベル・箇条書きは最終行に2文字だけ残りやすいので均等割りにする */
.p-initiative__tile,
.p-choice__list li,
.p-tree__branch li,
.p-band__path { text-wrap: balance; }

/* スマホでは 34px だと1行7文字しか入らず、20文字の問いかけが4行に割れて
   最終行に「か？」だけが残っていた。3行に収まる大きさへ落とす。 */
@media screen and (max-width: 768px) {
	.p-other__q { font-size: 26px; }
}

/* ---------------------------------------------------------------
   16. 語の分断を止める
   計測で「増やす→増や／す」「ラッキング→ラッキ／ング」のような
   語中改行が97件見つかった。auto-phrase は文節単位で折り返すので
   これを全体に効かせる。非対応ブラウザ（Safari等）では通常の
   折り返しに戻るだけなので、安全に適用できる。
--------------------------------------------------------------- */
body {
	word-break: auto-phrase;
	/* 文節が1行に入りきらない時だけ語中でも折る。無いと画面からはみ出す。 */
	overflow-wrap: break-word;
}

/* 小さいボタンのラベルが「実績一覧を／見る」と割れていた。
   短いラベルなので折り返さず、収まらない時だけ字間を詰める。 */
.c-btn.c-btn--sm span,
.c-btn span { white-space: nowrap; }
@media screen and (max-width: 768px) {
	.c-btn--sm { font-size: 12.5px; letter-spacing: 0; }
}

/* ---------------------------------------------------------------
   17. スマホのタップ領域
   実測で75箇所が44px未満だった（フッターのリンクが26px、
   パンくずが23px、電話ボタンが32pxなど）。指で押す領域は
   44×44pxが目安。
   疑似要素で当たり判定を広げる方法は overflow:hidden の要素の
   中では切られて効かないので、実際に padding で高さを確保する。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* 縦に並ぶテキストリンク。要素間の gap を padding に振り替える */
	.l-footer__col a { padding-block: 9px; }
	.l-footer__col   { gap: 0; }

	.p-doors__links a { padding-block: 10px; }
	.p-doors__links   { gap: 0; }

	.c-crumb a { padding-block: 11px; }

	.p-profile__v.u-tabnum,
	.l-header__logo {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* ボタン類は高さそのものを44px以上に */
	.c-btn,
	.l-footer__tel,
	.p-faq__more,
	.p-initiative__more,
	.c-tel__trigger {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.l-footer__tel { justify-content: flex-start; }
}

/* ---------------------------------------------------------------
   18. ホバー演出は、ホバーできる環境だけに
   :hover が53箇所あり、すべて素のまま書かれていた。
   タッチ端末では指を離したあともホバー状態が残るため、
   ボタンの塗りや矢印の移動が押しっぱなしのように見えてしまう。
   （うち34箇所は transform / clip-path を動かすもの）
   ルールごと @media (hover: hover) に入れて、マウスのある環境
   だけで効くようにする。
--------------------------------------------------------------- */
@media (hover: hover) {
	.l-header__nav a:hover::after {
		transform: scaleX(1);
		transform-origin: left;
	}

	.l-footer__tel:hover {
		color: #a9bce2;
	}

	.l-footer__col a:hover {
		color: var(--w);
		transform: translateX(3px);
	}

	.l-footer__col--recruit a:hover {
		color: #f6d2bb;
	}

	.c-btn:hover::before,
	.c-btn:focus-visible::before {
		width: 260%;
		height: 700%;
	}

	.c-btn:hover {
		transform: translateY(-2px);
	}

	/* 受話器は「鳴る」。矢印は「進む」。目は「開く」。役割で動きを変える。 */
	.c-btn:hover .c-btn__ic--ring {
		animation: ring .7s var(--e-io);
	}

	.c-btn:hover .c-btn__ic--go {
		transform: translateX(4px);
	}

	.c-btn:hover .c-btn__ic--zoom {
		transform: scale(1.14);
	}

	.c-btn--blue:hover {
		box-shadow: 0 14px 28px -14px rgba(46, 76, 135, .95);
	}

	.c-btn--cop:hover {
		box-shadow: 0 14px 28px -14px rgba(180, 85, 42, .95);
	}

	.c-btn--oblue:hover::after,
	.c-btn--ocop:hover::after,
	.c-btn--ow:hover::after,
	.c-btn--oblue:focus-visible::after,
	.c-btn--ocop:focus-visible::after,
	.c-btn--ow:focus-visible::after {
		clip-path: inset(0 0 0 0);
	}

	.c-btn--oblue:hover { color: var(--blue-d); }

	.c-btn--ocop:hover { color: var(--cop-d); }

	.c-chip:hover {
		background: rgba(255, 255, 255, .13);
		border-color: var(--cop-3);
		transform: translateY(-2px);
	}

	.p-doors__links a:hover {
		transform: translateX(4px);
		color: var(--blue-d);
	}

	.p-doors__recruit .p-doors__links a:hover {
		color: var(--cop-d);
	}

	.p-services__card:hover {
		transform: translateY(-5px);
		box-shadow: 0 22px 40px -28px rgba(13, 20, 26, .45);
	}

	.p-services__sub .c-card:hover {
		background: var(--bg);
	}

	.p-flow__item:hover .p-flow__num {
		color: var(--blue);
	}

	.c-tel__num:hover {
		color: var(--blue);
	}

	.c-tel__panel--cop .c-tel__num:hover {
		color: var(--cop);
	}

	.p-initiative__tile:hover {
		border-color: #3c5563;
		transform: translateY(-3px);
	}

	.p-band__path:hover {
		background: rgba(255, 255, 255, .18);
	}

	.p-timeline__item:hover .p-timeline__pin {
		transform: scale(1.08);
	}

	.p-rwork__card:hover {
		transform: translateY(-5px);
		box-shadow: 0 22px 40px -28px rgba(13, 20, 26, .45);
	}

	.p-rwork__card:hover .c-icbox {
		transform: rotate(-6deg) scale(1.06);
	}

	.p-who__cell:hover {
		background: var(--cop-l);
	}

	.p-who__cell:hover .c-icbox {
		transform: scale(1.08);
	}

	.p-tree__card:hover {
		transform: translateY(-6px);
		box-shadow: 0 24px 44px -28px rgba(139, 62, 27, .5);
	}

	.p-tree__card:hover .c-icbox {
		transform: rotate(-6deg) scale(1.06);
	}

	.p-training__cell:hover {
		background: var(--cop-l);
	}

	.p-life__scatter .c-photo:hover {
		transform: translateY(-6px) rotate(-1deg);
	}

	.p-tech__tile:hover {
		border-color: #3c5563;
		transform: translateY(-4px);
	}

	.p-rfaq__item:hover svg {
		transform: translateX(4px);
	}

	.p-doors__client:hover::before,
	.p-doors__recruit:hover::before { transform: scaleX(1); }

	.p-profile__cell:hover { background: var(--blue-l); }

	.p-choice__card:hover {
		transform: translateY(-6px);
		box-shadow: 0 28px 50px -30px rgba(13, 20, 26, .42);
	}

	.p-choice__card--a:hover { border-color: var(--blue-m); }

	.p-choice__card--b:hover { border-color: var(--cop-m); }

	.p-choice__card--c:hover { border-color: var(--grn-m); }

	.c-btn--grn:hover { box-shadow: 0 14px 28px -14px rgba(61, 107, 87, .95); }

	.p-next__card:hover {
		transform: translateY(-4px);
		border-color: var(--cop-m);
		box-shadow: 0 22px 40px -28px rgba(139, 62, 27, .4);
	}

	.p-next__card:hover .p-next__go svg { transform: translateX(4px); }

	.c-tabs button:hover {
		border-color: var(--cop-m);
		transform: translateY(-2px);
	}

	.c-crumb a:hover { transform: translateX(-3px); }

	.c-anchor a:hover { color: var(--cop); }

	.c-anchor a:hover::after { transform: scaleX(1); }

	.p-roles span:hover {
		border-color: var(--cop);
		color: var(--cop-d);
		transform: translateY(-2px);
	}

	.c-acc__q:hover { color: var(--cop); }
}

/* ---------------------------------------------------------------
   19. アンカー帯の固定位置
   769〜1360px では、ページを1360px幅に固定して横スクロールさせる都合上
   .l-header の固定を切っている（横スクロールで sticky を使うと
   ヘッダーが横方向に取り残されるため）。
   ところがアンカー帯は top:88px（＝ヘッダーの高さ）のままだったので、
   居ないヘッダーの分だけ帯が下に浮き、画面上端に88pxの空白ができて
   そこを本文が素通りしていた。ヘッダーが無い幅では帯を上端に付ける。

   なお .c-anchor の基本定義はこのファイルの後半にあるため、
   上のメディアクエリ内に書くと後勝ちで負ける。ここに置く必要がある。
--------------------------------------------------------------- */
@media screen and (max-width: 1360px) and (min-width: 769px) {
	.c-anchor { top: 0; }
}

/* ---------------------------------------------------------------
   20. スマホの余白と視線誘導
   375pxで実測したところ、セクション境界の空白帯が15箇所で
   161〜204px（812px画面の20〜25%）あった。原因は、SP用の
   padding 上書きの対象セレクタから .l-section--r / .p-entry /
   .p-band / .p-initiative / .p-tech が漏れていて、PC値のまま
   表示されていたこと。境界の空白は96〜112pxを上限とする。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* --- セクションの上下余白（汎用 → 個別の順に置く） --------------------- */
	.l-section,
	.l-section--sm,
	.p-flow, .p-faq, .p-contact, .p-numbers, .p-req, .p-rfaq { padding-block: 44px; }
	.l-section--r  { padding-block: 48px; }
	.p-initiative,
	.p-tech        { padding-block: 52px; }
	.p-entry       { padding-block: 56px; }
	.p-band        { padding-block: 60px; }

	/* --- 見出しから本文までの距離を1つに揃える（実測24〜56pxとばらついていた） --- */
	.c-sechead { margin-bottom: 32px; }
	.p-salary__head { margin-bottom: 32px; }

	/* --- 1〜2語のカードを1列で積んでいた。横に290px空いていたので2列にする --- */
	.p-numbers__grid,
	.p-who__grid,
	.p-training__grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	/* 2列にすると1セルが約157pxになる。元の余白とアイコンのままだと
	   文字に使える幅が3em ほどしか残らず「病院・／施設」と割れるので、
	   横方向だけ詰めてアイコンを一回り小さくする。 */
	.p-who__cell {
		padding: 14px 12px;
		gap: 9px;
	}
	.p-who__cell b { font-size: 14.5px; }
	.p-who__cell .c-icbox { width: 32px; height: 32px; flex: none; }
	.p-who__cell .c-icbox .c-ic { width: 16px; height: 16px; }
	.p-numbers__cell { padding: 18px 14px 20px; }
	.p-numbers__cell p { font-size: 12px; }
	.p-training__grid li { padding-inline: 14px; }

	/* --- 採用トップのヒーロー：写真240pxに対して箱が320pxで、
	       下に80pxの空箱ができていた。中身に合わせる --- */
	.p-rhero__visual { height: auto; }
	.p-rhero__inner  { padding-block: 36px 40px; }
}

/* 代表名。円形マスクの中に置くと円に切られて2行目が読めなくなるため、
   figure の外に出して写真の下に置く。 */
.p-rhero__name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	margin-top: 18px;
	text-align: center;
}
.p-rhero__name b { font-family: var(--ff-dp); font-weight: 700; font-size: 16px; color: var(--ink); }
.p-rhero__name span { font-size: 11px; letter-spacing: .08em; color: var(--mut); }

/* アンカーで飛んだ先の見出しが、固定ヘッダー＋固定バーの下に隠れないように。
   実測で26箇所中20箇所が隠れていた（最悪48px）。 */
section[id] { scroll-margin-top: 148px; }
@media screen and (max-width: 768px) {
	section[id] { scroll-margin-top: 112px; }
}

/* ---------------------------------------------------------------
   21. スマホの追従CTA
   採用下層3ページは、最初の応募導線が y=7,690〜10,932（ページ深度
   88〜92％、9.5〜13.5画面ぶんスクロールした先）にしか無かった。
   ヘッダーのCTAもSPではラベルが消えて46×44pxのアイコンだけになる。
   画面下に常時1本置いて、どこからでも辿れるようにする。
--------------------------------------------------------------- */
.c-spcta { display: none; }

@media screen and (max-width: 768px) {
	.c-spcta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: 122px 1fr;
		gap: 8px;
		padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 24px -18px rgba(13, 20, 26, .5);
	}
	.c-spcta a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-height: 46px;
		border-radius: 2px;
		font-family: var(--ff-dp);
		font-weight: 700;
		font-size: 13.5px;
		letter-spacing: .02em;
	}
	.c-spcta__tel {
		color: var(--cop-d);
		border: 1px solid var(--cop-m);
		background: var(--w);
	}
	.c-spcta__tel svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
	.c-spcta__btn {
		color: var(--w);
		background: var(--cop);
	}
	/* バーの高さぶん、ページ末尾に余白を足して最後の行が隠れないようにする */
	body { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------
   22. お客様向けFAQをアコーディオンに
   答えを開いたままにしていたため、4問で縦を使い切っていた。
   折りたたんで9問に増やす。採用側と同じ c-acc を使い、
   アクセント色だけ客側の青に差し替える。
--------------------------------------------------------------- */
.c-acc--client { border-top-color: var(--line); }
.c-acc--client .c-acc__mark { color: var(--blue); }
.c-acc--client .c-acc__ic::before,
.c-acc--client .c-acc__ic::after { background: var(--blue); }
.c-acc--client .c-acc__q:hover { color: var(--blue); }
.c-acc--client .c-acc__a > span { color: var(--blue-m); }

/* 見出しが左、質問が右の2カラム。見出し側は上に固定して読ませる */
@media screen and (min-width: 769px) {
	.p-faq__inner > div:first-child { position: sticky; top: 120px; align-self: start; }
}

/* ---------------------------------------------------------------
   23. キャリアの枝分かれ図（トップの採用帯）
   4つの行き先を横一列のセルで並べていたが、それだと
   「4つの選択肢がある」ことしか伝わらず、
   「入社 → 基礎 → そこから分かれる」という順序が読めなかった。
   幹と枝を線で描いて、時間の流れが分かるようにする。
--------------------------------------------------------------- */
.p-tree2 {
	margin-top: 30px;
	--line: rgba(255, 255, 255, .34);
}

/* 幹（入社 → 基礎）。下に伸びる縦線でつなぐ */
.p-tree2__root,
.p-tree2__base {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 16px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 2px;
}
.p-tree2__root b,
.p-tree2__base b { font-family: var(--ff-dp); font-weight: 700; font-size: 14px; color: var(--w); }
.p-tree2__root span,
.p-tree2__base span { font-size: 11.5px; color: rgba(255, 255, 255, .72); }

/* 縦の接続線 */
.p-tree2__root::after,
.p-tree2__base::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 100%;
	width: 1px;
	height: 18px;
	background: var(--line);
}
.p-tree2__base { margin-top: 18px; }

.p-tree2__fork {
	margin-top: 18px;
	font-size: 11.5px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .72);
}

/* 枝。上辺の横線と、各枝へ降りる縦線を引く */
.p-tree2__paths {
	position: relative;
	margin-top: 26px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .18);
}
.p-tree2__paths::before {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	top: -14px;
	height: 1px;
	background: var(--line);
}
.p-tree2__path {
	position: relative;
	background: rgba(255, 255, 255, .08);
	padding: 15px 14px 16px;
	transition: background-color .4s var(--e-out);
}
.p-tree2__path::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -14px;
	width: 1px;
	height: 14px;
	background: var(--line);
}
.p-tree2__path b {
	display: block;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--w);
}
.p-tree2__path span {
	display: block;
	margin-top: 7px;
	font-size: 11.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .74);
}

@media (hover: hover) {
	.p-tree2__path:hover { background: rgba(255, 255, 255, .18); }
}

@media screen and (max-width: 768px) {
	.p-tree2 { margin-top: 24px; }
	.p-tree2__root, .p-tree2__base { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 14px; }
	.p-tree2__root::after, .p-tree2__base::after { left: 22px; }
	/* 4列だと1セル約80pxで文字が縦に割れるため2列にする */
	.p-tree2__paths { grid-template-columns: 1fr 1fr; margin-top: 22px; }
	.p-tree2__paths::before { left: 25%; right: 25%; top: -12px; }
	.p-tree2__path::before { height: 12px; top: -12px; }
	/* 2列にすると下段の枝は横線から離れるので、縦線は上段だけに出す */
	.p-tree2__path:nth-child(n+3)::before { display: none; }
	.p-tree2__path { padding: 13px 12px 14px; }
}

/* 本社代表番号は表示のみ。リンクではないので、押せそうな見た目にしない */
.l-footer__tel--flat { cursor: default; }
.l-footer__tel--flat:hover { color: inherit; }

/* ---------------------------------------------------------------
   24. 「この3つだけが正解ではありません」の見せ方
   9個を並べて4/4/1で折り返していたため、最後の1個が余って
   収まりが悪く、しかも「9個で全部」に見えていた。
   本文は「これだけではない」と言っているので、見た目もそう作る。
   ・2列を逆方向へゆっくり流し、両端をぼかして枠の外へ続かせる
   ・一つひとつを吹き出しにして、いろんな人が言っているように見せる
     （顔写真は使わない。実在しない社員を作ることになるため、
       声の違いは吹き出しの向き・濃さ・高さのばらつきだけで表す）
--------------------------------------------------------------- */
.p-other__flow {
	margin: 30px -44px 34px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.p-other__row {
	display: flex;
	flex: none;
	align-items: center;
	gap: 14px;
	width: max-content;
	padding-block: 10px;
	will-change: transform;
}
.p-other__row--a { animation: otherflow-a 46s linear infinite; }
.p-other__row--b { animation: otherflow-b 54s linear infinite; }

/* 同じ並びを2回置いてあるので、-50% で継ぎ目なく循環する */
@keyframes otherflow-a { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes otherflow-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --- 吹き出し本体 --- */
.p-other__row span {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 11px 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-2);
	white-space: nowrap;
	box-shadow: 0 3px 10px -7px rgba(13, 20, 26, .3);
}

/* 尻尾。上段は下向き、下段は上向きにして、
   画面の上下それぞれから声が来ているように見せる */
.p-other__row span::before,
.p-other__row span::after {
	content: "";
	position: absolute;
	left: 26px;
	width: 0;
	height: 0;
	border-inline: 7px solid transparent;
}
.p-other__row--a span::before { top: 100%; border-top: 8px solid var(--line); }
.p-other__row--a span::after  { top: calc(100% - 1px); border-top: 8px solid var(--w); }
.p-other__row--b span::before { bottom: 100%; border-bottom: 8px solid var(--line); }
.p-other__row--b span::after  { bottom: calc(100% - 1px); border-bottom: 8px solid var(--w); }

/* --- 声の差を出す --- */
/* 高さを少しずらす。一直線に並ぶと機械的に見える */
.p-other__row span:nth-child(3n)   { transform: translateY(-6px); }
.p-other__row span:nth-child(4n+2) { transform: translateY(5px); }

/* 尻尾の位置もずらして、同じ人が喋っているように見えないようにする */
.p-other__row span:nth-child(2n)::before,
.p-other__row span:nth-child(2n)::after { left: auto; right: 26px; }

/* 何人かは強めの声にする（銅色の面） */
.p-other__row span:nth-child(5n+3) {
	background: var(--cop-l);
	border-color: var(--cop-m);
	color: var(--cop-d);
	font-weight: 700;
}
.p-other__row--a span:nth-child(5n+3)::before { border-top-color: var(--cop-m); }
.p-other__row--a span:nth-child(5n+3)::after  { border-top-color: var(--cop-l); }
.p-other__row--b span:nth-child(5n+3)::before { border-bottom-color: var(--cop-m); }
.p-other__row--b span:nth-child(5n+3)::after  { border-bottom-color: var(--cop-l); }

/* 文字の大きさにも幅を持たせる */
.p-other__row span:nth-child(7n+1) { font-size: 14.5px; }
.p-other__row span:nth-child(6n+4) { font-size: 12.5px; }

/* 動きが苦手な人には流さない */
@media (prefers-reduced-motion: reduce) {
	.p-other__row { animation: none; }
}
@media (hover: hover) {
	.p-other__flow:hover .p-other__row { animation-play-state: paused; }
}

@media screen and (max-width: 768px) {
	.p-other__flow { margin-inline: -20px; gap: 14px; }
	.p-other__row { gap: 11px; }
	.p-other__row span { padding: 9px 14px; font-size: 12.5px; border-radius: 12px; }
	.p-other__row span:nth-child(7n+1) { font-size: 13.5px; }
	.p-other__row span:nth-child(6n+4) { font-size: 12px; }
	.p-other__row span::before,
	.p-other__row span::after { left: 18px; border-inline-width: 6px; }
	.p-other__row span:nth-child(2n)::before,
	.p-other__row span:nth-child(2n)::after { right: 18px; }
}

/* フッターのロゴは銀の実物版。46pxだと金属の階調が潰れるので一回り大きくする */
.l-footer__mark { width: 58px; }
@media screen and (max-width: 768px) {
	.l-footer__mark { width: 50px; }
}

/* ---------------------------------------------------------------
   25. スマホのメニュー（ドロワー）
   スマホではヘッダーのナビが非表示になっていて、電話と相談の
   アイコン2つしか無かった。他のページへ移動する手段が
   フッターまでスクロールする以外に存在しなかったので、
   ヘッダーから開けるメニューを足す。
--------------------------------------------------------------- */
.l-header__menu { display: none; }

@media screen and (max-width: 768px) {
	.l-header__menu {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 46px;
		min-height: 44px;
		margin-left: auto;
		margin-right: 8px;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.l-header__menu__bars { display: block; width: 20px; }
	.l-header__menu__bars i {
		display: block;
		height: 1.5px;
		background: var(--ink);
		border-radius: 1px;
		transition: transform .35s var(--e-out), opacity .25s var(--e-out);
	}
	.l-header__menu__bars i + i { margin-top: 5px; }
	.l-header__menu__txt { font-size: 9px; letter-spacing: .08em; color: var(--mut); }

	/* 開いているあいだは×印にする */
	.l-header__menu[aria-expanded="true"] .l-header__menu__bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
	.l-header__menu[aria-expanded="true"] .l-header__menu__bars i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
}

/* --- ドロワー本体 --- */
.l-drawer {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(13, 20, 26, .38);
	opacity: 0;
	transition: opacity .32s var(--e-out);
}
.l-drawer.is-open { opacity: 1; }

.l-drawer__sheet {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	max-height: 100%;
	overflow-y: auto;
	padding: 74px 20px calc(24px + env(safe-area-inset-bottom));
	background: var(--w);
	transform: translateY(-14px);
	opacity: 0;
	transition: transform .38s var(--e-out), opacity .3s var(--e-out);
}
.l-drawer.is-open .l-drawer__sheet { transform: none; opacity: 1; }

.l-drawer__links { display: grid; margin-top: 12px; }
.l-drawer__links a {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 4px 2px;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
}
.l-drawer__links a.is-current { color: var(--cop); }
.l-drawer__links--sub a { font-size: 14.5px; font-weight: 500; color: var(--ink-2); min-height: 46px; }
.l-drawer__sub { margin-top: 26px; }

.l-drawer__foot { margin-top: 24px; display: grid; gap: 12px; }
.l-drawer__foot .c-btn { width: 100%; }
.l-drawer__tel {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 2px;
}
.l-drawer__tel svg { stroke: var(--cop); fill: none; stroke-width: 1.8; flex: none; }
.l-drawer__tel b { display: block; font-family: var(--ff-lt); font-weight: 700; font-size: 18px; color: var(--ink); }
.l-drawer__tel i { display: block; font-style: normal; font-size: 11px; color: var(--mut); }

@media (prefers-reduced-motion: reduce) {
	.l-drawer, .l-drawer__sheet { transition: none; }
}

/* ドロワーを開いている間は、ヘッダーをその上に出す。
   でないと閉じるボタン（ヘッダー内のメニューボタン）が
   ドロワーの下に隠れて押せなくなる。 */
.is-drawer-open .l-header { z-index: 80; }
/* 背景を白くしてボタンを確実に見せる */
@media screen and (max-width: 768px) {
	.is-drawer-open .l-header { background: var(--w); }
	/* ドロワーの中身はヘッダーの下から始める */
	.l-drawer__sheet { padding-top: 78px; }
}

/* ---------------------------------------------------------------
   26. スマホのヘッダーは、押したら何が起きるか分かる形にする
   アイコンだけを3つ並べていたため、初めて見た人には
   受話器も吹き出しも「押すと何になるのか」が分からなかった。
   小さくてもラベルを出す。アイコンより言葉のほうが確実に伝わる。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.l-header__inner { gap: 6px; }
	.l-header__doors { gap: 4px; }

	/* 3つのボタンを同じ形（アイコンの下に文字）に揃える */
	.l-header__door .c-btn {
		flex-direction: column;
		gap: 3px;
		width: 54px;
		min-height: 46px;
		padding: 6px 2px;
		border-radius: 3px;
	}
	.l-header__door .c-btn span {
		display: block;              /* 隠していたラベルを出す */
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: .02em;
		line-height: 1;
		white-space: nowrap;
	}
	.l-header__door .c-btn__ic { width: 17px; height: 17px; }
	/* 開いた時に出る「閉じる」も同じ大きさで収まるようにする */
	.l-header__door .c-tel__trigger span { font-size: 9.5px; }

	.l-header__menu { width: 54px; margin-right: 2px; }
	.l-header__menu__txt { font-size: 9.5px; font-weight: 700; color: var(--ink-2); }

	/* ロゴは英字を落として幅を空ける。日本語だけで社名は伝わる */
	.l-header__wordmark i { display: none; }
	.l-header__wordmark b { font-size: 16px; }
	.l-header__mark { width: 30px; }
}

/* 幅の狭い端末では社名を出さず、シンボルだけにして3つのボタンを守る */
@media screen and (max-width: 374px) {
	.l-header__wordmark { display: none; }
}

/* ラベルはPCとスマホで長さを変える。スマホは54px幅に収まる短い語にする */
.l-header__lb--sp { display: none; }
@media screen and (max-width: 768px) {
	.l-header__door .c-btn .l-header__lb { display: none; }
	.l-header__door .c-btn .l-header__lb--sp { display: block; }
}

/* ボタンが3つ並ぶお客様ページでは、幅を詰めて社名の場所を確保する */
@media screen and (max-width: 768px) {
	.l-header__wordmark b { white-space: nowrap; }
}
@media screen and (max-width: 420px) {
	.l-header__door .c-btn { width: 48px; }
	.l-header__menu { width: 46px; }
	.l-header__wordmark b { font-size: 15px; }
}

/* ---------------------------------------------------------------
   27. 代表紹介（折りたたみ）
   顔と名前と職人歴だけを常に出しておき、
   考え方と休日は開いた人にだけ見せる。
   採用ページの入口で長い文章を読ませない。
--------------------------------------------------------------- */
.p-ceo {
	background: var(--w);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 26px 30px;
}

.p-ceo__head {
	display: flex;
	align-items: center;
	gap: 20px;
}
.p-ceo__face { width: 92px; height: 92px; flex: none; padding: 6px; }
.p-ceo__id { flex: 1 1 auto; min-width: 0; }

.p-ceo__name { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.p-ceo__name b { font-family: var(--ff-dp); font-weight: 700; font-size: 24px; color: var(--ink); }
.p-ceo__name span { font-size: 11px; letter-spacing: .08em; color: var(--mut); }

.p-ceo__yrs { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.p-ceo__yrs b { font-family: var(--ff-lt); font-weight: 700; font-size: 21px; color: var(--cop); margin-inline: 3px; }

/* 開閉ボタン */
.p-ceo__toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 18px;
	background: none;
	border: 1px solid var(--cop-m);
	border-radius: 2px;
	color: var(--cop-d);
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	transition: background-color .35s var(--e-out);
}
.p-ceo__toggle__ic { position: relative; width: 12px; height: 12px; flex: none; }
.p-ceo__toggle__ic::before,
.p-ceo__toggle__ic::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform .38s var(--e-out);
}
.p-ceo__toggle__ic::before { left: 0; right: 0; top: 5px; height: 2px; }
.p-ceo__toggle__ic::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.p-ceo__toggle[aria-expanded="true"] .p-ceo__toggle__ic::after { transform: scaleY(0); }

/* 中身。高さを直接動かさず 0fr → 1fr にする */
.p-ceo__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .45s var(--e-out);
}
.p-ceo__panel.is-open { grid-template-rows: 1fr; }
.p-ceo__inner { overflow: hidden; }

.p-ceo__body { padding-top: 26px; margin-top: 24px; border-top: 1px solid var(--line); }
.p-ceo__blk + .p-ceo__blk { margin-top: 26px; }
.p-ceo__h {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	margin-bottom: 10px;
	text-wrap: pretty;
}
.p-ceo__blk p { font-size: 14.5px; line-height: 1.95; color: var(--ink-2); max-width: 44em; }
.p-ceo__blk p + p { margin-top: 8px; }
.p-ceo__blk p b { color: var(--ink); font-weight: 700; }

/* 趣味 */
.p-ceo__hobby {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 16px;
}
.p-ceo__hobby li { display: flex; flex-direction: column; gap: 9px; }
.p-ceo__hobby .c-photo { aspect-ratio: 1 / 1; border-radius: 6px; }
.p-ceo__hobby b {
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ink-2);
	text-align: center;
}

@media (hover: hover) {
	.p-ceo__toggle:hover { background: var(--cop-l); }
}
@media (prefers-reduced-motion: reduce) {
	.p-ceo__panel { transition: none; }
}

@media screen and (max-width: 768px) {
	.p-ceo { padding: 20px 18px; border-radius: 8px; }
	.p-ceo__head { flex-wrap: wrap; gap: 14px; }
	.p-ceo__face { width: 68px; height: 68px; padding: 5px; }
	.p-ceo__name b { font-size: 20px; }
	.p-ceo__yrs { font-size: 13px; }
	.p-ceo__yrs b { font-size: 18px; }
	.p-ceo__toggle { width: 100%; justify-content: center; }
	.p-ceo__body { padding-top: 20px; margin-top: 18px; }
	.p-ceo__h { font-size: 15.5px; }
	.p-ceo__blk p { font-size: 14px; }
	.p-ceo__hobby { grid-template-columns: 1fr 1fr; gap: 10px; }
	.p-ceo__hobby li:last-child { grid-column: span 2; }
	.p-ceo__hobby li:last-child .c-photo { aspect-ratio: 16 / 9; }
}

/* 代表紹介：閉じていても芯の一言だけは見せる。
   顔と肩書だけでは「開く理由」が生まれないため。 */
.p-ceo__lead {
	margin-top: 12px;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink);
	text-wrap: pretty;
}

/* 約束は箇条書きにして、何を言っているかを一目で拾えるようにする */
.p-ceo__promise { display: grid; gap: 16px; margin-top: 14px; }
.p-ceo__promise li {
	position: relative;
	padding-left: 22px;
	max-width: 44em;
}
.p-ceo__promise li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--cop);
	border-radius: 50%;
}
.p-ceo__promise b {
	display: block;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink);
}
.p-ceo__promise span {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--ink-2);
}

.u-sp { display: none; }

@media screen and (max-width: 768px) {
	.p-ceo__lead { font-size: 14.5px; margin-top: 10px; }
	.p-ceo__promise b { font-size: 14.5px; }
	.p-ceo__promise span { font-size: 13.5px; }
	.u-sp { display: inline; }
}

/* 代表紹介：読む場所をはっきりさせる。
   見出しが4つ横並びだと、どこから読めばいいか分からなくなるため、
   引用ブロックを1つだけ置いて視線の着地点を作る。 */
.p-ceo__quote {
	position: relative;
	margin: 26px 0;
	padding: 26px 30px 22px 54px;
	background: var(--cop-l);
	border-radius: 8px;
}
.p-ceo__quote::before {
	content: "\201C";
	position: absolute;
	left: 18px;
	top: 12px;
	font-family: var(--ff-lt);
	font-size: 52px;
	line-height: 1;
	color: var(--cop);
	opacity: .38;
}
.p-ceo__quote p {
	font-family: var(--ff-dp);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.95;
	color: var(--ink);
}
.p-ceo__quote p b { font-weight: 700; color: var(--cop-d); }
.p-ceo__quote cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--cop-d);
	opacity: .8;
}

@media screen and (max-width: 768px) {
	.p-ceo__quote { margin: 20px 0; padding: 20px 18px 18px 20px; }
	.p-ceo__quote::before { display: none; }
	.p-ceo__quote p { font-size: 14.5px; line-height: 1.9; }
	.p-ceo__quote p br { display: none; }
}

/* 休日の写真だけでは「趣味の紹介」で終わってしまうので、
   なぜそれを見せているのかを本人の言葉で締める。
   セクション全体の結びなので、少し大きく置く。 */
.p-ceo__msg {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	max-width: 46em;
}
.p-ceo__msg p { font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.p-ceo__msg p + p { margin-top: 10px; }
.p-ceo__msg b { color: var(--ink); font-weight: 700; }
.p-ceo__msg__last {
	margin-top: 14px !important;
	font-family: var(--ff-dp);
	font-weight: 500;
	font-size: 16.5px !important;
	line-height: 1.85 !important;
	color: var(--ink) !important;
}
.p-ceo__msg__last b { color: var(--cop-d); font-weight: 700; }

@media screen and (max-width: 768px) {
	.p-ceo__msg { margin-top: 18px; padding-top: 16px; }
	.p-ceo__msg p { font-size: 14px; }
	.p-ceo__msg__last { font-size: 15px !important; }
}

/* ---------------------------------------------------------------
   28. 代表紹介：写真は四角で大きく、左に置く
   丸の小さいアイコンだと「添え物」に見えて、誰の話なのかが弱かった。
   左に大きく据えて、名前・職人歴・芯の一言を右に並べる。
   スマホは横に並べると写真が小さくなるので、上に大きく置く。
--------------------------------------------------------------- */
.p-ceo { padding: 30px; }
/* stretch だと高さが文字量で決まってしまい、aspect-ratio が効かない */
.p-ceo__head { align-items: center; gap: 30px; }

.p-ceo__face {
	width: 320px;
	/* 旧定義の height:92px が残っていると高さが確定し、
	   aspect-ratio が効かなくなる。明示的に auto に戻す。 */
	height: auto;
	flex: none;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	padding: 0;
}
.p-ceo__face > img { border-radius: 8px; }

/* 写真が大きくなったぶん、右側も文字を大きくして釣り合わせる */
.p-ceo__id {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.p-ceo__name { margin-top: 12px; }
.p-ceo__name b { font-size: 34px; letter-spacing: -.01em; }
.p-ceo__name span { font-size: 12px; }
.p-ceo__yrs { margin-top: 10px; font-size: 15.5px; }
.p-ceo__yrs b { font-size: 26px; }
.p-ceo__lead { margin-top: 18px; font-size: 18px; line-height: 1.8; }
.p-ceo__toggle { align-self: center; }

@media screen and (max-width: 1100px) {
	.p-ceo__face { width: 250px; height: auto; }
	.p-ceo__name b { font-size: 28px; }
	.p-ceo__lead { font-size: 16px; }
}

@media screen and (max-width: 768px) {
	.p-ceo { padding: 0 0 20px; overflow: hidden; }
	.p-ceo__head { flex-direction: column; gap: 0; }
	/* 写真はカードの頭に幅いっぱいで置く */
	.p-ceo__face {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 0;
	}
	.p-ceo__face > img { border-radius: 0; }
	.p-ceo__id { padding: 18px 18px 0; }
	.p-ceo__name { margin-top: 8px; }
	.p-ceo__name b { font-size: 23px; }
	.p-ceo__yrs { font-size: 13.5px; margin-top: 8px; }
	.p-ceo__yrs b { font-size: 19px; }
	.p-ceo__lead { font-size: 15px; margin-top: 12px; }
	.p-ceo__toggle { width: calc(100% - 36px); margin: 18px 18px 0; align-self: auto; }
	.p-ceo__body { margin-inline: 18px; }
}

/* ---------------------------------------------------------------
   29. ヒーローの代表写真を押せるようにする
   丸写真をそのままボタンにしても、押せることに気づかれない。
   下に名前と「タップで読む」の札を出して、押せると分かる形にする。
--------------------------------------------------------------- */
.p-rhero__open {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: block;
}
.p-rhero__ph {
	display: block;
	width: 100%;
	height: 100%;
	border: 8px solid var(--w);
	outline: 1px solid var(--cop-m);
	transition: transform .5s var(--e-out), outline-color .4s var(--e-out);
}

.p-rhero__tag {
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	background: var(--w);
	border: 1px solid var(--cop-m);
	border-radius: 999px;
	box-shadow: 0 8px 24px -14px rgba(13, 20, 26, .45);
	white-space: nowrap;
	transition: transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.p-rhero__tag b { font-family: var(--ff-dp); font-weight: 700; font-size: 14px; color: var(--ink); }
.p-rhero__tag i {
	font-style: normal;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: var(--cop-d);
	padding-left: 9px;
	border-left: 1px solid var(--line);
}
.p-rhero__tag svg {
	stroke: var(--cop);
	fill: none;
	stroke-width: 2;
	/* 下の紹介へ降りることを示すので、矢印は下向きのまま */
	animation: bob 2.6s var(--e-io) 1.4s infinite;
}

@media (hover: hover) {
	.p-rhero__open:hover .p-rhero__ph { transform: scale(1.015); outline-color: var(--cop); }
	.p-rhero__open:hover .p-rhero__tag { transform: translateX(-50%) translateY(3px); box-shadow: 0 12px 28px -14px rgba(13, 20, 26, .5); }
}
@media (prefers-reduced-motion: reduce) {
	.p-rhero__tag svg { animation: none; }
}

@media screen and (max-width: 768px) {
	.p-rhero__ph { border-width: 6px; }
	.p-rhero__tag { bottom: -16px; padding: 7px 13px; gap: 7px; }
	.p-rhero__tag b { font-size: 12.5px; }
	.p-rhero__tag i { font-size: 9.5px; padding-left: 7px; }
	/* 札のぶん、下に余白を足す */
	.p-rhero__visual { padding-bottom: 22px; }
}

/* --- ヒーローの代表ボタン：3点の修正 ------------------------------------- */

/* ① 四角い枠が残っていた。
   .p-rhero__main の border / outline / padding は、中の丸い写真側で
   持たせているので、ボタン自身からは消す。 */
.p-rhero__open {
	border: 0;
	outline: 0;
	padding: 0;
	background: none;
	/* ② 札が衛星の丸写真の下に隠れていたので、手前に出す */
	z-index: 5;
}
.p-rhero__open:focus-visible { outline: 2px solid var(--cop); outline-offset: 6px; }
.p-rhero__tag { z-index: 6; }

/* ③ スマホでは札を出さない。
   すぐ下に代表紹介のセクションがあり、そちらに開くボタンが
   はっきり出ているため、ここで二重に見せる必要がない。
   写真自体は押せるままにしておく。 */
@media screen and (max-width: 768px) {
	.p-rhero__tag { display: none; }
	.p-rhero__visual { padding-bottom: 0; }
}

/* ---------------------------------------------------------------
   30. 代表の肩書まわりを名刺の体裁に
   会社名・事業内容・役職・氏名・読み。名刺と同じ順に並べ、
   細い罫で区切る。肩書が無いと「誰なのか」が伝わらないため。
--------------------------------------------------------------- */
.p-ceo__card {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

/* 会社名の行。ロゴを小さく添えて名刺の天面に見立てる */
.p-ceo__co {
	display: flex;
	align-items: center;
	gap: 10px;
}
.p-ceo__co__mark { width: 30px; height: auto; flex: none; }
.p-ceo__co b {
	display: block;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	color: var(--ink);
	line-height: 1.4;
}
.p-ceo__co i {
	display: block;
	font-style: normal;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--mut);
	margin-top: 2px;
}

/* 役職 */
.p-ceo__role {
	margin-top: 18px;
	font-size: 12.5px;
	letter-spacing: .18em;
	color: var(--cop-d);
}

.p-ceo__name { margin-top: 4px; align-items: baseline; }
.p-ceo__yrs { margin-top: 12px; }

.p-ceo__lead { margin-top: 18px; }

@media screen and (max-width: 768px) {
	.p-ceo__card { padding-bottom: 14px; }
	.p-ceo__co__mark { width: 26px; }
	.p-ceo__co b { font-size: 13.5px; }
	.p-ceo__co i { font-size: 10px; }
	.p-ceo__role { margin-top: 14px; font-size: 11.5px; }
	.p-ceo__yrs { margin-top: 10px; }
	.p-ceo__lead { margin-top: 14px; }
}

/* ---------------------------------------------------------------
   31. ヒーローの丸写真を下から上へ流す
   静止した装飾では目に留まらないので、泡のように
   ゆっくり昇らせる。速度と開始時刻をばらけさせて、
   同時に動いているように見せない。
   代表の丸だけは動かさず、周りをじんわり光らせて
   「押せる」ことに気づいてもらう。
--------------------------------------------------------------- */
@keyframes rhero-rise {
	0%   { transform: translateY(330%) scale(.94); opacity: 0; }
	14%  { opacity: 1; }
	86%  { opacity: 1; }
	100% { transform: translateY(-330%) scale(1.04); opacity: 0; }
}

/* 代表の丸のまわりが、ゆっくり息をするように光る */
@keyframes rhero-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(196, 106, 58, .30), 0 0 26px 6px rgba(196, 106, 58, .10); }
	50%      { box-shadow: 0 0 0 14px rgba(196, 106, 58, 0),  0 0 46px 14px rgba(196, 106, 58, .26); }
}

.p-rhero__sat {
	position: absolute;
	top: 50%;
	/* 代表の丸（z-index:5）より後ろを通す。
	   手前を横切ると衝突して見えるが、後ろなら奥行きになる。 */
	z-index: 1;
	border: 6px solid var(--w);
	outline: 1px solid var(--cop-m);
	padding: 8px;
	animation: rhero-rise var(--dur, 26s) linear var(--dly, 0s) infinite;
	will-change: transform, opacity;
}

/* 横位置と大きさ、速度をそれぞれ変える */
.p-rhero__sat--1 { right: 4px;   width: 132px; height: 132px; --dur: 27s; --dly: 0s; }
.p-rhero__sat--2 { right: 132px; width: 108px; height: 108px; --dur: 33s; --dly: -6s; }
.p-rhero__sat--3 { right: -36px; width: 158px; height: 158px; --dur: 24s; --dly: -13s; }
.p-rhero__sat--4 { right: 246px; width: 96px;  height: 96px;  --dur: 31s; --dly: -20s; }
.p-rhero__sat--5 { left: -32px;  width: 124px; height: 124px; --dur: 29s; --dly: -9s; }
.p-rhero__sat--6 { left: 62px;   width: 90px;  height: 90px;  --dur: 35s; --dly: -17s; }

/* 代表の丸は動かさない。周りだけ光らせる */
.p-rhero__ph {
	border-radius: 50%;
	animation: rhero-glow 3.6s var(--e-io) 1.2s infinite;
}
@media (hover: hover) {
	.p-rhero__open:hover .p-rhero__ph { animation-play-state: paused; }
}

/* 動きが苦手な人には流さず、静かに並べる */
@media (prefers-reduced-motion: reduce) {
	.p-rhero__sat { animation: none; transform: none; opacity: 1; }
	.p-rhero__sat--1 { top: 12%; }
	.p-rhero__sat--2 { top: 58%; }
	.p-rhero__sat--3 { top: 70%; }
	.p-rhero__sat--4 { top: 30%; }
	.p-rhero__sat--5 { top: 74%; }
	.p-rhero__sat--6 { top: 22%; }
	.p-rhero__ph { animation: none; }
}

/* スマホでは丸が重なって読めなくなるので出さない */
@media screen and (max-width: 768px) {
	.p-rhero__sat { display: none; }
}

/* ---------------------------------------------------------------
   32. ヒーローの装飾を、丸写真から斜めのラインへ
   丸を6つ浮かせると、代表の顔のまわりが落ち着かず、
   主役と脇役の差も出なかった。
   ロゴの葉の斜線、板金の折り目と同じ角度の細い線に置き換える。
   薄く、ゆっくり流すだけにして、視線は代表に集める。
--------------------------------------------------------------- */
.p-rhero__lines {
	position: absolute;
	inset: -20% -10%;
	pointer-events: none;
	z-index: 1;
	/* 太さと間隔を変えた2層を重ねて、等間隔の単調さを消す */
	background-image:
		repeating-linear-gradient(112deg,
			rgba(140, 62, 28, .10) 0 1px,
			transparent 1px 88px),
		repeating-linear-gradient(112deg,
			rgba(140, 62, 28, .055) 0 1px,
			transparent 1px 23px);
	/* 端は消して、線が唐突に切れないようにする */
	-webkit-mask-image: radial-gradient(120% 90% at 62% 42%, #000 22%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 62% 42%, #000 22%, transparent 78%);
	animation: rhero-lines 40s linear infinite;
}

/* 線が斜め方向へゆっくり流れる。1周ぶん動かすので継ぎ目は出ない */
@keyframes rhero-lines {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-88px, -218px, 0); }
}

/* 代表の丸は据え置き。まわりの光だけ残す */
.p-rhero__open { z-index: 5; }

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

@media screen and (max-width: 768px) {
	.p-rhero__lines {
		inset: -10% -20%;
		background-image:
			repeating-linear-gradient(112deg, rgba(140, 62, 28, .085) 0 1px, transparent 1px 62px),
			repeating-linear-gradient(112deg, rgba(140, 62, 28, .045) 0 1px, transparent 1px 17px);
	}
}

/* ---------------------------------------------------------------
   33. 「もう少し、見てみませんか。」に写真を添える
   文字だけのカードは、内容が良くても素通りされる。
   行き先が想像できる写真を1枚ずつ載せる。
   動く要素は増やさない（ページ内に流れる帯が既にあるため）。
--------------------------------------------------------------- */
.p-next__card { overflow: hidden; }

.p-next__ph {
	display: block;
	width: calc(100% + 40px);
	margin: -26px -20px 20px;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.p-next__ph > img { transition: transform .7s var(--e-out); }

/* アイコンは写真の上に少し乗せて、写真とカードをつなぐ */
.p-next__card .c-icbox { position: relative; margin-top: -46px; z-index: 2; border: 3px solid var(--w); }

@media (hover: hover) {
	.p-next__card:hover .p-next__ph > img { transform: scale(1.05); }
}

@media screen and (max-width: 768px) {
	.p-next__ph { width: calc(100% + 36px); margin: -22px -18px 16px; aspect-ratio: 2 / 1; }
	.p-next__card .c-icbox { margin-top: -40px; }
}

/* ---------------------------------------------------------------
   34. ヒーローを職場の写真の集合に
   見出しは「働き方を、未来に合わせる」。人物のポートレートより、
   実際の職場の空気が並んでいるほうが内容と合う。
   代表は下の紹介セクションに一本化した。
   浮かせず、格子に沿えて並べる。散らすと落ち着かないため。
--------------------------------------------------------------- */
.p-mosaic {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 92px;
	gap: 12px;
	width: 100%;
	max-width: 620px;
	margin-inline: auto;
}

.p-mosaic__i {
	border: 0;
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 18px 40px -26px rgba(13, 20, 26, .5);
}
.p-mosaic__i > img { transition: transform .8s var(--e-out); }

/* 大きい1枚を軸に、残りを回り込ませる。
   人（a・c・e）と施工（b・d・f）が対角で交互になるように置く。 */
.p-mosaic__i--a { grid-column: 1 / 5; grid-row: 1 / 4; }   /* 人・仲間 */
.p-mosaic__i--b { grid-column: 5 / 7; grid-row: 1 / 3; }   /* 施工・ラッキング */
.p-mosaic__i--c { grid-column: 5 / 7; grid-row: 3 / 5; }   /* 人・教える */
.p-mosaic__i--d { grid-column: 1 / 3; grid-row: 4 / 6; }   /* 施工・ダクト */
.p-mosaic__i--e { grid-column: 3 / 5; grid-row: 4 / 6; }   /* 人・休憩 */
.p-mosaic__i--f { grid-column: 5 / 7; grid-row: 5 / 7; }   /* 施工・手元 */

@media (hover: hover) {
	.p-mosaic__i:hover > img { transform: scale(1.06); }
}

@media screen and (max-width: 1100px) {
	.p-mosaic { grid-auto-rows: 76px; gap: 10px; }
}

@media screen and (max-width: 768px) {
	.p-mosaic {
		grid-auto-rows: 58px;
		gap: 8px;
		max-width: 100%;
	}
	.p-mosaic__i { border-radius: 7px; }
	/* 6枚だと1枚あたりが小さくなりすぎるので、手元は落として4枚にする */
	.p-mosaic__i--f { display: none; }
	.p-mosaic__i--d { grid-column: 1 / 3; grid-row: 4 / 6; }
	.p-mosaic__i--e { grid-column: 3 / 7; grid-row: 4 / 6; }
}

/* ---------------------------------------------------------------
   35. ヒーローの写真にゆっくりした浮きを与える
   静止していると「置いてあるだけ」に見える。
   ごく小さく上下させ、周期と振れ幅を1枚ずつ変えて、
   同時に動いているように見せない。
   transform ではなく translate を使う。
   出現アニメーション（clip-path / transform）と衝突させないため。
--------------------------------------------------------------- */
@keyframes mos-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 var(--amp, -8px); }
}

.p-mosaic__i {
	animation: mos-float var(--fdur, 9s) var(--e-io) var(--fdly, 0s) infinite;
}
.p-mosaic__i--a { --fdur: 11s;  --fdly: 0s;    --amp: -7px; }
.p-mosaic__i--b { --fdur: 8.5s; --fdly: -2.4s; --amp: -10px; }
.p-mosaic__i--c { --fdur: 12s;  --fdly: -5.1s; --amp: -6px; }
.p-mosaic__i--d { --fdur: 9.5s; --fdly: -1.2s; --amp: -9px; }
.p-mosaic__i--e { --fdur: 13s;  --fdly: -6.8s; --amp: -5px; }
.p-mosaic__i--f { --fdur: 10s;  --fdly: -3.6s; --amp: -11px; }

/* 影も一緒に動かすと、浮いているように見える */
.p-mosaic__i { transition: box-shadow .6s var(--e-out); }

@media (hover: hover) {
	.p-mosaic__i:hover {
		animation-play-state: paused;
		box-shadow: 0 26px 52px -24px rgba(13, 20, 26, .55);
	}
}

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

/* スマホは振れ幅を小さくする。画面が狭く、揺れが目立ちすぎるため */
@media screen and (max-width: 768px) {
	.p-mosaic__i--a { --amp: -4px; }
	.p-mosaic__i--b { --amp: -6px; }
	.p-mosaic__i--c { --amp: -4px; }
	.p-mosaic__i--d { --amp: -5px; }
	.p-mosaic__i--e { --amp: -3px; }
	.p-mosaic__i--f { --amp: -6px; }
}

/* ---------------------------------------------------------------
   36. ヒーローの写真を入れ替える
   1枚ずつ固定だと、2回目に見た人には同じ画面になる。
   1枠に3枚ずつ持たせ、ゆっくり入れ替える。
   枠ごとに周期と開始位置を変えて、同時に切り替わらないようにする。
   （同時だと画面全体が瞬いて落ち着かない）
--------------------------------------------------------------- */
.p-mosaic__i > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--p, 50% 50%);
	opacity: 0;
	animation: mos-cycle var(--cdur, 21s) linear var(--cdly, 0s) infinite;
}

/* 3枚を1/3ずつずらして回す。切り替わりは1.4秒かけて溶かす */
@keyframes mos-cycle {
	0%      { opacity: 1; }
	26.7%   { opacity: 1; }
	33.3%   { opacity: 0; }
	93.3%   { opacity: 0; }
	100%    { opacity: 1; }
}
.p-mosaic__i > img:nth-child(2) { animation-delay: calc(var(--cdly, 0s) - var(--cdur, 21s) / 3); }
.p-mosaic__i > img:nth-child(3) { animation-delay: calc(var(--cdly, 0s) - var(--cdur, 21s) / 3 * 2); }

/* 枠ごとに速さと開始をずらす。素数寄りの値にして周期が揃わないようにする */
.p-mosaic__i--a { --cdur: 24s; --cdly: 0s; }
.p-mosaic__i--b { --cdur: 19s; --cdly: -3s; }
.p-mosaic__i--c { --cdur: 27s; --cdly: -7s; }
.p-mosaic__i--d { --cdur: 21s; --cdly: -11s; }
.p-mosaic__i--e { --cdur: 30s; --cdly: -5s; }
.p-mosaic__i--f { --cdur: 23s; --cdly: -14s; }

@media (hover: hover) {
	/* 見ている枠は止める。切り替わると写真を追えないため */
	.p-mosaic__i:hover > img { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
	.p-mosaic__i > img { animation: none; opacity: 0; }
	.p-mosaic__i > img:first-child { opacity: 1; }
}

/* ---------------------------------------------------------------
   37. 写真の下端を、文字の最終行に合わせる
   写真の並びの高さが固定(700px)で、文字の量と無関係だったため
   下がはみ出し、上は余白なしで天井に貼り付いていた。
   写真の列を文字の列と同じ高さに伸ばし、上だけ少し空ける。
--------------------------------------------------------------- */
@media screen and (min-width: 769px) {
	/* 2列を同じ高さに揃える。高さは文字の列が決める */
	.p-rhero__inner {
		align-items: stretch;
		/* 700px のままだと行だけ伸びて写真の下端が文字より下に出る。
		   かといって 0 にすると文字の高さだけで決まり、
		   ヒーローが窮屈になる。間を取って下限を決め、
		   足りないぶんは上下の余白で稼ぐ。 */
		min-height: 0;
		padding-block: 64px 72px;
	}
	/* 文字は上下いっぱいに置き、最終行を写真の下端にそろえる */
	.p-rhero__body {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* これが無いと、バッジやボタンが横いっぱいに引き伸ばされる */
		align-items: flex-start;
	}

	.p-rhero__visual {
		height: auto;
		align-self: stretch;
		display: flex;
		/* 上だけ少し空ける。下は文字の最終行に合わせる */
		padding-top: 26px;
		padding-bottom: 0;
	}

	.p-mosaic {
		flex: 1 1 auto;
		max-width: none;
		margin-inline: 0;
		/* 行の高さを固定せず、与えられた高さを6行で分ける。
		   これで下端が文字の最終行にそろう。 */
		grid-auto-rows: unset;
		grid-template-rows: repeat(6, 1fr);
	}

	/* 左側3枚を大きく見せるため、列の配分を左に寄せる */
	.p-mosaic { grid-template-columns: repeat(7, 1fr); }
	.p-mosaic__i--a { grid-column: 1 / 6; grid-row: 1 / 4; }
	.p-mosaic__i--b { grid-column: 6 / 8; grid-row: 1 / 3; }
	.p-mosaic__i--c { grid-column: 6 / 8; grid-row: 3 / 5; }
	.p-mosaic__i--d { grid-column: 1 / 3; grid-row: 4 / 7; }
	.p-mosaic__i--e { grid-column: 3 / 6; grid-row: 4 / 7; }
	.p-mosaic__i--f { grid-column: 6 / 8; grid-row: 5 / 7; }
}

/* ---------------------------------------------------------------
   38. スマホは2段の帯にする
   スマホでモザイクを組むと1枚が小さくなりすぎ、
   何が写っているか分からなくなる。
   同じ大きさの写真を2段に並べ、上は右へ、下は左へ流す。
   逆方向にすることで、止まっている錯覚が起きない。
--------------------------------------------------------------- */
.p-mflow { display: none; }

@media screen and (max-width: 768px) {
	.p-mosaic { display: none; }

	/* 列がこの中身の最大幅まで広がらないよう、両方に下限を切る */
	.p-rhero__inner > * { min-width: 0; }

	.p-mflow {
		display: flex;
		flex-direction: column;
		gap: 10px;
		/* 画面の端いっぱいまで使う。
		   幅を明示しないと、中の帯の最大幅まで列が広がってしまう。 */
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
		overflow: hidden;
		/* 両端を薄くして、帯が続いていることを示す */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
	}

	.p-mflow__row {
		display: flex;
		flex: none;
		gap: 10px;
		width: max-content;
		will-change: transform;
	}
	/* 同じ並びを2回置いてあるので -50% で継ぎ目なく循環する */
	.p-mflow__row--a { animation: mflow-r 38s linear infinite; }
	.p-mflow__row--b { animation: mflow-l 44s linear infinite; }

	@keyframes mflow-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
	@keyframes mflow-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }

	.p-mflow__i {
		flex: none;
		display: block;
		width: 138px;
		height: 138px;
		border-radius: 8px;
		overflow: hidden;
		background: var(--bg-2);
		box-shadow: 0 10px 24px -18px rgba(13, 20, 26, .5);
	}
	.p-mflow__i > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--p, 50% 50%);
		display: block;
	}

	/* 帯のぶん、視覚エリアの高さ指定は外す */
	.p-rhero__visual { height: auto; padding-top: 4px; }
}

@media screen and (max-width: 380px) {
	.p-mflow__i { width: 118px; height: 118px; }
}

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

/* ---------------------------------------------------------------
   39. ドロワーの直し（スマホ）
   ・body を position:fixed にしていたため、iOS で閉じたあとに
     スクロール位置がずれ、ページ上部に空白が残っていた
   ・シートが画面の高さに満たないと、その下から背面が見えていた
--------------------------------------------------------------- */
/* 背面のスクロールは html 側で止める。位置はずれない */
.is-drawer-open,
.is-drawer-open body { overflow: hidden; }

/* シートを画面いっぱいに広げて、背面が見えないようにする */
.l-drawer__sheet {
	min-height: 100%;
	max-height: none;
}

/* ---------------------------------------------------------------
   40. アイコンのスプライトが場所を取らないようにする
   reset.css の svg { height: auto } が、スプライトの
   height="0" 属性を上書きしてしまう。
   Chrome は 0 と解釈するが、Safari は置換要素の既定値 150px を
   与えるため、iPhone だけページ上部に空白が出ていた。
   display:none は <use> の参照が壊れる環境があるので使わない。
--------------------------------------------------------------- */
.u-sprite {
	position: absolute;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

/* ---------------------------------------------------------------
   41. スマホでも改行位置を designer が決める
   これまで SP では .ln を inline にして <br> を無効化し、
   ブラウザ任せの折り返しにしていた。
   その結果「藤井／冷熱」のように社名が割れていた。
   <br> を行として効かせ、各行が375pxに収まる字送りに調整する。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.js-inview-lines .ln { display: block; overflow: hidden; }
	.js .js-inview-lines .js-inview-ln { display: block; }

	/* 1行が収まる大きさへ。見出しの迫力は保てる範囲で詰める */
	.p-rhero__ttl,
	.l-pagehead__ttl { font-size: 25px; line-height: 1.45; }

	h2.c-sechead__h--xl { font-size: 25px; }
	h2.c-sechead__h--lg { font-size: 24px; }
	h2.c-sechead__h--md { font-size: 23px; }
	h2.c-sechead__h--sm { font-size: 22px; }
	.c-sechead h2 { font-size: 23px; line-height: 1.5; }

	.p-about__ttl, .p-contact__ttl, .p-initiative__ttl,
	.p-tech__ttl, .p-training__ttl, .p-day__ttl,
	.p-band__ttl, .p-entry__ttl, .p-salary__ttl { font-size: 23px; line-height: 1.5; }
}

/* 代表名は節の見出し（h2）だが、見た目は名刺のままにする */
h2.p-ceo__name { margin-top: 4px; }

/* ---------------------------------------------------------------
   42. スマホの縦の長さを詰める
   実測でトップは13,817px（約17画面）。内訳を見ると
   カードの縦積みと、写真枠の高すぎが大半を占めていた。
   情報は削らず、並べ方と写真の高さで詰める。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* --- 事業内容：短いカード4枚は2列に（658px → 約340px） -------------- */
	.p-services__sub { grid-template-columns: 1fr 1fr; gap: 10px; }
	.p-services__sub .c-card { padding: 14px 13px; }
	.p-services__sub .c-card p { font-size: 12.5px; line-height: 1.75; }
	.p-services__sub .c-tag { font-size: 9.5px; }

	/* --- 主要3カードの写真を横長に。4:3だと縦を食いすぎる ------------- */
	.p-services__thumb { height: auto; aspect-ratio: 2 / 1; }

	/* --- 施工実績の写真も同様に詰める ---------------------------------- */
	.p-works__leadph { height: auto; aspect-ratio: 16 / 9; }
	.p-works__itemph { height: auto; aspect-ratio: 2 / 1; }

	/* --- 私たちについて：縦長写真は場所を取りすぎる ------------------- */
	.p-about__ph1 { width: 100%; height: auto; aspect-ratio: 4 / 3; }
	.p-about__visual { gap: 10px; }

	/* --- 対応の流れ：4項目の余白を詰める ------------------------------ */
	.p-flow__list { gap: 10px; }
	.p-flow__item { padding: 16px 16px 18px; }
}

/* ---------------------------------------------------------------
   43. 求人ページのスマホ圧縮（第1段：余白と写真）
   実測で recruit-work の1セクションが4,537px（5.6画面）。
   内訳は 3ブロック × 約1,450px。まず文章を削らずに詰める。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* --- 働き方3タイプ（recruit-work） -------------------------------- */
	.p-type__ph { height: auto; aspect-ratio: 2 / 1; }
	.p-type__head { gap: 14px; }
	.p-type__grid { gap: 12px; }
	.p-type__cell { padding: 15px 14px 16px; }
	.p-type__cell b { font-size: 14.5px; }
	.p-type__cell p { font-size: 13.5px; line-height: 1.8; }
	.p-type__note { padding: 15px 16px; font-size: 13.5px; line-height: 1.8; }
	.p-type + .p-type { margin-top: 40px; }

	/* --- 3つの働き方カード（recruit） ---------------------------------- */
	.p-choice__ph { height: auto; aspect-ratio: 2 / 1; }
	.p-choice__body { padding: 16px 15px 18px; }
	.p-choice__quote { font-size: 13.5px; line-height: 1.8; }
	.p-choice__list { gap: 8px; margin-top: 12px; }
	.p-choice__list li { font-size: 13px; line-height: 1.7; }
	.p-choice__foot { margin-top: 14px; }

	/* --- 1日の流れ（recruit-job）9項目で1,827px ----------------------- */
	.p-day__list { gap: 0; }
	.p-day__item { padding-block: 11px; }
	.p-day__item p { font-size: 13.5px; line-height: 1.75; }
	.p-day__t { font-size: 13px; }

	/* --- 最初にやること／道具など、カードの内側を詰める --------------- */
	.p-training__grid li,
	.p-tools__grid > div { padding: 14px 14px 15px; }
	.p-story__row { gap: 14px; }
	.p-story__row p { font-size: 14px; line-height: 1.85; }
}

/* ---------------------------------------------------------------
   44. 給与の図解をスマホ用に組み直す
   PCは「金額の棒が5本」と「段階の説明が5件」を別ブロックで縦に
   並べ、列で対応させている。SPだと2つの塊に分断され、
   どの棒がどの段階なのか読み取れなくなっていた。
   display:contents で両者の子を同じ格子に流し込み、
   order で「棒 → その説明」の順に交互に並べ替える。
   HTMLは触らないのでPCには影響しない。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	#salary .l-inner { display: grid; grid-template-columns: 1fr; }
	.p-salary__head { order: 0; }
	.p-chart, .p-salary__foot { display: contents; }

	/* .p-chart の子には SVG が2つ含まれるので nth-child だと数がずれる。
	   div だけを数える nth-of-type を使う。 */
	.p-chart__trend { display: none; }   /* PC用の推移線。SPでは意味を成さない */
	.p-chart__bar:nth-of-type(1) { order: 2; }
	.p-chart__bar:nth-of-type(2) { order: 4; }
	.p-chart__bar:nth-of-type(3) { order: 6; }
	.p-chart__bar:nth-of-type(4) { order: 8; }
	.p-chart__bar:nth-of-type(5) { order: 10; }

	.p-salary__foot > div:nth-of-type(1) { order: 3; }
	.p-salary__foot > div:nth-of-type(2) { order: 5; }
	.p-salary__foot > div:nth-of-type(3) { order: 7; }
	.p-salary__foot > div:nth-of-type(4) { order: 9; }
	.p-salary__foot > div:nth-of-type(5) { order: 11; }

	.p-salary__disc { order: 20; }
	.p-salary__axis { order: 21; }

	/* 棒とその説明をひと組に見せる。棒の上に段階名を出す */
	.p-chart__bar { margin-top: 18px; gap: 10px; }
	.p-salary__foot > div {
		margin-top: 6px;
		padding: 0 0 14px 110px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}
	.p-salary__foot > div p { font-size: 13px; line-height: 1.8; }
	.p-salary__role { font-size: 12px; letter-spacing: .04em; }
}

/* 数字カードは3枚。2列だと4マス目が空いて灰色の穴になるので、
   最後の1枚を横いっぱいに広げて埋める。 */
@media screen and (max-width: 768px) {
	.p-numbers__cell:last-child { grid-column: 1 / -1; }
	.p-numbers__cell:last-child .p-numbers__v { font-size: 30px; }
}

/* ---------------------------------------------------------------
   45. 写真の主役が切れないようにする（スマホ）
   実測で「枠の比率」と「写真の比率」が大きく違う箇所を検出。
   縦位置の写真を横長の枠に入れると、被写体が半分以上切れる。
   枠のほうを写真に合わせる。
--------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	/* 縦位置（3:4）の職人写真。4:3の横枠だと44%が切れていた */
	.p-about__ph1 { aspect-ratio: 1 / 1; }

	/* タブレットの写真は16:9。ほぼ正方形の枠だと左右が半分消える */
	.p-tech__ph,
	.p-initiative__ph { height: auto; aspect-ratio: 16 / 9; }

	/* 「もう少し、見てみませんか」のカード。
	   3枚の写真は 4:3 / 1:1 / 3:4 とばらばら。
	   枠を 4:3 にすると3枚とも切れが最小になる。 */
	.p-next__ph { aspect-ratio: 4 / 3; }

	/* 休日の写真。焼肉だけ2列ぶち抜きで16:9にしていたが、
	   元が正方形なので44%切れる。3:2に緩める */
	.p-ceo__hobby li:last-child .c-photo { aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------
   46. 箇条書きの中に <b> があると横に分かれる問題
   li を flex にしていたため、<b> と続きの地の文が別々の
   フレックス要素になり、間に gap の隙間が空いて分断されていた。
   チェック印を絶対配置にして、本文はインラインで流す。
--------------------------------------------------------------- */
.p-choice__list li {
	display: block;
	position: relative;
	padding-left: 25px;
}
.p-choice__list li svg {
	position: absolute;
	left: 0;
	top: 4px;
}
.p-choice__list li b { font-weight: 700; color: var(--ink); }

/* 寸法属性を入れた画像が、枠の比率で表示されるようにする。
   属性だけだと縦横比が固定され、object-fit の枠と食い違うため。 */
.c-photo--has > img,
.p-mosaic__i > img,
.p-mflow__i > img { width: 100%; height: 100%; }

/* ==========================================================================
   47. ページ遷移（スマホ）
   ------------------------------------------------------------------------
   ボタンを押してから次のページが出るまでを、ひとつづきの動きにする。
   View Transitions API を使う。対応していないブラウザでは何も起きず、
   従来どおり瞬時に切り替わるだけなので、動作が壊れることはない。

   考え方
     ・ヘッダーと追従CTAは動かさない。ここが据え置かれることで
       「別のサイトに飛んだ」ではなく「同じサイトの中を移った」と読める。
     ・演出はページ同士の関係で変える。ただし文法は共通にして、
       表情だけを変える。
         fwd    奥へ進む   … 次のページが下から手前に出る
         back   戻る       … 次のページが上から下りてくる。少し速い
         side   横へ動く   … 同じ階層。メニューの並び順の向きに滑る
         world  導線をまたぐ … ロゴと同じ角度の斜めのワイプで覆う
       world だけ長い。お客様の導線と採用の導線は意味が違うので、
       ここは「切り替わった」と分かってよい。
     ・transform と opacity と clip-path しか使わない。
       レイアウトを起こさないので、遅い端末でも落ちない。

   PC には一切かけない。@view-transition ごとメディアクエリの中に置き、
   さらに 769px 以上では演出を明示的に消してある（二重の保険）。
   ========================================================================== */
@media screen and (max-width: 768px) {

	@view-transition { navigation: auto; }

	/* 据え置くもの。名前を付けた要素はページの入れ替えから外れる。 */
	.l-header { view-transition-name: vt-head; }
	.c-spcta { view-transition-name: vt-cta; }

	/* 既定の plus-lighter は、明るい地の2ページが重なると白く飛ぶ。
	   下に旧ページ、上に新ページを素直に重ねる。 */
	::view-transition-image-pair(root) { isolation: auto; }

	::view-transition-old(root),
	::view-transition-new(root) {
		mix-blend-mode: normal;
		backface-visibility: hidden;
	}

	/* 対応ブラウザで data-vt が付かなかったときの保険。 */
	::view-transition-old(root) { animation: vt-hold .3s linear both; }
	::view-transition-new(root) { animation: vt-fade .3s var(--e-out) both; }

	/* --- 奥へ進む ------------------------------------------------------ */
	html[data-vt="fwd"]::view-transition-old(root) { animation: vt-recede .34s var(--e-io) both; }
	html[data-vt="fwd"]::view-transition-new(root) { animation: vt-rise .34s var(--e-out) both; }

	/* --- 戻る ---------------------------------------------------------- */
	/* 戻る操作は待たされ感が出やすいので、進むより短くする。 */
	html[data-vt="back"]::view-transition-old(root) { animation: vt-advance .3s var(--e-io) both; }
	html[data-vt="back"]::view-transition-new(root) { animation: vt-drop .3s var(--e-out) both; }

	/* --- 同じ階層を横へ ------------------------------------------------ */
	html[data-vt="side"]::view-transition-old(root) { animation: vt-slip-l .3s var(--e-io) both; }
	html[data-vt="side"]::view-transition-new(root) { animation: vt-come-r .3s var(--e-out) both; }
	html[data-vt="side-r"]::view-transition-old(root) { animation: vt-slip-r .3s var(--e-io) both; }
	html[data-vt="side-r"]::view-transition-new(root) { animation: vt-come-l .3s var(--e-out) both; }

	/* --- 導線をまたぐ -------------------------------------------------- */
	/* 斜めの面が下から上へ抜けて、次のページを置いていく。
	   保温材の上からラッキングを被せる手の動きと、ロゴの斜線に合わせた。 */
	html[data-vt="world"]::view-transition-old(root) { animation: vt-under .44s var(--e-io) both; }
	html[data-vt="world"]::view-transition-new(root) { animation: vt-clad .44s var(--e-out) both; }

	/* ヘッダーは面が通り過ぎる頃に表情を変える。
	   RECRUIT のバッジやメニューが切り替わるのが、ここで見える。 */
	html[data-vt="world"]::view-transition-old(vt-head) { animation: vt-fade-out .26s linear .16s both; }
	html[data-vt="world"]::view-transition-new(vt-head) { animation: vt-fade .26s linear .16s both; }

	@keyframes vt-hold { to { opacity: 1; } }
	@keyframes vt-fade { from { opacity: 0; } }
	@keyframes vt-fade-out { to { opacity: 0; } }

	@keyframes vt-rise {
		from { opacity: 0; transform: translate3d(0, 18px, 0); }
		60% { opacity: 1; }
		to { opacity: 1; transform: none; }
	}
	@keyframes vt-recede {
		to { opacity: .5; transform: scale(.985); }
	}
	@keyframes vt-drop {
		from { opacity: 0; transform: translate3d(0, -13px, 0); }
		60% { opacity: 1; }
		to { opacity: 1; transform: none; }
	}
	@keyframes vt-advance {
		to { opacity: .5; transform: scale(1.012); }
	}
	@keyframes vt-come-r {
		from { opacity: 0; transform: translate3d(22px, 0, 0); }
		62% { opacity: 1; }
		to { opacity: 1; transform: none; }
	}
	@keyframes vt-slip-l {
		to { opacity: .5; transform: translate3d(-14px, 0, 0); }
	}
	@keyframes vt-come-l {
		from { opacity: 0; transform: translate3d(-22px, 0, 0); }
		62% { opacity: 1; }
		to { opacity: 1; transform: none; }
	}
	@keyframes vt-slip-r {
		to { opacity: .5; transform: translate3d(14px, 0, 0); }
	}

	/* 斜めの辺は左が先に上がる。ロゴの斜線と同じ向き。 */
	@keyframes vt-clad {
		from { clip-path: polygon(0 124%, 100% 108%, 100% 100%, 0 100%); opacity: .55; }
		30% { opacity: 1; }
		to { clip-path: polygon(0 -8%, 100% -24%, 100% 100%, 0 100%); opacity: 1; }
	}
	@keyframes vt-under {
		to { transform: scale(.992); opacity: .82; }
	}

	/* 769px 以上で演出が漏れた場合に備えた打ち消し。 */
}

@media screen and (min-width: 769px) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
	::view-transition-old(root) { display: none !important; }
}

/* 動きを減らす設定では、演出そのものを行わない。 */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
	::view-transition-old(root) { display: none !important; }
}

/* --------------------------------------------------------------------------
   47-2. 押したことが分かる
   タップした瞬間に沈む。遷移演出が始まるまでの空白を埋める役目なので、
   時間は極端に短くする。指を離す前に戻り切っている必要がある。
   -------------------------------------------------------------------------- */
@media (hover: none) {

	.c-btn:active,
	.c-spcta__btn:active,
	.c-spcta__tel:active,
	.l-header__logo:active,
	.c-crumb a:active {
		transform: scale(.972);
		transition-duration: .08s;
	}

	.c-acc__q:active,
	.l-footer__nav a:active,
	.l-drawer__links a:active {
		opacity: .62;
		transition-duration: .08s;
	}
}

@media (prefers-reduced-motion: reduce) {

	.c-btn:active,
	.c-spcta__btn:active,
	.c-spcta__tel:active,
	.l-header__logo:active,
	.c-crumb a:active { transform: none; }
}

/* ==========================================================================
   48. お客様向けと採用の行き来
   ------------------------------------------------------------------------
   このサイトは「工事のご依頼」と「採用・求人」の2つの導線を持つ。
   ところが採用側からお客様側へ戻る手段が、ロゴ以外に無かった。
   ロゴは「トップへ」であって「別のサイトへ」とは読めない。

   PC ヘッダーの右端に、行き先の世界の色でボタンを置く。
   お客様側にいるときは銅（採用へ）、採用側にいるときは藍（お客様へ）。
   左右対称なので、どちらにいても同じ位置で反転する。

   スマホは 375px でヘッダーが既に満杯（右端359px）だったため、
   ヘッダーには入れず、直下に幅いっぱいの切り替え帯を置く。
   固定はしない。上に付けるとヘッダー61px＋帯48px＋アンカー帯51px で
   画面の2割が動かない領域になり、本文が読めなくなる。
   ========================================================================== */
.c-worlds { display: none; }

@media screen and (max-width: 768px) {

	/* ヘッダーの中の切り替えボタンは、帯と役割が重なるので出さない。
	   出すと index の右端が 359→411px になり、はみ出す。 */
	.l-header__door--switch { display: none; }

	.c-worlds {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-bottom: 1px solid var(--line);
		background: var(--w);
	}

	.c-worlds__i {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1px;
		padding: 9px 8px 10px;
		text-align: center;
		min-height: 48px;
	}

	.c-worlds__i b {
		font-family: var(--ff-dp);
		font-weight: 700;
		font-size: 13px;
		line-height: 1.2;
	}

	.c-worlds__i i {
		font-style: normal;
		font-size: 10px;
		line-height: 1.2;
		letter-spacing: .03em;
		opacity: .8;
	}

	/* 現在いる側。白地に色の下線で「ここに居る」を示す。 */
	.c-worlds__i.is-current { background: var(--w); }
	.c-worlds__i.is-current b { color: var(--ink); }
	.c-worlds__i.is-current i { color: var(--mut); }

	.c-worlds__i.is-current::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
	}

	.c-worlds__i--client.is-current::after { background: var(--blue); }
	.c-worlds__i--recruit.is-current::after { background: var(--cop); }

	/* 行ける側。行き先の色を敷いて、押せることを分からせる。 */
	.c-worlds__i--client:not(.is-current) { background: var(--blue-l); }
	.c-worlds__i--client:not(.is-current) b,
	.c-worlds__i--client:not(.is-current) i { color: var(--blue); }

	.c-worlds__i--recruit:not(.is-current) { background: var(--cop-l); }
	.c-worlds__i--recruit:not(.is-current) b,
	.c-worlds__i--recruit:not(.is-current) i { color: var(--cop-d); }

	.c-worlds__ar {
		position: absolute;
		right: 9px;
		top: 50%;
		width: 13px;
		height: 13px;
		margin-top: -6.5px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		opacity: .55;
	}

	/* 矢印はタブの外側を向く。左のタブは左へ、右のタブは右へ。
	   #i-arrow は右向きなので、左のタブだけ反転する。 */
	.c-worlds__i--client .c-worlds__ar { right: auto; left: 9px; transform: scaleX(-1); }
}

@media (hover: none) {
	.c-worlds__i:active { opacity: .72; transition-duration: .08s; }
}

/* ==========================================================================
   49. ヒーロー（トップページ最上部）
   ------------------------------------------------------------------------
   デザイン画をそのまま1枚の画像として敷く。
   箱を画像と同じ縦横比に固定し、画像をぴったり伸ばすので、
   画像の中のボタンは常に同じ％の位置にある。
   当たり判定も％で置いてあるため、幅が変わってもズレない。

   画像に描かれている文字は、同じ内容を .p-hero__txt にHTMLで持たせて
   目に見えない形で残してある。中身が画像と同一なので隠しテキストには
   当たらず、Googleと読み上げソフトはこれを読む。
   ========================================================================== */
.p-hero {
	position: relative;
	/* 画像は 1672x941（16:9）。そのまま敷くと1440px幅で高さ810pxになり、
	   ヘッダー89pxと合わせて画面がヒーローだけで埋まる。
	   上端を14.6%切って 2.215:1 の帯にする。
	   切った先にあるのは画像内のロゴ行で、サイトのヘッダーと重複していた。 */
	aspect-ratio: 1725 / 755;
	background: var(--w);
	overflow: hidden;
}

.p-hero__art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

/* 画像と同じ文言。目には出さないが、DOMには残す */
.p-hero__txt {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 画像に描かれたボタンの上に重ねる当たり判定 */
/* 上端を切ったぶん、画像内のボタンの位置も繰り上がる。
   1440pxで実測して 79.7〜87.5% に合わせた。 */
.p-hero__hit {
	position: absolute;
	top: 80.9%;
	height: 8.0%;
	border-radius: 3px;
}

.p-hero__hit span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.p-hero__hit--a { left: 8.1%; width: 17.1%; }
.p-hero__hit--b { left: 26.5%; width: 17.5%; }

/* スマホ用の画像は縦横比も配置も別物なので、当たり判定も別に持つ */
.p-hero__hit--sa,
.p-hero__hit--sb { display: none; }

/* 押した瞬間に沈む。画像の中のボタンなので、
   上に薄い墨を重ねて「押した」ことを返す。 */
.p-hero__hit {
	transition: background-color .16s var(--e-out), transform .16s var(--e-out);
}

.p-hero__hit:active {
	background: rgba(13, 20, 26, .16);
	transform: scale(.985);
	transition-duration: .06s;
}

.p-hero__hit:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

@media (hover: hover) {
	.p-hero__hit:hover { background: rgba(46, 76, 135, .10); }
}

/* --------------------------------------------------------------------------
   ヒーロー直下のリード帯
   「藤井冷熱は、名古屋市中川区で創業から約50年…」の一文を置く場所。
   この一文が「藤井冷熱」で検索したときにトップページが出るための要。
   -------------------------------------------------------------------------- */
.p-intro {
	background: var(--w);
	border-bottom: 1px solid var(--line-2);
}

.p-intro__inner {
	width: min(var(--page), 100%);
	margin-inline: auto;
	/* ヒーロー画像の中の見出しは、画像幅の5.44%の位置から始まる。
	   同じ割合にしておくと、どの画面幅でも左端が揃う。 */
	padding: clamp(36px, 4vw, 60px) 5.44%;
}

.p-intro__lead {
	position: relative;
	max-width: 44em;
	margin-top: 16px;
	padding-left: 22px;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 2.05;
	color: var(--ink-2);
	text-wrap: pretty;
}

/* 書き出しに藍の縦線を引き、ただ置いただけに見えないようにする */
.p-intro__lead::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	bottom: .35em;
	width: 2px;
	background: linear-gradient(180deg, var(--blue), var(--blue-m));
}

/* 社名だけ濃く。目が最初にここへ落ちる */
.p-intro__lead b {
	font-weight: 700;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   スマホ（768px 以下）
   重ねをやめて上下に積む。写真が上、文字が下。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* スマホは正方形の専用画像に差し替わる。縦横比と
	   ボタンの位置が変わるので、当たり判定も入れ替える。 */
	.p-hero { aspect-ratio: 1 / 1; }
	.p-hero__art { object-fit: fill; object-position: 50% 50%; }
	.p-hero__hit--a,
	.p-hero__hit--b { display: none; }

	.p-hero__hit--sa,
	.p-hero__hit--sb {
		display: block;
		left: 3.7%;
		width: 44.5%;
		border-radius: 4px;
	}

	/* 画像の中のボタンは375px幅で高さ28px。指の基準（44px）に届かないので、
	   見た目はそのままに、当たり判定だけ上下へ広げて隙間を埋める。 */
	.p-hero__hit--sa { top: 75.4%; height: 11.9%; }
	.p-hero__hit--sb { top: 87.3%; height: 11.7%; }

	.p-intro__inner { padding: 28px 20px 30px; }
	.p-intro__lead { font-size: 14px; line-height: 1.95; padding-left: 16px; margin-top: 12px; }
}

/* ==========================================================================
   50. 採用トップのヒーロー
   ------------------------------------------------------------------------
   見出しはデザイン画の中にあるので、画像を1枚敷くだけにする。
   箱を画像と同じ縦横比に固定してあるため、どの幅でも欠けない。
   PCとスマホで縦横比が違うので、picture で出し分ける。

   画像に描かれた見出しは、同じ文言を h1 として残してある
   （目には出さないが、Googleと読み上げソフトは読む）。
   本文とボタンは、画像の下から始める。
   ========================================================================== */
.p-rhero {
	position: relative;
	aspect-ratio: 1916 / 821;
	background: var(--wd);
	padding: 0;
	overflow: hidden;
}

.p-rhero__art {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.p-rhero__txt {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 画像の下の帯。本文とボタン */
.p-rlead {
	background: linear-gradient(180deg, var(--cop-l) 0%, var(--w) 78%);
	border-bottom: 1px solid var(--line);
}

.p-rlead__inner {
	padding-block: 44px 52px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.p-rlead__lead {
	max-width: 40em;
	font-size: 16px;
	line-height: 2;
	color: var(--ink-2);
}

.p-rlead__lead b { font-weight: 700; color: var(--ink); }

.p-rlead__note {
	max-width: 44em;
	font-size: 13px;
	line-height: 1.9;
	color: var(--mut);
}

@media screen and (max-width: 768px) {
	.p-rhero { aspect-ratio: 1 / 1; }

	.p-rlead__inner {
		padding: 24px 20px 32px;
		gap: 16px;
	}

	.p-rlead__lead { font-size: 14.5px; line-height: 1.95; }
	.p-rlead__note { font-size: 12px; }
	.p-rhero__cta { display: flex; flex-direction: column; width: 100%; gap: 10px; }
}

/* 採用トップ：横に流れる写真の帯。
   ヒーロー画像の直下に、区切りのアクセントとして置く。
   スマホだけ。PCは画像そのものが横長なので要らない。 */
.p-rband { display: none; }

@media screen and (max-width: 768px) {
	.p-rband {
		display: block;
		background: var(--cop-l);
	}

	/* 上は細いリボン。同じ厚みで2本挟むと、ヒーロー画像が
	   240px下がって最初の一目に主役が入らなくなる。 */
	.p-rband--top {
		padding-block: 8px;
		background: linear-gradient(180deg, var(--w), var(--cop-l));
	}

	.p-rband--top .p-mflow__i {
		width: 82px;
		height: 82px;
	}

	.p-rband--btm {
		padding-block: 10px 12px;
		background: linear-gradient(180deg, var(--cop-l), var(--cop-l));
	}
}

/* ==========================================================================
   51. トップの「対応する工事」一覧（リード文の直下）
   ------------------------------------------------------------------------
   保温の写真が最初に出るのが390px幅で y=2416px、3画面ぶん下だった。
   ヒーローは人物、その次はリード文で、どちらも工事の写真が無い。
   何をしている会社か分かるまでが遠すぎるので、リード文の直後に
   実際の施工写真を3枚置く。

   飾りではなく本文として置いている。
   ・alt に工事の名前を入れる
   ・#services への内部リンクにする
   したがって検索には不利にならず、むしろ効く。
   ========================================================================== */
.p-glance {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.6vw, 24px);
	margin-top: clamp(24px, 2.6vw, 38px);
	max-width: 860px;
}

.p-glance__i a {
	display: block;
	color: inherit;
}

.p-glance__ph {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--bg-2);
	border-radius: 2px;
}

.p-glance__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--e-out);
}

.p-glance__i b {
	display: block;
	margin-top: 10px;
	font-family: var(--ff-dp);
	font-weight: 700;
	font-size: clamp(13px, 1.05vw, 16px);
	line-height: 1.4;
	color: var(--ink);
}

.p-glance__i span {
	display: block;
	margin-top: 2px;
	font-size: clamp(11px, .8vw, 12.5px);
	line-height: 1.5;
	color: var(--mut);
}

@media (hover: hover) {
	.p-glance__i a:hover .p-glance__ph img { transform: scale(1.05); }
	.p-glance__i a:hover b { color: var(--blue); }
}

@media (hover: none) {
	.p-glance__i a:active { opacity: .72; }
}

@media screen and (max-width: 768px) {
	.p-glance {
		gap: 8px;
		margin-top: 20px;
	}

	.p-glance__i b { margin-top: 7px; font-size: 12.5px; }
	.p-glance__i span { font-size: 10.5px; }
}