:root {
    --mg30: clamp(1.189rem, 2.34vw, 1.875rem);
    --mg40: clamp(1.586rem, 3.13vw, 2.5rem);
    --mg60: clamp(2.379rem, 4.69vw, 3.75rem);
    --mg80: clamp(3.172rem, 6.25vw, 5rem);
    --mg100: clamp(3.965rem, 7.81vw, 6.25rem);
    --mg180: clamp(7.137rem, 14.06vw, 11.25rem);
    --spmg30: clamp(0.469rem, 4vw, 1.875rem);
    --spmg40: clamp(0.625rem, 5.33vw, 2.5rem);
    --spmg50: clamp(0.781rem, 6.67vw, 3.125rem);
    --spmg60: clamp(0.938rem, 8vw, 3.75rem);
    --spmg80: clamp(1.25rem, 10.67vw, 5rem);
    --spmg120: clamp(1.875rem, 16vw, 7.5rem);
    --spmg200: clamp(3.125rem, 26.67vw, 12.5rem);
    --fs12: clamp(0.476rem, 0.94vw, 0.75rem);
    --fs14: clamp(0.555rem, 1.09vw, 0.875rem);
    --fs16: clamp(0.634rem, 1.25vw, 1rem);
    --fs18: clamp(0.714rem, 1.41vw, 1.125rem);
    --fs20: clamp(0.793rem, 1.56vw, 1.25rem);
    --fs24: clamp(0.952rem, 1.88vw, 1.5rem);
    --fs28: clamp(1.11rem, 2.19vw, 1.75rem);
    --fs38: clamp(1.507rem, 2.97vw, 2.375rem);
    --spfs20: clamp(0.313rem, 2.67vw, 1.25rem);
    --spfs24: clamp(0.375rem, 3.2vw, 1.5rem);
    --spfs28: clamp(0.438rem, 3.73vw, 1.75rem);
    --spfs30: clamp(0.469rem, 4vw, 1.875rem);
    --spfs34: clamp(0.531rem, 4.53vw, 2.125rem);
    --spfs36: clamp(0.563rem, 4.8vw, 2.25rem);
    --spfs42: clamp(0.656rem, 5.6vw, 2.625rem);
    --spfs52: clamp(0.813rem, 6.93vw, 3.25rem);


}

body {
    font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic", "Meiryo", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 2;
    color: #2F2F2F;
    background-color: #fff;
    width: 100%;
}


#main {
    width: 100%;
    border-top: 2px solid #0078d4;

    @media screen and (max-width:812px) {
        border-top: 4px solid #0078d4;
    }

    >.main-area {

        width: 90vw;
        max-width: 1152px;
        margin: 0 auto;

        @media screen and (max-width:812px) {
            width: 100%;
            overflow: unset;
            contain: paint;

        }

        >picture {
            width: 100%;
            margin: 0 auto;
            max-width: 1152px;

            @media screen and (max-width:812px) {
                max-width: 750px;
            }
        }

        >picture.windowslogo {
            width: clamp(7.731rem, 15.23vw, 12.188rem);
            margin: 0 auto;
            max-width: 195px;
            padding-top: clamp(1.982rem, 3.91vw, 3.125rem);
            padding-bottom: clamp(1.427rem, 2.81vw, 2.25rem);

            @media screen and (max-width:812px) {
                width: clamp(3.813rem, 32.53vw, 15.25rem);
                max-width: 750px;
                padding-top: clamp(0.703rem, 6vw, 2.813rem);
                padding-bottom: clamp(0.703rem, 6vw, 2.813rem);
            }
        }

        .menu-area {



            @media screen and (max-width:812px) {
                max-width: 750px;
                padding: 0 clamp(0.391rem, 3.33vw, 1.563rem);
                margin: 0 auto;
            }
        }

        .btn-hed {
            width: 100%;
            text-align: center;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: var(--mg80);
            margin-bottom: var(--mg60);

            @media screen and (max-width:812px) {
                padding-left: var(--spfs24);
                padding-right: var(--spfs24);
                margin-top: var(--spmg120);
                margin-bottom: var(--spmg120);
            }

            >p {
                font-size: var(--fs20);
                font-weight: 600;
                line-height: 1;
                text-align: center;
                color: #2f2f2f;

                @media screen and (max-width:812px) {
                    font-size: var(--spfs28);
                    line-height: 1.86;
                    letter-spacing: normal;
                    text-align: left;
                    margin: calc((1em * 1.86 - 1em) / -2) auto;
                    font-feature-settings: "pwid";
                }

            }
        }



        .btn-area {
            width: 100%;
            text-align: center;
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            >.btn {
                width: clamp(16.652rem, 32.81vw, 26.25rem);
                max-width: 420px;
                border-radius: clamp(2.181rem, 4.3vw, 3.438rem);
                aspect-ratio: 42 / 11;
                outline: solid clamp(0.159rem, 0.31vw, 0.25rem) #045390;
                outline-offset: calc(clamp(0.159rem, 0.31vw, 0.25rem) * -1);
                background-color: #fff;
                text-decoration: none;
                display: inline-flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                >span {
                    font-size: var(--fs28);
                    font-weight: 600;
                    line-height: 1.36;
                    letter-spacing: normal;
                    text-align: center;
                    color: #045390;
                }

                &.dis {
                    width: clamp(23.789rem, 46.88vw, 33.75rem);
                    border-radius: 55px;
                    aspect-ratio: 54 / 11;
                    max-width: 540px;
                }

                >p {
                    >span {
                        font-size: var(--fs28);
                        font-weight: 600;
                        line-height: 1.36;
                        letter-spacing: -2.1px;


                    }

                    margin: 0;
                    font-weight: 600;
                    line-height: 1.44;
                    font-size: var(--fs18);
                    text-align: center;
                    color: #045390;


                }

                &.grn {
                    outline: solid clamp(0.159rem, 0.31vw, 0.25rem) #148656;
                    margin-left: clamp(4.317rem, 8.51vw, 6.125rem);

                    >p {
                        >span {
                            font-size: var(--fs28);
                            font-weight: 600;
                            line-height: 1.36;
                            letter-spacing: -2.1px;
                            color: #148656;

                        }

                        font-weight: 600;
                        line-height: 1.44;
                        font-size: var(--fs18);
                        text-align: center;
                        color: #148656;


                    }
                }

            }






            @media screen and (max-width:812px) {
                margin: 0 auto 0;
                width: 100%;
                max-width: 750px;
                text-align: center;
                flex-direction: column;

                padding-left: var(--spfs24);
                padding-right: var(--spfs24);



                >.btn {
                    width: 81.8666vw;
                    max-width: 614px;
                    aspect-ratio: auto;
                    border-radius: 100px;
                    outline: solid clamp(0.094rem, 0.8vw, 0.375rem) #045390;
                    outline-offset: calc(clamp(0.094rem, 0.8vw, 0.375rem) * -1);
                    background-color: #fff;
                    text-decoration: none;
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: 18.533vw;

                    >span {
                        font-size: clamp(1rem, 4.27vw, 2rem);
                        font-weight: 600;
                        line-height: 1;
                        color: #045390;
                        padding: 0;
                    }

                    /*&.dis {
                        width: 100%;
                        border-radius: 100px;
                        width: 100%;
                        max-width: 614px;
                        aspect-ratio: 614 / 139;
                    }*/

                    >p {
                        >span {
                            font-size: var(--spfs42);
                            font-weight: 600;
                            line-height: 1.38;
                            letter-spacing: normal;


                        }

                        margin: 0;
                        font-weight: 600;
                        line-height: 1.5;
                        font-size: var(--spfs30);
                        text-align: center;
                        color: #045390;


                    }

                    &.grn {
                        outline: solid clamp(0.094rem, 0.8vw, 0.375rem) #148656;
                        margin: var(--spmg80) auto 0 auto;

                        >p {
                            >span {
                                font-size: var(--spfs42);
                                font-weight: 600;
                                line-height: 1.38;
                                letter-spacing: normal;
                                color: #148656;

                            }

                            font-weight: 600;
                            line-height: 1.5;
                            font-size: var(--spfs30);
                            text-align: center;
                            color: #148656;


                        }
                    }


                }


            }

            @media (hover: hover) and (pointer: fine) {


                >:hover {
                    background-color: #045390;
                    transition: 0.2s;

                    >p {
                        color: #fff;

                        >span {
                            color: #fff;
                            transition: 0.2s;
                        }
                    }


                    &.grn {
                        background-color: #148656;
                        transition: 0.2s;

                        >p {
                            >span {
                                color: #fff;
                                transition: 0.2s;
                            }

                            color: #fff;
                            transition: 0.2s;
                        }
                    }
                }
            }

            @media (hover: none) and (pointer: coarse) {


                >:active {
                    background-color: #045390;
                    transition: 0.2s;

                    >p {
                        color: #fff;

                        >span {
                            color: #fff;
                            transition: 0.2s;
                        }
                    }


                    &.grn {
                        background-color: #148656;
                        transition: 0.2s;

                        >p {
                            >span {
                                color: #fff;
                                transition: 0.2s;
                            }

                            color: #fff;
                            transition: 0.2s;
                        }
                    }
                }

            }

        }

    }

}


nav {
    margin: clamp(1.903rem, 3.75vw, 3rem) auto clamp(4.163rem, 8.2vw, 6.563rem);
    width: 100%;
    max-width: 1152px;

    >ul[role='list'] {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;


        >li {
            overflow-wrap: break-word;
            font-size: var(--fs18);
            font-weight: 600;
            width: calc(100% / 8);
            height: clamp(2.379rem, 4.69vw, 3.75rem);
            line-height: 1.67;
            font-feature-settings: "pwid";

            >a {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
            }
        }

        >li::after {
            content: "";
            margin: 0 auto;
            display: block;
            width: 100%;
            height: clamp(0.238rem, 0.47vw, 0.375rem);
            border-radius: 10px;
            background: #0078d4;


        }

        @media (hover: hover) and (pointer: fine) {
            >:hover {
                color: #0078d4;
                transition: 0.3s;
            }
        }

        @media (hover: none) and (pointer: coarse) {
            >:active {
                color: #0078d4;
                transition: 0.1s;
            }
        }
    }

    @media screen and (max-width:812px) {
        max-width: 750px;
        margin: var(--spmg60) auto 0;
        width: 100%;


        >ul[role='list'] {
            display: grid;
            grid-template-columns: clamp(2.5rem, 21.33vw, 10rem) clamp(2.5rem, 21.33vw, 10rem) clamp(2.5rem, 21.33vw, 10rem) clamp(2.5rem, 21.33vw, 10rem);
            justify-content: space-between;
            align-items: center;
            justify-items: center;



            >li {
                width: clamp(2.5rem, 21.33vw, 10rem);
                height: clamp(0.859rem, 7.33vw, 3.438rem);
                font-size: var(--spfs24);
                font-weight: 600;
                line-height: 1.33;
                letter-spacing: normal;
                text-align: center;
                color: #2f2f2f;


                &:nth-of-type(5),
                &:nth-of-type(6),
                &:nth-of-type(7) {
                    margin-top: var(--spmg80);
                }
            }

            >li::after {
                content: "";
                display: block;
                width: 100%;
                height: clamp(0.125rem, 1.07vw, 0.5rem);
                border-radius: 10px;
                background: #0078d4;
                margin-top: var(--spfs20);


            }
        }
    }
}

