@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600&display=swap);
@keyframes ImageInViewEffect {
    0% {
        transform: translateX(-100%) translateX(-1px)
    }
    40% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(0)
    }
    to {
        transform: translateX(100%)
    }
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1)
    }
    30% {
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        transform: scale3d(1.05, .95, 1)
    }
    to {
        transform: scaleX(1)
    }
}

@keyframes tada {
    0% {
        transform: scaleX(1)
    }
    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
    to {
        transform: scaleX(1)
    }
}

@keyframes bounce {
    0%,
    20%,
    53%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0)
    }
    40%,
    43% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0) scaleY(1.1)
    }
    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0) scaleY(1.05)
    }
    80% {
        transform: translateZ(0) scaleY(.95);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }
}

@keyframes flipInY {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }
    40% {
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateY(-20deg)
    }
    60% {
        opacity: 1;
        transform: perspective(400px) rotateY(10deg)
    }
    80% {
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        transform: perspective(400px)
    }
}


#map{
    width: 100%;
    height: 400px;
    max-width: 1000px;
    margin: 0px auto;
}
.iframe-wrp {
    position: relative;
    width: 100%;
    padding-top: 75%; /* = height ÷ width × 100 */
  }
  .iframe-wrp iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }