@charset "UTF-8";

/* ===========================================================
   result-list（16タイプ一覧）
   --type-bg / --type-text にキャラごとの色が入る
   =========================================================== */
.list {
    width: calc(320 * var(--u));
    margin: auto;
    padding-bottom: calc(40 * var(--u));
}

.list__catch {
    color: #FFF;
    text-align: center;
    font-size: calc(40 * var(--u));
    font-weight: 800;
    line-height: 150%;
    margin-bottom: calc(16 * var(--u));
}

.list__description {
    text-align: center;
    margin-bottom: calc(40 * var(--u));
}

.list__description-text {
    font-size: calc(16 * var(--u));
    font-weight: 800;
    line-height: 150%;
    text-align: left;
    margin-bottom: calc(40 * var(--u));
}


.result-list {
    margin-bottom: calc(40 * var(--u));
}

.result-list__item {
    width: 100%;
    /* height: 260px; */
    margin-bottom: calc(16 * var(--u));
}

.result-list__link {
    display: block;
    text-align: center;
    padding: calc(16 * var(--u));
    background: var(--type-lightbg);
    border-radius: calc(24 * var(--u));
}

.result-list__image {
    width: calc(180 * var(--u));
    height: calc(180 * var(--u));
    margin: auto;
    margin-bottom: calc(16 * var(--u));
}

.result-list__name {
    color: var(--type-text);
    text-align: center;
    font-size: calc(20 * var(--u));
    font-weight: 800;
    line-height: 130%;
}

.result-list__type {
    color: var(--type-text);
    text-align: center;
    font-size: calc(14 * var(--u));
    font-weight: 800;
    line-height: 150%;
}

.result-list__catch {
    color: #2C2A29;
    text-align: center;
    font-size: calc(14 * var(--u));
    font-weight: 400;
    line-height: 130%;
}

.list__action-list {
    margin: auto;
    text-align: center;
}

.list__action:not(:last-child) {
    margin-bottom: calc(24 * var(--u));
}


/* ===========================================================
   result（結果ページ）
   --type-bg / --type-text にキャラごとの色が入る
   =========================================================== */
.type-bg {
    background-color: var(--type-bg);
}

.result {
    margin: auto;
    width: calc(335 * var(--u));
    color: #FFF;
}

.result__inner {
    padding-bottom: calc(40 * var(--u));
}

.result__header {
    text-align: center;
}

.result__title {
    font-size: calc(40 * var(--u));
    font-weight: 800;
    line-height: 150%;
    margin-bottom: calc(8 * var(--u));
}

.result__type {
    font-size: calc(24 * var(--u));
    font-weight: 800;
    line-height: 150%;
    margin-bottom: calc(24 * var(--u));
}

.result__figure {
    width: calc(200 * var(--u));
    height: calc(200 * var(--u));
    aspect-ratio: 1/1;
    margin: auto;
    margin-bottom: calc(24 * var(--u));
}


.result__label-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: calc(24 * var(--u));
}

.result__label {
    padding: calc(4 * var(--u)) calc(8 * var(--u));
    line-height: 1;
    border-radius: 999px;
    border: 1px solid #FFF;
    font-size: calc(14 * var(--u));
    font-weight: 800;
    line-height: 1;
}

.result__catch {
    text-align: center;
    margin-bottom: calc(16 * var(--u));

    font-size: calc(24 * var(--u));
    font-weight: 800;
    line-height: 150%;
}

.result__description {
    font-size: calc(16 * var(--u));
    font-weight: 800;
    line-height: 150%;
    margin-bottom: calc(40 * var(--u));
    text-align: left;
}

.result__body {
    padding: calc(16 * var(--u));
    border-radius: calc(24 * var(--u));
    background: #FFF;
    margin-bottom: calc(40 * var(--u));
}

.result__section:not(:last-child) {
    padding-bottom: calc(16 * var(--u));
    margin-bottom: calc(16 * var(--u));
    border-bottom: 2px solid #DBDBDB;
}

.result__section-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.result__section-title::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));

}

