#sec_pagettl, #sec_pagettl h1>.inner {
  background: var(--yellow2);
}
.secTtl{
  display: inline-block;
  width: 100%;
  line-height: 1;
  border-radius: 68px;
  padding: 20px 0;
}
.anchors{
  display: flex;
  justify-content: center;
  max-width: 715px;
  margin: 0 auto;
}
.anchors li{
  width: auto;
}
.anchors li:nth-child(2){
  margin-left: min(3.90625vw, 75px);
}
.anchors li a{
  display: inline-block;
  letter-spacing: .02em;
  padding: 15px 30px;
}
.btnList{
  align-items: baseline;
  width: min(100%, 980px);
  margin-left: auto;
  margin-right: auto;
}
a.telBorder{
  color: inherit;
  text-decoration: none;
  border-bottom: solid 1px #333;
}
a.telBorder:visited{
  color: inherit;
}
.styleBtn.btn2{
  width: 47%;
  max-width: 450px;
}
.styleBtn.btn2 a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 40px);
  line-height: 1;
  box-shadow: 0px 6px 8px 0px rgba(205, 198, 195, 1);
}
.styleBtn.btn2 a::before,
.styleBtn.btn2 a::after{
  position: absolute;
  display: block;
  content: "";
  top: calc(50% - 2px);
  right: 6.2%;
  width: .75em;
  height: .125em;
  border-radius: 9999px;
  background: #fff;
  transform-origin: calc(100% - .0625em) 50%;
  transition: .5s;
}
.styleBtn.btn2 a::before{
  transform: rotate(45deg);
}
.styleBtn.btn2 a::after{
  transform: rotate(-45deg);
}
.styleBtn.btn2.short{
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.styleBtn.btn2.short a{
  display: inline-block;
  width: fit-content;
  padding: 1em;
}
.styleBtn a.bgOrange{
  background: var(--orange);
}
.styleBtn a.bgYellow2{
  background: var(--yellow2);
}
.styleBtn svg{
  width: auto;
  height: 1em;
  margin-right: 13px;
}
#sec1 .flowList{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  grid-gap: 60px 40px;
  margin-top: 36px;
  z-index: 3;
}
#sec1 .flowList li{
  position: relative;
  display: flex;
}
#sec1 .flowList li .inner{
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 30px 30px 1.125rem;
  z-index: 2;
}
#sec1 .flowList li::before,
#sec1 .flowList li:nth-of-type(2)::after,
#sec1 .flowList li:nth-of-type(4)::after{
  position: absolute;
  display: block;
  content: "";
  bottom: 50%;
  right: 0;
  width: 40px;
  height: 18px;
  background-image: radial-gradient(#333 15%, transparent 25%), radial-gradient(#333 15%, transparent 25%);
  background-size: 18px 18px;
  background-repeat: repeat-x;
  background-position: left center;
  transform: translateX(100%);
  z-index: 1;
}
#sec1 .flowList li:last-of-type:before{
  display: none;
}
#sec1 .flowList li .step{
  position: absolute;
  display: inline-block;
  top: 30px;
  left: 0;
  background: #333;
  color: var(--orange);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1em;
  padding: 12px 20px 10px 14px;
  border-radius: 0 20px 20px 0;
}
#sec1 .flowList li img{
  display: block;
  margin: 0 auto;
}
.recruitTable{
  width: 100%;
  border-radius: 20px;
  border: solid 1px #333;
  box-sizing: border-box;
  overflow: hidden;
}
.recruitTable + .recruitTable{
  margin-top: 60px;
}
.recruitTable table{
  border-collapse: collapse;
}
.recruitTable th{
  min-width: 240px;
  background: #333;
  color: #fff;
  text-align: center;
  padding: 27px 0 1.313rem;
}
.recruitTable tr + tr th{
  border-top: solid 1px #fff;
}
.recruitTable td{
  padding: 1.313rem 40px;
  background: #fff;
}
.recruitTable tr + tr td{
  border-top: solid 1px #333;
}
.flowList2{
  position: relative;
}
.flowList2::before{
  position: absolute;
  display: block;
  content: "";
  top: 26px;
  left: 58px;
  width: 18px;
  height: calc(100% - 153px);
  background-image: radial-gradient(#333 15%, transparent 25%), radial-gradient(#333 15%, transparent 25%);
  background-size: 18px 18px;
  background-repeat: repeat-y;
  background-position: center center;
  transform: translateX(-50%);
  z-index: 1;
}
.flowList2 li{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 11px;
  z-index: 2;
}
.flowList2 li + li{
  margin-top: 50px;
}
.flowList2 li .step{
  position: relative;
  background: #fff;
  text-align: center;
  z-index: 2;
  padding-bottom: 11px;
}
.flowList2 li + li .step{
  padding-top: 11px;
}
.flowList2 li .step span{
  display: block;
  color: var(--yellow2);
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1em;
  padding-bottom: 8px;
}
.flowList2 li .step .icon{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 116px;
  height: 116px;
  background: var(--yellow2);
  border-radius: 50%;
}
.flowList2 li .step .icon img{
  width: 61.206%;
  height: auto;
}
.flowList2 li:nth-child(1) .step .icon svg{
  width: 51.724%;
}
.flowList2 li:nth-child(4) .step .icon svg{
  width: 45.689%;
}
.flowList2 li .text{
  width: calc(100% - 158px);
  padding-top: 11px;
}
.flowList2 li .text h4{
  font-size: 1.875rem;
  font-weight: bold;
  line-height: 1em;
}
.flowList2 li .text p{
  background: var(--yellow3);
  border-radius: 10px;
  margin-top: 30px;
  padding: 1.063rem 30px;
}
#sec3 .inner{
  padding: 60px 60px 65px;
  border-radius: 20px;
}
.sec_info{
  background: var(--yellow);
}
/*
===================================================
        pc
===================================================
*/
@media screen and (min-width: 1200px) {
  #sec1 .flowList li:nth-of-type(4)::after{
    background-color: #F1F1F1;
    background-position: left center;
  }
}
@media screen and (min-width: 960px) {
  #sec1 .flowList li:nth-of-type(2)::after{
    bottom: -30px;
    left: 50%;
    width: min(68.91vw, 827px);
    background-repeat: repeat-x;
    background-position: left 4px center;
    transform: translate(-50%, 50%);
  }  
  #sec1 .flowList li:nth-of-type(3)::before{
    bottom: 0;
    right: 50%;
    background-color: #F1F1F1;
    background-image: radial-gradient(#333 15%, transparent 25%), radial-gradient(#333 15%, transparent 25%);
    background-position: left -2px center;
    transform: rotate(90deg) translate(75%, -100%);
  }
  #sec1 .flowList li:nth-of-type(4)::after{
    bottom: 100%;
    right: 50%;
    transform: rotate(90deg) translate(-25%, -100%);
  }
}
/*
===================================================
        tb
===================================================
*/
@media (min-width: 960px) and (max-width: 1200px) {
  #sec1 .flowList{
    grid-template-columns: repeat(2, 1fr);
    /* grid-gap: 60px 40px; */
  }
  #sec1 .flowList li:nth-of-type(2)::before,
  #sec1 .flowList li:nth-of-type(4)::before{
    bottom: 0;
    right: 50%;
    background-color: #F1F1F1;
    background-position: left 2px center;
    transform: rotate(90deg) translate(75%, -100%);
  }
  #sec1 .flowList li:nth-of-type(2)::after,
  #sec1 .flowList li:nth-of-type(4)::after{
    bottom: -30px;
    left: 50%;
    width: calc(100% + 36px);
    background-position: center center;
    transform: translate(-100%, 50%);
  }
  #sec1 .flowList li:nth-of-type(3)::before,
  #sec1 .flowList li:nth-of-type(5)::before{
    bottom: 50%;
    right: 0;
    background-color: #F1F1F1;
    background-position: left -2px center;
    transform: translateX(100%);
  }
  #sec1 .flowList li:nth-of-type(3)::after,
  #sec1 .flowList li:nth-of-type(5)::after{
    position: absolute;
    display: block;
    content: "";
    top: 0;
    right: 50%;
    width: 40px;
    height: 18px;
    background-color: #F1F1F1;
    background-image: radial-gradient(#333 15%, transparent 25%), radial-gradient(#333 15%, transparent 25%);
    background-size: 18px 18px;
    background-repeat: repeat-x;
    background-position: left 5px center;
    transform: rotate(90deg) translate(-81%, -100%);
    z-index: 1;
  }
}
/*
===================================================
        sp
===================================================
*/
@media screen and (max-width: 960px) {
  .secTtl{
    padding: 15px 0;
  }
  .anchors{
    display: block;
  }
  .anchors li:nth-child(2){
    margin-left: auto;
  }
  .anchors li a{
    width: min(65.3vw, 245px);
    padding: 16px 23px;
  }
  .styleBtn.btn2{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .btnList li + li{
    margin-top: 15px;
  }
  #sec1 .flowList{
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 50px;
    margin-top: 25px;
  }
  #sec1 .flowList li{
    max-width: 400px;
  }
  #sec1 .flowList li .inner{
    border-radius: 10px;
    padding: 30px 15px 1.5rem;
  }
  #sec1 .flowList li::before{
    bottom: -9px;
    right: 25%;
    width: 50%;
    transform: rotate(90deg) translateX(50%);
  }
  #sec1 .flowList li:nth-of-type(2)::after,
  #sec1 .flowList li:nth-of-type(4)::after{
    display: none;
  }
  #sec1 .flowList li .step{
    font-size: 1.125rem;
  }
  .recruitTable{
    border-radius: 10px;
  }
  .recruitTable + .recruitTable{
    margin-top: 40px;
  }
  .recruitTable tr{
    display: block;
    width: 100%;
  }
  .recruitTable th{
    display: block;
    padding: 12px 10px;
  }
  .recruitTable td{
    display: block;
    padding: 16px 10px;
  }
  .recruitTable tr + tr th,
  .recruitTable tr + tr td{
    border-top: none;
  }
  .flowList2::before{
    top: 20px;
    left: 30px;
    height: max(calc(100% - 200px), 530px);
  }
  .flowList2 li .step span{
    font-size: .75rem;
  }
  .flowList2 li .step .icon{
    width: 60px;
    height: 60px;
  }
  .flowList2 li .text{
    width: calc(100% - 70px);
  }
  .flowList2 li .text h4{
    font-size: 1.125rem;
  }
  .flowList2 li .text p{
    margin-top: 20px;
    padding: .563rem 15px;
  }
  #sec3 .inner{
    padding: 50px 15px;
    border-radius: 10px;
  }
}