@charset "utf-8";
/* fix_bnr */
.loading{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction:column;
  justify-content: center;
  transition:.4s;
}
.loading .overlay_bg{
  content:'';
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition:.4s;
}
.loading.fix::after{
  background: rgba(0,0,0,0.5);
}
.loading .sp_txt{
  display:none;
}
.popup_bnr {
  text-align:center;
  transition:.4s;
  position:relative;
  z-index:10;
  max-width:100%;
  width:600px;
}
.popup_bnr a{
  display:block;
}
.popup_bnr a:hover img{
  opacity:0.9;
}
.popup_bnr img{
  margin:15px auto;
  display:block;
  transition:.4s;
  max-width: 480px;
}
.loading.fix .popup_bnr img{
  max-width:100%;
}
.loading.fix{
  background:none;
  max-width:100%;
  width:240px;
  height:auto;
  display:block;
  top:auto;
  left:1rem;
  bottom:1rem;
}
.loading.fix .popup_bnr{
  width:200px;
  height:auto;
}
.sp_txt{
  display:none;
}
#close {
  display:block;
  width:50px;
  height:50px;
  position: absolute;
  right:0;
  top:0;
  z-index:100;
  cursor:pointer;
}
#close span::before,
#close span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 4px;
  margin: -5% 0 0 -30%;
/* background: #fff; */
  background: #000;
  transition:.6s;
}
#close span::before {
  transform: rotate(-45deg);
}
#close span::after {
  transform: rotate(45deg);
}
.loading.fix #close {
  display:none;
}
@media screen and (max-width: 768px) {
  .loading.fix .popup_bnr{
    width:140px;
    height:auto;
  }
  .loading.fix{
    left:1rem;
    bottom:7rem;
  }
}
/* @media screen and (max-width: 768px) {
  .loading.fix .sp_txt{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    position:absolute;
    left:0;
    top:0;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    z-index:100;
    height:100%;
    background-color:#54b48f;
    color:#fff;
    padding:10px 0;
    transform:translateX(-100%);
    border-radius:5px 0 0 5px;
  }
  .loading .sp_txt p{
    letter-spacing:0.1em;
    font-size:14px;
  }
  .popup_bnr {
    text-align:center;
    transition:.4s;
    position:relative;
    z-index:10;
    max-width:80%;
    width:600px;
  }
  .loading.fix .popup_bnr{
    max-width:100%;
  }
  .popup_bnr img{
    max-width:100%;
    margin:0 auto;
    display:block;
    transition:.2s;
  }
  .loading.fix .popup_bnr img{
    max-width:100%;
  }
  .loading.fix{
    background:none;
    width:240px;
    display:block;
    top:auto;
    left:auto;
    right:0;
    bottom:calc(52px + 7%);
    transform:translateX(100%);
  }
  .loading.fix.open{
    transform:translateX(0%);
  }
  #sp_close {
  	display: inline-block;
  	width: 18px;
  	height: 18px;
  	position: absolute;
  	left:5px;
  	top:3px;
  }
  #sp_close span::before,
  #sp_close span::after {
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 84%;
  	height: 16%;
  	margin: -8% 0 0 -42%;
  	/*background: #fff;*/
  	background: #000;
  	transition:.6s;
  }
  #sp_close span::before {
  	transform: rotate(0deg);
  }
  #sp_close span::after {
  	transform: rotate(90deg);
  }
  .loading.fix.open #sp_close  span::before {
  	transform: rotate(-45deg);
  }
  .loading.fix.open #sp_close  span::after {
    transform: rotate(45deg);
  }
} */
/* end/fix_bnr */



/*Add 0405*/
.loading.fix_none #close {
  display:none;
}
.popup_bnr {
  background: #fff;
  padding: 4.5rem 1.5rem;
  overflow: scroll;
  text-align: left;
}
.popup_bnr a p {
  margin: 0;
}
.popup_bnr a{
  display:block;
  color: #333;
}
.loading.fix_none{
  z-index: -999;
}
.loading.fix_none .popup_bnr{
  opacity: 0;
}
.fix_none{
  animation: fadeOut 2.5s forwards;
}
@keyframes fix_none {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media screen and (max-width: 640px){
  .popup_bnr {
    width: 90% !important;
    margin: 0 auto !important;
  }
  .popup_bnr img{
    max-width: 80%;
  }
}