@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://use.typekit.net/mzz3tbg.css');

/* ----------------------------------------

	共通設定

---------------------------------------- */

/*
	変数
*/
/* SP・PC共通、SP専用 */
:root {
	/* width */
	--w-spDesign: 414;
	--w-spContents: calc(var(--w-spDesign) - var(--pd-spHNum) * 2);
	--w-pcDesign: 1000;
	
	/* padding */
	--pd-spH: 24px;
	--pd-spHNum: 24;
	--pd-pcH: 50px;
	--pd-pcHNum: 50;
	--pd-pcHContents: 100px;
	--pd-pcHContentsNum: 100;
	
	/* border-radius */
	--br-basic: 12px;
	--br-small: 6px;
	
	/* color */
	--cl-brand01: #004EA2; /* rgba(0, 78, 162) */
	--cl-brand02: #007BC7;
	--cl-brand03: #EC6B81;
	
	--cl-note: #888;
	
	--cl-bg01: #F7FAFF;
	--cl-bg02: #E9F3FF;
	
	--cl-paleGray: #d9d9d9;
	
	/* linear-gradient */
	--lg-brand01: linear-gradient(to right, var(--cl-brand01) 0%, var(--cl-brand01) 100%);
	--lg-brand02: linear-gradient(15deg, var(--cl-brand01) 0%, #009BFA 100%);
	--lg-we01: linear-gradient(to right, #0251D3 0%, #2CB5FF 30%, #9FFCF9 70%, #D7FFF4 100%);
	--lg-we02: linear-gradient(to right, var(--cl-brand01), #379ACC);
	--lg-pink01: linear-gradient(15deg, #FF4767 0%, #FF8C72 100%);
	
	/* font-family */
	--ff-basic: 'Noto Sans JP', sans-serif;
	--ff-stylish: 'futura-pt', 'Noto Sans JP', sans-serif;
	
	/* font-size */
	--fs-basic: 14px;
	--fs-small: 10px;
	--fs-bigger: 19px;
	
	/* font-weight */
	--fw-normal: 400;
	--fw-regular: 400;
	--fw-book: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	
	/* letter-spacing */
	--ls-basic: 0.05em;
	
	/* line-height */
	--lh-basic: 2.0;
	--lh-small: 1.5;
	--lh-title: 1.8;
	--lh-mv: 1.5;
	
	/* box-shadow */
	--bs-basic: 0 0 20px 0 rgba(0, 78, 162, 0.2);
	--bs-narrow: 0 0 6px 0 rgba(0, 78, 162, 0.65);
	
	/* text-shadow */
	--ts-mv: 0 0 6px rgba(0, 78, 162, 0.65);
	
	/* フォントサイズ調整分：デザイン幅から小さくなった分だけ、係数分フォントサイズを縮小する。末尾の数字が係数 */
	--spfs-diff: calc((var(--w-spDesign) * 1px - 100dvw) / var(--w-spDesign) * -5);
}


/*
	基本要素の設定
*/
section[id^="wbl"] :is(img, video) {
	display: block;
	width: 100%;
	height: auto;
}

section[id^="wbl"] :is(strong, b) {
	font-weight: var(--fw-bold);
}

section[id^="wbl"] :is(a, button) {
	cursor: pointer;
	transition: opacity 300ms ease;
}
section[id^="wbl"] :is(a, button):hover {
	opacity: 1;
}
@media (width > 768px) {
	section[id^="wbl"] :is(a, button):hover {
		opacity: 0.5;
	}
}


/*
	ページレイアウト
*/
section[id^="wbl"] {
	color: var(--cl-brand01);
	font-family: var(--ff-basic);
	font-size: var(--fs-basic);
	font-weight: var(--fw-normal);
	letter-spacing: var(--ls-basic);
	line-height: var(--lh-basic);
}
section[id^="wbl"] * {
	letter-spacing: var(--ls-basic);
}

@media (width <= 768px) {
	section[id^="wbl"] .pcOnly {
		display: none;
	}
}
@media (width > 768px) {
	section[id^="wbl"] .spOnly {
		display: none;
	}
}

body[id^="wbl"] .contentInner,
section[id^="wbl"] .contentInner {
	width: 100%;
	max-width: calc(var(--w-spDesign) * 1px);
	margin: 0 auto;
	padding: 0 var(--pd-spH);
}


/*
	タイトル
*/

/* 左に線ダイヤ付き */
section[id^="wbl"] .ttlStyle02 {
	display: flex;
	align-items: center;
	position: relative;
	min-height: min(27px, calc(27 / var(--w-spDesign) * 100dvw));
	margin-bottom: 20px;
	padding-left: calc(min(13px, calc(13 / var(--w-spDesign) * 100dvw)) + min(15px, calc(15 / var(--w-spDesign) * 100dvw)));
	font-size: min(17px, calc(17 / var(--w-spDesign) * 100dvw + var(--spfs-diff)));
	font-weight: var(--fw-bold);
	line-height: var(--lh-title);
	white-space: nowrap;
}
section[id^="wbl"] .ttlStyle02::before {
	content: '';
	flex: 0 0 auto;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: min(14px, calc(14 / var(--w-spDesign) * 100dvw));
	aspect-ratio: 1;
	border: 1px solid currentColor;
	transform: skew(20deg, 20deg);
	rotate: 45deg;
	translate: 0 -50%;
}

/* 装飾なしの大きめテキスト */
section[id^="wbl"] .ttlStyle05 {
	font-size: var(--fs-bigger);
	font-weight: var(--fw-medium);
	line-height: var(--lh-title);
}


/*
	ボタン・リンク
*/

/* 青グラデーション両側丸めボタン */
section[id^="wbl"] .btnStyle01 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: min(318px, calc(318 / var(--w-spContents) * 100dvw));
	max-width: 100%;
	height: 56px;
	margin: 0 auto;
	padding: 0 min(30px, 8%) 2px;
	background: var(--lg-brand02) no-repeat center / cover;
	border-radius: 28px;
	color: #fff;
	font-size: min(14px, calc(calc(14 / var(--w-spContents) * 100dvw + var(--spfs-diff) * 2)));
	font-weight: var(--fw-bold);
	white-space: nowrap;
}
section[id^="wbl"] .btnStyle01::after {
	content: '';
	display: block;
	position: absolute;
	right: 6%;
	top: 50%;
	width: 0.61em;
	aspect-ratio: 1;
	border: 1px currentColor;
	border-style: solid solid none none;
	translate: 0 -50%;
	rotate: 45deg;
}

/* 上記ボタンのピンクver */
section[id^="wbl"] .btnStyle01.pink {
	background-image: var(--lg-pink01);
}


/* ----------------------------------------

	ホワイトエッセンスコースページ用設定

---------------------------------------- */

/*
	ページレイアウト
*/

/* ページ全体のレイアウト */
@media (width > 768px) {
	.courseBgBlue {
		padding-top: 14px;
		background: var(--cl-bg01);
	}
	.courseBgWhite {
		width: fit-content;
		margin: 0 auto;
		padding: 20px 0 104px;
		background: #fff;
	}
}

[class*="courseBg"] section + section {
	margin-top: 40px;
}


/* SP追従 */
.courseFixedBottom {
	position: sticky;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 10000;
}
@media (width > 768px) {
	.courseFixedBottom {
		display: none;
	}
}

.courseFixedBottom .buttons {
	display: flex;
	align-items: stretch;
}
.courseFixedBottom .buttons > * {
	flex: 1 1 auto;
	width: 100%;
}
.courseFixedBottom .buttons a {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	background: no-repeat center / cover;
	border-radius: var(--br-basic) var(--br-basic) 0 0;
	color: #fff;
	font-size: 20px;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
}
.courseFixedBottom .buttons .tel a {
	background-image: var(--lg-brand02);
}
.courseFixedBottom .buttons .web a {
	background-image: var(--lg-pink01);
}
.courseFixedBottom .buttons a::before {
	content: '';
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 30px;
	margin-right: 12px;
	background: no-repeat center / contain;
}
.courseFixedBottom .buttons .tel a::before {
	aspect-ratio: 1;
	background-image: url("images/icon_phone.svg");
}
.courseFixedBottom .buttons .web a::before {
	aspect-ratio: 35 / 30;
	background-image: url("images/icon_calendar.svg");
}

.courseFixedBottom .line {
	position: absolute;
	right: 6px;
	bottom: calc(100% + 22px);
	opacity: 0;
	visibility: hidden;
	transition: 300ms ease;
	transition-property: opacity, visibility;
}
.courseFixedBottom .line.show {
	opacity: 1;
	visibility: visible;
}
.courseFixedBottom .line .close {
	position: absolute;
	top: 0;
	right: -5px;
	width: 30px;
	aspect-ratio: 1;
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0;
	translate: 0 -66.6%;
}
.courseFixedBottom .line .close::before,
.courseFixedBottom .line .close::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 1px;
	background: currentColor;
	rotate: 45deg;
	translate: -50% -50%;
}
.courseFixedBottom .line .close::after {
	rotate: -45deg;
}
.courseFixedBottom .line a {
	display: block;
	width: 186px;
	aspect-ratio: 186 / 52;
	border-radius: var(--br-small);
	overflow: hidden;
}
.courseFixedBottom .line img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* MVレイアウト */
.courseMv .mv {
	--w: 366;
	--h: 394;
	
	position: relative;
	aspect-ratio: var(--w) / var(--h);
	border-radius: var(--br-basic);
	overflow: hidden;
}
.courseMv .mv > :not(.image) {
	position: absolute;
}

.courseMv .notes {
	margin-top: 6px;
	color: var(--cl-note);
	font-size: 8px;
	line-height: 1.5;
}
.courseMv .notes li {
	position: relative;
	padding-left: 1.3em;
}
.courseMv .notes .asterisk {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}


/* 限定解除要件 */
.courseLimited {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
.courseLimited :is(.item, dt, dd) {
	display: inline;
}
.courseLimited .item:nth-child(n+2) {
	margin-left: 1.0em;
}
.courseLimited .item.about {
	display: block;
}
.courseLimited .item.about + .item {
	margin-left: 0;
}
.courseLimited dt::after {
	content: '：';
}
.courseLimited dd + dd {
	margin-left: 1.0em;
}


/*
	セクション
*/

/* wblMv */
#wblMv .title {
	left: calc(40 / var(--w) * 100%);
	top: calc(138 / var(--h) * 100%);
	font-size: min(16px, calc(16 / var(--w-spDesign) * 100dvw));
	font-weight: var(--fw-medium);
	line-height: 1.6;
}
#wblMv .badge {
	display: flex;
	justify-content: center;
	align-items: center;
	left: calc(31 / var(--w) * 100%);
	top: calc(230 / var(--h) * 100%);
	width: calc(129 / var(--w) * 100%);
	aspect-ratio: 129 / 112;
	padding-bottom: 2%;
	background: url("images/img_badge.webp") no-repeat center / contain;
	font-size: min(18px, calc(18 / var(--w-spDesign) * 100dvw));
	line-height: 1.2;
	text-align: center;
}
#wblMv .badge .base {
	display: inline-block;
	position: relative;
	background: var(--lg-we02) no-repeat center / cover;
	background-clip: text;
	color: transparent;
}
#wblMv .badge .note {
	display: inline-block;
	position: absolute;
	top: -1.3em;
	right: 0;
	background: var(--lg-we02) no-repeat center / cover;
	background-clip: text;
	font-size: min(9px, calc(9 / var(--w-spDesign) * 100dvw));
	line-height: 1.5;
}


