@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
@media screen and (min-width:769px){
	header nav a.nav_business::after{
  		transform: scale(1, 1);
	}
	
	body#business{
		opacity: 0;
	}
	#business .business_cont{
		width:1000px;
		margin:0 auto 100px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#business .mainbox{
		padding:0 0 100px 0;
		background:#fdd000;
		position: relative;
		margin:0 0 100px 0;
	}
	
	#business .mainbox::after{
		content: "";
		width:100%;
		height:270px;
		background:#fff;
		position: absolute;
		top:0;
		left:0;
		z-index:1;
	}
	
	#business .mainbox .innerbox{
		width:1000px;
		margin:0 auto;
		z-index:2;
		position: relative;
	}
	
	#business .mainbox .innerbox .phbox{
		width:100%;
		padding-top:54.68%;
		position: relative;
		margin:0 0 60px 0;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#business .mainbox .innerbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		background:#1a1a1a;
		top:0;
		left:0;
		z-index: 2;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#business .mainbox .innerbox .phbox.active{
		transform: scaleX(1);
	}
	
	#business .mainbox .innerbox .phbox.active::after{
		transform: scaleX(0);
	}

	#business .mainbox .innerbox .phbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
	}
	
	#business .mainbox .innerbox .mtl{
		font-family: 'Oswald', sans-serif;
		font-size: 8rem;
		line-height: 1;
		text-align: center;
		overflow: hidden;
	}
	
	#business .mainbox .innerbox .mtl span{
		position: relative;
		top:8rem;
		transition: all 0.5s;
		transition-delay: 0s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#business .mainbox .innerbox .active .mtl span{
		top:0;
	}
	
	#business .mainbox .innerbox .tx{
		font-size: 1.3rem;
		line-height: 2.9rem;
		margin:30px 0 0 0;
		font-size: 2rem;
		line-height: 1.8;
		font-weight:600;
		margin:0px 0 0 0;
		text-align: center;
		transition: all 0.5s;
		transition-delay: 0.25s;
		opacity: 0;
	}
	
	#business .mainbox .innerbox .active .tx{
		opacity: 1;
	}
	
	#business .business_cont .box{
		margin:0 0 100px 0;
	}
	
	#business .business_cont .box .mtl{
		font-size:2.4rem;
		padding:20px;
		border-left:5px solid #fdd000;
		font-weight: 600;
		margin:0 0 30px 0;
	}
	
	#business .business_cont .box .tl span{
		border-radius: 5px;
		width:90px;
		background:#fdd000;
		text-align: center;
		font-size:1.3rem;
		line-height: 1;
		font-weight: normal;
		padding:7px 0;
		display: inline-block;
		margin:0 20px 0 0;
	}
	
	#business .business_cont .box .tl{
		font-size:2rem;
		line-height: 3.5rem;
		font-weight: 600;
		margin:0 0 20px 0;
	}
	
	#business .business_cont .box .tx{
		font-size:1.3rem;
		line-height: 2.6rem;
		margin:0 0 30px 0;
	}
	
	#business .business_cont .box .tx.last{
		margin:0 0 0 0;
	}
	
	#business .business_cont .box:last-child{
		margin:0 0 0 0;
	}
	
	#business .mainbox .listbox{
		display: flex;
		justify-content: space-between;
		margin:100px auto 0;
	}
	
	#business .mainbox .listbox .box{
		width:calc((100% - 20px) / 3);
		display: flex;
		flex-direction: column;
	}
	
	#business .mainbox .listbox .phbox{
		margin:0 0 20px 0;
		position: relative;
		padding-top:75.82%;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#business .mainbox .listbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		background:#1a1a1a;
		top:0;
		left:0;
		z-index: 2;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#business .mainbox .listbox.active .phbox{
		transform: scaleX(1);
	}
	
	#business .mainbox .listbox.active .phbox::after{
		transform: scaleX(0);
	}
	
	#business .mainbox .listbox .phbox img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
		z-index:1;
	}
	
}