section {
    width: 100%;
    max-width: 1152px;
    margin: var(--mg180) auto 0;
    font-weight: 600;
    color: #2f2f2f;
    line-height: 1.5;
    text-align: left;


    @media screen and (max-width:812px) {
        max-width: 750px;
        padding: 0 var(--spfs24);
        margin: var(--spmg200) auto 0;

    }

    >.content-area-rap {
        >.content-area {
            >h1 {
                font-size: var(--fs38);
                line-height: 1.5;
                margin: calc((1em * 1.5 - 1em) / -2) auto;

                @media screen and (max-width:812px) {
                    font-size: var(--spfs42);
                    text-wrap: wrap;
                }
            }

            >h2 {
                font-size: var(--fs28);
                line-height: 1;
                color: #0078d4;
                letter-spacing: 1.4px;
                margin-bottom: var(--mg40);

                &::after {
                    content: "";
                    margin: clamp(0.595rem, 1.17vw, 0.938rem) auto 0;
                    display: block;
                    width: 100%;
                    height: clamp(0.159rem, 0.31vw, 0.25rem);
                    border-radius: 10px;
                    background: #0078d4;
                }

                @media screen and (max-width:812px) {
                    font-size: var(--spfs36);
                    font-weight: 600;
                    letter-spacing: 1.8px;
                    margin-bottom: var(--spmg60);

                    &::after {
                        margin: clamp(0.422rem, 3.6vw, 1.688rem) auto 0;
                        height: clamp(0.063rem, -0.002rem + 0.55vw, 0.256rem)
                    }

                }
            }



            .h3-rap {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-top: var(--mg100);
                margin-bottom: var(--mg40);

                >h3 {
                    font-size: var(--fs28);
                    line-height: 1.5;
                    margin: calc((1em * 2 - 1em) / -2) auto calc((1em * 2 - 1em) / -2) 0;

                    @media screen and (max-width:812px) {
                        font-size: var(--spfs34);
                        line-height: 1.59;
                        margin: calc((1em * 1.59 - 1em) / -2) auto calc((1em * 1.59 - 1em) / -2) 0;
                        text-wrap: wrap;

                    }

                }

                &::before {
                    background-color: #0078d4;
                    border-radius: 10px;
                    content: "";
                    display: inline-block;
                    height: clamp(2.775rem, 5.47vw, 4.375rem);
                    margin-right: 1em;
                    vertical-align: middle;
                    width: clamp(0.793rem, 1.56vw, 1.25rem);
                }

                @media screen and (max-width:812px) {
                    &.sp-off {
                        display: none;
                    }

                    margin-top: var(--spmg120);
                    margin-bottom: var(--spmg60);


                    &::before {
                        height: clamp(1.375rem, 11.73vw, 5.5rem);
                        width: clamp(0.313rem, 2.67vw, 1.25rem);
                        margin-right: var(--spmg30);
                    }


                }
            }

            .h3-rap.br3 {
                @media screen and (max-width:812px) {
                    &.sp-off {
                        display: none;
                    }

                    margin-top: var(--spmg120);
                    margin-bottom: var(--spmg60);


                    &::before {
                        height: clamp(2.234rem, 19.07vw, 8.938rem);
                        width: clamp(0.313rem, 2.67vw, 1.25rem);
                        flex-shrink: 0;
                    }


                }

            }

            .content-text {
                margin-top: calc(var(--mg40) - 0.5em);

                @media screen and (max-width:812px) {
                    margin-top: calc(var(--spmg60) - 0.5em);
                }

                & p {
                    font-size: var(--fs16);
                    font-weight: 300;
                    line-height: 2;
                    margin: calc((1em * 2 - 1em) / -2) auto;
                    position: relative;
                    text-wrap: wrap;

                    &.dot::before {
                        content: "● ";
                        position: absolute;
                        top: 0.45em;
                        left: 0;
                        display: inline-block;
                        font-size: var(--fs16);
                        font-weight: 300;
                        line-height: 2;
                        margin: calc((1em * 2 - 1em) / -2) auto;

                    }

                    @media screen and (max-width:812px) {
                        &.dot::before {
                            font-size: var(--spfs28);
                            line-height: 1.86;
                            margin: calc((1em * 1.86 - 1em) / -2) auto;
                        }


                    }

                    &.dot {
                        padding-left: 1.5em;
                    }

                    .annotation-mark {
                        font-size: 0.6em;
                        vertical-align: super;
                    }

                    .annotation {
                        font-size: var(--fs12);
                    }

                    .annotation.bold {
                        font-weight: 600;
                        font-size: var(--fs12);
                    }

                    @media screen and (max-width:812px) {
                        font-size: var(--spfs28);
                        line-height: 1.86;
                        margin: calc((1em * 1.86 - 1em) / -2) auto;

                        .annotation {
                            font-size: var(--spfs20);
                        }

                        &.lineh1 {
                            font-size: var(--spfs20);
                            line-height: 1;
                        }

                        .annotation.bold {
                            font-weight: 300;
                            font-size: var(--spfs20);
                            line-height: 1.5;
                            margin: calc((1em * 1.5 - 1em) / -2) auto;
                        }

                    }

                }
            }




            .link-blue {
                width: 100%;
                margin-top: var(--mg80);

                >p {
                    margin: calc((1em* 2 - 1em) / -2) auto;
                    position: relative;
                    text-wrap: wrap;
                    font-size: var(--fs18);
                    font-weight: 600;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 2.06;
                    letter-spacing: 0.9px;
                    text-align: center;
                    color: #0078d4;


                    @media (hover: hover) and (pointer: fine) {
                        >a {
                            transition: .2s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                            &:hover {
                                opacity: 0.7;

                            }
                        }
                    }

                    @media (hover: none) and (pointer: coarse) {
                        >a {
                            transition: .1s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                            &:active {
                                opacity: 0.7;

                            }
                        }
                    }


                }

                @media screen and (max-width:812px) {
                    margin-top: var(--spmg80);

                    >p {
                        font-size: var(--spfs28);
                        font-weight: 600;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: 1.5;
                        letter-spacing: 1.4px;
                        text-align: left;
                        color: #0078d4;
                    }
                }
            }


            .links {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: space-between;
                width: 100%;
                max-width: 1152px;

                @media screen and (max-width:812px) {
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    width: 100%;
                    max-width: 750px;
                }

                >a {
                    margin-bottom: 0;

                    @media screen and (max-width:812px) {
                        margin-bottom: var(--spmg60);

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }

                    &:nth-of-type(1),
                    &:nth-of-type(2),
                    &:nth-of-type(3),
                    &:nth-of-type(4) {
                        margin-bottom: var(--mg40);

                        @media screen and (max-width:812px) {
                            margin-bottom: var(--spmg60);
                        }
                    }

                    @media (hover: hover) and (pointer: fine) {

                        transition: .2s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                        &:hover {
                            opacity: 0.7;

                        }

                    }

                    @media (hover: none) and (pointer: coarse) {

                        transition: .1s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                        &:active {
                            opacity: 0.7;

                        }

                    }

                    .link-box {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        width: clamp(21.727rem, 42.81vw, 34.25rem);
                        max-width: 548px;
                        height: 100%;
                        aspect-ratio: 137 / 25;
                        outline: solid clamp(0.079rem, 0.16vw, 0.125rem) #9f9f9f;
                        outline-offset: calc(clamp(0.079rem, 0.16vw, 0.125rem) * -1);

                        @media screen and (max-width:812px) {
                            width: clamp(10.984rem, 93.73vw, 43.938rem);
                            max-width: 703px;
                            aspect-ratio: 703 / 131;
                            outline: solid clamp(0.064rem, 0.55vw, 0.256rem) #9f9f9f;
                            outline-offset: calc(clamp(0.064rem, 0.55vw, 0.256rem) * -1);
                        }


                        .link-box-hed-blue {
                            width: clamp(16.177rem, 31.88vw, 25.5rem);
                            aspect-ratio: 17 / 1;
                            background-color: #0078d4;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 1em;
                            font-size: var(--fs14);

                            >p {
                                font-size: var(--fs14);
                                font-weight: 600;
                                letter-spacing: normal;
                                line-height: 2;
                                text-align: center;
                                color: #fefefe;
                            }

                            @media screen and (max-width:812px) {
                                width: clamp(10.047rem, 85.73vw, 40.188rem);
                                aspect-ratio: 643 / 42;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                align-content: center;
                                flex-wrap: nowrap;
                                margin-bottom: 0.35em;

                                >p {
                                    font-size: var(--spfs28);
                                    line-height: 1.14;
                                    margin: calc((1em * 1.14 - 1em) / -2) auto;
                                }

                            }
                        }

                        .link-box-hed {
                            width: clamp(16.177rem, 31.88vw, 25.5rem);
                            aspect-ratio: 17 / 1;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 0.5em;
                            line-height: 2;
                            font-size: var(--fs14);

                            &.bottomlinks {
                                margin-bottom: 0.325em;
                                margin-top: -0.325em;
                            }

                            >p {
                                margin: calc((1em* 2 - 1em) / -2) auto;
                                position: relative;
                                text-wrap: wrap;
                                font-size: var(--fs14);
                                font-weight: 300;
                                line-height: 2;
                                letter-spacing: normal;
                                text-align: center;
                                color: #0078d4;
                            }

                            @media screen and (max-width:812px) {
                                width: clamp(10.047rem, 85.73vw, 40.188rem);
                                aspect-ratio: 643 / 42;
                                margin-bottom: 0;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                align-content: center;
                                flex-wrap: nowrap;

                                >p {
                                    font-size: var(--spfs24);
                                    line-height: 1.75;
                                    margin: calc((1em * 1.75 - 1em) / -2) auto;
                                }

                            }
                        }

                        .link-box-text {
                            >p {
                                margin: calc((1em* 2 - 1em) / -2) auto;
                                position: relative;
                                text-wrap: wrap;
                                font-size: var(--fs16);
                                font-weight: 600;
                                line-height: 2;
                                letter-spacing: normal;
                                text-align: center;
                                color: #0078d4;

                                @media screen and (max-width:812px) {
                                    font-size: var(--spfs28);
                                    line-height: 1.14;
                                    margin-top: calc((1em * 1.14 - 1em) / -2 + 0.35em);
                                    margin-left: auto;
                                    margin-right: auto;
                                    margin-bottom: auto;

                                    &.mg-auto {
                                        margin: auto;
                                        line-height: 1.64;
                                    }

                                }
                            }
                        }
                    }
                }
            }

        }




    }
}



#area1 {
    margin-top: 0;

    @media screen and (max-width:812px) {
        margin-top: calc(var(--spmg200) + clamp(0.438rem, 3.73vw, 1.75rem));
    }

    >.content-area-rap {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        @media screen and (max-width:812px) {
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
            flex-wrap: nowrap;

        }

        >.content-area {
            width: auto;

            >h1 {
                font-size: clamp(1.586rem, 3.13vw, 2.5rem);
                margin-top: calc((1em * 1.5 - 1em) / -2);
                margin-bottom: calc((1em * 1.5 - 1em) / -2 + var(--mg60));

                @media screen and (max-width:812px) {
                    font-size: clamp(0.813rem, 6.93vw, 3.25rem);
                    margin-top: calc((1em * 1.52 - 1em) / -2);
                    margin-bottom: calc((1em * 1.52 - 1em) / -2 + var(--spmg60));
                    line-height: 1.52;
                }
            }

            .content-text {
                >p {
                    font-size: var(--fs20);
                    line-height: 2;
                    letter-spacing: 0.5px;
                    font-weight: 600;

                    @media screen and (max-width:812px) {
                        font-size: var(--spfs28);
                        letter-spacing: normal;
                    }
                }
            }
        }

        @media screen and (max-width:812px) {
            .content-text {
                margin-top: 0;
            }
        }

        >.content-move {

            width: clamp(19.428rem, 38.28vw, 30.625rem);

            @media screen and (max-width:812px) {
                width: 100%;
                margin-top: var(--spmg60);

                >a {

                    >picture {
                        margin-bottom: var(--spmg40);
                    }
                }
            }

            >picture {
                width: 100%;
            }

            >p {
                margin-top: var(--mg30);
                font-size: var(--fs14);
                font-weight: 300;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: 0.7px;
                text-align: left;
                color: #2f2f2f;

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

                    margin: calc((1em * 1.67 - 1em) / -2) auto;
                    font-size: var(--spfs24);
                    line-height: 1.67;
                    letter-spacing: clamp(0.006rem, -0.017rem + 0.2vw, 0.075rem);

                }

            }

        }

    }

    >.sb-addition-rap {
        margin-top: var(--mg100);
        width: 100%;
        max-width: 1152px;
        height: clamp(11.419rem, 22.5vw, 18rem);
        max-height: 288px;
        background-color: #c1eaff;
        border-radius: clamp(0.793rem, 1.56vw, 1.25rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        aspect-ratio: 4 / 1;
        padding: var(--mg40) 0;

        >p {
            font-size: var(--fs24);
            font-weight: 600;
            line-height: 1.5;
            margin: calc((1em * 1.5 - 1em) / -2) auto;
            width: auto;

            text-align: center;

            &:nth-of-type(2) {
                font-size: var(--fs16);
                font-weight: 300;
                line-height: 2;
                width: auto;
                margin-top: calc((1em * 2 - 1em) / -2 + var(--mg30));
                margin-bottom: calc((1em * 2 - 1em) / -2);
            }
        }

        @media screen and (max-width:812px) {
            margin-top: var(--spmg120);
            width: 100%;
            max-width: 702px;
            height: clamp(18.75rem, 80vw, 37.5rem);
            max-height: 600px;
            border-radius: clamp(1.25rem, 5.33vw, 2.5rem);
            aspect-ratio: 117 / 100;
            padding: 0 clamp(1.75rem, 7.47vw, 3.5rem);
            justify-content: flex-start;

            >p {
                font-size: var(--spfs36);
                line-height: 1.78;
                margin: calc((1em* 1.78 - 1em) / -2 + clamp(1.813rem, 7.73vw, 3.625rem)) auto calc((1em * 1.78 - 1em) / -2);
                width: auto;
                text-align: left;

                &:nth-of-type(2) {
                    font-size: var(--spfs28);
                    font-weight: 300;
                    line-height: 1.86;
                    width: auto;
                    margin-top: calc((1em * 1.86 - 1em) / -2 + clamp(1.844rem, 7.87vw, 3.688rem));
                    margin-bottom: calc((1em * 1.86 - 1em) / -2);
                }
            }

        }

        .link-box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: clamp(21.727rem, 42.81vw, 34.25rem);
            max-width: 548px;
            height: auto;
            aspect-ratio: 137 / 25;
            outline: solid clamp(0.079rem, 0.16vw, 0.125rem) #9f9f9f;
            outline-offset: calc(clamp(0.079rem, 0.16vw, 0.125rem) * -1);
            background-color: #fff;
            margin-top: var(--mg40);

            @media screen and (max-width:812px) {
                width: clamp(18.438rem, 78.67vw, 36.875rem);
                max-width: 590px;
                height: clamp(4.094rem, 17.47vw, 8.188rem);
                aspect-ratio: 590 / 131;
                outline: solid clamp(0.064rem, 0.55vw, 0.256rem) #9f9f9f;
                outline-offset: calc(clamp(0.064rem, 0.55vw, 0.256rem) * -1);
                margin-top: var(--spmg60);
            }


            .link-box-text {
                font-size: var(--fs16);
                font-weight: 600;
                line-height: 2;
                letter-spacing: normal;
                text-align: center;
                color: #0078d4;


                @media screen and (max-width:812px) {
                    font-size: var(--spfs28);
                    line-height: 1.14;
                    margin: 0 auto;


                }

            }

            @media (hover: hover) and (pointer: fine) {

                transition: .2s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                &:hover {
                    /*opacity: 0.7;*/
                    outline-color: rgba(188, 188, 188, 1);

                    .link-box-text {
                        color: rgb(82, 157, 222);
                    }

                }

            }

            @media (hover: none) and (pointer: coarse) {

                transition: .1s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                &:active {
                    /*opacity: 0.7;*/
                    outline-color: rgba(188, 188, 188, 1);

                    .link-box-text {
                        color: rgb(82, 157, 222);
                    }
                }

            }
        }

    }


}


