@charset "UTF-8";
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 14px;
	line-height: 1.6;
	color:#333;
}

h1{
	position: absolute;
	top:50vh;
	left:10%;
	font-size: 2.4em;
	text-align: left;
	color: #FF0004;
}

h2{
	font-size: 1.8em;
	text-align: center;
	color: #FF0004;
}

h3{
	text-align: center;
	color: #FF0004;
}

a{
	text-decoration: none;
	color: #555;
}

img{
	vertical-align: bottom;
	width: 100%;
	height: auto;
}

.heading{
	position: relative;
	display: inline-block;
	margin: 10px 0 15px;
	padding: 5px;
	letter-spacing: 2px;
}

.heading::before,
.heading::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #FF0004;
}

.heading::before{
	bottom: 5px;
}

.next{
	content:'';
	background-color: #FF0004;
	display: block;
	height: 30px;
	width: 1px;
	margin: 0 auto 8px;
}

.button{
	cursor: pointer;
	border: 2px solid #fff;
	border-radius: 4em;
	color: #fff;
	text-align: center;
	padding: 20px;
	display: block;
	width: 200px;
	margin: 10px auto;
	padding-left: 34px;
}

.button:hover{
	background-color: #fff;
	color: #FF0004;
}

.button_yellow{
	cursor: pointer;
	border: 2px solid #ffffff;
	border-radius: 4em;
	color: #ffffff;
	text-align: center;
	padding: 20px;
	display: block;
	width: 200px;
	margin: 10px auto;
	padding-left: 34px;
}

.button_yellow:hover{
	background-color: #ffffff;
	color: #FF0004;
}




.button_red{
	cursor: pointer;
	border: 2px solid #FF0004;
	border-radius: 4em;
	color: #fff;
	background-color: #FF0004;
	text-align: center;
	padding: 20px;
	display: block;
	width: 200px;
	margin: 10px auto;
	padding-left: 34px;
}

.button_red:hover{
	background-color: #fff;
	color: #FF0004;
}

/*
 * TOP1
 */
#gheader {
	z-index: 20;
	background-color: #fff;
	width: 100%;
	height: 120px;
  }
#gheader.fixed  {
	position: fixed;
	top: 0px;
}

#gnavi a:hover{
	border-bottom: 2px solid #FF0004;
}

#gnavi{
	text-align: right;
	height: 22px;
}

#gnavi a{
	padding: 10px;
	font-family: "Noto Sans Japanese";
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .05em;
	color: #FF0004;
}

#logo{
	width: 225px;
	height: 32px;
	text-align: left;
	padding-top: 20px;
	padding-left: 20px;
}


#logo img{
	width: 100%;
	height: auto;
}


#logo_mark_id{
	width: 400px;
	text-align: left;
	padding-top: 20px;
	padding-left: 20px;
}

.logo_mark{
	width: 65px;
	height: 51px;
	text-align: left;
}

.logo_text{
	font-size:24px;
}

#gnavi li{
	display: inline;
}

#top{
	background: url("../images/top_img.jpg") no-repeat;
	background-position-x: right; 
	background-size: contain;		
}

.top_img{
	display: none;
	height: calc(100vh - 226px) ;
}

.box{
  width: 100%;
  height: 100vh;
  text-align: center;
}

/*
 * TOP２ページ目
 */

.inner_section{
	display: flex;
  	justify-content: center;
  	align-items: center;	
	width: 100%;
	height: 40vh;
}

.section_img{
	position: relative;
	top:20%;
	right: -10%;
	width: 40%;
	height: auto;
}

.section_text{
	position: relative;
	top:  50%;
	left: -10%;
	background-color: #FF0004;
	width: 45%;
	height: 40vh;
	padding: 20px 70px;
	color: #FFFFFF;
}

.section_text h3{
	font-size: 1.6em;
	color: #FFFFFF;
	padding-top:20px;
	padding-left: 20px;
	padding-bottom: 20px;
}

