/* ==========================================================================
   Common CSS
   全ページ共通のスタイル

   命名規則（FLOCSS ベース）
     l- : レイアウト（header / footer / container など）
     c- : 共通コンポーネント
     p- : ページ固有（pages/{key}.css に記述）
     u- : ユーティリティ
     js-: JavaScript のフック用（スタイルは当てない）
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
	/* color（Figma の変数名をコメントに記載） */
	--color-text: #3b3636;          /* dark-dark-grey */
	--color-black: #000;            /* black */
	--color-white: #fff;            /* wihte */
	--color-navy: #2a2833;          /* navy */
	--color-navy-clear: #151955;    /* navy-clear */
	--color-red: #de1013;           /* red */
	--color-red-dark: #c22232;      /* red-dark */
	--color-pink: #f4698e;          /* saiko-pink-b */
	--color-pink-red: #de606b;      /* pale-red-pink */
	--color-orange: #fb9778;        /* orange */
	--color-pale-orange: #fff5f0;   /* pale-orange */
	--color-pale-white: #fcfbfa;    /* pale-white */
	--color-pale-grey: #f4f0ee;     /* pale-grey */
	--color-dark-grey: #6e6864;     /* dark-grey */
	--color-grey-blue: #a9aaaf;     /* dark-grey-blue */
	--color-indigo: #575b93;        /* Figma 未登録（お問い合わせの「任意」ラベル） */
	--color-bg: var(--color-white);

	/* color（透明度付き。Figma で不透明度を指定して使われている色） */
	--color-navy-a60: rgb(42 40 51 / 0.6);        /* 紺のボタンのホバー・モーダルの背景 */
	--color-navy-a50: rgb(42 40 51 / 0.5);        /* ナビのホバー */
	--color-navy-a30: rgb(42 40 51 / 0.3);        /* 区切り線・入力欄の枠 */
	--color-navy-a20: rgb(42 40 51 / 0.2);        /* 区切り線 */
	--color-pink-red-a70: rgb(222 96 107 / 0.7);  /* 枠線 */
	--color-pink-red-a50: rgb(222 96 107 / 0.5);  /* リンクのホバー */
	--color-orange-a70: rgb(251 151 120 / 0.7);   /* 線・下線 */
	--color-red-dark-a70: rgb(194 34 50 / 0.7);   /* 線（実績） */
	--color-pale-orange-a70: rgb(255 245 240 / 0.7); /* 入力欄・お知らせの背景 */

	/* gradient */
	--gradient-red-navy: linear-gradient(90deg, #f33 0%, #d32f37 37.5%, #171945 76.442%); /* gra-red-blue */
	--gradient-red: linear-gradient(90deg, #ed6c6c 0.873%, #da3739 58.368%, #a10003 123.71%);
	--gradient-orange: linear-gradient(90deg, #faac86 0%, #fc7762 40.07%, #f33 100%);       /* 送信ボタン */
	--gradient-orange-pink: linear-gradient(270deg, #ed9d67 0%, #d15a63 74.347%);           /* 帯ラベル（c-band-label） */
	/* 見出しエリア・CTA の背景（Figma の conic-gradient） */
	--gradient-conic: conic-gradient(from 90deg, #bf2131 -2.2312%, #c83e4a 1.394%, #d15a63 5.0192%, #e79066 37.983%, #f8b969 43.411%, #e79066 54%, #d15a63 74.751%, #c83e4a 86.26%, #bf2131 97.769%, #c83e4a 101.39%, #d15a63 105.02%);

	/* font */
	--font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-en: "Josefin Sans", var(--font-base);
	--font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-inter: "Inter", var(--font-base);
	--fz-base: 1rem;

	/* layout
	   --container-width は要素ごとに上書きできる（例: style="--container-width: 800px;"）
	   初期値は最初のデザインで最も多く使われている幅に合わせる */
	--container-width: 1200px;
	--container-gutter: 20px;
	--header-height: 75px;

	/* 背景の模様（各ページのセクションの ::before）の縮小率。SP は下で小さくする */
	--bg-scale: 1;

	/* motion */
	--duration: 0.3s;

	/* z-index */
	--z-header: 100;
	--z-nav: 110;
	--z-loading: 1000;
}

/* ノートPC 幅・TB（768〜1279px）は全体の文字を小さくし（本文 14px）、左右の余白を広げる。
   文字サイズはすべて rem で指定しているため、ルートの文字サイズで一律に縮める */
@media (max-width: 1279px) {
	:root {
		--container-gutter: 40px;
		font-size: 87.5%;
	}
}

/* SP は背景の模様を縮小して、PC に近い範囲が見えるようにする（PC の 1920px 幅を基準に、中央付近しか見えなくなるため） */
@media (max-width: 767px) {
	:root {
		--bg-scale: 0.5;
		--container-gutter: 20px;
		font-size: 100%;
	}
}

/* ブレイクポイント（CSS 変数はメディアクエリに使えないため値を直接記述）
     NAV: max-width: 1279px（ノートPC 幅。全体の文字を小さくし、ヘッダーナビはお問い合わせをアイコンだけにする）
     TB : max-width: 1023px（ヘッダーナビをハンバーガーメニューに切り替え）
     SP : max-width: 767px
*/

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	/* --wp-admin--admin-bar--height はログイン中だけ WordPress が出力する（PC 32px / SP 46px） */
	scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
}

body {
	font-family: var(--font-base);
	font-size: var(--fz-base);
	font-weight: 400;
	line-height: 1.8;
	color: var(--color-text);
	text-spacing-trim: space-all; /* 約物を詰めない（Figma の表示に合わせる） */
	background-color: var(--color-bg);
}

body.is-nav-open {
	overflow: hidden;
}

a {
	transition: opacity var(--duration);
}

@media (any-hover: hover) {
	a:hover {
		opacity: 0.7;
	}
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.l-container {
	width: 100%;
	max-width: calc(var(--container-width) + var(--container-gutter) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-gutter);
	padding-right: var(--container-gutter);
}

/* 画面幅いっぱい（左右の余白なし） */
.l-container--full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.l-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

@media (max-width: 767px) {
	.l-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.l-main {
	padding-top: var(--header-height);
}

/* header ------------------------------------------------------------------ */
.l-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	height: var(--header-height);
	padding-left: clamp(var(--container-gutter), calc(10.4vw - 100px), 100px);
	background-color: rgb(255 255 255 / 0.6);
	box-shadow: 0 1px 8px rgb(0 0 0 / 0.22);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

/* ログイン中の管理バー（WP ツールバー） */
.admin-bar .l-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .l-header {
		top: 46px;
	}
}

/* WordPress は 600px 以下で管理バーをスクロールさせるため、ヘッダーとの間にすき間ができる。
   管理バーも上部に固定する（WordPress 本体の #wpadminbar の指定を上書きするため ID で指定） */
@media (max-width: 600px) {
	html #wpadminbar {
		position: fixed;
	}
}

.l-header__logo {
	flex-shrink: 0;
}

.l-header__logo img {
	width: 201px;
}

.l-header__nav {
	display: flex;
	gap: clamp(24px, calc(5.2vw - 50px), 50px);
	align-self: stretch;
}

.l-header__menu {
	display: flex;
	gap: clamp(24px, calc(5.2vw - 50px), 50px);
	height: 100%;
}

.l-header__menu-item {
	position: relative;
}

.l-header__menu-label {
	display: flex;
	gap: 8px;
	align-items: center;
	height: 100%;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.08em;
	color: var(--color-navy);
	white-space: nowrap;
}

/* メニューの文字（ホバーで半透明になり、下線が左から伸びる） */
.l-header__menu-text {
	padding-top: 4px;
	padding-bottom: 4px;
	background: linear-gradient(var(--color-pink-red), var(--color-pink-red)) left bottom / 0 2px no-repeat;
	transition: color var(--duration), background-size var(--duration);
}

.l-header__contact {
	position: relative;
	z-index: 0;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	width: 198px;
	height: 100%;
	padding-left: 16px;
	padding-right: 16px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.1em;
	color: var(--color-white);
}

/* 背景のグラデーション（ホバーで 60% の透明度にする） */
.l-header__contact::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--gradient-red);
	transition: opacity var(--duration);
}

.l-header__contact img {
	width: 44px;
}

@media (any-hover: hover) {
	.l-header__menu a:hover,
	.l-header__contact:hover {
		opacity: 1;
	}

	.l-header__menu a:hover .l-header__menu-text {
		color: var(--color-navy-a50);
		background-size: 100% 2px;
	}

	.l-header__contact:hover::before {
		opacity: 0.6;
	}
}

.l-header__menu a:focus-visible .l-header__menu-text {
	color: var(--color-navy-a50);
	background-size: 100% 2px;
}

.l-header__contact:focus-visible::before {
	opacity: 0.6;
}

.l-header__toggle {
	display: none;
}

/* ノートPC 幅（1024〜1279px）はナビをヘッダーに収める。ロゴを小さくし、お問い合わせはアイコンだけにする（文字はルートの文字サイズで小さくなる） */
@media (max-width: 1279px) {
	.l-header__logo img {
		width: 160px;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.l-header__contact {
		justify-content: center;
		width: var(--header-height);
		padding-left: 0;
		padding-right: 0;
	}

	.l-header__contact-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.l-header__contact img {
		width: 36px;
	}
}

@media (max-width: 1023px) {
	/* メニューを開いてもロゴが見えるよう、ハンバーガーボタンと同じくメニューより上に重ねる */
	.l-header__logo {
		position: relative;
		z-index: calc(var(--z-nav) + 1);
	}

	.l-header__toggle {
		position: relative;
		z-index: calc(var(--z-nav) + 1);
		display: block;
		flex-shrink: 0;
		width: var(--header-height);
		height: var(--header-height);
		color: var(--color-navy);
	}

	.l-header__toggle-bar,
	.l-header__toggle-bar::before,
	.l-header__toggle-bar::after {
		position: absolute;
		left: 50%;
		width: 26px;
		height: 2px;
		margin-left: -13px;
		background-color: currentColor;
		transition: transform var(--duration), background-color var(--duration);
	}

	.l-header__toggle-bar {
		top: 50%;
		translate: 0 -50%;
	}

	.l-header__toggle-bar::before,
	.l-header__toggle-bar::after {
		content: "";
	}

	.l-header__toggle-bar::before {
		top: -8px;
	}

	.l-header__toggle-bar::after {
		top: 8px;
	}

	.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar {
		background-color: transparent;
	}

	.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar::before {
		transform: translateY(8px) rotate(45deg);
	}

	.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar::after {
		transform: translateY(-8px) rotate(-45deg);
	}

	/* ヘッダーの backdrop-filter により fixed の基準がヘッダーになるため、高さを画面の高さで指定する */
	.l-header__nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); /* ヘッダーが管理バーの分だけ下がるため */
		z-index: var(--z-nav);
		flex-direction: column;
		gap: 30px;
		padding: calc(var(--header-height) + 20px) var(--container-gutter) 40px;
		overflow-y: auto;
		background-color: var(--color-pale-white);
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--duration), visibility var(--duration);
	}

	.l-header__nav.is-open {
		visibility: visible;
		opacity: 1;
	}

	.l-header__menu {
		flex-direction: column;
		gap: 0;
		height: auto;
	}

	.l-header__menu-label {
		justify-content: space-between;
		padding-top: 18px;
		padding-bottom: 18px;
		border-bottom: 1px solid var(--color-pale-grey);
	}

	.l-header__contact {
		width: 100%;
		max-width: 350px;
		height: 75px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* cta（お問い合わせエリア） --------------------------------------------- */
.l-cta {
	position: relative;
	z-index: 0;
	padding-top: 40px;
	overflow: hidden;
	background-color: #c83e4a;
}

/* 背景のグラデーション（Figma の conic-gradient を幅 1920px 基準で再現）
   サイズと transform は Figma の変形行列から計算した値のため、小数のままにしている。
   円錐状のグラデーションは中心からの角度で色が決まるため、中心（PC で左から 1117.3px = 幅の 58.193%、
   上から 460.52px = 高さ 430px の 107.098%）を、どの幅・高さでも同じ割合の位置に置く。
   ただし CTA は画面が狭いほど縦長になり、中心からの角度が PC と変わる（SP では左上の赤が薄くなる）。
   そのため、中心を軸にグラデーションを横に縮め・縦に伸ばして（--cta-grad-sx / --cta-grad-sy）、四隅の色を PC に合わせる。
   倍率は各ブレークポイントで、四隅の色が PC に最も近くなる値を測って決めた */
.l-cta::before {
	content: "";
	position: absolute;
	top: calc(107.098% - 460.52px);
	left: calc(58.193% - 1117.3px);
	z-index: -2;
	width: 314.57px;
	height: 314.57px;
	background-image: var(--gradient-conic);
	transform-origin: 0 0;
	transform: translate(1117.3px, 460.52px) scale(var(--cta-grad-sx, 1), var(--cta-grad-sy, 1)) translate(-1117.3px, -460.52px) matrix(-50.881, -47.945, 214.08, -78.613, 1117.3, 460.52) translate(-157.28px, -157.28px);
}

@media (max-width: 1279px) {
	.l-cta {
		--cta-grad-sx: 0.6;
	}
}

@media (max-width: 1023px) {
	.l-cta {
		--cta-grad-sy: 2;
	}
}

@media (max-width: 767px) {
	.l-cta {
		--cta-grad-sx: 0.4;
	}
}

/* 背景の質感 */
.l-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/common/bg-cta-texture.webp") left top / 768px 447px;
	opacity: 0.2;
	mix-blend-mode: multiply;
}

