/* front-page.css — エンムスビ トップ固有スタイル。
   段階1（構造＋レスポンシブ）。色・装飾は段階2で当てる。
   参照: docs/page-composition-top.md（構図） / docs/design-notes.md（方針） */

/* ============================================================
   サイト全体背景 — カラフルorbs（朱赤・山吹・LINE緑をバラバラサイズで散らす）
   fixed 配置で常に viewport の背後に存在。各セクション background が
   transparent のとき（about/gakuya/faq）に透けて見える。
   html に base 背景を持たせ、body は透過させて orbs を見せる。
   ============================================================ */
html { background-color: var(--wp--preset--color--base); }
body { background-color: transparent !important; }
.site-bg-orbs {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.site-orb {
	position: absolute;
	border-radius: 50%;
	opacity: 0.40;
}
.site-orb--1  { top:  4%; left: -6%;  width: clamp(140px, 18vw, 260px); aspect-ratio: 1; background: var(--wp--preset--color--accent); }
.site-orb--2  { top: 12%; right: -10%; width: clamp(220px, 28vw, 420px); aspect-ratio: 1; background: var(--wp--preset--color--brand); opacity: .28; }
.site-orb--3  { top: 32%; left: 28%;  width: clamp(60px, 8vw, 110px);  aspect-ratio: 1; background: var(--wp--preset--color--line-green); }
.site-orb--4  { top: 46%; right: 6%;  width: clamp(180px, 22vw, 320px); aspect-ratio: 1; background: var(--wp--preset--color--accent); opacity: .35; }
.site-orb--5  { top: 58%; left: -4%;  width: clamp(100px, 14vw, 180px); aspect-ratio: 1; background: var(--wp--preset--color--brand); }
.site-orb--6  { top: 70%; right: 18%; width: clamp(40px, 5vw, 70px);   aspect-ratio: 1; background: var(--wp--preset--color--line-green); opacity: .5; }
.site-orb--7  { top: 80%; left: 22%;  width: clamp(150px, 20vw, 280px); aspect-ratio: 1; background: var(--wp--preset--color--accent); opacity: .30; }
.site-orb--8  { top: 90%; right: -6%; width: clamp(80px, 12vw, 160px); aspect-ratio: 1; background: var(--wp--preset--color--brand); }
.site-orb--9  { top: 24%; left: 8%;   width: clamp(28px, 3vw, 48px);   aspect-ratio: 1; background: var(--wp--preset--color--brand); opacity: .55; }
.site-orb--10 { top: 64%; right: 32%; width: clamp(36px, 4vw, 60px);   aspect-ratio: 1; background: var(--wp--preset--color--accent); opacity: .55; }

/* ============================================================
   hero — エンムスビ FV（再構築版）。
   生成り背景 + 大小バラバラのorbs + 中央巨大タイポ + LINE緑pillボタン
   ============================================================ */
.hero {
	position: relative;
	min-height: clamp(40rem, 92svh, 56rem);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}
.hero__orbs {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.hero__orb {
	position: absolute;
	border-radius: 50%;
	opacity: 0.65;
}
/* 中央60%は避けて、画面の四隅・縁にだけ配置する（テキストの可読性確保） */
.hero__orb--a { top: -10vw; right: -12vw; width: clamp(20rem, 36vw, 32rem); aspect-ratio: 1; background: var(--wp--preset--color--accent); }
.hero__orb--b { top: 10%;   left: -8vw;  width: clamp(8rem, 14vw, 14rem);   aspect-ratio: 1; background: var(--wp--preset--color--brand); opacity: .7; }
.hero__orb--c { bottom: -8vw; left: 6%;  width: clamp(10rem, 16vw, 16rem); aspect-ratio: 1; background: var(--wp--preset--color--line-green); opacity: .65; }
.hero__orb--d { top: 8%;    left: 12%;  width: clamp(1.6rem, 2.2vw, 2.5rem); aspect-ratio: 1; background: var(--wp--preset--color--brand); opacity: .9; }
.hero__orb--e { top: 86%;   right: 18%; width: clamp(3rem, 5vw, 4.5rem);   aspect-ratio: 1; background: var(--wp--preset--color--line-green); opacity: .85; }
.hero__orb--f { bottom: 15%; right: -4vw; width: clamp(7rem, 11vw, 11rem); aspect-ratio: 1; background: var(--wp--preset--color--brand); opacity: .55; }
.hero__orb--g { top: 78%;   left: 2%;   width: clamp(1.4rem, 2.2vw, 2.6rem); aspect-ratio: 1; background: var(--wp--preset--color--accent); opacity: .95; }
.hero__orb--h { top: 60%;   left: -3vw; width: clamp(4rem, 7vw, 6.5rem);   aspect-ratio: 1; background: var(--wp--preset--color--base);     border: 4px solid var(--wp--preset--color--brand); opacity: 1; }
.hero__orb--i { top: 22%;   right: 6%;  width: clamp(2rem, 3vw, 3rem);     aspect-ratio: 1; background: var(--wp--preset--color--brand); opacity: .85; }
.hero__orb--j { top: 92%;   left: 42%;  width: clamp(.8rem, 1.2vw, 1.2rem); aspect-ratio: 1; background: var(--wp--preset--color--brand); opacity: .9; }

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--md);
	text-align: center;
}
.hero__eyebrow {
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.3em;
	font-weight: 700;
	padding: 8px 22px;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	margin-bottom: var(--wp--preset--spacing--md);
}
.hero__title {
	font-size: clamp(3.5rem, 11vw, 9.5rem);
	line-height: 1.0;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--md);
}
@media (max-width: 767px) {
	.hero__title { font-size: clamp(2.6rem, 12vw, 3.75rem); line-height: 1.15; }
}
.hero__lead {
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--ink);
	line-height: 1.9;
	margin: 0 0 var(--wp--preset--spacing--lg);
	font-weight: 500;
}
@media (max-width: 767px) {
	.hero__lead { font-size: var(--wp--preset--font-size--lg); }
}
.hero__cta { margin: 0; }
.hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 1.15rem 2.8rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	background: var(--wp--preset--color--line-green);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
	box-shadow: 0 10px 28px rgb(6 199 85 / .35);
}
.hero__btn:hover {
	background: var(--wp--preset--color--brand);
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 14px 36px rgb(232 76 61 / .45);
}

