@charset "UTF-8";


/* 全体 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;

}

img {
    width: 100%;
    vertical-align: bottom;
    -webkit-user-drag: none;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

li {
    list-style: none;
}

body {
    font-family: "Noto Sans JP";
    overflow: hidden;

}

:root {
    --main: #00417C;
    --main_2: #4A9DD8;
    --sub: #EFEE22;
    --bgcolor: #E7F5FF;
}

p {
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}


/* safari対策 */
dd a {
    color: #fff;

}

.phone_area02 a {
    color: #fff;
}

.address a {
    color: #222;
}

.sub_ttl_box {
    text-align: center;
    padding: 2rem 0;
}

.sub_title {
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    position: relative;
    display: inline-block;
}



.sub_title:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    /*線の上下位置*/
    display: inline-block;
    width: 64px;
    /*線の長さ*/
    height: 1px;
    /*線の太さ*/
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /*位置調整*/
    background: var(--main);
    /*線の色*/
}

.sub_s:before {
    background: var(--station);
}

.br_sp {
    display: none;
}


.main_title {
    color: #333;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: inline-block;
    position: relative;
}


.main_title::before {
    content: "";
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    background: url(simg/main_ttl.svg) no-repeat;
    background-size: contain;
    /* margin-right: 1px; */
    position: absolute;
    top: -1.5rem;
    left: -2rem;
}


.main_title_area {
    text-align: center;
}

.title_area {
    text-align: center;
    padding: 3rem 0;
    position: relative;
}


