@charset "UTF-8";

body.detaillayer {
	display: flex;
    flex-direction: column;
	gap: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

body.detaillayer > .nav.ctl {
    display: flex;
    background: var(--col1-90);
    gap: 4px;
    padding-block: 4px;
    padding-inline: max(8px, calc((100% - 1000px) / 2));
    .name {
        flex-grow: 1;
        font-size: 1.4rem;
    }
    > button {
        background: none;
    }
    > button.top {
        position: relative;
    }
    > button:is(.menu, .top, .bookmark) .icon {
        width: 48px;
        height: 48px;
        font-size: 4rem;
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px dotted #fff;
        border-radius: 5px;
        background: #000;
    }
    > button.bookmark .icon{
        background: var(--colgray-90);
        color: var(--colgray-50);
    }
    > button.bookmark.active .icon {
        background: var(--col6-50);
        color: #fff;
    }
    > button.top > .label {
        position: absolute;
        bottom: 5px;
        color: #fff;
        left: 0;
        text-align: center;
        width: 100%;
    }
    > button.top.none {
        display: none;
    }
    > button.phone {
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: red;
        border: 1px dotted #000;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        padding-inline: 16px;
        color: #fff;
    }
    > button.phone .label {
        font-size: 1.2rem;
        line-height: 1;
    }
    > button.phone .data, > button.phone .data * {
        font-size: 2rem;
        display: flex;
        gap: 8px;
        display: flex;
        align-items: center;
        line-height: 1;
    }
}

body.detaillayer > .nav.ctl.fix {
    position: fixed;
    padding-block: 8px;
    z-index: 9999;
    border-bottom: 2px solid #000;
    background: var(--col4-50);
    *:not(.name) {
        color: #fff;
    }
}

body.detaillayer > .nav.wrap {
    display: flex;
    width: 100%;
    background: #000;
    padding-inline: max(8px, calc((100% - 1000px) / 2));
    .inner {
        width: 100%;
    }
    ul {
        display: flex;
        width: 100%;
        padding-block: 8px;
    }
    ul > li {
        flex: 1;
    }
    ul > li.into-child {
        position: relative;
    }
    ul > li.into-child .child {
        position: absolute;
        top: 130%;
        left: 0px;
        width: 200%;
        padding: 16px;
        border-radius: 5px;
        border: 1px solid #666;
        background: #fff;
        z-index: 1;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    ul > li.into-child .child.close {
        display: none;
    }
    ul > li > :is(a, button) {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        color: #fff;
        background: none;
        font-size: 1.6rem;
        min-height: 40px;
        justify-content: center;
    }
    ul > li > :is(a, button) > span {
        line-height: 1;
        text-align: center;
        font-size: 1.2rem;
        color: var(--col4-60);
    }
    ul > li > :is(a, button) > span.en {
        font-size: 1.4rem;
    }
    ul > li {
        border-left: 1px dotted var(--col4-60);
    }

    ul > li:last-of-type {
        border-right: 1px dotted var(--col4-60);
    }

    ul > li.into-child .child a {
        color: var(--col-link);
        width: calc((100% - 8px) / 2);
        font-size: 1.6rem;
        padding: 4px 8px;
        border: 1px dotted var(--col1-50);
        border-radius: 5px;
    }
}

@media (max-width: 799px) {
    body.detaillayer > .nav.ctl, body.detaillayer > .nav.ctl.fix {
        flex-wrap: wrap;
        padding-block: 4px;
        border-bottom-width: 1px;
        .name {
            width: 100%;
            line-height: 1.2;
            font-size: 1.1rem;
        }
        > button.phone {
            flex-grow: 1;
        }
    }

    body.detaillayer > .nav.wrap {
        justify-content: center;
        align-items: flex-start;
        background: hsla(0, 0%, 0%, .8);
        .inner {
            background: var(--col4-40);
            height: auto;
            max-height: unset;
            border-radius: 5px 5px 0 0;
            border: 1px solid var(--col4-50);
            padding-block: 0 8px;
            margin-top: auto;
            gap: 8px;
        }
        .inner .headline {
            background: var(--col1-35);
            display: flex;
            align-items: center;
        }
        .inner .headline .icon {
            width: 48px;
            height: 48px;
            font-size: 2.5rem;
            text-align: center;
            align-content: center;
            background: #000;
            color: #fff;
            border-radius: 5px 0 0;
        }
        .inner .headline .name {
            padding-inline: 8px;
            color: #fff;
        }
        .inner p {
            display: block;
            padding-inline: 8px;
            text-align: center;
            font-weight: bold;
        }
        .inner > ul {
            gap: 8px;
            flex-wrap: wrap;
            padding-inline: 8px;
        }
        .inner > ul li a, .inner > ul li a * {
            font-size: 1.6rem;
            color: var(--col-link);
            text-decoration: underline;
        }
        .inner > ul li {
            width: calc((100% - 8px) / 2);
            flex: none;
            border-radius: 5px;
            border: none;
        }
        .inner > ul li:not(.into-child) {
            background: #000;
        }
        ul li.into-child {
            width: 100%;
        }
        .inner > ul li.into-child {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .inner > ul li.into-child > *, .inner > ul li.into-child > .child.close {
            display:flex;
            width: calc((100% - 8px) / 2);
            position: unset;
            border: none;
            padding: 0;
            width: 100%;
            background: unset;
        }
        .inner > ul li :is(a, button) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border: none;
            border-radius: 5px;
            padding-inline: 8px;
            align-items: center;
            min-height: 48px;
            text-align: center;
            width: 100%;
            color: var(--col-link);
            background: #000;
            color: #fff;
            text-decoration: none;
        }
        .inner > ul li :is(a, button) * ,  .inner > ul > li.into-child .child a {
            color: #fff;
            text-decoration: none;
        }
        button.phone {
            width: calc(100% - 16px);
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: red;
            border: 1px dotted #000;
            border-radius: 8px;
            align-items: center;
            font-size: 2rem;
            padding-inline: 16px;
            color: #fff;
        }
        button.phone .label {
            font-size: 1.2rem;
        }
        button.phone .data, .inner button.phone .data * {
            font-size: 2rem;
            display: flex;
            gap: 8px;
            display: flex;
            align-items: center;
        }
    }
    body.detaillayer > .nav.wrap.close {
        display: none;
    }
}

body.detaillayer > main {
    padding-block: 24px;
    gap: 16px;
	> h1 {
        font-size: 2rem;
	}
    > h2 {
        font-size: 1.6rem;
    }
	> p {
		font-size: 1.4rem;
		font-weight: normal;
		* {
			font-size: 1.4rem;
		}
	}
    > figure img {
        width: 100%;
    }
}

body.detaillayer .data.content h2 {
    font-size: 1.6rem;
    background: var(--col1-40);
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: normal;
}

body.detaillayer .data.content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.detaillayer main.top .async-button {
    border: 1px dotted var(--col-link);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-inline: auto;
    max-width: 400px;
    width: 50%;
    min-width: 350px;
    min-height: 50px;
    border-radius: 5px;
    padding-inline: 16px;
    background: #fff;
    > .subject {
        color: var(--col-link);
        font-size: 2rem;
        line-height: 1;
    }
    > *[class*=icon-] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        background: var(--col-link);
        border-radius: 50%;
        width: 40px;
        aspect-ratio: 1 / 1;
        color: #fff;
    }
}


body.detaillayer .news {
	> .selector {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
	}
    > .selector button {
        display: flex;
        gap: 8px;
        padding: 4px 8px;
        border: 1px solid var(--col1-50);
        border-radius: 5px;
        background: #fff;
        width: 100%;
        @media (min-width: 600px) {
            width: calc((100% - 16px) / 2)
        }
    }
    > .selector button .photo {
        width: 100px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        img {
            width: 100%;
        }
    }

    > .selector button .info {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: calc(100% - 108px);
    }
    > .selector button .info * {
        text-align: left;
        font-size: 1.4rem;
    }
    > .selector button .info .subject {
        font-size: 1.6rem;
        font-weight: bold;
        color: var(--col-link);
    }
    > .news.val .inner {
        gap: 16px;
    }
    > .news.val .inner > *:not(.headline) {
        padding-inline: 8px;
    }
    > .news.val .inner img {
        width: 100%;
    }
    > .news.val button.close:last-of-type > *[class*=icon] {
        left: calc(100% - 60px);
    }
}

body.detaillayer .price {
    .into.data .price.data {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    article {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 1px dotted #999;
        border-radius: 5px;
        padding-bottom: 8px;
    }
    article .subject {
        color: var(--colgray-30);
        font-size: 1.6rem;
        padding: 4px 8px;
    }
    article > * {
        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.detaillayer.price .price.data.content {
    article {
        background: var(--col1-95);
    }

    article .subject {
        background: var(--col1-40);
        color: #fff;
    }
    article dl div {
        background: #fff;
    }
    article.delivery-to dl div {
        width: 100%;
        flex-direction: column;
    }
}

body.detaillayer .discount.data.content {
    .datas {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 8px;
        margin-top: 8px;
    }
    .datas .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% - 16px) / 3);
        }
        * {
            font-size: 1.4rem;
        }
    }
    .datas .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;
    }
    .datas .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;
    }
    .datas .data dd {
        background: #fff;
        padding: 4px 8px;
        width: 100%;
        border: 1px dotted #999;
        border-radius: 5px;
    }
    .datas .data dd.detail .from {
        text-decoration: line-through;
        color: #666;
    }
    .datas .data dd.detail .to {
        color: red;
    }
    .datas .data dd.calc {
        padding-block: 8px;
        background: red;
        font-weight: bold;
        color: #fff;
        font-size: 1.6rem;
        border-color: red;
        * {
            font-size: 1.6rem;
        }
    }
    .datas .data dd.note {
        font-size: 1.2rem;
        max-height: 100px;
        overflow-y: auto;
    }
    .to-phone {
        display: flex;
        flex-wrap: wrap;
        font-size: 1.4rem;
        font-weight: bold;
        text-decoration: underline;
        * {
            font-size: 1.4rem;
        }
        button {
            background: none;
        }
    }
    .to-phone span {
        color: red;
    }
}

