@charset "UTF-8";

/* =========================================================
 * SOY-KUFU 採用トップ（LP） ページ専用 CSS
 * モバイルファースト（375px想定）
 * セクション順:
 *  1. hero
 *  2. anxiety
 *  3. numbers
 *  4. reasons
 *  5. message
 *  6. day-schedule
 *  7. curriculum
 *  8. voices
 *  9. gallery
 * 10. requirements
 * 11. faq
 * 12. flow
 * 13. cta-banner
 * 14. blog-preview
 * ========================================================= */


/* ---------------------------------------------------------
 * 1. Hero
 *
 * フルワイド化:
 *   親要素 (#content.l-container, max-width: 1200px + padding-inline) の
 *   横幅制約を hero に限って突き破り、画面端から端まで広げる。
 *   `margin-inline: calc(50% - 50vw)` 方式は SWELL 設計パターン推奨。
 *
 *   内側コンテンツ (.sk-hero__inner) は max-width で中央寄せして
 *   読みやすさを保つ。SP は container padding を踏襲、PC は中央配置。
 *
 *   横スクロール対策として親 .sk-front-page に overflow-x: clip を当てる。
 *   clip は scroll コンテキストを作らないため position: sticky 等の
 *   副作用が無い（hidden だと sticky が効かなくなる）。
 * --------------------------------------------------------- */

/* `.sk-front-page` 自体は親 .l-container (max-width:1200px) の中にあるため、
 * ここで overflow-x: clip すると 100vw 突き抜けが clip されてしまう。
 * クリップは body 側で吸収するため、ここでは設定しない。 */

/* ---------------------------------------------------------
 * 1. Hero (ファーストビュー)
 *    左パネル（白背景・ロゴ・キャッチ・CTA）+ 右画像（3枚フェードスライド）の2分割
 *    SP: 画像を背面に敷き、テキストパネルを前面オーバーレイ
 *    PC: 左 panel 約42% / 右 media 約58%
 * --------------------------------------------------------- */
.sk-hero {
	/* viewport 全幅突き抜け */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	min-height: 60vh;
	background: var(--sk-surface);
	overflow: hidden;
}
/* 下辺を斜めに見せる白マスク。clip-path で hero 自体を切ると
 * タグライン「Be your best self.」も消えてしまうため、
 * 写真下部に白い斜め三角を重ねる方式にする（タグラインは前面に残す）。
 * 斜辺は右上がり（他セクションと同方向）。height で斜め線の高さを調整。 */
.sk-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 11vw;
	background: var(--sk-surface);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	z-index: 1;
	pointer-events: none;
}

.sk-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	min-height: 60vh;
}
@media (min-width: 768px) {
	.sk-hero__grid {
		grid-template-columns: minmax(360px, 40%) 1fr;
	}
}

/* --- 左パネル (テキスト) --- */
.sk-hero__panel {
	position: relative;
	z-index: 3;
	background: var(--sk-surface);
	padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 6vw, 3rem) clamp(2rem, 8vw, 3.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(0.75rem, 2.5vw, 1.25rem);
}
@media (max-width: 767px) {
	/* SP: パネルを画像上部にオーバーレイ、下半分は画像が見える形 */
	.sk-hero__panel {
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(6px);
		min-height: 64svh;
	}
}

/* パネル右端の外側に「白 → 透明」のフェードを伸ばし、画像にオーバーラップ。
 * .sk-hero__media::before（画像側内向きフェード）と両側から重ねて
 * 境界の段差を完全に溶かす。 */
@media (min-width: 768px) {
	.sk-hero__panel::after {
		content: "";
		position: absolute;
		top: 0;
		left: 100%;
		width: clamp(140px, 18vw, 260px);
		height: 100%;
		background: linear-gradient(
			to right,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.9) 20%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.25) 80%,
			rgba(255, 255, 255, 0) 100%
		);
		pointer-events: none;
		z-index: 3;
	}
}

/* --- ロゴ部分 --- */
.sk-hero__logo {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin-bottom: 0.5rem;
}
.sk-hero__logo-main {
	font-family: var(--sk-font-en);
	font-size: clamp(1rem, 2.4vw, 1.25rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--sk-text);
}
.sk-hero__logo-sub {
	font-family: var(--sk-font-en);
	font-size: clamp(0.75rem, 1.8vw, 0.875rem);
	letter-spacing: 0.22em;
	color: var(--sk-text-mid);
}

/* --- メインキャッチ（FVの主役、強く目立たせる）--- */
.sk-hero__title {
	font-family: var(--sk-font-heading);
	font-size: clamp(2.25rem, 5.2vw, 3.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--sk-text);
	margin: 0;
}

/* --- サブテキスト --- */
.sk-hero__sub {
	font-size: clamp(1.0625rem, 2.1vw, 1.375rem);
	line-height: 1.7;
	color: var(--sk-text);
	margin: 0;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* --- CTA ボタン群 --- */
.sk-hero__cta {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 0.5rem;
}

.sk-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.875rem 1.25rem;
	border-radius: 4px;
	font-size: clamp(0.875rem, 1.8vw, 0.9375rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	position: relative;
}
.sk-hero__btn::after {
	content: "›";
	font-size: 1.25rem;
	line-height: 1;
	margin-left: 0.5rem;
}

.sk-hero__btn--line {
	background: var(--sk-text);
	color: var(--sk-surface);
}
.sk-hero__btn--line .sk-hero__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--sk-line);
	color: var(--sk-surface);
	font-family: var(--sk-font-en);
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0;
}
.sk-hero__btn--line:hover {
	opacity: 0.88;
}

.sk-hero__btn--ghost {
	background: var(--sk-surface);
	color: var(--sk-text);
	border: 1px solid var(--sk-border);
}
.sk-hero__btn--ghost:hover {
	background: var(--sk-bg-sub);
}

/* --- 右画像（スライドショー） --- */
.sk-hero__media {
	position: relative;
	overflow: hidden;
	background: var(--sk-bg-sub);
	min-height: 60vh;
}
@media (max-width: 767px) {
	/* SP: 画像を背面に敷き、パネルがオーバーレイ */
	.sk-hero__media {
		position: absolute;
		inset: 0;
		z-index: 1;
	}
}

/* 左パネルとの境界に上品なソフトフェード（白→透明）。
 * 画像側に深く食い込ませてエッジを完全にぼかす。
 * PCのみ表示。 */
.sk-hero__media::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(160px, 22vw, 320px);
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.92) 18%,
		rgba(255, 255, 255, 0.7) 38%,
		rgba(255, 255, 255, 0.4) 60%,
		rgba(255, 255, 255, 0.15) 80%,
		rgba(255, 255, 255, 0) 100%
	);
	z-index: 2;
	pointer-events: none;
}
/* 左下の薄ブルー装飾は、下辺の斜め白マスク導入後に
 * マスク上へ薄く色が乗って見えるため無効化する。 */
.sk-hero__media::after {
	display: none;
}
@media (max-width: 767px) {
	.sk-hero__media::before,
	.sk-hero__media::after {
		display: none;
	}
}

