@charset "utf-8";

#business {}
#business .inner-sct { position: relative; padding: 80px 0 120px;}
#business .lead { margin-bottom: 70px;}
#business .lead p { font-size: 21px; letter-spacing: 0.1rem; line-height: 1.8; text-align: center;}

#business .page-nav { width: 92%; max-width: 1020px; margin: 0 auto 50px;}
#business .page-nav ul { width: 100%; font-size: 0; text-align: center;}
#business .page-nav ul li { display: inline-block; width: 25%; padding: 10px; font-size: 18px; line-height: 1.25; vertical-align: top;}
#business .page-nav ul li a { position: relative; display: block; width: 100%; color: #fff; font-weight: 700; text-decoration: none; transition: 0.3s ease;}
#business .page-nav ul li a:before { content: ''; display: block; width: 100%; height: 100%; background: #99b0d0;
 clip-path: polygon(4% 0, 96% 0%, 100% 16%, 100% 82%, 96% 100%, 4% 100%, 0% 82%, 0% 16%); transition: 0.3s ease;
 position: absolute; left: 0; top: 0; transform: translate(4px,4px); z-index: 1;
}
#business .page-nav ul li a:after { content: ''; display: block; width: 100%; height: 100%; background: #4274c4;
 clip-path: polygon(4% 0, 96% 0%, 100% 16%, 100% 82%, 96% 100%, 4% 100%, 0% 82%, 0% 16%);
 position: absolute; left: 0; top: 0;  z-index: 2;
}
#business .page-nav ul li a span { position: relative; display: block; padding: 14px 0; padding-left: 16px; z-index: 3;}
#business .page-nav ul li a span em { display: inline-block; vertical-align: middle;}
#business .page-nav ul li a span:after { content: ''; position: relative; display: inline-block; width: 0; height: 0; margin-left: 12px;
 border: solid 6px transparent; border-top: solid 10px #fff; border-bottom: none;
}
#business .page-nav ul li a br { display: none;}

#business .page-nav ul li a:hover { opacity: 0.8;}
#business .page-nav ul li a:hover:before { transform: translate(2px,2px);}
@media (max-width: 801px) {
	#business .page-nav { margin-bottom: 40px;}
	#business .page-nav ul li { padding: 8px; font-size: 16px;}
	#business .page-nav ul li a span { padding: 6px 0; padding-left: 12px;}
	#business .page-nav ul li a span.row { padding: 16px 0; padding-left: 12px;}
	#business .page-nav ul li a br { display: block;}
}
@media (max-width: 481px) {
	#business .page-nav { margin-bottom: 20px;}
	#business .page-nav ul li { padding: 4px; font-size: 11px;}
	#business .page-nav ul li a:before { transform: translate(2px,2px);
		clip-path: polygon(6% 0, 94% 0%, 100% 14%, 100% 84%, 94% 100%, 6% 100%, 0% 84%, 0% 14%);}
	#business .page-nav ul li a:after { clip-path: polygon(6% 0, 94% 0%, 100% 14%, 100% 84%, 94% 100%, 6% 100%, 0% 84%, 0% 14%);}
	#business .page-nav ul li a span { padding: 3px 0; padding-left: 6px;}
	#business .page-nav ul li a span.row { padding: 10px 0 9px; padding-left: 6px;}
	#business .page-nav ul li a span:after { margin-left: 5px; border: solid 4px transparent; border-top: solid 6px #fff; border-bottom: none;}
	#business .page-nav ul li a br { display: block;}
}



#business .ctn { position: relative; width: 88%; max-width: 1000px; margin: 0 auto; z-index: 2;}
#business .ctn .box { position: relative; margin-bottom: 50px;}
#business .ctn .box:before,
#business .ctn .box:after { content: ''; display: block; width: 0px; height: 0px; position: absolute; top: 0; z-index: 3;
 border: solid 25px transparent; border-top: solid 25px #fff;
}
#business .ctn .box:before{ left: 0; border-left: solid 25px #fff;}
#business .ctn .box:after{ right: 0; border-right: solid 25px #fff;}

#business .ctn .box.last { margin-bottom: 0px;}
#business .ctn .box .inner-box { position: relative; padding: 50px 60px; background: #e6edf7; z-index: 2;}
#business .ctn .box .inner-box:before,
#business .ctn .box .inner-box:after { content: ''; display: block; width: 0px; height: 0px; position: absolute; bottom: 0; z-index: 3;
 border: solid 25px transparent; border-bottom: solid 25px #fff;
}
#business .ctn .box .inner-box:before{ left: 0; border-left: solid 25px #fff;}
#business .ctn .box .inner-box:after{ right: 0; border-right: solid 25px #fff;}
#business .ctn .box .flex { display: flex; justify-content: space-between;}
#business .ctn .box .flex.re { flex-direction: row-reverse;}
#business .ctn .box .pht { width: 35%; text-align: center;}
#business .ctn .box .txt { width: 60%;}

