@charset "UTF-8";


body.top-lebel > *:not(.modal) {
	width: 100%;
	padding-inline: calc((100% - 1000px) / 2);
}

body.top-lebel main {
	margin-top: -16px;
	background: var(--col1-50);
	display: flex;
    flex-wrap: wrap;
	align-items: center;
}

body.top-lebel main > * {
	width: 100%;
    @media (min-width: 600px) {
        width: 50%;
    }
}

body.top-lebel main .head-line {
	display: flex;
	flex-direction: column;
	gap: 8px;
	> * {
		width: 100%;
		color: #fff;
		padding-inline: 24px;
		text-align: right;
	}
	> h1 {
		font-size: 2.5rem;
        @media (max-width: 600px) {
            text-align: center;
        }
	}
	> p {
		font-size: 1.4rem;
		* {
			font-size: 1.4rem;
		}
	}
}

body.top-lebel main .selector {
	> div {
		background: var(--col1-70);
		padding: 8px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	> div > * {
		width: 100%;
	}
	> div .subject{
		border-radius: 5px;
		padding-block: 4px 8px;
		font-size: 1.8rem;
		background: var(--col1-50);
		color: #fff;
		text-align: center;
		line-height: 1;
		border: 1px solid var(--col1-90);
	}
	> div > dl {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	> div > dl > * {
		padding: 8px;
		background: var(--col1-90);
		width: 100%;
		display: flex;
        flex-wrap: wrap;
		gap: 8px;
		border-radius: 5px;
	}
	> div > dl > * > dl {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	> div > dl > * dt {
		width: 100%;
		color: var(--col1-50);
		font-size: 1.6rem;
		font-weight: bold;
	}

	> div > dl > * dd > a {
		display: block;
		background: var(--col1-50);
		padding: 4px 16px;
		color: #fff;
		font-size: 1.4rem;
		border-radius: 5px;
	}
}

body.top-lebel main .selector > div#hotel {
	background: var(--col4-90);
	.subject{
		background: var(--col4-50);
		border: 1px solid var(--col4-80);
	}
	dl > * {
		background: var(--col4-80);
	}
	dl > * dt {
		color: var(--col4-20);
	}

	dl > * dd > a {
		background: var(--col4-50);
		color: var(--col-link);
	}
}

body.top-lebel main .selector .select-type {
	flex-direction: row;
	flex-wrap: wrap;
	> * {
		width: calc((100% - 8px) / 2);
		padding: 4px 8px;
		text-align: center;
		color: #fff;
		font-size: 1.6rem;
		border-radius: 8px;
	}
	> .pref {
		background: var(--col1-50);
		border: 1px solid #fff;
	}

	> .hotel {
		background: var(--col4-50);
		color: black;
		border: 1px solid #fff;
	}
}