@charset "UTF-8";
/*
.noto-sans-jp-<uniquifier> {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
.reggae-one-regular {
font-family: "Reggae One", system-ui;
font-weight: 400;
font-style: normal;
}
.yuji-boku-regular {
font-family: "Yuji Boku", serif;
font-weight: 400;
font-style: normal;
} */


/* ==========================================================================
   基本設定
   ========================================================================== */
:root {
	--blue: #3F69FC;
	--blue-deep: #2C4BDB;
	--navy: #0F1B4D;
	--yellow: #FFD400;
	--yellow-hover: #FFE14D;
	--sub: #4B556E;
	--line: #D5DAE8;
	--header-h: 84px;
	/* 1440px幅で120px。画面幅に合わせて縮み、1440px超では中身を1200px幅に収める */
	--pad: clamp(24px, 8.333vw, 120px);
	--pad-wide: max(var(--pad), calc((100% - 1200px) / 2));
	--font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	min-width: 320px;
	background: #fff;
	color: var(--navy);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.75;
	overflow-wrap: break-word;
	line-break: strict;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
/* 改行：文節の途中で区切らない（Chrome・Edge）。最後の行に数文字だけ残らないようにする */
body { word-break: auto-phrase; }
p, li, dd, td, th, summary, a, small, .flow__title, .flow__sub { text-wrap: pretty; }
h1, h2, h3, .fv__eyebrow, .point__label, .step__label, .case__tag, .voice__pill { text-wrap: balance; }
/* カギかっこ「」：0.8倍にして空きを詰める（ページ全体共通）。ただし12pxより小さくはしない */
.q { font-size: max(.8em, 12px); font-feature-settings: "palt"; }
/* 小さくした「は下がって見えるため、元の大きさのときと同じ高さまで上げる（行の高さは変わらない） */
.q--open { position: relative; top: -.22em; }
/* 短いかっこ書きは、かっこの途中で改行しない */
.q-wrap { white-space: nowrap; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
small { font-size: inherit; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 数字・英字をわずかに大きく見せる */
.num { font-size: 1.1em; line-height: 1; }

/* PC／SPの出し分け */
@media (max-width: 767px) { .u-pc { display: none !important; } }

@media (min-width: 768px) { .u-sp { display: none !important; } }

/* ==========================================================================
   共通パーツ
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 24px;
	border-radius: 4px;
	background: var(--yellow);
	color: var(--navy);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .02em;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	transition: background-color .2s;
}
.btn:hover { background: var(--yellow-hover); }

.btn--lg {
	min-height: 60px;
	padding: 16px 44px;
	font-size: 20px;
}

.sec__title {
	font-size: clamp(32px, 3.611vw, 52px);
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: .02em;
}
/* お悩み・特長・活用事例・お客様の声の見出しは大きめ */
.problems__title,
.points .sec__title,
.cases__title,
.voices__title { font-size: clamp(32px, 4.167vw, 60px); }

/* 黄色マーカー（画面に入ったら左から引く） */
.mk {
	padding: 0 .08em;
	background: linear-gradient(transparent 58%, rgba(255, 212, 0, .8) 58%, rgba(255, 212, 0, .8) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
	.js .mk { background-size: 0 100%; transition: background-size .8s cubic-bezier(.2, .7, .2, 1) 1.1s; } /* 文字を読み始めてから引く（10/16に0.3秒→1.1秒へ遅らせた） */
	.js .is-in .mk { background-size: 100% 100%; }
}

/* セクション名（メニューと同じ名前。上に英語を極小で、下に日本語） */
.sec-label {
	display: flex;
	flex-direction: column;
	align-items: inherit; /* 親が中央ぞろえなら中央、左ぞろえなら左 */
	gap: 4px;
}
.sec-label__en {
	color: var(--blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.2;
}
.sec-label__ja {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--blue-deep);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.5;
}
.sec-label__ja::before {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background: var(--yellow);
}
.price .sec-label__ja::before { background: var(--blue); } /* 黄色の背景の上では青い四角 */
.price .sec-label__en { color: var(--blue-deep); } /* 黄色の背景の上では濃い青（コントラスト比4.68） */
.points .sec-label__en { color: var(--yellow); } /* 紺の背景の上では英語を黄色、日本語を白に */
.points .sec-label__ja { color: #fff; }
.cases__label { margin-bottom: -20px; }
/* よくある質問：見出しの上に英語だけを重ねる（導入の流れと見出しの高さをそろえたまま） */
.faq__head { position: relative; }
.faq__label { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; }


/* ==========================================================================
   ヘッダー
   ========================================================================== */
.header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	color: #fff;
	transition: background-color .3s, color .3s, box-shadow .3s;
}
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	padding: 0 clamp(20px, 4.167vw, 60px);
}
.header__logo { display: block; color: #fff; transition: color .3s; }
.header__logo-svg { width: auto; height: 22px; aspect-ratio: 800 / 82.29; fill: currentColor; }
.header__nav { display: flex; align-items: center; gap: 32px; }
.header__menu { display: flex; gap: 32px; }
.header__menu a { display: flex; flex-direction: column; align-items: center; font-size: 15px; font-weight: 700; line-height: 1.4; }
.header__menu a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* メニューの英語の小見出し（飾りのため読み上げ対象外） */
.nav-en {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.2;
	opacity: .75;
}

/* スクロールを始めたら全幅のグラスモーフィズムにする */
.header.is-scrolled {
	background: rgba(15, 27, 77, .28);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .18);
}
/* 白い背景の上ではロゴを青、メニューを紺にする */
.header.is-scrolled.is-light {
	background: rgba(255, 255, 255, .72);
	color: var(--navy);
	box-shadow: 0 1px 0 rgba(15, 27, 77, .08);
}
.header.is-scrolled.is-light .header__logo { color: var(--blue); }

.header__toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.header__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: translate .35s cubic-bezier(.65, 0, .35, 1), rotate .35s cubic-bezier(.65, 0, .35, 1), opacity .2s;
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }
/* メニューを開いている間は、ヘッダーを透明・白文字にする */
.header.is-menu-open,
.header.is-menu-open.is-scrolled,
.header.is-menu-open.is-scrolled.is-light {
	background: transparent;
	color: #fff;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.header.is-menu-open .header__logo { color: #fff; }

/* ==========================================================================
   全画面メニュー（SP）
   ・ハンバーガーのある右上から円が広がるように表示し、項目は少しずつ時間差で下から現れる
   ・閉じるときは同じ動きを逆にたどる（短め）
   ========================================================================== */
.menu {
	position: fixed;
	inset: 0;
	z-index: 45;
	display: flex;
	overflow-y: auto;
	overscroll-behavior: contain;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, .14) 0%, transparent 45%),
		linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
	color: #fff;
	visibility: hidden;
	clip-path: circle(0 at calc(100% - 32px) 28px);
	transition: clip-path .45s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .45s;
}
.menu.is-open {
	visibility: visible;
	clip-path: circle(150% at calc(100% - 32px) 28px);
	transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), visibility 0s;
}
.menu__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	min-height: 100%;
	padding: calc(var(--header-h) + 32px) 28px 40px;
}
.menu__list { counter-reset: menu; }
.menu__item { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.menu__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 4px;
}
.menu__link .nav-en { color: var(--yellow); font-size: 11px; opacity: 1; }
.menu__ja { font-size: 24px; font-weight: 900; letter-spacing: .04em; line-height: 1.4; }
.menu__foot { display: flex; flex-direction: column; gap: 12px; }
.menu__btn { width: 100%; }
.menu__note { font-size: 14px; font-weight: 700; text-align: center; opacity: .9; }

/* 項目は時間差で現れる */
.menu__item,
.menu__foot {
	opacity: 0;
	translate: 0 16px;
	transition: opacity .2s, translate .2s;
}
.menu.is-open .menu__item,
.menu.is-open .menu__foot {
	opacity: 1;
	translate: 0 0;
	transition: opacity .45s ease-out, translate .45s ease-out;
}
.menu.is-open .menu__item:nth-child(1) { transition-delay: .2s; }
.menu.is-open .menu__item:nth-child(2) { transition-delay: .26s; }
.menu.is-open .menu__item:nth-child(3) { transition-delay: .32s; }
.menu.is-open .menu__item:nth-child(4) { transition-delay: .38s; }
.menu.is-open .menu__item:nth-child(5) { transition-delay: .44s; }
.menu.is-open .menu__foot { transition-delay: .52s; }

/* 視差効果を減らす設定の人には、動きを使わずすぐ表示する */
@media (prefers-reduced-motion: reduce) {
	.menu,
	.menu.is-open { clip-path: none; transition: visibility 0s; }
	.menu__item,
	.menu__foot,
	.menu.is-open .menu__item,
	.menu.is-open .menu__foot { opacity: 1; translate: none; transition: none; }
	.header__toggle span { transition: none; }
}

/* メニューを開いている間は、後ろのページをスクロールさせない */
html.is-menu-open { overflow: hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.fv {
	position: relative;
	display: flex;
	min-height: 100vh;
	background: var(--blue);
	overflow: hidden;
}
.fv__text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	width: 41.667%;
	max-width: 600px;
	flex-shrink: 0;
	padding: calc(var(--header-h) + 40px) clamp(20px, 2.778vw, 40px) 40px clamp(24px, 5.556vw, 80px);
	color: #fff;
}
.fv__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 700;
}
.fv__eyebrow::before {
	content: "";
	flex-shrink: 0;
	width: 48px;
	height: 4px;
	background: var(--yellow);
}
.fv__title {
	font-size: clamp(26px, 3.194vw, 46px);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: .02em;
}
/* 見出し上の斜めリボン */
.fv__ribbon {
	align-self: flex-start;
	margin-bottom: 6px;
	padding: 4px 14px;
	background: var(--yellow);
	color: var(--navy);
	font-size: clamp(14px, 1.111vw, 16px);
	font-weight: 900;
	letter-spacing: .04em;
	line-height: 1.5;
	rotate: -4deg;
	box-shadow: 3px 3px 0 var(--navy);
}
.fv__brand {
	display: inline-block;
	white-space: nowrap;
	color: var(--yellow);
	font-size: clamp(44px, 5.278vw, 76px);
	line-height: 1.15;
}
.fv__lead {
	font-size: clamp(16px, 1.458vw, 21px);
	font-weight: 500;
	line-height: 1.9;
}
.fv__btn { margin-top: 20px; }
.fv__devices { width: 100%; margin-top: 40px; }
.fv__devices-img {
	width: 100%;
	aspect-ratio: 600 / 272;
	object-fit: cover;
}
@media (min-width: 768px) {
	.fv__title { white-space: nowrap; } /* 「読んだ？」がなくなる。を1行に */
	.fv__text {
		--dev-w: calc(min(41.667vw, 600px) * 1.25); /* 文字の列の1.25倍 */
		--dev-b: clamp(12px, 2.222vw, 32px);
		/* デバイス画像の分の余白を下に取り、見出し〜ボタンはその上で縦中央に置く */
		padding-bottom: calc(var(--dev-w) * 272 / 600 * .88 + var(--dev-b) + 32px);
	}
	.fv__devices {
		position: absolute;
		/* 画像の下12%は透明な余白のため、その分だけ下げて端末の下端を --dev-b の位置にそろえる */
		bottom: calc(var(--dev-b) - var(--dev-w) * 272 / 600 * .12);
		/* 画像の左の透明な余白（4%）を差し引き、端末の左端を文字の左端にそろえる */
		left: calc(clamp(24px, 5.556vw, 80px) - var(--dev-w) * .04);
		width: var(--dev-w);
		margin: 0;
	}
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.fv__text { --dev-w: calc(41.667vw * 1.15); } /* 右下の料金のまとめに重ならない大きさ */
}
@media (min-width: 768px) and (max-width: 1023px) {
	.fv__text { --dev-w: calc(50vw * 1.2); }
}
.fv__visual {
	position: relative;
	flex: 1;
	min-width: 0;
}
.fv__visual::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 160px;
	background: linear-gradient(rgba(15, 27, 77, .45), transparent);
	pointer-events: none;
}
.fv__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

