@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:999px){

/*STYLE*/
.pc {
display:none;
}

.cts {
    width:90%;
}

.page {
    margin:85px 5% 25px;
    position:relative;
}

.titles {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}

.titles .icon {
    width:45px;
    margin-right:5px;
}

.titles h2 {
    font-size:170%;
    font-weight:600;
    line-height:100%;
    padding-top:5px;
}

h3 {
    font-size:100%;
    font-weight:600;
    border-left:#55b4e6 5px solid;
    padding:5px 0 5px 10px;
    margin-bottom:15px;
}

.backbtn {
    text-align:center;
}

.backbtn .btn {
    display:inline-block;
}

.backbtn a {
    border:#aaa 1px solid;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 20px;
}

.backbtn a .arrow {
    width:10px;
    height:10px;
    border-left:#aaa 1px solid;
    border-bottom:#aaa 1px solid;
    transform:rotate(45deg);
}

.backbtn a p {
    font-size:80%;
    color:#aaa;
    padding-left:10px;
}



/*HEADER*/
header {
    width:100%;
    height:60px;
    padding:0 65px 0 10px;
    background:#fff;
    border-bottom:#e1e1e1 1px solid;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
}

header .title {
    margin-top:4px;
}

header .title h1 {
    font-size:90%;
    font-weight:bold;
    line-height:100%;
    padding-bottom:2px;
}

header .title h1 .sama {
    font-size:70%;
}

header .title .url {
    font-size:50%;
    line-height:100%;
    display:none;
}

header .title .url a {
    color:#999;
}

header .log {
}

header .log .logout {
    display:inline-block;
    position:absolute;
    right:60px;
    top:12px;
}

header .log .logout a {
    width:50px;
    display:flex;
    align-items:center;
    flex-direction:column;
    border:#ccc 1px solid;
    padding:5px 0 3px;
}

header .log .logout a img {
    width:13px;
    padding-bottom:3px;
}

header .log .logout a p {
    font-size:50%;
    font-weight:500;
    line-height:100%;
    color:#ccc;
    transform:scale(0.8);
    white-space:nowrap;
}

header .log .customer {
    display:flex;
    align-items:center;
}

header .log .customer .change {
    display:flex;
    align-items:center;
    margin-left:12px;
}

header .log .customer .change .arrow {
    width:6px;
    height:6px;
    border-top:#0087b4 1px solid;
    border-right:#0087b4 1px solid;
    transform:rotate(45deg);
    margin-right:5px;
}

header .log .customer .change p {
    font-size:60%;
    font-weight:500;
    line-height:100%;
    margin-bottom:1px;
}

header .log .customer .company {
    font-weight:600;
}

header .log .customer .date_out {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction:row-reverse;
}

header .log .customer .date_out.single {
    display:block;
}

header .log .customer .recently {
    font-size:50%;
    color:#aaa;
    margin-top:0;
    margin-right:7px;
}

header .log .customer .date_out.single .recently {
    margin-top:3px;
}

header .log .customer .recently .date {
    color:#646464;
}

header .log .customer .account_select {
    width:150px;
}

header .log .customer .account_select .style_common_account {
    width:100%;
    border-radius:5px;
    font-size:50%;
    line-height:100%;
    padding:5px 20px 5px 8px;
    background-size:6px 5px;
    background-position:right 8px center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
}

header .log .customer .account_select .style_common_account .consent {
    display:flex;
    align-items:center;
    position:relative;
}



/*SIDEBAR*/
#sidebar {
    width:80px;
    height:calc(100vh - 60px);
    background:#fafafa;
    border-right:#e1e1e1 1px solid;
    position:fixed;
    top:60px;
    left:0;
    padding:20px 0;
    text-align:center;
    transform:translate(-100%,0);
    transition:0.5s;
    z-index:9998;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}

#sidebar.show {
    transform:translate(0,0);
}

#sidebar .menus {
}

#sidebar .menus .menu {
    margin-bottom:25px;
}

#sidebar .menus .menu a {
}

#sidebar .menus .menu a .icon {
    width:35px;
    margin:0 auto 5px;
}

#sidebar .menus .menu a .tx {
    font-size:60%;
    font-weight:500;
    line-height:135%;
}

#sidebar .delete {
    position:absolute;
    bottom:20px;
    margin:auto;
}

#sidebar .delete .icon {
    width:30px;
    margin:0 auto 3px;
}

#sidebar .delete a .tx {
    font-size:60%;
    font-weight:500;
    line-height:135%;
}



/*HOME*/
#home {
}

#home .caution {
    background:#ffebeb;
    border:#ffc8c8 1px solid;
    padding:12px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

#home .caution img {
    width:25px;
}

#home .caution p {
    width:calc(100% - 35px);
    font-size:80%;
    color:#e60032;
}

