@charset "UTF-8";

body.find.shops > main > .section-shops > * {
	padding: 16px max(15px, calc((100% - 1000px) / 2));
}

body.find.shops > main > .section-shops > h2.subject {
	font-size: 1.8rem;
    background: #fff;
    color: var(--col1-50);
    padding-block: 0;
    @media (min-width: 700px) {
        font-size: 2rem;
    }
}

body.find.shops > main > .section-shops > .list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	> .info {
		width: 100%;
		padding: 8px;
		border: 1px solid var(--col1-50);
		position: relative;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}

body.find.shops > main > .section-shops > .list > .info.excellent {
	border: 2px solid var(--col4-40);
	background: var(--col4-95);
}

body.find.shops > main > .section-shops > .list .info > * {
	width: 100%;
}

body.find.shops > main > .section-shops > .list .info > .icons {
	position: absolute;
	top: calc(-1rem + -8px);
	right: 8px;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: auto;
	gap: 4px;

	> *[class*=material-symbols] {
		font-size: 2.5rem;
        width: 40px;
        height: 40px;
		color: #fff;
		background: var(--colgray-70);
		padding: 4px;
		margin: 0;
		border-radius: 50%;
        align-content: center;
        text-align: center;
		border: 1px solid var(--colgray-60);
	}
    > *[class*=material-symbols].follow.saved {
        background: var(--col1-50);
        color: #fff;
		border: 1px solid #fff;
    }
    > *[class*=material-symbols].bookmark.saved {
        background: var(--col4-60);
        color: #000;
		border: 1px solid #000;
    }
}

body.find.shops > main > .section-shops > .list .info > .name {
    display: flex;
    gap: 8px;
    *[class*=material-] {
        font-weight: normal;
        font-size: 1.8rem;
    }
    a {
        font-size: 1.6rem;
        color: var(--col-link);
    }

}

body.find.shops > main > .section-shops > .list .info > figure {
    order: 1;
    aspect-ratio: 9 / 4;
    overflow: hidden;
    border-radius: 10px;
    @media (min-width: 700px) {
        aspect-ratio: 15 / 4;
    }
    img {
        width: 100%;
    }
}

body.find.shops > main > .section-shops > .list .info .basis-datas {
	display: flex;
    flex-direction: column;
	gap: 8px;

    > * {
        width: 100%;
    }
    > h4 {
        border-radius: 5px;
        padding: 4px 8px;
        font-size: 1.6rem;
        width: 100%;
        background: var(--col8-45);
        color: #fff;
    }
    > .description {
        font-size: 1.4rem;
    }
    > dl {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
       
    }
    > dl > div:not(.status) {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
		border: 1px solid var(--col8-40);
		border-radius: 5px;
		padding: 4px;
        width: calc((100% - 8px) / 2);
        @media (min-width: 700px) {
            width: auto;
            padding: 4px 8px;
        }
    }
    > dl > div:not(.status) * {
        font-size: 1.3rem;
    }

    > dl > .status {
        display: flex;
        gap: 4px;
        position: absolute;
        top: -8px;
        width: auto;
        > * {
            font-size: 1.2rem;
            color: #fff;
            border-radius: 5px;
            padding-inline: 8px;
        }
        > .area {
            background: var(--col1-50);
        }
        > .excellent {
            background: var(--col4-60);
            color: #000;
            border: 1px solid var(--colgray-40);
        }
    }
}


body.find.shops > main > .section-shops > .list .info > .girls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    > h4 {
        padding: 4px 8px;
        background: var(--col1-50);
        border-radius: 5px;
        color: #fff;
        font-size: 1.6rem;
    }
    > ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto; 
        width: 100%;
        min-width: 0;
    }

    > ul > li {
        width: calc((100% - 28px) / 8);
		min-width: 120px;
        max-width: 180px;
        flex-shrink: 0; 
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    > ul > li .name {
        order: 1;
        font-size: 1.2rem;
    }
    > ul > li .data {
        order: 2;
        font-size: 1.2rem;
    }
	> ul > li .photo {
        order: 0;
        aspect-ratio: 1 / 1;
		overflow: hidden;
	}
    > ul > li .photo.no-image {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border: 1px dotted #999;
        background: var(--colgray-95);
    }
	> ul > li .photo img {
		width: 100%;
        object-fit: cover;
	}
    > ul > li .photo *[class*=material-] {
        font-size: 5rem;
        color: #ccc;
    }
    > ul > li .photo.no-image::after {
        content: "No Image";
        width: 100%;
        font-size: 1.2rem;
        text-align: center;
        color: #999;
    }
}

