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


#topimg p{
	position:absolute;
	top:50%;
	right:10%;
	color:#FFF;
	width:45vw;
	}

#topimg h3.catch{
	display:inline-block;
	position:absolute;
	top:15%;
	right:10%;}
	

#project h5{
	text-align:center;
	color:#004e90;
	font-size:1.6vw;
	margin-bottom:20px;
}

#project .member .wrap{
	width:70%;
	padding:30px 0 70px;}

#project .member .flexbox{
	justify-content: center;}

#project .member .flexbox div{
	width:20%;}

#project .member .flexbox div:nth-child(n + 2){
	margin-left:4%;}

#project .member .flexbox.line3 div{
	width:20%;}

#project .member .flexbox.line3 div:nth-child(n + 2){
	margin-left:8%;}

#project .project02{
	margin-top:10vw;
}


.line {
	width: 300%;
	height: 20px;
	border-bottom: 2px solid #004e90;
	-webkit-transform:
	translateY(-20px)
	translateX(5px)
	rotate(-8deg); 
	-ms-transform: /* IE対策 */
	translateY(-20px)
	translateX(5px)
	rotate(-8deg);
	-moz--transform:
	translateY(-20px)
	translateX(5px)
	rotate(-8deg);/* Firefox対策 */
	position: absolute;
	top:44%;
	left:-50%;
	right:0;
    }


@media screen and (max-width: 769px) {


#topimg h3.catch{
	width:70%;
	top:20%;
	right:5%;}

#topimg p{
	top:50%;
	right:5%;
	}


#project h5{
	font-size:1.8rem;
}

#project .member .wrap{
	width:100%;}

#project .member .flexbox{
	justify-content: center;}

#project .member .flexbox div{
	width:20%;}

#project .member .flexbox div:nth-child(n + 2){
	margin-left:4%;}

#project .member .flexbox.line3 div{
	width:28%;}

#project .member .flexbox.line3 div:nth-child(n + 2){
	margin-left:8%;}

.line {
	top:46%;
    }

}

@media screen and (max-width: 480px) {


#topimg h3.catch{
	position:relative;
	width:100%;
	top:0;
	right:0;
	margin:220px auto 0;
	padding:20px;}

#topimg p{
	position:relative;
	top:0;
	right:0;
	padding:0 20px;
	width:100%;
	}
	
.line {
	top:47%;
    }

}




/* project（※基本indexとスタイル揃える）
-----------------------------------------*/

/*#project {
    background: linear-gradient(#f5f5f5 60%, #fff 40%);
}
*/

#project .project02, #project .project01{
	position:relative;
    width: 100%;
	height:35vw;/* projectのトップのみ35vw（その他30vw） */
	min-height:350px;/* projectのトップのみ（その他なし） */
}

#project .project01{
	/*margin-bottom:60px;*/
	text-align:right;}
	

#project .project01 .imgbox{
	position:absolute;
	right:0;
	width:60%;
	}

#project .project01 .text{
	position:absolute;
	left:0;
	top:20%;/* projectのトップのみ（その他なし） */
	width:42%;}

#project .project02 .imgbox{
	position:absolute;
	left:0;
	width:60%;
	}

#project .project02 .text{
	position:absolute;
	right:0;
	top:20%;/* projectのトップのみ（その他なし） */
	width:52%;}

#project .something{
	text-align:center;
	font-size:1.8vw;
	color:#004e90;
	font-style:italic;
	margin-bottom:22px;}

#project h4{
	font-size:1.8vw;
	color:#fff;
	line-height:2;}

#project h4>span{
	display:inline-block;
	background:#004e90;
	margin:5px 0;
	padding:0 10px;}

#project .project01 h4{
	text-align:right;}

@media screen and (max-width: 769px) {
	
#project .project02 .text{
	/*top:30%;*//* projectのトップのみ（その他なし） */
	width:52%;}

#project .something{
	font-size:3rem;
}

#project h4{
	font-size:1.3rem;}

}

@media screen and (max-width: 480px) {

#project .project02, #project .project01{
	position:relative;
	height: 1vw;
	margin-bottom:40px;
	
}

#project .project02,#project .project01{
	position: static;
	height: auto;
}

#project .project02 .imgbox,#project .project01 .imgbox{
	position: static;
	width:100%;
	height: auto;}

#project .project02 .text,#project .project01 .text{
	position:relative;
	width:100%;
	height: auto;
	margin-top:15px;}

#project .something{
	font-size:2rem;
}

}