@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/*====================
common
====================*/
.pc_none {
  display: none; }
  @media only screen and (max-width: 768px) {
    .pc_none {
      display: block; } }

.sp_none {
  display: block; }
  @media only screen and (max-width: 768px) {
    .sp_none {
      display: none; } }

/*====================
BASE
====================*/
html {
	font-size: 62.5%; /* 10px */
}

*{
letter-spacing:0.1em;
font-feature-settings : "palt" 1;
color:#000;
font-family:"Noto Serif JP", serif;
font-style: normal;
font-weight: 400;
}

h1,h2,h3,h4,h5,p,a{}

a:hover{
	opacity:0.6;}

a.blank:after {
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f08e';
	padding-left: 3px;
}

img{
	max-width: 100%;
	height: auto;
}


:root {
  --c-black: #000000;
  --c-white: #ffffff;
	
  --c-gray: #1a1a1a;

  --z-fixed: 1030;
  --z-modal: 1050;
  --f-default: "Noto Sans JP", sans-serif;
  --f-serif: "Noto Serif JP", serif;
}

/*====================
loader
====================*/

.loader {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader figure{
	animation:5s linear infinite rotation;
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

/*====================
header
====================*/

.container{
	background: var(--c-black);
}



.spMenu{
	display: block;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.9);
	width: 100%;
	height: 100%;
	padding: 0;
	z-index: 99;
    transition: all .4s;
}

.spMenu .inner{
display: flex;
align-items: center;
justify-content: center;	
	width: 100%;
	height: 100%;
}
.spMenu ul{
	width: 100%;
}
.spMenu ul li{
	text-align: center;
	padding: 35px 10px;
}
.spMenu ul li a{
	color: var(--c-white);
	font-size: 2.6em;
	text-align: center;
}
.spMenu ul li a.none{
	opacity: 0.3;
}
.spMenu ul li a.none:hover{
	text-decoration:none;
}

@media only screen and (max-width: 768px) {
	.spMenu ul li{
		padding: 25px 10px;
	}
	.spMenu ul li a{font-size: 2.0em;}
}



.header .spMenuBt{

	position:absolute;
	right:0;
	top:0;
	z-index: 100;
    transition: all .4s;
    box-sizing: border-box;
    width: 64px;
    height: 60px;
    padding: 22px 0 0 0;
	cursor: pointer;
  }
  .header .spMenuBt span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 0;
  }
  .header .spMenuBt span:nth-of-type(1) {
    top: 22;
  }
  .header .spMenuBt span:nth-of-type(2) {
    top: 29px;
  }
  .header .spMenuBt span:nth-of-type(3) {
    top: 36px;
  }
  .header .spMenuBt.active span:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
  }
  .header .spMenuBt.active span:nth-of-type(2) {
    opacity: 0;
  }
  .header .spMenuBt.active span:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
  }


@media only screen and (max-width: 1160px) {
	.header .spMenuBt{
	display:block;
	position:fixed;
	}
	.close{
		display: block;
		cursor: pointer;
		padding: 3%;
		text-align: right;
		font-size: 3em;
	}
	
}

/*====================
header
====================*/


/*====================
main
====================*/

.top{
	position: relative;
	height: 100vh;
}



.topslider{
	position:relative;
	z-index: 1;
	width: 100%;
	height: 100vh;
}
.topslider li{
	width: 100%;
	height: 100vh;
	background-position: center;
	background-size: cover;
}

.slider-item01 {
    background-image: url("../img/top_main_01.jpg");
}
.slider-item02 {
    background-image: url("../img/top_main_02.jpg");
}
.slider-item03 {
    background-image: url("../img/top_main_03_2.jpg");
}
.slider-item04 {
    background-image: url("../img/top_main_04.jpg");
}
.slider-item05 {
    background-image: url("../img/top_main_05.jpg");
}
.slider-item06 {
    background-image: url("../img/top_main_06.jpg");
}
.slider-item07 {
    background-image: url("../img/top_main_07_2.jpg");
}
.slider-item08 {
    background-image: url("../img/top_main_08.jpg");
}


.topMain {
	text-align:center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.2);
	flex-direction: column;
}

.topMain h1{
	color: var(--c-white);
	padding: 0 5%;
	font-size: 6.3em;
	line-height: 1em;
	font-weight: 300;
	letter-spacing: 0.5em;
}

.topMain h1 img{
	width: 420px;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1)); 
}

.topMain p{
	padding: 30px 0 0 0;
}
.topMain p img{
	width: 420px;
	filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 1)); 
}

.topslider{opacity : 0; transition : all 1.5s 1s; }
.topslider.scrollin{opacity : 1;}

