.zenkakugothicnew-medium-plantation-16px {
  color: var(--plantation);
  font-family: var(--font-family-zen_kaku_gothic_new);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
}
.zenkakugothicnew-bold-plantation-18px {
  color: var(--plantation);
  font-family: var(--font-family-zen_kaku_gothic_new);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}
.zenkakugothicnew-bold-plantation-16px {
  color: var(--plantation);
  font-family: var(--font-family-zen_kaku_gothic_new);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
}
.zenkakugothicnew-medium-plantation-12px {
  color: #00244D;
  font-family: var(--font-family-zen_kaku_gothic_new);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 500;
}
.zenkakugothicnew-medium-plantation-14px {
  color: var(--plantation);
  font-family: var(--font-family-zen_kaku_gothic_new);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
}
.roundedmplus1c-extra-extra-bold-plantation-36px {
  color: #00208A;
  font-family: var(--font-family-rounded_mplus_1c-extrabold);
  font-size: 36rem;
  font-style: normal;
  font-weight: 800;
}
.zenkakugothicnew-bold-white-14px {
  color: var(--white);
  font-family: var(--font-family-zen_kaku_gothic_new);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 700;
}
.roundedmplus1c-extra-extra-bold-plantation-28px {
  color: #00208A;
  font-family: var(--font-family-rounded_mplus_1c-extrabold);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 800;
}
:root {
    --plantation: #00244D;
    --polar: #e3f3f8;
    --salmon: #ff8c7a;
    --slate-gray: #6d868c;
    --sunset-orange: #f4644e;
    --vista-blue: #85d1b2;
    --wax-flower: #ffc0ad;
    --link-water: #d3e8f0;
    --white: #ffffff;
    --white-2: rgba(255,255,255,0.8);
    --font-size-l: 18rem;
    --font-size-m: 16rem;
    --font-size-s: 15rem;
    --font-size-xl: 20rem;
    --font-size-xs: 14rem;
    --font-size-xxl: 28rem;
    --font-size-xxs: 12rem;
    --font-family-kumbh_sans: "Kumbh Sans";
    --font-family-rounded_mplus_1c-extrabold: 'M PLUS Rounded 1c';
    --font-family-rounded_mplus_1c-medium: 'M PLUS Rounded 1c';
    --font-family-zen_kaku_gothic_new: "Zen Kaku Gothic New";
}

.x-points, .break {
    --Dark: #00244D;
}

@keyframes bubble-ping-bounce {
0% {
    transform: scale(1) translateY(0);
}
5% {
    transform: scale(1.05, 0.95) translateY(2rem);
}
10% {
    transform: scale(0.95, 1.15) translateY(-20rem);
}
15% {
    transform: scale(1.1, 0.9) translateY(3rem);
}
20% {
    transform: scale(1) translateY(0);
}
100% {
    transform: scale(1) translateY(0);
}
}

@keyframes bike-vroom {
0% {
    transform: translateY(0) rotate(0deg);
}
15% {
    transform: translateY(-4rem) rotate(-2deg);
}
30% {
    transform: translateY(0) rotate(1deg);
}
45% {
    transform: translateY(-2rem) rotate(-0.5deg);
}
60% {
    transform: translateY(0) rotate(0.5deg);
}
100% {
    transform: translateY(0) rotate(0deg);
}
}

@keyframes bike-entry {
0% {
    opacity: 0;
    transform: scale(0.5) translateX(50rem) rotate(10deg);
}
100% {
    opacity: 1;
    transform: scale(1) translateX(0) rotate(0deg);
}
}