.result__section--hashtag .result__section-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M15.02 4.62667V11.3667C15.02 11.5533 14.9867 11.7333 14.9133 11.9C14.84 12.0667 14.7467 12.2067 14.6333 12.3267C14.52 12.4467 14.3733 12.54 14.2067 12.6067C14.04 12.6733 13.8667 12.7133 13.6733 12.7133H5.35332C5.17999 12.7133 5.01332 12.68 4.85332 12.6133C4.69332 12.5467 4.54665 12.4533 4.41999 12.3267L1.03999 8.94C0.779987 8.68 0.65332 8.36667 0.65332 8C0.65332 7.63333 0.779987 7.31333 1.03999 7.06L4.41999 3.68C4.54665 3.55333 4.69332 3.46 4.85999 3.39334C5.02665 3.32667 5.19999 3.29333 5.37332 3.29333L13.68 3.30667C13.8667 3.30667 14.0467 3.34667 14.2067 3.42C14.3667 3.49333 14.5067 3.59333 14.6267 3.70667C14.7467 3.82 14.84 3.96 14.9067 4.12C14.9733 4.28 15.0133 4.44667 15.0133 4.64L15.02 4.62667ZM5.04665 8.7C5.23999 8.50667 5.33999 8.26667 5.33999 7.99333C5.33999 7.72 5.23999 7.48 5.04665 7.28667C4.85332 7.09333 4.61332 6.99333 4.33999 6.99333C4.06665 6.99333 3.82665 7.09333 3.63332 7.28667C3.43999 7.48 3.33999 7.72 3.33999 7.99333C3.33999 8.26667 3.43999 8.50667 3.63332 8.7C3.82665 8.89333 4.06665 8.99333 4.33999 8.99333C4.61332 8.99333 4.85332 8.89333 5.04665 8.7Z' fill='%23F25284'/%3E%3C/svg%3E");
}

.result__section--spot-k .result__section-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.99913 14.3296C7.8336 14.3296 7.66826 14.3006 7.5032 14.2424C7.33806 14.1842 7.19066 14.0968 7.061 13.9804C6.3228 13.3058 5.67062 12.6504 5.10444 12.0144C4.53826 11.3784 4.06573 10.7606 3.68686 10.1608C3.30801 9.56103 3.02069 8.98023 2.82491 8.41823C2.62914 7.8563 2.53125 7.31203 2.53125 6.78543C2.53125 5.08234 3.08098 3.72552 4.18044 2.715C5.27992 1.70448 6.55313 1.19922 8.00006 1.19922C9.44706 1.19922 10.7203 1.70448 11.8197 2.715C12.9192 3.72552 13.4689 5.08234 13.4689 6.78543C13.4689 7.31203 13.3711 7.8563 13.1753 8.41823C12.9795 8.98023 12.6922 9.56103 12.3133 10.1608C11.9345 10.7606 11.4619 11.3784 10.8957 12.0144C10.3296 12.6504 9.6774 13.3058 8.93926 13.9804C8.80913 14.0968 8.66133 14.1842 8.4958 14.2424C8.33026 14.3006 8.16466 14.3296 7.99913 14.3296ZM8.00006 8.04123C8.38006 8.04123 8.70393 7.90737 8.97166 7.63963C9.2394 7.3719 9.37326 7.04803 9.37326 6.66803C9.37326 6.28811 9.2394 5.96425 8.97166 5.6965C8.70393 5.42875 8.38006 5.29488 8.00006 5.29488C7.62013 5.29488 7.29626 5.42875 7.02853 5.6965C6.7608 5.96425 6.62692 6.28811 6.62692 6.66803C6.62692 7.04803 6.7608 7.3719 7.02853 7.63963C7.29626 7.90737 7.62013 8.04123 8.00006 8.04123Z' fill='%23F25284'/%3E%3C/svg%3E");
}

.result__section--spot .result__section-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.95938 11.0327V13.3394C3.95938 14.0594 3.37938 14.6394 2.65938 14.6394C1.93938 14.6394 1.35938 14.0594 1.35938 13.3394V11.0327C1.35938 10.3127 1.93938 9.73271 2.65938 9.73271C3.37938 9.73271 3.95938 10.3127 3.95938 11.0327ZM7.29271 12.6527H5.81271C5.26604 12.6527 4.81938 13.0994 4.81938 13.646C4.81938 14.1927 5.26604 14.6394 5.81271 14.6394H7.29271C7.83938 14.6394 8.28604 14.1927 8.28604 13.646C8.28604 13.0994 7.83938 12.6527 7.29271 12.6527ZM13.0394 6.53271H10.9394C10.0727 6.53271 10.026 7.11271 10.026 7.39938V8.57938L8.87271 9.73271H5.40604C5.08604 9.73271 4.82604 9.99271 4.82604 10.3127V11.466C4.82604 11.786 5.08604 12.046 5.40604 12.046H9.15938V14.066C9.15938 14.386 9.41938 14.646 9.73938 14.646H10.3527C10.6727 14.646 10.9327 14.386 10.9327 14.066V13.7794H12.086V14.066C12.086 14.386 12.346 14.646 12.666 14.646H13.286C13.606 14.646 13.866 14.386 13.866 14.066V7.39938C13.866 6.81938 13.626 6.53271 13.046 6.53271H13.0394ZM13.486 1.35938H11.1794C10.5394 1.35938 10.026 1.87938 10.026 2.51271V4.24604C10.026 4.88604 10.546 5.39938 11.1794 5.39938H13.486C14.126 5.39938 14.6394 4.87937 14.6394 4.24604V2.51271C14.6394 1.87271 14.1194 1.35938 13.486 1.35938Z' fill='%23F25284'/%3E%3C/svg%3E");
}

