@charset "utf-8";

/* TODO: ベンダープレフィックス削除 */

@font-face {
    font-family: 'paicon';
    src: url('../font/fontello.eot');
    src:
        url('../font/fontello.eot#iefix') format('embedded-opentype'),
        url('../font/fontello.woff') format('woff'),
        url('../font/fontello.ttf') format('truetype'),
        url('../font/fontello.svg#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'paicon2';
    src: url('../font/paicon2.eot');
    src:
        url('../font/paicon2.eot#iefix') format('embedded-opentype'),
        url('../font/paicon2.woff') format('woff'),
        url('../font/paicon2.ttf') format('truetype'),
        url('../font/paicon2.svg#paicon2') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'takibi';
    src:  url('/font/takibi.eot?cre2jj');
    src:  url('/font/takibi.eot?cre2jj#iefix') format('embedded-opentype'),
      url('/font/takibi.ttf?cre2jj') format('truetype'),
      url('/font/takibi.woff?cre2jj') format('woff'),
      url('/font/takibi.svg?cre2jj#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'thanks';
  src: url('../font/thanks/thanks.eot?56247202');
  src: url('../font/thanks/thanks.eot?56247202#iefix') format('embedded-opentype'),
       url('../font/thanks/thanks.woff?56247202') format('woff'),
       url('../font/thanks/thanks.ttf?56247202') format('truetype'),
       url('../font/thanks/thanks.svg?56247202#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/** color **
    lightblue    #00CBD8        0,203,216
    lightblue_d    #00aBb8        0,203,216
    blue        #274FAA
    green         #00DF23
    red            #E5584C
    yellow        #FFBE06
**/
body, html {
    height: 100%;
    min-height: 100%;
    width: 100%;
    font-size: 10px;
    overflow: hidden;
    font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    background-color: #FFF;
}

/**
 * disabled な input 要素に対するクリックイベントを親要素に伝搬させるために必要
 * @see http://stackoverflow.com/a/32925830
 */
input:disabled { pointer-events: none; }

#container {
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.preload #container {
    transition: all 0s ease !important;
}

.spacer44 {
    height: 44px;
    width: 100%;
}
.spacer20 {
    height: 20px;
    width: 100%;
}
.spacer60 {
    height: 60px;
    width: 100%;
}
.cover {
    position: absolute;
    z-index: 100;
    background-color: rgba(0,0,0,0.5);
    border-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    top: 0px;
    left: -100000px;
    opacity: 0;
    transition: opacity 0.3s ease, left 0s ease 0.3s;
}

/** scrollbar */
* {
    -webkit-overflow-scrolling: touch;
}

*::-webkit-scrollbar {
    all:initial;
}
*::-webkit-scrollbar:horizontal {
    all:initial;
}
*::-webkit-scrollbar-button {
    all:initial;
}
*::-webkit-scrollbar-piece {
    all:initial;
}
*::-webkit-scrollbar-piece:start {
    all:initial;
}
*::-webkit-scrollbar-thumb {
    all:initial;
}
*::-webkit-scrollbar-corner {
    all:initial;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
    * {-webkit-overflow-scrolling: touch;}
    *::-webkit-scrollbar {
        width:10px;
        background:#ddd;
    }
    *::-webkit-scrollbar:horizontal {
        background:#ddd;
        height:10px;
    }
    *::-webkit-scrollbar-button {
        width:10px;
        height:10px;
        background:#999;
    }
    *::-webkit-scrollbar-piece {
        background:#bbb;
    }
    *::-webkit-scrollbar-piece:start {
        background:#bbb;
    }
    *::-webkit-scrollbar-thumb {
        background:#999;
    }
    *::-webkit-scrollbar-corner {
        background:#ddd;
    }
}

/** content side **/
#content_side_inner {
    position: relative;
    height: 100%;
    width: 100% !important;
    overflow-y: auto;
}

#content_left > div {
    height: 100%;
}

#content_left > div.department_list {
    background-color: #fff;
}

#content_side_inner .jspPane,
#content_side_inner .jspContainer {
    width: 100% !important;
}
.has_bottom_button {
    padding-bottom: 44px;
    box-sizing: border-box;
}
.has_tab {
    padding-top: 44px;
    box-sizing: border-box;
}
.content_side_bottom_button {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 44px !important;
    box-sizing: border-box;
    line-height: 44px;
    text-indent: 44px;
    color: #666;
    font-size: 1.2em;
}

.content_side_bottom_button>a,
.content_side_bottom_button>div{
    height: 100%;
    width: 100%;
    position: relative;
    border-top: 1px solid #cfcfcf;
    background-color: #fff;
    cursor: pointer;
}
.content_side_bottom_button.add_button>div:after,
.content_side_bottom_button.add_button>div:before{
    position: absolute;
    content: "";
    height: 2px;
    width: 20px;
    background-color: #666;
    left: 12px;
    top: 21px;
}
.content_side_bottom_button.add_button>div:before{
    transform: rotate(90deg);
    background-color: #666;
}

.content_side_bottom_button.favorite_button>div{
    text-indent: 0px;
    text-align: center;
}

/** member list **/
#members{
    box-sizing: border-box;
    height: 100%;
    min-width: 1200px;
    overflow-y: scroll;
    overflow-x: hidden;
}
#member_list_menu{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 11;
    box-sizing: border-box;
    box-shadow: 0px 1px 0px rgba(0,0,0,0);
    transition: opacity 0.3s ease, background-color 0.3s ease;
}
#member_list_menu.fit{
    min-width: 100% !important;
}
#members,#member_list_menu,.contactMinHeader,#content_right_cover{
    min-width: 1000px;
}
.ex #members,
.ex #member_list_menu,.ex #members .contactMinHeader,.ex #members #content_right_cover{
    min-width: 1460px;
}
#member_list_menu.scrolling{
    opacity: 0.9;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}
#member_list_menu>div:first-child{
    background-color: #fff !important;
}
#member_list_menu>div:first-child{
    height: 48px;
    width: 100%;
    z-index: 5;
    box-sizing: border-box;
}
#member_list_menu>div.emp{
    display: none;
}

#member_list_menu>*:first-child{
    background-color: #fff;
    border-top: none !important;
}
#member_list_menu>*:last-child{
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;

    background-color: #fcfcfc;
    box-sizing: border-box;
}
.scrollbar_padding{
    pointer-events: none;
    box-sizing: border-box;
}
.scrollbar_padding>*{
    pointer-events: auto;
}
#member_list_menu:hover{
    opacity: 1;
}

/* #member_list_menu の次の要素に適用する */
.member-list-menu-next-fixed {
    position: absolute;
    top: 44px;
    z-index: 2;
}

.member-list-data {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    overflow-y: scroll;
}

.shikiri_title{
    font-size: 1.2em;
    font-weight: bold;
    color: #666;
    padding-left: 12px;
    padding-right: 16px;
}
.select_link,
.member_list_menu_button{
    width: auto;
    display: table-cell;
    line-height: 44px;
    position: relative;
    color: #274FAA;
    font-size: 1.2em;
    cursor: pointer;
    float: left;
    text-align: center;
    overflow: hidden;
    height: 44px;
    letter-spacing: 0px;
    user-select: none;
}
.select_link{
    padding: 0 8px;
}
.member_list_menu_button{
    float: right;
    padding: 0 8px 0 26px;
    font-size: 1.2em;
    text-decoration: none;
}
.select_link.min{
    height: 28px;
    line-height: 28px;
    font-size: 1.2em;
}

.select_link+.select_link:before{
    height: 50%;
    top: 25%;
    width: 1px;
    position: absolute;
    content: "";
    display: block;
    left: 0px;
    background-color: #e8e8e8;
}
.select_link:hover,
.member_list_menu_button:hover{
    background-color: rgba(0,203,216, .1);
    text-decoration: underline;
}
.member_list_menu_wrapper {
    float: left;
    position: fixed;
    right: 10px;
}
.member_list_menu_buttons{
    width: auto;
    display: table-cell;
    float: right;
    height: 44px;
    vertical-align: middle;
    line-height: 44px;
    width: auto !important;
    padding: 0 12px;
    user-select: none;
}
.member_list_menu_button:before{
    height: 44px;
    width: 28px;
    font-family: "paicon";
    content: "\e865";
    text-align: center;
    font-size: 18px;
    display: block;
    color: #00cbd8;
    position: absolute;
    left: 0px;
    font-weight: lighter;

    text-decoration: none !important;
}

.member_list_menu_button:hover:before {
    /* color: #666; .lumps のものを上書き(問題なければこれで) */
    color: #00CBD8;
}

#list_location:before{
    content: "\e87f";
}
#list_sort:before{
    content: "\e82b";
}
#list_done:before{
    content: "\e812";
}
#list_delete:before{
    content: "\e883";
}
#list_delete:hover{
    background-color: rgba(229,88,76, .15) !important;
}
#list_delete.member_list_menu_button:before{
    color: #e55807;
}

#list_cancel:before { content: "\e86c"; }
#list_add:before { content: "\e86a"; }
#list_member_add:before { content: "\e87d"; }
#list_item_add:before, #list_anpi_add:before { content: "\e86A"; }
#list_move:before {
    font-family: "takibi";
    content: "\e908";
    color: #00cbd8;
}
#lump_mail:before {
    font-family: "paicon";
    content: "\e80c";
    color: #00cbd8;
}
#lump_gotalk:before {
    content: "\e80d";
    color: #00cbd8;
}
#lump_chizu:before { content: "\e804"; }

#list_sort_up:before { content: "\e876"; }
#list_sort_down:before { content: "\e879"; }

