@charset "utf-8";

#page-business .inner-sct { padding: 40px 0 120px;}
#page-business .bloc { padding: 50px 0;}
#page-business .bloc .ctn { position: relative; width: 88%; max-width: 1000px; margin: 0 auto;}
#page-business .bloc h2 { margin-bottom: 20px;}
#page-business .bloc h2 img { width: calc( 100% - 220px ); max-width: 720px;}
#page-business .bloc .tit { position: absolute; right: 0; top: 0; width: 240px;}
#page-business .bloc .tit.tit-3 { width: 230px;}
#page-business .bloc .tit.tit-4 { width: 300px;}
#page-business .bloc .tit.tit-5 { width: 220px;}
#page-business .bloc .tit h3 { position: absolute; top: 0%;
 font-size: 20px; font-weight: 700; line-height: 1.4;
}
#page-business .bloc .tit.tit-5 h3{ top: -25px;}
#page-business .bloc .tit img { display: block; width: 120px; margin: 0 0 0 auto;}
#page-business .bloc .box { position: relative; width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 0 18px rgba(0,0,0,0.1);}
#page-business .bloc .box .pht { width: 50%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
#page-business .bloc .box .pht.pht-1 { background: url('/img/business/img-1.jpg') no-repeat 50% 50% / cover;}
#page-business .bloc .box .pht.pht-2 { background: url('/img/business/img-2.jpg') no-repeat 50% 50% / cover;}
#page-business .bloc .box .pht.pht-3 { background: url('/img/business/img-3.jpg') no-repeat 50% 50% / cover;}
#page-business .bloc .box .pht.pht-4 { background: url('/img/business/img-4.jpg') no-repeat 50% 50% / cover;}
#page-business .bloc .box .pht.pht-5 { background: url('/img/business/img-5.jpg') no-repeat 50% 50% / cover;}
#page-business .bloc .box .pht:after { content: ''; display: block; width: 120px; height: 100%; background: #fff;
 position: absolute; right: -60px; top: 0; transform: skewX(-8deg);
}
#page-business .bloc .box .pht img { display: none; width: 100%;}
#page-business .bloc .box .txt { position: relative; z-index: 2; width: 50%; margin: 0 0 0 auto; padding: 60px 60px 50px 0;}
#page-business .bloc .box .txt p { margin-bottom: 20px; font-size: 17px; letter-spacing: 0.1rem; line-height: 1.8;}
#page-business .bloc .box .txt p:last-child { margin-bottom: 0px;}

@media (max-width: 1281px) {
	#page-business .bloc .box .txt p { font-size: 16px;}
}
@media (max-width: 1001px) {
	#page-business .bloc .box .txt { padding: 40px 40px 30px 0;}
	#page-business .bloc .box .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#page-business .bloc h2 { margin-bottom: -12px;}
	#page-business .bloc h2 img { width: 100%;}
	#page-business .bloc .tit { position: relative; right: auto; top: auto; width: 240px; margin-bottom: 30px;}
	#page-business .bloc .tit.tit-5 { width: 300px;}
	#page-business .bloc .tit.tit-5 h3{ top: 0px;}
	#page-business .bloc .tit h3 br.pc { display: none;}

	#page-business .bloc .box .pht { width: 100%; position: relative; left: auto; top: auto;}
	#page-business .bloc .box .pht.pht-1,
	#page-business .bloc .box .pht.pht-2,
	#page-business .bloc .box .pht.pht-3,
	#page-business .bloc .box .pht.pht-4,
	#page-business .bloc .box .pht.pht-5 { background: none;}
	#page-business .bloc .box .pht img { display: block;}
	#page-business .bloc .box .pht:after { content: none;}
	#page-business .bloc .box .txt { width: 100%; padding: 20px 40px 30px;}
}
@media (max-width: 641px) {
	#page-business .bloc { padding: 30px 0;}
	#page-business .bloc .tit { width: 200px; margin-bottom: 20px;}
	#page-business .bloc .tit.tit-3 { width: 180px;}
	#page-business .bloc .tit.tit-4 { width: 240px;}
	#page-business .bloc .tit.tit-5 { width: 240px;}
	#page-business .bloc .tit h3 { padding-right: 0px; font-size: 16px;}
	#page-business .bloc .tit img { width: 100px;}
	#page-business .bloc .box .txt { padding: 20px 30px 30px;}
	#page-business .bloc .box .txt p { font-size: 14px;}
}
@media (max-width: 481px) {
	#page-business .inner-sct { padding: 20px 0 80px;}
	#page-business .bloc { padding: 20px 0;}
	#page-business .bloc h2 { margin-bottom: -8px;}
	#page-business .bloc .tit { width: 170px; margin-bottom: 20px;}
	#page-business .bloc .tit.tit-3 { width: 150px;}
	#page-business .bloc .tit.tit-4 { width: 210px;}
	#page-business .bloc .tit.tit-5 { width: 200px;}
	#page-business .bloc .tit h3 { font-size: 14px;}
	#page-business .bloc .tit img { width: 80px;}

	#page-business .bloc .box .txt { padding: 12px 20px 20px;}
	#page-business .bloc .box .txt p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}
}

