@charset "utf-8";

#contents .contact{
padding: 100px 0;
}


#contents .task {
  padding-top: 85px;
  background-color: #eaecec
}
@media screen and (max-width: 767px) {
  #contents .task {
    padding-top: 30px
  }
  
#contents .contact{
padding: 74px 0;
}

  
}
#contents .task__list {
  margin-top: 54px
}
@media screen and (max-width: 767px) {
  #contents .task__list {
    margin-top: 17px
  }
}
#contents .task__list .list__item {
  display: flex;
  justify-content: center
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item {
    display: block
  }
}
#contents .task__list .list__item + .list__item {
  margin-top: 54px
}
#contents .task__list .list__item--left, #contents .task__list .list__item--right {
  width: 50%
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left, #contents .task__list .list__item--right {
    width: auto
  }
}
#contents .task__list .list__item--left .inner figure, #contents .task__list .list__item--right .inner figure {
  margin: 0
}
#contents .task__list .list__item--left {
  display: flex;
  justify-content: flex-end;
  position: relative;
  background-color: #ffffff
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left {
    display: block
  }
}
#contents .task__list .list__item--left:after {
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -30px;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #ffffff;
  content: '';
  transform: translateY(-50%)
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left:after {
    top: auto;
    right: auto;
    bottom: -27.5px;
    left: 50%;
    border-top: 27.5px solid #ffffff;
    border-right: 27.5px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 27.5px solid transparent;
    transform: translate(-50%, 0)
  }
}
#contents .task__list .list__item--left .inner figure {
  text-align: right
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--left .inner figure {
    width: 455px;
    margin-right: 0;
    margin-left: auto
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left .inner figure {
    max-width: 375px;
    width: 100%;
    margin: 0 auto 0 auto;
    text-align: center
  }
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--left .inner figure img {
    width: 100%
  }
}
#contents .task__list .list__item--left .inner .text {
  width: 600px;
  margin-top: 42px;
  zoom: 100%
}
#contents .task__list .list__item--left .inner .text:after {
  display: block;
  clear: both;
  height: 0;
  content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==")
}
@media print {
  #contents .task__list .list__item--left .inner .text:after {
    display: table;
    width: 100%;
    font-size: 0;
    line-height: 0
  }
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--left .inner .text {
    width: 470px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left .inner .text {
    box-sizing: border-box;
    max-width: 375px;
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 0 16.5px 0 16.5px
  }
}
#contents .task__list .list__item--left .inner .text .left, #contents .task__list .list__item--left .inner .text .right {
  box-sizing: border-box;
  position: relative;
  padding-left: 14px
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left .inner .text .left, #contents .task__list .list__item--left .inner .text .right {
    padding-left: 3%
  }
}
#contents .task__list .list__item--left .inner .text .left {
  float: left
}
#contents .task__list .list__item--left .inner .text .right {
  float: right
}
#contents .task__list .list__item--left .inner .text .left:before, #contents .task__list .list__item--left .inner .text .right:before {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 1px;
  height: 92%;
  background-color: #4694c7;
  content: ''
}
#contents .task__list .list__item--left .inner .text h3 {
  color: #4694c7;
  font-size: 28px;
  line-height: 1.3
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--left .inner .text h3 {
    font-size: 22px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left .inner .text h3 {
    font-size: 18px
  }
}
@media screen and (max-width: 370px) {
  #contents .task__list .list__item--left .inner .text h3 {
    font-size: 15px
  }
}
#contents .task__list .list__item--left .inner .text p {
  margin-top: 5px;
  color: #4694c7;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--left .inner .text p {
    font-size: 10px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--left .inner .text p {
    font-size: 10px;
    line-height: 1.57
  }
}
#contents .task__list .list__item--right {
  padding-top: 48px;
  background-color: #86c2e7
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--right {
    padding: 50px 16.5px 0 16.5px
  }
}
#contents .task__list .list__item--right .inner {
  box-sizing: border-box;
  width: 590px;
  padding-left: 57px;
  text-align: center
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--right .inner {
    width: 470px;
    padding-left: 40px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--right .inner {
    max-width: 375px;
    width: 100%;
    margin: 0 auto 0 auto;
    padding-left: 0
  }
}
#contents .task__list .list__item--right .inner h3 {
  display: inline-block;
  padding: 12px 20px 10px 20px;
  background-color: #ffffff;
  color: #1f4291;
  font-size: 25px;
  line-height: 1
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--right .inner h3 {
    font-size: 22px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--right .inner h3 {
    font-size: 22.5px
  }
}
#contents .task__list .list__item--right .inner h4 {
  margin-top: 20px;
  color: #1f4291;
  font-size: 24px;
  line-height: 1.46
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--right .inner h4 {
    font-size: 20px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--right .inner h4 {
    font-size: 16px
  }
}
#contents .task__list .list__item--right .inner .lead {
  position: relative;
  margin-top: 20px;
  padding-left: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 1.875
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--right .inner .lead {
    font-size: 13px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--right .inner .lead {
    padding-left: 3%;
    font-size: 12.5px;
    line-height: 1.72
  }
}
#contents .task__list .list__item--right .inner .lead + .lead {
  margin-top: 32px
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--right .inner .lead + .lead {
    margin-top: 16px
  }
}
#contents .task__list .list__item--right .inner .lead:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 90%;
  background-color: #1f4291;
  content: '';
  transform: translateY(-50%)
}
#contents .task__list .list__item--right .inner .lead span {
  display: inline-block;
  padding: 3px 2px 1px 2px;
  background-color: #1f4291;
  line-height: 1
}
#contents .task__list .list__item--right .inner .lead sup {
  font-size: 12px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--right .inner .lead sup {
    font-size: 10px
  }
}
#contents .task__list .list__item--case1 .list__item--left .inner {
  padding-top: 64px
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case1 .list__item--left .inner {
    padding-top: 0;
    padding-bottom: 20px
  }
}
#contents .task__list .list__item--case1 .list__item--left .inner .text .left {
  width: 304px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case1 .list__item--left .inner .text .left {
    width: 235px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case1 .list__item--left .inner .text .left {
    width: 54.97076023391813%
  }
}
#contents .task__list .list__item--case1 .list__item--left .inner .text .right {
  width: 296px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case1 .list__item--left .inner .text .right {
    width: 235px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case1 .list__item--left .inner .text .right {
    width: 45.02923976608187%
  }
}
#contents .task__list .list__item--case1 .list__item--right {
  padding-bottom: 0
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case1 .list__item--right {
    padding-bottom: 0
  }
}
#contents .task__list .list__item--case1 .list__item--right .inner figure {
  width: 218px;
  margin: -160px 0 -1px 315px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case1 .list__item--right .inner figure {
    width: 180px;
    margin: -120px 0 -1px 250px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case1 .list__item--right .inner figure {
    width: 135.5px;
    margin: -100px -13.5px 0 auto
  }
}
@media screen and (max-width: 370px) {
  #contents .task__list .list__item--case1 .list__item--right .inner figure {
    width: 120px;
    margin: -100px -46px 0 auto
  }
}
#contents .task__list .list__item--case1 .list__item--right .inner figure img {
  width: 100%
}
#contents .task__list .list__item--case2 .list__item--left .inner {
  padding-top: 95px
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--left .inner {
    padding-top: 0;
    padding-bottom: 20px
  }
}
#contents .task__list .list__item--case2 .list__item--left .inner .text .left {
  width: 273px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case2 .list__item--left .inner .text .left {
    width: 215px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--left .inner .text .left {
    width: 47.95321637426901%
  }
}
#contents .task__list .list__item--case2 .list__item--left .inner .text .right {
  width: 327px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case2 .list__item--left .inner .text .right {
    width: 255px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--left .inner .text .right {
    width: 52.04678362573099%
  }
}
#contents .task__list .list__item--case2 .list__item--right {
  padding-bottom: 40px
}
#contents .task__list .list__item--case2 .list__item--right .inner {
  position: relative
}
#contents .task__list .list__item--case2 .list__item--right .inner h4 {
  margin-right: -57px;
  margin-left: -57px
}
#contents .task__list .list__item--case2 .list__item--right .inner .lead:nth-of-type(2) {
  margin-top: 70px
}
@media screen and (max-width: 1240px) {
  #contents .task__list .list__item--case2 .list__item--right .inner .lead:nth-of-type(2) {
    margin-top: 54px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--right .inner .lead:nth-of-type(2) {
    margin-top: 16px
  }
}
#contents .task__list .list__item--case2 .list__item--right .inner .link {
  margin: 30px auto 0 auto;
  text-align: left
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--right .inner .link {
    margin-top: 26px
  }
}
#contents .task__list .list__item--case2 .list__item--right .inner .link > a {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 510px;
  padding: 15px 0 14px 0;
  background-color: #ffffff;
  color: #1f4291;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  align-items: center
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case2 .list__item--right .inner .link > a {
    width: 430px;
    font-size: 12px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--right .inner .link > a {
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 10px 8px 10px 8px;
    font-size: 10px
  }
}
#contents .task__list .list__item--case2 .list__item--right .inner .link > a:hover {
  color: #1f4291;
  text-decoration: none
}
#contents .task__list .list__item--case2 .list__item--right .inner .link > a span {
  display: block;
  margin-right: 36px
}
#contents .task__list .list__item--case2 .list__item--right .inner .link > a img {
  display: block;
  width: 236px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case2 .list__item--right .inner .link > a img {
    width: 180px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--right .inner .link > a img {
    width: 157px
  }
}
#contents .task__list .list__item--case2 .list__item--right .inner figure {
  position: absolute;
  top: 115px;
  right: 90px;
  width: 164px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case2 .list__item--right .inner figure {
    top: 110px;
    right: 70px;
    width: 124px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case2 .list__item--right .inner figure {
    top: 120px;
    right: 0;
    width: 116.5px
  }
}
#contents .task__list .list__item--case2 .list__item--right .inner figure img {
  width: 100%
}
#contents .task__list .list__item--case3 .list__item--left .inner {
  padding-top: 44px
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case3 .list__item--left .inner {
    padding-top: 0;
    padding-bottom: 20px
  }
}
#contents .task__list .list__item--case3 .list__item--left .inner .text .left {
  width: 280px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case3 .list__item--left .inner .text .left {
    width: 205px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case3 .list__item--left .inner .text .left {
    width: 51.46198830409357%
  }
}
#contents .task__list .list__item--case3 .list__item--left .inner .text .right {
  width: 320px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case3 .list__item--left .inner .text .right {
    width: 265px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case3 .list__item--left .inner .text .right {
    width: 48.53801169590643%
  }
}
#contents .task__list .list__item--case3 .list__item--right {
  position: relative;
  padding-bottom: 82px
}
@media screen and (max-width: 1246px) {
  #contents .task__list .list__item--case3 .list__item--right {
    padding-bottom: 72px
  }
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case3 .list__item--right {
    padding-bottom: 60px
  }
}
#contents .task__list .list__item--case3 .list__item--right .note {
  position: absolute;
  bottom: 10px;
  left: 34px
}
@media screen and (max-width: 767px) {
  #contents .task__list .list__item--case3 .list__item--right .note {
    left: 15px;
    bottom: 20px
  }
}
#contents .task__list .list__item--case3 .list__item--right .note p {
  color: #ffffff;
  font-size: 12px;
  line-height: 1
}


