@charset "utf-8";


#company_section {}
#company_section .section_head {background: url('/images/subpage_company_head_bg.png') no-repeat center; }

#company_section .cont_title {display: flex; flex-direction: column; align-items: center; }
#company_section .cont_title h3 {font-size: 40px; font-weight: bold; }
#company_section .cont_title p {margin-top: 36px; line-height: normal; text-align: center; color: rgb(var(--color-3d3d3d)); font-size: 18px; }

#company_section .business_area {padding: 100px 0 140px; background: url('/images/subpage_company_business_bg.png') no-repeat bottom center, rgb(var(--color-fdfdfd)); }
#company_section .business_area .cont_title {align-items: stretch; }
#company_section .business_area .cont_title p {text-align: left; }
#company_section .business_area .container {display: flex; flex-direction: column; gap: 100px; margin-top: 80px; }
#company_section .business_area .container dl {display: flex; justify-content: space-between; gap: 128px; }
#company_section .business_area .container dt {
	display: flex; flex-direction: column; gap: 40px; 
	width: 178px; 
	line-height: normal; 
	color: rgb(var(--primary-color));
	font-size: 22px; 
}
#company_section .business_area .container dt:before {
	display: block; clear: both; content: ''; 
	width: 100%; height: 2px; background: rgb(var(--primary-color));
}
#company_section .business_area .container dd {flex: 1; display: flex; flex-direction: column; gap: 10px; }
#company_section .business_area .container .card {
	line-height: normal; padding: 30px; border-radius: 8px; background: rgb(var(--color-white)); color: rgb(var(--color-242424)); 
	font-size: 18px; font-weight: 500;
	box-shadow: 0px 4px 16px 0px rgb(145, 122, 132, 0.2);
}

#company_section .current_area {padding: 120px 0 140px; }
#company_section .current_area ul {display: flex; flex-direction: column; gap: 160px; margin-top: 120px; overflow: hidden; }
#company_section .current_area ul li {display: flex; align-items: center; position: relative; }
#company_section .current_area .media {flex: 1;  position: relative; }
#company_section .current_area .media_wrap {position: relative; width: 100%; max-width: 900px; aspect-ratio: 900 / 420; overflow: hidden; }
#company_section .current_area .media_wrap video {position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; }
#company_section .current_area .info {flex: 1; display: flex; /* padding-top: 20px; padding-bottom: 20px;  */}
#company_section .current_area .info_card {display: flex; flex-direction: column; width: 100%; max-width: 600px; }
#company_section .current_area .card_head {display: flex; flex-direction: column; }
#company_section .current_area .card_body {display: flex; flex-direction: column; }

#company_section .current_area .cate {display: flex; align-items: center; gap: 12px; }
#company_section .current_area .cate:before {display: block; clear: both; content: ''; width: 38px; height: 38px; border-radius: 50px; }
#company_section .current_area .title {
	margin-top: 42px; padding-bottom: 30px; 
	border-bottom: 1px solid rgb(var(--color-ededed)); color: rgb(var(--color242424)); 
	font-size: 26px; font-weight: bold; 
}
#company_section .current_area .desc {display: flex; flex-direction: column; gap: 15px; margin-top: 24px; }
#company_section .current_area dl {display: flex; gap: 24px; font-size: 16px; font-weight: 500; }
#company_section .current_area dt {width: 80px; color: rgb(var(--color-3d3d3d)); }
#company_section .current_area dd {flex: 1; color: rgb(var(--color-747474)); word-break: keep-all; }
#company_section .current_area .link {display: flex; margin-top: 32px; }
#company_section .current_area .link .button {justify-content: center; gap: 8px; width: 120px; height: 44px; border-radius: 30px; font-size: 15px; font-weight: 500; }
#company_section .current_area .link .button:after {
	display: block; clear: both; content: ''; 
	width: 12px; height: 12px; 
	background: rgb(var(--color-violet));
	mask: url('/images/icon_subpage_company_link.svg') no-repeat center/ contain;
	-webkit-mask: url('/images/icon_subpage_company_link.svg') no-repeat center/ contain;
}

#company_section .current_area .residence .media {margin-right: 60px; }
#company_section .current_area .residence .media_wrap {border-radius: 0 20px 20px 0; }
#company_section .current_area .residence .info {margin-left: 60px; }
#company_section .current_area .residence .info_card {margin-right: 20px; }
#company_section .current_area .residence .cate:before {background: url('/images/icon_subpage_company_residence.svg') no-repeat center/ contain, rgb(var(--color-f5f5f5));}

