/*===============================================
●画面の横幅が769px以下
===============================================*/
@media screen and (max-width: 769px){

	.content .mainImgContainer {
		background-image: url("../../images/special_skills/topImage.jpg");
	}

	.contents {
		margin-top: 80px;
	}

	.pageMenu {
		padding: 7% 2em;
	}

	.skill {
		padding: 0 20px;
	}

	.skill:not(:last-of-type) {
		margin-bottom: 96px;
	}
	
	.skillsContainer .ttl {
		margin-bottom: 68px;
	}

	.skillsContainerInner {
		position: relative;
	}

	.skillsContainerInner.imgRight:before {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgRed.png");
		z-index: -1;
		width: 72px;
		height: 72px;
		top: -20px;
		left: -20px;
	}
	.skillsContainerInner.imgRight:after {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgBlue.png");
		z-index: -2;
		width: 72px;
		height: 72px;
		bottom: -20px;
		right: -20px;
	}

	.skillsContainerInner.imgLeft:before {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgRed.png");
		z-index: -1;
		width: 72px;
		height: 72px;
		top: -20px;
		right: -20px;
	}
	.skillsContainerInner.imgLeft:after {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgBlue.png");
		z-index: -2;
		width: 72px;
		height: 72px;
		bottom: -20px;
		left: -20px;
	}

	.item:not(:first-of-type) {
		margin-top: 68px;
	}

	img {
		width: 100%;
	}

	.subBox {
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.subBoxImg {
		width: 100%;
	}

	.figureBlock .box {
		background-color: #fff;
		padding: 32px 20px;
		margin-bottom: 16px;
		position: relative;
		z-index: 2;
		font-family: "a-otf-midashi-go-mb31-pr6n", sans-serif;
		font-size: 14px;
	}

	.figureBlock .box h3 {
		font-family: "a-otf-midashi-go-mb31-pr6n", sans-serif;
		display: inline-block;
		background:#3B4043;
		color: #fff;
		margin-bottom: 24px;
		font-size: 1.25rem;
		padding: 4px 16px 8px 16px;
		letter-spacing: 0.05em;
	}

	.figureBlock .box p {
		line-height: 2;
	}
}

/*===============================================
●画面の横幅が1499px以上
===============================================*/
@media screen and (min-width: 770px) and (max-width: 1499px) {

	.contents .pageMenu {
		margin: 222px 0 120px 133px;
	}

	.skill {
		padding: 0 40px;
	}

	.skill:not(:last-of-type) {
		margin-bottom: 200px;
	}

	.skillsInner .skillsContainer .ttl {
		text-align: left;
		margin: 0 9.7% 110px;
	}

	.skillsContainerInner {
		position: relative;
	}

	.skillsContainerInner.imgRight:before {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgRed.png");
		z-index: -1;
		top: -40px;
		left: -40px;
		width: 320px;
		height: 320px;
	}
	.skillsContainerInner.imgRight:after {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgBlue.png");
		z-index: -2;
		right: -40px;
		bottom: -40px;
		width: 189px;
		height: 189px;
	}

	.skillsContainerInner.imgLeft:before {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgRed.png");
		z-index: -1;
		top: -40px;
		right: -40px;
		width: 320px;
		height: 320px;
	}
	.skillsContainerInner.imgLeft:after {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgBlue.png");
		z-index: -2;
		bottom: -40px;
		left: -40px;
		width: 189px;
		height: 189px;
	}
	
	.item:not(:first-of-type) {
		margin-top: 160px;
	}

	.figureBlock {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.figureBlock .box {
		background-color: #fff;
		padding: 80px 5.9%;
		position: relative;
		z-index: 2;
	}

	.figureBlock .box h3 {
		font-family: "a-otf-midashi-go-mb31-pr6n", sans-serif;
		display: inline-block;
		background:#3B4043;
		color: #fff;
		padding: 10px 20px;
		margin-bottom: 24px;
		font-size: 1.875rem;
		line-height: 1.2;
		letter-spacing: 0.05em;
	}

	.figureBlock .box p {
		font-size: 1rem;
		font-weight: bold;
		color: #3B4043;
		line-height: 1.9;
		letter-spacing: 0.03em;
	}

	.figureBlock .imgBox {
		display: flex;
		width: 100%;
	}

	.figureBlock img {
		width: 100%;
	}

	.subBox {
		margin-top: 40px;
		display: flex;
		gap: 40px;
	}

	.subBoxImg {
		width: calc((100% - (3.6% * 2)) / 3);
	}
}

/*===============================================
●画面の横幅が1500px以上
===============================================*/
@media screen and (min-width: 1500px){

	.content .mainImgContainer {
		background-image: url("../../images/special_skills/topImage.jpg");
	}

	.contents .pageMenu {
		margin: 222px 0 120px 133px;
	}

	.skill {
		padding: 0 40px;
	}

	.skill:not(:last-of-type) {
		margin-bottom: 200px;
	}


	.skillsInner .skillsContainer .ttl {
		text-align: left;
		margin: 0 9.7% 110px;
	}

	.skillsContainerInner {
		position: relative;
	}

	.skillsContainerInner.imgRight:before {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgRed.png");
		z-index: -1;
		top: -56px;
		left: 0;
		width: 320px;
		height: 320px;
	}
	.skillsContainerInner.imgRight:after {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgBlue.png");
		z-index: -2;
		right: 64px;
		bottom: -40px;
		width: 189px;
		height: 189px;
	}

	.skillsContainerInner.imgLeft:before {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgRed.png");
		z-index: -1;
		top: -56px;
		right: 0;
		width: 320px;
		height: 320px;
	}
	.skillsContainerInner.imgLeft:after {
		position: absolute;
		content: '';
		background-image: url("../../images/common/bgBlue.png");
		z-index: -2;
		bottom: -38px;
		left: 88px;
		width: 189px;
		height: 189px;
	}

	.figureBlock {
		display: flex;
		align-items: flex-start;
		margin-left: 56px;
	}

	.figureBlock .box {
		background-color: #fff;
		width: 49.9%;
		padding: 80px 5.9%;
		position: relative;
		z-index: 2;
	}

	.figureBlock .box h3 {
		font-family: "a-otf-midashi-go-mb31-pr6n", sans-serif;
		display: inline-block;
		background:#3B4043;
		color: #fff;
		padding: 10px 20px;
		margin-bottom: 24px;
		font-size: 1.875rem;
		line-height: 1.2;
		letter-spacing: 0.05em;
	}

	.figureBlock .box p {
		font-size: 1rem;
		font-weight: bold;
		color: #3B4043;
		line-height: 1.9;
		letter-spacing: 0.03em;
	}

	.figureBlock img {
		margin-left: -24px;
		margin-top: 24px;
		position: relative;
		z-index: -1;
		display: flex;
		flex: 1;
	}

	.subBox {
		margin-top: 40px;
		margin-left: 9.7%;
		display: flex;
		gap: 40px;
		padding-right: 133px;
	}

	.subBoxImg {
		width: calc((100% - (3.6% * 2)) / 3);
	}

	.item:not(:first-of-type) {
		margin-top: 160px;
	}

	.itemImgLeft .figureBlock {
		flex-direction: row-reverse;
	}

	.itemImgLeft .figureBlock .box {
		margin-right: 56px;
	}

	.itemImgLeft .figureBlock img {
		margin-left: 78px;
		margin-top: 40px;
	}
}