@charset "UTF-8";
/* =========================================================
p-vnlp ベトナムLP
base
========================================================= */
body {
	font-family: var(--font-family02);
}
/* =========================================================
layout
========================================================= */
.p-lpvn {
	/*bodyタグ*/
	background-color: var(--base-color02);
}
.p-lpvnCont {
	position: relative;
	display: grid;
	grid-template-columns: 1fr clamp(300px, 40vw, 660px) 1fr;
	grid-template-areas:
	  "p-lpvnLeft p-lpvnMain p-lpvnRight";
	@media screen and (max-width:1080px){ 
		padding: 0 var(--gap02);
		grid-template-columns: clamp(300px, 55vw, 660px) 1fr;
		grid-template-areas:
			"p-lpvnLeft p-lpvnRight"
			"p-lpvnMain p-lpvnRight"
			"p-lpvnAbout p-lpvnRight"
			"p-lpvnFooter p-lpvnRight";
	}
	@media screen and (max-width:768px){
		padding: 0 var(--gap00);
		margin: 0 auto;
		grid-template-columns: 1fr;
		grid-template-areas:
			"p-lpvnLeft"
			"p-lpvnMain"
			"p-lpvnAbout"
			"p-lpvnFooter"
			"p-lpvnRight";
	}
	@media screen and (max-width:420px){ 
		padding: 0;
	}
	
}

.p-lpvnLeft {
	padding: var(--gap02);
	position: sticky;
	top: 0;
	height: 100vh;
	grid-area: p-lpvnLeft;
}
@media screen and (max-width:1080px){
	.p-lpvnLeft {
		padding: var(--gap01) 0 var(--gap00);
		height: initial;
	}
}

.p-lpvnLeft__wrap {
	position: sticky;
	top: var(--gap02);
	left: var(--gap02);
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--gap02);
	height: 100%;
}
.p-lpvnHeader {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--gap02);
}
@media screen and (max-width:1080px){
	.p-lpvnHeader {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: var(--gap01);
	}
}

.p-lpvnRight {
	padding: var(--gap02);
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	grid-area: p-lpvnRight;
	@media screen and (max-width:768px){
		display: none;
	}
}
.p-lpvnRight__wrap {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.p-lpvnMain {
	border: 3px solid var(--white01);
	background-color: var(--white01);
	grid-area: p-lpvnMain;
	height: 100%;
	@media screen and (max-width:768px){
		max-width: 480px;
		margin: 0 auto;
	}
}

.p-lpvnAbout {
	grid-area: p-lpvnAbout;
}

.p-lpvnFooter {
	position: fixed;
	bottom: var(--gap02);
	right: var(--gap02);
	grid-area: p-lpvnFooter;
}
@media screen and (max-width:1080px){
	.p-lpvnFooter {
		padding: var(--gap01) 0;
		position: relative;
		bottom: 0;
		padding: 0 var(--gap01);
	}
}


/*/ 各セクションの枠
//---------------------------------------------------*/
.p-lpvnSec {
	position: relative;
	padding: var(--gap02) var(--gap01);
	&.__beforeWhite {
		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 20px;
			top: 0px;
			left: 0;
			right: 0;
			background-color: var(--white01);
			border-radius: 0 0 100px 100px;
			z-index: 0;
		}
	}
	&.__noprl {
		padding: var(--gap01) 0;
	}

	/* 薄茶色 - 背景 */
	&.__style03 {
		position: relative;
		z-index: 0;
		&::before {
			content: "";
			position: absolute;
			top: 84px;
			left: 0;
			right: 0;
			z-index: -1;
			height: calc(100% - 84px);
			border-radius: var(--radius02);
			background-color: var(--base-color03);
		}
	}
}

/*/ 各セクションの共通タイトル
//---------------------------------------------------*/
/*英語タイトル*/
.p-lpvnSec__head {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.p-lpvnSec__headEn {
	line-height: 1;
	color: var(--accent-color02);
	font-size: var(--fs-huge);
	font-family: var(--font-family02);
}
.p-lpvnSec__headSub {
	color: var(--accent-color02);
	font-size: var(--fs-min);
}

/*タイトル*/
.p-lpvnSec__title {
	position: relative;
	padding: var(--gap00) 0;
	margin: var(--gap00) 0;
	padding-top: var(--gap01);
	margin-top: var(--gap01);
	font-size: var(--fs-large);
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 32px;
		height: 2px;
		border-top: 2px dotted var(--accent-color01);
	}
}

.p-lpvnSpnav {
	display: none;
	font-size: var(--fs-mid);
	font-family: var(--font-family02);
}
@media screen and (max-width:1080px){
	.p-lpvnSpnav {
		display: flex;
		align-items: center;
		gap: var(--gap00);
		cursor: pointer;
	}
	.p-lpvnSpnav__bar {
		position: relative;
		width: 24px;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: -4px;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
			height: 2px;
			background-color: var(--base-color01);
		}
		&::after {
			top: 4px;
		}

		&.__active {
			&::before,
			&::after {
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			&::before {
				rotate: 45deg;
			}
			&::after {
				rotate: -45deg;
			}

		}
	}
}

/* =========================================================
sectionごと
========================================================= */
/*/ レフト ヘッダーやナビ周り
//---------------------------------------------------*/
.p-lpvnLogo {
	display: flex;
	align-items: center;
	gap: var(--gap02);
@media screen and (max-width:1080px){
	gap: var(--gap01);
}
}
.p-lpvnLogo__img {
	max-width: 110px;
	width: 100%;
}
.p-lpvnLogo__badge {
	display: flex;
	align-items: center;
	background-color: var(--white01);
	border: 1px solid var(--accent-color03);
	border-radius: 100px;
}
.p-lpvnLogo__badgeIcon {
	width: 24px;
}
.p-lpvnLogo__badgeText {
	font-family: var(--font-family02);
	font-size: var(--fs-min);
	padding: 1px .5rem;
}