#area2 {
    >.content-area-rap {
        width: 100%;

        >.content-area {
            .content-trinity-rap {
                margin-top: var(--mg100);

                @media screen and (max-width:812px) {
                    display: none;
                }

                .trinity-row01 {
                    display: flex;
                    justify-content: space-between;

                    .trinity-col01 {
                        display: flex;
                        flex-direction: column;
                        width: 32.118%;
                        max-width: 370px;

                        >picture {
                            margin: 0;
                        }

                        >div {
                            width: 100%;
                            height: clamp(1.586rem, 3.13vw, 2.5rem);
                            display: flex;
                            align-content: center;
                            justify-content: center;
                            flex-wrap: wrap;
                            margin-bottom: clamp(0.396rem, 0.78vw, 0.625rem);

                            >p {
                                width: auto;
                                font-size: var(--fs18);
                                font-weight: 600;
                                color: #fff;
                                text-align: center;
                                line-height: 1;
                                margin: 0;
                            }
                        }

                        &:nth-of-type(1) {
                            >div {
                                background-color: #b579e4;
                            }
                        }

                        &:nth-of-type(2) {
                            >div {
                                background-color: #0fcdb2;
                            }
                        }

                        &:nth-of-type(3) {
                            >div {
                                background-color: #f68337;
                            }

                        }

                    }


                }

                .trinity-row02 {
                    width: 100%;
                    display: block;
                    background-color: #8d8d8d;
                    margin-top: var(--mg30);
                    height: var(--mg30);

                    >p {
                        font-size: var(--fs14);
                        font-weight: 600;
                        color: #fff;
                        text-align: center;
                        margin: auto;
                        line-height: 2;
                        position: relative;
                        text-wrap: wrap;
                    }
                }

                >.trinity-row03 {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;

                    .trinity-col02 {
                        display: flex;
                        flex-direction: column;
                        width: 32.118%;
                        max-width: 370px;

                        >div {
                            width: 100%;
                            height: clamp(5.154rem, 10.16vw, 8.125rem);
                            background-color: #efddfc;
                            margin-top: clamp(0.793rem, 1.56vw, 1.25rem);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            >p {
                                font-size: var(--fs18);
                                font-weight: 600;
                                color: #2f2f2f;
                                text-align: center;
                                margin: 0;
                                line-height: 1.78;

                                &:nth-of-type(2) {
                                    font-size: var(--fs14);
                                    font-weight: 300;
                                    line-height: 2;
                                }
                            }

                        }

                        &:nth-of-type(2) {
                            >div {
                                background-color: #dcfffa;
                            }
                        }

                        &:nth-of-type(3) {
                            >div {
                                background-color: #ffedda;
                            }
                        }

                    }

                    .sup {
                        font-size: 0.6em;
                        vertical-align: super;
                    }
                }


                .trinity-row04 {
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    margin: clamp(0.396rem, 0.78vw, 0.625rem) auto;

                    >img {
                        width: clamp(2.3rem, 4.53vw, 3.625rem);

                    }

                    >picture {
                        width: clamp(2.3rem, 4.53vw, 3.625rem);

                    }
                }

                .trinity-row05 {
                    width: 100%;
                    height: var(--mg40);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background-color: #0078d4;
                    margin-bottom: clamp(0.793rem, 1.56vw, 1.25rem);

                    >p {
                        font-size: var(--fs18);
                        font-weight: 600;
                        line-height: normal;
                        text-align: center;
                        color: #fff;
                        margin: calc((1em* 2 - 1em) / -2) auto;
                        position: relative;
                        text-wrap: wrap;
                    }
                }



                .trinity-row06 {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;


                    .trinity-col03 {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: clamp(6.185rem, 12.19vw, 9.75rem);
                        width: 32.118%;
                        max-width: 370px;
                        outline-color: #b579e4;
                        outline-style: solid;
                        outline-width: clamp(0.238rem, 0.47vw, 0.375rem);
                        outline-offset: calc(clamp(0.238rem, 0.47vw, 0.375rem) * -1);
                        border-radius: var(--fs20);

                        >p {
                            text-align: center;
                            font-size: var(--fs28);
                            font-weight: 600;
                            line-height: 1.5;
                            color: #b579e4;
                        }

                        &:nth-of-type(2) {
                            outline-color: #0fcdb2;

                            >p {
                                color: #0fcdb2;
                            }
                        }

                        &:nth-of-type(3) {
                            outline-color: #f68337;

                            >p {
                                color: #f68337;
                            }
                        }

                    }



                }

                .trinity-row07 {
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    margin-top: var(--mg30);

                    >p {
                        font-size: var(--fs12);
                        font-weight: 300;
                        margin: auto;
                        font-weight: normal;
                        line-height: 1.5;
                        letter-spacing: normal;
                        text-align: left;
                        color: #000;
                    }
                }
            }

            .content-trinity-rap-sp {
                width: 100%;
                display: none;
                margin-top: var(--spmg120);

                @media screen and (max-width:812px) {
                    display: block;
                }

                .vio {
                    >div {
                        background-color: #efddfc;
                    }
                }

                .grn {
                    >div {
                        background-color: #dcfffa;
                    }
                }

                .orn {
                    >div {
                        background-color: #ffedda;
                    }

                }


                .trinity-row01 {
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-items: stretch;


                    .trinity-col01 {
                        display: flex;
                        flex-direction: row;
                        width: 100%;


                        >picture {
                            margin: 0;
                            width: clamp(3.563rem, 30.4vw, 14.25rem);
                            max-width: 228px;
                            height: 100%;
                            aspect-ratio: 114 / 61;
                        }

                        >div {
                            width: clamp(7.406rem, 63.2vw, 29.625rem);
                            height: 100%;
                            aspect-ratio: 237 / 61;
                            display: flex;
                            align-content: center;
                            justify-content: center;
                            flex-wrap: wrap;
                            margin-bottom: 0;

                            >p {
                                width: auto;
                                font-size: var(--spfs30);
                                font-weight: 600;
                                line-height: normal;
                                letter-spacing: normal;
                                text-align: center;
                                color: #fff;

                            }
                        }




                    }

                    >.trinity-col01.vio {
                        >div {
                            background-color: #b579e4;
                        }
                    }

                    >.trinity-col01.grn {
                        >div {
                            background-color: #0fcdb2;
                        }
                    }

                    >.trinity-col01.orn {
                        >div {
                            background-color: #f68337;
                        }

                    }


                    >.mg40 {
                        margin-bottom: var(--spmg40);
                    }

                }

                .trinity-row02 {
                    width: 100%;
                    height: clamp(0.938rem, 8vw, 3.75rem);
                    aspect-ratio: 117 / 10;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #8d8d8d;
                    margin-top: 0;

                    >p {
                        font-size: var(--spfs28);
                        font-weight: 600;
                        line-height: 2;
                        letter-spacing: normal;
                        text-align: center;
                        color: #fff;
                        margin: calc((1em * 2 - 1em) / -2) auto;
                    }
                }

                .trinity-row03 {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;



                    .trinity-col02 {
                        display: flex;
                        flex-direction: column;

                        >div {
                            width: 100%;
                            height: clamp(3.813rem, 32.53vw, 15.25rem);

                            margin-top: 0;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            >p {
                                font-size: var(--spfs36);
                                font-weight: 600;
                                color: #2f2f2f;
                                text-align: center;
                                margin: 0;
                                line-height: 1.78;
                                margin: 0;

                                &:nth-of-type(2) {
                                    font-size: var(--spfs28);
                                    font-weight: 300;
                                    line-height: 1.86;
                                    margin: 0;
                                }
                            }

                        }

                    }

                    .sup {
                        font-size: 0.6em;
                        vertical-align: super;
                    }

                }

                .trinity-row04 {
                    width: 100%;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    flex-direction: row;
                    margin: clamp(0.563rem, 4.8vw, 2.25rem) auto;

                    >picture {
                        width: clamp(2rem, 17.07vw, 8rem);
                        height: 100%;
                        aspect-ratio: 32 / 11;

                        >img {
                            width: 100%;
                        }
                    }
                }

                .trinity-row05 {
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 351 / 122;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background-color: #0078d4;
                    margin-bottom: 0;

                    >p {
                        width: clamp(8.891rem, 75.87vw, 35.563rem);
                        font-size: var(--spfs36);
                        font-weight: 600;
                        line-height: normal;
                        text-align: center;
                        color: #fff;
                        line-height: 1.78;
                        margin: 0 auto;
                    }
                }

                .trinity-row06 {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    margin: 0;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-items: center;

                    .trinity-col03 {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        height: 100%;
                        aspect-ratio: 39 / 10;
                        justify-content: center;
                        width: 100%;
                        max-width: 702px;
                        outline-color: #b579e4;
                        outline-style: solid;
                        outline-width: clamp(0.125rem, 1.07vw, 0.5rem);
                        outline-offset: calc(clamp(0.125rem, 1.07vw, 0.5rem) * -1);
                        border-radius: var(--spmg40);
                        margin-top: var(--spmg40);

                        >p {
                            text-align: center;
                            font-size: var(--spfs42);
                            font-weight: 600;
                            line-height: 1.86;
                            color: #b579e4;
                        }

                        &:nth-of-type(2) {
                            outline-color: #0fcdb2;

                            >p {
                                color: #0fcdb2;
                            }
                        }

                        &:nth-of-type(3) {
                            outline-color: #f68337;

                            >p {
                                color: #f68337;
                            }
                        }

                    }



                }

                .trinity-row07 {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    margin-top: var(--spmg60);
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-items: flex-start;
                    line-height: 0.5;
                    font-size: var(--spfs20);

                    >p {
                        font-size: var(--spfs20);
                        font-weight: 300;
                        line-height: 1.5;
                        letter-spacing: normal;
                        text-align: left;
                        color: #000;
                        margin: 0;
                    }

                    >p:last-child {
                        margin-bottom: calc((1em * 1.5 - 1em) / -2);
                        line-height: 1.5;
                    }

                    >p:first-child {
                        margin-top: calc((1em * 1.5 - 1em) / -2);
                        line-height: 1.5;
                    }
                }



            }


        }

    }
}

