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

.flex{
	display: flex;
	flex-direction: column; 
}
.flex .photo img{
	border-radius: 20px;
	display: block;
	margin: auto;
}

.flex .article {
	
}
.flex .article dl{
	margin: 10px;
}

.flex .article dl dt{
	background: #ebefec;
	border: 1px solid #9aaea2;
	padding: 5px;
	
}

.flex .article dl dd{
	padding: 5px;
}





@media screen and (min-width:768px) {
.flex{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 20px;
}
.flex .photo {
	flex: 0 0 35%;
}
.flex .photo img{
	border-radius: 20px;
	display: block;
	margin: auto;
	width: 100%;
}

.flex .article {
	margin:0 10px;
}

.flex .article dl{
	display: flex;
	width: 100%;
	margin:0 ;
	border: 1px solid #9aaea2;
	border-bottom: 0px solid #9aaea2;
}

.flex .article dl dt{
	background: #ebefec;
	border: 0;
	border-right: 1px solid #9aaea2;
	padding: 15px;

	flex: 0 0 4em;
}

.flex .article dl dd{
	flex-basis: auto;
	padding: 15px;
	flex: 0 3 auto;
}
.flex .article dl:last-child{
	border-bottom: 1px solid #9aaea2;
}

	
}