@charset "UTF-8";

/* # =================================================================
   # ファーストビュー
   # ================================================================= */


.fv-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
}
.fv-movie {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.fv-movie video {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

.fv-txt-box{
	position: absolute;
	bottom:150px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: 2;
	width:90%;
}

.fv-txt1{
	font-size:50px;
	line-height:1.5;
	font-weight:Bold;
	color: var(--color-white);
	letter-spacing:0.2em;
	text-align:left;
}

.fv-txt2{
	font-size:30px;
	font-weight:500;
	color: var(--color-white);
	text-align:left;
	padding-top:20px;
}


.fv-txt-br{display:none;}

@media screen and (max-width:900px) {
.fv-txt-br{display:block;}
}

@media screen and (max-width:768px) {
.fv-txt2{font-size:20px;}
}

@media screen and (max-width:599px){
.fv-txt1{font-size:33px;}
.fv-txt2{font-size:18px;}
}

/* ipad yoko */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
.fv-txt-box{bottom:120px;}
.fv-txt1{font-size:40px;}
}

/* iphone yoko */
@media screen and (min-device-width: 375px) and (max-device-width: 855px) and (orientation: landscape) {
.fv-txt-box{bottom:80px;}
.fv-txt1{font-size:30px;}
.fv-txt2{font-size:16px;padding:20px 0 20px 0;}
.fv-txt3{font-size:12px;}
}


/* # =================================================================
   # head ticker
   # ================================================================= */

#fvbg .ticker {
	position: absolute;
	z-index:2;
	bottom:30px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width:95%;
	overflow: hidden;
}

#fvbg .ticker-bg{
  background-color:rgba(255,255,255,.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius:10px;
}

#fvbg .ticker ul {
	position: relative;
	width: 90%;
	padding:20px;
	list-style-type: none;
	margin: 0 auto;
}

#fvbg .ticker ul li {
  display: none;
}

#fvbg .ticker-content {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding:15px 0;
	column-gap:15px;
}



#fvbg .ticker-news-date{
	font-size:14px;
	text-decoration: none;
	text-align:left;
	color:var(--color-gray1);
}

#fvbg .ticker-news-txt{
	font-size:14px;
	text-align:left;
	line-height:150%;
	text-decoration: none;
	color:var(--color-gray1);
}

#fvbg .linkbox:hover .ticker-img img{
	transform: scale(1.1);
}

#fvbg .linkbox:hover .ticker-news-date{
	color:var(--color-red);
}

#fvbg .linkbox:hover .ticker-news-txt{
	color:var(--color-red);
}

/*-----------スマホ設定-----------------*/
@media screen and (max-width:768px){
	#fvbg .ticker {
		overflow: hidden;
		width:90%;
		bottom:60px;
		left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
	}
	#fvbg .ticker ul {width: 90%;}
	#fvbg .ticker-content {flex-wrap: wrap;padding:13px 0;}
	#fvbg .ticker-news-date{width:100%;}
	#fvbg .ticker-news-txt{width:100%;font-size:12px;}
}

/* iphone yoko */
@media screen and (min-device-width: 375px) and (max-device-width: 855px) and (orientation: landscape) {
	#fvbg .ticker {
		overflow: hidden;
		width:90%;
		bottom:30px;
		left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
	}
#fvbg .ticker ul {width: 90%;}
	#fvbg .ticker-content {flex-wrap: wrap;padding:13px 0;}
	#fvbg .ticker-news-date{width:100%;}
	#fvbg .ticker-news-txt{width:100%;font-size:12px;}
}

/* # =================================================================
   # 共通タイトル
   # ================================================================= */

.index-main-txt{
	line-height:200%;
	text-align:left;
	font-weight:500;
}

.index-catch{
	font-size:35px;
	line-height:1.5em;
	font-weight:Bold;
	padding-bottom:30px;
	letter-spacing:0.1em;
}


.main-title{
	font-family:'Barlow', sans-serif;
	font-size:60px;
	line-height:1.2em;
	font-weight:500;
	overflow:hidden;
}

.main-title-jp{
	font-size:14px;
	font-weight:700;
	margin-bottom:50px;
}

.titleMain-en-span {
  display: inline-block;
  overflow: hidden;
}

.trigger-area-txt {
  display: inline-block;
}