#area3,
#area3-sp {

    .area3-content-rap {
        width: 100%;
        border-radius: 20px;
        background-color: #c1eaff;
        padding-top: var(--mg60);
        padding-left: var(--mg60);
        padding-right: var(--mg60);
        padding-bottom: var(--mg60);

        @media screen and (max-width:812px) {
            border-radius: var(--spmg40);
            padding-top: var(--spmg80);
            padding-left: var(--spmg60);
            padding-right: var(--spmg60);
            padding-bottom: var(--spmg80);
        }

        >.area3-01 {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            >.area3-text01 {
                >p {
                    font-size: var(--fs28);
                    font-weight: 600;
                    line-height: 1.5;
                    margin-top: calc((1em * 1.5 - 1em) / -2);
                    margin-bottom: calc((1em * 1.5 - 1em) / -2 + clamp(0.595rem, 1.17vw, 0.938rem));

                    @media screen and (max-width:812px) {
                        font-size: var(--spfs34);
                        line-height: 1.71;
                        letter-spacing: normal;
                        margin-top: calc((1em * 1.71 - 1em) / -2);
                        margin-bottom: calc((1em * 1.71 - 1em) / -2);

                    }

                }
            }

            .area3-icon {
                border-radius: clamp(0.705rem, 1.39vw, 1rem);
                background-color: #f68337;
                width: var(--mg80);
                height: var(--mg30);
                display: flex;
                align-items: center;
                justify-content: center;

                >p {
                    font-size: var(--fs16);
                    font-weight: 600;
                    line-height: 2.63;
                    text-align: center;
                    color: #fff;
                }

                @media screen and (max-width:812px) {
                    border-radius: var(--spfs24);
                    width: clamp(1.875rem, 16vw, 7.5rem);
                    height: clamp(0.75rem, 6.4vw, 3rem);
                    margin-top: var(--spmg30);
                    margin-bottom: var(--spmg30);

                    >p {
                        font-size: var(--spfs28);
                        line-height: 2.07;
                    }
                }
            }


        }

        >.area3-02 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: clamp(0.793rem, 1.56vw, 1.25rem);
            margin-bottom: clamp(0.441rem, 0.87vw, 0.625rem);

            @media screen and (max-width:812px) {
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                margin-top: 0;
                margin-bottom: 0;
            }

            >picture {
                width: clamp(20.934rem, 41.25vw, 33rem);
                max-width: 528px;
                box-shadow: clamp(0.274rem, 0.54vw, 0.431rem) clamp(0.23rem, 0.45vw, 0.362rem) clamp(0.63rem, 1.24vw, 0.994rem) clamp(0.115rem, 0.23vw, 0.181rem) rgba(74, 46, 126, 0.45);

                @media screen and (max-width:812px) {
                    width: clamp(9.219rem, 78.67vw, 36.875rem);
                    max-width: 590px;
                    box-shadow: 5.8px 6.9px 15.1px 2.9px rgba(74, 46, 126, 0.45);

                }
            }

            >.area3-02-r {
                width: clamp(17.644rem, 34.77vw, 27.813rem);
                max-width: 445px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;

                >p {
                    margin: calc((1em* 2 - 1em) / -2) auto;
                    margin-left: 0;
                    text-align: left;
                    font-size: var(--fs16);
                    font-weight: 300;
                    line-height: 2;
                    letter-spacing: 0.8px;
                    text-align: left;
                    position: relative;
                    text-wrap: wrap;
                }

                @media screen and (max-width:812px) {
                    width: clamp(9.219rem, 78.67vw, 36.875rem);
                    max-width: 590px;
                    margin-top: var(--spmg60);

                    >p {
                        font-size: var(--spfs28);
                        font-weight: 300;
                        line-height: 1.86;
                        letter-spacing: normal;
                    }
                }

                & p:nth-of-type(2) {
                    letter-spacing: normal;

                    .annotation-mark {
                        font-size: 0.6em;
                        vertical-align: super;
                    }

                    .annotation {
                        font-size: var(--fs12);
                    }

                    .annotation.bold {
                        font-weight: 600;
                        font-size: var(--fs12);
                    }

                    @media screen and (max-width:812px) {
                        font-size: var(--spfs28);
                        line-height: 1.86;
                        margin: calc((1em * 1.86 - 1em) / -2) auto;

                        .annotation {
                            font-size: var(--spfs20);
                        }

                        &.lineh1 {
                            font-size: var(--spfs20);
                            line-height: 1;
                        }

                        .annotation.bold {
                            font-weight: 300;
                            font-size: var(--spfs20);
                            line-height: 1.5;
                            margin: calc((1em * 1.5 - 1em) / -2) auto;
                        }

                    }
                }

                >.area3-text-b {
                    width: 100%;
                    height: 2.1429em;
                    background-color: #0078d4;
                    font-size: var(--fs14);
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: center;
                    margin-top: var(--mg30);
                    margin-bottom: clamp(0.753rem, 1.48vw, 1.188rem);

                    >p {
                        margin: 0 auto;
                        font-size: var(--fs14);
                        font-weight: 600;
                        line-height: 1;
                        letter-spacing: normal;
                        text-align: center;
                        color: #fff;
                    }

                    @media screen and (max-width:812px) {
                        font-size: var(--spfs28);
                        line-height: 1.5;
                        margin-top: var(--spmg60);
                        margin-bottom: var(--spmg40);

                        >p {
                            font-size: var(--spfs28);
                            line-height: 1.86;
                        }


                    }
                }
            }
        }

    }

    .area3-content-rap.rp {
        background-color: #c4f4e0;

        .area3-icon {
            background-color: #0fcdb2;
        }
    }

    .area3-content-rap.mr {
        background-color: #fedef1;

        .area3-icon-rap {
            display: flex;
            flex-direction: row;
        }

        .area3-icon.t {
            background-color: #0fcdb2;
        }

        .area3-icon.c {
            background-color: #f68337;
            margin-right: var(--spfs20);

            @media screen and (max-width:812px) {
                margin-right: var(--spfs20);
            }
        }

        .area3-fm {
            margin-top: var(--mg30);
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            width: clamp(11.895rem, 23.44vw, 18.75rem);

            >div {
                display: flex;
                flex-direction: column;
                align-items: center;

                >picture {
                    margin-bottom: var(--fs14);
                }

                >p {
                    margin: calc((1em* 2 - 1em) / -2) auto;
                    position: relative;
                    text-wrap: wrap;
                    font-size: var(--fs14);
                    font-weight: 300;
                    font-style: normal;
                    line-height: normal;
                    letter-spacing: 0.7px;
                    text-align: center;
                }
            }

            >div:nth-of-type(1) {
                >picture {
                    width: clamp(4.916rem, 9.69vw, 7.75rem);
                    max-width: 124px;
                }
            }

            >picture {
                width: clamp(2.101rem, 4.14vw, 3.313rem);
                max-width: 53px;
            }

            >div:nth-of-type(2) {
                >picture {
                    width: clamp(3.687rem, 7.27vw, 5.813rem);
                    max-width: 93px;
                }
            }

            @media screen and (max-width:812px) {
                margin-top: var(--spmg60);
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-evenly;
                align-items: center;

                >div {

                    >picture {
                        margin-bottom: var(--spmg30);
                    }

                    >p {
                        font-size: var(--spfs24);
                        letter-spacing: 1.2px;
                    }
                }

                >div:nth-of-type(1) {
                    >picture {
                        width: clamp(3.094rem, 26.4vw, 12.375rem);
                        max-width: 198px;
                    }
                }

                >picture {
                    width: clamp(1.359rem, 11.6vw, 5.438rem);
                    max-width: 87px;
                }

                >div:nth-of-type(2) {
                    >picture {
                        width: clamp(2.328rem, 19.87vw, 9.313rem);
                        max-width: 149px;
                    }
                }

            }
        }
    }

    .area3-content-rap-02 {
        width: 100%;
        border-radius: 0;
        padding: 0;

        .area3-03 {
            .area3-bluebg-text {
                width: 100%;
                height: var(--mg40);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: #0078d4;
                margin-bottom: var(--mg40);

                >p {
                    margin: calc((1em* 2 - 1em) / -2) auto;
                    position: relative;
                    text-wrap: wrap;
                    font-size: var(--fs18);
                    font-weight: 600;
                    line-height: normal;
                    text-align: center;
                    color: #fff;
                }

                @media screen and (max-width:812px) {
                    height: clamp(2.422rem, 20.67vw, 9.688rem);
                    margin-bottom: var(--spmg60);

                    >p {
                        font-size: var(--spfs36);
                        line-height: 1.78;
                        letter-spacing: normal;

                    }


                }



            }


        }

        .area3-02 {
            .fake-table-rap {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: flex-end;
                justify-content: space-between;

                @media screen and (max-width:812px) {
                    display: none;
                }

                .hed-vert {
                    >div {
                        width: clamp(5.234rem, 10.31vw, 8.25rem);
                        max-width: 132px;
                        border-bottom: clamp(0.079rem, 0.16vw, 0.125rem) solid #9f9f9f;
                        height: clamp(2.181rem, 4.3vw, 3.438rem);
                        display: flex !important;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        box-sizing: content-box;

                        >p {
                            position: relative;
                            text-wrap: wrap;
                            margin: auto 0;
                            font-size: var(--fs14);
                            font-weight: 600;
                            font-stretch: normal;
                            font-style: normal;
                            line-height: 1.86;
                            letter-spacing: 0.7px;
                            text-align: left;
                            color: #2f2f2f;
                        }

                        &:first-of-type {
                            border-top: clamp(0.079rem, 0.16vw, 0.125rem) solid #9f9f9f;
                        }
                    }


                }


                .fake-table {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    align-content: space-between;
                    align-items: center;

                    >.hriz-heds {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: flex-end;
                        justify-content: space-between;
                        border-bottom: clamp(0.079rem, 0.16vw, 0.125rem) solid #9f9f9f;

                        >.heds-cell {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            box-sizing: content-box;
                            width: clamp(9.516rem, 18.75vw, 15rem);
                            max-width: 240px;
                            height: clamp(2.062rem, 4.06vw, 3.25rem);

                            >p {
                                font-size: var(--fs16);
                                font-weight: 600;
                                line-height: 1.63;
                                letter-spacing: 0.8px;
                                text-align: center;
                                color: #fff;
                            }

                            &:nth-of-type(1) {
                                background-color: #235ab5;
                            }

                            &:nth-of-type(2) {
                                background-color: #ac44ce;
                            }

                            &:nth-of-type(3) {
                                background-color: #3b9a19;
                            }

                            &:nth-of-type(4) {
                                background-color: #c61345;
                            }
                        }

                    }

                    >.hriz-cells {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: flex-end;
                        justify-content: space-between;
                        border-bottom: clamp(0.079rem, 0.16vw, 0.125rem) solid #9f9f9f;

                        >.fake-cell {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            box-sizing: content-box;
                            width: clamp(9.516rem, 18.75vw, 15rem);
                            max-width: 240px;
                            height: clamp(2.181rem, 4.3vw, 3.438rem);

                            >p {
                                margin: auto 0;
                                font-size: var(--fs18);
                                font-weight: 600;
                                line-height: 1.44;
                                letter-spacing: 0.9px;
                                text-align: center;
                                color: #2f2f2f;
                            }


                            &:nth-of-type(1) {
                                background-color: #c5dbff;
                            }

                            &:nth-of-type(2) {
                                background-color: #f2cffe;
                            }

                            &:nth-of-type(3) {
                                background-color: #e0fed5;
                            }

                            &:nth-of-type(4) {
                                background-color: #ffdce6;
                            }
                        }

                    }

                    >.hriz-cells.line2 {
                        >.fake-cell {
                            height: var(--mg80);

                            >p {
                                font-size: var(--fs14);
                                font-weight: 300;
                                line-height: 1.86;
                                letter-spacing: 0.7px;
                            }
                        }
                    }

                }



            }


        }


    }

    .area3-content-rap.ei {
        background-color: #e2daff;
        margin-bottom: var(--mg100);

        @media screen and (max-width:812px) {
            margin-bottom: var(--spmg120);
        }


        .area3-icon {
            background-color: #0fcdb2;
        }

        .area3-02-r {
            .annotation {
                letter-spacing: 0.6px;
                font-size: var(--fs12);
            }

            @media screen and (max-width: 812px) {
                .annotation {
                    font-size: var(--spfs20);
                }
            }
        }
    }
}

