@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
トップページ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

body.home {
    /* インナー要素 */
    .max-1324 {
        max-width: 132.4rem;
        margin: auto;
        &.padding {
            padding: 0 3rem;
            @media screen and (max-width: 480px) {
                padding: 0 2rem;
            }
        }
    }
    /*--------------------*/
    /* ファミリーボイス */
    .family_voice_wrap {
        background-image: url(../img/top/top_family_voice-bg-pc.webp);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        @media screen and (max-width: 480px) {
            background-image: url(../img/top/top_family_voice-bg-sp.webp);
            background-position: top center;
            background-size: contain;
        }
        .family_voice_inner {
            height: 62.6rem;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;

            &::before {
                content: "";
                display: block;
                width: 84rem;
                aspect-ratio: 840/350;
                background-image: url(../img/common/page_bg-mokumoku-white.webp);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: top left;
                position: absolute;
                left: 0;
                bottom: -2.2rem;
            }
            @media screen and (max-width: 480px) {
                height: 71rem;
                padding-top: 41rem;
                &::before {
                    aspect-ratio: 694/350;
                    width: 69.4rem;
                    bottom: 1.5rem;
                    left: -6.8rem;
                }
            }
            .text_wrap {
                color: var(--color-blown);
                position: absolute;
                left: 10rem;
                bottom: 6.2rem;
                @media screen and (max-width: 480px) {
                    position: relative;
                    padding: 0 2rem;
                    left: auto;
                    bottom: auto;
                }
                h2 {
                    margin-bottom: 5.4rem;
                    font-size: 8.5rem;
                    font-weight: 700;
                    text-align: left;
                    letter-spacing: 0.04em;
                    @media screen and (max-width: 480px) {
                        margin-bottom: 7.6rem;
                        line-height: 7rem;
                        margin-bottom: 2rem;
                    }
                }
                p {
                    font-size: 1.7rem;
                    letter-spacing: 0.03em;
                    line-height: 2.2;
                    font-weight: 700;
                    @media screen and (max-width: 480px) {
                        font-size: 1.5rem;
                    }
                }
            }
        }
    }
    /*--------------------*/
    /* 金屋こども園だより */
    .info_entry_list_wrap {
        background-color: #fffbf3;
        padding: 7rem 0 13rem;
        position: relative;
        @media screen and (max-width: 480px) {
            padding: 1.5rem 0 5.5rem;
        }
        h2 {
            text-align: center;
            margin-bottom: 6.4rem;
            @media screen and (max-width: 480px) {
                margin-bottom: 1.6rem;
            }
            & > span {
                display: block;
                line-height: 1.5;
                &.ja {
                    font-size: 3.9rem;
                    color: var(--color-blown);
                    margin-bottom: 0.5rem;
                    letter-spacing: 0.12em;
                    padding-left: 0.12em;
                    @media screen and (max-width: 480px) {
                        font-size: 3rem;
                    }
                }
                &.en {
                    font-size: 1.4rem;
                    letter-spacing: 0.22em;
                    padding-left: 0.22em;
                }
            }
        }
        .info_entry_list {
            .info_entry_item {
                width: 29.6rem;
                &:nth-of-type(2n) {
                    padding-top: 4rem;
                }
                @media screen and (max-width: 480px) {
                    &:nth-of-type(2n) {
                        padding-top: 0;
                    }
                }
                a {
                    display: block;
                    padding: 1.5rem;

                    .img_wrap {
                        position: relative;
                        margin-bottom: 4rem;
                        .thumb_wrap {
                            aspect-ratio: 266/186;
                            border-radius: 6rem;
                            overflow: hidden;
                        }
                        .tax {
                            position: absolute;
                            left: -1rem;
                            bottom: -1rem;
                            font-size: 1.5rem;
                            padding: 0.6em 1em;
                        }
                    }
                    .text_wrap {
                        font-weight: 700;
                        color: var(--color-blown);
                        padding: 0 1.65rem;
                        .date {
                            font-size: 1.4rem;
                        }
                        h3 {
                            margin-top: 1.2rem;
                            font-size: 1.9rem;
                            line-height: 1.58;
                        }
                    }
                    &:hover {
                        opacity: 1;
                        .text_wrap {
                            h3 {
                                background-color: #dfcab4;
                                transition: all 0.1s ease-in;
                            }
                        }
                    }
                }
            }
        }
        /* 同一デザイン */
        .tax,
        .button_archive {
            background-color: #fff;
            display: block;
            border: 2px dotted var(--color-yellow);
            box-sizing: border-box;
            font-weight: 700;
            color: var(--color-green);
            border-radius: 9999px;
            box-shadow: 0 0 0 0.5rem #fffbf3;
        }
        /* 一覧へのリンク */
        .button_archive {
            position: absolute;
            padding: 1.17em 1.8em;
            font-size: 1.7rem;
            text-align: center;
            right: 3.1rem;
            top: 6.8rem;
            span {
                padding-left: 1em;
            }
            @media screen and (max-width: 1024px) {
                position: static;
                width: calc(100% - 8rem);
                max-width: 36rem;
                margin: 3rem auto 0;
            }
        }
    }
    /*--------------------*/
    /* JOIN */
    .join_wrap {
        background-color: #e9e0c7;
        padding: 10rem 0 16rem;
        background-image: url(../img/common/page_bg-mokumoku-blown.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top left;
        color: var(--color-blown);
        position: relative;
        @media screen and (max-width: 480px) {
            padding: 9rem 0 11rem;
            background-size: 166% auto;
            background-position: left -6rem top 0;
        }
        /* 画像の罫線と角丸 */
        .img_border_wrap {
            box-sizing: border-box;
            border: 1px solid #fff;
            border-radius: min(4.53vw, 6rem);
            overflow: hidden;
            @media screen and (max-width: 480px) {
                border-radius: 6rem;
            }
        }
        /* 子供の画像 */
        .children_img {
            position: absolute;
            z-index: 20;
            &.child-06 {
                width: min(8.23vw, 10.9rem);
                top: min(1.51vw, 2rem);
                right: min(12.83vw, 17rem);
            }
            &.child-10 {
                width: min(17.9vw, 23.7rem);
                top: min(6.11vw, 8.1rem);
                right: min(27.1vw, 35.9rem);
            }
            @media screen and (max-width: 1024px) {
                &.child-06 {
                    top: 8vw;
                    right: 8vw;
                }
                &.child-10 {
                    width: min(17.9vw, 23.7rem);
                    top: 18vw;
                    right: 19vw;
                }
            }
            @media screen and (max-width: 480px) {
                display: none;
            }
        }
        h2 {
            font-size: min(6.87vw, 9.1rem);
            color: var(--color-blown);
            font-weight: 700;
            letter-spacing: 0.03em;
            position: absolute;
            z-index: 20;
            top: 10rem;
            left: 50%;
            transform: translate(-110%, -55%);
            @media screen and (max-width: 1024px) {
                transform: translate(-58%, -55%);
            }
            @media screen and (max-width: 480px) {
                font-size: 7.1rem;
                right: 2rem;
                left: auto;
                transform: translate(0, -55%);
            }
        }
        .join_inner {
            margin: auto;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            @media screen and (max-width: 1024px) {
                flex-direction: column;
                gap: min(7.4vw, 9.8rem);
            }
            @media screen and (max-width: 480px) {
                align-items: flex-start;
                gap: 3.2rem;
            }
            .title_wrap {
                display: flex;
                flex-direction: column;
                gap: min(5.9vw, 7.8rem);
                max-width: 59.6rem;
                padding-bottom: min(7.93vw, 10.5rem);
                width: 45.1%;
                @media (min-width: 481px) and (max-width: 1024px) {
                    flex-direction: row;
                    gap: min(5.86vw, 6rem);
                    max-width: 100%;
                    width: 100%;
                    align-items: flex-end;
                    padding-bottom: 0;
                    .img_wrap {
                        width: 52%;
                        flex-shrink: 0;
                    }
                }
                @media screen and (max-width: 480px) {
                    max-width: 100%;
                    width: 100%;
                    gap: 1.7rem;
                    padding-bottom: 0;
                    .img_wrap {
                        width: 31.4rem;
                    }
                }
                .text_wrap {
                    padding: 0 2rem;
                    @media screen and (max-width: 480px) {
                        padding: 0;
                    }
                    h3 {
                        font-size: min(2.11vw, 2.8rem);
                        margin-bottom: 0.8125em;
                        letter-spacing: 0.15em;
                        line-height: 1.7;
                        @media screen and (max-width: 480px) {
                            font-size: 2.8rem;
                            margin-bottom: 1rem;
                        }
                    }
                    p {
                        font-size: min(1.28vw, 1.7rem);
                        line-height: 2.23;
                        font-weight: 700;
                        @media screen and (max-width: 480px) {
                            font-size: 1.7rem;
                        }
                    }
                }
            }
            .join_list {
                max-width: 62.6rem;
                width: 47.3%;
                display: flex;
                flex-direction: column;
                gap: min(7.4vw, 9.8rem);
                @media (min-width: 481px) and (max-width: 1024px) {
                    flex-direction: row;
                    width: 100%;
                    max-width: 100%;
                }
                @media screen and (max-width: 480px) {
                    width: 100%;
                    gap: 6.9rem;
                }
                .join-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    @media screen and (max-width: 480px) {
                        flex-direction: column;
                        gap: 1.9rem;
                    }
                    .thumb_wrap {
                        max-width: 25.1rem;
                        width: 40.1%;
                        @media screen and (max-width: 480px) {
                            max-width: 100%;
                            width: 100%;
                            aspect-ratio: 348/227;
                        }
                    }
                    .text_wrap {
                        max-width: 34.2rem;
                        width: 54.7%;
                        @media screen and (max-width: 480px) {
                            max-width: 100%;
                            width: 100%;
                        }
                        h3 {
                            padding: 0 1.5rem;
                            font-size: min(2.42vw, 3.2rem);
                            margin-bottom: 0.6875em;
                            @media screen and (max-width: 480px) {
                                font-size: 3.2rem;
                                padding: 0;
                            }
                        }
                        p {
                            padding: 0 1.5rem;
                            font-size: min(1.36vw, 1.8rem);
                            line-height: 1.75;
                            margin-bottom: 1.667em;
                            font-weight: 700;
                            @media screen and (max-width: 480px) {
                                font-size: 1.8rem;
                                padding: 0;
                            }
                        }
                    }
                }
            }
        }
    }
    /*--------------------*/
    /* 紹介 */
    .introduction_wrap {
        margin: 0 auto 8rem;
        padding-top: 4.8rem;
        @media screen and (max-width: 480px) {
            padding-top: 2.4rem;
            margin: 0 auto 5rem;
        }
    }
    /*--------------------*/
    /* LIFE */
    .life_wrap {
        .life-item {
            padding-bottom: 19.3rem;
            position: relative;
            @media screen and (max-width: 480px) {
                padding-bottom: 12.3rem;
            }

            h2 {
                font-size: min(9.74vw, 12.9rem);
                position: relative;
                z-index: 20;
                @media screen and (max-width: 480px) {
                    font-size: 7.1rem;
                    margin-bottom: 2.2rem;
                }
                span {
                    font-weight: 700;
                    letter-spacing: 0.02em;
                }
            }
            &:nth-child(2n + 1) {
                .life-item_inner {
                    flex-direction: row-reverse;
                }
            }
            .life-item_inner {
                display: flex;
                justify-content: center;
                gap: min(6.34vw, 8.4rem);
                align-items: flex-end;
                position: relative;

                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    width: calc(100% - 6rem);
                    height: 95%;
                    bottom: -7rem;
                    left: 50%;
                    background-color: #fff;
                    z-index: 1;
                    transform: translateX(-50%);
                    border-radius: min(4.53vw, 6rem);
                }
                @media screen and (max-width: 480px) {
                    display: block;
                    border-radius: 5.8rem;
                    padding-bottom: 6rem;
                    &::before {
                        width: calc(100% - 4rem);
                        height: 100%;
                        bottom: 0;
                        border-radius: 5.8rem;
                    }
                }

                .children_img {
                    position: absolute;
                    z-index: 30;
                }

                .text_wrap {
                    max-width: 47.8rem;
                    width: 36.5%;
                    position: relative;
                    z-index: 10;
                    @media screen and (max-width: 480px) {
                        max-width: 100%;
                        width: calc(100% - 2.4rem);
                        margin: -7.8rem auto 0;
                    }
                    .title_wrap {
                        padding-left: min(4.1vw, 5.4rem);
                        position: relative;
                        @media screen and (max-width: 480px) {
                            padding-left: 2.9rem;
                        }
                        .ja_wrap {
                            font-size: min(2.12vw, 2.8rem);
                            @media screen and (max-width: 480px) {
                                font-size: 2.5rem;
                            }
                            span.outer {
                                margin-bottom: 0.18em;
                                display: inline-block;
                                padding: 0 0.14em 0.14em 0;
                                border-radius: 0.7em;
                                span.inner {
                                    background-color: #fffbf3;
                                    display: inline-block;
                                    font-weight: 700;
                                    line-height: 2.4;
                                    padding: 0 0.46em;
                                    border-radius: 0.68em;
                                }
                            }
                        }
                        .en_wrap {
                            font-size: min(1.06vw, 1.4rem);
                            position: absolute;
                            top: 0;
                            left: 0;
                            writing-mode: vertical-rl;
                            @media screen and (max-width: 480px) {
                                font-size: 1.1rem;
                            }
                        }
                    }
                    p {
                        font-size: min(1.28vw, 1.7rem);
                        line-height: 2.24;
                        font-weight: 700;
                        margin: 1.4em 0 2.9em;
                        letter-spacing: 0.02em;
                        @media screen and (max-width: 480px) {
                            font-size: 1.6rem;
                            padding: 0 1.8rem;
                            margin: 2.125em 0 1.375em;
                        }
                    }
                    a.button_kakumaru {
                        @media screen and (min-width: 481px) {
                            border-width: min(0.38vw, 0.5rem);
                            span.button_inner {
                                height: min(4.53vw, 6rem);
                                span.head_sankaku {
                                    font-size: min(1.44vw, 1.9rem);
                                }
                            }
                        }
                    }
                }
                .img_wrap {
                    position: relative;
                    z-index: 5;
                    max-width: 61.9rem;
                    width: 47%;
                    flex-shrink: 0;
                    box-sizing: border-box;
                    border: 1.2rem solid #fff;
                    border-radius: min(7.55vw, 10rem);
                    overflow: hidden;
                    @media screen and (max-width: 480px) {
                        max-width: 100%;
                        width: 100%;
                        border-radius: 5.8rem;
                    }
                }
            }
            &.life-01 {
                background-color: var(--color-light-yellow);
                padding-top: min(2.5vw, 3.3rem);
                position: relative;
                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 100%;
                    aspect-ratio: 1440/57;
                    top: 0;
                    left: 0;
                    background-image: url(../img/common/wave_top-round-yellow.svg);
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                    transform: translate(0, -90%);
                }

                h2 {
                    color: #59f398;
                }
                .life-item_inner {
                    .children_img {
                        &.child-11 {
                            width: min(16.2vw, 21.4rem);
                            right: min(10.34vw, 17.5rem);
                            bottom: 0;
                            transform: translateY(41%);
                            @media screen and (max-width: 480px) {
                                width: 15.5rem;
                                right: 10.9rem;
                                bottom: -11.5rem;
                                transform: none;
                            }
                        }
                        &.illust-butterfly {
                            width: min(2.5vw, 3.6rem);
                            right: min(11.3vw, 15rem);
                            bottom: 0;
                            transform: translateY(29%);
                            @media screen and (max-width: 480px) {
                                display: none;
                            }
                        }
                    }
                    .text_wrap {
                        .title_wrap {
                            .ja_wrap {
                                span.outer {
                                    background-color: var(--color-blown);
                                    span.inner {
                                        background-color: #fffbf3;
                                        color: #18c35f;
                                    }
                                }
                            }
                        }
                        p {
                            color: #18c35f;
                        }
                    }
                }
            }
            &.life-02 {
                background-color: var(--color-light-blue);
                padding-bottom: min(20.4vw, 27rem);
                @media screen and (max-width: 480px) {
                    padding-bottom: 18rem;
                }
                h2 {
                    color: #afafef;
                    @media screen and (min-width: 481px) {
                        text-align: center;
                    }
                }
                .life-item_inner {
                    margin-top: min(3.02vw, -4rem);
                    @media screen and (max-width: 1280px) {
                        margin-top: min(1.51vw, -2rem);
                    }
                    @media screen and (max-width: 1024px) {
                        margin-top: 0;
                    }
                    .children_img {
                        &.child-14 {
                            width: min(28.85vw, 38.2rem);
                            left: min(5.5vw, 7.3rem);
                            bottom: 0;
                            transform: translateY(71%);
                            @media screen and (max-width: 480px) {
                                width: 15.8rem;
                                left: 12.3rem;
                                bottom: 0;
                                transform: translateY(76%);
                            }
                        }
                    }
                    .text_wrap {
                        .title_wrap {
                            .ja_wrap {
                                span.outer {
                                    background-color: var(--color-deep-blue);
                                    span.inner {
                                        color: var(--color-deep-blue);
                                    }
                                }
                            }
                        }
                        p {
                            color: var(--color-deep-blue);
                        }
                    }
                }
            }
            &.life-03 {
                background-color: var(--color-light-green);
                padding-bottom: min(18.9vw, 25rem);
                @media screen and (max-width: 480px) {
                    padding-bottom: 21rem;
                }
                h2 {
                    color: #96ce53;
                    @media screen and (min-width: 481px) {
                        text-align: right;
                    }
                }
                .life-item_inner {
                    margin-top: min(3.02vw, -4rem);
                    @media screen and (max-width: 1280px) {
                        margin-top: min(1.51vw, -2rem);
                    }
                    @media screen and (max-width: 1024px) {
                        margin-top: 0;
                    }
                    .children_img {
                        &.child-15 {
                            width: min(13.75vw, 18.2rem);
                            right: min(10.12vw, 13.4rem);
                            bottom: 0;
                            transform: translateY(45%);
                            @media screen and (max-width: 480px) {
                                width: 13rem;
                                right: 12.1rem;
                                bottom: 0;
                                transform: translateY(78%);
                            }
                        }
                    }
                    .text_wrap {
                        .title_wrap {
                            .ja_wrap {
                                span.outer {
                                    background-color: #069200;
                                    span.inner {
                                        color: #069200;
                                    }
                                }
                            }
                        }
                        p {
                            color: #069200;
                        }
                    }
                }
            }
        }
    }
    /*--------------------*/
    /* リード */
    .top_lead_wrap {
        background-image: url(../img/common/top_lead-bg.svg);
        background-position: right top;
        background-size: 100% auto;
        margin-top: max(-27.2vw, -39.3rem);
        padding-top: min(22.29vw, 32rem);

        @media screen and (max-width: 1024px) {
            padding-top: 28rem;
        }
        @media screen and (max-width: 480px) {
            padding-top: 14.3rem;
            background-size: 67.6rem auto;
            background-position: right -2.8rem top;
            margin-top: -8.8rem;
        }
        position: relative;
        .top_lead_inner {
            position: relative;
            padding-bottom: 27.6rem;
            @media screen and (max-width: 1024px) {
            }
            .text_wrap {
                position: relative;
                left: min(78rem, 58.9%);
                width: 45.8rem;
                @media screen and (max-width: 1280px) {
                    left: 50%;
                }
                @media screen and (max-width: 1024px) {
                    left: auto;
                    width: 100%;
                    max-width: 64rem;
                    margin: auto;
                }
                h2 {
                    font-size: 1.6rem;
                    color: #000;
                    font-weight: 700;
                    letter-spacing: 0.2em;
                    margin-bottom: 5.2rem;
                }
                p {
                    font-size: 1.8rem;
                    line-height: 2.6;
                    font-weight: 700;
                    margin-bottom: 9rem;
                    @media screen and (max-width: 480px) {
                        margin-bottom: 4.4rem;
                        font-size: 1.6rem;
                    }
                }
                a.button_yajirushi {
                    max-width: 25.3rem;
                    @media screen and (max-width: 480px) {
                        max-width: 100%;
                    }
                }
            }
            .children {
                position: absolute;
                top: 0;
                right: 50%;
                &.child-concept {
                    width: 107.4rem;
                    top: auto;
                    bottom: 0;
                    transform: translateX(11.8%);
                    @media screen and (max-width: 1024px) {
                        width: 70%;
                        min-width: 50.6rem;
                        transform: translate(41%, 20%);
                    }
                }
                &.child-11 {
                    width: 24.5rem;
                    transform: translate(249.4%, -62.9%);
                    @media screen and (max-width: 1024px) {
                        transform: translate(118%, -62.9%);
                    }
                    @media screen and (max-width: 480px) {
                        width: 13.9rem;
                        transform: translate(118%, -30%);
                    }
                }
                &.child-06 {
                    width: 7.9rem;
                    transform: translate(-370%, 58%);
                    @media screen and (max-width: 1024px) {
                        transform: translate(460%, 0%);
                    }
                    @media screen and (max-width: 480px) {
                        display: none;
                    }
                }
                &.child-09 {
                    width: 11.2rem;
                    transform: translate(-80%, 71%);
                    @media screen and (max-width: 1024px) {
                        transform: translate(280%, 280%);
                    }
                    @media screen and (max-width: 480px) {
                        display: none;
                    }
                }
                &.child-08 {
                    width: 21.7rem;
                    transform: translate(-181%, 64.6%);
                    @media screen and (max-width: 1024px) {
                        transform: translate(181%, 60%);
                    }
                    @media screen and (max-width: 480px) {
                        display: none;
                    }
                }
            }
        }
    }
    /*--------------------*/
    /* メインイメージ */
    .main_img_wrap {
        max-width: 144rem;
        margin: auto;
        aspect-ratio: 1440/1208;
        background-image: url(../img/top/top_main-bg.webp);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        position: relative;
        @media screen and (max-width: 480px) {
            width: 100%;
            aspect-ratio: 390/552;
            background-image: none;
        }
        .main-item {
            position: absolute;
            right: 50%;
            bottom: 50%;
        }
        .hanabi {
            max-width: 127.8rem;
            width: 88.75vw;
            transform: translate(47.2%, 53.62%);
            @media screen and (max-width: 480px) {
                width: 100%;
                transform: translate(50%, 36.4%);
            }
        }
        .catchcopy {
            max-width: 67.4rem;
            width: 46.81vw;
            transform: translate(43.48%, 40.52%);
            @media screen and (max-width: 480px) {
                width: 34.2rem;
                transform: translate(48.5%, 28.57%);
            }
        }
        .children {
            &.child-01 {
                max-width: 21.4rem;
                width: 14.87vw;
                transform: translate(-158.88%, -45.64%);
                @media screen and (max-width: 480px) {
                    width: 8.4rem;
                    transform: translate(-114.3%, -130.5%);
                }
            }
            &.child-02 {
                max-width: 15.3rem;
                width: 10.625vw;
                transform: translate(241.8%, -3.8%);
                @media screen and (max-width: 480px) {
                    display: none;
                }
            }
            &.child-03 {
                max-width: 17.6rem;
                width: 12.23vw;
                transform: translate(-223.3%, 222.3%);
                @media screen and (max-width: 480px) {
                    display: none;
                }
            }
            &.child-04 {
                max-width: 52rem;
                width: 36.12vw;
                transform: translate(1%, 102.55%);
                @media screen and (max-width: 480px) {
                    width: 17.3rem;
                    transform: translate(-30%, 129.7%);
                }
            }
            &.child-05 {
                max-width: 52.4rem;
                width: 36.39vw;
                bottom: 0;
                transform: translate(48.84%, 0);
                @media screen and (max-width: 480px) {
                    width: 22.9rem;
                    transform: translate(38.4%, 0);
                }
            }
            &.child-06 {
                max-width: 71.5rem;
                width: 49.66vw;
                bottom: 0;
                transform: translate(112.7%, 4.18%);
                @media screen and (max-width: 480px) {
                    width: 30.4rem;
                    transform: translate(100%, 32.5%);
                }
            }
        }
    }
}