@charset "UTF-8";
/*
 * 振袖フェアLP 専用スタイル（template-lp-fair.php からのみ読み込む）
 *
 * デザインは幅 375px のモバイルカンバス。--u に「デザイン 1px 分の実寸」を持たせ、
 * すべての寸法を calc(N * var(--u)) で書くことで、カラム幅が変わっても比率が保たれる。
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ページ内リンクをスムーズに移動させる（このLPのみ） */
html {
	scroll-behavior: smooth;
}

/* 配色と寸法の基準。固定CTAは .lpf の外にあるため、変数はここで定義する。 */
.lpf-body {
	--u: calc(min(100vw, 375px) / 375);
	--terra: #d85f4a;
	--cream: #fff6cf;
	--lilac: #f6ecfe;
	--purple: #a178b4;
	--purple-deep: #7e65a5;
	--red: #e95757;
	--gold: #7c5c12;
	--gold-light: #c5ab70;
	--yellow: #ffff92;
	--lattice: #f7df84;

	/* 仕様書 6.7 のフォント指定。入手できないものは代替を当てている。 */
	--font-base: "Noto Sans JP", sans-serif;
	/*
	 * A P-OTF A1Gothic StdN / Std の代替。A1ゴシックは細いウェイトほど
	 * 端の丸みが目立ち、太いウェイトでは角ゴシックに見える。実測でも
	 * 細い箇所は Kosugi Maru、太い箇所は Noto Sans JP に一致したため、
	 * --font-a1（丸み・font-weight 400 固定）と --font-a1-b（太字）を
	 * 使い分ける。
	 */
	--font-a1: "Kosugi Maru", sans-serif;
	--font-a1-b: "Noto Sans JP", sans-serif;
	--font-tsukushi: "Zen Old Mincho", serif; /* FOT-TsukuAOldMin Pr6N の代替 */
	--font-din: Archivo, sans-serif;          /* DIN Next LT Pro / DIN Pro の代替 */
	--font-tomato: Nunito, sans-serif;        /* Tomato Round Condensed Oblique の代替 */
	--offwhite: #fffdf2;
	--ink: #4d4d4d;
	--cta-h: calc(64 * var(--u));
	--anchor-gap: calc(16 * var(--u));

	margin: 0;
	padding-bottom: var(--cta-h);
	background: #fffdf2;
	color: var(--ink);
	font-family: var(--font-base);
	-webkit-text-size-adjust: 100%;
}

.lpf {
	position: relative;
	z-index: 1;
	max-width: 375px;
	margin-inline: auto;
	overflow: hidden;
	background: #fff;
	font-size: calc(15 * var(--u));
	line-height: 1.7;
}

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

/* :where() で詳細度を 0 にし、個別クラスの指定を打ち消さないようにする */
.lpf :where(p, h2, h3, ul, li, figure, figcaption) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lpf-inner {
	padding-inline: calc(20 * var(--u));
}

/* ---------------------------------------------------------- 背景ブロック */

.lpf-terra {
	padding-block: calc(34 * var(--u)) calc(40 * var(--u));
	background: var(--terra);
	color: #fff;
}

.lpf-lilac {
	padding-block: calc(40 * var(--u));
	background: var(--lilac);
}

.lpf-cream {
	padding-block: calc(40 * var(--u));
	background: var(--cream);
}

.lpf-white {
	padding-block: calc(48 * var(--u));
	background: #fff;
}

.lpf-white--tight {
	padding-block: calc(24 * var(--u)) calc(48 * var(--u));
}

/* ---------------------------------------------------------- 共通パーツ */

/* 予約ボタン */
.lpf-cta {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	width: 100%;
	margin-block: calc(28 * var(--u));
	padding: calc(9 * var(--u)) calc(14 * var(--u));
	border: calc(3 * var(--u)) solid #fff;
	border-radius: 999px;
	background: var(--red);
	box-shadow: 0 calc(4 * var(--u)) 0 #fff;
	color: #fff;
	text-decoration: none;
}

.lpf-cta--purple {
	background: var(--purple);
}

.lpf-cta__tag {
	flex: none;
	padding: calc(3 * var(--u)) calc(12 * var(--u));
	border-radius: 999px;
	background: #fff;
	color: var(--red);
	font-size: calc(12 * var(--u));
	font-weight: 700;
	line-height: 1.4;
}

.lpf-cta--purple .lpf-cta__tag {
	color: var(--purple);
}

.lpf-cta__label {
	flex: 1;
	font-size: calc(18 * var(--u));
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
}

.lpf-cta::after {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	margin-right: calc(6 * var(--u));
	border-block: calc(6 * var(--u)) solid transparent;
	border-left: calc(10 * var(--u)) solid #fff;
}

