@charset "UTF-8";

/* =========================================================
p-course
========================================================= */
.p-courseSec {
	position: relative;
	max-width: var(--max-width01);
	margin: auto;
	@media (max-width: 1024px) {
		padding: 0 var(--gap05) 0;
	}
	@media (max-width: 640px) {
		padding: 0 var(--gap03) 0;
	}
}
.p-courseImg {
	position: relative;
	max-width: 780px;
	margin: -100px auto 0;
	z-index: 5;
	@media (max-width: 991px) {
		margin: -30px auto 0;
	}
}
.p-courseWhy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap04);

	color: var(--text-color04);
	background-color: rgba(17,28,59,.9);

	margin-top: -50px;
	margin-bottom: var(--gap10);
	padding: var(--gap10) var(--gap08) var(--gap08);
	@media (max-width: 1024px) {
		padding: var(--gap10) var(--gap05) var(--gap04);
	}
	@media (max-width: 640px) {
		padding: var(--gap10) var(--gap05) var(--gap05);
		margin-left: clamp(-0.75rem, 0.8vw + 0.3rem, -1.5rem); ;
		margin-right: clamp(-0.75rem, 0.8vw + 0.3rem, -1.5rem); ;
	}
}
.p-courseWhy__sub {
	font-size: var(--fs-p);
	text-align: center;
	text-wrap: balance;
}
.p-courseWhy__main {
	font-size: var(--fs-large);
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	@media (max-width: 640px) {
	font-size: var(--fs-title);
	}
}
.p-courseWhy__mainInner {
	text-wrap: balance;
	padding: 3px 5px;
	line-height: 1.8;
	background: var(--gradient-button04); 

}
.p-courseWhy__text {
	text-align: left;
	font-size: var(--fs-p);
	line-height: 1.8;
	font-weight: normal;
}


.p-courseSolv {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap04);
}
.p-courseSolv__main {
	position: relative;
	font-size: var(--fs-large);
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	text-wrap: balance;
	margin-bottom: var(--gap04);
	@media (max-width: 640px) {
		font-size: var(--fs-title);
	}
	&::before {
		content: "";
		position: absolute;
		bottom: -10px;
		right: 0;
		left: 0;
		margin: auto;
		width: 100%;
		height: 2px;
		background-color: var(--accent-color02);
	}
}
.p-courseSolv__sub {
	font-size: var(--fs-postp);
	line-height: 1.8;
	text-align: center;
	text-wrap: balance;
	strong {
		color: var(--accent-color04);
	}
}
.p-courseSolv__text {
	font-size: var(--fs-p);
	line-height: 1.8;
	text-align: center;
	text-wrap: balance;
	font-weight: normal;
}

.p-courseCatch {
	position: relative;
    font-size: var(--fs-subtitle);
    font-weight: bold;
    padding-bottom: var(--gap05);
    margin: 0 auto var(--gap05)!important;
    text-align: center;
    width: fit-content;
    text-wrap: balance;
	&::after {
		content: "";
		position: absolute;
		bottom: 0px;
		right: 0;
		left: 0;
		margin: auto;
		width: 64px;
		height: 2px;
		background-color: #2EB979;
	}
}

.p-courseDetail {
	display: flex;
	flex-direction: column;
	gap: var(--gap10);
	margin-bottom: var(--gap10);
}
.p-courseDetail__sec {
	font-weight: normal;
	font-size: var(--fs-p);
	line-height: 2;
    display: flex;
    flex-direction: column;
    gap: var(--gap04);
	@media (max-width: 640px) {
		font-size: var(--fs-mid);
	}
	&.__faq {
		.view-contents {
			display: flex;
			flex-direction: column;
			gap: var(--gap04);
		}
	}

}
.p-courseDetail__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap02);
	font-size: var(--fs-large);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	counter-increment: p-courseDetail__title;
	@media (max-width: 640px) {
		font-size: var(--fs-large);
	}
	&.__nonum {
		&::before {
			content: none;
		}
	}
}
.p-courseDetail__titleSub {
	font-size: var(--fs-mid);
	color: var(--accent-color02);
}

.p-courseDetail__cont,
.p-coursePurchase__cont {
	position: relative;
	z-index: 5;
	padding: var(--gap07) var(--gap08) var(--gap06);
	@media (max-width: 1024px) {
		padding: var(--gap05) var(--gap05) var(--gap05);
	}
	@media (max-width: 640px) {
		padding: var(--gap05) var(--gap04) var(--gap05);
	}
}