.main-title-sub{
	font-size:14px;
	margin-bottom:20px;
	color: var(--color-white);
	display: block;
}
.main-title-sub::before {
  content: "●";
  font-size: 10px;
  color: var(--color-white);
  display: inline-block;
  margin-right: 10px;
  transform: translateY(-1px);
}


@media screen and (max-width:599px){
.main-title{font-size:35px;}
.index-catch{font-size:25px;}
}



/* # =================================================================
   # news
   # ================================================================= */


.news_link {
	display: flex;
	justify-content: start;
	flex-wrap: nowrap;
	column-gap: 25px;
	margin-bottom: 35px;
	padding: 0;
	list-style-type: none;
}
.news_link li {
	display: inline-block;
	font-size:16px;
	color: var(--color-gray1);
	font-weight:Bold;
	position: relative;
	cursor: pointer;
	text-align: left;
	line-height: 1;
	opacity: 0.4;
	transition: ease .3s;
}
.news_link li:first-child {
	margin-left: 0;
}
.news_link li.active, .news_link li:hover {
	color: var(--color-gray1);
	font-weight:Bold;
	opacity: 1;
}
.news_link li.active:after, .news_link li:hover:after {
	display: block;
}

.news-content {
	margin-bottom: 10px;
	padding: 1.5em;
	margin-left:auto;
	margin-right:auto;
	background-color:var(--color-gray5);
	border-radius:10px;
}



.news-flex{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.news-flex span {
	display: inline-block;
	margin-right: 10px;
	font-size: 12px;
}

.news-date {
	font-size: 14px;
	margin-right: 20px;
	color: var(--color-gray1);
	white-space: nowrap;
	flex-shrink: 0;
}

.news-meta {
	display: flex;
	align-items: center;
}

.news-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.news-categories span {
	display: inline-block;
	margin: 0;
	font-size: 12px;
}

.news {
	min-width:100px;
	font-weight:Bold;
	text-align: center;
	line-height: 25px;
	color: var(--color-white);
	background:var(--color-red);
	border-radius:50px;
}

.agriculture {
	min-width:100px;
	font-weight:Bold;
	text-align: center;
	line-height: 25px;
	color: var(--color-white);
	background:var(--color-green);
	border-radius:50px;
}

.sales {
	min-width:100px;
	font-weight:Bold;
	text-align: center;
	line-height: 25px;
	color: var(--color-white);
	background:#3fa098;
	border-radius:50px;
}

.fish {
	min-width:100px;
	font-weight:Bold;
	text-align: center;
	line-height: 25px;
	color: var(--color-white);
	background:var(--color-blue);
	border-radius:50px;
}

.livestock {
	min-width:100px;
	font-weight:Bold;
	text-align: center;
	line-height: 25px;
	color: var(--color-white);
	background:var(--color-gold);
	border-radius:50px;
}

.media {
	min-width:100px;
	font-weight:Bold;
	text-align: center;
	line-height: 25px;
	color: var(--color-white);
	background:#997398;
	border-radius:50px;
}

.others {
	min-width:100px;
	font-weight:Bold;
	text-align: center;
	line-height: 25px;
	color: var(--color-white);
	background:var(--color-gray2);
	border-radius:50px;
}

.news-content .news-r{
	text-align:left;
	line-height:1.5rem;
	padding-top:15px;
	padding-right:30px;
	color: var(--color-gray1);
	text-decoration:none;
	transition: color 0.2s ease-in-out;
}


.linkbox:hover .news-r {
	text-decoration:none;
}

.news-txt{line-height:1.5rem;}

/*-----------スマホ設定-----------------*/
@media screen and (max-width:768px){
	.news_link {flex-wrap: wrap;column-gap: 20px;row-gap:15px;}
	.news-content .news-r{padding-top:10px;padding-right:10px;}
}

@media screen and (max-width:599px){

	.news_link li {
		font-size: 14px;
	}

	.news-meta {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.news-date {
		margin-right: 0;
		margin-bottom: 10px;
	}

	.news-categories {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		gap: 8px;
	}

	.news-categories span {
		flex: 0 0 auto;
		min-width: 100px;
		font-size: 10px;
		margin: 0;
	}
}


/* # =================================================================
   # head catch
   # ================================================================= */

#head__catch .flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap:30px;
}


#head__catch .title{font-size:60px;font-weight:Bold;padding-bottom:60px;letter-spacing:0.2em;}
#head__catch .txt-box{width:60%;margin-right:0;margin-left:auto;}


@media screen and (max-width:768px){
#head__catch .title{font-size:35px;}
#head__catch .txt-box{width:100%;margin-right:0;margin-left:0;}
}

@media screen and (max-width:599px){
#head__catch .title{font-size:30px;}
}


/* # =================================================================
   # business
   # ================================================================= */

.business-bg{
	background:#006837;
	background-image: url(../img/index_business_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right top -30px;
}

#business .index-main-txt{width:60%;}

#business .business-link-btn img{
	width:400px;
	filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, 0.5));
}

