@charset "utf-8";

body > * {
    padding: 0 1%;
}


body > header:first-of-type > .rogo{
	width:200px;
	padding:8px 0;
}

body > header:first-of-type > .rogo img{
	height:60px;
}

body > header:first-of-type > ul li a {
    padding:4px 16px;
    font-size: 1.2rem;
}


body > nav:first-of-type > ul *{
    font-size: 1.2rem;
}


body > header:first-of-type > a{
    text-decoration: none;
}

body > header:first-of-type > a.groval_nav_run{
    aspect-ratio: 1/1;
	width:50px;
	height:50px;
	position: relative;
	-webkit-mask-image: url(/img/css/menu/groval.webp);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;

	mask-image: url(/img/css/menu/groval.webp);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: hsl(var(--col-pink),100%,60%);
}

body > *{
    margin-top: 16px;
    padding:0 2%;
}

body > .groval_menu{
    position: fixed;
    height:100%;
    width:100%;
    display: flex;
    top:0;
    left:0;
    background: hsla(var(--col),0%,90%,.8);
    align-items: start;
    margin-top: 0;
}

body > .groval_menu > *{
    width:70%;
    height: 100%;
}

body > .groval_menu > a{
    width:40%;
}

body > .groval_menu > div{
    background: hsl(var(--col),0%,30%);
	box-shadow: 4px 0px 20px 12px hsla(var(--col),0%,30%,.7);
}

body > .groval_menu > div > a{
    display: block;
    padding:8px 16px;
    border-bottom: 1px solid hsl(var(--col),0%,90%);
    color: #fff;
}
ul.anyBread {
    overflow-x: auto;
    width: 100%;
}
ul.anyBread > li{
    flex-shrink: 0;
}

body > main
{
	gap:16px 1%;
}


body:is(.findAll,.isIndex,.isSitemap) main .bizSelect{
    padding:4px;
    gap:8px 4px;
    flex-wrap: wrap;
}

body:is(.findAll,.isIndex,.isSitemap) main .bizSelect a{
    width:calc((100% - (8px)) / 3);
    text-align: center;
}

body.isIndex main .whatFuzoku > section,
body.isIndex main .whatFuzoku > section .find{
    padding-inline: 4px;
}

body.isIndex main .whatFuzoku > section *{
    font-size: 1.4rem;
}

body.findAll main.isGirl > .isArticles > p{
    width:calc((100% - 2%) / 3);
}

body.findAll main.isStore > .isArticles > .findStore .isProfile .items{
    flex-wrap: wrap;
}

body.findAll main.isStore > .isArticles > .findStore .isProfile .items
{
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
}



body.findAll main.isStore :is(.isSelectCat,.isSelectStation) .title{
    cursor: pointer;
    background: var(--col-main20);
    border-radius: 10px;
    padding: 4px;
    text-align: center;
    margin-bottom: 16px;
    text-decoration: underline;
}

body.findAll main.isStore :is(.isSelectCat,.isSelectStation) .title::before{
    content: "+ ";
}

body.findAll main.isStore :is(.isSelectCat,.isSelectStation) .innerFlex .findOuter{
    width: calc(50% - 8px);
}

*[class*=isBookmark] > .icon{
	width:25px;
	height:25px;
}


body.findAll main.isStore > .isArticles > section > .detali_wrap > .discounts > *{
    width:100%;
}

body.findAll main.isStore > .isArticles > section h3 > a{
    font-size:1.4rem;
}

body.findAll main.isStore > .isArticles > section .basic > *{
    font-size: 1.2rem;
    padding:2px 8px;
}

body.findAll main:is(.isNews,.isWork) > .list .find{
    width:calc(50% - .5%);
}

body.isSitemap .findAllToCity .innerWrap .list{
    padding-inline: 4px;
}

