/* ポップアップウィンドウの設定 基本 */
/* バックグラウンド */
.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  /* アニメーションの準備 */
  opacity: 0;
  /* 最初は透明 */
  visibility: hidden;
  /* クリックも効かない状態 */
  transition:
    opacity 0.4s,
    visibility 0.4s;
}

/* ポップアップ表示フレーム */
.popup-content {
  position: absolute;
  display: block;
  width: calc(100% - 40px);
  max-width: 900px;
  border-radius: 15px;
  top: 50%;
  left: 50%;
  padding: 50px 20px;
  transform: translate(-50%, -60%);
  background: var(--white);
  transition: transform 0.4s;
}

/* popupのleft、rightの文字を折り返さない */
.popup-content .left,
.popup-content .right {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.popup-content .right.public {
  flex-wrap: wrap;
  white-space: normal;
}

/* 表示された時の状態 */
.popup-wrapper.is-show {
  opacity: 1;
  visibility: visible;
}

/* 表示された時の中身（ふわっと浮き上がる動き） */
.popup-wrapper.is-show .popup-content {
  transform: translate(-50%, -50%);
  /* 定位置に戻る */
}

/* ここからはポップアップ内のdivとrowの設定 */
/* div.inner */
.popup-content .inner {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

/*
ポップアップごとの
細かい修正・微調整
*/

/* 住所のleftとrightの列を並べる */
.wrap_address .left {
  width: 30%;
}

.popup-content .wrap_address .right {
  width: 70%;
}

/* 予約期間 parts/training/form_reservation.php */
.wrap_reservation {
  width: 330px;
}

.wrap_reservation li {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* 配属先の編集 */
.row.facility_select .right {
  gap: 20px;
}

/* ラジオボックスとwrap_openがある場合 */

/* leftの文字を上揃え */
.popup-content .row.radiobox {
  align-items: flex-start;
  width: fit-content;
}
.popup-content .row.radiobox .left {
  padding-top: 10px;
  flex: none;
}

.popup-content .row.radiobox .right {
  display: block;
  flex: none;
}

.popup-content .row.radiobox .right .checkbox1 {
  flex-direction: row;
  gap: 30px;
}

/* ポップアップ内のラジオボタンの設定 */

/* inputの横幅調節 */
.popup-content .input_l {
  width: 500px;
}

.popup-content .input_login {
  width: 500px;
}

/* ポップアップ内の細かいパーツ */

/* ポップアップ内の文字設定 */
.popup-content h3 {
  display: block;
  width: fit-content;
  color: var(--blue1);
  margin: 0 auto 20px;
}

/* 注意書き */
p.pop_notice {
  font-size: 0.8rem;
  color: var(--red);
  margin-inline: auto;
  max-inline-size: max-content;
  margin-top: 10px;
}

.popup-content p.t_notice {
  display: block;
  width: 100%;
}

/* ポップアップを開くボタン */
button.js-open-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button.js-open-btn img {
  width: 20px;
}

/*ポップアップ内のアイコン delete confirm notice*/
img.icon {
  display: block;
  width: 50px;
  margin: 0 auto 20px;
}

p.name_safety_manager {
  font-weight: 700;
  font-size: 1.2rem;
}

div.popup-content .btn_box {
  margin: 50px auto 0;
}

/* ポップアップのツールチップは非表示 */
.popup-content button.btn_help {
  display: none;
}
/* ポップアップの必須は非表示 */
.popup-content .left span {
  display: none;
}

/* 協会からのメッセージ */
.return_comment {
  margin: 30px auto;
}

.return_comment h4 {
  margin-bottom: 10px;
  color: var(--red);
  text-align: center;
}

.return_comment .comment {
  padding: 10px;
  border: 1px solid var(--border);
  background: #fff8f8;
  border-radius: 6px;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  /* ポップアップウィンドウの設定 基本 */
  .popup-content {
    width: calc(100% - 20px);
    max-height: 95vh;
    overflow-y: auto;
    padding: 30px 10px 40px;
  }

  .popup-content h3 {
    margin: 0 auto 10px;
  }

  /* ラジオボタンで開く */
  .popup-content div.wrap_fit .box_open {
    width: fit-content;
    margin: 0 auto;
  }

  /* rowの設定 */
  .popup-content .row {
    flex-direction: column;
    padding: 5px 0;
  }

  /* ボタンの高さ */
  div.popup-content .btn_box {
    margin: 40px auto 0;
  }

  .popup-content .left {
    margin-bottom: 5px;
  }

  /* 住所のleftとrightの列を並べる */
  .wrap_address .left {
    width: 100%;
  }

  .popup-content .wrap_address .right {
    width: 100%;
  }

  /* 協会からのメッセージ */
  .return_comment .comment {
    display: block;
    padding: 10px;
    line-height: 1.8;
    height: auto;
    min-height: 0;
  }

  /*配属先の編集*/
  .row.haizoku .column1 {
    width: 100%;
  }

  .row.haizoku .right {
    gap: 10px;
  }

  .row.haizoku .right label.selectbox {
    margin-left: 0;
    flex: 1;
  }

  /* inputの横幅調節 */
  .popup-content .input_login,
  .popup-content .input_l {
    width: 300px;
  }
}