#home .lineup {
    border:#e1e1e1 1px solid;
    background:#fafafa;
    padding:20px 20px;
}

#home .lineup .menus {
}

#home .lineup .menus .menu {
    width:100%;
    margin-bottom:15px;
}

#home .lineup .menus .menu:last-child {
    margin-bottom:0;
}

#home .lineup .menus .menu a {
    border:#e1e1e1 1px solid;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
    border-radius:6px;
}

#home .lineup .menus .menu a .icon {
    width:60px;
}

#home .lineup .menus .menu a .details {
    width:calc(100% - 75px);
}

#home .lineup .menus .menu a .details .item {
    font-size:100%;
    font-weight:bold;
    color:#0087b4;
    padding-bottom:2px;
}

#home .lineup .menus .menu a .details .detail {
    font-size:80%;
}



/*ENTRY*/
#entry {
}

#entry .result {
    font-size:80%;
    margin-bottom:10px;
    text-align:right;
}

#entry .result .total {
    font-weight:bold;
}

#entry .count {
    display:flex;
    align-items:center;
    margin-bottom:15px;
}

#entry .count .all {
    display:flex;
    align-items:center;
    margin-right:5px;
}

#entry .count p {
    font-size:80%;
    font-weight:500;
    line-height:100%;
}

#entry .count .all .number {
    margin:0 2px;
    font-size:100%;
    font-weight:600;
}

#entry .count .duplication {
    display:flex;
    align-items:center;
    font-size:100%;
    margin-left:5px;
}

#entry .count .duplication .number {
    margin:0 2px;
    font-size:100%;
    font-weight:600;
}

#entry .ui_set {
    margin-bottom:15px;
}

#entry .searches {
}

/*ENTRY REFINE*/
#entry .refines {
    display:flex;
    margin-bottom:15px;
}

#entry .refines .refine {
    margin-right:8px;
}

#entry .refines .refine label {
    font-size:90%;
    line-height:100%;
    padding:5px 10px;
    border:#e1e1e1 1px solid;
    background:#f0f0f0;
    cursor:pointer;
    border-radius:5px;
}

#entry input[type="radio"],
#entry input[type="checkbox"] {
visibility:hidden;
position:absolute;
}

#entry .refines .refine input[type="checkbox"]:checked + label {
    background:#0095cc;
    border:#0095cc 1px solid;
    color:#fff;
    border-radius:5px;
}

#entry .refines .refine:first-child input[type="checkbox"]:checked + label {
    background:#0064b4;
    border:#0064b4 1px solid;
    color:#fff;
}

/*ACCOUNT SELECT*/
#entry .account_select {
    width:100%;
    margin-bottom:10px;
}

#entry .account_select .style_account {
    border-radius:5px;
    font-size:80%;
    line-height:100%;
    padding:10px 12px;
}

#entry .account_select .style_account .consent {
    display:flex;
    align-items:center;
    position:relative;
}

/*CHECK HIDDEN*/
#entry .check_hidden {
    margin-top:15px;
    display:flex;
    align-items:center;
}

#entry .check_hidden label {
    cursor:pointer;
    padding-left:22px;
    font-size:80%;
    line-height:100%;
    color:#000;
    position:relative;
}

#entry .check_hidden label:before {
    content:"";
    width:15px;
    height:15px;
    border:#ccc 1px solid;
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
}

#entry .check_hidden label:after {
    content:"";
    width:9px;
    height:13px;
    border-right:#0064b4 2px solid;
    border-bottom:#0064b4 2px solid;
    display:block;
    transform:rotate(45deg);
    position:absolute;
    top:-3px;
    left:6px;
    opacity:0;
}

#entry .check_hidden input[type="checkbox"] {
    visibility:hidden;
    position:absolute;
}

#entry .check_hidden input[type="checkbox"]:checked + label:after {
    opacity:1;
}

/*ENTRY FREEWORD*/
#entry .freeword {
    display:flex;
    align-items:center;
    margin-bottom:15px;
}

#entry .freeword .style_freeword {
    width:100%;
    height:34px;
    font-size:80%;
    padding:0 10px;
    border-right:none;
}

#entry .freeword button {
    background:#777;
    border:none;
}

#entry .freeword .style_search_btn {
    width:34px;
    height:34px;
    cursor:pointer;
}

#entry .freeword .style_search_btn img {
    width:16px;
}

/*ENTRY SORT*/
#entry .sorts {
    display:flex;
    justify-content:flex-end;
}

#entry .sorts .sort {
    margin-left:10px;
}

#entry .sorts .sort .style_sort {
    font-size:70%;
    padding:6px 25px 6px 10px;
    background-size:8px 5px;
    background-position:right 7px center;
    border-radius:5px;
}



