@charset "utf-8";

/*=================================================================
ベースのスタイル
=================================================================*/

.news__list__inner {
  max-width: 1000px;
  margin: 0 auto;
}
/*
.news__item__add {
  padding: 30px 8px;
}
*/

.news__item__add .news__item-head {
  flex: 0 0 280px;
}

.news__list__tit {
  font-size: 2.6rem;
  color: var(--color-blue);
  font-weight: 700;
  margin: 0 0 20px;
}

.news__list__navi {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 15px;
  margin: 0 0 30px;
  padding: 25px;
  background-color: #e9eef4;
  border-radius: 6px;
}

.news__list__navi li {
   list-style: none;
   display: flex;
   min-width: 12rem;
}

.news__list__navi a {
   display: block;
   text-align: center;
   width: 100%;
   text-decoration: none;
   color: #000;
   padding: 6px 12px;
   font-size: 1.5rem;
   transition: 0.5s;
   background-color: #fff;
   border-radius: 5px;
}

.news__list__navi_all a {
  color: var(--color-blue);
}

li.news__list__navi__cat {
  position: relative;
}

.news__list__navi .is-active {
   color: #fff;
   background: var(--color-blue);
}

@media screen and (max-width: 767px) {
   .news__list__inner {
      width: 100%;
      padding: 0 20px;
   }

   .news__list__tit {
      font-size: 1.7rem;
   }

   .news__list__navi a {
      font-size: 1.3rem;
      padding: 6px 10px;
   }

   .news__list__navi {
      gap: 10px;
      margin: 0px 0 20px;
      padding: 20px;
   }
}

@media screen and (max-width: 480px) {
   .news__list__navi {
      width: 100%;
   }

   .news__list__navi li {
      width: 48%;
   }

   .news__list__navi a {
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .news__list__navi {
      justify-content: space-between;
   }
}

@media screen and (max-width: 320px) {
  .news__list__navi li {
    width: 100%;
  }
}


/*=================================================================
   詳細ページ
=================================================================*/

.single__content {
   max-width: 900px;
   overflow: hidden;
}

.single__title {
   font-size: 3.2rem;
   line-height: 1.5;
   padding-bottom: .5em;
   border-bottom: 1px solid #ccc;
}

.singl-info{
   display: flex;
   align-items: center;
   font-size: .9em;
   margin: 2em 0;
}

.singl-info__date{
   margin-right: .8em;
}

.singl-info__cat-name a {
   color: var(--color-blue);
   text-decoration: none;
   font-weight: 600;
   border-radius: 50px;
   padding: 4px 17px;
   border: 1px solid var(--color-blue);
   background: #fff;
}

.single__cat-name a:hover {
  background: var(--color-blue);
  color: #fff;
}

.single__contents{
   line-height: calc(36 / 17);
}
.single__btn {
  margin-top: 70px;
}

@media screen and (max-width: 767px) {
   .single .single__content {
   padding: 30px 20px 80px;
   }

   .single__title {
   font-size: 2rem;
   line-height: calc(30 / 20);
   padding-bottom: .8em;
   }

   .single__cat-name {
   margin: 15px 0 30px;

   }

   .single__cat-name a {
   font-size: 1.2rem;
   }

   .single__btn {
   margin-top: 40px;
   }
}