.p-lpvnNav {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
@media screen and (max-width:1080px){
	.p-lpvnNav.__main {
		display: none;
	}
}
.p-lpvnNav__link {
	display: flex;
	align-items: center;
	gap: var(--gap00); 
	font-size: var(--fs-p);
	&::before {
		content: "";
		border-radius: 100px;
		width: 10px;
		height: 10px;
		translate: -10px;
		margin-left: -10px;
		opacity: 0;
		border: 2px solid var(--accent-color02);
		transition: translate var(--transition01), color var(--transition01), margin-left var(--transition01), opacity var(--transition01);
	}
	&.__active {
		color: var(--accent-color02);
		&::before {
			color: var(--accent-color02);
			translate: 0px;
			opacity: 1;
			margin-left: 0px;
		}
	}
	&:hover {
		color: var(--accent-color02);
	}

	/*スマホナビ*/
	.p-lpvnNav__link {
		&::before {
			translate: 0px;
			margin-left: 0px;
		}

	}
}


/*/ 言語切り替え
//---------------------------------------------------*/
.p-lpvnLang {
	display: flex;
	align-items: center;
	gap: var(--gap00);
}
.p-lpvnLang__item {
	display: flex;
	gap: 4px;
	align-items: center;
	color: #C3D0DA;
	font-weight: bold;
	position: relative;
	font-size: var(--fs-mid);
	transition: color var(--transition01);
	&::before {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 1.5px;
		border-radius: 100px;
		bottom: -6px;
		transform: scale(1, 1);
		transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
		transition: transform var(--transition01), background-color var(--transition01);  /*変形の時間*/
	}
	&.__active {
		color: var(--text-color01);
		pointer-events: none;
		&::before {
			background-color: var(--base-color01);
		}
	}
	&:not(.__active) {
		&::before {
			background-color: #C3D0DA;
		}
		&:hover {
			color: var(--text-color01);
			&::before {
				transform: scale(0, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
				transform-origin: left top; /*左から右に向かう*/
				background-color: var(--base-color01);
			}

		}
	}
}
.p-lpvnLang__icon {
	width: 18px;
	aspect-ratio: 1/1;
}
.p-lpvnLang__link {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}


/*/ 左下 私たちについて
//---------------------------------------------------*/
.p-lpvnAbout {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	&.__footer {
		display: none;
	}
}
@media screen and (max-width:1080px){
	.p-lpvnAbout {
		display: none;
		&.__footer {
			display: flex;
			padding: var(--gap01);
		}
	}
}
.p-lpvnAbout__sns {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	padding-bottom: var(--gap00);
	border-bottom: 1px dashed var(--border-color02);
}
.p-lpvnAbout__snsText {
	display: flex;
	gap: var(--gap00);
	font-size: var(--fs-min);
	font-family: var(--font-family02);
}
.p-lpvnAbout__snsList {
	display: flex;
	gap: var(--gap00);
}
.p-lpvnAbout__snsList__link {
	&.__fb {
		width: 20px!important;
		fill: var(--fb-color);
		svg {
			width: 20px!important;
		}
	}
	&.__tw {
		width: 20px!important;
		fill: var(--text-color01);
		svg {
			width: 20px!important;
		}
	}
}

.p-lpvnAbout__box {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	font-size: var(--fs-postp);
}
.p-lpvnAbout__boxTitle {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.p-lpvnAbout__boxTitle__icon {
	width: 24px;
}
.p-lpvnAbout__boxText {
	font-size: var(--fs-mid);
	font-weight: normal;
}
.p-lpvnAbout__boxLink {
	display: block;
	font-size: var(--fs-mid);
	font-weight: normal;
	text-decoration: underline;
	&:hover {
		text-decoration: none;
	}
}



/*/ 右 商品
//---------------------------------------------------*/
.p-lpvnRight__cv {
	display: flex;
	flex-direction: column;
	max-width: clamp(240px,17vw,320px);
}
.p-lpvnRight__cvHead {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.p-lpvnRight__cvHead__tags {
	display: flex;
	gap: .5rem;
	align-items: center;
	flex-wrap: wrap;
}
.p-lpvnRight__cvHead__tagsItem {
	padding: 2px .5rem;
	background-color: var(--accent-color02);
	color: var(--white01);
	font-size: var(--fs-min);
	border-radius: var(--radius01);
}
.p-lpvnRight__cvHead__title {
	font-size: var(--fs-subtitle);
}
.p-lpvnRight__cvHead__price {
	display: flex;
	gap: 1px;
	justify-content: flex-end;
	align-items: baseline;
	font-family: var(--font-family02);
}
.p-lpvnRight__cvHead__priceText {
	font-size: var(--fs-min);
	&.__num {
		font-size: var(--fs-title);
	}
}

.p-lpvnRight__cvMain {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	padding: var(--gap01);
	&::before {
		content: "";
		background-color: var(--white01);
		border-radius: var(--radius02);
		position: absolute;
		left: 0;
        right: 0;
        margin: auto;
		top: 60px;
		height: calc(100% - 60px);
		width: 100%;
		z-index: -1;
	}
}
.p-lpvnRight__cvMain__list {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	font-size: var(--fs-mid);
}
.p-lpvnRight__cvMain__listItem {
	display: flex;
	gap: .5rem;
	&::before {
		content: "\e2e6";
		color: var(--accent-color02);
		font-family: var(--googleicon);
	}
}
.p-lpvnRight__cvMain__listItem__sub {
	font-size: var(--fs-tiny);
}
.p-lpvnRight__cvMain__btn {
	font-size: var(--fs-mid);
	padding: var(--gap01) .5rem;
}


/*/ 右下 コピーライト
//---------------------------------------------------*/
.p-lpvnCopyright {
	font-size: 10px;
	font-weight: normal;
	font-family: var(--font-family02);
}


/* =========================================================
section / Fv
========================================================= */
.p-lpvnFv {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	padding-top: var(--gap00);
}
.p-lpvnFv__desc {
	text-align: center;
	text-wrap:balance;
	font-size: var(--fs-mid);
}
.p-lpvnFv__pic {
	position: relative;
}
.p-lpvnFv__picWrap {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 0 0 50vw 50vw;
	&::before {
        content: "";
        display: block;
		height: 55vh;
	}
}
.p-lpvnFv__picImg {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-lpvnFv__picIllust {
	position: absolute;
	object-fit: contain;
	&.__01 {
		width: 110px;
		max-height: 90px;
		bottom: 10vw;
		left: -20px;
		@media screen and (max-width:991px){
			width: 64px;
			left: -10px;
			bottom: 20vw;
		}
	}

	
	&.__02 {
		width: 80px;
		max-height: 100px;
		bottom: 2vw;
		left: 5vw;
		@media screen and (max-width:991px){
			width: 54px;
			bottom: 3vw;
		}
	}
	&.__03 {
		width: 75px;
		max-height: 100px;
		bottom: 1vw;
		right: 5vw;
		@media screen and (max-width:991px){
			width: 45px;
			bottom: 4rem;
		}
	}
	&.__04 {
		width: 70px;
		max-height: 90px;
		bottom: -2vw;
		right: -40px;
		@media screen and (max-width:991px){
			width: 64px;
			bottom: -4vw;
			right: -20px;
		}
	}
	&.__05 {
		width: 110px;
		max-height: 90px;
		bottom: 10vw;
		right: -20px;
		@media screen and (max-width:991px){
			width: 64px;
			bottom: 30vw;
		}
	}
	&.__bulb01 {
		width: 64px;
		top: 5vw;
		left: 8vw;
		z-index: 2;
		
	}
	&.__shape01 {
		width: 80px;
		top: 1vw;
		left: -10px;
		@media screen and (max-width:991px){
		}
	}
	&.__shape02 {
		width: 70px;
		top: -20px;
		right: -20px;
		@media screen and (max-width:991px){
			width: 60px;
			right: -20px;
		}
	}
	&.__shape03 {
		width: 100px;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 5vw;
		@media screen and (max-width:991px){
			width: 80px;
		}
	}
}

/* タイトル */
.p-lpvnFv__cont {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
}
.p-lpvnFv__title {
	font-size: var(--fs-big);
}
.p-lpvnFv__titleIcon {
	height: 40px;
    vertical-align: text-top;
}
.p-lpvnFv__text {
	font-weight: normal;
	line-height: 1.6;
}
.p-lpvnFv__btn {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.p-lpvnFv__btnItem {
	font-size: var(--fs-subtitle);
	&.__main01 {
		padding: var(--gap01) .5rem;
	}
	&.__sample01 {
		padding: var(--gap01) .5rem;
	}
}


/* =========================================================
section / good
========================================================= */
.p-lpvnGood {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	color: var(--white01);
	padding-top: 56px;
	background-color: var(--accent-color02);
}
.p-lpvnGood__head {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
.p-lpvnGood__headBadge {
	position: absolute;
	top: 10px;
	width: fit-content;
	border-radius: 100px;
	padding: 3px var(--gap01);
	background-color: var(--accent-color01);
	font-size: var(--fs-p);
}
.p-lpvnGood__headTItle {
	font-size: var(--fs-xlarge);
	@media screen and (max-width:768px){
		font-size: var(--fs-big);
	}
}

.p-lpvnGood__img {
	position: relative;
	display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 1fr;
	gap: var(--gap00);
}

.p-lpvnGood__imgBox {
	border-radius: var(--radius02);
	overflow: hidden;
	&.__01 {
		grid-row: 1;
		grid-column: 1 / span 2;
	}
	&.__02,
	&.__03 {
		grid-row: 2;
	}
}
.p-lpvnGood__imgItem {
	border-radius: var(--radius02);
	width: 100%;
	max-height: clamp(150px,20vh,200px);
	object-fit: cover;
	overflow: hidden;
}
.p-lpvnGood__imgIcon {
	position: absolute;
	&.__icon01 {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 48px;
		margin: auto;
	}
	&.__icon02 {
		bottom: -10px;
		right: -10px;
		width: 120px;
	}
}
source.p-lpvnGood__imgItem,
source.p-lpvnGood__imgIcon {
	display: none;
}

/* この資格を取ると
--------------------------------------------------------- */
.p-lpvnGood__future {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
.p-lpvnGood__futureText {
	font-weight: normal;
	font-size: var(--fs-mid);
}
.p-lpvnGood__futureList {

}
.p-lpvnGood__futureList__item {
	&::before {
		color: var(--accent-color04);
	}
}

/* おすすめ
--------------------------------------------------------- */
.p-lpvnGood__recommend {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	padding: var(--gap01);
	background-color: #2075B8;
	border-radius: var(--radius02);
}
.p-lpvnGood__recommendText {
	font-size: var(--fs-large);
	margin-right: 110px;
}
.p-lpvnGood__recommendImg {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 80px;
}
.p-lpvnGood__recommendList {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.p-lpvnGood__recommendList__item {
	&::before {
		color: var(--accent-color04);
	}
}

/* =========================================================
section / reason
========================================================= */
.p-lpvnReason__cards {
	display: flex;
	flex-direction: column;
	gap: var(--gap02);
	counter-reset: p-lpvnReason__cardsItem;
}
.p-lpvnReason__cardsItem {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	counter-increment: p-lpvnReason__cardsItem;
	&::before {
		content: "0"counter(p-lpvnReason__cardsItem);
		position: absolute;
		top: -12px;
		left: 10px;
		z-index: 2;
		line-height: 1;
		font-size: 68px;
		font-weight: 900;
		color: var(--white01);
		text-shadow: 0 0 2px var(--accent-color01);
	}
}
.p-lpvnReason__cardsItem__img {
	display: block;
	position: relative;
	width: 100%;
    height: 100%;
	aspect-ratio: 1.618/1;
	border-radius: var(--radius02);
	margin-bottom: 6px;
	&::after {
		content: "";
		position: absolute;
		z-index: 0;
		bottom: -6px;
		right: -6px;
		width: 100%;
    	height: 100%;
		border-radius: var(--radius02);
		background-color: var(--accent-color02);
	}
}
.p-lpvnReason__cardsItem__imgItem {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1.618/1;
	border-radius: var(--radius02);
}

.p-lpvnReason__cardsItem__title {
	font-size: var(--fs-title);
}
.p-lpvnReason__cardsItem__sub {
	color: var(--red01);
	font-size: var(--fs-p);
}
.p-lpvnReason__cardsItem__text {
	font-weight: normal;
}
/* =========================================================
section / anxiety
========================================================= */
.p-lpvnAnxiety__read {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	padding: var(--gap02) var(--gap01);
	padding-top: 64px;
	margin: 0 var(--gap01);
	text-align: center;
	text-wrap:balance;
	background-color: var(--base-color02);
	border-radius: var(--radius02) var(--radius02) 0 0;
}
.p-lpvnAnxiety__readImg {
	position: absolute;
	right: 0;
	left: 0;
	top: -40px;
	margin: auto;
	display: block;
	object-fit: cover;
	height: 90px;
}
.p-lpvnAnxiety__readText {
	font-size: var(--fs-p);
}
.p-lpvnAnxiety__readTitle {
	line-height: 1.3;
	font-size: var(--fs-large);
	background: linear-gradient(140deg, var(--accent-color03) 0%, var(--accent-color04) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.p-lpvnAnxiety__but {
	position: relative;
}
.p-lpvnAnxiety__butWrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	padding: var(--gap05) var(--gap02);
	color: var(--white01);
	border-radius: var(--radius02);
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		border-radius: var(--radius02);
		background:radial-gradient(rgba(44,60,88, .5) 0%, var(--base-color01) 70%);
	}
}
.p-lpvnAnxiety__butText {
	position: relative;
	z-index: 2;
	text-shadow: 0 0  20px var(--text-color01);
}
.p-lpvnAnxiety__butImg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 0;
}
.p-lpvnAnxiety__butBubble {
	position: absolute;
	top: -14px;
	right: 0;
	left: 0;
	margin: auto;
	width: 108px;
	z-index: 5;
	&.__bottom {
		top: inherit;
		bottom: -18px;
		rotate: 180deg;
	}
	&::before {
		content: "";
		position: absolute;
		top: -20px;
		right: 0;
		left: 0;
		margin: auto;
		width: 20%;
		height: 2px;
		z-index: 5;
		opacity: .2;
		border-radius: 100px;
		background-color: var(--base-color01);
	}
}
.p-lpvnAnxiety__butBubble__wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 28px;
	color: var(--white01);
	font-size: var(--fs-mid);
	border-radius: 100px;
	z-index: 5;
	background-color: var(--base-color01);
	&::before,
	&::after {
		content: "";
		position: absolute;
		top: -17px;
		right: 0;
		left: 0;
		margin: auto;
		width: 40%;
		height: 6px;
		z-index: 5;
		opacity: .4;
		border-radius: 100px;
		background-color: var(--base-color01);
	}
	&::after {
		top: -10px;
		width: 60%;
		height: 9px;
		opacity: .6;
		background-color: var(--base-color01);
	}
}

.p-lpvnAnxiety__fine {
	position: relative;
	padding: var(--gap02) var(--gap01) 0;
	text-align: center;
	text-wrap:balance;
	line-height: 1.6;
	font-size: var(--fs-big);
	background: linear-gradient(140deg, var(--accent-color03) 0%, var(--accent-color04) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.p-lpvnAnxiety__fineImg {
	position: absolute;
	top: -40px;
	right: -16px;
	width: 80px;
	z-index: 1;
	@media screen and (max-width:768px){ 
		width: 60px;
		right: 0px;
	}
}
/* =========================================================
section / courses
========================================================= */
.p-lpvnCourses {
	padding-top: 0px;
}
.p-lpvnCourses__cards {
	display: flex;
	flex-direction: column;
	gap: var(--gap02);
	counter-reset: p-lpvnCourses__cardsItem;
}
.p-lpvnCourses__cardsItem {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	counter-increment: p-lpvnCourses__cardsItem;
	&::before {
		content: "0"counter(p-lpvnCourses__cardsItem);
		position: absolute;
		top: 12px;
		right: 10px;
		z-index: 2;
		line-height: 1;
		font-size: 68px;
		font-weight: 900;
		color: var(--white01);
		text-shadow: 0 0 2px var(--accent-color01);
	}
}
.p-lpvnCourses__cardsItem__img {
	position: relative;
}
.p-lpvnCourses__cardsItem__imgWrap {
	display: block;
	position: relative;
	width: 100%;
    height: 100%;
	aspect-ratio: 1.618/1;
	border-radius: var(--radius02);
	margin-bottom: 6px;
	&::after {
		content: "";
		position: absolute;
		z-index: 0;
		bottom: -4px;
		right: -4px;
		width: 100%;
    	height: 100%;
		border-radius: var(--radius02);
		background-color: var(--accent-color02);
	}

}
.p-lpvnCourses__cardsItem__imgItem {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1.618/1;
	border-radius: var(--radius02);
}

.p-lpvnCourses__cardsItem__imgIcon {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	object-fit: contain;
	background-color: var(--white01);
	padding: var(--gap00);
	border-radius: var(--radius01);
	border: 1px solid var(--accent-color01);
	bottom: 16px;
	left: var(--gap00);
	aspect-ratio: 1/1;
	z-index: 2;
}

.p-lpvnCourses__cardsItem__title {
	font-size: var(--fs-title);
}
.p-lpvnCourses__cardsItem__sub {
	color: var(--red01);
	font-size: var(--fs-p);
}
.p-lpvnCourses__cardsItem__text {
	font-weight: normal;
}

.p-lpvnCourses__cardsItem__title,
.p-lpvnCourses__cardsItem__text {
	padding-left: var(--gap00);
	padding-right: var(--gap00);
}

/* =========================================================
section / review
========================================================= */
.p-lpvnReviews__user {
	margin-top: var(--gap01);
	display: flex;
	flex-direction: column;
	gap: var(--gap02);
	counter-reset: p-lpvnReviews__userBox__title;
} 
.p-lpvnReviews__userBox {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
}
.p-lpvnReviews__userBox__title {
	display: flex;
	align-items: center;
	gap: 5px;
}
.p-lpvnReviews__userBox__titleWrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1px;
	white-space: nowrap;
	font-size: var(--fs-large);
	color: var(--accent-color02);
	counter-increment: p-lpvnReviews__userBox__title;
	&::after {
		position: relative;
		z-index: 1;
		color: var(--accent-color02);
		font-size: var(--fs-large);
		font-family: var(--font-family02);
		content: "0"counter(p-lpvnReviews__userBox__title);
		background-color: var(--base-color03);
		padding-right: var(--gap01);
		width: fit-content;
	}
}
.p-lpvnReviews__userBox__titleBar {
	height: 2px;
	width: 100%;
	z-index: -1;
	background-color: #E8E5DB;
	border-radius: var(--radius01);
}
.p-lpvnReviews__userHead {
	display: grid;
	align-items: center;
	grid-template-columns: clamp(100px,10vw,200px) 1fr;
	gap: var(--gap01);

	@media screen and (max-width:768px){ 
		grid-template-columns: 1fr;
	}
}

.p-lpvnReviews__userImg {
	position: relative;
	object-fit: cover;

	@media screen and (max-width:768px){ 
		aspect-ratio: 1/1;
	}
	&::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		right: -4px;
		bottom: -4px;
		border: 1px solid var(--accent-color01);
		border-radius: var(--radius01);
	}
}
.p-lpvnReviews__userImg__item {
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--radius01);
	@media screen and (max-width:768px){ 
		width: 100%;
		max-width: 100%;
		aspect-ratio: 1/1;
	}
}
.p-lpvnReviews__userInfo {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.p-lpvnReviews__userInfo__title {
	font-size: var(--fs-large);
}
.p-lpvnReviews__userInfo__sub {
	font-weight: normal;
	font-size: var(--fs-mid);
}
.p-lpvnReviews__userInfo__name {
	font-weight: normal;
	font-size: var(--fs-mid);
	display: flex;
	align-items: center;
	gap: 5px;
}
.p-lpvnReviews__userInfo__nameIcon {
	width: 25px;
}
.p-lpvnReviews__userText {
	font-size: var(--fs-p);
	font-weight: normal;
	&.__warn01 {
		font-size: var(--fs-min);
	}
}
/* teacher
--------------------------------------------------------- */
.p-lpvnReviews__userBox {
	&.__teacher01 {
		padding: var(--gap01);
		border: 1px solid var(--border-color01);
		border-radius: var(--radius02);
		background-color: var(--white01);
		.p-lpvnReviews__userImg {
			&::after {
				border: 1px solid var(--accent-color04);
			}
		}
		.p-lpvnReviews__userTitle {
			display: flex;
			flex-direction: column;
			gap: 5px;
			font-size: var(--fs-xlarge);
			.p-lpvnReviews__userTitle__en {
				font-size: var(--fs-title);
				font-family: var(--font-family02);
				color: var(--accent-color04);
			}
		}
		.p-lpvnReviews__userInfo__title {
			font-size: var(--fs-title);
		}
	}
}

/* =========================================================
section / feature
========================================================= */
.p-lpvnFeatures__cont {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	counter-reset: p-lpvnFeatures__box;
	counter-reset: p-lpvnComp__title;
}
.p-lpvnFeatures__box {
	position: relative;
	display: flex;
	gap: var(--gap01);
	flex-direction: column;
	padding: 0 var(--gap01) var(--gap00);
	border-radius: var(--radius02);
	background: linear-gradient(to bottom, var(--base-color02), transparent);
	counter-increment: p-lpvnFeatures__box;
	margin-left: -2rem;
	margin-right: -2rem;
	@media screen and (max-width:1360px){
		margin-left: -1rem;
		margin-right: -1rem;
		padding: 0 var(--gap00) var(--gap00);
	}
	@media screen and (max-width:768px){
		margin-left: inherit;
		margin-right: inherit;
	}
}
.p-lpvnFeatures__boxHead {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 0 1rem;
}
.p-lpvnFeatures__boxBadge {
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .1rem;
	padding: 2px var(--gap01);
	font-size: var(--fs-mid);
	color: var(--white01);
	border-radius: 100px;
	background-color: var(--accent-color02);
	&::after {
		content: "0" counter(p-lpvnFeatures__box);
		font-size: var(--fs-p);
		font-family: var(--font-family02);
	}
}
.p-lpvnFeatures__boxTitle {
	text-align: center;
	text-wrap:balance;
	font-size: var(--fs-xlarge);
}
.p-lpvnFeature__illust {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
}
.p-lpvnFeature__illustItem {
	position: sticky;
    width: 100px;
    top: 80vh;
	max-height: 90px;
    object-fit: contain;
    z-index: 4;
	@media screen and (max-width:768px){
		width: 70px;
		max-height: 60px;
	}
	&.__illust01 {
		margin-left: -60px;
		@media screen and (max-width:768px){
			margin-left: -10px;
		}
	}
	&.__illust02 {
		margin-right: -20px;
		margin-left: auto;
		@media screen and (max-width:768px){
			margin-right: -10px;
		}
	}
}

/* 比較
--------------------------------------------------------- */
.p-lpvnComp {
	counter-increment: p-lpvnComp__title;
}
.p-lpvnComp__img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: var(--gap03) var(--gap01);
	border-radius: var(--radius02);
	&::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		mix-blend-mode: hard-light;
		background-color: var(--base-color01);
		opacity: .8;
	}
}
.p-lpvnComp__imgItem {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	object-fit: cover;
	z-index: 0;
}
.p-lpvnComp__title {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	text-wrap: balance;
	align-items: center;
	color: var(--accent-color04);
	font-size: var(--fs-xlarge);
	mix-blend-mode: plus-lighter;
	&::before {
		content: "0"counter(p-lpvnComp__title);
		color: var(--accent-color04);
		color: transparent;
		font-size: var(--fs-title);
		font-family: var(--font-family02);
		text-shadow: 0 0 1px var(--accent-color04);
	}
}
.p-lpvnComp__cont {
	position: relative;
	top: -20px;
	display: grid;
	gap: var(--gap01);
	padding: 0 var(--gap01);
	justify-content: center;
	z-index: 1;
	grid-template-columns: 1fr 1fr;
	@media screen and (max-width:1360px){ 
		padding: 0 var(--gap00);
		gap: var(--gap00);
	}
}
.p-lpvnComp__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--gap00) var(--gap00) var(--gap01);
	gap: var(--gap00);
	border-radius: var(--radius01);
	&::before {
		content: "\e8db";
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 40px;
		height: 40px;
		top: -8px;
		left: -4px;
		z-index: 2;
		color: var(--white01);
		background-color: var(--accent-color03);
		border-radius: 100px;
		font-family: var(--googleicon);
	}
	&::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		right: -3px;
		bottom: -3px;
		z-index: -1;
		border-radius: var(--radius01);
	}
}
.p-lpvnComp__cardName {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--white01);
	padding: var(--gap00) var(--gap01);
	border-radius: var(--radius01);
}
.p-lpvnComp__cardName__img {
	max-height: 32px;
}
.p-lpvnComp__cardInfo {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	padding: 0 var(--gap00);
}
.p-lpvnComp__cardInfo__desc {
	font-size: var(--fs-mid);
	font-weight: normal;
}
.p-lpvnComp__card {
	/*他社*/
	&.__bad {
		background-color: #FFF4F4;
		&::after {
			background-color: var(--accent-color03);
		}
		.p-lpvnComp__cardInfo__title {
			color: var(--accent-color03);
		}
	}
	/*弊社*/
	&.__good {
		background-color: #F4F9FD;
		&::before {
			content: "\e8dc";
			background-color: var(--accent-color02);
		}
		&::after {
			background-color: var(--accent-color02);
		}
		.p-lpvnComp__cardInfo__title {
			color: var(--accent-color02);
		}
	}
}

/* 独自システム
--------------------------------------------------------- */
.p-lpvnSystem {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	counter-reset: p-lpvnSystem__infoBadge;
}
.p-lpvnSystem__box {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	padding: var(--gap01);
	background-color: var(--white01);
	border-radius: var(--radius02);
}
/* 二つ目のみ */
.p-lpvnSystem__box {
	&:nth-child(2) {
		.p-lpvnSystem__infoBadge {
			&::after {
				content: none;
			}
		}
	}
}

.p-lpvnSystem__head {
	display: grid;
	align-items: center;
	grid-template-columns: clamp(100px,10vw,200px) 1fr;
	gap: var(--gap01);

	@media screen and (max-width:768px){ 
		grid-template-columns: 1fr;
	}
}

.p-lpvnSystem__img{
	position: relative;
	@media screen and (max-width:768px){ 
		aspect-ratio: inherit;
	}
	&::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		right: -4px;
		bottom: -4px;
		border: 1px solid var(--accent-color01);
		border-radius: var(--radius01);
	}
}
.p-lpvnSystem__imgItem {
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--radius01);
	@media screen and (max-width:768px){ 
		aspect-ratio: 3/1;
	}
}
.p-lpvnSystem__info {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.p-lpvnSystem__infoBadge {
	width: fit-content;
	color: var(--white01);
	font-size: var(--fs-mid);
	display: flex;
	align-items: center;
	border-radius: 100px;
	background-color: var(--base-color01);
	counter-increment: p-lpvnSystem__infoBadge;
	&::after {
		content: "0" counter(p-lpvnSystem__infoBadge);
		margin-right: 10px;
	}
}
.p-lpvnSystem__infoBadge__icon {
	width: 25px;
	flex-shrink: 0;
	margin-right: 10px;
}
.p-lpvnSystem__infoBadge__soon {
	padding: 0 var(--gap00);
	color: var(--accent-color04);
}
.p-lpvnSystem__infoTitle {
	font-size: var(--fs-large);
}
.p-lpvnSystem__text {
	font-weight: normal;
}
.p-lpvnSystem__list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
.p-lpvnSystem__listItem {
	display: flex;
	gap: var(--gap00);
	align-items: baseline;
	&::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 100px;
		flex-shrink: 0;
		background-color: var(--accent-color02);
	}
}