#list_activate_mail:before {
    font-family: "paicon";
    content: "\e80c";
    color: #00cbd8;
}

#input_namecard:before {
    font-family: "paicon2" !important;
    content: "\f11c";
    font-size: 22px;
    width: 34px;
    font-weight: bold;
}
#input_namecard.member_list_menu_button {
    padding: 0 8px 0 34px;
}

.member_list_shikiri{
    position: relative;
    height: 28px;
    width: 100%;
    box-sizing: border-box;
    z-index: 3;
}
.member_list_shikiri>div{
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-bottom: 1px solid #E8E8E8;
    display: table;
    table-layout: fixed;
}
.member_list_shikiri>div>div{
    vertical-align: middle;
    display: table-cell;
}
.member_list{
    width: 100%;
}
.member_list>li{
    width: 100%;
    height: 72px;
    box-sizing: border-box;
    border-bottom: 1px solid #E8E8E8;

}
.member_list>li>input{
    display: none;
}
.member_list>li>label{
    width: 100%;
    height: 72px;

    display: table;
    table-layout: fixed;
}
.normal_col{
    padding: 0 12px;
    font-size: 1.2em;
    color: #666;
}
.normal_col.huzai{
    color: #E5584C;
}
.normal_col .thin{
    color: #999;
}
.normal_col a{
    color: #274FAA;
    text-decoration: none;
}

.member_list_shikiri .member_check,
.member_list_shikiri .normal_col{
    text-align: center;
    font-size: 1.1em;
    font-weight: normal;
    color: #666;
}
.member_list>li>label.fixed{
    table-layout: fixed;
}
.member_list>li>label>div{
    display: table-cell;
    vertical-align: middle;
}
.member_list>li>label{
    transition: all 0.2s ease;
}
.member_list>li>label:hover{
    background-color: rgba(0,203,216,.01);
}
.member_list>li>input[type="checkbox"]:checked+label{
    background-color: rgba(0,203,216,.1);
}
.member_list_right_button_wrap{
    display: table-cell;
    width: 64px;
    text-align: center;
    vertical-align: middle;
}
.member_list_right_button_wrap.wide{
    width: 90px;
}
.table_spacer{
    display: table-cell;
    width: 20%;
    height: 100%;
    text-indent: 12px;
    vertical-align: middle;
    color: #666;
    font-size: 1.2em;
}
.semi_title{
    font-weight: bold;
    float: left;
    width: auto;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    line-height: 46px;
    font-size: 1.2em;
    font-weight: bold;
    color: #666;
    padding: 0 12px;
}
.admin_division_semi_title{
    font-weight: bold;
    float: left;
    width: auto;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    line-height: 46px;
    font-weight: bold;
    padding: 0 12px;
    font-size: 20px;
    color: #777;
}
.member_check{
    display: table-cell;
    width: 20px;
    min-width: 20px;
    height: 100%;
    vertical-align: middle;
}
.member_check.wide{
    width: 100px;
}
.custom_check.inline_block{
    display: inline-block;
    min-width: 300px;
    width: auto;
    height: 32px;
    padding-right: 16px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
    padding-top: 8px;
}
.checkbox-wrapper > input[type=checkbox],
.member_check > input[type=checkbox],
.custom_check > input[type=checkbox]{
    display: none;
}
input[disabled="true"]+.pseudo_check>div{
    opacity: 0.5;
    background-color: #aaa;
}
.pseudo_check>div{
    position: relative;
    top: 1px;
    left: 8px;
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 2px;
}
.checkbox-wrapper > .pseudo_check > div,
.custom_check > .pseudo_check > div {
    left: 0px;
}
.pseudo_check>div:before{
    position: absolute;
    top: 0px;
    content: "\e812";
    font-family: "paicon";
    text-align: center;
    line-height: 12px;
    font-size: 11px;
    color: #00CBD8;
    opacity: 0;
    left: 0px;
}

.check-icon:before {
    content: "\e812";
    font-family: "paicon";
}

.checkbox-wrapper {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

input[type="checkbox"]:checked+.as_check:after,
input[type="checkbox"]:checked+.as_check:before,
input[type="checkbox"]:checked+label .member_check .pseudo_check>div:after,
input[type="checkbox"]:checked+label .member_check .pseudo_check>div:before,
input[type="checkbox"]:checked+.pseudo_check>div:after,
input[type="checkbox"]:checked+.pseudo_check>div:before{
    opacity: 1 !important;
}/**/
.pseudo_check input{
    display: none;
}
/**/
.fakeListPhoto,
.list_photo{
    position: relative;
    height: 100%;
    min-width: 80px;
    width: 80px;
    display: table-cell;
}
.fakeListPhoto{
    min-width: 32px;
    width: 32px;
}
.list_photo>a{
    display: block;
    height: 100%;
    width: 100%;
}
.list_photo>img,
.list_photo>a>img{
    max-height: 44px;
    max-width: 44px;
    position: absolute;
    top: 14px;
    left: 18px;
    border-radius: 100px;
}

.list_prof{
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
.list_prof.auto{
    width: auto !important;
}
.location{
    position: relative;
    display: table-cell;
    overflow:hidden;
    height: 72px;
    font-size: 1.1em;
    color: #666;
    min-width: 75px;
    width: 75px;
}
.location>div{
    position: relative;
    padding: 8px 4px;
    box-sizing: border-box;
    width: 75px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 72px;
    text-align: center;
    font-size: 1.1em;
    color: #666;
    min-width: 0px;
    vertical-align: middle;
    display: table-cell;
    height: 50px;
    word-break: break-all;
}
.list_prof>div{
    width: 100%;
    display: inline-block;
}
.list_prof_name{
    height: 24px;
    line-height: 26px;
    font-size: 1.55em;
    color: #274FAA;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list_prof_name>a{
    color: #274FAA;
    text-decoration: none;
}

.list_prof_name>a:hover{
    text-decoration: underline;
}
.list_prof_kana,
.list_prof_en{
    height: 14px;
    line-height: 14px;
    color: #666;
    font-size: 1.2em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

.callmenu>nav{
    position: absolute;
    width: 200px;
    top: -116px;
    left: 50%;
    margin-left: -100px;
    z-index: 10;
    display: none;
    border-radius: 3px;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.5);
}

.rireki li:nth-child(2) .callmenu>nav,
li:first-child .callmenu>nav{
    bottom: auto;
    top: 60px;
}

.rireki li:nth-child(2) .callmenu>nav:before,
li:first-child .callmenu>nav:before{
    display: none;
}
.rireki li:nth-child(2) .callmenu>nav:after,
li:first-child .callmenu>nav:after{
    display: block;
}
.callmenu>nav:before{
    height: 12px;
    width: 12px;
    position: absolute;
    bottom: -6px;
    left: 96px;
    content: "";
    background-color: #fff;
    transform: rotate(45deg);
    box-shadow: 3px 0 12px rgba(0, 0, 0, 0.5);
}
.callmenu>nav:after{
    height: 0px;
    width: 0px;
    left: 94px;
    top: -16px;
    content: "";
    display: block;
    font-size: 0;
    position: absolute;
    border: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 0, 0, 0.8);
    display: none;
}
.callmenu>nav>div{
    text-align: left;
    height: 36px;
    line-height: 36px;
    color: #666;
    font-size: 13px;
    text-indent: 12px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
    position: relative;
}
.callmenu>nav>.list_call_number{
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    text-align: center;
}
.list_call_number{
    position: relative;
}
.list_call_number>div{
    position: absolute;
    right: 8px;
    top: 8px;
    height: 19px;
    width: 19px;
    border-radius: 19px;
    cursor: pointer;

}
.list_call_number>div:after,
.list_call_number>div:before{
    position: absolute;
    content: "";
    display: block;
    height: 1px;
    width: 17px;
    background-color: #fff;
    left: 1px;
    top: 9px;
    transform: rotate(45deg);
}

.list_call_number>div:before{
    transform: rotate(-45deg);
}

.list_call_call{
    cursor: pointer;
}
.list_call_callback{
    cursor: pointer;
    border-bottom: none !important;
    border-radius: 0 0 3px 3px;
}

.list_call_callback:hover,
.list_call_call:hover{
    color: #fff;
    background-color: #00CBD8;
}
.callmenu.click>nav{
    display: block;
}
.list_naisen>div:before{
    content: "\e80a";
}
.list_naisen>div:after{
    content: "内線";
}

.list_denwa>div:before{
    content: "\e80b";
}
.list_denwa>div:after{
    content: "電話";
}

.list_kaisha>div:before{
    content: "\e80b";
}
.list_kaisha>div:after{
    content: "会社";
}

.list_kojin>div:before{
    content: "\e81d";
}
.list_kojin>div:after{
    content: "携帯";
}

.list_mail>a:before,
.list_mail>div:before{
    content: "\e80c";
}
.list_mail>a:after,
.list_mail>div:after{
    content: "メール";
}

.list_talk>a:before,
.list_talk>div:before{
    content: "\e80d";
}
.list_talk>a:after,
.list_talk>div:after{
    content: "トーク";
}

.list_chizu>a:before,
.list_chizu>div:before{
    content: "\e804";
}
.list_chizu>a:after,
.list_chizu>div:after{
    content: "地図";
}

.talk>div>div>.callmenu{
    cursor: pointer;
    color: #0000ee;
    text-decoration: underline;
}

.other_talk>div>div>.callmenu>nav{
    left:0px !important;
    margin-left: -40px !important;
}
.me_talk>div>div>.callmenu>nav{
    right:0px !important;
    left:auto !important;
}

.bar_spacer{
    display: table-cell;
    width: 0px !important;
}

.member_dragging *{
    cursor: grabbing !important;
    cursor: -ms-grabbing !important;
    cursor: -webkit-grabbing !important;
}
/* member dragging */
#member_dragging_info{
    position: absolute;
    display: none;
    z-index: 100;
    margin-left: 100px;
}
#dragging_status{
    position: absolute;
    display: none;
    top: -20px;
    left: 0px;
    height: 20px;
    width: auto;
    color: #fff;
    box-sizing: border-box;
    padding: 0 8px;
    line-height: 20px;
    font-size: 1em;
    background-color: #E5584C;
}
#dragging_status.active{
    display: block;
}
.member_dragging .member-dragging-info,
.member_dragging #member_dragging_info {
    position: absolute;
    z-index: 1000;
    display: block;
    background-color: #fff;
    height: auto;
    width: auto;
    padding: 12px;
    font-size: 1.2em;
    box-sizing: border-box;
    margin-left: 0px;
    transform: translate3d(0, 0, 0);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

