/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
    box-sizing: border-box
}

* {
    margin: 0
}

@media (prefers-reduced-motion:no-preference) {
    html {
        interpolate-size: allow-keywords
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%
}

input,
button,
textarea,
select {
    font: inherit
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word
}

p {
    text-wrap: pretty
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance
}

ul {
    list-style: none;
}

#root,
#__next {
    isolation: isolate
}

:root {
    --color-bg: #fff;
    --color-bg-light: #f8f9fa;
    --color-text-light: #666;
    --color-text-dark: #333;
    --color-red: #af1c1e;
    --color-main: #2c429c;
    --color-main-bg: #2c429ccc;
    --color-main-light: #4a60c4;
    --color-main-dark: #1a2666;
    --color-orange: #f49a4c;
    --color-orange-light: #f4c29c;
    --color-orange-dark: #ec6e04;
    --color-purple: #772F6D;
    --color-purple-light: #9d5b8b;
    --color-purple-shadow: #3a1430;

    --font-hl: calc((1em - 1lh) / 2);

    /*768-1536*/
    --size04: clamp(0.125rem, 0.26vw, 0.25rem);
    --size08: clamp(0.25rem, 0.52vw, 0.5rem);
    --size10: clamp(0.313rem, 0.65vw, 0.625rem);
    --size12: clamp(0.375rem, 0.78vw, 0.75rem);
    --size14: clamp(0.438rem, 0.91vw, 0.875rem);
    --size16: clamp(0.5rem, 1.04vw, 1rem);
    --size18: clamp(0.563rem, 1.17vw, 1.125rem);
    --size20: clamp(0.625rem, 1.3vw, 1.25rem);
    --size22: clamp(0.688rem, 1.43vw, 1.375rem);
    --size24: clamp(0.75rem, 1.56vw, 1.5rem);
    --size26: clamp(0.813rem, 1.69vw, 1.625rem);
    --size28: clamp(0.875rem, 1.82vw, 1.75rem);
    --size30: clamp(0.938rem, 1.95vw, 1.875rem);
    --size32: clamp(1rem, 2.08vw, 2rem);
    --size34: clamp(1.063rem, 2.21vw, 2.125rem);
    --size36: clamp(1.125rem, 2.34vw, 2.25rem);
    --size38: clamp(1.188rem, 2.47vw, 2.375rem);
    --size40: clamp(1.25rem, 2.6vw, 2.5rem);
    --size42: clamp(1.313rem, 2.73vw, 2.625rem);
    --size48: clamp(1.5rem, 3.13vw, 3rem);
    --size50: clamp(1.563rem, 3.26vw, 3.125rem);
    --size60: clamp(1.875rem, 3.91vw, 3.75rem);
    --size80: clamp(2.5rem, 5.21vw, 5rem);
    --size100: clamp(3.125rem, 6.51vw, 6.25rem);
    --size120: clamp(3.75rem, 7.81vw, 7.5rem);
    --size150: clamp(4.688rem, 9.77vw, 9.375rem);
    --size180: clamp(5.625rem, 11.72vw, 11.25rem);
    --side-padding: 0 5vw 0 5vw;
    --side-padding-left: 0 2vw 0 5vw;
    --side-padding-right: 0 5vw 0 0;
    --section-margin-top: 3%;

    /*375-750-768（x/2-x-x*1.024）*/
    --sp_size02: clamp(0.063rem, 0.27vw, 0.128rem);
    --sp_size04: clamp(0.125rem, 0.53vw, 0.256rem);
    --sp_size05: clamp(0.156rem, 0.67vw, 0.32rem);
    --sp_size08: clamp(0.25rem, 1.07vw, 0.512rem);
    --sp_size10: clamp(0.313rem, 1.33vw, 0.64rem);
    --sp_size12: clamp(0.375rem, 1.6vw, 0.768rem);
    --sp_size14: clamp(0.438rem, 1.87vw, 0.896rem);
    --sp_size16: clamp(0.5rem, 2.13vw, 1.024rem);
    --sp_size18: clamp(0.563rem, 2.4vw, 1.152rem);
    --sp_size20: clamp(0.625rem, 2.67vw, 1.28rem);
    --sp_size22: clamp(0.688rem, 2.93vw, 1.408rem);
    --sp_size24: clamp(0.75rem, 3.2vw, 1.536rem);
    --sp_size26: clamp(0.813rem, 3.47vw, 1.664rem);
    --sp_size28: clamp(0.875rem, 3.73vw, 1.792rem);
    --sp_size30: clamp(0.938rem, 4vw, 1.92rem);
    --sp_size32: clamp(1rem, 4.27vw, 2.048rem);
    --sp_size34: clamp(1.063rem, 4.53vw, 2.176rem);
    --sp_size36: clamp(1.125rem, 4.8vw, 2.304rem);
    --sp_size38: clamp(1.188rem, 5.07vw, 2.432rem);
    --sp_size40: clamp(1.25rem, 5.33vw, 2.56rem);
    --sp_size42: clamp(1.313rem, 5.6vw, 2.688rem);
    --sp_size44: clamp(1.375rem, 5.87vw, 2.816rem);
    --sp_size48: clamp(1.5rem, 6.4vw, 3.072rem);
    --sp_size50: clamp(1.563rem, 6.67vw, 3.2rem);
    --sp_size60: clamp(1.875rem, 8vw, 3.84rem);
    --sp_size80: clamp(2.5rem, 10.67vw, 5.12rem);
    --sp_size100: clamp(3.125rem, 13.33vw, 6.4rem);
    --sp_size120: clamp(3.75rem, 16vw, 7.68rem);
    --sp_size140: clamp(4.375rem, 18.67vw, 8.96rem);
    --sp_size180: clamp(5.625rem, 24vw, 11.52rem);
    --sp_section-margin-top: 2.5vw;
}