/* スライド全体: CSS animation だけで opacity と transform を完全同期させる。
 * JS setInterval と CSS animation は別クロックでドリフトし、active 化瞬間に
 * Ken Burns が中途半端な scale 位置から再開して微小ジャンプ（カク）を起こす。
 * CSS animation 単独制御に切替えてクロック分離を解消する。
 *
 * 周期 18s = fade-in 3.5s + solo 2.5s + cross-fade 3.5s + 待機 8.5s
 *   0%       : fade-in 開始 (t=0,    opacity 0, scale 1)
 *   19.44%   : fade-in 完了 (t=3.5s, opacity 1)
 *   33.33%   : 次 slide fade-in 開始 = 自分の fade-out 開始 (t=6s, opacity 1)
 *   52.78%   : fade-out 完了 (t=9.5s, opacity 0, scale 1.08)
 *   75%      : Ken Burns 帰還完了 (t=13.5s, scale 1)
 *   100%     : 周期完了 (t=18s)
 *
 * 各 slide の delay を 6s ずつずらすことで、隣接 slide の fade-in/fade-out が
 * 完全に 3.5s 重なる正統クロスフェード循環を構築する:
 *   slide1: 表示 0 - 9.5s   (solo 3.5 - 6.0s)
 *   slide2: 表示 6.0 - 15.5s (solo 9.5 - 12.0s)
 *   slide3: 表示 12.0 - 21.5s (solo 15.5 - 18.0s)
 *   slide1 (2周期目): 表示 18.0 - … 滑らかに循環
 *
 * timing-function を keyframe ごとに指定し、fade-in/out は ease-in-out、
 * Ken Burns は ease-out 系で映画的な減速感を付加する。 */
.sk-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateZ(0);
	backface-visibility: hidden;
	animation: skHeroFade 18s linear infinite;
	will-change: opacity;
}
.sk-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: translateZ(0);
	backface-visibility: hidden;
	animation: skHeroKenBurns 18s linear infinite;
	will-change: transform;
}
.sk-hero__slide:nth-child(1),
.sk-hero__slide:nth-child(1) img { animation-delay: 0s; }
.sk-hero__slide:nth-child(2),
.sk-hero__slide:nth-child(2) img { animation-delay: 6s; }
.sk-hero__slide:nth-child(3),
.sk-hero__slide:nth-child(3) img { animation-delay: 12s; }

@keyframes skHeroFade {
	0%      { opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
	19.44%  { opacity: 1; animation-timing-function: linear; }
	33.33%  { opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
	52.78%  { opacity: 0; animation-timing-function: linear; }
	100%    { opacity: 0; }
}
@keyframes skHeroKenBurns {
	0%      { transform: scale(1) translateZ(0);    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
	52.78%  { transform: scale(1.08) translateZ(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
	75%     { transform: scale(1) translateZ(0);    animation-timing-function: linear; }
	100%    { transform: scale(1) translateZ(0); }
}

/* --- 「Be your best self.」手書き風タグライン --- */
.sk-hero__tagline {
	position: absolute;
	right: clamp(1rem, 4vw, 2.5rem);
	bottom: clamp(0.75rem, 2.5vw, 1.5rem); /* 斜め白三角の中（斜め線の下）に収める */
	z-index: 5; /* 斜め白マスク(::after z1)より前面に出してタグラインを見せる */
	color: var(--sk-accent);
	font-family: "Brush Script MT", "Snell Roundhand", "Apple Chancery", cursive;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-style: italic;
	line-height: 1.1;
	text-align: right;
	font-weight: 400;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

/* --- アクセシビリティ: モーション軽減 --- */
@media (prefers-reduced-motion: reduce) {
	.sk-hero__slide,
	.sk-hero__slide img {
		transition: none;
		animation: none;
	}
	.sk-hero__slide img {
		transform: none;
	}
}

/* --- FV 証拠チップ群 --- */
.sk-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.125rem 0.5rem 0.875rem;
	background: var(--sk-accent-pale);
	border-radius: var(--sk-radius-pill);
	font-size: clamp(0.9375rem, 1.9vw, 1rem);
	font-weight: 600;
	color: var(--sk-text);
	letter-spacing: 0.03em;
	white-space: nowrap;
	line-height: 1.4;
}

/* チップ用 inline SVG アイコン */
.sk-hero__chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--sk-accent);
	flex-shrink: 0;
}
.sk-hero__chip-icon svg {
	width: 100%;
	height: 100%;
}

/* SP: 2列に自然折り返し */
@media (max-width: 767px) {
	.sk-hero__chips {
		justify-content: flex-start;
	}
}

/* --- FV LINE ボタン改善 --- */
/* LINE 公式ブランドアイコン（webp 画像） */
.sk-hero__btn-line-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	display: inline-block;
	object-fit: contain;
	border-radius: 0.25rem;
}

/* primary ボタン（LINE緑背景）では LINE 公式アイコンを白丸ベースに乗せて視認性確保 */
.sk-hero__btn--line .sk-hero__btn-line-icon {
	background: var(--sk-surface);
	padding: 0.125rem;
}

/* ghost ボタン: メールアイコン（inline SVG） */
.sk-hero__btn-mail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	color: var(--sk-accent);
	flex-shrink: 0;
}
.sk-hero__btn-mail-icon svg {
	width: 100%;
	height: 100%;
}

/* ghost ボタン: 枠を少し濃く（視認性改善） */
.sk-hero__btn--ghost {
	border-color: var(--sk-border-strong);
}

/* primary ボタン: LINE緑に変更し視認性を高める */
.sk-hero__btn--line {
	background: var(--sk-line);
	color: var(--sk-surface);
	box-shadow: var(--sk-shadow-cta);
}
.sk-hero__btn--line:hover {
	background: var(--sk-line-dark);
	opacity: 1;
}

/* --- CTA 下補足文 --- */
.sk-hero__note {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: clamp(0.6875rem, 1.4vw, 0.75rem);
	color: var(--sk-text-light);
	margin: 0;
	letter-spacing: 0.04em;
	line-height: 1.6;
}
.sk-hero__note-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.9375rem;
	height: 0.9375rem;
	color: var(--sk-accent);
	flex-shrink: 0;
}
.sk-hero__note-icon svg {
	width: 100%;
	height: 100%;
}

/* SP: CTAボタン最低高さ保証（タップ領域 44px以上） */
@media (max-width: 767px) {
	.sk-hero__btn {
		min-height: 52px;
		padding-block: 0.875rem;
	}
}


/* ---------------------------------------------------------
 * 2. Anxiety（不安の言語化セクション・吹き出しチップ版）
 *    - フルワイド淡ブルー背景
 *    - 左右上部に装飾ドット + 円
 *    - 中央見出しの両端に短い斜線アクセント
 *    - 吹き出しチップ 4 つ（下に三角の尾）
 * --------------------------------------------------------- */