/*ENTRY LIST*/
#entry #list {
}

.sp_wrap {
    overflow-x:auto;
}

#entry #list table {
    width:1000px;
    border-collapse:collapse;
}

#entry #list th {
    font-size:70%;
    border-top:#e1e1e1 1px solid;
    border-bottom:#e1e1e1 1px solid;
    background:#fafafa;
    padding:5px;
}

#entry #list th:first-child {
    width:30%;
}

#entry #list th:nth-child(2) {
    width:25%;
}

#entry #list th:nth-child(3) {
    width:35%;
}

#entry #list th:nth-child(4) {
    width:10%;
}

#entry #list tr {
    border-bottom:#e1e1e1 1px solid;
    position:relative;
}

#entry #list tr.new {
    background:#f0f5fa;
}

#entry #list tr.new .icon_new {
    position:absolute;
    top:0;
    left:0;
    width:35px;
    height:35px;
    background:#e65014;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:50%;
    z-index:1;
}

#entry #list tr td {
    padding:15px 20px;
    position:relative;
}

#entry #list tr td:nth-child(2) {
    padding:15px 5px;
}

#entry #list tr td:nth-child(3) {
    padding:15px 20px 15px 5px;
}

#entry #list tr td:nth-child(4) {
    padding:15px 20px 15px 5px;
}

#entry #list .name {
    display:flex;
    align-items:center;
    margin-bottom:7px;
}

#entry #list .name a {
    font-size:100%;
    font-weight:600;
    line-height:100%;
    color:#0064b4;
}

#entry #list .duplication td {
    background:#ffebeb;
}

#entry #list .duplication .name .icon {
    padding:2px 4px;
    font-size:70%;
    line-height:100%;
    margin-left:7px;
    border:#ff3264 1px solid;
    color:#ff3264;
}

#entry #list .name .duplication {
    padding:2px 4px;
    font-size:70%;
    line-height:100%;
    margin-left:7px;
    border:#ff3264 1px solid;
    color:#ff3264;
}

#entry #list .name .affirmation {
    padding:2px 4px;
    font-size:60%;
    line-height:100%;
    margin-left:7px;
    border:#ff3264 1px solid;
    background:#ff3264;
    color:#fff;
}

#entry #list .name .welcome {
    padding:2px 4px;
    font-size:60%;
    line-height:100%;
    margin-left:7px;
    border:#f09600 1px solid;
    background:#f09600;
    color:#fff;
}

#entry #list .status {
    font-size:60%;
    line-height:100%;
    color:#787878;
    margin-bottom:5px;
}

#entry #list .age {
    font-size:60%;
    line-height:100%;
    color:#787878;
    margin-bottom:5px;
}

#entry #list .date {
    font-size:60%;
    line-height:100%;
    color:#787878;
    margin-bottom:5px;
}

#entry #list .desire {
    margin-top:7px;
}

#entry #list .desire p {
    font-size:50%;
    line-height:110%;
    color:#787878;
    margin-top:3px;
    display:flex;
    align-items:center;
}

#entry #list .desire p .item {
    font-size:9px;
    border:#787878 1px solid;
    margin-right:5px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:50px;
    height:14px;
    text-align:center;
}

#entry #list .desire p span:last-child {
    width:calc(100% - 50px);
}

#entry #list .job {
}

#entry #list .employment {
}

#entry #list .area {
}

#entry #list .status_btns {
    display:flex;
    align-items:center;
    margin-top:10px;
}

#entry #list .status_btns .ng_btn {
    display:flex;
    margin-right:10px;
}

#entry #list .status_btns .ng_btn button {
    display:flex;
    justify-content:center;
    align-items:center;
    background:#c8d2dc;
    padding:7px 10px;
    border-radius:5px;
    cursor:pointer;
    border:none;
}

#entry #list .status_btns .ng_btn button:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}

#entry #list .status_btns .ng_btn button img {
    width:12px;
    margin-right:7px;
}

#entry #list .status_btns .ng_btn button p {
    font-size:80%;
    line-height:100%;
    color:#fff;
}

#entry #list .status_btns .ng_btn.checked {
    opacity:0.5;
    pointer-events:none;
}

#entry #list .status_btns .ng_btn label {
    font-size:80%;
    line-height:100%;
    padding:3px 7px;
    background:#c8d2dc;
    cursor:pointer;
    display:inline-block;
    border-radius:5px;
    margin-top:10px;
}

#entry #list .status_btns .ng_btn label div {
    display:flex;
}

#entry #list .status_btns .ng_btn label p {
    font-size:90%;
    color:#fff;
}

#entry #list .status_btns .ng_btn label img {
    width:12px;
    margin-right:7px;
}

