/* =============================================================
   LAVERITE（teradamary.com）トップページだけの見た目
   置き場所：SWELLの子テーマの css/lv-front.css
   読み込み：front-page.php（inc/lv-front.php の lv_front_assets()）。css/lv-site.css のあとに読み込む

   デザインの軸
   ・寺田さんの「分岐点」を、ひし形の点と線で表す（システム設計の流れ図の「分岐」の記号）
   ・山場は1つだけ：いまから始まりへ辿る図（分岐点の段）。方眼の背景もこの段だけ
   ・書体と見出しの大きさは、下層ページと同じ（色と書体の決まりは追加CSSの先頭）
   ・段・ボタン・お客様の声・いちばん下の案内は css/lv-site.css（サイト共通）
   ============================================================= */

/* SWELLのTOP用の部品（メインビジュアル・記事スライダー・ピックアップバナー）は使わない */
.lv-front-page #main_visual,
.lv-front-page #post_slider,
.lv-front-page .p-mainVisual,
.lv-front-page .p-postSlider,
.lv-front-page .p-pickupBanners {
	display: none !important;
}

/* 文の折り返し */
.lv .lv-mv__catch,
.lv .lv-mv__lead,
.lv .lv-todo__text,
.lv .lv-close,
.lv .lv-trace__text,
.lv .lv-why__key,
.lv .lv-profile__key,
.lv .lv-posts__title,
.lv .lv-faq__q {
	word-break: auto-phrase;
}

.lv .lv-why__key {
	text-wrap: balance;
}


/* =============================================================
   メインビジュアル
   ============================================================= */
.lv .lv-mv {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	min-height: clamp(560px, 48vw, 720px);
	background: #fff;
}

.lv .lv-mv__text {
	align-self: center;
	padding: 80px 48px 80px max(var(--lv-gutter), calc((100vw - var(--lv-wrap)) / 2));
}

.lv .lv-mv__label {
	color: var(--lv-blue);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.06em;
}

.lv .lv-mv__catch {
	margin-top: 16px;
	color: var(--lv-ink);
	font-size: clamp(42px, 4.8vw, 70px);
	font-weight: 600;
	line-height: 1.36;
	letter-spacing: 0.04em;
	font-feature-settings: "palt" 1;
}

.lv .lv-mv__lead {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.95;
}

.lv .lv-mv__media {
	position: relative;
	overflow: hidden;
	background: var(--lv-mist);
}

.lv .lv-mv__media picture,
.lv .lv-mv__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lv .lv-mv__img {
	object-fit: cover;
	object-position: 50% 30%;
}

/* 写真がまだないとき */
.lv .lv-mv--noimage {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.lv .lv-mv--noimage .lv-mv__text {
	width: 100%;
	max-width: calc(var(--lv-wrap) + var(--lv-gutter) * 2);
	margin-inline: auto;
	padding: 128px var(--lv-gutter);
}

/* =============================================================
   お悩み：「やらなければ」のリスト。最後に下へ伸びる線で、分岐点の段へつなぐ
   ============================================================= */
.lv .lv-foryou {
	position: relative;
}

.lv .lv-foryou::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 72px;
	background: var(--lv-blue);
	opacity: 0.45;
}

.lv .lv-todo {
	padding: 8px 40px;
	border: 1px solid var(--lv-line);
	border-radius: var(--lv-radius);
	background: #fff;
}

.lv .lv-todo__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px 0;
}

.lv .lv-todo__item + .lv-todo__item {
	border-top: 1px solid var(--lv-line);
}

.lv .lv-todo__box {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 8px;
	border: 1.5px solid var(--lv-blue);
	border-radius: 3px;
}

.lv .lv-todo__text {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: 0.03em;
}

/* PCでは1項目を1行で見せる（入力した改行は、スマホのときだけ使う） */
@media screen and (min-width: 768px) {
	.lv .lv-todo__text br {
		display: none;
	}
}

.lv .lv-close {
	margin-top: 56px;
	font-size: 18px;
	font-weight: 600;
	line-height: 2;
	text-align: center;
}

/* =============================================================
   分岐点：いまから、始まりへ辿る図（この段だけ、深い青に方眼）
   ============================================================= */
.lv .lv-sec--deep {
	background:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
		var(--lv-deep);
	color: rgba(255, 255, 255, 0.86);
}

.lv .lv-sec--deep .lv-title {
	color: #fff;
}

.lv .lv-split--why {
	align-items: end;
}

