@charset "UTF-8";

.first-view {
  height: 30vw;
  min-height: 140px;
  max-height: 270px;
}

.service-contents {
  padding: clamp(45px, 10vw, 90px) 7vw;
  background: linear-gradient(180deg, #f9ffff, #eefcff);
}

.service-contents-inner {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.service-hp,
.service-design,
.service-cording,
.service-support {
  width: 100%;
  border: solid 1.5px #21B2E1;
  border-radius: 22px;
  margin-bottom: clamp(25px, 7vw, 70px);
}

.service-hp{
  padding: clamp(20px, 5vw, 50px) clamp(15px, 5vw, 50px);
}

.service-design,
.service-cording,
.service-support {
  padding: clamp(20px, 4vw, 30px) ;
}


.service-support {
  margin: 0;
}


.service-title {
  color: #0F5F79;
  font-weight: 600;
  padding-left: 3%;
  font-size: clamp(16px, 3.5vw, 28px);
  border-left: solid #4BD0FB clamp(5px, 0.7vw, 10px);
  margin-bottom: clamp(15px,3%,20px);
}

.service-desc {
  margin-bottom: 10%;
  color: #333;
  font-size: clamp(12px, 2.2vw, 20px);
}

.content-inner {
  position: relative;
  width: 100%;
  height: clamp(100px, 20vw, 150px);
  margin-top: 7%;
  border-radius: 20px;
  padding: clamp(7px, 5vw, 20px) ;
}

.content-inner:nth-of-type(1) {
  background-color: #E7F9FF;
}

.content-inner:nth-of-type(2) {
  background-color: #C9F2FF;
}

.content-inner:nth-of-type(3) {
  background-color: #9DE7FF;
}

.content-cover .content-inner {
  background-color: #7CDFFF;
}

.content-inner:nth-of-type(5) {
  height: clamp(140px, 30vw, 200px);
  border:dashed 1.5px #00ACE4;
  margin-top: 5%;
}

.content-cover {
  padding-bottom: clamp(30px, 10vw, 50px);
  background-size: 10px 1.5px;
  background-position: bottom;
  background-image: linear-gradient(to right, #c7c7c7 5px, transparent 5px);
  background-repeat: repeat-x;
  width: 100%;
}

.content-inner img{
  position: absolute;
  top: 98%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(30px,10vw,80px);
  height: clamp(15px,3vw,23px);
}

.service-icon {
  display: block;
  margin: clamp(10px, 3vw, 30px) auto ;
  width: clamp(30px, 7vw, 60px);
}

.content-inner dt {
  text-align: center;
  color: #333;
  font-size: clamp(14px, 2.5vw, 22px);
  line-height: 0.9em;
  font-weight: 500;
}

.content-inner dt span {
  font-size: 0.6em;
  color: #005672;
  font-weight: 400;
}

.content-inner dd {
  color: #474747;
  font-size: clamp(9px, 2vw, 16px);
  line-height: 1.4em;
  margin-top: clamp(10px, 3.5vw, 25px);
}

.content-inner dd:nth-of-type(2) {
  margin-top: 7px;
}

.content-inner dd span {
  line-height: 0em;
}

.service-text {
  color: #565252;
  font-size: clamp(9px, 2vw, 16px);
  width: 60%;
  line-height: 1.3em;
}

.service-text span {
  font-weight: 600;
  font-size: 1.02em;
}

.service-inner-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
}


.service-inner-group img {
  width: clamp(60px, 15vw, 140px);
  height: clamp(60px, 15vw, 140px);
}



@media (max-width:759px) {

  .service-text {
  width: 65%;
}


}