#entry #list .status_btns .ng_btn input[type="checkbox"]:checked + label {
    background:#505a64;
    color:#fff;
}

#entry #list .status_btns .hidden_btn {
    display:flex;
}

#entry #list .status_btns .hidden_btn button {
    display:flex;
    justify-content:center;
    align-items:center;
    background:#beb4aa;
    padding:7px 10px;
    border-radius:5px;
    cursor:pointer;
    border:none;
}

#entry #list .status_btns .hidden_btn button:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}

#entry #list .status_btns .hidden_btn button img {
    width:12px;
    margin-right:7px;
}

#entry #list .status_btns .hidden_btn button p {
    font-size:80%;
    line-height:100%;
    color:#fff;
}

#entry #list .status_btns .hidden_btn.checked {
    opacity:0.5;
    pointer-events:none;
}

#entry #list .status_btns .hidden_btn label {
    font-size:80%;
    line-height:100%;
    padding:3px 7px;
    background:#c8d2dc;
    cursor:pointer;
    display:inline-block;
    border-radius:5px;
    margin-top:10px;
}

#entry #list .status_btns .hidden_btn label div {
    display:flex;
}

#entry #list .status_btns .hidden_btn label p {
    font-size:90%;
    color:#fff;
}

#entry #list .status_btns .hidden_btn label img {
    width:12px;
    margin-right:7px;
}

#entry #list .status_btns .hidden_btn input[type="checkbox"]:checked + label {
    background:#505a64;
    color:#fff;
}

#entry #list .status_btns .back_btn {
    display:flex;
}

#entry #list .status_btns .back_btn button {
    display:flex;
    justify-content:center;
    align-items:center;
    background:#b487c8;
    padding:7px 10px;
    border-radius:5px;
    cursor:pointer;
    border:none;
}

#entry #list .status_btns .back_btn button:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}

#entry #list .status_btns .back_btn button img {
    width:12px;
    margin-right:7px;
}

#entry #list .status_btns .back_btn button p {
    font-size:80%;
    line-height:100%;
    color:#fff;
}

#entry #list .status_btns .back_btn.checked {
    opacity:0.5;
    pointer-events:none;
}

#entry #list .status_btns .back_btn label {
    font-size:80%;
    line-height:100%;
    padding:3px 7px;
    background:#c8d2dc;
    cursor:pointer;
    display:inline-block;
    border-radius:5px;
    margin-top:10px;
}

#entry #list .status_btns .back_btn label div {
    display:flex;
}

#entry #list .status_btns .back_btn label p {
    font-size:90%;
    color:#fff;
}

#entry #list .status_btns .back_btn label img {
    width:12px;
    margin-right:7px;
}

#entry #list .status_btns .back_btn input[type="checkbox"]:checked + label {
    background:#505a64;
    color:#fff;
}





#entry #list .style_status {
    font-size:80%;
    width:90%;
}

#entry #list .memo {
    position:relative;
}

#entry #list .memo textarea {
    width:100%;
    height:120px;
    font-size:80%;
    padding:8px 10px;
    vertical-align:bottom;
}

#entry #list .memo .style_send {
    width:22px;
    height:22px;
    background:#55b4e6;
    position:absolute;
    bottom:10px;
    right:10px;
    border:none;
    border-radius:10vw;
    cursor:pointer;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

#entry #list .memo .style_send img {
    width:14px;
}

#entry #list .btns {
    margin:auto;
    text-align:center;
}

#entry #list .btns .mail_btn {
}

#entry #list .btns .mail_btn a {
    display:flex;
    justify-content:center;
    align-items:center;
    width:90px;
    background:#fab400;
    padding:3px 7px;
    border-radius:5px;
    margin:0 auto 10px;
}

#entry #list .btns .mail_btn a img {
    width:15px;
    margin-right:7px;
}

#entry #list .btns .mail_btn a p {
    font-size:70%;
    color:#fff;
}

#entry #list .btns .finish_btn {
}

#entry #list .btns .finish_btn:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
    }

#entry #list .btns .finish_btn button {
    width:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#96be3c;
    border:none;
    padding:5px 7px;
    border-radius:5px;
    margin:auto;
    cursor:pointer;
}

#entry #list .btns .finish_btn button img {
    width:15px;
    margin-right:7px;
}

#entry #list .btns .finish_btn button p {
    font-size:80%;
    line-height:100%;
    color:#fff;
}

#entry #list .btns .finish_btn.checked {
    opacity:0.5;
    pointer-events:none;
}

#entry #list .btns .return_btn {
}

#entry #list .btns .return_btn a {
    display:flex;
    justify-content:center;
    align-items:center;
    width:90px;
    background:#b487c8;
    padding:3px 7px;
    border-radius:5px;
    margin:0 auto 10px;
}

