@charset "UTF-8";

/* ここからデモページ用のコード */
body {
	width: 100% ;
	padding: 0 ;
}
/* ここまでデモページ用のコード */

#modal-content {
	left: 25%;
	top: 40%;
	width: 50%;
	margin: 0;
	padding: 0 20px;
	background: #fff;
	position: fixed;
	display: none;
	z-index: 2;
}
  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

#modal-content p {
	margin: 20px 0;
}

#modal-content ul {
	width: 80%;
	margin: 0 auto;
}

#modal-content ul li {
	display: inline;
}
#modal-content ul li img {
	width: 40%;
	padding: 10px;
	border: solid 1px #999999;
}

#modal-content ul .mr_auto {
	margin-right: 19%;
}

.button-link {
	color: #07587a;
	text-decoration: none;
	display: block;
	text-align: right;
}
 
.button-link:hover {
	cursor: pointer ;
	text-decoration: underline;
}

.modal-open {
	cursor: pointer;
}

/*タブレット*/
@media screen and (max-width:1000px) {
	
	#modal-content {
	left: 15%;
	top: 40%;
	width: 70% ;
	}
	
	#modal-content ul {
	width: 80%;
	margin: 0 auto;
}
	#modal-content ul .mr_auto {
	margin-right: 18%;
}
	
}

/*スマートフォン*/
@media screen and (max-width:640px) {
	
	#modal-content {
	left: 5%;
	top: 40%;
	width: 90% ;
	}
	
	#modal-content ul li img {
	width: 100%;
}
	
	#modal-content ul .mr_auto {
	margin-right: 0;
	display: block;
	margin-bottom: 20px;
}

}