@charset "utf-8";

/* ------------------------------ */
/* ▼ block 要素 ▼ */

:root{
	--margin-center:0 auto;
	--col-link:#0044CC;
	--col: 60;
	--col-red: 0;
	--col-gray: 0;
	--col-orange: 30;
	--col-yellow: 50;
	--col-green: 110;
	--col-skyblue: 170;
	--col-blue: 230;
	--col-purple: 265;
	--col-pink: 320;

	--col1-10: hsl(110, 60%, 10%);
	--col1-15: hsl(110, 60%, 15%);
	--col1-20: hsl(110, 60%, 20%);
	--col1-25: hsl(110, 60%, 25%);
	--col1-30: hsl(110, 60%, 30%);
	--col1-35: hsl(110, 60%, 35%);
	--col1-40: hsl(110, 60%, 40%);
	--col1-45: hsl(110, 60%, 45%);
	--col1-50: hsl(110, 60%, 50%);
	--col1-55: hsl(110, 60%, 55%);
	--col1-60: hsl(110, 60%, 60%);
	--col1-65: hsl(110, 60%, 65%);
	--col1-70: hsl(110, 60%, 70%);
	--col1-75: hsl(110, 60%, 75%);
	--col1-80: hsl(110, 60%, 80%);
	--col1-85: hsl(110, 60%, 85%);
	--col1-90: hsl(110, 60%, 90%);
	--col1-95: hsl(110, 60%, 95%);
	--col1-97: hsl(110, 60%, 97%);

	--col2-10: hsl(170, 60%, 10%);
	--col2-20: hsl(170, 60%, 20%);
	--col2-30: hsl(170, 60%, 30%);
	--col2-40: hsl(170, 60%, 40%);
	--col2-50: hsl(170, 60%, 50%);
	--col2-60: hsl(170, 60%, 60%);
	--col2-70: hsl(170, 60%, 70%);
	--col2-80: hsl(170, 60%, 80%);
	--col2-85: hsl(170, 60%, 85%);
	--col2-90: hsl(170, 60%, 90%);
	--col2-95: hsl(170, 60%, 95%);
	--col2-97: hsl(170, 60%, 97%);

	--col3-10: hsl(30, 80%, 10%);
	--col3-20: hsl(30, 80%, 20%);
	--col3-30: hsl(30, 80%, 30%);
	--col3-40: hsl(30, 80%, 40%);
	--col3-50: hsl(30, 80%, 50%);
	--col3-60: hsl(30, 80%, 60%);
	--col3-70: hsl(30, 80%, 70%);
	--col3-80: hsl(30, 80%, 80%);
	--col3-85: hsl(30, 80%, 85%);
	--col3-90: hsl(30, 80%, 90%);
	--col3-95: hsl(30, 80%, 95%);
	--col3-97: hsl(30, 80%, 97%);

	--col4-10: hsl(50, 90%, 10%);
	--col4-20: hsl(50, 90%, 20%);
	--col4-30: hsl(50, 90%, 30%);
	--col4-40: hsl(50, 90%, 45%);
	--col4-50: hsl(50, 90%, 50%);
	--col4-60: hsl(50, 90%, 60%);
	--col4-70: hsl(50, 90%, 70%);
	--col4-80: hsl(50, 90%, 80%);
	--col4-85: hsl(50, 90%, 85%);
	--col4-90: hsl(50, 90%, 90%);
	--col4-95: hsl(50, 90%, 95%);
	--col4-97: hsl(50, 90%, 97%);
	--col4-100: hsl(50, 90%, 99%);

	--col5-10: hsl(275, 100%, 10%);
	--col5-20: hsl(275, 100%, 20%);
	--col5-30: hsl(275, 100%, 30%);
	--col5-40: hsl(275, 100%, 45%);
	--col5-50: hsl(275, 100%, 50%);
	--col5-60: hsl(275, 100%, 60%);
	--col5-70: hsl(275, 100%, 70%);
	--col5-80: hsl(275, 100%, 80%);
	--col5-85: hsl(275, 100%, 85%);
	--col5-90: hsl(275, 100%, 90%);
	--col5-95: hsl(275, 100%, 95%);
	--col5-97: hsl(275, 100%, 97%);
	--col5-100: hsl(275, 100%, 99%);

	--col6-10: hsl(320, 80%, 10%);
	--col6-20: hsl(320, 80%, 20%);
	--col6-25: hsl(320, 80%, 25%);
	--col6-30: hsl(320, 80%, 30%);
	--col6-35: hsl(320, 80%, 35%);
	--col6-40: hsl(320, 80%, 40%);
	--col6-45: hsl(320, 80%, 45%);
	--col6-50: hsl(320, 80%, 50%);
	--col6-55: hsl(320, 80%, 55%);
	--col6-60: hsl(320, 80%, 60%);
	--col6-70: hsl(320, 80%, 70%);
	--col6-80: hsl(320, 80%, 80%);
	--col6-85: hsl(320, 80%, 85%);
	--col6-90: hsl(320, 80%, 90%);
	--col6-95: hsl(320, 80%, 95%);
	--col6-97: hsl(320, 80%, 97%);
	--col6-100: hsl(320, 80%, 99%);


	--colgray-00: hsl(0, 0%, 0%);
	--colgray-05: hsl(0, 0%, 5%);
	--colgray-10: hsl(0, 0%, 10%);
	--colgray-20: hsl(0, 0%, 20%);
	--colgray-30: hsl(0, 0%, 30%);
	--colgray-40: hsl(0, 0%, 40%);
	--colgray-50: hsl(0, 0%, 50%);
	--colgray-60: hsl(0, 0%, 60%);
	--colgray-70: hsl(0, 0%, 70%);
	--colgray-80: hsl(0, 0%, 80%);
	--colgray-85: hsl(0, 0%, 85%);
	--colgray-90: hsl(0, 0%, 90%);
	--colgray-95: hsl(0, 0%, 95%);
	--colgray-97: hsl(0, 0%, 97%);
	--colgray-100: hsl(0, 0%, 99%);
}