#entry #list .btns .return_btn a img {
    width:12px;
    margin-right:5px;
}

#entry #list .btns .return_btn a p {
    font-size:70%;
    color:#fff;
}

#entry #list .empty {
    padding:50px;
    text-align:center;
}

#entry #list .empty p {
    font-size:90%;
}



/*ENTRY PAGENATION*/
#entry .pagenation {
    display:flex;
    justify-content:center;
    margin-top:30px;
}

#entry .pagenation a {
    min-width:25px;
    height:25px;
    padding:7px 5px;
    border:#e1e1e1 1px solid;
    margin:0 5px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

#entry .pagenation a p {
    font-size:70%;
    line-height:100%;
    color:#aaa;
}

#entry .pagenation .none {
    opacity:0.5;
    pointer-events:none;
}

#entry .pagenation .now {
    border:#0064b4 1px solid;
    background:#0064b4;
    color:#fff;
    pointer-events:none;
}

#entry .pagenation .now p {
    color:#fff;
}




/*ENTRY APPLICANT*/
#applicant {
}

#applicant .applicant {
    border:#e1e1e1 1px solid;
    background:#fafafa;
    padding:50px 25px 85px;
    margin-bottom:25px;
    position:relative;
}

#applicant .applicant .data {
    width:100%;
    margin-bottom:30px;
}

#applicant .applicant .data .details {
    background:#fff;
    padding:25px 25px;
    margin-bottom:15px;
}

#applicant .applicant .data .details .name {
    font-size:135%;
    font-weight:600;
    line-height:100%;
    padding-bottom:10px;
}

#applicant .applicant .data .details .kana {
    font-size:70%;
    line-height:100%;
    color:#aaa;
    padding-bottom:20px;
}

#applicant .applicant .data .details ul {
    border-top:#f0f0f0 1px solid;
}

#applicant .applicant .data .details ul li {
    border-bottom:#f0f0f0 1px solid;
    padding:10px 0;
}

#applicant .applicant .data .details ul li .item {
    width:100%;
    font-size:90%;
    color:#787878;
}

#applicant .applicant .data .details ul li .detail {
    width:100%;
    font-size:90%;
}

#applicant .applicant .data .provider {
    font-size:70%;
    color:#b4b4b4;
}

#applicant .applicant .edit {
    width:100%;
}

#applicant .applicant .edit input[type="radio"],
#applicant .applicant .edit input[type="checkbox"] {
visibility:hidden;
position:absolute;
}

#applicant .applicant .edit .date {
    font-size:80%;
    color:#787878;
    text-align:right;
    padding-bottom:15px;
    position:absolute;
    top:15px;
    right:15px;
}

#applicant .applicant .edit .status .style_status {
    width:100%;
}

#applicant .applicant .edit .ng_btn {
    margin:10px 0 0;
}

#applicant .applicant .edit .ng_btn button {
    display:flex;
    justify-content:center;
    align-items:center;
    background:#c8d2dc;
    padding:10px 15px;
    border-radius:5px;
    cursor:pointer;
    border:none;
}

#applicant .applicant .edit .ng_btn button:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}

#applicant .applicant .edit .ng_btn button img {
    width:16px;
    margin-right:7px;
}

#applicant .applicant .edit .ng_btn button p {
    font-size:100%;
    line-height:100%;
    color:#fff;
}

#applicant .applicant .edit .ng_btn.checked {
    opacity:0.5;
    pointer-events:none;
}

#applicant .applicant .edit .style_status {
    font-size:90%;
    width:90%;
}

#applicant .applicant .edit .memo {
    margin:30px 0;
}

#applicant .applicant .edit .memo textarea {
    width:100%;
    height:200px;
    font-size:90%;
    padding:10px 15px;
    vertical-align:bottom;
}

#applicant .applicant .edit .btns {
    display:flex;
    justify-content:space-between;
}

#applicant .applicant .edit .btns .mail_btn {
    width:48%;
}

#applicant .applicant .edit .btns .mail_btn a {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:40px;
    background:#fab400;
    padding:5px 12px;
    border-radius:5px;
    margin:0 auto 10px;
}

#applicant .applicant .edit .btns .mail_btn a img {
    width:18px;
    margin-right:7px;
}

#applicant .applicant .edit .btns .mail_btn a p {
    font-size:90%;
    color:#fff;
}

#applicant .applicant .edit .btns .finish_btn {
    width:48%;
}

#applicant .applicant .edit .btns .finish_btn:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
    }

    #applicant .applicant .edit .btns .finish_btn button {
    width:100%;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#96be3c;
    border:none;
    padding:8px;
    border-radius:5px;
    margin:auto;
    cursor:pointer;
}

