/* モーダル表示時に背景固定 */
body.fixed{
  position: fixed;
  left: 0;
}
#mdl_content {
	display:none;/* 初期状態 */
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;/* モーダルは画面いっぱいに */
	height: 100vh;/* モーダルは画面いっぱいに */
	opacity: 0;
	background-color:rgba(247, 147, 30, 0.88);
	visibility: hidden;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#mdl_content.active {
	display:block;
	right: 0;
	opacity: 1;
	visibility: visible;
	z-index:9999;
}

#mdl_content #mdl_contentInner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
}


.overlay {
	text-align:right;
}


.close_btn{
	display: inline-block;
	width: 36px;
	height: 36px;
	position: relative;
	cursor: pointer;
	margin-top:18px;
	margin-right:11px;
}

.close_btn span::before,
.close_btn span::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84%;
	height: 9%;
	margin: -8% 0 0 -42%;
	background: #fff;
}

.close_btn span::before {
	transform: rotate(-45deg);
}

.close_btn span::after {
	transform: rotate(45deg);
}


/** **/
button{
	webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
	font-size:1.8rem;
}

.mdl_btn{
	display:block;
	color:#fff;
	background:#f7931e;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	margin:0 auto 25px auto;
	width:80%;
	text-decoration:none;
}

.mdl_btn p{
	position:relative;
	padding:15px;
}
.mdl_btn p:after{
	 content: "\f0d7";
	 font-family:'Font Awesome 5 Free';
	 font-weight:900;
	 position: absolute;
	 top: 50%;
	 right: 20px;
	 margin-top: -12px;
	 color:#fff;
}