.division_dragging .division-dragging-info{
    z-index: 1000;
    background-color: #fff;
    padding: 4px;
    font-size: 1.2em;
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.page_title,
#page_title{
    transition: all 0s ease 0.5s;
}

.member_dragging .page_title,
.member_dragging #page_title{
    transition: all 0s ease 0s;
    z-index: 0;
}
.member_dragging .cover{
    opacity: 1;
    left: 0px;
    transition: opacity 0.3s ease, left 0s ease 0s;
    cursor: grabbing !important;
    cursor: -ms-grabbing !important;
    cursor: -webkit-grabbing !important;
}
.member_dragging #shortcut_wrap{
    z-index: 101;
}
.member_dragging #shortcut_wrap>div>div{
    opacity: 1;
    background-color: #fff;
}
.member_dragging #content_left{
    position: absolute;
    z-index: 101;
}
#content_left_cover{
    border-right-style: solid;
    border-right-width: 1px;
}
.member_dragging #content_side_inner{
    position: relative;
    z-index: 1000;
}

.targeting{
    background-color: #9fcfff !important;
}
.cant_targeting{
    background-color: #ff9f5f !important;
}

.detail_page{
    overflow-y: auto;
}
.detail_page>#detail_content_wrap:before{
    content: "";
    display: block;
    position: absolute;
    left: 219px;
    width: 1px;
    height: 100%;
    background-color: #e8e8e8;
}
#detail_content_wrap{
    position: relative;
    height: auto;
    width: 100%;

    z-index: 1;
}
.detail-content-ul{
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;
}

.detail-content-ul.padding{
    padding: 12px 0;
    box-sizing: border-box;
}
.detail-content-ul>li{
    width: 100%;
    display: table;
    table-layout: fixed;
}
.detail-content-ul>li>div{
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

.detail-content-ul>li>div:first-child{
    width: 219px;
}
.detail-image {
    position: absolute;
    max-width: 160px;
    max-height: 160px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.detail-image-wrap {
    position: relative;
    height: 219px;
    width: 219px;
}
.detail-image-wrap > div{
    height: 100%;
    width: 100%;
}
.profile-wrap {
    position: relative;
    padding: 24px;
    padding-left: 36px;
    box-sizing: border-box;
}
.detail-name {
    width: 100%;
    line-height: 40px;
    font-size: 2.6em;
    color: #274FAA;
}
.detail-kana,
.detail-en {
    line-height: 28px;
    color: #666;
    font-size: 1.4em;
}
#detail_presence{
    position: relative;
    height: 40px;
    color: #666;
    width: 100%;
    padding-left: 24px;
    line-height: 40px;
    font-size: 1.2em;
    box-sizing: border-box;
}

#detail_presence:before{
    position: absolute;
    content: "";
    display: block;
    height: 16px;
    width: 16px;
    top: 12px;
    left: 0px;
    background-size: 16px;
}

#detail_presence[type="busy"]:before{
    background-image: url(../images/presence/busy.png);
}
.detail-menu {
    display: flex;
    width: 100%;
}

.detail-menu > a,
.detail-menu > div {
    position: relative;
    text-indent: 30px;
    color: #666;
    width: 160px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 45px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.detail-menu > a:hover,
.detail-menu > div:hover {
    color: #333;
    text-decoration: none;
}
.detail-menu > a:before,
.detail-menu > div:before {
    position: absolute;
    font-family: "paicon";
    display: block;
    height: 44px;
    width: 44px;
    left: -10px;
    top: 0;
    text-align: center;
    text-indent: 0;
    opacity: 1;
    color: #666;
    font-size: 24px;
    transition: all 0.3s ease;
}
.detail-menu > a:hover:before,
.detail-menu > div:hover:before {
    color: #00CBD8;
}
#detail_menu_kaisha:before {
    content: "\e80b";
}
#detail_menu_naisen:before {
    content: "\e80a";
}
#detail_menu_kojin:before {
    content: "\e81d";
}
#detail_menu_mail:before {
    content: "\e80c";
}
#detail_menu_mail1:before {
    content: "\e80c";
}
#detail_menu_mail2:before {
    content: "\e80c";
}
#detail_menu_talk:before {
    content: "\e80d";
}
#detail_menu_gotalk:before {
    content: "\e80d";
}
#detail_menu_ocr_machine:before {
    font-family: "paicon2" !important;
    content: "\e802";
}
#detail_menu_ocr_regolith:before {
    font-family: "paicon2" !important;
    content: "\f11c";
}
#detail_location_log {
    font-family: paicon;
    font-size: 28px;
    color: #666;
}
#detail_location_log:before {
    content: "\e804";
}
#detail_menu_edit_namecard:before {
    content: "\f125";
}

.map-icon:before {
    content: "\e804";
}
.ocr-machine-icon:before {
    font-family: "paicon2" !important;
    content: "\e802";
}
.ocr-regolith-icon:before {
    font-family: "paicon2" !important;
    content: "\f11c";
}
.edit-namecard-icon:before {
    content: "\f125";
}


.detail-setting {
    text-align: right;
    white-space: nowrap;
}
.detail-settei {
    position: relative;
    height: 44px;
    line-height: 44px;
    font-size: 1.1em;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.detail-settei:hover {
    color: #333;
    text-decoration: none;
}
.detail-settei:hover:before {
    color: #00CBD8;
}
.detail-settei:before {
    transition: all 0.3s ease;
    position: absolute;
    content: "\e806";
    display: block;
    right: 27px;
    height: 44px;
    text-indent: 0;
    font-family: "paicon";
    width: 44px;
    font-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

.detail-normal-column > div:first-child {
    padding: 8px;
    padding-right: 36px;
    text-align: right;
    font-weight: bold;
    font-size: 1.3em;
    color: #999;
    box-sizing: border-box;
    white-space: pre-line;
}
.detail-normal-column > div:last-child {
    font-size: 1.5em;
    color: #666;
    padding: 8px;
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;
}
.detail-normal-column > div.multiline {
    font-size: 1.3em;
}
#schedule-detail .detail-normal-column > div {
    font-size: 1.3em;
}
.detail-normal-column.thin > div {
    padding-top: 0;
    padding-bottom: 0;
}
.schedule-details {
    margin-bottom: 15px;
}
.schedule-item {
    margin-bottom: 5px;
}
.schedule-item > span:first-child{
    display: inline-block;
    width: 4.5em;
}
.schedule-details:last-of-type,
.schedule-item:last-of-type {
    margin-bottom: 0px;
}

/** group **/
#group_list{
    position: relative;
    width: 100%;
    height: 100%;
}
#group_list>li{
    position: relative;
    height: 72px;
    width: 100%;
    background-color: #fff;
}
#group_list>li>a{
    display: block;
    height: 100%;
    box-sizing: border-box;
    width: 100%;
    font-size: 1.4em;
    color: #666;
    padding-left: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #E8E8E8;
}

#group_list>li.active{
    background-color: #00CBD8 !important;
    color: #fff;
}
#group_list>li.active>a{
    color: #fff;
}
#group_list>li>a>span{
    position: relative;
    padding-right: 12px;
    box-sizing: border-box;
    top: 50%;
    transform: translate3d(0,-50%,0);
    display: inline-block;
    width: 85%;
    min-height:15px;
    line-height: normal;
}

#group_list>li>a:before{
    position: absolute;
    content: "";
    display: block;
    height: 44px;
    width: 44px;
    top: 14px;
    left: 8px;
}

#group_list>li>a:before{
    background-image: url(../images/group/group.svg);
}

#group_list>li.active>a:before{
    background-image: url(../images/group/group.svg);
}

/** popon **/
.basic-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0px;
    left: -10000px;
    opacity: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 100;
    height: 100%;
    width: 100%;
}
.basic-dialog.front {
    z-index: 200;
}
.pop_base {
    position: absolute;
    height: 100%;
    width: 100%;
}
.basic-dialog.show {
    left: 0;
    opacity: 1;
    transition: opacity 0.3s ease, left 0s ease 0s;
}
.show-dialog #container {
    opacity: 0.5;
}
.basic-dialog .dialog-main {
    height: auto;
    min-width: 400px;
    position: absolute;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 60px rgba(0,0,0,0.7);
    transform: translate3d(0, 0, 0);
}
.basic-dialog .dialog-main.wide {
    width: 500px;
}
.dialog-main table,
.input_table {
    width: 100%;
}
.input_table.table-fixed {
    table-layout: fixed;
}

.dialog-main > .x-button {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #274FAA;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialog-main > .x-button:after {
    font-size: 1.5em;
    content: '✖';
}

