@charset "UTF-8";


/* mv
---------------------------------------------------*/
#mv {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 40px;
}
#mv .figure {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto;
}
#mv .figure img {
    width: 100%;
    object-fit: cover;
}

/* 768px */
@media screen and (min-width:1px) and (max-width: 768px) {
    #mv {
        width: 100%;
        margin-bottom: 6.25vw;
    }
    #mv .figure {
        border-radius: 3.125vw;
    }
}

/* profile
---------------------------------------------------*/
#profile .user-name {
    line-height: 1.75em;
    color: var(--secondary-color);
    font-size: var(--font-size-m);
    font-weight: 500;
}
#profile .user-id {
    line-height: 1.75em;
    font-size: var(--font-size-s);
}
#profile .user-photo {
    width: 100%;
    margin: 10px auto 20px;
}
#profile .user-photo img {
    width: 100%;
    border-radius: 5px;
}
#profile .btn-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #profile .user-photo {
        width: 100%;
        margin: 3.125vw auto 6.25vw;
    }
    #profile .user-photo img {
        border-radius: 0.78125vw;
    }
    #profile .btn-wrap {
        gap: 3.125vw;
    }
}


/* point
---------------------------------------------------*/
#profile + #point,
#point + #profile {
    margin-top: 20px;
}
#point .user-name {
    line-height: 1.75em;
    text-align: center;
    font-size: var(--font-size-l);
    font-weight: 500;
    margin-bottom: 0.5em;
}
#point .user-point {
    line-height: 1.75em;
    text-align: center;
    color: var(--main-color);
    font-size: var(--font-size-m);
    font-weight: 500;
    word-break: break-all;
    margin-bottom: 0.5em;
}
#point .user-point span {
    font-size: var(--font-size-l);
    letter-spacing: 0.1em;
}
#point .user-point-expiry {
    line-height: 1.75em;
    text-align: center;
}
#point .user-point-expiry {
    line-height: 1.75em;
    text-align: center;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #profile + #point {
        margin-top: 3.125vw;
    }
}

/* mail
---------------------------------------------------*/
.message-menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 5%;
}
.message-menu-list li {
    width: 47.5%;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    .message-menu-list {
        gap: 4.6875vw 5%;
    }
}


/* mail
---------------------------------------------------*/
.mail-list {
    background-color: var(--white-color);
    border-top: 1px solid var(--silver-color);
}
.mail-list li {
    border-bottom: 1px solid var(--silver-color);
    padding: 0.5em 0;
}
.mail-list li .fig {
    width: 100px;
    margin-right: 0.5em;
}
.mail-list li input + .fig {
    margin-left: 1em;
}
.mail-list li .fig img {
    width: 100%;
}
.mail-list li a {
    display: flex;
    width: 100%;
    color: var(--font-color);
    padding: 0.5em;
}
.mail-list li:hover {
    background-color: var(--background-color);
}
.mail-list li a:hover {
    color: var(--secondary-color);
}
.mail-list li a .mail-date {
    width: 160px;
}
.mail-list li a .mail-subject {
    width: calc(100% - 240px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mail-list li a .icon {
    width: 80px;
    text-align: center;
}
.mail-list li a .icon .icon-check {
    display: inline-block;
    color: var(--white-color);
    font-size: var(--font-size-ss);
    background-color: var(--silver-color);
    border-radius: 3em;
    padding: 0.2em 0.6em;
}
.mail-list li a .icon .icon-check.unread {
    background-color: var(--red-color);
}

/* :has .check*/
.mail-list li:has(.check) {
    display: flex;
    padding-left: 0.5em;
}
.mail-list li:has(.check) a {
    width: calc(100% - 20px);
}
/* :has .fig*/
.mail-list li:has(.fig) {
    display: flex;
    align-items: center;
    padding-left: 0.5em;
}
.mail-list li:has(.fig) a {
    width: calc(100% - 120px);
}

/* check-select */
.check-select {
    margin-bottom: 20px;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    .mail-list li a {
        flex-wrap: wrap;
    }
    .mail-list li .fig {
        width: 15.625vw;
    }
    .mail-list li a .mail-date {
        order: 1;
        width: calc(100% - 12.5vw);
        margin-bottom: 3.125vw;
    }
    .mail-list li a .mail-subject {
        order: 3;
        width: 100%;
    }
    .mail-list li a .icon {
        order: 2;
        width: 12.5vw;
        margin-bottom: 3.125vw;
    }
    /* :has .check*/
    .mail-list li:has(.check) {
        padding-left: 3.125vw;
    }
    .mail-list li:has(.check) a {
        width: calc(100% - 3.125vw);
        padding-left: 3.125vw;
    }
    /* :has .fig*/
    .mail-list li:has(.fig) a {
        width: calc(100% - 18.75vw);
    }
    /* check-select */
    .check-select {
        margin-bottom: 6.25vw;
    }
}


/* mail-detail
---------------------------------------------------*/
#mail-detail .mail-head {
    display: flex;
    align-items: center;
    border: 1px solid var(--silver-color);
    background-color: var(--white-color);
    padding: 10px;
    margin-bottom: 20px;
}
#mail-detail .mail-head .fig {
    width: 100px;
    margin-right: 10px;
}
#mail-detail .mail-head .fig img {
    width: 100%;
}
#mail-detail .mail-head .text-wrap {
    width: calc(100% - 110px);
    line-height: 1.4em;
}
#mail-detail .mail-head .mail-sender {
    font-size: var(--font-size-m);
    margin-bottom: 0.5em;
}
#mail-detail .mail-body {
    line-height: 1.75em;
}
#mail-detail .mail-body p {
    line-height: 1.75em;
}
#mail-detail .mail-body p + p {
    margin-top: 1em;
}
#mail-detail .mail-body img {
    display: block;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