.sk-anxiety {
	position: relative;
	background: transparent; /* 淡ブルーは ::before に移し、フルワイド斜め背景にする */
	overflow: visible;       /* 斜め背景の上下はみ出しを見せる（横は body の overflow-x:clip が吸収） */
	/* VOICE への「導入」なので余白は控えめに（VOICE より目立たせない） */
	padding-block: clamp(3rem, 6vw, 4rem);
}
/* 青背景セクション/STAFF と同方式・同角度のフルワイド斜め淡ブルー背景。
 * top/bottom を負値ではみ出させ、隣接セクションとの境界で斜めが途切れないようにする。 */
.sk-anxiety::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	top: -3.5rem;
	bottom: -3.5rem;
	background: var(--sk-bg-sub);
	transform: skewY(var(--sk-slant));
	transform-origin: center;
	z-index: 0;
	pointer-events: none;
}

/* 左右の装飾（ドット模様 + 装飾円） */
.sk-anxiety__deco {
	position: absolute;
	top: 0;
	width: 200px;
	height: 200px;
	color: var(--sk-accent-soft);
	pointer-events: none;
	z-index: 0;
}
.sk-anxiety__deco svg {
	width: 100%;
	height: 100%;
	display: block;
}
.sk-anxiety__deco--left {
	left: 0;
	transform: translate(-20%, -10%);
}
.sk-anxiety__deco--right {
	right: 0;
	transform: translate(20%, -10%);
}
@media (max-width: 767px) {
	.sk-anxiety__deco {
		width: 130px;
		height: 130px;
	}
}

/* container を装飾の上に重ねる */
.sk-anxiety__inner {
	position: relative;
	z-index: 1;
}

/* --- 見出し --- */
.sk-anxiety__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-align: center;
	font-family: var(--sk-font-heading);
	font-size: clamp(1.25rem, 3.2vw, 1.875rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--sk-text);
	margin: 0 0 2.25rem;
}
.sk-anxiety__title-text {
	display: inline-block;
}
.sk-anxiety__title-accent {
	width: clamp(20px, 3vw, 30px);
	height: clamp(16px, 2.4vw, 24px);
	color: var(--sk-text);
	flex-shrink: 0;
}
@media (max-width: 480px) {
	.sk-anxiety__title {
		gap: 0.5rem;
	}
}

/* --- チップ群（吹き出し型） --- */
.sk-anxiety__chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 0 auto 2rem;
	padding: 0;
	list-style: none;
	max-width: 880px;
}
@media (max-width: 767px) {
	.sk-anxiety__chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem;
		max-width: 480px;
	}
}

/* 各チップ = 吹き出し（白背景 + 下に三角の尾） */
.sk-anxiety__chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 0.875rem 0.875rem 0.75rem;
	background: var(--sk-surface);
	border: 1px solid var(--sk-border);
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(74, 141, 184, 0.06);
	font-size: clamp(0.8125rem, 1.6vw, 0.9375rem);
	font-weight: 500;
	color: var(--sk-text);
	line-height: 1.5;
}

/* 三角の尾（下方向） */
.sk-anxiety__chip::before,
.sk-anxiety__chip::after {
	content: "";
	position: absolute;
	left: 26px;
	width: 0;
	height: 0;
	border-style: solid;
}
/* 尾の外枠 */
.sk-anxiety__chip::before {
	bottom: -9px;
	border-width: 9px 7px 0 7px;
	border-color: var(--sk-border) transparent transparent transparent;
}
/* 尾の白塗り */
.sk-anxiety__chip::after {
	bottom: -7px;
	border-width: 8px 6px 0 6px;
	border-color: var(--sk-surface) transparent transparent transparent;
}

/* 人物アイコン（円フレーム + 顔シルエット） */
.sk-anxiety__chip-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
}
.sk-anxiety__chip-person {
	width: 100%;
	height: 100%;
	color: var(--sk-text-mid);
}

.sk-anxiety__chip-text {
	display: inline-block;
	letter-spacing: 0.02em;
}

/* --- リード文 --- */
.sk-anxiety__lead {
	text-align: center;
	color: var(--sk-text);
	font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.95;
	letter-spacing: 0.04em;
	margin: 1.75rem 0 0;
}

/* --- promise-card 単体（reasons セクションで再利用される共通コンポーネント） --- */
.sk-promise-card {
	background: var(--sk-surface);
	border: 1px solid var(--sk-border);
	border-radius: 10px;
	padding: 1.5rem 1.25rem 1.625rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sk-promise-card__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.sk-promise-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1.5px solid var(--sk-accent-soft);
	border-radius: 50%;
	color: var(--sk-accent);
	flex-shrink: 0;
}
.sk-promise-card__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}
.sk-promise-card__title {
	margin: 0;
	font-family: var(--sk-font-heading);
	font-size: clamp(1.0625rem, 2vw, 1.1875rem);
	font-weight: 700;
	color: var(--sk-text);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* --- 画像枠（後で配置するプレースホルダー対応） ---
 * STAFF の形状言語を共有: メディア上端を軽い右上がり斜めライン化。
 * テキストボックスは四角のまま（可読性維持）。 */
.sk-promise-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sk-bg-sub);
	clip-path: var(--sk-card-clip);
}
@media (max-width: 599px) {
	.sk-promise-card__media {
		clip-path: var(--sk-card-clip-soft);
	}
}
.sk-promise-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sk-promise-card__media-placeholder {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, var(--sk-bg-sub) 0%, var(--sk-surface) 100%);
}

/* --- 箇条書き --- */
.sk-promise-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sk-promise-card__item {
	position: relative;
	padding-left: 1rem;
	font-size: clamp(0.875rem, 1.7vw, 0.9375rem);
	font-weight: 500;
	color: var(--sk-text);
	line-height: 1.6;
}
.sk-promise-card__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.625em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sk-accent);
}

/* --- 詳しく見るリンク --- */
.sk-promise-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--sk-text);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	padding-top: 0.25rem;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.sk-promise-card__link:hover {
	opacity: 0.7;
	transform: translateX(2px);
}


/* ---------------------------------------------------------
 * 3. Numbers（数字で見るSOY-KUFU）リデザイン版
 * 構成: 左大見出し + 右二重リング円 + 下サブ4セル
 * --------------------------------------------------------- */

/* --- 上段 hero: 左 intro + 右 highlight --- */
.sk-numbers__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.sk-numbers__hero {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 5vw, 4rem);
	}
}

/* --- 左カラム: intro --- */
.sk-numbers__intro {
	position: relative;
	padding-left: clamp(1rem, 3vw, 1.75rem);
}
/* 左縦アクセント線 */
.sk-numbers__intro::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 3px;
	background: linear-gradient(180deg, var(--sk-accent-dark) 0%, transparent 100%);
	border-radius: 2px;
}
.sk-numbers__en {
	display: block;
	font-family: var(--sk-font-en);
	font-size: clamp(0.875rem, 1.6vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--sk-accent-dark);
	margin-bottom: 0.875rem;
}
.sk-numbers__title {
	font-family: var(--sk-font-heading);
	font-size: clamp(2rem, 5.4vw, 3.25rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--sk-text);
	margin: 0 0 1.25rem;
}
.sk-numbers__lead {
	font-size: clamp(0.875rem, 1.7vw, 1rem);
	line-height: 1.95;
	color: var(--sk-text-mid);
	margin: 0;
	letter-spacing: 0.03em;
}