/* 黄色いバッジ（両脇に斜線） */
.lpf-badge {
	position: relative;
	width: fit-content;
	margin: 0 auto calc(16 * var(--u));
	padding: calc(11 * var(--u)) calc(26 * var(--u));
	border-radius: 999px;
	background: var(--yellow);
	color: var(--terra);
	font-size: calc(18 * var(--u));
	font-weight: 700;
	line-height: 1.4;
}

.lpf-badge--spaced {
	margin-top: calc(48 * var(--u));
}

/* 左右に開く3本の強調線。上は外向きに上がり、中央は水平、下は外向きに下がる。 */
.lpf-badge::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-22 * var(--u));
	left: calc(-22 * var(--u));
	height: calc(34 * var(--u));
	transform: translateY(-50%);
	background:
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 34' fill='none' stroke='%23fff6cf' stroke-width='2'><path d='M2 1.8 12.2 8.6'/><path d='M1 15.8 12.2 15.8'/><path d='M12.2 25.4 2 32.2'/></svg>") no-repeat left center / calc(14 * var(--u)) 100%,
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 34' fill='none' stroke='%23fff6cf' stroke-width='2'><path d='M12 1.8 1.8 8.6'/><path d='M13 15.8 1.8 15.8'/><path d='M1.8 25.4 12 32.2'/></svg>") no-repeat right center / calc(14 * var(--u)) 100%;
}

/* 下向きの尻尾 */
.lpf-badge::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top: calc(6.3 * var(--u)) solid var(--yellow);
	border-inline: calc(5.5 * var(--u)) solid transparent;
}

/* 吹き出し（下向きの尻尾つき） */
.lpf-balloon {
	position: relative;
	width: fit-content;
	margin: 0 auto calc(24 * var(--u));
	padding: calc(7 * var(--u)) calc(28 * var(--u));
	border: calc(2.5 * var(--u)) solid var(--purple);
	border-radius: 999px;
	background: #fff;
	color: var(--purple);
	font-family: var(--font-a1-b);
	font-size: calc(23.03 * var(--u));
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.4;
}

/* 白い正方形を回転させ、下側2辺だけを見せて枠と一体化した尻尾にする。 */
.lpf-balloon::after {
	content: "";
	position: absolute;
	bottom: calc(-7 * var(--u));
	left: 50%;
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
	border-right: calc(2.5 * var(--u)) solid var(--purple);
	border-bottom: calc(2.5 * var(--u)) solid var(--purple);
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
}

.lpf-balloon--yellow {
	border-color: var(--yellow);
	background: var(--yellow);
	color: var(--terra);
	font-family: var(--font-base);
	font-size: calc(17.7 * var(--u));
	font-weight: 700;
	letter-spacing: normal;
}

.lpf-balloon--yellow::after {
	border-color: var(--yellow);
	background: var(--yellow);
}

/* 見出し */
.lpf-h2-gothic {
	margin-bottom: calc(18 * var(--u));
	color: #fff;
	font-size: calc(54.45 * var(--u));
	font-weight: 900;
	letter-spacing: .01em;
	line-height: 1.25;
	text-align: center;
}

/*
 * T-BENEFIT-TITLE。指定フォント bananaslip は使用許諾契約でサーバへの
 * アップロードが禁じられているため、許諾されているアウトライン化で再現する。
 * 幅はフォントサイズ 54.45px でのアドバンス幅 3.98em に相当する。
 */
/* T-BENEFIT-TITLE と同じくバナナスリップ。ライセンス上アウトライン化して使う。 */
.lpf-h2-gothic--free img {
	width: calc(270.7 * var(--u));
	margin-inline: auto;
}

.lpf-trial__no span img {
	width: calc(36.3 * var(--u));
}

.lpf-h2-gothic--benefit img {
	width: calc(216.71 * var(--u));
	margin-inline: auto;
}

.lpf-h2-gothic--dark {
	color: var(--ink);
	font-family: var(--font-a1-b);
	font-weight: 500;
	font-size: calc(27 * var(--u));
	letter-spacing: -.01em;
}