.p-courseDetail__cont {

	display: flex;
	flex-direction: column;

	background-color: var(--base-color03);
	border-radius: var(--radius01);
	box-shadow: var(--shadow00); 

	&.__nobg {
		padding: 0;
		background-color: transparent;
		box-shadow: none;
	}

	&.__faq {
		display: flex;
		flex-direction: column;
		gap: var(--gap01);
		.view-contents {
			display: flex;
			flex-direction: column;
			gap: var(--gap01);
		}
	}

	p {
		margin: 1.3em 0!important;
	}
	ul {
		margin: 0!important;
		padding: 0!important;
	}
	li {
		font-size: var(--fs-mid);
		font-weight: normal;
		line-height: 1.5;
	}
	ul {
		li {
			position: relative;
			padding-left: 24px;
			&::before {
				content: "";
				width: 12px;
				height: 12px;
				background-color: var(--accent-color02);
				position: absolute;
				left: 0;
				top: 8px;
				@media (max-width: 1024px) {
					width: 10px;
					height: 10px;
					top: 6px;
				}
			}
		}
	}
	table {
		font-size: 15px;
		border: 5px solid var(--base-color02);
		border-collapse: separate;
		border-spacing: 0;
		@media (max-width: 640px) {
			border: 2px solid var(--base-color02);
		}
		tr {
			@media (max-width: 640px) {
				display: flex;
				flex-direction: column;
			}
			&:not(:last-child) {
				td {
					border-bottom: 2px solid var(--base-color02);
					br {
						display: none;
					}
				}
			}
		}
		th {
			padding: var(--gap02);
			background-color: var(--base-color02);            width: clamp(100px, 10vw, 240px);
            font-size: var(--fs-min);
			@media (max-width: 640px) {
				width: 100%;
				br {
					display: none;
				}
			}
		}
		td {
			padding: var(--gap04);
		}
		td:not(:last-child) {
			border-bottom: 1px solid var(--base-color02);
		}
	}
}

.p-courseDetail_review {
	background-color: var(--base-color03);
}


.p-coursePurchase {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap10);
	margin-bottom: var(--gap10);
	@media (max-width: 640px) {
		gap: var(--gap06);
	}

	.item-style {
		margin-bottom: var(--gap03);
	}
}
.p-coursePurchase__title {
	font-size: var(--fs-xlarge);
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}
.p-coursePurchase__titleCourse {
	font-size: var(--fs-mid);
	color: var(--accent-color02);
}
.p-coursePurchase__titleCourse__text {
	text-align: center;
	text-wrap: balance;
	font-size: var(--fs-mid);
	font-weight: normal;
}

.p-coursePurchase__price {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	text-align: center;
	margin: var(--gap05) auto;
}
.p-coursePurchase__priceNum {
	position: relative;
	font-family: var(--font-outfit);
	font-size: var(--fs-postp);
	font-weight: 700;
	line-height: 1;
	span {
		font-size: var(--fs-mid);
	}

	&.__base {
		color: var(--text-color02);
		width: fit-content;
        margin: auto;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			width: 100%;
			height: 1px;
			background-color: var(--text-color02);
		}
	}
	&.__campaign {
		color: var(--accent-color04);
		font-size: var(--fs-big);
	}
}
.p-coursePurchase__priceBadge {
	width: fit-content;
	background-color: var(--accent-color04);
	padding: 2px 5px;
	color: var(--text-color04);
	margin: auto;
}

.p-coursePurchase__sec {
	position: relative;
	width: 100%;
	background-color: var(--base-color01);
	padding: var(--gap06) var(--gap06) var(--gap10);
	@media (max-width: 1024px) {
		padding: var(--gap05) var(--gap04) var(--gap10);
	}
	@media (max-width: 640px) {
		padding: var(--gap03) var(--gap02) var(--gap05);
	}
}
.p-coursePurchase__inner {
	position: relative;
	max-width: var(--max-width01);
	background-color: var(--base-color03);
	border-radius: 2px;
	margin: auto;
}
.p-coursePurchase__cont {
	position: relative;
	margin: auto;
}
.p-coursePurchase__img {
	max-width: 780px;
    margin: -120px auto 0;
	@media (min-width: 1921px) {
		margin: -160px auto 0;
	}
	@media (max-width: 1024px) {
		margin: -70px auto 0;
	}
	@media (max-width: 640px) {
		margin: -50px auto 0;
	}
}

