/* モーダルCSS */
.modalArea{
display: none;
position: fixed;
z-index: 1000; /*サイトによってここの数値は調整 */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modalBg {
width: 100%;
height: 100%;
background-color: rgba(94,73,1,0.64);
}
/*system*/
/* 共通 */
.modal_system {
width: 85%;
max-width: 1500px;
background-color: #fff;
border-radius: 10px;
overflow-y: auto;
max-height: 90vh;
}
/* スマホ（absolute のまま） */
@media (max-width: 789px) {
.modal_system {
position: absolute;
width: 95%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 0px;
}
}
/* PC（fixed に変更） */
@media (min-width: 790px) {
.modal_system {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.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%;
transform: translateX(-50%); /* 自分の幅の半分だけ左にずらして真ん中に */
white-space: nowrap; /* 文字が折り返さないように */
cursor: pointer;
font-weight: bold;
background: #763131;
padding: 8px 20px;
border-radius: 30px;
color: #ffffff;
}
.modal_sent{
width: 100%;
margin: 10px auto 10px;
border-top: 5px dotted #dcdc77;
font-size: 120%;
}
.modal_sent p{
width: 95%;
margin: 10px auto 5px;
line-height: 1.5;    
}
.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: 10px 10px 0 0;
background: #DCDC77;
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: 1px 1px 0 #DCDC77, 0 0 2px 2px #DCDC77, inset -2px -2px 0 #DCDC77;
color: #763131;
background: #FFF7E1;
width: 95%;
display: flex;
border-radius: 3px;
}
.open_btn02 a {
font-size: 90%;
padding: 10px;
width: 90%;
margin: 20px auto;
}
.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: #ff8a65;
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: #ff8a65;
transition: 0.3s;
border-radius: 10px;
}
.open_btn a:hover:before, .open_btn a:hover:after {
right: -0.5em;
}
.open_btn a:hover {
background: #FDE9CE;
opacity: 0.7;
}
@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: #ff8a65;
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: #ff8a65;
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{
padding: 5px 30px;
border-radius: 0px;
bottom: 1rem;
}
.modal_sent{
font-size: 110%;
}
.modal_sent p{
width: 95%;
font-size: 90%;
line-height: 1.3; 
}
.modalContents_system{
padding: 5px 0 70px;
}
.open_btn p{
font-size: 85%;
top: -20px;
left: 10px;
height: 26px;
color: #fff;
}
}