@charset "utf-8";
/* CSS Document */
#keyVisual{
	background: url("/common/img/keyvisual_gallery.jpg") no-repeat right center / cover;
}

#sec_gallery .leftWrap{
	border-top: solid 1px #003d99;
	flex-shrink: 0;
	width: 140px;
}

#sec_gallery .leftWrap .ttl{
	font-size: 2rem;
	font-weight: 700;
	text-align: left;
	padding: 16px 0;
}

#sec_gallery .archiveList li{
	border-top: solid 1px #ccc;
}
#sec_gallery .archiveList li:last-child{
	border-bottom: solid 1px #ccc;
}
#sec_gallery .archiveList li a{
	display: block;
	padding: 11px 0;
	text-align: left;
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-weight: 500;
}
#sec_gallery .archiveList li a:hover{
	color: #000;
}

#sec_gallery .rightWrap{
	width: calc(100% - 180px)
}
#sec_gallery .rightWrap .hd02{
	font-size: 2.6rem;
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	margin-bottom: 40px;
}

#sec_gallery .rightWrap .figBox{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 30px 20px;
}

#sec_gallery .rightWrap .figBox figure{
	width: calc(100% / 2 - 10px)
}

#sec_gallery .rightWrap .figBox figure img{
	border: solid 1px #ccc;
}

#sec_gallery .rightWrap .figBox figure figcaption{
	font-size: 1.8rem;
	font-weight: 700;
	margin-top: 1em;
}

@media screen and (max-width: 767px){
	#sec_gallery > .contents{
		flex-direction: column-reverse;
	}
	#sec_gallery .leftWrap,
	#sec_gallery .rightWrap{
		width: 100%;
	}
	#sec_gallery .leftWrap{
		margin-top: 40px;
	}
	
	#sec_gallery .rightWrap .figBox{
		gap: 20px 0;
	}
	#sec_gallery .rightWrap .figBox figure{
		width: 100%;
	}
	#sec_gallery .rightWrap .figBox figure figcaption{
		font-size: 1.4rem;
		margin-top: 6px;
	}
}
@media screen and (max-width: 580px){
	#keyVisual{
		background-position: 87% center;
	}
}