#mail-detail .mail-body img + p,
#mail-detail .mail-body p + img,
#mail-detail .mail-body img + img {
    margin-top: 20px;
}

/* sender */
#sender {
    text-align: center;
    line-height: 1.75em;
    color: var(--main-color);
    font-size: var(--font-size-m);
    font-weight: 500;
}
#sender .user-photo {
    width: 100%;
    margin: 10px auto;
}
#sender .user-photo img {
    width: 100%;
    border-radius: 5px;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #mail-detail .col-1 + .col-2 {
        margin-top: 12.5vw;
    }
    #mail-detail .mail-head {
        padding: 1.5625vw 3.125vw;
        margin-bottom: 3.125vw;
    }
    #mail-detail .mail-head .fig {
        width: 15.625vw;
        margin-right: 3.125vw;
    }
    #mail-detail .mail-head .text-wrap {
        width: calc(100% - 18.75vw);
    }
    #mail-detail .mail-body img {
        max-width: 62.5vw;
    }
    #mail-detail .mail-body img + p,
    #mail-detail .mail-body p + img,
    #mail-detail .mail-body img + img {
        margin-top: 3.125vw;
    }
    /* sender */
    #sender .user-photo {
        width: 100%;
        margin: 3.125vw auto;
    }
    #sender .user-photo img {
        border-radius: 0.78125vw;
    }
}


/* search-result
---------------------------------------------------*/
.user-profile-list .user-profile {
    display: flex;
    align-items: center;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--gray-color);
    padding: 20px;
}
.user-profile-list .user-profile:first-of-type {
    border-top: 1px solid var(--gray-color);
}
.user-profile-list .user-profile .fig {
    width: 120px;
    aspect-ratio: 1 / 1;
    margin-right: 20px;
}
.user-profile-list .user-profile .fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-profile-list .user-profile .profile {
    width: calc(100% - 300px);
}
.user-profile-list .user-profile .profile .name {
    line-height: 1.4em;
    color: var(--main-color);
    font-size: var(--font-size-n);
    font-weight: 500;
    margin-bottom: 0.5em;
}
.user-profile-list .user-profile .profile .txt {
    line-height: 1.4em;
    font-size: var(--font-size-s);
    margin-bottom: 0.5em;
}
.user-profile-list .user-profile .profile .info dl {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.4em;
    font-size: var(--font-size-s);
}
.user-profile-list .user-profile .profile .info dl dt {
    width: 6em;
}
.user-profile-list .user-profile .profile .info dl dd {
    width: calc(100% - 6em);
}
.user-profile-list .user-profile .btn {
    width: 160px;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    .user-profile-list .user-profile {
        flex-wrap: wrap;
        padding: 6.25vw 3.125vw;
    }
    .user-profile-list .user-profile .fig {
        width: 31.25vw;
        margin-right: 3.125vw;
    }
    .user-profile-list .user-profile .profile {
        width: calc(100% - 34.375vw);
    }
    .user-profile-list .user-profile .btn {
        width: 100%;
        margin-top: 3.125vw;
    }
}

