@charset "UTF-8";

/* 背景画像は .png.webp を直接指定している（2026-10 表示速度改修）。
   サーバーは同じURLでもブラウザに合わせて WebP と PNG を出し分けるが、Cloudflare はその区別をせずに
   最初に来た形式を1年キャッシュするため、PNG（大きいものは数MB）が配られることがある。
   新しい画像を足すときは、サーバーが自動で作る「〜.png.webp」ができてから（30分ほど）それを指定すること。 */
/* ======== CSS変数 ======== */
/* フォントは 'Noto Sans JP LP' など、このページ専用の名前（テンプレートの <head> の @font-face。2026-10-14）。
   使う文字を足したら results-oriented/fonts/README.md の手順でフォントを作り直すこと。 */
:root {
	--font-default: 'Noto Sans JP LP', 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
	--font-mincho: 'Shippori Mincho LP', 'Shippori Mincho', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', serif;
	/* --font-en の文字のうち和文（「営業日」「円」など）は Oswald に無いので、'Noto Sans JP LP' で出す。
	   以前は sans-serif に落ちて、端末の標準の書体になっていた（2026-11-07） */
	--font-en: 'Oswald LP', 'Oswald', 'Noto Sans JP LP', sans-serif;
	--c-primary: #4a5cc5;
	--c-primary-dark: #3a4ab0;
	--c-accent: #e8b434;
	--c-text: #1b1d25;
	--c-text-light: #434856;
	--c-bg-light: #f5f3fa;
	--c-bg-gradient: linear-gradient(135deg, #e8e4f5 0%, #d4e4f7 50%, #e8e4f5 100%);
	--c-dark: #2d2d3a;
	--c-white: #fff;
	--g-main: linear-gradient(135deg, #44a8ec, #7c57d8, #c948ac);
	--g-light: linear-gradient(135deg, #78c8ff, #b39deb, #dc82c8);
}

/* ======== ユーティリティ ======== */
.PC { display: inherit; }
.SP { display: none; }
.oswald { font-family: var(--font-en); }
.mincho { font-family: var(--font-mincho); }
mark.ks { color: currentColor; font-size: 80%; background: none; }

/* ======== グローバル ======== */
/* WordPress上では、このページのCSSが <div class="lparea"> の外（テーマのフッターなど）にも
   効いてしまうため、全体にかかる指定は :where(.lparea) で中だけに限定している。
   :where() は詳細度0なので、素のセレクタだったときと強さは変わらない。
   html / body だけは .lparea の先祖なので限定できない。rem の基準に必要な指定だけ残し、
   フォントや色は .lparea 側に持たせている。 */
html {
	font-size: 0.8333vw; /* 1100px基準: 1rem = 10px */
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
}
	@media screen and (min-width: 1100px) {
		html {
			font-size: 10px;
		}
	}
body {
	width: 100%;
	margin: 0 auto;
	font-size: 1rem; /* テーマ共通CSSの body{font-size:10px} 固定を打ち消し、html基準に戻す */
	line-break: strict;
}
:where(.lparea) img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
:where(.lparea) picture {
	display: inline-block;
	vertical-align: bottom;
}
:where(.lparea),
:where(.lparea) * {
	box-sizing: border-box;
}
:where(.lparea) h1,
:where(.lparea) h2,
:where(.lparea) h3,
:where(.lparea) h4,
:where(.lparea) p,
:where(.lparea) ul,
:where(.lparea) ol,
:where(.lparea) li,
:where(.lparea) figure,
:where(.lparea) figcaption,
:where(.lparea) dl,
:where(.lparea) dd,
:where(.lparea) dt {
	margin: 0;
	padding: 0;
}
:where(.lparea) ul[class],
:where(.lparea) ol[class] {
	list-style: none;
}
:where(.lparea) a {
	color: inherit;
	text-decoration: none;
}
:where(.lparea) a:where([class]) {
	display: inline-block;
}
	:where(.lparea) a:where([class]):hover {
		opacity: 0.8;
	}
:where(.lparea) *[class] > mark {
	color: inherit;
	background: none;
}
:where(.lparea) table {
	border-collapse: collapse;
}
:where(.lparea) img {
	display: block;
}


/* ======== WordPress（テーマ共通CSS）の打ち消し ========
   WordPress上ではテンプレートが lp_common.bundle.min.css を先に読み込む。
   そこに入っているリセットとID指定が、このページの指定より強く当たるため戻す。
   単体HTMLでは当たるものが無いので、見た目は変わらない。 */
/* リセットが strong / small に font:inherit を当てて既定の見た目を消すため戻す */
:where(.lparea) strong,
:where(.lparea) b {
	font-weight: bold;
}
:where(.lparea) small {
	font-size: smaller;
}
/* #header / #form のID指定（position:absolute / 背景ピンク）はクラス指定より強いので、
   ID付きの同じ値で上書きする */
#header.lp_h {
	position: relative;
	z-index: 100;
		top: auto;
		left: auto;
		right: auto;
}
#header.lp_h--fixed {
	position: fixed;
	z-index: 100;
		top: 0;
		left: 0;
		right: auto;
}
#form.lp_form {
	padding: 8rem 0;
	background: #f5f5f5;
}


/* ======== .lparea スコープ ======== */
.lparea {
	max-width: 2000px;
	margin: 0 auto;
	font-family: var(--font-default);
	color: var(--c-text); /* body から移動。テーマのフッターまで色が変わらないようにするため */
	overflow: hidden;
}


/* ======== HEADER（通常表示） ======== */
.lp_h {
	position: relative;
	z-index: 100;
	width: 100%;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08);
}
/* 固定追従用ヘッダー（JSでクローン生成） */
.lp_h--fixed {
	position: fixed;
	z-index: 100;
		top: 0;
		left: 0;
	width: 100%;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08);
	transform: translateY(-100%);
	transition: transform 0.4s ease;
}
	.lp_h--fixed.is-visible {
		transform: translateY(0);
	}
.lp_h__inner,
.lp_h--fixed .lp_h__inner {
	display: flex;
		justify-content: space-between;
		align-items: center;
	max-width: 1200px;
	height: 8rem;
	margin: 0 auto;
	padding: 0.7rem 2rem;
}
.lp_h__logo {
	flex-shrink: 0;
}
	.lp_h__logo img {
		width: auto;
		height: 6rem;
	}
.lp_h__nav {
	margin: 0 auto 0 5rem;
}
	.lp_h__nav ul {
		display: flex;
			gap: 2.4rem;
		list-style: none;
	}
		.lp_h__nav a {
			font-size: 1.5rem;
			font-weight: 500;
			letter-spacing: 0.04em;
		}
			.lp_h__nav a:hover {
				opacity: 0.8;
			}
.lp_h__action {
	display: flex;
		align-items: center;
		gap: 0.8rem;
	flex-shrink: 0;
}
.lp_h__action__bg {
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
}
.lp_h__tel,
.lp_h__btn {
	position: relative;
	display: flex;
		justify-content: center;
		align-items: center;
	width: 20rem;
	height: 5.2rem;
	padding: 0.8rem 2.4rem;
	color: var(--c-white) !important;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}
	.lp_h__tel span,
	.lp_h__btn span {
		position: relative;
	}
.lp_h__tel {
	font-family: var(--font-en);
	font-size: 2.4rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}


