/*===============================================================================
共通
================================================================================*/
:root{
	--c-main: rgba(255, 68, 30, 1);
	--c-main--light: rgba(110, 35, 20, 1);
	--c-gray: rgba(123, 123, 123, 1);
	--c-bg--light: rgba(244, 243, 238, 1);
	--g-sec--md: 5rem;
	--g-sec--sm: 2.5rem;
	--g-sec--xs: clamp(1.5rem, 0.786rem + 1.9vw, 2.5rem);
	--ff-imp: impact, var(--ff-g);
}
body{
	background-color: rgba(17, 17, 17, 1);
	font-size: 1rem;
}
body:has(.lp-extr-hamburger__container.active){
	height: 100%;
	overflow: hidden;
}
#body_wrap.postid-3123{
	background-image: none;
}

#header, #fix_header, #footer{
	display: none;
}

.lp-extr{
	padding-top: var(--lp-extr-headerH);
}

/*===============================
* テキスト
* =================================*/
/* メインカラー、サイズ小 */
.lp-extr__sub-en{
	letter-spacing: .2em;
	font-size: .75rem;
	font-weight: var(--fw-lg);
	font-family: var(--ff-g);
	color: var(--c-main);
}
/* 灰色、極太、サイズ中 */
.lp-extr__sub-jp{
	line-height: var(--lh-sm);
	font-weight: var(--fw-xl);
	font-size: 1.5rem;
	color: var(--c-gray);
}

/* サイズ大 */
.lp-extr__main-en{
	line-height: var(--lh-sm);
	font-size: clamp(5rem, 4.286rem + 1.9vw, 6rem);
	font-weight: var(--fw-md);
	font-family: var(--ff-imp);
}
.lp-extr__main-en.--size-sm{
	font-size: 2.5rem;
}

.lp-extr__main-jp{
	line-height: var(--lh-sm);
	font-size: 5rem;
	font-weight: var(--fw-xl);
	font-family: var(--ff-g);
}
.lp-extr__main-jp.--size-sm{
	font-size: clamp(1.25rem, 0.357rem + 2.38vw, 2.5rem);
}



/*===============================================================================
ヘッダー
================================================================================*/
.lp-extr-header{
	position: fixed;
	z-index: 99999;
	transition: var(--ani-t--late) ease-out;
}

.lp-extr-header__inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--g-sec--sm);
	padding: .25rem var(--g-sec--sm);
	background: rgba(17, 17, 17, 1);
}

/*===============================
* タイトル
* =================================*/
.lp-extr-header__title{
	position: relative;
	z-index: 10;
	color: var(--c-main);
	opacity: 0;
	transform: translateY(-100%);
	transition: var(--ani-t--normal) ease-out;
}
/* スクロールされた時＆ハンバーガーメニューが開いている時 */
[data-scrolled="true"] .lp-extr-header__title, 
.lp-extr-header:has(.lp-extr-hamburger.active) .lp-extr-header__title{
	opacity: 1;
	transform: translateY(0%);
}

/*===============================
* ロゴ
* =================================*/
.lp-extr-header__logo{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 15rem;
	transition: var(--ani-t--normal) ease-out;
}
/* スクロールされた時＆ハンバーガーメニューが開いている時 */
[data-scrolled="true"] .lp-extr-header__logo, 
.lp-extr-header:has(.lp-extr-hamburger.active) .lp-extr-header__logo{
	opacity: 0;
	transform: translateY(-100%);
}

/*===============================
* グロナビ
* =================================*/
.lp-extr-header__nav{
	display: none;
	margin-left: auto;
}
@media (min-width: 960px){
	.lp-extr-header__nav{
		display: block;
	}
}
.lp-extr-header__list{
	display: flex;
	gap: .25rem;
}
.lp-extr-header__list li{
	display: flex;
	flex-direction: column;
	min-width: 6rem;
}
.lp-extr-header__list a{
	display: inline-block;
	width: 100%;
	padding: .625rem .75rem;
	text-align: center;
	font-size: .75rem;
	font-weight: var(--fw-lg);
	color: var(--c-light);
	transition: var(--ani-t--normal) ease-out;
}
.lp-extr-header__list a:is(:hover, :focus){
	background: rgba(114, 114, 114, 1);
}

