/* Board */

.board {
  position: relative;
}
.board-column {  /* タイル */
  position: absolute;
  left: 0;
  right: 0;
  width: 44%;
/*  height:240px; */
  height: auto;
  margin: 1% 1%;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  border: 1px solid #D8D5D5;
  box-shadow: 2px 2px 4px gray;
}
.board-column:hover {
  background: #f8f8f8;
  box-shadow: 2px 2px 5px 3px gray;
}
.board-column.muuri-item-releasing {
  z-index: 2;
}
.board-column.muuri-item-dragging {
  z-index: 3;
  cursor: move;
}
.board-column-header {
  position: relative;
  height: 240px;
  line-height: 30px;
  overflow: hidden;
  padding: 0 5px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  margin:2px 0px 0px 2px;
}
/*
.board-column.todo .board-column-header {
  background: #4A9FF9;

}
.board-column.working .board-column-header {
  background: #f9944a;
}
.board-column.done .board-column-header {
  background: #2ac06d;
}
*/
.board-column-content { /* アイテム配置 */
  display: inline-block;
  position: relative;
  border: 10px solid transparent;
  height: 50px;
  width:65%;
  margin-left:35%;
  line-height: 150%;
  font-size: 13px;
  font-weight: normal;
}
.topimgdiv{
    text-align : left; 
    position: absolute; 
    top: 10px; 
    width: auto;
    height:auto;
    z-index:0;
    margin-left: 0px;
    margin-bottom: 0px;
  }
.topimg{
 max-width:100%;
 height:auto;
}
.toplinkdiv{
    text-align : center; 
    position: absolute; 
    float:right;
    bottom: 10px; 
    width: 40%;
    margin-left:55%;
    z-index:1;
    background:#b0c4de;
    border-radius:15px;
   
}
.board-item {
  position: absolute;
  width: 30%;
  margin: 1% 1% 1% 1%;
}
.board-item.muuri-item-releasing {
  z-index: 9998;
}
.board-item.muuri-item-dragging {
  z-index: 9999;
  cursor: move;
}
.board-item.muuri-item-hidden {
  z-index: 0;
}
.board-item-content {
  white-space: nowrap;
  position: relative;
  padding: 10px 10px 10px 10px;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
  box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
}



.board-column-footer { /* タイル内リンク */
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #f0f0f0;
  height: 60px;
  line-height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
}

.top-square-btn{
    position: relative;
    display: inline-block;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 350px;
    text-decoration: none;
    color: #ffffff;
    font-weight: normal;
    background: #28628e;
    transition: .4s;
  }

.top-square-btn:visited {
    text-decoration: none !important;
    background: #28628e !important;
    color: #ffffff;
}
.top-square-btn:hover {
    background: #87b0e2 !important;
    color: #ffffff !important;
}
.top-square-btn:active {
    text-decoration: none !important;
    background: #28628e !important;
    color: #ffffff !important;
}
.top-tile-main {
    font-size: 18px;
    font-weight: bold;
}
.top-tile-sub {
    font-size: 12px;
    font-weight: bold;
}
.top-tile-sub-cn {
    font-size: 12px;
    font-weight: normal;
}