#area3-sp {
    max-width: 812px;
    padding: 0;
    margin: var(--spmg60) 0 0;
    display: none;

    @media screen and (max-width:812px) {
        display: block;
    }

    .ei-rap {
        max-width: 750px;
        padding: var(--spfs36) var(--spfs24) 0;
        /*margin: var(--spmg200) auto 0;*/
        margin-left: auto;
        margin-right: auto;


    }

    .fake-table-rap-sp {
        display: none;
    }


    .fake-table-rap-sp {
        display: block;
        width: 100%;
        padding-bottom: var(--spmg80);

        .swipe {

            .swipe-item-rap {
                width: clamp(8.75rem, 74.67vw, 35rem);
                display: flex;
                justify-content: center;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: flex-start;
                align-items: flex-start;

                .swipe-item {
                    padding-left: clamp(0.391rem, 3.33vw, 1.563rem);
                    padding-right: clamp(0.391rem, 3.33vw, 1.563rem);

                    .hed-vert {
                        width: clamp(8.75rem, 74.67vw, 35rem);
                        max-width: 560px;

                        >div {
                            width: clamp(8.75rem, 74.67vw, 35rem);
                            max-width: 560px;
                            border-bottom: 0;
                            height: clamp(0.953rem, 8.13vw, 3.813rem);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            box-sizing: content-box;
                            background-color: #8d8d8d;


                            >p {
                                margin: auto 0;
                                font-size: var(--spfs28);
                                font-weight: 600;
                                font-stretch: normal;
                                font-style: normal;
                                line-height: 1.5;
                                letter-spacing: normal;
                                text-align: center;
                                color: #fff;
                            }

                            &:first-of-type {
                                border-top: 0;
                            }
                        }


                    }

                    .hriz-heds {
                        width: clamp(8.75rem, 74.67vw, 35rem);
                        max-width: 560px;
                        display: flex;
                        flex-direction: row;
                        align-items: flex-end;
                        justify-content: space-between;
                        border-bottom: 0;



                        >.heds-cell {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            box-sizing: content-box;
                            width: clamp(8.75rem, 74.67vw, 35rem);
                            max-width: 560px;
                            height: 100%;
                            aspect-ratio: 280 / 61;

                            >p {
                                font-size: var(--spfs36);
                                font-weight: 600;
                                line-height: 1.78;
                                letter-spacing: 1.8px;
                                text-align: center;
                                color: #fff;
                            }


                        }

                    }


                    >.hriz-cells {
                        width: clamp(8.75rem, 74.67vw, 35rem);
                        max-width: 560px;
                        display: flex;
                        flex-direction: row;
                        align-items: flex-end;
                        justify-content: space-between;
                        border-bottom: 0;

                        >.fake-cell {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            box-sizing: content-box;
                            width: clamp(8.75rem, 74.67vw, 35rem);
                            max-width: 560px;
                            height: clamp(2.719rem, 23.2vw, 10.875rem);

                            >p {
                                margin: auto 0;
                                font-weight: 600;
                                font-size: clamp(0.688rem, 5.87vw, 2.75rem);
                                line-height: 1.45;
                                letter-spacing: 2.2px;
                                text-align: center;
                                color: #2f2f2f;
                            }



                        }

                    }

                    >.hriz-cells.botm {
                        >.fake-cell {
                            height: clamp(2.594rem, 22.13vw, 10.375rem);
                        }
                    }

                    >.hriz-cells.line2 {
                        >.fake-cell {
                            height: clamp(3.844rem, 32.8vw, 15.375rem);

                            >p {
                                font-weight: 300;
                                font-size: var(--spfs34);
                                line-height: 1.71;
                                letter-spacing: 1.7px;
                                margin: calc((1em * 1.71 - 1em) / -2) auto;
                                ;
                            }
                        }
                    }

                }

                &.blu {
                    .heds-cell {
                        background-color: #235ab5;
                    }

                    .fake-cell {
                        background-color: #c5dbff;
                    }
                }

                &.vio {
                    .heds-cell {
                        background-color: #ac44ce;
                    }

                    .fake-cell {
                        background-color: #f2cffe;
                    }
                }

                &.grn {
                    .heds-cell {
                        background-color: #3b9a19;
                    }

                    .fake-cell {
                        background-color: #e0fed5;
                    }
                }

                &.red {
                    .heds-cell {
                        background-color: #c61345;
                    }

                    .fake-cell {
                        background-color: #ffdce6;
                    }
                }


            }
        }
    }

}


#area4 {
    >.content-area-rap {
        width: 100%;

        >.content-area {
            >picture {
                width: clamp(20.934rem, 41.25vw, 33rem);
                max-width: 528px;
                margin: var(--mg100) auto;

                @media screen and (max-width:812px) {
                    width: clamp(9.219rem, 78.67vw, 36.875rem);
                    max-width: 590px;
                    margin: var(--spmg120) auto;
                }
            }

            .area4-card-rap {
                width: 100%;
                display: grid;
                grid-template-areas:
                    "card-a card-b"
                    "card-c card-d";
                column-gap: clamp(2.22rem, 4.38vw, 3.5rem);
                row-gap: clamp(2.22rem, 4.38vw, 3.5rem);

                @media screen and (max-width:812px) {
                    display: none;
                }

                .area4-card {
                    width: clamp(21.727rem, 42.81vw, 34.25rem);
                    max-width: 548px;
                    height: 100%;
                    aspect-ratio: 137 / 100;
                    border-radius: var(--fs20);
                    background-color: #c9edff;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    >div:nth-of-type(1) {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        height: clamp(5.234rem, 10.31vw, 8.25rem);
                        max-height: 132px;
                        background-color: #a6e0fe;
                        border-radius: var(--fs20) var(--fs20) 0 0;

                        >p {
                            margin: calc((1em* 2 - 1em) / -2) auto;
                            position: relative;
                            text-wrap: wrap;
                            font-size: var(--fs20);
                            font-weight: 600;
                            line-height: 2;
                            letter-spacing: normal;
                            text-align: center;
                            color: #2f2f2f;
                            margin-top: clamp(0.357rem, 0.7vw, 0.563rem);
                            margin-bottom: 0;
                        }

                        >p:nth-of-type(2) {
                            font-size: var(--fs24);
                            margin-top: 0;
                            margin-bottom: 0;
                            line-height: 1.666;
                        }
                    }

                    >div:nth-of-type(2) {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding: 0 var(--mg60);
                        margin-top: 0;

                        >p {
                            font-size: var(--fs16);
                            font-weight: 300;
                            line-height: 2;
                            letter-spacing: normal;
                            text-align: left;
                            margin: calc((1em* 2 - 1em) / -2) auto;
                            position: relative;
                            text-wrap: wrap;

                        }

                    }

                    >div:nth-of-type(3) {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding-bottom: var(--mg60);
                        align-items: center;

                        >p {
                            font-size: var(--fs18);
                            font-weight: 600;
                            line-height: 2;
                            letter-spacing: normal;
                            text-align: center;
                            color: #2f2f2f;
                            margin: calc((1em* 2 - 1em) / -2) auto;
                            position: relative;
                            text-wrap: wrap;
                        }
                    }
                }

                .area4-card.card-a {
                    grid-area: card-a;
                }

                .area4-card.card-b {
                    background-color: #c9fbe7;
                    grid-area: card-b;

                    >div:nth-of-type(1) {
                        background-color: #abf2d6;
                    }
                }

                .area4-card.card-c {
                    background-color: #fff88c;
                    grid-area: card-c;

                    >div:nth-of-type(1) {
                        background-color: #efe767;
                    }
                }

                .area4-card.card-d {
                    background-color: #ffddf4;
                    grid-area: card-d;

                    >div:nth-of-type(1) {
                        background-color: #fdc0e9;
                    }
                }


            }


        }
    }
}


#area4-sp {
    max-width: 812px;
    padding: 0;
    margin: var(--spmg120) auto 0;

    >.content-area-rap {
        width: 100%;

        >.content-area {

            .area4-card-rap {
                width: 100%;
                display: none;

                @media screen and (max-width:812px) {
                    display: block;
                }

                .area4-card {
                    width: clamp(8.75rem, 74.67vw, 35rem);
                    max-width: 560px;
                    height: 100%;
                    aspect-ratio: 7 / 11;
                    border-radius: var(--spmg40);
                    background-color: #c9edff;
                    /*display: flex;
                    flex-direction: column;
                    justify-content: space-between;*/
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: clamp(4.172rem, 35.6vw, 16.688rem) repeat(2, 1fr);
                    grid-column-gap: 0px;
                    grid-row-gap: 0px;


                    >div:nth-of-type(1) {
                        grid-area: 1 / 1 / 2 / 2;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        /*height: clamp(9.578rem, 81.73vw, 38.313rem);*/
                        height: clamp(4.172rem, 35.6vw, 16.688rem);
                        max-height: 267px;
                        background-color: #a6e0fe;
                        border-radius: clamp(0.625rem, 5.33vw, 2.5rem) clamp(0.625rem, 5.33vw, 2.5rem) 0 0;

                        >p {
                            font-weight: 600;
                            margin-top: clamp(0.441rem, 0.87vw, 0.625rem);
                            margin-bottom: 0;
                            font-size: var(--spfs36);
                            line-height: 1.61;
                            letter-spacing: 1.8px;
                            text-align: center;
                            color: #2f2f2f;

                        }

                        >p:nth-of-type(2) {
                            margin-top: 0;
                            margin-bottom: 0;
                            font-size: clamp(0.688rem, 5.87vw, 2.75rem);
                            letter-spacing: 2.2px;


                        }
                    }

                    >div:nth-of-type(2) {
                        grid-area: 2 / 1 / 3 / 2;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        padding: 0 var(--spmg40);
                        margin-top: var(--spmg40);

                        >p {
                            font-size: var(--spfs28);
                            line-height: 1.86;
                            margin: calc((1em* 1.86 - 1em) / -2) auto;
                            font-size: clamp(0.5rem, 4.27vw, 2rem);
                            font-weight: 300;
                            text-align: left;
                            line-height: 1.63;
                            letter-spacing: 0.16px;
                            color: #2f2f2f;


                        }

                    }

                    >div:nth-of-type(3) {
                        grid-area: 3 / 1 / 4 / 2;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        padding-bottom: var(--spmg80);
                        align-items: center;

                        >p {
                            font-weight: 600;
                            text-align: center;
                            font-size: clamp(0.594rem, 5.07vw, 2.375rem);
                            line-height: 1.11;
                            letter-spacing: normal;
                            color: #2f2f2f;
                            margin: calc((1em * 1.11 - 1em) / -2) auto;

                        }
                    }
                }

                .area4-card.card-a {
                    grid-area: card-a;
                }

                .area4-card.card-b {
                    background-color: #c9fbe7;
                    grid-area: card-b;

                    >div:nth-of-type(1) {
                        background-color: #abf2d6;
                    }
                }

                .area4-card.card-c {
                    background-color: #fff88c;
                    grid-area: card-c;

                    >div:nth-of-type(1) {
                        background-color: #efe767;
                    }
                }

                .area4-card.card-d {
                    background-color: #ffddf4;
                    grid-area: card-d;

                    >div:nth-of-type(1) {
                        background-color: #fdc0e9;
                    }
                }

                .swipe {

                    .swipe-item-rap {
                        width: clamp(8.75rem, 74.67vw, 35rem);
                        display: flex;
                        justify-content: center;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-content: flex-start;
                        align-items: flex-start;
                    }
                }
            }


        }
    }
}