/*===============================
* ナビ下の下線
* =================================*/
.lp-extr-header__line{
	display: block;
	width: 100%;
	height: 4px;
	margin-top: -.5rem;
	background: transparent;
	transform: translateY(-100%);
	transition: var(--ani-t--normal) ease-out;
}
/* スクロールされた時＆ハンバーガーメニューが開いている時 */
[data-scrolled="true"] .lp-extr-header__line, 
.lp-extr-header:has(.lp-extr-hamburger.active) .lp-extr-header__line{
	margin-top: .5rem;
	background: var(--c-main);
	transform: translateY(0%);
}


/*===============================================================================
ハンバーガーメニュー
================================================================================*/
.lp-extr-hamburger {
	position: relative;
	width: 44px;
	height: 44px;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	padding: 0;
	background-color: transparent;
	border: none;
	outline: none;
	cursor: pointer;
}
@media (min-width: 960px){
	.lp-extr-hamburger{
		display: none;
	}
}

/* 共通の「線」のスタイル */
.lp-extr-hamburger__bar {
	position: absolute;
	width: 30px;
	height: 2px;
	background-color: var(--c-light);
	transition: var(--ani-t--normal) ease-out;
}

/* 各線の初期位置 */
.lp-extr-hamburger__bar.--top {
	top: 12px;
}
.lp-extr-hamburger__bar.--mid {
	top: 20px;
}
.lp-extr-hamburger__bar.--bot {
	top: 28px;
}

/* --- アクティブ状態（「×」になった時）のスタイル --- */
/* 真ん中の線を消す */
.lp-extr-hamburger.active .lp-extr-hamburger__bar.--mid {
	opacity: 0;
}
/* 上の線を移動させて回転させる */
.lp-extr-hamburger.active .lp-extr-hamburger__bar.--top {
	top: 20px;
	transform: rotate(45deg);
}
/* 下の線を移動させて反対方向に回転させる */
.lp-extr-hamburger.active .lp-extr-hamburger__bar.--bot {
	top: 20px;
	transform: rotate(-45deg);
}

/*===============================
* ハンバーガーメニュー内
* =================================*/
.lp-extr-hamburger__container {
	position: fixed;
	top: 0;
	right: -100%;
	z-index: 5;	
	width: 100%;
	height: 100vh;
	padding-top: calc( var(--lp-extr-headerH) + 2rem );
	padding-left: var(--swl-pad_container,0);
	padding-right: var(--swl-pad_container,0);
	background-color: rgba(13, 13, 13, 0.95);
	overflow-y: scroll;
	transition: var(--ani-t--normal) ease-out;
}
.lp-extr-hamburger__container.active {
	right: 0;
}

.lp-extr-hamburger__nav ul {
	margin-bottom: 1.5rem;
}

.lp-extr-hamburger__nav ul li:not(:last-of-type) {
	margin-bottom: .5rem;
}

.lp-extr-hamburger__nav ul li a {
	display: block;
	width: 100%;
	padding: .625rem;
	border-bottom: 1px dotted var(--c-gray);
	font-weight: var(--fw-lg);
	font-size: .875rem;
	color: var(--c-light);
}

.lp-extr-hamburger__container .lp-extr-cta-btns{
	gap: 1.5rem;
}


/*===============================================================================
mv
================================================================================*/
.lp-extr-mv{
	--line-weight: 4px;
	--line-style: solid;
	--line-color: var(--c-main);
	margin-bottom: var(--g-sec--lg);
	border-top: var(--line-weight) var(--line-style) var(--line-color);
}
.lp-extr-mv__inner{
	--count: 1;
	--gap: 0rem;
	--media-width: 100%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	border-bottom: 24px solid var(--c-main);
}
@media (min-width: 768px){
	.lp-extr-mv__inner{
		--media-width: 122%;
		flex-direction: row;
	}
}

