/* CMS
-------------------------------------------*/

.cms .sec_head{
  width: 30%;
}
.cms .sec_cont{
  width: min(680px,70%);
}

#process .sec_cont{
  position: relative;
}
#process .sec_cont .line{
  background: linear-gradient(
  to bottom,
  rgba(255,164,126, 0) 0%,
  rgb(255,164,126) 10%,
  rgb(218,218,182) 40%,
  rgb(0,172,178) 90%,
  rgba(0,172,178, 0) 100%
  );
  width: clamp(48px,7.38vw,82px);
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#process .sec_cont .list_process{
  padding: 8% 0;
}
.list_process dl{
  display: flex;
  justify-content: flex-start;
}
.list_process dl dt{
  padding: 0 3%;
  color: #fff;
  text-align: center;
  font-size: clamp(21px,3.2vw,36px);
}
.list_process dl dd{
  padding: 2% 5%;
  padding-right: 0;
}
.list_process dl dd p{
  letter-spacing: 0.075em;
}
.list_process dl dd .tit{
  font-size: clamp(14px,2.15vw,20px);
  padding-bottom: 3%;
}
.list_process dl dd .note{
  font-size: clamp(12px,1.5vw,14px);
  padding-bottom: 3%;
}
.list_process dl dd .ph_area{
  display: flex;
  justify-content: space-between;
}
.list_process dl dd .ph_area .text{
  width: 50%;
}
.list_process dl dd .ph_area .ph{
  width: 43%;
}
.list_process dl dd .ph_area .ph img{
  object-fit: cover;
  border-radius: 10px;
}

@media screen and (max-width: 650px){
  .cms .sec_head,
  .cms .sec_cont{
    width: 100%;
  }
}