/* 保証
--------------------------------------------------------- */
.p-lpvnGuaranty {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
}
.p-lpvnGuaranty__box {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	padding: var(--gap01);
	background-color: var(--white01);
	border-radius: var(--radius02);
	counter-reset: p-lpvnGuaranty__infoBadge;
}
.p-lpvnGuaranty__head {
	display: flex;
	align-items: center;
	gap: var(--gap01);
}
.p-lpvnGuaranty__headIcon {
	flex-shrink: 0;
	width: 36px;
}
.p-lpvnGuaranty__headTitle {
	font-size: var(--fs-large);
}
.p-lpvnGuaranty__text {
	font-weight: normal;
}
.p-lpvnGuaranty__list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
.p-lpvnGuaranty__listItem {
	display: flex;
	gap: var(--gap00);
	align-items: baseline;
	&::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 100px;
		flex-shrink: 0;
		background-color: var(--accent-color02);
	}
}


/* =========================================================
section / appeal
========================================================= */
.p-lpvnAppeal {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.p-lpvnAppeal__title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-wrap:balance;
	gap: var(--gap01);
	position: relative;
	z-index: 1;
	margin-bottom: -4vw;
}
.p-lpvnAppeal__titleImg {
	width: 48px;
	flex-shrink: 0;
}
.p-lpvnAppeal__titleWrap {
	font-size: var(--fs-big);
}
.p-lpvnAppeal__bg {
	position: relative;
	z-index: 0;
	overflow: hidden;
	max-height: clamp(360px,60vw,600px);
}
.p-lpvnAppeal__bgWrap {
	position: relative;
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100px;
		background: linear-gradient(to bottom, var(--white01), transparent);
	}
}
.p-lpvnAppeal__bgItem {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1/1;
}

