/* モーダル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(94,73,1,0.64);
}
/*system*/
.modal_system {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 90%;
max-width:1200px;
background-color: #fff;
overflow-y: scroll;
border-radius: 10px;
}
.modalContents_system{
padding: 15px 0 70px;
position: relative;
}
.modal_img{
width: 70%;
margin: 0 auto;
}
.modalContents_system img{
width: 100%;
}
.closeModal_system{
position: absolute;
bottom: 1rem;
left: 50%;
cursor: pointer;
font-weight:bold;
background: #B8E9AF;
padding: 8px 20px;
border-radius: 30px;
}
.modal_sent{
width: 100%;
margin: 20px auto 10px;
}
.modal_sent p{
width: 95%;
margin: 5px auto 5px;
line-height: 1.2;    
}
.open_btn{
margin: 10px 0 35px 10px;
position: relative;
cursor: pointer;
}
.open_btn p{
font-size: 90%;
position: absolute;
top: -20px;
left: 0px;
height: 24px;
padding: 0 1em;
color: #fff;
border-radius: 5px 5px 0 0;
background: #059058;
font-weight: 500;
}
.open_btn img{
margin-right:5px;
vertical-align:text-bottom;
width: 30px;
height: 30px;
}
.open_btn i{
padding-left: 8px;
}

.open_btn a{
position: relative;
transition: 0.3s ease-in-out;
font-weight: 500;
text-decoration: none;
font-size: 130%;
padding: 15px 20px;
box-shadow: rgba(124,4,6,0.10) 0px 0px 0px, rgba(236,2,6,0.10) 0px 7px 13px -3px, rgba(216,34,47,0.3) 0px 0px 0px inset;
color: #059058;
background: #F7EE9F;
border: solid 1px #D93340;
width: 95%;
display: flex;
border-bottom-left-radius: 5px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-top-right-radius: 30px;
}
.open_btn a:before {
content: '';
position: absolute;
top: calc(50% - 2px);
right: 0.5em;
transform: translateY(calc(-50% - 2px)) rotate(30deg);
width: 15px;
height: 4px;
background-color: #d8222f;
transition: 0.3s;
border-radius: 10px;
}
.cont_title:before {
content: '';
position: absolute;
top: calc(50% - 2px);
right: 0.5em;
transform: translateY(calc(-50% - 2px)) rotate(30deg);
width: 15px;
height: 4px;
background-color: #d8222f;
transition: 0.3s;
border-radius: 10px;
}
.open_btn a:after {
content: '';
position: absolute;
top: 50%;
right: 0.5em;
transform: translateY(-50%);
width: 40px;
height: 4px;
background-color: #d8222f;
transition: 0.3s;
border-radius: 10px;
}
.open_btn a:hover:before, .open_btn a:hover:after {
right: -0.5em;
}
.open_btn a:hover {
background: #77CD66;
color: #ffffff;
}
@media screen and (max-width: 768px){ 
.open_btn a {
transition: 0.3s ease-in-out;
font-weight: bold;
text-decoration: none;
font-size: 95%;
padding: 10px 10px 10px 5px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px, rgba(0, 0, 0, 0.1) 0px 7px 13px -3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset;
border: solid 2px #FCEDBF;
width: 90%;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
margin: 0 auto;
}
.open_btn{
margin: 10px auto 30px;
}
.open_btn a:before {
content: '';
position: absolute;
top: calc(80% - 2px);
right: 0.5em;
transform: translateY(calc(-50% - 2px)) rotate(30deg);
width: 15px;
height: 3px;
background-color: #059058;
transition: 0.3s;
border-radius: 10px;
}
.open_btn a:after {
content: '';
position: absolute;
top: 80%;
right: 0.5em;
transform: translateY(-50%);
width: 30px;
height: 3px;
background-color: #059058;
transition: 0.3s;
border-radius: 10px;
}
.open_btn a:hover:before, .open_btn a:hover:after {
right: -0.5em;
}
.open_btn img{
margin-right:2px;
vertical-align:text-bottom;
width: 23px;
height: 23px
}
.closeModal_system{
left: 35%;
padding: 5px 30px;
border-radius: 10px;
}
.modal_sent p{
width: 95%;
font-size: 97%;
}
.modalContents_system{
padding: 5px 0 70px;
}
.open_btn p{
font-size: 85%;
top: -20px;
left: 10px;
height: 26px;
color: #fff;
}
}