@charset "UTF-8";


/* ---------------------------------------
 * Hero style
/* --------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 124px;
  background: url(../img/hero_img_pc.jpg) no-repeat center center;
  background-size: cover;
  min-height: 630px;
}
.hero-service-name {
  position: absolute;
  top: 30px;
  right: 40px;
  height: 50px;
  padding: 0 14px;
  background-color: #fff;
  text-align: center;
  font-size: 21px;
  line-height: 50px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.hero_text {
  padding: 70px 80px 20px;
}
.hero_text p {
  margin-top: 0;
  font-size: 20px;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 20px;
  color: #7479C7;
  letter-spacing: 0.05em;
}
.hero_text p span {
  font-size: 26px;
}
.hero_text h2 {
  font-size: 37px;
  line-height: 1.568;
  font-weight: bold;
  letter-spacing: 0.05em;
}
@media (min-width: 1440px) {
  .hero {
    min-height: 740px;
  }
  .hero_text {
    padding-top: 100px;
    padding-left: 120px;
  }
  .cv_button {
    padding-left: 40px;
  }
  /* ASPICクラウドアワード2024 */
  .ASPICaward {
    padding-left: 40px;
  }
  .ASPICaward .text a {
    display: block;
  }
}

@media (max-width: 999px) {
  .hero {
    margin-top: 116px;
    background: #E9F0F6 url(../img/hero_img_tb_sm.jpg) no-repeat center bottom;
    background-size: 100%;
    min-height: 0;
  }
  .hero-service-name {
    top: auto;
    bottom: 30px;
    font-size: 20px;
  }
  .hero_text {
    padding: 28px 40px 20px;
  }
  .hero_text p {
    margin-bottom: 15px;
  }
  .hero_text h2 {
    margin: 0 0 15px;
    font-size: 29px;
  }
}

@media (max-width: 768px) {
  .hero {
    margin-top: 150px;
  }
}

@media (max-width: 595px) {
  .hero-service-name {
    top: auto;
    bottom: 24px;
    left: 40px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    display: table;
    width: 100%;
    max-width: 275px;
    margin: 0 auto;
  }
  .hero_text {
    display: table;
    margin: 0 auto;
    padding: 18px 40px 20px;
  }
  .hero_text p {
    font-size: 13px;
    margin-bottom: 10px;
  }
  .hero_text p span {
    font-size: 16px;
  }
  .hero_text h2 {
    margin: 0;
    font-size: 23px;
  }
}


/* ---------------------------------------
 * Section style
/* --------------------------------------- */
.section-bg {
  background: #FFF9D6;
  padding: 100px 20px 40px; 
}
.section-bg-type2 {
  background-color: #E3EFFF;
}
.section-title {
  margin: 0 60px 70px;
  font-size: 29px;
  line-height: 1.5;
  font-weight: bold;
}
.section-body {
  margin: 0 auto;
  max-width: 900px;
}

@media (min-width: 768px) and (max-width: 999px) {
  .section-bg {
    padding: 80px 40px 40px; 
  }
  .section-title {
    margin: 0 0 50px;
    font-size: 29px;
    line-height: 1.4;
  }
  .section-body {
    max-width: 711px;
  }
}

@media (max-width: 767px) {
  .section-bg {
    padding: 50px 0 30px; 
  }
  .section-title {
    margin: 0 auto 30px;
    width: 85%;
    font-size: 24px;
    line-height: 1.5;
  }
  .section-body {
    width: 85%;
  }
}

@media (max-width: 767px) {
  .section-bg {
    padding: 50px 0 30px; 
  }
  .section-title {
    margin: 0 auto 30px;
    width: 85%;
    font-size: 23px;
    line-height: 1.5;
  }
  .section-body {
    width: 85%;
  }
}



/* ---------------------------------------
 * Point style
/* --------------------------------------- */
.point {
}
.point-body {
  display: flex;
  gap: 38px;
}
.point-item {
  position: relative;
  margin-top: 50px;
  padding: 23px;
  width: calc(100% / 3);
  background-color: #FAE47F;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}
.point-title {
  font-size: 23px;
  line-height: 1.739;
  text-align: center;
}
.point-number {
  position: absolute;
  top: -50px;
  left: 50%;
  width: 74px;
  transform: translateX(-50%);
}
.point-number img {
  width: 100%;
}
.point-image {
  display: table;
  margin: 0 auto;
}
.point-image img {
  width: 95px;
}
.point-item-02 .point-image img {
  width: 91px;
}
.point-text {
  font-size: 17px;
  line-height: 1.647;
}


@media (max-width: 999px) {
  .point-body {
    gap: 25px;
  }

  .point-number {
    top: -40px;
    width: 58px;
  }
  .point-text {
    font-size: 16px;
    line-height: 1.625;
  }
}

@media (max-width: 767px) {
  .point-body {
    gap: 15px;
  }
  .point-item {
    padding: 18px;
  }
  .point-title {
    font-size: 16px;
    line-height: 1.75;
    text-align: center;
  }
  .point-image img {
    width: 93px;
  }
  .point-item-02 .point-image img {
    width: 90px;
  }
  .point-text {
    font-size: 14px;
    line-height: 1.5;
  }

}
@media (max-width: 595px) {
  .point-body {
    flex-direction: column;
    gap: 10px;
  }
  .point-item {
    width: 100%;
  }
  .point-title {
    font-size: 16px;
    line-height: 1.75;
    text-align: left;
  }
  .point-item-body {
    display: flex;
    gap: 20px;
  }
  .point-image {
    width: 125px;
  }
  .point-image img {
    width: 80px;
  }
  .point-item-02 .point-image img {
    width: 77px;
  }
  .point-text {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.5;
  }

}


/* ---------------------------------------
 * Flow style
/* --------------------------------------- */
.flow {
}

.flow-body {
}

.flow-section {
  margin: 0 0 80px;
}

.flow-section-title {
  font-size: 25px;
  line-height: 1.72;
  text-align: center;
}

.flow-section img {
  width: 100%;
}


@media (max-width: 999px) {
  .flow-section {
    margin-bottom: 45px;
  }
}
@media (max-width: 767px) {
  .flow-section-title {
    font-size: 19px;
    line-height: 1.947;
  }

}
@media (max-width: 595px) {
  .flow-section {
    margin-bottom: 35px;
  }
  .flow-section picture {
    display: table;
    margin: 0 auto;
    max-width: 400px;
  }
}

/* ---------------------------------------
 * Value style
/* --------------------------------------- */
.value {
}

.value img {
  width: 100%;
}
.value-lead {
  font-size: 17px;
  line-height: 1.706;
}

.value picture {
  display: block;
  margin: 2.5rem 0 2rem;
}
.value img {
  width: 100%;
}
.value-notes {
  padding: 0 1vw;
  text-align: center;
}
.value-notes li {
  padding-left: 1rem;
  text-indent: -0.75rem;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.value-notes li a {
  text-decoration: underline;
}
.value-notes li a:hover {
  text-decoration: none;
}


@media (max-width: 999px) {
  .value picture {
    margin: 2.2rem 0 1.8rem;
  }
}
@media (max-width: 767px) {
  .value-notes {
    padding: 0 3vw;
  }
}

@media (max-width: 595px) {
  .value picture {
    margin: 1.5rem 0 0.8rem;
  }
  .value-lead {
    font-size: 14px;
    line-height: 1.5;
  }
  .value-notes li {
    font-size: 11px;
    line-height: 1.5;
  }
}