@charset "UTF-8";

html {
    font-size: 62.5%;
}

/* sp */
/* p {
  font-size: 1.4rem;
} */

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size: 1.6rem;
}

/* sec01 */
.container01 {
    width: 100%;
    height: 45vw;
    position: relative;
    background-image: url(../images/common/tc_common_mv_sp.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

#introduction {
    position: relative;
    /* overflow: hidden; */
    padding-bottom: 4rem;

    & .container {
        position: relative;
        text-align: center;

        & .txt__top1 {
            font-size: 2rem;
            color: var(--color-black);
            margin-bottom: 48px;
            line-height: 2;
            font-weight: normal;
        }

        & .txt__top2 {
            font-size: 1.6rem;
            line-height: 2;
            color: var(--color-black);
        }

        & .introduction-bg {
            display: none;

        }
    }
}


/* grid */
.grid-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.grid-item__inner a>.link-inner {
    margin-top: 8px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    column-gap: 8px;
    width: 100%;
}

.grid-box.__01 .grid-item a:hover .arrow {
    background-color: var(--color-main);
    border-color: var(--color-main);

    &::before {
        background-color: var(--color-white);
    }

    &::after {
        border-color: var(--color-white);
    }
}

.grid-item__txt {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 8px;
    font-size: 2rem;
    line-height: 1;

    &>span {
        font-size: 0.75em;
        color: var(--color-main);
    }

    & span.link__blank,
    & span.link__pdf {
        display: inline-flex;
        align-items: end;
        height: 1cap;
    }

    & span.link__blank::after {
        content: url(../../assets/images/link_black.png);
        display: inline-block;
        transform: scale(50%) translateY(16px);
    }
    & span.link__pdf::after {
        content: url(../../assets/images/pdf.png);
        display: inline-block;
        transform: scale(50%) translateY(28px);
    }
}

.grid-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-box.__02 .grid-item__inner a>.link-inner {
    font-size: 2rem;
    margin-top: 0;
}



.grid-box.__02 .grid-item a {
    height: 100%;
    padding: 3rem;
    background-color: #fff;
    border: 1px solid var(--color-main);
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.grid-box.__02 .grid-item a:hover {
    background-color: var(--color-main);
    color: #fff;

    & .grid-item__txt {
        &>span {
            color: #fff;
        }
    }

    & span.link__blank::after {
        content: url(../../assets/images/link_white.png);
    }
    & span.link__pdf::after {
        content: url(../../assets/images/pdf_white.png);
    }
}



/* pc */
@media screen and (min-width: 999.8px) {

    h2 {
        font-size: 3.5rem;
    }

    h3 {
        font-size: 2.6rem;
    }

    /* sec01 */
    .container01 {
        height: 27vw;
        background-image: url(../images/common/tc_common_mv_pc.png);
    }

    /* pc */
    #introduction {
        /* overflow: hidden; */
        padding-bottom: 8rem;

        & .container {

            & .txt__top1 {
                font-size: 3rem;
            }

            & .txt__top2 {
                font-size: 1.8rem;
            }

            & .introduction-bg {
                display: block;
                position: absolute;
                top: -120%;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;

                &>img {
                    width: 100%;
                    object-fit: cover;
                }
            }
        }

    }

    /* grid */
    .grid-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

}


.grid-box.__02 .grid-item__inner a {
    &:hover {

        &>span {

            &>span.link__blank::after {
                content: url(../../assets/images/link_white.png);
            }

            &>span {
                color: #ffffff;
            }
        }

    }
}