@charset "utf-8";

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
	min-height: 1px;
}

body {font-size:1.2rem;}

input[type=checkbox],input[type=radio] {
    width: 20px;
    height: 20px;
}

textarea ,input ,select {
background: #ffffff repeat scroll 0 0 transparent;
border: 1px solid #cccccc;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 2px 0 #cccccc inset;
padding: 5px;
font-size:1.1rem;
margin-bottom: 2px;
}
select {
cursor: pointer !important;
}
hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
}
.head_menu_btn {
	width:100%;
	max-width:1200px;
	margin-bottom:10px;
}
.head_menu_btn form {
	display:inline;
}

.menu_btn a:hover , .menu_btn:hover{
	background: #eee;
	cursor: pointer;
}
.menu_btn {
	padding: 3px 7px;
	border: 1px solid #888;
	text-decoration: none;
	color: #111;
	font-size: 1.0rem;
	border-radius: 4px;
	background: #fff;
	cursor: pointer !important;
}
.menu_btn1 {
cursor: pointer;
}
.meisai {
width:100%;
max-width:1200px;
border: 1px #ccc solid;
border-collapse: collapse;
}
.meisai td, .meisai th {
border: 1px #ccc solid;
padding: 5px;
}


.table_area_grn table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_grn .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#96CC70;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_grn th {
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: normal;
	background-color:#DEF0BD;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_grn td {
	border-collapse: collapse;
	border: 1px solid #CCC;
	text-align:left;
	background-color:#FFFFEB;
	padding: 10px;
}/*表のタイトル以外*/
.table_area_grn .center {
	text-align: center;
}
.table_area_grn .left {
	text-align: left;
}
.table_area_grn .right {
	text-align: right;
}

.table_area_grn table tr#focus th {
	background-color: #C4A8D6;
}
.table_area_grn table tr#focus td {
	background-color: #F0E3F0;
}
.table_area_grn table tr:hover td {
	background-color: rgb(255, 255, 202);
}


.table_area_blu table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_blu .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#19acdd;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_blu th {
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: normal;
	background-color:#51c6ed;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_blu td {
	border-collapse: collapse;
	border: 1px solid #CCC;
	text-align:left;
	background-color:#FFFFEB;
	padding: 10px;
}/*表のタイトル以外*/
.table_area_blu .center {
	text-align: center;
}
.table_area_blu .left {
	text-align: left;
}
.table_area_blu .right {
	text-align: right;
}

.table_area_blu table tr#focus th {
	background-color: #C4A8D6;
}
.table_area_blu table tr#focus td {
	background-color: #F0E3F0;
}
.table_area_blu table tr:hover td {
	background-color: rgb(255, 255, 202);
}


#main {
	width:1200px;
	margin: 0 auto;
	border:0px #ccc solid;
	padding:0 10px;"
}
#header{
	margin-bottom:10px;
	padding:5px 0;
	width:100%;
}
#head_menu {
	width:1200px;
	margin:0 auto;
}
#head_menu small {
	font-style: normal;
	font-size: 105%;
}
#head_menu a {
	text-decoration: none;
	color:#000;
}

#copyright {
	width:600px;
	margin:0 auto;
	text-align:center;
}
#copyright small {
	font-style: normal;
	font-size: small;
}
#footer{
	margin-top:20px;
	padding:5px 0;
	width:100%;
	color:#ffffff;
}
.active {
	ime-mode:active !important;
}
.disabled {
	ime-mode:disabled !important;
}
#acrbtn {
    font-size: 1rem;
    color: #36C;
    cursor: pointer;
    display: inline-block;
	border:1px: #ccc solid;
}
#acrbtn a {
cursor: auto;
}

#commentDescription {
    margin: 5px 0;
}

#commentDescription {
	font-size:1rem;
	line-height:130%;
}

/* windows7 ie11用のボタン*/
a:link.menu_btn2 {
  display:block;
  width:70px;
  height:34px;
  background-image:url(../sys_img/change_btn.png);
  list-style:none;
}
a:hover.menu_btn2{
  display:block;
  width:70px;
  height:34px;
  background-image:url(../sys_img/change_hover_btn.png);
  list-style:none;
}