.dialog-main > .dialog-content > .inner-x-button {
    position: absolute;
    top: 49px;
    right: 7px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #274FAA;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialog-main > .dialog-content > .inner-x-button:after {
    font-size: 1.5em;
    content: '✖';
}

.inline-x-button {
    position: absolute;
    display: inline-block;
    top: 16px;
    right: 16px;
    width: 12px;
    height: 12px;
    overflow: hidden;
    z-index: 2;
}
.inline-x-button:hover {
    cursor: pointer;
}
.inline-x-button:hover:before, .inline-x-button:hover:after {
    background: #00cbd8;
}
.inline-x-button:before, .inline-x-button:after {
    height: 2px;
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    background: #000;
}
.inline-x-button:before {
    transform: rotate(45deg);
}
.inline-x-button:after {
    transform: rotate(-45deg);
}

.line {
    width: 100%;
    height: 1px;
    margin: 12px 0;
    background-color: #e0e0e0;
}
.line.thin { margin: 4px 0; }
#pop_content > form.wide {
    width: 500px;
}
.dialog-main table th,
.input_table th {
    padding: 8px;
    text-align: right;
    font-weight: bold;
    font-size: 11px;
    color: #777;
    white-space: nowrap;
}
.input_table th {
    width: 180px;
    vertical-align: middle;
}
.input_table th.v-top {
    vertical-align: top;
}
.input_table.padding_right td {
    padding-right: 60px;
}
.dialog-main table td,
.input_table td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
}
.dialog-main table td input[type=text],
.input_table td input[type=text] {
    height: 20px;
    width: 100%;
    margin: 0;
    border-radius: 3px;
    border: 1px solid #aaa;
    text-indent: 4px;
    box-sizing: border-box;
    vertical-align: middle;
}
.input_table td input[type="password"] {
    border-radius: 3px;
    border: 1px solid #aaa;
}
.dialog-main table td select,
.input_table td select {
    width: 100%;
    margin: 0;
}
td input[type="date"] {
    width: auto !important;
    display: inline !important;
}

.dialog-main table td input[type="file"],
.input_table td input[type="file"] {
    border: none;
}
.dialog-main table td textarea,
.input_table td textarea {
    margin: 0;
    width: 100%;
    height: 100px;
    resize: none;
    border: 1px solid #aaa;
    border-radius: 3px;
    box-sizing: border-box;
}
.table-layout-fixed {
    table-layout: fixed;
}
.input_table td {
    font-size: 1.3em;
    color: #666;
}

.register-menu {
    position: absolute;
    z-index: 101;
    background-color: #fff;
    transition: opacity 0.3s ease, left 0s ease 0.3s;
    box-sizing: border-box;
    width: 200px;
}
.register-menu > #register_menu_input {
    height: 32px;
    line-height: 32px;
    border-radius: 0;
    padding-left: 20px;
}
.register-menu::before {
    font-family: "paicon";
    font-size: 11px;
    line-height: 10px;
    padding: 11px 0 0 8px;
    content: "\e825";
    position: absolute;
    color: #AAAAAA;
}
.register-menu > .register-menu-scroll {
    box-sizing: border-box;
    max-height: 208px;
    padding: 1px 2px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.26);
}
.register-menu > ul > li {
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 2px;
    height: 44px;
    line-height: 44px;
}
.register-menu > ul > li:last-child {
    margin-bottom: 0;
}
.register-menu > ul > li:hover {
    background-color: #f6f6f6;
}
.register-menu > ul > li > .register-list {
    display: inline-block;
    width: 100%;
}
.register-menu > ul > li > .register-list > div:first-child {
    color: #757575;
    font-size: 10px;
    line-height: 15px;
    max-width: 100%;
    padding:0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.register-menu > ul > li > .register-list > div:last-child {
    color: #000000;
    font-size: 13px;
    line-height: 20px;
    max-width: 100%;
    padding:0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.register-menu-btn {
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
    border: 1px solid #AAAAAA;
    color: #777;
    box-sizing: border-box;
    width: 200px;
    height: 20px;
    font-size: 12px;
    border-radius: 3px;
    position: relative;
}
.register-menu-btn.checked {
    border-radius: 3px 3px 0 0;
    border-bottom: 0;
}
.register-menu-btn.selected {
    color: black;
    cursor: auto;
}
.register-menu-btn > span:first-child {
    padding-left: 5px;
    line-height: 18px;
    display: inline-block;
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.register-menu-btn > span:last-child {
    display: none;
}
.register-menu-btn::after {
    content: "";
    float: right;
    width: 18px;
    height: 18px;
    background: no-repeat url(../images/arrow_down.svg);
}
.checked.register-menu-btn::after {
    transform: scale(1, -1);
}
.selected.register-menu-btn::after {
    display: none;
}
.selected.register-menu-btn > span:last-child {
    display: inline-block;
    cursor: pointer;
    float: right;
    height: 18px;
    width: 18px;
}
.selected.register-menu-btn > span:last-child::after {
    content: '';
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    background: no-repeat url(../images/cancel.svg);
}
.select-yourself-btn {
    margin-left: 18px;
    height: 20px;
    user-select: none;
    cursor: pointer;
    color: #274FAA;
    font-size: 11px;
}
.select-yourself-btn:hover {
    text-decoration: underline;
}
.select-yourself-btn.disabled {
    color: #BDBDBD;
    pointer-events: none;
}
.register-menu-wrapper {
    display: flex;
    align-items: center;
}

.basic-dialog .dialog-title {
    height: 44px;
    width: 100%;
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    color: #444;
    box-sizing: border-box;
    background-color: #e8e8e8;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid #cfcfcf;
}
.basic-dialog .dialog-content {
    height: calc(100% - 43px);
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    font-size: 1.3em;
    color: #444;
    line-height: 20px;
}

.dialog-content.can-scroll-y {
    overflow-y: scroll;
    padding-bottom: 0;
}
.dialog-content.can-scroll-y:after {
    content: "";
    display: block;
    height: 24px;
}

.basic-dialog .pop_button_line {
    width: 100%;
}

.button-edit-division {
    margin: 0 10px;
}

.button_line,
.pop_button_line {
    width: 352px;
    margin: 0 auto;
    height: 28px;
    text-align: center;
}

.button_line.o365_button{
    display: table;
    width: auto;
}
.button_line.o365_button>a{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    height: 30px;
}
.button_line.o365_button>button {
    margin-top: 20px;
    height: 30px;
}
.o365_button button {
    width: 155px !important;
}

.o365_image_button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.o365_img {
    height: 25px;
    width: 25px;
    padding-right: 7px;
}

.button_line button,
.pop_button_line button,
.pop_button_line label.normal_button {
    width: 120px;
    margin: 0 8px;
    height: 28px;
}
.pop_button_line button.blue:disabled {
    background-color: #AAA;
}

.pop_tab_radio {
    display: none;
}

.pop_button_line label.normal_button > span {
    line-height: 28px;
}

#tab_wrap {
    position: absolute;
    top: 0px;
    left: 0px;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #ECECEC;
    box-sizing: border-box;
    box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
}
#tab_wrap .tab{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #666;
    background-color: #dfdfdf;
    cursor: pointer;
    color: #274FAA;
}
#tab_wrap .tab+.tab{
    box-shadow: inset 1px 0 0px 0px #ECECEC;
}
#tab_wrap .tab.active,
#tab_wrap .tab.active+.tab{
    box-shadow: none;
}
#tab_wrap .tab.active { background-color: #ffffff; }
.tab_radio{
    display: none;
}

h2{
    position: relative;
    height: 60px;
    width: 100%;
    font-size: 1.5em;
    color: #666;
    letter-spacing: 1px;
    line-height: 72px;
    font-weight: bold;
    border-bottom: 4px solid #e8e8e8;
    box-sizing: border-box;

}

/** map **/
#map_sub_panel{
    position: absolute;
    width: 0px;
    display: table;
    table-layout: fixed;
    height: 100%;
    top: 0;
    left: 220px;
    overflow: visible;
    transition: transform 0.3s ease, left 0.3s ease, width 0s ease 0.3s;
}
.sub_panel_open #map_sub_panel{
    transition: transform 0.3s ease, left 0.3s ease, width 0s ease 0s;
}
.sub_left #map_sub_panel{
    left: 0;
}

#map_history,
#map_member_list{
    height: 100%;
    width: 220px;
    position: absolute;
    left: -10000px;
    top: 0px;
    padding-top: 32px;
    background-color: rgba(255,255,255,1);
    z-index: 1;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    opacity: 0;
    transition: opacity 0.3s ease, left 0s ease 0.3s;
}
.sub_panel_open #map_member_list,
.sub2_panel_open #map_history{
    left: 0px;
    transition: opacity 0.3s ease, left 0s ease 0s;
    opacity: 1;
}
.sub2_panel_open #map_history{
    left: 220px;
}
#map_history h2,
#map_member_list h2{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-indent: 6px;
    border-bottom: 1px solid #ccc;
    color: #666;
    font-size: 1.2em;
}
#map_history h2 div,
#map_member_list h2 div{
    position: absolute;
    right: 0;
    top: 0;
    height: 31px;
    width: 31px;
}
#map_member_list h2 div:last-child{
    right: 31px;
}
#map_history h2 div:before,
#map_history h2 div:after,
#map_member_list h2 div:before,
#map_member_list h2 div:after{
    width: 20px;
    height: 1px;
    background-color: #333;
    position: absolute;
    content: "";
    display: block;
    top: 15px;
    left: 6px;
    transform: rotate(45deg);
}
#map_history h2 div:after,
#map_member_list h2 div:after{
    transform: rotate(-45deg);
}

