@charset 'UTF-8';
@-webkit-keyframes uyon-glow {
	0% {
		box-shadow: 0 0 0.6rem 0.2rem rgba(23, 111, 148, 0.7);
	}

	100% {
		box-shadow: 0 0 1.2rem 1.6rem rgba(23, 111, 148, 0);
	}
}

@keyframes uyon-glow {
	0% {
		box-shadow: 0 0 0.6rem 0.2rem rgba(23, 111, 148, 0.7);
	}

	100% {
		box-shadow: 0 0 1.2rem 1.6rem rgba(23, 111, 148, 0);
	}
}

@-webkit-keyframes uyon-glow-gray {
	0% {
		box-shadow: 0 0 0.6rem 0.2rem rgba(92, 92, 102, 0.7);
	}

	100% {
		box-shadow: 0 0 1.2rem 1.6rem rgba(92, 92, 102, 0);
	}
}

@keyframes uyon-glow-gray {
	0% {
		box-shadow: 0 0 0.6rem 0.2rem rgba(92, 92, 102, 0.7);
	}

	100% {
		box-shadow: 0 0 1.2rem 1.6rem rgba(92, 92, 102, 0);
	}
}

/* =====================================================
* Base
* ================================================== */

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: sans-serif;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	margin: 0.67em 0;
	font-size: 2em;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	color: inherit;
	font: inherit;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input {
	line-height: normal;
}

input[type=checkbox],
input[type=radio] {
	box-sizing: border-box;
	padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	height: auto;
}

input[type=search] {
	-webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
	border: 1px solid #c0c0c0;
}