/* wblPursuit */
#wblPursuit {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--pd-spH) var(--pd-spH) 0;
	border-radius: var(--br-basic);
	box-shadow: var(--bs-basic);
}
#wblPursuit::after {
	content: '';
	display: block;
	width: calc(305 / calc(var(--w-spDesign) - var(--pd-spHNum) * 4) * 100%);
	aspect-ratio: 305 / 227;
	margin-top: 26px;
	background: url("images/img_coun_non02.webp") no-repeat center bottom / contain;
}

#wblPursuit .catch {
	font-size: 14px;
	font-weight: var(--fw-bold);
	line-height: 1.7;
	text-align: center;
}

#wblPursuit .secTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
}
#wblPursuit .secTitle::before {
	content: '';
	display: block;
	width: 32px;
	aspect-ratio: 32 / 26;
	margin-bottom: 8px;
	background: url("images/icon_logo-symbol.svg") no-repeat center / contain;
}
#wblPursuit .secTitle .text {
	display: block;
	background: var(--lg-we02) no-repeat center / cover;
	background-clip: text;
	color: transparent;
}

#wblPursuit .target {
	width: 100%;
	aspect-ratio: 316 / 90;
	margin-top: 10px;
}

#wblPursuit .detail {
	margin-top: 37px;
}

