.inner__slice {
    width: 100%;
    bottom: 0%;
    left: 50%;
    transform: translateX(-45%);
    z-index: 0;
    background-repeat: no-repeat;
}


.kv {
    width: 100%;
    height: 100vh;
    z-index: 30;
}

.kv__text-wrapper {
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 40;
}

.kv__text-box {
    font-size: 3em;
    line-height: 1;
    color: var(--background-base);
}

.kv__text-box span {
    line-height: 1;
    display: inline-block;        /* 行ごとに左端揃え可能 */
    padding: 0.1em 0.1em;         /* 文字の周りの余白 */
    background-color: var(--text-color);
}

.kv__sub-text-box{
    margin-top: 1em;
    line-height: 1;
    padding: 0 0.3em;
    width: fit-content;
    height: fit-content;
    color: var(--background-base);
    font-weight: 300;
    background-color: var(--text-color);
}

.kv__text {
    margin: 0%;
}

.kv__nav {
    margin-top: 3em;
}

.kv__nav-text-box {
    line-height: 1;
    padding: 0em 0.3em;
    width: fit-content;
    height: fit-content;
    color: var(--background-base);
    font-weight: 300;
    background-color: var(--text-color);
}

.kv__sub-text {
    margin-top: 0em;
}

.kv__nav-text-box:not(:first-child) {
    margin-top: 1em;
}

.kv__border {
    width: 2em;
    height: 100%;
    background-image: url("/image/the-new-york-public-library-o784yEsNIS8-unsplash.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    top: 0%;
    left: 0%;
    z-index: 25;
}

.kv__border2 {
    width: 2em;
    height: 50%;
    background-image: url("/image/sina-bahar-JfFaiMa5sVY-unsplash.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0%;
    left: 1.5em;
    z-index: 26;
}

.kv__border3 {
    width: 1em;
    height: 50%;
    background-image: url("/image/sina-bahar-JfFaiMa5sVY-unsplash.webp");
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    bottom: 0%;
    left: 0%;
    transform: translateY(100%);
    z-index: 27;
}

.kv__background-image {
    width: 100%;
    object-fit: contain;
}

/* NEWS */
.news {}

.news__inner {
    max-width: 1300px;
    margin: 0 auto;
    width: 54%;
    margin: 13em auto 0 auto;
}

.news__nav-text-box {
    line-height: 1.1;
    padding: 0 0.3em;
    width: fit-content;
    height: fit-content;
    color: var(--background-base);
    font-weight: 300;
    background-color: var(--text-color);
}

.news__slice{
    top: 50%;
    right: 0%;
    transform: translate(0%,-60%);
    z-index: -1;
}

.news__detail-wrapper {
    margin-top: 2.7em;
    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
}

.news__detail {
    /* padding: 0.3em;
    border: 2px solid var(--text-color);
    background-color: #fdf9d5; */
}

.news__tag-wrap {
    display: flex;
    justify-content: left;
    gap: 1em;
}

.news__text {
    margin-top: 0.5em;
}

/* PROFILE */
.profile {}

.profile__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
    width: 77%;
    margin: 13em auto 0 auto;
}

.profile__portrait {
    width: 40%;
    aspect-ratio: 3/5;
    overflow: hidden;
    border: 2px solid var(--text-color);
}

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

.profile__wrapper {
    width: 50%;
}

.profile__nav-text-box {
    line-height: 1.1;
    padding: 0 0.3em;
    width: fit-content;
    height: fit-content;
    color: var(--background-base);
    font-weight: 300;
    background-color: var(--text-color);
}

.profile__name {
    margin-top: 1em;
}

.profile__text {
    margin-top: 1.7em;
    line-height: 1.7;
}

.profile__btn {
    margin-top: 2em;
}

.profile__slice{
    top: 0%;
    left: 0%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

/* WORK */
.work {}

.work__inner {
    max-width: 1300px;
    margin: 0 auto;
    width: 84%;
    margin: 13em auto 0 auto;
}

.work__slice{
    top: 0%;
    left: 10%;
    transform: translate(0%,-60%);
    z-index: -1;
}

.work__nav-text-box {
    line-height: 1.1;
    margin: 0 auto;
    padding: 0 0.3em;
    width: fit-content;
    height: fit-content;
    color: var(--background-base);
    font-weight: 300;
    background-color: var(--text-color);
}

.work__text {
    margin-top: 1.7em;
    line-height: 1.7;
}

.work__btn {
    margin: 1em auto 0 auto;
}

.work__wrapper {
    margin-top: 1.5em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.work__detail-wrapper {
    width: 30%;
}

.work__detail-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 27/40;
    border: 2px solid var(--text-color);
    overflow: hidden;
}

.work__detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work__detail-nav-text-box {
    margin-top: 0.3em;
    margin-bottom: 0.5em;
    line-height: 1.1;
    padding: 0 0.2em;
    width: fit-content;
    height: fit-content;
    color: var(--text-color);
    background-color:var(--background-base);
    border: 2px solid var(--text-color);
    font-weight: 300;
}

.work__detail-text {
    display: inline;
    margin-top: 0.3em;
    letter-spacing: 0.1em;
    line-height: 1.3;
    color: var(--background-base);
    background-color: var(--text-color);
}

/* CONTACT */
.contact {}

.contact__inner {
    max-width: 1300px;
    margin: 0 auto;
    width: 77%;
    margin: 13em auto;
}

.contact__nav-text-box {
    line-height: 1.1;
    margin: 0 auto 0 0;
    padding: 0 0.3em;
    width: fit-content;
    height: fit-content;
    color: var(--background-base);
    font-weight: 300;
    background-color: var(--text-color);
}

.contact__text {
    margin-top: 1.7em;
    line-height: 1.7;
}

.contact__slice{
        top: 50%;
        right: 0%;
        transform: translateY(-50%);
        z-index: -1;
    }

@media (max-width: 767px) {

    /* KV */
    .inner__slice {
        transform: translateX(-50%);
    }

    .kv__text-box {
        font-size: 2em;
    }

    .kv__text-wrapper {
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        z-index: 40;
    }

    /* NEWS */
    .news__inner {
        width: 90%;
        margin: 7em auto 0 auto;
    }

    .news__slice{
        top: 0%;
        left: 0%;
        transform: translate(-20%,-50%);
        z-index: -1;
    }

    /* プロフィール */
    .profile__inner {
        width: 90%;
        margin: 7em auto 0 auto;
        flex-direction: column;
    }

    .profile__slice{
        top: 0%;
        right: 0%;
        transform: translate(20%,-50%);
        z-index: -1;
    }

    .profile__portrait{
        order: 1;
        width: 100%;
        margin-top: 2em;
    }

    .profile__wrapper{
        order: 0;
        width: 100%;
    }

    .profile__btn {
        margin-top: 1em;
    }

    /* WORK */
    .work__inner {
        width: 90%;
        margin: 7em auto 0 auto;
    }

    .work__wrapper {
        margin-top: 1em;
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .work__detail-wrapper {
        width: 100%;
    }

    /* CONTACT */
    .contact__inner {
        width: 90%;
        margin: 7em auto 10em auto;
    }
}