@charset "utf-8";
.network_map {
		width: 1115px;
		height: 650px;
		margin: 0 auto 50px;
		position: relative;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		background-image: url("https://www.kai-group.com/contents_file/global/n_images/network_map_dark.png");
}
.network_map::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: 100%;
		background-image: url("https://www.kai-group.com/contents_file/global/n_images/network_map_blue.png");
		transition: opacity 0.8s;
		pointer-events: none;
		z-index: 10
}
.networkActive .network_map::after {
		opacity: 0;
}
.network_map .pin_map {
		position: absolute;
		width: 20px;
		height: 20px;
		opacity: 0;
		transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
		transform: scale(4)
}
.networkActive .pin_map {
		opacity: 1;
		transform: scale(1);
}
@media (hover: hover) {
		.pin_map:hover {
				transform: scale(1.4);
				transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
				transition-delay: 0s !important;
		}
		.pin_map:hover a::after {
				left: 0;
				border-width: 20px 10px 0 10px;
		}
}
.pin_map a {
		display: block;
		width: 20px;
		height: 20px;
		text-decoration: none;
		position: relative;
}
.pin_map a::before, .pin_map a::after {
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		pointer-events: none;
		border-style: solid;
}
.pin_map a::before {
		top: 0;
		left: 0;
		border-width: 20px 10px 0 10px;
		border-color: #fff transparent transparent transparent;
}
.pin_map a::after {
		border-width: 8px 4px 0 4px;
		border-color: #009ee6 transparent transparent transparent;
		left: 6px;
		bottom: 0;
}
.pin_map a.sales::after {
		border-color: #009ee6 transparent transparent transparent;
}
.pin_map a.product::after {
		border-color: #eb84b1 transparent transparent transparent;
}
.pin_map a.sales-product::after {
		border-color: #eb84b1 transparent transparent transparent;
}
.pin_map a.sales-product::after {
		border: none;
		width: 8px;
		height: 8px;
		background: url("https://www.kai-group.com/contents_file/global/n_images/map_pin_double.png") no-repeat 0 0;
		background-size: 8px;
		bottom: 0;
		left: 6px;
}
.pin_map a.related::after {
		border-color: #8bc020 transparent transparent transparent;
}
.network_map .pin_japan-1 {
		left: 951px;
		top: 256px;
		/* transition-delay: 0.37s */
}
.network_map .pin_japan-2 {
		left: 935px;
		top: 269px;
		/* transition-delay: 0.28s */
}
.network_map .pin_korea {
		left: 912px;
		top: 258px;
		/*transition-delay: 0.32s */
}
.network_map .pin_shanghai {
		left: 888px;
		top: 276px;
		/*transition-delay: 0.35s */
}
.network_map .pin_shanghai2 {
		left: 870px;
		top: 290px;
		/*	transition-delay: 0.45s */
}
.network_map .pin_guangzhou {
		left: 850px;
		top: 300px;
		/*	transition-delay: 0.15s */
}
.network_map .pin_hk {
		left: 865px;
		top: 315px;
}
.network_map .pin_vietnam {
		left: 836px;
		top: 326px;
		/*transition-delay: 0.35s */
}
.network_map .pin_india {
		left: 753px;
		top: 307px;
		/*transition-delay: 0.33s */
}
.network_map .pin_france {
		left: 536px;
		top: 191px;
}
.network_map .pin_europe {
		left: 525px;
		top: 218px;
		/*transition-delay: 0.37s */
}
.network_map .pin_india {
		left: 753px;
		top: 307px;
		/*transition-delay: 0.4s */
}
.network_map .pin_usa {
		left: 134px;
		top: 216px;
		/*transition-delay: 0.3s */
}
/* ================ */
.network_map .area_detail {
		position: absolute;
		width: 280px;
		min-height: 130px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: #fff;
		font-family: "Inter", YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-weight: 400;
		font-size: 14px;
		z-index: 10;
}
.area_detail_wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		display: none;
		z-index: 6000;
		box-sizing: border-box;
		padding: 160px 0 0;
}
#sp_modal_strage .area_detail {
		width: 290px;
		min-height: 130px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: #fff;
		font-family: "Inter", YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-weight: 400;
		font-size: 14px;
		margin: 0 auto;
		display: block;
		position: relative;
}
.area_detail::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform-origin: center top;
		transform: scaleY(0);
		background: rgba(0, 78, 162, 0.6);
		z-index: 0;
}
#sp_modal_strage .area_detail::before {
		background: rgba(0, 78, 162, 0.85);
}
.network_map .area_detail.isActive::before {
		transform: scaleY(1);
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.network_map .area_detail.isActive::before {
		transform: scaleY(1);
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#sp_modal_strage .area_detail.isActive::before {
		transform: scaleY(1);
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.area_detail .area_detail_close {
		position: absolute;
		width: 30px;
		height: 30px;
		top: -35px;
		right: -4px;
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.4s;
		transition-delay: 0.4s;
}
.area_detail.isActive .area_detail_close {
		opacity: 1;
}
.area_detail_close::before, .area_detail_close::after {
		content: '';
		display: block;
		position: absolute;
		top: 14px;
		left: 4px;
		width: 22px;
		height: 1px;
		background: #fff;
		pointer-events: none;
}
.area_detail_close::before {
		transform: rotate(45deg);
}
.area_detail_close::after {
		transform: rotate(-45deg);
}
.network_map .area_detail.japan {
		left: 640px;
		top: 150px;
		display: none;
}
.network_map .area_detail.korea {
		left: 620px;
		top: 190px;
		display: none;
}
.network_map .area_detail.shanghai, .network_map .area_detail.shanghai2 {
		left: 590px;
		top: 210px;
		display: none;
}
.network_map .area_detail.hk {
		left: 570px;
		top: 250px;
		display: none;
}
.network_map .area_detail.guangzhou {
		left: 547px;
		top: 233px;
		display: none;
}
.network_map .area_detail.vietnam {
		left: 534px;
		top: 257px;
		display: none;
}
.network_map .area_detail.india {
		left: 422px;
		top: 221px;
		width: 300px;
		display: none;
}
.network_map .area_detail.europe {
		left: 588px;
		top: 124px;
		display: none;
}
.network_map .area_detail.france {
		left: 576px;
		top: 152px;
		display: none;
}
.network_map .area_detail.usa {
		left: 185px;
		top: 148px;
		display: none;
}
.area_detail .area_detail_frame-vt1, .area_detail .area_detail_frame-vt2, .area_detail .area_detail_frame-hr1, .area_detail .area_detail_frame-hr2 {
		position: absolute;
		background: #fff;
}
.area_detail .area_detail_frame-vt1, .area_detail .area_detail_frame-vt2 {
		width: 100%;
		height: 1px;
		transform: scaleX(0);
}
.area_detail .area_detail_frame-vt1 {
		top: 0;
		left: 0;
		transform-origin: left center;
}
.area_detail .area_detail_frame-vt2 {
		bottom: 0;
		left: 0;
		transform-origin: right center;
}
.area_detail.isActive .area_detail_frame-vt1, .area_detail.isActive .area_detail_frame-vt2 {
		transform: scaleX(1);
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: 0.2s;
}
.area_detail .area_detail_frame-hr1, .area_detail .area_detail_frame-hr2 {
		width: 1px;
		height: 100%;
		transform: scaleY(0);
}
.area_detail .area_detail_frame-hr1 {
		left: 0;
		top: 0;
		transform-origin: center bottom;
}
.area_detail .area_detail_frame-hr2 {
		right: 0;
		top: 0;
		transform-origin: center top;
}
.area_detail.isActive .area_detail_frame-hr1, .area_detail.isActive .area_detail_frame-hr2 {
		transform: scaleY(1);
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: 0.25s;
}
/* ============== */
.area_detail a {
		color: #fff;
		text-decoration: none;
}
.area_detail_hdr {
		padding: 12px 15px;
		position: relative;
		line-height: 1.5;
}
.area_detail_hdr:lang(en) {
		padding: 16px 15px;
}
.area_detail_hdr:not(.gmbh):lang(en) {
		text-transform: uppercase;
}
.area_detail_hdr::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #fff;
		transform-origin: left center;
		transform: scaleX(0);
}
.isActive .area_detail_hdr::after {
		transform: scaleX(1);
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: 0.25s;
}
.area_detail_hdr a {
		display: block;
		position: relative;
}
.area_detail_hdr a .btn_blank {
		position: absolute;
		right: 0;
		top: calc(50% - 16px);
		width: 32px;
		height: 32px;
}
.area_detail_hdr a .btn_blank:lang(en) {
		top: calc(50% - 17px);
}
.area_detail_hdr a .btn_blank::before {
		border: 1px solid #fff;
		top: 11.5px;
		left: 10px;
}
.area_detail_hdr a .btn_blank::after {
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		top: 14.5px;
		left: 13px;
}
.area_detail_cont {
		padding: 15px;
		position: relative;
		z-index: 5;
}
.area_detail_cont.extra {
		padding-bottom: 45px;
		border-bottom: 1px solid #fff;
}
.area_detail_cont dl {
		margin-bottom: 10px;
}
.area_detail_cont dl:last-child {
		margin-bottom: 0;
}
.area_detail_cont dl a {
		display: flex;
		align-items: center;
		color: #fff;
		text-decoration: none;
}
.area_detail_cont dt {
		width: 40px;
		margin-right: 10px;
}
.area_detail_cont dt img {
		width: 40px;
		height: auto;
}
.area_detail_cont dd {
		flex: 1;
		font-size: 12px;
}
.area_detail_hdr span, .area_detail_hdr .btn_blank, .area_detail_cont {
		opacity: 0;
}
.isActive .area_detail_hdr span, .isActive .area_detail_hdr .btn_blank, .isActive .area_detail_cont {
		opacity: 1;
		transition: opacity 0.4s;
		transition-delay: 0.4s;
}
@media(max-width: 1193px) {
		.network_section {
				padding-left: 0;
				padding-right: 0;
				padding-bottom: 120px;
		}
		.network_map {
				width: 800px;
				height: 470px;
		}
		.network_map .pin_japan-1 {
				left: 678px;
				top: 173px;
		}
		.network_map .pin_japan-2 {
				left: 664px;
				top: 196px;
		}
		.network_map .pin_korea {
				left: 653px;
				top: 174px;
		}
		.network_map .pin_shanghai {
				left: 629px;
				top: 185px;
		}
		.network_map .pin_shanghai2 {
				left: 613px;
				top: 199px;
		}
		.network_map .pin_guangzhou {
				left: 590px;
				top: 195px;
		}
		.network_map .pin_hk {
				left: 619px;
				top: 222px;
		}
		.network_map .pin_vietnam {
				left: 590px;
				top: 230px;
		}
		.network_map .pin_india {
				left: 753px;
				top: 307px;
		}
		.network_map .pin_france {
				left: 385px;
				top: 138px;
		}
		.network_map .pin_europe {
				left: 370px;
				top: 164px;
		}
		.network_map .pin_india {
				left: 540px;
				top: 220px;
		}
		.network_map .pin_usa {
				left: 95px;
				top: 155px;
		}
		.network_map .area_detail.japan {
				left: 360px;
				top: 20px;
		}
		.network_map .area_detail.korea {
				left: 360px;
				top: 140px;
		}
		.network_map .area_detail.shanghai, .network_map .area_detail.shanghai2 {
				left: 338px;
				top: 110px;
		}
		.network_map .area_detail.guangzhou {
				left: 327px;
				top: 163px;
		}
		.network_map .area_detail.hk {
				left: 330px;
				top: 158px;
		}
		.network_map .area_detail.vietnam {
				left: 300px;
				top: 166px;
		}
		.network_map .area_detail.india {
				left: 220px;
				top: 135px;
		}
		.network_map .area_detail.france {
				left: 97px;
				top: 72px;
		}
		.network_map .area_detail.europe {
				left: 78px;
				top: 102px;
		}
		.network_map .area_detail.usa {
				left: 135px;
				top: 88px;
		}
}
@media(min-width: 801px) {
		.sp_network_gr {
				display: none
		}
		#sp_modal_strage {
				display: none !important;
		}
}
@media(max-width: 800px) {
		.network_map .area_detail {
				display: none !important;
		}
		.network_map {
				width: auto;
				height: calc(calc(100vw - 20px) * 0.59);
				background-image: url("https://www.kai-group.com/contents_file/global/n_images/network_map_dark_sp2.png");
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 100%;
				margin: 0 10px 30px;
		}
		.network_map::after {
				background-image: url("https://www.kai-group.com/contents_file/global/n_images/network_map_blue_sp.png");
				height: calc(calc(100vw - 20px) * 0.59);
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 100%;
		}
		.pin_map {
				display: none;
		}
		.network_marker {
				margin: 0 0 25px;
		}
		.network_overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
		}
		.sp_network_gr {
				margin: 0 20px 60px;
		}
		.sp_network_gr ul {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px 10px;
		}
		.sp_network_gr ul li {
				list-style: none;
				text-align: center;
				font-size: 14px;
				font-weight: 500;
		}
		.sp_network_gr ul li a {
				color: #fff;
				text-decoration: none;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				border: 1px solid #fff;
		}
}
@media(max-width: 767px) {
		.sp_network_gr ul {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 7px 7px;
		}
		.sp_network_gr ul li {
				font-size: 11px;
				font-weight: 500;
		}
		.sp_network_gr ul li a {
				height: 36px
		}
}