/*
 * Blanky Link — 紹介ページ（/themes/blanky-link）
 *
 * 旧 blanky.369theme.com/theme/blanky-link/ の LP（css/style.css）を、369theme.com の中に置くために書き直したもの。
 * 値は旧 LP のまま。クラス名は lp- に揃え、.lp の中だけに効かせる。
 *
 * - ヘッダー・フッター・スキップリンク・言語切替はサイトのものを使うので持たない
 * - 書体は Web フォント（Fraunces）を読み込まず、システムの書体にした
 * - 旧 LP は OS の設定で暗い配色になったが、サイトのヘッダー・フッターは明るいままなので、明るい配色だけにした
 *   （テーマ本体のダークモードの説明は本文に残している）
 * - 色:
 *   - 明るい地の金の文字（#EAC950、1.46:1）は、大きい見出しの強調にだけ使っているので #8A6D0E（4.42:1）にした
 *   - ラベルの灰（#8F8C84、3.02:1）は本文の灰 #595650（6.59:1、色付きのカードの上でも 5.23:1 以上）にした
 *   - CTA の注記（白 0.35、2.95:1）は白 0.7（7.83:1）にした
 *   - 旧 LP の「買う前に質問する」に付いていた btn-secondary--on-dark は定義が無く、暗いカードの上で暗い文字になっていた。
 *     暗い地用の色を付けた
 *
 * public/ に置いて直接読み込むので、npm run build は要らない。JS も使わない（動きは CSS だけ）。
 */

/* --- tokens ------------------------------------------------------------- */