.section_text p{
	font-size: 1.2em;
	text-align: left;
	padding: 20px 20px;
}

.section_text_rec{
	margin-top: 100px;
	position: relative;
	/*
	background-color: rgb(255,0,0,0.90);
	*/
	width: 50%;
	height: 40vh;
	padding: 20px 70px;

}

.section_text_rec h3{
	font-size: 1.6em;
	color: #F00;
	padding-top:20px;
	padding-left: 20px;
	padding-bottom: 20px;
}

.section_text_rec p{
	color: #F00;
	font-size: 1.2em;
	text-align: center;
	padding: 20px 20px;
}

/*
 * 会社情報
 */
/*
#company{
	background: url("../images/company.jpg") no-repeat;
	background-position-x: right; 
	background-size: contain;	
}
*/


.bgimg{
	background: url("../images/company_back.jpg") no-repeat;
	background-size: cover;
}

.bgimg_rec{
	background: url("../images/enploy_2.jpg") no-repeat;
	background-size: cover;
}

.bgimg_talent{
	background: url("../images/enploy_1.jpg") no-repeat;
	background-size: cover;
}

.inner_rgba{
	background-color: rgba(255,255,255, 0.6);
	height: 100%;
}

.inner_rgba_grey{
	background-color: rgba(202, 202, 202, 0.4);
	height: 100%;
}


.table_space{
	margin-top:10px;
	margin-bottom: 120px;
	padding: 0 40px 40px 40px;
}

#rec_list .table_space{
	padding-bottom: 0;
	margin-bottom: 10px;
}

.company_table{
	margin: 0 auto;
	margin-top: 20px;
	border-collapse: collapse;
}

.company_table th{
	width: 210px;
	padding: 25px;
}

.company_table td{
	width: 400px;
	padding: 25px 0;
}

.company_table th,td{
	border-bottom: 1px solid #d3dcdf;
	text-align: left;
}

.section_text_mission{
	margin: 80px auto;
/*
	background-color: rgba(255,0,0,0.90);
*/
	width: 65%;
	height: 50%;
	color: #f00;
}

.section_text_mission h3{
	font-size: 1.6em;
	padding-top: 60px;
	color: #f00;
}

.section_text_mission p{
	text-align: center;
	font-size: 1.2em;
	padding: 60px 20px;
	color: #f00;
	font-weight: bold;
}

/*
 * 採用情報
 */

 .section_text_rec{
	margin-top: 100px;
	position: relative;
	/*
	background-color: rgb(255,0,0,0.95);
	*/
	width: 50%;
	height: 40vh;
	padding: 20px 70px;

}

.section_text_rec h3{
	font-size: 1.6em;
	color: #f00;
	padding-top:20px;
	padding-left: 20px;
	padding-bottom: 20px;
}

.section_text_rec p{
	color: #f00;
	font-size: 1.2em;
	text-align: center;
	padding: 20px 20px;
	font-weight: bold;
}



#recuruit{
	background: url("../images/recruit.jpg") no-repeat;
	background-position-x: right; 
	background-size: contain;		
}

.rec_table{
	margin: 0 auto;
	border-collapse: collapse;
}

.rec_table th{
	width: 210px;
	padding: 18px;
}

.rec_table td{
	width: 400px;
	padding: 18px 0;
}

.rec_table th,td{
	border-bottom: 1px solid #d3dcdf;
	text-align: left;
}

/*
#rec_talent .inner_section{
	margin-top:39px;
}
*/

#rec_step{
	width: 100%;
	margin: 39px 0;
	overflow: hidden;
  	display: flex;
  	justify-content: center;
  	align-items: center;	
}

#rec_step img{
	width: 302px;
	height: 85px;
}

.circle {
  color: #fff;
  background-color:#f00;
  padding: 10px;
  margin: 0;
  width: 120px;
  height: 120px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
}

.circle .text{
  margin: 10px 0;
}

.icon{
	height: 100px;
	float: left;
  	display: flex;
  	justify-content: center;
  	align-items: center;	
}