#map_member_list h2 div:last-child:before,
#map_member_list h2 div:last-child:after{
    width: 12px;
    top: 11px;
    transform: rotate(-45deg);
}
#map_member_list h2 div:last-child:after{
    top: 19px;
    transform: rotate(45deg);
}
.sub_left #map_member_list h2 div:last-child:after{
    transform: rotate(-45deg);
}
.sub_left #map_member_list h2 div:last-child:before{
    transform: rotate(45deg);
}
#map_history li{
    padding: 8px;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;
}
#map_history li div:nth-child(1) {
    height: 17px;
    line-height: 17px;
    font-size: 1.2em;
}
#map_history li div:nth-child(2) {
    height: 20px;
    line-height: 20px;
    color: #274FAA;
    font-size: 1.3em;
}
#map_history li div:nth-child(3) {
    height: 18px;
    line-height: 18px;
    font-size: 1.2em;

}


#map_member_list>ul{
    width: 100%;
    height: 100%;
    overflow-y: auto;

}
#map_member_list>ul>li{
    position: relative;
    min-height: 72px;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
}
#map_member_list>ul section li{
    position: relative;
    font-size: 0px;

}
#map_member_list>ul section li:before{
    position: absolute;
    display: block;
    top: 0px;
    font-family: "paicon";
    font-size: 18px;
    width: 0px;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
}
#map_member_list>ul li.c_naisen:before{
    content: "\e80a";
}
#map_member_list>ul li.c_keitai:before{
    content: "\e81d";
}
#map_member_list>ul li.c_mail:before{
    content: "\e80c";
}
#map_member_list>ul li.c_talk:before{
    content: "\e80d";
}
#map_member_list>ul li.call_map_history:before{
    content: "\e81f";
}
.map_member_radio{
    display: none;
}
.map_member_radio+section{
    height: 64px;
    width: 100%;
    display: none;
}

.map_member_radio+section:before{
    position: absolute;
    height: 71px;
    width: 100%;
    top: 0px;
    background-color: rgba(0,203,216, .1);
    content: "";
    display: block;
    opacity: 0;
    transition: all 0.3s ease;
}
.map_member_radio:checked+section:before{
    opacity: 1;
}

.map_member_radio+section>ul{
    position: absolute;
    display: table;
    table-layout: fixed;
    height: 32px;
    width: 100%;
    bottom: 0;
    border-top: 1px solid #e8e8e8;
}

.map_member_radio+section>ul:first-child{
    bottom: 32px;
}
.map_member_radio+section>ul>li{
    display: table-cell;
    height: 100%;
    line-height: 32px;
    text-align: center;
    border-right: 1px solid #e8e8e8;
    color: #666;
    font-size: 1.1em;
    font-weight: bold;
}
.map_member_radio+section>ul>li:hover{
    text-decoration: underline;
    color: #333;
}

.map_member_radio+section>ul>li:last-child{
    border-right: none;
}
.map_member_radio:checked+section{
    display: block;
}
#map_member_list>ul>li>label{
    position: relative;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    padding-top: 8px;

}
#map_member_list>ul>li>label>div{
    position: relative;
    z-index: 1;
}
#map_member_list>ul>li>label>div:nth-child(1) {
    height: 20px;
    line-height: 20px;
    color: #274FAA;
    font-size: 1.4em;
    text-indent: 8px;
}
#map_member_list>ul>li>label>div:nth-child(2) {
    height: 20px;
    line-height: 20px;
    color: #666;
    font-size: 1.3em;
    text-indent: 8px;
}
#map_member_list>ul>li>label>div:nth-child(3) {
    font-size: 1.2em;
    color: #666;
    text-indent: 8px;
    height: 23px;
}
#map_member_list>ul>li>label>div:nth-child(3)>span{
    font-size: 10px;
    line-height: 16px;
    color: #aaa;
}
#map_member_list>ul>li>button{
    background-color: #274FAA;
    position: absolute;
    right: 8px;
    top: 8px;
    height: 20px;
    z-index: 5;
}

.rename{
    position: relative;
}
.rename:hover .call_rename{
    position: absolute;
    height: 24px;
    width: 24px;
    top: 50%;
    right: 8px;
    cursor: pointer;
    transform: translate(0,-50%);
    background-size: 24px;
}
.rename:hover .call_rename:before{
    display: block;
}
.call_rename:before{
    position: absolute;
    content: "\e806";
    font-size: 24px;
    text-align: center;
    line-height: 24px;
    color: #999;
    font-family: "paicon";
    display: none;
}

.call_rename:hover:before{
    color: #666;
}

/** manage **/
.h_tab{
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 32px;
    z-index: 10;
}
.h_tab.inpop{
    top: 42px;
}
.h_tab~.contactPopBody,
.pop_tab_content{
    padding-top: 32px;
    word-break: break-all;
}
.h_tab>ul{
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    background-color: #C9C9C9;
    overflow: hidden;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.5) inset;
}

.h_tab.inpop>ul{
    box-shadow: 0px 0px 0px rgba(0,0,0,0.5) inset;
}
.h_tab>ul>li{
    position: relative;
    height: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: #666;
    font-weight: bold;
    box-sizing: border-box;
}
.h_tab>ul>li>label,
.h_tab>ul>li>a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit !important;
    cursor: pointer;
    font-size: 11px;
    height: 100%;
    width: 100%;
    border-radius: 0px 0px 6px 6px;
}
.h_tab>ul>li:first-child>label,
.h_tab>ul>li:first-child>a{
    border-radius: 0px 0px 6px 0px;
}
.h_tab>ul>li:last-child>label,
.h_tab>ul>li:last-child>a{
    border-radius: 0px 0px 0px 6px;
}
.h_tab>ul>li>label:hover,
.h_tab>ul>li>a:hover{
    color: #333;
    text-decoration: underline;
}
#pop_tab_radio2:checked~nav li:nth-child(2),
#pop_tab_radio1:checked~nav li:nth-child(1),
.h_tab>ul>li.active{
    z-index: 1;
}
#pop_tab_radio2:checked~nav li:nth-child(2) label,
#pop_tab_radio1:checked~nav li:nth-child(1) label,
.h_tab>ul>li.active>a{
    background-color: #E8E8E8;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.3), 0px -1px 0px rgba(0,0,0,0.2) inset;
}

#pop_tab_radio2:checked~nav li:nth-child(2):after,
#pop_tab_radio1:checked~nav li:nth-child(1):after,
#pop_tab_radio2:checked~nav li:nth-child(2):before,
#pop_tab_radio1:checked~nav li:nth-child(1):before,
.h_tab>ul>li.active:after,
.h_tab>ul>li.active:before{
    position: absolute;
    content: "";
    display: block;
    height: 10px;
    width: 10px;
    border-radius: 100px;
    background-color: transparent;
    top: 0px;
    right: -10px;
    box-shadow: -5px 0px 0px #e8e8e8, 1px 0px 1px rgba(0,0,0,0.03) inset;
    transform: rotate(45deg);
}

#pop_tab_radio2:checked~nav li:nth-child(2):before,
#pop_tab_radio1:checked~nav li:nth-child(1):before,
.h_tab>ul>li.active:before{
    left: -10px;
    right: auto;
    box-shadow: 5px 0px 0px #e8e8e8, -1px 0px 1px rgba(0,0,0,0.03) inset;
    transform: rotate(-45deg);
}
.h_tab>ul>li:first_child:before{
    display: none;
}
.h_tab>ul>li:last_child:after{
    display: none;
}
.pop_tab_content{
    display: none;
}
#pop_tab_radio2:checked~.contactPopBody:nth-of-type(2),
#pop_tab_radio1:checked~.contactPopBody:nth-of-type(1){
    display: block;
}
#pop_tab_radio1:checked~.contactPopBody:nth-of-type(2),
#pop_tab_radio2:checked~.contactPopBody:nth-of-type(1){
    display: none;
}

.header_button_wrap{
    width: 300px;
    text-align: right;
    padding: 0 8px;
}
.header_button_wrap>button{
    margin: 0 8px;
    display: inline-block;
}

.info_list_title{
    color: #274FAA;
    padding-left: 16px;
}
.info_list_title>span{
    font-size: 1.4em;
    font-weight: bold;
    display: inline-block;
    height: 24px;
    line-height: 24px;
}
.info_list_title>span:last-child{
    color: #666;
    font-weight: normal;
    font-size: 1.1em;
    height: 16px;
    line-height: 16px;
}

.toggle{
    position: relative;
    height: 24px;
    width: 72px;
    display: inline-block;
    font-size: 10px;
}
.toggle:after{
    content: "";
    display: block;
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin-top: -10px;
    margin-left: -10px;
    border: 10px solid #fff;
    border-radius: 100px;
}
.toggle>input{
    display: none;
}
.toggle>input:checked+div:before,
.toggle>input:checked+div>ul>li{
    transform: translate(0px, 0);
}
.toggle:has(input:disabled) {
    opacity:0.38;
}
.toggle ul{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    overflow: hidden;
}
.toggle ul>li{
    transition: all 0.3s ease;
    position: absolute;
    width: 60px;
    height: 100%;
    display: table-cell;
    background-color: #00CBD8;
    color: #Fff;
    font-weight: bold;
    font-size: 1.3em;
    text-align: center;
    line-height: 24px;
    transform: translate(-48px, 0);

}
.toggle ul>li:last-child{
    left: 60px;
    background-color: #E5584C;
}
.toggle div:before{
    position: absolute;
    display: block;
    height: 24px;
    width: 24px;
    background-color: #aaa;
    border-radius: 100px;
    transition: all 0.3s ease;
    left: 48px;
    top: 0px;
    content: "";
    z-index: 9;
    margin-left: -2px;
    margin-top: -2px;
    border: 2px solid #fff;
    transform: translate(-48px, 0);
}

