@charset "utf-8";

:root {
    --arrow-size: 5rem;
    --item-gap: 7rem;
    --arrow-offset: calc((var(--item-gap) / -2) - (var(--arrow-size) / 2));
    --glass-bg: rgba(246, 199, 252, 0.25);
    --glass-border: rgba(246, 199, 252, 0.3);
    --glass-shadow: rgba(118, 75, 162, 0.1);
    --item-width: 25vw;
    --item-padding: 2%;
    --item-min-height: calc(350px + var(--item-padding) * 2);
}

.category,
#tiktok,
.features__title,
.features__text {
    font-family: 'Noto Sans JP', sans-serif;
}

/*========= VISUAL ===============*/
/* VISUAL SP */
@media (max-width: 768px) {
    .visual {
    background: url(../images/entryvisual_sp.webp) center / cover;
}
} /* VISUAL SP 768px */

/*========= category ===============*/
.category {
    padding: 5% 7% 0;
}

.category span {
    font-size: 1.6rem;
}

.category a {
    font-size: clamp(1.4rem, 2.78vw, 2.4rem);
    letter-spacing: 0.02em;
}

.category .btn {
    color: var(--font-black);
    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%
    );
}

.category .btn:hover {
    color: var(--main-purpleLow);
    background: var(--main-purpleHigh);
}

.category .btn:hover::before,
.category .btn:hover::after {
    border-color: var(--main-purpleHigh);
}

/*========= TIKTOK ===============*/
#tiktok {
    margin: 10% 0;
    text-align: center;
    color: var(--font-black);
}

#tiktok h5,
#tiktok h6 {
    text-align: left;
    font-weight: 800;
}

.tiktok__text {
    text-align: left;
    font-size: clamp(1.2rem, 1.39vw, 2rem);
    font-weight: 500;
    line-height: 2;
}

#tiktok .btn {
    color: var(--font-white);
    background: var(--font-black);
    letter-spacing: 0.3rem;
}

#tiktok .btn:hover {
    color: var(--font-black);
    background: var(--main-purpleHigh);
}

/*========= FEATURES ===============*/
.features__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--item-gap);
    position: relative;
}

.features__item {
    width: 25vw;
    padding: var(--item-padding);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(118, 75, 162, 0.3);
    border-radius: 8px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(350px - var(--item-padding) * 20);
    position: relative;
    box-shadow: 0 8px 32px var(--glass-shadow);
}

/* 矢印*/
.features__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--arrow-offset);
    transform: translateY(-50%);
    width: var(--arrow-size);
    height: var(--arrow-size);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23764ba2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>') center/contain no-repeat;
    z-index: 10;
}

.features__title {
    font-size: clamp(1.4rem, 2.78vw, 2.4rem);
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.features__text {
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.8;
    text-align: left;
}

.features__item--bgnone {
    background: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    width: calc(var(--item-width) * 0.6);
}

.features__item--bgnone .features__title {
    font-size: 2rem;
    font-size: clamp(1.6rem, 1.39vw, 2rem);
    font-weight: 800;
    color: var(--main-purpleLow);
}

/* TIKTOK SP */
@media (max-width: 640px) {
    .features__list {
        display: block;
    }

    .features__item {
        width: 50vw;
        margin: 3rem auto;
    }

    .features__item:not(:last-child)::after {
        display: none;
    }

    .features__text {
        text-align: center;
    }

} /* TIKTOK SP 640px */

@media (max-width: 480px) {
  .features__item {
        width: 65vw;
  }
} /* TIKTOK SP 480px */

@media (max-width: 375px) {
    .pcBr {
        display: none;
    }
} /* TIKTOK SP 375px */