@charset "UTF-8";

.therapist.list.data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    .data {
        width: calc((100% - 32px) / 5);
        display: flex;
        flex-direction: column;
        gap: 4px;
        @media (max-width: 900px) {
            width: calc((100% - 24px) / 4);
        }
        @media (max-width: 650px) {
            width: calc((100% - 16px) / 3);
        }
        @media (max-width: 500px) {
            width: calc((100% - 8px) / 2);
        }
    }
    .data * {
        color: #fff;
        text-align: center;
    }
    .data img {
        width: 100%;
    }
    .data :is(.schedule, .room, .newface) {
        line-height: 1;
        padding: 4px;
    }
    .data .schedule {
        background: var(--col2-20);
    }
    .data .room {
        background: var(--col2-20);
    }
    .data .newface {
        background: var(--col2-40);
    }
    .data .info {
        border: 1px dotted #fff;
        padding: 4px;
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        min-height: 100px;
        align-items: flex-start;
        align-content: flex-start;
    }
    .data .info :is(.name, .style) {
        width: 100%;
    }
    .data .info .badge {
        width: calc((100% - 2px) / 2);
        background: var(--cast-categories-unit);
    }
}

body.therapist.profile .info-wrap {
    display: flex;
    gap: 70px;
    margin-top: 30px;
    @media (max-width: 800px) {
        margin-top: 20px;
        gap: 16px;
        margin-top: 20px;
    }
    @media (max-width: 650px) {
        flex-direction: column;
    }
    > * {
        width: calc((100% - 50px) / 2);
        @media (max-width: 650px) {
            width: 100%;
        }
    }
    > .info {
        order: 1;
    }
}

body.therapist.profile .info-wrap .photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    img {
        width: 100%;
    }
    .photo {
        width: 100%;
    }
    button {
        border: none;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        padding: 0;
        width: calc(100% / 5);
    }
}

body.therapist.profile .info-wrap .info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 10%;
    flex-grow: 1;
    @media (max-width: 650px) {
        width: 100%;
    }
    * {
        color: #fff;
        font-size: 1.6rem;
    }
    h1, h1 * {
        font-weight: normal;
        font-size: 2.5rem;
        @media (max-width: 700px) {
            font-size: 2rem;
        }
    }
    .style.sns {
        display: flex;
        gap: 16px;
    }

    .style.sns .sns {
        display: flex;
        gap: 8px;
    }

    .style.sns .sns .data.photo {
        width: 40px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 8px;
    }

    .style.sns .sns .data.photo img {
        width: 100%;
    }

    .categories {
        display: flex;
        gap: 2px;
    }
    .categories .unit {
        width: calc((100% - 6px) / 4);
        background: var(--cast-categories-unit);
        line-height: 1;
        padding: 4px;
        text-align: center;
        font-size: 1.4rem;
    }

    .messages {
        height: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex-grow: 1;
        @media (max-width: 650px) {
            height: auto;
        }
    }
    .messages > div {
        height: calc((100% - 16px) / 2);
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .messages > div .label {
        line-height: 1;
    }
    .messages > div .body {
        padding: 8px;
        border: 1px dotted #fff;
        height: calc(100% - 18px);
        overflow-y: auto;
        @media (max-width: 650px) {
            height: 250px;
        }
    }
    .messages > div.from-self .body {
        border-color: var(--col2-50);
    }
}

body.therapist.profile .schedule {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    dl {
        display: flex;
        gap: 0;
        border: #f2dc93 1px solid;
        @media (max-width: 650px) {
            flex-wrap: wrap;
        }
        > div {
            width: calc(100% / 7);
            display: flex;
            flex-direction: column;
            gap: 4px;
            border-right: 1px #f2dc93 solid;
            @media (max-width: 650px) {
                width: calc(100% / 3);
                border-bottom: 1px #f2dc93 solid;
            }
        }
        > div:last-of-type {
            @media (max-width: 650px) {
                border-bottom: none;
            }
        }
        > div:last-of-type {
            @media (min-width: 650px) {
                border-right: none;
            }
        }
        > div > * {
            font-size: 1.2rem;
            padding: 4px;
            line-height: 1;
            color: #fff;
            text-align: center;
        }
        > div dt {
            padding-block: 8px;
            background: #61511D;
            border-bottom: 1px solid #f2dc93;
        }
        > div:first-of-type dt {
            background: #f2dc93;
            color: #000;
        }
    }
}