#applicant .applicant .edit .btns .finish_btn button img {
    width:18px;
    margin-right:7px;
}

#applicant .applicant .edit .btns .finish_btn button p {
    font-size:100%;
    line-height:100%;
    color:#fff;
}

#applicant .applicant .edit .btns .finish_btn.checked {
    opacity:0.5;
    pointer-events:none;
}

#applicant .applicant .edit .trash {
    margin-top:30px;
    display:inline-block;
    position:absolute;
    bottom:20px;
    right:20px;
}

#applicant .applicant .edit .trash a {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    border:#b4b4b4 1px dashed;
    padding:5px 7px;
}

#applicant .applicant .edit .trash a img {
    width:13px;
    margin-right:5px;
}

#applicant .applicant .edit .trash a p {
    font-size:70%;
    line-height:100%;
    color:#b4b4b4;
}



/*STATUS*/
#status {
}

#status .status {
    border:#e1e1e1 1px solid;
    background:#fafafa;
    padding:20px 20px;
    margin-bottom:20px;
}

#status .status .copy {
    font-size:90%;
    padding-bottom:10px;
}

#status .status .add_btn {
    display:inline-block;
    margin-bottom:30px;
}

#status .status .add_btn a {
    display:flex;
    justify-content:center;
    align-items:center;
    border:#55b4e6 1px solid;
    padding:10px 15px;
}

#status .status .add_btn a p {
    font-size:90%;
    line-height:100%;
    color:#55b4e6;
}

#status .status .add_btn a .plus {
    width:13px;
    height:13px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:10px;
}

#status .status .add_btn a .plus:before {
    content:"";
    width:100%;
    height:1px;
    background:#55b4e6;
    position:absolute;
}

#status .status .add_btn a .plus:after {
    content:"";
    width:1px;
    height:100%;
    background:#55b4e6;
    position:absolute;
}

#status .status ul { 
}

#status .status ul li {
    margin-bottom:12px;
    position:relative;
    display:flex;
    align-items:center;
}

#status .status ul li:last-child {
    margin-bottom:0;
}

#status .status ul li p {
    font-size:100%;
}

#status .status ul li p:first-child {
    width:100%;
}

#status .status ul li input {
    width:100%;
}

#status .status ul li .style_status_edit {
    padding:10px 15px;
}

#status .status ul li .default {
    position:absolute;
    height:20px;
    right:75px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size:60%;
    line-height:100%;
    padding:0 6px;
    border:#b4b4b4 1px dashed;
    color:#b4b4b4;
}

#status .status ul li .status_line {
    position:absolute;
    right:40px;
    width:20px;
    height:20px;
    display:flex;
    justify-content:center;
    align-items:center;
}

#status .status ul li .status_line span {
    width:100%;
    height:1px;
    background:#b4b4b4;
    display:block;
    position:absolute;
}

#status .status ul li .status_line span:first-child {
    top:3px;
}

#status .status ul li .status_line span:nth-child() {
}

#status .status ul li .status_line span:last-child {
    bottom:3px;
}

#status .status ul li .trash {
    width:16px;
    position:absolute;
    right:10px;
    display:flex;
}

#status .status ul li.default .trash {
    opacity:0.3;
    pointer-events:none;
}

#status .status ul li .trash img {
    vertical-align:middle;
}

#status .status .enter_btn {
    text-align:center;
    margin-top:25px;
}

#status .status .style_status_edit_btn {
    padding:15px 30px;
    background:#0064b4;
    border:none;
    font-size:90%;
    color:#fff;
    cursor:pointer;
}

#status .status .error .style_status_edit_btn {
    padding:15px 30px;
    background:#aaa;
    border:none;
    font-size:90%;
    color:#fff;
    pointer-events:none;
}

#status .attention {
    padding-bottom:25px;
}

#status .attention p {
    display:flex;
    font-size:60%;
    color:#787878;
}

#status .status ul .error {
    margin-bottom:40px;
}

#status .status ul .error input {
    background:#fdeae5;
    border:#eb3200 1px dashed;
}

#status .status ul .error.delete:after {
    content:"使用中の項目は削除できません。";
    position:absolute;
    left:0;
    bottom:-32px;
    font-size:90%;
    color:#eb3200;
}

#status .status ul .error.word:after {
    content:"10文字以内で入力してください。";
    position:absolute;
    left:0;
    bottom:-32px;
    font-size:90%;
    color:#eb3200;
}




/*REG*/
#reg {
}

#reg .reg {
    border:#e1e1e1 1px solid;
    background:#fafafa;
    padding:20px 20px;
    margin-bottom:20px;
}

#reg .reg .copy {
    font-size:90%;
    padding-bottom:20px;
}

#reg .reg ul { 
}

#reg .reg ul li {
    position:relative;
    border-bottom:#e1e1e1 1px solid;
    padding:12px 0;
}

