body{
	background: #EDE9E2;
}
section,h2{
	padding: 0;
	margin: 0;
}

.branding-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;
}
.branding-head{
	position: absolute;
	left: -3.1vw;
	bottom: 3.5vw;
	width: 38.3vw;
	height: 9.4vw;
	z-index: 2;
	transform: translateY(100%);
	& > img{
		object-fit: cover;
		object-position: center;
		width: 100%;
		height: 100%;
	}
}
.branding-page{
	position: relative;
	z-index: 0;
	overflow-x: hidden;
	background-image: url("../images/background/15_bg-pc.png");
	background-size: cover;
}
.branding-top{
	padding: 0 1rem;
	padding-bottom: 6.854167vw;
}
.top-text{
	position: relative;
	width: 73.9vw;
	margin-left: 5%;
	margin-top: 2.1vw;
	height: fit-content;
	padding-top: 5.7vw;
	padding-left: 5.1vw;
	padding-right: 30.8vw;
	padding-bottom: 8.1vw;
	background-color: #fff;
	border: #000 solid 0.3vw;
	border-radius: 0.7vw;
	box-shadow: 0px 0px 30px 0px rgba(0, 42, 106, 0.1);
}
.top-text::after{
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0.8vw;
	right: -0.8vw;
	background-color: #fff;
	border: #000 solid 0.3vw;
	border-radius: 0.7vw;
	box-shadow: 0px 0px 30px 0px rgba(0, 42, 106, 0.1);
}
.top-title{
	font-size: 1.875vw;
	font-weight: 700;
	text-align: left;
	opacity: 1;
	letter-spacing: 1.88px;
	line-height: 1.8vw;
}
.top-description{
	margin-top: 2.1vh;
	text-align: left;
	font-size: 1.25vw;
	letter-spacing: 0px;
	font-weight: 500;
	line-height: 2.1vw;
	color: #000000;
	font-style: normal;
	font-variant: normal;
	opacity: 1;
	max-width: 39.1vw;
}
.top-img{
	position: absolute;
	right: -12.7vw;
	top: 13.4vh;
	width: 59.3vw;
	height: 34.3vw;
	z-index: 2;
	& > span{
	    display: block;
	    position: relative;
	    width: 100%;
	    height: 34.3vw;
	    transform-origin: 0 100%;
	    transform: skewX(-11deg) translatez(1px);
	    overflow: hidden;
	    border: 0.3vw solid #000000;
	    box-shadow: 0.3vw 0.3vw 0.5vw #0000002B;
	    & > img{
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    object-position: center;
		    transform-origin: inherit;
		    transform: skewX(10deg) scale(111%,101%);
		    left: -0.3%;
		    bottom: -0.9%;
		    -webkit-transition: 0.4s ease;
		    transition: 0.4s ease;
	    }
	}
}
.top-img:hover img{
	transform: scale(120%, 109%) skewX(10deg);
	filter: brightness(0.5) contrast(0.9) blur(0.09px);
}
.na-studio{
	margin-bottom: 16vw;
}
.na-studio-title{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 19.1vh;
	border-top: 0.3vw solid black;
	border-bottom: 0.3vw solid black;
	text-align: center;
	margin-bottom: 2.9vw;
	& > span{
		display: block;
		font-size: 5.6vw;
		font-weight: 700;
		line-height: 19.1vh;
	}
}