/* --- 右カラム: 二重リング highlight --- */
.sk-numbers__highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.sk-numbers__ring {
	position: relative;
	width: min(78vw, 300px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--sk-accent-pale);
	display: grid;
	place-items: center;
	/* 影を控えめに: 上品さ優先 */
	box-shadow: 0 4px 20px rgba(74, 141, 184, 0.12);
}
/* 外側薄リング装飾（上品に、dashed を細く） */
.sk-numbers__ring::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1px solid var(--sk-accent-soft);
	opacity: 0.6;
	pointer-events: none;
}
/* 装飾アクセント弧（透明度を下げて控えめに） */
.sk-numbers__ring::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	border-top-color: var(--sk-accent);
	border-right-color: var(--sk-accent);
	opacity: 0.5;
	transform: rotate(-35deg);
	pointer-events: none;
}
.sk-numbers__ring-inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.sk-numbers__h-label {
	font-size: clamp(0.875rem, 1.8vw, 1rem);
	font-weight: 600;
	color: var(--sk-text);
	letter-spacing: 0.08em;
}
.sk-numbers__h-value {
	font-family: var(--sk-font-en);
	font-size: clamp(4rem, 14vw, 6.25rem);
	font-weight: 800;
	line-height: 1;
	color: var(--sk-accent-dark);
	letter-spacing: -0.02em;
}
.sk-numbers__h-unit {
	font-family: var(--sk-font-body);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	margin-left: 0.25rem;
	color: var(--sk-accent-dark);
}
.sk-numbers__h-caption {
	max-width: 22em;
	text-align: center;
	font-size: clamp(0.75rem, 1.4vw, 0.8125rem);
	color: var(--sk-text-light);
	line-height: 1.7;
	margin: 0;
}

/* --- 下段: サブ数値 4 セル --- */
.sk-numbers__subs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.sk-numbers__subs {
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
	}
}
.sk-numbers__sub {
	background: var(--sk-surface);
	border: 1px solid var(--sk-border);
	border-radius: 8px;
	padding: 1.25rem 1rem 1.125rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sk-numbers__sub:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.sk-numbers__sub-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--sk-accent-dark);
	margin-bottom: 0.25rem;
}
.sk-numbers__sub-icon svg {
	width: 1.75rem;
	height: 1.75rem;
}
.sk-numbers__sub-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--sk-text-mid);
	letter-spacing: 0.06em;
}
.sk-numbers__sub-value {
	font-family: var(--sk-font-en);
	font-size: clamp(1.5rem, 3.6vw, 1.875rem);
	font-weight: 700;
	color: var(--sk-text);
	line-height: 1.1;
	letter-spacing: 0.01em;
}
.sk-numbers__sub-unit {
	font-family: var(--sk-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	margin-left: 2px;
	color: var(--sk-text-mid);
}
.sk-numbers__sub-note {
	font-size: 0.6875rem;
	color: var(--sk-text-light);
	line-height: 1.6;
	margin-top: 0.125rem;
}


/* ---------------------------------------------------------
 * 4. Reasons（安心して努力できる、4つの理由）
 * 1 列 stack × 横長ワイドカード。偶数番は左右反転で交互配置。
 * 背景に透かし大数字 "01" を配置してカッコ良さを演出。
 * HTML 構造: .sk-promise-card--reason > [ .__media, .__content ]
 * --------------------------------------------------------- */
.sk-reasons__cards {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 5vw, 4rem);
}

/* --- reasons 用ワイドカード本体（promise-card を上書き） --- */
.sk-promise-card--reason {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	padding: 0;
	border: none;
	background: transparent;
	overflow: visible;
}
@media (min-width: 768px) {
	.sk-promise-card--reason {
		grid-template-columns: 1.15fr 1fr;
		gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
		padding: 1.5rem 0;
	}
	/* 偶数番は左右反転（content を左、media を右へ） */
	.sk-promise-card--reason:nth-child(even) .sk-promise-card__media   { order: 2; }
	.sk-promise-card--reason:nth-child(even) .sk-promise-card__content { order: 1; }
}

/* --- 透かし大数字（背景装飾）: 濃度を抑えて上品に --- */
.sk-promise-card--reason::before {
	content: attr(data-num);
	position: absolute;
	top: -1rem;
	left: -0.5rem;
	font-family: var(--sk-font-en);
	font-size: clamp(5rem, 14vw, 11rem);
	font-weight: 800;
	color: var(--sk-accent);
	/* 0.09 → 0.055: 主張を抑え、白ベースに馴染ませる */
	opacity: 0.055;
	line-height: 1;
	letter-spacing: -0.05em;
	z-index: 0;
	pointer-events: none;
}
@media (min-width: 768px) {
	.sk-promise-card--reason::before {
		top: -1.5rem;
		left: -2rem;
	}
	.sk-promise-card--reason:nth-child(even)::before {
		left: auto;
		right: -2rem;
	}
}

/* --- Reason 03 仮ビジュアル（画像未受領）--- */
/* 淡ブルーグラデーション背景 + 吹き出しアイコンを中央配置 */
.sk-promise-card__media-placeholder--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		135deg,
		var(--sk-accent-pale) 0%,
		var(--sk-bg-sub) 100%
	);
}

.sk-promise-card__placeholder-icon {
	width: clamp(3rem, 10vw, 5rem);
	height: clamp(3rem, 10vw, 5rem);
	color: var(--sk-accent-light);
	opacity: 0.7;
}

/* --- reasons カード: 枠・影を最小化して白ベースに馴染ませる --- */
/* SP でのカード間余白を少し詰める（カードだらけ感の軽減） */
.sk-reasons__cards {
	gap: clamp(2.5rem, 6vw, 3.5rem);
}

/* points リストのドットを淡ブルーに統一（既存 --sk-accent は同じなので確認のみ） */
.sk-promise-card--reason .sk-promise-card__item::before {
	background: var(--sk-accent-light);
}

/* --- 画像エリア --- */
.sk-promise-card--reason .sk-promise-card__media {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}
@media (min-width: 768px) {
	.sk-promise-card--reason .sk-promise-card__media {
		aspect-ratio: 5 / 4;
	}
}

/* --- content wrapper --- */
.sk-promise-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* --- Reason 番号ラベル（横線付き） --- */
.sk-promise-card__num {
	display: inline-flex;
	align-items: center;
	font-family: var(--sk-font-en);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--sk-accent-dark);
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: 0;
}
.sk-promise-card__num::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2rem;
	height: 1px;
	background: var(--sk-accent-dark);
}

/* --- 本文 --- */
.sk-promise-card__body {
	font-size: clamp(0.875rem, 1.7vw, 0.9375rem);
	line-height: 1.95;
	color: var(--sk-text-mid);
	margin: 0;
}

