/* about.css */

/* ========================================
   aboutセクション
======================================== */
.p-about {
    padding-left: 48px;
}

/* ========================================
   PC：2カラムグリッド（4行）
   Row1: catchcopy JP | EN
   Row2: body JP | EN
   Row3: separator（両列スパン）
   Row4: chef JP | EN
======================================== */
@media screen and (min-width: 769px) {
    .p-about {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }

    /* セパレーターを両列スパンでRow3に配置 */
    .p-about__separator {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    /* PC時はbodyのmargin-bottomを0に（separatorが間隔を担う） */
    .p-about__body {
        margin-bottom: 0;
    }

    /* PC時はchefのmargin-topを0に（separatorのmarginが間隔を担う） */
    .p-about__chef {
        margin-top: 0;
    }
}

/* ========================================
   キャッチコピー
======================================== */
.p-about__catchcopy {
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.5;
    margin-bottom: 40px;
}

.p-about__catchcopy--en {
    font-family: var(--font-en);
}

/* ========================================
   本文
======================================== */
.p-about__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}

.p-about__body p {
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.5;
}

.p-about__body--en p {
    font-family: var(--font-en);
    font-size: 14px;
    line-height: 1.5;
}

/* ========================================
   シェフ情報
======================================== */
.p-about__chef {
    margin-top: 48px;
}

.p-about__chef-label {
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255);
    margin-bottom: 8px;
}

.p-about__chef-label--en {
    font-family: var(--font-en);
    font-size: 14px;
}

.p-about__chef-name {
    font-family: var(--font-jp);
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.4;
    display: inline-block;
}

.p-about__chef-name--en {
    font-family: var(--font-en);
    font-size: 18px;
}

.p-about__chef-bio {
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.5;
    margin-top: 20px;
}

.p-about__chef-bio--en {
    font-family: var(--font-en);
    font-size: 14px;
}

/* ========================================
   セパレーター
======================================== */
.p-about__separator {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255);
    margin: 80px 0;
}

/* ========================================
   レスポンシブ（768px以下）
   SP：flex + order で JP→EN の順に表示
======================================== */
@media screen and (max-width: 768px) {

    .p-about {
        display: flex;
        flex-direction: column;
        padding-left: 0;
    }

    /* SP表示順：JP catchcopy → JP body → JP chef → separator → EN catchcopy → EN body → EN chef */
    .p-about__catchcopy:not(.p-about__catchcopy--en) { order: 1; }
    .p-about__body:not(.p-about__body--en)           { order: 2; }
    .p-about__chef:not(.p-about__chef--en)           { order: 3; }
    .p-about__separator                              { order: 4; }
    .p-about__catchcopy--en                          { order: 5; }
    .p-about__body--en                               { order: 6; }
    .p-about__chef--en                               { order: 7; }

    .p-about__catchcopy {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .p-about__body {
        gap: 20px;
        margin-bottom: 48px;
    }

    .p-about__body p {
        font-size: 16px;
    }

    .p-about__body--en p {
        font-size: 16px;
    }

    .p-about__chef {
        margin-top: 40px;
    }

    .p-about__chef-label {
        font-size: 14px;
    }

    .p-about__chef-name {
        font-size: 20px;
    }

    .p-about__chef-name--en {
        font-size: 20px;
    }

    .p-about__chef-bio {
        font-size: 16px;
    }

    .p-about__chef-bio--en {
        font-size: 16px;
    }

    .p-about__separator {
        max-width: 100%;
        margin: 80px 0;
    }
}