.lv .lv-why__intro p {
	font-size: 16px;
	line-height: 2.1;
}

.lv .lv-why__intro p + p {
	margin-top: 1.2em;
}

.lv .lv-trace {
	position: relative;
	margin-top: 96px;
	padding-top: 96px;
}

.lv .lv-trace__caption {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--lv-sky);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
}

/* 分岐点から分かれる、もう一つの道（点線） */
.lv .lv-trace__fork {
	position: absolute;
	top: 28px;
	left: calc(100% / var(--lv-n) / 2);
	width: calc(100% / var(--lv-n) * 1.6);
	height: 80px;
	color: var(--lv-sky);
	opacity: 0.75;
	overflow: visible;
}

.lv .lv-trace__list {
	position: relative;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

.lv .lv-trace__list::before {
	content: "";
	position: absolute;
	top: 11px;
	left: calc(100% / var(--lv-n) / 2);
	right: calc(100% / var(--lv-n) / 2);
	height: 1px;
	background: rgba(255, 255, 255, 0.5);
}

.lv .lv-trace__node {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: 12px;
	text-align: center;
}

.lv .lv-trace__node::before {
	content: none;
}

.lv .lv-trace__mark {
	position: relative;
	z-index: 1;
	display: block;
	flex: none;
	width: 11px;
	height: 11px;
	margin-block: 6px 5px;
	border-radius: 50%;
	background: #fff;
}

/* 分岐点：ひし形 */
.lv .lv-trace__node--origin .lv-trace__mark {
	width: 22px;
	height: 22px;
	margin-block: 0;
	border-radius: 0;
	background: var(--lv-sky);
	box-shadow: 0 0 0 9px rgba(140, 196, 234, 0.18);
	transform: rotate(45deg);
}

/* いま：輪 */
.lv .lv-trace__node--now .lv-trace__mark {
	width: 22px;
	height: 22px;
	margin-block: 0;
	border: 2px solid #fff;
	background: var(--lv-deep);
}

.lv .lv-trace__label {
	margin-top: 28px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

.lv .lv-trace__node--origin .lv-trace__label {
	color: var(--lv-sky);
}

.lv .lv-trace__text {
	margin-top: 28px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	line-height: 1.85;
}

.lv .lv-trace__label + .lv-trace__text {
	margin-top: 6px;
}

.lv .lv-why__end {
	margin-top: 112px;
	text-align: center;
}

.lv .lv-why__key {
	color: #fff;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.05em;
	font-feature-settings: "palt" 1;
}

.lv .lv-why__p {
	max-width: 640px;
	margin: 1.4em auto 0;
	font-size: 16px;
	line-height: 2.1;
}

.lv .lv-why__key + .lv-why__p {
	margin-top: 48px;
}

/* =============================================================
   サービス：3つを同じ並びで比べられるように（名前・料金・説明の高さをそろえる）
   ============================================================= */
.lv .lv-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto 1fr auto;
	column-gap: 24px;
	text-align: left;
}

.lv .lv-plan {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: 0;
	overflow: hidden;
	border: 1px solid var(--lv-line);
	border-radius: var(--lv-radius);
	background: #fff;
}

/* 継続コースだけ、頭を深い青に */
.lv .lv-plan--pick {
	border-color: var(--lv-deep);
	box-shadow: 0 0 0 1px var(--lv-deep);
}

.lv .lv-plan__head {
	padding: 36px 36px 28px;
	border-bottom: 1px solid var(--lv-line);
}

.lv .lv-plan--pick .lv-plan__head {
	border-bottom-color: var(--lv-deep);
	background: var(--lv-deep);
}

.lv .lv-plan__badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 1px 12px;
	border: 1px solid var(--lv-sky);
	border-radius: 999px;
	color: var(--lv-sky);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 0.12em;
}

.lv .lv-plan__name {
	color: var(--lv-ink);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.lv .lv-plan--pick .lv-plan__name {
	color: #fff;
}

.lv .lv-plan__term {
	margin-top: 6px;
	color: var(--lv-sub);
	font-size: 14px;
	letter-spacing: 0.04em;
}

.lv .lv-plan--pick .lv-plan__term {
	color: rgba(255, 255, 255, 0.82);
}

.lv .lv-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	padding: 28px 36px 0;
}