#area5 {
    @media screen and (max-width:812px) {
        padding-top: calc(clamp(1.25rem, 10.67vw, 5rem) + clamp(0.563rem, 4.8vw, 2.25rem));
    }

    >.content-area-rap {
        width: 100%;

        >.content-area {
            .area5-content-rap {
                display: flex;
                flex-direction: row;
                justify-content: space-between;



                >picture {
                    width: clamp(20.934rem, 41.25vw, 33rem);
                    max-width: 528px;
                    margin: 0;
                }

                .content-text {
                    margin-top: 0;
                    width: clamp(22.837rem, 45vw, 36rem);
                    max-width: 576px;

                    >p {
                        letter-spacing: 0.8px;
                    }

                    >.list-hed {
                        font-size: var(--fs24);
                        line-height: 1.75;
                        letter-spacing: normal;
                        font-weight: 600;
                        text-align: left;
                        color: #2f2f2f;
                        margin-bottom: 0;
                        margin-top: calc((1em * 1.75 - 1em) / -2 + var(--mg40));
                    }

                    >.list {
                        font-size: var(--fs16);
                        font-weight: 600;
                        line-height: 2;
                        letter-spacing: 0.8px;
                        text-align: left;
                        color: #2f2f2f;
                        margin: 0;
                        /*margin: calc((1em * 2 - 1em) / -2) auto;*/
                    }
                }

                @media screen and (max-width:812px) {
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;

                    >picture {
                        width: clamp(9.219rem, 78.67vw, 36.875rem);
                        max-width: 590px;
                        margin-top: var(--spmg60);
                        margin-bottom: 0;
                    }

                    .content-text {
                        margin-top: 0;
                        width: 100%;
                        max-width: 750px;

                        >p {
                            letter-spacing: 0.8px;
                        }

                        >.list-hed {
                            margin-bottom: 0.5em;
                            font-size: var(--spfs30);
                            line-height: 2.33;
                            letter-spacing: normal;
                            margin-top: calc((1em * 2.33 - 1em) / -2 + var(--spmg60));
                        }

                        >.list {
                            font-size: var(--spfs24);
                            font-weight: 600;
                            font-stretch: normal;
                            font-style: normal;
                            line-height: 2;
                            letter-spacing: 1.2px;
                        }
                    }

                }

            }

            .area5-content-rap.second {
                .content-text {
                    >p {
                        letter-spacing: normal;
                    }

                    .hed {
                        font-size: var(--fs24);
                        font-weight: 600;
                        line-height: 1.75;
                        letter-spacing: normal;
                        text-align: left;
                        color: #f68337;
                        margin-bottom: calc((1em * 1.75 - 1em) / -2 + var(--mg30));
                        margin-top: calc((1em * 1.75 - 1em) / -2 + var(--mg40));
                    }

                    .hed.grn {
                        color: #0fcdb2;
                        margin-top: calc((1em * 1.75 - 1em) / -2 + var(--mg30));

                        @media screen and (max-width:812px) {
                            margin-top: calc((1em * 1.75 - 1em) / -2 + var(--spmg60));
                        }
                    }

                    .text {
                        font-size: var(--fs16);
                        font-weight: 300;
                        line-height: 2;
                        letter-spacing: 0.4px;
                        text-align: left;
                        color: #2f2f2f;
                    }

                    &.grn {
                        width: 100%;
                        max-width: 100%;
                    }

                    @media screen and (max-width:812px) {
                        .hed {
                            font-size: var(--spfs30);
                            font-weight: 600;
                            line-height: 1.73;
                            letter-spacing: -0.3px;
                            text-align: left;
                            color: #f68337;
                            margin-bottom: calc((1em * 1.73 - 1em) / -2 + var(--spmg40));
                            margin-top: calc((1em * 1.73 - 1em) / -2 + var(--spmg60));
                        }

                        .text {
                            font-size: var(--spfs28);
                            line-height: 1.86;
                            letter-spacing: -0.28px;
                            text-align: left;
                            color: #2f2f2f;
                            margin-bottom: calc((1em * 1.86 - 1em) / -2);
                            margin-top: calc((1em * 1.86 - 1em) / -2);
                        }

                        >picture.sp-on {
                            width: clamp(9.219rem, 78.67vw, 36.875rem);
                            max-width: 590px;
                            margin-top: var(--spmg60);
                            margin-bottom: 0;
                            margin-left: auto;
                            margin-right: auto;
                        }

                    }

                }
            }

            .icon-list {
                width: 100%;
                height: 100%;
                aspect-ratio: 1152 / 227;
                border-radius: 20px;
                outline: solid 2px #9f9f9f;
                outline-offset: -2px;
                display: grid;
                justify-content: center;
                align-items: center;
                align-content: center;
                grid-template-columns: clamp(12.45rem, 24.53vw, 19.625rem) clamp(12.45rem, 24.53vw, 19.625rem) clamp(12.45rem, 24.53vw, 19.625rem);
                grid-template-rows: clamp(2.617rem, 5.16vw, 4.125rem) clamp(2.617rem, 5.16vw, 4.125rem);
                column-gap: clamp(2.379rem, 4.69vw, 3.75rem);
                row-gap: clamp(1.229rem, 2.42vw, 1.938rem);

                .icon-rap {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    @media screen and (max-width:812px) {
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        align-content: center;
                        flex-wrap: nowrap;

                    }

                    .icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: clamp(2.617rem, 5.16vw, 4.125rem);
                        height: clamp(2.617rem, 5.16vw, 4.125rem);
                        background-color: #f68337;
                        border-radius: 100px;


                        @media screen and (max-width:812px) {
                            width: clamp(1.578rem, 13.47vw, 6.313rem);
                            height: clamp(1.578rem, 13.47vw, 6.313rem);
                            margin-right: var(--spmg30);

                        }

                    }

                    >div:nth-of-type(2) {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        >P {
                            width: clamp(9.436rem, 18.59vw, 14.875rem);
                            max-width: 238px;
                            font-size: var(--fs14);
                            font-weight: 300;
                            line-height: 1.86;
                            letter-spacing: normal;
                            text-align: left;

                            @media screen and (max-width:812px) {
                                font-size: var(--spfs24);
                                line-height: 1.92;
                                width: clamp(7.094rem, 60.53vw, 28.375rem);
                                max-width: 454px;
                            }

                            .annotation-mark {
                                font-size: 0.6em;
                                vertical-align: super;
                            }

                            .annotation {
                                font-size: var(--fs12);
                            }

                            .annotation.bold {
                                font-weight: 600;
                                font-size: var(--fs12);
                            }

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


                                .annotation {
                                    font-size: var(--spfs20);
                                }

                                &.lineh1 {
                                    font-size: var(--spfs20);
                                    line-height: 1;
                                }

                                .annotation.bold {
                                    font-weight: 300;
                                    font-size: var(--spfs20);
                                    line-height: 1.5;
                                    margin: calc((1em * 1.5 - 1em) / -2) auto;
                                }

                            }
                        }
                    }

                }

                &.org {
                    .icon-rap {
                        .icon {
                            background-color: #f68337;
                        }
                    }

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

                        .icon-rap:nth-of-type(1),
                        .icon-rap:nth-of-type(2) {
                            & picture {
                                width: clamp(0.781rem, 6.67vw, 3.125rem);
                            }
                        }

                        .icon-rap:nth-of-type(3) {
                            & picture {
                                width: clamp(1.078rem, 9.2vw, 4.313rem);
                                margin-left: clamp(0.141rem, 1.2vw, 0.563rem);
                                margin-bottom: clamp(0.109rem, 0.93vw, 0.438rem);
                            }
                        }

                        .icon-rap:nth-of-type(4) {
                            & picture {
                                width: clamp(1.094rem, 9.33vw, 4.375rem);
                            }
                        }

                        .icon-rap:nth-of-type(5) {
                            & picture {
                                width: clamp(0.609rem, 5.2vw, 2.438rem);
                            }
                        }

                        .icon-rap:nth-of-type(6) {
                            & picture {
                                width: clamp(0.438rem, 3.73vw, 1.75rem);
                            }
                        }
                    }
                }

                &.grn {
                    .icon-rap {
                        .icon {
                            background-color: #0fcdb2;
                        }
                    }

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


                        .icon-rap:nth-of-type(1) {
                            & picture {
                                width: clamp(0.75rem, 6.4vw, 3rem);
                            }
                        }

                        .icon-rap:nth-of-type(2) {
                            & picture {
                                width: clamp(0.828rem, 7.07vw, 3.313rem);
                            }
                        }

                        .icon-rap:nth-of-type(3) {
                            & picture {
                                width: clamp(0.781rem, 6.67vw, 3.125rem)
                            }
                        }

                        .icon-rap:nth-of-type(4) {
                            & picture {
                                width: clamp(1.094rem, 9.33vw, 4.375rem);
                            }
                        }

                        .icon-rap:nth-of-type(5) {
                            & picture {
                                width: clamp(0.609rem, 5.2vw, 2.438rem);
                            }
                        }

                        .icon-rap:nth-of-type(6) {
                            & picture {
                                width: clamp(1.078rem, 9.2vw, 4.313rem);
                                margin-left: clamp(0.141rem, 1.2vw, 0.563rem);
                                margin-bottom: clamp(0.109rem, 0.93vw, 0.438rem);
                            }
                        }
                    }
                }

                @media screen and (max-width:812px) {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 117 / 148;
                    border-radius: var(--spmg40);
                    outline: solid clamp(0.063rem, -0.002rem + 0.55vw, 0.256rem) #9f9f9f;
                    outline-offset: calc(clamp(0.063rem, 0.53vw, 0.25rem) * -1);
                    justify-content: center;
                    align-items: center;
                    column-gap: 0;
                    row-gap: var(--spmg40);


                }
            }

            .area5-content-rap.third {
                display: flex;
                flex-direction: column;

                .content-text {
                    width: 100%;
                    max-width: 100%;

                    >p {
                        letter-spacing: normal;
                    }
                }

                .area5-card-rap {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    align-content: space-between;
                    width: 100%;
                    max-width: 1152px;
                    margin-top: var(--mg40);


                    .area5-card {
                        width: clamp(21.727rem, 42.81vw, 34.25rem);
                        max-width: 548px;
                        height: 100%;
                        aspect-ratio: 548 / 243;
                        display: flex;
                        justify-content: space-around;
                        flex-wrap: nowrap;
                        align-items: center;
                        border-radius: var(--fs20);
                        background-color: #c1eaff;

                        >div {
                            >picture {
                                max-width: clamp(7.375rem, 14.53vw, 11.625rem);
                                height: var(--mg60);
                            }

                            >p:nth-of-type(1) {
                                font-weight: 600;
                                font-size: var(--fs24);
                                line-height: 1.5;
                                margin: 0;

                            }

                            >p:nth-of-type(2) {
                                font-weight: 300;
                                font-size: var(--fs14);
                                line-height: 1.86;
                                letter-spacing: normal;
                                margin: 0;

                                .annotation-mark {
                                    font-size: 0.6em;
                                    vertical-align: super;
                                }

                                .annotation {
                                    font-size: var(--fs12);
                                }

                                .annotation.bold {
                                    font-weight: 600;
                                    font-size: var(--fs12);
                                }

                                @media screen and (max-width:812px) {
                                    font-size: var(--spfs28);
                                    line-height: 1.86;
                                    margin: calc((1em * 1.86 - 1em) / -2) auto;

                                    .annotation {
                                        font-size: var(--spfs20);
                                    }

                                    &.lineh1 {
                                        font-size: var(--spfs20);
                                        line-height: 1;
                                    }

                                    .annotation.bold {
                                        font-weight: 300;
                                        font-size: var(--spfs20);
                                        line-height: 1.5;
                                        margin: calc((1em * 1.5 - 1em) / -2) auto;
                                    }

                                }

                            }

                            @media screen and (max-width:812px) {
                                >p:nth-of-type(1) {
                                    font-weight: 600;
                                    font-size: var(--spfs30);
                                    line-height: 1.73;
                                    margin: 0;

                                }

                                >p:nth-of-type(2) {
                                    font-size: var(--spfs24);
                                    margin: 0;
                                    line-height: 1.92;
                                    letter-spacing: -0.24px;

                                }
                            }
                        }

                        >div:nth-of-type(2) {
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: wrap;
                            align-content: center;
                            width: clamp(9.357rem, 18.44vw, 14.75rem);
                            align-items: center;

                            @media screen and (max-width:812px) {
                                width: clamp(5.844rem, 49.87vw, 23.375rem);
                            }

                        }
                    }

                    .area5-card:nth-of-type(1),
                    .area5-card:nth-of-type(2) {
                        margin-bottom: var(--mg40);

                        @media screen and (max-width:812px) {
                            margin-bottom: var(--spmg40);
                        }
                    }

                    @media screen and (max-width:812px) {
                        max-width: 750px;
                        margin-top: var(--spmg60);

                        .area5-card {
                            width: 100%;
                            max-width: 702px;
                            height: 100%;
                            aspect-ratio: 702 / 293;
                            justify-content: space-evenly;
                            margin-bottom: var(--spmg40);
                            border-radius: var(--mg40);

                            >div {
                                >picture {
                                    width: 23.5042vw;
                                    height: var(--spmg60);
                                    max-width: 186px;
                                }
                            }
                        }

                    }

                }
            }

            .annotation-rap {
                margin-top: var(--mg40);

                >p {
                    font-size: var(--fs16);
                    font-weight: 300;
                    line-height: 2;
                    margin: calc((1em* 2 - 1em) / -2) auto;
                    position: relative;
                    text-wrap: wrap;


                    .annotation-mark {
                        font-size: 0.6em;
                        vertical-align: super;
                    }

                    .annotation {
                        font-size: var(--fs12);
                    }

                    .annotation.bold {
                        font-weight: 600;
                        font-size: var(--fs12);
                    }

                    @media screen and (max-width:812px) {
                        font-size: var(--spfs28);
                        line-height: 1.86;
                        margin: calc((1em * 1.86 - 1em) / -2) auto;

                        .annotation {
                            font-size: var(--spfs20);
                        }

                        &.lineh1 {
                            font-size: var(--spfs20);
                            line-height: 1;
                        }

                        .annotation.bold {
                            font-weight: 300;
                            font-size: var(--spfs20);
                            line-height: 1.5;
                            margin: calc((1em * 1.5 - 1em) / -2) auto;
                        }

                    }
                }

                @media screen and (max-width:812px) {
                    margin-top: clamp(0.313rem, 2.67vw, 1.25rem);
                    font-size: var(--spfs20);
                    line-height: normal;

                }
            }

            .area5-content-rap.fourth {
                .area5-synnex-card-rap {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-items: center;
                    align-content: space-between;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: space-between;

                    @media screen and (max-width:812px) {
                        flex-wrap: wrap;
                        margin-bottom: 0;
                    }

                    .area5-synnex-card {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        width: clamp(10.11rem, 19.92vw, 15.938rem);


                        &:nth-child(3),
                        &:nth-child(4) {

                            @media screen and (max-width:812px) {
                                margin-top: clamp(3.125rem, 13.33vw, 6.25rem);
                            }

                        }

                        @media screen and (max-width:812px) {
                            width: clamp(9.719rem, 41.47vw, 19.438rem);

                        }

                        >div {

                            >picture {
                                width: clamp(10.11rem, 19.92vw, 15.938rem);
                                aspect-ratio: 3 / 2;

                                @media screen and (max-width:812px) {
                                    width: clamp(9.719rem, 41.47vw, 19.438rem);
                                    aspect-ratio: 311 / 205;
                                }

                            }


                        }

                        >div:first-child {
                            height: auto;
                            width: clamp(10.11rem, 19.92vw, 15.938rem);
                            aspect-ratio: 3 / 2;

                            @media screen and (max-width:812px) {
                                width: clamp(9.719rem, 41.47vw, 19.438rem);
                                aspect-ratio: 311 / 205;
                            }
                        }


                        >div:nth-last-of-type(2) {
                            display: grid;
                            align-content: center;
                            height: clamp(6.423rem, 12.66vw, 10.125rem);
                            max-height: 162px;

                            @media screen and (max-width:812px) {
                                height: clamp(7.125rem, 30.4vw, 14.25rem);
                                max-height: 228px;
                            }
                        }

                        >div:nth-last-of-type(1) {
                            flex-grow: 1;
                            position: relative;
                            padding-bottom: clamp(1.388rem, 2.73vw, 2.188rem);

                            @media screen and (max-width:812px) {
                                height: auto;
                                padding-bottom: clamp(1.406rem, 6vw, 2.813rem);
                            }


                            >ul {
                                height: 100%;
                                padding: 0;
                            }


                            &::after {
                                content: "";
                                display: block;
                                width: 100%;
                                height: clamp(0.079rem, 0.16vw, 0.125rem);
                                border-radius: 0.5px;
                                background: #9f9f9f;
                                position: absolute;
                                bottom: 0;
                            }

                            &::before {
                                content: "";
                                display: block;
                                width: 100%;
                                height: clamp(0.079rem, 0.16vw, 0.125rem);
                                border-radius: 0.5px;
                                background: #9f9f9f;
                                margin-bottom: var(--mg30);
                            }

                            @media screen and (max-width:812px) {
                                &::after {
                                    content: "";
                                    display: block;
                                    width: clamp(9.719rem, 41.47vw, 19.438rem);
                                    height: clamp(0.156rem, 0.67vw, 0.313rem);
                                    border-radius: 0.5px;
                                    background: #9f9f9f;
                                    position: absolute;
                                    bottom: 0;

                                }

                                &::before {
                                    content: "";
                                    display: block;
                                    width: 100%;
                                    height: clamp(0.156rem, 0.67vw, 0.313rem);
                                    border-radius: 0.5px;
                                    background: #9f9f9f;
                                    margin-bottom: var(--spmg40);

                                }


                            }


                        }

                        >p {
                            font-size: var(--fs18);
                            font-weight: 600;
                            line-height: 1.5;
                            letter-spacing: normal;
                            text-align: center;
                            color: #2f2f2f;
                            margin: auto;

                            @media screen and (max-width:812px) {
                                font-size: var(--spfs28);
                                line-height: 1.5;
                            }

                            &:first-child {
                                font-size: var(--fs24);
                                margin-top: calc((1em* 1.75 - 1em) / -2);

                                @media screen and (max-width:812px) {
                                    font-size: var(--spfs30);
                                    margin-top: calc((1em* 1.5 - 1em) / -2);
                                }
                            }

                            &:last-child {
                                font-size: var(--fs14);
                                font-weight: 300;
                                margin-bottom: calc((1em* 1.5 - 1em) / -2);

                                @media screen and (max-width:812px) {
                                    font-size: var(--spfs24);
                                    margin-bottom: calc((1em* 1.5 - 1em) / -2);
                                }

                            }
                        }

                        >ul {
                            margin: 0;
                            list-style-type: none;
                            /*padding: var(--mg30) 0;

                            @media screen and (max-width:812px) {
                                padding: var(--spmg40) 0;
                            }*/


                            >li:first-of-type {
                                margin-top: calc((1em * 1.86 - 1em) / -2);

                                @media screen and (max-width:812px) {
                                    margin-top: calc((1em * 1.92 - 1em) / -2);
                                }
                            }

                            >li:last-of-type {
                                margin-bottom: calc((1em * 1.86 - 1em) / -2);

                                @media screen and (max-width:812px) {
                                    margin-bottom: calc((1em * 1.92 - 1em) / -2);
                                }
                            }

                            >li {
                                font-size: var(--fs14);
                                font-weight: 300;
                                line-height: 1.86;
                                text-align: left;
                                color: #2f2f2f;
                                position: relative;


                                &::before {
                                    content: "● ";
                                    position: absolute;
                                    top: 0.4em;
                                    left: 0;
                                    display: inline-block;
                                    font-size: var(--fs14);
                                    font-weight: 300;
                                    line-height: 1.86;
                                    margin: calc((1em * 1.86 - 1em) / -2) auto;

                                }

                                @media screen and (max-width:812px) {
                                    font-size: var(--spfs24);
                                    line-height: 1.92;

                                    &::before {
                                        font-size: var(--spfs24);
                                        line-height: 1.92;
                                        margin: calc((1em * 1.92 - 1em) / -2) auto;
                                    }


                                }


                                padding-left: 1.5em;


                            }
                        }

                    }


                }


            }


        }

        .link-blue.link-second {
            margin-top: 0;

            >p {
                margin-top: calc((1em * 2 - 1em) / -2 + 2em);

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

                    margin-top: calc((1em * 1.5 - 1em) / -2 + 2.0357em);
                }
            }
        }
    }
}


