/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  position: relative;
}

.container {
  width: 100%;
  height: 99dvh;
  padding: 10px;
  clip-path: polygon(
    70% 100%,
    70% 90%,
    100% 90%,
    100% 0%,
    30% 0%,
    30% 10%,
    0% 10%,
    0% 100%
  );
}

img {
  width: 100%;
  height: 100dvh;
  object-fit: cover;
}

.title {
  position: absolute;
  top: 0;
  left: 4%;
  font-size: clamp(32px, 4vw, 64px);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.subtitle {
  position: absolute;
  bottom: 0;
  right: 4%;
  text-align: center;
  text-transform: uppercase;
  /* clamp(最小値, 望ましい値, 最大値) */
  font-size: clamp(16px, 2vw, 32px);
}

span {
  font-size: clamp(32px, 4vw, 64px);
  font-weight: bold;
}