/* 背景＆中央配置 */
.popup__wrap {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* チェックオンで表示 */
.popup__checkbox:checked + .popup__wrap {
  display: flex;
}

/* 透過背景領域 */
.popup__overlay {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* 中身 */
.popup__content {
  position: absolute;
  background: transparent;
  padding: 0;
  width: 1020px;
  border-radius: 8px;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  color: #fff;
  flex-wrap: wrap;
}

/* 画像 */

.popup__image {
  margin: 0;
  padding: 0;
  width: 190px;
}
.popup__image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

.popup__text-wrap {
  width: 830px;
  line-height: 1.5em;
  margin: 0;
}
.popup__title {
  margin: 0 0 3px;
  font-size: 28px;
  color: #c0d6bc;
  font-weight: bold;
  line-height: 1.5em;
}

.popup__text {
  /* width: 780px; */
  padding: 18px;
  background: #c0d6bc;
  color: #333333;
  font-size: 22px;
  line-height: 1.5em;
  border-radius: 4px;
  position: relative;
}

.popup__text::after {
  display: block;
  content: "";
  position: absolute;
  top: 19px;
  right: -30px;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #c0d6bc;
  border-width: 12px 20px;
  border-style: solid;
}

.popup__image + .popup__text-wrap .popup__text::after {
  display: block;
  content: "";
  position: absolute;
  top: 19px;
  left: -38px;
  width: 0;
  height: 0;
  border-color: transparent #c0d6bc transparent transparent;
  border-width: 12px 20px;
  border-style: solid;
}

.popup__text span {
  font-weight: bold;
  color: #0f6200;
}

.popup__onepoint {
  font-size: 16px;
  margin-top: 5px !important;
}

/* 閉じるボタン */
.popup__close {
  display: inline-block;
  margin-top: 30px;
  padding: 0.5em 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 20px;
  width: 200px;
}

/* トリガーリンク風 */

/*ボタン*/
.popup__wrapper {
  width: 100%;
  margin: 0 0 30px;
  padding: 50px 0;
  background-color: #c0d6bc;
  position: relative;
  display: block;
  text-align: center;
}

.popup__wrapper__title {
  display: inline-block;
  text-align: center;
  margin: 0 0 15px;
  padding: 0 15px;
  color: #6c330d;
  font-size: 26px;
  text-align: center;
  background: linear-gradient(transparent 0%, transparent 60%, #c1d9eb 60%);
  line-height: 1.6em;
}

.popup__wrapper__text {
  margin: 0 0 10px !important;
  font-size: 16px;
  color: #6c330d;
  text-align: center;
}

.popup__triggers {
  width: 980px;
  margin: 0 auto;
  height: 308px;
  position: relative;
}

.popup__triggers .popup__wrapper__trex {
  position: absolute;
  left: -190px;
  bottom: -20px;
  width: 190px;
  height: 190px;
}

.popup__triggers .popup__wrapper__trex::before {
  content: "?";
  color: #0f6200;
  font-size: 37px;
  position: absolute;
  top: -36px;
  left: 105px;
  transform: rotate(20deg);
  font-weight: bold;
  z-index: 3;
}

.trex {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
}

.leaf {
  z-index: 1;
  position: absolute;
  top: 89px;
  left: -51px;
  width: 114px;
}

.popup__triggers .popup__wrapper__pteranodon {
  position: absolute;
  right: -190px;
  top: -20px;
}

.popup__triggers .popup__wrapper__pteranodon::before {
  content: "?";
  color: #6e5905;
  font-size: 37px;
  position: absolute;
  top: -24px;
  left: 105px;
  transform: rotate(20deg);
  font-weight: bold;
  z-index: 3;
  line-height: 1;
}

.popup__trigger {
  cursor: pointer;
  color: #0f6200;
  font-size: 36px;
  font-weight: bold;
  display: inline-block;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#trigger_01 {
  position: absolute;
  top: 135px;
  left: 0px;
  color: #0f6200;
  font-size: 50px;
}
#trigger_02 {
  position: absolute;
  top: 55px;
  left: 550px;
  color: #333333;
  font-size: 40px;
}
#trigger_03 {
  position: absolute;
  top: 111px;
  left: 102px;
  color: #333333;
  font-size: 30px;
}
#trigger_04 {
  position: absolute;
  top: 101px;
  left: 252px;
  color: #333333;
  font-size: 50px;
}
#trigger_05 {
  position: absolute;
  top: 61px;
  left: 394px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_06 {
  position: absolute;
  top: 211px;
  left: 729px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_07 {
  position: absolute;
  top: 10px;
  left: 282px;
  color: #333333;
  font-size: 40px;
}
#trigger_08 {
  position: absolute;
  top: 71px;
  left: 748px;
  color: #333333;
  font-size: 50px;
}
#trigger_09 {
  position: absolute;
  top: 0;
  left: 0;
  color: #333333;
  font-size: 40px;
}
#trigger_10 {
  position: absolute;
  top: 13px;
  left: 868px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_11 {
  position: absolute;
  top: 134px;
  left: 445px;
  color: #333333;
  font-size: 30px;
}
#trigger_12 {
  position: absolute;
  top: 246px;
  left: 387px;
  color: #333333;
  font-size: 40px;
}
#trigger_13 {
  position: absolute;
  top: 249px;
  left: 604px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_14 {
  position: absolute;
  top: 24px;
  left: 649px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_15 {
  position: absolute;
  top: 80px;
  left: 927px;
  color: #333333;
  font-size: 40px;
}
#trigger_16 {
  position: absolute;
  top: 200px;
  left: 490px;
  color: #0f6200;
  font-size: 40px;
}
#trigger_17 {
  position: absolute;
  top: 121px;
  left: 605px;
  color: #333333;
  font-size: 50px;
}
#trigger_18 {
  position: absolute;
  top: 36px;
  left: 156px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_19 {
  position: absolute;
  top: 196px;
  left: 303px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_20 {
  position: absolute;
  top: 170px;
  left: 848px;
  color: #0f6200;
  font-size: 30px;
}
#trigger_21 {
  position: absolute;
  top: 238px;
  left: 939px;
  color: #333333;
  font-size: 30px;
}
#trigger_22 {
  position: absolute;
  top: 209px;
  left: 156px;
  color: #333333;
  font-size: 50px;
}

