/* h4 */

h4 {
	width: 12em;
	color: #FFF;
	font-weight: bold;
	border: 2px solid #000;
	text-align: center;
	padding: 5px;
	border-radius: .5em;
	margin-bottom: 1em;
}

h4.bgOrange {
	background: #EC5A24;
}

h4.bgGreen {
	background: #39B04A;
}

.comment {font-size: 14px;}

/* listBox */

.listBox {
	width: 100%;
	border-bottom: 1px solid #D6D6D6;
}

.listBox:last-child {
	border-bottom: none;
}

.listBox .text {margin-bottom: 20px;font-size: 14px;}

.listBox .img>div {
	margin-bottom: 10px;
	background-color: white;
	border: 1px solid #d6d6d6;
}

.listBox .img img {width: 100%;}

.listBox .img .underBox {padding: 7px 10px;}
.listBox .img .underBox p {
	min-height: 3em;
	margin-bottom: 10px;
}
.listBox .img .underBox a {
	display: block;
	text-align: center;
	background-color: #c1976d;
	border-radius: 30px;
	color: #000;
	padding: 3px;
}


/* PC */

@media screen and (min-width: 980px) {
	/* h4 */
	h4 {
		font-size: 20px;
	}
	/* comment */
	.comment {
		margin-bottom: 50px;
	}
	.heading {
		font-size: 20px;
		margin-bottom: 1em;
	}
	/* listBox */
	.listBox {
		padding-bottom: 25px;
		margin-bottom: 25px;
	}
	.listBox .img>div {
		width: 15%;
		margin-right: 2%;
	}
	.listBox .img>div:nth-child(6n) {margin-right: 0;}
}


/*SP*/

@media screen and (max-width: 980px) {
	/* h4 */
	h4 {
		font-size: 14px;
		margin-left: 10px;
	}
	/* comment */
	.comment {
		padding: 0 10px;
		margin-bottom: 1em;
	}
	.heading {
		padding: 0 10px;
	}
	/* listBox */
	.listBox {
		padding: 10px;
		margin-bottom: 10px;
	}
	.listBox .text {
		width: 100%;
	}
	
	.listBox .img>div {width: 49%;}
}

@media screen and (max-width: 980px) and (orientation : portrait) {
	.listBox .img {
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
}
@media screen and (max-width: 980px) and (orientation : landscape) {
	.listBox .img>div {width: 32.5%;margin-right: 1.25%;}
	.listBox .img>div:nth-child(3n) {margin-right: 0;}
	
}