:where(a:any-link) {
    color: #6f7fc7;
}


*,
*::before,
*::after {
    box-sizing: border-box
}

* {
    margin: 0
}

a:link {
    color: var(--color-main);
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        color: var(--color-orange);
    }
}



body {
    background-color: #fff;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 375px;
    width: 100vw;
    -webkit-font-smoothing: antialiased;

    @media (hover: none) and (any-pointer: coarse) {
        min-width: 320px;

        a {
            color: #327caf;

            &:active {
                color: #205875;
            }
        }
    }
}


#header-area {
    width: 100vw;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    display: flex;
    background-image: linear-gradient(150deg, #ffffff00 40%, #ffffff00 60%), url(../img/bg001.jpeg);
    background-size: contain;
    background-position: top center;
    background-repeat: repeat;


    .header-wrap {
        /*max-width: 1536px;*/
        margin: 0 auto;

        width: 100%;
        height: 100%;

        background-image: linear-gradient(150deg, #ffffffc7 40%, #ffffff78 80%), url(../img/k2dsdf270890.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;

        header {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            position: relative;

            /*background: linear-gradient(150deg, #ffffff00 40%, #ffffff00 0%), url(../img/255576a0.png);*/
            background-size: contain;
            background-position: top center;
            background-repeat: repeat;

            .header-logo {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 2% 2%;
                z-index: 100;

                a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;


                    img {
                        width: var(--size150);
                        height: 100%;
                        aspect-ratio: 1344 / 1405;
                        object-fit: contain;
                    }

                    .header-logo-text {
                        width: 100%;
                        height: 100%;
                        color: var(--color-main);
                        font-weight: 600;
                        font-size: var(--size40);
                        text-shadow: 0 0 0.2em var(--color-bg);
                    }

                    @media screen and (max-width: 768px) {
                        img {
                            width: var(--sp_size100);
                        }

                        .header-logo-text {
                            font-size: var(--sp_size20);
                        }
                    }

                    @media screen and (max-width: 440px) {
                        img {
                            width: var(--sp_size140);
                        }

                        .header-logo-text {
                            font-size: var(--sp_size38);
                        }
                    }
                }
            }




        }


        .nav-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            flex-wrap: nowrap;
            z-index: 100;
            background-color: #000000bd;

            .hamburger {
                display: none;
                cursor: pointer;
                padding: var(--sp_size05);
                z-index: 1000;

                @media screen and (max-width: 440px) {
                    display: block;
                    position: fixed;
                    top: var(--sp_size14);
                    right: var(--sp_size14);
                    background-color: #ffffffbd;
                    border-radius: var(--sp_size04);
                    border: solid 1px #df8c2d;
                    opacity: 0.8;
                    aspect-ratio: 1 / 1;
                    display: flex;
                    flex-wrap: nowrap;
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: stretch;
                }

                span {
                    display: block;
                    width: 8vw;
                    height: var(--sp_size02);
                    background-color: var(--color-main);
                    margin: 5% 0;
                    transition: all 0.3s ease;


                }

                &.active {
                    justify-content: center;
                    align-items: center;

                    span:nth-child(1) {
                        transform: rotate(45deg) translate(var(--sp_size05), var(--sp_size05));

                    }

                    span:nth-child(2) {
                        opacity: 0;
                    }

                    span:nth-child(3) {
                        transform: rotate(-45deg) translate(var(--sp_size05), clamp(-0.227rem, -1.14vw, -0.313rem));
                    }
                }
            }

            nav {
                /*max-width: 1536px;*/
                width: 100%;

                .main-menu {
                    width: 100%;
                    padding: var(--side-padding);
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    align-items: center;

                    @media screen and (max-width: 768px) {
                        padding: 0 2vw;
                        flex-wrap: wrap;
                        justify-content: flex-end;
                        align-items: center;
                        align-content: space-around;
                        gap: var(--sp_size05);
                    }

                    @media screen and (max-width: 440px) {
                        display: none;
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100vh;
                        background-color: #000000de;
                        flex-direction: column;
                        justify-content: center;
                        gap: var(--sp_size28);
                        z-index: 999;
                        padding: var(--sp_size40) var(--sp_size20);

                        &.active {
                            display: flex;
                        }
                    }

                    li {
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 2.5em;

                        @media screen and (max-width: 768px) {
                            width: max-content;
                            justify-content: center;
                        }

                        a {
                            color: var(--color-bg);
                            font-size: var(--size18);
                            transition: all 0.3s ease;
                            letter-spacing: 0.15em;
                            text-align: center;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0 1vw;

                            @media screen and (max-width: 768px) {
                                font-size: var(--sp_size18);
                            }

                            @media screen and (max-width: 440px) {
                                font-size: var(--sp_size30);
                                letter-spacing: 0.25em;
                            }

                            &:hover {
                                color: var(--color-bg);
                                text-shadow: 0 0 0.2em var(--color-orange-light);
                                background-color: var(--color-main-light);
                                position: relative;

                                &::after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 100%;
                                    height: 2px;
                                    background-color: var(--color-orange);
                                }

                            }


                            &.current {
                                color: var(--color-orange);
                                font-weight: 400;
                                position: relative;
                                text-shadow: 0 0 0.2em #ffffff00;
                                background-color: var(--color-main-light);

                                &:hover {
                                    color: var(--color-orange);
                                    text-shadow: 0 0 0.2em #ffffff00;
                                    background-color: var(--color-main-light);

                                }

                                &::after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 100%;
                                    height: 2px;
                                    background-color: var(--color-orange);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#main-area {
    width: 100%;
    height: 100%;

    .title-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        background-image: linear-gradient(150deg, var(--color-main) 45%, #ffffff80 45.1%), url(../img/4.png);
        background-size: auto;
        background-position: top center;
        background-repeat: repeat;
        padding: var(--side-padding-left);

        .title {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;

            .h1-wrap {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;

                h1 {
                    font-size: var(--size40);
                    font-weight: 600;
                    color: var(--color-orange);
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        transform: translateX(-50%);
                        width: 60%;
                        height: 2px;
                        background-color: var(--color-bg);
                    }
                }

                aside {
                    font-size: var(--size20);
                    font-weight: 600;
                    color: var(--color-orange-light);
                }

                @media screen and (max-width: 768px) {
                    h1 {
                        font-size: var(--sp_size24);
                    }

                    aside {
                        font-size: var(--sp_size20);
                    }
                }

                @media screen and (max-width: 440px) {
                    h1 {
                        font-size: var(--sp_size32);
                    }

                    aside {
                        font-size: var(--sp_size28);
                    }
                }

            }
        }
    }

    .main-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;


        main {
            width: 80%;
            padding: var(--side-padding-left);
            background-color: var(--color-bg);

            #news-section {
                width: 100%;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                margin-bottom: var(--size30);

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

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


                .news-wrap {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;

                    .news-title {
                        width: 100%;
                        height: fit-content;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        margin-top: var(--section-margin-top);
                        margin-bottom: 2%;


                        h2 {
                            font-size: var(--size36);
                            font-weight: 600;
                            color: var(--color-main);
                            position: relative;

                            &::after {
                                content: '';
                                position: absolute;
                                bottom: 0;
                                left: 50%;
                                transform: translateX(-50%);
                                width: 100%;
                                height: 2px;
                                background-color: var(--color-main);
                            }
                        }

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

                            h2 {
                                font-size: var(--sp_size24);
                            }
                        }

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

                            h2 {
                                font-size: var(--sp_size32);
                            }
                        }
                    }

                    .search-list {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        justify-content: flex-start;
                        align-items: center;
                        gap: var(--size10);
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        margin-bottom: var(--size20);

                        button {
                            border: 1px solid var(--color-main);
                            background-color: var(--color-bg);
                            color: var(--color-main);
                            font-size: var(--size16);
                            font-weight: 600;
                            padding: 0.5em var(--size16);
                            cursor: pointer;
                            transition: all 0.3s ease;

                            &:hover,
                            &.is-active {
                                background-color: var(--color-main);
                                color: var(--color-bg);
                                border: 1px solid var(--color-bg);
                            }


                        }

                        .news-more {
                            border: 1px solid var(--color-main);
                            background-color: var(--color-bg);
                            color: var(--color-main);
                            font-size: var(--size16);
                            font-weight: 600;
                            padding: 0.5em var(--size16);
                            cursor: pointer;

                            &:hover {
                                background-color: var(--color-main);
                                color: var(--color-orange);
                                text-decoration: underline;
                                border-color: var(--color-orange);
                            }
                        }

                        @media screen and (max-width: 768px) {
                            gap: var(--sp_size05);
                            margin-bottom: var(--sp_size10);

                            button {
                                font-size: var(--sp_size14);
                                padding: 0.5em var(--sp_size14);
                            }

                            .news-more {
                                font-size: var(--sp_size14);
                                padding: 0.5em var(--sp_size14);
                            }
                        }

                        @media screen and (max-width: 440px) {
                            gap: var(--sp_size08);
                            margin-bottom: var(--sp_size12);

                            button {
                                font-size: var(--sp_size22);
                                padding: 0.5em var(--sp_size14);
                            }

                            .news-more {
                                font-size: var(--sp_size22);
                                padding: 0.5em var(--sp_size14);
                            }
                        }
                    }

                    .news-list {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        max-height: 30em;
                        overflow-y: auto;
                        overflow-x: hidden;
                        background-image: linear-gradient(150deg, #ffffff 45%, #ffffffbf 45.1%), url(../img/22108753.png);
                        background-size: 20%;
                        background-position: 95% 100%;
                        background-repeat: no-repeat;
                        box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);

                        li {
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-items: center;
                            padding: var(--size16) 0;
                            border-bottom: 1px solid #e0e0e0;
                            transition: all 0.3s ease;

                            &:last-child {
                                border-bottom: none;
                            }

                            &:hover {
                                background-color: #dbdbdbab;
                                padding-left: var(--size12);
                            }

                            &.is-hide {
                                display: none;
                            }

                            time {
                                font-size: var(--size14);
                                color: #666;
                                font-weight: 500;
                                min-width: 5em;
                                margin-right: 1em;
                                margin-left: 1em;
                            }

                            .news-category {
                                background-color: var(--color-main);
                                color: #fff;
                                font-size: var(--size12);
                                font-weight: 600;
                                padding: .5em;
                                margin-right: 1em;
                                min-width: 6em;
                                white-space: nowrap;
                                text-align: center;
                                vertical-align: middle;
                            }

                            a {
                                flex: 1;
                                color: var(--color-main);
                                font-size: var(--size16);
                                line-height: 1.6;
                                text-decoration: none;
                                transition: all 0.3s ease;

                                &:hover {
                                    color: var(--color-orange);
                                    text-decoration: underline;
                                }
                            }
                        }

                        @media screen and (max-width: 768px) {
                            max-height: 30em;

                            li {
                                padding: var(--sp_size12) 0;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-items: center;


                                &:hover {
                                    padding-left: 0;
                                }

                                a {
                                    font-size: var(--sp_size20);
                                    width: 100%;
                                    flex-basis: auto;
                                    flex-shrink: 1;
                                    padding: 0.5em 1em;

                                }


                                time {
                                    font-size: var(--sp_size18);
                                }

                                .news-category {
                                    font-size: var(--sp_size16);
                                    padding: .25em;

                                }
                            }
                        }

                        @media screen and (max-width: 440px) {
                            max-height: 42vh;

                            li {
                                padding: var(--sp_size12) 0;
                                flex-direction: row;
                                flex-wrap: wrap;
                                align-items: center;


                                &:hover {
                                    padding-left: 0;
                                }

                                a {
                                    font-size: var(--sp_size28);
                                    width: 100%;
                                    flex-basis: 100%;
                                    flex-shrink: 0;
                                    padding: 0.5em 1em;

                                }


                                time {
                                    font-size: var(--sp_size24);
                                }

                                .news-category {
                                    font-size: var(--sp_size24);
                                    padding: .25em;

                                }
                            }
                        }

                    }
                }
            }

            .info-section {
                background-color: #f8f8f8;
                border-radius: 8px;
                padding: var(--size20);
                margin-bottom: var(--size30);
                margin-top: var(--section-margin-top);

                .info-wrap {
                    h2 {
                        color: var(--color-main);
                        font-size: var(--size20);
                        margin-bottom: var(--size16);
                        font-weight: bold;
                    }

                    p {
                        margin-bottom: var(--size16);
                        line-height: 1.6;
                        font-size: var(--size16);
                    }

                    .contact-info {
                        background-color: var(--color-main);
                        color: var(--color-bg);
                        padding: var(--size12);
                        border-radius: 4px;
                        margin: var(--size20) 0;
                        text-align: center;
                        font-weight: bold;
                        font-size: var(--size16);

                        p {
                            margin-bottom: 0;
                            color: var(--color-bg);
                        }


                        a {
                            display: inline-block;
                            text-decoration: underline;
                            margin-top: 0;
                            color: var(--color-bg);

                            &:hover {
                                color: var(--color-orange);
                                text-decoration: underline;
                            }
                        }
                    }
                }

                @media screen and (max-width: 768px) {
                    padding: var(--sp_size12);
                    margin-bottom: var(--sp_size30);
                    margin-top: var(--sp_section-margin-top);

                    .info-wrap {
                        h2 {
                            font-size: var(--sp_size24);
                            margin-bottom: var(--sp_size12);
                        }

                        p {
                            font-size: var(--sp_size24);
                            margin-bottom: var(--sp_size12);
                        }

                        .contact-info {
                            margin: var(--sp_size12) 0;
                            font-size: var(--sp_size24);
                            padding: var(--sp_size12);
                        }
                    }
                }

                @media screen and (max-width: 440px) {
                    padding: var(--sp_size12);
                    margin-bottom: var(--sp_size30);
                    margin-top: var(--sp_section-margin-top);

                    .info-wrap {
                        h2 {
                            font-size: var(--sp_size24);
                            margin-bottom: var(--sp_size12);
                        }

                        p {
                            font-size: var(--sp_size24);
                            margin-bottom: var(--sp_size12);
                        }

                        .contact-info {
                            margin: var(--sp_size12) 0;
                            font-size: var(--sp_size24);
                            padding: var(--sp_size12);
                        }
                    }
                }
            }

            .section {
                width: 100%;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;

                .section-wrap {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;



                    .title {
                        width: 100%;
                        height: fit-content;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        margin-top: var(--section-margin-top);
                        margin-bottom: 2%;


                        h2 {
                            font-size: var(--size36);
                            font-weight: 600;
                            color: var(--color-main);
                            position: relative;

                            &::after {
                                content: '';
                                position: absolute;
                                bottom: 0;
                                left: 50%;
                                transform: translateX(-50%);
                                width: 100%;
                                height: 2px;
                                background-color: var(--color-main);
                            }
                        }

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

                            h2 {
                                font-size: var(--sp_size24);
                                margin-bottom: var(--sp_size12);
                                margin-top: var(--sp_section-margin-top);
                            }
                        }

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

                            h2 {
                                font-size: var(--sp_size38);
                                margin-bottom: var(--sp_size12);
                                margin-top: var(--sp_section-margin-top);
                            }
                        }
                    }

                    .section-info {
                        .bg-blue {
                            background-image: linear-gradient(150deg, #2c429ccc 0%, #2c429ccb 100%), linear-gradient(30deg, #2c429ccc 0%, rgba(255, 255, 255, 0) 30%), url(../img/AdobeStockss.png);
                            background-size: cover;
                            background-position: center right;
                            background-repeat: no-repeat;

                            background-color: var(--color-main);
                            color: var(--color-orange);
                            padding: var(--size20);
                            border-radius: 8px;
                            margin: var(--size20) 0;
                            text-align: center;
                            width: 100%;

                            ul {
                                list-style: none;
                                display: flex;
                                flex-direction: column;
                                gap: var(--size12);
                                align-items: center;
                                justify-content: center;
                                width: 100%;

                                li {
                                    font-size: var(--size16);
                                    display: flex;
                                    align-items: center;
                                    gap: var(--size12);
                                    width: 100%;
                                    justify-content: center;
                                    letter-spacing: 0.1em;

                                    &:first-child {
                                        font-weight: bold;
                                        font-size: var(--size24);
                                        margin-bottom: var(--size08);
                                    }

                                    &:nth-child(2) {
                                        a {
                                            background-color: var(--color-orange-dark);
                                            color: var(--color-bg);
                                            padding: var(--size08) var(--size16);
                                            border-radius: 4px;
                                            font-weight: bold;
                                            text-decoration: none;
                                            transition: all 0.3s ease;
                                            width: 30%;
                                            letter-spacing: 0.1em;

                                            &:hover {
                                                background-color: var(--color-orange);
                                                transform: translateY(-1px);
                                                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                                                color: var(--color-bg);
                                            }
                                        }
                                    }

                                    &:last-child {
                                        font-size: var(--size14);
                                        opacity: 0.9;
                                        color: var(--color-bg);

                                        span {
                                            color: var(--color-orange-light);
                                            font-weight: 300;
                                        }
                                    }

                                    time {
                                        font-weight: 300;
                                    }
                                }
                            }

                            p {
                                margin-bottom: 0;
                                color: var(--color-bg);
                            }

                            a {
                                display: inline-block;
                                text-decoration: underline;
                                margin-top: 0;
                                color: var(--color-bg);

                                &:hover {
                                    color: var(--color-orange);
                                    text-decoration: underline;
                                }
                            }

                            @media screen and (max-width: 768px) {
                                padding: var(--sp_size20);
                                margin: var(--sp_size18) 0;

                                ul {
                                    li {
                                        font-size: var(--sp_size20);

                                        &:first-child {
                                            font-size: var(--sp_size20);
                                            margin-bottom: var(--sp_size12);
                                        }

                                        &:nth-child(2) {
                                            a {
                                                padding: var(--sp_size08) var(--sp_size16);
                                            }
                                        }

                                        &:last-child {
                                            font-size: var(--sp_size20);
                                        }
                                    }
                                }
                            }

                            @media screen and (max-width: 440px) {
                                padding: var(--sp_size20);
                                margin: var(--sp_size18) 0;

                                ul {
                                    li {
                                        font-size: var(--sp_size28);

                                        &:first-child {
                                            font-size: var(--sp_size28);
                                            margin-bottom: var(--sp_size12);
                                        }

                                        &:nth-child(2) {
                                            a {
                                                padding: var(--sp_size08) var(--sp_size16);
                                            }
                                        }

                                        &:last-child {
                                            font-size: var(--sp_size24);
                                        }
                                    }
                                }
                            }
                        }
                    }


                }

            }
        }


        .said-r {
            width: 20%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            padding: var(--side-padding-right);
            margin-top: var(--size32);

            .said-r-box {
                background-color: #fff;
                border-radius: 8px;
                padding: var(--size20);
                margin-bottom: var(--size30);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

                h3 {
                    color: var(--color-main);
                    font-size: var(--size18);
                    margin-bottom: var(--size16);
                    font-weight: bold;
                    border-bottom: 2px solid var(--color-main);
                    padding-bottom: var(--size08);
                }

                img {
                    width: 100%;
                    height: auto;
                    margin-bottom: var(--size12);
                    border-radius: 4px;
                }

                a {
                    display: block;
                    margin-bottom: var(--size12);

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

                    p {
                        color: var(--color-main);
                        text-decoration: underline;
                        font-size: var(--size14);
                        text-align: center;
                        margin-top: var(--size12);

                        &:hover {
                            color: var(--color-orange);
                            text-decoration: underline;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 768px) {
            flex-direction: column;
            flex-wrap: nowrap;

            main {
                width: 100vw;
                padding: 2vw;
            }

            .said-r {
                width: 100vw;
                padding: 2vw;
                margin-top: 0;
                flex-direction: row;

                .said-r-box {
                    margin-bottom: var(--sp_size30);
                    padding: var(--sp_size12);

                    h3 {
                        font-size: var(--sp_size24);
                        margin-bottom: var(--sp_size12);
                    }

                    img {
                        margin-bottom: var(--sp_size12);
                        max-width: min-content;
                    }

                    a {
                        p {
                            font-size: var(--sp_size18);
                            margin-top: var(--sp_size12);
                        }
                    }
                }


                @media screen and (max-width: 440px) {
                    .said-r-box {
                        margin-bottom: var(--sp_size30);
                        padding: var(--sp_size12);

                        h3 {
                            font-size: var(--sp_size24);
                            margin-bottom: var(--sp_size12);
                        }

                        img {
                            margin-bottom: var(--sp_size12);
                        }

                        a {
                            p {
                                font-size: var(--sp_size24);
                                margin-top: var(--sp_size12);
                            }
                        }
                    }
                }
            }
        }


    }

    @media screen and (max-width: 768px) {
        width: 100vw;

        .title-wrap {
            width: 100vw;
            padding: 1vw 2vw;

        }
    }


}



#footer-area {
    background-image: linear-gradient(90deg, #00000000 100%, #00000000 100%), url(../img/bg003.png);
    background-color: var(--color-main);
    color: var(--color-bg);
    padding: var(--size40) 0;
    margin-top: var(--size60);
    border-top: 5px solid var(--color-orange);

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    .footer-wrap {
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        gap: var(--size30);

        .footer-info {
            text-align: center;

            h3 {
                font-size: var(--size20);
                margin-bottom: var(--size16);
                font-weight: bold;
            }

            p {
                font-size: var(--size14);
                line-height: 1.8;
                margin-bottom: var(--size08);

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

                a {
                    color: var(--color-bg);
                    text-decoration: underline;
                }
            }
        }

        .footer-nav {
            width: 100%;
            padding: 0 var(--size20);
            background-color: #00000093;

            ul {

                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--size16);
                padding: var(--size20) 0;


                li {
                    a {
                        color: var(--color-orange);
                        font-size: var(--size14);
                        transition: opacity 0.3s ease;

                        &:hover {
                            color: var(--color-orange-dark);
                            text-decoration: underline;
                        }
                    }
                }
            }
        }

        .copyright {
            text-align: center;
            font-size: var(--size12);
            opacity: 0.9;
            color: var(--color-bg);
        }
    }

    @media screen and (max-width: 768px) {
        padding: var(--sp_size30) 0;
        margin-top: var(--sp_size30);

        .footer-wrap {
            gap: var(--sp_size12);

            .footer-info {
                h3 {
                    font-size: var(--sp_size24);
                    margin-bottom: var(--sp_size12);
                }

                p {
                    font-size: var(--sp_size14);
                    margin-bottom: var(--sp_size12);
                }
            }

            .footer-nav {
                ul {
                    flex-direction: row;
                    align-items: center;
                    gap: var(--sp_size12);
                    padding: var(--sp_size12) 0;

                    li {
                        a {
                            font-size: var(--sp_size14);
                            margin-bottom: var(--sp_size12);
                        }
                    }
                }
            }

            .copyright {
                font-size: var(--sp_size14);
                margin-bottom: var(--sp_size12);
            }
        }
    }

    @media screen and (max-width: 440px) {
        padding: var(--sp_size30) 0;
        margin-top: var(--sp_size30);

        .footer-wrap {
            gap: var(--sp_size12);

            .footer-info {
                h3 {
                    font-size: var(--sp_size30);
                    margin-bottom: var(--sp_size12);
                }

                p {
                    font-size: var(--sp_size24);
                    margin-bottom: var(--sp_size12);
                }
            }

            .footer-nav {
                ul {
                    flex-direction: row;
                    align-items: center;
                    gap: var(--sp_size12);
                    padding: var(--sp_size12) 0;

                    li {
                        a {
                            font-size: var(--sp_size24);
                            margin-bottom: var(--sp_size12);
                        }
                    }
                }
            }

            .copyright {
                font-size: var(--sp_size20);
                margin-bottom: var(--sp_size12);
            }
        }
    }
}

br.sp_br {
    display: none;
}

@media screen and (max-width: 768px) {
    br.sp_br {
        display: block;
    }
}