@charset "utf-8";
/* CSS Document */
/* お知らせ一覧ページ用のCSS　2020.7 */
.material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;

     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;

     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;

     /* Support for IE. */
     font-feature-settings: 'liga';
}
.box_nb {
  padding: 0;
}
/*NEWマーク*/
.new {
  color: #fff;
  background: orange;
  border-radius: 10px;
  padding: 0 1em;
  margin-left: 1em;
  font-size: 0.8em;
  vertical-align: middle;
}
/*日付*/
.nb_date {
  font-size: 0.8em;
  color: #7A7A7A;
}
/*VoiceTra,NICTアイコン*/
.icon_nb {
  float: right;
  text-align: center;
  width: 54px;
  padding: 0.1em;
  font-size: 0.7em;
}
.icon_vt {
  border: 1px solid #28C2A6;
  color: #28C2A6;
}
.icon_nict {
  border: 1px solid #004EA2;
  color: #004EA2;
}
/*お知らせリスト*/
.newsbord_li {
  border-bottom: 1px solid #ccc;
  padding: 1em 0;
  vertical-align: middle;
}
h5.nb_title {
  font-size: 1em;
  padding: 0;
  word-wrap: break-word;
}
h5.nb_title a {
  font-weight: 900;
  padding: 0;
}
/*別窓リンクアイコン*/
h5.nb_title a[target="_blank"]:after {
  content: 'open_in_new';
  font-family: "Material Icons";
  font-feature-settings: 'liga'; /* Support for IE. */  
}
/*トグル*/
.grad-btn {
  float: right;
}
.grad-btn::before {
  content: 'expand_more';
  font-family: "Material Icons";
  font-feature-settings: 'liga'; /* Support for IE. */
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 1.4em;
  font-size: .8em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%; 
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: 'expand_less';
  font-family: "Material Icons";
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
  text-overflow: initial;
  white-space: normal;
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; 
}
/*タブ(CSSで表示内容を切り替え)*/
.tab_container {
  padding-bottom: 1em;
  background-color: #fff;
  margin: 0 auto;
}
.tab_item {
  width: calc(99% / 3);
  /*  padding: 10px 0;*/
  padding: 10px 0 0; /*0707*/
  height: 38px; /*0707*/
  background-color: #ececec;
  text-align: center;
  display: block;
  float: left;
  transition: all 0.2s ease;
}
.tab_container #all {
  color: #FF9100;
  border-top: 3px solid #ff9100;
}
.tab_container #voicetra {
  color: #28C2A6;
  border-top: 3px solid #28C2A6;
}
.tab_container #nict {
  color: #004EA2;
  border-top: 3px solid #004EA2;
}
.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 3% 3% 0;
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content, #tab2:checked ~ #tab2_content, #tab3:checked ~ #tab3_content {
  display: block;
}
.tab_container input:checked + .tab_item {
  background-color: #FFFFFF;
}
/*------------------------------------------------------------------
 タブレットより大きいサイズの指定  幅768px 以上
-----------------------------------------------------------------*/
@media screen and (min-width:768px) {
  .box_nb {
    padding: 3%;
    text-align: left;
  }
}
@media screen and (min-width: 980px) {
  .box_nb {
    width: 800px;
    margin: 0 auto;
  }
}