.result__section--best .result__section-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.99634 13.9274C7.81963 13.9274 7.64215 13.8955 7.46389 13.8317C7.28565 13.7678 7.1272 13.6678 6.98854 13.5318L5.84838 12.4901C4.69397 11.4368 3.64774 10.3831 2.70974 9.32916C1.77174 8.27523 1.30273 7.10482 1.30273 5.81793C1.30273 4.75031 1.65913 3.85879 2.37191 3.14342C3.08469 2.42801 3.97488 2.07031 5.0425 2.07031C5.61709 2.07031 6.16018 2.1875 6.67174 2.42189C7.18332 2.65627 7.62485 2.98155 7.99634 3.39774C8.36784 2.98155 8.80936 2.65627 9.32095 2.42189C9.8325 2.1875 10.3756 2.07031 10.9502 2.07031C12.0178 2.07031 12.91 2.42801 13.6267 3.14342C14.3434 3.85879 14.7017 4.75031 14.7017 5.81793C14.7017 7.10482 14.2335 8.27797 13.297 9.33739C12.3606 10.3968 11.3042 11.4545 10.1279 12.5105L9.00808 13.5357C8.86943 13.6718 8.71031 13.7711 8.53074 13.8336C8.35117 13.8962 8.17306 13.9274 7.99634 13.9274Z' fill='%23F25284'/%3E%3C/svg%3E");
}

.result__section--worst .result__section-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.99961 13.6C7.06628 12.7444 6.20794 11.9694 5.42461 11.275C4.64128 10.5806 3.96628 9.91945 3.39961 9.29167C2.83294 8.66389 2.39128 8.05 2.07461 7.45C1.75794 6.85 1.59961 6.21667 1.59961 5.55C1.59961 4.55 1.9385 3.70833 2.61628 3.025C3.29405 2.34167 4.12739 2 5.11628 2C5.60517 2 6.07183 2.09167 6.51628 2.275C6.96072 2.45833 7.35517 2.71111 7.69961 3.03333L6.79961 6.8H8.79961L7.99961 12.3167L9.99961 6H7.99961L9.13294 2.45C9.39961 2.30556 9.68017 2.19444 9.97461 2.11667C10.2691 2.03889 10.5718 2 10.8829 2C11.8718 2 12.7052 2.34167 13.3829 3.025C14.0607 3.70833 14.3996 4.55 14.3996 5.55C14.3996 6.22778 14.2302 6.88056 13.8913 7.50833C13.5524 8.13611 13.0913 8.76944 12.5079 9.40833C11.9246 10.0472 11.2468 10.7056 10.4746 11.3833C9.70239 12.0611 8.87739 12.8 7.99961 13.6Z' fill='%23F25284'/%3E%3C/svg%3E");
}

.result__section-title {
    color: #2C2A29;
    font-size: calc(16 * var(--u));
    font-weight: 800;
    line-height: 150%;
    margin-bottom: calc(8 * var(--u));
    ;
}

.result__hashtag-list,
.result__spot-list,
.result__match-list {
    /* margin-bottom: calc(40 * var(--u)); */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(8 * var(--u));
}

.result__hashtag-tag,
.result__spot-tag,
.result__match-tag {
    padding: calc(4 * var(--u)) calc(8 * var(--u));
    display: inline-block;
    line-height: 1;
    color: var(--type-text);
    background-color: var(--type-lightbg);
    border-radius: 999px;
    font-size: calc(14 * var(--u));
    font-weight: 800;
    line-height: 150%;
}

.result__plan {
    margin-bottom: calc(24 * var(--u));
}

.result__plan-title {
    color: #FFF;
    text-align: center;

    font-size: calc(24 * var(--u));
    font-weight: 800;
    line-height: 150%;
    margin-bottom: calc(24 * var(--u));
}

.result__plan .plan__slider .splide__pagination__page.is-active {
    background: #fff;
}

.result__action-list {
    margin-bottom: calc(40 * var(--u));
}

.result__action {
    text-align: center;
    margin-bottom: calc(24 * var(--u));
}