textarea:disabled,input:disabled {
    color: rgb(0, 0, 0);
    background-color: rgb(250, 250, 250);
}
.textarea_set{
font-size:17px;vertical-align: middle;padding:3px;min-height:22px;}

p.kanri_help_btn {list-style-type:none;}
.kanri_help_btn a {
	width: 83px;
	height: 29px;
	display:block;
	background-image:url(../sys_img/kanri_help_r.png);
	background-repeat: no-repeat;
}
.kanri_help_btn a:hover {
	width: 83px;
	height: 29px;
	display:block;
	background-image:url(../sys_img/kanri_help_b.png);
	background-repeat: no-repeat;
}
p.help_btn {list-style-type:none;}
.help_btn a {
	width: 83px;
	height: 29px;
	display:block;
	background-image:url(../sys_img/help_r.png);
	background-repeat: no-repeat;
}
.help_btn a:hover {
	width: 83px;
	height: 29px;
	display:block;
	background-image:url(../sys_img/help_b.png);
	background-repeat: no-repeat;
}


.back_blu {background-color:#51c6ed;}
.back_lbu {background-color: #e8f5f5;}
.back_ore {background-color: #FEE3AC;}
.back_eme {background-color: #D7F9E3;}
.back_pnk {background-color: #FAD9D9;}
.back_ppl {background-color: #F0E3F0;}
.back_gry {background-color: #DDDDDD;}
.back_brw {background-color: #F2E3BF;}


/******************************/
.table_area_lbu table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_lbu .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#66CCCC;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_lbu th {
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-weight: normal;
	background-color:#e8f5f5;
	text-align: left;
}/*左側の見出し*/

.table_area_lbu td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	text-align:left;
	background-color:#ffffeb;
	padding: 10px;
}

/*表のタイトル以外*/
.table_area_lbu .center {
	text-align: center;
}
.table_area_lbu.left {
	text-align: left;
}
.table_area_lbu .right {
	text-align: right;
}

.table_area_lbu table tr#focus th {
	background-color: #ff9999;
}
.table_area_lbu table tr#focus td {
	background-color: #fae3d9;
}

.table_area_lbu table tr:hover td {
	background-color: rgb(255, 255, 202);
}
/***************************/

.table_area_ore table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_ore .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#F48E54;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_ore th {
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-weight: normal;
	background-color:#FEE3AC;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_ore td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	text-align:left;
	background-color:#ffffeb;
	padding: 10px;
}

/*表のタイトル以外*/
.table_area_ore .center {
	text-align: center;
}
.table_area_ore.left {
	text-align: left;
}
.table_area_ore .right {
	text-align: right;
}

.table_area_ore table tr#focus th {
	background-color: #96CC70;
}
.table_area_ore table tr#focus td {
	background-color: #DEF0BD;
}

.table_area_ore table tr:hover td {
	background-color: rgb(255, 255, 202);
}
/***************************/
.table_area_eme table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_eme .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#91E2B0;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_eme th {
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-weight: normal;
	background-color:#D7F9E3;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_eme td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	text-align:left;
	background-color:#ffffeb;
	padding: 10px;
}

/*表のタイトル以外*/
.table_area_eme .center {
	text-align: center;
}
.table_area_eme.left {
	text-align: left;
}
.table_area_eme .right {
	text-align: right;
}

.table_area_eme table tr#focus th {
	background-color: #F48E54;
}
.table_area_eme table tr#focus td {
	background-color: #FEE3AC;
}

.table_area_eme table tr:hover td {
	background-color: rgb(255, 255, 202);
}
/***************************/
.table_area_pnk table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_pnk .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#FF9999;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_pnk th {
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-weight: normal;
	background-color:#FAD9D9;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_pnk td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	text-align:left;
	background-color:#ffffeb;
	padding: 10px;
}