#business .business-link-btn a{
  display: inline-block;
  transition: transform .3s;
}

#business .business-link-btn a:hover{
  transform: translate(3px, 3px);
}

#business .business-link-btn a,
#business .business-link-btn img{
  -webkit-user-select: none; /* Safari */
  user-select: none;
  -webkit-user-drag: none;   /* Safariで画像ドラッグ抑止 */
}




@media screen and (max-width:768px){
.business-bg{
	background:#006837;
	background-image: url(../img/index_business_bg_sp.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right -150px top;
}
#business .index-main-txt{width:100%;}
#business .business-link-btn img{width:100%;}
}


/* # =================================================================
   # サービス
   # ================================================================= */
#bana-service .img-box{overflow:hidden;aspect-ratio: 16 / 9;border-radius:1em;}
#bana-service .img-box img{
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center;
	transition: all .5s;
}

#bana-service .linkbox:hover .img-box img{
	transform: scale(1.1);
}

#bana-service .text-waku{
	position:absolute;
	bottom:2em;
	left:2em;
	z-index:1;
	display: inline-block;
}

#bana-service .service-arw{
	position:absolute;
	bottom:2em;
	right:2em;
	z-index:1;
}

#bana-service .service-title{
	display: inline;
	font-size:35px;
	font-weight:700;
	line-height:1.5em;
	color:var(--color-bk);
	background-color:var(--color-white);
	padding:3px 10px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

#bana-service .service-title-sub{
	display: inline;
	font-size:18px;
	font-weight:700;
	line-height:1.5em;
	color:var(--color-white);
	background-color:var(--color-bk);
	padding:3px 10px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

#bana-service .service-title-sub span{
	border-left:solid 1px var(--color-white);
	padding-left:10px;
	margin-left:10px;
}

#bana-service .line-gap {display:block;height: 5px;}

@media screen and (max-width:768px){
	#bana-service .text-waku{bottom:1.5em;left:1.5em;}
	#bana-service .service-arw{bottom:1.5em;right:1.5em;}
	#bana-service .service-title{font-size:25px;}
	#bana-service .service-title-sub{font-size:16px;}
	#bana-service .line-gap {height: 3px;}
}

@media screen and (max-width:599px){
	#bana-service .img-box{overflow:hidden;aspect-ratio: 5 / 5;border-radius:1em;}
	#bana-service .text-waku{bottom:1em;left:1em;}
	#bana-service .service-arw{bottom:auto;top:1em;right:1em;}
	#bana-service .service-title{font-size:20px;}
	#bana-service .service-title-sub{font-size:12px;}
}

/* # =================================================================
   # 農場
   # ================================================================= */
#bana-farm .img-box{overflow:hidden;aspect-ratio: 16 / 9;border-radius:1em;}
#bana-farm .img-box img{
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center;
	transition: all .5s;
}

#bana-farm .linkbox:hover .img-box img{
	transform: scale(1.1);
}


#bana-farm .business-arw{
	position:absolute;
	top:1em;
	right:1em;
	z-index:1;
}

#bana-farm .title-txt{
	font-size:22px;
	font-weight:700;
	line-height:1.5em;
	color:var(--color-white);
	padding:15px 0;
}

#bana-farm .sub-txt{
	font-size:14px;
	font-weight:500;
	line-height:1.8em;
	color:var(--color-white);
}



@media screen and (max-width:768px){
	#bana-farm .title-txt{font-size:25px;}
	#bana-farm .sub-txt{font-size:16px;}
}

@media screen and (max-width:599px){
	#bana-farm .img-box{overflow:hidden;aspect-ratio: 5 / 5;border-radius:1em;}
	#bana-farm .title-txt{font-size:20px;}
	#bana-farm .sub-txt{font-size:12px;}
}


/* # =================================================================
   # 加工・飲料・観光事業
   # ================================================================= */