@media screen and (max-width:768px){
	body#business{
		opacity: 0;
	}
	#business .business_cont{
		width:90%;
		margin:0 auto 50px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#business .mainbox{
		padding:0 0 50px 0;
		background:#fdd000;
		position: relative;
		margin:0 0 50px 0;
	}
	
	#business .mainbox::after{
		content: "";
		width:100%;
		height:25vw;
		background:#fff;
		position: absolute;
		top:0;
		left:0;
		z-index:1;
	}
	
	#business .mainbox .innerbox{
		width:90%;
		margin:0 auto;
		z-index:2;
		position: relative;
	}
	
	#business .mainbox .innerbox .phbox{
		width:100%;
		padding-top:54.68%;
		position: relative;
		margin:0 0 40px 0;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#business .mainbox .innerbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		background:#1a1a1a;
		top:0;
		left:0;
		z-index: 2;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#business .mainbox .innerbox .phbox.active{
		transform: scaleX(1);
	}
	
	#business .mainbox .innerbox .phbox.active::after{
		transform: scaleX(0);
	}

	#business .mainbox .innerbox .phbox img{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
	}
	
	#business .mainbox .innerbox .mtl{
		font-family: 'Oswald', sans-serif;
		font-size: 4rem;
		line-height: 1;
		text-align: center;
		overflow: hidden;
	}
	
	#business .mainbox .innerbox .mtl span{
		position: relative;
		top:4rem;
		transition: all 0.5s;
		transition-delay: 0s;
		transition-timing-function: cubic-bezier(.14,.76,.34,.99);
	}
	
	#business .mainbox .innerbox .active .mtl span{
		top:0;
	}
	
	#business .mainbox .innerbox .tx{
		font-size: 1.4rem;
		line-height: 2.5rem;
		text-align: center;
		margin:0px 0 0 0;
		transition: all 0.5s;
		transition-delay: 0.25s;
		opacity: 0;
	}
	
	#business .mainbox .innerbox .active .tx{
		opacity: 1;
	}
	
	#business .business_cont .box{
		margin:0 0 50px 0;
	}
	
	#business .business_cont .box .mtl{
		font-size:1.7rem;
		line-height: 2.8rem;
		padding:3px 15px;
		border-left:5px solid #fdd000;
		font-weight: 600;
		margin:0 0 20px 0;
	}
	
	#business .business_cont .box .tl span{
		border-radius: 5px;
		width:90px;
		background:#fdd000;
		text-align: center;
		font-size:1.2rem;
		line-height: 1;
		font-weight: normal;
		padding:7px 0;
		display: inline-block;
		margin:0 0 10px 0;
	}
	
	#business .business_cont .box .tl{
		font-size:1.4rem;
		line-height: 2.9rem;
		font-weight: 600;
		margin:0 0 5px 0;
		width:100%;
		display: flex;
		flex-direction: column;
	}
	
	#business .business_cont .box .tx{
		font-size:1.2rem;
		line-height: 2.1rem;
		margin:0 0 30px 0;
	}
	
	#business .business_cont .box .tx.last{
		margin:0 0 0 0;
	}
	
	#business .business_cont .box:last-child{
		margin:0 0 0 0;
	}
	
	#business .mainbox .listbox{
		display: flex;
		justify-content: space-between;
		margin:50px auto 0;
	}
	
	#business .mainbox .listbox .box{
		width:calc((100% - 5px) / 3);
		display: flex;
		flex-direction: column;
	}
	
	#business .mainbox .listbox .phbox{
		margin:0 0 0 0;
		position: relative;
		padding-top:100%;
		transform: scaleX(0);
		transition: all 0.5s;
		transform-origin: left;
	}
	
	#business .mainbox .listbox .phbox::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		background:#1a1a1a;
		top:0;
		left:0;
		z-index: 2;
		transform: scaleX(1);
		transform-origin: right;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#business .mainbox .listbox.active .phbox{
		transform: scaleX(1);
	}
	
	#business .mainbox .listbox.active .phbox::after{
		transform: scaleX(0);
	}
	
	#business .mainbox .listbox .phbox img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
		z-index:1;
	}
	
}