#reg .reg ul li:first-child {
    border-top:#e1e1e1 1px solid;
}

#reg .reg ul li p {
    font-size:100%;
}

#reg .reg ul li .item {
    width:100%;
    padding-bottom:5px;
}

#reg .reg ul li .detail {
    width:100%;
}

#reg .reg ul li .detail input {
    padding:12px 18px;
}

#reg .reg ul li .style_reg_id {
    width:100%;
}

#reg .reg ul li .style_reg_pass {
    width:100%;
}

#reg .reg ul li .style_reg_mail {
    width:100%;
}

#reg .reg .enter_btn {
    text-align:center;
    margin-top:20px;
}

#reg .reg .style_status_edit_btn {
    padding:15px 30px;
    background:#0064b4;
    border:none;
    font-size:90%;
    color:#fff;
    cursor:pointer;
}

#reg .reg .error .style_status_edit_btn {
    padding:15px 30px;
    background:#aaa;
    border:none;
    font-size:90%;
    color:#fff;
    pointer-events:none;
}

#reg .attention {
    padding-bottom:25px;
}

#reg .attention p {
    display:flex;
    font-size:70%;
    color:#787878;
}

#reg .status ul .error {
    margin-bottom:40px;
}

#reg .status ul .error input {
    background:#fdeae5;
    border:#eb3200 1px dashed;
}

#reg .status ul .error.delete:after {
    content:"使用中の項目は削除できません。";
    position:absolute;
    left:0;
    bottom:-32px;
    font-size:90%;
    color:#eb3200;
}

#reg .status ul .error.word:after {
    content:"10文字以内で入力してください。";
    position:absolute;
    left:0;
    bottom:-32px;
    font-size:90%;
    color:#eb3200;
}

#reg .warning {
    font-size:90%;
    font-weight:600;
    color:#eb3200;
    margin-top:10px;
    display:block;
    border:none;
    padding:0;
}






/*LOGIN*/
#login {
    width:100%;
    height:100vh;
    background:#f5f5f5;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    padding-bottom:35px;
}

#login .cts {
    width:90%;
    padding:35px 30px 30px;
    background:#fff;
    border:#e1e1e1 1px solid;
}

#login .logos {
    width:135px;
    margin:0 auto 25px;
}

#login .logos .symbol {
    width:35px;
    margin:0 auto 5px;
}

#login .logos .logo {
    width:135px;
    margin:auto;
}

#login h1 {
    font-size:150%;
    font-weight:bold;
    line-height:135%;
    text-align:center;
    padding-bottom:20px;
}

#login .copy {
    font-size:90%;
    text-align:center;
    padding-bottom:12px;
}

#login .id_pass {
    width:100%;
    margin:0 auto 15px;
}

#login .id_pass .login_id {
    margin-bottom:12px;
}

#login .id_pass .style_login_id {
    width:100%;
    padding:12px 18px;
    font-size:100%;
    border-radius:5px;
}

#login .id_pass .style_login_pass {
    width:100%;
    padding:12px 18px;
    font-size:100%;
    border-radius:5px;
}

#login .login_btn {
    text-align:center;
}

#login .login_btn .style_login {
    background:#0064b4;
    color:#fff;
    border:none;
    padding:15px 25px;
    font-size:90%;
    font-weight:500;
    line-height:100%;
    border-radius:5px;
    cursor:pointer;
}

#login .login_btn .style_login:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}

#login .stay_login {
    width:100%;
    margin:auto;
    text-align:center;
    font-size:80%;
    line-height:100%;
    display:flex;
    align-items:center;
    padding:0;
    vertical-align:center;
    margin-bottom:25px;
}

#login .stay_login label {
    cursor:pointer;
}

#login .stay_login .style_login_stay {
    appearance:auto;
    margin-right:5px;
    vertical-align:top;
}

#login .copyright {
    font-size:70%;
    color:#aaa;
    position:absolute;
    bottom:20px;
    left:0;
    right:0;
    text-align:center;
}

#login .error {
    margin-bottom:20px;
    text-align:center;
}

#login .error p {
    display:inline-block;
    background:#ffebeb;
    border:#ffc8c8 1px solid;
    padding:12px 20px;
    color:#e60032;
    font-size:90%;
    font-weight:500;
}

#login .version {
    position:absolute;
    bottom:10px;
    right:10px;
    border:#aaa 1px solid;
    font-size:70%;
    line-height:100%;
    color:#aaa;
    padding:2px 3px;
}



/*SELECT*/
#login .selects {
}

#login .selects .select {
    border-bottom:#e1e1e1 1px solid;
    display:flex;
    align-items:center;
    padding:12px 10px;
}