.p-coursePurchaseBtn {
	max-width: fit-content;

	display: flex;
	gap: var(--gap02);
	align-items: center;
	justify-content: center;
	margin: auto;
	box-shadow: var(--shadow02);

	&::before {
		font-family: "Material Symbols Outlined";
		content: "shopping_cart";
		font-size: var(--fs-large);
		color: var(--text-color04);
	}

	/* 上部に設置 */
	&.__top {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		@media (max-width: 1024px) {
			bottom: -30px;
		}
	}
	/* 固定ボタン */
	&.__fixed {
		position: fixed;
		bottom: 39px;
		left: 0;
		right: 0;
		width: 100%;
		transform: translateX(0%) translateY(100px);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
		z-index: 1000;
		@media (max-width: 768px) {
			max-width: inherit;
			padding: var(--gap02) var(--gap04);
		}
		&.__show {
			transform: translateX(-0%) translateY(0);
			opacity: 1;
			visibility: visible;
		}
	}
}

.p-coursePurchase__cartbtn {

}

.p-coursePurchase__btns {
	@media (max-width: 640px) {
		display: flex;
		flex-direction: column-reverse;
		gap: var(--gap01);
	}
	.mitumori-btn {
		@media (max-width: 640px) {
			width: 100%;
		}
	}
}
.p-coursePurchase__btnsForm {
	@media (max-width: 640px) {
		width: 100%!important;
	}
}

/* =========================================================
p-course content parts / section
========================================================= */

/* 講師紹介
--------------------------------------------------------- */
.p-courseTeacher {
	display: flex;
	gap: var(--gap05);
	@media (max-width: 798px) {
		flex-direction: column;
		align-items: center;
		gap: var(--gap04);
	}
}
.p-courseTeacher__img {
	width: 100%;
    max-width: clamp(160px, 15vw, 200px);
    overflow: hidden;
	flex-shrink: 0;
}
.p-courseTeacher__imgItem {
	width: 100%;
	object-fit: cover;
}
.p-courseTeacher__cont {
	width: 100%;
}


/* キャッチコピー
--------------------------------------------------------- */
.p-coursePoint {
	padding: var(--gap05) 0;
	gap: var(--gap05);
}
.p-coursePoint__unit {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--gap05);
	color: var(--text-color04);
	padding: 0 var(--gap05) var(--gap05);
	counter-reset: p-coursePoint__title;
	@media (max-width: 591px) {
		flex-direction: column;
	}
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: calc(100% - 30px);
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: linear-gradient(120deg, #43568D 0%, var(--base-color01) 30%);
	}
}
.p-coursePoint__item {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap03);
	align-items: center;
	justify-content: center;
}
.p-coursePoint__img {
	display: block;
	object-fit: cover;
}
.p-coursePoint__title {
	width: 100%;
	position: relative;
	font-size: var(--fs-mid);
	text-align: center;
	text-wrap: balance;
	counter-increment: p-coursePoint__title;
	@media (max-width: 798px) {
		justify-content: center;
		font-size: var(--fs-p);
	}
	&:before {
		content: counter(p-coursePoint__title);

		position: absolute;
		top: -45px;
		left: 20px;
		font-size: 50px;
		text-shadow:1px 1px 0 var(--accent-color02), -1px -1px 0 var(--accent-color02),
              -1px 1px 0 var(--accent-color02), 1px -1px 0 var(--accent-color02),
              0px 1px 0 var(--accent-color02),  0 -1px 0 var(--accent-color02),
              -1px 0 0 var(--accent-color02), 1px 0 0 var(--accent-color02);
		color: var(--text-color04);
		font-family: var(--font-outfit);
		font-weight: 900;
		line-height: 1;

	}

}

/* 問題定義
--------------------------------------------------------- */
.p-courseIssue__unit {
	display: flex;
	gap: var(--gap04);
	margin-bottom: var(--gap05);
	@media (max-width: 591px) {
		flex-direction: column;
		margin-bottom: var(--gap03);
	}
}
.p-courseIssue__item {
	position: relative;
	flex: 1;
	overflow: hidden;
	&::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		background: linear-gradient(180deg,rgba(17,28,59,0) 0%, var(--base-color01) 50%);
		z-index: 1;
	}
}
.p-courseIssue__img {
	position: absolute;
	z-index: 0;
	width: 100%;
	object-fit: contain;
	display: block;
}
.p-courseIssue__info {
	position: relative;
	z-index: 2;
	color: var(--text-color04);
}
.p-courseIssue__info {
	display: flex;
	flex-direction: column;
	gap: var(--gap03);
	padding: 100px var(--gap05) var(--gap05);
	@media (max-width: 591px) {
		padding: 100px var(--gap05) var(--gap05);
	}
}

.p-courseIssue__infoTitle {
	font-size: var(--fs-postp);
	font-weight: bold;
}

