@charset "UTF-8";

body.listlayer {
	gap: 0px;
}

body.listlayer > .global.nav {
	width: 100%;
	padding-inline: max(8px, calc((100% - 1000px) / 2));
}

body.listlayer > main {
    gap: 8px;
    padding-top: 16px;
}

body.listlayer > 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;
        background: #fff;
    }
    .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;
    }
}

body.listlayer > main {
    > h1.headline {
        font-size: 2.5rem;
        color: var(--col1-40);
        @media (max-width: 800px) {
            font-size: 2rem;
        }
    }
    > h2.headline {
        font-size: 1.4rem;
        font-weight: normal;
    }
    .type-selector {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .type-selector .group.nav {
        display: flex;
        justify-content: flex-end;
        gap: 16px;
        @media (max-width: 800px) {
    		gap: 8px;
        }
    }
    .type-selector .group.nav :is(button, label) {
		display: flex;
		gap: 4px;
		align-items: center;
		border-radius: 5px;
        padding: 8px 16px;
		line-height: 1;
		color: #000;
		background: #fff;
		border: 1px dotted var(--col-link);
        font-size: 1.6rem;
        @media (max-width: 800px) {
    		padding: 8px;
        }
    }
    .type-selector .group.nav :is(button, label) * {
        font-size: 1.6rem;
        color: var(--col-link);
        @media (max-width: 800px) {
            font-size: 1.4rem;
        }
    }
    .type-selector .group.nav .open {
        margin-right: auto;
    }
    .type-selector .group.type {
        display: flex;
        gap: 8px;
        border: none;
    }
    .type-selector .group.type label {
        border: 1px solid #000;
        border-radius: 16px;
        padding: 4px 8px;
        line-height: 1;
        font-size: 1.4rem;
        text-align: center;
        width: calc((100% - 16px) / 3);
        flex-grow: 1;
        line-height: 1;
        padding-block: 8px;
        cursor: pointer;
    }

    .type-selector .group.type label.focus {
        background: red;
        color: #fff;
        font-weight: bold;
    }
    .type-selector .group.type label * {
        font-size: 1.6rem;
        @media (max-width: 800px) {
            font-size: 1.4rem;
        }
    }
}

body.listlayer .nav.global {
    background: var(--col1-45);
    ul {
        background: none;
        display: flex;
        border-left: 1px dotted var(--col1-70);
    }
    ul li {
        flex: 1;
        border-right: 1px dotted var(--col1-70);
        position: relative;
    }

    ul li > :is(a, button) {
        width: 100%;
        padding-block: 16px;
        display: flex;
        align-items: center;
        text-decoration: none;
        gap: 8px;
        justify-content: center;
        color: #fff;
        background: var(--col1-45);
        @media (max-width: 800px) {
            flex-direction: column;
            gap: 2px;
        }
    }

    ul li .label {
        font-size: 1.8rem;
        @media (max-width: 800px) {
            font-size: 1.4rem;
        }
    }
    ul li *[class*=material] {
        font-size: 2.5rem;
    }

    ul li .data {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        position: absolute;
        left: 0;
        top: 110%;
        border: 1px solid var(--col1-50);
        z-index: 1;
        background: var(--col1-90);
        padding: 8px;
        border-radius: 5px;
        gap: 8px;
        @media (max-width: 800px) {
            width: 200%;
            flex-direction: column;
            flex-wrap: nowrap;
            left: -100%;
        }
    }
    ul li .data > * {
        width: calc((100% - 8px )/ 2);
        font-size: 1.4rem;
        text-align: center;
        padding: 4px 8px;
        background: #fff;
        border-radius: 5px;
        @media (max-width: 800px) {
            width: 100%;
        }
    }
    ul li .data.close {
        display: none;
    }
}

body.listlayer > main > .feed.wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    > * {
        padding-block: 8px;
    }
    > .title {
        font-size: 1.8rem;
        background: #fff;
        padding-block: 0;
        @media (min-width: 700px) {
            font-size: 2rem;
        }
    }
    > .feed.data {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }
}

/* -------------------------- */
/* Data Page Shop list */

body.listlayer.shops .dialog.right.svh {
    :is(dl, ul).inner {
        flex-direction: column;
        padding: 0;
        gap: 0;
        .return a {
            display: flex;
            align-items: center;
            min-height: 50px;
            background: var(--col1-20);
            font-size: 1.6rem;
            color: #fff;
            padding-inline: 8px;
            text-decoration: none
        }
    }
}

body.listlayer.shops .dialog.right.svh dl.inner {
    .val {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 8px 8px;
    }
    .val dt {
        width: calc(100% + 16px);
        padding: 8px;
        background: var(--col1-40);
        text-align: center;
        margin-inline: -8px;
        color: #fff;
    }
    .val dd {
        width: calc((100% - 8px) / 2);
        a {
            display: block;
            min-height: 40px;
            line-height: 1;
            align-content: center;
            text-align: center;
            border: 1px solid var(--colgray-60);
            border-radius: 5px;
        }
    }
}