#contents .workflow {
  padding-top: 130px;
  background-color: #eaecec
}
@media screen and (max-width: 767px) {
  #contents .workflow {
    padding-top: 74px
  }
}
#contents .workflow .subcopy {
  margin-top: 25px
}

@media screen and (max-width: 767px) {
  #contents .workflow .subcopy {
    margin-top: 16px
  }
}
#contents .workflow .workflow__detail {
  width: 960px;
  margin: 0 auto 0 auto
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail {
    display: flex;
    width: 100%;
    margin-top: 30px
  }
}
#contents .workflow .workflow__detail .workflow__contents {
  margin-top: 65px
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents {
    width: 50%;
    margin-top: 0
  }
}
#contents .workflow .workflow__detail .workflow__contents + .workflow__contents {
  margin-top: 40px
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents + .workflow__contents {
    margin-top: 0
  }
}
#contents .workflow .workflow__detail .workflow__contents h3 {
  position: relative;
  z-index: 1
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents h3 {
    width: 160px;
    height: 70px;
    margin: 0 auto 0 auto;
    background-color: #ffffff
  }
}
@media screen and (max-width: 374px) {
  #contents .workflow .workflow__detail .workflow__contents h3 {
    width: 85.33333333333333%
  }
}
#contents .workflow .workflow__detail .workflow__contents h3 span {
  padding: 0 5px 0 5px;
  background-color: #ffffff;
  font-size: 21px;
  font-weight: bold
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents h3 span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    padding: 0;
    font-size: 16px;
    text-align: center;
    line-height: 1.2;
    transform: translate(-50%, -50%)
  }
}
@media screen and (max-width: 374px) {
  #contents .workflow .workflow__detail .workflow__contents h3 span {
    width: 85.33333333333333%
  }
}
#contents .workflow .workflow__detail .workflow__contents h3 sup {
  font-size: 12px
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents h3 sup {
    font-size: 10px
  }
}
#contents .workflow .workflow__detail .workflow__contents--analog h3 {
  color: #006daf
}
#contents .workflow .workflow__detail .workflow__contents--analog figure {
  margin: -67px -19px 0 0
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents--analog figure {
    margin: 12px 0 0 0
  }
}
#contents .workflow .workflow__detail .workflow__contents--analog p {
  margin-top: 10px;
  font-size: 12px
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents--analog p {
    margin-top: 12px;
    padding: 0 0 0 8%;
    font-size: 9.5px
  }
}
#contents .workflow .workflow__detail .workflow__contents--surepress h3 {
  color: #ec6c00
}
#contents .workflow .workflow__detail .workflow__contents--surepress figure {
  margin: -31px 0 0 -81px
}
@media screen and (max-width: 767px) {
  #contents .workflow .workflow__detail .workflow__contents--surepress figure {
    margin: 13px 0 0 0
  }
}


