@charset "utf-8";
/* CSS Document */

/*
================================================================================================================
 html・bodyエリア（縦横・背景色・テキストカラーの指定）
================================================================================================================
*/
html {}
body {background-color: transparent; color: #333333;}

/*
================================================================================================================
 更新情報
================================================================================================================
*/
.flex-container{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  width: 100%;
}

section.news_update{
  width:100%;
  top:0;
  text-align: center;
  position:relative;
}

/*.state.news{background-image:url(../images/common/news.png);}*/
/*.state.update{background-image:url(../images/common/update.png);}*/
.news:before{
  background-color:#804000;
  color:#FFF;
  content:"お知らせ";
}
.update:before{
  background-color:#009900;
  color:#FFF;
  content:"更新情報";
}
.verup01:before{
  background-color:#CC0000;
  color:#FFF;
  content:"仕様追加";
}
.verup02:before{
  background-color:#0000FF;
  color:#FFF;
  content:"処理改善";
}
.verup03:before{
  background-color:#FF6600;
  color:#FFF;
  content:"症状改善";
}

.news:before, .update:before, .verup01:before, .verup02:before, .verup03:before{
border-radius:4px; padding:1px 2px 0px 2px ; font-weight:bold; vertical-align: middle; line-height:1.5;
background-position:center center;
background-repeat:no-repeat; 
background-size:contain;
}

.state{
line-height:0px;
width:10%;
max-width:100px;
height: auto;
margin:0px;
}
@media screen and (min-width:900px) {.state{width:auto; margin:0 -2px;}}
@media screen and (max-width:399px) {.state{width:38%;}}
.state img{
margin-top:0px;
left:0px;
width:100%;
padding:0;
}

#news_all{
  width:100%;
  height:100%;
  top:0;
  margin:0;
  text-align: center;
  position:relative;
  overflow:hidden;
}
#news{
  position:relative;
  width:100%;
  height:100%;
  padding:0%;
  text-align:left;
  margin:1% auto;
  background-color: rgba(10,10,10,0.0);
}
.news_item{
  width:100%;
  list-style:none;
  text-align:left;
  left:0%;
  padding-bottom:2%;
  background-color: rgba(10,10,10,0.0);
}
.news_item section {
  width:99%;
  padding:1% 0;
  margin:0 0 0 1%;
  border-bottom:dotted 1px #339;
}

.news_item{
  position:relative;
  width:100%;
  height: auto;
  padding:0%;
  text-align:left;
  margin:0 auto;
  background-color: rgba(10,10,10,0.0);
  overflow-y:auto;
  overflow-x: hidden;
}
.los_news a {color:#804000;}
.los_news a:hover {color:#F33;}
.news_item section .los_news{
  width: 76%;
  text-align:left;
  margin-left:1%;
  margin-right:1%;
  padding-left:0%;
  padding-right:0%;
  background-color: rgba(10,10,10,0.0);
}
.news_item section span{
  font-weight:bold;
}
.news_item section .date{
  text-align:left;
  font-weight:bold;
  margin-left:0.5%;
  margin-right:0.5%;
  padding-left:0%;
  padding-right:0%;
  background-color: rgba(10,10,10,0.0);
}


.sub_title{
width:96%;
background-color: #a939ea;
    border: 1px solid #ff39ff;
    color: #FFF;
    border-radius: 6px;
 margin:30px auto 10px;padding:5px;font-size:18px;text-align:left;font-weight:bold;
}
.sub_title .date{
    color: #fff100;font-size:14px;padding-bottom:10px;
}

.contents_01.info {margin: 20px auto 10px;}

.contents_text{
font-size:18px;
max-width:96%;
padding:20px 10px;
margin:0 auto 30px;
text-align:left;
background-color: #FFF;
border-radius: 6px;
}
@media only screen and (max-width: 899px){

}
@media only screen and (max-width: 699px){
.sub_title{
font-size:14px;margin:30px auto -10px;
}
.sub_title_main {
font-size: 14px !important;
}
.contents_text{
font-size:14px;
}
}
@media only screen and (max-width: 499px){

}

@media screen and (min-width:900px) {.news_item section .date{width: 18%; max-width:114px;}.state{width: 10%; max-width:80px;} .los_news{width: 80%;}}
@media screen and (max-width:899px) {.news_item section .date{width: 24%; margin-right:0%;}.state{width: 14%; margin-right:0%;} .los_news{width: 60%;}}
@media screen and (max-width:699px) {.news_item section .date{width: 26%; margin-right:0%;}.state{width: 16%; margin-right:0%;} .los_news{width: 56%;}}
@media screen and (max-width:499px) {.news_item section .date{width: 32%; margin-right:0%;}.state{width: 20%; margin-right:0%;} .los_news{width: 40%;}}
@media screen and (max-width:399px) {.news_item section .date{width: 44%; margin-right:0%;}.state{width: 30%; margin-right:0%;} .los_news{width: 20%;}}
@media screen and (min-width:320px) and (max-width:348px) {.news_item section .date{width: 50%; margin-right:0%;}.state{width: 35%; margin-right:0%;} .los_news{width: 15%;}}