/* --- title は reasons では少し大きく --- */
.sk-promise-card--reason .sk-promise-card__title {
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	line-height: 1.5;
}


/* ---------------------------------------------------------
 * 5. Message（代表メッセージ抜粋）
 *
 * フルワイド + 左右分割レイアウト:
 *   - セクション全体は親 .l-container を突き破って画面端〜端
 *   - PC (>=768px): grid 1fr 1fr。左に横長気味の代表写真（画面左端ピッタリ）、
 *     右にテキストブロック（テキスト上揃え・適度な内側パディング）
 *   - SP: 縦積み。写真は画面横幅いっぱいで横長 4:3、テキストは下にコンパクトに
 *
 *   セクション縦余白は控えめ。写真は grid stretch + object-fit:cover で
 *   PCではテキスト側の自然な高さに追従しつつ min/max で潰れ・伸び過ぎを防ぐ。
 * --------------------------------------------------------- */

.sk-message {
	/* viewport 全幅突き抜け（親 .l-container max-width:1200px + padding-inline を確実相殺）
	   古典パターン: left/right:50% + margin-left/right:-50vw + width:100vw。
	   親 padding に左右されず、必ず viewport x=0 ～ x=100vw に展開される。 */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	/* 下に十分な余白を取り、ボタンを次セクション(day-schedule)の斜め青背景より
	   上に逃がす。z-index は付けない（付けると斜め青を覆い隠し上辺が水平に見える）。
	   余白の下端に斜め青が食い込むことで、message と day-schedule の境界が斜めになる。 */
	padding-block: 0 6rem;
	background: var(--sk-bg);
}

.sk-message__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
}
@media (min-width: 768px) {
	.sk-message__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- 写真 ---
 *   SP: aspect-ratio 4/3（横長）でコンパクトに
 *   PC: aspect-ratio を解除し、grid stretch でテキスト側の高さに追従。
 *       min/max-height で 350〜480px の範囲に収める。
 */
.sk-message__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sk-bg-sub);
	/* SP: 写真下辺を斜めカット（縦積みなので下を斜めに） */
	clip-path: polygon(0 0, 100% 0, 100% 94%, 0 96%);
}
@media (min-width: 768px) {
	.sk-message__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 360px;
		max-height: 480px;
		/* PC: 写真右辺をテキスト側へ斜めカット（STAFF と同方向の右上がり） */
		clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
	}
}
.sk-message__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 縦長顔写真をクロップしても頭が切れないよう上端基準で配置 */
	object-position: center top;
	display: block;
}

/* --- テキスト --- */
.sk-message__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.75rem, 6vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
	max-width: 560px;
	margin-inline: auto;
}
@media (min-width: 768px) {
	.sk-message__body {
		justify-content: flex-start;
		gap: 1rem;
		padding-block: clamp(2rem, 4vw, 3rem);
		padding-inline: clamp(2rem, 5vw, 4rem);
	}
}

.sk-message__en {
	display: inline-block;
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-small);
	font-weight: 500;
	color: var(--sk-accent-dark);
	letter-spacing: var(--sk-tracking-en);
	text-transform: uppercase;
}

.sk-message__title {
	font-family: var(--sk-font-heading);
	font-size: clamp(1.5rem, 4.4vw, 2rem);
	font-weight: 600;
	color: var(--sk-text);
	line-height: 1.45;
	letter-spacing: 0.04em;
	margin: 0;
}

.sk-message__lead {
	color: var(--sk-text);
	font-size: var(--sk-text-body);
	line-height: 1.85;
	margin: 0;
}

.sk-message__sign {
	color: var(--sk-text);
	font-size: var(--sk-text-body);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0;
}

/* --- ボタン「メッセージ全文を見る ›」---
 *   角丸長方形（border-radius 6px）、細枠、横広め縦狭め。
 *   左にラベル、右端に矢印 ›。
 */
.sk-message__more {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-width: 260px;
	margin-top: 0.25rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--sk-border-strong);
	border-radius: 6px;
	color: var(--sk-text);
	font-size: var(--sk-text-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	background: transparent;
	transition: var(--sk-transition);
}
.sk-message__more::after {
	content: "›";
	font-family: var(--sk-font-en);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--sk-text);
	transition: transform 0.25s ease;
}
.sk-message__more:hover {
	background: var(--sk-text);
	color: var(--sk-surface);
	border-color: var(--sk-text);
}
.sk-message__more:hover::after {
	color: var(--sk-surface);
	transform: translateX(3px);
}


/* ---------------------------------------------------------
 * 6. Day Schedule（1日のスケジュール）
 * --------------------------------------------------------- */
.sk-schedule {
	max-width: var(--sk-content-narrow);
	margin-inline: auto;
	padding-left: 1rem;
}

.sk-schedule__item {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 1rem;
	position: relative;
	padding-bottom: 1.5rem;
}
.sk-schedule__item:last-child {
	padding-bottom: 0;
}

.sk-schedule__time {
	font-family: var(--sk-font-en);
	font-weight: 600;
	color: var(--sk-accent-dark);
	font-size: 1.0625rem;
	letter-spacing: 0.04em;
	padding-top: 2px;
}

.sk-schedule__dot {
	position: absolute;
	left: 4rem;
	top: 0.6rem;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sk-accent);
	box-shadow: 0 0 0 4px var(--sk-bg);
	z-index: 1;
}

.sk-schedule__item::after {
	content: "";
	position: absolute;
	left: 4rem;
	top: 0.6rem;
	bottom: 0;
	width: 2px;
	background: var(--sk-border-strong);
	transform: translateX(-50%);
}
.sk-schedule__item:last-child::after {
	display: none;
}

.sk-schedule__body {
	padding-left: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.sk-schedule__body {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.25rem;
	}
}

/* タイムライン写真: 全体のひし形デザインに統一（clip + drop-shadow） */
.sk-schedule__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sk-bg-sub);
	clip-path: var(--sk-card-clip);
	filter: drop-shadow(0 6px 16px rgba(26, 42, 74, 0.12));
}
@media (max-width: 599px) {
	.sk-schedule__media {
		clip-path: var(--sk-card-clip-soft);
	}
}
@media (min-width: 768px) {
	.sk-schedule__media {
		flex-shrink: 0;
		width: 220px;
	}
}
.sk-schedule__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* 上端基準で顔が切れないように */
	display: block;
}

.sk-schedule__text {
	flex: 1;
	min-width: 0;
	padding-top: 0.15rem;
}

.sk-schedule__title {
	font-weight: 600;
	color: var(--sk-text);
	margin: 0 0 0.25rem;
	font-size: var(--sk-text-body);
	line-height: var(--sk-leading-tight);
}

.sk-schedule__desc {
	color: var(--sk-text-mid);
	font-size: var(--sk-text-small);
	line-height: var(--sk-leading-loose);
	margin: 0;
}


/* ---------------------------------------------------------
 * 7. Curriculum（教育カリキュラム）
 * --------------------------------------------------------- */
