@charset "UTF-8";
/*====================================
	----------------------------------
		Color
	----------------------------------
	
	Main     : #C02727
  	Accent   : #F3A22D  #142550
 
	----------------------------------
  		font
	----------------------------------
 
	font-family: "tbudrgothic-std", "sans-serif";
	font-weight: 300;
	font-style: normal;

 
 
====================================*/




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

  0.Main

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

#recruit{
	padding-bottom: 100px;
}

#hero_main{
	position: relative;
	height: 550px;
	padding: 100px 0 0 0;
	background: url("../img/index/bg.png") repeat;
	background-attachment: fixed;
	background-size: contain;
	-webkit-animation: bgroop 200s linear infinite;
    animation: bgroop 200s linear infinite;		
}

.main_wrap{
	background: url("../img/recruit/recruit.png") no-repeat;
	height: 100%;
	background-position: center top 15%;
	background-size: contain;
	
}

@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1956px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1956px 0;
    }
}




@media screen and (max-width: 600px){
	.main_wrap{
		background: url("../img/recruit/recruit_sp.png") no-repeat;
		background-position: center;
		background-size: contain;
		width: 85%;
	}
}


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

  about

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

#about{ padding: 100px 0;}

.about_img img{ margin: 0 auto;}

.about_box{ width: 70%; margin: 0 auto;}
.about_box h2{ text-align: center; line-height: 1.2em;}
.about_txt{}

@media screen and (max-width: 1000px){
	.about_box h2{ font-size: 2em;}
}


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

  point

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

#point{ padding: 100px 0; background-color: #c02727; margin-bottom: 100px;}

.point_wrap{ display: flex; flex-wrap: wrap; justify-content: center; position: relative;}

.point_box{ width: 40%; border: #000 solid 3px; border-radius: 20px; background-color: #FFF; padding: 30px; margin-bottom: 30px; margin-right: 30px;}

.point_box_01::before{
	content: "";
	background: url("../img/recruit/resuruit_02.png") no-repeat;
	background-position: center;
	background-size: contain;
	width: 80%;
	height: 170px;
	margin: 0 auto;
	display: block;
}

.point_box_02::before{
	content: "";
	background: url("../img/recruit/resuruit_03.png") no-repeat;
	background-position: center;
	background-size: contain;
	width: 80%;
	height: 170px;
	margin: 0 auto;	
	display: block;
}

.point_box_03::before{
	content: "";
	background: url("../img/recruit/resuruit_04.png") no-repeat;
	background-position: center;
	background-size: contain;
	width: 80%;
	height: 170px;
	margin: 0 auto;
	display: block;
}

.point_box_04::before{
	content: "";
	background: url("../img/recruit/resuruit_05.png") no-repeat;
	background-position: center;
	background-size: contain;
	width: 80%;
	height: 170px;
	margin: 0 auto;
	display: block;
}

.point_box h2{ font-weight: bold; text-align: center;}

@media screen and (max-width: 950px){
	.point_box{ width: 45%;}
	.point_box h2{ font-size: 1.5em;}
}
@media screen and (max-width: 550px){
	.point_box{ width: 80%; margin-right: 0;}
}

@media screen and (max-width: 400px){
	.point_box{ padding: 20px;}
}

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

  info

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

#info{ padding-bottom: 100px;}

#info .tit1{ text-align: center;}

.info_wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;	
}

.info_inner{ margin-right: 2%; width: 30%;}

.info_box{
	border: #c02727 solid 3px;
	text-align: center;
	padding: 20px;
	background-color: #FFF;
}