legend {
	padding: 0;
	border: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/* -----------------------------------------------------
 * font
 * -------------------------------------------------- */

/* -----------------------------------------------------
 * Init
 * -------------------------------------------------- */

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

/* normalize overwrite */

html {
	position: relative;
	min-height: 100%;
	background-color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 62.5%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #1a1a1a;
	font-size: 1.6rem;
	line-height: 1.5;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: unset;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

figure {
	margin: 0;
}

h1 img,
figure img,
picture img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

a {
	color: #1a1a1a;
	text-decoration: none;
}

input,
select,
textarea,
button {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none transparent;
	background-clip: padding-box;
	color: inherit;
	font-size: inherit;
	vertical-align: middle;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

input::-ms-clear,
select::-ms-clear,
textarea::-ms-clear,
button::-ms-clear {
	display: none;
}

input::-ms-reveal,
select::-ms-reveal,
textarea::-ms-reveal,
button::-ms-reveal {
	display: none;
}

input::-ms-expand,
select::-ms-expand,
textarea::-ms-expand,
button::-ms-expand {
	display: none;
}

em {
	font-weight: 700;
	font-style: normal;
}

.skip-link {
	position: absolute;
	z-index: 100;
	top: -40px;
	left: 0;
	padding: 8px;
	background: #000;
	color: #fff;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

.sr-only {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

/* =====================================================
* State
* ================================================== */

/* =====================================================
 * Module
 * ================================================== */

/* -----------------------------------------------------
 * component: badge（塗りのカテゴリバッジ。セミナー／ノウハウ等のカテゴリ表示）
 * Figma: Tag(Primary)。塗り #5C5C66・白文字・横幅は内容可変。枠線の .c-tag とは別物。
 * -------------------------------------------------- */

.c-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 2.4rem;
	padding: 0.4rem 1.6rem;
	border-radius: 0.4rem;
	background-color: #5c5c66;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
  /* 枠線版（Figma: Tag(Secondary)）。記事タグ等。白背景＋枠＋サブ文字色 */;
}

.c-badge.cl-line {
	border: 1px solid #9ca3af;
	background-color: #fff;
	color: #5c5c66;
}

/* -----------------------------------------------------
 * component: button（FORCLE Design System）
 * 付与クラス：色 = .cl-xxx / サイズ = .sz-xx（コーディングルール準拠。BEMの "--" は使わない）
 * 色：.cl-primary（塗り）/ .cl-on-color（白地＋黒枠）/ 無効 = .is-disabled
 * サイズ：.sz-lg(PC標準) / 既定=M(SP標準) / .sz-sm / .sz-xs
 * hover：Primary系は #004B6F 塗り（透過なし）。
 * Secondary（`.c-btn-secondary`）：テキスト＋矢印丸＋下線。ホバー＝テキスト透過／矢印を少し右へ／下線が左→右に消える。
 *   ※デザインのhover・disabledは不採用（未対応のため）。暗背景用は `.cl-on-color`（白文字・白枠・白矢印）。
 * TODO：Naked等のバリエーションは該当ページ実装時に追加する。
 * -------------------------------------------------- */

.c-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 5.6rem;
	padding: 0 2.4rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background-clip: border-box;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
	gap: 0.8rem;
  /* ===== サイズ（.sz-xx） ===== */
  /* ===== 丸矢印（.ico を内包したとき：ラベル左＋丸矢印右） ===== */
  /* ===== 色（.cl-xxx） ===== */
  /* ===== 無効 ===== */;
}

.c-btn.sz-lg {
	height: 7.2rem;
	padding: 0 1.6rem 0 2.4rem;
	font-size: 1.8rem;
	font-weight: 700;
}

.c-btn.sz-sm {
	height: 4.4rem;
	padding: 0 2.4rem;
	font-size: 1.6rem;
	font-weight: 700;
}

.c-btn.sz-xs {
	height: 4rem;
	padding: 0 1.6rem;
	font-size: 1.4rem;
	font-weight: 600;
}

.c-btn:has(.ico) {
	justify-content: space-between;
}

.c-btn .ico {
	position: relative;
	flex-shrink: 0;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 999px;
}

.c-btn .ico::before {
	content: '';
	position: absolute;
	background: no-repeat 50% 50%/2rem;
	background-image: url(../img/ico_arrow_right.png);
	inset: 0;
}

.c-btn.cl-primary {
	border-color: #1a1a1a;
	background-color: #1a1a1a;
	color: #fff;
}

.c-btn.cl-primary .ico {
	background-color: #fff;
}

.c-btn.cl-primary .ico::before {
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.c-btn.cl-on-color {
	border-color: #1a1a1a;
	background-color: #fff;
	color: #1a1a1a;
}

.c-btn.cl-on-color .ico {
	background-color: #1a1a1a;
}

.c-btn.cl-on-color .ico::before {
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.c-btn.is-disabled,
.c-btn:disabled,
.c-btn[aria-disabled=true] {
	border-color: #d1d5db;
	background-color: #d1d5db;
	color: #9ca3af;
	pointer-events: none;
}

/* -----------------------------------------------------
 * component: button Secondary（テキスト＋矢印丸＋下線。詳細リンク等）
 * ホバー：テキスト透過／矢印を少し右へ／下線が左→右に消える（hover-lineのunderlineと同様）。
 * ※デザインのhover・disabledは不採用。暗背景用は .cl-on-color。
 * -------------------------------------------------- */

.c-btn-secondary {
	display: inline-flex;
	align-items: center;
	color: #1a1a1a;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
	gap: 0.8rem;
}

.c-btn-secondary .ico {
	display: block;
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid #9ca3af;
	border-radius: 999px;
	background: no-repeat 50% 50%/1.4rem;
	background-image: url(../img/ico_arrow_right.png);
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	-webkit-filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
	filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
}

.c-btn-secondary .label {
	position: relative;
	transition: opacity 0.2s ease;
}

.c-btn-secondary .label::after {
	content: '';
	position: absolute;
	bottom: -0.2rem;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: left top;
	transform-origin: left top;
}

.c-btn-secondary.cl-on-color {
	color: #fff;
}

.c-btn-secondary.cl-on-color .ico {
	border-color: #fff;
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

/* -----------------------------------------------------
 * component: icon button（円型・矢印アイコンボタン）
 * デザインシステム「丸型アイコンボタン」表（Primary/Secondary × M/S）に対応。
 * 形：既定 = Secondary（白地＋枠＋黒矢印）／ .cl-primary（黒塗り＋白矢印）。
 * サイズ：既定 = S（28px・枠 #9CA3AF）／ .sz-md（40px・枠 #1A1A1A）。
 * -------------------------------------------------- */

.c-btn-icon {
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid #9ca3af;
	border-radius: 999px;
	background-color: transparent;
}

.c-btn-icon::before {
	content: '';
	width: 1.8rem;
	height: 1.8rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_arrow_right.png);
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	-webkit-filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
	filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
}

.c-btn-icon.sz-md {
	width: 4rem;
	height: 4rem;
	border-color: #1a1a1a;
}

.c-btn-icon.sz-md::before {
	width: 1.8rem;
	height: 1.8rem;
}

.c-btn-icon.cl-primary {
	border-color: #1a1a1a;
	background-color: #1a1a1a;
}

.c-btn-icon.cl-primary::before {
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.c-btn-icon.cl-on-color {
	border-color: #fff;
	background-color: #fff;
}

.c-btn-icon.cl-on-color::before {
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.c-btn-icon.cl-on-color-outline {
	border-color: #fff;
	background-color: transparent;
}

.c-btn-icon.cl-on-color-outline::before {
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

/* -----------------------------------------------------
 * component: button Arrow（ラベル＋塗り丸矢印。Figma: home-btn-primary）
 * 「詳しく見る」等の小型リンク。ラベル下線つき＋ .c-btn-icon(塗り) を内包。
 * ホバー：ラベル透過／矢印を少し右へ（c-btn-secondary と挙動を統一）。
 * -------------------------------------------------- */

.c-btn-arrow {
	display: inline-flex;
	align-items: center;
	color: #1a1a1a;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.125;
	gap: 0.8rem;
}

.c-btn-arrow .label {
	text-decoration: underline;
	transition: opacity 0.2s ease;
	text-underline-offset: 0.2em;
}

.c-btn-arrow.cl-on-color {
	color: #fff;
}

.c-btn-arrow.cl-on-color .label {
	text-decoration: none;
}

/* -----------------------------------------------------
 * component: button more（Figma: button_Secondary）
 * 見出し横の「一覧を見る」等。テキスト＋黒塗り丸（白矢印）＋全幅の下線。
 * ホバー：テキスト透過／矢印を少し右／下線が左→右に消える（他ボタンと挙動統一）。
 * ※枠線丸の .c-btn-secondary とは別物。暗背景用は .cl-on-color。
 * -------------------------------------------------- */

.c-btn-more {
	display: inline-flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	width: 22rem;
	height: 4.8rem;
	padding-top: 0.4rem;
	padding-bottom: 0.8rem;
	color: #1a1a1a;
	font-family: 'Noto Sans JP', sans-serif;
	gap: 0.8rem;
}

.c-btn-more::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background-color: #9ca3af;
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: left top;
	transform-origin: left top;
}

.c-btn-more .label {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.125;
	transition: opacity 0.2s ease;
}

.c-btn-more .ico {
	position: relative;
	flex-shrink: 0;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 999px;
	background-color: #1a1a1a;
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.c-btn-more .ico::before {
	content: '';
	position: absolute;
	background: no-repeat 50% 50%/2rem;
	background-image: url(../img/ico_arrow_right.png);
	inset: 0;
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.c-btn-more.cl-on-color {
	color: #fff;
}

.c-btn-more.cl-on-color::after {
	background-color: #fff;
}

.c-btn-more.cl-on-color .ico {
	background-color: #fff;
}

.c-btn-more.cl-on-color .ico::before {
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

/* -----------------------------------------------------
 * component: 記事カード（ブログ/ノウハウ）。サムネ＋日付＋カテゴリバッジ＋2行タイトル。
 * カード全体リンク・幅は親に追従（フルード）。ピックアップ（スライダー）と一覧グリッドで共用。
 * 旧 .p-pickup-card を共通化。
 * -------------------------------------------------- */

.c-card-blog {
	display: block;
	color: #1a1a1a;
}

.c-card-blog .c-card-blog-thumb img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.c-card-blog-thumb {
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 373/233;
}

.c-card-blog-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.c-card-blog-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	margin-top: 1.4rem;
	gap: 0.8rem;
}

.c-card-blog-meta .date {
	margin-right: auto;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.125;
}

.c-card-blog-title {
	display: -webkit-box;
	overflow: hidden;
	margin: 1rem 0 0;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.c-card-blog-tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	gap: 0.8rem;
}

/* -----------------------------------------------------
 * component: 事例カード。サムネ（左下に企業ロゴ枠）＋タイトル＋会社名/カテゴリ(.meta)＋成果/業種/課題＋タグ(.tags)。
 * カード全体リンク・幅は親グリッドに追従（フルード）。ピックアップ（スライダー）と一覧グリッド（3列）で共用。
 * 成果/業種/課題は共有 .p-case-pickup-attrs を .sz-sm で流用（_p-case.scss）。
 * ListView.js caseCardHTML / _pickup.njk works版 / サービス静的カード と同一構造。寸法・配色は Figma 851/859/869 実測。
 * -------------------------------------------------- */

.c-card-case {
	display: flex;
	flex-direction: column;
	color: #1a1a1a;
}

.c-card-case .thumb > img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.c-card-case .thumb {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 373/233;
  /* 企業ロゴ枠（Figma：左下・白・bl/tr角丸8px・180×48）。中の会社ロゴは高さ上限（max-height）だけ効かせ、幅は縦横比追従（登録ロゴが縮まないよう幅の上限は付けない）。pickupは5.5remに上書き */
  /* ロゴ枠の外側2隅の凹みカーブ（Figma: Subtract 8px）。白フィレットで写真をバッジへ馴染ませる。
     ::before＝バッジ上辺左端／::after＝バッジ右辺下端。pickupは 1.6rem/240×75 に上書き。 */;
}

.c-card-case .thumb > img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.c-card-case .thumb .logo {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	width: 18rem;
	height: 4.8rem;
	border-top-right-radius: 0.8rem;
	background-color: #fff;
}

.c-card-case .thumb .logo img {
	max-height: 3.8rem;
}

.c-card-case .thumb::before,
.c-card-case .thumb::after {
	content: '';
	position: absolute;
	z-index: 1;
	width: 0.8rem;
	height: 0.8rem;
	background-color: #fff;
}

.c-card-case .thumb::before {
	bottom: 4.8rem;
	left: 0;
	-webkit-mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
	mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
}

.c-card-case .thumb::after {
	bottom: 0;
	left: 18rem;
	-webkit-mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
	mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
}

.c-card-case .title {
	margin: 1.6rem 0 0;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.c-card-case .meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.8rem;
	gap: 0.8rem;
}

.c-card-case .meta .company {
	min-width: 0;
	color: #5c5c66;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
}

.c-card-case .meta .c-badge {
	flex-shrink: 0;
}

.c-card-case .tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	gap: 0.8rem;
}

/* -----------------------------------------------------
 * component: 資料カード（無料資料ダウンロード）
 * サムネ＋ダミータイトル＋ダミー本文＋DLボタン（＝資料DLフォームページへのリンク）。
 * c-card-blog とは別物：カード全体リンクではなく、DLボタン（.dl）だけがリンク。
 * -------------------------------------------------- */

.c-card-document {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.c-card-document .thumb {
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 373/233;
}

.c-card-document .thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.c-card-document .title {
	display: -webkit-box;
	overflow: hidden;
	margin: 1.4rem 0 0;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.c-card-document .desc {
	display: -webkit-box;
	overflow: hidden;
	flex: 1 1 auto;
	margin: 1rem 0 0;
	color: #5c5c66;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7142857143;
	word-wrap: break-word;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.c-card-document .dl {
	display: flex;
	align-items: center;
	width: 100%;
	height: 5.6rem;
	margin-top: 1.8rem;
	padding-right: 1.2rem;
	padding-left: 2.4rem;
	border: 0;
	border-radius: 999rem;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	gap: 0.8rem;
}

.c-card-document .dl .label {
	flex: 1;
}

.c-card-document .dl .ico {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background-color: #fff;
}

.c-card-document .dl .ico::before {
	content: '';
	width: 2rem;
	height: 2rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_arrow_right.png);
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

/* -----------------------------------------------------
 * component: card-recruit（職種カード）
 * タイトル（H4・2行）＋本文（justify）＋ボタン2（募集要項／エントリー）。
 * base=SP（カード全幅・ボタン2列）→ mq(ovsp) で3列グリッドの子（ボタン縦積み全幅）。
 * 設計：.claude/docs/forcle_design/coding/22_recruit_top.md §B-2
 * -------------------------------------------------- */

.c-card-recruit {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.c-card-recruit .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.c-card-recruit p {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: justify;
}

.c-card-recruit .actions {
	display: grid;
	margin-top: 0.2rem;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

.c-card-recruit .c-btn {
	width: 100%;
	height: 4.4rem;
	padding: 0 1.6rem;
}

/* -----------------------------------------------------
 * component: セミナーカード。サムネ＋日付/カテゴリ＋タイトル＋下部タグ＋ステータス。
 * カード全体リンク・幅は親に追従（フルード）。ピックアップ（スライダー）と一覧グリッドで共用。
 * HTML構造は ListView.js seminarCardHTML ／ _pickup.njk の seminar 版と一致させる。
 * 寸法・配色は Figma card_seminar（373×437）実測。
 * -------------------------------------------------- */

.c-card-seminar {
	display: block;
	color: #1a1a1a;
  /* 開催日/開催形式/定員＝共有 .p-case-pickup-attrs を .sz-sm で流用（_p-case.scss）。
     ラベルは2〜4字と字数が揃わないため、事例カードの字間均等配置は解除する。
     共有側より先に読まれる（common.scss: components → parts）ため、.sz-sm を含めて詳細度で上書きする。 */
  /* ステータスのピル（Figma button_primary 流用：全幅・rounded-full・h40・中央）。
     既定＝配信終了/開催終了（無効グレー）。アーカイブ配信中＝.is-active（黒地白字）／受付中＝.is-open（ブランド青地白字）。
     付与は ListView が JSON の statusState から決める。 */;
}

.c-card-seminar .thumb img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.c-card-seminar .thumb {
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 373/233;
}

.c-card-seminar .thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.c-card-seminar .meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.4rem;
	gap: 0.8rem;
}

.c-card-seminar .meta .date {
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.125;
}

.c-card-seminar .title {
	display: -webkit-box;
	overflow: hidden;
	margin: 1.2rem 0 0;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.7;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.c-card-seminar .p-case-pickup-attrs.sz-sm .key {
	font-size: 1.3rem;
	line-height: 1.3846153846;
	text-indent: 0;
	letter-spacing: 0;
}

.c-card-seminar .p-case-pickup-attrs.sz-sm .val {
	font-size: 1.4rem;
	line-height: 1.5;
}

.c-card-seminar .p-case-pickup-attrs.sz-sm + .tags {
	margin-top: 1.6rem;
}

.c-card-seminar .tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.2rem;
	gap: 0.8rem;
}

.c-card-seminar .status {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 4rem;
	margin-top: 1.6rem;
	padding: 0 1.6rem;
	border-radius: 999rem;
	background-color: #d1d5db;
	color: #9ca3af;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

.c-card-seminar .status.is-active {
	background-color: #1a1a1a;
	color: #fff;
}

.c-card-seminar .status.is-open {
	background-color: #004b6f;
	color: #fff;
}

/* -----------------------------------------------------
 * component: サービスカード（サービストップ §C のサブカード）
 * 薄グレー枠（#F5F5F7・角丸8）＋名称＋説明＋右下「詳しく見る」（下線＋塗り丸矢印）。
 * メインサービス配下に3枚並ぶ（PCは3列／SPは1列）。丸矢印は SP=28px / PC=40px。
 * 設計：.claude/docs/forcle_design/coding/24_service_top.md §C
 * -------------------------------------------------- */

.c-card-service {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	padding: 1.6rem;
	border-radius: 0.8rem;
	background-color: #f5f5f7;
	gap: 1.2rem;
}

.c-card-service .body {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 1.2rem;
}

.c-card-service .name {
	margin: 0;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.c-card-service .desc {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7;
}

/* -----------------------------------------------------
 * component: figure
 * -------------------------------------------------- */

.c-figure {
	display: block;
	overflow: hidden;
}

.c-figure img {
	display: block;
	width: 100%;
	height: 100%;
	transition: -webkit-transform 0.2s ease;
	transition: transform 0.2s ease;
	transition: transform 0.2s ease, -webkit-transform 0.2s ease;
	-o-object-fit: cover;
	object-fit: cover;
	will-change: transform;
}

/* -----------------------------------------------------
 * component: filter（絞り込みピル・タブ）
 * お知らせ一覧等のカテゴリ絞り込み。ピル型ボタンを横並び（SPは折返し）。
 * 選択中＝黒塗り・白文字／非選択＝白地・枠線。
 * ※Phase1は静的表示。Phase2でJS（パラメータ型）絞り込みに連動（.is-active 切替）。
 * -------------------------------------------------- */

.c-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.c-filter .c-filter-item {
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 8rem;
	padding: 0.7rem 1.6rem;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	gap: 0.4rem;
}

.c-filter .c-filter-item .hash {
	font-weight: 600;
}

.c-filter .c-filter-item.is-active {
	border-color: #1a1a1a;
	background-color: #1a1a1a;
	color: #fff;
	font-weight: 600;
	pointer-events: none;
}

/* -----------------------------------------------------
 * component: 中央寄せ見出し（英字ラベル上＋和文タイトル下・センター揃え）
 * 例：記事下「Pick UP Know How / ピックアップノウハウ」。
 * c-heading（和文＋斜線＋英字の横並び）とは別パターン＝再利用する共通部品。
 * en＝Montserrat・サブ色・小／ja＝太字・大。前後の余白は使用側で付ける。
 * -------------------------------------------------- */

.c-heading-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
}

.c-heading-center .en {
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
}

.c-heading-center .ja {
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

/* -----------------------------------------------------
 * component: section heading（和文＋斜線＋英字＋リード）
 * 各セクション共通の見出し（強み／サービス／事例 等。Figma: heading2 ＋ サブ見出し）。
 * SPは和文を1行目・斜線＋英字を2行目へ折り返す。余白等の微調整は使用側（.p-xxx .c-heading）で上書きする。
 * -------------------------------------------------- */

.c-heading {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
  /* 小サイズ：PCでも拡大せず ja32/en20 のまま（列見出し＝お知らせ等） */
  /* ダーク背景用（白見出し）。お問い合わせ等の暗背景セクション */;
}

.c-heading .title {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	margin: 0;
	gap: 0.2rem 0.4rem;
}

.c-heading .title .ja {
	width: 100%;
	color: #1a1a1a;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.2rem;
}

.c-heading .title .slash {
	position: relative;
	flex-shrink: 0;
	width: 2rem;
	height: 2.4rem;
	margin: 0;
}

.c-heading .title .slash::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 100%;
	background-color: #9ca3af;
	-webkit-transform: translate(-50%, -50%) rotate(40deg);
	transform: translate(-50%, -50%) rotate(40deg);
}

.c-heading .title .en {
	position: relative;
	top: 0.3rem;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.1rem;
}

.c-heading .lead {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.7;
}

.c-heading.sz-sm .title {
	align-items: center;
}

.c-heading.cl-on-color .title .ja {
	color: #fff;
}

.c-heading.cl-on-color .title .slash::before {
	background-color: #d1d5db;
}

.c-heading.cl-on-color .title .en {
	color: #f5f5f7;
}

.c-heading.cl-on-color .lead {
	color: #fff;
}

/* -----------------------------------------------------
 * 見出しリビール（スクロールイン）
 * - 対象は .title の .ja（和文）のみ。clip-path で「左から右」に表示（顧客要望）。en/斜線/リードは常時表示。
 * - JS有効時のみ `has-heading-reveal`（app.js付与）で初期非表示にする＝JS無効なら常時表示（恒久非表示を防止）。
 *   監視は .c-heading（.jaのみclip＝監視要素の判定に干渉しない）。is-inview で clip を解除して展開。
 * -------------------------------------------------- */

.has-heading-reveal .c-heading .title .ja {
	transition: -webkit-clip-path var(--reveal-duration, 1s) cubic-bezier(0.22, 1, 0.36, 1);
	transition: clip-path var(--reveal-duration, 1s) cubic-bezier(0.22, 1, 0.36, 1);
	transition: clip-path var(--reveal-duration, 1s) cubic-bezier(0.22, 1, 0.36, 1), -webkit-clip-path var(--reveal-duration, 1s) cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}

.has-heading-reveal .c-heading.is-inview .title .ja {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
}

/* -----------------------------------------------------
 * component: 本文h3見出し（下罫線＋左ブランドアクセント）
 * p-wysiwyg の h3 と同一スタイル（共通 heading3 mixin）。本文外でも使える共通見出し。
 * 上余白は文脈側で（l-section-contents 等が供給）。
 * -------------------------------------------------- */

.c-heading3 {
	position: relative;
	margin-bottom: 2.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 2px solid #d1d5db;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.c-heading3::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 6.4rem;
	height: 2px;
	background-color: #176f94;
}

/* -----------------------------------------------------
 * component: label
 * -------------------------------------------------- */

.c-label {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 32px;
	padding: 4px 24px;
	border-radius: 16px;
	background-color: #f5f5f7;
	font-size: 1.1rem;
	font-weight: 700;
}

.c-label.cl-white {
	border: 1px solid #1a1a1a;
	background-color: #fff;
}

.c-label.cl-dark {
	background-color: #5c5c66;
	color: #fff;
}

.c-label.cl-yellow {
	background-color: #fdd000;
}

.c-label.year {
	background-color: #fff;
}

.c-label.entry {
	width: 160px;
}

.c-label.entry.soon {
	background-color: #fdd000;
}

.c-label.entry.accepted {
	background-color: #c00;
	color: #fff;
}

.c-label.entry.end {
	background-color: #5c5c66;
	color: #fff;
}

.c-label.entry.end-active {
	background-color: #176f94;
	color: #fff;
}

.c-label.project {
	background-color: #fdd000;
}

a.c-label {
	transition: opacity 0.2s ease;
}

/* -----------------------------------------------------
 * component: blog link（白地・黒枠＋右矢印のボックスリンク。Figma: menu-link_blog）
 * 事例の業種カテゴリリンク等。横幅は使用側で制御（行で等幅・縦積み等）。
 * -------------------------------------------------- */

.c-link-blog {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 5.6rem;
	padding: 0.8rem 1.6rem;
	border: 1px solid #1a1a1a;
	border-radius: 0.4rem;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	gap: 0.8rem;
}

.c-link-blog::after {
	content: '';
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_arrow_right.png);
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

/* -----------------------------------------------------
 * component: link
 * -------------------------------------------------- */

.c-link {
	position: relative;
	padding-bottom: 0.3rem;
	padding-left: 0.8em;
	background: no-repeat 0 47.5%/auto 0.65em;
	background-image: url('data:image/svg+xml,%0A%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 5.252 8.754\'%3E%3Cpath id=\'パス_350\' fill=\'%23242424\' d=\'M6.743-4.632a.876.876 0 0 0 0-1.239l-3.5-3.5a.871.871 0 0 0-.954-.189.875.875 0 0 0-.541.809v7a.878.878 0 0 0 .541.809.876.876 0 0 0 .954-.189l3.5-3.5Z\' data-name=\'パス 350\' transform=\'translate(-1.747 9.627)\'/%3E%3C/svg%3E');
	font-weight: 500;
}

.c-link::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #1a1a1a;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: right top;
	transform-origin: right top;
}

.c-link[target=_blank]::after {
	content: '';
	display: inline-block;
	position: relative;
	top: 0.1em;
	width: 0.9em;
	height: 0.9em;
	margin-left: 8px;
	background: no-repeat 50% 50%/contain;
	background-image: url('data:image/svg+xml,%0A%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'%3E%3Cpath id=\'パス_351\' fill=\'%23242424\' d=\'M8.75-12.25a.874.874 0 0 0-.875.875.874.874 0 0 0 .875.875h2.261l-5.5 5.507a.876.876 0 0 0 0 1.239.876.876 0 0 0 1.239 0l5.5-5.507V-7a.874.874 0 0 0 .875.875A.874.874 0 0 0 14-7v-4.375a.874.874 0 0 0-.875-.875Zm-6.562.875A2.187 2.187 0 0 0 0-9.187v8.75A2.187 2.187 0 0 0 2.188 1.75h8.75a2.187 2.187 0 0 0 2.187-2.187V-3.5a.874.874 0 0 0-.875-.875.874.874 0 0 0-.875.875v3.063a.439.439 0 0 1-.437.437h-8.75a.439.439 0 0 1-.438-.437v-8.75a.439.439 0 0 1 .438-.437H5.25a.874.874 0 0 0 .875-.875.874.874 0 0 0-.875-.875Z\' data-name=\'パス 351\' transform=\'translate(0 12.25)\'/%3E%3C/svg%3E');
	-webkit-filter: invert(88%) sepia(4%) saturate(64%) hue-rotate(201deg) brightness(111%) contrast(96%);
	filter: invert(88%) sepia(4%) saturate(64%) hue-rotate(201deg) brightness(111%) contrast(96%);
}

/* -----------------------------------------------------
 * component: pagination（ページ送り）
 * ←／数字／…／→。前後＝40px円（有効＝黒地白矢印／無効＝グレー地）。
 * 数字＝40px・radius4・Montserrat Bold。現在ページ＝$color-neutral-400（操作不可表現）。
 * ※見た目のみ。番号・前後の活性はMT/JSが出力（MTG：ページネーションはJS実装）。
 * -------------------------------------------------- */

.c-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.2rem;
}

.c-pagination-nav {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.c-pagination .page {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 4rem;
	height: 4rem;
	padding: 0 0.8rem;
	border-radius: 0.4rem;
	color: #1a1a1a;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
}

.c-pagination .page.is-current {
	color: #9ca3af;
	pointer-events: none;
}

.c-pagination .ellipsis {
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.c-pagination .arrow {
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	background-color: #1a1a1a;
}

.c-pagination .arrow::before {
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_arrow_right.png);
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.c-pagination .arrow.is-disabled {
	background-color: #d1d5db;
	pointer-events: none;
}

.c-pagination .arrow--prev::before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* -----------------------------------------------------
 * component: play（動画サムネ中央の再生アイコン。Figma: グループ_3223＝YouTube再生ボタン）
 * 画像＝ico_sns_yt.png。親（サムネ）に position:relative が必要。装飾のみ＝クリックは透過。
 * 既定 7rem×4.9rem。拡大が必要な箇所は使用側で width/height を上書き（例：セミナーのPC）。
 * -------------------------------------------------- */

.c-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7rem;
	height: 7rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_sns_yt.png);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* -----------------------------------------------------
 * component: tag（枠付きラベル。お知らせ記事のタグリンク等）
 * 固定幅80×32の枠付きチップ。Figma: tag。
 * ※事例カードの 成果／業種／課題 は塗りラベルに変更（_p-case の .p-case-pickup-attrs .key）。
 * -------------------------------------------------- */

.c-tag {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 8rem;
	height: 3.2rem;
	padding: 0.4rem 1.6rem;
	border: 1px solid #9ca3af;
	border-radius: 0.4rem;
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.125;
	white-space: nowrap;
	text-indent: 0.4em;
	letter-spacing: 0.4em;
}

/* -----------------------------------------------------
 * component: totop（Figma: Button_top）
 * 72px円・黒地#1A1A1A＋6px灰リング#5C5C66。上矢印（白）＋「TOP」（Montserrat白）。
 * PCのみ・右下固定。100pxスクロールで出現、100px未満で消える（ScrollTop.js）。
 * -------------------------------------------------- */

.c-totop {
	display: none;
	visibility: hidden;
	position: fixed;
	z-index: 7;
	right: 2.4rem;
	bottom: 2.4rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 7.2rem;
	height: 7.2rem;
	border: 6px solid #5c5c66;
	border-radius: 999px;
	background-color: #1a1a1a;
	opacity: 0;
	color: #fff;
	transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.25s ease, border-color 0.25s ease;
	gap: 0.2rem;
}

.c-totop.is-visible {
	visibility: visible;
	opacity: 1;
}

.c-totop .ico {
	width: 2rem;
	height: 2rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_arrow_right.png);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.c-totop .label {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.125;
}

/* -----------------------------------------------------
 * parts: アクセス（企業情報ページ §Access）
 * 共有のGoogle Map iframe を全幅（フルブリード）で表示。見出しは別途 c-heading（l-section-inner内）。
 * 設計：.claude/docs/forcle_design/coding/27_company.md §5-4
 * -------------------------------------------------- */

.p-access {
	margin-top: 3.2rem;
}

.p-access-map {
	display: block;
	width: 100%;
	height: 26.5rem;
	border: 0;
}

/* -----------------------------------------------------
 * parts: この記事を書いた人（記事本文の下・ノウハウ詳細）
 * 見出しの二本線は wysiwyg h5 と共通（heading-bars）。
 * PCはFigma 2011-18718 実測。SPはデザイン無しのため記事本文の見出し・余白に合わせて縮小。
 * -------------------------------------------------- */

.p-author {
	display: flex;
	flex-direction: column;
	margin: 3.2rem 0 0;
	padding: 1.6rem;
	border: 1px solid #d1d5db;
	border-radius: 0.8rem;
	background-color: #fff;
	gap: 1.6rem;
}

.p-author-heading {
	position: relative;
	margin: 0;
	padding-left: 1.8rem;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-author-heading::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.6rem;
	height: 1.6em;
	background: linear-gradient(#176f94, #176f94) left/2px 100% no-repeat, linear-gradient(#176f94, #176f94) right/2px 100% no-repeat;
}

.p-author-body {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
}

.p-author-avatar {
	display: flex;
	overflow: hidden;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 7.2rem;
	height: 7.2rem;
	margin: 0;
	border-radius: 999px;
	background-color: #ecf6f9;
}

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

.p-author-avatar.sz-logo img {
	width: 55%;
	height: auto;
	-o-object-fit: contain;
	object-fit: contain;
}

.p-author-profile {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	gap: 0.8rem;
}

.p-author-profile .name {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-author-profile .desc {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	word-break: break-all;
}

/* -----------------------------------------------------
 * parts: box（薄グレー角丸ボックス・メッセージ枠）
 * 完了/サンクス系で流用。中身は素タグ（h2/h3/p/リンク/ボタン）。
 * 既定＝左寄せ（デザイン）。中央寄せに切替える時は .is-center を付与（MT側でスタイル切替）。
 * 縦間隔は各ブロックの margin-top で作り、先頭/末尾の縦marginは打ち消す。
 * 見出し＝H2(32)/H3(28)、本文＝16、テキストリンク＝ブランド色＋下線。
 * 設計：.claude/docs/forcle_design/coding/32_fb_20260702.md
 * -------------------------------------------------- */

.p-box {
	padding: 4rem 2.4rem;
	border-radius: 1.6rem;
	background-color: #f5f5f7;
}

.p-box.is-center {
	text-align: center;
}

.p-box.sz-lg p {
	margin-top: 3.2rem;
}

.p-box.sz-lg .p-box-links {
	margin-top: 1.6rem;
}

.p-box.sz-lg .p-box-links li + li {
	margin-top: 0;
}

.p-box > *:first-child {
	margin-top: 0;
}

.p-box > *:last-child {
	margin-bottom: 0;
}

.p-box h2 {
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-box h3 {
	margin-top: 4rem;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-box p {
	margin-top: 2.4rem;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
}

.p-box ul:not([class]) {
	margin-top: 1.6rem;
}

.p-box ul:not([class]) li {
	position: relative;
	padding-left: 1.6rem;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
}

.p-box ul:not([class]) li::before {
	content: '';
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background-color: #004b6f;
}

.p-box ul:not([class]) li + li {
	margin-top: 0.8rem;
}

.p-box ul:not([class]) ul {
	margin: 0.8rem 0;
}

.p-box ul:not([class]) ul li {
	padding-left: 2rem;
	font-weight: 600;
}

.p-box ul:not([class]) ul li::before {
	top: 0.85em;
	width: 0.4rem;
	height: 0.4rem;
}

.p-box ol:not([class]) {
	counter-reset: ol;
	margin-top: 1.6rem;
}

.p-box ol:not([class]) li {
	counter-increment: ol;
	position: relative;
	padding-left: 2rem;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
}

.p-box ol:not([class]) li::before {
	content: counter(ol) '.';
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6rem;
	color: #004b6f;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	text-align: right;
}

.p-box ol:not([class]) li + li {
	margin-top: 0.8rem;
}

.p-box p a {
	color: #176f94;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.p-box-links {
	margin-top: 2.4rem;
}

.p-box-links li + li {
	margin-top: 2.4rem;
}

.p-box-links a {
	color: #176f94;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.p-box .c-btn {
	display: flex;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-top: 4rem;
	margin-right: auto;
	margin-left: auto;
}

/* -----------------------------------------------------
 * parts: breadcrumbs（Figma: breadcrumbs）
 * 薄グレーの角丸ピル帯（opacity80%）。区切りは「/」。リンク=サブ色＋下線、現在=本文色・下線なし。
 * 先頭は「TOP」。12px。コンテンツ幅（PC1280/SP343）で全幅ピル。
 * -------------------------------------------------- */

.p-breadcrumbs {
	width: 100%;
	max-width: 132.8rem;
	margin: 2.4rem auto 0;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
}

.p-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	padding: 1rem 1.2rem;
	border-radius: 1.6rem;
	background-color: #f5f5f7;
	opacity: 0.8;
	gap: 0.8rem 0;
}

.p-breadcrumbs ol li {
	display: inline-flex;
	align-items: center;
	font-size: 1.2rem;
	line-height: 1.5;
}

.p-breadcrumbs ol li:not(:last-child)::after {
	content: '/';
	margin: 0 0.8rem;
	color: #1a1a1a;
	font-weight: 400;
}

.p-breadcrumbs ol li a {
	color: #5c5c66;
	font-weight: 500;
	text-decoration: underline;
}

.p-breadcrumbs ol li span {
	color: #1a1a1a;
	font-weight: 500;
}

/* -----------------------------------------------------
 * parts: キャンペーンバナー（KV下・1個）
 * MTG：クライアント設置・リンクなし画像。SP/PCで別画像を登録可（picture/source）。
 * SPは登録画像の実比率で高さが決まる（高さ固定なし）。PCのみ216px固定でcover。角丸8px。地色は画像未登録時の保険。
 * -------------------------------------------------- */

.p-campaign {
	display: flex;
	flex-direction: column;
	margin: 2rem auto 0;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	gap: 3.2rem;
  /* ロゴ帯（.p-logos）未登録でKVフッタ直下に来た場合、PCのみ上余白を広げる（SPは据え置き） */;
}

.p-campaign-banner {
	display: block;
	overflow: hidden;
	width: 100%;
	border-radius: 0.8rem;
	background-color: #e4e5ea;
}

.p-campaign-banner picture {
	display: block;
	height: 100%;
}

.p-campaign-banner img {
	display: block;
	width: 100%;
	height: auto;
}

.p-campaign-partner-logos {
	display: flex;
	justify-content: space-between;
}

.p-campaign-partner-logos img {
	width: 16rem;
	height: 16rem;
	-o-object-fit: contain;
	object-fit: contain;
}

.p-campaign-partner p {
	margin: 0.8rem 0 0;
	font-weight: 500;
	text-align: center;
}

/* -----------------------------------------------------
 * parts: 事例（TOP・Works）
 * ①注目事例カード ②業種カテゴリリンク ③バナースライダー（画像のみ・リンクなし）。
 * DOM順＝見出し→注目→カテゴリ→バナー→ボタン。PCはGrid（見出し行の右にボタン）、SPは縦積み（ボタン最下部）。
 * 見出し＝c-heading、ボタン＝c-btn、タグ＝c-tag、カテゴリ＝c-link-blog を流用。
 * -------------------------------------------------- */

.p-case {
	overflow-x: clip;
	margin-top: 8rem;
  /* ===== 下部ボタン（SP=M中央・最下部 / PC=L・見出し行の右） ===== */
  /* ===== ①注目事例カード（カード全体リンク） ===== */
  /* ===== ②業種カテゴリリンク ===== */
  /* ===== ③バナースライダー（画像のみ・リンクなし。ちら見＝track可視＋セクションでclip） ===== */;
}

.p-case-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-case-action {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.p-case-action .c-btn {
	width: 24rem;
	padding-right: 1.2rem;
}

.p-case-pickup {
	display: block;
	margin-top: 3.2rem;
	color: #1a1a1a;
}

.p-case-pickup .p-case-pickup-img > img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.p-case-pickup-img {
	position: relative;
	overflow: hidden;
	border-radius: 0.8rem;
  /* 企業ロゴバッジ（Figma 781-15227：PC 240×75・bl/tr角丸1.6rem・凹み1.6rem／SPは縮小）。事例カードpickup相当 */;
}

.p-case-pickup-img > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 343/212;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-case-pickup-img .logo {
	display: flex;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	width: 18rem;
	height: 4.8rem;
	border-top-right-radius: 0.8rem;
	background-color: #fff;
}

.p-case-pickup-img .logo img {
	max-height: 3.8rem;
}

.p-case-pickup-img::before,
.p-case-pickup-img::after {
	content: '';
	position: absolute;
	z-index: 1;
	width: 0.8rem;
	height: 0.8rem;
	background-color: #fff;
}

.p-case-pickup-img::before {
	bottom: 4.8rem;
	left: 0;
	-webkit-mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
	mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
}

.p-case-pickup-img::after {
	bottom: 0;
	left: 18rem;
	-webkit-mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
	mask: radial-gradient(circle at 100% 0, transparent 0.8rem, #000 0.8rem);
}

.p-case-pickup-body {
	margin-top: 1.6rem;
}

.p-case-pickup-body .desc {
	margin: 1.6rem 0 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: justify;
}

.p-case-pickup-head {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.p-case-pickup-head .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.8rem;
}

.p-case-pickup-head .row .c-badge {
	flex-shrink: 0;
}

.p-case-pickup-head .company {
	min-width: 0;
	margin: 0;
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.025em;
}

.p-case-pickup-head .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-case-pickup-attrs {
	display: flex;
	flex-direction: column;
	margin-top: 1.6rem;
	gap: 0.8rem;
}

.p-case-pickup-attrs li {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.p-case-pickup-attrs .key {
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 8rem;
	height: 3.2rem;
	border-radius: 0.4rem;
	background-color: #f5f5f7;
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.125;
	white-space: nowrap;
	text-indent: 0.4em;
	letter-spacing: 0.4em;
}

.p-case-pickup-attrs .val {
	flex: 1 1 0;
	min-width: 0;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-case-pickup-attrs.sz-sm .key {
	width: 6.4rem;
	height: auto;
	padding: 0.2rem 0.8rem 0.4rem;
	font-size: 1.4rem;
	line-height: 1.5;
	text-indent: 0.15em;
	letter-spacing: 0.15em;
}

.p-case-pickup-attrs.sz-sm .val {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

.p-case-pickup-tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	gap: 0.8rem;
}

.p-case-cats {
	display: flex;
	flex-direction: column;
	margin-top: 3.2rem;
	gap: 1.2rem;
}

.p-case-cats .c-link-blog {
	width: 100%;
}

.p-case-banner {
	position: relative;
	margin-top: 3.2rem;
}

.p-case-banner .splide__track {
	overflow: visible;
}

.p-case-banner figure {
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 600/375;
}

.p-case-banner img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-case-banner .splide__arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.4rem;
	height: 4.4rem;
	margin: 0;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1;
}

.p-case-banner .splide__arrow svg {
	display: none;
}

.p-case-banner .splide__arrow::before {
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	background: no-repeat 50% 50%/contain;
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.p-case-banner .splide__arrow--prev::before {
	background-image: url(../img/ico_arrow_left.png);
}

.p-case-banner .splide__arrow--next::before {
	background-image: url(../img/ico_arrow_right.png);
}

.p-case-banner .splide__arrow {
	position: absolute;
	z-index: 2;
	top: 9.2rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.p-case-banner .splide__arrow--prev {
	left: 50%;
	margin-left: -16.95rem;
}

.p-case-banner .splide__arrow--next {
	right: 50%;
	margin-right: -16.95rem;
}

.p-case-banner .splide__pagination {
	display: flex;
	position: static;
	justify-content: center;
	margin: 1.3rem 0 0;
	padding: 0;
	gap: 0.8rem;
}

.p-case-banner .splide__pagination__page {
	width: 4rem;
	height: 2px;
	margin: 0;
	border-radius: 999px;
	background-color: #d1d5db;
	opacity: 1;
}

.p-case-banner .splide__pagination__page.is-active {
	height: 3px;
	background-color: #176f94;
}

/* -----------------------------------------------------
 * parts: 事例（サービストップ §G）
 * 見出し（事例 / Works）＋リード＋「事例一覧を見る」＋事例カード(c-card-case)のカルーセル。
 * カルーセルは共通の SlidePickup（js-slide-pickup）＋ .p-pickup-slider の見た目を流用
 *  （SP=295中央＋ちら見／PC=373・アロー＋インジケータ）。両端ちら見のため全幅で受けて中身を1200に絞る。
 * 設計：.claude/docs/forcle_design/coding/24_service_top.md §G
 * -------------------------------------------------- */

.p-cases {
	overflow-x: clip;
}

.p-cases-inner {
	width: 100%;
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-cases-more {
	display: flex;
	margin: 2.4rem auto 0;
}

/* -----------------------------------------------------
 * parts: 企業情報（TOP・Company）
 * 左に大ビジュアル（p-strength-media と同方式のブリード＋角丸）＋ 右に4項目ナビ（項目全体リンク）。
 * 見出し＝c-heading（リード無し）、項目の丸矢印＝c-btn-icon cl-primary、カード背景＝$color-neutral-100 を流用。
 * 左ビジュアル：PC＝コンテンツ左より画面端へブリード（$content-bleed）。SP＝全幅ブリード。
 * -------------------------------------------------- */

.p-company {
	overflow-x: clip;
	margin-top: 8rem;
  /* ===== 左ビジュアル（p-strength-media と同方式） ===== */
  /* ===== 右：4項目ナビ ===== */;
}

.p-company-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-company-body {
	display: flex;
	flex-direction: column;
	margin-top: 2.6rem;
	gap: 3.2rem;
}

.p-company-image {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	margin-inline: -1.6rem;
	aspect-ratio: 375/232;
}

.p-company-image img {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-company-list {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.p-company-item {
	display: flex;
	overflow: hidden;
	align-items: stretch;
	border-radius: 0.8rem;
	background-color: #f5f5f7;
	color: #1a1a1a;
}

.p-company-item .p-company-item-thumb img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.p-company-item-thumb {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	width: 12rem;
	height: 12rem;
	margin: 0;
}

.p-company-item-thumb img {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-company-item-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	padding: 1.6rem 1.6rem 2.4rem;
	gap: 0.8rem;
}

.p-company-item-heading {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.p-company-item-heading .title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-company-item-desc {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: お問い合わせ（全ページ共通・layoutでinclude）
 * ダークの角丸バナー。見出し＋リード／電話＋フォームボタン／資料DL・LINE登録の2カード。
 * 見出し＝c-heading.cl-on-color、ボタン＝c-btn cl-on-color、詳しく見る＝c-btn-arrow.cl-on-color を流用。
 * PC＝電話＋ボタン横・2カード横。SP＝全て縦積み・中央。
 * -------------------------------------------------- */

.p-contact {
	margin: 0;
	padding: 0 1.6rem 3.2rem;
  /* ===== ダークバナー ===== */
  /* ===== 見出し＋リード ＋ 電話＋ボタン のまとまり ===== */
  /* ===== 電話＋フォームボタン ===== */
  /* ===== 2カード（資料DL / LINE登録） ===== */;
}

.p-contact-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 144rem;
	padding: 3.2rem 1.6rem;
	border-radius: 1.6rem;
	background-color: #2d313a;
	color: #fff;
	gap: 3.2rem;
	margin-inline: auto;
}

.p-contact-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 2.4rem;
}

.p-contact .c-heading {
	align-items: center;
}

.p-contact .c-heading .title {
	justify-content: center;
	text-align: center;
}

.p-contact .c-heading .lead {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
}

.p-contact-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
}

.p-contact-main .c-btn {
	width: 24rem;
}

.p-contact-tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}

.p-contact-tel .num {
	display: flex;
	align-items: center;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1rem;
	gap: 1.2rem;
}

.p-contact-tel .ico {
	flex-shrink: 0;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 999px;
	background: #fff no-repeat 50% 50%/2rem;
	background-image: url(../img/ico_tel.png);
	-webkit-filter: none;
	filter: none;
}

.p-contact-tel .hours {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

.p-contact-cards {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 1.6rem;
}

.p-contact-card {
	display: flex;
	flex-direction: column;
	padding: 2.4rem 1.6rem;
	border: 1px solid #d1d5db;
	border-radius: 0.8rem;
	background-color: rgba(22, 26, 36, 0.5);
	color: #fff;
	transition: opacity 0.25s ease;
	gap: 1.6rem;
}

.p-contact-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid #d1d5db;
	gap: 1.2rem;
}

.p-contact-card-head .title {
	margin: 0;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-contact-card-head .c-btn-arrow {
	margin-left: auto;
}

.p-contact-card-desc {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: p-content（記事本文のラッパ＝MTブロックエディタ出力の入れ物。`.p-wysiwyg` と併用）
 * 本文要素の体裁は `_p-wysiwyg.scss` 側。ここは入れ物としての間隔のみ。
 * -------------------------------------------------- */

.l-article-kv + .p-content {
	margin-top: 3rem;
}

/* -----------------------------------------------------
 * parts: CTA（TOP・メルマガ登録バナー）
 * ダークの角丸バナー。PC＝左:見出し / 右:小ラベル＋ボタン（横並び）。SP＝縦積み・全幅ブリード。
 * ボタンは c-btn cl-on-color を流用。※設置のみ・リンク先未定（MTG）。
 * -------------------------------------------------- */

.p-cta {
	margin-top: 8rem;
  /* ===== 小ラベル＋ボタン ===== */
  /* ===== 見出し＋リードを左にまとめるバリアント（サービス詳細・§ボトムCTA） ===== */;
}

.p-cta-banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem 1.6rem 2.4rem;
	background-color: #2d313a;
	color: #fff;
	gap: 0.8rem;
}

.p-cta-title {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
}

.p-cta-title span {
	font-size: 2.6rem;
	line-height: 1.6538461538;
}

.p-cta-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}

.p-cta-action .c-btn {
	width: 24rem;
}

.p-cta-action .c-btn.cl-on-color {
	border-color: transparent;
}

.p-cta-label {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	gap: 0.8rem;
}

.p-cta-label em {
	font-size: 1.8rem;
	font-style: normal;
}

.p-cta-lead {
	margin: 1.2rem 0 0;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.7142857143;
}

.p-cta-banner.sz-lead {
	margin-right: -1.6rem;
	margin-left: -1.6rem;
	text-align: center;
}

.p-cta-banner.sz-lead .p-cta-title {
	font-size: 2.2rem;
	line-height: 1.5;
}

/* -----------------------------------------------------
 * parts: deftable（募集要項などの定義リスト表）
 * dl＋dt（ラベル）/dd（内容）。base=SP（縦積み）→ mq(ovsp) で2カラム（dt240＋dd1fr）。
 * dt下罫線＝ブランド青／dd下罫線＝グレー。dd内 ul は ● ドット。
 * 設計：.claude/docs/forcle_design/coding/21_recruit_detail.md §C-2
 * -------------------------------------------------- */

.p-deftable,
.p-wysiwyg .p-deftable {
	margin-top: 1.6rem;
}

.p-deftable dt,
.p-wysiwyg .p-deftable dt {
	display: flex;
	align-items: flex-start;
	padding-top: 1.6rem;
	padding-bottom: 0.8rem;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-deftable dd,
.p-wysiwyg .p-deftable dd {
	margin: 0;
	padding: 0 0 1.5rem 1.6rem;
	border-bottom: 1px solid #d1d5db;
	font-size: 1.6rem;
	line-height: 1.5;
}

.p-deftable dd *:first-child,
.p-wysiwyg .p-deftable dd *:first-child {
	margin-top: 0 !important;
}

.p-deftable dd *:last-child,
.p-wysiwyg .p-deftable dd *:last-child {
	margin-bottom: 0 !important;
}

.p-deftable dd p,
.p-wysiwyg .p-deftable dd p {
	font-weight: 500;
}

.p-deftable dd ul,
.p-deftable dd ol,
.p-wysiwyg .p-deftable dd ul,
.p-wysiwyg .p-deftable dd ol {
	margin-top: 0.6rem;
}

.p-deftable dd ul li,
.p-deftable dd ol li,
.p-wysiwyg .p-deftable dd ul li,
.p-wysiwyg .p-deftable dd ol li {
	position: relative;
	padding-left: 1.4rem;
}

.p-deftable dd ul li::before,
.p-deftable dd ol li::before,
.p-wysiwyg .p-deftable dd ul li::before,
.p-wysiwyg .p-deftable dd ol li::before {
	width: 0.4rem;
	height: 0.4rem;
}

.p-deftable dd ul li + li,
.p-deftable dd ol li + li,
.p-wysiwyg .p-deftable dd ul li + li,
.p-wysiwyg .p-deftable dd ol li + li {
	margin-top: 0.6rem;
}

.p-deftable dd * + ul,
.p-wysiwyg .p-deftable dd * + ul {
	margin-top: 0.6rem;
}

/* -----------------------------------------------------
 * parts: 広告運用診断 Yes/Noチャート（導入フロー §A）
 * SP対話式＝Diagnosis.js。表示制御を mq(sp) に閉じ込め、PCは mq(ovsp) の grid で常時表示＝両者が干渉しない。
 * 画像エリアは Switcher.js 流用（スライダーではない）。
 * 設計：.claude/docs/forcle_design/coding/25_service_flow.md §5
 * -------------------------------------------------- */

.l-section-contents.p-diagnosis-list,
.p-diagnosis-list {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.l-section-contents.p-diagnosis-q,
.p-diagnosis-q {
	display: flex;
	flex-direction: column;
	padding: 1.6rem;
	border: 1px solid #1a1a1a;
	border-radius: 0.8rem;
	background-color: #fff;
	gap: 1.2rem;
}

.l-section-contents.p-diagnosis-q .head,
.p-diagnosis-q .head {
	display: flex;
	align-items: center;
	margin: 0;
	color: #5c5c66;
	gap: 0.4rem;
}

.l-section-contents.p-diagnosis-q .head .line,
.p-diagnosis-q .head .line {
	flex-shrink: 0;
	width: 2rem;
	height: 0.2rem;
	margin-right: 0.8rem;
	border-radius: 999px;
	background-color: currentColor;
}

.l-section-contents.p-diagnosis-q .head .num,
.p-diagnosis-q .head .num {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

.l-section-contents.p-diagnosis-q .head .cat,
.p-diagnosis-q .head .cat {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-section-contents.p-diagnosis-q .title,
.l-section-contents.p-diagnosis-a .title,
.p-diagnosis-q .title,
.p-diagnosis-a .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.l-section-contents.p-diagnosis-a,
.p-diagnosis-a {
	display: flex;
	flex-direction: column;
	margin-top: 1.6rem;
	padding: 2.4rem;
	border-radius: 1.6rem;
	background-color: #f5f5f7;
	gap: 1.6rem;
}

.l-section-contents.p-diagnosis-a .body,
.p-diagnosis-a .body {
	padding: 1.6rem;
	border-left: 0.2rem solid #9ca3af;
	background-color: #fff;
}

.l-section-contents.p-diagnosis-a .body p,
.p-diagnosis-a .body p {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: justify;
}

.l-section-contents.p-diagnosis-link,
.p-diagnosis-link {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	align-self: flex-start;
	min-width: 20rem;
	height: 4.4rem;
	padding: 0 2rem;
	border: 1px solid #1a1a1a;
	border-radius: 999px;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	gap: 0.8rem;
}

.l-section-contents.p-diagnosis-link .ico,
.p-diagnosis-link .ico {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_arrow_right.png);
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.l-section-contents.p-diagnosis-ctrl .no,
.l-section-contents.p-diagnosis-ctrl .yes,
.p-diagnosis-ctrl .no,
.p-diagnosis-ctrl .yes {
	cursor: pointer;
	display: inline-flex;
	position: relative;
	flex-shrink: 0;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 5.6rem;
	height: 5.6rem;
	padding-bottom: 0.4rem;
	border-radius: 999px;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1rem;
	-webkit-appearance: none;
	appearance: none;
}

.l-section-contents.p-diagnosis-ctrl .yes,
.p-diagnosis-ctrl .yes {
	background-color: #004b6f;
	color: #fff;
}

.l-section-contents.p-diagnosis-ctrl .no,
.p-diagnosis-ctrl .no {
	border: 1px solid #1a1a1a;
	background-color: #fff;
	color: #1a1a1a;
}

.l-section-contents.p-diagnosis-gallery,
.p-diagnosis-gallery {
	margin-top: 8rem;
}

.l-section-contents.p-diagnosis-gallery-main,
.p-diagnosis-gallery-main {
	scroll-margin-top: 0;
}

.l-section-contents.p-diagnosis-gallery-main:not(:first-child),
.p-diagnosis-gallery-main:not(:first-child) {
	display: none;
}

.l-section-contents.p-diagnosis-gallery-main figure,
.p-diagnosis-gallery-main figure {
	margin: 0;
}

.l-section-contents.p-diagnosis-gallery-main img,
.p-diagnosis-gallery-main img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #d1d5db;
	border-radius: 0.8rem;
	aspect-ratio: 343/212;
	-o-object-fit: contain;
	object-fit: contain;
}

.l-section-contents.p-diagnosis-gallery-thumbs,
.p-diagnosis-gallery-thumbs {
	display: flex;
	margin-top: 1.6rem;
	gap: 0.8rem;
}

.l-section-contents.p-diagnosis-gallery-thumbs li,
.p-diagnosis-gallery-thumbs li {
	flex: 1;
}

.l-section-contents.p-diagnosis-gallery-thumbs a,
.p-diagnosis-gallery-thumbs a {
	display: block;
	overflow: clip;
	height: 4rem;
	border: 1px solid #d1d5db;
	border-radius: 0.4rem;
	transition: opacity 0.2s ease;
}

.l-section-contents.p-diagnosis-gallery-thumbs a img,
.p-diagnosis-gallery-thumbs a img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.l-section-contents.p-diagnosis-gallery-thumbs li.is-active a,
.p-diagnosis-gallery-thumbs li.is-active a {
	border: 2px solid #176f94;
}

/* -----------------------------------------------------
 * parts: 資料情報（資料DLフォームページ上部）
 * ダウンロード対象の資料サムネ＋タイトルを中央寄せで表示。下にHubSpot埋め込みフォームが続く。
 * -------------------------------------------------- */

.p-document-detail {
	margin-bottom: 3.2rem;
	text-align: center;
}

.p-document-detail .thumb {
	display: inline-block;
	overflow: hidden;
	width: 100%;
	max-width: 28rem;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 280/180;
}

.p-document-detail .thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-document-detail .title {
	margin: 2rem 0 0;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

/* -----------------------------------------------------
 * parts: entry（採用 エントリー節）
 * 緑LINEバナー（.p-entry-line）＋外部リンクバナー群（.p-entry-banners）。
 * base=SP（1カラム縦積み）→ mq(ovsp) でPC（中央800・バナー2列）。
 * 見出しH2は wysiwyg外のため、本文H2（線なし）と同サイズを自前で当てる。
 * 設計：.claude/docs/forcle_design/coding/21_recruit_detail.md §E
 * -------------------------------------------------- */

.p-entry {
	margin-top: 8rem;
}

.p-entry > h2 {
	margin: 0;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.p-entry-line {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	margin-top: 3.2rem;
	padding: 1.2rem 1.2rem;
	border-radius: 0.8rem;
	background-color: #06c755;
	color: #fff;
	text-align: center;
	transition: all 0.2s ease;
	gap: 0.8rem;
}

.p-entry-line .lead {
	width: 100%;
	margin: 0;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid #fff;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.7;
}

.p-entry-line .main {
	display: flex;
	position: relative;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	gap: 1.2rem;
}

.p-entry-line .logo {
	flex-shrink: 0;
	width: 6.4rem;
	height: 6.4rem;
}

.p-entry-line .text {
	display: block;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: left;
}

.p-entry-line .c-btn-icon {
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.p-entry-banners {
	display: grid;
	margin-top: 2.4rem;
	grid-template-columns: 1fr;
	gap: 2.4rem;
}

.p-entry-banners a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 11.2rem;
	padding: 1.6rem 2.4rem;
	border: 1px solid #9ca3af;
	border-radius: 0.8rem;
	background-color: #fff;
	transition: all 0.2s ease;
}

.p-entry-banners img {
	width: 24rem;
	height: 7.2rem;
	-o-object-fit: contain;
	object-fit: contain;
}

/* -----------------------------------------------------
 * parts: SP固定CTAバー（画面下に追従）
 * SPのみ。無料資料DL／プロに相談する の2ボタンを全幅2分割（フラット・角丸なし）。
 * iOS Safari でも下端に固定：position:fixed; bottom:0 ＋ safe-area-inset で下余白確保。
 * cookie同意バナー（z-index:200）が上に被る＝ここは 200 未満。
 * 本文がバーに隠れないよう .is-home 側で下余白を確保（同ファイル末尾）。
 * -------------------------------------------------- */

.p-fixed-cta {
	display: flex;
	position: fixed;
	z-index: 90;
	right: 0;
	bottom: 0;
	left: 0;
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #fff;
}

.p-fixed-cta .c-btn {
	flex: 1 1 0;
	height: 5.6rem;
	padding: 0 1.2rem 0 2.4rem;
	border-width: 1px;
	border-radius: 0;
}

/* 固定バーぶんの下余白（TOPのSPのみ）。フッター最下部が隠れないように */

/* -----------------------------------------------------
 * parts: 導入フロー 表の凡例（役割分担表／PDCA表 共用）
 * 設計：.claude/docs/forcle_design/coding/25_service_flow.md §7-1・§8-1
 * -------------------------------------------------- */

.p-flow-legend {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1.6rem;
	gap: 0.8rem 2.4rem;
}

.p-flow-legend li {
	display: flex;
	align-items: center;
	color: #1a1a1a;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.5;
	gap: 0.8rem;
}

.p-flow-legend .chip {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 0.4rem;
}

.p-flow-legend .chip.cl-green {
	background-color: #008000;
}

.p-flow-legend .chip.cl-blue-dark {
	background-color: #004b6f;
}

.p-flow-legend .chip.cl-blue-light {
	background-color: #3fa1c6;
}

.p-flow-legend .chip.cl-check {
	background-color: #e8971e;
}

.p-flow-legend .chip.cl-action {
	background-color: #e81e21;
}

/* -----------------------------------------------------
 * parts: 導入フロー「Question.」補足見出し（各セクション冒頭・h2の上／非見出し）
 * 設計：.claude/docs/forcle_design/coding/25_service_flow.md §6
 * -------------------------------------------------- */

.p-flow-question {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 7.8rem;
	margin-bottom: 7.8rem;
	text-align: center;
}

.p-flow-question .label {
	margin: 0;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.p-flow-question .text {
	position: relative;
	margin-top: 0.4rem;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-flow-question::after {
	content: '';
	width: 0.2rem;
	height: 3.2rem;
	margin-top: -0.8rem;
	background-color: #1a1a1a;
}

/* -----------------------------------------------------
 * parts: 各フェーズの詳細（導入フロー §B）
 * 縦罫線はバッジ列の中心を通し、バッジ背景で重なりを隠す。
 * 設計：.claude/docs/forcle_design/coding/25_service_flow.md §7-2
 * -------------------------------------------------- */

.p-flow-steps {
	display: flex;
	position: relative;
	flex-direction: column;
}

.p-flow-steps::before {
	content: '';
	position: absolute;
	top: 2.4rem;
	bottom: 2.4rem;
	left: 2.4rem;
	width: 1px;
	background-color: #d1d5db;
}

.p-flow-steps-item {
	display: flex;
	gap: 1.5rem;
}

.p-flow-steps-item .num {
	display: flex;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 4.8rem;
	height: 4.8rem;
	border: 1px solid #1a1a1a;
	border-radius: 999px;
	background-color: #1a1a1a;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
}

.p-flow-steps-item:last-child .num {
	border-color: #176f94;
	background-color: #176f94;
}

.p-flow-steps-item .body {
	flex: 1 1 0;
	min-width: 0;
	padding-bottom: 2.4rem;
	border-bottom: 1px solid #d1d5db;
}

.p-flow-steps-item .title {
	display: flex;
	align-items: center;
	min-height: 4.8rem;
	margin: 0;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-flow-steps-item:last-child .title {
	color: #176f94;
}

.p-flow-steps-item .desc {
	margin: 0.8rem 0 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
}

.p-flow-steps-item .note {
	margin-top: 1.6rem;
	padding: 1.6rem;
	border-left: 2px solid #9ca3af;
	background-color: #f5f5f7;
}

.p-flow-steps-item .note p {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

/* -----------------------------------------------------
 * parts: 導入フローの表（§B役割分担／§C PDCA一覧 共用）
 * inner幅を超える固定幅を &-scroll（overflow-x）で横スクロール。
 * 設計：.claude/docs/forcle_design/coding/25_service_flow.md §7-1・§8-1
 * -------------------------------------------------- */

.p-flow-table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
	min-width: 120rem;
}

.p-flow-table-wrap {
	position: relative;
}

.p-flow-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.p-flow-table th,
.p-flow-table td {
	border: 1px solid #d1d5db;
	text-align: center;
}

.p-flow-table th:first-child,
.p-flow-table td:first-child {
	width: 12rem;
}

.p-flow-table thead th {
	padding: 1.6rem 1.2rem;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	vertical-align: middle;
}

.p-flow-table tbody th {
	padding: 1.7rem 1rem;
	background-color: #f5f5f7;
	color: #1a1a1a;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
}

.p-flow-table td {
	padding: 1.7rem 1.4rem;
	background-color: #fff;
	vertical-align: middle;
}

.p-flow-table .cell,
.p-flow-table .pill {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0.7rem 1.2rem;
	border: 1px solid currentColor;
	border-radius: 0.4rem;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
}

.p-flow-table .cell.cl-green,
.p-flow-table .pill.cl-green {
	color: #008000;
}

.p-flow-table .cell.cl-blue-dark,
.p-flow-table .pill.cl-blue-dark {
	color: #004b6f;
}

.p-flow-table .cell.cl-blue-light,
.p-flow-table .pill.cl-blue-light {
	color: #3fa1c6;
}

.p-flow-table .cell.cl-check,
.p-flow-table .pill.cl-check {
	color: #e8971e;
}

.p-flow-table .cell.cl-action,
.p-flow-table .pill.cl-action {
	color: #e81e21;
}

.p-flow-table .cell.is-fill {
	color: #fff;
}

.p-flow-table .cell.is-fill.cl-green {
	border-color: #008000;
	background-color: #008000;
}

.p-flow-table .cell.is-fill.cl-blue-dark {
	border-color: #004b6f;
	background-color: #004b6f;
}

.p-flow-table .cell.is-fill.cl-blue-light {
	border-color: #3fa1c6;
	background-color: #3fa1c6;
}

.p-flow-table .pill.cl-blue-light {
	background-color: rgba(63, 161, 198, 0.1);
}

.p-flow-table .pill.cl-green {
	background-color: rgba(0, 128, 0, 0.1);
}

.p-flow-table .pill.cl-check {
	background-color: rgba(232, 151, 30, 0.1);
}

.p-flow-table .pill.cl-action {
	background-color: rgba(232, 30, 33, 0.1);
}

.p-flow-table .pill.cl-blue-dark {
	background-color: rgba(0, 75, 111, 0.1);
}

.p-flow-table .empty {
	color: #9ca3af;
}

.p-flow-table-hint {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16rem;
	transition: opacity 0.4s ease;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.p-flow-table-hint img {
	display: block;
	width: 100%;
	height: auto;
}

.p-flow-table-wrap.is-scrolled .p-flow-table-hint {
	opacity: 0;
}

.p-flow-table-pdca thead th .q,
.p-flow-table-pdca thead th .phase {
	display: block;
}

.p-flow-table-pdca td {
	text-align: left;
	vertical-align: top;
}

.p-flow-table-pdca td .pill {
	text-align: center;
}

.p-flow-table-pdca td .pill + .pill {
	margin-top: 0.6rem;
}

/* -----------------------------------------------------
 * parts: gallery（採用 ギャラリー・枚数で出し分け）
 * 件数 n と data属性のしきい値（PC/SP別）で Gallery.js が .is-fixed / .is-flow を付与：
 *   .is-fixed ＝固定boxを中央寄せ横並び（SP＝2列グリッド）。
 *   .is-flow  ＝自動横流れ（1行＝「スライダー」／ 2行＝上下に流す・2行目は逆方向。操作ボタン無し）。
 * しきい値：PC fixed≤4 / 1行5-9 / 2行≥10、SP fixed≤2 / 1行=3 / 2行≥4。
 * box＝351×230（≈3:2）固定 / 流れ時は固定幅（SP固定時は2列グリッド）。reduced-motion時は固定（静止）。
 * 設計：.claude/docs/forcle_design/coding/22_recruit_top.md §C
 * -------------------------------------------------- */

.p-gallery-section {
	overflow-x: clip;
}

.l-section + .p-gallery-section {
	margin-top: 8rem !important;
}

.p-gallery-section-body {
	margin-top: 3.5rem !important;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
}

/* ===== 写真セル（全モード共通） ===== */

.p-gallery li {
	position: relative;
	overflow: hidden;
	border-radius: 0.4rem;
}

.p-gallery li img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* ===== 固定モードの並び（SP＝2列グリッド／PCは下の mq で中央寄せ横並びに上書き） ===== */

.p-gallery {
	--pitch-pc: 361;
}

.p-gallery-track {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem;
}

.p-gallery li {
	aspect-ratio: 351/230;
}

/* ===== 自動横流れ（is-flow）＝SP/PC共通の flexマーキー（JSが行を生成・CSSアニメ＋複製） ===== */

.p-gallery.is-flow {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.p-gallery.is-flow .p-gallery-track {
	display: flex;
	flex-wrap: nowrap;
	width: -webkit-max-content;
	width: max-content;
	-webkit-animation: gallery-loop var(--loop-duration, 40s) linear infinite;
	animation: gallery-loop var(--loop-duration, 40s) linear infinite;
	gap: 0;
}

.p-gallery.is-flow .p-gallery-track:nth-child(2) {
	animation-direction: reverse;
}

.p-gallery.is-flow li {
	flex: 0 0 auto;
	width: 16.8rem;
	height: auto;
	margin-right: 0.7rem;
	aspect-ratio: 351/230;
}

/* ===== PC＝box固定280・モード別 ===== */

@-webkit-keyframes gallery-loop {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	to {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@keyframes gallery-loop {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	to {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

/* -----------------------------------------------------
 * parts: 沿革（企業情報ページ §History）
 * 縦タイムライン。年｜ドット｜（月＋本文）。ドットを貫く縦線でつなぐ。
 * 縦線は左位置を「年カラム幅＋gap＋ドット半径」に合わせる（PC/SPで別値）。
 * 設計：.claude/docs/forcle_design/coding/27_company.md §5-3
 * -------------------------------------------------- */

.p-history {
	display: flex;
	position: relative;
	flex-direction: column;
	margin-top: 3.4rem;
	gap: 1.6rem;
}

.p-history::before {
	content: '';
	position: absolute;
	top: 2.1rem;
	bottom: 1.2rem;
	left: 10.9rem;
	width: 1px;
	background-color: #004b6f;
}

.p-history-item {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
}

.p-history-item .year {
	display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	align-items: flex-end;
	width: 9rem;
	margin: 0;
	gap: 0.2rem;
}

.p-history-item .year .num {
	flex: 1 1 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
	letter-spacing: 0.1rem;
}

.p-history-item .year .unit {
	padding-bottom: 0.8rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

.p-history-item .dot {
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 1.4rem;
	border-radius: 999px;
	background-color: #004b6f;
}

.p-history-item .body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	gap: 0.4rem;
}

.p-history-item .body .month {
	display: flex;
	flex-shrink: 0;
	align-items: flex-end;
	margin: 0;
	gap: 0.2rem;
}

.p-history-item .body .month .num {
	font-family: 'Montserrat', sans-serif;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.1rem;
}

.p-history-item .body .month .unit {
	position: relative;
	padding-bottom: 0.6rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

.p-history-item .body .desc {
	flex: 1 1 0;
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: HubSpotフォーム埋め込み（_partial/_hsform.njk）
 * フォーム本体はクロスオリジンiframeのため当サイトCSSは中に効かない。
 * - 外側のiframe枠（.hs-form-frame）の角だけデザインに合わせる（radius/xl=16＝1.6rem）。
 *   iframeの角を丸めるには枠側でクリップが要るため overflow:hidden を併用。
 * - 読み込み中（HubSpotのラグ）はスピナー表示→完了でフォームをフェードイン＋高さをアニメ（HsForm.js が is-loading を制御）。
 *   基底 min-height で読込直後から領域確保（JS実行前/無効でも跳ねない）。is-loading の時だけスピナー表示＋フォームを隠す。
 * -------------------------------------------------- */

.p-hsform {
	position: relative;
	overflow: hidden;
	min-height: 50rem;
	transition: height 0.5s ease;
  /* 単独ページは l-section 側で間隔が付くため、記事本文の下に置いた場合だけ間隔を持たせる */;
}

.p-content + .p-hsform,
.p-movie + .p-hsform {
	margin-top: 3.2rem;
}

.p-hsform-loading {
	display: none;
	position: absolute;
	justify-content: center;
	align-items: center;
	inset: 0;
}

.p-hsform-spinner {
	width: 4rem;
	height: 4rem;
	border: 4px solid #d1d5db;
	border-top-color: #176f94;
	border-radius: 50%;
	-webkit-animation: hsform-spin 0.8s linear infinite;
	animation: hsform-spin 0.8s linear infinite;
}

.p-hsform.is-loading .p-hsform-loading {
	display: flex;
}

.p-hsform.is-loading .hs-form-frame {
	height: 0;
	opacity: 0;
}

.hs-form-frame {
	overflow: hidden;
	border-radius: 1.6rem;
	transition: opacity 0.5s ease;
}

@-webkit-keyframes hsform-spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes hsform-spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* -----------------------------------------------------
 * parts: html
 * -------------------------------------------------- */

.p-html *:first-child {
	margin-top: 0;
}

.p-html p {
	margin: 1em 0 0;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5714285714;
}

.p-html ul {
	margin: 1em 0 0;
}

.p-html ul ul {
	margin-top: 4px;
}

.p-html ul li {
	position: relative;
	padding-left: 1em;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5714285714;
}

.p-html ul li::before {
	content: '';
	display: block;
	position: absolute;
	top: 0.6em;
	left: 0;
	overflow: hidden;
	width: 6px;
	height: 6px;
	border: 0;
	border-radius: 50%;
	background: transparent no-repeat 50% 50%/6px;
	background-image: url('data:image/svg+xml,%0A%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 6 6\'%3E%3Cpath id=\'パス_357\' fill=\'%23242424\' d=\'M3 0a3 3 0 1 1-3 3 3 3 0 0 1 3-3Z\' data-name=\'パス 357\'/%3E%3C/svg%3E');
	aspect-ratio: 1/1;
}

.p-html ul li a {
	position: relative;
	padding-bottom: 0.3rem;
}

.p-html ul li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #1a1a1a;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: right top;
	transform-origin: right top;
}

/* -----------------------------------------------------
 * parts: こんな業界は特に知見があります（サービストップ §E スタッフ実績内のサブブロック）
 * 見出し＝h3（28px＋下線ルール）。カードは静的（非アコーディオン・全項目表示）。
 * カード本文＝サブグループの2カラムグリッド（列優先）。
 * PC＝全幅カードを縦積み／SP＝295幅カードのカルーセル（SlidePrecedent流用・インジケータ／PCはdestroyで縦積み）。
 * 設計：.claude/docs/forcle_design/coding/24_service_top.md §E
 * -------------------------------------------------- */

.l-section-contents.p-industry-heading,
.p-industry-heading {
	position: relative;
	margin: 0;
	padding-bottom: 1.6rem;
	border-bottom: 2px solid #d1d5db;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.75;
}

.l-section-contents.p-industry-heading::after,
.p-industry-heading::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 8rem;
	height: 2px;
	background-color: #176f94;
}

.l-section-contents.p-industry-cards,
.p-industry-cards {
	margin-top: 2.4rem;
	margin-right: -1.6rem;
	margin-left: -1.6rem;
}

.l-section-contents.p-industry-cards .splide__pagination,
.p-industry-cards .splide__pagination {
	display: flex;
	position: static;
	justify-content: center;
	margin: 2.4rem 0 0;
	padding: 0;
	gap: 0.8rem;
}

.l-section-contents.p-industry-cards .splide__pagination__page,
.p-industry-cards .splide__pagination__page {
	width: 4rem;
	height: 2px;
	margin: 0;
	border-radius: 999px;
	background-color: #d1d5db;
	opacity: 1;
}

.l-section-contents.p-industry-cards .splide__pagination__page.is-active,
.p-industry-cards .splide__pagination__page.is-active {
	height: 3px;
	background-color: #176f94;
}

.l-section-contents.p-industry-card,
.p-industry-card {
	display: flex;
	flex-direction: column;
	padding: 2.4rem;
	border-radius: 0.8rem;
	background-color: #f5f5f7;
	gap: 1.2rem;
}

.l-section-contents.p-industry-head,
.p-industry-head {
	display: flex;
	align-items: center;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid #d1d5db;
	gap: 0.8rem;
}

.l-section-contents.p-industry-head .name,
.p-industry-head .name {
	flex: 1;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-section-contents.p-industry-cols,
.p-industry-cols {
	margin: 0;
}

.l-section-contents.p-industry-cols > div,
.p-industry-cols > div {
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	break-inside: avoid;
}

.l-section-contents.p-industry-cols > div + div,
.p-industry-cols > div + div {
	margin-top: 0.8rem;
}

.l-section-contents.p-industry-cols dt,
.p-industry-cols dt {
	color: #1a1a1a;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-section-contents.p-industry-cols dd,
.p-industry-cols dd {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: innerlinks（ページ内アンカーリンク行）
 * 上下1px罫線の帯に、○囲み下矢印アイコン＋ラベルを横並び。
 * 中身は CreateInnerLinks.js が直後の本文の見出し（data-elm）から ul>li>a を自動生成。
 * 募集要項詳細などで使用（他ページでも再利用想定）。
 * base=SP（gap16）→ mq(ovsp) でPC（gap48）。本文カラムより広い独立ブロック。
 * 設計：.claude/docs/forcle_design/coding/21_recruit_detail.md §B
 * -------------------------------------------------- */

.p-innerlinks {
	margin: 0 1.6rem;
	padding: 2.4rem 0 2rem;
	border-top: 1px solid #9ca3af;
	border-bottom: 1px solid #9ca3af;
}

.p-innerlinks ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.3rem;
}

.p-innerlinks a {
	display: inline-flex;
	align-items: center;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	gap: 0.8rem;
}

.p-innerlinks a::before {
	content: '';
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid #9ca3af;
	border-radius: 999px;
	background: no-repeat 50% 50%/1.4rem;
	background-image: url(../img/ico_arrow_down.png);
}

.p-mv + .p-innerlinks {
	margin-top: 5.5rem;
}

/* -----------------------------------------------------
 * parts: 最新ノウハウ（TOP・Know How）
 * 左＝記事カードのカルーセル（カード全体リンク）／右＝カテゴリリンク4本。
 * 見出し行は他節と左右反転（PC＝左ボタン・右見出し）。DOM順＝見出し→body→ボタン。
 * 見出し＝c-heading（リード無し）、バッジ＝c-badge、カテゴリリンク＝c-link-blog、ボタン＝c-btn-more を流用。
 * -------------------------------------------------- */

.p-knowhow {
	overflow-x: clip;
	margin-top: 8rem;
  /* ===== ボタン（SP=最下部中央 / PC=見出し行の左） ===== */
  /* ===== 本文（SP=縦積み / PC=左スライダー＋右リンク） ===== */
  /* ===== 左：記事カードスライダー ===== */
  /* ===== カード（全体リンク） ===== */
  /* ===== 右：カテゴリリンク（c-link-blog 4本） ===== */;
}

.p-knowhow-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-knowhow-action {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.p-knowhow-body {
	margin-top: 2.4rem;
}

.p-knowhow-slider .splide__track {
	overflow: visible;
}

.p-knowhow-slider .splide__arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.4rem;
	height: 4.4rem;
	margin: 0;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1;
}

.p-knowhow-slider .splide__arrow svg {
	display: none;
}

.p-knowhow-slider .splide__arrow::before {
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	background: no-repeat 50% 50%/contain;
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.p-knowhow-slider .splide__arrow--prev::before {
	background-image: url(../img/ico_arrow_left.png);
}

.p-knowhow-slider .splide__arrow--next::before {
	background-image: url(../img/ico_arrow_right.png);
}

.p-knowhow-slider .splide__arrow {
	position: absolute;
	z-index: 2;
	top: 8.6rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.p-knowhow-slider .splide__arrow--prev {
	left: 50%;
	margin-left: -16rem;
}

.p-knowhow-slider .splide__arrow--next {
	right: 50%;
	margin-right: -16rem;
}

.p-knowhow-card {
	display: flex;
	flex-direction: column;
	color: #1a1a1a;
	gap: 1.6rem;
}

.p-knowhow-card .p-knowhow-card-thumb img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.p-knowhow-card-thumb {
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 276/172;
}

.p-knowhow-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-knowhow-card-body {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.p-knowhow-card-head {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.p-knowhow-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.8rem;
}

.p-knowhow-card-meta .date {
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1;
}

.p-knowhow-card-title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.p-knowhow-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.p-knowhow-links {
	display: flex;
	flex-direction: column;
	margin-top: 2.4rem;
	gap: 1.2rem;
}

/* -----------------------------------------------------
 * parts: KV（TOP ファーストビュー）
 * SP=画像→コピー→サービスナビの縦積み（ソース順＝SP基準）。
 * ovsp=左コピー＋サービスナビ／右メインビジュアル（row-reverse・justify-between）。
 * コピー・画像は後でフェードSwiper（SlideFade）化。インジケータは画像スライド連動。
 * デザイン実測＝05_top_kv.md §6（#111827は$color-blackに統一）。
 * -------------------------------------------------- */

.p-kv {
	position: relative;
	overflow-x: clip;
  /* FV下部：ボタン2（左）＋お知らせ1件（右）。SP＝縦積み（お知らせ→ボタン） */
  /* ===== 右：メインビジュアル（画像フェードスライダー＝Swiper/SlideFade） ===== */
  /* インジケータ＝Swiper pagination。Swiperが付与する .swiper-pagination の絶対配置を打ち消し、フローで配置 */
  /* ===== 左：コピー＋サービスナビ ===== */
  /* サービスナビ（固定。スライドしない） */
  /* スクロールインジケータ（PCのみ・FV右下：線＋下降ドット＋縦書きSCROLL） */;
}

.p-kv-inner {
	display: flex;
	flex-direction: column;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	gap: 3.2rem;
}

.p-kv-foot {
	display: flex;
	flex-direction: column-reverse;
	margin-top: 2.4rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	gap: 1.6rem;
}

.p-kv-foot-btns {
	display: none;
}

.p-kv-visual-slider {
	overflow: hidden;
	width: 100%;
	border-radius: 0.8rem;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	aspect-ratio: 1/1;
}

.p-kv-visual-slider .swiper-wrapper,
.p-kv-visual-slider .swiper-slide {
	height: 100%;
}

.p-kv-visual-img {
	width: 100%;
	height: 100%;
	margin: 0;
}

.p-kv-visual-img img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-kv-indicator {
	display: flex;
	position: static;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 3px;
	margin-top: 2.4rem;
	gap: 0.8rem;
}

.p-kv-indicator .swiper-pagination-bullet {
	cursor: pointer;
	display: block;
	width: 4rem;
	height: 2px;
	margin: 0;
	border-radius: 999px;
	background-color: #d1d5db;
	opacity: 1;
	transition: background-color 0.3s ease, height 0.3s ease;
}

.p-kv-indicator .swiper-pagination-bullet-active {
	height: 3px;
	background-color: #176f94;
}

.p-kv-body {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

.p-kv-copy .char {
	display: inline-block;
	opacity: 0;
	transition: opacity var(--char-duration, 0.5s) ease, -webkit-transform var(--char-duration, 0.5s) ease;
	transition: opacity var(--char-duration, 0.5s) ease, transform var(--char-duration, 0.5s) ease;
	transition: opacity var(--char-duration, 0.5s) ease, transform var(--char-duration, 0.5s) ease, -webkit-transform var(--char-duration, 0.5s) ease;
	transition-delay: var(--char-out-delay, 0.5s);
	-webkit-transform: translateY(var(--char-move, 0.2em));
	transform: translateY(var(--char-move, 0.2em));
}

.p-kv-copy .char-space {
	white-space: pre;
}

.p-kv-copy .swiper-slide.is-chars-in .char {
	opacity: 1;
	transition-delay: calc(var(--char-base, 0s) + var(--char-index, 0) * var(--char-stagger, 0.04s));
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.p-kv-copy .cl-brand {
	color: #176f94;
}

.p-kv-copy-slider {
	overflow: visible;
	width: 100%;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.p-kv-copy-slider .swiper-slide {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.p-kv-tag {
	align-self: flex-start;
	margin: 0 0 0 -1.6rem;
	padding: 0.2rem 0.8rem 0.4rem 1.6rem;
	border-radius: 0 0.2rem 0.2rem 0;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.6;
}

.p-kv-title {
	margin: 0;
	color: #1a1a1a;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-kv-nav {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.p-kv-nav li {
	display: grid;
	align-items: start;
	grid-template-columns: 18.5rem 1fr;
	grid-template-areas: 'heading link' 'desc    desc';
	gap: 0.8rem 2.4rem;
}

.p-kv-nav li:not(:last-child) {
	padding-bottom: 1.6rem;
	border-bottom: 1px solid #d1d5db;
}

.p-kv-nav .heading {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	grid-area: heading;
}

.p-kv-nav .desc {
	margin: 0;
	color: #5c5c66;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7;
	grid-area: desc;
}

.p-kv-nav .c-btn-secondary {
	align-self: center;
	white-space: nowrap;
	grid-area: link;
	justify-self: stretch;
}

.p-kv-nav .c-btn-secondary .label::after {
	content: none;
}

.p-kv-scroll {
	display: none;
}

@-webkit-keyframes kvScrollDot {
	0% {
		opacity: 0;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	15% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(14.8rem);
		transform: translateY(14.8rem);
	}
}

@keyframes kvScrollDot {
	0% {
		opacity: 0;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	15% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(14.8rem);
		transform: translateY(14.8rem);
	}
}

/* -----------------------------------------------------
 * parts: labels
 * -------------------------------------------------- */

.p-labels {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px;
}

/* -----------------------------------------------------
 * parts: list news
 * -------------------------------------------------- */

.p-list-news {
	border-top: 2px solid #1a1a1a;
	border-bottom: 2px solid #1a1a1a;
}

.p-list-news li {
	display: grid;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid #e4e5ea;
	grid-template-columns: 92px 1fr;
	justify-items: start;
	gap: 8px 10px;
}

.p-list-news li:last-child {
	border: none;
}

.p-list-news li time {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4rem;
	font-weight: 500;
}

.p-list-news li .title {
	margin: 8px 0 0;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5714285714;
	letter-spacing: 0.025em;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.p-list-news li .title a {
	display: inline-block;
	position: relative;
	padding-bottom: 0.3rem;
}

.p-list-news li .title a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #1a1a1a;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: right top;
	transform-origin: right top;
}

/* -----------------------------------------------------
 * parts: SNSアイコンリスト（ヘッダードロワー / フッター 共通）
 * 白ボックス＋モノアイコン。見せ方は共通で、余白(padding/gap)はコンテキスト側で上書きする。
 * アイコンは <img>（/assets/img/ico_sns_{x,insta,fb,yt}_mono.png）で配置（種別ごとのクラス不要）。
 * -------------------------------------------------- */

.p-list-sns {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 45.4rem;
	padding: 2.4rem;
	border-radius: 0.4rem;
	background-color: #fff;
	gap: 3.2rem;
}

.p-list-sns a {
	display: block;
	transition: opacity 0.2s ease;
}

.p-list-sns img {
	display: block;
	width: 4rem;
	height: 4rem;
	-o-object-fit: contain;
	object-fit: contain;
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

/* -----------------------------------------------------
 * parts: list
 * -------------------------------------------------- */

.p-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* -----------------------------------------------------
 * parts: ロゴ帯（KV下・横流れループ）
 * 画像のみ・リンクなし・クライアント登録（MT）。トラックを複製して無限ループ（LogoLoop.js）。
 * 速度は data-loop-speed（px/秒）。is-loop-ready 付与でアニメ開始。reduced-motion時は静止。
 * 各アイテムは margin-right で等間隔（末尾も含む）→ translateX(-50%) でシームレス。
 * -------------------------------------------------- */

.p-logos {
	overflow: hidden;
	width: 100%;
	margin: 2.8rem 0 0;
	padding: 0.4rem 0;
}

.p-logos-track {
	display: flex;
	align-items: center;
	width: -webkit-max-content;
	width: max-content;
}

.p-logos.is-loop-ready .p-logos-track {
	-webkit-animation: logoLoop var(--loop-duration, 30s) linear infinite;
	animation: logoLoop var(--loop-duration, 30s) linear infinite;
}

.p-logos li {
	flex-shrink: 0;
	margin-right: 3.2rem;
}

.p-logos img {
	display: block;
	width: auto;
	max-width: 20rem;
	height: 7.2rem;
	-o-object-fit: contain;
	object-fit: contain;
}

@-webkit-keyframes logoLoop {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	to {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@keyframes logoLoop {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	to {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

/* -----------------------------------------------------
 * parts: 課題解決マインドマップ（サービストップ §D・JSON駆動）
 * タブ＝カテゴリ。PC＝横タブ（Switcher）＋下に内容ボックス。SP＝枠で囲ったアコーディオン型タブ
 *  （バーを縦積み・選択バーは黒地で直下に内容／Accordion）。
 * 内容＝タグチップ（単一選択）＋悩み項目のアコーディオン（開くと 課題→解決策 ＋ 関連サービス）。
 * チップ・項目は MindMap.js が JSON から生成。
 * 設計：.claude/docs/forcle_design/coding/24_service_top.md §D
 * -------------------------------------------------- */

.l-section-contents.p-mindmap,
.p-mindmap {
	overflow: clip;
	border: 1px solid #1a1a1a;
	border-radius: 0.8rem;
  /* ===== PC横タブ（Switcher行・PCのみ） ===== */
  /* ===== パネル（カテゴリ） ===== */
  /* ===== SPバー（アコーディオントリガ・PCは非表示） ===== */
  /* ===== パネル中身（チップ＋リスト） ===== */
  /* ===== 悩み項目（アコーディオン） ===== */;
}

.l-section-contents.p-mindmap-tabs ul,
.p-mindmap-tabs ul {
	display: flex;
	align-items: flex-end;
	width: 100%;
	border-bottom: 2px solid #1a1a1a;
	gap: 0.8rem;
}

.l-section-contents.p-mindmap-tabs ul li,
.p-mindmap-tabs ul li {
	flex: 1;
}

.l-section-contents.p-mindmap-tabs ul a,
.p-mindmap-tabs ul a {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.2rem 1.6rem;
	border: 2px solid #d1d5db;
	border-bottom: 0;
	border-radius: 0.8rem 0.8rem 0 0;
	background-color: #fff;
	text-align: center;
	gap: 0.8rem;
}

.l-section-contents.p-mindmap-tabs ul a .name,
.p-mindmap-tabs ul a .name {
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.l-section-contents.p-mindmap-tabs ul a .sub,
.p-mindmap-tabs ul a .sub {
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

.l-section-contents.p-mindmap-tabs ul li.is-active a,
.p-mindmap-tabs ul li.is-active a {
	margin-bottom: -2px;
	padding-top: 1.6rem;
	padding-bottom: 1.8rem;
	border-color: #1a1a1a;
	background-color: #1a1a1a;
}

.l-section-contents.p-mindmap-tabs ul li.is-active a .name,
.p-mindmap-tabs ul li.is-active a .name {
	color: #fff;
}

.l-section-contents.p-mindmap-tabs ul li.is-active a .sub,
.p-mindmap-tabs ul li.is-active a .sub {
	color: #fff;
	font-weight: 600;
}

.l-section-contents.p-mindmap-panel,
.p-mindmap-panel {
	background-color: #fff;
}

.l-section-contents.p-mindmap-bar,
.p-mindmap-bar {
	cursor: pointer;
	display: flex;
	position: relative;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	padding: 1.6rem;
	border: 0;
	background-color: #fff;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	gap: 0.8rem 1.6rem;
}

.l-section-contents.p-mindmap-bar .name,
.p-mindmap-bar .name {
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.l-section-contents.p-mindmap-bar .sub,
.p-mindmap-bar .sub {
	width: 100%;
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-section-contents.p-mindmap-bar .ico,
.p-mindmap-bar .ico {
	position: absolute;
	top: calc(50% - 1.2rem);
	right: 1.4rem;
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	margin-left: auto;
	border-radius: 999px;
	background-color: #1a1a1a;
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.l-section-contents.p-mindmap-bar .ico::before,
.p-mindmap-bar .ico::before {
	content: '';
	position: absolute;
	background: no-repeat 50% 50%/1.8rem;
	background-image: url(../img/ico_arrow_down.png);
	inset: 0;
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.l-section-contents.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar,
.l-section-contents.p-mindmap-panel.is-active .p-mindmap-bar,
.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar,
.p-mindmap-panel.is-active .p-mindmap-bar {
	background-color: #1a1a1a;
}

.l-section-contents.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .name,
.l-section-contents.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .sub,
.l-section-contents.p-mindmap-panel.is-active .p-mindmap-bar .name,
.l-section-contents.p-mindmap-panel.is-active .p-mindmap-bar .sub,
.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .name,
.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .sub,
.p-mindmap-panel.is-active .p-mindmap-bar .name,
.p-mindmap-panel.is-active .p-mindmap-bar .sub {
	color: #fff;
}

.l-section-contents.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .ico,
.l-section-contents.p-mindmap-panel.is-active .p-mindmap-bar .ico,
.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .ico,
.p-mindmap-panel.is-active .p-mindmap-bar .ico {
	border: 1px solid #fff;
	background-color: transparent;
}

.l-section-contents.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .ico::before,
.l-section-contents.p-mindmap-panel.is-active .p-mindmap-bar .ico::before,
.p-mindmap-panel.is-active .l-section-contents.p-mindmap-bar .ico::before,
.p-mindmap-panel.is-active .p-mindmap-bar .ico::before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.l-section-contents.p-mindmap-body,
.p-mindmap-body {
	display: none;
	padding: 2.4rem 1.6rem 2.4rem;
}

.l-section-contents.p-mindmap-chips,
.p-mindmap-chips {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1.6rem;
	gap: 0.8rem;
}

.l-section-contents.p-mindmap-chip,
.p-mindmap-chip {
	cursor: pointer;
	padding: 0.7rem 1.5rem;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
}

.l-section-contents.p-mindmap-chip.is-active,
.p-mindmap-chip.is-active {
	border-color: #1a1a1a;
	background-color: #1a1a1a;
	color: #fff;
	font-weight: 600;
}

.l-section-contents.p-mindmap-list,
.p-mindmap-list {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.l-section-contents.p-mindmap-item,
.p-mindmap-item {
	padding: 1.2rem 1.4rem 1rem;
	border: 1px solid #9ca3af;
	border-radius: 0.8rem;
	background-color: #fff;
	transition: padding 0.1s ease;
}

.l-section-contents.p-mindmap-item.is-active .p-mindmap-item-body,
.p-mindmap-item.is-active .p-mindmap-item-body {
	grid-template-rows: 1fr;
}

.l-section-contents.p-mindmap-item.is-active .p-mindmap-item-bar .ico::after,
.p-mindmap-item.is-active .p-mindmap-item-bar .ico::after {
	opacity: 0;
}

.l-section-contents.p-mindmap-item-bar,
.p-mindmap-item-bar {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border: 0;
	background-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	gap: 1rem;
}

.l-section-contents.p-mindmap-item-bar .title,
.p-mindmap-item-bar .title {
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
}

.l-section-contents.p-mindmap-item-bar .ico,
.p-mindmap-item-bar .ico {
	position: relative;
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid #9ca3af;
	border-radius: 999px;
}

.l-section-contents.p-mindmap-item-bar .ico::before,
.l-section-contents.p-mindmap-item-bar .ico::after,
.p-mindmap-item-bar .ico::before,
.p-mindmap-item-bar .ico::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #9ca3af;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.l-section-contents.p-mindmap-item-bar .ico::before,
.p-mindmap-item-bar .ico::before {
	width: 1.2rem;
	height: 2px;
}

.l-section-contents.p-mindmap-item-bar .ico::after,
.p-mindmap-item-bar .ico::after {
	width: 2px;
	height: 1.2rem;
	transition: opacity 0.3s ease;
}

.l-section-contents.p-mindmap-item-body,
.p-mindmap-item-body {
	display: grid;
	transition: grid-template-rows 0.3s ease;
	transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease;
	grid-template-rows: 0fr;
}

.l-section-contents.p-mindmap-item-inner,
.p-mindmap-item-inner {
	overflow: hidden;
	min-height: 0;
}

.l-section-contents.p-mindmap-item-inner *:last-child,
.p-mindmap-item-inner *:last-child {
	margin-bottom: 0;
}

.l-section-contents.p-mindmap .flow,
.p-mindmap .flow {
	display: flex;
	flex-direction: column;
	margin-top: 1.1rem;
	gap: 1.8rem;
}

.l-section-contents.p-mindmap .flow .box,
.p-mindmap .flow .box {
	display: flex;
	position: relative;
	flex-direction: column;
	padding: 1.2rem 1.4rem 1rem;
	gap: 1.2rem;
}

.l-section-contents.p-mindmap .flow .box::after,
.p-mindmap .flow .box::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: -2rem;
	width: 2.5rem;
	height: 3rem;
	background-color: #f5f5f7;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.l-section-contents.p-mindmap .flow .box .label,
.p-mindmap .flow .box .label {
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-section-contents.p-mindmap .flow .box p,
.p-mindmap .flow .box p {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: justify;
}

.l-section-contents.p-mindmap .flow .box.cl-problem,
.p-mindmap .flow .box.cl-problem {
	border-left: 2px solid #9ca3af;
	background-color: #f5f5f7;
}

.l-section-contents.p-mindmap .flow .box.cl-solution,
.p-mindmap .flow .box.cl-solution {
	border-left: 2px solid #176f94;
	background-color: #ecf6f9;
}

.l-section-contents.p-mindmap .related,
.p-mindmap .related {
	display: none;
	margin-top: 1rem;
}

.l-section-contents.p-mindmap .related .label,
.p-mindmap .related .label {
	color: #5c5c66;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-section-contents.p-mindmap .related a,
.p-mindmap .related a {
	color: #176f94;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* -----------------------------------------------------
 * parts: 単体動画（記事内のアーカイブ動画等）
 * サムネの上に YouTubePlayer が iframe を差し込む（画面内で自動再生／画面外で一時停止）。
 * 再生アイコン＝共通 .c-play。JS無効時はサムネのみ表示される。
 * -------------------------------------------------- */

.p-content + .p-movie {
	margin-top: 3.2rem;
}

.p-movie-thumb {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	background-color: #e4e5ea;
	aspect-ratio: 16/9;
}

.p-movie-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-movie-iframe {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 0;
	inset: 0;
}

.p-movie-ended {
	font-weight: 700;
}

/* -----------------------------------------------------
 * parts: MV（下層ページ共通の見出し帯）
 * 英字ラベル＋斜線／和文見出し（＝ページh1）＋リード。全下層ページで使い回す（_partial/_mv.njk）。
 * モバイルファースト：base=SP（縦積み・左寄せ）→ mq(ovsp) でPC（240px帯・見出し左/リード右・上下中央）。
 * 値＝Figma実測（無料集客ウェビナー一覧 SP/PC の同一MVコンポーネント）。
 * 左右コンテナ＝ヘッダー/パンくずと同じ基準（$content-max-width）。
 * -------------------------------------------------- */

.p-mv {
	background-color: #fff;
}

.p-mv-inner {
	width: 100%;
	max-width: 132.8rem;
	padding: 1.8rem 1.6rem 0;
	margin-inline: auto;
}

.p-mv-head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.p-mv-head .label {
	display: flex;
	align-items: center;
	margin: 0;
	gap: 0.8rem;
}

.p-mv-head .en {
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.1rem;
}

.p-mv-head .slash {
	position: relative;
	flex-shrink: 0;
	width: 2rem;
	height: 2.4rem;
}

.p-mv-head .slash::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 100%;
	background-color: #9ca3af;
	-webkit-transform: translate(-50%, -50%) rotate(40deg);
	transform: translate(-50%, -50%) rotate(40deg);
}

.p-mv-head .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.2rem;
}

.p-mv-lead {
	margin-top: 2.4rem;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

/* -----------------------------------------------------
 * MV：ダーク背景＋写真バリアント（採用トップ等）
 * 背景写真をダークに敷き、見出し／リードを白文字で重ねる。PCは帯高400px。
 * -------------------------------------------------- */

/* -----------------------------------------------------
 * MV：白背景＋リード＋右ビジュアル（フェードスライダー）バリアント（サービス詳細等）
 * base=SP縦積み（ラベル→h1→リード→ビジュアル全幅）→ mq(ovsp) で見出し/リード左・ビジュアル右の横並び。
 * 見出し帯のリードは .p-mv-head 内（h1の下）に置く＝is-photo/無印（右寄せリード）と DOM が別。
 * ビジュアル＝トップKVと同じ js-slide-fade（Swiper・effect:fade）。インジケータは KV と同型の横バー。
 * -------------------------------------------------- */

.p-mv.is-illust {
	margin-top: 0;
}

.p-mv.is-illust .p-mv-head {
	gap: 0.6rem;
}

.p-mv.is-illust .p-mv-lead {
	margin-top: 1.6rem;
	line-height: 1.7;
}

.p-mv.is-illust .p-mv-visual {
	margin: 3.2rem 0 0;
}

.p-mv.is-illust .p-mv-visual-slider {
	overflow: hidden;
	border-radius: 1.6rem;
}

.p-mv.is-illust .p-mv-visual-img {
	margin: 0;
}

.p-mv.is-illust .p-mv-visual-img img {
	display: block;
	width: 100%;
	aspect-ratio: 600/371;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-mv.is-illust .p-mv-indicator {
	display: flex;
	position: static;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 3px;
	margin-top: 2.4rem;
	gap: 0.8rem;
}

.p-mv.is-illust .p-mv-indicator .swiper-pagination-bullet {
	cursor: pointer;
	display: block;
	width: 4rem;
	height: 2px;
	margin: 0;
	border-radius: 999px;
	background-color: #d1d5db;
	opacity: 1;
	transition: background-color 0.3s ease, height 0.3s ease;
}

.p-mv.is-illust .p-mv-indicator .swiper-pagination-bullet-active {
	height: 3px;
	background-color: #176f94;
}

.p-mv.is-photo {
	position: relative;
	overflow: hidden;
	margin-top: 1rem;
	background-color: #1a1a1a;
}

.p-mv.is-photo .p-mv-bg {
	position: absolute;
	opacity: 0.7;
	inset: 0;
}

.p-mv.is-photo .p-mv-bg img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-mv.is-photo .p-mv-inner {
	position: relative;
	min-height: 26.5rem;
	padding-top: 2.4rem;
	padding-bottom: 2.4rem;
}

.p-mv.is-photo .p-mv-head .en {
	color: #fff;
}

.p-mv.is-photo .p-mv-head .slash::before {
	background-color: #fff;
}

.p-mv.is-photo .p-mv-head .title {
	color: #fff;
}

.p-mv.is-photo .p-mv-lead {
	color: #fff;
}

/* -----------------------------------------------------
 * parts: お知らせ1件（master_news）
 * MTG仕様：1件のみ・枠固定・上揃え・本文は2行で省略。
 * PC＝横1行（80px・日付/タグ｜本文｜矢印・上揃え）／SP＝縦2段（112px・日付タグ→本文＋矢印・下揃え）。
 * リンクは本文＋矢印のみ（日付/タグ・枠はリンクにしない）。日付/タグ/本文はMT出力想定。
 * -------------------------------------------------- */

.p-news {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	height: 11.2rem;
	padding: 1.6rem;
	border: 1px solid #d1d5db;
	border-radius: 0.8rem;
	gap: 0.8rem;
}

.p-news .meta {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 1.6rem;
}

.p-news .date {
	flex-shrink: 0;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

.p-news .tag {
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	min-width: 10rem;
	height: 2.4rem;
	padding: 0.4rem 1.6rem;
	border: 1px solid #9ca3af;
	border-radius: 0.4rem;
	background-color: #fff;
	color: #5c5c66;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-news .link {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	min-width: 0;
	gap: 1.6rem;
}

.p-news .title {
	display: -webkit-box;
	overflow: hidden;
	flex: 1 1 0;
	min-width: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: justify;
	letter-spacing: -0.07em;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.p-news .c-btn-icon {
	flex-shrink: 0;
}

/* -----------------------------------------------------
 * parts: お知らせ（TOP・News）／お知らせ一覧
 * ・.p-newslist＝TOPのお知らせ節（PC＝左列[見出し＋ボタン]／右にニュース行リスト・SP縦積み）。
 * ・.p-newslist-item＝ニュース1行（master_news）＝日付＋バッジ＋タイトル＋丸矢印。行全体リンク。
 *   TOP節・お知らせ一覧の両方で使い回す共通の行（独立クラス）。
 * ・.p-newslist-archive＝一覧ページの行リスト容器（フィルタ下に行を縦に並べる）。
 * 見出し＝c-heading.sz-sm、ボタン＝c-btn-more、バッジ＝c-badge.cl-line、丸矢印＝c-btn-icon を流用。
 * -------------------------------------------------- */

/* ===== TOP：お知らせ節（2カラム） ===== */

.p-newslist {
	margin-top: 8rem;
  /* ボタン（SP=最下部・右寄せ / PC=左列・見出し下） */
  /* 行リスト容器（TOP） */;
}

.p-newslist-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-newslist-action {
	display: flex;
	justify-content: flex-end;
	margin-top: 2.4rem;
}

.p-newslist-items {
	margin-top: 2.4rem;
}

/* ===== 一覧ページ：行リスト容器（フィルタ下） ===== */

/* 行リストはコンテンツ全幅ではなく最大104rem（1040）で中央寄せ＝デザインの左右80pxインセット。
   フィルタ・ページネーションは全幅（コンテンツ1200）のまま。 */

.p-newslist-archive {
	max-width: 104rem;
	margin-top: 3.2rem;
	margin-inline: auto;
}

/* ===== ニュース1行（共通・master_news）。TOP/一覧で使い回す ===== */

.p-newslist-item {
	display: flex;
	align-items: flex-end;
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid #d1d5db;
	color: #1a1a1a;
	gap: 1.6rem;
}

.p-newslist-item:first-child {
	padding-top: 0;
}

.p-newslist-item-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	gap: 0.8rem;
}

.p-newslist-item-data {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 1.6rem;
}

.p-newslist-item-data .date {
	position: relative;
	flex-shrink: 0;
	width: 7.8rem;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.125;
}

.p-newslist-item-data .c-badge {
	width: 10rem;
}

.p-newslist-item-title {
	min-width: 0;
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: justify;
}

.p-newslist-item .c-btn-icon {
	flex-shrink: 0;
}

/* -----------------------------------------------------
 * parts: PDCA詳細アコーディオン（導入フロー §C・grid型開閉）
 * 開閉は grid-template-rows 0fr→1fr（js-ac）。間隔は js-ac-content 直下(&-inner)ではなく孫要素へ。
 * 設計：.claude/docs/forcle_design/coding/25_service_flow.md §8-2
 * -------------------------------------------------- */

.p-pdca {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.p-pdca-item {
	overflow: clip;
	border: 1px solid #1a1a1a;
	border-radius: 0.8rem;
}

.p-pdca-bar {
	cursor: pointer;
	display: grid;
	align-items: center;
	width: 100%;
	padding: 1.3rem 1.6rem;
	border: 0;
	background-color: #fff;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: 'q      title  title' 'period period ico';
	gap: 0.8rem 1.4rem;
}

.p-pdca-bar .q {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 6.4rem;
	padding: 0.8rem;
	border-radius: 0.4rem;
	background-color: #1a1a1a;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1rem;
	grid-area: q;
}

.p-pdca-bar .title {
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	grid-area: title;
}

.p-pdca-bar .period {
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.125;
	grid-area: period;
	justify-self: end;
}

.p-pdca-bar .ico {
	position: relative;
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid #9ca3af;
	border-radius: 999px;
	grid-area: ico;
}

.p-pdca-bar .ico::before {
	content: '';
	position: absolute;
	background: no-repeat 50% 50%/1.6rem;
	background-image: url(../img/ico_arrow_down.png);
	transition: -webkit-transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	inset: 0;
	-webkit-filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
	filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
}

.p-pdca-item.is-active .p-pdca-bar .ico::before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.p-pdca-body {
	display: grid;
	transition: grid-template-rows 0.3s ease;
	transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease;
	grid-template-rows: 0fr;
}

.p-pdca-item.is-active .p-pdca-body {
	grid-template-rows: 1fr;
}

.p-pdca-inner {
	overflow: hidden;
	min-height: 0;
}

.p-pdca-goal {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.6rem;
	border-top: 1px solid #d1d5db;
	border-bottom: 1px solid #d1d5db;
	background-color: #f5f5f7;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	gap: 0.8rem;
}

.p-pdca-goal .label {
	font-weight: 600;
}

.p-pdca-cell {
	display: flex;
	align-items: center;
	padding: 1.6rem;
	border-bottom: 1px solid #d1d5db;
	gap: 1.2rem;
}

.p-pdca-cell.is-full {
	background-color: #fff;
}

.p-pdca-cell .label {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	width: 12rem;
	min-height: 4.2rem;
	padding: 0.8rem 1.2rem;
	border-radius: 0.4rem;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.125;
}

.p-pdca-cell .label.cl-blue-light {
	background-color: #ecf6f9;
	color: #3fa1c6;
}

.p-pdca-cell .label.cl-green {
	background-color: #e5f2e5;
	color: #008000;
}

.p-pdca-cell .label.cl-check {
	background-color: #fdf5e8;
	color: #e8971e;
}

.p-pdca-cell .label.cl-action {
	background-color: #fde8e9;
	color: #e81e21;
}

.p-pdca-cell .label.cl-blue-dark {
	background-color: #e5edf1;
	color: #004b6f;
}

.p-pdca-cell p {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: 企業理念（企業情報ページ §Philosophy）
 * 3項目。番号＋斜線＋英見出し＋和サブ＋本文。PC＝左ラベル/右本文の2カラム、SP縦積み。
 * 設計：.claude/docs/forcle_design/coding/27_company.md §5-2
 * -------------------------------------------------- */

.p-philosophy {
	display: flex;
	flex-direction: column;
	margin-top: 3.2rem;
	gap: 3.4rem;
}

.p-philosophy-item {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.p-philosophy-item .head {
	display: flex;
	flex-direction: column;
}

.p-philosophy-item .num {
	display: flex;
	align-items: center;
	margin: 0;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.1rem;
	gap: 0.8rem;
}

.p-philosophy-item .num::after {
	content: '';
	width: 1px;
	height: 2.5rem;
	margin-left: 0.8rem;
	background-color: #9ca3af;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg);
}

.p-philosophy-item .en {
	margin: 0;
	color: #1a1a1a;
	font-family: 'Montserrat', sans-serif;
	font-size: 3.2rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.1rem;
}

.p-philosophy-item .sub {
	margin: 0;
	color: #004b6f;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-philosophy-item .desc {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: pickup（記事下「ピックアップノウハウ」）
 * 見出し＝共通の c-heading-center（英字上/和文下・中央）＋記事カードのループスライダー（Splide / js-slide-pickup）。
 * SP＝中央1枚＋両隣ちら見、PC＝左寄せ複数枚。アロー＋インジケータ（バー）。
 * アロー/インジケータの見た目は TOP事例バナー（_p-case.scss）と共通の slide-arrow / pagination を流用。
 * -------------------------------------------------- */

.p-pickup {
	overflow-x: clip;
  /* ピックアップ事例カード（600幅）はリスト用card_caseより大：画像角丸16・タイトルH4 24px・ロゴ枠240×75 */;
}

.p-pickup-inner {
	width: 100%;
	max-width: 124.8rem;
	padding-right: 2.4rem;
	padding-left: 2.4rem;
	margin-inline: auto;
}

.p-pickup-slider {
	position: relative;
	margin-top: 2.4rem;
}

.p-pickup-slider .splide__track {
	overflow: visible;
}

.p-pickup-slider .banner {
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 600/375;
}

.p-pickup-slider .banner img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-pickup-slider .splide__arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.4rem;
	height: 4.4rem;
	margin: 0;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1;
}

.p-pickup-slider .splide__arrow svg {
	display: none;
}

.p-pickup-slider .splide__arrow::before {
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	background: no-repeat 50% 50%/contain;
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.p-pickup-slider .splide__arrow--prev::before {
	background-image: url(../img/ico_arrow_left.png);
}

.p-pickup-slider .splide__arrow--next::before {
	background-image: url(../img/ico_arrow_right.png);
}

.p-pickup-slider .splide__arrow {
	position: absolute;
	z-index: 2;
	top: 9.2rem;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.p-pickup-slider .splide__arrow--prev {
	left: 50%;
	margin-left: -16.95rem;
}

.p-pickup-slider .splide__arrow--next {
	right: 50%;
	margin-right: -16.95rem;
}

.p-pickup-slider .splide__pagination {
	display: flex;
	position: static;
	justify-content: center;
	margin: 2.4rem 0 0;
	padding: 0;
	gap: 0.8rem;
}

.p-pickup-slider .splide__pagination li {
	line-height: 0;
}

.p-pickup-slider .splide__pagination__page {
	width: 4rem;
	height: 2px;
	margin: 0;
	border-radius: 999px;
	background-color: #d1d5db;
	opacity: 1;
}

.p-pickup-slider .splide__pagination__page.is-active {
	height: 3px;
	background-color: #176f94;
}

.p-pickup .c-card-case .thumb {
	border-radius: 1.6rem;
  /* 凹みカーブ・バッジ拡大はPCのみ（SPは基底の180×48・0.8rem） */;
}

.p-pickup .c-card-case .thumb .logo {
	display: flex;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 0;
	background-color: #fff;
}

.p-pickup .c-card-case .thumb .logo img {
	display: block;
	max-height: 3.8rem;
}

.p-pickup .c-card-case .meta {
	margin-top: 1.6rem;
}

.p-pickup .c-card-case .title {
	margin-top: 1.2rem;
	font-size: 2.4rem;
	line-height: 1.5;
}

.p-pickup .c-card-case .tags {
	margin-top: 1.2rem;
}

/* -----------------------------------------------------
 * parts: FORCLEの強み（/about/strengths/）の強みブロック群
 * 3ブロック（信頼と実績／スピードと技術／外部データ活用）。
 * 各ブロック＝小見出し（ラベル＋大見出し）＋ Point カード（交互2カラム）。
 * 設計：.claude/docs/forcle_design/coding/26_strengths.md
 * -------------------------------------------------- */

.p-points {
  /* ===== 小見出し（ラベル＋大見出し） ===== */
  /* ===== Point カード群 ===== */;
}

.p-mv + .l-section:has(.p-points) {
	margin-top: 5.6rem;
}

.p-points-block + .p-points-block {
	margin-top: 8rem;
}

.p-points-head {
	padding-bottom: 2.4rem;
	border-bottom: 1px solid #d1d5db;
}

.p-points-head .label {
	display: flex;
	align-items: center;
	margin: 0;
	color: #5c5c66;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	gap: 1.6rem;
}

.p-points-head .label .bar {
	flex-shrink: 0;
	width: 3.2rem;
	height: 2px;
	border-radius: 999px;
	background-color: #5c5c66;
}

.p-points-head .heading {
	margin-top: 0.8rem;
	color: #1a1a1a;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-points-list {
	margin-top: 3.2rem;
}

.p-points-card {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

.p-points-card + .p-points-card {
	margin-top: 4rem;
}

.p-points-card .body {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

.p-points-card .head {
	display: flex;
	flex-direction: column;
	padding-bottom: 2.4rem;
	border-bottom: 1px solid #d1d5db;
	gap: 1.2rem;
}

.p-points-card .num {
	display: flex;
	align-items: center;
	margin: 0;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.1rem;
	gap: 0.8rem;
}

.p-points-card .num::after {
	content: '';
	width: 1px;
	height: 2.5rem;
	margin-left: 0.8rem;
	background-color: #9ca3af;
	-webkit-transform: rotate(40deg);
	transform: rotate(40deg);
}

.p-points-card .title {
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-points-card .desc {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: justify;
}

.p-points-card .c-btn-arrow {
	justify-content: flex-end;
	width: 100%;
}

.p-points-card .img {
	overflow: hidden;
	flex-shrink: 0;
	width: 100%;
	border-radius: 0.8rem;
	aspect-ratio: 560/346;
}

.p-points-card .img img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* -----------------------------------------------------
 * parts: 事例（サービス詳細・§Works）
 * 見出し「事例 / Works」（和文＋斜線＋英ラベル横並び）＋事例カード3枚（c-card-case 流用）。
 * カード群＝SP=Splideスワイプ（次カードちら見＋アロー）/ PC≥768=destroyして3列グリッド（SlidePrecedent＝SlidePoints同方式）。
 * -------------------------------------------------- */

.p-precedent-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	margin: 0;
	gap: 0.2rem 0.4rem;
}

.p-precedent-heading .ja {
	width: 100%;
	color: #1a1a1a;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.2rem;
}

.p-precedent-heading .slash {
	position: relative;
	flex-shrink: 0;
	width: 2rem;
	height: 2.4rem;
}

.p-precedent-heading .slash::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 100%;
	background-color: #9ca3af;
	-webkit-transform: translate(-50%, -50%) rotate(40deg);
	transform: translate(-50%, -50%) rotate(40deg);
}

.p-precedent-heading .en {
	position: relative;
	top: 0.3rem;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.1rem;
}

.p-precedent-cards {
	margin-top: 3.2rem;
	margin-right: -1.6rem;
	margin-left: -1.6rem;
}

.p-precedent-cards .splide__arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.4rem;
	height: 4.4rem;
	margin: 0;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1;
}

.p-precedent-cards .splide__arrow svg {
	display: none;
}

.p-precedent-cards .splide__arrow::before {
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	background: no-repeat 50% 50%/contain;
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.p-precedent-cards .splide__arrow--prev::before {
	background-image: url(../img/ico_arrow_left.png);
}

.p-precedent-cards .splide__arrow--next::before {
	background-image: url(../img/ico_arrow_right.png);
}

.p-precedent-cards .splide__arrow {
	position: absolute;
	z-index: 2;
	top: 6.9rem;
}

.p-precedent-cards .splide__arrow:disabled {
	opacity: 0.3;
}

.p-precedent-cards .splide__arrow--prev {
	left: 50%;
	margin-left: -16.95rem;
}

.p-precedent-cards .splide__arrow--next {
	right: 50%;
	margin-right: -16.95rem;
}

/* -----------------------------------------------------
 * parts: 採用ページ左端の追従SNS（PCのみ常時表示・SP非表示）
 * 左ビューポート端に貼り付くダークタブ：縦「Follow US !!」＋Instagram＋TikTok（白mono流用）。
 * 設計：Figma 採用情報_PC（node 1654:20376）
 * -------------------------------------------------- */

.p-recruit-follow {
	display: none;
}

.p-recruit-follow .label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.8rem;
	height: 9.6rem;
}

.p-recruit-follow .label > span {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	white-space: nowrap;
	letter-spacing: 0.075rem;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.p-recruit-follow a {
	display: block;
	width: 3.2rem;
	height: 3.2rem;
	transition: opacity 0.2s ease;
}

.p-recruit-follow img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

/* -----------------------------------------------------
 * parts: recruit-tab（募集中の職種：PC=タブ切替／SP=アコーディオン）
 * 単一マークアップで両対応。区分パネルは js-switcher-target かつ js-ac。
 * - base=SP：各区分が開閉行（.head＝js-ac-trigger）。Switcherのinline display:none を
 *   override（!important）し、Accordion が中身の開閉を担う。
 * - mq(ovsp)：上部タブ行（.p-recruit-tab-head）でSwitcherが切替。中身は常時展開。
 * 設計：.claude/docs/forcle_design/coding/22_recruit_top.md §B
 * -------------------------------------------------- */

.p-recruit-tab {
  /* ===== タブ行（PCのみ） ===== */
  /* ===== 区分パネル ===== */
  /* ===== 区分行ヘッダー（SPのみ・アコーディオントリガ） ===== */
  /* ===== パネル中身（カードグリッド） ===== */;
}

.p-mv + .l-section .p-recruit-tab {
	margin-top: 3.5rem;
}

.p-recruit-tab-head ul {
	display: flex;
	align-items: flex-end;
	border-bottom: 2px solid #1a1a1a;
	gap: 0.8rem;
}

.p-recruit-tab-head li {
	flex: 1;
}

.p-recruit-tab-head a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.2rem 1.6rem 0.8rem;
	border: 2px solid #d1d5db;
	border-bottom: 0;
	border-radius: 0.8rem 0.8rem 0 0;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.p-recruit-tab-head li.is-active a {
	position: relative;
	bottom: -2px;
	padding-top: 1.6rem;
	padding-bottom: 1.4rem;
	border-color: #1a1a1a;
	background-color: #1a1a1a;
	color: #fff;
}

.p-recruit-tab-panel {
	border: 1px solid #1a1a1a;
	border-radius: 0 0 0.8rem 0.8rem;
}

.p-recruit-tab-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1.5rem 1.6rem;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	gap: 1.6rem;
}

.p-recruit-tab-bar .ico {
	position: relative;
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid #9ca3af;
	border-radius: 999px;
}

.p-recruit-tab-bar .ico::before {
	content: '';
	position: absolute;
	background: no-repeat 50% 50%/1.8rem;
	background-image: url(../img/ico_arrow_down.png);
	inset: 0;
}

.is-active .p-recruit-tab-bar {
	background-color: #1a1a1a;
	color: #fff;
}

.is-active .p-recruit-tab-bar .ico {
	border-color: #fff;
}

.is-active .p-recruit-tab-bar .ico::before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.p-recruit-tab-body {
	display: none;
}

.p-recruit-tab-panel.is-active .p-recruit-tab-body {
	display: block;
}

.p-recruit-tab-cards {
	display: grid;
	padding: 2.4rem 1.6rem;
	grid-template-columns: 1fr;
	gap: 2.6rem;
}

/* -----------------------------------------------------
 * parts: 参考リンク枠（記事本文内・薄グレー小枠＋「参考：」ラベル＋外部リンク）
 * MT本文（p-wysiwyg）の段落に付与クラスで成立させる（素タグ prose と別扱い）。
 * リンク末尾に外部リンクアイコン（ico_open＋ブランド青filter）。
 * -------------------------------------------------- */

.p-reflink {
	display: flex;
	align-items: baseline;
	margin-top: 1.6rem;
	padding: 1.2rem 1.6rem;
	border-radius: 0.4rem;
	background-color: #f5f5f7;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5714285714;
	gap: 0.8rem;
}

.p-reflink .ref {
	flex-shrink: 0;
	color: #5c5c66;
}

.p-reflink a {
	color: #176f94;
	text-decoration: underline;
	word-break: break-all;
	text-underline-offset: 0.2em;
}

.p-reflink .ico {
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	margin-left: 0.4rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_open.png);
	vertical-align: -0.1em;
	-webkit-filter: invert(25%) sepia(38%) saturate(3555%) hue-rotate(175deg) brightness(100%) contrast(82%);
	filter: invert(25%) sepia(38%) saturate(3555%) hue-rotate(175deg) brightness(100%) contrast(82%);
}

/* -----------------------------------------------------
 * parts: 絞り込み検索テーブル（セミナー一覧/事例一覧で共通）。
 * 上部横長テーブル型のフィルタUI。Phase1＝静的表示（機能オフ）。
 * 寸法・配色は Figma Table-Outline 実測。
 * -------------------------------------------------- */

.p-search-table {
	overflow: hidden;
	border-radius: 1.6rem;
	background-color: #f5f5f7;
  /* チェックのピル。Phase1は見た目のみ（絞り込みは未配線） */;
}

.p-search-table-head {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 5.6rem;
	margin: 0;
	padding: 0.8rem 1.6rem;
	border: 1px solid #d1d5db;
	background-color: #1a1a1a;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.p-search-table-body {
	display: flex;
	flex-direction: column;
	padding: 0 1.6rem 1.6rem;
	gap: 1.2rem;
}

.p-search-table-row .label {
	display: flex;
	align-items: center;
	min-height: 4.8rem;
	padding: 0.8rem 0;
	background-color: #f5f5f7;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-search-table-row .items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.p-search-table-pill {
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 8rem;
	padding: 0.7rem 1.5rem;
	border: 1px solid #d1d5db;
	border-radius: 999rem;
	background-color: #fff;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	gap: 0.4rem;
}

.p-search-table-pill.is-active {
	border-color: #1a1a1a;
	background-color: #1a1a1a;
	color: #fff;
	font-weight: 600;
}

.p-search-table-keyword {
	width: 100%;
	max-width: 80rem;
	height: 5.6rem;
	padding: 1rem 2.4rem;
	border: 1px solid #9ca3af;
	border-radius: 0.4rem;
	background-color: #fff;
	font-size: 1.6rem;
	line-height: 1.5;
}

.p-search-table-keyword::-webkit-input-placeholder {
	color: #9ca3af;
}

.p-search-table-keyword:-ms-input-placeholder {
	color: #9ca3af;
}

.p-search-table-keyword::-ms-input-placeholder {
	color: #9ca3af;
}

.p-search-table-keyword::placeholder {
	color: #9ca3af;
}

/* -----------------------------------------------------
 * parts: 無料集客ウェビナー（TOP・Webinar）
 * 左の大動画プレビューを右4カードで切替えるタブ式（Switcher.js）。再生アイコン＝選択中動画のYouTubeへ外部遷移。
 * DOM順＝見出し→body→ボタン。PCはGrid（見出し行の右にボタン）、SPは縦積み（ボタン最下部）。
 * 見出し＝c-heading、ボタン＝c-btn、バッジ＝c-badge を流用。
 * -------------------------------------------------- */

.p-seminar {
	margin-top: 8rem;
  /* ===== 下部ボタン（SP=M中央・最下部 / PC=L・見出し行の右） ===== */
  /* ===== 本文（左ステージ＋右リスト） ===== */
  /* ===== 左：選択中プレビュー（Switcherターゲット） ===== */
  /* ===== 右：選択トリガー（カード一覧） ===== */;
}

.p-seminar-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-seminar-action {
	display: flex;
	justify-content: center;
	margin-top: 3.2rem;
}

.p-seminar-action .c-btn {
	width: 24rem;
	padding-right: 1.2rem;
}

.p-seminar-body {
	margin-top: 3.2rem;
}

.p-seminar-stage {
	position: relative;
}

.p-seminar-stage-item:not(:first-child) {
	display: none;
}

.p-seminar-stage-thumb {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 343/212;
}

.p-seminar-stage-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-seminar-stage-iframe {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 0;
	inset: 0;
}

.p-seminar-stage-title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0.8rem 0 0;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	word-wrap: break-word;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.p-seminar-list {
	display: flex;
	flex-direction: column;
	margin-top: 3.2rem;
	gap: 2.2rem;
}

.p-seminar-card {
	display: flex;
	align-items: flex-start;
	gap: 1.6rem;
}

.p-seminar-card .p-seminar-card-thumb img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.p-seminar-card-thumb {
	overflow: hidden;
	flex-shrink: 0;
	width: 15rem;
	border-radius: 0.4rem;
}

.p-seminar-card-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 170/100;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-seminar-card-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	gap: 0.8rem;
}

.p-seminar-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.2rem;
}

.p-seminar-card-meta .date {
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
}

.p-seminar-card-title {
	display: -webkit-box;
	overflow: hidden;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.js-switcher li.is-active .p-seminar-card .p-seminar-card-thumb {
	box-shadow: 0 0 0 2px #176f94;
}

.js-switcher li.is-active .p-seminar-card .p-seminar-card-title {
	color: #176f94;
}

/* -----------------------------------------------------
 * parts: サービス一覧枠（サービス詳細・§FORCLEのサービス一覧）
 * 薄グレー枠（#F5F5F7・角丸）＋見出し＋カテゴリカード縦積み。
 * 内側のカテゴリカード／詳しく見る／サブリンクは p-service の
 * `.p-service-cat`/`-cat-head`/`-links` をそのまま流用（当て方を共通化）。
 * 枠（このファイル）と中身（p-service）を分けることで重複定義を避ける。
 * -------------------------------------------------- */

.p-service-list {
	padding: 3.2rem 1.6rem;
	border-radius: 1.6rem;
	background-color: #f5f5f7;
}

.p-service-list-title {
	position: relative;
	margin: 0 0 2.4rem;
	padding-bottom: 1.6rem;
	border-bottom: 2px solid #d1d5db;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.75;
}

.p-service-list-title::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 6.4rem;
	height: 2px;
	background-color: #176f94;
}

.p-service-list .p-service-cats {
	margin-top: 0;
}

.p-service-list .p-service-cat {
	background-color: #fff;
}

/* -----------------------------------------------------
 * parts: サービス（TOP・Service）
 * 左＝見出し＋リード＋ボタン / 右＝カテゴリカード3枚。
 * DOM順＝見出し→カード→ボタン。PCはGrid（"head cats" / "btn cats"）で左右配置、SPは縦積み。
 * 見出し＝c-heading、ボタン＝c-btn、「詳しく見る」＝c-btn-arrow、サブリンクの丸矢印＝c-btn-icon を流用。
 * -------------------------------------------------- */

.p-service {
	margin-top: 8rem;
  /* ===== カテゴリカード群 ===== */
  /* ===== サブリンク（丸矢印＋テキスト）。SP1列 / PC2列 ===== */
  /* ===== 下部ボタン（SP=M中央 / PC=L左寄せ） ===== */;
}

.p-service-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-service-cats {
	display: flex;
	flex-direction: column;
	margin-top: 3.2rem;
	gap: 1.6rem;
}

.p-service-cat {
	display: flex;
	flex-direction: column;
	padding: 2.4rem 1.6rem;
	border-radius: 0.8rem;
	background-color: #f5f5f7;
	gap: 2.4rem;
}

.p-service-cat-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid #d1d5db;
	gap: 1.2rem 1.6rem;
}

.p-service-cat-head .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-service-cat-head .c-btn-arrow {
	flex-shrink: 0;
	margin-left: auto;
}

.p-service-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
}

.p-service-links a {
	display: flex;
	align-items: center;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	gap: 0.8rem;
}

.p-service-action {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.p-service-action .c-btn {
	width: 24rem;
	padding-right: 1.2rem;
}

/* -----------------------------------------------------
 * parts: サービス一覧（サービストップ §C）
 * カテゴリ(h3・2色アンダーライン) → メイン項目(名称+本文+詳しく見る+イラスト560×346)
 *  → サブカード(c-card-service)×3 を縦に繰り返す。MT.netのループ出力前提（絞り込み無し）。
 * メインのイラストは左右交互（.is-reverse でPC時に左右反転）。
 * メインは1グループに複数入る（サブカードを挟む場合と、続けて並ぶ場合の両方がある）。
 * 見出しレベルはh3カテゴリ／h4メイン・サブ同列＝フラット、視覚サイズ差のみCSSで付ける。
 * 設計：.claude/docs/forcle_design/coding/24_service_top.md §C
 * -------------------------------------------------- */

.l-section .p-services-group + .l-section .p-services-group,
.l-section .p-services-group + .p-services-group,
.p-services-group + .l-section .p-services-group,
.p-services-group + .p-services-group {
	margin-top: 4rem;
}

.l-section .p-services-group > .title,
.p-services-group > .title {
	position: relative;
	margin: 0;
	padding-bottom: 1.6rem;
	border-bottom: 2px solid #d1d5db;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.75;
}

.l-section .p-services-group > .title::after,
.p-services-group > .title::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 8rem;
	height: 2px;
	background-color: #176f94;
}

.l-section .p-services-main,
.p-services-main {
	display: flex;
	flex-direction: column;
	margin-top: 1.8rem;
	gap: 2.4rem;
}

.l-section .p-services-subs + .l-section .p-services-main,
.l-section .p-services-main + .l-section .p-services-main,
.l-section .p-services-subs + .p-services-main,
.l-section .p-services-main + .p-services-main,
.p-services-subs + .l-section .p-services-main,
.p-services-main + .l-section .p-services-main,
.p-services-subs + .p-services-main,
.p-services-main + .p-services-main {
	margin-top: 3.2rem;
}

.l-section .p-services-main-body,
.p-services-main-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
}

.l-section .p-services-main-body .name,
.p-services-main-body .name {
	width: 100%;
	margin: 0;
	color: #1a1a1a;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.l-section .p-services-main-body .desc,
.p-services-main-body .desc {
	width: 100%;
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: justify;
}

.l-section .p-services-main-body .c-btn,
.p-services-main-body .c-btn {
	width: 24rem;
}

.l-section .p-services-main-body .c-btn .ico,
.p-services-main-body .c-btn .ico {
	position: relative;
	right: -1.4rem;
}

.l-section .p-services-main-illust,
.p-services-main-illust {
	overflow: hidden;
	flex-shrink: 0;
	width: 100%;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 560/346;
}

.l-section .p-services-main-illust img,
.p-services-main-illust img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.l-section .p-services-subs,
.p-services-subs {
	display: flex;
	flex-direction: column;
	margin-top: 2.4rem;
	padding-bottom: 3.2rem;
	border-bottom: 1px solid #d1d5db;
	gap: 1.6rem;
}

/* -----------------------------------------------------
 * parts: サイドバー（検索 / カテゴリー一覧 / タグ一覧）。Figma準拠。
 * 記事詳細・一覧ページ（ノウハウ/お知らせ等）で共通利用。
 * -------------------------------------------------- */

.p-sidebar-search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.7rem 0.8rem 0.7rem 1.6rem;
	border: 1px solid #d1d5db;
	border-radius: 0.8rem;
	background-color: #fff;
	transition: box-shadow 0.35s ease-out;
	gap: 0.8rem;
}

.p-sidebar-search:focus-within {
	box-shadow: 0 0 1.2rem 0.2rem rgba(23, 111, 148, 0.45);
}

.p-sidebar-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background-color: transparent;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
}

.p-sidebar-search input:-ms-input-placeholder {
	color: #9ca3af;
}

.p-sidebar-search input:placeholder-shown {
	color: #9ca3af;
}

.p-sidebar-search input::-webkit-input-placeholder {
	color: #9ca3af;
}

.p-sidebar-search input:-moz-placeholder {
	opacity: 1;
	color: #9ca3af;
}

.p-sidebar-search input::-moz-placeholder {
	opacity: 1;
	color: #9ca3af;
}

.p-sidebar-search input:-ms-input-placeholder {
	color: #9ca3af;
}

.p-sidebar-search input:focus-visible {
	outline: none;
}

.p-sidebar-search button {
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border: 0;
	border-radius: 999px;
	background-color: #1a1a1a;
}

.p-sidebar-search button::before {
	content: '';
	width: 2rem;
	height: 2rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_search.png);
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.p-sidebar-box {
	padding: 2.2rem 2.2rem 2rem;
	border: 2px solid #9ca3af;
	border-radius: 0.8rem;
	background-color: #fff;
}

.p-sidebar-title {
	margin: 0;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid #d1d5db;
	color: #176f94;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-sidebar-cats {
	display: flex;
	flex-direction: column;
	margin-top: 2.2rem;
	gap: 0.65rem;
}

.p-sidebar-cats a {
	display: flex;
	align-items: flex-start;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.85;
	gap: 0.8rem;
}

.p-sidebar-cats a::before {
	content: '';
	flex-shrink: 0;
	width: 0.8rem;
	height: 0.8rem;
	margin-top: 1.1rem;
	border-radius: 50%;
	background-color: #9ca3af;
}

.p-sidebar-cats a.is-active {
	color: #176f94;
	font-weight: 600;
}

.p-sidebar-cats a.is-active::before {
	background-color: #176f94;
}

.p-sidebar-tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.4rem;
	gap: 1.2rem 0.8rem;
}

.p-sidebar-tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1.6rem;
	border: 1px solid #9ca3af;
	border-radius: 0.4rem;
	color: #5c5c66;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.p-sidebar-tags a::before {
	content: '#';
	margin-right: 0.2rem;
}

.p-sidebar-tags a.is-active {
	border-color: #176f94;
	background-color: #176f94;
	color: #fff;
}

/* -----------------------------------------------------
 * parts: サイトマップ（MT.netブロックエディタ出力＝p-wysiwyg 素タグ想定）
 * グレー帯h2（＝u-downlevel-2でh2→wy-h4）・子リンクのドット（＝wy ul）は p-wysiwyg 基底を流用。
 * ここは親リンク（h3）だけを上書き：wy-h5の左バー装飾を消し、下線＋右の丸矢印（c-btn-icon相当）にする。
 * 詳細度＝基底 h3:not([class])（クラス3個）に勝つため .p-content 併用でルートを4クラスにする。
 * -------------------------------------------------- */

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap {
  /* 子リンク：ドットは基底流用。weight 600・リンク色/ホバーのみ。上下間隔は16px（基底8px→デザイン16px） */
  /* 親→子の間隔（基底ul margin 1.6rem→デザイン24rem相当2.4rem） */
  /* カラム間はデザイン48px（基底24px） */;
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap h3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 2.4rem 0 0;
	padding: 0 0 1.6rem;
	border-bottom: 1px solid #d1d5db;
	gap: 1.6rem;
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap h3::before {
	content: none;
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap h3::after {
	content: '';
	flex-shrink: 0;
	width: 2.8rem;
	height: 2.8rem;
	border: 1px solid #9ca3af;
	border-radius: 999px;
	background: no-repeat 50% 50%/1.8rem;
	background-image: url(../img/ico_arrow_right.png);
	-webkit-filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
	filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap h3 a {
	min-width: 0;
	color: #1a1a1a;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap ul li {
	font-weight: 600;
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap ul li a {
	color: inherit;
	transition: opacity 0.2s ease;
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap ul li + li {
	margin-top: 1.6rem;
}

.p-content.p-wysiwyg.u-downlevel-2.p-sitemap h3 + ul {
	margin-top: 2.4rem;
}

/* -----------------------------------------------------
 * parts: 悩みを解決（サービス詳細・§こんな悩みを解決します）
 * 薄グレー枠（#F5F5F7・角丸16）。枠は幅1360（親 .l-section-inner.sz-wide）、中身は1040カラムを中央寄せ（デザイン実測）。
 * base=SP縦積み（見出し群→ボタン→チェックリスト全幅）
 * → mq(ovsp) で .p-solve-inner が 左=見出し群＋ボタン（中央寄せ）／ 右=チェックリストの横並び（justify-between）。
 * チェックボックス＝デザイン実体（28px角丸2・ブランド青塗り＋白チェック）を CSS で再現（アセット未受領）。
 * -------------------------------------------------- */

.p-solve {
	padding: 3.2rem 1.6rem;
	border-radius: 1.6rem;
	background-color: #f5f5f7;
}

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

.p-solve-head .sub {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-solve-head .title {
	margin: 0.8rem 0 0;
	color: #1a1a1a;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-solve-head .c-btn {
	width: 24rem;
	margin-top: 1.6rem;
}

.p-solve-list {
	display: flex;
	flex-direction: column;
	margin: 3.2rem 0 0;
	gap: 1.2rem;
}

.p-solve-list li {
	position: relative;
	padding-left: 3rem;
	color: #1a1a1a;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-solve-list li::before {
	content: '';
	position: absolute;
	top: calc(50% - 1.1rem);
	left: 0;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 0.2rem;
	background-color: #176f94;
}

.p-solve-list li::after {
	content: '';
	position: absolute;
	top: calc(50% - 0.9rem);
	left: 0.7rem;
	width: 0.8rem;
	height: 1.4rem;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* -----------------------------------------------------
 * parts: スタッフ実績（サービストップ §E）
 * 上部の数値ブロックは数値・単位・グラフ・凡例を焼き込んだ単一画像（276×180＝@2x支給）。
 * ラベル(h4)・説明(p)はライブテキスト。PC=4カラムグリッド(各276・gap32／行4/4/3)／SP=1カラム縦積み。
 * 設計：.claude/docs/forcle_design/coding/24_service_top.md §E
 * -------------------------------------------------- */

.l-section-contents.p-stats,
.p-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem;
}

.l-section-contents.p-stats-note,
.p-stats-note {
	margin: 0.8rem 0 0;
	color: #1a1a1a;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: right;
}

.l-section-contents.p-stats-item,
.p-stats-item {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.l-section-contents.p-stats-item .img,
.p-stats-item .img {
	margin: 0 auto;
	aspect-ratio: 276/180;
}

.l-section-contents.p-stats-item .img img,
.p-stats-item .img img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.l-section-contents.p-stats-item .label,
.p-stats-item .label {
	margin: 0;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.l-section-contents.p-stats-item .body,
.p-stats-item .body {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.l-section-contents.p-stats-item .desc,
.p-stats-item .desc {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: justify;
}

.l-section-contents.p-stats-item .note,
.p-stats-item .note {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: right;
}

/* -----------------------------------------------------
 * parts: FORCLEの強み（TOP・9 Core Strength）
 * 3パネル。各パネルの画像枠はフェードスライダー（SlideFade）で、コンテンツ列の外側＝画面端へブリード。
 * ブリード角丸：〜1439は端側0/内側1.6rem、1440〜は全角1.6rem（p-kv-tagと同思想）。
 * コンテンツ幅＝1200（max124.8rem＋左右2.4rem）。bleed＝コンテンツ左端〜画面端の距離。
 * -------------------------------------------------- */

.p-strength {
	overflow-x: clip;
	margin-top: 8rem;
  /* ===== セクション見出し（c-heading）。タイトル↔リード間だけ調整 ===== */
  /* ===== パネル ===== */
  /* ===== パネル2：画像スライダー右ブリード ===== */
  /* ===== パネル3：1枚画像で挙動は他と同じ。PCのみサイズ違い（480×320・インセット＝端につかない） ===== */
  /* ===== 下部ボタン（既定M=SP / ovspでL相当へ） ===== */;
}

.p-strength-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-strength .c-heading {
	gap: 2.6rem;
}

.p-strength-list {
	display: flex;
	flex-direction: column;
	margin-top: 3.2rem;
	gap: 4rem;
}

.p-strength-panel {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}

.p-strength-slider {
	overflow: hidden;
	width: 100%;
	border-radius: 0.8rem;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	aspect-ratio: 343/243;
}

.p-strength-slider .swiper-wrapper,
.p-strength-slider .swiper-slide {
	height: 100%;
}

.p-strength-slider figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.p-strength-slider img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-strength-indicator {
	display: flex;
	position: static;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 3px;
	margin-top: 2.4rem;
	gap: 0.8rem;
}

.p-strength-indicator .swiper-pagination-bullet {
	cursor: pointer;
	display: block;
	width: 4rem;
	height: 2px;
	margin: 0;
	border-radius: 999px;
	background-color: #d1d5db;
	opacity: 1;
	transition: background-color 0.3s ease, height 0.3s ease;
}

.p-strength-indicator .swiper-pagination-bullet-active {
	height: 3px;
	background-color: #176f94;
}

.p-strength-bodyhead {
	display: flex;
	flex-direction: column;
	padding-bottom: 2.3rem;
	border-bottom: 1px solid #d1d5db;
	gap: 0.8rem;
}

.p-strength-bodyhead .label {
	display: flex;
	align-items: center;
	margin: 0;
	color: #5c5c66;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	gap: 1.6rem;
}

.p-strength-bodyhead .label::before {
	content: '';
	flex-shrink: 0;
	width: 3.2rem;
	height: 2px;
	border-radius: 999px;
	background-color: #5c5c66;
}

.p-strength-bodyhead .heading {
	margin: 0;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

.p-strength-points {
	display: flex;
	flex-direction: column;
	margin-top: 2.3rem;
}

.p-strength-points .splide__track {
	overflow: visible;
	order: 0;
}

.p-strength-points .splide__arrows {
	display: flex;
	justify-content: flex-end;
	order: 1;
	margin-top: 1.6rem;
	gap: 1.2rem;
}

.p-strength-points .splide__arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.4rem;
	height: 4.4rem;
	margin: 0;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background-color: #fff;
	opacity: 1;
}

.p-strength-points .splide__arrow svg {
	display: none;
}

.p-strength-points .splide__arrow::before {
	content: '';
	width: 2.4rem;
	height: 2.4rem;
	background: no-repeat 50% 50%/contain;
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

.p-strength-points .splide__arrow--prev::before {
	background-image: url(../img/ico_arrow_left.png);
}

.p-strength-points .splide__arrow--next::before {
	background-image: url(../img/ico_arrow_right.png);
}

.p-strength-points .splide__arrow {
	position: static;
	-webkit-transform: none;
	transform: none;
}

.p-strength-points .splide__arrow:disabled {
	opacity: 0.3;
}

.p-strength-points .num {
	display: flex;
	align-items: flex-end;
	margin: 0;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1rem;
	gap: 0.8rem;
}

.p-strength-points .num::after {
	content: '';
	width: 1px;
	height: 1.6rem;
	margin-left: 0.2rem;
	background-color: #9ca3af;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}

.p-strength-points .pt-heading {
	margin: 0.6rem 0 0;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-strength-points .desc {
	margin: 0.7rem 0 0;
	color: #1a1a1a;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7;
	text-align: justify;
}

.p-strength-points .splide__slide {
	padding-right: 2.4rem;
	border-right: 1px solid #d1d5db;
}

.p-strength-action {
	display: flex;
	justify-content: center;
	margin-top: 4rem;
}

.p-strength-action .c-btn {
	width: 24rem;
	padding-right: 1.2rem;
}

/* -----------------------------------------------------
 * parts: tags
 * -------------------------------------------------- */

.p-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px 8px;
}

/* -----------------------------------------------------
 * parts: 導入ツール紹介（FORCLEの強み §外部データ活用・Point.09の下）
 * 3件（SimilarWeb / ATOM / KaCHISUJI）。ロゴ枠＋名称＋キャッチ＋本文。
 * 設計：.claude/docs/forcle_design/coding/26_strengths.md §3-4・§4-4
 * -------------------------------------------------- */

.p-tools {
	margin-top: 3.2rem;
}

.p-tools-item {
	display: flex;
	flex-direction: column;
	padding: 2.4rem 1.6rem;
	border: 1px solid #d1d5db;
	border-radius: 0.8rem;
	background-color: #fff;
	gap: 1.6rem;
}

.p-tools-item + .p-tools-item {
	margin-top: 2.4rem;
}

.p-tools-item .logo {
	flex-shrink: 0;
	width: 100%;
	height: 19.8rem;
	border-radius: 0.8rem;
}

.p-tools-item .logo img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.p-tools-item .body {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.p-tools-item .name {
	padding-bottom: 1rem;
	border-bottom: 1px solid #d1d5db;
	color: #1a1a1a;
	font-family: 'Montserrat', sans-serif;
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1rem;
}

.p-tools-item .text {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.p-tools-item .catch {
	margin: 0;
	color: #004b6f;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.p-tools-item .desc {
	margin: 0;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: wysiwyg（MT.net ブロックエディタ本文）
 * MTの本文ラッパ規約 `wysiwyg` に対応。テキストブロックは素のセマンティックタグ
 * （h2-h6/p/ul/ol/blockquote/pre/table、クラス無し）で出力されるため、
 * 素タグ＋`:not([class])` で当てる。クラスが付くのは特殊ブロックのみ
 * （マルチカラム `.mt-be-columns`/`.mt-be-column`、画像 `img.asset-image`/`figure.mt-figure`）。
 * 設計：.claude/docs/forcle_design/coding/13_knowhow_detail.md §3
 * 見出しは wy-hN ミックスインで定義し、u-downlevel / u-downlevel-2 で見た目を1〜2段
 * 下げて再利用する（HTMLの見出しレベル＝意味は据え置き。coding/28_privacy.md §4）。
 * -------------------------------------------------- */

.p-wysiwyg {
  /* 本文の先頭ブロックは詰める（アイキャッチ等は .p-wysiwyg の外＝l-article 側で間隔を取る）。
     見出しルール（.p-wysiwyg h2:not([class]) 等）に詳細度で勝つよう .p-content と併用で指定 */
  /* ===== 見出し（通常はそのまま／u-downlevel・u-downlevel-2 で見た目を1〜2段下げる） ===== */
  /* ===== 本文 ===== */
  /* ===== リンク ===== */
  /* ===== ul（丸ドット）。ネスト（サブ）はダッシュ ===== */
  /* ===== ol（Montserrat番号・ブルー）。ネストは番号リセット＋字下げ ===== */
  /* ===== 画像（MT画像ブロック：img.asset-image / figure.mt-figure） ===== */
  /* ===== 引用 ===== */
  /* ===== インラインコード ===== */
  /* ===== 整形済み（コード等） ===== */
  /* ===== テーブル ===== */
  /* =====================================================
   * マルチカラム（カラム分け）ブロック
   * MT出力＝`<div class="mt-be-columns" style="display:flex">` のみ（gap/列幅/レスポンシブ無し）。
   * 等幅・列間・SP縦積みはここで供給する。列数2〜4を flex:1 で均等吸収。
   * ================================================== */
  /* =====================================================
   * メディア＋テキスト（MTカスタムブロック）
   * 画像列＋テキスト列の段組。MTは flex だけ吐く前提で、比率・左右反転・SP縦積みをCSSで供給する。
   * 列順は DOM=「画像→テキスト」固定。is-reverse は flex の視覚順だけ入れ替える（マークアップは触らない）。
   * SPは縦積みで、画像はテキストの下（order で列順だけを入れ替える）。
   * テキスト列の先頭は見出し(h3)＝画像と上端を揃える（align-items:flex-start）。
   * 比率（画像:テキスト）：既定50:50／sz-46=40:60／sz-64=60:40。
   * ================================================== */
  /* 図版プレースホルダ（アセット未受領）＝薄グレー地＋画像枠アイコン。受領後は img.asset-image に差替 */;
}

.p-wysiwyg.p-content > *:first-child {
	margin-top: 0;
}

.p-wysiwyg.p-content > *:last-child {
	margin-bottom: 0;
}

.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h2:not([class]),
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h2[class^=u-],
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h2[class*=' u-'] {
	margin-top: 3.2rem;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3:not([class]),
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class^=u-],
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class*=' u-'] {
	position: relative;
	margin: 3.2rem 0 2.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 2px solid #d1d5db;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3:not([class])::after,
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class^=u-]::after,
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class*=' u-']::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 6.4rem;
	height: 2px;
	background-color: #176f94;
}

.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h4:not([class]),
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h4[class^=u-],
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h4[class*=' u-'] {
	margin-top: 3.2rem;
	padding: 0.8rem 0.4rem 0.8rem 1.4rem;
	border-left: 3px solid #176f94;
	background-color: #f5f5f7;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5:not([class]),
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class^=u-],
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class*=' u-'] {
	position: relative;
	margin-top: 3.2rem;
	padding-left: 1.8rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5:not([class])::before,
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class^=u-]::before,
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class*=' u-']::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.6rem;
	height: 1.6em;
	background: linear-gradient(#176f94, #176f94) left/2px 100% no-repeat, linear-gradient(#176f94, #176f94) right/2px 100% no-repeat;
}

.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h6:not([class]),
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h6[class^=u-],
.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h6[class*=' u-'] {
	margin-top: 3.2rem;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel h2:not([class]),
.p-wysiwyg.u-downlevel h2[class^=u-],
.p-wysiwyg.u-downlevel h2[class*=' u-'] {
	position: relative;
	margin: 3.2rem 0 2.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 2px solid #d1d5db;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel h2:not([class])::after,
.p-wysiwyg.u-downlevel h2[class^=u-]::after,
.p-wysiwyg.u-downlevel h2[class*=' u-']::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 6.4rem;
	height: 2px;
	background-color: #176f94;
}

.p-wysiwyg.u-downlevel h3:not([class]),
.p-wysiwyg.u-downlevel h3[class^=u-],
.p-wysiwyg.u-downlevel h3[class*=' u-'] {
	margin-top: 3.2rem;
	padding: 0.8rem 0.4rem 0.8rem 1.4rem;
	border-left: 3px solid #176f94;
	background-color: #f5f5f7;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel h4:not([class]),
.p-wysiwyg.u-downlevel h4[class^=u-],
.p-wysiwyg.u-downlevel h4[class*=' u-'] {
	position: relative;
	margin-top: 3.2rem;
	padding-left: 1.8rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel h4:not([class])::before,
.p-wysiwyg.u-downlevel h4[class^=u-]::before,
.p-wysiwyg.u-downlevel h4[class*=' u-']::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.6rem;
	height: 1.6em;
	background: linear-gradient(#176f94, #176f94) left/2px 100% no-repeat, linear-gradient(#176f94, #176f94) right/2px 100% no-repeat;
}

.p-wysiwyg.u-downlevel h5:not([class]),
.p-wysiwyg.u-downlevel h5[class^=u-],
.p-wysiwyg.u-downlevel h5[class*=' u-'] {
	margin-top: 3.2rem;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel h5:not([class])::before,
.p-wysiwyg.u-downlevel h5[class^=u-]::before,
.p-wysiwyg.u-downlevel h5[class*=' u-']::before {
	content: none;
}

.p-wysiwyg.u-downlevel h6:not([class]),
.p-wysiwyg.u-downlevel h6[class^=u-],
.p-wysiwyg.u-downlevel h6[class*=' u-'] {
	margin-top: 3.2rem;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel-2 h2:not([class]),
.p-wysiwyg.u-downlevel-2 h2[class^=u-],
.p-wysiwyg.u-downlevel-2 h2[class*=' u-'] {
	margin-top: 3.2rem;
	padding: 0.8rem 0.4rem 0.8rem 1.4rem;
	border-left: 3px solid #176f94;
	background-color: #f5f5f7;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel-2 h3:not([class]),
.p-wysiwyg.u-downlevel-2 h3[class^=u-],
.p-wysiwyg.u-downlevel-2 h3[class*=' u-'] {
	position: relative;
	margin-top: 3.2rem;
	padding-left: 1.8rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel-2 h3:not([class])::before,
.p-wysiwyg.u-downlevel-2 h3[class^=u-]::before,
.p-wysiwyg.u-downlevel-2 h3[class*=' u-']::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.6rem;
	height: 1.6em;
	background: linear-gradient(#176f94, #176f94) left/2px 100% no-repeat, linear-gradient(#176f94, #176f94) right/2px 100% no-repeat;
}

.p-wysiwyg.u-downlevel-2 h4:not([class]),
.p-wysiwyg.u-downlevel-2 h4[class^=u-],
.p-wysiwyg.u-downlevel-2 h4[class*=' u-'] {
	margin-top: 3.2rem;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel-2 h5:not([class]),
.p-wysiwyg.u-downlevel-2 h5[class^=u-],
.p-wysiwyg.u-downlevel-2 h5[class*=' u-'] {
	margin-top: 3.2rem;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-wysiwyg.u-downlevel-2 h5:not([class])::before,
.p-wysiwyg.u-downlevel-2 h5[class^=u-]::before,
.p-wysiwyg.u-downlevel-2 h5[class*=' u-']::before {
	content: none;
}

.p-wysiwyg.u-downlevel-2 h6:not([class]),
.p-wysiwyg.u-downlevel-2 h6[class^=u-],
.p-wysiwyg.u-downlevel-2 h6[class*=' u-'] {
	margin-top: 3.2rem;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.p-wysiwyg p:not([class]),
.p-wysiwyg p[class^=u-],
.p-wysiwyg p[class*=' u-'] {
	margin-top: 1.6rem;
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: justify;
}

.p-wysiwyg p:not([class]) strong,
.p-wysiwyg p[class^=u-] strong,
.p-wysiwyg p[class*=' u-'] strong {
	font-weight: 700;
}

.p-wysiwyg p:empty {
	display: none;
}

.p-wysiwyg a:not([class]) {
	color: #176f94;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.p-wysiwyg ul:not([class]),
.p-wysiwyg ul[class^=u-],
.p-wysiwyg ul[class*=' u-'] {
	margin: 1.6rem 0;
}

.p-wysiwyg ul:not([class]) li,
.p-wysiwyg ul[class^=u-] li,
.p-wysiwyg ul[class*=' u-'] li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: justify;
}

.p-wysiwyg ul:not([class]) li::before,
.p-wysiwyg ul[class^=u-] li::before,
.p-wysiwyg ul[class*=' u-'] li::before {
	content: '';
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background-color: #004b6f;
}

.p-wysiwyg ul:not([class]) li + li,
.p-wysiwyg ul[class^=u-] li + li,
.p-wysiwyg ul[class*=' u-'] li + li {
	margin-top: 0.8rem;
}

.p-wysiwyg ul:not([class]) ul,
.p-wysiwyg ul[class^=u-] ul,
.p-wysiwyg ul[class*=' u-'] ul {
	margin: 0.8rem 0;
}

.p-wysiwyg ul:not([class]) ul li,
.p-wysiwyg ul[class^=u-] ul li,
.p-wysiwyg ul[class*=' u-'] ul li {
	padding-left: 2rem;
	font-weight: 600;
}

.p-wysiwyg ul:not([class]) ul li::before,
.p-wysiwyg ul[class^=u-] ul li::before,
.p-wysiwyg ul[class*=' u-'] ul li::before {
	top: 0.75em;
	width: 0.4rem;
	height: 0.4rem;
}

.p-wysiwyg ol:not([class]),
.p-wysiwyg ol[class^=u-],
.p-wysiwyg ol[class*=' u-'] {
	counter-reset: ol;
	margin-top: 1.6rem;
}

.p-wysiwyg ol:not([class]) li,
.p-wysiwyg ol[class^=u-] li,
.p-wysiwyg ol[class*=' u-'] li {
	counter-increment: ol;
	position: relative;
	padding-left: 2rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: justify;
}

.p-wysiwyg ol:not([class]) li::before,
.p-wysiwyg ol[class^=u-] li::before,
.p-wysiwyg ol[class*=' u-'] li::before {
	content: counter(ol) '.';
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6rem;
	color: #004b6f;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	text-align: right;
}

.p-wysiwyg ol:not([class]) li + li,
.p-wysiwyg ol[class^=u-] li + li,
.p-wysiwyg ol[class*=' u-'] li + li {
	margin-top: 0.8rem;
}

.p-wysiwyg ol:not([class]) ol,
.p-wysiwyg ol[class^=u-] ol,
.p-wysiwyg ol[class*=' u-'] ol {
	counter-reset: ol;
	margin-top: 0.8rem;
}

.p-wysiwyg ol:not([class]) ol li,
.p-wysiwyg ol[class^=u-] ol li,
.p-wysiwyg ol[class*=' u-'] ol li {
	padding-left: 4rem;
	font-weight: 600;
}

.p-wysiwyg ol:not([class]) ol li::before,
.p-wysiwyg ol[class^=u-] ol li::before,
.p-wysiwyg ol[class*=' u-'] ol li::before {
	left: 2rem;
}

.p-wysiwyg img {
	max-width: 100%;
	height: auto;
}

.p-wysiwyg img.asset-image,
.p-wysiwyg > img {
	display: block;
	margin-top: 2.4rem;
	border-radius: 0.8rem;
}

.p-wysiwyg figure.mt-figure {
	margin-top: 2.4rem;
}

.p-wysiwyg figure.mt-figure img {
	width: 100%;
	border-radius: 0.8rem;
}

.p-wysiwyg figure.mt-figure figcaption {
	margin-top: 0.8rem;
	color: #5c5c66;
	font-size: 1.3rem;
	line-height: 1.6;
	text-align: center;
}

.p-wysiwyg blockquote {
	margin: 4rem 1.6rem 1.6rem 1.6rem;
	padding: 1.6rem 2.4rem;
	border-left: 3px solid #176f94;
	background-color: #f5f5f7;
}

.p-wysiwyg blockquote p {
	margin-top: 0;
	color: #5c5c66;
}

.p-wysiwyg blockquote p + p {
	margin-top: 1.6rem;
}

.p-wysiwyg code {
	padding: 0.1em 0.4em;
	border-radius: 0.3rem;
	background-color: #f5f5f7;
	font-size: 0.92em;
}

.p-wysiwyg pre {
	overflow-x: auto;
	margin-top: 1.6rem;
	padding: 1.6rem;
	border-radius: 0.8rem;
	background-color: #f5f5f7;
	font-size: 1.4rem;
	line-height: 1.6;
}

.p-wysiwyg table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 2.4rem;
	background-color: #fff;
	font-size: 1.5rem;
	line-height: 1.6;
}

.p-wysiwyg table th,
.p-wysiwyg table td {
	padding: 1.2rem 1.6rem;
	border: 1px solid #d1d5db;
	text-align: left;
	vertical-align: top;
}

.p-wysiwyg table th {
	background-color: #f5f5f7;
	font-weight: 700;
	white-space: nowrap;
}

.p-wysiwyg table caption {
	margin-bottom: 0.8rem;
	color: #5c5c66;
	font-size: 1.3rem;
	text-align: left;
}

.p-wysiwyg .mt-be-columns {
	align-items: flex-start;
	margin-top: 4rem;
	gap: 2.4rem;
}

.p-wysiwyg .mt-be-column {
	flex: 1;
	width: 100%;
	min-width: 0;
}

.p-wysiwyg .mt-be-column > :first-child {
	margin-top: 0;
}

.p-wysiwyg .mt-be-columns.is-mediatext > .mt-be-column img,
.p-wysiwyg .mt-be-columns.is-mediatext > .mt-be-column .mt-be-placeholder {
	display: block;
	width: 100%;
	border-radius: 0.8rem;
}

.p-wysiwyg .mt-be-columns.is-mediatext > .mt-be-column > :first-child {
	margin-top: 0;
}

.p-wysiwyg .mt-be-columns.is-mediatext > .mt-be-column > :last-child {
	margin-bottom: 0;
}

.p-wysiwyg .mt-be-columns.is-mediatext > .mt-be-column.is-empty {
	display: none;
}

.p-wysiwyg .mt-be-placeholder {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #e4e5ea;
	aspect-ratio: 4/3;
}

.p-wysiwyg .mt-be-placeholder::before {
	content: '';
	width: 4.8rem;
	height: 4.8rem;
	background: no-repeat 50% 50%/contain;
	background-image: url(../img/ico_open.png);
	opacity: 0.6;
	-webkit-filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
	filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
}

.p-wysiwyg .mt-be-placeholder.sz-lg {
	aspect-ratio: 16/7;
}

.l-article:not(.sz-narrow) .p-content.p-wysiwyg h2:not([class]) {
	padding: 1.2rem 1.6rem;
	border-radius: 0.8rem;
	background-color: #5c5c66;
	color: #fff;
	text-align: justify;
}

/* -----------------------------------------------------
 * parts: YouTubeチャンネル（TOP・YouTube）
 * 動画カード3枚（カード全体が外部リンク）。スライダー無し（静的）。
 * 見出し行＝左:見出し / 右:ボタン（PC Grid）。DOM順＝見出し→カード→ボタン、SPはボタン最下部。
 * 見出し＝c-heading（リード無し）、ボタン＝c-btn-more、再生アイコン＝c-play を流用。
 * -------------------------------------------------- */

.p-youtube {
	margin-top: 8rem;
  /* ===== ボタン（SP=最下部中央 / PC=見出し行の右） ===== */
  /* ===== 動画カード（SP=縦積み / PC=3枚横並び） ===== */;
}

.p-youtube-inner {
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.p-youtube-action {
	display: flex;
	justify-content: center;
	margin-top: 2.4rem;
}

.p-youtube-list {
	display: flex;
	flex-direction: column;
	margin-top: 2.5rem;
	gap: 2.4rem;
}

.p-youtube-card {
	display: flex;
	flex-direction: column;
	color: #1a1a1a;
	gap: 0.8rem;
}

.p-youtube-card .p-youtube-card-thumb img {
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease, -webkit-transform 0.4s ease;
	-webkit-transform: translateZ(0) rotate(0.001deg);
	transform: translateZ(0) rotate(0.001deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.p-youtube-card-thumb {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 343/212;
}

.p-youtube-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.p-youtube-card-title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	word-wrap: break-word;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

/* -----------------------------------------------------
 * js: 絞り込み機能
 * -------------------------------------------------- */

.js-refine.is-no-results::after {
	content: '該当する結果がありません';
	display: block;
	padding: 40px 20px;
	font-size: 1.6rem;
	font-weight: 500;
	text-align: center;
}

.js-refine-target > .is-hidden {
	display: none !important;
}

/* -----------------------------------------------------
 * js: スクロールイン 文字送りリビール（KVテキストアニメの汎用版）
 * `.js-reveal-text` を付けた見出し（トップh3／下層h1等）を SplitText で1文字ずつ分割し、
 * 画面内に入ったら（is-inview）読み順＝左→右・行ごとに1文字ずつ表示する。
 * - 文字分割＝SplitText（app.jsで .js-split-text と共に処理。<br>や折返しは温存＝読み順に出る＝複数行でも自然）。
 * - 監視＝app.jsのIntersectionObserver（.c-heading/.js-reveal と共通）。JS無効時は has-heading-reveal が付かず常時表示。
 * - 速度/段差/移動量はマークアップの data-split-*（→CSS変数）で調整可：
 *     data-split-stagger（--char-stagger）/ data-split-duration（--char-duration）/ data-split-distance（--char-move）/ data-split-delay（--char-base）
 * - c-heading は1行想定で別途clipリビール（_c-heading.scss）。こちらは複数行向けの文字送り。
 * -------------------------------------------------- */

/* FOUC対策：SplitText分割が済むまで要素を隠す（生テキストのチラ見え防止。KV/スライダーと同思想）。
   SplitTextが付与する is-split で表示に切替え、中の .char は下記で個別にフェード制御する。
   ※JS無効時は表示されない（スライダー類と同様の割り切り）。 */

.js-reveal-text {
	opacity: 0;
}

.js-reveal-text.is-split {
	opacity: 1;
}

.has-heading-reveal .js-reveal-text .char {
	display: inline-block;
	opacity: 0;
	transition: opacity var(--char-duration, 0.5s) ease, -webkit-transform var(--char-duration, 0.5s) ease;
	transition: opacity var(--char-duration, 0.5s) ease, transform var(--char-duration, 0.5s) ease;
	transition: opacity var(--char-duration, 0.5s) ease, transform var(--char-duration, 0.5s) ease, -webkit-transform var(--char-duration, 0.5s) ease;
	-webkit-transform: translateY(var(--char-move, 0.2em));
	transform: translateY(var(--char-move, 0.2em));
}

.has-heading-reveal .js-reveal-text.is-inview .char {
	opacity: 1;
	transition-delay: calc(var(--char-base, 0s) + var(--char-index, 0) * var(--char-stagger, 0.03s));
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.js-reveal-text .char-space {
	white-space: pre;
}

/* -----------------------------------------------------
 * js: スクロールイン リビール（左→右 clip-path）
 * `.js-reveal` を付けた要素を、画面内に入ったら左から右へ clip-path で表示する（見出しh3等の汎用演出）。
 * - app.js の IntersectionObserver が `.c-heading, .js-reveal` を監視し、入ったら is-inview を付与。
 *   併せて <html> に has-heading-reveal を付与（JS有効の印）。
 * - JS無効時は has-heading-reveal が付かない＝常時表示（恒久非表示を防止）。
 * - c-heading は和文(.ja)のみの専用リビール（_c-heading.scss）。こちらは要素自身をクリップする汎用版。
 * -------------------------------------------------- */

.has-heading-reveal .js-reveal {
	transition: -webkit-clip-path var(--reveal-duration, 2s) cubic-bezier(0.22, 1, 0.36, 1);
	transition: clip-path var(--reveal-duration, 2s) cubic-bezier(0.22, 1, 0.36, 1);
	transition: clip-path var(--reveal-duration, 2s) cubic-bezier(0.22, 1, 0.36, 1), -webkit-clip-path var(--reveal-duration, 2s) cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}

.has-heading-reveal .js-reveal.is-inview {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
}

/* -----------------------------------------------------
 * js: スクロール登場アニメーション
 * -------------------------------------------------- */

.js-scroll-anim[data-anim=fade],
.js-scroll-anim-target[data-anim=fade] {
	opacity: 0;
	transition: opacity 1s ease-out;
}

.js-scroll-anim[data-anim=fade-up],
.js-scroll-anim-target[data-anim=fade-up] {
	opacity: 0;
	transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition: opacity 1s ease-out, transform 1s ease-out, -webkit-transform 1s ease-out;
	-webkit-transform: translateY(5rem);
	transform: translateY(5rem);
}

.js-scroll-anim[data-anim=fade-down],
.js-scroll-anim-target[data-anim=fade-down] {
	opacity: 0;
	transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition: opacity 1s ease-out, transform 1s ease-out, -webkit-transform 1s ease-out;
	-webkit-transform: translateY(-5rem);
	transform: translateY(-5rem);
}

.js-scroll-anim[data-anim=fade-right],
.js-scroll-anim > .js-scroll-anim-target[data-anim=fade-right] {
	opacity: 0;
	transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
	transition: opacity 1s ease-out, transform 1s ease-out;
	transition: opacity 1s ease-out, transform 1s ease-out, -webkit-transform 1s ease-out;
	-webkit-transform: translateX(-5rem);
	transform: translateX(-5rem);
}

.js-scroll-anim[data-anim=clip-left],
.js-scroll-anim-target[data-anim=clip-left] {
	transition: -webkit-clip-path 1s ease;
	transition: clip-path 1s ease;
	transition: clip-path 1s ease, -webkit-clip-path 1s ease;
	-webkit-clip-path: inset(0 0 0 100%);
	clip-path: inset(0 0 0 100%);
}

.js-scroll-anim[data-anim=clip-right],
.js-scroll-anim-target[data-anim=clip-right] {
	transition: -webkit-clip-path 1s ease;
	transition: clip-path 1s ease;
	transition: clip-path 1s ease, -webkit-clip-path 1s ease;
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
}

.js-scroll-anim[data-anim=clip-top],
.js-scroll-anim-target[data-anim=clip-top] {
	transition: -webkit-clip-path 1s ease;
	transition: clip-path 1s ease;
	transition: clip-path 1s ease, -webkit-clip-path 1s ease;
	-webkit-clip-path: inset(100% 0 0 0);
	clip-path: inset(100% 0 0 0);
}

.js-scroll-anim[data-anim=clip-bottom],
.js-scroll-anim-target[data-anim=clip-bottom] {
	transition: -webkit-clip-path 1s ease;
	transition: clip-path 1s ease;
	transition: clip-path 1s ease, -webkit-clip-path 1s ease;
	-webkit-clip-path: inset(0 0 100% 0);
	clip-path: inset(0 0 100% 0);
}

.js-scroll-anim[data-anim=blur],
.js-scroll-anim-target[data-anim=blur] {
	opacity: 0;
	transition: opacity 1s ease-out, -webkit-filter 1s ease-out;
	transition: opacity 1s ease-out, filter 1s ease-out;
	transition: opacity 1s ease-out, filter 1s ease-out, -webkit-filter 1s ease-out;
	-webkit-filter: blur(1rem);
	filter: blur(1rem);
}

.js-scroll-anim[data-anim=blur-down],
.js-scroll-anim-target[data-anim=blur-down] {
	opacity: 0;
	transition: opacity 1s ease-out, -webkit-filter 2s ease-out, -webkit-transform 1s ease;
	transition: opacity 1s ease-out, filter 2s ease-out, transform 1s ease;
	transition: opacity 1s ease-out, filter 2s ease-out, transform 1s ease, -webkit-filter 2s ease-out, -webkit-transform 1s ease;
	-webkit-transform: translateY(-7.5rem);
	transform: translateY(-7.5rem);
	-webkit-filter: blur(1rem);
	filter: blur(1rem);
}

.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=fade],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=fade] {
	opacity: 1;
}

.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=fade-up],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=fade-up],
.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=fade-down],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=fade-down] {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=fade-right],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=fade-right] {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=blur],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=blur] {
	opacity: 1;
	-webkit-filter: blur(0);
	filter: blur(0);
}

.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=blur-down],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=blur-down] {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-filter: blur(0);
	filter: blur(0);
}

.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=clip-left],
.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=clip-right],
.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=clip-top],
.js-scroll-anim:is(.is-loaded *).is-anim-start[data-anim=clip-bottom],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=clip-left],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=clip-right],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=clip-top],
.js-scroll-anim:is(.is-loaded *).is-anim-start > .js-scroll-anim-target[data-anim=clip-bottom] {
	-webkit-clip-path: inset(0);
	clip-path: inset(0);
}

/* -----------------------------------------------------
 * js: スライダー初期化前のFOUC抑止（共通）
 * Swiper/Splide等はJS初期化までスライドが素のフローのまま横に展開され、一瞬ちらつく。
 * app.js が全モジュールのマウント後に .is-slider-ready を付与するまで不可視にし、
 * レイアウト確定後にフェードインさせる。
 * ・付与は初期化完了時の1回のみ＝PCでdestroyする強みPointでも解除されない。
 * ・初期化に失敗しても app.js 側で必ず付与するため、無表示のまま残らない。
 * -------------------------------------------------- */

.js-slide-fade,
.js-slide-points,
.js-slide-banner,
.js-slide-knowhow,
.js-slide-pickup,
.js-slide-precedent,
.js-logo-loop,
.js-gallery {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.js-slide-fade.is-slider-ready,
.js-slide-points.is-slider-ready,
.js-slide-banner.is-slider-ready,
.js-slide-knowhow.is-slider-ready,
.js-slide-pickup.is-slider-ready,
.js-slide-precedent.is-slider-ready,
.js-logo-loop.is-slider-ready,
.js-gallery.is-slider-ready {
	opacity: 1;
}

/* -----------------------------------------------------
 * js: フェードスライダーの切替でページ全体が揺れるのを防ぐ
 * 切替のたびにスライダー内部の再レイアウトが外へ波及し、ページ全体が一瞬1pxずれて戻っていた
 * （録画解析：8.6秒周期＝autoplayのdelay+speedと一致）。contain で内部に封じ込める。
 * -------------------------------------------------- */

.js-slide-fade {
	contain: layout paint;
}

.js-slide-fade .swiper-slide {
	will-change: opacity;
}

/* -----------------------------------------------------
 * js: タブ切り替えコンテンツ
 * -------------------------------------------------- */

/* -----------------------------------------------------
 * js: syntax-highlight (Prism.js)
 * -------------------------------------------------- */

.js-highlight:not(.syntax-highlight) {
	display: none;
}

.js-highlight.syntax-highlight {
	position: relative;
	overflow: hidden;
	margin: 20px 0;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.js-highlight.syntax-highlight pre[class*=language-] {
	margin: 0;
	padding: 16px;
	font-size: 1.4rem;
	line-height: 1.6;
}

.js-highlight.syntax-highlight pre[class*=language-] code[class*=language-] {
	font-size: inherit;
	line-height: inherit;
}

.js-highlight.syntax-highlight.line-numbers pre[class*=language-] {
	padding-left: 3.8em;
}

.js-highlight.syntax-highlight .code-toolbar {
	position: relative;
}

.js-highlight.syntax-highlight .code-toolbar .toolbar {
	position: absolute;
	top: 8px;
	right: 8px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.js-highlight.syntax-highlight .code-toolbar .toolbar .toolbar-item button {
	cursor: pointer;
	padding: 4px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	font-size: 1.2rem;
	transition: all 0.2s ease;
}

.js-highlight.syntax-highlight .code-toolbar .toolbar .toolbar-item button:hover {
	border-color: #007acc;
	background: #fff;
	color: #007acc;
}

.js-highlight.syntax-highlight .code-toolbar .toolbar .toolbar-item button:active {
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
}

.js-highlight.syntax-highlight .code-toolbar:hover .toolbar {
	opacity: 1;
}

.p-wysiwyg .js-highlight.syntax-highlight {
	margin: 24px 0;
}

/* =====================================================
* Layout
* ================================================== */

/* -----------------------------------------------------
 * layout: action（本文下のアクション行。「一覧に戻る」等のボタンを置く）
 * 記事詳細では l-article-grid の外に置く。2カラム（.has-side）でも本文カラム基準にならず、
 * コンテンツ枠（＝中央寄せコンテナ）の中央にボタンが出る。
 * -------------------------------------------------- */

.l-action {
	display: flex;
	justify-content: center;
	margin-top: 3.2rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	gap: 1.6rem;
}

.l-action .c-btn {
	min-width: 25rem;
}

/* -----------------------------------------------------
 * layout: archive（記事一覧：ノウハウ/お知らせ/事例 等）
 * 既定＝1カラム（本文のみ・全幅）。サイドバーを持つページは .has-side を付与して2カラム化。
 * （2カラムの方が少数＝1カラムをベースにし、2カラムを追加クラスで切替）
 * 2カラム時の列metricsは l-article と統一（1fr＋32rem・gap9.4rem）。最大幅 $section-inner-max。
 * -------------------------------------------------- */

.l-archive {
  /* 2カラム（本文＋サイドバー）。.has-side を付与したページのみPCで2カラムに */
  /* 一覧見出し（「すべてのブログ」＋件数）＋下罫線 */
  /* 検索結果見出し（セミナー/事例一覧）。PC＝件数(左)/表示レンジ(右)を1行・下線付き／SP＝縦積み */
  /* カードグリッド（SP1列／PC2列） */
  /* 該当なし（ListViewが0件時に出力） */
  /* サイドバー（PC＝右カラム上揃え／SP＝記事一覧・ページネーションの下にフル幅表示） */;
}

.l-archive-grid {
	width: 100%;
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.l-archive-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid #d1d5db;
	gap: 1.6rem;
}

.l-archive-head .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}

.l-archive-head .count {
	display: flex;
	flex-shrink: 0;
	align-items: baseline;
	margin: 0;
	gap: 0.2rem;
}

.l-archive-head .count .num {
	color: #176f94;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.2;
}

.l-archive-head .count .unit {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-archive-result {
	margin-top: 3.8rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid #d1d5db;
}

.l-archive-result .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.8;
}

.l-archive-result .title span {
	font-size: 2.8rem;
	line-height: 1.2857142857;
}

.l-archive-result .range {
	position: relative;
	margin: 1.4rem 0 0;
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: right;
	white-space: nowrap;
}

.l-archive-list {
	display: grid;
	margin-top: 2.4rem;
	grid-template-columns: 1fr;
	gap: 3.2rem;
  /* セミナー/事例一覧：SP1列(カード間24)／PC3列(列gap40) */
  /* 初回描画までの待ち（JSONのサーバー応答が遅いと数秒空くため、空欄ではなく読込中と分かるようにする） */;
}

.l-archive-list.sz-3col {
	gap: 2.4rem;
}

.l-archive-list.is-list-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 24rem;
}

.l-archive-list.is-list-loading::before {
	content: '';
	width: 3.2rem;
	height: 3.2rem;
	border: 2px solid #d1d5db;
	border-top-color: #176f94;
	border-radius: 50%;
	-webkit-animation: list-loading 0.8s linear infinite;
	animation: list-loading 0.8s linear infinite;
}

.l-archive-empty {
	margin: 0;
	padding: 4rem 0;
	color: #5c5c66;
	font-size: 1.6rem;
	text-align: center;
}

.l-archive .c-pagination {
	margin-top: 3.2rem;
}

.l-archive-side {
	display: flex;
	flex-direction: column;
	margin-top: 4rem;
	gap: 3.2rem;
}

@-webkit-keyframes list-loading {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes list-loading {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* -----------------------------------------------------
 * layout: article（記事詳細：ノウハウ/お知らせ等）
 * スケルトンの骨格（.l-article / -header / -inner(=p-wysiwyg) / -kv / .p-content）を維持。
 * 既定＝1カラム（本文のみ）。サイドバーを持つ記事は .has-side を付与してPCで2カラム化（l-archive と統一）。
 * SPは常に1カラム（サイドバー非表示）。
 * 設計：.claude/docs/forcle_design/coding/13_knowhow_detail.md
 * -------------------------------------------------- */

.l-article {
	margin-top: 3.2rem;
  /* 1カラム（サイドバー無し）時は本文枠を 120rem（1200）に。2カラム時は上記 $section-inner-max（1248）のまま */
  /* 本文カラムをさらに狭く（募集要項詳細＝本文1040／アンカー行は別ブロックで1200）。grid は1200のまま本文だけ絞る */
  /* アンカー行→本文の間隔、および本文内の節（§）どうしの間隔（H2前で大きく取る） */
  /* 本文はMT.netブロックエディタ出力＝素タグのフラット構造（section無し）。節の境界＝H2の上で間隔を取る（先頭H2は除く） */
  /* 2カラム本体（本文 + サイドバー）。.has-side を付与した記事のみPCで grid 2カラムに。
     見出し帯(head)は左カラム幅のみ、サイドバー(side)はアイキャッチの高さに揃える。 */
  /* 記事ヘッダー：タイトル(h1)＋メタ（公開/更新日＋カテゴリ） */
  /* 開催日/開催形式/定員はラベルが2〜4字と字数が揃わないため、事例の字間均等配置は解除する */
  /* 左カラム＝本文（アイキャッチ＋wysiwyg本文）。アイキャッチ→本文の間隔は _p-content.scss 側 */
  /* 1カラム時はgridのrow-gap（has-side側）が効かないため、ヘッダー→本文の間隔をPCで補う（SPはkvのmargin-topで供給） */
  /* 右カラム＝サイドバー（PC＝右カラム／SP＝本文の下にフル幅表示） */;
}

.l-article-grid {
	width: 100%;
	max-width: 124.8rem;
	padding-right: 2.4rem;
	padding-left: 2.4rem;
	margin-inline: auto;
}

.l-article:not(.has-side) .l-article-grid {
	max-width: 120rem;
}

.l-article.sz-narrow .p-innerlinks + .l-article-grid {
	margin-top: 4rem;
}

.l-article.sz-narrow .p-wysiwyg h2:not([class]):not(:first-child) {
	margin-top: 8rem;
}

.l-article-header .title {
	margin: 0;
	color: #1a1a1a;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.5;
}

.l-article-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	margin-top: 1.2rem;
	gap: 0.8rem;
}

.l-article-meta .dates {
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
	margin-right: auto;
	gap: 0.8rem;
}

.l-article-meta .date {
	display: inline-flex;
	align-items: center;
	color: #5c5c66;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	gap: 0.2rem;
}

.l-article-meta .date img {
	width: 2rem;
	height: 2rem;
	-webkit-filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
	filter: invert(39%) sepia(2%) saturate(2400%) hue-rotate(202deg) brightness(88%) contrast(87%);
}

.l-article-meta .date.editor {
	font-family: 'Noto Sans JP', sans-serif;
}

.l-article-meta .date.editor img {
	position: relative;
	top: 0.1rem;
	width: 2rem;
	height: 1.6rem;
	-webkit-filter: none;
	filter: none;
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: 0 50%;
	object-position: 0 50%;
}

.l-article-meta .company {
	min-width: 0;
	margin: 0;
	margin-right: auto;
	color: #5c5c66;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.025em;
}

.l-article-meta .c-badge {
	height: 2.8rem;
	font-size: 1.4rem;
}

.l-article-tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.6rem;
	gap: 0.8rem;
}

.l-article-case,
.l-article-seminar {
	display: flex;
	flex-direction: column;
	margin-top: 1.6rem;
	gap: 2.4rem;
}

.l-article-case .desc,
.l-article-seminar .desc {
	color: #1a1a1a;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: justify;
}

.l-article-case .p-case-pickup-attrs,
.l-article-seminar .p-case-pickup-attrs {
	margin-top: 0;
}

.l-article-case .tags,
.l-article-seminar .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.l-article-seminar .p-case-pickup-attrs .key {
	text-indent: 0;
	letter-spacing: 0;
}

.l-article-main {
	margin-top: 3.2rem;
}

.l-article-kv {
	overflow: hidden;
	margin: 0;
	border-radius: 0.8rem;
	aspect-ratio: 786/491;
}

.l-article-kv img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.l-article-side {
	display: flex;
	flex-direction: column;
	margin-top: 4rem;
	gap: 3.2rem;
}

/* -----------------------------------------------------
 * layout: bg（背景パーティクル・全画面最背面）
 * particles.js本家＋顧客提供JSON（BgParticles.js）。コンテナ内に canvas を生成する。z-index 最背面＝純粋な背景。
 * 可視化のため body / メイン領域は透過にし、ベース色は html 側で持つ。見た目（色・濃さ・量）はJSON側で制御。
 * -------------------------------------------------- */

.l-bg {
	display: block;
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	inset: 0;
}

.l-bg canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* -----------------------------------------------------
 * layout: contents
 * -------------------------------------------------- */

.l-contents {
	padding: 0 0 8rem;
}

/* -----------------------------------------------------
 * layout: cookie（Cookie使用の同意バナー・画面下部に固定）
 * MTG：「同意する」のみ（「同意しない」は不要）。同意するとN日間非表示。
 * 表示制御は CookieConsent.js。初期は非表示（display:none）、未同意時のみ .is-active で表示。
 * 非表示日数は CookieConsent.js の expireDays（既定30日）で変更可。
 * レイアウト：SP=縦積み(14/400・ボタン全幅) / ovsp=横並び(16/600・ボタン160)。白背景・上border。
 * -------------------------------------------------- */

.l-cookie {
	display: none;
	position: fixed;
	z-index: 200;
	right: 0;
	bottom: 0;
	left: 0;
	border-top: 1px solid #d1d5db;
	background-color: #fff;
}

.l-cookie.is-active {
	display: block;
}

.l-cookie-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.6rem 2.4rem;
	gap: 1.2rem;
}

.l-cookie-text {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
}

.l-cookie-text a {
	color: #176f94;
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

.l-cookie .js-cookie-accept {
	width: 100%;
}

/* -----------------------------------------------------
 * layout: 資料一覧グリッド（無料資料ダウンロード）
 * c-card-document を 3列×2行＝6枚で並べる。l-archive-list は2列固定のため流用せず新設。
 * base＝SP1列 → mq(ovsp) で repeat(3,1fr)・列gap4rem。最大幅・gutterは他ページと統一。
 * -------------------------------------------------- */

.l-document {
	width: 100%;
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.l-document-list {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: 1fr;
	gap: 2.4rem;
}

/* -----------------------------------------------------
 * layout: fill
 * -------------------------------------------------- */

.l-fill {
	margin: 32px -16px 0;
	padding: 32px 16px;
	background-color: #f5f5f7;
}

.l-fill.p-wide {
	padding-top: 48px;
	padding-bottom: 48px;
}

.l-fill.p-wide hr {
	margin-top: 48px;
	margin-bottom: 48px;
}

.l-fill-inner .title {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	gap: 8px;
}

.l-fill-inner .title .c-icon {
	width: 32px;
	height: 32px;
}

.l-fill hr {
	margin: 24px -16px;
	border: 0;
	border-bottom: 1px solid #d1d5db;
}

.l-fill-contents {
	margin: 24px 0 0;
}

.l-fill-contents .c-note {
	font-size: 1.2rem;
}

/* -----------------------------------------------------
 * layout: footcontents
 * -------------------------------------------------- */

.l-footcontens {
	margin-top: 64px;
	margin-bottom: -64px;
}

/* -----------------------------------------------------
 * layout: footer（FORCLE）
 * 背景 #1A1A1A（黒）。単位は基本 rem。区切り線 #D1D5DB。
 * 設計：モバイルファースト（ソース順＝SP縦積み）。ovsp(768+) で CSS Grid 配置（フッターはヘッダーと違いタブレットもPCレイアウト）。
 * ナビ：ovsp=4カラム常時表示／sp(≤767)=アコーディオン（子のある項目のみ＋。TOP等はリンク）。
 * デザイン実測：PCロゴ195×46/SP161×38、SNS PCアイコン32・SP40、認定ロゴ高さPC100/SP56 等。
 * -------------------------------------------------- */

.l-footer {
	border-top: 2px solid #e4e5ea;
	background-color: #1a1a1a;
	color: #fff;
  /* ===== inner（SP=縦積み / PC=Grid） ===== */
  /* ===== 会社情報＋SNS ===== */
  /* ===== ナビ ===== */
  /* TOP（フッターSP先頭。PCでは非表示。SPは上端にもlineを引く＝デザインのborder-t） */
  /* ナビのブロック（見出し＋子） */
  /* 子の無いリンク（TOP/FORCLEの強み/企業情報）：SP(≤767)のみ ＞ を表示。ovsp以上はPCレイアウト（●ドット） */
  /* 開閉トグル（＋/−）：SPのみ。PCは常時表示で非表示 */
  /* 子リスト（SP=アコーディオン / PC=常時表示） */
  /* ===== 認定ロゴ（placeholder） ===== */
  /* ===== 採用バナー ===== */
  /* ===== 最下部バー ===== */;
}

.l-footer a {
	color: inherit;
}

.l-footer-inner {
	display: flex;
	flex-direction: column;
	padding: 3.2rem 1.6rem;
	gap: 2.4rem;
}

.l-footer-company {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.l-footer-company .info .logo {
	display: block;
	width: 16.1rem;
	margin: 0 auto 1.2rem;
	transition: opacity 0.2s ease;
}

.l-footer-company .info .logo img {
	display: block;
	width: 100%;
	height: auto;
}

.l-footer-company .info .name {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-footer-company .info .meta {
	display: flex;
	flex-direction: column;
	margin-top: 0.4rem;
	gap: 0.4rem;
}

.l-footer-company .info .meta p {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.5;
}

.l-footer-nav-col {
	display: contents;
}

.l-footer-nav-home > a {
	border-top: 1px solid #d1d5db;
}

.l-footer-nav-block {
	position: relative;
  /* - 見出しリンク */;
}

.l-footer-nav-block > a {
	display: flex;
	align-items: center;
	padding: 1.9rem 0;
	border-bottom: 1px solid #d1d5db;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	gap: 0.8rem;
}

.l-footer-nav-toggle {
	display: block;
	position: absolute;
	top: 0;
	right: -1.6rem;
	width: 5.4rem;
	height: 6.4rem;
}

.l-footer-nav-toggle::before,
.l-footer-nav-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.2rem;
	height: 2px;
	background-color: #fff;
}

.l-footer-nav-toggle::before {
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}

.l-footer-nav-toggle::after {
	transition: -webkit-transform 0.2s ease;
	transition: transform 0.2s ease;
	transition: transform 0.2s ease, -webkit-transform 0.2s ease;
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
	transform: translate3d(-50%, -50%, 0) rotate(90deg);
}

.l-footer-nav-toggle span {
	display: none;
}

.has-child.is-active > .l-footer-nav-toggle::after {
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(0);
	transform: translate3d(-50%, -50%, 0) rotate(0);
}

.l-footer-nav-child {
	display: grid;
	transition: grid-template-rows 0.3s ease;
	transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease;
	grid-template-rows: 0fr;
}

.l-footer-nav-child > div {
	overflow: hidden;
	min-height: 0;
}

.l-footer-nav-child ul {
	padding: 1.5rem 0 0;
}

.l-footer-nav-child li a {
	display: flex;
	align-items: center;
	padding: 0.8rem 0;
	color: #e4e5ea;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	gap: 0.8rem;
}

.l-footer-nav-child li a::before {
	content: '';
	flex-shrink: 0;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background-color: #5c5c66;
}

.has-child.is-active > .l-footer-nav-child {
	grid-template-rows: 1fr;
}

.l-footer-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.6rem;
}

.l-footer-logos li {
	min-width: 5.6rem;
	height: 5.6rem;
	border-radius: 0.4rem;
	background-color: #fff;
}

.l-footer-logos img {
	display: block;
	width: auto;
	height: 100%;
	border-radius: 0.4rem;
	-o-object-fit: contain;
	object-fit: contain;
}

.l-footer-banners {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
  /* 両端の斜線は c-heading .slash と同方式 */;
}

.l-footer-banners-lead {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.7;
	gap: 1.2rem 0.6rem;
}

.l-footer-banners-lead .slash {
	position: relative;
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.6rem;
}

.l-footer-banners-lead .slash::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 100%;
	background-color: #fff;
	-webkit-transform: translate(-50%, -50%) rotate(-40deg);
	transform: translate(-50%, -50%) rotate(-40deg);
}

.l-footer-banners-lead .slash:last-child::before {
	-webkit-transform: translate(-50%, -50%) rotate(40deg);
	transform: translate(-50%, -50%) rotate(40deg);
}

.l-footer-banners ul {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.l-footer-banners li {
	overflow: hidden;
	border-radius: 0.4rem;
}

.l-footer-banners a {
	display: block;
	transition: opacity 0.2s ease;
}

.l-footer-banners img {
	display: block;
	width: 100%;
	height: auto;
}

.l-footer-bottom .copyright {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.5;
}

.l-footer-bottom .l-footer-policy {
	display: flex;
	gap: 2.4rem;
}

.l-footer-bottom .l-footer-policy a {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	transition: opacity 0.2s ease;
}

/* -----------------------------------------------------
 * layout: header（FORCLE）
 * 単位は基本 rem（1rem=10px / html 62.5%）。border の hairline(1px/2px) と pill 半径(999px)・vh のみ例外。
 * 設計：モバイルファースト。ベース=全画面ドロワー／ mq(pc) でインラインへ上書き。
 * -------------------------------------------------- */

:root {
	--header-height: 6.4rem;
}

.l-header {
	display: flex;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	align-items: center;
	width: 100%;
	height: 6.4rem;
	padding: 0 1.6rem;
	background-color: #fff;
  /* ---- ロゴ ---- */
  /* ---- 認定バッジ（PCのみ） ---- */
  /* ---- ナビ本体（ベース=ドロワー / PC=インライン） ---- */
  /* ---- グローバルナビ ---- */
  /* サービスのトグル（シェブロン。ベース表示／PCで非表示） */
  /* サービスの子（ベース=アコーディオン / PC=全幅メガメニュー） */
  /* ===== サービスのメガメニュー本体（ベース=SPドロワー / mq(pc)=全幅白パネル） ===== */
  /* 見出し行（サービス一覧） */
  /* 詳しく見る（SP=丸のみ / PC=ラベル＋黒塗り丸） */
  /* カラム見出し（カテゴリ名＋丸矢印） */
  /* サブリンク群（c-btn-secondary 再利用：SP=白ドット / PC=丸矢印） */
  /* TOP（ドロワー先頭のみ。PCでは非表示） */
  /* ---- ドロワー下部（PCでは非表示） ---- */
  /* ---- CTA（PCのみ） ---- */
  /* ---- ボタン（SPドロワー内CTA専用・白枠/透明・伸縮。PCのCTAは c-btn を使用） ---- */
  /* ---- お問い合わせ通知（吹き出し・PCのみ） ---- */
  /* ---- SP用お問い合わせ（SPのみ表示） ---- */
  /* ---- ハンバーガー（ベース表示／PCで非表示。開くと×） ---- */;
}

.l-header-logo {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: 16.1rem;
	margin: 0;
}

.l-header-logo a {
	display: block;
	transition: opacity 0.2s ease;
}

.l-header-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.l-header-logo .is-white {
	display: none;
}

.l-header-inner {
	position: fixed;
	z-index: 1;
	top: var(--header-height);
	left: 0;
	overflow-y: auto;
	width: 100%;
	height: calc(100vh - var(--header-height));
	height: calc(100dvh - var(--header-height));
	padding: 0 1.6rem 2.4rem;
	background-color: #004b6f;
	opacity: 0;
	transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
	transition: transform 0.35s ease, opacity 0.35s ease;
	transition: transform 0.35s ease, opacity 0.35s ease, -webkit-transform 0.35s ease;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}

.is-menu-open .l-header-inner {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.l-header-nav > ul > li {
	position: relative;
	border-bottom: 1px solid #d1d5db;
}

.l-header-nav > ul > li > a {
	display: block;
	padding: 1.6rem 0 1.5rem;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-header-nav-toggle {
	display: block;
	position: absolute;
	top: 0;
	right: -1.6rem;
	width: 5.4rem;
	height: 5.6rem;
	background: no-repeat 50% 50%/2.2rem auto;
	background-image: url(../img/ico_chevron_down.png);
	transition: -webkit-transform 0.2s ease;
	transition: transform 0.2s ease;
	transition: transform 0.2s ease, -webkit-transform 0.2s ease;
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.l-header-nav-toggle span {
	display: none;
}

.has-child.is-active > .l-header-nav-toggle {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.l-header-nav-child {
	display: grid;
	transition: grid-template-rows 0.3s ease;
	transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease;
	grid-template-rows: 0fr;
}

.l-header-nav-child > div {
	overflow: hidden;
	min-height: 0;
}

.has-child.is-active > .l-header-nav-child {
	grid-template-rows: 1fr;
}

.l-header-mega {
	padding: 0;
}

.l-header-mega-body {
	display: flex;
	flex-direction: column;
	padding: 0 0 1.6rem;
	gap: 1.3rem;
}

.l-header-mega-head {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.l-header-mega-title {
	margin: 0;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-header .c-btn-arrow {
	color: #fff;
}

.l-header .c-btn-arrow .label {
	display: none;
}

.l-header .c-btn-arrow .c-btn-icon {
	width: 2.8rem;
	height: 2.8rem;
	border-color: #fff;
	background-color: transparent;
}

.l-header .c-btn-arrow .c-btn-icon::before {
	width: 1.4rem;
	height: 1.4rem;
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.l-header-mega-cols {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.l-header-mega-col {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.l-header-mega-cat {
	display: flex;
	align-items: center;
	transition: opacity 0.2s ease;
	gap: 0.8rem;
}

.l-header-mega-cat .cat {
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
}

.l-header-mega-cat .c-btn-icon {
	width: 2.8rem;
	height: 2.8rem;
	border-color: #fff;
	background-color: transparent;
}

.l-header-mega-cat .c-btn-icon::before {
	width: 1.4rem;
	height: 1.4rem;
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.l-header-mega-links {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.l-header-mega-links .c-btn-secondary {
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	gap: 0.8rem;
}

.l-header-mega-links .c-btn-secondary .label::after {
	content: none;
}

.l-header-mega-links .c-btn-secondary .ico {
	width: 0.8rem;
	height: 0.8rem;
	border: none;
	border-radius: 999px;
	background: #fff;
	-webkit-filter: none;
	filter: none;
}

.l-header-drawer-foot {
	margin-top: 2.4rem;
}

.l-header-sublinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.4rem;
}

.l-header-sublinks a {
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.5;
	transition: opacity 0.2s ease;
}

.l-header-drawer-cta {
	display: flex;
	margin-top: 2.4rem;
	gap: 1.2rem;
}

.l-header .p-list-sns {
	justify-content: space-between;
	margin: 2.4rem auto 0;
	padding: 3.2rem 2rem;
	gap: unset;
}

.l-header-cta {
	display: none;
}

.l-header-contact {
	position: relative;
}

.l-header-btn {
	display: inline-flex;
	flex: 1 1 0;
	justify-content: center;
	align-items: center;
	height: 4rem;
	padding: 0 1.6rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background-color: transparent;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.l-header-notice {
	display: flex;
	position: absolute;
	top: calc(100% + 1.5rem);
	right: 0;
	align-items: center;
	padding: 0.8rem 1.2rem;
	border-radius: 0.4rem;
	background-color: #004b6f;
	color: #fff;
	line-height: 1.3125;
	white-space: nowrap;
	gap: 0.2rem;
}

.l-header-notice::before {
	content: '';
	position: absolute;
	top: -1rem;
	right: 5.3rem;
	width: 1.2rem;
	height: 1.1rem;
	background-color: #004b6f;
	-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.l-header-notice .t1,
.l-header-notice .t2 {
	font-size: 1.3rem;
	font-weight: 600;
}

.l-header-notice .num {
	display: inline-block;
	margin: 0 0.1em;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
}

.l-header-notice.is-hidden {
	display: none;
}

.l-header-notice p {
	margin: 0;
}

.l-header-notice-close {
	position: absolute;
	top: -1rem;
	right: -1.3rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background-color: #2d313a;
}

.l-header-notice-close::before,
.l-header-notice-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.4rem;
	height: 2px;
	background-color: #fff;
}

.l-header-notice-close::before {
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
	transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.l-header-notice-close::after {
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.l-header-contact-sp {
	position: relative;
	z-index: 2;
	margin-left: auto;
	transition: opacity 0.2s ease;
}

.l-header-contact-sp a {
	display: block;
}

.l-header-contact-sp .ico {
	display: block;
	width: 4rem;
	height: 4rem;
	background: url(../img/ico_mail.png) no-repeat 50% 50%/4rem;
}

.is-menu-open .l-header-contact-sp {
	opacity: 0;
	pointer-events: none;
}

.l-header-hamburger {
	display: block;
	position: relative;
	z-index: 2;
	right: -0.2rem;
	width: 4.4rem;
	height: 4.4rem;
	margin-left: 0.4rem;
}

.l-header-hamburger span,
.l-header-hamburger::before,
.l-header-hamburger::after {
	display: block;
	position: absolute;
	left: 50%;
	width: 2.5rem;
	height: 2px;
	background-color: #1a1a1a;
	transition: background-color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
	transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
	transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
}

.l-header-hamburger span {
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}

.l-header-hamburger::before {
	content: '';
	top: 50%;
	-webkit-transform: translate3d(-50%, calc(-50% - 0.7rem), 0);
	transform: translate3d(-50%, calc(-50% - 0.7rem), 0);
}

.l-header-hamburger::after {
	content: '';
	top: 50%;
	-webkit-transform: translate3d(-50%, calc(-50% + 0.7rem), 0);
	transform: translate3d(-50%, calc(-50% + 0.7rem), 0);
}

/* ===== tb（768〜1023）はヘッダーの寸法を px 固定（rem流体化の影響を受けない） ===== */

/* ===== メニュー展開時（ベース＝モバイル。PCでは無効化） ===== */

.is-menu-open .l-header {
	border-bottom-color: transparent;
	background-color: #004b6f;
}

.is-menu-open .l-header-logo .is-dark {
	display: none;
}

.is-menu-open .l-header-logo .is-white {
	display: block;
}

.is-menu-open .l-header-hamburger span {
	opacity: 0;
}

.is-menu-open .l-header-hamburger::before {
	background-color: #fff;
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
	transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.is-menu-open .l-header-hamburger::after {
	background-color: #fff;
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
	transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

/* -----------------------------------------------------
 * layout: links
 * -------------------------------------------------- */

.l-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 32px 0 0;
	gap: 8px;
}

.l-links.m-narrow {
	margin: 24px 0 0;
}

/* -----------------------------------------------------
 * layout: main
 * -------------------------------------------------- */

.l-main {
	flex-grow: 1;
	min-width: 320px;
	background-color: transparent;
}

.l-main::after {
	content: '';
	display: block;
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.3s ease;
	pointer-events: none;
}

.is-menu-open .l-main::after,
.is-searchform-open .l-main::after {
	background-color: rgba(0, 0, 0, 0.1);
	pointer-events: visible;
}

/* -----------------------------------------------------
 * layout: morelink
 * -------------------------------------------------- */

.l-morelink {
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.l-morelink .c-link {
	position: relative;
	top: -1rem;
	font-weight: 700;
	pointer-events: visible;
}

/* -----------------------------------------------------
 * layout: section（セクションの縦間隔＋中央インナー）
 * - 縦間隔は margin-top のみ（修飾子 m-narrow/m-middle で調整）。
 * - 入れ子の場合は .l-section-inner は不要。
 * - インナー＝$section-inner-max（1248）＋モバイルファーストgutter（FORCLE共通）。
 * -------------------------------------------------- */

.l-section {
	margin-top: 5.6rem;
}

.l-section#mindmap,
.l-section#stats {
	margin-top: 7rem;
}

.l-section#philosophy,
.l-section#access,
.l-section#history {
	margin-top: 8rem;
}

.l-section + .l-section {
	margin-top: 4rem;
}

.p-mv.sz-narrow + .l-section:has(.p-box),
.p-mv.sz-narrow + .l-section:has(.p-content) {
	margin-top: 3rem;
}

.l-section.m-narrow {
	margin-top: 3.2rem;
}

.l-section.m-middle {
	margin-top: 4.8rem;
}

.l-section-inner {
	width: 100%;
	max-width: 124.8rem;
	padding-right: 1.6rem;
	padding-left: 1.6rem;
	margin-inline: auto;
}

.l-section-inner.sz-narrow {
	max-width: calc(104rem + 2.4rem * 2);
}

.l-section-inner.sz-wide {
	max-width: calc(136rem + 2.4rem * 2);
}

.l-section-contents {
	position: relative;
	margin-top: 3.2rem;
}

.l-section-contents .m-narrow {
	margin-top: 1.6rem;
}

.l-section-contents-inner {
	position: relative;
	margin-top: 2.4rem;
}

.l-section-contents-inner.m-wide {
	margin-top: 4.8rem;
}

/* -----------------------------------------------------
 * layout: wrapper
 * -------------------------------------------------- */

.l-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: var(--header-height);
}

/* =====================================================
 * utilities
 * ================================================== */

/* -----------------------------------------------------
 * Display
 * -------------------------------------------------- */

.u-visually-hidden {
	position: absolute !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.u-jc-start {
	justify-content: flex-start !important;
}

.u-jc-center {
	justify-content: center !important;
}

.u-jc-end {
	justify-content: flex-end !important;
}

.u-ai-start {
	align-items: flex-start !important;
}

.u-ai-center {
	align-items: center !important;
}

.u-ai-end {
	align-items: flex-end !important;
}

/* -----------------------------------------------------
 * Filter
 * -------------------------------------------------- */

.u-fl-white {
	-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
}

.u-fl-yellow {
	-webkit-filter: invert(78%) sepia(91%) saturate(3504%) hue-rotate(354deg) brightness(95%) contrast(109%);
	filter: invert(78%) sepia(91%) saturate(3504%) hue-rotate(354deg) brightness(95%) contrast(109%);
}

.u-fl-red {
	-webkit-filter: invert(16%) sepia(85%) saturate(5412%) hue-rotate(342deg) brightness(84%) contrast(98%);
	filter: invert(16%) sepia(85%) saturate(5412%) hue-rotate(342deg) brightness(84%) contrast(98%);
}

.u-fl-blue {
	-webkit-filter: invert(21%) sepia(97%) saturate(2280%) hue-rotate(193deg) brightness(88%) contrast(107%);
	filter: invert(21%) sepia(97%) saturate(2280%) hue-rotate(193deg) brightness(88%) contrast(107%);
}

/* -----------------------------------------------------
 * Margin
 * -------------------------------------------------- */

.u-mt-0 {
	margin-top: 0 !important;
}

.u-mt-4 {
	margin-top: 4px !important;
}

.u-mt-8 {
	margin-top: 8px !important;
}

/* -----------------------------------------------------
 * Text
 * -------------------------------------------------- */

/* font-family
---------------------------------------- */

.u-font-en {
	font-family: 'Montserrat', sans-serif !important;
}

.u-font-ja {
	font-family: 'Noto Sans JP', sans-serif !important;
}

/* text-align
---------------------------------------- */

.u-al-left {
	text-align: left !important;
}

.u-al-center {
	text-align: center !important;
}

.u-al-right {
	text-align: right !important;
}

.u-al-justify {
	text-align: justify !important;
}

/* writing-mode
---------------------------------------- */

.u-wm-rl {
	-ms-writing-mode: tb-rl !important;
	-webkit-writing-mode: vertical-rl !important;
	writing-mode: vertical-rl !important;
}

@media screen and (min-width: 768px) {
	.c-btn-secondary {
		font-size: 1.6rem;
		font-weight: 600;
		line-height: 1.5;
	}

	.c-btn-secondary .ico {
		background-size: 1.8rem;
	}

	.c-btn-more {
		width: 24rem;
		height: 5.6rem;
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}

	.c-btn-more .label {
		font-size: 1.8rem;
		line-height: 1.1666666667;
	}

	.c-card-blog-meta {
		margin-top: 1.8rem;
	}

	.c-card-blog-title {
		margin: 1.2rem 0 0;
		font-size: 2rem;
	}

	.c-card-case .title {
		font-size: 2rem;
	}

	.c-card-document .title {
		margin-top: 2.2rem;
		font-size: 2rem;
	}

	.c-card-document .desc {
		margin: 1.6rem 0 0;
		font-size: 1.5rem;
	}

	.c-card-document .dl {
		margin-top: 2rem;
	}

	.c-card-recruit {
		gap: 1.6rem;
	}

	.c-card-recruit .title {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.c-card-recruit .actions {
		margin-top: 0.8rem;
		grid-template-columns: 1fr;
	}

	.c-card-seminar .meta {
		margin-top: 1.6rem;
	}

	.c-card-seminar .title {
		font-size: 2rem;
	}

	.c-card-seminar .p-case-pickup-attrs.sz-sm .key {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	.c-card-seminar .p-case-pickup-attrs.sz-sm .val {
		font-size: 1.6rem;
		line-height: 1.5;
	}

	.c-card-service {
		height: 100%;
		padding: 2.4rem 2.4rem 2.4rem 3.2rem;
	}

	.c-card-service .name {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.c-card-service .c-btn-icon {
		width: 4rem;
		height: 4rem;
	}

	.c-card-service .c-btn-icon::before {
		width: 2.4rem;
		height: 2.4rem;
	}

	.c-filter {
		gap: 0.7rem;
	}

	.c-heading-center {
		gap: 0.8rem;
	}

	.c-heading-center .en {
		font-size: 2rem;
	}

	.c-heading-center .ja {
		font-size: 3.2rem;
	}

	.c-heading {
		gap: 2.4rem;
	}

	.c-heading .title {
		flex-wrap: nowrap;
		gap: 0.8rem;
	}

	.c-heading .title .ja {
		width: auto;
		font-size: 4rem;
		line-height: 1.5;
	}

	.c-heading .title .slash {
		width: 2.2rem;
		height: 3rem;
		margin-bottom: 0.8rem;
	}

	.c-heading .title .en {
		top: -0.2rem;
		left: -0.2rem;
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.c-heading .lead {
		line-height: 2;
	}

	.c-heading.sz-sm .title .ja {
		font-size: 3.2rem;
		line-height: 1.5;
		letter-spacing: 0.01em;
	}

	.c-heading.sz-sm .title .slash {
		top: 0.4rem;
		width: 2rem;
		height: 2.4rem;
		margin-bottom: 0;
	}

	.c-heading.sz-sm .title .en {
		top: 0.7rem;
		left: 0;
		font-size: 2rem;
		line-height: 1.5;
	}

	.c-heading3 {
		padding-bottom: 1.6rem;
		font-size: 2.8rem;
	}

	.c-heading3::after {
		width: 8rem;
	}

	.c-heading3 {
		margin-bottom: 2.5rem;
	}

	.c-label {
		min-height: 36px;
		border-radius: 18px;
		font-size: 1.4rem;
	}

	.c-label.entry {
		width: 176px;
	}

	.c-link-blog::after {
		position: relative;
		right: -0.5rem;
	}

	.c-pagination {
		gap: 1.8rem;
	}

	.c-totop {
		display: flex;
	}

	.p-access {
		margin-top: 4rem;
	}

	.p-access-map {
		height: 40rem;
	}

	.p-author {
		margin: 4rem 0 0;
		padding: 2.4rem;
		gap: 2.4rem;
	}

	.p-author-heading::before {
		top: 0.2em;
		height: 1.4em;
	}

	.p-author-heading {
		padding: 0.4rem 0 0 1.8rem;
		font-size: 2rem;
	}

	.p-author-body {
		gap: 1.6rem;
	}

	.p-author-avatar {
		width: 9.6rem;
		height: 9.6rem;
	}

	.p-author-profile .name {
		font-size: 2rem;
	}

	.p-author-profile .desc {
		word-break: normal;
	}

	.p-box {
		padding: 8rem 5.6rem;
	}

	.p-box.sz-lg p {
		margin-top: 4.8rem;
	}

	.p-box.sz-lg .c-btn {
		margin-top: 4.8rem;
	}

	.p-box h2 {
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.p-box h3 {
		margin-top: 5.6rem;
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.p-box .c-btn {
		width: 32rem;
		height: 7.2rem;
		margin-top: 5.6rem;
		padding: 0 1.6rem 0 2.4rem;
		font-size: 1.8rem;
	}

	.p-breadcrumbs {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-breadcrumbs ol {
		padding-right: 4rem;
		padding-left: 4rem;
	}

	.p-campaign {
		display: grid;
		max-width: 124.8rem;
		margin-top: 2.4rem;
		padding-right: 2.4rem;
		padding-left: 2.4rem;
		grid-template-columns: 1fr 81.6rem;
		gap: 0 4rem;
	}

	.p-kv-foot + .p-campaign {
		margin-top: 4.8rem;
	}

	.p-campaign-banner {
		height: 21.6rem;
	}

	.p-campaign-banner img {
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.p-case {
		margin-top: 11rem;
	}

	.p-case-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-case-inner {
		display: grid;
		align-items: start;
		grid-template-columns: 1fr auto;
		grid-template-areas: 'head   action' 'pickup pickup' 'cats   cats' 'banner banner';
		-webkit-column-gap: 4rem;
		-moz-column-gap: 4rem;
		column-gap: 4rem;
	}

	.p-case .c-heading {
		grid-area: head;
	}

	.p-case-action {
		position: relative;
		top: -0.9rem;
		align-self: self-end;
		margin-top: 0;
		grid-area: action;
		justify-self: end;
	}

	.p-case-action .c-btn {
		width: 32rem;
		height: 7.2rem;
		padding-right: 1.6rem;
		font-size: 1.8rem;
	}

	.p-case-pickup {
		display: flex;
		margin-top: 3rem;
		grid-area: pickup;
		gap: 4rem;
	}

	.p-case-pickup-img {
		border-radius: 1.6rem;
	}

	.p-case-pickup-img {
		flex: 0 0 auto;
		align-self: flex-start;
		width: 57.6%;
	}

	.p-case-pickup-img > img {
		aspect-ratio: 692/432;
	}

	.p-case-pickup-img .logo {
		width: 24rem;
		height: 7.5rem;
		border-top-right-radius: 1.6rem;
	}

	.p-case-pickup-img .logo img {
		max-height: 6.5rem;
	}

	.p-case-pickup-img::before,
  .p-case-pickup-img::after {
		width: 1.6rem;
		height: 1.6rem;
	}

	.p-case-pickup-img::before {
		bottom: 7.5rem;
		-webkit-mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
		mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
	}

	.p-case-pickup-img::after {
		left: 24rem;
		-webkit-mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
		mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
	}

	.p-case-pickup-body {
		flex: 1 1 0;
		min-width: 0;
		margin-top: 0;
	}

	.p-case-pickup-head .title {
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.p-case-pickup-attrs {
		margin-top: 2.4rem;
	}

	.p-case-pickup-attrs.sz-sm {
		margin-top: 1.6rem;
	}

	.p-case-pickup-tags {
		margin-top: 2.4rem;
	}

	.p-case-cats {
		flex-direction: row;
		margin-top: 5.8rem;
		grid-area: cats;
		gap: 1.6rem;
	}

	.p-case-cats > li {
		flex: 1 1 0;
		min-width: 0;
	}

	.p-case-cats .c-link-blog::after {
		right: 0;
	}

	.p-case-banner {
		margin-top: 5.6rem;
		grid-area: banner;
	}

	.p-case-banner .splide__arrow {
		top: 18.75rem;
	}

	.p-case-banner .splide__arrow--prev {
		margin-left: -32.2rem;
	}

	.p-case-banner .splide__arrow--next {
		margin-right: -32.2rem;
	}

	.p-case-banner .splide__pagination {
		margin: 2.2rem 0 0;
	}

	.p-cases-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-cases-inner {
		display: grid;
		align-items: end;
		grid-template-columns: 1fr auto;
		-webkit-column-gap: 3.2rem;
		-moz-column-gap: 3.2rem;
		column-gap: 3.2rem;
	}

	.p-cases-head {
		grid-column: 1;
		grid-row: 1;
	}

	.p-cases-slider {
		grid-column: 1/-1;
		grid-row: 2;
	}

	.p-cases-more {
		margin: 0;
		grid-column: 2;
		grid-row: 1;
	}

	.p-company {
		margin-top: 10.4rem;
	}

	.p-company-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-company-body {
		flex-direction: row;
		align-items: stretch;
		margin-top: 3.2rem;
		gap: 4.8rem;
	}

	.p-company-image {
		flex-shrink: 0;
		width: calc(48rem + max(2.4rem, (100vw - 124.8rem) / 2 + 2.4rem));
		margin-right: 0;
		margin-left: calc(-1 * max(2.4rem, (100vw - 124.8rem) / 2 + 2.4rem));
		border-radius: 0 1.6rem 1.6rem 0;
		aspect-ratio: auto;
	}

	.p-company-list {
		flex: 1 1 0;
		min-width: 0;
	}

	.p-company-item {
		height: 13.2rem;
	}

	.p-company-item-thumb {
		align-self: stretch;
		width: auto;
		height: auto;
		aspect-ratio: 1/1;
	}

	.p-company-item-body {
		padding: 1.6rem 2.4rem 2.4rem;
	}

	.p-company-item-heading .title {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-company-item-desc {
		font-size: 1.6rem;
		font-weight: 600;
		line-height: 1.5;
	}

	.p-contact {
		padding: 0 4rem 4rem;
	}

	.p-contact-inner {
		padding: 5.6rem 4rem;
		gap: 4rem;
	}

	.p-contact-body {
		gap: 4rem;
	}

	.p-contact .c-heading .lead {
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.7;
	}

	.p-contact-main {
		flex-direction: row;
		justify-content: center;
		gap: 3.2rem;
	}

	.p-contact-main .c-btn {
		width: 32rem;
		height: 7.2rem;
		padding: 0 1.6rem 0 2.4rem;
		font-size: 1.8rem;
	}

	.p-contact-cards {
		flex-direction: row;
		justify-content: center;
		gap: 2.4rem;
	}

	.p-contact-card {
		flex: 0 0 auto;
		width: 50rem;
		padding: 2.4rem 3.2rem;
		gap: 2.4rem;
	}

	.p-contact-card-head {
		padding-bottom: 1.4rem;
	}

	.p-contact-card-head .title {
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.p-contact-card-head .c-btn-arrow .c-btn-icon {
		width: 4rem;
		height: 4rem;
	}

	.p-contact-card-head .c-btn-arrow .c-btn-icon::before {
		width: 2.4rem;
		height: 2.4rem;
	}

	.p-contact-card-desc {
		font-size: 1.6rem;
		font-weight: 600;
		line-height: 1.5;
	}

	.l-article-kv + .p-content {
		margin-top: 4rem;
	}

	.p-cta {
		margin-top: 10.4rem;
	}

	.p-cta-banner {
		flex-direction: row;
		justify-content: space-between;
		max-width: 96rem;
		padding: 2.4rem 4rem 3.4rem;
		border-radius: 0.8rem;
		gap: 3.2rem;
		margin-inline: auto;
	}

	.p-cta-title {
		padding: 0.4rem 0 0 0.8rem;
		font-size: 3.2rem;
		line-height: 1.65625;
		text-align: left;
	}

	.p-cta-title span {
		font-size: 4rem;
		line-height: 1.325;
	}

	.p-cta-action {
		gap: 1.3rem;
	}

	.p-cta-action .c-btn {
		width: 32rem;
		height: 7.2rem;
		padding: 0 1.6rem 0 2.4rem;
		font-size: 1.8rem;
	}

	.p-cta-action .c-btn .ico {
		position: relative;
		right: -0.2rem;
	}

	.p-cta-lead {
		margin-top: 1.6rem;
		font-size: 1.6rem;
		line-height: 1.75;
	}

	.p-cta-banner.sz-lead {
		align-items: center;
		max-width: none;
		margin-top: 10.5rem;
		margin-right: auto;
		margin-left: auto;
		text-align: left;
	}

	.p-cta-banner.sz-lead .p-cta-title {
		padding: 0;
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.p-deftable,
  .p-wysiwyg .p-deftable {
		display: grid;
		margin-top: 3.9rem;
		grid-template-columns: 24rem 1fr;
	}

	.p-deftable dt,
  .p-wysiwyg .p-deftable dt {
		padding: 2.4rem 2.4rem 2.3rem 1.6rem;
		border-bottom: 1px solid #176f94;
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.p-deftable dd,
  .p-wysiwyg .p-deftable dd {
		padding: 2.4rem 2.4rem 2.3rem 2.3rem;
		background-color: #fff;
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.p-deftable dd p,
  .p-wysiwyg .p-deftable dd p {
		font-size: 1.8rem;
	}

	.p-deftable dd ul li,
  .p-deftable dd ol li,
  .p-wysiwyg .p-deftable dd ul li,
  .p-wysiwyg .p-deftable dd ol li {
		font-size: 1.8rem;
	}

	.p-deftable dd ul li::before,
  .p-deftable dd ol li::before,
  .p-wysiwyg .p-deftable dd ul li::before,
  .p-wysiwyg .p-deftable dd ol li::before {
		width: 0.6rem;
		height: 0.6rem;
	}

	.l-section-contents.p-diagnosis,
  .p-diagnosis {
		margin-top: 3.5rem;
	}

	.l-section-contents.p-diagnosis-list,
  .p-diagnosis-list {
		gap: 8rem;
	}

	.l-section-contents.p-diagnosis-item,
  .p-diagnosis-item {
		display: grid;
		position: relative;
		grid-template-columns: 44rem 1fr;
		-webkit-column-gap: 12rem;
		-moz-column-gap: 12rem;
		column-gap: 12rem;
	}

	.l-section-contents.p-diagnosis-item:last-child .l-section-contents.p-diagnosis-ctrl .no,
  .l-section-contents.p-diagnosis-item:last-child .p-diagnosis-ctrl .no,
  .p-diagnosis-item:last-child .l-section-contents.p-diagnosis-ctrl .no,
  .p-diagnosis-item:last-child .p-diagnosis-ctrl .no {
		display: none;
	}

	.l-section-contents.p-diagnosis-q,
  .p-diagnosis-q {
		position: relative;
		padding: 3.2rem;
		border-radius: 1.6rem;
	}

	.l-section-contents.p-diagnosis-q .head .line,
  .p-diagnosis-q .head .line {
		width: 3.2rem;
		margin-right: 1.2rem;
	}

	.l-section-contents.p-diagnosis-q .head .num,
  .p-diagnosis-q .head .num {
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.l-section-contents.p-diagnosis-q .head .cat,
  .p-diagnosis-q .head .cat {
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.l-section-contents.p-diagnosis-q .title,
  .l-section-contents.p-diagnosis-a .title,
  .p-diagnosis-q .title,
  .p-diagnosis-a .title {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.l-section-contents.p-diagnosis-a,
  .p-diagnosis-a {
		margin-top: 0;
	}

	.l-section-contents.p-diagnosis-a .body,
  .p-diagnosis-a .body {
		padding: 1.6rem 1.4rem;
	}

	.l-section-contents.p-diagnosis-link,
  .p-diagnosis-link {
		padding: 0 2.3rem;
	}

	.l-section-contents.p-diagnosis-ctrl,
  .p-diagnosis-ctrl {
		position: absolute;
		pointer-events: none;
		inset: 0;
	}

	.l-section-contents.p-diagnosis-ctrl .yes,
  .p-diagnosis-ctrl .yes {
		position: absolute;
		top: calc(50% - 1.9rem);
		left: calc(100% + 6rem);
		justify-content: center;
		width: 5.8rem;
		height: 5.8rem;
		padding-bottom: 0;
		font-size: 2rem;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.l-section-contents.p-diagnosis-ctrl .yes .ico,
  .p-diagnosis-ctrl .yes .ico {
		position: absolute;
		top: calc(100% + 1.2rem);
		left: calc(50% + 0.2rem);
		width: 9.5rem;
		height: 2rem;
		background: no-repeat 50% 50%/contain;
		background-image: url(../img/fig_chart_arrow_yes.png);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.l-section-contents.p-diagnosis-ctrl .no,
  .p-diagnosis-ctrl .no {
		position: absolute;
		top: calc(100% + 1.5rem);
		left: 17rem;
		justify-content: center;
		width: 5rem;
		height: 5rem;
		padding-bottom: 0;
		font-size: 1.8rem;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.l-section-contents.p-diagnosis-ctrl .no .ico,
  .p-diagnosis-ctrl .no .ico {
		position: absolute;
		top: 50%;
		left: calc(100% + 1.5rem);
		width: 2rem;
		height: 5.5rem;
		background: no-repeat 50% 50%/contain;
		background-image: url(../img/fig_chart_arrow_no.png);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.l-section-contents.p-diagnosis-gallery,
  .p-diagnosis-gallery {
		display: grid;
		margin-top: 10rem;
		grid-template-columns: 100rem 1fr;
		gap: 3.2rem;
	}

	.l-section-contents.p-diagnosis-gallery-stage,
  .p-diagnosis-gallery-stage {
		flex: 1 1 0;
		min-width: 0;
	}

	.l-section-contents.p-diagnosis-gallery-main img,
  .p-diagnosis-gallery-main img {
		border-radius: 1.6rem;
		aspect-ratio: 1000/577;
	}

	.l-section-contents.p-diagnosis-gallery-thumbs,
  .p-diagnosis-gallery-thumbs {
		flex: 0 0 16.8rem;
		flex-direction: column;
		margin-top: 0;
		gap: 1.6rem;
	}

	.l-section-contents.p-diagnosis-gallery-thumbs li,
  .p-diagnosis-gallery-thumbs li {
		flex: none;
	}

	.l-section-contents.p-diagnosis-gallery-thumbs a,
  .p-diagnosis-gallery-thumbs a {
		height: auto;
		aspect-ratio: 168/97;
	}

	.p-document-detail {
		margin-bottom: 4rem;
	}

	.p-entry {
		margin-top: 10.4rem;
	}

	.p-entry > h2 {
		font-size: 3.2rem;
	}

	.p-entry {
		max-width: 80rem;
		margin-right: auto;
		margin-left: auto;
	}

	.p-entry-line {
		margin-top: 3.8rem;
		padding: 1.6rem 2.4rem 0.8rem;
		gap: 0;
	}

	.p-entry-line .main {
		justify-content: center;
	}

	.p-entry-line .text {
		padding-bottom: 0.4rem;
		font-size: 3.2rem;
		line-height: 1;
	}

	.p-entry-banners {
		grid-template-columns: repeat(2, 1fr);
	}

	.p-fixed-cta {
		display: none;
	}

	.p-flow-legend {
		margin-bottom: 2.2rem;
		gap: 0.8rem 3.5rem;
	}

	.p-flow-question {
		align-items: flex-start;
		margin-top: 10.5rem;
		margin-bottom: 8rem;
		text-align: left;
	}

	.p-flow-question .label {
		font-size: 1.8rem;
	}

	.p-flow-question .text {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-flow-question .text::before {
		content: '';
		position: absolute;
		top: 50%;
		left: -12rem;
		width: 10.4rem;
		height: 1px;
		background-color: #1a1a1a;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.p-flow-question::after {
		display: none;
	}

	.p-flow-steps::before {
		top: 3.2rem;
		bottom: 3.2rem;
		left: 3.2rem;
	}

	.p-flow-steps-item {
		padding-top: 1rem;
		gap: 1.6rem;
	}

	.p-flow-steps-item:first-child {
		padding-top: 0;
	}

	.p-flow-steps-item .num {
		width: 6.4rem;
		height: 6.4rem;
		font-size: 2.4rem;
	}

	.p-flow-steps-item .body {
		padding-bottom: 3.5rem;
	}

	.p-flow-steps-item .title {
		min-height: 6.4rem;
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-flow-steps-item .desc {
		font-size: 1.8rem;
	}

	.p-flow-table-hint {
		display: none;
	}

	.p-flow-table-pdca td {
		padding: 1.7rem 1.4rem 1.4rem;
	}

	.l-section + .p-gallery-section {
		margin-top: 10.5rem !important;
	}

	.p-gallery-section-body {
		margin-top: 4rem !important;
		padding-right: 0;
		padding-left: 0;
	}

	.p-gallery li {
		flex: 0 0 auto;
		width: 35.1rem;
		height: 23rem;
		aspect-ratio: auto;
	}

  /* --- 固定：中央寄せ横並び（少枚数は中央／折返し可） --- */

	.p-gallery.is-fixed .p-gallery-track {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
	}

  /* --- 自動横流れ：間隔をPC値に --- */

	.p-gallery.is-flow {
		gap: 1rem;
	}

	.p-gallery.is-flow li {
		width: 35.1rem;
		height: 23rem;
		margin-right: 1rem;
	}

	.p-history {
		margin-top: 3.8rem;
	}

	.p-history::before {
		top: 2.4rem;
		left: 15.3rem;
	}

	.p-history-item {
		gap: 4rem;
	}

	.p-history-item .year {
		width: 10.5rem;
	}

	.p-history-item .year .num {
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.p-history-item .year .unit {
		font-size: 2rem;
		line-height: 1.5;
	}

	.p-history-item .dot {
		width: 1.6rem;
		height: 1.6rem;
		margin-top: 1.6rem;
	}

	.p-history-item .body {
		flex-direction: row;
		gap: 3rem;
	}

	.p-history-item .body .month {
		justify-content: flex-end;
		align-items: flex-start;
		width: 4.4rem;
	}

	.p-history-item .body .month .num {
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.p-history-item .body .month .unit {
		top: 0.9rem;
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.p-history-item .body .desc {
		padding: 1rem 0 0;
		font-size: 1.8rem;
		line-height: 1.7;
	}

	.p-content + .p-hsform,
  .p-movie + .p-hsform {
		margin-top: 4.8rem;
	}

	.p-html p {
		font-size: 1.6rem;
		line-height: 1.625;
	}

	.p-html ul li {
		font-size: 1.6rem;
		line-height: 1.625;
	}

	.l-section-contents.p-industry,
  .p-industry {
		margin-top: 5.6rem;
	}

	.l-section-contents.p-industry-heading,
  .p-industry-heading {
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.l-section-contents.p-industry-cards,
  .p-industry-cards {
		margin-top: 3rem;
		margin-right: 0;
		margin-left: 0;
	}

	.l-section-contents.p-industry-cards.splide.is-initialized:not(.is-active) .splide__list,
  .l-section-contents.p-industry-cards .splide__list,
  .p-industry-cards.splide.is-initialized:not(.is-active) .splide__list,
  .p-industry-cards .splide__list {
		display: flex;
		flex-direction: column;
		gap: 2.4rem;
	}

	.l-section-contents.p-industry-cols,
  .p-industry-cols {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.2rem 2.4rem;
	}

	.l-section-contents.p-industry-cols > div,
  .p-industry-cols > div {
		margin-bottom: 1rem;
	}

	.l-section-contents.p-industry-cols > div + div,
  .p-industry-cols > div + div {
		margin-top: 0;
	}

	.p-innerlinks {
		max-width: 120rem;
		padding: 2.4rem 0 1.7rem;
		margin-inline: auto;
	}

	.p-innerlinks ul {
		gap: 4.8rem;
	}

	.p-innerlinks a::before {
		background-size: 1.8rem;
	}

	.p-mv + .p-innerlinks {
		margin-top: 4.2rem;
	}

	.p-knowhow {
		margin-top: 10.2rem;
	}

	.p-knowhow-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-knowhow-inner {
		display: grid;
		align-items: end;
		grid-template-columns: 24rem 1fr;
		-webkit-column-gap: 4rem;
		-moz-column-gap: 4rem;
		column-gap: 4rem;
		grid-template-areas: 'action head' 'body   body';
	}

	.p-knowhow .c-heading {
		grid-area: head;
	}

	.p-knowhow .c-heading .title {
		justify-content: flex-end;
	}

	.p-knowhow-action {
		justify-content: flex-start;
		margin-top: 0;
		grid-area: action;
	}

	.p-knowhow-body {
		display: flex;
		align-items: flex-start;
		margin-top: 4rem;
		grid-area: body;
		gap: 6.8rem;
	}

	.p-knowhow-slider {
		flex: 1 1 0;
		min-width: 0;
	}

	.p-knowhow-slider .splide__track {
		overflow: hidden;
	}

	.p-knowhow-slider .splide__arrow--prev {
		left: -2.2rem;
		margin-left: 0;
	}

	.p-knowhow-slider .splide__arrow--next {
		right: -2.2rem;
		margin-right: 0;
	}

	.p-knowhow-links {
		flex: 0 0 auto;
		width: 24rem;
		margin-top: 0;
	}

	.p-kv {
		padding-top: 3.2rem;
	}

	.p-kv-inner {
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		max-width: 132.8rem;
		padding-right: 2.4rem;
		padding-left: 2.4rem;
		margin-inline: auto;
		gap: 4rem;
	}

	.p-kv-foot {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		max-width: 132.8rem;
		margin-top: 3.2rem;
		padding-right: 2.4rem;
		padding-left: 2.4rem;
		margin-inline: auto;
		gap: 4rem;
	}

	.p-kv-foot-btns {
		display: flex;
		flex-shrink: 0;
		margin: 0.7rem 0 0;
		gap: 1.6rem;
	}

	.p-kv-foot-btns .c-btn {
		width: 27rem;
		height: 7.2rem;
	}

	.p-kv-foot .p-news {
		flex: 1 1 0;
		min-width: 0;
		max-width: 66rem;
	}

	.p-kv-visual {
		flex-shrink: 0;
		width: 64rem;
	}

	.p-kv-visual-slider {
		border-radius: 1.6rem;
		aspect-ratio: 64/60;
	}

	.p-kv-indicator {
		justify-content: flex-end;
	}

	.p-kv-body {
		flex: 1 1 0;
		min-width: 0;
	}

	.p-kv-copy-slider .swiper-slide {
		gap: 1.6rem;
	}

	.p-kv-tag {
		margin: 0;
		margin-left: calc(-1 * max(2.4rem, (100vw - 132.8rem) / 2 + 2.4rem));
		padding-top: 0.2rem;
		padding-right: 1.6rem;
		padding-bottom: 0.4rem;
		padding-left: max(2.4rem, (100vw - 132.8rem) / 2 + 2.4rem);
		border-radius: 0 0.4rem 0.4rem 0;
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.1rem;
	}

	.p-kv-title {
		font-size: 5.2rem;
		line-height: 1.5384615385;
	}

	.p-kv-nav li {
		grid-template-areas: 'heading link' 'desc    link';
		grid-template-columns: 37.6rem 1fr;
		gap: 0.8rem 3.2rem;
	}

	.p-kv-nav .heading {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-kv-scroll {
		display: flex;
		position: absolute;
		z-index: 2;
		top: 60.5rem;
		right: max(1.6rem, (100vw - 144rem) / 2);
		align-items: flex-start;
		pointer-events: none;
		gap: 2.4rem;
	}

	.p-kv-scroll .line {
		position: relative;
		flex-shrink: 0;
		width: 0.2rem;
		height: 16rem;
		background-color: #1a1a1a;
	}

	.p-kv-scroll .line::after {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 1.2rem;
		height: 1.2rem;
		margin-left: -0.6rem;
		border-radius: 999px;
		background-color: #1a1a1a;
		-webkit-animation: kvScrollDot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
		animation: kvScrollDot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
	}

	.p-kv-scroll .text {
		position: relative;
		right: 0.7rem;
		color: #1a1a1a;
		font-family: 'Montserrat', sans-serif;
		font-size: 1.4rem;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.2rem;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		text-orientation: sideways;
	}

	.p-labels {
		gap: 6px 8px;
	}

	.p-list-news li {
		padding: 24px 40px;
		grid-template-columns: auto 144px 1fr;
		gap: 0 32px;
	}

	.p-list-news li time {
		font-size: 1.6rem;
	}

	.p-list-news li .title {
		margin: 0;
		font-size: 1.6rem;
		line-height: 1.625;
	}

	.p-list.gap-wide-pc {
		gap: 40px;
	}

	.p-logos {
		margin: 3.2rem 0 0;
	}

	.l-section-contents.p-mindmap,
  .p-mindmap {
		overflow: visible;
		margin-top: 5.6rem;
		border: 0;
		border-radius: 0;
	}

	.l-section-contents.p-mindmap-tabs ul a,
  .p-mindmap-tabs ul a {
		padding: 1rem 1.6rem;
	}

	.l-section-contents.p-mindmap-tabs ul li.is-active a,
  .p-mindmap-tabs ul li.is-active a {
		padding-bottom: 1.4rem;
	}

	.l-section-contents.p-mindmap-panel,
  .p-mindmap-panel {
		padding: 4.6rem 5.6rem;
		border: 1px solid #1a1a1a;
		border-radius: 0 0 1.6rem 1.6rem;
	}

	.l-section-contents.p-mindmap-bar,
  .p-mindmap-bar {
		display: none;
	}

	.l-section-contents.p-mindmap-body,
  .p-mindmap-body {
		display: block;
		padding: 0;
	}

	.l-section-contents.p-mindmap-chips,
  .p-mindmap-chips {
		margin-bottom: 2.3rem;
	}

	.l-section-contents.p-mindmap-chip,
  .p-mindmap-chip {
		padding: 0.8rem 1.5rem;
	}

	.l-section-contents.p-mindmap-list,
  .p-mindmap-list {
		gap: 1.4rem;
	}

	.l-section-contents.p-mindmap-item,
  .p-mindmap-item {
		padding: 1.6rem 2.4rem;
	}

	.l-section-contents.p-mindmap-item.is-active,
  .p-mindmap-item.is-active {
		padding-bottom: 1.4rem;
	}

	.l-section-contents.p-mindmap-item-bar,
  .p-mindmap-item-bar {
		gap: 1.6rem;
	}

	.l-section-contents.p-mindmap-item-bar .title,
  .p-mindmap-item-bar .title {
		font-size: 2rem;
		line-height: 1.5;
	}

	.l-section-contents.p-mindmap-item-bar .ico,
  .p-mindmap-item-bar .ico {
		right: -0.2rem;
	}

	.l-section-contents.p-mindmap .flow,
  .p-mindmap .flow {
		flex-direction: row;
		align-items: stretch;
		margin-top: 1.2rem;
		gap: 2.9rem;
	}

	.l-section-contents.p-mindmap .flow .box,
  .p-mindmap .flow .box {
		flex: 1;
		padding: 1.6rem;
		gap: 0.8rem;
	}

	.p-content + .p-movie {
		margin-top: 4.8rem;
	}

	.p-mv + .l-section {
		margin-top: 10.4rem;
	}

	.p-mv-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 24rem;
		padding: 0.6rem 2.4rem 0;
		gap: 4rem;
	}

	.p-mv-head {
		position: relative;
		top: -0.8rem;
	}

	.p-mv-head .en {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-mv-head .slash {
		width: 2.2rem;
		height: 3rem;
	}

	.p-mv-head .title {
		font-size: 4rem;
		line-height: 1.5;
	}

	.p-mv-lead {
		flex-shrink: 0;
		width: 60rem;
		margin-top: 0;
		font-size: 1.8rem;
		line-height: 2;
		text-align: right;
	}

	.p-mv.is-illust {
		margin-top: 3.4rem;
	}

	.p-mv.is-illust .p-mv-inner {
		align-items: center;
		padding-top: 0;
		gap: 6.4rem;
	}

	.p-mv.is-illust .p-mv-head {
		top: 0;
		flex: 1;
		min-width: 0;
		gap: 0;
	}

	.p-mv.is-illust .p-mv-lead {
		width: auto;
		margin-top: 2rem;
		text-align: left;
	}

	.p-mv.is-illust .p-mv-visual {
		position: relative;
		top: 3.2rem;
		flex-shrink: 0;
		width: 60rem;
		margin-top: 0;
	}

	.p-mv.is-illust .p-mv-indicator {
		margin-top: 3.2rem;
	}

	.p-mv.is-photo {
		margin-top: 1.8rem;
	}

	.p-mv.is-photo .p-mv-inner {
		min-height: 40rem;
		padding-top: 1.8rem;
		padding-bottom: 0;
	}

	.p-news {
		flex-direction: row;
		align-items: flex-start;
		height: 8rem;
		gap: 1.6rem;
	}

	.p-news .link {
		flex: 1 1 0;
		align-items: flex-start;
		gap: 3.2rem;
	}

	.p-news .title {
		letter-spacing: 0;
	}

	.p-newslist {
		margin-top: 10.4rem;
	}

	.p-newslist-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-newslist-inner {
		display: grid;
		align-items: start;
		grid-template-columns: 1fr 88rem;
		grid-template-rows: auto 1fr;
		grid-template-areas: 'head   items' 'action items';
		row-gap: 3.2rem;
	}

	.p-newslist .c-heading {
		grid-area: head;
	}

	.p-newslist-action {
		justify-content: flex-start;
		margin-top: 0;
		grid-area: action;
	}

	.p-newslist-items {
		margin-top: 0;
		grid-area: items;
	}

	.p-newslist-item:first-child {
		padding-top: 2.5rem;
	}

	.p-newslist-item {
		align-items: flex-start;
		padding-top: 2.5rem;
		padding-bottom: 2.2rem;
	}

	.p-newslist-item-body {
		flex-direction: row;
		align-items: flex-start;
		padding-right: 4rem;
		gap: 1.6rem;
	}

	.p-newslist-item-data .date {
		top: 0.1rem;
	}

	.p-newslist-item-title {
		flex: 1 1 0;
	}

	.p-pdca-bar {
		padding: 1.7rem 2.4rem;
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas: 'q title period ico';
		gap: 1.4rem;
	}

	.p-pdca-bar .q {
		width: 7.2rem;
		padding: 0.8rem 1.2rem;
		font-size: 2.4rem;
		line-height: 1.25;
	}

	.p-pdca-bar .title {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-pdca-bar .period {
		font-size: 1.8rem;
		line-height: 1.1666666667;
	}

	.p-pdca-goal {
		flex-direction: row;
		padding: 1.4rem 2.4rem;
		font-size: 1.8rem;
		font-weight: 400;
		line-height: 1.5;
		white-space: nowrap;
	}

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

	.p-pdca-cell {
		padding: 2.4rem;
		border-right: 1px solid #d1d5db;
	}

	.p-philosophy {
		margin-top: 4rem;
		gap: 4.8rem;
	}

	.p-philosophy-item {
		display: grid;
		align-items: start;
		grid-template-columns: 37rem 1fr;
		gap: 0;
	}

	.p-philosophy-item .num {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-philosophy-item .num::after {
		height: 3rem;
	}

	.p-philosophy-item .en {
		font-size: 4rem;
		line-height: 1.5;
	}

	.p-philosophy-item .sub {
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.p-philosophy-item .desc {
		margin-top: 3.6rem;
		font-size: 1.8rem;
		line-height: 2;
	}

	.p-pickup-slider {
		margin-top: 3rem;
	}

	.p-pickup-slider .splide__arrow {
		top: 11.65rem;
	}

	.p-pickup-slider.sz-lg .splide__arrow {
		top: 18.75rem;
	}

	.p-pickup-slider.sz-lg .splide__arrow--prev {
		left: 50%;
		margin-left: -36.2rem;
	}

	.p-pickup-slider.sz-lg .splide__arrow--next {
		right: 50%;
		margin-right: -36.2rem;
	}

	.p-pickup-slider .splide__arrow--prev {
		left: -2.2rem;
		margin-left: 0;
	}

	.p-pickup-slider .splide__arrow--next {
		right: -2.2rem;
		margin-right: 0;
	}

	.p-pickup-slider .splide__pagination {
		margin: 3rem 0 0;
	}

	.p-pickup .c-card-case .thumb .logo {
		width: 24rem;
		height: 7.5rem;
		border-top-right-radius: 1.6rem;
	}

	.p-pickup .c-card-case .thumb .logo img {
		max-height: 5.5rem;
	}

	.p-pickup .c-card-case .thumb::before {
		bottom: 7.5rem;
		width: 1.6rem;
		height: 1.6rem;
		-webkit-mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
		mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
	}

	.p-pickup .c-card-case .thumb::after {
		left: 24rem;
		width: 1.6rem;
		height: 1.6rem;
		-webkit-mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
		mask: radial-gradient(circle at 100% 0, transparent 1.6rem, #000 1.6rem);
	}

	.p-mv + .l-section:has(.p-points) {
		margin-top: 0.6rem;
	}

	.p-points-block + .p-points-block {
		margin-top: 13.6rem;
	}

	.p-points-head .label {
		font-size: 2rem;
		line-height: 1.5;
	}

	.p-points-head .heading {
		margin-top: 1.2rem;
		font-size: 4rem;
		line-height: 1.5;
		letter-spacing: 0.2rem;
	}

	.p-points-list {
		margin-top: 5.6rem;
	}

	.p-points-card {
		flex-direction: row;
		align-items: flex-start;
		gap: 4.8rem;
	}

	.p-points-card + .p-points-card {
		margin-top: 5.6rem;
	}

	.p-points-card.is-reverse {
		flex-direction: row-reverse;
	}

	.p-points-card .body {
		flex: 1 1 0;
		min-width: 0;
	}

	.p-points-card .num {
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-points-card .num::after {
		height: 3rem;
	}

	.p-points-card .title {
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.p-points-card .desc {
		font-size: 1.8rem;
		line-height: 1.7;
	}

	.p-points-card .c-btn-arrow .c-btn-icon {
		width: 4rem;
		height: 4rem;
	}

	.p-points-card .img {
		width: 56rem;
		border-radius: 1.6rem;
	}

	.p-precedent-heading {
		flex-wrap: nowrap;
		gap: 0.8rem;
	}

	.p-precedent-heading .ja {
		width: auto;
		font-size: 4rem;
		line-height: 1.5;
	}

	.p-precedent-heading .slash {
		width: 2.2rem;
		height: 3rem;
		margin-bottom: 0.8rem;
	}

	.p-precedent-heading .en {
		top: -0.2rem;
		left: -0.2rem;
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-precedent-cards {
		margin-top: 4rem;
		margin-right: 0;
		margin-left: 0;
	}

	.p-precedent-cards.splide.is-initialized:not(.is-active) .splide__list,
  .p-precedent-cards .splide__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3.2rem;
	}

	.p-recruit-follow {
		display: flex;
		position: fixed;
		z-index: 7;
		top: 50%;
		left: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1.6rem 1.2rem;
		border: 1px solid #1a1a1a;
		border-left: 0;
		border-radius: 0 0.8rem 0.8rem 0;
		background-color: #1a1a1a;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		gap: 1.6rem;
	}

	.p-mv + .l-section .p-recruit-tab {
		margin-top: -1rem;
	}

	.p-recruit-tab-panel {
		border-top: 0;
	}

	.p-recruit-tab-bar {
		display: none;
	}

	.p-recruit-tab-body {
		display: block;
	}

	.p-recruit-tab-cards {
		padding: 4.8rem 5.6rem;
		grid-template-columns: repeat(3, 1fr);
		gap: 4rem;
	}

	.p-search-table {
		margin-top: 9.8rem;
	}

	.l-archive-main .p-search-table:first-child {
		margin-top: 0;
	}

	.p-search-table-head {
		min-height: 0;
		padding: 1.6rem 1.2rem;
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 1.5;
	}

	.p-search-table-body {
		display: block;
		padding: 0 0 1.6rem;
	}

	.p-search-table-row {
		display: flex;
		align-items: stretch;
	}

	.p-search-table-row .label {
		flex-shrink: 0;
		justify-content: flex-end;
		width: 25rem;
		min-height: 0;
		padding: 1.6rem 2.4rem;
		font-size: 1.8rem;
	}

	.p-search-table-row .items {
		flex: 1 1 0;
		min-width: 0;
		padding: 1.8rem 2rem 2rem;
	}

	.p-search-table-pill {
		padding: 0.8rem 1.6rem;
	}

	.p-seminar {
		margin-top: 10.1rem;
	}

	.p-seminar-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-seminar-inner {
		display: grid;
		align-items: start;
		grid-template-columns: 1fr auto;
		grid-template-areas: 'head   action' 'body   body';
		-webkit-column-gap: 4rem;
		-moz-column-gap: 4rem;
		column-gap: 4rem;
	}

	.p-seminar .c-heading {
		grid-area: head;
	}

	.p-seminar-action {
		position: relative;
		top: -0.9rem;
		align-self: self-end;
		margin-top: 0;
		grid-area: action;
		justify-self: end;
	}

	.p-seminar-action .c-btn {
		width: 32rem;
		height: 7.2rem;
		padding-right: 1.6rem;
		font-size: 1.8rem;
	}

	.p-seminar-body {
		display: flex;
		margin-top: 3.8rem;
		grid-area: body;
		gap: 4.8rem;
	}

	.p-seminar-stage {
		flex: 0 0 auto;
		width: 57.6%;
	}

	.p-seminar-stage-thumb {
		aspect-ratio: 692/432;
	}

	.p-seminar-stage-title {
		margin-top: 1.2rem;
		font-size: 1.8rem;
	}

	.p-seminar .c-play {
		width: 7.9rem;
		height: 5.5rem;
	}

	.p-seminar-list {
		flex: 1 1 0;
		min-width: 0;
		margin-top: 0;
		gap: 2.4rem;
	}

	.p-seminar-card-thumb {
		width: 17rem;
	}

	.p-seminar-card-body {
		gap: 1.2rem;
	}

	.p-seminar-card-meta {
		justify-content: space-between;
		gap: 0.8rem 1.2rem;
	}

	.p-service-list {
		padding: 4rem;
	}

	.p-service-list-title {
		margin-bottom: 3.2rem;
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.p-service-list-title::after {
		width: 8rem;
	}

	.p-service {
		margin-top: 11.1rem;
	}

	.p-service-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-service-inner {
		display: grid;
		align-items: start;
		grid-template-columns: 41rem 1fr;
		grid-template-rows: -webkit-max-content 1fr;
		grid-template-rows: max-content 1fr;
		grid-template-areas: 'head cats' 'btn  cats';
		-webkit-column-gap: 4rem;
		-moz-column-gap: 4rem;
		column-gap: 4rem;
		row-gap: 4rem;
	}

	.p-service .c-heading {
		gap: 3.3rem;
	}

	.p-service .c-heading {
		grid-area: head;
	}

	.p-service-cats {
		margin-top: 0;
		grid-area: cats;
		gap: 1.4rem;
	}

	.p-service-cat {
		padding: 2.4rem 3.2rem;
	}

	.p-service-cat-head .title {
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.p-service-cat-head .c-btn-icon {
		width: 4rem;
		height: 4rem;
	}

	.p-service-cat-head .c-btn-icon::before {
		width: 2.4rem;
		height: 2.4rem;
	}

	.p-service-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		-webkit-column-gap: 1.6rem;
		-moz-column-gap: 1.6rem;
		column-gap: 1.6rem;
	}

	.p-service-action {
		justify-content: flex-start;
		margin-top: 0;
		grid-area: btn;
	}

	.p-service-action .c-btn {
		width: 32rem;
		height: 7.2rem;
		padding-right: 1.6rem;
		font-size: 1.8rem;
	}

	.l-section .p-services,
  .p-services {
		margin-top: 3.8rem;
	}

	.l-section .p-services-group + .l-section .p-services-group,
  .l-section .p-services-group + .p-services-group,
  .p-services-group + .l-section .p-services-group,
  .p-services-group + .p-services-group {
		margin-top: 7.6rem;
	}

	.l-section .p-services-group > .title,
  .p-services-group > .title {
		font-size: 2.8rem;
		line-height: 1.5;
	}

	.l-section .p-services-main,
  .p-services-main {
		flex-direction: row;
		align-items: flex-start;
		margin-top: 4rem;
		gap: 4.8rem;
	}

	.l-section .p-services-main.is-reverse,
  .p-services-main.is-reverse {
		flex-direction: row-reverse;
	}

	.l-section .p-services-subs + .l-section .p-services-main,
  .l-section .p-services-main + .l-section .p-services-main,
  .l-section .p-services-subs + .p-services-main,
  .l-section .p-services-main + .p-services-main,
  .p-services-subs + .l-section .p-services-main,
  .p-services-main + .l-section .p-services-main,
  .p-services-subs + .p-services-main,
  .p-services-main + .p-services-main {
		margin-top: 5.6rem;
	}

	.l-section .p-services-main-body,
  .p-services-main-body {
		flex: 1;
		align-items: flex-start;
		gap: 2.4rem;
	}

	.l-section .p-services-main-body .name,
  .p-services-main-body .name {
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.l-section .p-services-main-body .c-btn,
  .p-services-main-body .c-btn {
		width: 32rem;
		height: 7.2rem;
		font-size: 1.8rem;
	}

	.l-section .p-services-main-body .c-btn .ico,
  .p-services-main-body .c-btn .ico {
		right: -1rem;
	}

	.l-section .p-services-main-illust,
  .p-services-main-illust {
		width: 56rem;
		border-radius: 1.6rem;
	}

	.l-section .p-services-subs,
  .p-services-subs {
		flex-direction: row;
		margin-top: 4rem;
		padding-bottom: 5.6rem;
		gap: 4rem;
	}

	.l-section .p-services-subs > li,
  .p-services-subs > li {
		flex: 1;
	}

	.p-content.p-wysiwyg.u-downlevel-2.p-sitemap .mt-be-columns {
		gap: 4.8rem;
	}

	.l-section:has(.p-solve) {
		margin-bottom: 9.6rem;
	}

	.p-solve {
		padding: 4.8rem 4rem;
	}

	.p-solve-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 120rem;
		gap: 2rem;
		margin-inline: auto;
	}

	.p-solve-head .title {
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.p-solve-head .c-btn {
		width: 32rem;
		height: 7.2rem;
		margin-top: 3.2rem;
		padding: 0 1.6rem 0 2.4rem;
		font-size: 1.8rem;
	}

	.p-solve-list {
		margin-top: 0;
		gap: 1.6rem;
	}

	.p-solve-list li {
		padding-left: 4rem;
		font-size: 2rem;
	}

	.p-solve-list li::before {
		width: 2.8rem;
		height: 2.8rem;
	}

	.p-solve-list li::after {
		top: calc(50% - 0.6rem);
		left: 1rem;
	}

	.l-section-contents.p-stats,
  .p-stats {
		margin-top: 4rem;
		grid-template-columns: repeat(4, 1fr);
		gap: 6.9rem 3.2rem;
	}

	.l-section-contents.p-stats-item,
  .p-stats-item {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		gap: 0;
	}

	.l-section-contents.p-stats-item .label,
  .p-stats-item .label {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1.6rem 0;
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.l-section-contents.p-stats-item .desc,
  .p-stats-item .desc {
		margin: -0.1rem 0 0;
	}

	.p-strength {
		margin-top: 8.6rem;
	}

	.p-strength-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-strength .c-heading {
		gap: 2rem;
	}

	.p-strength-list {
		margin-top: 3.6rem;
		gap: 5.7rem;
	}

	.p-strength-panel {
		flex-direction: row;
		align-items: flex-start;
		gap: 4.8rem;
	}

	.p-strength-media {
		display: flex;
		flex-shrink: 0;
		flex-direction: column;
		align-items: center;
		width: calc(48rem + max(2.4rem, (100vw - 124.8rem) / 2 + 2.4rem));
		margin-left: calc(-1 * max(2.4rem, (100vw - 124.8rem) / 2 + 2.4rem));
		gap: 3.2rem;
	}

	.p-strength-slider {
		border-radius: 0 1.6rem 1.6rem 0;
		aspect-ratio: 600/500;
	}

	.p-strength-indicator {
		margin-top: 0;
	}

	.p-strength-body {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		min-width: 0;
		gap: 3.6rem;
	}

	.p-strength-bodyhead {
		gap: 1.2rem;
	}

	.p-strength-bodyhead .label {
		font-size: 2rem;
		line-height: 1.5;
	}

	.p-strength-bodyhead .heading {
		font-size: 4rem;
		line-height: 1.5;
		letter-spacing: 0.2rem;
	}

	.p-strength-points {
		margin-top: 0;
	}

	.p-strength-points.splide.is-initialized:not(.is-active) .splide__list,
  .p-strength-points .splide__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.7rem 3.2rem;
	}

	.p-strength-points .num {
		font-size: 2rem;
	}

	.p-strength-points .pt-heading {
		margin-top: 0.9rem;
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.p-strength-points .desc {
		margin-top: 1.2rem;
		font-size: 1.6rem;
		font-weight: 600;
		line-height: 1.7;
	}

	.p-strength-points .splide__slide {
		padding-right: 0;
		border-right: 0;
	}

	.p-strength-list > .p-strength-panel:nth-child(2) {
		flex-direction: row-reverse;
	}

	.p-strength-list > .p-strength-panel:nth-child(2) .p-strength-media {
		margin-right: calc(-1 * max(2.4rem, (100vw - 124.8rem) / 2 + 2.4rem));
		margin-left: 0;
	}

	.p-strength-list > .p-strength-panel:nth-child(2) .p-strength-slider {
		border-radius: 1.6rem 0 0 1.6rem;
	}

	.p-strength-list > .p-strength-panel:nth-child(3) .p-strength-media {
		width: 48rem;
		margin-left: 0;
	}

	.p-strength-list > .p-strength-panel:nth-child(3) .p-strength-slider {
		border-radius: 1.6rem;
		aspect-ratio: 480/320;
	}

	.p-strength-action {
		margin-top: 5.6rem;
	}

	.p-strength-action .c-btn {
		width: 32rem;
		height: 7.2rem;
		padding-right: 1.6rem;
		font-size: 1.8rem;
	}

	.p-tags {
		gap: 6px 16px;
	}

	.p-tools {
		margin-top: 3.7rem;
	}

	.p-tools-item {
		flex-direction: row;
		align-items: center;
		padding: 3.2rem;
		border-radius: 1.6rem;
		gap: 3.2rem;
	}

	.p-tools-item .logo {
		width: 32rem;
	}

	.p-tools-item .body {
		flex: 1 1 0;
		min-width: 0;
		gap: 2rem;
	}

	.p-tools-item .name {
		padding-bottom: 1.6rem;
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.p-tools-item .text {
		gap: 1.6rem;
	}

	.p-tools-item .catch {
		font-size: 2.8rem;
		line-height: 1.2857142857;
		text-align: left;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h2:not([class]),
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h2[class^=u-],
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h2[class*=' u-'] {
		margin: 5.6rem 0 2.4rem;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3:not([class]),
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class^=u-],
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class*=' u-'] {
		padding-bottom: 1.6rem;
		font-size: 2.8rem;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3:not([class])::after,
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class^=u-]::after,
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class*=' u-']::after {
		width: 8rem;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3:not([class]),
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class^=u-],
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h3[class*=' u-'] {
		margin: 4rem 0 2.4rem;
		font-size: 2.4rem;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h4:not([class]),
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h4[class^=u-],
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h4[class*=' u-'] {
		margin: 4rem 0 2.4rem;
		padding: 0.8rem 2rem;
		font-size: 2.4rem;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5:not([class])::before,
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class^=u-]::before,
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class*=' u-']::before {
		top: 0.2em;
		height: 1.4em;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5:not([class]),
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class^=u-],
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h5[class*=' u-'] {
		margin: 3.7rem 0 1.6rem;
		padding: 0.4rem 0 0 1.8rem;
		font-size: 2rem;
	}

	.p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h6:not([class]),
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h6[class^=u-],
  .p-wysiwyg:not(.u-downlevel):not(.u-downlevel-2) h6[class*=' u-'] {
		margin: 4rem 0 1.6rem;
	}

	.p-wysiwyg.u-downlevel h2:not([class]),
  .p-wysiwyg.u-downlevel h2[class^=u-],
  .p-wysiwyg.u-downlevel h2[class*=' u-'] {
		padding-bottom: 1.6rem;
		font-size: 2.8rem;
	}

	.p-wysiwyg.u-downlevel h2:not([class])::after,
  .p-wysiwyg.u-downlevel h2[class^=u-]::after,
  .p-wysiwyg.u-downlevel h2[class*=' u-']::after {
		width: 8rem;
	}

	.p-wysiwyg.u-downlevel h2:not([class]),
  .p-wysiwyg.u-downlevel h2[class^=u-],
  .p-wysiwyg.u-downlevel h2[class*=' u-'] {
		margin: 4rem 0 2.4rem;
		font-size: 2.4rem;
	}

	.p-wysiwyg.u-downlevel h3:not([class]),
  .p-wysiwyg.u-downlevel h3[class^=u-],
  .p-wysiwyg.u-downlevel h3[class*=' u-'] {
		margin: 4rem 0 2.4rem;
		padding: 0.8rem 2rem;
		font-size: 2.4rem;
	}

	.p-wysiwyg.u-downlevel h4:not([class])::before,
  .p-wysiwyg.u-downlevel h4[class^=u-]::before,
  .p-wysiwyg.u-downlevel h4[class*=' u-']::before {
		top: 0.2em;
		height: 1.4em;
	}

	.p-wysiwyg.u-downlevel h4:not([class]),
  .p-wysiwyg.u-downlevel h4[class^=u-],
  .p-wysiwyg.u-downlevel h4[class*=' u-'] {
		margin: 3.7rem 0 1.6rem;
		padding: 0.4rem 0 0 1.8rem;
		font-size: 2rem;
	}

	.p-wysiwyg.u-downlevel h5:not([class]),
  .p-wysiwyg.u-downlevel h5[class^=u-],
  .p-wysiwyg.u-downlevel h5[class*=' u-'] {
		margin: 4rem 0 1.6rem;
	}

	.p-wysiwyg.u-downlevel h6:not([class]),
  .p-wysiwyg.u-downlevel h6[class^=u-],
  .p-wysiwyg.u-downlevel h6[class*=' u-'] {
		margin: 4rem 0 1.6rem;
	}

	.p-wysiwyg.u-downlevel-2 h2:not([class]),
  .p-wysiwyg.u-downlevel-2 h2[class^=u-],
  .p-wysiwyg.u-downlevel-2 h2[class*=' u-'] {
		margin: 4rem 0 2.4rem;
		padding: 0.8rem 2rem;
		font-size: 2.4rem;
	}

	.p-wysiwyg.u-downlevel-2 h3:not([class])::before,
  .p-wysiwyg.u-downlevel-2 h3[class^=u-]::before,
  .p-wysiwyg.u-downlevel-2 h3[class*=' u-']::before {
		top: 0.2em;
		height: 1.4em;
	}

	.p-wysiwyg.u-downlevel-2 h3:not([class]),
  .p-wysiwyg.u-downlevel-2 h3[class^=u-],
  .p-wysiwyg.u-downlevel-2 h3[class*=' u-'] {
		margin: 3.7rem 0 1.6rem;
		padding: 0.4rem 0 0 1.8rem;
		font-size: 2rem;
	}

	.p-wysiwyg.u-downlevel-2 h4:not([class]),
  .p-wysiwyg.u-downlevel-2 h4[class^=u-],
  .p-wysiwyg.u-downlevel-2 h4[class*=' u-'] {
		margin: 4rem 0 1.6rem;
	}

	.p-wysiwyg.u-downlevel-2 h5:not([class]),
  .p-wysiwyg.u-downlevel-2 h5[class^=u-],
  .p-wysiwyg.u-downlevel-2 h5[class*=' u-'] {
		margin: 4rem 0 1.6rem;
	}

	.p-wysiwyg.u-downlevel-2 h6:not([class]),
  .p-wysiwyg.u-downlevel-2 h6[class^=u-],
  .p-wysiwyg.u-downlevel-2 h6[class*=' u-'] {
		margin: 4rem 0 1.6rem;
	}

	.p-wysiwyg p:not([class]),
  .p-wysiwyg p[class^=u-],
  .p-wysiwyg p[class*=' u-'] {
		margin: 1em 0;
	}

	.p-wysiwyg .mt-be-columns {
		margin-top: 5.6rem;
	}

	.p-wysiwyg .mt-be-columns.is-mediatext {
		align-items: flex-start;
		gap: 4rem;
	}

	.p-wysiwyg .mt-be-columns.is-mediatext.is-reverse {
		flex-direction: row-reverse;
	}

	.p-wysiwyg .mt-be-columns.is-mediatext.sz-46 > .mt-be-column:first-child {
		flex: 0 0 40%;
	}

	.p-wysiwyg .mt-be-columns.is-mediatext.sz-46 > .mt-be-column:last-child {
		flex: 0 0 calc(60% - 4rem);
	}

	.p-wysiwyg .mt-be-columns.is-mediatext.sz-64 > .mt-be-column:first-child {
		flex: 0 0 calc(60% - 4rem);
	}

	.p-wysiwyg .mt-be-columns.is-mediatext.sz-64 > .mt-be-column:last-child {
		flex: 0 0 40%;
	}

	.p-youtube {
		margin-top: 10.4rem;
	}

	.p-youtube-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.p-youtube-inner {
		display: grid;
		align-items: end;
		grid-template-columns: 1fr auto;
		-webkit-column-gap: 4rem;
		-moz-column-gap: 4rem;
		column-gap: 4rem;
		grid-template-areas: 'head   action' 'body   body';
	}

	.p-youtube .c-heading {
		grid-area: head;
	}

	.p-youtube-action {
		justify-content: flex-end;
		margin-top: 0;
		grid-area: action;
	}

	.p-youtube-list {
		flex-direction: row;
		margin-top: 4rem;
		grid-area: body;
		gap: 4rem;
	}

	.p-youtube-card {
		flex: 1 1 0;
		min-width: 0;
	}

	.p-youtube-card-thumb {
		aspect-ratio: 373/233;
	}

	.js-refine.is-no-results::after {
		font-size: 1.8rem;
	}

	.p-wysiwyg .js-highlight.syntax-highlight {
		margin: 32px 0;
	}

	.l-action {
		margin-top: 4.8rem;
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.l-archive-grid {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.l-archive.has-side .l-archive-grid {
		display: grid;
		align-items: start;
		grid-template-columns: minmax(0, 1fr) 32rem;
		-webkit-column-gap: 9.4rem;
		-moz-column-gap: 9.4rem;
		column-gap: 9.4rem;
	}

	.l-archive-head .title {
		font-size: 2.8rem;
	}

	.l-archive-main .c-filter {
		padding: 2rem;
	}

	.l-archive-result {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 8.6rem;
		padding-bottom: 1.2rem;
		gap: 1.6rem;
	}

	.l-archive-result .range {
		top: -0.2rem;
		margin: 0;
	}

	.l-archive-list {
		margin-top: 3.2rem;
		grid-template-columns: repeat(2, 1fr);
		gap: 4rem;
	}

	.l-archive-list .c-card-blog-meta .c-badge {
		position: relative;
		top: -0.2rem;
	}

	.l-archive-list .c-card-blog-title {
		margin-top: 1rem;
	}

	.l-archive-list.sz-3col {
		grid-template-columns: repeat(3, 1fr);
		gap: 5.6rem 3.8rem;
	}

	.l-archive .c-pagination {
		margin-top: 5.6rem;
	}

	.l-archive-side {
		margin-top: 0;
	}

	.l-article {
		margin-top: 6.2rem;
	}

	.l-article.sz-narrow {
		margin-top: 4.2rem;
	}

	.l-article.sz-narrow .l-article-main {
		max-width: 104rem;
		margin-right: auto;
		margin-left: auto;
	}

	.l-article.sz-narrow .p-innerlinks + .l-article-grid {
		margin-top: 8rem;
	}

	.l-article.sz-narrow .p-wysiwyg h2:not([class]):not(:first-child) {
		margin-top: 10.4rem;
	}

	.l-article.has-side .l-article-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 32rem;
		-webkit-column-gap: 9.4rem;
		-moz-column-gap: 9.4rem;
		column-gap: 9.4rem;
		row-gap: 2.4rem;
		grid-template-areas: 'head .' 'body side';
	}

	.l-article-header {
		grid-area: head;
	}

	.l-article-meta {
		align-items: center;
		margin-top: 2.4rem;
		padding: 0;
		gap: 1.6rem;
	}

	.l-article-meta .dates {
		flex: 0 1 auto;
		gap: 2.4rem;
	}

	.l-article-meta .date {
		gap: 0.8rem;
	}

	.l-article-meta .date.editor {
		position: relative;
		top: -0.3rem;
	}

	.l-article-meta .date.editor img {
		top: 0.2rem;
	}

	.l-article-tags {
		margin-top: 0;
		margin-bottom: 4rem;
	}

	.l-article-case,
  .l-article-seminar {
		margin-top: 0;
		margin-bottom: 4rem;
	}

	.l-article-main {
		grid-area: body;
	}

	.l-article:not(.has-side) .l-article-main {
		margin-top: 2.4rem;
	}

	.l-article-side {
		margin-top: 0;
		grid-area: side;
	}

	.l-contents {
		padding: 0 0 10.4rem;
	}

	.l-cookie-inner {
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		max-width: 132.8rem;
		padding-right: 2.4rem;
		padding-left: 2.4rem;
		margin-inline: auto;
		gap: 2.4rem;
	}

	.l-cookie-text {
		font-size: 1.6rem;
		font-weight: 600;
		line-height: 1.5;
	}

	.l-cookie .js-cookie-accept {
		flex-shrink: 0;
		width: 16rem;
	}

	.l-document {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.l-document-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 3.8rem 4rem;
	}

	.l-fill {
		margin: 48px -40px 0;
		padding: 40px 0;
	}

	.l-fill {
		margin: 48px calc((100vw - 100% - var(--scrollbar-width)) / 2 * -1) 0;
	}

	.l-fill.p-wide {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.l-fill.p-wide hr {
		margin-top: 64px;
		margin-bottom: 64px;
	}

	.l-fill-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 40px;
	}

	.l-fill-inner .title {
		flex-direction: row;
		justify-content: center;
		font-size: 2.8rem;
		gap: 16px;
	}

	.l-fill-inner .title .c-icon {
		width: 38px;
		height: 38px;
	}

	.l-fill hr {
		margin: 32px 0;
	}

	.l-fill-contents .c-note {
		margin: 12px 0 0;
		font-size: 1.4rem;
	}

	.l-footcontens {
		margin-top: 120px;
		margin-bottom: -120px;
	}

	.l-footer {
		border-top: none;
	}

	.l-footer-inner {
		display: grid;
		width: 100%;
		max-width: 132.8rem;
		padding-top: 5.6rem;
		padding-right: 2.4rem;
		padding-bottom: 4rem;
		padding-left: 2.4rem;
		grid-template-columns: 1fr auto;
		grid-template-areas: 'company sns' 'nav     banners' 'logos   logos';
		margin-inline: auto;
		gap: 3.2rem 4rem;
	}

	.l-footer-company {
		display: contents;
	}

	.l-footer-company .info {
		grid-area: company;
	}

	.l-footer-company .info .logo {
		width: 19.5rem;
		margin: 0 0 1.6rem;
	}

	.l-footer-company .info .meta {
		flex-direction: row;
		white-space: nowrap;
		gap: 1.2rem;
	}

	.l-footer .p-list-sns {
		align-self: start;
		width: auto;
		height: 10rem;
		margin: 3px 0 0;
		padding: 3.2rem 2.8rem;
		grid-area: sns;
		justify-self: end;
		gap: 1.9rem;
	}

	.l-footer .p-list-sns img {
		width: 3.2rem;
		height: 3.2rem;
	}

	.l-footer-nav {
		display: flex;
		grid-area: nav;
		gap: 3.2rem;
	}

	.l-footer-nav-col {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		gap: 2rem;
	}

	.l-footer-nav-home {
		display: none;
	}

	.l-footer-nav-block > a {
		padding: 0 0 0.8rem;
		transition: opacity 0.2s ease;
	}

	.l-footer-nav-block > a::before {
		content: '';
		flex-shrink: 0;
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
		background-color: #fff;
	}

	.l-footer-nav-toggle {
		display: none;
	}

	.l-footer-nav-child ul {
		padding: 0;
	}

	.l-footer-nav-child {
		display: block;
		margin-top: 0.4rem;
	}

	.l-footer-nav-child li a {
		padding: 0.4rem 0;
		transition: opacity 0.2s ease;
	}

	.l-footer-logos {
		justify-content: start;
		grid-area: logos;
		gap: 3.2rem;
	}

	.l-footer-logos li {
		min-width: 10rem;
		height: 10rem;
	}

	.l-footer-banners {
		width: 29.2rem;
		grid-area: banners;
		justify-self: end;
	}

	.l-footer-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 2.2rem;
		padding-right: max(2.4rem, (100% - 132.8rem) / 2 + 2.4rem);
		padding-bottom: 2.2rem;
		padding-left: max(2.4rem, (100% - 132.8rem) / 2 + 2.4rem);
		border-top: 1px solid #d1d5db;
	}

	.l-header {
		padding: 0 2.4rem;
	}

	.l-header-contact-sp {
		display: none;
	}

	.l-links {
		margin: 48px 0 0;
	}

	.l-links.m-narrow {
		margin: 32px 0 0;
	}

	.l-links.al-left {
		align-items: flex-start;
	}

	.l-section-contents > .l-morelink:first-child {
		margin-top: -1em;
	}

	.l-section {
		margin-top: 8rem;
	}

	.l-section#mindmap,
  .l-section#stats,
  .l-section#philosophy,
  .l-section#access,
  .l-section#history {
		margin-top: 10.5rem;
	}

	.l-section + .l-section {
		margin-top: 6rem;
	}

	.p-mv + .l-section:has(.p-content),
  .p-mv + .l-section:has(.p-box) {
		margin-top: 4.4rem;
	}

	.p-mv.sz-narrow + .l-section:has(.p-box),
  .p-mv.sz-narrow + .l-section:has(.p-content) {
		margin-top: 0;
	}

	.l-section.m-narrow {
		margin-top: 4rem;
	}

	.l-section.m-middle {
		margin-top: 6.4rem;
	}

	.l-section-inner {
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.l-section-contents {
		margin-top: 4.8rem;
	}

	.l-section-contents .m-narrow {
		margin-top: 2.4rem;
	}

	.l-section-contents-inner {
		margin-top: 4rem;
	}

	.l-section-contents-inner.m-wide {
		margin-top: 6.4rem;
	}

	.u-hide-pc {
		display: none !important;
	}

	.u-jc-start-pc {
		justify-content: flex-start !important;
	}

	.u-jc-center-pc {
		justify-content: center !important;
	}

	.u-jc-end-pc {
		justify-content: flex-end !important;
	}

	.u-ai-start-pc {
		align-items: flex-start !important;
	}

	.u-ai-center-pc {
		align-items: center !important;
	}

	.u-ai-end-pc {
		align-items: flex-end !important;
	}

	.u-mt-0-pc {
		margin-top: 0 !important;
	}

	.u-mt-4-pc {
		margin-top: 4px !important;
	}

	.u-mt-8-pc {
		margin-top: 8px !important;
	}

	.u-al-center-pc {
		text-align: center !important;
	}

	.u-al-right-pc {
		text-align: right !important;
	}

	.u-al-justify-pc {
		text-align: justify !important;
	}
}

@media screen and (min-width: 768px) and (hover: hover) {
	.l-footer-nav-block > a:hover {
		opacity: 0.7;
	}

	.l-footer-nav-child li a:hover {
		opacity: 0.7;
	}
}

@media screen and (min-width: 1024px) {
	:root {
		--header-height: 8rem;
	}

	.l-header {
		height: 8rem;
	}

	.l-header-inner {
		display: flex;
		position: relative;
		top: 2px;
		overflow: visible;
		justify-content: center;
		height: auto;
		margin: 0 auto;
		padding: 0;
		background-color: transparent;
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}

	.l-header-nav > ul {
		display: flex;
		position: relative;
		top: -0.2rem;
		align-items: center;
		border-top: none;
		gap: 0 2.8rem;
	}

	.l-header-nav > ul > li {
		border-bottom: none;
	}

	.l-header-nav > ul > li > a {
		display: flex;
		position: relative;
		align-items: center;
		padding: 2.8rem 0;
		color: #1a1a1a;
		line-height: 1.5;
	}

	.l-header-nav > ul > li > a::before {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 3px;
		background-color: #176f94;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.l-header-nav > ul > li.is-current > a::before {
		opacity: 1;
	}

	.l-header-nav > ul > li.has-child > a .ico {
		display: block;
		position: relative;
		width: 1.2rem;
		height: 1.2rem;
		margin: 0 0 0 0.8rem;
	}

	.l-header-nav > ul > li.has-child > a .ico::before,
  .l-header-nav > ul > li.has-child > a .ico::after {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #5c5c66;
	}

	.l-header-nav > ul > li.has-child > a .ico::after {
		transition: -webkit-transform 0.2s ease;
		transition: transform 0.2s ease;
		transition: transform 0.2s ease, -webkit-transform 0.2s ease;
		-webkit-transform: rotateZ(-90deg);
		transform: rotateZ(-90deg);
	}

	.l-header-nav > ul > li.has-child:hover > a::before,
  .l-header-nav > ul > li.has-child:focus-within > a::before {
		opacity: 1;
	}

	.l-header-nav > ul > li.has-child:hover > a .ico::after,
  .l-header-nav > ul > li.has-child:focus-within > a .ico::after {
		-webkit-transform: rotateZ(0);
		transform: rotateZ(0);
	}

	.l-header-nav-toggle {
		display: none;
	}

	.l-header-nav-child {
		display: block;
		visibility: hidden;
		position: fixed;
		z-index: 1;
		top: 8rem;
		left: 0;
		width: 100%;
		opacity: 0;
		transition: opacity 0.2s ease, visibility 0.2s, -webkit-transform 0.2s ease;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, -webkit-transform 0.2s ease;
		-webkit-transform: translateY(0.8rem);
		transform: translateY(0.8rem);
		grid-template-rows: none;
    /* スクリム（l-main 上に薄黒 = Rectangle4453 #1A1A1A 70%） */;
	}

	.l-header-nav-child > div {
		overflow: visible;
	}

	.l-header-nav-child::before {
		content: '';
		position: fixed;
		z-index: -1;
		top: 8rem;
		left: 0;
		width: 100%;
		height: calc(100vh - 8rem);
		height: calc(100dvh - 8rem);
		background-color: rgba(26, 26, 26, 0.7);
		pointer-events: none;
	}

	.has-child:hover > .l-header-nav-child,
  .has-child:focus-within > .l-header-nav-child {
		visibility: visible;
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.l-header-mega {
		width: 100%;
		padding: 4.8rem 0 5.6rem;
		border-top: none;
		background-color: #fff;
	}

	.l-header-mega-body {
		display: block;
		width: 100%;
		max-width: 120rem;
		margin: 0 auto;
		padding: 0 2.4rem;
	}

	.l-header-mega-head {
		align-items: flex-end;
		padding-bottom: 1.6rem;
		border-bottom: 1px solid #9ca3af;
		gap: 4rem;
	}

	.l-header-mega-title {
		color: #1a1a1a;
		font-size: 2.8rem;
		font-weight: 700;
		line-height: 1.5;
	}

	.l-header .c-btn-arrow {
		color: #1a1a1a;
	}

	.l-header .c-btn-arrow .label {
		display: inline;
	}

	.l-header .c-btn-arrow .c-btn-icon {
		width: 4rem;
		height: 4rem;
		border-color: #1a1a1a;
		background-color: #1a1a1a;
	}

	.l-header .c-btn-arrow .c-btn-icon::before {
		width: 1.8rem;
		height: 1.8rem;
		-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	}

	.l-header-mega-cols {
		flex-direction: row;
		margin-top: 3.2rem;
		gap: 4.8rem;
	}

	.l-header-mega-col {
		flex: 1 1 0;
		min-width: 0;
		gap: 2.4rem;
	}

	.l-header-mega-cat {
		justify-content: space-between;
		padding-bottom: 1.6rem;
		border-bottom: 1px solid #d1d5db;
		gap: 1.6rem;
	}

	.l-header-mega-cat .cat {
		color: #1a1a1a;
		font-size: 2.4rem;
		line-height: 1.5;
	}

	.l-header-mega-cat .c-btn-icon {
		width: 4rem;
		height: 4rem;
		border-color: #1a1a1a;
	}

	.l-header-mega-cat .c-btn-icon::before {
		width: 1.8rem;
		height: 1.8rem;
		-webkit-filter: brightness(0);
		filter: brightness(0);
	}

	.l-header-mega-links {
		align-items: flex-start;
		margin-top: 0;
		gap: 1.6rem;
	}

	.l-header-mega-links .c-btn-secondary {
		color: #1a1a1a;
		font-size: 1.6rem;
		line-height: 1.5;
	}

	.l-header-mega-links .c-btn-secondary .ico {
		width: 2.8rem;
		height: 2.8rem;
		border: 1px solid #9ca3af;
		background: no-repeat 50% 50%/1.4rem;
		background-image: url(../img/ico_arrow_right.png);
		-webkit-filter: brightness(0);
		filter: brightness(0);
	}

	.l-header-nav-home {
		display: none;
	}

	.l-header-drawer-foot {
		display: none;
	}

	.l-header-cta {
		display: flex;
		position: relative;
		z-index: 2;
		flex-shrink: 0;
		align-items: center;
		gap: 1.2rem;
	}

	.l-header-cta .c-btn {
		min-width: 12rem;
	}

	.l-header-hamburger {
		display: none;
	}

	.is-menu-open .l-header {
		border-bottom-color: #e4e5ea;
		background-color: #fff;
	}

	.is-menu-open .l-header-logo .is-dark {
		display: block;
	}

	.is-menu-open .l-header-logo .is-white {
		display: none;
	}
}

@media screen and (min-width: 1024px) and (hover: hover) {
	.l-header-nav > ul > li:hover > a::before {
		opacity: 1;
	}

	.l-header-mega-cat:hover .c-btn-icon::before {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}
}

@media screen and (min-width: 1440px) {
	.p-company-image {
		width: 60rem;
		margin-left: -12rem;
		border-radius: 1.6rem;
	}

	.p-kv-tag {
		margin-left: 0;
		padding-left: 0;
		border-radius: 0.4rem;
	}

	.p-strength-media {
		width: 60rem;
		margin-left: -12rem;
	}

	.p-strength-slider {
		border-radius: 1.6rem;
	}

	.p-strength-list > .p-strength-panel:nth-child(2) .p-strength-media {
		margin-right: -12rem;
	}

	.p-strength-list > .p-strength-panel:nth-child(2) .p-strength-slider {
		border-radius: 1.6rem;
	}

	.p-strength-list > .p-strength-panel:nth-child(3) .p-strength-media {
		width: 48rem;
		margin-left: 0;
	}
}

@media screen and (max-width: 767px) {
	html {
		font-size: 2.6666666667vw;
	}

	.p-col.sp-col-2 .c-label {
		min-height: 24px;
		padding: 0 14px;
	}

	.p-cta-label span:not([area-hidden=true]) {
		position: relative;
		top: 0.2rem;
	}

	.p-cta-banner.sz-lead {
		padding-top: 2.4rem;
		padding-bottom: 3.4rem;
	}

	.p-cta-banner.sz-lead .p-cta-lead {
		font-size: 1.6rem;
		line-height: 1.7;
	}

	.p-cta-banner.sz-lead .p-cta-action {
		margin-top: 0.4rem;
	}

	.p-cta-banner.sz-lead .p-cta-action {
		margin-top: 0.2rem;
	}

	.l-section-contents.p-diagnosis-item,
  .p-diagnosis-item {
		display: none;
	}

	.l-section-contents.p-diagnosis-item.is-open,
  .p-diagnosis-item.is-open {
		display: block;
	}

	.l-section-contents.p-diagnosis-a,
  .p-diagnosis-a {
		display: none;
	}

	.l-section-contents.p-diagnosis-item.is-answered .l-section-contents.p-diagnosis-a,
  .l-section-contents.p-diagnosis-item.is-answered .p-diagnosis-a,
  .p-diagnosis-item.is-answered .l-section-contents.p-diagnosis-a,
  .p-diagnosis-item.is-answered .p-diagnosis-a {
		display: flex;
	}

	.l-section-contents.p-diagnosis-ctrl,
  .p-diagnosis-ctrl {
		display: flex;
		justify-content: center;
		margin-top: 0.3rem;
		gap: 3.2rem;
	}

	.l-section-contents.p-diagnosis-ctrl .ico,
  .p-diagnosis-ctrl .ico {
		width: 1.8rem;
		height: 1.8rem;
		background: no-repeat 50% 50%/contain;
		background-image: url(../img/ico_arrow_down.png);
	}

	.l-section-contents.p-diagnosis-ctrl .no .ico,
  .p-diagnosis-ctrl .no .ico {
		-webkit-filter: brightness(0);
		filter: brightness(0);
	}

	.l-section-contents.p-diagnosis-ctrl .yes .ico,
  .p-diagnosis-ctrl .yes .ico {
		-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	}

	.is-home .l-wrapper {
		padding-bottom: calc(5.6rem + env(safe-area-inset-bottom));
	}

	.p-history-item .body .month {
		padding: 0.4rem 0 0;
	}

	.l-section-contents.p-industry-card,
  .p-industry-card {
		height: 100%;
	}

	.p-list-news li .title {
		grid-area: 2/1/3/3;
	}

	.l-section-contents.p-mindmap-panel,
  .p-mindmap-panel {
		display: block !important;
	}

	.l-section-contents.p-mindmap-panel + .l-section-contents.p-mindmap-panel,
  .l-section-contents.p-mindmap-panel + .p-mindmap-panel,
  .p-mindmap-panel + .l-section-contents.p-mindmap-panel,
  .p-mindmap-panel + .p-mindmap-panel {
		border-top: 1px solid #1a1a1a;
	}

	.l-section-contents.p-mindmap-panel.is-active .l-section-contents.p-mindmap-body,
  .l-section-contents.p-mindmap-panel.is-active .p-mindmap-body,
  .p-mindmap-panel.is-active .l-section-contents.p-mindmap-body,
  .p-mindmap-panel.is-active .p-mindmap-body {
		display: block;
	}

	.p-pickup-inner {
		padding-right: 1.6rem;
		padding-left: 1.6rem;
	}

	.p-recruit-tab {
		overflow: hidden;
		border: 1px solid #1a1a1a;
		border-radius: 0.8rem;
	}

	.p-recruit-tab-panel {
		display: block !important;
		border: 0;
		border-radius: 0;
	}

	.p-recruit-tab-panel + .p-recruit-tab-panel {
		border-top: 1px solid #1a1a1a;
	}

	.p-seminar-card-body {
		position: relative;
		top: -0.2rem;
	}

	.l-section:has(.p-solve) {
		margin-top: 4rem;
		margin-bottom: 8rem;
	}

	.p-solve-head .c-btn .ico {
		position: relative;
		right: -1.4rem;
	}

	.l-section-contents.p-stats-item .img,
  .p-stats-item .img {
		width: 27.6rem;
	}

	.p-wysiwyg table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.p-wysiwyg .mt-be-columns {
		flex-direction: column;
	}

	.p-wysiwyg .mt-be-columns.is-mediatext:has(.mt-be-column:first-child .mt-be-image) {
		flex-direction: column-reverse;
	}

	.js-highlight.syntax-highlight pre[class*=language-] {
		padding: 12px;
		font-size: 1.2rem;
	}

	.js-highlight.syntax-highlight .code-toolbar .toolbar {
		top: 4px;
		right: 4px;
		opacity: 1;
	}

	.js-highlight.syntax-highlight .code-toolbar .toolbar .toolbar-item button {
		padding: 3px 6px;
		font-size: 1.1rem;
	}

	.l-article-grid {
		padding-right: 1.6rem;
		padding-left: 1.6rem;
	}

	.l-article-meta .date {
		letter-spacing: -0.025em;
	}

	.l-article-meta .date.editor {
		letter-spacing: normal;
	}

	.l-article-kv {
		margin-top: 3.2rem;
	}

	.l-footer .p-list-sns {
		justify-content: space-between;
		padding: 3.2rem 2rem;
		gap: unset;
	}

	.l-footer-nav-home > a,
  .l-footer-nav-block:not(.has-child) > a {
		justify-content: space-between;
	}

	.l-footer-nav-home > a::after,
  .l-footer-nav-block:not(.has-child) > a::after {
		content: '';
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		background: no-repeat 50% 50%/contain;
		background-image: url(../img/ico_chevron_right.png);
		-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	}

	.l-footer-bottom {
		padding: 0 1.6rem 3.2rem;
	}

	.l-footer-bottom .copyright {
		order: 2;
		padding-top: 1.6rem;
		border-top: 1px solid #d1d5db;
		text-align: center;
	}

	.l-footer-bottom {
		display: flex;
		flex-direction: column;
	}

	.l-footer-bottom .l-footer-policy {
		padding: 0 0 1.5rem;
	}

	.l-footer-bottom .l-footer-policy {
		justify-content: center;
		order: 1;
	}

	.u-hide-sp {
		display: none !important;
	}

	.u-jc-start-sp {
		justify-content: flex-start !important;
	}

	.u-jc-center-sp {
		justify-content: center !important;
	}

	.u-jc-end-sp {
		justify-content: flex-end !important;
	}

	.u-ai-start-sp {
		align-items: flex-start !important;
	}

	.u-ai-center-sp {
		align-items: center !important;
	}

	.u-ai-end-sp {
		align-items: flex-end !important;
	}

	.u-mt-0-sp {
		margin-top: 0 !important;
	}

	.u-mt-4-sp {
		margin-top: 4px !important;
	}

	.u-mt-8-sp {
		margin-top: 8px !important;
	}

	.u-al-center-sp {
		text-align: center !important;
	}

	.u-al-right-sp {
		text-align: right !important;
	}

	.u-al-justify-sp {
		text-align: justify !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 1439px) {
	html {
		font-size: 0.6944444444vw;
	}

	.u-hide-smd {
		display: none !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	:root {
		--header-height: 64px;
	}

	.l-header .p-list-sns {
		margin: 24px auto 0;
	}

	.l-header {
		height: 64px;
		padding: 0 24px;
	}

	.l-header-logo {
		width: 161px;
	}

	.l-header-inner {
		padding: 0 16px 24px;
	}

	.l-header-nav li > a {
		padding: 16px 0;
		font-size: 16px;
	}

	.l-header-nav-toggle {
		width: 48px;
		height: 48px;
	}

	.l-header-nav-toggle span,
  .l-header-nav-toggle::before,
  .l-header-nav-toggle::after {
		width: 14px;
	}

	.l-header-nav-child li a {
		padding: 10px 0 10px 16px;
		font-size: 14px;
	}

	.l-header-drawer-foot {
		margin-top: 24px;
	}

	.l-header-sublinks {
		gap: 24px;
	}

	.l-header-sublinks a {
		font-size: 14px;
	}

	.l-header-drawer-cta {
		margin-top: 24px;
		gap: 12px;
	}

	.l-header-btn {
		height: 40px;
		padding: 0 16px;
		font-size: 14px;
	}

	.l-header-hamburger {
		width: 44px;
		height: 44px;
		margin-left: auto;
	}

	.l-header-hamburger span,
  .l-header-hamburger::before,
  .l-header-hamburger::after {
		width: 25px;
	}

	.l-header-hamburger::before {
		-webkit-transform: translate3d(-50%, calc(-50% - 7px), 0);
		transform: translate3d(-50%, calc(-50% - 7px), 0);
	}

	.l-header-hamburger::after {
		-webkit-transform: translate3d(-50%, calc(-50% + 7px), 0);
		transform: translate3d(-50%, calc(-50% + 7px), 0);
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@media (hover: hover) {
	.c-btn:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.c-btn.cl-primary:hover {
		border-color: #004b6f;
		background-color: #004b6f;
	}

	.c-btn.cl-primary:hover .ico::before {
		-webkit-filter: invert(22%) sepia(22%) saturate(5258%) hue-rotate(174deg) brightness(87%) contrast(104%);
		filter: invert(22%) sepia(22%) saturate(5258%) hue-rotate(174deg) brightness(87%) contrast(104%);
	}

	.c-btn.cl-on-color:hover {
		border-width: 0.2rem;
		border-color: #fff;
		background-color: #1a1a1a;
		color: #fff;
	}

	.c-btn.cl-on-color:hover .ico {
		background-color: #fff;
	}

	.c-btn.cl-on-color:hover .ico::before {
		-webkit-filter: brightness(0);
		filter: brightness(0);
	}

	.c-btn-secondary:hover .ico {
		-webkit-transform: translateX(0.4rem);
		transform: translateX(0.4rem);
	}

	.c-btn-secondary:hover .label {
		opacity: 0.7;
	}

	.c-btn-secondary:hover .label::after {
		-webkit-transform: scale(0, 1);
		transform: scale(0, 1);
		-webkit-transform-origin: right top;
		transform-origin: right top;
	}

	.c-btn-arrow:hover .label {
		text-decoration: none;
	}

	.c-btn-arrow:hover .c-btn-icon::before {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}

	.c-btn-more:hover .ico {
		-webkit-transform: translateX(0.4rem);
		transform: translateX(0.4rem);
	}

	.c-btn-more:hover .label {
		opacity: 0.7;
	}

	.c-btn-more:hover::after {
		-webkit-transform: scale(0, 1);
		transform: scale(0, 1);
		-webkit-transform-origin: right top;
		transform-origin: right top;
	}

	.c-card-blog:hover .c-card-blog-thumb img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.c-card-blog:hover .c-card-blog-title {
		text-decoration: underline;
	}

	.c-card-case:hover .thumb > img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.c-card-case:hover .title {
		text-decoration: underline;
	}

	.c-card-document .dl:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.c-card-seminar:hover .thumb img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.c-card-seminar:hover .title {
		text-decoration: underline;
	}

	.c-filter .c-filter-item:hover {
		border-color: #1a1a1a;
	}

	a.c-label:hover {
		opacity: 0.7;
	}

	.c-link-blog:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.c-link-blog:hover {
		border-color: #004b6f;
		background-color: #004b6f;
		color: #fff;
	}

	.c-link-blog:hover::after {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
		-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	}

	.c-link:hover::before {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transform-origin: left top;
		transform-origin: left top;
	}

	.c-pagination .page:hover {
		color: #176f94;
	}

	.c-totop.is-visible:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.c-totop.is-visible:hover {
		border-color: #004b6f;
		background-color: #004b6f;
	}

	.p-box p a:hover {
		text-decoration: none;
	}

	.p-box-links a:hover {
		text-decoration: none;
	}

	.p-breadcrumbs ol li a:hover {
		text-decoration: none;
	}

	.p-campaign-banner:hover {
		-webkit-animation: uyon-glow-gray 1.6s ease-out infinite;
		animation: uyon-glow-gray 1.6s ease-out infinite;
	}

	.p-case-pickup:hover .p-case-pickup-img > img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.p-case-pickup:hover .title .char {
		text-decoration: underline;
	}

	.p-company-item:hover .p-company-item-thumb img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.p-company-item:hover .p-company-item-desc {
		text-decoration: underline;
	}

	.p-company-item:hover .c-btn-icon::before {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}

	.p-contact-card:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.p-contact-card:hover {
		opacity: 0.8;
	}

	.p-contact-card:hover .c-btn-icon::before {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}

	.l-section-contents.p-diagnosis-link:hover,
  .p-diagnosis-link:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.l-section-contents.p-diagnosis-link:hover,
  .p-diagnosis-link:hover {
		border-color: #004b6f;
		background-color: #004b6f;
		color: #fff;
	}

	.l-section-contents.p-diagnosis-link:hover .ico,
  .p-diagnosis-link:hover .ico {
		-webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(73deg) brightness(150%) contrast(100%);
	}

	.l-section-contents.p-diagnosis-gallery-thumbs a:hover,
  .p-diagnosis-gallery-thumbs a:hover {
		opacity: 0.7;
	}

	.p-entry-line:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.p-entry-line:hover {
		opacity: 0.8;
	}

	.p-entry-banners a:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.p-entry-banners a:hover {
		opacity: 0.8;
	}

	.p-html ul li a:hover::after {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transform-origin: left top;
		transform-origin: left top;
	}

	.p-innerlinks a:hover {
		opacity: 0.7;
	}

	.p-knowhow-card:hover .p-knowhow-card-thumb img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.p-knowhow-card:hover .p-knowhow-card-title {
		text-decoration: underline;
	}

	.p-list-news li .title a:hover::after {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transform-origin: left top;
		transform-origin: left top;
	}

	.p-list-sns a:hover {
		opacity: 0.7;
	}

	.p-news .link:hover .title {
		text-decoration: underline;
	}

	.p-news .link:hover .c-btn-icon::before {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}

	.p-newslist-item:hover .p-newslist-item-title {
		text-decoration: underline;
	}

	.p-newslist-item:hover .c-btn-icon::before {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}

	.p-recruit-follow a:hover {
		opacity: 0.7;
	}

	.p-recruit-tab-head:hover li:not(.is-active) a:hover {
		border-color: #1a1a1a;
	}

	.p-reflink a:hover {
		text-decoration: none;
	}

	.p-seminar-card:hover .p-seminar-card-thumb img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.p-seminar-card:hover .p-seminar-card-title {
		text-decoration: underline;
	}

	.p-service-links a:hover .c-btn-icon::before {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}

	.p-sidebar-cats a:hover {
		color: #176f94;
	}

	.p-sidebar-tags a.is-active:hover {
		opacity: 0.7;
		color: #fff;
	}

	.p-sidebar-tags a:hover {
		border-color: #176f94;
		color: #176f94;
	}

	.p-content.p-wysiwyg.u-downlevel-2.p-sitemap h3 a:hover {
		opacity: 0.7;
	}

	.p-content.p-wysiwyg.u-downlevel-2.p-sitemap h3:hover::after {
		-webkit-transform: translateX(0.2rem);
		transform: translateX(0.2rem);
	}

	.p-content.p-wysiwyg.u-downlevel-2.p-sitemap ul li a:hover {
		opacity: 0.7;
	}

	.p-wysiwyg a:not([class]):hover {
		text-decoration: none;
	}

	.p-youtube-card:hover .p-youtube-card-thumb img {
		-webkit-transform: scale(1.05) translateZ(0) rotate(0.001deg);
		transform: scale(1.05) translateZ(0) rotate(0.001deg);
	}

	.p-youtube-card:hover .p-youtube-card-title {
		text-decoration: underline;
	}

	.l-cookie-text a:hover {
		opacity: 0.7;
	}

	.l-footer-company .info .logo:hover {
		opacity: 0.7;
	}

	.l-footer-banners li:hover {
		-webkit-animation: uyon-glow 1.6s ease-out infinite;
		animation: uyon-glow 1.6s ease-out infinite;
	}

	.l-footer-banners a:hover {
		opacity: 0.7;
	}

	.l-footer-bottom .l-footer-policy a:hover {
		opacity: 0.7;
	}

	.l-header-logo a:hover {
		opacity: 0.7;
	}

	.l-header-mega-cat:hover {
		opacity: 0.7;
	}

	.l-header-sublinks a:hover {
		opacity: 0.7;
	}

	.l-header-btn:hover {
		opacity: 0.7;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-btn:hover {
		-webkit-animation: none;
		animation: none;
	}

	.c-card-document .dl:hover {
		-webkit-animation: none;
		animation: none;
	}

	.has-heading-reveal .c-heading .title .ja {
		transition: none;
		-webkit-clip-path: none;
		clip-path: none;
	}

	.c-link-blog:hover {
		-webkit-animation: none;
		animation: none;
	}

	.c-totop.is-visible:hover {
		-webkit-animation: none;
		animation: none;
	}

	.p-campaign-banner:hover {
		-webkit-animation: none;
		animation: none;
	}

	.p-contact-card:hover {
		-webkit-animation: none;
		animation: none;
	}

	.l-section-contents.p-diagnosis-link:hover,
  .p-diagnosis-link:hover {
		-webkit-animation: none;
		animation: none;
	}

	.p-entry-line:hover {
		-webkit-animation: none;
		animation: none;
	}

	.p-entry-banners a:hover {
		-webkit-animation: none;
		animation: none;
	}

	.p-hsform {
		transition: none;
	}

	.p-hsform-spinner {
		-webkit-animation-duration: 1.4s;
		animation-duration: 1.4s;
	}

	.hs-form-frame {
		transition: none;
	}

	.p-kv-scroll .line::after {
		-webkit-animation: none;
		animation: none;
	}

	.p-logos-track {
		-webkit-animation: none;
		animation: none;
	}

	.has-heading-reveal .js-reveal-text .char {
		opacity: 1;
		transition: none;
		-webkit-transform: none;
		transform: none;
	}

	.has-heading-reveal .js-reveal {
		transition: none;
		-webkit-clip-path: none;
		clip-path: none;
	}

	.l-archive-list.is-list-loading::before {
		-webkit-animation: none;
		animation: none;
	}

	.l-footer-banners li:hover {
		-webkit-animation: none;
		animation: none;
	}
}