@charset "utf-8";
/* ------------------------------------------------------
 *  女性詳細画面個別CSS 全般
 * ------------------------------------------------------ */

@import "../common.css?v2";
@import "../common_pc.css";
@import "../components/circle_btn.css";
@import "../components/see_more_box.css";
@import "../components/bxslider_custom.css";
@import "../components/video.css";
@import "./favorite_nologin_popup.css";
@import "../components/diary.css";

html {
  scroll-padding-top: 188px;
}
.companion-detail {
    --companion-detail-border-style: solid 1px #ababab;
}

.companion-detail > *:not(.sp-container .pc-container),
.companion-detail > .sp-container > *,
.companion-detail > .pc-container > * {
    margin-bottom: var(--outer-padding);
}

.companion-detail > *:not(.sp-container .pc-container):last-child {
    margin-bottom: 0;
}

.companion-detail > *:not(.sp-container .pc-container) > *,
.companion-detail > .sp-container > * > *,
.companion-detail > .pc-container > * > * {
    margin-bottom: 1.5rem;
}

.companion-detail .section-title {
    padding: 0.75rem 1rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
}

/* 半円の境界でbox-shadowの要素 */
.companion-detail .semicircle-border-box {
    background-color: #fff;
    color: #000;
    border: var(--companion-detail-border-style);
}

.companion-detail .column-2-container {
    justify-content: center;
}

.companion-detail .column-2-container > *:last-child {
    margin-left: 1.5rem;
}

.companion-detail .tab-wrapper {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.companion-detail .tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
}

.companion-detail .tab {
    display: grid;
    place-items: center;
    padding: 0px 15px;
    font-weight: bold;
    border-radius: 17px;
    margin: 0 5px;
    white-space: nowrap;
    position: relative;
    background-color: #f2f2f2;
    color: #333;
    width: 100%;
    height: 50px;
    cursor: pointer;
}