body.therapist.profile #review {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    .total {
        line-height: 1;
        padding-block: 16px;
        font-size: 1.8rem;
        color: #fff;
        @media (max-width: 700px) {
            font-size: 1.6rem;
        }
    }
    dl {
        display: flex;
        flex-direction: column;
        gap: 16px;
        > div {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border: 1px #fff dotted;
            padding: 8px;
        }
        > div * {
            color: #fff;
            font-size: 1.4rem;
        }
        > div dt {
            font-size: 1.8rem;
            @media (max-width: 700px) {
                font-size: 1.6rem;
            }
        }
        > div .body {
            margin-block: 16px;
            @media (max-width: 700px) {
                margin-block: 8px;
            }
        }
        > div :is(.body, .reply) {
            @media (max-width: 700px) {
                font-size: 1.6rem;
            }
        }
        > div .reply::before {
            content: "■ ";
        }
    }
}


body.therapist.profile .review-write {
    max-width: 800px;
    margin-inline: auto;
    width: 100%;
    padding-block: 50px;
    @media (max-width: 800px) {
        padding-block: 30px;
    }
    *:not(input)  {
        color: #fff;
    }
    .subject {
        padding-block: 50px;
        font-size: 2.5rem;
        font-weight: normal;
        text-align: center;
        @media (max-width: 800px) {
            padding-block: 20px;
            font-size: 1.8rem;
        }
    }
    :is(.confirm, .send) {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    :is(.confirm, .send) > div {
        display: flex;
        gap: 24px;
        @media (max-width: 700px) {
            flex-direction: column;
            gap: 8px;
        }
    }
    :is(.confirm, .send) > div .label-wrap {
        width: auto;
        display: flex;
        gap: 8px;
        align-items: baseline;
    }
    :is(.confirm, .send) > div .label-wrap > * {
        flex-grow: 1;
        font-size: 1.6rem;
        @media (max-width: 700px) {
            flex-grow: 0;
            font-size: 1.4rem;
        }
    }
    :is(.confirm, .send) > div .label-wrap > .label {
        min-width: 70px;
        @media (max-width: 700px) {
            min-width: 60px;
        }
    }
    :is(.confirm, .send) > div .label-wrap .reqd {
        text-align: center;
        line-height: 1;
        width: 80px;
        flex-grow: 0;
        background: #A13232;
        border: 1px solid #707070;
        padding: 8px;
        @media (max-width: 700px) {
            padding-block: 4px;
        }
    }
    :is(.confirm, .send) > div .input-item {
        flex-grow: 1;
    }
    :is(.confirm, .send) > div .input-item :is(input, textarea) {
        border-radius: 0;
        color: #000;
    }
    :is(.confirm, .send) > div .input-item textarea {
        min-height: 200px
    }
    :is(.confirm, .send) > div.button {
        display: flex;
        gap: 16px;
        justify-content: center;
        @media (max-width: 700px) {
            flex-direction: row;
            justify-content: center;
            gap: 16px;
        }
    }
    :is(.confirm, .send) > div.button button{
        margin: 0;
        background: #A13232;
        padding: 40px;
        width: calc((100% - 16px) / 3);
        border-radius: 0;
        margin-inline: auto;
        font-size: 1.6rem;
        border: none;
        @media (max-width: 700px) {
            padding: 20px 16px;
            margin-inline: 0;
        }
    }
    :is(.confirm, .send) > div.button button.rewrite {
        background: #999;
    }
}