.right{
	margin-left: 20px;
	float: left;
}

.left{
	margin-right: 20px;
	float: left;
}

.center{
	margin: 0px 20px;
	float: left;
}

#rec_entry{
	margin: 60px 0;
	text-align: center;
}

#rec_entry p{
	margin: 30px 0;
}

/*
 * スクロールのアイコン
 */

a.scroll-down div { 
	display: none; 
	text-align: center; 
	font-size: 11px; 
	color:#000; 
	text-transform: uppercase; 
	letter-spacing: 1px; 
}
a.scroll-down span { 
	position: absolute; 
	bottom: 0; 
	left: 50%; 
	width: 20px; 
	height: 33px; 
	margin-left: -10px; 
	border: 2px solid #000; 
	border-radius: 33px; 
	box-sizing: border-box; 
}
a.scroll-down span::before { 
	position: absolute; 
	top: 6px; 
	left: 50%; 
	content: ''; 
	width: 2px; 
	height: 4px; 
	margin-left: -1px; 
	background-color: #000; 
	border-radius: 100%; 
    -webkit-animation: sdb 1.4s infinite; 
	animation: sdb 1.4s infinite; 
	box-sizing: border-box; 
}
@-webkit-keyframes sdb { 
	0% { 
		-webkit-transform: translate(0, 0);
		opacity: 0; 
	} 
	40% { 
		opacity: 1;
	} 
	80% {
		-webkit-transform: translate(0, 15px);
		opacity: 0;
	} 
	100% { 
		opacity: 0; 
	} 
}
@keyframes sdb { 
	0% { 
		transform: translate(0, 0);
		opacity: 0;
	} 
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 15px);
		opacity: 0;
	} 
	100% {
		opacity: 0; 
	} 
}
@media (min-width: 960px){
	a.scroll-down div {
		display: block;
	}
	a.scroll-down span {
		width: 22px; 
		height: 36px; 
		margin-left: -11px; 
		border-radius: 36px; 
	}
	a.scroll-down span::before {
		top:8px;
	}
}

.box .scroll {
  position: relative;
  bottom: 0;
  left: -25px;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #FF0005;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.box .scroll:hover {
  opacity: .5;
}

.scroll.scroll_img{
  position: relative;
  bottom: -200px;
  left: -25px;	
}

.scroll  {
  padding-top: 60px;
}
.scroll span {
  position: absolute;
  width: 46px;
  height: 46px;
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;	
}
	
.scroll span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 3px solid #FF0000;
  border-bottom: 3px solid #FF0000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}



/*
 * フェードイン
 */
.fade_in_img{
  transition: opacity 1.4s;
  -moz-transition: opacity 1.4s;
  -webkit-transition: opacity 1.4s;
  -o-transition: opacity 1.4s;
}

.fade_in_text{
  transition-delay: 10.0s;
  transition: opacity 2.4s;
  -moz-transition: opacity 2.4s;
  -webkit-transition: opacity 2.4s;
  -o-transition: opacity 2.4s;
}

/*
 * 
 */

#contents_wrap{
	height: calc(100vh - 90px);
}

#gfooter{
	position: relative;
	text-align: left;
	width: 100%;
	height: 100px;
	color: #fff;
	background-color: #FF0004;
}

#gfooter small{
	position: absolute;
	left:10px;
	padding: 5px 0;
}

#gfooter a{
	position: absolute;
	right: 10px;
	padding: 5px 0;
	color: #fff;
}

/*
 * メディアクエリ
 */

 @media screen and (min-width:1024px){
	.section_text_rec{
		width: 75%;
	}

	.section_text_mission{
		width: 75%;
	}
 }


 @media screen and (max-width:767px){
	.section_text_rec{
		width: 90%;
	}

	.section_text_mission{
		width: 90%;
	}
 }

 @media screen and (max-width:980px){
	.section_text_rec{
		width: 90%;
	}

	.section_text_mission{
		width: 90%;
	}
 }