/* 文字の下側だけを塗る白いマーカー */
.lpf-marker {
	padding-inline: calc(4 * var(--u));
	background: linear-gradient(#fff 0 0) no-repeat 0 100% / 100% calc(12 * var(--u));
}

.lpf-marker--purple {
	color: var(--purple);
}

.lpf-h2-gothic--lilac {
	color: var(--purple);
	font-family: var(--font-a1);
	font-weight: 400;
	font-size: calc(27 * var(--u));
}

.lpf-h2-gothic--flow {
	font-family: var(--font-a1-b);
	font-weight: 500;
}

.lpf-h2-gothic--underline {
	width: fit-content;
	margin-inline: auto;
	padding-bottom: calc(4 * var(--u));
	border-bottom: calc(2 * var(--u)) solid var(--purple);
	font-family: var(--font-a1-b);
	font-size: calc(28 * var(--u));
	font-weight: 500;
}

.lpf-h2-mincho {
	margin-bottom: calc(20 * var(--u));
	color: var(--purple);
	font-family: var(--font-a1-b);
	font-size: calc(28 * var(--u));
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.5;
	text-align: center;
}

.lpf-h2-mincho::after {
	content: "";
	display: block;
	width: calc(330 * var(--u));
	max-width: 100%;
	height: calc(2 * var(--u));
	margin: calc(16 * var(--u)) auto 0;
	background: var(--purple);
}

.lpf-h2-mincho--boxed {
	color: var(--gold);
	font-family: var(--font-tsukushi);
	font-size: calc(37.79 * var(--u));
	font-weight: 700;
}

/* 1行目の文字の下側だけを塗る帯 */
.lpf-h2-mincho--boxed span:first-child {
	padding-inline: calc(3.8 * var(--u));
	background: linear-gradient(#f2efe8 0 0) no-repeat 0 100% / 100% calc(13 * var(--u));
}

.lpf-h2-mincho--gold {
	color: var(--gold);
	font-family: var(--font-tsukushi);
}

.lpf-h2-mincho--boxed::after,
.lpf-h2-mincho--gold::after {
	display: none;
}

.lpf-h2-mincho--gold {
	margin-bottom: calc(24 * var(--u));
	font-size: calc(41.12 * var(--u));
	font-weight: 700;
	letter-spacing: -.09em;
}

.lpf-eyebrow {
	position: relative;
	margin-bottom: calc(14 * var(--u));
	padding-bottom: calc(10 * var(--u));
	color: var(--gold);
	font-family: var(--font-tsukushi);
	font-size: calc(24.47 * var(--u));
	font-weight: 500;
	letter-spacing: .16em;
	text-align: center;
}

.lpf-eyebrow::before {
	content: "";
	position: absolute;
	bottom: calc(4 * var(--u));
	left: 50%;
	width: calc(300 * var(--u));
	height: calc(1.647 * var(--u));
	transform: translateX(-50%);
	background: var(--gold);
}

.lpf-eyebrow::after {
	content: "";
	position: absolute;
	bottom: calc(-5.38 * var(--u));
	left: 50%;
	transform: translateX(-50%);
	border-top: calc(9.88 * var(--u)) solid var(--gold);
	border-inline: calc(7.139 * var(--u)) solid transparent;
}

/* 本文 */
.lpf-lead {
	font-size: calc(16 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}

.lpf-lead--center {
	text-align: center;
}

/*
 * T-BENEFIT-COPY。サイズは記号・文末で異なるため span 単位で指定する。
 * 指定フォント A P-OTF A1Gothic StdN は入手できないため、ファミリーは
 * .lpf-body から Zen Kaku Gothic New を継承する。
 */
.lpf-benefit-copy {
	font-family: var(--font-a1-b);
	font-size: calc(24 * var(--u));
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1.4;
	text-align: center;
}

.lpf-benefit-copy__amp {
	font-size: calc(18 * var(--u));
}

.lpf-benefit-copy__tail {
	font-size: calc(20 * var(--u));
}

.lpf-lead--dark {
	color: var(--ink);
	text-align: center;
}

.lpf-lead--left {
	text-align: left;
}

.lpf-lead--flow {
	font-size: calc(14 * var(--u));
}

.lpf-note {
	margin-top: calc(8 * var(--u));
	font-size: calc(10 * var(--u));
	line-height: 1.6;
}

.lpf-note--dark {
	color: var(--ink);
}

.lpf-mark-yellow {
	background: var(--yellow);
	color: var(--terra);
}

.lpf-mark-purple {
	padding-inline: calc(8 * var(--u));
	background: var(--purple);
	color: var(--yellow);
}

.lpf-card {
	border-radius: calc(14 * var(--u));
	background: #fff;
}

/* 「さらに！」 */
.lpf-more {
	position: relative;
	font-family: var(--font-a1-b);
	width: fit-content;
	margin: calc(40 * var(--u)) auto calc(20 * var(--u));
	padding-inline: calc(18 * var(--u));
	font-size: calc(27.36 * var(--u));
	font-weight: 500;
}

/* 左右2本ずつの斜線。外側が長く、内側が短い。 */
.lpf-more::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-28 * var(--u));
	left: calc(-28 * var(--u));
	height: calc(34 * var(--u));
	transform: translateY(-50%);
	background:
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 34' fill='none' stroke='%23fff' stroke-width='2'><path d='M1.3 1 20.5 32.5'/><path d='M18 11.7 27 32.5'/></svg>") no-repeat left center / calc(28 * var(--u)) 100%,
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 34' fill='none' stroke='%23fff' stroke-width='2'><path d='M26.7 1 7.5 32.5'/><path d='M10 11.7 1 32.5'/></svg>") no-repeat right center / calc(28 * var(--u)) 100%;
}

/* 手描きの下線 */
.lpf-more::after {
	content: "";
	position: absolute;
	top: calc(100% - 4 * var(--u));
	left: 50%;
	width: calc(195 * var(--u));
	height: calc(17 * var(--u));
	transform: translateX(-50%);
	background: url("../img/lp-fair/underline-swoosh.png") no-repeat center / contain;
}

/* ---------------------------------------------------------- ヒーロー */

.lpf-hero {
	background: var(--cream);
}

.lpf-hero__title {
	margin: 0;
}

.lpf-hero__visual {
	width: 100%;
}

.lpf-hero__body {
	padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(30 * var(--u));
	text-align: center;
}

.lpf-hero__lead {
	color: var(--purple);
	font-size: calc(24.5 * var(--u));
	font-weight: 500;
	line-height: 1.6;
}

.lpf-hero__lead .lpf-mark-purple {
	display: inline-block;
	position: relative;
	margin-top: calc(4 * var(--u));
}

/* 帯の左右に開く2本ずつの斜線。外側が長く、内側が短い。 */
.lpf-hero__lead .lpf-mark-purple::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-30 * var(--u));
	left: calc(-30 * var(--u));
	height: calc(32 * var(--u));
	transform: translateY(calc(-50% - 5.3 * var(--u)));
	background:
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32' fill='none' stroke='%23a178b4' stroke-width='1.6'><path d='M1 1 18.7 30.4'/><path d='M16.7 10.9 25 30.4'/></svg>") no-repeat left center / calc(26 * var(--u)) 100%,
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32' fill='none' stroke='%23a178b4' stroke-width='1.6'><path d='M25 1 7.3 30.4'/><path d='M9.3 10.9 1 30.4'/></svg>") no-repeat right center / calc(26 * var(--u)) 100%;
}

