@charset "UTF-8";

:root {
    --vw-large: 1360;
    /* PC */
    --vw-small: 390;
    /* SP */
}

.tit {
    background: linear-gradient(180deg, #F9F9F9 0%, rgba(249, 249, 249, 0.70) 100%);
    width: 100%;
    height: calc((100vw / var(--vw-large))*420);
    align-items: center;
    margin-bottom: calc((100vw / var(--vw-large))*100);

    @media screen and (max-width: 768px) {
        height: calc((100vw / var(--vw-small))*250);
        margin-bottom: calc((100vw / var(--vw-small))*26);
    }

    .wrap {
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto;
        text-align: left;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*350);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*110);
            font-style: italic;
            font-weight: 500;
            line-height: 140%;
            /* 154px */
            text-align: left;

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*50);
                margin-bottom: calc((100vw / var(--vw-small))*15);
            }
        }

        span {
            font-size: calc((100vw / var(--vw-large))*16);
            font-weight: 400;
            line-height: 0%;
            /* 0 */
            letter-spacing: calc((100vw / var(--vw-large))*4);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*16);
                letter-spacing: calc((100vw / var(--vw-small))*4);
            }
        }
    }
}

/* CONCEPT */

.concept {
    margin: 0 auto calc((100vw / var(--vw-large))*120);
    width: calc((100vw / var(--vw-large))*1010);

    @media screen and (max-width: 768px) {
        margin: 0 auto calc((100vw / var(--vw-small))*40);
        width: calc((100vw / var(--vw-small))*375);
    }

    .tit_wrap {
        margin-bottom: calc((100vw / var(--vw-large))*40);

        @media screen and (max-width: 768px) {
            margin-bottom: calc((100vw / var(--vw-small))*20);
        }

        span {
            font-size: calc((100vw / var(--vw-large))*28);
            font-style: italic;
            font-weight: 500;
            line-height: 140%;
            /* 39.2px */
            letter-spacing: calc((100vw / var(--vw-large))*0.5);
            margin-bottom: calc((100vw / var(--vw-large))*40);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*16);
                letter-spacing: calc((100vw / var(--vw-small))*0.5);
                margin-bottom: calc((100vw / var(--vw-small))*15);
                display: block;
            }
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*48);
            font-style: italic;
            font-weight: 500;
            line-height: 150%;
            /* 72px */
            letter-spacing: calc((100vw / var(--vw-large))*0.5);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*36);
                line-height: 110%;
                /* 39.6px */
                letter-spacing: calc((100vw / var(--vw-small))*0.5);
            }
        }
    }

    .concept_img {
        margin-bottom: calc((100vw / var(--vw-large))*40);

        @media screen and (max-width: 768px) {
            margin-bottom: calc((100vw / var(--vw-small))*20);
        }
    }

    .description {
        h3 {
            font-size: calc((100vw / var(--vw-large))*28);
            font-style: italic;
            font-weight: 500;
            line-height: 150%;
            /* 42px */
            letter-spacing: calc((100vw / var(--vw-large))*0.5);
            margin-bottom: calc((100vw / var(--vw-large))*40);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*22);
                letter-spacing: calc((100vw / var(--vw-small))*0.5);
                margin-bottom: calc((100vw / var(--vw-small))*20);
                width: calc((100vw / var(--vw-small))*384);
            }
        }

        p {
            width: calc((100vw / var(--vw-large))*700);
            text-align: left;
            line-height: 200%;
            /* 28px */
            letter-spacing: calc((100vw / var(--vw-large))*1.6);
            margin: 0 auto calc((100vw / var(--vw-large))*40);

            @media screen and (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*330);
                letter-spacing: calc((100vw / var(--vw-small))*1.6);
                margin-bottom: calc((100vw / var(--vw-small))*20);
            }
        }

        span {
            width: calc((100vw / var(--vw-large))*857);
            margin: 0 auto;
            display: block;
            text-align: right;

            @media screen and (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*330);
                font-size: calc((100vw / var(--vw-small))*14);
            }
        }
    }
}

/* STAFF */