#bana-food .img-box{overflow:hidden;aspect-ratio: 16 / 9;border-radius:1em;}
#bana-food .img-box img{
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center;
	transition: all .5s;
}

#bana-food .linkbox:hover .img-box img{
	transform: scale(1.1);
}


#bana-food .business-arw{
	position:absolute;
	top:1em;
	right:1em;
	z-index:1;
}

#bana-food .title-txt{
	font-size:22px;
	font-weight:700;
	line-height:1.5em;
	color:var(--color-white);
	padding:15px 0;
}

#bana-food .sub-txt{
	font-size:14px;
	font-weight:500;
	line-height:1.8em;
	color:var(--color-white);
}



@media screen and (max-width:768px){
	#bana-food .title-txt{font-size:25px;}
	#bana-food .sub-txt{font-size:16px;}
}

@media screen and (max-width:599px){
	#bana-food .img-box{overflow:hidden;aspect-ratio: 5 / 5;border-radius:1em;}
	#bana-food .title-txt{font-size:20px;}
	#bana-food .sub-txt{font-size:12px;}
}

/* # =================================================================
   # business
   # ================================================================= */
.business-bg1{
	background-image: url(../img/index_business_bg1_pc.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-color:rgba(0,0,0,.2);
	background-blend-mode: overlay;
}

.business-bg2{
	background-image: url(../img/index_business_bg2_pc.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-color:rgba(0,0,0,.2);
	background-blend-mode: overlay;
}


.business-cont-space-top{padding-top:120px;}
.business-cont-space-btm{padding-bottom:120px;}

.business-cont-box-L{width:50%;color:var(--color-white);}
.business-cont-box-R{width:50%;margin-right:0;margin-left:auto;color:var(--color-white);}

.business-cont-title{
	font-size:40px;
	line-height:1.2em;
	font-weight:Bold;
	margin-bottom:30px;
	letter-spacing:0.2em;
	text-align:left;
}

.business-cont-title span{
display:block;
margin-bottom:15px;
font-size:14px;
line-height:1.5m;
letter-spacing:0;
}

.business-cont-txt{
font-size:16px;
line-height:2rem;
font-weight:500;
margin-bottom:40px;
}


@media screen and (max-width:768px){
.business-bg1{
	background-image: url(../img/index_business_bg1_sp.webp);
}
.business-bg2{
	background-image: url(../img/index_business_bg2_sp.webp);
}
.business-cont-space-top{padding-top:120px;}
.business-cont-space-btm{padding-bottom:80px;}
.business-cont-box-L{width:100%;}
.business-cont-box-R{width:100%;}
.business-cont-title{font-size:30px;line-height:3rem;}
.business-cont-title-R{margin-left:auto;margin-right:0;}
.business-cont-txt{font-size:14px;}
}

/* # =================================================================
   # partner
   # ================================================================= */

.partner-bg{background-color:#ebefe8;}

#partner .flex{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap:20px;
}


#partner .flex-item-L{width:40%;}
#partner .flex-item-R{width:55%;}

#partner .flex-subitem-L{width:50%;}
#partner .flex-subitem-R{width:45%;}

#partner .flex-item-L .section-title{
	top: 180px;
	position: sticky;
	position: -webkit-sticky;
}

#partner .index-catch{font-size:25px;}


#partner .c-box{
	background-color:var(--color-white);
	padding:2em;
	border-radius:1em;
	margin-top:20px;
}

#partner .c-box:first-child{margin-top:0;}

#partner .img-box{text-align:center;}
#partner .img-box img{width:80%;}

#partner .flex-no{
	display:flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	border-bottom:solid 1px var(--color-green);
	font-size:12px;
	margin-bottom:40px;
}

#partner .no-l{font-size:12px;text-align:left;color:var(--color-green);}
#partner .no-r{font-size:12px;text-align:right;color:var(--color-green);}

#partner .catch-txt{
	font-size:24px;
	line-height:1.2em;
	font-weight:Bold;
	text-align:left;
	margin-bottom:20px;
	color:var(--color-green);
}

#partner .catch-txt span{
	display:block;
	font-size:12px;
	line-height:1.5em;
	margin-bottom:15px;
	color:var(--color-gray1);
}

#partner .txt-box{
	font-size:14px;
	line-height:1.5em;
}

#partner .flex-img{overflow:hidden;border-radius:10px;}
#partner .flex-img img{
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center;
}


#partner .btn-box{width:100%;}

