@charset "utf-8";


/*====================
Common
====================*/
.news { position: relative; margin: 0 auto; padding: 0 0 3rem 0; width: 100%; }

.news-inner { 
  position: relative; 
  margin: 2.5rem auto; 
  width: 70%; 
  display: flex;
  gap: 5rem;
}

.news-inner-detail { 
  position: relative; 
  margin: 2.5rem auto; 
  width: 70%; 
}
.news__detail-btn { margin: 2rem auto; }
.news-main a { color:#000 !important; }


.newsDetail{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: #EBF7E1;
    padding: 3rem;
}

/*====================
Category Buttons
====================*/
.news-cate { 
  position: relative;
  margin: 0; 
  display: flex; 
  gap: 1rem; 
  flex-direction:column; 
  padding: 1.5rem 1.5rem 2.5rem 1.5rem;
  background-color: #FFF;
  border-radius: 10px;
  border: 1px solid #008459;
  height: fit-content;
}
.news-cate:before { 
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 1rem;
  left: 1rem;
  background-image: linear-gradient(90deg, #cee575, #2fc080 40%, #00a33e);
  border-radius: 10px;
  z-index: -1;
}
.news-cate a {
color: #008459 !important;
padding: .5rem 0;
display: block;
width: 180px;
font-size: 18px;
font-weight: bold;
transition: all .5s;
border-bottom: 1px solid #C9C9C9;
}

.news-cate p {
color: #008459 !important;
font-size: 14px;
font-weight: bold;
}
.news-cate a:hover { opacity: .6;}
.news-cate a p { 
color: #008459 !important;
font-size: 18px;
font-weight: bold;
}
.news-cate .webgene-blog { display:flex; align-items:center; gap:2rem; }

.newsDetailCate {
color:#3D6873 !important;
padding: 0.25rem 1.5rem;
border: 1px solid #00A109;
border-radius: 8px;
font-weight:400;
display:block;
}


/*====================
List Layout
====================*/
.news-main .webgene-blog { display:flex; flex-wrap:wrap; gap:1.5rem; }
.news-main .webgene-blog article { width:100%; font-size:clamp(1.5rem, 0.659rem + 0.3vw, 2rem); }
.news-main .webgene-blog article > a { padding:10px; display:flex; flex-direction:column; gap:1rem;}
.news-main .webgene-blog article > a:hover .newsTextWrap:before { 
  width: 100%;
}

.newsLink:hover{
  opacity: .6;
}

.newsCatch img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

.newsItemTit { 
  font-size: 18px; 
  font-weight: 600; 
  color: #008459;
}
.newsItemText { display:flex; align-items:center; gap:0.5rem;}
.newsItem-text { font-size:14px; font-weight:600; color:#008459; }
.newsItemTime { font-size:14px; line-height:1;  font-weight:600; color:#008459;}
.newsItemCatewrap { display:flex; gap:1rem; align-items: center;}
.newsItemCate { 
  line-height:1; 
  font-size: 12px;
  padding: .5rem 1rem;
  border-radius: 30px;
  border: 1px solid #008459;
  color:#008459!important; 
  width:fit-content; 
}
.newsDetailTxt{ 
  font-size:1rem; 
  font-weight:400; 
  color:#1F2C5C; 
  padding-bottom: 1rem;
  border-bottom: 2px solid #BEBEBE;
}

.newsTextWrap { position: relative; display:flex; flex-direction: column; gap: .5rem; border-bottom:2px solid #00A16C; width:100%; padding-bottom:1rem; }

.newsDetail-wrap{
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5rem 15%;
  background-color: #FFF;
}
.newsDetail-wrap-title{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #00A16C;
}
.newsDetail-wrap-title h2{
  font-weight: 600;
  font-size: 18px;
  color: #00A16C;
}

.newsDetailImg img{
  width: 90%;
  margin: 0 auto;
  max-height: 480px;
  object-fit: cover;
}

.newsDetail-pagelink{
  display: flex;
  justify-content: space-between;
}


/*====================
Pagination
====================*/
.webgene-item-aroundPageLink{
  position: relative;
  font-size: 1rem;
  font-weight: bold;
  color: #008459;
}

.webgene-item-prevPageLink{
  padding: 1rem 0 1rem 2.5rem;
}

.webgene-item-prevPageLink:before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 24px;
  height: 50px;
  background: url("https://withwinsandx.jp/system_panel/uploads/images/20260213175907416911.png");
  background-size: cover;
}

.webgene-item-nextPageLink{
  padding: 1rem 2.5rem 1rem 0;
}

.webgene-item-nextPageLink:before{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 24px;
  height: 50px;
  background: url("https://withwinsandx.jp/system_panel/uploads/images/20260213175907208892.png");
  background-size: cover;
}


.webgene-pagination { width:100%; grid-column:1 / 3; }
.webgene-pagination > ul { display:flex; padding:0; justify-content: center;  }
.webgene-pagination > ul > li {
  display:flex; 
  justify-content: center; 
  align-items:center;
  height:40px; 
  width:40px;
  margin:30px 10px 0; 
  padding:4px;
  color: #9A9A9A;
  font-weight: bold;
  font-size: 1.5rem;
}
.webgene-pagination > ul > li.selected,
.webgene-pagination > ul > li a { color:#008459 !important; padding: .25rem; }
.webgene-pagination > ul > li.selected a,
.webgene-pagination > ul > li:hover a { color:#008459 !important; border-bottom: 2px solid #008459;}


.news-btn{
  margin: 3rem auto;
}

.prev{
  display: none!important;
}

.next{
  display: none!important;
}

/*====================
Responsive
====================*/
@media (max-width:1200px) {
.webgene-item-main-image { height: 200px; }
  .news-inner { width: 80%;}
}

@media (max-width:1024px) {
.news-cate, .news-cate .webgene-blog { gap:1rem; }
  .webgene-item-main-image { height: 200px; }
  .news-inner { width: 90%;}
}

@media (max-width:960px) {
  .news-inner {  flex-direction:column;  }
  .news-title{
  margin: 1.5rem auto;
  padding-bottom: 1rem;
}
  .news-inner-detail { 
  position: relative; 
  margin: 2rem auto; 
  width: 95%; 
}
  .news-title h1{
  font-size: 2rem;
}
.news, .news-main { margin-bottom:5rem; }
.news-cate { flex-wrap:wrap; margin:2.5rem 0; gap: .5rem;}
.news-cate .webgene-blog { flex-wrap:wrap; gap:0.5rem; }
.news-main .webgene-blog { gap: 1rem;  flex-direction: column; }
.news-cate a { padding:0.5rem 1.3rem;  width: 160px;}
.newsDetailImg img { height:240px; }
.newsDetailTxt { font-size:14px; font-weight:500; }
.newsDetail-header p:nth-child(2) { padding:0 1rem; }
  .newsDetail-wrap{
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 1rem;
  background-color: #FFF;
}
  .newsDetail{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: #EBF7E1;
    padding: 3rem 3%;
}
  .news-main .webgene-blog article { width:auto; font-size:clamp(1.5rem, 0.659rem + 0.3vw, 2rem); }
  .news-main .webgene-blog article > a {
      display: flex;
      width: 100%;
  }
  .webgene-item-main-image{
    width: 140px;
    height: auto;
    object-fit: cover;
  }
  .newsItemTit { min-height: auto}
}

@media (max-width:600px) {
    .news-main .webgene-blog {
      justify-content: center;
  }
  .newsTextWrap { 
    flex-direction:column; 
    align-items: flex-start; 
    gap: 1rem; 
  }
  .newsDetail-wrap{
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
}