.l-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.l-cta__head {
	display: flex;
	gap: 60px;
	align-items: center;
	min-height: 130px;
}

.l-cta__lead {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.78;
	letter-spacing: 0.05em;
	color: var(--color-white);
}

.l-cta__body {
	/* 左右の空き・項目の間の空き（区切り線の左右）を、PC の比率（左右 約 100px : 間 221px）のまま画面幅に合わせて縮める。
	   列: 左の空き / 項目 / 間の空き（区切り線） / 項目 / 右の空き。項目は 370px を優先し、空きが 0 になってから縮む */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 370px) minmax(40px, 2.22fr) minmax(0, 370px) minmax(0, 1fr);
	padding: 40px 20px 30px;
	background-color: var(--color-pale-orange);
}

.l-cta__item {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
	justify-content: space-between;
	min-height: 160px;
}

.l-cta__item:first-child {
	grid-column: 2;
	grid-row: 1;
}

.l-cta__item:last-child {
	grid-column: 4;
	grid-row: 1;
}

/* 2 つの項目の間の区切り線（間の空きの列の中央） */
.l-cta__body::before {
	content: "";
	grid-column: 3;
	grid-row: 1;
	justify-self: center;
	width: 1px;
	background-color: var(--color-dark-grey);
}

.l-cta__text {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: var(--color-navy);
	text-align: center;
}

