.sp_box{
    max-width: 480px;
    width: 100%;
    overflow-x: hidden;
    margin: 0 auto;
    background: url(../images/sp_bg.jpg) repeat-y;
    height: auto;
}


@media (min-width: 481px) {
    .pc_box{
        background: url(../images/pc_bg.jpg) fixed;
    }
}

.w100{
    width: 100%;
}

.btn_mall{
max-width: 180px;
display: block;
width: 75%;
margin: 0 auto;
border-radius: 6px;
}

.btn_mall .btn {
display: inline-block;
font-weight: bold;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem 2rem;
font-size: 18px;
width: 180px;
border-radius: 6px;
}
.btn_mall .btn.btn-light {
display: block;
color: #fff;
background-color: #f18d00;
border-color: #f18d00;
border: solid 2px #fff;
box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.2);
}


.inbox_bg>.btn_mall{
max-width: 180px;
display: block;
margin: 0 auto 30px;
width: 75%;
}

.price_txt{
    width: 78.125%;
    margin: 0 auto 3%;
}


.promo_movie_box {
width: 90%;
max-width: 980px;
margin: 0 auto 30px;
}

#contents .youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
#contents .youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}



/* mainvisualここから */
.mainvisual{
    background: url(../images/main_bg.jpg) no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 3%;
}

.main_dot{
    position: absolute;
    animation: fade_in 1.5s forwards;
}

.main_logo{
    display: flex;
    justify-content: space-between;
    margin: 0 3%;
}

.logo_left{
    width: 21.02040816%;
}

.logo_right{
    width: 21.02040816%;
}

.main_jiten_text2{
    width: 45%;
    margin: -9%;
    position: absolute;
    right: 0;
}

.main_pc_logo{
    width: 90%;
    margin: 0 auto;
    opacity: 0;
    animation: main_pc_img_anime 0.8s forwards;
    animation-delay: 2.4s;
}

.main_middle_box{
    display: flex;
}

.main_bottom_box{
    margin-top: -8%;
    position: relative;
    z-index: 4;
}

.main_pc_box{
    width: 100%;
}

.main_pc_img{
    position: absolute;
    z-index: 1;
    width: 75%;
    top: 28%;
    right: 0;
    animation: main_pc_img_anime 0.8s forwards;
    animation-delay: 2.4s;
    opacity: 0;
}

.main_6inch_img{
    width: 25%;
    position: absolute;
    top: -3%;
    right: 3%;
}

.main_jiten_text1{
    opacity: 0;
    animation: main_jiten_text_slide_in 0.5s forwards;
    animation-delay: 0.5s;
}