/* ----------------------------- */
/* min data */
*, *[class*=material-symbols], *.icon {
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
	line-height: 1.5;
	font-size: 10px;
}

*[class*=material-symbols], *.icon {
	line-height: 1;
}

button, *[role=button] {
    border: none;
    cursor: pointer;
}

*, *::after, *::before{
	box-sizing: border-box;
	font-family: sans-serif;
    padding: 0;
    margin: 0;
}	

br {
	display:block;
	content:"";
	margin-block: 4px;	
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

form {
	:is(input[type=text],input[type=number],input[type=password],textarea,select,optgroup,option) {
		font-size: 1.6rem;
		color: #000;
		background: hsl(0,0%,97%);
	}
	:is(input[type=text],input[type=number],input[type=password],textarea,select,optgroup,option)::placeholder {
		color: hsl(0,0%,80%);
	}
	:is(input[type=text],input[type=number],input[type=password],textarea,select,optgroup,option):focus {
		border-color: yellow;
	}
	:is(input[type=text],input[type=number],input[type=password],textarea) {
		width:100%;
		height:auto;
		padding:8px 4px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
	}
	textarea {
		min-height:200px;
	}
	select {
		padding: 4px 16px;
		border:solid 1px hsl(var(--col),100%,90%);
	}
	button {
		cursor: pointer;
		padding: 4px 24px;
		font-size: 1.6rem;
		color: #fff;
	}
}

body {
    container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
    min-height: 100dvh;
    margin: 0;
}

body > * {
	width: 100%;
}

/* ----------------------------- */
/* dialog data */
.dialog {
	width: 100%;
	height: 100dvh;
	position: fixed;
	top: 0;
	left: 0;
	background: hsla(0, 0%, 0%, .8);
	z-index: 9999;
	display: flex;
    border: none;
	* {
		font-size: 1.4rem;
	}
	.inner {
		min-width: 300px;
		max-width: 400px;
		width: 80%;
        display: flex;
        flex-direction: column;
		background: #fff;
	}
    .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.close {
	display: none;
}

.dialog.right.svh{
    justify-content: right;
    > button.close.icon {
        display: inline-block;
        min-height: 48px;
        min-width: 48px;
        align-content: center;
        text-align: center;
        font-size: 2rem;
		top: 10px;
		left: 10px;
        position: absolute;
		border: 1px solid #fff;
		background: #000;
		border-radius: 50%;
		color: #fff;
    }
    > .inner {
		padding-top: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.dialog.center .inner {
    max-height: calc(100svh - 50px);
    border-radius: 8px;
    padding: 0 0 8px;
    border: 1px solid var(--colgray-60);
    > .headline {
        width: 100%;
        height: 40px;
        display: flex;
    }
    > .headline > .label {
        padding-block: 8px;
        margin-top: 0;
        background: var(--col1-50);
        color: #fff;
        border-radius: 0 5px 0 0;
        flex-grow: 1;
        font-weight: bold;
        padding-inline: 8px;
        align-content: center;
    }
    > .headline > .icon {
        font-size: 2.2rem;
        border-radius: 5px 0 0 0;
        aspect-ratio: 1 / 1;
        width: 40px;
        background: #000;
        color: #fff;
    }
    > .data {
        max-height: calc(100% - 40px);
        overflow-y: auto;
    }
}

.dialog.center{
    justify-content: center;
    align-items: center;
}

.dialog.center.bottom{
    justify-content: center;
    align-items: flex-end;
}


body .dialog.detail.shop .inner.girl.profile {
    position: relative;
    gap: 8px;
    .data {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
    }
    .data .img {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        flex-shrink: 0;  /* 2. 縦Flexの中で絶対に潰れないように固定する */
    }
    .data .img > img {
        width: 80%;
    }
    .data *:not(.img) {
        padding-inline: 8px;
    }
    .data .name {
        font-size: 1.8rem;
        text-align: center;
    }
    .data .info {
        font-size: 1.6rem;
        text-align: center;
    }
    .data .style {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .data .style > * {
        text-align: center;
        border: 1px solid var(--col1-50);
        background: var(--col1-90);
        border-radius: 5px;
        flex-grow: 1;
        padding: 8px 16px;

    }
    .data .note {
        padding: 8px;
        border-radius: 5px;
        border: 1px dotted var(--col3-50);
    }
    .data .note.girl::before {
        display: block;
        color: #999;
        content: "女の子からのメッセージ";
    }
    .data .note.shop {
        border-color: var(--col5-50);
    }
    .data .note.shop::before {
        display: block;
        color: #999;
        content: "お店からのメッセージ";
    }
    button.move {
        width: 80px;
        border-radius: 0 5px 0 0;
        background: var(--col1-50);
        font-size: 1.8rem;
        line-height: 1;
        color: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    button.move * {
        font-size: 1.6rem;
    }
}

body > header#head.overrall {
	display: flex;
	align-items: center;
	padding-block: 16px;
	border-bottom: 1px dotted var(--col1-50);
    background: #fff;
    transition: all 0.3s;
    padding-inline: max(8px, calc((100% - 1000px) / 2));
    @media (max-width: 700px) {
        padding-inline: 8px;
    }

	.logo {
        max-width: 150px;
		width: 30%;
        background: #fff;
        text-align: left;
        position: relative;
        text-decoration: none;
        @media (max-width: 800px) {
            max-width: none;
            width: auto;
        }
	}
    .logo * {
        line-height: 1;
    }
    .logo .yorudeli {
        display: block;
        transform   : scale(1, 1.3);
        color: var(--col1-40);
        font-family: "Dela Gothic One", sans-serif;
        font-size: 4rem;
        @media (max-width: 800px) {
            font-size: 3rem;
        }
    }
    .logo .yorudeli::first-letter {
        color: #000;
    }
    .logo .area {
        position: absolute;
        top: -5px;
        right: -5px;
        background: var(--col1-25);
        color: #fff;
        font-size: 1.2rem;
        padding: 2px 4px;
        border-radius: 5px;
        @media (max-width: 800px) {
            top: -10px;
        }
    }
    h1 {
        font-size: 1.4rem;
    }
    .items {
        display: flex;
        gap: 8px;
        margin-left: auto;
        @media (min-width: 700px) {
            padding-right: 0;
        }
        * {
            font-size: 1.4rem;
            @media (min-width: 700px) {
                font-size: 1.6rem;
            }
        }
        > button {
            width: auto;
            line-height: 1;
            display: flex;
            gap: 8px;
            align-items: center;
            border: 1px var(--col6-50) solid;
            border-radius: 15px;
            background: #fff;
            padding: 0 8px 0 0;
        }
        > button .icon {
            font-size: 2.2rem;
            background: var(--col6-50);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            align-content: center;
            text-align: center;
            color: #fff;
        }
        > button .label {
            line-height: 1;
        }
    }
}
body > header#head.overrall.fix {
    position: fixed;
    border-bottom-width: 4px ;
    border-bottom-style: solid ;
    padding-block: 8px;
    z-index: 9999;
    .logo {
		max-width: 100px;
    }
    .logo .yorudeli {
        font-size: 3rem;
    }
    .logo .area {
        right: -15px;
    }
    .items * {
        font-size: 1.4rem;
    }
    .items > button .icon {
        font-size: 1.8rem;
    }
}

body > .overrall.bread {
	background: var(--col1-40);
    padding-block: 8px;
    overflow-x: auto;
    padding-inline: max(8px, calc((100% - 1000px) / 2));
    * {
        color: #fff;
    }
    > ol {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
	* {
		font-size: 1.4rem;
		line-height: 1;
	}
    a, a:visited {
        color: #fff;
    }
	ol > li:not(:last-of-type)::after {
		content: "/";
		margin-left: 8px;
	}
}

body > footer.overrall {
	display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--col1-30);
    * {
        font-size: 1.4rem;
        color: #fff;
        line-height: 1;
    }
    .about {
        padding-block: 24px;
        display: flex;
        max-width: 1000px;
        width: calc(100% - 8px);
        gap: 16px;
        margin-inline: auto;
        justify-content: center;
    }
    .copy {
        width: 100%;
        background: var(--col1-10);
        text-align: center;
        padding-block: 16px;
    }
}

body > main.overrall {
    width: calc(100% - 16px);
    min-height: 100svh;
    max-width: 1000px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
}

body .dialog.overrall.member .inner.auth {
    gap: 16px;
    :is(.selector, form) {
        padding-inline: 16px;
    }
    form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    form .label {
        text-align: center;
    }
    form button {
        border: 1px solid var(--colgray-60);
        background: #ccc;
        max-width: 200px;
        min-height: 40px;
        border-radius: 5px;
        margin-inline: auto;
        color: #000;
    }
    form button.forget {
        margin-inline: auto 0;
    }
    form.close {
        display: none;
    }
}

body .dialog.overrall.member.nav .inner .data {
    display: flex;
    flex-direction: column;
    a {
        min-height: 50px;
        padding-inline: 16px;
        border-bottom: 1px dotted#ccc;
        align-content: center;
        text-align: center;
    }
    button {
        width: 150px;
        margin-inline: auto;
        margin-top: 16px;
        background: #fff;
        border: 1px solid#666;
        border-radius: 5px;
        height: 30px;
        align-content: center;
    }
}