header{
    background: var(--coler-Background-Gradient);
}
.page_title{
    background: var( --coler-Background-Accent);
}
h1{
    position: relative;
    background: url("../images/news/news_title_bg.jpg") no-repeat;
    background-position: top right;
    background-size: 90%;
    text-align: center;
    padding: 8% 0;
    color: var(--coler-Text-White);
    font-size: 4vw;
    font-weight: 500;
    letter-spacing: 0.1em;
    z-index: 1;
    animation-name: fadein;
    animation-duration:2s;
    animation-fill-mode: forwards;
    opacity: 0;
    
}
h1 span{
    display: block;
    font-family: var(--text-Title-sans_serif);
    font-size: 2vw;
     font-weight: 300;
    letter-spacing: 0.05em; 
}
@keyframes fadein
{
 0%{
     transform: translateX(50px);
     opacity: 0;
 }

 100%{
     transform: translateX(0);
     opacity: 1;
 }
}

/*パンくずリスト*/

.breadcrumb{
    position: absolute;
    width: 25%;
    background: var(--coler-Background-Primary);
    padding: 2% 5%;
    margin-top: -5vw;
    z-index: 2;
    
}
.breadcrumb li {
  display: inline; /*横に並ぶように*/
  list-style: none;
  font-size: 1vw;
}
.breadcrumb li:after { /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: var(--coler-Text-Primary);
}
.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb li a {
  text-decoration: none;
  color: var(--coler-Text-Primary);
}
.breadcrumb li a:hover {
  color: var(--coler-Text-Sub);
  text-decoration: underline;
}
@media (width < 1000px){
    .breadcrumb{
        width: 28%;
    }
    .breadcrumb li {
        font-size: 1.2vw;
    }
}
@media (width < 768px){
    .breadcrumb{
        width: 35%;
    }
    .breadcrumb li {
        font-size: 1.5vw;
    }
}
@media (width < 500px){
    h1{
        font-size: 5vw;
        padding: 7.5% 0;
    }
    h1 span{
        font-size: 2.5vw;
    }
    .breadcrumb{
        width: 45%;
        margin-top: -7vw;
    }
    .breadcrumb li {
        font-size: 2.5vw;
    }
}

/*ページ共通*/
main p {
    margin-bottom: 1em;
    line-height: 1.7em;
    letter-spacing: 0.05em;
    color: var(--coler-Text-Primary);
    font-size: 16px;
}
main section{
    padding-top: 5%;
}
h2{
    margin-bottom: 1em;
    color: var(--coler-Text-Primary);
}



/* news */
.news{
    padding: 10% 0;
}

.news ul {
  width: 80%;
  margin: 5% auto 2% auto;
}
.news ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #192E7A;
  align-items: center;
    padding: 1.5% 0;
    font-size: 1vw;
}
.news ul li a {
  color: var(--coler-Text-Primary);
  text-decoration: none;
}
.news ul li a:hover {
  color: #19BAFF;
  text-decoration: underline;
}
.news .day {
  width: 20%;
  text-align: left;
}
.news .category{
  width: 15%;
  background: #192E7A;
  color: var(--coler-Text-White);
  padding: 8px;
  margin-right: 5%;
  text-align: center;
    border-radius: 50px;
}
.news .content {
  width: 70%;
  text-align: left;
}
.news .btn{
    width: 20%;
    margin: 0 auto;
}
.news .align_center{
    width: 100%;
    margin: 2% 0 10% 0;
}
@media (width < 1300px){
    .news ul li, .news .btn{
        font-size: 1.4vw;
    }
    .news .btn-c{
         width: 27%;
    }
}
@media (width < 1000px){
    .news ul li, .news .btn{
        font-size: 1.7vw;
    }
    .news .btn-c{
         width: 33%;
    }
}
@media (width < 768px){
    .news ul {
        width: 90%;
    }
    .news ul li, .news .btn{
        font-size: 15px;
    }
    .news .btn-c{
         width: 50%;
    }
    .news .category{
        width: 30%;
    }
}
@media screen and (max-width: 630px) {

.news ul li {
    flex-wrap: wrap; 
    align-items: center;
    padding: 5% 0;
}
.news .day {
  width: 43%;
    margin-bottom: 3%;
}
.news .category {
  width: 45%;
  margin-bottom: 3%;
  text-align: center;
}
.news .content {
    width: 100%;
    }
.news .btn-c{
         width: 80%;
    }
}


/*ページネーション*/
.pnavi{
    width: 80%;
    margin:40px auto;
}
.nav-links{
   display:flex;
}
.pnavi .page-numbers{
   display:inline-block;
   margin-right:10px;
   color: var(--coler-Text-Accent);
   border-radius:3px;
   padding:10px 15px;
   border:1px solid #072B79;
    text-decoration: none;
}

.pnavi .page-numbers:hover{
    background: #8DB0EF;
    transition: .3s;
}
.pnavi .current{
   padding:10px 15px;
   background:var(--coler-Background-Accent);
   color: var(--coler-Text-White);
}

.pnavi .prev,
.pnavi .next{
   background:transparent;
   box-shadow:none;
   color: var(--coler-Text-Accent);
}
.pnavi .dots{
   background:transparent;
   box-shadow:none;
}

/*ニュースsingle*/
.news_single_wrap{
    width: 60%;
    margin: 0 auto;
    padding: 10% 0;
    line-height: 1.7em;
    letter-spacing: 0.05em;
}
.news_single_wrap h2{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--coler-Text-Accent);
}
.news_single_wrap
.news_single_wrap .date{
    margin-bottom: 5%;
}
.news_single_wrap .pn ul{
	display: flex;
	justify-content: space-between;
    margin-top: 10%;
    padding: 5% 0;
}
.news_single_wrap .pn ul li{
    color: var(--coler-Text-Accent);
    
}
.news_single_wrap .pn ul li a:hover{
    color: var(--coler-Text-Sub);
    
}
.news_single_wrap .entry-content p{
    margin-bottom: 1em; 
}
.news_single_wrap .entry-content img{
    margin: 1em 0;
}
.news_single_wrap article{
    margin-top: 3em;
}
.date{
    color: #878787;
}
@media (width < 768px){
    .news_single_wrap,.pnavi {
        width: 90%;
    }
}