@charset "utf-8";

.homeNews{
	text-align: center;
	padding: 50px 4vw 40px;
}

.homeNews .newsBox{
	max-height: 560px;
	padding: 40px;
	overflow-y: scroll;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 0 0 20px 20px;
}

.homeNews .tabArea{
	margin-bottom: 0;
}

.newsArea .inner{
	max-width: 100%;
	width: 100%;
 }

.tabArea .tab{
	-ms-flex-preferred-size: calc((100% - 50px) / 6);
	flex-basis: calc((100% - 50px) / 6);
	max-width: calc((100% - 50px) / 6);
 }

.newsArea ul.newsBox li{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-bottom: 1px dotted #ccc;
	padding-bottom: 20px;
	margin-bottom: 20px;
	text-align: left;
}

.newsArea ul.newsBox li:not(:first-child){
	padding-top: 20px;
}

.newsArea ul.newsBox .newsImageLink{
	display: block;
	flex-shrink: 0;
	margin-right: 40px;
	text-decoration: none;
}

.newsArea ul.newsBox .newsImage{
	border: 1px solid #ccc;
	border-radius: 15px;
	box-sizing: border-box;
	width: 240px;
	overflow: hidden;
}

.newsArea ul.newsBox .newsImage figure{
	overflow: hidden;
	margin: 0;
}

.newsArea ul.newsBox .newsImage figure img{
	transition: .4s;
	vertical-align: bottom;
	object-fit: cover;
	font-family: "object-fit: cover;";
	
	width: 240px;
	height: 156px;
}

.newsArea ul.newsBox .newsImageLink:hover figure img{
	transform: scale(1.08);
}

