@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
.p-guide {
  font-family: "Noto Sans JP", sans-serif;
  padding-top: 1rem;
  background: linear-gradient(109deg, #fff 4.48%, #d9f0fa 24.32%, #c7e8f8 94.21%);
}

.p-guide__inner {
  max-width: 1100px;
  margin: 0 auto;
  width: calc(100% - 2rem);
  padding-block: 2rem 6.25rem;
}

.p-guide__heading {
  text-align: center;
  margin-bottom: 2.25rem;
}

.p-guide__title {
  color: #004599;
  font-size: 1.375rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .p-guide__title {
    font-size: 2.25rem;
  }
}

.p-guide__text {
  font-size: 1rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .p-guide__text {
    font-size: 1.5rem;
  }
}

.p-guide__main {
  margin-bottom: 6.25rem;
  position: relative;
}
.p-guide__main img {
  width: 102.364%;
  width: 100%;
}

.p-guide__mainContainer {
  overflow: hidden;
  position: absolute;
  bottom: 1.09375%;
  left: 0;
  width: 97.6363636364%;
  height: 82.5%;
  border-radius: 47%;
}
.p-guide__mainContainer:after {
  content: "";
  top: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  inset: 0;
  position: absolute;
  z-index: 1;
  -webkit-animation: slide 2.4s forwards 2s;
          animation: slide 2.4s forwards 2s;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0.14)), color-stop(50%, rgba(255, 255, 255, 0.26)), color-stop(60%, rgba(255, 255, 255, 0.14)), color-stop(70%, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.14) 40%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.14) 60%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
  -webkit-filter: blur(4px);
          filter: blur(4px);
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  10% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  90% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes slide {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  10% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  90% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.p-guide__button {
  color: #212529;
  font-size: 1.5625rem;
  font-size: min(1.737vw, 1.5625rem);
  font-weight: 700;
  background-color: #fff;
  padding: 0 min(1.25vw, 1.125rem);
  border-radius: 50vh;
  min-width: 11.25rem;
  min-width: min(12.5vw, 11.25rem);
  line-height: 1.44;
  border: none;
  -webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  position: absolute;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}
.p-guide__button:hover {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
  background-color: #ffa21f;
}
.p-guide__button._1_ {
  top: 60.625%;
  left: 33.545%;
}
.p-guide__button._2_ {
  top: 80%;
  right: 16%;
}
.p-guide__button._3_ {
  top: 45.038%;
  right: 14.364%;
}
.p-guide__button._4_ {
  top: 21.71875%;
  right: 16.3636363636%;
}
.p-guide__button._5_ {
  top: 31.25%;
  left: 40.9090909091%;
}
.p-guide__button._6_ {
  top: 42.03125%;
  left: 16.1818181818%;
}
.p-guide__button._7_ {
  top: 67.1875%;
  right: 30.6363636364%;
}
.p-guide__button._8_ {
  top: 12.65625%;
  left: 43.4545454545%;
}
.p-guide__button._9_ {
  top: 62.5%;
  right: -0.2727272727%;
}
.p-guide__button._10_ {
  top: 23.90625%;
  left: 9.0909090909%;
}
.p-guide__button._11_ {
  top: 69.375%;
  left: 10.3636363636%;
}

#guide img {
  height: auto;
}
#guide .c-weather-building {
  position: absolute;
  top: 42.1875%;
  left: 39.6363636364%;
  width: 9.0909090909%;
}
#guide .c-maritime {
  position: absolute;
  top: 84.53125%;
  right: 36%;
  width: 3.6363636364%;
  -webkit-animation: boat 6s linear infinite;
          animation: boat 6s linear infinite;
}
#guide .c-industry-building1 {
  position: absolute;
  width: 6.6363636364%;
  top: 34.84375%;
  right: 15.4545454545%;
}
#guide .c-industry-building2 {
  position: absolute;
  width: 6.8181818182%;
  top: 35.625%;
  right: 9.3636363636%;
}
#guide .c-industry-building3 {
  position: absolute;
  width: 5.3636363636%;
  top: 45.9375%;
  right: 11.9090909091%;
}
#guide .c-industry-car {
  position: absolute;
  width: 1.8181818182%;
  top: 32.8125%;
  right: 22.1818181818%;
}
#guide .c-industry-smoke {
  position: absolute;
  width: 2.9090909091%;
  top: 23.125%;
  right: 11.6363636364%;
  -webkit-animation: smoke 4s linear infinite;
          animation: smoke 4s linear infinite;
}
#guide .c-pv {
  position: absolute;
  top: 25.3125%;
  right: 29.9090909091%;
  width: 13.0909090909%;
}
#guide .c-road {
  position: absolute;
  top: 19.84375%;
  left: 26.3636363636%;
  width: 20%;
}
#guide .c-forest {
  position: absolute;
  top: 35.46875%;
  left: 2.4545454545%;
  width: 24.3636363636%;
  animation: forest 4s linear infinite reverse;
}
#guide .c-bridge {
  position: absolute;
  top: 55%;
  left: 54.3636363636%;
  width: 8%;
}
#guide .c-snow {
  position: absolute;
  top: -2.1875%;
  left: 32.8181818182%;
  width: 17.4545454545%;
  animation: cloud 5s linear infinite reverse;
}
#guide .c-wind {
  position: absolute;
  -webkit-animation: wind 5s linear infinite;
          animation: wind 5s linear infinite;
}
#guide .c-wind._1_ {
  width: 9.4545454545%;
  top: 62.03125%;
  right: 14.9090909091%;
}
#guide .c-wind._2_ {
  width: 6%;
  top: 51.5625%;
  right: 23.4545454545%;
}
#guide .c-wind._3_ {
  width: 6.9090909091%;
  right: 16.9090909091%;
  top: 57.65625%;
}
#guide .c-wind._4_ {
  width: 7.7272727273%;
  top: 54.375%;
  right: 25.1818181818%;
}
#guide .c-wind._5_ {
  width: 6.3636363636%;
  top: 61.25%;
  right: 19.8181818182%;
}
#guide .c-mountain {
  position: absolute;
  top: 27.03125%;
  left: 6%;
  width: 15.7272727273%;
  -webkit-animation: forest 2.5s linear infinite;
          animation: forest 2.5s linear infinite;
}
#guide .c-mountain-cloud {
  position: absolute;
  top: 9.375%;
  left: 0;
  width: 21.0909090909%;
  -webkit-animation: cloud 7s linear infinite;
          animation: cloud 7s linear infinite;
}
#guide .c-tractor {
  position: absolute;
  top: 60.625%;
  left: 22.4545454545%;
  width: 4.8181818182%;
}
#guide .c-car1 {
  position: absolute;
  top: 71.875%;
  left: 44.2727272727%;
  width: 1%;
  -webkit-animation: car1 9s linear infinite;
          animation: car1 9s linear infinite;
  --car1-tx: 903.7900874636%;
  --car1-ty: -642.8571428571%;
}
@media screen and (min-width: 768px) {
  #guide .c-car1 {
    --car1-tx: 945.4545454545%;
    --car1-ty: -622.2222222222%;
  }
}
@-webkit-keyframes car1 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(var(--car1-tx), var(--car1-ty));
            transform: translate(var(--car1-tx), var(--car1-ty));
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(var(--car1-tx), var(--car1-ty));
            transform: translate(var(--car1-tx), var(--car1-ty));
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes car1 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(var(--car1-tx), var(--car1-ty));
            transform: translate(var(--car1-tx), var(--car1-ty));
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(var(--car1-tx), var(--car1-ty));
            transform: translate(var(--car1-tx), var(--car1-ty));
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}
#guide .c-car2 {
  position: absolute;
  top: 63.59375%;
  left: 54.3636363636%;
  width: 1.2727272727%;
  -webkit-animation: car2 10s linear 2s infinite;
          animation: car2 10s linear 2s infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  opacity: 0;
  --car2-tx: -1077.9816513761%;
  --car2-ty: 964.6302250804%;
}
@media screen and (min-width: 768px) {
  #guide .c-car2 {
    --car2-tx: -1171.4285714286%;
    --car2-ty: 880%;
  }
}
@-webkit-keyframes car2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(var(--car2-tx), var(--car2-ty));
            transform: translate(var(--car2-tx), var(--car2-ty));
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(var(--car2-tx), var(--car2-ty));
            transform: translate(var(--car2-tx), var(--car2-ty));
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes car2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(var(--car2-tx), var(--car2-ty));
            transform: translate(var(--car2-tx), var(--car2-ty));
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(var(--car2-tx), var(--car2-ty));
            transform: translate(var(--car2-tx), var(--car2-ty));
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}
#guide .c-car3 {
  position: absolute;
  top: 63.59375%;
  left: 54.8181818182%;
  width: 1%;
  -webkit-animation: car3 10s linear -3s infinite;
          animation: car3 10s linear -3s infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  --car3-tx: -1399.416909621%;
  --car3-ty: 964.2857142857%;
}
@media screen and (min-width: 768px) {
  #guide .c-car3 {
    --car3-tx: -1490.9090909091%;
    --car3-ty: 977.7777777778%;
  }
}
@-webkit-keyframes car3 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(var(--car3-tx), var(--car3-ty));
            transform: translate(var(--car3-tx), var(--car3-ty));
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(var(--car3-tx), var(--car3-ty));
            transform: translate(var(--car3-tx), var(--car3-ty));
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes car3 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(var(--car3-tx), var(--car3-ty));
            transform: translate(var(--car3-tx), var(--car3-ty));
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(var(--car3-tx), var(--car3-ty));
            transform: translate(var(--car3-tx), var(--car3-ty));
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}
#guide .c-car4 {
  position: absolute;
  top: 49.21875%;
  right: 29.1818181818%;
  width: 1.4545454545%;
  -webkit-animation: car4 6s linear infinite;
          animation: car4 6s linear infinite;
}
@-webkit-keyframes car4 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(-525%, 353.8461538462%);
            transform: translate(-525%, 353.8461538462%);
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(-525%, 353.8461538462%);
            transform: translate(-525%, 353.8461538462%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}
