@charset "UTF-8";

/* Artist */
.header,
.has-blur .header,
.no-blur .header {
    background-color: rgba(0, 0, 0, 0.4);
}

.footer {
    background-color: #EAEAE7;
}

.footer .copy__container {
    border-top: solid 1px #2E2E2E;
}

.footer .privacy__link {
    color: #2E2E2E;
}

.contact,
.footer .copy__container {
    color: #2E2E2E;
}

.contact .button::before {
    border: solid 1px #2E2E2E;
}

.contact .button .arrow::before {
    border: 1px solid #2E2E2E;
    border-left: 0;
    border-bottom: 0;
}

.contact .button:hover .arrow::before {
    border: 1px solid #fff;
    border-left: 0;
    border-bottom: 0;
}

.contact .button .arrow {
    background: #2E2E2E;
}

.contact .button:hover .arrow {
    background-color: #fff;
}

.contact .button::after {
    background-color: #2E2E2E;
}

.main {
    background-color: #2E2E2E;
    color: #fff;
    padding-block: calc(300*(100vw/750)) calc(50*(100vw/750));
}

.breadcrumbs {
    width: calc(674*(100vw/750));
    font-size: calc(24*(100vw/750));
    margin-inline: auto;
    margin-top: calc(180*(100vw/750));
    padding-bottom: calc(20 * (100vw / 750));
}

.main__image {
    width: calc(675*(100vw/750));
    margin-inline: auto;
    margin-bottom: calc(55*(100vw/750));
}

.main__title {
    width: calc(675*(100vw/750));
    margin-inline: auto;
    margin-bottom: calc(150*(100vw/750));
}

.main__title .title {
    font-size: calc(100*(100vw/750));
    margin-bottom: calc(20*(100vw/750));
    line-height: 1;
}

.main__title .sub_title {
    font-size: calc(24*(100vw/750));
    line-height: 1.75;
    letter-spacing: 0.1em;
}

.artists__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(160*(100vw/750));
    margin-bottom: calc(180*(100vw / 750));
}

.artists__list--contents {
    width: calc(600*(100vw/750));
}

.artists__list--contents .en__title,
.artists__list--contents .jp__title {
    line-height: 1;
    margin-bottom: calc(25*(100vw/750));
}

.artists__list--contents .en__title {
    font-size: calc(32*(100vw/750));
}


.artists__list--contents .jp__title {
    font-size: calc(42*(100vw/750));
    line-height: 1.5;
}

.artists__list--contents .text {
    font-size: calc(24*(100vw/750));
    line-height: 1.75;
    letter-spacing: 0.085em;
}

.artists__list--contents .youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: calc(20*(100vw/750));
}

.artists__list--contents .youtube iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.artists__list--contents .image {
    margin-top: calc(50*(100vw/750));
}

.main .artists__list--contents .link a {
    margin-right: 0;
}

.main .link {
    margin-top: calc(60*(100vw/750));
}

.main .link a {
    display: flex;
    width: fit-content;
    gap: calc(20*(100vw / 750));
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
}

.main .link__text {
    font-size: calc(24*(100vw/750));
    letter-spacing: 0.1em;
    line-height: 1.75;
    color: #fff;
}

.main .link__button {
    display: grid;
    place-content: center;
    position: relative;
    width: calc(180*(100vw/750));
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: transparent;
    z-index: 0;
}

.main .link__button::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    position: absolute;
    border: solid 1px #fff;
    transition-duration: 750ms;
}

.main .link a:hover .link__button::before {
    scale: 1.2;
    border-color: rgba(255, 255, 255, 0);
}

.main .link__button .arrow {
    color: #fff;
    line-height: 1;
    position: relative;
    width: calc(40*(100vw/750));
    height: 1px;
    background: #fff;
    z-index: 1;
}

.main .link a:hover .link__button .arrow {
    background-color: #000;
}

.main .link__button .arrow::before {
    content: '';
    width: calc(20*(100vw / 750));
    height: calc(20*(100vw / 750));
    border: 1px solid #fff;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    right: calc(-3*(100vw / 750));
    top: 0;
    z-index: 0;
}

.main .link a:hover .link__button .arrow::before {
    border: 1px solid #000;
    border-left: 0;
    border-bottom: 0;
}

.main .link__button::after {
    content: '';
    width: 0;
    aspect-ratio: 1;
    background-color: #fff;
    transition-duration: 750ms;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    opacity: 0;
    z-index: -1;
}

.main .link a:hover .link__button::after {
    width: calc(150*(100vw/750));
    opacity: 1;
}

.artists__list--contents .achievements__list--contents {
    font-size: 24px;
    line-height: 2;
    letter-spacing: 0.06em;
}

.artists__list--contents .achievements__list--contents::before {
    content: "・";
}

/* Artists */


/* PCサイズ */
@media screen and (min-width: 800px) {

    /* Artists */
    .main {
        padding-block: 250px 20px;
    }

    .breadcrumbs {
        width: calc(1700*(100vw/1920));
        max-width: 1700px;
        font-size: 16px;
        margin-top: calc(150*(100vw/1920));
        padding-bottom: calc(20 * (100vw / 1920));
    }

    .main__image {
        width: calc(1728*(100vw/1920));
        margin-bottom: calc(60*(100vw/1920));
    }

    .main__title {
        width: calc(1728*(100vw/1920));
        margin-inline: auto;
        margin-bottom: calc(220*(100vw/1920));
        text-align: center;
    }

    .main__title .title {
        font-size: 80px;
        margin-bottom: 0;
    }

    .main__title .sub_title {
        /* width: calc(775*(100vw/1920)); */
        font-size: 16px;
        line-height: 2;
    }

    .artists__list {
        width: calc(1564*(100vw/1920));
        max-width: 1564px;
        margin-inline: auto;
        justify-content: space-between;
        gap: calc(120*(100vw/1920)) 0;
        margin-bottom: calc(160*(100vw / 1920));
    }

    .artists__list--contents {
        width: calc(730*(100vw/1920));
        max-width: 730px;
    }

    .artists__list--contents .en__title,
    .artists__list--contents .jp__title {
        line-height: 1;
        margin-bottom: calc(20*(100vw/1920));
    }

    .artists__list--contents .en__title {
        font-size: 16px;
    }


    .artists__list--contents .jp__title {
        font-size: 32px;
        line-height: 1.5;
    }

    .artists__list--contents .text {
        font-size: 16px;
    }

    .artists__list--contents .youtube {
        margin-bottom: calc(20*(100vw/1920));
    }

    .artists__list--contents .image {
        margin-top: calc(50*(100vw/1920));
    }

    .main .link {
        margin-top: calc(60*(100vw/1920));
    }

    .main .link a {
        gap: calc(20*(100vw / 1920));
    }

    .main .link__text {
        font-size: 16px;
    }

    .main .link__button {
        width: 100px;
    }

    .main .link__button .arrow {
        width: 23px;
    }

    .main .link__button .arrow::before {
        width: 10px;
        height: 10px;
        right: calc(-3*(100vw / 1920));
    }

    .main .link a:hover .link__button::after {
        width: 80px;
    }

    .artists__list--contents .achievements__list--contents {
        font-size: 16px;
    }

    /* Artists */
}