.newsArea ul.newsBox .newsTxt{
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.newsArea ul.newsBox .newsTxt p{
	font-size: 1.4rem;
	color: #666;
	font-weight: 600;
	margin-bottom: 15px;
	align-items: flex-start;
 	-webkit-box-align: start;
	-ms-flex-align: start;
	display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/*.newsArea ul.newsBox .newsTxt p a[class^="label"]{
	font-size: 1.2rem;
	line-height: 24px;
	width: 140px;
	color: #fff;
	display: inline-block;
	text-align: center;
	position: relative;
	font-weight: 600;
	border-radius: 20px;
	margin-left: 20px;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.newsArea ul.newsBox .newsTxt p a[class^="label"]:hover{
	opacity: 0.8;
}*/

.newsArea ul.newsBox .newsTxt .newsTtl{
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.newsArea ul.newsBox .newsTxt .newsTtl a{
	text-decoration: none;
	transition: .4s ease-out;
	display: block;
}

.tabArea{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	border-bottom: 4px solid #84c83d;
	border-bottom: 4px solid var(--under-line-color, #84c83d);
	transition: border-color 0.4s ease-out;
	margin-bottom: 40px;
}

.tabArea .tab span{
	font-size: clamp(1.8rem, 1vw, 2.4rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 20px 5px 15px;
	text-align: center;
	color: #fff;
	background: #787878;
	cursor: pointer;
	-webkit-transition: .4s ease-out;
	transition: .4s ease-out;
	border: 2px solid #787878;
	border-radius: 20px 20px 0 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	line-height: 1.2;
	height: 100%;
 }

.tabArea .tab span {
	background: #787878;
	border-color: #787878;
	color: #FFFFFF;
	transition: .4s ease-out;
}

.tabArea .tab.isActive span,
.tabArea .tab[data-filter="all"]:hover span{
	background: #84c83d;
	border-color: #84c83d;
	color: #FFFFFF;
}

/* 保育園 (group1) */
.tabArea .tab.group1Active.isActive span,
.tabArea .tab.group1Active:hover span{
	background: #31c6cb;
	border-color: #31c6cb;
	color: #FFFFFF;
}

/* 学童 (group2) */
.tabArea .tab.group2Active.isActive span,
.tabArea .tab.group2Active:hover span{
	background: #cb72c6;
	border-color: #cb72c6;
	color: #FFFFFF;
}

/* 子育て支援 (group3) */
.tabArea .tab.group3Active.isActive span,
.tabArea .tab.group3Active:hover span{
	background: #dc8735;
	border-color: #dc8735;
	color: #FFFFFF;
}

/* 本部 (group4) */
.tabArea .tab.group4Active.isActive span,
.tabArea .tab.group4Active:hover span{
	color: #FFFFFF;
	background: #31cb7d;
	border-color: #31cb7d;
}

/* 地域活動 (group5) */
.tabArea .tab.group5Active.isActive span,
.tabArea .tab.group5Active:hover span{
	background: #cba931;
	border-color: #cba931;
	color: #FFFFFF;
}

/* --- ラベルの色設定（ここが重要！） --- */
.label01 { background: #31c6cb !important; border-color: #31c6cb !important; color: #fff; }
.label02  { background: #cb72c6 !important; border-color: #cb72c6 !important; color: #fff; }
.label03{ background: #dc8735 !important; border-color: #dc8735 !important; color: #fff; }
.label04 { background: #31cb7d !important; border-color: #31cb7d !important; color: #fff; }
.label05 { background: #cba931 !important; border-color: #cba931 !important; color: #fff; }

/* ラベルの基本スタイル */
.newsArea ul.newsBox .newsTxt p a[class^="label"],
.detailArea .category {
	font-size: 1.2rem;
	line-height: 24px;
	width: 140px;
	color: #fff !important;
	display: inline-block;
	text-align: center;
	font-weight: 600;
	border-radius: 20px;
	margin-left: 20px;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.newsArea ul.newsBox .newsTxt p a[class^="label"]:hover{
	opacity: 0.8;
}


/*.label01{
	background: #31c6cb;
	color: #fff;
}

.label02{
	background: #cb72c6;
	color: #fff;
}

.label03{
	background: #dc8735;
	color: #fff;
}

.label04{
	background: #31cb7d;
	color: #fff;
}

.label05{
	background: #cba931;
	color: #fff;
}*/

.newsArea .btnmoreGreen{
	margin-top: 50px;
}

/* お知らせ　下層
------------------------------------------------------------*/
.contents .newsArea .inner{
	margin: 0 auto;
	max-width: 1400px;	
	padding: 0 4vw 0;
}

.newsArea .contentArea{
	text-align: center;
 }

/* お知らせ 詳細
------------------------------------------------------------*/
.detailArea .inner{
	max-width: 960px;
	width: 100%;
	text-align: left;
}

h3.bgGray{
	font-size: 2.4rem;
	margin-bottom: 20px;
	text-align: left;
	display: block;
	background: #f5f5f5;
	padding: 15px;
	border-radius: 10px;
	line-height: 1.6;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

h3.bgGray::after{
	content: none;
}

.detailArea .newsText .iconDate{
	margin-bottom: 20px;
}

.detailArea .category{
	font-size: 1.3rem;
	line-height: 1.8;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	width: 140px;
	display: inline-block;
	text-align: center;
	margin: 0 0 0 15px;
	border-radius: 20px;
}

.detailArea .date{
	font-size: 1.4rem;
	line-height: 1.6;
	display: block;
	margin-bottom: 15px;
}

.detailArea .cf{
	margin-bottom: 80px;
}

.mb0box p{
	margin-bottom: 0
}

.detailArea .newsTxt{
	margin-bottom: 40px;
}

.detailArea .newsTxt a{
	text-decoration: none;
}

.detailArea .pic{
	margin: 0 0 30px 30px;
}

.btnBox{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.btnWrap {
	margin-top: 40px;
}

.btnBox li:not(:last-child){
	margin-right: 20px;
}

.btnBox .btnPre,
.btnBox .btnNext{
	-webkit-transition: .4s ease-out;
	transition: .4s ease-out;
}

.btnBox .btnmoreGreen.btnPre::after{
	left: 15px;
	-webkit-transform: rotate( 180deg );
	transform: rotate( 180deg );
}

.btnWrap .btnmoreGreen{
	padding: 16px 40px;
}

.detailArea table{
	width: initial;
}

.detailArea table th{
	width: 30%;
}

/* ページネーション
------------------------------------------------------------*/
/*
ul.pagination{
	display: inline-block;
	margin-top: 60px;
	text-align: center;
	width: 100%;
}

ul.pagination li{
	display: inline-block;
}

ul.pagination li:not(:last-child){
	margin-right: 10px;
}

ul.pagination li:not(:first-of-type)  a,
ul.pagination li:not(:last-of-type)  a{
	color: #84c83d;
	padding: 8px 18px;
	display: block;
	text-decoration: none;
	-webkit-transition: .4s ease-out;
	transition: .4s ease-out;
	border: 2px solid #84c83d;
	border-radius: 24px;
	font-weight: 600;
}

ul.pagination li:first-child a,
ul.pagination li:last-child a{
	position: relative;
	width: 110px;
}

ul.pagination li:first-child:hover a::after,
ul.pagination li:last-child:hover a::after{
	background: url("../img/arrow_8x11.png") no-repeat;
}

ul.pagination li:first-child a::after,
ul.pagination li:last-child a::after{
	content: "";
	background: url("../img/arrow_8x11_green.png") no-repeat;
	background-size: contain;
	display: inline-block;
	position: absolute;
	width: 8px;
	height: 11px;
	top: calc(50% - 6px);
}

ul.pagination li:first-child a::after{
	left: 15px;
	-webkit-transform: rotate( 180deg );
	transform: rotate( 180deg );
}

ul.pagination li:last-child a::after{
	right: 15px;
}

ul.pagination li a.ac{
	background: #84c83d;
	border: 1px solid #84c83d;
	color: #fff;
	opacity: 1 !important;
}

ul.pagination li a:hover:not(.ac){
	color: #fff;
	background: #84c83d;
	opacity: 1 !important;
}

ul.pagination li:first-child:has(+ li a.ac) {
    display: none;
}

ul.pagination li:last-child:has(prev li a.ac),
ul.pagination li:has(a.ac):last-to-type + li:last-child { 
    display: none; 
}
*/

.btnBox .btnmoreGreen.btnPre::after{
	left: 15px;
	-webkit-transform: rotate( 180deg );
	transform: rotate( 180deg );
}

/* ページネーション
------------------------------------------------------------*/
.pagination-wrap {
	margin-top: 50px;
	text-align: center;
}

.pagination-wrap ul.page-numbers {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 8px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.pagination-wrap ul.page-numbers li a,
.pagination-wrap ul.page-numbers li span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 40px; 
	height: 40px;
	text-decoration: none;
	font-size: 1.4rem;
	font-weight: bold;
	color: #84c83d;
	background: #fff;
	border: 2px solid #84c83d;
	border-radius: 50%;
	transition: .3s ease-out;
	box-sizing: border-box;
}

.pagination-wrap ul.page-numbers li span.current {
	background: #84c83d;
	color: #fff;
	border-color: #84c83d;
	cursor: default;
}

.pagination-wrap ul.page-numbers li a:hover {
	background: #84c83d;
	color: #fff;
	opacity: 1;
}

.pagination-wrap ul.page-numbers li a.prev,
.pagination-wrap ul.page-numbers li a.next {
	width: auto; 
	min-width: 80px;
	border-radius: 20px;
	padding: 0 10px;
}

.pagination-wrap ul.page-numbers li a.prev span,
.pagination-wrap ul.page-numbers li a.next span {
	border: none;
	background: none;
}

.pagination-wrap ul.page-numbers li a.prev:hover span,
.pagination-wrap ul.page-numbers li a.next:hover span {
	color: #fff;
}

/*SP版
==================================================================================================================================================================================================================*/
@media screen and (max-width: 600px){
	/* home
	------------------------------------------------------------*/
	.homeNews{
		text-align: center;
		padding: 30px 0 40px;
	}

	.homeNews .newsArea .inner{
		max-width: 100%;
		width: initial;
	 }	

	.homeNews .newsBox{
		max-height: 240px;
		padding: 20px;
	}

	.homeNews .newsArea .btnmoreGreen{
		margin-top: 30px;
		padding: 16px 50px;
	 }	

	.newsArea ul.newsBox li{
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	
	.newsArea ul.newsBox li:not(:first-child) {
		padding-top: 0px;
	}

	.newsArea ul.newsBox .newsImageLink{
		width: 80px;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.newsArea ul.newsBox .newsImage{
		border-radius: 8px;
	}

	.newsArea ul.newsBox .newsImage{
		width: 100%;
		border-radius: 8px;
	}
	
	.newsArea ul.newsBox .newsImage figure img {
		height: auto;
	}

	.newsArea ul.newsBox .newsTxt .newsTtl{
		font-size: 1.4rem;
		line-height: 1.4;
	}

	.newsArea ul.newsBox .newsTxt .newsTtl a{
		display: block;
	}

	.newsArea ul.newsBox .newsTxt p{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 1.1rem;
		margin-bottom: 8px;
	}

	.newsArea ul.newsBox .newsTxt p a[class^="label"]{
		font-size: 1rem !important;
		width: 100px !important;
		line-height: 20px;
		margin-left: 10px;
	}

	.tabArea .tab{
		-ms-flex-preferred-size: 49%;
		flex-basis: 49%;
		max-width: 49%;
	 }

	.tabArea .tab:nth-of-type(n+3){
		margin-top: 15px;
	 }	

	.tabArea .tab span {
		font-size: 1.4rem;
		padding: 12px 10px 10px;
	}

	/* お知らせ 詳細
	------------------------------------------------------------*/
	.detailArea .inner{
		max-width: 90%;
		width: 90%;
		text-align: left;
	}

	h3.bgGray{
		font-size: 1.8rem;
		margin-bottom: 20px;
		text-align: left;
		display: block;
		background: #f5f5f5;
		padding: 15px;
		border-radius: 10px;
		line-height: 1.6;
		font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	}

	h3.bgGray::after{
		content: none;
	}

	.detailArea .newsText .iconDate{
		margin-bottom: 20px;
	}

	.detailArea .category{
		font-size: 1.2rem;
		line-height: 1.8;
		display: inline-block;
		text-align: center;
		margin: 0 0 0 15px;
		border-radius: 20px;
	}

	.detailArea .date{
		font-size: 1.4rem;
		line-height: 1.6;
		display: block;
		margin-bottom: 15px;
	}

	.detailArea .cf{
		margin-bottom: 40px;
	}

	.detailArea .newsTxt a{
		text-decoration: none;
	}

	.detailArea .pic{
		margin: 0 0 30px 30px;
	}

	.btnBox{
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.btnBox li:not(:last-child){
		margin-right: 10px;
	}
	
	.btnWrap .btnBox .btnmoreGreen {
		padding: 16px 30px;
	}

	.btnBox .btnPre,
	.btnBox .btnNext{
		width: 110px;
		-webkit-transition: .4s ease-out;
		transition: .4s ease-out;
		padding: 10px 20px 10px 10px !important;
	}


	.btnBox .btnmoreGreen.btnPre::after{
		left: 15px;
		-webkit-transform: rotate( 180deg );
		transform: rotate( 180deg );
	}

	.detailArea table{
		width: initial;
	}

	.detailArea table th{
		width: 100%;
	}

	.btnBox .btnPre,
	.btnBox .btnNext{
		width: 80px;
		font-size: 1.4rem;
		-webkit-transition: .4s ease-out;
		transition: .4s ease-out;
		padding: 10px 10px 10px 10px;
	}

	.btnBox .btnPre{
		padding: 10px 10px 10px 20px;
	}	

	.btnBox .btnNext{
		padding: 10px 20px 10px 10px;
	}	

	.btnmoreGreen{
		padding: 10px 30px 10px 10px;
	}

	.btnBox .btnmoreGreen.btnPre::after{
		left: 15px;
		-webkit-transform: rotate( 180deg );
		transform: rotate( 180deg );
	}
	
	/* ページネーション
	------------------------------------------------------------*/
	.pagination-wrap ul.page-numbers {
		gap: 4px;
	}
	
	.pagination-wrap ul.page-numbers li a,
	.pagination-wrap ul.page-numbers li span {
		width: 24px;
		height: 24px;
		font-size: 1.2rem;
		line-height: 1;
	}
	.pagination-wrap ul.page-numbers li a.prev,
	.pagination-wrap ul.page-numbers li a.next {
			min-width: 50px;
	}
}