* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* 横方向のはみ出しを見せない */
	font-family: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* PC表示では左右に余白を作り、SPベースの1カラムを最大 750px で中央寄せ */
body {
	background: #fff;
}
/* 例：見出しゴシック（環境にあればそれを優先、なければ現状フォントへフォールバック） */
:root{
	--font-heading-gothic: "見出ゴMB1", "中ゴシックBBB JIS2004", "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

/* FAQのQバッジだけ見出しゴシックに */
.faq__badge{
	font-family: var(--font-heading-gothic);
}

.page {
	max-width: 750px;
	margin: 0 auto;
	background: #fff;
}

/* ===== SP Hamburger Menu ===== */
.hamburger {
	position: static; /* ヘッダー内配置 */
	width: 44px;
	height: 30px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.9);
	display: grid;
	place-items: center;
}

/* ===== SP Fixed Header ===== */
.spHeader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1500;
	background: #fff;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.spHeader__inner {
	max-width: 750px;
	margin: 0 auto;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* ===== PC Header (not fixed) ===== */
.pcHeader {
	display: none;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pcHeader__inner {
	 /* max-width: 750px; */
	/* margin: 0 auto; */
	width: 100%;
	padding: 10px clamp(16px, 10vw, 300px);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

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

.pcHeader__logo {
	width: auto;
	height: 28px;
}

.pcHeader__tagline {
	font-size: 12px;
	font-weight: 700;
	color: #1fa9b3;
	white-space: nowrap;
}

.pcHeader__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pcHeader__pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	color: #333;
	text-decoration: none;
	background: #fff;
}

.spHeader__tagline {
	font-size: 12px;
	font-weight: 800;
	color: #1fa9b3;
	line-height: 1.2;
	margin: 0 0 6px;
}

.spHeader__logo {
	width: auto;
	height: 30px;
}

/* ヘッダー分だけページを下げる（被り防止） */

	.page {
		padding-top: 70px;
	}


.hamburger__bar {
	width: 30px;
	height: 2px;
	background: #333;
	border-radius: 999px;
}

.menuOverlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 1990;
	cursor: pointer;
	touch-action: manipulation;
}

.menuDrawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(340px, calc(100% - 60px)); /* 左に元サイトを少し残す */
	background: #fff;
	z-index: 1995;
	overflow: auto;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}

.menuDrawer__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 14px 14px 10px;
}

.menuDrawer__tagline {
	font-size: 12px;
	color: #2aa3ad;
	margin: 0 0 4px;
	line-height: 1.2;
}

.menuDrawer__logo {
	width: auto;
	height: 30px;
}

.menuDrawer__close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	font-size: 55px;
	line-height: 1;
	padding: 6px 10px;
	color: #2aa3ad;
}

.menuList {
	list-style: none;
	margin: 0;
	padding: 8px 0px 20px 60px;
	display: grid;
	gap: 3px;
}

.menuItem {
	width: 100%;
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 0;
	border-radius: 12px 0 0 12px;
	background: #E4F0F2;
	text-align: left;
	color: #333;
	font-size: 16px;
}

.menuItem img {
	width: 46px;
	height: 46px;
}

.menuItem--muted {
	background: #eee;
	color: #666;
	text-decoration: none
}

.menuItem--muted img {
	opacity: 0.85;
}

/* PCでは非表示
@media (min-width: 768px) {
	.spHeader {
		display: none;
	}
	.pcHeader {
		display: block;
	}
	.hamburger,
	.menuOverlay,
	.menuDrawer {
		display: none !important;
	}
} */

/* メニュー表示中はスクロール止める */
body.isMenuOpen {
	overflow: hidden;
}

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

/* cta_red.png だけに適用 */
img[src*="cta_red.png"] {
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}