.lp {
	--bg: #f4f3ef;
	--surface: #fff;
	--fg: #1c1b18;
	--muted: #595650;
	--ink-soft: #595650;
	--border: rgb(26 25 22 / 0.08);
	--border-md: rgb(26 25 22 / 0.12);
	--gold: #eac950;
	--gold-text: #8a6d0e;
	--gold-soft: #f2e8a6;
	--gold-hi: #f8e287;
	--sage: #d2e4da;
	--sage-ink: #2e5a44;
	--navy: #151f2b;
	--navy-deep: #0b1118;
	--peach: #f2d5bc;
	--stone: #e4e2dc;
	--on-dark: #f0eee8;

	--font-serif: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;

	--wrap: 1100px;
	--gutter: 2rem;
	--section: 7rem;
	--section-sm: 4.5rem;
	--gap: 0.625rem;
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* サイトのヘッダー（h-16）の高さ。ページ内リンクで見出しが隠れないようにする */
	--site-header-h: 4rem;

	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* --- base --------------------------------------------------------------- */

/* サイトの Tailwind（preflight）も同じ指定をしているが、それに頼らずここでも持つ */
:where(.lp),
:where(.lp) *,
:where(.lp) *::before,
:where(.lp) *::after {
	box-sizing: border-box;
}

/* リセットは :where() で詳細度を 0 にする。.lp p（0-1-1）のままだと、クラスで付けた余白（0-1-0）を消してしまう */
:where(.lp) :where(h1, h2, h3, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

:where(.lp) :where(ul, ol) {
	list-style: none;
}

:where(.lp) img {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.lp) a {
	color: inherit;
	text-decoration: none;
}

.lp a:focus-visible,
.lp button:focus-visible {
	outline: 3px solid var(--gold-text);
	outline-offset: 3px;
	border-radius: 4px;
}

.lp [id] {
	scroll-margin-top: calc(var(--site-header-h) + 1rem);
}

.lp-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* 画面には出さず、読み上げだけで伝える文字 */
.lp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 紙のざらつき（飾り） */
.lp-grain {
	position: relative;
	isolation: isolate;
}

.lp-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.06;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.lp-grain > * {
	position: relative;
	z-index: 1;
}

/* --- animation ---------------------------------------------------------- */

@keyframes lp-fade-up {

	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lp-bento-pop {

	from {
		opacity: 0;
		transform: translateY(20px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes lp-pulse-dot {

	0%,
	100% {
		box-shadow: 0 0 0 3px rgb(108 224 138 / 0.2);
	}

	50% {
		box-shadow: 0 0 0 7px rgb(108 224 138 / 0.05);
	}
}

/* --- label -------------------------------------------------------------- */

.lp-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.lp-label::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 14px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

/* --- buttons ------------------------------------------------------------ */

.lp .lp-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border-radius: 12px;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.lp .lp-btn--primary {
	background: var(--fg);
	color: var(--bg);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp .lp-btn--primary:hover,
.lp .lp-btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}

.lp .lp-btn--secondary {
	border: 0.5px solid var(--border-md);
	background: transparent;
	color: var(--fg);
	transition: background 0.2s ease;
}

.lp .lp-btn--secondary:hover,
.lp .lp-btn--secondary:focus-visible {
	background: var(--surface);
}

/* 暗い CTA カードの上で使う（旧 LP では定義が無く、暗い地に暗い文字になっていた） */
.lp .lp-btn--on-dark {
	border-color: rgb(240 238 232 / 0.35);
	color: var(--on-dark);
}

.lp .lp-btn--on-dark:hover,
.lp .lp-btn--on-dark:focus-visible {
	background: rgb(240 238 232 / 0.1);
}

.lp-arrow {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-style: italic;
	transition: transform 0.3s var(--ease-bounce);
}

.lp-btn:hover .lp-arrow {
	transform: translateX(4px);
}

/* --- hero --------------------------------------------------------------- */

.lp-hero {
	overflow: hidden;
	padding-block: var(--section) var(--section-sm);
	text-align: center;
}

.lp-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 0.35rem 0.875rem;
	border: 0.5px solid rgb(234 201 80 / 0.4);
	border-radius: 20px;
	background: var(--gold-soft);
	color: var(--fg);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	animation: lp-fade-up 0.7s var(--ease-out) 0.1s both;
}

.lp-hero__title {
	max-width: 860px;
	margin-inline: auto;
	margin-bottom: 1.5rem;
	font-family: var(--font-serif);
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.025em;
	animation: lp-fade-up 0.7s var(--ease-out) 0.2s both;
}

.lp-hero__title em,
.lp-h2 em {
	color: var(--gold-text);
	font-style: italic;
}

.lp-hero__desc {
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 2rem;
	color: var(--ink-soft);
	font-size: clamp(0.9375rem, 2vw, 1.0625rem);
	line-height: 1.8;
	animation: lp-fade-up 0.7s var(--ease-out) 0.35s both;
}

.lp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	animation: lp-fade-up 0.7s var(--ease-out) 0.5s both;
}

.lp-preview {
	padding-bottom: var(--section-sm);
}

.lp-preview__frame {
	max-width: 900px;
	margin-inline: auto;
	overflow: hidden;
	border: 0.5px solid var(--border-md);
	border-radius: 20px;
	box-shadow: 0 24px 80px rgb(0 0 0 / 0.1), 0 4px 12px rgb(0 0 0 / 0.06);
	animation: lp-fade-up 0.8s var(--ease-out) 0.6s both;
}

.lp-preview__frame img {
	width: 100%;
}

/* --- section ------------------------------------------------------------ */

.lp-section {
	padding-block: var(--section);
}

.lp-head {
	margin-bottom: 3rem;
}

.lp-h2 {
	margin-top: 0.5rem;
	font-family: var(--font-serif);
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.lp-lead {
	max-width: 480px;
	margin-top: 1rem;
	color: var(--ink-soft);
	line-height: 1.8;
}

/* --- features（bento） --------------------------------------------------- */

.lp-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

.lp-card {
	position: relative;
	overflow: hidden;
	padding: 1.75rem;
	border-radius: 18px;
	animation: lp-bento-pop 0.6s var(--ease-out) both;
	transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s ease;
}

/* 段階的に出す（旧 LP と同じ 0.1 秒ずつ） */
.lp-card:nth-child(2) {
	animation-delay: 0.2s;
}

.lp-card:nth-child(3) {
	animation-delay: 0.3s;
}

.lp-card:nth-child(4) {
	animation-delay: 0.4s;
}

.lp-card:nth-child(5) {
	animation-delay: 0.5s;
}

.lp-card:nth-child(6) {
	animation-delay: 0.6s;
}

.lp-card:first-child {
	animation-delay: 0.1s;
}

.lp-card:hover {
	z-index: 1;
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.08);
}

.lp-card--white {
	border: 0.5px solid var(--border);
	background: var(--surface);
}

.lp-card--gold {
	background: var(--gold-soft);
}

.lp-card--sage {
	background: var(--sage);
}

.lp-card--navy {
	background: var(--navy);
	color: var(--on-dark);
}

.lp-card--navy.lp-grain::before {
	opacity: 0.04;
	mix-blend-mode: screen;
}

.lp-card--peach {
	background: var(--peach);
}

.lp-card--stone {
	background: var(--stone);
}

.lp-card--wide {
	grid-column: span 2;
}

.lp-card--flex {
	display: flex;
	flex-direction: column;
	min-height: 200px;
}

.lp-card__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1rem;
	border-radius: 10px;
	background: var(--fg);
}

.lp-card__icon svg {
	width: 20px;
	height: 20px;
	fill: var(--bg);
}

.lp-card--navy .lp-card__icon {
	background: rgb(255 255 255 / 0.1);
}

.lp-card--navy .lp-card__icon svg {
	fill: var(--gold);
}

.lp-card__title {
	margin-bottom: 0.25rem;
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.lp-card__desc {
	color: var(--ink-soft);
	font-size: 0.875rem;
	line-height: 1.75;
}

.lp-card--navy .lp-card__desc {
	color: rgb(240 238 232 / 0.6);
}

.lp-card--sage .lp-card__desc {
	color: var(--sage-ink);
}

.lp-card__num {
	margin-top: auto;
	font-family: var(--font-serif);
	font-size: 4.5rem;
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.025em;
	font-feature-settings: "lnum" 1;
}

.lp-card__unit {
	color: var(--ink-soft);
	font-family: var(--font-serif);
	font-size: 1rem;
	font-style: italic;
}

/* --- screenshots -------------------------------------------------------- */

.lp-shots {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	align-items: start;
	gap: 1rem;
}

.lp-shot {
	overflow: hidden;
	border: 0.5px solid var(--border-md);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgb(0 0 0 / 0.07);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-shot:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.1);
}

.lp-shot img {
	width: 100%;
}

/* --- steps -------------------------------------------------------------- */

.lp-steps {
	position: relative;
	overflow: hidden;
	padding-block: var(--section);
	background: var(--navy);
	color: var(--on-dark);
}

.lp-steps .lp-h2 {
	color: var(--on-dark);
}

.lp-steps .lp-h2 em {
	color: var(--gold);
}

.lp-steps .lp-lead {
	color: rgb(240 238 232 / 0.6);
}

.lp-steps .lp-label {
	color: rgb(234 201 80 / 0.85);
}

.lp-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.lp-step__num {
	margin-bottom: 1rem;
	color: var(--gold);
	font-family: var(--font-serif);
	font-size: 3.5rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	opacity: 0.35;
}

.lp-step__title {
	margin-bottom: 0.25rem;
	color: var(--on-dark);
	font-size: 1rem;
	font-weight: 500;
}

.lp-step__desc {
	color: rgb(240 238 232 / 0.55);
	font-size: 0.875rem;
	line-height: 1.75;
}

.lp-step__desc strong {
	color: var(--on-dark);
	font-weight: 600;
}

/* --- requirements ------------------------------------------------------- */

.lp-reqs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.lp-req {
	padding: 1.375rem;
	border: 0.5px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lp-req:hover {
	border-color: var(--border-md);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.05);
}

.lp-req__label {
	margin-bottom: 0.25rem;
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lp-req__value {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 500;
}

/* --- cta ---------------------------------------------------------------- */

.lp-cta {
	padding-block: var(--section);
	text-align: center;
}

.lp-cta__card {
	max-width: 680px;
	margin-inline: auto;
	padding: 4.5rem 3rem;
	overflow: hidden;
	border-radius: 24px;
	background: var(--fg);
	color: var(--on-dark);
}

.lp-cta__card.lp-grain::before {
	opacity: 0.03;
	mix-blend-mode: screen;
}

.lp-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	color: var(--gold);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.lp-cta__badge s {
	color: rgb(240 238 232 / 0.7);
}

.lp-cta__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6ce08a;
	box-shadow: 0 0 0 3px rgb(108 224 138 / 0.2);
	animation: lp-pulse-dot 2.4s ease-in-out infinite;
}

.lp-cta__title {
	margin-bottom: 1rem;
	color: var(--on-dark);
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.lp-cta__title em {
	color: var(--gold);
	font-style: italic;
}

.lp-cta__desc {
	max-width: 440px;
	margin-inline: auto;
	margin-bottom: 2rem;
	color: rgb(240 238 232 / 0.55);
	font-size: 0.9375rem;
	line-height: 1.8;
}

.lp-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.lp .lp-btn--cta {
	position: relative;
	justify-content: center;
	gap: 0.75rem;
	overflow: hidden;
	padding: 1rem 2rem;
	border-radius: 14px;
	background: var(--gold);
	color: var(--navy-deep);
	font-size: 1rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ホバーで光が流れる（飾り） */
.lp .lp-btn--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) 50%, var(--gold) 100%);
	background-position: 100% 0;
	background-size: 220% 100%;
	transition: background-position 0.6s ease;
}

.lp .lp-btn--cta:hover::before,
.lp .lp-btn--cta:focus-visible::before {
	background-position: 0 0;
}

.lp .lp-btn--cta > * {
	position: relative;
	z-index: 1;
}

.lp .lp-btn--cta:hover,
.lp .lp-btn--cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}

.lp-cta__sub {
	margin-top: 1rem;
	color: rgb(240 238 232 / 0.7);
	font-size: 0.875rem;
}

/* --- links（旧 LP のフッター） ------------------------------------------- */

.lp-links {
	padding-block: 2rem;
	border-top: 0.5px solid var(--border);
}

.lp-links__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 1.5rem;
	color: var(--muted);
	font-size: 0.875rem;
}