body.find.shops > main > .section-shops > .list .info .async-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    > h4 {
        background: var(--col1-60);
        border-radius: 5px;
        padding: 4px 8px;
        width: 100%;
        font-size: 1.6rem;
        border: 1px dotted var(--col1-30);
        color: #fff;
    }
    > button {
        flex-grow: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc((100% - 8px) / 2);
        border-radius: 5px;
        font-size: 1.6rem;
        border: 1px dotted var(--col1-50);
        color: #000;
        position: relative;
        padding: 8px;
        background: var(--col1-90);
        @media (min-width: 700px) {
            font-size: 1.8rem;
            width: calc((100% - 24px) / 4);
        }
    }
    > button .label {
        position: absolute;
        top: -10px;
        left: 0;
        background: var(--col4-50);
        color: #000;
        font-weight: bold;
        font-size: 1.2rem;
        border-radius: 5px;
        min-width: 100px;
        text-align: center;
        border: 1px solid #fff;
    }
    > button *[class*=material-] {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        width: 30px;
        background: var(--col1-50);
        border-radius: 50%;
        aspect-ratio: 1 / 1 ;
        color: #fff;
        @media (min-width: 800px) {
            font-size: 3rem;
            width: 40px;
        }
    }
    > button.price::before {
        content: "料金詳細";
    }
    > button.discount::before {
        content: "全ての割引";
    }
    > button.schedule::before {
        content: "出勤一覧";
    }
    > button.girls::before {
        content: "在籍一覧";
    }
}

body.find.shops > main > .section-shops > .list .info .async-btn.async-official {
    > h4 {
        background: var(--col4-60);
        border: 1px dotted var(--col4-30);
        color: #000;
    }
    > button {
        position: relative;
        background: var(--col4-90);
        border: 1px dotted var(--col4-40);
        width: calc((100% - 16px) / 3);
        color: #000;
    }
    > button *[class*=material-] {
        background: #000;
        color: #fff;
    }
    > button::after {
        position: absolute;
        top: -8px;
        left: 0;
        content: "オフィシャル";
        font-size: 1rem;
        background: var(--col4-50);
        padding: 4px 8px;
        line-height: 1;
        border-radius: 5px;
    }
    > button.schedule::before {
        content: "出勤情報";
    }
    > button.newface::before {
        content: "新人情報";
    }
    > button.wait::before {
        content: "待ち時間";
    }
    > button.event::before {
        content: "イベント";
    }
    > button.price::before {
        content: "料金表";
    }
    > button.girls::before {
        content: "在籍一覧";
    }
}

body.find.shops > main > .section-shops > .list .info {
	> .name {
		order: 1;
	}
	> .girls {
		order: 6;
	}

	> .async-btn {
		order: 9;
	}

	> .basis-datas {
		order: 12;
	}
	> .description {
		order: 15;
		font-size: 1.4rem;
	}
}


body.find.shops > main .pager {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
    .details {
        position: relative;
        bottom: 0;
    }
    .details * {
        font-size: 1.6rem;
    }
    .details > button {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 8px 16px;
        border: 1px solid #999;
        border-radius: 5px;
    }
    .details > button *[class*=material-] {
        font-size: 2rem;
    }
    .details .items {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 100%;
        background: #fff;
        border: 1px solid #999;
        max-height: 150px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .details .items.close {
        display: none;
    }
    .details ul {
        display: flex;
        flex-direction: column;
    }
    .details .items ul a {
        display: block;
        width: 100%;
        padding: 4px 8px;
        line-height: 1;
        border-top: 1px dotted #999;
        color: var(--col-link);
    }

    .details .items button.close-to {
        position: sticky;
        top: 0; 
        z-index: 2; /* リストのリンクより上に */
        line-height: 1;
        padding: 4px 8px;
        width: 100%;
        margin: 0 auto 8px;
        background: #000;
        color: #fff;
        border-radius: 10px;
    }
}