.sk-curriculum__intro {
	text-align: center;
	color: var(--sk-text-mid);
	font-size: var(--sk-text-small);
	line-height: var(--sk-leading-loose);
	margin-bottom: 1.5rem;
}

.sk-curriculum__steps {
	display: grid;
	gap: 0.75rem;
}
@media (min-width: 768px) {
	.sk-curriculum__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
}

.sk-curriculum-step {
	background: var(--sk-surface);
	border-radius: var(--sk-radius-card);
	padding: 1.125rem;
	box-shadow: var(--sk-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sk-curriculum-step__year {
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-small);
	color: var(--sk-accent-dark);
	letter-spacing: var(--sk-tracking-en);
}

.sk-curriculum-step__title {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-h3);
	font-weight: 600;
	color: var(--sk-text);
	margin: 0;
	line-height: var(--sk-leading-tight);
}

.sk-curriculum-step__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	color: var(--sk-text-mid);
	font-size: var(--sk-text-small);
	line-height: var(--sk-leading-loose);
}

.sk-curriculum__note {
	margin-top: 1.5rem;
	padding: 1rem 1.125rem;
	background: var(--sk-accent-pale);
	border-radius: var(--sk-radius-card);
	font-size: var(--sk-text-small);
	line-height: var(--sk-leading-loose);
	color: var(--sk-text);
}


/* ---------------------------------------------------------
 * 2. VOICE（先輩の声 / 入社前の不安解消）
 *    FV 直後配置。STAFF が見せ場のため、ここは軽く上品に。
 *    「不安 → 支え → 安心」を引用符・淡コーラル縦線で柔らかく見せる。
 * --------------------------------------------------------- */
.sk-voices__grid {
	display: grid;
	gap: 1rem;
}
@media (min-width: 768px) {
	.sk-voices__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
		align-items: stretch;
	}
}

/* 全体のカード形状言語（STAFF/reasons/gallery）に統一: ひし形 clip + drop-shadow 縁。
 * clip-path 要素は border が効かないため縦線/枠線は使わず、コーラルは番号・引用符の差し色のみ。 */
.sk-voice {
	position: relative;
	background: var(--sk-surface);
	padding: 1.5rem 1.5rem 2.25rem; /* 下辺の斜めカット分を考慮 */
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	clip-path: var(--sk-card-clip);
	filter:
		drop-shadow(0 0 1px rgba(26, 42, 74, 0.32))
		drop-shadow(0 12px 24px rgba(26, 42, 74, 0.20));
}
@media (max-width: 599px) {
	.sk-voice {
		clip-path: var(--sk-card-clip-soft);
	}
}

.sk-voice__num {
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-small);
	letter-spacing: var(--sk-tracking-en);
	color: var(--sk-accent-coral);
}

/* 不安テーマ見出し（引用符付き） */
.sk-voice__theme {
	position: relative;
	margin: 0;
	font-family: var(--sk-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--sk-text);
	line-height: var(--sk-leading-tight);
}
.sk-voice__theme-mark {
	font-family: var(--sk-font-en);
	font-size: 1.6em;
	color: var(--sk-accent-coral-soft);
	line-height: 0;
	margin-right: 0.1em;
	vertical-align: -0.35em;
}

.sk-voice__text {
	margin: 0;
	color: var(--sk-text-mid);
	font-size: var(--sk-text-small);
	line-height: var(--sk-leading-loose);
}

/* 属性（小さな円形写真 + テキスト） */
.sk-voice__person {
	margin-top: auto;
	padding-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-top: 1px solid var(--sk-border);
}
.sk-voice__avatar {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--sk-radius-pill);
	overflow: hidden;
	background: var(--sk-bg-sub);
}
.sk-voice__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.sk-voice__attr {
	font-size: var(--sk-text-small);
	color: var(--sk-text-mid);
	letter-spacing: 0.02em;
}

/* SP: 余白・行間を広めに（下辺斜めカット分の padding-bottom を確保） */
@media (max-width: 599px) {
	.sk-voice {
		padding: 1.5rem 1.375rem 2.25rem;
	}
	.sk-voice__text {
		line-height: 1.95;
	}
}


/* ---------------------------------------------------------
 * 9. Gallery（サロンの雰囲気）
 * --------------------------------------------------------- */
.sk-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
}
@media (min-width: 768px) {
	.sk-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 0.75rem;
	}
}

.sk-gallery__item {
	position: relative;
	aspect-ratio: 1 / 1;
	margin: 0;
	background: var(--sk-bg-sub);
	overflow: hidden;
	clip-path: var(--sk-card-clip); /* 全画像をひし形に統一 */
}
@media (max-width: 599px) {
	.sk-gallery__item {
		clip-path: var(--sk-card-clip-soft);
	}
}
.sk-gallery__item img,
.sk-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.sk-gallery__item:hover .sk-gallery__img {
	transform: scale(1.05);
}

/* キャプション: 画像下部にグラデーションオーバーレイ */
.sk-gallery__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem 0.75rem 0.5rem;
	background: linear-gradient(to top, rgba(31, 42, 51, 0.55), rgba(31, 42, 51, 0));
	color: var(--sk-surface);
	font-size: var(--sk-text-mini);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

/* フォールバック: 画像未登録時の文字プレースホルダー */
.sk-gallery__item--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sk-text-light);
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-mini);
	letter-spacing: var(--sk-tracking-en);
}


/* ---------------------------------------------------------
 * 10. Requirements（募集要項）
 * --------------------------------------------------------- */
.sk-requirements__table {
	background: var(--sk-surface);
	border-radius: var(--sk-radius-card);
	box-shadow: var(--sk-shadow-card);
	overflow: hidden;
	max-width: 760px;
	margin-inline: auto;
}

.sk-requirements__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
	padding: 1rem 1.125rem;
	border-top: 1px solid var(--sk-border);
}
.sk-requirements__row:first-child {
	border-top: 0;
}
@media (min-width: 768px) {
	.sk-requirements__row {
		grid-template-columns: 8rem 1fr;
		gap: 1.25rem;
		padding: 1.125rem 1.5rem;
		align-items: baseline;
	}
}

.sk-requirements__label {
	font-weight: 600;
	color: var(--sk-text);
	font-size: var(--sk-text-small);
	letter-spacing: 0.04em;
}

.sk-requirements__value {
	color: var(--sk-text);
	font-size: var(--sk-text-body);
	line-height: var(--sk-leading-loose);
}

.sk-requirements__note {
	margin-top: 1rem;
	text-align: center;
	color: var(--sk-text-light);
	font-size: var(--sk-text-mini);
}


/* ---------------------------------------------------------
 * 11. FAQ（よくある不安Q&A）
 * --------------------------------------------------------- */
.sk-faq__list {
	max-width: 760px;
	margin-inline: auto;
}


/* ---------------------------------------------------------
 * 12. Flow（応募から入社までの流れ）
 * --------------------------------------------------------- */