.under_line {
    background-image: linear-gradient(transparent 50%, #FFF100 60%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.bold {
    font-weight: 700;
}

.red {
    color: red;
}


/* ＝＝ヘッダー＝＝ */

.h_logo {
    width: 18rem;
    margin: 1rem 0 0 2rem;
}

header {
    position: absolute;
}

/* ＝＝メインビジュアル＝＝ */

.mainvisual_sp {
    display: none;
}


/* ＝＝こんな悩みありますか？＝＝ */

.recom_area {
    width: 96%;
    margin: auto;
    background-color: var(--bgcolor);
    padding: 1rem;
    position: relative;
    top: -2rem;
    border-radius: 0.25rem;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.recom_box {
    border: 1px solid var(--main_2);
    padding: 2rem 0;
}

.recom_list {
    width: 51%;
    margin: auto;
    padding: 2rem 0;

}

.recom_list li {
    position: relative;
    padding: 1rem 0 1rem 4rem;
    font-size: 1rem;
    border-bottom: 1px dashed #999;
    color: #222;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
}

.recom_list li::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url("simg/check_icon.svg");
    /* ←パスは環境に合わせて調整 */
    background-size: contain;
    background-repeat: no-repeat;
}

.recom_p {
    text-align: center;
}

.recom_img {
    width: 23rem;
    position: absolute;
    left: 1rem;
    bottom: 0;
}


/* ＝＝スタサポLPの概要＝＝ */

.overview_area {
    background: linear-gradient(180deg, #fff 0%, #fff 50%, #f9f9f9 50%, #f9f9f9 100%);
}

.price_ttl {
    display: inline-block;
    padding: 0.625rem;
    border-radius: 0.25rem;
    border: 1px solid var(--sub);
    background: var(--main);

}

.price_ttl span {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.price_box {
    width: 862px;
    margin: auto;
    padding: 3rem 0;
    position: relative;
    z-index: 0;
}

.price_img {
    width: 30rem;
    position: absolute;
    top: -3rem;
    right: -10rem;
    z-index: -2;
}


.price_main p {
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
}

.price_main p::before {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 862px;
    height: 43px;
    background-image: url("simg/price_under.png");
    /* ←パスは環境に合わせて調整 */
    background-size: contain;
    background-repeat: no-repeat;
}

.price_main strong {
    color: var(--main_2);
    font-family: "Open Sans";
    font-size: 6rem;
    font-style: italic;
    font-weight: 800;
    line-height: normal;
}



/* 含まれる内容 */

.ttl_area {
    text-align: center;
}

.overview_box {
    width: 80%;
    margin: auto;
    border-radius: 0.5rem;
    background: var(--bgcolor);
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 2rem 0;
    position: relative;
    z-index: 0;
}

.overview_container {
    display: flex;
    justify-content: space-around;
    padding: 2rem 0;
}

.overview_left {
    display: flex;
    gap: 1rem;
    width: 33%;
}

.iphone_img {
    width: 16rem;
}

.overview_p {
    color: var(--main);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #00417C;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.overview_p span {
    writing-mode: horizontal-tb;
}

.overview_right {
    width: 54%;
}

.overview_ttl {
    color: var(--main);
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 1rem;
}

.feature-term {
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 0.75rem 1rem;
}

.feature-desc {
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 1rem;
    padding: 0 1rem;
}

.text_area {
    text-align: center;
    padding: 2rem 0;
}

.text_area p {
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
}


/* ＝＝ミニお問い合わせエリア＝＝ */

.contact_area_mini {
    background: url(simg/contact_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 3rem 0;
}

.contact_ttl {
    color: #222;
    font-family: "Noto Sans JP";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    padding-bottom: 3rem;
}

.contact_ttl span {
    color: var(--main_2);
}

.c_mail_icon {
    width: 3rem;
}

.contact_btn_area a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, #00417C 0%, #EFEE22 50%, #00417C 100%);
    background-size: 200% 100%;
    transition: 400ms;
}

.contact_btn_area a:hover {
    background-position: 100% 0;
}

.contact_btn_area span {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


/* ＝＝制作の流れ＝＝ */

.flow_area {
    background: var(--bgcolor);
    padding: 3rem 0;
}

.flow_ttl_area {
    text-align: center;
}

.flow_ttl_area p {
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 2rem 0;
}

.flow_list {
    width: 902px;
    margin: 0 auto;
    border-radius: 0.5rem;
    background: #FFF;
    padding: 2rem 0 2rem 11rem;

}

.flow_icon {
    width: 2.5rem;
}

.flow_ttl {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    left: -1.3rem;

}

.flow_ttl h3 {
    color: #222;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
}

.flow_list li {
    border-left: 2px solid var(--main);
    padding-bottom: 2.5rem;
}

.flow_list p {
    color: #222;
    font-family: "Noto Sans JP";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    padding: 0.5rem 2.25rem;
}

.flow_contact {
    display: flex;
    justify-content: space-around;
}

.flow_mail a {
    padding: 0.5rem 1rem;
}

.flow_mail img {
    width: 2rem;
}

.flow_mail span {
    font-size: 1.25rem;
}

.flow_phone_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flow_phone_box img {
    width: 2rem;
}

.flow_phone_box span {
    font-size: 1.25rem;
}

.flow_phone_box p {
    font-size: 0.75rem;
    margin: -1rem;
}

.flow_list li:last-child {
    border-left: none;
    padding-left: 2px;
}

.flow_text {
    color: var(--brown);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    padding: 2rem 0;
}


.daily_container li:last-child {
    border-left: none;
    padding-left: 4px;
}


/* ＝＝制作実績＝＝ */

.works_area {
    padding: 2rem 0;
    background-image: url(simg/works_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.preparation_box {
    text-align: center;
    padding: 3rem 0;
}

.preparation_box h2 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 1rem;
}


/* ＝＝よくある質問＝＝ */

.qa_area {
    padding: 3rem 0;
    background: var(--bgcolor);
}

.qa_human {
    width: 8rem;
    position: absolute;
    right: 35%;
    bottom: -1.5rem;

}

.qa_container {
    width: 80%;
    margin: auto;
    padding: 3rem 0;
}

.q_strong {
    color: #49AAE0;
    text-align: center;
    font-family: Paprika;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
}

.a_strong {
    color: #EF5350;
    text-align: center;
    font-family: Paprika;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
}

.qa_box dl {
    display: flex;
    align-items: center;
    padding: 1rem 0;
}

.qa_box dl:first-child {
    border-bottom: 1px solid #ddd;
}

.qa_box dt {
    padding-left: 1rem;
    width: 7%;
}

.qa_box dd {
    width: 93%;
    padding-left: 0.25rem;
}

.q_ttl {
    color: #222;
    font-size: 1.25rem;
    font-weight: 400;
}

.a_ttl {
    color: #222;
    font-size: 1rem;
    font-weight: 400;
}

.qa_box li {
    background-color: #fff;
    padding: 0.5rem;
    margin: 2rem 0;
    border-radius: 1rem;
}

/* メッセージ */

.message_area {
    padding: 3rem 0 5rem;
    background-image: url(simg/message_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.message_box {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
}

.message_text {
    width: 60%;
}

.message_img {
    width: 32%;
}

.message_img img {
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.ttl_line {
    color: #222;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    padding-bottom: 5px;
}

.ttl_line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #49AAE0 0%, #D0E8DB 100%);
}

.message_text p {
    padding-top: 1rem;
}

.name_area {
    padding: 2rem 0 0;
    text-align: right;


}

.name_area strong {
    color: #333;
    font-family: "Noto Serif JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem;
    /* 140% */
}


/* ＝＝お問い合わせフォーム＝＝ */

.contact_box {
    width: 90%;
    margin: 0 auto;
    background: #E7F5FF;
    position: relative;
    top: -3rem;
    padding-bottom: 5rem;
}

.contact_area {
    background-color: #fff;
    padding-bottom: 3rem;
}


.contact_title {
    background: url(simg/contact_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 5rem 0;
}

.contact_text {
    text-align: center;
}

.contact_text h3 {
    color: #666;
    font-family: "Noto Sans JP";
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 600;
    padding: 2rem 0;
}

.contact_text h4 {
    color: #222;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    padding: 0 0 1rem;
}

.c_text {
    color: #222;
    font-family: "Noto Sans JP";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.tel_area {
    padding: 2rem 0;
}

.tel_area a {
    background-color: var(--sub_2);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.25rem 1rem;
    border-radius: 0.5rem;
}

.contact_phone_icon {
    width: 4rem;
}

.tel_box {
    display: flex;
    align-items: center;

}


.tel_box span {
    color: var(--main);
    font-family: "Open Sans";
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.b_hour {
    color: var(--main);
}



/* フォーム */

.form_box {
    width: 45%;
    margin: auto;
}

form {
    margin: 32px 0;
}

.form-box {
    width: 100%;
}

.form-box dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.form-box dt,
.form-box dd {
    padding-bottom: 30px;
}

.form-box dt {
    font-weight: 400;
    text-align: left;
}

.form-box dt.message {
    padding-top: 10px;
    vertical-align: top;
}

.form-box dd {
    width: 63.993%;
}

.required {
    display: inline-block;
}

.required::after {
    content: "※";
    display: inline-block;
    padding-left: 1em;
    color: #DA1725;
}

.form-style {
    width: 400px;
    padding: 8px;
    box-shadow: 0 0 0 1px #ccc inset;
    border-radius: 4px;
}

.form-style:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.btn-wrapper {
    margin-top: 30px;
    text-align: center;
}

.btn-submit {
    display: inline-block;
    min-width: 220px;
    padding: 10px;
    background-image: linear-gradient(to right, #333 0%, #333 50%, #FFFFFF 50%, #FFFFFF 100%);
    background-size: 200%;
    background-position-x: 0;
    border: 1px solid #333;
    border-radius: 5px;
    color: #FFFFFF;
    text-align: center;
    transition: 0.3s ease-in;
}

.btn-submit:hover {
    background-position-x: 100%;
    color: #333;
}


/* ＝＝フッター＝＝ */

.map_icon {
    width: 2.25rem;
}

.f_phone_icon {
    width: 2rem;
}

.fax_icon {
    width: 2rem;
}

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

.addres span {
    color: #222;
    font-family: "Kiwi Maru";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}

.footer_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
    padding: 3rem 0;
    border-top: 1px solid var(--main);
}

.addres_top {
    padding-top: 1.5rem;
}

.f_left_area {
    width: 50%;
    border-right: 1px solid #999;

}

.f_left_area a {
    transition: 500ms;
}

.f_left_area a:hover {
    opacity: 0.7;
}

.f_right_area {
    width: 50%;
    padding-left: 5rem;
}

.f_nav {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0.375rem 1.5625rem;
    flex-wrap: wrap;

}

.f_nav li {
    width: 45%;
}

.f_nav strong {
    color: #222;
    font-size: 1rem;
    font-weight: 400;
}


.f_nav a::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(simg/footer_right_icon.svg) no-repeat;
    background-size: contain;
    margin-right: 1px;
    position: relative;
    top: 6px;
}

small {
    color: #555;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: "Noto Sans JP";
    font-size: 12px;
}


.f_logo {
    width: 25rem;
}

/* ＝メディアクエリ＝ */

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

    /* 全体 */
    .br_sp {
        display: block;
    }

    .big_title {
        font-size: 1.5rem;
        padding: 0 1.5rem 0;
    }


    .sub_title {
        font-size: 1rem;
    }

    .sub_title_02 {
        font-size: 1rem;
    }

    .main_title {
        font-size: 1.115rem;
    }

    .recom_ttl::before {
        content: "";
        display: inline-block;
        width: 2.5rem;
        height: 2.5rem;
        background: url(simg/main_ttl.svg) no-repeat;
        background-size: contain;
        /* margin-right: 1px; */
        position: absolute;
        top: -1.5rem;
        left: 1.5rem;
    }



    .fukidashi {
        width: 3rem;
    }


    p {
        font-size: 0.825rem;
        line-height: 1.25rem;
    }

    .f_logo {
        width: 15rem;
    }

    /* メインビジュアル */


    .h_logo {
        width: 15rem;
        margin: 1rem 0 0 .5rem;
    }

    .mainvisual_pc {
        display: none;
    }

    .mainvisual_sp {
        display: block;
    }

    .recom_area {
        top: -1rem;
    }

    .recom_list {
        width: 95%
    }

    .recom_list li {
        font-size: 0.9rem;
        padding: 0.75rem 0 1rem 2rem;
    }

    .recom_list li::before {
        width: 1.5rem;
        height: 1.5rem;
    }

    .recom_img {
        width: 20rem;
        position: static;
    }

    .overview_area {
        padding: 2rem 0;
    }

    .price_box {
        width: 95%;
    }

    .price_img {
        width: 20rem;
        top: 2rem;
        right: -2rem;
    }

    .price_main p {
        padding-top: 2rem;
        font-size: 1.5rem;
        font-weight: 500;

    }

    .price_main strong {
        margin-left: 4rem;
        font-size: 5rem;
    }

    /* 含まれる内容 */
    .overview_box {
        width: 95%;
    }

    .overview_container {
        flex-direction: column;
        justify-content: center;
    }

    .overview_left {
        display: flex;
        justify-content: center;
        gap: 1rem;
        width: 80%;
    }

    .iphone_img {
        width: 13rem;
    }

    .overview_p {
        font-size: 1rem;
    }

    .overview_right {
        width: 100%;
        padding: 0.5rem;
    }

    .overview_ttl {
        font-size: 1.25rem;
    }

    .feature-term {
        font-size: 1.115rem;
    }

    .text_area p {
        font-size: 1rem;
    }

    .contact_ttl {
        font-size: 1.5rem;
    }

    /* ＝＝制作の流れ＝＝ */


    .flow_list {
        width: 90%;
        padding: 2rem 0 2rem 2rem;
    }

    .flow_ttl h3 {
        font-size: 1rem;
    }

    .flow_contact {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .flow_list p {
        font-size: 0.825rem;
    }

    .flow_phone_box p {
        font-size: 0.5rem;
    }

    .flow_text {
        font-size: 1rem;
    }

    /* よくある質問 */


    .qa_container {
        width: 98%;
    }

    .q_strong {
        font-size: 1.5rem;
    }

    .a_strong {
        font-size: 1.5rem;
    }

    .q_ttl {
        font-size: 1rem;
    }

    .a_ttl {
        font-size: 0.825rem;
    }

    .qa_box dt {
        padding-left: 0;
    }

    /* メッセージ */

    .message_box {
        width: 95%;
        flex-direction: column-reverse;
        gap: 3rem;
    }

    .message_text {
        width: 100%;
    }

    .message_img {
        width: 100%;
    }


    .name_area strong {
        font-size: 1.115rem;
    }

    /* お問い合わせエリア */

    .contact_box {
        width: 95%;
        padding: 0 1rem 2rem;
    }

    .contact_text h3 {
        font-size: 1.5rem;
    }

    .c_text {
        font-size: 1rem;
    }

    .contact_phone_icon {
        width: 2.5rem;
    }

    .tel_box span {
        font-size: 2rem;
    }

    .b_hour {
        font-size: 0.75rem;
    }

    /* フォーム */
    footer {
        background: #fff;
    }

    .form_box {
        width: 98%;
    }

    .form-wrapper {
        max-width: 97%;
        margin: 0 auto;
        padding: 16px;
    }

    .form-wrapper p {
        font-size: 0.9rem;
    }

    .form-box dl {
        display: flex;
        flex-direction: column;
    }

    .form-box dd {
        width: 100%;
    }

    .form-style {
        width: 100%;
    }

    /* フッター */
    footer {
        border-top: none;
    }

    .f_right_area {
        display: none;
    }

    .f_left_area {
        width: 100%;
        border-right: none;
    }



}



/* ＝＝J-Query＝＝ */

.fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
}

/* フェードイン */
.is-fadein {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* ページトップ */
#page-top a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--main);
    border-radius: 5px;
    width: 60px;
    height: 60px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.6rem;
    transition: all 0.3s;
}

#page-top a:hover {
    background: var(--sub);
}

/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 101;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove {
    animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*　右の動き　*/

#page-top.RightMove {
    animation: RightAnime 0.5s forwards;
}

@keyframes RightAnime {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 1;
        transform: translateX(100px);
    }
}