/* ==========================================================
   北ガスグループのあんしん灯油 LP
   Figma: 202609_北ガス_灯油ページ改修 / 20260924_anshin-toyu-lp_C
   ========================================================== */
.lp {
	--lp-orange: #ff7f02;
	--lp-orange-light: #ffb993;
	--lp-orange-pale: #fff3e8;
	--lp-cream: #fff8f2;
	--lp-red: #e60013;
	--lp-text: #333;
	--lp-text-sub: #666;
	--lp-border: #e8e8e8;
	--lp-font: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	--lp-font-en: "Poppins", "Noto Sans JP", sans-serif;
	font-family: var(--lp-font);
	color: var(--lp-text);
	line-height: 1.7;
	overflow-x: clip;
}
/* 共通CSSの #content ベージュ背景（#f8f4eb）を白に */
#content.lp {
	background: #fff;
}
/* ページ下部の固定バナー（プロパンガス切り替え）はこのLPでは非表示 */
body .fix-bnr {
	display: none !important;
}
.lp *,
.lp *::before,
.lp *::after {
	box-sizing: border-box;
}
.lp :where(img) {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.lp :where(a) {
	text-decoration: none;
}
.lp :where(a:not([class])) {
	color: inherit;
}
/* 共通CSSの a { color:#333 } / a:hover に負けないよう明示 */
.lp a.lp-btn--primary,
.lp a.lp-btn--primary:hover,
.lp .lp-btn--primary {
	color: #fff;
}
.lp a.lp-btn--outline,
.lp .lp-btn--outline {
	color: var(--lp-orange);
}
.lp a.lp-btn--outline:hover {
	color: #fff;
}
.lp a.lp-textLink,
.lp a.lp-textLink:hover {
	color: var(--lp-orange);
}
.lp .lpNav-list a {
	color: #444;
}
.lp .lpNav-list a:hover,
.lp .lpNav-list a.is-accent {
	color: var(--lp-orange);
}

/* リセットは :where() で詳細度を 0,1,0 に抑え、各コンポーネントの指定が勝つようにする */
.lp :where(p) {
	margin: 0;
}
.lp :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lp :where(h1, h2, h3) {
	margin: 0;
	font-weight: 900;
	line-height: 1.4;
}
.lp button {
	font-family: inherit;
	cursor: pointer;
}
.lp-inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 40px;
}
.lp-section {
	padding: 80px 0;
}
.lp-section--cream {
	background: var(--lp-cream);
}
.lp-section--lined {
	border-top: 2px solid var(--lp-orange);
	border-bottom: 2px solid var(--lp-orange);
}
.lp-section--lined + .lp-section--lined {
	border-top: 0;
}

/* ---------- section heading ---------- */
.lp-heading {
	text-align: center;
	margin-bottom: 40px;
}
.lp-heading-en {
	display: block;
	font-family: var(--lp-font-en);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 2px;
	color: var(--lp-orange);
	line-height: 1.5;
}
.lp-heading-ttl {
	font-size: 38px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--lp-text);
	margin: 12px 0 0;
}
.lp-heading-ttl::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin: 12px auto 0;
	background: var(--lp-orange);
}
.lp-heading-lead {
	font-size: 20px;
	color: var(--lp-text-sub);
	line-height: 1.7;
	margin-top: 16px;
}
.lp-heading--tight {
	margin-bottom: 48px;
}