body.detaillayer .info.data.content {
    :is(dt, dd, p) {
        font-size: 1.4rem;
        * {
            font-size: 1.4rem;
        }
    }
    > .datas {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 1px dotted #999;
        border-radius: 5px;
    }
    > .datas > .data {
        display: flex;
        gap: 8px;
        padding: 8px;
        border-bottom: 1px dotted #999;
    }
    > .datas > .data:last-of-type {
        border-bottom: none;
    }
    > .datas > .data dt {
        max-width: 100px;
        min-width: 100px;
        width: 30%;
        font-weight: bold;
    }
    > .datas > .data.tags {
        flex-wrap: wrap;
    }
    > .datas > .data.tags dt {
        max-width: none;
        min-width: none;
        width: 100%;
    }

    > p.description {
        border-radius: 5px;
        padding: 8px;
        border: 1px dotted #999;
    }
}

body.detaillayer .girls.data.content .into.data {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 8px;
    .val.wrap {
        border: 1px solid var(--col1-50);
        width: calc((100% - 32px) / 5);
        position: relative;
        display: flex;
        flex-direction: column;
        position: relative;
        @media (max-width: 800px) {
            width: calc((100% - 8px) / 3);
        }
        @media (max-width: 500px) {
            width: calc((100% - 8px) / 2);
        }
        * {
            line-height: 1;
        }
    }
    .val.wrap > :not(.photo) {
        order: 1;
    }
	.val.wrap .photo {
        order: 0;
        aspect-ratio: 1 / 1;
		overflow: hidden;
	}
    .val.wrap .photo.no-image {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border: 1px dotted #999;
        background: var(--colgray-95);
    }
	.val.wrap .photo img {
		width: 100%;
        object-fit: cover;
	}
    .val.wrap .photo *.icon {
        font-size: 5rem;
        color: #ccc;
    }
    .val.wrap .photo.no-image::after {
        content: "No Image";
        width: 100%;
        font-size: 1.2rem;
        text-align: center;
        color: #999;
    }
    .val.wrap .name {
        padding: 8px;
        font-size: 1.4rem;
        font-weight: bold;
    }
    .val.wrap .labels {
        display: flex;
        gap: 2px;
        position: absolute;
        top: -10px;
        right: 0;
        > * {
            border-radius: 5px;
            padding: 4px 8px;
            border: 1px solid #fff;
            font-size: 1.4rem;
        }
        > .age {
            background: var(--col4-50);
            color: #000;
        }
        > .bust {
            background: var(--col1-50);
            color: #fff;
        }
    }

    .val.wrap :is(.schedule, .wait) {
        font-weight: bold;
        font-size: 1.4rem;
        padding: 4px 16px;
        border-bottom: 1px dotted #999;
    }
    .val.wrap .schedule {
        background: var(--col4-60);
    }
    .val.wrap .wait {
        background: var(--col3-60);
        color: #fff;
    }
    .val.wrap .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;
    }
    .val.wrap button {
        position: absolute;
        top: 4px;
        left: 4px;
        border: 1px solid #000;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: hsla(0, 0%, 100%, .8);
    }
    .val.wrap button.active {
        border: 1px solid #fff;
        background: hsla(320, 80%, 50%, .8);
    }
    .val.wrap button.active * {
        color: #fff;
    }
}