.sk-flow {
	max-width: 760px;
	margin-inline: auto;
}

.sk-flow__item {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1rem;
	position: relative;
	padding-bottom: 1.5rem;
}
.sk-flow__item:last-child {
	padding-bottom: 0;
}

.sk-flow__num {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--sk-accent);
	color: var(--sk-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sk-font-en);
	font-weight: 600;
	z-index: 1;
}

.sk-flow__item::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	top: 2.5rem;
	bottom: 0;
	width: 2px;
	background: var(--sk-border-strong);
}
.sk-flow__item:last-child::after {
	display: none;
}

.sk-flow__body {
	padding-top: 0.25rem;
}

.sk-flow__title {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-h3);
	font-weight: 600;
	color: var(--sk-text);
	margin: 0 0 0.25rem;
	line-height: var(--sk-leading-tight);
}

.sk-flow__desc {
	color: var(--sk-text-mid);
	font-size: var(--sk-text-small);
	line-height: var(--sk-leading-loose);
}


/* ---------------------------------------------------------
 * 14. Blog Preview（採用ブログ導線）
 * --------------------------------------------------------- */
.sk-blog__grid {
	display: grid;
	gap: 1rem;
}
@media (min-width: 768px) {
	.sk-blog__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.25rem;
	}
}

.sk-blog-card {
	background: var(--sk-surface);
	border-radius: var(--sk-radius-card);
	box-shadow: var(--sk-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: var(--sk-transition);
}
.sk-blog-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sk-shadow-hover);
}

.sk-blog-card__thumb {
	aspect-ratio: 16 / 9;
	background: var(--sk-bg-sub);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sk-text-light);
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-small);
	letter-spacing: var(--sk-tracking-en);
}

.sk-blog-card__body {
	padding: 1rem 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sk-blog-card__category {
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-mini);
	letter-spacing: var(--sk-tracking-en);
	color: var(--sk-accent-dark);
}

.sk-blog-card__title {
	font-family: var(--sk-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--sk-text);
	margin: 0;
	line-height: var(--sk-leading-tight);
}

.sk-blog-card__excerpt {
	color: var(--sk-text-mid);
	font-size: var(--sk-text-small);
	line-height: var(--sk-leading-loose);
}

.sk-blog__more {
	margin-top: 1.5rem;
	text-align: center;
}


/* ---------------------------------------------------------
 * 6. Day Schedule - 成長ステップ（sk-growth）
 *    SP: 縦積み / PC: 横並び4ステップ
 * --------------------------------------------------------- */
.sk-growth__wrap {
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.sk-growth__heading {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-text-h3);
	font-weight: 600;
	color: var(--sk-text);
	text-align: center;
	margin-bottom: 1.75rem;
}

/* リスト reset */
.sk-growth {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	.sk-growth {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.sk-growth {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sk-growth__step {
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	gap: 0.375rem;
	background: var(--sk-surface);
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-card);
	padding: 1.25rem 1.125rem 1.375rem;
}

/* ステップ番号バッジ */
.sk-growth__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--sk-accent);
	color: var(--sk-surface);
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-small);
	font-weight: 700;
	margin-bottom: 0.375rem;
}

.sk-growth__period {
	font-family: var(--sk-font-en);
	font-size: var(--sk-text-mini);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-en);
	color: var(--sk-accent-dark);
	text-transform: uppercase;
}

.sk-growth__title {
	font-family: var(--sk-font-heading);
	font-size: 1rem;
	font-weight: 600;
	color: var(--sk-text);
	line-height: var(--sk-leading-tight);
}

.sk-growth__desc {
	font-size: var(--sk-text-small);
	color: var(--sk-text-mid);
	line-height: var(--sk-leading-loose);
	margin: 0;
}

/* PC: ステップ間の矢印コネクター（最後は除外） */
@media (min-width: 960px) {
	.sk-growth__step:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 2.25rem;
		right: -0.75rem;
		width: 0.5rem;
		height: 0.5rem;
		border-top: 2px solid var(--sk-border);
		border-right: 2px solid var(--sk-border);
		transform: rotate(45deg);
		z-index: 1;
	}
}

/* =========================================================
 * 青背景セクション(.sk-section--sub) 共通演出
 *   フロント限定で「フルワイド + 上下斜めエッジ」に統一。
 *   背景は ::before に逃がし skewY で傾け、top/bottom を負値で
 *   はみ出させてセクション境界で斜めが途切れないようにする。
 *   横スクロールは body の overflow-x: clip が吸収。
 *   STAFF の斜め背景と同角度(--sk-slant)で統一感を出す。
 * ========================================================= */
.sk-front-page .sk-section--sub {
	position: relative;
	background: transparent; /* base のベタ青を無効化し ::before へ移す */
	overflow: visible;
}
.sk-front-page .sk-section--sub::before {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	top: -3.5rem;
	bottom: -3.5rem;
	background: var(--sk-bg-sub);
	transform: skewY(var(--sk-slant));
	transform-origin: center;
	z-index: 0;
	pointer-events: none;
}
/* 中身を斜め背景より前面に */
.sk-front-page .sk-section--sub > * {
	position: relative;
	z-index: 1;
}

/* =========================================================
 * STAFF（在籍スタッフ一覧）
 *   - フルブリード（画面幅いっぱい）
 *   - 巨大な英字 STAFF（左上）+ 右上に Make Beauty, Make Smile.
 *   - 背景に大きな淡ブルーの斜め帯（左下→右上を横断）
 *   - PC は 5 枚カードを横いっぱいに展開、波打つベースラインで配置
 *   - アクセントは参照画像準拠のコーラル
 * ========================================================= */

.sk-staff {
	/* 親 .l-container (max-width:1200px) を突き抜けて viewport 全幅 */
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: visible; /* 斜め背景の上下はみ出しを clip しない（横は body 側 clip が吸収） */
	background: var(--sk-surface, #ffffff);
	padding: 4rem 0 5rem;
	/* STAFF セクション変数（差し色トークンを参照し全体と一元管理）。
	 * bg 系は STAFF 固有の淡ブルーなのでローカル定義を維持。 */
	--sk-staff-accent:      var(--sk-accent-coral);
	--sk-staff-accent-soft: var(--sk-accent-coral-soft);
	--sk-staff-title:       var(--sk-ink);
	--sk-staff-bg:          #E6EEF5;
	--sk-staff-bg-soft:     #EEF4F9;
}
@media (min-width: 1024px) {
	.sk-staff {
		padding: 6rem 0 7rem;
	}
}

/* ----- 背景: 大きな斜め帯（左下→右上） ----- */
.sk-staff__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}
/* 青背景セクションと同方式・同角度の淡青フルワイド斜め背景に統一。
 * top/bottom を負値ではみ出させ、隣接セクションとの境界で切れないようにする。 */
.sk-staff__bg::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -3.5rem;
	bottom: -3.5rem;
	background: var(--sk-bg-sub);
	transform: skewY(var(--sk-slant));
	transform-origin: center;
}

