/*
 * シフトリンク — あとから足した見た目の調整
 *
 * styles.css は納品物のまま（@font-face だけ外してある）。寸法の考え方を
 * 次に揃え直すため、ここで上書きしている。
 *
 *   PC        1280px以上。1920px表示が基準。中身は最大1280pxで中央寄せし、
 *             左右は背景だけが伸びる
 *   タブレット 768〜1279px。PCの並びのまま縮める
 *   スマホ     767px以下。1カラム・縦積み・ボタンは横幅いっぱい
 *
 * 文字は PC 見出し40〜56px・本文16〜18px、スマホ 見出し26〜32px・本文16px。
 * 原画の文字の比率は機械的に換算していない。
 *
 * **納品物の媒体クエリ（1001px / 1200px / 1600px / 768〜1000px / 374px）は
 * 生きている。** ここは styles.css よりあとに読まれるので、同じ強さの
 * セレクタで書けば媒体クエリの中の指定にも勝つ。納品物のどこかを
 * 打ち消し忘れると、その幅でだけ小さい文字が残るので注意。
 */


/* ==========================================================================
   色と書体
   ========================================================================== */

:root {
	--content: 1280px;
	--hero: 1280px;
	--gutter: 48px;

	/* 納品時の #63748e は、淡い背景の上で 4.5:1 を割る（4.22〜4.44:1） */
	--muted: #56677f;

	/* 白地に置く強調の文字。納品時の #00bca6 は白地で 2.4:1 しかなく、
	   大きな文字の基準（3:1）にも届かない。図形・線のミントは元のまま */
	--accent-text: #009a86;

	/* 白文字を載せるボタン。#00846f で 4.64:1 */
	--button: #00846f;
	--button-deep: #007a68;
}

/* 納品物は同梱フォントに Noto という名前を付けていた。
   Google Fonts から読む Noto Sans JP へ付け替える */
body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 17px;
}

/* 納品物の素材シート（people.png / interiors.png）と背景PNGは使わない。
   上書きしておけば、ブラウザは元の画像を取りに行かない（404を出さない） */
.hero {
	background-image: url(images/hero-bg-2176.webp);
}

.person,
.interior {
	background: none;
}


/* ==========================================================================
   PC（1280px以上）。タブレット・スマホは下でこれを縮める
   ========================================================================== */

.container {
	width: min(var(--content), calc(100% - var(--gutter) * 2));
}

section:not(.hero):not(.logos) {
	padding: 80px 0;
}

h2 {
	font-size: 40px;
}

.section-lead {
	font-size: 17px;
	margin: 12px 0 40px;
}

.caption {
	font-size: 13px;
}

/* ---- ヘッダー ---- */

.header-inner {
	width: min(var(--hero), calc(100% - var(--gutter) * 2));
	min-height: 88px;
	gap: 28px;
}

.brand {
	font-size: 27px;
}

.nav {
	gap: 28px;
	font-size: 15px;
}

.login,
.header-cta {
	padding: 11px 26px;
	font-size: 15px;
}

.header-cta {
	background: var(--button);
}

.menu {
	display: none;
}

/* ---- ファーストビュー ---- */

.hero-inner {
	width: min(var(--hero), calc(100% - var(--gutter) * 2));
	grid-template-columns: 44% 56%;
	min-height: 0;
	padding: 48px 0 56px;
}

.hero-copy {
	align-self: end;
	padding-top: 0;
}

.eyebrow {
	font-size: 20px;
}

/* 2行目「毎週3時間が5分に。」は折り返さない（nowrap）。左の列に
   収まる大きさを幅から決める。1280px で 52px、1920px で上限 54px */
.hero h1 {
	font-size: clamp(30px, 4.1vw, 54px);
	line-height: 1.25;
}

.hero h1 b {
	font-size: 1.3em;
}

.hero strong {
	color: var(--accent-text);
}

.intro {
	font-size: 17px;
	margin-top: 22px;
}

.hero-visual {
	margin: 0 -8px 0 16px;
}

