.open_btn{
margin: 10px 0 30px 10px;
}
.open_btn a {
background: #EDFFF4;
position: relative;
padding: 10px 25px;
color: #4DD533;
transition: 0.3s ease-in-out;
font-weight: 500;
font-size: 90%;
text-decoration: none;
cursor: pointer;
}
.open_btn a:before {
content: '';
position: absolute;
top: calc(50% - 2px);
right: -2em;
transform: translateY(calc(-50% - 2px)) rotate(30deg);
width: 12px;
height: 2px;
background-color: #4DD533;
transition: 0.3s;
}
.open_btn a:after {
content: '';
position: absolute;
top: 50%;
right: -2em;
transform: translateY(-50%);
width: 40px;
height: 2px;
background-color: #4DD533;
transition: 0.3s;
}
.open_btn a:hover:before, .open_btn a:hover:after {
right: -2.5em;
}
.open_btn a:hover {
background: #AFFFD3;
color: #ffffff;
}

/*======モーダルCSS========  */
.modalArea{
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modalBg {
width: 100%;
height: 100%;
background-color: rgba(236,216,85,0.74);
}
.modalWrapper {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 70%;
max-width: 500px;
padding: 10px 30px;
background-color: #fff;
}
.modalContents{
white-space: pre-wrap;
}
.closeModal {
position: absolute;
top: 0.5rem;
right: 1rem;
}
/*system*/
.modal_system {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 75%;
max-width:1200px;
background-color: #fff;
overflow-y: scroll;
height: auto;
}
.modalContents_system{
padding: 20px;
}
.modal_img{
width: 70%;
margin: 0 auto;
}
.modalContents_system img{
width: 100%;
}
.closeModal_system{
position: absolute;
top: 0.5rem;
right: 1rem;
cursor: pointer;
font-weight:bold;
}
@media only screen and (max-width:520px){
.open_btn{
margin: 15px 0 20px 5px;
}
.open_btn a {
padding: 8px 30px 8px 5px;
}
.open_btn a:before {
content: '';
position: absolute;
top: calc(50% - 2px);
right: -1em;
transform: translateY(calc(-50% - 2px)) rotate(45deg);
width: 10px;
height: 2px;
background-color: #4DD533;
transition: 0.3s;
}
.open_btn a:after {
content: '';
position: absolute;
top: 50%;
right: -1em;
transform: translateY(-50%);
width: 21px;
height: 2px;
background-color: #4DD533;
transition: 0.3s;
}
.open_btn a:hover:before, .open_btn a:hover:after {
right: -2.5em;
}
.open_btn a:hover {
background: #AFD7FF;
color: #ffffff;
}
.modal_system {
transform:translate(-50%,-50%);
width: 95%;
}
.modalContents_system{
padding: 15px 10px;
font-size: 90%;
}
}