@media (max-width: 1023px) {
	.l-cta__head {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
		min-height: 0;
	}

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

	.l-cta__body::before {
		content: none;
	}

	.l-cta__item {
		width: 100%;
		min-height: 0;
	}

	/* 縦並びにしたときの区切り線（項目の間の横線） */
	.l-cta__item + .l-cta__item {
		position: relative;
	}

	.l-cta__item + .l-cta__item::before {
		content: "";
		position: absolute;
		top: -25px;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: var(--color-dark-grey);
	}
}

@media (max-width: 767px) {
	.l-cta__lead {
		font-size: 1rem;
	}

	.l-cta__lead br {
		display: none;
	}

	.l-cta__body {
		gap: 40px;
		padding: 30px 20px;
	}

	.l-cta__item + .l-cta__item::before {
		top: -20px;
	}

	.l-cta__text {
		font-size: 1.125rem;
	}

}

/* footer ------------------------------------------------------------------ */
.l-footer {
	color: var(--color-white);
	background-color: var(--color-navy);
}

.l-footer__inner {
	--container-width: 1520px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 60px;
	padding-bottom: 40px;
}

.l-footer__logo img {
	width: 326px;
}

.l-footer__company {
	margin-top: 20px;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.1em;
	color: var(--color-pale-grey);
}

