@charset "utf-8";
/*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.content{
margin: 0 auto;
padding: 40px;
}
*/

.modal{
display: none;
position: fixed;/**/
z-index: 999;
top: 0;
left: 0;
min-height: 100vh;
width: 100%;
height: 100%;
overflow-y: scroll;
/*background-color: hsla(109,17%,82%,1.00);*/
background-color: hsla(109,17%,82%,1.00);
color: hsla(0,0%,0%,1)!important;
cursor: pointer;
}

.modal{ display:none; -ms-overflow-style: none; }
/**
.modal{ display:none; -ms-overflow-style: none; scrollbar-width: none; }
.modal::-webkit-scrollbar{ display:none; }
**/

.modal__bg{
background: hsla(359,100%,50%,0.0);
height: 100%;
position: absolute;
width: 100%;
}

a.js-modal-close {
background: hsla(359,100%,50%,.00);
display: block;
color: #000;
}

.modal__content {
position: relative;
margin: 0 auto;
font-size: 1.4rem;
line-height: 2.6rem;
}

.modal__content h2,
.modal__content h3,
.modal__content p 
{ color: hsla(0,0%,0%,1)!important; }

.modal__content img { padding: 7px 0; }

.modal__content::before { 
position: fixed; z-index: 1; 
display: block;
border: 0px solid #000;
background-color: hsla(0,0%,0%,.7);
color: #fff ;
text-align: center;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 8px; line-height: 8px; padding-top: 12px;
content: "Close";
box-sizing: border-box;
width: 32px;
height: 32px;
pointer-events: none;
}

.modal__content::after { 
position: absolute ; z-index: 1; 
display: inline-block;
content: "＊画面のクリックでクローズします。";
}
/**/

@media screen and (min-width: 1201px) {

a.js-modal-close { padding: 0 -100px }

}

@media screen and (max-width: 1200px) {

.modal{ scrollbar-width: none; }

}