/* ============================================================
   about — editorial（左右非対称・余白大）
   ============================================================ */
.about {
	padding-block: var(--wp--preset--spacing--xl);
	background: transparent;
}
.about__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}
@media (min-width: 768px) {
	.about__inner {
		grid-template-columns: 5fr 7fr;
		gap: var(--wp--preset--spacing--xl);
		align-items: start;
	}
}
.about__eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.2em;
	text-transform: lowercase;
	margin-bottom: var(--wp--preset--spacing--xs);
}
.about__title {
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 1.2;
	margin: 0;
}
.about__text {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 2;
	margin-bottom: var(--wp--preset--spacing--sm);
}
.about__text-sub {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 2;
}

/* ============================================================
   section__head の左寄せバリアント
   ============================================================ */
.section__head--left {
	text-align: left;
	margin-bottom: var(--wp--preset--spacing--lg);
}
.features__eyebrow,
.gakuya__eyebrow,
.faq__eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.15em;
	margin-bottom: var(--wp--preset--spacing--xs);
}

/* ============================================================
   features 段階2 — 大胆方向
   生成り背景 + 巨大番号 + カード色面差別化 + display見出し
   ============================================================ */
.features {
	background: transparent;
	position: relative;
	overflow: hidden;
}
.features .section__head--left {
	margin-bottom: var(--wp--preset--spacing--xl);
}
.features__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.2em;
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--sm);
}
.features__eyebrow::before {
	content: '';
	width: 2.5rem;
	height: 3px;
	background: currentColor;
	border-radius: 2px;
}
.features .section__title {
	font-size: var(--wp--preset--font-size--display);
	color: var(--wp--preset--color--brand);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
}
@media (max-width: 767px) {
	.features .section__title { font-size: var(--wp--preset--font-size--xxxl); }
}

