@charset "UTF-8";

/* block
============================================================================= */
/***************************************
    login
****************************************/
.bl_login {
    background-color: #fff;
    border-radius: 5px;
    padding: 50px 15% 30px;
    margin-bottom: 30px;
}

.bl_login_logo {
    width: 150px;
    margin: auto;
    margin-bottom: 20px;
}

.bl_login_logo img {
    width: 100%;
    height: auto;
}

.bl_login_input {
    min-height: 60px;
    margin-bottom: 15px;
}

.bl_login_input>.el_error_txt {
    margin-top: 4px;
}

.bl_togglePassword {
    position: relative;
}

.bl_login_txt {
    text-align: center;
}

/***************************************
    header
****************************************/
.bl_headerUtils {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bl_headerUtils_logo {
    width: 102px;
    height: 30px;
}

.bl_headerNav_link {
    padding: 1em;
    font-size: 16px;
}

.bl_logout {
    background-color: #ea5c6f;
}

/***************************************
    footer
****************************************/
.bl_footerUtils {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.bl_footerUtils_logo {
    width: 130px;
    height: 40px;
}

.bl_footerUtils_right {
    color: #fff;
    display: flex;
    flex-direction: column;
}

.bl_footerNav {
    display: flex;
}

.bl_footerNav_item+li {
    position: relative;
}

.bl_footerNav_link {
    padding: 1em;
    color: #fff;
}

/***************************************
    main
****************************************/
/*
    共通
---------------------------------*/
.bl_accountName {
    padding: 20px;
    text-align: right;
    margin: auto;
    max-width: 1080px;
}

.bl_contBoxUnit {
    display: flex;
}

.bl_contBox {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
}

/*.bl_contBox:not(:last-of-type) {
    margin-bottom: 30px;
}*/
.bl_contBox.bl_contBox__pink {
    background-color: #fdf7f8;
}

.bl_vertPosts {
    margin-bottom: 30px;
}

.bl_vertPosts_item:not(:last-child) {
    margin-bottom: 30px;
}

.bl_vertPosts_item>a {
    display: block;
}

.bl_vertPosts_ttl {
    font-weight: bold;
    line-height: 1.85;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-height: 26px;
    /* IE対応 */
}

.bl_link {
    color: #ea5c6f;
    /*display: inline-block;*/
}

.bl_link:hover,
.bl_link:focus {
    opacity: 0.6;
}

.bl_pager {
    display: flex;
    overflow-x: auto;
}

.bl_pager_inner {
    display: flex;
    margin-left: auto;
}

.bl_pager_inner>*:last-child {
    margin-right: 0;
}

.bl_pager_inner>li {
    margin-right: 15px;
}

.bl_pager_link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fdf7f8;
    border: 1px solid #e6e3dd;
    border-radius: 50vh;
    text-decoration: none;
    transition: 0.25s;
}

.bl_pager_link:focus,
.bl_pager_link:hover {
    background-color: #ea5c6f;
    border: 1px solid #ea5c6f;
    color: #fff;
    opacity: 0.75;
}

.bl_pager_link.is_active {
    background-color: #ea5c6f;
    border: 1px solid #ea5c6f;
    color: #fff;
    pointer-events: none;
}

.bl_txt {
    line-height: 1.85;
}

/* ボタン横並び */
.bl_horizBtnList {
    display: flex;
    justify-content: center;
}

.bl_horizBtnList>*:last-child {
    margin-right: 0;
}

.bl_horizBtnList>li {
    flex: 1 1 0;
    /* max-width: 110px; */
    margin-right: 20px;
}

.bl_horizBtnList .el_btn {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 吹き出し */
.bl_balloon::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
}

.bl_balloon::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bl_balloon>* {
    position: relative;
    z-index: 3;
}

.bl_balloon,
.bl_balloon::after {
    border-radius: 15px;
}

.bl_balloon,
.bl_balloon::before {
    -webkit-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.2);
}

.bl_balloon,
.bl_balloon::before,
.bl_balloon::after {
    background: #fff;
}

/* 下線付き記事 */
.bl_articleList li {
    position: relative;
}

.bl_articleList li:not(:last-child) {
    border-bottom: 1px solid #e6e3dd;
}

.bl_articleList li>.el_btn {
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 1;
}

/* .bl_article {
  padding: 20px 0;
} */

.bl_articleList li {
    padding: 20px 0;
}

.bl_articleList li:first-child {
    padding-top: 0;
}

.bl_articleList li:last-child {
    padding-bottom: 0;
}

.bl_articleList li a {
    display: block;
}

.bl_article>*:last-child {
    margin-bottom: 0;
}