#partner .main__btn{width:100%;}

#partner .main__btn__txt{
	text-align:left;
	font-size:14px;
	font-weight:Bold;
	flex:1;
}







@media screen and (max-width:900px){
#partner .flex-item-L{width:100%;}
#partner .flex-item-R{width:100%;}
#partner .flex-item-L .section-title{position: relative;top: 0;margin-bottom:60px;}
}

@media screen and (max-width:599px){
#partner .c-box{padding:1.2em;}
#partner .flex-subitem-L{width:100%;}
#partner .flex-subitem-R{width:100%;}
#partner .flex-img img{
	width:100%;
	height:250px;
	object-fit: cover;
	object-position: center;
}
	.busi-order1{order:1;}
	.busi-order2{order:2;}
}

/* # =================================================================
   # recruit
   # ================================================================= */

.recruit-bg{
	background: linear-gradient(180deg, var(--color-gray5) 0%, var(--color-gray5) 50%, var(--color-white) 50%, var(--color-white) 100%);
}
#recruit .bg-box {
	width: 100%;
	background:var(--color-blue);
	background-image: url(../img/index_recruit_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
}

#recruit .page-space-top{padding-top:120px;}

#recruit .catch-txt{
	text-align:left;
	font-size:35px;
	font-weight:Bold;
	letter-spacing:0.1em;
	color:var(--color-white);
	margin-bottom:50px;
}


#recruit .img-box{display:none;}

#recruit .img-box img{
	width:auto;
	height:100%;
	object-fit: cover;
	object-position: center;
}

@media screen and (max-width:599px){
#recruit .bg-box {
	width: 100%;
	background:var(--color-blue);
	background-image: url(../img/index_recruit_bg_sp.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	border-radius:2.5rem;
}
#recruit .page-space-top{padding-top:250px;}
#recruit .catch-txt{font-size:28px;}
}


/* # =================================================================
   # 事業所一覧
   # ================================================================= */

#bana-office .linkbox:hover .img-box img{
	transform: scale(1.1);
}



#bana-office .c-box{
	background-color:var(--color-gray1);
	border-radius:1em;
	padding:1em;
}

#bana-office .title-txt{
	font-size:35px;
	font-weight:300;
	line-height:1;
	color:var(--color-white);
	padding-bottom:5px;
}

#bana-office .title-txt span{
	display:block;
	font-size:18px;
}

#bana-office .sub-txt{
	font-size:14px;
	font-weight:500;
	line-height:1.8em;
	color:var(--color-white);
	margin-bottom:10px;
}



@media screen and (max-width:768px){
	#bana-office .title-txt{font-size:25px;}
	#bana-office .title-txt span{font-size:14px;}
	#bana-office .sub-txt{font-size:16px;}
}

@media screen and (max-width:599px){
	#bana-office .img-box{overflow:hidden;aspect-ratio: 5 / 5;border-radius:1em;}
	#bana-office .title-txt{font-size:18px;}
	#bana-office .title-txt span{font-size:12px;}
	#bana-office .sub-txt{font-size:12px;}
}