body.detaillayer .review.summary.data {
    background: var(--col1-97);
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 30px;
    border: 1px dotted var(--colgray-40);

    .total-count {
        text-align: center;
        margin-bottom: 15px;
        font-weight: bold;
    }
    .total-count .value {
        font-size: 2rem;
        color: #333;
        margin: 0 4px;
    }
    .total-count .unit {
        font-size: 0.9rem;
    }
    .rating-visualizer {
        max-width: 400px;
        margin: 0 auto;
    }

    .bar-container {
        display: flex;
        height: 16px;
        background: #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 12px;
    }

    .bar.is-good {
        background: linear-gradient(90deg, #ff80ab, #ff4081);
        transition: width 0.5s ease-out;
    }

    .bar.is-bad {
        background: #bbb;
    }

    .rating-legend {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .rating-legend li {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.9rem;
    }

    .rating-legend .good { color: #ff4081; font-weight: bold; }
    .rating-legend .bad { color: #666; }

    .rating-legend .material-symbols-outlined {
        font-size: 1.8rem;
    }
    button {
        width: 400px;
        border-radius: 50px;
        min-height: 50px;
        margin-inline: auto;
        font-size: 1.6rem;
        background: var(--col4-50);
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border: 1px solid #999;
        font-weight: bold;
    }
    button *[class*=material-] {
        font-size: 3rem;
    }
}

body.detaillayer .review.data.content .row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px dotted var(--col1-50);
    border-radius: 5px;
    .meta.info {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .meta.info * {
        font-size: 1.6rem;
    }
    .meta.info *:is(.is-good, .is-bad) {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .meta.info *:is(.is-good, .is-bad) .icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        align-content: center;
        color: #fff;
        font-size: 2rem;
    }
    .meta.info .is-good .icon {
        background-color: #ff4081;
    }
    .meta.info .is-bad .icon {
        background-color: #999;
    }
    .val {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .val > *.from {
        display: flex;
        gap: 4px;
        font-size: 1.4rem;
    }
    .val > *.from .icon {
        font-size: 1.6rem;
    }
    .val > *.from.reply {
        background: var(--colgray-97);
        border: 1px dotted #999;
        padding: 8px;
    }
}

body.detaillayer button.review.editor {
    margin: 24px auto;
    width: 300px;
    font-size: 1.6rem;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    border-radius: 50px;
    border: 1px solid var(--colgray-20);
    background: #fff;
    button .icon {
        font-size: 2.5rem;
    }
}

body.detaillayer.girl > main > figure.photos {
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    width: 100cqw;
    overflow-x: auto;
    gap: 2px;
    margin-left: calc(50% - 50cqw);
    margin-right: calc(50% - 50cqw);
        > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 350px;
        min-width: 350px;
        aspect-ratio: 3 /4 ;
        overflow: hidden;
        flex-shrink: 1;
        border-radius: 5px;
        border: 1px dotted var(--col1-50);
        @media (min-width: 700px) {
            width: calc(100% / 5);
        }
    }
    > * img {
        width: 100%;
    }
    > *[class*=material-] {
        font-size: 4rem;
        background: var(--col1-95);
    }
}

body.detaillayer.girl > main > .girl.data {
    display: flex;
    flex-direction: column;
    gap: 16px;
    .detail.wrap {
        border-radius: 5px 5px 0 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 1px solid var(--col1-70);
        border-radius: 5px;
    }

    h2.label {
        font-size: 1.6rem;
        color: var(--col1-50);
        padding: 8px;
        background: var(--col1-40);
        color: #fff;
        border-radius: 5px 5px 0 0;
    }
}

body.detaillayer.girl > main > .girl.data .val.style {
    border: 1px solid var(--col1-70);
    border-radius: 5px;
    > * {
        width: 100%;
    }
    .val {
        padding: 8px;
        gap: 16px;
        display: flex;
        flex-wrap: wrap;
    }
    .val .item {
        display: flex;
        gap: 8px;
    }
    .val .item * {
        font-size: 1.6rem;
    }
}

body.detaillayer.girl > main > .girl.data > .val.wrap.detail {
    border: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    > * {
        width: calc((100% - 16px) / 2);
        @media (max-width: 800px) {
            width: 100%;
        }
    }
    h2.label {
        border-radius: 5px;
    }
    > .itv {
        width: 100%;
        @media (min-width: 700px) {
            width: 100%;
        }
    }

    > .txt {
        flex-grow: 1;
        width: calc((100% - 16px) / 2);
        @media (max-width: 800px) {
            width: 100%;
        }
    }

    > .txt .body {
        width: 100%;
        border: 1px dotted #999;
        margin: 8px auto;
        font-size: 1.4rem;
        max-height: 300px;
        overflow-y: auto;
        padding: 8px;
    }
    .itv {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .itv .val {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        max-height: 300px;
        overflow-y: auto;
        width: 100%;
        margin: 8px auto;
        * {
            font-size: 1.4rem;
        }
    }
    .itv .val .item {
        padding: 4px 8px;
        width: calc((100% - 8px) / 3);
        display: flex;
        flex-direction: column;
        background: var(--col3-95);
        border: 1px dotted #999;
        @media (max-width: 700px) {
            width: 100%;
        }
    }
    .itv .val .item:nth-of-type(even) {
        background: var(--col3-90);
    }
    .itv .val .item .label {
        font-weight: bold;
    }
}

body.detaillayer.girl > main > .schedule.data {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -8px;
    > .label {
        font-size: 1.6rem;
        color: #fff;
        background: var(--col5-50);
        padding: 8px;
        border-radius: 5px;
    }
    .val.wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .val.wrap .detail {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--col5-50);
        border-top-width: 2px;
        width: calc((100% - 12px) / 3);
        * {
            font-size: 1.6rem;
        }
        @media (min-width: 700px) {
            width: auto;
            flex-grow: 1;
        }
    }
    .val.wrap .detail > * {
        padding: 4px 8px;
    }
    .val.wrap .detail > .label {
        border-bottom: 1px dotted var(--col5-50);
        font-weight: bold;
    }
    .val.wrap .detail > .label.sun {
        color: red;
    }
    .val.wrap .detail > .label.sat {
        color: blue;
    }
    .val.wrap .detail > .info.un-registered {
        color: #999;
    }
}

body.detaillayer.girl > main > .btns {
    display: flex;
    gap: 8px;
    button {
        width: calc((100% - 8px) / 2);
        font-size: 2rem;
        padding: 8px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: bold;
        margin-block: 0;
    }
    button > *[class*=icon-] {
        font-size: 4rem;
    }
    button.phone {
        background: red;
    }
    button.price {
        background: blue;
    }
    button.bookmark.active {
        display: flex;
        background: var(--col6-50);
        color: #fff;
        align-items: center;
    }
    button.bookmark.active::after {
        content: "登録中";
        line-height: 1;
        font-size: 1.2rem;
        border:1px solid #fff;
        padding: 4px 8px;
        font-weight: normal;
        border-radius: 5px;
    }
}

body.detaillayer.work > main {
    > :is(div, section):not(.photo):not(.contact):not(.head-line) {
        border-radius: 8px;
        border: 1px solid var(--colgray-40);
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 8px;
    }
    > .work.photo img {
        width: 100%;
        padding: 0;
    }
    > .work .subject{
        background: var(--colgray-10);
        line-height: 1;
        padding: 8px;
        font-size: 1.6rem;
        color: #fff;
        border-radius: 8px 8px 0 0;
    }
    > .work > *:not(.subject) {
        padding-inline: 16px;
    }
    > .work.type > dl {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 8px;
        @media (max-width: 600px) {
            flex-direction: column;
            flex-wrap: nowrap;
        }
    }
    > .work.type > dl div {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: calc((100% - 8px) / 2);        
        @media (max-width: 600px) {
            width: 100%;        
        }
    }
    > .work.type > dl div * {
        font-size: 1.6rem;
    }
    > .work.type > dl div dt {
        width: 40%;
        @media (max-width: 600px) {
            width: calc(50% - 8px);        
        }
    }
    > .work.info > p {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 1px dotted var(--colgray-50);
        font-size: 1.4rem;
    }
    > .work.info > p .label {
        font-size: 1.4rem;
        font-weight: bold;
    }
    > .work.info > p .label::before {
        content: "・ ";
    }
    > .work.info .tag {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    > .work.info .tag > * {
        font-size: 1.2rem;
        background: var(--colgray-90);
        border: 1px dotted var(--colgray-50);
        line-height: 1;
        padding: 8px 16px;
        border-radius: 5px;
    }
    > .work.faq dl {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        @media (max-width: 600px) {
            padding-inline: 0;       
        }
    }
    > .work.faq dl > div {
        border: 1px dotted var(--colgray-50);
        border-radius: 5px;
        padding: 8px;
        width: calc((100% - 8px) / 2);
        display: flex;
        flex-direction: column;
        gap: 4px;
        @media (max-width: 600px) {
            width: 100%;        
            border-style: none none dotted none;
            border-radius: 0;
        }
    }
    > .work.faq dl > div * {
        font-size: 1.3rem;
    }
    > .work.faq dl > div dt {
        font-weight: bold;
    }
    > .contact {
        width: 100cqw;
        margin-left: calc(50% - 50cqw);
        margin-right: calc(50% - 50cqw);
        background: var(--col1-40);
        padding-block: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    > .contact > p {
        text-align: center;
        color: #fff;
        font-size: 1.6rem;
    }
    > .contact > div {
        max-width: 1000px;
        width: calc(100% - 16px);
        margin-inline: auto;
        display: flex;
        gap: 8px;
    }
    > .contact > div > * {
        width: calc((100% - 16px) / 3);
        border-radius: 5px;
        padding: 8px;
        min-height: 48px;
        background: #fff;
        font-size: 1.6rem;
        text-align: center;
        text-decoration: none;
        align-content: center;
        color: var(--col-link);
    }
}

@media (max-width: 799px) {
    .dialog-phone {
        width: 100%;
        height: 100svh;
        position: fixed;
        top: 0;
        left: 0;
        background: hsla(0, 0%, 0%, .5);
        z-index: 9999;
        display: flex;
        justify-content: right;
        border: none;
        * {
            font-size: 1.4rem;
        }
        > button.close.icon {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            top: 10px;
            left: 10px;
            position: absolute;
            border: 1px solid #fff;
            background: #000;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            width: 50px;
            color: #fff;
        }
        .inner {
            min-width: 300px;
            max-width: 400px;
            width: 80%;
            display: flex;
            flex-direction: column;
            background: #fff;
            padding-top: 16px;
            border-top: 5px var(--col1-50) solid;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .inner > :is(a, .subject) {
            width: 100%;
            padding: 4px 8px;
            border-bottom: var(--col1-50) dotted 1px;
        }
        .inner .subject {
            font-weight: bold;
            border: none;
            margin-top: 16px;
        }
    }

    .dialog-phone.close {
        display: none;
    }
}

dialog:is(.review.inform, .work.inform) {
    > .inner {
        border-radius: 10px;
    }
    > .inner > p {
        padding-inline: 8px;
    }
    > .inner form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    > .inner form > * {
        display: flex;
        flex-wrap: wrap;
        padding-inline: 8px;
        border-bottom: 1px dotted var(--colgray-70);
    }
    > .inner form > *.selector {
        justify-content: space-between;
        align-items: center;
        padding: 4px 8px;
        > select {
            width: 40%;
            border: 1px solid var(--colgray-60);
            padding-block: 8px;
            border-radius: 5px;
        }
    }
    > .inner form >  .subject {
        font-size: 1.4rem;
    }

    > .inner form >  button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 150px;
        height: 50px;
        padding: 8px 24px;
        border: none;
        background: var(--colgray-30);
        color: #fff;
        text-align: center;
        margin-inline: auto;
        border-radius: 5px;
    }
}