@charset "utf-8";

.cta {
    background-color: var(--swamp);
    overflow: hidden;



    .column {
        max-width: 1058px;
        width: 90%;
        margin: 0 auto;
        display: flex;
        gap: 180px;
        padding: 80px 0 90px;

        @media (max-width: 900px) {
            flex-direction: column;
            gap: 37px;
        }


        .col-head {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            @media (max-width: 900px) {
                align-items: center;
            }
        }

        .sec-head {

            .line-l,
            .line-r {
                z-index: 1;
            }

            .line-r {
                width: 160px;
                height: 160px;
                bottom: calc(100% - 48px);
                left: calc(100% + 7px);
                top: auto;

                .diagonal {
                    width: 223px;
                }
            }

            .line-l {
                width: 176px;
                height: 176px;
                top: calc(100% - 35px);

                .diagonal {
                    width: 242px;
                }
            }
        }

        .sec-ttl {
            font-family: var(--font-en);
            font-weight: normal;
            font-size: 101px;
            color: #fff;
            transform: scaleX(0.9);

            @media (max-width: 1023px) {
                font-size: 92px;
            }
        }



        .sub-title {
            font-family: var(--font-main);
            font-weight: 700;
            font-size: 24px;
            color: #fff;

            @media (max-width: 1023px) {
                font-size: 19px;
            }
        }

        .desc {
            font-family: var(--font-main);
            font-weight: 700;
            line-height: 25px;
            font-size: max(14px, 17px);
            color: #fff;

            @media (max-width: 1023px) {
                font-size: 14px;
            }
        }

        .col-btn {
            max-width: 469px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 28px;

            @media (max-width: 1023px) {
                flex: 1;
            }

            @media (max-width: 900px) {
                max-width: 310px;
                gap: 20px;
                margin: 0 auto;
            }

            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 25px;
                height: 88px;
                border-radius: 50px;
                transition: all .4s ease;
                padding: 0 40px 0 47px;

                @media (max-width: 1023px) {

                    gap: 0;
                    justify-content: space-around;
                }

                @media (max-width: 900px) {
                    height: 58px;
                    padding: 0 20px 0 31px;
                }

                .linktext {
                    font-family: var(--font-main);
                    font-weight: 700;
                    font-size: 24px;

                    @media (max-width: 1023px) {
                        font-size: 18px;
                    }

                    @media (max-width: 900px) {
                        font-size: 18px;
                    }
                }
            }

            .item:hover {
                filter: opacity(50%);
                transition: all .4s ease;
            }

            .item.btn-contact {
                background-color: #FFFFFF;

                .linktext {
                    color: #00141f;
                }
            }

            .item.btn-tel {
                border: 1px solid #FFF;

                .linktext {
                    color: #FFF;
                }
            }
        }
    }
}

.footer {
    background-color: var(--tangaroa);
    padding: 70px 0 40px;

    @media (max-width: 900px) {
        padding: 40px 0 30px;
    }

    .sec-head {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 33px;
        margin-bottom: 56px;

        @media (max-width: 900px) {
            flex-direction: column;
            gap: 9px;
        }

        .f_logo {
            max-width: 511px;
            width: 100%;

            @media (max-width: 900px) {
                max-width: 310px;
            }
        }

        a {
            transition: all .4s ease;
        }

        a:hover {
            transition: all .4s ease;
            filter: opacity(80%);
        }
    }

    .sec-menu {
        max-width: 1137px;
        width: 95%;
        display: flex;
        gap: 50px;
        justify-content: space-between;
        margin: 0 auto 70px;

        @media (max-width: 1023px) {
            gap: 0;
            width: 90%;
        }

        @media (max-width: 900px) {
            flex-direction: column;
            gap: 40px;
            margin-bottom: 80px;
        }
    }



    .copy {
        font-family: var(--font-main);
        font-weight: 700;
        font-size: max(12px, 14px);
        text-align: center;
        color: #fff;
    }
}