.l-footer__address {
	margin-top: 18px;
	font-weight: 500;
	line-height: 1.625;
	letter-spacing: 0.1em;
	color: var(--color-pale-grey);
}

.l-footer__nav {
	display: flex;
	gap: 60px;
	margin-top: 60px;
}

.l-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.l-footer__menu-label {
	display: flex;
	gap: 12px;
	align-items: center;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.03em;
}

/* 英字の項目（HOME）は Inter */
.l-footer__menu-label--en {
	font-family: var(--font-inter);
}

.l-footer__menu-label::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	background-color: var(--color-red);
}

.l-footer__menu a {
	transition: color var(--duration);
}

@media (any-hover: hover) {
	.l-footer__menu a:hover {
		opacity: 1;
	}

	a.l-footer__menu-label:hover {
		color: rgb(255 255 255 / 0.6);
	}
}

a.l-footer__menu-label:focus-visible {
	color: rgb(255 255 255 / 0.6);
}

.l-footer__copyright {
	padding: 8px var(--container-gutter);
	font-family: var(--font-en);
	line-height: 1.25;
	letter-spacing: 0.12em;
	text-align: center;
}

@media (max-width: 1023px) {
	.l-footer__inner {
		flex-direction: column;
	}

	.l-footer__nav {
		flex-wrap: wrap;
		gap: 20px 40px;
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.l-footer__inner {
		padding-top: 40px;
		padding-bottom: 30px;
	}

	.l-footer__logo img {
		width: 230px;
	}

	.l-footer__nav {
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
   Component
   -------------------------------------------------------------------------- */

/* セクション見出し（英字 + 日本語） */
.c-section-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center; /* 英字が 2 行になったときも中央にそろえる */
}

.c-section-title__en {
	font-family: var(--font-en);
	font-size: 3.125rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: transparent;
	background-image: var(--gradient-red-navy);
	-webkit-background-clip: text;
	background-clip: text;
}

/* 英字の改行（SP だけ有効） */
.c-section-title__br {
	display: none;
}

.c-section-title__ja {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.16em;
	color: var(--color-text);
}

.c-section-title--left,
.c-section-title--white {
	align-items: flex-start;
	text-align: left;
}

.c-section-title--white .c-section-title__en {
	color: var(--color-pale-orange);
	background-image: none;
}

.c-section-title--white .c-section-title__ja {
	color: var(--color-white);
}

@media (max-width: 767px) {
	/* 左揃えの見出しも、SP はほかの見出しと同じく中央揃えにする（--white は左揃えのまま） */
	.c-section-title--left {
		align-items: center;
		text-align: center; /* 英字が 2 行になったときも中央にそろえる */
	}

	.c-section-title__en {
		font-size: 2.1875rem;
	}

	.c-section-title__br {
		display: revert;
	}

	.c-section-title__ja {
		font-size: 1rem;
	}
}

/* 番号付きの見出し（赤のグラデーションの帯 + 英字の番号）
   トップの「大切にしている考え方」・事業概要の各事業・考え方の Mission / Vision / Purpose */
.c-number-heading {
	display: flex;
	gap: 15px;
	align-items: center;
	min-height: 72px;
	padding: 8px 30px 0;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.36;
	letter-spacing: 0.15em;
	color: var(--color-white);
	background-image: var(--gradient-red);
}

.c-number-heading__num {
	font-family: var(--font-en);
	font-size: 3.125rem;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.05em;
}

@media (max-width: 767px) {
	.c-number-heading__num {
		font-size: 2.25rem;
	}
}

/* 帯のラベル（左に白い線。初期値はオレンジ → ピンクのグラデーション、--navy は紺） */
.c-band-label {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 12px 24px 12px 0;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: var(--color-white);
	background-image: var(--gradient-orange-pink);
}

.c-band-label::before {
	content: "";
	flex-shrink: 0;
	width: 55px;
	height: 1px;
	background-color: rgb(255 255 255 / 0.5);
}

@media (max-width: 767px) {
	.c-band-label {
		padding-right: 20px;
	}
}

.c-band-label--navy {
	background-color: var(--color-navy-clear);
	background-image: none;
}

/* 小見出し（先頭にオレンジの四角。--red は赤） */
.c-square-heading {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: var(--color-black);
}

.c-square-heading::before {
	content: "";
	flex-shrink: 0;
	width: 11px;
	height: 11px;
	background-color: var(--color-orange);
}

.c-square-heading--red::before {
	background-color: var(--color-red-dark);
}

/* 箇条書きの項目（先頭にオレンジの線。--red は赤） */
.c-line-item {
	display: flex;
	gap: 12px;
	align-items: center;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.06em;
	color: var(--color-text);
}

.c-line-item::before {
	content: "";
	flex-shrink: 0;
	align-self: flex-start;
	width: 25px;
	height: 2px;
	margin-top: 15px;
	background-color: var(--color-orange-a70);
}

.c-line-item--red::before {
	background-color: var(--color-red-dark-a70);
}

@media (max-width: 767px) {
	.c-line-item {
		line-height: 1.75;
	}

	.c-line-item::before {
		width: 16px;
		margin-top: 13px;
	}
}

/* カードの見出し（下の中央に赤い線） */
.c-underline-title {
	padding-bottom: 12px;
	font-size: 1.5625rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	color: var(--color-black);
	background: linear-gradient(var(--color-red), var(--color-red)) center bottom / 220px 2px no-repeat;
}

@media (max-width: 767px) {
	.c-underline-title {
		font-size: 1.25rem;
		letter-spacing: 0.1em;
	}
}

/* 半透明の白い箱（ピンクの枠・背景をぼかす） */
.c-frame-box {
	background-color: rgb(255 255 255 / 0.8);
	border: 1px solid var(--color-pink-red-a70);
	-webkit-backdrop-filter: blur(13px);
	backdrop-filter: blur(13px);
}

/* ボタンを置く行（初期値は中央。--end は右寄せ） */
.c-button-wrap {
	display: flex;
	justify-content: center;
}

.c-button-wrap--end {
	justify-content: flex-end;
}

/* 背景の装飾（全ページ共通の素材。セクションの ::before に表示する）
   素材は 2879 x 3316px で、画面が広いときやセクションが長いときも模様が切れないよう、
   デザイン幅（1920px）より外側まで模様が描かれている。
   位置は Figma の配置に合わせ、セクションごとに --bg-decoration-top（上端から）と
   --bg-decoration-left（画面の中央から左へ）で指定する。
   付ける要素には position: relative; z-index: 0; overflow: hidden（または clip）を指定しておく */
.c-bg-decoration::before {
	content: "";
	position: absolute;
	top: var(--bg-decoration-top, 0px);
	left: calc(50% - var(--bg-decoration-left, 1541px));
	z-index: -1;
	width: 2879px;
	height: 3316px;
	pointer-events: none;
	background: url("../img/common/bg-decoration.svg") left top / 2879px 3316px no-repeat;
	/* SP の縮小（--bg-scale）は、画面の中央・セクションの上端を軸にして、配置を保ったまま縮める */
	transform-origin: var(--bg-decoration-left, 1541px) calc(var(--bg-decoration-top, 0px) * -1);
	scale: var(--bg-scale);
}

/* 下層ページ見出しエリア（ヘッダーの下まで背景を敷く） */
.c-page-header {
	position: relative;
	z-index: 0;
	height: 210px;
	margin-top: calc(var(--header-height) * -1);
	overflow: hidden;
	background-color: var(--color-white);
	box-shadow: inset 0 -52px 76px -25px rgb(70 79 99 / 0.18);
}

/* 背景のグラデーション（Figma の conic-gradient を幅 1920px 基準で再現）
   サイズと transform は Figma の変形行列から計算した値のため、小数のままにしている。
   円錐状のグラデーションは中心からの角度で色が決まるため、中心（PC で左から 1117.3px = 幅の 58.193%、
   上から 224.91px = 見出しエリアの下端のすぐ下）を、どの幅でも同じ割合の位置に置く。
   こうすると SP でも PC と同じく、大部分がピンクで右側が黄色になる（中央基準で置くと SP ではピンクしか見えない） */
.c-page-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(58.193% - 1117.3px);
	z-index: -2;
	width: 314.57px;
	height: 314.57px;
	background-image: var(--gradient-conic);
	opacity: 0.5;
	mix-blend-mode: hard-light;
	transform-origin: 0 0;
	transform: matrix(-50.881, -23.415, 214.08, -38.392, 1117.3, 224.91) translate(-157.28px, -157.28px);
}

/* 背景の質感 */
.c-page-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../img/common/bg-lower-texture.webp") left top / 518px 302px;
	opacity: 0.4;
	mix-blend-mode: color-burn;
}