#wblPursuit .note {
	margin-top: 5px;
	color: var(--cl-note);
	font-size: 8px;
	line-height: 1.5;
}


/* wblDetails */
#wblDetails .list {
	padding: var(--pd-spH);
	border-radius: var(--br-basic);
	overflow: hidden;
	box-shadow: var(--bs-basic);
}
#wblDetails .list > dd + dt {
	margin-top: 37px;
}

#wblDetails .list .recommend {
	display: flex;
	align-items: center;
	gap: 14px;
}
#wblDetails .list .recommend::before {
	content: '';
	flex: 0 0 auto;
	display: block;
	width: calc(116 / calc(var(--w-spDesign) - var(--pd-spHNum) * 4) * 100%);
	aspect-ratio: 1;
	background: url("images/img_blcmenu.webp") no-repeat center / cover;
	border-radius: var(--br-small);
}
#wblDetails .list .recommend .text {
	flex: 1 1 auto;
	font-size: 11px;
	line-height: 1.8;
}
#wblDetails .list .recommend .text li {
	position: relative;
	padding-left: 1.0em;
}
#wblDetails .list .recommend .text li::before {
	content: '・';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

#wblDetails .list .menuImage {
	aspect-ratio: 324 / 277;
	margin-top: 37px;
}
#wblDetails .list .menuContents {
	margin-top: 18px;
	padding: 14px 19px;
	background: var(--cl-bg01);
	border-radius: var(--br-small);
}
#wblDetails .list .menuContents .contentsList {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}
#wblDetails .list .menuContents .contentsList > dt::before {
	content: '【';
}
#wblDetails .list .menuContents .contentsList > dt::after {
	content: '】';
}
#wblDetails .list .menuContents .contentsList > dd {
	position: relative;
	padding-left: 1.0em;
}
#wblDetails .list .menuContents .contentsList > dd::before {
	content: '・';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