/* ---------- buttons ---------- */
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 60px;
	padding: 16px 32px;
	border-radius: 5px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.lp-btn--primary {
	background: var(--lp-orange);
	color: #fff;
}
.lp-btn--primary:hover {
	opacity: 0.85;
}
.lp-btn--outline {
	border: 2px solid var(--lp-orange);
	color: var(--lp-orange);
	background: #fff;
	font-size: 18px;
}
.lp-btn--outline:hover {
	background: var(--lp-orange);
	color: #fff;
}
.lp-btn--outline .lp-chevron {
	width: 14px;
	height: 14px;
}
.lp-btn--icon {
	justify-content: space-between;
	padding: 18px 16px;
}
.lp-btn--icon .lp-btn-body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex: 1 1 0;
}
.lp-iconCircle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--lp-orange-pale);
	color: var(--lp-orange);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.lp-iconCircle svg {
	width: 20px;
	height: 20px;
}
.lp-arrowCircle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--lp-orange);
	color: #fff;
}
.lp-arrowCircle svg {
	width: 12px;
	height: 12px;
}
.lp-btn--primary .lp-arrowCircle {
	background: rgba(255, 255, 255, 0.2);
}
.lp-chevron {
	display: block;
	width: 12px;
	height: 12px;
}
.lp-textLink {
	display: inline-block;
	font-size: 18px;
	font-weight: 700;
	color: var(--lp-orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lp-textLink:hover {
	text-decoration: none;
}
.lp-textLink--center {
	display: block;
	text-align: center;
}
.lp-visuallyHidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}

/* ---------- page navigation ---------- */
.lpNav {
	position: sticky;
	top: 0;
	z-index: 50;
	border-top: 1px solid var(--lp-border);
	border-bottom: 1px solid var(--lp-border);
	background: #fff;
}
.lpNav-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
}
.lpNav-list li {
	height: 100%;
}
.lpNav-list a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 20px;
	font-size: 18px;
	font-weight: 700;
	color: #444;
	white-space: nowrap;
	transition: color 0.2s;
}
.lpNav-list a:hover,
.lpNav-list a.is-accent {
	color: var(--lp-orange);
}

/* ---------- hero ---------- */
.lpHero {
	padding-bottom: 62px;
	background: #fff;
}
.lpHero-slider {
	position: relative;
	container-type: inline-size;
	background: #fff;
}
.lpHero-slide {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1440 / 560;
	background: #fff;
}
/* slick(fade) が付ける inline の width/left/height に頼らず、
   CSS グリッドで全スライドを同じセルに重ね、アスペクト比だけで高さを揃える
   （ウィンドウ幅を変えても高さがズレない） */
.lpHero-slider .slick-list {
	height: auto !important;
}
.lpHero-slider .slick-track {
	display: grid !important;
	width: 100% !important;
	transform: none !important;
}
.lpHero-slider .slick-slide {
	grid-area: 1 / 1;
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: auto;
}
.lpHero-slide--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lp .lpHero-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 32px 0 0;
	min-height: 10px;
}
.lpHero-dots li {
	line-height: 0;
}
.lpHero-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e0e0e0;
	font-size: 0;
	text-indent: -9999px;
	transition: background-color 0.2s;
}
.lpHero-dots .slick-active button {
	background: var(--lp-orange);
}

/* hero CTA cards */
.lp .lpHero-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 32px;
}
.lpHero-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lp-orange);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.2s;
}
.lpHero-card:hover {
	box-shadow: 0 6px 20px rgba(255, 127, 2, 0.2);
}
.lpHero-card-img {
	aspect-ratio: 308.5 / 120;
	overflow: hidden;
	border-bottom: 1px solid var(--lp-orange-light);
}
.lpHero-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lpHero-card-body {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	transition: background-color 0.2s, color 0.2s;
}
.lpHero-card-body .lp-iconCircle {
	color: var(--lp-orange);
}
.lpHero-card-label {
	flex: 1 1 0;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: var(--lp-text);
}
.lpHero-card.is-active .lpHero-card-body,
.lpHero-card:hover .lpHero-card-body {
	background: var(--lp-orange);
}
.lpHero-card.is-active .lpHero-card-label,
.lpHero-card:hover .lpHero-card-label {
	color: #fff;
}
.lpHero-card.is-active .lp-arrowCircle,
.lpHero-card:hover .lp-arrowCircle {
	background: #fff;
	color: var(--lp-orange);
}

/* ---------- campaign / service split card ---------- */
.lpSplit {
	display: flex;
	align-items: center;
	gap: 48px;
	padding: 40px;
	border-radius: 10px;
	background: #fff;
}
.lpSplit-visual {
	flex-shrink: 0;
	width: 560px;
	max-width: 46%;
	aspect-ratio: 560 / 400;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lpSplit-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lpSplit-visual--logo img {
	width: 53%;
	height: auto;
	object-fit: contain;
}
.lpSplit-content {
	flex: 1 1 0;
	min-width: 0;
}
.lpSplit-tag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 5px;
	background: var(--lp-orange);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 16px;
}
.lpSplit-ttl {
	font-size: 30px;
	font-weight: 900;
	line-height: 1.5;
	color: var(--lp-text);
}
.lpSplit-text {
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.8;
	color: var(--lp-text-sub);
}
.lpSplit-text--dark {
	color: #444;
	line-height: 1.7;
}
.lpSplit-note {
	display: block;
	font-size: 16px;
}
.lpSplit-btns {
	display: flex;
	gap: 24px;
	margin-top: 28px;
}
.lpSplit-btns .lp-btn--icon {
	flex: 1 1 0;
}
.lpSplit-btns .lp-btn--outline {
	padding: 20px 40px;
}
.lpSplit-btns .lp-btn--block {
	width: 100%;
}

