@charset "utf-8";
/* CSS Document */
/************************************
	clearfix 
************************************/ 
/*tabの形状*/
ul.tab{
    font-family: 'M PLUS Rounded 1c',游ゴシック体, 'Yu Gothic', YuGothic,"Hiragino Kaku Gothic ProN","Meiryo", sans-serif;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
}
.tab li a{
	display: block;
	background: #D5E0C0;
	margin-right: 5px;
	padding:10px 20px;
	border-radius: 10px 10px 0 0;
	color:#526A33;
	font-weight:bold;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background: #526A33;
	color:#fff;
}


.area {
    display: none;
    opacity: 0;
    background: #fff;
    padding: 2% 3%;
    border: solid 3px #526A33;
	height: 600px;
    border-radius: 0 15px 15px 15px;
	overflow: auto;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}


.news_date{
	display: block;
    background: url(../img/news_date_bg.png);
    width: 50px;
    height: 50px;
    border-radius: 5px;
    float: left;
}
.news_ttl{
	height: 50px;
    display: flex;
    align-items: center;
    float: left;
    margin-left: 5%;
	width: 75%;
    color: #333;
    font-weight: bold;
}
.news_ttl_f {
    margin-left: 2%;
}
.news_item a{
	display:block;
    border-bottom: dotted 1px #ccc;
    padding: 2% 0;
}
.news_item a:hover .news_ttl{
	text-decoration:underline;
}
.news_end_img{
    width: 10%;
    float: left;
    margin-top: 1%;
	margin-left: 2%;
}
.news_date_1{
	display: block;
    font-size: 0.8em;
    text-align: center;
    color: #fff;
    margin-top: 9%;
}
.news_date_2{
	display: block;
    font-size: 1em;
    text-align: center;
    color: #fff;
}


@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media screen and ( max-width:960px) , print{
.area {
    border-radius: 0 5px 15px 15px;
}
ul.tab{
	display: block;
}
.tab li a {
    border-radius: 0;
    border-left: solid 10px #526a33;
}
ul.tab:before{
	content:"カテゴリー名をタップするとおしらせの表示が切り替わります。";
	display:block;
	padding: 0 2% 2% 2%;
}
ul.tab_f:before {
    content: "タップした年度のファイル一覧が表示されます。";
    display: block;
    padding: 0 2% 2% 2%;
}
.tab li.active a {
    filter: drop-shadow(2px 1px 2px black);
}
}