@charset "UTF-8";

/* miniレクチャー */
.page-lecture {
	--adjustPadding: 25px;
}
.page-lecture .base-wrapper + .base-wrapper {
	padding-top: 30px;
	position: relative;
}
.page-lecture .base-wrapper + .base-wrapper::before {
	content: '';
	display: block;
	width: calc(100% - var(--adjustPadding) * 2);
	height: 4px;
	background-color: #F2F7F9;
	background-image: linear-gradient(90deg, #7DACC6 0 33.3%, #C52274 33.4% 66.7%, #542554 66.8% 100%);
	position: absolute;
	top: 0;
	left: var(--adjustPadding);
	transform: translateY(-50%);
}
.page-lecture .base-heading01,
.page-lecture .base-text-block,
.page-lecture .grid-col {
	padding: 0 var(--adjustPadding);
}
.page-lecture .base-wrapper .grid-col {
	margin-bottom: 30px;
}
.page-lecture .base-wrapper + .base-wrapper .grid-col {
	margin-top: 25px;
}
.page-lecture .base-wrapper .grid-col .col_item a {
	display: block;
	position: relative;
}
.page-lecture .base-wrapper .grid-col .col_item a::before,
.page-lecture .base-wrapper .grid-col .col_item a::after {
	content: '';
	display: block;
	position: absolute;
}
.page-lecture .base-wrapper .grid-col .col_item a::before {
	aspect-ratio: 104 / 28;
	width: 104px;
	background: url('../img/icon_click_flame01.svg') no-repeat center;
	background-size: contain;
	right: 0;
	top: 10px;
}
.page-lecture .base-wrapper .grid-col .col_item a::after {
	aspect-ratio: 22 / 21;
	width: 21px;
	background: url('../img/icon_cursor_pointer01.svg') no-repeat center;
	background-size: contain;
	right: 10px;
	top: 14px;
}
.page-lecture .base-wrapper .grid-col .col_item a:hover::after {
	animation: tumbnail-click 0.4s linear;
}
.page-lecture .base-text {
	color: #4d4d4d;
}
.page-lecture .grid-col {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	margin-top: 50px;
	grid-gap: 35px 25px;
}
.page-lecture .grid-col .desc_heading {
	border-left: 0;
	color: #387e99;
}
@media only screen and (max-width: 767px) {
	.page-lecture .base-wrapper + .base-wrapper {
		padding-top: 20px;
	}
  .page-lecture .grid-col {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
}

@keyframes tumbnail-click {
	/* ちょっと左に動きながら左に傾いてから元に戻るようなアニメーション */
	0% {
		transform: translateX(0) rotate(0deg);
	}
	50% {
		transform: translateX(-10px) rotate(-5deg);
	}
	100% {
		transform: translateX(0) rotate(0deg);
	}
}