#wblDetails .list .case .title {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 22px;
	border-radius: var(--br-small);
	background: var(--cl-brand01);
	color: #fff;
	font-size: 12px;
	line-height: var(--lh-title);
}
#wblDetails .list .case .images {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
#wblDetails .list .case .images .item {
	flex: 1 1 auto;
	position: relative;
	width: 100%;
	border-radius: var(--br-small);
	overflow: hidden;
}
#wblDetails .list .case .images dt {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	min-width: 48px;
	min-height: 12px;
	background: var(--cl-note);
	border-bottom-right-radius: var(--br-small);
	color: #fff;
	font-family: var(--ff-stylish);
	font-weight: var(--fw-medium);
	font-size: 8px;
	line-height: 1.0;
}
#wblDetails .list .case .images .after dt {
	background: var(--cl-brand01);
}
#wblDetails .list .case .image {
	aspect-ratio: 154 / 87;
}
#wblDetails .list .case .noteArea {
	margin-top: 14px;
	color: var(--cl-note);
	font-size: 8px;
	line-height: 1.2;
}
#wblDetails .list .case .noteArea .note {
	color: var(--cl-brand03);
}
#wblDetails .list .case .noteArea .details :is(.item, dt, dd) {
	display: inline;
}
#wblDetails .list .case .noteArea .details .item:nth-child(n+2)::before {
	content: '／';
}
#wblDetails .list .case .noteArea .details dt::after {
	content: '：';
}

#wblDetails .list :is(.priceMonthly, .priceOnce) {
	font-weight: var(--fw-medium);
	line-height: 1.8;
}
#wblDetails .list :is(.priceMonthly, .priceOnce) .tax {
	font-size: 10px;
}
#wblDetails .list .priceMonthly {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 2;
}
#wblDetails .list .priceMonthly .main {
	flex: 0 0 auto;
}
#wblDetails .list .priceMonthly .sub {
	flex: 0 1 auto;
	color: var(--cl-brand03);
	font-size: 10px;
}
#wblDetails .list .priceOnce {
	font-size: 12px;
}

#wblDetails .reserve {
	margin-top: 60px;
}


/* wblLimited */