.topMain h1{opacity : 0; transition : all 1.5s 2s ease; }
.topMain p{opacity : 0; transform: translateY(0px); transition : all 1.5s 3s ease; }
.topMain h1.scrollin{opacity : 1; }
.topMain p.scrollin{opacity : 1; transform: translateY(-10px);}



@media only screen and (max-width: 768px) {
	.top{
	}
	.topMain h1{
		padding: 0 5%;
	font-size: 3.3em;
	}
	.topMain p{
		font-size: 1.6em;
		padding:20px 5%;
	}
	
}

.topRinen{
	text-align:center;
	padding: 95px 5%;
	background-image: url("../img/top_rinen.jpg");
	background-position: center;
	background-size: cover;
}
.topRinen h2,
.topJirei h2{
	color: var(--c-white);
	font-size: 3.0em;
	line-height: 1em;
	font-weight: 300;
	opacity: 0.6;
	padding: 0 0 70px 0;
}
.topRinen p.copy{
	color: var(--c-white);
	font-size: 3.0em;
	padding: 0 0 75px 0;
}
.topRinen p.txt{
	color: var(--c-white);
	font-size: 1.8em;
	line-height: 1.8em;
	padding: 0 0 50px 0;
}
.topRinen .link a{
	color: var(--c-white);
	font-size: 1.4em;
	line-height: 1em;
	display: inline-block;
	border: solid 1px #fff;
	padding: 10px;
}


@media only screen and (max-width: 768px) {
	.topRinen{
		padding: 65px 5%;
	}
	.topRinen h2,
	.topJirei h2{
		font-size: 2.0em;
		padding: 0 0 40px 0;
	}
	.topRinen p.copy{
		font-size: 2.0em;
		padding: 0 0 45px 0;
	}
	.topRinen p.txt{
		font-size: 1.5em;
		text-align: left;
		padding: 0 0 30px 0;
	}
}


.topJirei{
	text-align:center;
	background: #1A1A1A;
	padding: 95px 0;
}


.slideBox{
	width: 100%;
	position: relative;
}

.prev-arrow,
.next-arrow{
position: absolute;
	top: 0px;
	width: 50px;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 98;
	color: var(--c-white);
	font-size: 3.0em;
	font-weight: 900;
	cursor: pointer;
}

.prev-arrow{
	left: 0;
	justify-content: flex-end;
}
.next-arrow{
	right: 0;
}


.topJirei ul{
	width: 100%;
}
.topJirei ul li{
	text-align: center;
	margin: 0 20px;
}
.topJirei ul li figure{
	
}
.topJirei ul li figure img{
	width: 100%;
}

.topJirei ul li p{
	text-align: center;
	color: #fff;
	padding: 20px 0 0 0;
	font-size: 1.6em;
}

@media only screen and (max-width: 768px) {
	.topJirei{
		padding: 65px 0;
	}
	.prev-arrow,
	.next-arrow{
		font-size: 2.2em;
	}
	.topJirei ul li p{
		font-size: 1.3em;
	}
}

.topJireiJisseki{
	padding: 60px 0 0 0;
}
.topJireiJisseki h3{
	padding: 0 0 30px 0;
	color: #fff;
	font-size: 1.6em;
}

.topJirei table{
	max-width: 600px;
	margin: 0 auto;
}
.topJirei table td{
	color: #fff;
	font-size: 1.4em;
	text-align: left;
}
.topJirei table tr td:first-child{
	text-align: right;
	padding: 0 20px;
	white-space: nowrap;
}
.topJirei table tr td:last-child{
	white-space: nowrap;
}

@media only screen and (max-width: 768px) {
	.topJireiJisseki{
		padding: 30px 0 0 0;
	}
	.topJireiJisseki h3{
		padding: 0 0 15px 0;
		font-size: 1.4em;
	}
	.topJirei table td{
		font-size: 1.2em;
	}
	.topJirei table tr td:first-child{
		padding: 0 10px;
	}
	
}


.topCompany{
	text-align:center;
	padding: 95px 5%;
	background-image: url("../img/top_company.jpg");
	background-position: center;
	background-size: cover;
}
.topCompany h2{
	color: var(--c-black);
	font-size: 3.0em;
	line-height: 1em;
	font-weight: 300;
	opacity: 0.6;
	padding: 0 0 70px 0;
}

.topCompany .inner{
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 0 0 40px 0;

}
.topCompany .inner ul,
.topCompany .inner .R{
	width: 48%;
}


.topCompany.subCompany .inner{
	flex-direction: column-reverse;
}

.topCompany.subCompany .inner ul,
.topCompany.subCompany .inner .R{
	width: 100%;
	padding: 50px 0;
}