@media print {
  #contents .task .task__list .list__item--left {
    zoom: 80%
  }
  #contents .task .task__list .list__item--right {
    zoom: 80%
  }
  
    }
    
    
  #contents .workflow {
    clear: both
  }    
  
  
  
  #contents .label {
  padding: 125px 0 60px 0;
  background-color: #eaecec
}
@media screen and (max-width: 767px) {
  #contents .label {
    padding: 72px 0 80px 0
  }
}
#contents .label .subcopy {
  margin-top: 28px
}
@media screen and (max-width: 767px) {
  #contents .label .subcopy {
    margin-top: 13px
  }
}
#contents .label .label__list {
  display: flex;
  justify-content: space-between;
  width: 960px;
  margin: 28px auto 0 auto;
  flex-wrap: wrap
}
@media screen and (max-width: 767px) {
  #contents .label .label__list {
    width: auto;
    margin-top: 23px;
    padding: 0 4.67% 0 4.67%
  }
}
#contents .label .label__list .list__item {
  width: 220px;
  text-align: center
}
@media screen and (max-width: 767px) {
  #contents .label .label__list .list__item {
    width: 47.05882352941176%
  }
}
@media screen and (max-width: 767px) {
  #contents .label .label__list .list__item:nth-child(n+3) {
    margin-top: 24px
  }
}
#contents .label .label__list .list__item h3 {
  color: #1f4291;
  font-size: 21px;
  line-height: 1.28
}
@media screen and (max-width: 767px) {
  #contents .label .label__list .list__item h3 {
    margin: 0 -5px 0 -5px;
    font-size: 18px
  }
}
@media screen and (max-width: 370px) {
  #contents .label .label__list .list__item h3 {
    font-size: 16px
  }
}
#contents .label .label__list .list__item figure {
  margin: 4px 0 0 0
}
#contents .label .label__list .list__item figure img {
  width: 100%
}
#contents .label .label__list .list__item .lead {
  margin-top: 20px;
  font-size: 13px;
  text-align: left;
  line-height: 1.54
}
@media screen and (max-width: 767px) {
  #contents .label .label__list .list__item .lead {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.44
  }
}