@charset "UTF-8";

.clip-box__original {
  aspect-ratio: 16/9;
  width: min(100%, 400px);
  border: 1px solid #cccccc;

  img {
    width: 100%;
    height: auto;
  }
}


.clip-box01,
.clip-box02,
.clip-box03,
.clip-box04,
.clip-box05 {
  width: min(100%, 400px);
  border: 1px solid #cccccc;
  img {
        width: 100%;
    height: auto;
  }
}

.clip-box01 {
  img {
    clip-path: inset(10px 20px 30px 40px);
  }
}

.clip-box02 {
  img {
    clip-path: inset(10px 20px 30px 40px round 10px);
  }
}
.clip-box03 {
  img {
    clip-path: circle(100px at 50% 60%);
  }
}
.clip-box04 {
  img {
    clip-path: ellipse(60px 100px at 50% 60%);
  }
}
.clip-box05 {
  img {
    clip-path: polygon(130px 0px, 0px 160px, 220px 220px);
  }
}


.resize{
  width: min(100%, 640px);
  height: auto;
}