@charset "UTF-8";
/*--- color ---*/
/*--- z-index ---*/
/*--- breakpoint ---*/
/* =======================
  mixin
======================= */
/*--- 透過ホバー ---*/
/*--- color変更ホバー ---*/
/*--- background-color変更ホバー ---*/
/*--- color・background-colorホバー ---*/
.u-dib {
  display: inline-block;
}

.c-opening-modal {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: -10;
}
.c-opening-modal.active {
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.c-opening-modal.active .c-opening-modal-main {
  scale: 1;
}
.c-opening-modal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.6);
}
.c-opening-modal-main {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: 0.9;
  width: 90%;
  max-width: 800px;
  transition: scale 0.3s ease;
}
.c-opening-modal .close-button {
  position: absolute;
  top: -47px;
  right: 0;
  width: 37px;
  height: 37px;
  background-color: #fff;
  border-radius: 100px;
  cursor: pointer;
}
.c-opening-modal .close-button:focus {
  outline: 2px solid #007cba;
  outline-offset: 0;
}
.c-opening-modal .close-button::before, .c-opening-modal .close-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 50%;
  height: 1px;
  background-color: #000;
}
.c-opening-modal .close-button::before {
  rotate: 45deg;
}
.c-opening-modal .close-button::after {
  rotate: -45deg;
}
.c-opening-modal-contents {
  position: relative;
}
.c-opening-modal-title {
  color: #fff;
  font-weight: 1.8rem;
  font-weight: 500;
  text-align: center;
  background-color: #1D54A2;
  padding: 15px 10px;
}
.c-opening-modal-inner {
  padding: 20px 20px 30px;
  background-color: #fff;
  border: 1px solid #1D54A2;
  border-radius: 0 0 5px 5px;
}
@media screen and (max-width: 767.9px) {
  .c-opening-modal-inner {
    padding: 10px;
  }
}
.c-opening-modal-heading {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 5px;
}
.c-opening-modal .color-red {
  color: #CF0000;
}
.c-opening-modal-text {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767.9px) {
  .c-opening-modal-text {
    font-size: 1.4rem;
  }
}
.c-opening-modal-button {
  max-width: 335px;
  min-height: 8rem;
  margin: 30px auto 0;
}
@media screen and (max-width: 767.9px) {
  .c-opening-modal-button {
    min-height: 7rem;
  }
}
.c-opening-modal-button p {
  font-size: 2rem;
}
.c-opening-modal-button .c-arrow::after {
  filter: brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(3969%) hue-rotate(2deg) brightness(97%) contrast(100%);
}
.c-opening-modal-button:hover .c-arrow {
  background-color: #F24D01;
}
@media screen and (max-width: 767.9px) {
  .c-opening-modal-button:hover .c-arrow {
    background-color: #fff;
  }
}
.c-opening-modal-button:hover .c-arrow::after {
  filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(7492%) hue-rotate(135deg) brightness(111%) contrast(99%);
}
@media screen and (max-width: 767.9px) {
  .c-opening-modal-button:hover .c-arrow::after {
    filter: brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(3969%) hue-rotate(2deg) brightness(97%) contrast(100%);
  }
}