@charset "UTF-8";
/** ボタン css */
/** version 22.08.19 ラジオ・チェックのフォントサイズ調整 */
/** version 22.11.18 CPR特化 */

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

/* 非活性ボタン */
.btn:disabled { opacity: 0.6; cursor: var(--cur-ban); }

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

/* ボタン：基本 */
/* [html]
<button type="button" class="btn mid red icn i-reg init-disabled" onclick="xxx();">登録</button>
-option-
・mid:サイズ
・red:背景色
・icn:アイコン有り i-xxxとセット
・init-disabled:初期表示はdisabled
・no-disabled:クリックしてもdisabledにしない
・vc-btn:入力チェックに連動
 */
.btn {
 border: 2px solid #000;
 background-color: #ccc;
 /*border-radius: 5px;*/ border-radius: 8px;
 display: inline-block;
 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;
 -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: 55px; 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.min { border-width: 1px; min-width: 20px; }
.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 { 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.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 { 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.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.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.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.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.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.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.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.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: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'; 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-cancel:before { content: '\f00d'; }
/* 戻る ← */.btn.icn.i-bck:before { content: '\f060'; }
/* 編集 */.btn.icn.i-edt:before { content: '\f305'; }
/* 並び替え */.btn.icn.i-sort: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'; }
/* 検索 */.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; }


/* 通常ラジオボタン */
/* [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; }

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;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 100%;
 font-size: 14px;
}
div.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%; }
div.rdo label:after  { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); 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, div.rdo label:hover:after { background-color: #555; }
div.rdo input[type="radio"]:checked + label { color: #555; }
div.rdo input[type="radio"]:not(:checked) + label:hover:after { opacity: 0.1; }
/* 通常ラジオ：サイズ */
div.rdo.lrg label:before { width: 12px; height: 12px; } div.rdo.lrg label:after { left: 2px; width: 10px; height: 10px; } div.rdo.lrg label { font-size: 20px; }
div.rdo.mid label:before { width: 10px; height: 10px; } div.rdo.mid label:after { left: 2px; width: 8px; height: 8px; } div.rdo.mid label { font-size: 16px; } /* midを指定しないデフォルトは14px */
div.rdo.sml label:before { width: 8px; height: 8px; } div.rdo.sml label:after { left: 2px; width: 6px; height: 6px; } div.rdo.sml label { font-size: 13px; }
div.rdo.min label:before { width: 6px; height: 6px; } div.rdo.min label:after { left: 2px; width: 4px; height: 4px; } div.rdo.min label { font-size: 11px; }
/* 通常ラジオ：色 */
div.rdo.gre input[type="radio"]:checked+label:before, div.rdo.gre label:hover:before { border-color: var(--gre); } div.rdo.gre input[type="radio"]:checked+label:after, div.rdo.gre label:hover:after { background-color: var(--gre); } div.rdo.gre input[type="radio"]:checked+label, div.rdo.gre input[type="radio"]+label:hover { color: var(--gre); }
div.rdo.red input[type="radio"]:checked+label:before, div.rdo.red label:hover:before { border-color: var(--red); } div.rdo.red input[type="radio"]:checked+label:after, div.rdo.red label:hover:after { background-color: var(--red); } div.rdo.red input[type="radio"]:checked+label, div.rdo.red input[type="radio"]+label:hover { color: var(--red); }
div.rdo.blu input[type="radio"]:checked+label:before, div.rdo.blu label:hover:before { border-color: var(--blu); } div.rdo.blu input[type="radio"]:checked+label:after, div.rdo.blu label:hover:after { background-color: var(--blu); } div.rdo.blu input[type="radio"]:checked+label, div.rdo.blu input[type="radio"]+label:hover { color: var(--blu); }
div.rdo.nav input[type="radio"]:checked+label:before, div.rdo.nav label:hover:before { border-color: var(--nav); } div.rdo.nav input[type="radio"]:checked+label:after, div.rdo.nav label:hover:after { background-color: var(--nav); } div.rdo.nav input[type="radio"]:checked+label, div.rdo.nav input[type="radio"]+label:hover { color: var(--nav); }
div.rdo.ora input[type="radio"]:checked+label:before, div.rdo.ora label:hover:before { border-color: var(--ora); } div.rdo.ora input[type="radio"]:checked+label:after, div.rdo.ora label:hover:after { background-color: var(--ora); } div.rdo.ora input[type="radio"]:checked+label, div.rdo.ora input[type="radio"]+label:hover { color: var(--ora); }
div.rdo.tea input[type="radio"]:checked+label:before, div.rdo.tea label:hover:before { border-color: var(--tea); } div.rdo.tea input[type="radio"]:checked+label:after, div.rdo.tea label:hover:after { background-color: var(--tea); } div.rdo.tea input[type="radio"]:checked+label, div.rdo.tea input[type="radio"]+label:hover { color: var(--tea); }
div.rdo.gra input[type="radio"]:checked+label:before, div.rdo.gra label:hover:before { border-color: var(--gra); } div.rdo.gra input[type="radio"]:checked+label:after, div.rdo.gra label:hover:after { background-color: var(--gra); } div.rdo.gra input[type="radio"]:checked+label, div.rdo.gra input[type="radio"]+label:hover { color: var(--gra); }
div.rdo.dpk input[type="radio"]:checked+label:before, div.rdo.dpk label:hover:before { border-color: var(--dpk); } div.rdo.dpk input[type="radio"]:checked+label:after, div.rdo.dpk label:hover:after { background-color: var(--dpk); } div.rdo.dpk input[type="radio"]:checked+label, div.rdo.dpk input[type="radio"]+label:hover { color: var(--dpk); }
div.rdo.gumbydflt input[type="radio"]:checked+label:before, div.rdo.gumbydflt label:hover:before { border-color: var(--gumbydflt); } div.gumbydflt.rdo input[type="radio"]:checked+label:after, div.rdo.gumbydflt label:hover:after { background-color: var(--gumbydflt); } div.rdo.gumbydflt input[type="radio"]:checked+label, div.rdo.gumbydflt input[type="radio"]+label:hover { color: var(--gumbydflt); }
div.rdo.def input[type="radio"]:checked+label:before, div.rdo.def label:hover:before { border-color: var(--def); } div.def.rdo input[type="radio"]:checked+label:after, div.rdo.def label:hover:after { background-color: var(--def); } div.rdo.def input[type="radio"]:checked+label, div.rdo.def input[type="radio"]+label:hover { color: var(--def); }
div.rdo.primary input[type="radio"]:checked+label:before, div.rdo.primary label:hover:before { border-color: var(--primary); } div.primary.rdo input[type="radio"]:checked+label:after, div.rdo.primary label:hover:after { background-color: var(--primary); } div.rdo.primary input[type="radio"]:checked+label, div.rdo.primary input[type="radio"]+label:hover { color: var(--primary); }
div.rdo.secondary input[type="radio"]:checked+label:before, div.rdo.secondary label:hover:before { border-color: var(--secondary); } div.secondary.rdo input[type="radio"]:checked+label:after, div.rdo.secondary label:hover:after { background-color: var(--secondary); } div.rdo.secondary input[type="radio"]:checked+label, div.rdo.secondary input[type="radio"]+label:hover { color: var(--secondary); }
div.rdo.danger input[type="radio"]:checked+label:before, div.rdo.danger label:hover:before { border-color: var(--danger); } div.danger.rdo input[type="radio"]:checked+label:after, div.rdo.danger label:hover:after { background-color: var(--danger); } div.rdo.danger input[type="radio"]:checked+label, div.rdo.danger input[type="radio"]+label:hover { color: var(--danger); }
div.rdo.warning input[type="radio"]:checked+label:before, div.rdo.warning label:hover:before { border-color: var(--warning); } div.warning.rdo input[type="radio"]:checked+label:after, div.rdo.warning label:hover:after { background-color: var(--warning); } div.rdo.warning input[type="radio"]:checked+label, div.rdo.warning input[type="radio"]+label:hover { color: var(--warning); }
div.rdo.success input[type="radio"]:checked+label:before, div.rdo.success label:hover:before { border-color: var(--success); } div.success.rdo input[type="radio"]:checked+label:after, div.rdo.success label:hover:after { background-color: var(--success); } div.rdo.success input[type="radio"]:checked+label, div.rdo.success input[type="radio"]+label:hover { color: var(--success); }
div.rdo.info input[type="radio"]:checked+label:before, div.rdo.info label:hover:before { border-color: var(--info); } div.info.rdo input[type="radio"]:checked+label:after, div.rdo.info label:hover:after { background-color: var(--info); } div.rdo.info input[type="radio"]:checked+label, div.rdo.info input[type="radio"]+label:hover { color: var(--info); }
div.rdo.cattleya input[type="radio"]:checked+label:before, div.rdo.cattleya label:hover:before { border-color: var(--cattleya); } div.cattleya.rdo input[type="radio"]:checked+label:after, div.rdo.cattleya label:hover:after { background-color: var(--cattleya); } div.rdo.cattleya input[type="radio"]:checked+label, div.rdo.cattleya input[type="radio"]+label:hover { color: var(--cattleya); }
div.rdo.c4c input[type="radio"]:checked+label:before, div.rdo.c4c label:hover:before { border-color: var(--c4c); } div.c4c.rdo input[type="radio"]:checked+label:after, div.rdo.c4c label:hover:after { background-color: var(--c4c); } div.rdo.c4c input[type="radio"]:checked+label, div.rdo.c4c input[type="radio"]+label:hover { color: var(--c4c); }
/* 通常ラジオ：disabled */
div.rdo input[type="radio"]:disabled+label:before,
div.rdo input[type="radio"]:checked:disabled+label:before
{ border-color: #e9e9e9 !important; }
div.rdo input[type="radio"]:disabled+label:after,
div.rdo input[type="radio"]:checked:disabled+label:after
{ background-color: #f8f8f8 !important; }
div.rdo input[type="radio"]:disabled+label,
div.rdo input[type="radio"]:checked:disabled+label,
div.rdo input[type="radio"]:disabled:hover+label,
div.rdo input[type="radio"]:checked:disabled:hover+label
{ color: #9d9d9d !important; cursor: default; }


/* 帯型ラジオ(チェックボックス)：基本 */
/* [html]
 <div class="band-rdo sep3 red on-margin"><!-- sep3=分割数 red=帯型ラジオ全体で同色の場合(指定しない場合は赤>青>緑>橙>桃>紫) on-margin=1つずつのボタンをくっつけない場合 -->
   <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 input { display: none; }
.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;
  -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 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: 5px 2px; font-size: 11px;  }
.band-rdo.sml label { padding: 7px 4px; font-size: 13px;  }
.band-rdo.mid label { padding: 12px 5px; font-size: 14px; }
.band-rdo.lrg label { padding: 16px 12px; font-size: 22px; }
/* 帯型ラジオ(チェックボックス)：分割 */
.band-rdo.sep2 label { width: calc(100%/2); }
.band-rdo.sep3 label { width: calc(100%/3); }
.band-rdo.sep4 label { width: calc(100%/4); }
.band-rdo.sep5 label { width: calc(100%/5); }
.band-rdo.sep6 label { width: calc(100%/6); }
/* 帯型→独立ラジオ(チェックボックス) */
.band-rdo.on-margin { display: flex; justify-content: space-between; }
.band-rdo.on-margin.sep2 label { width: calc(100%/2 - 4px); }
.band-rdo.on-margin.sep3 label { width: calc(100%/3 - 4px); }
.band-rdo.on-margin.sep4 label { width: calc(100%/4 - 4px); }
.band-rdo.on-margin.sep5 label { width: calc(100%/5 - 4px); }
.band-rdo.on-margin.sep6 label { width: calc(100%/6 - 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.gumbydflt input:checked+label, .band-rdo.gumbydflt input+label:hover, .band-rdo input.gumbydflt:checked+label, .band-rdo input.gumbydflt+label:hover { background-color: var(--gumbydflt); }
.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.primary input:checked+label, .band-rdo.primary input+label:hover, .band-rdo input.primary:checked+label, .band-rdo input.primary+label:hover { background-color: var(--primary); }
.band-rdo.secondary input:checked+label, .band-rdo.secondary input+label:hover, .band-rdo input.secondary:checked+label, .band-rdo input.secondary+label:hover { background-color: var(--secondary); }
.band-rdo.danger input:checked+label, .band-rdo.danger input+label:hover, .band-rdo input.danger:checked+label, .band-rdo input.danger+label:hover { background-color: var(--danger); }
.band-rdo.warning input:checked+label, .band-rdo.warning input+label:hover, .band-rdo input.warning:checked+label, .band-rdo input.warning+label:hover { background-color: var(--warning); }
.band-rdo.success input:checked+label, .band-rdo.success input+label:hover, .band-rdo input.success:checked+label, .band-rdo input.success+label:hover { background-color: var(--success); }
.band-rdo.info input:checked+label, .band-rdo.info input+label:hover, .band-rdo input.info:checked+label, .band-rdo input.info+label:hover { background-color: var(--info); }
.band-rdo.cattleya input:checked+label, .band-rdo.cattleya input+label:hover, .band-rdo input.cattleya:checked+label, .band-rdo input.cattleya+label:hover { background-color: var(--cattleya); }
.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.sunday input:checked+label, .band-rdo.sunday input+label:hover, .band-rdo input.sunday:checked+label, .band-rdo input.sunday+label:hover { background-color: var(--sunday); }
.band-rdo.saturday input:checked+label, .band-rdo.saturday input+label:hover, .band-rdo input.saturday:checked+label, .band-rdo input.saturday+label:hover { background-color: var(--saturday); }
.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_4" name="invoice_chk" value="4" /><label for="chk_4">あいう</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;
 vertical-align: middle;
 cursor: pointer;
 width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 14px;
 padding-left: 1.5em;
}
div.chk label:hover:before, div.chk input[type=checkbox]:checked+label:hover:before { opacity: 0.4; }

div.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; }
div.chk input[type=checkbox]:checked+label:before { opacity: 1; }
div.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: ''; }
div.chk.min label:after { border-radius: 4px; }
/* 通常チェックボックス：サイズ */
div.chk.min label:before { width: 1px; height: 5px; } div.chk.min label:after { width: 10px; height: 10px; } div.chk.min label { padding-left: 1.6em; font-size: 11px; }
div.chk.sml label:before { width: 2px; height: 6px; } div.chk.sml label:after { width: 12px; height: 12px; } div.chk.sml label { padding-left: 1.6em; font-size: 13px; }
div.chk.mid label:before { width: 3px; height: 7px; } div.chk.mid label:after { width: 14px; height: 14px; } div.chk.mid label { font-size: 16px; } /* midを指定しないデフォルトは14px */
div.chk.lrg label:before { width: 5px; height: 9px; } div.chk.lrg label:after { width: 16px; height: 16px; } div.chk.lrg label { font-size: 20px; }
/* 通常チェックボックス：色 */
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 input[type=checkbox]:checked+label, div.chk input[type=checkbox]:hover+label { 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.gre input[type=checkbox]:checked+label, div.chk.gre input[type=checkbox]:hover+label { 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.red input[type=checkbox]:checked+label, div.chk.red input[type=checkbox]:hover+label { 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.blu input[type=checkbox]:checked+label, div.chk.blu input[type=checkbox]:hover+label { 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.nav input[type=checkbox]:checked+label, div.chk.nav input[type=checkbox]:hover+label { 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.ora input[type=checkbox]:checked+label, div.chk.ora input[type=checkbox]:hover+label { 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.tea input[type=checkbox]:checked+label, div.chk.tea input[type=checkbox]:hover+label { 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.gra input[type=checkbox]:checked+label, div.chk.gra input[type=checkbox]:hover+label { 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.dpk input[type=checkbox]:checked+label, div.chk.dpk input[type=checkbox]:hover+label { color: var(--dpk); }
div.chk.gumbydflt label:before { border-right-color: #555; border-bottom-color: #555; } div.chk.gumbydflt input[type=checkbox]:checked+label:after { border-color: #555; } div.chk.gumbydflt input[type=checkbox]:checked+label, div.chk.gumbydflt input[type=checkbox]:hover+label { color: #555; }
div.chk.def label:before { border-right-color: #555; border-bottom-color: #555; } div.chk.def input[type=checkbox]:checked+label:after { border-color: #555; } div.chk.def input[type=checkbox]:checked+label, div.chk.def input[type=checkbox]:hover+label { color: #555; }
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.primary input[type=checkbox]:checked+label, div.chk.primary input[type=checkbox]:hover+label { 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.secondary input[type=checkbox]:checked+label, div.chk.secondary input[type=checkbox]:hover+label { 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.danger input[type=checkbox]:checked+label, div.chk.danger input[type=checkbox]:hover+label { 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.warning input[type=checkbox]:checked+label, div.chk.warning input[type=checkbox]:hover+label { 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.success input[type=checkbox]:checked+label, div.chk.success input[type=checkbox]:hover+label { 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.info input[type=checkbox]:checked+label, div.chk.info input[type=checkbox]:hover+label { 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.cattleya input[type=checkbox]:checked+label, div.chk.cattleya input[type=checkbox]:hover+label { 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.c4c input[type=checkbox]:checked+label, div.chk.c4c input[type=checkbox]:hover+label { color: var(--c4c); }
/* 通常チェックボックス：disabled */
div.chk input[type="checkbox"]:disabled+label:before,
div.chk input[type="checkbox"]:checked:disabled+label:before
{ border-color: #e9e9e9 !important; }
div.chk input[type="checkbox"]:disabled+label:after,
div.chk input[type="checkbox"]:checked:disabled + label:after
{ background-color: #f8f8f8 !important; border-color: #ccc !important; }
div.chk input[type="checkbox"]:disabled+label,
div.chk input[type="checkbox"]:checked:disabled+label,
div.chk input[type="checkbox"]:disabled:hover+label,
div.chk input[type="checkbox"]:checked:disabled:hover+label
{ color: #9d9d9d !important; cursor: default; }

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

/* トグル型チェックボックス：サイズ */
div.toggle-chk.sml label { width: 35px; height: 18px; padding-left: 5px; }
div.toggle-chk.sml label:after { width: 14px; height: 14px; }
div.toggle-chk.sml input[type="checkbox"]:checked + label { font-size: 12px; }
div.toggle-chk.sml input[type="checkbox"]:checked + label:after { transform: translateX(17px); }

div.toggle-chk.mid label { width: 45px; height: 22px; padding-left: 7px; }
div.toggle-chk.mid label:after { width: 18px; height: 18px; }
div.toggle-chk.mid input[type="checkbox"]:checked + label { font-size: 15px; }
div.toggle-chk.mid input[type="checkbox"]:checked + label:after { transform: translateX(24px); }

div.toggle-chk.lrg label { width: 68px; height: 31px; padding-left: 11px; }
div.toggle-chk.lrg label:after { width: 27px; height: 27px; }
div.toggle-chk.lrg input[type="checkbox"]:checked + label { font-size: 20px; }
div.toggle-chk.lrg input[type="checkbox"]:checked + label:after { transform: translateX(37px); }

/* トグル型チェックボックス：色 */
div.toggle-chk input[type="checkbox"]:checked + label { background-color: #37ff59; }
div.toggle-chk.red input[type="checkbox"]:checked + label { background-color: var(--red); }
div.toggle-chk.blu input[type="checkbox"]:checked + label { background-color: var(--blu); }
div.toggle-chk.nav input[type="checkbox"]:checked + label { background-color: var(--nav); }
div.toggle-chk.ora input[type="checkbox"]:checked + label { background-color: var(--ora); }
div.toggle-chk.tea input[type="checkbox"]:checked + label { background-color: var(--tea); }
div.toggle-chk.gra input[type="checkbox"]:checked + label { background-color: var(--gra); }
div.toggle-chk.dpk input[type="checkbox"]:checked + label { background-color: var(--dpk); }
div.toggle-chk.gumbydflt input[type="checkbox"]:checked + label { background-color: var(--gumbydflt); }
div.toggle-chk.def input[type="checkbox"]:checked + label { background-color: var(--def); }
div.toggle-chk.primary input[type="checkbox"]:checked + label { background-color: var(--primary); }
div.toggle-chk.secondary input[type="checkbox"]:checked + label { background-color: var(--secondary); }
div.toggle-chk.danger input[type="checkbox"]:checked + label { background-color: var(--danger); }
div.toggle-chk.warning input[type="checkbox"]:checked + label { background-color: var(--warning); }
div.toggle-chk.success input[type="checkbox"]:checked + label { background-color: var(--success); }
div.toggle-chk.info input[type="checkbox"]:checked + label { background-color: var(--info); }
div.toggle-chk.cattleya input[type="checkbox"]:checked + label { background-color: var(--cattleya); }
div.toggle-chk.c4c input[type="checkbox"]:checked + label { background-color: var(--c4c); }
div.toggle-chk.sunday input[type="checkbox"]:checked + label { background-color: var(--sunday); }
div.toggle-chk.saturday input[type="checkbox"]:checked + label { background-color: var(--saturday); }
div.toggle-chk.gold input[type="checkbox"]:checked + label { background-color: var(--gold); }
div.toggle-chk.silver input[type="checkbox"]:checked + label { background-color: var(--silver); }
div.toggle-chk.bronze input[type="checkbox"]:checked + label { background-color: var(--bronze); }
div.toggle-chk.mizuho input[type="checkbox"]:checked + label { background-color: var(--mizuho); }
div.toggle-chk.smbc input[type="checkbox"]:checked + label { background-color: var(--smbc); }


/* アコーディオンボタン */
/*
accordion-boxパラメータ
・default-open = 開いた状態で初期表示

acrd-btnパラメータ
・type-pm = ＋／－で表示
・type-angle = 矢羽で表示
・icn-left = 左側にアイコン
・icn-right = 右側にアイコン

[サンプルHTML]
<div class="accordion-box">
  <div class="acrd-btn-wrap"><!-- acrd-btn-wrap=任意タグ 省略可能 -->
    <div class="btn sml acrd-btn type-pm icn-left"><label>開閉ボタン</label></div>
  </div>
  <div class="acrd-body">
    <div>折りたたむコンテンツ</div>
  </div>
</div>
*/
.accordion-box .acrd-btn { border-radius: 5px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.accordion-box .acrd-btn.type-pm.mid { padding-right: 8px; }
.accordion-box .acrd-btn.type-angle.mid { padding-right: 12px; }

.accordion-box .acrd-btn.btn { box-shadow: none; }
.accordion-box .acrd-btn.btn label { cursor: pointer; }
.accordion-box .acrd-btn.icn-left, .accordion-box .acrd-btn.icn-right { display: inline-flex; gap: 0 0.5em; }
.accordion-box .acrd-btn.icn-left label, .accordion-box .acrd-btn.icn-right label { width: 100%; }
.accordion-box .acrd-btn.icn-right { flex-direction: row-reverse; }
.accordion-box .acrd-btn.icn-left:before, .accordion-box .acrd-btn.icn-right:before { font-family: "Font Awesome 5 Free"; font-weight: 900; display: block; }

.accordion-box .acrd-body { display: none; padding-left: 1em; border: 1px solid #ccc; border-radius: 0 5px 5px 5px; margin-top: -1px; }
.accordion-box.default-open > .acrd-body, .accordion-box.default-open > * > .acrd-body { display: block; }

.accordion-box.open > .acrd-btn,
.accordion-box.open > .acrd-btn-wrap > .acrd-btn,
.accordion-box.default-open > .acrd-btn-wrap > .acrd-btn,
.accordion-box.default-open > .acrd-btn {
  border-radius: 5px 5px 0 0;
}
/* ＋／－ */
.accordion-box > .acrd-btn.type-pm:before,
.accordion-box > .acrd-btn-wrap > .acrd-btn.type-pm:before,
.accordion-box.close > .acrd-btn.type-pm:before,
.accordion-box.close > .acrd-btn-wrap > .acrd-btn.type-pm:before {
  content: '\f055';
}
.accordion-box.default-open > .acrd-btn.type-pm:before,
.accordion-box.default-open > .acrd-btn-wrap > .acrd-btn.type-pm:before,
.accordion-box.open > .acrd-btn.type-pm:before,
.accordion-box.open > .acrd-btn-wrap > .acrd-btn.type-pm:before {
  content: '\f056';
}
/* 矢羽 */
.accordion-box > .acrd-btn.type-angle:before,
.accordion-box > .acrd-btn-wrap > .acrd-btn.type-angle:before,
.accordion-box.close > .acrd-btn.type-angle:before,
.accordion-box.close > .acrd-btn-wrap > .acrd-btn.type-angle:before {
  content: '\f105'; min-width: 10px;
}
.accordion-box.default-open > .acrd-btn.type-angle:before,
.accordion-box.default-open > .acrd-btn-wrap > .acrd-btn.type-angle:before,
.accordion-box.open > .acrd-btn.type-angle:before,
.accordion-box.open > .acrd-btn-wrap > .acrd-btn.type-angle:before {
  content: '\f107'; min-width: 10px;
}



/* 画面トップへ */
/* .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; } } */