@charset "utf-8";
  

/*---------------------------------------
  タイトル部分
---------------------------------------*/
.title_img{
	background:url(../img/main_img_7.jpg) center;
	background-size:cover;
	padding:7rem 5%;
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
.title_img h2{
	color:#fff;
	text-align:left;
	padding:0;
	margin:0;
}
.title_img h2:before{
	content:none;
}

@media screen and (max-width: 600px) {
.title_img{
	padding:5rem 5%;
}
}


.red{
	color:red;
}

/*---------------------------------------
  募集概要
---------------------------------------*/
.recruiting{
}
.recruiting .btn_g{
	margin-bottom:3rem;
}
.recruiting h3{
	border:2px solid #3f9543;
	border-radius:10px;
	padding:2px 15px;
	display:inline-block;
	margin-bottom:10px;
	color:#3f9543;
}
.recruiting p{
	padding-bottom:2rem;
}

.recruiting .kome{
  padding:0 0 10px 20px;
	margin-top:1rem;
  position: relative;
}
.recruiting .kome:before {
    content:  "※";     
  position: absolute;
  top: 0;
  left: 0;
}
.recruiting ol li{
    list-style:none;  
  padding:0 0 10px 20px;
  position: relative;
}
.recruiting ol li:before {
    content:  "";     
    background-color: #3f9543; 
    border-radius:  50%;    
  height: 10px;
  width: 10px;
  position: absolute;
  top: 8px;
  left: 0;
}

.recruiting ul {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
.recruiting li {
  padding:0 0 10px 30px;
  position: relative;
}
.recruiting ul > li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #3f9543;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  color: #ffffff;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
}


.recruiting .nomal{
    padding: 0 0 3rem;
}
.recruiting .link{
	color:#3f9543;
	text-decoration:underline;
}
.recruiting .link:hover{
	text-decoration:none;
}

.recruiting .white {
    position: relative;
    padding: 3rem 0 6rem;
    background:#fff;
}
.recruiting .white > div {
    position: relative;
    z-index: 2;
}
.recruiting .white:before ,
.recruiting .white:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    border-style: solid;
}
.recruiting .white:before {
    top: 0;
    border-color: #f5f1e6 transparent transparent;
    border-width: 5vw 50vw 0;
}
.recruiting .white:after {
    bottom: 0;
    border-color: transparent #f5f1e6 transparent;
    border-width: 5vw 50vw 0;
}


.flow{
	background:#f5f1e6;
	margin:2rem auto 0 auto;
	padding:3%;
	border-radius: 10px;
}
.flow div{
	border-radius: 10px;
	margin-bottom:3rem;
	background:#005f2d;
	position: relative;
}
.flow div.next{
	background:#3f9543;
}
.flow div.next:last-child{
	background:#f79caf;
	margin-bottom:0;
}
.flow dt{
	width:130px;
	float:left;
	text-align:center;
	color:#fff;
	padding:10px;
}
.flow dd{
	margin-left:150px;
	padding:10px 30px;
	background:#fff;
	border-radius:0 9px 9px 0;
}
.flow div::before {
    border: 30px solid transparent; /* 三角形の元となる指定（一旦全て透過にする） */
    border-top-color: #a59483; /* 作成したい三角形に合わせて１辺の色をつける */
    content: "";
    position: absolute;
    bottom: -70px;
    left: 50%; /* 中央寄せに使用 */
    margin-left: -30px; /* 中央寄せに使用*/
}
.flow div:last-child:before {
	display:none;
}

@media screen and (max-width: 600px) {
.recruiting .nomal{
    padding: 0;
}

.recruiting .white {
    padding: 2rem 0 0;
}


.flow{
	margin:2rem auto;
}
.flow div{
	margin-bottom:2rem;
}
.flow div::before {
    border: 15px solid transparent; /* 三角形の元となる指定（一旦全て透過にする） */
    border-top-color: #a59483; /* 作成したい三角形に合わせて１辺の色をつける */
    content: "";
    position: absolute;
    bottom: -40px;
    left: 50%; /* 中央寄せに使用 */
    margin-left: -15px; /* 中央寄せに使用*/
}
.flow dt{
	width:50px;
}
.flow dd{
	margin-left:70px;
	padding:10px 20px;
}


	
}