.annotation {
	z-index: 2;
	right: 2%;
	top: -6px;
	font-size: 22px;
}

.hero-actions {
	margin-top: 0;
	padding-top: 28px;
}

.hero-actions .cta-pair {
	width: 420px;
	max-width: 100%;
	gap: 12px;
}

.hero-actions .caption {
	width: 420px;
	max-width: 100%;
}

/* ノートPCとスマホは別々の画像にしてある（スマホだけを右から入れるため）。
   重ねた位置は元の1枚絵（1663×946）の座標を割合にしたもの */
.sl-mock {
	position: relative;
}

.sl-mock .sl-mock__phone {
	position: absolute;
	left: 69.753%;
	top: 25.899%;
	width: 30.247%;
	height: auto;
}

/* カレンダーのセルを覆う板。演出の初期状態で使う（motion.css）。
   位置は元画像の表の本体（582,346）〜（1108,636）、列と行の幅は実測 */
.sl-cells {
	position: absolute;
	left: 34.997%;
	top: 36.575%;
	width: 31.630%;
	height: 30.655%;
	display: none;
	grid-template-columns: 71fr 73fr 74fr 76fr 76fr 79fr 77fr;
	grid-template-rows: 48fr 49fr 48fr 48fr 49fr 48fr;
	pointer-events: none;
}

.sl-cells i {
	margin: -1px;
	background: #f4f7fb;
}

/* ---- ボタン ---- */

.button {
	min-height: 64px;
	font-size: 18px;
}

.primary {
	background: linear-gradient(110deg, var(--button), var(--button-deep));
	box-shadow: 0 4px 13px #00846f33;
}

/* ---- 導入店舗 ---- */

.logos p {
	font-size: 14px;
}

.logo-row > span {
	font-size: 17px;
}

.logo-row svg {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- 悩み ---- */

.problem-grid,
.feature-grid {
	gap: 32px;
}

.problem {
	min-height: 210px;
	padding: 12px 20px 0;
}

.problem p {
	font-size: 17px;
}

.person {
	width: 150px;
	height: 190px;
	object-fit: cover;
	object-position: center;
}

/* ---- Before / After ---- */

.comparison {
	gap: 80px;
}

.compare-card {
	padding: 20px 20px 0;
}

.compare-card h3 {
	font-size: 30px;
}

.compare-card h3 small {
	font-size: 16px;
}

.after h3,
.after .time {
	color: var(--accent-text);
}

.compare-body .person {
	width: 200px;
	height: 230px;
}

.checks {
	font-size: 16px;
}

.time b {
	font-size: 68px;
}

/* 時間のバー。ここは最終の状態（5分）。スクロールで 3時間 から縮めるのは
   motion.js。動きを減らす設定と JavaScript が無い環境では、この姿のまま */
.sl-timebar {
	max-width: 880px;
	margin: 44px auto 0;
}

.sl-timebar__label {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	text-align: center;
}

.sl-timebar__row {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sl-timebar__track {
	flex: 1;
	height: 18px;
	border-radius: 9px;
	background: #e6edf3;
	overflow: hidden;
}

.sl-timebar__bar {
	position: relative;
	display: block;
	height: 100%;
	background: #8d9db3;
	transform-origin: left center;
	transform: scaleX(var(--sl-bar, 0.0278));
}

.sl-timebar__mint {
	position: absolute;
	inset: 0;
	background: var(--accent);
	opacity: var(--sl-mint, 1);
}

/* 文字数が変わってもバーの長さが動かないよう、幅を先に取っておく */
.sl-timebar__value {
	min-width: 6.2em;
	font: 800 28px/1.2 Manrope, "Noto Sans JP", sans-serif;
	color: var(--accent-text);
	font-variant-numeric: tabular-nums;
}

.sl-timebar.is-counting .sl-timebar__value {
	color: var(--navy);
}

/* ---- 3つの特徴・主な機能 ---- */

.big-three {
	color: var(--accent-text);
}

.feature {
	padding: 36px 32px;
}

.feature h3 {
	margin-top: 14px;
	font-size: 21px;
}

.feature p {
	font-size: 16px;
}

.sl-icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	color: var(--accent);
	overflow: visible;
}

.sl-draw__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.function-grid {
	gap: 24px;
}

.function-grid > div {
	min-height: 170px;
	padding: 20px 10px;
}

.function-grid .sl-icon {
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
}

.function-grid h3 {
	font-size: 16px;
}

/* ---- 左に見出しを置く節（料金・流れ・事例・FAQ） ---- */

.side-layout {
	grid-template-columns: 280px 1fr;
	gap: 48px;
}

.side-layout > div > p {
	margin-top: 12px;
	font-size: 17px;
}

.side-layout h2 small {
	font-size: 15px;
}

/* ---- 料金 ---- */

.prices {
	gap: 28px;
}

.price-card {
	position: relative;
	padding: 30px 30px 26px;
}

.price-card.is-recommended {
	border: 2px solid var(--mint);
}

.price-card h3 {
	font-size: 21px;
}

.price-card h3 small {
	padding: 3px 12px;
	font-size: 13px;
}

.price-card .checks {
	font-size: 16px;
}

.amount {
	font-size: 18px;
}

.amount b {
	font-size: 52px;
	color: var(--accent-text);
}

.amount .sl-per {
	margin-left: 0;
}

.sl-badge {
	position: absolute;
	top: -15px;
	left: 24px;
	padding: 3px 16px;
	border-radius: 999px;
	background: var(--mint);
	color: var(--navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: 0.08em;
}

/* 月額／年額の切り替え。JavaScript が無いと押しても変わらないので、
   motion.js が hidden を外すまで出さない */
.sl-billing {
	display: inline-flex;
	gap: 2px;
	margin-top: 24px;
	padding: 4px;
	border: 1px solid #d5e2ec;
	border-radius: 999px;
	background: #fff;
}

.sl-billing[hidden] {
	display: none;
}

.sl-billing button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--navy);
	font-size: 15px;
	font-weight: 700;
}

