@charset "UTF-8";

@media all and (min-width: 769px) {
	.newsTitle {
		width: 680px;
		margin: 80px auto 70px;
	}
	
	.newsTitle .title {
		text-align: center;
		width: 400px;
		padding: 18px 0;
		border-top: 1px solid #4C5870;
		border-bottom: 1px solid #4C5870;
		margin: 0 auto 70px;
	}
	
	.newsTitle .title .main {
		font-size: 24px;
		line-height: 1.1;
		margin-bottom: 8px;
	}
	
	.newsTitle .title .sub {
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		font-style: italic;
		font-size: 19px;
		line-height: 1.1;
	}
	
	.newsTitle .lead {
		font-size: 16px;
		line-height: 36px;
	}
	
	.infoBox dd .flexBox {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.infoBox dd .flexBox .text {
		width: calc(100% - 220px);
		margin-right: 20px;
	}

	.infoBox dd .flexBox .photo {
		width: 200px;
	}

	.infoBox .flexBox .photo img {
		width: 100%;
	}

	
	
		
}


@media all and (max-width: 768px) {
	
	.newsTitle .title {
		text-align: center;
		padding: 12px 0;
		border-top: 1px solid #4C5870;
		border-bottom: 1px solid #4C5870;
		margin: 50px 20px;
	}
	
	.newsTitle .title .main {
		font-size: 16px;
		line-height: 1.1;
		margin-bottom: 5px;
	}
	
	.newsTitle .title .sub {
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		font-style: italic;
		font-size: 13px;
		line-height: 1.1;
	}
	
	.newsTitle .lead {
		font-size: 12px;
		line-height: 23px;
	}
	
	.infoBox .flexBox .text {
		width: 100%;
		margin-bottom: 20px;
	}

	.infoBox .flexBox .photo {
		width: 80%;
		margin: 0 auto;
	}
	
	.infoBox .flexBox .photo img {
		width: 100%;
	}
	
}







.infoBox{
	margin: 0 0 70px 0;
	padding: 5rem;
}

.infoBox h3{
	max-width: 1160px;
	margin: 0 auto 0;
	padding: 0 0 2rem;
	font-size: 24px;
}

.infoBox dl{
	max-width: 1160px;
	margin: auto;
	display: flex;
	flex-wrap: nowrap;
	border-top: 1px solid #e8e7e9;
}

.infoBox dl:last-child{
	border-bottom: 1px solid #e8e7e9;
}

.infoBox dl dt{
	width: 15%;
}

.infoBox dl dd{
	width: 85%;
}

.infoBox dl dt,.infoBox dl dd{
	padding: 2rem 0;
}

.infoBox dl dd a{
	text-decoration: underline;
}

.infoBox dl dd a:hover {
	text-decoration: none;
}


@media all and (max-width: 1039px) {

	.infoBox{
		padding: 5rem;
		font-size: 12px;
	}
	.infoBox h3{
		font-size: 20px;
	}

}

@media all and (max-width: 767px) {
	.infoBox{
		padding: 0 2rem 5rem;
	}
	
	.infoBox h3{
		padding: 0 0 3rem;
	}
	
	.infoBox dl dt{
	width: 20%;
	}
	
	.infoBox dl dd{
	width: 80%;
	}
	
}