.lpf-hero__sub {
	margin-top: calc(12 * var(--u));
	color: var(--purple);
	font-size: calc(15 * var(--u));
	font-weight: 500;
}

.lpf-hero .lpf-cta {
	margin-bottom: 0;
}

/* ---------------------------------------------------------- 無料体験カード */

.lpf-trials {
	display: grid;
	gap: calc(10 * var(--u));
	margin-top: calc(20 * var(--u));
}

.lpf-trial {
	display: flex;
	overflow: hidden;
	border-radius: calc(12 * var(--u));
	background: #fff;
}

.lpf-trial__no {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(66 * var(--u));
	background:
		repeating-linear-gradient(45deg, var(--lattice) 0 calc(1.7 * var(--u)), transparent calc(1.7 * var(--u)) calc(24.7 * var(--u))),
		repeating-linear-gradient(-45deg, var(--lattice) 0 calc(1.7 * var(--u)), transparent calc(1.7 * var(--u)) calc(24.7 * var(--u))),
		var(--yellow);
	color: var(--terra);
}

.lpf-trial__no span {
	font-size: calc(12 * var(--u));
	font-weight: 700;
	letter-spacing: .04em;
}

.lpf-trial__no b {
	font-family: var(--font-din);
	-webkit-text-stroke: calc(1 * var(--u)) var(--terra);
	color: #fff;
	font-size: calc(32 * var(--u));
	font-weight: 900;
	line-height: 1.1;
}

.lpf-trial__body {
	padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u));
	color: #652418;
}

.lpf-trial__catch {
	font-size: calc(12 * var(--u));
	font-weight: 700;
	line-height: 1.4;
}

.lpf-trial__title {
	margin-block: calc(1 * var(--u)) calc(5 * var(--u));
	color: var(--red);
	font-size: calc(22 * var(--u));
	font-weight: 700;
	line-height: 1.2;
}

.lpf-trial__dates li {
	position: relative;
	padding-left: calc(13 * var(--u));
	font-size: calc(10 * var(--u));
	line-height: 1.55;
}

.lpf-trial__dates li::before {
	content: "";
	position: absolute;
	top: calc(9 * var(--u));
	left: calc(2 * var(--u));
	width: calc(4 * var(--u));
	height: calc(4 * var(--u));
	border-radius: 50%;
	background: var(--ink);
}

/* ---------------------------------------------------------- 和牛・来場特典 */

/*
 * 白いカード・2枚の写真・黄色の円・ラベルはデザイン上ひとかたまりの構図で、
 * 指定書体（FOT-TsukuAntiqueSGo Std）も入手できないため画像で持つ。
 * カードの角丸の外側はセクション背景色を焼き込んである。
 */
