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

.overlay {
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
position: fixed;
z-index: 1
}
.btn_area {
padding: 2em 4em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
text-align: center;
z-index: 2;
	width: 80%;
    max-width: 750px;
}
.btn_area .ttl {
font-weight: bold;
	text-align: center;
}
.ttl_font{
	font-size: 1.5em;
	margin: 0 0 0.5em 0;
}
.btn_area p {
padding: 15px;
	    display: flex;
    justify-content: center;
}
.btn_area button {
	width: 100px;
	height: auto;
display: block;
margin: 0 auto;
background: #7080be;
color: #fff;
padding: 15px 0;
border: none;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}
.modal_no {
	width: 100px;
	height: auto;
display: block;
margin: 0 0.5em;
background: #333;
color: #fff;
padding: 18px 0;
border: none;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}
.modal_btn {
	width: 100px;
	height: auto;
display: block;
margin: 0 0.5em;
background: #7785dd;
color: #fff;
padding: 18px 0;
border: none;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}
.btn_area button:hover {
opacity: 0.8;
}
.modal1_flex{
	width: 320px;
	display: flex;
	margin: 0 auto;
}
.modal1{
	text-align: center;
	margin: 1%;
	width: 48%;
}

@media (max-width: 767px){
.btn_area {
    padding: 2em 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    text-align: center;
    z-index: 2;
    width: 90%;
}	
	
}


/*25用*/
.layer_board_bg,
.layer_board {
position: absolute;
}
.layer_board_bg {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0;
left: 0;
display: none;
cursor: pointer;
background: #000;
}
.layer_board {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
text-align: center;
z-index: 2000;
padding: 50px
}
.layer_board p {
margin-bottom: 50px
}
.btn_close {
display: block;
text-decoration: none;
background: #000;
color: #fff;
text-align: center;
padding: 20px 40px;
width: 200px;
margin: 0 auto
}


div.modal {
	position: relative;
	display:none;
	z-index:9999;
	top: 250px;
	margin: -40px auto;
}
div.modal .pr_box {
	width:500px;
	height:auto;
	margin:auto;
	box-shadow:0px 0px 12px rgba(0,0,0,0.4);
	padding:40px;
}
.pr_box img:hover {
	filter: alpha(opacity=50);
	-webkit-opacity:0.50;
	-moz-opacity:0.50;
	-ms-opacity:0.50;
	-o-opacity:0.50;
	opacity:0.50;
}