@charset "utf-8";

:root {
    --fmain: "IBM Plex Sans JP",
        sans-serif;
    --fen: "Italiana",
        sans-serif;
    --fsub: "Zen Old Mincho",
        serif;
    --cmain: #003657;
}

h1,
h2,
h3,
h4 {
    text-wrap: unset;
}

a {
    color: inherit;
}

a:hover {
    text-decoration: none;
    transition: .4 ease;
    color: initial;
}

.container {
    max-width: none;
    padding: 0;
    margin: 0;
}

html {
    margin: 0;
}

img.w100 {
    max-width: 100%;
    height: auto;
}

.f-en {
    font-family: var(--fen);
}


body {
    word-break: auto-phrase;
    font-family: var(--fmain);
    background-color: #FFFDF5;
    color: #003657;
}

.no-scroll {
    overflow: hidden;
}

.w962 {
    max-width: 962px;
    width: 90%;
    margin: 0 auto;
}

.w967 {
    max-width: 967px;
    width: 90%;
    margin: 0 auto;
}

.w1152 {
    max-width: 1152px;
    width: 90%;
    margin: 0 auto;
}

.w1344 {
    max-width: 1344px;
    width: 90%;
    margin: 0 auto;
}

.w1440 {
    max-width: 1440px;
    width: 90%;
    margin: 0 auto;
}

.w1536 {
    max-width: 1536px;
    width: 90%;
    margin: 0 auto;
}

.w1728 {
    max-width: 1728px;
    width: 90%;
    margin: 0 auto;
}

.common-cta {
    background-color: #F5EEE1;
    margin-bottom: 120px;

    .inner {
        padding: 28px 0;
        display: flex;
        gap: 76px;
        align-items: center;

        .head {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .ttl-en {
                font-family: var(--fen);
                font-weight: normal;
                --fmin: 49;
                --fmax: 96;
                font-size: clamp(3.063rem, 1.108rem + 4.08vw, 6rem);
                color: #003657;
            }

            .desc {
                font-family: var(--fmain);
                font-weight: 500;
                --fmin: 11;
                --fmax: 18;
                font-size: clamp(0.688rem, 0.396rem + 0.61vw, 1.125rem);
                line-height: calc(25/18*100%);
                text-align: center;
                color: #003657;
            }
        }

        .middle {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 26px;

            .cta-tel {
                display: flex;
                gap: 16px;
                align-items: flex-end;
                font-family: var(--fmain);

                .f-16 {
                    --fmin: 11;
                    --fmax: 16;
                    font-size: clamp(0.688rem, 0.48rem + 0.43vw, 1rem);
                }

                .f-24 {
                    --fmin: 18;
                    --fmax: 24;
                    font-size: clamp(1.125rem, 0.876rem + 0.52vw, 1.5rem);
                }

                .f-48 {
                    --fmin: 32;
                    --fmax: 48;
                    font-size: clamp(2rem, 1.335rem + 1.39vw, 3rem);
                    font-weight: 500;
                    line-height: 1;
                }
            }

            .column {
                display: flex;
                gap: 28px;

                a {
                    max-width: 380px;
                    width: 100%;
                    display: flex;
                    height: 92px;
                    padding: 0 30px;
                }

                .cta-form {
                    border-radius: 3px;
                    background-color: #003657;
                    font-family: var(--fmain);
                    font-weight: 600;
                    font-size: 18px;
                    color: #fff;
                    gap: 24px;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 25px;
                        height: auto;
                    }
                }

                .cta-line {
                    border-radius: 3px;
                    background: #fff;
                    border: 3px solid #03c755;
                    font-family: var(--fmain);
                    font-weight: 500;
                    font-size: 18px;
                    color: #003657;
                    gap: 12px;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 40px;
                        height: auto;
                    }
                }
            }
        }

        .img {
            --fmin: 68;
            --fmax: 229;
            max-width: clamp(4.25rem, -2.444rem + 13.96vw, 14.313rem);
            width: 100%;
        }
    }
}

@media(max-width:1170px) {
    .common-cta {
        .inner {
            padding: 28px 0 32px;
            flex-direction: column;
            gap: 0;

            .head {
                margin-bottom: 40px;
            }

            .middle {
                align-items: center;
                width: 65%;
                margin-bottom: 30px;



                .column {
                    width: 100%;

                    a {
                        max-width: 100%;
                    }


                }
            }


        }
    }
}

