.open_btn{
margin: 10px 10px 10px 10px;
}
.flex_justify_st .open_btn{
width: 35%;
}
.open_btn a {
background: #edf6ff;
position: relative;
padding: 10px 25px;
color: #6bb6ff;
transition: 0.3s ease-in-out;
font-weight: 500;
font-size: 110%;
text-decoration: none;
cursor: pointer;
width: 80%;
display: inline-block;
}
.open_btn a:before {
content: '';
position: absolute;
top: calc(50% - 2px);
right: -10px;
transform: translateY(calc(-50% - 2px)) rotate(30deg);
width: 12px;
height: 2px;
background-color: #6bb6ff;
transition: 0.3s;
}
.open_btn a:after {
content: '';
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
width: 20px;
height: 2px;
background-color: #6bb6ff;
transition: 0.3s;
}
.open_btn a:hover:before, .open_btn a:hover:after {
right: -15px;
}
.open_btn a:hover {
background: #AFD7FF;
color: #ffffff;
}
a.js-modal-open{
	
}
/*======モーダル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(103,168,56,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: 10px 10px 5px 5px;
width: 100%;
}
.flex_justify_st .open_btn{
width: 90%;
}
.flex_justify_st{
width: 100%;
}
.open_btn a {
padding: 8px 30px 8px 5px;
font-size: 100%;
}
.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: #6bb6ff;
transition: 0.3s;
}
.open_btn a:after {
content: '';
position: absolute;
top: 50%;
right: -1em;
transform: translateY(-50%);
width: 21px;
height: 2px;
background-color: #6bb6ff;
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: 8px;
font-size: 90%;
}
}