.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
.page-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 30px;
	text-align: center;
}
.topVer,
.newsVer {
	display: none;
}
.page-top .topVer {
	display: block;
}
.page-news .newsVer {
	display: block;
}

/* --- カテゴリタブの色定義 --- */
.category-tabs.all .active,
.category-tabs  button:first-of-type:hover { background-color: var(--color-base) !important; color: #fff !important; }
.tab-all .active,
.tab-all button:hover:not(.active) { background-color: var(--color-base) !important; color: #fff !important; }
.tab-important .active,
.tab-important button:hover:not(.active) { background-color: var(--color-red) !important; color: #fff !important; }
.tab-info .active,
.tab-info button:hover:not(.active) { background-color: var(--color-olive) !important; color: #fff !important; }
.tab-workers .active,
.tab-workers button:hover:not(.active) { background-color: var(--color-pink) !important; color: #fff !important; }
.tab-other .active,
.tab-other button:hover:not(.active) { background-color: var(--color-deep-blue) !important; color: #fff !important; }

/* 記事カテゴリのタグの色 */
.article-category {
	padding: 8px 14px;
	border-radius: calc(8 * var(--layout-unit));
	font-size: clamp( 12px, calc( 11.514563106796116px + 0.12944983818770225vw ), 14px );
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}
.article-category.important { background-color: var(--color-red); }
.article-category.info { background-color: var(--color-olive); }
.article-category.workers { background-color: var(--color-pink); }
.article-category.other { background-color: var(--color-deep-blue); }


/* --- SP (モバイル: 960px以下) スタイル --- */
.page-title {
	margin-top: 10px;
}
.news-wrap{
  margin: calc(5 * var(--layout-unit)) calc(1.5 * var(--layout-unit)) calc(7 * var(--layout-unit));
}
/* カテゴリタブ */
.category-tabs {
	display: flex;
	flex-wrap: wrap;
  justify-content: center;
	list-style: none;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 10px; /* スクロールバーのためのパディング */
	overflow-x: auto; /* SPでは横スクロール */
	-webkit-overflow-scrolling: touch;
}
.category-tabs button {
	display: block;
	padding: 8px 16px;
	border-radius: var(--radius-full);
	cursor: pointer;
	background-color: #F8F8F8;
	border: 1px solid #ccc;
	font-weight: 700;
	/* flex-shrink: 0; */
	transition: all 0.2s ease;
}
.category-tabs .active {
	border-color: transparent;
}

/* 記事一覧 */
.news-articles {
	border-top: 1px solid #ddd;
	/* padding-top: 15px; */
}
.news-article {
	display: flex;
	flex-direction: column;
	padding: calc(1.8 * var(--layout-unit)) 0;
	border-bottom: 1px solid #ddd;
}
.article-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}
.article-date {
	font-size: clamp( 12px, calc( 10.076923076923077px + 0.5128205128205128vw ), 15px );
	color: #767676;
	flex-shrink: 0;
}
.article-title {
	font-weight: 400;
}
.article-title a {
	color: var(--color-base);
	transition: .4s all;
}
.article-title a:hover {
	text-decoration: underline;
	font-weight: 700;
}

/* 記事がない場合のメッセージ */
.no-article-message {
	padding: 40px 0;
	text-align: center;
	color: #999;
}


@media (min-width: 961px) {
.container {
	padding: 50px 40px;
}
.page-title {
	text-align: left;
	margin-bottom: 50px;
	font-size: 3rem;
}
.news-wrap{
  width: calc(130 * var(--layout-unit));
  margin: 80px auto 100px;
}
.news-content {
	display: flex;
	gap: 40px;
}

/* カテゴリタブ（PC） */
.news-categories {
	flex-basis: 220px;
	flex-shrink: 0;
	margin-top: 0;
}
.category-tabs {
    justify-content: flex-start;
    flex-direction: column;
    
	gap: 10px;
	overflow-x: visible; /* 横スクロールを解除 */
}
.category-tabs button {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	border-radius: var(--radius-full);
	text-align: left;
	border: none;
	background-color: #F8F8F8;
}

.category-tabs .active {
	background-color: var(--color-base); /* active時の背景色はJSで動的に上書きされる */
	color: #fff;
	font-weight: 700;
}

/* 記事一覧 (PC) */
.news-articles {
	flex-grow: 1;
	border-top: 1px solid #ddd;
}
.news-article {
	flex-direction: row; /* 横並び */
	align-items: center;
	padding: 20px 0;
	gap: 30px;
}
.article-meta {
	margin-bottom: 0;
	flex-basis: 250px;
	flex-shrink: 0;
	gap: 20px;
}
.article-title {
	flex-grow: 1;
	padding-right: 0;
}
}

/* ページャー*/
.news-pager-container {
margin-top: 40px;
text-align: center;
}
.pager-wrapper {
display: inline-flex;
	justify-content: center;
	align-items: center;
gap: 14px;
border-radius: 9999px;
background-color: #F8F8F8;
  padding: 0 16px;
  width: 100%;
}
.pager-arrow, .pager-num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
  margin: 18px 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid #ddd;
	color: var(--color-base);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
	&.prev::after,
	&.next::after {
		content: '';
		display: inline-block;
		width: 12px;
		height: 12px;
		background: #fff;
	}
	&.prev::after {
		clip-path: polygon(0 50%, 80% 0, 80% 100%);
	}
	&.next::after {
		clip-path: polygon(20% 0, 100% 50%, 20% 100%);
	}
}
.pager-num.active,
.pager-num:hover {
	background-color: var(--color-base);
	border-color: var(--color-base);
	color: #fff;
}
.pager-arrow {
	background-color: var(--color-base);
	border-color: var(--color-base);
  position: relative;
}
.pager-arrow svg {
	width: 24px;
	height: 24px;
	fill: #fff;
}
.pager-arrow.disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.pager-arrow.prev{
  margin-right: 12px;
}
.pager-arrow.next{
  margin-left: 12px;
}
.pager-arrow.prev::before,
.pager-arrow.next::before{
  content: "";
  display: block;
  width: 1px;
  height: 80%;
  background-color: var(--color-base);
  position: absolute;
  top: 10%;
  opacity:.2;
  filter: alpha(opacity=20);
  -ms-filter: "alpha(opacity=20)";
}
.pager-arrow.prev::before{
  right: -14px;
}
.pager-arrow.next::before{
  left: -14px;
}
.pager-ellipsis {
	margin: 0 5px;
	color: #666;
}
@media (min-width: 961px) {
  .news-pager-container {
    text-align: center;
  }
  .pager-wrapper {
    gap: 14px;
    padding: 0 28px;
    width: auto;
  }
  .pager-arrow.prev{
    margin-right: 16px;
  }
  .pager-arrow.next{
    margin-left: 16px;
  }
  .pager-arrow.prev::before{
    right: -16px;
  }
  .pager-arrow.next::before{
    left: -16px;
  }
}


/* --------------------------------------------------------
news_detail
   -------------------------------------------------------- */
.news_detail{
  margin: calc(5 * var(--layout-unit)) calc(1.5 * var(--layout-unit)) calc(7 * var(--layout-unit));
  line-height: 2.1em;
}
.news_detail-title{
  font-size: clamp(34px, calc(20px + 1.4583333333333333vw), 48px);
  margin-top: 0.5em;
  line-height: 1.5;
	@media (width <= 960px) {  font-size: clamp(22px, calc(25 / 1920 * 100vw), 29px);
  line-height: 1.5;
  }
}
.news_detail-content{
  margin-top: calc(3 * var(--layout-unit));
	font-size: clamp(13px, calc(8.991657977059437px + 0.4171011470281543vw), 17px);
  line-height: 2.1;
	@media (width <= 960px) {
    font-size: clamp(14px, calc(10.153846153846153px + 1.0256410256410255vw), 20px);
    line-height: 1.75;
  }
}
.news_detail-content .btn{
  line-height: 1.4;
}
.news_detail-figure{
  border-radius: 20px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  max-width: 840px;
  margin: calc(2 * var(--layout-unit)) auto;
}
.news_detail-imagewrap .news_detail-figure + .news_detail-figure{
  margin-top: calc(-1 * var(--layout-unit));
}
.news_detail-txt:not(:first-of-type){
  margin-top: 1.5em;
}
.news_detail-marginbox{
  margin-top: 2em;
}
.news_detail strong{
  color: var(--color-purple);
}
.news_heading-lv2{
  font-size: clamp(20px, calc(23 / 1920 * 100vw), 27px);
  line-height: 1.5;
  margin-top: 1.5em;
}
.news_heading-lv3{
  font-size: clamp(20px, calc(23 / 1920 * 100vw), 27px);
  line-height: 1.5;
  margin-top: 1.5em;
  padding-left: 0.5em;
  position: relative;
}
.news_heading-lv3::before{
  content: "";
  display: block;
  width: 0.2em;
  height: calc(100% - 0.5em);
  position: absolute;
  border-radius: 9999px;
  left: 0;
  top: 0.25em;
  background: transparent linear-gradient(180deg, #CD5692 0%, #933E9D 100%) 0% 0% no-repeat padding-box;
}
.news_heading-lv4{
  font-size: clamp(17px, calc(20 / 1920 * 100vw), 24px);
  line-height: 1.5;
  margin-top: 1.5em;
  border-bottom: solid 1px var(--color-pink);
  padding-bottom: 0.3em;
}
.news_heading-lv5{
  width: 100%;
  text-align: center;
  font-size: clamp(14px, calc(17 / 1920 * 100vw), 21px);
  line-height: 1.5;
  margin-top: 1.5em;
  color: var(--color-white);
  border-radius: 9999px;
  background: var(--grad);
  padding: 0.5em;
}
.news_detail-column .news_detail-figure{
  margin: 0;
}
.news_emphasis{
  color: var(--color-white);
  background-color: var(--color-pink);
  padding: 30px 20px;
  border-radius: 20px;
  margin-top: calc(2 * var(--layout-unit));
}
.news_emphasis_subttl{
  position: relative;
	width: fit-content;
	margin-inline: auto;
	color: var(--color-white);
	font-size: clamp(0.9375rem, 0.625rem + 0.5208vw, 1.25rem);
	font-weight: 700;
	@media (width <= 960px) {
		font-size: clamp(0.9375rem, 0.7372rem + 0.8547vw, 1.25rem);
	}
	&::before,
	&::after {
		position: absolute;
		top: 30%;
		content: '';
		display: inline-block;
		width: 1px;
		height: 60%;
		background: var(--color-white);
	}
	&::before {
		left: -10px;
		transform: rotate(-30deg);
	}
	&::after {
		right: -10px;
		transform: rotate(30deg);
	}
}
.news_emphasis_ttl{
text-align: center;
	font-size: clamp(1.875rem, 1.25rem + 1.0417vw, 2.5rem);
	line-height: 1.5;
	@media (width <= 960px) {
		margin-top: 4px;
		font-size: clamp(1.875rem, 1.4744rem + 1.7094vw, 2.5rem);
		line-height: 1.26;
	}
}
.news_table-wrap{
  margin-top: calc(2 * var(--layout-unit));
  overflow-x: auto;
}
.news_table{
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  width: 100%;
  border:solid 1px #DEDEDE;
}
.news_table th:not(:first-child),
.news_table td:not(:first-child){
  border-left:solid 1px #DEDEDE;
}
.news_table tbody tr:not(:last-of-type) th,
.news_table tbody tr:not(:last-of-type) td{
  border-bottom:solid 1px #DEDEDE;
}
.news_table thead th{
  color: var(--color-white);
  background-color: var(--color-purple);
  padding: 1em;
}
.news_table tbody th{
  background-color: #F7F5F7;
  color: var(--color-purple);
  white-space: nowrap;
  padding: 1em;
  width: 20%;
}
.news_table tbody td{
  padding: 0.8em 0.5em;
}
@media (max-width: 960px) {
  .news_detail-column{
        display:flex;
      -ms-flex-pack:distribute;
      flex-direction: column;
      flex-wrap: wrap;
    margin: calc(2 * var(--layout-unit)) 0;
  }
  .news_detail-column-image{
    order: -1;
    margin: 0 auto calc(1 * var(--layout-unit));
  }
  .news_table-wrap {
    padding-bottom: 0.5em;
    overflow-y: scroll;
    scrollbar-width:0.5em;
    scrollbar-color: #000 #e5e5e5;
  }
  .news_table-wrap::-webkit-scrollbar {
    width: 0.5em;
  }
  .news_table-wrap::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 9999px;
  }
  .news_table-wrap::-webkit-scrollbar-track {
    background:#e5e5e5;
  }
  .news_table-wrap .news_table.-sp-200{
    width: 200%;
  }
  .news_table tbody th{
    width: 18%;
  }
}
@media (min-width: 961px) {
  .news_detail{
    width: calc(110 * var(--layout-unit));
    margin: 80px auto 100px;
  }
  .news_detail-content{
    margin-top: 60px;
  }
  .news_detail-figure{
    border-radius: 30px;
    margin: 60px auto;
  }
  .news_detail-imagewrap.-unit-pc2{
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 50px 0;
  }
  .news_detail-imagewrap.-unit-pc2 .news_detail-figure{
    max-width: 430px;
    margin: 0;
  }
  .news_heading-lv2{
    font-size: clamp(31px, calc(38 / 1920 * 100vw), 45px);
    margin-top: 60px;
  }
  .news_heading-lv3{
    font-size: clamp(21px, calc(28 / 1920 * 100vw), 35px);
    margin-top: 60px;
  }
  .news_heading-lv4{
    font-size: clamp(17px, calc(24 / 1920 * 100vw), 31px);
    margin-top: 60px;
  }
  .news_heading-lv5{
    font-size: clamp(17px, calc(20 / 1920 * 100vw), 27px);
    margin-top: 60px;
  }
  .news_detail-column{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
    align-items: center;
    margin: 50px 0;
  }
  .news_detail-column-image{
    width: calc(49 * var(--layout-unit));
  }
  .news_detail-column-txt{
    width: calc(100% - (54 * var(--layout-unit)));
  }
  .news_emphasis{
    margin-top: 50px;
    padding: 50px calc(12 * var(--layout-unit));
    border-radius: 30px;
  }
}