body.listlayer.shops .dialog.right.svh ul.inner {
    padding: 8px 8px 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 8px;
    .return {
        margin-top: -8px;
        width: calc(100% + 16px);
        margin-inline: -8px;
    }
    li.val {
        flex: 0 0 calc((100% - 8px) / 2);
        a {
            display: block;
            min-height: 40px;
            line-height: 1;
            align-content: center;
            text-align: center;
            border: 1px solid var(--colgray-60);
            border-radius: 5px;
        }
    }
}

body.listlayer.shops .nav-station {
    width: calc(100% - 8px);
    max-width: 1000px;
    margin-inline: auto;
    margin-top: 24px;
    padding: 8px;
    border-radius: 5px;
	display: flex;
    flex-direction: column;
	gap: 8px;
    h3 {
        font-size: 1.6rem;
        width: 100%;
    }
    > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    > ul li {
        width: calc((100% - 16px) / 3);
        border: 1px dotted #999;
        border-radius: 5px;
        padding: 8px;
        line-height: 1;
        width: calc((100% - 32px) / 5);
        @media (max-width: 800px) {
        }
    }
    > ul a {
        font-size: 1.4rem;
        text-align: center;
    }
}


body.listlayer.shops > main > .feed.wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    > * {
        padding-block: 8px;
    }
    > .title {
        font-size: 1.8rem;
        background: #fff;
        padding-block: 0;
        @media (min-width: 700px) {
            font-size: 2rem;
        }
    }
    > .feed.data {
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-width: 0;
    }
}
body.listlayer.shops > main > .feed.wrap > .feed.data > .val.wrap {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--col1-40);
    border-block: 2px solid var(--col1-40);
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    > * {
        width: 100%;
    }
    > .icon.bookmark {
        position: absolute;
        top: calc(-1rem + -8px);
        right: 8px;
        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);
    }
    > .icon.bookmark.active {
        background: var(--col6-50);
        color: #fff;
    }
    > .name {
        display: flex;
        gap: 8px;
        *[class*=material-] {
            font-weight: normal;
            font-size: 1.8rem;
        }
        a {
            font-size: 1.6rem;
            color: var(--col-link);
        }

    }
    > figure.photo {
        width: 200px;
        aspect-ratio: 9 / 4;
        overflow: hidden;
        border-radius: 10px;
        border: 1px solid #999;
        margin-right: auto;
        @media (max-width: 800px) {
            width: 100%;
        }
        img {
            width: 100%;
        }
    }

    > .info.box {
        display: flex;
        flex-direction: column;
        gap: 8px;
        order: 1;
        align-items: flex-start;
        justify-content: center;
        width: calc(100% - 218px);
        @media (max-width: 800px) {
            width: 100%;
        }
        > .name, .name a {
            font-size: 1.8rem;
        }
        > .area {
            line-height: 1;
            font-size: 1.2rem;
            color: var(--colgray-50);
        }
        > dl {
            display: flex;
            gap: 8px;
            width: auto;
            @media (max-width: 800px) {
                flex-wrap: wrap;
                width: auto;
            }
        }
        > dl > div:not(.status) {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            border-radius: 5px;
            line-height: 1;
            align-items: center;
            @media (max-width: 800px) {
                flex-wrap: wrap;
                width: auto;
            }
            .icon {
                font-size: 1.6rem;
                padding: 4px;
                border-radius: 5px;
                background: var(--col1-40);
                color: #fff;
            }
        }
        > dl > div:not(.status) * {
            font-size: 1.3rem;
        }

        > dl > .status {
            display: flex;
            gap: 4px;
            position: absolute;
            top: -12px;
            left: 0;
            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);
            }
        }
    }

    > .girls.box {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto; 
        width: 100%;
        min-width: 0;

        > li {
            width: calc((100% - 28px) / 8);
            min-width: 120px;
            max-width: 180px;
            flex-shrink: 0; 
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        > li .name {
            font-size: 1.4rem;
            font-weight: normal;
            color: var(--colgray-40);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        > li .photo {
            order: 0;
            aspect-ratio: 1 / 1;
            overflow: hidden;
        }
        > 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);
        }
        > li .photo img {
            width: 100%;
            object-fit: cover;
        }
        > li .photo .icon {
            font-size: 5rem;
            color: #ccc;
        }
        > li .photo.no-image::after {
            content: "No Image";
            width: 100%;
            font-size: 1.2rem;
            text-align: center;
            color: #999;
        }
    }
    > .discount.box {
        display: flex;
        flex-direction: column;
        gap: 8px;
        h4 {
            display: flex;
            width: 100%;
            font-size: 1.6rem;
            line-height: 1;
            gap: 8px;
            align-items: center;
        }
        h4 .icon {
            color: #fff;
            padding: 4px;
            font-size: 2rem;
            border-radius: 5px;
            background: var(--col4-50);
            align-content: center;
            text-align: center;
        }
        .wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            @media (max-width: 600px) {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-top: 18px;
            }
        }
        .wrap .v {
            position: relative;
            width: calc((100% - 8px) / 2);
            border: 1px solid var(--col4-50);
            border-radius: 5px;
            background: #fff;
            @media (max-width: 600px) {
                width: 80%;
                flex-shrink: 0;
            }
        }
        .wrap .v * {
            font-size: 1.4rem;
        }
        .wrap .v > * {
            padding: 4px 8px;
        }
        .wrap .v .label {
            background: var(--col4-50);
        }

        .wrap .v .price {
            display: flex;
            gap: 24px;
        }

        .wrap .v .price * {
            font-size: 1.6rem;
        }
        .wrap .v .price .from {
            text-decoration: line-through;
            color: var(--colgray-60);
        }
        .wrap .v .status {
            background: red;
            color: #fff;
            border-radius: 5px;
            border: 1px solid #fff;
            position: absolute;
            top: -12px;
            right: 0;
            line-height: 1;
            padding: 2px 8px;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .wrap .v .note {
            font-size: 1.2rem;
            color: var(--colgray-50);
        }
    }
	> .name {
		order: 1;
	}
	> .girls.box {
		order: 6;
	}

	> .discount.box {
		order: 9;
	}
}