.sl-billing button[aria-pressed="true"] {
	background: var(--navy);
	color: #fff;
}

.sl-billing small {
	font-size: 12px;
	color: var(--accent-text);
}

.sl-billing button[aria-pressed="true"] small {
	color: #9ff0d9;
}

/* 数字の切り替え。上下の端でだけ切り、横ははみ出してよい
   （overflow:hidden だと行の基準線がずれるので clip-path で切る） */
.sl-roll {
	position: relative;
	display: inline-block;
	clip-path: inset(0 -3em);
}

.sl-price-note {
	margin-top: 12px;
}

.trial-note h3 {
	font-size: 18px;
}

.trial-note p {
	font-size: 16px;
}

/* ---- 導入の流れ ---- */

.steps {
	--sl-gap: 32px;
	gap: var(--sl-gap);
}

.steps li {
	flex-direction: column;
	gap: 6px;
	padding: 22px 20px;
	background: #fff;
}

.steps b {
	font-size: 28px;
}

.steps h3 {
	font-size: 17px;
}

.steps p {
	font-size: 16px;
}

/* 納品物の「›」をやめ、ステップの間を線でつなぐ（線は motion.js で伸ばす） */
.steps li:not(:last-child)::after {
	content: "";
	top: 50%;
	right: calc(var(--sl-gap) * -1 - 1px);
	width: calc(var(--sl-gap) + 2px);
	height: 2px;
	background: var(--accent);
	font-size: 0;
	transform-origin: left center;
}

/* ---- 導入事例 ---- */

.stories {
	gap: 32px;
}

.stories article {
	padding: 16px;
	gap: 20px;
}

.interior {
	width: 160px;
	height: 240px;
	object-fit: cover;
}

.stories .tag {
	font-size: 14px;
}

.stories h3 {
	font-size: 19px;
}

.stories article p {
	font-size: 16px;
}

.story-note {
	margin-top: -32px;
}

