/* 共通 */
* {
    padding: 0;
    margin: 0;
}

main {
    line-height: 1.5;
    letter-spacing: 1px;
    box-sizing: border-box;
}


img {
    max-width: 100%;
}

li {
    list-style: none;
    display: flex;
    justify-content: center;
}

a {
    text-decoration: none;
}

h2::before {
    display: none;
}

main article {
    overflow: inherit;
}

header .contact-block.base .tel-box .btn {
    padding: 18px 9px 18px 9px;
    width: inherit !important;
}


.wrap {
    padding: 0 32px;
}

.breadcrumb-area {
    overflow-x: inherit;
}

.apply-ttl_ja {
    font-weight: normal;
    font-size: 20px;

}

.container {
    margin-top: 100px;
    padding: 0 32px;
}

.top-container {
    padding: 0 32px;
}

.sec-ttl {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
}

.sec-ttl__ja {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #17a6c1;
    margin-bottom: 48px;
}

.item-ttl {
    font-size: 48px;
    margin-bottom: 20px;
    color: #444;
}

.topics-img-wrap a:hover {
    opacity: 0.6;
}





/* top */

/*矢印が右に移動する*/
.btnarrow {
    /*矢印と下線の基点とするためrelativeを指定*/
    position: relative;
    /*形状*/
    display: inline-block;
    padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}


.btnarrow::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 4%;
    width: 95%;
    height: 1px;
    background: #333;
    transition: all .3s;
}

.btnarrow::after {
    content: '';
    position: absolute;
    bottom: -3px;
    right: 1px;
    width: 15px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow:hover::before {
    left: 20%;
}

.btnarrow:hover::after {
    right: -15%;
}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity {
    margin: 80px 0;
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 120s infinite linear 0.5s both;
}




.scroll-infinity__item--text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 82px;
    font-weight: bold;
    color: #dcf2f6;
    width: calc(200vw / 4);
    /* デフォルトはPC用 */
}

