@charset "UTF-8";
/**
 * ボタン css
 * @version 23.05.26
 * @version 23.10.16 アイコンの位置調整 バッジボタン調整
 * @version 23.12.26 ラジオ/チェックボックスのlabelの範囲選択禁止を追加
 * @version 24.03.19 アイコンの位置調整
 * @version 24.04.30 ボタンデザインを平面的に変更
 * @version 24.06.11 非選択のラジオ・チェックの見た目を変更
 * @version 24.09.05 帯型ラジオに選択状態アイコンを追加
 * @version 24.12.03 非活性のラジオ/チェックボックスのポインターイベントを無効に変更
 * @version 25.07.29 帯型ラジオ/チェックボックスの横幅計算を除去
 */

.btn-outer { padding: 4px 0; }
.btn-outer.sml { padding: 2px 0; }
/*.btn:not(.bdg):focus { outline: var(--blu) 2px solid; }*/

/* 非活性ボタン */
.btn:disabled { opacity: 0.6; cursor: var(--cur-ban); }
:is([type="radio"], [type="checkbox"]):disabled + label { pointer-events: none; opacity: 0.6; }

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

/* ボタン：基本 */
/* [html]
<button type="button" class="btn mid red icn i-reg lockdbl" onclick="xxx();"><a>登録</a></button>
-option-
・mid:サイズ
・red:背景色
・icn:アイコン有り i-xxxとセット
・init-disabled:初期表示は必ずdisabled
・lockdbl:二度押し防止
・vc-btn:入力チェックに連動
 */
