@charset "Shift_JIS";

/*---[simoom.net]msearch.css---*/

/*
	common color:emps,red,gray
*/

.flex-s {
	display:inline-flex;
	flex-direction:column;

	padding:0.5em 1.5em 0.5em 1.5em;
	border:1px dotted;
	border-radius:1em / 1em;
}
.flex-row {
	display:flex;
	flex-direction:row;

	margin:0 0 0.5em 0;
}
.flex-s .msearch {
	justify-content:end;
	text-align:right;
	font-weight:bold;
}
.flex-s .opt {
	justify-content:end;
}

.key .flex-item:nth-child(odd) {
	margin-right:0.5em;
}
.opt .flex-item:nth-child(odd) {
	margin-right:0.5em;
}
.opt .flex-item:nth-child(even) {
	margin-right:1em;
}

div.info {
	margin:0.5em 0;
	padding:0.5em 1em;
}
div.ribbon {
	margin:1em 0;
	padding:0.5em 1em;
	text-align:center;
}

div#result dl {
	margin:1em 0;
}
div#result dt {
	margin:0;
	padding:0;
	font-size:1.2em;
	font-weight:bold;
}
div#result dd:nth-of-type(odd) {
	margin:0;
	padding:0;
	font-weight:normal;
}
div#result dd:nth-of-type(even) {
	margin:0 0 1em 1em;
	padding:0;
	font-weight:normal;
}

ul.hlp {
	list-style:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQklEQVQYV2O0nx//nwEIDiYuZATRuAAjTKECVMVCHBowFMI0NKJpwKkQZAFIUyJUA0GFMDdTTyFBqwl6hmDwEApwAGKiJUOfwLO9AAAAAElFTkSuQmCC);
}
ul.hlp ul {
	list-style:none;
}

@media screen and (max-width: 750px) {
	.flex-s, .flex-row {
		display:flex;
		flex-direction:column;
	}
	.flex-item {
		margin:0!important;
		padding-left:0.5em;
	}
	.flex-item input[TYPE="text"], .flex-item select {
		width:100%;
	}
	.key .stxt {
		border-left:8px solid;
		margin:0 0 2px 0!important;
	}
	.opt .stxt {
		border-left:8px solid;
		margin:0.5em 0 2px 0!important;
	}

	div#result dt {
		font-size:1em;
	}
	div#result dt a {
		display:block;
		padding:0.5em 1em;

		border:1px solid;
		border-radius:0.5em / 0.5em;
	}
	div#result dd:nth-of-type(even) {
		margin:0.5em 0 1.5em 0;
		padding:0;
		font-weight:normal;
	}
}

/*** --------- COLOR(DEFAULT) --------- ***/

@media screen  {
	.ribbon{
		background-color:#CCCCCC;
	}
}

/*** --------- COLOR(DARK MODE) --------- ***/
@media screen and (prefers-color-scheme: dark) {
	.ribbon{
		background-color:#333333;
	}
}

/*** --------- COLOR(SP_DEFAULT) --------- ***/
@media screen and (max-width: 750px) {
	.key .stxt, .opt .stxt {
		background-color:#CCCCCC;
	}
}

/*** --------- COLOR(SP_DARK_MODE) --------- ***/

@media screen and (max-width: 750px) and (prefers-color-scheme: dark) {
	.key .stxt, .opt .stxt {
		background-color:#333333;
	}
}