body.isSitemap .findAllToCity .innerWrap ul{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

body.isSitemap .findAllToCity .innerWrap ul li{
    width:calc((100% - 16px) / 2);
}

body.isSitemap .findAllToCity .innerWrap ul a{
    display: block;
    background: hsl(var(--col),0%,30%);
    font-size: 1.2rem;
    padding:4px 16px;
    border-radius: 5px;
    text-align: center;
}

body:is(.findStore) main.top {
	h1{
		text-align: center;
		font-size: 2rem;
		color: hsl(var(--col-yellow), 75%, 50%);
	}
	h2 {
		display: flex;
		justify-content: center;
		color: hsl(var(--col-yellow), 75%, 70%);
		gap: 16px;
		margin-bottom: 16px;
		font-size: 2rem;
		align-items: center;
		* {
			font-size: 2rem;
		}
	}
	h2::after, h2::before{
		content: "「";
	}
	h2::after{
		content: "」";
	}
}

body:is(.findStore) main:not(.top) {
	h1 {
		font-size: 1.8rem;
		* {
            font-size: 1.8rem;
		}
	}
}

body.findStore {
    padding-top: 40px;
}

body.findStore .smtNavController {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background: hsla(var(--col-pink), 95%, 40%);
    line-height: 1;
    align-items: center;
    justify-content: space-between;
    border-bottom: 4px solid #fff;
    .name {
        padding-left: 8px;
        color: #fff;
        font-size: 1.4rem;
    }
    .openner {
        position: relative;
        width: 50px;
        height: 50px;
        border-left: 1px solid hsl(var(--col), 0%, 100%);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-block: 2px;
        img {
            filter: brightness(0) invert(1);
            width: 35px;
            height: 35px;
        }
        &:after {
            width: 100%;
            position: absolute;
            font-size: 1rem;
            line-height: 1;
            background: #000;
            content: "メニュー";
            padding-block: 2px;
            color: #fff;
            bottom: 0;
            left: 0;
            text-align: center;
        }
    }
}

body.findStore main .navOuter{
    display: flex;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    z-index: 2;
    > .isClose {
        position: relative;
		display: block;
		width: 10%;
		flex-grow: 1;
		height: 100%;
		background-color: hsla(var(--col), 0%, 30%, .6);
    }
    > .isClose::after{
		position: absolute;
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
		background: #000;
		content: "×";
		font-size: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	nav {
        width: 70%;
		background: hsl(var(--col), 0%,20%);
        display: block;
        border-radius: 0;
        padding-top: 24px;
        overflow-y: auto;
        height: 100%;
	}
	nav > *:not(*[class*=isBookmark], .inner){
        display: block;
        width: 100%;
        flex-shrink: 0;
        padding: 8px 16px;
        border-bottom: 1px dotted hsl(var(--col), 0%, 45%);
        > * {
			color: #fff;
			font-size: 1.4rem;
		}
	}
	nav *[class*=isBookmark]{
        margin-bottom: 24px;
		padding: 4px 24px;
        width: 80% !important;
        margin-inline: auto;
		flex-wrap: nowrap;
		position: unset;
		aspect-ratio: unset;
		background: #fff;
		width: auto;
		line-height: 1;
		> .icon {
			display: none;
		}
		* {
			line-height: 1;
			font-size: 1.4rem;
		}
		&::before {
			content: "★";
			color: hsl(var(--col), 0%, 20%);
		}
		&::after {
			color: hsl(var(--col), 0%, 20%);
		}
	}
	nav .isBookmarkFocus {
		background: hsl(var(--col-purple), 80%, 50%);
		&::before {
			content: "★";
			color: yellow;
		}
		&::after {
			color: yellow;
		}
		* {
			color: yellow;
		}
	}
	nav .outer {
		position: relative;
        padding: 0;
        border: none;
        > .openner {
            display: none;
        }
	}
	nav .outer .inner {
        position: unset;
		display: block;
		width: 100%;
		padding: 0;
		border-radius: 0;
		background: none;
	}
	nav .outer .inner > * {
        display: block;
		width: 100%;
        padding: 8px 16px;
		font-size: 1.4rem;
		border-style: none none dotted;
        border-bottom: 1px dotted hsl(var(--col), 0%, 45%);
		text-align: left;
        color: #fff;
	}
}



body.findStore main .header > .info{
    flex-wrap: wrap;
    gap:8px;
}

body.findStore main .header > .info *{
    font-size: 1.4rem;
}

body.findStore main .header > .info .name{
    width: 100%;
}

body.findStore main .header > .info :not(.name){
    font-size: 1.3rem;
    padding-block: 2px;
}

body.findStore main .header .thumb{
	aspect-ratio: 9/4;
}

body.findStore :is(.top, .faq) .findAllToStoreFaq .list .find{
    width: 100%;
}

body.findStore .work .isSection > div{
    width: 100%;
}


body.findStore .top .topFlex{
	flex-wrap: wrap;
	gap:8px;
    > *{
        width: 100%;
        align-items: flex-start;
    }    
}

body.findStore .top .topFlex 
body.findStore .top .findAllToNewFace > div{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    height:auto;
}

body.findStore .top .anyGirl {
    gap: 8px;
	tbody {
        flex-wrap: nowrap;
        overflow-x: auto;
	}
	tbody tr {
        min-width: 150px;
	}
    tfoot tr{
		padding: 8px;
        border-radius: 5px;
        background: hsl(var(--col), 0%, 25%);
	}
    tfoot tr td {
		width: calc((100% - 8px) / 2);
		a {
            border-radius: 5px;
            font-size: 1.4rem;
			padding: 4px 16px;
		}
	}
}

body.findStore .girls .anyGirl {
    gap: 8px;
	tbody tr {
        width: calc((100% - 16px) / 3);
	}
}

body.findStore :is(.top, .service) .findAllPrice{
	* {
		font-size: 1.3rem;
	}
    tbody > tr {
		padding: 4px 8px;
	}
	tbody td {
		width: 100%;

	}
	#anyBasicService td {
		width: 100%;
	}
}

body.findStore :is(.top, .discount) .findAllDiscount{
	tr {
		width: 100%;
	}
}

body.findStore :is(.top, .info) .storeInfoDetails{
    table :is(tbody, thead) > tr {
        flex-wrap: wrap;
	}
	table tr :is(th, td){
		width: 100%;		
	}
	table tr th{
		font-weight: bold;
        text-align: left;
	}
    table tr:is(.isMap) td > span a {
        width: calc((100% - 16px) / 3);
        text-align: center;
	}
}

body.findStore .top .findAllToNewFace > div{
    max-height: 200px;
    height: unset;
    overflow-y: auto;
    > .find{
        flex-wrap: wrap;
        flex-shrink: 0;
    }
    > .find > *{
        width: 100%;;
    }
    p :is(.thumb,.body){
        width:100%;
    }
    p .message{
        display: none;
    }
}

body.findStore .isRating .isSection .flex{
    flex-wrap: wrap;
}

body.findStore .isRating .isSection :is(.findAll,form){
    width: 100%;
}

body.findGirl article :is([class*=Msg]){
    width:100%;
    height: 200px;
    overflow-y: auto;
}

body.findGirl article :is(.details, .anyCategory){
	tbody {
		gap: 4px;
	}
	:is(tbody, tfoot) tr{
		width: 100%;
        padding: 4px 8px;
	}
    tbody :is(.msg, .prevGirl, .nextGirl) {
		width: 100%;
	}
    tbody .style {
		width: calc((100% - 8px) / 3);
	}
    tbody .girlAnyImage td ol{
		justify-content: left;
	}
    tbody .girlAnyImage td ol li{
		min-width: 380px;
	}
    tbody > tr.schedule > td {
		width: calc((100% - 8px) / 2);
	}
}

body.findGirl article .anyCategory{
	tbody {
        max-height: 250px;
        overflow-y: auto;
	}
}

body.findStore .infoFix{
    padding:4px 1%;
    gap:0;
    align-items: stretch;
}

body.findStore .infoFix :is(.smtNone, .menu){
    display: none !important;
}

body.findStore .infoFix .discountIcon{
	position: absolute;
	bottom: calc(100% + 5px);
	left: 8px;
	width: 80px;
}

body.findStore .infoFix{
    background: hsla(var(--col), 0%, 100%, .6);
}

body.findStore .infoFix > * {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.findStore .infoFix > .phone{
    flex-grow: 1;
    gap: 4px;
    flex-wrap: wrap;
    padding-block: 2px;
    > a {
        background: red;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width:100%;
        height:100%;
        padding-block:2px;
        font-size: 1.8rem;
        text-decoration: none;
        gap: 0 16px;
        position: relative;
        * {
            line-height: 1;
        }
    }
    > a::after{
        text-align: center;
        width: 100%;
        content: "ナウを見たとお伝えください";
        bottom:0;
        font-size: 1.2rem;
        font-weight: normal;
    }
}


body.findStore .infoFix > .phone > a > span{
    font-size:1.8rem;
    margin-bottom: 0;
}

body.findStore .infoFix > .phone > a > .isPhonetoStore{
    aspect-ratio: 1/1;
	width: 25px;
	height: 25px;
	position: relative;
	-webkit-mask-image: url(/img/css/phone.webp);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;

	mask-image: url(/img/css/phone.webp);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: hsl(var(--col),0%,100%);
}



body.findStore .infoFix > .phone > a *{
    color: #fff;
}

body.findStore .infoFix > .menu{
    aspect-ratio: 1/1;
    width:65px;
    background: hsl(var(--col),75%,40%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0;
}

body.findStore .infoFix > .menu::before{
    content: "店舗";
    font-size: 1.2rem;
    position: absolute;
    top:4px;
    color: #fff;
}

body.findStore .infoFix > .menu::after{
    content: "メニュー";
    font-size: 1.2rem;
    position: absolute;
    bottom:4px;
    color: #fff;
}

body.findStore .work .isSection :is(.faq, .itws) li{
    width: 100%;
}

body.findStore .work .isSection :is(.faq, .itws) li{
    border: 1px solid hsl(var(--col),0%,60%);
    padding: 8px;
    border-radius: 10px;
}

body.findStore .work .isSection .faq li > span{
    display: block;
    width: 100%;
}

body.findStore .work .isSection .faq li > span:first-of-type{
    font-weight: bold;
    color: hsl(var(--col-yellow), 75%, 50%);
}

body.findStore .work .isSection .itws li > span.thumb{
    width:40%;
    max-width: 120px;
}

body.findStore .work .isSection .itws li > span.data{
    width:30%;
    flex-grow: 1;
}


body.contact > main,
body.store_app .form_group
{
	width:auto;
	margin-inline: auto;
}


body.store_app .ad{
    overflow-x: auto;
}

body.store_app .ad > * > *{
    width: 200px;
    flex: none;
    flex-shrink: 0;
}

body.member:not(.member_auth) main nav > *{
    width:calc(98% / 2);
}


body.member:not(.member_auth) main div .gals > *{
    width:calc(98% / 3);
}

body.member:not(.member_auth) main div .stores > *{
    width:calc(99% / 2);
}