#company_section .current_area .non_residence .media {order: 2; margin-left: 60px; }
#company_section .current_area .non_residence .media_wrap {border-radius: 20px 0 0 20px; }
#company_section .current_area .non_residence .info {justify-content: flex-end; margin-right: 60px; }
#company_section .current_area .non_residence .info_card {margin-left: 20px; }
#company_section .current_area .non_residence .cate:before {background: url('/images/icon_subpage_company_non_residence.svg') no-repeat center/ contain, rgb(var(--color-f5f5f5));}


#company_section .subsidiary_area {padding: 120px 0 140px; background: rgb(var(--color-fafafa));}

#company_section .subsidiary_area .tab_area {display: flex; justify-content: center; align-items: center; gap: 20px; padding: 60px 0 70px; }
#company_section .subsidiary_area .tab_area hr {width: 1px; height: 16px; border: none; background: rgb(var(--color-ededed)); } 
#company_section .subsidiary_area .tab_area button {position: relative; color: rgb(var(--color-3d3d3d)); font-size: 18px; font-weight: 500; opacity: 0.8; }
#company_section .subsidiary_area .tab_area button.active {color: rgb(var(--color-violet)); font-weight: bold; } 
#company_section .subsidiary_area .tab_area button.active:before {
	display: block; clear: both; content: ''; 
	position: absolute; top: 100%; 
	width: 100%; height: 2px; margin-top: 3px; background: rgb(var(--color-violet));
}
#company_section .subsidiary_area .tab_content_wrap {}
#company_section .subsidiary_area .tab_content_wrap > div {display: none; }
#company_section .subsidiary_area .tab_content_wrap > div.active {display: block; }
#company_section .subsidiary_area .depth1_ul {display: flex; justify-content: center; align-items: center; gap: 24px;}
#company_section .subsidiary_area .depth1_ul > li {
	display: flex; align-items: center; width: calc((100% - (24px * 3)) / 4); 
}
#company_section .subsidiary_area .depth1_ul .wrap {
	position: relative; width: 100%; max-width: 282px; aspect-ratio: 282 / 160; 
	border: 1px solid rgb(var(--color-dbdbdb)); border-radius: 8px; 
	background: rgb(var(--color-white));
	overflow: hidden;
}
#company_section .subsidiary_area .depth1_ul .media {width: 100%; height: 100%; }
#company_section .subsidiary_area .depth1_ul .desc {
	display: flex; align-items: center; 
	position: absolute; top: 0; left: 0; 
	width: 100%; height: 100%; padding: 10px 15px; 
	background: rgb(32, 31, 31, 0.8);
	backdrop-filter: blur(4px); 
	transform: translateY(101%); 
	transition: all 0.25s ease-in;
}
#company_section .subsidiary_area .desc_ul {}
#company_section .subsidiary_area .desc_ul > li {
	display: flex;
	line-height: 1.5; color: rgb(var(--color-white)); 
	font-size: 18px; font-weight: 500; word-break: keep-all; 
}
#company_section .subsidiary_area .desc_ul > li:before {
	display: block; clear: both; content: ''; 
	flex-shrink: 0; width: 4px; height: 4px; margin-top: 12px; margin-left: 10px; margin-right: 10px; border-radius: 4px; background: rgb(var(--color-white));
}

#company_section #subsidiary .depth1_ul > li:nth-of-type(odd) {justify-content: flex-end; }
#company_section #subsidiary .depth1_ul > li:nth-of-type(even) {justify-content: flex-start; }

#company_section #subsidiary .depth1_ul > li:nth-of-type(1) .media {background: url('/images/subpage_company_subsidiary_img_1.png') no-repeat center/ contain;}
#company_section #subsidiary .depth1_ul > li:nth-of-type(2) .media {background: url('/images/subpage_company_subsidiary_img_2.png') no-repeat center/ contain;}
/* #company_section #subsidiary .depth1_ul > li:nth-of-type(3) .media {background: url('/images/subpage_company_subsidiary_img_3.png') no-repeat center/ contain;} */
#company_section #subsidiary .depth1_ul > li:nth-of-type(3) .media {background: url('/images/subpage_company_subsidiary_img_4.png') no-repeat center/ contain;}


#company_section #cooperative .depth1_ul > li:nth-of-type(odd) {justify-content: flex-end; }
#company_section #cooperative .depth1_ul > li:nth-of-type(even) {justify-content: flex-start; }

