/* color */
/* ============================================ */
/* font */
/* ============================================ */
/* top */
/* ============================================ */
.top-mainvisual {
  background: #F1F7EC;
  padding: 30px 0;
}
.top-mainvisual__ttl {
  font-size: 1.8rem;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 10px;
}

.baloon {
  display: inline-block;
  font-size: 1.8rem;
  border-radius: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  letter-spacing: 0.1em;
}
.baloon-wrap {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  width: 93%;
}
.baloon-person {
  width: 130px;
  position: absolute;
  bottom: -30px;
  right: -70px;
}
@media all and (max-width: 896px) {
  .baloon-person {
    width: 110px;
    right: -50px;
  }
}
@media all and (max-width: 480px) {
  .baloon-person {
    right: -10px;
  }
}

.balloon1 {
  padding: 12px 10px 16px;
  width: 350px;
  max-width: 100%;
  background: #037745;
  position: relative;
  line-height: 2;
  font-size: 1.6rem;
}
@media all and (max-width: 480px) {
  .balloon1 {
    width: 100%;
  }
}
.balloon1::before {
  content: "";
  background-image: url(../images/top/fukidashi.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -50px;
  right: 20px;
  width: 40px;
  height: 40px;
}
@media all and (max-width: 480px) {
  .balloon1::before {
    right: 40px;
  }
}
.balloon1 span {
  font-size: 2.3rem;
}

.balloon2 {
  padding: 12px 10px 12px;
  width: 280px;
  max-width: 100%;
  border-radius: 50px;
  background: #43AF3E;
  margin: 16px 0;
  position: relative;
  right: 50px;
  font-size: 1.5rem;
}
@media all and (max-width: 480px) {
  .balloon2 {
    right: 0px;
    width: 66%;
  }
}

.balloon3 {
  padding: 12px 10px 12px;
  width: 240px;
  max-width: 100%;
  border-radius: 50px;
  background: #43AF3E;
  font-size: 1.5rem;
}
@media all and (max-width: 480px) {
  .balloon3 {
    margin: 0 auto 0 10px !important;
    width: 65%;
  }
}

.section-ttl {
  text-align: center;
  font-size: 2rem;
  position: relative;
}
.section-ttl::after {
  content: "";
  background: #43AF3E;
  height: 1px;
  width: 51px;
  position: absolute;
  bottom: -16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.section-ttl.wh {
  color: #fff;
}
.section-ttl.wh::after {
  content: "";
  background: #fff;
  height: 1px;
  width: 51px;
  position: absolute;
  bottom: -16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.section-ttl-en {
  color: rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 1.7rem;
  font-weight: 500;
}
.section-ttl-en.wh {
  color: rgba(255, 255, 255, 0.3);
}

.contents {
  margin-top: 30px;
}

.flow-blk {
  max-width: 660px;
  width: 90%;
  margin: 0 auto;
}
.flow-blk__ttl {
  color: #037745;
  font-size: 1.8rem;
  margin-bottom: 10px;
}
.flow-blk__txt {
  font-size: 1.3rem;
  font-weight: 400;
}
.flow-blk__ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 25px;
}
@media all and (max-width: 480px) {
  .flow-blk__ul.first {
    height: 130px;
    margin-bottom: 0;
  }
}
@media all and (max-width: 480px) {
  .flow-blk__ul.first .flow-blk__li::after {
    content: "";
    height: 13vh;
  }
}
@media all and (max-width: 480px) {
  .flow-blk__ul.second {
    height: 145px;
    margin-bottom: 0;
  }
}
@media all and (max-width: 480px) {
  .flow-blk__ul.second .flow-blk__li::after {
    content: "";
    height: 14vh;
  }
}
@media all and (max-width: 480px) {
  .flow-blk__ul.third {
    height: 130px;
    margin-bottom: 0;
  }
}
.flow-blk__ul:first-of-type {
  margin-top: 50px;
}
.flow-blk__ul:last-of-type .flow-blk__li:first-child::after {
  content: none;
}
.flow-blk__li {
  display: inline-block;
}
.flow-blk__li:first-child {
  background: #EFEDDA;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  position: relative;
}
.flow-blk__li:first-child::after {
  content: "";
  height: 11vh;
  width: 3px;
  background: #EFEDDA;
  position: absolute;
  top: 60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media all and (max-width: 1025px) {
  .flow-blk__li:first-child::after {
    height: 9vh;
  }
}
@media all and (max-width: 480px) {
  .flow-blk__li:first-child::after {
    height: 120%;
  }
}
.flow-blk__li:first-child img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 30px !important;
}
.flow-blk__li:first-child img.mail {
  width: 36px !important;
}
.flow-blk__li:first-child img.result {
  left: 52% !important;
}
.flow-blk__li:last-child {
  width: 80%;
  margin-left: 20px;
}
.contact {
  background-color: #43AF3E;
  position: relative;
  margin-top: 200px;
  padding-bottom: 40px;
}
@media all and (max-width: 600px) {
  .contact {
    margin-top: 100px;
    padding-top: 30px;
  }
}
.contact::after {
  content: "";
  background-image: url(../images/top/bg-img.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: -120px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  height: 180px;
  z-index: 1;
}
@media all and (max-width: 600px) {
  .contact::after {
    background-size: contain;
    top: -70px;
  }
}
@media all and (max-width: 480px) {
  .contact::after {
    background-size: contain;
    top: -40px;
  }
}
.contact-des {
  position: relative;
  z-index: 2;
  padding-top: 40px;
}
@media all and (max-width: 896px) {
  .contact-des {
    padding-top: 0;
  }
}
.contact-blk {
  margin-top: 40px;
}
@media all and (max-width: 896px) {
  .contact-blk {
    margin-top: 30px;
  }
}
.contact-txt {
  color: #fff;
  max-width: 600px;
  width: 90%;
  margin: 0px auto;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.7;
}
.contact-map {
  background: #fff;
  max-width: 800px;
  width: 90%;
  margin: 30px auto 0;
  padding: 30px 20px;
  text-align: center;
}
@media all and (max-width: 896px) {
  .contact-map {
    margin: 20px auto 30px;
  }
}
.contact-map__ttl {
  font-size: 1.5rem;
}
@media all and (max-width: 480px) {
  .contact-map__ttl {
    font-size: 1.3rem;
  }
}
.contact-map__ttl .prev {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid;
  border-color: transparent transparent #777777 #777777;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: relative;
  top: 1px;
}
.contact-map__ttl .next {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid;
  border-color: #777777 #777777 transparent transparent;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: relative;
  top: 1px;
}
.contact-map__tel a {
  font-size: 4rem;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  position: relative;
}
@media all and (max-width: 480px) {
  .contact-map__tel a {
    font-size: 3.6rem;
  }
}
.contact-map__tel a::before {
  content: "";
  background-image: url(../images/top/tel.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: -30px;
}
@media all and (max-width: 480px) {
  .contact-map__tel a::before {
    width: 18px;
    height: 18px;
    left: -24px;
    top: 0;
  }
}
.contact-map__txt {
  font-weight: 400;
  margin-bottom: 16px;
  color: #777777;
}
@media all and (max-width: 480px) {
  .contact-map__txt {
    font-size: 1.3rem;
  }
}
.contact-map__img {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}
.contact-map__add {
  font-weight: 400;
  margin-top: 10px;
  color: #777777;
}

.btn {
  display: block;
  width: 170px;
  margin: 20px auto 0;
  border: 1px solid #555;
  border-radius: 30px;
  font-size: 1.3rem;
  padding: 7px 10px 9px;
  font-weight: 400;
  text-align: center;
  position: relative;
  color: #555555;
}
.btn::after {
  content: "";
  background-image: url(../images/top/yajirushi.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;
  height: 10px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 3%;
}

.js-fade-up {
  opacity: 0;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}

.is-active-up {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.js-fade-right {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
}

.is-active-right {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.js-fade-left {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 1.7s;
  transition: all 1.7s;
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
}

.is-active-left {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.anim-box.fadein.is-animated {
  -webkit-animation: fadeIn 1.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
          animation: fadeIn 1.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim-box.slidein.is-animated {
  -webkit-animation: slideIn 1.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: slideIn 1.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
}
/* move */
/* ============================================ */
.moveTop {
  opacity: 0;
  -webkit-transition: 1.5s;
  transition: 1.5s;
  -webkit-transform: translate(0, 30px);
          transform: translate(0, 30px);
}
.moveTop.current {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.moveNone {
  opacity: 0;
  -webkit-transition: all 2.5s;
  transition: all 2.5s;
}
.moveNone.current {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.moveRight {
  opacity: 0;
  -webkit-transition: 1.5s;
  transition: 1.5s;
  -webkit-transform: translate(-50px, 0);
          transform: translate(-50px, 0);
}
.moveRight.current {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.moveLeft {
  opacity: 0;
  -webkit-transition: 1.5s;
  transition: 1.5s;
  -webkit-transform: translate(40px, 0);
          transform: translate(40px, 0);
}
.moveLeft.current {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}