@charset "UTF-8";
.archive-list{
  margin-top: 2rem;
}
.news-item{
  margin: 1rem 0;
  border-bottom: dotted 2px var(--border);
}
.news-item:first-child{
  margin-top: 0rem;
}
.news-item:last-child{
  border-bottom: none;
  padding-bottom: 0em;
  margin-bottom: 0rem;
}

.news-con{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.news-category,
.news-category-recruit,
.news-category-fukinotou,
.news-category-corazon{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.news-category a{
  text-decoration: none;
  background-color: var(--green1);
  padding: 0em 1em;
  font-size: 0.85em;
  border-radius: 2rem;
  color: var(--white);
  font-weight: 600;
  line-height: 1.5em;
  display: block;
}

.news-tit{
  width: 100%;
}

.news-tit a{
  width: 100%;
  height: auto;
  display: block;
  transition: 0.2s;
  padding: 1rem 0;
}

.news-tit a:hover{
  /* opacity: 0.5; */
  transition: 0.2s;
  text-decoration: underline;
}
/*////////////////////////////切り替えタブ/////////////////////////////*/
.news-wrapper{
    display: flex;
    justify-content: space-between;
}
/*tabの形状*/
.tab{
  width: calc(40% - 1rem);
  z-index: 1;
  margin-left: 1rem;
}

.tab button{
    width: 100%;
    min-width: 150px;
    max-width: 300px;
    text-align: center;
    margin-top: 1rem;
    position: relative;
    cursor: pointer;
}

.tab button{
  width: 100%;
  height: auto;
  display: block;
  font-weight: 600;
  background: var(--white);
  color: var(--black);
  padding:1rem 0;
  text-decoration: none;
  border-radius: 50px;
  border: solid 2px var(--green1);
}
/*liにactiveクラスがついた時の形状*/
.tab button[aria-selected="true"]{
  background:var(--green1);
  color: var(--white);
  text-decoration: none;
}
.tab button[aria-selected="true"]::before{
    content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    right: -20px;
    transform: translateY(-50%);
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 20px;
    border-color: transparent transparent transparent var(--green1);
  }

/*エリアの表示非表示と形状*/
.news[aria-hidden="true"]{
	display: none;
}
.news[aria-hidden="false"]{
	display: block;
  width: 100%;
}

.news-area-back{
  padding:2rem 3rem 1rem 3rem;
  background: var(--white);
  border-radius: 2rem;
  /* width: calc(70% - 2rem); */
  max-width: 100%;
  height: auto;
  margin-left: 1rem;
  z-index: 1;
  position: relative;
}
@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*/////////////// カテゴリー ////////////////*/


.news-category .important a{
 background-color: var(--red); 
 text-align: center;
}

/* ふきのとうカテゴリー */
.news-category-fukinotou a {
  text-decoration: none;
  background-color: var(--fukinotou-cat1);
  color: var(--fukinotou-text);
  padding: 0em 1em;
  font-size: 0.85em;
  border-radius: 2rem;
  font-weight: 600;
  line-height: 1.5em;
  display: block;
}
/* コラソンカテゴリー */
.news-category-corazon a {
  text-decoration: none;
  background-color: var(--corazon-cat1);
  color: var(--corazon-text);
  padding: 0em 1em;
  font-size: 0.85em;
  border-radius: 2rem;
  font-weight: 600;
  line-height: 1.5em;
  display: block;
}

.news-category-corazon .corazon-syuryo a {
  background-color: var(--gray2);
}

/* 採用情報カテゴリー */
.news-category-recruit{
  display: inline-block;
  height: 1.5rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--green1);
  text-shadow: 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1), 0px 0px 3px rgba(255,255,255,1);
  text-align: center;
  line-height: 1.25rem;
  border-radius: 20px;
  text-decoration: none;
  background-color: rgb(20 123 123 / 30%);
  line-height: 1.9;
}

/* 入札情報 カテゴリー */
.news-category .syuryo a{
  background-color: var(--gray2);
  color: var(--black);
}
.news-category .kekka a{
  background-color: var(--pink);
  color: var(--red);
}

.news-category .bosyu a{
  background-color: var(--blue2);
  color: var(--black);
}

.news-category .kohyo a{
  background-color: var(--yellow);
  color: var(--black);
}