.btn {
 border: 1px solid;
 background-color: #ccc;
 border-radius: 12px;
 display: inline-block;
 transition: none;
 color: #fff;
/* box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);*/
 -moz-text-align-last: justify;
 text-align-last: justify;
 text-justify: inter-ideograph;
 cursor: pointer;
 text-align: center;
}
.btn a { color: unset; display: inline-block; width: 100%; pointer-events: none; }
.btn a:hover { text-decoration: none; }
/* キャプションの範囲選択禁止 */
.btn, input[type="radio"]+label, input[type="checkbox"]+label {
 -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 { min-width:  52px; font-size: 11px; padding: 2px  8px; }
.btn.sml { min-width:  80px; font-size: 13px; padding: 2px 12px; }
.btn.mss { min-width:  90px; font-size: 14px; padding: 4px 12px; }
.btn.mms { min-width: 100px; font-size: 15px; padding: 4px 16px; }
.btn.mid { min-width: 124px; font-size: 16px; padding: 4px 22px; }
.btn.lmm { min-width: 160px; font-size: 20px; padding: 4px 22px; }
.btn.lrg { min-width: 200px; font-size: 24px; padding: 6px 22px; }
/* ボタン：バッジ型ボタン */
.btn.bdg { border-radius: 50%; -moz-text-align-last: unset; text-align-last: unset; text-justify: unset; text-align: center; min-width: 36px; padding: 4px; }
.btn.bdg.min { min-width: 27px; border-width: 1px; }
.btn.bdg.sml { min-width: 32px; }
.btn.bdg.lrg { min-width: 49px; }

/* ボタン：色 */
.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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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.def { color: #555; border-color: var(--def-br); background-color: var(--def-bg); background-image: -webkit-linear-gradient(top, var(--def-tn), var(--def-bg)); background-image: linear-gradient(to bottom, var(--def-tn), var(--def-bg)); }
.btn.def:not(:disabled):hover { color: #555; border-color: var(--def-br); background-color: var(--def-tn); background-image: -webkit-linear-gradient(top, var(--def-tn), var(--def-tn)); background-image: linear-gradient(to bottom, var(--def-tn), var(--def-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 { 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.pri { border-color: var(--pri-br); background-color: var(--pri-bg); background-image: -webkit-linear-gradient(top, var(--pri-tn), var(--pri-bg)); background-image: linear-gradient(to bottom, var(--pri-tn), var(--pri-bg)); }
.btn.pri:not(:disabled):hover { border-color: var(--pri-br); background-color: var(--pri-tn); background-image: -webkit-linear-gradient(top, var(--pri-tn), var(--pri-tn)); background-image: linear-gradient(to bottom, var(--pri-tn), var(--pri-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 { 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.sec { border-color: var(--sec-br); background-color: var(--sec-bg); background-image: -webkit-linear-gradient(top, var(--sec-tn), var(--sec-bg)); background-image: linear-gradient(to bottom, var(--sec-tn), var(--sec-bg)); }
.btn.sec:not(:disabled):hover { border-color: var(--sec-br); background-color: var(--sec-tn); background-image: -webkit-linear-gradient(top, var(--sec-tn), var(--sec-tn)); background-image: linear-gradient(to bottom, var(--sec-tn), var(--sec-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 { 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.dan { border-color: var(--dan-br); background-color: var(--dan-bg); background-image: -webkit-linear-gradient(top, var(--dan-tn), var(--dan-bg)); background-image: linear-gradient(to bottom, var(--dan-tn), var(--dan-bg)); }
.btn.dan:not(:disabled):hover { border-color: var(--dan-br); background-color: var(--dan-tn); background-image: -webkit-linear-gradient(top, var(--dan-tn), var(--dan-tn)); background-image: linear-gradient(to bottom, var(--dan-tn), var(--dan-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 { 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.war { border-color: var(--war-br); background-color: var(--war-bg); background-image: -webkit-linear-gradient(top, var(--war-tn), var(--war-bg)); background-image: linear-gradient(to bottom, var(--war-tn), var(--war-bg)); }
.btn.war:not(:disabled):hover { border-color: var(--war-br); background-color: var(--war-tn); background-image: -webkit-linear-gradient(top, var(--war-tn), var(--war-tn)); background-image: linear-gradient(to bottom, var(--war-tn), var(--war-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 { 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.suc { border-color: var(--suc-br); background-color: var(--suc-bg); background-image: -webkit-linear-gradient(top, var(--suc-tn), var(--suc-bg)); background-image: linear-gradient(to bottom, var(--suc-tn), var(--suc-bg)); }
.btn.suc:not(:disabled):hover { border-color: var(--suc-br); background-color: var(--suc-tn); background-image: -webkit-linear-gradient(top, var(--suc-tn), var(--suc-tn)); background-image: linear-gradient(to bottom, var(--suc-tn), var(--suc-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 { 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.inf { border-color: var(--inf-br); background-color: var(--inf-bg); background-image: -webkit-linear-gradient(top, var(--inf-tn), var(--inf-bg)); background-image: linear-gradient(to bottom, var(--inf-tn), var(--inf-bg)); }
.btn.inf:not(:disabled):hover { border-color: var(--inf-br); background-color: var(--inf-tn); background-image: -webkit-linear-gradient(top, var(--inf-tn), var(--inf-tn)); background-image: linear-gradient(to bottom, var(--inf-tn), var(--inf-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 { 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.cat { border-color: var(--cat-br); background-color: var(--cat-bg); background-image: -webkit-linear-gradient(top, var(--cat-tn), var(--cat-bg)); background-image: linear-gradient(to bottom, var(--cat-tn), var(--cat-bg)); }
.btn.cat:not(:disabled):hover { border-color: var(--cat-br); background-color: var(--cat-tn); background-image: -webkit-linear-gradient(top, var(--cat-tn), var(--cat-tn)); background-image: linear-gradient(to bottom, var(--cat-tn), var(--cat-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 { 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 { display: inline-flex; align-items: baseline; gap: 0.8em; justify-content: center; }
.btn.icn.sml { gap: 0.5em; }
.btn.icn.min { gap: 0.3em; }
.btn.icn::before { font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grascale; -webkit-font-smoothing: antialiased; font-weight: 900; }
/* ログイン */.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'; font-weight: normal; }
/* 論理削除(マイナス) */.btn.icn.i-hid2::before { content: '\f068'; }
/* 論理削除を戻す(ゴミ箱上矢印) */.btn.icn.i-redo::before { content: '\f82a'; }
/* 論理削除を戻す(円の矢印) */.btn.icn.i-redo2::before { content: '\f2ea'; }
/* 消しゴム */.btn.icn.i-clear::before { content: '\f12d'; }
/* Ｘボタン */.btn.icn.i-cancel::before { content: '\f00d'; }
/* 戻る ← */.btn.icn.i-bck::before { content: '\f060'; }
/* 編集 */.btn.icn.i-edt::before { content: '\f044'; font-weight: normal; }
/* 並び替え */.btn.icn.i-sort::before { content: '\f074'; }
/* ダウンロード */.btn.icn.i-dwl::before { content: '\f019'; color: transparent; -webkit-text-stroke: 1px #fff; } .btn.icn.i-dwl.def::before { -webkit-text-stroke-color: #555; }
/* アップロード */.btn.icn.i-upl::before { content: '\f093'; color: transparent; -webkit-text-stroke: 1px #fff; } .btn.icn.i-upl.def::before { -webkit-text-stroke-color: #555; }
/* 印刷 */.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'; }
/* 検索 */.btn.icn.i-search::before {  content: '\f002';  }
/* 電卓 */.btn.icn.i-calc::before {  content: '\f1ec';  }
/* メール */.btn.icn.i-email::before {  content: '\f0e0'; font-weight: normal; }
/* メール送信 */.btn.icn.i-email-send::before {  content: '\f1d8'; font-weight: normal; }
/* ファイル */.btn.icn.i-file::before {  content: '\f15b'; font-weight: normal; }
/* 一覧 */.btn.icn.i-lst::before {  content: '\f0ca';  }
/* 詳細 */.btn.icn.i-det::before { content: '\f07c'; font-weight: normal; }



/* 通常ラジオボタン */
/* [html]
<div class="rdo gre"><input type="radio" name="hoge" id="rdo1" /><label for="rdo1">ほげ</label></div>
<input type="radio" class="rdo" name="hoge" id="rdo1" /><label for="rdo1">ほげ</label>
 */
/* ラジオ・チェック共通 blockにすることで「...」とエラー時の赤枠に対応 横並びにするときはinline-block＋width指定する */
.rdo, .chk { display: block; font-size: 0; }
.rdo [type="radio"], [type="radio"].rdo { display: none; }
:is(.rdo label, .rdo+label, .chk label):empty { width: 1em; height: 1em; padding: 0 !important; }

.rdo [type="radio"]+label, [type="radio"].rdo+label { padding-left: 1.0em; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; position: relative; display: inline-block; vertical-align: middle; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; padding-right: 1em; color: #999}
.rdo [type="radio"]+label::before, [type="radio"].rdo+label::before { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 10px; height: 10px; border: 1px solid #555; border-radius: 50%; }
.rdo [type="radio"]+label::after, [type="radio"].rdo+label::after { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 2px; width: 8px; height: 8px; border-radius: 50%; }

.rdo [type="radio"]:checked+label, [type="radio"].rdo:checked+label { color: #555; }
.rdo [type="radio"]:not(:checked)+label:hover::after, [type="radio"].rdo:not(:checked)+label:hover::after { opacity: 0.1; }
.rdo [type="radio"]:checked+label::before, [type="radio"].rdo:checked+label::before { border: 1px solid #555; }
.rdo [type="radio"]:checked+label::after,  [type="radio"].rdo:checked+label::after,
.rdo [type="radio"]+label:hover::after, [type="radio"].rdo+label:hover::after { background-color: #555; }

/* 通常ラジオ：disabled */
.rdo [type="radio"]:disabled+label::before, [type="radio"].rdo:disabled+label::before, .rdo [type="radio"]:checked:disabled+label::before, [type="radio"].rdo:checked:disabled+label::before { border-color: #e9e9e9 !important; }
.rdo [type="radio"]:disabled+label::after,  .rdo [type="radio"]:checked:disabled+label::after { background-color: #f8f8f8 !important; }
.rdo [type="radio"]:disabled+label, .rdo [type="radio"]:checked:disabled+label,
.rdo [type="radio"]:disabled:hover+label, .rdo [type="radio"]:checked:disabled:hover+label { color: #9d9d9d !important; cursor: default; }

/* 通常ラジオ：サイズ（デフォルトデフォルトはfont-size: 14px） */
.rdo.lrg [type="radio"]+label::before, [type="radio"].rdo.lrg+label::before { width: 12px; height: 12px; } .rdo.lrg [type="radio"]+label::after, [type="radio"].rdo.lrg+label::after { left: 2px; width: 10px; height: 10px; } .rdo.lrg [type="radio"]+label, [type="radio"].rdo.lrg+label { font-size: 20px; }
.rdo.mid [type="radio"]+label::before, [type="radio"].rdo.mid+label::before { width: 10px; height: 10px; } .rdo.mid [type="radio"]+label::after, [type="radio"].rdo.mid+label::after { left: 2px; width:  8px; height:  8px; } .rdo.mid [type="radio"]+label, [type="radio"].rdo.mid+label { font-size: 16px; }
.rdo.sml [type="radio"]+label::before, [type="radio"].rdo.sml+label::before { width:  8px; height:  8px; } .rdo.sml [type="radio"]+label::after, [type="radio"].rdo.sml+label::after { left: 2px; width:  6px; height:  6px; } .rdo.sml [type="radio"]+label, [type="radio"].rdo.sml+label { font-size: 13px; }
.rdo.min [type="radio"]+label::before, [type="radio"].rdo.min+label::before { width:  6px; height:  6px; } .rdo.min [type="radio"]+label::after, [type="radio"].rdo.min+label::after { left: 2px; width:  4px; height:  4px; } .rdo.min [type="radio"]+label, [type="radio"].rdo.min+label { font-size: 11px; }


/* 通常ラジオ：色 */
.rdo.gre [type="radio"]:checked+label::before, [type="radio"].rdo.gre:checked+label::before, .rdo.gre [type="radio"]+label:hover::before, [type="radio"].rdo.gre+label:hover::before { border-color: var(--gre); } .rdo.gre [type="radio"]:checked+label::after, [type="radio"].rdo.gre:checked+label::after, .rdo.gre [type="radio"]+label:hover::after, [type="radio"].rdo.gre+label:hover::after { background-color: var(--gre); } .rdo.gre [type="radio"]:checked+label, [type="radio"].rdo.gre:checked+label, .rdo.gre [type="radio"]+label:hover, [type="radio"].rdo.gre+label:hover { color: var(--gre); }
.rdo.red [type="radio"]:checked+label::before, [type="radio"].rdo.red:checked+label::before, .rdo.red [type="radio"]+label:hover::before, [type="radio"].rdo.red+label:hover::before { border-color: var(--red); } .rdo.red [type="radio"]:checked+label::after, [type="radio"].rdo.red:checked+label::after, .rdo.red [type="radio"]+label:hover::after, [type="radio"].rdo.red+label:hover::after { background-color: var(--red); } .rdo.red [type="radio"]:checked+label, [type="radio"].rdo.red:checked+label, .rdo.red [type="radio"]+label:hover, [type="radio"].rdo.red+label:hover { color: var(--red); }
.rdo.blu [type="radio"]:checked+label::before, [type="radio"].rdo.blu:checked+label::before, .rdo.blu [type="radio"]+label:hover::before, [type="radio"].rdo.blu+label:hover::before { border-color: var(--blu); } .rdo.blu [type="radio"]:checked+label::after, [type="radio"].rdo.blu:checked+label::after, .rdo.blu [type="radio"]+label:hover::after, [type="radio"].rdo.blu+label:hover::after { background-color: var(--blu); } .rdo.blu [type="radio"]:checked+label, [type="radio"].rdo.blu:checked+label, .rdo.blu [type="radio"]+label:hover, [type="radio"].rdo.blu+label:hover { color: var(--blu); }
.rdo.nav [type="radio"]:checked+label::before, [type="radio"].rdo.nav:checked+label::before, .rdo.nav [type="radio"]+label:hover::before, [type="radio"].rdo.nav+label:hover::before { border-color: var(--nav); } .rdo.nav [type="radio"]:checked+label::after, [type="radio"].rdo.nav:checked+label::after, .rdo.nav [type="radio"]+label:hover::after, [type="radio"].rdo.nav+label:hover::after { background-color: var(--nav); } .rdo.nav [type="radio"]:checked+label, [type="radio"].rdo.nav:checked+label, .rdo.nav [type="radio"]+label:hover, [type="radio"].rdo.nav+label:hover { color: var(--nav); }
.rdo.ora [type="radio"]:checked+label::before, [type="radio"].rdo.ora:checked+label::before, .rdo.ora [type="radio"]+label:hover::before, [type="radio"].rdo.ora+label:hover::before { border-color: var(--ora); } .rdo.ora [type="radio"]:checked+label::after, [type="radio"].rdo.ora:checked+label::after, .rdo.ora [type="radio"]+label:hover::after, [type="radio"].rdo.ora+label:hover::after { background-color: var(--ora); } .rdo.ora [type="radio"]:checked+label, [type="radio"].rdo.ora:checked+label, .rdo.ora [type="radio"]+label:hover, [type="radio"].rdo.ora+label:hover { color: var(--ora); }
.rdo.tea [type="radio"]:checked+label::before, [type="radio"].rdo.tea:checked+label::before, .rdo.tea [type="radio"]+label:hover::before, [type="radio"].rdo.tea+label:hover::before { border-color: var(--tea); } .rdo.tea [type="radio"]:checked+label::after, [type="radio"].rdo.tea:checked+label::after, .rdo.tea [type="radio"]+label:hover::after, [type="radio"].rdo.tea+label:hover::after { background-color: var(--tea); } .rdo.tea [type="radio"]:checked+label, [type="radio"].rdo.tea:checked+label, .rdo.tea [type="radio"]+label:hover, [type="radio"].rdo.tea+label:hover { color: var(--tea); }
.rdo.gra [type="radio"]:checked+label::before, [type="radio"].rdo.gra:checked+label::before, .rdo.gra [type="radio"]+label:hover::before, [type="radio"].rdo.gra+label:hover::before { border-color: var(--gra); } .rdo.gra [type="radio"]:checked+label::after, [type="radio"].rdo.gra:checked+label::after, .rdo.gra [type="radio"]+label:hover::after, [type="radio"].rdo.gra+label:hover::after { background-color: var(--gra); } .rdo.gra [type="radio"]:checked+label, [type="radio"].rdo.gra:checked+label, .rdo.gra [type="radio"]+label:hover, [type="radio"].rdo.gra+label:hover { color: var(--gra); }
.rdo.dpk [type="radio"]:checked+label::before, [type="radio"].rdo.dpk:checked+label::before, .rdo.dpk [type="radio"]+label:hover::before, [type="radio"].rdo.dpk+label:hover::before { border-color: var(--dpk); } .rdo.dpk [type="radio"]:checked+label::after, [type="radio"].rdo.dpk:checked+label::after, .rdo.dpk [type="radio"]+label:hover::after, [type="radio"].rdo.dpk+label:hover::after { background-color: var(--dpk); } .rdo.dpk [type="radio"]:checked+label, [type="radio"].rdo.dpk:checked+label, .rdo.dpk [type="radio"]+label:hover, [type="radio"].rdo.dpk+label:hover { color: var(--dpk); }
.rdo.def [type="radio"]:checked+label::before, [type="radio"].rdo.def:checked+label::before, .rdo.def [type="radio"]+label:hover::before, [type="radio"].rdo.def+label:hover::before { border-color: var(--def); } .rdo.def [type="radio"]:checked+label::after, [type="radio"].rdo.def:checked+label::after, .rdo.def [type="radio"]+label:hover::after, [type="radio"].rdo.def+label:hover::after { background-color: var(--def); } .rdo.def [type="radio"]:checked+label, [type="radio"].rdo.def:checked+label, .rdo.def [type="radio"]+label:hover, [type="radio"].rdo.def+label:hover { color: var(--def); }
.rdo.pri [type="radio"]:checked+label::before, [type="radio"].rdo.pri:checked+label::before, .rdo.pri [type="radio"]+label:hover::before, [type="radio"].rdo.pri+label:hover::before { border-color: var(--pri); } .rdo.pri [type="radio"]:checked+label::after, [type="radio"].rdo.pri:checked+label::after, .rdo.pri [type="radio"]+label:hover::after, [type="radio"].rdo.pri+label:hover::after { background-color: var(--pri); } .rdo.pri [type="radio"]:checked+label, [type="radio"].rdo.pri:checked+label, .rdo.pri [type="radio"]+label:hover, [type="radio"].rdo.pri+label:hover { color: var(--pri); }
.rdo.sec [type="radio"]:checked+label::before, [type="radio"].rdo.sec:checked+label::before, .rdo.sec [type="radio"]+label:hover::before, [type="radio"].rdo.sec+label:hover::before { border-color: var(--sec); } .rdo.sec [type="radio"]:checked+label::after, [type="radio"].rdo.sec:checked+label::after, .rdo.sec [type="radio"]+label:hover::after, [type="radio"].rdo.sec+label:hover::after { background-color: var(--sec); } .rdo.sec [type="radio"]:checked+label, [type="radio"].rdo.sec:checked+label, .rdo.sec [type="radio"]+label:hover, [type="radio"].rdo.sec+label:hover { color: var(--sec); }
.rdo.dan [type="radio"]:checked+label::before, [type="radio"].rdo.dan:checked+label::before, .rdo.dan [type="radio"]+label:hover::before, [type="radio"].rdo.dan+label:hover::before { border-color: var(--dan); } .rdo.dan [type="radio"]:checked+label::after, [type="radio"].rdo.dan:checked+label::after, .rdo.dan [type="radio"]+label:hover::after, [type="radio"].rdo.dan+label:hover::after { background-color: var(--dan); } .rdo.dan [type="radio"]:checked+label, [type="radio"].rdo.dan:checked+label, .rdo.dan [type="radio"]+label:hover, [type="radio"].rdo.dan+label:hover { color: var(--dan); }
.rdo.war [type="radio"]:checked+label::before, [type="radio"].rdo.war:checked+label::before, .rdo.war [type="radio"]+label:hover::before, [type="radio"].rdo.war+label:hover::before { border-color: var(--war); } .rdo.war [type="radio"]:checked+label::after, [type="radio"].rdo.war:checked+label::after, .rdo.war [type="radio"]+label:hover::after, [type="radio"].rdo.war+label:hover::after { background-color: var(--war); } .rdo.war [type="radio"]:checked+label, [type="radio"].rdo.war:checked+label, .rdo.war [type="radio"]+label:hover, [type="radio"].rdo.war+label:hover { color: var(--war); }
.rdo.suc [type="radio"]:checked+label::before, [type="radio"].rdo.suc:checked+label::before, .rdo.suc [type="radio"]+label:hover::before, [type="radio"].rdo.suc+label:hover::before { border-color: var(--suc); } .rdo.suc [type="radio"]:checked+label::after, [type="radio"].rdo.suc:checked+label::after, .rdo.suc [type="radio"]+label:hover::after, [type="radio"].rdo.suc+label:hover::after { background-color: var(--suc); } .rdo.suc [type="radio"]:checked+label, [type="radio"].rdo.suc:checked+label, .rdo.suc [type="radio"]+label:hover, [type="radio"].rdo.suc+label:hover { color: var(--suc); }
.rdo.inf [type="radio"]:checked+label::before, [type="radio"].rdo.inf:checked+label::before, .rdo.inf [type="radio"]+label:hover::before, [type="radio"].rdo.inf+label:hover::before { border-color: var(--inf); } .rdo.inf [type="radio"]:checked+label::after, [type="radio"].rdo.inf:checked+label::after, .rdo.inf [type="radio"]+label:hover::after, [type="radio"].rdo.inf+label:hover::after { background-color: var(--inf); } .rdo.inf [type="radio"]:checked+label, [type="radio"].rdo.inf:checked+label, .rdo.inf [type="radio"]+label:hover, [type="radio"].rdo.inf+label:hover { color: var(--inf); }
.rdo.cat [type="radio"]:checked+label::before, [type="radio"].rdo.cat:checked+label::before, .rdo.cat [type="radio"]+label:hover::before, [type="radio"].rdo.cat+label:hover::before { border-color: var(--cat); } .rdo.cat [type="radio"]:checked+label::after, [type="radio"].rdo.cat:checked+label::after, .rdo.cat [type="radio"]+label:hover::after, [type="radio"].rdo.cat+label:hover::after { background-color: var(--cat); } .rdo.cat [type="radio"]:checked+label, [type="radio"].rdo.cat:checked+label, .rdo.cat [type="radio"]+label:hover, [type="radio"].rdo.cat+label:hover { color: var(--cat); }
.rdo.c4c [type="radio"]:checked+label::before, [type="radio"].rdo.c4c:checked+label::before, .rdo.c4c [type="radio"]+label:hover::before, [type="radio"].rdo.c4c+label:hover::before { border-color: var(--c4c); } .rdo.c4c [type="radio"]:checked+label::after, [type="radio"].rdo.c4c:checked+label::after, .rdo.c4c [type="radio"]+label:hover::after, [type="radio"].rdo.c4c+label:hover::after { background-color: var(--c4c); } .rdo.c4c [type="radio"]:checked+label, [type="radio"].rdo.c4c:checked+label, .rdo.c4c [type="radio"]+label:hover, [type="radio"].rdo.c4c+label:hover { color: var(--c4c); }


/* 帯型ラジオ(チェックボックス)：基本 */
/* [html]
 <div class="band-rdo red on-margin use-icn"><!-- red=帯型ラジオ全体で同色の場合(指定しない場合は赤>青>緑>橙>桃>紫) on-margin=1つずつのボタンをくっつけない場合 use-chk=on-marginの場合にチェック欄を作る -->
   <input type="radio" name="hoge" id="rdo1" class="red" /><label for="rdo1">A</label><!-- red=1つずつ色指定する場合 -->
   <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>
 */
.band-rdo { display: flex; justify-content: space-between; }
.band-rdo input { display: none; }
.band-rdo label {
  display: block; float: left; cursor: pointer; margin: 0; padding: 10px 4px; border-right: 1px solid #abb2b7; font-size: 14px; text-align: center; color: #fff; background-color: #c0c0c0;
  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%;
}

.band-rdo.use-icn label::before { font-family: 'Font Awesome 5 Free'; margin-right: 0.5em; font-size: 130%; vertical-align: text-top; }
.band-rdo.use-icn [type="radio"]+label::before { content: '\f111'; }
.band-rdo.use-icn [type="radio"]:checked+label::before { content: '\f192'; }
.band-rdo.use-icn.chkmark [type="radio"]:checked+label::before { content: '\f058'; }
.band-rdo.use-icn [type="checkbox"]+label::before { content: '\f0c8'; }
.band-rdo.use-icn [type="checkbox"]:checked+label::before { content: '\f14a'; }

.band-rdo.on-margin label { border-right: none; /*background-color: #ababab;*/ background-color: #c5c5c5; }
.band-rdo label:first-of-type { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.band-rdo label:last-of-type { border-right: 0; border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
/* 帯型ラジオ(チェックボックス)：サイズ */
.band-rdo.min label { padding:  3px  2px; font-size: 11px;  }
.band-rdo.sml label { padding:  5px  4px; font-size: 13px;  }
.band-rdo.mid label { padding:  8px  4px; font-size: 16px; }
.band-rdo.lrg label { padding: 14px 12px; font-size: 22px; }
/* 帯型→独立ラジオ(チェックボックス) */
.band-rdo.on-margin { gap: 0 4px; }
.band-rdo.on-margin label { border-radius: 7px; }

/* 帯型ラジオ(チェックボックス)：色 */
.band-rdo input:nth-of-type(1):checked+label, .band-rdo input:nth-of-type(1)+label:hover { background-color: var(--red); }
.band-rdo input:nth-of-type(2):checked+label, .band-rdo input:nth-of-type(2)+label:hover { background-color: var(--blu); }
.band-rdo input:nth-of-type(3):checked+label, .band-rdo input:nth-of-type(3)+label:hover { background-color: var(--gre); }
.band-rdo input:nth-of-type(4):checked+label, .band-rdo input:nth-of-type(4)+label:hover { background-color: var(--ora); }
.band-rdo input:nth-of-type(5):checked+label, .band-rdo input:nth-of-type(5)+label:hover { background-color: var(--dpk); }
.band-rdo input:nth-of-type(6):checked+label, .band-rdo input:nth-of-type(6)+label:hover { background-color: var(--cattleya-tn); }

.band-rdo.gre input:checked+label, .band-rdo.gre input+label:hover, .band-rdo input.gre:checked+label, .band-rdo input.gre+label:hover { background-color: var(--gre); }
.band-rdo.red input:checked+label, .band-rdo.red input+label:hover, .band-rdo input.red:checked+label, .band-rdo input.red+label:hover { background-color: var(--red); }
.band-rdo.blu input:checked+label, .band-rdo.blu input+label:hover, .band-rdo input.blu:checked+label, .band-rdo input.blu+label:hover { background-color: var(--blu); }
.band-rdo.nav input:checked+label, .band-rdo.nav input+label:hover, .band-rdo input.nav:checked+label, .band-rdo input.nav+label:hover { background-color: var(--nav); }
.band-rdo.ora input:checked+label, .band-rdo.ora input+label:hover, .band-rdo input.ora:checked+label, .band-rdo input.ora+label:hover { background-color: var(--ora); }
.band-rdo.tea input:checked+label, .band-rdo.tea input+label:hover, .band-rdo input.tea:checked+label, .band-rdo input.tea+label:hover { background-color: var(--tea); }
.band-rdo.gra input:checked+label, .band-rdo.gra input+label:hover, .band-rdo input.gra:checked+label, .band-rdo input.gra+label:hover { background-color: var(--gra); }
.band-rdo.dpk input:checked+label, .band-rdo.dpk input+label:hover, .band-rdo input.dpk:checked+label, .band-rdo input.dpk+label:hover { background-color: var(--dpk); }
.band-rdo.def input:checked+label, .band-rdo.def input+label:hover, .band-rdo input.def:checked+label, .band-rdo input.def+label:hover { background-color: var(--def); }
.band-rdo.pri input:checked+label, .band-rdo.pri input+label:hover, .band-rdo input.pri:checked+label, .band-rdo input.pri+label:hover { background-color: var(--pri); }
.band-rdo.sec input:checked+label, .band-rdo.sec input+label:hover, .band-rdo input.sec:checked+label, .band-rdo input.sec+label:hover { background-color: var(--sec); }
.band-rdo.dan input:checked+label, .band-rdo.dan input+label:hover, .band-rdo input.dan:checked+label, .band-rdo input.dan+label:hover { background-color: var(--dan); }
.band-rdo.war input:checked+label, .band-rdo.war input+label:hover, .band-rdo input.war:checked+label, .band-rdo input.war+label:hover { background-color: var(--war); }
.band-rdo.suc input:checked+label, .band-rdo.suc input+label:hover, .band-rdo input.suc:checked+label, .band-rdo input.suc+label:hover { background-color: var(--suc); }
.band-rdo.inf input:checked+label, .band-rdo.inf input+label:hover, .band-rdo input.inf:checked+label, .band-rdo input.inf+label:hover { background-color: var(--inf); }
.band-rdo.cat input:checked+label, .band-rdo.cat input+label:hover, .band-rdo input.cat:checked+label, .band-rdo input.cat+label:hover { background-color: var(--cat); }
.band-rdo.c4c input:checked+label, .band-rdo.c4c input+label:hover, .band-rdo input.c4c:checked+label, .band-rdo input.c4c+label:hover { background-color: var(--c4c); }
.band-rdo.sun input:checked+label, .band-rdo.sun input+label:hover, .band-rdo input.sun:checked+label, .band-rdo input.sun+label:hover { background-color: var(--sun); }
.band-rdo.sat input:checked+label, .band-rdo.sat input+label:hover, .band-rdo input.sat:checked+label, .band-rdo input.sat+label:hover { background-color: var(--sat); }
.band-rdo.gold input:checked+label, .band-rdo.gold input+label:hover, .band-rdo input.gold:checked+label, .band-rdo input.gold+label:hover { background-color: var(--gold); }
.band-rdo.silver input:checked+label, .band-rdo.silver input+label:hover, .band-rdo input.silver:checked+label, .band-rdo input.silver+label:hover { background-color: var(--silver); }
.band-rdo.bronze input:checked+label, .band-rdo.bronze input+label:hover, .band-rdo input.bronze:checked+label, .band-rdo input.bronze+label:hover { background-color: var(--bronze); }
.band-rdo.mizuho input:checked+label, .band-rdo.mizuho input+label:hover, .band-rdo input.mizuho:checked+label, .band-rdo input.mizuho+label:hover { background-color: var(--mizuho); }
.band-rdo.smbc input:checked+label, .band-rdo.smbc input+label:hover, .band-rdo input.smbc:checked+label, .band-rdo input.smbc+label:hover { background-color: var(--smbc); }

.band-rdo input+label:hover { opacity: 0.5; }
.band-rdo input:checked+label:hover { opacity: 0.8; }

/* 通常チェックボックス */
/* [html]
<div class="chk c4c"><input type="checkbox" id="chk_1" /><label for="chk_1">あいう</label></div>
<input type="checkbox" class="chk" id="chk_1" /><label for="chk_1">あいう</label>
*/
.chk [type="checkbox"] { display: none; }
.chk label { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; position: relative; display: inline-block; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; padding-left: 1.5em; padding-right: 1em; color: #999; }
.chk label:not([for$="-readonly"]) { cursor: pointer; }
/* 2024-01-24:hoverで薄くしない */
/*.chk label:not([for$="-readonly"]):hover::before, .chk input[type=checkbox]:checked+label:not([for$="-readonly"]):hover::before { opacity: 0.4; }*/
/*.chk input[type=checkbox]:checked+label:not([for$="-readonly"]):hover { opacity: 0.8; }*/
/*.chk input[type=checkbox]:checked+label:not([for$="-readonly"]):hover::after { opacity: 1; }*/

.chk label::before { display: block; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 6px; transform: translateY(-50%) rotate(45deg); width: 3px; height: 7px; border-right: 3px solid #ccc; border-bottom: 3px solid #ccc; content: ''; opacity: 0; }
.chk input[type=checkbox]:checked+label::before { opacity: 1; }
.chk label::after { display: block; -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 14px; height: 14px; border: 2px solid #ccc; border-radius: 6px; content: ''; }
.chk.min label::after { border-radius: 4px; }
/* 通常チェックボックス：サイズ（デフォルトデフォルトはfont-size: 14px） */
.chk.min label::before { width:  1px; height:  5px;                                  } .chk.min label::after { width: 10px; height: 10px; } .chk.min label { font-size: 11px; padding-left: 1.6em; }
.chk.sml label::before { width:  2px; height:  6px;                                  } .chk.sml label::after { width: 12px; height: 12px; } .chk.sml label { font-size: 13px; padding-left: 1.4em; }
.chk.mid label::before { width:  3px; height:  7px;                                  } .chk.mid label::after { width: 14px; height: 14px; } .chk.mid label { font-size: 16px; padding-left: 1.4em; }
.chk.lrg label::before { width:  5px; height:  9px;                                  } .chk.lrg label::after { width: 16px; height: 16px; } .chk.lrg label { font-size: 20px; padding-left: 1.2em; }
.chk.xll label::before { width:  7px; height: 16px; left:  9px;                      } .chk.xll label::after { width: 24px; height: 24px; } .chk.xll label { font-size: 32px; padding-left: 1.1em; min-width: 28px; min-height: 28px; }
.chk.xxl label::before { width: 14px; height: 36px; left: 18px; border-width: 5px; } .chk.xxl label::after { width: 50px; height: 50px; } .chk.xxl label { font-size: 32px; padding-left: 1.1em; min-width: 56px; min-height: 56px; }
/* 通常チェックボックス：色 */
.chk label::before { border-right-color: var(--gra); border-bottom-color: var(--gra); } .chk input[type=checkbox]:checked+label::after { border-color: var(--gra); } .chk input[type=checkbox]:checked+label, .chk input[type=checkbox]:hover+label { color: var(--gra); }
.chk.gre label::before { border-right-color: var(--gre); border-bottom-color: var(--gre); } .chk.gre input[type=checkbox]:checked+label::after { border-color: var(--gre); } .chk.gre input[type=checkbox]:checked+label, .chk.gre input[type=checkbox]:hover+label { color: var(--gre); }
.chk.red label::before { border-right-color: var(--red); border-bottom-color: var(--red); } .chk.red input[type=checkbox]:checked+label::after { border-color: var(--red); } .chk.red input[type=checkbox]:checked+label, .chk.red input[type=checkbox]:hover+label { color: var(--red); }
.chk.blu label::before { border-right-color: var(--blu); border-bottom-color: var(--blu); } .chk.blu input[type=checkbox]:checked+label::after { border-color: var(--blu); } .chk.blu input[type=checkbox]:checked+label, .chk.blu input[type=checkbox]:hover+label { color: var(--blu); }
.chk.nav label::before { border-right-color: var(--nav); border-bottom-color: var(--nav); } .chk.nav input[type=checkbox]:checked+label::after { border-color: var(--nav); } .chk.nav input[type=checkbox]:checked+label, .chk.nav input[type=checkbox]:hover+label { color: var(--nav); }
.chk.ora label::before { border-right-color: var(--ora); border-bottom-color: var(--ora); } .chk.ora input[type=checkbox]:checked+label::after { border-color: var(--ora); } .chk.ora input[type=checkbox]:checked+label, .chk.ora input[type=checkbox]:hover+label { color: var(--ora); }
.chk.tea label::before { border-right-color: var(--tea); border-bottom-color: var(--tea); } .chk.tea input[type=checkbox]:checked+label::after { border-color: var(--tea); } .chk.tea input[type=checkbox]:checked+label, .chk.tea input[type=checkbox]:hover+label { color: var(--tea); }
.chk.gra label::before { border-right-color: var(--gra); border-bottom-color: var(--gra); } .chk.gra input[type=checkbox]:checked+label::after { border-color: var(--gra); } .chk.gra input[type=checkbox]:checked+label, .chk.gra input[type=checkbox]:hover+label { color: var(--gra); }
.chk.dpk label::before { border-right-color: var(--dpk); border-bottom-color: var(--dpk); } .chk.dpk input[type=checkbox]:checked+label::after { border-color: var(--dpk); } .chk.dpk input[type=checkbox]:checked+label, .chk.dpk input[type=checkbox]:hover+label { color: var(--dpk); }
.chk.def label::before { border-right-color: #555; border-bottom-color: #555; } .chk.def input[type=checkbox]:checked+label::after { border-color: #555; } .chk.def input[type=checkbox]:checked+label, .chk.def input[type=checkbox]:hover+label { color: #555; }
.chk.pri label::before { border-right-color: var(--pri); border-bottom-color: var(--pri); } .chk.pri input[type=checkbox]:checked+label::after { border-color: var(--pri); } .chk.pri input[type=checkbox]:checked+label, .chk.pri input[type=checkbox]:hover+label { color: var(--pri); }
.chk.sec label::before { border-right-color: var(--sec); border-bottom-color: var(--sec); } .chk.sec input[type=checkbox]:checked+label::after { border-color: var(--sec); } .chk.sec input[type=checkbox]:checked+label, .chk.sec input[type=checkbox]:hover+label { color: var(--sec); }
.chk.dan label::before { border-right-color: var(--dan); border-bottom-color: var(--dan); } .chk.dan input[type=checkbox]:checked+label::after { border-color: var(--dan); } .chk.dan input[type=checkbox]:checked+label, .chk.dan input[type=checkbox]:hover+label { color: var(--dan); }
.chk.war label::before { border-right-color: var(--war); border-bottom-color: var(--war); } .chk.war input[type=checkbox]:checked+label::after { border-color: var(--war); } .chk.war input[type=checkbox]:checked+label, .chk.war input[type=checkbox]:hover+label { color: var(--war); }
.chk.suc label::before { border-right-color: var(--suc); border-bottom-color: var(--suc); } .chk.suc input[type=checkbox]:checked+label::after { border-color: var(--suc); } .chk.suc input[type=checkbox]:checked+label, .chk.suc input[type=checkbox]:hover+label { color: var(--suc); }
.chk.inf label::before { border-right-color: var(--inf); border-bottom-color: var(--inf); } .chk.inf input[type=checkbox]:checked+label::after { border-color: var(--inf); } .chk.inf input[type=checkbox]:checked+label, .chk.inf input[type=checkbox]:hover+label { color: var(--inf); }
.chk.cat label::before { border-right-color: var(--cat); border-bottom-color: var(--cat); } .chk.cat input[type=checkbox]:checked+label::after { border-color: var(--cat); } .chk.cat input[type=checkbox]:checked+label, .chk.cat input[type=checkbox]:hover+label { color: var(--cat); }
.chk.c4c label::before { border-right-color: var(--c4c); border-bottom-color: var(--c4c); } .chk.c4c input[type=checkbox]:checked+label::after { border-color: var(--c4c); } .chk.c4c input[type=checkbox]:checked+label, .chk.c4c input[type=checkbox]:hover+label { color: var(--c4c); }
/* 通常チェックボックス：disabled */
.chk [type="checkbox"]:disabled+label::before,
.chk [type="checkbox"]:checked:disabled+label::before { border-color: #e9e9e9 !important; }
.chk [type="checkbox"]:disabled+label::after,
.chk [type="checkbox"]:checked:disabled + label::after { background-color: #f8f8f8 !important; border-color: #ccc !important; }
.chk [type="checkbox"]:disabled+label,
.chk [type="checkbox"]:checked:disabled+label,
.chk [type="checkbox"]:disabled:hover+label,
.chk [type="checkbox"]:checked:disabled:hover+label { color: #9d9d9d !important; cursor: default; }

/* トグル型チェックボックス：基本 */
/*
<div class="toggle-chk mid c4c"><input type="checkbox" id="chk_1"><label for="chk_1"></label></div>
*/
.toggle-chk { letter-spacing: 0; text-align: center; position: relative; }
.toggle-chk [type="checkbox"] { display: none; }
.toggle-chk [type="checkbox"]+label { display: block; box-sizing: border-box; border-radius: 30px; margin-bottom: 0; background-color: #e8e8e8; color: #fff; font-size: 0; padding-left: 7px; text-align: left; height: 22px; width: 45px; }
.toggle-chk [type="checkbox"]+label::after { content: ' '; position: absolute; background-color: #fff; width: 18px; height: 18px; top: 2px; left: 2px; border-radius: 50%; transition: .2s; }
.toggle-chk [type="checkbox"]:checked + label { font-size: 15px; }
.toggle-chk [type="checkbox"]:checked + label::after { transform: translateX(24px); }

/* トグル型チェックボックス：サイズ */
.toggle-chk.sml [type="checkbox"]+label { width: 35px; height: 18px; padding-left:  5px; } .toggle-chk.sml [type="checkbox"]+label::after { width: 14px; height: 14px; } .toggle-chk.sml [type="checkbox"]:checked + label { font-size: 12px; } .toggle-chk.sml [type="checkbox"]:checked + label::after { transform: translateX(17px); }
.toggle-chk.mid [type="checkbox"]+label { width: 45px; height: 22px; padding-left:  7px; } .toggle-chk.mid [type="checkbox"]+label::after { width: 18px; height: 18px; } .toggle-chk.mid [type="checkbox"]:checked + label { font-size: 15px; } .toggle-chk.mid [type="checkbox"]:checked + label::after { transform: translateX(24px); }
.toggle-chk.lrg [type="checkbox"]+label { width: 68px; height: 31px; padding-left: 11px; } .toggle-chk.lrg [type="checkbox"]+label::after { width: 27px; height: 27px; } .toggle-chk.lrg [type="checkbox"]:checked + label { font-size: 20px; } .toggle-chk.lrg [type="checkbox"]:checked + label::after { transform: translateX(37px); }

/* トグル型チェックボックス：色 */
.toggle-chk [type="checkbox"]:checked + label { background-color: #37ff59; }
.toggle-chk.red [type="checkbox"]:checked + label { background-color: var(--red); }
.toggle-chk.blu [type="checkbox"]:checked + label { background-color: var(--blu); }
.toggle-chk.nav [type="checkbox"]:checked + label { background-color: var(--nav); }
.toggle-chk.ora [type="checkbox"]:checked + label { background-color: var(--ora); }
.toggle-chk.tea [type="checkbox"]:checked + label { background-color: var(--tea); }
.toggle-chk.gra [type="checkbox"]:checked + label { background-color: var(--gra); }
.toggle-chk.dpk [type="checkbox"]:checked + label { background-color: var(--dpk); }
.toggle-chk.def [type="checkbox"]:checked + label { background-color: var(--def); }
.toggle-chk.pri [type="checkbox"]:checked + label { background-color: var(--pri); }
.toggle-chk.sec [type="checkbox"]:checked + label { background-color: var(--sec); }
.toggle-chk.dan [type="checkbox"]:checked + label { background-color: var(--dan); }
.toggle-chk.war [type="checkbox"]:checked + label { background-color: var(--war); }
.toggle-chk.suc [type="checkbox"]:checked + label { background-color: var(--suc); }
.toggle-chk.inf [type="checkbox"]:checked + label { background-color: var(--inf); }
.toggle-chk.cat [type="checkbox"]:checked + label { background-color: var(--cat); }
.toggle-chk.c4c [type="checkbox"]:checked + label { background-color: var(--c4c); }
.toggle-chk.sun [type="checkbox"]:checked + label { background-color: var(--sun); }
.toggle-chk.sat [type="checkbox"]:checked + label { background-color: var(--sat); }
.toggle-chk.gold [type="checkbox"]:checked + label { background-color: var(--gold); }
.toggle-chk.silver [type="checkbox"]:checked + label { background-color: var(--silver); }
.toggle-chk.bronze [type="checkbox"]:checked + label { background-color: var(--bronze); }
.toggle-chk.mizuho [type="checkbox"]:checked + label { background-color: var(--mizuho); }
.toggle-chk.smbc [type="checkbox"]:checked + label { background-color: var(--smbc); }


/* 画面トップへ */
.to-top { display: none; }
/* .to-top { */
/*  display: none; */
/*  z-index: 11; */
/*  opacity: 0.7; */
/*  position: fixed; */
/*  left: calc(100vw / 2 + (1200px / 2) - 50px); */
/*  bottom: 35px; */
/* } */
/* .btn.bdg.icon.to-top { padding: 7px; } */
/* .to-top::before { content: '\f062' } */
/* .to-top:hover { opacity: 1.0; } */
/* @media screen and (max-width: 1000px) { .to-top { right: 10px; left: unset; } } */