@charset "UTF-8";
.list { display:flex; flex-wrap: wrap; gap: 30px 0; padding: 50px 0; }
	.list img { width: auto; max-width: 100%; }
	.list dl { display:flex; flex-wrap: wrap; width: 100%; cursor: pointer; }
	.list dl dt { width: 500px; }
	.list dl dd { position: relative; width: calc( 100% - 500px); padding: 50px 20px; }
.list .name { line-height: 1.2em; font-weight: 800; }
.list .ex { margin: 20px 0; }
.list button { position:absolute; bottom: 0; right: 0; width: 100px; height: 100px; font-size: 2em; line-height: 100px; border-radius: 50px; }
.list dl:hover button { background: #e5e5e5; }
@media (max-width:991px) {
	.list { gap: 20px 0; padding: 20px 0; }
	.list dl dt { width: 250px; }
	.list dl dd { width: calc( 100% - 250px); padding: 0 0 0 10px; }
	.list .ex { margin: 10px 0; }
	.list button { width: 70px; height: 70px; line-height: 70px; }
}

@media (max-width:767px) {
	.list dl dt { width: 100%; }
	.list dl dd { width: 100%; padding: 15px 10px; border: 1px solid #e5e5e5; border-top: 0; }
	.list .ex { margin: 10px 0; }
	.list button { display: none; }
}

.view_modal .modal-dialog { margin: 70px auto; }
.view_modal .close { position: absolute; top: -50px; right: 0; z-index: 10; background: rgba(0,0,0,0.7); width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; opacity: 1; text-shadow: none; }
.view_modal .modal-body { padding:0; }
.view_modal .modal-content { padding: 0; }
.view_modal .modal-content .con { padding: 20px; }