.c-page-header__inner {
	position: relative; /* 英字（__en）の位置の基準 */
	display: flex;
	gap: 20px;
	align-items: flex-end;
	justify-content: space-between;
	height: 100%;
	max-width: none;
	padding-right: 40px;
	padding-left: max(var(--container-gutter), calc(50% - 600px));
}

.c-page-header__title {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	padding-bottom: 40px;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.67;
	letter-spacing: 0.3em;
	color: var(--color-white);
}

/* 英字（縁取り文字・SVG）
   大きさは画面幅だけで決め、どのページでも同じ大きさにする（日本語の見出しの長さでは変えない）。
   大文字の高さ（--en-cap）: 1920px で 100px（デザインどおり）→ 1280px で 60px → 1024〜1279px は 60px（ノートPC）
   → 375px 以下で 30px。間は画面幅に合わせて少しずつ変える（画面を狭めるほど一方向に小さくなる）。
   img の高さは --en-cap × --en-ratio（SVG の高さ ÷ 大文字の高さ 100px。p・y など下に伸びる文字がある分だけ高い）。
   位置: 上端（--en-top）と右端（--en-right）は page-header.php が SVG（見出しエリア 1920 x 210 上の位置）から指定する。
   縮めても大文字の下端の位置は PC と同じにする（下に伸びる部分は見出しエリアの下端で切れる）。
   日本語の見出しにかかるときは、見出しの後ろに重ねる（見出しは z-index: 1 で手前） */
