body{
	background: #EDE9E2;
}
section{
	padding: 0;
	margin: 0;
}
.branding-philosophy-page{
	padding-top: 9vw;
	padding-bottom: 5vw;
	background-image: url("../images/background/15_bg-pc.png");
	background-size: cover;
	overflow-x: hidden;
}
.branding-philosophy-banner{
	position: relative;
	height: 22vw;
}
.pc-banner, .sp-banner{
	width: 100%;
	height: 100%;
	& > img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		vertical-align: middle;
	}
}
.sp-banner{
	display: none;
}
.bp-head{
	position: relative;
	top: -4vw;
	left: -3vw;
	width: 38%;
	& > img{
		object-fit: cover;
		object-position: center;
		width: 100%;
		height: 100%;
	}
}

.bp-menu{
	& ul{
		position: relative;
		background: #FF7600;
		left: 0;
		right: 0;
		width: 100%;
		height: 4vw;
		display: flex;
		justify-content: left;
		align-items: center;
		list-style: none;
		margin-left: 0;
	}
	& li{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 14.5vw;
		height: 100%;
		text-align: center;
		> a{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;

			font-size: 0.9375vw;
			line-height: 0.625vw;
			font-style: normal;
			font-variant: normal;
			font-weight: 700;
			color: black;
			text-decoration: none;
		}
	}
	& li::after{
		position: absolute;
		background: #000;
		top: 0;
		right: 0;
		content: "";
		height: 105%;
		width: 0.4vw;
		transform: skew(-16deg);
	}
}
.bp-content{
	margin: 0 5.2vw;
	margin-top: 12vw;
}

.business-box{
	position: relative;
	background: #fff;
	padding: 0 5.3vw 0;
	border-radius: 10px;
	border: 5px solid #000;
	box-shadow: 10px 10px 0px -5px #fff, 10px 10px 0px 0px #000;
}
[id$="business"]{
	position: absolute;
	top: -25vh;
}
.business-title{
	display: inline-block;
	position: relative;
	bottom: 10px;
	right: 7.9%;
	background-color: #FF7600;
	padding: 1.89474vw 6.25vw;
	text-align: center;
	border-radius: 10px;
	border: 5px solid #000;
	box-shadow: 10px 10px 0px -5px #11C7B2, 10px 10px 0px 0px #000;
	& > span{
		font-size: 1.3vw;
		line-height: 0.625vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
	}
}
.business-content{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12px;
}
.business-desc{
	width: 50%;
}
.game-business{
	& .business-desc{
		padding: 0 12px;
		& > .text-content{
			margin: 30px 0;
			font-size: 1.25vw;
			line-height: 2.1vw;
			font-weight: 700;
			text-align: left;
			& p{
				margin: 0 8px;
			}
		}
	}
	& .more-content{
		width: 26%;
		margin: 10vw 0 7.1vw;
		& .more-svg{
			width: 100%;
		}
	}
	
}
.business-img{
	position: relative;
	width: 50%;
	> span{
		display: inline-block;
		overflow: hidden;
		position: absolute;
		right: -30%;
		/*top: -126px;*/
		top: -9vw;
		background: #000;
		width: 48.8vw;
		height: 34.4vw;
		border: 5px solid #000;
		background: black;
		-webkit-clip-path: polygon(13.5% 0%, 100% 0%, 100% 100%, 0% 100%);
		clip-path: polygon(13.5% 0%, 100% 0%, 100% 100%, 0% 100%);
		& > span{
			display: block;
			width: 100%;
			height: 100%;
			-webkit-clip-path: polygon(13.5% 0%, 100% 0%, 100% 100%, 0% 100%);
			clip-path: polygon(13.5% 0%, 100% 0%, 100% 100%, 0% 100%);
			& > img{
				transition: 0.4s;
				-webkit-clip-path: polygon(13.5% 0%, 100% 0%, 100% 100%, 0% 100%);
				clip-path: polygon(13.5% 0%, 100% 0%, 100% 100%, 0% 100%);
				width: 100%;
				height: 100%;
				object-fit: revert;
			}
		}
	}
}

.business-img:hover img{
	transform: scale(1.2);
	filter: brightness(0.5) contrast(0.9) blur(0.09px);
}

.pc-ps-business{
	margin-top: 109px;
	& .business-desc {
		padding: 0 12px;
	}
	& .text-content{
		margin-top: 2.3vw;
		padding: 13px 0;
		line-height: 1.8vw;
		text-align: left;
		font-size: 0.9vw;
		font-weight: 700;
		& p{
			margin: 0;
			margin-bottom: 16px;
		}
	}
	& .more-svg{
		width: 26%;
		margin: 0 0 7.1vw;
	}
	.business-img img{
		width: 95%;
		height: 100%;
		margin-left: 33px !important;
		clip-path: none !important;
	}
}

.our-strength{
	margin-top: 120px;
	background: #fff;
	padding: 0 5.3125vw 0;
	border-radius: 10px;
	border: 5px solid #000;
	box-shadow: 10px 10px 0px -5px #fff, 10px 10px 0px 0px #000;
}

.our-str-title{
	display: inline-block;
	position: relative;
	right: 5.59vw;
	width: fit-content;
	text-align: center;
	background: #000;
	border: 5px solid #000;
	margin-top: 3px;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 0% 100%);
	& > span{
		display: inline-block;
		color: #000;
		width: 25.9vw;
		padding: 1.2vw 0 1.2vw;
		line-height: 40px;
		-webkit-clip-path: polygon(0% 0%, 100% -20%, 98% 100%, 0% 100%);
		clip-path: polygon(0% 0%, 100% -20%, 98% 100%, 0% 100%);
		background: #11C7B2;
		font-size: 1.3vw;
		font-weight: 700;
		line-height: 12px;
	}
}

