.ownLink {
    background-color: var(--background-color-lightgrey);
    padding: 64px 5% 0;
}

.ownLink .content--titleBox {
    margin-top: 32px;
}

.ownLink .content--text {
    font-size: 1.8rem;
}

.ownLink .horizontalTableBox {
    margin-top: 32px;
}

.ownLink .horizontalTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.4rem;
}

.ownLink .horizontalTable--body {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.ownLink .horizontalTable--bodyRow {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    background-color: var(--white);
}

.ownLink .horizontalTable--header {
    width: 25%;
    min-width: 240px;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--background-color-grey);
    padding: 15px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

.ownLink .horizontalTable--text {
    width: auto;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--white);
    padding: 15px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

.ownLink .link {
    color: var(--secondary-bland-color);
    text-decoration: underline;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .ownLink {
        padding-top: 32px;
    }

    .ownLink .content--text {
        font-size: 1.6rem;
    }

    .ownLink .horizontalTableBox {
        margin-top: 24px;
    }

    .ownLink .horizontalTable--body {
        display: block;
    }

    .ownLink .horizontalTable--bodyRow {
        display: block;
        margin-top: 24px;
    }

    .ownLink .horizontalTable--bodyRow:first-of-type {
        margin-top: 0;
    }

    .ownLink .horizontalTable--header {
        display: block;
        width: 100%;
        padding: 8px 5%;
        font-size: 1.2rem;
    }
    
    .ownLink .horizontalTable--text {
        display: block;
        width: 100%;
        padding: 12px 5%;
        font-size: 1.4rem;
        background-color: transparent;
    }
}

.mutualLink {
    background-color: var(--background-color-lightgrey);
    padding: 64px 5% 32px;
}

.mutualLink .content--textBox {
    margin-top: 32px;
}

.mutualLink .content--text {
    font-size: 1.8rem;
}

.mutualLink .horizontalTableBox {
    margin-top: 32px;
}

.mutualLink .horizontalTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.4rem;
}

.mutualLink .horizontalTable--body {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

.mutualLink .horizontalTable--bodyRow {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
    background-color: var(--white);
}

.mutualLink .horizontalTable--header {
    width: 25%;
    min-width: 240px;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--background-color-grey);
    padding: 15px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

.mutualLink .link {
    color: var(--secondary-bland-color);
    text-decoration: underline;
}

.mutualLink .horizontalTable--text {
    width: auto;
    color: var(--font-color-black);
    text-align: left;
    font-size: 1.6rem;
    font-weight: bold;
    background-color: var(--white);
    padding: 15px 18px;
    border-bottom: 1px solid var(--table-border-color-lightgrey);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .mutualLink {
        padding-top: 48px;
        padding-bottom: 32px;
    }

    .mutualLink .content--titleBox {
        justify-content: left;
    }

    .mutualLink .content--textBox {
        margin-top: 24px;
    }

    .mutualLink .content--text {
        font-size: 1.6rem;
    }

    .mutualLink .horizontalTableBox {
        margin-top: 24px;
    }

    .mutualLink .horizontalTable--body {
        display: block;
    }

    .mutualLink .horizontalTable--bodyRow {
        display: block;
        margin-top: 24px;
    }

    .mutualLink .horizontalTable--bodyRow:first-of-type {
        margin-top: 0;
    }

    .mutualLink .horizontalTable--header {
        display: block;
        width: 100%;
        padding: 8px 5%;
        font-size: 1.2rem;
    }
    
    .mutualLink .horizontalTable--text {
        display: block;
        width: 100%;
        padding: 12px 5%;
        font-size: 1.4rem;
        background-color: transparent;
    }
}