.c-page-header__en {
	--en-cap: clamp(30px, max(min(30px + (100vw - 375px) * 30 / 649, 60px), 60px + (100vw - 1280px) * 40 / 640), 100px);
	position: absolute;
	top: calc(var(--en-top, 99px) + 100px - var(--en-cap));
	right: var(--en-right, 40px);
}

.c-page-header__en img {
	width: auto;
	max-width: none;
	height: calc(var(--en-cap) * var(--en-ratio, 1));
}

@media (max-width: 1279px) {
	.c-page-header__en {
		right: var(--container-gutter);
	}
}

@media (max-width: 767px) {
	.c-page-header {
		height: 160px;
	}

	/* 見出しエリアが 50px 低いため、グラデーションの中心が下端のすぐ下に来るよう 50px 上げる */
	.c-page-header::before {
		top: -50px;
	}

	.c-page-header__inner {
		padding-right: var(--container-gutter);
	}

	.c-page-header__title {
		padding-bottom: 24px;
		font-size: 1.375rem;
		letter-spacing: 0.2em;
	}

	/* 見出しエリアが 50px 低いため、大文字の下端を PC より 59px 上にする（日本語の見出しの下端とそろう位置） */
	.c-page-header__en {
		top: calc(var(--en-top, 99px) + 41px - var(--en-cap));
	}
}

/* パンくずリスト */
.c-breadcrumb {
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: var(--color-white);
}

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--color-navy);
}

.c-breadcrumb__item {
	display: flex;
	gap: 12px;
	align-items: center;
}

/* 英字の項目（HOME）は Inter */
.c-breadcrumb__item--home {
	font-family: var(--font-inter);
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--color-pink-red);
	-webkit-mask: url("../img/common/icon-chevron.svg") center / 6px 10px no-repeat;
	mask: url("../img/common/icon-chevron.svg") center / 6px 10px no-repeat;
}

@media (max-width: 767px) {
	.c-breadcrumb__list {
		font-size: 0.875rem;
	}
}

/* ボタン（矢印付き）
   初期値は紺。--outline（白地・紺枠）/ --red（赤グラデーション）を用意 */
.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 350px;
	height: 60px;
	padding-left: 40px;
	padding-right: 42px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.15em;
	color: var(--color-white);
	background-color: var(--color-navy);
	transition: background-color var(--duration);
}

.c-button::after {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("../img/common/icon-chevron.svg") center / contain no-repeat;
	mask: url("../img/common/icon-chevron.svg") center / contain no-repeat;
}

.c-button--outline {
	color: var(--color-navy);
	background-color: var(--color-white);
	box-shadow: inset 0 0 0 2px var(--color-navy-clear); /* 枠線（ホバー時の帯で覆うため border ではなく影で指定） */
}

.c-button--red {
	background-image: linear-gradient(90deg, var(--color-red-dark), #dd7373);
	outline: 2px solid transparent; /* ホバー時に白くする枠（色だけを変化させる） */
	outline-offset: -2px;
}

/* ホバー時に左からスライドして入るグラデーションの帯 */
.c-button--outline,
.c-button--red {
	--duration: 0.4s; /* 帯のスライドをゆっくりにする（2 つのボタンで共通） */
	position: relative;
	z-index: 0;
	overflow: hidden;
	transition: color var(--duration), outline-color var(--duration);
}

.c-button--outline::before,
.c-button--red::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 383px;
	height: 100%;
	border-top-right-radius: 40px;
	translate: calc(-100% - 10px) 0;
	transition: translate var(--duration);
}