@keyframes car4 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
  95% {
    -webkit-transform: translate(-525%, 353.8461538462%);
            transform: translate(-525%, 353.8461538462%);
    opacity: 1;
  }
  98% {
    -webkit-transform: translate(-525%, 353.8461538462%);
            transform: translate(-525%, 353.8461538462%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 0;
  }
}

@-webkit-keyframes wind {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes wind {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes up1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  30% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  40% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  70% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  90% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes up1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  30% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  40% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  70% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  90% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes up2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes up2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes up3 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  25% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  55% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes up3 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  25% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  55% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes up4 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  15% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  55% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  70% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  85% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes up4 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  15% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  55% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  70% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  85% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes up5 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  35% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  60% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  90% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes up5 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  35% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  60% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  90% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes up6 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  65% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  82% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes up6 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  65% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  82% {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
            animation-timing-function: cubic-bezier(0.4, 0, 1, 1.3);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-10px, -10px);
            transform: translate(-10px, -10px);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(10px, 10px);
            transform: translate(10px, 10px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes cloud {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-10px, -10px);
            transform: translate(-10px, -10px);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(10px, 10px);
            transform: translate(10px, 10px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes boat {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-4px, 4px);
            transform: translate(-4px, 4px);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(4px, -4px);
            transform: translate(4px, -4px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes boat {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-4px, 4px);
            transform: translate(-4px, 4px);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(4px, -4px);
            transform: translate(4px, -4px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes forest {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  50% {
    -webkit-transform: translate(-1px, 1px);
            transform: translate(-1px, 1px);
  }
  75% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes forest {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  50% {
    -webkit-transform: translate(-1px, 1px);
            transform: translate(-1px, 1px);
  }
  75% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes smoke {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-3px, 0);
            transform: translate(-3px, 0);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(3px, 0);
            transform: translate(3px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes smoke {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-3px, 0);
            transform: translate(-3px, 0);
  }
  50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(3px, 0);
            transform: translate(3px, 0);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.p-guide__about {
  background-color: #fff;
  display: grid;
  gap: 1.5rem 2.875rem;
  padding: 2.5rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 0.875rem;
}
.p-guide__about > p {
  margin: 0;
  text-align: justify;
}
@media screen and (min-width: 768px) {
  .p-guide__about > p {
    grid-column: 1/2;
  }
}
@media screen and (min-width: 768px) {
  .p-guide__about {
    padding: 3.5rem 7.637%;
    grid-template-columns: 1fr 15.344%;
    font-size: 1rem;
  }
}

.p-guide__aboutTitle {
  color: #004599;
  font-size: 2rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem 1em;
  text-transform: uppercase;
  line-height: 2.25rem;
}
@media screen and (min-width: 768px) {
  .p-guide__aboutTitle {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-column: span 2;
    font-size: 2.25rem;
  }
}
.p-guide__aboutTitle h2 {
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-guide__aboutTitle h2 {
    font-size: 1.5rem;
  }
}

.p-guide__aboutLead {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .p-guide__aboutLead {
    font-size: 1.25rem;
  }
}

.p-guide__aboutLogo {
  margin: auto;
}
@media screen and (min-width: 768px) {
  .p-guide__aboutLogo {
    grid-row: 2/4;
    grid-column: 2/3;
  }
}

#guide .c-modal {
  position: fixed;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.25s ease, visibility 0.25s ease;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
}
#guide .c-modal.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1001;
}
#guide .c-modal h2,
#guide .c-modal p,
#guide .c-modal ul,
#guide .c-modal figure {
  margin: 0;
  padding: 0;
}
#guide .c-modal__inner {
  position: relative;
  width: min(980px, 100% - 2rem);
  max-height: calc(100% - 2rem);
  background: #fff;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transition: transform 0.25s ease, opacity 0.25s ease, -webkit-transform 0.25s ease;
  opacity: 0;
  overflow: auto;
}
#guide .c-modal.is-active .c-modal__inner {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
#guide .c-modal__content {
  padding: 3rem 1rem;
}
@media screen and (min-width: 768px) {
  #guide .c-modal__content {
    padding: 2.25rem 7.55%;
  }
}
#guide .c-modal__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 45px;
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #000;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: #01459a;
  font-size: 1.875rem;
}
#guide .c-modal__heading {
  display: grid;
  gap: 1rem 1.875rem;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
  #guide .c-modal__heading {
    grid-template-columns: 15rem 1fr;
  }
}
#guide .c-modal__heading img {
  grid-row: span 2;
  width: 100%;
  margin-top: 0.625rem;
}
#guide .c-modal__heading h2 {
  font-size: 1.875rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  #guide .c-modal__heading h2 {
    font-size: 2.125rem;
  }
}
#guide .c-modal__heading p {
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #guide .c-modal__heading p {
    font-size: 1.125rem;
  }
}
#guide .c-modal__productsTitle {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.125rem !important;
}
@media screen and (min-width: 768px) {
  #guide .c-modal__productsTitle {
    font-size: 1.5rem;
  }
}
#guide .c-modal__productsList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #guide .c-modal__productsList {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}
#guide .c-modal__product {
  list-style: none;
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
#guide .c-modal__product a {
  text-decoration: none;
  color: currentColor;
  font-size: 0.875rem;
  background-color: #e3f6ff;
  padding: 0.625rem 0.75rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  gap: 0.375rem;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
#guide .c-modal__product a:hover {
  -webkit-transform: translateY(4px);
          transform: translateY(4px);
}
#guide .c-modal__productHeading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.375rem;
  font-weight: 500;
}
#guide .c-modal__productImage img {
  width: 100%;
}
#guide .c-modal__productNo {
  font-size: 1rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  #guide .c-modal__productNo {
    font-size: 1.25rem;
  }
}

body.is-modal-open {
  overflow: hidden;
}