/* 料金のまとめ（すりガラス） */
.stats {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 2;
	display: flex;
	max-width: calc(100% - 48px);
	padding: 18px 8px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 16px;
	background: rgba(15, 27, 77, .30);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 24px 60px rgba(11, 20, 64, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.stats__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 16px;
}
.stats__item + .stats__item { border-left: 1px solid rgba(255, 255, 255, .3); }
.stats dt {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.stats dd {
	display: flex;
	align-items: baseline;
	color: var(--yellow);
	font-size: clamp(16px, 1.111vw, 16px);
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}
.stats dd .num { font-size: clamp(26px, 3.194vw, 46px); font-weight: 700; }
.stats dd b { font-size: clamp(20px, 1.944vw, 28px); font-weight: 700; }

/* ==========================================================================
   お悩み
   ========================================================================== */
.problems {
	position: relative;
	overflow-x: clip; /* 傾けた写真・散らした言葉が画面からはみ出しても横スクロールを出さない */
	display: flex;
	flex-direction: column;
	gap: 96px;
	padding: 120px 0;
	background:
		radial-gradient(ellipse at 15% 0%, #fff 0%, transparent 50%),
		radial-gradient(ellipse at 85% 100%, #E8EDFB 0%, transparent 40%),
		#F2F5FC;
}
.problems__title { padding: 0 var(--pad-wide); }
.problems__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 72px;
	padding: 0 calc(var(--pad-wide) + clamp(0px, (100vw - 1024px) / 6.4, 40px)) 88px; /* 左右は1280px以上で40px広げる／下は2枚目を下げた分と、言葉が慣性で動く分 */
}
.problem { position: relative; display: flex; flex-direction: column; }
/* 写真は上下にガタガタと互い違いに：2枚目・3枚目を下げる（topなので表示時のふわっと出る動きとぶつからない） */
.problem:nth-child(2) { top: 72px; }
.problem:nth-child(3) { top: 24px; }
/* 表示後はtranslateを外し、カードごとの重なりの区切りをなくす（散らした言葉を、隣のカードのテープや写真より上に出すため） */
.js .problem.js-reveal.is-in { translate: none; }

/* 写真：白い枠＋影のプリント風にして、それぞれ違う角度で傾け、テープで貼った見た目にする */
.problem__frame {
	position: relative;
	z-index: 1;
	padding: 10px;
	box-shadow: 0 1px 2px rgba(15, 27, 77, .2), 0 3px 6px rgba(15, 27, 77, .12); /* 壁から2〜3mm浮いている程度の近い影 */
	rotate: -4deg;
}
.problem:nth-child(2) .problem__frame { rotate: 3deg; }
.problem:nth-child(3) .problem__frame { rotate: -2deg; }
/* 角が少しめくれて浮いている影（1枚目：左下、2枚目：右下（弱め）、3枚目：右下）。
   写真の裏に少し傾けた影用の帯を置き、角ほど濃く長く、中央へ向かって自然に消えるようにする。
   写真は回転していて裏に回り込めないため、白い枠は ::after で描き、その下（::before）に影を置く */
.problem__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #fff;
}
.problem__frame::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 70%;
	right: 8px;
	bottom: 10px;
	width: 50%;
	box-shadow: 0 13px 9px rgba(15, 27, 77, .4);
	rotate: 4deg;
	pointer-events: none;
}
.problem:nth-child(1) .problem__frame::before { right: auto; left: 8px; rotate: -4deg; }
.problem:nth-child(2) .problem__frame::before { width: 42%; box-shadow: 0 11px 8px rgba(15, 27, 77, .3); rotate: 3deg; }
.problem__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* PC・SPとも、画面幅が変わっても4:3にそろえる */
.problem__tape {
	position: absolute;
	top: -22px;
	left: 50%;
	width: 150px;
	height: auto;
	translate: -50% 0;
	rotate: -3deg;
}
.problem:nth-child(2) .problem__tape { left: 54%; rotate: 5deg; }
.problem:nth-child(3) .problem__tape { left: 46%; rotate: 4deg; }

.problem__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 40px 12px 0;
}

