@charset "utf-8";

.area-wrap{
  border:2px solid #F39F14;
  background:#fff;
  padding:1rem 2rem 2rem;
  display:flex;
  justify-content: space-between;
  align-items: center;
  margin:2.5rem 0 5rem;
}

.area-wrap > img{
  width:55%;
}

.area-text{
  width:41%;
}

.case-wrap{
  display:flex;
  justify-content: space-between;
}

.case-item{
  width:31%;
}

.case-top{
  border:2px solid #32C1FF;
  background:#F5FFFF;
  text-align:center;
  margin-bottom:20px;
}

.case-top > p{
  color:#fff;
  background:#32C1FF;
}

.case-top > h3{
  font-size:1rem;
  margin:1rem ;
  line-height: 1.8;
}

.case-top > h3 strong{
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  font-weight:500;
  background: linear-gradient(transparent 60%, #A8E5FF 40%);
}

.case-top > div{
  margin:1rem ;
  border:1px solid #32C1FF;
  background:#FFFFFF;
  padding:8px;
}

.case-top > div p:first-child{
  color:#32C1FF;
  font-size:14px;
}

.case-top > div p:last-child{
  font-size:14px;
  text-align:left;
}

.case-bottom{
  border:2px solid #32C1FF;
  background:#F5FFFF;
  padding:10px;
}

.case-bottom > p{
  text-align:center;
  font-weight:500;
  margin-bottom:0.5rem ;
}

.case-flow{
  font-size:14px;
}  

.case-flow > p{
  padding-bottom:4px;
  border-bottom:1px solid #32C1FF;
  margin-bottom:1rem ;
}

.case-flow:not(:last-child){
  margin-bottom:020px ;
}

.case-flow-item{
  position:relative;
}

.case-flow-item::before{
  content:"";
  position:absolute;
  top:0;
  left: 49px;
  height: 100%;
  width: 1px;
  background-image: linear-gradient(to bottom, #32C1FF 1px, transparent 1px);
  background-size: 1px 3px;
  background-repeat: repeat-y;
  background-position: left top;
}

.case-flow-item div{
  display:flex;
}

.case-flow-item div p:first-child{
  width:60px;
}

.case-flow-item div p:last-child{
  width:calc(100% - 60px);
  padding:0 0 1rem ;
}

.case-item.orange .case-top{
  border: 2px solid #F8B62A;
  background: #FFF9D1;
}

.case-item.orange .case-top > p{
  background: #F8B62A;
}

.case-item.orange .case-top > div{
  border: 1px solid #F8B62A;
}

.case-item.orange .case-top > div p:first-child{
  color:#F8B62A;
}

.case-item.orange .case-bottom {
  border: 2px solid #F8B62A;
  background: #FFF9D1;
}

.case-item.orange .case-flow > p {
  border-bottom: 1px solid  #F8B62A;
}

.case-item.orange .case-flow-item::before{
  background-image: linear-gradient(to bottom, #F8B62A 1px, transparent 1px);
  background-size: 1px 3px;
  background-repeat: repeat-y;
  background-position: left top;
}

.case-item.orange .case-top > h3 strong {
  background: linear-gradient(transparent 60%, #FFDB90 40%);
}

.case{
  margin-bottom:5rem;
}

.support-wrap{
  display: flex;
  flex-wrap: wrap;
  gap:20px 24px;
}

.support-wrap > div{
  width:calc((100% - 48px)/3);
  padding: 10px 8px;
  background: #fff;
  border: 2px solid #F39F14;
  text-align:center;
}

.support-wrap > div p:first-child{
  color:#F39F14;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
}

@media screen and (max-width: 1400px) {
  .case-item {
    width: 32%;
  }
}

@media screen and (max-width: 1279px) {
  .case-wrap {
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  .case-item {
    width: 60%;
  }
}

@media screen and (max-width: 1024px) {
  .area-wrap{
    flex-direction: column;
    gap: 2.5rem;
  }
  .area-text {
    width: 100%;
  }
  .area-wrap > img {
    width: 80%;
  }
  .area-wrap .lower-title {
    margin: 0 0 0.5rem;
  }
  .case-item {
    width: 80%;
  }
  .support-wrap > div {
    width: calc((100% - 24px) / 2);
  }
}

@media screen and (max-width: 767px) {
  .support-wrap > div,
  .case-item,
  .area-wrap > img{
    width: 100%;
  }
  .area-wrap{
    gap: 1.5rem;
    padding: 1rem 0.5rem 2rem;
  }
  .case-top > h3{
        margin: 1rem 0;
  }
}