@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}

ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
/* -------------------------------------------------------------- */

body{
color:#555;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#fff;
-webkit-text-size-adjust:100%;
}

.under{
	border-bottom:dotted 2px;
}

.new p{
	font:16px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	padding-left:10px;
	margin-bottom:20px;
	border-left:6px solid #48d1cc;
	border-bottom: 3px dotted #48d1cc;
}

.past article p{
	font:15px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	padding-left:10px;
	margin-bottom:20px;
	border-left:6px solid #708090;
	border-bottom: 3px dotted #708090;
	padding-left:1em;
}

.title h1{
 font-size:25px;
 font-weight:bold;
 position: relative;
  padding: 3rem 2rem 1rem 1rem;/*上　右　下　左*/
  border-bottom: 3px solid #0a777a;
}

.title h1:before{
position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #0a777a transparent transparent transparent;
}

.title h1:after {
   position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #f9f9f9 transparent transparent transparent;
}


 .flexbox {
	max-width:1450px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
 }
  
 .item img{
	width: 100%;
	height:auto;
    position: relative;
	padding:3%;
	margin:3%;
 }

.news_title{
color: #24b224;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.news_list {
margin: 20px 0;
border-top: 1px dashed #24b224;
}
.news_list li {
padding: 15px 5px;
border-bottom: 1px dashed #2eb087;
text-overflow: clip;/*ellipsisにすると、..で表示される*/
overflow: auto;
white-space: normal;/*nowrapだと、改行されない*/
}

.date {
font-size: 16px;
margin-right: 10px;
}

.category1 { /*home*/
display: inline-block;
color: #fff;
width: 90px;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #75b46e;
}

.category2 { /*大学event*/
display: inline-block;
color: #fff;
width: 90px;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #5e9fc4;
}

.category3 {/*セミナー*/
display: inline-block;
color: #fff;
width: 90px;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #9c2eb0;
}

.category4 {/*懇親会*/
display: inline-block;
color: #fff;
width: 90px;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #db4d92;
}

.category5 {/*キャリア研修*/
display: inline-block;
color: #fff;
width: 90px;
font-size: 14px;
text-align: center;
margin-right: 10px;
padding: 2px 10px;
background-color: #3241a1;
}

.news_text{
	font-size:16px;
}

@media screen and (max-width: 559px) {
.news_container {
width: 100%;
padding: 0 20px;
}
.news_text a {
display: block;
margin-top: 10px;
text-overflow: ellipsis;
overflow: hidden;
}
}


@media (max-width:768px){
.flexbox{
	display:flex;
	flex-wrap:wrap;
}

.item {
	width:50%;
}

 .item img{
	width: 100%;
	height:auto;
    position: relative;
	padding:3%;
	margin:3%;
 }


}