@charset "UTF-8";
/** ボタン css */
/*
 * divタグを推奨
 * ・inline要素ではボタンキャプションの両端揃えができない
 *
 * 【設定】
 * ■ボタン非活性制御（2度押し防止）
 *   data-disabled="設定値"
 *   ・stay or null:非活性
 *   ・release:非活性→処理後に戻す
 *   ・false:非活性しない
 * ■実行するスクリプト
 *   data-execid="実行するスクリプトを書いたボタン要素のid"
 *   ボタン要素を用意<input type="buttoun" id="exec-hoge" onclick="スクリプト" /> ＊exec-で書き始めると非表示になる
 *
 *  【サンプルHTML】
 *   <div class="btn sml gre" data-execid="exec-hoge" data-disabled="stay">ボタン</div><!-- ボタン見た目 -->
 *   <input type="button" id="exec-hoge" onclick="alert('abc');" /><!-- スクリプト実行されるボタン -->
 */

.btn-outer { padding-bottom: 5px; }
.btn-outer.sml { padding-bottom: 2px; }

/* 実行するボタンは非表示 */
*[id^="exec-"], *[id^="exec_"] { display: none; }

/* 非活性ボタン */
.btn.disabled { opacity: 0.6; cursor: not-allowed; /*cursor: default;*/ }

/* 押した感 */
.btn:not(.disabled):active { -webkit-transform: translateY(2px); transform: translateY(2px); box-shadow: none; }
.btn.sml:not(.disabled):active, .btn.min:not(.disabled):active { -webkit-transform: translateY(1px); transform: translateY(1px); box-shadow: none; }

/* ボタン：基本 */
.btn {
 border: 2px solid #000;
 background-color: #ccc;
 /*border-radius: 5px;*/ border-radius: 8px;
 display: inline-block;
 webkit-transition: none;
 transition: none;
 color: #fff;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
 box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
 font-weight: bold;
/*  height: 30px; */
/*  line-height: 30px; */
/*  min-width: 125px; */
/*  font-size: 16px; */
/*  padding: 0 18px; */
 -moz-text-align-last: justify;
 text-align-last: justify;
 text-justify: inter-ideograph;
 cursor: pointer;
 text-align: center;
 /*vertical-align: bottom; 下側の影が消えてしまう */

 /* キャプションの範囲選択禁止 */
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* ボタン：サイズ */
.btn.min { height: 20px; line-height: 18px; min-width: 60px; font-size: 11px; padding: 0 5px; text-shadow: none; box-shadow: 0 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2); border-radius: 5px; }
.btn.sml { height: 25px; line-height: 22px; min-width: 80px; font-size: 11px; padding: 0 9px; text-shadow: none; box-shadow: 0 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.2); border-radius: 5px; }
.btn.mid { height: 34px; line-height: 32px; min-width: 125px; font-size: 16px; padding: 0 18px; }
.btn.lrg { height: 50px; line-height: 46px; min-width: 200px; font-size: 23px; padding: 0 18px; }
.btn.lrg i { vertical-align: middle; } /* 大ボタンはアイコン位置調整 */
/* ボタン：バッジ型ボタン */
.btn.bdg { padding: 0; border-radius: 50%; min-width: unset; -moz-text-align-last: unset; text-align-last: unset; text-justify: unset; text-align: center; }
.btn.bdg.sml { height: 25px; width: 25px; line-height: 21px; }
.btn.bdg.mid { height: 30px; width: 30px; line-height: 26px; }
.btn.bdg.lrg {  }
.btn.bdg.icon { padding: 0 8px; /*line-height: 26px;*/ border-width: 2px; border-radius: 8px; font-weight: 900; font-family: "Font Awesome 5 Free"; text-align: center; width: 36px; }
.btn.bdg.icon i { padding-left: 0.3em; }