/* 料金の数字は、下層ページの料金と同じ書体 */
.lv .lv-price__yen {
	color: var(--lv-ink);
	font-family: var(--lv-serif);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.lv .lv-price__tax {
	color: var(--lv-sub);
	font-size: 12px;
	white-space: nowrap;
}

.lv .lv-plan__text {
	padding: 16px 36px 0;
	font-size: 15px;
	line-height: 2;
}

.lv .lv-plan__more {
	padding: 28px 36px 36px;
}

.lv .lv-plan .lv-btn {
	width: 100%;
	padding-inline: 16px;
	font-size: 14px;
}

/* =============================================================
   プロフィール：写真を左に大きく
   ============================================================= */
.lv .lv-profile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: #fff;
}

.lv .lv-profile__photo {
	position: relative;
	min-height: 680px;
	overflow: hidden;
	background: var(--lv-mist);
}

.lv .lv-profile__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

.lv .lv-profile__body {
	align-self: center;
	padding: var(--lv-sec) max(var(--lv-gutter), calc((100vw - var(--lv-wrap)) / 2)) var(--lv-sec) 88px;
}

.lv .lv-profile__name {
	margin-top: 40px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.14em;
}

/* 下層のプロフィールページの「TERADA MARI」と同じ扱い */
.lv .lv-profile__role {
	display: block;
	margin-top: 6px;
	color: var(--lv-blue);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lv .lv-profile__p {
	margin-top: 24px;
	font-size: 16px;
	line-height: 2.05;
}

.lv .lv-profile__key {
	margin-top: 32px;
	padding-left: 24px;
	border-left: 2px solid var(--lv-blue);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.85;
}

.lv .lv-profile__key + .lv-profile__p {
	margin-top: 32px;
}

.lv .lv-profile__more {
	margin-top: 44px;
}

/* =============================================================
   コラム
   ============================================================= */
.lv .lv-posts {
	border-top: 1px solid var(--lv-line);
}

.lv .lv-posts__item {
	border-bottom: 1px solid var(--lv-line);
}

.lv .lv-posts__link {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 24px;
	padding: 28px 0;
	color: var(--lv-ink);
	text-decoration: none;
}

.lv .lv-posts__date {
	color: var(--lv-sub);
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.lv .lv-posts__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.8;
	transition: color 0.2s ease;
}

.lv .lv-posts__link:hover .lv-posts__title {
	color: var(--lv-blue);
}

/* =============================================================
   よくある質問
   ============================================================= */
.lv .lv-faq {
	border-top: 1px solid var(--lv-line);
}

.lv .lv-faq__item {
	border-bottom: 1px solid var(--lv-line);
}

.lv .lv-faq__q {
	position: relative;
	padding: 28px 56px 28px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7;
	list-style: none;
	cursor: pointer;
}

.lv .lv-faq__q::-webkit-details-marker {
	display: none;
}

.lv .lv-faq__q::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background:
		linear-gradient(var(--lv-blue), var(--lv-blue)) center / 16px 2px no-repeat,
		linear-gradient(var(--lv-blue), var(--lv-blue)) center / 2px 16px no-repeat;
}

.lv .lv-faq__item[open] > .lv-faq__q::after {
	background: linear-gradient(var(--lv-blue), var(--lv-blue)) center / 16px 2px no-repeat;
}

.lv .lv-faq__a {
	padding: 0 56px 32px 0;
}

.lv .lv-faq__a p {
	font-size: 15px;
	line-height: 2.05;
}

.lv .lv-faq__a p + p {
	margin-top: 0.8em;
}

/* =============================================================
   タブレット（959px以下）
   ============================================================= */
