.modal-image {
  max-width: 100% !important;
  max-height: 80vh !important;
  display: block !important;
  border-radius: 8px 8px 0 0 !important;
}

.m-content-section {
  position: absolute;
  top: 4rem;
  display: flex;
  place-content: center;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.m-content-section-round {
  margin: 0px 63px;
}

.m-content-section-round h2 {
  background: #f96938;
  padding: 5px 50px;
  border-radius: 50px;
  color: white;
  margin: 0;
  font-size: clamp(14px, 1.8vw, 2.5vw);
  width: 100%;
  padding: 3px 0px;
  white-space: nowrap;
}
.m-content-p {
  font-size: 3.3vh;
  font-weight: 600;
  line-height: 1.8;
  margin: 0;
}

.m-highlighted-text {
  position: relative;
  display: inline-block;
  padding: 0 4px;
  z-index: 1;
  color: #f96938;
}

.m-highlighted-text::before {
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0;
  width: 100%;
  height: 0.8em;
  background-color: #fee25b;
  z-index: -1;
}

.m-content-p .black {
  color: #404040;
}

.m-content-section-button {
  position: absolute;
  display: grid;
  top: 76%;
  left: 19%;
  width: 17rem;
}

.m-content-section-button button {
  font-size: 2rem;
  height: 5rem;
}

.m-content-section-button button:nth-child(1) {
  background: #10bffd;
  border-radius: 5px;
}
.m-content-section-button button:nth-child(2) {
  background: #47c65e;
  border-radius: 5px;
}

.detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.detail-button::after {
  content: "▶";
  font-size: 12px;
  font-weight: bold;
}

.detail-button.with-icon::after {
  content: "▶";
}

@media (max-width: 1200px) {
  .m-content-section {
    top: 12%;
    width: 100%;
  }
  .m-content-section-button {
    top: 75%;
    left: 12%;
    width: 300px;
  }
  .m-content-section-round {
    margin: 0px 9vw 0 5vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 3.3vw;
    height: 80px;
  }
  .m-content-section-round h2 {
    font-size: clamp(14px, 2vw, 2.8vw);
    width: 100%;
    padding: 3px 28px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 2.3vw;
  }
}

@media (max-width: 1120px) {
  .m-content-section {
    top: 12%;
    width: 100%;
  }
  .m-content-section-button {
    top: 75%;
    left: 12%;
    width: 300px;
  }
  .m-content-section-round {
    margin: 0px 9vw 0 5vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 3.3vw;
    height: 80px;
  }
  .m-content-section-round h2 {
    font-size: clamp(14px, 2vw, 3vw);
    width: 100%;
    padding: 3px 20px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 2.4vw;
  }
}

@media (max-width: 1024px) {
  .m-content-section {
    top: 12%;
    width: 100%;
  }
  .m-content-section-button {
    top: 75%;
    left: 12%;
    width: 300px;
  }
  .m-content-section-round {
    margin: 0px 9vw 0 5vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 3.3vw;
    height: 80px;
  }
  .m-content-section-round h2 {
    font-size: clamp(14px, 2vw, 3.2vw);
    width: 100%;
    padding: 3px 20px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 2.3vw;
  }
}

@media (max-width: 1000px) {
  .m-content-section-round h2 {
    font-size: clamp(14px, 3.0vw, 3.0vw);
    white-space: nowrap;
  }
}

@media (max-width: 990px) {
  .m-content-section {
    top: 12%;
    width: 100%;
  }
  .m-content-section-button {
    top: 75%;
    left: 12%;
    width: 300px;
  }
  .m-content-section-round {
    margin: 0px 9vw 0 5vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 3.3vw;
    height: 80px;
  }
  .m-content-section-round h2 {
    font-size: clamp(12px, 3.7vw, 3.7vw);
    width: 100%;
    padding: 3px 20px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: clamp(12px, 3.7vw, 3.7vw);
  }
}

@media (max-width: 840px) {
  .m-content-section {
    top: 12%;
    width: 100%;
  }
  .m-content-section-button {
    top: 75%;
    left: 12%;
    width: 37vw;
  }
  .m-content-section-round {
    margin: 0px 10vw 0 5vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 4vw;
    height: 11vw;
  }
  .m-content-section-round h2 {
    font-size: clamp(12px, 3.2vw, 3.7vw);
    width: 100%;
    padding: 3px 20px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 2.9vw;
  }
}

@media (max-width: 768px) {
  .m-content-section {
    top: 12%;
    width: 100%;
  }
  .m-content-section-button {
    top: 75%;
    left: 12%;
    width: 37vw;
  }
  .m-content-section-round {
    margin: 0px 13vw 0 6vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 4vw;
    height: 11vw;
  }
  .m-content-section-round h2 {
    font-size: clamp(12px, 3.7vw, 3.7vw);
    width: 100%;
    padding: 3px 20px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 3.3vw;
  }
}

@media (max-width: 660px) {
  .m-content-section {
    top: 10%;
    width: 100%;
  }
  .m-content-section-button {
    top: 75%;
    left: 12%;
    width: 37vw;
  }
  .m-content-section-round {
    margin: 0px 13vw 0 6vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 4vw;
    height: 11vw;
  }
  .m-content-section-round h2 {
    font-size: clamp(12px, 3.8vw, 3.8vw);
    width: 100%;
    padding: 3px 20px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 3.3vw;
  }
}

@media (max-width: 550px) {
  .m-content-section {
    top: 6%;
    width: 100%;
  }
  .m-content-section-button {
    top: 58vw;
    left: 11vw;
    width: 37vw;
  }
  .m-content-section-round {
    margin: 0px 10vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 4vw;
    height: 11vw;
  }
  .m-content-section-round h2 {
    font-size: clamp(11px, 3.6vw, 3.6vw);
    width: 100%;
    padding: 3px 5px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 3.3vw;
  }
}

@media (max-width: 480px) {
  .m-content-section {
    top: 7%;
    width: 100%;
  }
  .m-content-section-button {
    top: 58vw;
    left: 11vw;
    width: 37vw;
  }
  .m-content-section-round {
    margin: 0px 10vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 4vw;
    height: 11vw;
  }
  .m-content-section-round h2 {
    font-size: clamp(11px, 3.6vw, 3.6vw);
    width: 100%;
    padding: 3px 5px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 3.3vw;
  }
}

@media (max-width: 320px) {
  .m-content-section {
    top: 6%;
    width: 100%;
  }
  .m-content-section-button {
    top: 58vw;
    left: 11vw;
    width: 37vw;
  }
  .m-content-section-round {
    margin: 0px 10vw;
    left: 11%;
  }
  .m-content-section-button button {
    font-size: 4vw;
    height: 11vw;
  }
  .m-content-section-round h2 {
    font-size: clamp(10px, 3.6vw, 3.6vw);
    width: 100%;
    padding: 3px 5px;
    white-space: nowrap;
  }

  .m-content-p {
    font-size: 3.3vw;
  }
}
/* ======= */

#image-modal p {
  margin: 0 !important;
  padding: 0 !important;
}

