@charset "utf-8";

/* ---------------------------------------- 
 - #maintitle
---------------------------------------- */
#maintitle {
    margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  #maintitle {
    margin-bottom: 30px;
  }
}

/* ---------------------------------------- 
 - workstyle
---------------------------------------- */
#workstyle {
  text-align: center;
  position: relative;
	width: 90%;
	max-width: 1200px;
  margin: 0 auto 90px;
}
.workstyle_box {
	position: relative;
  padding: 100px 0 85px;
}
.workstyle_box::after{
	content: "";
	display: block;
	background: #7d8d7a;
  border-radius: 4px;
	position: absolute;
	top:0;
	left:0;
	right:0;
	width: 4px;
	height: 0;
	margin: auto;
	z-index: 0;
	transition: all 1s 0.5s linear;
}	
.workstyle_box.anime::after{
	height: 100%;
}
.workstyle_item {
  position: relative;
  z-index: 1;
  position: relative;
  z-index: 1;
  width: 50%;
}
.workstyle_item:nth-child(even) {
  margin-left: auto;
}
.workstyle_item:nth-child(n + 2) {
  margin-top: -15%;
}

.workstyle_inner {
  width: 88%;
  background: #fff;
}
.workstyle_item:nth-child(even) .workstyle_inner {
  margin-left: auto;
}
.workstyle_item::before {
  content: "";
  position: absolute;
  top: 1.4em;
  width: 0;
  height: 1px;
  background: #53604c;
  transition: all 0.2s 0.5s linear;
}
.workstyle_item.anime::before { /* アニメーション */
  width: 12%;
}
.workstyle_item::after {
  content: "";
  position: absolute;
  top: calc(1.4em - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #53604c;
  transition: all 0.1s 0.5s linear;
  opacity: 0;
}
.workstyle_item.anime::after { /* アニメーション */
  opacity: 1;
}
.workstyle_item:nth-child(odd)::before {
  right: 0;
}
.workstyle_item:nth-child(even)::before {
  left: 0;
}
.workstyle_item:nth-child(odd)::after {
  right: 0;
  margin-right: -7px;
}
.workstyle_item:nth-child(even)::after {
  left: 0;
  margin-left: -7px;
}
.workstyle_title {
  background: #032005;
  color: #fff;
  font-size:2.4rem;
  line-height: 1.8;
}
.workstyle_content {
  padding: 20px 25px;
}
.workstyle_text {
  text-align: left;
  
}
.workstyle_visual {
  margin-top: 20px;
}

.workstyle_end {
  font-size:3.6rem;
  line-height: 1.4;
  margin: 25px auto;
}
@media screen and (max-width: 768px) {
  #workstyle {
    margin: 0 auto 50px;
  }
  .workstyle_box {
    padding: 0;
  }
  .workstyle_box::after{
    display: none;
  }
  .workstyle_item {
    width: 100%;
    margin-bottom: 58px;
    position: relative;
  }
  .workstyle_item:nth-child(n + 2) {
    margin-top: 0;
  }
  
  .workstyle_inner {
    width: 100%;
  }
  .workstyle_item::before {    
    display: none;
  }
  .workstyle_item::after {
    /*display: none;*/
  }
  
  .workstyle_item::after {
    content: '';
    position: absolute;
    top: auto;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 18px solid #53604c;
    border-radius: 0;
    background: none;
    opacity: 1;
  }
  .workstyle_item:nth-child(even)::after {
    left: auto;
  }
  
  .workstyle_title {
    font-size:1.8rem;
  }
  .workstyle_content {
    padding: 15px 3%;
  }
  .workstyle_visual {
    margin-top: 15px;
  }

  .workstyle_end {
    font-size:2rem;
    margin: 15px auto;
  }
}