@charset "utf-8";

#mainBlock{
	overflow: inherit;
}

#contentsBlock .wrapper{
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}
#contentsBlock #mainWrap{
	max-width: 100%;
	width: 100%;
}

#contentsBlock #sideNav{
	max-width: 360px;
	width: 36%;
	margin-left: 80px;
	position: sticky;
	top: 94px;
	right: 0;
}
#contentsBlock #sideNav > .inner{
	height: 100%;
	overflow: auto;
	max-height: calc(100vh - 124px);
	scrollbar-width: none;
}
#contentsBlock #sideNav > .inner::-webkit-scrollbar{
	display: none;
}


#mainWrap .columnList{
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 9px -20px 0;
}

#mainWrap .columnList li{
    max-width: 376px;
    text-align: left;
    margin-top: 64px;
    margin: 64px 20px 0;
    width: calc(100% / 3 - 40px);
}
#mainWrap .columnList li:first-child,
#mainWrap .columnList li:nth-child(2),
#mainWrap .columnList li:nth-child(3){
	margin-top: 0;
}

#mainWrap .columnList li a,
#sideNav ul li > a{
	color: #131313;
	text-decoration: none;
	width: 100%;
}

#mainWrap .columnList li figure,
#sideNav ul li figure{
	aspect-ratio: 9 / 5;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#mainWrap .columnList li figure img,
#sideNav ul li figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#mainWrap .data{
	font-size: 1.4rem;
	font-weight: 400;
	margin-top: 9px;
}
	#mainWrap .data .time{
		font-family: "Titillium Web", sans-serif;
	}
	#mainWrap .data .cat{

	}

#mainWrap .ttl,
#sideNav ul li .ttl{
	font-size: 1.8rem;
	margin-top: 8px;
}

#mainWrap .columnList li .ttl span,
#sideNav ul li .ttl span{
	background: linear-gradient(#2D2D2D, #2D2D2D) 0 100% / 0 1px no-repeat;
	transition: background .4s;
}
#mainWrap .columnList li a:hover .ttl span,
#sideNav ul li a:hover .ttl span{
	background-size: 100% 1px;
}

#mainWrap .columnList li .txt{
	font-weight: 400;
	margin-top: 8px;
}

#sideNav ul li{
	text-align: left;
}
#sideNav ul.catalogList li + li{
	margin-top: 64px;
}
#sideNav ul.catalogList li .linkBtn{
	margin-top: 16px;
}
#sideNav ul.catalogList li .linkBtn a{
	max-width: inherit;
}
#sideNav .tocList .ttl{
	margin-bottom: 24px;
}


@media screen and (max-width: 1023px){
	#contentsBlock [id^="sec_"] > .inner{
		max-width: inherit;
	}
	#contentsBlock #mainWrap{
		max-width: inherit;
		width: 100%;
	}
	#sideNav{
		display: none;
	}
}
@media screen and (max-width: 767px){
	#mainWrap .columnList{
		flex-direction: column;
		margin-left: 0;
		margin-right: 0;
	}
	#mainWrap .ttl{
		font-size: 1.6rem;
	}
	#mainWrap .columnList li{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	#mainWrap .columnList li:nth-child(2){
		margin-top: 64px;
	}
}