@media (max-width: 991px) {
  .board-column {  /* タイル */
    height: auto;
    width: 90%;
  }
  .board-column-header {
    padding: 2px 2px 2px 2px;
    height: 200px;
  }
  .board-column-content {
    width: 75%;
    margin-left:25%;
    height: auto;
  }
  .topimgdiv{
    width: 25%;
    height: 25%;
  }
  .board-item-content {
    padding: 5px 5px 5px 5px;
  }
  .board-column-footer {
    font-size: 12px;
  }
  .tile-item-br {
    display: none;
  }
  .tile-item-border {
    display: inline;
  }
}
@media (min-width: 992px) { /* PCサイズ */
  .board-column {  /* タイル */
    width: 370px;
    height: 220px;
  }
  .tile-item-border {
    display: none;
  }
.top-item-link-oem-ja {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 28px;
    display: block;
}
.top-item-link-model-ja {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 28px;
    display: block;
}
.top-item-link-partmaker-ja {
    margin-top: 5px;
    font-size: 13px;
    line-height: 25px;
    display: block;
}
.top-item-link-part-ja {
    font-size: 13px;
    line-height: 20px;
    display: block;
}
.top-item-link-case-ja {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-industry-ja {
    margin-top: 8px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-country-ja {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-topic-ja {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 18px;
    display: block;
}
.top-item-link-oem-en {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 28px;
    display: block;
}
.top-item-link-model-en {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 28px;
    display: block;
}
.top-item-link-partmaker-en {
    margin-top: 5px;
    font-size: 13px;
    line-height: 25px;
    display: block;
}
.top-item-link-part-en {
    font-size: 13px;
    line-height: 20px;
    display: block;
}
.top-item-link-case-en {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-industry-en {
    margin-top: 8px;
    margin-left: 5px;
    font-size: 13px;
    line-height: 25px;
    display: block;
}
.top-item-link-country-en {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-topic-en {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 15px;
    display: block;
}
.top-item-link-oem-cn {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 13px;
    line-height: 28px;
    display: block;
}
.top-item-link-model-cn {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 28px;
    display: block;
}
.top-item-link-partmaker-cn {
    margin-top: 5px;
    font-size: 13px;
    line-height: 25px;
    display: block;
}
.top-item-link-part-cn {
    font-size: 13px;
    line-height: 20px;
    display: block;
}
.top-item-link-case-cn {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-industry-cn {
    margin-top: 8px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-country-cn {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 25px;
    display: block;
}
.top-item-link-topic-cn {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    line-height: 18px;
    display: block;
}
}

body.ja {
    overflow-y: scroll;
}
body.en {
    overflow-y: scroll;
}
body.cn {
    overflow-y: scroll;
}

.navi-column {
  left: 5px;
  right: 5px;
  width: 758px;
/*2行表示させるために削除
  height:30px;
*/
  margin: 0.5% 0;
  background: #E7F1DE;
  border-radius: 3px;
  z-index: 1;
  border: 1px solid #D8D5D5;
  box-shadow: 2px 2px 4px gray;
}

.navi-btn-flat-border {
  text-decoration: none;
  color: #4B660F !important;
  padding: 2px 2px 2px 2px;
  border-radius: 3px;
  transition: .4s;
  height: 20px;
}

/* 中央領域では .row が入れ子になっておりマージンが二重に効いてしまうため、リセット */
#search-top .row {
  margin: 0;
}

/* 3カラムの時にヘッダーの検索入力欄の右端と中央領域の右端がそろうようにする */
/* .container-fluid のマージンをいじるとヘッダーに影響が出たので下記で調整 */
#search-top {
  margin-left: -5px !important;
}

/* バナー画像のサイズが800pxなので、main.cssの内容を上書き */
.frame_center .advertise-banner .advertise-banner-single .advertisement-image {
  max-height: none !important;
  max-width: 800px !important;
}

/*人材システムのバナー*/
.row-hr-banner {
  width: 100%;
}

.hr-banner-header {
  display: flex;
  height: 30px;
}

.hr-banner-content {
  border-top: 10px solid #E5E5E5;
  border-bottom: 10px solid #E5E5E5;
  background: #FFF;
}

.hr-banner-content p {
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  display: flex; 
  margin:0;
  align-items: center;
}

.hr-banner-footer {
  display: flex;
  height: 20px;
}

#img-hr-banner {
  width:100%;
  cursor: pointer;
}

#img-hr-banner:hover {
  opacity: 0.5;
}

/* 3カラムの時のみ */
@media (min-width: 1270px) {
  .navi-column {
    width: 812px;
    margin: 5px 0 10px 15px;
  }
  .board-column {
    width: 397px;
    margin: 8px;
  }
}

/* 右側のバナー領域が中央の領域と重ならないように調整 */
@media (max-width: 1269px) {
  .frame_ad_content {
    position: static !important;
  }
}

/* 2カラム以上の時 */
@media (min-width: 992px) {
  .in-line-with-board, .hr-banner-content {
    margin-left: 16px !important;
  }
  .frame_center .advertise-banner .advertise-banner-single .advertisement-image {
    width: 800px;
  }
  .navi-column {
    width: 800px;
    margin: 5px 0 10px;
  }
  .board {
    width: 816px;
    margin-left: 8px;
  }
  .board-column {
    max-width: 392px;
    width: auto;
    margin: 8px;
  }
  .box {
    width: 814px;
  }
  .row-hr-banner {
    width: 814px;
  }
}

/* 1カラムの時のみ */
@media (max-width: 991px) {
  .in-line-with-board {
    margin-left: 0 !important;
  }
  .frame_center .advertise-banner .advertise-banner-single {
    text-align: center;
  }
  .kanban-demo {
    max-width: 800px;
    margin: auto;
  }
  .navi-column {
    width: auto;
  }
  .board-column {
    width: auto;
    margin: 8px 0;
  }
  .box div {
    max-width: 800px;
    margin: auto;
  }
  .box .box-content {
    padding-right: 0;
  }
}

/* 人材システムのAバナーの調整 */
@media only screen and (min-width: 840px) and (max-width: 991px) {
  .row-hr-banner {
    width: 800px;
    margin: auto;
  }
}