/* ボタン：色 */
.btn.gre { border-color: var(--gre-br); background-color: var(--gre-bg); background-image: -webkit-linear-gradient(top, var(--gre-tn), var(--gre-bg)); background-image: linear-gradient(to bottom, var(--gre-tn), var(--gre-bg)); }
.btn.gre:not(.disabled):hover, .btn.gre:not(.disabled):focus { border-color: var(--gre-br); background-color: var(--gre-tn); background-image: -webkit-linear-gradient(top, var(--gre-tn), var(--gre-tn)); background-image: linear-gradient(to bottom, var(--gre-tn), var(--gre-tn)); }
/* .btn.red { border-color: var(--red-br); background-color: var(--red-bg); background-image: -webkit-linear-gradient(top, var(--red-tn), var(--red-bg)); background-image: linear-gradient(to bottom, var(--red-tn), var(--red-bg)); } */
.btn.red { border-color: var(--red-br); background-color: var(--red-bg); /*background-image: -webkit-linear-gradient(top, var(--red-tn), var(--red-bg)); background-image: linear-gradient(to bottom, var(--red-tn), var(--red-bg));*/ }
.btn.red:not(.disabled):hover, .btn.red:not(.disabled):focus { border-color: var(--red-br); background-color: var(--red-tn); background-image: -webkit-linear-gradient(top, var(--red-tn), var(--red-tn)); background-image: linear-gradient(to bottom, var(--red-tn), var(--red-tn)); }
.btn.blu { border-color: var(--blu-br); background-color: var(--blu-bg); background-image: -webkit-linear-gradient(top, var(--blu-tn), var(--blu-bg)); background-image: linear-gradient(to bottom, var(--blu-tn), var(--blu-bg)); }
.btn.blu:not(.disabled):hover, .btn.blu:not(.disabled):focus { border-color: var(--blu-br); background-color: var(--blu-tn); background-image: -webkit-linear-gradient(top, var(--blu-tn), var(--blu-tn)); background-image: linear-gradient(to bottom, var(--blu-tn), var(--blu-tn)); }
.btn.nav { border-color: var(--nav-br); background-color: var(--nav-bg); background-image: -webkit-linear-gradient(top, var(--nav-tn), var(--nav-bg)); background-image: linear-gradient(to bottom, var(--nav-tn), var(--nav-bg)); }
.btn.nav:not(.disabled):hover, .btn.nav:not(.disabled):focus { border-color: var(--nav-br); background-color: var(--nav-tn); background-image: -webkit-linear-gradient(top, var(--nav-tn), var(--nav-tn)); background-image: linear-gradient(to bottom, var(--nav-tn), var(--nav-tn)); }
.btn.ora { border-color: var(--ora-br); background-color: var(--ora-bg); background-image: -webkit-linear-gradient(top, var(--ora-tn), var(--ora-bg)); background-image: linear-gradient(to bottom, var(--ora-tn), var(--ora-bg)); }
.btn.ora:not(.disabled):hover, .btn.ora:not(.disabled):focus { border-color: var(--ora-br); background-color: var(--ora-tn); background-image: -webkit-linear-gradient(top, var(--ora-tn), var(--ora-tn)); background-image: linear-gradient(to bottom, var(--ora-tn), var(--ora-tn)); }
.btn.tea { border-color: var(--tea-br); background-color: var(--tea-bg); background-image: -webkit-linear-gradient(top, var(--tea-tn), var(--tea-bg)); background-image: linear-gradient(to bottom, var(--tea-tn), var(--tea-bg)); }
.btn.tea:not(.disabled):hover, .btn.tea:not(.disabled):focus { border-color: var(--tea-br); background-color: var(--tea-tn); background-image: -webkit-linear-gradient(top, var(--tea-tn), var(--tea-tn)); background-image: linear-gradient(to bottom, var(--tea-tn), var(--tea-tn)); }
.btn.gra { border-color: var(--gra-br); background-color: var(--gra-bg); background-image: -webkit-linear-gradient(top, var(--gra-tn), var(--gra-bg)); background-image: linear-gradient(to bottom, var(--gra-tn), var(--gra-bg)); }
.btn.gra:not(.disabled):hover, .btn.gra:not(.disabled):focus { border-color: var(--gra-br); background-color: var(--gra-tn); background-image: -webkit-linear-gradient(top, var(--gra-tn), var(--gra-tn)); background-image: linear-gradient(to bottom, var(--gra-tn), var(--gra-tn)); }
.btn.dpk { border-color: var(--dpk-br); background-color: var(--dpk-bg); background-image: -webkit-linear-dpkdient(top, var(--dpk-tn), var(--dpk-bg)); background-image: linear-dpkdient(to bottom, var(--dpk-tn), var(--dpk-bg)); }
.btn.dpk:not(.disabled):hover, .btn.dpk:not(.disabled):focus { border-color: var(--dpk-br); background-color: var(--dpk-tn); background-image: -webkit-linear-dpkdient(top, var(--dpk-tn), var(--dpk-br)); background-image: linear-dpkdient(to bottom, var(--dpk-tn), var(--dpk-tn)); }