/* === グリッド === */
.features__list--asym {
	grid-template-columns: 1fr !important;
	gap: var(--wp--preset--spacing--sm) !important;
}
@media (min-width: 768px) {
	.features__list--asym {
		grid-template-columns: 7fr 5fr !important;
		grid-template-rows: repeat(3, auto);
		gap: var(--wp--preset--spacing--sm) !important;
	}
	.features__list--asym .features__item:nth-child(1) {
		grid-column: 1;
		grid-row: 1 / span 3;
	}
	.features__list--asym .features__item:nth-child(2) { grid-column: 2; grid-row: 1; }
	.features__list--asym .features__item:nth-child(3) { grid-column: 2; grid-row: 2; }
	.features__list--asym .features__item:nth-child(4) { grid-column: 2; grid-row: 3; }
}

/* === カード基本（背景画像方式） === */
.features__item {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 360px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	transition: transform .25s ease;
}
.features__item--featured {
	min-height: 620px;
}
.features__item:hover {
	transform: translateY(-4px);
}

/* === 背景画像（全面）+ オーバーレイ === */
.features__img-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	aspect-ratio: unset !important;
	flex: unset !important;
	overflow: hidden;
}
.features__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 暗グラデオーバーレイで読みやすさ確保（画像のあるカードのみ） */
.features__item:not([data-color="4"]) .features__img-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(42 31 26 / .10) 0%, rgb(42 31 26 / .72) 75%, rgb(42 31 26 / .88) 100%);
}

/* === 4枠目（準備中・画像なし）だけ色面と破線で別人格 === */
.features__item[data-color="4"] {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--ink);
	border: 2px dashed var(--wp--preset--color--brand);
}

/* === ボディ（最下部に重ねる） === */
.features__body {
	position: relative;
	z-index: 2;
	padding: var(--wp--preset--spacing--md);
}
.features__item--featured .features__body {
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.features__title {
	font-size: var(--wp--preset--font-size--xxl);
	color: inherit;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin-bottom: var(--wp--preset--spacing--xs);
}
.features__item--featured .features__title {
	font-size: var(--wp--preset--font-size--xxxl);
}
.features__text {
	font-size: var(--wp--preset--font-size--base);
	color: inherit;
	opacity: 0.92;
	line-height: 1.8;
	margin-bottom: var(--wp--preset--spacing--sm);
}
.features__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--wp--preset--font-size--base);
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	padding: 8px 0;
	border-bottom: 2px solid currentColor;
	transition: gap .25s ease;
}
.features__link:hover { gap: 0.8em; color: inherit; }
.features__item[data-color="4"] .features__link { color: var(--wp--preset--color--brand); }

/* === 巨大番号（カード右上に重ねる） === */
.features__num {
	position: absolute;
	top: var(--wp--preset--spacing--sm);
	right: var(--wp--preset--spacing--md);
	font-family: 'Zen Maru Gothic', serif;
	font-weight: 700;
	font-size: clamp(3.5rem, 8vw, 6.5rem);
	line-height: 1;
	color: var(--wp--preset--color--base);
	opacity: 0.32;
	pointer-events: none;
	z-index: 2;
}
.features__item[data-color="4"] .features__num {
	color: var(--wp--preset--color--brand);
	opacity: 0.18;
}

/* === 「準備中」付箋（4枠目、左上に大きく） === */
.features__wip-tag {
	position: absolute;
	top: var(--wp--preset--spacing--md);
	left: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	padding: 8px 22px;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	transform: rotate(-6deg);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgb(232 76 61 / .35);
	letter-spacing: 0.05em;
	z-index: 3;
}