.main_jiten_text2{
    opacity: 0;
    animation: main_jiten_text_slide_in 0.5s forwards;
    animation-delay: 0.8s;
}


 @keyframes main_jiten_text_slide_in {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


.main_jiten_texts1{
    position: absolute;
    width: 70%;
    left: 20%;
    z-index: 4;
    animation: main_jiten_text_anime 1.5s forwards;
    animation-delay: 1.5s;
}
 @keyframes main_jiten_text_anime{
    60%{
        transform: scale(1) translateX(0) rotate(3deg);
        opacity: 1;
    }
    100%{
        transform: scale(0) translateX(0) translateY(150%) rotate(-30deg);
        transform-origin: right center;
        opacity: 0;
    }
 }

 .main_jiten_img {
    opacity: 0;
    transform: scale(0) translateX(0) translateY(50%); /* 初期状態を追加 */
    animation: main_jiten_img_inanime 1.5s forwards;
}

@keyframes main_jiten_img_inanime {
    0% {
        transform: scale(0) translateX(0) translateY(50%);
        opacity: 0;
        transform-origin: center;
    }
    100% {
        transform: scale(1) translateX(0) translateY(50%);
        opacity: 1;
    }
}

.main_jiten_anime1 {
    position: absolute;
    width: 50%;
    top: 3%;
    left: 20%;
    animation: main_jiten_anime 1.5s forwards;
    animation-delay: 1.5s;
}

@keyframes main_jiten_anime {
    0% {
        transform: scale(1) translateX(0) rotate(0deg); /* 追加: 初期状態を明示 */
        transform-origin: right center;
    }
    60% {
        transform: scale(1) translateX(0) rotate(3deg);
        opacity: 1;
        transform-origin: right center;
    }
    100% {
        transform: scale(0) translateX(0) translateY(150%) rotate(-30deg);
        transform-origin: right center;
        opacity: 0;
    }
}

.main_last_fade_in{
    opacity: 0;
    animation: fade_in 2s forwards;
    animation-delay: 3.1s;
}

.jiten_last_anime{
    width: 100%;
    opacity: 0;
    animation: jiten_last_anime 1s ease forwards;
    animation-delay: 3.5s;
    z-index: 4;
}

.main_jiten_img2{
    width: 73%;
    position: relative;
    z-index: 2;
}

@keyframes main_pc_img_anime{
    0%{
        transform: translateX(20%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade_in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes jiten_last_anime{
    0%{
        transform: translateX(80%) translateY(-50px) rotate(30deg);
        opacity: 0;
    }
    40%{
        transform: translateX(10%) rotate(-15deg);
        transform-origin: left bottom;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
        transform-origin: left bottom;
    }
}

/* -------------------------------------------------------------------- */

.price{
    background-color: #0680bb;
    padding: 5% 0;
    width: 100%;
}

.slick-slide {
    transition: transform 0.3s;
    padding: 0 8px; /* スライド間の隙間を確保 */
}

@media (max-width: 375px) {
    .slick-slide {
        padding: 0 4px;
    }
}

.slick-center {
    z-index: 1; /* 拡大時に他のスライドの上に表示 */
}
.slick-list {
    overflow: visible; /* 拡大時にスライドが隠れないようにする */
}
.slider .slick-center.scale-up {
    transform: scale(1.2);
}

.Instructions_btn{
    width: 45.41666667%;
    margin: 0 auto;
}

.Instructions_btn:hover{
    opacity: 0.8;
}




/* area1ここから */

.area_1_title{
    width: 58.02083333%;
    margin: 0 auto;
}

.video{
    width: 66.12244898%;
    height: 196px;
    margin: 1% auto 0;
    background-color: #fff;
}

.inch_box{
    position: relative;
}

.area_1_title2{
    width: 91.77083333%;
    position: absolute;
    top: 8%;
    left: 9%;
    z-index: 3;
}

.area_1_img1{
    width: 83.22916667%;
    margin: 0 auto;
    padding-top: 20%;
}

/* -------------------------------------------------------------------- */



/* area2ここから */

.area_2_bg{
    background-color: rgba(255, 162, 145, 0.5);
    padding: 5% 0;
}

.language_area{
    width: 95.52083333%;
    display: flex;
    position: relative;
}

.language_area_bg{
    position: absolute;
    z-index: 1;
    top: 2%;
    width: 77.5%;
}

.language_area_text{
    position: relative;
    z-index: 3;
    width: 105%;
    padding-left: 10%;
    margin-top: -6%;
}

.language_area_img{
    position: relative;
    z-index: 2;
}

.area_2{
    width: 89.58333333%;
    background: url(../images/jiten_bg.png) no-repeat;
    background-size: cover;
    background-repeat: round;
    margin: 0 auto;
    padding-bottom: 30px;
}

.area_2_title{
    width: 59.53488372%;
    padding-left: 5%;
    position: relative;
    margin-top: -5px;
    top: -5px;
}

.jiten_infomation{
    width: 50%;
    margin: -3% 0 6% 3%;
}

.jiten_box1{
    position: relative;
}

.area_2_text1{
    width: 62.55813953%;
    margin: 0 27%;
    position: absolute;
    top: 0;
    z-index: 1;
    animation: scale_jiten_text 0.3s forwards;
}

.img1_box{
    display: flex;
    padding-top: 10%;
    margin-left: 10%;
}

.jiten_img1{
    width: 65.23255814%;
    opacity: 0;
}

.animate_jiten_img1{
    animation: anim_left 0.4s forwards;
}

@keyframes anim_left {
    0% {
        transform: scale(0) rotate(-15deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.jiten_arrow1{
    width: 16.51162791%;
    display: flex;
    align-items: flex-end;
}

.jiten_arrow_anime{
    opacity: 0;
    transform-origin: left top;
}


.animate_jiten_arrow_anime{
    animation: anim_arrow 0.5s forwards;
    animation-delay: 0.2s;
}
@keyframes anim_arrow {
    0% {
        transform: scale(0.8) rotate(-30deg);
        opacity: 0;
    }
    50%{
        transform: rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.jiten_text2{
    width: 69.41860465%;
    margin: 0 20%;
}

.jiten_img2{
    width: 82.55813953%;
    margin: 1% auto;
}

.jiten_text3{
    width: 86.74418605%;
    margin: 0 auto 1%;
}

.jiten_box3_imgs ul{
    display: flex;
    justify-content: space-between;
}

.jiten_box3_img{
    width: 31.51162791%;
}

.jiten_box3_img1{
    margin-left: 10px;
}
.jiten_box3_img2{
    animation-delay: 0.3s;
}
.jiten_box3_img3{
    margin-right: 10px;
    animation-delay: 0.6s;
}

.jiten_box4{
    display: flex;
    background-color: rgb(110, 216, 255, 0.5);
    margin: 0 1%;
    padding: 27px 0;
}

.jiten_box4_left{
    width: 40%;
}

.jiten_box4_right{
    width: 50%;
    margin: 0 auto;
}

.jiten_mouse_icon{
    width: 90%;
    margin: 0 auto;
}

.jiten_box4_imgs{
    display: flex;
}

.jiten_img6{
    width: 86.27002288%;
}
.jiten_img7{
    width: 19.45080092%;
    margin-left: 3%;
}

.jiten_text4{
    margin-top: 5%;
}

.jiten_text5{
    width: 86.04651163%;
    margin: 0 auto 2%;
}

.jiten_box5_texts{
    width: 90%;
    margin: 0 auto;
    font-family: "Noto Sans JP", sans-serif;
}

.jiten_red_text{
    color: #e60012;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 3%;
    text-shadow    : 
    2px  2px 1px #fff,
   -2px  2px 1px #fff,
    2px -2px 1px #fff,
   -2px -2px 1px #fff,
    2px  0px 1px #fff,
    0px  2px 1px #fff,
   -2px  0px 1px #fff,
    0px -2px 1px #fff; 
}

.jiten_black_text{
    font-size: 12px;
    font-weight: 600;
}

rt{
    margin-bottom: -0.8%;
}

/* -------------------------------------------------------------------- */



/* area_3ここから */
.area_3_bg{
    background-color: rgba(143, 203, 251, 0.5);
    padding: 5% 0;
}

.chat_title{
    width: 95.52083333%;
    position: relative;
}

.chat_title_bg{
    position: absolute;
    z-index: 1;
    top: 5%;
    width: 92%;
}

.chat_title_text{
    position: relative;
    z-index: 3;
    width: 90%;
    padding-left: 3%;
}

.MT-3{
    margin-top: -3%;
}

.area_3{
    width: 89.58333333%;
    background: url(../images/chat_bg.png) no-repeat;
    background-size: cover;
    background-repeat: round;
    margin: 0 auto;
    padding-bottom: 1%;
}

.area_3_title{
    width: 71.51162791%;
    padding-left: 5%;
    position: relative;
    margin-top: 5px;
    top: -5px;
}

.area_3_contents{
    width: 93.72093023%;
    background: url(../images/chat_content_bg.png);
    background-size: cover;
    display: flex;
    margin:0 0 20px 2%;
    padding:1% 5%;
}

.area_3_contents_text{
    margin-left: 2%;
}

.area_3_content1{
    margin-top: 25px;
}
/* -------------------------------------------------------------------- */



/* area_4ここから */
.area_4_bg{
    background-color: rgba(145, 246, 217, 0.5);
    padding: 5% 0;
}

.area_4{
    width: 89.58333333%;
    background: url(../images/pokemonget_bg.png) no-repeat;
    background-size: cover;
    background-repeat: round;
    margin: 0 auto;
    padding-bottom: 0.8%;
}

.area_4_title{
    width: 59.53488372%;
    padding-left: 5%;
    position: relative;
    margin-top: 5px;
    top: -5px;
}

.area_4_text1{
    margin: 23px 1% 0;
}

.area_4_text2{
    width: 74.88372093%;
    margin-left: 5%;
}

.area_4_img1_box{
    position: relative;
}

.area_4_img1{
    width: 87.79069767%;
    margin:  -3% auto 0;
    opacity: 0;
}

.area_4_img1_2, .area_4_img1_3{
    width: 87.79069767%;
    position: absolute;
    top: 0;
    left: 6%;
    z-index: 2;
}

.area_4_img1_1, .area_4_img1_4{
    width: 87.79069767%;
    position: absolute;
    top: 0;
    left: 6%;
}

.area_4_img1_anime{
    transform: scale(0);
    transform-origin: left top;
}

.animate_area_4_img1_anime{
    animation: area_4_img1_anime 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes  area_4_img1_anime{
    0% {
        transform: scale(0);
        transform-origin: left top;
    }
    100% {
        transform: scale(1);
    }
}

.area_4_img1_anime2{
    transform: scale(0);
    transform-origin: right top;
}

.animate_area_4_img1_anime2{
    animation: area_4_img1_anime2 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes  area_4_img1_anime2{
    0% {
        transform: scale(0);
        transform-origin: right top;
    }
    100% {
        transform: scale(1);
    }
}

.area_4_img1_anime3{
    transform: scale(0);
    transform-origin: left bottom;
}

.animate_area_4_img1_anime3{
    animation: area_4_img1_anime3 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: 0.2s;
}

@keyframes  area_4_img1_anime3{
    0% {
        transform: scale(0);
        transform-origin: left bottom;
    }
    100% {
        transform: scale(1);
    }
}

.area_4_img1_anime4{
    transform: scale(0);
    transform-origin: right bottom;
}

.animate_area_4_img1_anime4{
    animation: area_4_img1_anime4 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: 0.2s;
}

@keyframes  area_4_img1_anime4{
    0% {
        transform: scale(0);
        transform-origin: right bottom;
    }
    100% {
        transform: scale(1);
    }
}


.area_4_arrow{
    width: 13.37209302%;
    position: absolute;
    top: 53%;
    left: 32%;
}

.area_4_cover_box{
    display: flex;
    justify-content: center;
}

.area_4_img2{
    width: 56.97674419%;
}

.area_4_text3{
    width: 43%;
    margin-left: -7%;
    z-index: 1;
    display: flex;
    align-items: center;
}

.area_4_text4_box{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 3%;
}

.area_4_text4{
    width: 60.58139535%;
}

.area_4_ball{
    width: 36.86046512%;
}

.area_4_getimg_box{
    position: relative;
}

.area_4_img3{
    width: 84.06976744%;
    margin:-11% 0 0 8%;
    opacity: 0;
}

.area_4_img3_1, .area_4_img3_2{
    position: absolute;
    top: 0;
    left: 8%;
    width: 84.06976744%;
}

.area_4_img3_1_anime{
    transform: translateX(-10%);
    opacity: 0;
    transform-origin: left center;
}

.animate_area_4_img3_1_anime{
    animation: area_4_img3_1_anime 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes  area_4_img3_1_anime{
    0% {
        transform: translateX(-10%);
        transform-origin: left center;
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        transform-origin: left center;
    }
}

.area_4_img3_2_anime2{
    transform: translateX(-10%);
    opacity: 0;
    transform-origin: left center;
}

.animate_area_4_img3_2_anime2{
    animation: area_4_img3_2_anime2 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes  area_4_img3_2_anime2{
    0% {
        transform: translateX(-10%);
        transform-origin: left center;
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
        transform-origin: left center;
    }
}

.area_4_arrow1{
    width: 21.1627907%;
    position: absolute;
    left: 30%;
    top: 63%;
}

.area_4_text5{
    width: 72.09302326%;
    margin-left: 3%;
}

.area_4_img_4{
    width: 89.18604651%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


.area_4_registration_box{
    width: 98%;
    margin: -20% auto;
    background: url(../images/pokemonget_registration_bg_op0.png) no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding: 100px 0 200px;
    z-index: 1;
    overflow-y: hidden;
}

.area_4_registration_box_bg{
    position: absolute;
}

.area_4_text6{
    position: absolute;
    width: 85.93023256%;
    left: 10%;
    z-index: 1;
    margin-top: 10%;
}

.area_4_img5{
    width: 90.93023256%;
    position: relative;
    margin: 28% auto 65% auto;
}

.area_4_img5_1{
    position: absolute;
    width: 60%;
}

.area_4_img5_2{
    width: 60%;
    position: absolute;
    right: 0;
    top: 60px;
}

.scale_up_rotate{
    opacity: 0;
}

.animate_scale_up_rotate{
    animation: scale_up_rotate 0.5s forwards;
    animation-delay: 0.5s;
}

.scale_up_rotate2{
    opacity: 0;
}

.animate_scale_up_rotate2{
    animation: scale_up_rotate2 0.5s forwards;
    animation-delay: 0.7s;
}

@keyframes scale_up_rotate {
    0% {
        transform: rotate(-20deg);
        opacity: 0;
        transform-origin: right bottom;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
        transform-origin: right bottom;
    }
}

@keyframes scale_up_rotate2 {
    0% {
        transform: rotate(20deg);
        opacity: 0;
        transform-origin: left bottom;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
        transform-origin: left bottom;
    }
}

.area_4_text7{
    margin: 0 1% 0;
    position: relative;
    z-index: 2;
}

.area_4_levelup_box{
    position: relative;
}

.area_4_text8{
    width: 74.65116279%;
    position: absolute;
    z-index: 1;
    margin-left: 3%;
}

.area_4_levelup_imgs{
    position: relative;
    padding-bottom: 30%;
}

.levelup_img1{
    width: 58.13953488%;
    float: right;
    padding-right: 3%;
    margin-top: 13%;
}

.levelup_img2{
    width: 58.13953488%;
    padding-left: 3%;
}

.levelup_img3{
    width: 58.13953488%;
    float: right;
    padding-right: 3%;
    margin-top: 3%;
    position: relative;
    z-index: 1;
}

.levelup_img4{
    width: 58.13953488%;
    position: relative;
    z-index: 4;
    margin-left: 3%;

}

.rotateanime{
    opacity: 0;
    transform: rotate(-15deg);
    transform-origin: left top;
}

.animate_rotateanime{
    animation: rotateanime 0.5s forwards;
}

@keyframes rotateanime {
    0% {
     transform: rotate(-15deg);
     transform-origin: left top;
     opacity: 0;
    }

    100% {
     transform: rotate(0);
     transform-origin: left top;
     opacity: 1;
    }
  }

.rotateanime2{
    opacity: 0;
    transform: rotate(15deg);
    transform-origin: right top;
}

.animate_rotateanime2{
    animation: rotateanime2 0.5s forwards;
}

@keyframes rotateanime2 {
    0% {
     transform: rotate(15deg);
     transform-origin: right top;
     opacity: 0;
    }

    100% {
     transform: rotate(0);
     transform-origin: right top;
     opacity: 1;
    }
  }

.riko_img{
    width: 35%;
    position: absolute;
    top: 19%;
    right: 8%;
}

.roi_img{
    width: 35%;
    position: absolute;
    top: 40%;
    left: 9%;
    z-index: 2;
}

.freed_img{
    width: 90%;
    position: absolute;
    left: 5%;
    bottom: 0;
    z-index: 5;
}

.fade_in{
    opacity: 0;
}

.animate_fade_in{
    animation: fade_in 0.5s forwards;
    animation-delay: 0.3s;
}

@keyframes fade_in {
    0% {
     opacity: 0;
    }

    100% {
     opacity: 1;
    }
  }

.fade_in_delay{
    opacity: 0;
}

.animate_fade_in_delay{
    animation: fade_in_delay 0.5s forwards;
    animation-delay: 0.8s;
}

@keyframes fade_in_delay {
    0% {
     opacity: 0;
    }

    100% {
     opacity: 1;
    }
  }

.area_4_levelup_box{
    position: relative;
}

.area_4_arrow2{
    width: 10.88372093%;
    position: absolute;
    top: 20%;
    left: 31%;
}

.area_4_arrow3{
    width: 9.88372093%;
    position: absolute;
    z-index: 5;
    top: 40%;
    right: 38%;
}

.area_4_arrow4{
    width: 9.88372093%;
    position: absolute;
    bottom: 31%;
    left: 40%;
    z-index: 5;
}

/* arrow_animationここから */
.area_4_arrow_anime{
    opacity: 0;
    transform-origin: left top;
}

.animate_area_4_arrow_anime{
    animation: arrowanime 0.5s forwards;
}

@keyframes arrowanime {
    0% {
        transform: scale(0.8) rotate(30deg);
        opacity: 0;
    }
    50%{
        transform: rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.area_4_arrow_anime2{
    opacity: 0;
    transform-origin: left top;
}

.animate_area_4_arrow_anime2{
    animation: arrowanime2 0.5s forwards;
}

@keyframes arrowanime2 {
    0% {
        transform: scale(0.8) rotate(40deg);
        opacity: 0;
    }
    50%{
        transform: rotate(-10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}


    .area_4_arrow2_anime{
        opacity: 0;
        transform-origin: right top;
    }

   .animate_area_4_arrow2_anime{
        animation: arrowanime_2 0.5s forwards;
   }
   
   @keyframes arrowanime_2 {
        0% {
            transform: scale(0.8) rotate(30deg);
            opacity: 0;
        }
        50%{
            transform: rotate(-5deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
   }

   .area_4_arrow3_anime{
        opacity: 0;
        transform-origin: right top;
    }

   .animate_area_4_arrow3_anime{
    animation: arrowanime_3 0.5s forwards;
   }
   
   @keyframes arrowanime_3 {
        0% {
            transform: scale(0.8) rotate(-30deg);
            opacity: 0;
        }
        50%{
            transform: rotate(5deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
   }

   .area_4_arrow4_anime{
        opacity: 0;
        transform-origin: left top;
    }

   .animate_area_4_arrow4_anime{
    animation: arrowanime_4 0.5s forwards;
   }
   
   @keyframes arrowanime_4 {
        0% {
            transform: scale(0.8) rotate(30deg);
            opacity: 0;
        }
        50%{
            transform: rotate(-5deg);
        }
        100% {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
   }

/* -------------------------------------------------------------------- */

.area_4_legend_box{
    width: 98%;
    margin: -20% auto 0;
    background: url(../images/pokemonget_legend_bg_op0.png) no-repeat;
    background-color:rgba(255,255,255,0.6);
    background-blend-mode:lighten;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    padding: 10% 0;
    position: relative;
}
.area_4_legend_box_bg{
    position: absolute;
}

.area_4_img7{
    width: 98%;
    margin-left: 4%;
    padding-top: 20%;
}

.area_4_text9{
    width: 95%;
    margin: -10% auto 0;
    position: relative;
}
/* -------------------------------------------------------------------- */



/* area_5ここから */
.area_5_bg{
    background-color: rgba(254, 166, 118, 0.5);
    padding: 5% 0;
}

.area_5{
    width: 89.58333333%;
    background: url(../images/Illustrated_bg.png) no-repeat;
    background-size: cover;
    background-position: top center;
    background-repeat: round;
    margin: 0 auto;
    padding-bottom: 10%;
}
.area_5_title{
    width: 63.4375%;
    padding-left: 5%;
    position: relative;
    margin-top: 5px;
    top: -5px;
}

.area_5_text1,.area_5_text2{
    width: 89.65116279%;
    margin: 0 auto;
}

.area_5_img1{
    width: 87.20930233%;
    margin: 1% auto 3%;
}

/* -------------------------------------------------------------------- */



/* area_6ここから */

.area_6_title{
    width: 78.72093023%;
    margin:  0 auto;
}

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 89.58333333%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}


/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    transition: all .5s ease;
    border-radius: 20px;
    z-index: 1; /* 他の要素の上に表示 */
    margin: -10px; /* 背景領域を広げるためにマイナスのマージンを追加 */
    padding: 10px; /* パディングを広げる */
}

.accodion_title_long{
    width: 82%;
}

.accodion_title_short{
    width: 79%;
}

.title_1{
    background-color: rgb(99, 85, 161, 0.5);
}

.title_2{
    background-color: rgb(113, 112, 113, 0.5);
}

.title_3{
    background-color: rgb(227, 0, 127, 0.5);
}

.title_4{
    background-color: rgb(0, 159, 232, 0.5);
}

.title_5{
    background-color: rgb(141, 194, 31, 0.5);
}

.title_6{
    background-color: rgb(242, 150, 0, 0.5);
}

.title_7{
    background-color: rgb(155, 73, 151, 0.5);
}

.title_8{
    background-color: rgb(187, 100, 29, 0.5);
}

.title_9{
    background-color: rgb(141, 194, 31, 0.5);
}

/*アイコンの＋と×*/
.title::before {
    content: url('../images/ac_arrow_close.png');
    position: absolute;
    top: 10%;
    right: 3%;
    transform: scale(0.6);
}

.title::after {
    position: absolute;
    top: 10%;
    right: 3%;
    transform: scale(0.6);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(180deg) scale(0.6);
}

.title.close::after{
  transform: rotate(-180deg) scale(0.6);
}

@media (max-width: 375px) {
    .title::before {
        top: 5%;
        right: 3%;
        transform: scale(0.5);
    }
    
    .title::after {
        top: 0;
        right: 3%;
        transform: scale(0.5);
    }
    /*　closeというクラスがついたら形状変化　*/
    .title.close::before{
      transform: rotate(180deg) scale(0.5);
    }
    
    .title.close::after{
      transform: rotate(-180deg) scale(0.5);
    }
}

@media (max-width: 320px) {
    .title::before {
        top: 0;
        right: 3%;
        transform: scale(0.5);
    }
    
    .title::after {
        top: 0;
        right: 3%;
        transform: scale(0.5);
    }
    /*　closeというクラスがついたら形状変化　*/
    .title.close::before{
      transform: rotate(180deg) scale(0.5);
    }
    
    .title.close::after{
      transform: rotate(-180deg) scale(0.5);
    }
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    border-radius: 0 0 20px 20px; /* 下だけ丸角 */
}

/* 開いているときに上部丸角を適用 */
.title.open {
    border-radius: 20px 20px 0 0;
}

.box_text{
  width: 60%;
}


.section{
    border-radius: 20px;
    border: solid 2px #000;
}

/* section1ここから */
.section_1{
    background: url(../images/ac_programming_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}


.section_1_border2{
    border: solid 4px#796bae;
    border-radius: 20px;
}

.section_1_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}


.section_1_content{
    display: flex;
    background: url(../images/ac_programming_contents_bg.png);
    background-size: contain;
    width: 100%;
    margin-top: 10px;
    padding: 3%;
}

.section_1_img{
    width: 90.20833333%;
}


.section_1_text{
    width: 80%;
    margin-left: 5%;
}
/* -------------------------------------------------------------------- */

/* section2ここから */
.section_2{
    background: url(../images/ac_pcskill_bg.jpg) no-repeat;
    background-size: cover;
}


.section_2_border2{
    border: solid 4px#888888;
    border-radius: 20px;
}

.section_2_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_2_contents_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.section_2_contents_box_left{
    width: 50%;
}

.section_2_contents_box_right{
    width: 50%;
}

.section_2_img{
    width: 80%;
    margin: 0 auto;
}

.section_2_text4{
    width: 90%;
    margin-top: -10%;
}

.section_2_text1{
    width: 90%;
    margin: 2% auto;
}

.section_2_text2{
    width: 80%;
    margin: 2% auto;
}

.section_2_text3{
    width: 80%;
    margin: 2% auto;
}

/* -------------------------------------------------------------------- */

/* section3ここから */
.section_3{
    background: url(../images/ac_japanese_bg.jpg) no-repeat;
    background-size: cover;
}


.section_3_border2{
    border: solid 4px#d6005f;
    border-radius: 20px;
}

.section_3_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_3_content_box{
    display: flex;
}

.section_3_content_left{
    width: 80%;
}

.section_3_content_right{
    width: 50%;
    margin-left: -3%;
}

.section_3_content1{
    background: url(../images/ac_ja_content_bg.png);
    background-size: cover;
    margin-top: 2.5%;
    padding-top: 3%;
}
.section_3_img1{
    width: 85%;
    margin-left: 5%;
}

.section_3_text1{
    width: 50%;
    margin: 5% auto;
}

.section_3_text2{
    width: 80%;
}

.section_3_content2{
    margin-top: 5%;
    justify-content: center;
}

.section_3_img2{
    width: 90%;
    margin: 0 auto;
}

.section_3_text3{
    width: 80%;
    margin: 3% auto 8%;
}

.section_3_img3{
    width: 90%;
    margin: 0 auto;
}

.section_3_text4{
    width: 90%;
    margin: 3% auto 8%;
}

.section_3_text5{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 8%;
}
/* -------------------------------------------------------------------- */

/* section4ここから */
.section_4{
    background: url(../images/ac_math_bg.jpg) no-repeat;
    background-size: cover;
}


.section_4_border2{
    border: solid 4px#0081dd;
    border-radius: 20px;
}

.section_4_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_4_content_box{
    display: flex;
}

.section_4_content_left{
    width: 80%;
}

.section_4_content_right{
    width: 50%;
    margin-left: -3%;
}

.section_4_content1{
    background: url(../images/ac_marh_content_bg.png);
    background-size: cover;
    margin-top: 2%;
    padding-top: 3%;
}
.section_4_img1{
    width: 85%;
    margin-left: 5%;
}

.section_4_text1{
    width: 95%;
    padding: 3% 0 3% 3%;
}

.section_4_text2{
    width: 80%;
}

.section_4_content2{
    margin-top: 5%;
    justify-content: center;
}

.section_4_img2{
    width: 90%;
    margin: 0 auto;
}

.section_4_text3{
    width: 80%;
    margin: 3% auto 8%;
}

.section_4_img3{
    width: 90%;
    margin: 0 auto;
}

.section_4_text4{
    width: 90%;
    margin: 3% auto 8%;
}

.section_4_text5{
    width: 90%;
    margin: 0 auto;
    padding-bottom: 8%;
}

/* -------------------------------------------------------------------- */

/* section5ここから */
.section_5{
    background: url(../images/ac_science_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}


.section_5_border2{
    border: solid 4px#009844;
    border-radius: 20px;
}

.section_5_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_5_contents{
    display: flex;
    margin-top: 10%;
}

.section_5_content_left{
    margin-left: 3%;
}

.section_5_text1{
    width: 80%;
    margin: 5% auto 8%;
}

.section_5_text2{
    width: 90%;
    margin:0 3%;
}
/* -------------------------------------------------------------------- */

/* section6ここから */
.section_6{
    background: url(../images/ac_social_bg.jpg) no-repeat;
    background-size: cover;
}


.section_6_border2{
    border: solid 4px#f29600;
    border-radius: 20px;
}

.section_6_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_6_contents{
    display: flex;
    margin-top: 10%;
}

.section_6_content_left{
    margin-left: 3%;
}

.section_6_text1{
    width: 80%;
    margin: 5% auto 8%;
}

.section_6_text2{
    width: 90%;
    margin:0 3%;
}
/* -------------------------------------------------------------------- */

/* section7ここから */
.section_7{
    background: url(../images/ac_english_bg.jpg) no-repeat;
    background-size: cover;
}


.section_7_border2{
    border: solid 4px#9b4997;
    border-radius: 20px;
}

.section_7_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_7_MT{
    margin-top: 10%;
}

.section_7_contents{
    display: flex;
    margin-top: 5%;
}

.section_7_content1{
    width: 50%;
}

.section_7_content2{
    width: 50%;
}

.section_7_img1, .section_7_img2{
    width: 90%;
    margin: 0 auto;
}
.section_7_text1{
    width: 75%;
    margin: 3% auto 0;
}

.section_7_text2{
    width: 92%;
    margin: 3% auto 0;
}

.section_7_content_left{
    margin-left: 3%;
}

.section_7_text3{
    width: 80%;
    margin: 5% auto 8%;
}

.section_7_text4{
    width: 80%;
    margin:0 3%;
}
/* -------------------------------------------------------------------- */

/* section8ここから */
.section_8{
    background: url(../images/ac_life_bg.jpg) no-repeat;
    background-size: cover;
}


.section_8_border2{
    border: solid 4px#bb641d;
    border-radius: 20px;
}

.section_8_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_8_contents{
    display: flex;
    margin-top: 10%;
}

.section_8_content_left{
    margin-left: 3%;
}

.section_8_text1{
    width: 50%;
    margin: 5% auto 8%;
}

.section_8_text2{
    width: 60%;
    margin:0 3%;
}

/* -------------------------------------------------------------------- */

/* section9ここから */
.section_9{
    background: url(../images/ac_art_bg.jpg) no-repeat;
    background-size: cover;
}


.section_9_border2{
    border: solid 4px#8dc21f;
    border-radius: 20px;
}

.section_9_border3{
    border: solid 4px #fff;
    border-radius: 20px;
}

.section_9_contents{
    display: flex;
    margin-top: 10%;
}

.section_9_content_left{
    margin-left: 3%;
}

.section_9_text1{
    width: 40%;
    margin: 5% auto 8%;
}

.section_9_text2{
    width: 80%;
    margin:0 3%;
}

/* -------------------------------------------------------------------- */

/*========= レイアウトのためのCSS ===============*/


h2{
    text-align: center;
    margin: 30px 0;
    font-size:1rem;
}

.right_in{
  position: relative;
  top: 5vh;
  opacity: 0;
  animation: slideIn2 1s forwards; /* アニメーションを1秒間で実行 */
  animation-delay: 0.5s;
}

@keyframes slideIn2 {
to {
  top: 0;
  opacity: 1;
}
}

/* -------------------------------------------------------------------- */



/* area_7ここから */
.area_7{
    width: 89.58333333%;
    background: url(../images/stepup_bg.png) no-repeat;
    background-size: cover;
    background-repeat: round;
    margin: 0 auto;
    padding-bottom: 10%;
}
.area_7_title{
    width: 90%;
    padding: 5% 0;
}

.area_7_content{
    display: flex;
    justify-content: center;
    position: relative;
}

.area_7_content_left{
    width: 50%;
    padding: 5% 3% 0;
}

.area_7_content_right{
    width: 50%;
    margin-top: 15%;
    padding: 5% 3% 0;
}

.area_7_text1{
    width: 71.5%;
}

.area_7_content_left2{
    width: 50%;
    padding: 0 3%;
}

.area_7_text3{
    width: 45%;
    display: flex;
    align-items: center;
    margin-top: 10%;
}
.area_7_arrow1{
    position: absolute;
    top: 60%;
    width: 15%;
}

.area_7_arrow1_anime{
    opacity: 0;
    transform-origin: left top;
}

.animate_area_7_arrow1_anime{
animation: arrowanime_area_7_arrow1 0.5s forwards;
}

@keyframes arrowanime_area_7_arrow1 {
    0% {
        transform: scale(0.8) rotate(30deg);
        opacity: 0;
    }
    50%{
        transform: rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.area_7_arrow2{
    position: absolute;
    top: 3%;
    width: 15%;
    margin-left: 5%;
}

.area_7_arrow2_anime{
    opacity: 0;
    transform-origin: right top;
}

.animate_area_7_arrow2_anime{
animation: arrowanime_area_7_arrow2 0.5s forwards;
}

@keyframes arrowanime_area_7_arrow2 {
    0% {
        transform: scale(0.8) rotate(-30deg);
        opacity: 0;
    }
    50%{
        transform: rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}
/* -------------------------------------------------------------------- */



/* area_8ここから */
.area_8{
    width: 83.33333333%;
    margin: 0 auto;
}
.area_8_title{
    width: 80%;
    padding: 5% 0;
}

.area_8_content{
    position: relative;
}

.area_8_text1{
    width: 40%;
    position: absolute;
    top: -7%;
    right: -5%;
}

.area_8_text2{
    margin-top: -2%;
    position: relative;
    z-index: 2;
}
/* -------------------------------------------------------------------- */



.MT_5_wide {
    margin-top: -5px;
    }
    .MT_10_wide {
    margin-top: -10px;
    }
    .MT_15_wide {
    margin-top: -15px;
    }
    .MT_20_wide {
    margin-top: -20px;
    }
    .MT_25_wide {
    margin-top: -25px;
    }
    .MT_30_wide {
    margin-top: -30px;
    }
    .MT_35_wide {
    margin-top: -35px;
    }
    .MT_40_wide {
    margin-top: -40px;
    }
    .MT_45_wide {
    margin-top: -45px;
    }
    .MT_50_wide {
    margin-top: -50px;
    }
    .MT_55_wide{
    margin-top: -55px;
    }
    .MT_60_wide {
    margin-top: -60px;
    }
    .MT_65_wide {
    margin-top: -65px;
    }
    .MT_70_wide {
    margin-top: -70px;
    }
    .MT_75_wide {
    margin-top: -75px;
    }
    .MT_80_wide {
    margin-top: -80px;
    }
    .MT_85_wide {
    margin-top: -85px;
    }
    .MT_90_wide {
    margin-top: -90px;
    }
    .MT_95_wide {
    margin-top: -95px;
    }
    .MT_100_wide {
    margin-top: -100px;
    }
    .MT_120_wide {
    margin-top: -120px;
    }
    .MT_140_wide {
    margin-top: -140px;
    }
    .MT_160_wide {
    margin-top: -160px;
    }
    .MT_180_wide {
    margin-top: -180px;
    }
    .MT_200_wide {
    margin-top: -200px;
    }
    .MT_220_wide {
    margin-top: -220px;
    }
    .MT_240_wide {
    margin-top: -240px;
    }
    .MT_260_wide {
    margin-top: -260px;
    }
    .MT_280_wide {
    margin-top: -280px;
    }
    .MT_300_wide {
    margin-top: -300px;
    }
    @media (min-width: 768px) {
      .takara_item2{
        margin-top: 110px;
      }
  
    }
  
    @media(max-width: 480px)  {
      .MT_90_wide_sp {
        margin-top: -90px;
        }
        .MT120{
          margin-top: 120px;
        }
    }
    
    .MT_5 {
    margin-top: calc(1400px * 0.05 - 1400px * 0.1);
    }
    .MT_8 {
    margin-top: calc(1400px * 0.08 - 1400px * 0.16);
    }
    .MT_10 {
    margin-top: calc(1400px * 0.1 - 1400px * 0.2);
    }
    .MT_12 {
    margin-top: calc(1400px * 0.12 - 1400px * 0.24);
    }
    .MT_14 {
    margin-top: calc(1400px * 0.14 - 1400px * 0.28);
    }
    .MT_25 {
    margin-top: calc(1400px * 0.25 - 1400px * 0.5);
    }
  
    @media (min-width: 767px) {
      .min_MT_25 {
        margin-top: calc(1400px * 0.25 - 1400px * 0.5);
        }
        .min_MT_20 {
          margin-top: calc(1400px * 0.20 - 1400px * 0.40);
          }
       .min_MT_15 {
        margin-top: calc(1400px * 0.15 - 1400px * 0.30);
        }
    }
  
    @media (min-width: 768px) {
      .MT_1 {
        margin-top: -1vw;
        }
    .MT_2 {
    margin-top: -2vw;
    }
    .MT_3 {
    margin-top: -3vw;
    }
    .MT_4 {
    margin-top: -4vw;
    }
    .MT_5 {
    margin-top: -5vw;
    }
    .MT_6 {
    margin-top: -6vw;
    }
    .MT_7 {
    margin-top: -7vw;
    }
    .MT_8 {
    margin-top: -8vw;
    }
    .MT_9 {
    margin-top: -9vw;
    }
    .MT_10 {
    margin-top: -10vw;
    }
    .MT_11 {
    margin-top: -11vw;
    }
    .MT_12 {
    margin-top: -12vw;
    }
    .MT_13 {
    margin-top: -13vw;
    }
    .MT_14 {
    margin-top: -14vw;
    }
    .MT_16 {
    margin-top: -16vw;
    }
    .MT_17 {
    margin-top: -17vw;
    }
    .MT_18 {
    margin-top: -18vw;
    }
    .MT_19 {
    margin-top: -19vw;
    }
    .MT_20 {
    margin-top: -20vw;
    }
    .MT_25 {
    margin-top: -25vw;
    }
    .MT_30 {
    margin-top: -30vw;
    }
    .MT_35 {
    margin-top: -35vw;
    }
    .MT_40 {
    margin-top: -40vw;
    }
    .MT_45 {
    margin-top: -45vw;
    }
    .MT_50 {
    margin-top: -50vw;
    }
    .MT_55 {
    margin-top: -55vw;
    }
    .MT_60 {
    margin-top: -60vw;
    }
    .MT_65 {
    margin-top: -65vw;
    }
    .MT_70 {
    margin-top: -70vw;
    }
    .MT_75 {
    margin-top: -75vw;
    }
    .MT_80 {
    margin-top: -80vw;
    }
    .MT_85 {
    margin-top: -85vw;
    }
    .MT_90 {
    margin-top: -90vw;
    }
    .MT_95 {
    margin-top: -95vw;
    }
    .MT_100 {
    margin-top: -100vw;
    }
    
    /* max-width: 767px */}

    .MB10 {
    margin-bottom: 10px;
    }
    .MB20 {
    margin-bottom: 20px;
    }
    .MB30 {
    margin-bottom: 30px;
    }
    .MB40 {
    margin-bottom: 40px;
    }
    .MB50 {
    margin-bottom: 50px;
    }
    .MB60 {
    margin-bottom: 60px;
    }
    .MB70 {
    margin-bottom: 70px;
    }
    .MB80 {
    margin-bottom: 80px;
    }
    .MB90 {
    margin-bottom: 90px;
    }
    .MB100 {
    margin-bottom: 100px;
    }
    .MB130 {
      margin-bottom: 130px;
      }
      .MB120 {
        margin-bottom: 120px;
        }
      .MT60{
        margin-top: 60px;
      }
    
  
    .ML10 {
    margin-left: 10%;
    }
    .ML15 {
    margin-left: 15%;
    }
    .ML20 {
    margin-left: 20%;
    }
    .ML25 {
    margin-left: 25%;
    }
    .ML30 {
    margin-left: 30%;
    }
    .ML35 {
    margin-left: 35%;
    }
    .ML40 {
    margin-left: 40%;
    }
    .ML45 {
    margin-left: 45%;
    }
    .ML50 {
    margin-left: 50%;
    }
    .ML55 {
    margin-left: 55%;
    }
    .ML60 {
    margin-left: 60%;
    }
    .ML65 {
    margin-left: 65%;
    }
    .ML70 {
    margin-left: 70%;
    }
    .ML75 {
    margin-left: 75%;
    }
    .ML80 {
    margin-left: 80%;
    }
  
    .ML150 {
      margin-left: 150%;
      }
  

      /* 共通アニメーションここから */

      .scale_up{
        opacity: 0;
       }
       
       .animate_scale_up{
        animation: scale_up 0.3s forwards;
       }
       
       @keyframes scale_up {
           0% {
               transform: scale(0);
               opacity: 0;
           }
           100% {
               transform: scale(1);
               opacity: 1;
           }
       }

       
      .scale_up_delay{
        opacity: 0;
       }
       
       .animate_scale_up_delay{
        animation: scale_up_delay 0.7s forwards;
       }
       
       @keyframes scale_up_delay {
           0% {
               transform: scale(0);
               opacity: 0;
           }
           100% {
               transform: scale(1);
               opacity: 1;
           }
       }

       .scale_up_delay2{
        opacity: 0;
       }
       
       .animate_scale_up_delay2{
        animation: scale_up_delay2 1s forwards;
       }
       
       @keyframes scale_up_delay2 {
           0% {
               transform: scale(0);
               opacity: 0;
           }
           100% {
               transform: scale(1);
               opacity: 1;
           }
       }

       .scale_up_delay3{
        opacity: 0;
       }
       
       .animate_scale_up_delay3{
        animation: scale_up_delay3 0.6s forwards;
        animation-delay: 0.5s;
       }
       
       @keyframes scale_up_delay3 {
           0% {
               transform: scale(0);
               opacity: 0;
           }
           100% {
               transform: scale(1);
               opacity: 1;
           }
       }

       .slide_right_in{
        opacity: 0;
       }
       
       .animate_slide_right_in{
        animation: slide_right_in 0.3s forwards;
        animation-delay: 0.1s;
       }
       
       @keyframes slide_right_in {
           0% {
               transform: translateX(20%);
               opacity: 0;
           }
           100% {
               transform: translateX(0);
               opacity: 1;
           }
       }

       .slide_in{
        opacity: 0;
       }
       
       .animate_slide_in{
        animation: slide_in 0.3s forwards;
       }
       
       @keyframes slide_in {
           0% {
               transform: translateX(-20%);
               opacity: 0;
           }
           100% {
               transform: translateX(0);
               opacity: 1;
           }
       }

       .slide_in_delay{
        opacity: 0;
       }
       
       .animate_slide_in_delay{
        animation: slide_in_delay 0.3s forwards;
        animation-delay: 0.3s;
       }
       
       @keyframes slide_in_delay {
           0% {
               transform: translateX(-20%);
               opacity: 0;
           }
           100% {
               transform: translateX(0);
               opacity: 1;
           }
       }

       .slide_in_delay2{
        opacity: 0;
       }
       
       .animate_slide_in_delay2{
        animation: slide_in_delay2 0.3s forwards;
        animation-delay: 0.3s;
       }
       
       @keyframes slide_in_delay2 {
           0% {
               transform: translateX(-20%) rotate(-15deg);
               opacity: 0;
           }
           100% {
               transform: translateX(0);
               opacity: 1;
           }
       }

       .slide_in_delay3{
        opacity: 0;
       }
       
       .animate_slide_in_delay3{
        animation: slide_in_delay3 0.3s forwards;
        animation-delay: 0.5s;
       }
       
       @keyframes slide_in_delay3 {
           0% {
               transform: translateX(-15%);
               opacity: 0;
           }
           100% {
               transform: translateX(0);
               opacity: 1;
           }
       }
    
    .scale_up_op1{
        transform: scale(0);
    }
    
    .animate_scale_up_op1{
        animation: scale_up_op1 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    }
    
    @keyframes scale_up_op1 {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }

    .scale_up_op1_delay{
        transform: scale(0);
    }
    
    .animate_scale_up_op1_delay{
        animation: scale_up_op1_delay 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.1s;
    }
    
    @keyframes scale_up_op1_delay {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }
    
    .scale_up_op1_delay2{
        transform: scale(0);
    }
    
    .animate_scale_up_op1_delay2{
        animation: scale_up_op1_delay2 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.15s;
    }
    
    @keyframes scale_up_op1_delay2 {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }

    .clip_in{
       opacity: 0;
    }

    .animate_clip_in{
        animation: clip_in 1s forwards ease;
    }

    @keyframes clip_in {
        0% {
          -webkit-clip-path: polygon(0 0, 0 0, 0 0);
          clip-path: polygon(0 0, 0 0, 0 0);
          opacity: 1;
        }

        100% {
          -webkit-clip-path: polygon(0 0, 200% 0, 0 200%);
          clip-path: polygon(0 0, 200% 0, 0 200%); 
          opacity: 1;
        }
      }

      .circle_in{
        opacity: 0;
     }
 
     .animate_circle_in{
         animation: circle_in 0.5s forwards ease-in;
     }
 
     @keyframes circle_in {
         0% {
           -webkit-clip-path: circle(0 at 50% 50%);
           clip-path: circle(0 at 50% 50%);
           opacity: 1;
         }
   
         100% {
           -webkit-clip-path: circle(100% at 50% 50%);
           clip-path: circle(100% at 50% 50%);
           opacity: 1;
         }
       }

       .fade_in_delay2{
        opacity: 0;
       }
       
       .animate_fade_in_delay2{
        animation: fade_in_delay2 0.5s forwards;
        animation-delay: 0.6s;
       }
       
       @keyframes fade_in_delay2 {
           0% {
               opacity: 0;
           }
           100% {
               opacity: 1;
           }
       }
       /* -------------------------------------------------------------------- */