@charset "UTF-8";

#about {
    .block1 {
        padding-top: 16rem;
        padding-bottom: 15rem;
        @media screen and (max-width: 767px) {
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        & p {
            margin-bottom: 8rem;
            font-family: var(--noto);
            font-style: normal;
            font-weight: 400;
            font-size: 1.8rem;
            line-height: 180%;
            letter-spacing: 0.1em;
            color: #000000;
            @media screen and (max-width: 767px) {
                font-size: 1.4rem;
                line-height: 160%;
            }
            .bold {
                font-family: var(--noto);
                font-style: normal;
                font-weight: 600;
                font-size: 2.4rem;
                line-height: 2.2;
                letter-spacing: 0.1em;
                color: #000000;
                @media screen and (max-width: 767px) {
                    font-size: 1.55rem;
                    line-height: 1.6;
                }
            }
        }
        .value-table {
            width: 100%;
            border-top: #cccccc solid 0.1rem;
            & tr {
                border-bottom: #cccccc solid 0.1rem;
            }
            th,
            td {
                padding: 2.4rem 0;
                box-sizing: border-box;
                @media screen and (max-width: 767px) {
                    display: block;
                }
            }
            & th {
                font-family: var(--noto);
                font-style: normal;
                font-weight: 600;
                font-size: 2.4rem;
                line-height: 3.5rem;
                letter-spacing: 0.1em;
                color: #000000;
                text-align: left;
                width: 34.4rem;
                @media screen and (max-width: 767px) {
                    font-size: 1.6rem;
                    width: 100%;
                    padding: 1.4rem 0 1rem;
                }
            }
            & td {
                font-family: var(--noto);
                font-style: normal;
                font-weight: 400;
                font-size: 1.8rem;
                line-height: 3.5rem;
                display: flex;
                align-items: center;
                letter-spacing: 0.1em;
                color: #000000;
                width: calc(100%);
                @media screen and (max-width: 767px) {
                    font-size: 1.4rem;
                    width: 100%;
                    padding: 0 0 1.4rem;
                }
            }
        }
    }
    .block2 {
        padding-bottom: 22rem;
        @media screen and (max-width: 767px) {
            padding-bottom: 6rem;
        }
        .company-table {
            width: 120rem;
            margin: 0 auto;
            @media screen and (max-width: 767px) {
                width: 100%;
            }
            & tr {
                background-color: #f7f9fc;
                border-bottom: #fff 1.2rem solid;
                @media screen and (max-width: 767px) {
                    border-bottom: #fff 0.8rem solid;
                }
                width: 100%;
                & th,
                & td {
                    padding-top: 2rem;
                    padding-bottom: 2rem;
                }
                & th {
                    padding-left: 2.5rem;
                    box-sizing: border-box;
                    font-family: var(--noto);
                    font-style: normal;
                    font-weight: 500;
                    font-size: 2rem;
                    line-height: 1;
                    letter-spacing: 0.1em;
                    text-align: left;
                    color: #00518b;
                    width: 22.6rem;
                    @media screen and (max-width: 767px) {
                        font-size: 1.6rem;
                        padding: 1.4rem 2rem 1rem 2rem;
                        width: 100%;
                        display: block;
                    }
                }
                & td {
                    font-family: var(--noto);
                    font-style: normal;
                    font-weight: 400;
                    font-size: 1.8rem;
                    line-height: 180%;
                    letter-spacing: 0.1em;
                    color: #000000;
                    width: calc(100% - 22.6rem);
                    @media screen and (max-width: 767px) {
                        width: 100%;
                        display: block;
                        font-size: 1.4rem;
                        line-height: 150%;
                        padding: 0 2rem 1.4rem 2rem;
                    }
                    .column-flex {
                        display: flex;
                        gap: 1rem;
                        @media screen and (max-width: 767px) {
                            flex-direction: column;
                        }
                        & ul {
                            width: 45rem;
                            @media screen and (max-width: 767px) {
                                width: 100%;
                                padding-left: 2rem;
                                box-sizing: border-box;
                            }
                            & li {
                                list-style: disc;
                                font-family: var(--noto);
                                font-style: normal;
                                font-weight: 400;
                                font-size: 1.8rem;
                                line-height: 180%;
                                letter-spacing: 0.1em;
                                color: #000000;
                                @media screen and (max-width: 767px) {
                                    font-size: 1.4rem;
                                    line-height: 150%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}