.toggle-tooltip-wrapper {
    display: flex;
    align-items: center;
}

.toggle-tooltip-wrapper > .toggle  {
    margin-right: 10px;
    flex: none;
}

.groupicon{
    width: 60px;
    background-repeat: no-repeat;
    background-position: center;

}
ul li .groupicon{
    background-image: url(../images/group/group.svg);
}

.external-contact-edit {
    display: flex;
    flex-direction: row;
}
.external-contact-edit > div,
.external-contact-edit > section {
    box-sizing: border-box;
    flex: 1 0 50%;
    max-width: 50%; /* IE バグ対応 */
}
.external-contact-edit > div {
    height: 100%;
    border-right: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.external-contact-edit > div > img {
    max-width: 90%;
    max-height: 90%;
    flex: 0 0 auto; /* IE バグ対応 https://stackoverflow.com/a/31856947 */
}

.notification>div{
    position: fixed;
    top: 20px;
    width: 360px;
    height: 80px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.9);
    box-shadow: 0px 2px 28px rgba(0,0,0,1);
    z-index: 1000;
    color: #fff;
    padding-left: 76px;
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    text-indent: 12px;
    font-size: 12px;
    transition: all 0.8s ease;
    transform: translate3d(440px,0px,0px);
}
.notification>div.active{
    transform: translate3d(0px,0px,0px);
}

.notification>div:before{
    content: "\e809";
    height: 100%;
    width: 76px;
    text-align: center;
    font-size: 32px;
    line-height: 76px;
    display: block;
    position: absolute;
    left: 0;
    font-family: "paicon";
    text-indent: 0px;
    background-color: rgba(55,55,55,0.9);
    color: #eee;
}

.notification>div.call:before{
    content: "\e80a";
    color: #E5584C;
}

.notification_content{
    display: table-cell;
    height: 76px;
    width: 228px;
    vertical-align: middle;
    text-indent: 0px;
    padding-left: 16px;
}
.notification_content>div{
    display: inline-block;
    height: 20px;
    line-height: 21px;
    text-align: left;
    width: 100%;
    color: rgba(255, 255, 255, .75);
}
.notification_title{
    font-size: 13px;
    color: rgba(255, 255, 255, 1) !important;
    font-weight: bold;
}
.notification_date{
    font-size: 11px;
}
.notification_message{
    font-size: 16px;
    color: rgba(255, 255, 255, 1) !important;
}
.notification_closer{
    position: absolute;
    right: 2px;
    top: 2px;
    height: 25px;
    width: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 100px;
}
.notification_closer:hover{
    background-color: rgba(55,55,55,0.9);
}
.notification_closer:after,
.notification_closer:before{
    position: absolute;
    content: "";
    display: block;
    height: 1px;
    width: 15px;
    background-color: #fff;
    left: 5px;
    top: 12px;
    transform: rotate(45deg);
}

.notification_closer:before{
    transform: rotate(-45deg);
}

.magnet {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 200px;
    height: 72px;
    padding: 4px;
    font-size: 20px;
    cursor: pointer;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
    border: 8px solid transparent;
    font-weight: bold;
    transition: all 0.3s ease;
}
.list_ikisaki {
    /* width: 96px !important; */
    margin: 0 auto;
    border: 3px solid transparent;
    background-color: #fff;
    background-position: center;
    background-size: auto 40px;
    background-repeat: no-repeat;
}
/** color **
    lightblue    #00CBD8        0,203,216
    lightblue_d    #00aBb8        0,203,216
    blue        #274FAA
    green         #00DF23
    red            #E5584C
    yellow        #FFBE06

**/
.list_ikisaki[kind="shukkin"] {
    border-color: #00CBD8;
    min-height: 50px;
}
.list_ikisaki[kind="taikin"] {
    border-color: #aaa;
    min-height: 50px;
}
.list_ikisaki[kind="kaigi"] {
    border-color: #E5584C;
    min-height: 50px;
}
.list_ikisaki[kind="kyukei"] {
    border-color: #FFBE06;
    min-height: 50px;
}
.list_ikisaki[kind="own"] {
    border-color: #eee;
    position: relative;
    height: none;
}

.magnet:hover {
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.6);
}
.magnet.own {
    line-height: 47px;
    position: relative;
}
.magnet-edit {
    position: absolute;
    display: none;
    height: 32px;
    width: 32px;
    right: 4px;
    top: 12px;
    background: #EEE;
    border-radius: 50%;
}
.magnet-edit:after {
    content: "\e806";
    display: block;
    height: 100%;
    width: 100%;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #666;
    font-family: "paicon";
}

#user_dest_dialog .dialog-main {
    height: 608px;
    width: 712px;
    min-width: 400px;
    position: absolute;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 60px rgba(0,0,0,0.7);
    transform: translate3d(0, 0, 0);
}

#user_dest_dialog .dialog-title {
    height: 48px;
    width: 100%;
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #444;
    box-sizing: border-box;
    background-color: #e8e8e8;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid #cfcfcf;
}

#user_dest_dialog .dialog-content {
    height: 560px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 1.3em;
    color: #444;
    line-height: 20px;
}

#user_dest_dialog .magnet-table {
    display: flex
}

#user_dest_dialog table .magnet.own > input {
    display: none;
}
#user_dest_dialog table .magnet.own.editing-custom-dest > input {
    display: inline;
    width: 100%;
    font-size: 12px;
    text-align: left;
}
#user_dest_dialog table .magnet.own > .user-dest-name {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    justify-content: center;
    align-items: center;
    word-break: break-word;
}
#user_dest_dialog table .magnet.own.editing-custom-dest > .user-dest-name {
    display: none;
}
#user_dest_dialog table .magnet.own:hover > .magnet-edit {
    display: block;
}
#user_dest_dialog table .magnet.own.editing-custom-dest:hover > .magnet-edit {
    display: none;
}
#user_dest_dialog .other-destination {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 8px 0;
}
#user_dest_dialog .other-destination-label {
    color: #777;
    font-weight: bold;
    font-size: 12px;
    padding: 0 0 2px 0;
}
#user_dest_dialog .other-destination-input > input {
    box-sizing: border-box;
    width: 100%;
    max-width: 464px;
    min-width: 408px;
    height: 40px;
    padding: 1px 2px;
    border: 1px solid #aaa;
    border-radius: 8px;
    font-size: 14px;
    text-indent: 4px;
}
#user_dest_dialog .other-destination-input > input:lang(ja) {
    width: 100em;
}
#user_dest_dialog .other-destination-button {
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    width: auto;
    max-width: 96px;
    min-width: 76px;
    height: 40px;
    border-radius: 12px;
    font-size: 14px;
    padding: 0 24px 0 24px;
}

.other-destination-button-enable {
    color: rgba(255, 255, 255, 1) !important;
    background-color: rgba(0, 98, 158, 1) !important;
}

.other-destination-button-disable {
    color: rgba(25, 28, 29, 1) !important;
    background-color: rgba(20, 20, 20, 0.12) !important;
    opacity: 38%;
    cursor: default !important;
}

#user_dest_dialog .unselect {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 12px 26px;
    font-size: 14px;
    height: 12px;
}

#user_dest_dialog .unselect-button {
    display: flex;
    cursor: pointer;
}

#user_dest_dialog .unselect-icon {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url(/images/cancel.svg);
    background-color: #274faa;
}

#user_dest_dialog .unselect-text {
    display: flex;
    align-items: center;
    height: 18px;
    color: #274faa;
}

.prof_image {
    display: block;
    width: auto;
    height: auto;
}
.preview-container {
    height: 100px;
    width: 100px;
}

/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.preview-pane,
#preview-pane {
  /*display: none;*/
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
.preview-container {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
input[type="file"]{
    vertical-align: middle !important;
    text-indent: 0px !important;
    width: 100%;
}




@keyframes anime1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        background-color: #fe66cb;
    }
    50% {
        background-color: #fef61a;
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        background-color: #fe66cb;
    }
}
@-webkit-keyframes anime1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        background-color: #fe66cb;
    }
    50% {
        background-color: #fef61a;
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        background-color: #fe66cb;
    }
}
@-ms-keyframes anime1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        background-color: #fe66cb;
    }
    50% {
        background-color: #fef61a;
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        background-color: #fe66cb;
    }
}
@-moz-keyframes anime1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        background-color: #fe66cb;
    }
    50% {
        background-color: #fef61a;
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        background-color: #fe66cb;
    }
}
@-o-keyframes anime1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        background-color: #fe66cb;
    }
    50% {
        background-color: #fef61a;
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        background-color: #fe66cb;
    }
}

.datefield {
    display: inline !important;
    width: 100px !important;
}

/* talk */
.normal_list{
    width: 100%;
}
.normal_list>li{
    position: relative;
    height: 44px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    font-size: 1.3em;
    color: #333;
    font-weight: bold;
    line-height: 44px;
}
.normal_list>li:after{
    content: ">";
    text-align: center;
    text-indent: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 32px;
    color: #999;
}

.talk_list{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}
.normal_list.talk_list>li{
    width:100%;
    height: 50px;
    font-size: 1.4em;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}
