@charset "utf-8";
/* =======================================================================================



LAYOUT



======================================================================================= */
body.admin_login,
body.admin_login .submit_btn,
#masthead, #menu,
.entry_btn,
.user_bar [class*="user_bar_"]:hover { background-color: #627d87;}

body.admin,
body.admin main,
body.admin footer { background-color: #ebebeb; }

/* =======================================================================================



HEADER



======================================================================================= */
header a,
#nav,
.user_bar dt { color: #fff; }
.user_bar dd { background-color: rgba(98,125,135,.8); }
.user_bar [class*="user_bar_"]:hover { text-shadow: none; }
#nav strong { font-weight: 500; }
#nav strong　b { font-weight: 400; }
#nav li a,
#nav li span,
#nav li.nav_item2 a { border-top-color: #d8dbdc; }
#nav .nav_list > li:last-child a { border-bottom-color: #d8dbdc; }

#switch span { background-color: #fff; }

/* =======================================================================================



COMPONENT / MODULE

行送り 30pt → 30pt/15px(サイズ) = 2
⇒ line-height: 2;
文字間 115 → 115/ 1000 = 0.115
⇒ letter-spacing: .115em;

_unit (ひとまとまり article,section)
_panel (パネル(section))
_dsp (jQuery用 表示/非表示)
  _box (最小単位のレイアウトボックス(div,dl,ol,ul))
  _card_box (カード型レイアウト：ol,ul)
    _inner (boxに対してのインナー)
    _header(要素・コンテンツの上部)
    _body(要素・コンテンツの本文)
    _footer(要素・コンテンツの下部)
      _tbl (table)
      _card (li)
      _item (dt,dd,li)
      _btn (ボタン)
        _ttl (タイトル,dt)
        _txt (テキスト)
        _ico (アイコン)
        _img (画像)
        _bnr (バナー)



======================================================================================= */
.adm_unit { background-color: #fff; }
@media screen and (min-width: 640px) {
body.admin .ttl { font-size: 24px; }
body.admin .sub_ttl { font-size: 20px; }
body.admin .head_ttl { font-size: 18px; }
}

/* =======================================================================================



sort_box



======================================================================================= */
.sort_box { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.sort_box:has(.count) > .count { flex-grow: 2; margin-right: auto; color: #73879c; }
.sort_box > * { }
.sort_box > li:last-child {  }
.sort_box .normal_btn,
.sort_box label { height: 32px; font-size: 12px; }
.sort_box label { display: inline-block; vertical-align: sub; }
.sort_box .normal_btn { border: 1px solid #d8dce0; background-color: #efefef; color: #212529; text-shadow: rgba(255,255,255,.5) 0 -1px 0; }
.sort_box .normal_btn.cur { background-color: #fefefe; }
.sort_box .normal_btn:hover { background-color: #ccd2d7; text-shadow: none; }
/* =======================================================================================



fromto_box



======================================================================================= */
.fromto_box { flex-wrap: wrap; }
[class*="fromto_box"] > * { align-self: center; }
[class*="fromto_box"] > *:first-child,
[class*="fromto_box"] > *:last-child { flex-grow: 8; }
.fromto_box *:nth-child(2) { flex-grow: 1; text-align: center; }
.fromto_box *:nth-child(2) span:before { content: '～'; }
.search_unit .box.row:has(.fromto_box) { flex-wrap: wrap; }
@media screen and (min-width: 480px) {
.fromto_box { flex-wrap: nowrap; }
.search_unit .box.row:has(.fromto_box) >*:has(.fromto_box),
.box.row3:has(> *:last-child .fromto_box:only-of-type) > *:has(.fromto_box) { flex-basis: 100%; }
}
@media screen and (min-width: 960px) {
.search_unit .box.row:has(.fromto_box) >*:has(.fromto_box) { flex-basis: 50%; }
.box.row3:has(> *:last-child .fromto_box:only-of-type) > *:not(.fromto_box) { flex-basis: 25%; }
.box.row3:has(> *:last-child .fromto_box:only-of-type) > *:has(.fromto_box) { flex-basis: 50%; }
}
@media screen and (min-width: 1344px) {
.search_unit .box.row:has(.fromto_box) >*:has(.fromto_box) { flex-basis: 40%; }
}
/* =======================================================================================



device_box



======================================================================================= */
.device_box { justify-content: space-between; }
.device_box > * { flex-basis: 100%; background-color: #efefef; }
.device_box > *:has(.device_check:checked) { background-color: aliceblue; }
.device_ttl { cursor: pointer; }
@media screen and (min-width: 400px) {
.device_box { column-gap: .2rem; }
.device_box > * { flex-basis: calc(50% - .2rem); margin-bottom: .4rem; }
}
@media screen and (min-width: 560px) {
.device_box { column-gap: .25rem; }
.device_box > * { flex-basis: calc(50% - .25rem); margin-bottom: .5rem; }
}
@media screen and (min-width: 760px) {
.device_box { column-gap: .5rem; }
.device_box > * { flex-basis: calc(50% - .5rem); margin-bottom: 1rem; }
}
@media screen and (min-width: 880px) {
.device_box { column-gap: .25rem; }
.device_box > * { flex-basis: calc(25% - .5rem); }
}
/* =======================================================================================



parts_box



======================================================================================= */
.parts_box { flex-wrap: wrap; padding-right: .25rem; padding-left: .25rem; }
.parts_box > * { padding: 0 .25rem .25rem; }
.plusminus_box { }
.parts_box.box dt:has(strong) { padding-right: 0; padding-left: 0; }
.plusminus_box.box > *:has(input[type="number"]) { flex-grow: 2; padding-right: .2rem; padding-left: .2rem; padding-bottom: 0; }
.plusminus_box.box > *:has(> button.plusminus_btn),
.parts_box.box *:has(> input[type="text"]) { padding-right: 0; padding-left: 0; padding-bottom: 0; }
.parts_box.box *:has(> input[type="text"]) { padding-top: .2rem; }
.plusminus_box .plusminus_btn { width: 42px; border-radius: 0; }
.plusminus_box .plusminus_btn [class*="fa-"] { padding-right: 0; }
.plusminus_box input[type="number"] { min-width: 3em; }
/* WebKit ブラウザで、input type="number" のスピンボタンを非表示にする。 */
.plusminus_box input[type="number"]::-webkit-outer-spin-button,
.plusminus_box input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}
/* Firefox で、input type="number" のスピンボタンを非表示にする。また、入力欄の値表示を中央寄せにし、高さをボタンのサイズに合わせる。 */
.plusminus_box input[type="number"] {
  -moz-appearance: textfield;
  text-align: center;
}
@media screen and (max-width: 376px) {
.parts_box { justify-content: center; }
.parts_box > * { flex-basis: 100%; }
}
@media screen and (min-width: 376px) {
.parts_box > * { flex-basis: calc(100% / 2); }
}
@media screen and (min-width: 528px) {
.parts_box > * { flex-basis: calc(100% / 3); }
}
@media screen and (min-width: 720px) {
.parts_box > * { flex-basis: calc(100% / 4); }
}
@media screen and (min-width: 1216px) {
.parts_box > * { flex-basis: calc(100% / 6); }
}
@media screen and (min-width: 1216px) {
.parts_box > * { flex-basis: calc(100% / 6); }
}
@media screen and (min-width: 1536px) {
.parts_box > * { flex-basis: calc(100% / 8); }
}
@media screen and (min-width: 1856px) {
.parts_box > * { flex-basis: calc(100% / 10); }
}
@media screen and (min-width: 2240px) {
.parts_box > * { flex-basis: calc(100% / 12); }
}
@media screen and (min-width: 2560px) {
.parts_box > * { flex-basis: calc(100% / 14); }
}
/* =======================================================================================



lock



======================================================================================= */
.lock_dsp { position: relative; }
.lock_dsp.flag:has(input, select, textarea, button):hover { cursor: not-allowed; }
.lock_dsp.flag:has(input, select, textarea, button):after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(227,227,227,.5); content: ''; transition: all .2s linear; }
.lock_dsp:has(input, select, textarea, button):after { display: none; }
.lock_btn b:before { content: '入力可能'; }
.lock_btn.flag b:before { content: 'ロック中'; }
/* =======================================================================================



tmb_box



======================================================================================= */
.tmb_box > * { background-color: #efecd0; }
.tmb_box > * > dd { flex-grow: 0; }
.tmb_box > * > dd:last-child { }
.tmb_box dd a { display: block; position: relative; }
.tmb_box dd a:before { display: block; padding-top: 100%; content: ''; }
.tmb_box dd a img { display: block; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: cover; }
/* =======================================================================================



BACK TO THE TOP



======================================================================================= */

/* =======================================================================================



FOOTER



======================================================================================= */
body.admin_login #copyright { color: #fff; }
body.admin #copyright { color: #4b4b4b; }
/* =======================================================================================



OVERWRITE



======================================================================================= */