.c-button--outline::before {
	background-image: linear-gradient(90deg, #d32f37 19.199%, #171945 64.29%);
}

.c-button--red::before {
	background-image: linear-gradient(106.74deg, #f9c597 31.114%, #fb8b6f 86.469%, #f33 130.91%);
}

/* ホバー（キーボード操作時も同じ見た目にする） */
@media (any-hover: hover) {
	.c-button:hover {
		opacity: 1;
		background-color: var(--color-navy-a60);
	}

	.c-button--outline:hover,
	.c-button--red:hover {
		color: var(--color-white);
		background-color: var(--color-white);
	}

	.c-button--outline:hover::before {
		translate: 0 0;
	}

	.c-button--red:hover::before {
		translate: -6px 0;
	}

	.c-button--red:hover {
		outline-color: var(--color-white);
	}
}

.c-button:focus-visible {
	background-color: var(--color-navy-a60);
}

.c-button--outline:focus-visible,
.c-button--red:focus-visible {
	color: var(--color-white);
	background-color: var(--color-white);
}

.c-button--outline:focus-visible::before {
	translate: 0 0;
}

.c-button--red:focus-visible::before {
	translate: -6px 0;
}

.c-button--red:focus-visible {
	outline-color: var(--color-white);
}

.c-button--large {
	height: 85px;
}

@media (max-width: 767px) {
	.c-button {
		padding-left: 30px;
		padding-right: 32px;
		font-size: 1.125rem;
	}

	.c-button--large {
		height: 70px;
	}
}

/* 記事一覧 */
.c-post-list {
	border-top: 1px solid var(--color-pale-grey);
}

.c-post-item {
	border-bottom: 1px solid var(--color-pale-grey);
}

.c-post-item__link {
	display: flex;
	gap: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.c-post-item__date {
	flex-shrink: 0;
	color: var(--color-dark-grey);
}

@media (max-width: 767px) {
	.c-post-item__link {
		flex-direction: column;
		gap: 4px;
	}
}

/* ページ送り（template-parts/common/pagination.php） */
.c-pagination {
	display: flex;
	gap: 160px;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
}

.c-pagination__arrow {
	display: grid;
	place-items: center;
	width: 26px;
	height: 50px;
}

/* 矢印にはホバーの変化を付けない（共通のリンクのホバーも打ち消す） */
@media (any-hover: hover) {
	.c-pagination__arrow:hover {
		opacity: 1;
	}
}

.c-pagination__arrow::before {
	content: "";
	width: 20px;
	height: 35px;
	background: url("../img/common/icon-pagination-arrow.svg") center / contain no-repeat;
}

.c-pagination__arrow--next::before {
	scale: -1 1;
}

/* 先頭・最後のページでも矢印は表示する（クリックはできない） */
.c-pagination__arrow.is-disabled {
	cursor: default;
}

.c-pagination__list {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ページ番号（ほかのページ） */
.c-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding-left: 6px;
	padding-right: 6px;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--color-white);
	background-color: #bababa;
	transition: background-color var(--duration), opacity var(--duration);
}

/* 現在のページ */
.c-pagination .page-numbers.current {
	font-size: 1.5rem;
	font-weight: 500;
	background-color: var(--color-pink-red);
}

/* 省略（……） */
.c-pagination .page-numbers.dots {
	width: 71px;
	font-size: 0;
	background: url("../img/common/icon-pagination-dots.svg") center / 71px 3px no-repeat;
}

/* ホバー: ページ番号はピンクを薄く表示する */
@media (any-hover: hover) {
	.c-pagination a.page-numbers:hover {
		opacity: 0.6;
		background-color: var(--color-pink-red);
	}
}

.c-pagination a.page-numbers:focus-visible {
	opacity: 0.6;
	background-color: var(--color-pink-red);
}

/* SP は 320px の画面でも左右の余白（20px）に収まるよう、番号を小さくして間隔を詰める。
   現在のページから 2 つ離れた番号（is-far）は出さない（最大で「1 … 5 6 7 … 11」の 7 つ） */
@media (max-width: 767px) {
	/* 前へ・次へは両端に置き、番号との間をあける（番号が多いときも最低 6px） */
	.c-pagination {
		gap: 6px;
		justify-content: space-between;
	}

	.c-pagination__arrow {
		width: 20px;
	}

	.c-pagination__arrow::before {
		width: 16px;
		height: 28px;
	}

	.c-pagination__list {
		gap: 4px;
	}

	.c-pagination__item.is-far {
		display: none;
	}

	.c-pagination .page-numbers {
		min-width: 28px;
		height: 32px;
		padding-left: 4px;
		padding-right: 4px;
		font-size: 1rem;
	}

	.c-pagination .page-numbers.current {
		font-size: 1.25rem;
	}

	.c-pagination .page-numbers.dots {
		width: 24px;
		background-size: 24px 3px;
	}
}

/* お知らせのカテゴリーラベル */
.c-news-tag {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 130px;
	height: 30px;
	/* 最後の文字の後ろに付く字間（0.08em）の分を左に足して、文字を中央に揃える */
	padding: 5px 0 5px 0.08em;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.08em;
	color: var(--color-white);
	white-space: nowrap;
	background-color: var(--color-dark-grey);
}

.c-news-tag--seminar {
	background-color: var(--color-red);
}

.c-news-tag--blog {
	background-color: var(--color-pink);
}

.c-news-tag--writing {
	background-color: var(--color-orange);
}

.c-news-tag--media {
	background-color: var(--color-navy-clear);
}

/* エディタ本文（the_content の出力） */
.c-entry > * + * {
	margin-top: 1.5em;
}

.c-entry h2 {
	font-size: 1.5rem;
	font-weight: 700;
}

.c-entry h3 {
	font-size: 1.25rem;
	font-weight: 700;
}

.c-entry a {
	color: var(--color-red);
	text-decoration: underline;
	overflow-wrap: anywhere; /* 長い URL を折り返す */
}

.c-entry iframe {
	max-width: 100%;
}

/* ファイルのダウンロードボタン（ファイルブロック） */
.c-entry .wp-block-file__button {
	display: inline-block;
	margin-left: 12px;
	padding: 2px 14px;
	font-size: 0.875rem;
	color: var(--color-white);
	text-decoration: none;
	background-color: var(--color-red);
	border-radius: 4px;
}

/* ギャラリー（画像を横に並べる） */
.c-entry .wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ギャラリー内の画像（flex はギャラリーの中でだけ効く） */
.c-entry .wp-block-image {
	flex: 1 1 200px;
}

/* YouTube の埋め込みは幅いっぱい・16:9 */
.c-entry iframe[src*="youtube.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.c-entry ul {
	padding-left: 1.5em;
	list-style: disc;
}

.c-entry ol {
	padding-left: 1.5em;
	list-style: decimal;
}

.c-entry table {
	width: 100%;
}

.c-entry th,
.c-entry td {
	padding: 10px 14px;
	border: 1px solid var(--color-pale-grey);
}

.c-entry th {
	background-color: var(--color-pale-white);
}

/* モーダル（<dialog>） */
.c-modal {
	width: min(640px, calc(100% - var(--container-gutter) * 2));
	max-height: calc(100% - 40px);
	margin: auto;
	padding: 0;
	color: var(--color-text);
	background-color: var(--color-white);
	border: 0;
	box-shadow: 0 10px 40px rgb(0 0 0 / 0.25);
}

.c-modal::backdrop {
	background-color: var(--color-navy-a60);
}

.c-modal__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px;
}

.c-modal__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
	color: var(--color-navy);
}

