@charset "utf-8";

.bubble_area { position: absolute; width: 290px; right: 5%; top: 0px; }
.bubble_area img { width: 150px; position: absolute; }
.bubble_area .bubble {
  position: absolute; /* position: relative; */
  display: inline-block;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  font-size: 1.2em;
  font-weight: 800;
  line-height: 1.2;
  color: #000;
  right: 0;
  top: -20px;
  cursor: default;
}
.bubble_area .bubble::after {
  content: "";
  position: absolute;
  bottom: 28%;
  left: 14%;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #fff transparent transparent;
  translate: -50% 100%;
}

.entrylist .colinner { border-radius: 6px; height: 380px; }
.entrylist .col_agriculture .colinner { border: 2px solid #06A557; /* outline: 2px solid #06A557; */ }
.entrylist .col_agriculture .colinner .header { background: #06A557; }
.entrylist .col_agriculture .colinner .header .department { color: #06A557; background: #fff; }
.entrylist .col_engineering .colinner { border: 2px solid #004EA2; }
.entrylist .col_engineering .colinner .header { background: #004EA2; }
.entrylist .col_engineering .colinner .header .department { color: #004EA2; background: #fff; }
.entrylist .colinner .header h2 { color: #fff; font-size: 1.65rem; margin-bottom: 3px; }
.entrylist .colinner .header h2 span { font-size:0.8em; }
.entrylist .colinner .header .place { color: #fff; }
.entrylist .col .department { margin-bottom: 5px; }
.entrylist .col .web { color: #fff; }
.entrylist .col .web:before { content: url(../fonts/globe-solid.svg); display: inline-block; width: 13px; height: 13px; margin-right: 0.2em; vertical-align: text-top; }
.entrylist .col .web:hover { opacity: 0.7; }
.entrylist .col .web_none { height: 29.5px; }
.entrylist .colinner .cnts_area { position: static; }
.entrylist .colinner .cnts_area:after { content:""; display:table; clear:both; }
.entrylist .col .img { padding:10px 0 10px 0; width: calc(100% - 40px); margin: 0 auto; border-bottom: 1px solid #ddd; }
.entrylist .col .img img { margin: 0 auto; cursor: default; }
.entrylist .col h3 { padding: 10px 0 10px 0; margin: 0 20px; width: calc(100% - 40px); cursor: default; font-feature-settings: "palt"; }
.entrylist .colinner .footer { position: absolute; bottom: 0px; width:calc(100% - 40px); padding: 0 20px 10px 20px; }
.entrylist .colinner .footer .btn_more { margin-bottom: 10px; text-align: right; }
.entrylist .colinner .footer .btn_more a { border-radius: 10px; color: #fff; padding: 0.2em 0.5em; font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.entrylist .col_agriculture .colinner .footer .btn_more a { background: #06A557; }
.entrylist .col_agriculture .colinner .footer .btn_more a:hover { background:#35d688; }
.entrylist .col_engineering .colinner .footer .btn_more a { background: #004EA2; }
.entrylist .col_engineering .colinner .footer .btn_more a:hover { background:#2a84e4; }
.entrylist .colinner .footer .btn_more a:before { content:'\f0a9'; font-family:'FontAwesome'; margin-right:0.3em; font-weight:normal !important; }
.entrylist .col .tag { position: static; border-top: 1px solid #ddd; display: block; padding: 10px 0 0 0; margin: 0; }
.entrylist .col .place { top: 18px; }
.entrylist .col .place:hover { opacity: 0.7; }

.entrylist .colopen .footer { position: static; }
.entrylist .colopen .footer .btn_more { display: none; }
.entrylist .colopen .header { margin-bottom: 15px; width: calc(100% - 40px); }
.entrylist .colopen h2 { border-bottom: none; padding-bottom: 0; }
.entrylist .colopen .web { margin-top: 0; }
.entrylist .colopen .web_none { height: 10px; }
.entrylist .colopen h3 { border: none; padding-top: 0; }
.entrylist .colopen .img { margin: 0 20px 20px 0; padding: 0; width: 240px; border: none; }
.entrylist .colopen .img .caption { display: block; margin-top: 5px; }
.entrylist .colopen .closeentry { display: block; z-index: 1000; width: 30px; height: 30px; }
.entrylist .col.colopen .place { right: 50px; }
.entrylist .colopen .closeentry { top: 10px; right: 10px; }
.entrylist .col.colopen .tag { width: calc(100% - 260px); }

/* ============================================
 responsive layout
============================================ */
/* for Tablet (w768px)
@media only screen and (max-width:940px) {
}*/
/* for SmartPhone (w320px) */
@media only screen and (max-width:440px) {
.bubble_area { position: relative; height: 80px; top: 10px; left: 50%; transform: translateX(-50%); }
.bubble_area .bubble { top: 0; }
.bubble_area img { top: 20px; }
.cols3 .col { margin-bottom: 20px; }
.entrylist .colinner { }
.entrylist .col .header { margin: 0; }
.entrylist .col .place { top: 10px; right: 10px; }
.entrylist .colinner .footer { position: relative; }
.entrylist .colinner .cnts_area { width: calc(100% - 40px); margin: 0 auto; }
#contents .entrylist .col .img { position: static; width: 30%; margin: 0 10px 0 0; float: left; border: none; }
.entrylist .col h3 { position: static; width: calc(70% - 10px); margin: 0; float: right; }
.entrylist .colopen .header { width: 100%; }
.entrylist .colopen .colinner { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); height: inherit !important; }
.entrylist .col.colopen .place { right: 70px; }
#contents .entrylist .col.colopen .img { width: 100%; margin: 0; float: none; padding: 10px 0 0 0;}
.entrylist .col.colopen .img .caption { padding-bottom: 5px; }
.entrylist .col.colopen h3 { width: 100%; margin:10px 0 0 0; float: none; }
.entrylist .colopen p { width: 100%; margin:0 0 10px 0; }
.entrylist .col.colopen .tag { width: 100%; }
}