@media(max-width:980px) {
    .common-cta {
        max-width: calc(350/390*100%);
        margin: 0 auto 120px;

        .inner {
            max-width: 80%;
            align-items: flex-start;
            position: relative;

            .head {
                .desc {
                    text-align: left;
                }
            }

            .middle {
                width: 100%;
                align-items: flex-start;

                .cta-tel {
                    flex-wrap: wrap;
                    gap: 7px 14px;
                    margin: 0 auto;

                    .f-16 {
                        width: 100%;
                        text-align: right;
                    }
                }

                .column {
                    flex-direction: column;
                    gap: 16px;
                    a {
                        height: 65px;
                    }
                }
            }

            .img {
                position: absolute;
                top: 43px;
                right: 20px;
            }


        }
    }
}

/* =====================================================
   Font-size Utility Classes
   f-XX → font-size: XXpx;
   8px 〜 80px を網羅
===================================================== */
/* 8〜80px 全部フル出力 */

.f-8 {
    font-size: 8px;
}

.f-9 {
    font-size: 9px;
}

.f-10 {
    font-size: 10px;
}

.f-11 {
    font-size: 11px;
}

.f-12 {
    font-size: 12px;
}

.f-13 {
    font-size: 13px;
}

.f-14 {
    font-size: 14px;
}

.f-15 {
    font-size: 15px;
}

.f-16 {
    font-size: 16px;
}

.f-17 {
    font-size: 17px;
}

.f-18 {
    font-size: 18px;
}

.f-19 {
    font-size: 19px;
}

.f-20 {
    font-size: 20px;
}

.f-21 {
    font-size: 21px;
}

.f-22 {
    font-size: 22px;
}

.f-23 {
    font-size: 23px;
}

.f-24 {
    font-size: 24px;
}

.f-25 {
    font-size: 25px;
}

.f-26 {
    font-size: 26px;
}

.f-27 {
    font-size: 27px;
}

.f-28 {
    font-size: 28px;
}

.f-29 {
    font-size: 29px;
}

.f-30 {
    font-size: 30px;
}

.f-31 {
    font-size: 31px;
}

.f-32 {
    font-size: 32px;
}

.f-33 {
    font-size: 33px;
}

.f-34 {
    font-size: 34px;
}

.f-35 {
    font-size: 35px;
}

.f-36 {
    font-size: 36px;
}

.f-37 {
    font-size: 37px;
}

.f-38 {
    font-size: 38px;
}

.f-39 {
    font-size: 39px;
}

.f-40 {
    font-size: 40px;
}

.f-41 {
    font-size: 41px;
}

.f-42 {
    font-size: 42px;
}

.f-43 {
    font-size: 43px;
}

.f-44 {
    font-size: 44px;
}

.f-45 {
    font-size: 45px;
}

.f-46 {
    font-size: 46px;
}

.f-47 {
    font-size: 47px;
}

.f-48 {
    font-size: 48px;
}

.f-49 {
    font-size: 49px;
}

.f-50 {
    font-size: 50px;
}

.f-51 {
    font-size: 51px;
}

.f-52 {
    font-size: 52px;
}

.f-53 {
    font-size: 53px;
}

.f-54 {
    font-size: 54px;
}

.f-55 {
    font-size: 55px;
}

.f-56 {
    font-size: 56px;
}

.f-57 {
    font-size: 57px;
}

.f-58 {
    font-size: 58px;
}

.f-59 {
    font-size: 59px;
}

.f-60 {
    font-size: 60px;
}

.f-61 {
    font-size: 61px;
}

.f-62 {
    font-size: 62px;
}

.f-63 {
    font-size: 63px;
}

.f-64 {
    font-size: 64px;
}

.f-65 {
    font-size: 65px;
}

.f-66 {
    font-size: 66px;
}

.f-67 {
    font-size: 67px;
}

.f-68 {
    font-size: 68px;
}

.f-69 {
    font-size: 69px;
}

.f-70 {
    font-size: 70px;
}

.f-71 {
    font-size: 71px;
}

.f-72 {
    font-size: 72px;
}

.f-73 {
    font-size: 73px;
}

.f-74 {
    font-size: 74px;
}

.f-75 {
    font-size: 75px;
}

.f-76 {
    font-size: 76px;
}

.f-77 {
    font-size: 77px;
}

.f-78 {
    font-size: 78px;
}

.f-79 {
    font-size: 79px;
}

.f-80 {
    font-size: 80px;
}