@charset "UTF-8";
/* Show active breakpoint in top right corner of viewport */
.hamburgler {
    width: 30px;
    height: 30px;
    display: block;
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
}

.hamburgler.no-hamburgler {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input.font-awesome {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

/*状態凡例↓*/
.n_tock {
    background-color: #7E7E7E;
    color: #FFFFFF;
}

/*在庫無*/
.n_completion {
    background-color: #3BFF70;
}

/*一部完成*/
.n_started {
    background-color: #F999E7;
}

/*未着手*/
.working {
    background-color: #FFF790;
}

/*加工中*/
.completion {
    background-color: #AFB5FC;
}

/*完成*/
.pending {
    background-color: #FFFFFF;
}

/*分納中*/
.shipment {
    background-color: #AB36F9;
    color: #FFFFFF;
}

/*出荷*/
.cancel {
    background-color: #9C9C9C;
    color: #FFFFFF;
}

/*キャンセル*/
.o_hold {
    background-color: #D9488C;
    color: #FFFFFF;
}

/*加工保留*/
.delivery {
    background-color: #FFA3A4;
}

/*希望納期*/
.input_c {
    background-color: #FFD1D1 !important;
}

/*入力欄背景色*/
.issue {
    background-color: #FF6D91;
    color: #FFFFFF;
}

/*発行*/
.processed {
    background-color: #FFF176 !important;
}

/*加工済*/
.l_working {
    background-color: #D7ECFF !important;
}

/*加工中（進捗）*/

.bg_yellow {
    background-color: #FFF176 !important;
}

.bg_blue {
    background-color: #CACAFF !important;
}

.bg_red {
    background-color: #FFC8C8 !important;
}

/*請求金額ずれアラート*/
.bg-alert {
    background-color: #FFA3A4 !important;
}

.process_c {
    background-color: #969696;
    color: #FFFFFF;
}

.bun, .meat {
    display: block;
    width: 100%;
    background: #444;
    height: 20%;
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
    border-radius: 8px;
}

.no-hamburgler .top {
    height: 38%;
    width: 20%;
    margin-left: 40%;
    border-radius: 8px 8px 0 0;
}

.no-hamburgler .bottom {
    height: 38%;
    width: 20%;
    margin-left: 40%;
    border-radius: 0 0 8px 8px;
}

.meat {
    margin: 20% 0;
}

.no-hamburgler .meat {
    margin: 2% 0;
}

/*フルページ関連*/

/*モーダル関連*/
#modal-content {
    width: 50%;
    margin: 0;
    padding: 10px 20px;
    border: 2px solid #aaa;
    background: #fff;
    position: fixed;
    display: none;
    z-index: 2;
}

#modal-overlay {
    z-index: 1;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.75);
}

/*.button-link {
	color: #00f ;
	text-decoration: underline ;
}*/

.button-link:hover {
    cursor: pointer;
    color: #CFCFCF;
}

/* IEハック用mixin */
@-o-viewport {
    width: device-width;
    initial-scale: 1;
}

@viewport {
    width: device-width;
    initial-scale: 1;
}

@-ms-viewport {
    width: auto;
    initial-scale: 1;
}