/* ---------- price ---------- */
.lpPrice-lead {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	line-height: 1.2;
	color: var(--lp-text-sub);
	margin-top: 28px;
}
.lpPrice-lead .lp-textLink {
	font-size: 20px;
}
.lpPrice-date {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
	font-size: 16px;
	color: #999;
}
.lpPrice-date svg {
	width: 16px;
	height: 16px;
}
.lpPrice-wrap {
	max-width: 800px;
	margin: 0 auto;
}
.lpPrice-tab {
	padding: 18px 32px;
	background: var(--lp-cream);
	border-bottom: 2px solid var(--lp-orange);
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--lp-orange);
	line-height: 1.4;
}
.lpPrice-table {
	width: 100%;
	min-width: 560px;
	border: 1px solid var(--lp-border);
	border-radius: 5px;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}
.lpPrice-table thead th:first-child {
	border-top-left-radius: 4px;
}
.lpPrice-table thead th:last-child {
	border-top-right-radius: 4px;
}
.lpPrice-table tr:last-child th {
	border-bottom-left-radius: 4px;
}
.lpPrice-table tr:last-child td:last-child {
	border-bottom-right-radius: 4px;
}
.lpPrice-table th,
.lpPrice-table td {
	border-right: 1px solid var(--lp-border);
	border-bottom: 1px solid var(--lp-border);
	vertical-align: middle;
	text-align: center;
}
.lpPrice-table th:last-child,
.lpPrice-table td:last-child {
	border-right: 0;
}
.lpPrice-table tr:last-child td {
	border-bottom: 0;
}
.lpPrice-table thead th {
	padding: 16px 18px;
	background: #f5f5f5;
	font-size: 18px;
	font-weight: 700;
	color: #444;
}
.lpPrice-table thead th:first-child {
	width: 35%;
}
.lpPrice-table .lpPrice-plan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: left;
}
.lpPrice-table tbody th {
	padding: 22px 18px;
	font-size: 22px;
	font-weight: 700;
	color: var(--lp-text);
	background: #fff;
}
.lpPrice-table tbody td {
	padding: 22px 18px;
	background: #fff;
	font-family: var(--lp-font-en);
	font-weight: 700;
	font-size: 22px;
	color: var(--lp-text);
	white-space: nowrap;
}
.lpPrice-table .lpPrice-unit {
	font-family: var(--lp-font);
	font-weight: 400;
	font-size: 16px;
	margin-left: 4px;
}
.lpPrice-table .lpPrice-sub th {
	padding: 12px 18px;
	background: #f5f5f5;
	font-size: 18px;
	border-bottom-width: 2px;
}
.lpPrice-table .lpPrice-row--small th {
	padding: 12px 18px;
	font-size: 16px;
	color: var(--lp-text-sub);
}
.lpPrice-table .lpPrice-row--small td {
	padding: 12px 18px;
	font-size: 16px;
	font-weight: 600;
	color: #555;
}
.lpPrice-table .lpPrice-row--small .lpPrice-unit {
	font-size: 14px;
}
.lpPrice-table .lpPrice-empty {
	font-family: var(--lp-font);
	font-weight: 400;
	font-size: 14px;
	color: #999;
}
.lpPrice-help {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lp-orange);
	color: #fff;
	font-family: var(--lp-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}
