@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; } }