@charset "UTF-8";
/* モーダルテンプレート全体 */
.popup-modal-template {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  /*background: rgba(0, 0, 0, 0.4);*/
  padding: 20px;
  overflow-y: scroll; /* 横スクロールは無効 */
  overflow-x: hidden;
  transition: all 0.2s ease-in-out;
}

/* モーダルコンテンツ */
.popup-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  transition: all 0.2s ease-in-out;
}

/* モーダルリンク */
.popup-modal-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.popup-modal-link:hover {
  opacity: 0.75;
}

/* モーダル背景スタイル */
.popup-modal::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: #ffffff;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 16px;
}

/* モーダル内画像 */
.popup-modal-image {
  width: 100%;
}

/* モーダルラベル */
.popup-modal-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60px;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  background: #FF6E95;
  width: 100%;
  line-height: 60px;
}

/* モーダルの閉じるボタン */
.popup-modal-close-btn {
  position: absolute;
  width: 32px;
  height: 32px;
  top: -16px;
  right: -16px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZyBpZD0i6ZaJ44GY44KL44Ki44Kk44Kz44OzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTQ0IC0zMzIuMzQ0KSI+CiAgICA8Y2lyY2xlIGlkPSLmpZXlhoblvaJfMjMiIGRhdGEtbmFtZT0i5qWV5YaG5b2iIDIzIiBjeD0iMTYiIGN5PSIxNiIgcj0iMTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk0NCAzMzIuMzQ0KSIgZmlsbD0iI2ZmNmU5NSIgb3BhY2l0eT0iMC42Ii8+CiAgICA8cGF0aCBpZD0i5qWV5YaG5b2iXzIzLTIiIGRhdGEtbmFtZT0i5qWV5YaG5b2iIDIzIiBkPSJNMTYsMS42QTE0LjQsMTQuNCwwLDAsMCw1LjgxOCwyNi4xODIsMTQuNCwxNC40LDAsMCwwLDI2LjE4Miw1LjgxOCwxNC4zMDYsMTQuMzA2LDAsMCwwLDE2LDEuNk0xNiwwQTE2LDE2LDAsMSwxLDAsMTYsMTYsMTYsMCwwLDEsMTYsMFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk0NCAzMzIuMzQ0KSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC42Ii8+CiAgICA8cmVjdCBpZD0i6ZW35pa55b2iXzE0OTEiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDE0OTEiIHdpZHRoPSIyMS45MDEiIGhlaWdodD0iMS41NjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk1Mi44MDkgMzQwLjA0OCkgcm90YXRlKDQ1KSIgZmlsbD0iI2ZmZiIvPgogICAgPHJlY3QgaWQ9IumVt+aWueW9ol8xNDkyIiBkYXRhLW5hbWU9IumVt+aWueW9oiAxNDkyIiB3aWR0aD0iMjEuOTAxIiBoZWlnaHQ9IjEuNTY0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NTEuNzAzIDM1NS41MzUpIHJvdGF0ZSgtNDUpIiBmaWxsPSIjZmZmIi8+CiAgPC9nPgo8L3N2Zz4K');
  background-position: center;
  background-size: contain;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}

.popup-modal-close-btn:hover {
  opacity: 0.75;
}

/* モーダルが複数ある場合の非表示処理 */
.popup-modal-template + .popup-modal-template {
  opacity: 0;
  pointer-events: none;
}

.popup-show-area {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100vw;
    height: 100vh;
    /* background: rgba(0, 0, 0, 0.4); */
    transition: all 0.2s ease-in-out;
}
.popup-show-area-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
}
.popup-show-area-bg:first-child:last-child {
    display:none;
}

/* レスポンシブ対応: 1024px以下の画面 */
@media screen and (max-width: 1024px) {
  .popup-modal-template {
    padding: 0 38px;
  }

  .popup-modal {
    max-width: 300px;
  }

  .popup-modal::before {
    height: calc(100% - 70px);
  }

  .popup-modal-close-btn {
    width: 40px;
    height: 40px;
    bottom: -70px;
    left: 0;
    right: 0;
    top: auto;
    margin:auto;
  }

  .popup-modal-label {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
}