.lpf-beef {
	margin-top: calc(20 * var(--u));
}

.lpf-beef img {
	display: block;
	width: 100%;
	height: auto;
}

.lpf-choice {
	display: flex;
	position: relative;
	gap: calc(12 * var(--u));
	margin-top: calc(20 * var(--u));
}

.lpf-choice__item {
	flex: 1;
	padding: calc(12 * var(--u)) calc(10 * var(--u));
	color: var(--purple-deep);
	font-size: calc(14 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.lpf-choice__item img {
	width: 100%;
	margin-bottom: calc(6 * var(--u));
}

.lpf-choice__or {
	display: grid;
	position: absolute;
	top: 50%;
	left: 50%;
	place-items: center;
	width: calc(36 * var(--u));
	height: calc(36 * var(--u));
	transform: translate(-50%, -50%);
	border: calc(2 * var(--u)) solid var(--terra);
	border-radius: 50%;
	background: #fff;
	color: var(--terra);
	font-family: var(--font-a1);
	font-size: calc(19.83 * var(--u));
	font-weight: 400;
	line-height: 1;
}

/* ---------------------------------------------------------- 成約特典リスト */

.lpf-benefits {
	overflow: hidden;
	border-radius: calc(10 * var(--u));
	background: #fff;
}

.lpf-benefits li {
	padding: calc(14 * var(--u)) calc(16 * var(--u));
}

.lpf-benefits > li + li {
	border-top: calc(1 * var(--u)) solid #ece4f0;
}

.lpf-benefits__title {
	color: var(--ink);
	font-family: var(--font-a1-b);
	font-size: calc(21 * var(--u));
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.4;
}

.lpf-benefits__title b {
	display: inline-block;
	color: var(--red);
	font-size: calc(24.4 * var(--u));
	font-weight: 500;
	/* A1ゴシックの数字・かなは Noto より平体。デザイン実測比 5.751/5.300 で横に伸ばす。 */
	transform: scaleX(1.085);
	transform-origin: 0 50%;
}

.lpf-benefits__note {
	margin-top: calc(2 * var(--u));
	font-family: var(--font-a1-b);
	font-size: calc(12 * var(--u));
	line-height: 1.5;
}

.lpf-benefits__tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(6 * var(--u)) calc(16 * var(--u));
	margin-top: calc(4 * var(--u));
}

.lpf-benefits__tags li {
	position: relative;
	padding: 0 0 0 calc(14 * var(--u));
	border: 0;
	font-family: var(--font-a1-b);
	font-size: calc(12 * var(--u));
}

.lpf-benefits__tags li::before {
	content: "";
	position: absolute;
	top: calc(8 * var(--u));
	left: 0;
	width: calc(7 * var(--u));
	height: calc(7 * var(--u));
	border-radius: 50%;
	background: var(--purple);
}

/* ---------------------------------------------------------- Point */

.lpf-point {
	margin-block: calc(30 * var(--u));
}

.lpf-point__figure {
	position: relative;
	margin-bottom: calc(14 * var(--u));
}

.lpf-point__figure img {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* --right は写真が右端まで抜け、左に余白。--left はその左右反転。
   ナンバーは余白側に置き、写真に一部隠れる。 */
.lpf-point__figure--right {
	margin-left: calc(70 * var(--u));
}

.lpf-point__figure--right img {
	border-top-left-radius: calc(64 * var(--u));
	border-bottom-left-radius: calc(64 * var(--u));
}

.lpf-point__figure--left {
	margin-right: calc(64 * var(--u));
}

.lpf-point__figure--left img {
	border-top-right-radius: calc(64 * var(--u));
	border-bottom-right-radius: calc(64 * var(--u));
}

/*
 * Point 番号。Point と数字は中央揃えで積む。写真に重なる部分が読めるよう、
 * 文字の周囲にセクション背景色（クリーム）の縁取りを付ける。
 * 縁取りは text-shadow の 8 方向重ねで作る（-webkit-text-stroke は
 * 塗りの内側を侵食し、paint-order は Firefox が HTML テキストに未対応のため）。
 */
.lpf-point__no {
	position: absolute;
	z-index: 2;
	bottom: calc(-6 * var(--u));
	color: var(--purple);
	font-family: "Playfair Display", serif;
	line-height: 1;
	text-align: center;
	text-shadow:
		calc(1.2 * var(--u)) 0 var(--cream),
		calc(-1.2 * var(--u)) 0 var(--cream),
		0 calc(1.2 * var(--u)) var(--cream),
		0 calc(-1.2 * var(--u)) var(--cream),
		calc(.85 * var(--u)) calc(.85 * var(--u)) var(--cream),
		calc(-.85 * var(--u)) calc(.85 * var(--u)) var(--cream),
		calc(.85 * var(--u)) calc(-.85 * var(--u)) var(--cream),
		calc(-.85 * var(--u)) calc(-.85 * var(--u)) var(--cream);
}

.lpf-point__figure--right .lpf-point__no {
	left: calc(-50 * var(--u));
}

.lpf-point__figure--left .lpf-point__no {
	right: calc(-44 * var(--u));
}

.lpf-point__no span {
	display: block;
	font-size: calc(22.68 * var(--u));
	font-weight: 600;
}

.lpf-point__no b {
	font-size: calc(62.7 * var(--u));
	font-weight: 600;
}

.lpf-point__title {
	margin-bottom: calc(8 * var(--u));
	color: var(--purple);
	font-size: calc(26 * var(--u));
	font-weight: 700;
}

.lpf-point__text {
	color: #63625d;
	font-size: calc(14 * var(--u));
}

/* ---------------------------------------------------------- ブランド振袖 */

.lpf-brandgrid {
	display: grid;
	gap: calc(18 * var(--u)) calc(10 * var(--u));
	grid-template-columns: repeat(3, 1fr);
	margin-top: calc(24 * var(--u));
}

/* ロゴの実寸はブランドごとに違う。--logo-w にデザイン実測の幅を持たせる。 */
.lpf-brandgrid__logo {
	width: calc(var(--logo-w) * var(--u));
	max-width: 100%;
	height: auto;
	margin-bottom: calc(4 * var(--u));
}

.lpf-brandgrid__photo {
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 50% / 42%;
	border: calc(1.5 * var(--u)) solid var(--gold);
	object-fit: cover;
}

.lpf-brand {
	margin-top: calc(46 * var(--u));
	text-align: center;
}

/* --logo-w はデザイン実測の見た目の幅（px）。ブランドごとに template 側で渡す。 */
.lpf-brand__logo {
	width: calc(var(--logo-w) * var(--u));
	height: auto;
	margin: 0 auto calc(18 * var(--u));
}

.lpf-brand__frame {
	position: relative;
	padding-inline: calc(34 * var(--u));
}

.lpf-brand__frame::before,
.lpf-brand__frame::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.lpf-brand__frame::before {
	top: calc(-6.58 * var(--u));
	left: calc(34.43 * var(--u));
	width: calc(59 * var(--u));
	height: calc(57 * var(--u));
	background-image: url("../img/lp-fair/brand-sparkles-left.svg");
}

.lpf-brand__frame::after {
	right: calc(30.57 * var(--u));
	bottom: calc(-2.3 * var(--u));
	width: calc(47 * var(--u));
	height: calc(47 * var(--u));
	background-image: url("../img/lp-fair/brand-sparkle-right.svg");
}

.lpf-brand__oval {
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border: calc(3 * var(--u)) solid var(--gold);
	border-radius: 50% / 38%;
}

.lpf-brand__oval img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* T-BRAND-LABEL */
.lpf-brand__side {
	position: absolute;
	top: 50%;
	color: var(--gold);
	font-family: "Playfair Display", serif;
	font-size: calc(12.56 * var(--u));
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.2;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
}

.lpf-brand__side--l {
	left: calc(6 * var(--u));
	transform: translateY(-50%) rotate(180deg);
}

.lpf-brand__side--r {
	right: calc(6 * var(--u));
}

/* T-PRODUCT-PRICE。品番と価格は Figma 上で同一テキストノード。 */
.lpf-brand__code,
.lpf-brand__price {
	color: var(--ink);
	font-family: "Noto Sans JP", sans-serif;
	font-size: calc(8.38 * var(--u));
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
	text-align: center;
}

.lpf-brand__code {
	margin-top: calc(14 * var(--u));
}

.lpf-dots {
	display: flex;
	gap: calc(14 * var(--u));
	justify-content: center;
	margin-top: calc(14 * var(--u));
}

.lpf-dots button {
	display: block;
	width: calc(14 * var(--u));
	height: calc(14 * var(--u));
	padding: 0;
	border: calc(1.5 * var(--u)) solid var(--gold);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.lpf-dots button.is-current {
	background: var(--gold-light);
}

/* 画面には出さず、読み上げと検索にだけ残す */
.lpf-visually-hidden {
	position: absolute;
	overflow: hidden;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	white-space: nowrap;
}

/* ---------------------------------------------------------- カテゴリ */

.lpf-catgrid {
	display: grid;
	gap: calc(7.75 * var(--u));
	grid-template-columns: 1fr 1fr;
	margin-top: calc(20 * var(--u));
}

/*
 * 見出しワード（Baskerville / Gwendolyn 等の指定書体が入手できない）と
 * 2枚の写真は重なり合った1つの版面なので、ブロックごと画像で持つ。
 * 品番・価格はスクリーンリーダー用にテキストでも置いてある。
 */
.lpf-cat {
	margin-top: calc(63 * var(--u));
}

.lpf-cat--cool {
	margin-top: calc(82 * var(--u));
}

.lpf-cat__image {
	width: 100%;
}


/* ---------------------------------------------------------- レンタルフルセット */

.lpf-set {
	position: relative;
	padding-top: calc(58 * var(--u));
}

/* 指定書体が入手できないため画像。セクション背景色を焼き込んである。 */
.lpf-set__watermark {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.lpf-set__title {
	position: relative;
	margin-bottom: calc(4 * var(--u));
	z-index: 0;
	color: #fff;
	font-size: calc(30.33 * var(--u));
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.2;
	white-space: nowrap;
}

/* 手描きの波線。SVG のベクターパスをそのまま書き出したもので、文字の下端に少し重なる。 */
.lpf-set__title::after {
	content: "";
	position: absolute;
	bottom: calc(-8 * var(--u));
	left: 50%;
	z-index: -1;
	width: calc(339.5 * var(--u));
	height: calc(18.5 * var(--u));
	transform: translateX(-50%);
	background: url("../img/lp-fair/underline-set.png") no-repeat center / contain;
}

.lpf-set__price {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: calc(7.3 * var(--u));
	margin-bottom: calc(14 * var(--u));
	color: #fff;
}

.lpf-set__price b {
	font-family: var(--font-din);
	font-size: calc(73.77 * var(--u));
	font-style: italic;
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: .95;
}

.lpf-set__price span {
	display: flex;
	flex-direction: column;
	gap: calc(4.8 * var(--u));
	margin-bottom: calc(4 * var(--u));
	font-family: "Gothic A1", sans-serif;
	font-size: calc(30.69 * var(--u));
	font-weight: 700;
	line-height: 1;
}

.lpf-set__price i {
	font-family: var(--font-a1);
	font-size: calc(14.53 * var(--u));
	font-style: normal;
	font-weight: 400;
}

.lpf-set__lead {
	font-family: var(--font-a1);
	font-weight: 400;
}

.lpf-set .lpf-note {
	letter-spacing: -.04em;
	white-space: nowrap;
}

.lpf-set__card {
	overflow: hidden;
	margin-top: calc(18 * var(--u));
}

/* ---------------------------------------------------------- 流れ */

.lpf-flow {
	margin-top: calc(22 * var(--u));
	padding: calc(24 * var(--u)) calc(18 * var(--u));
}

.lpf-flow__group {
	position: relative;
	padding-left: calc(22 * var(--u));
}

.lpf-flow__group::before {
	content: "";
	position: absolute;
	top: calc(6 * var(--u));
	bottom: 0;
	left: calc(5 * var(--u));
	width: calc(2 * var(--u));
	background: var(--purple);
}

.lpf-flow__group:last-child::before {
	bottom: auto;
	height: calc(30 * var(--u));
}

.lpf-flow__when {
	position: relative;
	margin-bottom: calc(8 * var(--u));
	color: var(--purple);
	font-family: var(--font-a1-b);
	font-size: calc(16 * var(--u));
	font-weight: 800;
}

.lpf-flow__when::before {
	content: "";
	position: absolute;
	top: calc(6 * var(--u));
	left: calc(-22 * var(--u));
	width: calc(12 * var(--u));
	height: calc(12 * var(--u));
	border: calc(2 * var(--u)) solid var(--purple);
	border-radius: 50%;
	background: #fff;
}

.lpf-flow__step {
	margin-bottom: calc(16 * var(--u));
	padding-left: calc(12 * var(--u));
}

.lpf-flow__head {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--u));
	margin-bottom: calc(4 * var(--u));
}

.lpf-flow__no {
	padding: calc(2 * var(--u)) calc(9 * var(--u));
	border-radius: calc(5 * var(--u));
	background: var(--purple);
	color: #fff;
	font-family: var(--font-a1-b);
	font-size: calc(12 * var(--u));
	font-weight: 800;
}

.lpf-flow__head b {
	color: var(--ink);
	font-family: var(--font-a1-b);
	font-size: calc(18 * var(--u));
	font-weight: 800;
	letter-spacing: .02em;
}

.lpf-flow__text {
	color: var(--ink);
	font-size: calc(12 * var(--u));
	line-height: 1.7;
}

/* 両脇に「く」の字の括弧がつくキャッチ */
.lpf-quoted {
	position: relative;
	width: fit-content;
	margin: calc(24 * var(--u)) auto 0;
	padding-inline: calc(22 * var(--u));
	color: var(--purple);
	font-family: var(--font-a1);
	font-size: calc(16 * var(--u));
	font-weight: 400;
	text-align: center;
}

.lpf-quoted::before,
.lpf-quoted::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(12 * var(--u));
	height: calc(42.7 * var(--u));
	transform: translateY(-50%);
	border-left: calc(1.3 * var(--u)) solid var(--purple);
}

/* 下へ向かって内側に閉じる向き */
.lpf-quoted::before {
	right: calc(100% - 12 * var(--u));
	rotate: -14.5deg;
}

.lpf-quoted::after {
	left: calc(100% - 12 * var(--u));
	rotate: 14.5deg;
}

/* ---------------------------------------------------------- 店舗情報 */

.lpf-map {
	width: calc(310 * var(--u));
	margin: calc(20 * var(--u)) auto;
}

.lpf-stores li {
	border-top: calc(1 * var(--u)) solid #e7e7e7;
}

.lpf-stores li:last-child {
	border-bottom: calc(1 * var(--u)) solid #e7e7e7;
}

.lpf-stores__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(15 * var(--u)) calc(6 * var(--u));
	color: var(--ink);
	font-size: calc(14 * var(--u));
	text-decoration: none;
}