.p-lpvnAppeal__img {
	position: absolute;
	display: block;
	object-fit: contain;
	&.__bulb01 {
		top: 4vw;
		width: 80px;
		left: 30%;
	}
	&.__shape01 {
		top: 100px;
		width: 90px;
		left: 0;
	}
	&.__shape02 {
		top: 0;
		bottom: 0;
		right: -20px;
		margin: auto;
		width: 80px;
	}
	&.__shape03 {
		bottom: 20%;
		right: 20%;
		width: 90px;
	}
}

/* =========================================================
section / qa
========================================================= */
.p-lpvnQa {
	position: relative;
	margin-top: -100px;
	border-radius: var(--radius02);
	background-color: #F6F3EA;
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	padding: var(--gap02) var(--gap02);
	@media screen and (max-width:768px){
		padding: var(--gap01) var(--gap01);
		margin-top: 0px;
	}
}
.p-lpvnQa__cont {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
}
.p-lpvnQa__card {
	padding: var(--gap01) var(--gap01);
	border-radius: var(--radius02);
	background-color: var(--white01);
	border: 1px solid var(--border-color01);
}
.p-lpvnQa__cardQuestion {
	display: flex;
	gap: var(--gap00);
	font-size: var(--fs-title);
	padding-bottom: var(--gap01);
	margin-bottom: var(--gap01);
	border-bottom: 1px solid var(--border-color01);
	&::before {
		content: "Q.";
		font-family: var(--font-family02);
		font-size: var(--fs-large);
	}
}
.p-lpvnQa__cardAnswer {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
}
.p-lpvnQa__cardAnswer__title {
	display: flex;
	color: var(--accent-color02);
	gap: var(--gap00);
	font-size: var(--fs-title);
	&::before {
		content: "A.";
		color: var(--accent-color02);
		font-family: var(--font-family02);
		font-size: var(--fs-large);
	}
}
.p-lpvnQa__cardAnswer__text {
	font-weight: normal;
}

