/* ==================================================
   ABOUT PAGE
================================================== */

.about-page {
    background-color: var(--color-white);
}


/* ==================================================
   About Hero
================================================== */

.about-hero {
    background-color: #f7f9fb;
}


.about-hero__inner {
    display: grid;
    grid-template-columns:
        minmax(560px, 0.95fr)
        minmax(0, 1.05fr);

    max-width: 1440px;
    margin-inline: auto
}


/* ==================================================
   左：テキスト
================================================== */

.about-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 72px 56px;

    background-color: #f7f9fb;
}


.about-hero__label {
    margin: 0 0 24px;

    color: var(--color-main);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
}


.about-hero__title {
    margin: 0 0 32px;

    color: var(--color-main-dark);

    font-size: clamp(40px, 3.2vw, 54px);

    line-height: 1.4;
    letter-spacing: 0.03em;
}


.about-hero__lead {
    margin: 0 0 18px;

    color: var(--color-main-dark);

    font-size: 17px;
    line-height: 1,9;
}


.about-hero__text {
    margin: 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.9;
}


/* ==================================================
   右：画像
================================================== */

.about-hero__image {
    overflow: hidden;
    min-width: 0;
}


.about-hero__image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 560px;

    object-fit: cover;
    object-position: center;

}

/* ==================================================
   About共通セクション
================================================== */

.about-section {
    padding: 100px 40px;
}


.about-section--soft {
    background-color: var(--color-background);
}


.about-section__inner {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}


/* 共通見出し */

.about-heading {
    margin-bottom: 52px;
}


.about-heading__sub {
    margin: 0 0 6px;
    color: var(--color-main);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
}


.about-heading__title {
    margin: 0;
    color: var(--color-main-dark);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.4;
}


/* ==================================================
   Mission
================================================== */

.about-mission {
    display: grid;
    gap: 42px;
}


.about-mission__intro {
    max-width: 820px;
}


.about-mission__lead {
    margin: 0 0 18px;

    color: var(--color-main-dark);

    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.7;
}


.about-mission__text {
    margin: 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 2;
}


/* Business Life / Personal Life */

.about-life {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 30px;
    
    width:100%;
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}


.about-life__card {
    display: flex;
    flex-direction: column;
    
    height:auto;
    min-height:0;
 
    padding: 38px 42px;

    border:
        1px solid var(--color-border);

    border-radius: 18px;

    background-color:
        var(--color-white);

    box-shadow:
        var(--shadow-card);
}


.about-life__label {
    margin: 0 0 14px;

    color: var(--color-main);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
}


.about-life__title {
    margin: 0 0 20px;

    color: var(--color-main-dark);

    font-size: 28px;
}


.about-life__text {
    flex-grow: 1;

    margin: 0 0 26px;

    color: var(--color-subtext);

    line-height: 1.9;
    font-size:16px;
}


.about-life__solution {
    margin-top:auto;

    padding-top: 18px;

    border-top:
        1px solid var(--color-border);

    color: var(--color-main);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.about-life-concept {
    text-align: center;
    margin-bottom:30px;
}


.about-life-concept__label {
    margin: 0 0 6px;

    color: var(--color-main);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
}


.about-life-concept__title {
    margin: 0;

    color: var(--color-main-dark);

    font-size: clamp(38px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: 0.08em;
}


.about-life-concept__text {
    margin: 10px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
}

/* Missionの締め */

.about-mission__message {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;

    padding: 46px 48px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--color-main-dark),
            var(--color-main)
        );

    color: var(--color-white);
}


.about-mission__brand {
    margin: 0 0 12px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
}


.about-mission__catch {
    margin: 0 0 20px;

    font-size:
        clamp(26px, 4vw, 40px);

    font-weight: 700;
    line-height: 1.5;
}


.about-mission__closing {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.82);

    line-height: 1.9;
}


/* ==================================================
   Vision
================================================== */

.about-vision {
    max-width: 820px;
}


