@charset "UTF-8";

@keyframes attention-color {
    0% {
        color: transparent;
        opacity: 0;
    }
    25% { /* 1拍目：パッ */
        color: #ffffff;
        opacity: 1;
    }
    45% { /* 中間：一瞬消える */
        color: transparent;
        opacity: 0;
    }
    65% { /* 2拍目：パッ */
        color: #ffffff;
        opacity: 1;
    }
    100% { /* 最終：表示維持 */
        color: #ffffff;
        opacity: 1;
    }}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async-shoptop, .modal.fix.async, .modal.fix.async2) .inner.async-shop {
    margin-top: auto;
    max-height: none;
    min-width: 300px;
    max-width: calc(100vw - 30px);
    width: 100%;
    height: calc(100dvh - 20px);
    border: 1px solid var(--col1-40);
    @media (min-width: 800px) {
        min-width: unset;
        max-width: 600px;
    }
    > .head-line {
        top: 0;
        display: flex;
        position: sticky;
        z-index: 1;
        border-bottom: 1px dotted #000;
    }
    > .head-line > :is(button.close, button.return-to) {
        width: 48px;
        height: 48px;
        background: var(--col4-50);
        font-size: 3rem;
        padding: 8px;
        border-radius: 5px 0 0 0;
    }
    
    > .head-line > button.phone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        font-size: 1.6rem;
        width: 10%;
        flex-grow: 1;
        margin-inline: auto;
        border-radius: 0 5px 0 0;
        background: hsl(144.6, 94%, 40%);
        color: var(--col-link);
        color: #fff;
        animation: attention-color 0.5s ease-in-out 0.3s 1 forwards;
        color: transparent;
        opacity: 0;
    }
    > .head-line > button.phone *[class*=material-] {
        font-size: 3rem;
    }
    > .head-line > button .label-wrap {
        display: flex ;
        flex-direction: column;
        gap: 6px;
    }
    > .head-line > button .label-wrap * {
        line-height: 1;
        font-size: 1.2rem;
        color: #000;
    }
    > .head-line > button .label-wrap .main {
        color: #fff;
        font-size: 1.6rem;
    }
    .subject {
        margin-top: 0;
        font-weight: bold;
        text-align: center;
    }
}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async-shoptop, .modal.fix.async, .modal.fix.async2) .inner.async-shop .shop_info {
    padding-inline: 8px;
    display: flex;
    flex-direction: column;
    > div {
        padding: 4px 8px;
        display: flex;
        gap: 4px;
        background: var(--colgray-90);
    }
    > div:nth-of-type(even) {
        background: var(--colgray-95);
    }
    button {
        background: var(--colgray-90);
    }
    > div dt {
        width: 50%;
        max-width: 100px;
    }
}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async-shoptop, .modal.fix.async, .modal.fix.async2) .inner.async-shop.top {
    .section-label {
        font-size: 1.6rem;
        color: var(--col1-50);
        font-weight: bold;
        text-align: center;
        padding-inline: 8px;
    }
    button.modal-to {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.6rem;
        height: 48px;
        min-width: 250px;
        margin: 16px auto 0;
        border-radius: 5px;
        border: 1px dotted var(--col-link);
        background: #fff;
        padding-inline: 16px;
        color: var(--col-link);
    }
    button.modal-to *[class*=material-] {
        font-size: 2.5rem;
        background: var(--col-link);
        color: #fff;
        width: 30px;
        height: 30px;
        text-align: center;
        align-content: center;
        border-radius: 50%;
    }
}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async-shoptop, .modal.fix.async, .modal.fix.async2) .inner.async-shop.top .news {
	> ul {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
	}
    > ul li:not(.news-detail) {
        width: 100%;
    }
    > ul li:not(.news-detail) button {
        display: flex;
        gap: 8px;
        width: 100%;
        padding: 4px 8px;
        border: 1px solid var(--col1-50);
        border-radius: 5px;
        background: #fff;
    }
    > ul li:not(.news-detail) button .photo {
        width: 100px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    > ul li:not(.news-detail) button .photo img {
        width: 100%;
    }
    > ul li:not(.news-detail) button .info {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: calc(100% - 108px);
    }
    > ul li:not(.news-detail) button .info * {
        text-align: left;
        font-size: 1.4rem;
    }
    > ul li:not(.news-detail) button .info .subject {
        font-size: 1.6rem;
        font-weight: bold;
        color: var(--col-link);
    }
    > .news-detail .inner {
        padding: 8px;
    }
    > .news-detail .inner img {
        width: 100%;
    }
    > .news-detail button.close:last-of-type > *[class*=material-symbols] {
        left: calc(100% - 60px);
    }
}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async-shoptop, .modal.fix.async, .modal.fix.async2) :is(.inner.async-shop.discount .datas, .inner.async-shop.top .discount .datas) {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 8px;
    margin-top: 8px;
    padding-inline: 8px;
    .data {
        flex-shrink: 1;
        position: relative;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        border: 2px solid red;
        background: var(--col4-90);
        padding: 8px;
        width: 100%;
        border-radius: 5px;
        @media (min-width: 800px) {
            width: calc((100% - 8px) / 2);
        }
        * {
            font-size: 1.4rem;
        }
    }
    .data dt {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        font-weight: bold;
        background: var(--col4-60);
        font-size: 1.6rem;
        padding: 4px 8px;
        border-radius: 5px;
    }
    .data dt .ticket-num {
        position: absolute;
        top: -10px;
        left: 10px;
        padding: 2px 8px;
        background: red;
        border-radius: 5px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-weight: bold;
        border: 1px solid #fff;
    }
    .data dd {
        background: #fff;
        padding: 4px 8px;
        width: 100%;
        border: 1px dotted #999;
        border-radius: 5px;
    }
    .data dd.detail .from {
        text-decoration: line-through;
        color: #666;
    }
    .data dd.detail .to {
        color: red;
    }
    .data dd.calc {
        padding-block: 8px;
        background: red;
        font-weight: bold;
        color: #fff;
        font-size: 1.6rem;
        border-color: red;
        * {
            font-size: 1.6rem;
        }
    }
    .data dd.note {
        font-size: 1.2rem;
        max-height: 100px;
        overflow-y: auto;
    }    
}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async-shoptop, .modal.fix.async, .modal.fix.async2) :is(.inner.async-shop.price, .inner.async-shop.top) {
    .p-inner {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    article {
        width: calc(100% - 8px);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 1px dotted #999;
        border-radius: 5px;
        padding-bottom: 8px;
    }
    article .subject {
        text-align: left;
        width: 100%;
        color: var(--col1-50);
        font-size: 1.6rem;
        line-height: 1;
        padding: 4px 8px;
    }
    article > *:not(.subject) {
        padding-inline: 8px;
        * {
            font-size: 1.4rem;
        }
    }
    article dl {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    article dl div {
        display: flex;
        gap: 8px;
        border: 1px solid #666;
        padding: 4px 8px;
        border-radius: 5px;
        width: 100%;
        @media (min-width: 800px) {
            width: calc((100% - 8px) / 2);
        }
    }
    article dl div dt {
        font-weight: bold;
    }
    article .note {
        font-size: 1.2rem;
    }
}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async-shoptop, .modal.fix.async, .modal.fix.async2) :is(.inner.async-shop.girls .datas, .inner.async-shop.top .girls .datas) {
    width: calc(100% - 16px);
    display: flex;
    flex-wrap: wrap;
    gap: 16px 8px;
    margin: 16px auto;
    .data {
        width: calc((100% - 8px) / 2);
        position: relative;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--col1-70);
        * {
            line-height: 1;
        }
        @media (min-width: 800px) {
            width: calc((100% - 24px) / 4);
        }
    }
    .data > :not(.photo) {
        order: 1;
    }
	.data .photo {
        order: 0;
        aspect-ratio: 1 / 1;
		overflow: hidden;
	}
    .data .photo.no-image {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border: 1px dotted #999;
        background: var(--colgray-95);
    }
	.data .photo img {
		width: 100%;
        object-fit: cover;
	}
    .data .photo *[class*=material-] {
        font-size: 5rem;
        color: #ccc;
    }
    .data .photo.no-image::after {
        content: "No Image";
        width: 100%;
        font-size: 1.2rem;
        text-align: center;
        color: #999;
    }
    .data .name {
        padding: 8px;
        font-size: 1.4rem;
        font-weight: bold;
    }
    .data .labels {
        display: flex;
        position: absolute;
        top: -10px;
        right: 0;
        > * {
            border-radius: 5px;
            padding: 4px 8px;
            border: 1px solid #fff;
            font-size: 1.3rem;
        }
        > .age {
            background: var(--col4-50);
            color: #000;
        }
        > .bust {
            background: var(--col1-50);
            color: #fff;
        }
    }

    .data :is(.schedule, .wait) {
        font-weight: bold;
        font-size: 1.4rem;
        padding: 4px 16px;
        border-bottom: 1px dotted #999;
    }
    .data .schedule {
        background: var(--col4-60);
    }
    .data .wait {
        background: var(--col3-60);
        color: #fff;
    }
    .data .wait .status {
        position: absolute;
        top: -15px;
        left: 0;
        aspect-ratio: 1 / 1;
        width: 30px;
        background: red;
        border: 1px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
    }
    .data button.profile-open {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 2px 8px;
        font-size: 1.4rem;
        font-weight: bold;
        border-block: 1px dotted var(--colgray-60);
        color: #fff;
        background: red;
    }
    .data button.profile-open::before {
        content: "詳細を開く";
    }
    .data button.profile-open *[class*=material-] {
        font-size: 2rem;
        padding: 1.8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background: #fff;
        color: red;
        border-radius: 50%;
    }
}