.lp-links__brand {
	color: var(--fg);
	font-family: var(--font-serif);
	font-size: 0.9375rem;
	font-weight: 500;
}

.lp-links__brand em {
	color: var(--muted);
	font-style: italic;
}

.lp-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.lp-links__list a {
	color: var(--muted);
	transition: color 0.2s ease;
}

.lp-links__list a:hover,
.lp-links__list a:focus-visible {
	color: var(--fg);
}

/* --- responsive --------------------------------------------------------- */

@media (width <= 900px) {

	.lp {
		--section: 5rem;
		--gutter: 1.5rem;
	}

	.lp-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-card--wide {
		grid-column: span 1;
	}

	.lp-shots {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
		margin-inline: auto;
	}

	.lp-shot:last-child {
		width: 100%;
		max-width: 280px;
		margin-inline: auto;
	}

	.lp-steps__list,
	.lp-reqs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 600px) {

	.lp {
		--section: 4rem;
		--section-sm: 3rem;
		--gutter: 1rem;
	}

	.lp-hero {
		text-align: left;
	}

	.lp-hero__desc {
		margin-inline: 0;
	}

	.lp-hero__actions {
		justify-content: flex-start;
	}

	.lp-hero__eyebrow {
		display: none;
	}

	.lp-features,
	.lp-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-cta__card {
		padding: 3rem 1.5rem;
	}

	.lp-preview__frame {
		border-radius: 14px;
	}

	.lp-links__inner {
		flex-direction: column;
		text-align: center;
	}

	.lp-links__list {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.lp *,
	.lp *::before,
	.lp *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}