@charset "utf-8";


/*モーダル*/
.modal-content {
	width: 1200px;
	margin: 0 auto;
	padding: 10px 20px;
	background: #fff;
	position: absolute;
	display: none;
	z-index: 9996;
	text-align:left;
}
#modal-overlay {
	z-index: 9995;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-color: rgba( 0,0,0, 0.75 );
}
.button-link {
	color: #00f;
	text-decoration: underline;
}
.button-link:hover {
	cursor: pointer;
	color: #f00;
}

.wrap {
	width: 100%;
	margin: 20px auto;
	padding: 10px;
}
.wrap .ttl{
	text-align:center;
	font-size:20px;
	margin-bottom:30px;
	}


.wrap .leftBox{
	float:left;
	width:50%;
	margin-right: 0;}
.wrap .rightBox{
	float:left;
	width:50%;}
.wrap .centerBox{
	margin:0 auto;
	width:25%;}

.wrap ul {
	display: block;
	overflow: hidden;
	margin-top: 10px;
	margin-bottom:20px;
	clear: both;
}
.wrap li {
	display: block;
	float: left;
	width: 100%;
	padding:0.5%;

}

.close{
	position:absolute;
	top:0px;
	right:0px;

width:76px; }


.modal-content .wrap .secondLink{
	font-size:18px;
	margin-bottom:0px;
	}
.modal-content .wrap .secondLink,
.modal-content .wrap .secondLink a{
	color:#c62d27;}

.modal-content .wrap .secondLink a:hover{
	border-bottom:solid 1px #c62d27;}


@media only screen
 and (max-width: 1024px) {
/*モーダル*/
.modal-content {
	width: 90%;

}

 }
@media only screen
 and (max-width: 768px) {
/*モーダル*/
.wrap .leftBox{
	float:none;
	width:100%;}
.wrap .rightBox{
	float:none;
	width:100%;}
.wrap .centerBox{
	float:none;
	width:100%;}

.close{
width:50px; }

 }