@charset "UTF-8";
/* CSS Document */

/* ////////////////////////////////////////////////////////////////////////////////////////////////////
 *
 * APPROACH ページレイアウトCSS
 * 
 * updata : 2018/3/15
 *
 * ///////////////////////////////////////////////////////////////////////////////////////////////// */

/********************** #coverImg **********************/
#coverImg.slide02,
#coverImg.slide02 li {
	height: 869px;
}

#coverImg.slide02 div.catchWrap {
	top: 28%;
}

#coverImg.slide02 div.catchWrap .inner {
	position: relative;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

#coverImg.slide02 div.catchWrap h2 {
	font-size: 1.8em;
}

#coverImg.slide02 div.catchWrap .catchTxt {
	margin: 3.5% 0;
	font-size: 3.2em;
	letter-spacing: 0.013em;
}

#coverImg.slide02 div.catchWrap .catchTxt .sub {
	display: block;
	font-size: 0.7em;
}

#coverImg.slide02 div.catchWrap .catchTxt .f_sans {
	display: inline-block;
	overflow: hidden;
	padding: 25px 0 0;
	width: 178px;
	height: 0;
	background: url(../approach/img/logo.png) no-repeat 0 0;
	background-size: contain;
	text-indent: 100%;
	font-family: 'Archivo', sans-serif;
}

#coverImg.slide02 div.catchWrap .txt {
	font-weight: normal;
	font-size: 1.6rem;
        line-height: 2;
}

/********************** .serviceSection **********************/
.serviceSection .ttl {
	margin: 8%  auto 2.5%;
}

.serviceSection .ttl + .sub {
	margin: 0 auto 5%;
}

.serviceSection .categoryList {
	margin: 4% auto 6.5%;
}

.serviceSection .categoryList li:nth-child(1) {
	padding: 4% 0 0;
}

.serviceSection .categoryList li:nth-child(2) {
	padding: 7.5% 0 0;
}

.serviceSection .categoryList p {
	margin: -0.15em;
	padding: 0 25px 1em;
	font-size: 3.4em;
	font-weight: bold;
}

/********************** .solutionSection **********************/
.solutionSection {
	padding: 4% 0;
}

.solutionSection .inner {
	max-width: 1263px;
}

.solutionSection .list_h.col4.categoryList {
/*	margin: -2% -6.254% 0; */
	margin: -2% -2.04%;
}

.solutionSection .list_h.col4.categoryList li {
	position: relative;
	margin: 0 2.04%;
	width: 20.92%;
}

.solutionSection .categoryList li:before {
	content: "";
	display: block;
	position: relative;
	margin: 5% 0 0 5%;
	padding: 100% 0 0;
	height: 0;
	border: 1px solid #000;
	z-index: 1;
	width: 100%;
}

.solutionSection .categoryList li:nth-child(1) {
	padding: 55px 0 0;
}

.solutionSection .categoryList li:nth-child(2) {
	padding: 40px 0 0;
}

.solutionSection .categoryList li:nth-child(3) {
	padding: 73px 0 0;
}

.solutionSection .categoryList li img {
	position: absolute;
	top: 0;
}

.solutionSection .categoryList li:nth-child(1) img {
	top: 55px;
}

.solutionSection .categoryList li:nth-child(2) img {
	top: 40px;
}

.solutionSection .categoryList li:nth-child(3) img {
	top: 73px;
}


.solutionSection .categoryList li p {
	margin: 8% auto 0;
	font-size: 2em;
	font-weight: bold;
	color: #000;
	text-align: center;
}

@media screen and (max-width:959px) {
	/********************** #coverImg **********************/
	#coverImg.slide02 {
		height: auto;
	}

	#coverImg.slide02 li {
		height: 100%;
	}

	#coverImg.slide02 ul:before {
		padding: 62.07% 0 0;
	}

	#coverImg.slide02 div.catchWrap {
		top: 25%;
	}

	#coverImg.slide02 div.catchWrap h2 {
		font-size: 1.3em;
	}

	#coverImg.slide02 div.catchWrap .catchTxt {
    		margin: 3.5% 0 5%;
		font-size: 3vw;
	}

	#coverImg.slide02 div.catchWrap .catchTxt .sub {
		font-size: 4vw;
	}

	#coverImg.slide02 div.catchWrap .catchTxt .f_sans {
		padding: 3.8vw 0 0;
		position: relative;
		top: 3px;
		width: 27.5vw;
	}
}

@media screen and (max-width:640px) {
	/********************** #coverImg **********************/
        #coverImg.slide02 div.catchWrap {
	top: 22%;
        }
        .categoryList {
               padding-bottom: 20px;
        }


	#coverImg.slide02,
	#coverImg.slide02 li {
	/*	height: 500px; */
	}

	#coverImg.slide02 div.catchWrap h2 {
		font-size: 1em;
	}

	#coverImg.slide02 div.catchWrap .catchTxt {
		font-size: 4.4vw;
                line-height: 1.2;
	}

	#coverImg.slide02 div.catchWrap .catchTxt .sub {
		font-size: 1em;
	}

	#coverImg.slide02 div.catchWrap .catchTxt .f_sans {
		padding: 3.2vw 0 0;
		position: relative;
		top: 0;
		width: 25vw;
	}

	#coverImg.slide02 div.catchWrap .txt{
                width: 90%;
                margin: 0 auto;
		font-size: 1.1em;
                line-height: 1.6;
	}

	
	/********************** .serviceSection **********************/
	.serviceSection .categoryList p {
		margin: -3vw;
		padding: 0 4.2vw 1em;
		font-size: 6vw;
	}

	/********************** .solutionSection **********************/
	.solutionSection .categoryList li:nth-child(1) {
		padding: 8vw 0 0;
	}

	.solutionSection .categoryList li:nth-child(2) {
		padding: 5vw 0 0;
	}

	.solutionSection .categoryList li:nth-child(3) {
		padding: 12vw 0 0;
	}

	.solutionSection .categoryList li:nth-child(1) img {
		top: 8vw;
	}

	.solutionSection .categoryList li:nth-child(2) img {
		top: 5vw;
	}

	.solutionSection .categoryList li:nth-child(3) img {
		top: 12vw;
	}


	.solutionSection .categoryList li p {
		font-size: 3.4vw;
		line-height: 1.2;
	}
}

@media screen and (max-width:480px) {
                #coverImg.slide02 div.catchWrap {
	         top: 20%;
                }
		#coverImg.slide02 div.catchWrap .catchTxt {
    			margin: 2% 0 3%;
		}

		#coverImg.slide02 div.catchWrap .txt{
			font-size: 1.2rem;
		}
		#coverImg.slide02 div.catchWrap .inner {
			max-width: 98%;
		}

	}