/*
 * LP（ランディングページ）用パーツ
 *
 * ブロックの「高度な設定 → 追加 CSS クラス」に下のクラス名を入れると、
 * そのブロックがかっこいいデザインになります。
 *
 *   lp-hero       … 全幅のメインビジュアル（グループ／全幅）
 *   lp-band       … 背景色つきの帯（グループ／全幅）
 *   lp-cta        … 申し込みを促す締めの帯（グループ／全幅）
 *   lp-eyebrow    … 見出しの上の小さな英字（段落）
 *   lp-title      … 中央ぞろえの大見出し（見出し）
 *   lp-badge      … 枠で囲んだキャッチコピー（段落）
 *   lp-stats      … 数字を並べる欄（グループ）／ 中身は lp-stat
 *   lp-cards      … カードを並べる欄（グループ）／ 中身は lp-card
 *   lp-checklist  … チェックマーク付きリスト（リスト）
 *   lp-steps      … 番号と線でつながる手順（番号付きリスト）
 *   lp-price      … 料金カード（グループ）
 *   lp-notice     … 注意書きの枠（グループ）
 *   lp-message    … メッセージの枠（グループ）／ 強調文は lp-quote
 *   lp-center     … 中を中央ぞろえにする
 *   lp-lesson     … 講座のレッスン枠（グループ）／ 番号は lp-lesson__num
 *   lp-course-nav … 講座ページどうしを行き来するボタン（ボタンのまとまり）
 */

/* --------------------------------------------------------------------------
   共通
   -------------------------------------------------------------------------- */

/* クラシックテーマではグループの中身が inner-container で包まれるため、
   グリッドに並べるパーツでは包みを無視する */
.lp-cards > .wp-block-group__inner-container,
.lp-stats > .wp-block-group__inner-container {
	display: contents;
}

.lp-center {
	text-align: center;
}

.lp-center .wp-block-buttons,
.lp-hero .wp-block-buttons,
.lp-cta .wp-block-buttons {
	justify-content: center;
}

.lp-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 3.2em 0 0;
	color: var(--c-accent);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.lp-eyebrow::before,
.lp-eyebrow::after {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}

h2.lp-title {
	margin: 0.4em 0 1.2em;
	padding: 0;
	border: 0;
	font-size: clamp(1.6rem, 3.8vw, 2.4rem);
	line-height: 1.4;
	text-align: center;
}

.lp-title strong,
.lp-hero strong,
.lp-quote strong {
	color: var(--c-accent);
	text-shadow: 0 0 18px rgba(0, 229, 255, 0.55);
}

.lp-badge {
	display: inline-block;
	margin: 0;
	padding: 10px 22px;
	border: 1px solid var(--c-line-strong);
	border-radius: 999px;
	background: rgba(0, 229, 255, 0.06);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   全幅の帯（ヒーロー・帯・締め）
   -------------------------------------------------------------------------- */

.lp-hero,
.lp-band,
.lp-cta {
	position: relative;
	padding-inline: var(--gutter);
	overflow: hidden;
	isolation: isolate;
	border-block: 1px solid var(--c-line);
}

.lp-hero > *,
.lp-band > *,
.lp-cta > * {
	max-width: 1120px;
	margin-inline: auto;
}

/* うっすら見える方眼の背景 */
.lp-hero::before,
.lp-band::before,
.lp-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(0, 229, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 229, 255, 0.07) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.lp-hero {
	margin-block: 0 clamp(64px, 9vw, 112px);
	padding-block: clamp(72px, 12vw, 140px);
	background:
		radial-gradient(ellipse 60% 70% at 85% 20%, rgba(61, 139, 255, 0.22), transparent 70%),
		radial-gradient(ellipse 50% 60% at 10% 90%, rgba(0, 229, 255, 0.16), transparent 70%),
		#05070b;
	text-align: center;
}

/* 下端に走るネオンの線 */
.lp-hero::after,
.lp-cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--c-accent), var(--c-accent-2), transparent);
	box-shadow: 0 0 16px var(--c-accent);
}

