/* ---------------------------------------------------------------------- */
/* イントロ部分 */
/* ---------------------------------------------------------------------- */

/* ベース */
.intro-content {
	background-image: url(../img/top/bg-intro.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 13px 10px;
}

.button-item {
	background-color: var(--bl-lt);
	padding: 30px 20px;
}

/* メインビジュアル配置 */
.intro-content .grid {
	grid-template-areas:
		"three three"
		"one two";
	grid-template-columns: 2fr 1fr;
	row-gap: 7px;
}

.item-1 {
	align-content: center;
	display: flex;
	grid-area: one;
	justify-content: center;
	margin: auto;
}

.item-2 {
	aspect-ratio: 105/185;
	grid-area: two;
	overflow: hidden;
}

.item-3 {
	aspect-ratio: 340/189;
	grid-area: three;
	overflow: hidden;
	width: 100%;
}

/* メインビジュアル スライダー（Splide.js） */
.item-2 .splide__track,
.item-3 .splide__track {
	height: 100%;
}

.item-2 .splide__slide img,
.item-3 .splide__slide img {
	height: 100%;
	object-fit: cover;
	width: 100%;
	border-radius: 1.8vw;
}

.item-2 .splide__pagination,
.item-3 .splide__pagination {
	bottom: 10px;
}

.item-2 .splide__pagination__page,
.item-3 .splide__pagination__page {
	background: var(--wh);
	opacity: .5;
}

.item-2 .splide__pagination__page.is-active,
.item-3 .splide__pagination__page.is-active {
	opacity: 1;
}

/* リスト */
.item-list {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.item-list li {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	position: relative;
	z-index: 1;
}

.item-tag {
	align-items: center;
	background-color: var(--rd);
	border-radius: var(--r-pill);
	color: var(--wh);
	display: flex;
	font-size: 10px;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	left: -10px;
	line-height: 120%;
	padding: 5px 0;
	position: absolute;
	top: -11px;
	width: 90px;
	z-index: 2;
}

.item-list li a {
	align-items: center;
	aspect-ratio: 9/7;
	background-color: var(--wh);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-s);
	color: var(--bl);
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	transition: var(--tr);
}

.card-icon img {
	height: 17vw; /*65px;*/
	width: 17vw; /*65px;*/
}

.item-list li a p.flex {
	align-items: center;
	gap: 12px;
	justify-content: center;
	font-size: calc(6px + 1.6vw);
}

.item-list li a p.flex img {
	height: calc(8px + 2.4vw); /*16px;*/
	width: calc(8px + 2.4vw); /*16px;*/
}

.item-list li a:hover {
	background-color: var(--bl);
	color: var(--wh);
	transition: var(--tr);
}

@container (min-width: 769px) {

	/* ベース */
	.intro-content {
		background-image: url(../img/top/intro-sp.webp);
		padding: 70px 0;
	}

	.button-item {
		padding: 140px 20px;
	}

	/* メインビジュアル配置 */
	.intro-content .grid {
		align-items: end;
		column-gap: 7px;
		grid-template-areas: "one two three";
		grid-template-columns: 2fr 1fr 1fr;
		justify-content: start;
		padding-right: 5vw;
		row-gap: 0;
	}

	.item-1 {
		justify-content: flex-start;
		margin-left: 0;
	}

	.item-1 img {
		width:936px;
	}

	.item-2 {
		aspect-ratio: 28/63;
		border-radius: var(--r-pill);
		max-height: 630px;
	}

	.item-3 {
		aspect-ratio: 450/776;
		border-radius: var(--r-pill);
		max-height: 776px;
		min-height: 776px;
	}

	/* メインビジュアル スライダー（Splide.js） */
	.item-2 .splide__pagination,
	.item-3 .splide__pagination {
		bottom: 24px;
	}

	/* リスト */
	.item-list {
		gap: 45px;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		margin: auto;
		max-width: 1200px;
	}

	.item-tag {
		font-size: 16px;
		height: 36px;
		left: -15px;
		top: -18px;
		width: 200px;
	}

	.item-list li a {
		width: 100%;
	}

	.card-icon img {
		height: min(8.333333vw, 100px); /*100px;*/
		width: min(8.333333vw, 100px); /*100px;*/
	}

	.item-list li a p.flex {
		font-size: min(9px + 0.75vw, 18px); /*18px;*/
		gap: 16px;
	}

	.item-list li a p.flex img {
		height: min(15px + 1.25vw, 30px); /*30px;*/
		width: min(15px + 1.25vw, 30px); /*30px;*/
	}

}

/* ---------------------------------------------------------------------- */
/* 新着情報 */
/* ---------------------------------------------------------------------- */

/* ベース */
.topics {
	background-image: linear-gradient(0deg, rgba(0, 1, 74, 0.50) 0%, rgba(0, 1, 74, 0.50) 100%), url(../img/top/bg-topics-sp.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 30px 20px 50px 20px;
}

/* 見出し */
.topics h2 {
	margin-bottom: 30px;
}

.topics h2 img {
	height: 36px;
	margin: auto;
	width: auto;
}

/* 新着リスト */
.topics-area {
	background-color: var(--wh);
	border-radius: var(--r-md);
	padding: 44px 20px 25px 20px;
}

.topics-area .article-ph {
	aspect-ratio: 16/9;
	background-color: #ddd;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
}

.news-list {
	gap: 30px;
	margin-bottom: 35px;
}

.news-list a {
	gap: 5px;
	position: relative;
}

.news-list a .cate-name {
	align-items: center;
	background-color: var(--bl);
	border-radius: 23px;
	color: var(--wh);
	font-size: 10px;
	height: 23px;
	justify-content: center;
	left: -10px;
	position: absolute;
	top: -11.5px;
	width: 110px;
	z-index: 1;
}

.news-list a .cate-name.cate-initiative {
	background-color: var(--gr);
}

.news-list a .cate-name.cate-ability {
	background-color: var(--rd);
}

.news-list a .cate-name.cate-classroom {
	background-color: var(--gd);
}

.news-list a time {
	font-size: 14px;
}

.news-list a .article-title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 12px;
	transition: var(--tr);
	overflow: hidden;
}

.news-list a:hover .article-title {
	color: var(--rd);
	transition: var(--tr);
}

/* タブ切り替え */
.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button {
	align-items: center;
	background-color: var(--wh);
	display: flex;
	height: 35px;
	justify-content: center;
	padding: 0;
	width: 72px;
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-all {
	border: 2px solid var(--bl);
	color: var(--bl);
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-training {
	border: 2px solid var(--gd);
	color: var(--gd);
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-course {
	border: 2px solid var(--rd);
	color: var(--rd);
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-class {
	border: 2px solid var(--gr);
	color: var(--gr);
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-all,
.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-training,
.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-course,
.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-class {
	border-bottom: none;
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button[aria-selected="true"] {
	border-bottom: none;
	box-sizing: border-box;
	color: var(--wh);
	font-weight: 500;
	line-height: 120%;
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-all[aria-selected="true"] {
	background-color: var(--bl);
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-training[aria-selected="true"] {
	background-color: var(--gd);
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-course[aria-selected="true"] {
	background-color: var(--rd);
}

.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button.tab-class[aria-selected="true"] {
	background-color: var(--gr);
}

/* すべて見る */
.more a {
	align-items: center;
	background-color: var(--bl);
	border-radius: var(--r-pill);
	color: var(--wh);
	height: 50px;
	justify-content: center;
	transition: var(--tr);
	margin: auto;
	width: 180px;
}

.more a:hover {
	background-color: var(--wh);
	border: 2px solid var(--bl);
	color: var(--bl);
	transition: var(--tr);
}

@container (min-width: 769px) {

	/* ベース */
	.topics {
		background-image: linear-gradient(0deg, rgba(0, 1, 74, 0.50) 0%, rgba(0, 1, 74, 0.50) 100%), url(../img/top/bg-topics-pc.webp);
		padding: 144px 0 142px 0;
	}

	/* 見出し */
	.topics h2 {
		margin-bottom: 50px;
	}

	.topics h2 img {
		height: 45px;
	}

	/* 新着リスト */
	.topics-area {
		padding: 80px 50px 70px 50px;
	}

	.topics-area .article-ph {
		aspect-ratio: 25/15;
		flex-shrink: 0;
		height: auto;
		width: 250px;
	}

	.topics-area .article-ph img {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.news-list li a.flex.flex-col {
		flex-direction: row;
		gap: 45px;
	}

	.news-list a .cate-name {
		border-radius: 36px;
		font-size: 18px;
		height: 32px;
		padding: 0 20px;
		width: auto;
	}

	.title-date {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 20px;
		min-width: 0;
	}

	.news-list a time {
		font-size: 18px;
	}

	.news-list a .article-title {
		font-size: 18px;
	}

	/* タブ切り替え */
	.topics-tab-list {
		margin: auto;
		max-width: var(--content-w);
	}

	.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button {
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		gap: 15px;
		height: 62px;
		width: 175px;
	}

	.tabs__nav.topics-tab .tabs__nav-item .tabs__nav-button br {
		display: none;
	}

	.tabs__panel {
		padding: 0;
	}

	/* すべて見る */
	.more.center {
		align-items: center;
		display: flex;
		justify-content: flex-end;
		text-align: right;
	}

	.more a {
		margin-right: 0;
	}

}

/* ---------------------------------------------------------------------- */
/* 講習・講座・教室 スケジュールカレンダー */
/* ---------------------------------------------------------------------- */

/* ベース */
.schedule {
	background-color: #e3e3e3;
	padding: 30px 20px;
}

/* 見出し */
.schedule h2 {
	margin: auto;
	margin-bottom: 30px;
}

.schedule h2 img {
	height: 40px;
	margin: auto;
	width: auto;
}

/* タブ切り替え用 */
.top-schedule-area .tabs__nav {
	justify-content: flex-start;
	padding: 0 10px;
}

.top-schedule-area .tabs__nav .tabs__nav-button {
	align-items: center;
	background-color: var(--wh);
	display: flex;
	font-size: 10px;
	height: 35px;
	justify-content: center;
	padding: 8px;
	width: 75px;
}

.tabs__nav-button.tab-training {
	border: 2px solid var(--gd);
	color: var(--gd);
}

.tabs__nav-button.tab-course {
	border: 2px solid var(--rd);
	color: var(--rd);
}

.tabs__nav-button.tab-class {
	border: 2px solid var(--gr);
	color: var(--gr);
}

.tabs__nav-button.tab-training,
.tabs__nav-button.tab-course,
.tabs__nav-button.tab-class {
	border-bottom: none;
}

.tabs__nav-button[aria-selected="true"] {
	border-bottom: none;
	box-sizing: border-box;
	color: var(--wh);
	font-weight: 500;
	line-height: 120%;
}

.tabs__nav-button.tab-training[aria-selected="true"] {
	background-color: var(--gd);
}

.tabs__nav-button.tab-course[aria-selected="true"] {
	background-color: var(--rd);
}

.tabs__nav-button.tab-class[aria-selected="true"] {
	background-color: var(--gr);
}

/* グーグルカレンダー */
.top-schedule-area {
	margin-bottom: 50px;
}

.top-schedule iframe {
	border-radius: var(--r-md);
	box-shadow: var(--sh-s);
	max-width: 100%;
	width: 100%;
}

/* バナーリスト */
.top-bnr {
	flex-direction: column;
	gap: 15px;
	margin: auto;
	margin-bottom: 30px;
	max-width: calc( 100% - 40px );
}

.top-bnr li img {
	box-shadow: var(--sh-l);
}

@container (min-width: 769px) {

	/* ベース */
	.schedule {
		padding: 140px 20px;
	}

	/* 見出し */
	.schedule h2 {
		margin-bottom: 50px;
	}

	.schedule h2 img {
		height: 45px;
	}

	/* タブ切り替え用 */
	.top-schedule-area .tabs__nav {
		gap: 15px;
	}

	.top-schedule-area .tabs__nav .tabs__nav-button {
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		font-size: 20px;
		height: 50px;
		line-height: var(--lh);
		width: 210px;
	}

	.tabs__panel.top-schedule {
		padding: 0;
	}

	/* グーグルカレンダー */
	.top-schedule-area {
		margin: auto;
		margin-bottom: 140px;
		max-width: var(--content-w);
	}

	/* バナーリスト */
	.top-bnr {
		flex-direction: row;
		gap: 35px;
		margin: auto;
		max-width: var(--content-w);
	}

}