@charset "utf-8";

:root{
    --company-text: #333;
    --company-border: #DAE0E0;
    --company-bg-soft: #F7F7F7;

    /* PICKYの既存変数があるならそれを優先してOK */
    --company-accent: var(--picky-orange, #F76944);
    --company-accent-soft: var(--picky-orange-light, #F49A81);
}

/* ===============================================
 *
 * メディアクエリ PCワイド (1440px ~ )
 *
 * ============================================ */

/* ===============================================
 * Hero Section
 * ============================================ */

.company-profile {
    padding: 38px 0 ;
    background: var(--bg-color);
}

.company-profile__container {
    margin: 0 auto;
    padding: 20px;
    max-width: 1440px;
    width: 100%;
}

.company-sectionHeading {
    margin-top: 20px;
}

.company-sectionHeading__title {
    margin: 0;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 4.6rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.06em;
}

.company-profile__tableWrapper {
    margin-top: 80px;
    background: var(--bg-color);
    border: 1px solid var(--company-border);
    border-radius: 16px;
    overflow: hidden;
}

.company-profile__table {
    width: 100%;
    border-collapse: collapse;
}

.company-profile__table th,
.company-profile__table td {
    padding: 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--company-border);
    font-size: 1.6rem;
}

.company-profile__table tr:last-child th,
.company-profile__table tr:last-child td {
    border-bottom: none;
}

.company-profile__table th {
    width: 28%;
    min-width: 180px;
    font-weight: 700;
    color: var(--company-text);
    background: var(--company-bg-soft);
}

.company-profile__table td {
    color: var(--company-text);
}

.company-profile__image {
    display: block;
    margin: 60px 20px 0 auto;
    max-width: 250px;
    width: 60%;
}


/* ===== レスポンシブ ===== */
@media (max-width: 720px){
    .company-profile__table th,
    .company-profile__table td{
        display: block;
        width: 100%;
    }

    .company-profile__table th{
        padding-bottom: 4px;
        border-bottom: none;
    }

    .company-profile__table td{
        padding-top: 0;
        padding-bottom: 16px;
    }

    .company-profile__table tr{
        display: block;
        border-bottom: 1px dashed var(--company-border);
    }

    .company-profile__table tr:last-child{
        border-bottom: none;
    }
}