/* リキッドレイアウト対応 */

/* インナー幅・左右余白（PCカンプ1440・コンテンツ幅1152／SP余白24の実測値）
   PCはremで持つ。html の font-size が 1440px 基準のリキッドなので、
   中身（rem指定）と枠が同じ比率で縮み、1440以外の幅でも左右の位置関係がカンプどおりに保たれる。
   pxで固定すると枠だけ縮まず、中央寄せの列と rem 指定の要素の左端がずれる */

:root {
	--inner-value: 1440;
	--inner: 72rem;
	--padding-pc: 1.5625rem;
	--padding-sp: 1.5rem; /* SPも同様。375px未満は html の font-size が縮むため px 固定だとここだけ縮まない */ /* 画面端まで抜ける要素の角丸の出し分け。インナー（600）より広い画面では端に接しないので角を戻す */
	--edge-gap: max(0px, (100vw - 37.5rem) / 2);
}

:root {
	--rem: 1rem / 16;
	--em: 1em / 16;
	--vw: 1440 * 100vw; /* PCカンプの幅に合わせる */
	--cqi: 1440 / 100cqi; /* コンテナ連動値用（calc(125 / var(--cqi)) で消費）。使う時は対象の親に container-type を張る。body には張らない（レイアウト包含で position:fixed の包含ブロックになるため） */
	--inner-percent: var(--inner-value) * 100%;
}

/* フォント */

:root {
	--base-font: "Noto Sans JP", sans-serif;
	--second-font: "Zen Kaku Gothic New", sans-serif;
	--en-font: "Montserrat", sans-serif; /* カンプの Avenir / Avenir Next は Apple 同梱フォントで Web 配信が無い。
     Mac / iOS ではそのまま出し、無い環境は字形が最も近い Nunito Sans（Google Fonts）に落とす
     （電話番号・社員のローマ字名・Instagram 見出し）。電話番号は Avenir Heavy（Avenir Next Heavy はひと回り太い）ので Avenir を先に置く */
	--avenir-font: "Avenir", "Avenir Next", "Nunito Sans", sans-serif;
	--num-font: "Merriweather", serif; /* 数値表示（採用ページのデータ等） */
	--serif-font: "Noto Serif JP", serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-heavy: 800; /* Avenir Heavy 相当（contact の電話番号） */
	--leading-trim: calc((1em - 1lh) / 2);
}

/* 色 */

:root {
	--white: #fff;
	--white-dim: #f2f2f2; /* 採用ページの見出し（カンプ 7:11600 実測） */
	--main: #003e53;
	--main-dark: #002332;
	--navy-deep: #002432; /* 採用エントリー帯（カンプ 7:11586 実測。--main-dark とは1段違う） */
	--accent: #009d85;
	--blue: #005d79;
	--light-blue: #a2d6f2;
	--cream: #fdead1;
	--bg-gray: #e3e7ec;
	--sky: #bae7ff;
	--sky-light: #ddf3ff;
	--pale-blue: #e5eff2; /* 採用ページのカード地 */
	--gray: #c3c3c3;
	--blue-mid: #1e6881; /* TOP取り組みの円（カンプ実測） */
	--gray-border: #939393;
	--gray-line: #d3d8de;
	--line-pale: #f1f3f5; /* 採用データの年齢構成表の区切り線（カンプ実測） */ /* お問い合わせフォーム専用（カンプが他ページと別系統の黒・赤を使う） */
	--black: #000; /* フォーム内の本文・同意文（カンプ 7:11916/11920/11929 実測） */
	--required: #f50202;
	--alert: #ff0202; /* 完了ページの注意書き（カンプ 7:12093 実測。--required とは1段違う） */
	--form-text: #0a0a0a;
	--form-lead: #00182e;
	--form-note: #555;
	--text: #515457;
}

/* ヘッダー高さ */

:root {
	--header-height: 78px;
	--header-height-sp: 64px;
}

/* z-index は必ずここで一元管理（直値禁止） */

:root {
	--z-index-loader: 1000;
	--z-index-header: 100;
	--z-index-drawer: 99;
	--z-index-seminar: 98; /* セクション内部の重ね順（背景の上に本文を出す用途。固定UIとは階層が別） */
	--z-index-base: 0;
	--z-index-raise: 1;
	--z-index-front: 2;
}

/* スクロールロック（ドロワー・ローダー用）
   --scrollbar は header.php の先頭で測ったスクロールバー幅（オーバーレイ型の環境では 0）。
   scrollbar-gutter は使わない: 予約した溝には fixed の要素でも描けず、ローダーの緑が
   画面の端まで届かないまま白く残る（Chrome のクラシックスクロールバー環境で再現）。
   代わりにロック中はスクロールバーを消し、消えた幅ぶんを body と固定ヘッダーの右に足して、
   ロック前後で中身が動かないようにする */