#login .selects .select:first-child {
    border-top:#e1e1e1 1px solid;
}

#login .selects .select .arrow {
    width:8px;
    height:8px;
    border-top:#0064b4 1px solid;
    border-right:#0064b4 1px solid;
    transform:rotate(45deg);
    margin-right:10px;
}

#login .selects .select a {
}

#login .selects .select a p {
    font-size:90%;
    font-weight:600;
    color:#0064b4;
}




/*LOST*/
#login .lost {
    padding-top:30px;
    text-align:center;
    font-size:80%;
}

#login .lost a {
    font-weight:500;
    color:#0064b4;
}

#login .mail {
    width:100%;
    margin:5px auto 0;
}

#login .mail .style_mail {
    width:100%;
    padding:12px 18px;
    font-size:100%;
    border-radius:5px;
}

#login .warning {
    font-size:90%;
    font-weight:600;
    color:#eb3200;
    margin-top:10px;
    display:block;
    border:none;
    padding:0;
}

#login .lost_btn {
    text-align:center;
    margin-top:20px;
}

#login .lost_btn .style_lost {
    background:#0064b4;
    color:#fff;
    border:none;
    padding:15px 25px;
    font-size:90%;
    font-weight:500;
    line-height:100%;
    border-radius:5px;
    cursor:pointer;
}

#login .lost_btn .style_lost:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}

#login .backbtn {
    padding-top:20px;
}


/*REISSUE*/
#login .reissue {
    width:100%;
    margin:auto;
}

#login .reissue .password {
}

#login .reissue .password:first-child {
    margin-bottom:10px;
}

#login .reissue .password .style_reissue {
    width:100%;
    padding:12px 18px;
    font-size:100%;
    /*color:#0064b4;*/
    border-radius:5px;
}

#login .reissue_btn {
    text-align:center;
    margin-top:20px;
}

#login .reissue_btn .style_reissue_btn {
    background:#0064b4;
    color:#fff;
    border:none;
    padding:15px 25px;
    font-size:90%;
    font-weight:500;
    line-height:100%;
    border-radius:5px;
    cursor:pointer;
}

#login .reissue_btn .style_reissue_btn:hover {
    -webkit-animation:hover 0.5s ease forwards;
    animation:hover 0.5s ease forwards;
}



/*GROBAL*/
#nav_btn {
width:36px;
height:32px;
position:fixed;
top:15px;
right:10px;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
cursor:pointer;
}

#nav_btn span {
width:100%;
height:2px;
background:#0064b4;
position:absolute;
}

#nav_btn span:first-child {
top:5px;
transition:0.5s;
}

#nav_btn span.show:first-child {
top:15px;
transform:rotate(45deg);
}

#nav_btn span:nth-child(2) {
transition:0.5s;
}

#nav_btn span.show:nth-child(2) {
opacity:0;
}

#nav_btn span:last-child {
bottom:5px;
transition:0.5s;
}

#nav_btn span.show:last-child {
bottom:15px;
transform:rotate(-45deg);
}

#nav_close {
width:100%;
height:100%;
background:rgba(0,0,0,0);
position:fixed;
top:60px;
left:0;
display:none;
cursor:pointer;
z-index:9997;
}




/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:30px;
height:30px;
right:15px;
bottom:15px;
z-index:100;
display:none;
}




/*CSV BUTTON*/
.csv_button {
    margin-top:30px;
}

.csv_button button {
    /*background:#55b4e6;*/
    border:#e1e1e1 1px solid;
    background:#f6f6f6;
    padding:10px 12px 10px 37px;
    font-size:80%;
    line-height:100%;
    cursor:pointer;
    border-radius:6px;
    position:relative;
    display:flex;
    align-items:center;
    margin:auto;
}

.csv_button button:before {
    content:"";
    width:18px;
    height:12px;
    background:url(../img/icon_csv.svg) center;
    background-size:100% 100%;
    position:absolute;
    left:12px;
    top:10px;
}



/*ERROR*/
#error {
    width:100%;
    height:100vh;
    background:#f5f5f5;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position:relative;
}

#error .cts {
    width:700px;
    padding:25px 25px;
    background:#fff;
    border:#e1e1e1 1px solid;
    margin-bottom:30px;
}

#error h2 {
    font-size:150%;
    font-weight:bold;
    line-height:100%;
    text-align:center;
    padding-bottom:20px;
}

#error .copy {
    font-size:90%;
    text-align:center;
}

#error .copyright {
    font-size:70%;
    color:#aaa;
    position:absolute;
    bottom:20px;
    left:0;
    right:0;
    text-align:center;
}




/*FOOTER*/
footer {
    padding-bottom:15px;
}

footer .copyright {
    font-size:50%;
    color:#aaa;
    text-align:center;
}







}