/* search-detail
---------------------------------------------------*/
.user-profile-detail {
    padding-bottom: 40px;
}
.user-profile-detail .user-profile {
    display: flex;
    align-items: center;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--gray-color);
    padding: 20px;
}
.user-profile-detail .user-profile:first-of-type {
    border-top: 1px solid var(--gray-color);
}
.user-profile-detail .user-profile .fig {
    width: 240px;
    aspect-ratio: 1 / 1;
    margin-right: 20px;
}
.user-profile-detail .user-profile .fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-profile-detail .user-profile .profile {
    width: calc(100% - 440px);
}
.user-profile-detail .user-profile .profile .name {
    line-height: 1.4em;
    color: var(--main-color);
    font-size: var(--font-size-m);
    font-weight: 500;
    margin-bottom: 0.5em;
}
.user-profile-detail .user-profile .profile .name .gender {
    margin-left: 0.5em;
}
.user-profile-detail .user-profile .profile .name .gender.male {
    color: var(--blue-color);
}
.user-profile-detail .user-profile .profile .name .gender.female {
    color: var(--red-color);
}
.user-profile-detail .user-profile .profile .info {
    display: flex;
    align-items: flex-start;
}
.user-profile-detail .user-profile .profile .info dl {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    line-height: 1.6em;
    font-size: var(--font-size-n);
}
.user-profile-detail .user-profile .profile .info dl dt {
    width: 6em;
}
.user-profile-detail .user-profile .profile .info dl dd {
    width: calc(100% - 8em);
}
.user-profile-detail .user-profile .btn {
    width: 180px;
}
.user-introduction {
    padding: 20px;
}
.user-introduction .title {
    line-height: 1.75em;
    color: var(--main-color);
    font-size: var(--font-size-m);
    font-weight: 500;
}
.user-introduction p {
    line-height: 1.75em;
    font-size: var(--font-size-n);
}
.user-introduction p:not(:last-of-type) {
    margin-bottom: 0.5em;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    .user-profile-detail {
        padding-bottom: 12.5vw;
    }
    .user-profile-detail .user-profile {
        display: block;
        padding: 6.25vw 3.125vw;
    }
    .user-profile-detail .user-profile .fig {
        width: 46.875vw;
        margin: 0 auto 6.25vw;
    }
    .user-profile-detail .user-profile .profile {
        width: 100%;
    }
    .user-profile-detail .user-profile .profile .name {
        text-align: center;
    }
    .user-profile-detail .user-profile .btn {
        width: 100%;
        margin-top: 6.25vw;
    }
    .user-introduction {
        padding: 3.125vw;
    }
}


/* point-buy
---------------------------------------------------*/
.purchase-list .purchase {
    display: flex;
    align-items: center;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--gray-color);
    padding: 20px;
}
.purchase-list .purchase:first-of-type {
    border-top: 1px solid var(--gray-color);
}
.purchase-list .purchase .fig {
    width: 120px;
    aspect-ratio: 1 / 1;
    margin-right: 20px;
}
.purchase-list .purchase .fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.purchase-list .purchase .payment {
    width: calc(100% - 300px);
}
.purchase-list .purchase .payment .name {
    line-height: 1.4em;
    color: var(--secondary-color);
    font-size: var(--font-size-n);
    font-weight: 500;
    margin-bottom: 0.5em;
}
.purchase-list .purchase .payment .txt {
    line-height: 1.4em;
    font-size: var(--font-size-s);
    margin-bottom: 0.5em;
}
.purchase-list .purchase .btn {
    width: 160px;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    .purchase-list .purchase {
        flex-wrap: wrap;
        padding: 6.25vw 3.125vw;
    }
    .purchase-list .purchase .fig {
        width: 31.25vw;
        margin-right: 3.125vw;
    }
    .purchase-list .purchase .payment {
        width: calc(100% - 34.375vw);
    }
    .purchase-list .purchase .btn {
        width: 100%;
        margin-top: 3.125vw;
    }
}

/* point-buy-detail
---------------------------------------------------*/
.purchase-detail {
    padding-bottom: 40px;
}
.purchase-detail .purchase {
    display: flex;
    align-items: center;
    background-color: var(--white-color);
    border-bottom: 1px solid var(--gray-color);
    padding: 20px;
}
.purchase-detail .purchase:first-of-type {
    border-top: 1px solid var(--gray-color);
}
.purchase-detail .purchase .fig {
    width: 240px;
    aspect-ratio: 1 / 1;
    margin-right: 20px;
}
.purchase-detail .purchase .fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.purchase-detail .purchase .payment {
    width: calc(100% - 440px);
}
.purchase-detail .purchase .payment .name {
    line-height: 1.4em;
    color: var(--secondary-color);
    font-size: var(--font-size-m);
    font-weight: 500;
    margin-bottom: 0.5em;
}
.purchase-detail .purchase .payment .txt {
    line-height: 1.4em;
    font-size: var(--font-size-n);
    margin-bottom: 0.5em;
}
.purchase-detail .purchase .btn {
    width: 180px;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    .purchase-detail {
        padding-bottom: 12.5vw;
    }
    .purchase-detail .purchase {
        display: block;
        padding: 6.25vw 3.125vw;
    }
    .purchase-detail .purchase .fig {
        width: 46.875vw;
        margin: 0 auto 6.25vw;
    }
    .purchase-detail .purchase .payment {
        width: 100%;
    }
    .purchase-detail .purchase .payment .name {
        text-align: center;
    }
    .purchase-detail .purchase .btn {
        width: 100%;
        margin-top: 6.25vw;
    }
}