.about-vision__lead {
    margin: 0 0 22px;

    color: var(--color-main-dark);

    font-size:
        clamp(22px, 3vw, 30px);

    font-weight: 700;
}


.about-vision__text {
    margin: 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 2;
}


/* ==================================================
   Values
================================================== */

.about-values {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}


.about-value-card {
    padding: 36px 30px;

    border-radius: 16px;

    background-color:
        var(--color-white);

    box-shadow:
        var(--shadow-card);
}


.about-value-card__number {
    margin: 0 0 10px;

    color: var(--color-main);

    font-size: 34px;
    font-weight: 700;
}


.about-value-card__label {
    margin: 0 0 18px;

    color: var(--color-main);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
}


.about-value-card__title {
    margin: 0 0 14px;

    color: var(--color-main-dark);

    font-size: 23px;
}


.about-value-card__text {
    margin: 0;

    color: var(--color-subtext);

    line-height: 1.9;
}

/* ==================================================
   OUR STRENGTH
================================================== */

.about-strength {
    background-color: var(--color-white);
}


/* 3つの強み */

.about-strength__list {
    display: grid;
    gap: 0;

    margin-top: 52px;

    border-top: 1px solid var(--color-border);
}


.about-strength__item {
    display: grid;

    grid-template-columns:
        100px
        180px
        minmax(0, 1fr);

    align-items: start;
    gap: 32px;

    padding: 38px 0;

    border-bottom: 1px solid var(--color-border);
}


/* 01 / 02 / 03 */

.about-strength__number {
    margin: 0;

    color: var(--color-main);

    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}


/* UNDERSTANDなど */

.about-strength__label {
    margin: 4px 0 0;

    color: var(--color-main);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
}


/* 右側 */

.about-strength__title {
    margin: 0 0 12px;

    color: var(--color-main-dark);

    font-size: 24px;
}


.about-strength__text {
    margin: 0;

    max-width: 650px;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.9;
}

/* ==================================================
   MESSAGE
================================================== */

.about-message {
    display: grid;

    /* 左画像を狭く、右テキストを広く */
    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    align-items: center;
    gap: 64px;
}


/* ==================================================
   MESSAGE IMAGE
================================================== */

.about-message__image {
    overflow: hidden;

    width: 100%;
    max-width: 400px;

    border-radius: 16px;
}


.about-message__image img {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;
    object-position: center;
}


/* ==================================================
   MESSAGE CONTENT
================================================== */

.about-message__content {
    min-width: 0;
}


/* Lead */

.about-message__lead {
    margin: 0 0 28px;

    color: var(--color-main-dark);

    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 700;
    line-height: 1.5;

    /* PCでは1行 */
    white-space: nowrap;
}


/* 本文 */

.about-message__text {
    margin: 0 0 22px;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 2;
}


.about-message__text:last-of-type {
    margin-bottom: 32px;
}


/* 代表者名 */

.about-message__name {
    margin: 0;

    color: var(--color-main-dark);

    font-size: 14px;
    line-height: 1.8;
}


.about-message__name strong {
    font-size: 16px;
}


/* ==================================================
   COMPANY
================================================== */

.company-profile {
    max-width: 900px;
    margin: 0;
}


.company-profile__row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);

    padding: 24px 0;

    border-bottom: 1px solid var(--color-border);
}


.company-profile__row:first-child {
    border-top: 1px solid var(--color-border);
}


.company-profile__row dt {
    color: var(--color-main-dark);

    font-weight: 700;
}


.company-profile__row dd {
    margin: 0;

    color: var(--color-subtext);

    line-height: 1.9;
}

/* ==================================================
   小さいPC / タブレット
================================================== */