.studio-list{
	display: flex;
	justify-content: center;
	align-items: center;
	#margin-bottom: 16vw;
}
.studio{
	margin-bottom: 16vh;
	position: relative;
	width: 29.7vw;
	padding-left: 0px;
	padding-right: 0px;
	margin-right: 0.6vw;
}
.studio-img{
	transform-origin: 0 100%;
	transform: skewX(-10deg);
	width: fit-content;
	border: 0.3vw solid #000000;
	& span{
		display: block;
		position: relative;
		width: 26.3vw;
		height: 19.4vw;
		overflow: hidden;
		& > img{
			position: absolute;
			width: 100%;
			height: 100%;
			object-position: center;
			transform-origin: center;
			transform: skewX(10deg) scale(115%, 102%);
			-webkit-transition: 0.4s ease;
			transition: 0.4s ease;
		}
	}
}
.studio-img:hover img{
	transform: scale(124%,110%) skewX(10deg);
	filter: brightness(0.5) contrast(0.9) blur(0.09px);
}
.studio-content{
	border-radius: unset;
	transform: skew(-10deg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	bottom: -64%;
	left: 7.5%;
	width: 26.1vw;
	height: 16.5vw;
	position: absolute;
}
.studio-title{
	color: #ff7600;
	font-size: 1.4vw;
	font-weight: 700;
	line-height: 2.1vw;
	background: #000000;
	text-align: center;
	padding: 0.4vw;
	border: 0.3vw solid #000000;
	& span{
		display: block;
		transform: skewX(10deg);
	}
}
.studio-text{
	position: absolute;
	min-height: 68.4%;
	height: max-content;
	width: 100%;
	color: black;
	font-size: 0.9vw;
	font-weight: 700;
	background: #ff7600;
	text-align: left;
	line-height: 1.4vw;
	border: 0.3vw solid #000000;
	display: table-cell;
	vertical-align: middle;
	& p{
		height: max-content;
		text-align: left;
		width: 22.98vw;
		vertical-align: middle;
		margin: auto;
		padding-top: 0.78vw;
		transform: skewX(10deg);
	}
}

.na-feature-title{
	width: 41.6%;
	margin-bottom: 5.2vw;
	margin-top: -6vh;
	& svg{
		height: fit-content;
	}
}
.feature-contents{
	display: flex;
	flex-wrap: wrap;
}
.feature-content{
	margin-right: 0.9vw;
	margin-left: 5.2vw;
	border: 0.3vw solid #000000;
	border-radius: 0.7vw;
	background: #fef9f0;
	height: fit-content;
	padding: 0px;
	margin-bottom: 7.8vw;
	width: 41.7vw;
	position: relative;
}
.feature-content:nth-child(1),.feature-content:nth-child(2){
	min-height: 38vw;
}
.feature-content:nth-child(3),.feature-content:nth-child(4){
	min-height: 42.7vw;
}
.feature-title{
	position: absolute;
	top: -1.8vw;
	left: -2.3vw;
	width: 31.9vw;
	height: 10.3vw;
	z-index: 2;
	margin: 0;
}
.feature-img{
	margin-top: 2vw;
	height: 21.5vw;
	overflow: hidden;
	& img{
		width: 100%;
		height: 21.5vw;
		object-fit: cover;
		transition: 0.4s ease;
	}
}
.feature-img:hover img{
	transform: scale(1.08);
	filter: brightness(0.5) contrast(0.9) blur(0.09px);
}
.feature-text{
	padding: 2.1vw 3.3vw;
	font-size: 0.94vw;
	line-height: 1.6vw;
	letter-spacing: 0px;
	font-style: normal;
	font-variant: normal;
	font-weight: 700;
	opacity: 1;
	max-width: 41.2vw;
	& p{
		margin :0;
	}
}
.feature-text:has(.work-balance){
	padding: 2.1vw 4vw;
}
.custom-text{
	padding: 1.3vw 1.5vw 1.3vw 1.5vw;
}
.text-block{
	display: flex;
	justify-content: center;
	align-items: center;
margin-bottom: 0.625vw;
}
.text-circle{
	display: inline-block;
	width: 4.8vw;
	height: 4.8vw;
	padding: 0;
	& > span{
		display: inline-block;
		background: #11C7B2;
		width: 4.7vw;
		height: 4.7vw;
		border-radius: 100%;
		text-align: center;
		vertical-align: middle;
		display: table-cell;
		color: #FFFFFF;
		font-size: 1.1vw;
		line-height: 1.4vw;
	}
}
.text-description{
	display: inline-block;
	padding-left: 1.3vw;
	padding-right: 0px;
	width: 31.25vw;
}
@media (max-width: 1025px){
	.top-text{
		width: auto;
		margin-left: 0;
	}
}

@media (max-width: 760px){
	.branding-banner{
		height: auto;
	}
	.pc-banner{
		display: none;
	}
	.sp-banner{
		display: block;
		width: 100%;
		height: 110vw;
	}
	.branding-head{
		position: absolute;
		left: -2.5vw;
		bottom: -7.9vw;
		width: 57vw;
		height: 14.1vw;
		z-index: 2;
	}
	.branding-page{
		overflow: hidden;
		background-image: url("../images/background/15_bg-sp.png");
	}
	.branding-top{
		margin-top: 15.1vw;
		margin-left: -20px;
		position: relative;
		margin-bottom: 43vw;
	}
	.top-text{
		width: 93.4vw;
		border-radius: 0.8vw 0.8vw 0px 0px;
		padding-top: 13.8vw;
		padding-left: 6.6vw;
		padding-right: 9.2vw;
		padding-bottom: calc(42.4vw - 2.5rem);
		margin : 0;
		border-width: 0.6vw;
	}
	.top-text::after{
		width: 105%;
		top: 1.3vw;
		right: -2vw;
		border-width: 0.6vw;
	}
	.top-title{
		text-align: left;
		color: #ff7600;
		font-size: 4.7vw;
		line-height: 4.6vw;
		letter-spacing: 0px;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
	}
	.top-description{
		margin-top: 5.2vw;
		color: #000000;
		text-align: left;
		font-size: 3.1vw;
		line-height: 4.7vw;
		letter-spacing: 0px;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
		opacity: 1;
		max-width: unset;
		& p{
			margin-bottom: 2.5rem;
		}
	}
	.top-img{
		top: unset;
		right: unset;
		bottom: -29.6vw;
		left: 13.8vw;
		width: 116.7vw;
		height: 60.7vw;
		& span{
			width: 104.9vw;
			height: 60.7vw;
			& img{
				position: absolute;
				width: 111.6%;
				height: 102.2%;
				transform-origin: inherit;
				transform: skewX(10deg);
				left: -0.8%;
				bottom: -1.2%;
			}
		}
	}
	.top-img:hover img{
		transform: scale(1.08) skewX(10deg);
		filter: brightness(0.5) contrast(0.9) blur(0.09px);
	}
	.na-studio{
		margin-bottom: 0;
	}
	.na-studio-title{
		min-height: 13.4vw;
		border-width: 0.6vw;
		margin-bottom: 15.4vw;
		& span{
			text-align: center;
			color: #000000;
			font-size: 7.7vw;
			line-height: 10.3vw;
			letter-spacing: 0px;
			font-style: normal;
			font-variant: normal;
			font-weight: 700;
		}
	}
	.studio-list{
		padding-left: 12.3vw;
		justify-content: unset;
		flex-wrap: wrap;
	}
	.studio{
		width: 66.6vw;
		margin-bottom: 44.6vw;
	}
	.studio-img{
		transform-origin: 0 100%;
		transform: skewX(-10deg);
		width: fit-content;
		border: 0.6vw solid #000000;
		& span{
			width: 66.6vw;
			height: 49.1vw;
		}
	}
	.studio-content{
		width: 64.6vw;
		height: 41.8vw;
	}
	.studio-title{
		text-align: center;
		color: #ff7600;
		font-size: 4.6vw;
		line-height: 6.1vw;
		letter-spacing: 0px;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
		opacity: 1;
		padding: 0.9vw 0px 0.9vw 0px;
	}
	.studio-text{
		min-height: 27.6vw;
		border-top: unset;
		font-size: 2.3vw;
		line-height: 4.6vw;
		letter-spacing: 0px;
		border-width: 0.6vw;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
		opacity: 1;
		& p{
			height: max-content;
			text-align: left;
			width: 57.53vw;
			vertical-align: middle;
			margin: auto;
			padding-top: 0.7vw;
		}
	}
	.na-feature-title{
		padding-left: 0px;
		width: 94.8vw;
		height: 12.5vw;
		margin-top: 9vw;
		margin-bottom: 20.8vw;
	}
	.feature-content{
		width: 82.2vw;
		margin-left: 11.2vw;
		border-width: 0.6vw;
	}
	.feature-title{
		width: 62.9vw;
		height: 20.3vw;
		left: -4.6vw;
		top: -3.9vw;
	}
	.feature-img{
		margin-top: 4.3vw;
		height: 42.5vw;
		& img{
			max-width: 100%;
			height: 42.5vw;
			object-fit: cover;
		}
	}
	.feature-text{
		padding: unset;
		width: 67.8vw;
		max-width: 67.8vw;
		margin: 0 auto;
		margin-bottom: 6.2vw;
		margin-top: 3.9vw;
		font-size: 2.4vw;
		line-height: 4.2vw;
		letter-spacing: 0px;
		font-style: normal;
		font-variant: normal;
		font-weight: 700;
	}
	.feature-text:has(.work-balance){
		width: 65.5vw;
		padding: 0;
	}
	.text-block{
		margin-bottom: 4.1vw;
	}
	.custom-text{
		width: 100%;
		max-width: 100%;
	}
	.text-circle{
		width: 9.5vw;
		height: 9.5vw;
		padding: 0;
		& span{
			width: 9.5vw;
			height: 9.5vw;
			font-size: 2.2vw;
			line-height: 1.1em;
			letter-spacing: 0px;
			font-style: normal;
			font-variant: normal;
			font-weight: 700;
			opacity: 1;
		}
	}
	.text-description{
		padding-left: 2.5vw;
		padding-right: 0px;
		width: 63.9vw;
	}
}