/* ---- よくある質問 ---- */

summary {
	padding: 18px 24px;
	font-size: 17px;
}

details p {
	padding: 18px 24px;
	font-size: 16px;
}

/* ---- 最後のCTA・フッター・ポップアップ ---- */

.final-section {
	padding-top: 24px !important;
}

.final-box {
	padding: 48px 56px 52px;
}

.final-box p {
	font-size: 17px;
}

.final-box h2 {
	margin: 10px 0 30px;
	font-size: 40px;
}

.final-box .cta-pair {
	max-width: 900px;
}

.footer {
	padding: 28px 0 40px;
}

.footer nav {
	font-size: 14px;
}

.footer small {
	font-size: 13px;
}

dialog p {
	font-size: 16px;
}


/* ==========================================================================
   タブレット（768〜1279px）
   ========================================================================== */

@media (max-width: 1279px) {
	:root {
		--gutter: 32px;
	}

	section:not(.hero):not(.logos) {
		padding: 64px 0;
	}

	h2 {
		font-size: clamp(30px, 3.2vw, 40px);
	}

	.section-lead {
		font-size: 16px;
		margin-bottom: 32px;
	}

	.header-inner {
		min-height: 76px;
		gap: 18px;
	}

	.brand {
		font-size: 24px;
	}

	.nav {
		gap: 18px;
		font-size: 14px;
	}

	.login,
	.header-cta {
		padding: 10px 18px;
		font-size: 14px;
	}

	.hero-inner {
		padding: 36px 0 44px;
	}

	.eyebrow {
		font-size: 16px;
	}

	.intro {
		font-size: 16px;
	}

	.annotation {
		font-size: 17px;
	}

	.hero-actions .button,
	.button {
		min-height: 56px;
		font-size: 16px;
	}

	.logo-row > span {
		gap: 8px;
		font-size: 15px;
	}

	.logo-row svg {
		width: 26px;
		height: 26px;
	}

	.problem-grid,
	.feature-grid {
		gap: 20px;
	}

	.problem p {
		font-size: 16px;
	}

	.comparison {
		gap: 48px;
	}

	.compare-card h3 {
		font-size: 24px;
	}

	.compare-card h3 small {
		margin-left: 8px;
		font-size: 14px;
	}

	.compare-body .person {
		width: 130px;
		height: 190px;
	}

	.time b {
		font-size: 52px;
	}

	.feature {
		padding: 28px 20px;
	}

	.feature h3 {
		font-size: 18px;
	}

	.function-grid {
		gap: 16px;
	}

	.side-layout {
		grid-template-columns: 220px 1fr;
		gap: 32px;
	}

	.price-card {
		padding: 28px 20px 22px;
	}

	.price-card h3 {
		font-size: 18px;
	}

	.amount b {
		font-size: 40px;
	}

	.steps {
		--sl-gap: 20px;
	}

	.steps li {
		padding: 18px 14px;
	}

	.steps b {
		font-size: 24px;
	}

	.interior {
		width: 120px;
		height: 200px;
	}

	.stories article {
		gap: 14px;
	}

	.final-box h2 {
		font-size: clamp(28px, 3.2vw, 40px);
	}

	.footer nav {
		gap: 16px;
	}
}

/* 横に並べきれない幅。ナビをメニューにたたみ、左見出しの節は縦に積む */
@media (max-width: 1099px) {
	.nav,
	.login {
		display: none;
	}

	.header-cta {
		margin-left: auto;
	}

	.menu {
		display: grid;
		gap: 5px;
		width: 30px;
		padding: 4px;
		border: 0;
		background: none;
	}

	.menu span {
		height: 3px;
		border-radius: 3px;
		background: var(--ink);
	}

	/* 6つを1行に並べきれない（1024px で 68px はみ出した） */
	.logo-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
		justify-items: center;
	}

	.problem {
		flex-direction: column;
		min-height: 0;
		padding: 12px 12px 20px;
		text-align: center;
	}

	.problem p {
		padding: 0;
	}

	.function-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.side-layout {
		grid-template-columns: 1fr;
	}

	.side-layout h2,
	.side-layout > div:first-child,
	.side-layout > div:first-child > p {
		text-align: center;
	}

	.story-note {
		grid-column: 1;
		margin-top: 0;
	}

	.footer {
		flex-wrap: wrap;
		justify-content: center;
	}

	.footer small {
		margin: 0;
	}
}