.bl_article_label {
    margin-bottom: 10px;
}

.bl_article_utils {
    display: flex;
    justify-content: space-between;
}

.bl_article_ttl {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
}

.bl_article_txt {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 52px;
    /* IE対応 */
}

/* 検索 */
.bl_search {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: auto;
    margin-bottom: 2em;
}

.bl_search_item:not(:last-child) {
    margin-bottom: 1.5em;
}

.bl_search_item>.bl_search_label {
    display: block;
    margin-bottom: 0.5em;
    min-width: 140px;
}

.bl_search_item>.bl_checkBox {
    line-height: 33px;
}

.bl_search_item.bl_search_item__fx {
    display: flex;
    flex-wrap: wrap;
}

/* コメント編集削除 */
.bl_editMenu {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.bl_editMenu>li a {
    position: relative;
}

.bl_editMenu>li:not(:last-child) {
    margin-right: 20px;
}

/*
    お知らせ一覧
---------------------------------*/
.bl_mediaList li:not(:last-child) {
    border-bottom: 1px solid #e6e3dd;
}

.bl_media {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.bl_mediaList li a {
    display: block;
}

/*.bl_media_imgWrapper {
    width: 20%;
}
.bl_media_imgWrapper > img {
    width: 100%;
}*/
.bl_media_body {
    /*width: 80%;*/
    padding: 0 20px;
}

.bl_media_body>*:last-child {
    margin-bottom: 0;
}

.bl_media_ttl {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
}

.bl_media_txt {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 52px;
    /* IE対応 */
}

/*
    お知らせ詳細
---------------------------------*/
/*.bl_columnMedia_imgWrapper {
    width: 60%;
    margin: 30px auto;
}*/
.bl_columnMedia_txt {
    line-height: 1.85;
    margin-bottom: 50px;
}

/*
    コミュニティ詳細,トピック一覧,トピック詳細,トピック作成
------------------------------------------------------------------*/
.bl_communityHeaderUtils {
    display: flex;
    justify-content: space-between;
}

.bl_member {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.bl_memberList {
    overflow-y: scroll;
    max-height: calc(10em * 1.5);
}

.bl_memberList>li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl_communityBar {
    background-color: #fdf7f8;
}

.bl_communityBarNav {
    display: flex;
    /*justify-content: space-between;*/
    /* max-width: 680px; */
    max-width: 840px;
    margin: auto;
}

.bl_communityBarNav li {
    flex-basis: 33.3%;
}

.bl_communityBarNav_link {
    padding: 1em;
    font-size: 16px;
    font-weight: bold;
    color: #ea5c6f;
    display: block;
    text-align: center;
    height: 100%;
}

.bl_communityBarNav_link:hover,
.bl_communityBarNav_link:focus {
    border-bottom: 3px solid #ea5c6f;
}

.bl_communityBarNav_link.is_active {
    border-bottom: 3px solid #ea5c6f;
    pointer-events: none;
}

/* メンバー吹き出し */
.bl_member.is_active .bl_balloon.bl_balloon__member {
    display: block;
}

.bl_balloon.bl_balloon__member {
    display: none;
    width: 300px;
    padding: 20px;
    position: absolute;
    right: 0;
    margin-top: 10px;
}

.bl_balloon.bl_balloon__member::before {
    top: -5px;
    right: 10%;
    transform: translateX(-50%) rotate(45deg) skew(10deg, 10deg);
}

/* 既読吹き出し */
.bl_read {
    position: relative;
    cursor: pointer;
}

.bl_read.is_active .bl_balloon.bl_balloon__read {
    display: block;
}

.bl_balloon.bl_balloon__read {
    display: none;
    width: 300px;
    padding: 20px;
    position: absolute;
    /* right: 0; */
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    margin-top: 10px;
}

.bl_balloon.bl_balloon__read::before {
    top: -5px;
    /* right: 2%; */
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%) rotate(45deg) skew(10deg, 10deg);
}

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

.bl_tabNav_inner li {
    width: 50%;
    text-align: center;
}

.bl_tabNav_link {
    display: inline-block;
    padding: 10px 30px;
    color: #777;
    text-decoration: none;
    transition: 0.25s;
    width: 100%;
    border-bottom: 3px solid #e6e3dd;
}

.bl_tabNav_link:focus,
.bl_tabNav_link:hover {
    border-bottom-color: currentColor;
    color: #ea5c6f;
    opacity: 0.75;
}

.bl_tabNav_link.is_active {
    border-bottom-color: currentColor;
    color: #ea5c6f;
    pointer-events: none;
}

.bl_tabBody_1,
.bl_tabBody_2 {
    display: none;
}

.bl_tabBody_1.is_active,
.bl_tabBody_2.is_active {
    display: block;
}

.bl_readList {
    overflow-y: scroll;
    max-height: calc(10em * 1.5);
}

.bl_readList li {
    padding: 0.5em 0;
}

.bl_readList li:not(:last-child) {
    border-bottom: 1px solid #e6e3dd;
}

.bl_readList_ttl {
    font-size: 20px;
    font-weight: bold;
}

.bl_readList_name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl_readList_department {
    font-size: 12px;
    display: block;
}

/*
    トピック作成
---------------------------------*/
.bl_topicForm {
    margin-bottom: 30px;
}

.bl_topicForm>*:last-child {
    margin-bottom: 0;
}

.bl_topicForm>li {
    margin-bottom: 20px;
}

/*
    トピック詳細
---------------------------------*/
/* コメント一覧 */
/* .bl_commentList {
  border-bottom: 1px solid #e6e3dd;
} */
.bl_commentList>li {
    background-color: #f3f3f3;
    padding: 20px;
    border-radius: 5px;
}

.bl_commentList>li:not(:last-child) {
    margin-bottom: 20px;
}

.bl_commentList>li>*:not(:last-of-type) {
    margin-bottom: 10px;
}

.bl_commentEnter {
    margin: 0 0 30px;
}

.bl_comment__file {
    text-decoration: underline;
}

/*
    マイコミュニティ
---------------------------------*/
/* チェックボタン */
.bl_checkBox {
    position: relative;
    display: inline-block;
}

/*
    社員一覧
---------------------------------*/
.bl_media_body.bl_media_body__user {
    width: 90%;
}

.bl_media_ttl.bl_media_ttl__user {
    margin: 0 auto;
}

/*
    メンバー設定
---------------------------------*/
.bl_radioList {
    display: flex;
}

.bl_radioList li {
    min-width: 80px;
}

.bl_radioList li:not(:last-child) {
    margin-right: 1em;
}

.bl_card {
    border: 1px solid #ddd;
    box-shadow: 7px 10px 10px #ddd;
    border-radius: 10px;
}

.bl_card.is_active {
    background-color: #fdf7f8;
}

.bl_card_body {
    padding: 1.5em;
}

.bl_card_body>*:last-child {
    margin-bottom: 0;
}

.bl_cardUnit {
    display: flex;
    flex-wrap: wrap;
}

.bl_cardUnit.bl_cardUnit__col3 {
    margin-bottom: -20px;
}

.bl_cardUnit__col3>.bl_card {
    width: 32%;
    margin-right: 2%;
    margin-bottom: 20px;
}

.bl_cardUnit__col3>.bl_card:nth-of-type(3n) {
    margin-right: 0;
}

.bl_memberCard_head {
    display: flex;
    align-items: baseline;
}

.bl_memberCard_name {
    font-size: 18px;
    font-weight: bold;
    height: calc(1.5 * 2em);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 0.8em;
}

.bl_memberCard_option {
    margin-bottom: 2em;
}

.bl_memberCard_option>li {
    display: flex;
    flex-wrap: wrap;
}

.bl_memberCard_option>li:not(:last-child) {
    margin-bottom: 1em;
}

.bl_memberCard_option_ttl {
    display: inline-block;
    min-width: 140px;
    margin-bottom: 0.5em;
}

.bl_bottomFixed {
    width: 100%;
    height: 140px;
    /* footerの高さにより調整必要 */
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 2em;
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: 99;
}

.bl_bottomFixed .bl_horizBtnList {
    max-width: 310px;
    margin: auto;
}

/*
    ファイル一覧
---------------------------------*/
.bl_cardUnit__col4>.bl_card {
    width: calc(25% - 9px);
    margin-right: 12px;
    margin-bottom: 12px;
}

.bl_cardUnit__col4>.bl_card:nth-of-type(4n) {
    margin-right: auto;
}

.bl_card_imgWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    height: 160px;
}

.bl_card_imgWrapper>img {
    object-fit: contain;
    height: 50%;
}

.bl_card_imgWrapper__1>img {
    object-fit: cover;
    height: 100%;
}

.bl_fileCard_date {
    font-size: 12px;
    margin-bottom: 0.5em;
}

.bl_fileCard_ttl {
    word-wrap: break-word;
    margin-bottom: 0.5em;
}

.bl_fileCard_name {
    font-weight: bold;
    height: calc(1.5 * 2em);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/*
    ファイル登録
---------------------------------*/
.bl_fileBox>*:not(:last-child) {
    margin-bottom: 20px;
}

.bl_bulletList>*:last-child {
    margin-bottom: 0;
}

.bl_bulletList>li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 10px;
}

.bl_bulletList>li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 50%;
}