#business .ctn .box .pht figure { display: block; width: 100%; margin-bottom: 12px; clip-path: polygon(14% 0, 86% 0%, 100% 20%, 100% 80%, 86% 100%, 14% 100%, 0% 80%, 0% 20%); overflow: hidden;}
#business .ctn .box .pht figure img { width: 100%;}
#business .ctn .box .pht p { position: relative; display: inline-block;
 color: #cddbef; font-size: clamp(30px,5.0vw,50px); font-weight: 700; line-height: 1; transform: skewX(-6deg); text-align: left; text-indent: -6px;
}
#business .ctn .box .pht p.fsM { font-size: clamp(30px,4.2vw,46px);}
#business .ctn .box .txt h3 { position: relative; margin-bottom: 20px; padding-left: 65px; color: #4072c3; font-size: 32px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4;}
#business .ctn .box .txt h3 img { width: 48px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#business .ctn .box .txt p { margin-bottom: 20px; font-size: 20px; letter-spacing: 0.1rem;}
#business .ctn .box .txt .point { padding: 20px 30px; border: solid 2px #4072c3;}
#business .ctn .box .txt .point h4 { margin-bottom: 6px; font-size: 20px; font-weight: 700; line-height: 1;}
#business .ctn .box .txt .point ul { font-size: 0; }
#business .ctn .box .txt .point ul li { position: relative; padding: 4px 0; padding-left: 20px; font-size: 18px; line-height: 1.4;}
#business .ctn .box .txt .point ul li:before { content: ''; display: block; width: 10px; height: 10px; background: #4172c4; border-radius: 50%;
 position: absolute; left: 0; top: 11px;
}

#business .hex1 { width: 200px; right: -60px; top: 60px;}
#business .hex2 { width: 180px; left: -50px; top: 16%;}
#business .hex3 { width: 160px; right: -60px; top: 35%;}
#business .hex4 { width: 180px; left: -50px; top: 65%;}
#business .hex5 { width: 200px; right: -60px; bottom: 7%;}
@media (max-width: 1281px) {
	#business .lead p { font-size: 18px;}
	#business .ctn .box .txt h3 { font-size: 24px;}
	#business .ctn .box .txt p { font-size: 16px;}
	#business .ctn .box .txt .point ul li { font-size: 16px;}

	#business .hex1 { width: 150px;}
	#business .hex2 { width: 120px; top: 20%;}
	#business .hex3 { width: 130px;}
	#business .hex4 { width: 140px; top: 66%;}
	#business .hex5 { width: 150px;}
}
@media (max-width: 1001px) {
	#business .lead p span{ display: block;}
}
@media (max-width: 801px) {
	#business .lead p { font-size: 16px;}
	#business .ctn .box { margin-bottom: 30px;}
	#business .ctn .box .inner-box { padding: 30px 40px;}
	#business .ctn .box .txt h3 { margin-bottom: 12px; padding-left: 50px; font-size: 20px;}
	#business .ctn .box .txt h3 img { width: 32px;}
	#business .ctn .box .txt p { margin-bottom: 12px; font-size: 14px;}
	#business .ctn .box .txt .point { padding: 12px 20px;}
	#business .ctn .box .txt .point h4 { font-size: 16px;}
	#business .ctn .box .txt .point ul li { font-size: 14px;}


	#business .hex1 { display: none;}
	#business .hex2 { display: none;}
	#business .hex3 { display: none;}
	#business .hex4 { width: 100px; left: -20px; top: 45%;}
	#business .hex5 { width: 100px; right: -40px; bottom: 20%;}
}
@media (max-width: 641px) {
	#business .ctn .box .flex { display: block;}
	#business .ctn .box .pht { width: 100%; margin: 0 auto 20px;}
	#business .ctn .box .txt { width: 100%;}
}
@media (max-width: 481px) {
	#business .inner-sct { padding: 40px 0 60px;}
	#business .lead { width: 88%; margin: 0 auto 30px;}
	#business .lead p { font-size: 14px; text-align: left;}
	#business .lead p span { display: inline;}
	
	#business .ctn .box { margin-bottom: 20px;}
	#business .ctn .box:before,
	#business .ctn .box:after { border: solid 15px transparent; border-top: solid 15px #fff;}
	#business .ctn .box:before{ left: 0; border-left: solid 15px #fff;}
	#business .ctn .box:after{ right: 0; border-right: solid 15px #fff;}

	#business .ctn .box .inner-box:before,
	#business .ctn .box .inner-box:after { border: solid 15px transparent; border-bottom: solid 15px #fff;}
	#business .ctn .box .inner-box:before{ border-left: solid 15px #fff;}
	#business .ctn .box .inner-box:after{ border-right: solid 15px #fff;}

	#business .ctn .box .inner-box { padding: 30px;}

	#business .ctn .box .pht { margin: 0 auto 12px;}
	#business .ctn .box .pht p { font-size: 24px;}
	#business .ctn .box .pht p.fsM { font-size: 24px;}
	#business .ctn .box .pht p br.pc { display: none;}

	#business .ctn .box .txt h3 { margin-bottom: 4px; padding-left: 36px; font-size: 18px;}
	#business .ctn .box .txt h3 img { width: 24px;}
	#business .ctn .box .txt p { margin-bottom: 10px; font-size: 13px;}
	#business .ctn .box .txt .point { border-width: 1px;}
	#business .ctn .box .txt .point ul li { display: block; width: 100%; padding: 2px 0; padding-left: 18px; font-size: 12px;}
	#business .ctn .box .txt .point ul li:before { width: 8px; height: 8px; top: 6px;}

	#business .hex1 { width: 60px; right: -20px; top: 20px;}
	#business .hex2 { width: 50px; left: -20px; bottom: 20px;}
}