.normal_list.talk_list>li>a{
    height: 100%;
    width: 100%;
    display: flex;
    padding-left: 8px;
    align-items: center;
    box-sizing: border-box;
}
.normal_list.talk_list>li>a>div:nth-child(2){
    flex: auto;
}
.talkroom_info_wrap{
    flex-direction: column;
    display: flex;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
    justify-content: center;
}
.talkroom_info{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.talkroom_info .name{
    text-align: left;

}

.normal_list.talk_list>li.active{
    background-color: #00CBD8 !important;
}
.normal_list.talk_list>li:after{
    display: none;
}
.normal_list.talk_list>li>a{
    height: 100%;
    width: 100%;
    color: #000;
    text-decoration:none;
}
.normal_list.talk_list>li>a .thumb{
    position: relative;
    height: 32px;
    min-width: 32px;
    background-color: #000;
    border-radius: 100px;
}
.normal_list.talk_list>li>a .gthumb{
    box-sizing: border-box;
    border: 2px solid #aaa;
    padding: 2px;
    background-color: #fff;
}
.normal_list.talk_list>li>a .thumb>img{
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 100px;
}

.normal_list.talk_list>li>a .content{
    bottom: 6px;
    color: #999;
    line-height: 12px;
    font-size: 10px;
    font-weight: normal;
    text-indent: 0px;
}
.normal_list.talk_list>li.active>a .content{
    color: #fff !important;
}

.normal_list.talk_list>li>a .time{
    color: #aaa;
    line-height: normal;
    font-size: 10px;
    padding-left: 8px;
    font-weight: normal;
}
.normal_list.talk_list>li.active>a .time{
    color: #fff !important;
}

.normal_list.talk_list>li>a .checked{
    color: #fff;
    line-height: normal;
    font-size: 10px;
    padding: 2px 8px;
    background-color: #E5584C;
    border-radius: 100px;
    min-height: 19px;
    box-sizing: border-box;
    position: relative;
    top: -2px;
}
.normal_list.talk_list>li.active>a .checked{
    color: #fff !important;
}
.list_talkroom_title{
    padding-top: 3px;
}

.normal_list.talk_list>li>a .name{
    flex: auto;
    line-height: normal;
    height: auto;
}

.list_data_overflow,
#list_data_overflow{
    width: 145px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #555;
    flex: auto;
    line-height: normal;
}
.thread_name{
    flex: auto;
}

.message_flie_sending,
.talk{
    position: relative;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 52px;
    box-sizing: border-box;
}
.talk .thumb{
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    left: 10px;
}
.talk .thumb>a>img{
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 100px;
}

.talk .name{
    margin-bottom: 2px;
    font-size: 10px;
    color: #888;
}
.message_flie_sending .content,
.talk .content{
    position: relative;
    width: auto;
    display: inline-block;
    height: auto;
    max-width: 70%;
}
.message_flie_sending .content>div,
.talk .content>div{
    background-color: #E9EDEF;
    border-radius: 8px;
    padding: 8px 16px;
    position: relative;
}
.talk .content>div.messageFile>div{
    cursor: pointer;
    color: #0000ee;
    text-decoration: underline;
}
.talk .content:before{
    content: "";
    border-bottom: 7px solid #E9EDEF;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    border-radius: 100px;
    margin-left: -8px;
    margin-top: -12px;
    position: absolute;
}
.talk .content .checked{
    position: absolute;
    right: -36px;
    width: 32px;
    bottom: 0px;
    color: #666;
    font-size: 10px;
    white-space: nowrap;
    text-align: right;
}

.me_talk{
    padding-left: 0px;
    text-align: right;
}
.me_talk .content{
    text-align: left;
    right: 12px;
}
.me_talk .content>div{
    background-color: #BAF99B;
}
.me_talk .content:before{
    left: auto;
    right: 0px;
    margin-right: -8px;
    border-bottom: 7px solid #BAF99B;
}
.me_talk .content .checked{
    right: auto;
    left: -6px;
    width: auto;
    display: block;
    bottom: 16px;
    font-size: 10px;
    transform: translate(-100%, 0);
    color: #777;
}
.talk_content{
    position: relative;
}
.talk .time{
    position: absolute;
    bottom: 2px;
    right: -6px;
    font-size: 10px;
    transform: translate(100%, 0);
    color: #777;
}
.me_talk .time{
    left: -6px;
    right: auto;
    transform: translate(-100%, 0);
}


#load_list{
    position: relative;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
#member_list_opener{
    display: none;
}
#member_list_opener:checked~#load_list{
    padding-right: 200px;
}

.member_list_header{
    position: absolute;
    top: 0;
    height: 51px;
    width: 100%;
    background-color: #444;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    line-height: 51px;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid #555;
    z-index: 3;
}
.member_list_closer{
    position: absolute;
    right: 0px;
    top: 0%;
    height: 100%;
    width: 44px;
    border-radius: 100px;
}
.member_list_closer:before{
    width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #E5584C;
    top: 50%;
    margin-top: -9px;
    left: 50%;
    margin-left: -9px;
    position: absolute;
    content: "";
    display: block;
}
.member_list_closer:after{
    content: "\e86c";
    position: absolute;
    display: block;
    height: 18px;
    line-height: 18px;
    width: 18px;
    text-align: center;
    top: 50%;
    margin-top: -9px;
    left: 50%;
    margin-left: -9px;
    color: #fff;
    font-family: "paicon";
}

.member_list_closer:before,
.member_list_closer:after{
    pointer-events: none;
}
#talk_subscriptions{
    position: absolute;
    background-color: #444;
    color: #555;
    height: 100%;
    width: 200px;
    vertical-align: top;
    top: 0;
    right: 0;
}
.member_list_wrap{
    position: relative;
    padding-top: 51px;
    height: 100%;
    padding-bottom: 45px;
    box-sizing: border-box;
}
#talk_subscriptions ul{
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
#talk_subscriptions ul li{
    position: relative;
    height: 60px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: auto;
    box-sizing: border-box;
    display: block;
    border-bottom: 1px solid #555;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 12px;
    word-break: break-all;
}

#talk_subscriptions ul li>span>a>img{
    height: 32px;
    width: 32px;
    border-radius: 100px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.3);
    margin-right: 12px;
}
.talk_subscriptions_user_data{
    width: 95px;
    display: flex;
    flex-direction: column;
}
.talk_subscriptions_user_data span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.talk_subscriptions_user_data span:nth-child(2){
    font-size: 12px;
    font-weight: bold;
    color: rgba(255,255,255,0.9);
}
.talk_subscriptions_user_data span:nth-child(1){
    color: rgba(255,255,255,0.7);
    margin: 4px 0;
}

.talk_subscriptions_user_data span:nth-child(3){
    color: rgba(255,255,255,0.7);
    margin: 4px 0;
}

.talk-member-deleter {
    position: absolute;
    right: 12px;
    display: none;
    text-decoration: none;
    cursor: pointer;
}
.talk-member-deleter:after {
    content: "\e82d";
    font-family: "paicon";
    color: #E5584C !important;
    font-size: 16px;

}
li:hover > .talk-member-deleter {
    display: block;
}

.add_member{
    height: 44px;
    border-top: 1px solid #555;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 44px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}
.add_member:before{
    display: block;
    line-height: 44px;
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    width: 60px;
    text-align: center;
    font-family: "paicon";
    font-size: 18px;
    content: "\e845";
    color: rgba(255,255,255,0.9);
}
.header_button_space{
    width: 140px;
    display: flex;
}
.header_button_space.right{
    justify-content: flex-end;
}
.detail_talk_wrap{
    position: relative;
    height: 100%;
    font-size: 1.3em;
    padding-top: 51px;
    padding-bottom: 76px;
    word-break:break-all;
    box-sizing: border-box;
    vertical-align: top;
    z-index: 5;
    background-color: #fff;
    overflow: hidden;
}
.detail_talk_inner{
    height: 100%;
}

.detail_talk_list{
    height: 100%;
    overflow-y: scroll;
    padding: 0 20px;
}
.detail_talk_list ul{
    margin: 0 auto;
    padding-bottom: 12px;
}

.detail_talk_data {
    height: 100%;
    width: 100%;
}

.detail_talk_footer{
    position: absolute;
    height: 77px;
    width: 100%;
    bottom: 0px;
    left: 0;
    background-color: #f5f5f5;
}

.detail_talk_footer > div {
    position: relative;
    border-top: 1px solid #e0e0e0;
    border-radius: 0px;
    height: auto;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.day{
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}
.day span{
    background-color: #f6f6f6;
    color: #aaa;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 100px;
    font-size: 10px;
}
.talk_memo{
    height:100%;
    width:100%;
    position: relative;
    margin: 0;
    display: block;
}

.talk_submit{
    margin-left: 12px;
    width:80px;
}

.talk_file{
    display: block;
    width:40px;
    max-width:40px;
    top: 0px;
    text-align:center;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 12px;
}

.talk_file:before{
    content: "\e889";
    font-family: "paicon";
    font-size: 30px;
    width: 100%;
    color: #666;
}

.talk_memo>textarea{
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 4px 6px;
    height: 52px;
    width:100%;
    overflow:hidden;
    resize: none;
    bottom: 0px;
    display: block;
    margin: 0;
    box-sizing: border-box;
}

.talk_submit>input{
    height:34px;
    width:76px;
    font-size: 1.1em;
}
.add-member-window-header,
.detail_talk_title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 51px;
    font-size: 1.2em;
    text-align: center;
    overflow: hidden;
    letter-spacing: 0px;
    padding: 0 8px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 0px 0px rgba(255,255,255,0.2) inset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.talk_header_buttons{
    height: 28px;
    width: auto;
    margin: 0 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1),
                0 1px 2px 0px rgba(0,0,0,0.1),
                0 1px rgba(255,255,255,0.3) inset;
    background-color: #f8f8f8;
    align-items: center;
    display: flex;
    cursor: pointer;
    border-radius: 1px;
    font-size: 12px;
    color: #666;
}
.talk_header_buttons.with_str{
    padding-right: 8px;
}
.talk_header_buttons:before{
    content: "";
    display: block;
    font-family: "paicon";
    color: #777;
    font-size: 16px;
    width: 28px;
    text-align: center;
    transition: all 0.3s ease;
}
.talk_header_buttons:hover:before{
    color: #00CBD8;
}
.delete_talk:before{
    content: "\e865";
}
.delete_talk:hover:before{
    color: #E5584C;
}
.favorite_talk:before{
    content: "\e839";
}
.favorite_talk:hover:before{
    color: #FFBE06;
}
.member_list_opener:before{
    content: "\e847";
}
#member_list_opener:checked~#load_list .member_list_opener{
    background-color: #e0e0e0;
}
#member_list_opener:checked~#load_list .member_list_opener:before{
    color: #00CBD8;
}