@media (min-width: 768px) {

    @keyframes bike-vroom {
        0% {
            transform: translateY(0) rotate(0deg);
        }
        15% {
            transform: translateY(-4rem) rotate(-2deg);
        }
        30% {
            transform: translateY(0) rotate(1deg);
        }
        45% {
            transform: translateY(-2rem) rotate(-0.5deg);
        }
        60% {
            transform: translateY(0) rotate(0.5deg);
        }
        100% {
            transform: translateY(0) rotate(0deg);
        }
    }

    @keyframes bike-entry {
        0% {
            opacity: 0;
            transform: scale(0.5) translateX(50rem) rotate(10deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateX(0) rotate(0deg);
        }
    }
}
@media (min-width: 900px) {
}
@media (min-width: 1132px) {
}

.x-points {
align-items: center;
align-self: stretch;
display: flex;
flex: 0 0 auto;
flex-direction: column;
padding: 60rem 0rem 0rem;
position: relative;
width: 100%;
overflow-x: clip;
}
.x-points--wh{
    background-color: var(--white);
}

.text-1 {
letter-spacing: 1.80rem;
line-height: 1;
position: relative;
text-align: center;
white-space: nowrap;
width: fit-content;
font-size: 36rem;
}

@media (min-width: 768px) {
    .x-points {
        padding: 120rem 0rem 0rem;
    }
    .text-1 {
        letter-spacing: 3.4rem;
        font-size: 68rem;
    }

}

.text-2 {
    align-self: stretch;
    letter-spacing: 0;
    line-height: 1.6;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {

    .text-2 {
        line-height: 1.8;
        font-size: 24rem;
    }
}
@media (min-width: 1000px) {
}
@media (min-width: 1132px) {
}

@keyframes bubble-ping-bounce-1 {
  0% { transform: scale(1) translateY(0); }
  5% { transform: scale(1.05, 0.95) translateY(2rem); }
  10% { transform: scale(0.95, 1.15) translateY(-20rem); }
  15% { transform: scale(1.1, 0.9) translateY(3rem); }
  20% { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes bubble-ping-bounce-2 {
  0%, 25% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.05, 0.95) translateY(2rem); }
  35% { transform: scale(0.95, 1.15) translateY(-20rem); }
  40% { transform: scale(1.1, 0.9) translateY(3rem); }
  45% { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes bubble-ping-bounce-3 {
  0%, 50% { transform: scale(1) translateY(0); }
  55% { transform: scale(1.05, 0.95) translateY(2rem); }
  60% { transform: scale(0.95, 1.15) translateY(-20rem); }
  65% { transform: scale(1.1, 0.9) translateY(3rem); }
  70% { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes bubble-ping-bounce-4 {
  0%, 75% { transform: scale(1) translateY(0); }
  80% { transform: scale(1.05, 0.95) translateY(2rem); }
  85% { transform: scale(0.95, 1.15) translateY(-20rem); }
  90% { transform: scale(1.1, 0.9) translateY(3rem); }
  95% { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

@media (min-width: 768px) {

}

.heading {
align-items: flex-start;
display: inline-flex;
justify-content: center;
}

.text-5 {
    align-items: center;
    display: flex;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.14;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
    margin: -1.00rem auto 0;
    font-size: 18rem;
}

.frame-105 {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 10rem;
position: relative;
width: 100%;
}
@keyframes star-pin-action-slow {
  0% { transform: scale(1); }
  20% { transform: scale(1.2); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

.comment_li-5:nth-child(even) .imgicon_badge{
    animation-delay: 2s;
}

.lp-comment {
align-items: flex-start;
align-self: stretch;
background-color: #EBF6FF;
border-radius: 20rem;
display: flex;
flex: 0 0 auto;
gap: 10rem;
margin-top: -20rem;
padding: 30rem 24rem 20rem;
position: relative;
width: 100%;
z-index: 0;
}

.text-6 {
    flex: 1;
    letter-spacing: 0;
    line-height: 1.68;
    position: relative;
}

@media (min-width: 768px) {
    .heading-2{
        padding-bottom: 30rem;
    }
    .text-5 {
        line-height: 1;
        margin: 0;
        font-size: 24rem;
    }

    .frame-105 {
        gap: 24rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-comment {
        margin-top: 20rem;
        padding: 20rem 24rem;
    }
    .lp-comment::before{
        content: "";
        position: absolute;
        top: -16rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 16rem;
        height: 16rem;
        background-image: url(../img/parts_bubble.webp);
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .text-6 {
        line-height: 1.8;
    }
}

@keyframes star-pin-action {
0% {
    opacity: 0;
    transform: scale(0) rotateZ(-360deg);
}
70% {
    opacity: 1;
    transform: scale(1.2) rotateZ(20deg);
}
85% {
    transform: scale(0.9) rotateZ(-10deg);
}
100% {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
}
}
@keyframes star-pin-action-loop {
0% {
    opacity: 0;
    transform: scale(0) rotateZ(-360deg);
}
25% {
    opacity: 1;
    transform: scale(1.2) rotateZ(20deg);
}
35% {
    transform: scale(0.9) rotateZ(-10deg);
}
45% {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
}

100% {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
}
}

@media (min-width: 768px) {

}

.frame-3 {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-grow: 1;
    padding: 50rem 0;
    position: relative;
    width: 100%;
}

@keyframes star-pop-in {
0% {
    transform: scale(0) rotateZ(-360deg);
}
70% {
    opacity: 1;
    transform: scale(1.3) rotateZ(20deg);
}
85% {
    transform: scale(0.9) rotateZ(-10deg);
}
100% {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
}
}
.animate-enter-star {
    position: absolute;
    z-index: 5;
    top: 38rem; 
    left: 0rem;
    width: 60rem;
    height: auto;
}
.animate-enter-star.is_visible{
    animation: star-pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s 1 normal forwards;
    transform-origin: center center;
}
@keyframes vibration {
  0% { transform: translate(0, 0) rotate(0deg); }
  5% { transform: translate(-5rem, -3rem) rotate(-2deg); }
  10% { transform: translate(4rem, 2rem) rotate(2deg); }
  15% { transform: translate(-4rem, 4rem) rotate(-1deg); }
  20% { transform: translate(5rem, -2rem) rotate(3deg); }
  25% { transform: translate(-2rem, 5rem) rotate(-2deg); }
  30% { transform: translate(4rem, -4rem) rotate(1deg); }
  35% { transform: translate(-5rem, 2rem) rotate(-3deg); }
  40% { transform: translate(3rem, -5rem) rotate(2deg); }
  45% { transform: translate(-4rem, 3rem) rotate(-1deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  55% { transform: translate(5rem, 4rem) rotate(3deg); }
  60% { transform: translate(-3rem, -4rem) rotate(-2deg); }
  65% { transform: translate(4rem, 5rem) rotate(1deg); }
  70% { transform: translate(-5rem, -2rem) rotate(-3deg); }
  75% { transform: translate(2rem, 4rem) rotate(2deg); }
  80% { transform: translate(-4rem, -5rem) rotate(-1deg); }
  85% { transform: translate(5rem, 3rem) rotate(3deg); }
  90% { transform: translate(-2rem, -4rem) rotate(-2deg); }
  95% { transform: translate(4rem, 2rem) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes periodic {
0%, 80% { transform: translate(0, 0) rotate(0deg); }
82%, 86%, 90%, 94%, 98% { transform: translate(2rem, 1rem) rotate(2deg); }
84%, 88%, 92%, 96%, 100% { transform: translate(-2rem, -1rem) rotate(-0.2deg); }
}

@keyframes cloud-puwan {
    0% {
        transform: scale(0.5) translateY(40rem);
    }
    60% {
        transform: scale(1.1) translateY(-10rem);
    }
    80% {
        transform: scale(0.95) translateY(5rem);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

.imgpoint03_babble.is_visible {
    animation: cloud-puwan 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.imgpoint03_babble-a.is_visible {
    animation-delay: 0.1s;
}
.imgpoint03_babble-b.is_visible {
    animation-delay: 0.3s;
}
.imgpoint03_babble-c.is_visible {
    animation-delay: 0.5s;
}

@media(min-width: 768px) {

    .frame-3 {
        padding: 120rem 0rem 220rem;
    }

    .animate-enter-star {
        left: calc(50% - 460rem);
        width: 84rem;
        top: 106rem;
    }
}
.point03 {
    align-items: flex-start;
    align-self: stretch;
    background-color: #B0F5F2;
    display: flex;
    flex: 0 0 auto;
    padding: 0rem 20rem;
    position: relative;
    width: 100%;
}

.campaign1 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding: 40rem 0rem 0rem;
    position: relative;
    width: 100%;
}

.birthday_under13_sp {
    position: relative;
    width: 350rem;
}

.image-30 {
    display: block;
    opacity: 0;
    position: relative;
    transform: scale(1.1);
    width: 350rem;
}
.animate-enter22{
    opacity: 1 !important;
}
.animate-enter22.is_visible {
    animation: animate-enter22-frames 0.20s ease-in-out 0.4s 1 normal forwards;
}

@keyframes animate-enter22-frames {
from{
transform: scale(1.1);
}
to{
transform: scale(1);
}
}

.link {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 20rem;
    padding: 20rem 0rem 0rem;
    position: relative;
    width: 100%;
}

.point03_invitation_sp.animate-enter23 {
    animation: bubble-ping-bounce 4s ease-in-out infinite;
    display: block;
    opacity: 1 !important;
    transform: scale(0.9);
}

.btn_tirtiary {
    align-items: center;
    background-color: var(--Accent);
    border-radius: 50rem;
    box-shadow: 0rem 15rem 25rem #39464c40;
    display: flex;
    gap: 10rem;
    height: 40rem;
    justify-content: center;
    padding: 0rem 6rem 0rem 30rem;
    position: relative;
    width: 180rem;
    text-decoration: none;
    transition: 0.3s ease;
}
.btn_tirtiary:hover {
    background-color:#CC2910;
    box-shadow: 0 25rem 30rem 0 rgba(57, 71, 77, 0.25);
}

.text-10 {
flex: 1;
letter-spacing: 0;
line-height: 14rem;
position: relative;
text-align: center;
}

.icon-2 {
align-items: center;
aspect-ratio: 1;
background-color: var(--white);
border-radius: 50rem;
display: flex;
flex-direction: column;
height: 28rem;
justify-content: center;
padding: 0rem 10rem;
position: relative;
width: 28rem;
}

.icn_arrow-1 {
margin-left: -6.00rem;
margin-right: -6.00rem;
}

.campaign2 {
align-items: center;
align-self: stretch;
display: flex;
flex: 0 0 auto;
flex-direction: column;
padding: 40rem 0rem 60rem;
position: relative;
width: 100%;
}

.frame-133 {
display: flex;
align-items: flex-end;
flex: 0 0 auto;
gap: 10rem;
justify-content: center;
opacity: 0;
padding: 0rem 0rem 20rem;
position: relative;
transform: translate(0, 25rem);
}

.frame-133.animate-enter24 {
animation: animate-enter24-frames 0.20s ease-in-out 0.4s 1 normal forwards;
opacity: 0;
transform: translate(0, 25rem);
}

@keyframes animate-enter24-frames {
from{opacity: 0;
transform: translate(0, 25rem);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.rectangle-301 {
transform: rotate(-30.00deg);
}

.text-24 {
color: var(--plantation);
font-family: var(--font-family-rounded_mplus_1c-extrabold);
font-size: var(--font-size-xl);
font-weight: 800;
letter-spacing: 1.00rem;
    line-height: 1;
margin-top: -1.00rem;
position: relative;
white-space: nowrap;
width: fit-content;
}

.rectangle-300 {
transform: rotate(30.00deg);
}

.point03_invitationcard_sp {
display: block;
opacity: 0;
position: relative;
transform: scale(0.9);
width: 350rem;
}

.point03_invitationcard_sp.animate-enter25 {
animation: animate-enter25-frames 0.20s ease-in-out 0.4s 1 normal forwards;
display: block;
opacity: 0;
transform: scale(0.9);
}

@keyframes animate-enter25-frames {
    from{opacity: 0;
    transform: scale(0.9);
    }
    to{opacity: 1;
    transform: scale(1);
    }
}

.annotation {
align-self: stretch;
display: flex;
padding: 20rem 0rem 0rem;
width: 100%;
}

.text-25 {
flex: 1;
letter-spacing: 0;
    line-height: 1.5;
margin-top: -1.00rem;
position: relative;
}

.point03_invitation_sp-1 {
    width: 260rem;
}

.point03_invitation_sp-1.animate-enter26 {
    animation: bubble-ping-bounce 4s ease-in-out infinite;
display: block;
opacity: 1 !important;
transform: scale(0.9);
}

@media(min-width: 768px) {
    .campaign1 {
        padding: 40rem 0rem 0rem;
        max-width: 996rem;
        margin: 0 auto;
    }
    .birthday_under13_sp {
        position: relative;
        width: 100%;
    }
    .image-30 {
        width: 100%;
        max-width: 660rem;
    }
    .campaign2 {
        padding: 80rem 0 0;
        max-width: 840rem;
        margin: 0 auto;
    }
    .text-24 {
        font-size: 32rem;
        letter-spacing: 1.06rem;
    }
    .rectangle-300 {
    transform: rotate(30.00deg);
    }
    .frame-133 {
        gap: 18rem;
    }
    .point03_invitationcard_sp {
        width: 100%;
        max-width: 840rem;
        margin: 0 auto;
    }
    .annotation {
        width: fit-content;
        margin: 0 auto;
    }

    .point03_invitation_sp-1 {
        width: 280rem;
    }

}

.text-12 {
align-self: stretch;
letter-spacing: 0;
    line-height: 1.5;
position: relative;
}

.text-13 {
letter-spacing: 0;
    line-height: 1.43;
margin-top: -1.00rem;
position: relative;
white-space: nowrap;
width: fit-content;
}

.break {
align-items: flex-start;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 39 / 14;
margin-top: -20rem;
}

.break_sp {
aspect-ratio: 2.79;
object-fit: cover;
position: relative;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
object-fit: cover;
}

.h2-1 {
display: inline-flex;
gap: 10rem;
}

.imgpoints_title {
display: block;
height: 22rem;
opacity: 0;
position: relative;
transform: rotate(25deg);
width: 138rem;
}

.imgpoints_title.animate-enter28 {
animation: animate-enter28-frames 0.20s ease-in-out 0.4s 1 normal forwards;
display: block;
opacity: 0;
transform: rotate(25deg);
}

@keyframes animate-enter28-frames {
from{opacity: 0;
transform: rotate(25deg);
}
to{opacity: 1;
transform: rotate(0);
}
}

.text-35 {
color: var(--plantation);
font-family: var(--font-family-zen_kaku_gothic_new);
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0;
line-height: 14rem;
position: relative;
text-align: center;
white-space: nowrap;
width: fit-content;
}

.imgotherpoints_title {
    display: block;
    opacity: 0;
    position: relative;
    transform: translate(0, 25rem);
    width: 60rem;
    line-height: 1;
    margin: 12rem auto 0;
}

.imgotherpoints_title.animate-enter29 {
animation: bubble-ping-bounce 4s ease-in-out infinite;
opacity: 1 !important;
transform: translate(0, 25rem);
}

@keyframes animate-enter29-frames {
    from{opacity: 0;
    transform: translate(0, 25rem);
    }
    to{opacity: 1;
    transform: translate(0,0);
    }
}
.open.is-open{
    padding-top: 80rem;
    padding-bottom: 40rem;
}

@media(min-width: 768px) {
    .break {
        aspect-ratio: 1512 / 400;
        width: 100%;
        height: 100%;
    }
    .break_sp{
        width: 100%;
        height: 100%;
        z-index: 10000;
    }

    .open.is-open{
        padding: 80rem 36rem 40rem;
    }
    .imgpoints_title {
        display: block;
        height: 22rem;
        opacity: 0;
        position: relative;
        transform: rotate(25deg);
        width: 138rem;
    }
}

.restaurant {
align-items: flex-start;
align-self: stretch;
background-color: #EBF6FF;
display: flex;
flex: 0 0 auto;
padding: 0rem 20rem;
position: relative;
width: 100%;
}

.h3-3 {
align-items: center;
align-self: stretch;
gap: 20rem;
justify-content: center;
padding: 0rem 0rem 30rem;
}

.text-14 {
color: #0883E0;
font-family: var(--font-family-zen_kaku_gothic_new);
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: 0;
    line-height: 1;
margin-top: -1.00rem;
position: relative;
text-align: center;
white-space: nowrap;
width: fit-content;
}

.text-38 {
letter-spacing: 1.40rem;
    line-height: 1.25;
position: relative;
text-align: center;
white-space: nowrap;
width: fit-content;
}

.text-39 {
align-self: stretch;
filter: blur(10rem);
letter-spacing: 0;
    line-height: 1.8;
opacity: 0;
position: relative;
text-align: center;
}

.text-39.animate-enter30 {
animation: animate-enter30-frames 0.20s ease-in-out 0.4s 1 normal forwards;
filter: blur(10rem);
opacity: 0;
}

@keyframes animate-enter30-frames {
from{opacity: 0;
filter: blur(10rem);
}
to{opacity: 1;
filter: none;
}
}

.frame-102 {
align-items: flex-start;
align-self: stretch;
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: 60rem;
padding: 40rem 0rem 0rem;
position: relative;
width: 100%;
}

.block-4 {
display: flex;
}

.h4.animate-enter32.is_visible {
animation: animate-enter32-frames 0.20s ease-in-out 0.4s 1 normal forwards;
transform: translate(0, 25rem);
}

@keyframes animate-enter32-frames {
from{opacity: 0;
transform: translate(0, 25rem);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.animate-enter31.is_visible {
    animation: animate-enter37-frames 0.40s ease-in-out 0.4s 1 normal forwards;
    transform: rotate(25deg);
}

.ellipse-71 {
border-radius: 9.33rem;
height: 19rem;
left: 11rem;
top: 11rem;
width: 19rem;
}

.frame {
    display: flex;
    flex-direction: column;
    gap: 20rem;
    padding: 30rem 0rem 0rem;
    position: relative;
    width: 100%;
}

.image-5 {
    border-radius: 20rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.point04_spot1-a {
aspect-ratio: 1;
width: 100%;
}

.frame-1 {
display: flex;
flex-direction: column;
gap: 20rem;
position: relative;
width: 100%;
}

.point04_spot1-b {
align-self: stretch;
aspect-ratio: 2.24;
display: block;
filter: blur(10rem);
opacity: 0;
width: 100%;
}

.point04_spot1-b.animate-enter33 {
animation: animate-enter33-frames 0.20s ease-in-out 0.4s 1 normal forwards;
display: block;
filter: blur(10rem);
opacity: 0;
}

@keyframes animate-enter33-frames {
from{opacity: 0;
filter: blur(10rem);
}
to{opacity: 1;
filter: none;
}
}

.block-5 {
display: flex;
}

.h4-1 {
display: inline-flex;
}
.icn_spot-4.animate-enter31.is_visible {
    animation: animate-enter37-frames 0.40s ease-in-out 0.4s 1 normal forwards;
    transform: rotate(25deg);
}
.icn_spot-4.animate-enter34.is_visible {
animation: animate-enter37-frames 0.40s ease-in-out 0.4s 1 normal forwards;
opacity: 0;
transform: rotate(25deg);
}

.point04_spot2-b {
aspect-ratio: 2.24;
display: block;
opacity: 0;
}

.point04_spot2-b.animate-enter36 {
animation: animate-enter36-frames 0.20s ease-in-out 0.4s 1 normal forwards;
display: block;
opacity: 0;
}

@keyframes animate-enter36-frames {
from{opacity: 0;
}
to{opacity: 1;
}
}

.point05 {
background-color: #B0F5F2;
position: relative;
width: 100%;
}

.h3-4 {
align-items: center;
align-self: stretch;
gap: 20rem;
justify-content: center;
padding: 0rem 0rem 30rem;
}

.text-45 {
letter-spacing: 1.40rem;
    line-height: 1.25;
position: relative;
text-align: center;
width: fit-content;
}

.frame-102-1 {
    display: flex;
    flex-direction: column;
    gap: 60rem;
    padding: 40rem 0rem;
    position: relative;
    width: 100%;
}

.block-6 {
display: flex;
}

.h4-2 {
opacity: 0;
transform: translate(0, 25rem);
}

.h4-2.animate-enter38 {
animation: animate-enter38-frames 0.20s ease-in-out 0.4s 1 normal forwards;
opacity: 0;
transform: translate(0, 25rem);
}

@keyframes animate-enter38-frames {
from{opacity: 0;
transform: translate(0, 25rem);
}
to{opacity: 1;
transform: translate(0,0);
}
}

@keyframes animate-enter37-frames {
0% {
    opacity: 0;
    transform: translateY(-50rem) rotate(25deg) scale(0.5);
}
60% {
    opacity: 1;
    transform: translateY(5rem) rotate(0deg) scale(1.1, 0.9);
}
80% {
    transform: translateY(-10rem) rotate(0deg) scale(0.9, 1.1);
}
100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
}
}

.icn_spot-4.animate-enter37.is_visible {
animation: animate-enter37-frames 0.40s ease-in-out 0.4s 1 normal forwards;
transform-origin: bottom center;
}

.point05_spot {
aspect-ratio: 458 / 200;
object-fit: cover;
position: relative;
width: 100%;
}

.block-7 {
display: flex;
}

.h4-3 {
display: inline-flex;
}

.icn_spot-4.animate-enter39.is_visible {
animation: animate-enter37-frames 0.40s ease-in-out 0.4s 1 normal forwards;
transform: rotate(25deg);
}
.voice-1 {
    opacity: 0;
    transform: translate(0, 25rem);
    width: 100%;
    margin: 0 auto 40rem;
}

.voice-1.animate-enter40 {
animation: animate-enter40-frames 0.40s ease-in-out 0.00s 1 normal forwards;
display: flex;
}

@keyframes animate-enter40-frames {
from{opacity: 0;
transform: translate(0, 25rem);
}
to{opacity: 1;
transform: translate(0,0);
}
}

@media(min-width: 768px) {
    .block-5 .text-25{
        width: 100%;
        padding-top: 20rem;
    }
    .text-35 {
        font-size: 24rem;
        line-height: 1;
    }
    .h2-1{
        gap: 20rem;
        padding-bottom: 60rem;
    }

    .imgpoints_title.animate-enter28{
        width: 276rem;
        height: auto;
    }
    .imgotherpoints_title.animate-enter29{
        width: 140rem;
        height: auto;
    }
    .h3-3 {
        padding: 0rem 0rem 60rem;
    }

    .text-14 {
        font-size: 24rem
    }
    .point05 .text-12{
        font-size: 18rem;
        line-height: 1.8;
    }

    .text-38 {
        font-size: 44rem;
        font-weight: 800;
        line-height: 1
    }

    .text-39 {
        font-size: 28rem;
        line-height: 1.8;
    }
    .point04__content{
        max-width: 840rem;
        margin: 0 auto;
        padding: 120rem 20rem 80rem;
    }

    .frame {
        flex-direction: row;
        gap: 60rem;
        padding: 40rem 0rem 0rem;
    }
    .image-5{
        max-width: 282rem;
    }
    .icn_spot-4{
        width: 60rem;
        height: auto;
    }

    .point04_spot1-a {
        aspect-ratio: 1;
        width: 100%;
    }
    .frame-1 {
        display: flex;
        flex-direction: column;
        gap: 20rem;
        position: relative;
        width: 100%;
    }
    .ellipse-71{
        border-radius: 50%;
        left: 15rem;
        top: 15rem;
        width: 30rem;
        height: auto;
    }
    .spot_name{
        font-size: 24rem;
        line-height: 1.25;
    }
    .h4-4 {
        padding: 20rem 30rem 20rem 70rem;
    }
    .h4-1 {
    display: inline-flex;
    }

    .point05 .frame-3{
        padding: 80rem 20rem;
    }
    .point05 .text-14{
        font-size: 24rem;
        line-height: 1;
    }
    .point05 .text-45{
        font-size: 44rem;
        font-weight: 800;
        line-height: 1;
    }
    .point05 .text-13{
        font-size: 22rem;
    }
    .frame-102-1{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 80rem;
        max-width: 996rem;
    }
    .voice-1 {
        padding: 50rem 40rem 40rem;
        max-width: 1208rem;
        margin: 0 auto;
    }
    .point05 .heading-2{
        padding-bottom: 30rem;
    }
    .point05 .frame-105 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24rem;
    }
    .frame-102-1 {
        padding-bottom: 80rem;
    }
}

.annotation-3 {
align-items: center;
flex: 0 0 auto;
justify-content: center;
position: relative;
}

.block-8 {
align-items: center;
align-self: stretch;
flex: 0 0 auto;
flex-direction: column;
position: relative;
width: 100%;
}

.comment_li-5 {
align-items: center;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}

.detail-2 {
align-items: flex-start;
align-self: stretch;
display: flex;
flex: 0 0 auto;
padding: 0;
position: relative;
width: 100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
opacity: 0;
}

.ellipse {
aspect-ratio: 1;
background-color: var(--white);
position: relative;
}

.h2-3 {
display: flex;
align-items: center;
flex: 0 0 auto;
flex-direction: column;
position: relative;
justify-content: center;
}

.h3-6 {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.h4-4 {
    align-items: center;
    background-color: var(--white);
    border-radius: 20rem;
    flex: 0 0 auto;
    padding: 20rem 30rem;
    position: relative;
}

.google-map {
    aspect-ratio: 13 / 8;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
@media (min-width: 768px) {
    .access .frame-3{
        padding: 120rem 0 80rem;
    }

        .frame-84 {
        align-items: center;
        align-self: stretch;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 20rem;
        padding: 60rem 0rem 0rem;
        position: relative;
        width: 100%;
        }

        .frame-128 {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        gap: 10rem;
        justify-content: center;
        position: relative;
        }

        .text-58 {
        letter-spacing: 0;
        line-height: 24rem;
        margin-top: -1.00rem;
        position: relative;
        text-align: center;
        width: fit-content;
        font-size: 18rem;
        }

        .imginfluencer_arrow {
        aspect-ratio: 1;
        height: 28rem;
        position: relative;
        width: 28rem;
        bottom: -2rem
        }

        .tickets {
        align-items: flex-start;
        align-self: stretch;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        padding: 0rem 20rem;
        position: relative;
        width: 100%;
        }

        .access .frame{
            padding: 120rem 0 80rem;
        }

        .access .h2-3{
            padding-bottom: 60rem;
        }

        .detail {
        flex-direction: column;
        gap: 50rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        }

        .google-map {
        aspect-ratio: 1514 / 480;
        position: relative;
        width: 100%;
        height: 100%;
        }
        .google-map iframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 1.62;
        }

        .hotel .frame{
            padding-top: 40rem;
            padding-bottom: 20rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .footer {
        align-self: stretch;
        flex: 0 0 auto;
        position: relative;
        width: 100%;
        }

        .annotation-3 {
        align-items: center;
        flex: 0 0 auto;
        justify-content: center;
        position: relative;
        }

        .comment_li-5 {
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        }

        .detail-2 {
            display: flex;
            position: relative;
            width: 100%;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            opacity: 0;
        }

        .ellipse {
        aspect-ratio: 1;
        background-color: var(--white);
        position: relative;
        }

        .h2-3 {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        flex-direction: column;
        position: relative;
        justify-content: center;
        }

        .h3-6 {
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            position: relative;
            width: 100%;
            padding-bottom: 60rem;

        }

        .h4-4 {
            align-items: center;
            background-color: var(--white);
            border-radius: 20rem;
            flex: 0 0 auto;
            padding: 20rem 30rem;
            position: relative;
        }
        .h4-4 {
            padding: 20rem 30rem 20rem 70rem;
        }
}

.heading-2 {
flex: 0 0 auto;
padding: 0rem 0rem 20rem;
position: relative;
}

.icn_arrow-10 {
height: 20rem;
position: relative;
width: 20rem;
}

.icn_spot-4 {
aspect-ratio: 0.75;
background-image: url(../img/union-8.svg);
background-size: 100% 100%;
height: 53rem;
left: -5rem;
opacity: 0;
position: absolute;
top: -24rem;
transform: rotate(25deg);
width: 40rem;
}
@media(min-width: 768px) {
    .icn_spot-4 {
        height: auto;
        width: 60rem;
    }
}

.imgicon_comment-2 {
background-image: url(../img/icon_comment.svg);
}

.imgicon_comment-3 {
background-image: url(../img/icon_comment.svg);
}

.imgicon_comment-4 {
background-image: url(../img/icon_comment.svg);
}

.imgicon_comment-5 {
    aspect-ratio: 1;
    background-size: 100% 100%;
    height: 80rem;
    position: relative;
    width: 80rem;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
}
@media(min-width: 768px) {
    .imgicon_comment-5 {
        height: 100rem;
        width: 100rem;
    }
    .footer .logo_suzukacircuitpark{
        width: 302rem;
        height: auto;
    }
}

.point03_invitation_sp-2 {
    display: block;
    object-fit: cover;
    opacity: 0;
    position: relative;
    transform: scale(0.9);
    width: 260rem;
}

.point04_spot1 {
object-fit: cover;
position: relative;
}

.point04_spot2 {
align-self: stretch;
object-fit: cover;
position: relative;
width: 100%;
}

.rectangle {
background-color: #0883E0;
height: 20rem;
margin-bottom: -0.59rem;
position: relative;
width: 3rem;
}
@media (min-width: 768px) {
    .rectangle {
        width: 3rem;
        height: 30rem;
    }
    .point03_invitation_sp-2 {
        width: 280rem;
    }
}

@media (min-width: 768px) {
}

.voice-2 {
    align-items: center;
    background-color: var(--white);
    border: 4rem solid;
    border-color: #0883E0;
    border-radius: 40rem;
    flex-direction: column;
    padding: 30rem 20rem 20rem;
    position: relative;
}
@media
(min-width: 768px) {
    .voice-2 {
        padding: 46rem 36rem 60rem;
    }
}

.movie__list{
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    gap: 16rem;
}
.movie__item{
    background-color: var(--White);
    border-radius: 20rem;
    box-shadow: 0rem 15rem 25rem 0rem rgba(57, 71, 77, 0.25);
    padding: 10rem 10rem 15rem;
    color: var(--Dark);
}
.movie__item:last-of-type{
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .movie{
        padding: 120rem 20rem;
        z-index: 25;
    }
    .common-button__link:hover{
        background-color: #FF8C7A;
        color: var(--White);
    }
    .movie__list{
        justify-content: center;
        grid-template-columns: repeat(3 , 1fr);
        max-width: 996rem;
    }
    .movie__item{
        padding: 10rem 20rem 20rem;
    }
}

.no-scroll{
    overflow: hidden;
}
.modal__bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #6D868C;
    z-index: 100;
    opacity: 0.9;
}
.modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    max-width: fit-content;
    border-radius: 10rem;
    z-index: 100;
}
.modal__close-button{
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    top: -30rem;
    right: 10rem;
    cursor: pointer;
}
.modal__close-button::after{
    content: "";
    display: block;
    width: 4rem;
    height: 30rem;
    position: absolute;
    background-color: var(--White);
    transform: rotate(-45deg);
}
.modal__close-button::before{
    content: "";
    display: block;
    width: 4rem;
    height: 30rem;
    position: absolute;
    transform: rotate(45deg);
    background-color: var(--White);
}

.tickets{
    padding: 60rem 20rem;
}
.tickets__content{
    position: relative;
    border: 4rem solid #FF8C7A;
    padding: 36rem 16rem;
    border-radius: 20rem;
    background-color: var(--White);
    max-width: 1200rem;
    margin: 0 auto;
}
.tickets__detail{
    margin-bottom: 30rem;
}
.tickets__title-wrap{
    margin-bottom: 18rem;
}
.tickets__title{
    font: bold 42rem/1 'Kumbh Sans', sans-serif;
    color: #F5654E;
    letter-spacing: 8rem;
    margin-bottom: 20rem;
    text-align: center;
}
.tickets__lead{
    font: bold 20rem/1 'Zen Kaku Gothic New', sans-serif;
    color: var(--Dark);
    margin-bottom: 20rem;
    text-align: center;
}
.tickets__text{
    font: var(--Body);
    color: var(--Dark);
}
.tickets__table{
    border-radius: 20rem;
    overflow: hidden;
}
.tickets__table-title{
    background-color: #FFC0AD;
    font: bold 16rem/1.3 'Zen Kaku Gothic New', sans-serif;
    text-align: center;
    padding: 10rem;
    color: var(--Dark);
}
.tickets__table-list{
    background-color: #FFF5F2;
    padding: 0 15rem 15rem;
}
.tickets__table-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15rem 0;
    border-bottom: 1rem solid #FFC0AD;
}
.tickets__table-item-label{
    font: 500 14rem/1 'Zen Kaku Gothic New', sans-serif;
    color: var(--Dark);
}
.tickets__table-item-value{
    font: bold 20rem/1 'Kumbh Sans', sans-serif;
    color: #F5654E;
}
.tickets__table-annotation{
    color: var(--Dark);
    font: 400 12rem/1.5 'Zen Kaku Gothic New', sans-serif;
    margin-top: 10rem;
}
.hero__link--tickets{
    padding: 23rem;
}
@media (min-width: 768px) {
    .tickets{
        padding: 80rem 20rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .tickets__content{
        padding: 100rem 80rem 60rem;
    }
    .tickets__content::before{
        width: 150rem;
        height: 144rem;
        top: -50rem;
        left: -40rem;
    }
    .tickets__detail{
        margin-bottom: 40rem;
        display: flex;
        justify-content: space-between;
        gap: 62rem;
    }
    .tickets__title-wrap{
        margin-bottom: 0;
        width: 100%;
        margin-right: 0;
    }
    .tickets__table-wrap{
        width: 100%;
        min-width: 420rem;
    }
    .tickets__table{
        width: 100%;
    }
    .tickets__title{
        font: bold 76rem/1 'Kumbh Sans', sans-serif;
        letter-spacing: 15rem;
        margin-bottom: 40rem;
        text-align: start;
    }
    .tickets__lead{
        font: bold 28rem/1 'Zen Kaku Gothic New', sans-serif;
        margin-bottom: 30rem;
        text-align: start;
    }
    .tickets__table-title{
        font: bold 22rem/1 'Zen Kaku Gothic New', sans-serif;
        padding: 20rem 18rem;
    }
    .tickets__table-list{
        padding: 0 25rem 15rem;
    }
    .tickets__table-item{
        padding: 20rem 0;
    }
    .tickets__table-item-label{
        font: 500 16rem/1 'Zen Kaku Gothic New', sans-serif;
    }
    .hero__link--tickets{
        padding: 25rem 23rem;
    }
    .tickets__text{
        font-size: 18rem;
    }
}

.banner{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 994rem;
    max-height: 90rem;
    padding: 0 10rem;
    z-index: 100;
    background: rgba(165, 188, 194, 0.80);
    opacity: 0;
    transition: all 0.3s ease;
    margin: 0 auto;
}
.banner--active{
    opacity: 1;
}
.banner__link--bd{
    display: block;
    height: 100%;
}
.banner__link--bd::after{
    content: '';
    display: block;
    height: 90rem;
    width: 140rem;
    background-image: url(../img/float-birthday-banner_sp.webp);
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.3s ease;
}
.banner__link-wrap{
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
}
.banner__link{
    display: flex;
    flex-direction: column;
    align-items: center;
    font: bold 20rem/1 'Zen Kaku Gothic New', sans-serif;
    color: var(--White);
    position: relative;
    background-color: #F5654E;
    padding: 16rem;
    padding-right: 43rem;
    border-radius: 10rem;
    border: 4rem solid #FFF5F2;
    transition: all 0.3s ease;
    flex-grow: 1;
}
.banner__link .icon{
    width: 28rem;
    height: 28rem;
    position: absolute;
    right: 6rem;
    flex-shrink: 0;
    padding: 0;
    top: 17rem;
}
.hero__link-span{
    font-size: 11rem;
    margin-bottom: 5rem;
}
.scroll-top__button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rem;
    height: 40rem;
    box-shadow: 0rem 10rem 20rem 0rem rgba(57, 71, 77, 0.25);
    background-color: var(--White);
    border-radius: 100rem;
    position: absolute;
    top: -60rem;
    right: 10rem;
}
.scroll-top__button::before{
    content: "";
    display: block;
    width: 11rem;
    height: 17rem;
    background-image: url(../img/icon_orange-right-arrow.webp);
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(-90deg);
    margin-bottom: 2rem;
    position: relative;
    top: 0rem;
    transition: all 0.3s ease;
}
@media (min-width: 768px) {
    .banner{
            border-radius: 20rem 20rem 0 0;
            max-height: 120rem;
            padding: 20rem;
            padding-left: 13rem;
    }
    .banner__link-wrap{
        align-items: end;
    }
    .banner__link{
        justify-content: center;
        font: bold 30rem/1 'Zen Kaku Gothic New', sans-serif;
        padding: 13rem;
        max-width: 586rem;
        position: relative;
    }
    .banner__link .icon{
        position: absolute;
        right: 16rem;
        width: 48rem;
        height: 48rem;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
    .banner__link--bd{
        height: auto;
    }
    .banner__link--bd::after{
        width: 240rem;
        height: 92rem;
    }
    .hero__link-span{
        display: block;
        font-size: 13rem;
        margin-bottom: 5rem;
    }
    .banner__link-span{
        margin-bottom: 5rem;
        margin-right: 10rem;
        font-size: 16rem;
    }
    .scroll-top__button{
        top: -20rem;
        right: 20rem;
        transition: all 0.3s ease;
    }
    .scroll-top__button:hover{
        background-color: #FF8C7A;
    }
    .scroll-top__button:hover::before{
    }
}

.frame-84 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 20rem;
    padding: 48rem 0rem 0rem;
    position: relative;
    width: 100%;
}
.text-58 {
    letter-spacing: 0;
    line-height: 24rem;
    margin-top: -1.00rem;
    position: relative;
    text-align: center;
    width: fit-content;
}

.zenkakugothicnew-medium-plantation-16px {
    color: var(--plantation);
    font-family: var(--font-family-zen_kaku_gothic_new);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

[show-on-scroll] {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.is_visible{
      visibility: visible !important;
}

.accsess__detail-body .accsess__detail-text {
    margin-top: 30rem;
}
@media (min-width: 768px) {
    .accsess__detail-body .accsess__detail-text {
        margin-top: 40rem;
    }
}
.accsess__detail-title {
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    border-radius: 10rem;
    background-color: #fff;
}
.accsess__detail-title-icon {
    position: relative;
    display: block;
    width: 20rem;
    height: 20rem;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 10rem;
    box-sizing: content-box;
}
.accsess__detail-title-icon::before,
.accsess__detail-title-icon::after {
    content: "";
    position: absolute;
    background-color: var(--Accent);
}
.accsess__detail-title-icon::before {
    width: 4rem;
    height: 18rem;
    top: 0;
    right: 17rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: rotate(90deg);
}
.accsess__detail-title-icon::after {
    width: 4rem;
    height: 18rem;
    top: 0;
    right: 15rem;
    transform: translateX(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.accsess__detail.is-open .accsess__detail-title-icon::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}
.accsess__detail-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 20rem;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
.accsess__detail.is-open .accsess__detail-body {
    opacity: 1;
}
@media (min-width: 768px) {
    .accsess__detail-title {
        margin-bottom: 0;
    }
    .accsess__detail-body {
        padding-top: 30rem;
    }
}