.lpPrice-row--small .lpPrice-help {
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 13px;
}
.lpPrice-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.lpPrice-modal[hidden] {
	display: none;
}
.lpPrice-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}
.lpPrice-modal-box {
	position: relative;
	width: 640px;
	max-width: 100%;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	animation: lpModalIn 0.2s ease-out;
}
@keyframes lpModalIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.lpPrice-modal-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 80px;
	padding: 0 60px 0 24px;
	border-radius: 10px 10px 0 0;
	background: var(--lp-orange);
}
.lpPrice-modal-icon {
	width: 58px;
	height: 44px;
	object-fit: contain;
}
.lpPrice-modal-ttl {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
}
.lpPrice-modal-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 40px;
	line-height: 1.8;
	color: var(--lp-text);
}
.lpPrice-modal-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
.lpPrice-modal-row dt {
	flex-shrink: 0;
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}
.lpPrice-modal-row dd {
	flex: 1 1 0;
	margin: 0;
	font-size: 17px;
}
.lpPrice-modal-close {
	position: absolute;
	top: -29px;
	right: -28px;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	line-height: 0;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
	transition: transform 0.15s;
}
.lpPrice-modal-close:hover {
	transform: scale(1.06);
}
body.is-lpModalOpen {
	overflow: hidden;
}
.lpPrice-notes {
	max-width: 800px;
	margin: 20px auto 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--lp-text-sub);
}
.lpPrice-notes li {
	padding-left: 1.2em;
	text-indent: -1.2em;
}
.lpPrice-notes li::before {
	content: "※";
}
.lpPrice .lp-textLink--center {
	margin-top: 40px;
}

/* ---------- points ---------- */
.lpPoints-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.lpPoints-item {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 40px;
	border: 1px solid var(--lp-orange-light);
	border-radius: 5px;
	background: #fff;
}
.lpPoints-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--lp-orange-pale);
	font-family: var(--lp-font-en);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--lp-orange);
	line-height: 1;
}
.lpPoints-body {
	flex: 1 1 0;
	min-width: 0;
}
.lpPoints-ttl {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--lp-text);
	margin-bottom: 10px;
}
.lpPoints-text {
	font-size: 18px;
	line-height: 1.7;
	color: var(--lp-text-sub);
}
.lpPoints-note {
	font-size: 16px;
	line-height: 1.7;
	color: var(--lp-text-sub);
}
.lpPoints-img {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 380px;
	height: 240px;
}
.lpPoints-img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.lpPoints-img--logo img {
	width: 100%;
	max-width: 367px;
}
.lpPoints-img--3q img {
	height: 100%;
}

/* ---------- payment ---------- */
.lpPayment-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: stretch;
}
.lpPayment-card {
	border: 1px solid var(--lp-orange-light);
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
}
.lpPayment-card-head {
	padding: 20px;
	background: var(--lp-orange);
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.lpPayment-card-body {
	padding: 24px;
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--lp-text);
}
.lpPayment-btn {
	display: flex;
	max-width: 800px;
	margin: 40px auto 0;
	min-height: 76px;
}

/* ---------- area ---------- */
.lpArea-search {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 800px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid var(--lp-orange-light);
	border-radius: 5px;
	background: #fff;
}
.lpArea-search-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: #444;
}
.lpArea-search input {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--lp-border);
	border-radius: 10px;
	background: #f5f5f5;
	font-family: inherit;
	font-size: 18px;
	color: var(--lp-text);
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
.lpArea-search input::placeholder {
	color: #aaa;
}
.lpArea-search input:focus {
	outline: 2px solid var(--lp-orange);
	outline-offset: 0;
	background: #fff;
}
.lpArea-search button {
	flex-shrink: 0;
	padding: 14px 32px;
	border: 0;
	border-radius: 10px;
	background: var(--lp-orange);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	transition: opacity 0.2s;
}
.lpArea-search button:hover {
	opacity: 0.85;
}
.lpArea-result {
	max-width: 800px;
	margin: 12px auto 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--lp-text);
	text-align: center;
}
.lpArea-result:empty {
	display: none;
}
.lpArea-result strong {
	color: var(--lp-orange);
}
.lpArea-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 40px;
}
.lpArea-tab {
	padding: 12px 28px;
	border: 1px solid var(--lp-orange-light);
	border-radius: 5px;
	background: #fff;
	color: #444;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	transition: background-color 0.2s, color 0.2s;
}
.lpArea-tab:hover,
.lpArea-tab.is-active {
	background: var(--lp-orange);
	border-color: var(--lp-orange);
	color: #fff;
}
.lpArea-split {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-top: 0;
}
.lpArea-list {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lpArea-row {
	display: flex;
	gap: 24px;
	padding: 20px;
	border: 1px solid var(--lp-orange-light);
	border-radius: 5px;
	background: #fff;
	transition: background-color 0.2s, border-color 0.2s;
}
.lpArea-row.is-hit {
	background: var(--lp-cream);
	border-color: var(--lp-orange);
}
.lpArea-row.is-dim {
	opacity: 0.45;
}
.lpArea-row dt {
	flex-shrink: 0;
	width: 180px;
	font-size: 20px;
	font-weight: 700;
	color: var(--lp-text);
	line-height: 1.2;
	padding-top: 0.2em;
}
.lpArea-row dd {
	flex: 1 1 0;
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--lp-text-sub);
}
.lpArea-map {
	position: relative;
	flex-shrink: 0;
	width: 560px;
	max-width: 44%;
	aspect-ratio: 560 / 380;
	overflow: hidden;
}
/* Figma と同じトリミング（凡例部分を隠し地図部分を拡大表示） */
.lpArea-map img {
	position: absolute;
	left: 21.7%;
	top: 17.6%;
	width: 163.4%;
	max-width: none;
	transform: translateX(-50%);
}
.lpArea-note {
	margin-top: 16px;
	font-size: 16px;
	color: var(--lp-text-sub);
	text-align: center;
}
.lpArea .lp-textLink--center {
	margin-top: 40px;
}