/*===============================
* メディア
* =================================*/
.lp-extr-mv__media{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.lp-extr-mv__media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/*===============================
* 線
* =================================*/
.lp-extr-mv__line{
	align-self: stretch;
	border-top: var(--line-weight) var(--line-style) var(--line-color);
	border-right: var(--line-weight) var(--line-style) var(--line-color);
}
/*===============================
* コンテンツ
* =================================*/
.lp-extr-mv__content{
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	min-width: calc( 25rem + clamp(1rem, -0.071rem + 2.86vw, 2.5rem) * 2 );
	padding: 1.5rem clamp(1rem, -0.071rem + 2.86vw, 2.5rem);
	background-color: var(--c-bg--light);
}
@media (min-width: 768px){
	.lp-extr-mv__container{
		max-width: 416px;
	}
}
.lp-extr-mv__head{
	margin-bottom: .75rem;
}
.lp-extr-mv__sub{
	margin-bottom: .25rem;
}
.lp-extr-mv__title{
	display: flex;
	flex-direction: column;
	color: var(--c-dark);
}
.lp-extr-mv__title strong{
	color: var(--c-main);
}
.lp-extr-mv__textArea{
	margin-bottom: .75rem;
	padding: .625rem 0;
	color: var(--c-dark);
}
@media (min-width: 768px){
	.lp-extr-mv__textArea{
		padding: .625rem 1rem;

	}
}
.lp-extr-mv__btn-wrap{
	text-align: center;
}
/*===============================
* ボタン
* =================================*/
.lp-extr-mv__btn{
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-width: fit-content;
	padding: 2rem 1rem;
	text-align: center;
	background: var(--c-main);
	font-size: 1.25rem;
	color: var(--c-light);
	cursor: pointer;
	overflow: hidden;
	transition: var(--ani-t--normal) ease-out;
}
.lp-extr-mv__btn::before,
.lp-extr-mv__btn::after{
	--icon-size: 2rem;
	--icon-position: -1px;
	position: absolute;
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
}
.lp-extr-mv__btn::before{
	bottom: var(--icon-position);
	right: var(--icon-position);
	border-width: 0 0 var(--icon-size) var(--icon-size);
	border-color: transparent transparent var(--c-bg--light) transparent;
}
.lp-extr-mv__btn::after{
	bottom: calc( var(--icon-position) - 2px );
	right: calc( var(--icon-position) - 2px );
	border-width: 0 0 var(--icon-size) var(--icon-size);
	border-color: transparent transparent var(--c-main) transparent;
	transition: var(--ani-t--normal) ease-out;
}
/* アニメーション */
.lp-extr-mv__btn:is(:hover, :focus)::after{
	opacity: 0;
	transform: translate(100%);
}



/*===============================================================================
PROBLEM
================================================================================*/
.lp-extr-problem{
	margin-bottom: var(--g-sec--lg);
}
.lp-extr-problem__flex{
	--count: 1;
	--gap: var(--g-sec--sm);
	--head-width: 100%;
	--body-width: calc( 200% - var(--head-width) );
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	margin-bottom: var(--g-sec--lg);
}
@media (min-width: 960px){
	.lp-extr-problem__flex{
		--count: 2;
	}
}

.lp-extr-problem__head{
	max-width: fit-content;
	width: calc( ( var(--head-width) - var(--gap) * (var(--count) - 1) ) / var(--count) ); 
}
.lp-extr-problem__sub{
	display: block;
	margin-bottom: 1.5rem;
}
.lp-extr-problem__title{
	display: flex;
	flex-direction: column;
	margin-bottom: var(--g-sec--sm);
}
.lp-extr-problem__lead{
	color: var(--c-light);
}
.lp-extr-problem__body{
	flex-grow: 1;
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}

.lp-extr-problem__list li:not(:last-of-type){
	margin-bottom: var(--g-sec--sm);
}
.lp-extr-problem__list li{
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--c-gray);
}
.lp-extr-problem__number{
	line-height: var(--lh-xs);
	font-size: 2.5rem;
	font-family: var(--ff-imp);
	color: var(--c-main--light);
}
.lp-extr-problem__message{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.lp-extr-problem__row{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	line-height: var(--lh-sm);
	font-weight: var(--fw-xl);
}
@media (min-width: 600px){
	.lp-extr-problem__row{
		flex-direction: row;
		align-items: baseline;
	}
}
/* 強調文字 */
.lp-extr-problem__row strong{
	color: var(--c-main);
}
.lp-extr-problem__row strong:nth-of-type(2){
	margin-bottom: 1.5rem;
}
@media (min-width: 600px){
	.lp-extr-problem__row strong:nth-of-type(1){
		margin-right: .25em;
	}
	.lp-extr-problem__row strong:nth-of-type(2){
		margin-bottom: 0;
	}
}
/* 白字 */
.lp-extr-problem__row span{
	font-size: clamp(1.5rem, 0.786rem + 1.9vw, 2.5rem);
}



/*===============================================================================
WORKS
================================================================================*/
.lp-extr-works{
	margin-bottom: var(--g-sec--lg);
}
.lp-extr-works__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.lp-extr-works__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	object-fit: cover;
	opacity: .3;
}
.lp-extr-works__head{
	margin-bottom: var(--g-sec--xs);
}
.lp-extr-works__sub{
	display: block;
	margin-bottom: 1.5rem;
}
.lp-extr-works__title{
	margin-bottom: 1.5rem;
}
.lp-extr-works__list{
	--count: 1;
	--gap: var(--g-sec--sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-sec--sm) var(--gap);
}
@media (min-width: 600px){
	.lp-extr-works__list{
		--count: 2;
	}
}
.lp-extr-works__list li{
	flex-grow: 1;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.lp-extr-works__img{
	margin-bottom: 1.5rem;
}
.lp-extr-works__img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.lp-extr-works__name{
	text-align: center;
	line-height: var(--lh-sm);
	font-weight: var(--fw-xl);
	font-size: 1.5rem;
}



/*===============================================================================
WHY
================================================================================*/
.lp-extr-why{
	margin-bottom: var(--g-sec--lg);
}
/*===============================
* ヘッド
* =================================*/
.lp-extr-why__head{
	margin-bottom: var(--g-sec--md);
}
.lp-extr-why__sub{
	display: block;
	margin-bottom: 1.5rem;
}
.lp-extr-why__title{
	display: flex;
	flex-direction: column;
	margin-bottom: 1.5rem;
}

/*===============================
* カード
* =================================*/
.lp-extr-why__cards{
	--count: 1;
	--gap: 1rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--g-sec--sm) var(--gap);
}
@media (min-width: 600px){
	.lp-extr-why__cards{
		--count: 2;
	}
}
@media (min-width: 960px){
	.lp-extr-why__cards{
		--count: 3;
	}
}
.lp-extr-why__card{
	display: flex;
	flex-direction: column;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.lp-extr-why__label{
	display: block;
	width: 12.5rem;
	padding: .5rem;
	text-align: center;
	letter-spacing: .2em;
	background: var(--c-main);
	font-weight: var(--fw-lg);
	color: var(--c-light);
}
/*===============================
* 背景色
* =================================*/
.lp-extr-why__content{
	flex-grow: 1;
	padding: 1rem .5rem;
	background: rgba(53, 53, 53, 1);
}
.lp-extr-why__img{
	margin-bottom: .5rem;
}
.lp-extr-why__img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.lp-extr-why__reason{
	margin-bottom: .5rem;
	text-align: center;
	font-weight: var(--fw-lg);
	font-size: 1.25rem;
}
.lp-extr-why__desc{
	color: var(--c-gray);
}



/*===============================================================================
PRICING
================================================================================*/
.lp-extr-pricing{
	margin-bottom: var(--g-sec--lg);
}
.lp-extr-pricing__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.lp-extr-pricing__inner::before{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	content: "";
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	background: var(--c-bg--light);
}

/*===============================
* ヘッド
* =================================*/
.lp-extr-pricing__head{
	margin-bottom: var(--g-sec--md);
}
.lp-extr-pricing__sub{
	display: block;
	margin-bottom: 1.5rem;
}
.lp-extr-pricing__title{
	display: flex;
	flex-direction: column;
	margin-bottom: 1.5rem;
	color: var(--c-dark);
}

/*===============================
* カード
* =================================*/
.lp-extr-pricing__cards{
	--count: 1;
	--gap: 1rem;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--g-sec--sm) var(--gap);
}
@media (min-width: 600px){
	.lp-extr-pricing__cards{
		--count: 2;
	}
}
@media (min-width: 960px){
	.lp-extr-pricing__cards{
		--count: 3;
	}
}
.lp-extr-pricing__card{
	display: flex;
	flex-direction: column;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: 1.5rem .5rem .5rem;
	background: rgba(229, 228, 220, 1);
}
.lp-extr-pricing__card.--strong{
	background: rgba(175, 139, 55, 1);
}
/*===============================
* 背景色
* =================================*/
.lp-extr-pricing__container{
	height: 100%;
	padding: .75rem 1rem;
	background: var(--c-bg--light);
}
.lp-extr-pricing__label{
	display: block;
	margin-bottom: 1.5rem;
	letter-spacing: .2em;
	font-size: 1.25rem;
	font-weight: var(--fw-xl);
	color: var(--c-main);
}
.lp-extr-pricing__price{
	display: flex;
	flex-direction: row;
	align-items: baseline;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--c-gray);
}
@media (min-width: 600px){
	.lp-extr-pricing__price{
		flex-direction: column;
		align-items: normal;
	}
}
.lp-extr-pricing__price .lp-extr__main-en{
	font-size: clamp(3.75rem, 3.333rem + 1.11vw, 4rem);
	color: var(--c-dark);
}
@media (min-width: 960px){
	.lp-extr-pricing__price .lp-extr__main-en{
		font-size: clamp(4rem, 6.67vw, 6rem);
	}
}
.lp-extr-pricing__price .lp-extr__sub-jp{
	text-align: right;
	line-height: var(--lh-xs);
}
.lp-extr-pricing__list{
	margin-bottom: 1rem;
}
.lp-extr-pricing__list li:not(:last-of-type){
	margin-bottom: .75rem;
}
.lp-extr-pricing__list li{
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 .5rem .5rem .5rem;
	border-bottom: 1px dotted var(--c-gray);
	font-weight: var(--fw-sm);
	color: var(--c-dark);
}
.lp-extr-pricing__icon{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .5rem 0 .5rem .75rem;
	border-color: transparent transparent transparent var(--c-main);
}
.lp-extr-pricing__content{
	font-weight: var(--fw-sm);
	color: var(--c-main);
}



