@charset "utf-8";
/* CSS Document */


.pcOnlyB{
	display:none;
}

.pcOnlyI{
	display:none;
}

/* トップページ */

.topMv__slider img{
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
}

.topMv__scroll{
	display: none;
}

.topSeminarTopic{
	width: 90vw;
	margin-inline: auto;
	margin-top: -4.5rem;
	position: relative;
	z-index: 2;
	border-radius: 0.5rem;
	box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5);
}

.topSeminarTopic__header{
	background-color: var(--color2);
	color: #FFF;
	line-height: 1;
	padding: 1.6rem 0 1.8rem 0;
	border-radius: 0.5rem 0.5rem 0 0;
	text-align: center;
}

.topSeminarTopic__content{
	border: solid 1px #CCC;
	border-top: 0;
	border-radius: 0 0 0.5rem 0.5rem;
}

.topSeminarTopic__item{
	padding: 2rem 4rem;
	display: flex;
	gap: 2rem;
	border-bottom: solid 1px #CCC;
	text-decoration: none;
	.date{
		text-align: left;
		font-weight: 900;
		line-height: 1.2;
		transform: translateY(0.15em);
		min-width: 14rem;
		span{
			font-size: 3.6rem;
		}
	}

	.detail{
		.place{
			text-align: left;
			margin-bottom: 0.2em;
		}
		.flug{
			background-color: #333;
			color: #FFF;
			line-height: 1;
			padding: 0.25em 0.5em 0.35em 0.5em;
			font-weight: 700;
			text-align: center;
			&.isAccept{
				background-color: #d85555;
			}
			&.isFull{
				background-color: var(--color2);
			}
			&.isBefore{
				background-color: #999;
			}
		}

	}
}

.topSeminarTopic__item:last-child{
	border-bottom: 0;
}

.topInfo{
	margin-top: var(--section-bottom);
	margin-bottom: var(--section-bottom);
	padding-inline: var(--section-side);
}

.topInfo.isArchivePage{
	margin:0;
}

.topInfo__header__wrap{
	display: flex;
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: 2rem;
}

.topInfo__header{
	font-weight: 900;
	font-size: 4.5rem;
	line-height: 1.2;
}

.topInfo__list__item{
	display: grid;
	grid-template-columns: 16rem auto;
	text-decoration: none;
	text-align: left;
	gap: 2rem;
	border-bottom: solid 1px #CCC;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

.topInfo__list__item .image img{
	width: 100%;
	height: auto;
	aspect-ratio: 410/276;
	object-fit: cover;
}

.topInfo__list__item .content{
	display: flex;
	flex-wrap: wrap;
	.category{
		width: fit-content;
		height: fit-content;
		background-color: var(--color2);
		line-height: 1;
		color: #FFF;
		padding: 0.6rem 2rem 0.8rem;
		font-size: 1.8rem;
		order: 1;
		margin-bottom: 0.6rem;
	}
	.date{
		width: 100%;
		order: 3;
		line-height: 1.2;
		color: #999;
	}
	.title{
		width: 100%;
		order: 2;
		line-height: 1.2;
	}
}


.topContent{
	margin-bottom: var(--section-bottom);
	padding-inline:var(--section-side);
}

.topAbout{
	margin-bottom: var(--section-bottom);
}

.topAbout__image{
	margin-bottom: var(--section-side);
	img{
		width: 100%;
		height: auto;
		aspect-ratio: 2/1;
		object-fit: cover;
	}
}

.topAbout__content{
	padding-inline: var(--section-side);
}

.topAbout__content__txt{
	margin-bottom: 3rem;
}


.topSeminar{
	margin-bottom: var(--section-bottom);
	background-color: #f0f0f0;
}

.topSeminar__image{
	margin-bottom: var(--section-side);
	img{
		width: 100%;
		height: auto;
		aspect-ratio: 2/1;
		object-fit: cover;
	}
}

.topSeminar__content{
	padding-inline: var(--section-side);
	padding-bottom: 3rem;
}

.topSeminar__content__txt{
	margin-bottom: 3rem;
}

.topLink{
	padding-inline: var(--section-side);
}

.topLink__list{
	width: 100%;
	height: auto;
	aspect-ratio: 3/1;
	display: block;
	background:url(../img/top/top4.jpg) no-repeat center center;
	background-size: cover;	
	position: relative;
	text-decoration: none;
	margin-bottom: 2rem;
	&:after{
		width: 100%;
		height: 100%;
		background-color: var(--color2);
		mix-blend-mode: multiply;
		display: block;
		content: "";
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1;
		opacity: 0.7;
	}
}

.topLink__list__inner{
	display: flex;
	height: 100%;
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	color: #FFF;
	z-index: 2;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	&:before{
		content: "";
		display: block;
		background: url(../img/common/arrow_right_w.svg) no-repeat center left;
		background-size: contain;
		width: 0.8em;
		height: 0.8em;
		margin-top: 0.1em;
	}
}

.topLink__member{
	position: relative;
	padding: var(--section-side);
	background: url(../img/top/top5.jpg) no-repeat center center;
	background-size: cover;
	&:after{
		width: 100%;
		height: 100%;
		background-color: var(--color2);
		mix-blend-mode: multiply;
		display: block;
		content: "";
		top: 0;
		left: 0;
		position: absolute;
		z-index: 1;
		opacity: 0.6;
	}
}

.topLink__member>a{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.2em;
	position: relative;
	z-index: 2;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	color: #FFF !important;
	width: 100%;
	height: auto;
	aspect-ratio: 3/1;
	box-sizing: border-box;
	border: solid 1px #FFF;
	border-radius: 0.5rem;
	&:before{
		content: "";
		display: block;
		background: url(../img/common/arrow_right_w.svg) no-repeat center left;
		background-size: contain;
		width: 0.8em;
		height: 0.8em;
		margin-top: 0.1em;
	}
}

.topLink__member>a:not(:last-child){
	margin-bottom: var(--section-side)
}

ul.list__headerLink{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1px;
	margin: 0 0 4rem 0;
}

ul.list__headerLink li{
	list-style-type: none;
	text-align: center;
}

ul.list__headerLink li a{
	display: flex;
	background-color: var(--color2);
	color: #FFF;
	text-decoration: none;
	padding: 2rem;
	justify-content: center;
	align-items: center;
	gap: 0.4em;
	&:after{
		content: "";
		width: 0.7em;
		height: 0.7em;
		background: url(../img/common/arrow_right_w.svg) no-repeat center center;
		background-size: contain;
		transform:rotate(90deg);
	}
}


ul.seminarDateList{
	margin:0;
	padding:0;
}

ul.seminarDateList li{
	list-style-type:none;
}

ul.seminarDateList li .topSeminarTopic__item{
	padding:2rem;
	display:grid;
	grid-template-columns:auto 1fr;
	gap:0.1rem 1.5rem;
	background-color:#F2F2F2;
	border-radius:1rem;
	.date{
		grid-column:1/2;
		grid-row:1/3;
		min-width:0;
		line-height:1.1;
	}
	.title{
		grid-column:2/3;
		grid-row:1/2;
		font-size:2.4rem;
	}
	.detail{
		grid-column:2/3;
		grid-row:2/3;
		display:flex;
		gap:1rem;
	}
}