/* ==========================================================================
   スマホ（767px以下）。375〜430px の実機が基準
   ========================================================================== */

@media (max-width: 767px) {
	:root {
		--gutter: 20px;
	}

	body {
		font-size: 16px;
	}

	/* 狭い幅で、語の途中（「自動／で作成」など）で折り返さないようにする。
	   対応していないブラウザでは従来どおりの折り返しになるだけ */
	p,
	h2,
	h3,
	li {
		word-break: auto-phrase;
	}

	.hero {
		background-image: url(images/hero-bg-1088.webp);
	}

	section:not(.hero):not(.logos) {
		padding: 48px 0;
	}

	h2 {
		font-size: 26px;
	}

	.section-lead {
		font-size: 16px;
		margin: 10px 0 24px;
	}

	.caption {
		font-size: 12px;
	}

	/* ---- ヘッダー ---- */

	.header-inner {
		min-height: 62px;
		gap: 14px;
	}

	.brand {
		font-size: 22px;
	}

	.header-cta {
		padding: 9px 14px;
		font-size: 14px;
	}

	/* ---- ファーストビュー ---- */

	.hero-inner {
		width: 100%;
		padding: 14px 0 22px;
	}

	.hero-copy {
		padding: 0 var(--gutter);
	}

	.eyebrow {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.hero h1 {
		font-size: 32px;
		line-height: 1.28;
	}

	.intro {
		margin-top: 14px;
		font-size: 16px;
		line-height: 1.7;
		letter-spacing: 0;
	}

	.hero-visual {
		width: 100%;
		margin: 14px 0 0;
		padding: 0 8px;
	}

	.annotation {
		top: -8px;
		right: 4%;
		font-size: 13px;
	}

	.hero-actions {
		padding: 14px var(--gutter) 0;
	}

	.hero-actions .cta-pair {
		width: 100%;
		margin: 0;
		gap: 10px;
	}

	.hero-actions .caption {
		width: auto;
		margin-top: 8px;
		font-size: 12px;
		text-align: center;
	}

	.button,
	.hero-actions .button,
	.final-box .button {
		width: 100%;
		min-height: 54px;
		padding: 10px 16px;
		border-radius: 30px;
		font-size: 16px;
	}

	.hero-actions .primary {
		min-height: 56px;
	}

	.hero-actions .secondary {
		min-height: 50px;
	}

	/* ---- 導入店舗 ---- */

	.logos p {
		max-width: 300px;
		font-size: 13px;
	}

	.logo-row {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px 6px;
	}

	.logo-row > span {
		gap: 5px;
		font-size: 12px;
		white-space: normal;
		line-height: 1.3;
	}

	.logo-row svg {
		width: 22px;
		height: 22px;
	}

	/* ---- 悩み・Before/After ---- */

	.problem-grid,
	.feature-grid {
		gap: 14px;
	}

	.problem {
		flex-direction: row;
		justify-content: center;
		padding: 4px 14px 0;
		text-align: left;
	}

	.problem p {
		flex: 1;
		margin-left: 8px;
		font-size: 16px;
	}

	.person {
		width: 110px;
		height: 140px;
	}

	.comparison {
		gap: 36px;
	}

	.compare-card {
		padding: 14px 12px 0;
	}

	.compare-card h3 {
		font-size: 24px;
	}

	.compare-body {
		gap: 4px;
	}

	.compare-body .person {
		width: 104px;
		height: 150px;
	}

	.checks {
		font-size: 16px;
	}

	.checks li {
		padding-left: 20px;
		line-height: 1.6;
		margin: 4px 0;
	}

	.time {
		font-size: 22px;
	}

	.time b {
		font-size: 46px;
	}

	.sl-timebar {
		margin-top: 32px;
	}

	.sl-timebar__row {
		gap: 12px;
	}

	.sl-timebar__track {
		height: 14px;
	}

	.sl-timebar__value {
		font-size: 20px;
	}

	/* ---- 特徴・機能 ---- */

	.big-three {
		font-size: 40px;
	}

	.feature {
		padding: 26px 22px;
	}

	.feature h3 {
		font-size: 19px;
	}

	.feature p {
		font-size: 16px;
	}

	.sl-icon {
		width: 56px;
		height: 56px;
	}

	.function-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.function-grid > div {
		min-height: 128px;
		padding: 16px 8px;
	}

	.function-grid .sl-icon {
		width: 44px;
		height: 44px;
		margin-bottom: 10px;
	}

	.function-grid h3 {
		font-size: 16px;
	}

	/* ---- 左見出しの節 ---- */

	.side-layout > div > p,
	.side-layout > div:first-child > p {
		font-size: 16px;
	}

	.side-layout > div:first-child {
		margin-bottom: 24px;
	}

	.side-layout h2 small {
		font-size: 14px;
	}

	/* ---- 料金 ---- */

	.prices {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.price-card {
		padding: 26px 20px 20px;
	}

	.price-card h3 {
		font-size: 19px;
	}

	.price-card h3 small {
		font-size: 12px;
	}

	.price-card .checks {
		font-size: 16px;
	}

	.amount {
		font-size: 17px;
	}

	.amount b {
		font-size: 44px;
	}

	.sl-billing {
		margin-top: 18px;
	}

	.trial-note {
		padding: 14px;
		gap: 12px;
	}

	.trial-note h3 {
		font-size: 16px;
	}

	.trial-note p {
		font-size: 16px;
	}

	/* ---- 導入の流れ。縦に積み、線は上から下へつなぐ ---- */

	.steps {
		--sl-gap: 22px;
		grid-template-columns: 1fr;
	}

	.steps li {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		min-height: 0;
		padding: 16px 18px;
	}

	.steps li br {
		display: none;
	}

	.steps h3 {
		font-size: 17px;
	}

	.steps p {
		margin-top: 4px;
		font-size: 16px;
	}

	.steps li:not(:last-child)::after {
		display: block;
		top: 100%;
		right: auto;
		left: 38px;
		width: 2px;
		height: calc(var(--sl-gap) + 2px);
		transform-origin: center top;
	}

	/* ---- 導入事例 ---- */

	.stories {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.stories article {
		padding: 12px;
		gap: 14px;
	}

	.interior {
		width: 104px;
		height: 170px;
	}

	.stories h3 {
		font-size: 17px;
	}

	.stories article p {
		font-size: 16px;
	}

	.story-note {
		margin-top: 12px;
		text-align: center;
	}

	/* ---- FAQ・最後のCTA・フッター ---- */

	summary {
		padding: 16px;
		font-size: 16px;
	}

	details p {
		padding: 16px;
		font-size: 16px;
	}

	.final-box {
		padding: 32px 20px;
	}

	.final-box p {
		font-size: 16px;
	}

	.final-box h2 {
		margin: 8px 0 22px;
		font-size: 26px;
	}

	.final-box .cta-pair {
		flex-direction: column;
		gap: 12px;
	}

	.footer {
		padding: 20px 0 32px;
		gap: 16px;
	}

	.footer nav {
		gap: 10px 18px;
		font-size: 14px;
	}

	.footer small {
		font-size: 13px;
	}

	dialog p {
		font-size: 16px;
	}
}

/* 360px 前後。見出しの2行目が折り返さない大きさに落とす */
@media (max-width: 374px) {
	.hero h1 {
		font-size: 29px;
	}

	.header-cta {
		padding: 8px 11px;
		font-size: 13px;
	}

	.checks {
		font-size: 15px;
	}
}