@property --scrollbar {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

/* 社員紹介のモーダルは JS の position:fixed 方式で背面を止める（スクロール位置を保つため）。
   ここで :modal[open] を掴むと二重に効いて開いた瞬間に先頭へ飛ぶ */

/* オープニングはここに含めない。overflow を切るとスクロールバーごと消え、
   ローダーが明ける瞬間に出戻って目立つ（色・太さ・有無が一度に変わる）。
   オープニング中のスクロールは toppage.js がジェスチャだけ止める */

:root:has(.is-scroll-lock) {
	overflow: hidden;
}

:root:has(.is-scroll-lock) body {
	padding-right: var(--scrollbar);
}

:root:has(.is-scroll-lock) .header {
	width: calc(100% - var(--scrollbar));
}

body {
	color: #515457;
	color: var(--text);
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-weight: 400;
	font-weight: var(--fw-regular);
	line-height: 1.5;
}

html {
	font-size: 16px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default padding */

ul,
ol {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core root defaults */

html {
	scroll-padding-top: 64px;
	scroll-padding-top: var(--header-height-sp);
}

/* Set core body defaults */

body {
	word-wrap: anywhere;
	display: flex;
	flex-direction: column;
	line-break: strict;
	line-height: 1.5;
	min-height: 100svh; /* 100vw 全幅要素(事業内容の marquee 等)が、 縦スクロールバー幅を含む分だけ横にはみ出して
     横スクロールバーが出るのを抑止 (Firefox/Windows の classic scrollbar で発生)。
     overflow:hidden と違い clip は scroll コンテナを作らないので position:sticky を壊さない。 */
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}

main {
	flex: 1;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul,
ol {
	list-style: none;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* picture*/

picture {
	display: block;
	height: 100%;
	width: 100%;
}

/* Blur images when they have no alt attribute */

img:not([alt]) {
	filter: blur(10px);
}

:where(dialog) {
	background-color: transparent;
	background-color: initial;
	border: medium none currentColor;
	border: initial;
	color: inherit; /* UAの inset:0 が残るため height:auto にすると全高に伸びる。中身なりに縮む指定にする */
	height: -moz-fit-content;
	height: fit-content;
	max-height: none;
	max-height: initial;
	max-width: none;
	max-width: initial;
	overflow: visible;
	overflow: initial;
	padding: 0;
	padding: initial;
	width: auto;
	width: initial;
}

:where(dialog:focus-visible) {
	outline: none;
}

/* フォームリセット */

input,
button,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

/* 見た目は .c-form-check__box で自前に描くが、display:none にすると
   フォーカスが当たらずキーボードで操作できなくなるため視覚的に隠すだけにする */

input[type=checkbox],
input[type=radio] {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

input[type=submit],
input[type=button],
label,
button,
select {
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}

a {
	-webkit-text-decoration: none;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.3s;
}

a[href^="tel:"] {
	pointer-events: none;
}

.l-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: calc(72rem + 1.5625rem * 2);
	max-width: calc(var(--inner) + var(--padding-pc) * 2);
	padding-left: 1.5625rem;
	padding-left: var(--padding-pc);
	padding-right: 1.5625rem;
	padding-right: var(--padding-pc);
	width: 100%;
}

/* 固定ヘッダー分の余白。トップはMVがヘッダーの下に回り込むため対象外 */

body:not(.home) main {
	padding-top: 78px;
	padding-top: var(--header-height);
}

/* ==========================================================================
   l-section  セクション間共通余白（カンプの実測値に合わせて調整）
   ========================================================================== */

.l-section {
	padding-bottom: 7.5rem;
	padding-top: 7.5rem;
}

.l-section--small {
	padding-bottom: 3.75rem;
	padding-top: 3.75rem;
}

.l-section--large {
	padding-bottom: 10rem;
	padding-top: 10rem;
}

/* 背景色バリエーションは案件ごとにここへ追加
   (l-* は外側影響系のみ。装飾系は p- へ) */

.l-section--bg-dark {
	background-color: #000;
	background-color: var(--black);
	color: #fff;
	color: var(--white);
}

.c-btn {
	align-items: center;
	background-color: #009d85;
	background-color: var(--accent);
	border-radius: 0.3125rem;
	color: #fff;
	color: var(--white);
	display: flex;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	justify-content: center;
	letter-spacing: 0.02em;
	min-height: 2.625rem;
	padding: 0.5rem 0.875rem;
	text-align: center;
	transition: opacity 0.3s;
	white-space: nowrap;
}

.c-btn--arrow {
	background-color: #fff;
	background-color: var(--white);
	color: #005d79;
	color: var(--blue);
	font-size: 1.25rem;
	justify-content: flex-start;
	min-height: 5.3125rem;
	padding: 1.25rem 6.25rem 1.25rem 1.0625rem;
	position: relative;
	text-align: left;
	white-space: normal;
}

/* 円と矢印は c-link-arrow__icon を流用する（カンプ 7:4947 は43px・線の矢印）。
   .c-link-arrow__icon の position/サイズを上書きするため詳細度を上げている */

.c-btn--arrow .c-btn__icon {
	height: 2.6875rem;
	position: absolute;
	right: 0.9375rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.6875rem;
}

/* カンプ 7:1440: テキスト左寄せ・矢印は塗りではなく線（12×8）で右端から49の位置 */

.c-btn--pill {
	background-color: #005d79;
	background-color: var(--blue);
	border-radius: 999px;
	font-size: 1rem;
	justify-content: flex-start;
	min-height: 3.25rem;
	padding: 0.75rem 4.3125rem 0.75rem 2.9375rem;
	position: relative;
	text-align: left;
}

.c-btn--pill::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	content: "";
	height: 0.588388125rem;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	right: 3.0625rem;
	top: 50%;
	transform: translateY(-50%);
	transition: translate 0.3s ease;
	width: 0.79419375rem;
}

.c-btn--pill { /* 矢印が少し右に動く（.p-top-links__icon と同じ挙動） */
}

.c-btn--outline {
	background-color: transparent;
	border: 1px solid #005d79;
	border: 1px solid var(--blue);
	color: #005d79;
	color: var(--blue);
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-size: 1rem;
	letter-spacing: 0.1em;
	min-height: 3.25rem;
	padding: 0.75rem 2.5rem;
}

/* SPメニューのお問い合わせカード（カンプ 7:4925 / 7:4935）
   上が濃色・下が白の2段。角丸10px */

.c-contact-card {
	border-radius: 0.625rem;
	display: block;
	overflow: hidden;
	padding-top: 2rem;
	text-align: center;
}

.c-contact-card--form {
	background-color: #003e53;
	background-color: var(--main);
}

.c-contact-card--tel {
	background-color: #005d79;
	background-color: var(--blue);
}

.c-contact-card__label {
	color: #fff;
	color: var(--white);
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1;
}

.c-contact-card__main {
	align-items: center;
	color: #fff;
	color: var(--white);
	display: flex;
	font-size: 1.4375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	gap: 0.75rem;
	justify-content: center;
	line-height: 1.3;
	margin-top: 1.25rem;
	padding-bottom: 1.8125rem;
}

.c-contact-card__main--tel {
	font-size: 2.125rem;
	font-weight: 800;
	font-weight: var(--fw-heavy);
	gap: 0.5rem;
	letter-spacing: 0.02em;
}

.c-contact-card__icon {
	flex-shrink: 0;
	height: auto;
	width: 1.9375rem;
}

.c-contact-card__icon--tel {
	width: 1.3125rem;
}

.c-contact-card__note {
	background-color: #fff;
	background-color: var(--white);
	color: #555;
	color: var(--form-note);
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.45;
	padding-bottom: 1.1875rem;
	padding-top: 1.1875rem;
}

/* 写真に --blue 55% を重ねたお問い合わせ帯（カンプ準拠） */

.c-cta-contact {
	min-height: 31.4375rem;
	overflow: hidden;
	position: relative;
}

.c-cta-contact::before {
	background-image: url(../images/cta-contact.jpg);
	background-position: center;
	background-size: cover;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: scale 0.4s ease;
}

.c-cta-contact::after {
	background-color: rgba(0, 93, 121, 0.55);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/* 帯全体をリンクにする。
   height:100% は親の高さが min-height 起点だと auto に落ちて、
   中身のぶんしかクリックできなくなるので min-height を引き継ぐ */

.c-cta-contact__area {
	display: block;
	min-height: inherit;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* 写真の拡大率は .p-top-insights__card-img img と同じ */

.c-cta-contact__inner {
	padding-top: 4.3125rem;
}

.c-cta-contact__en {
	color: #fff;
	color: var(--white);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.9375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
}

.c-cta-contact__title {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 3.75rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.45;
	margin-top: -0.25rem;
}

.c-cta-contact__link {
	margin-left: 1rem;
	margin-top: 14.3125rem;
}

/* チェックボックス（リセットで input を視覚的に隠し、箱を描画して状態を反映する） */

.c-form-check {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5625rem;
	position: relative;
}

.c-form-check__box {
	background-color: #fff;
	background-color: var(--white);
	border: 1px solid #000;
	border: 1px solid var(--black);
	flex-shrink: 0;
	height: 1.125rem;
	position: relative;
	transition: background-color 0.2s ease;
	width: 1.125rem;
}

.c-form-check__box::before {
	border-bottom: 2px solid #fff;
	border-bottom: 2px solid var(--white);
	border-right: 2px solid #fff;
	border-right: 2px solid var(--white);
	content: "";
	height: 0.625rem;
	left: 0.3125rem;
	opacity: 0;
	position: absolute;
	top: 0.125rem;
	transform: rotate(45deg);
	width: 0.375rem;
}

.c-form-check__input:checked + .c-form-check__box {
	background-color: #009d85;
	background-color: var(--accent);
	border-color: #009d85;
	border-color: var(--accent);
}

.c-form-check__input:checked + .c-form-check__box::before {
	opacity: 1;
}

.c-form-check__input:focus-visible + .c-form-check__box {
	outline: 2px solid #009d85;
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.c-form-check__text {
	color: #000;
	color: var(--black);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 2;
}

.c-link-arrow {
	align-items: center;
	color: #fff;
	color: var(--white);
	display: inline-flex;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	gap: 1.125rem;
	letter-spacing: 0.04em;
}

/* ホバーは円が塗り替わるだけで、矢印は動かさない（カンプ 7:6193 / 7:6200 / 7:6207） */

.c-link-arrow__icon {
	border: 1px solid currentcolor;
	border-radius: 50%;
	flex-shrink: 0;
	height: 2.0625rem;
	position: relative;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	width: 2.0625rem; /* 矢印はカンプ書き出しのSVGをマスクして描く（線幅も原寸比で合う） */
}

.c-link-arrow__icon::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	content: "";
	height: 0.5393557813rem;
	left: 50%;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.7280109375rem;
}

.c-link-arrow--main {
	color: #003e53;
	color: var(--main);
}

/* 一覧へ戻るリンク（矢印を左向きに反転する） */

.c-link-arrow--back .c-link-arrow__icon {
	transform: scaleX(-1);
}

/* 下層ページ共通のページタイトル（◥EN + 日本語） */

.c-page-title__en {
	color: #009d85;
	color: var(--accent);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.9375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.2;
	padding-left: 1.0625rem;
	position: relative;
}

.c-page-title__en::before {
	background-color: currentcolor;
	clip-path: polygon(100% 0, 0 29%, 22% 100%);
	content: "";
	height: 0.5rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.6875rem;
}

/* カンプ実測: EN 188〜206 / JA 207（company 7:11238・insights 7:13603 で共通） */

.c-page-title__ja {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.5rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.45;
	margin-top: 0.0625rem;
}

/* 濃色ページ用の白抜き */

.c-page-title--invert .c-page-title__en,
.c-page-title--invert .c-page-title__ja {
	color: #fff;
	color: var(--white);
}

/* func-pagination.php の DOM（nav.pagination）に対するスタイル */

.pagination__list {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	justify-content: center;
}

.pagination__link {
	align-items: center;
	color: #003e53;
	color: var(--main);
	display: grid;
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.875rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	justify-items: center;
	min-width: 1.25rem;
	place-items: center;
}

.pagination__link.is-current {
	color: #009d85;
	color: var(--accent);
}

.pagination__arrow {
	color: #003e53;
	color: var(--main);
	display: block; /* テキスト矢印（＜＞）は疑似要素の矢印で置き換えるため非表示 */
	font-size: 0;
	height: 2.0625rem;
	position: relative;
	width: 2.0625rem; /* 矢印はカンプ書き出しのSVGをマスクして描く（線幅も原寸比で合う） */
}

.pagination__arrow::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	content: "";
	height: 0.5393557813rem;
	left: 50%;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.7280109375rem;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.pagination__arrow { /* 円。カンプ注記「矢印：マウスオーバーで、円が大きくなる」に合わせ、
     ホバーではこの円だけがふわっと大きくなる（カンプ実測 33px → 37px。矢印は原寸のまま） */
}

.pagination__arrow::after {
	border: 1px solid currentcolor;
	border-radius: 50%;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: scale 0.3s ease;
}

.pagination__arrow { /* 円は左右対称なので、前へ戻る矢印は要素ごと反転させる */
}

.pagination__arrow[data-type=prev] {
	scale: -1 1;
}

/* お知らせ / 経営と税務のヒント 共通の記事カード */

.c-post-card {
	display: block;
}

/* アイキャッチ有無どちらも同じ扱い（ノーイメージ画像もカード枠と同じ比率で書き出されている） */

/* 高さ固定ではなくカンプの比率（287:170）で持つ。
   SPはカードをインナー幅いっぱいに広げているため、固定高さだとノーイメージが上下に切れる */

.c-post-card__img {
	aspect-ratio: 287/170;
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	display: block;
	overflow: hidden;
	position: relative;
}

.c-post-card__img img {
	-o-object-fit: cover;
	bottom: 0;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.c-post-card__meta {
	color: #003e53;
	color: var(--main);
	display: flex;
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-size: 0.75rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	gap: 1.1875rem;
	letter-spacing: 0.02em;
	line-height: 1;
	margin-top: 1.5rem;
	padding-left: 1.5625rem;
	position: relative;
}

.c-post-card__meta::before {
	background-color: #009d85;
	background-color: var(--accent);
	clip-path: polygon(100% 0, 0 29%, 22% 100%);
	content: "";
	height: 0.5rem;
	left: 0.125rem;
	position: absolute;
	top: 0.1875rem;
	width: 0.625rem;
}

/* カンプはカード高さ296・行ピッチ379で固定＝タイトルは常に3行ぶん確保されている
   （実タイトルが短くても行が詰まらないよう min-height を持たせる） */

.c-post-card__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #003e53;
	color: var(--main);
	display: -webkit-box;
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.5625;
	margin-top: 0.9375rem;
	min-height: 4.6875rem;
	overflow: hidden;
	transition: color 0.3s ease;
}

/* カンプ 7:9562「マウスオーバーで色が変わる」: タイトルだけアクセント色になる（写真・日付は変えない） */

.c-post-detail {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	padding-bottom: 10.5rem;
	padding-top: 10.0625rem;
}

/* カンプ 7:11161 は地が白（お知らせ詳細 7:11077 はグレー地＋白のRANKING帯）。
   「一覧に戻る」からRANKINGまでの間隔も188px（お知らせ詳細は222px） */

.single-insights .c-post-detail {
	background-color: transparent;
	padding-bottom: 8.375rem;
}

.c-post-detail__meta {
	color: #003e53;
	color: var(--main);
	display: flex;
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-size: 1.0625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	gap: 1.8125rem;
	letter-spacing: 0.02em;
	line-height: 1;
	margin-left: 6.1875rem;
	padding-left: 2.0625rem;
	position: relative;
}

.c-post-detail__meta::before {
	background-color: #009d85;
	background-color: var(--accent);
	clip-path: polygon(100% 0, 0 29%, 22% 100%);
	content: "";
	height: 0.6875rem;
	left: 0;
	position: absolute;
	top: 0.1875rem;
	width: 0.9375rem;
}

.c-post-detail__cat {
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-weight: 500;
	font-weight: var(--fw-medium);
}

.c-post-detail__title {
	color: #003e53;
	color: var(--main);
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-size: 2.1875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.6875rem;
	max-width: 59.625rem; /* カンプは pc/03_news_detail（2行）も pc/05_insights_detail（1行）も写真が y=459 で同じ。
     タイトルが1行でも2行ぶんの高さを確保して、写真の位置が記事ごとに動かないようにする */
	min-height: calc(3.5rem * 2);
	text-align: justify;
	width: 100%; /* カンプ 7:3580 実測: SPは行送り31px（2行で62px） */
}

.c-post-detail__img {
	align-items: center;
	aspect-ratio: 822/496;
	background-color: #fff;
	background-color: var(--white);
	display: grid;
	height: auto;
	justify-items: center;
	margin-left: auto;
	margin-right: auto; /* カンプ 7:11144→7:11120 実測: タイトル下端395 → 写真459 の64px（SPは 7:3502→7:3466 で36px） */
	margin-top: 4rem;
	overflow: hidden;
	place-items: center;
	position: relative;
	width: 51.375rem;
}

.c-post-detail__img img:not(.c-post-detail__noimage) {
	-o-object-fit: cover;
	bottom: 0;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.c-post-detail__img { /* SPは幅を指定せずインナー幅いっぱい（カンプ 7:3466 は 325 ＝ インナー327とほぼ同じ） */
}

.c-post-detail__noimage {
	height: auto;
	width: 19rem;
}

/* 本文（エディタ出力）のタイポはカンプ 7:11150 / 7:3490 準拠 */

.c-post-detail__content {
	color: #003e53;
	color: var(--main);
	font-size: 1.0625rem;
	line-height: 2;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5.75rem;
	max-width: 59.625rem;
	text-align: justify;
	width: 100%; /* カンプの段落間は「空行1行ぶん」＝ line-height と同値 */
}

.c-post-detail__content p + p {
	margin-top: 2.125rem;
}

.c-post-detail__content { /* 見出しはアクセント色の下線つき（カンプ Frame 14720 + Vector 285）。
     前の本文からの間はカンプ実測で PC55 / SP34 */
}

.c-post-detail__content h2 {
	border-bottom: 1px solid #009d85;
	border-bottom: 1px solid var(--accent);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2;
	margin-top: 3.4375rem;
	padding-bottom: 0.3125rem;
	text-align: left;
}

.c-post-detail__content h2:first-child {
	margin-top: 0;
}

.c-post-detail__content h2 + p {
	margin-top: 1.0625rem;
}

.c-post-detail__content img {
	border-radius: 0.3125rem;
}

.c-post-detail__content { /* カンプ 7:11160 実測: 本文中のURLは本文と同じ色・太さで下線も無い。
     クリックできることが分かるよう、ホバーで下線をフェードインさせる
     （text-decoration 自体は補間できないので、線の色を透明から currentcolor へ動かす） */
}

.c-post-detail__content a {
	-webkit-text-decoration: underline;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.3s ease;
}

.c-post-detail__back {
	align-items: center;
	color: #003e53;
	color: var(--main);
	display: flex;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	gap: 1.125rem;
	letter-spacing: 0.04em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10.5rem;
	width: -moz-fit-content;
	width: fit-content;
}

/* 左向きの丸矢印 */

.c-post-detail__back-icon {
	border: 1px solid #003e53;
	border: 1px solid var(--main);
	border-radius: 50%;
	color: #003e53;
	color: var(--main);
	height: 2.0625rem;
	position: relative; /* 円は左右対称なので、左向きは要素ごと反転させる */
	scale: -1 1;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	width: 2.0625rem; /* 矢印はカンプ書き出しのSVGをマスクして描く（線幅も原寸比で合う） */
}

.c-post-detail__back-icon::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	content: "";
	height: 0.5393557813rem;
	left: 50%;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.7280109375rem;
}

/* カンプ 7:9470（マウスオーバー時）実測: 円が --accent で塗りつぶされ、
   矢印と文字は --main のまま（白抜きにはしない） */

/* overflow-x はSPの無限ループスライダーがはみ出しても横スクロールにならないようクリップする */

.c-post-ranking {
	background-color: #fff;
	background-color: var(--white);
	overflow-x: clip;
	padding-bottom: 3.125rem;
	padding-top: 3.375rem;
}

.c-post-ranking__inner {
	display: flex;
	gap: 5.9375rem;
	padding-left: calc(1.5625rem + 6.1875rem);
	padding-left: calc(var(--padding-pc) + 6.1875rem);
}

.c-post-ranking__heading {
	flex-shrink: 0;
}

.c-post-ranking__en {
	color: #009d85;
	color: var(--accent);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.875rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.2142857143;
}

.c-post-ranking__ja {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	margin-top: 0.125rem;
}

/* SPはカンプ注記「SPの場合だけ / 無限ループスライダー」に従い、途切れずに流し続ける。
   同じ5件を2セット並べ、1セットぶん（幅の半分＋gapの半分）左へ流し切ったところで先頭に戻す */

.c-post-ranking__list {
	display: flex;
	gap: 1.6875rem;
}

.c-post-ranking__item {
	flex-shrink: 0;
	width: 8.5rem;
}

/* 複製ぶんはループ用。PCは5件を並べるだけなので出さない */

.c-post-ranking__item--clone {
	display: none;
}

.c-post-ranking__link {
	display: block;
}

.c-post-ranking__num {
	color: #009d85;
	color: var(--accent);
	display: block; /* カンプ 7:14011 実測: Montserrat Bold 20px / --accent */
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	transition: color 0.3s ease;
}

.c-post-ranking__img {
	align-items: center;
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	display: grid;
	height: 5.6875rem;
	justify-items: center;
	margin-top: 0.4375rem;
	overflow: hidden;
	place-items: center;
	position: relative;
}

.c-post-ranking__img img:not(.c-post-ranking__noimage) {
	-o-object-fit: cover;
	bottom: 0;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.c-post-ranking__noimage {
	height: auto;
	width: 6.25rem;
}

.c-post-ranking__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #003e53;
	color: var(--main);
	display: -webkit-box;
	font-size: 0.8125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 2;
	margin-top: 0.4375rem;
	overflow: hidden;
	transition: color 0.3s ease;
}

/* 経営と税務のヒント側のカンプ（7:14008 / 7:11170）はタイトル2行ぶん・行送り26px */

.c-post-ranking--insights .c-post-ranking__title {
	-webkit-line-clamp: 2;
	min-height: 3.25rem;
}

/* カンプ 7:9618: ホバーで番号とタイトルがアクセント色になる（写真は変えない）。
   あわせてSPの無限ループを止める（アニメーションはSPレイアウトにしか無い） */

/* 下層ページ共通の中央寄せセクション見出し（EN + 日本語） */

.c-section-label {
	text-align: center;
}

.c-section-label__en {
	color: #009d85;
	color: var(--accent);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.9375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
}

.c-section-label__ja {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	margin-top: 0.125rem; /* カンプ 7:1179 実測: SPは16px。行送り30pxはPCと同じなので明示する */
}

.c-section-title__en {
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.9375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	padding-left: 1.375rem;
	position: relative;
}

.c-section-title__en::before {
	background-color: currentcolor;
	clip-path: polygon(100% 0, 0 29%, 22% 100%);
	content: "";
	height: 0.5rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.6875rem;
}

.c-section-title__ja {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.35;
	margin-top: 0.8125rem;
}

/* service の装飾写真（次セクション想定の位置）が被らないよう重ね順を上にする */

.footer {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	padding-bottom: 1.75rem;
	padding-top: 2.5rem;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.footer__head {
	align-items: center;
	display: flex;
}

.footer__logo {
	flex-shrink: 0;
	width: 18.125rem;
}

.footer__logo-link {
	display: block;
}

/* PCヘッダーにCTAがあるため、フッターのCTAはSPのみ表示する */

.footer__cta {
	display: none;
	transition: background-color 0.3s ease;
}

.footer__nav {
	margin-left: 5.125rem;
	margin-top: 1rem;
}

.footer__nav-list {
	align-items: center;
	display: flex;
	gap: 1.75rem;
}

.footer__nav-link {
	align-items: center;
	color: #003e53;
	color: var(--main);
	display: flex;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	justify-content: center;
	transition: background-color 0.3s ease, color 0.3s ease; /* カンプ 7:6243 のホバー: 文字がアクセント色に変わる */
}

.footer__body {
	align-items: start;
	display: grid;
	grid-template-columns: 23.75rem 24.8125rem minmax(0, 1fr);
	margin-top: 5.0625rem;
}

.footer__offices {
	grid-gap: 1.875rem;
	display: grid;
	gap: 1.875rem;
	grid-column: 1;
	grid-row: 1/3;
	padding-right: 3.125rem;
	padding-top: 1.0625rem;
}

.footer__office-name {
	color: #003e53;
	color: var(--main);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	padding-left: 1rem;
	position: relative;
}

.footer__office-name::before {
	background-color: #009d85;
	background-color: var(--accent);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	height: 0.5rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.625rem;
}

.footer__office-name { /* カンプはプロポーショナル詰め（「本社（今立）」の括弧が詰まる。実測 94.5 → 84） */
	font-feature-settings: "palt";
}

.footer__office-address {
	margin-top: 0.125rem;
}

.footer__office-link {
	color: #003e53;
	color: var(--main);
	font-size: 0.875rem;
	letter-spacing: 0.07em;
	line-height: 1.6;
	transition: opacity 0.3s;
}

.footer__office-link::after {
	-webkit-mask-image: url(../images/icon-external.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: #003e53;
	background-color: var(--main);
	content: "";
	display: inline-block;
	height: 0.75rem;
	margin-left: 0.5rem;
	mask-image: url(../images/icon-external.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	vertical-align: middle;
	width: 0.75rem;
}

.footer__office-tel {
	color: #003e53;
	color: var(--main);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.07em;
	margin-top: 0.125rem;
}

.footer__col {
	padding-left: 4.6875rem;
}

/* PCの区切り線はグループ列の左のみ（SPは各ブロックの上に横線） */

.footer__col--divider {
	border-left: 1px solid #fff;
	border-left: 1px solid var(--white);
	grid-column: 2;
	grid-row: 1/3;
}

.footer__col--related {
	grid-column: 3;
	grid-row: 1;
}

.footer__col-title {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.0625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
}

.footer__link-list {
	grid-gap: 0.25rem;
	display: grid;
	gap: 0.25rem;
	margin-top: 0.75rem;
}

.footer__link {
	color: #003e53;
	color: var(--main);
	font-size: 0.875rem;
	line-height: 2;
	transition: opacity 0.3s;
}

.footer__link::after {
	-webkit-mask-image: url(../images/icon-external.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: #003e53;
	background-color: var(--main);
	content: "";
	display: inline-block;
	height: 0.75rem;
	margin-left: 0.375rem;
	mask-image: url(../images/icon-external.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	vertical-align: middle;
	width: 0.75rem;
}

.footer__link--plain::after {
	display: none;
}

/* カンプはテキスト左寄せ・アイコン右端（PC/SPとも 左右padding 40 / テキスト開始 x=40） */

.footer__btn {
	justify-content: flex-start;
	margin-top: 1.9375rem;
	max-width: 20.4375rem;
	position: relative;
	text-align: left;
	transition: background-color 0.3s ease, color 0.3s ease;
	width: 100%;
}

.footer__btn::after {
	-webkit-mask-image: url(../images/icon-external.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: #005d79;
	background-color: var(--blue);
	content: "";
	height: 0.75rem;
	mask-image: url(../images/icon-external.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	position: absolute;
	right: 2.5rem;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color 0.3s ease;
	width: 0.75rem;
}

.footer__btn { /* カンプ指定のホバー: 青塗り＋白文字（透過は使わない） */
}

.footer__badge-list {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	grid-column: 3;
	grid-row: 2;
	margin-top: 2.875rem;
	padding-left: 4.6875rem;
}

.footer__badge-link {
	display: block;
	transition: opacity 0.3s;
	width: 5.8125rem;
}

.footer__bottom {
	grid-gap: 0.75rem;
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	margin-top: 4.0625rem;
}

.footer__privacy {
	-webkit-text-decoration: underline;
	color: #003e53;
	color: var(--main);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	text-decoration: underline;
	transition: opacity 0.3s;
}

.footer__copyright {
	color: #003e53;
	color: var(--main);
	font-size: 0.8125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
}

.header {
	height: 78px;
	height: var(--header-height);
	left: 0;
	position: fixed;
	top: 0;
	transition: transform 0.4s ease, background-color 0.3s ease;
	width: 100%;
	z-index: 100;
	z-index: var(--z-index-header);
}

.header.is-hidden {
	transform: translateY(-100%);
}

/* 写真・映像の上でも白文字が沈まないようにする保険。反転している間だけ薄く敷く */

.header::before {
	background-image: linear-gradient(180deg, rgba(0, 35, 50, 0.38) 0%, rgba(0, 35, 50, 0.38) 60%, transparent 100%);
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.5s ease;
	z-index: -1;
}

.header.is-invert::before {
	opacity: 1;
}

.header__inner {
	align-items: center;
	display: flex;
	height: 100%;
	padding-left: 1.9375rem;
	padding-right: 1.6875rem;
}

.header__logo {
	flex-shrink: 0;
	width: 11.5625rem;
}

.header__logo-link {
	display: block;
	position: relative;
}

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

.header__logo-img--invert {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 0.5s ease;
}

/* 濃い背景が下に来たら白に切り替える（カンプ指示: コントラストが弱い場面で白） */

.header.is-invert .header__logo-img--invert {
	opacity: 1;
}

.header.is-invert .header__link {
	color: #fff;
	color: var(--white);
}

.header.is-invert .header__hamburger-bars::before,
.header.is-invert .header__hamburger-bars::after {
	background-color: #fff;
	background-color: var(--white);
}

.header.is-invert .header__hamburger-text {
	color: #fff;
	color: var(--white);
}

/* ドロワーを開いている間は白地なので反転しない */

.header:has(.js-hamburger.is-open).is-invert .header__logo-img--invert,
.header:has(.js-hamburger.is-open).is-invert .header__hamburger-text {
	opacity: 0;
}

.header:has(.js-hamburger.is-open).is-invert .header__link {
	color: #003e53;
	color: var(--main);
}

.header:has(.js-hamburger.is-open).is-invert .header__hamburger-bars::before,
.header:has(.js-hamburger.is-open).is-invert .header__hamburger-bars::after {
	background-color: #009d85;
	background-color: var(--accent);
}

.header__nav {
	margin-left: 7.125rem;
}

.header__list {
	align-items: center;
	display: flex;
	gap: 1.625rem;
}

.header__link {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	transition: color 0.5s ease, opacity 0.3s;
}

.header__cta {
	flex-shrink: 0;
	margin-left: auto;
	width: 12.1875rem;
}

.header__hamburger {
	display: none;
}

.header__hamburger-bars {
	height: 0.6875rem;
	left: 0.125rem;
	position: absolute;
	top: 0;
	width: 2.1875rem;
}

.header__hamburger-bars::before,
.header__hamburger-bars::after {
	background-color: #009d85;
	background-color: var(--accent);
	content: "";
	height: 0.125rem;
	left: 0;
	position: absolute;
	transition: transform 0.3s ease, top 0.3s ease, background-color 0.5s ease;
	width: 100%;
}

.header__hamburger-bars::before {
	top: 0;
}

.header__hamburger-bars::after {
	top: 0.5625rem;
}

.header__hamburger-text {
	bottom: 0;
	color: #009d85;
	color: var(--accent);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.8125rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	left: 0;
	line-height: 1;
	position: absolute;
	text-align: center;
	transition: opacity 0.3s ease, color 0.5s ease;
	white-space: nowrap;
	width: 100%;
}

/* 同じ位置に重ねて置き、開閉でクロスフェードさせる */

.header__hamburger-text--close {
	opacity: 0;
}

.header__hamburger.is-open .header__hamburger-bars::before {
	top: 0.25rem;
	transform: rotate(20deg);
}

.header__hamburger.is-open .header__hamburger-bars::after {
	top: 0.25rem;
	transform: rotate(-20deg);
}

.header__hamburger.is-open .header__hamburger-text--menu {
	opacity: 0;
}

/* ドロワー展開時のヘッダーは白地に切り替える
   ハンバーガーはSPでしか表示しないため :has() はSPでのみ効く */

.header:has(.js-hamburger.is-open) {
	background-color: #fff;
	background-color: var(--white);
}

/* 白地に切り替えた上に、写真用の暗いグラデーションが残らないようにする */

.header:has(.js-hamburger.is-open)::before {
	opacity: 0;
	transition: none;
}

.header__hamburger.is-open .header__hamburger-text--close {
	opacity: 1;
}

.header__drawer {
	display: none;
}

.header__drawer-list {
	grid-gap: 1.625rem;
	display: grid;
	gap: 1.625rem;
}

.header__drawer-link {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.09em;
}

.header__drawer-btn {
	margin-top: 3.4375rem;
	width: 100%;
}

.header__drawer-card {
	margin-top: 3.5625rem;
}

.header__drawer-card + .header__drawer-card {
	margin-top: 1.5625rem;
}

/* 絵コンテ モーション: キャッチの後、上からスライドして出現する（トップのみ） */

body.home .header {
	animation: header-in 600ms ease 3400ms backwards;
}

/* ローディング〜ファーストビュー（カンプの絵コンテ準拠）
   1s 静止 → 600ms でめくれる → 覆い切ってから 700ms ディゾルブ */

/* inset:0 はスクロールバーの予約ぶんだけ内側で止まる（スクロールロック中は
   そこに地色が出ず、右端に白い帯が残る）。ビューポート幅・高さで覆い切る */

.loader {
	align-items: center;
	animation: loader-out 700ms ease 1700ms forwards;
	background-color: #003e53;
	background-color: var(--main);
	display: grid;
	height: 100vh;
	height: 100lvh;
	justify-items: center;
	left: 0;
	place-items: center;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 1000;
	z-index: var(--z-index-loader);
}

/* めくれの「面」はここが描く。
   拡大（scale）した層は合成時の描画が端で数十px足りず、覆い切ったはずの画面の
   下端・右端に地色の帯が残る（768/810/820/1366幅で 4〜33px。倍率を上げても比例して増える）。
   そこで面は拡大せず、画面サイズのまま clip-path の三角形を広げる。
   .loader__peel は同じ動きでカール（SVG）だけを重ねる */

.loader__fill { /* 緑三角の2辺。SVG（viewBox 83.909×57.2228）の緑は横 0.75346w・縦 h */
	--fill-w: calc(3.955625rem * var(--peel-scale));
	--fill-h: calc(3.5625rem * var(--peel-scale));
	--peel-scale: calc((100vw / 4.44375rem + 100vh / 3rem) * 1.4);
	animation: loader-fill 600ms ease-in 1000ms forwards;
	background-color: #009d85;
	background-color: var(--accent);
	clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
	height: 100vh;
	height: 100lvh;
	left: 0;
	position: absolute;
	top: 0;
	width: 100vw;
}

.loader__logo {
	width: 17.8125rem;
}

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

/* 右下から緑の面がめくれ上がって画面を覆う。
   倍率を固定値にすると画面が広い/縦長のときに緑が左上まで届かないため、
   ビューポートから必要な倍率を算出する。
   SVGの緑三角の実効サイズは rem(71.1) × rem(48)（左下と右上の頂点までの距離）。
   1.4 は覆い切ってからディゾルブに入るための余裕。 */

.loader__peel {
	--peel-scale: calc((100vw / 4.44375rem + 100vh / 3rem) * 1.4);
	animation: loader-peel 600ms ease-in 1000ms forwards;
	background-image: url(../images/loader-peel.svg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	bottom: -1px;
	height: 3.5625rem;
	position: absolute; /* 拡大した層の右辺・下辺が画面の端に重なると、端数の分だけ1pxの暗い筋が出る（Chrome 実測）。
     1px 外に出して層の縁を画面の外に置く */
	right: -1px;
	transform-origin: 100% 100%;
	width: 5.25rem;
}

/* SVGは28倍に引き伸ばされるため、ラスタライズの端数で右下に地色の帯が出ることがある。
   同じ緑の三角をベクター（clip-path）で重ねて隙間を塞ぐ。
   頂点はSVGの緑（viewBox 83.909×57.2228 の 20.687,57.2228 / 83.909,57.2228 / 83.909,0）と同値。 */

.loader__peel::before {
	background-color: #009d85;
	background-color: var(--accent);
	bottom: 0; /* 右辺・下辺は枠の外まで伸ばす（50倍に拡大した時の端数で右下に1pxの筋が出ないように）。
     斜辺（24.654% 100% → 100% 0%）はSVGの緑と同じ線のまま */
	clip-path: polygon(24.654% 100%, 100% 0%, 300% 0%, 300% 300%, 24.654% 300%);
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.loader.is-done {
	display: none;
}

/* 動きを減らす設定では即座に消す */

/* フッター直前の写真帯（カンプの配置座標を再現した明示クロップ） */

.p-about-band {
	aspect-ratio: 1440/462;
	display: block;
	height: auto;
	overflow: hidden;
	position: relative; /* カンプ実測（1440×462の枠に 1741 幅の写真を 左-30 / 上-458 で置く）。
     枠を rem、写真を calc(100% + n) で持つと 1440超で枠の高さだけ伸びず、
     写真の切れ方が画面幅で変わってしまうので、どちらも画面幅に対する比率で持つ */
}

.p-about-band img {
	left: 47.9167%;
	max-width: none;
	position: absolute;
	top: -99.13%;
	transform: translateX(-50%);
	width: 120.903%;
}

.p-about-band { /* SPカンプ実測: 375×239 の枠に 629 幅の写真を 左-7 / 上-110 で置く */
}

.p-about-effort {
	background-color: #002332;
	background-color: var(--main-dark);
	padding-bottom: 13.0625rem;
	padding-top: 9rem;
	position: relative;
}

.p-about-effort__dark {
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.p-about-effort__dark--01 {
	bottom: 58%;
	top: 0;
}

.p-about-effort__dark--02 {
	bottom: 0;
	top: 74%;
}

.p-about-effort__head {
	display: flex;
	justify-content: space-between;
}

.p-about-effort__lead {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
}

.p-about-effort__title {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.35;
	margin-top: 1.4375rem;
}

.p-about-effort__intro {
	color: #fff;
	color: var(--white);
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.27;
	max-width: 35.3125rem;
	width: 100%; /* カンプ 7:1250 実測: SPはインナー327に対して幅274で、右端に寄せる（左端は空ける） */
}

.p-about-effort__list {
	grid-gap: 1.3125rem;
	display: grid;
	gap: 1.3125rem;
	margin-top: 9rem;
}

.p-about-effort__item {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	border-radius: 0.3125rem; /* TOPのアイコンからのアンカー遷移時に、固定ヘッダーで見出しが隠れないようにする */
	scroll-margin-top: calc(78px + 1.25rem);
	scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.p-about-effort__toggle {
	align-items: center;
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	gap: 2.625rem;
	padding: 1.6875rem 6.25rem 1.6875rem 6.625rem;
	position: relative;
	text-align: left;
	width: 100%;
}

.p-about-effort__icon {
	align-items: center;
	display: grid;
	flex-shrink: 0;
	justify-items: center;
	place-items: center;
	width: 7.25rem;
}

.p-about-effort__icon img {
	height: 5.6875rem;
	width: auto;
}

.p-about-effort__name {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.0625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
}

/* +/− の開閉マーク */

.p-about-effort__mark {
	border: 1px solid #005d79;
	border: 1px solid var(--blue);
	border-radius: 50%;
	height: 1.75rem;
	position: absolute;
	right: 4.1875rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.75rem;
}

.p-about-effort__mark::before,
.p-about-effort__mark::after {
	background-color: #005d79;
	background-color: var(--blue);
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	top: 50%;
	transition: rotate 0.4s ease, opacity 0.4s ease;
	translate: -50% -50%;
	width: 0.75rem;
}

.p-about-effort__mark::after {
	rotate: 90deg;
}

/* 縦棒は横棒に重なるまで回しながら消す（本文の開閉 0.4s と同じ速さ） */

.p-about-effort__item.is-open .p-about-effort__mark::after {
	opacity: 0;
	rotate: 180deg;
}

/* 開閉は grid-rows で高さを補間する */

.p-about-effort__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.p-about-effort__item.is-open .p-about-effort__body {
	grid-template-rows: 1fr;
}

.p-about-effort__body-inner {
	min-height: 0;
	overflow: hidden;
	padding-left: 10.3125rem;
	padding-right: 10.3125rem;
}

.p-about-effort__catch {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.3125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.5;
	margin-top: 1.25rem;
	text-align: justify;
}

/* カンプは375px幅。376px以上は1行に収まるので改行しない */

.p-about-effort__text {
	color: #003e53;
	color: var(--main);
	font-size: 1rem;
	line-height: 2;
	margin-bottom: 2.9375rem;
	margin-top: 1.5625rem;
	text-align: justify;
}

/* VALUE / STANCE 共通の2列リスト（SPは1列） */

.p-about-grid {
	grid-column-gap: 1.875rem;
	-moz-column-gap: 1.875rem;
	column-gap: 1.875rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-about-grid__item {
	border-top: 1px solid #c3c3c3;
	border-top: 1px solid var(--gray);
	padding-bottom: 2.0625rem;
	padding-top: 2.0625rem;
	text-align: center; /* 下段（3・4番目）だけ下線を引いてリストを閉じる */
}

.p-about-grid__item:nth-child(3),
.p-about-grid__item:nth-child(4) {
	border-bottom: 1px solid #c3c3c3;
	border-bottom: 1px solid var(--gray);
}

.p-about-grid__title {
	color: #009d85;
	color: var(--accent);
	font-family: "Noto Serif JP", serif;
	font-family: var(--serif-font);
	font-size: 1.375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.36;
}

.p-about-grid__text {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.67;
	margin-top: 1.125rem;
}

/* 空色グラデーションはヘッダーの背面まで届かせる */

/* 空色グラデーションは写真上端まで（カンプの矩形サイズに固定）。以降は薄い空色 */

.p-about-hero {
	background-color: #ddf3ff;
	background-color: var(--sky-light);
	background-image: linear-gradient(180deg, #bae7ff 0%, #ddf3ff 83.173%);
	background-image: linear-gradient(180deg, var(--sky) 0%, var(--sky-light) 83.173%);
	background-repeat: no-repeat;
	background-size: 100% 102.0625rem;
	margin-top: calc(78px * -1);
	margin-top: calc(var(--header-height) * -1);
	padding-top: calc(78px + 6.875rem);
	padding-top: calc(var(--header-height) + 6.875rem);
	position: relative;
}

.p-about-hero__dark {
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 73%;
}

.p-about-hero__mission {
	margin-top: 9rem; /* カンプ 7:1252 実測: インナー327に対して238（左端そろえ） */
}

.p-about-hero__vision {
	margin-left: 31.625rem;
	margin-top: 14.8125rem;
	width: 42.1875rem; /* カンプ 7:1253 実測: インナー327に対して左90・幅239（右端は2pxだけ外へ出る） */
}

.p-about-hero__label {
	color: #009d85;
	color: var(--accent);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.9375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
}

.p-about-hero__heading {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	line-height: 1;
	margin-top: 0.875rem;
}

.p-about-hero__text {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
	line-height: 2.5;
	margin-top: 3.4375rem;
	text-align: justify;
}

/* 写真は画面幅いっぱい。カンプの配置座標を再現した明示クロップ。
   枠も写真も画面幅に対する比率で持つ（px/remで持つと1440超で枠の高さだけ伸びず、
   写真だけが縦に伸びて下の人物が切れる。比率なら空の見え方も足元の位置もどの幅でも同じ） */

.p-about-hero__photo {
	aspect-ratio: 1440/1054;
	display: block;
	margin-top: 5rem;
	overflow: hidden;
	position: relative; /* カンプ 7:8622 実測: 1440×1054 の枠に 1841×1230 を左へ26px寄せて上端そろえ */
}

.p-about-hero__photo img {
	left: 51.8056%;
	max-width: none;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 127.847%;
}

.p-about-hero__photo { /* SPカンプ 7:1177 実測: 375×265 の枠に 457×305 を左へ5px寄せて上端そろえ */
}

/* 3枚の写真コラージュ（カンプの配置座標・内部クロップを再現）。
   PCは1440を超えても画面端に張り付かず、中央基準で位置を決める */

.p-about-photos {
	height: 60.4375rem;
	margin-top: 5.9375rem;
	position: relative;
}

.p-about-photos__item {
	display: block;
	overflow: hidden;
	position: absolute;
}

.p-about-photos__item img {
	max-width: none;
	position: absolute;
}

.p-about-photos__item--01 {
	border-radius: 0.5rem;
	height: 42.4375rem;
	left: calc(50% - 45rem);
	top: 0;
	width: 31.8125rem;
}

.p-about-photos__item--01 img {
	left: -15.25rem;
	top: -0.5625rem;
	width: 64.3125rem;
}

.p-about-photos__item--02 {
	border-radius: 0.5rem;
	height: 23.75rem;
	right: calc(50% - 45rem);
	top: 5.4375rem;
	width: 31.6875rem;
}

.p-about-photos__item--02 img {
	left: -3.0625rem;
	top: 0.1875rem;
	width: 35.3125rem;
}

.p-about-photos__item--03 {
	border-radius: 0.5rem;
	height: 23rem;
	left: calc(50% - 7.1875rem);
	top: 37.4375rem;
	width: 30.8125rem;
}

.p-about-photos__item--03 img {
	left: -6.5625rem;
	top: -4.3125rem;
	width: 42.1875rem;
}

.p-about-stance {
	padding-bottom: 8.9375rem;
	padding-top: 12.8125rem;
}

.p-about-stance__quote {
	color: #003e53;
	color: var(--main);
	font-family: "Noto Serif JP", serif;
	font-family: var(--serif-font);
	font-size: 3rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.02;
	margin-top: 6.1875rem;
	text-align: center; /* カンプ 7:1262 は 0.17em + palt。GoogleフォントのNoto Serif JPにpaltが無く
     そのままでは1行に収まらないため、カンプと同じ見た目の幅になる 0.08em に置き換えた */ /* 2行の段差（2行目を54px右へ）はそのままに、かたまりごと中央に置く。
     375幅ではカンプどおり左24px、iPad mini（744）など広い画面でも左右の余白がそろう */
}

/* カンプ 7:1262 / 7:1261 実測: SPは1行目がインナー左端(24)、2行目がそこから54px右(78)。
   右端そろえにすると画面幅が広がるほど段差が開くので、ずらす量は固定にする。
   PCは1行なので span は行の中で続けて流れる */

.p-about-stance__note {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.53;
	margin-top: 3rem;
	text-align: center;
}

/* カンプ 7:8679 / 7:1204 実測: 行動指針の見出しだけ VALUE 側と書体・太さ・色が違う
   （VALUE は Noto Serif JP SemiBold の --accent、こちらは Zen Kaku Gothic New Bold の --blue） */

.p-about-stance .p-about-grid__title {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-weight: 700;
	font-weight: var(--fw-bold);
}

.p-about-stance .p-about-grid {
	margin-top: 3.8125rem;
}

/* カンプ 7:1269 実測: SPのこの見出しだけ 25px / Medium / --main（他セクションは 16px / Bold / --blue）。
   PC 7:8640 は他と同じなのでSPのみ */

.p-about-symbol {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	padding-bottom: 10.6875rem;
	padding-top: 7.9375rem;
}

/* SPは1枚ずつの横スクロール（スクロール量をプログレスバーに反映する） */

.p-about-symbol__slider {
	margin-top: 3.8125rem;
}

.p-about-symbol__list {
	display: flex;
	gap: 5.5rem;
	justify-content: center; /* 中央のカードは円が拡大するため、上下に逃げ場を作る（負のマージンで見た目の位置は変えない） */
}

.p-about-symbol__item {
	flex-shrink: 0;
	text-align: center;
	width: 15.6875rem;
}

.p-about-symbol__circle {
	align-items: center;
	background-color: #fff;
	background-color: var(--white);
	border-radius: 50%;
	display: grid;
	height: 14.375rem;
	justify-items: center;
	margin-left: auto;
	margin-right: auto;
	place-items: center;
	width: 14.375rem;
}

.p-about-symbol__circle { /* reset の img { width: 100% } を打ち消してカンプ原寸で置く。
     カンプはアイコンの中心が円の中心より 3.8px 下 */
}

.p-about-symbol__circle img {
	height: 6.09375rem;
	translate: 0 0.2375rem;
	width: auto;
}

.p-about-symbol__item:nth-child(2) .p-about-symbol__circle img {
	height: 6.6125rem;
}

.p-about-symbol__item:nth-child(3) .p-about-symbol__circle img {
	height: 4.375rem;
}

/* 見出しは円の下端に少し重なる（カンプ準拠）。
   拡大時の円は transform で重ね順が上がるため、文字側を明示的に前に出す */

.p-about-symbol__title {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.1875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	line-height: 1.74;
	margin-top: -2rem;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.p-about-symbol__text {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.73;
	margin-top: 0.9375rem;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* SPは中央に来たカードの円だけ大きくする（script.js の js-symbol-slider とセット） */

/* スクロール位置に応じて --progress (0〜1) をJSが更新する。
   カンプ指示どおり、バーは伸びるのではなく横に移動する */

.p-about-symbol__progress {
	background-color: #c3c3c3;
	background-color: var(--gray);
	display: block;
	height: 0.1875rem;
	margin-left: 0;
	margin-right: 0;
	margin-top: 3.0625rem;
	overflow: hidden;
	position: relative;
}

.p-about-symbol__progress::before {
	background-color: #003e53;
	background-color: var(--main);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	translate: calc(0 * 200%) 0;
	translate: calc(var(--progress, 0) * 200%) 0;
	width: 33.3333333333%;
}

.p-about-value {
	padding-top: 9.1875rem;
}

.p-about-value .p-about-grid {
	margin-top: 3.5625rem;
}

.p-company {
	padding-bottom: 11.25rem;
	padding-top: 6.875rem;
}

.p-company__band {
	aspect-ratio: 1440/537;
	display: block;
	height: auto;
	margin-top: 2.0625rem;
	overflow: hidden;
	position: relative; /* カンプ 7:11242 実測（1440×537の枠に 1489.4 幅の写真を 左-24.3 / 上-97.3 で置く）。
     px（rem）で持つと1440超で枠の高さだけ伸びず、写真だけが縦に伸びて山の下が切れるため、
     枠も写真も画面幅に対する比率で持つ */
}

.p-company__band img {
	left: 48.3125%;
	max-width: none;
	position: absolute;
	top: -18.12%;
	transform: translateX(-50%);
	width: 103.43%;
}

.p-company__band { /* SPカンプ 7:2619 実測: 見出しから50px。375×183 の枠に 388 幅の写真を左+6.5で置く */
}

.p-company__inner {
	max-width: calc(51.375rem + 1.5625rem * 2);
	max-width: calc(51.375rem + var(--padding-pc) * 2);
}

.p-company__section {
	margin-top: 6.875rem;
}

.p-company__section:first-child {
	margin-top: 3.75rem;
}

.p-company__section { /* SPカンプ 7:2621/7:2627 実測: 帯の下30px（2つ目以降は111px） */
}

/* カンプ 7:11244 実測: --blue の文字＋同色1pxの下線。行送り33 / 線まで7 */

.p-company__heading {
	border-bottom: 1px solid #005d79;
	border-bottom: 1px solid var(--blue);
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 2.0625;
	padding-bottom: 0.4375rem;
}

.p-company__cards {
	grid-gap: 4.375rem;
	display: grid;
	gap: 4.375rem;
	margin-top: 2.875rem; /* SPカンプ 7:2646/7:2647 実測: 見出しの下43px・カード間70px */
}

/* カンプ 7:11269 実測: --accent の帯（高さ40・上角5px）に白文字 */

.p-company__name {
	background-color: #009d85;
	background-color: var(--accent);
	border-radius: 0.3125rem;
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.1111111111;
	padding: 0.625rem;
	text-align: center;
}

.p-company__table {
	margin-top: 0.1875rem; /* SPカンプ 7:2612 実測: 帯の下端→1行目の文字は6社中5社が44px（margin 20 + 行の padding 15 + 行送りぶん）。
     1社目だけ24pxと詰まっているが少数側なので合わせない */
}

/* 行間の線はカンプ実測 #f1f3f5。上下の余白は25 / 28。
   線は各行の下だけに引く（1行目の上には線を出さない） */

.p-company__row {
	border-bottom: 1px solid #f1f3f5;
	border-bottom: 1px solid var(--line-pale);
	display: grid;
	grid-template-columns: 13.1875rem minmax(0, 1fr);
	padding-bottom: 1.625rem;
	padding-top: 1.5625rem; /* SPカンプ 7:2656/7:2657 実測: 項目名と値は行送りで詰めて置く（間隔0・上15/下19px） */
}

.p-company__th {
	color: #009d85;
	color: var(--accent);
	font-size: 0.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2.0714285714;
	padding-left: 1.5625rem;
}

.p-company__td {
	color: #003e53;
	color: var(--main);
	font-size: 1rem;
	line-height: 1.9;
	padding-left: 1.5625rem;
}

/* カンプ 7:11269: 住所は外部リンク（アイコン付き）、電話番号は下線付きリンク */

/* カンプ 7:2612 は所在地・電話の行がプロポーショナル詰め（palt）。括弧・記号が詰まる */

.p-company__td--office {
	font-feature-settings: "palt";
}

.p-company__map {
	color: #003e53;
	color: var(--main);
	transition: color 0.3s ease;
}

/* 折り返した住所の最終行の末尾に置く（flexアイテムにすると行ではなくブロックの右に出る） */

.p-company__external {
	-webkit-mask-image: url(../images/icon-external.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: currentcolor;
	display: inline-block;
	height: 0.75rem;
	margin-left: 0.375rem;
	mask-image: url(../images/icon-external.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	vertical-align: middle;
	width: 0.75rem;
}

/* リセットの a[href^="tel:"] { pointer-events: none } を打ち消してPCでも掛けられるようにする
   （属性セレクタと同じ詳細度が必要なのでここでも [href] を付ける） */

.p-company__tel[href^="tel:"] {
	-webkit-text-decoration: underline;
	color: #003e53;
	color: var(--main);
	pointer-events: auto;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.p-company__partners {
	margin-top: 1.5625rem; /* SPカンプ 7:2627/7:2630 実測 */
}

/* カンプ 7:11571 / 7:2634 実測: PC・SPとも16px / Regular / 行送り30.4 */

.p-company__partner {
	border-bottom: 1px solid #c3c3c3;
	border-bottom: 1px solid var(--gray);
	color: #003e53;
	color: var(--main);
	font-size: 1rem;
	font-weight: 400;
	font-weight: var(--fw-regular);
	line-height: 1.9;
	padding-bottom: 1.25rem;
	padding-top: 1.25rem;
}

.p-company__history {
	margin-top: 3.9375rem;
}

.p-company__history-row {
	display: grid;
	grid-template-columns: 12.375rem minmax(0, 1fr);
	margin-top: 1.875rem;
}

.p-company__history-row:first-child {
	margin-top: 0;
}

.p-company__history-date {
	color: #005d79;
	color: var(--blue);
	font-family: "Merriweather", serif;
	font-family: var(--num-font);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.07em;
	line-height: 1.6428571429;
}

.p-company__history-text {
	color: #003e53;
	color: var(--main);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.5;
}

/* カンプ 7:11919 は全角数字（（１）（２）…）。counter を全角で出すための定義 */

@counter-style fullwidth-num {
	system: numeric;
	symbols: "０" "１" "２" "３" "４" "５" "６" "７" "８" "９";
}

.p-contact {
	padding-bottom: 10.9375rem;
	padding-top: 6.875rem;
}

/* 電話ボックス（濃紺の帯。SPは受付時間だけ白地） */

.p-contact__tel {
	align-items: center;
	background-color: #005d79;
	background-color: var(--blue);
	border-radius: 0.625rem;
	color: #fff;
	color: var(--white);
	display: flex;
	justify-content: space-between;
	margin-top: 8.3125rem;
	min-height: 9.8125rem;
	padding-left: 3.6875rem;
	padding-right: 4.125rem; /* _reset.scss は a[href^="tel:"] でPCの発信を無効化しているが、この枠はPCでも生かす（詳細度を揃えるため属性で上書き） */
}

.p-contact__tel[href] {
	pointer-events: auto;
}

.p-contact__tel-label {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.5rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.225;
}

.p-contact__tel-body {
	display: grid;
	justify-items: center;
	margin-top: 0.6875rem; /* SPカンプ 7:2955 実測: 電話アイコン上端 316（ブロック上端262から54） */
}

.p-contact__tel-number {
	align-items: center;
	color: #fff;
	color: var(--white);
	display: flex;
	font-family: "Avenir", "Avenir Next", "Nunito Sans", sans-serif;
	font-family: var(--avenir-font);
	font-size: 3.4375rem;
	font-weight: 800;
	font-weight: var(--fw-heavy);
	gap: 1.3625rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.p-contact__tel-icon {
	height: 3.3125rem;
	width: 2.0625rem;
}

/* カンプ 7:11844 実測: 電話番号の下16px（PC）。SPは白帯の中で行送り16px */

.p-contact__tel-note {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.375; /* カンプ 7:11844 実測: 数字部分の下に寄せてあり、アイコン込みの中央より22px右 */
	margin-left: 2.75rem;
	margin-top: 1rem;
}

/* フォーム */

/* カンプ 7:11834 / 7:2942 の文字位置（インク行）実測で再調整（2026-09-02） */

.p-contact__form {
	border-top: 0.125rem solid #e3e7ec;
	border-top: 0.125rem solid var(--bg-gray);
	margin-top: 10.625rem;
	padding-top: 3.0625rem;
}

.p-contact__form-head {
	display: grid;
	grid-template-columns: 22.6875rem minmax(0, 1fr);
}

.p-contact__form-label {
	color: #000;
	color: var(--black);
	font-size: 1.375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	line-height: 1;
}

/* PCは見出し列だけ6px下げる（カンプは本文の1行目が見出しより上から始まる） */

.p-contact__form-title {
	padding-top: 0.375rem;
}

.p-contact__form-note {
	color: #f50202;
	color: var(--required);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	line-height: 1.3333333333;
	margin-top: 1.1875rem;
}

.p-contact__form-lead {
	color: #00182e;
	color: var(--form-lead);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2.3;
	text-align: justify;
}

/* PCの確認カンプ 7:8521 はリード文が入力時のまま3行。SPカンプ 7:4958 だけ確認用の一文に差し替わる */

.p-contact__form-lead-confirm {
	display: none;
}

/* カンプでは入力欄側だけ右カラムに寄る */

.p-contact__body {
	margin-left: 22.6875rem;
}

/* 同意チェックと確認ボタンはカンプ 7:11834 ではページ中央（右カラムの中央ではない） */

.p-contact__foot {
	margin-left: -22.6875rem;
}

.p-contact__types-block {
	margin-top: 5.5625rem;
}

.p-contact__label {
	color: #0a0a0a;
	color: var(--form-text);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

/* 印がラベルの行送り（20px）を押し広げないよう行高を持たせない */

.p-contact__required {
	color: #f50202;
	color: var(--required);
	display: inline-block;
	font-size: 0.9375rem;
	line-height: 1;
	margin-left: 0.3125rem;
}

.p-contact__types {
	grid-gap: 0.6875rem;
	display: grid;
	gap: 0.6875rem;
	margin-top: 1rem;
}

.p-contact__fields {
	grid-gap: 2.5rem;
	display: grid;
	gap: 2.5rem;
	margin-top: 4.75rem;
}

.p-contact__field {
	grid-gap: 0.625rem;
	display: grid;
	gap: 0.625rem;
}

.p-contact__input {
	background-color: rgba(227, 231, 236, 0.4);
	border: 0;
	border-radius: 0.3125rem;
	color: #0a0a0a;
	color: var(--form-text);
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-size: 0.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	height: 5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;
}

.p-contact__input::-moz-placeholder {
	color: #939393;
	color: var(--gray-border);
}

.p-contact__input::placeholder {
	color: #939393;
	color: var(--gray-border);
}

.p-contact__input:focus-visible {
	outline: 2px solid #009d85;
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.p-contact__input--textarea {
	display: block;
	height: 18.75rem;
	line-height: 1.9;
	padding-bottom: 1.5625rem;
	padding-top: 1.5625rem; /* 右下のリサイズハンドル（斜線）はカンプに無いので出さない */
	resize: none; /* カンプ 7:11930 / 7:3024 実測: プレースホルダは14px・行送り16.8（本文の1.9とは別） */
}

.p-contact__input--textarea::-moz-placeholder {
	line-height: 1.2;
}

.p-contact__input--textarea::placeholder {
	line-height: 1.2;
}

/* 個人情報保護方針 */

.p-contact__privacy-title {
	color: #003e53;
	color: var(--main);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.3333333333;
	margin-top: 6.3125rem;
}

.p-contact__privacy {
	border: 1px solid #000;
	border: 1px solid var(--black);
	height: 22.375rem;
	margin-top: 1.125rem; /* カンプの枠上端→見出しは28（SP19）で、1pxの罫線を含む */
	padding: 1.6875rem 2rem 1.875rem;
}

/* 見出しもスクロール領域の中に置いて、スクロールすると上に隠れるようにする。
   スクロールバー用の padding-right ぶんだけ右へ広げて、枠に対して中央に見えるようにする */

.p-contact__privacy-heading {
	color: #000;
	color: var(--black);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	line-height: 1.25;
	margin-bottom: 2.0625rem;
	margin-right: -3rem; /* SPカンプ 7:3026 実測: 枠に対して左右中央（PC 7:11916 は左寄せ） */
}

/* 全文はスクロールで読ませる（カンプ準拠） */

.p-contact__privacy-body {
	color: #000;
	color: var(--black);
	counter-reset: privacy-item;
	font-size: 0.8125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	height: 100%;
	letter-spacing: 0.05em;
	line-height: 1.6;
	overflow-y: auto;
	padding-right: 3rem; /* 方針ページの見出しも枠内では本文と同じ大きさに揃える */
}

.p-contact__privacy-body p,
.p-contact__privacy-body h2,
.p-contact__privacy-body h3,
.p-contact__privacy-body h4,
.p-contact__privacy-body ul {
	margin-top: 1.25rem;
}

.p-contact__privacy-body h2,
.p-contact__privacy-body h3,
.p-contact__privacy-body h4 {
	font-size: 0.8125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.6;
}

.p-contact__privacy-body { /* 方針ページ側は番号なし（カンプ 7:12128）だが、この枠内は通し番号つき（カンプ 7:11919） */ /* 見出しは本文とほぼ同じ大きさなので、条の切れ目は余白で見せる。
     方針ページ（カンプ 7:12128）の 段落28 : 見出し58 と同じ比率にした */
}

.p-contact__privacy-body h2 {
	counter-increment: privacy-item;
	margin-top: 2.5rem;
}

.p-contact__privacy-body h2::before {
	content: "（" counter(privacy-item, fullwidth-num) "）";
}

.p-contact__privacy-body > :first-child {
	margin-top: 0;
}

.p-contact__privacy-body a {
	-webkit-text-decoration: underline;
	color: #009d85;
	color: var(--accent);
	text-decoration: underline;
}

.p-contact__privacy-body { /* SPカンプ 7:3028 実測: 枠(327)に対して中身は 22..306。PCのようなスクロールバー用の余白は無い */
}

.p-contact__agree {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4.5625rem;
	width: -moz-fit-content;
	width: fit-content;
}

.p-contact__agree .c-form-check__text {
	color: #000;
	color: var(--black);
	font-size: 0.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.4285714286;
}

.p-contact__submit {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8.6875rem;
	padding: 0;
}

/* 入力エラーの欄は下地を濃くする（カンプ 7:11958 実測: #E3E7EC の塗り） */

.p-contact__input[aria-invalid=true] {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
}

/* 確認画面はページ下の余白もカンプが別（7:8521 = 205 / 7:4958 = 58）。
   入力画面（175 / 121）と兼用できないので、確認ビューが出ている間だけ切り替える */

.p-contact:has(.p-contact__form--confirm) {
	padding-bottom: 12.8125rem;
}

/* 確認画面（カンプ 7:8521 / 7:4958）。電話帯と罫線が無いぶん上に詰める */

.p-contact__form--confirm {
	border-top: 0;
	margin-top: 11.375rem;
	padding-top: 0;
}

/* SPカンプ 7:4958 では見出しを出さず、確認の一文だけを置く */

.p-contact__confirm {
	grid-gap: 3.3125rem;
	display: grid;
	gap: 3.3125rem; /* PCカンプ 7:8521 はリード文が3行のまま1件目が y=692。1行のリード（SP文言）でも同じ位置に置く */
	margin-top: 11.125rem; /* SPカンプ 7:4958 実測: 確認の一文の下82pxから1件目 */
}

.p-contact__confirm-row {
	grid-gap: 0.625rem;
	display: grid;
	gap: 0.625rem;
}

/* カンプ 7:8521 実測: 見出しは16px Bold のグレー（SPは15px） */

.p-contact__confirm-label {
	color: #939393;
	color: var(--gray-border);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

/* カンプ 7:8521 実測: #F4F5F7・角丸5・高さ59（1行のとき）・左右30 */

.p-contact__confirm-value {
	align-items: center; /* 入力欄と同じ地色（--bg-gray 40% = カンプの #F4F5F7） */
	background-color: rgba(227, 231, 236, 0.4);
	border-radius: 0.3125rem;
	color: #0a0a0a;
	color: var(--form-text);
	display: flex;
	font-size: 1.0625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2.3529411765;
	min-height: 3.6875rem;
	padding: 0.59375rem 1.875rem;
}

/* カンプ 7:8521 実測: 罫線の下73pxにボタン2つ。SPは罫線なしで縦積み（送信が上） */

.p-contact__actions {
	align-items: center;
	border-top: 0.125rem solid #e3e7ec;
	border-top: 0.125rem solid var(--bg-gray);
	display: flex;
	gap: 5.15625rem;
	justify-content: center;
	margin-left: -22.6875rem; /* 罫線とボタンはページ幅（カンプ 7:8521 実測: 罫線 x=147〜1298・ボタン群の中心 720）。右カラム分を戻す */
	margin-top: 2.1875rem;
	padding-top: 4.5625rem;
}

.p-contact__send {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	padding: 0;
}

.p-contact__back {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	padding: 0;
}

/* ===== Contact Form 7 のマークアップに合わせるブリッジ =====
   CF7 は入力欄を span.wpcf7-form-control-wrap で包み、チェックボックスは
   span.wpcf7-list-item > label > input + span.wpcf7-list-item-label を出す。
   カンプの見た目はそのままに、CF7側の要素へ役割を割り当てる */

.p-contact__field .wpcf7-form-control-wrap {
	display: block;
}

/* お問い合わせ種別: 独自のボックス要素が無いので input 自体を四角に仕立てる */

.p-contact__types .wpcf7-checkbox {
	grid-gap: 0.6875rem;
	display: grid;
	gap: 0.6875rem;
}

.p-contact__types .wpcf7-list-item {
	margin: 0;
}

.p-contact__types .wpcf7-list-item label {
	align-items: center;
	cursor: pointer;
	display: inline-flex; /* カンプ 7:11834 / 7:2942 実測: 箱18の右端から文字まで11 */
	gap: 0.6875rem;
}

/* _reset.scss は input[type=checkbox] を opacity:0・position:absolute・pointer-events:none で隠している。
   ここでは input 自体を箱として見せるので、その3つを全部戻す */

.p-contact__types input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	background-color: var(--white);
	border: 1px solid #000;
	border: 1px solid var(--black);
	cursor: pointer;
	display: block;
	flex-shrink: 0;
	height: 1.125rem;
	opacity: 1;
	pointer-events: auto;
	position: relative;
	transition: background-color 0.2s ease;
	width: 1.125rem;
}

.p-contact__types input[type=checkbox]::before {
	border-bottom: 2px solid #fff;
	border-bottom: 2px solid var(--white);
	border-right: 2px solid #fff;
	border-right: 2px solid var(--white);
	content: "";
	height: 0.625rem;
	left: 0.3125rem;
	opacity: 0;
	position: absolute;
	top: 0.125rem;
	transform: rotate(45deg);
	width: 0.375rem;
}

.p-contact__types input[type=checkbox]:checked {
	background-color: #009d85;
	background-color: var(--accent);
	border-color: #009d85;
	border-color: var(--accent);
}

.p-contact__types input[type=checkbox]:checked::before {
	opacity: 1;
}

.p-contact__types input[type=checkbox]:focus-visible {
	outline: 2px solid #009d85;
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.p-contact__types .wpcf7-list-item-label {
	color: #000;
	color: var(--black);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 2;
}

/* 同意: CF7 が label と span.wpcf7-list-item-label を挟むので、
   :checked の隣接ではなく :has() で塗りを切り替える */

.p-contact__agree .wpcf7-list-item {
	display: block;
	margin: 0;
}

.p-contact__agree .wpcf7-list-item label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.5625rem;
	justify-content: center;
}

/* 未同意のエラー（カンプに指示は無い。欄の下に中央で出す） */

.p-contact__agree .wpcf7-not-valid-tip {
	text-align: center;
	white-space: nowrap;
}

.p-contact__agree .wpcf7-list-item-label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5625rem;
}

.p-contact__agree .wpcf7-list-item:has(.c-form-check__input:checked) .c-form-check__box {
	background-color: #009d85;
	background-color: var(--accent);
	border-color: #009d85;
	border-color: var(--accent);
}

.p-contact__agree .wpcf7-list-item:has(.c-form-check__input:checked) .c-form-check__box::before {
	opacity: 1;
}

/* エラー表示（カンプ 7:492 / 7:11958 と同じ見た目） */

.p-contact__body .wpcf7-not-valid-tip {
	color: #f50202;
	color: var(--required);
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.5384615385;
	margin-top: 0.625rem;
}

.p-contact__input.wpcf7-not-valid {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
}

/* 送信できなかったときの通知 */

.p-contact__body .wpcf7-response-output {
	border: none;
	color: #f50202;
	color: var(--required);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.6;
	margin: 2.5rem 0 0;
	padding: 0;
	text-align: center;
}

/* 送信ボタンは CF7 が input[type=submit] を出すので、矢印は包んだ span 側で描く */

.p-contact__send {
	position: relative;
}

/* input[type=submit] は色・字間・フォントを継承しない（UAの buttontext と :disabled の薄い色になる）ので包み側から継承させる */

.p-contact__send-btn {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	padding: 0;
}

/* CF7 が送信ボタンの後ろに足すスピナー（24px＋左右24pxの余白）が矢印との間に入るので出さない */

.p-contact__send .wpcf7-spinner {
	display: none;
}

/* 送信中は送信ボタンだけ薄くして二度押しを防ぐ（スピナーの代わりの状態表示）。
   ボタン群ごと止めると、送信が返ってこない時に「入力内容を修正する」まで押せなくなる */

.wpcf7-form.submitting .p-contact__send {
	opacity: 0.5;
	pointer-events: none;
}

/* display を持つ要素は hidden 属性だけでは消えないので、この中では優先させる
   （電話ボックスは display:flex・入力/確認ビューの出し分けにも使う） */

.p-contact [hidden] {
	display: none;
}

/* カンプ 7:13596 / 7:2172 はページ地が白（グレーはフッターだけ） */

.p-insights-archive {
	padding-bottom: 10.1875rem;
	padding-top: 6.875rem;
}

/* カンプ 7:13607/7:13609 実測: 写真148〜636.8 / 本文730〜1290（インナーより4px内側） */

.p-insights-archive__intro {
	display: flex;
	gap: 5.8125rem;
	margin-top: 5.6875rem;
	padding-left: 0.25rem;
}

/* カンプ 7:13607 の見える範囲だけを切り出した画像を敷く（PC/SPとも同じトリミング） */

.p-insights-archive__img {
	aspect-ratio: 489/327;
	border-radius: 0.6875rem;
	display: block;
	flex-shrink: 0;
	height: auto;
	overflow: hidden;
	width: 30.5625rem;
}

.p-insights-archive__img img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-insights-archive__img { /* SPカンプ 7:2172 実測: インナーの左端から幅286（右に41残す）。
     幅を固定すると 600〜767 で画像だけ小さく取り残されるため、残り幅で表現する */
}

.p-insights-archive__text {
	color: #003e53;
	color: var(--main);
	flex-shrink: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.15;
	max-width: 35rem;
	padding-top: 0;
	text-align: justify;
	width: 100%; /* SPは幅を固定せず内側に合わせる。カンプ 7:2399 の239pxは下限として残す */
}

.p-insights-archive__filter {
	margin-top: 10.3125rem;
}

.p-insights-archive__list {
	grid-gap: 7rem 2.9375rem;
	display: grid;
	gap: 7rem 2.9375rem;
	grid-template-columns: repeat(3, 17.9375rem);
	justify-content: center;
	margin-top: 4.75rem; /* SPカンプ 7:2172 実測: 1カラムでインナーの左右20px内側（375時に287px）。
     幅を固定すると 600〜767 でカードだけ細く取り残されるため、内側の余白で表現する */
}

.p-insights-archive__pagination {
	margin-top: 10.5rem;
}

/* カンプ 7:13636 はタイトル2行ぶん（カード高さ271）。お知らせ一覧は3行なのでここだけ上書きする */

.p-insights-archive .c-post-card__title {
	-webkit-line-clamp: 2;
	min-height: 3.125rem;
}

.p-insights-archive__empty {
	color: #003e53;
	color: var(--main);
	margin-top: 5rem;
	text-align: center;
}

/* 記事末尾の執筆者プロフィール */

.p-insights-author {
	border-bottom: 1px solid #e3e7ec;
	border-bottom: 1px solid var(--bg-gray); /* カンプ 7:11224 / 7:11223 実測: 上下の線は #e3e7ec（--bg-gray）。--gray より薄い */
	border-top: 1px solid #e3e7ec;
	border-top: 1px solid var(--bg-gray);
	margin-left: auto;
	margin-right: auto;
	margin-top: 5.3125rem;
	max-width: 59.625rem;
	padding-bottom: 2.1875rem;
	padding-top: 2.1875rem;
	width: 100%; /* SPカンプ 2137:16263 / 7:3600-3610 実測: 上の線から執筆タグまで25・氏名の下から下の線まで28 */
}

/* カンプ 7:11230 実測: チップではなく三角マーカー＋アクセント色の文字 */

.p-insights-author__tag {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.4285714286;
	padding-left: 1rem;
	position: relative;
}

.p-insights-author__tag::before {
	background-color: currentcolor;
	clip-path: polygon(100% 0, 0 29%, 22% 100%);
	content: "";
	height: 0.5rem;
	left: 0;
	position: absolute;
	top: 0.375rem;
	width: 0.625rem;
}

.p-insights-author__body {
	display: flex;
	gap: 3.75rem;
	margin-top: -1.25rem;
	padding-left: 5.9375rem; /* SPカンプ実測: 写真は幅64（左端そろえ）、テキスト列は x=91 なので間は27。
     ブロックの先頭（執筆タグの下端）から所属までが23 */
}

.p-insights-author__img {
	-o-object-fit: cover;
	aspect-ratio: 168/207;
	height: auto;
	object-fit: cover;
	width: 10.5rem; /* SPカンプ 7:3603 実測: 64×79。テキスト列より3px下から始まる */
}

.p-insights-author__info {
	padding-top: 2.6875rem;
}

/* カンプ 7:11228 / 7:11229 / 7:11225 実測 */

.p-insights-author__org {
	color: #009d85;
	color: var(--accent);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	line-height: 2;
}

.p-insights-author__org {
	font-feature-settings: "palt";
}

.p-insights-author__role {
	color: #005d79;
	color: var(--blue);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	line-height: 1.3;
}

.p-insights-author__name {
	color: #003e53;
	color: var(--main);
	font-size: 1.3125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.1em;
	line-height: 2;
	margin-top: 2rem;
}

/* お知らせは一覧・カテゴリ・詳細とも、セクションの外（オーバースクロール時の地色含む）まで --bg-gray */

body.post-type-archive-news,
body.tax-news_cat,
body.single-news {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
}

/* 一覧の下地はページ全体が --bg-gray */

.p-news-archive {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	padding-bottom: 10.1875rem;
	padding-top: 3.5rem;
}

.p-news-list {
	grid-gap: 5.1875rem 2.9375rem;
	display: grid;
	gap: 5.1875rem 2.9375rem;
	grid-template-columns: repeat(3, 17.9375rem);
	justify-content: center;
	margin-top: 5rem; /* SPカンプ 7:1609 実測: 1カラムでインナーの左右20px内側（375時に287px）。
     幅を固定すると 600〜767 でカードだけ細く取り残されるため、内側の余白で表現する */
}

/* カンプ 7:10970 実測: カード列の下端2160 → ページャ上端2322 = 162 */

.p-news-archive__pagination {
	margin-top: 10.125rem;
}

.p-news-archive__empty {
	color: #003e53;
	color: var(--main);
	margin-top: 5rem;
	text-align: center;
}

.p-news-filter {
	display: flex;
	gap: 1.4375rem;
	margin-left: 6.4375rem;
}

.p-news-filter__label {
	color: #005d79;
	color: var(--blue);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.875rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	line-height: 2;
	padding-left: 1rem;
	position: relative;
}

.p-news-filter__label::before {
	background-color: #009d85;
	background-color: var(--accent);
	border-radius: 50%;
	content: "";
	height: 0.625rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.625rem;
}

.p-news-filter__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #e3e7ec;
	background-color: var(--bg-gray); /* カンプ 7:10940 の矢印そのもの（線のシェブロン。塗りの三角ではない）。
     select は appearance:none + background-image でしか矢印を置けず、data URI 内では
     CSS変数が使えないため、色は --main と同じ #003E53 を直接持つ */
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%3E%3Cpath%20d='M9.24896%200.751167L5%205.00013L0.751038%200.751166'%20stroke='%23003E53'%20stroke-width='1.06224'%20stroke-linecap='square'/%3E%3C/svg%3E");
	background-position: right 0.625rem center;
	background-repeat: no-repeat;
	background-size: 0.625rem 0.375rem;
	border: none;
	border-radius: 0.3125rem;
	color: #003e53;
	color: var(--main);
	cursor: pointer;
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	height: 2.25rem;
	line-height: 2;
	margin-top: 0.375rem;
	padding-left: 1.0625rem;
	padding-right: 1.875rem;
	width: 9.5rem;
}

/* カンプ 7:10932 / 7:1807 実測: お知らせだけセレクトの地が白（ヒント 7:13616・社員紹介 7:10539 は --bg-gray） */

.p-news-archive .p-news-filter__select {
	background-color: #fff;
	background-color: var(--white);
}

/* 写真＋アクセント色の半透過オーバーレイの帯（カンプ準拠） */

.p-news-hero {
	height: 27.0625rem;
	margin-top: 0.625rem;
	overflow: hidden;
	position: relative;
}

.p-news-hero::before {
	background-image: url(../images/news-head.jpg);
	background-size: cover;
	content: "";
	height: 61rem;
	left: 0;
	position: absolute;
	top: -19.6875rem;
	width: 92.625rem;
}

.p-news-hero::after {
	background-color: rgba(0, 157, 133, 0.55);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-news-hero__inner { /* カンプ 7:10550 / 7:1608 実測: 帯の上端（PC y=88 / SP y=64）からENラベルまで PC188 / SP63 */
	padding-top: 11.75rem;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* カンプ 7:10547 実測: PCはお知らせのページタイトルだけENとの間が8px（他ページは1px）。
   共通側は多数派の1pxのままにして、ここだけ上書きする。SPはカンプ 7:1604 が他ページと同じ5px */

.p-news-hero .c-page-title__ja {
	margin-top: 0.5rem;
}

.p-notfound {
	padding-bottom: 9.6875rem;
	padding-top: 9.75rem;
	text-align: center;
}

.p-notfound__title {
	color: #003e53;
	color: var(--main); /* カンプ 7:12196 / 7:3452 実測: Noto Serif JP Bold 60px・字間0.05em・行送り86.2（SPは40px / 57.5） */
	font-family: "Noto Serif JP", serif;
	font-family: var(--serif-font);
	font-size: 3.75rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.4366666667;
}

.p-notfound__text {
	color: #003e53;
	color: var(--main);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-top: 1.75rem; /* SPもPCと同じ15px */
}

.p-notfound__back {
	align-items: center;
	color: #003e53;
	color: var(--main);
	display: flex;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	gap: 1.125rem;
	margin-left: auto;
	margin-right: auto; /* カンプ 7:12198 / 7:3456 実測: 191×33（SPも同サイズ・文字は15px） */
	margin-top: 15.0625rem;
	width: -moz-fit-content;
	width: fit-content;
}

.p-notfound__back-icon {
	border: 1px solid #003e53;
	border: 1px solid var(--main);
	border-radius: 50%;
	color: #003e53;
	color: var(--main);
	height: 2.0625rem;
	position: relative;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	width: 2.0625rem; /* 矢印はカンプ書き出しのSVGをマスクして描く（線幅も原寸比で合う） */
}

.p-notfound__back-icon::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	content: "";
	height: 0.5393557813rem;
	left: 50%;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.7280109375rem;
}

/* 専用テンプレートを持たない固定ページの受け皿（page.php）。
   個人情報保護方針はカンプがあるので専用の _p-privacy.scss を使う */

.p-page {
	padding-bottom: 10.25rem;
	padding-top: 6.875rem;
}

.p-page__content {
	color: #003e53;
	color: var(--main);
	font-size: 0.9375rem;
	line-height: 1.9;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.75rem;
	max-width: 51.375rem;
	width: 100%;
}

.p-page__content h2 {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.1111111111;
	margin-top: 3.625rem;
}

.p-page__content h2 + p {
	margin-top: 1.125rem;
}

.p-page__content p + p {
	margin-top: 1.75rem;
}

.p-page__content a {
	-webkit-text-decoration: underline;
	color: #003e53;
	color: var(--main);
	text-decoration: underline;
	transition: color 0.3s ease;
}

/* カンプの「１．」は全角なので、リストのマーカーもそれに合わせる */

@counter-style privacy-number {
	system: numeric;
	symbols: "０" "１" "２" "３" "４" "５" "６" "７" "８" "９";
	suffix: "．";
}

.p-privacy {
	padding-bottom: 10.25rem;
	padding-top: 6.875rem;
}

/* カンプ 7:12119（PC）/ 7:3374（SP）: 本文15px・行送り1.9、リード文はBold */

.p-privacy__content {
	color: #003e53;
	color: var(--main);
	font-family: "Noto Sans JP", sans-serif;
	font-family: var(--base-font);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.9;
	margin-left: auto;
	margin-right: auto;
	margin-top: 13.9375rem;
	max-width: 51.375rem;
	text-align: justify;
	width: 100%;
}

.p-privacy__content h2 {
	background-color: #009d85;
	background-color: var(--accent);
	border-radius: 0.3125rem;
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.1111111111;
	margin-top: 3.625rem;
	padding: 0.625rem 1.25rem;
	text-align: left;
}

.p-privacy__content h2 ~ p,
.p-privacy__content h2 ~ ul,
.p-privacy__content h2 ~ ol {
	font-weight: 400;
	font-weight: var(--fw-regular);
}

.p-privacy__content h2 + p {
	margin-top: 1.125rem;
}

.p-privacy__content p + p {
	margin-top: 1.75rem;
}

.p-privacy__content { /* 記号付きの並びだけ ul / ol で組む（記号の無い並びは p のまま） */
}

.p-privacy__content ul,
.p-privacy__content ol {
	margin-top: 1.75rem;
}

.p-privacy__content ul {
	list-style: "・" inside;
}

.p-privacy__content ol {
	list-style: privacy-number inside;
}

.p-privacy__content ul + p,
.p-privacy__content ol + p {
	margin-top: 1.75rem;
}

.p-privacy__content { /* 外部リンクのアイコンは文末に続けて置く（inline-flex だと折り返しで離れる） */
}

.p-privacy__content a {
	color: #003e53;
	color: var(--main);
	transition: color 0.3s ease;
}

.p-privacy__content { /* リセットの a[href^="tel:"] { pointer-events: none } を打ち消す（同じ詳細度が必要） */
}

.p-privacy__content a[href^="tel:"] {
	pointer-events: auto;
}

.p-privacy__content a[target=_blank]::after {
	-webkit-mask-image: url(../images/icon-external.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	background-color: currentcolor;
	content: "";
	display: inline-block;
	height: 0.75rem;
	margin-left: 0.375rem;
	mask-image: url(../images/icon-external.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	vertical-align: -0.05em;
	width: 0.75rem;
}

/* カンプ実測: 白地。カードは --pale-blue、見出しは --blue */

.p-recruit-culture {
	background-color: #fff;
	background-color: var(--white);
	padding-bottom: 12.125rem;
	padding-top: 6.125rem; /* SPカンプ 7:2426 実測: 上63 / 下25 */
}

/* 見出しはインナーごとの先頭にあるため、写真帯の次のインナーで間隔を取る（カンプ実測 PC150 / SP83） */

.p-recruit-culture__band + .p-recruit-culture__inner {
	margin-top: 9.375rem;
}

/* 見出しの左位置は直下の .p-recruit-culture__cards と揃える（956 = カード463×2 + gap30）。
   カンプ(1440)では .p-recruit-data__head と同じ x=241 になる */

.p-recruit-culture__head {
	margin-left: calc((100% - 59.75rem) / 2);
}

.p-recruit-culture__en {
	color: #009d85;
	color: var(--accent); /* カンプ 7:11743 / 7:2429 実測: PC14px・行送り17 / SP12px・行送り15 */
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.875rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.2142857143;
}

.p-recruit-culture__ja {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin-top: 0.125rem;
}

/* カンプ実測: 463px の2列＋間隔30（1fr だと561pxになり本文の行数が減って高さが合わない） */

.p-recruit-culture__cards {
	grid-gap: 1.875rem;
	display: grid;
	gap: 1.875rem;
	grid-template-columns: repeat(2, 28.9375rem);
	justify-content: center;
	margin-top: 3.75rem;
}

/* カンプ 7:11747 / 7:2431 実測: PC 30/37 / SP 23/20 */

.p-recruit-culture__card {
	background-color: #e5eff2;
	background-color: var(--pale-blue);
	border-radius: 0.625rem;
	padding: 1.875rem 2.3125rem;
}

/* カンプ 7:11761 実測: 24px / 行送り30px / 字間0.05em */

.p-recruit-culture__card-title {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.5rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.25;
	text-align: center; /* カンプ 7:2433 実測: SPは22px / 行送り30px */
}

/* カンプ 7:11750 実測: 16px / Medium / 行送り34px（7行で238px）。SPは 14px / 27px・見出しから8px */

.p-recruit-culture__card-text {
	color: #003e53;
	color: var(--main);
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 2.125;
	margin-top: 0.9375rem;
	text-align: justify;
}

/* カンプ 7:11783「animation」: 465×331の写真を80間隔で上下互い違いに並べ、横に流す */

.p-recruit-culture__band {
	height: 30.1875rem;
	margin-top: 11.6875rem;
	overflow: hidden;
	padding-top: 1.875rem; /* SPカンプ 7:2602 実測: 高さ178・上29・前のカードから47 */
}

/* 送り幅はキーフレームからも参照するのでカスタムプロパティで持つ */

.p-recruit-culture__band-list {
	--band-gap: 5rem;
	animation: recruit-band 40s linear infinite;
	display: flex;
	gap: 5rem;
	gap: var(--band-gap);
	width: -moz-max-content;
	width: max-content;
}

.p-recruit-culture__band-item {
	flex-shrink: 0;
	width: 29.0625rem; /* カンプは1枚おきに92px下げている */
}

.p-recruit-culture__band-item:nth-child(even) {
	margin-top: 5.75rem;
}

.p-recruit-culture__band-item img {
	-o-object-fit: cover;
	border-radius: 0.5rem;
	height: 20.6875rem;
	object-fit: cover;
	width: 100%;
}

.p-recruit-culture__band-item { /* SPカンプ 7:2603〜 実測: 156×111・1枚おきに31px下げ */
}

/* 1セットぶん（幅の半分＋gapの半分）流し切って先頭に戻す */

/* カンプ実測: --accent の地で、上端330pxが楕円（半径986.5×330）の弧になっている。
   楕円は画面幅より広いので、要素をはみ出させず radial-gradient で描く。
   弧の外側（上部の左右）はヒーローと同じティール地が覗く。
   横半径は画面幅に対する比率で持つ（986.5 / 1440 = 68.51vw）。remのままだと
   1440超で弧が伸びず、画面端で弧が内側に入ってしまう */

.p-recruit-data { /* 弧の外側はヒーローの固定写真（帯を弧の高さぶん延ばしている）が透けるので地色を持たない */
	background-color: transparent;
	background-image: radial-gradient(ellipse 68.51vw 20.625rem at 50% 20.625rem, #009d85 99.7%, transparent 100%), linear-gradient(#009d85, #009d85);
	background-image: radial-gradient(ellipse 68.51vw 20.625rem at 50% 20.625rem, var(--accent) 99.7%, transparent 100%), linear-gradient(var(--accent), var(--accent));
	background-position: top center, bottom center;
	background-repeat: no-repeat;
	background-size: 100% 20.625rem, 100% calc(100% - 20.625rem);
	padding-bottom: 10.4375rem;
	padding-top: 14.625rem;
	position: relative; /* SPカンプ実測: 弧の上端はヒーロー写真の下端より48px上（1459）。見出しまで69・最後のカードから97 */
}

.p-recruit-data__title {
	color: #f2f2f2;
	color: var(--white-dim);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.5rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	position: relative;
	text-align: center;
}

/* インナーはpx上限(1202)で止まるのにグリッドはrem基準で縮むため、幅が狭まるほど
   中央寄せの余白が広がる。見出しはその余白と同じ量だけ下げて、直下のグリッドと左端を揃える
   （954 = カード461×2 + gap32） */

.p-recruit-data__head {
	margin-left: calc((100% - 59.625rem) / 2);
	margin-top: 4.25rem;
	position: relative;
}

/* カンプ 7:11740 実測: 14px / --blue（緑地の上でも白ではない） */

.p-recruit-data__en {
	color: #005d79;
	color: var(--blue);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.875rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
}

.p-recruit-data__ja {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	margin-top: 0.125rem;
}

/* カンプ 7:11581 実測: 461px の2列＋列間32、全体954をインナー内で中央寄せ */

.p-recruit-data__grid {
	grid-gap: 2rem;
	align-items: start;
	display: grid;
	gap: 2rem;
	grid-template-columns: 28.8125rem 28.8125rem;
	justify-content: center;
	margin-top: 5.125rem;
	position: relative;
}

/* minmax(0, 1fr) にしないと、中の nowrap な行の min-content に列が広げられてしまう
   （カンプはカード幅461px固定） */

.p-recruit-data__col {
	grid-gap: 2rem;
	align-content: start;
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

/* カード高さはカンプ実測（内容量ではなく設計値で決まっている） */

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(1) {
	min-height: 8.75rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(2) {
	min-height: 17.125rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(3) {
	min-height: 8.75rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(4) {
	min-height: 19.9375rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(5) {
	min-height: 7.625rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(6) {
	min-height: 7.625rem;
}

.p-recruit-data__col:last-child .p-recruit-data__card:nth-child(1) {
	min-height: 36.375rem;
}

.p-recruit-data__col:last-child .p-recruit-data__card:nth-child(2) {
	min-height: 41.1875rem;
}

/* カンプ実測: 白地にアクセント色1pxの枠（実装は塗りつぶしのグレーだった） */

.p-recruit-data__card {
	background-color: #fff;
	background-color: var(--white);
	border: 1px solid #009d85;
	border: 1px solid var(--accent);
	border-radius: 0.4375rem;
	padding: 0.625rem 2.0625rem 0.625rem 1.75rem;
	position: relative;
}

.p-recruit-data__card-title {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.1;
}

/* 数値だけのカードは見出しと数値を同じ行に置く（カンプ 7:11601 ほか） */

.p-recruit-data__card:has(.p-recruit-data__card-value) {
	align-items: flex-start;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

/* イラストを持つ数値カードは、見出しの下に数値を置く（カンプ 平均勤続年数） */

.p-recruit-data__card:has(.p-recruit-data__card-value):has(.p-recruit-data__card-illust) {
	align-items: stretch;
	flex-direction: column;
	justify-content: flex-start;
}

.p-recruit-data__card:has(.p-recruit-data__card-illust) .p-recruit-data__card-value {
	gap: 2.625rem;
	justify-content: flex-start;
	margin-top: auto;
}

/* 見出しの上位置はカードごとに違う（カンプ実測 L2 14 / L4 15 / R1 15 / R2 20。他は10） */

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(2) .p-recruit-data__card-title {
	margin-top: 0.1875rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(4) .p-recruit-data__card-title {
	margin-top: 0.25rem;
}

.p-recruit-data__col:last-child .p-recruit-data__card:nth-child(1) .p-recruit-data__card-title {
	margin-top: 0.25rem;
}

.p-recruit-data__col:last-child .p-recruit-data__card:nth-child(2) .p-recruit-data__card-title {
	margin-top: 0.5625rem;
}

/* 122pxのカードはカンプの上下余白が約9pxずつ（10だと高さが125になる） */

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(5),
.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(6) {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

/* カンプ 7:11607 実測: チーム規模は見出しが上のまま、数値だけカード下端に接する */

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(3) .p-recruit-data__card-value {
	align-self: flex-end;
	margin-bottom: -0.625rem;
}

/* カンプでは数値の行が下の余白を食ってカード下端まで届く（創業年） */

.p-recruit-data__card:has(.p-recruit-data__card-note--start) .p-recruit-data__card-value {
	margin-bottom: -0.625rem;
}

/* SPカンプ 7:2473 / 7:2481 実測: パートナー企業数・自己資本比率の数字はカードの中央に来る
   （カンプは数字の行の高さが75あり、87のカードに対して自然に中央になる）。
   実装は行の高さが62なので、上寄せのままだと3〜4px上に浮く */

/* 角にバッジが重なるカードは、見出しがバッジの下に来るよう下寄せにする */

.p-recruit-data__card:has(.p-recruit-data__card-note--start) {
	align-items: flex-end;
}

/* イラストは数値と重ならないよう、カード内の余白側に置く。
   歩く人は書き出したSVGが左右反転しているため、カンプと同じ右向きに戻す */

.p-recruit-data__card-illust--walk {
	bottom: auto;
	height: 9.5rem;
	left: auto;
	right: 3.6875rem;
	scale: -1 1;
	top: 5.6875rem;
}

.p-recruit-data__card-value {
	align-items: baseline;
	display: flex;
	gap: 1.125rem;
	justify-content: flex-end;
}

.p-recruit-data__card-label {
	color: #003e53;
	color: var(--main);
	font-size: 0.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	margin-right: auto;
}

/* 数字はMerriweather（yuki指定 / カンプ実測でもセリフ） */

.p-recruit-data__card-number {
	color: #005d79;
	color: var(--blue);
	font-family: "Merriweather", serif;
	font-family: var(--num-font);
	font-size: 5.1875rem;
	font-style: italic;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.24;
	white-space: nowrap;
}

.p-recruit-data__card-unit {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 2.3333333333;
}

/* 注記はカードの角に重なる薄グレーのピル（カンプ Rectangle 3240 ほか。地 --bg-gray / 文字 --main） */

.p-recruit-data__card-note {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	border: 1px solid #005d79;
	border: 1px solid var(--blue);
	color: #003e53;
	color: var(--main);
	font-family: "Noto Serif JP", serif;
	font-family: var(--serif-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	padding: 1.0625rem 1.6875rem;
	position: absolute;
	white-space: nowrap;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.p-recruit-data__card-note--start {
	left: -1.25rem;
	top: -1.0625rem; /* SPはカンプどおり画面の左端まで出す */
}

.p-recruit-data__card-note--end {
	right: -0.8125rem;
	top: 0.875rem;
}

/* カードのイラスト（カンプ Group 13961 / 13985 / 14084） */

.p-recruit-data__card-illust {
	position: absolute;
	width: auto;
}

.p-recruit-data__card-illust--ribbon {
	height: 7.8125rem;
	left: auto;
	right: 2.6875rem;
	top: 1.9375rem;
}

.p-recruit-data__card-illust--plant {
	bottom: 10.9375rem;
	height: 6.5625rem;
	right: 1.75rem;
}

/* 研修・育成制度カードの下部に置くバッジ（カンプ Rectangle 3309） */

.p-recruit-data__card-note--bottom {
	bottom: 2.4375rem;
	right: -1.375rem;
}

/* カンプ実測: 本文28px（見出しより大きい）/ 行送り53 / 色 --blue、行頭は --bg-gray の丸 */

.p-recruit-data__card-list {
	margin-top: 1.875rem;
}

.p-recruit-data__card-list small {
	font-size: 0.72em;
}

.p-recruit-data__card-list li {
	color: #005d79;
	color: var(--blue);
	font-size: 1.75rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.9;
	padding-left: 1.75rem;
	position: relative;
	white-space: nowrap;
}

.p-recruit-data__card-list li::before {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	border-radius: 50%;
	content: "";
	height: 0.875rem;
	left: 0;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 0.875rem;
}

/* 研修・育成制度のカードだけリストの行送りとインデントが広い（カンプ 7:11710） */

.p-recruit-data__card--training .p-recruit-data__card-list {
	margin-top: 5.1875rem;
}

/* 項目を増やしてもカード下端のバッジと重ならないよう、バッジぶんの余白を先に確保する */

.p-recruit-data__card--training:has(.p-recruit-data__card-note--bottom) .p-recruit-data__card-list {
	padding-bottom: 6.1875rem;
}

.p-recruit-data__card--training .p-recruit-data__card-list li {
	line-height: 2.21;
	padding-left: 2.3125rem;
}

/* 年齢構成の横棒グラフ。カンプ 7:11613 ほかの実測に合わせて平均年齢の行を下げる */

.p-recruit-data__average {
	align-items: baseline;
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 0.6875rem;
}

/* 平均年齢の数字はカード数値より小さい（カンプ実測 PC38 / SP28）。太さもRegular */

.p-recruit-data__average .p-recruit-data__card-number {
	font-size: 2.375rem;
	font-weight: 400;
	font-weight: var(--fw-regular);
}

/* カンプ 7:11615 実測: --accent の18px Regular・行送り42px。数値との間は24px */

.p-recruit-data__average-label {
	color: #009d85;
	color: var(--accent);
	font-size: 1.125rem;
	font-weight: 400;
	font-weight: var(--fw-regular);
	line-height: 2.3333333333;
	margin-right: 1rem;
}

/* カンプ 7:11622 実測: 平均年齢の行から10pxで最初の年代行が始まる */

.p-recruit-data__chart {
	display: grid;
	margin-top: 0.625rem;
}

/* 数値は折り返さない（列幅を461に詰めた際に「%」だけ折れていた） */

/* カンプ実測: 棒グラフではなく「年代 / 数値 / 人物アイコン」の3列 */

.p-recruit-data__bar-row {
	grid-gap: 1.875rem;
	align-items: center;
	border-top: 1px solid #f1f3f5;
	border-top: 1px solid var(--line-pale);
	display: grid;
	gap: 1.875rem;
	grid-template-columns: 4.0625rem minmax(0, 1fr);
	min-height: 6.9375rem;
}

.p-recruit-data__bar-row:last-child {
	border-bottom: 1px solid #f1f3f5;
	border-bottom: 1px solid var(--line-pale);
}

.p-recruit-data__bar-label {
	color: #009d85;
	color: var(--accent);
	font-size: 1.4375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	padding-left: 0.875rem; /* 「20代」は65pxの列にちょうど収まる幅なので、字間を足した拍子に折り返さないよう固定する */
	white-space: nowrap;
}

/* カンプ実測: %とアイコンの間は30px */

.p-recruit-data__bar-body {
	align-items: baseline;
	display: flex;
	gap: 1.875rem;
	justify-content: flex-end;
}

.p-recruit-data__bar-value {
	color: #005d79;
	color: var(--blue);
	font-family: "Merriweather", serif;
	font-family: var(--num-font);
	font-size: 3.875rem;
	font-style: italic;
	font-weight: 400;
	font-weight: var(--fw-regular);
	white-space: nowrap; /* カンプ 7:11622/7:11631 実測: 数値と%の間は7.5px空く */
}

.p-recruit-data__bar-value small {
	font-size: 1.25rem;
	margin-left: 0.46875rem;
}

/* カンプ 7:11616 実測: アイコンは行の中央（数値のベースライン基準ではない） */

.p-recruit-data__bar-icon {
	align-self: center;
	height: auto;
	margin-right: 0.9375rem;
	width: 3.0625rem;
}

/* カンプ 7:11696 / 7:11694 は「TOP GUN AWARD（社内表彰制度）」の行だけ
   カードの右端いっぱいまで使う（右のパディングを打ち消す） */

.p-recruit-data__card-list:has(small) {
	margin-right: -2.0625rem;
}

/* SPは1カラム。カンプ 7:2417 の並び順に合わせるため、列をcontents化して order で並べ替える */

/* 「働く環境を知る」の段階的な出現（指定の順番: 白背景 → 項目名(緑) → 数字(青)・イラスト）。
   グループ1（創業年・平均勤続年数・チーム規模・平均年齢層）と
   グループ2（社内イベント・パートナー企業数・自己資本比率・研修育成）で分けて出す */

.js-data-card {
	opacity: 0;
	translate: 0 2.5rem;
}

.js-data-card.is-visible {
	opacity: 1;
	transition: opacity 0.7s ease-out, translate 0.7s ease-out;
	transition-delay: 0s;
	transition-delay: var(--card-delay, 0s);
	translate: 0 0;
}

/* 中身は枠が出てから。項目名 → 数字・イラストの順に続く */

.js-data-card .p-recruit-data__card-title,
.js-data-card .p-recruit-data__card-value,
.js-data-card .p-recruit-data__card-list,
.js-data-card .p-recruit-data__card-illust,
.js-data-card .p-recruit-data__card-note,
.js-data-card .p-recruit-data__average,
.js-data-card .p-recruit-data__chart {
	opacity: 0;
	translate: 0 0.75rem;
}

.js-data-card.is-visible .p-recruit-data__card-title {
	opacity: 1;
	transition: opacity 0.5s ease-out, translate 0.5s ease-out;
	transition-delay: calc(0s + 0.35s);
	transition-delay: calc(var(--card-delay, 0s) + 0.35s);
	translate: 0 0;
}

.js-data-card.is-visible .p-recruit-data__card-value,
.js-data-card.is-visible .p-recruit-data__card-list,
.js-data-card.is-visible .p-recruit-data__card-illust,
.js-data-card.is-visible .p-recruit-data__card-note,
.js-data-card.is-visible .p-recruit-data__average,
.js-data-card.is-visible .p-recruit-data__chart {
	opacity: 1;
	transition: opacity 0.6s ease-out, translate 0.6s ease-out;
	transition-delay: calc(0s + 0.65s);
	transition-delay: calc(var(--card-delay, 0s) + 0.65s);
	translate: 0 0;
}

/* 動きを抑える設定のときは最初から出しておく */

/* カンプ 7:11586 / 7:2423 実測: 地は #002432（--navy-deep）。SPは上52 / 下54 */

.p-recruit-entry {
	background-color: #002432;
	background-color: var(--navy-deep);
	padding-bottom: 5.8125rem;
	padding-top: 5.8125rem;
}

.p-recruit-entry__inner {
	grid-gap: 2rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 35rem);
	justify-content: center;
}

/* カンプ 7:11763 / 7:11773: 背景写真に --main を約60%重ね、文字は左寄せ・右端に白い丸矢印 */

.p-recruit-entry__card {
	align-items: center;
	border-radius: 0.5rem;
	color: #fff;
	color: var(--white);
	display: flex;
	gap: 1.25rem;
	justify-content: space-between;
	min-height: 18.1875rem;
	overflow: hidden;
	padding-left: 2.1875rem;
	padding-right: 2.125rem;
	position: relative;
}

.p-recruit-entry__card::after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-recruit-entry__card { /* SPカンプ 7:2447 実測: 高さ169・左21・右20・角丸10 */
}

/* カンプ実測: マイナビは --blue、Instagramは --accent を60%重ねている */

.p-recruit-entry__card--blue::after {
	background-color: rgba(0, 93, 121, 0.6);
}

.p-recruit-entry__card--accent::after {
	background-color: rgba(0, 157, 133, 0.6);
}

.p-recruit-entry__card-img {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-recruit-entry__card-img img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover; /* 拡大率・速度は .c-cta-contact と揃える */
	transition: scale 0.4s ease;
	width: 100%;
}

.p-recruit-entry__card-title {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.9;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* Instagram カード（カンプ 7:11777 / 7:2596）: 「Instagram」は欧文ボールド26px・字間0.05em・行送り1.8、
   サブ文は Zen Kaku Medium 26px（SPは 18px / 13px・行送り1.9）。Avenir Next は --avenir-font（Mac/iOS はそのまま・他は Nunito Sans） */

.p-recruit-entry__card--accent .p-recruit-entry__card-title {
	font-family: "Avenir", "Avenir Next", "Nunito Sans", sans-serif;
	font-family: var(--avenir-font);
	letter-spacing: 0.05em;
	line-height: 1.75;
}

/* SPカンプ 7:2593 実測: Instagram カードだけ176（マイナビは169） */

.p-recruit-entry__card-sub {
	display: block;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0;
}

/* 白い丸矢印（カンプ Group 14085 = 33px の c-link-arrow__icon） */

.p-recruit-entry__card-icon {
	color: #fff;
	color: var(--white);
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* カンプ 7:11582: 上部836pxは全幅写真に --blue を約80%重ね、その上の文字は白 */

.p-recruit-hero { /* カンプ実測 #337D94 = --blue 80% を白に重ねた色。写真帯も同じ重ね方。
     ヘッダーが乗る上端78pxはカンプでは白なので、グラデーションで塗り分ける */
	background-image: linear-gradient(to bottom, #fff 78px, rgb(51, 125, 148) 78px);
	margin-top: calc(78px * -1);
	margin-top: calc(var(--header-height) * -1);
	padding-bottom: 0rem;
	padding-top: calc(78px + 6.875rem);
	padding-top: calc(var(--header-height) + 6.875rem);
	position: relative; /* SPカンプ 7:2417 はヘッダーの下も含めて全面ティール（白帯が無い） */
}

.p-recruit-hero__dark {
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 78px;
	top: var(--header-height);
}

/* カンプ 7:11582 のプロトタイプ指定（Frame 14810 が STICKY_SCROLLS）。
   帯を clip-path で切り抜き、中の写真は position:fixed で止める（service と同じ作り）。
   止めた写真が見える範囲は写真の高さ（836）ではなく、ティール地が続く範囲全部。
   プロトタイプでは写真の上を青の面（Rectangle 3219・1861px）が流れるので、
   写真帯の下の淡い青の部分も、データの弧の外側（角）も写真が透ける */

.p-recruit-hero__bg {
	--hero-h: 52.25rem;
	--hero-top: var(--header-height);
	bottom: calc(20.625rem * -1);
	clip-path: inset(0);
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 78px;
	top: var(--hero-top);
}

.p-recruit-hero__bg::after {
	background-color: rgba(0, 93, 121, 0.8);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-recruit-hero__bg img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-recruit-hero__bg-inner { /* 帯が写真より長くなったぶん、画面いっぱいまで写真を敷く。
     上端はヘッダーの下ではなく画面の上端から。スクロールしてヘッダーが引っ込んだあと、
     その高さぶんだけ写真の無い平らな帯が見えてしまうため（service と同じ） */
	height: max(var(--hero-h) + var(--hero-top), 100vh);
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
}

/* 写真に重なる範囲の文字は白（RECRUITラベルはアクセント色のまま） */

.p-recruit-hero .c-page-title__ja {
	color: #fff;
	color: var(--white);
}

.p-recruit-hero__inner { /* カンプでは緑のカーブが1774から始まるので、ヒーローはそこで終える */
	min-height: 99.125rem;
	padding-bottom: 3.75rem;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise); /* SPカンプ 7:2456: 緑の弧（データ）が写真の下端に47px被さるので、ヒーロー側に下余白は持たない */
}

.p-recruit-hero__img {
	border-radius: 0.5rem;
	display: block;
	overflow: hidden;
	position: relative;
}

.p-recruit-hero__img img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* カンプ 7:8187 / 7:8198 は2枚のバリアントを持つ。重ねて交互にふわっと入れ替える */

.p-recruit-hero__photo {
	bottom: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 3s ease-out;
}

.p-recruit-hero__photo.is-current {
	opacity: 1;
}

/* 動きを抑える設定のときは1枚目のまま止める */

.p-recruit-hero__img--01 {
	aspect-ratio: 412/554;
	height: auto;
	left: 1.25rem; /* 絶対配置の基準はインナーのpadding-box（左端119px）。カンプ 7:11592 は x=139 / y=394 */
	position: absolute;
	top: 12.875rem;
	width: 25.75rem;
}

.p-recruit-hero__text {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.3;
	margin-left: 37rem;
	margin-top: 12.375rem;
	max-width: 30.8125rem;
	text-align: justify;
	width: 100%;
}

.p-recruit-hero__text p + p {
	margin-top: 5rem;
}

.p-recruit-hero__text { /* カンプ 7:2588 実測: インナー327に対して幅263・左64（＝右端そろえ）。
     600〜767 でも同じ比率になるよう % で持つ */
}

.p-recruit-hero__catch {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.5rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	left: max(-0.5625rem, 1.5625rem - (100vw - 100%) / 2);
	left: max(-0.5625rem, var(--padding-pc) - (100vw - 100%) / 2);
	letter-spacing: 0.03em;
	line-height: 1.35; /* カンプ 7:11595 は x=110 / y=869。
     インナーは1202pxで頭打ちになるため、そのままだと1202px以下で左が画面外に出る。
     インナーの左端（padding-pc）まで来たらそこで止める */
	position: absolute;
	top: 42.5625rem; /* カンプ 7:2424 実測: SPは24px / 行送り38px / 字間0.03em */
}

.p-recruit-hero__img--02 {
	aspect-ratio: 529/377;
	height: auto;
	left: 34.3125rem; /* カンプ 7:11734 は x=668 / y=1204 */
	position: absolute;
	top: 63.5rem;
	width: 33.0625rem;
}

.p-recruit-hero__img--03 {
	aspect-ratio: 325/458;
	height: auto;
	left: 7.75rem; /* カンプ 7:11736 は x=243 / y=1481 */
	position: absolute;
	top: 80.8125rem;
	width: 20.3125rem;
}

/* ページ全体が薄いグレー地。ヒーローはヘッダー下まで回り込む（カンプ準拠） */

.p-service-detail {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	margin-top: calc(78px * -1);
	margin-top: calc(var(--header-height) * -1); /* ポイント背景の白い楕円が画面幅を超えるため横だけ切る */
	overflow-x: clip;
}

/* ヒーロー（中央寄せ） */

.p-service-detail__hero {
	padding-bottom: 9.125rem;
	padding-top: calc(78px + 2.25rem);
	padding-top: calc(var(--header-height) + 2.25rem);
	text-align: center;
}

.p-service-detail__en {
	color: #005d79;
	color: var(--blue);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.9375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1rem;
}

.p-service-detail__lead {
	color: #005d79;
	color: var(--blue);
	font-family: "Noto Serif JP", serif;
	font-family: var(--serif-font);
	font-size: 1.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: -0.03em;
	line-height: 2;
	margin-top: 2.4375rem;
}

.p-service-detail__title {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 3.4375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.45;
	margin-top: -0.9375rem;
}

.p-service-detail__illust {
	margin-top: 3.6875rem;
}

.p-service-detail__illust img {
	height: 10.625rem;
	margin-left: auto;
	margin-right: auto;
	width: auto;
}

/* カンプの改行位置に合わせるため幅は個別指定（--desc-w） */

.p-service-detail__desc {
	-webkit-text-decoration: underline;
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	line-height: 1.9;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.25rem;
	text-decoration: underline;
	text-decoration-color: #d3d8de;
	text-decoration-color: var(--gray-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.375rem;
	width: calc(var(--desc-w) * 0.0625rem);
}

.p-service-detail__note {
	background-color: #fff;
	background-color: var(--white);
	border-radius: 0.3125rem;
	color: #005d79;
	color: var(--blue);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2.5rem;
	max-width: 100%;
	padding: 0.75rem 1.4375rem;
	width: calc(var(--note-w) * 0.0625rem);
}

/* よくあるお悩み（全幅の濃紺帯。下端は白い楕円で削る） */

.p-service-detail__worries {
	background-color: #005d79;
	background-color: var(--blue);
	padding-bottom: 12.1875rem;
	padding-top: 7.3125rem;
	position: relative;
}

/* 帯の左上に掛かる吹き出し。1440以下は画面左端に付き、
   それより広い画面では1440基準の位置で止める（画面端に付いていかない） */

.p-service-detail__bubble {
	background-color: #fff;
	background-color: var(--white);
	border-radius: 0 0.4375rem 0.4375rem 0;
	left: calc(50% - 45rem);
	max-width: 24.125rem;
	padding: 1.0625rem 1.9375rem 1.1875rem;
	position: absolute;
	top: -3.4375rem;
	width: 100%;
}

.p-service-detail__bubble::after {
	background-color: #fff;
	background-color: var(--white);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	content: "";
	height: 1.5625rem;
	left: 2rem;
	position: absolute;
	top: calc(100% - 0.25rem);
	width: 1.6875rem;
}

.p-service-detail__bubble-tag {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.55;
}

.p-service-detail__bubble-lead {
	color: #005d79;
	color: var(--blue);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.8;
}

.p-service-detail__worry-list {
	grid-gap: 1.3125rem;
	display: grid;
	gap: 1.3125rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 45.5rem;
	width: 100%;
}

.p-service-detail__worry {
	color: #fff;
	color: var(--white);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.9;
	padding-left: 1.5rem;
	position: relative;
	text-align: justify;
}

.p-service-detail__worry::before {
	background-color: #fff;
	background-color: var(--white);
	border-radius: 50%;
	content: "";
	height: 0.375rem;
	left: 0.4375rem;
	position: absolute;
	top: 0.875rem;
	width: 0.375rem;
}

/* 安心ポイント（濃紺帯へ食い込む白い楕円の上に載る） */

.p-service-detail__points {
	padding-bottom: 15.6875rem;
	position: relative; /* 楕円の幅は画面幅に対する比率で持つ。remのままだと1440超で伸びなくなり、
     画面端の白が痩せて「画面いっぱいじゃない」ように見える（2569 / 1440 = 178.4vw）。
     高さを固定するとポイント件数が増えた時に本文が白からはみ出すため、
     下端はセクションからの距離で持つ（4件では従来と同じ1083pxになる） */
}

.p-service-detail__points::before {
	background-color: #fff;
	background-color: var(--white);
	border-radius: 50%/32.1875rem;
	bottom: 7rem;
	content: "";
	left: 50%;
	position: absolute;
	top: -5rem;
	transform: translateX(-50%);
	width: 178.4vw;
}

.p-service-detail__points-inner {
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.p-service-detail__points-head {
	margin-top: -0.75rem;
	text-align: center;
}

.p-service-detail__points-icon {
	height: 4.1875rem;
	margin-left: auto;
	margin-right: auto;
	width: 3.375rem;
}

.p-service-detail__points-title {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	line-height: 1.4230769231;
	margin-top: 1rem;
}

.p-service-detail__point-list {
	border-bottom: 1px solid #e3e7ec;
	border-bottom: 1px solid var(--bg-gray);
	margin-left: auto;
	margin-right: auto;
	margin-top: 2.875rem;
	max-width: 51.375rem;
	width: 100%;
}

.p-service-detail__point {
	border-top: 1px solid #e3e7ec;
	border-top: 1px solid var(--bg-gray);
	padding-bottom: 2.125rem;
	padding-top: 0.25rem;
}

.p-service-detail__point-num {
	color: #005d79;
	color: var(--blue);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.875rem;
	font-style: italic;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	line-height: 2.1428571429;
}

.p-service-detail__point-title {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.3125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.4285714286;
	margin-top: 1.25rem;
	text-align: justify;
}

.p-service-detail__point-text {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.9;
	margin-top: 0.5rem;
	text-align: justify;
}

/* ご相談の流れ */

.p-service-detail__flow {
	padding-bottom: 5.875rem;
}

.p-service-detail__flow-title {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.1;
	position: relative;
	text-align: center;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* カンプではインナーより左右31px広い（見出しが上端に重なる） */

.p-service-detail__flow-box {
	background-color: #fff;
	background-color: var(--white);
	border-radius: 0.625rem;
	margin-left: -1.9375rem;
	margin-right: -1.9375rem;
	margin-top: -0.875rem;
	padding: 4.375rem 0 3.875rem;
}

.p-service-detail__flow-list {
	--flow-gap: 2.1875rem;
	--flow-step: 11.4375rem;
	grid-gap: 2.1875rem;
	grid-gap: var(--flow-gap);
	display: grid;
	gap: 2.1875rem;
	gap: var(--flow-gap); /* カンプ 7:12205 実測: ステップ枠は183×95の等幅（列幅を内容任せにすると文字幅に縮む） */
	grid-auto-columns: 11.4375rem;
	grid-auto-columns: var(--flow-step);
	grid-auto-flow: column;
	justify-content: center;
	position: relative;
}

.p-service-detail__flow-list--compact {
	--flow-gap: 2.0625rem;
	--flow-step: 10rem;
}

.p-service-detail__flow-step {
	display: grid;
	grid-template-rows: auto auto 1fr;
	justify-items: center;
	max-width: 11.4375rem;
	position: relative;
	width: 100%; /* 番号の下の丸 */
}

.p-service-detail__flow-step::before {
	background-color: #005d79;
	background-color: var(--blue);
	border-radius: 50%;
	content: "";
	height: 0.9375rem;
	margin-top: 0.375rem;
	width: 0.9375rem;
}

.p-service-detail__flow-step { /* 丸と丸をつなぐ線。自分の中心から次の丸の中心までしか伸ばさないので、
     01の左と最後の丸の右に線がはみ出さない（丸の中心は上から37px） */
}

.p-service-detail__flow-step::after {
	background-color: #005d79;
	background-color: var(--blue);
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	top: 2.3125rem;
	width: calc(100% + var(--flow-gap));
}

.p-service-detail__flow-step:last-child::after {
	content: none;
}

.p-service-detail__flow-step { /* SPは縦線（リストの::before）を上に出したいので、重ね順を上げない。
     カンプ 7:4363 はラベルを「丸の右〜チップ右端」の中央に置き、番号はその上に重なる */
}

.p-service-detail__flow-list--compact .p-service-detail__flow-step {
	max-width: 10rem;
	width: 100%; /* SPカンプ 7:4303 / 7:4598 実測: 6ステップでもチップは287（全幅）。
     PC用の160を打ち消さないと、6ステップのページだけSPで細くなる */
}

/* 6ステップは枠が狭いので文字を詰める */

.p-service-detail__flow-list--compact .p-service-detail__flow-label {
	padding-left: 0;
	padding-right: 0;
}

.p-service-detail__flow-num {
	color: #005d79;
	color: var(--blue);
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.05em;
	order: -1; /* SPはラベルと同じセルに置き、ラベルの上に重ねる */
}

.p-service-detail__flow-label {
	align-items: center;
	background-color: rgb(242, 250, 249);
	border-radius: 0.3125rem;
	color: #009d85;
	color: var(--accent);
	display: grid;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	justify-items: center; /* カンプ 7:12364 / 7:12825 実測: 2行になるラベルの行送りは25（枠は95固定）。
     1行のカンプ値は33だが枠内で中央に置くので見た目は変わらない。
     33のままだと2行になった時だけ枠が106へ伸びて、同じ行の枠すべてが釣られて高くなる */
	line-height: 1.3888888889;
	margin-top: 1.875rem;
	min-height: 5.9375rem;
	padding: 1.25rem 0.625rem;
	place-items: center;
	text-align: center;
	width: 100%;
}

/* 補足付きのラベル（ヒアリング（現状確認・課題整理））。
   カンプは PC 26px送り / SP 16px送りで、枠の高さを変えずに2行へ収めている */

.p-service-detail__flow-label:has(small) {
	line-height: 1.4444444444;
}

/* ラベルの中身は1つの要素にまとめて通常の行として流す。
   グリッドの直下に置くと <br> と <small> が別々の行アイテムになり、
   改行の入り方（と枠の高さ）が通常のテキストと変わってしまう */

.p-service-detail__flow-label-text {
	display: block;
}

/* カンプ 7:12825 実測: 補足は1行（テキスト165 > チップ160 で、カンプ側も枠から数px出ている） */

.p-service-detail__flow-label small {
	font-size: 0.9375rem;
	line-height: 1.7333333333;
	white-space: nowrap;
}

/* カンプ 7:12504 / 7:3950 実測: チップと同じ緑（--accent）。18px Bold・行送り33 */

.p-service-detail__flow-note {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2.2;
	margin-top: 0.9375rem;
	text-align: center;
}

.p-service-detail__back {
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 11.5rem;
	width: -moz-fit-content;
	width: fit-content;
}

/* 上部に写真を敷き、ページ全面へ --blue 80% を重ねた濃色ページ（カンプ準拠） */

/* 写真の全幅はみ出しを横スクロールにしない */

.p-service {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	color: #fff;
	color: var(--white);
	margin-top: calc(78px * -1);
	margin-top: calc(var(--header-height) * -1);
	overflow-x: clip;
	padding-bottom: 21.5625rem;
	padding-top: calc(78px + 6.875rem);
	padding-top: calc(var(--header-height) + 6.875rem);
	position: relative;
}

.p-service::after {
	background-color: rgba(0, 93, 121, 0.8);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/* カンプ 7:10982 のプロトタイプ指定（スクロール中も位置を固定）を、セクション全体に敷く。
   background-attachment: fixed はモバイルで効かないので、セクションを clip-path で切り抜き、
   中の写真は position:fixed で置く。clip-path は fixed の包含ブロックを作らないため、
   写真はビューポート基準のまま .p-service の中だけに見える（Chromium / WebKit で実測）。 */

.p-service__hero { /* カンプ 1440 のヒーロー枠は 953px。中身は「固定pxのヘッダー + rem のコンテンツ」なので、
     高さも同じ内訳で持つ。rem(953) のままだと 768px に近づくほどヘッダー分だけ
     写真が足りなくなり、カードの下の余白が詰まって見える */
	--hero-h: calc(var(--header-height) + 54.6875rem);
	bottom: 0;
	clip-path: inset(0);
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-service__hero-img {
	background-image: url(../images/service-hero.jpg);
	background-position: center;
	background-size: cover;
	display: block; /* 上端はカンプの枠と同じ切り取り方にしたいので --hero-h を下限にし、
     画面が高い時だけ画面いっぱいまで伸ばす（dvh にすると cover の拡大率が変わってズームする） */
	height: max(var(--hero-h), 100vh);
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
}

.p-service__dark {
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.p-service__dark--01 {
	bottom: 66%;
	top: 0;
}

.p-service__dark--02 {
	bottom: 0;
	top: 42%;
}

.p-service__inner { /* 絶対配置の写真ぶんの高さを確保する */
	min-height: 100rem;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* 写真は画面の右端まで抜ける（カンプは右2隅が角のまま切れている＝抜ける前提） */

.p-service__img {
	border-radius: 0.5rem;
	display: block;
	overflow: hidden;
	position: absolute;
}

.p-service__img img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-service__img--01 {
	aspect-ratio: 548/367;
	height: auto;
	right: calc(50% - 50vw);
	top: 3rem;
	width: 34.25rem;
}

.p-service__text {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.0625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.25;
	margin-top: 3.1875rem;
	max-width: 29.6875rem;
	text-align: justify;
	width: 100%;
}

.p-service__list {
	grid-gap: 0.875rem 0.8125rem;
	display: grid;
	gap: 0.875rem 0.8125rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 14.3125rem;
}

/* カードはTOPサービスセクションと同デザイン */

.p-service__card {
	grid-gap: 0.125rem;
	align-content: center;
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	border-radius: 0.3125rem;
	color: #005d79;
	color: var(--blue);
	display: grid;
	gap: 0.125rem;
	min-height: 5.3125rem;
	padding: 1.25rem 3.5rem 1.1875rem 1.25rem;
	position: relative;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.p-service__card-lead {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.4;
}

/* 文字数が多いキャッチはPCのみ1行に収める（カンプで12px指定・SPは14px） */

.p-service__card-lead--small {
	font-size: 0.75rem;
}

.p-service__card-title {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.p-service__card-icon {
	position: absolute;
	right: 0.9375rem;
	top: 50%;
	transform: translateY(-50%);
}

.p-service__img--02 {
	aspect-ratio: 738/516;
	height: auto;
	right: calc(50% - 50vw);
	top: 52.9375rem;
	width: 46.125rem;
}

.p-service__img--03 {
	aspect-ratio: 378/477;
	border-radius: 0.5rem;
	height: auto;
	left: 1.5625rem;
	left: var(--padding-pc);
	top: 70.1875rem;
	width: 23.625rem;
}

.p-staff {
	padding-bottom: 10.3125rem;
	padding-top: 6.875rem; /* SPカンプ 7:1909 実測: 戻るボタン下端(3948) → フッター(4124) = 176 */
}

/* 写真はカンプ 7:10382 / 7:2113 の DSC01102。
   Figmaの原寸(4096×2736)を取得し、PC/SPで実際に見えている範囲だけを切り出して配置している
   （画素数が1/3で済み、PC表示 1440px に対して約2倍の解像度を確保できる）。
   SPは画像と枠の比率が一致するので object-position は効かない */

/* 枠の高さを rem で持つと 1440px超で高さだけ伸びず、cover の縦の切り取りが増えて
   人物の頭が切れる。画面幅に対する比率で持てばどの幅でも同じトリミングになる */

.p-staff__band {
	aspect-ratio: 1440/537;
	display: block;
	height: auto;
	margin-top: 2.0625rem;
	overflow: hidden;
}

.p-staff__band img {
	-o-object-fit: cover;
	-o-object-position: 50% 82.2%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 82.2%;
	width: 100%;
}

.p-staff__band { /* SPカンプ 7:2112: 見出し下端(184) → 写真(234) = 50。
     こちらも 375〜767 で枠だけ横に伸びないよう比率で持つ */
}

.p-staff__intro {
	display: flex;
	gap: 2.5rem;
	justify-content: space-between;
	margin-top: 6.1875rem; /* SPカンプ 7:1915: 写真下端(417) → キャッチ(445) = 28 */
}

.p-staff__catch {
	color: #005d79;
	color: var(--blue);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.5; /* カンプ 7:10384 / 7:1915 実測: PC 42px・行送り63px・字間0.03em・--blue。
     左端はインナーより24px外（カンプ x=120） */
	margin-left: -1.5rem; /* 1行目が「で始まるぶん、約物の左余白で2行目と頭が揃わない（実測 +25px）。
     カンプは2行の左端が2px以内で揃っているので、1行目だけぶら下げる */
	text-indent: -0.65em;
}

.p-staff__catch { /* 476〜767pxは1行に収まる幅があるので改行しない */
}

.p-staff__text {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.15;
	max-width: 35rem;
	text-align: justify;
	width: 100%; /* SPカンプ 7:2114 実測: キャッチから40px */
}

.p-staff__filter {
	margin-left: 0; /* カンプ 7:10529 / 7:2115 実測: 本文の下から164px（SPは40px） */
	margin-top: 10.25rem; /* SPカンプ 7:1909 実測: 本文の下端761 → CATEGORY 801 の40px。
     このカンプはラベルがセレクト（806）の下敷きになっていて描画されないが、
     ラベルの座標に合わせる判断（セレクトはカンプより9.5px下がる） */
}

.p-staff__list { /* カンプ実測: PC 4列・列ピッチ296（カード264+gap32）・行ピッチ539 / SP 2列・ピッチ175・行間56 */
	grid-gap: 7.3125rem 2rem;
	display: grid;
	gap: 7.3125rem 2rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 5.625rem;
}

.p-staff__item.is-hidden {
	display: none;
}

.p-staff__card {
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	padding: 0;
	text-align: left;
	width: 100%;
}

/* 写真枠 */

.p-staff__card-img {
	align-items: center;
	aspect-ratio: 264/311;
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	display: grid;
	justify-items: center;
	overflow: hidden;
	place-items: center;
	position: relative; /* カンプ 7:10389 / 7:1921 実測: 右下の角マークはオープニング（.loader__peel）と
     同じ「めくれ」の絵（PC 43.14×34.51 / SP 24.84×20） */
}

.p-staff__card-img::after {
	background-image: url(../images/loader-peel.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	bottom: 0;
	content: "";
	height: 2.156875rem;
	position: absolute;
	right: 0;
	width: 2.69625rem;
}

.p-staff__card-img { /* カンプは枠の上端を基準に切り取られている（下がトリミングされる）。
     height:100% だと枠より縦に大きくなり切り取り位置がずれるので絶対配置で収める */
}

.p-staff__card-img .p-staff__card-photo {
	-o-object-fit: cover;
	-o-object-position: top;
	bottom: 0;
	height: 100%;
	left: 0;
	object-fit: cover;
	object-position: top;
	opacity: 1;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.p-staff__card-img { /* SPカンプ 7:1918 実測: 152×180 */
}

/* カンプ 7:5234 / 7:5412 と絵コンテ（Frame 14931〜14956）:
   オープニング（.loader__peel）と同じ「めくれ」の絵が右下から拡大し、
   通り過ぎた側（右下）に2枚目の写真が現れる。青いカールが境目、その先は1枚目のまま。
   一度めくれたら戻らず、モーダルを閉じた時だけリセットされる（script.js とセット）。

   倍率20の根拠: カールがカードを完全に抜けきるのは、図形の内側の縁（右下から
   横0.753W・縦1.0H の対角線）がカード左上を越える時で s ≧ 17.2。
   ディゾルブに入る92%時点で抜け切っているよう20まで伸ばし切る。
   PC/SPともカード:角マークの比が同じなので同じ倍率で足りる */

.p-staff__card-img .p-staff__card-photo--back {
	--peel-w: 2.69625rem;
	--peel-h: 2.156875rem;
	-webkit-mask-image: url(../images/loader-peel.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: right bottom;
	-webkit-mask-size: 2.69625rem 2.156875rem;
	-webkit-mask-size: var(--peel-w) var(--peel-h);
	bottom: 0;
	left: 0;
	mask-image: url(../images/loader-peel.svg);
	mask-position: right bottom;
	mask-repeat: no-repeat;
	mask-size: 2.69625rem 2.156875rem;
	mask-size: var(--peel-w) var(--peel-h);
	position: absolute;
	right: 0;
	top: 0;
}

/* 2枚目がある場合、角マークは青いカールだけにして、めくれた下から2枚目を覗かせる
   （カンプ Frame 14931） */

.p-staff__card-img--flip::after {
	background-image: url(../images/staff-peel-edge.svg);
}

/* 写真が未登録の枠はカンプ 7:5401 準拠で色面のみ（--main → めくれると --accent）。
   角マークは #005D79 のカール（staff-peel-edge.svg）をそのまま出す */

.p-staff__card-img--blank {
	background-color: #003e53;
	background-color: var(--main);
}

.p-staff__card-blank {
	background-color: #009d85;
	background-color: var(--accent);
}

/* めくれの青いカール（境目）。塗り面はマスク側が担うのでカールだけを描く。
   静止時は ::after が同じ絵を出しているのでこちらは伏せておく */

.p-staff__card-peel {
	background-image: url(../images/staff-peel-edge.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	bottom: 0;
	height: 2.156875rem;
	opacity: 0;
	position: absolute;
	right: 0;
	scale: 1;
	transform-origin: 100% 100%;
	width: 2.69625rem;
}

/* 緩急はオープニング（.loader__peel）と同じ ease-in。カードを抜け切るまで
   止めずに伸ばし、消えるのは画面外に出たあと */

.p-staff__card-img.is-flipped .p-staff__card-peel {
	animation: staff-peel 0.45s ease-in both;
}

.p-staff__card-img.is-flipped .p-staff__card-photo--back {
	animation: staff-peel-reveal 0.45s ease-in both;
}

/* 2枚目になったら角マークは出さない（1枚目に戻る時だけディゾルブで戻す） */

.p-staff__card-img--flip.is-flipped::after {
	opacity: 0;
}

/* モーダルを閉じた時は1枚目へディゾルブで戻す（パキッと切り替えない）。
   面を消すのと同時にマスクを角のサイズまで戻し、最後に角の覗きと青いカールを
   同じ尺で戻す（角だけワンテンポ遅れないようにするため1本のアニメでつなぐ） */

.p-staff__card-img--flip.is-flip-out .p-staff__card-photo--back {
	animation: staff-peel-back 0.5s ease both;
}

/* めくれが角まで戻り切るのと、角マークが出切るのを同じ尺にそろえる */

.p-staff__card-img--flip.is-flip-out::after {
	animation: staff-peel-back-mark 0.5s ease both;
}

/* カンプ 7:10531 / 7:2117: 絞り込みを解除して全件に戻す。一覧の下167（SP 135） */

.p-staff__back {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10.4375rem;
	padding: 0;
	width: -moz-fit-content;
	width: fit-content; /* SPカンプ 7:2123 実測: 文字はPCと同じ15px（c-link-arrow のSP既定13pxを上書き） */
}

/* SPだけ「すべての社員」が頭に付く（カンプ 7:2123） */

/* 縦書きのローマ字 */

.p-staff__card-en {
	bottom: 3.0625rem;
	color: #fff;
	color: var(--white);
	font-family: "Avenir", "Avenir Next", "Nunito Sans", sans-serif;
	font-family: var(--avenir-font);
	font-size: 1.0625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.2; /* カンプ 7:10388 実測: 17px Medium・行送り1.2・枠の下端から49（SPは11px・下端から28） */
	position: absolute;
	right: 0.5rem;
	writing-mode: vertical-rl;
}

/* カンプ 7:10393 / 7:1925 実測: 14px Medium --accent（PC行送り1.4 / SP1.2） */

.p-staff__card-org { /* カンプはプロポーショナル詰め（palt）。「（株）」の括弧が詰まって幅が 182 → 158 になる */
	font-feature-settings: "palt";
	color: #009d85;
	color: var(--accent);
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.4;
	margin-top: 1.5625rem; /* SPカンプ 7:1924: 所属が2行になっても肩書きは枠上端+42で固定なので2行分を確保する */
}

/* カンプ 7:10395 / 7:1927 実測: 14px Medium --blue・行送り1.9 */

.p-staff__card-role {
	color: #005d79;
	color: var(--blue);
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.9;
	margin-top: 0.6875rem;
}

/* カンプ 7:10396 / 7:1928 実測: Noto Sans JP Medium 30px・行送り2・字間0.05em（SPは20px） */

.p-staff__card-name {
	color: #003e53;
	color: var(--main);
	display: block;
	font-size: 1.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
	line-height: 2;
	margin-top: -0.625rem;
}

/* モーダル */

/* カンプ 7:11792（PC 1018×725）/ 7:2129（SP 327幅） */

/* カンプ注記「ディゾルブで表示」。開いた直後に .is-visible を付けてフェードさせ、
   閉じる時はフェード完了後に close() する（script.js とセット）。
   @starting-style を使わないのは、gulpのmerge-media-queriesが内部で使う
   css-parse@1.7 が未知のat-ruleを解釈できずビルドが落ちるため */

.p-staff-modal {
	background-color: #fff;
	background-color: var(--white);
	border: none; /* カンプ 7:11792 実測 */
	border-radius: 1.25rem;
	max-height: min(45.3125rem, 100dvh - 3rem);
	opacity: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	transition: opacity 0.4s ease;
	width: min(63.625rem, 100vw - 3rem);
}

.p-staff-modal[open] {
	display: block;
}

.p-staff-modal.is-visible {
	opacity: 1;
}

.p-staff-modal::backdrop {
	background-color: rgba(0, 35, 50, 0.6);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.p-staff-modal.is-visible::backdrop {
	opacity: 1;
}

.p-staff-modal { /* SPは幅をl-innerのSP上限（600）に揃える */
}

/* 左カラム（写真＋座右の銘）。カンプ 7:11828→7:11796 実測で写真の下端から30（SPは27） */

.p-staff-modal__side {
	grid-gap: 1.875rem;
	align-content: start;
	display: grid;
	gap: 1.875rem;
}

/* スクロールするのはこの枠（閉じるボタンはこの外にあるので上に追従する） */

.p-staff-modal__inner {
	grid-gap: 1.875rem 6.25rem;
	align-items: start;
	display: grid;
	gap: 1.875rem 6.25rem;
	grid-template-columns: 19rem minmax(0, 1fr);
	max-height: min(45.3125rem, 100dvh - 3rem);
	overflow-y: auto;
	padding: 3.125rem 5.625rem 3.3125rem 5.5rem; /* SPカンプ 7:2130 実測: 中身は幅249（モーダル327の左右39） */
}

.p-staff-modal__close {
	background: none;
	border: none;
	color: #005d79;
	color: var(--blue);
	cursor: pointer;
	height: 1.8125rem;
	position: absolute;
	right: 2.0625rem;
	top: 1.8125rem;
	width: 2.3125rem;
	z-index: 2;
	z-index: var(--z-index-front);
}

.p-staff-modal__close-bars {
	height: 0.625rem;
	left: 0.0625rem;
	position: absolute;
	top: 0;
	width: 2.25rem;
}

.p-staff-modal__close-bars::before,
.p-staff-modal__close-bars::after {
	background-color: currentcolor;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
}

.p-staff-modal__close-bars::before {
	rotate: 15deg;
}

.p-staff-modal__close-bars::after {
	rotate: -15deg;
}

/* カンプ 7:11803 実測: 12px / 字間0.6px。✖の中心に合わせて枠いっぱいに置く */

.p-staff-modal__close-text {
	bottom: 0;
	color: currentcolor;
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 0.75rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	left: 0;
	letter-spacing: 0.05em;
	line-height: 1;
	position: absolute;
	right: 0;
	text-align: center;
}

/* カンプ実測: org 50..69 / role 83..111 / name 114..143、写真は183から */

.p-staff-modal__header {
	grid-column: 1/-1;
	margin-bottom: 0.625rem;
}

.p-staff-modal__org {
	color: #009d85;
	color: var(--accent);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.36;
}

.p-staff-modal__org {
	font-feature-settings: "palt";
}

.p-staff-modal__role {
	color: #005d79;
	color: var(--blue);
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.87;
	margin-top: 0.875rem;
}

.p-staff-modal__name {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.5rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.21;
	margin-top: 0.1875rem;
}

/* 写真はカンプの見えている範囲で書き出してあるので、枠は写真の高さそのまま。
   右カラムのほうが背が高いので、align-self を start にしないとグリッドの行いっぱいに伸びてしまう
   （カンプ 7:11828 は 304.3×358 = 書き出した写真の比率） */

.p-staff-modal__photo {
	align-items: center;
	align-self: start;
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	display: grid;
	justify-items: center;
	overflow: hidden;
	place-items: center;
	position: relative; /* カンプ 7:11831 / 7:2161 実測: 一覧カードと同じ右下のめくれマーク（PC 49.72×39.78 / SP 45.88×35.94） */
}

.p-staff-modal__photo::after {
	background-image: url(../images/loader-peel.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	bottom: 0;
	content: "";
	height: 2.48625rem;
	position: absolute;
	right: 0;
	width: 3.1075rem;
}

.p-staff-modal__photo .p-staff-modal__photo-img {
	height: auto;
	opacity: 1;
	width: 100%;
}

/* 写真未登録の枠はロゴ分の高さしか無く潰れるので、カンプ実測の比率で形を保つ */

/* 写真が未登録の枠は一覧の .p-staff__card-img--blank と同じ見た目
   （--main の色面・右下に --accent の覗き・#005D79 のカール） */

.p-staff-modal__photo--blank {
	aspect-ratio: 304/358;
	background-color: #003e53;
	background-color: var(--main);
}

.p-staff-modal__photo--blank::before {
	-webkit-mask-image: url(../images/loader-peel.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: #009d85;
	background-color: var(--accent);
	bottom: 0;
	content: "";
	height: 2.48625rem;
	mask-image: url(../images/loader-peel.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	right: 0;
	width: 3.1075rem;
}

.p-staff-modal__photo--blank::after {
	background-image: url(../images/staff-peel-edge.svg);
}

/* 一覧カードと同じ縦書きローマ字（カンプ 7:11830） */

/* カンプ 7:11830 / 7:2160 実測: 19.2px Medium・白・行送り1.2（SPは14px） */

/* 右は一覧カードと同じ8。下端からの距離はモーダル側のカンプ実測
   （SP 7:2158の写真枠 249×292 に対して 7:2160 の下端が47） */

.p-staff-modal__photo-en {
	bottom: 3.0625rem;
	color: #fff;
	color: var(--white);
	font-family: "Avenir", "Avenir Next", "Nunito Sans", sans-serif;
	font-family: var(--avenir-font);
	font-size: 1.2rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.2;
	position: absolute;
	right: 0.5rem;
	writing-mode: vertical-rl;
}

/* 見出しは行頭に緑の三角がつく（カンプ Group 13861）。
   PCは14px/行送り28.7（7:11810）、SPは13px/26.65（7:2140）。
   ひとつ前の値との間はカンプ実測で PC 31/27/23・SP 34/33/30 と一定でないため中間値を取る */

.p-staff-modal__label {
	color: #009d85;
	color: var(--accent);
	font-size: 0.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2.05;
	margin-top: 1.6875rem;
	padding-left: 1.3125rem;
	position: relative;
}

.p-staff-modal__label::before {
	background-color: #009d85;
	background-color: var(--accent);
	clip-path: polygon(100% 0, 0 29%, 22% 100%);
	content: "";
	height: 0.53125rem;
	left: 0;
	position: absolute;
	top: 0.375rem;
	width: 0.6875rem;
}

.p-staff-modal__label:first-child {
	margin-top: 0;
}

/* カンプ 7:11820 実測: PCは16px（SP 7:2154 は14px）。行送りはどちらも1.9 */

.p-staff-modal__value,
.p-staff-modal__list {
	color: #003e53;
	color: var(--main);
	font-size: 1rem;
	line-height: 1.9;
	margin-top: 0.375rem;
}

.p-staff-modal__motto {
	text-align: center;
}

/* SPは 写真 → 座右の銘 → 各項目 の順（カンプ 7:2129） */

.p-staff-modal__motto-label {
	color: #009d85;
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
}

/* 前後に大きな引用符を置く（カンプ 7:11800 / 7:11801）。
   カンプは開き引用符が1行目の左、閉じ引用符が最終行の右に付くので、
   PC/SPとも絶対配置ではなく本文中に流し込む */

.p-staff-modal__motto-text {
	color: #003e53;
	color: var(--main);
	font-family: "Noto Serif JP", serif;
	font-family: var(--serif-font); /* カンプ 7:11799 実測: PCは22px/行送り33.68（SP 7:2134 は18px/28） */
	font-size: 1.375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	line-height: 1.5309090909;
	margin-top: 0.625rem;
	position: relative;
}

.p-staff-modal__motto-text::before,
.p-staff-modal__motto-text::after {
	color: #003e53;
	color: var(--main);
	font-size: 1.875rem;
	line-height: 0;
	position: relative;
}

.p-staff-modal__motto-text { /* nbsp を挟むのは、引用符だけが次の行に落ちるのを防ぐため */
}

.p-staff-modal__motto-text::before {
	content: "“ ";
	margin-right: 0.625rem;
	top: 0.375rem;
}

.p-staff-modal__motto-text::after {
	content: " ”";
	margin-left: 0.25rem;
	top: 1.375rem;
}

.p-staff-modal__motto-text { /* SPカンプ 7:2134/7:2166/7:2167 実測 */
}

/* 社員が0件のとき（一覧側の .p-news-archive__empty と同じ見せ方） */

.p-staff__empty {
	color: #003e53;
	color: var(--main);
	margin-top: 5rem;
	text-align: center;
}

/* お問い合わせ完了（カンプ 7:12093 / 7:3349） */

.p-thanks {
	padding-bottom: 12rem; /* カンプ 7:12093 / 7:3349 実測: 戻るボタン下端からフッターまで PC192 / SP122 */
	padding-top: 6.875rem;
}

/* PCは見出しと本文の2カラム。上下を罫線で挟む（SPは罫線なしの縦積み） */

.p-thanks__body {
	border-bottom: 0.125rem solid #e3e7ec;
	border-bottom: 0.125rem solid var(--bg-gray);
	border-top: 0.125rem solid #e3e7ec;
	border-top: 0.125rem solid var(--bg-gray);
	display: grid;
	grid-template-columns: 24.6875rem minmax(0, 1fr);
	margin-top: 12.9375rem;
	padding-bottom: 3.9375rem;
	padding-top: 3.75rem;
}

/* カンプ 7:12093 実測: 22px Bold・行送り35（SPは20px / 24） */

.p-thanks__title {
	color: #000;
	color: var(--black);
	font-size: 1.375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 1.5909090909;
}

/* カンプ 7:12093 実測: 16px Bold・行送り36.8（SPは15px / 28.5） */

.p-thanks__lead {
	color: #00182e;
	color: var(--form-lead);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2.3;
}

/* 届かなかったときの案内。カンプ 7:12093 は Bold、SPカンプ 7:3349 は Medium */

.p-thanks__note {
	color: #ff0202;
	color: var(--alert);
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	line-height: 2.3;
	margin-top: 1.4375rem;
}

.p-thanks__back {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6.0625rem;
	width: -moz-fit-content;
	width: fit-content;
}

/* SPはカンプで前セクションに19px被さって始まる */

.p-top-effort {
	background-color: #002332;
	background-color: var(--main-dark);
	padding-bottom: 9.1875rem;
	padding-top: 4.75rem;
}

.p-top-effort__lead {
	color: #009d85;
	color: var(--accent);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
}

.p-top-effort__title {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.875rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.35;
	margin-top: 1.4375rem;
}

.p-top-effort__list {
	display: flex;
	gap: 3rem;
	margin-top: 5.875rem; /* SPカンプ幅(375)の並びを767pxまで保つ（space-betweenだけだと広幅で散らばる） */
}

.p-top-effort__item {
	width: 12rem;
}

/* SPは 2 → 1（中央）→ 2 のジグザグ配置（カンプ準拠） */

/* 3番目は親が全幅のため、円自体の大きさを他と揃える */

/* 円はコーディング、中のイラストのみ画像（カンプ準拠） */

.p-top-effort__item-link {
	aspect-ratio: 1;
	display: block;
	position: relative;
	width: 100%; /* ホバーで拡大するのは丸だけ（文字とイラストは等倍のまま） */
}

.p-top-effort__item-link::before {
	background-color: #1e6881;
	background-color: var(--blue-mid);
	border-radius: 50%;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: scale 0.4s ease;
}

.p-top-effort__item-label {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.5625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	left: 50%;
	letter-spacing: 0.02em;
	line-height: 1;
	position: absolute;
	top: 18.5%;
	transform: translateX(-50%);
	white-space: nowrap;
}

.p-top-effort__item-label--en {
	font-family: "Montserrat", sans-serif;
	font-family: var(--en-font);
	font-size: 1.4375rem;
	font-weight: 600;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.03em;
	top: 19.5%;
}

/* イラストは円に対する比率で配置（カンプ座標より） */

.p-top-effort__item-img {
	height: auto;
	position: absolute;
}

.p-top-effort__item-img--sdgs {
	left: 20.4%;
	top: 40.8%;
	width: 52.7%;
}

.p-top-effort__item-img--dx {
	left: 22.9%;
	top: 41.4%;
	width: 46.2%;
}

.p-top-effort__item-img--hr {
	left: 24.6%;
	top: 40.8%;
	width: 53.1%;
}

.p-top-effort__item-img--seminar {
	left: 26.9%;
	top: 43%;
	width: 44.9%;
}

.p-top-effort__item-img--global {
	left: 27.7%;
	top: 42.9%;
	width: 43.1%;
}

.p-top-effort__btn {
	margin-top: 9.125rem;
}

/* MVの映像は最背面で固定し、メッセージのグラデーションがその上を流れる（.p-top-hero を抜けるまで） */

.p-top-hero__bg {
	-o-object-fit: cover;
	display: block;
	height: 100vh;
	height: 100svh;
	object-fit: cover;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 0;
	z-index: var(--z-index-base);
}

/* 上部の余白が大きいのは、前セクションの写真が下端から掛かってくるため（カンプ準拠）
   overflow-x はスライダーのはみ出し演出（overflow: visible）が横スクロールにならないようクリップする */

.p-top-insights {
	overflow-x: clip;
	padding-bottom: 4.6875rem;
	padding-top: 30.9375rem;
	position: relative;
}

.p-top-insights__img {
	aspect-ratio: 476/317;
	border-radius: 0.6875rem;
	display: block;
	height: auto;
	overflow: hidden;
	position: absolute;
	right: 4.375rem;
	top: 13.125rem;
	width: 29.75rem; /* 写真はカンプのトリミング済み（Frame 14641 の見えている範囲）を書き出しているので枠に敷くだけ */
}

.p-top-insights__img img {
	-o-object-fit: cover;
	bottom: 0;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.p-top-insights__heading {
	color: #003e53;
	color: var(--main);
}

/* 「経営と／税務のヒント」は46px＋36pxの混植（SPは30px＋20px） */

.p-top-insights__title {
	font-size: 2.875rem;
}

.p-top-insights__title-sub {
	font-size: 2.25rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
}

.p-top-insights__title-hint {
	font-weight: 500;
	font-weight: var(--fw-medium);
}

.p-top-insights__heading .c-section-title__ja {
	margin-top: 0;
}

.p-top-insights__text {
	color: #003e53;
	color: var(--main);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.0625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.25;
	margin-top: 4.125rem;
}

/* 新着記事がある時だけ出るため、無い場合はスライダー側の余白（下の隣接セレクタ）で吸収する */

.p-top-insights__label {
	color: #009d85;
	color: var(--accent);
	font-size: 0.8125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
	margin-top: 3.625rem;
}

/* SPは画面端まで見せる（カンプ準拠） */

.p-top-insights__slider {
	margin-top: 6.3125rem;
	overflow: visible;
}

.p-top-insights__label + .p-top-insights__slider {
	margin-top: 1.4375rem;
}

.p-top-insights__item {
	width: 19.1875rem;
}

.p-top-insights__card {
	color: #003e53;
	color: var(--main);
	display: block;
}

.p-top-insights__card-img {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	border-radius: 0.3125rem;
	display: block;
	height: 12.25rem;
	overflow: hidden;
	width: 100%;
}

.p-top-insights__card-img img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	transition: scale 0.4s ease;
	width: 100%;
}

.p-top-insights__card-title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	line-height: 1.66;
	margin-top: 0.875rem;
}

.p-top-insights__card-meta {
	display: block;
	font-size: 0.875rem;
	margin-top: 0.875rem;
}

.p-top-insights__controls {
	align-items: center;
	display: flex;
	gap: 2.1875rem;
	margin-top: 4.125rem;
}

.p-top-insights__nav {
	display: flex;
	flex-shrink: 0;
	gap: 1.75rem;
}

.p-top-insights__nav-btn {
	background-color: transparent;
	border: none;
	cursor: pointer;
	height: 4rem;
	position: relative;
	transition: opacity 0.4s ease;
	width: 4rem; /* 円（枠線）。ホバーではこの円だけがふわっと大きくなる（カンプ「矢印：マウスオーバーで、円が大きくなる」） */
}

.p-top-insights__nav-btn::before {
	border: 1px solid #009d85;
	border: 1px solid var(--accent);
	border-radius: 50%;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: scale 0.4s ease;
}

.p-top-insights__nav-btn.swiper-button-disabled {
	cursor: default;
	opacity: 0.4;
}

.p-top-insights__nav-btn { /* 非アクティブ時はホバーにも反応させない（押せそうに見えてしまうため） */
}

/* 細い線の矢印（カンプ準拠）: 軸と矢じりで構成する */

.p-top-insights__nav-arrow {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-top-insights__nav-arrow::before {
	background-color: #009d85;
	background-color: var(--accent);
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
	width: 1.5rem;
}

.p-top-insights__nav-arrow::after {
	border-right: 2px solid #009d85;
	border-right: 2px solid var(--accent);
	border-top: 2px solid #009d85;
	border-top: 2px solid var(--accent);
	content: "";
	height: 0.6875rem;
	left: calc(50% + 0.75rem);
	position: absolute;
	top: 50%;
	transform: translate(-100%, -50%) rotate(45deg);
	transition: border-color 0.3s ease;
	width: 0.6875rem;
}

.p-top-insights__nav-btn--prev .p-top-insights__nav-arrow::after {
	left: calc(50% - 0.75rem);
	transform: translate(0, -50%) rotate(-135deg);
}

.p-top-insights__progress {
	background-color: #c3c3c3;
	background-color: var(--gray);
	height: 0.3125rem;
	margin-left: auto;
	position: relative;
	width: 33.875rem;
}

.p-top-insights__progress .swiper-scrollbar-drag {
	background-color: #009d85;
	background-color: var(--accent);
	height: 100%;
}

.p-top-insights__btn {
	display: flex;
	margin-left: auto;
	margin-top: 4.1875rem;
	width: -moz-fit-content;
	width: fit-content;
}

.p-top-links {
	background-color: #002332;
	background-color: var(--main-dark);
	padding-bottom: 6.5625rem;
	padding-top: 6.5rem;
}

.p-top-links__list {
	grid-gap: 2rem;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-top-links__card {
	border-radius: 0.625rem;
	display: block;
	overflow: hidden;
}

/* 写真の位置をカード幅に対する割合で持っているので、枠の高さも同じくカード幅比で持つ。
   高さだけ rem で固定すると、カードが広がる幅（SPの375〜767など）で切り取り率が変わる
   （カンプ: PCはカード560に対して254、SPはカード327に対して149） */

.p-top-links__img {
	aspect-ratio: 560/254;
	background-color: #fff;
	background-color: var(--white);
	display: block;
	height: auto;
	overflow: hidden;
	position: relative;
}

.p-top-links__img img {
	-o-object-fit: cover;
	max-width: none;
	object-fit: cover;
	position: absolute;
	transition: scale 0.4s ease;
}

/* 写真のトリミングはカードごとにカンプの配置座標へ合わせる。
   カード幅は画面幅で変わるので、座標はカード幅に対する割合で持たせて白地が出ないようにする
   （PCはカンプのカード560px時、SPは327px時の座標を換算） */

.p-top-links__item:nth-child(1) .p-top-links__img img {
	height: auto;
	left: -19.11%;
	min-height: 100%;
	top: 0;
	translate: 0 -35.93%;
	width: 144.46%; /* 数値はSPカンプ（カード327px時）の座標をカード幅に対する割合へ置き換えたもの。
     カードが広がっても画像が追従して白地が出ないようにする */
}

.p-top-links__item:nth-child(2) .p-top-links__img img {
	height: auto;
	left: -1.25%;
	min-height: 100%;
	top: 0;
	translate: 0 -30.81%;
	width: 102.5%;
}

.p-top-links__label {
	align-items: center;
	background-color: #009d85;
	background-color: var(--accent);
	display: flex;
	justify-content: space-between;
	min-height: 6.5rem;
	padding-left: 2.125rem;
	padding-right: 2.125rem;
	transition: background-color 0.3s ease;
}

.p-top-links__title {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	line-height: 1.9;
	transition: color 0.3s ease;
}

/* マウスオーバーでラベルが白背景＋緑文字に反転（カンプ準拠） */

/* 矢印は線（カンプ PC 7:5682 は 20.44×13.63 / SP 7:950 は 12×8） */

.p-top-links__icon {
	color: #fff;
	color: var(--white);
	flex-shrink: 0;
	height: 0.851875rem;
	position: relative;
	transition: translate 0.3s ease, color 0.3s ease;
	width: 1.2775rem;
}

.p-top-links__icon::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	content: "";
	height: 1.0022211063rem;
	left: 0;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1.3527766875rem;
}

/* 固定した写真の上を流れる半透明グラデーション（カンプ 7:5484）。下地は敷かない —
   スクロールが進むにつれて写真に徐々に濃紺がかかっていき、終端で不透明になる演出
   カンプ比で PC+1400/SP+1000 の助走を上に足し、演出のスクロール尺と濃度の乗りを増やしている
   負のマージンは .p-top-mv が固定解除用に持たせた余白を戻すもの
   SPは中間ストップの位置・濃度がPCと異なる（24.592% / 0.55） */

.p-top-message {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 2.842%, rgba(0, 62, 83, 0.5) 50.126%, #003e53 97.41%);
	height: 223.1875rem;
	margin-top: -91.875rem;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

/* グラデーションが濃くなる範囲。ヘッダーの色を切り替える目印だけで、見た目は持たない */

.p-top-message__dark {
	bottom: 0;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 38%;
}

/* SPも左端基準ではなく中央基準で置く（767pxまで伸びたときに左へ寄らないようにするため）。
   数値は SPカンプ375px幅の中央(187.5px)からの距離 */

.p-top-message__text {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.125rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.05em;
	line-height: 2.5;
	position: absolute;
}

.p-top-message__text--01 {
	left: calc(50% - 31.9375rem);
	top: 102.625rem;
}

.p-top-message__text--02 {
	left: calc(50% + 5.3125rem);
	top: 123.375rem;
}

.p-top-message__text--03 {
	left: calc(50% - 31.5625rem);
	top: 142.5625rem;
}

.p-top-message__catch {
	left: calc(50% - 31.5625rem);
	position: absolute;
	top: 160.75rem;
	width: 43.375rem;
}

.p-top-message__catch-img {
	height: auto;
	width: 100%;
}

.p-top-message__btn {
	left: calc(50% - 31.5rem);
	position: absolute;
	top: 172.375rem;
}

.p-top-message__img {
	border-radius: 0.5rem;
	display: block;
	overflow: hidden;
	position: absolute;
}

.p-top-message__img img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-top-message__img--01 {
	aspect-ratio: 260/361;
	height: auto;
	left: calc(50% - 31.3125rem);
	top: 187.875rem;
	width: 16.25rem;
}

.p-top-message__img--02 {
	aspect-ratio: 505/324;
	height: auto;
	left: calc(50% + 4.25rem);
	top: 206.5625rem;
	width: 31.5625rem;
}

/* キャッチは写真とは別に固定し、冒頭コピーが近づいてきた時点で解除する
   解除は「冒頭コピー出現」より一足先（200px）に置き、解放後のキャッチと冒頭コピーの間隔を確保する
   （グラデーションの助走 PC+1400/SP+1000 を含む。演出尺を変える時はここと _p-top-message を連動させる） */

.p-top-mv {
	height: calc(100vh + 90.4375rem);
	height: calc(100svh + 90.4375rem);
	margin-top: -100vh;
	margin-top: -100svh;
	position: relative;
	z-index: 2;
	z-index: var(--z-index-front);
}

.p-top-mv__inner {
	height: 100vh;
	height: 100svh;
	position: sticky;
	top: 0;
}

.p-top-mv__catch {
	bottom: 1.75rem; /* 1440px時の左53pxを画面中央からの距離に置き換える。1440超でも1440時と同じ位置に留まる */
	left: calc(50% - 41.6875rem);
	position: absolute;
	width: 68.25rem;
}

.p-top-mv__catch-img {
	height: auto;
	width: 100%;
}

/* スクロールが始まったらディゾルブで消す（追従はさせない） */

.p-top-mv__catch {
	transition: opacity 600ms ease;
}

.p-top-mv__catch.is-dissolved {
	opacity: 0;
}

/* 絵コンテ モーション①: ディゾルブ後（2.3s〜）にキャッチだけが出現する
   参考サイトの文字送り（フェード＋下から10px）をSVG画像向けに翻案:
   文字方向へのワイプ＋全体のフェードアップ。SPは3行組のため上から下へワイプする */

body.home .p-top-mv__catch {
	animation: catch-wipe-x 1000ms ease-out 2400ms backwards;
}

body.home .p-top-mv__catch-img {
	animation: catch-rise 800ms ease-out 2400ms backwards;
}

/* SPはカンプで前セクションに10px被さって始まる */

.p-top-news__head {
	align-items: center;
	color: #fff;
	color: var(--white);
	display: grid;
	min-height: 13.375rem;
	overflow: hidden;
	position: relative;
}

.p-top-news__head { /* 写真に緑を乗算で重ねる（カンプ: #009d85 / 不透明度50%） */
}

.p-top-news__head::after {
	background-color: #009d85;
	background-color: var(--accent);
	bottom: 0;
	content: "";
	left: 0;
	mix-blend-mode: multiply;
	opacity: 0.5;
	position: absolute;
	right: 0;
	top: 0;
}

/* 写真のトリミング位置はカンプの配置座標に合わせる（object-fitの中央基準では合わない） */

.p-top-news__head-bg {
	height: 64.0625rem;
	left: 0;
	position: absolute;
	top: -26.3125rem;
	width: 95.9375rem;
}

.p-top-news__head-bg img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-top-news__head-bg { /* 数値はSPカンプ（親375px時）の座標を親幅に対する割合へ置き換えたもの。
     画面が広がっても写真が追従して右に白地が出ないようにする */
}

.p-top-news__heading {
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.p-top-news__body {
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	padding-bottom: 4.4375rem;
	padding-top: 4.5625rem;
}

.p-top-news__inner {
	display: grid;
	grid-template-columns: 16.5rem minmax(0, 1fr);
}

.p-top-news__cats {
	align-self: start;
	grid-column: 1;
	grid-row: 1;
	padding-top: 1.875rem;
}

.p-top-news__cat-list {
	grid-gap: 1rem;
	display: grid;
	gap: 1rem;
}

.p-top-news__cat-link {
	color: #003e53;
	color: var(--main);
	font-size: 1rem;
	letter-spacing: 0.04em;
	line-height: 2;
	transition: color 0.3s ease;
}

.p-top-news__cat-link.is-current {
	color: #009d85;
	color: var(--accent);
}

.p-top-news__main {
	grid-column: 2;
	grid-row: 1/span 2;
}

/* 行の下線。カンプは行の下だけに線があり、1行目の上には線が無い（実測 #c3c3c3）。
   「線だけアニメーション」の指定に合わせ、ホバーで線の色だけが変わる */

.p-top-news__item {
	border-bottom: 1px solid #c3c3c3;
	border-bottom: 1px solid var(--gray);
	transition: border-color 0.4s ease;
}

/* SPはカンプ準拠で3件まで（PCは5件） */

.p-top-news__link {
	align-items: center;
	color: #003e53;
	color: var(--main);
	display: grid;
	grid-template-columns: 8.8125rem 7.875rem minmax(0, 1fr);
	padding-bottom: 2.125rem;
	padding-left: 1.8125rem;
	padding-right: 2rem; /* カンプ 14833 実測: 行94のうちタイトルの上下が35。1pxは行の下線に使うので下だけ34 */
	padding-top: 2.1875rem;
	position: relative; /* 行頭の三角 */
}

.p-top-news__link::before {
	background-color: #009d85;
	background-color: var(--accent);
	clip-path: polygon(100% 0, 0 29%, 22% 100%);
	content: "";
	height: 0.5rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.6875rem;
}

/* 行末の矢印（.p-top-insights__nav-arrow と同じ線の矢印） */

.p-top-news__arrow {
	color: #003e53;
	color: var(--main);
	height: 0.5rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: color 0.4s ease, translate 0.3s ease;
	width: 0.75rem;
}

.p-top-news__arrow::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	content: "";
	height: 0.588388125rem;
	left: 0;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.79419375rem;
}

.p-top-news__date {
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em; /* 三角のぶん右へ寄せる（カンプは三角 x=5・日付 x=28） */
}

.p-top-news__cat {
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
}

.p-top-news__title {
	font-size: 1rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
}

/* PCは左カラム内で記事リストの下端にそろえる（カンプ準拠） */

.p-top-news__btn {
	align-self: end;
	grid-column: 1;
	grid-row: 2;
	margin-top: 2.5rem;
}

/* 記事が0件のとき（一覧側の .p-news-archive__empty と同じ見せ方） */

.p-top-news__empty {
	color: #003e53;
	color: var(--main);
	font-size: 1rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	padding-bottom: 3.75rem;
	padding-top: 3.75rem;
	text-align: center;
}

.p-top-recruit {
	color: #fff;
	color: var(--white);
	min-height: 50.625rem;
	overflow: hidden;
	position: relative; /* 下側だけ濃紺を乗算で重ねてコピーの可読性を確保する（カンプ準拠） */
}

.p-top-recruit::after {
	background-image: linear-gradient(178deg, rgba(0, 0, 0, 0) 23.579%, rgba(0, 62, 83, 0.65) 65.624%);
	bottom: 0;
	content: "";
	height: 28.4375rem;
	left: 0;
	mix-blend-mode: multiply;
	position: absolute;
	right: 0;
}

/* 背景写真は画面幅いっぱい。PCはカンプのトリミング済み（Frame 14644 の見えている範囲）を書き出して敷く */

.p-top-recruit__bg {
	bottom: 0;
	display: block;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
}

.p-top-recruit__bg img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-top-recruit__inner {
	height: 100%;
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.p-top-recruit__heading {
	color: #005d79;
	color: var(--blue);
	padding-top: 3.75rem;
	text-align: right;
}

.p-top-recruit__heading .c-section-title__en {
	display: inline-block;
}

.p-top-recruit__heading .c-section-title__ja {
	font-size: 1.6875rem;
	letter-spacing: 0.02em;
	margin-top: 0.0625rem;
}

.p-top-recruit__catch {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 2.8125rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	left: calc(1.5625rem + 0.5625rem);
	left: calc(var(--padding-pc) + 0.5625rem);
	letter-spacing: 0.05em;
	line-height: 1.4;
	position: absolute;
	top: 28.1875rem;
}

.p-top-recruit__btn {
	left: calc(1.5625rem + 0.1875rem);
	left: calc(var(--padding-pc) + 0.1875rem);
	position: absolute;
	top: 44.0625rem;
}

/* カンプ 7:9972: --blue 80%。背面にMV映像を敷き、映像が読めない環境では地色だけが出る */

.p-top-service {
	background-color: rgb(51, 125, 148);
	color: #fff;
	color: var(--white);
	padding-bottom: 13.5rem;
	padding-top: 6rem;
	position: relative;
}

.p-top-service__dark {
	bottom: 42%;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.p-top-service__inner {
	position: relative;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.p-top-service__bg {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
	z-index: var(--z-index-base);
}

.p-top-service__bg::after {
	background-color: rgba(0, 93, 121, 0.8);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.p-top-service__video {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-top-service__img {
	display: block;
	position: absolute;
	z-index: 1;
	z-index: var(--z-index-raise);
}

.p-top-service__img img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* カンプ 7:10149 実測 x=894 y=168（セクション上端から）・右端は画面外へ抜ける
   （右2隅だけ角のまま＝抜ける前提なので、画面が広くても端まで届かせる）。
   包含ブロックが __inner なので、上は padding-block ぶん（96）を引いた値で置く。
   SPは見出しの下・画面左端まで抜ける（カンプ準拠） */

.p-top-service__img--01 {
	aspect-ratio: 548/367;
	border-radius: 0.5rem 0 0 0.5rem;
	height: auto;
	overflow: hidden;
	right: calc(50% - 50vw);
	top: 4.5rem;
	width: 34.25rem;
}

/* 次セクションに掛かる位置に置かれている（カンプ準拠） */

.p-top-service__img--02 {
	aspect-ratio: 360/240;
	border-radius: 0.6875rem;
	height: auto;
	left: 38rem;
	overflow: hidden;
	top: 57.6875rem;
	width: 22.5rem;
}

.p-top-service:not(:has(+ .p-top-insights)) .p-top-service__img--02 {
	display: none;
}

/* このセクションだけ en と ja の間隔が詰まっている（カンプ準拠） */

.p-top-service__heading .c-section-title__ja {
	margin-top: 0;
}

.p-top-service__text {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.0625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: 0.03em;
	line-height: 2.25;
	margin-top: 6.9375rem;
	max-width: 36.375rem;
	width: 100%;
}

.p-top-service__btn {
	margin-top: 3.625rem;
}

.p-top-service__list {
	grid-gap: 0.875rem 0.8125rem;
	display: grid;
	gap: 0.875rem 0.8125rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 5.9375rem;
}

.p-top-service__card {
	grid-gap: 0.125rem;
	align-content: center;
	background-color: #e3e7ec;
	background-color: var(--bg-gray);
	border-radius: 0.3125rem;
	color: #005d79;
	color: var(--blue);
	display: grid;
	gap: 0.125rem;
	min-height: 5.3125rem;
	padding: 1.25rem 3.5rem 1.1875rem 1.25rem;
	position: relative;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.p-top-service__card { /* SPは丸が43pxに大きくなるぶん、テキストとの間隔（8px）を保つため右paddingを広げる */
}

.p-top-service__card-lead {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.4;
}

/* 文字数が多いキャッチは1行に収める（カンプで12px指定） */

.p-top-service__card-lead--small {
	font-size: 0.75rem;
}

.p-top-service__card-title {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.25rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	letter-spacing: 0.04em;
	line-height: 1.2;
}

/* SPはカンプ 7:972 で丸が43px・矢印も少し大きい（PCは c-link-arrow__icon の33px） */

.p-top-service__card-icon {
	position: absolute;
	right: 0.9375rem;
	top: 50%;
	transform: translateY(-50%);
}

/* セミナー誘導リボン。カンプ指示により全ページで固定表示する */

.seminar-ribbon {
	align-items: center;
	background-image: url(../images/mv-ribbon.svg);
	background-repeat: no-repeat;
	background-size: contain;
	bottom: -0.125rem;
	display: grid;
	height: 9.125rem;
	justify-items: center;
	padding-left: 3.25rem; /* リボンの塗りが右下三角のため、テキストは中央ではなく右寄りに置く（カンプ準拠） */
	padding-top: 1.875rem;
	place-items: center;
	position: fixed;
	right: -0.125rem;
	width: 13.375rem;
	z-index: 98;
	z-index: var(--z-index-seminar);
}

.seminar-ribbon__text {
	color: #fff;
	color: var(--white);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-family: var(--second-font);
	font-size: 1.0625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.65;
	text-align: center;
}

/* 絵コンテ モーション: キャッチの後、ヘッダーと同じ動きで下から上に出現する（トップのみ） */

body.home .seminar-ribbon {
	animation: seminar-ribbon-in 600ms ease 3400ms backwards;
}

a {
	transition: opacity 0.3s ease;
}

/* カンプでホバーの指定がある要素は透過させない（:not() に追加して除外する） */

/* スクロールフェードイン（js-rules の IntersectionObserver とセット） */

.js-fadeup {
	opacity: 0;
	translate: 0 2.5rem;
}

/* トランジションは表示側にだけ置く。非表示側に置くと、CSSの適用が遅れた時に
   「一瞬見えてからフェードアウトする」動きになってしまう */

.js-fadeup.is-visible {
	opacity: 1;
	transition: opacity 0.8s ease-out, translate 0.8s ease-out;
	translate: 0 0;
}

/* 同じ画面に入る要素の出現順をずらす。transition は is-visible 側にあるため、
   遅延も同じ詳細度で後ろに置いて上書きする */

.js-fadeup--delay1.is-visible {
	transition-delay: 0.25s;
}

.js-fadeup--delay2.is-visible {
	transition-delay: 0.5s;
}

.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

/* 始め括弧で始まる見出しの1行目だけ、括弧の左にある余白を二分（0.5em）詰めて2行目以降と行頭をそろえる。
   付与するかは lead_bracket_class() が1文字目を見て判定する。
   Noto Sans JP の左サイドベアリングは「=0.646em・【=0.664em・《=0.555em で、2行目以降の
   行頭も字形で 0.08〜0.16em 内側に入るため、全部詰めるとかえって左に出る。
   0.5em に留めるとどの括弧でもインクが枠の内側に残り、overflow: hidden のカードでも欠けない */

.u-lead-bracket {
	text-indent: -0.5em;
}

.u-nowrap {
	display: inline-block;
	white-space: nowrap;
}

@media (any-hover: hover) {

.c-btn:hover {
	opacity: 0.7;
}

.c-btn--pill:hover::before {
	translate: 0.375rem 0;
}

.c-cta-contact:hover::before {
	scale: 1.06;
}

.c-cta-contact__area:hover .c-link-arrow__icon {
	background-color: #009d85;
	background-color: var(--accent);
	border-color: #009d85;
	border-color: var(--accent);
	color: #fff;
	color: var(--white);
}

/* カンプ: 円がアクセント色で塗られ、矢印は白になる */

.c-link-arrow:hover .c-link-arrow__icon {
	background-color: #009d85;
	background-color: var(--accent);
	border-color: #009d85;
	border-color: var(--accent);
	color: #fff;
	color: var(--white);
}

.pagination__arrow:hover::after {
	scale: 1.12;
}

.c-post-card:hover .c-post-card__title {
	color: #009d85;
	color: var(--accent);
}

.c-post-detail__content a:hover {
	text-decoration-color: currentcolor;
}

.c-post-detail__back:hover .c-post-detail__back-icon {
	background-color: #009d85;
	background-color: var(--accent);
	border-color: #009d85;
	border-color: var(--accent);
}

.c-post-ranking__link:hover .c-post-ranking__num,
.c-post-ranking__link:hover .c-post-ranking__title {
	color: #009d85;
	color: var(--accent);
}

.c-post-ranking__list:has(.c-post-ranking__link:hover) {
	animation-play-state: paused;
}

.footer__cta:hover {
	background-color: #009d85;
	background-color: var(--accent);
	opacity: 1;
}

.footer__nav-link:hover {
	color: #009d85;
	color: var(--accent);
}

.footer__office-link:hover {
	opacity: 0.7;
}

.footer__link { /* リンクでない社名（span）は透過させない。押せるように見えてしまうため */
}

.footer__link:hover:link,
.footer__link:hover:visited,
area[href].footer__link:hover {
	opacity: 0.7;
}

.footer__link:hover:-moz-any-link {
	opacity: 0.7;
}

.footer__link:hover:any-link {
	opacity: 0.7;
}

.footer__btn:hover {
	background-color: #005d79;
	background-color: var(--blue);
	color: #fff;
	color: var(--white);
	opacity: 1;
}

.footer__btn:hover::after {
	background-color: #fff;
	background-color: var(--white);
}

.footer__badge-link:hover {
	opacity: 0.7;
}

.footer__privacy:hover {
	opacity: 0.7;
}

.p-company__map:hover {
	color: #009d85;
	color: var(--accent);
}

.p-company__tel[href^="tel:"]:hover {
	color: #009d85;
	color: var(--accent);
}

.p-notfound__back:hover .p-notfound__back-icon {
	background-color: #009d85;
	background-color: var(--accent);
	border-color: #009d85;
	border-color: var(--accent);
	color: #fff;
	color: var(--white);
}

.p-page__content a:hover {
	color: #009d85;
	color: var(--accent);
}

.p-privacy__content a:hover {
	color: #009d85;
	color: var(--accent);
}

/* ホバーは写真の拡大だけ（.c-cta-contact と同じ）。色の濃さは変えない */

.p-recruit-entry__card:hover .p-recruit-entry__card-img img {
	scale: 1.06;
}

/* カンプ 7:8164: 円は白の塗りつぶし・枠線なし、矢印はアクセント色 */

.p-recruit-entry__card:hover .p-recruit-entry__card-icon {
	background-color: #fff;
	background-color: var(--white);
	border-color: transparent;
	color: #009d85;
	color: var(--accent);
}

.p-service__card:hover {
	background-color: #003e53;
	background-color: var(--main);
	color: #fff;
	color: var(--white);
}

/* TOPのサービスカードと同じ挙動（白丸に反転し、矢印はアクセント色） */

.p-service__card:hover .p-service__card-icon {
	background-color: #fff;
	background-color: var(--white);
	border-color: #fff;
	border-color: var(--white);
	color: #009d85;
	color: var(--accent);
}

.p-top-effort__item-link:hover::before {
	scale: 1.1;
}

.p-top-insights__card:hover .p-top-insights__card-img img {
	scale: 1.06;
}

.p-top-insights__nav-btn:not(.swiper-button-disabled):hover::before {
	scale: 1.1;
}

.p-top-links__card:hover .p-top-links__img img {
	scale: 1.06;
}

.p-top-links__card:hover .p-top-links__label {
	background-color: #fff;
	background-color: var(--white);
}

.p-top-links__card:hover .p-top-links__title {
	color: #009d85;
	color: var(--accent);
}

.p-top-links__card:hover .p-top-links__icon {
	color: #009d85;
	color: var(--accent);
	translate: 0.375rem 0;
}

.p-top-news__cat-link:hover {
	color: #009d85;
	color: var(--accent);
}

.p-top-news__item:has(.p-top-news__link:hover) {
	border-bottom-color: #009d85;
	border-bottom-color: var(--accent);
}

.p-top-news__link:hover .p-top-news__arrow {
	color: #009d85;
	color: var(--accent);
	translate: 0.25rem 0;
}

.p-top-service__card:hover {
	background-color: #003e53;
	background-color: var(--main);
	color: #fff;
	color: var(--white);
}

/* カンプ 7:6164: 白丸に反転し、矢印はアクセント色になる */

.p-top-service__card:hover .p-top-service__card-icon {
	background-color: #fff;
	background-color: var(--white);
	border-color: #fff;
	border-color: var(--white);
	color: #009d85;
	color: var(--accent);
}

a:not([class*=c-btn]):not([class*=c-link-arrow]):not(.footer__nav-link):not(.p-top-news__link):not(.p-top-news__cat-link):not(.p-top-effort__item-link):not(.p-top-service__card):not(.p-service__card):not(.c-cta-contact__area):not(.p-company__map):not(.p-company__tel):not(.p-top-links__card):not(.p-recruit-entry__card):not(.p-top-insights__card):not(.c-post-card):not(.c-post-ranking__link):not(.c-post-detail__back):not(.p-notfound__back):not(.c-post-detail__content a):not(.p-privacy__content a):not(.pagination__arrow):hover {
	opacity: 0.7;
}

}

@media (prefers-reduced-motion: reduce) {

body.home .header {
	animation: none;
}

.loader {
	display: none;
}

.js-data-card,
.js-data-card .p-recruit-data__card-title,
.js-data-card .p-recruit-data__card-value,
.js-data-card .p-recruit-data__card-list,
.js-data-card .p-recruit-data__card-illust,
.js-data-card .p-recruit-data__card-note,
.js-data-card .p-recruit-data__average,
.js-data-card .p-recruit-data__chart {
	opacity: 1;
	transition: none;
	translate: 0 0;
}

.p-recruit-hero__photo {
	transition: none;
}

.p-staff__card-img.is-flipped .p-staff__card-peel {
	animation: none;
}

.p-staff__card-img.is-flipped .p-staff__card-photo--back {
	-webkit-mask-image: none;
	animation: none;
	mask-image: none;
}

.p-top-mv__catch {
	transition: none;
}

body.home .p-top-mv__catch,
body.home .p-top-mv__catch-img {
	animation: none;
}

body.home .seminar-ribbon {
	animation: none;
}

*,
*::before,
*::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
	transition-duration: 0.01ms !important;
}

}

@media screen and (min-width: 376px) {

.p-about-effort__catch .sp-only {
	display: none;
}

}

@media screen and (min-width: 476px) and (max-width: 767px) {

.p-staff__catch br {
	display: none;
}

}

@media (min-width: 768px) {

html {
	scroll-padding-top: 78px;
	scroll-padding-top: var(--header-height);
}

}

@media (max-width: 1440px) {

html {
	font-size: calc(16 / 1440 * 100vw);
	font-size: calc(16 / var(--inner-value) * 100vw);
}

}

@media screen and (max-width: 767px) {

:root {
	--vw: 375 * 100vw; /* SPカンプの幅に合わせる */
	--cqi: 375 / 100cqi;
}

html {
	font-size: 16px;
}

.l-inner {
	max-width: 37.5rem;
	padding-left: 1.5rem;
	padding-left: var(--padding-sp);
	padding-right: 1.5rem;
	padding-right: var(--padding-sp);
}

body:not(.home) main {
	padding-top: 64px;
	padding-top: var(--header-height-sp);
}

.l-section {
	padding-bottom: 3.75rem;
	padding-top: 3.75rem;
}

.l-section--small {
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}

.l-section--large {
	padding-bottom: 5rem;
	padding-top: 5rem;
}

.c-cta-contact {
	min-height: 16.0625rem;
}

.c-cta-contact::before {
	background-image: url(../images/cta-contact-sp.jpg);
}

.c-cta-contact__inner {
	padding-top: 1.75rem;
}

.c-cta-contact__en {
	font-size: 0.75rem;
}

.c-cta-contact__title {
	font-size: 1.625rem;
	line-height: 1.8;
	margin-top: -0.5625rem;
}

.c-cta-contact__link {
	margin-left: 0;
	margin-top: 7.25rem;
}

.c-link-arrow {
	font-size: 0.8125rem;
}

.c-page-title__en {
	font-size: 0.75rem;
}

.c-page-title__ja {
	font-size: 1.625rem;
	margin-top: 0.3125rem;
}

.c-post-detail {
	padding-bottom: 7.5rem;
	padding-top: 2.125rem;
}

.single-insights .c-post-detail {
	padding-bottom: 3rem;
}

.c-post-detail__meta {
	font-size: 0.75rem;
	gap: 1.1875rem;
	margin-left: 0.1875rem;
	padding-left: 1.4375rem;
}

.c-post-detail__meta::before {
	top: 0.1875rem;
	width: 0.625rem;
}

.c-post-detail__title {
	font-size: 1.375rem;
	line-height: 1.4090909091;
	margin-left: 0.125rem;
	margin-right: 0.125rem;
	margin-top: 0.9375rem;
	min-height: calc(1.9375rem * 2);
	width: auto;
}

.c-post-detail__img {
	aspect-ratio: 325/196;
	height: auto;
	margin-top: 3.125rem;
	width: auto;
}

.c-post-detail__noimage {
	width: 11.25rem;
}

.c-post-detail__content {
	font-size: 0.9375rem;
	line-height: 2.5;
	margin-left: -0.125rem;
	margin-right: -0.125rem;
	margin-top: 3.125rem;
	width: auto;
}

.c-post-detail__content h2 {
	font-size: 0.9375rem;
	margin-top: 2.125rem;
}

.c-post-detail__content h2 + p {
	margin-top: 1.25rem;
}

.c-post-detail__back {
	font-size: 0.8125rem;
	margin-top: 7.5rem;
}

.c-post-ranking {
	padding-bottom: 3.3125rem;
	padding-top: 2.8125rem;
}

.c-post-ranking__inner {
	display: block;
	padding-left: 1.5rem;
	padding-left: var(--padding-sp);
}

.c-post-ranking__en {
	font-size: 0.75rem;
}

.c-post-ranking__list {
	animation: ranking-loop 25s linear infinite;
	margin-right: calc(1.5rem * -1);
	margin-right: calc(var(--padding-sp) * -1);
	margin-top: 2rem;
	width: -moz-max-content;
	width: max-content;
}

.c-post-ranking__item--clone {
	display: block;
}

.c-section-label__en {
	font-size: 0.8125rem;
}

.c-section-label__ja {
	font-size: 1rem;
	line-height: 1.875;
}

.c-section-title__en {
	font-size: 0.875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	letter-spacing: -0.02em;
	padding-left: 1.04375rem;
}

.c-section-title__en::before {
	height: 0.49375rem;
	left: 0.15rem;
	width: 0.64375rem;
}

.c-section-title__ja {
	font-size: 1.5rem;
	line-height: 1.5;
	margin-top: 0.1875rem;
}

.footer {
	padding-bottom: 6rem;
	padding-top: 2.5rem;
}

.footer__head {
	display: block;
}

.footer__logo {
	margin-left: auto;
	margin-right: auto;
	width: 18.125rem;
}

.footer__cta {
	display: flex;
	margin-left: -0.3125rem;
	margin-right: -0.3125rem;
	margin-top: 4.8125rem;
	width: auto;
}

.footer__nav {
	margin-left: -0.3125rem;
	margin-right: -0.3125rem;
	margin-top: 2.5rem;
}

.footer__nav-list {
	grid-gap: 0.75rem;
	display: grid;
	gap: 0.75rem;
}

.footer__nav-link {
	background-color: #fff;
	background-color: var(--white);
	border-radius: 0.3125rem;
	font-size: 1.0625rem;
	font-weight: 700;
	font-weight: var(--fw-bold);
	min-height: 3.125rem; /* カンプ 7:6262 のホバー: SPは緑の角丸に白文字へ反転する */
}

.footer__body {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 1.9375rem;
}

.footer__offices {
	border-top: 1px solid #003e53;
	border-top: 1px solid var(--main);
	grid-column: auto;
	grid-row: auto;
	margin-top: 2.9375rem;
	padding-right: 0;
	padding-top: 1.5rem;
}

.footer__col {
	border-top: 1px solid #003e53;
	border-top: 1px solid var(--main);
	margin-top: 1.8125rem;
	padding-left: 0;
	padding-top: 1.25rem;
}

.footer__col--divider {
	border-left: none;
	grid-column: auto;
	grid-row: auto;
}

.footer__col--related {
	grid-column: auto;
	grid-row: auto;
	margin-top: 2.625rem;
}

.footer__btn {
	margin-top: 2rem;
	width: 100%;
}

.footer__badge-list {
	gap: 1.375rem;
	grid-column: auto;
	grid-row: auto;
	justify-content: center;
	margin-top: 0;
	padding-left: 0;
}

.footer__bottom {
	gap: 0.625rem;
	margin-top: 4.25rem;
}

.header {
	height: 64px;
	height: var(--header-height-sp);
}

.header__inner {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.header__logo {
	width: 10.625rem;
}

.header__nav {
	display: none;
}

.header__cta {
	display: none;
}

.header__hamburger {
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: block;
	flex-shrink: 0;
	height: 1.6875rem;
	margin-left: auto;
	position: relative;
	width: 2.4375rem;
}

.header__drawer {
	background-color: #009d85;
	background-color: var(--accent);
	display: block;
	height: calc(100vh - 64px);
	height: calc(100vh - var(--header-height-sp));
	height: calc(100svh - 64px);
	height: calc(100svh - var(--header-height-sp));
	left: 0;
	opacity: 0;
	overflow-y: auto;
	padding: 2.9375rem 1.625rem 2.5rem;
	position: fixed;
	top: 64px;
	top: var(--header-height-sp);
	transition: opacity 0.3s ease, visibility 0.3s ease;
	visibility: hidden; /* 開いている間はスクロールバーが消える。100% だと予約ぶんの帯が右に残る */
	width: 100vw;
	z-index: 99;
	z-index: var(--z-index-drawer);
}

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

.header__drawer-nav {
	margin-left: auto;
	margin-right: auto;
	max-width: 37.5rem;
}

.loader__logo {
	width: 12.5rem;
}

.p-about-band {
	aspect-ratio: 375/239;
}

.p-about-band img {
	left: 48.1333%;
	top: -46.025%;
	width: 167.733%;
}

.p-about-effort {
	padding-bottom: 6.3125rem;
	padding-top: 4.375rem;
}

.p-about-effort__head {
	display: block;
}

.p-about-effort__lead {
	font-size: 0.875rem;
}

.p-about-effort__title {
	font-size: 1.6875rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.33;
	margin-top: 0.9375rem;
}

.p-about-effort__intro {
	font-size: 0.9375rem;
	line-height: 2.13;
	margin-left: auto;
	margin-top: 4.375rem;
	width: 83.79%;
}

.p-about-effort__list {
	gap: 1.3125rem;
	margin-top: 3.9375rem;
}

.p-about-effort__item {
	scroll-margin-top: calc(64px + 1.25rem);
	scroll-margin-top: calc(var(--header-height-sp) + 1.25rem);
}

.p-about-effort__toggle {
	gap: 1.625rem;
	padding: 1.1875rem 3.75rem 1.1875rem 1.1875rem;
}

.p-about-effort__icon {
	width: 4.0625rem;
}

.p-about-effort__icon img {
	height: 3.3125rem;
}

.p-about-effort__name {
	font-size: 1.375rem;
}

.p-about-effort__mark {
	right: 1.1875rem;
}

.p-about-effort__body-inner {
	padding-left: 1.1875rem;
	padding-right: 1.1875rem;
}

.p-about-effort__catch {
	font-size: 1rem;
	line-height: 1.5;
	margin-top: 0.625rem;
}

.p-about-effort__text {
	font-size: 0.875rem;
	margin-bottom: 2.1875rem;
	margin-top: 0.875rem;
}

.p-about-grid {
	grid-template-columns: minmax(0, 1fr);
}

.p-about-grid__item {
	padding-bottom: 1.4375rem;
	padding-top: 1.4375rem; /* SPは1列のため、3番目の下線は4番目の上線と重なる */
}

.p-about-grid__item:nth-child(3) {
	border-bottom: 0;
}

.p-about-grid__title {
	font-size: 1.25rem;
	line-height: 1.5;
}

.p-about-grid__text {
	font-size: 0.875rem;
	line-height: 1.79;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.375rem;
	max-width: 17.5625rem;
}

.p-about-hero {
	background-size: 100% 82.25rem;
	margin-top: calc(64px * -1);
	margin-top: calc(var(--header-height-sp) * -1);
	padding-top: calc(64px + 4.4375rem);
	padding-top: calc(var(--header-height-sp) + 4.4375rem);
}

.p-about-hero__mission {
	margin-top: 7.9375rem;
	width: 72.78%;
}

.p-about-hero__vision {
	margin-left: 27.52%;
	margin-top: 8rem;
	width: 73.09%;
}

.p-about-hero__label {
	font-size: 0.75rem;
}

.p-about-hero__heading {
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	margin-top: 0;
}

.p-about-hero__text {
	font-size: 0.875rem;
	letter-spacing: 0;
	line-height: 2.15;
	margin-top: 2.0625rem;
}

.p-about-hero__photo {
	aspect-ratio: 375/265;
	margin-top: 5rem;
}

.p-about-hero__photo img {
	left: 51.3333%;
	width: 121.867%;
}

.p-about-photos {
	height: 25.5rem;
	margin-top: 6rem;
}

.p-about-photos__item--01 {
	height: 14.75rem;
	left: calc(50% - 11.71875rem);
	width: 11.0625rem;
}

.p-about-photos__item--01 img {
	left: -5.3125rem;
	top: -0.1875rem;
	width: 22.375rem;
}

.p-about-photos__item--02 {
	height: 7.3125rem;
	right: calc(50% - 11.71875rem);
	top: 3.75rem;
	width: 9.75rem;
}

.p-about-photos__item--02 img {
	left: -0.9375rem;
	top: 0.0625rem;
	width: 10.875rem;
}

.p-about-photos__item--03 {
	height: 8.3125rem;
	left: calc(50% + 0.59375rem);
	top: 17.1875rem;
	width: 11.125rem;
}

.p-about-photos__item--03 img {
	left: -2.375rem;
	top: -1.5625rem;
	width: 15.25rem;
}

.p-about-stance {
	padding-bottom: 6.375rem;
	padding-top: 5.875rem;
}

.p-about-stance__quote {
	font-size: 1.75rem;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4.5rem;
	text-align: left;
	width: -moz-fit-content;
	width: fit-content;
}

.p-about-stance__quote-line {
	display: block;
	white-space: nowrap;
}

.p-about-stance__quote-line:last-child {
	margin-left: 3.375rem;
}

.p-about-stance__note {
	font-size: 0.875rem;
	line-height: 1.64;
	margin-top: 2rem;
}

.p-about-stance .p-about-grid {
	margin-top: 3.4375rem;
}

.p-about-symbol__heading .c-section-label__ja {
	color: #003e53;
	color: var(--main);
	font-size: 1.5625rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.2;
}

.p-about-symbol {
	padding-bottom: 5.875rem;
	padding-top: 3rem;
}

.p-about-symbol__slider {
	margin-top: 4.8125rem;
}

.p-about-symbol__list {
	gap: 2.1875rem;
	justify-content: flex-start;
	margin-bottom: -1.5rem;
	margin-left: calc(1.5rem * -1);
	margin-left: calc(var(--padding-sp) * -1);
	margin-right: calc(1.5rem * -1);
	margin-right: calc(var(--padding-sp) * -1);
	margin-top: -1.5rem;
	overflow-x: auto;
	padding-bottom: 1.5rem;
	padding-left: 3.8125rem;
	padding-right: 3.8125rem;
	padding-top: 1.5rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.p-about-symbol__item {
	scroll-snap-align: center;
}

.p-about-symbol__circle {
	transition: scale 0.4s ease;
}

.p-about-symbol__title {
	font-size: 1.1875rem;
}

.p-about-symbol__item.is-current .p-about-symbol__circle {
	scale: 1.15;
}

.p-about-value {
	padding-top: 6.8125rem;
}

.p-about-value .p-about-grid {
	margin-top: 1.6875rem;
}

.p-company {
	padding-bottom: 6.25rem;
	padding-top: 3.9375rem;
}

.p-company__band {
	aspect-ratio: 375/183;
	margin-top: 3.125rem;
}

.p-company__band img {
	left: 51.7333%;
	top: 0;
	width: 103.467%;
}

.p-company__section {
	margin-top: 6.9375rem;
}

.p-company__section:first-child {
	margin-top: 1.875rem;
}

.p-company__heading {
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	line-height: 1.8333333333;
}

.p-company__cards {
	margin-top: 2.6875rem;
}

.p-company__table {
	margin-top: 1.25rem;
}

.p-company__row {
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: 1.1875rem;
	padding-top: 0.9375rem;
}

.p-company__th {
	padding-left: 0;
}

.p-company__td {
	font-size: 1rem;
	line-height: 1.875;
	padding-left: 0;
}

.p-company__partners {
	margin-top: 0.4375rem;
}

.p-company__history {
	margin-top: 1.9375rem;
}

.p-company__history-row {
	grid-template-columns: 4.9375rem minmax(0, 1fr);
	margin-top: 2rem;
}

.p-contact {
	padding-bottom: 7.5625rem;
	padding-top: 3.9375rem;
}

.p-contact__tel {
	display: block;
	height: auto;
	margin-top: 4.875rem;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
}

.p-contact__tel-label {
	font-size: 0.9375rem; /* SPカンプ 7:2942 インク行実測: 文字上端 292（ブロック上端262から30、行送りぶんを引いて28） */
	padding-top: 1.75rem;
	text-align: center;
}

.p-contact__tel-body {
	margin-top: 0.40625rem;
}

.p-contact__tel-number {
	font-size: 2.125rem;
	gap: 0.375rem;
}

.p-contact__tel-icon {
	height: 2rem;
	width: 1.24375rem;
}

.p-contact__tel-note {
	background-color: #fff;
	background-color: var(--white); /* 枠の角丸10から内側1pxぶん引いた9。角を丸めないと角だけ濃紺の縁が細く見える */
	border-radius: 0 0 0.5625rem 0.5625rem;
	color: #555;
	color: var(--form-note);
	letter-spacing: 0.1em;
	line-height: 1.4666666667;
	margin-bottom: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.3125rem;
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
	text-align: center; /* 白地の受付時間欄。1px 内側に置いて枠線のように濃紺を見せる（カンプ準拠） */
	width: calc(100% - 2px);
}

.p-contact__form {
	border-top: 0;
	margin-top: 4.0625rem;
	padding-top: 0;
}

.p-contact__form-head {
	grid-template-columns: minmax(0, 1fr);
}

.p-contact__form-label {
	font-size: 1.25rem;
}

.p-contact__form-title {
	padding-top: 0;
}

.p-contact__form-note {
	font-size: 0.875rem;
	line-height: 1.4285714286;
}

.p-contact__form-lead {
	font-size: 0.9375rem;
	line-height: 1.8;
	margin-top: 2.3125rem;
}

.p-contact__form--confirm .p-contact__form-lead-input {
	display: none;
}

.p-contact__form--confirm .p-contact__form-lead-confirm {
	display: inline;
}

.p-contact__body {
	margin-left: 0;
}

.p-contact__foot {
	margin-left: 0;
}

.p-contact__types-block {
	margin-top: 2.75rem;
}

.p-contact__label {
	font-size: 0.9375rem;
	line-height: 1.3333333333;
}

.p-contact__fields {
	gap: 3.3125rem;
	margin-top: 4.125rem;
}

.p-contact__input {
	height: 3.6875rem;
}

.p-contact__input--textarea {
	height: 5.875rem;
	padding-bottom: 1rem;
	padding-top: 1rem;
}

.p-contact__privacy-title {
	margin-top: 8.125rem;
}

.p-contact__privacy {
	padding: 1.125rem 1.1875rem 1.25rem;
}

.p-contact__privacy-heading {
	font-size: 0.9375rem;
	line-height: 1.3333333333;
	margin-bottom: 2.8125rem;
	margin-right: 0;
	text-align: center;
}

.p-contact__privacy-body p,
.p-contact__privacy-body h2,
.p-contact__privacy-body h3,
.p-contact__privacy-body h4,
.p-contact__privacy-body ul {
	margin-top: 1rem;
}

.p-contact__privacy-body h2,
.p-contact__privacy-body h3,
.p-contact__privacy-body h4 {
	font-size: 0.875rem;
}

.p-contact__privacy-body h2 {
	margin-top: 2rem;
}

.p-contact__privacy-body {
	font-size: 0.8125rem;
	height: 100%;
	letter-spacing: 0.1em;
	padding-right: 0;
}

.p-contact__agree {
	margin-top: 2.375rem;
}

.p-contact__submit {
	font-size: 1.125rem;
	margin-top: 5.8125rem;
}

.p-contact:has(.p-contact__form--confirm) {
	padding-bottom: 3.625rem;
}

.p-contact__form--confirm {
	margin-top: 1.625rem;
}

.p-contact__form--confirm .p-contact__form-title {
	display: none;
}

.p-contact__confirm {
	margin-top: 4.625rem;
}

.p-contact__confirm-label {
	font-size: 0.9375rem;
	line-height: 1.3333333333;
}

.p-contact__confirm-value {
	font-size: 0.875rem;
	line-height: 2;
	padding-left: 1rem;
	padding-right: 1rem;
}

.p-contact__actions {
	border-top: 0;
	flex-direction: column;
	gap: 4.375rem;
	margin-left: 0;
	margin-top: 3.5625rem;
	padding-top: 0;
}

.p-contact__send {
	font-size: 1.125rem;
}

.p-contact__back {
	font-size: 0.9375rem;
	order: 1;
}

.p-contact__body .wpcf7-not-valid-tip {
	font-size: 0.75rem;
	line-height: 1.6666666667;
}

.p-contact__body .wpcf7-response-output {
	font-size: 0.875rem;
	margin-top: 1.875rem;
}

.p-insights-archive {
	padding-bottom: 4.25rem;
	padding-top: 3.9375rem;
}

.p-insights-archive__intro {
	display: block;
	margin-top: 2.8125rem;
	padding-left: 0;
}

.p-insights-archive__img {
	aspect-ratio: 286/192;
	border-radius: 0.3125rem;
	height: auto;
	width: calc(100% - 2.5625rem);
}

.p-insights-archive__text {
	letter-spacing: -0.1em;
	line-height: 2;
	margin-left: 5.6875rem;
	margin-top: 2.25rem;
	min-width: 14.9375rem;
	width: auto;
}

.p-insights-archive__filter {
	margin-top: 3.625rem;
}

.p-insights-archive__list {
	gap: 2.6875rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 6.125rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.p-insights-archive__pagination {
	margin-top: 4.375rem;
}

.p-insights-author {
	margin-top: 4.5rem;
	padding-bottom: 1.75rem;
	padding-top: 1.5625rem;
	width: auto;
}

.p-insights-author__body {
	gap: 1.6875rem;
	margin-top: 1.4375rem;
	padding-left: 0;
}

.p-insights-author__img {
	align-self: start;
	aspect-ratio: 64/79;
	height: auto;
	margin-top: 0.1875rem;
	width: 4rem;
}

.p-insights-author__info {
	padding-top: 0;
}

.p-insights-author__org {
	font-size: 0.8125rem;
}

.p-insights-author__role {
	font-size: 0.8125rem;
}

.p-insights-author__name {
	font-size: 1.1875rem;
	margin-top: 0.9375rem;
}

.p-news-archive {
	padding-bottom: 4.25rem;
	padding-top: 3.5rem;
}

.p-news-list {
	gap: 2.6875rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 4.6875rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.p-news-archive__pagination {
	margin-top: 4.25rem;
}

.p-news-filter {
	gap: 1.4375rem;
	margin-left: 0;
}

.p-news-hero {
	height: 11.25rem;
	margin-top: 0;
}

.p-news-hero::before {
	height: 18.8125rem;
	left: -1.0625rem;
	top: -1.875rem;
	width: 28.1875rem;
}

.p-news-hero__inner {
	padding-top: 3.9375rem;
}

.p-news-hero .c-page-title__ja {
	margin-top: 0.3125rem;
}

.p-notfound {
	padding-bottom: 7.5rem;
	padding-top: 7.875rem;
}

.p-notfound__title {
	font-size: 2.5rem;
	line-height: 1.4375;
}

.p-notfound__text {
	margin-top: 2.3125rem;
}

.p-notfound__back {
	margin-top: 6.3125rem;
}

.p-page {
	padding-bottom: 6.25rem;
	padding-top: 3.9375rem;
}

.p-page__content {
	width: auto;
}

.p-privacy {
	padding-bottom: 6.25rem;
	padding-top: 3.9375rem;
}

.p-privacy__content {
	margin-top: 7.8125rem;
	width: auto;
}

.p-recruit-culture {
	padding-bottom: 1.5625rem;
	padding-top: 3.9375rem;
}

.p-recruit-culture__band + .p-recruit-culture__inner {
	margin-top: 4.875rem;
}

.p-recruit-culture__head {
	margin-left: 0;
}

.p-recruit-culture__en {
	font-size: 0.75rem;
	line-height: 1.25;
}

.p-recruit-culture__ja {
	margin-top: 0.25rem;
}

.p-recruit-culture__cards {
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 2.5rem;
}

.p-recruit-culture__card {
	padding: 1.4375rem 1.25rem;
}

.p-recruit-culture__card-title {
	font-size: 1.375rem;
	line-height: 1.3636363636;
}

.p-recruit-culture__card-text {
	font-size: 0.875rem;
	line-height: 1.9285714286;
	margin-top: 0.5rem;
}

.p-recruit-culture__band {
	height: 11.125rem;
	margin-top: 2.9375rem;
	padding-top: 1.8125rem;
}

.p-recruit-culture__band-list {
	--band-gap: 0.875rem;
	animation-duration: 28s;
}

.p-recruit-culture__band-item {
	width: 9.75rem;
}

.p-recruit-culture__band-item:nth-child(even) {
	margin-top: 1.9375rem;
}

.p-recruit-culture__band-item { /* SPの帯写真は角丸5（カンプ 7:2603 実測） */
}

.p-recruit-culture__band-item img {
	border-radius: 0.3125rem;
	height: 6.9375rem;
}

.p-recruit-data {
	background-image: radial-gradient(ellipse 131.87vw 30.90625rem at 50% 30.90625rem, #009d85 99.7%, transparent 100%), linear-gradient(#009d85, #009d85);
	background-image: radial-gradient(ellipse 131.87vw 30.90625rem at 50% 30.90625rem, var(--accent) 99.7%, transparent 100%), linear-gradient(var(--accent), var(--accent));
	background-size: 100% 30.90625rem, 100% calc(100% - 30.90625rem);
	margin-top: -3rem;
	padding-bottom: 6.0625rem;
	padding-top: 4.3125rem;
}

.p-recruit-data__title {
	font-size: 1.625rem;
}

.p-recruit-data__head {
	margin-left: 0;
	margin-top: 4.1875rem;
}

.p-recruit-data__en {
	font-size: 0.75rem;
}

.p-recruit-data__grid {
	gap: 1.375rem;
	grid-template-columns: minmax(0, 1fr);
	margin-left: auto;
	margin-right: auto;
	margin-top: 3.3125rem; /* インナー幅いっぱいだと広いSPで間延びするので上限を設けて中央寄せ */
	max-width: 28.75rem;
}

.p-recruit-data__col {
	gap: 1.375rem;
}

.p-recruit-data__card {
	border-radius: 0.3125rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(3) .p-recruit-data__card-value {
	align-self: auto;
	margin-bottom: 0;
}

.p-recruit-data__card:has(.p-recruit-data__card-note--start) .p-recruit-data__card-value {
	margin-bottom: 0;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(5) .p-recruit-data__card-value,
.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(6) .p-recruit-data__card-value {
	align-self: center;
}

.p-recruit-data__card-illust--walk {
	bottom: 0.75rem;
	height: 7.6875rem;
	right: 1.625rem;
	top: auto;
}

.p-recruit-data__card-value {
	gap: 1.1875rem;
}

.p-recruit-data__card-number {
	font-size: 3.875rem;
	line-height: 1;
}

.p-recruit-data__card-note {
	font-size: 0.875rem;
	padding: 0.6875rem 1rem;
}

.p-recruit-data__card-note--start {
	left: -1.5rem;
	top: -0.75rem;
}

.p-recruit-data__card-note--end {
	right: -1.5rem;
	top: 0.6875rem;
}

.p-recruit-data__card-illust--ribbon {
	height: 5rem;
	right: 1rem;
}

.p-recruit-data__card-illust--plant {
	bottom: 5.1875rem;
	height: 5.1875rem;
	right: 0.9375rem;
}

.p-recruit-data__card-note--bottom {
	bottom: 0.9375rem;
	left: -1.5rem;
	right: auto;
}

.p-recruit-data__card-list {
	margin-top: 0.875rem;
}

.p-recruit-data__card-list small {
	font-size: 0.62em;
}

.p-recruit-data__card-list li {
	font-size: 1.25rem;
	padding-left: 1.25rem;
	white-space: normal;
}

.p-recruit-data__card-list li::before {
	height: 0.625rem;
	width: 0.625rem;
}

.p-recruit-data__card--training .p-recruit-data__card-list {
	margin-top: 0.875rem;
}

.p-recruit-data__card--training:has(.p-recruit-data__card-note--bottom) .p-recruit-data__card-list {
	padding-bottom: 4.375rem;
}

.p-recruit-data__card--training .p-recruit-data__card-list li {
	line-height: 1.9;
	padding-left: 1.25rem;
}

.p-recruit-data__average {
	margin-top: 0;
}

.p-recruit-data__average .p-recruit-data__card-number {
	font-size: 1.75rem;
}

.p-recruit-data__average-label {
	margin-right: 0;
}

.p-recruit-data__chart {
	margin-top: 0.1875rem;
}

.p-recruit-data__bar-row {
	min-height: 4.9375rem;
}

.p-recruit-data__bar-body {
	gap: 0.375rem;
}

.p-recruit-data__card-list:has(small) {
	margin-right: 0;
}

.p-recruit-data__col {
	display: contents;
}

.p-recruit-data__card {
	padding: 0.75rem 1.25rem;
}

/* カンプ 7:2486 実測: 年齢構成カードは最終行から下端まで6px */

.p-recruit-data__card--chart {
	padding-bottom: 0.375rem;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(1) {
	min-height: 6.25rem;
	order: 1;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(2) {
	min-height: 12.0625rem;
	order: 2;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(3) {
	min-height: 5.4375rem;
	order: 3;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(4) {
	min-height: 14.25rem;
	order: 4;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(5) {
	min-height: 5.4375rem;
	order: 6;
}

.p-recruit-data__col:first-child .p-recruit-data__card:nth-child(6) {
	min-height: 5.4375rem;
	order: 8;
}

.p-recruit-data__col:last-child .p-recruit-data__card:nth-child(1) {
	min-height: 25.375rem;
	order: 5;
}

.p-recruit-data__col:last-child .p-recruit-data__card:nth-child(2) {
	min-height: 23.4375rem;
	order: 7;
}

.p-recruit-data__card-title {
	font-size: 0.9375rem;
	white-space: nowrap;
}

.p-recruit-data__card-unit,
.p-recruit-data__card-label,
.p-recruit-data__average-label {
	font-size: 0.75rem;
}

.p-recruit-data__bar-label {
	font-size: 0.9375rem;
}

.p-recruit-data__bar-value {
	font-size: 2.875rem;
}

.p-recruit-data__bar-value small {
	font-size: 1rem;
}

.p-recruit-data__bar-icon {
	width: 2.5rem;
}

.p-recruit-entry {
	padding-bottom: 3.375rem;
	padding-top: 3.25rem;
}

.p-recruit-entry__inner {
	gap: 1.375rem;
	grid-template-columns: minmax(0, 1fr);
}

.p-recruit-entry__card {
	border-radius: 0.625rem;
	min-height: 10.5625rem;
	padding-left: 1.3125rem;
	padding-right: 1.25rem;
}

.p-recruit-entry__card-title {
	font-size: 1.125rem;
}

.p-recruit-entry__card--accent .p-recruit-entry__card-title {
	line-height: 1.9;
}

.p-recruit-entry__card--accent {
	min-height: 11rem;
}

.p-recruit-entry__card-sub {
	font-size: 0.8125rem;
}

.p-recruit-hero {
	background-image: linear-gradient(rgb(51, 125, 148), rgb(51, 125, 148));
	margin-top: calc(64px * -1);
	margin-top: calc(var(--header-height-sp) * -1);
	padding-top: calc(64px + 3.9375rem);
	padding-top: calc(var(--header-height-sp) + 3.9375rem);
}

.p-recruit-hero__bg {
	--hero-h: 48.375rem; /* SPカンプ 7:2417 の写真帯（Frame 14810）は y=-8＝画面の最上部から。
       ヘッダーの裏まで写真を敷く（PCは上端78pxが白地なのでそのまま） */
	--hero-top: 0px; /* データの弧は SP で 494.5px、ヒーローに 48px 被さる */
	bottom: calc(27.90625rem * -1);
}

.p-recruit-hero__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-bottom: 0;
}

.p-recruit-hero__img--01 {
	aspect-ratio: 287/387;
	height: auto;
	left: auto;
	margin-left: 1.25rem;
	margin-top: 4.125rem;
	order: 1;
	position: relative;
	top: auto;
	width: 17.9375rem;
}

.p-recruit-hero__text {
	font-size: 0.875rem;
	line-height: 2.15;
	margin-left: auto;
	margin-top: 3.1875rem;
	order: 3;
	width: 80.43%;
}

.p-recruit-hero__text p + p {
	margin-top: 2.15em;
}

.p-recruit-hero__catch {
	font-size: 1.5rem;
	line-height: 1.5833333333;
	margin-top: -2.9375rem;
	order: 2;
	position: static;
}

.p-recruit-hero__img--02 {
	--edge: min(0.5rem, var(--edge-gap) * 9999);
	aspect-ratio: 216/154;
	border-radius: 0.5rem min(0.5rem, max(0px, (100vw - 37.5rem) / 2) * 9999) min(0.5rem, max(0px, (100vw - 37.5rem) / 2) * 9999) 0.5rem;
	border-radius: 0.5rem var(--edge) var(--edge) 0.5rem;
	height: auto;
	left: auto;
	margin-left: auto;
	margin-right: calc(1.5rem * -1);
	margin-right: calc(var(--padding-sp) * -1);
	margin-top: 3.125rem;
	order: 4;
	position: relative;
	top: auto;
	width: 13.5rem;
}

.p-recruit-hero__img--03 {
	--edge: min(0.5rem, var(--edge-gap) * 9999);
	aspect-ratio: 133/187;
	border-radius: min(0.5rem, max(0px, (100vw - 37.5rem) / 2) * 9999) 0.5rem 0.5rem min(0.5rem, max(0px, (100vw - 37.5rem) / 2) * 9999);
	border-radius: var(--edge) 0.5rem 0.5rem var(--edge);
	height: auto;
	left: auto;
	margin-left: calc(1.5rem * -1);
	margin-left: calc(var(--padding-sp) * -1);
	margin-top: -1.875rem;
	order: 5;
	position: relative;
	top: auto;
	width: 8.3125rem;
}

.p-service-detail {
	margin-top: calc(64px * -1);
	margin-top: calc(var(--header-height-sp) * -1);
}

.p-service-detail__hero {
	padding-bottom: 9.9375rem;
	padding-top: calc(64px + 2.3125rem);
	padding-top: calc(var(--header-height-sp) + 2.3125rem);
}

.p-service-detail__en {
	font-size: 0.75rem;
}

.p-service-detail__lead {
	font-size: 1.125rem;
}

.p-service-detail__title {
	font-size: 2.375rem;
	margin-top: -0.25rem;
}

.p-service-detail__illust {
	margin-top: 2.8125rem;
}

.p-service-detail__illust img {
	height: 6.9375rem;
}

.p-service-detail__desc {
	font-size: 1.0625rem;
	margin-top: 3.375rem;
	max-width: 100%;
	width: calc(var(--desc-w-sp) * 0.0625rem);
}

.p-service-detail__note {
	font-size: 0.75rem;
	margin-top: 2.1875rem;
	padding: 0.75rem 1.25rem;
	width: 100%;
}

.p-service-detail__worries {
	padding-bottom: 11.5625rem;
	padding-top: 6.375rem;
}

.p-service-detail__bubble {
	border-radius: 0 0.3125rem 0.3125rem 0;
	left: 0;
	padding: 0.8125rem 1.4375rem;
	top: -2.75rem;
	width: 17.9375rem;
}

.p-service-detail__bubble::after {
	height: 1.25rem;
	left: 1.375rem;
	top: calc(100% - 0.1875rem);
	width: 1.375rem;
}

.p-service-detail__bubble-tag {
	font-size: 1.25rem;
	letter-spacing: 0.03em;
	line-height: 1.5;
}

.p-service-detail__bubble-lead {
	font-size: 0.875rem;
}

.p-service-detail__worry-list {
	width: 100%;
}

.p-service-detail__worry {
	font-size: 0.875rem;
	padding-left: 1.25rem;
}

.p-service-detail__worry::before {
	height: 0.3125rem;
	top: 0.6875rem;
	width: 0.3125rem;
}

.p-service-detail__points {
	padding-bottom: 12.4375rem; /* SPも同様（932 / 375 = 248.54vw）。下端の持ち方はPCと同じ
       （375・4件では従来と同じ1377pxになる） */
}

.p-service-detail__points::before {
	border-radius: 50%/29.125rem;
	bottom: 4.625rem;
	top: -1.25rem;
	width: 248.54vw;
}

.p-service-detail__points-head {
	margin-top: -3.875rem;
}

.p-service-detail__points-title {
	font-size: 1.5625rem;
	line-height: 1.48;
}

.p-service-detail__point-list {
	margin-top: 3.4375rem;
	width: 100%;
}

.p-service-detail__point {
	padding-bottom: 3.125rem;
}

.p-service-detail__point-title {
	font-size: 1.125rem;
	line-height: 1.6666666667;
	margin-top: 1.8125rem;
}

.p-service-detail__point-text {
	font-size: 0.875rem;
	margin-top: 0.9375rem;
}

.p-service-detail__flow {
	padding-bottom: 4.3125rem;
}

.p-service-detail__flow-title {
	font-size: 1.375rem;
	line-height: 1.5;
}

.p-service-detail__flow-box {
	margin-left: 0;
	margin-right: 0;
	margin-top: -1.125rem;
	padding: 3.5625rem 1.25rem 2.1875rem;
}

.p-service-detail__flow-list {
	--flow-gap: 1.4375rem;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: row;
	justify-content: stretch; /* SPは丸の中心どうしをつなぐ縦線 */
}

.p-service-detail__flow-list::before {
	background-color: #005d79;
	background-color: var(--blue);
	bottom: 1.4375rem;
	content: "";
	left: 1.15625rem;
	position: absolute;
	top: 1.4375rem;
	width: 1px;
}

.p-service-detail__flow-list--compact {
	--flow-gap: 1.4375rem;
}

.p-service-detail__flow-step {
	-moz-column-gap: 0.5rem;
	align-items: center;
	background-color: rgb(242, 250, 249);
	border-radius: 0.3125rem;
	column-gap: 0.5rem;
	grid-template-columns: 0.625rem minmax(0, 1fr);
	justify-items: start;
	max-width: none;
	padding-left: 0.875rem;
	position: static;
	width: 100%;
}

.p-service-detail__flow-step::before {
	height: 0.625rem;
	margin-top: 0;
	order: -1;
	width: 0.625rem;
}

.p-service-detail__flow-step::after {
	content: none;
}

.p-service-detail__flow-list--compact .p-service-detail__flow-step {
	max-width: none;
	width: 100%;
}

.p-service-detail__flow-num {
	grid-column: 2;
	grid-row: 1;
}

.p-service-detail__flow-label {
	background-color: transparent;
	border-radius: 0;
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
	min-height: 2.8125rem;
	padding: 0.375rem 0;
}

.p-service-detail__flow-label:has(small) {
	line-height: 0.8888888889;
}

.p-service-detail__flow-label small {
	font-size: 0.75rem;
	line-height: 1.3333333333;
}

.p-service-detail__flow-note {
	margin-top: 1.25rem;
}

.p-service-detail__back {
	margin-top: 6.8125rem;
}

.p-service {
	margin-top: calc(64px * -1);
	margin-top: calc(var(--header-height-sp) * -1);
	padding-bottom: 2.625rem;
	padding-top: calc(64px + 4.25rem);
	padding-top: calc(var(--header-height-sp) + 4.25rem);
}

.p-service__hero { /* 固定pxで敷くと画面幅によっては足りずに写真が繰り返されるため、
       カンプと同じ見え方になる位置で cover に寄せる */
	--hero-h: 47.9375rem;
}

.p-service__hero-img {
	background-position: 67.6% center;
}

.p-service__inner {
	min-height: 0;
}

.p-service__img {
	border-radius: 0.3125rem;
	position: static;
}

.p-service__img--01 {
	aspect-ratio: 287/192;
	height: auto;
	margin-top: 2.9375rem;
	width: 17.9375rem;
}

.p-service__text {
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	line-height: 2.15;
	margin-left: 5.6875rem;
	margin-top: 1.75rem;
	min-width: 14.9375rem; /* 幅を固定すると画面が広い時に左寄せに見えるため、右端は内側に合わせて伸ばす。
       カンプ 7:1902 は239px（内側の右余白を3pxはみ出す）なので、そこは下限として残す */
	width: auto;
}

.p-service__list {
	gap: 0.8125rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 4rem;
}

.p-service__card {
	padding: 0.9375rem 4.5rem 1.125rem 1.25rem;
}

.p-service__card-lead--small {
	font-size: 0.875rem;
}

.p-service__card-title {
	font-size: 1.375rem;
}

.p-service__card-icon {
	height: 2.6875rem;
	right: 1.3125rem;
	width: 2.6875rem;
}

.p-service__img--02 {
	--edge: min(0.3125rem, var(--edge-gap) * 9999);
	aspect-ratio: 262/183;
	border-radius: 0.3125rem min(0.3125rem, max(0px, (100vw - 37.5rem) / 2) * 9999) min(0.3125rem, max(0px, (100vw - 37.5rem) / 2) * 9999) 0.3125rem;
	border-radius: 0.3125rem var(--edge) var(--edge) 0.3125rem;
	height: auto;
	margin-left: auto;
	margin-right: calc(1.5rem * -1);
	margin-right: calc(var(--padding-sp) * -1);
	margin-top: 4.6875rem;
	width: 16.375rem;
}

.p-service__img--03 {
	aspect-ratio: 146/184;
	height: auto;
	margin-left: 0.1875rem;
	margin-top: 1.4375rem;
	width: 9.125rem;
}

.p-staff {
	padding-bottom: 11rem;
	padding-top: 3.9375rem;
}

.p-staff__band {
	aspect-ratio: 375/183;
	height: auto;
	margin-top: 3.125rem;
}

.p-staff__band img {
	-o-object-position: 50% 50%;
	object-position: 50% 50%;
}

.p-staff__intro {
	display: block;
	margin-top: 1.75rem;
}

.p-staff__catch {
	font-size: 1.375rem;
	line-height: 1.5;
	margin-left: -0.75rem;
}

.p-staff__text {
	font-size: 0.875rem;
	line-height: 2.15;
	margin-top: 2.5rem;
}

.p-staff__filter {
	margin-top: 2.5rem;
}

.p-staff__list {
	gap: 3.875rem 1.4375rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 6rem;
}

.p-staff__card-img {
	aspect-ratio: 152/180;
}

.p-staff__card-img::after {
	height: 1.25rem;
	width: 1.5525rem;
}

.p-staff__card-img .p-staff__card-photo--back {
	--peel-w: 1.5525rem;
	--peel-h: 1.25rem;
}

.p-staff__card-peel {
	height: 1.25rem;
	width: 1.5525rem;
}

.p-staff__back {
	font-size: 0.9375rem;
	margin-top: 8.4375rem;
}

.p-staff__card-en {
	bottom: 1.75rem;
	font-size: 0.6875rem;
}

.p-staff__card-org {
	line-height: 1.2;
	margin-top: 1.0625rem;
	min-height: 2.1rem;
}

.p-staff__card-role {
	margin-top: 0.525rem;
}

.p-staff__card-name {
	font-size: 1.25rem;
	margin-top: -0.25rem;
}

.p-staff-modal {
	border-radius: 0.625rem;
	max-height: calc(100dvh - 3rem);
	max-width: 37.5rem;
}

.p-staff-modal__side {
	gap: 1.6875rem;
}

.p-staff-modal__inner {
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	max-height: calc(100dvh - 3rem);
	padding: 2.5rem 2.4375rem;
}

.p-staff-modal__org {
	padding-right: 3.125rem;
}

.p-staff-modal__photo::after {
	height: 2.24625rem;
	width: 2.8675rem;
}

.p-staff-modal__photo--blank {
	aspect-ratio: 249/292;
}

.p-staff-modal__photo--blank::before {
	height: 2.24625rem;
	width: 2.8675rem;
}

.p-staff-modal__photo-en {
	bottom: 2.9375rem;
	font-size: 0.875rem;
}

.p-staff-modal__label {
	font-size: 0.8125rem;
	line-height: 2.05;
	margin-top: 2.0625rem;
}

.p-staff-modal__value,
.p-staff-modal__list {
	font-size: 0.875rem;
}

.p-staff-modal__body {
	order: 1;
}

.p-staff-modal__motto-text {
	font-size: 1.125rem;
	line-height: 1.5555555556;
}

.p-staff-modal__motto-text::before {
	margin-right: 0.5rem;
	top: 0.25rem;
}

.p-staff-modal__motto-text::after {
	margin-left: 0.1875rem;
	top: 1.25rem;
}

.p-thanks {
	padding-bottom: 7.625rem;
	padding-top: 3.9375rem;
}

.p-thanks__body {
	border-bottom: 0;
	border-top: 0;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 4.1875rem;
	padding-bottom: 0;
	padding-top: 0;
}

.p-thanks__title {
	font-size: 1.25rem;
	line-height: 1.2;
	text-align: center;
}

.p-thanks__text {
	margin-top: 5rem;
}

.p-thanks__lead {
	font-size: 0.9375rem;
	line-height: 1.9;
}

.p-thanks__note {
	font-size: 0.9375rem;
	font-weight: 500;
	font-weight: var(--fw-medium);
	line-height: 1.9;
	margin-top: 0;
}

.p-thanks__back {
	margin-top: 2.9375rem;
}

.p-top-effort {
	margin-top: -1.1875rem;
	padding-bottom: 4.625rem;
	padding-top: 5.875rem;
}

.p-top-effort__title {
	font-size: 1.75rem;
	margin-top: 0.9375rem;
}

.p-top-effort__list {
	flex-wrap: wrap;
	gap: 0;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2.4375rem;
	max-width: 20.4375rem;
}

.p-top-effort__item {
	width: 8.75rem;
}

.p-top-effort__item:nth-child(3) {
	display: flex;
	justify-content: center;
	margin-bottom: -0.6875rem;
	margin-top: -0.6875rem;
	width: 100%;
}

.p-top-effort__item:nth-child(3) .p-top-effort__item-link {
	width: 8.75rem;
}

.p-top-effort__item-label {
	font-size: 1.125rem;
}

.p-top-effort__item-label--en {
	font-size: 1.0625rem;
}

.p-top-effort__btn {
	display: flex;
	justify-content: flex-end;
	margin-top: 4.875rem;
}

.p-top-insights {
	padding-bottom: 2.375rem;
	padding-top: 19.875rem;
}

.p-top-insights__img {
	aspect-ratio: 243/162;
	height: auto;
	right: 1.5rem;
	top: 6.4375rem;
	width: 15.1875rem;
}

.p-top-insights__title {
	font-size: 1.875rem;
	letter-spacing: 0.03em;
	line-height: 1.53;
}

.p-top-insights__title-sub {
	font-size: 1.25rem;
}

.p-top-insights__title-hint {
	font-weight: 700;
	font-weight: var(--fw-bold);
}

.p-top-insights__heading .c-section-title__ja {
	margin-top: 0.625rem;
}

.p-top-insights__text {
	font-size: 0.9375rem;
	line-height: 2;
	margin-top: 2.5625rem;
}

.p-top-insights__label {
	margin-top: 1.4375rem;
}

.p-top-insights__slider {
	margin-left: calc(1.5rem * -1);
	margin-left: calc(var(--padding-sp) * -1);
	margin-right: calc(1.5rem * -1);
	margin-right: calc(var(--padding-sp) * -1);
	margin-top: 3.375rem;
	padding-left: 1.5rem;
	padding-left: var(--padding-sp);
	padding-right: 1.5rem;
	padding-right: var(--padding-sp);
}

.p-top-insights__label + .p-top-insights__slider {
	margin-top: 0.6875rem;
}

.p-top-insights__card-title {
	font-size: 0.875rem;
}

.p-top-insights__card-meta {
	font-size: 0.8125rem;
}

.p-top-insights__controls {
	flex-direction: column-reverse;
	gap: 1.125rem;
	margin-top: 3.625rem;
}

.p-top-insights__nav {
	gap: 1.4375rem;
}

.p-top-insights__nav-btn {
	height: 2.0625rem;
	width: 2.0625rem;
}

.p-top-insights__nav-arrow::before {
	height: 1.5px;
	width: 0.8125rem;
}

.p-top-insights__nav-arrow::after {
	border-right-width: 1.5px;
	border-top-width: 1.5px;
	height: 0.375rem;
	left: calc(50% + 0.40625rem);
	width: 0.375rem;
}

.p-top-insights__nav-btn--prev .p-top-insights__nav-arrow::after {
	left: calc(50% - 0.40625rem);
}

.p-top-insights__progress {
	height: 0.1875rem;
	width: 100%;
}

.p-top-insights__btn {
	margin-top: 3.625rem;
}

.p-top-links {
	padding-bottom: 2rem;
	padding-top: 3.5rem;
}

.p-top-links__list {
	gap: 1.375rem;
	grid-template-columns: minmax(0, 1fr);
}

.p-top-links__card {
	border-radius: 0.3125rem;
}

.p-top-links__img {
	aspect-ratio: 327/149;
}

.p-top-links__item:nth-child(1) .p-top-links__img img {
	height: auto;
	left: -19.88%;
	min-height: 100%;
	top: 0;
	translate: 0 -35.65%;
	width: 145.26%;
}

.p-top-links__item:nth-child(2) .p-top-links__img img {
	height: auto;
	left: -1.22%;
	min-height: 100%;
	top: 0;
	translate: 0 -30.22%;
	width: 103.06%;
}

.p-top-links__label {
	min-height: 3.8125rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.p-top-links__title {
	font-size: 1rem;
}

.p-top-links__icon {
	height: 0.5rem;
	width: 0.75rem;
}

.p-top-links__icon::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	height: 0.588388125rem;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	width: 0.79419375rem;
}

.p-top-message {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 2.842%, rgba(0, 62, 83, 0.55) 24.592%, #003e53 97.41%);
	height: 189.1875rem;
	margin-top: -69.1875rem;
}

.p-top-message__text {
	line-height: 3.1;
}

.p-top-message__text--01 {
	left: calc(50% - 10.21875rem);
	top: 76.0625rem;
}

.p-top-message__text--02 {
	left: calc(50% - 10.21875rem);
	top: 101.5rem;
}

.p-top-message__text--03 {
	left: calc(50% - 10.03125rem);
	top: 121.1875rem;
}

.p-top-message__catch {
	left: calc(50% - 10.28125rem);
	top: 141.5625rem;
	width: 20.5rem;
}

.p-top-message__btn {
	left: calc(50% - 4.59375rem);
	top: 153.9375rem;
}

.p-top-message__img--01 {
	aspect-ratio: 132/183;
	height: auto;
	left: calc(50% - 10.21875rem);
	top: 163.25rem;
	width: 8.25rem;
}

.p-top-message__img--02 {
	aspect-ratio: 279/179;
	height: auto;
	left: calc(50% - 6.90625rem);
	top: 179.375rem;
	width: 17.4375rem;
}

.p-top-mv {
	height: calc(100vh + 69.1875rem);
	height: calc(100svh + 69.1875rem);
}

.p-top-mv__catch {
	bottom: 5.625rem; /* SPカンプ375px幅の中央からの距離。767pxまで伸びても左に寄らないようにする */
	left: calc(50% - 10.21875rem);
	width: 14.6875rem;
}

body.home .p-top-mv__catch {
	animation-name: catch-wipe-y;
}

.p-top-news {
	margin-top: -0.625rem;
}

.p-top-news__head {
	min-height: 11.25rem;
}

.p-top-news__head-bg {
	height: 18.8125rem;
	left: -4.53%;
	top: -1.875rem;
	width: 120.27%;
}

.p-top-news__body {
	padding-bottom: 4.25rem;
	padding-top: 4rem;
}

.p-top-news__inner {
	grid-template-columns: minmax(0, 1fr);
}

.p-top-news__cats {
	padding-top: 0;
}

.p-top-news__cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5625rem;
	margin-top: 0.4375rem;
}

.p-top-news__cat-link {
	font-size: 0.75rem;
}

.p-top-news__main {
	grid-column: 1;
	grid-row: 2;
	margin-top: 2.375rem;
}

.p-top-news__item:nth-child(n+4) {
	display: none;
}

.p-top-news__link {
	gap: 0.25rem 1rem;
	grid-template-columns: auto minmax(0, 1fr);
	padding-bottom: 1.375rem;
	padding-left: 0;
	padding-right: 2.625rem; /* カンプ 14788 実測: 行115のうち中身の上下が23。1pxは行の下線に使うので下だけ22 */
	padding-top: 1.4375rem; /* SPは2行組みになるため、三角は行の中央ではなく日付の行に合わせる
       （padding-block 23 + 日付の行高 21 の半分） */
}

.p-top-news__link::before {
	left: 0.3125rem;
	top: calc(1.4375rem + 1.3125rem / 2);
}

.p-top-news__date {
	margin-left: 1.75rem;
}

.p-top-news__title {
	font-size: 0.9375rem;
	grid-column: 1/-1;
}

.p-top-news__btn {
	grid-row: 3;
	margin-left: auto;
	margin-top: 1.9375rem;
}

.p-top-news__empty {
	font-size: 0.9375rem;
	padding-bottom: 2.5rem;
	padding-top: 2.5rem;
}

.p-top-recruit {
	min-height: 41.5rem;
}

.p-top-recruit__bg {
	bottom: auto;
	height: 48.6875rem;
	top: -1.4375rem; /* SPは専用写真（recruit-sp.jpg）。高さが先に埋まるので横位置だけが効く */
}

.p-top-recruit__bg img {
	-o-object-position: 39% 46%;
	object-position: 39% 46%;
}

.p-top-recruit__heading {
	padding-top: 2.625rem;
}

.p-top-recruit__heading .c-section-title__en {
	font-size: 0.75rem;
}

.p-top-recruit__heading .c-section-title__ja {
	font-size: 1.1875rem;
	line-height: 1.5;
	margin-top: 0.1875rem;
}

.p-top-recruit__catch {
	font-size: 1.625rem;
	left: calc(1.5rem + 0.125rem);
	left: calc(var(--padding-sp) + 0.125rem);
	top: 27.9375rem;
}

.p-top-recruit__btn {
	left: calc(1.5rem + 0.125rem);
	left: calc(var(--padding-sp) + 0.125rem);
	top: 37.0625rem;
}

.p-top-service {
	padding-bottom: 6.875rem;
	padding-top: 5.1875rem;
}

.p-top-service__img--01 {
	--edge: min(0.1875rem, var(--edge-gap) * 9999);
	aspect-ratio: 287/192;
	border-radius: min(0.1875rem, max(0px, (100vw - 37.5rem) / 2) * 9999) 0.1875rem 0.1875rem min(0.1875rem, max(0px, (100vw - 37.5rem) / 2) * 9999);
	border-radius: var(--edge) 0.1875rem 0.1875rem var(--edge);
	height: auto;
	margin-left: calc(1.5rem * -1);
	margin-left: calc(var(--padding-sp) * -1);
	margin-top: 2.3125rem;
	overflow: hidden;
	position: static;
	width: 17.9375rem;
}

.p-top-service__img--02 {
	aspect-ratio: 195/130;
	height: auto;
	left: 1.4375rem;
	top: 101.0625rem;
	width: 12.1875rem;
}

.p-top-service__heading .c-section-title__en {
	letter-spacing: 0.05em;
}

.p-top-service__heading .c-section-title__ja {
	margin-top: 0.1875rem;
}

.p-top-service__text {
	font-size: 0.9375rem;
	line-height: 2.15;
	margin-left: auto;
	margin-top: 1.8125rem;
	width: 14.9375rem;
}

.p-top-service__btn {
	display: flex;
	margin-left: auto;
	margin-top: 2.1875rem;
	width: -moz-fit-content;
	width: fit-content;
}

.p-top-service__list {
	gap: 0.8125rem;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 4.0625rem;
}

.p-top-service__card {
	padding-right: 4.5rem;
}

.p-top-service__card-title {
	letter-spacing: 0.15em;
}

.p-top-service__card-icon {
	height: 2.6875rem;
	right: 1.3125rem;
	width: 2.6875rem;
}

.p-top-service__card-icon::before {
	-webkit-mask-image: url(../images/icon-arrow.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	background-color: currentcolor;
	height: 0.588388125rem;
	mask-image: url(../images/icon-arrow.svg);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	width: 0.79419375rem;
}

.seminar-ribbon { /* 帯は地色、右端の飾りだけ画像。1枚のSVGを引き伸ばすと preserveAspectRatio で
       中央に収まってしまい、幅の広い端末で両端に地が出る */
	background-color: #009d85;
	background-color: var(--accent);
	background-image: url(../images/mv-ribbon-sp-edge.svg);
	background-position: right bottom;
	background-size: auto 100%;
	bottom: 0;
	height: 3.125rem;
	justify-items: start;
	padding-left: 1.1875rem;
	padding-top: 0;
	right: 0;
	width: 100%;
}

.seminar-ribbon__text {
	font-size: 0.8125rem;
	text-align: left;
}

.pc-only {
	display: none;
}

.sp-only {
	display: block;
}

}

@media (max-width: 767px) {

a[href^="tel:"] {
	pointer-events: auto;
}

}

@media screen and (max-width: 767px) and (any-hover: hover) {

.footer__nav-link:hover {
	background-color: #009d85;
	background-color: var(--accent);
	color: #fff;
	color: var(--white);
}

}

@media (max-width: 375px) {

html {
	font-size: 4.2666666667vw;
}

}

@keyframes ranking-loop {

to {
	translate: calc(-50% - 0.84375rem) 0;
}

}

@keyframes header-in {

from {
	transform: translateY(-100%);
}

}

@keyframes loader-peel {

to {
	scale: var(--peel-scale);
}

}

@keyframes loader-fill {

to {
	clip-path: polygon(calc(100% - var(--fill-w)) 100%, 100% calc(100% - var(--fill-h)), 100% 100%);
}

}

@keyframes loader-out {

to {
	opacity: 0;
	visibility: hidden;
}

}

@keyframes recruit-band {

to {
	translate: calc(-50% - var(--band-gap) / 2) 0;
}

}

@keyframes staff-peel {

0% {
	opacity: 1;
	scale: 1;
}

92% {
	opacity: 1;
}

100% {
	opacity: 0;
	scale: 20;
}

}

@keyframes staff-peel-reveal {

0% {
	-webkit-mask-size: var(--peel-w) var(--peel-h);
	mask-size: var(--peel-w) var(--peel-h);
}

100% {
	-webkit-mask-size: calc(var(--peel-w) * 20) calc(var(--peel-h) * 20);
	mask-size: calc(var(--peel-w) * 20) calc(var(--peel-h) * 20);
}

}

@keyframes staff-peel-back {

0% {
	-webkit-mask-size: calc(var(--peel-w) * 20) calc(var(--peel-h) * 20);
	mask-size: calc(var(--peel-w) * 20) calc(var(--peel-h) * 20);
}

100% {
	-webkit-mask-size: var(--peel-w) var(--peel-h);
	mask-size: var(--peel-w) var(--peel-h);
}

}

@keyframes staff-peel-back-mark {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@keyframes catch-wipe-x {

from {
	clip-path: inset(-5% 100% -5% -5%);
}

to {
	clip-path: inset(-5% -5% -5% -5%);
}

}

@keyframes catch-wipe-y {

from {
	clip-path: inset(-5% -5% 100% -5%);
}

to {
	clip-path: inset(-5% -5% -5% -5%);
}

}

@keyframes catch-rise {

from {
	opacity: 0;
	translate: 0 1.25rem;
}

}

@keyframes seminar-ribbon-in {

from {
	translate: 0 calc(100% + 1.25rem);
}

}


/*# sourceMappingURL=style.css.map */