@charset "utf-8";
/*共通設定*/
.title {
    background-image: url(/img/in-service3.jpg);
}
/*終わり*/


/*<section class="service">*/
.service {
    margin: 120px 0 150px 0;
    padding-left: 10vw;
    padding-right: 10vw;
    position: relative;
}

.service-lead {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 150px auto;
    text-align: center;
    position: relative;
}

.service-in {
    position: relative;
}

.service-1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 120px;
}

.service-2 {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.service-1 img,
.service-2 img {
    width: 55%;
    border-radius: 10px;
}

.service-text {
    width: 40%;
    margin-top: 50px;
}

.service-text h2 {
    margin-bottom: 30px;
}

.service-mask {
    position: absolute;
    top: 13%;
    right: 0;
    width: 70%;
    height: 60%;
    background-color: #EDE9E0;
    border-radius: 50px 0 0 50px;
}
/*終わり*/


/*<section class="stepbar">*/
.stepbar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    padding: 0 5vw 150px 5vw;
}

.stepbar h2 {
    width: 30%;
}

.stepbar-in {
    width: 60%;
}

.stepbar .stepbarwrap:first-child {
    margin-top: 0;
}

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 3em;
  height: 3em;
  content: "";
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  text-align: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle span {
  display: inline-block;
  line-height: 1.2em;
  font-size: 0.8em;
  font-weight: bold;
  position: relative;
  top: 0.9em;
}

.stepbar .stepbarwrap .steptitle .title-s {
  margin: 0.5em;
  font-weight: bold;
  font-size: 1.2em;
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 3.5em;
}

.stepbar .stepbarwrap .steptxt .txt {
  font-size: 0.9em;
}

.stepbar .stepbarwrap .stepline {
  width: 1px;
  height: calc(100% + 1em);
  background-color: #000;
  position: absolute;
  top: 1em;
  left: 1.5em;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {  
}
/*終わり*/


/*スマホ*/
@media (max-width: 599px) {
/*<section class="service">*/
.service {
    padding-left: 5vw;
    padding-right: 5vw;
}

.service-1,
.service-2 {
    display: block;
}

.service-1 {
    margin-bottom: 100px;
}

.service-1 img,
.service-2 img {
    width: 100%;
}

.service-text {
    width: 100%;
}
/*終わり*/  


/*<section class="stepbar">*/
.stepbar {
    display: block;
}

.stepbar h2 {
    width: 100%;
    margin-bottom: 30px;
}

.stepbar-in {
    width: 100%;
}
/*終わり*/
}
/*終わり*/