.animate, .btn, .btn-border-o:before, .btn-border-o:after, .btn-border:before, .btn-border:after, .btn-border-rev-o:before, .btn-border-rev-o:after, .btn-border-rev:before, .btn-border-rev:after, .btn-fill-vert-o:before, .btn-fill-vert-o:after, .btn-fill-vert:before, .btn-fill-vert:after, .btn-fill-horz-o:before, .btn-fill-horz-o:after, .btn-fill-horz:before, .btn-fill-horz:after {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.edt_table {
    border-top: 2px solid #7C7C7C;
}

.edt_table_bb {
    border-top: 6px solid #070707;
}

.HH {
    height: 400px;
    overflow-y: auto;
    margin-top: -60px;
}

.HH2 {
    height: 400px;
    overflow-y: auto;
    margin-top: -30px;
}

.HH3 {
    height: 400px;
    overflow-y: auto;
    margin-top: -123px;
}

.HH4 {
    height: 400px;
    overflow-y: auto;
    margin-top: -34px;
}

.table_s {
    margin-top: -30px;
}

.table_ss {
    margin-top: -27px;
}

@media (max-width: 999px) {
    .table_s {
        margin-top: -45px;
    }

    .table_ss {
        margin-top: -45px;
    }
}

.btn-border-o {
    background-color: transparent;
    border: 1px solid #d0d0d0;
    color: #B8B8B8;
}

.btn-border-o:before, .btn-border-o:after {
    content: '';
    border-style: solid;
    position: absolute;
    z-index: 5;
    border-radius: 3px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.btn-border-o:before {
    width: 0;
    height: 100%;
    border-width: 1px 0 1px 0;
    top: -1px;
    left: 0;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.btn-border-o:after {
    width: 100%;
    height: 0;
    border-width: 0 1px 0 1px;
    top: 0;
    left: -1px;
}

.btn-border-o:hover:before {
    width: 100%;
}

.btn-border-o:hover:after {
    height: 100%;
}

.btn-border-o.btn-green:before, .btn-border-o.btn-green:after {
    border-color: #2ecc71;
}

.btn-border-o.btn-green:hover {
    color: #2ecc71;
}

.btn-border-o.btn-blue:before, .btn-border-o.btn-blue:after {
    border-color: #3498db;
}

.btn-border-o.btn-blue:hover {
    color: #3498db;
}

.btn-border-o.btn-purple:before, .btn-border-o.btn-purple:after {
    border-color: #9b59b6;
}

.btn-border-o.btn-purple:hover {
    color: #9b59b6;
}

.btn-border-o.btn-navy:before, .btn-border-o.btn-navy:after {
    border-color: #34495e;
}

.btn-border-o.btn-navy:hover {
    color: #34495e;
}

.btn-border-o.btn-orange:before, .btn-border-o.btn-orange:after {
    border-color: #e67e22;
}

.btn-border-o.btn-orange:hover {
    color: #e67e22;
}

.btn-border-o.btn-red:before, .btn-border-o.btn-red:after {
    border-color: #e74c3c;
}

.btn-border-o.btn-red:hover {
    color: #e74c3c;
}

.btn-border-o.btn-main:before, .btn-border-o.btn-main:after {
    border-color: #53C9CB;
}

.btn-border-o.btn-main:hover {
    color: #53C9CB;
}

.btn-border-o.btn-sub:before, .btn-border-o.btn-sub:after {
    border-color: #84A5DD;
}

.btn-border-o.btn-sub:hover {
    color: #84A5DD;
}

.btn-border-o.btn-catch:before, .btn-border-o.btn-catch:after {
    border-color: #789B3B;
}

.btn-border-o.btn-catch:hover {
    color: #789B3B;
}

.btn-border-o.btn-black:before, .btn-border-o.btn-black:after {
    border-color: #333333;
}

.btn-border-o.btn-black:hover {
    color: #333333;
}

.btn-border {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    color: #a6a6a6;
}

.btn-border:before, .btn-border:after {
    content: '';
    border-style: solid;
    position: absolute;
    z-index: 5;
    border-radius: 3px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.btn-border:before {
    width: 0;
    height: 100%;
    border-width: 1px 0 1px 0;
    top: -1px;
    left: 0;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.btn-border:after {
    width: 100%;
    height: 0;
    border-width: 0 1px 0 1px;
    top: 0;
    left: -1px;
}

.btn-border:hover {
    background-color: transparent;
}

.btn-border:hover:before {
    width: 100%;
}

.btn-border:hover:after {
    height: 100%;
}

.btn-border.btn-green:before, .btn-border.btn-green:after {
    border-color: #2ecc71;
}

.btn-border.btn-green:hover {
    color: #2ecc71;
}

.btn-border.btn-blue:before, .btn-border.btn-blue:after {
    border-color: #3498db;
}

.btn-border.btn-blue:hover {
    color: #3498db;
}

.btn-border.btn-purple:before, .btn-border.btn-purple:after {
    border-color: #9b59b6;
}

.btn-border.btn-purple:hover {
    color: #9b59b6;
}

.btn-border.btn-navy:before, .btn-border.btn-navy:after {
    border-color: #34495e;
}

.btn-border.btn-navy:hover {
    color: #34495e;
}

.btn-border.btn-orange:before, .btn-border.btn-orange:after {
    border-color: #e67e22;
}

.btn-border.btn-orange:hover {
    color: #e67e22;
}

.btn-border.btn-red:before, .btn-border.btn-red:after {
    border-color: #e74c3c;
}

.btn-border.btn-red:hover {
    color: #e74c3c;
}

.btn-border.btn-main:before, .btn-border.btn-main:after {
    border-color: #53C9CB;
}

.btn-border.btn-main:hover {
    color: #53C9CB;
}

.btn-border.btn-sub:before, .btn-border.btn-sub:after {
    border-color: #84A5DD;
}

.btn-border.btn-sub:hover {
    color: #84A5DD;
}

.btn-border.btn-catch:before, .btn-border.btn-catch:after {
    border-color: #789B3B;
}

.btn-border.btn-catch:hover {
    color: #789B3B;
}

.btn-border.btn-black:before, .btn-border.btn-black:after {
    border-color: #333333;
}

.btn-border.btn-black:hover {
    color: #333333;
}

.btn-border-rev-o {
    background-color: transparent;
    border: 1px solid #d0d0d0;
    color: #B8B8B8;
}

.btn-border-rev-o:before, .btn-border-rev-o:after {
    content: '';
    border-style: solid;
    position: absolute;
    z-index: 5;
    border-radius: 3px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.btn-border-rev-o:before {
    width: 0;
    height: 100%;
    border-width: 1px 0 1px 0;
    top: -1px;
    right: 0;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.btn-border-rev-o:after {
    width: 100%;
    height: 0;
    border-width: 0 1px 0 1px;
    bottom: 0;
    left: -1px;
}

.btn-border-rev-o:hover:before {
    width: 100%;
}

.btn-border-rev-o:hover:after {
    height: 100%;
}

.btn-border-rev-o.btn-green:before, .btn-border-rev-o.btn-green:after {
    border-color: #2ecc71;
}

.btn-border-rev-o.btn-green:hover {
    color: #2ecc71;
}

.btn-border-rev-o.btn-blue:before, .btn-border-rev-o.btn-blue:after {
    border-color: #3498db;
}

.btn-border-rev-o.btn-blue:hover {
    color: #3498db;
}

.btn-border-rev-o.btn-purple:before, .btn-border-rev-o.btn-purple:after {
    border-color: #9b59b6;
}

.btn-border-rev-o.btn-purple:hover {
    color: #9b59b6;
}

.btn-border-rev-o.btn-navy:before, .btn-border-rev-o.btn-navy:after {
    border-color: #34495e;
}

.btn-border-rev-o.btn-navy:hover {
    color: #34495e;
}

.btn-border-rev-o.btn-orange:before, .btn-border-rev-o.btn-orange:after {
    border-color: #e67e22;
}

.btn-border-rev-o.btn-orange:hover {
    color: #e67e22;
}

.btn-border-rev-o.btn-red:before, .btn-border-rev-o.btn-red:after {
    border-color: #e74c3c;
}

.btn-border-rev-o.btn-red:hover {
    color: #e74c3c;
}

.btn-border-rev-o.btn-main:before, .btn-border-rev-o.btn-main:after {
    border-color: #53C9CB;
}

.btn-border-rev-o.btn-main:hover {
    color: #53C9CB;
}

.btn-border-rev-o.btn-sub:before, .btn-border-rev-o.btn-sub:after {
    border-color: #84A5DD;
}

.btn-border-rev-o.btn-sub:hover {
    color: #84A5DD;
}

.btn-border-rev-o.btn-catch:before, .btn-border-rev-o.btn-catch:after {
    border-color: #789B3B;
}

.btn-border-rev-o.btn-catch:hover {
    color: #789B3B;
}

.btn-border-rev-o.btn-black:before, .btn-border-rev-o.btn-black:after {
    border-color: #333333;
}

.btn-border-rev-o.btn-black:hover {
    color: #333333;
}

.btn-border-rev {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    color: #a6a6a6;
}

.btn-border-rev:before, .btn-border-rev:after {
    content: '';
    border-style: solid;
    position: absolute;
    z-index: 5;
    border-radius: 3px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.btn-border-rev:before {
    width: 0;
    height: 100%;
    border-width: 1px 0 1px 0;
    top: -1px;
    right: 0;
}

.btn-border-rev:after {
    width: 100%;
    height: 0;
    border-width: 0 1px 0 1px;
    bottom: 0;
    left: -1px;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.btn-border-rev:hover {
    background-color: transparent;
}

.btn-border-rev:hover:before {
    width: 100%;
}

.btn-border-rev:hover:after {
    height: 100%;
}

.btn-border-rev.btn-green:before, .btn-border-rev.btn-green:after {
    border-color: #2ecc71;
}

.btn-border-rev.btn-green:hover {
    color: #2ecc71;
}

.btn-border-rev.btn-blue:before, .btn-border-rev.btn-blue:after {
    border-color: #3498db;
}

.btn-border-rev.btn-blue:hover {
    color: #3498db;
}

.btn-border-rev.btn-purple:before, .btn-border-rev.btn-purple:after {
    border-color: #9b59b6;
}

.btn-border-rev.btn-purple:hover {
    color: #9b59b6;
}

.btn-border-rev.btn-navy:before, .btn-border-rev.btn-navy:after {
    border-color: #34495e;
}

.btn-border-rev.btn-navy:hover {
    color: #34495e;
}

.btn-border-rev.btn-orange:before, .btn-border-rev.btn-orange:after {
    border-color: #e67e22;
}

.btn-border-rev.btn-orange:hover {
    color: #e67e22;
}

.btn-border-rev.btn-red:before, .btn-border-rev.btn-red:after {
    border-color: #e74c3c;
}

.btn-border-rev.btn-red:hover {
    color: #e74c3c;
}

.btn-border-rev.btn-main:before, .btn-border-rev.btn-main:after {
    border-color: #53C9CB;
}

.btn-border-rev.btn-main:hover {
    color: #53C9CB;
}

.btn-border-rev.btn-sub:before, .btn-border-rev.btn-sub:after {
    border-color: #84A5DD;
}

.btn-border-rev.btn-sub:hover {
    color: #84A5DD;
}

.btn-border-rev.btn-catch:before, .btn-border-rev.btn-catch:after {
    border-color: #789B3B;
}

.btn-border-rev.btn-catch:hover {
    color: #789B3B;
}

.btn-border-rev.btn-black:before, .btn-border-rev.btn-black:after {
    border-color: #333333;
}

.btn-border-rev.btn-black:hover {
    color: #333333;
}

.btn-fill-vert-o {
    background-color: transparent;
    border: 1px solid #d0d0d0;
    color: #B8B8B8;
    overflow: hidden;
}

.btn-fill-vert-o:before, .btn-fill-vert-o:after {
    content: '';
    width: 100%;
    height: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    z-index: -1;
}

.btn-fill-vert-o:before {
    top: 50%;
}

.btn-fill-vert-o:after {
    bottom: 50%;
}

.btn-fill-vert-o:hover {
    color: #fff;
}

.btn-fill-vert-o:hover:before, .btn-fill-vert-o:hover:after {
    height: 50%;
    opacity: 1;
}

.btn-fill-vert-o.btn-green:before, .btn-fill-vert-o.btn-green:after {
    background-color: #2ecc71;
}

.btn-fill-vert-o.btn-green:hover {
    border-color: #2ecc71;
}

.btn-fill-vert-o.btn-blue:before, .btn-fill-vert-o.btn-blue:after {
    background-color: #3498db;
}

.btn-fill-vert-o.btn-blue:hover {
    border-color: #3498db;
}

.btn-fill-vert-o.btn-purple:before, .btn-fill-vert-o.btn-purple:after {
    background-color: #9b59b6;
}

.btn-fill-vert-o.btn-purple:hover {
    border-color: #9b59b6;
}

.btn-fill-vert-o.btn-navy:before, .btn-fill-vert-o.btn-navy:after {
    background-color: #34495e;
}

.btn-fill-vert-o.btn-navy:hover {
    border-color: #34495e;
}

.btn-fill-vert-o.btn-orange:before, .btn-fill-vert-o.btn-orange:after {
    background-color: #e67e22;
}

.btn-fill-vert-o.btn-orange:hover {
    border-color: #e67e22;
}

.btn-fill-vert-o.btn-red:before, .btn-fill-vert-o.btn-red:after {
    background-color: #e74c3c;
}

.btn-fill-vert-o.btn-red:hover {
    border-color: #e74c3c;
}

.btn-fill-vert-o.btn-main:before, .btn-fill-vert-o.btn-main:after {
    background-color: #53C9CB;
}

.btn-fill-vert-o.btn-main:hover {
    border-color: #53C9CB;
}

.btn-fill-vert-o.btn-sub:before, .btn-fill-vert-o.btn-sub:after {
    background-color: #84A5DD;
}

.btn-fill-vert-o.btn-sub:hover {
    border-color: #84A5DD;
}

.btn-fill-vert-o.btn-catch:before, .btn-fill-vert-o.btn-catch:after {
    background-color: #789B3B;
}

.btn-fill-vert-o.btn-catch:hover {
    border-color: #789B3B;
}

.btn-fill-vert-o.btn-black:before, .btn-fill-vert-o.btn-black:after {
    background-color: #333333;
}

.btn-fill-vert-o.btn-black:hover {
    border-color: #333333;
}

.btn-fill-vert {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    color: #a6a6a6;
    overflow: hidden;
}

.btn-fill-vert:before, .btn-fill-vert:after {
    content: '';
    width: 100%;
    height: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    z-index: -1;
}

.btn-fill-vert:before {
    top: 50%;
}

.btn-fill-vert:after {
    bottom: 50%;
}

.btn-fill-vert:hover {
    color: #fff;
}

.btn-fill-vert:hover:before, .btn-fill-vert:hover:after {
    height: 50%;
    opacity: 1;
}

.btn-fill-vert.btn-green:before, .btn-fill-vert.btn-green:after {
    background-color: #2ecc71;
}

.btn-fill-vert.btn-green:hover {
    border-color: #2ecc71;
}

.btn-fill-vert.btn-blue:before, .btn-fill-vert.btn-blue:after {
    background-color: #3498db;
}

.btn-fill-vert.btn-blue:hover {
    border-color: #3498db;
}

.btn-fill-vert.btn-purple:before, .btn-fill-vert.btn-purple:after {
    background-color: #9b59b6;
}

.btn-fill-vert.btn-purple:hover {
    border-color: #9b59b6;
}

.btn-fill-vert.btn-navy:before, .btn-fill-vert.btn-navy:after {
    background-color: #34495e;
}

.btn-fill-vert.btn-navy:hover {
    border-color: #34495e;
}

.btn-fill-vert.btn-orange:before, .btn-fill-vert.btn-orange:after {
    background-color: #e67e22;
}

.btn-fill-vert.btn-orange:hover {
    border-color: #e67e22;
}

.btn-fill-vert.btn-red:before, .btn-fill-vert.btn-red:after {
    background-color: #e74c3c;
}

.btn-fill-vert.btn-red:hover {
    border-color: #e74c3c;
}

.btn-fill-vert.btn-main:before, .btn-fill-vert.btn-main:after {
    background-color: #53C9CB;
}

.btn-fill-vert.btn-main:hover {
    border-color: #53C9CB;
}

.btn-fill-vert.btn-sub:before, .btn-fill-vert.btn-sub:after {
    background-color: #84A5DD;
}

.btn-fill-vert.btn-sub:hover {
    border-color: #84A5DD;
}

.btn-fill-vert.btn-catch:before, .btn-fill-vert.btn-catch:after {
    background-color: #789B3B;
}

.btn-fill-vert.btn-catch:hover {
    border-color: #789B3B;
}

.btn-fill-vert.btn-black:before, .btn-fill-vert.btn-black:after {
    background-color: #333333;
}

.btn-fill-vert.btn-black:hover {
    border-color: #333333;
}

.btn-fill-horz-o {
    background-color: transparent;
    border: 1px solid #d0d0d0;
    color: #B8B8B8;
    overflow: hidden;
}

.btn-fill-horz-o:before, .btn-fill-horz-o:after {
    content: '';
    width: 0;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: -1;
}

.btn-fill-horz-o:before {
    left: 50%;
}

.btn-fill-horz-o:after {
    right: 50%;
}

.btn-fill-horz-o:hover {
    color: #fff;
}

.btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after {
    width: 50%;
    opacity: 1;
}

.btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after {
    background-color: #2ecc71;
}

.btn-fill-horz-o.btn-green:hover {
    border-color: #2ecc71;
}

.btn-fill-horz-o.btn-blue:before, .btn-fill-horz-o.btn-blue:after {
    background-color: #3498db;
}

.btn-fill-horz-o.btn-blue:hover {
    border-color: #3498db;
}

.btn-fill-horz-o.btn-purple:before, .btn-fill-horz-o.btn-purple:after {
    background-color: #9b59b6;
}

.btn-fill-horz-o.btn-purple:hover {
    border-color: #9b59b6;
}

.btn-fill-horz-o.btn-navy:before, .btn-fill-horz-o.btn-navy:after {
    background-color: #34495e;
}

.btn-fill-horz-o.btn-navy:hover {
    border-color: #34495e;
}

.btn-fill-horz-o.btn-orange:before, .btn-fill-horz-o.btn-orange:after {
    background-color: #e67e22;
}

.btn-fill-horz-o.btn-orange:hover {
    border-color: #e67e22;
}

.btn-fill-horz-o.btn-red:before, .btn-fill-horz-o.btn-red:after {
    background-color: #e74c3c;
}

.btn-fill-horz-o.btn-red:hover {
    border-color: #e74c3c;
}

.btn-fill-horz-o.btn-main:before, .btn-fill-horz-o.btn-main:after {
    background-color: #53C9CB;
}

.btn-fill-horz-o.btn-main:hover {
    border-color: #53C9CB;
}

.btn-fill-horz-o.btn-sub:before, .btn-fill-horz-o.btn-sub:after {
    background-color: #84A5DD;
}

.btn-fill-horz-o.btn-sub:hover {
    border-color: #84A5DD;
}

.btn-fill-horz-o.btn-catch:before, .btn-fill-horz-o.btn-catch:after {
    background-color: #789B3B;
}

.btn-fill-horz-o.btn-catch:hover {
    border-color: #789B3B;
}

.btn-fill-horz-o.btn-black:before, .btn-fill-horz-o.btn-black:after {
    background-color: #333333;
}

.btn-fill-horz-o.btn-black:hover {
    border-color: #333333;
}

.btn-fill-horz {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    color: #a6a6a6;
    overflow: hidden;
}

.btn-fill-horz:before, .btn-fill-horz:after {
    content: '';
    width: 0;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: -1;
}

.btn-fill-horz:before {
    left: 50%;
}

.btn-fill-horz:after {
    right: 50%;
}

.btn-fill-horz:hover {
    color: #fff;
}

.btn-fill-horz:hover:before, .btn-fill-horz:hover:after {
    width: 50%;
    opacity: 1;
}

.btn-fill-horz.btn-green:before, .btn-fill-horz.btn-green:after {
    background-color: #2ecc71;
}

.btn-fill-horz.btn-green:hover {
    border-color: #2ecc71;
}

.btn-fill-horz.btn-blue:before, .btn-fill-horz.btn-blue:after {
    background-color: #3498db;
}

.btn-fill-horz.btn-blue:hover {
    border-color: #3498db;
}

.btn-fill-horz.btn-purple:before, .btn-fill-horz.btn-purple:after {
    background-color: #9b59b6;
}

.btn-fill-horz.btn-purple:hover {
    border-color: #9b59b6;
}

.btn-fill-horz.btn-navy:before, .btn-fill-horz.btn-navy:after {
    background-color: #34495e;
}

.btn-fill-horz.btn-navy:hover {
    border-color: #34495e;
}

.btn-fill-horz.btn-orange:before, .btn-fill-horz.btn-orange:after {
    background-color: #e67e22;
}

.btn-fill-horz.btn-orange:hover {
    border-color: #e67e22;
}

.btn-fill-horz.btn-red:before, .btn-fill-horz.btn-red:after {
    background-color: #e74c3c;
}

.btn-fill-horz.btn-red:hover {
    border-color: #e74c3c;
}

.btn-fill-horz.btn-main:before, .btn-fill-horz.btn-main:after {
    background-color: #53C9CB;
}

.btn-fill-horz.btn-main:hover {
    border-color: #53C9CB;
}

.btn-fill-horz.btn-sub:before, .btn-fill-horz.btn-sub:after {
    background-color: #84A5DD;
}

.btn-fill-horz.btn-sub:hover {
    border-color: #84A5DD;
}

.btn-fill-horz.btn-catch:before, .btn-fill-horz.btn-catch:after {
    background-color: #789B3B;
}

.btn-fill-horz.btn-catch:hover {
    border-color: #789B3B;
}

.btn-fill-horz.btn-black:before, .btn-fill-horz.btn-black:after {
    background-color: #333333;
}

.btn-fill-horz.btn-black:hover {
    border-color: #333333;
}

.tree-menu {
    line-height: 1em;
}

.tree-menu, .tree-menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.tree-menu > li {
    margin-bottom: 0.5em;
}

.tree-menu ul {
    position: relative;
    margin-top: 0.5em;
    margin-left: 1em;
}

.tree-menu ul:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-left: 1px solid #333333;
}

.tree-menu ul li {
    position: relative;
    margin: 0;
    line-height: 1.6rem;
    padding: 0.5em 1em;
}

.tree-menu ul li:before {
    content: "";
    display: block;
    position: absolute;
    top: 1em;
    left: 0;
    width: 0.5em;
    height: 0;
    border-top: 1px solid #333333;
}

.tree-menu ul li:last-child:before {
    top: 1em;
    bottom: 0;
    height: auto;
    background-color: #eee;
}

.btn.padding-0 {
    padding: 0.4rem 0;
}

.btn.padding-mini {
    padding: 0.4rem 0.6rem;
}

.btn.padding-large {
    padding: 0.4rem 2.6rem;
}

.btn-transparent.active, .btn-transparent:active, .btn-transparent.focus, .btn-transparent:focus, .btn-transparent:hover, .open > .dropdown-toggle.btn-transparent {
    color: #f2f2f2;
    background-color: #E78B5F;
    border-color: #EEE;
}

.btn-transparent.active {
    background-image: none;
}

.btn-transparent:active {
    background-image: none;
}

.open > .dropdown-toggle.btn-transparent {
    background-image: none;
}

.btn-main {
    color: #fff;
    background-color: #53C9CB;
    border-color: #53C9CB;
}

.btn-main:hover {
    background-color: #37b2b4;
    color: #fff;
}

.btn-main:active {
    background-color: #37b2b4;
    color: #fff;
}

.btn-main:focus {
    background-color: #7ad5d7;
    color: #fff;
}

.btn-sub {
    color: #fff;
    background-color: #84A5DD;
    border-color: #84A5DD;
}

.btn-sub:hover {
    background-color: #5c88d2;
    color: #fff;
}

.btn-sub:active {
    background-color: #5c88d2;
    color: #fff;
}

.btn-sub:focus {
    background-color: #acc2e8;
    color: #fff;
}

.btn-orange {
    color: #fff;
    background-color: #F5B6AD;
    border-color: #F5B6AD;
}

.btn-orange:hover {
    background-color: #ef8e80;
    color: #fff;
}

.btn-orange:active {
    background-color: #ef8e80;
    color: #fff;
}

.btn-orange:focus {
    background-color: #fbdeda;
    color: #fff;
}

.btn-purple {
    color: #fff;
    background-color: #AF99D2;
    border-color: #AF99D2;
}

.btn-purple:hover {
    background-color: #9376c2;
    color: #fff;
}

.btn-purple:active {
    background-color: #9376c2;
    color: #fff;
}

.btn-purple:focus {
    background-color: #cbbce2;
    color: #fff;
}

.btn-gray {
    color: #333333;
    background-color: #eeeeee;
    border-color: #d5d5d5;
}

.btn-gray:hover {
    background-color: #d5d5d5;
    color: #333333;
}

.btn-gray:active {
    background-color: #d5d5d5;
    color: #333333;
}

.btn-gray:focus {
    background-color: white;
    color: #333333;
}

@media (max-width: 39.99em) {
    .btn-gray-tablet {
        color: #fff;
        background-color: #BBBBBB;
        border-color: #BBBBBB;
        text-align: left;
        padding: 1rem 3rem 1rem 1rem;
        border-radius: 0;
        border-top: 2px dashed #fff;
    }

    .btn-gray-tablet:hover {
        background-color: #a2a2a2;
        color: #fff;
    }

    .btn-gray-tablet:active {
        background-color: #a2a2a2;
        color: #fff;
    }

    .btn-gray-tablet:focus {
        background-color: #d5d5d5;
        color: #fff;
    }
}

/*
---
name: responsive-button
tag:
 - base
 - latest
category:
 - component
 - component/responsive-button
---

## 領域内でサイズが可変するボタン

クラス名`responsive-button-wrap`で囲んだブロック要素内で1行内でサイズが自動的に変わるボタン。

子要素に`responsive-button`を与えた要素が可変対象となる。

初期設定では、ウインドウ幅が小デスクトップモニタサイズになると自動的に幅が行に対して最大となって、縦に並ぶ。

以下は、ボタンのサイズが均一の時の指定方法。

<div class="responsive-button-wrap">
 <a class="btn btn-sub responsive-button" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>

```html
<div class="responsive-button-wrap">
 <a class="btn btn-sub responsive-button" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>
```

### 子要素の幅サイズの比率変更

以下は、要素によってサイズを変える方法。

- size-biggest 比率:5
- size-bigger 比率:4
- 指定なし 比率:3
- size-smaller 比率:2
- size-smallest 比率:1

<div class="responsive-button-wrap">
 <a class="btn btn-sub responsive-button size-biggest" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button size-smallest"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>

```html
<div class="responsive-button-wrap">
 <a class="btn btn-sub responsive-button size-biggest" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button size-smallest"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>
```

### ブレークポイント変更

クラスに`wrap-tablet`を指定するとタブレットサイズで、`wrap-mobile`を指定するとモバイルサイズでボタンを縦並びになるよう設定できる。

#### タブレットサイズで縦並び

<div class="responsive-button-wrap wrap-tablet">
 <a class="btn btn-sub responsive-button" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>

```html
<div class="responsive-button-wrap wrap-tablet">
 <a class="btn btn-sub responsive-button" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>
```

#### モバイルサイズで縦並び

<div class="responsive-button-wrap wrap-mobile">
 <a class="btn btn-sub responsive-button" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>

```html
<div class="responsive-button-wrap wrap-mobile">
 <a class="btn btn-sub responsive-button" href="#1"><i class="fa fa-pencil" aria-hidden="true"></i> 編集</a>
 <a class="btn btn-purple responsive-button" href="#1"><i class="fa fa-external-link" aria-hidden="true"></i> リンク</a>
 <button class="btn btn-orange responsive-button delete-button"><i class="fa fa-trash" aria-hidden="true"></i> 削除</button>
</div>
```
*/
.responsive-button-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.responsive-button-wrap .responsive-button {
    -webkit-box-flex: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    padding: 0;
    max-width: 100%;
    margin: 0.25rem 0.1rem;
}

.responsive-button-wrap .responsive-button.size-biggest {
    -webkit-box-flex: 5;
    -ms-flex-positive: 5;
    flex-grow: 5;
}

.responsive-button-wrap .responsive-button.size-bigger {
    -webkit-box-flex: 4;
    -ms-flex-positive: 4;
    flex-grow: 4;
}

.responsive-button-wrap .responsive-button.size-smaller {
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
}

.responsive-button-wrap .responsive-button.size-smallest {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

@media (max-width: 49.99em) {
    .responsive-button-wrap {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .responsive-button-wrap .responsive-button {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 49.99em) {
    .responsive-button-wrap.wrap-mobile {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .responsive-button-wrap.wrap-mobile .responsive-button {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}

@media (max-width: 39.99em) {
    .responsive-button-wrap.wrap-mobile {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .responsive-button-wrap.wrap-mobile .responsive-button {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}

@media (max-width: 19.99em) {
    .responsive-button-wrap.wrap-mobile {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .responsive-button-wrap.wrap-mobile .responsive-button {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 49.99em) {
    .responsive-button-wrap.wrap-tablet {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .responsive-button-wrap.wrap-tablet .responsive-button {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}

@media (max-width: 39.99em) {
    .responsive-button-wrap.wrap-tablet {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .responsive-button-wrap.wrap-tablet .responsive-button {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.line-vertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0 0 2rem;
    margin-bottom: 0;
}

.line-vertical.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 39.99em) {
    .line-vertical {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media (max-width: 39.99em) {
    .line-vertical input {
        max-width: 100%;
    }
}

.line-vertical button {
    line-height: 1.4rem;
}

@media (max-width: 39.99em) {
    .line-vertical button {
        margin-top: 0.5rem;
    }
}

/*
  common.css
*/
.clearfix:after {
    display: block;
    clear: both;
    content: "";
}

ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.responsive {
    max-width: 100%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/*
USES: sm(399px)以下の時のメディアクエリ
  @include mq($until: tablet) {
    flex:1 1 320px;
  }
*/
/* Conditions */
/*
---
name: spn-none
tag:
 - base
 - latest
category:
 - condition
 - condition/spn-none
---

## モバイルサイズ以下を非表示にする

<div class="spn-none">
 <p>モバイルサイズで消えますよ。</p>
</div>

```html
<div class="spn-none">
 <p>モバイルサイズで消えますよ。</p>
</div>
```
*/
@media (max-width: 19.99em) {
    .spn-none {
        display: none;
    }
}

/*
---
name: tablet-none
tag:
 - base
 - latest
category:
 - condition
 - condition/tablet-none
---

## タブレットサイズ以下を非表示にする

<div class="tablet-none">
 <p>タブレットサイズで消えますよ。</p>
</div>

```html
<div class="tablet-none">
 <p>タブレットサイズで消えますよ。</p>
</div>
```
*/
@media (max-width: 39.99em) {
    .tablet-none {
        display: none;
    }
}

/*
---
name: spn-no-margin
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/spn-no-margin
---

## モバイルサイズ以下はマージン0にする。

<div style="border:1px solid #333;">
<p class="margin-1rem spn-no-margin" style="background:#bbb;">
 スマホサイズはマージン0
</p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin" style="background:#bbb;">
  スマホサイズはマージン0
 </p>
</div>
```
*/
@media (max-width: 19.99em) {
    .spn-no-margin {
        margin: 0 !important;
    }
}

/*
---
name: spn-no-margin-left
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/spn-no-margin-left
---

## モバイルサイズ以下は左マージンを無しにする。

<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-left" style="background:#bbb;">
  モバイルサイズ以下は左マージンを無しにする
 </p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-left" style="background:#bbb;">
  モバイルサイズ以下は左マージンを無しにする
 </p>
</div>
```
*/
@media (max-width: 19.99em) {
    .spn-no-margin-left {
        margin-left: 0 !important;
    }
}

/*
---
name: spn-no-margin-top
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/spn-no-margin-top
---

## モバイルサイズ以下は上マージンを無しにする。

<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-top" style="background:#bbb;">
  モバイルサイズ以下は上マージンを無しにする
 </p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-top" style="background:#bbb;">
  モバイルサイズ以下は上マージンを無しにする
 </p>
</div>
```
*/
@media (max-width: 19.99em) {
    .spn-no-margin-top {
        margin-top: 0 !important;
    }
}

/*
---
name: spn-no-margin-right
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/spn-no-margin-right
---

## モバイルサイズ以下は右マージンを無しにする。

<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-right" style="background:#bbb;">
  モバイルサイズ以下は右マージンを無しにする
 </p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-right" style="background:#bbb;">
  モバイルサイズ以下は右マージンを無しにする
 </p>
</div>
```
*/
@media (max-width: 19.99em) {
    .spn-no-margin-right {
        margin-right: 0 !important;
    }
}

/*
---
name: spn-no-margin-bottom
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/spn-no-margin-bottom
---

## モバイルサイズ以下は下マージンを無しにする。

<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-bottom" style="background:#bbb;">
  モバイルサイズ以下は下マージンを無しにする
 </p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem spn-no-margin-bottom" style="background:#bbb;">
  モバイルサイズ以下は下マージンを無しにする
 </p>
</div>
```
*/
@media (max-width: 19.99em) {
    .spn-no-margin-bottom {
        margin-bottom: 0 !important;
    }
}

/*
---
name: tablet-no-margin
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/tablet-no-margin
---

## タブレットサイズ以下はマージン0にする。

<div style="border:1px solid #333;">
<p class="margin-1rem tablet-no-margin" style="background:#bbb;">
 タブレットサイズはマージン0
</p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem tablet-no-margin" style="background:#bbb;">
  タブレットサイズはマージン0
 </p>
</div>
```
*/
@media (max-width: 39.99em) {
    .tablet-no-margin {
        margin: 0 !important;
    }
}

/*
---
name: tablet-no-margin-left
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/tablet-no-margin-left
---

## タブレットサイズ以下は左マージンを0にする。

<div style="border:1px solid #333;">
<p class="margin-1rem tablet-no-margin-left" style="background:#bbb;">
 タブレットサイズ以下は左マージン0
</p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem tablet-no-margin-left" style="background:#bbb;">
  タブレットサイズ以下は左マージン0
 </p>
</div>
```
*/
@media (max-width: 39.99em) {
    .tablet-no-margin-left {
        margin-left: 0 !important;
    }
}

/*
---
name: tablet-no-margin-top
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/tablet-no-margin-top
---

## タブレットサイズ以下は上マージンを0にする。

<div style="border:1px solid #333;">
<p class="margin-1rem tablet-no-margin-top" style="background:#bbb;">
 タブレットサイズ以下は上マージン0
</p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem tablet-no-margin-top" style="background:#bbb;">
  タブレットサイズ以下は上マージン0
 </p>
</div>
```
*/
@media (max-width: 39.99em) {
    .tablet-no-margin-top {
        margin-top: 0 !important;
    }
}

/*
---
name: tablet-no-margin-right
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/tablet-no-margin-right
---

## タブレットサイズ以下は右マージンを0にする。

<div style="border:1px solid #333;">
<p class="margin-1rem tablet-no-margin-right" style="background:#bbb;">
 タブレットサイズ以下は右マージン0
</p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem tablet-no-margin-right" style="background:#bbb;">
  タブレットサイズ以下は右マージン0
 </p>
</div>
```
*/
@media (max-width: 39.99em) {
    .tablet-no-margin-right {
        margin-right: 0 !important;
    }
}

/*
---
name: tablet-no-margin-bottom
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
 - condition/no-margin/tablet-no-margin-bottom
---

## タブレットサイズ以下は下マージンを0にする。

<div style="border:1px solid #333;">
<p class="margin-1rem tablet-no-margin-bottom" style="background:#bbb;">
 タブレットサイズ以下は下マージン0
</p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem tablet-no-margin-bottom" style="background:#bbb;">
  タブレットサイズ以下は下マージン0
 </p>
</div>
```
*/
@media (max-width: 39.99em) {
    .tablet-no-margin-bottom {
        margin-bottom: 0 !important;
    }
}

/*
---
name: no-margin
tag:
 - base
 - latest
category:
 - condition
 - condition/no-margin
---

## マージンを0にする。

一番弱いクラスなので

<div style="border:1px solid #333;">
<p class="margin-1rem tablet-no-margin-bottom" style="background:#bbb;">
 タブレットサイズ以下は下マージン0
</p>
</div>

```html
<div style="border:1px solid #333;">
 <p class="margin-1rem tablet-no-margin-bottom" style="background:#bbb;">
  タブレットサイズ以下は下マージン0
 </p>
</div>
```
*/
.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.margin-wrapper {
    margin: 0 auto;
    width: 1280px;
}

.mgn-minus10 {
    max-width: calc(100% - 20rem);
}

@media (max-width: 39.99em) {
    .w_auto_tablet {
        width: inherit;
    }
}

.pc-center {
    text-align: center;
}

@media (max-width: 39.99em) {
    .pc-center {
        text-align: left;
    }
}

.btn-choice {
    border: thin solid #EEE;
}

.margin-1rem {
    margin: 1rem;
}

.padding-1rem {
    padding: 1rem;
}

/* Components */
.textbox {
    border: 0;
    padding: 0.4rem 0.8rem;
    font-size: 1rem;
    color: #aaa;
    border: solid 1px #ccc;
    margin: 0;
    width: 6rem;
}

/* login */
.login {
    min-height: 100%;
    position: absolute;
    width: 100%;
    margin-bottom: 0;
    background-color: #f5f5f5;
    border-top: 0.5rem solid #53C9CB;
}

.login .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: absolute;
    height: 80%;
    width: 100%;
    max-width: inherit;
    margin: 0;
}

.login .wrap .login-space {
    max-width: 50rem;
    width: 50rem;
}

.login .wrap .login2-space {
    /*max-width: 50rem;*/
    width: 80rem;
}

.login .wrap .login-space .logo-space {
    border-radius: 0.2rem;
    background: #fff;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    padding: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

.login .wrap .login2-space .logo-space {
    border-radius: 0.2rem;
    background: #fff;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    padding: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

.login .wrap .login-space .logo-space:after {
    content: "";
    border: solid transparent;
    display: inline-block;
    position: absolute;
    border-width: 8px;
    border-top-color: #fff;
    margin-left: -8px;
    left: 50%;
    bottom: -16px;
}

.login .wrap .login2-space .logo-space:after {
    content: "";
    border: solid transparent;
    display: inline-block;
    position: absolute;
    border-width: 8px;
    border-top-color: #fff;
    margin-left: -8px;
    left: 50%;
    bottom: -16px;
}

.login .wrap .login-space .logo-space h1 {
    margin: 0;
}

.login .wrap .login2-space .logo-space h1 {
    margin: 0;
}

.login .wrap .login-space .logo-space h1 img {
    max-width: 100%;
}

.login .wrap .login2-space .logo-space h1 img {
    max-width: 100%;
}

.login .wrap .login-space .login-wrap {
    border-radius: 0.2rem;
    background: #fff;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    padding: 1rem;
}

.login .wrap .login2-space .login-wrap {
    border-radius: 0.2rem;
    background: #fff;
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    padding: 1rem;
}

_:-ms-fullscreen, :root .login .wrap .login-space .login-wrap {
    box-shadow: 1px 1px 1px 14px -4px #ccc;
}

.login .wrap .login-space .login-wrap .login-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.login .wrap .login-space .login-wrap .login-box li {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: 48%;
    flex-basis: 48%;
}

.login .wrap .login-space .login-wrap .login-box li:first-child {
    margin-right: 1rem;
}

@media (max-width: 19.99em) {
    .login .wrap .login-space .login-wrap .login-box li {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .login .wrap .login-space .login-wrap .login-box li:first-child {
        margin-right: 0;
    }
}

.login .wrap .login-space .login-wrap .button-space {
    margin: 0;
}

/* table components */
.table-responsive {
    table-layout: fixed;
}

@media (max-width: 39.99em) {
    .table-responsive {
        table-layout: auto;
    }
}

@media (max-width: 19.99em) {
    .table-responsive > thead {
        display: none;
    }
}

.table-print,.table-print>thead>tr>th,.table-print>tbody>tr>td{
    border:1px solid black;
}

.table-responsive > thead > tr > th {
    font-weight: normal;
    text-align: center;
    word-break: break-all;
}

.table-responsive > thead > tr > th.center {
    text-align: center;
}

.table-responsive > tbody > tr > td {
    word-break: break-all;
}

.table-responsive > tbody > tr > td.center {
    text-align: center;
}

@media (max-width: 19.99em) {
    .table-responsive > tbody > tr > td {
        display: block;
        text-align: left !important;
        padding: 1rem;
    }

    .table-responsive > tbody > tr > td:before {
        font-weight: bold;
        content: attr(data-caption) ":";
    }
}

@media (max-width: 39.99em) {
    .table-responsive > tbody > tr > td button {
        margin-bottom: 0.2rem;
    }
}

.table.table-wd-inherit {
    width: inherit;
}

.table p {
    margin: 0;
}

.table > thead > tr > th {
    font-weight: normal;
    text-align: center;
}

.table.table-beige > thead > tr {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.table.table-beige > thead > tr > th {
    border-right: 1px solid #ddd;
    font-weight: bold;
}

.table.table-beige > tbody > tr:nth-child(odd) {
    background-color: #fcf8e3;
}

.table.table-beige > tbody > tr > td {
    font-size: 1.4rem;
}

@media (max-width: 19.99em) {
    .table.table-beige > tbody > tr > td.name {
        background-color: #888;
        color: #ddd;
        padding: 1rem;
    }

    .table.table-beige > tbody > tr > td.name a {
        color: #f2f2f2;
    }
}

.table.table-gray > thead > tr {

    height: 30px;

    background-color: #888;
    border-top: 2px solid #ddd;
}

.table.table-print.table-gray>thead>tr>th{
    border:2px solid black;
}

.table.table-gray > thead > tr > th {
    border-right: 1px solid #f2f2f2;
    color: #f2f2f2;
}

.table.table-gray > tbody > tr:nth-child(even) {
    background-color: #eeeeee;
}

@media (max-width: 19.99em) {
    .table.table-gray > tbody > tr > td.name, .table.table-gray > tbody > tr > td.title {
        background-color: #888;
        color: #ddd;
        padding: 1rem;
    }

    .table.table-gray > tbody > tr > td.name a, .table.table-gray > tbody > tr > td.title a {
        color: #f2f2f2;
    }
}

/* pagination */
.pagination > li > a, .pagination > li > span {
    font-weight: bold;
    color: #333333;
}

.pagination .active > a, .pagination .active > span {
    color: #f2f2f2;
    border-color: #E78B5F;
    background-color: #E78B5F;
}

.pagination .active > a:focus, .pagination .active > span:focus {
    color: #E78B5F;
}

.pagination .active > a:hover, .pagination .active > span:hover {
    color: #f2f2f2;
    border-color: #E78B5F;
    background-color: #E78B5F;
}

/* belonging box */
.belonging-box {
    font-size: 1.3rem;
    background-color: #86ad42;
    border-radius: 0.2rem;
    padding: 0.5rem;
    color: #f2f2f2;
    cursor: pointer;
    margin: 0 0 0.4rem;
}

@media (max-width: 19.99em) {
    .belonging-box {
        font-size: 1.5rem;
    }
}

.belonging-box:hover {
    background-color: #93bb4e;
}

.belonging-box .belonging-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(300px - 1rem);
}

.belonging-box .belonging-name.active {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

@media (max-width: 39.99em) {
    .belonging-box .belonging-name {
        width: calc(80px - 1rem);
    }
}

@media (max-width: 19.99em) {
    .belonging-box .belonging-name {
        width: 100%;
        white-space: pre-wrap;
    }
}

.belonging-box .belonging-hidden-area {
    display: none;
    line-height: 2.2rem;
}

/* column flex base */
.two-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0 0 2rem;
}

.two-col.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 39.99em) {
    .two-col {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.two-col > .single {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 49%;
    flex-basis: 49%;
}

@media (max-width: 39.99em) {
    .two-col > .single {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.three-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0 0 2rem;
}

.three-col.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 39.99em) {
    .three-col {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.three-col > .single {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
}

@media (max-width: 39.99em) {
    .three-col > .single {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.three-col > .twin {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 66%;
    flex-basis: 66%;
}

@media (max-width: 19.99em) {
    .three-col > .twin {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.four-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0 0 2rem;
}

.four-col.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 39.99em) {
    .four-col {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.four-col > .single {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 24%;
    flex-basis: 24%;
}

@media (max-width: 39.99em) {
    .four-col > .single {
        -ms-flex-preferred-size: 49%;
        flex-basis: 49%;
    }
}

@media (max-width: 19.99em) {
    .four-col > .single {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.four-col > .twin {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 49%;
    flex-basis: 49%;
}

@media (max-width: 39.99em) {
    .four-col > .twin {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 19.99em) {
    .four-col > .twin {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.four-col > .triple {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 74%;
    flex-basis: 74%;
}

@media (max-width: 39.99em) {
    .four-col > .triple {
        -ms-flex-preferred-size: 49%;
        flex-basis: 49%;
    }
}

@media (max-width: 19.99em) {
    .four-col > .triple {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

h3.title {
    font-size: 1.8rem;
    padding-bottom: .5em;
    border-bottom: 1px solid #ccc;
}

h3.title span {
    display: block;
    margin-bottom: .2em;
    color: #3f511f;
    font-size: .9em;
}

a img {
    -webkit-transition: opacity 0.2s ease-out 0s;
    transition: opacity 0.2s ease-out 0s;
}

a img:hover {
    opacity: 0.8;
}

.header-title {
    border-top: thin solid #53C9CB;
    border-bottom: thin solid #53C9CB;
    padding: 1.5rem 0;
    background-color: #b5e8e9;
}

.header-title h2.title {
    font-size: 2.0rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.system-message {
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    -webkit-box-shadow: 0px 3px 2px -2px #BBBBBB;
    box-shadow: 0px 3px 2px -2px #BBBBBB;
}

.system-message .close-btn {
    display: block;
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    font-size: 2rem;
    text-decoration: none;
}

.system-message .message-inner li {
    padding-right: 2rem;
}

.system-message .message-inner li:before {
    display: inline;
    margin-right: 0.25rem;
}

.system-message.success {
    background-color: #B2F5D1;
    border: thin solid #58e99b;
}

.system-message.success .close-btn {
    color: #0d6837;
}

.system-message.success .close-btn:hover {
    color: #13954f;
}

.system-message.success .message-inner li:before {
    content: "\f00c";
    font-family: fontawesome;
}

.system-message.error {
    border: thin solid #F5B2B6;
    background-color: #fce8e9;
}

.system-message.error .close-btn {
    color: #c21923;
}

.system-message.error .close-btn:hover {
    color: #e32b36;
}

.system-message.error .message-inner {
    color: #c21923;
    font-weight: bold;
}

.system-message.error .message-inner li:before {
    content: "\f00d";
    font-family: fontawesome;
}

.system-message.warning {
    border: thin solid #f5d651;
    background-color: #f8e48b;
}

.system-message.warning .close-btn {
    color: #735f07;
}

.system-message.warning .close-btn:hover {
    color: #a48609;
}

.system-message.warning .message-inner {
    color: #735f07;
    font-weight: bold;
}

.system-message.warning .message-inner li:before {
    content: "\f071";
    font-family: fontawesome;
}

.logo-space {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 17rem;
    flex-basis: 17rem;
    max-width: 100%;
}

.logo-space h1 {
    font-size: 2.0rem;
    padding: 0;
    margin: 0 1rem 0 0;
}

@media (max-width: 39.99em) {
    .logo-space h1 {
        font-size: 1.8rem;
        padding: 0 3rem 0 1rem;
    }
}

.logo-space h1 a {
    text-decoration: none;
    color: #333333;
    -webkit-transition: color 0.2s ease 0s;
    transition: color 0.2s ease 0s;
}

.logo-space h1 a:hover {
    color: gray;
}

.menu-space {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    max-width: 100%;
}

@media (max-width: 39.99em) {
    .menu-space {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        display: none;
    }

    .menu-space.show {
        display: block;
    }
}

.info-space {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    text-align: right;
    max-width: 100%;
}

@media (max-width: 39.99em) {
    .info-space {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        text-align: center;
        display: none;
    }

    .info-space.show {
        display: block !important;
    }

    .info-space .btn {
        width: 100%;
    }
}

.humberger {
    display: none;
}

@media (max-width: 39.99em) {
    .menu-parent > a:before {
        content: '\f139';
        font-family: fontawesome;
        display: inline-block;
        margin-right: 0.5rem;
        -webkit-transition: -webkit-transform 0.1s ease-in 0s;
        transition: -webkit-transform 0.1s ease-in 0s;
        transition: transform 0.1s ease-in 0s;
        transition: transform 0.1s ease-in 0s, -webkit-transform 0.1s ease-in 0s;
    }

    .menu-parent.spn-close > ul {
        display: none !important;
        opacity: 0;
    }

    .menu-parent.spn-close > a:before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition: -webkit-transform 0.1s ease-in 0s;
        transition: -webkit-transform 0.1s ease-in 0s;
        transition: transform 0.1s ease-in 0s;
        transition: transform 0.1s ease-in 0s, -webkit-transform 0.1s ease-in 0s;
    }

    .logo-space {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .menu-space {
        margin-top: 1rem;
    }

    .menu-space .menu-list {
        display: block;
    }

    .menu-space .menu-list .menu-link {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        position: relative;
    }

    .menu-space .menu-list .menu-link:last-child > a {
        border-bottom: none;
    }

    .menu-space .menu-list .menu-link > a {
        background: #53C9CB;
        padding: 1rem 3rem 1rem 1rem;
        border-bottom: 2px dashed #fff;
        display: block;
        text-decoration: none;
        color: #fff;
        position: relative;
        position: relative;
    }

    .menu-space .menu-list .menu-link > a:hover {
        background: #7ad5d7;
    }

    .menu-space .menu-list .menu-link > a:after {
        content: '\f054';
        font-family: fontawesome;
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 1rem;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: #FFF;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .menu-space .menu-list .menu-link > ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
    }

    .menu-space .menu-list .menu-link > ul > li {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .menu-space .menu-list .menu-link > ul > li:before {
        content: "";
        width: 1rem;
        display: block;
        background-color: #53C9CB;
        position: absolute;
        left: 0;
        height: 100%;
        top: 0;
        z-index: 1;
    }

    .menu-space .menu-list .menu-link > ul > li > a {
        background: #dcf4f4;
        padding: 1rem 1rem 1rem 2rem;
        border-bottom: 2px dashed #fff;
        display: block;
        text-decoration: none;
        color: #53C9CB;
        position: relative;
    }

    .menu-space .menu-list .menu-link > ul > li > a:hover {
        background: #8edbdd;
        color: #f0fafa;
    }

    .menu-space .menu-list .menu-link > ul > li > a:hover:after {
        color: #fff;
    }

    .menu-space .menu-list .menu-link > ul > li > a:after {
        content: '\f054';
        font-family: fontawesome;
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 1rem;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: #53C9CB;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .menu-space .menu-list .menu-link > ul > li ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
    }

    .menu-space .menu-list .menu-link > ul > li ul li {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .menu-space .menu-list .menu-link > ul > li ul li:before {
        content: "";
        width: 1rem;
        display: block;
        background-color: #53C9CB;
        position: absolute;
        left: 0;
        height: 100%;
        top: 0;
        z-index: 1;
    }

    .menu-space .menu-list .menu-link > ul > li ul li > a {
        padding: 1rem 1rem 1rem 3rem;
        background: #f0fafa;
        border-bottom: 2px dashed #fff;
        display: block;
        text-decoration: none;
        color: #53C9CB;
    }

    .menu-space .menu-list .menu-link > ul > li ul li > a:hover {
        background: #a1e2e3;
        color: #f0fafa;
    }

    .menu-space .menu-list .menu-link > ul > li ul li > a:hover:after {
        color: #fff;
    }

    .menu-space .menu-list .menu-link > ul > li ul li > a:before {
        content: "";
        width: 2rem;
        display: block;
        background-color: #7ad5d7;
        position: absolute;
        left: 0;
        height: 100%;
        top: 0;
    }

    .menu-space .menu-list .menu-link > ul > li ul li > a:after {
        content: '\f054';
        font-family: fontawesome;
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 1rem;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: #53C9CB;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .humberger {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
}

@media (min-width: 40em) {
    .menu-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .menu-list .menu-link {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        line-height: 3rem;
        padding: 0.2rem 0.8rem;
        color: #37b2b4;
        border-radius: 0.25rem;
        text-decoration: none;
        text-align: center;
        position: relative;
        margin-left: 0.5rem;
        max-width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .menu-list .menu-link:first-child {
        margin-left: 0;
    }

    .menu-list .menu-link.active {
        background: #53C9CB;
    }

    .menu-list .menu-link.active:hover {
        background: #37b2b4;
    }

    .menu-list .menu-link.active > a {
        color: #fff;
        text-decoration: none;
    }

    .menu-list .menu-link.active.menu-parent:after {
        color: #fff;
    }

    .menu-list .menu-link:hover {
        background: #53C9CB;
    }

    .menu-list .menu-link:hover > a {
        color: #fff !important;
    }

    .menu-list .menu-link:hover > ul {
        display: block;
    }

    .menu-list .menu-link.menu-parent:after {
        content: "\f13a";
        font-family: fontawesome;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #53C9CB;
    }

    .menu-list .menu-link.menu-parent > a {
        padding: 0 2rem 0 0;
    }

    .menu-list .menu-link.menu-parent:hover:after {
        color: #fff;
    }

    .menu-list .menu-link a {
        color: #319fa1;
        text-decoration: none;
    }

    .menu-list .menu-link > ul {
        display: none;
        position: absolute;
        width: 20rem;
        left: 0;
        top: 100%;
        z-index: 100;
        border-radius: 0.5rem;
        -webkit-box-shadow: 1px 1px 13px -1px #53C9CB;
        box-shadow: 1px 1px 13px -1px #53C9CB;
    }

    .menu-list .menu-link > ul > li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: #c8eeef;
        border-bottom: 2px dashed #fff;
        position: relative;
    }

    .menu-list .menu-link > ul > li:last-child {
        border-bottom: none;
    }

    .menu-list .menu-link > ul > li.active {
        color: #fff;
        background: #53C9CB;
    }

    .menu-list .menu-link > ul > li.active > a {
        color: #fff;
    }

    .menu-list .menu-link > ul > li:hover {
        background: #53C9CB;
        color: #fff;
    }

    .menu-list .menu-link > ul > li:hover > ul {
        display: block;
    }

    .menu-list .menu-link > ul > li:hover > a {
        color: #fff;
    }

    .menu-list .menu-link > ul > li.menu-parent:after {
        content: "\f138";
        font-family: fontawesome;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        left: -1.5rem;
    }

    .menu-list .menu-link > ul > li > a {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
        text-align: left;
        padding: 0.8rem 2rem 0.8rem 1rem;
    }

    .menu-list .menu-link > ul > li ul {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        background-color: #dcf4f4;
        color: #319fa1;
        -webkit-box-shadow: 1px 1px 13px -1px #53C9CB;
        box-shadow: 1px 1px 13px -1px #53C9CB;
    }

    .menu-list .menu-link > ul > li ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: #dcf4f4;
        position: relative;
        border-bottom: 2px dashed #fff;
    }

    .menu-list .menu-link > ul > li ul li:last-child {
        border-bottom: none;
    }

    .menu-list .menu-link > ul > li ul li.active {
        background: #53C9CB;
        color: #fff;
    }

    .menu-list .menu-link > ul > li ul li.active > a {
        color: #fff;
    }

    .menu-list .menu-link > ul > li ul li:hover {
        color: #fff;
    }

    .menu-list .menu-link > ul > li ul li a {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
        text-align: left;
        padding: 0.8rem 2rem 0.8rem 1rem;
    }

    .menu-list .menu-link > ul > li ul li a:hover {
        background: #53C9CB;
        color: #fff;
    }
}

.button-space {
    margin: 1rem 0 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.button-space.around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.button-space.between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.button-space.center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.button-space.center button, .button-space.center a {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.button-space.center button:last-child, .button-space.center a:last-child {
    margin-right: 0;
}

@media (max-width: 19.99em) {
    .button-space.center button, .button-space.center a {
        margin-right: 0;
    }
}

@media (max-width: 19.99em) {
    .button-space {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.button-space button, .button-space a {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

@media (max-width: 19.99em) {
    .button-space button, .button-space a {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 19.99em) {
    .button-space button.close-btn, .button-space a.close-btn {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
}

/* loading layer */
.loading-layer {
    background-color: rgba(255, 255, 255, 0.7);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 9999;
}

.loading-layer .loading-icon {
    margin: auto;
}

/*
---
name: Toggle Menu
tag:
 - base
 - latest
category:
 - component
 - component/menu
---

## トグルメニュー

開閉メニューの中身。

開閉させるにはクラス名に`toggle`のButton要素かa要素が必要。


### トグルメニューの中身の書き方

```html
<div class="toggle-menu">
 <table class="table table-input-form">
  <tr>
   <th>
    <div class="title">
     住所1
    </div>
   </th>
   <td>
    <input type="text" name="address1" class="form-control">
   </td>
  </tr>
  <tr>
   <th>
    <div class="title">
     住所2
    </div>
   </th>
   <td colspan="3">
    <input type="text" name="address2" class="form-control">
   </td>
  </tr>
 </table>
</div>
```

### 開閉ボタン

開閉ボタンの`data-for`属性に開閉させたい要素のクラス名を指定する。指定されたクラス名の要素の1つ目を開閉する。

`data-for`に指定が無ければ、クラス名が`toggle-menu`の1つ目のものを開閉する。

```html
<a href="#" class="btn btn-default toggle" data-for="toggle-menu"><i class="fa fa-bars" aria-hidden="true"></i> 入力欄表示</a>
```

### 参考

common.jsに記述されている。このイベントが呼ばれて処理が実行される。

```js
//検索ウインドウ表示
$(document).on("click", ".toggle", function (e) {
    e.preventDefault();

    var targetClassName = $(this).data("for");
    if(typeof targetClassName === "undefined"){
        targetClassName = "toggle-menu";
    }

    $("." + targetClassName).eq(0).slideToggle(300);
});

```
*/
.toggle-menu {
    padding: 1rem;
    margin: 0.5rem 0 0;
    border: thin solid #ccc;
    display: none;
}

.toggle-menu2 {
    padding: 1rem;
    margin: 0.5rem 0 0;
    border: thin solid #ccc;
}

.toggle-menu .search-items {
    margin-bottom: 0.5rem;
}

.toggle-menu2 .search-items {
    margin-bottom: 0.5rem;
}

.toggle-menu .search-items .clmn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.toggle-menu2 .search-items .clmn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

@media (max-width: 63.99em) {
    .toggle-menu .search-items .clmn {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .toggle-menu2 .search-items .clmn {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.toggle-menu .search-items .clmn li {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    margin-bottom: 0.5rem;
}

.toggle-menu2 .search-items .clmn li {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    margin-bottom: 0.5rem;
}

@media (max-width: 63.99em) {
    .toggle-menu .search-items .clmn li {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    }

    .toggle-menu2 .search-items .clmn li {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    }
}

@media (max-width: 39.99em) {
    .toggle-menu .search-items .clmn li {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.toggle-menu .search-items .clmn li label {
    width: rem;
    font-weight: bold;
}

@media (max-width: 39.99em) {
    .toggle-menu .search-items .clmn li label {
        width: 100%;
    }
}

.toggle-menu .search-items .clmn li select, .toggle-menu .search-items .clmn li input, .toggle-menu .search-items .clmn li .select2frame {
    position: relative;
    overflow: hidden;
    width: 98%;
}

@media (max-width: 39.99em) {
    .toggle-menu .search-items .clmn li select, .toggle-menu .search-items .clmn li input, .toggle-menu .search-items .clmn li .select2frame {
        margin-right: 0.2rem;
        width: calc(100% - 0.2rem);
    }
}

/*
---
name: Tips
tag:
 - base
 - latest
category:
 - component
 - component/space
---

## Tipsを表示するスペースです

主にページ下部に使用するこのページを使用するにあたっての注意書き等に使用する。

<div class="tips-space">
 <div class="title">Tips</div>
 <ul>
  <li>Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。</li>
  <li>Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。</li>
  <li>Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。</li>
 </ul>
</div>

```html
<div class="tips-space">
 <div class="title">Tips</div>
 <ul>
  <li>Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。</li>
  <li>Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。</li>
  <li>Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。Tipsが表示されます。</li>
 </ul>
</div>
```
*/
.tips-space {
    width: 100%;
    background-color: #ffffe7;
    border: thin solid #f1cfa4;
    padding: 1rem;
}

.tips-space .title {
    font-weight: bold;
    padding: 0 0 1rem;
}

.tips-space ul {
    position: relative;
    background-image: linear-gradient(#f1cfa4 1px, transparent 1px);
    background-size: 100% 1.8em;
    line-height: 1.8em;
    padding: 0;
}

.tips-space ul li {
    text-indent: -1.5rem;
    margin-left: 1.5rem;
}

.tips-space ul li:before {
    content: '\f192';
    display: inline-block;
    width: 1.5rem;
    color: #ae6d1b;
    font-family: 'FontAwesome';
    text-indent: 0;
}

/* elements */
html {
    font-size: 62.5%;
    position: relative;
    min-height: 100%;
    -ms-overflow-style: scrollbar;
}

body {
    font-size: 1.3rem;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", Osaka, arial, helvetica, clean, sans-serif;
    margin-bottom: 3rem;
}

@media (max-width: 19.99em) {
    body {
        font-size: 1.6rem;
    }
}

body.list {
    overflow-y: scroll;
}

body > .wrap {
    padding: 0 2rem;
}

section.navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 1.5rem auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 1280px;
    padding: 0 1rem;
}

@media (max-width: 39.99em) {
    section.navigation {
        padding: 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

input[type=text], input[type=email], select, input[type=password], input[type=tel] {
    font-size: 1.6rem;
}
.fs-l {
    font-size: 3.0rem!important;
}
@media (min-width: 768px) {
    #main-menu > li {
        float: none;
        display: table-cell;
        width: 1%;
        text-align: center;
    }
}

.sort {
    color: #FFFFFF;
}

.sort:not(.asc):not(.desc):after{
    font-family: "fontawesome";
    content:'\f0dc';
}

.sort.asc:after{
    font-family: "fontawesome";
    content:'\f0de';
}

.sort.desc:after{
    font-family: "fontawesome";
    content:'\f0dd';
}

.table-scroll {
    overflow-x: auto;
    overflow-y: scroll;
}

.wrap {
    max-width: 1400px;
    margin: 2rem auto;
}

.wrap .contents-wrap {
    margin-bottom: 5rem;
}

.wrap .contents-wrap2 {
    margin-bottom: 5rem;
    width: 80%;
    font-size: 110%;
}

.img-fifty {
    max-width: 50%;
}

@media (max-width: 39.99em) {
    .img-fifty {
        max-width: 100%;
    }
}

.wrap-around {
    margin: 0 0 2rem;
}

.wrap-around img {
    float: left;
    margin: 0 1rem 0 0;
    max-width: 49%;
}

.wrap-around img.right {
    float: right;
    margin: 0 0 0 1rem;
}

@media (max-width: 39.99em) {
    .wrap-around img.right {
        max-width: 100%;
        margin: 0 0 1rem;
    }
}

@media (max-width: 39.99em) {
    .wrap-around img {
        max-width: 100%;
        margin: 0 0 1rem;
    }
}

.wrap-around:after {
    content: "";
    display: block;
    clear: both;
}

.complete-message {
    position: absolute;
    top: 40%;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}

@media (max-width: 39.99em) {
    .complete-message {
        top: inherit;
        bottom: inherit;
    }
}

.breadcrumb {
    line-height: 1.4rem;
}

.breadcrumb ul li {
    display: inline;
    padding: 0 1rem 0 0;
    position: relative;
    font-size: 1.0rem;
}

.breadcrumb ul li:after {
    position: absolute;
    content: "\f105";
    font-family: "fontawesome";
    font-size: 1.4rem;
    right: 0;
    top: 0;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.breadcrumb ul li:last-child:after {
    display: none;
}

.breadcrumb ul li a {
    color: #333333;
}

.breadcrumb ul li a .fa {
    text-decoration: underline;
}

.spn-only {
    display: none;
}

@media (max-width: 39.99em) {
    img {
        max-width: 100%;
    }

    .spn-only {
        display: block;
        max-width: 100%;
        margin: 0 auto;
        padding: 2rem 2rem 0rem 2rem;
    }
}

.pagination-space {
    padding-top: 1rem;
    text-align: right;
}

@media (max-width: 19.99em) {
    .pagination-space {
        text-align: center;
    }

    .pagination-space .pagination a {
        font-size: 1.6rem;
    }
}

footer.footer {
    background-color: #789B3B;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3rem;
}

footer .ft-content {
    padding: 2rem 0 0;
}

footer .ft-content .ft-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@media (max-width: 39.99em) {
    footer .ft-content .ft-wrap {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

footer .ft-content .ft-wrap .ft-sm {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
}

@media (max-width: 39.99em) {
    footer .ft-content .ft-wrap .ft-sm {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
        flex: 1 0 100%;
    }
}

@media (max-width: 39.99em) {
    footer .ft-content .ft-wrap .ft-sm ul li {
        position: relative;
        border-bottom: 2px dotted #f2f2f2;
    }

    footer .ft-content .ft-wrap .ft-sm ul li:first-child {
        border-top: 2px dotted #f2f2f2;
    }

    footer .ft-content .ft-wrap .ft-sm ul li:last-child {
        border-bottom: none;
    }

    footer .ft-content .ft-wrap .ft-sm ul li.last {
        border-bottom: 2px dotted #f2f2f2;
    }
}

footer .ft-content .ft-wrap .ft-sm ul li a {
    color: #f2f2f2;
    line-height: 1.84rem;
}

@media (max-width: 39.99em) {
    footer .ft-content .ft-wrap .ft-sm ul li a {
        display: block;
        text-decoration: none;
        -webkit-transition: background-color 0.4s ease-out 0s;
        transition: background-color 0.4s ease-out 0s;
    }

    footer .ft-content .ft-wrap .ft-sm ul li a:before {
        content: "\f0a9";
        font-family: "fontawesome";
        padding-right: 5px;
        margin-left: 5px;
    }

    footer .ft-content .ft-wrap .ft-sm ul li a:hover {
        background-color: #93bb4e;
    }
}

footer .copyright {
    padding: 0.5rem;
    text-align: center;
    color: #f2f2f2;
}

.form-group label {
    margin-bottom: 0.5rem;
}

.search-form-space {
    margin: 0 0 1rem;
}

.search-form-space .inner-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width: 39.99em) {
    .search-form-space .inner-menu {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.search-form-space .inner-menu .buttons a, .search-form-space .inner-menu .buttons button, .search-form-space .inner-menu .buttons input[type='button'] {
    margin-bottom: 0.5rem;
}

.search-form-space .inner-menu .pg {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    text-align: right;
}

@media (max-width: 39.99em) {
    .search-form-space .inner-menu .pg {
        width: 100%;
        margin-top: 1rem;
    }
}

.jobDrop {
    width: 300px !important;
}

.square {
    border: thin solid #aaca72;
    border-radius: 0.3rem;
    padding: 1rem;
}

.square.belong {
    position: relative;
    background-color: #d7e6bc;
}

.square.belong .btnRemoveBelong {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    font-size: 2rem;
}

.square.belong .btnRemoveBelong:hover {
    color: #789B3B;
}

.square.belong .job-description {
    position: relative;
    background-color: #edf4e1;
    padding: 1rem;
    border-radius: 0.3rem;
}

.square h5 {
    font-size: 1.2rem;
}

.select2-selection {
    border: none !important;
}

.withButtonBar {
    position: relative;
    padding: 0 0 1rem;
}

.withButtonBar .icon-btn {
    position: absolute;
    background-color: #E78B5F;
    padding: 0.5rem 1rem;
    border-radius: 3rem;
    right: 0;
    top: -0.5rem;
    cursor: pointer;
    color: #f2f2f2;
}

.withButtonBar .icon-btn:hover {
    background-color: #eca582;
}

.withButtonBar .icon-btn span {
    vertical-align: top;
}

.withButtonBar .icon-btn i {
    font-size: 2rem;
}

/* edit-page */
.edit .table.table-input-form {
    margin-bottom: 0;
}

.edit .table.table-input-form .form-control {
    padding: 0.2rem 0.4rem;
    height: 2.6rem;
    border-radius: 0;
}

.edit .table.table-input-form .form-control.select {
    font-size: 1.6rem;
}


@media (max-width: 39.99em) {
    .edit .table.table-input-form tr th, .edit .table.table-input-form tr td {
        display: block;
        width: 100%;
        border: none;
    }
}

.edit .table.table-input-form tr th.border-none-left, .edit .table.table-input-form tr td.border-none-left {
    border: none;
    border-top: thin solid #ddd;
    border-right: thin solid #ddd;
    border-bottom: thin solid #ddd;
}

@media (max-width: 39.99em) {
    .edit .table.table-input-form tr th.border-none-left, .edit .table.table-input-form tr td.border-none-left {
        border: none;
    }
}

.edit .table.table-input-form tr th.border-none-right, .edit .table.table-input-form tr td.border-none-right {
    border: none;
    border-top: thin solid #ddd;
    border-left: thin solid #ddd;
    border-bottom: thin solid #ddd;
}

@media (max-width: 39.99em) {
    .edit .table.table-input-form tr th.border-none-right, .edit .table.table-input-form tr td.border-none-right {
        border: none;
    }
}

.edit .table.table-input-form tr th {
    position: relative;
}

.edit .table.table-input-form tr th .title {
    position: relative;
    border-left: 0.3rem solid #53C9CB;
    padding-left: 0.5rem;
}

.title2 {
    background-color: #53C9CB;
    color: #FFFFFF;
}

.title_es {
    background-color: #888;
    color: #FFFFFF;
}

.edit .table.table-input-form tr th .title span {
    font-size: 1.1rem;
}

@media (max-width: 39.99em) {
    .edit .table.table-input-form tr th {
        line-height: 3rem;
    }
}

.edit .table.table-input-form tr th.required .title {
    display: inline-block;
}

.edit .table.table-input-form tr th.i_field .title {
    display: inline-block;
}

.edit .table.table-input-form tr th.required:after {
    float: right;
    display: inline-block;
    content: "必須";
    background: #dd0000;
    padding: 0.25rem;
    margin-right: 0.5rem;
    color: #fff;
    font-size: 1.1rem;
    border-radius: 0.3rem;
    width: 3rem;
    text-align: center;
}

.edit .table.table-input-form tr th.i_field:after {
    float: inherit;
    display: inline-block;
    content: "入力";
    background: #dd0000;
    padding: 0.25rem;
    margin-right: 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    border-radius: 0.3rem;
    width: 4rem;
    text-align: center;
}

@media (max-width: 39.99em) {
    .edit .table.table-input-form tr th.required:after {
        margin-right: 0;
    }

    .edit .table.table-input-form tr th.i_field:after {
        margin-right: 0;
    }
}

.edit .inputs-space {
    margin-top: 2rem;
    padding-bottom: 2rem;
}

.edit .inputs-space .inputs-title {
    font-size: 1.8rem;
    border-bottom: thin solid #ccc;
    padding: 0 0 0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

@media (max-width: 39.99em) {
    .edit .inputs-space .inputs-title {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .edit .inputs-space .inputs-title > * {
        margin: 0 0 1rem;
    }
}

.edit .inputs-space .inputs-title .caption {
    margin-right: 1rem;
}

.edit .inputs-space .inputs-title .add-button {
    display: block;
}

.edit .inputs-space .inputs-title input {
    padding: 0.2rem 0.4rem;
    height: 2.6rem;
    border-radius: 0;
}

.edit .inputs-space .inputs-title.inputs-organizeTitle .caption {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 12rem;
    flex-basis: 12rem;
}

.edit .inputs-space .inputs-title.inputs-organizeTitle input, .edit .inputs-space .inputs-title.inputs-organizeTitle button {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: 30rem;
    flex-basis: 30rem;
    margin-left: 1rem;
}

@media (max-width: 39.99em) {
    .edit .inputs-space .inputs-title.inputs-organizeTitle input, .edit .inputs-space .inputs-title.inputs-organizeTitle button {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        margin-left: 0;
    }
}

.edit .inputs-space .inputs-title.inputs-organizeTitle button {
    -ms-flex-preferred-size: 10rem;
    flex-basis: 10rem;
}

.edit .inputs-space .organize-list .item {
    width: 100%;
    margin-bottom: 1rem;
    border: thin solid #f1c76f;
    border-radius: 0.25rem;
}

.edit .inputs-space .organize-list .item .organize-header {
    background-color: #FAEBCC;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0.25rem 0.5rem;
}

.edit .inputs-space .organize-list .item .organize-header .organize-name {
    word-break: break-all;
    font-size: 1.5rem;
    font-weight: bold;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

@media (max-width: 39.99em) {
    .edit .inputs-space .organize-list .item .organize-header .organize-name {
        font-size: 1.8rem;
        padding: 0.5rem 0;
    }
}

.edit .inputs-space .organize-list .item .organize-header .organize-delete {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    font-size: 2rem;
    color: #704f0b;
    cursor: pointer;
}

.edit .inputs-space .organize-list .item .organize-header .organize-delete:hover {
    color: #cc9014;
}

.edit .inputs-space .organize-list .item .organize-inner {
    background-color: #fff;
}

.edit .inputs-space .organize-list .item .organize-inner .organize-info-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.edit .inputs-space .organize-list .item .organize-inner .organize-info-list li {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    margin-right: 1rem;
}

@media (max-width: 39.99em) {
    .edit .inputs-space .organize-list .item .organize-inner .organize-info-list li {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin-right: 0;
    }
}

.edit .inputs-space .organize-list .item .organize-inner .organize-info-list li .form-control {
    padding: 0.2rem 0.4rem;
    height: 2.6rem;
}

.edit .inputs-space .organize-list .item .organize-inner .table-input-form tbody tr td, .edit .inputs-space .organize-list .item .organize-inner .table-input-form tbody tr th {
    border: none;
    border-right: thin solid #ccc;
}

@media (max-width: 39.99em) {
    .edit .inputs-space .organize-list .item .organize-inner .table-input-form tbody tr td, .edit .inputs-space .organize-list .item .organize-inner .table-input-form tbody tr th {
        border-right: none;
    }
}

.edit .inputs-space .organize-list .item .organize-inner .table-input-form tbody tr td:last-child, .edit .inputs-space .organize-list .item .organize-inner .table-input-form tbody tr th:last-child {
    border-right: none;
}

.setOrganizeParent li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    border-top: thin solid #EEE;
    border-left: thin solid #EEE;
    border-right: thin solid #EEE;
}

.setOrganizeParent li:last-child {
    border-bottom: thin solid #EEE;
}

.setOrganizeParent li:hover {
    background: #fcf4e3;
}

@media (max-width: 19.99em) {
    .setOrganizeParent li {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.setOrganizeParent li > div {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.5rem;
    word-wrap: break-word;
    word-break: break-all;
    cursor: pointer;
}

@media (max-width: 19.99em) {
    .setOrganizeParent li > div {
        max-width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

.setOrganizeParent li > button {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

@media (max-width: 19.99em) {
    .setOrganizeParent li > button {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
}

/* list organize */
.organize h2 {
    padding: 0 1rem;
}

.organize .wrap {
    padding: 0 1rem;
}

/*# sourceMappingURL=../css/styles.css.map */