/*表のタイトル以外*/
.table_area_pnk .center {
	text-align: center;
}
.table_area_pnk.left {
	text-align: left;
}
.table_area_pnk .right {
	text-align: right;
}

.table_area_pnk table tr#focus th {
	background-color: #66CCCC;
}
.table_area_pnk table tr#focus td {
	background-color: #CCEDE8;
}

.table_area_pnk table tr:hover td {
	background-color: rgb(255, 255, 202);
}
/***************************/
.table_area_ppl table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_ppl .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#C4A8D6;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_ppl th {
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-weight: normal;
	background-color:#F0E3F0;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_ppl td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	text-align:left;
	background-color:#ffffeb;
	padding: 10px;
}

/*表のタイトル以外*/
.table_area_ppl .center {
	text-align: center;
}
.table_area_ppl.left {
	text-align: left;
}
.table_area_ppl .right {
	text-align: right;
}

.table_area_ppl table tr#focus th {
	background-color: #F48E54;
}
.table_area_ppl table tr#focus td {
	background-color: #FEE3AC;
}

.table_area_ppl table tr:hover td {
	background-color: rgb(255, 255, 202);
}
/***************************/

.table_area_gry table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_gry .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#999999;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_gry th {
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-weight: normal;
	background-color:#DDDDDD;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_gry td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	text-align:left;
	background-color:#ffffeb;
	padding: 10px;
}

/*表のタイトル以外*/
.table_area_gry .center {
	text-align: center;
}
.table_area_gry.left {
	text-align: left;
}
.table_area_gry .right {
	text-align: right;
}

.table_area_gry table tr#focus th {
	background-color: #F48E54;
}
.table_area_gry table tr#focus td {
	background-color: #FEE3AC;
}

.table_area_gry table tr:hover td {
	background-color: rgb(255, 255, 202);
}
/***************************/
.table_area_brw table{
	border-collapse: collapse;
	border: 1px solid #CCC;
	margin-left: auto;
	margin-right: auto;
}
.table_area_brw .midashi{
	border-collapse: collapse;
	border: solid 1px #CCC;
	font-weight: bold;
	background-color:#C69C6D;
	color: #fff;
	text-align: left;
	padding: 10px;
}/*表のタイトル*/

.table_area_brw th {
	border-collapse: collapse;
	border: solid 1px #ccc;
	font-weight: normal;
	background-color:#F2E3BF;
	text-align: left;
	padding: 10px;
}/*左側の見出し*/

.table_area_brw td {
	border-collapse: collapse;
	border: 1px solid #ccc;
	text-align:left;
	background-color:#ffffeb;
	padding: 10px;
}

/*表のタイトル以外*/
.table_area_brw .center {
	text-align: center;
}
.table_area_brw.left {
	text-align: left;
}
.table_area_brw .right {
	text-align: right;
}

.table_area_brw table tr#focus th {
	background-color: rgb(102, 204, 204);
}
.table_area_brw table tr#focus td {
	background-color: rgb(12, 205, 222);
}

.table_area_brw table tr:hover td {
	background-color: rgb(255, 255, 202);
}
/***************************/


.change_btn_grn a:hover, .change_btn_grn:hover {
    background: #DEF0BD;
    cursor: auto;
}
.change_btn_blu a:hover, .change_btn_blu:hover {
    background: #51c6ed;
    cursor: auto;
}
.change_btn_lbu a:hover, .change_btn_lbu:hover {
    background: #e8f5f5;
    cursor: auto;
}
.change_btn_ore a:hover, .change_btn_ore:hover {
    background: #FEE3AC;
    cursor: auto;
}
.change_btn_eme a:hover, .change_btn_eme:hover {
    background: #D7F9E3;
    cursor: auto;
}
.change_btn_pnk a:hover, .change_btn_pnk:hover {
    background: #FAD9D9;
    cursor: auto;
}
.change_btn_ppl a:hover, .change_btn_ppl:hover {
    background: #F0E3F0;
    cursor: auto;
}
.change_btn_gry a:hover, .change_btn_gry:hover {
    background: #DDDDDD;
    cursor: auto;
}
.change_btn_brw a:hover, .change_btn_brw:hover {
    background: #F2E3BF;
    cursor: auto;
}
.change_btn {
    padding: 3px 5px;
    border: 1px solid #888;
    text-decoration: none;
    color: #111;
    font-size: 1.0rem;
    border-radius: 5px;
    background: #fff;
    margin-right:10px;
    font-weight:normal !important;
    cursor: pointer !important;
}