.btn.gumbydflt { color: #555; border-color: var(--gumbydflt-br); background-color: var(--gumbydflt-bg); background-image: -webkit-linear-gradient(top, var(--gumbydflt-tn), var(--gumbydflt-bg)); background-image: linear-gradient(to bottom, var(--gumbydflt-tn), var(--gumbydflt-bg)); }
.btn.gumbydflt:not(.disabled):hover, .btn.gumbydflt:not(.disabled):focus { color: #555; border-color: var(--gumbydflt-br); background-color: var(--gumbydflt-tn); background-image: -webkit-linear-gradient(top, var(--gumbydflt-tn), var(--gumbydflt-tn)); background-image: linear-gradient(to bottom, var(--gumbydflt-tn), var(--gumbydflt-tn)); }
.btn.primary { border-color: var(--primary-br); background-color: var(--primary-bg); background-image: -webkit-linear-gradient(top, var(--primary-tn), var(--primary-bg)); background-image: linear-gradient(to bottom, var(--primary-tn), var(--primary-bg)); }
.btn.primary:not(.disabled):hover, .btn.primary:not(.disabled):focus { border-color: var(--primary-br); background-color: var(--primary-tn); background-image: -webkit-linear-gradient(top, var(--primary-tn), var(--primary-tn)); background-image: linear-gradient(to bottom, var(--primary-tn), var(--primary-tn)); }
.btn.secondary { border-color: var(--secondary-br); background-color: var(--secondary-bg); background-image: -webkit-linear-gradient(top, var(--secondary-tn), var(--secondary-bg)); background-image: linear-gradient(to bottom, var(--secondary-tn), var(--secondary-bg)); }
.btn.secondary:not(.disabled):hover, .btn.secondary:not(.disabled):focus { border-color: var(--secondary-br); background-color: var(--secondary-tn); background-image: -webkit-linear-gradient(top, var(--secondary-tn), var(--secondary-tn)); background-image: linear-gradient(to bottom, var(--secondary-tn), var(--secondary-tn)); }
.btn.danger { border-color: var(--danger-br); background-color: var(--danger-bg); background-image: -webkit-linear-gradient(top, var(--danger-tn), var(--danger-bg)); background-image: linear-gradient(to bottom, var(--danger-tn), var(--danger-bg)); }
.btn.danger:not(.disabled):hover, .btn.danger:not(.disabled):focus { border-color: var(--danger-br); background-color: var(--danger-tn); background-image: -webkit-linear-gradient(top, var(--danger-tn), var(--danger-tn)); background-image: linear-gradient(to bottom, var(--danger-tn), var(--danger-tn)); }
.btn.warning { border-color: var(--warning-br); background-color: var(--warning-bg); background-image: -webkit-linear-gradient(top, var(--warning-tn), var(--warning-bg)); background-image: linear-gradient(to bottom, var(--warning-tn), var(--warning-bg)); }
.btn.warning:not(.disabled):hover, .btn.warning:not(.disabled):focus { border-color: var(--warning-br); background-color: var(--warning-tn); background-image: -webkit-linear-gradient(top, var(--warning-tn), var(--warning-tn)); background-image: linear-gradient(to bottom, var(--warning-tn), var(--warning-tn)); }
.btn.success { border-color: var(--success-br); background-color: var(--success-bg); background-image: -webkit-linear-gradient(top, var(--success-tn), var(--success-bg)); background-image: linear-gradient(to bottom, var(--success-tn), var(--success-bg)); }
.btn.success:not(.disabled):hover, .btn.success:not(.disabled):focus { border-color: var(--success-br); background-color: var(--success-tn); background-image: -webkit-linear-gradient(top, var(--success-tn), var(--success-tn)); background-image: linear-gradient(to bottom, var(--success-tn), var(--success-tn)); }
.btn.info { border-color: var(--info-br); background-color: var(--info-bg); background-image: -webkit-linear-gradient(top, var(--info-tn), var(--info-bg)); background-image: linear-gradient(to bottom, var(--info-tn), var(--info-bg)); }
.btn.info:not(.disabled):hover, .btn.info:not(.disabled):focus { border-color: var(--info-br); background-color: var(--info-tn); background-image: -webkit-linear-gradient(top, var(--info-tn), var(--info-tn)); background-image: linear-gradient(to bottom, var(--info-tn), var(--info-tn)); }

.btn.cattleya { border-color: var(--cattleya-br); background-color: var(--cattleya-bg); background-image: -webkit-linear-gradient(top, var(--cattleya-tn), var(--cattleya-bg)); background-image: linear-gradient(to bottom, var(--cattleya-tn), var(--cattleya-bg)); }
.btn.cattleya:not(.disabled):hover, .btn.cattleya:not(.disabled):focus { border-color: var(--cattleya-br); background-color: var(--cattleya-tn); background-image: -webkit-linear-gradient(top, var(--cattleya-tn), var(--cattleya-tn)); background-image: linear-gradient(to bottom, var(--cattleya-tn), var(--cattleya-tn)); }
.btn.c4c { border-color: var(--c4c-br); background-color: var(--c4c-bg); background-image: -webkit-linear-gradient(top, var(--c4c-tn), var(--c4c-bg)); background-image: linear-gradient(to bottom, var(--c4c-tn), var(--c4c-bg)); }
.btn.c4c:not(.disabled):hover, .btn.c4c:not(.disabled):focus { border-color: var(--c4c-br); background-color: var(--c4c-tn); background-image: -webkit-linear-gradient(top, var(--c4c-tn), var(--c4c-tn)); background-image: linear-gradient(to bottom, var(--c4c-tn), var(--c4c-tn)); }



/* ボタン：アイコン付き ※font awesome使用「https://fontawesome.com/cheatsheet」 */
.btn.icn:before { font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grascale; -webkit-font-smoothing: antialiased; font-weight: 900; content: ''; margin-right: 0.3em; width: 20px; }
.btn.icn i { margin-right: 0.3em; }
.btn.icn.fas:before { font-weight: 900; }
.btn.icn.far:before { font-weight: 400; }
.btn.sml.icn:before { margin-right: 0; width: 16px; }
.btn.mid.icn:before { margin-right: 0.3em; width: 20px; }
.btn.bdg.icn:before { margin-right: 0; width: 20px; }
/* ボタン：アイコン付き アイコン */
.btn.icn.i-signin:before { content: '\f2f6'; } /* ログイン */
.btn.icn.i-signout:before { content: '\f2f5'; } /* ログアウト */
.btn.icn.i-add:before { content: '\f067'; } /* 追加 */
.btn.icn.i-reg:before { content: '\f00c'; } /* 登録 */
.btn.icn.i-del:before { content: '\f00d'; } /* 物理削除 */
.btn.icn.i-hid:before { content: '\f2ed'; } /* 論理削除 */
.btn.icn.i-hid-restore:before { content: '\f82a'; } /* 論理削除を戻す */
.btn.icn.i-cancel:before { content: '\f00d'; } /* Ｘボタン */
.btn.icn.i-redo:before { content: '\f2ea'; } /* 戻す 円の矢印 */
.btn.icn.i-bck:before { content: '\f060'; } /* 戻る ← */
.btn.icn.i-edt:before { content: '\f305'; } /* 編集 */
.btn.icn.i-srt-shuffle:before { content: '\f074'; } /* 並び替え */
.btn.icn.i-dwl:before { content: '\f019'; } /* ダウンロード */
.btn.icn.i-upl:before { content: '\f093'; } /* アップロード */
.btn.icn.i-pri:before { content: '\f02f'; } /* 印刷 */
.btn.icn.i-up:before { content: '\f062'; } /* ↑ */
.btn.icn.i-down:before { content: '\f063'; } /* ↓ */
.btn.icn.i-fav:before { content: '\f005'; } /* お気に入り */

/* 通常ラジオボタン */
/* サンプルHTML
<div class="rdo gre"><input type="radio" name="hoge" id="rdo1" /><label for="rdo1">ほげ</label></div>
 */
 /* ラジオ・チェック共通 blockにすることで「...」とエラー時の赤枠に対応 横並びにするときはinline-block＋width指定する */
div.rdo, div.chk { /*display: contents;*/ display: block; cursor: pointer; }

div.rdo input[type="radio"] { display: none; }
div.rdo label { padding-left: 1.2em; line-height: 21px; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; position: relative; display: inline-block; vertical-align: middle; cursor: pointer; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.rdo label:before { content: ""; display: block; position: absolute; top: 4px; left: 0; width: 10px; height: 10px; border: 1px solid #555; border-radius: 50%; }
div.rdo label:after  { content: ""; display: block; position: absolute; top: 6px; left: 2px; width: 8px; height: 8px; border-radius: 50%; }
div.rdo input[type="radio"]:checked + label:before { border: 1px solid #555; }
div.rdo input[type="radio"]:checked + label:after { background-color: #555; }
div.rdo input[type="radio"]:checked + label { color: #555; }
/* 通常ラジオ：サイズ */
div.rdo.lrg label:before { top: 3px; width: 12px; height: 12px; } div.rdo.lrg label:after { top: 5px; left: 2.4px; width: 10px; height: 10px; }
div.rdo.mid label:before { top: 4px; width: 10px; height: 10px; } div.rdo.mid label:after { top: 6px; left: 2.4px; width: 8px; height: 8px; }
div.rdo.sml label:before { top: 5px; width: 8px; height: 8px; } div.rdo.sml label:after { top: 7px; left: 2.4px; width: 6px; height: 6px; }
/* 通常ラジオ：色 */
div.rdo.gre input[type="radio"]:checked + label:before { border-color: var(--gre); } div.rdo.gre input[type="radio"]:checked + label:after { background-color: var(--gre); } div.rdo.gre input[type="radio"]:checked + label { color: var(--gre); }
div.rdo.red input[type="radio"]:checked + label:before { border-color: var(--red); } div.rdo.red input[type="radio"]:checked + label:after { background-color: var(--red); } div.rdo.red input[type="radio"]:checked + label { color: var(--red); }
div.rdo.blu input[type="radio"]:checked + label:before { border-color: var(--blu); } div.rdo.blu input[type="radio"]:checked + label:after { background-color: var(--blu); } div.rdo.blu input[type="radio"]:checked + label { color: var(--blu); }
div.rdo.nav input[type="radio"]:checked + label:before { border-color: var(--nav); } div.rdo.nav input[type="radio"]:checked + label:after { background-color: var(--nav); } div.rdo.nav input[type="radio"]:checked + label { color: var(--nav); }
div.rdo.ora input[type="radio"]:checked + label:before { border-color: var(--ora); } div.rdo.ora input[type="radio"]:checked + label:after { background-color: var(--ora); } div.rdo.ora input[type="radio"]:checked + label { color: var(--ora); }
div.rdo.tea input[type="radio"]:checked + label:before { border-color: var(--tea); } div.rdo.tea input[type="radio"]:checked + label:after { background-color: var(--tea); } div.rdo.tea input[type="radio"]:checked + label { color: var(--tea); }
div.rdo.gra input[type="radio"]:checked + label:before { border-color: var(--gra); } div.rdo.gra input[type="radio"]:checked + label:after { background-color: var(--gra); } div.rdo.gra input[type="radio"]:checked + label { color: var(--gra); }
div.rdo.dpk input[type="radio"]:checked + label:before { border-color: var(--dpk); } div.rdo.dpk input[type="radio"]:checked + label:after { background-color: var(--dpk); } div.rdo.dpk input[type="radio"]:checked + label { color: var(--dpk); }
div.rdo.gumbydflt input[type="radio"]:checked + label:before { border-color: var(--gumbydflt); } div.gumbydflt.rdo input[type="radio"]:checked + label:after { background-color: var(--gumbydflt); } div.rdo.gumbydflt input[type="radio"]:checked + label { color: var(--gumbydflt); }
div.rdo.primary input[type="radio"]:checked + label:before { border-color: var(--primary); } div.primary.rdo input[type="radio"]:checked + label:after { background-color: var(--primary); } div.rdo.primary input[type="radio"]:checked + label { color: var(--primary); }
div.rdo.secondary input[type="radio"]:checked + label:before { border-color: var(--secondary); } div.secondary.rdo input[type="radio"]:checked + label:after { background-color: var(--secondary); } div.rdo.secondary input[type="radio"]:checked + label { color: var(--secondary); }
div.rdo.danger input[type="radio"]:checked + label:before { border-color: var(--danger); } div.danger.rdo input[type="radio"]:checked + label:after { background-color: var(--danger); } div.rdo.danger input[type="radio"]:checked + label { color: var(--danger); }
div.rdo.warning input[type="radio"]:checked + label:before { border-color: var(--warning); } div.warning.rdo input[type="radio"]:checked + label:after { background-color: var(--warning); } div.rdo.warning input[type="radio"]:checked + label { color: var(--warning); }
div.rdo.success input[type="radio"]:checked + label:before { border-color: var(--success); } div.success.rdo input[type="radio"]:checked + label:after { background-color: var(--success); } div.rdo.success input[type="radio"]:checked + label { color: var(--success); }
div.rdo.info input[type="radio"]:checked + label:before { border-color: var(--info); } div.info.rdo input[type="radio"]:checked + label:after { background-color: var(--info); } div.rdo.info input[type="radio"]:checked + label { color: var(--info); }
div.rdo.cattleya input[type="radio"]:checked + label:before { border-color: var(--cattleya); } div.cattleya.rdo input[type="radio"]:checked + label:after { background-color: var(--cattleya); } div.rdo.cattleya input[type="radio"]:checked + label { color: var(--cattleya); }
div.rdo.c4c input[type="radio"]:checked + label:before { border-color: var(--c4c); } div.c4c.rdo input[type="radio"]:checked + label:after { background-color: var(--c4c); } div.rdo.c4c input[type="radio"]:checked + label { color: var(--c4c); }
div.rdo.tenmin input[type="radio"]:checked + label:before { border-color: var(--tenmin); } div.tenmin.rdo input[type="radio"]:checked + label:after { background-color: var(--tenmin); } div.rdo.tenmin input[type="radio"]:checked + label { color: var(--tenmin); }


/* 帯型ラジオ：基本 */
/* サンプルHTML
 <div class="band-rdo sep3">
  <input type="radio" name="hoge" id="rdo1" /><label for="rdo1">A</label>
  <input type="radio" name="hoge" id="rdo2" /><label for="rdo2">B</label>
  <input type="radio" name="hoge" id="rdo3" /><label for="rdo3">C</label>
 </div>
 */
div.band-rdo label { display: block; float: left; cursor: pointer; margin: 0; padding: 12px 5px; border-right: 1px solid #abb2b7; color: #555e64; font-size: 14px; text-align: center; line-height: 1; transition: .2s; color: #fff; background-color: #c0c0c0; }
div.band-rdo label:first-of-type { border-radius: 7px 0 0 7px; }
div.band-rdo label:last-of-type { border-right: 0px; border-radius: 0 7px 7px 0; }
/* 帯型ラジオ：サイズ */
div.band-rdo.min label { padding: 5px 2px; font-size: 11px;  } div.band-rdo.sml label:first-of-type { border-radius: 7px 0 0 7px; } div.band-rdo.sml label:last-of-type { border-right: 0px; border-radius: 0 7px 7px 0; }
div.band-rdo.sml label { padding: 8px 4px; font-size: 13px;  } div.band-rdo.sml label:first-of-type { border-radius: 7px 0 0 7px; } div.band-rdo.sml label:last-of-type { border-right: 0px; border-radius: 0 7px 7px 0; }
div.band-rdo.mid label { padding: 12px 5px; font-size: 14px; } div.band-rdo.mid label:first-of-type { border-radius: 7px 0 0 7px; } div.band-rdo.mid label:last-of-type { border-right: 0px; border-radius: 0 7px 7px 0; }
div.band-rdo.lrg label { } div.band-rdo.lrg label:first-of-type { } div.band-rdo.lrg label:last-of-type { }
/* 帯型ラジオ：分割 */
div.band-rdo.sep2 label { width: calc(100%/2); }
div.band-rdo.sep3 label { width: calc(100%/3); }
div.band-rdo.sep4 label { width: calc(100%/4); }
div.band-rdo.sep5 label { width: calc(100%/5); }
div.band-rdo.sep6 label { width: calc(100%/6); }
div.band-rdo.sep7 label { width: calc(100%/7); }
div.band-rdo.sep8 label { width: calc(100%/8); }
div.band-rdo.sep9 label { width: calc(100%/9); }
div.band-rdo.sep10 label { width: calc(100%/10); }
div.band-rdo input[type="radio"] { display: none; }
/* 帯型ラジオ：色 */
div.band-rdo input#rdo1[type="radio"]:checked+label { background-color: var(--red); }
div.band-rdo input#rdo2[type="radio"]:checked+label { background-color: var(--blu); }
div.band-rdo input#rdo3[type="radio"]:checked+label { background-color: var(--gre); }
div.band-rdo input#rdo4[type="radio"]:checked+label { background-color: var(--ora); }
div.band-rdo input#rdo5[type="radio"]:checked+label { background-color: var(--tea); }
div.band-rdo input#rdo6[type="radio"]:checked+label { background-color: var(--dpk); }

div.band-rdo input#rdo7[type="radio"]:checked+label { background-color: #ECE038; }
div.band-rdo input#rdo8[type="radio"]:checked+label { background-color: #E1344C; }
div.band-rdo input#rdo9[type="radio"]:checked+label { background-color: #965042; }
div.band-rdo input#rdo10[type="radio"]:checked+label { background-color: #3F4551; }

/* 通常チェックボックス */
/* サンプルHTML
<div class="chk c4c"><input type="checkbox" id="chk_4" name="invoice_chk" value="4"><label for="chk_4" class="chkbox">あいう</label></div>
*/
div.chk input[type="checkbox"] { display: none; }
div.chk label { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; position: relative; display: inline-block; line-height: 19px; padding-left: 1.8em; vertical-align: middle; cursor: pointer; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.chk label { line-height: 22px; padding-left: 1.4em; } /* 位置がまだ定まっていない... */

div.chk label:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 6px; display: block; margin-top: -6px; width: 3px; height: 7px; border-right: 3px solid #ccc; border-bottom: 3px solid #ccc; content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
div.chk input[type=checkbox]:checked+label:before { opacity: 1; }
div.chk label:after { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; position: absolute; top: 50%; left: 0; display: block; margin-top: -9px; width: 14px; height: 14px; border: 2px solid #ccc; border-radius: 6px; content: ''; }
/* 通常チェックボックス：サイズ */
div.chk.lrg label:before { margin-top: -7px; width: 5px; height: 9px; }
div.chk.lrg label:after { margin-top: -10px; width: 16px; height: 16px; }
div.chk.mid label:before { margin-top: -6px; width: 3px; height: 7px; }
div.chk.mid label:after { margin-top: -9px; width: 14px; height: 14px; }
div.chk.sml label:before { margin-top: -4px; width: 2px; height: 6px; }
div.chk.sml label:after { margin-top: -7px; width: 12px; height: 12px; }
div.chk.min label:before { margin-top: -5px; width: 1px; height: 5px; }
div.chk.min label:after { margin-top: -8px; width: 10px; height: 10px; }

/* 通常チェックボックス：色 */
div.chk label:before { border-right-color: var(--gra); border-bottom-color: var(--gra) } div.chk input[type=checkbox]:checked+label:after { border-color: var(--gra); }
div.chk.gre label:before { border-right-color: var(--gre); border-bottom-color: var(--gre) } div.chk.gre input[type=checkbox]:checked+label:after { border-color: var(--gre); }
div.chk.red label:before { border-right-color: var(--red); border-bottom-color: var(--red) } div.chk.red input[type=checkbox]:checked+label:after { border-color: var(--red); }
div.chk.blu label:before { border-right-color: var(--blu); border-bottom-color: var(--blu) } div.chk.blu input[type=checkbox]:checked+label:after { border-color: var(--blu); }
div.chk.nav label:before { border-right-color: var(--nav); border-bottom-color: var(--nav) } div.chk.nav input[type=checkbox]:checked+label:after { border-color: var(--nav); }
div.chk.ora label:before { border-right-color: var(--ora); border-bottom-color: var(--ora) } div.chk.ora input[type=checkbox]:checked+label:after { border-color: var(--ora); }
div.chk.tea label:before { border-right-color: var(--tea); border-bottom-color: var(--tea) } div.chk.tea input[type=checkbox]:checked+label:after { border-color: var(--tea); }
div.chk.gra label:before { border-right-color: var(--gra); border-bottom-color: var(--gra) } div.chk.gra input[type=checkbox]:checked+label:after { border-color: var(--gra); }
div.chk.dpk label:before { border-right-color: var(--dpk); border-bottom-color: var(--dpk) } div.chk.dpk input[type=checkbox]:checked+label:after { border-color: var(--dpk); }
div.chk.gumbydflt label:before { border-right-color: var(--gumbydflt); border-bottom-color: var(--gumbydflt) } div.chk.gumbydflt input[type=checkbox]:checked+label:after { border-color: var(--gumbydflt); }
div.chk.primary label:before { border-right-color: var(--primary); border-bottom-color: var(--primary) } div.chk.primary input[type=checkbox]:checked+label:after { border-color: var(--primary); }
div.chk.secondary label:before { border-right-color: var(--secondary); border-bottom-color: var(--secondary) } div.chk.secondary input[type=checkbox]:checked+label:after { border-color: var(--secondary); }
div.chk.danger label:before { border-right-color: var(--danger); border-bottom-color: var(--danger) } div.chk.danger input[type=checkbox]:checked+label:after { border-color: var(--danger); }
div.chk.warning label:before { border-right-color: var(--warning); border-bottom-color: var(--warning) } div.chk.warning input[type=checkbox]:checked+label:after { border-color: var(--warning); }
div.chk.success label:before { border-right-color: var(--success); border-bottom-color: var(--success) } div.chk.success input[type=checkbox]:checked+label:after { border-color: var(--success); }
div.chk.info label:before { border-right-color: var(--info); border-bottom-color: var(--info) } div.chk.info input[type=checkbox]:checked+label:after { border-color: var(--info); }
div.chk.cattleya label:before { border-right-color: var(--cattleya); border-bottom-color: var(--cattleya) } div.chk.cattleya input[type=checkbox]:checked+label:after { border-color: var(--cattleya); }
div.chk.c4c label:before { border-right-color: var(--c4c); border-bottom-color: var(--c4c) } div.chk.c4c input[type=checkbox]:checked+label:after { border-color: var(--c4c); }
div.chk.tenmin label:before { border-right-color: var(--tenmin); border-bottom-color: var(--tenmin) } div.chk.tenmin input[type=checkbox]:checked+label:after { border-color: var(--tenmin); }

div.chk.yel label:before { border-right-color: #ECE038; border-bottom-color: #ECE038 } div.chk.yel input[type=checkbox]:checked+label:after { border-color: #ECE038; }
div.chk.ben label:before { border-right-color: #E1344C; border-bottom-color: #E1344C } div.chk.ben input[type=checkbox]:checked+label:after { border-color: #E1344C; }
div.chk.cha label:before { border-right-color: #965042; border-bottom-color: #965042 } div.chk.cha input[type=checkbox]:checked+label:after { border-color: #965042; }
div.chk.blk label:before { border-right-color: #3F4551; border-bottom-color: #3F4551 } div.chk.blk input[type=checkbox]:checked+label:after { border-color: #3F4551; }

/* トグル型チェックボックス：基本 */
div.toggle-chk { letter-spacing: 0; text-align: center; position: relative; width: 45px; background: #fff; }
div.toggle-chk input[type="checkbox"] { display: none; }
div.toggle-chk label { display: block; box-sizing: border-box; border: 2px solid #ccc; background-color: #fff; border-radius: 30px; margin-bottom: 0; height: 23px; }
div.toggle-chk label:after { content: ' '; position: absolute; width: 17px; height: 17px; background-color: #e5e5e5; top: 2.4px; left: 2.2px; border: 1px solid #ccc; border-radius: 50%; transition: .2s; }
div.toggle-chk input[type="checkbox"]:checked+label { border-color: #333; }
/* div.toggle-chk input[type="checkbox"]:checked ~ label:after 「~」は「何々の後に」になるのでコレでもOK 「+」はチェック・ラジオ専用 */
div.toggle-chk input[type="checkbox"]:checked+label:after { transform: translateX(22px); background-color: #555; border-color: #333; }
/* トグル型チェックボックス：サイズ */
div.toggle-chk.sml { } div.toggle-chk.sml label { } div.toggle-chk.sml label:after { }
div.toggle-chk.mid { width: 45px; } div.toggle-chk.mid label { border-radius: 30px; height: 23px; } div.toggle-chk.mid label:after { width: 17px; height: 17px; top: 2.4px; left: 2.2px; }
div.toggle-chk.lrg { } div.toggle-chk.lrg label { } div.toggle-chk.lrg label:after { }
/* トグル型チェックボックス：色 */
div.toggle-chk.gre {} div.toggle-chk.gre input[type="checkbox"]:checked+label { border-color: var(--gre-br); } div.toggle-chk.gre input[type="checkbox"]:checked+label:after { transform: translateX(22px); background-color: var(--gre-bg); border-color: var(--gre-br); }
div.toggle-chk.red {} div.toggle-chk.red input[type="checkbox"]:checked+label { border-color: var(--red-br); } div.toggle-chk.red input[type="checkbox"]:checked+label:after { transform: translateX(22px); background-color: var(--red-bg); border-color: var(--red-br); }
div.toggle-chk.blu {} div.toggle-chk.blu input[type="checkbox"]:checked+label { border-color: var(--blu-br); } div.toggle-chk.blu input[type="checkbox"]:checked+label:after { transform: translateX(22px); background-color: var(--blu-bg); border-color: var(--blu-br); }
div.toggle-chk.gra {} div.toggle-chk.gra input[type="checkbox"]:checked+label { border-color: var(--gra-br); } div.toggle-chk.gra input[type="checkbox"]:checked+label:after { transform: translateX(22px); background-color: var(--gra-bg); border-color: var(--gra-br); }

/* アコーディオンボタン */
.accordion-box { position: relative; }
.accordion-box.open .acrd-btn { border-radius: 5px 5px 0 0; margin-bottom: 0 !important; }
.accordion-box .acrd-btn:after { content: '\f055'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 2em; }
.accordion-box.close .acrd-btn:after { content: '\f055'; }
.accordion-box.open .acrd-btn:after { content: '\f056'; }
.accordion-box .acrd-body { display: none; padding-left: 1em; border: 1px solid #ccc; border-top: none; border-radius: 0 0 5px 5px; }
.accordion-box.close .acrd-body { display: none; }
.accordion-box.open .acrd-body { display: block; }