@media (max-width: 1200px) {

    .about-hero__inner {
        grid-template-columns:
            minmax(420px, 1fr)
            minmax(0, 1fr);
    }


    .about-hero__content {
        padding: 60px 40px;
    }


    .about-hero__title {
        font-size: clamp(36px, 4vw, 46px);
    }


    .about-hero__image img {
        min-height: 520px;
    }

}
/* ==================================================
   Tablet
================================================== */
@media (max-width: 900px) {

    .about-hero__inner {
        grid-template-columns:1fr;
    }


    .about-hero__content {
        padding: 54px 40px 44px;
    }


    .about-hero__title {
        font-size: clamp(34px, 4.5vw, 46px);
    }


    .about-hero__image {
        min-height: 420px;
    }

    .about-hero__image img {
        min-height: 0;
        height: 100%;
    }

    .about-values,
    .about-strengths {
        gap: 20px;
    }


    .about-message {
        gap: 36px;
    }

    .about-life {
        gap: 22px;
    }


    .about-values {
        gap: 20px;
    }
}
/* ==================================================
   MESSAGE / TABLET
================================================== */

@media (max-width: 1000px) {

    .about-message {
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr);

        gap: 40px;
    }


    .about-message__image img {
        height: 460px;
    }


    .about-message__lead {
        font-size: 28px;

        /* 必要なら折り返しを許可 */
        white-space: normal;
    }

}

/* ==================================================
   Smartphone
================================================== */

@media (max-width: 700px) {

    .about-hero {
        padding: 48px 20px 64px;
    }

    .about-hero__title {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.45;
        letter-spacing: 0.02em;
    }

    .about-hero__image {
        height: 280px;
        border-radius: 14px;
    }
    

    .about-section {
        padding: 70px 20px;
    }


    .about-heading {
        margin-bottom: 36px;
    }


    .about-values,
    .about-strengths {
        grid-template-columns: 1fr;
    }

/* ==================================================
   MESSAGE / SMARTPHONE
================================================== */

    .about-message {
        grid-template-columns: 1fr;
        gap: 32px;
    }


    .about-message__image {
        max-width: none;
    }


    .about-message__image img {
        width: 100%;
        height: 380px;
    }


    .about-message__lead {
        font-size: 27px;
        line-height: 1.6;
        letter-spacing: 0.02em;
        white-space: normal;
    }


    .about-message__text {
        font-size: 15px;
        line-height: 1.9;
    }

    .company-profile__row {
        grid-template-columns: 1fr;
    }


    .company-profile__row dt {
        padding-bottom: 6px;
    }


    .company-profile__row dd {
        padding-top: 0;
    }

    .about-mission {
        gap: 40px;
    }

    .about-mission__lead {
        font-size: 20px;
        line-height:1.8;
    }

    .about-life {
        grid-template-columns: 1fr;
    }


    .about-life__card {
        padding: 32px 26px;
    }


    .about-mission__message {
        padding: 34px 26px;
    }

    .about-heading__title {
        font-size: 26px;
        line-height: 1.5;
    }


    .about-values {
        grid-template-columns: 1fr;
    }

    .about-hero__inner {
        display: flex;
        flex-direction: column;
        gap: 36px;
        min-height: auto;
    }


    .about-hero__content {
        padding: 48px 24px 48px;
    }


    .about-hero__label {
        margin-bottom: 20px;

        font-size: 12px;
    }


    .about-hero__title {
        margin-bottom: 28px;

        font-size: 32px;
        line-height: 1.4;
    }


    .about-hero__lead {
        font-size: 15px;
        line-height: 1.9;
    }


    .about-hero__text {
        font-size: 15px;
        line-height: 1.9;
    }


    .about-hero__image {
        height: 300px;
    }


    .about-hero__image img {
        object-position: center;
    }


    .about-strength__item {
        grid-template-columns: 1fr;
        gap: 10px;

        padding: 30px 0;
    }


    .about-strength__number {
        font-size: 32px;
    }


    .about-strength__label {
        margin: 0;
    }


    .about-strength__title {
        margin-top: 8px;
        font-size: 22px;
    }

    .about-strength__text {
        font-size: 15px;
        line-height: 1.8;
    }
/* ==================================================
   CPMPANY / SMARTPHONE
================================================== */

    .company-profile__row {
        grid-template-columns: 1fr;
        gap: 8px;

        padding: 20px 0;
    }

}