/*===============================================================================
services
================================================================================*/
.lp-extr-services{
	margin-bottom: var(--g-sec--lg);
}
/*===============================
* ヘッド
* =================================*/
.lp-extr-services__head{
	margin-bottom: var(--g-sec--md);
}
.lp-extr-services__sub{
	display: block;
	margin-bottom: 1.5rem;
}
.lp-extr-services__title{
	display: flex;
	flex-direction: column;
	margin-bottom: 1.5rem;
}

/*===============================
* カード
* =================================*/
.lp-extr-services__cards{
	--count: 1;
	--gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-sec--sm) var(--gap);
}
@media (min-width: 600px){
	.lp-extr-services__cards{
		--count: 2;
	}
}
@media (min-width: 960px){
	.lp-extr-services__cards{
		--count: 3;
	}
}
.lp-extr-services__card{
	display: flex;
	flex-direction: column;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.lp-extr-services__label{
	line-height: var(--lh-xs);
	font-size: 2.5rem;
	font-family: var(--ff-imp);
	color: var(--c-main--light);
}
/*===============================
* 背景色
* =================================*/
.lp-extr-services__content{
	flex-grow: 1;
	padding: 1rem;
	background: rgba(53, 53, 53, 1);
}
.lp-extr-services__img{
	margin-bottom: .5rem;
}
.lp-extr-services__img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.lp-extr-services__reason{
	margin-bottom: .5rem;
	text-align: center;
	font-weight: var(--fw-lg);
	font-size: 1.25rem;
}
.lp-extr-services__desc{
	color: var(--c-gray);
}



/*===============================================================================
MESSAGE
================================================================================*/
.lp-extr-message{
	margin-bottom: var(--g-sec--lg);
}
.lp-extr-message__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.lp-extr-message__inner::before, 
.lp-extr-message__inner::after{
	position: absolute;
	left: calc( 50% - 50vw );
	z-index: 1;
	content: "";
	width: 100vw;
	height: 4px;
	background: var(--c-main);
}
.lp-extr-message__inner::before{
	top: 0;
}
.lp-extr-message__inner::after{
	bottom: 0;
}
.lp-extr-message__flex{
	--count: 1;
	--gap: var(--g-sec--sm);
	--media-width: 78%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--gap);
	max-width: var(--width-sm);
	margin-inline: auto;
}
@media (min-width: 600px){
	.lp-extr-message__flex{
		--count: 2;
	}
}
/*===============================
* 画像
* =================================*/
.lp-extr-message__media{
	flex-grow: 1;
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.lp-extr-message__media img{
	display: block;
	width: 100%;
	height: 100%;
	margin-bottom: 1rem;
	padding: .5rem;
	border: 2px solid var(--c-main);
	object-fit: cover;
	object-position: 50% 50%;
}

/*===============================
* コンテナ
* =================================*/
.lp-extr-message__container{
	flex-grow: 1;
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.lp-extr-message__head{
	margin-bottom: 1.5rem;
}
.lp-extr-message__sub{
	display: block;
	margin-bottom: 1.5rem;
}
.lp-extr-message__title{
	margin-bottom: 1.5rem;
}
.lp-extr-message__lead{
	margin-bottom: 1.5rem;
	padding: 0 0 0 1.5rem;
	border-left: 8px solid var(--c-main);
}
@media (min-width: 600px){
	.lp-extr-message__lead{
		padding: 1.25rem 0 1.25rem 1.5rem;
	}
}



/*===============================================================================
AFTER SERVICE
================================================================================*/
.lp-extr-after{
	margin-bottom: var(--g-sec--lg);
}
.lp-extr-after__inner{
	position: relative;
	padding-bottom: var(--g-sec--lg);
}
.lp-extr-after__inner::before{
	position: absolute;
	bottom: 0;
	left: calc( 50% - 50vw );
	z-index: 1;
	content: "";
	width: 100vw;
	height: 4px;
	background: var(--c-main);
}

/*===============================
* ヘッド
* =================================*/
.lp-extr-after__head{
	margin-bottom: var(--g-sec--md);
}
.lp-extr-after__sub{
	display: block;
	margin-bottom: 1.5rem;
}
.lp-extr-after__title{
	display: flex;
	flex-direction: column;
	margin-bottom: 1.5rem;
}

/*===============================
* ボディ
* =================================*/
.lp-extr-after__body{
	max-width: fit-content;
	margin-inline: auto;
}
.lp-extr-after__list li:not(:last-of-type){
	margin-bottom: var(--g-sec--xs);
}
.lp-extr-after__list li{
	display: flex;
	flex-direction: column;
	gap: var(--g-sec--xs);
}
@media (min-width: 768px){
	.lp-extr-after__list li{
		flex-direction: row;
	}
}
.lp-extr-after__list-head{
	display: flex;
	align-items: baseline;
	gap: 1em;
	min-width: 15em;
	line-height: var(--lh-sm);
	font-weight: var(--fw-xl);
	font-size: 1.5rem;
}
.lp-extr-after__list-icon{
	width: 1em;
}
.lp-extr-after__list-body{
	color: var(--c-gray);
}



/*===============================================================================
PROCESS
================================================================================*/
.lp-extr-process{
	margin-bottom: var(--g-sec--lg);
}
.lp-extr-process__head{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--g-sec--lg);
}
.lp-extr-process__head strong{
	color: var(--c-main);
}
.lp-extr-process__body{
	margin-bottom: var(--g-sec--md);
}
.lp-extr-process__sub{
	margin-bottom: 1.5rem;
}
.lp-extr-process__title{
	margin-bottom: 1.5rem;
}

/*===============================
* カード
* =================================*/
.lp-extr-process__cards{
	--count: 1;
	--gap: var(--g-sec--sm);
	--media-width: 100%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
	max-width: var(--width-sm);
	margin-inline: auto;
}
@media (min-width: 768px){
	.lp-extr-process__cards{
		--count: 5;
	}
}

.lp-extr-process__card{
	display: flex;
	flex-direction: column;
	max-width: 30rem;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
/* 数字 */
.lp-extr-process__label{
	line-height: var(--lh-xs);
	font-size: 2.5rem;
	font-family: var(--ff-imp);
	color: var(--c-main--light);
}
/* カード */
.lp-extr-process__content{
	position: relative;
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	padding: 1rem .25rem;
	text-align: center;
	background: rgba(53, 53, 53, 1);
}
@media (min-width: 768px){
	.lp-extr-process__content{
		flex-direction: column;
	}
}
/* アイコン */
.lp-extr-process__icon{
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 65%) rotate(90deg);
	width: 1.5rem;
}
@media (min-width: 768px){
	.lp-extr-process__icon{
		top: 50%;
		left: 100%;
		transform: translate(35%,-50%);
	}
}
.lp-extr-process__img{
	max-width: 128px;
	width: 100%;
}
.lp-extr-process__desc{
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
}



/*===============================================================================
CTA
================================================================================*/
.lp-extr-cta__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}