@media screen and (max-width: 768px) {

    /* 768px以下の画面サイズに適用されるスタイル */
    .scroll-infinity__item--text {
        width: calc(200vw / 1);
        /* モバイル用 */
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* 769px以上1024px以下の画面サイズに適用されるスタイル */
    .scroll-infinity__item--text {
        width: calc(200vw / 2);
        /* タブレット用 */
    }
}

.fv {
    position: relative;

}

.fv-text__wrapper {
    position: absolute;
    top: 124px;
    left: 35px;
}

.fv-text__wrapper {
    display: flex;
    justify-content: space-between;
}

.fv-img__wrapper {
    padding-top: clamp(252px, 5vw, 91px);
}

.fv-ttl {
    font-size: clamp(1.75rem, -0.0891rem + 7.8469vw, 6.875rem);
    color: #17a6c1;
    font-weight: bold;
}


.fv-ttl span {
    display: block;
    color: #fff;
    text-shadow: 0 2px 6px rgb(0 0 0 / 53%);
}

.fv-ttl__small {
    color: #fff;
    font-weight: bold;
    font-size: clamp(0.9375rem, 0.8254rem + 0.4785vw, 1.25rem);
    text-shadow: 0 2px 6px rgb(117 117 117 / 90%);
}





.fv-ttl__small span {
    display: block;
    color: #17a6c1;
}



.fv-ttl__en {
    font-weight: bold;
    font-size: clamp(1.125rem, 0.811rem + 1.3397vw, 2rem);
    padding-top: 38px;
    padding-left: 48px;
}

.fv-ttl__en span {
    color: #17a6c1;
    padding-left: 10px;
}

.top-cont__bg::after {
    content: "";
    width: 50%;
    height: 100vh;
    background: #f4fafb;
    top: 0;
    right: 0;
}

.top-cont__img {
    width: 95%;
}

.top-cont {
    padding-left: 32px;
}

.top-cont__bg {
    position: relative;
    overflow: hidden;
}

.top-cont__bg::before {
    content: '';
    position: absolute;
    right: 65px;
    width: 45%;
    height: 100%;
    background-color: #f4fafb;
    z-index: -1;
    border-radius: 20px;
}

.top-cont__wrapper {
    display: flex;
    margin-bottom: 88px;
    transform: translateY(23px);
}

.top-cont span {
    color: #17a6c1;
}

.top-cont p {
    width: 60%;
}

.top-cont__btn {
    display: block;
    margin-top: 30px;
    text-align: center;
}

.top-cont__btn a {
    font-weight: bold;
    color: #b8e4ec;
    font-size: clamp(1.25rem, 0.9809rem + 1.1483vw, 2rem);
}

.greeting {
    display: flex;
    align-items: center;
}

.greeting-img {
    width: 45%;
}

.greeting-text {
    max-width: 40%;
    margin: 0 auto;
}

.position {
    display: block;
    text-align: center;
    font-weight: bold;
}

.ceo-name {
    color: #17a6c1;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    margin-bottom: 10px;
}

.advantage-item {
    margin-bottom: 80px;
    background: #f4fafb;
    padding: 40px 20px;
    border-radius: 20px;
    width: 93%;
}

.advantage-item.left {
    transform: translateX(60px);
}

.advantage {
    padding-top: 100px;
}


.advantage-item__text,
.advantage-item__img {
    width: 50%;
}

.rigth img {
    transform: translateX(80px);
}

.left img {
    transform: translateX(-78px);
}

.reverse {
    flex-direction: row-reverse;
}

.advantage-item__details {
    background: #e5f4f8;
    border-radius: 15px;
    padding: 15px;
    margin-top: 5px;
}

.advantage-details__ttl {
    text-align: center;
    font-size: 16px;
    margin-bottom: 5px;
    color: #17a6c1;
}

.details-top {
    margin-bottom: 5px;
}

.change-color {
    color: #17a6c1;
    font-weight: bold;
    font-size: 24px;
    vertical-align: -3px;
    padding: 0 4px;
}

.advantage-details__text {
    margin-top: 5px;
}

.data {
    padding: 0 32px;
}



.topics-wrapper {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    gap: 35px;
}

.topics {
    background: #b8e4ec;
    padding: 32px;
}

.topics-secTtl {
    text-align: center;
    font-weight: bold;
    font-size: 32px;
    padding-bottom: 32px;
    color: #444;

}

.apply {
    background: #16a6c1;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.apply-inner {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    gap: 10%;


    @media screen and (max-width:1075px) {
        flex-direction: column;
        align-items: center;
        gap: 5%;
    }
}

.apply-cont {
    width: 50%;
    border: 1px solid #fff;
    border-radius: 15px;
    margin: 5% 0;
    color: #fff;
    transition: all .3s;
    padding: 10px;
}

.apply-cont a {
    display: block;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 121px;
    padding: 10px;
}

.apply-text {
    display: flex;
    justify-content: center;
    font-size: 12px;
    position: relative;
}



.apply-cont:hover a span::before,
.apply-cont:hover a span::after {
    background: #16a6c1;
}

.apply-cont:hover {
    background: #fff;
}

.apply-cont:hover a {
    color: #16a6c1;
}


.apply-arrow {
    margin: 24px auto 0;
    position: relative;
    width: 90px;
    background-color: #fff;
    height: 1px;
    display: block;
}

.apply-cont:hover a .apply-arrow {
    background-color: #16A6C1;
}

.apply-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    width: 10px;
    height: 1px;
    background: #fff;
    transform: rotate(45deg);
    transition: all .3s;
    top: -3px;
}


/* top/common sp */

@media screen and (max-width:782px) {
    li {
        flex-direction: column;
    }

    .wrap {
        padding: 0 16px;
    }

    .container {
        margin-top: 80px;
        padding: 0 16px;
    }

    .fv-ttl__en {
        font-size: 16px;
    }

    .fv-text__wrapper {
        flex-direction: column;
        top: 25px;
        left: 16px;
        max-width: 350px;
    }

    .fv-ttl__en {
        padding-top: inherit;
    }

    .fv-ttl span {
        color: #17a6c1;
        text-shadow: inherit;
    }

    .fv-ttl__small,
    .fv-ttl__small span {
        display: flex;
        color: #adadad;
        text-shadow: inherit;
        font-size: 13px;
    }

    .fv-img__wrapper {
        padding-top: clamp(185px, 5vw, 91px);
    }

    .discussion-top {
        padding-top: clamp(0px, 5vw, 91px);
    }

    .discussion-main {
        padding-top: 24px;
    }


    .item-ttl {
        font-size: 24px;
    }

    .sec-ttl {
        font-size: 24px;
    }

    .sec-ttl__ja {
        font-size: 16px;
    }

    .topics-secTtl {
        padding-bottom: inherit;
    }


    .scroll-infinity {
        margin: 24px 0;
    }

    .top-cont__wrapper,
    .greeting,
    .topics-wrapper {
        flex-direction: column;
    }

    .top-cont__bg::before {
        right: 0;
        width: 80%;
    }

    .top-cont__img {
        margin-top: 80px;
        transform: translateX(10px);
    }

    .top-cont__btn {
        right: 39%;
        top: 105%;
    }

    .top-cont p {
        width: 100%;
    }


    .greeting-img {
        width: 100%;
    }

    .greeting-text {
        max-width: 95%;
    }

    .position {
        margin-top: 20px;
    }

    .ceo-name {
        font-size: 24px;
    }

    .sec-ttl.sec-advantage {
        margin-top: 80px;
    }

    .advantage-item {
        width: 100%;
    }

    .advantage-item__text {
        width: 100%;
    }

    .advantage-item__img {
        width: 100%;
        margin-top: 20px;
    }

    .rigth img,
    .left img,
    .advantage-item.left {
        transform: inherit;
    }

    .advantage-item {
        margin-bottom: 32px;
    }

    .reverse {
        flex-direction: column;
    }

    .topics {
        padding: 16px;
    }

    .apply-inner {
        flex-direction: column;
    }

    .apply-cont {
        padding-top: 1%;
        width: 100%;
        margin: 5% auto;

    }

    .apply-cont a {
        font-size: 24px;
    }

}




