@charset "utf-8";


/*====================
Common
====================*/
.news { margin: 80px auto; width: 70%; max-width: 1024px; font-weight: 500;}
.news__detail-btn { margin: 32px auto; }
.news-main a { color:#000 !important; }

.newsDetail{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.newsDetailTxt{
  margin: 32px 0;
}

.Blog-detail-img img{
  width: 100%!important;
}

/*====================
Category Buttons
====================*/
.news-cate { margin: 80px 0; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;}
.news-cate a {
  position: relative;
color: #1E4D3E !important;
padding: 4px 32px 4px 0;
font-weight: bold;
display: block;
width: auto;
text-align: center;
font-size: 18px;
  border-bottom: 1px solid transparent; 
}

.news-cate a:before{
	content: "";
	position: absolute;
 	top: 8px;
  	right: 0;
  	width: 20px;
  	height: 21px;
    background: url("https://kzd2025.co.jp/system_panel/uploads/images/20251203155337377609.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.news-cate a.selected { border-bottom: 1px solid #1E4D3E;  opacity: 1; }
  
.news-cate a:hover { border-bottom: 1px solid #1E4D3E;  opacity: 1;}
.news-cate a p { line-height:1.5; font-weight:bold; }
.news-cate .webgene-blog { display:flex; align-items:center; gap:32px; }


.newsDetailCate {
color:#403C3C !important;
padding: 8px 24px;
border: 1px solid #403C3C;
border-radius: 30px;
font-weight:400;
display:block;
}

.newsDetailTit{ 
  font-size: 24px; 
  font-weight: bold;
}

.newsDetail-wrap-title{
  	display: flex;
    flex-direction: column;
    gap: 20px;
  margin-bottom: 24px;
}

/*====================
List Layout
====================*/
.news-main .webgene-blog { display:flex; flex-wrap:wrap; gap:2%; }
.news-main .webgene-blog article { width:100%; font-size:18px; }
.news-main .webgene-blog article > a { padding:10px 10px 24px; display:flex; gap:24px; }

.newsItemTit { font-size:16px; font-weight: 500; color:#000;}
.newsItemText { display:flex; align-items:baseline; margin:0; gap:20px; font-size:16px; color:#1E4D3E; }
.newsItem-text { font-size:14px; font-weight: 500; color:#1E4D3E; }
.newsItemCatewrap { display:flex; gap:1rem; }
.newsItemCate { line-height:1; font-size:16px; font-weight: 700; color:#1E4D3E!important; width:fit-content; padding: 4px 16px; border: 1px solid #1E4D3E;}
.newsTextWrap { display:flex; gap:48px; align-items: center; border-bottom:1px solid #B5B5B5; width:100%; padding-bottom: 24px;}


/*====================
Pagination
====================*/
.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:auto;
margin:30px 10px 0; padding:4px;
list-style:none; border-bottom:1px solid #1E4D3E;
}
.webgene-pagination > ul > li.selected,
.webgene-pagination > ul > li:hover { background:transparent; opacity: .7; }
.webgene-pagination > ul > li a { color:#403C3C !important; padding:18px 4px; }
.webgene-pagination > ul > li.selected a,
.webgene-pagination > ul > li:hover a { color:#1E4D3E !important; border-color:#1E4D3E; font-size: 16px;}


.news-btn{
  margin: 48px auto;
  display: block;
  width: 240px;
  height: auto;
  color: #FFF;
  font-size: 16px;
  padding: 14px 20px;
  background-color: #1E4D3E;
  border-radius: 10px;
  text-align: center;
}

.news-btn:hover{
  opacity: .7;
  color: #FFF;
}

.newsDetail-wrap{
  padding-bottom: 16px;
  border-bottom: 2px solid #000;
}
.Blog-detail-img img{
  height: 480px!important; 
  object-fit: cover;
}

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

@media (max-width:1024px) {
.news-cate .news-cate .webgene-blog { gap:16px; }
  .webgene-item-main-image { height: 200px; }
}

@media (max-width:960px) {
.news .news-main { margin-bottom:80px; }
.news { width:90%; }
.news-cate { flex-wrap:wrap; margin: 40px 0; gap: 8px;}
.news-cate .webgene-blog { flex-wrap:wrap; gap: 8px; }
.news-main .webgene-blog { gap:10px 0; }
.news-cate a { padding: 8px 20px;  width: 160px;}
.newsDetailImg img { height:240px; }
  
  .newsTextWrap { flex-direction: column; gap:20px; align-items: flex-start; border-bottom:1px solid #B5B5B5; width:100%; padding-bottom: 24px;}

.newsDetailTxt { font-size:14px; font-weight:500; }
.newsDetail-header p:nth-child(2) { padding:0 16px; }
  .news-main .webgene-blog article { width:100%; font-size:14px; }
  .news-main .webgene-blog article > a {
      display: flex;
      flex-direction: row;
  }
  .webgene-item-main-image{
    width: 140px;
    height: auto;
    object-fit: cover;
  }
  .newsItemTit { min-height: auto}
}