.p-lpvnQa__cardAnswer__list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	font-size: var(--fs-mid);
}
.p-lpvnQa__cardAnswer__listItem {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--gap00);
	align-items: baseline;
	font-weight: normal;
	&::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 100px;
		flex-shrink: 0;
		background-color: var(--accent-color02);
	}
}

/* =========================================================
section / purchase
========================================================= */
.p-lpvnPurchase {
	display: flex;
	flex-direction: column;
	padding: var(--gap03) 0 0;
	gap: var(--gap01);
}
.p-lpvnPurchase__head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-wrap:balance;
	gap: var(--gap00);
}

.p-lpvnPurchase__headSub {
	position: relative;
	width: fit-content;
	font-size: var(--fs-mid);
	color: var(--accent-color02);
	&::after {
		content: "";
		position: relative;
		display: block;
		bottom: -5px;
		width: 100%;
		height: 2px;
		background-color: var(--accent-color02);
		border-radius: 100px;
	}
}
.p-lpvnPurchase__headTitle {
	font-size: var(--fs-big);
}
.p-lpvnPurchase__desc {
	font-weight: normal;
}

/* tab btn
--------------------------------------------------------- */
.p-lpvnPurchase__tab {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	overflow: hidden;
}
.p-lpvnPurchase__tabBtn {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--gap00);
	padding: var(--gap01) 5px;
	background-color: var(--base-color01);
	border: 1px solid var(--base-color01);
	border-bottom: 0px;
	border-radius: var(--radius02) var(--radius02) 0 0;
	cursor: pointer;
    will-change: filter;
	transition: filter var(--transition01), background-color var(--transition01);
	&:hover {
		filter: brightness(1.4);
	}
	&::before,
	&::after {
		content: "";
		position: absolute;
	}
	&::before {
		bottom: 1px;
		left: 0;
		right: 0;
		margin: auto;
		width: calc(100% + 2px);
		height: 1px;
		background-color: var(--white01);
	}
	&::after {
		bottom: 0;
		left: -3px;
		right: -3px;
		width: auto;
		height: 1px;
		background-color: var(--base-color01);
	}

	/* 近日発売 */
	&.__release {
		cursor: not-allowed;
	}
}
.p-lpvnPurchase__tabBtn__sub {
	display: flex;
	border-radius: 100px;
	padding: 1px var(--gap00);
	color: var(--white01);
	font-size: var(--fs-min);
	background-color: var(--accent-color02);
}
.p-lpvnPurchase__tabBtn__title {
	color: var(--white01);
	font-size:  var(--fs-title);
	text-align: center;
	text-wrap:balance;
	transition: color var(--transition01);
}
.p-lpvnPurchase__tabBtn__release {
	font-size: var(--fs-min);
	color: var(--accent-color04);
	text-align: center;
}
/*アクティブの際*/
.p-lpvnPurchase__tabBtn {
	&.__active {
		background-color: var(--white01);
		&::after {
			content: none;
		}
		.p-lpvnPurchase__tabBtn__title  {
			color: var(--base-color01);
		}

	}
}