/* 背景に散らす言葉（店長の心の声）。位置・大きさ・角度は言葉ごとに変数で指定*/
.problem__words { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.problem__word {
	position: absolute;
	top: var(--t, auto);
	bottom: var(--b, auto);
	left: var(--l);
	color: #d34c4a;
	font-family: "Reggae One", system-ui;
	font-size: clamp(calc(var(--fs) * 1px), calc(var(--fs) * 100vw / 1440), calc(var(--fs) * 1.2px));
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	translate: 0 0;
	rotate: var(--r);
}
.problem:nth-child(1) .problem__word--1 { --l: -23%; --t: -16px; --fs: 34; --r: -9deg; --dur: 3s; --delay: 0s; }
.problem:nth-child(1) .problem__word--2 { --l: -32%; --t: auto; --b: -78px; --fs: 26; --r: 6deg; --dur: 3.75s; --delay: -1s; }
.problem:nth-child(1) .problem__word--3 { --l: 8%; --b: -48px; --fs: 30; --r: -4deg; --dur: 3.4s; --delay: -2s; }
.problem:nth-child(2) .problem__word--1 { --l: 26%; --t: -54px; --fs: 28; --r: 7deg; --dur: 4s; --delay: -0.5s; font-family: "Yuji Boku", serif; color: #8C94A6;}
.problem:nth-child(2) .problem__word--2 { --l: 80%; --t: -100px; --fs: 26; --r: -5deg; --dur: 3.2s; --delay: -1.5s; font-family: "Yuji Boku", serif; color: #8C94A6;}
.problem:nth-child(2) .problem__word--3 { --l: -4%; --b: -70px; --fs: 28; --r: 3deg; --dur: 3.6s; --delay: -2.5s; font-family: "Yuji Boku", serif; color: #8C94A6;}
.problem:nth-child(3) .problem__word--1 { --l: 29%; --t: -120px; --fs: 28; --r: 6deg; --dur: 3.5s; --delay: -1.25s; }
.problem:nth-child(3) .problem__word--2 { --l: 84%; --b: -30px; --fs: 28; --r: 8deg; --dur: 3.1s; --delay: -0.75s;}
.problem:nth-child(3) .problem__word--3 { --l: 2%; --b: -84px; --fs: 26; --r: -3deg; --dur: 3.9s; --delay: -2.25s; font-family: "Yuji Boku", serif; color: #8C94A6;}

/* 言葉は常にふわふわとゆっくり上下に動かし、少し回転も行ったり来たりさせる（動きを減らす設定の端末では止める）
   回転は上下の動きと周期をずらして、単調にならないようにする */
/* ふわふわの調整用（元に戻すときは：速さ 1／上下 -20px／回転 5deg） */
.problems {
	--float-speed: .7;
	--float-y: -26px;
	--float-r: 7deg;
	/* クネクネの調整用（うねりの高さ・1往復の時間・文字ごとのずれ） */
	--snake-amp: .2em;
	--snake-dur: .9s;
	--snake-lag: .11s;
}
/* クネクネ：1文字ずつ上下させ、後ろの文字ほど遅らせて波を頭からお尻へ流す */
.snake-c { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	.snake-c {
		animation: problem-snake var(--snake-dur) ease-in-out infinite alternate;
		animation-delay: calc(var(--i) * var(--snake-lag) - 10s);
	}
}
@keyframes problem-snake {
	from { translate: 0 calc(var(--snake-amp) * -1); }
	to { translate: 0 var(--snake-amp); }
}
@media (prefers-reduced-motion: no-preference) {
	.problem__word {
		animation:
			problem-float calc(var(--dur) * var(--float-speed)) ease-in-out var(--delay) infinite alternate,
			problem-tilt calc(var(--dur) * var(--float-speed) * 1.3) ease-in-out var(--delay) infinite alternate;
	}
}
@keyframes problem-float {
	from { translate: 0 0; }
	to { translate: 6px var(--float-y); }
}
@keyframes problem-tilt {
	from { rotate: calc(var(--r) - var(--float-r)); }
	to { rotate: calc(var(--r) + var(--float-r)); }
}
.problem__title {
	font-size: clamp(20px, 1.806vw, 26px);
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: .02em;
}
.problem__text { font-size: 16px; }

/* ==========================================================================
   たたみかけ（チェックリスト）
   ========================================================================== */
.check {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(24px, 5svh, 48px);
	min-height: 100vh;
	min-height: 100svh; /* 画面の高さいっぱい（スマホのアドレスバーの分も考慮） */
	padding: clamp(32px, 6svh, 120px) var(--pad-wide);
	background: #111; /* 黒に近いグレー（深刻さを出す。色数を増やさない） */
	color: #fff;
}
/* 透かしの写真（PCは右側、左に向かって消える／SPは全面） */
.check::before {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 50%;
	background: url("../img/checklist_bg.webp") center 30% / cover no-repeat;
	opacity: .28;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
	mask-image: linear-gradient(to right, transparent, #000 45%);
	pointer-events: none;
}
.check .sec-label__en { color: var(--yellow); }
.check .sec-label__ja { color: #fff; }
.check__list { display: flex; flex-direction: column; gap: clamp(14px, 2.6svh, 24px); }
.check__item {
	display: flex;
	align-items: center;
	gap: .8em;
	font-size: min(30px, 3.472vw); /* 1行に収まる大きさ（上限30px） */
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	white-space: nowrap;
}
/* 黄色の四角枠に、心の声と同じ赤で鋭いチェック（枠から少しはみ出す。1つずつ傾き・ハネの長さが違う） */
.check__box {
	position: relative;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	box-shadow: inset 0 0 0 2px #fff; /* 枠線は内側に描き、チェックの位置・大きさの基準を枠の外寸にする */
}
.check__mark {
	position: absolute;
	top: var(--t, -38%);
	left: var(--l, -6%);
	width: var(--w, 135%);
	height: var(--w, 135%);
	max-width: none; /* 共通の img, svg { max-width: 100% } で縮まないようにする */
	overflow: visible;
	rotate: var(--r);
	fill: #D34C4A;
}
/* 締めの一文：白い帯の上にロゴの青。「仕組み」の上にKAIRANBANのルビ */
.check__close {
	position: relative;
	isolation: isolate;
	align-self: flex-start;
	padding: .68em .7em .17em; /* 上はルビの分だけ広く、ルビの上と文字の下の空きをそろえる */
	white-space: nowrap; /* 1行で見せる（「。」の右を詰めた分で折り返さないように） */
	color: var(--blue);
	font-size: clamp(32px, min(4.167vw, 6.7svh), 60px); /* 特長の見出しと同じ大きさ（背の低い画面では少し小さく） */
	font-weight: 900;
	line-height: 1.5;
}
.check__close::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform-origin: left; }
.check__close-txt { display: inline-block; }
.check__close-end { margin-right: -.55em; } /* 「。」の右の空きを詰めて、左右の余白をそろえて見せる（PC・SP共通） */
/* ルビの幅で「仕組み」の字間が広がらないよう、上に重ねて置く */
.check__ruby { position: relative; display: inline-block; }
.check__ruby::before {
	content: attr(data-ruby);
	position: absolute;
	bottom: 100%;
	left: 50%;
	translate: -50% .1em;
	color: var(--blue);
	font-size: max(.4em, 10px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	white-space: nowrap;
}
/* 動き（JSが .is-pinned を付けたときだけ）
   ・セクションは約1画面分スクロールする間、画面に貼り付く
   ・スクロールに合わせてチェックが1つずつシュッと書き込まれる（.is-checked）
   ・全部入ったら（.is-solved）白い帯が左から走る→文字→ルビが上から落ちる */
@media (prefers-reduced-motion: no-preference) {
	.check-pin.is-pinned { height: calc(100svh + 60svh); } /* 貼り付く長さ＝画面0.6枚分 */
	.check-pin.is-pinned .check { position: sticky; top: 0; height: 100svh; }

	.is-pinned .check__mark {
		clip-path: inset(-60% 100% -60% -60%);
		transition: clip-path .25s cubic-bezier(.5, 0, .2, 1);
	}
	.is-pinned .check__item.is-checked .check__mark { clip-path: inset(-60%); }

	.is-pinned .check__close::before { scale: 0 1; transition: scale .35s cubic-bezier(.7, 0, .2, 1) .3s; }
	.is-pinned .check__close-txt { opacity: 0; translate: 0 .3em; transition: opacity .4s ease-out .65s, translate .4s ease-out .65s; }
	.is-pinned .check__ruby::before { opacity: 0; translate: -50% -.8em; transition: opacity .2s ease-out 1s, translate .35s cubic-bezier(.3, 1.6, .5, 1) 1s; }
	.is-pinned .check.is-solved .check__close::before { scale: 1 1; }
	.is-pinned .check.is-solved .check__close-txt { opacity: 1; translate: 0 0; }
	.is-pinned .check.is-solved .check__ruby::before { opacity: 1; translate: -50% .1em; }
}
@media (max-width: 767px) {
	.check { gap: 28px; padding: 56px 20px; }
	.check::before { width: 100%; opacity: .24; -webkit-mask-image: none; mask-image: none; }
	.check__list { gap: 14px; }
	.check__item { font-size: min(26px, 3.85vw); }
	.check__box { width: 1.07em; height: 1.07em; box-shadow: inset 0 0 0 1.5px #fff; } /* カンプ（文字15px・枠16px）に合わせる */
	.check__item { gap: .93em; }
	.check__close { padding: .95em .7em .3em; font-size: min(27px, (100vw - 40px) / 17.1); white-space: nowrap; } /* 1行で折り返さない。27pxのまま入るうちは27px、入らなくなったら画面幅（左右の余白20pxずつを除く）に収まる大きさまで小さくする（帯の幅＝文字16字＋左右の余白1.4字−「。」の右の空き0.55字＝約17字分）。ルビの上と文字の下の空きをそろえる */
}

/* ==========================================================================
   特徴
   ========================================================================== */
.points {
	position: relative;
	isolation: isolate;
	clip-path: inset(0); /* 固定背景をこのセクションの中だけに見せる */
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 120px var(--pad-wide);
	background: var(--blue-deep);
	color: #fff;
}
/* 背景：HEROのデバイス画像を薄く、画面中央に固定 */
.points__bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.points__bg img { width: min(1430px, 117vw); max-width: none; height: auto; opacity: .1; }
.points__em { color: var(--yellow); }
.points__head { display: flex; flex-direction: column; gap: 18px; }
.points__lead { max-width: 760px; font-size: 18px; }
.points__list { display: flex; flex-direction: column; gap: 72px; }
.point {
	display: flex;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}
.point:nth-child(even) { flex-direction: row-reverse; }
.point__media { flex-shrink: 0; width: min(640px, 50%); }
.point__img { width: 100%; height: 380px; object-fit: cover; }
.point__body { display: flex; flex-direction: column; gap: 14px; }
.point__label { color: var(--yellow); font-size: 17px; font-weight: 900; letter-spacing: .02em; }
.point__title {
	font-size: clamp(26px, 2.639vw, 38px);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: .02em;
}
.point__text { max-width: 430px; font-size: 18px; }

/* ==========================================================================
   使い方
   ========================================================================== */
.usage {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 120px var(--pad-wide);
	background: radial-gradient(ellipse at 50% 50%, #F8FAFF 0%, #fff 70%);
}
.usage__head { display: flex; flex-direction: column; gap: 18px; }
.usage__logo { width: 320px; height: auto; aspect-ratio: 800 / 82.29; margin-bottom: -2px; fill: var(--blue); }
.usage__title { font-size: clamp(32px, 3.972vw, 57.2px); }
.usage__lead { max-width: 720px; font-size: 18px; }
.steps { display: flex; gap: 40px; }
.step { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.step__media { margin: 0 12px 12px 0; box-shadow: 12px 12px 0 var(--yellow); }
.step__img { width: 100%; height: 250px; object-fit: cover; }
.step__body { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; }
.step__label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--blue-deep);
	font-size: 16px;
	font-weight: 900;
}
.step__no {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: var(--blue);
	color: #fff;
	font-size: 18px;
}
.step__title {
	font-size: clamp(20px, 1.667vw, 24px);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: .02em;
	text-wrap: balance;
}
.step__text { font-size: 16px; }

/* ==========================================================================
   Before / After
   ========================================================================== */
.ba { padding-top: 120px; background: var(--blue); }
.ba__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 0 var(--pad) 64px;
	color: #fff;
	font-size: clamp(32px, 3.889vw, 56px);
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: .02em;
	text-align: center;
}
.ba__title-l1 { display: inline-flex; align-items: center; gap: 16px; }
.ba__mark { flex-shrink: 0; width: 36px; height: 48px; fill: currentColor; }
.ba__cols { display: flex; }
.ba__col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Before→Afterの境目：Beforeのエリア全体を矢印に見立て、After側へ「く」の字にとがらせる
   PCは右向き「＞」（深さ56px）、SPは下向き「∨」（深さ32px）。とがった先端（＝境目の頂点）はエリアの左右中央 */
.ba__col--before {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	margin-right: -56px;
	clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 50%, calc(100% - 56px) 100%, 0 100%);
}
/* 境目に沿った3本の線（Before側・境目・After側）。幅0の入れ物を境目の付け根に置き、線をはみ出させる */
.ba__seam { position: relative; z-index: 2; flex: 0 0 0; width: 0; pointer-events: none; }
/* 線の端（丸い先端）が上下・左右の別の背景にはみ出さないよう、SVGの枠で切る */
.ba__seam-svg { position: absolute; max-width: none; overflow: hidden; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ba__seam-svg--pc { top: 0; left: -40px; width: 140px; height: 100%; }
.ba__seam-svg--sp { display: none; }
.ba__seam-svg polyline:nth-child(1) { opacity: .45; stroke-width: 1; }
.ba__seam-svg polyline:nth-child(2) { opacity: .75; stroke-width: 2; }
/* Before側→境目→After側の順に濃くなって流れる（画面に入っている間だけ。動きを減らす設定では止める） */
@media (prefers-reduced-motion: no-preference) {
	.ba__seam.is-playing polyline { animation: ba-seam 1.6s ease-in-out infinite; }
	.ba__seam.is-playing polyline:nth-child(2) { animation-delay: .2s; }
	.ba__seam.is-playing polyline:nth-child(3) { animation-delay: .4s; }
}
@keyframes ba-seam {
	0%, 100% { opacity: .25; }
	30% { opacity: 1; }
	60% { opacity: .25; }
}
.ba__label {
	padding: 18px 0;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.75;
	letter-spacing: .02em;
}
.ba__body { flex: 1; display: flex; flex-direction: column; gap: 28px; padding-top: 40px; padding-bottom: 72px; }
.ba__col--before .ba__label { padding-left: var(--pad-wide); background: #D9DFEF; color: #33405F; }
.ba__col--before .ba__body { padding-left: var(--pad-wide); padding-right: 96px; background: #EEF1F8; color: #33405F; } /* 右はとがった境目と線の分 */
.ba__col--after .ba__label { padding-left: 108px; background: var(--yellow); color: var(--blue-deep); }
.ba__col--after .ba__body { padding-left: 108px; padding-right: var(--pad-wide); background: #FFF5C4; color: var(--navy); }
.ba__media { position: relative; }
.ba__media--gray::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(128, 128, 128, .4);
	pointer-events: none;
}
/* 写真枠の高さ（アイコンの位置計算にも使う）。
   Afterの写真は1.2倍に拡大して見せるため、枠が横長すぎると4人の頭が上で切れる。
   枠の高さを「Afterの枠の幅×0.646」以上にして、頭の上が切れないようにする（Afterの枠の幅は画面幅から計算：1440pxまでは 41.67vw−52px、それより広い画面は 50vw−172px） */
.ba__media { --ba-h: max(320px, .646 * max(41.67vw - 52px, 50vw - 172px)); }
.ba__img { width: 100%; height: var(--ba-h); object-fit: cover; }
/* Afterの写真は枠はそのままで、中身を1.2倍に拡大して見せる（アイコンを枠からはみ出させるため、切り抜きは写真を包む .ba__clip で行う） */
.ba__col--after .ba__clip { position: relative; overflow: hidden; }
.ba__col--after .ba__img { scale: 1.2; }
.ba__list { display: flex; flex-direction: column; gap: 6px; }
/* Before／After：行全体の約物（、。など）の空きを詰めて行を短くする */
.ba__list li > span { font-feature-settings: "palt"; }
.ba__list li {
	display: flex;
	gap: 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}
.ba__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 5px;
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   中間CTA
   ========================================================================== */
.mid-cta {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	min-height: 388px;
	padding: 64px var(--pad-wide);
	background: var(--blue);
	color: #fff;
	overflow: hidden;
}
/* タブレットを持つ手。腕がセクションの下の境目から出てくるよう、下の余白ぶん下げて画像の下端をセクションの下端に合わせる */
.mid-cta__deco { --tab-w: 310px; display: block; flex-shrink: 0; align-self: flex-end; width: var(--tab-w); height: auto; margin: 0 0 -64px auto; translate: 20% 0; pointer-events: none; } /* 手の向きに合わせて、画像幅の20%ぶん右へ */
.mid-cta__text { display: flex; flex-direction: column; gap: 8px; align-self: center; }
/* PC：文字（見出し・料金・ボタン）の右にタブレットを大きく並べる。768〜1023pxは文字の下に回り込む */
@media (min-width: 1024px) {
	.mid-cta { flex-wrap: nowrap; }
	.mid-cta__text { flex: 1 1 auto; min-width: 0; }
	/* タブレットは幅1440pxの画面で562px。文字の横の空きに少し食い込ませて置き、見出しと料金の文が折り返さないようにする（左へ画像幅の23%）。
	   手が帯の下の境目で切れる割合は画像の高さの約23%のまま */
	.mid-cta__deco { --tab-w: min(562px, 39vw); margin: 0 0 calc(var(--tab-w) * -.1477) calc(var(--tab-w) * -.2313); }
}
.mid-cta__title {
	--t: clamp(32px, 3.611vw, 52px); /* 見出しの文字の大きさ（ルビの字間の計算にも使う） */
	font-size: var(--t);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: .02em;
}
.mid-cta__title rt { font-size: 16px; font-weight: 700; letter-spacing: .1em; }
/* ルビを「度合い」から少し離す（PC約5px・SPは文字の大きさに合わせて約4px上へ）。
   上へずらすために1つの箱にまとめているので、元の見た目（「度」「合」「い」それぞれの上に「レ」「ベ」「ル」が乗る字間）を字間と横位置で再現する */
.mid-cta__rt { display: inline-block; letter-spacing: calc(var(--t) - 1em); translate: calc(var(--t) / 2 - .55em) -.31em; }
.mid-cta__lead { padding-top: 20px; font-size: 20px; font-weight: 700; }
.mid-cta .mid-cta__em { font-size: 30px; }
.mid-cta__free { font-size: 26px; }
.mid-cta__btn { align-self: flex-start; margin-top: 24px; padding: 20px 48px; font-size: 22px; }

/* ==========================================================================
   活用事例
   ========================================================================== */
.cases {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 120px var(--pad-wide);
	background:
		radial-gradient(ellipse at 90% 80%, #E4EBFF 0%, transparent 40%),
		radial-gradient(ellipse at 5% 10%, #fff 0%, transparent 35%),
		#F2F5FC;
}
.cases__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.case { display: flex; flex-direction: column; background: #fff; }
/* 元画像と同じ3:2を基準にする（PCでは高さ220pxまで） */
.case__img { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 220px; object-fit: cover; }
.case__img--contain { object-fit: contain; background: #E6E6E6; }
/* 画像は寄りで見せ、ホバー（SPは画面に入ったとき）で引いて全体を見せる */
.case__media { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.case__img { scale: 1.22; transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
	.case:hover .case__img { scale: 1; }
	@media (hover: none) {
		.js .case.is-in .case__img { scale: 1; transition-delay: .4s; }
	}
}
.case__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 30px; }
/* 業種などの分類は、見出し（黄色の四角つき）と区別できるよう小さなラベル（お客様の声の業種と同じ形）にする */
.case__tag {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 4px;
	background: #E8EDFF;
	color: var(--blue-deep);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}
.case__title { font-size: 20px; font-weight: 900; line-height: 1.5; letter-spacing: .02em; }
.case__text { font-size: 15px; }

/* ==========================================================================
   料金
   ========================================================================== */
.price {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(32px, 4.444vw, 64px);
	/* 上の余白＝セクション名とロゴの高さ＋余白 */
	padding: calc(48px + 40px + 14px + min(600px, 80vw) * 82.29 / 800 + 48px) max(var(--pad), calc((100% - 1120px) / 2)) 80px;
	background: linear-gradient(135deg, #FFD400 0%, #FFE44D 40%, #FFD400 100%);
}
.price__head {
	position: absolute;
	top: 48px;
	inset-inline: max(var(--pad), calc((100% - 1120px) / 2)); /* 本文と同じ左右の位置 */
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* セクション名は他の見出しと同じく左寄せ */
	gap: 14px;
}
.price__logo {
	align-self: center;
	width: min(600px, 80vw);
	height: auto;
	aspect-ratio: 800 / 82.29;
	fill: var(--blue);
}
.price__main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.price__title { font-size: clamp(26px, 2.5vw, 36px); font-weight: 900; line-height: 1.35; letter-spacing: .02em; }
.price__initial { display: flex; flex-direction: column; align-items: flex-start; align-self: center; }
.price__initial-label { position: relative; z-index: 1; margin-bottom: -.2em; font-size: 20px; font-weight: 700; }
.price__zero {
	color: var(--blue);
	font-size: clamp(100px, 11.111vw, 160px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: .02em;
}
.price__zero .num { font-size: 1.1em; }
.price__zero small { font-size: .4em; }
.price__lead { align-self: center; font-size: 16px; font-weight: 500; line-height: 1.9; text-align: center; }
.price__side { display: flex; flex-direction: column; gap: 10px; width: 540px; max-width: 50%; flex-shrink: 0; }
.price__table { width: 100%; border-collapse: collapse; background: #fff; color: var(--blue); }
.price__table th,
.price__table td { padding: 15px 32px; text-align: left; }
.price__table td { text-align: right; font-size: 32px; font-weight: 900; line-height: 1.4; white-space: nowrap; }
.price__table tbody th { font-size: 18px; font-weight: 700; white-space: nowrap; }
.price__table tbody tr + tr > * { border-top: 1px solid #D9DFEF; }
.price__table thead th { padding-block: 12px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; }
.price__table thead th:last-child { text-align: right; }
.price__unit { white-space: nowrap; }
.price__note { font-size: 14px; font-weight: 500; }
/* クライアント確認用の赤字メモ（確認できたら削除する） */

/* ==========================================================================
   お客様の声
   ========================================================================== */
.voices {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 120px var(--pad-wide) 80px;
	background: radial-gradient(ellipse at 10% 5%, #F0F4FF 0%, transparent 35%), #fff;
}
.voices__head { display: flex; flex-direction: column; gap: 14px; }
.voices__title { display: flex; align-items: center; gap: 16px; }
.voices__mark { flex-shrink: 0; width: 34px; height: 45px; fill: var(--blue); }
.voices__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.voice {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
/* 2:1に固定（極端な横長にしない） */
.voice__img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.voice__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 28px 32px; }
.voice__pill {
	padding: 2px 10px;
	border-radius: 4px;
	background: #E8EDFF;
	color: var(--blue-deep);
	font-size: 14px;
	font-weight: 700;
}
.voice__title { font-size: 22px; font-weight: 900; line-height: 1.5; letter-spacing: .02em; text-wrap: balance; }
/* 768〜1023px：カードが狭く、行をそろえると途中に短い行ができるため、自然な折り返しにする */
@media (min-width: 768px) and (max-width: 1023px) { .voice__title { text-wrap: pretty; } }
.voice__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--sub);
	font-size: 16px;
}
.voice.is-open .voice__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* 開閉の途中は枠からはみ出した本文を隠す（「続きを読む／閉じる」に本文がかぶらないように） */
.voice .voice__text.is-animating,
.voice.is-open .voice__text.is-animating { overflow: hidden; }
.voice__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue-deep);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
/* ボタンの押せる範囲をテキストの枠全体に広げる（枠のどこをクリックしても開閉） */
.voice__more::before { content: ""; position: absolute; inset: 0; }
.voice__more:focus-visible { outline: none; }
.voice__more:focus-visible::before { outline: 3px solid var(--blue); outline-offset: -3px; }
.voice__more:hover .voice__more-label { text-decoration: underline; text-underline-offset: 4px; }
.voice__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s; }
.voice.is-open .voice__more svg { rotate: 180deg; }
.voice__more[hidden] { display: none; }

.results { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.results__title { font-size: 20px; font-weight: 900; letter-spacing: .02em; }
.results__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.results__list li {
	padding: 10px 22px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.75;
}
.results__list .results__more { padding: 0 0 0 4px; border: 0; background: none; color: var(--sub); }
.results__img { width: 816px; margin-top: 24px; }

/* ==========================================================================
   ギャラリー（1列のスライダー）
   ・高さ100px固定。何もしなければ右から左へゆっくり流れ続ける（JS）
   ・ドラッグ・スワイプ・横スクロールで左右に動かせる。縦方向のスクロールはページに渡す
   ========================================================================== */
.gallery__viewport {
	overflow: hidden;
	/* ホバーで写真の枠が上下に伸びても切れないよう余白を取る（周りの位置は変えない） */
	padding-block: 10px;
	margin-block: -10px;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.gallery__viewport.is-dragging { cursor: grabbing; }
.gallery__viewport:focus-visible { outline-offset: -3px; }
.gallery__track { display: flex; width: max-content; will-change: transform; }
/* 高さは100pxで固定し、枠が伸びても上下にはみ出すだけで、下のセクションは動かさない */
.gallery__set { display: flex; align-items: center; gap: 5px; height: 100px; padding-right: 5px; }
/* 写真の枠：幅は写真と同じまま、ホバーで上下に伸びる。はみ出た写真は枠で切る */
.gallery__item {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	overflow: hidden;
	background: #E4E8F2; /* 読み込み中の下地 */
	transition: height .4s ease-out;
}
.gallery__img {
	flex: none;
	width: auto;
	max-width: none;
	height: 100px;
	object-fit: cover;
	-webkit-user-drag: none;
	transition: scale .4s ease-out;
}
/* マウスを乗せた写真：枠を上下に伸ばし（120px）、中の写真は縦横比のまま1.2倍。
   幅は変わらないので隣と重ならない。マウス操作の環境のみ・ドラッグ中は伸ばさない */
@media (hover: hover) and (pointer: fine) {
	/* マウスを乗せた写真 */
	.gallery__item:hover { height: 120px; }
	.gallery__item:hover .gallery__img { scale: 1.2; }
	.gallery__viewport.is-dragging .gallery__item { height: 100px; }
	.gallery__viewport.is-dragging .gallery__img { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.gallery__item,
	.gallery__img { transition: none; }
}

/* ==========================================================================
   導入の流れ・よくある質問
   ========================================================================== */
.support {
	display: flex;
	align-items: flex-start;
	gap: clamp(40px, 6.667vw, 96px);
	padding: 120px var(--pad-wide);
}
.support__title { margin-bottom: 12px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.4; }
.flow { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; width: 540px; max-width: 46%; flex-shrink: 0; }
.flow__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* 横並びのときは、よくある質問（すべて閉じた状態）と同じ高さ以上にする。JSで設定する */
	min-height: var(--flow-h, 0);
}
/* 番号の丸をつなぐ縦線。1→2、2→3の2本に分け、画面に入ったら1回だけ順に伸ばす（2で一瞬止まる）
   位置と長さはJSで設定する */
.flow__list::before,
.flow__list::after {
	content: "";
	position: absolute;
	left: var(--line-left, 0);
	z-index: 1;
	width: 2px;
	background: var(--blue);
	transform-origin: top;
	scale: 1 0;
}
.flow__list::before { top: var(--line1-top, 0); height: var(--line1-h, 0); }
.flow__list::after { top: var(--line2-top, 0); height: var(--line2-h, 0); }
.flow__list.is-in::before,
.flow__list.is-in::after { scale: 1 1; }
@media (prefers-reduced-motion: no-preference) {
	.flow__list.is-in::before { transition: scale .7s ease-in-out; }
	.flow__list.is-in::after { transition: scale .7s ease-in-out 1s; }
}
.flow__item {
	/* 余った高さは隙間ではなく枠の高さに配る（3つとも同じ高さ） */
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 125px;
	padding: 14px 20px;
	border-radius: 8px;
	background: #F3F5FA;
}
.flow__no {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	position: relative;
	z-index: 2;
	font-size: 20px;
	font-weight: 900;
}
.flow__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow__title { font-size: clamp(18px, 1.528vw, 22px); font-weight: 700; line-height: 1.5; word-break: auto-phrase; }
@media (min-width: 1200px) { .flow__title { white-space: nowrap; } }
.flow__sub { color: var(--blue-deep); font-size: 16px; font-weight: 900; }
/* イラストの大きさ
   ・枠が高くなったら、枠の高さの約6割の高さまで大きくする（--flow-h はJSで設定する列全体の高さ）
   ・文字の入る幅（222px）は必ず残す。最小56px、最大206px（PCの137pxの1.5倍） */
.flow__img {
	flex-shrink: 0;
	width: clamp(56px, min(100cqw - 222px, max(min(30cqw, 137px), (var(--flow-h, 0px) - 28px) / 3 * .6 * 137 / 109)), 206px);
	height: auto;
	aspect-ratio: 137 / 109;
	object-fit: contain;
}

.faq { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.faq__list { border-top: 1px solid #C9D2EA; }
.faq__item { border-bottom: 1px solid #C9D2EA; }
.faq__item.is-animating { overflow: hidden; }
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 4px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; }
.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 3px;
	width: 14px;
	height: 2.5px;
	margin-top: -1.25px;
	border-radius: 2px;
	background: currentColor;
	transition: rotate .2s;
}
.faq__icon::after { rotate: 90deg; }
.faq__item[open] .faq__icon::after { rotate: 0deg; }
.faq__item[open] .faq__q { padding-bottom: 12px; }
.faq__a { padding: 0 44px 24px 4px; font-size: 16px; }
.faq__more { margin-top: 20px; font-size: 15px; font-weight: 700; }
.faq__more a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }
.faq__more a:hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   最後のCTA
   ========================================================================== */
.last-cta {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	min-height: 600px;
	padding: 72px var(--pad-wide);
	color: #fff;
	overflow: hidden;
}
.last-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.last-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(44, 75, 219, .85);
}
.last-cta__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 560px; max-width: 50%; }
.last-cta__title { font-size: clamp(32px, 3.611vw, 52px); font-weight: 900; line-height: 1.4; letter-spacing: .02em; }
.last-cta__lead { font-size: 20px; font-weight: 700; }
.last-cta .last-cta__em { font-size: 30px; }
.last-cta__lead small { font-size: 16px; }
.last-cta__btn { padding: 20px 52px; background: #FFE038; font-size: 22px; }
.last-cta__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* 白い枠線のボタン（トライアル以外の受け皿） */
.btn--outline { border: 2px solid #fff; background: transparent; color: #fff; }
.btn--outline:hover { background: rgba(255, 255, 255, .14); }
.last-cta__sub { padding: 14px 36px; font-size: 18px; }
.last-cta__photo { position: relative; flex-shrink: 1; width: 560px; margin: 0 0 20px 20px; }
.last-cta__photo::before {
	content: "";
	position: absolute;
	inset: 20px 20px -20px -20px;
	background: #FFE038;
}
.last-cta__img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }

/* ==========================================================================
   フッター
   ========================================================================== */
.footer { position: relative; z-index: 2; container-type: inline-size; border-top: 1px solid var(--line); background: #fff; }
.footer__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 56px var(--pad-wide) 64px;
	color: var(--sub);
	font-size: 13px;
}
.footer__devices {
	position: absolute;
	top: 0;
	right: max(var(--pad), calc((100% - 1200px) / 2));
	width: 36%;
	aspect-ratio: 510 / 231;
	object-fit: cover;
	/* 上へずらす量：画像上部の透明な余白8.8%＋端末の高さの18%（上のセクションにかかるのは端末の18%） */
	translate: 0 -23.7%;
}
.footer__logo { align-self: flex-start; color: var(--blue); }
.footer__logo-svg { width: 195px; height: auto; aspect-ratio: 800 / 82.29; fill: currentColor; }
.footer__address { width: fit-content; max-width: 60%; }
.footer__company { font-weight: 700; }
.footer__links { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.footer__links li + li::before { content: "｜"; }
.footer__links a:hover { text-decoration: underline; }
.footer__copy {
	padding: 4px;
	background: var(--blue);
	color: #fff;
	font-size: 13px;
	line-height: 28px;
	text-align: center;
}

/* ==========================================================================
   表示アニメーション（画面に入ったら1回だけ）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.js .js-reveal {
		opacity: 0;
		translate: 0 16px;
		transition: opacity .5s ease-out, translate .5s ease-out;
	}
	.js .js-reveal.is-in { opacity: 1; translate: 0 0; }
}

/* 1279px以下：中間CTAの装飾画像が文章に重ならないよう、上に余白をとる */
@media (min-width: 768px) and (max-width: 1279px) {
	.footer { overflow-x: clip; }
	.footer__address { max-width: none; }
}

/* ==========================================================================
   タブレット（768〜1023px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
	.header__nav,
	.header__menu { gap: 20px; }
	.header__menu a { white-space: nowrap; }
	.fv__text { width: 50%; }
	.stats { right: 20px; bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
	.stats__item { padding: 12px 16px; }
	.stats__item + .stats__item { border-left: 0; }
	.stats__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .3); }
	.stats__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .3); }
	.problems { gap: 80px; }
	.problems__list { gap: 36px; padding: 0 48px 56px; }
	.problem:nth-child(2) { top: 40px; }
	.problem:nth-child(3) { top: 14px; }
	.problem__tape { width: 120px; top: -18px; }
	.problem:nth-child(1) .problem__word--1 { --l: -10%; }
	.problem:nth-child(1) .problem__word--2 { --l: -16%; }
	.problem:nth-child(3) .problem__word--2 { --l: 60%; }
	.point__img { height: 300px; }
	.step__img { height: 200px; }
	.ba__media { --ba-h: max(260px, .646 * (41.67vw - 52px)); }
	.cases__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.price { flex-direction: column; align-items: stretch; }
	.price__main { align-items: center; }
	.price__title { align-self: flex-start; } /* 見出しは他のセクションと同じく左寄せ */
	.price__side { width: 100%; max-width: none; }
	.flow { width: 50%; max-width: none; }
	.flow__item { gap: 12px; padding: 14px 16px; }
	.flow__no { width: 36px; height: 36px; font-size: 18px; }
	.last-cta { flex-direction: column; align-items: flex-start; }
	.last-cta__text { width: 100%; max-width: none; }
	.last-cta__photo { width: min(560px, 100%); }
}

/* 768〜959px：メニュー5項目とボタンが1行に収まるよう、ロゴと間隔を詰める */
@media (min-width: 768px) and (max-width: 959px) {
	.header__logo-svg { height: 18px; }
	.header__nav { gap: 16px; }
	.header__menu { gap: 14px; }
	.header__menu a { font-size: 14px; }
}

/* ==========================================================================
   SP（767px以下）
   ========================================================================== */
@media (max-width: 767px) {
	:root { --header-h: 56px; --pad: 20px; --pad-wide: 20px; }

	@media (prefers-reduced-motion: no-preference) {
		.js .js-reveal { translate: 0 12px; transition-duration: .4s; }
	}

	.sec__title { font-size: min(24px, 6.15vw); line-height: 1.4; }
	.problems__title,
	.points .sec__title,
	.cases__title { font-size: min(27px, 6.92vw); }
	.btn--lg { width: 100%; min-height: 52px; padding: 14px 0; font-size: 17px; }

	.header__inner { padding: 0 20px; }
	.header__logo-svg { height: 18px; }

	/* FV：画像 → 料金のまとめ → 見出し〜CTA */
	.fv { flex-direction: column; padding-bottom: 48px; }
	.fv__visual { order: -1; flex: 1 0 360px; }
	.fv__visual::before { height: 80px; background: linear-gradient(rgba(15, 27, 77, .35), transparent); }

	.stats {
		right: auto;
		bottom: -100px;
		left: 50%;
		translate: -50% 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 273px;
		max-width: calc(100% - 24px);
		padding: 0;
		border-radius: 12px;
		box-shadow: 0 16px 40px rgba(11, 20, 64, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
	}
	.stats__item { gap: 4px; padding: 12px 16px; }
	.stats__item + .stats__item { border-left: 0; }
	.stats__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .3); }
	.stats__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .3); }
	.stats dt { font-size: 14px; }
	.stats dd { font-size: 14px; }
	.stats dd .num { font-size: 30px; }
	.stats dd b { font-size: 22px; }
	.fv__text {
		flex: none;
		width: 100%;
		max-width: none;
		gap: 16px;
		padding: 130px 20px 0;
	}
	.fv__eyebrow { gap: 10px; font-size: 14px; }
	.fv__eyebrow::before { width: 32px; height: 3px; }
	.fv__title { font-size: min(30px, 7.7vw); line-height: 1.4; }
	.fv__ribbon { font-size: 13px; }
	.fv__brand { font-size: min(48px, 12.3vw); line-height: 1.2; }
	.fv__lead { font-size: 15px; line-height: 1.8; white-space: nowrap; } /* 改行（<br>）の位置以外で折り返さない（iPhoneのSafariで「出勤してからそ／の場で読む。」と途中で折り返すため） */
	.fv__btn { align-self: center; width: min(290px, 100%); min-height: 60px; }
	.fv__devices { order: 1; align-self: center; width: min(360px, 100%); margin-top: 8px; }
	.fv__btn { order: 2; margin-top: 16px; } /* CTAは一番下 */

	/* 悩み */
	.problems { gap: 32px; padding: 56px 0 140px; } /* 下は、言葉が慣性で動いても次のセクションにかからない余白 */
	.problems__list { grid-template-columns: 1fr; gap: 0; padding: 40px 0 0; }
	.problem:nth-child(n) { top: 0; }
	.problems__list { container-type: inline-size; }
	/* 写真は3枚とも同じ大きさ：右へ寄せた悩み1・3に収まる幅（リスト幅の70%から余白を引いた幅）に、悩み2もそろえる */
	.problem__frame { width: min(290px, calc(70cqi - 64px)); padding: 8px; }
	/* 写真＋文章を1セットにして互い違いに：悩み1・3を右へ */
	.problem:nth-child(odd) { padding-left: 30%; }
	.problem__frame { margin-left: 16px; }
	.problem:nth-child(1) .problem__frame { rotate: -3deg; }
	.problem:nth-child(2) .problem__frame { rotate: 2.5deg; }
	.problem:nth-child(3) .problem__frame { rotate: -2deg; }
	.problem__tape { top: -17px; width: 110px; }
	.problem__body { gap: 8px; padding: 28px 20px 96px; }
	.problem:last-child .problem__body { padding-bottom: 0; }
	.problem__title { font-size: 20px; }
	.problem__text { font-size: 14px; }
	.problem__word { font-size: calc(var(--fs) * 1.5px); }
	.problem:nth-child(1) .problem__word--1 { --l: 12px; --t: 64px; --b: auto; --fs: 20; --r: -6deg; }
	.problem:nth-child(1) .problem__word--2 { --l: 59%; --t: -40px; --b: auto; --fs: 18; --r: 5deg; }
	.problem:nth-child(1) .problem__word--3 { --l: 16px; --t: auto; --b: 46px; --fs: 18; --r: -4deg; }
	.problem:nth-child(2) .problem__word--1 { --l: 12px; --t: auto; --b: 52px; --fs: 16; --r: -4deg; }
	.problem:nth-child(2) .problem__word--2 { --l: 64%; --t: -40px; --b: auto; --fs: 20; --r: 7deg; }
	.problem:nth-child(2) .problem__word--3 { --l: 51%; --t: auto; --b: 40px; --fs: 15; --r: 5deg; }
	.problem:nth-child(3) .problem__word--1 { --l: 14px; --t: auto; --b: -28px; --fs: 16; --r: 3deg; }
	.problem:nth-child(3) .problem__word--2 { --l: 49%; --t: auto; --b: -76px; --fs: 16; --r: -4deg; } /* 文章と次のセクションの中間 */
	.problem:nth-child(3) .problem__word--3 { --l: 14px; --t: 166px; --b: auto; --fs: 16; --r: -6deg; }

	/* POINT */
	.points { gap: 32px; padding: 48px 20px; }
	.points__head { gap: 12px; }
	.points__lead { font-size: 14px; }
	.points__list { gap: 40px; }
	.point,
	.point:nth-child(even) { flex-direction: column; align-items: stretch; gap: 14px; }
	.point__media { width: 100%; }
	.point__img { height: 190px; }
	.point__body { gap: 8px; }
	.point__label { font-size: 14px; }
	.point__title { font-size: 22px; }
	.point__text { font-size: 14px; }

	/* 使い方 */
	.usage { gap: 32px; padding: 48px 20px; }
	.usage__head { gap: 12px; }
	.usage__logo { width: 200px; }
	.usage__title { font-size: 24px; }
	.usage__lead { font-size: 14px; }
	.steps { flex-direction: column; gap: 24px; }
	.step__media { margin: 0 8px 8px 0; box-shadow: 8px 8px 0 var(--yellow); }
	.step__img { height: 160px; }
	.step__body { padding-top: 20px; }
	.step__label { gap: 8px; font-size: 14px; }
	.step__no { width: 28px; height: 28px; font-size: 16px; }
	.step__title { font-size: 20px; }
	.step__text { font-size: 14px; }

	/* Before / After：アイコンは1行目だけ。2行目の「職」は「K」の位置に揃える */
	.ba { padding-top: 40px; }
	.ba__title {
		display: block;
		width: fit-content;
		margin: 0 auto;
		padding: 0 20px 28px;
		font-size: 26px;
		text-align: left;
	}
	.ba__title-l1 { gap: 10px; }
	.ba__title-l2 { padding-left: 34px; }
	.ba__mark { width: 24px; height: 32px; }
	.ba__cols { flex-direction: column; }
	/* 境目は下向き「∨」：Beforeの下端をとがらせ、Afterの上に32px重ねる */
	.ba__col--before {
		flex: none;
		margin: 0 0 -32px;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 50% 100%, 0 calc(100% - 32px));
	}
	.ba__seam { width: auto; height: 0; }
	.ba__seam-svg--pc { display: none; }
	.ba__seam-svg--sp { display: block; top: -24px; left: 0; width: 100%; height: 80px; } /* 上下4pxは線の太さ・頂点の丸みが切れないための余白 */
	.ba__label,
	.ba__col--before .ba__label,
	.ba__col--after .ba__label { padding: 14px 20px; font-size: 20px; }
	.ba__body,
	.ba__col--before .ba__body,
	.ba__col--after .ba__body { gap: 16px; padding: 24px 20px 32px; }
	.ba__col--before .ba__body { padding-bottom: 64px; } /* とがった部分と線の分 */
	.ba__col--after .ba__label { padding-top: 44px; }
	.ba__media { --ba-h: max(160px, .646 * (100vw - 40px)); } /* 枠の幅（画面幅−左右の余白40px）×0.646 */
	.ba__list li { gap: 10px; font-size: 15px; }
	.ba__icon { width: 18px; height: 18px; }

	/* 中間CTA */
	.mid-cta { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; padding: 40px 20px; }
	.mid-cta__deco { --tab-w: min(calc((100vw - 40px) * .76), 310px); margin: -4px 0 -40px auto; translate: 10% 0; } /* ボタンとの間12px。右へは画像幅の10% */
	.mid-cta__text { align-self: stretch; gap: 16px; }
	.mid-cta__title { --t: min(24px, 6.15vw); }
	.mid-cta__title rt { font-size: 12px; }
	.mid-cta__lead { padding-top: 0; font-size: 14px; }
	.mid-cta .mid-cta__em { font-size: 22px; }
	.mid-cta__free { font-size: 18px; }
	.mid-cta__btn { width: 80%; max-width: 350px; margin-top: 8px; padding: 14px 0; font-size: 17px; }

	/* 活用事例 */
	.cases { gap: 24px; padding: 48px 10px; }
	.cases__title { margin-right: -5px; padding-left: 5px; }
	.cases__label { margin-bottom: -14px; padding-left: 5px; }
	.sec-label__ja { font-size: 14px; }
	.sec-label__ja::before { width: 10px; height: 10px; }
	.cases__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.case__img { max-height: none; }
	.case__body { gap: 6px; padding: 14px 12px 16px; }
	.case__tag { padding: 1px 8px; }
	.case__title { font-size: 14px; line-height: 1.45; }
	.case__text { font-size: 14px; line-height: 1.6; }

	/* 料金 */
	.price { flex-direction: column; align-items: stretch; gap: 20px; padding: calc(28px + 38px + 10px + min(300px, 80vw) * 82.29 / 800 + 28px) 20px 56px; overflow: hidden; }
	.price__head { top: 28px; gap: 10px; }
	.price__logo { width: min(300px, 80vw); }
	.price__main { align-items: center; gap: 20px; }
	.price__title { align-self: flex-start; font-size: min(24px, 6.15vw); line-height: 1.4; }
	.price__initial { align-items: center; }
	.price__initial-label { margin-bottom: 0; font-size: 16px; }
	.price__zero { font-size: 100px; }
	.price__side { width: 100%; max-width: none; gap: 8px; }
	.price__table { border-radius: 6px; overflow: hidden; }
	.price__table th,
	.price__table td { padding: 12px clamp(12px, 5.1vw, 20px); }
	.price__table thead th { padding-block: 10px; font-size: 14px; }
	.price__table tbody th { font-size: 16px; }
	.price__table td { font-size: 26px; }
	.price__note { text-align: center; }

	/* お客様の声 */
	.voices { gap: 28px; padding: 64px 20px 56px; }
	.voices__head { gap: 10px; }
	.voices__title { gap: 10px; font-size: min(23px, 5.9vw); }
	.voices__mark { width: 24px; height: 32px; }
	.voices__list { grid-template-columns: 1fr; gap: 20px; }
	.voice__body { gap: 8px; padding: 16px 20px 24px; }
	.voice__title { font-size: 18px; }
	.voice__text { font-size: 14px; }
	.voice__more { font-size: 14px; }
	.voice__more svg { width: 16px; height: 16px; }
	.results { gap: 12px; }
	.results__title { font-size: 17px; }
	.results__list { gap: 8px; }
	.results__list li { padding: 8px 16px; font-size: 14px; }
	.results__img { width: 350px; margin-top: 8px; }


	/* 導入の流れ・よくある質問 */
	.support { gap: 24px; padding: 64px 20px; }
	.support__title { margin-bottom: 8px; font-size: 24px; }
	.faq .support__title { margin-bottom: 12px; }
	.flow { width: 50%; max-width: none; }
	.flow__list { gap: 12px; }
	.flow__item { gap: 14px; min-height: auto; padding: 14px 16px; }
	.flow__no { width: 36px; height: 36px; font-size: 18px; }
	.flow__title { font-size: 17px; line-height: 1.4; }
	.flow__sub { font-size: 14px; }
	.faq__q { gap: 12px; padding: 18px 4px; font-size: 15px; }
	.faq__item[open] .faq__q { padding-bottom: 10px; }
	.faq__icon { width: 18px; height: 18px; }
	.faq__icon::before,
	.faq__icon::after { left: 2px; }
	.faq__a { padding: 0 4px 20px; font-size: 14px; }

	/* 最後のCTA */
	/* タブレットと同じデザイン：文字は左寄せ、写真は黄色の枠つきで幅いっぱいにしない */
	.last-cta { flex-direction: column; align-items: flex-start; gap: 32px; min-height: 0; padding: 56px 20px; }
	.last-cta__text { gap: 20px; width: 100%; max-width: none; }
	.last-cta__title { font-size: min(28px, 7.2vw); }
	.last-cta__lead { font-size: 16px; }
	.last-cta .last-cta__em { font-size: 24px; }
	.last-cta__lead small { font-size: 14px; }
	.last-cta__btn { padding: 14px 32px; font-size: 17px; }
	.last-cta__photo { width: min(560px, calc(100% - 14px)); margin: 0 0 14px 14px; }
	.last-cta__photo::before { inset: 14px 14px -14px -14px; }

	/* フッター */
	/* 上の余白＝端末の下端の位置（画像の高さの68%）＋20px */
	.footer__inner { gap: 16px; padding: calc(62cqw / 510 * 231 * .68 + 20px) 20px 24px; font-size: 14px; }
	.footer__devices { right: 20px; width: 62%; }
	.footer__logo-svg { width: 176px; }
	.footer__address { max-width: none; line-height: 1.6; }
	.footer__copy { font-size: 14px; }
}

/* 374px以下：悩みの言葉どうしが重ならないよう、一部の位置をずらす */
@media (max-width: 374px) {
	.problems { padding-bottom: 152px; }
	.problem:nth-child(2) .problem__body { padding-bottom: 112px; }
	.problem:nth-child(2) .problem__word--1 { --b: 66px; }
	.problem:nth-child(2) .problem__word--3 { --l: 36%; --b: 34px; }
	.problem:nth-child(3) .problem__word--1 { --b: -24px; }
	.problem:nth-child(3) .problem__word--2 { --l: 34%; --b: -88px; }
	.problem:nth-child(3) .problem__word--3 { --t: 132px; }
}

/* ==========================================================================
   600px未満：導入の流れとよくある質問を縦に並べる
   ========================================================================== */
@media (max-width: 599px) {
	.support { flex-direction: column; align-items: stretch; gap: 64px; }
	.flow { width: 100%; }
}

/* 600〜767px：横並びで幅が狭いため、イラストと見出しを少し小さくする */
@media (min-width: 600px) and (max-width: 767px) {
	.flow__title { font-size: 16px; }
}

/* 480〜767px：料金のまとめは4つを横一列 */
@media (min-width: 480px) and (max-width: 767px) {
	.stats {
		bottom: 0;
		translate: -50% 50%;
		grid-template-columns: repeat(4, auto);
		width: max-content;
	}
	.stats__item:nth-child(n) { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .3); }
	.stats__item:first-child { border-left: 0; }
	.fv__text { padding-top: 72px; }
}

/* 600〜767px：FVは見出しとデバイス画像を横並び（CTAは下） */
@media (min-width: 600px) and (max-width: 767px) {
	.fv__text {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto auto 1fr auto;
		grid-template-areas: ". dev" "eyebrow dev" "ribbon dev" "title dev" "lead dev" ". dev" "btn btn";
		gap: 16px 20px;
		padding-top: 56px;
	}
	.fv__eyebrow { grid-area: eyebrow; }
	.fv__ribbon { grid-area: ribbon; }
	.fv__title { grid-area: title; font-size: min(30px, 4.6vw); }
	.fv__brand { font-size: min(48px, 7.4vw); }
	.fv__lead { grid-area: lead; }
	.fv__devices { grid-area: dev; align-self: center; width: 100%; margin: 0; }
	.fv__btn { grid-area: btn; justify-self: center; margin-top: 8px; }
}

/* ==========================================================================
   440〜767px：使い方・Before／Afterは、左に画像・右にテキスト（悩みは縦並び）
   ========================================================================== */
@media (min-width: 440px) and (max-width: 767px) {
	.point { flex-direction: row; align-items: center; gap: 20px; }
	.point:nth-child(even) { flex-direction: row-reverse; }
	.point__media { flex-shrink: 0; width: 45%; }
	.point__img { height: 200px; }

	/* 悩みは縦並びのまま、傾けた写真を少し大きくする */
	.problem__frame { width: min(400px, calc(70cqi - 64px)); }
	.problem:nth-child(3) .problem__word--3 { --t: 150px; }

	.step { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 20px; }
	.step__body { padding-top: 0; }

	.ba__body,
	.ba__col--before .ba__body,
	.ba__col--after .ba__body { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 20px; }
	.ba__media { --ba-h: max(180px, .646 * (44.01vw - 17.7px)); } /* 枠の幅（画面幅の約44%）×0.646 */
}

/* 導入の流れのイラストの配置（JSが、横並び・縦並びのうちイラストを大きくできるほうを選ぶ）
   縦並び：番号と見出しを1行目、イラストを下の右寄せ */
.flow__list[data-layout="stack"] .flow__item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	align-content: center;
	column-gap: 14px;
	row-gap: 4px;
}
.flow__list[data-layout="stack"] .flow__img { grid-column: 1 / -1; justify-self: end; }
/* JSで計算したイラストの幅（未計算のときはCSSの計算式） */
.flow__list[data-layout] .flow__img { width: var(--img-w); }

/* ==========================================================================
   600px以上：フッターの端末画像はロゴと同じ行に置き、端末の下端をロゴの下端にそろえる
   ・画像の上下には透明な余白がある（端末が写っているのは高さの8.8%〜91.7%）
   ・上のセクションにかかるのは、端末の高さの18%まで
   ========================================================================== */
@media (min-width: 600px) {
	.footer__inner {
		--dev-w: 36cqw;                            /* 端末画像の幅（フッターの幅に対する割合） */
		--dev-h: calc(var(--dev-w) * 231 / 510);   /* 端末画像の高さ */
		--dev-y: -23.7%;                           /* 上へずらす量：透明な余白8.8%＋端末の高さの18% */
		--logo-h: calc(195px * 82.29 / 800);       /* ロゴの高さ */
		/* ロゴの下端＝端末の下端（フッターの上端から 画像の高さ×(91.7%−23.7%)） */
		padding-top: calc(var(--dev-h) * .68 - var(--logo-h));
	}
	.footer__devices { translate: 0 var(--dev-y); }
}
@media (min-width: 600px) and (max-width: 767px) {
	.footer__inner { --dev-w: 62cqw; --logo-h: calc(176px * 82.29 / 800); }
}
/* 768〜1279px：端末画像は幅60%で右へ20%ずらす（右にはみ出した分はフッターで切る） */
@media (min-width: 768px) and (max-width: 1279px) {
	.footer__inner { --dev-w: 60cqw; }
	.footer__devices { width: 60%; translate: 20% var(--dev-y); }
}

/* ==========================================================================
   600〜1023px：料金は2列（左：見出し・初期費用0円・説明文／右：料金表）
   ========================================================================== */
@media (min-width: 600px) and (max-width: 1023px) {
	.price { flex-direction: row; align-items: center; gap: clamp(24px, 4vw, 40px); }
	.price__main { flex: 1 1 0; min-width: 0; }
	.price__side { flex: 1.1 1 0; width: auto; max-width: none; min-width: 0; }
	.price__table th,
	.price__table td { padding: 12px clamp(12px, 2vw, 20px); }
	.price__table thead th { font-size: 14px; }
	.price__table tbody th { font-size: 16px; }
	.price__table td { font-size: clamp(24px, 3.2vw, 28px); }
	.price__note { text-align: left; }
}

/* ==================== ▼フォームのCSSここから ====================
   本番ではフォームをDrupal（Webform）で作り、iframeで埋め込む予定。
   iframeの中にはこのCSSは効かないため、ここから「▲フォームのCSSここまで」までを
   Drupalのテーマに移し、Drupalが出力するクラス名に合わせて当て直す（色などの変数 var(--…) は、:root の値に置き換える）。
   送信ボタンは共通パーツの .btn／.btn--lg、数字の書体は .num の指定も使っているので、あわせて移す。
   ========================================================== */

.form__iframe { display: block; width: 1px; min-width: 100%; border: 0; }


/* ==========================================================================
   お申し込み・お問い合わせ（フォーム2種をタブで切り替え）
   ・JavaScriptが動かない環境では、タブを出さずに2つのフォームを縦に並べる
   ・下の余白は、フッターの端末画像がかかる分（約50px）より広くとる
   ========================================================================== */
.entry {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 120px var(--pad-wide);
	background: #F2F5FC;
}
.entry > * { width: min(800px, 100%); }
.entry__head { display: flex; flex-direction: column; gap: 14px; }
.entry__lead { font-size: 16px; }
.entry__tabs { display: none; }
.js .entry__tabs { display: flex; gap: 4px; margin-bottom: -32px; }
.entry__tab {
	flex: 1;
	min-height: 56px;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px 8px 0 0;
	background: #DDE4F5;
	color: var(--sub);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}
.entry__tab[aria-selected="true"] { background: #fff; color: var(--blue-deep); box-shadow: inset 0 4px 0 var(--blue); }
.entry__tab:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.entry__panel { padding: 40px 48px 48px; border-radius: 8px; background: #fff; }
.js .entry__panel { border-radius: 0 0 8px 8px; }
.entry__panel[hidden] { display: none; }

.form { display: flex; flex-direction: column; gap: 24px; }
.form__title { font-size: 22px; font-weight: 700; line-height: 1.5; }
.form__lead { margin-top: -12px; color: var(--sub); font-size: 14px; }
.form__lead .form__req { margin: 0 2px 0 0; }
.form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form__label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 必須は赤ピンクの「＊」（白背景とのコントラスト比4.6）、任意はグレーの「（任意）」 */
.form__req { margin-left: -6px; color: #D6336C; font-size: 14px; font-weight: 700; } /* 注記「＊は必須項目です。」の＊と同じ大きさ */
.form__opt { margin-left: -6px; color: var(--sub); font-size: 14px; font-weight: 500; }
.form__hint { color: var(--sub); font-size: 14px; font-weight: 500; }
.form__input {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid #C9D2EA;
	border-radius: 6px;
	background: #fff;
	color: var(--navy);
	font: inherit;
	font-size: 16px; /* 16px未満だとiPhoneで入力時に画面が拡大されるため */
}
.form__input:focus-visible { border-color: var(--blue); outline: 3px solid rgba(63, 105, 252, .35); outline-offset: 0; }
.form__textarea { min-height: 140px; resize: vertical; }
.form__select { cursor: pointer; }
.form__section { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 700; }
.form__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.form__choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.form__choice input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.form__other { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; grid-column: 1 / -1; }
.form__input--other { flex: 1; min-width: 200px; min-height: 44px; padding: 8px 12px; }
.form__agree { align-items: center; }
.form__agree a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.form__submit { align-self: center; width: min(400px, 100%); margin-top: 8px; border: 0; cursor: pointer; }
.form__note { color: var(--sub); font-size: 14px; text-align: center; }

/* 入力エラー：触ったあと（または送信しようとしたとき）だけ表示する */
.form__error { display: none; gap: 4px; color: #C5221F; font-size: 14px; font-weight: 700; }
.form__input:user-invalid { border-color: #D93025; background: #FCE8E6; }
.form__field:has(:user-invalid) .form__error { display: flex; }

/* SP（767px以下）のフォーム */
@media (max-width: 767px) {
	.entry { gap: 24px; padding: 64px 20px 80px; }
	.entry__lead { font-size: 15px; }
	.js .entry__tabs { margin-bottom: -24px; }
	.entry__tab { min-height: 52px; padding: 10px 8px; font-size: 14px; }
	.entry__panel { padding: 24px 20px 32px; }
	.form { gap: 20px; }
	.form__title { font-size: 18px; }
	.form__label { font-size: 15px; }
	.form__section { font-size: 16px; }
	.form__choices { grid-template-columns: 1fr; }
	.form__choice { font-size: 15px; }
	.form__input--other { min-width: 0; flex-basis: 100%; }
}
/* ==================== ▲フォームのCSSここまで ==================== */

/* SP：画面の右下に固定するCTA「試してみる」（ファーストビューを過ぎたら表示、最後のCTA・フォーム・フッターが見えている間とメニューを開いている間は隠す）
   大きさは基準の大きさ（--s: 1。ボタンの高さ36px・文字13px）。PCは1.5倍（下の「追従ボタン（PC）」） */
.sticky-cta { display: none; }

@media (max-width: 767px) {
	.last-cta__btns { align-self: stretch; }
	.last-cta__sub { width: 100%; padding: 12px 0; font-size: 16px; }

	.sticky-cta {
		--s: 1;
		position: fixed;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 40;
		display: flex;
		min-height: calc(36px * var(--s));
		padding: calc(8px * var(--s)) calc(18px * var(--s));
		font-size: calc(13px * var(--s));
		box-shadow: 0 6px 16px rgba(11, 20, 64, .3);
		visibility: hidden;
		translate: 0 calc(100% + 24px + env(safe-area-inset-bottom, 0px));
		transition: translate .3s ease .4s, visibility 0s linear .7s, background-color .2s; /* 消えるときは吹き出し→キャラが消えてから（0.4秒後）ボタンが消える */
	}
	.sticky-cta.is-shown { visibility: visible; translate: 0 0; transition: translate .3s ease, visibility 0s, background-color .2s; }
	html.is-menu-open .sticky-cta { visibility: hidden; translate: 0 calc(100% + 24px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   送信完了ページ
   ========================================================================== */
/* 画面全体に写真を透かしで敷く（スクロールしても動かない） */
.thanks-page { background: #F2F5FC; }
.thanks-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(rgba(242, 245, 252, .62), rgba(242, 245, 252, .62)),
		url("../img/g4.webp") center / cover no-repeat;
}
/* 横長画面（768px以上）：写真を大きく表示して左端にそろえ、タブレットが中央の枠の右側に見えるようにする（枠との重なりを減らす） */
@media (min-width: 768px) and (orientation: landscape) {
	.thanks-page::before { background-position: 0 0, 0% 40%; background-size: auto, auto 160%; }
}
/* 767px以下・縦長画面：写真を下寄せにしてタブレットを枠の下側に見せ、写真の上端は背景色へなじませる */
@media (max-width: 767px), (orientation: portrait) {
	.thanks-page::before {
		background:
			linear-gradient(#F2F5FC 28%, rgba(242, 245, 252, 0) 48%),
			linear-gradient(rgba(242, 245, 252, .62), rgba(242, 245, 252, .62)),
			url("../img/g4.webp") 62% 100% / auto 72% no-repeat;
	}
}
.thanks-header { position: static; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(213, 218, 232, .8); }
.thanks-header .header__logo { color: var(--blue); }
.thanks { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-h) - 36px); padding: 80px 20px; }
/* 中央の枠はすりガラス（後ろの写真がぼけて透ける） */
.thanks__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: min(560px, 100%);
	padding: 36px 32px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 16px;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	box-shadow: 0 24px 60px rgba(15, 27, 77, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
	text-align: center;
}
.thanks__mark { width: 32px; height: 42px; fill: var(--blue); }
.thanks__btn { margin-top: 4px; padding-inline: 32px; }
.thanks__title { font-size: clamp(24px, 2.5vw, 32px); font-weight: 700; line-height: 1.4; }
.thanks__text { font-size: 16px; line-height: 1.9; }
@media (max-width: 767px) {
	.thanks { padding: 48px 20px; }
	.thanks__inner { padding: 28px 20px; }
	.thanks__text { font-size: 15px; }
}

/* ==========================================================================
   追加の動き（10/14）
   動きを減らす設定（prefers-reduced-motion: reduce）の端末では、どれも動かさず最初から完成状態
   ========================================================================== */

/* ---- ボタン：マウスを乗せると少し浮き、押した瞬間に沈む（追従ボタンは出し入れの動きと重なるため対象外） ---- */
@media (prefers-reduced-motion: no-preference) {
	.btn:not(.sticky-cta) { transition: background-color .2s, translate .2s, box-shadow .2s; } /* 追従ボタンの動きは「追従ボタン」の指定で決める */
	@media (hover: hover) {
		.btn:not(.sticky-cta):hover { translate: 0 -2px; box-shadow: 0 6px 16px rgba(15, 27, 77, .25); }
	}
	.btn:not(.sticky-cta):active { translate: 0 1px; box-shadow: none; transition-duration: .05s; }
}

/* ---- 黄色いCTAボタン：画面に入っている間、3秒ごとに「キラン」と目立たせる（JSで .is-shining を付ける。マウスを乗せなくても動くので、スマホでも同じ）
   ・白く強い斜めの光が左から右へ横切る（0.6秒）
   ・同時に、ボタンのまわりに白い光の輪が広がって消える（キーボード操作で選んでいる間は、選択中の枠を優先して輪は出さない）
   ・右下の追従ボタン「試してみる」も、表示されている間は同じ光を横切らせる（光の輪は付けない） ---- */
.fv__btn,
.mid-cta__btn,
.last-cta__btn { position: relative; isolation: isolate; overflow: hidden; }
.sticky-cta { isolation: isolate; overflow: hidden; } /* 追従ボタンは位置を固定したまま、光をボタンの中だけに見せる */
@media (prefers-reduced-motion: no-preference) {
	.fv__btn::after,
	.mid-cta__btn::after,
	.last-cta__btn::after,
	.sticky-cta::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		z-index: -1;
		width: 50%;
		background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, .9) 55%, transparent 90%);
		translate: -120% 0;
		pointer-events: none;
	}
	.is-shining::after { animation: btn-shine 3s ease-in-out .6s infinite; }
	.is-shining:not(.sticky-cta):not(:focus-visible) { outline: 3px solid transparent; animation: btn-ring 3s ease-out .6s infinite; }
	.fv__btn.is-shining:not(:focus-visible) { animation: fv-in .5s ease-out .58s backwards, btn-ring 3s ease-out .6s infinite; } /* ファーストビューの登場の動きと一緒に指定 */
}
@keyframes btn-shine {
	0% { translate: -120% 0; }
	20%, 100% { translate: 220% 0; }
}
@keyframes btn-ring {
	0% { outline-color: rgba(255, 255, 255, .95); outline-offset: 0; }
	35%, 100% { outline-color: rgba(255, 255, 255, 0); outline-offset: 14px; }
}

/* ---- 追従ボタン（PC）：ファーストビューを過ぎたら右下に出す（隠す条件はSPと同じ。JSは initStickyCta）。文言は「試してみる」
   大きさは --s 倍（PCは1.5倍。基準の大きさはボタンの高さ36px・文字13px） ---- */
@media (min-width: 768px) {
	.sticky-cta {
		--s: 1.5;
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 40;
		display: flex;
		min-height: calc(36px * var(--s));
		padding: calc(8px * var(--s)) calc(18px * var(--s));
		font-size: calc(13px * var(--s));
		box-shadow: 0 6px 16px rgba(11, 20, 64, .3);
		visibility: hidden;
		translate: 0 calc(100% + 24px);
		transition: translate .3s ease .4s, visibility 0s linear .7s, background-color .2s; /* 消えるときは吹き出し→キャラが消えてから（0.4秒後）ボタンが消える */
	}
	.sticky-cta.is-shown { visibility: visible; translate: 0 0; transition: translate .3s ease, visibility 0s, background-color .2s; }
}
@media (prefers-reduced-motion: reduce) { /* SP・PC共通（PCの指定より後ろに置いて上書きする） */
	.sticky-cta,
	.sticky-cta.is-shown { transition: none; }
}

/* ---- 見出し（h2）：帯の中を下からくぐるように出す（JSで中身を .mask-title__in に入れる） ---- */
@media (prefers-reduced-motion: no-preference) {
	.mask-title { clip-path: inset(-.6em -.6em 0 -.6em); } /* 下だけ切り、上のルビ・左右ははみ出しても見せる */
	.mask-title.is-done { clip-path: none; }
	.mask-title__in {
		display: block;
		translate: 0 105%;
		transition: translate .6s cubic-bezier(.2, .8, .2, 1);
	}
	/* 横並び（flex）の見出しは、並べ方をそのまま中の枠に引き継ぐ（JSで .mask-title--flex を付ける） */
	.mask-title--flex > .mask-title__in {
		display: inherit;
		flex: 1 1 100%;
		flex-direction: inherit;
		flex-wrap: inherit;
		align-items: inherit;
		justify-content: inherit;
		gap: inherit;
	}
	.mask-title.is-shown > .mask-title__in { translate: 0 0; }
	/* 見出しの中の黄色いマーカーは、見出しが出終わってから引く */
	.js .mask-title:not(.is-shown) .mk { background-size: 0 100%; }
	.js .mask-title .mk { transition-delay: 1.1s; } /* 10/16に0.7秒→1.1秒へ遅らせた */
}

/* ---- ファーストビュー：読み込み直後に、リボン→小見出し→見出し→本文→ボタン→デバイス画像→料金のまとめ の順に出す（1回だけ） ---- */
@media (prefers-reduced-motion: no-preference) {
	.fv__ribbon,
	.fv__eyebrow,
	.fv__title,
	.fv__lead,
	.fv__btn,
	.fv__devices,
	.stats { animation: fv-in .5s ease-out backwards; } /* backwards：出し終わったら外れ、ボタンの浮く動きなどとぶつからない */
	.fv__ribbon { animation-delay: .1s; }
	.fv__eyebrow { animation-delay: .22s; }
	.fv__title { animation-delay: .34s; }
	.fv__lead { animation-delay: .46s; }
	.fv__btn { animation-delay: .58s; }
	.fv__devices { animation-delay: .7s; }
	.stats { animation-delay: .82s; }
	/* 奥行き（JSで .is-parallax を付け、写真を下端を基準に拡大・デバイス画像を上へ） */
	.fv.is-parallax .fv__photo { transform-origin: 50% 100%; }
}
@keyframes fv-in {
	from { opacity: 0; translate: 0 12px; }
	to { opacity: 1; translate: 0 0; }
}
/* ※ .stats は SP で translate を使って位置を決めているため、SPでは透明度だけで出す */
@media (max-width: 767px) {
	.stats { animation-name: fv-fade; }
}
@keyframes fv-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---- カード（特長・使い方・活用事例・お客様の声）：同時に画面に入ったものを0.1秒ずつずらして出す（JSで遅れを付ける） ---- */
@media (prefers-reduced-motion: no-preference) {
	.js .js-reveal.js-stagger { translate: 0 24px; }
	.js .js-reveal.js-stagger.is-in { translate: 0 0; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.js .js-reveal.js-stagger { translate: 0 12px; }
}

/* ---- 使い方：カードが出たあと、「1 作る」「2 読む」「3 共有」（番号と文字）を1→2→3の順に「ポンっ」と弾ませる（画面に入ったら1回だけ）
   ・カードが出始めて0.6秒後から、同時に画面に入ったカードは0.5秒ずつずらす（--n はJSで付ける何枚目かの番号）
   ・行の左端（番号の四角）を起点に膨らませる ---- */
@media (prefers-reduced-motion: no-preference) {
	.js .step.is-in .step__label { transform-origin: left center; animation: step-pop .5s ease-out calc(.6s + var(--n, 0) * .5s) both; }
}
@keyframes step-pop {
	0% { opacity: 0; scale: 0; }
	55% { opacity: 1; scale: 1.2; }
	80% { scale: .95; }
	100% { opacity: 1; scale: 1; }
}

/* ---- Before→After（JSで .is-ba-ready → 画面に入ったら .is-ba-on） ---- */
@media (prefers-reduced-motion: no-preference) {
	.ba__cols.is-ba-ready .ba__col--before .ba__img { filter: saturate(.4) brightness(.95); }
	.ba__cols.is-ba-ready .ba__col--after .ba__img { filter: grayscale(1); transition: filter .8s ease 1s; }
	.ba__cols.is-ba-on .ba__col--after .ba__img { filter: none; }
	.ba__cols.is-ba-ready .ba__col--after .ba__list li { opacity: 0; translate: 0 8px; transition: opacity .4s ease-out, translate .4s ease-out; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li { opacity: 1; translate: 0 0; }
	.ba__cols.is-ba-ready .ba__col--after .ba__icon path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s ease-out; }
	.ba__cols.is-ba-on .ba__col--after .ba__icon path { stroke-dashoffset: 0; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(1) { transition-delay: 1.6s; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(2) { transition-delay: 1.75s; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(3) { transition-delay: 1.9s; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(4) { transition-delay: 2.05s; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(1) path { transition-delay: 1.75s; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(2) path { transition-delay: 1.9s; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(3) path { transition-delay: 2.05s; }
	.ba__cols.is-ba-on .ba__col--after .ba__list li:nth-child(4) path { transition-delay: 2.2s; }
}

/* ---- 料金：初期費用0円（JSで9→0と1つずつ数え、止まった瞬間に .is-bounced で弾ませる。数え始めるまで数字は隠しておく） ---- */
.price__zero .num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
	.price__zero .num { display: inline-block; }
	.price__zero.is-count-ready:not(.is-counting) .num { opacity: 0; }
	.price__zero.is-bounced .num { animation: zero-bounce .3s ease-out; }
}
@keyframes zero-bounce {
	from { scale: 1.15; }
	to { scale: 1; }
}

/* ---- 流れる文字の帯（料金とお客様の声の間）：青い帯に白文字 ---- */
.marquee {
	overflow: hidden;
	padding: 14px 0;
	background: var(--blue);
	color: #fff;
}
.marquee__track { display: flex; width: max-content; }
.marquee__set {
	flex-shrink: 0;
	padding-right: .5em;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: .02em;
	line-height: 1.2;
	white-space: nowrap;
}
.marquee__sep { margin: 0 .5em; }
@media (prefers-reduced-motion: no-preference) {
	.marquee__track.is-running { animation: marquee var(--marquee-dur, 30s) linear infinite; }
}
@keyframes marquee {
	from { translate: 0 0; }
	to { translate: var(--marquee-shift, -50%) 0; }
}
@media (max-width: 767px) {
	.marquee { padding: 8px 0; }
	.marquee__set { font-size: 16px; }
}
/* 文言（「／」で区切った1つ分）が画面の左右中央に来たら、真上にポンっと持ち上がって（1.05倍）一瞬黄色に変わり、ストンと着地すると同時に元に戻る（JSで .is-pop を付ける）。
   見た目だけ動かすので、前後の文字の位置は動かない。持ち上がる高さ（文字の0.3倍）は帯の上の余白の中に収まる */
.marquee__pop { display: inline-block; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
	.marquee__pop.is-pop { animation: marquee-pop .6s; }
}
@keyframes marquee-pop {
	0% { translate: 0 0; scale: 1; color: #fff; animation-timing-function: cubic-bezier(.33, 1, .68, 1); } /* 上がり：頂点に向けて減速 */
	45% { translate: 0 -.3em; scale: 1.05; color: var(--yellow); animation-timing-function: cubic-bezier(.32, 0, .67, 0); } /* 下り：加速しながら落ちる */
	100% { translate: 0 0; scale: 1; color: #fff; } /* 着地の瞬間に大きさと色も元どおり */
}

/* ---- 導入の流れ：線の長さをスクロール量に合わせる（JSで .is-scrub と --l1・--l2 を付ける） ---- */
@media (prefers-reduced-motion: no-preference) {
	.flow__list.is-scrub::before,
	.flow__list.is-scrub.is-in::before { scale: 1 var(--l1, 0); transition: none; }
	.flow__list.is-scrub::after,
	.flow__list.is-scrub.is-in::after { scale: 1 var(--l2, 0); transition: none; }
	.flow__list.is-scrub .flow__no.is-hit { animation: flow-hit .4s ease-out; }
}
@keyframes flow-hit {
	from { scale: 1.1; }
	to { scale: 1; }
}

/* ---- Before/Afterの写真に添えるアイコン ----
   写真は枠の中央に合わせて拡大・切り抜き表示されるため、写真が実際に表示される幅（--ba-d）を基準に、
   枠の中央からの距離と大きさを比率で指定する。画面幅や枠の縦横比が変わっても、人物の頭などの位置からずれない
   （--x・--y・--w は、デザインカンプ上の写真の表示幅に対する比率）
   枠が縦長に近づいて写真の左右が切れる画面幅では、アイコンが枠から大きく外れないよう左右の位置を枠の内側（--ba-edge）までに収める */
.ba__media { container-type: inline-size; --ba-d: max(100cqw, var(--ba-h) * 640 / 425); }
.ba__deco { --ba-s: var(--ba-d); position: absolute; z-index: 1; left: clamp(var(--ba-edge, -2%), 50% + var(--x) * var(--ba-d) + var(--w) * (var(--ba-d) - var(--ba-s)) / 2, 100% - var(--w) * var(--ba-s) - var(--ba-edge, -2%)); top: max(var(--ba-top, -100vh), 50% + var(--y) * var(--ba-d) + var(--w) * var(--ar, 1) * (var(--ba-d) - var(--ba-s)) / 2); width: calc(var(--w) * var(--ba-s)); max-width: none; height: auto; pointer-events: none; }
/* 写真の主役を邪魔しないよう、アイコンは少し薄く（透明度70%）、一回り小さく（中心の位置はそのままで85%）表示する */
.ba__deco { opacity: .7; scale: .85; }
.ba__deco--puff { transform: scaleX(-1); }
.ba__deco--bulb { transform: rotate(-40deg); }
.ba__deco--rad { transform: rotate(-15deg) scaleX(-1); }
.ba__deco--puff { --x: -.4444; --y: -.3274; --w: .0833; --ar: 1.0544; }
.ba__deco--swirl { --x: .3651; --y: -.3214; --w: .0933; --ar: 1.0932; }
/* Beforeの枠が正方形に近づき写真の左右が大きく切れる画面幅（タブレット付近）では、アイコンが枠に対して大きく見えすぎるため、
   大きさの基準を「枠の幅の1.15倍」までに抑える（中心の位置は変えずに約8割まで小さくなる。PC・スマホでは変化なし） */
.ba__col--before .ba__deco { --ba-s: min(var(--ba-d), 115cqw); }
.ba__clip .ba__deco { --ba-edge: 2%; --ba-top: 4px; } /* 写真の中に置くアイコンは、写真の外に切れないように（写真の上下が大きく切れるスマホで、上端からはみ出さない） */
.ba__deco--sp1 { --x: .0219; --y: -.0018; --w: .0620; }
.ba__deco--sp2 { --x: -.0347; --y: .0967; --w: .0474; }
.ba__deco--bulb { --x: -.3723; --y: -.2774; --w: .0876; }
.ba__deco--rad { --x: -.0310; --y: -.2847; --w: .0620; }
/* 画面に入ったら「ぴょこん」と順に登場（Beforeは写真が出てすぐ、Afterは写真に色が付くのに合わせて） */
@media (prefers-reduced-motion: no-preference) {
	.ba__cols.is-ba-ready .ba__deco { opacity: 0; scale: 0; }
	.ba__cols.is-ba-on .ba__body.is-in .ba__deco { animation: ba-deco-pop .55s ease-out var(--d, 0s) both; }
	.ba__deco--puff { --d: .35s; }
	.ba__deco--swirl { --d: .5s; }
	.ba__deco--bulb { --d: 1.15s; }
	.ba__deco--rad { --d: 1.3s; }
	.ba__deco--sp1 { --d: 1.45s; }
	.ba__deco--sp2 { --d: 1.6s; }
}
@keyframes ba-deco-pop { /* 最後は透明度70%・大きさ85%で止める（途中の弾みもこの大きさが基準：1.2倍→0.92倍→1倍） */
	0% { opacity: 0; scale: 0; }
	55% { opacity: .7; scale: 1.02; }
	80% { scale: .782; }
	100% { opacity: .7; scale: .85; }
}

/* ---- 中間CTAのタブレット画像と、右上に置くキラキラ ----
   位置と大きさは画像の大きさに対する比率で指定し、画面幅が変わっても画像と一緒に拡大縮小する。
   画面に入ったら、セクションの下の境目より下（見えない位置）に隠れていたタブレット画像が、今の位置まで「にょっ」とせり上がり
   （0.9秒、動き出しと止まり際をゆっくり）、上がり終わってから、キラキラが回転しながら「キラン」と登場
   （JSで .is-twinkle-ready → 画面に入ったら .is-twinkle。セクションは overflow: hidden なので、下にいる間は見えない） */
.mid-cta__deco { position: relative; }
.mid-cta__img { display: block; width: 100%; height: auto; }
.mid-cta__spark { position: absolute; max-width: none; height: auto; pointer-events: none; }
.mid-cta__spark--1 { left: 77.08%; top: -7.77%; width: 7.87%; }
.mid-cta__spark--2 { left: 85.42%; top: 3.89%; width: 6.02%; }
/* スマホではキラキラを1.3倍に（中心の位置はそのまま） */
@media (max-width: 767px) {
	.mid-cta__spark--1 { left: 75.90%; top: -9.71%; width: 10.23%; }
	.mid-cta__spark--2 { left: 84.52%; top: 2.41%; width: 7.83%; }
}
@media (prefers-reduced-motion: no-preference) {
	.mid-cta__deco.is-twinkle-ready .mid-cta__img { translate: 0 calc(100% + 24px); } /* 画像の高さ＋余裕24pxぶん下＝セクションの外 */
	.mid-cta__deco.is-twinkle .mid-cta__img { translate: 0 0; transition: translate .9s cubic-bezier(.65, 0, .35, 1); }
	.mid-cta__deco.is-twinkle-ready .mid-cta__spark { opacity: 0; scale: 0; }
	.mid-cta__deco.is-twinkle .mid-cta__spark { animation: spark-in .7s ease-out both; }
	.mid-cta__deco.is-twinkle .mid-cta__spark--1 { animation-delay: .9s; } /* タブレット画像が上がり終わってから */
	.mid-cta__deco.is-twinkle .mid-cta__spark--2 { animation-delay: 1.1s; }
}
@keyframes spark-in {
	0% { opacity: 0; scale: 0; rotate: -120deg; filter: brightness(1); }
	55% { opacity: 1; scale: 1.3; rotate: 15deg; filter: brightness(1.4); }
	80% { scale: .9; rotate: -5deg; }
	100% { opacity: 1; scale: 1; rotate: 0deg; filter: brightness(1); }
}

/* ---- お客様の声：キーワードに青い下線（見出しは3px、本文は2px） ----
   ・見出しの下線：声のカードが画面に入ったら左から右へ引く（4枚を少しずつずらす）
   ・本文の下線：「続きを読む」で開いたときに引く（開くボタンがなく全文が見えている場合は、カードが画面に入ったときに引く）
   ・折り返して行をまたいでも、行ごとに下線を付けて同時に伸ばす
   ・動きを減らす設定の端末とJSが動かない環境では、最初から引いた状態 */
.ul-hand {
	--ul-h: 2px;
	background: linear-gradient(var(--blue), var(--blue)) no-repeat 0 100% / 100% var(--ul-h);
	padding-bottom: .1em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.ul-hand--title { --ul-h: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.js .ul-hand { background-size: 0 var(--ul-h); }
	.js .voice.is-in .ul-hand--title { background-size: 100% var(--ul-h); transition: background-size .7s cubic-bezier(.6, .1, .3, 1) 1.1s; } /* 見出しを読み始めてから引く（10/16に0.5秒→1.1秒へ遅らせた） */
	.js .voice.is-in:nth-child(2) .ul-hand--title { transition-delay: 1.25s; }
	.js .voice.is-in:nth-child(3) .ul-hand--title { transition-delay: 1.4s; }
	.js .voice.is-in:nth-child(4) .ul-hand--title { transition-delay: 1.55s; }
	.js .voice.is-open .ul-hand--body { background-size: 100% var(--ul-h); transition: background-size .7s cubic-bezier(.6, .1, .3, 1); } /* 「続きを読む」で開いたら、すぐに引く */
	.js .voice.is-in:has(.voice__more[hidden]) .ul-hand--body { background-size: 100% var(--ul-h); transition: background-size .7s cubic-bezier(.6, .1, .3, 1) 1.1s; } /* 開くボタンがなく最初から全文が見えているときは、見出しと同じく読み始めてから引く */
}

/* ---- 追従ボタン（PC・SP）のキャラクター：ボタンの後ろから右寄りにぴょこっと顔を出す ----
   ・見ている場所で3段階に入れ替わる（JSで .is-active を付け替え）：ページ上部〜ビフォーアフター（職場を変える）の手前＝194、ビフォーアフター〜料金＝199、お客様の声〜最後＝3079（HTMLの並び順がこの順番）
   ・入れ替わりは、今のキャラがボタンの後ろへ引っ込んでから、次のキャラが弾むように出る。上へ戻ると逆順に戻る
   ・ボタンが隠れている間（ファーストビュー・最後のCTA・フォーム・フッターが見えている間）はキャラも隠す
   ・キャラの下の部分はボタンの後ろに隠れる（枠の下端をボタンの上端より12px×倍率だけ下にして切り抜く）
   ・大きさはボタンと同じ倍率（SPは1倍、PCは1.5倍。以下の数値は1倍のときの大きさ）
   ・キャラが出たあとに、左上に吹き出しをポンっと出す（194「1ヶ月／無料です」、199「大活躍／しています」、3079「すぐご用意／できます」の2行。文字は本文と同じ書体・12px×倍率） */
@media (max-width: 767px) {
	.sticky-pal { --s: 1; --cta-r: 12px; --cta-b: calc(12px + env(safe-area-inset-bottom, 0px)); } /* ボタンの位置（右・下）と大きさの倍率 */
	html.is-menu-open .sticky-pal { visibility: hidden; }
}
@media (min-width: 768px) {
	.sticky-pal { --s: 1.5; --cta-r: 24px; --cta-b: 24px; }
}
.sticky-pal {
	position: fixed;
	right: calc(var(--cta-r) + 8px * var(--s));
	bottom: calc(var(--cta-b) + 24px * var(--s)); /* ボタンの下の位置＋ボタンの高さ36−ボタンの後ろに隠す12 */
	z-index: 39; /* ボタン（40）の後ろ */
	display: block;
	width: calc(96px * var(--s));
	height: calc(88px * var(--s)); /* 「ぴょこっ」で少し行き過ぎても頭が切れないよう、上に余裕を持たせる */
	pointer-events: none;
}
.sticky-pal__clip { position: absolute; inset: 0; overflow: hidden; }
.sticky-pal__char { position: absolute; right: 0; bottom: calc(8px * var(--s)); width: auto; max-width: none; height: calc(64px * var(--s)); translate: 0 125%; } /* 胸の下あたりまで見せる（下の4pxだけボタンの後ろ） */
.sticky-pal__char--1,
.sticky-pal__char--3 { transform: scaleX(-1); } /* 194・199は左右反転（手のひらをボタン側へ向ける） */
.sticky-pal.is-shown .sticky-pal__char.is-active { translate: 0 0; }
/* 吹き出し：キャラの左上（頭の横）に出す、2行の丸い吹き出し（直径76px）。しっぽは右下（キャラの口元）へ向ける
   丸としっぽは1本の線でつながった形（背景のSVG）で描く */
.sticky-pal__bubble {
	position: absolute;
	bottom: calc(38px * var(--s));
	display: grid;
	place-items: center;
	width: calc(76px * var(--s));
	height: calc(76px * var(--s));
	margin: 0;
	color: var(--navy);
	font-size: calc(12px * var(--s));
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	transform-origin: 85% 90%;
	scale: 0;
	opacity: 0;
}
.sticky-pal__bubble::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76'%3E%3Cpath d='M66.33 62.76L69.44 69.44L62.76 66.33A37.62 37.62 0 1 1 66.33 62.76Z' fill='%23fff' stroke='%230F1B4D' stroke-width='.75' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.sticky-pal__bubble--1 { right: calc(37px * var(--s)); } /* 吹き出しの右端をキャラの頭の左端に合わせる（カンプで調整した位置） */
.sticky-pal__bubble--2 { right: calc(33px * var(--s)); }
.sticky-pal__bubble--3 { right: calc(36px * var(--s)); }
.sticky-pal.is-shown .sticky-pal__bubble.is-active { scale: 1; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.sticky-pal__char { transition: translate .25s ease-in; } /* 引っ込む */
	.sticky-pal:not(.is-shown) .sticky-pal__char { transition: translate .25s ease-in .15s; } /* ボタンごと消えるときは、吹き出しが消えてから引っ込む（吹き出し→キャラ→ボタンの順） */
	.sticky-pal.is-shown .sticky-pal__char.is-active { transition: translate .45s cubic-bezier(.34, 1.56, .64, 1) .3s; } /* 引っ込み終わってから、少し行き過ぎて戻る「ぴょこっ」 */
	.sticky-pal__bubble { transition: scale .15s ease-in, opacity .15s ease-in; } /* 吹き出しはキャラより先にすぐ消す */
	.sticky-pal.is-shown .sticky-pal__bubble.is-active { transition: scale .35s cubic-bezier(.34, 1.56, .64, 1) .7s, opacity .1s linear .7s; } /* キャラが出たあとに「ポンっ」と出す */
}