.companion-detail .tab.active {
    background: linear-gradient(to right, #f5538d, #5476ff);
    color: #fff;
}

.companion-detail .tab-underline {
    width: 100%;
    height: 2px;
}

.companion-detail .tab-underline.hide {
    display: none;
}

.companion-detail .tab-underline.left {
    background: linear-gradient(to right, #f5538d, #5476ff 50%, #ccc 50%);
}

.companion-detail .tab-underline.right {
    background: linear-gradient(to right, #ccc 50%, #f5538d 50%, #5476ff 100%);
}

.companion-detail .tab-content.hide {
    display: none;
}

/* ------------------------------------------------------
 *  プロフィールの欄
 * ------------------------------------------------------ */

.cmpanion-img-list img {
    width: 100%;
}

.companion-name-container {
    position: relative;
    display: flex;
    align-items: center;
}

.companion-name-container .sns-x-btn {
    position: absolute;
    right: 0;
    top: 0;
}

.companion-name-container .sns-x-btn img {
    width: 100%;
    height: 100%;
}

.companion-detail .companion-attendance-box {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    margin-top: 0.25rem;
    border: var(--companion-detail-border-style);
    border-radius: 0.25rem;
    background: linear-gradient(to bottom, #fff, #dfdfdf);
}

.companion-detail .companion-attendance-box > *:last-child {
    margin-left: 2rem;
}

.companion-detail .semicircle-border-box.additional-info > * {
    /* 文字列の折り返し回避 */
    margin-left: -1em;
    margin-right: -1em;
}

.companion-detail-btn-row {
    display: flex;
    justify-content: center;
    column-gap: var(--size-80);
}

.companion-detail-btn {
    background-color: #fff;
    color: #000;
    border: var(--companion-detail-border-style);
}

.companion-detail-btn:disabled {
    opacity: 33%;
}

.companion-detail-btn.favorite-btn img {
    height: var(--size-32);
}

/* .semicircle-edge-btn > img のオーバーライド */

.semicircle-border-box.semicircle-edge-btn > img {
    height: var(--size-64);
}

/* ------------------------------------------------------
 *  条件等が表示されている部分
 * ------------------------------------------------------ */

.additional-info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--size-20);
    row-gap: var(--size-20);
}

/* ------------------------------------------------------
 *  出勤情報
 * ------------------------------------------------------ */

.companion-attendance-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    border-bottom: var(--companion-detail-border-style);
    border-right: var(--companion-detail-border-style);
}

.companion-attendance-grid:first-child {
    border-top: var(--companion-detail-border-style);
}

.companion-attendance-grid > * {
    border-left: var(--companion-detail-border-style);
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.companion-attendance-grid .pc-container {
    display: none;
}

.companion-attendance-grid .date-col {
    background-color: #e6e6e6;
}

.companion-attendance-grid .saturday {
    color: #179BF0;
}

.companion-attendance-grid .sunday {
    color: #fe0200;
}

.companion-attendance-grid .reserve-ok,
.companion-attendance-grid .reserve-request,
.companion-attendance-grid .reserve-reception-end {
    width: 70%;
}

.companion-attendance-grid .reserve-ok {
    color: #fff;
    background-color: #e61a25;
}

.companion-attendance-grid .reserve-request {
    color: #fff;
    background-color: #ff7200;
}

.companion-attendance-grid .reserve-reception-end {
    color: #000;
    background-color: #c2c2c2;
}

/* ------------------------------------------------------
 *  コメント/メッセージ
 * ------------------------------------------------------ */

.companion-detail .comment-section .text-m {
    line-height: 1.5em;
}

/* ------------------------------------------------------
 *  Q&A
 * ------------------------------------------------------ */

.companion-detail .qa-section dl > div {
    display: flex;
}

.companion-detail .qa-section dl > div:last-child {
    border-bottom: var(--companion-detail-border-style);
}

.companion-detail .qa-section dt,
.companion-detail .qa-section dd {
    border-left: var(--companion-detail-border-style);
    border-top: var(--companion-detail-border-style);
    border-collapse: collapse;
}

.companion-detail .qa-section dt {
    padding: 1rem 0.38rem;
    width: 40%;
}

.companion-detail .qa-section dd {
    border-right: var(--companion-detail-border-style);
    /* 文字中央寄せ */
    display: flex;
    align-items: center;
    width: 60%;
    padding: 1.3em 1rem;
    font-weight: normal;
}

.companion-detail .qa-answer::before {
    content: "A";
    color: #f00;
    margin-right: 1em;
    font-weight: 700;
}

/* ------------------------------------------------------
 *  写メ日記
 * ------------------------------------------------------ */

.companion-detail .photo-dialy-list li {
    display: flex;
    border-top: var(--companion-detail-border-style);
    border-left: var(--companion-detail-border-style);
    border-right: var(--companion-detail-border-style);
    line-height: 2em;
}

.companion-detail .photo-dialy-list li > * {
    margin: 0.5rem 0.38rem;
}

.companion-detail .photo-dialy-thumbnail {
    width: 30%;
}

.companion-detail .photo-dialy-thumbnail img {
    width: 100%;
}

.companion-detail .photo-dialy-list h3 {
    margin: 0.25rem 0;
}

/* ------------------------------------------------------
 *  オプション名
 * ------------------------------------------------------ */

.companion-detail .option-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.38rem;
    row-gap: 1.5rem;
    padding: 1.5rem 0.38rem;
    border: var(--companion-detail-border-style);
}

.companion-detail .option-name {
    color: #046ebc;
    padding: 1.5rem 0;
    border: solid 2px #ababab;
    border-radius: 0.5rem;
    text-align: center;
}

/* ------------------------------------------------------
 *  個人イベント
 * ------------------------------------------------------ */

.companion-detail .additional-info-list-detail {
    display: grid;
    padding: 1.5rem 0.38rem;
    row-gap: 1rem;
}

.companion-detail .additional-info-list-detail li::before {
    content: "・";
}

/* ------------------------------------------------------
 *  コスプレ・個人アイテム
 * ------------------------------------------------------ */

.companion-detail .individual-item-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 1rem 0;
    row-gap: 3rem;
    column-gap: 3rem;
    text-align: center;
}

.companion-detail .individual-item-list .individual-item-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.companion-detail .individual-item-list .individual-item-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------
 *  口コミ
 * ------------------------------------------------------ */


.companion-detail .review-list-item {
    background-color: #f7f7f7;
    margin: 2rem 0;
}

.companion-detail .review-list-item > * {
    padding: 1rem;
}

.companion-detail .review-list-item .reviewer-container {
    border-bottom: var(--companion-detail-border-style);
    display: flex;
    align-items: center;
    padding: var(--size-20);

    --avater-size: var(--size-60);
}

.reviewer-container .avatar {
    margin-right: 1rem;
}

.companion-detail .review-list-item .review-star-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    align-items: center;
}

.companion-detail .review-list-item .review-stars,
.companion-detail .review-list-item .review-value {
    color: #e70015;
    margin-right: 2rem;
}

.review-star-container .reviewer-before-reserved-way {
    border: solid 1px #e70015;
    color: #e70015;
    background-color: transparent;
}

.review-contents-container h3 {
    margin-bottom: 0.8rem;
}

.review-contents-container p {
    line-height: 1.5em;
}

.companion-detail .view-all > * {
    padding-bottom: 1rem;
    padding-right: 1rem;
    text-align: right;
}

.companion-detail .view-all > *::before {
    content: ">";
    margin-right: 0.25rem;
}

/* ------------------------------------------------------
 *  pc用スタイル
 * ------------------------------------------------------ */

