@charset "UTF-8";

#service {
  text-align: center;
  margin: 0 auto;
  padding: 120px 0;
  background-color: #FFFAE5;
  position: relative;
  background-image: url(/wp-content/themes/RANKUP/assets/images/common/top-rectangle.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 398px;
}

.service-content {
  display: flex;
}

.service-inner {
  max-width: 1000px;
  text-align: center;
  display: flex;
  align-items: center;
  margin: 70px auto 0 auto;
}

.service-image img {
  display: block;
  width: 451px;
  height: 375px;
  border-radius: 20px 0 0 20px;
}

.service-text {
  width: 549px;
  height: 375px;
  text-align: left;
  background-color: #fff;
  border-radius: 0 20px 20px 0;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 55px;
}

.service-title {
  display: inline-block;
  border-bottom: 2px dotted #048CE2;
  margin-bottom: 8px;
  padding-right: 13em;
}

#voice {
  display: block;
  max-width: 100%;
  padding: 0 0 120px 0;
  background-color: #FFFAE5;
}

.voice-inner {
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 78px 0;
}

.voice-box01 {
  width: 850px;
  margin: 40px auto 0 auto;
  background-image: radial-gradient(circle, #048ce2 1px, transparent 1px), radial-gradient(circle, #048ce2 1px, transparent 1px);
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 4px 2px, 4px 2px;
}

.voice-box02 {
  width: 850px;
  margin: 0 auto;
  background-image: radial-gradient(circle, #048ce2 1px, transparent 1px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 4px 2px;
}

.voice-box-inner {
  display: flex;
  padding: 40px 0;
  text-align: left;
}

.voice-box-inner img {
  height: 150px;
  margin: auto 40px auto 0;
}

.voice-box-inner p {
  margin-top: 16px;
}

@media screen and (max-width:1015px){
  #service {
    display: block;
    padding: 32px 0 24px 0;
    background-color: #FFFAE5;
    position: relative;
    background-image: none;
  }

  .service-inner {
    max-width: 80%;
    text-align: center;
    padding: 0;
  }

  .service-content {
    display: block;
  }

  .service-inner {
    width: 50%;
    display: block;
    margin: 40px auto 0 auto;
  }

  .service-image img {
    width: 100%;
    height: auto;
    border-radius: 20px 20px 0 0;
  }

  .service-text {
    width: 100%;
    height: auto;
    padding: 32px;
    border-radius: 0 0 20px 20px;
    text-align: center;
  }

  .main-text {
    text-align: left;
    padding-top: 15px;
    background-image: radial-gradient(circle, #048ce2 1px, transparent 1px), radial-gradient(circle, #048ce2 1px, transparent 1px);
    background-position: left top;
    background-repeat: repeat-x, repeat-x;
    background-size: 4px 2px;
  }

  .service-title {
    display: inline-block;
    border-bottom: none;
    padding: 0;
    text-align: center;
    margin: 0 auto;
  }

  #voice {
    display: block;
    max-width: 100%;
    padding: 0 0 64px 0;
    background-color: #FFFAE5;
  }

  .voice-inner {
    width: 50%;
    text-align: center;
    padding: 32px 32px 8px 32px;
  }

  .voice-box01 {
    width: 100%;
    margin:0 auto;
    background-position: left bottom;
  }

  .voice-box02 {
    width: 100%;
    margin: 0 auto;
    background-image: none;
  }

  .voice-box-inner {
    display: block;
    padding: 24px 0;
    text-align: center;
  }

  .voice-box-inner img {
    height: 130px;
    margin: 0 auto 16px auto;
  }

  .voice-box-inner p {
    margin-top: 16px;
    text-align: left;
  }
}

@media screen and (max-width:640px){
  .service-inner {
    width: 80%;
    display: block;
    margin: 40px auto 0 auto;
  }

  .voice-inner {
    width: 80%;
    text-align: center;
    padding: 32px 32px 8px 32px;
  }
}