/* ==========================================================================
   独立モーダル用 ベーススタイル（既存と干渉しない）
   ========================================================================== */
.c-custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-custom-modal.is-on {
  opacity: 1;
  pointer-events: all;
  transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.c-custom-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.c-custom-modal__box {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 1000px;
  max-width: 90%;
  height: auto;
  padding: 40px;
  max-height: 80vh;
  border-radius: 15px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: top 500ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-custom-modal.is-on .c-custom-modal__box {
  top: 50%;
  opacity: 1;
  pointer-events: all;
}

.c-custom-modal__box__inner {
  max-height: calc(80vh - 80px);
  padding: 0 20px;
  overflow-y: auto;
}

/* ==========================================================================
   modal-01 中身のデザイン（移植ページに干渉しないカプセル化）
   ========================================================================== */
.c-custom-modal.modal-01 .btn {
  display: block;
  font-size: 20px;
  line-height: 1.35;
  background-color: #0086d1;
  color: #fff;
  border: 2px solid #0086d1;
  border-radius: 100px;
  padding: 12.5px 30px;
  padding-right: 40px;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 17px;
}
.c-custom-modal.modal-01 * { font-family: "AxisProN-Regular"; }
.c-custom-modal.modal-01 h1, .c-custom-modal.modal-01 h2, .c-custom-modal.modal-01 h3, 
.c-custom-modal.modal-01 h4, .c-custom-modal.modal-01 h5, .c-custom-modal.modal-01 h6 {
  font-family: "AxisProN-Bold"; font-weight: 400;
}
.c-custom-modal.modal-01 .btn::after {
  content: ""; width: 10px; height: 17px;
  background-image: url(./../img/icon-right-w.svg);
  background-repeat: no-repeat; background-position: center center;
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%); background-size: contain;
}
.c-custom-modal.modal-01 .btn:hover { background-color: #4ac9e3; border-color: #4ac9e3; }

.c-custom-modal.modal-01 .c-row { display: flex; gap: 15px; }
.c-custom-modal.modal-01 .c-col-6 { width: 50%; }
.c-custom-modal.modal-01 .c-text { font-size: 16px; }
.c-custom-modal.modal-01 .c-text strong { font-weight: 700; }
.c-custom-modal.modal-01 .c-text + .c-text { margin-top: 15px; }
.c-custom-modal.modal-01 .box-01 { width: 780px; margin: 0 auto; }
.c-custom-modal.modal-01 .box-01 img { width: 100%; }
.c-custom-modal.modal-01 .c-text-note { font-size: 14px; }
.c-custom-modal.modal-01 .m-btn-01 { width: 224px; margin: 0 auto; display: block; }
.c-custom-modal.modal-01 .m-btn-01:hover { opacity: 0.8; }
.c-custom-modal.modal-01 .c-text-lead { font-size: 20px; font-weight: bold; color: #BF4DA5; margin-top: 23px; margin-bottom: 15px; }
.c-custom-modal.modal-01 .c-text-lead + .img img { width: 762px; display: block; margin: 0 auto; }
.c-custom-modal.modal-01 .m01_block01 + .m01_block01 { margin-top: 20px; }
.c-custom-modal.modal-01 .c-custom-modal__box__inner { padding-bottom: 130px; max-height: calc(85vh - 70px); }
.c-custom-modal.modal-01 .group-btn { width: 100%; position: absolute; margin: 0; left: 0; bottom: 0; background-color: #fff; padding: 15px; padding-bottom: 50px; }
.c-custom-modal.modal-01 .on-sp { display: none; }
.c-custom-modal.modal-01 .c-custom-modal__box { width: 1100px; padding: 50px 30px; overflow: hidden; height: 85vh; max-height: 85vh; }

/* ==========================================================================
   メディアクエリ (SP対応)
   ========================================================================== */
@media screen and (max-width: 767px) {
  .c-custom-modal__box { box-sizing: border-box; max-height: 90vh; padding: 24px 0 30px; }
  .c-custom-modal__box__inner { max-height: calc(90vh - 54px); padding: 0 16px; }
  
  .c-custom-modal.modal-01 .c-custom-modal__box { padding: 15px 0 30px; width: 100%; }
  .c-custom-modal.modal-01 .box-01 { width: 100%; }
  .c-custom-modal.modal-01 .btn { font-size: 18px; padding: 9px 20px; padding-right: 30px; margin-bottom: 10px; }
  .c-custom-modal.modal-01 .btn::after { right: 20px; }
  .c-custom-modal.modal-01 .c-text.c-text-small-sp span { font-size: 12px; line-height: 22px; }
  .c-custom-modal.modal-01 .c-text { font-size: 14px; line-height: 22px; }
  .c-custom-modal.modal-01 .c-row { flex-direction: column; gap: 8px; }
  .c-custom-modal.modal-01 .c-col-6 { width: 100%; }
  .c-custom-modal.modal-01 .c-text-lead { font-size: 16px; text-align: center; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }
  .c-custom-modal.modal-01 .m01_block01 + .m01_block01 { margin-top: 10px; }
  .c-custom-modal.modal-01 .on-sp { display: block; }
  .c-custom-modal.modal-01 .group-btn { padding-bottom: 20px; }
  .c-custom-modal.modal-01 .c-custom-modal__box__inner { padding-bottom: 50px; }
}

@media screen and (max-width: 450px) {
  .c-custom-modal.modal-01 .m01_block01 + .m01_block01 { margin-top: 5px; }
  .c-custom-modal.modal-01 .group-btn { padding: 12px; box-sizing: border-box;}
  .c-custom-modal.modal-01 .c-custom-modal__box { height: 90vh; }
  .c-custom-modal.modal-01 .c-custom-modal__box__inner { max-height: calc(90vh - 70px); }
  .c-custom-modal.modal-01 .btn { font-size: 15px; padding: 4.5px 20px; padding-right: 30px; }
}