/* 背景画像 */
.lp-extr-cta__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
.lp-extr-cta__bgi img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* コンテナ */
.lp-extr-cta__container{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-sec--md);
}
.lp-extr-cta__lead{
	display: flex;
	justify-content: center;
}
.lp-extr-cta__logo{
	width: 240px;
	margin-inline: auto;
}

/*===============================
* ボタン
* =================================*/
.lp-extr-cta-btns{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--g-sec--md);
	width: 100%;
}

.lp-extr-cta__btn {
	--icon-size: 1.75rem;
	--bd-width: 1px;
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 25rem;
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
	color: var(--c-light);
}

/* 右下のアイコン */
.lp-extr-cta__btn::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc( var(--icon-size) - 5px ); /* ボタンとアイコンの余白 */
	height: calc( var(--icon-size) - 5px );
	background-color: var(--c-light);
	/* 三角形にする */
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	transition: var(--ani-t--normal) ease-out;
}
/* ホバー時 */
.lp-extr-cta__btn:is(:hover, :focus)::after{
	bottom: -2px;
	right: -2px;
}

.lp-extr-cta__btn-container{
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	height: 100%;
	padding: 2rem 1.75rem;
	outline: var(--bd-width) solid var(--c-light);
	outline-offset: calc( var(--bd-width) * -1 );
	/* 【重要】右下を斜めに切り落とす */
	clip-path: polygon(
		0 0,                          /* 左上 */
		100% 0,                       /* 右上 */
		100% calc(100% - var(--icon-size)),       /* 右下の切り欠き開始点 */
		calc(100% - var(--icon-size)) 100%,       /* 右下の切り欠き終了点 */
		0 100%                        /* 左下 */
	);
	transition: var(--ani-t--normal) ease-out;
}
/* ホバー時 */
.lp-extr-cta__btn-container:is(:hover, :focus) {
	background-color: rgba(255, 255, 255, 0.1);
}

/* 右下の白い斜め線 */
.lp-extr-cta__btn-container::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc( var(--icon-size) + var(--bd-width) ); /* 切り欠きのサイズに合わせる */
	height: calc( var(--icon-size) + var(--bd-width) );
	background-color: var(--c-light);
	clip-path: polygon(100% 0, 100% 100%, 0 100%); /* 三角形にする */
}