/*ヘッダー180112*/

/*CSSリセット*/
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/*font: inherit;*/
/*vertical-align: baseline;*/
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}





/* === タブメニュー開始 === */
#header {
	width: 100%; /* ヘッダーの幅 */

}

/* --- ナビゲーションバー --- */
.head_nav {
width: 1200px; /* ナビゲーションの幅 */
margin:0 auto;
padding-top: 10px; /* ナビゲーションの上パディング */
background-color: #ffffff; /* ナビゲーションの背景色 */
font-size: 100%; /* タブメニューの文字サイズ */
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

/* --- メニューエリア --- */
.head_nav ul.head_nl {
width: 100%; /* メニューの幅 */
margin: 0 auto; /* メニューのマージン（上下、左右） */
padding: 0;
list-style-type: none;
text-align: center;
}

/* --- メニュー項目 --- */
.head_nav ul.head_nl li{
	position: relative;
	z-index: 1;
	width: 168px; /* タブの背景（左） */
	float: left;
	margin-top: 4px;
	margin-right: 0px;
	margin-bottom: -1px;
	margin-left: 0;
	padding:0px;
/*	background-color: #dfe4e6;*/
	border-top-left-radius: 5px; /*角丸上左*/
	border-top-right-radius: 5px; /*角丸上右*/
	border-left:1px solid #ccc; 
}

/*アクティブ以外*/
.head_nav ul.head_nl li.head_pass{
	background-color:#eee;
}
.head_nav ul.head_nl li.head_pass a:hover{
	background-color:#bfd0d6;
}


/* --- リンク --- */
.head_nav ul.head_nl li a {
	display: block;
	position: relative; /* タブの背景（右） */
	text-decoration: none; /* テキストの下線（なし） */
	padding-top: 16px;
	padding-right: 8px;
	padding-bottom: 16px;
	padding-left: 8px;
	color:#666;
}
/* --- ポイント時の設定 --- */
.head_nav ul.head_nl li a:hover {
	text-decoration: underline; /* テキストの下線（あり） */
/*	background-color:#bfd0d6;*/
	border-top-left-radius: 5px; /*角丸上左*/
	border-top-right-radius: 5px; /*角丸上右*/
	color: #000;
}
/* --- アクティブなタブ --- */
ul.head_nl li.head_active {
	z-index: 3;
/*	background-color:#19acdd;  タブの背景 */
}
.head_nav ul.head_nl li.head_active a {
	color: #ffffff; /* アクティブタブの文字色 */
}

/* === タブメニュー終了 === */


/* === サブメニュー開始 === */

/* --- ナビゲーションバー --- */
.head_localNav {
	position: relative;
/*	z-index: -1;*/
	width: 100%; /* ナビゲーションの背景 */
	border-top: 1px #aaa solid; /* 上境界線 */
	border-bottom: 1px #aaa solid; /* 下境界線 */
	font-size: 100%; /* サブメニューの文字サイズ */
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
/*	background-color: #19acdd;  ナビゲーションの背景色 */
}

/* --- メニューエリア --- */
.head_localNav ul.head_nl {
	width: 1200px; /* メニューの幅 */
	margin:0 auto;/*左右中央に*/
	padding: 1px 0; /* メニューのパディング（上下、左右） */
	list-style-type: none;
	text-align: center;
}

/* --- メニュー項目 --- */
.head_localNav ul.head_nl li {
	float: left;
	height: 50px;
}

/* --- 項目の幅（emで指定） --- */
.head_localNav ul.head_nl li.item1 {
width: 12em;
float:right;
}
.head_localNav ul.head_nl li.item2 {
width: 14em;
}
.head_localNav ul.head_nl li.item3 {
width: 8.3em;
}
.head_localNav ul.head_nl li.item4 {
width: 6.3em;
}
.head_localNav ul.head_nl li.item5 {
width: 6em;
}

/* --- リンク --- */
.head_localNav ul.head_nl li a {
	display: block;
	position: relative; /* IE6用 */
	margin-top:6px;
/* リンクエリアのパディング（上下、左右） */
	border-right: 1px dotted #aaa;  /*リンクエリアの右境界線 */
	text-decoration: none; /* テキストの下線（なし） */
	line-height: 45px;
}
.localNav ul.head_nl li a:visited,
.localNav ul.head_nl li a:active
, /* --- リンクテキストの色 --- */
.head_localNav ul.head_nl li a:link{
	color: #ffffff;
}
.head_localNav ul.head_nl li a:visited{
	color: #ffffff;
}
.head_localNav ul.head_nl li a:hover{
	color: #ffffff;
}
/* --- ポイント時の設定 --- */
.head_localNav ul.head_nl li a:hover {
	width:100%;
	background: #bfd0d6; /* ポイント時の背景 */
	text-decoration: underline;
	border-top-left-radius: 5px;/*角丸上左*/
	border-top-right-radius: 5px;/*角丸上右*/

}

/* === サブメニュー終了 === */




/*=== カラーバリエーション　===*/
.back_blu {background-color:#19acdd;}
.back_grn {background-color:#96CC70;}
.back_lbu {background-color: #66CCCC;}
.back_ore {background-color: #F48E54;}
.back_eme {background-color: #91E2B0;}
.back_pnk {background-color: #FF9999;}
.back_ppl {background-color: #C4A8D6;}
.back_gry {background-color: #999999;}
.back_brw {background-color: #C69C6D;}

.kiyaku {
    width: 120px;
    float: right;
    position: relative;
    bottom: 15px;
    right: 0px;
}
.kiyaku a {
    color:#fff;
    font-size:0.8rem;
    text-decoration:none;
}
.menu_btn_active {background:#FAD9D9;}





/*  data_input */
.rule {
  margin: 10px 0;
  border: none;
  height: 1.5px;
  background-image: linear-gradient(left, #f0f0f0, #c9bbae, #f0f0f0);
}

/* ===== Select Box ===== */
.sel {
  display: inline-block;
  width: 173px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
line-height: 50px;

}
.sel.active::before {
  transform: rotateX(-180deg);
}

.sel__placeholder {
  display: block;
  color: #000;
  text-align: left;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  visibility: visible;
text-align:center;
}

.sel.active .sel__placeholder {
  visibility: hidden;
}

.sel__placeholder::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: attr(data-placeholder);
  visibility: hidden;
}

.sel.active .sel__placeholder::before {
  visibility: visible;
}

.sel__box {
  position: absolute;
  top: calc(100% + 4px);
  display: none;
  list-style-type: none;
  text-align: left;
  font-size: 1em;
  background-color: #FFF;
  width: calc(100% + 8px);
  box-sizing: border-box;
border: 1px solid #b5b5b5;
    border-radius: 4px;
}

.sel.active .sel__box {
  display: block;
  -webkit-animation: fadeInUp 500ms;
          animation: fadeInUp 500ms;
}

.sel__box__options {
  display: list-item;
  color: #000;
  line-height: 47px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
border-bottom: 1px solid #b5b5b5;
padding: 0 5px;
}

.sel__box__options::after {
  content: '\f00c';
  font-size: 0.5em;
  margin-left: 5px;
  display: none;
}

.sel__box__options.selected::after {
  display: inline;
}

.sel__box__options:hover {
  background-color: #ebedef;
}

/* ----- Select Box Black Panther ----- */
.sel--black-panther {
  z-index: 3;
}

/* ----- Select Box Superman ----- */

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}