.lpf-stores__link::after {
	content: "";
	width: 0;
	height: 0;
	border-block: calc(6 * var(--u)) solid transparent;
	border-left: calc(9 * var(--u)) solid var(--purple);
}

.lpf-stores a.lpf-stores__link {
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.lpf-stores a.lpf-stores__link::after {
	transition: transform .2s ease;
}

.lpf-stores a.lpf-stores__link:hover,
.lpf-stores a.lpf-stores__link:focus-visible {
	color: var(--purple);
	background: #f8effb;
}

.lpf-stores a.lpf-stores__link:hover::after,
.lpf-stores a.lpf-stores__link:focus-visible::after {
	transform: translateX(calc(3 * var(--u)));
}

.lpf-stores a.lpf-stores__link:focus-visible {
	outline: calc(2 * var(--u)) solid var(--purple);
	outline-offset: calc(-2 * var(--u));
}

/* ---------------------------------------------------------- PC背景（固定） */

/* 七宝柄をタイリングして敷き、スクロールしても動かさない。
   中央の 375px カラムだけが本文としてスクロールする。 */
.lpf-bg {
	position: fixed;
	z-index: 0;
	inset: 0;
	background: #fffdf2 url("../img/lp-fair/pc-bg-tile.png") repeat;
	background-size: 121px 121px;
}

/* ---------------------------------------------------------- 下部固定CTA */

.lpf-fixedcta {
	display: flex;
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 50%;
	gap: calc(10 * var(--u));
	width: 100%;
	max-width: 375px;
	height: var(--cta-h);
	padding: calc(10 * var(--u)) calc(14 * var(--u));
	transform: translateX(-50%);
	background: #fff;
	box-shadow: 0 calc(-2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .08);
}

/* T-FIXED-CTA */
.lpf-fixedcta__btn {
	display: grid;
	flex: 1;
	place-items: center;
	border: calc(2 * var(--u)) solid var(--gold);
	border-radius: 999px;
	background: linear-gradient(to bottom, #fff 0%, #fff8da 100%);
	color: var(--gold);
	font-family: "Noto Sans JP", sans-serif;
	font-size: calc(15 * var(--u));
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.6;
	text-align: center;
	text-decoration: none;
}

/* ページ内リンクの着地位置を少し下げ、見出しが画面上端に貼り付かないようにする */
.lpf [id] {
	scroll-margin-top: var(--anchor-gap);
}

/* ---------------------------------------------------------- カルーセル */

.lpf-carousel__viewport {
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}

.lpf-carousel__track {
	display: flex;
	transition: transform 300ms ease-out;
}

.lpf-carousel__slide {
	flex: 0 0 100%;
}

/* ロゴ欄の高さを固定して、ブランドごとに写真の開始位置が揃うようにする。 */
.lpf-brandgrid__link {
	display: grid;
	grid-template-rows: calc(34 * var(--u)) auto;
	align-items: end;
	justify-items: center;
	text-decoration: none;
}

.lpf-brandgrid__link::after {
	content: "";
	width: calc(37 * var(--u));
	height: calc(11 * var(--u));
	margin-top: calc(10 * var(--u));
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 11' fill='none'><path d='M0.5 0.5 18.5 10.5 36.5 0.5' stroke='%237C5C12'/></svg>") no-repeat center / contain;
}

/* ロゴは高さがまちまちなので、デザインどおり行の中央に置く */
.lpf-brandgrid__logo {
	align-self: center;
}

.lpf-catgrid a {
	display: block;
}