@media screen and (max-width: 959px) {
	.lv .lv-mv {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.lv .lv-mv__text {
		padding-right: 40px;
	}

	.lv .lv-mv__lead {
		font-size: 15px;
	}

	.lv .lv-why__end {
		margin-top: 88px;
	}

	/* サービス：1列に並べる */
	.lv .lv-plans {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		row-gap: 24px;
		max-width: 560px;
		margin-inline: auto;
	}

	.lv .lv-plan {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}

	.lv .lv-plan__more {
		margin-top: auto;
	}

	.lv .lv-profile {
		grid-template-columns: minmax(0, 1fr);
	}

	.lv .lv-profile__photo {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.lv .lv-profile__body {
		width: 100%;
		max-width: calc(var(--lv-wrap) + var(--lv-gutter) * 2);
		margin-inline: auto;
		padding: 80px var(--lv-gutter) var(--lv-sec);
	}
}

/* =============================================================
   スマホ（767px以下）
   ============================================================= */
@media screen and (max-width: 767px) {
	/* メインビジュアル：写真が上、文字が下 */
	.lv .lv-mv {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.lv .lv-mv__media {
		order: -1;
		aspect-ratio: 4 / 3;
	}

	.lv .lv-mv__text {
		padding: 40px var(--lv-gutter) 56px;
	}

	.lv .lv-mv--noimage .lv-mv__text {
		padding: 80px var(--lv-gutter);
	}

	.lv .lv-mv__label {
		font-size: 13px;
	}

	.lv .lv-mv__catch {
		margin-top: 12px;
		font-size: 40px;
	}

	.lv .lv-mv__lead {
		margin-top: 18px;
		line-height: 1.9;
	}

	/* お悩み */
	.lv .lv-foryou::after {
		height: 48px;
	}

	.lv .lv-todo {
		padding: 4px 20px;
	}

	.lv .lv-todo__item {
		gap: 14px;
		padding: 20px 0;
	}

	.lv .lv-todo__box {
		width: 16px;
		height: 16px;
		margin-top: 7px;
	}

	.lv .lv-todo__text {
		font-size: 16px;
	}

	.lv .lv-close {
		margin-top: 40px;
		font-size: 16px;
	}

	/* 分岐点の図：縦に並べる（上が始まり、下がいま） */
	.lv .lv-trace {
		margin-top: 64px;
		padding-top: 0;
	}

	.lv .lv-trace__caption {
		position: static;
		margin-bottom: 32px;
		font-size: 13px;
	}

	.lv .lv-trace__fork,
	.lv .lv-trace__list::before {
		display: none;
	}

	.lv .lv-trace__list {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
		padding-left: 44px;
	}

	.lv .lv-trace__node {
		align-items: flex-start;
		padding-inline: 0;
		text-align: left;
	}

	/* 点と点をつなぐ縦の線 */
	.lv .lv-trace__node::before {
		content: "";
		position: absolute;
		top: 15px;
		left: -33px;
		width: 1px;
		height: calc(100% + 32px);
		background: rgba(255, 255, 255, 0.5);
	}

	.lv .lv-trace__node:last-child::before {
		display: none;
	}

	.lv .lv-trace__mark {
		position: absolute;
		top: 8px;
		left: -38.5px;
		margin: 0;
	}

	.lv .lv-trace__node--origin .lv-trace__mark,
	.lv .lv-trace__node--now .lv-trace__mark {
		top: 4px;
		left: -44px;
	}

	.lv .lv-trace__label {
		margin-top: 0;
		font-size: 18px;
	}

	.lv .lv-trace__text {
		margin-top: 0;
	}

	.lv .lv-why__end {
		margin-top: 72px;
		text-align: left;
	}

	.lv .lv-why__key {
		font-size: 21px;
	}

	.lv .lv-why__intro p,
	.lv .lv-why__p {
		margin-inline: 0;
		font-size: 15px;
		text-align: left;
	}

	.lv .lv-why__intro br,
	.lv .lv-why__p br {
		display: none;
	}

	/* サービス */
	.lv .lv-plan__head {
		padding: 32px 24px 24px;
	}

	.lv .lv-plan__price {
		padding: 24px 24px 0;
	}

	.lv .lv-plan__text {
		padding: 12px 24px 0;
	}

	.lv .lv-plan__more {
		padding: 24px 24px 32px;
	}

	.lv .lv-price__yen {
		font-size: 28px;
	}

	/* プロフィール */
	.lv .lv-profile__body {
		padding: 56px var(--lv-gutter) var(--lv-sec);
	}

	.lv .lv-profile__name {
		margin-top: 28px;
		font-size: 21px;
	}

	.lv .lv-profile__p {
		font-size: 15px;
	}

	.lv .lv-profile__key {
		padding-left: 18px;
		font-size: 17px;
	}

	/* コラム */
	.lv .lv-posts__link {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
		padding: 22px 0;
	}

	.lv .lv-posts__date {
		font-size: 13px;
	}

	.lv .lv-posts__title {
		font-size: 16px;
	}

	/* よくある質問 */
	.lv .lv-faq__q {
		padding: 22px 44px 22px 0;
		font-size: 16px;
	}

	.lv .lv-faq__q::after {
		right: 4px;
		width: 14px;
		height: 14px;
		margin-top: -7px;
	}

	.lv .lv-faq__a {
		padding: 0 0 24px;
	}

	.lv .lv-faq__a p {
		font-size: 14.5px;
	}
}