@charset "UTF-8";

body.find.shops > main > .type-selector {
	width: 100%;
	display: flex;
    flex-wrap: wrap;
	gap: 16px;
	padding-block: 16px;
	justify-content: space-between;
    background: #fff;
    border-bottom: 1px dotted #999;
	* {
		font-size: 1.4rem;
	}
	.group {
        border: none;
		display: flex;
		gap: 4px;
        width: 100%;
        @media (min-width: 700px) {
            width: auto;
            gap: 8px;
        }
	}
    .group:not(.select-types) {
        justify-content: flex-end;
        @media (min-width: 700px) {
            gap: 8px;
            justify-content: flex-start;
        }
    }
	.group :is(label, span) {
		display: flex;
		gap: 4px;
		align-items: center;
		border-radius: 30px;
		padding: 4px 8px;
		line-height: 1;
		color: #000;
		background: #fff;
        @media (min-width: 700px) {
            padding: 4px 16px;
        }
	}
	.group label.sort {
		background: #000;
		color: #fff;
		font-weight: bold;
		border: 1px dotted #000;
	}
	.group label.sort.focus {
		background: var(--col4-40);
		color: #000;
	}
	.group label:is(.open, .hotel) {
		border: 1px dotted #999;
	}
	.group label.sort input[type=radio] {
		margin: 0;
		padding: 0;
	}
    .group select {
        border: 1px solid #000;
        border-radius: 30px;
        padding-inline: 8px;
        background: #fff;
        @media (min-width: 700px) {
            padding-inline: 16px;
        }
    }
	button {
        border: 0;
		color: var(--col1-97);
		text-decoration: none;
		background: blue;
		color: #fff;
		border-radius: 30px;
		padding: 8px 16px;
	}

    .group.select-types {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .group.select-types > * {
        width: calc((100% - 16px) / 2);
    }
    .group.select-types > .caption {
        width: 100%;
        background: none;
        font-weight: bold;
        padding-inline: 0;
        
    }
    .group.select-types > button {
        line-height: 1;
        min-height: 50px;
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 1.8rem;
        font-weight: bold;
        border-radius: 5px;
        color: #fff;
        text-decoration: none;
        padding: 4px;
        justify-content: center;
        border: 1px solid #000;
    }
    .group.select-types button *[class*=material-] {
        padding-inline: 0;
        font-size: 3rem;
        color: #fff;
        background: none;
        animation: vibration 0.5s linear infinite;
    }
    .group.select-types > button.ranking {
        background-color: red;
        border: 1px solid #0056b3; /* 背景より少し暗い色 */
    }

    .group.select-types > button.recommend {
        background: var(--col8-45);
        border: 1px dotted var(--col8-30);
    }
}
    @keyframes vibration {
        0% { transform: translate(-1px, -1px); }
        10% { transform: translate(-1px, -1px); }
        20% { transform: translate(1px, 1px); }
        20%, 99%{ transform: translate(0, 0) rotate(0deg); }
        100% { transform: translate(0, 0); }
    }