.p-courseIssue__infoUl {
	display: flex;
	flex-direction: column;
	gap: var(--gap02);
}
.p-courseIssue__infoList {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-left: 0px!important;
	&::before {
		content: "\e5cd"!important;
		font-family: 'Material Symbols Outlined' !important;
		font-weight: 400!important;
		color: var(--accent-color03);
		background-color: transparent!important;
		position: relative!important;
		left: 0!important;
		top: 0px!important;
		width: auto!important;
		height: auto!important;
	}
}

/* 解決策
--------------------------------------------------------- */
.p-courseSolv__unit {
	display: flex;
	flex-direction: column;
	gap: var(--gap08);
	margin-bottom: var(--gap05);
	@media (max-width: 591px) {
		gap: var(--gap04);
	}
}
.p-courseSolv__item {
	display: flex;
	gap: var(--gap05);
	align-items: flex-start;
	@media (max-width: 591px) {
		gap: var(--gap02);
		flex-direction: column;
	}
}
.p-courseSolv__img {
	width: clamp(180px, 40vw, 400px);
	flex-shrink: 0;
	object-fit: fill;
	@media (max-width: 591px) {
		width: 100%;
	}
	
}
.p-courseSolv__info {
	display: flex;
	flex-direction: column;
	gap: var(--gap01);
	@media (max-width: 591px) {
		align-items: center;
		margin-top: -20px;
	}
}
.p-courseSolv__infoBadge {
	width: fit-content;
	display: flex;
	align-items: center;
	border: 1px solid var(--accent-color02);
	font-size: var(--fs-min);
}
.p-courseSolv__infoBadge__cat,
.p-courseSolv__infoBadge__catch {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2px 10px;
    font-weight: 700;
}
.p-courseSolv__infoBadge__cat {
	color: var(--accent-color02);
	background-color: var(--base-color03);
}
.p-courseSolv__infoBadge__catch {
	color: var(--text-color04);
	background-color: var(--accent-color02);
}

.p-courseSolv__infoTitle {
	font-size: var(--fs-large);
	line-height: 1.5;
}
.p-courseSolv__infoText {
	font-size: var(--fs-mid);
}

/* 比較
--------------------------------------------------------- */

.p-courseDetail__cont .p-courseCompare__table {
	font-size: var(--fs-min);
	border-collapse: collapse;
	border: none!important;
	margin-bottom: var(--gap05);

	th, td {
		padding: 0;
		border-bottom: .5px solid var(--border-color01)!important;
		font-weight: bold;
		@media (max-width: 640px) {
			width: 50%;
		} 
	}
	tr {
		@media (max-width: 640px) {
			display: table;
		} 
	}

	br {
		display: block!important;
		@media (max-width: 798px) {
			display: none!important;
		}
	}

	td div {
		padding: var(--gap04) var(--gap04);
		display: flex;
		align-items: center;
		gap: 10px;
		text-align: center;
		justify-content: center;
		@media (max-width: 640px) {
			gap: 2px;
			flex-direction: column;
			padding: var(--gap04) var(--gap02);
		} 
	}

	tr th:first-child {
		width: clamp(30px, 5vw, 50px);
		@media (max-width: 640px) {
			min-width: 60px;
		} 
	}

	.material-symbols-outlined {
		color: var(--accent-color02);
		flex-shrink: 0;
		&.__close {
			color: var(--accent-color03);
		}
	}

	.p-courseCompare__tableAppeal > div {
	}

	.p-courseCompare__tableAppeal {
		position: relative;
		z-index: 2;
		background-color: #fff;
		box-shadow: inset 4px 0 0 var(--accent-color02),
		            inset -4px 0 0 var(--accent-color02);
	}

	thead th {
		background-color: transparent;
	}


	thead .p-courseCompare__tableAppeal {
		background-color: #f8fbfe;
		box-shadow: inset 0 4px 0 var(--accent-color02),
		            inset 4px 0 0 var(--accent-color02),
		            inset -4px 0 0 var(--accent-color02);
	}

	tbody tr:last-child .p-courseCompare__tableAppeal {
		box-shadow: inset 0 -4px 0 var(--accent-color02),
		            inset 4px 0 0 var(--accent-color02),
		            inset -4px 0 0 var(--accent-color02);
	}
	.p-courseCompare__tableLogo {
		padding: var(--gap04) var(--gap02);
		line-height: 1;
		@media (max-width: 640px) {
			img {
				width: 80px;
			}
		} 
	}

	.p-courseCompare__tableTheadth {
		&.__normal {
			color: var(--text-color04);
			background-color: var(--base-color01);
		}
	}
}