/* 企業理念 */
.company-values {
    max-width: 84rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 200px;
    position: relative;
}

.philosophy__description {
    padding: var(--space-xl);
    font-size: var(--font-size-medium);
    color: var(--color-text);
    font-family: "Noto Serif JP", serif;
    font-weight: 200;
    width: 100%;


}

.philosophy-container {
    padding-top: var(--space-xxl);
    margin-left: auto;
    margin-right: auto;
    max-width: 84rem;
    padding-bottom: 8rem;
    text-align: center;
}

.highlight {
    font-family: "Noto Serif JP", serif;
    font-size: var(--font-size-xl);
    font-weight: bold;
    /* 太字にする */

    /* 目立つ色に変更 */
}

.philosophy-content {
    padding-top: var(--space-xxl);
    margin-left: auto;
    margin-right: auto;
    font-size: var(--font-size-medium);
    color: var(--color-text);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
}


.company-philosophy {
    padding: var(--space-xl);
    /* 例：上下に大きな余白を追加 */
    background-color: #f5f5f5;
    /* 例：背景色を変更 */
    overflow: hidden;
}




.company-philosophy__title {
    font-size: var(--font-size-xxl);
    color: var(--color-primary);
    font-family: "Noto Serif JP", serif;
    text-align: center;
    margin-bottom: var(--space-xl);

    /* 例：見出しの下に余白を追加 */
}

.company-philosophy__cards {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列表示 */
    gap: var(--space-xl);
    /* 例：カード間の余白を調整 */
    width: 100%;
    height: auto;

}

.company-philosophy__card {
    display: grid;
    grid-template-rows: repeat(2, minmax(1fr, 3fr));
    width: 100%;
    height: 450px;

    border: 1px solid #000000;

    background-color: #efcdff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    position: relative;
    /* X軸方向に傾斜 */
}

.company-philosophy__card-title {
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-weight: 200;
    color: var(--color-primary);

    width: 100%;


}

.company-philosophy__card-text {
    font-family: "Noto Serif JP", serif;
    font-weight: 200;
    font-size: var(--font-size-medium);
    color: var(--color-text);
    line-height: 1.6;

    margin: 0 auto;
    z-index: 1;
    padding: 40px 0 0 0;
    writing-mode: vertical-rl;
    height: 300px;

}

.company-philosophy__underline {
    margin: 0 auto;
    width: 80%;
    height: 1px;
    background-color: #505050;
}

/* 768px以下の場合のヘッダーのスタイル */
@media (max-width: 768px) {
    .philosophy-content{
        padding-top: var(--space-xxl);
            margin-left: auto;
            margin-right: auto;
            font-size: var(--font-size-medium);
            color: var(--color-text);
            display: flex;
            flex-direction: column;
            gap: 0;
    }
    .philosophy-container{
        padding-bottom: 50px;
    }
    .philosophy__description{
        order: 2;
        font-size: 20px;
    }
    .company-philosophy__cards{
        margin: 0 auto;
        width: 400px;
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    .company-philosophy__card{
        width: 100px;
    }
    .company-philosophy__card-title{
        font-size: 32px;
        font-weight: 500;
    }
    .company-philosophy__card-text{
        font-size: 20px;
    }
}