@charset "UTF-8";

/*--------------------------------
modify
---------------------------------*/
.-font_agua {
  color: var(--aqua, #3387ce);
}

.-round-lefttop {
  border-radius: 10px 0px 0px 0px;
}

.-round-righttop {
  border-radius: 0px 10px 0px 0px;
}

.-round-leftbtm {
  border-radius: 0px 0px 0px 10px;
}

.-round-rightbtm {
  border-radius: 0px 0px 10px 0px;
}

.-mgtop80 {
  margin-top: 80px;
}

.-mgtop50 {
  margin-top: 50px;
}

.-mgtop32 {
  margin-top: 32px;
}

.-mgtop30 {
  margin-top: 30px;
}

.-mgtop16 {
  margin-top: 16px;
}

.br-sp {
  display: none;
}

.br-pc {
  display: block;
}

@media screen and (max-width: 1010px) {
  .br-pc {
    display: none;
  }
  .solution-item-title,
  .solution-item-description {
    font-size: 14px;
  }
  .-security-btn_mgn {
    width: 198px;
  }
}

@media screen and (max-width: 767px) {
  .br-sp {
    display: block;
  }
  .br-pc {
    display: none;
  }
  .-round-lefttop {
    border-radius: 10px 10px 0px 0px;
  }
  .-round-righttop {
    border-radius: 0px 0px 0px 0px;
  }

  .-round-leftbtm {
    border-radius: 0px 0px 0px 0px;
  }

  .-round-rightbtm {
    border-radius: 0px 0px 10px 10px;
  }

  .solution-item-title,
  .solution-item-description {
    font-size: 16px;
  }
  .-security-btn_mgn {
    width: 190px;
  }
}
/*--------------------------------
全体
---------------------------------*/
.contactcenter_title {
  color: var(----navy, #00437c);
  font-size: 35px;
  font-weight: 700;
  line-height: 130%;
  text-align: center;
}
/*--------------------------------
説明文
---------------------------------*/
.lead {
  padding: 48px 0 40px;
}

.lead_text {
  font-size: 18px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 767px) {
  .description {
    padding: 50px 0;
  }
}
/*--------------------------------
選ばれる理由
---------------------------------*/
.reason {
  background: #f4f7fa;
}

.reason {
  padding-top: 80px;
}

.reason-img {
  width: 100%;
  max-width: 585px;
  margin: 56px auto 120px;
  display: block;
}

.reason-item_txt {
  line-height: 160%;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2%;
}

.reason-item {
  border-radius: 10px;
  border: 2px solid var(----aqua, #3387ce);
  background: #fff;
  width: 48.9%;
  max-width: 496px;

  position: relative;
}

.reason-item::before {
  border-radius: 20px;
  background: linear-gradient(221deg, #3387ce 37.68%, #93b8d8 86.68%);
  display: flex;
  max-width: 360px;
  width: 73%;
  min-height: 63px;
  justify-content: center;
  align-items: center;
  padding: 4% 4%;

  position: absolute;
  top: -30px;
  left: calc(50% - 36.5%);

  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.03em;
}

.reason-item:nth-child(1)::before {
  content: "深い専門性";
}

.reason-item:nth-child(2)::before {
  content: "セキュリティ";
}

.reason-item:nth-child(3)::before {
  content: "マルチスキル";
}

.reason-item:nth-child(4)::before {
  content: "自社開発システム";
}

.reason-item:nth-child(5)::before {
  content: "コスト、機能の最適化";
}

.reason-item:nth-child(3),
.reason-item:nth-child(4),
.reason-item:nth-child(5) {
  margin-top: 66px;
}

.reason-sublist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 72px 50px 40px 50px;
}

.reason-item_img {
  object-fit: cover;
  min-width: 19px;
  min-height: 19px;
  width: 19px;
  height: 19px;
  margin-top: 5px;
}

.reason-subitem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.-sp {
  display: none;
}

@media screen and (max-width: 932px) {
  .reason-item::before {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  .reason-sublist {
    padding: 62px 30px 40px 30px;
  }
  .reason-list {
    flex-direction: column;
  }
  .reason-item {
    margin-top: 50px;
    width: 100%;
    max-width: none;
  }
  .reason-item:nth-child(3),
  .reason-item:nth-child(4),
  .reason-item:nth-child(5) {
    margin-top: 50px;
  }
  .reason-item::before {
    max-width: none;
    width: 82.6%;
    left: calc(50% - 41.3%);
    top: -32px;
    font-size: 24px;
  }
  .reason-img {
    margin: 45px auto;
  }
  .reason {
    padding-top: 55px;
  }
  .-pc {
    display: none;
  }
  .-sp {
    display: block;
  }
}

@media screen and (max-width: 575px) {
  .reason-item::before {
    font-size: 20px;
  }
  .contactcenter_title {
    font-size: 24px;
  }
}

/*--------------------------------
ソリューション提供実績
---------------------------------*/
.solution {
  background: #f4f7fa;
  padding-top: 78px;
}

.contactcenter-container {
  border-radius: 10px;
  background: #fff;
  padding: 80px 0px;
  margin-top: 56px;
}

.solution-subtitle-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.-solution_mgn {
  margin-top: 80px;
}

.solution-subtitle_num {
  color: var(----bluegrey, #39668f);
  font-family: urw-din, sans-serif;
  font-size: 48px;
  font-weight: 700;
}

.solution-subtitle {
  color: var(----aqua, #3387ce);
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
  margin-top: 5px;
}

.solution-item {
  display: flex;
}

.solution-item p {
  line-height: 160%;
  letter-spacing: 0.03em;
}

.solution-list,
.solution-item {
  width: 100%;
}

.solution-list {
  margin-top: 32px;
}

.solution-item-title {
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  background: #6a81a3;
  width: 27%;
  padding: 20px;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;

  letter-spacing: 0.03em;
  line-height: 160%;
}

.solution-item-description {
  padding: 20px;
  width: 73%;
  border: 2px solid #fff;
  background: var(----bg, #f4f7fa);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 160%;
}

.-bg_contactcenter-solution {
  background: #5f96c2;
}

@media screen and (max-width: 767px) {
  .solution-subtitle {
    max-width: 300px;
  }
  .solution-subtitle-container {
    gap: 10px;
  }
  .solution-item {
    display: flex;
    flex-direction: column;
  }
  .solution-item-title {
    width: 100%;
  }
  .solution-item-description {
    width: 100%;
  }
  .solution-item-title {
    align-items: center;
    justify-content: center;
  }
  .contactcenter-container {
    padding: 40px 0;
  }
  .solution-list {
    margin-top: 30px;
  }
  .-solution_mgn {
    margin-top: 55px;
  }
}

@media screen and (max-width: 575px) {
  .solution-subtitle {
    font-size: 18px;
    max-width: 240px;
    text-align: center;
  }
}

@media screen and (max-width: 450px) {
  .solution-subtitle-container {
    flex-direction: column;
    gap: 0;
  }
}

/*--------------------------------
セキュリティー体制
---------------------------------*/
.security {
  padding-top: 120px;
  background: #f4f7fa;
}

.security-subtitle {
  color: var(----aqua, #3387ce);
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.03em;
}

.security-subtitle_description {
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.03em;

  margin-top: 32px;
}

.security-detail {
  display: flex;
  align-items: center;
  gap: 40px;
}

.security-btn {
  border-radius: 10px;
  border: 1px solid var(----navy, #00437c);
  background: #fff;
  min-height: 84px;
  padding: 0 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 31.4%;
}

.security-btn:hover {
  opacity: 0.6;
}

.-privacy-btn {
  width: 100%;
  max-width: 400px;
  margin-top: 32px;
}

.security-btn_txt {
  color: #00437c;
  font-size: 18px;
  font-weight: 600;
  line-height: 140%;
  text-align: left;
}

.security-btn_PII {
  font-size: 16px;
}

.security-btn-container {
  margin-top: 64px;
  display: flex;
  gap: 2.8%;
}

.security_spnone {
  display: block;
}

.security_pcnone {
  display: none;
}

.security-detail_img {
  min-width: 116px;
}

.-security-mgn {
  margin-top: 80px;
}

.-isms-mgn {
  margin-top: 50px;
}

.security-detail_txt,
.security_pcnone {
  letter-spacing: 0.03em;
  font-weight: 500;
  line-height: 160%;
}

@media screen and (max-width: 1146px) {
  .security-btn_PII {
    font-size: 15px;
  }
}

@media screen and (max-width: 962px) {
  .security-btn {
    padding: 0 2%;
  }
}

@media screen and (max-width: 891px) {
  .security-btn {
    padding: 0 1%;
  }
}

@media screen and (max-width: 767px) {
  .security-btn_PII {
    font-size: 16px;
    text-align: center;
  }
  .security-btn {
    padding: 0 3%;
  }
  .security {
    padding-top: 90px;
  }
  .security_spnone {
    display: none;
  }
  .security_pcnone {
    display: block;
    margin-top: 10px;
  }
  .-security-mgn {
    margin-top: 55px;
  }
  .-privacy-btn {
    margin-top: 15px;
  }
  .-isms-mgn {
    margin-top: 30px;
  }
  .security-btn-container {
    margin-top: 0px;
    flex-direction: column;
  }
  .security-btn {
    margin-top: 15px;
    width: 100%;
  }
  .-privacy-btn {
    max-width: none;
  }
  .security_sp425 {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .security-detail_txt {
    font-size: 14px;
  }
  .security_pcnone {
    font-size: 14px;
  }
  .security-subtitle {
    font-size: 20px;
  }
}

@media screen and (max-width: 425px) {
  .security-detail_txt {
    display: none;
  }
  .security_sp425 {
    display: block;
  }
}

.-fontweight700 {
  font-weight: 700;
}

/* ソリューション一覧へボタン */
.btn-back_wrap {
  padding-top: 100px;
  background: var(--bg);
  padding-bottom: 160px;
}

.btn-back {
  color: var(--navy);
  font-family: Noto Sans JP, sans-serif;
  font-weight: 500;
  font-size: 20px;
  font-style: normal;
  border: var(--navy) solid 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 200px;
  transition: 0.5s ease;
  position: relative;
  overflow: hidden;
  max-width: 540px;
  width: 84%;
  height: 72px;
  margin: 0 auto;
  background: #fff;
}

.btn-back:hover {
  color: #fff;
  transform: scale(1.1, 1.1);
}

.btn-back::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
  overflow: hidden;
  z-index: -1;
}

.btn-back:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-back_text {
  position: relative;
}

@media screen and (max-width: 767px) {
  .btn-back_wrap {
    padding-top: 60px;
    padding-bottom: 100px;
  }
}

@media screen and (max-width: 575px) {
  .btn-back {
    font-size: 16px;
    height:64px;
  }
}