/* tab cont
--------------------------------------------------------- */
.p-lpvnPurchase__tabCont {
    display: none;
	flex-direction: column;
	gap: var(--gap01);
	padding: var(--gap02);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition01);

	@media screen and (max-width:768px){
		padding: var(--gap01);
	}
	&.__displayed {
		display: flex;
		opacity: 1;
		visibility: inherit;
	}
}
.p-lpvnPurchase__img {
	padding: var(--gap01);
	position: relative;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 0;
		border-radius: var(--radius02);
		background-color: var(--base-color02);
		width: 100%;
		height: 50%;
	}
}
.p-lpvnPurchase__imgItem {
	position: relative;
	z-index: 1;
	width: 100%;
}
.p-lpvnPurchase__imgFloat {
	position: absolute;
	object-fit: contain;
	&.__shape01 {
		position: absolute;
		top: 10px;
		left: -20px;
		width: 80px;
	}
	&.__shape02 {
		width: 70px;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: -40px;
		@media screen and (max-width:768px){
			right: -10px;
		}
	}
}

.p-lpvnPurchase__text {
	font-weight: normal;
}
.p-lpvnPurchase__title {
	font-size: var(--fs-title);
}

.p-lpvnPurchase__cart {
	display: grid;
	gap: var(--gap01);
	align-items: center;
    grid-template-columns: repeat(3, 1fr);
	counter-reset: p-lpvnPurchase__cartStep__title;
}
.p-lpvnPurchase__cartStep {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	&.__course {
		grid-column: 1 / 3; 
		@media screen and (max-width:768px){
			grid-column: 1 / 4;
		}
	}
	&.__num {
		grid-column: 3 / 4;
		flex-shrink: 0;
		@media screen and (max-width:768px){
			width: 100%;
			grid-column: 1 / 4;
		}
	}
	&.__check {
		grid-column: 1 / 4;
	}

}
.p-lpvnPurchase__cartPrice {
	grid-column: 1 / 2;
}
.p-lpvnPurchase__cartBtn {
	grid-column: 2 / 4; 
}