/* ============================================================
   gakuya — 縦長カードグリッド（auto-fit）
   ============================================================ */
.gakuya {
	padding-block: var(--wp--preset--spacing--xl);
	background: transparent;
}
.gakuya__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
/* 横長カードを縦に積む（ブログリスト型） */
.gakuya__cards {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	max-width: 860px;
}
.gakuya__card {
	background: var(--wp--preset--color--base);
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	transition: transform .25s ease, box-shadow .25s ease;
}
.gakuya__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgb(42 31 26 / .10);
}
.gakuya__card-link {
	text-decoration: none;
	color: inherit;
	display: grid;
	grid-template-columns: 1fr;
	height: 100%;
}
@media (min-width: 640px) {
	.gakuya__card-link {
		grid-template-columns: 280px 1fr;
		align-items: stretch;
	}
}
.gakuya__card-img-wrap {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--base-2);
}
@media (min-width: 640px) {
	.gakuya__card-img-wrap {
		aspect-ratio: auto;
		height: 100%;
		min-height: 180px;
	}
}
.gakuya__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.gakuya__card:hover .gakuya__card-img {
	transform: scale(1.05);
}
.gakuya__card-body {
	padding: var(--wp--preset--spacing--md);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	justify-content: center;
}
.gakuya__date {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.08em;
	font-weight: 700;
	margin: 0;
}
.gakuya__card-title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}
.gakuya__card-excerpt {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.8;
	margin: 0;
}
.gakuya__more {
	margin-top: var(--wp--preset--spacing--lg);
	text-align: right;
}
.gakuya__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding: 8px 0;
	transition: gap .25s ease;
}
.gakuya__more-link:hover { gap: 0.8em; }
.gakuya__empty {
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
	padding-block: var(--wp--preset--spacing--lg);
	font-size: var(--wp--preset--font-size--base);
}

/* ============================================================
   faq — 左右振り（左Q右A）。基本構造は sections.css のものを継承し、
   faqセクション全体は内包narrowで余白多め。
   ============================================================ */
.faq {
	background: transparent;
}
.faq__inner {
	max-width: 880px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}

/* ============================================================
   cta — エンムスビ向け LINE 誘導＋連絡先（上書き）
   ============================================================ */
.cta {
	padding-block: var(--wp--preset--spacing--xl);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	text-align: center;
}
.cta__inner {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.cta__eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--base);
	letter-spacing: 0.25em;
	opacity: 0.85;
	margin-bottom: var(--wp--preset--spacing--xs);
}
.cta__title {
	font-size: var(--wp--preset--font-size--xxl);
	color: var(--wp--preset--color--base);
	margin-bottom: var(--wp--preset--spacing--sm);
	line-height: 1.4;
}
.cta__lead {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--base);
	opacity: 0.9;
	margin-bottom: var(--wp--preset--spacing--md);
	line-height: 1.9;
}
.cta__actions {
	display: flex;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--lg);
}
.cta__line-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--line-green);
	color: var(--wp--preset--color--base);
}
.cta__line-btn:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--line-green);
}
.cta__contact {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--md) 0;
	border-top: 1px solid rgb(255 255 255 / .25);
	border-bottom: 1px solid rgb(255 255 255 / .25);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	text-align: left;
}
.cta__contact-item {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--base);
	align-items: baseline;
}
.cta__contact-label {
	flex: 0 0 4em;
	font-size: var(--wp--preset--font-size--sm);
	opacity: 0.75;
}
.cta__contact-value {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	flex: 1;
}
.cta__contact-value:hover {
	color: var(--wp--preset--color--accent);
}
.cta__sns {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--md);
}
.cta__sns-link {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.05em;
}
.cta__sns-link:hover {
	color: var(--wp--preset--color--accent);
}