.topCompany .inner ul li{
	padding: 10px 0;
	border-bottom: solid 1px #8E8E8E;
	text-align: left;
}
.topCompany .inner ul li h3{font-size: 1.3em;}
.topCompany .inner ul li p{font-size: 1.5em;}

.topCompany.subCompany .inner ul li{
	display: flex;
}
.topCompany.subCompany .inner ul li h3{
	width: 20%;
}


.topCompany .prof{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	padding: 0 0 0 0;
}
.topCompany .prof .txt h3{font-size: 1.5em;}
.topCompany .prof .txt p{font-size: 1.5em;}

.topCompany .message{
	text-align: left;
	border: solid 1px #8E8E8E;
	padding: 25px;
	background: rgba(255,255,255,0.6);
}
.topCompany .message p{
	font-size: 1.4em;
	line-height: 1.8em;
}
.topCompany.subCompany .message p{
	font-size: 1.6em;
	line-height: 1.8em;
}
.topCompany .message p.name{
	text-align: right;
	padding-top: 1em;
}

.topCompany.subCompany .message{
	text-align: left;
	border: none;
	background: none;
	padding: 0 0 25px 0;
}
.topCompany.subCompany .inner .R{
	background: rgba(255,255,255,0.6);
	padding: 50px;
}



.topCompany .link a{
	color: var(--c-black);
	font-size: 1.4em;
	line-height: 1em;
	display: inline-block;
	border: solid 1px #000;
	padding: 10px;
}


@media only screen and (max-width: 768px) {
	.topCompany{
		padding: 65px 10%;
	}
	.topCompany h2{
		font-size: 2.0em;
		padding: 0 0 40px 0;
	}
	
	.topCompany .inner{
		flex-direction: column;
	}
	.subCompany .inner{
		flex-direction: column-reverse;
	}
	
	.topCompany .inner ul,
.topCompany .inner .R{
	width: 100%;
}
	
.topCompany.subCompany .inner ul li{
	flex-direction: column;
}
	
.topCompany .inner ul li h3{font-size: 1.2em;
	width: 100%;}
.topCompany .inner ul li p{font-size: 1.3em;}
	.topCompany .prof{
		padding: 20px 0 ;
	}
	.topCompany .message p{
	font-size: 1.3em;
	}
	
	.topCompany.subCompany .message p{
	font-size: 1.3em;
}
	
	.topCompany.subCompany .inner .R{
		padding: 30px;
	}
	
	.topCompany .prof .txt h3{
		text-align: right;
		font-size: 1.3em;
	white-space: nowrap;
	padding-left: 10px;}
	
}




.topRecruit{
	text-align:center;
	padding: 95px 5%;
	background-image: url("../img/top_recruit.jpg");
	background-position: center;
	background-size: cover;
}
.topRecruit h2{
	color: var(--c-white);
	font-size: 3.0em;
	line-height: 1em;
	font-weight: 300;
	opacity: 0.6;
	padding: 0 0 70px 0;
}

.topRecruit .inner{
	max-width: 700px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 0 0 40px 0;

}
.topRecruit .inner div{
	flex: 1;
	text-align:left;
	padding-left: 35px;
}
.topRecruit .inner h3{
	color: var(--c-white);
	font-size: 2.7em;
	line-height: 2.0em;
	padding-bottom: 20px;
}
.topRecruit .inner p{
	color: var(--c-white);
	font-size: 1.4em;
}


.topRecruit .link a{
	color: var(--c-white);
	font-size: 1.8em;
	line-height: 1em;
	display: inline-block;
	border: solid 1px #fff;
	padding: 10px;
}

@media only screen and (max-width: 768px) {
	.topRecruit{
		padding: 65px 5%;
	}
	.topRecruit h2{
		font-size: 2.0em;
		padding: 0 0 40px 0;
	}
	.topRecruit .inner{
		flex-direction: column;
	}
	.topRecruit .inner div{
		padding: 15px 5% 0 5%;
	}
	.topRecruit .inner h3{font-size: 2.2em;
	padding-bottom: 10px;}
	.topRecruit .inner p{font-size: 1.3em;}
}




.footerAddress{
	padding: 45px 5%;
}

.footerAddress p{
	text-align:center;
	color: var(--c-white);
}
.footerAddress .name{font-size: 2.6em; line-height: 1.5em;}
.footerAddress .address{font-size: 1.5em; line-height: 1.1em;}
.footerAddress .tel a{color: var(--c-white); font-size: 2.9em; line-height: 1.1em;}

.footerCopyright{
	text-align:center;
	border-top: solid 1px #333;
	font-size: 1.2em;
	color: var(--c-white);
	padding: 15px 5%;
}

/**/



.sub{}

