@charset "UTF-8";

/* モーダルウィンドウ黒枠レイヤー(画面全体) */
div.modal_layer {
  background: rgba(0, 0, 0, .2);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear, visibility 0.5s linear, z-index 0.5s linear;
}

/* モーダルウィンドウ黒枠レイヤー(画面全体) オープン */
div.modal_layer.is_open {
  z-index: 999;
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ オープン */
div.modal_layer.is_open div.modal {
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ 本体 */
div.modal {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 98%;
  min-width: 375px;   /* iPhone 6以降の最小横幅ピクセル */
  max-width: 1000px;  /* PC用横幅ピクセルサイズ上限 */
  opacity: 0;
  visibility: hidden;
}

/* モーダルウィンドウ 内側 */
div.modal div.modal__inner {
  margin-top: 18pt;   /* ブラウザ上部からモーダルウィンドウまでの距離 */
  margin-bottom: 0pt; /* ブラウザ下部からモーダルウィンドウまでの距離 */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  box-shadow: 2pt 3pt 3pt rgba(0, 0, 0, 0.25);
  border-radius: 6pt;
  display: block;
  padding: 16pt 5pt 5pt;
  height: auto;
}

/* モーダルウィンドウ クローズボタン */
div.modal__inner div.modal__button-wrap {
  position: absolute;
  top: -15pt;     /* div.modal__innerからの距離 */
  right: 4pt;     /* div.modal__innerからの距離 */
  display: inline-flex;
}

button.close_button {
  position: relative;
  width: 30pt;
  height: 30pt;
  box-shadow: 0pt 1pt 2pt 1pt rgba(0, 0, 0, 0.2);
  background: orange;
  border-radius: 50%;
  padding: 0;
  border: transparent;
  cursor: pointer;
}

/* モーダルウィンドウ クローズボタン バッテン */
button.close_button span {
  width: 22pt;
  height: 2pt;
  background: #fff;
  display: inline-block;
  position: absolute;
  left: calc(50% - 10.5pt);
  top: 50%;
  border-radius: 18pt;
}

button.close_button span:nth-child(1) {
  transform: rotate(45deg) translate(-1pt, -1pt);
}

button.close_button span:nth-child(2) {
  transform: rotate(-45deg) translate(1pt, -1pt);
}

/* モーダルウィンドウ コンテントエリア */
div.modal__content {
  padding-top: 1pt;
  padding-bottom: 1pt;
  width: 100%;

  height: 96vh;
  max-height: 620px;

  overflow-y: scroll;
  overflow-x: hidden;
}

/* モーダルウィンドウ 表示ボタン */
button.modal_button_orange {
  background: rgb(245, 160, 1);
  border-radius: 4pt;
  box-shadow: 0pt 1pt 2pt 1pt rgba(0, 0, 0, 0.2);
  border: 2pt solid rgb(255, 210, 127);
  font-size: 13pt;
  line-height: 1.6;
  display: block;
  padding: 2pt 10pt;
  color: #fff;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

button.modal_button_orange:hover {
  background: rgb(248, 213, 148);
  border: 2pt solid rgb(253, 238, 208);
}

button.modal_button_green {
  background: rgb(1, 245, 160);
  border-radius: 4pt;
  box-shadow: 0pt 1pt 2pt 1pt rgba(0, 0, 0, 0.2);
  border: 2pt solid rgb(127, 255, 210);
  font-size: 13pt;
  line-height: 1.6;
  display: block;
  padding: 2pt 10pt;
  color: #fff;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

button.modal_button_green:hover {
  background: rgb(148, 248, 213);
  border: 2pt solid rgb(208, 253, 238);
}

button.modal_button_blue {
  background: rgb(1, 160, 245);
  border-radius: 4pt;
  box-shadow: 0pt 1pt 2pt 1pt rgba(0, 0, 0, 0.2);
  border: 2pt solid rgb(127, 210, 255);
  font-size: 13pt;
  line-height: 1.6;
  display: block;
  padding: 2pt 10pt;
  color: #fff;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

button.modal_button_blue:hover {
  background: rgb(148, 213, 248);
  border: 2pt solid rgb(208, 238, 253);
}