#company_section #cooperative .depth1_ul > li:nth-of-type(1) .media {background: url('/images/subpage_company_cooperative_img_1.png') no-repeat center/ contain;}
#company_section #cooperative .depth1_ul > li:nth-of-type(2) .media {background: url('/images/subpage_company_cooperative_img_2.png') no-repeat center/ contain;}

#company_section .subsidiary_area .depth1_ul > li:hover .desc {transform: translateY(0); }



@media (hover: hover) {
	#company_section .current_area .link .button {}
}


@media (max-width: 1600px) {
	#company_section .current_area ul {gap: 60px; }

}
@media (max-width: 1240px) {
	#company_section .current_area ul {gap: 40px; }
	#company_section .current_area ul li {gap: 60px; }
	#company_section .current_area .media_wrap video {position: static; }
	#company_section .current_area .title {margin-top: 20px; }
	
	#company_section .current_area .info_card {position: relative; }
	#company_section .current_area .link {position: absolute; top: 0; right: 0; margin-top: 0; }
	
	#company_section .current_area .residence .media {margin-right: 0; }
	#company_section .current_area .residence .info {margin-left: 0; }
	
	#company_section .current_area .non_residence .media {margin-left: 0; }
	#company_section .current_area .non_residence .info {margin-right: 0; }

}
@media (max-width: 1060px) {
	#company_section .current_area .non_residence .info {}
	#company_section .subsidiary_area .desc_ul > li {font-size: 14px; }

}
@media (max-width: 992px) {
	#company_section .current_area ul li {gap: 24px; }
	
	#company_section .subsidiary_area .depth1_ul {justify-content: flex-start; flex-wrap: wrap; }
	#company_section .subsidiary_area .depth1_ul > li {width: calc((100% - (24px * 1)) / 2);  max-width: none; }
}
@media (max-width: 768px) {
	#company_section .cont_title h3 {font-size: 36px; }
	#company_section .cont_title p {font-size: 16px; }
	
	#company_section .business_area {padding: 80px 0 100px; }
	#company_section .business_area .container {margin-top: 60px; }
	#company_section .business_area .container dl {flex-direction: column; gap: 40px; }
	#company_section .business_area .container dt {flex-direction: row; gap: 20px; width: auto; font-size: 18px; }
	#company_section .business_area .container dt p {padding: 5px 0; }
	#company_section .business_area .container dt:before {width: 2px; height: auto; }
	#company_section .business_area .container .card {padding: 24px 20px; }
	
	#company_section .current_area {padding: 80px 0 100px; }
	#company_section .current_area ul {margin-top: 60px; padding-left: 20px; padding-right: 20px; }
	#company_section .current_area ul li {flex-direction: column; align-items: initial; }
	#company_section .current_area .info_card {max-width: none; }
	
	#company_section .current_area .residence .media_wrap {border-radius: 20px; }
	#company_section .current_area .residence .info_card {margin-right: 0; }
	
	#company_section .current_area .non_residence .media {order: 0; }
	#company_section .current_area .non_residence .media_wrap {border-radius: 20px; }
	#company_section .current_area .non_residence .info_card {margin-left: 0; }
	
	#company_section .subsidiary_area {padding: 80px 0 100px; }
	#company_section .subsidiary_area .tab_area {padding: 60px 20px 40px; }
}


@media (max-width: 640px) {
	#company_section .cont_title h3 {font-size: 32px; }

	#company_section .business_area {padding: 60px 0 80px; }
	#company_section .business_area .container {gap: 40px; }
	#company_section .business_area .container dl {gap: 32px; }
	#company_section .business_area .container .card {padding: 20px; font-size: 16px; }
	
	#company_section .current_area {padding: 60px 0 80px; }
	#company_section .current_area .cate {font-size: 15px; }
	#company_section .current_area .cate:before {width: 34px; height: 34px; }
	#company_section .current_area .title {padding-bottom: 24px; font-size: 22px; }
	#company_section .current_area .desc {gap: 12px; }
	#company_section .current_area dl {gap: 12px; font-size: 15px; }
	
	#company_section .current_area .link .button {width: 100px; height: 38px; font-size: 14px; }
	#company_section .current_area .link .button:after {width: 10px; height: 10px; }
	
	
	#company_section .subsidiary_area {padding: 60px 0 80px; }
	#company_section .subsidiary_area .depth1_ul {gap: 20px; }
	#company_section .subsidiary_area .tab_area button {font-size: 16px; }
}