.guide-part {
  position: fixed;
  bottom: 0;
  padding: 15px;
  width: min(100%, 500px);
  z-index: 5000;
}
@media (min-width: 768px) {
  .guide-part {
    right: 0;
  }
}
.guide-part p {
  font-size: 1.06rem;
  word-wrap: break-word;
}

.dialog-box {
  visibility: hidden;
  padding: 1.06rem 1.06rem 1.06rem 1.4rem;
  border-radius: 15px;
  -webkit-box-shadow: 3px 5px 10px rgba(255, 247, 214, 0.59) inset, 3px 3px 5px rgba(51, 51, 51, 0.1254901961);
          box-shadow: 3px 5px 10px rgba(255, 247, 214, 0.59) inset, 3px 3px 5px rgba(51, 51, 51, 0.1254901961);
  opacity: 0;
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.dialog-box a {
  color: #333333;
}
.dialog-box.green {
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(226, 242, 195)), color-stop(40%, rgb(217, 243, 176)), to(rgb(236, 241, 213)));
  background: linear-gradient(to top, rgb(226, 242, 195) 0%, rgb(217, 243, 176) 40% 40%, rgb(236, 241, 213) 100%);
  border: 2px dotted #a3c266;
}
.dialog-box.green p {
  color: #333333;
}
.dialog-box.orange {
  background: -webkit-gradient(linear, left top, left bottom, from(#f8ddb8), color-stop(30%, #f7cb8f), to(#f8dbb3));
  background: linear-gradient(to bottom, #f8ddb8 0%, #f7cb8f 30%, #f8dbb3 100%);
  border: 2px dotted rgba(183, 111, 57, 0.4901960784);
}
.dialog-box.orange p {
  color: #512c0c;
}
.dialog-box.is-show {
  visibility: visible;
  opacity: 0.96;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.grid-col0703 {
  grid-template-columns: 0.7fr 0.3fr;
  gap: 3px;
}

.font-14 {
  font-size: 14px;
}

.round15 {
  display: inline-block;
  padding: 0 10px 1px 10px;
  line-height: 1.3;
  border-radius: 15px;
}
.round15.green {
  background: rgb(184, 227, 133);
}
.round15.orange {
  background: rgba(236, 98, 31, 0.23);
}

.green-color {
  color: #458308;
}

.orange-color {
  color: #9e451a;
}

.before-arrow::before {
  --before-size: 8px;
  content: "";
  padding-left: var(--before-size);
  margin-right: 3px;
  background: url(/images/common/brown-forward-solid.svg) no-repeat center center/contain;
  opacity: 0.9;
}

.clickme-btn {
  opacity: 0;
  margin-left: 5px;
}
.clickme-btn.is-show {
  opacity: 1;
}

.dialogimg-style {
  position: absolute;
  bottom: 15px;
  right: 25px;
  width: calc(30% - 10px);
  -webkit-filter: drop-shadow(3px 3px 3px rgba(54, 43, 43, 0.1254901961));
          filter: drop-shadow(3px 3px 3px rgba(54, 43, 43, 0.1254901961));
  cursor: pointer;
  opacity: 0;
}
@media (min-width: 768px) {
  .dialogimg-style {
    width: 130px;
  }
}

.wobbly-ani {
  -webkit-transform-origin: 55% bottom;
          transform-origin: 55% bottom;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-name: wobblymove;
          animation-name: wobblymove;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  opacity: 1;
}

@-webkit-keyframes wobblymove {
  0% {
    -webkit-transform: translate(50px) rotate(8deg);
            transform: translate(50px) rotate(8deg);
  }
  20% {
    -webkit-transform: translate(40px) rotate(-8deg);
            transform: translate(40px) rotate(-8deg);
  }
  40% {
    -webkit-transform: translate(30px) rotate(8deg);
            transform: translate(30px) rotate(8deg);
  }
  60% {
    -webkit-transform: translate(20px) rotate(-8deg);
            transform: translate(20px) rotate(-8deg);
  }
  80% {
    -webkit-transform: translate(10px) rotate(8deg);
            transform: translate(10px) rotate(8deg);
  }
  100% {
    -webkit-transform: translate(0px) rotate(0deg);
            transform: translate(0px) rotate(0deg);
  }
}

@keyframes wobblymove {
  0% {
    -webkit-transform: translate(50px) rotate(8deg);
            transform: translate(50px) rotate(8deg);
  }
  20% {
    -webkit-transform: translate(40px) rotate(-8deg);
            transform: translate(40px) rotate(-8deg);
  }
  40% {
    -webkit-transform: translate(30px) rotate(8deg);
            transform: translate(30px) rotate(8deg);
  }
  60% {
    -webkit-transform: translate(20px) rotate(-8deg);
            transform: translate(20px) rotate(-8deg);
  }
  80% {
    -webkit-transform: translate(10px) rotate(8deg);
            transform: translate(10px) rotate(8deg);
  }
  100% {
    -webkit-transform: translate(0px) rotate(0deg);
            transform: translate(0px) rotate(0deg);
  }
}