.p-content-p {
  position: absolute;
  color: #3d453c;
  top: 7%;
  width: 100%;
}

.p-content-p span {
  font-size: 3.6vh;
}

.p-highlighted-text {
  position: relative;
  display: inline-block;
  padding: 0 4px;
  z-index: 1;
}

.p-highlighted-text::before {
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0;
  width: 100%;
  height: 0.5em;
  background-color: #ffdc3d;
  z-index: -1;
  border-radius: 10px;
}

.p-content-l span:nth-child(1) {
  color: #fb7fb5;
}

.p-content-l span:nth-child(2) {
  background: #ffdc3d;
  padding: 5px 10px;
  border-radius: 5px;
}

.p-content-l {
  position: absolute;
  top: 26.5%;
  left: 31%;
  font-size: 2.8vh;
  padding: 0;
}

.p-content-l span:nth-child(1) {
  color: #fb7fb5;
}

.p-content-l span:nth-child(2) {
  background: #ffdc3d;
  padding: 5px 10px;
  border-radius: 5px;
}

.p-content-b {
  list-style: none;
  top: 47%;
  position: absolute;
  left: 18%;
  display: grid;
  gap: 1px;
  padding: 0;
  margin: 0;
}

.p-content-b li {
  font-size: 4vh;
  font-weight: 700;
  color: #6c6c6c;
}