.lp-hero h2 {
	margin: 0.5em auto 0.6em;
	padding: 0;
	border: 0;
	font-size: clamp(2rem, 6.4vw, 4rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

.lp-hero p {
	max-width: 640px;
	margin-inline: auto;
	color: var(--c-muted);
	font-size: clamp(1rem, 1.6vw, 1.1rem);
}

.lp-hero .lp-eyebrow {
	margin-top: 0;
	max-width: none;
	color: var(--c-accent);
	font-size: 0.78rem;
}

.lp-hero .lp-badge {
	margin-top: 0.6em;
	color: var(--c-text);
}

.lp-band {
	margin-block: clamp(64px, 9vw, 112px);
	padding-block: clamp(56px, 8vw, 96px);
	background: linear-gradient(180deg, var(--c-surface), #070a10);
}

.lp-band .lp-eyebrow {
	margin-top: 0;
}

.lp-cta {
	margin-block: clamp(64px, 9vw, 112px) 0;
	padding-block: clamp(64px, 10vw, 120px);
	background:
		radial-gradient(ellipse 70% 80% at 50% 100%, rgba(0, 229, 255, 0.18), transparent 70%),
		#05070b;
	text-align: center;
}

.lp-cta .lp-eyebrow {
	margin-top: 0;
}

.lp-cta p {
	max-width: 640px;
	margin-inline: auto;
	color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   数字を並べる欄
   -------------------------------------------------------------------------- */

.lp-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin-block: 2.4em 0;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	overflow: hidden;
}

.lp-stat {
	padding: 24px 16px;
	background: rgba(6, 8, 12, 0.92);
	text-align: center;
}

.lp-stat p {
	margin: 0;
	max-width: none;
}

.lp-stat .lp-stat__num {
	color: var(--c-accent);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.6vw, 2.2rem);
	font-weight: 800;
	line-height: 1.3;
	text-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
}

.lp-stat .lp-stat__label {
	margin-top: 4px;
	color: var(--c-muted);
	font-size: 0.85rem;
}

@media (max-width: 600px) {
	.lp-stats {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   カード
   -------------------------------------------------------------------------- */

.lp-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-block: 0 2em;
}

@media (max-width: 900px) {
	.lp-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.lp-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lp-card {
	position: relative;
	padding: 30px 26px 28px;
	background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
	border: 1px solid var(--c-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.lp-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
	opacity: 0.7;
}

.lp-card:hover {
	transform: translateY(-4px);
	border-color: var(--c-line-strong);
	box-shadow: 0 12px 40px rgba(0, 229, 255, 0.12);
}

.lp-card h3 {
	margin: 0.2em 0 0.6em;
	color: var(--c-text);
	font-size: 1.1rem;
	line-height: 1.5;
}

.lp-card p {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.95rem;
}

.lp-card .lp-card__num {
	margin-bottom: 10px;
	color: transparent;
	font-family: var(--font-display);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	-webkit-text-stroke: 1px var(--c-accent);
	text-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
}

/* --------------------------------------------------------------------------
   チェックリスト
   -------------------------------------------------------------------------- */

ul.lp-checklist {
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.lp-checklist li {
	position: relative;
	padding: 18px 20px 18px 60px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 8px;
}

.lp-checklist li + li {
	margin-top: 12px;
}

.lp-checklist li::before {
	content: "✓";
	position: absolute;
	top: 18px;
	left: 20px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
	color: var(--c-accent-ink);
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1;
}

.lp-checklist li strong {
	color: var(--c-text);
}

@media (min-width: 720px) {
	ul.lp-checklist--grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.lp-checklist--grid li + li {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   手順（番号と線）
   -------------------------------------------------------------------------- */

ol.lp-steps {
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
	counter-reset: lp-step;
}

.lp-steps li {
	position: relative;
	min-height: 52px;
	padding: 4px 0 32px 76px;
	counter-increment: lp-step;
}

.lp-steps li + li {
	margin-top: 0;
}

.lp-steps li::before {
	content: counter(lp-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	background: var(--c-bg);
	box-shadow: 0 0 18px rgba(0, 229, 255, 0.35), inset 0 0 12px rgba(0, 229, 255, 0.2);
	color: var(--c-accent);
	font-family: var(--font-display);
	font-weight: 800;
}

.lp-steps li::after {
	content: "";
	position: absolute;
	top: 56px;
	bottom: 4px;
	left: 25px;
	width: 2px;
	background: linear-gradient(180deg, var(--c-accent), rgba(0, 229, 255, 0.05));
}

.lp-steps li:last-child {
	padding-bottom: 0;
}

.lp-steps li:last-child::after {
	display: none;
}

.lp-steps li strong {
	display: block;
	margin-bottom: 4px;
	color: var(--c-text);
	font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   料金カード
   -------------------------------------------------------------------------- */

.lp-price {
	max-width: 620px;
	margin: 0 auto 2em;
	padding: clamp(32px, 5vw, 52px) clamp(20px, 5vw, 48px);
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 229, 255, 0.14), transparent 70%),
		var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: 12px;
	box-shadow: 0 0 48px rgba(0, 229, 255, 0.12);
	text-align: center;
}

.lp-price p {
	margin: 0;
}

.lp-price .lp-price__label {
	color: var(--c-accent);
	font-family: var(--font-display);
	font-size: 0.8rem;
	letter-spacing: 0.3em;
}

.lp-price .lp-price__amount {
	margin-top: 8px;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 9vw, 4.2rem);
	font-weight: 800;
	line-height: 1.1;
	text-shadow: 0 0 28px rgba(0, 229, 255, 0.4);
}

.lp-price .lp-price__sub {
	margin-top: 8px;
	color: var(--c-muted);
}

.lp-price .lp-price__sub strong {
	color: var(--c-accent-light);
	font-size: 1.15em;
}

.lp-price .lp-checklist {
	margin: 28px 0 0;
	text-align: left;
}

.lp-price .lp-checklist li {
	padding: 12px 16px 12px 54px;
}

.lp-price .lp-checklist li + li {
	margin-top: 8px;
}

.lp-price .lp-checklist li::before {
	top: 12px;
	left: 16px;
}

.lp-price .wp-block-buttons {
	justify-content: center;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   注意書き・メッセージ
   -------------------------------------------------------------------------- */

.lp-notice {
	margin-block: 2em;
	padding: 24px clamp(20px, 4vw, 32px);
	background: rgba(255, 194, 74, 0.06);
	border: 1px solid rgba(255, 194, 74, 0.45);
	border-radius: 8px;
}

.lp-notice h3 {
	margin-top: 0;
	color: #ffc24a;
}

.lp-notice p:last-child,
.lp-notice ul:last-child {
	margin-bottom: 0;
}

.lp-message {
	position: relative;
	margin-block: 2em;
	padding: clamp(28px, 5vw, 56px);
	background: linear-gradient(135deg, var(--c-surface-2), var(--c-surface));
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-accent);
	border-radius: 8px;
}

.lp-quote {
	margin: 1.4em 0;
	font-size: clamp(1.5rem, 4.4vw, 2.2rem);
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
}

/* --------------------------------------------------------------------------
   よくある質問（詳細ブロック）
   -------------------------------------------------------------------------- */

.wp-block-details {
	margin: 0 0 12px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	transition: border-color 0.2s;
}

.wp-block-details[open] {
	border-color: var(--c-line-strong);
}

.wp-block-details summary {
	position: relative;
	padding: 18px 56px 18px 20px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 20px;
	color: var(--c-accent);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform 0.2s;
}

.wp-block-details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.wp-block-details > :not(summary) {
	margin-inline: 20px;
	color: var(--c-muted);
}

.wp-block-details > :last-child {
	margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   オンライン講座（レッスン枠・講座メニュー）
   -------------------------------------------------------------------------- */

.lp-lesson {
	position: relative;
	margin-block: 0 28px;
	padding: clamp(20px, 4vw, 32px);
	background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
	border: 1px solid var(--c-line);
	border-radius: 8px;
}

.lp-lesson::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
	opacity: 0.7;
}

.entry-content .lp-lesson h3 {
	margin: 0 0 16px;
	color: var(--c-text);
	font-size: 1.15rem;
}

.lp-lesson .lp-lesson__num {
	margin: 0 0 4px;
	color: var(--c-accent);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.lp-lesson .wp-block-embed {
	margin: 0 0 16px;
}

.lp-lesson > :last-child,
.lp-lesson > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

.lp-lesson p,
.lp-lesson li {
	color: var(--c-muted);
	font-size: 0.95rem;
}

.lp-course-nav {
	gap: 10px;
	justify-content: center;
	margin-block: 0 2.5em;
}

.lp-course-nav .wp-block-button__link {
	padding: 10px 18px;
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   スクロールで浮かび上がる動き（JavaScript が動くときだけ）
   -------------------------------------------------------------------------- */

.lp-anim .lp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.lp-anim .lp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lp-anim .lp-reveal {
		opacity: 1;
		transform: none;
	}
}