.c-modal__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.c-modal__label {
	font-weight: 700;
	letter-spacing: 0.08em;
}

.c-modal__value {
	margin-top: 4px;
	padding: 8px 12px;
	line-height: 1.6;
	overflow-wrap: anywhere;
	background-color: var(--color-pale-orange-a70);
}

.c-modal__value--multiline {
	max-height: 240px;
	overflow-y: auto;
	white-space: pre-wrap;
}

.c-modal__note {
	font-size: 0.875rem;
	color: var(--color-dark-grey);
}

.c-modal__buttons {
	display: flex;
	gap: 16px;
	justify-content: flex-end;
}

.c-modal__button {
	display: grid;
	place-items: center;
	min-width: 160px;
	height: 50px;
	padding-left: 20px;
	padding-right: 20px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.c-modal__button--back {
	color: var(--color-navy);
	background-color: var(--color-white);
	border: 2px solid var(--color-navy);
}

.c-modal__button--submit {
	color: var(--color-white);
	background-image: var(--gradient-orange);
}

.c-modal__button:disabled {
	opacity: 0.6;
	cursor: wait;
}

@media (max-width: 767px) {
	.c-modal__inner {
		padding: 20px;
	}

	.c-modal__buttons {
		flex-direction: column-reverse;
	}

	.c-modal__button {
		width: 100%;
	}
}

/* 送信中の読み込み表示（画面全体を覆って再操作を防ぐ） */
.c-loading {
	position: fixed;
	inset: 0;
	z-index: var(--z-loading);
	display: grid;
	place-items: center;
	background-color: rgb(255 255 255 / 0.6);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--duration), visibility var(--duration);
}

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

.c-loading__spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgb(222 96 107 / 0.25);
	border-top-color: var(--color-pink-red);
	border-radius: 50%;
	animation: c-loading-spin 0.8s linear infinite;
}

@keyframes c-loading-spin {
	to {
		rotate: 360deg;
	}
}

.is-loading-lock {
	overflow: hidden;
}

/* 本文へスキップ（キーボード操作でフォーカスしたときだけ表示する） */
.c-skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: calc(var(--z-nav) + 2);
	padding: 12px 20px;
	font-weight: 500;
	color: var(--color-white);
	background-color: var(--color-navy);
	translate: 0 calc(-100% - 16px);
}

.c-skip-link:focus-visible {
	translate: 0 0;
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.u-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}