@charset "utf-8";
:root {--main-color: #3A4FAD;}
:root {--sub-color: #3E6742;}
:root {--accent-color: #FAFF00;}
:root {--text-color: #FFFFFF;}

:root {--text-font: "Roboto", sans-serif;}

section{
	width: 100%;
    padding: 60px 0;
	position: relative;
	overflow: hidden;
}
.inner{
	width: 90%;
	max-width: 1050px;
	margin: 0 auto;
    position: relative;
}
h1,h2,h3,h4,h5,h6{
	line-height: 2;
	letter-spacing: 0.1em;
}
p{
	font-size: 16px;
	line-height: 2;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
	section{
	    padding: 40px 0;
	}
	.inner{
		max-width: 520px;
	}
	p{
		font-size: 13px;
	}
}
/*==================================================================================================*/
header .logo{
	display: block;
	width: 113px;
	position: fixed;
	top: 24px;
	left: 30px;
	z-index: 100;
}
h2.title{
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--main-color);
}
h2.title span{
	display: block;
	font-size: 14px;
}
h3.title{
	font-size: 30px;
	font-weight: 400;
	line-height: 1.8;
}
@media screen and (max-width: 768px) {
	
}
/*==================================================================================================*/
/*top*/
.top{
	background: center / cover no-repeat url("../img/bg.jpg");
}
.top::before{
	display: block;
	content: "";
	width: 100%;
	height: 100px;
	background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,1.00));
	position: absolute;
    bottom: 0;
    left: 50%;
	bottom: -1px;
    transform: translateX(-50%);
	z-index: 1;
}
.top .fv{
	justify-content: center;
	height: 100vh;
	max-height: 768px;
}
.top .fv h1{
	width: 331px;
	padding: 0 0 180px;
	position: relative;
}
.top .fv h1::after{
	display: block;
	content: "";
	width: 1px;
	background: #FFF;
	position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
	animation-name:line;
	animation-duration:2s;
	animation-timing-function:cubic-bezier;
	animation-iteration-count:infinite;
}
@keyframes line{
  0%{
    height:0;
	  opacity: 0;
  }
	20%{
	  opacity: 1;
  }
	80%{
	  opacity: 1;
  }
  100%{
    height:157px;
	  opacity: 0;
  }
}
/**/
.top .inner{
	max-width: 575px;
	color: #FFF;
	margin: 0 auto 200px;
	z-index: 1;
}
.top .inner h3{
	text-align: center;
	margin: 0 0 20px;
}
.top .inner p{
	font-size: 13px;
}
@media screen and (max-width: 768px) {
	.top{
		background: center / cover no-repeat url("../img/bg-sp.jpg");
	}
	.top .fv h1{
		width: 90%;
	}
	.top .fv h1::after{
	    top: 180px;
	}
	.top .inner{
		max-width: 520px;
		margin: 0 auto;
	}
	.top .inner h3{
		font-size: 18px;
	}
}
/*==================================================================================================*/
/*service-サービス*/
.service{
	top: -1px;
}
.service .inner div{
	width: fit-content;
}
.service .inner div h2.title{
	width: fit-content;
	margin: 0 0 40px;
}
.service .inner div h3.title{
	width: fit-content;
	color: #000000;
}
.service .inner ul{
	width: calc( 100% - 280px);
	max-width: 700px;
}
.service .inner ul li{
	width: 32%;
	max-width: 231px;
}
.service .inner ul li img{
	border-radius: 10px;
	box-shadow: 0 0 2px #000;
	overflow: hidden;
	margin: 0 0 10px;
}
.service .inner ul li p{
	font-size: 13px;
	line-height: 2;
}
@media screen and (max-width: 768px) {
	.service .inner div{
		width: 100%;
		margin: 0 0 40px;
	}
	.service .inner ul{
		width: 100%;
	}
	.service .inner ul li{
		width: 100%;
		max-width: 100%;
		margin: 0 0 40px;
	}
	.service .inner ul li img{
		height: 160px;
	}
}
/*==================================================================================================*/
/*oem-受託製造*/
.oem{
	color: #FFF;
	background: var(--main-color);
}
.oem h2.title{
	color: #FFF;
	margin: 0 0 20px;
}
.oem h3.title{
	width: fit-content;
	margin: 0 0 150px;
}
.oem h3.title + p{
	width: calc( 100% - 340px);
	max-width: 717px;
	font-size: 13px;
	letter-spacing: 0.15em;
}
.oem .inner ul li{
	width: 32%;
	max-width: 327px;
}
.oem .inner ul li img{
	border-radius: 10px;
	box-shadow: 0 0 2px #000;
	overflow: hidden;
	margin: 0 0 10px;
}
.oem .inner ul li p{
	font-size: 13px;
	line-height: 2;
	letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
	.oem h3.title + p{
		width: 100%;
		margin: 0 0 40px;
	}
	.oem .inner ul li{
		width: 100%;
		max-width: 100%;
		margin: 0 0 40px;
	}
	.oem .inner ul li img{
		height: 160px;
	}
}
/*==================================================================================================*/
/*gallery-ギャラリー*/
.slider{
	margin: 60px 0 20px;
}
.slider li{
	padding: 0 10px;
}
.slider li img{
	border-radius: 10px;
	box-shadow: 0 0 2px #000;
	overflow: hidden;
}
@media screen and (max-width: 768px) {
	.slider{
		margin: 0 0 20px;
	}
	.slider li{
		padding: 0 4px;
	}
}
/*==================================================================================================*/
/*footer*/
footer{
	color: #FFF;
	background: #30307D;
	padding: 40px 0 0;
}
footer .inner div{ 
	width: fit-content;
}
footer .inner div:nth-child(1) img{ 
	width: 288px;
	margin: 0 0 20px;
}
footer .inner div:nth-child(1) a{ 
	display: block;
	width: 322px;
}
/**/
footer .inner div:nth-child(2){
	width: 400px;
}
footer .inner div:nth-child(2) ul{
	justify-content: flex-start;
	margin: 0 0 15px;
}
footer .inner div:nth-child(2) ul li{
	width: 24px;
	margin: 0 15px 0 0;
}
footer .inner div:nth-child(2) ul li a{
	display: block;
}
footer .inner div:nth-child(2) dl dt{
	width: 60px;
	font-size: 11px;
	margin: 0 0 3px;
}
footer .inner div:nth-child(2) dl dd{
	width: 340px;
	font-size: 11px;
	margin: 0 0 3px;
}
footer div:nth-child(2) p{
	font-size: 11px;
	margin: 5px 0 0;
}
footer .inner div + a{ 
	display: none;
}
small{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 52px;
	font-size: 10px;
	color: #FFF;
	background: #000000;
	margin: 30px 0 0;
}
@media screen and (max-width: 768px) {
	footer .inner div:nth-child(1) img{ 
		width: 100%;
	}
	footer .inner div:nth-child(1) a{
		display: none;
	}
	/**/
	footer .inner div:nth-child(2){
		width: 100%;
	}
	footer .inner div:nth-child(2) dl dt{
		width: 45px;
		font-size: 10px;
	}
	footer .inner div:nth-child(2) dl dd{
		width: calc( 100% - 45px );
		font-size: 10px;
	}
	footer .inner div + a{ 
		display: block;
		margin: 40px 0 0 ;
	}
}