/* ----- インナー（max-width 制限なし、ウィンドウ幅いっぱい） ----- */
.sk-staff__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0 1.25rem;
}
@media (min-width: 768px) {
	.sk-staff__inner {
		padding: 0 2.5rem;
	}
}
@media (min-width: 1280px) {
	.sk-staff__inner {
		padding: 0 3.5rem;
	}
}

/* ----- ヘッダー ----- */
.sk-staff__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
	.sk-staff__head {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 3rem;
		margin-bottom: 4rem;
	}
}

.sk-staff__head-left {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sk-staff__en {
	display: block;
	font-family: var(--sk-font-en);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sk-staff-title);
	line-height: 0.95;
	font-size: clamp(4rem, 13vw, 10rem);
}

.sk-staff__sub {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: var(--sk-text, #1d2b3a);
	font-size: 0.9375rem;
	letter-spacing: 0.18em;
}
.sk-staff__sub-bar {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: var(--sk-staff-accent);
}

.sk-staff__head-right {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (min-width: 1024px) {
	.sk-staff__head-right {
		max-width: 22rem;
		padding-top: 0.5rem;
		flex-shrink: 0;
	}
}

.sk-staff__catch {
	margin: 0;
	font-family: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.25;
	color: var(--sk-staff-accent);
	letter-spacing: 0.01em;
}

.sk-staff__lead {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.95;
	color: var(--sk-text-mid, #4a5b6d);
	border-left: 2px solid var(--sk-staff-accent);
	padding-left: 0.85rem;
}

/* ----- カードグリッド ----- */
.sk-staff__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.sk-staff__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 1rem;
	}
}
@media (min-width: 900px) {
	.sk-staff__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.sk-staff__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;
		align-items: stretch; /* 5枚すべて同じ高さに揃える */
	}
}

/* ----- カード ----- */
/* カード全体を「右に傾いた平行四辺形」にクリップ。
 *   上辺・下辺: 右上がり（右が高い）で平行
 *   左辺・右辺: 右へ傾く（上端が下端より右）で平行
 * 4 点: TL(7%,6%) TR(100%,0) BR(93%,94%) BL(0,100%)
 *   左辺 TL→BL・右辺 TR→BR とも上が右にズレ＝右傾き。
 * 斜辺で削れるぶん body に左右・下の padding を多めに確保。
 * box-shadow は clip-path で潰れるので filter: drop-shadow に置換。 */
.sk-staff-card {
	position: relative;
	background: var(--sk-surface, #ffffff);
	display: flex;
	flex-direction: column;
	clip-path: var(--sk-card-clip);
	filter: drop-shadow(0 8px 18px rgba(26, 42, 74, 0.10)) drop-shadow(0 2px 4px rgba(26, 42, 74, 0.05));
}

/* 写真エリア */
.sk-staff-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--sk-staff-bg-soft);
	overflow: hidden;
}
.sk-staff-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.sk-staff-card__media-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sk-text-light, #94a3b8);
	font-family: var(--sk-font-en);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
}

/* 本文。斜辺(左右の右傾き + 下辺)で削れる分、左右と下の padding を確保。 */
.sk-staff-card__body {
	padding: 1rem 1.5rem 2.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sk-staff-card__num {
	font-family: var(--sk-font-en);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--sk-staff-accent);
	line-height: 1;
}

.sk-staff-card__name {
	margin: 0.2rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	line-height: 1.3;
}
.sk-staff-card__name-jp {
	font-family: var(--sk-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--sk-text, #1d2b3a);
	letter-spacing: 0.06em;
}
.sk-staff-card__name-en {
	font-family: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
	font-size: 1.1rem;
	color: var(--sk-staff-accent);
	letter-spacing: 0.01em;
}

.sk-staff-card__role {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sk-text-mid, #4a5b6d);
	letter-spacing: 0.02em;
}
.sk-staff-card__slash {
	margin: 0 0.5em;
	color: var(--sk-border, #cdd6df);
}

.sk-staff-card__comment {
	margin: 0.3rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.85;
	color: var(--sk-text, #1d2b3a);
}

.sk-staff-card__tags {
	list-style: none;
	padding: 0;
	margin: 0.6rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.sk-staff-card__tag {
	font-size: 0.6875rem;
	color: var(--sk-text-mid, #4a5b6d);
	background: transparent;
	border: 1px solid var(--sk-border, #cdd6df);
	border-radius: 3px;
	padding: 0.2em 0.6em;
	letter-spacing: 0.02em;
}

/* ----- 「他のスタッフも見る」 ----- */
.sk-staff__more {
	margin: 3rem 0 0;
	text-align: right;
}
@media (min-width: 1024px) {
	.sk-staff__more {
		margin-top: 4rem;
	}
}
.sk-staff__more-link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: var(--sk-text-mid, #4a5b6d);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.sk-staff__more-line {
	display: inline-block;
	width: 4.5rem;
	height: 1px;
	background: var(--sk-staff-title);
	opacity: 0.45;
}
.sk-staff__more-arrow {
	color: var(--sk-staff-title);
	font-size: 1.05em;
	margin-left: -0.55rem;
}

/* ----- SP 調整: 斜めカット弱め + 帯 opacity 軽減 ----- */
@media (max-width: 599px) {
	.sk-staff-card {
		clip-path: var(--sk-card-clip-soft);
	}
	.sk-staff-card__body {
		padding-bottom: 2rem;
	}
	.sk-staff__bg::before {
		opacity: 0.55;
	}
	.sk-staff__bg::after {
		display: none;
	}
}

/* =========================================================
 * CTA フルワイドバナー（LINE見学予約）
 *   viewport 全幅 + 背景写真 + 暗オーバーレイ + 上下斜めエッジ。
 *   白ボックスは透明化し、背景写真の上に白文字を直接乗せる。
 *   斜めは clip-path で（skewY だと背景写真が歪むため）。
 *   背景 URL は uploads 絶対パス（本番移行時に置換対象）。
 * ========================================================= */
.sk-cta-fullwidth {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background-image:
		linear-gradient(rgba(20, 34, 54, 0.58), rgba(20, 34, 54, 0.58)),
		url('/wp-content/uploads/2026/05/P1019069-scaled.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	/* 上下を斜めエッジに（背景写真は歪まない） */
	clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
}
.sk-cta-fullwidth > .sk-container {
	position: relative;
	z-index: 1;
}
/* 白ボックスを透明化し背景写真を活かす */
.sk-cta-fullwidth .sk-cta-banner {
	background: transparent;
	border-radius: 0;
}
/* 写真の上で読めるよう白文字＋テキストシャドウ */
.sk-cta-fullwidth .sk-cta-banner__lead {
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.sk-cta-fullwidth .sk-cta-banner__sub,
.sk-cta-fullwidth .sk-cta-banner__note {
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
/* アウトラインボタンを白枠化（写真上で視認） */
.sk-cta-fullwidth .sk-btn--outline {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.06);
}
.sk-cta-fullwidth .sk-btn--outline:hover {
	background: rgba(255, 255, 255, 0.16);
}