.info_box h2{ font-weight: bold;}
.sub_job{ background-color: #c02727; color: #fff; font-weight: bold; font-size: .7em; display: block; margin: 0 auto 10px auto;}

.info_box img{ margin: 0 auto;}

.box01 img{ width: 46%;}

.box02 img{ width: 30%;}

.info_subttl{ color: #c02727; font-weight: bold; margin-bottom: 0; font-size: 1.2em;}
.info_txt{ margin-top: 0;}

.info_more{ border: #c02727 solid 3px; background-color: #c02727; color: #FFF; text-align: center; padding: 10px 15px; font-weight: bold; transition: .2s;}

.info_box:hover .info_more{
	background-color: #fff; color: #c02727;
}

@media screen and (max-width: 900px){
	.info_box h2{ letter-spacing: 1px; font-size: 1.3em;}
	.info_subttl, .info_txt{ letter-spacing: 1px; font-size: 1em;}
	.info_txt{ line-height: 1.5em;}
}

@media screen and (max-width: 650px){
	.info_inner{ width: 42%; margin-bottom: 2%;}
}

@media screen and (max-width: 550px){
	.info_inner{ width: 80%; margin-bottom: 5%;}	
}

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

  contents

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

#job1, #job2{ padding-top: 130px;}


.contents{ padding: 40px 40px 50px 40px; background-color: #fff; border: #c02727 solid 3px; }
.job_info{ display: flex; flex-wrap: wrap; align-items: center;}

.job_info_img{ width: 30%;}
.job_info_img img{ margin: 0 auto;}
#job2 .job_info_img img{ width: 70%;}

.job_info_txt{ width: 70%; padding-left: 50px; font-weight: bold;}
.job_info_txt h3{ margin-bottom: -10px; font-weight: 900;}
.mgb50{ margin-bottom: 50px;}
.txt_note{ letter-spacing: 2px; margin: 0 auto 15px auto;}
.mini_ttl{ color: #c02727; display: block; font-size: 1.5em; font-weight: 900; margin-bottom: 15px;}

.flex_box{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px;}
.flex_50{ width: 49%; padding: 30px; border: #000 solid 3px; border-radius: 20px;}
.flex_txt{ margin-bottom: 30px; border-bottom: #000 3px dotted; padding-bottom: 20px;}
.point{ position: relative; margin: 10px 0; font-weight: bold; line-height: 1.7em;}
.point span{ background: linear-gradient(transparent 60%, #eee 0%); display: initial; padding: 7px 0px 4px 0px;}
/*.point::before{ content: ""; position: absolute; left: 0; top: 5px; background: url("../img/recruit/check.png") no-repeat; width: 20px; height: 20px; background-size: contain;}*/
.point::before{ content: "POINT"; background-color: #c02727; color: #FFF; padding: 5px; font-size: .8em; letter-spacing: 1px; font-weight: 900; margin-right: 10px;}

.panel { width: 100%; margin: 30px auto 0;}
.toggle_title {
	padding: 20px;
	border: 2px solid #c02727;
	background-color: #c02727;
	color: #FFF;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
}

.toggle_title:hover {
	transition: 0.5s;
	background-color: #fff;
	color: #c02727;
}

.toggle_box {
  margin: 0;
  padding: 20px;
  display: none;
}

table{ border-spacing: 5px; font-size: .9em; letter-spacing: 2px; width: 95%; margin: 0 auto;}

tr{ }

th{ vertical-align: top; width: 35%; background-color: #EFEFEF; padding: 20px 30px;}

td{ width: 65%; padding: 20px 30px; position: relative;}

.panel_link{
	border: #c02727 solid 2px;
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    color: #c02727;
}

@media screen and (max-width: 850px){
	.job_info_img{ width: 45%; margin: 0 auto;}
	.job_info_txt{ width: 95%; margin: 0 auto; padding: 0;}
	th, td{ display: block; width: 100%;}
}

@media screen and (max-width: 750px){
	.job_info_txt h2{ font-size: 2.5em;}
	table{ width: 100%;}
	th, td{ padding: 10px 20px;}
}
@media screen and (max-width: 650px){
	.flex_50{ width: 100%; margin-bottom: 5%;}
}
@media screen and (max-width: 550px){
	.contents{ padding: 25px;}
	.toggle_box{ padding: 20px 0;}
}