@charset "utf-8";

.mainImage{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height:0;
	padding-top: 24.41%;
	background-image: url("../img/net/wwd/main.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
}

/* 共通 */
ul.act{ counter-reset: number 0;}
ul.act li{
	position: relative;
	margin-bottom: 10%;
}
ul.act li p.ttl{
	position: relative;
	margin-bottom: 4%;
	padding: 2% 2% 2% 2em;
	text-indent: -2em;
	text-align: left;
	font-size: .20rem;
	font-weight: bold;
	color:#4187c7;
}
ul.act li p.ttl:before{
	position: relative;
	counter-increment: number 1;
	content: counter(number);
	font-size:.28rem;
	padding-right: 1em;
}

/* wwd */
#wwd{
	position: relative;
	margin: 0 auto;
	padding: 8% 0 0 0;
	background-image: url("../img/common/bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-align: left;
	color: #414142;
}
#wwd h2{
	position: relative;
	margin: 0 0 4% 0;
	width: 100%;
	height:0;
	padding-top: 6%;
	background-image: url("../img/net/wwd/ttl_wwd.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#wwd h3{
	position: relative;
	margin: 8% auto;
	padding-bottom: 4%;
	color: #4187c7;
	font-size: .20rem;
	line-height: 1.8em;
	font-weight: bold;
	border-bottom: solid 2px #4187c7;
	text-align: center;
}
#wwd h4{
	position: relative;
	margin: 8% auto 4% auto;
	text-align: center;
}
#wwd .contents{
	position: relative;
	margin: 8% auto 0 auto;
	padding-bottom: 2%;
}
#wwd .contents p.txt{
	position: relative;
	margin: 0 auto;
	width: 90%;
}
#wwd .contents ul li ul{
	position: relative;
	margin: 8% auto;
	text-align: center;
	width: 90% !important;
}
#wwd .contents ul li ul li div{
	position: relative;
	margin: 0 auto;
	width: 80%;
}

/* aim */
#aim{
	position: relative;
	margin: 0 auto;
	padding: 8% 0;
	background-color: rgba(0,103,170,.10);
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
	color: #414142;
}
#aim p{
	position: relative;
	margin: 0 auto 8% auto;
	text-align: left;
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* 共通 */
	ul.act{width: 800px !important; }
	ul.act li{margin-bottom: 10px !important; margin-top: 50px;}
	ul.act li p.ttl{
		margin-bottom: 10px;
		padding: 0 0 0 1em;
		font-size: .24rem;
	}
	ul.act li p.ttl:before{font-size:.36rem;}
	
	/* wwd */
	#wwd{padding: 0 0 60px 0;margin: 0 auto;background-image: none;}
	#wwd .contents-inner{
		margin: 0 auto;
		padding-top: 60px;
		background-image: url("../img/common/bg.jpg");
		background-size: 729px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#wwd h2{
		margin: 0 0 30px 20px;
		width: 770px;
		padding-top: 38px;
		background-size: contain;
	}
	#wwd h3{
		margin: 0 auto;
		padding: 0 0 25px 0;
		width: 800px;
		font-size: .24rem;
	}
	#wwd h4{margin: 40px auto 20px auto; font-size: .20rem;}
	#wwd p{margin: 0 0 30px 20px;width: 800px;}
	#wwd .contents{
		margin: 70px auto 0 auto;
		width: 800px;
	}
	#wwd .contents p.txt{
		width: 700px !important;
		margin: 0 0 0 60px;
	}
	#wwd .actImg{ 
		position: relative;
		margin: 0 auto;
		width: 480px;
	}
	#wwd .contents ul li ul{
		margin: 0 auto !important;
		width: 670px !important;
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: center;
	}
	#wwd .contents ul li ul li{
		position: relative;
		width: 180px;
	}
	#wwd .contents ul li ul li div{
		height: 170px;
		width: auto;
		margin-bottom: 10px;
		text-align: center;
	}
	#wwd .contents ul li ul li div img{
		position: absolute;
		bottom:0;
		left: 50%;
		transform: translateX(-50%);
	}
	#wwd .contents ul li ul li div.h125 img{
		height: 125px;
		width: auto;
	}

	/* aim */
	#aim{padding: 60px 0;}
	#aim p{
		margin: 0 auto 50px auto;
		text-align: center;
		font-size: .16rem;
		line-height: 1.8em;
	}
	
}