.p-lpvnPurchase__cartStep__title {
	position: relative;
	display: flex;
	gap: 1px;
	align-items: center;
	color: var(--accent-color02);
	font-size: var(--fs-min);
	counter-increment: p-lpvnPurchase__cartStep__title;
	white-space: pre;
	&::before {
		content: "0" counter(p-lpvnPurchase__cartStep__title) ".";
		flex-shrink: 0;
	}
	&::after {
		content: "";
		width: 100%;
		height: 2px;
		margin-left: 10px;
		border-radius: 100px;
		background-color: var(--base-color02);
	}
}
.p-lpvnPurchase__cartStep__selectItem {
	position: relative;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: var(--gap01);
		z-index: 2;
		margin: auto;
		height: calc(12px / 2 * tan(60deg));
		width: 12px;
		border-radius: 1px;
		background-color: var(--base-color01);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}
	&::after {
		content: "";
		position: absolute;
		bottom: -3px;
		right: -2px;
		width: 100%;
		height: 100%;
		background-color: var(--base-color02);
		border: 1px solid var(--border-color02);
		border-radius: var(--radius02);
	}
}

.p-lpvnPurchase__cartStep__selectForm {
	position: relative;
	z-index: 1;
	width: 100%;
	font-size: var(--fs-p);
	font-weight: 900;
	padding: var(--gap01);
	background-color: var(--base-color02);
	border: 1px solid var(--border-color02);
	border-radius: var(--radius02);
	cursor: pointer;
}

/*内容確認*/
.p-lpvnPurchase__cartStep__cont {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);

	border: 1px solid var(--border-color02);
	padding: var(--gap01);
	border-radius: var(--radius02);
}
.p-lpvnPurchase__cartStep__contItem {
	position: relative;
	display: flex;
	gap: 5px;
	justify-content: space-between;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 2px;
		background-color: var(--base-color02);
	}
}
.p-lpvnPurchase__cartStep__contItem__title,
.p-lpvnPurchase__cartStep__contItem__unit {
	position: relative;
	font-size: var(--fs-mid);
	background-color: var(--white01);
	flex-shrink: 0;
}
.p-lpvnPurchase__cartStep__contItem__title {
	font-weight: normal;
	padding-right: var(--gap00);
}
.p-lpvnPurchase__cartStep__contItem__unit {
	padding-left: var(--gap00);
}

/*値段*/
.p-lpvnPurchase__cartPrice {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.p-lpvnPurchase__cartPrice__num {
	display: flex;
	justify-content: center;
	align-items: baseline;
	font-size: var(--fs-big);
	font-family: var(--font-family02);
	flex-shrink: 0;
}
.p-lpvnPurchase__cartPrice__numUnit {
	font-size: var(--fs-min);
}
.p-lpvnPurchase__cartPrice__tax {
	display: flex;
	justify-content: center;
	padding: 1px 5px;
	color: var(--white01);
	font-size: var(--fs-tiny);
	font-weight: normal;
	background-color: var(--base-color01);
	border-radius: 100px;
}
/*購入ボタン*/
.p-lpvnPurchase__cartBtn__item {
	width: 100%;
	font-weight: 900;
	font-size: var(--fs-subtitle);
	padding: var(--gap01);
}
/* =========================================================
section / doubt
========================================================= */
.p-lpvnDoubt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gap00);
}
.p-lpvnDoubt__img {
	object-fit: contain;
	max-height: 119px;
}
.p-lpvnDoubt__title {
	text-align: center;
	text-wrap:balance;
	font-size: var(--fs-large);
}

/* =========================================================
section / sample
========================================================= */
.p-lpvnSample {
	padding: var(--gap01);
	@media screen and (max-width:768px){
		padding: var(--gap01) 0 ;
	}
}
.p-lpvnSample__wrap {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	position: relative;
	padding: 3rem var(--gap01);
	color: var(--white01);
	background-color: var(--accent-color02);
	border-radius: var(--radius02);
	@media screen and (max-width:768px){
		padding: 3rem var(--gap01);
	}
}
.p-lpvnSample__title {
	text-align: center;
	text-wrap: balance;
}
.p-lpvnSample__img {
	margin-bottom: -2rem;
}
.p-lpvnSample__illust {
	position: absolute;
	top: -20px;
	left: -5px;
	object-fit: contain;
	max-height: 100px;
	z-index: 0;
	@media screen and (max-width:768px){
		top: -34px;
		left: -5px;
		max-height: 80px;
	}
}
.p-lpvnSample__badge {
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	margin: auto;
	width: fit-content;
	padding: 4px var(--gap01);
	color: var(--white01);
	background-color: #0241AC;
	font-size: var(--fs-mid);
	border-radius: 100px;
}
.p-lpvnSample__inputBox {
	width: 100%;
	&::after {
		position: absolute;
		z-index: -1;
		border: 1px solid var(--border-color02);
		background-color: var(--white01);
		bottom: -2px;
		right: -2px;
	}
}
.p-lpvnSample__inputItem {
	width: 100%;
	position: relative;
	font-size: var(--fs-p);
	border: 1px solid var(--border-color02);
	padding: var(--gap02) var(--gap01);
	background-color: var(--white01);
	border-radius: var(--radius02);
	field-sizing: content;
	&::placeholder {
		font-size: var(--fs-p);
		color: var(--text-color02);
	}
}
.p-lpvnSample__btn {
	cursor: pointer;
	color: var(--text-color01);
	padding: var(--gap01);
	font-size: var(--fs-large);
	font-weight: 900;
	border-radius: var(--radius02);
}
.p-lpvnSample__text {
	font-weight: normal;
}
.p-lpvnSample__formWarn {
	text-align: center;
	text-wrap:balance;
	font-size: var(--fs-mid);
}
.p-lpvnSample__formWarn__link {
	color: var(--white01);
	font-weight: normal;
	text-decoration: underline;
}

/* =========================================================
section / outro
========================================================= */
.p-lpvnOutro {
	display: flex;
	flex-direction: column;
}
.p-lpvnOutro__title {
	position: relative;
	z-index: 1;
	text-align: center;
	text-wrap:balance;
	font-size: var(--fs-big);
	margin-bottom: var(--gap01);
}
.p-lpvnOutro__img {
	position: relative;
	z-index: 0;
	top: 10px; 
	margin-bottom: -80px;
	overflow: hidden;
	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100px;
		background: linear-gradient(to bottom, var(--white01), transparent);
		@media screen and (max-width:768px){ 
			height: 50px; 
		}
	}
	&::after {
		top: auto;
		bottom: 0;
		rotate: 180deg;
	}
}
.p-lpvnOutro__imgItem {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-lpvnOutro__cont {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	margin: 0 var(--gap01);
	padding: var(--gap02);
	border-radius: var(--radius02);
	background-color: var(--white01);
	border: 1px solid var(--border-color01);
	&.__samplePage {
		margin-top: clamp(-10rem, 5vw, -16rem);
	}
}
.p-lpvnOutro__box {
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	&:not(:last-of-type) {
		border-bottom: 1px solid var(--border-color01);
		padding-bottom: var(--gap01);
	}
}
.p-lpvnOutro__boxTitle {
	font-size: var(--fs-title);
	color: var(--accent-color02);
}
.p-lpvnOutro__boxText {
	font-weight: normal;
}
.p-lpvnOutro__boxIllust {
	position: absolute;
	object-fit: contain;
	&.__illust01 {
		width: 62px;
		top: -60px;
		left: -40px;
		@media screen and (max-width:768px){ 
			width: 54px;
			top: -50px;
			left: -10px;
		}
	}
	&.__illust02 {
		width: 94px;
		top: 0;
		bottom: 0;
		margin: auto;
		right: -40px;
		@media screen and (max-width:768px){ 
			width: 74px;
			right: -15px;
		}
	}
	&.__illust03 {
		width: 70px;
		top: -25vh;
		left: 0;
	}
	&.__illust04 {
		width: 60px;
		top: -8vw;
		right: -30px;
		@media screen and (max-width:768px){ 
			width: 55px;
			right: -20px;
		}
	}
}

/* =========================================================
page / sample
========================================================= */

.p-lpvnSample__cards {
	display: flex;
	flex-direction: column;
	gap: var(--gap02);
	counter-reset: p-lpvnSample__cardsItem;
}
.p-lpvnSample__cardsItem {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap00);
	counter-increment: p-lpvnSample__cardsItem;
}
.p-lpvnSample__cardsItem__video {
    position: relative;
    padding-top: 56.25%;
	display: block;
	width: 100%;
    height: 100%;
	border-radius: var(--radius02);
	margin-bottom: 6px;
	video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
}
.p-lpvnSample__cardsItem__img {
	position: relative;
}
.p-lpvnSample__cardsItem__imgItem {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
}