/*******************************************************************************
* pc
*******************************************************************************/
@media screen and (max-width: 1024px) {

    /***************************************
        main
    ****************************************/
    /*
    ファイル一覧
---------------------------------*/
    .bl_cardUnit__col4>.bl_card {
        width: calc(33.33333% - 8px);
    }

    .bl_cardUnit__col4>.bl_card:nth-of-type(4n) {
        margin-right: 12px;
    }

    .bl_cardUnit__col4>.bl_card:nth-of-type(3n) {
        margin-right: auto;
    }
}

@media screen and (min-width: 768px) {

    /***************************************
        header
    ****************************************/
    .bl_headerNav {
        display: flex;
        justify-content: space-between;
    }

    .bl_headerNav_link:hover,
    .bl_headerNav_link:focus {
        border-bottom: 3px solid #ea5c6f;
    }

    .bl_headerNav_link.is_active {
        border-bottom: 3px solid #ea5c6f;
        pointer-events: none;
    }

    /***************************************
        footer
    ****************************************/
    .bl_footerNav_item+li:not(:last-child)::after {
        content: "";
        display: block;
        height: 1em;
        border-right: 1px solid #fff;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    /***************************************
        main
    ****************************************/
    /*
        共通
    ---------------------------------*/
    .bl_contBoxUnit {
        justify-content: space-between;
    }

    .bl_contBoxUnit.bl_contBoxUnit__col2 .bl_contBox {
        width: 49%;
    }
}

/*******************************************************************************
* sp
*******************************************************************************/
@media screen and (max-width: 767px) {

    /**************************************
     *   header
     *************************************/
    .bl_headerNav {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 2;
        text-align: center;
        overflow-y: auto;
        background-color: rgba(255, 255, 255, 0.9);
        padding-top: 80px;
    }

    /**************************************
     *   footer
     *************************************/
    .bl_footerNav {
        flex-direction: column;
        align-items: flex-end;
        margin-top: 1em;
        margin-bottom: 2em;
    }

    .bl_footerNav_link {
        padding: 5px 10px;
    }

    /**************************************
     *   main
     *************************************/
    /*
        共通
    ---------------------------------*/
    .bl_contBoxUnit {
        flex-direction: column;
    }

    .bl_article_ttl,
    .bl_media_ttl {
        font-size: 18px;
    }

    .bl_pager_link {
        width: 30px;
        height: 30px;
    }

    /*
    コミュニティ詳細,トピック一覧,トピック詳細,トピック作成
------------------------------------------------------------------*/
    .bl_communityHeaderUtils {
        flex-direction: column;
    }

    .bl_communityHeaderUtils>li:not(:last-child) {
        margin-bottom: 1em;
    }

    /* メンバー吹き出し */
    .bl_balloon.bl_balloon__member {
        left: 0;
        transform: initial;
        -webkit-transform: initial;
        -ms-transform: initial;
    }

    .bl_balloon.bl_balloon__member::before {
        left: 20%;
    }

    /*
    メンバー設定
---------------------------------*/
    .bl_cardUnit__col3>.bl_card {
        width: 49%;
    }

    .bl_cardUnit__col3>.bl_card:nth-of-type(3n) {
        margin-right: auto;
    }

    .bl_cardUnit__col3>.bl_card:nth-of-type(2n) {
        margin-right: 0;
    }

    .bl_bottomFixed {
        height: 120px;
    }

    /*
    ファイル一覧
---------------------------------*/
    .bl_cardUnit__col4>.bl_card {
        width: calc(50% - 6px);
    }

    .bl_cardUnit__col4>.bl_card:nth-of-type(3n) {
        margin-right: 12px;
    }

    .bl_cardUnit__col4>.bl_card:nth-of-type(2n) {
        margin-right: auto;
    }
}

/**************************************
     *   main
     *************************************/
@media screen and (max-width: 540px) {

    /*
    ファイル一覧
---------------------------------*/
    .bl_cardUnit__col4>.bl_card:nth-of-type(3n) {
        margin-right: 0;
    }

    /*
    コミュニティ詳細,トピック一覧,トピック詳細,トピック作成
------------------------------------------------------------------*/
    .bl_communityBarNav_link {
        font-size: 11px;
    }

    /*
    メンバー設定
---------------------------------*/
    .bl_cardUnit>.bl_card {
        width: 100%;
        margin-right: 0;
    }
}