/* ======== FIRST VIEW ======== */
.lp_fv {
	position: relative;
	padding-top: 3.8rem;
	background: url("../images/fv_bg.png.webp") top center no-repeat;
	background-size: 200rem 100%;
	overflow: hidden;
}
.lp_fv__spheres {
	display: flex;
		justify-content: center;
		gap: 0 5rem;
	background: url("../images/fv_titbg01_88.png.webp") center center no-repeat;
	background-size: 3rem;
}
	.lp_fv__sphere {
		z-index: 2;
		display: flex;
			justify-content: center;
			align-items: center;
		width: 13.2rem;
		height: 13.2rem;
		text-align: center;
		background: url("../images/fv_titbg01_8.png.webp") top center no-repeat;
		background-size: 100% auto;
	}
		.lp_fv__sphere span {
			display: block;
			font-size: 2.2rem;
			font-weight: 500;
			line-height: 1.5;
			background: var(--g-main);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
.lp_fv__inner {
	position: relative;
		z-index: 3;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.lp_fv__titimg {
	pointer-events: none;
	position: relative;
		z-index: 9;
	width: 100%;
	margin: 0 auto 4rem;
}
	.lp_fv__titimg img {
		width: 100%;
	}
	/* PC・SPの画像は <picture> で出し分けている。picture は inline-block のままだと、
	   幅が画像の実寸までしか広がらないのでブロックにする（2026-10） */
	.lp_fv__titimg picture {
		display: block;
	}
	/* FVの見出し画像の上に重ねる文字（2026-10）
	   キャッチの一文と「制作実績 5,000本以上」は画像（fv_tit2.png / spfv_tit2.png）から外し、見える文字で表示している。
	   以前は画像に描かれた同じ文字の上に透明な文字（opacity:0）を重ねていたが、Googleの隠しテキストの例に当たる書き方なのでやめた。
	   位置と大きさは画像（PC 1200×505）の文字に合わせてある。位置は .lp_fv__titbox（＝画像の範囲）に対する割合、
	   大きさは .lp_fv__titbox の幅に対する割合（cqw。1cqw＝画像の幅の1%）なので、画面幅が変わっても画像と一緒に伸び縮みする。
	   cqw に対応していないブラウザは、その前の行の rem の値を使う。画像を作り直して文字の位置が変わったら、ここの値も合わせること */
	.lp_fv__titbox {
		position: relative;
			z-index: 9;
		container-type: inline-size;
		margin: 0 auto 4rem;
	}
		.lp_fv__titbox .lp_fv__titimg {
			z-index: 0;
			margin: 0;
		}
		/* 画像の白い丸の上に「制作実績」を出すため、文字は画像より手前に置く */
		.lp_fv__catch,
		.lp_fv__count__label,
		.lp_fv__count__num {
			z-index: 1;
		}
		.lp_fv__catch {
			position: absolute;
				top: 66.14%;
				left: 49.42%;
			translate: -50% 0;
			width: max-content;
			color: var(--c-text-light);
			font-size: 2rem;
			font-size: 1.6667cqw;
			font-weight: 500;
			line-height: 1.55;
			letter-spacing: 0.02em;
			text-align: center;
		}
		.lp_fv__count__label {
			position: absolute;
				top: 83.96%;
				left: 36.46%;
			translate: -50% 0;
			width: max-content;
			color: var(--c-text-light);
			font-size: 2.2rem;
			font-size: 1.8333cqw;
			font-weight: 700;
			line-height: 1.18;
			letter-spacing: 0.04em;
			text-align: center;
		}
		/* 「5,000」と「本以上」は、ひとつながりのグラデーション（--g-main）を文字の形で切り抜いている */
		.lp_fv__count__num {
			position: absolute;
				top: 77.62%;
				left: 40.58%;
			display: flex;
				align-items: flex-end;
			background: var(--g-main);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
			.lp_fv__count__num .oswald {
				font-size: 10.8rem;
				font-size: 9cqw;
				font-weight: 500;
				line-height: 1;
				letter-spacing: -0.007em;
			}
				.lp_fv__count__num .oswald mark {
					margin-right: -0.025em;
					color: inherit;
					font-size: 90%;
					background: none;
				}
			.lp_fv__count__unit {
				margin: 0 0 1rem 0.1rem;
				margin: 0 0 0.8333cqw 0.0833cqw;
				font-size: 2.4rem;
				font-size: 2cqw;
				font-weight: 700;
				line-height: 1.04;
				text-align: left;
			}
		/* Googleレビューの枠は画像のまま。中の文字は読み上げ用で、画面には出さない */
		.lp_fv__review {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
.lp_fv__results {
	display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 0 1rem;
	max-width: 1040px;
	margin: 0 auto 2.5rem;
	filter: drop-shadow(0 0.8rem 0.8rem rgb(35 35 102 / 0.3));
}
	.lp_fv__results__item {
		display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		width: 20rem;
		height: 10rem;
		line-height: 1;
		border-radius: 1rem;
		background: #1b1d25;
	}
		.lp_fv__results__label {
			/*margin-bottom: 0.2rem;*/
			color: #fff;
			font-size: 1.8rem;
			letter-spacing: 0.04em;
		}
		.lp_fv__results__val {
			font-family: 'Oswald LP', 'Oswald', 'Noto Sans JP LP', 'Noto Sans JP', sans-serif;
			font-size: 3rem;
			font-weight: 700;
			background: var(--g-light);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
			.lp_fv__results__val span {
				font-size: 4rem;
				font-weight: 500;
			}
		.lp_fv__results__cases {
			display: flex;
				align-items: center;
				gap: 1.2rem;
			width: 62rem;
			padding: 0rem 1rem;
			border-radius: 1rem;
			background: #fff;
			overflow: hidden;
		}
			.lp_fv__results__cases__label {
					flex-shrink: 0;
				display: flex;
					justify-content: center;
					align-items: center;
				width: 8rem;
				height: 8rem;
				color: #fff;
				font-size: 2.4rem;
				font-weight: 500;
				line-height: 1.1;
				letter-spacing: 0.02em;
				border-radius: 1rem;
				background: #1b1d25;
			}
			.lp_fv__results__cases__scroll {
				overflow: hidden;
			}
			.lp_fv__results__cases__list {
				display: flex;
					gap: 1rem;
				width: max-content;
				white-space: nowrap;
				animation: casesScroll 20s linear infinite;
			}
			@keyframes casesScroll {
				0% { transform: translateX(0); }
				100% { transform: translateX(-50%); }
			}
			.lp_fv__results__case {
					flex-shrink: 0;
				padding-right: 0.8rem;
				border-right: 1px solid #cbd5e3;
				font-size: 2.2rem;
				font-weight: 700;
			}
				.lp_fv__results__case mark {
					font-family: var(--font-en);
					font-size: 3.2rem;
					font-weight: 500;
				}
				.lp_fv__results__case small {
					display: block;
					font-size: 1.2rem;
					font-weight: 300;
					letter-spacing: 0.02em;
				}
.lp_fv__note {
	margin-bottom: 5rem;
	color: var(--c-text-light);
	font-size: 1.6rem;
	letter-spacing: 0.02em;
}


/* ======== FV サービス紹介 ======== */
.lp_fv__service {
	position: relative;
		z-index: 3;
	padding-bottom: 5.5rem;
}
.lp_fv__service__inner {
	max-width: 800px;
	margin: 0 auto;
	/*padding: 0 2rem;*/
}
.lp_fv__service__cards {
	display: flex;
		gap: 0 4rem;
		justify-content: center;
}
	.lp_fv__service__card {
		position: relative;
		display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		width: 38rem;
		height: 38rem;
		padding: 2.8rem 2.4rem;
		padding-top: 1.4rem;
		text-align: center;
		background: url("../images/fv_t01bg.png.webp");
		background-size: 100% 100%;
		border-radius: 100rem;
	}
	.lp_fv__service__card__icons {
		width: 6.2rem;
		margin-bottom: 0.6rem;
	}
		.lp_fv__service__card__icons img {
			width: 100%;
		}
	.lp_fv__service__card__label {
		margin-bottom: 1rem;
		padding-bottom: 0.6rem;
		color: #5372a1;
		font-size: 2.2rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		border-bottom: 1px dotted #5372a1;
	}
	.lp_fv__service__card__tit {
		margin-bottom: 1.2rem;
		color: #1b1d25;
		font-size: 2.8rem;
		font-weight: 700;
	}
	.lp_fv__service__card__desc {
		margin-bottom: 1rem;
		color: #434856;
		font-size: 1.6rem;
		line-height: 1.5;
		letter-spacing: 0.04em;
	}
.lp_fv__service__discount {
	position: absolute;
		top: 0rem;
		left: calc(100% - 7rem);
	display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	width: 16rem;
	height: 16rem;
	color: #fff;
	text-align: center;
	line-height: 1.1;
	border-radius: 100rem;
	background: var(--g-light);
}
	.lp_fv__service__discount p {
		font-size: 2.4rem;
		font-weight: 700;
	}
		.lp_fv__service__discount span {
			font-size: 5.4rem;
			font-weight: 500;
			background: none;
		}


/* ======== CTA共通 ======== */
.lp_cta {
	position: relative;
	z-index: 3;
	padding: 0rem 2rem 23rem 2rem;
	text-align: center;
}
.lp_cta__inner {
	max-width: 760px;
	margin: 0 auto;
}
.lp_cta__btns {
	display: flex;
		justify-content: center;
		gap: 0 0rem;
	margin-bottom: -3.4rem;
}
.lp_cta__btn {
	position: relative;
	display: flex;
		flex-shrink: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	width: 58rem;
	height: 20rem;
	padding-bottom: 5rem;
	color: var(--c-white);
	font-weight: 700;
	line-height: 1.2;
}
	.lp_cta__btn--primary {
			translate: 1.5rem 0;
		background: url("../images/fv_b01.png.webp") center center no-repeat;
		background-size: 100% 100%;
	}
		.lp_kd__cta .lp_cta__btn--primary {
				translate: 0;
			width: 60rem;
		}
	.lp_cta__btn--secondary {
			translate: -1.5rem 0;
		background: url("../images/fv_b02.png.webp") center center no-repeat;
		background-size: 100% 100%;
	}
	.lp_cta__btn:hover {
		opacity: 0.8;
	}
	/* 押せる範囲をボタンの見た目に合わせる（2026-10）
	   背景画像（fv_b01・fv_b02、580×200）は、ボタン本体の下に影のための透明な余白がある（本体は x 26〜553・y 10〜137）。
	   a の箱は画像全体の大きさなので、影の部分や、.lp_cta__btns の負の margin で重なっている下の「お急ぎの方はお電話で」の行、
	   スマホではもう一方のボタンの上端まで押せてしまい、PCでは電話番号のリンクが押せなかった。
	   箱は押せないようにし（pointer-events: none）、本体の形に合わせた ::before だけで押せるようにする。
	   ::before を押すと a を押したことになる（リンク・:hover は今までどおり）。背景画像を差し替えるときは位置を合わせ直すこと */
	.lp_cta__btn {
		pointer-events: none;
	}
		.lp_cta__btn::before {
			content: "";
			position: absolute;
				top: 5%;
				right: 4.5%;
				bottom: 31%;
				left: 4.5%;
			border-radius: 999px;
			pointer-events: auto;
		}
	.lp_cta__btn__sub {
		margin-bottom: 0.4rem;
		font-size: 1.7rem;
		font-weight: 400;
	}
	.lp_cta__btn__main {
		position: relative;
		font-size: 3.2rem;
		font-weight: 700;
		letter-spacing: 0.04em;
	}
.lp_cta__tel {
	color: var(--c-text-light);
	font-size: 1.8rem;
}
	.lp_cta__telico {
		display: inline-block;
		width: 1.8rem;
		height: auto;
		margin-right: 0.4rem;
		margin-bottom: 1rem;
		margin-left: 1rem;
		vertical-align: middle;
	}
	.lp_cta__tel .oswald {
		color: #434856;
		font-size: 2.4rem;
		font-weight: 400;
	}
	.lp_cta__tel a {
		color: var(--c-text);
		font-family: var(--font-en);
		font-size: 1.6rem;
		font-weight: 700;
	}
	.lp_cta__tel span {
		font-size: 90%;
	}




.dmm {
	position: relative;
	/* 納品HTMLでは .dmm .img（layer2.png）が高さを作っていたが、本番では外している。
	   中のロゴ流し（.dmm__swiper）と件数（.dmm__count）は position:absolute なので、
	   高さを与えないとセクションが潰れ、overflow:hidden で件数が切れて次に重なる。
	   件数の下端（top 6rem + margin 1rem + 約11.4rem = 約18.4rem）までを高さにする。
	   padding-bottom の 9rem は layer2.png の下の余白だったので、画像が無い今は 0。 */
	min-height: 19rem;
	padding-bottom: 0;
	overflow: hidden;
}
						.dmm:before {
							content: "";
							position: absolute;
								z-index: 5;
								top: 6rem;
							width: 100%;
							height: 18rem;
							background: #fff;
						}
	.dmm__swiper {
		position: absolute;
			z-index: 10 !important;
			top: 10rem;
		margin-bottom: 0;
		background: #fff;
	}
	.dmm__swiper .swiper-slide {
		width: auto;
	}
	.dmm__swiper .swiper-slide img {
		height: 5.1rem;
		width: auto;
	}
	.dmm__swiper .swiper-wrapper {
		transition-timing-function: linear;
	}
	.dmm__count {
		position: absolute;
			z-index: 10;
			top: 6rem;
			left: 50%;
			translate: -50% 0;
		display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.8rem;
		margin: 1rem 0;
		padding: 0 2rem;
		background: #fff;
	}
	.dmm__count__label {
		position: relative;
		display: flex;
			justify-content: center;
			align-items: center;
		width: 10rem;
		height: 10rem;
		border: 1px solid #357bf4;
		border-radius: 50%;
		color: #367bf3;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.333;
		letter-spacing: 0.08em;
		text-align: center;
	}
				.dmm__count__label:before {
					content: "";
					position: absolute;
						z-index: 10;
						rotate: 45deg;
						top: 50%;
						left: 50%;
						translate: -50% -50%;
					width: 11rem;
					height: 1.5rem;
					background: #fff;
				}
		.dmm__count__label span {
			position: relative;
				z-index: 11;
		}
	.dmm__count__num {
		font-family: var(--font-en);
		font-size: 11.4rem;
		font-weight: 500;
		line-height: 1;
		color: #357bf4;
	}
	.dmm__count__unit {
		display: inline-block;
		font-family: var(--font-jp);
		font-size: 4.6rem;
		font-weight: 700;
		color: #357bf4;
	}
		.dmm__count__unit small {
			display: block;
			font-size: 2.1rem;
			letter-spacing: 0.06em;
		}
	.dmm .img {
		display: flex;
			justify-content: center;
		min-width: 200rem;
		max-width: none;
		height: auto;
		margin-left: 50%;
		transform: translateX(-50%);
	}




/* ======== 私たちの実力 ======== */
.lp_jr {
	padding: 0rem 0 6rem 0;
	background: var(--c-white);
}
.lp_jr__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	text-align: center;
}
.lp_jr__tit {
	position: relative;
	margin-bottom: 0.8rem;
	font-size: 5.4rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}
	.lp_jr__tit .mincho {
		margin-right: 1rem;
		padding-left: 2rem;
		font-size: 8.4rem;
		font-weight: 500;
		background: url("../images/jr_titbg.png.webp") center bottom no-repeat;
		background-size: 100% auto;
	}
.lp_jr__sub {
	margin-bottom: 5rem;
	color: var(--c-text-light);
	font-size: 2rem;
}

/* 対応モール・サーバー */
.lp_jr__mall {
	width: 110rem;
	margin: 0 auto;
	margin-bottom: 4.8rem;
	padding: 4rem 5.5rem;
	box-shadow: 0 2rem 2rem rgb(0 58 127 / 0.2);
}
.lp_jr__mall__grid {
	/*display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 2rem 1.6rem;
		align-items: center;*/
	display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem 4rem;
}
	.lp_jr__mall__item {
		display: flex;
			justify-content: center;
			align-items: center;
	}
		.lp_jr__mall__item img {
			width: auto;
			height: 4.1rem;
		}


/* ======== CVR改善・売上向上の事例 ======== */
.lp_cs {
	padding: 2rem 0 10rem 0;
	background: url("../images/cs_bg.png.webp") top center no-repeat;
	background-size: 200rem 100%;
}
.lp_cs__inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.lp_cs__label {
	position: relative;
	display: flex;
		justify-content: center;
		align-items: center;
	width: 14rem;
	height: 15.3rem;
	margin: 0 auto;
	padding-bottom: 2rem;
	margin-bottom: 1.2rem;
	color: var(--c-white);
	font-size: 4.4rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	background: url("../images/cs_titbg.png.webp");
	background-size: 100% 100%;
}
	.lp_cs__label small {
		/*font-size: 1.4rem;*/
		font-size: 100%;
	}
	.lp_cs__label__bg {
		position: absolute;
			top: 50%;
			left: 50%;
			z-index: -1;
			transform: translate(-50%, -50%);
		width: 7rem;
		height: auto;
	}
.lp_cs__tit {
	margin-bottom: 0.8rem;
	font-size: 6rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}
	.lp_cs__tit span {
		font-size: 8rem;
	}
.lp_cs__sub2 {
	display: inline-block;
	margin-bottom: 6rem;
	padding: 0.2rem 3.5rem;
	color: var(--c-text-light);
	font-size: 2.4rem;
	letter-spacing: 0.04em;
	border-radius: 100rem;
	background: #fff;
}
.lp_cs__list {
	display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem;
	display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 3rem 7rem;
	margin-bottom: 6rem;
}
	.lp_cs__item {
		position: relative;
		width: 52rem;
		height: 50rem;
		text-align: center;
		background: var(--c-white);
		box-shadow: 0 1rem 1rem rgb(0 58 127 / 0.05);
	}
	.lp_cs__item__img {
		position: absolute;
			/* 元デザインの画像（cs_i01.png・224×336）は、絵柄182×296pxのまわりに
			   影のぶんの透明な余白（左8px・下40px・右34px）が入っていた。
			   いまは影をCSSで描くので余白が無い。その分だけ位置を詰める。
			   左 -4rem → -3.2rem（card から32px出す）、下 2rem → 6rem。
			   これで絵柄の位置が元デザインと同じになる。 */
			left: -3.2rem;
			bottom: 6rem;
		/* 画像はCVR改善実績の登録画像。登録物の実寸はまちまちなので、枠の大きさを固定して
		   はみ出す分は切り抜く。こうしないと登録画像の縦横比でカードごとに高さが変わる。
		   指定は枠線を含めて 182×296px。このLPは 1rem = 10px 基準なので rem で書く
		   （px で書くと、画面幅1100px未満でカードだけ縮んで画像が縮まない）。 */
		width: 18.2rem;
		height: 29.6rem;
		overflow: hidden;
		/* フチ・角丸・影は元デザインの画像（cs_i01.png など）に焼き込まれていたもの。
		   登録画像には付いていないので、ここで付け直す。
		   フチと角丸はPC・SPで同じにしたいので rem ではなく px で指定する。
		   影は、元画像に入っていた透明な余白（右34px・下40px）から向きと広がりを割り出した。
		   右下に流れる柔らかい影。色は親の .lp_cs__item と同じ rgb(0 58 127)。 */
		border: 2px solid #2e3443;
		border-radius: 10px;
		box-shadow: 1.2rem 2rem 4rem rgb(0 58 127 / 0.4);
	}
		.lp_cs__item__img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center top;
		}
	.lp_cs__item__body {
		display: flex;
			flex-direction: column;
			align-items: flex-end;
		width: 100%;
		padding: 3rem 0 0 0;
		text-align: left;
	}
				.lp_cs__item__btc,
				.lp_cs__item__body.btc:before {
					position: absolute;
						top: 0;
						right: 0;
					width: 13rem;
					height: 3.2rem;
					padding-left: 1rem;
					color: #fff;
					font-family: var(--font-en);
					font-size: 2.2rem;
					font-weight: 400;
					text-align: center;
					letter-spacing: 0.12em;
					background: url("../images/cs_bgico.png.webp");
					background-size: 100% 100%;
				}
	.lp_cs__item__company {
		width: 100%;
		margin-bottom: 0.6rem;
		color: #9699a1;
		font-size: 1.3rem;
		text-align: center;
	}
	.lp_cs__item__product {
		width: 100%;
		font-size: 2.2rem;
		font-weight: 500;
		text-align: center;
		line-height: 1.68;
	}
	.lp_cs__item__desc {
		width: 29rem;
		margin-top: 3rem;
		margin-right: 4rem;
		padding: 2rem 2rem 2rem 2rem;
		color: var(--c-text-light);
		font-size: 1.5rem;
		font-weight: 300;
		line-height: 1.6;
		border-radius: 1rem;
		background: #e5f0f5;
	}
				.lp_cs__item__desc:before {
					content: "CONCEPT";
					display: block;
					margin-bottom: 1rem;
					font-family: var(--font-en);
					font-size: 1.4rem;
					font-weight: 400;
					letter-spacing: 0.1em;
					width: 9.2rem;
					height: 1.2rem;
					background: no-repeat center top #e5f0f5 url("../images/asset5.png.webp");
					overflow: hidden;
					text-indent: 300%;
					background-size: 100% 100%;
				}
	.lp_cs__item__result {
		position: relative;
		width: 29rem;
		margin-right: 4rem;
		margin-left: auto;
		letter-spacing: 0.04em;
	}
		.lp_cs__item__arr {
			width: 13rem;
			height: auto;
			margin: 0 auto;
		}
		.lp_cs__item__result p {
			margin-top: 2rem;
			padding-bottom: 0.6rem;
			font-size: 2rem;
			font-weight: 500;
			line-height: 1.2;
			letter-spacing: 0.04em;
			background: url("../images/cs_tpline.png.webp") no-repeat bottom center;
			background-size: 25rem auto;
		}
		.lp_cs__item__result .grade {
			font-family: var(--font-en);
			font-size: 5.2rem;
			font-weight: 500;
			letter-spacing: 0;
			background: var(--g-main);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
			.lp_cs__item__result .grade .ks {
				font-weight: 700;
			}
.lp_cs__bottom {
	margin-bottom: 1rem;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.6;
}
	.lp_cs__bottom .ks01 {
		display: block;
		width: 28.1rem;
		height: 5.3rem;
		margin: 0 auto;
		margin-bottom: 1.4rem;
		font-size: 2.2rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		background: url("../images/cs_fuki.png.webp");
		background-size: 100% 100%;
	}
	.lp_cs__bottom .ks02 {
		font-size: 3.55rem;
		letter-spacing: 0.02em;
	}
		.lp_cs__bottom .ks02 mark {
			color: #5e95f5;
			background: none;
		}
.lp_cs__note {
	color: var(--c-text-light);
	font-size: 1.4rem;
}


/* ======== 成果が出る理由は、人です。 ======== */
.lp_pp {
	padding-bottom: 12rem;
	background: url("../images/ks_snbg.png.webp") center top no-repeat;
	background-size: 200rem 100%;
}
.lp_pp__head {
	padding: 8rem 0 6rem;
	color: var(--c-white);
	text-align: center;
}
.lp_pp__head__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}
.lp_pp__tit {
	width: 78.1rem;
	margin: 0 auto;
	margin-bottom: 3rem;
	font-size: 5.4rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	background: url("../images/ks_sntit.png.webp") center bottom no-repeat;
	background-size: 100% auto;
}
	.lp_pp__tit mark {
		position: relative;
		margin-left: -2rem;
		color: #ffff5e;
		font-family: var(--font-mincho);
		font-size: 9rem;
		background: none;
	}
		.lp_pp__tit mark::after {
			content: "";
			position: absolute;
				bottom: 0.2rem;
				left: -0.5rem;
			width: calc(100% + 1rem);
			height: 0.6rem;
			background-size: 100% 100%;
		}
.lp_pp__desc {
	margin-bottom: 0;
	font-size: 1.8rem;
	line-height: 2;
}
.lp_pp__inner {
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

/* フロー図 */
.lp_pp__flow {
	display: flex;
		justify-content: center;
		align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 0rem;
}
	.lp_pp__flow__left {
		position: relative;
			flex-shrink: 0;
		text-align: center;
	}
		.lp_pp__flow__comm-img {
			width: 49.4rem;
		}
		.lp_pp__flow__labels {
			display: flex;
				justify-content: space-between;
			margin-top: 1rem;
		}
			.lp_pp__flow__labels .lp_pp__t01 {
				position: absolute;
					top: 0;
					left: 8.6rem;
				display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				width: 26rem;
				height: 6rem;
				color: #fff;
				font-size: 1.8rem;
				text-align: center;
				line-height: 1.2;
				letter-spacing: 0.04em;
			}
		.lp_pp__flow__label {
			width: 16rem;
			height: 11rem;
			margin-top: 0.5rem;
			color: #fff;
			font-size: 1.6rem;
			font-weight: 700;
			line-height: 1.4;
		}
			.lp_pp__flow__label.t02 {
				margin-right: 7rem;
			}
		.lp_pp__flow__labelsub {
			display: block;
			margin-top: 1rem;
			font-size: 1.2rem;
			font-weight: 400;
		}
	.lp_pp__flow__select {
		position: absolute;
			top: 0rem;
			left: 1rem;
			z-index: 2;
		display: flex;
			justify-content: center;
			align-items: center;
		width: 8.8rem;
		height: 8.8rem;
		color: #5372a1;
		font-size: 2.4rem;
		font-weight: 700;
		border: 0.6rem solid #fff;
		border-radius: 50%;
		background: #ffff5e;
		box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.15);
	}
	.lp_pp__flow__right {
		position: relative;
			flex-shrink: 0;
		margin-right: -4rem;
		margin-left: -3rem;
	}
		.lp_pp__flow__right img {
			width: 65.2rem;
			width: 67.6rem;
		}
		.lp_pp__flow__right__labels {
			position: absolute;
				top: 0;
				left: 0;
			width: 100%;
			height: 100%;
		}
		.lp_pp__flow__right__head {
			margin-bottom: -0.5rem;
			padding-top: 3.7rem;
			padding-left: 5rem;
			font-size: 2.2rem;
			font-weight: 700;
			text-align: center;
			letter-spacing: 0.06em;
		}
		.lp_pp__flow__right__members {
			display: flex;
				justify-content: space-between;
			padding: 0 6rem;
			padding-top: 14rem;
		}
		.lp_pp__flow__right__member {
			width: 17.2rem;
			text-align: center;
		}
		.lp_pp__flow__right__role {
			margin-bottom: 0.0rem;
			font-size: 2rem;
			font-weight: 700;
		}
		.lp_pp__flow__right__sub {
			font-size: 1.4rem;
			white-space: nowrap;
			line-height: 1.6;
		}

/* 信頼セクション 2カラム */
.lp_pp__trust {
	display: flex;
		justify-content: center;
		gap: 6rem;
}
	.lp_pp__trust__tit {
		position: relative;
		display: flex;
			justify-content: center;
			align-items: center;
		width: 52rem;
		height: 12rem;
		margin-bottom: 3.6rem;
		padding: 2rem;
		color: #367bf3;
		font-size: 2.4rem;
		font-weight: 500;
		text-align: center;
		line-height: 1.6;
		background: var(--c-white);
		border-radius: 160rem;
	}
				.lp_pp__trust__tit:before {
					content: "";
					position: absolute;
						top: 100%;
					width: 0;
					height: 0;
					margin-top: -1px;
					border-style: solid;
					border-width: 0 2rem 2rem 0;
					border-color: transparent #fff transparent transparent;
				}
	.lp_pp__trust__body {
		display: flex;
			justify-content: center;
			align-items: flex-start;
			gap: 1.6rem;
		padding: 0 1rem;
	}
		.lp_pp__trust__ico {
			flex-shrink: 0;
			width: 10rem;
		}
			.lp_pp__trust__ico img {
				width: 100%;
				height: auto;
			}
		.lp_pp__trust__note {
			color: #fff;
			width: 35rem;
			font-size: 1.6rem;
			line-height: 1.8;
		}


/* ======== 低価格の理由は、仕組みです。 ======== */
.lp_sm {
	padding: 8rem 0;
}
.lp_sm__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.lp_sm__tit {
	margin-bottom: 1.6rem;
	font-size: 6rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
}
			.lp_sm__tit span {
				position: relative;
			}
				.lp_sm__tit span:before {
					content: "";
					position: absolute;
						top: 0;
						left: 50%;
						translate: 0 -50%;
					display: block;
					width: 1rem;
					height: 1rem;
					background: #000;
					border-radius: 50%;
				}
	.lp_sm__tit mark {
		display: inline-block;
		width: calc(58.3rem / 2);
		height: calc(21.5rem / 2 + 3rem);

		font-size: 9rem;
		background: url("../images/sm_titbg.png.webp") no-repeat center center;
		background-size: 100% auto;
	}
.lp_sm__desc {
	margin-bottom: 4.8rem;
	color: var(--c-text-light);
	font-size: 1.8rem;
	letter-spacing: 0.04em;
	line-height: 1.7;
	text-align: center;
}
.lp_sm__list {
	display: flex;
		justify-content: center;
		justify-content: space-between;
}
	.lp_sm__item {
		width: 28.2rem;
		height: 49rem;
		padding: 3.2rem 2rem;
		text-align: center;
		background: url("../images/sm_boxbg.png.webp");
		background-size: 100% 100%;
	}
				.lp_sm__item:nth-child(even) {
					margin-top: 6rem;
				}
	.lp_sm__item__ico {
		margin-bottom: 2rem;
	}
		.lp_sm__item__ico img {
			width: 17.5rem;
			height: 17.5rem;
			margin: 0 auto;
			object-fit: contain;
		}
	.lp_sm__item__tit {
		margin-bottom: 1.2rem;
		font-size: 2.8rem;
		font-weight: 500;
		letter-spacing: 0.04em;
	}
	.lp_sm__item__desc {
		width: 21.6rem;
		margin: 0 auto;
		font-size: 1.6rem;
		text-align: left;
		line-height: 1.875;
		letter-spacing: 0.03em;
	}


/* ======== LP制作.jpのこだわり ======== */
.lp_kd {
	padding: 16rem 0 2rem 0;
	background: url("../images/kd_bg.png.webp");
	background-size: 200rem 100%;
}
.lp_kd__inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.lp_kd__tit {
	margin-bottom: 1.6rem;
	font-size: 8.4rem;
	font-weight: 500;
}
	.lp_kd__tit .kdwrap {
		display: inline-flex;
			justify-content: center;
			align-items: center;
		width: 19rem;
		height: 4.8rem;
		margin-top: -1rem;
		color: #fff;
		font-size: 2.4rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		vertical-align: middle;
		border-radius: 100rem;
		background: #000;
	}
	.lp_kd__tit__logo {
		display: inline-block;
		height: 11.6rem;
		width: auto;
		vertical-align: middle;
		margin: 0 1.5rem 0 0.5rem;
	}
.lp_kd__desc {
	margin-bottom: 4.8rem;
	font-size: 1.8rem;
	line-height: 1.8;
}
.lp_kd__list {
	max-width: 1200px;
	margin: 0 auto 8rem;
}
	.lp_kd__item {
		position: relative;
		overflow: hidden;
		border-radius: 1.6rem;
	}
		.lp_kd__item__bg {
			width: 100%;
			height: auto;
		}
		.lp_kd__item__body {
			position: absolute;
				top: 0;
				left: 8rem;
			width: 102rem;
			height: 100%;
			padding: 7rem 6rem 0 6rem;
		}
						.lp_kd__item--rev .lp_kd__item__body {
							scale: -1 1;
						}
							.lp_kd__item--rev .lp_kd__item__body .lp_kd__item__label,
							.lp_kd__item--rev .lp_kd__item__body .lp_kd__item__desc {
								scale: -1 1;
							}
	.lp_kd__item__label {
		display: block;
		width: 39.4rem;
		margin-bottom: 1.6rem;
		color: var(--c-text);
		font-size: 4.6rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		line-height: 1.4;
	}
		.lp_kd__item__label span {
			display: inline-block;
			padding: 0 2rem;
			line-height: 1.2;
			background: linear-gradient(135deg, rgba(180,200,255,0.5), rgba(220,180,255,0.5));
		}
	.lp_kd__item__desc {
		width: 39.4rem;
		color: #434856;
		font-size: 1.8rem;
		text-align: left;
		line-height: 1.7;
	}
		.lp_kd__item__desc strong {
			font-weight: 500;
		}
	.lp_kd__x {
		padding: 2rem 0;
		text-align: center;
	}
		.lp_kd__x img {
			width: 4.8rem;
			margin: 0 auto;
		}
.lp_kd__note {
	margin-bottom: 4rem;
	font-size: 2.4rem;
	line-height: 1.5;
}
.lp_kd__cta {
	display: flex;
		justify-content: center;
}


/* ======== ご依頼の条件（見出しと枠。中身は single-results_oriented.php の rdjk。2026-11-09 まで比較表「他社との違い」） ======== */
.lp_ts {
	margin-bottom: -4rem;
	padding: 6rem 0 4rem 0;
	background: url("../images/ts_bg.png.webp") no-repeat center top;
	background-size: 200rem 100%;
}
.lp_ts__inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.lp_ts__tit {
	position: relative;
	display: flex;
		justify-content: center;
		align-items: center;
	margin-bottom: 0rem;
	font-size: 6.8rem;
	font-weight: 500;
	letter-spacing: 0.0em;
	vertical-align: middle;
}
	.lp_ts__tit mark {
		display: contents;
		font-size: 5.4rem;
	}
	.lp_ts__titico {
		position: absolute;
			top: 50%;
			left: 50%;
			z-index: 0;
			transform: translate(-50%, -50%);
		width: 44.3rem;
		height: auto;
	}


/* ======== 選べる3プラン ======== */
.lp_pln {
	padding: 0rem 0;
	/*background: var(--c-white);*/
}
.lp_pln__inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.lp_pln__label {
	margin-bottom: 0.4rem;
	color: var(--c-primary);
	font-size: 1.4rem;
	font-weight: 700;
}
.lp_pln__tit {
	position: relative;
	width: 75.1rem;
	height: 20.2rem;
	margin: 0 auto;
	margin-bottom: 2.8rem;
	padding-top: 3rem;
	padding-left: 0rem;
	font-size: 3.6rem;
	font-weight: 900;
	white-space: nowrap;
	background: url("../images/pln_titbg.png.webp");
	background-size: 100% 100%;
}
	.lp_pln__tit .lp_pln__label {
		position: absolute;
			top: 0.3rem;
			left: 4rem;
		color: #fff;
		font-size: 2.6rem;
		font-weight: 500;
	}
	.lp_pln__tit .mincho {
		font-size: 11rem;
		font-weight: 500;
	}
	.lp_pln__tit mark {
		opacity: 0;
		margin: 0 2rem;
	}
.lp_pln__note {
	margin-bottom: 6.8rem;
	color: var(--c-text-light);
	font-size: 1.8rem;
	letter-spacing: 0.04em;
}
.lp_pln__cards {
	position: relative;
	display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		align-items: start;
	display: flex;
		justify-content: space-between;
		gap: 0;
	width: 116rem;
	margin: 0 auto;
	margin-bottom: 1rem;
}
	.lp_pln__card {
		width: 38rem;
		background: var(--c-white) no-repeat top center;
		background-image: url("../images/pln_boxks01.png.webp");
		background-size: 100% auto;
		filter: drop-shadow(0 0.8rem 1rem rgb(0 49 135 / 0.2));
	}
				.lp_pln__card--std {
					background-image: url("../images/pln_boxks02.png.webp");
				}
				.lp_pln__card--hq {
					background-image: url("../images/pln_boxks03.png.webp");
				}
	.lp_pln__card__head {
		color: #fff;
		font-size: 3rem;
		text-align: center;
	}
	.lp_pln__card__name {
		display: flex;
			justify-content: center;
			align-items: center;
		width: 34rem;
		height: 6rem;
		margin: 0 auto;
		margin-top: -2rem;
		margin-bottom: 2.5rem;
		color: #fff;
		font-size: 3rem;
		font-weight: 700;
		background: #33acff;
		border-radius: 100rem;
		box-shadow: 0 0.8rem 0.8rem rgb(0 49 135 / 0.3);
	}
		.lp_pln__card--std .lp_pln__card__name {
			background: #787cda;
		}
		.lp_pln__card--hq .lp_pln__card__name {
			background: #946dd5;
		}
	.lp_pln__card__catch {
		font-size: 1.6rem;
		line-height: 1.6;
		letter-spacing: 0.06em;
		opacity: 0.85;
	}
	.pripri {
		display: flex;
			justify-content: center;
			align-items: center;
			gap: 0 1.5rem;
	}
	.lp_pln__card__price {
		font-family: var(--font-en);
		font-size: 3.4rem;
		font-weight: 700;
	}
		.lp_pln__card__price mark {
			font-size: 5.2rem;
			font-weight: 500;
		}
	.lp_pln__card__device {
		display: flex;
			justify-content: center;
			align-items: center;
		width: 5.6rem;
		height: 5.6rem;
		font-size: 1.3rem;
		border: 1px solid #fff;
		border-radius: 100rem;
	}
	.lp_pln__card__device__note {
		font-size: 1.4rem;
		letter-spacing: 0.04em;
		opacity: 0.7;
	}
	.lp_pln__card__body {
		padding: 5rem 0rem 4rem 0rem;
	}
		.lp_pln__card__spec dt {
			display: inline-block;
			padding: 0.6rem 3rem;
			color: var(--c-text-light);
			font-size: 1.6rem;
			letter-spacing: 0.04em;
			border-radius: 100rem;
			background: #e3ebf4;
		}
		.lp_pln__card__spec dd {
			padding: 0.4rem 0 1.2rem;
			font-size: 2rem;
		}
	.lp_pln__card__body > .lp_pln__card__spec:last-child {
		display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 0.8rem 1.2rem;
		width: 74%;
		margin: 0 auto;
	}
		.lp_pln__card__body > .lp_pln__card__spec:last-child dt {
			padding: 0.2rem 2rem;
			color: #fff;
			background: #2e3443;
		}
		.lp_pln__card__body > .lp_pln__card__spec:last-child dd {
			padding: 0;
			font-size: 1.6rem;
			text-align: left;
		}
	.lp_pln__card__sample {
		position: relative;
		display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.4rem;
		width: 26rem;
		height: 3.2rem;
		margin: 0 auto;
		margin-top: 1.2rem;
		margin-bottom: -1.6rem;
		color: #5372a1;
		font-size: 1.4rem;
		border: 0.3rem solid #fff;
		background: #e3ebf4;
	}
		.lp_pln__card__sample__ico {
			width: 1.6rem;
			height: auto;
		}
	.lp_pln__card__slider {
		width: 35rem;
		margin: 0 auto;
		margin-bottom: 3rem;
		padding: 4rem 0 2rem 0;
		padding-left: 1.2rem;
		background: #e3ebf4;
		overflow: hidden;
	}
		.lp_pln__card__slider__track {
			display: flex;
				gap: 1rem;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			cursor: grab;
		}
			.lp_pln__card__slider__track::-webkit-scrollbar {
				display: none;
			}
			.lp_pln__card__slider__track.is-dragging {
				cursor: grabbing;
				scroll-snap-type: none;
			}
			.lp_pln__card__slider__item {
				position: relative;
				flex-shrink: 0;
				width: 11rem;
				height: 19rem;
				scroll-snap-align: center;
			}
				.lp_pln__card__slider__item > img:first-child {
					width: 100%;
					height: auto;
				}
				/* 中身を [lp_specialty_portfolio_slidebox] の実績サムネイルに差し替えたときの形。
				   スライド1枚が <div class="lp_pln__card__slider__item lp_box …">（拡大表示用の
				   hidden input 群）＋ <a><img></a> ＋「＋」アイコン、という構造になる。 */
				.lp_pln__card__slider__item > a {
					display: block;
					width: 100%;
					height: 100%;
					cursor: pointer;
				}
					.lp_pln__card__slider__item > a > img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center top;
					}
				.lp_pln__card__slider__plus {
					position: absolute;
						top: 0.4rem;
						right: 0.4rem;
					width: 2.4rem;
					height: auto;
				}
		.lp_pln__card__slider__dots {
			display: flex;
				justify-content: center;
				gap: 0.6rem;
			margin-top: 2rem;
		}
			.lp_pln__card__slider__dots span {
				width: 1.2rem;
				height: 1.2rem;
				background: #fff;
				border-radius: 50%;
				cursor: pointer;
				transition: background 0.3s;
			}
				.lp_pln__card__slider__dots span.is-active {
					background: #a1b4ec;
				}

	.lp_pln__cards__side {
		position: absolute;
			z-index: 10;
			top: 50%;
			left: 103%;
			transform: translateY(-50%);
		padding: 2rem 1rem;
		color: var(--c-dark);
		font-size: 2rem;
		font-weight: 400;
		writing-mode: vertical-rl;
		white-space: nowrap;
		letter-spacing: 0.1em;
		border-radius: 100rem;
		background: #ffff5e;
	}
				.lp_pln__cards__side:before {
					content: "";
					position: absolute;
						z-index: -1;
						transform: skew(-10deg, -10deg);
						rotate: 45deg;
						translate: 50% -50%;
						top: 50%;
						right: 100%;
					width: 2rem;
					height: 2rem;
					background: #ffff5e;
				}

.lp_pln__common {
	position: relative;
	display: flex;
		justify-content: center;
		align-items: center;
		gap: 2rem;
	width: 116rem;
	margin: 0 auto;
	margin-bottom: 2.4rem;
	padding: 2rem;
	background: #fff;
	filter: drop-shadow(0 0.8rem 1rem rgb(0 49 135 / 0.2));
}
	.lp_pln__common p {
		font-size: 1.8rem;
		font-weight: 400;
	}
		.lp_pln__common p strong {
			font-weight: 500;
		}
		.lp_pln__common p small {
			margin-right: 2rem;
		}
	.lp_pln__common__label {
		padding: 0.2rem 2rem;
		color: #fff;
		font-size: 1.6rem;
		background: #434856;
		border-radius: 100rem;
	}
.lp_pln__hqnote {
	/*margin-bottom: 4rem;*/
	color: var(--c-text-light);
	font-size: 1.6rem;
}

.lp_pln__plus {
	padding: 3rem 0;
	text-align: center;
}
	.lp_pln__plus img {
		width: 3.6rem;
		height: auto;
		margin: 0 auto;
	}

/* オプション料金 アコーディオン */
.lp_pln__option {
	padding: 0 2rem 8rem;
}
.lp_pln__option__inner {
	max-width: 1160px;
	margin: 0 auto;
}
.lp_pln__option__tit {
	position: relative;
	cursor: pointer;
	display: flex;
		justify-content: center;
		align-items: center;
	padding: 1rem 2rem;
	font-size: 3rem;
	font-weight: 500;
	text-align: center;
	border: 1px solid #000;
}
	.lp_pln__option__tit::after {
		content: "";
		position: absolute;
			right: 2.5rem;
		width: 1.2rem;
		height: 1.2rem;
		border-right: 2px solid #000;
		border-bottom: 2px solid #000;
		transform: rotate(45deg);
	}
		.js-accordion.is-open .lp_pln__option__tit::after {
			transform: rotate(-135deg);
		}
.lp_pln__option__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
	.js-accordion.is-open .lp_pln__option__body {
		max-height: 120rem;
	}
.lp_pln__op__grid {
	display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1.2rem;
	padding: 2rem 0;
}
.lp_pln__op__card {
	display: flex;
		align-items: center;
		gap: 1.5rem;
	padding: 2rem 2rem;
	padding-left: 3rem;
	border-radius: 0.8rem;
}
	.lp_pln__op__card--lt { background: #e3edf8; }
	.lp_pln__op__card--std { background: #e4e5f8; }
	.lp_pln__op__card--hq { background: #e8e0f5; }
.lp_pln__op__ico {
		flex-shrink: 0;
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	margin-top: 1rem;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
	.lp_pln__op__card--lt .lp_pln__op__ico { background-image: url(../images/pln_op8ico.png.webp); }
	.lp_pln__op__card--std .lp_pln__op__ico { background-image: url(../images/pln_op88ico.png.webp); }
	.lp_pln__op__card--hq .lp_pln__op__ico { background-image: url(../images/pln_op888ico.png.webp); }
	.lp_pln__op__ico--01 { background-position: 0 0; }
	.lp_pln__op__ico--02 { background-position: 0 -10.7rem; }
	.lp_pln__op__ico--03 { background-position: 0 -20.6rem; }
	.lp_pln__op__ico--04 { background-position: 0 -31.3rem; }
	.lp_pln__op__ico--05 { background-position: 0 -41.6rem; }
	.lp_pln__op__ico--06 { background-position: 0 -52.3rem; }
.lp_pln__op__name {
	color: var(--c-text-light);
	font-size: 1.6rem;
}
.lp_pln__op__price {
	font-size: 2.6rem;
	font-weight: 700;
}
.lp_pln__option__note {
	padding: 1.2rem 0;
	color: var(--c-text-light);
	font-size: 1.1rem;
	text-align: right;
}


/* ======== 希望予算に合わせたLP制作のご提案 ======== */
.lp_bdg {
	padding: 6rem 0;
	background: url("../images/pln_tabg.png.webp") no-repeat center top;
	background-size: 200rem 100%;
}
.lp_bdg__wrap {
	display: flex;
		align-items: flex-start;
		gap: 4rem;
	max-width: 1200px;
	margin: 0 auto;
}
.lp_bdg__inner {
		flex: 1;
}
.lp_bdg__tit {
	margin-bottom: 4rem;
}
	.lp_bdg__tit__line01 {
		display: block;
		width: fit-content;
		margin-bottom: 1rem;
		padding: 0.1rem 4rem 0.1rem 6.5rem;
		color: #fff;
		font-size: 4.4rem;
		font-weight: 500;
		line-height: 1.4;
		background: #2e3443;
	}
		.lp_bdg__tit__line01 mark {
			color: #ffff8e;
			background: none;
		}
	.lp_bdg__tit__line02 {
		display: block;
		width: fit-content;
		padding: 0.1rem 4rem 0.1rem 6.5rem;
		color: #fff;
		font-size: 4.4rem;
		font-weight: 500;
		line-height: 1.4;
		background: #2e3443;
	}
.lp_bdg__desc {
	margin-left: 6.5rem;
	margin-bottom: 3rem;
	color: var(--c-text);
	font-size: 1.8rem;
	line-height: 2;
	letter-spacing: 0.04em;
}
.lp_bdg__list {
	display: flex;
		flex-direction: column;
	margin-left: 6.5rem;
}
	.lp_bdg__item {
		display: flex;
			align-items: center;
			gap: 2rem;
		width: 48rem;
		height: 9rem;
		margin-bottom: 1rem;
		margin-left: 2rem;
		background: #fff;
	}
	.lp_bdg__item__label {
			flex-shrink: 0;
		display: flex;
			align-items: center;
			gap: 1rem;
		width: 20rem;
		height: 7rem;
		margin: 0 0 auto 0;
		margin-left: -2rem;
		padding: 0.8rem 2rem;
		color: #fff;
		font-size: 2.2rem;
		font-weight: 500;
		background: url("../images/qa_qbg.png.webp") center center;
	}
	.lp_bdg__item__ico {
		display: block;
		width: 3.5rem;
		height: 2.7rem;
		flex-shrink: 0;
		background: url("../images/bdg_ico.png.webp") no-repeat;
		background-size: 3.5rem auto;
	}
		.lp_bdg__item__ico--01 { background-position: 0 0; }
		.lp_bdg__item__ico--02 { background-position: 0 -8.2rem; }
		.lp_bdg__item__ico--03 { background-position: 0 -16.67rem; }
	.lp_bdg__item__desc {
		color: var(--c-text);
		font-size: 1.6rem;
		line-height: 1.7;
	}
	.lp_bdg__item .gm {
		width: 4em;
		text-align: center;
		letter-spacing: 0.08em;
		white-space: nowrap;
	}

/* AIチャットウィジェット */
.lp_bdg__chat {
		flex-shrink: 0;
	width: 54rem;
	height: 50rem;
	margin-top: 4rem;
}
.lp_bdg__chat__inner {
	height: 100%;
	padding: 3rem 2.5rem;
	background: #fff;
	border-radius: 2rem;
	text-align: center;
}
.lp_bdg__chat__tit {
	margin-bottom: 1.5rem;
	color: var(--c-text);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.6;
}
	.lp_bdg__chat__tit small {
		display: block;
		font-size: 2.4rem;
		font-weight: 900;
	}
.lp_bdg__chat__widget {
	min-height: 20rem;
}


/* ======== 持ち込み割引 ======== */
.lp_mw {
	margin-top: 11rem;
	padding: 8rem 0 0;
	background: #e7effd;
}
.lp_mw__inner {
	margin: 0 auto;
	text-align: center;
}
.lp_mw__tit {
	width: 102rem;
	margin: 0 auto;
	margin-bottom: 1.6rem;
	padding: 1rem 0rem 4rem 0rem;
	color: #226ecc;
	font-size: 6.2rem;
	font-weight: 500;
	background: url("../images/mw_titbg.png.webp") no-repeat center top;
	background-size: 100% auto;
}
	.lp_mw__tit .gm {
		color: var(--c-text);
		font-size: 4.4rem;
	}
.lp_mw__desc {
	margin-bottom: 4.8rem;
	font-size: 1.8rem;
	line-height: 1.8;
	letter-spacing: 0.04em;
}
.lp_mw__cards {
	display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	width: 112rem;
	margin: 0 auto;
	margin-bottom: 18rem;
}
	.lp_mw__card {
		position: relative;
		padding: 0 0 2rem;
		text-align: left;
		background: var(--c-white);
		box-shadow: 0 0.8rem 1rem rgb(0 49 135 / 0.2);
	}
	.lp_mw__card__head {
		width: 94%;
		height: 14.2rem;
		margin: 0 auto;
		margin-top: -2rem;
		padding: 3rem 2rem 0rem;
		text-align: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
		.lp_mw__card__head--01 { background-image: url("../images/mw_box01bg.png.webp"); }
		.lp_mw__card__head--02 { background-image: url("../images/mw_box02bg.png.webp"); }
		.lp_mw__card__head--03 { background-image: url("../images/mw_box03bg.png.webp"); }
	.lp_mw__card__cat {
		width: 26rem;
		margin: 0 auto;
		margin-bottom: 0.8rem;
		color: currentColor;
		font-size: 2.2rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		border-radius: 100rem;
		background: #fff;
	}
	.lp_mw__card__discount {
		color: #ffff5e;
		font-family: var(--font-en);
		font-size: 4.2rem;
		font-weight: 700;
		line-height: 1;
	}
		.lp_mw__card__discount span {
			font-size: 5.6rem;
			font-weight: 500;
		}
	.lp_mw__card__label {
		display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.8rem;
		padding: 1.4rem 1.6rem 2.2rem 1.6rem;
		color: var(--c-text);
		font-size: 1.6rem;
		font-weight: 500;
	}
	.lp_mw__card__ico {
		width: 2.6rem;
		height: 2.6rem;
		flex-shrink: 0;
		object-fit: contain;
	}
	.lp_mw__card__img {
		padding: 0 1.6rem;
	}
		.lp_mw__card__img img {
			width: 100%;
			border-radius: 0.8rem;
		}
		/* サムネイルの拡大表示（2026-10）。button の中身はサムネイル画像だけ。右下に虫眼鏡の印を付け、重ねると枠の色が付く。
		   拡大画像の表示は .lp_mw__preview（テンプレート末尾のJSが body の最後に作る） */
		.lp_mw__zoom {
			position: relative;
			display: block;
			width: 100%;
			padding: 0;
			border: none;
			border-radius: 0.8rem;
			background: none;
			cursor: zoom-in;
		}
			.lp_mw__zoom img {
				display: block;
				height: auto;
				transition: box-shadow 0.2s;
			}
			.lp_mw__zoom:hover img,
			.lp_mw__zoom:focus-visible img {
				box-shadow: 0 0 0 0.3rem currentColor;
			}
			.lp_mw__zoom:focus-visible {
				outline: none;
			}
			.lp_mw__zoom::after {
				content: "";
				position: absolute;
					right: 0.8rem;
					bottom: 0.8rem;
				width: 3.4rem;
				height: 3.4rem;
				border-radius: 50%;
				background: rgb(46 52 67 / 0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 55% no-repeat;
			}
.lp_mw__preview {
	position: fixed;
		inset: 0;
		z-index: 10000;
	display: flex;
		align-items: center;
		justify-content: center;
	padding: 3vh 3vw;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}
	.lp_mw__preview.is-show {
		opacity: 1;
		visibility: visible;
	}
	.lp_mw__preview.is-modal {
		pointer-events: auto;
		cursor: zoom-out;
		background: rgb(20 26 40 / 0.72);
	}
	.lp_mw__preview img {
		width: auto;
		height: auto;
		max-width: min(90rem, 94vw);
		max-height: 88vh;
		border-radius: 1rem;
		background: #fff;
		box-shadow: 0 1.6rem 4rem rgb(0 20 60 / 0.35);
	}
	.lp_mw__card__note {
		position: absolute;
			top: 100%;
			left: 50%;
			translate: -50% 2.4rem;
		width: 32rem;
		height: 13rem;
		padding: 2rem 3.6rem;
		color: #fff;
		font-size: 1.6rem;
		line-height: 1.87;
		border-radius: 1rem;
		background: #2e3443;
	}
				.lp_mw__card__note:before {
					content: "";
					position: absolute;
						top: -1.2rem;
						left: 50%;
						translate: -50% 0;
					rotate: 45deg;
					width: 3rem;
					height: 3rem;
					background: #2e3443;
				}
.lp_mw__cardnote {
	margin-bottom: 3rem;
	color: var(--c-text-light);
	font-size: 1.4rem;
}
	/* 文中の「マウスオーバー」（PCだけ表示）。共通の .PC は display:inherit で改行してしまうので inline にする */
	.lp_mw__cardnote span.PC {
		display: inline;
	}

.lp_mw__conditions {
	display: flex;
		align-items: center;
	width: 108rem;
	margin: 0 auto 4.8rem auto;
	padding: 2rem 0 2rem 4.5rem;
	color: #fff;
	text-align: left;
	background: #9fb0cb;
}
	.lp_mw__conditions h3 {
		display: flex;
			align-items: center;
		height: 9rem;
		margin-right: 3.6rem;
		padding-right: 3.6rem;
		font-size: 2.2rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		border-right: 1px dotted #fff;
	}
	.lp_mw__conditions ul {
		list-style: none;
	}
		.lp_mw__conditions li {
			font-size: 1.4rem;
			line-height: 1.7;
		}
.lp_mw .lp_cta {
	padding-bottom: 7rem;
}


/* ======== お問い合わせ後の流れ ======== */
.lp_stp {
	padding: 8rem 0 10rem 0;
	background: url("../images/stp_bg.png.webp") no-repeat center top;
	background-size: 200rem auto;
}
.lp_stp__inner {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.lp_stp__tit {
	margin-bottom: 4.8rem;
	font-size: 5.8rem;
	font-weight: 500;
}
.lp_stp__wrap {
	position: relative;
	width: 100rem;
	margin: 0 auto;
}
.lp_stp__list {
	display: flex;
		flex-direction: column;
		gap: 2rem 0;
	box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.04);
}
	.lp_stp__item {
		display: flex;
			align-items: center;
			/*gap: 2rem;*/
		padding: 2.1rem 0rem;
		padding-right: 3rem;
		background: #fff;
	}
		.lp_stp__item:last-child {
			border-bottom: none;
		}
	.lp_stp__num {
		flex-shrink: 0;
		display: flex;
			align-items: center;
			justify-content: center;
		width: 4.8rem;
		height: 4.8rem;
		margin-left: -2.4rem;
		color: #fff;
		font-size: 2.4rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		border: 0.4rem solid #fff;
		border-radius: 50%;
		background: #2e3443;
	}
	.lp_stp__item__ico {
			flex-shrink: 0;
		display: block;
		width: 7rem;
		height: 6rem;
		margin: 0 1rem 0 4rem;
		background: url("../images/stg_ico.png.webp") no-repeat;
		background-size: 7rem auto;
	}
		.lp_stp__item__ico--01 { background-position: 0 0; }
		.lp_stp__item__ico--02 { background-position: 0 -12.1rem; }
		.lp_stp__item__ico--03 { background-position: 0 -25.5rem; }
		.lp_stp__item__ico--04 { background-position: 0 -38.3rem; }
		.lp_stp__item__ico--05 { background-position: 0 bottom; }
	.lp_stp__item__label {
		flex-shrink: 0;
		width: 9em;
		color: #367bf3;
		font-size: 2.2rem;
		font-weight: 500;
		text-align: center;
		letter-spacing: 0.04em;
	}
	.lp_stp__item__desc {
			/*flex: 1;*/
		width: 59.3rem;
		margin-left: 3rem;
		padding-left: 2.5rem;
		color: var(--c-text);
		font-size: 1.6rem;
		letter-spacing: 0.04em;
		line-height: 1.8;
		text-align: left;
		border-left: 2px dotted #8d8e92;
	}
		.lp_stp__item__desc small {
			color: var(--c-text-light);
			font-size: 1.1rem;
		}
.lp_stp__cancel {
	position: absolute;
		top: 2rem;
		right: -4rem;
	display: flex;
		align-items: center;
		justify-content: center;
	width: 2rem;
	height: 41.6rem;
	writing-mode: vertical-rl;
	border-right: 2px solid #1b1d25;
	border-top: 2px solid #1b1d25;
	border-bottom: 2px solid #1b1d25;
}
	.lp_stp__cancel span {
		position: absolute;
			top: 50%;
			right: 0;
			translate: 50% -50%;
		display: flex;
			justify-content: center;
			align-items: center;
		padding: 1rem 0.1rem;
		color: #fff;
		font-size: 1.6rem;
		white-space: nowrap;
		border-radius: 100rem;
		background: #1b1d25;
	}


/* ======== Googleクチコミ ======== */
.lp_grev {
	padding: 6rem 0;
	background: var(--c-white);
}
.lp_grev__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}


/* ======== よくあるご質問 ======== */
.lp_qa {
	padding: 8rem 0 13rem 0;
	background: url("../images/qa_bg.png.webp") no-repeat center center;
	background-size: 200rem 100%;
}
.lp_qa__inner {
	display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 4rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0rem;
}
.lp_qa__left {
	position: relative;
	flex-shrink: 0;
	width: 29.4rem;
	padding-top: 2rem;
}
.lp_qa__watermark {
	width: 100%;
	height: auto;
}
.lp_qa__tit {
	position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	color: var(--c-text);
	font-size: 4.6rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	writing-mode: vertical-rl;
	white-space: nowrap;
	border-right: 0.5rem solid #000;
}
.lp_qa__list {
	display: flex;
		flex-direction: column;
		gap: 2rem;
	width: 79rem;
}
.lp_qa__item {
	overflow: hidden;
}
.lp_qa__q {
	position: relative;
	cursor: pointer;
	display: flex;
		align-items: center;
		gap: 1.2rem;
	padding: 1.0rem 6rem 1.0rem 2rem;
	color: var(--c-white);
	font-size: 2.4rem;
	font-weight: 500;
	background: url("../images/qa_qbg.png.webp") center center;
	background-size: cover;
}
	.lp_qa__q::after {
		content: "";
		position: absolute;
			right: 4rem;
			top: 50%;
		width: 1.2rem;
		height: 1.2rem;
		border-right: 0.2rem solid var(--c-white);
		border-bottom: 0.2rem solid var(--c-white);
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.3s;
	}
		.js-accordion.is-open .lp_qa__q::after {
			transform: translateY(-30%) rotate(-135deg);
		}
.lp_qa__q__icon {
		flex-shrink: 0;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 500;
}
.lp_qa__a {
	display: flex;
		gap: 1.2rem;
	max-height: 0;
	padding: 0 2rem;
	background: rgba(255,255,255,0.95);
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
}
	.js-accordion.is-open .lp_qa__a {
		max-height: 30rem;
		padding: 2rem;
	}
.lp_qa__a__icon {
	flex-shrink: 0;
	font-size: 3.2rem;
	font-weight: 500;
}
	.lp_qa__a p {
		width: 68.2rem;
		font-size: 1.6rem;
		line-height: 2;
		letter-spacing: 0.04em;
	}


/* ======== お問い合わせフォーム ======== */
.lp_form {
	padding: 8rem 0;
	background: #f5f5f5;
}


/* ======== 制作実績（ショートコード [lp_specialty_portfolio_search]） ========
   検索フォーム（.lp-common-search）はテーマ共通の base_specialty.css が持っていて、
   lp_common.bundle.min.css に入っているので追加の読み込みは要らない。
   一覧（.sec02_list）と「もっと見る」（.sec02_more）はLPごとに書く決まりなので、
   /lp/high_quality（emphasis_quality/css/lp_quality.css）の作りに合わせてここに置く。
   ショートコードが出す .inner / .flexbox は名前が一般的なので、
   テーマのフッターや画像ポップアップに当たらないよう .lparea の中に限定している。
   列幅は #lp_list の gap（base_specialty.css で 25px / SP 10px を !important 指定）
   を差し引いて計算している。 */
.lp_pf {
	padding-bottom: 10rem;
}
/* ロゴ流しと検索フォームの間。テーマ側の padding-top:8em（80px）は広すぎるので詰める。
   SP側はテーマ側が padding ショートカットで持っているため、PCだけに当てる。 */
@media screen and (min-width: 769px) {
	:where(.lparea) .lp_pf .lp-common-search.lp_search_inner {
		padding-top: 6rem;
	}
}
:where(.lparea) .inner {
	max-width: 1200px;
	margin: 0 auto;
	/* 検索フォームと一覧の間。/lp/high_quality の 62px に合わせている。
	   ul 側の margin-top だと .inner と相殺されて消えるため、padding で持つ。 */
	padding-top: 6.2rem;
}
:where(.lparea) .flexbox {
	display: flex;
}
:where(.lparea) .sec02_list {
	flex-wrap: wrap;
	/* 行間は #lp_list の gap 25px + li の margin-bottom 56px（high_quality と同じ） */
}
	:where(.lparea) .sec02_list > li {
		width: calc((100% - 75px) / 4);
		margin-bottom: 5.6rem;
	}
	:where(.lparea) .sec02_list .lp_box a {
		display: block;
		cursor: pointer;
	}
	:where(.lparea) .sec02_list .list_img {
		width: 100%;
		aspect-ratio: 270 / 450;
		overflow: hidden;
	}
		:where(.lparea) .sec02_list .list_img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center top;
		}
	:where(.lparea) .sec02_list .comp_name {
		margin: 1.8rem 0 1.4rem;
		font-size: 1.6rem;
		letter-spacing: 0.04em;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	:where(.lparea) .sec02_list .lp_name {
		width: -moz-fit-content;
		width: fit-content;
		max-width: 100%;
		margin: 0 auto;
		padding: 0.6rem 2em;
		font-size: 1.3rem;
		letter-spacing: 0.04em;
		text-align: center;
		background-color: var(--c-bg-light);
		border-radius: 0.4rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
:where(.lparea) .sec02_more {
	display: block;
	width: 80rem;
	max-width: 100%;
	height: 5rem;
	margin: 0 auto;
	background-color: var(--c-white);
	border: 1px solid var(--c-text);
	border-radius: 2.5rem;
}
	:where(.lparea) .sec02_more .btn_text {
		position: relative;
		width: -moz-fit-content;
		width: fit-content;
		margin: 0 auto;
		font-size: 1.8rem;
		line-height: 5rem;
		letter-spacing: 0.18em;
	}
		/* 矢印。高品質LPは画像だが、こちらは画像を増やさず枠線で描く */
		:where(.lparea) .sec02_more .btn_text::after {
			content: "";
			position: absolute;
				top: 50%;
				right: -3.4rem;
			width: 0.8rem;
			height: 0.8rem;
			margin-top: -0.6rem;
			border-right: 2px solid var(--c-text);
			border-bottom: 2px solid var(--c-text);
			transform: rotate(45deg);
		}