.str-contents{
	display: flex;
	flex-wrap: wrap;
	margin-top: 5vw;
}
.str-content{
	width: 50%;
	margin-bottom: 20vw;
	position: relative;
}
.str-img{
	padding: 0px;
	margin: 0px;
	max-width: 698px;
	max-height: 373px;
	& > span{
		display: block;
		position: relative;
		width: 90.58%;
		height: 19.4vw;
		padding-bottom: 23%;
		transform-origin: 0 100%;
		transform: skewX(-10deg) translatez(1px);
		overflow: hidden;
		border: 5px solid #000000;
		& > img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			transform-origin: center;
			transform: skewX(10deg) scale(112%, 102%);
			position: absolute;
			-webkit-transition: 0.4s ease;
			transition: 0.4s ease;
		}
	}
}
.str-img:hover img{
	transform: scale(123%, 112%) skewX(10deg);
	filter: brightness(0.5) contrast(0.9) blur(0.09px);
}
.str-text{
	border-radius: unset;
	transform: skew(-10deg);
	-webkit-transform: skewX(-10deg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: -54%;
	left: 35%;
	width: 24.8vw;
	height: 14.2vw;
	position: absolute;
}
.str-title{
	color: #11C7B2;
	font-size: 1.5vw;
	font-weight: 700;
	line-height: 1.71875vw;
	background: #000;
	text-align: center;
	padding: 1.2768vw 0.77vw;
	border: 5px solid #000000;
}
.str-description{
	position: absolute;
	min-height: 68.4%;
	height: max-content;
	width: 100%;
	color: black;
	font-size: 18px;
	font-weight: 700;
	background: #11C7B2;
	text-align: left;
	line-height: 35px;
	border: 5px solid #000000;
	border-top: none;
	display: table-cell;
	vertical-align: middle;
	& > span{
		transform: skewX(12deg);
		display: block;
		height: max-content;
		text-align: left;
		width: 86%;
		vertical-align: middle;
		margin: auto;
		padding-top: 0.8vw;
	}
	& p{
		font-size: 0.9375vw;
		line-height: 1.8vw;
		font-weight: 700;
		margin: 0;
	}
}

@media (max-width:760px){
	.branding-philosophy-banner{
		width: 100%;
		height: 110vw;
	}
	.pc-banner{
		display: none;
	}
	.sp-banner{
		display: block;
		width: 100%;
		height: 100%;
	}
	.branding-philosophy-page{
		background-image: url("../images/background/15_bg-sp.png");
		padding-top: 15.8vw;
	}
	.bp-head{
		display: none;
	}
	.bp-menu{
		display: none;
	}
	.bp-content{
		margin: 0 5.2vw 0 -2.2vw;
	}
	.business-box{
		border: 0.6vw solid #000;
		box-shadow: 1.3vw 1.3vw 0px -0.6vw #fff, 1.3vw 1.3vw 0px 0px #000;
	}
	.business-title{
		padding: 2.9vw 12vw 2.9vw;
		border: 0.6vw solid #000;
		box-shadow: 1.3vw 1.3vw 0px -0.6vw #11C7B2, 1.3vw 1.3vw 0px 0px #000;
		& > span{
			font-size: 3.3vw;
			line-height: 1.6vw;
		}
	}
	.business-desc{
		width: 100%;
	}
	.game-business{
		& .business-desc{
			& .text-content{
				margin-bottom: 50vw;
				font-size: 3.2vw;
				line-height: 4.7vw;
				& p{
					margin: 0;
					margin-bottom: 16px;
				}
			}
			& .more-content{
				display: block;
				position: relative;
				width: 26%;
				top: -57.8vw;
				margin: 8.1vw 0 5.7vw;
				padding: 18% 0;
				& a{
					display: block; 
					height: 10.658vw;
					text-decoration: none;
				}
			}
			& .more-svg{
				#height: 10.658vw;
				#margin: 18% 0;
			}
		}
	}
	.business-img{
		width: 100%;
		& > span{
			border: 0.6vw solid #000;
			width: 128%;
			height: 60.79vw;
			top: -69vw;

		}
	}
	.pc-ps-business{
		& .text-content{
			padding: 30px 0;
			font-size: 3.2vw;
			line-height: 4.7vw;
		}
		& .more-content{
			top: unset;
		}
		& .more-svg{
			margin-bottom: 74.3vw;
		}
		& .business-img{
			& img{
				margin-left: 9.5vw;
				width: 88vw;
				clip-path: none;
			}
		}
	}
	.our-strength{
		margin-top: 12.4vw;
		border: 0.6vw solid #000;
		box-shadow: 1.3vw 1.3vw 0px -0.6vw #fff, 1.3vw 1.3vw 0px 0px #000;
	}
	.our-str-title{
		border: 0.6vw solid #000;
		margin-top: 0;
		& > span{
			font-size: 3.3vw;
			line-height: 1.6vw;
			width: 65.4vw;
			padding: 0.9em 0;
		}
	}
	.str-content{
		width: 83%;
		margin-bottom: 32.9vw;
	}
	.str-img{
		& span{
			width: 72.7vw;
			height: 42.9vw;
			border: 0.6vw solid #000;
		}
	}
	.str-text{
		top: 86%;
		left: 42%;
		width: 69%;
	}
	.str-title{
		font-size: 3.3vw;
		line-height: 3.7vw;
		padding: 2vw;
		border: 0.6vw solid #000;
	}
	.str-description{
		font-size: 2.4vw;
		line-height: 4.6vw;
		border: 0.6vw solid #000;
		min-height: 20vw;
		& > span{
			width: 88%;
			& > p{
				font-size: 2.3vw;
				line-height: 4.6vw;
			}
		}
	}

}