/* # =================================================================
   # 拠点マップ
   # ================================================================= */

  :root {
    --bg: #f5f6f9;
    --card-bg: #aacf52;
    --accent: #1b7f5b;
    --accent-soft: #e0f2ea;
    --text-main: #222;
    --text-muted: #666;
    --border-subtle: #dde1ea;
    --pin-hq: #e53935;
    --pin-branch: #1e88e5;
    --pin-division: #43a047;
    --pin-sales: #fb8c00;
    --pin-group: #8e24aa;
    --radius-lg: 18px;
    --shadow-soft: 0 10px 30px rgba(15, 35, 52, 0.08);
    --transition-fast: 0.18s ease-out;
  }


  /* Main layout */
  #jfp_map .layout-main {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
  }

  #jfp_map .layout-main > .card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
  }

  /* SP：縦並び */
  @media (max-width: 900px) {
    #jfp_map .layout-main {
      flex-direction: column;
    }
  }

  /* Card base */
  #jfp_map .card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 18px;
  }

  #jfp_map .card-header {
  
  }

  #jfp_map .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom:10px;
  }

  #jfp_map .card-caption {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom:10px;
  }

  /* Map */
  #jfp_map .map-wrapper {
    position: relative;
    border-radius: 14px;
    background: #eef1f6;
    flex: 1;
    overflow: hidden;
    min-height: 450px;
	
	display: flex;
  align-items: center;
  justify-content: center;
  }
  @media (max-width: 900px) {
  #jfp_map .map-wrapper {
      min-height: 350px;
    }
  }
  
  #jfp_map .map-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  #jfp_map .map-image {
    display: block;
    width: 100%;
    height: auto;
    filter: contrast(1.02);
  }

  #jfp_map .map-pin {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition-fast),
      box-shadow var(--transition-fast), opacity var(--transition-fast),
      background var(--transition-fast);
    background: var(--pin-branch);
  }

  #jfp_map .map-pin:hover {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  #jfp_map .map-pin.active {
    background: #ffca28;
  }

  #jfp_map .map-legend {
    position: absolute;
    left: 10px;
    top: 10px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(225, 229, 237, 0.9);
    backdrop-filter: blur(4px);
  }

  #jfp_map .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  #jfp_map .legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--pin-branch);
  }

  /* List panel */
  #jfp_map .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  #jfp_map .filter-btn {
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    border: 1px solid var(--border-subtle);
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background var(--transition-fast), color var(--transition-fast),
      border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  #jfp_map .filter-btn span.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--border-subtle);
  }

  #jfp_map .filter-btn[data-type="branch-hq"] span.dot { background: var(--pin-hq); }
  #jfp_map .filter-btn[data-type="branch"] span.dot { background: var(--pin-branch); }
  #jfp_map .filter-btn[data-type="division"] span.dot { background: var(--pin-division); }
  #jfp_map .filter-btn[data-type="sales"] span.dot { background: var(--pin-sales); }
  #jfp_map .filter-btn[data-type="group"] span.dot { background: var(--pin-group); }

  #jfp_map .filter-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(27, 127, 91, 0.15);
  }

  #jfp_map .location-list {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 4px;
  }

  @media (max-width: 900px) {
    #jfp_map .location-list {
      max-height: 300px;
    }
  }

  #jfp_map .location-card {
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    background: #fff;
    cursor: default;
    transition: border-color var(--transition-fast),
      box-shadow var(--transition-fast), background var(--transition-fast),
      transform var(--transition-fast);
  }

  #jfp_map .location-card-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
  }

  #jfp_map .location-name {
    font-weight: 600;
    font-size: 0.9rem;
  }

  #jfp_map .location-tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0f3fa;
    color: var(--text-muted);
    white-space: nowrap;
  }

  #jfp_map .location-address {
    margin-top: 4px;
    color: var(--text-muted);
  }

  #jfp_map .location-meta {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--accent);
  }

  #jfp_map .location-card.highlight {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(27, 127, 91, 0.15), var(--shadow-soft);
    background: #f7fbf9;
    transform: translateY(-1px);
  }

  /* Stats section */
  #jfp_map .stats-section {
    margin-bottom: 26px;
	color:var(--color-white);
  }

  #jfp_map .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  @media (max-width: 900px) {
    #jfp_map .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 600px) {
    #jfp_map .stats-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  #jfp_map .stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-soft);
	text-align:center;
  }

  #jfp_map .stat-label {
    font-size: 14px;
    color: var(--color-gray1);
    margin-bottom: 4px;
  }

  #jfp_map .stat-value {
    font-size: 25px;
    font-weight: 700;
	color: var(--color-white);
  }

  #jfp_map .stat-note {
     font-size: 12px;
    color: var(--color-gray1);
    margin-top: 4px;
  }

  /* CTA */
  #jfp_map .cta-section {
    background: linear-gradient(135deg, #1b7f5b, #2d6fa8);
    border-radius: 22px;
    padding: 1.5em;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  }

  @media (min-width: 768px) {
    #jfp_map .cta-section {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  #jfp_map .cta-text-main {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  #jfp_map .cta-text-sub {
    font-size: 0.9rem;
    opacity: 0.9;
  }

  #jfp_map .cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  @media screen and (max-width:768px){
    #jfp_map .cta-actions {margin-top:15px;}
  }

  #jfp_map .btn-primary,
  #jfp_map .btn-outline {
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: background var(--transition-fast),
      color var(--transition-fast), transform var(--transition-fast),
      box-shadow var(--transition-fast);
    white-space: nowrap;
  }

  #jfp_map .btn-primary {
    background: #fff;
    color: #1b7f5b;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  }

  #jfp_map .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  }

  #jfp_map .btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
  }

  #jfp_map .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
  }