@charset "UTF-8";
/* ========== ========== 管理部門フォーラムポップアップ ========== ==========*/
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 750px;
  padding: 2.8rem 2.4rem;
  z-index: 2;
  background: url("../img/child-sp.png") center;
  background-size: cover;
  border-radius: 10px;
  background-position: center bottom;
}
.close-btn {
  position: absolute;
  right: 0.6rem;
  top: 0.8rem;
  width: 32px;
  height: 32px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  z-index:100;
  border-radius:999px;

  /*

  border:2px solid var(--dark);
  */
}
.close-btn i {
  font-size: 2.4rem;
  color: var(--light);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}
.popup-inner .forum {
  text-align: center;

}
.popup-inner .forum img {
  /*    display: block;*/
  margin: 0 auto;
  margin-bottom: 2rem;
}
.popup-inner .forum p {
  margin: 20px auto;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  color: #132d54;
}
.popup-inner .forum p span {
  color: #e63870;
}
/*
.popup-inner .forum .btn {
margin: 35px auto 10px;
}
*/

/*

.popup-inner .forum button {
cursor: pointer;
display: block;
border: none;
width: 400px;
padding: 10px;
background: var(--basic);
color: #fff;
font-weight: bold;
text-align: center;
transform: translateY(0px);
transition: 0.3s;
margin: 15px auto;
}
*/
/*
.popup-inner .forum button a {
color: #fff;
}
.popup-inner .forum button:hover {
transform: translateY(2px);
}
.popup-inner .forum button:after {
position: absolute;
top: 50%;
right: 1.5em;
width: 0.3em;
height: 0.3em;
transform: translateY(-50%) rotate(45deg);
border-right: 3px solid currentColor;
border-top: 3px solid currentColor;
content: "";
}
*/
/*
.popup-inner a{
  color: var(--light) ;
}
.popup-inner a:hover{
  color: var(--or);
}
*/
.popup-inner .forum p.caption {
  font-size: 14px;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 740px) {
  .popup-inner {
    width: 100%;
  }
  .popup-inner .forum {
    width: 100%;
  }
  .popup-inner .forum img {
    max-width: 100%;
  }
  .popup-inner .forum button {
    width: 100%;
  }
  .popup-inner .forum p.caption {
    text-align: left;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  .popup {
    width: 100%;
  }
  .popup-inner {
    width: 90%;
  }
}