.serviceCont,
.recruitCont,
.companyCont,
.contactCont{
	background-size: cover;
	background-position: center;
}
.serviceCont{background-image: url("../img/service_main.jpg");}
.recruitCont{background-image: url("../img/recruit_main.jpg");}
.companyCont{background-image: url("../img/company_main.jpg");}
.contactCont{background-image: url("../img/contact_main.jpg");}

.subMain{}



.subMain {
	text-align:center;
	width: 100%;
	background: rgba(0,0,0,0.1);
}

.subMain h1{
	color: var(--c-white);
	padding: 15px 5%;
	font-size: 3.3em;
	line-height: 1em;
	font-weight: 300;
}
.subMain h1 a{
	color: var(--c-white);
	letter-spacing: 0.5em;
}

.subMain h2{
	color: var(--c-black);
	font-size: 3.0em;
	line-height: 1em;
	font-weight: 300;
	opacity: 0.6;
	padding: 50px 0;
}

.subMain h3{
	color: var(--c-black);
	font-size: 3.0em;
	line-height: 1.6em;
	font-weight: 300;
	padding:0 5% 40px 5%;
}

.subMain p{
	color: var(--c-black);
	font-size: 1.6em;
	line-height: 1.8em;
	padding:0px 10% 40px 10%;
	text-align: left;
}

.subMainBox{
	background: rgba(255,255,255,0.9);
	margin: 300px auto 0 auto;
	max-width: 800px;
}


@media only screen and (max-width: 768px) {
	.subMain h1{
	padding: 20px 5%;
	font-size: 2.6em;
	}
	.subMain h2{
		font-size: 2.2em;
		padding: 50px 0;
	}
	.subMain h3{
		font-size: 2.2em;
		padding:0 5% 30px 5%;
	}
	.subMain p{
		font-size: 1.4em;
		padding:0 5% 30px 5%;
	}
}


.saiyou{
	padding: 80px 5%;
	background: var(--c-white);
}
.saiyou.ggg{
	background: #eee;
}
.saiyou .inner{
	max-width: 600px;
	margin: 0 auto;
}

.saiyou h3{
	color: var(--c-black);
	font-size: 1.6em;
	line-height: 1em;
	font-weight: 300;
	padding:15px;
	text-align: center;
	margin: 0 0 15px 0;
}

.saiyou .inner ul{
	margin: 0 0 50px 0;
}
.saiyou .inner li{
	border-bottom: solid 1px #ccc;
	padding: 15px 0;
	display: flex;
}
.saiyou .inner li:last-child{
	border-bottom: none;
}

.saiyou .inner h4{
	font-size: 1.3em;
	color: var(--c-black);
	width: 8em;
}

.saiyou .inner p{
	font-size: 1.4em;
	color: var(--c-black);
	flex: 1;
}

.saiyou .inner p.pro{
	font-size: 1.6em;
	text-align: center;
	padding: 10px 0 15px 0;
	background: #eee;
}
.saiyou .inner p.note{
	text-align: center;
	padding: 30px 0 0 0;
}

.saiyou .inner figure{
	text-align: center;
}


.subMain .contact{
	padding: 0 5% 65px 5%;
}
.subMain .contact h2{
	color: var(--c-white);
	font-size: 3.0em;
	line-height: 1em;
	font-weight: 300;
	padding:80px 5%;
}
.subMain .contact h3{
	color: var(--c-white);
	font-size: 3.0em;
	line-height: 1em;
	font-weight: 300;
	padding:0 5% 10px 5%;
}

.subMain .contact p{
	color: var(--c-white);
	font-size: 1.6em;
	line-height: 1em;
	padding:0 5% 60px 5%;
	text-align: left;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.subMain .contact p a{
	color: var(--c-white);
	font-size: 2.0em;
}

.subMain .contact h4{
	color: var(--c-white);
	font-size: 1.6em;
	line-height: 1em;
	font-weight: 300;
	padding:0 5% 20px 5%;
}

.subMain .contact form{
}

.subMain .contact form dl,
.subMain .contact form table{
	max-width: 600px;
	margin: 0 auto;
}
.subMain .contact form dt,
.subMain .contact form th,
.subMain .contact form td{
	text-align: left;
	font-size: 1.3em;
	color: var(--c-white);
	padding: 0 0 5px 0;
}
.subMain .contact form dd{
	text-align: left;
	padding: 0 0 30px 0;
}
.subMain .contact form dd input,
.subMain .contact form dd textarea{
	width: 100%;
}

.subMain .contact .mfp_buttons input{
	background: #000;
	border: none;
	width: 300px;
	padding: 10px 15px;
	color: var(--c-white);
	font-size: 1.6em;
	border-radius: 3px;
	cursor: pointer;
}

.subMain .contact p.thanks{
	line-height: 1.6em;
  }