@media (max-width: 1200px) {
  .p-content-p span {
    font-size: 2.6vw;
  }
  .p-content-p {
    top: 8%;
    left: -1rem;
    width: 693px;
  }
  .p-content-l {
    font-size: 2.1vw;
    top: 27%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 46%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 2.8vw;
  }
}

@media (max-width: 1120px) {
  .p-content-p span {
    font-size: 2.8vw;
  }
  .p-content-p {
    top: 8%;
    left: -1rem;
    width: 693px;
  }
  .p-content-l {
    font-size: 2.3vw;
    top: 27%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 46%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 3vw;
  }
}

@media (max-width: 1024px) {
  .p-content-p span {
    font-size: 3vw;
  }
  .p-content-p {
    top: 8%;
    left: -1rem;
    width: 650px;
  }
  .p-content-l {
    font-size: 2.4vw;
    top: 27%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 46%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 3.1vw;
  }
}

@media (max-width: 990px) {
  .p-content-p span {
    font-size: 3.1vw;
  }
  .p-content-p {
    top: 8%;
    left: -1rem;
    width: 650px;
  }
  .p-content-l {
    font-size: 2.5vw;
    top: 27%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 46%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 3.4vw;
  }
}

@media (max-width: 840px) {
  .p-content-p span {
    font-size: 3.5vw;
  }
  .p-content-p {
    top: 8%;
    left: -1rem;
    width: 650px;
  }
  .p-content-l {
    font-size: 2.7vw;
    top: 27%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 46%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 3.7vw;
  }
}

@media (max-width: 768px) {
  .p-content-p span {
    font-size: 3.4vw;
  }
  .p-content-p {
    top: 8%;
    left: -1rem;
    width: 650px;
  }
  .p-content-l {
    font-size: 2.7vw;
    top: 28%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 45%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 3.7vw;
  }
}

@media (max-width: 660px) {
  .p-content-p span {
    font-size: 3.6vw;
  }
  .p-content-p {
    top: 11%;
    left: -2rem;
    width: 600px;
  }
  .p-content-l {
    font-size: 2.9vw;
    top: 28%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 44%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 3.9vw;
  }
}

@media (max-width: 550px) {
  .p-content-p span {
    font-size: 4vw;
  }
  .p-content-p {
    top: 10%;
    left: -3rem;
    width: 550px;
  }
  .p-content-l {
    font-size: 3.2vw;
    top: 28%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 42%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 4.5vw;
  }
}

@media (max-width: 480px) {
  .p-content-p span {
    font-size: 4vw;
  }
  .p-content-p {
    top: 11%;
    left: -2rem;
    width: 500px;
  }
  .p-content-l {
    font-size: 3.2vw;
    top: 28%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }
  .p-content-b {
    top: 43%;
    display: grid;
    gap: 3px;
  }

  .p-content-b li {
    font-size: 4.5vw;
  }
}

@media (max-width: 320px) {
  .p-content-p span {
    font-size: 3.7vw;
  }
  .p-content-p {
    top: 11%;
    width: 400px;
    left: -12%;
  }
  .p-content-l {
    font-size: 3.2vw;
    top: 30%;
  }
  .p-content-l span:nth-child(2) {
    padding: 3px 5px;
  }

  .p-content-b {
    display: grid;
    gap: 3px;
    top: 42%;
  }
  .p-content-b li {
    font-size: 4vw;
  }
}