.logoMarquee__viewport {
	overflow: hidden;
	/* 端をフェード（対応ブラウザのみ） */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* 2行×6列にするための上書き（既存のlogoMarquee関連を置き換え） */
.logoMarquee__track {
		display: flex;
		width: max-content;
		gap: 0; /* 2セットの間に隙間を作らない */
		animation: logoMarquee 40s linear infinite;
		will-change: transform;
	}
	
	.logoMarquee__list {
		display: grid;
		grid-template-columns: repeat(6, max-content);
		grid-template-rows: repeat(2, auto);
		gap: 10px 24px;
		padding: 6px 24px 6px 0;
		margin: 0;
		list-style: none;        /* ←これを追加 */
		padding-left: 0;         /* ←これも追加（ブラウザのデフォルトpaddingを消す） */
	}
	
	.logoMarquee__item {
		list-style: none;
	}
	
	/* 下段（2行目）だけ右にずらす：6列なので7〜12番目が2段目 */
	.logoMarquee__list .logoMarquee__item:nth-child(n+7):nth-child(-n+12) {
		transform: translateX(-110px);     /* まず大きくずらして視認 */
	}
	.logoMarquee__item img {
		width: auto;
		display: block;
		object-fit: contain;
	}


@keyframes logoMarquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.logoMarquee__track {
		animation: none;
	}
	.logoMarquee__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* .page {
	padding: 24px 16px 140px; /* 横幅は余白でOK（下部固定CTAに被らない余白を確保） */
 */

.fv {
	margin: 0 auto;
}

/* FV：背景画像の上にコピーを重ねる（レイアウト崩さない） */
.fv__hero{
	position: relative;
}

.fv__top{
	display: block;
	width: 100%;
	height: auto;
}

/* 3段コピー（画像上に絶対配置） */
.fvCopy{
	position: absolute;
	left: 50%;
	top: 62%;
	transform: translate(-50%, -50%);
	width: min(75%, 620px);
	display: grid;
	gap: 4px;
	pointer-events: auto; /* 画像上でもクリック邪魔しない */
}

/* 上の帯 */
.fvCopy__lead{
	background: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	color: #fff;
	font-weight: 900;
	text-align: center;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: clamp(14px, 4.2vw, 26px);
	line-height: 1.2;
	box-shadow: 0 14px 30px rgba(0,0,0,0.14);
	letter-spacing: 2px;
}

/* 白い大ボックス2段 */
.fvCopy__box{
	background: #fff;
	color: #22BAD9;
	font-weight: 900;
	text-align: center;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: clamp(32px, 8.5vw, 54px);
	line-height: 1.05;
	box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}

/* 文字だけグラデ（箱は白背景のまま） */
.fvCopy__boxText{
	display: inline-block;
	background-image: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent; /* Safari対策 */
}

@supports not (-webkit-background-clip: text){
	.fvCopy__boxText{
		color: #22BAD9;
		-webkit-text-fill-color: #22BAD9;
		background-image: none;
	}
}

@media (max-width: 360px){
	.fvCopy{ top: 63%; gap: 4px; }
	.fvCopy__box{ font-size: clamp(30px, 6vw, 44px); }
}

.fv__cta{
	display: block;
	margin: 0 auto;
	width: calc(100% - 32px); /* ←左右16pxずつ */
	max-width: none;
}
.fv__cta img{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}
.cta,
.fv__cta{
	width: calc(100% - 32px);
	max-width: 520px;
	margin: 0 auto;
}

/* ===== FV stats（画像パーツ + 文字コーディング） ===== */




.fvStats{
	position: relative;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	overflow: visible; /* 中身が切れないように（被り対策はfvStatsSectionのpaddingで担保） */
	/* container query（対応ブラウザで文字・余白を比率で追従させる） */
	container-type: inline-size;
}

.fvStats__bg{
	display: block;
	width: 100%;
	height: auto; /* 比率維持 */
}

.fvStats__card,
.fvStats__bar{
	position: absolute;
	z-index: 1;
}


/* カード2枚（bgに対して%配置） */
.fvStats__card{
	top: 35%;
	width: 38%;
	/* カード内も比率基準（対応ブラウザのみ） */
	container-type: inline-size;
}
.fvStats__card--students{
	left: 11%;
}
.fvStats__card--period{
	right: 11%;
}
/* 内定までの期間カードの「週間」だけ少し大きく */
.fvStats__card--period .fvStatsCard__unit{
	font-size: clamp(20px, 5.6vw, 48px); /* ここは好みで微調整 */
}
.fvStatsCard__unit,
.fvStatsCard__prefix{
	position: relative;
	bottom: 8%;
}

/* 下段バー（bgに対して%配置） */
.fvStats__bar{
	left: 11%;
	right: 11%;
	top: 74%;
	container-type: inline-size;
}

.fvStats__cardBg,
.fvStats__barBg{
	display: block;
	width: 100%;
	height: auto; /* 比率維持 */
}

.fvStatsCard__inner{
	position: absolute;
	--fvStatsCardInsetX: 8%;
	--fvStatsLineNudge: 0px; /* ライン開始位置の微調整（カード別に上書き） */
	inset: 10% var(--fvStatsCardInsetX) 10%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fvStatsCard__label{
	width: fit-content;
	color: #1F9DB6;
	font-size: clamp(14px, 3.2vw, 28px); /* fallback（cqw非対応） */
	line-height: 1.1;
	padding-bottom: 0.45em; /* 線との距離 */
	border-bottom: none; /* 既存ボーダーを消す */
	margin: 0;
	position: relative;
}

/* 画像の左端から、画像幅の約3/4 の線 */
.fvStatsCard__label::after{
	content: "";
	position: absolute;
	left: calc(-1 * var(--fvStatsCardInsetX) + var(--fvStatsLineNudge));
	bottom: 0;
	width: 75cqw; /* カード幅の3/4 */
	height: 3px;
	background: #0FA1BE;
}

.fvStatsCard__value{
	font-weight: 800;
	color: #1F9DB6;
	line-height: 0.9;
}

.fvStatsCard__value--period{
	display: flex;
	align-items: baseline;
	gap: 0.15em;
	flex-wrap: nowrap;
	white-space: nowrap;
	margin-top: 10px;
}
.fvStats__card--students .fvStatsCard__value--students{
	align-self: center;        /* 親(fvStatsCard__inner)内で中央 */
	justify-content: center;   /* 自身の中身も中央に */
	width: fit-content;        /* 余計に横に伸びない */
	margin-left: auto;
	margin-right: auto;        /* 念のため中央寄せを強制 */
	margin-top: 10px;
}

/* 登録学生数：15 の右に「万人（上）」「以上（下）」を縦積み */
.fvStatsCard__value--students{
	display: inline-flex;
	width: fit-content;
	align-items: flex-end;   /* 15の下端に合わせる */
	gap: 0.5em;
}

.fvStatsCard__num{
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: clamp(56px, 16vw, 140px); /* fallback（cqw非対応） */
	letter-spacing: -0.02em;
}

.fvStatsCard__unit,
.fvStatsCard__suffix{
	font-size: clamp(18px, 5vw, 44px); /* fallback（cqw非対応） */
	line-height: 1; /* 縦ズレ防止 */
}

.fvStatsCard__value--period .fvStatsCard__unit,
.fvStatsCard__value--period .fvStatsCard__suffix{
	display: inline-block;
	vertical-align: baseline;
}

.fvStatsCard__value--students .fvStatsCard__stack{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 0.95;
	margin-bottom: 0.08em; /* 15との縦位置微調整（必要なら0〜0.15em） */
}

.fvStatsCard__value--students .fvStatsCard__unit,
.fvStatsCard__value--students .fvStatsCard__suffix{
	display: block;
}

/* 「以上」だけ少し傾ける（添付の雰囲気） */
.fvStatsCard__value--students .fvStatsCard__suffix{
	transform-origin: left top;
}

.fvStatsCard__prefix{
	font-size: clamp(22px, 6vw, 54px); /* fallback（cqw非対応） */
}

/* 期間カード：最短を縦文字にして、fvStats__cardBg（デザイン画像）に寄せる */
.fvStats__card--period .fvStatsCard__value--period{
	align-items: flex-end; /* テキスト群を下揃え（最短の縦文字含む） */
	gap: 0.5em;
}

.fvStats__card--period .fvStatsCard__prefix{
	display: inline-block;
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1;
	margin-right: 0.05em;
}

.fvStats__card--period .fvStatsCard__inner{
	--fvStatsCardInsetX: 7%;
	--fvStatsLineNudge: -3cqw;
}

.fvStats__card--students .fvStatsCard__inner{
	--fvStatsLineNudge: -5cqw;
}

/* fvStatsCard__inner 基準で「数値ブロック」を中央寄せ（添付の見た目寄せ） */
.fvStats__card--period .fvStatsCard__inner,
.fvStats__card--students .fvStatsCard__inner{
	align-items: center;
}

/* ラベルは左寄せのまま */
.fvStats__card--period .fvStatsCard__label,
.fvStats__card--students .fvStatsCard__label{
	align-self: flex-start;
}

/* 念のため value ブロックも中央 */
.fvStats__card--period .fvStatsCard__value,
.fvStats__card--students .fvStatsCard__value{
	align-self: center;
}

.fvStatsBar__text{
	position: absolute;
	left: 10%;
	right: 10%;        /* ←追加：左右対称にする */
	top: 23%;
	transform: translateY(-50%);
	width: auto;       /* ←78%をやめる（左右指定で幅決まる） */
	text-align: center;/* ←中央揃え */
	color: #0FA1BE;
	font-size: clamp(18px, 14cqw, 44px);
	font-weight:800;
}

.fvStatsBar__text small{
	display: block;
	font-weight: 700;
	font-size: 0.65em;
}


/* SPでの微調整（添付レイアウトに寄せる） */
@media (max-width: 420px){
	.fvStats__card{
		top: 36%;
		width: 37%;
	}
	.fvStats__bar{
		top: 73%;
	}
}

/* container query対応ブラウザでは cqw（親要素幅%）で統一 */
@supports (font-size: 1cqw){
	.fvStatsCard__label{
		font-size: clamp(12px, 8.5cqw, 28px);
	}
	.fvStatsCard__label::after{
		height: max(2px, 0.5cqw);
	}
	.fvStatsCard__num{
		font-size: clamp(40px, 33cqw, 95px);
	}
	.fvStatsCard__unit,
	.fvStatsCard__suffix{
		font-size: clamp(18px, 14cqw, 44px);
	}
	.fvStatsCard__prefix{
		font-size: clamp(18px, 14cqw, 44px);
	}
	.fvStatsBar__text{
		font-size: clamp(12px, 4.8cqw, 28px);
	}
}

.pill {
	width: auto;
	margin: 24px auto 8px;
}

.sectionTitle {
	margin: 0 0 16px;
	text-align: center;
	font-size: 30px;
	font-weight: 800;
	color: #1F9DB6;
}

.awards,
.media {
	margin: 0 auto;
}

/* fvStatsSection直後で詰まりやすいので、awardsは少し上余白を確保 */
.awards{
	margin-top: 16px;
}

.awards__image,
.media__buttons {
	width: 100%;
}

.media {
	padding: 1px 0px 32px;
	background: linear-gradient(to bottom, #cfeff4 0%, #CAF7FE 70%, #ffffff 100%);
}

.media__cta {
	display: block;
	width: calc(100% - 32px); /* 他CTAと同じ（左右16px） */
	max-width: 520px;
	margin: 24px auto 0;
}

.mediaMarquee {
	margin: 8px 0 0;
	/* チップ：全体サイズはここだけで管理（縦横比は固定） */
	--chipW: clamp(160px, 50vw, 320px);
	--chipPadL: calc(var(--chipW) * 0.14);
	--chipPadR: calc(var(--chipW) * 0.14);   /* 右のメガホンぶん */
	--chipFont: clamp(12px, calc(var(--chipW) * 0.08), 26px);
	--chipOffset: calc(var(--chipW) * -0.55); /* 2段目のずらし */
}

.mediaMarquee__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.mediaMarquee__track {
	display: flex;
	width: max-content;
	gap: 0;
	animation: mediaMarquee 60s linear infinite; /* ゆっくり */
	will-change: transform;
}

.mediaMarquee__list {
	display: grid;
	grid-template-columns: repeat(9, max-content);
	grid-template-rows: repeat(2, auto);
	gap: 18px 24px; /* row-gap / column-gap */
	padding: 6px 24px 25px 0; /* 継ぎ目が自然になるよう右に余白 */
	margin: 0;
}

.mediaMarquee__item {
	list-style: none;
}

.mediaMarquee__chip{
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;

	width: var(--chipW);
	aspect-ratio: 16 / 7; /* media_chip_bg.png (768x336) */
	height: auto;
	text-align: center;


	/* 文字が長い時は省略（背景は伸びない） */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	background: url("../img/media_chip_bg.png") center / 100% 100% no-repeat;

	padding: 0 var(--chipPadR) 0 var(--chipPadL);
	font-size: var(--chipFont);
	line-height: 1;
	font-weight: 600;
	color: #333;
	filter: drop-shadow(0 10px 14px rgba(0,0,0,0.14));
}
/* 下段（2行目）だけ右にずらす：9列なので10〜18番目が2段目 */
.mediaMarquee__list .mediaMarquee__item:nth-child(n+10):nth-child(-n+18) {
	transform: translateX(var(--chipOffset));
}

@keyframes mediaMarquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mediaMarquee__track {
		animation: none;
	}
	.mediaMarquee__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}


.merits {
	margin: 0px auto 0;
	background: #fff;
	border-radius: 0;
	overflow: visible; /* hidden をやめる */
}

.merits__header {
	background: #1fa9b3;
	color: #fff;
}
/* 上部の白背景セクション */
.merits__intro {
	background: #fff;
	padding: clamp(30px, 5vw, 50px) clamp(12px, 6vw, 60px);
	text-align: center;   /* コンテンツを中央寄せ */

}

/* merits__intro.png をやめてコーディング化 */
.meritsIntro{
	max-width: 750px;
	margin: 0 auto;
	display: grid;
	justify-items: center;
	gap: clamp(16px, 3vw, 28px);
}

.meritsIntro__brand{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 2.2vw, 18px);
}

.meritsIntro__logo{
	width: auto;
	height: clamp(18px, 5.5vw, 52px);
}

.meritsIntro__wa{
	font-weight: 900;
	color: #333;
	font-size: clamp(18px, 5.5vw, 52px);
	line-height: 1;
	transform: translateY(0.06em);
}

.meritsIntro__lead{
	margin: 0;
	font-weight: 900;
	color: #333;
	font-size: clamp(18px, 5.5vw, 52px);
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-align: center;
}

.meritsIntro__headline{
	margin: 0;
	font-weight: 900;
	font-size: clamp(22px, 7vw, 56px);
	line-height: 1.05;
	text-align: center;
}

.meritsIntro__headlineGrad{
	display: inline-block;
	background-image: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not (-webkit-background-clip: text){
	.meritsIntro__headlineGrad{
		color: #22BAD9;
		-webkit-text-fill-color: #22BAD9;
		background-image: none;
	}
}

.merits__headerInner {
	display: block;
}

.merits__headerSmall {
	grid-area: small;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.merits__headerSmall img {
	width: 100%;
	height: auto;
	margin: 0 auto 16px;
}

.merits__headerBig {
	grid-area: big;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

.merits__headerTag {
	grid-area: tag;
	position: static;
	font-weight: 900;
	opacity: 0.35;
	letter-spacing: 0.04em;
}

/* 見た目をスクショ寄せ：右のMERITを大きめに薄く */
.merits__headerTag {
	font-size: 44px;
	opacity: 0.28;
	letter-spacing: 0.06em;
}



/* カードの面感をスクショ寄せ */
.meritCards {
	padding: 22px 16px 12px;
	gap: 22px;
}

.meritCard {
	padding-top: 10px; /* バッジの被り分 */
}

.meritCard__badge {
	top: -18px;
	width: 56px;
}

.meritCard__box {
	border-radius: 18px;
	box-shadow: none;
	background: #eafcff;
}

.meritCards {
	display: grid;
	gap: 18px;
	padding: 18px 0px 8px;
}

.meritCard {
	position: relative;
}

.meritCard__badge {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -14px;
	width: 44px;
	height: auto;
	z-index: 2;
}

.meritCard__box {
	background: #E7FFFD;
	border-radius: 8px;
	padding: 18px 16px 16px;
}

.meritCard__illust{
	width: 100%;
	max-width: none;  /* 340px制限を外す */
	height: auto;
	margin: 0 auto 16px;
}

.meritCard__title {
	margin: 0 auto 10px;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 900;
	color: #1fa9b3;
	max-width: 278px;

}

.meritCard__text {
	margin: 0 auto;
	font-size: 14px;
	line-height: 1.7;
	color: #222;
	max-width: 285px;
}
.font-weight{
font-weight: 600;
}

.cta {
	display: block;
	max-width: 520px;
	margin: 24px auto 0;
}

.offer {
	margin: 24px auto 0;
}

.offer__title {
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}

/* ===== 求人例：カードをコーディング化（フレーム画像 + 吹き出し + テキスト） ===== */
.offerExCard{
	position: relative;
	width: 100%;
	container-type: inline-size; /* cqw基準 */
}

.offerExCard__bg{
	display: block;
	width: 100%;
	height: auto;
}

.offerExCard__content{
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 7% 7% 7%;
	display: grid;
	grid-template-rows: 26% 1fr; /* 上(街並み)/下(本文) */
}

.offerExCard__header{
	position: relative;
	color: #fff;
}

/* 吹き出し：フレーム画像の上に“画像として”重ねる */
.offerExCard__balloon{
	position: absolute;
	left: 50%;
	top: 4%;
	transform: translateX(-50%);
	width: min(55%, 320px);
	z-index: 3;
}

.offerExCard__balloonImg{
	display: block;
	width: 100%;
	height: auto;
}
/* 求人例カードに影（他カルーセルには影響させない） */
.offer .carousel--offer .offerExCard{
	border-radius: 8px; /* フレームの角丸に合わせて調整 */
	box-shadow: 4px 10px 8px rgba(0,0,0,0.16);
}

.offerExCard__balloonText{
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-weight: 400;
	font-size: clamp(14px, 4.4cqw, 20px);
	background-image: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	transform: translateY(-0.3em); /* ←上に。-0.06〜-0.25emで微調整 */

}

@supports not (-webkit-background-clip: text){
	.offerExCard__balloonText{
		color: #22BAD9;
		-webkit-text-fill-color: #22BAD9;
		background-image: none;
	}
}

.offerExCard__headline{
	margin: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 15%;
	text-align: center;
	width: 100%;
	font-size: clamp(18px, 6cqw, 26px);
	font-weight: 800;
}

.offerExCard__dl{
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.offerExCard__row{
	display: grid;
	grid-template-columns: clamp(64px, 20cqw, 88px) 1fr;
	align-items: center;
	gap: clamp(10px, 3cqw, 18px);
	padding: clamp(7px, 3.2cqw, 16px) 0;
	border-top: 1px solid rgba(0,0,0,0.08);
}

.offerExCard__row:first-child{
	border-top: 0;
}

.offerExCard__pill{
	justify-self: start;
	display: inline-grid;
	place-items: center;
	height: clamp(30px, 9cqw, 40px);
	padding: 0 clamp(16px, 4.6cqw, 30px);
	border-radius: 8px;
	background: #24B4AF;
	color: #fff;
	font-weight: 900;
	font-size: clamp(12px, 3.6cqw, 22px);
}

.offerExCard__val{
	margin: 0;
	color: #333;
	font-weight: 800;
	font-size: clamp(12px, 4.1cqw, 22px);
	line-height: 1.25;
}

.offerExCard__val--accent{
	color: #E4254E;
}

.offerExCard__row--features{
	align-items: start;
}

.offerExCard__row--features .offerExCard__pill{
	margin-top: 2px;
}

.offerExCard__list{
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.offerExCard__list li{
	position: relative;
	padding-left: 1.1em;
}

.offerExCard__list li::before{
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
	color: #333;
}

.carousel {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 30px 0 10px;
	background: linear-gradient(to bottom, #cfeff4 0%, #CAF7FE 50%, #ffffff 100%);
	border-radius: 0 0 12px 12px;
	-webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
	display: none;
}

.carouselWrap{
	position: relative;
}

.carouselNav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;

	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.12);
	background: rgba(255,255,255,0.88);
	color: #22BAD9;
	font-weight: 900;
	line-height: 1;
	display: grid;
	place-items: center;

	box-shadow: 0 10px 22px rgba(0,0,0,0.14);
	cursor: pointer;
	user-select: none;
}

.carouselNav--prev{ left: 8px; }
.carouselNav--next{ right: 8px; }

.carouselNav:active{
	transform: translateY(-50%) scale(0.98);
}

.carousel__item {
	flex: 0 0 90%;
	max-width: 340px;
	scroll-snap-align: center;
}

/* 変更後：バッジは除外して、メイン画像だけ100%にする */
.carousel__item > img:not(.voiceCard__badge){
	display: block;
	width: 100%;
	height: auto;
}
/* offer/voice はカード幅に追従させる（固定pxにすると媒体ごとにズレやすい） */

/* ===== awards：常に“少しだけ隣が見える”（gap込みで固定） ===== */
.carousel--awards{
	--peek: 6px;   /* 隣の画像が見える量（画像部分だけ） */
	--gap: 6px;    /* カード間の隙間 */

	background: transparent;
	border-radius: 0;

	gap: var(--gap);

	/* 先頭/末尾を中央にするため： (peek + gap) 分を左右に確保 */
	padding: 0 calc(var(--peek) + var(--gap));
	scroll-padding: 0 calc(var(--peek) + var(--gap));
}

.carousel--awards .carousel__item{
	/* 両側に (peek + gap) を残す */
	/* flex: 0 0 calc(100% - 2 * (var(--peek) + var(--gap))); */
	max-width: none;
	display: flex;
	justify-content: center;
}
/* awardsだけはカード幅いっぱいに表示して「中央ずれ」を解消 */
.carousel--awards .carousel__item img {
	width: 100%;
	height: auto;
}

.carousel--awards img {
	border-radius: 12px;
}

/* ===== offer/voice：両方「少しだけ隣が見える」（同じ見え幅） ===== */
.carousel.carousel--offer{
	--peek: 6px;  /* ←隣が見える量（求人例/先輩たちの声で統一） */
	--gap: 12px;
	--badge-overhang: 0px; /* バッジ等の“はみ出し”ぶん上余白を増やす（デフォルト0） */

	gap: var(--gap);

	/* 上の余白（.carouselのpadding-top等）は維持して、左右だけ確保 */
	padding-left: calc(var(--peek) + var(--gap));
	padding-right: calc(var(--peek) + var(--gap));
	scroll-padding-left: calc(var(--peek) + var(--gap));
	scroll-padding-right: calc(var(--peek) + var(--gap));
}

.carousel.carousel--offer .carousel__item{
	/* 両側に (peek + gap) を残す */
	flex: 0 0 calc(100% - 2 * (var(--peek) + var(--gap)));
	max-width: 520px; /* offer/voiceでカード最大幅を統一（タブレットでもサイズ差が出ないように） */
}

/* メイン画像だけ100%（バッジは除外） */
.voiceCard > img:not(.voiceCard__badge){
	display: block;
	width: 100%;
	height: auto;
}

/* カード上部に“バッジ分の余白”を作って、画像を下げる */
.voiceCard{
	position: relative;
	padding-top: clamp(18px, 5vw, 28px); /* ←ここを増やすともっと上に出せる */
}

/* バッジはコンテナ上端に固定（画像より上に乗る） */
.voiceCard__badge{
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(100px, 16vw, 120px);
	height: auto;
	z-index: 2;
	pointer-events: auto;
}
.voice{
	position: relative;
	overflow: hidden;
	background: #fff; /* 楕円の外側は白 */
	padding: 50px 0px;
}
/* voice だけカード幅が小さくならないよう、共通(.carousel--offer)の max-width に統一 */
/* セクション全体に入る「1つの大きい楕円」 */
.voice::before{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:240%;                 /* 楕円の横幅（大きいほど左右のカーブが緩くなる） */
	height:100%;                /* 楕円の縦幅 */
	border-radius:50%;
	background: linear-gradient(180deg, #FFE7ED 0%, #f3d9e6 55%, #F4D9F2 100%);
	pointer-events:none;
	z-index:0;
}

/* 既存のこれで中身は前に出る */
.voice > *{
	position: relative;
	z-index: 1;
}

/* 先輩たちの声：タイトルを画像→コーディング化 */
.voiceTitle{
	border-radius: 100px;
	background: #fff;
	width: calc(100% - 32px);
	max-width: 750px;
	margin: 0 auto 20px;
	padding: clamp(14px, 3vw, 28px) clamp(18px, 5vw, 44px) clamp(14px, 3vw, 28px) clamp(32px, 8vw, 60px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.voiceTitle__left{
	display: grid;
	gap: 8px;
	line-height: 1.05;
}

.voiceTitle__small{
	font-weight: 800;
	font-size: clamp(14px, 3.5vw, 26px);
}
.voiceTitle__big{
	font-weight: 800;
	font-size: clamp(24px, 6vw, 52px);
}

.voiceTitle__grad{
	display: inline-block;
	background-image: linear-gradient(90deg, #E6003B 0%, #FF5A86 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.05em;
}

@supports not (-webkit-background-clip: text){
	.voiceTitle__grad{
		color: #E6003B;
		-webkit-text-fill-color: #E6003B;
		background-image: none;
	}
}

.voiceTitle__right{
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #FFBACA;
	font-weight: 500;
	font-size: clamp(30px, 7vw, 58px);
	letter-spacing: 0.01em;
	white-space: nowrap;
	opacity: 0.9;
}

/* ===== 先輩たちの声：カルーセル内カードをコーディング化 ===== */
.voiceExCard{
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: visible; /* バッジをカード外へはみ出させる */
	box-shadow: 0 10px 8px rgba(0,0,0,0.16);
	container-type: inline-size;
	background: transparent;
}

.voiceExCard__inner{
	position: relative; /* contentのabsolute基準 */
	border-radius: 8px;
	overflow: hidden; /* 角丸で切るのは内側だけ */
	background: #fff;
}

.voiceExCard__bg{
	display: block;
	width: 100%;
	height: auto;
}

.voiceExCard__badge{
	position: absolute;
	top: -6%;
	right: -3%;
	width: 30%;
	aspect-ratio: 1;
	background: url("../img/voice_badge_stamp.png") center / contain no-repeat;
	border: 0;
	border-radius: 0;
	display: grid;
	place-items: center;
	text-align: center;
	z-index: 2;
}

.voiceExCard__badge > *{
	color: #fff;
	font-weight: 900;
	font-size: clamp(11px, 4cqw, 20px);
	line-height: 1.15;
	padding: 0.2em;
}

.voiceExCard__content{
	position: absolute;
	left: 0;
	right: 0;
	top: 28%;
	bottom: 0;
	padding: 14% 8% 5%;
	display: flex;
	flex-direction: column;
	gap: clamp(7px, 2.3cqw, 16px);
	z-index: 1;
}

.voiceExCard__title{
	margin: 0;
	font-weight: 900;
	font-size: clamp(14px, 5cqw, 32px);
	line-height: 1.25;
	background-image: linear-gradient(90deg, #E6003B 0%, #FF5A86 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not (-webkit-background-clip: text){
	.voiceExCard__title{
		color: #E6003B;
		-webkit-text-fill-color: #E6003B;
		background-image: none;
	}
}

.voiceExCard__text{
	margin: 0;
	color: #333;
	font-size: clamp(12px, 4cqw, 30px);
	line-height: 1.55;
}

.voiceExCard__text strong{
	font-weight: 900;
}

.voiceExCard__meta{
	margin: auto 0 0;
	background: #FFE7ED;
	border-radius: 999px;
	padding: 0.65em 1em;
	text-align: center;
	font-size: clamp(8px, 3cqw, 14px);
	color: #333;
}

.voiceExCard__foot{
	margin: 4px 0 0;
	text-align: center;
	font-size: clamp(8px, 3cqw, 14px);
	color: #333;
	background: #FFE7ED;
	border-radius: 999px;
	padding: 0.65em 1em;

}

/* 旧画像クラスは残っていても非表示（HTMLから除去済みだが念のため） */
.voice__title{ display: none; }

.carousel--voice {
	background: transparent;
	border-radius: 0;
	padding-top: calc(30px + var(--badge-overhang, 0px)); /* バッジはみ出し量に追従 */
	padding-bottom: 10px;
	overflow-y: visible; /* バッジのはみ出しが欠けないように */
}

/* voice だけバッジがはみ出すので、そのぶん上余白を自動で増やす */
.voice .carousel.carousel--offer{
	--badge-overhang: clamp(18px, 4vw, 34px);
	--gap: 12px; /* 先輩たちの声：カード間隔（通常時） */
}

/* 先輩たちの声：カード幅を企業メッセージ（max 520px）に合わせる */
.voice .carousel__item{
	max-width: 520px;
}

.message {
	margin: 66px auto 0;
	padding: 0 0px 80px;
	background-color: #eaf7fb;
	background-image: linear-gradient(#cfe3ea 1px, transparent 1px),
		linear-gradient(90deg, #cfe3ea 1px, transparent 1px);
	background-size: 24px 24px;
}

.message__title {
	width: 100%;
	margin: 0 auto 16px;
}

.message__cards {
	display: grid;
	gap: 30px;
	justify-items: center;
	padding: 38px 32px 0;
	box-sizing: border-box;
}

.message__card {
	width: 100%;
	max-width: 520px;
	padding: 0;
	box-sizing: border-box;
}

.present {
	margin: 0px auto 0;
	padding: 0 0px 32px;
	background-size: 24px 24px;
}

.present__header {
	width: 100%;
	margin: 0 auto 16px;
}

.present__cards {
	display: grid;
	gap: 24px;
}

/* 変更後：message__card(520px) と幅を揃える */
.present__cards img{
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 0 auto;
	padding: 0 32px;
}

.present__cta {
	margin-top: 24px;

}

/* 変更後：present_cta_btn は親（.cta）の幅に合わせる */
.present .present__cta img{
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}

.faq {
	margin: 24px auto 0;
	padding: 0 32px 32px;
	background: #fff;
}

.faq__title {
	width: 100%;
	max-width: 140px;
	margin: 0 auto 16px;
}

.faq__list {
	display: grid;
	gap: 16px;
}

.faq__item {
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.faq__q {
	list-style: none;
	display: grid;
	grid-template-columns: 44px 1fr 24px;
	gap: 12px;
	align-items: center;
	padding: 16px;
	cursor: pointer;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__badge {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: #1fa9b3;
	color: #fff;
	font-weight: 800;
}

.faq__qtext {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
}

.faq__q::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 3px solid #1fa9b3;
	border-bottom: 3px solid #1fa9b3;
	transform: rotate(45deg);
	justify-self: end;
	transition: transform 0.2s ease;
}

.faq__item[open] .faq__q::after {
	transform: rotate(-135deg);
}

.faq__a {
	padding: 16px 16px 16px;
	color: #333;
	line-height: 1.7;
	font-size: 14px;
	background: #E7FFFD;
	margin: 20px;
	border-radius: 8px;
}

.flow {
	margin: 24px auto 0;
}

.flow__title {
	width: 100%;
	margin: 0 auto ;
}

.flowBody {
	/* 背景はそのまま、左右paddingは中のステップだけに持たせる */
	padding: 40px 0 40px;
	background-color: #eaf7fb;
	background-image: linear-gradient(#cfe3ea 1px, transparent 1px),
		linear-gradient(90deg, #cfe3ea 1px, transparent 1px);
	background-size: 24px 24px;
}

.flowBody__inner {
	padding: 0 32px;
}

/* flow：Group 6324.png 1枚でレイアウト（PCも同じ画像を使用） */
.flowBody__inner--image{
	padding: 0 32px;
}

.flow__image{
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.cta--flow {
	margin-top: 24px;
}

.flow__step {
	position: relative;
	margin: 0 auto clamp(22px, 5vw, 30px);
	max-width: 520px;
	padding-bottom: 10px;
	container-type: inline-size;

	/* 画像内の余白は比率で管理（媒体で比率維持） */
	--flowInsetTop: 10%;
	--flowInsetSide: 6%;
	--flowInsetBottom: 13%;
	--flowShotWidth: 72%;
	--flowShotMax: 360px;
	/* shot基準の“実幅”（textもこれに揃える） */
	--flowBodyWidth: min(var(--flowShotWidth), var(--flowShotMax));
}

.flow__frame {
	width: 100%;
	height: auto;
	display: block;
}

.flow__content {
	position: absolute;
	inset: var(--flowInsetTop) var(--flowInsetSide) var(--flowInsetBottom);
	display: grid;
	justify-items: center;
	text-align: center;
	gap: clamp(8px, 2.2cqw, 12px);
}


.flow__badge {
	display: none;
}

.flow__heading {
	margin: 0;
	font-weight: 800;
	font-size: clamp(22px, 7cqw, 36px);
	line-height: 1.15;
	display: grid;
	place-items: center; /* 縦横中央 */
	text-align: center;
}

.flow__shot {
	width: var(--flowBodyWidth);
	height: auto;
	border-radius: 8px;
}

.flow__text {
	margin: 0;
	font-size: clamp(12px, 4cqw, 30px);
	line-height: 1.7;
	font-weight: 700;
	text-align: left;
	width: var(--flowBodyWidth);
	padding: 0; /* shot基準で幅を揃えるため、左右paddingは持たせない */
}

/* 見出し/説明はグラデーション（指定：#24B4AF -> #22BAD9） */
.flow__heading,
.flow__text{
	background-image: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* 6280(=step03)だけサイズ違いを吸収するための個別調整 */
.flow__step--03{
	--flowInsetTop: 11%;
	--flowInsetBottom: 5%;
	--flowShotWidth: 76%;

}

.stickyCta{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	z-index: 1000;
	text-decoration: none;

	height: auto; /* ←帯の高さ（スクショ寄せ） */
	/* padding-bottom: env(safe-area-inset-bottom); */
}

.stickyCta.isVisible{ display:block; }
/* 変更後：親(=stickyCta)の幅に合わせる */
.stickyCta__inner{
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	display: block;
}




.siteFooter {
	margin: 0px auto 0px;
	padding: 0px 16px 120px;
	text-align: right;
	color: #fff;
	background: #111;
}

.siteFooter__privacy {
	display: inline-block;
	color: #fff;
	font-size: 14px;
	text-decoration: none
}

.siteFooter__corp {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	opacity: 0.75;
}


.stickyCta__img{
	display: block;
	width: 100%;
	height: auto;                 /* ←縦横比維持で見切れない */
}

@media (max-width: 390px) {
	.flowBody__inner {
		padding: 0 32px;          /* 45→16 */
	}

	.flow__step {
		max-width: 100%;          /* 520固定を外す */
		margin: 0 auto 0px;
		/* 最小幅では枠内の余白バランスだけ比率で微調整 */
		--flowInsetTop: 12%;
		--flowInsetSide: 4%;
		--flowInsetBottom: 14%;
		--flowShotMax: 260px; /* 最小幅だけshot/textの最大幅を抑える */

	}

	
	.flow__content {
		/* px固定はやめて、比率＋cqw（共通ルール）に統一 */
		gap: clamp(8px, 3cqw, 12px);
	}
	.flow__step--03{
		--flowInsetTop: 15%; /* 例 */
	}

	/* .flow__shot の個別指定は --flowShotMax に集約 */


	.fv__cta{
		margin: 0 auto; /* autoを消さない */
		width: calc(100% - 32px);
	}

}

@media (max-width: 1024px){
	.fv__cta{
		position: relative;
		top: -25px;   /* 例：-12〜-48pxで調整 */
		margin-bottom: -34px; /* 上に上げた分の余白を相殺（必要なら） */
		z-index: 2;   /* fv_topの上に重ねる */
	}
}
@media (min-width: 820px) and (max-width: 1024px){
	.fvStatsCard__inner{
		inset: 15% var(--fvStatsCardInsetX) 10%;
	}
	.fvStatsBar__text{
		top:28%;
	}
}
/* PCでは中身も max-width: 750px に統一（SPの1カラム踏襲） */
/* @media (min-width: 768px){
	.fv,
	.awards,
	.media,
	.merits,
	.offer,
	.voice,
	.message,
	.present,
	.faq,
	.flow,
	.siteFooter{
		max-width: 750px;
	}
} */

/* PCだけ fv_stats を差し替え（HTMLは変更しない） */
@media (min-width: 768px) {
	/* cta_red.png だけに適用 */
img[src*="cta_red.png"] {
	width: 100%;
}
.meritCards{
	padding: 40px 0;
	gap: 60px;
}
.awards{
	margin-bottom: 80px;
}
.sectionTitle{
	font-size: 40px;
	margin-bottom: 80px;
}
.media{
	padding: 1px 0;
}
.media__cta {
	margin: 60px auto;
}

.meritCard__illust{
	max-width: 750px;
}
.meritCard__title{
	max-width: 556px;
	font-size: 26px;
}
.meritCard__text{
	max-width: 556px;
	font-size: 20px;
}
.meritCard__badge{
	width: 80px;
}
.meritCard__badge{
	top: -45px;
}
.offer{
	margin: 80px 0;
}
.carousel{
	padding-bottom: 40px;
}
.voice__title{
	max-width: 600px;
}
.present__cards img{
	width: 100%;
}
.faq__title{
	max-width: 250px;
}
.faq{
	padding: 20px 0 40px;
}
.faq__a{
	font-size: 20px;
} 
.faq__qtext{
	font-size: 24px;
}
/* flow はSP側の比率制御（%＋cqw）に統一するため、PC用の固定指定は入れない */

/* flow は枠画像に対して比率(%)＋cqwで追従させるので、PCでもレイアウトは共通 */
.flowBody{
	padding: 56px 0 56px;     /* 余白だけ少し増やす */
}

.flowBody__inner{
	padding: 0 24px;
}

} /* end @media (min-width: 768px) */

/* タブレットはSPレイアウト準拠（左右の白余白をなくす） */
@media (min-width: 768px) and (max-width: 1024px){
	.page{
		max-width: none;
		margin: 0;
	}

	.spHeader__inner{
		max-width: none;
		margin: 0;
	}
		/* 受賞履歴：左右余白を他セクション(32px)に揃える */
		.carousel--awards{
			padding-left: 32px;
			padding-right: 32px;
			scroll-padding-left: 32px;
			scroll-padding-right: 32px;
			gap: 24px;              /* 好みで 16〜32px */

		}
	
		/* 受賞履歴：カード幅を message__card(520px) 基準に揃える */
		.carousel--awards .carousel__item{
			flex: 0 0 calc(100% - 64px); /* 画面幅 - 左右padding */
			max-width: 520px;            /* 基準幅 */
		}
	
		/* picture内でも100%が素直に効くように */
		.carousel--awards .carousel__item picture{
			display: block;
			width: 100%;
		}
			/* meritCards：520基準で揃える（タブレットだけ） */
	.meritCards{
		padding: 24px 32px 12px; /* 左右余白も確保 */
		gap: 32px;               /* 詰まり緩和（好みで24〜40） */
	}

	.meritCard{
		width: 100%;
		max-width: 520px;
		margin: 0 auto;          /* 常に中央寄せ */
	}

	/* PC側で 750/556px に広がるのをタブレットだけ 520 に戻す */
	.meritCard__illust,
	.meritCard__title,
	.meritCard__text{
		max-width: 520px;
	}

	/* （任意）PCのバッジが大きすぎる場合だけ */
	.meritCard__badge{
		width: 56px;
		top: -18px;
	}
		/* offer：タブレットだけ 520 基準に揃える */
		.offer .carousel.carousel--offer{
			--gap: 24px;            /* 詰まり緩和（好みで16〜32） */
			padding-left: 32px;     /* 他コンテンツと揃える */
			padding-right: 32px;
			scroll-padding-left: 32px;
			scroll-padding-right: 32px;
		}
	
		.offer .carousel.carousel--offer .carousel__item{
			flex: 0 0 auto;                 /* 既存の calc(...) を無効化して幅指定で管理 */
			width: calc(100% - 64px);       /* 画面幅 - 左右padding */
			max-width: 520px;               /* 基準幅 */
		}
			/* voice：タブレットだけ offer と同じカルーセルにする */
	.voice .carousel.carousel--offer{
		--gap: 24px;
		padding-left: 32px;
		padding-right: 32px;
		scroll-padding-left: 32px;
		scroll-padding-right: 32px;
		/* バッジはみ出し量に追従（固定pxにしない） */
		padding-top: calc(30px + var(--badge-overhang, 0px));
	}

	.voice .carousel.carousel--offer .carousel__item{
		flex: 0 0 auto;
		width: calc(100% - 64px);
		max-width: 520px;
	}
		/* present：520基準で揃える（タブレットだけ） */
		.present__cards{
			justify-items: center;
			padding: 0 32px;   /* 余白は親で持つ */
			gap: 32px;         /* 詰まり緩和（好みで24〜40） */
		}
	
		.present__cards picture{
			display: block;
			width: 100%;
		}
	
		.present__cards img{
			max-width: 520px;
			padding: 0;        /* ←ここがポイント（画像自体は520基準に） */
			margin: 0 auto;
		}
			/* faq：質問欄を520基準で揃える（タブレットだけ） */
	.faq{
		padding-left: 32px;
		padding-right: 32px;
	}

	.faq__list{
		justify-items: center;
	}

	.faq__item{
		width: 100%;
		max-width: 520px;
	}
	 /* flow：セクション幅制限を外してタイトルを画面幅いっぱいに */
	 .flow{
		max-width: none;
	}

	.flow__title{
		display: block;
		width: 100%;
		max-width: none;
		margin: 0 auto;
	}

	/* flow：メイン画像は他と同様に 520 基準 */
	.flow__image{
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
		display: block;
	}
		/* footer：中身を520基準に */
		.siteFooter{
			padding-left: 32px;
			padding-right: 32px;
			padding-bottom: 240px;
		}
		.siteFooter__privacy,
		.siteFooter__corp{
			display: block;
			width: 100%;
			margin: 0 auto;
		}
	
		/* stickyCta：innerが大きいので520基準に */
		.stickyCta__inner{
			width: 100%;
			margin: 0 auto;
		}
		.fvCopy{
			position: absolute;
			left: 50%;
			top: 62%;
			transform: translate(-50%, -50%);
			width: min(75%, 750px);
			display: grid;
			gap: 8px;
			pointer-events: auto; /* 画像上でもクリック邪魔しない */
		}
		/* 上の帯 */


/* 白い大ボックス2段 */
.fvCopy__box{
	background: #fff;
	color: #22BAD9;
	font-weight: 900;
	text-align: center;
	border-radius: 4px;
	padding: 12px 14px;
	font-size: clamp(36px, 9.5vw, 60px);
	line-height: 1.05;
	box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}

/* 文字だけグラデ（箱は白背景のまま） */
.fvCopy__boxText{
	display: inline-block;
	background-image: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent; /* Safari対策 */
}
}
@media (min-width: 1025px){
	/* ===== awards（受賞履歴） ===== */
	.carousel--awards{
		gap: 24px;
		padding-left: 32px;
		padding-right: 32px;
		scroll-padding-left: 32px;
		scroll-padding-right: 32px;
	}
	.carousel--awards .carousel__item{
		flex: 0 0 auto;
		width: calc(100% - 64px);
		max-width: 520px;
	}
	.carousel--awards .carousel__item picture{
		display: block;
		width: 100%;
	}

	/* ===== merits（meritCards） ===== */
	.meritCards{
		padding: 24px 32px 12px;
		gap: 32px;
	}
	.meritCard{
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
	.meritCard__illust,
	.meritCard__title,
	.meritCard__text{
		max-width: 520px;
	}

	/* ===== offer（カルーセル） ===== */
	.offer .carousel.carousel--offer{
		--gap: 24px;
		padding-left: 32px;
		padding-right: 32px;
		scroll-padding-left: 32px;
		scroll-padding-right: 32px;
	}
	.offer .carousel.carousel--offer .carousel__item{
		flex: 0 0 auto;
		width: calc(100% - 64px);
		max-width: 520px;
	}

	/* ===== voice（カルーセル） ===== */
	.voice .carousel.carousel--offer{
		--gap: 24px;
		padding-left: 32px;
		padding-right: 32px;
		scroll-padding-left: 32px;
		scroll-padding-right: 32px;
	}
	.voice .carousel.carousel--offer .carousel__item{
		flex: 0 0 auto;
		width: calc(100% - 64px);
		max-width: 520px;
	}

	/* ===== present（画像3枚） ===== */
	.present__cards{
		justify-items: center;
		padding: 0 32px;
		gap: 32px;
	}
	.present__cards picture{
		display: block;
		width: 100%;
	}
	.present__cards img{
		max-width: 520px;
		padding: 0;
		margin: 0 auto;
	}

	/* ===== faq（質問欄） ===== */
	.faq{
		padding-left: 32px;
		padding-right: 32px;
	}
	.faq__list{
		justify-items: center;
	}
	.faq__item{
		width: 100%;
		max-width: 520px;
	}

	/* ===== flow（タイトル全幅＋画像520） ===== */
	.flow__title{
		display: block;
		width: 100%;
		max-width: none;
	}
	.flow__image{
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
		display: block;
	}
	.flow__step{
		max-width: 520px;
	}

	/* ===== footer（幅いっぱいにしない） ===== */
	.siteFooter{
		width: 100%;
		max-width: 750px;
		margin: 0 auto;
		padding-bottom: 240px;
	}

	/* ===== stickyCta（innerが大きいのを520へ） ===== */
	.stickyCta__inner{
		width: 100%;
		max-width: 750px;
		margin: 0 auto;
	}
}
/* 追加：幅540px付近でフッターが下部のstickyCtaに被るのを防ぐ */
@media (min-width: 480px) and (max-width: 767px) {
	.siteFooter {
		padding-bottom: calc(150px + env(safe-area-inset-bottom));
	}
}
/* 一旦PCヘッダーを非表示（削除せず）
@media (min-width: 768px){
	.pcHeader{ display: none !important; }
} */

/* ===== Contact Modal ===== */
body.isModalOpen { overflow: hidden; }

.contactModal[hidden] { display: none; }

.contactModal{
	position: fixed;
	inset: 0;
	z-index: 3000; /* menu(1995)より上 */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 24px 14px;
	padding-top: 40px; /* 少し上寄せ */
}

.contactModal__overlay{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.28);
}

.contactModal__panel{
	position: relative;
	width: min(92vw, 360px); /* SP */
	max-height: 86vh;
	overflow: auto;
	background: #EEEEEE;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0,0,0,0.22);
	padding: 18px 16px 16px;
}

.contactModal__close{
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	color: #2aa3ad;
	cursor: pointer;
}

.contactModal__title{
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 800;
	color: #1a1a1a;
}

.contactModal__note{
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.7;
	font-weight: 700;
	color: #2b3c44;
}

.contactModal__field{ margin: 0 0 12px; }

.contactModal__label{
	display: block;
	font-size: 12px;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 6px;
}

.contactModal__req{
	color: #e53935;
	font-weight: 900;
	margin-left: 2px;
}

.contactModal__input,
.contactModal__textarea{
	width: 100%;
	border: 1px solid #d6e3e7;
	border-radius: 3px;          /* 角丸弱め */
	background: #f6fafb;
	padding: 11px 10px;
	font-size: 14px;
	outline: none;
}

.contactModal__textarea{ resize: vertical; }

.contactModal__input::placeholder,
.contactModal__textarea::placeholder{
	color: #b6c3c9;
}

.contactModal__input:focus,
.contactModal__textarea:focus{
	border-color: #2aa3ad;
	box-shadow: 0 0 0 3px rgba(42,163,173,0.12);
	background: #fff;
}

.contactModal__consent{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 14px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #243238;
}

.contactModal__checkbox{ margin-top: 2px; }

.contactModal__link{
	color: #2aa3ad;
	text-decoration: underline;
}

.contactModal__submit{
	width: 100%;
	border: 0;
	border-radius: 4px;
	background: #2aa3ad;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	padding: 12px 12px;
	cursor: pointer;
}

@media (max-width: 360px){
	.contactModal{ padding-top: 20px; }
	.contactModal__panel{ width: 94vw; }
}

/* Contact modal width by device (never exceed viewport width) */
@media (min-width: 768px) {
	.contactModal__panel{
		width: min(92vw, 520px);
	}
}

@media (min-width: 1025px) {
	.contactModal__panel{
		width: min(92vw, 600px);
	}
}

/* @media (min-width: 768px){
	.siteFooter{
		max-width: none;
		width: 100%;
	}
} */

/* ===== LP0反映：見出しをコーディング化 + グラデ文字 ===== */
.srOnly{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

:root{
	--band-h: 90px; /* SP */
}
@media (min-width: 768px){
	:root{
		--band-h: 150px; /* タブレット以上 */
	}
}
@media (min-width: 1025px){
	:root{
		--band-h: 150px; /* PC以上（lp0と揃える） */
	}
}

.merits__header{
	background: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	color: #fff;
}
.merits__headerInner{
	position: relative;
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--band-h);
}
.merits__headerTexts{
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
}
.merits__headerSmall{
	grid-area: auto; /* 旧CSSの grid-area 指定を打ち消す */
	font-weight: 800;
	font-size: clamp(14px, 3vw, 24px);
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.merits__headerBig{
	grid-area: auto; /* 旧CSSの grid-area 指定を打ち消す */
	font-size: clamp(24px, 6vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 2px;
}
.merits__headerTag{
	grid-area: auto; /* 念のため */
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	opacity: 0.5;
	font-weight: 400;
	font-size: clamp(22px, 6vw, 48px);
	letter-spacing: 0px;
	z-index: 0;
	pointer-events: auto;
	white-space: nowrap;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.sectionHead{
	background: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	color: #fff;
}
.sectionHead__inner{
	position: relative;
	padding: 20px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--band-h);
}
.sectionHead__texts{
	display: block;
}
.sectionHead__big{
	font-weight: 800;
	font-size: clamp(22px, 6vw, 48px);
	line-height: 1.1;
	letter-spacing: 2px;
}
.sectionHead__tag{
	opacity: 0.5;
	font-weight: 400;
	font-size: clamp(22px, 6vw, 48px);
	letter-spacing: 0px;
	pointer-events: auto;
	white-space: nowrap;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (min-width: 768px){
	.merits__headerInner{ padding: 20px 60px; }
	.merits__headerTag{ right: 60px; }
	.sectionHead__inner{ padding: 30px 60px; }
}

.presentHeader{
	position: relative;
	background: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	color: #fff;
	padding: 44px 16px 56px;
	text-align: center;
	overflow: visible;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px));
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px));
}
.presentHeader__bubble{
	display: block;
	width: min(70%, 450px);
	height: auto;
	margin: 0 auto;
}
.presentHeader__title{
	margin-top: 8px; }

.presentHeader__line1{
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-weight: 700;
	font-size: clamp(28px, 6.2vw, 52px);
	letter-spacing: 0px;
	line-height: 1.1;
}
.presentHeader__num{
	font-size: clamp(64px, 12vw, 120px);
	line-height: 0.9;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.presentHeader__line2{
	margin-top: 10px;
	font-weight: 700;
	font-size: clamp(28px, 6.2vw, 52px);
	letter-spacing: 2px;
	line-height: 1.1;
}

/* 受賞履歴 / メディア掲載実績：見出し文字をグラデに */
.awards .sectionTitle,
.media .sectionTitle{
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	background-image: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* meritCard タイトル：文字をグラデに */
.meritCard__title{
	background-image: linear-gradient(90deg, #24B4AF 0%, #22BAD9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ===== merits（lp0合わせ：meritCardsの余白/間隔を統一） ===== */
/* SP（lp0の最新値） */
.meritCards{
	display: grid;
	gap: 30px;
	padding: 30px 0px 8px;
}

/* タブレット以上（lp0の最新値） */
@media (min-width: 768px){
	.meritCards{
		padding: 40px 0;
		gap: 60px;
	}
}

/* PC（lp0の最新値） */
@media (min-width: 1025px){
	.meritCards{
		padding: 80px 32px 12px;
		gap: 80px;
	}
}

/* ===== stickyCta/siteFooter (preserved from ababa_lp2_nowoman) ===== */
.stickyCta{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	z-index: 1000;
	text-decoration: none;

	height: auto; /* ←帯の高さ（スクショ寄せ） */
	/* padding-bottom: env(safe-area-inset-bottom); */
}

.stickyCta.isVisible{ display:block; }

.siteFooter {
	margin: 0px auto 0px;
	padding: 0px 16px 120px;
	text-align: right;
	color: #fff;
	background: #111;
}

@media (min-width: 768px) and (max-width: 1024px){
/* footer：中身を520基準に */
		.siteFooter{
			padding-left: 32px;
			padding-right: 32px;
			padding-bottom: 240px;
		}
}

@media (min-width: 1025px){
/* ===== footer（幅いっぱいにしない） ===== */
	.siteFooter{
		width: 100%;
		max-width: 750px;
		margin: 0 auto;
		padding-bottom: 240px;
	}
}

@media (min-width: 480px) and (max-width: 767px){
.siteFooter {
		padding-bottom: calc(150px + env(safe-area-inset-bottom));
	}
}

/* @media (min-width: 768px){
	.siteFooter{
		max-width: none;
		width: 100%;
	}
} */

/* ===== LP0反映：見出しをコーディング化 + グラデ文字 ===== */
.srOnly{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.siteFooter__privacy{
	/* ...既存... */
	text-decoration: none;
	transition: opacity 250ms ease, color 250ms ease;
}

.siteFooter__privacy:hover{
	opacity: 0.75;
}