@media screen and (min-width: 1024px) {
    /* ------------------------------------------------------
     *  全般
     * ------------------------------------------------------ */

    html {
      scroll-padding-top: 150px;
    }
    .companion-detail .tabs {
        width: 1024px;
    }

    .companion-detail .tab {
        width: 333px;
    }

    /* ------------------------------------------------------
     *  プロフィールの部分
     * ------------------------------------------------------ */

    .companion-profile > .column-2-container {
        margin: 0 1.5rem;
    }

    .companion-detail-btn-row {
        justify-content: center;
        column-gap: 2rem;
    }

    .companion-detail-btn-calender img {
        width: var(--size-22);
        height: var(--size-22);
        margin-right: var(--size-10);
    }
    .companion-detail-btn-message img {
        width: var(--size-20);
        height: var(--size-16);
        margin-right: var(--size-10);
    }
    .companion-detail-btn.companion-detail-btn-fav span {
        margin-right: var(--size-10);
    }
    .companion-detail-btn.companion-detail-btn-fav img {
        height: var(--size-24);
    }

    .companion-detail .companion-movie > h2 {
        margin-bottom: 1.5rem;
    }

    .additional-info-list {
        row-gap: var(--size-16);
        column-gap: var(--size-16);
    }

    /* ------------------------------------------------------
     *  出勤の部分
     * ------------------------------------------------------ */

    .companion-attendance-grid-container {
        display: flex;
    }

    .companion-attendance-grid {
        display: block;
        width: calc(100% / 7);
    }

    .companion-attendance-grid:not(:first-child) {
        border-top: var(--companion-detail-border-style);
        border-bottom: var(--companion-detail-border-style);
        border-right: var(--companion-detail-border-style);
        border-left: none;
    }

    .companion-attendance-grid:first-child {
        border-left: var(--companion-detail-border-style);
    }

    .companion-attendance-grid .sp-container {
        display: none;
    }

    .companion-attendance-grid .pc-container {
        display: flex;
    }

    .companion-attendance-grid > * {
        border: none;
    }

    .companion-attendance-grid > p {
        height: 3.5rem;
    }

    .companion-attendance-grid > div {
        height: 4rem;
    }

    .companion-attendance-grid .date-col {
        height: 2.5rem;
        border-bottom: var(--companion-detail-border-style);
    }

    .text-size-20 .companion-attendance-grid {
        font-size: 16px;
    }

    /* ------------------------------------------------------
     *  店長のコメント、メッセージ欄
     * ------------------------------------------------------ */

    .comment-section .text-size-22 {
        font-size: 18px;
    }

    /* ------------------------------------------------------
     *  Q & A
     * ------------------------------------------------------ */

    .companion-detail .qa-section dt,
    .companion-detail .qa-section dd {
        padding: 0.75rem;
    }

    .companion-detail .qa-section dt {
        width: 370px;
    }

    .companion-detail .qa-section dd {
        width: calc(100% - 370px);
    }

    .companion-detail .qa-section dl.text-size-24 {
        font-size: 20px;
    }

    /* ------------------------------------------------------
     *  写メ日記
     * ------------------------------------------------------ */

    .companion-detail .photo-dialy-thumbnail {
        width: 190px;
    }

    /* ------------------------------------------------------
     *  オプション
     * ------------------------------------------------------ */

    .companion-detail .option-container {
        display: flex;
        column-gap: 0.38rem;
        row-gap: 1.5rem;
        padding: 1.5rem 0.38rem;
        border: var(--companion-detail-border-style);
    }

    .companion-detail .option-container > * {
        width: 310px;
    }

    /* ------------------------------------------------------
     *  可能プレイ
     * ------------------------------------------------------ */

    .companion-detail .enable-play-list {
        grid-template-columns: 1fr 1fr 1fr;
    }

    @media screen and (min-width: 1350px) {
        .companion-detail .enable-play-list {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }

    /* ------------------------------------------------------
     *  コスプレ・個人アイテム
     * ------------------------------------------------------ */

    .companion-detail .individual-item-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 1rem 0;
        row-gap: 3rem;
        column-gap: 3rem;
        text-align: center;
    }

    .companion-detail .individual-item-list > * {
        width: 190px;
    }

    /* ------------------------------------------------------
     *  口コミ
     * ------------------------------------------------------ */

    .companion-detail .review-value-details {
        display: flex;
        column-gap: 1.5rem;
        width: 100%;
        color: rgba(0, 0, 0, 0.3);
    }

    .companion-detail .review-companion {
        display: flex;
        column-gap: 1.25rem;
    }

    .companion-detail .review-companion-info {
        padding: 0.5rem 0;
    }

    .companion-detail .review-companion-info > *:not(:last-child) {
        margin-bottom: 1rem;
    }

    .companion-detail .review-companion-thumnail {
        width: 100px;
        height: 100px;
    }

    .companion-detail .review-companion-thumnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
}