/* ---------- apply ---------- */
.lpApply-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.lpApply-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 48px;
	border: 1px solid var(--lp-border);
	border-radius: 10px;
	background: #fff;
	text-align: center;
}
.lpApply-card--new {
	border-color: rgba(255, 127, 2, 0.2);
}
.lpApply-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #f0f0f0;
	color: #444;
}
.lpApply-icon svg {
	width: 28px;
	height: 28px;
}
.lpApply-card--new .lpApply-icon {
	background: var(--lp-orange);
	color: #fff;
}
.lpApply-ttl {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--lp-text);
}
.lpApply-text {
	margin-top: 12px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--lp-text-sub);
}
.lpApply-card .lp-btn {
	width: 100%;
}
.lpApply-card .lp-btn--outline {
	font-size: 20px;
}

/* ==========================================================
   Tablet
   ========================================================== */
@media screen and (max-width: 1100px) {
	.lp-inner {
		padding: 0 24px;
	}
	.lp-heading-ttl {
		font-size: 32px;
	}
	.lpNav-list {
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.lpNav-list a {
		padding: 0 14px;
		font-size: 16px;
	}
	.lp .lpHero-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.lpSplit {
		gap: 32px;
		padding: 32px;
	}
	.lpSplit-visual {
		max-width: 42%;
	}
	.lpSplit-ttl {
		font-size: 26px;
	}
	.lpSplit-btns {
		flex-direction: column;
	}
	.lpPoints-item {
		padding: 28px;
		gap: 24px;
	}
	.lpPoints-img {
		width: 280px;
		height: 190px;
	}
	.lpPayment-cards {
		gap: 14px;
	}
	.lpPayment-card-body {
		padding: 18px;
		font-size: 16px;
	}
	.lpArea-map {
		max-width: 40%;
	}
	.lpArea-row dt {
		width: 140px;
		font-size: 18px;
	}
	.lpArea-row dd {
		font-size: 16px;
	}
	.lpApply-card {
		padding: 32px 24px;
	}
}

/* ==========================================================
   Smartphone
   ========================================================== */
@media screen and (max-width: 768px) {
	.lp-inner {
		padding: 0 20px;
	}
	.lp-section {
		padding: 56px 0;
	}
	.lp-heading {
		margin-bottom: 28px;
	}
	.lp-heading-en {
		font-size: 14px;
	}
	.lp-heading-ttl {
		font-size: 24px;
		margin-top: 8px;
	}
	.lp-heading-ttl::after {
		height: 3px;
		margin-top: 10px;
	}
	.lp-heading-lead {
		font-size: 16px;
		text-align: left;
		margin-top: 14px;
	}
	.lp-heading--tight {
		margin-bottom: 32px;
	}
	.lp-btn {
		min-height: 56px;
		padding: 14px 20px;
		font-size: 17px;
	}
	.lp-btn--icon .lp-btn-body {
		gap: 12px;
	}
	.lp-textLink {
		font-size: 16px;
	}

	/* nav : スマホは 3列×2段のタブ表示 */
	.lpNav .lp-inner {
		padding: 0;
	}
	.lpNav-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
	.lpNav-list li {
		border-right: 1px solid var(--lp-border);
		border-bottom: 1px solid var(--lp-border);
	}
	.lpNav-list li:nth-child(3n) {
		border-right: 0;
	}
	.lpNav-list li:nth-child(n + 4) {
		border-bottom: 0;
	}
	.lpNav-list a {
		justify-content: center;
		height: 44px;
		padding: 0 4px;
		font-size: 13px;
		letter-spacing: -0.02em;
	}

	/* hero : スマホでは 16:9 に切り抜いて文字を大きく見せる（--sp-pos / --sp-ratio で個別調整） */
	.lpHero {
		padding-bottom: 40px;
	}
	.lpHero-slide--img {
		aspect-ratio: var(--sp-ratio, 16 / 9);
	}
	.lpHero-slide--img img {
		object-fit: cover;
		object-position: var(--sp-pos, 50% 50%);
	}
	/* 左右端まで要素があるバナーは切り抜かず、上下に余白を付けて全体表示（全スライドの高さを揃える） */
	.lpHero-slide--contain {
		background: var(--lp-cream);
	}
	.lpHero-slide--contain img {
		object-fit: contain;
	}
	.lp .lpHero-dots {
		margin-top: 20px;
	}
	.lp .lpHero-cards {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 20px;
	}
	.lpHero-card-body {
		gap: 6px;
		padding: 8px 8px 8px 6px;
	}
	.lpHero-card-body .lp-iconCircle {
		width: 28px;
		height: 28px;
	}
	.lpHero-card-body .lp-iconCircle svg {
		width: 14px;
		height: 14px;
	}
	.lpHero-card-body .lp-iconCircle img {
		max-height: 16px;
		width: auto;
	}
	.lpHero-card-label {
		font-size: 12px;
		letter-spacing: -0.03em;
		white-space: nowrap;
	}
	.lpHero-card-body .lp-arrowCircle {
		width: 18px;
		height: 18px;
	}
	.lpHero-card-body .lp-arrowCircle svg {
		width: 9px;
		height: 9px;
	}

	/* split */
	.lpSplit {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 20px;
	}
	.lpSplit-visual {
		width: 100%;
		max-width: none;
	}
	.lpSplit-visual--logo {
		aspect-ratio: 16 / 10;
	}
	.lpSplit-visual--logo img {
		width: 60%;
		max-width: 240px;
	}
	.lpSplit-tag {
		font-size: 15px;
		margin-bottom: 12px;
	}
	.lpSplit-ttl {
		font-size: 22px;
	}
	.lpSplit-text {
		margin-top: 12px;
		font-size: 15px;
	}
	.lpSplit-note {
		font-size: 13px;
	}
	.lpSplit-btns {
		gap: 12px;
		margin-top: 20px;
	}
	.lpSplit-btns .lp-btn--outline {
		padding: 14px 20px;
		font-size: 16px;
	}

	/* price */
	.lpPrice-lead {
		font-size: 16px;
		margin-top: 12px;
	}
	.lpPrice-lead .lp-textLink {
		font-size: 16px;
	}
	.lpPrice-date {
		font-size: 14px;
		margin-top: 12px;
	}
	.lpPrice-tab {
		padding: 12px 16px;
		font-size: 17px;
	}
	.lpPrice-table {
		min-width: 0;
	}
	.lpPrice-table thead th {
		padding: 10px 6px;
		font-size: 13px;
	}
	.lpPrice-table thead th:first-child {
		width: 34%;
	}
	.lpPrice-table tbody th {
		padding: 12px 6px;
		font-size: 14px;
	}
	.lpPrice-table thead th:first-child {
		width: 31%;
	}
	.lpPrice-table .lpPrice-plan {
		flex-wrap: wrap;
		gap: 4px;
		line-height: 1.3;
	}
	.lpPrice-table tbody td {
		padding: 12px 6px;
		font-size: 17px;
	}
	.lpPrice-table .lpPrice-unit {
		font-size: 11px;
		margin-left: 2px;
	}
	.lpPrice-table .lpPrice-sub th {
		padding: 8px;
		font-size: 14px;
	}
	.lpPrice-table .lpPrice-row--small th {
		padding: 10px 6px;
		font-size: 12px;
	}
	.lpPrice-table .lpPrice-row--small td {
		padding: 10px 6px;
		font-size: 14px;
	}
	.lpPrice-table .lpPrice-row--small .lpPrice-unit {
		font-size: 10px;
	}
	.lpPrice-table .lpPrice-empty {
		white-space: normal;
		font-size: 11px;
		line-height: 1.4;
	}
	.lpPrice-help {
		width: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 13px;
	}
	.lpPrice-modal {
		padding: 16px;
	}
	.lpPrice-modal-head {
		height: 64px;
		gap: 12px;
		padding: 0 48px 0 16px;
	}
	.lpPrice-modal-icon {
		width: 40px;
		height: 30px;
	}
	.lpPrice-modal-ttl {
		font-size: 20px;
	}
	.lpPrice-modal-body {
		gap: 12px;
		padding: 24px 20px;
	}
	.lpPrice-modal-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.lpPrice-modal-row dt {
		font-size: 16px;
	}
	.lpPrice-modal-row dd {
		font-size: 15px;
	}
	.lpPrice-modal-close {
		top: -22px;
		right: -8px;
		width: 48px;
		height: 48px;
	}
	.lpPrice-modal-close img {
		width: 48px;
		height: 48px;
	}
	.lpPrice-notes {
		font-size: 12px;
	}
	.lpPrice .lp-textLink--center {
		margin-top: 28px;
	}

	/* points */
	.lpPoints-list {
		gap: 14px;
	}
	.lpPoints-item {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px 14px;
		padding: 20px;
	}
	.lpPoints-num {
		width: 52px;
		height: 52px;
		font-size: 26px;
	}
	.lpPoints-body {
		flex: 1 1 0;
	}
	.lpPoints-ttl {
		font-size: 20px;
		margin-bottom: 6px;
		display: flex;
		align-items: center;
		min-height: 52px;
	}
	.lpPoints-text {
		font-size: 15px;
	}
	.lpPoints-note {
		font-size: 13px;
	}
	.lpPoints-body .lpPoints-text,
	.lpPoints-body .lpPoints-note {
		margin-left: -66px;
		width: calc(100% + 66px);
	}
	.lpPoints-img {
		width: 100%;
		height: auto;
		max-height: 200px;
		margin-top: 4px;
	}
	.lpPoints-img img {
		max-height: 200px;
	}
	.lpPoints-img--logo img {
		width: 90%;
	}
	.lpPoints-img--3q img {
		height: 180px;
	}

	/* payment */
	.lpPayment-cards {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.lpPayment-card-head {
		padding: 14px;
		font-size: 17px;
	}
	.lpPayment-card-body {
		padding: 18px;
		font-size: 15px;
	}
	.lpPayment-btn {
		margin-top: 28px;
		min-height: 64px;
		font-size: 15px;
	}
	.lp-btn--icon {
		padding: 12px 12px;
	}
	.lp-btn--icon .lp-iconCircle {
		width: 32px;
		height: 32px;
	}
	.lp-btn--icon .lp-iconCircle svg {
		width: 16px;
		height: 16px;
	}

	/* area */
	.lpArea-search {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px;
	}
	.lpArea-search-icon {
		display: none;
	}
	.lpArea-search input {
		flex: 1 1 100%;
		font-size: 16px;
		padding: 12px 14px;
	}
	.lpArea-search button {
		flex: 1 1 100%;
		padding: 12px;
		font-size: 16px;
	}
	.lpArea-result {
		font-size: 14px;
	}
	.lpArea-tabs {
		gap: 8px;
		margin-top: 24px;
	}
	.lpArea-tab {
		padding: 10px 14px;
		font-size: 14px;
	}
	.lpArea-split {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		margin-top: 24px;
	}
	.lpArea-list {
		flex: none;
		width: 100%;
	}
	.lpArea-list {
		gap: 10px;
	}
	.lpArea-row {
		flex-direction: column;
		gap: 4px;
		padding: 14px 16px;
	}
	.lpArea-row dt {
		width: auto;
		font-size: 17px;
	}
	.lpArea-row dd {
		font-size: 15px;
	}
	.lpArea-map {
		width: 100%;
		max-width: none;
	}
	.lpArea-note {
		font-size: 13px;
	}
	.lpArea .lp-textLink--center {
		margin-top: 28px;
	}

	/* apply */
	.lpApply-cols {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.lpApply-card {
		gap: 18px;
		padding: 28px 20px;
	}
	.lpApply-icon {
		width: 56px;
		height: 56px;
	}
	.lpApply-ttl {
		font-size: 22px;
	}
	.lpApply-text {
		margin-top: 8px;
		font-size: 15px;
	}
	.lpApply-card .lp-btn--outline {
		font-size: 17px;
	}
}

/* ---------- PCのみ改行 ---------- */
@media screen and (max-width: 768px) {
	.lp-brPc {
		display: none;
	}
}