@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);
	margin-bottom: var(--gap10);
}
.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);
	counter-reset: p-courseDetail__title;
}
.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;
	align-items: center;
	gap: var(--gap02);
	font-size: var(--fs-xlarge);
	font-weight: 700;
	line-height: 1.3;
	counter-increment: p-courseDetail__title;
	@media (max-width: 640px) {
		font-size: var(--fs-large);
	}
	&.__nonum {
		&::before {
			content: none;
		}
	}
}
.p-courseDetail__title::before {
	content: "0" counter(p-courseDetail__title) ;
	font-family: var(--font-family02);
	color: var(--accent-color02);
	font-weight: 900;
	line-height: 1;
    padding-bottom: 5px;
	font-size: var(--fs-big);
}

.p-courseDetail__cont,
.p-coursePurchase__cont {
	position: relative;
	z-index: 5;
	padding: var(--gap06) var(--gap08);
	@media (max-width: 1024px) {
		padding: var(--gap05) var(--gap05) var(--gap04);
	}
	@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: collapse;
		@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: -120px 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;
	}
}