@charset "utf-8";

body {
    background: var(--font-black);
}

.nav {
    background: var(--main-purple);
}

/*========= DETAIL ===============*/
.detail__title {
    padding-top: 10rem;
    text-align: center;
    font-size: clamp(2rem, 3.47vw, 5rem);
    line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1rem;
    background: linear-gradient(270deg, var(--font-white), var(--main-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.detail__item {
    display: flex;
    gap: clamp(3rem, 4.86vw, 7rem);
    padding: clamp(2rem, 3.47vw, 5rem);
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--main-purpleHigh), var(--main-purple)) 1;
}

.detail__contents {
    width: 55vw;
}

.detail__name {
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.2rem;
}

.detail__name-ja {
    position: relative;
    font-family: "Shippori Mincho", serif;
    line-height: 1;
}

.detail__name-ja:after {
    position: absolute;
    background-image: linear-gradient(90deg, var(--main-purpleHigh), var(--main-purple));
    content: "";
    height: 2px;
    bottom: -50%;
    right: 0;
    width: 100%;
}

.detail__sns {
    display: flex;
    justify-content: flex-end;
    gap: clamp(1rem, 2.08vw, 2rem);
}

.detail__block {
    display: flex;
    line-height: 1;
}

.detail__head {
    font-weight: 800;
    width: 8rem;
}

.detail__head--day {
    width: 12rem;
}

.detail__head--message {
    width: 10rem;
}

.detail__body span {
    font-weight: 800;
}

.detail__label {
    margin-left: 1rem;
}

.detail__message-wrap {
  border: 2px solid transparent;
  border-radius: 1rem;
  border-image: linear-gradient(90deg, var(--main-purpleHigh), var(--main-purple)) 1;
  background: transparent;
  padding: 2rem;
  padding: clamp(1rem, 1.39vw, 2rem);
}

.detail__body--day {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    line-height: 2;
}

.detail__label--day {
    background: linear-gradient(135deg, rgba(255, 248, 250, 0.92) 0%, rgba(255, 239, 245, 0.88) 30%, rgba(250, 237, 205, 0.9) 60%, rgba(235, 245, 210, 0.85) 100%);
    border-radius: 6px;
    padding: 0 0.5rem;
    color: var(--font-black);
    margin-left: 0;
}

.detail__message-inline {
  display: block;
  width: 100%;
  line-height: 2;
}
/*========= FOOTER ===============*/
.footer::after {
    background: linear-gradient(360deg, rgba(var(--font-black-rgb), 0) 0%, rgba(var(--font-black-rgb), 0.6) 60%, rgba(var(--font-black-rgb), 1) 100%) center / cover;
}


/*  SP */
@media (max-width: 1024px) {
    .detail__contents {
        width: 95vw;
    }

    .detail__head {
        width: 7rem;
    }

    .detail__head--day {
        width: 10rem;
    }
} /*  SP 1024px */

@media (max-width: 768px) {
    .detail__item {
        display: block;
    }

    .detail__image {
        text-align: center;
    }

    .liverImg {
        width: 68vw;
    }

    .detail__contents {
        width: 68vw;
        margin: clamp(2rem, 4.17vw, 3rem) auto clamp(1rem, 2.08vw, 2rem);
    }

    .detail__head {
        width: 11rem;
    }

    .detail__block,
    .detail__message-block {
        margin-top: 2rem;
    }

    .detail__head--day {
        width: 15rem;
    }
    
} /*  SP 768px */

@media (max-width: 540px) {
    .detail__image,
    .detail__contents {
        width: 75vw;
    }

    .detail__head {
        width: 8rem;
    }

    .detail__body {
        line-height: 1.4;
    }

    .detail__head--day {
        width: 13rem;
    }

} /*  SP 540px */

@media (max-width: 400px) {
    .detail__body span {
        display: flex;
    }

    .detail__head--day {
        width: 21rem;
    }
} /*  SP 400px */