#area6 {
    >.content-area-rap {
        width: 100%;

        >.content-area {
            >picture {
                width: clamp(23.26rem, 45.83vw, 33rem);
                max-width: 528px;
                margin: var(--mg100) auto;

            }

            .area6-content-rap {
                margin-top: var(--mg100);

                @media screen and (max-width:812px) {
                    margin-top: var(--spmg120);
                }

                .area6-card-rap {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    align-content: space-between;
                    width: 100%;
                    max-width: 1152px;
                    margin-top: var(--mg40);

                    @media screen and (max-width:812px) {
                        margin-top: 0;
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        align-content: space-between;
                    }

                    .area6-card {
                        width: clamp(21.727rem, 42.81vw, 34.25rem);
                        max-width: 548px;
                        height: 100%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        flex-direction: column;
                        margin-top: var(--mg60);

                        &.extra {
                            >div:nth-of-type(3) {


                                >div:nth-of-type(1) {
                                    @media screen and (max-width: 812px) {

                                        width: clamp(18.75rem, 80vw, 37.5rem);
                                        flex-shrink: 0;
                                        margin-right: auto;
                                        margin-left: auto;
                                    }
                                }

                                >div:nth-of-type(1) {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    width: 100%;

                                    >p {
                                        font-size: var(--fs16);
                                        font-weight: 300;
                                        line-height: 2;
                                        margin: calc((1em* 2 - 1em) / -2) auto;
                                        position: relative;
                                        text-wrap: wrap;

                                        @media screen and (max-width: 812px) {
                                            font-size: var(--spfs28);
                                            line-height: 1.86;
                                            margin: calc((1em* 1.86 - 1em) / -2) auto;
                                        }
                                    }



                                }

                                .area6-btn {
                                    width: clamp(10.269rem, 20.23vw, 16.188rem);
                                    max-width: 258px;
                                    margin-top: var(--mg60);
                                    aspect-ratio: 258 / 61;
                                    border-radius: 30px;
                                    background-color: #e9d952;

                                    @media screen and (max-width:812px) {
                                        width: clamp(6.203rem, 52.93vw, 24.813rem);
                                        max-width: 397px;
                                        margin-top: var(--spmg60);
                                        aspect-ratio: 397 / 90;
                                        border-radius: clamp(0.703rem, 6vw, 2.813rem);
                                    }

                                    >a {
                                        width: 100%;
                                        height: 100%;
                                        text-decoration: none;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;


                                        >span {
                                            font-size: var(--fs16);
                                            font-weight: 600;
                                            line-height: 2;
                                            letter-spacing: normal;
                                            text-align: center;
                                            color: #174a92;

                                            @media screen and (max-width:812px) {
                                                font-size: var(--spfs28);
                                                line-height: 1.75;
                                            }
                                        }
                                    }

                                    @media (hover: hover) and (pointer: fine) {

                                        transition: .2s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                                        &:hover {
                                            opacity: 0.7;

                                        }

                                    }

                                    @media (hover: none) and (pointer: coarse) {

                                        transition: .1s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                                        &:active {
                                            opacity: 0.7;

                                        }

                                    }


                                }


                            }

                        }

                        @media screen and (max-width:812px) {
                            width: clamp(10.969rem, 93.6vw, 43.875rem);
                            max-width: 702px;
                            height: 100%;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            flex-direction: column;
                            margin-top: var(--spmg60);

                        }

                        >div {
                            width: clamp(21.727rem, 42.81vw, 34.25rem);
                            max-width: 548px;
                            text-align: center;
                            display: flex;
                            flex-wrap: nowrap;
                            justify-content: center;
                            align-items: center;

                            >p:nth-of-type(1) {
                                font-weight: 600;
                                font-size: clamp(0.833rem, 1.64vw, 1.313rem);
                                line-height: 1.5;
                                margin: calc((1em * 1.5 - 1em) / -2) auto;

                            }

                            >p:nth-of-type(2) {
                                font-weight: 300;
                                font-size: var(--fs14);
                                line-height: 1.86;
                                letter-spacing: normal;
                                margin: 0;

                            }

                            @media screen and (max-width:812px) {
                                width: clamp(10.969rem, 93.6vw, 43.875rem);
                                max-width: 702px;
                                text-align: center;
                                display: flex;
                                flex-wrap: nowrap;
                                justify-content: center;
                                align-items: center;

                                >p:nth-of-type(1) {
                                    margin: calc((1em * 1.86 - 1em) / -2) auto;
                                    font-size: var(--spfs28);
                                    line-height: 1.86;
                                    letter-spacing: normal;
                                    text-align: center;
                                    color: #fff;

                                }

                                >p:nth-of-type(2) {
                                    font-weight: 300;
                                    font-size: var(--fs14);
                                    line-height: 1.86;
                                    letter-spacing: normal;
                                    margin: 0;

                                }

                            }
                        }

                        >div:nth-of-type(1) {
                            height: 100%;
                            aspect-ratio: 548 / 61;
                            background-color: #3c47af;
                            font-size: clamp(0.935rem, 1.84vw, 1.326rem);
                            font-weight: 600;
                            line-height: normal;
                            letter-spacing: normal;
                            text-align: center;
                            color: #fff;

                            @media screen and (max-width:812px) {
                                aspect-ratio: 703 / 86;
                            }

                            &.bg-grn {
                                background-color: #208356;
                            }

                            &.bg-bulgrn {
                                background-color: #3caba2;
                            }
                        }

                        >div:nth-of-type(2) {
                            >p {
                                font-size: var(--fs24);
                                font-weight: 600;
                                line-height: 1.33;
                                letter-spacing: normal;
                                text-align: center;
                                color: #3c47af;
                                margin: calc((1em * 1.33 - 1em) / -2 + var(--mg30)) auto;

                                @media screen and (max-width:812px) {
                                    font-size: var(--spfs30);
                                    line-height: 1.73;
                                    margin-top: calc((1em * 1.73 - 1em) / -2 + clamp(0.359rem, 3.07vw, 1.438rem));
                                    margin-bottom: calc((1em * 1.73 - 1em) / -2 + var(--spmg40));

                                }


                                &.color-grn {
                                    color: #208356;
                                }

                                &.color-bulgrn {
                                    color: #3caba2;
                                }
                            }
                        }

                        >div:nth-of-type(3) {
                            width: 100%;
                            display: flex;
                            flex-direction: row;
                            align-items: flex-start;

                            >div {
                                width: 50%;
                            }

                            >div:nth-of-type(1) {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: center;

                                >picture.sp-img255 {
                                    width: clamp(10.11rem, 19.92vw, 15.938rem);
                                }

                                >picture.sp-img258 {
                                    width: clamp(10.229rem, 20.16vw, 16.125rem);
                                }

                                >picture.sp-img184 {
                                    width: clamp(7.295rem, 14.38vw, 11.5rem);
                                }

                                >picture.sp-img185 {
                                    width: clamp(7.335rem, 14.45vw, 11.563rem);
                                }

                                @media screen and (max-width:812px) {
                                    width: clamp(3.984rem, 34vw, 15.938rem);

                                    flex-shrink: 0;
                                    margin-right: clamp(0.734rem, 6.27vw, 2.938rem);


                                    >picture.sp-img255 {
                                        width: clamp(3.984rem, 34vw, 15.938rem);
                                    }

                                    >picture.sp-img258 {
                                        width: clamp(4.031rem, 34.4vw, 16.125rem);
                                    }

                                    >picture.sp-img184 {
                                        width: clamp(2.875rem, 24.53vw, 11.5rem);
                                    }

                                    >picture.sp-img185 {
                                        width: clamp(2.891rem, 24.67vw, 11.563rem);
                                    }
                                }
                            }

                            >div:nth-of-type(2) {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: flex-start;
                                padding-left: var(--fs16);

                                >p {
                                    margin: calc((1em* 2 - 1em) / -2) auto;
                                    position: relative;
                                    text-wrap: wrap;
                                    font-size: var(--fs16);
                                    font-weight: 300;
                                    line-height: 2;
                                    letter-spacing: normal;
                                    text-align: left;
                                }

                                @media screen and (max-width:812px) {
                                    padding-left: 0;
                                    width: clamp(6.203rem, 52.93vw, 24.813rem);
                                    max-width: 397px;

                                    >p {
                                        font-size: var(--spfs28);
                                        line-height: 1.86;
                                    }

                                }

                                .area6-btn {
                                    width: clamp(10.269rem, 20.23vw, 16.188rem);
                                    max-width: 258px;
                                    margin-top: var(--mg60);
                                    aspect-ratio: 258 / 61;
                                    border-radius: 30px;
                                    background-color: #e9d952;

                                    @media screen and (max-width:812px) {
                                        width: clamp(6.203rem, 52.93vw, 24.813rem);
                                        max-width: 397px;
                                        margin-top: var(--spmg60);
                                        aspect-ratio: 397 / 90;
                                        border-radius: clamp(0.703rem, 6vw, 2.813rem);
                                    }

                                    >a {
                                        width: 100%;
                                        height: 100%;
                                        text-decoration: none;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;


                                        >span {
                                            font-size: var(--fs16);
                                            font-weight: 600;
                                            line-height: 2;
                                            letter-spacing: normal;
                                            text-align: center;
                                            color: #174a92;

                                            @media screen and (max-width:812px) {
                                                font-size: var(--spfs28);
                                                line-height: 1.75;
                                            }
                                        }
                                    }

                                    @media (hover: hover) and (pointer: fine) {

                                        transition: .2s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                                        &:hover {
                                            opacity: 0.7;

                                        }

                                    }

                                    @media (hover: none) and (pointer: coarse) {

                                        transition: .1s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                                        &:active {
                                            opacity: 0.7;

                                        }

                                    }


                                }
                            }

                        }
                    }

                    .area6-card:nth-of-type(1) {
                        margin-top: 0;
                    }

                    .area6-card:nth-of-type(2) {
                        margin-top: 0;

                        @media screen and (max-width:812px) {
                            margin-top: var(--spmg60);
                        }
                    }
                }
            }
        }
    }
}

