@charset "utf-8";


main{
	margin-top:80px;
}

section{
	width:min(95%,1200px);
	margin:80px auto;
}
h2{
	width:min(99%,1200px);
	font-family: "Zen Old Mincho", serif;
	font-size:2.2rem;
	font-weight: 700;
	text-align: center;
	color:#2B2B2B;
	margin:80px auto 0 auto;
}

section h3{
	font-family: "Zen Old Mincho", serif;
	width:100%;
	font-size:2rem;	
	  font-weight: 800;
	  font-style: normal;
	border-bottom:2px solid #D0D0D0;
	margin-bottom:80px;
	text-align: left;
}

section h3 span{
	position: relative;
	padding-right:5px;
}

section h3 span::after{
	content:'';
	width: 100%;
	height: 2px;
	display: block;
	position: absolute;
	left:0;
	vottom:0;
	background-color: #3D60C0;
}

section .photo{
	width:100%;
	margin-top:50px;
	padding:40px 20px 50px 20px;
	font-size:1rem;
	text-align: center;
	border-radius: 10px;
	background-color: rgba(243,243,243,0.5);
	color:#1F1F1F;
}

section .photo img{
	border-radius: 5px;
}

section .photo h4{
	font-size:1.5rem;
	color:#21278A;
	margin-bottom:20px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

section .photo h4::before,
section .photo h4::after{
	content:'';
	flex:1;
	max-width: 50px;
	height: 2px;
	display: block;
	border-top: 1px solid #21278A;
	border-bottom: 1px solid #21278A;
	line-height: normal;
}

section .photo h4::before{
	margin-right:15px;
}

section .photo h4::after{
	margin-left:15px;
}

section p{
	margin:30px 0;
}

section .bana{
	display: flex;
	justify-content: flex-end;
	margin-top:30px;
}

section .bana a{
	width:230px;
	/*color:#575757;*/
	color:#1E43AD;
	padding:5px 10px;
	font-size:1.18rem;
	border-radius: 5px;
	line-height: 1;
	display: flex;
	/*flex-direction: column;*/
	justify-content: center;
	align-items: center;
	position: relative;
	padding-bottom:8px;
	
}

section .bana a span{
	width:100%;
	text-align: left;
	padding-left:10px;
	display: block;
	border-bottom:1px solid #1E43AD;
	padding-bottom:3px;
	position: relative;
}

section .bana a span::after{
	content: '';
	width:28px;
	height: 28px;
	display: block;
	/*background-color: #fff;*/
	border-bottom:1px solid #1E43AD;
	 transform: rotate(45deg);
	position: absolute;
	bottom:5px;
	/*bottom:-16px;*/
	/*right:-10px;*/
	right:-15px;
}

/*section:not(#engine) .photo img{
	width: 400px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 5px;
}

section .photo ul{
	display: flex;
}

section .photo li{
	width:400px;
	line-height: 0;
}*/


/*------------------------------------

	レスポンシブ

------------------------------------*/
/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (min-width: 980px){
	
	section .bana a:hover{
			color:#142E77;
		  animation:banatext 0.5s;
	}


	section .bana a:hover span{
		border-bottom:1px solid #142E77;
		  animation:banahover 0.5s;
	}

	section .bana a:hover span::after{
		border-bottom:1px solid #142E77;
		  animation:banahover 0.5s;
	}
}

@media screen and (min-width: 0) and (max-width: 980px){
	h2{
		line-height: 1.5;
	}
	section{
	margin:50px auto;
	}
	section h3{
		font-size:2rem;	
		margin-bottom:50px;
	}
	section .photo{
		padding:40px 10px 50px 10px;
	}
}

@media screen and (min-width: 0) and (max-width: 430px){
	h2{
		font-size:1.7rem;
		margin-bottom:30px;
	}
	section h3{
		font-size:1.5rem;
	}
	
	section .photo{
		background-color: rgba(243,243,243,0.6);
	}
	section .photo h4{
		font-size:1.2rem;
		line-height: normal;
	}
	section .photo p{
		text-align: left;
	}
	
	section .photo h4::before,
	section .photo h4::after{
		content:none;
	}
}

/*------------------------------------

	アニメーション

------------------------------------*/

@keyframes banatext{
	 0% {
		 color:#1E43AD;
  	}
	  100% {
		  color: #142E77;
	  }
}

@keyframes banahover{
	 0% {
		 border-bottom:1px solid #1E43AD;
  	}
	  100% {
		  border-bottom:1px solid #142E77;
	  }
}
/*------------------------------


	装置設計


------------------------------*/

/*------------------------------


	装置設計


------------------------------*/
section#device .photo img{
	width:min(100%,400px);
}


/*------------------------------


	エンジン設計


------------------------------*/

section#engine .photo ul{
	padding-top:40px;
	width:100%;
	gap:40px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

section#engine .photo li{
	max-width:calc(100% / 3);
	text-align: center;
}

section#engine .photo li img{
	width:auto;
	max-width: 250px;
	height: auto;
	max-height: 200px;
	border-radius: 0;
}

/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (min-width: 0) and (max-width: 980px){
	section#engine .photo ul{
		gap:40px 10px;
	}
	section#engine .photo li img{
		width:100%;
		max-width: 100%;
		max-height: auto;
	}
}

@media screen and (min-width: 0) and (max-width: 430px){
	section#engine .photo ul{
		justify-content: space-around;
	}
	
	section#engine .photo ul::after{
		content: '';
		width:50%;
		gap:10px 0;
	}
	section#engine .photo li{
		width:50%;
	}
}

/*------------------------------


	リバース・解析


------------------------------*/

section#reverse img,
section#analysis img{
	margin-top:30px;
	border-radius: 5px;
	width:min(100%,600px);
	height: auto;
}

section#analysis img{
	border:1px solid #dddd;
border-radius: 0;
	margin-top:0;
}

/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	section#analysis .photo{
		padding:10px;
	}
}

/*------------------------------


	コネクタ付きハーネス製作


------------------------------*/

section#connector .photo ul{
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap:20px;
	margin:30px auto 0 auto;
}

section#connector .photo li{
	flex:1;
	max-width:400px;
}

section#connector .photo li img{
	width: auto;
	max-width: 400px;
	height: auto;
	max-height: 400px;
}

/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	section#connector .photo ul{
		flex-direction: column;
	}
	
	section#connector .photo li{
		flex:none;
		max-width: 100%;
	}
	
	section#connector .photo li img{
		max-width: 100%;
		max-height: 300px;
	}
}

@media screen and (min-width: 0) and (max-width: 370px){
	section#connector h2{
		font-size:7.7vw;
	}
}
	
/*------------------------------


	各種電装品製作


------------------------------*/

section#transmission .photo ul{
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap:20px;
	margin:30px auto 0 auto;
}

section#transmission .photo li{
	flex:1;
	max-width:380px;
	}

/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	section#transmission .photo ul{
		flex-direction: column;
	}
	
	section#connector .photo li{
		flex:none;
		max-width: 100%;
	}
	
}