.talk_user_list{
    top: 0px;
    width: 100%;
    height: 100%;
}
.normal_list.talk_user_list>li{
    width:100%;
    height: 60px;
    line-height: 36px;
    text-indent: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.talk_file_list{
    top: 0px;
    width: 100%;
    height: 100%;
}
.normal_list.talk_file_list>li{
    width:100%;
    height: 30px;
    line-height: 30px;
    text-indent: 26px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.normal_list.talk_file_list>li>div.file_link{
    color: #fff;
}

.normal_list.talk_file_list>li>div.file_link>div.name{
    color: #fff;
    text-indent: 10px;
    width: 85%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    cursor: pointer
}

.normal_list.talk_file_list>li>div.file_link>div.name:before{
    content: "・";
}

.normal_list.talk_file_list>li>div.delete{
    position: absolute;
    color: #aaa;
    bottom: 7px;
    right: 15px;
    line-height: normal;
    font-size: 10px;
    text-indent: 0px;
}
.normal_list.talk_file_list>li>.delete>div{
    cursor: pointer;
}

.normal_list.talk_user_list>li:after,
.normal_list.talk_file_list>li:after{
    display: none;
}
.normal_list.talk_user_list>li>.image{
    position: absolute;
    height: 42px;
    width: 42px;
    top: 8px;
    left: 8px;
    background-color: #000;
}
.normal_list.talk_user_list>li>.image>img{
    height: 100%;
    width: 100%;
    position: absolute;
    left:0px;
}

.normal_list.talk_user_list>li>.user{
    position: absolute;
    bottom: 11px;
    color: #000;
    line-height: 18px;
    font-size: 11px;
    padding-left: 56px;
    padding-right:50px;
    text-indent: 0px;
}

.normal_list.talk_user_list>li>.user>div{
    width: 60px;
    height: 18px;
    background-color:#ff0000;
    border-radius: 5px;
    text-align: center;
    box-shadow: 1px 1px rgba(0,0,0,0.6);
}

.normal_list.talk_user_list>li>.user>div.member{
    background-color:#ffffff;
    color:#000000;
}

.normal_list.talk_user_list>li>.user>div.creater{
    background-color:#ff0000;
    color:#ffffff;
}

.normal_list.talk_user_list>li>.delete{
    position: absolute;
    color: #aaa;
    bottom: 11px;
    right: 15px;
    line-height: normal;
    font-size: 10px;
    text-indent: 0px;
}
.normal_list.talk_user_list>li>.delete>div{
    cursor: pointer;
}

.normal_list.talk_user_list>li>.name{
    height: 100%;
    color: #eee;
}

.multiline {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.break-word {
    word-wrap : break-word;
    word-break: break-word;
    overflow-wrap : break-word;
    width: 100%;
}
/* 親がflexのとき旧edgeで発生するバグ対策 */
.flex-break-word {
    word-wrap : break-word;
    word-break: break-word;
    overflow-wrap : break-word;
    width: 100%;
    min-width: 0;
}
.error {
    color: red;
}

.groupThumb{
    text-align: center;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    text-indent: 0;
    line-height: 25px;
    background-color: #777;
    color: #fff;
}

.messageFile img{
    max-width: 100%;
}

.content_left > div.department_list{
    overflow-y: scroll;
    height: 100%;
}

.preload{
    display: none;
}

.preload .preLoadHide{
    display: none !important;
}

.loading .loader_wrap{
    display: block !important;
}
.loader_wrap{
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    width: 100%;
}
.loader_inner{
    position: absolute;
    height: auto;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loader {
    color: #dcdcdc;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.loader:before{
    position: absolute;
    height: 30px;
    width: 30px;
    border-radius: 100px;
    margin-top: -15px;
    margin-left: -15px;
    background-color: rgba(255,255,255,0.3);
    top: 50%;
    left: 50%;
    content: "";
    display: block;
    box-shadow: 0 0 100px 1px rgba(255,255,255,1),
                 0 0 100px 1px rgba(255,255,255,1),
                 0 0 100px 1px rgba(255,255,255,1);
}
.loader:after{
    position: relative;
    content: "\e801";
    font-size: 70px;
    font-family: "paicon2";
}

.loading .loader{
    animation: round 2s infinite linear;
}
@keyframes round {
    0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}
#vanishingPop{
    position: fixed;
    bottom: 24px;
    left: -100000px;
    opacity: 0;
    min-height: 48px;
    border-radius: 4px;
    width: 344px;
    padding: 16px;
    transform: translate(-50%, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #666;
    box-sizing: border-box;
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
    pointer-events: none;
    transition: opacity 0.3s ease, left 0s ease 0.3s;
    z-index: 10000;
}
#vanishingContent{
    display: inline-block;
    font-size: 11px;
    color: #fff;
}
#vanishingPop.visible{
    left: calc(50% + 78px);
    opacity: 0.9;
    transition: opacity 0.3s ease, left 0s ease 0s;
}

.messageChoiceTab{
    position: absolute;
    font-weight: bold;
    width: 100%;
    height: 160px;
    line-height: 148px;
    font-size: 15px;
    color: #888;
    text-align: center;
    overflow: hidden;
}
.messageChoiceTab:before{
    content: "\e820";
    position: absolute;
    display: block;
    font-family: "paicon";
    text-align: center;
    width: 100%;
    top: 36px;
    height: 20px;
    font-size: 24px;
    line-height: 0;
}

span.validation-error {
    display: inline-block;
    border: 2px solid red;
    background-color: #ffdddd;
    padding: 1px;
    font-size: 11px;
    line-height: 11px;
}

.anchor {
    color: blue;
    text-decoration: underline solid blue;
    cursor: pointer;
}

.under-lined-title {
    font-size: 18px;
    padding: 4px;
    border-bottom: 2px solid #eeeeee;
}

.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.text-ellipsis-child > * {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.text-bold {
    font-weight: bold;
}

.azure_server_settings-wrapper {
    margin-top: 20px;
    margin-bottom: 30px;
}

.azure_server_settings-wrapper .input_table td input[type="password"] {
    width: calc(100% - 2px)!important;
}
.azure_server_settings-wrapper .button-wrapper {
    text-align: center;
    padding-top: 5px;
}

/*プレースホルダの色がブラウザによって見え方が変わるため、別々の色を指定*/
::-webkit-input-placeholder {
    color: #BDBDBD;
}

::-moz-placeholder {
    color: #848484;
}

:-ms-input-placeholder {
    color: #BDBDBD;
}

.division-title-pop {
    height: 100% !important;
    line-height: 30px !important;
    padding-left: 1%;
    padding-right: 1%;
}

.no-data-column {
    display: flex;
}
.no-data-column > li {
    padding-left: 10px;
    color: #274FAA;
    font-size: 1.55em;
}

.stretch-image-container {
    width: 100%;
    text-align: center;
}

.stretch-image-container > img {
    height: auto;
    max-width: 100%;
}

.banner-container {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

.banner-container img {
    cursor: pointer;
}

.banner-container > .inline-x-button:hover:before,
.banner-container > .inline-x-button:hover:after {
    background: #fff;
}

.trial {
    background-color: #BBB;
    line-height: 2em;
    width: 100%;
    font-size: 1.5em;
    text-align: center;
}

.trial a {
    text-decoration: underline;
    cursor: pointer;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'takibi' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-management:before {
  content: "\e900";
  color: #666;
}
.icon-search:before {
  content: "\e901";
  color: #666;
}
.icon-location:before {
  content: "\e902";
  color: #666;
}
.icon-history:before {
  content: "\e903";
  color: #666;
}
.icon-office:before {
  content: "\e904";
  color: #666;
}
.icon-home:before {
  content: "\e905";
  color: #666;
}
.icon-chat:before {
  content: "\e906";
  color: #666;
}
.icon-company:before {
  content: "\e907";
  color: #666;
}
.icon-group:before {
  content: "\e908";
  color: #666;
}
.icon-outside:before {
  content: "\e909";
  color: #666;
}
.icon-settings:before {
  content: "\e90a";
  color: #666;
}

.icon-attach-file::before {
    background: url("../images/ic_attach_file.png") no-repeat;
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: "";
}

.icon-attach-img::before {
    background: url("../images/ic_attach_img.png") no-repeat;
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: "";
}

.icon-contact-share::before {
    background: url("../images/ic_external_contact.png") no-repeat;
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: "";
}

.icon-document-download::before {
    background: url("../images/ic_document_download.png") no-repeat;
    background-size: 30px 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    content: "";
}

.required-mark::after {
  content: "＊";
  color: #CC0000;
}

.import-result-link {
    padding: 8px;
    text-align: right;
    font-weight: bold;
    font-size: 11px;
    width: 120px;
}

.activate-mail-result-link {
    padding: 8px;
    font-size: 12px;
    color: #274FAA;
}