/* ========================================================================== */
/* business content */
/* ========================================================================== */

/* service */
/* ========================================================================== */

.service_block .innerValuesMessage {
  /* max-width: min(1100 / 1000 * 100vw, 1100px); */
  max-width: 1350px;
  margin: 40px auto;
  text-align: center;
}
.innerValuesMessage p {
  font-size: 1.2rem;
}
/*
.service_block .service_list {
  max-width: 1350px;
  margin: auto;
}

.service_block .service_list ul {
  display: flex;
  gap: 50px 50px;
  justify-content: center;
  flex-wrap: wrap;
}
*/

.service_block .service_list .service_item {
  width: 180px;
  height: 180px;
  border: 1px solid #a8a8a8;
  color: #ffffff;
  background: #052d94;
  font-size: 1rem;
  padding: 2%;
  display: flex;
  align-content: space-around;
  justify-content: center;
  flex-wrap: wrap;
}
.service_block .service_list .service_item img {
  width: auto;
  height: 80px;
}

.service_block .service_list .service_item p {
  margin: 0px;
}
:root {
  --r: 400;
}
.service_list {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--r) * 0.1svw);
  height: calc(var(--r) * 0.1svw);
  border-radius: 50%;
  box-sizing: border-box;
  > div {
    --a2: calc(var(--a) * 1deg - 90deg);
    --x: calc(cos(var(--a2)) * var(--r) * 0.05svw);
    --y: calc(sin(var(--a2)) * var(--r) * 0.05svw);
    position: absolute;
    color: #555;
    translate: var(--x) var(--y);
  }
}
#circleCanvas {
  position: absolute;

  width: calc(var(--r) * 0.1svw);
  height: calc(var(--r) * 0.1svw);
}
#circleCanvas circle {
  transform: rotate(230deg);
  transform-origin: center;
}
@keyframes drawCircle {
  0% {
    stroke-dashoffset: var(--circumference);
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --r: 138;
  }
  .service_list {
    width: calc(var(--r) * 2px);
    height: calc(var(--r) * 2px);
    border: 20px solid #ddd;
    > div {
      --a2: calc(var(--a) * 1deg - 90deg);
      --x: calc(cos(var(--a2)) * var(--r) * 1px);
      --y: calc(sin(var(--a2)) * var(--r) * 1px);
      translate: var(--x) var(--y);
    }
  }
  .service_block .service_list .service_item {
    transform: scale(0.5);
    font-size: 1.6rem;
  }
  #circleCanvas {
    display: none;
  }
}
/* .project_case */
/* ========================================================================== */
.project_case_block {
  background-color: #052d94;
  color: #ffffff;
}

.project_case_block .middleTitle h1 {
  color: #eaf0ff;
  max-width: 600px;
  margin: 0px auto;
  text-align: center;
  display: block;
}
.project_case_block .project_case_list {
  margin: 60px auto 0px;
}

.project_case_list {
  max-width: 1100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
}

.project_case_item {
  list-style: none;
}

.project_case_list a {
  color: #eaf0ff;
}
.project_case_block .project_case_item div {
  height: 20svh;
  margin-bottom: 1rem;

  background-size: cover;
  display: flex;
  align-items: flex-end;
  padding: 3rem;
  font-weight: 600;

  flex-wrap: wrap;
  flex-flow: column;
  align-items: start;
  justify-content: center;
}
.project_case_list h1 {
  color: #eaf0ff;
  font-size: 1.5rem;
  padding-bottom: 0.4rem;
  border-width: 1px;
  margin: 0;
}
.project_case_list p {
  color: #eaf0ff;
  font-size: 1rem;
  margin: 0;
}

.project_case_item .item1 {
  background: url("../images/case-study_01.png") top center no-repeat;
}
.project_case_item .item2 {
  background: url("../images/contract_01.png") top center no-repeat;
}
.project_case_item .item3 {
  background: url("../images/roadmap_01.png") top center no-repeat;
}
.project_case_item .item4 {
  background: url("../images/optimization_01.png") top center no-repeat;
}
.project_case_item .item5 {
  background: url("../images/24hours-365days-support_01.png") top center
    no-repeat;
}
.project_case_item .item6 {
  background: url("../images/coding_02.png") top center no-repeat;
}
.project_case_item .item7 {
  background: url("../images/money-transfer_01.png") top center no-repeat;
}
.project_case_item .item8 {
  background: url("../images/offline-hearing_01.png") top center no-repeat;
}
.project_case_item .item9 {
  background: url("../images/document_01.png") top center no-repeat;
}
@media screen and (max-width: 768px) {
  .project_case_block .project_case_list .project_case_item div {
    height: 30svh;
    padding: 1rem;
    min-height: 20rem;
  }
  .project_case_list {
    grid-template-columns: repeat(1, 1fr);
  }
  .sp {
    display: none;
  }
}

.project_case_block .listMoreButton {
  color: #eaf0ff;
}

.hideCaseContents {
  display: none;
  opacity: 0;
  overflow: hidden;
  z-index: 0;
}

.project_case_list #caseTrigger:checked ~ .hideCaseContents {
  display: block;
  transform: translateY(-50%);
  animation: listWrap 1s ease-in-out forwards;
}

@keyframes listWrap {
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

.white::before,
.white::after {
  background-color: #ffffff;
}

.middleTitleSub {
  text-align: center;
  flex-wrap: wrap;
  /*padding-top: 1rem;*/
  width: 100%;
  margin-top: 2rem;
}
.middleTitleSub h1 {
  color: #ffffff;
  font-size: 1.5rem;
  width: fit-content;
  margin: 0 auto;
  border-bottom: solid;
  border-style: #052d94;
  border-width: 5px;
}

@media screen and (max-width: 768px) {
  .middleTitleSub h1 {
    display: block;
    width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin: 0;
  }
}

.project_case_tag {
  display: inline-block;
  margin: 0 0.1em 0.6em 0;
  padding: 0.6em;
  line-height: 1;
  text-decoration: none;
  color: #052d94;
  background-color: #eaf0ff;
  border: 1px solid #052d94;
  border-radius: 2em;
}