@charset "UTF-8";

.p-course-panel, .p-course-panel__panelInner, .p-course-panel__areaText, .p-course-panel__areaTextInner, .p-course-panel__box, .p-course-panel__boxOffset, .p-course-panel__placeButton, .p-course-panel__areaImage{
	& > :first-child{
		margin-top:0 !important;
	}

	& > :last-child{
		margin-bottom:0 !important;
	}
}

.p-course-panel{
	--main-color:#c41b1f;

	margin:40px 0 30px;

	&.of-confectionary{
		--main-color:#ff84a0;
	}

	&.of-cookery-2{
		--main-color:#ff9a39;
	}

	&.of-cookery-1{
		--main-color:#50c7a9;
	}

	& ~ &{
		position:relative;
		margin-top:101px;

		&::before{
			position:absolute;
			top:-51px;
			right:-20px;
			left:-20px;
			display:block;
			height:1px;
			background-color:rgba(34, 34, 34, 0.1);
			content:"";
		}
	}
}

.p-course-panel__panelInner{
	display:flex;
	flex-direction:column-reverse;
	gap:20px 0;
}

.p-course-panel__title{
	display:flex;
	align-items:center;
	justify-content:center;
	margin:20px 0 5px;
	gap:10px;
}

.p-course-panel__titleMain{
	color:var(--main-color);
	font-size:2.4rem;
	font-weight:700;
	letter-spacing:0.1em;
	line-height:1.45833;
}

.p-course-panel__titleSub{
	display:inline-flex;
	min-width:58px;
	min-height:22px;
	align-items:center;
	justify-content:center;
	padding:2px 12px 3px;
	border-radius:9em;
	background-color:var(--main-color);
	color:#fff;
	font-size:1.2rem;
	font-weight:700;
	line-height:1;
	text-align:center;
	white-space:nowrap;
}

.p-course-panel__desc{
	text-align:center;
}

.p-course-panel__box{
	--bg-color:#fdf9f4;

	border-radius:5px;
	margin-top:20px;
	background-color:var(--bg-color);

	.p-course-panel.of-confectionary &{
		--bg-color:#ffefef;
	}

	.p-course-panel.of-cookery-2 &{
		--bg-color:#fff0e1;
	}

	.p-course-panel.of-cookery-1 &{
		--bg-color:#e2f7f2;
	}
}

.p-course-panel__boxOffset{
	padding:16px 20px 24px;
}

.p-course-panel__placeButton{
	margin-top:20px;
	text-align:center;
}

.p-course-panel__areaImage{
	overflow:hidden;
	border-radius:10px;
}

@media (width > 767px){
	.p-course-panel{
		margin:80px 0 40px;

		& ~ &{
			margin-top:100px;

			&::before{
				display:none;
			}
		}
	}

	.p-course-panel__panelInner{
		flex-direction:row-reverse;
	}

	.p-course-panel__areaText{
		--bg-color:#fdf9f4;

		display:flex;
		flex-grow:1;
		align-items:center;
		padding:20px;
		border-radius:0 20px 20px 0;
		background-color:var(--bg-color);

		.p-course-panel.of-confectionary &{
			--bg-color:#fff4f4;
		}

		.p-course-panel.of-cookery-2 &{
			--bg-color:#fff0e1;
		}

		.p-course-panel.of-cookery-1 &{
			--bg-color:#e2f7f2;
		}
	}

	.p-course-panel__areaTextInner{
		max-width:396px;
		flex-grow:1;
		margin-inline:auto;
	}

	.p-course-panel__title{
		justify-content:flex-start;
		gap:12px;
	}

	.p-course-panel__desc{
		text-align:left;
	}

	.p-course-panel__box{
		margin-top:15px;

		.p-course-panel.of-confectionary &{
			--bg-color:#fffcfc;
		}

		.p-course-panel.of-cookery-2 &{
			--bg-color:#fff8f0;
		}

		.p-course-panel.of-cookery-1 &{
			--bg-color:#effdfa;
		}
	}

	.p-course-panel__boxOffset{
		padding:16px 30px 24px;
	}

	.p-course-panel__placeButton{
		margin-top:25px;

		[class*="c-button-"][class*="__button"]{
			width:100%;
		}
	}

	.p-course-panel__areaImage{
		max-width:55.68369%;
		flex-basis:100%;
		flex-shrink:0;
		border-radius:20px 0 0 20px;

		@container l-main (max-width: 1050px){
			max-width:50%;
		}

		.p-course-panel[class*="of-"] &{
			position:relative;

			&::before{
				position:absolute;
				z-index:1;
				top:0;
				left:0;
				display:block;
				background:no-repeat 0 0 / 100%;
				content:"";
			}
		}

		.p-course-panel.of-confectionary &{
			&::before{
				width:100%;
				max-width:96.00592%;
				aspect-ratio:649 / 54;
				background-image:url(../img/bg_p-course-panel__areaImage_confectionary.svg);
			}
		}

		.p-course-panel.of-cookery-2 &{
			&::before{
				width:100%;
				max-width:65.53254%;
				aspect-ratio:443 / 135;
				background-image:url(../img/bg_p-course-panel__areaImage_cookery-2.svg);
			}
		}

		.p-course-panel.of-cookery-1 &{
			&::before{
				width:100%;
				max-width:53.99408%;
				aspect-ratio:365 / 54;
				background-image:url(../img/bg_p-course-panel__areaImage_cookery-1.svg);
			}
		}
	}
}