.staff {
    position: relative;
    padding-bottom: calc((100vw / var(--vw-large))*193);

    @media screen and (max-width: 768px) {
        padding-bottom: calc((100vw / var(--vw-small))*120);
    }

    .inner {
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*360);
        }

        .tit_wrap {
            text-align: left;
            margin-bottom: calc((100vw / var(--vw-large))*346);

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*40);
            }

            span {
                display: block;
                font-size: calc((100vw / var(--vw-large))*16);
                font-weight: 400;
                line-height: 218.75%;
                letter-spacing: calc((100vw / var(--vw-large))*6);
                margin-bottom: calc((100vw / var(--vw-large))*8);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*16);
                    letter-spacing: calc((100vw / var(--vw-small))*6);
                    margin-bottom: calc((100vw / var(--vw-small))*8);
                }
            }

            h2 {
                text-align: left;
                margin-bottom: calc((100vw / var(--vw-large))*23);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*28);
                    line-height: 121.429%;
                    letter-spacing: calc((100vw / var(--vw-small))*1.5);
                    margin-bottom: calc((100vw / var(--vw-small))*20);
                }
            }

            p {
                font-size: calc((100vw / var(--vw-large))*16);
                letter-spacing: calc((100vw / var(--vw-large))*4);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*16);
                    letter-spacing: calc((100vw / var(--vw-small))*4);
                }
            }
        }

        ul {
            flex-wrap: wrap;
            gap: calc((100vw / var(--vw-large))*112) 0;

            @media screen and (max-width: 768px) {
                gap: calc((100vw / var(--vw-small))*25) 0;
            }

            li {
                width: calc((100vw / var(--vw-large))*360);
                filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.25));

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

                &:nth-child(3n + 2) {
                    margin-top: calc((100vw / var(--vw-large))*-180);

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

                &:nth-child(3n) {
                    margin-top: calc((100vw / var(--vw-large))*-360);


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

    .staff_bg {
        position: absolute;
        top: calc((100vw / var(--vw-large))*160);
        right: 0;
        z-index: -1;
        width: calc((100vw / var(--vw-large))*1078);

        @media screen and (max-width: 768px) {
            top: calc((100vw / var(--vw-small))*130);
            right: 0;
            width: calc((100vw / var(--vw-small))*290);
        }
    }
}

/* COMPANY */

.company {
    margin-bottom: calc((100vw / var(--vw-large))*100);

    @media screen and (max-width: 768px) {
        margin-bottom: calc((100vw / var(--vw-small))*60);
    }

    .inner {
        width: calc((100vw / var(--vw-large))*833);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*360);
        }

        .tit_wrap {
            margin-bottom: calc((100vw / var(--vw-large))*60);

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*40);
            }

            span {
                font-size: calc((100vw / var(--vw-large))*16);
                line-height: 218.75%;
                letter-spacing: calc((100vw / var(--vw-large))*6);
                margin-bottom: calc((100vw / var(--vw-large))*6);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*16);
                    letter-spacing: calc((100vw / var(--vw-small))*6);
                }
            }

            h2 {
                font-size: calc((100vw / var(--vw-large))*40);
                font-style: italic;
                line-height: 140%;
                /* 56px */
                letter-spacing: calc((100vw / var(--vw-large))*0.99);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*32);
                    letter-spacing: calc((100vw / var(--vw-small))*0.99);
                }
            }
        }

        ul {

            li {
                justify-content: flex-start;
                align-items: stretch;

                .title {
                    display: flex;
                    width: calc((100vw / var(--vw-large))*155);
                    padding-left: calc((100vw / var(--vw-large))*30);
                    align-items: center;
                    background-color: #F5F4F0;
                    font-size: calc((100vw / var(--vw-large))*17);
                    font-weight: 400;
                    line-height: 164.706%;
                    border-bottom: calc((100vw / var(--vw-large))*2) solid #fff;

                    @media screen and (max-width: 768px) {
                        width: calc((100vw / var(--vw-small))*100);
                        padding-left: 0;
                        justify-content: center;
                        font-size: calc((100vw / var(--vw-small))*17);
                    }
                }

                .content {
                    text-align: left;
                    padding: calc((100vw / var(--vw-large))*14) 0 calc((100vw / var(--vw-large))*14) calc((100vw / var(--vw-large))*30);
                    display: flex;
                    align-items: center;

                    @media screen and (max-width: 768px) {
                        padding: calc((100vw / var(--vw-small))*14) 0 calc((100vw / var(--vw-small))*14) calc((100vw / var(--vw-small))*20);
                        font-size: calc((100vw / var(--vw-small))*14);
                        line-height: 181.643%;
                        letter-spacing: calc((100vw / var(--vw-small))*0.68);
                        width: calc((100vw / var(--vw-small))*220);
                    }
                }
            }

        }
    }
}