.sub-title {
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
}

.representative-section {
    width: 90%;
    max-width: 1300px;

    margin: 90px auto 0;
    padding: 35px 45px 45px;

    box-sizing: border-box;

    box-shadow: 15px 15px 20px rgb(138, 135, 135);

    text-align: center;
}


/* 代表メッセージの見出し */

.about-section-title {
    width: fit-content;

    margin: 0 auto 45px;
    padding: 0 35px 8px;

    border-bottom: 1px solid #777777;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(27px, 2.7vw, 38px);
    font-weight: 400;

    text-align: center;
}


/* 代表メッセージ本文 */

.representative-message {
    width: 95%;

    margin: 0 auto;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.7;

    text-align: center;
}



/* ========================================
   Gutlinkが大切にしてること
======================================== */

.values-section {
    width: 92%;
    max-width: 1350px;

    margin: 90px auto 0;
    padding: 60px 35px 75px;

    box-sizing: border-box;

    background-color: #EAF7F8;

    border: 10px solid #ffffff;
    border-radius: 25px;

    box-shadow: 15px 15px 20px rgb(138, 135, 135);
}


/* スクショでは下線なしなので
   この見出しだけborderを消す */

.values-title {
    margin-bottom: 70px;

    padding-bottom: 0;

    border-bottom: none;

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


/* Mission / Vision / Value 3枚 */

.values-list {
    display: grid;

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

    gap: 45px;

    width: 96%;

    margin: 0 auto;
}


/* トランプ型カード */

.value-card {
    position: relative;

    min-height: 520px;

    padding: 55px 30px 45px;

    box-sizing: border-box;

    background-color: #ffffff;

    border: 8px solid #ffffff;
    border-radius: 22px;

    box-shadow: 12px 12px 18px rgb(138, 135, 135);

    text-align: center;
}


/* ♣ ♦ ♠ */

.value-mark {
    position: absolute;

    font-size: clamp(28px, 2.5vw, 38px);

    line-height: 1;
}


.top-mark {
    top: 15px;
    left: 15px;
}


.bottom-mark {
    right: 15px;
    bottom: 15px;
}


/* Mission / Vision / Value */

.value-title {
    margin: 0 0 60px;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(31px, 3vw, 43px);
    font-weight: 400;
}


/* 各カードの中央文章 */

.value-main-text {
    margin: 0 auto;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.7;

    text-align: center;
}


/* Missionだけ下に箇条書き */

.mission-list {
    width: fit-content;

    margin: 45px auto 0;
    padding-left: 20px;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 2;

    text-align: left;
}



/* ========================================
   Gutlink Members
======================================== */

.members-section {
    width: 92%;
    max-width: 1350px;

    margin: 45px auto 80px;
    padding: 60px 55px 55px;

    box-sizing: border-box;

    background-color: #EAF7F8;

    border: 10px solid #ffffff;
    border-radius: 25px;

    box-shadow: 15px 15px 20px rgb(138, 135, 135);
}


/* Gutlink Members */

.members-title {
    margin-bottom: 30px;

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


/* Members導入文 */

.members-intro {
    margin: 0 auto 55px;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(18px, 1.7vw, 24px);
    line-height: 1.8;

    text-align: center;
}


/* 2枚 × 2段 */

.members-list {
    display: grid;

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

    column-gap: 65px;
    row-gap: 55px;

    width: 82%;

    margin: 0 auto;
}


/* Membersカード */

.member-card {
    min-height: 245px;

    padding: 35px 30px;

    box-sizing: border-box;

    background-color: #ffffff;

    border: 8px solid #ffffff;
    border-radius: 20px;

    box-shadow: 12px 12px 18px rgb(138, 135, 135);

    text-align: center;
}


/* 未経験者多数など */

.member-card-title {
    margin: 0 0 30px;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 400;

    text-align: center;
}


/* Membersカード本文 */

.member-card-text {
    margin: 0;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.7;

    text-align: center;
}



/* ========================================
   Gutlinkについてもっと知る
======================================== */

.blog-area {
    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 50px;

    width: 90%;

    margin: 80px auto 0;
    padding: 25px 35px;

    box-sizing: border-box;

    background-color: #ffffff;

    border: 8px solid #ffffff;
    border-radius: 20px;

    box-shadow: 12px 12px 18px rgb(138, 135, 135);
}


/* 左側 */

.blog-message {
    text-align: center;
}


/* Gutlinkについてもっと知る */

.blog-title {
    width: fit-content;

    margin: 0 auto 25px;
    padding: 0 15px 8px;

    border-bottom: 1px solid #777777;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(23px, 2.2vw, 31px);
    font-weight: 400;
}


/* ブログ説明 */

.blog-text {
    margin: 0;

    font-family: "Kaisei Decol", serif;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.7;

    text-align: center;
}


/* ブログを見る */

.blog-button {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 25px;

    min-width: 210px;

    padding: 15px 25px;

    box-sizing: border-box;

    background-color: #EAF7F8;

    border: 5px solid #ffffff;
    border-radius: 15px;

    box-shadow: 5px 5px 10px rgba(100, 100, 100, 0.25);

    font-family: "Kaisei Decol", serif;
    font-size: clamp(18px, 1.6vw, 22px);

    color: #333333;
    text-decoration: none;

    cursor: pointer;

    transition: 0.2s;
}


.blog-button:hover {
    transform: translateY(-3px);

    box-shadow: 7px 7px 14px rgba(100, 100, 100, 0.3);
}


.blog-arrow {
    font-size: 22px;
}

/*タブレット端末用*/
@media(max-width:1024px){

        .representative-section {
        width: 92%;

        margin-top: 80px;
        padding: 35px 30px 40px;
    }

    .representative-message {
        width: 96%;

        font-size: clamp(16px, 1.8vw, 20px);
    }


    /* Gutlinkが大切にしてること */
    .values-section {
        width: 92%;

        margin-top: 80px;
        padding: 50px 30px 65px;
    }

    .values-title {
        margin-bottom: 55px;
    }


    /* PC：3枚横並び
       タブレット：上2枚＋下1枚中央 */
    .values-list {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px;

        width: 94%;
    }

    .value-card {
        min-height: 480px;

        padding: 50px 25px 40px;
    }

    .value-policy-card {
        grid-column: 1 / 3;

        width: calc(50% - 17.5px);

        justify-self: center;
    }

    .value-title {
        margin-bottom: 45px;

        font-size: clamp(28px, 3.5vw, 38px);
    }

    .value-main-text {
        font-size: clamp(16px, 1.8vw, 20px);
    }


    /* Gutlink Members */
    .members-section {
        width: 92%;

        padding: 50px 35px;
    }

    .members-list {
        width: 92%;

        column-gap: 35px;
        row-gap: 40px;
    }

    .member-card {
        min-height: 230px;

        padding: 30px 25px;
    }

    .member-card-title {
        font-size: clamp(22px, 2.5vw, 29px);
    }


    /* ブログ */
    .blog-area {
        width: 94%;

        gap: 30px;

        padding: 25px 30px;
    }

    .blog-button {
        min-width: 190px;
    }
}

/*スマホ端末用*/
@media (max-width: 768px) {

    /* =========================
       代表メッセージ
    ========================= */
    .representative-section {
        width: 92%;

        margin-top: 60px;
        padding: 30px 18px 35px;

        border-width: 5px;
        border-radius: 20px;

        box-shadow: 8px 8px 14px rgb(138, 135, 135);
    }

    .about-section-title {
        max-width: 100%;

        margin-bottom: 30px;
        padding: 0 10px 7px;

        box-sizing: border-box;

        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.5;
    }

    .representative-message {
        width: 100%;

        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.8;
    }


    /* =========================
       Gutlinkが大切にしてること
    ========================= */
    .values-section {
        width: 92%;

        margin-top: 60px;
        padding: 35px 18px 45px;

        border-width: 5px;
        border-radius: 20px;

        box-shadow: 8px 8px 14px rgb(138, 135, 135);
    }

    .values-title {
        max-width: 100%;

        margin-bottom: 40px;
        padding: 0;

        font-size: clamp(21px, 5.8vw, 27px);
        line-height: 1.5;
    }

    .values-list {
        grid-template-columns: 1fr;

        width: 100%;

        gap: 30px;
    }

    .value-card {
        width: 100%;
        min-height: 0;

        padding: 45px 22px 40px;

        border-width: 5px;
        border-radius: 18px;

        box-shadow: 8px 8px 14px rgb(138, 135, 135);
    }

    .value-policy-card {
        grid-column: auto;

        width: 100%;
    }

    .value-title {
        margin-bottom: 35px;

        font-size: clamp(27px, 7vw, 34px);
    }

    .value-main-text {
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.8;
    }

    .mission-list {
        margin-top: 30px;

        font-size: clamp(14px, 3.8vw, 17px);
        line-height: 1.9;
    }

    .value-mark {
        font-size: 27px;
    }


    /* =========================
       Gutlink Members
    ========================= */
    .members-section {
        width: 92%;

        margin-top: 45px;
        margin-bottom: 60px;

        padding: 35px 18px 40px;

        border-width: 5px;
        border-radius: 20px;

        box-shadow: 8px 8px 14px rgb(138, 135, 135);
    }

    .members-title {
        margin-bottom: 25px;

        font-size: clamp(24px, 7vw, 30px);
    }

    .members-intro {
        margin-bottom: 35px;

        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.8;
    }

    .members-list {
        grid-template-columns: 1fr;

        width: 100%;

        row-gap: 25px;
    }

    .member-card {
        min-height: 0;

        padding: 28px 20px;

        border-width: 5px;
        border-radius: 18px;

        box-shadow: 8px 8px 14px rgb(138, 135, 135);
    }

    .member-card-title {
        margin-bottom: 20px;

        font-size: clamp(21px, 5.5vw, 26px);
    }

    .member-card-text {
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.8;
    }


    /* =========================
       ブログ
    ========================= */
    .blog-area {
        grid-template-columns: 1fr;

        width: 100%;

        gap: 25px;

        margin-top: 50px;
        padding: 25px 18px;

        border-width: 5px;
        border-radius: 18px;

        box-shadow: 8px 8px 14px rgb(138, 135, 135);
    }

    .blog-title {
        max-width: 100%;

        margin-bottom: 20px;
        padding: 0 5px 7px;

        box-sizing: border-box;

        font-size: clamp(20px, 5.5vw, 25px);
        line-height: 1.5;
    }

    .blog-text {
        font-size: clamp(14px, 4vw, 17px);
        line-height: 1.8;
    }

    .blog-button {
        width: 80%;
        min-width: 0;

        margin: 0 auto;

        padding: 13px 20px;

        font-size: clamp(17px, 4.5vw, 20px);
    }
}