body:is(.find.shops, .shop.info, .member) .modal.fix .center-wrap.cast {
    .inner {
        padding-block: 0 16px;
        display: grid;
        grid-template-columns: 100%;
        align-content: start; 
        
        gap: 8px;
        overflow-y: auto;
        border: none;
        border-radius: 5px;
    }
}
body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async, .modal.fix.async2) .inner.async-shop.cast {
    > figure.photos {
        padding: 16px 0 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 300px; 
        gap: 4px;

        width: 100%;
        overflow-x: auto;
        overflow-y: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        height: 420px; 
        align-items: start;

        > span {
            display: flex;
            width: 300px;
            height: 400px;
            aspect-ratio: 3 / 4;
            border-radius: 5px;
            overflow: hidden;
            background: var(--col1-95);
            border: 1px dotted var(--col1-50);
            align-items: center;
            justify-content: center;
        }
        > span img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        > *[class*=material-] {
            font-size: 4rem !important;
            color: var(--col1-50);
        }

    }
    .cast-info {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-inline: 8px;
        > h2 {
            background: var(--col1-50);
            color: #fff;
            line-height: 1;
            font-size: 1.8rem;
            padding: 8px;
            border-radius: 5px;
        }


        :is(.styles-wrap, .itv, .message) {
            border-radius: 5px 5px 0 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border: 1px solid var(--col1-70);
            border-radius: 5px;
        }
        :is(.styles-wrap, .itv, .message) > .label {
            font-size: 1.6rem;
            color: var(--col1-50);
            padding: 8px;
        }
        > .styles-wrap > .label {
            background: var(--col1-95);
            border-bottom: 1px  solid var(--col1-50);
        }
        > .styles-wrap .datas {
            padding: 8px;
            gap: 16px;
            display: flex;
            flex-wrap: wrap;
        }
        > .styles-wrap .datas .item {
            display: flex;
            gap: 8px;
        }
        > .styles-wrap .datas .item * {
            font-size: 1.6rem;
        }

        > div.wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        > div.wrap > * {
            width: 100%;
            @media (min-width: 700px) {
                width: calc((100% - 16px) / 2);
            }
        }

        > div.wrap .message {
            flex-grow: 1;
        }

        > div.wrap .message > .label {
            background: var(--col1-50);
            color: #fff;
        }

        > div.wrap .message .body {
            width: calc(100% - 16px);
            margin: 8px auto;
            font-size: 1.4rem;
            max-height: 300px;
            overflow-y: auto;
        }
        > div.wrap .itv > .label {
            background: var(--col3-50);
            color: #fff;
        }
        > div.wrap .itv {
            border-color: var(--col3-50);
        }
        > div.wrap .itv .datas {
            max-height: 300px;
            overflow-y: auto;
            width: calc(100% - 16px);
            margin: 8px auto;
            * {
                font-size: 1.4rem;
            }
        }
        > div.wrap .itv .datas .item {
            padding: 4px 8px;
            display: flex;
            flex-direction: column;
            background: var(--col3-95);
        }
        > div.wrap .itv .datas .item:nth-of-type(even) {
            background: var(--col3-90);
        }
        > div.wrap .itv .datas .item .label {
            font-weight: bold;
        }
    }
    .schedule-info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-inline: 8px;
        > .label {
            font-size: 1.6rem;
            color: #fff;
            background: var(--col5-50);
            padding: 8px;
            border-radius: 5px;
        }
        .datas {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .datas .data {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--col5-50);
            border-top-width: 2px;
            width: calc((100% - 12px) / 3);
            * {
                font-size: 1.6rem;
            }
        }
        .datas .data > * {
            padding: 4px 8px;
        }
        .datas .data > .label {
            border-bottom: 1px dotted var(--col5-50);
            font-weight: bold;
        }
        .datas .data > .label.sun {
            color: red;
        }
        .datas .data > .label.sat {
            color: blue;
        }
        .datas .data > .info.un-registered {
            color: #999;
        }
    }
    .btns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-inline: 8px;
        button {
            width: 100%;
            font-size: 2rem;
            padding: 8px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: bold;
            color: #fff;
        }
        button > *[class*=material-] {
            font-size: 4rem;
        }
        button.phone {
            background: red;
        }
        button.price {
            background: blue;
        }
    }
}

body:is(.find.shops, .shop.info, .member) :is(.modal.fix.async, .modal.fix.async2) .inner.async-shop.async-offcial {
    width: 100%;
    height: 100%;
    padding: 0;
    min-width: none;
    max-width: none;
    flex-shrink: 1;
    @media (min-width: 800px) {
        max-width: none;
    }
    > .head-line > button.return-to {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 96px;
        font-size: 1.4rem;
        background: #000;
        color: #fff;
        align-content: center;
        line-height: 1.2;
        border-radius: 0;
    }
    > .head-line > button.phone {
        width: calc(100% - 96px);
        flex-grow: 0;
    }
    /*
    > .head-line {
        background: #000;
        justify-content: baseline;
        gap: 8px;
        border-radius: 0;
        padding-inline: 8px;
    }
    > .head-line > button.phone {
        flex-grow: 1;
        width: 300px;
        font-size: 2rem;
        padding: 8px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: bold;
        color: #fff;
        background: red;
        margin-block: 4px;
    }

    > .head-line > button.phone  > *[class*=material-] {
        font-size: 3.5rem;
    }
    */
    iframe {
        flex-grow: 1;
    }
}