/* =========================================================
pagetop
========================================================= */
.p-lpvnPagetop {
	display: flex;
	padding: var(--gap00) var(--gap00) var(--gap02);
	justify-content: center;
	align-items: center;
	font-weight: normal;
	text-decoration: underline;
}

/* =========================================================
fixed cv btns
========================================================= */
.p-lpvnCvbtns {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap00);
	padding: var(--gap00);
	background-color: rgb(44 60 88 / .95);
	opacity: 0;
	animation: fadeinTop .6s forwards;
	animation-delay: 5s;
	transition: opacity var(--transition01), translate var(--transition01);
	&.__invisible {
		animation: none;
		opacity: 0;
		translate: 0 10px;
	}
}
.p-lpvnCvBtns__item {
	font-size: var(--fs-p);
	padding: var(--gap00) 5px;
}
/* =========================================================
parts
========================================================= */
/* spinner
--------------------------------------------------------- */
.p-lpvnSpinner {
	transition: all .6s; /*ローディングにかかる時間*/
	background-color: var(--base-color02);
	z-index: 999;
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 1;
	&.__loaded {
		opacity: 0;
		visibility: hidden;
	}
}
.p-lpvnSpinner__text {
  font-weight: bold;
  text-align: center;
}
.p-lpvnSpinner__box {
	width: 40px;
	height: 40px;
	position: relative;
	margin: 0px auto;
  }
  
.p-lpvnSpinner__item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--accent-color03);
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;
	
	-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
	animation: sk-bounce 2.0s infinite ease-in-out;
	&.__shape02 {
		background-color: var(--accent-color04);
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}
}

@-webkit-keyframes sk-bounce {
	0%, 100% { -webkit-transform: scale(0.0) }
	50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
	0%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 50% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}

/* btn
--------------------------------------------------------- */
.p-lpvnBtn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--radius01);
	cursor: pointer;
    will-change: filter;
	transition: filter var(--transition01);
	&:hover {
		filter: brightness(1.2);
	}
	&.__navy {
		color: var(--white01);
		background-color: var(--base-color01);
		&:hover {
			filter: brightness(1.5);
		}
	}
	&.__main01 {
		color: var(--white01);
		background: linear-gradient(to right, var(--accent-color03), var(--accent-color04));
	}
	&.__sample01 {
		background-color: var(--accent-color04);
	}
	&.__main01,
	&.__sample01 {
		&::after {
			content: "";
			position: absolute;
			top: -2px;
			left: -2px;
			border: 1px solid var(--base-color01);
			width: calc(100% - 4px);
			height: calc(100% - 4px);
			border-radius: var(--radius01);
			transition: top var(--transition01), left var(--transition01), opacity var(--transition01);
		}
		&:hover {
			&::after {
				top: 0px;
				left: 0px;
			}
		}
	}
} 



.p-lpvnModalsp__btn {
	display: none;
	font-size: var(--fs-mid);
	font-family: var(--font-family02);
}
@media screen and (max-width:1080px){
	.p-lpvnModalsp__btn {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		gap: var(--gap00);
		cursor: pointer;
		padding: 2.5rem;
		background-color: var(--base-color02);
		border-radius: 0 0 0 var(--radius02);
		border: 1px solid transparent;
		box-shadow: 4px 6px 12px rgba(8,34,59,3%);
		transition: box-shadow var(--transition01),border var(--transition01),background-color var(--transition01);
		&:hover {
			border: 1px solid var(--border-color02);
			background-color: var(--white01);
		}
	}
	.p-lpvnModalsp__btnBar {
		position: relative;
		width: 24px;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: -4px;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
			height: 2px;
			background-color: var(--base-color01);
			transition: top var(--transition01), rotate var(--transition01);
		}
		&::after {
			top: 4px;
		}

		&.__active {
			&::before,
			&::after {
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
			}
			&::before {
				rotate: 45deg;
			}
			&::after {
				rotate: -45deg;
			}
		}
		&:hover {
			&::before {
				top: -2px;
			}
			&::after {
				top: 2px;
			}
		}
	}
}

.p-lpvnModalsp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	overflow: scroll;
	&.is_open {
		opacity: 1;
		visibility: visible;
	}
}
.p-lpvnModalsp__box {
	position: absolute;
	z-index: 5;
	top: var(--gap00);
	right: var(--gap00);
	width: fit-content;
	height: fit-content;
	background-color: var(--white01);
	border-radius: var(--radius02);
	padding: var(--gap01);
	width: 100%;
	max-width: clamp(280px,30vw,360px);
	box-shadow: 2px 2px 4px rgba(8,34,59,9%);
}
.p-lpvnModalsp__cont {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
}
.p-lpvnModalsp__close {
	margin-left: auto;
}
/* モーダルを開くボタン */
.modal-open{
	position: fixed;
	top: 50%;
	left: 50%;
	font-size: 16px;
	font-weight: bold;
	width: 300px;
	height: 60px;
	color: #fff;
	background: #000;
	border: none;
	cursor: pointer;
	translate: -50% -50%;
  }

  .p-lpvnModalsp__close {
	position: relative;
	display: grid;
	gap: .5rem;
	font-size: var(--fs-mid);
	color: var(--text-color02);
	grid-template-columns: auto 1fr;
	transition: color var(--transition01);
	&:hover {
		color: var(--text-color01);
	}
}
.p-lpvnModalsp__closeBar {
	position: relative;
	width: 16px;
	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 2px;
		background-color: var(--text-color02);
		transition: top var(--transition01), rotate var(--transition01);
		rotate: 45deg;
		transform-origin: center;
		transition: background-color var(--transition01);
	}
	&::after {
		rotate: -45deg;
	}
	&:hover {
		&::before,
		&::after {
			background-color: var(--text-color01);
			scale: (.9);
		} 
	}
}