/* discussion */

.fv-img__wrapper img,
.top-img__wrapper img {
    width: 100%;
}

.charm-item__text h2 {
    display: flex;
}

.charm {
    padding-top: 130px;
    padding-bottom: 90px;
}

.charm-item__wrapper {
    display: flex;
    margin-bottom: 100px;
    justify-content: space-between;
    margin: 0 auto 68px;
    max-width: 1550px;
}

.charm-item__text {
    width: 57%;
    transform: translateX(70px);
}

.charm-item__img {
    width: 35%;
}

.charm-item__ttl {
    font-size: clamp(1.25rem, 0.4464rem + 3.4286vw, 2.375rem);
    color: #0368FF;
    padding-left: 15px;
}

.chat-wrapper {
    margin-top: 48px;
    max-width: 800px;
}

.chat-wrapper p {
    flex: 1;
}

.chat-wrapper li:not(:last-child) {
    margin-bottom: 42px;
}

.chatter-img {
    width: 120px;
    padding-right: 20px;
}

.number {
    font-size: 58px;
    color: #fff;
    background: linear-gradient(115deg, #0368FF, #16A6C1);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 11px 20px;
}

.top-img__wrapper {
    padding: 0 32px;
    max-width: 1380px;
    margin: 0 auto;
}

.top-catch {
    font-size: clamp(1rem, -0.4286rem + 6.0952vw, 3rem);
    display: grid;
    justify-items: center;
    gap: 10px;
    transform: translateY(-72%);
    color: #fff;
}

.top-catch span {
    background: linear-gradient(115deg, #0368FF, #16A6C1);
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 0 20px;
    padding: 3px 20px;
    display: block;

}

.top-catch__middle {
    transform: translateX(160px);
}

.item-left {
    justify-content: left;
}

.charm-item__wrapper {
    position: relative;
    overflow: hidden;
}

.charm-item__wrapper.bg-left::before {
    content: '';
    position: absolute;
    left: 1px;
    width: 430px;
    height: 180px;
    background: linear-gradient(#0368FF 0%, #15a4c3 85.49%, #16A6C1 100%);
    opacity: 0.2;
    border-radius: 20px;
    bottom: 10px;
}

.charm-item__wrapper.bg-reverse::before {
    content: '';
    position: absolute;
    right: 3px;
    width: 430px;
    height: 180px;
    background: linear-gradient(#0368FF 0%, #15a4c3 85.49%, #16A6C1 100%);
    opacity: 0.2;
    border-radius: 20px;
    top: 0px;
}



/* sp-discussiton */

@media screen and (max-width:782px) {
    .charm-item__wrapper {
        flex-direction: column;
        width: 100%;
        font-size: 24px;
    }

    .top-catch {
        transform: translateY(-78%);
    }

    .charm {
        padding-top: 80px;
        padding-bottom: inherit;
    }

    .charm-item__img {
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }

    .charm-item__ttl {
        font-size: 22px;
    }

    .charm-item__text {
        width: inherit;
        transform: inherit;
    }

    .chat-wrapper p {

        font-size: 16px;
    }

    .chat-wrapper li {
        align-items: flex-start;
        flex-direction: row;
        margin-bottom: 20px;


    }

    .charm-item__wrapper.bg-left::before,
    .charm-item__wrapper.bg-reverse::before {
        display: none;
    }

    .number {
        font-size: 28px;
    }

    .top-catch__middle {
        transform: translateX(0px);
    }

}



/* interview */

.tabBox .tabArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-end;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 32px;
}

.tabBox .tabArea .one_tab {
    display: block;
    transition-duration: 0.3s;
    cursor: pointer;
}


.tabBox .tabArea .one_tab .tab_inner {
    display: flex;
    justify-content: center;
    transition-duration: 0.3s;
}

.tabBox {
    background: linear-gradient(115deg, #00C59D, #16A6C1);
}

.tabBox .tabArea.bottom {
    align-items: flex-start;
}

.contents .tab_main {
    display: none;
    padding: 50px 25px;
    transition-duration: 0.3s;
}

.tab_main.is_show {
    display: block;
}

.tab_inner {
    transition-duration: 0.3s;
}

.tab_inner img:hover {
    opacity: 0.5;
    transition-duration: 0.3s;
}




@media screen and (max-width: 1024px) {
    body {
        font-size: 14px;
    }
}

.section {
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px 20px 500px;
}

.section p._a {
    font-size: 12px;
    font-weight: bold;
    margin: 30px 0 0;
}

.section p._a .link {
    display: inline-block;
    color: #607D8B;
    padding-left: 1.3em;
    text-indent: -1.3em;
}

.section p._a .link:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #607D8B;
    border-right: 2px solid #607D8B;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-right: 10px;
}

.topics-inner {
    text-align: center;
}

.interview-fv {
    margin-top: 170px;
}

.interview-position {
    background: linear-gradient(115deg, #00C59D, #16A6C1);
}


.interview-position__wrapper {
    display: flex;
    justify-content: space-evenly;
    padding: 48px;
    margin-bottom: 0;
    gap: 30px;
}

.split {
    width: 100%;
    display: flex;

}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.split-left__inner {
    padding: 80px 64px;
    width: 100%;
    height: 100vh;
    position: sticky;
}

.split-right__inner {
    padding: 280px 64px 50px;
}

.split-left {
    width: 50%;
}

.split-right {
    width: 50%;
}



.left-img__wrapper {
    position: absolute;
    top: 150px;
    left: 115px;
    opacity: 0;
    transition: opacity 1s ease-in-out;

}

.left-img__wrapper.active {
    opacity: 1;
}


.left-img__wrapper figure {
    position: relative;
    width: fit-content;
    width: 88%;
}


.left-img__wrapper figure::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100%;
    height: 100%;
    background: linear-gradient(60deg, #00C59D, #16A6C1);
    z-index: -1;
    border-radius: 30px;

}

.split-item__ttl {
    text-align: right;
    margin: 20% 0;
}

.item-ttl__position {
    font-size: 47px;
    display: block;
    color: #fff;
    background: linear-gradient(60deg, #00C59D, #16A6C1);
    display: inline-block;
    font-weight: bold;
    padding: 2px 25px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.item-ttl__name {
    font-size: 94px;
    color: linear-gradient(115deg, #00C59D, #16A6C1);
}

.item-ttl__history {
    font-size: 21px;
}

.question {
    margin-bottom: 18px;
}

.question-wrapper {
    margin-bottom: 310px;
    padding-left: 20px;
    margin-top: 40px;
}


/* interview-sp */

@media screen and (max-width:782px) {
    .interview-fv {
        margin-top: 24px;
    }

    .tab__menu {
        flex-direction: column;
        align-items: center;
    }

    .tabBox .tabArea {
        gap: 20px;
    }

    .split {
        flex-direction: column;
        padding: 38px 16px;
    }

    .split-left,
    .split-right {
        width: 100%;
    }

    .split-right__inner {
        padding: inherit;
    }

    .left-img__wrapper figure {
        width: 88%;
    }

    .left-img__wrapper {
        top: 0;
        left: 20px;
    }

    .split-left__inner {
        height: inherit;
    }

    .question-wrapper {
        margin-bottom: 15%;
        padding-left: inherit;

    }

    .question-wrapper-group:first-child {
        margin-top: 220px;
    }

    .split-item__ttl {
        margin: 86% 0 20%;
    }

    .item-ttl__position {
        font-size: 24px;
    }

    .item-ttl__history {
        font-size: 16px;
    }

    .left-img__wrapper figure::after {
        top: 19px;
        left: 18px;
        border-radius: 15px;
    }

    .item-ttl__name img {
        width: 35%;
    }

    .left-img__wrapper {
        opacity: 1;
        transition: inherit;
    }

    .question-ttl {
        width: 200px;
    }
}

/* requirements */

#tab-recruit-info .tab-item-area .cont-main {
    border: none;
}

.table-dl.table-base {
    border-right: 1px solid #e6e6e6;
}

.btn-warning {
    background-color: #16a6c1;
    border-color: #16a6c1;
    color: #fff;
    margin-bottom: 120px;
}

.btn-warning:hover {
    background-color: #16a6c1;
    border-color: #16a6c1;
    color: #fff;
    opacity: 0.5;

}

.box-1 {
    padding: 20px;
}

.box {
    padding: 0;
}

.tab-btn-area {
    gap: 30px;
}

.position-btn {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 38px;
}


.sales-btn {
    background-color: #ffffff;
    border: 1px solid #16A6C1;
    border-radius: 10px;
    padding: 10px 70px;
    font-size: 20px;
    font-weight: bold;
    color: #16A6C1;
}

.sales-btn.disabled {
    pointer-events: none;
    background-color: #16A6C1;
    border: 1px solid #16A6C1;
    color: #fff;
}


.office-btn {
    color: #16A6C1;
    background-color: #ffffff;
    border: 1px solid #16A6C1;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    padding: 10px 70px;
    transition: .3s;
}

.office-btn.disabled {
    background-color: #16A6C1;
    border: 1px solid #16A6C1;
    pointer-events: none;
    color: #fff;

}


.office-btn:hover,
.sales-btn:hover {
    opacity: 0.8;
}

.office-btn.color-blue {
    color: #fff;
    background-color: #16A6C1;
    border: #16A6C1;
    border-radius: 10px;
    padding: 10px 70px;
    font-size: 20px;
}

.ttl-requirements__wrapper {
    text-align: center;
    margin: 159px 0 60px;
}

.requirements-list__wrapper {
    padding: 0 32px;
}

.requirements-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 45px 45px;
    justify-content: space-evenly;
    background-color: #e5f4f8;
    border-radius: 30px;

}

.requirements-list dt {
    display: block;
    text-align: center;
}


.requirements-list dt,
.requirements-list dd {
    box-sizing: border-box;
    margin-bottom: 20px;
}

.requirements-list dt {
    display: flex;
    align-items: center;
    width: 30%;
    padding: 20px;
    background-color: #16A6C1;
    color: #fff;
    border-radius: 10px;

}


.requirements-list dd {
    display: flex;
    align-items: center;
    width: 65%;
    margin-left: 0;
    padding: 20px;
    background-color: transparent;
    border: 1px solid #16A6C1;
    border-radius: 10px;
}

a.btn-entry {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin: auto;
    padding: 1rem 4rem;
    font-weight: bold;
    border: 2px solid #444;
    background: #444;
    color: #fff;
    transition: 0.5s;
    border-radius: 10px;
}

a.btn-entry:hover {
    color: #444;
    background: #fff;
}

.btn-entry__wrap {
    margin: 30px 0 98px;
    text-align: center;
}

.sec-ttl__apply {
    font-size: 60px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.ttl-apply__ja {
    font-size: 30px;
    font-weight: bold;
    color: #16A6C1;
}




/* requirements-sp */

@media screen and (max-width:782px) {
    .requirements-list__wrapper {
        flex-direction: column;
    }

    .requirements-list dd,
    .requirements-list dt {
        width: 100%;
    }

    .requirements-list__wrapper {
        padding: 0 16px;
    }

    .position-btn {
        padding: 10px 40px;
        flex-direction: column;
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
        margin-bottom: 25px;
        gap: 40px;
    }


    .sec-ttl__apply {
        font-size: 28px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }

    .ttl-apply__ja {
        font-size: 18px;
        font-weight: bold;
        color: #16A6C1;
    }

    .ttl-requirements__wrapper {
        margin: 58px 0 32px;
    }

    .tab-recruit.tab-btn-area.tab_btn {
        padding: 10px 28px;
    }


}






/* entry */

.other main .jumbotron.jumbotron-common {
    height: 270px;
}

.jumbotron-common .ttl-cont {
    justify-content: center;
}


.metabox {
    text-align: center;
}

.contact dl.req dt label::after {
    background: #EEFF00;
    font-weight: bold;
}

.contact dl.req dt label::after {
    color: #333;
}

.table-contact dl.any dt label span {
    background-color: #E3E3E3;
    border: none;
}

/* css animation */

.fadeIn {
    opacity: 0;
    transform: translateX(100px);
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {}

    100% {
        opacity: 1;
        transform: translate(0);
    }
}