@media (max-width: 767px) {
  /* 背景＆中央配置 */
  .popup__wrap {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  /* チェックオンで表示 */
  .popup__checkbox:checked + .popup__wrap {
    display: flex;
  }

  /* 透過背景領域 */
  .popup__overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
  }

  /* 中身 */
  .popup__content {
    position: absolute;
    background: transparent;
    padding: 0;
    width: calc(100% - 12px);
    border-radius: 8px;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    color: #fff;
    flex-wrap: wrap;
    align-items: center;
  }

  /* 画像 */

  .popup__image {
    margin: 0;
    padding: 0;
    width: 75px;
  }

  .popup__text-wrap + .popup__image {
    margin-left: 10px;
  }
  .popup__image + .popup__text-wrap {
    margin-left: 10px;
  }
  .popup__image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
  }

  .popup__text-wrap {
    width: calc(100% - 88px);
    line-height: 1.5em;
    margin: 0;
  }
  .popup__title {
    margin: 0 0 3px;
    font-size: 20px;
    color: #c0d6bc;
    font-weight: bold;
    line-height: 1.5em;
  }

  .popup__text {
    /* width: 780px; */
    padding: 10px;
    background: #c0d6bc;
    color: #333333;
    font-size: 15px;
    line-height: 1.5em;
    border-radius: 4px;
    position: relative;
  }

  .popup__text::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #c0d6bc;
    border-width: 12px 20px;
    border-style: solid;
    transform: translateY(-50%);
  }

  .popup__image + .popup__text-wrap .popup__text::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    width: 0;
    height: 0;
    border-color: transparent #c0d6bc transparent transparent;
    border-width: 12px 20px;
    border-style: solid;
    transform: translate(0, -50%);
  }

  .popup__text span {
    font-weight: bold;
    color: #0f6200;
  }

  .popup__onepoint {
    font-size: 14px;
    margin-top: 5px !important;
  }

  /* 閉じるボタン */
  .popup__close {
    display: inline-block;
    margin-top: 20px;
    padding: 0.5em 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #fff;
    text-align: center;
    font-size: 12px;
    width: 140px;
  }

  /* トリガーリンク風 */

  /*ボタン*/
  .popup__wrapper {
    width: 100%;
    margin: 0 0 30px;
    padding: 20px 6px;
    background-color: #c0d6bc;
    position: relative;
    display: block;
    text-align: left;
  }

  .popup__wrapper__title {
    display: inline-block;
    text-align: center;
    margin: 0 0 10px;
    padding: 0 5px;
    color: #6c330d;
    font-size: 16px;
    text-align: left;
    background: linear-gradient(transparent 0%, transparent 60%, #c1d9eb 60%);
    line-height: 1.6em;
  }

  .popup__wrapper__text {
    margin: 0 0 10px !important;
    font-size: 13px;
    color: #6c330d;
    text-align: left;
    width: 22.5em;
  }

  .popup__triggers {
    width: 100%;
    margin: 0 auto;
    height: 220px;
    position: relative;
  }

  .popup__triggers .popup__wrapper__trex {
    position: absolute;
    left: 1px;
    bottom: 62px;
    width: 64px;
    height: auto;
  }

  .popup__triggers .popup__wrapper__trex::before {
    content: "?";
    color: #0f6200;
    font-size: 16px;
    position: absolute;
    top: -7px;
    left: 54px;
    transform: rotate(20deg);
    font-weight: bold;
    z-index: 3;
  }

  .trex {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 15px;
  }

  .leaf {
    z-index: 1;
    position: absolute;
    top: 24px;
    left: 0;
    width: 46px;
  }

  .popup__triggers .popup__wrapper__pteranodon {
    position: absolute;
    right: 0px;
    top: -31px;
    width: 74px;
    height: auto;
  }

  .popup__triggers .popup__wrapper__pteranodon::before {
    content: "?";
    color: #6e5905;
    font-size: 16px;
    position: absolute;
    top: -13px;
    left: 31px;
    transform: rotate(20deg);
    font-weight: bold;
    z-index: 3;
    line-height: 1;
  }

  .popup__trigger {
    cursor: pointer;
    color: #0f6200;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }

  #trigger_01 {
  position: absolute;
  top: 36.5%;
  left: 1.67%;
  color: #0f6200;
  font-size: 30px;
  }
  #trigger_02 {
    position: absolute;
    top: 21.5%;
    left: 60.56%;
    color: #333333;
    font-size: 22px;
  }
  #trigger_03 {
    position: absolute;
    top: 50%;
    left: 17.22%;
    color: #333333;
    font-size: 18px;
  }
  #trigger_04 {
    position: absolute;
    top: 30.5%;
    left: 33.06%;
    color: #333333;
    font-size: 30px;
  }
  #trigger_05 {
    position: absolute;
    top: 15.5%;
    left: 45.83%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_06 {
    position: absolute;
    top: 70%;
    left: 81.39%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_07 {
    position: absolute;
    top: 7%;
    left: 29.17%;
    color: #333333;
    font-size: 22px;
  }
  #trigger_08 {
    position: absolute;
    top: 27.5%;
    left: 75.83%;
    color: #333333;
    font-size: 30px;
  }
  #trigger_09 {
    position: absolute;
    top: 23%;
    left: 12.78%;
    color: #333333;
    font-size: 22px;
  }
  #trigger_10 {
    position: absolute;
    top: 15%;
    left: 88.06%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_11 {
    position: absolute;
    top: 43.5%;
    left: 48.89%;
    color: #333333;
    font-size: 18px;
  }
  #trigger_12 {
    position: absolute;
    top: 91.5%;
    left: 39.17%;
    color: #333333;
    font-size: 22px;
  }
  #trigger_13 {
    position: absolute;
    top: 89%;
    left: 71.11%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_14 {
    position: absolute;
    top: 0%;
    left: 68.06%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_15 {
    position: absolute;
    top: 31.5%;
    left: 93.06%;
    color: #333333;
    font-size: 22px;
  }
  #trigger_16 {
    position: absolute;
    top: 73%;
    left: 53.61%;
    color: #0f6200;
    font-size: 22px;
  }
  #trigger_17 {
    position: absolute;
    top: 51.5%;
    left: 64.72%;
    color: #333333;
    font-size: 30px;
  }
  #trigger_18 {
    position: absolute;
    top: 5%;
    left: 6.94%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_19 {
    position: absolute;
    top: 60.5%;
    left: 37.78%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_20 {
    position: absolute;
    top: 51.5%;
    left: 88.06%;
    color: #0f6200;
    font-size: 18px;
  }
  #trigger_21 {
    position: absolute;
    top: 89%;
    left: 93.89%;
    color: #333333;
    font-size: 18px;
  }
  #trigger_22 {
    position: absolute;
    top: 68%;
    left: 23.06%;
    color: #333333;
    font-size: 30px;
  }

}