@import url("../tokens.css");

.company-philosophy-page {


    .philosophy-header {
        border-bottom: unset;
        padding-bottom: 8px;
        margin-bottom: 20px;
        padding-left: 1px;
        position: absolute;
        background: unset;
        backdrop-filter: unset;
    }

    .philosophy-header__title {
        color: var(--c-primary);
        font-size: 40px;
        font-weight: bold;
        margin: 0;
        text-align: left;
    }

    .philosophy-content {
        padding: 0 10rem;
        padding-bottom: 2rem;
    }

    .philosophy-content__message {
        margin-bottom: 120px;
        margin-top: 60px;
        width: 100%;
        text-align: left;
        font-weight: bold;
        font-size: 18px;
    }

    .philosophy-title {
        border-left: 10px solid var(--c-primary);
        padding-left: 15px;
        margin-bottom: 90px;
        width: 100%;
        text-align: left;
    }

    .philosophy-title__main {
        color: var(--c-primary);
        font-size: 30px;
        margin: 0 0 5px 0;
        font-weight: bold;
        line-height: 1.4;
        letter-spacing: 0.1em;
    }

    .philosophy-title__sub {
        color: var(--c-primary);
        font-size: 15px;
        margin: 0;
        letter-spacing: 0.1em;
    }

    .philosophy-group {
        margin-bottom: 70px;
    }

    .philosophy-group__title {
        color: var(--c-primary);
        font-size: 25px;
        text-align: center;
        margin-bottom: 20px;
        font-weight: normal;
        letter-spacing: 0.1em;
    }

    .philosophy-group__block {
        display: flex;
        gap: 30px;
        .block {
            flex: 1;
            border: 2px solid var(--c-muted);
            border-radius: 8px;
            padding: 30px 20px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .block p {
            margin: 0;
            font-weight: bold;
            line-height: 1.6;
            font-size: 18px;
        }
    }

    .philosophy-group__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background-color: transparent;
        .grid {
            border-right: 2px solid var(--c-muted);
            border-bottom: 2px solid var(--c-muted);
            padding: 40px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            /* 表の上3マスの上線を消す */
            &:nth-child(3n) {
                border-right: none;
            }
            /* 表の下3マスの下線を消す */
            &:nth-child(n + 4) {
                border-bottom: none;
            }
        }
        .grid p {
            line-height: 1.7;
            text-align: center;
            font-weight: bold;
            margin: 0;
            font-size: 18px;
        }
    }

    /* SP
    ================================================*/
    @media screen and (max-width: 767px) {

        .philosophy-container {
            padding: 20px 15px;
        }

        .philosophy-header {
            padding-bottom: 45px;
        }
        .philosophy-header__title {
            font-size: 30px;
        }

        .philosophy-title {
            margin-bottom: 60px;
        }

        .philosophy-title__main {
            font-size: 25px;
        }

        .philosophy-content {
            padding: 0;
            padding-bottom: 0;
        }

        .philosophy-content__message {
            margin-bottom: 60px;
            margin-top: 20px;
        }

        .philosophy-group {
            margin-bottom: 30px;
        }

        .philosophy-group__block {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .block {
                border: 1px solid var(--c-muted);
                width: 90%;
            }
            .block p {
                font-size: 18px;
            }
        }

        .philosophy-group__grid {
            grid-template-columns: 1fr;
            margin: 0 20px;
            width: calc(100% - 40px);
            border-right: 1px solid var(--c-muted);
            border-left: 1px solid var(--c-muted);
            .grid {
                margin: 0 auto;
                width: 100%;
                padding: 30px 20px;
                border-bottom: 1px solid var(--c-muted);
                border-right: none;
                &:nth-child(3n) {
                    border-right: none;
                }
                &:nth-child(n + 4) {
                    border-bottom: 1px solid var(--c-muted);
                }
                &:last-child {
                    border-bottom: none;
                }
            }
            .grid p {
                font-size: 18px;
            }
        }
    }
}