#area7 {
    >.content-area-rap {
        width: 100%;

        >.content-area {
            .h3-rap.br3 {
                h3 {
                    text-wrap: wrap;
                    width: clamp(42.9rem, 84.53vw, 67.625rem);
                }
            }

            .area7-content-rap {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                align-content: space-between;
                width: 100%;
                max-width: 1152px;
                margin-top: var(--mg40);

                @media screen and (max-width:812px) {
                    margin-top: 0;

                }

                .area7-content {
                    width: clamp(21.727rem, 42.81vw, 34.25rem);
                    max-width: 548px;
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: column;

                    @media screen and (max-width:812px) {
                        width: clamp(10.969rem, 93.6vw, 43.875rem);
                        max-width: 702px;
                        margin-top: var(--spmg60);

                    }

                    .area7-content-hed {
                        width: 100%;
                        max-width: 548px;
                        height: 100%;
                        aspect-ratio: 548 / 140;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        position: relative;

                        @media screen and (max-width:812px) {
                            max-width: 702px;
                            aspect-ratio: 39 / 10;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: flex-start;
                            position: relative;
                        }

                        &.side-l {
                            background-color: #0078d4;
                        }

                        &.side-r {
                            background-color: #d83b01;


                        }

                        >picture {
                            width: clamp(3.568rem, 7.03vw, 5.625rem);
                            max-width: 90px;
                            aspect-ratio: 1 / 1;
                            margin-left: var(--mg30);
                            position: absolute;
                            left: 0;

                            @media screen and (max-width:812px) {
                                width: clamp(2.031rem, 17.33vw, 8.125rem);
                                max-width: 130px;
                                aspect-ratio: 1 / 1;
                                margin-left: var(--spmg60);
                                position: relative;
                            }
                        }

                        >p {
                            font-size: var(--fs24);
                            font-weight: 600;
                            line-height: 1.75;
                            letter-spacing: normal;
                            text-align: center;
                            color: #fff;
                            margin: 0;

                            @media screen and (max-width:812px) {
                                font-size: var(--spfs36);
                                line-height: 1.78;
                                margin-left: var(--spmg30);
                                text-align: left;
                            }
                        }
                    }

                    .area7-content-text {
                        >p {
                            font-size: clamp(0.872rem, 1.72vw, 1.375rem);
                            font-weight: 600;
                            line-height: 1.73;
                            letter-spacing: normal;
                            text-align: left;
                            color: #2f2f2f;
                            margin: calc((1em * 1.73 - 1em) / -2 + var(--mg40)) auto;

                            @media screen and (max-width:812px) {
                                font-size: var(--spfs34);
                                line-height: 1.53;
                                margin: calc((1em * 1.53 - 1em) / -2 + var(--spmg60)) auto;

                            }
                        }
                    }

                    .area7-content-list {
                        >p {
                            font-feature-settings: "halt";

                            &:nth-of-type(2) {
                                margin-top: 0.5em;
                            }

                            &:nth-of-type(3) {
                                margin-top: 0.5em;
                            }

                            font-size: var(--fs16);
                            font-weight: 300;
                            line-height: 2;
                            margin: calc((1em * 2 - 1em) / -2) auto;
                            position: relative;
                            text-wrap: wrap;

                            &.dot::before {
                                content: "● ";
                                position: absolute;
                                top: 0.45em;
                                left: 0;
                                display: inline-block;
                                font-size: var(--fs16);
                                font-weight: 300;
                                line-height: 2;
                                margin: calc((1em * 2 - 1em) / -2) auto;

                            }

                            @media screen and (max-width:812px) {
                                &.dot::before {
                                    font-size: var(--spfs28);
                                    line-height: 1.86;
                                    margin: calc((1em * 1.86 - 1em) / -2) auto;
                                }


                            }

                            &.dot {
                                padding-left: 1.5em;
                            }

                            .annotation-mark {
                                font-size: 0.6em;
                                vertical-align: super;
                            }

                            .annotation {
                                font-size: var(--fs12);
                            }

                            .annotation.bold {
                                font-weight: 600;
                                font-size: var(--fs12);
                            }

                            @media screen and (max-width:812px) {
                                font-size: var(--spfs28);
                                line-height: 1.86;
                                margin: calc((1em * 1.86 - 1em) / -2) auto;

                                .annotation {
                                    font-size: var(--spfs20);
                                }

                                &.lineh1 {
                                    font-size: var(--spfs20);
                                    line-height: 1;
                                }

                                .annotation.bold {
                                    font-weight: 300;
                                    font-size: var(--spfs20);
                                    line-height: 1.5;
                                    margin: calc((1em * 1.5 - 1em) / -2) auto;
                                }

                            }
                        }
                    }

                    .area7-content-annotation {
                        margin-top: var(--mg40);

                        >p {
                            font-size: clamp(0.436rem, 0.86vw, 0.688rem);
                            font-weight: normal;
                            font-stretch: normal;
                            font-style: normal;
                            line-height: 1.64;
                            letter-spacing: normal;
                            text-align: left;
                            margin: calc((1em * 1.64 - 1em) / -2) auto;

                            .annotation {
                                font-size: var(--fs12);
                            }

                            @media screen and (max-width: 812px) {
                                .annotation {
                                    font-size: var(--spfs20);
                                }
                            }
                        }
                    }

                }

                >a {
                    margin: var(--mg80) auto 0;

                    @media screen and (max-width:812px) {
                        margin-top: var(--spmg80);

                    }


                    .area7-link-box {
                        width: clamp(31.243rem, 61.56vw, 49.25rem);
                        aspect-ratio: 788 / 101;
                        max-width: 788px;
                        outline: solid clamp(0.079rem, 0.16vw, 0.125rem) #9f9f9f;
                        outline-offset: calc(clamp(0.079rem, 0.16vw, 0.125rem) * -1);

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .area7-link-box-text {
                            >P {
                                font-size: var(--fs16);
                                font-weight: 600;
                                line-height: 2;
                                letter-spacing: normal;
                                text-align: center;
                                color: #0078d4;

                                @media screen and (max-width:812px) {
                                    width: clamp(19.688rem, 84vw, 39.375rem);
                                    font-size: var(--spfs28);
                                    line-height: 1.5;
                                }
                            }
                        }

                        @media screen and (max-width:812px) {
                            width: clamp(21.938rem, 93.6vw, 43.875rem);
                            max-height: 179px;
                            max-width: 702px;
                            aspect-ratio: 702 / 179;
                            outline: solid clamp(0.064rem, 0.55vw, 0.256rem) #9f9f9f;
                            outline-offset: calc(clamp(0.064rem, 0.55vw, 0.256rem) * -1);
                        }
                    }

                    @media (hover: hover) and (pointer: fine) {

                        transition: .2s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                        &:hover {
                            opacity: 0.7;

                        }

                    }

                    @media (hover: none) and (pointer: coarse) {

                        transition: .1s cubic-bezier(0.755, 0.05, 0.855, 0.06);

                        &:active {
                            opacity: 0.7;

                        }

                    }


                }








            }


        }
    }
}


#area8 {
    >.content-area-rap {
        width: 100%;
        margin-bottom: var(--mg180);

        @media screen and (max-width:812px) {
            margin-bottom: calc(clamp(5.625rem, 24vw, 11.25rem) - clamp(3.524rem, 6.94vw, 5rem));
        }

        >.content-area {
            .links {
                margin-top: var(--mg100);

                @media screen and (max-width:812px) {
                    margin-top: var(--spmg120);
                }

                >a {
                    .link-box {
                        width: clamp(21.727rem, 42.81vw, 34.25rem);
                        max-height: clamp(3.965rem, 7.81vw, 6.25rem);
                        height: 100%;
                        aspect-ratio: 548 / 100;
                        outline: solid clamp(0.079rem, 0.16vw, 0.125rem) #9f9f9f;
                        outline-offset: calc(clamp(0.079rem, 0.16vw, 0.125rem) * -1);

                        @media screen and (max-width:812px) {
                            width: clamp(10.984rem, 93.73vw, 43.938rem);
                            max-height: 131px;
                            max-width: 703px;
                            aspect-ratio: 703 / 131;
                            outline: solid clamp(0.064rem, 0.55vw, 0.256rem) #9f9f9f;
                            outline-offset: calc(clamp(0.064rem, 0.55vw, 0.256rem) * -1);
                        }
                    }
                }

            }


            >.content-move {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: var(--mg40);

                >a {
                    width: clamp(27.913rem, 55vw, 44rem);
                    max-width: 704px;

                    @media screen and (max-width:812px) {
                        width: 100%;
                        max-width: 702px;
                    }
                }

                @media screen and (max-width:812px) {
                    margin-top: var(--spmg60);
                }
            }

            >.btn-area {
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 0;
                margin-top: var(--mg80);

                @media screen and (max-width:812px) {
                    margin: var(--spmg120) auto 0;
                    padding-left: 0;
                    padding-right: 0;
                }
            }
        }
    }
}


.sp-on {
    display: none;

    @media screen and (max-width:812px) {
        display: block;
    }
}

.sp-off {
    display: block;

    @media screen and (max-width:812px) {
        display: none;
    }
}


.page-top {
    outline: solid 2px #0078d4;
    outline-offset: -2px;
    background-color: #ffffffe1;
    /*position: fixed;*/
    position: sticky;
    bottom: var(--fs20);
    left: 100%;
    z-index: 999999;
    display: none;
    width: clamp(3.524rem, 6.94vw, 5rem);

    aspect-ratio: 1 / 1;

    @media screen and (max-width:812px) {
        width: clamp(1.188rem, 10.13vw, 4.75rem);
        left: 86.8%;
    }

    >a {
        >div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            >img {
                width: clamp(1.674rem, 3.3vw, 2.375rem);
                aspect-ratio: 19 / 11;

                @media screen and (max-width:812px) {
                    width: clamp(0.594rem, 5.07vw, 2.375rem);
                }

            }
        }
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            background-color: #fff;
            transition: 0.3s;
        }
    }

    @media (hover: none) and (pointer: coarse) {
        &:active {
            background-color: #fff;
            transition: 0.1s;
        }
    }
}


#heder-area {
    width: 100%;
    height: auto;
    background-color: #6a6a6a;

    >.heder-main {
        width: 100%;
        margin: 0 auto;
        text-align: center;

        >p {
            font-size: 30px;
            font-weight: 300;
            color: #fffefe;
            display: grid;
            place-items: center;
            height: 60px;
        }
    }

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

        >.heder-main {

            >P {
                height: clamp(2.969rem, 25.33vw, 11.875rem);
                font-size: clamp(0.563rem, 4.8vw, 2.25rem);
            }
        }
    }
}


#footer-area {
    width: 100%;
    height: 130px;
    background-color: #6a6a6a;
    display: grid;
    place-items: center;
    align-items: center;
    justify-content: center;

    >.footer-main {
        width: 100%;
        margin: 0 auto;
        text-align: center;

        >p {
            font-size: 1.8rem;
            font-weight: 600;
            color: #fffefe;
        }
    }

    @media screen and (max-width:812px) {
        height: 260px;


        >.footer-main {
            >p {
                font-size: var(--spfs36);
            }
        }
    }

}