body.listlayer.shops > main > .feed.wrap > .feed.data > .val.detail.excellent {
	border: 2px solid var(--col4-40);
	background: var(--col4-95);
}

/* -------------------------- */
/* Data Page News list */

body.listlayer.news > main > .feed.wrap > .feed.data {
	flex-direction: row;
    flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
    > li {
        width: calc((100% - 24px) / 4);
        border: 1px solid #ccc;
        @media (max-width: 800px) {
            width: calc((100% - 8px) / 2);
        }
        @media (max-width: 600px) {
            width: 100%;
        }
        > a {
            display: flex;
            flex-direction: column;
            gap: 4px;
            text-decoration: none;
        }
        > a * {
            font-size: 1.4rem;
            color: #000;
        }
        .img {
            aspect-ratio: 2 / 3;
            overflow: hidden;
            font-size: 4rem;
            color: var(--colgray-50);
        }
        .img.icon {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--colgray-90);
        }
        img {
            width: 100%;
        }
        > a *:not(.img) {
            padding-inline: 8px;
            font-size: 1.3rem;
        }
        .shop {
            color: var(--col-link);
            text-decoration: underline;
        }
    }
}

/* -------------------------- */
/* Data Page WORK list */

body.listlayer.works > main > .feed.wrap > .feed.data {
	flex-direction: row;
    flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
    > li {
        width: calc((100% - 8px) / 2);
        border: 1px solid #ccc;
        padding: 8px;
        @media (max-width: 600px) {
            width: 100%;
        }
        > a {
            display: flex;
            flex-direction: column;
            gap: 4px;
            text-decoration: none;
        }
        > a * {
            font-size: 1.4rem;
            color: #000;
        }
        .img {
            aspect-ratio: 3 / 1;
            overflow: hidden;
            font-size: 4rem;
            color: var(--colgray-50);
        }
        .img.icon {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--colgray-90);
        }
        img {
            width: 100%;
        }
        > a *:not(.img) {
            font-size: 1.3rem;
        }
        .shop {
            color: var(--col-link);
            text-decoration: underline;
            font-weight: bold;
            font-size: 1.6rem;
        }
    }
}

/* -------------------------- */
/* Data Page GIRLS list */
body.listlayer.girls > main {
    .type-selector .group.type label {
        width: auto;
        flex-grow: 0;
        padding: 4px 16px;
        border: 1px dotted #999;
    }
}

body.listlayer.girls > main > .feed.wrap > .feed.data {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
    > li {
        width: calc((100% - 32px) / 5);
        display: flex;
        flex-direction: column;
        gap: 0px;
        border: 1px solid #ccc;
        position: relative;
        @media (max-width: 800px) {
            width: calc((100% - 24px) / 4);
        }
        @media (max-width: 600px) {
            width: calc((100% - 16px) / 3);
        }
        @media (max-width: 450px) {
            width: calc((100% - 8px) / 2);
        }
        .img {
            aspect-ratio: 3 / 4;
            overflow: hidden;
        }
        img {
            width: 100%;
        }
        * {
            font-size: 1.4rem;
            text-decoration: none;
        }
        a > *:not(.img), a.sh {
            padding-inline: 8px;
        }
        span.schedule {
            background: var(--col4-50);
            line-height: 1;
            padding: 4px 8px;
            text-align: center;
        }
        span.wait {
            background: var(--col3-50);
            line-height: 1;
            padding: 4px 8px;
            text-align: center;
            color: #fff;
        }
        > button {
            position: absolute;
            width: 40px;
            height: 40px;
            top: -20px;
            right: -5px;
            border-radius: 50%;
            border: 1px solid var(--colgray-40);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        > button > * {
            font-size: 2rem;
            color: var(--colgray-40);
        }
        > button.active {
            background: var(--col6-50);
            border: 1px solid #fff;
        }
        > button.active > * {
            color: #fff;
        }
    }
}