@import url("../tokens.css");

.project-software-page {

    .software-top-inner {
        display: flex;
        align-items: center;
        gap: 50px;
    }

    .software-top-img img {
        max-width: 320px;
    }

    .software-top-text {
        text-align: left;
    }

    .software-top-title {
        background-color: var(--c-primary);
        border-radius: 4px;
        color: #ffffff;
        font-weight: bold;
        font-size: x-large;
        margin: 0 0 1rem;
        padding: 8px;
    }

    /* project-item ============================== */

    .project-item-inner {
        text-align: left;
    }

    .project-item-inner .project-item-title {
        border-bottom: solid 2px var(--c-primary);
        color: var(--c-primary);
        font-weight: bold;
        font-size: x-large;
        margin: 0 0 1rem;
    }

    .project-item-text-area {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 6rem;
    }

    .project-item-text p {
        padding: 2rem 0;
    }

    .project_icon {
        width: 320px;
        padding: 2rem;
    }

    .supplementary-information-area {
        border-top: solid 2px var(--c-border);
        padding: 1rem 0 0;
    }

    .supplementary-information {
        display: flex;
        gap: 1rem;
        align-items: baseline;
        margin: 0 0 1rem;
    }

    .supplementary-information .item-title {
        background-color: var(--c-primary);
        border-radius: 4px;
        color: #ffffff;
        min-width: 8rem;
        padding: 4px 24px;
        text-align: center;
    }


    .supplementary-information ol {
        display: flex;
        flex-wrap: wrap;
    }

    .supplementary-information li:not(:first-child) {
        margin-left: 32px;
    }

    .supplementary-information li {
        position: relative;
    }

    .supplementary-information li:not(:first-child):before {
        bottom: 0;
        content: "/";
        left: -22px;
        position: absolute;
        top: 0;
        color: #4d4d4d;
    }

    /* tablet
================================================*/
    @media screen and (max-width: 768px) {

        .software-top-img img {
            max-width: 260px;
        }

        .project_icon {
            width: 300px;
        }

    }

    /* SP
================================================*/

    @media screen and (max-width: 767px) {

        .software-top-inner {
            flex-direction: column;
        }

        .project-item-text-area {
            flex-direction: column;
            margin: 0 0 4rem;
        }

        .project-item-text p {
            padding: 2rem 0;
        }

        .supplementary-information {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
            margin: 0 0 1.5rem;
        }

        .supplementary-information ol {
            margin: 0 0 0 32px;
        }

    }

}